/* The agent's ORB (Run 360, E3 — W4: the orb REPLACES the chat pill). The SITE's tokens only (--accent*, --ink, --fb):
   the orb belongs to the client, and its colour is the client's brand. One round thing on a square template — the one
   striking element. Eight states, each a named class on the root (.sa[data-orb="…"]), each drawn on its own:
     idle         soft breathing                      armed        a small ring + "Listening for “Hey Agent”" beside it
     listening    swells with the visitor's voice      thinking     a slow sweep
     speaking     swells with the reply                error        a named line in the panel (+ "Type instead")
     limit        voice minutes used up (typing works) unavailable  a named line; the page untouched
   Without the voice (web-voice plugged out or not configured) the orb is the typed agent's launcher alone: idle, no glow. */

.sa-orb-btn{
  position:fixed;right:92px;bottom:26px;z-index:var(--z-sticky);
  width:56px;height:56px;border-radius:50%;border:0;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:var(--on-accent);
  box-shadow:0 10px 26px -10px rgba(var(--shadow-rgb),0.6),inset 0 1px 0 rgba(255,255,255,0.28);
  transition:transform .25s var(--ease-out),box-shadow .25s;
}
.sa-orb-btn svg{width:24px;height:24px;fill:currentColor;position:relative;z-index:1}
.sa-orb-btn:hover{transform:scale(1.05)}
.sa-orb-btn:active{transform:scale(0.96)}
.sa-orb-btn:focus-visible{outline:2px solid var(--accent-ink);outline-offset:4px}
.sa-orb-btn[aria-expanded="true"]{display:none}
/* the ring: the state's own mark, outside the button so it never changes its size or position */
.sa-orb-ring{position:absolute;inset:-6px;border-radius:50%;pointer-events:none;border:2px solid rgba(var(--accent-rgb),0)}

/* idle: a slow breath of the ring (4 s; reduced motion: none) */
/* Run 404 (Run 403 carry-over 2): the ring breathes by OPACITY and transform only — the browser's compositor draws it;
   breathing its border-colour repainted the page 60 times a second at rest (≈ 24 % of a 4×-slowed phone core) */
.sa[data-orb="idle"] .sa-orb-ring{border-color:rgba(var(--accent-rgb),.45);animation:sa-orb-breathe 4s ease-in-out infinite}
@keyframes sa-orb-breathe{0%,100%{opacity:0;transform:scale(.94)}50%{opacity:1;transform:scale(1)}}

/* armed: a fixed ring + the indicator beside the orb — never armed without it showing */
.sa[data-orb="armed"] .sa-orb-ring{border-color:rgba(var(--accent-rgb),.85);border-style:dashed;animation:none}
.sa-orb-tag{
  position:fixed;right:160px;bottom:36px;z-index:var(--z-sticky);
  display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-height:44px;padding:6px 6px 6px 14px;max-width:min(460px,calc(100vw - 176px));border-radius:16px;
  background:var(--surface);color:var(--ink);border:1px solid rgba(var(--shadow-rgb),0.16);
  box-shadow:0 8px 22px -12px rgba(var(--shadow-rgb),0.55);
  font-family:var(--fb);font-size:13px;font-weight:600;line-height:1.2;white-space:nowrap;
}
.sa-orb-tag[hidden]{display:none}
.sa-orb-tag-dot{width:8px;height:8px;border-radius:50%;background:var(--accent-ink);flex:0 0 8px}
.sa-orb-tag button{
  min-width:44px;min-height:44px;border:0;background:transparent;color:var(--ink);cursor:pointer;font:inherit;padding:0 8px;
}
.sa-orb-tag button:focus-visible{outline:2px solid var(--accent-ink);outline-offset:-2px}
/* design critic (Run 403): the actions are buttons that LOOK like buttons — the opt-in's pills (voice.css .sa-optin-row) */
.sa-orb-tag .sa-orb-tag-off{display:inline-flex;align-items:center;gap:4px;font-size:13px;line-height:1.2;color:var(--ink);border:1px solid rgba(var(--shadow-rgb),0.22);border-radius:999px;padding:0 14px}
/* Run 403 (H3): a return visit's offer carries the Beta line under it ("it may not catch every try…") */
.sa-orb-tag-hint{flex:1 0 100%;padding:0 8px 4px 0;font-size:13px;font-weight:400;line-height:1.4;color:var(--text);white-space:normal}
.sa-orb-tag-hint[hidden]{display:none}
/* the offer is three rows in every language: the sentence, its two actions, the Beta line (BM at 1440 left "Tidak" alone) */
.sa-orb-tag[data-mode="offer"] .sa-orb-tag-text{flex:1 0 100%;padding:4px 8px 0 0;white-space:normal}
.sa-orb-tag .sa-orb-tag-arm{font-weight:700;background:var(--accent);color:var(--on-accent);border-radius:999px;padding:0 18px}

/* only the month's minutes used up rests the orb (the panel says why, in words); an error or an unavailable voice keeps
   the brand — a tap retries (design critic round 2) */
.sa[data-orb="limit"] .sa-orb-btn{background:var(--ink);color:#fff}

/* the panel sits ABOVE the orb (it opens from it), never over the WhatsApp button */
.sa-panel{bottom:98px}

@media(max-width:768px){
  /* a phone: the orb ABOVE the WhatsApp button, 24 px clear, centred on it (Run 344's rule for the launcher) */
  /* round 2 (design critic: above the WhatsApp button it sat on the hero's call to action): BESIDE it, as on a wide
     screen — the bottom row of the screen is where the page's floating buttons already are */
  .sa-orb-btn{right:92px;bottom:26px}
  .sa-orb-tag{right:160px;bottom:36px;max-width:calc(100vw - 176px);white-space:normal}
  .sa-panel{bottom:0}
}

@media(prefers-reduced-motion:reduce){
  .sa[data-orb] .sa-orb-ring{animation:none}
  .sa[data-orb="idle"] .sa-orb-ring{border-color:rgba(var(--accent-rgb),0)}
  .sa-orb-btn{transition:none}
  .sa-orb-btn:hover,.sa-orb-btn:active{transform:none}
}

/* Run 404: a hidden page holds still (the browser stops drawing it; this makes it the page's own rule, and testable) */
.sa[data-page-hidden] *,.sa[data-page-hidden] *::before,.sa[data-page-hidden] *::after{animation-play-state:paused!important}

/* Run 404 (design critic): the pill's words wrap as a balanced pair of lines — never "(Beta)" alone */
.sa-orb-tag-text{text-wrap:balance;white-space:normal}