/* OBS-15 — /support page: chat widget styles
   Uses SNS design tokens only; no hardcoded hex outside token references.
   Mobile-first; safe-area insets respected so input clears bottom tab bar. */

/* ---- Layout ---------------------------------------------------------------- */
.support-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--row-gap, 24px);
  padding: var(--sns-content-px-dt, 24px);
  align-items: start;
  max-width: 960px;
}

@media (max-width: 880px) {
  .support-layout {
    grid-template-columns: 1fr;
    padding: var(--sns-content-px-mb, 12px);
  }
  /* Sidebar appears below chat on mobile */
  .support-sidebar { order: 2; }
  .support-chat-panel { order: 1; }
}

/* ---- Chat panel ------------------------------------------------------------ */
.support-chat-panel {
  display: flex;
  flex-direction: column;
  min-height: 520px;
  max-height: 72vh;
  /* On short mobile viewports the bottom tab bar is 56px;
     safe-area-inset-bottom covers notched phones. */
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 4px);
}

/* ---- Status bar ------------------------------------------------------------ */
.support-status-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--gray-border);
  font-size: var(--sns-fs-11, 11px);
  letter-spacing: var(--sns-ls-eyebrow, .12em);
  text-transform: uppercase;
  color: var(--gray-light);
  flex-shrink: 0;
}

.support-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gray-light);
  flex-shrink: 0;
  transition: background var(--sns-dur-base, .2s);
}
/* AUD-33: was var(--sns-trend-up,#5ad07a) — an ad-hoc green outside the
   single sanctioned positive/credit green. */
.support-status-dot.is-ready   { background: var(--green-positive, #3DBA6E); }
.support-status-dot.is-error   { background: var(--red-bright, #FF3B30); }
.support-status-dot.is-busy    { background: var(--gold-accent, var(--accent,#FF2D2D)); animation: support-dot-pulse 1s ease-in-out infinite; }

@keyframes support-dot-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .35; }
}

.support-status-link {
  margin-left: auto;
  color: var(--brand-blue, #00B7FF);
  text-decoration: none;
  font-size: var(--sns-fs-11, 11px);
  letter-spacing: var(--sns-ls-eyebrow, .12em);
}
.support-status-link:hover { text-decoration: underline; }

/* ---- Message list --------------------------------------------------------- */
.support-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
  /* Prevent content from disappearing under bottom tab bar on mobile */
  overscroll-behavior: contain;
}

/* Scrollbar */
.support-messages::-webkit-scrollbar { width: 4px; }
.support-messages::-webkit-scrollbar-track { background: transparent; }
.support-messages::-webkit-scrollbar-thumb { background: var(--gray-border); border-radius: 2px; }

/* Individual bubbles */
.support-msg {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 85%;
  animation: support-msg-in .18s var(--sns-ease-snappy, cubic-bezier(.16, 1, .3, 1)) both;
}
.support-msg.is-user  { align-self: flex-end; align-items: flex-end; }
.support-msg.is-bot   { align-self: flex-start; align-items: flex-start; }
.support-msg.is-error { align-self: flex-start; }

@keyframes support-msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.support-msg-bubble {
  padding: 10px 14px;
  border-radius: var(--sns-radius-lg, 8px);
  font-size: var(--sns-fs-14, 14px);
  line-height: var(--sns-lh-body, 1.5);
  word-break: break-word;
  white-space: pre-wrap;
}
.is-user .support-msg-bubble {
  background: var(--red-primary, #FF1A1A);
  color: #fff;
  border-bottom-right-radius: var(--sns-radius-xs, 3px);
}
.is-bot .support-msg-bubble {
  background: var(--black-soft, #111111);
  border: 1px solid var(--gray-border, #2A2A2A);
  color: var(--white-bright, #F5F5F5);
  border-bottom-left-radius: var(--sns-radius-xs, 3px);
}
.is-error .support-msg-bubble {
  background: rgba(255, 26, 26, .12);
  border: 1px solid var(--red-bright, #FF3B30);
  color: var(--red-bright, #FF3B30);
  border-radius: var(--sns-radius-md, 6px);
  font-size: var(--sns-fs-13, 13px);
}

/* Ticket chip (from `ticket` SSE event) */
.support-ticket-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--black-soft, #111111);
  border: 1px solid var(--gray-border, #2A2A2A);
  border-left: 3px solid var(--gold-accent, var(--accent,#FF2D2D));
  border-radius: var(--sns-radius-md, 6px);
  font-size: var(--sns-fs-12, 12px);
  letter-spacing: var(--sns-ls-base, .04em);
  color: var(--white-bright, #F5F5F5);
  max-width: 100%;
}
.support-ticket-chip[data-severity="critical"] { border-left-color: var(--red-bright, #FF3B30); }
.support-ticket-chip[data-severity="high"]     { border-left-color: var(--orange-accent, #FF6A00); }
.support-ticket-chip[data-severity="medium"]   { border-left-color: var(--gold-accent, var(--accent,#FF2D2D)); }
.support-ticket-chip[data-severity="low"]      { border-left-color: var(--sns-trend-up, #5ad07a); }

.support-ticket-label {
  font-family: var(--f-display);
  font-size: var(--sns-fs-11, 11px);
  letter-spacing: var(--sns-ls-eyebrow, .12em);
  text-transform: uppercase;
  color: var(--gray-light);
}
.support-ticket-id {
  font-family: var(--f-mono);
  font-size: var(--sns-fs-11, 11px);
  color: var(--brand-blue, #00B7FF);
}
.support-ticket-severity {
  font-size: var(--sns-fs-11, 11px);
  font-weight: var(--sns-fw-bold, 700);
  letter-spacing: var(--sns-ls-eyebrow, .12em);
  text-transform: uppercase;
}

/* ---- Thinking indicator --------------------------------------------------- */
.support-thinking {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  flex-shrink: 0;
}
.support-thinking[hidden] { display: none; }

.support-thinking-dots {
  display: inline-flex;
  gap: 4px;
}
.support-thinking-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gray-light);
  animation: support-dot-bounce .9s ease-in-out infinite;
}
.support-thinking-dots span:nth-child(2) { animation-delay: .15s; }
.support-thinking-dots span:nth-child(3) { animation-delay: .3s; }

@keyframes support-dot-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: .5; }
  40%            { transform: translateY(-5px); opacity: 1; }
}

.support-thinking-label {
  font-size: var(--sns-fs-12, 12px);
  color: var(--gray-light);
  letter-spacing: var(--sns-ls-base, .04em);
}

/* ---- Input row ------------------------------------------------------------- */
.support-input-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 12px 16px;
  border-top: 1px solid var(--gray-border);
  flex-shrink: 0;
  /* On mobile, keep above bottom tab bar (tab bar = 56px) + safe-area */
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

.support-input {
  flex: 1;
  min-height: 44px;
  max-height: 120px;
  padding: 10px 14px;
  background: var(--black-soft, #111111);
  border: 1px solid var(--gray-border, #2A2A2A);
  border-radius: var(--sns-radius-lg, 8px);
  color: var(--white-bright, #F5F5F5);
  font-family: var(--f-body);
  font-size: var(--sns-fs-14, 14px);
  line-height: var(--sns-lh-body, 1.5);
  resize: none;
  overflow-y: auto;
  transition: border-color var(--sns-dur-base, .2s);
}
.support-input:focus {
  outline: none;
  border-color: var(--red-primary, #FF1A1A);
}
.support-input::placeholder { color: var(--gray-light); }
.support-input:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.support-send-btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: var(--sns-radius-lg, 8px);
}
.support-send-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ---- Sidebar --------------------------------------------------------------- */
.support-escalate-card .card-body { display: flex; flex-direction: column; gap: 12px; }
.support-escalate-desc { font-size: var(--sns-fs-13, 13px); color: var(--gray-light); margin: 0; }
.support-escalate-btn  { width: 100%; }
.support-escalate-note {
  font-size: var(--sns-fs-12, 12px);
  color: var(--gray-light);
  margin: 0;
  text-align: center;
}
.support-escalate-note[hidden] { display: none; }

.support-help-card .card-body { display: flex; flex-direction: column; gap: 8px; text-align: center; }
.support-help-note { font-size: var(--sns-fs-12, 12px); color: var(--gray-light); margin: 0; }

/* ---- Streaming cursor ----------------------------------------------------- */
.support-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--white-bright, #F5F5F5);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: support-blink .7s step-end infinite;
}
@keyframes support-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ---- Screen-reader only ---------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Contact-form fallback link (guest gate + daily-cap "at capacity" message) */
.support-contact-link {
  color: var(--gold-accent, #FF2D2D);
  font-weight: 600;
  text-decoration: underline;
  white-space: nowrap;
}
.support-contact-link:hover { opacity: 0.85; }

/* ---- Beta empathy banner -------------------------------------------------- */
.support-beta-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 var(--sns-content-px-dt, 24px) 12px;
  padding: 10px 16px;
  background: rgba(255,45,45, .08);
  border: 1px solid rgba(255,45,45, .22);
  border-radius: var(--sns-radius-md, 6px);
  font-size: var(--sns-fs-13, 13px);
  color: var(--gray-light);
  line-height: 1.4;
  flex-wrap: wrap;
  max-width: calc(960px - 2 * var(--sns-content-px-dt, 24px));
}
@media (max-width: 880px) {
  .support-beta-banner {
    margin: 0 var(--sns-content-px-mb, 12px) 10px;
  }
}
.support-beta-icon {
  width: 28px;
  height: 21px;
  object-fit: cover;
  border-radius: 3px;
  flex-shrink: 0;
}
.support-beta-text {
  flex: 1;
  min-width: 0;
}
.support-beta-help-link {
  font-size: var(--sns-fs-12, 12px);
  color: var(--gold-accent, var(--accent,#FF2D2D));
  text-decoration: none;
  font-weight: var(--sns-fw-bold, 700);
  letter-spacing: var(--sns-ls-base, .04em);
  white-space: nowrap;
  flex-shrink: 0;
}
.support-beta-help-link:hover { text-decoration: underline; }

/* ---- Quick-reply chips (starters + consent) ------------------------------- */
.support-quick-chips,
.support-consent-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 16px 4px;
  flex-shrink: 0;
}
.support-consent-chips { padding-top: 4px; padding-bottom: 8px; }

/* Hide when inactive (JS sets/removes hidden attr) */
.support-quick-chips[hidden],
.support-consent-chips[hidden] { display: none; }

.support-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  background: var(--black-soft, #111111);
  border: 1px solid var(--gray-border, #2A2A2A);
  border-radius: 20px;
  font-family: var(--f-body);
  font-size: var(--sns-fs-13, 13px);
  color: var(--white-bright, #F5F5F5);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--sns-dur-base, .2s), background var(--sns-dur-base, .2s), transform .1s ease;
  user-select: none;
}
.support-chip:hover {
  border-color: var(--red-primary, #FF1A1A);
  background: rgba(255, 26, 26, .08);
  transform: translateY(-1px);
}
.support-chip:active { transform: translateY(0); }
.support-chip:focus-visible {
  outline: 2px solid var(--gold-accent, var(--accent,#FF2D2D));
  outline-offset: 2px;
}

/* Consent chip — affirmative (green) */
.support-chip--yes {
  border-color: var(--sns-trend-up, #5ad07a);
  color: var(--sns-trend-up, #5ad07a);
  font-weight: var(--sns-fw-bold, 700);
}
.support-chip--yes:hover {
  background: rgba(90, 208, 122, .1);
  border-color: var(--sns-trend-up, #5ad07a);
}
/* Consent chip — decline (muted) */
.support-chip--no {
  border-color: var(--gray-border, #2A2A2A);
  color: var(--gray-light);
}
.support-chip--no:hover {
  border-color: var(--gray-light);
  background: rgba(255, 255, 255, .04);
  transform: translateY(-1px);
}

/* Mobile: chips row scrolls horizontally on very narrow screens */
@media (max-width: 400px) {
  .support-quick-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-right: 8px;
  }
  .support-quick-chips::-webkit-scrollbar { display: none; }
  .support-chip { flex-shrink: 0; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Menu concierge (v3, no-LLM) — option buttons, action links, report forms.
   Rendered by support.js into #support-messages.
   ════════════════════════════════════════════════════════════════════════════ */

/* Vertical stack of menu option buttons (an in-conversation choice set) */
.support-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0 8px;
  margin: 2px 0 6px;
  align-items: flex-start;
}

/* A menu option — full-width, left-aligned, wraps (labels are sentences) */
.support-menu-btn {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 11px 16px;
  background: var(--black-soft, #111111);
  border: 1px solid var(--gray-border, #2A2A2A);
  border-radius: var(--sns-radius-md, 6px);
  font-family: var(--f-body);
  font-size: var(--sns-fs-14, 14px);
  line-height: 1.35;
  color: var(--white-bright, #F5F5F5);
  cursor: pointer;
  transition: border-color var(--sns-dur-base, .2s), background var(--sns-dur-base, .2s), transform .1s ease;
}
.support-menu-btn-label { flex: 1 1 auto; min-width: 0; }

/* AUD-33: menu option icons — sitewide currentColor SVG-mask technique
   (same pattern as .ic-bar/.ic-bolt/.ic-shield-check in chrome.js), swapped
   in for the raw OS emoji that used to prefix each label. */
.support-menu-ic {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  display: inline-block;
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
  opacity: .85;
}
.support-menu-ic.ic-menu-broken {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2L2 21h20L12 2z'/><line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2L2 21h20L12 2z'/><line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>");
}
.support-menu-ic.ic-menu-draft {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><ellipse cx='12' cy='12' rx='10' ry='6'/><line x1='12' y1='6' x2='12' y2='18'/><line x1='7' y1='9' x2='17' y2='9'/><line x1='7' y1='15' x2='17' y2='15'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><ellipse cx='12' cy='12' rx='10' ry='6'/><line x1='12' y1='6' x2='12' y2='18'/><line x1='7' y1='9' x2='17' y2='9'/><line x1='7' y1='15' x2='17' y2='15'/></svg>");
}
.support-menu-ic.ic-menu-trade {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='1 4 1 10 7 10'/><path d='M3.51 15a9 9 0 1 0 .49-4.95'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='1 4 1 10 7 10'/><path d='M3.51 15a9 9 0 1 0 .49-4.95'/></svg>");
}
.support-menu-ic.ic-menu-commish {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/><polyline points='9 12 11 14 15 10'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/><polyline points='9 12 11 14 15 10'/></svg>");
}
.support-menu-ic.ic-menu-rules {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='20' x2='18' y2='10'/><line x1='12' y1='20' x2='12' y2='4'/><line x1='6' y1='20' x2='6' y2='14'/><line x1='2' y1='20' x2='22' y2='20'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='20' x2='18' y2='10'/><line x1='12' y1='20' x2='12' y2='4'/><line x1='6' y1='20' x2='6' y2='14'/><line x1='2' y1='20' x2='22' y2='20'/></svg>");
}
.support-menu-ic.ic-menu-billing {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='1' x2='12' y2='23'/><path d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='1' x2='12' y2='23'/><path d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/></svg>");
}
.support-menu-ic.ic-menu-other {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20h9'/><path d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20h9'/><path d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z'/></svg>");
}
.support-menu-btn:hover {
  border-color: var(--red-primary, #FF1A1A);
  background: rgba(255, 26, 26, .08);
  transform: translateY(-1px);
}
.support-menu-btn:active { transform: translateY(0); }
.support-menu-btn:focus-visible {
  outline: 2px solid var(--gold-accent, var(--accent,#FF2D2D));
  outline-offset: 2px;
}
.support-menu-btn:disabled {
  opacity: .45;
  cursor: default;
  transform: none;
  border-color: var(--gray-border, #2A2A2A);
  background: var(--black-soft, #111111);
}
/* Once a choice is made, fade the set so history reads clearly */
.support-options.is-chosen { opacity: .6; }

/* Action link styled as a CTA inside a bot bubble (e.g. "Open my leagues →") */
.support-action-link {
  display: inline-block;
  margin-top: 8px;
  padding: 8px 16px;
  background: rgba(255,45,45, .1);
  border: 1px solid var(--gold-accent, var(--accent,#FF2D2D));
  border-radius: var(--sns-radius-md, 6px);
  color: var(--gold-accent, var(--accent,#FF2D2D));
  font-size: var(--sns-fs-13, 13px);
  font-weight: var(--sns-fw-bold, 700);
  letter-spacing: var(--sns-ls-base, .04em);
  text-decoration: none;
}
.support-action-link:hover { background: rgba(255,45,45, .18); }

/* Bulleted explanation (e.g. how commissioner replacement works) */
.support-bullets {
  margin: 8px 0 4px;
  padding-left: 20px;
  font-size: var(--sns-fs-13, 13px);
  line-height: 1.5;
  color: var(--gray-light);
}
.support-bullets li { margin-bottom: 5px; }

/* ── Report form (files a ticket, no LLM) ───────────────────────────────────── */
.support-form-prelude {
  margin: 0 0 8px;
  font-size: var(--sns-fs-13, 13px);
  color: var(--gray-light);
  line-height: 1.45;
}
.support-form-label {
  display: block;
  margin-top: 8px;
  margin-bottom: 4px;
  font-size: var(--sns-fs-12, 12px);
  font-weight: var(--sns-fw-bold, 700);
  letter-spacing: var(--sns-ls-base, .04em);
  color: var(--white-bright, #F5F5F5);
}
.support-form-input,
.support-form-textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 4px;
  padding: 9px 12px;
  background: var(--black-deep, #0A0A0A);
  border: 1px solid var(--gray-border, #2A2A2A);
  border-radius: var(--sns-radius-md, 6px);
  font-family: var(--f-body);
  font-size: var(--sns-fs-14, 14px);
  line-height: 1.45;
  color: var(--white-bright, #F5F5F5);
  transition: border-color var(--sns-dur-base, .2s);
}
.support-form-textarea { resize: vertical; min-height: 64px; }
.support-form-input:focus,
.support-form-textarea:focus {
  outline: none;
  border-color: var(--red-primary, #FF1A1A);
}
.support-form-attach-note {
  margin: 8px 0 0;
  font-size: var(--sns-fs-12, 12px);
  color: var(--sns-trend-up, #5ad07a);
}
.support-form-submit {
  margin-top: 12px;
}
.support-form-error {
  margin: 8px 0 0;
  font-size: var(--sns-fs-13, 13px);
  color: var(--red-bright, #FF3B30);
}