/* ============================================================
   SUPPORT (support.html, support-staff.html, support-ticket.html)
   Ticket categories, the player's ticket list, the staff area and
   the ticket chat. Frost tokens from theme.css; the hero, tab bar
   and table panel come from leaderboard.css; inputs from
   tierlist.css / news.css. Prefix: .sup-
   ============================================================ */

/* [hidden] must beat every author display below */
.sup-gate[hidden], .sup-new[hidden], .sup-panel[hidden], #supArea[hidden], #supTicket[hidden],
.sup-composer[hidden], .sup-picker[hidden], .sup-closebox[hidden], .sup-empty[hidden],
.sup-staff-btn[hidden], .sup-err[hidden], .sup-closed-note[hidden] { display: none !important; }

.sup-topbar {
  display: flex; justify-content: flex-end;
  margin-bottom: clamp(10px, 1.6vw, 18px);
  min-height: 42px;
}
.sup-gate {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 34px 20px; text-align: center;
  border: 1px solid var(--hairline); border-radius: var(--r-lg);
  background: var(--surface);
}
.sup-gate p { color: var(--text-dim); font-size: 14.5px; max-width: 460px; line-height: 1.6; }
.sup-gate .tlv-note { color: var(--text-dim); }

/* ============================================================
   Category cards (2 rows of 4 on desktop)
   ============================================================ */
.sup-cats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.8vw, 20px);
  margin-bottom: clamp(30px, 4vw, 44px);
}
@media (max-width: 940px) { .sup-cats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .sup-cats { grid-template-columns: 1fr; } }

.sup-cat {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  padding: clamp(20px, 2.6vw, 28px) 16px clamp(18px, 2.4vw, 24px);
  color: var(--text); text-decoration: none; cursor: pointer;
  appearance: none; font: inherit;
}
.sup-cat-ic {
  width: 46px; height: 46px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hairline-strong); background: var(--surface-2);
  color: var(--accent); margin-bottom: 4px;
  transition: transform var(--t) var(--e-out), box-shadow var(--t) var(--e-out), background var(--t) var(--e-out);
}
.sup-cat-ic svg { width: 22px; height: 22px; }
.sup-cat:hover .sup-cat-ic { transform: translateY(-2px); background: var(--accent-grad-soft); box-shadow: var(--glow-soft); }
.sup-cat-title { font-size: 18px; font-weight: 800; letter-spacing: -.015em; line-height: 1.2; }
.sup-cat-tag { font-size: 13px; color: var(--text-dim); line-height: 1.45; }

/* Priority stands out: a soft frost glow that breathes */
.sup-cat.is-priority { border-color: rgba(243,208,138,.35); box-shadow: 0 0 34px -6px rgba(243,208,138,.28); animation: supGlow 3.2s ease-in-out infinite; }
.sup-cat.is-priority .sup-cat-ic { color: var(--gold); border-color: rgba(243,208,138,.45); }
@keyframes supGlow {
  0%, 100% { box-shadow: 0 0 34px -6px rgba(243,208,138,.28); }
  50% { box-shadow: 0 0 44px -4px rgba(243,208,138,.46); }
}
.sup-cat.is-locked { opacity: .6; animation: none; box-shadow: none; }
.sup-cat.is-locked .sup-cat-ic { transform: none; box-shadow: none; }
.sup-cat-lock {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 2px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute);
}
.sup-cat-lock svg { width: 12px; height: 12px; }
.sup-cat.is-on { border-color: rgba(180,204,228,.5); box-shadow: var(--glow); }

/* ============================================================
   New ticket form
   ============================================================ */
.sup-new { padding: clamp(18px, 2.6vw, 28px); margin-bottom: clamp(30px, 4vw, 44px); }
.sup-new-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.sup-new-icon {
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hairline-strong); background: var(--surface-2); color: var(--accent);
}
.sup-new-icon svg { width: 21px; height: 21px; }
.sup-new-title { font-size: clamp(20px, 2.6vw, 26px); font-weight: 800; letter-spacing: -.015em; }
.sup-new-sub { font-size: 13.5px; color: var(--text-dim); margin-top: 2px; }
.sup-form { display: flex; flex-direction: column; gap: 16px; }
.sup-form .tlp-search { width: 100%; }
.sup-questions { display: flex; flex-direction: column; gap: 16px; }
.sup-questions .news-field[hidden] { display: none !important; }
.sup-form .news-body-input { min-height: 110px; }
.sup-form .tlp-select { width: 100%; max-width: 360px; }
.sup-form .news-ed-actions { flex-wrap: wrap; }
.news-opt { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-faint); }

/* file chips (shared by the form and the chat composer) */
.sup-file-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sup-file-hint { font-size: 12px; color: var(--text-mute); }
.sup-files { display: flex; flex-wrap: wrap; gap: 6px; }
.sup-files:empty { display: none; }
.sup-file-chip {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
  padding: 5px 8px 5px 10px; border-radius: 999px;
  border: 1px solid var(--hairline); background: var(--surface-2);
  font-size: 12.5px; font-weight: 600; color: var(--text-dim);
}
.sup-file-chip svg { width: 13px; height: 13px; flex: 0 0 auto; color: var(--accent); }
.sup-file-chip .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.sup-file-chip .s { color: var(--text-mute); font-weight: 500; }
.sup-file-chip .x {
  appearance: none; border: 0; cursor: pointer; background: transparent; color: var(--text-mute);
  width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1; padding: 0;
}
.sup-file-chip .x:hover { background: rgba(255,255,255,.1); color: var(--text); }

/* small action buttons (View / Close / Attach / Emoji) */
.sup-act {
  appearance: none; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border: 1px solid var(--hairline); border-radius: 9px;
  background: var(--bg-2); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 700;
  white-space: nowrap;
  transition: border-color var(--t-fast) var(--e-out), background var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}
.sup-act svg { width: 14px; height: 14px; }
.sup-act:hover { border-color: var(--hairline-strong); background: var(--surface-3); }
.sup-act.is-on { background: var(--accent-grad-soft); border-color: rgba(180,204,228,.5); color: var(--ice-100); }
.sup-act.danger { color: #ffb0b8; }
.sup-act.danger:hover { border-color: rgba(255,107,122,.5); background: rgba(255,107,122,.1); }
.sup-act[disabled] { opacity: .45; pointer-events: none; }

/* ============================================================
   Ticket tables (player list + staff area)
   ============================================================ */
.sup-h2 { font-size: clamp(22px, 3vw, 30px); text-align: center; margin: 0 0 clamp(16px, 2.4vw, 24px); letter-spacing: -.015em; }
.sup-table { font-size: 14px; }
.sup-table thead th { padding: 14px 16px; }
.sup-table td { padding: 12px 16px; border-top: 1px solid var(--hairline); vertical-align: middle; }
.sup-table tbody tr { transition: background var(--t-fast) var(--e-out); }
.sup-table tbody tr:hover { background: var(--surface-2); }
.sup-c-id { width: 96px; }
.sup-c-status { width: 130px; }
.sup-c-level { width: 110px; }
.sup-c-player { width: 200px; }
.sup-c-updated { width: 250px; }
.sup-c-actions { width: 150px; text-align: right; }
.sup-table td.sup-c-actions { text-align: right; }
.sup-id { font-family: var(--font-price); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-mute); white-space: nowrap; }
.sup-subject-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sup-subject-cell a { color: var(--text); font-weight: 700; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46vw; }
.sup-subject-cell a:hover { color: var(--ice-100); }
.sup-subject-cat { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); }
.sup-player { display: flex; align-items: center; gap: 9px; min-width: 0; }
.sup-player .n { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-when { color: var(--text-dim); white-space: nowrap; }
.sup-sep { color: var(--text-faint); margin: 0 6px; }
.sup-who { color: var(--text); font-weight: 600; }
.sup-actions { display: inline-flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }

/* priority rows glow */
.sup-row.is-priority > td { background: rgba(243,208,138,.05); }
.sup-row.is-priority > td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
.sup-row.is-priority:hover > td { background: rgba(243,208,138,.09); }
.sup-row.is-priority .sup-subject-cat { color: var(--gold); }

.sup-empty { padding: 30px 18px; text-align: center; color: var(--text-dim); font-size: 14px; }
.sup-foot { padding: 12px 18px; color: var(--text-mute); font-size: 12.5px; border-top: 1px solid var(--hairline); }
.sup-foot:empty { display: none; }

/* pills */
.sup-status, .sup-level, .sup-catpill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px;
  border: 1px solid var(--hairline); background: var(--surface-2);
  font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap; color: var(--text-dim);
}
.sup-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sup-status.s-open { color: var(--moderate); border-color: rgba(245,196,81,.35); background: rgba(245,196,81,.10); }
.sup-status.s-in_progress { color: var(--ice-200); border-color: rgba(180,204,228,.4); background: rgba(180,204,228,.12); }
.sup-status.s-closed { color: var(--safe); border-color: rgba(87,217,163,.35); background: rgba(87,217,163,.10); }
.sup-level { color: var(--text-dim); }
.sup-level.l-2 { color: var(--ice-200); }
.sup-level.l-3 { color: var(--moderate); }
.sup-level.l-4 { color: var(--advanced); }
.sup-level.l-5 { color: var(--danger); }
.sup-catpill.c-priority { color: var(--gold); border-color: rgba(243,208,138,.4); background: rgba(243,208,138,.1); }
.sup-catpill svg { width: 12px; height: 12px; }

/* staff controls row */
.sup-controls { gap: 12px; }
.sup-scope { display: flex; align-items: center; gap: 8px; }
.sup-refresh { width: 34px; padding: 0; justify-content: center; }
.sup-refresh.is-busy svg { animation: supSpin .8s linear infinite; }
@keyframes supSpin { to { transform: rotate(360deg); } }

/* ============================================================
   Ticket page
   ============================================================ */
.sup-ticket-wrap { max-width: 920px; }
.sup-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.sup-head-main { min-width: 0; flex: 1 1 320px; }
.sup-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sup-subject { font-size: clamp(22px, 3.4vw, 32px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin-top: 10px; overflow-wrap: anywhere; }
.sup-meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; color: var(--text-dim); flex-wrap: wrap; }
.sup-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.sup-head-actions .tlp-select { height: 32px; font-size: 12.5px; padding-right: 28px; }
.sup-closebox { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px; margin-bottom: 16px; }
.sup-closebox .tlp-search { flex: 1 1 220px; }
.sup-err { margin-bottom: 12px; }

.sup-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto; object-fit: cover;
  background: var(--surface-2); border: 1px solid var(--hairline);
}
.sup-avatar-fallback {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #fff; background: #5865F2; border-color: transparent;
}

/* chat */
.sup-chat { padding: 0; overflow: hidden; }
.sup-log {
  display: flex; flex-direction: column; gap: 14px;
  max-height: 62vh; min-height: 220px; overflow-y: auto;
  padding: clamp(14px, 2vw, 20px);
}
.sup-msg { display: flex; gap: 10px; align-items: flex-start; max-width: 86%; }
.sup-msg.me { flex-direction: row-reverse; align-self: flex-end; }
.sup-msg-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sup-msg.me .sup-msg-body { align-items: flex-end; }
.sup-msg-meta { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-mute); flex-wrap: wrap; }
.sup-msg.me .sup-msg-meta { flex-direction: row-reverse; }
.sup-msg-name { font-weight: 800; color: var(--text-dim); }
.sup-badge {
  display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid rgba(180,204,228,.4); background: rgba(180,204,228,.12); color: var(--ice-200);
}
.sup-bubble {
  padding: 10px 14px; border-radius: 16px; border-top-left-radius: 6px;
  background: var(--surface-2); border: 1px solid var(--hairline);
  font-size: 14.5px; line-height: 1.6; color: var(--text); overflow-wrap: anywhere;
}
.sup-msg.me .sup-bubble { border-top-left-radius: 16px; border-top-right-radius: 6px; background: var(--accent-grad-soft); border-color: rgba(180,204,228,.3); }
.sup-bubble p { margin: 0; }
.sup-bubble p + p { margin-top: 8px; }
.sup-bubble strong { font-weight: 800; color: var(--ice-100); }
.sup-bubble a { color: var(--accent); text-decoration: underline; }
.sup-bubble img.emoji, .sup-bubble img.news-emoji { width: 1.35em; height: 1.35em; vertical-align: -.25em; }
.sup-bubble:has(> .sup-bubble-text:empty) { display: none; }
.sup-sys { align-self: center; text-align: center; font-size: 12px; color: var(--text-mute); padding: 2px 10px; }
.sup-sys b { color: var(--text-dim); font-weight: 700; }
.sup-sys-time { color: var(--text-faint); }

/* attachments in messages */
.sup-atts { display: flex; flex-wrap: wrap; gap: 8px; }
.sup-msg.me .sup-atts { justify-content: flex-end; }
.sup-att-img-wrap { display: inline-block; line-height: 0; }
.sup-att-img { display: block; max-width: min(340px, 70vw); max-height: 300px; border-radius: 12px; border: 1px solid var(--hairline); background: var(--bg-2); }
.sup-att-video { display: block; max-width: min(420px, 70vw); border-radius: 12px; border: 1px solid var(--hairline); background: #000; }
.sup-att-file {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px;
  border: 1px solid var(--hairline); background: var(--bg-2); color: var(--text); text-decoration: none; font-size: 13px; font-weight: 600;
}
.sup-att-file svg { width: 15px; height: 15px; color: var(--accent); flex: 0 0 auto; }
.sup-att-file .s { color: var(--text-mute); font-weight: 500; }
.sup-att-file:hover { border-color: var(--hairline-strong); background: var(--surface-3); }

/* composer */
.sup-composer { display: flex; flex-direction: column; gap: 10px; padding: 12px clamp(12px, 2vw, 18px) clamp(12px, 2vw, 18px); border-top: 1px solid var(--hairline); }
.sup-draft { min-height: 58px; max-height: 220px; }
.sup-composer-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sup-composer-hint { font-size: 12px; color: var(--text-mute); flex: 1 1 auto; }
.sup-send { margin-left: auto; padding: 8px 16px; font-size: 13.5px; }
.sup-send[disabled] { opacity: .5; pointer-events: none; }
.sup-picker .news-emojis { margin-top: 2px; }
.sup-picker .news-emoji-tabs { margin-bottom: 8px; }
.sup-closed-note { padding: 14px 18px; border-top: 1px solid var(--hairline); text-align: center; font-size: 13.5px; color: var(--text-dim); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1020px) {
  .sup-controls { flex-direction: column; align-items: center; gap: 10px; }
  .sup-controls .lbp-tabsWrap { width: 100%; }
}
@media (max-width: 760px) {
  .sup-c-level, .sup-table td.sup-c-level { display: none; }
  .sup-c-updated { width: auto; }
  .sup-when { display: block; }
  .sup-sep { display: none; }
  .sup-who { display: block; font-size: 12.5px; }
  .sup-subject-cell a { max-width: 40vw; }
  .sup-player .n { display: none; }
  .sup-c-player { width: 56px; }
  .sup-msg { max-width: 94%; }
}
@media (max-width: 520px) {
  .sup-table thead th, .sup-table td { padding: 10px 10px; }
  .sup-c-status, .sup-table td.sup-c-status { display: none; }
  .sup-subject-cell a { max-width: 38vw; }
  .sup-actions { flex-direction: column; align-items: flex-end; }
  .sup-head-actions { justify-content: flex-start; width: 100%; }
  .sup-head-actions .tlp-select { max-width: 48%; }
  .sup-log { max-height: 56vh; }
}
@media (prefers-reduced-motion: reduce) {
  .sup-cat.is-priority { animation: none; }
  .sup-refresh.is-busy svg { animation: none; }
}