/* The site's agent (Run 344) — drawn only when the site's agent is on. The SITE's tokens (--accent*, --ink, --fb, --fd),
   never the console's: the agent belongs to the client. Square like the rest of the template; above the sticky
   WhatsApp button, never over it. */
/* round 3 (design critic): on a wide screen the launcher sits BESIDE the sticky WhatsApp button (52 px at right 24,
   bottom 28 → this one 16 px to its left, centred on it) — above it, it covered the hero's video button */
.sa-launch{
  position:fixed;right:92px;bottom:30px;z-index:var(--z-sticky);
  display:flex;align-items:center;gap:10px;min-height:48px;padding:0 18px 0 14px;
  background:var(--ink);color:#fff;border:0;cursor:pointer;
  font-family:var(--fb);font-size:14px;font-weight:600;letter-spacing:0.01em;
  box-shadow:0 10px 28px -10px rgba(var(--shadow-rgb),0.55);
  transition:transform .25s var(--ease-out),background .2s;
}
.sa-launch:hover{background:#000}
.sa-launch:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px}
.sa-launch-bot{font-size:18px;line-height:1}
.sa-launch[aria-expanded="true"]{display:none}

.sa-panel{
  position:fixed;right:24px;bottom:28px;z-index:var(--z-overlay);
  width:380px;max-height:min(620px,calc(100vh - 56px));
  display:flex;flex-direction:column;
  background:var(--surface);color:var(--text);
  border:1px solid rgba(var(--shadow-rgb),0.14);
  box-shadow:0 24px 60px -20px rgba(var(--shadow-rgb),0.45),0 2px 8px -2px rgba(var(--shadow-rgb),0.12);
  font-family:var(--fb);
}
.sa-panel[hidden]{display:none}
.sa-head{display:flex;align-items:center;gap:12px;padding:16px 16px 14px 18px;border-bottom:1px solid rgba(var(--shadow-rgb),0.1)}
.sa-head-bot{width:34px;height:34px;flex:0 0 34px;display:flex;align-items:center;justify-content:center;background:var(--accent);color:var(--on-accent);font-size:17px}
.sa-head-txt{flex:1;min-width:0}
.sa-title{font-family:var(--fd);font-size:16px;font-weight:700;color:var(--ink);line-height:1.25;overflow-wrap:anywhere}
.sa-sub{font-size:12px;color:var(--muted);margin-top:2px}
.sa-close{width:44px;height:44px;flex:0 0 44px;display:flex;align-items:center;justify-content:center;background:transparent;border:0;color:var(--muted);cursor:pointer;font-size:22px;line-height:1}
.sa-close:hover{color:var(--ink)}
.sa-close:focus-visible{outline:2px solid var(--accent-ink);outline-offset:-2px}

.sa-log{flex:1;min-height:180px;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:12px;overscroll-behavior:contain}
.sa-msg{max-width:88%;font-size:14px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.sa-msg-me{align-self:flex-end;background:var(--ink);color:#fff;padding:10px 13px}
.sa-msg-bot{align-self:flex-start}
.sa-panel .ai-insight{
  background:var(--surface-2);border-left:3px solid var(--accent);padding:11px 13px;color:var(--text);
}
.sa-label{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:5px}
.sa-src{display:block;margin-top:8px;font-size:12px;color:var(--muted)}
.sa-src b{font-weight:600;color:var(--text)}
/* each named state its own rule (round 2, design critic: .ai-insight above outranked a bare .sa-state, so no-info and the
   allowance both drew the accent). Round 3 (design critic: "they differ only by a 4 px line"): the three a visitor
   meets most each carry their OWN heading + mark in place of the agent's name, and the two that are not the visitor's
   question going unanswered carry a tint — no information = grey "?", the month's allowance = amber "‖", unavailable =
   red "!". Heading inks measured on their tints: #7a5600 on #fbf4e4 6.1:1, #9a3b26 on #fbeeea 6.4:1. */
.sa-panel .sa-state{border-left-color:var(--muted-2)}
.sa-panel .sa-state .sa-label{color:var(--muted)}
.sa-panel .sa-state[data-state="allowance_reached"]{border-left-color:#8a6100;background:#fbf4e4}
.sa-panel .sa-state[data-state="allowance_reached"] .sa-label{color:#7a5600}
.sa-panel .sa-state[data-state="agent_unavailable"]{border-left-color:#b4472f;background:#fbeeea}
.sa-panel .sa-state[data-state="agent_unavailable"] .sa-label{color:#9a3b26}
.sa-mark{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex:0 0 16px;border:1.5px solid currentColor;font-size:10px;font-weight:800;line-height:1;letter-spacing:0}
.sa-wa{
  display:inline-flex;align-items:center;gap:8px;margin-top:10px;min-height:44px;padding:0 14px;
  background:var(--accent);color:var(--on-accent);text-decoration:none;font-size:13px;font-weight:600;
}
.sa-wa:hover{filter:brightness(0.96)}
.sa-wa:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px}
.sa-wa svg{width:16px;height:16px;fill:currentColor}
.sa-typing{display:inline-flex;gap:5px;padding:12px 13px;background:var(--surface-2)}
/* round 3 (design critic: "three tiny grey squares on a grey chip, barely visible"): 8 px, in the ink */
.sa-typing i{width:8px;height:8px;background:var(--ink);display:block;animation:sa-dot 1.1s infinite ease-in-out}
.sa-typing i:nth-child(2){animation-delay:.15s}.sa-typing i:nth-child(3){animation-delay:.3s}
@keyframes sa-dot{0%,80%,100%{opacity:.25}40%{opacity:1}}
@media(prefers-reduced-motion:reduce){.sa-typing i{animation:none;opacity:.6}.sa-launch{transition:none}}

.sa-form{display:flex;gap:8px;padding:12px 14px 6px;border-top:1px solid rgba(var(--shadow-rgb),0.1)}
.sa-input{
  flex:1;min-width:0;min-height:44px;max-height:120px;resize:none;padding:11px 12px;
  font-family:var(--fb);font-size:16px;line-height:1.4;color:var(--text);
  background:#fff;border:1px solid rgba(var(--shadow-rgb),0.22);
}
.sa-input::placeholder{color:var(--muted);opacity:1}
.sa-input:focus{outline:2px solid var(--accent-ink);outline-offset:-1px;border-color:transparent}
.sa-send{min-width:44px;min-height:44px;padding:0 14px;background:var(--accent);color:var(--on-accent);border:0;cursor:pointer;font-weight:700;font-size:14px}
.sa-send:disabled{opacity:.5;cursor:default}
.sa-send:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px}
.sa-note{padding:4px 16px 12px;font-size:12px;line-height:1.5;color:var(--muted)}
/* Run 380 (sentence 78): the visitor notice under the assistant — one short paragraph per language, the link in the ink.
   Run 383 (design critic): the conversation's first item, quiet small print with a rule under it — no box, no scroll of
   its own (the conversation scrolls); a link never breaks inside its words (隐私声明 split across two lines). */
.sa-notice{display:flex;flex-direction:column;gap:6px;flex:none;padding:0 0 12px;border-bottom:1px solid rgba(var(--shadow-rgb),0.14);font-size:12px;line-height:1.5;color:var(--muted)}
.sa-notice-l{display:block}
.sa-notice-a{color:inherit;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}

/* Run 386 (F2, §7h A2): the contact form — consent block B of the visitor notice, in the conversation like an answer
   (the accent rule on the left), as wide as the conversation. Its sentences in each language the notice speaks (the
   page's own first, the others smaller); full-width fields 44 px tall in 16 px type (no zoom on a phone) with a 3:1
   border; the marketing box a real checkbox, 20 px, in a 44 px row, NEVER ticked by the page; Share in the accent,
   No thanks a bordered button. Square, as the template is. */
.sa-panel .sa-lead{max-width:100%;align-self:stretch;white-space:normal;background:var(--surface-2);border-left:3px solid var(--accent);padding:12px 13px}
/* Run 388 (template v1.3 §B, sentence 88): one compact block — every line and both buttons in one 390 × 844 screen */
.sa-lead-text{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.sa-lead-l{margin:0;font-size:14px;line-height:1.45;color:var(--text)}
.sa-lead-other{font-size:13px;color:var(--muted)}
.sa-lead-a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px;white-space:nowrap;font-weight:600}
.sa-lead-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin-bottom:6px}
.sa-lead-f{display:flex;flex-direction:column;gap:4px;min-width:0}
.sa-lead-f label{font-size:13px;font-weight:600;color:var(--text)}
.sa-lead-f input{min-height:44px;width:100%;min-width:0;box-sizing:border-box;padding:10px 12px;font-family:var(--fb);font-size:16px;line-height:1.3;color:var(--text);background:#fff;border:1px solid rgba(var(--shadow-rgb),0.6);border-radius:0}
.sa-lead-f input:focus{outline:2px solid var(--accent-ink);outline-offset:-1px;border-color:transparent}
.sa-lead-check{display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 0;cursor:pointer;font-size:13px;line-height:1.4;color:var(--text)}
.sa-lead-check input{width:22px;height:22px;flex:0 0 22px;margin:0;accent-color:var(--accent-ink);cursor:pointer}
.sa-lead-check input:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
.sa-lead-err{margin:2px 0 0;font-size:13px;line-height:1.45;color:#9a3b26}
.sa-lead-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.sa-lead-share,.sa-lead-no{min-height:44px;padding:0 14px;font-family:var(--fb);font-size:14px;cursor:pointer}
.sa-lead-share{background:var(--accent);color:var(--on-accent);border:0;font-weight:700}
.sa-lead-no{background:transparent;color:var(--text);border:1px solid rgba(var(--shadow-rgb),0.6);font-weight:600}
.sa-lead-share:focus-visible,.sa-lead-no:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px}
.sa-lead-share:disabled,.sa-lead-no:disabled{opacity:.5;cursor:default}

@media(max-width:768px){
  /* on a phone there is no room beside it: ABOVE the WhatsApp button, 24 px clear (round 3: 16 measured as ~15 by eye) */
  .sa-launch{right:16px;bottom:104px;padding:0 14px 0 12px;font-size:13px}
  .sa-panel{left:0;right:0;bottom:0;width:auto;max-height:82vh;border-left:0;border-right:0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom)}
}
/* Run 368 (U2, spec §ICONS): the widget's icons are Phosphor LIGHT, drawn from the page's own inline sprite (the renderer
   puts the symbols the agent uses beside it) — never a path drawn here, never an emoji. The agent mark is a CSS orb in
   the site's own accent (the signed sheet). */
.sa .mw-icon{width:20px;height:20px;flex:none;fill:currentColor}
.sa .mw-icon-sm{width:16px;height:16px}.sa .mw-icon-lg{width:24px;height:24px}
.sa .agent-mark{--am:var(--accent-rgb);--s:20px;position:relative;display:inline-block;flex:none;width:var(--s);height:var(--s);border-radius:50%;vertical-align:middle;background:radial-gradient(closest-side,rgba(var(--am),0) 58%,rgba(var(--am),.38) 66%,rgba(var(--am),.16) 84%,rgba(var(--am),0) 100%)}
.sa .agent-mark::before{content:"";position:absolute;inset:24%;border-radius:50%;background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.55) 0,rgba(255,255,255,0) 58%),rgb(var(--am));box-shadow:0 0 0 .5px rgba(var(--am),.6)}
.sa .am-sm{--s:16px}.sa .am-md{--s:20px}.sa .am-lg{--s:24px}