/* spin-support widget — the Spin concierge. Self-contained, namespaced .ss- so it survives
   embedding on spin.co.za/play. Palette = the app's Forest & Gold tokens (theme.css), so the
   panel reads as part of the app, not a third-party bubble. Phone-first: on small screens the
   panel is the whole viewport with a clear Close; on desktop a compact card. */
.ss-root {
  --ss-bg: #081009; --ss-panel: #0d1710; --ss-panel-2: #132015; --ss-line: #23361f;
  --ss-fg: #f4f7f2; --ss-muted: #b7c9b8; --ss-faint: #8fa694;
  --ss-gold: #f5c518; --ss-gold-deep: #b8860b; --ss-gold-soft: #ffe9a8; --ss-on-gold: #081009;
  --ss-bot: #132015; --ss-bot-fg: #f4f7f2; --ss-user: #f5c518; --ss-user-fg: #081009;
  --ss-radius: 18px; --ss-shadow: 0 24px 60px -20px rgba(0,0,0,.7), 0 0 0 1px var(--ss-line);
  position: fixed; right: 16px; bottom: 16px; z-index: 2147483000;
  font-family: inherit; color: var(--ss-fg); -webkit-font-smoothing: antialiased;
}

/* Launcher */
.ss-launcher { width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(160deg, var(--ss-gold), var(--ss-gold-deep)); color: var(--ss-on-gold);
  box-shadow: 0 10px 30px -12px rgba(245,197,24,.9), 0 0 0 1px rgba(255,255,255,.06);
  display: grid; place-items: center; transition: transform .15s ease; }
.ss-launcher:hover { transform: translateY(-2px) scale(1.03); }
.ss-launcher svg { width: 26px; height: 26px; }

/* Panel */
.ss-panel { position: absolute; right: 0; bottom: 0; width: min(380px, calc(100vw - 32px));
  height: min(640px, calc(100dvh - 32px)); background: var(--ss-panel); color: var(--ss-fg);
  border-radius: var(--ss-radius); box-shadow: var(--ss-shadow);
  display: none; flex-direction: column; overflow: hidden; }
.ss-root.ss-open .ss-panel { display: flex; }
.ss-root.ss-open .ss-launcher { display: none; }

/* Header: avatar · name · status · close */
.ss-head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px;
  border-bottom: 1px solid var(--ss-line);
  background: linear-gradient(180deg, rgba(245,197,24,.10), rgba(245,197,24,0)); }
.ss-avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-weight: 800; font-size: 15px; color: var(--ss-on-gold);
  background: linear-gradient(160deg, var(--ss-gold-soft), var(--ss-gold-deep)); position: relative; }
.ss-avatar::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px;
  border-radius: 50%; background: #22c55e; border: 2px solid var(--ss-panel); }
.ss-head .ss-who { min-width: 0; line-height: 1.15; }
.ss-head h3 { font-size: 15px; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.ss-head .ss-sub { font-size: 12px; color: var(--ss-muted); margin-top: 1px; }
.ss-x { margin-left: auto; flex: none; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--ss-line);
  background: var(--ss-panel-2); color: var(--ss-fg); cursor: pointer; display: grid; place-items: center; }
.ss-x svg { width: 18px; height: 18px; }
.ss-x:hover { border-color: var(--ss-gold); }

/* Messages */
.ss-msgs { flex: 1; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 8px;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.ss-msg { max-width: 86%; padding: 9px 12px; border-radius: 16px; font-size: 14.5px; line-height: 1.4;
  white-space: pre-wrap; overflow-wrap: anywhere; }
.ss-msg.ss-user { align-self: flex-end; background: var(--ss-user); color: var(--ss-user-fg); border-bottom-right-radius: 5px; font-weight: 500; }
.ss-msg.ss-bot { align-self: flex-start; background: var(--ss-bot); color: var(--ss-bot-fg); border-bottom-left-radius: 5px; border: 1px solid var(--ss-line); }
.ss-msg a { color: var(--ss-gold); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.ss-msg strong { font-weight: 700; color: var(--ss-gold-soft); }
.ss-msg.ss-user strong { color: inherit; }

.ss-typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 10px 12px; background: var(--ss-bot);
  border: 1px solid var(--ss-line); border-radius: 16px; border-bottom-left-radius: 5px; }
.ss-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--ss-muted); animation: ss-blink 1.2s infinite both; }
.ss-typing span:nth-child(2){ animation-delay:.2s } .ss-typing span:nth-child(3){ animation-delay:.4s }
@keyframes ss-blink { 0%,80%,100%{opacity:.2} 40%{opacity:1} }

/* Turnstile host: sizes itself from the challenge iframe when one renders; reserves nothing otherwise. */
.ss-tswrap { align-self: center; display: flex; justify-content: center; padding: 0; min-height: 0; }

/* Composer */
.ss-foot { border-top: 1px solid var(--ss-line); padding: 8px 10px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); background: var(--ss-panel); }
.ss-form { display: flex; gap: 8px; align-items: flex-end; }
.ss-input { flex: 1; resize: none; max-height: 110px; border: 1px solid var(--ss-line); border-radius: 14px;
  padding: 10px 12px; font: inherit; font-size: 16px; line-height: 1.35; background: var(--ss-bg); color: var(--ss-fg); outline: none; }
.ss-input::placeholder { color: var(--ss-faint); }
.ss-input:focus { border-color: var(--ss-gold); box-shadow: 0 0 0 3px rgba(245,197,24,.15); }
.ss-send { width: 42px; height: 42px; flex: none; border-radius: 12px; border: none; cursor: pointer;
  background: linear-gradient(160deg, var(--ss-gold), var(--ss-gold-deep)); color: var(--ss-on-gold); display: grid; place-items: center; }
.ss-send:disabled { opacity: .5; cursor: default; }

/* Phone: the panel IS the screen. The launcher keeps the app's bottom-nav offset (globals.css). */
@media (max-width: 639px) {
  .ss-root.ss-open .ss-panel { position: fixed; inset: 0; width: 100vw; height: 100dvh; border-radius: 0; box-shadow: none; }
  .ss-head { padding-top: calc(10px + env(safe-area-inset-top)); }
  .ss-msg { font-size: 15px; max-width: 88%; }
}

/* WP-A (2026-09-26): continuity affordances — unread badge on the launcher, "New chat" in the header,
   a quiet divider when a chat is picked up on a new page. */
.ss-launcher { position: relative; }
.ss-badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: #e5484d; color: #fff; font-size: 11px; font-weight: 800; line-height: 20px; text-align: center;
  border: 2px solid var(--ss-bg); }
.ss-badge[hidden] { display: none; }
.ss-new { margin-left: auto; flex: none; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--ss-line);
  background: var(--ss-panel-2); color: var(--ss-muted); cursor: pointer; display: grid; place-items: center; }
.ss-new svg { width: 18px; height: 18px; }
.ss-new:hover { border-color: var(--ss-gold); color: var(--ss-fg); }
.ss-x { margin-left: 0; }
.ss-resumed { align-self: center; font-size: 11.5px; color: var(--ss-faint); padding: 2px 10px; border-radius: 999px;
  border: 1px solid var(--ss-line); margin: 2px 0 4px; }

/* WP-G (2026-09-26): starters / chips / receipts / the ticket banner. Rendered from server frames only. */
.ss-chips { display: flex; flex-wrap: wrap; gap: 6px; align-self: flex-start; max-width: 92%; margin: -2px 0 2px; }
.ss-chip { border: 1px solid var(--ss-gold-deep); background: rgba(245,197,24,.08); color: var(--ss-gold-soft);
  border-radius: 999px; padding: 6px 11px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  line-height: 1.2; text-align: left; }
.ss-chip:hover { background: rgba(245,197,24,.16); border-color: var(--ss-gold); }
.ss-starters { margin-top: 2px; }
.ss-receipt { align-self: flex-start; max-width: 86%; padding: 7px 11px; border-radius: 12px; font-size: 13.5px; font-weight: 600;
  background: rgba(34,197,94,.10); border: 1px solid rgba(34,197,94,.35); color: #bbf7d0; }
.ss-ticket { font-size: 12.5px; padding: 7px 12px; background: rgba(245,197,24,.10); border-bottom: 1px solid var(--ss-line);
  color: var(--ss-gold-soft); }
.ss-ticket[hidden] { display: none; }