/* ==========================================================================
   SlickLab.Digital — site tour: the coach card and the ring around each stop (assets/js/agent-tour.js)
   Separate from the chat panel (agent.css) and the tips (agent-tips.css); uses the site.css tokens and
   the .ag-btn / .ag-link buttons from agent.css. Animate only transform + opacity.
   ========================================================================== */

.ag-coach{
  position:fixed;z-index:65;right:max(var(--ag-edge),env(safe-area-inset-right));bottom:calc(max(var(--ag-edge),env(safe-area-inset-bottom)) + 74px);
  width:min(372px,calc(100vw - 2 * var(--ag-edge)));background:var(--paper);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--signal);
  opacity:0;transform:translateY(12px) scale(.94);transform-origin:100% 100%;transition:opacity .2s,transform .45s var(--spring);
}
.ag-coach.is-in{opacity:1;transform:none}
.ag-coach::after{content:'';position:absolute;right:26px;bottom:-9px;width:14px;height:14px;background:var(--paper);border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg)}
.ag-coach-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-right:14px;background:var(--ink);color:var(--paper);border-bottom:2px solid var(--ink)}
.ag-coach-k{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}
.ag-coach-k i{width:8px;height:8px;background:var(--teal-soft);border-radius:50%;animation:pulse 1.6s ease-in-out infinite}
.ag-coach-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--g1)}
.ag-coach-b{display:flex;flex-direction:column;gap:12px;padding:14px 16px 12px}
.ag-coach-t{margin:0;font-family:var(--f-disp);font-weight:800;letter-spacing:-.03em;line-height:1.05;font-size:22px}
.ag-coach-s{margin:7px 0 0;font-size:15px;line-height:1.5;color:var(--t2)}
.ag-swap{animation:agswap .4s var(--ease) backwards}
.ag-pips{display:flex;gap:5px}
.ag-pips i{flex:1;height:6px;border:1.5px solid var(--ink);background:var(--paper)}
.ag-pips i.is-done{background:var(--ink)}
.ag-pips i.is-now{background:var(--signal)}
.ag-coach .ag-btn-row{flex-wrap:nowrap}
.ag-coach .ag-btn-row .ag-btn:last-child{flex:1}
.ag-coach-x{display:flex;justify-content:space-between;gap:12px}
@media (max-width:640px){                      /* a phone: the coach is a bar along the bottom, where the launcher was */
  .ag-coach{left:max(var(--ag-edge),env(safe-area-inset-left));right:max(var(--ag-edge),env(safe-area-inset-right));bottom:max(var(--ag-edge),env(safe-area-inset-bottom));width:auto}
  .ag-coach::after{display:none}
  .ag.is-touring .ag-launch{visibility:hidden}
}
@media (max-width:640px),(max-height:560px){    /* small screens: cover as little of the page as possible */
  .ag-coach-b{gap:8px;padding:10px 14px 10px}
  .ag-coach-t{font-size:19px}
  .ag-coach-s{margin-top:4px;font-size:14px;line-height:1.4}
  .ag-coach .ag-btn{min-height:40px}
}
@media (max-height:560px){.ag-pips{display:none}}

.ag-ring{position:fixed;left:0;top:0;z-index:55;pointer-events:none;border:3px solid var(--signal);box-shadow:0 0 0 3px var(--ink),8px 8px 0 3px var(--ink);opacity:0;transition:opacity .25s}
.ag-ring.is-on{opacity:1}
.ag-ring::after{content:'';position:absolute;inset:-9px;border:3px solid var(--signal);opacity:0}
.ag-ring.is-on::after{animation:agring 1.3s ease-out 2}

@keyframes agring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.05,1.3)}}
@keyframes agswap{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media print{.ag-coach,.ag-ring{display:none!important}}
@media (forced-colors:active){.ag-coach,.ag-ring{border:2px solid CanvasText}}