/* ═══════════════════════════════════════════════════════════════════════════
   Corner Support, the chat, on the portal and in the staff console.

   Every selector here starts with `.sp-`, `#support-panel` or `body.sp-`.
   Colours and shapes come from the `--sp-*` tokens below: the portal's gilded
   material by default, the console's palette under `.dv`. Layout is one
   column that fills its host; on a phone the live chat pins to the viewport
   between the header and the tab dock, and follows the keyboard.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The chat's viewport geometry. support.js measures the header and the tab
   dock and writes these on <html>; they must live on the root, because a
   value declared inside the scope would shadow what the script sets. */
:root {
  --sp-top: 0px;
  --sp-dock: 0px;
  --sp-vvo: 0px;
}

#support-panel,
.sp-scope {
  --sp-bg: var(--sf-surface, #1a1410);
  --sp-bg-2: var(--sf-surface-2, #211a14);
  --sp-bg-3: var(--sf-surface-3, #2a2119);
  --sp-line: rgba(207, 160, 89, 0.16);
  --sp-line-strong: var(--sf-edge-strong, rgba(207, 160, 89, 0.34));
  --sp-ink: var(--sf-ink, #f7efe1);
  --sp-ink-soft: var(--sf-ink-soft, rgba(232, 218, 196, 0.74));
  --sp-ink-faint: var(--sf-ink-faint, rgba(214, 197, 170, 0.5));
  --sp-accent: var(--sf-brass, #cfa059);
  --sp-accent-lit: var(--sf-brass-lit, #ffdca4);
  --sp-accent-ink: #1f1608;
  --sp-accent-rgb: 207, 160, 89;
  --sp-own: linear-gradient(140deg, #dcb264, #b8893e);
  --sp-own-ink: #1f1608;
  --sp-other: rgba(255, 255, 255, 0.06);
  --sp-other-line: rgba(255, 255, 255, 0.08);
  --sp-ai: rgba(146, 120, 255, 0.16);
  --sp-ai-line: rgba(146, 120, 255, 0.3);
  --sp-ai-ink: #cbbfff;
  --sp-staff: rgba(207, 160, 89, 0.12);
  --sp-staff-line: rgba(207, 160, 89, 0.3);
  --sp-ok: var(--sf-ok, #7fc98a);
  --sp-warn: var(--sf-warn, #efb45c);
  --sp-bad: var(--sf-bad, #f0705f);
  --sp-info: #7db5ff;
  --sp-radius: 16px;
  --sp-radius-sm: 10px;
  --sp-bubble: 18px;
  --sp-font: var(--font-body, system-ui, sans-serif);
  --sp-font-display: var(--font-display, var(--sp-font));
  --sp-ease: var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
  --sp-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  color: var(--sp-ink);
  font-family: var(--sp-font);
}

/* the console's palette: same components, its purple and system type */
.dv .sp-scope,
.dv #support-panel {
  --sp-bg: #0f1119;
  --sp-bg-2: rgba(255, 255, 255, 0.035);
  --sp-bg-3: rgba(255, 255, 255, 0.07);
  --sp-line: var(--dv-line, rgba(255, 255, 255, 0.08));
  --sp-line-strong: var(--dv-line-2, rgba(255, 255, 255, 0.14));
  --sp-ink: var(--dv-ink, #f3f4f8);
  --sp-ink-soft: var(--dv-muted, rgba(243, 244, 248, 0.6));
  --sp-ink-faint: var(--dv-dim, rgba(243, 244, 248, 0.42));
  --sp-accent: var(--dv-brand, #7c5cff);
  --sp-accent-lit: #b9a8ff;
  --sp-accent-ink: #ffffff;
  --sp-accent-rgb: 124, 92, 255;
  --sp-own: linear-gradient(140deg, #8a6bff, #6a48f0);
  --sp-own-ink: #ffffff;
  --sp-other: rgba(255, 255, 255, 0.06);
  --sp-other-line: rgba(255, 255, 255, 0.09);
  --sp-ai: rgba(90, 169, 255, 0.14);
  --sp-ai-line: rgba(90, 169, 255, 0.3);
  --sp-ai-ink: #b7d6ff;
  --sp-staff: rgba(124, 92, 255, 0.14);
  --sp-staff-line: rgba(124, 92, 255, 0.3);
  --sp-ok: var(--dv-ok, #43b581);
  --sp-warn: var(--dv-warn, #f5c542);
  --sp-bad: var(--dv-danger, #ed4245);
  --sp-info: var(--dv-info, #5aa9ff);
  --sp-radius: var(--dv-radius, 14px);
  --sp-radius-sm: var(--dv-radius-sm, 10px);
  --sp-font: system-ui, -apple-system, "Segoe UI", Inter, sans-serif;
  --sp-font-display: var(--sp-font);
}

/* ── the panel ─────────────────────────────────────────────────────────── */
#support-panel { overflow: visible; }
#support-panel.sp-panel--chat {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: min(78vh, 820px);
  min-height: 480px;
}
#support-panel.sp-panel--chat .support-panel-body,
#support-panel.sp-panel--chat > div { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }

/* ── primitives ────────────────────────────────────────────────────────── */
.sp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 42px;
  padding: 0.55rem 1.05rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--sp-ink);
  background: var(--sp-bg-3);
  cursor: pointer;
  transition: transform 0.18s var(--sp-ease), background 0.18s, border-color 0.18s, box-shadow 0.18s, opacity 0.18s;
  white-space: nowrap;
}
.sp-btn:hover { transform: translateY(-1px); }
.sp-btn:active { transform: translateY(0); }
.sp-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.sp-btn--primary { background: var(--sp-own); color: var(--sp-accent-ink); box-shadow: 0 8px 24px rgba(var(--sp-accent-rgb), 0.22); }
.sp-btn--primary:hover { box-shadow: 0 10px 30px rgba(var(--sp-accent-rgb), 0.32); }
.sp-btn--ghost { background: transparent; border-color: var(--sp-line-strong); }
.sp-btn--ghost:hover { background: var(--sp-bg-3); }
.sp-btn--danger { background: rgba(240, 112, 95, 0.16); border-color: rgba(240, 112, 95, 0.4); color: #ffb8ad; }
.sp-btn--sm { min-height: 36px; padding: 0.4rem 0.85rem; font-size: 0.84rem; }
.sp-btn--xs { min-height: 30px; padding: 0.25rem 0.7rem; font-size: 0.78rem; }

.sp-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--sp-line-strong);
  color: var(--sp-ink-soft);
  background: var(--sp-bg-2);
  white-space: nowrap;
}
.sp-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.8; }
.sp-pill--ok { color: var(--sp-ok); border-color: rgba(127, 201, 138, 0.4); }
.sp-pill--warn { color: var(--sp-warn); border-color: rgba(239, 180, 92, 0.4); }
.sp-pill--info { color: var(--sp-ai-ink); border-color: var(--sp-ai-line); }
.sp-pill--muted { color: var(--sp-ink-faint); }

.sp-eyebrow { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sp-accent); font-weight: 800; }

.sp-section-head { display: flex; flex-direction: column; gap: 0.15rem; margin: 0 0 0.9rem; }
.sp-section-head h3 { margin: 0; font-family: var(--sp-font-display); font-size: 1.05rem; }
.sp-section-head p { margin: 0; color: var(--sp-ink-soft); font-size: 0.86rem; }

.sp-notice {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.8rem 0.95rem;
  border-radius: var(--sp-radius-sm);
  border: 1px solid var(--sp-line-strong);
  background: var(--sp-bg-2);
  font-size: 0.88rem;
  line-height: 1.45;
}
.sp-notice strong { display: block; }
.sp-notice p { margin: 0.15rem 0 0; color: var(--sp-ink-soft); }
.sp-notice--warn { border-color: rgba(239, 180, 92, 0.45); background: rgba(239, 180, 92, 0.08); }
.sp-notice--warn .icon { color: var(--sp-warn); }
.sp-notice--info .icon { color: var(--sp-info); }

.sp-loading { display: flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 2rem 1rem; color: var(--sp-ink-soft); font-size: 0.92rem; }
.sp-loading--panel { min-height: 240px; }
.sp-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--sp-line-strong); border-top-color: var(--sp-accent); animation: sp-spin 0.8s linear infinite; }
@keyframes sp-spin { to { transform: rotate(360deg); } }

.sp-empty { display: grid; place-items: center; gap: 0.5rem; padding: 2.5rem 1rem; text-align: center; color: var(--sp-ink-soft); }
.sp-empty h3 { margin: 0; color: var(--sp-ink); }
.sp-empty p { margin: 0; max-width: 40ch; }
.sp-empty-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--sp-bg-3); color: var(--sp-accent); }

/* ── home ──────────────────────────────────────────────────────────────── */
.sp-home { display: flex; flex-direction: column; gap: 1.4rem; }

.sp-hero {
  position: relative;
  overflow: hidden;
  padding: 1.5rem;
  border-radius: var(--sp-radius);
  border: 1px solid var(--sp-line-strong);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(var(--sp-accent-rgb), 0.16), transparent 55%),
    linear-gradient(180deg, var(--sp-bg-2), var(--sp-bg));
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.sp-hero-copy h2 { margin: 0.25rem 0 0.4rem; font-family: var(--sp-font-display); font-size: clamp(1.4rem, 2.4vw, 1.85rem); line-height: 1.15; }
.sp-hero-copy p { margin: 0; color: var(--sp-ink-soft); max-width: 60ch; line-height: 1.5; }

.sp-start { display: flex; flex-direction: column; gap: 0.9rem; }
.sp-topics { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.sp-topic {
  padding: 0.42rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--sp-line-strong);
  background: var(--sp-bg-2);
  color: var(--sp-ink);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s var(--sp-ease);
}
.sp-topic:hover { background: var(--sp-bg-3); border-color: var(--sp-accent); transform: translateY(-1px); }

.sp-field { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.82rem; color: var(--sp-ink-soft); }
.sp-field em { font-style: normal; color: var(--sp-ink-faint); }
.sp-input {
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.85rem;
  border-radius: var(--sp-radius-sm);
  border: 1px solid var(--sp-line-strong);
  background: var(--sp-bg);
  color: var(--sp-ink);
  font: inherit;
  font-size: 0.95rem;
}
.sp-input:focus { outline: none; border-color: var(--sp-accent); box-shadow: 0 0 0 3px rgba(var(--sp-accent-rgb), 0.18); }
.sp-input::placeholder { color: var(--sp-ink-faint); }

.sp-start-composer .sp-composer { border: 1px solid var(--sp-line-strong); border-radius: var(--sp-radius); background: var(--sp-bg); padding: 0.55rem; }
.sp-start-composer .sp-composer-input { min-height: 96px; }
.sp-start-foot { margin: 0; display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--sp-ink-faint); }

/* FAQ */
.sp-faq-list { display: flex; flex-direction: column; gap: 0.4rem; }
.sp-faq-item {
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius-sm);
  background: var(--sp-bg-2);
  transition: border-color 0.15s;
}
.sp-faq-item[open] { border-color: var(--sp-line-strong); }
.sp-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.8rem 0.95rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.92rem;
  list-style: none;
}
.sp-faq-item summary::-webkit-details-marker { display: none; }
.sp-faq-chevron { flex-shrink: 0; color: var(--sp-ink-faint); transition: transform 0.2s var(--sp-ease); }
.sp-faq-item[open] .sp-faq-chevron { transform: rotate(180deg); }
.sp-faq-answer { padding: 0 0.95rem 0.9rem; color: var(--sp-ink-soft); font-size: 0.88rem; line-height: 1.55; }
.sp-faq-answer p { margin: 0 0 0.45rem; }
.sp-faq-answer p:last-child { margin-bottom: 0; }
.sp-faq-answer a { color: var(--sp-accent-lit); }

/* past conversations */
.sp-recent-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.sp-recent-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.95rem;
  border-radius: var(--sp-radius-sm);
  border: 1px solid var(--sp-line);
  background: var(--sp-bg-2);
  color: var(--sp-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.sp-recent-item:hover { border-color: var(--sp-line-strong); background: var(--sp-bg-3); }
.sp-recent-main { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.sp-recent-main strong { font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-recent-main span { font-size: 0.8rem; color: var(--sp-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-recent-side { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; color: var(--sp-ink-faint); font-size: 0.78rem; }

/* feedback: ideas, problems and praise for the Corner team */
.sp-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sp-feedback {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: var(--sp-radius);
  border: 1px solid var(--sp-line);
  background: linear-gradient(180deg, var(--sp-bg-2), var(--sp-bg));
  min-width: 0;
}
.sp-feedback .sp-section-head { margin: 0; }
.sp-fb-form { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.sp-fb-types { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.sp-fb-type {
  --sp-fb-tint: var(--sp-accent);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 38px;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--sp-line-strong);
  background: var(--sp-bg-2);
  color: var(--sp-ink-soft);
  font-size: 0.85rem;
  font-weight: 650;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s var(--sp-ease);
}
.sp-fb-type--problem { --sp-fb-tint: var(--sp-bad); }
.sp-fb-type--praise { --sp-fb-tint: var(--sp-ok); }
.sp-fb-type--other { --sp-fb-tint: var(--sp-info); }
.sp-fb-type .icon-sm { color: var(--sp-fb-tint); }
.sp-fb-type:hover { background: var(--sp-bg-3); color: var(--sp-ink); transform: translateY(-1px); }
.sp-fb-type.is-on {
  color: var(--sp-ink);
  border-color: var(--sp-fb-tint);
  background: color-mix(in srgb, var(--sp-fb-tint) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sp-fb-tint) 40%, transparent);
}
.sp-fb-type:has(.sp-fb-radio:focus-visible) { outline: 2px solid var(--sp-accent); outline-offset: 2px; }
.sp-fb-type:has(.sp-fb-radio:disabled) { cursor: not-allowed; opacity: 0.6; transform: none; }
/* the radio stays in the page for the keyboard and screen readers; the chip is what shows */
.sp-fb-radio { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.sp-fb-box {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--sp-line-strong);
  border-radius: var(--sp-radius);
  background: var(--sp-bg);
  transition: border-color 0.15s, box-shadow 0.15s;
  min-width: 0;
}
.sp-fb-box:focus-within { border-color: var(--sp-accent); box-shadow: 0 0 0 3px rgba(var(--sp-accent-rgb), 0.16); }
.sp-fb-input {
  display: block;
  width: 100%;
  min-height: 96px;
  max-height: 320px;
  resize: vertical;
  padding: 0.8rem 0.9rem 0.4rem;
  border: 0;
  border-radius: var(--sp-radius) var(--sp-radius) 0 0;
  background: transparent;
  color: var(--sp-ink);
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.5;
  box-sizing: border-box;
}
.sp-fb-input:focus { outline: none; }
.sp-fb-input::placeholder { color: var(--sp-ink-faint); }
.sp-fb-input:read-only { opacity: 0.7; }
.sp-fb-input:disabled { cursor: not-allowed; }
.sp-fb-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.5rem 0.5rem 0.9rem; min-width: 0; }
.sp-fb-hint { flex: 1 1 auto; min-width: 0; font-size: 0.82rem; color: var(--sp-ink-soft); }
.sp-fb-hint[data-tone="bad"] { color: #ffb8ad; }
.sp-fb-hint[data-tone="ok"] { color: var(--sp-ok); }
.sp-fb-count { flex-shrink: 0; font-size: 0.75rem; color: var(--sp-ink-faint); font-variant-numeric: tabular-nums; }
.sp-fb-count.is-over { color: var(--sp-bad); }
.sp-fb-send { flex-shrink: 0; margin-left: auto; }
/* quiet until there is something to send, like the chat starter's button */
.sp-fb-send:not(.is-ready):not(:disabled) { opacity: 0.6; box-shadow: none; }
.sp-fb-note { display: flex; align-items: flex-start; gap: 0.45rem; margin: 0; font-size: 0.82rem; line-height: 1.45; color: var(--sp-ink-soft); }
.sp-fb-note .icon-xs { flex-shrink: 0; margin-top: 0.15rem; }
.sp-fb-note--warn { color: var(--sp-warn); }
.sp-fb-note--info .icon-xs { color: var(--sp-info); }
.sp-feedback.is-readonly .sp-fb-box { opacity: 0.6; }

.sp-fb-mine { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
.sp-fb-mine-head h4 { margin: 0; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sp-ink-faint); }
.sp-fb-empty { margin: 0; font-size: 0.86rem; color: var(--sp-ink-soft); }
.sp-fb-state { display: flex; align-items: center; gap: 0.55rem; font-size: 0.86rem; color: var(--sp-ink-soft); flex-wrap: wrap; }
.sp-fb-state--error .icon-sm { color: var(--sp-warn); }
.sp-fb-state .sp-spinner { width: 14px; height: 14px; }
.sp-fb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.sp-fb-item {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.8rem 0.95rem;
  border-radius: var(--sp-radius-sm);
  border: 1px solid var(--sp-line);
  background: var(--sp-bg-2);
  min-width: 0;
}
/* only the one being sent slides in: the list is redrawn whole, and every item fading in again on each redraw flickers */
.sp-fb-item.is-sending { border-style: dashed; animation: sp-fb-in 0.28s var(--sp-ease); }
.sp-fb-item.is-sending .sp-fb-text { opacity: 0.75; }
@keyframes sp-fb-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.sp-fb-item-top { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; font-size: 0.78rem; color: var(--sp-ink-faint); }
.sp-fb-kind { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 700; color: var(--sp-ink-soft); }
.sp-fb-kind--idea .icon-xs { color: var(--sp-accent); }
.sp-fb-kind--problem .icon-xs { color: var(--sp-bad); }
.sp-fb-kind--praise .icon-xs { color: var(--sp-ok); }
.sp-fb-kind--other .icon-xs { color: var(--sp-info); }
.sp-fb-item-top .sp-pill { margin-left: auto; }
.sp-fb-text { margin: 0; font-size: 0.9rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--sp-ink); }
.sp-fb-text.is-clamped { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.sp-fb-more { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--sp-accent-lit); font: inherit; font-size: 0.8rem; font-weight: 650; cursor: pointer; }
.sp-fb-more:hover { text-decoration: underline; }
.sp-fb-reply {
  margin-top: 0.1rem;
  padding: 0.65rem 0.8rem;
  border-radius: var(--sp-radius-sm) var(--sp-radius-sm) var(--sp-radius-sm) 4px;
  border: 1px solid var(--sp-staff-line);
  background: var(--sp-staff);
  min-width: 0;
}
.sp-fb-reply-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.78rem; color: var(--sp-ink-faint); }
.sp-fb-reply-head strong { color: var(--sp-accent-lit); font-size: 0.82rem; }
.sp-fb-reply p { margin: 0.3rem 0 0; font-size: 0.9rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.sp-fb-new { padding: 0.08rem 0.45rem; border-radius: 999px; background: var(--sp-accent); color: var(--sp-accent-ink); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }

/* a read-only transcript on its own (the console's member page) */
.sp-transcript--read { max-height: 460px; min-height: 120px; border: 1px solid var(--sp-line); border-radius: var(--sp-radius-sm); background: rgba(0, 0, 0, 0.16); }

/* ── the chat ──────────────────────────────────────────────────────────── */
.sp-chat {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  background: var(--sp-bg);
}

.sp-chat-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--sp-line);
  background: linear-gradient(180deg, var(--sp-bg-2), var(--sp-bg));
  flex-shrink: 0;
}
.sp-back {
  display: none;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--sp-line-strong);
  background: var(--sp-bg-2);
  color: var(--sp-ink);
  cursor: pointer;
}
.sp-chat-who { flex: 1; min-width: 0; }
.sp-chat-title { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.sp-chat-title h3 { margin: 0; font-family: var(--sp-font-display); font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sp-chat-who p { margin: 0.15rem 0 0; font-size: 0.8rem; color: var(--sp-ink-soft); }
.sp-chat-actions { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }

.sp-banner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1rem;
  background: var(--sp-ai);
  border-bottom: 1px solid var(--sp-ai-line);
  color: var(--sp-ink);
  font-size: 0.85rem;
  flex-shrink: 0;
}
.sp-banner .icon { color: var(--sp-ai-ink); flex-shrink: 0; }
.sp-banner span { flex: 1; min-width: 0; }

.sp-transcript {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 1rem 1rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  scroll-padding-bottom: 1rem;
  outline: none;
}
.sp-transcript::-webkit-scrollbar { width: 8px; }
.sp-transcript::-webkit-scrollbar-thumb { background: var(--sp-line-strong); border-radius: 8px; }

.sp-day { display: flex; align-items: center; gap: 0.75rem; margin: 0.6rem 0 0.4rem; color: var(--sp-ink-faint); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.sp-day::before, .sp-day::after { content: ''; flex: 1; height: 1px; background: var(--sp-line); }

.sp-sys { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; margin: 0.45rem 0; text-align: center; color: var(--sp-ink-faint); font-size: 0.8rem; line-height: 1.4; }
.sp-sys span { max-width: 52ch; padding: 0.35rem 0.8rem; border-radius: 999px; background: var(--sp-bg-2); border: 1px solid var(--sp-line); }
.sp-sys time { font-size: 0.68rem; }

/* one message */
.sp-msg { display: flex; gap: 0.55rem; max-width: min(78%, 620px); align-items: flex-end; }
.sp-msg--own { align-self: flex-end; flex-direction: row-reverse; }
.sp-msg--other { align-self: flex-start; }
.sp-msg.is-cont { margin-top: -0.15rem; }
.sp-msg-side { width: 30px; flex-shrink: 0; display: flex; align-items: flex-end; }
.sp-msg.is-cont .sp-msg-side .sp-avatar { visibility: hidden; }
.sp-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 800;
  background: var(--sp-bg-3);
  border: 1px solid var(--sp-line-strong);
  color: var(--sp-ink);
}
.sp-avatar--ai { background: var(--sp-ai); border-color: var(--sp-ai-line); color: var(--sp-ai-ink); }
.sp-avatar--staff { background: var(--sp-staff); border-color: var(--sp-staff-line); color: var(--sp-accent-lit); }
.sp-avatar--member { background: var(--sp-bg-3); }
.sp-msg-main { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.sp-msg--own .sp-msg-main { align-items: flex-end; }
.sp-msg-head { font-size: 0.72rem; font-weight: 700; color: var(--sp-ink-soft); padding: 0 0.35rem; }
.sp-msg--ai .sp-msg-head { color: var(--sp-ai-ink); }
.sp-msg--staff .sp-msg-head { color: var(--sp-accent-lit); }

.sp-bubble {
  position: relative;
  padding: 0.6rem 0.85rem;
  border-radius: var(--sp-bubble);
  background: var(--sp-other);
  border: 1px solid var(--sp-other-line);
  color: var(--sp-ink);
  font-size: 0.93rem;
  line-height: 1.45;
  min-width: 0;
  max-width: 100%;
}
.sp-msg--other .sp-bubble { border-bottom-left-radius: 6px; }
.sp-msg--own .sp-bubble { background: var(--sp-own); border-color: transparent; color: var(--sp-own-ink); border-bottom-right-radius: 6px; }
.sp-msg--ai .sp-bubble { background: var(--sp-ai); border-color: var(--sp-ai-line); }
.sp-msg--staff .sp-bubble { background: var(--sp-staff); border-color: var(--sp-staff-line); }
.sp-msg.is-cont.sp-msg--other .sp-bubble { border-top-left-radius: 6px; }
.sp-msg.is-cont.sp-msg--own .sp-bubble { border-top-right-radius: 6px; }
.sp-msg.is-pending .sp-bubble { opacity: 0.72; }
.sp-msg.is-failed .sp-bubble { border-color: rgba(240, 112, 95, 0.55); }
.sp-msg-text { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.sp-msg-text strong { font-weight: 700; }
.sp-msg-text code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.86em; padding: 0.05em 0.35em; border-radius: 5px; background: rgba(0, 0, 0, 0.22); }
.sp-msg-text a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.sp-msg--own .sp-msg-text a { color: var(--sp-own-ink); }

.sp-msg-media { display: grid; gap: 0.35rem; margin-top: 0.45rem; }
.sp-msg-text + .sp-msg-media { margin-top: 0.55rem; }
.sp-msg-media--1 { grid-template-columns: minmax(0, 1fr); }
.sp-msg-media--2, .sp-msg-media--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sp-msg-image { display: block; padding: 0; border: 0; background: var(--sp-bg-3); border-radius: 10px; overflow: hidden; cursor: zoom-in; }
.sp-msg-image img { display: block; width: 100%; max-height: 260px; object-fit: cover; }
.sp-msg-media--1 .sp-msg-image img { max-width: 320px; }
.sp-msg-media--2 .sp-msg-image img, .sp-msg-media--3 .sp-msg-image img { aspect-ratio: 1; max-height: 160px; }

.sp-msg-meta { display: flex; align-items: center; gap: 0.35rem; padding: 0 0.35rem; font-size: 0.68rem; color: var(--sp-ink-faint); }
.sp-msg:not(.is-last):not(.is-failed) .sp-msg-meta { display: none; }
.sp-msg.is-failed .sp-msg-meta { display: flex; }
.sp-msg-state { display: inline-flex; align-items: center; gap: 0.25rem; }
.sp-msg-state--sent { color: var(--sp-ok); }
.sp-msg-state--pending { color: var(--sp-ink-faint); }
.sp-msg-state--failed { color: var(--sp-bad); }
.sp-msg-retry { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; }

.sp-msg-edit {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--sp-line-strong);
  background: var(--sp-bg-2);
  color: var(--sp-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.15s;
}
.sp-msg--own .sp-msg-edit { right: auto; left: -8px; }
.sp-bubble:hover .sp-msg-edit, .sp-bubble:focus-within .sp-msg-edit { opacity: 1; }
@media (hover: none) { .sp-msg-edit { opacity: 0.85; } }

.sp-edit { display: flex; flex-direction: column; gap: 0.45rem; min-width: min(280px, 70vw); }
.sp-edit-input { width: 100%; min-height: 60px; padding: 0.5rem 0.65rem; border-radius: 10px; border: 1px solid var(--sp-line-strong); background: var(--sp-bg); color: var(--sp-ink); font: inherit; font-size: 0.9rem; resize: vertical; }
.sp-msg--own .sp-edit-input { color: var(--sp-ink); }
.sp-edit-actions { display: flex; justify-content: flex-end; gap: 0.4rem; }

.sp-msg.is-fresh { animation: sp-pop 0.32s var(--sp-ease) both; }
.sp-msg--own.is-fresh { animation-name: sp-pop-own; }
@keyframes sp-pop { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes sp-pop-own { from { opacity: 0; transform: translateY(6px) translateX(6px) scale(0.98); } to { opacity: 1; transform: none; } }

/* typing */
.sp-typing { display: flex; align-items: center; gap: 0.5rem; height: 0; overflow: hidden; padding: 0 1rem; color: var(--sp-ink-soft); font-size: 0.78rem; opacity: 0; transition: height 0.2s var(--sp-ease), opacity 0.2s, padding 0.2s; flex-shrink: 0; }
.sp-typing.is-active { height: auto; padding: 0.15rem 1rem 0.5rem; opacity: 1; }
.sp-typing-dots { display: inline-flex; gap: 3px; padding: 0.45rem 0.6rem; border-radius: 999px; background: var(--sp-other); border: 1px solid var(--sp-other-line); }
.sp-typing--ai .sp-typing-dots { background: var(--sp-ai); border-color: var(--sp-ai-line); }
.sp-typing--staff .sp-typing-dots { background: var(--sp-staff); border-color: var(--sp-staff-line); }
.sp-typing-dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.4; animation: sp-dot 1.2s ease-in-out infinite; }
.sp-typing-dots i:nth-child(2) { animation-delay: 0.15s; }
.sp-typing-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes sp-dot { 0%, 60%, 100% { opacity: 0.35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.sp-jump {
  position: absolute;
  left: 50%;
  bottom: calc(var(--sp-composer-h, 76px) + 0.75rem);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--sp-line-strong);
  background: var(--sp-bg-3);
  color: var(--sp-ink);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  box-shadow: var(--sp-shadow);
  cursor: pointer;
  z-index: 2;
}
.sp-jump .icon { transform: rotate(180deg); }
.sp-jump[hidden] { display: none; }

.sp-chat-closed { display: flex; align-items: center; gap: 0.55rem; padding: 0.8rem 1rem calc(0.8rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--sp-line); color: var(--sp-ink-soft); font-size: 0.82rem; flex-shrink: 0; }
.sp-chat-closed .icon { color: var(--sp-ink-faint); flex-shrink: 0; }

/* composer */
.sp-chat-composer { flex-shrink: 0; border-top: 1px solid var(--sp-line); background: var(--sp-bg-2); padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom, 0px)); }
.sp-composer { display: flex; flex-direction: column; gap: 0.45rem; }
.sp-composer.is-dragging { outline: 2px dashed var(--sp-accent); outline-offset: 4px; border-radius: var(--sp-radius-sm); }
.sp-composer-row { display: flex; align-items: flex-end; gap: 0.5rem; }
.sp-composer-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  max-height: 200px;
  padding: 0.62rem 0.85rem;
  border-radius: 14px;
  border: 1px solid var(--sp-line-strong);
  background: var(--sp-bg);
  color: var(--sp-ink);
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.4;
  resize: none;
  overflow-y: hidden;
}
.sp-composer-input:focus { outline: none; border-color: var(--sp-accent); box-shadow: 0 0 0 3px rgba(var(--sp-accent-rgb), 0.18); }
.sp-composer-input::placeholder { color: var(--sp-ink-faint); }
.sp-composer-input.is-busy { opacity: 0.7; }
.sp-composer-attach, .sp-composer-send {
  flex-shrink: 0;
  min-height: 44px;
  border-radius: 14px;
  border: 1px solid var(--sp-line-strong);
  background: var(--sp-bg);
  color: var(--sp-ink);
  font: inherit;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  transition: background 0.15s, transform 0.15s var(--sp-ease), opacity 0.15s;
}
.sp-composer-attach { width: 44px; }
.sp-composer-attach:hover { background: var(--sp-bg-3); }
.sp-composer-send { padding: 0 1rem; background: var(--sp-own); color: var(--sp-accent-ink); border-color: transparent; }
.sp-composer-send:hover { transform: translateY(-1px); }
.sp-composer-send:disabled, .sp-composer-attach:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.sp-composer-images { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.sp-composer-images[hidden] { display: none; }
.sp-composer-chip { position: relative; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; border: 1px solid var(--sp-line-strong); background: var(--sp-bg); }
.sp-composer-chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-composer-chip-remove { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, 0.65); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.sp-composer-hint { font-size: 0.78rem; color: var(--sp-warn); }
.sp-composer-hint.is-info { color: var(--sp-ink-soft); }
.sp-composer-hint[hidden] { display: none; }
/* the staff polish row: one line that never changes height, so the box never jumps */
.sp-composer-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.sp-composer-tool {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 30px;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--sp-line-strong);
  background: var(--sp-bg);
  color: var(--sp-ink-soft);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
}
.sp-composer-tool:hover:not(:disabled) { background: var(--sp-bg-3); border-color: var(--sp-accent); color: var(--sp-ink); }
.sp-composer-tool:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--sp-accent-rgb), 0.25); }
.sp-composer-tool:disabled { opacity: 0.45; cursor: not-allowed; }
.sp-composer-tool.is-working { opacity: 1; border-color: var(--sp-accent); color: var(--sp-accent); }
.sp-composer-tool.is-working .icon-xs { animation: sp-tool-pulse 0.9s ease-in-out infinite; }
.sp-composer-tool--undo { margin-left: auto; color: var(--sp-accent); }
/* Undo keeps its place while it is not offered, so it never pushes the row onto a second line */
.sp-composer-tool--undo[hidden] { display: inline-flex; visibility: hidden; }
@keyframes sp-tool-pulse { 0%, 100% { opacity: 1; transform: none; } 50% { opacity: 0.45; transform: scale(0.85); } }

/* dialogs */
.sp-lightbox, .sp-confirm { border: 0; padding: 0; background: transparent; color: var(--sp-ink, #f7efe1); max-width: 100vw; max-height: 100dvh; }
.sp-lightbox::backdrop, .sp-confirm::backdrop { background: rgba(0, 0, 0, 0.78); backdrop-filter: blur(6px); }
.sp-lightbox { width: 100vw; height: 100dvh; display: grid; place-items: center; }
.sp-lightbox[open] { display: grid; }
.sp-lightbox img { max-width: min(96vw, 1200px); max-height: 90dvh; border-radius: 12px; box-shadow: var(--sp-shadow); }
.sp-lightbox-close { position: fixed; top: calc(1rem + env(safe-area-inset-top, 0px)); right: 1rem; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(0, 0, 0, 0.55); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.sp-confirm { margin: auto; }
.sp-confirm-card { width: min(92vw, 400px); padding: 1.5rem; border-radius: 20px; background: var(--sp-bg, #1a1410); border: 1px solid var(--sp-line-strong, rgba(255,255,255,0.14)); box-shadow: var(--sp-shadow); text-align: center; font-family: var(--sp-font, system-ui, sans-serif); }
.sp-confirm-icon { width: 48px; height: 48px; margin: 0 auto 0.8rem; border-radius: 50%; display: grid; place-items: center; background: rgba(240, 112, 95, 0.16); color: #ffb8ad; }
.sp-confirm-card h3 { margin: 0 0 0.4rem; font-family: var(--sp-font-display, inherit); }
.sp-confirm-card p { margin: 0 0 1.1rem; color: var(--sp-ink-soft, rgba(255,255,255,0.7)); font-size: 0.9rem; line-height: 1.5; }
.sp-confirm-actions { display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap; }

/* ── phones ────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* one card's worth of padding, not two: the hero sits flush in the panel */
  #support-panel.sp-panel--home { padding: 0.75rem; }
  .sp-hero { padding: 1rem 0.85rem 0.9rem; }
  .sp-hero h2 { font-size: 1.35rem; }
  .sp-faq, .sp-recent { padding-inline: 0.15rem; }
  .sp-feedback { padding: 1rem 0.85rem; gap: 0.85rem; }
  /* two by two: four chips in a row leave "Problem" no room on a phone */
  .sp-fb-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }
  .sp-fb-type { justify-content: center; }
  .sp-fb-item { padding: 0.75rem 0.8rem; }
  .sp-msg { max-width: 88%; }
  .sp-composer-send-label { display: none; }
  .sp-composer-send { width: 44px; padding: 0; }
  .sp-composer-tools { gap: 0.3rem; }
  .sp-composer-tool { padding: 0.2rem 0.6rem; }
  .sp-composer-tool .icon-xs { display: none; }
  .sp-chat-head { padding: 0.65rem 0.75rem; }
  .sp-back { display: inline-flex; }
  .sp-chat-actions .sp-btn--sm { min-height: 34px; padding: 0.3rem 0.7rem; font-size: 0.8rem; }
  .sp-chat-who p { display: none; }
  .sp-transcript { padding: 0.75rem 0.75rem 0.5rem; }
  .sp-msg-media--1 .sp-msg-image img { max-width: 100%; max-height: 220px; }

  /* The app view and the tab panel animate in with a transform, and a
     transformed ancestor traps a fixed descendant inside itself (Chrome keeps
     an animated identity matrix, not `none`, once the fill phase holds the
     last keyframe). While the chat is pinned they must not animate, or the
     chat is laid out inside a 120px box. */
  body.sp-chat-open #view-app,
  body.sp-chat-open #tab-support {
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
  }

  /* the live chat pins to the viewport, between the header and the tab dock */
  #support-panel.sp-panel--chat {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--sp-top);
    bottom: var(--sp-dock);
    height: auto;
    min-height: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    z-index: 30;
  }
  body.sp-keyboard #support-panel.sp-panel--chat {
    top: calc(var(--sp-top) + var(--sp-vvo));
    bottom: auto;
    height: calc(var(--sp-vvh, 100dvh) - var(--sp-top));
  }
  body.sp-keyboard .sp-chat-composer { padding-bottom: 0.6rem; }
  body.sp-keyboard #app-tabs.app-tabs--dock { transform: translateY(110%); pointer-events: none; }
}

/* ── motion and lite guards ────────────────────────────────────────────── */
/* the smallest phones: the polish row still fits on one line */
@media (max-width: 400px) {
  .sp-composer-tools { gap: 0.2rem; }
  .sp-composer-tool { padding: 0.2rem 0.4rem; font-size: 0.72rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-msg.is-fresh { animation: none; }
  .sp-typing-dots i { animation: none; opacity: 0.8; }
  .sp-btn, .sp-topic, .sp-composer-send, .sp-composer-tool { transition: none; }
  .sp-composer-tool.is-working .icon-xs { animation: none; }
  .sp-fb-item, .sp-fb-item.is-sending { animation: none; }
  .sp-fb-type, .sp-fb-box { transition: none; }
  .sp-fb-type:hover { transform: none; }
}
html.perf-lite .sp-lightbox::backdrop, html.perf-lite .sp-confirm::backdrop { backdrop-filter: none; }
html.perf-lite .sp-msg.is-fresh { animation: none; }
html.perf-lite .sp-fb-item, html.perf-lite .sp-fb-item.is-sending { animation: none; }
html.perf-lite .sp-composer-tool.is-working .icon-xs { animation: none; }