/* ============================================================================
   support.css — the support-chat bubble and panel (spec S17, supportChat.js)

   Ported from VideoTerciman's public/css/support.css (333 L; task table says
   "direct, retoken colours to match this site") — retokened against THIS
   site's actual custom properties (web/static/css/style.css's :root: --bg,
   --card, --card-2, --border, --text, --muted, --accent-1, --accent-2,
   --error, --radius-lg/md/sm, --accent-grad, --shadow, --shadow-sm, --font).
   None of the source's own tokens exist here (--accent, --accent-fg,
   --bg-raised, --fg, --fg-subtle, --danger, --a100/200/300,
   --shadow-popover) — every one below is mapped to a real token or, where
   the site's own convention is a literal tint rather than a token (e.g.
   `.bg-glow`'s `rgba(124, 92, 255, .16)`), the same literal-rgba idiom.

   Reuses existing classes wherever a plain control already has one, exactly
   like the source did for ITS site: `.btn` / `.btn--primary` for Send,
   `.input` for the textarea's base look, `.chip` / `.chip--error` for the
   error banner. The bubble and the message layout have no existing analogue,
   so those are the only rules written from scratch here.

   The admin inbox half of the source file (`.support-admin-*`, written
   against a DIFFERENT stylesheet's tokens, `admin.css`) is deliberately NOT
   ported: there is no admin page or `admin.css` in this worktree yet (W10's
   surface, on a separate branch), so its token names do not exist anywhere
   to retoken against — guessing them would ship dead, wrong CSS. See this
   build's report.

   Reduced motion: this site already has a SITE-WIDE kill-switch
   (style.css's `@media (prefers-reduced-motion: reduce) { *, *::before,
   *::after { transition-duration: .001ms !important; ... } }`) that applies
   to every `transition`/`animation` on the page, including these rules, with
   no extra work here — so long as every bit of motion below stays a real CSS
   transition and nothing is animated by hand in JS. It is.
   ========================================================================== */

.support-widget {
  position: fixed;
  right: 20px;
  bottom: 20px;
  /* Just under the "How it works?" modal (style.css: z-index 60) — when that
     modal is open it should cover the whole page, this bubble included, not
     float above it. Well above the page's own content (z-index 0/1). */
  z-index: 55;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.support-bubble {
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: var(--accent-grad);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow);
  position: relative;
  transition: transform .12s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.support-bubble:hover { transform: translateY(-1px); box-shadow: 0 14px 32px -10px rgba(124, 92, 255, .75); }
.support-bubble:active { transform: scale(.96); }
.support-bubble:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

.support-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--error);
  border: 2px solid var(--bg);
}

.support-panel {
  width: min(340px, calc(100vw - 40px));
  max-height: min(480px, calc(100vh - 100px));
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.support-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 8px 10px 16px;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.support-panel-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.support-close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.support-close:hover { background: rgba(255, 255, 255, .04); color: var(--text); }
.support-close:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 1px; }

.support-messages {
  flex: 1 1 auto;
  min-height: 160px;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.support-msg { display: flex; flex-direction: column; gap: 2px; max-width: 88%; }
.support-msg.is-support { align-self: flex-start; align-items: flex-start; }
.support-msg.is-mine { align-self: flex-end; align-items: flex-end; }

.support-msg-author {
  font-size: 11px;
  color: var(--muted);
}

.support-msg-body {
  margin: 0;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.support-msg.is-support .support-msg-body { background: rgba(124, 92, 255, .12); color: var(--text); }
.support-msg.is-mine .support-msg-body { background: var(--accent-grad); color: #fff; }
/* The optimistic bubble, before the server has confirmed it landed — faded,
   not spinner-and-fanfare, since it is gone within one request's round trip. */
.support-msg.is-pending { opacity: .6; }

.support-error {
  margin: 0 16px 8px;
}

.support-form {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
}

.support-input {
  flex: 1 1 auto;
  min-height: 36px;
  max-height: 96px;
  resize: none;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.4;
}

.support-send {
  flex: 0 0 auto;
  padding: 9px 16px;
  font-size: .85rem;
}

@media (max-width: 480px) {
  .support-widget { right: 12px; bottom: 12px; }
}