/* ==========================================================================
   SlickLab.Digital — agent tips: the bubbles above the launcher (assets/js/agent-tips.js)
   Separate from the chat panel (agent.css) and the tour (agent-tour.css); uses the site.css tokens and
   the keyframes in agent.css. Animate only transform + opacity.
   ========================================================================== */

/* the launcher calls attention to a new bubble: a hop, a ring and an unread badge */
.ag-launch::before{content:'';position:absolute;inset:-3px;border:2px solid var(--signal);opacity:0;pointer-events:none}
.ag-launch.is-ping{animation:aghop .8s var(--spring) 1}
.ag-launch.is-ping::before{animation:agping 1.3s ease-out 2}
.ag-badge{position:absolute;top:-11px;right:-11px;z-index:2;display:grid;place-items:center;min-width:24px;height:24px;padding:0 6px;background:var(--signal);color:var(--ink);border:2px solid var(--ink);border-radius:999px;font-family:var(--f-mono);font-size:12px;font-weight:700;line-height:1;letter-spacing:0}
.ag-badge.is-pop{animation:agpop .55s var(--spring) backwards}
.ag.has-unread .ag-live{display:none}

/* the stack of bubbles above the launcher, with a typing pause before each */
.ag-tease{
  position:fixed;z-index:59;right:max(var(--ag-edge),env(safe-area-inset-right));bottom:calc(max(var(--ag-edge),env(safe-area-inset-bottom)) + 74px);
  display:flex;flex-direction:column;align-items:flex-end;gap:8px;max-width:min(330px,calc(100vw - 2 * var(--ag-edge)));pointer-events:none;
}
.ag-tease > *{pointer-events:auto}
.ag-tease::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);pointer-events:none}
.ag-tease.is-out{animation:agout .3s var(--ease) forwards;pointer-events:none}
.ag-tease-h{display:flex;align-items:center;background:var(--ink);color:var(--paper);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--signal)}
.ag-tease-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-tease-k i{width:8px;height:8px;background:var(--teal-soft);border-radius:50%;animation:pulse 1.6s ease-in-out infinite}
.ag-tease-x{width:34px;height:30px;border:0;border-left:1px solid #3B3B37;background:transparent;color:var(--paper);font-size:18px;line-height:1}
.ag-tease-x:hover{color:var(--signal)}
.ag-tb{max-width:100%;padding:12px 14px;background:var(--paper);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font-size:15px;line-height:1.45;transform-origin:100% 100%;overflow-wrap:anywhere}
.ag-tb.ag-pop{animation:agpop .5s var(--spring) backwards}
.ag-tb.ag-typing{display:inline-flex;gap:5px;padding:15px 16px}
.ag-tb.ag-typing i{width:7px;height:7px;background:var(--ink);animation:agbounce 1.1s ease-in-out infinite}
.ag-tb.ag-typing i:nth-child(2){animation-delay:.16s;background:var(--signal)}
.ag-tb.ag-typing i:nth-child(3){animation-delay:.32s}
.ag-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.ag-pill{min-height:40px;padding:6px 14px;border:2px solid var(--ink);background:var(--paper);font-family:var(--f-mono);font-size:12px;font-weight:600;letter-spacing:.03em;line-height:1.2;color:var(--ink);transition:background .2s,color .2s,transform .2s,box-shadow .2s;animation:agpop .45s var(--spring) backwards;transform-origin:50% 100%}
.ag-pill:hover{background:var(--ink);color:var(--paper)}
.ag-pill.is-primary{background:var(--signal);background-image:var(--ag-grain);box-shadow:3px 3px 0 var(--ink)}
.ag-pill.is-primary:hover{color:var(--ink);background-color:var(--signal);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.ag-pill.is-quiet{min-height:36px;padding:0 4px;border-color:transparent;background:transparent;color:var(--t3);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.ag-pill.is-quiet:hover{background:transparent;color:var(--ink)}

@media (max-width:640px){
  .ag-tease{bottom:calc(max(var(--ag-edge),env(safe-area-inset-bottom)) + 76px)}
  .ag-tease::after{right:30px}
  .ag-tb{padding:10px 12px;font-size:14px}
  .ag-pill{min-height:38px;padding:5px 12px}
  .ag-acts{margin-top:10px}
}
@media print{.ag-tease{display:none!important}}
@media (forced-colors:active){.ag-tb,.ag-pill{border:2px solid CanvasText}}