/* ==========================================================================
   DEDDIT — styles.css
   Palette: void #0B0D10, surface #15181D, surface-raised #1D2127,
            border #2A2F37, text #E8EAED, text-dim #8B93A1,
            accent-hot #FF4B2B (flame), accent-2 #FFB020 (report/warn),
            danger #E4374B, perma #8B2FE0
   Type: 'Archivo Black' style stack for display, system sans for body,
         'JetBrains Mono' stack for stats/usernames.
========================================================================== */

@font-face { font-family: 'sys-display'; src: local('Arial Black'); }

:root{
  --void:#0B0D10;
  --surface:#15181D;
  --surface2:#1D2127;
  --surface3:#242830;
  --border:#2A2F37;
  --text:#E8EAED;
  --text-dim:#8B93A1;
  --text-faint:#5B6270;
  --hot:#FF4B2B;
  --hot-dim:#7a2c1e;
  --gold:#FFB020;
  --danger:#E4374B;
  --perma:#9B4DFF;
  --good:#3BD671;
  --up:#FF5A2E;
  --down:#5A7BFF;
  --radius:10px;
  --radius-lg:16px;
  --shadow-card: 0 1px 0 rgba(255,255,255,0.03) inset, 0 6px 18px rgba(0,0,0,0.35);
  --font-display: 'Arial Black', 'Helvetica Neue', Impact, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'Courier New', ui-monospace, monospace;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; height:100%; background:
  radial-gradient(circle at 20% 10%, rgba(255,75,43,0.06), transparent 28%),
  radial-gradient(circle at 80% 20%, rgba(59,214,113,0.05), transparent 22%),
  radial-gradient(circle at 50% 90%, rgba(0,194,209,0.04), transparent 20%),
  var(--void); color:var(--text); font-family:var(--font-body); overflow:hidden; }
body{ position:relative; }
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.015), transparent 18%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 3px);
  opacity:0.28;
  mix-blend-mode:screen;
}
button{ font-family:inherit; cursor:pointer; }
input, select{ font-family:inherit; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:#2c313a; border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:#3a404b; }

.screen{ display:none; width:100vw; height:100vh; }
.screen.active{ display:block; }

/* ============ MAIN MENU ============ */
#screen-menu.active{ display:flex; align-items:center; justify-content:center; position:relative; }
.menu-bg-glow{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,75,43,0.10), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(155,77,255,0.10), transparent 45%),
    var(--void);
  z-index:0;
}
.menu-wrap{ position:relative; z-index:1; text-align:center; padding:40px; }
.logo-row{ display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:6px; }
.logo-mark{
  font-family:var(--font-mono); font-weight:900; font-size:38px; color:var(--void);
  background:linear-gradient(135deg, var(--hot), var(--gold));
  width:64px; height:64px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(255,75,43,0.35);
}
.logo-mark.small{ width:34px; height:34px; font-size:20px; border-radius:9px; }
.logo-text{
  font-family:var(--font-display); font-size:64px; letter-spacing:-2px; margin:0;
  background:linear-gradient(135deg, #fff, #b7bcc6);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.tagline{ color:var(--text-dim); font-size:16px; margin:0 0 40px; letter-spacing:0.3px; }
.menu-buttons{ display:flex; flex-direction:column; gap:12px; width:280px; margin:0 auto; }
.menu-footer{ margin-top:40px; color:var(--text-faint); font-size:12px; letter-spacing:0.5px; }

.btn{
  border:none; border-radius:999px; padding:13px 22px; font-size:15px; font-weight:700;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease; color:var(--text);
}
.btn:active{ transform:scale(0.97); }
.btn-primary{ background:linear-gradient(135deg, var(--hot), #ff7a3d); color:#1a0a05; box-shadow:0 6px 18px rgba(255,75,43,0.3); }
.btn-primary:hover{ box-shadow:0 8px 22px rgba(255,75,43,0.45); }
.btn-secondary{ background:var(--surface3); color:var(--text); border:1px solid var(--border); }
.btn-secondary:hover{ background:#2a2f38; }
.btn-secondary:disabled{ opacity:0.4; cursor:not-allowed; }
.btn-small{ padding:8px 14px; font-size:13px; border-radius:8px; color:var(--text); background:var(--surface2); border:1px solid var(--border); }
.btn-ghost{ background:transparent; border:1px solid var(--border); color:var(--text-dim); }
.btn-ghost:hover{ background:var(--surface2); color:var(--text); }
.btn-danger{ background:linear-gradient(135deg, var(--danger), #b02338); color:#fff; }
.btn-warn{ background:var(--surface3); color:var(--gold); border:1px solid var(--hot-dim); }
.btn-permaban{ background:linear-gradient(135deg, var(--perma), #6b1fc9); color:#fff; }
.btn-active{ background:linear-gradient(135deg, var(--gold), #d89618); color:var(--void); font-weight:800; }

/* ============ generic pages (howto/credits) ============ */
.panel-page{
  max-width:760px; margin:0 auto; height:100vh; overflow-y:auto; padding:60px 40px 100px;
}
.panel-page h2{ font-family:var(--font-display); font-size:34px; margin-bottom:20px; letter-spacing:-1px; }
.howto-body h3{ color:var(--hot); margin-top:26px; margin-bottom:6px; font-size:18px; }
.howto-body p, .howto-body li{ color:var(--text-dim); line-height:1.6; font-size:15px; }
.howto-body ul{ padding-left:20px; }
.center-page{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.credits-studio{ font-family:var(--font-display); font-size:26px; background:linear-gradient(135deg, var(--hot), var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.credits-body p{ color:var(--text-dim); }
.credits-small{ font-size:13px; max-width:440px; color:var(--text-faint); }
#screen-howto .btn, #screen-credits .btn{ display:block; margin:30px auto 0; }

/* ============ TOP BAR ============ */
.topbar{
  height:56px; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:0 18px; background:var(--surface); border-bottom:1px solid var(--border);
}
.topbar-left{ display:flex; align-items:center; gap:10px; min-width:220px; }
.topbar-title{ font-family:var(--font-display); font-size:18px; }
.topbar-sub{ color:var(--text-faint); font-size:12px; font-family:var(--font-mono); border-left:1px solid var(--border); padding-left:10px; }
.topbar-stats{ display:flex; gap:8px; flex:1; justify-content:center; flex-wrap:wrap; }
.stat-chip{
  background:var(--surface2); border:1px solid var(--border); border-radius:8px; padding:5px 12px;
  font-family:var(--font-mono); font-size:13px; display:flex; gap:6px; align-items:baseline;
}
.stat-label{ color:var(--text-faint); font-size:10px; text-transform:uppercase; letter-spacing:0.5px; }
.warn-chip{ border-color:var(--hot-dim); }
.topbar-right{ display:flex; gap:8px; }

/* ============ GAME BODY LAYOUT ============ */
.game-body{ display:flex; height:calc(100vh - 56px); }
.sidenav{
  width:190px; background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; padding:14px 10px; gap:4px; flex-shrink:0;
}
.nav-item{
  background:transparent; border:none; color:var(--text-dim); text-align:left; padding:11px 12px;
  border-radius:8px; font-size:14px; font-weight:600; display:flex; justify-content:space-between; align-items:center;
}
.nav-item:hover{ background:var(--surface2); color:var(--text); }
.nav-item.active{ background:var(--surface3); color:var(--text); box-shadow:inset 3px 0 0 var(--hot); }
.badge{ background:var(--hot); color:#fff; font-size:11px; padding:1px 7px; border-radius:10px; font-family:var(--font-mono); }

.main-col{ flex:1; overflow-y:auto; padding:20px 24px 80px; }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }
.panel-heading{ font-family:var(--font-display); font-size:24px; margin:0 0 4px; }
.panel-subtext{ color:var(--text-faint); font-size:13px; margin-bottom:16px; }

.detail-panel{
  width:320px; background:var(--surface); border-left:1px solid var(--border);
  padding:18px; overflow-y:auto; flex-shrink:0;
}
.detail-empty{ color:var(--text-faint); font-size:13px; margin-top:40px; text-align:center; }

/* ============ FEED ============ */
.feed-toolbar{ display:flex; gap:10px; margin-bottom:16px; }
.live-strip{
  display:flex; gap:12px; align-items:stretch; margin-bottom:16px; padding:10px 12px;
  background:linear-gradient(135deg, rgba(255,75,43,0.08), rgba(0,194,209,0.04));
  border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-card);
  backdrop-filter: blur(6px);
}
.live-strip-label{
  min-width:82px; display:flex; align-items:center; color:var(--gold); text-transform:uppercase;
  font-family:var(--font-display); font-size:12px; letter-spacing:0.8px;
}
.live-strip-body{ display:flex; flex-wrap:wrap; gap:8px; flex:1; }
.live-chip{
  display:flex; align-items:center; gap:8px; min-height:34px; padding:7px 10px;
  background:rgba(7,9,12,0.55); border:1px solid var(--border); border-left:4px solid var(--gold);
  border-radius:999px; font-size:12px; box-shadow:0 8px 18px rgba(0,0,0,0.18);
}
.live-chip-kind{
  font-family:var(--font-mono); font-size:10px; letter-spacing:0.7px; text-transform:uppercase;
  color:var(--text-faint); white-space:nowrap;
}
.live-chip-text{ color:var(--text); }
.live-chip-time{ color:var(--text-faint); font-family:var(--font-mono); font-size:10px; white-space:nowrap; }
.live-good{ border-left-color:var(--good); }
.live-bad{ border-left-color:var(--danger); }
.live-perma{ border-left-color:var(--perma); }
.live-warn{ border-left-color:var(--gold); }
.live-neutral{ border-left-color:var(--text-faint); }
#feed-search, #users-search{
  flex:1; background:var(--surface2); border:1px solid var(--border); color:var(--text);
  padding:10px 14px; border-radius:8px; font-size:14px;
}
#feed-sort{ background:var(--surface2); border:1px solid var(--border); color:var(--text); padding:10px 14px; border-radius:8px; }
.feed-list{ display:flex; flex-direction:column; gap:10px; max-width:760px; }

.post-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:14px 16px; box-shadow:var(--shadow-card); transition:border-color .15s;
}
.post-card:hover{ border-color:#3a4049; }
.post-card.tone-good{ border-color:rgba(59,214,113,0.22); }
.post-card.tone-bad{ border-color:rgba(228,55,75,0.22); }
.post-meta{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-faint); margin-bottom:8px; flex-wrap:wrap; }
.post-author{ color:var(--text-dim); font-weight:700; cursor:pointer; }
.post-author:hover{ color:var(--gold); text-decoration:underline; }
.flair{ background:var(--surface3); color:var(--text-dim); padding:1px 8px; border-radius:6px; font-size:11px; }
.flair.flair-good{ color:var(--good); }
.flair.flair-bad{ color:var(--danger); }
.post-title{ font-size:16px; font-weight:700; margin:0 0 6px; cursor:pointer; }
.post-title:hover{ color:var(--gold); }
.post-body{ font-size:14px; color:var(--text-dim); line-height:1.5; margin-bottom:10px; white-space:pre-wrap; }
.post-actions{ display:flex; align-items:center; gap:14px; }
.vote-group{ display:flex; align-items:center; gap:6px; background:var(--surface2); border-radius:20px; padding:4px 10px; }
.vote-btn{ background:none; border:none; color:var(--text-faint); font-size:16px; padding:2px 4px; }
.vote-btn:hover{ color:var(--text); }
.vote-btn.up.active{ color:var(--up); }
.vote-btn.down.active{ color:var(--down); }
.vote-score{ font-family:var(--font-mono); font-size:13px; min-width:24px; text-align:center; }
.action-link{ background:none; border:none; color:var(--text-faint); font-size:13px; font-weight:600; padding:6px 8px; border-radius:6px; }
.action-link:hover{ background:var(--surface2); color:var(--text); }
.action-link.report-link:hover{ color:var(--gold); }
.action-link.ban-link:hover{ color:var(--danger); }
.pill-timestamp{ margin-left:auto; }

/* avatar */
.avatar{
  border-radius:50%;
  flex-shrink:0;
  display:inline-block;
  overflow:hidden;
  position:relative;
  background:#0f1116;
  border:1px solid rgba(255,255,255,0.07);
  box-shadow:0 0 0 1px rgba(0,0,0,0.3), 0 8px 18px rgba(0,0,0,0.35);
}
.avatar img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.01);
}
.avatar::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,0.08), transparent 40%);
  pointer-events:none;
}

/* ============ MOD QUEUE ============ */
.queue-list{ display:flex; flex-direction:column; gap:10px; max-width:760px; }
.queue-card{
  background:var(--surface); border:1px solid var(--hot-dim); border-left:4px solid var(--hot);
  border-radius:var(--radius); padding:12px 16px; display:flex; flex-direction:column; gap:6px;
  box-shadow:var(--shadow-card);
}
.queue-card:hover{ border-color:#6a3b2f; transform:translateY(-1px); }
.queue-preview{
  font-size:12px; color:var(--text-faint); background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.05); border-radius:8px; padding:8px 10px;
}
.queue-top{ display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--text-faint); }
.queue-reporter{ color:var(--good); font-weight:700; }
.queue-target{ color:var(--danger); font-weight:700; cursor:pointer; }
.queue-reason{ font-size:14px; color:var(--text); }
.queue-evidence{ font-size:13px; color:var(--text-dim); background:var(--surface2); padding:8px 10px; border-radius:8px; font-style:italic; }
.queue-actions{ display:flex; gap:8px; margin-top:4px; }
.queue-actions .btn-secondary{ background:var(--surface2); color:var(--text); border:1px solid var(--border); }

/* ============ USERS LIST ============ */
.users-list{ display:flex; flex-direction:column; gap:8px; max-width:760px; margin-top:14px; }
.user-row{ display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:10px 14px; cursor:pointer; }
.user-row:hover{ border-color:#3a4049; }
.user-row-info{ flex:1; }
.user-row-name{ font-weight:700; font-size:14px; }
.user-row-sub{ font-size:12px; color:var(--text-faint); }
.strike-dots{ display:flex; gap:3px; }
.strike-dot{ width:8px; height:8px; border-radius:50%; background:var(--surface3); }
.strike-dot.filled{ background:var(--danger); }
.status-tag{ font-size:11px; padding:2px 8px; border-radius:6px; font-weight:700; }
.status-active{ background:rgba(59,214,113,0.15); color:var(--good); }
.status-banned{ background:rgba(228,55,75,0.15); color:var(--danger); }
.status-perma{ background:rgba(155,77,255,0.15); color:var(--perma); }

/* ============ BANNED HISTORY ============ */
.banned-list{ display:flex; flex-direction:column; gap:10px; max-width:760px; margin-top:14px; }
.banned-card{ background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:12px 16px; }
.evasion-chain{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px; font-family:var(--font-mono); font-size:12px; }
.evasion-chain span.arrow{ color:var(--text-faint); }
.evasion-chain span.name-old{ color:var(--text-faint); text-decoration:line-through; }
.evasion-chain span.name-new{ color:var(--gold); }

/* ============ PROFILE DETAIL ============ */
.profile-block{ text-align:center; }
.profile-avatar-wrap{ display:flex; justify-content:center; margin-bottom:10px; }
.profile-name{ font-weight:800; font-size:16px; }
.profile-tag{ color:var(--text-faint); font-size:12px; margin-bottom:10px; }
.profile-stats{ display:flex; justify-content:space-around; margin:14px 0; }
.profile-stat{ text-align:center; }
.profile-stat b{ display:block; font-size:16px; }
.profile-stat span{ font-size:11px; color:var(--text-faint); }
.profile-actions{ display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.profile-bio{ font-size:13px; color:var(--text-dim); background:var(--surface2); padding:10px; border-radius:8px; margin-top:10px; line-height:1.5; }
.profile-note{ font-size:11px; color:var(--text-faint); margin-top:8px; }

/* ============ MODALS ============ */
.modal{ display:none; position:fixed; inset:0; background:rgba(3,4,5,0.75); backdrop-filter:blur(3px); z-index:100; align-items:center; justify-content:center; }
.modal.open{ display:flex; }
.modal-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); position:relative; box-shadow:0 20px 60px rgba(0,0,0,0.5); }
.modal-post-card{ width:min(680px,92vw); max-height:82vh; overflow-y:auto; padding:24px; }
.modal-report-card{
  width:min(1120px,94vw); height:min(88vh,920px); overflow:hidden; padding:20px;
  display:flex; flex-direction:column;
  background:linear-gradient(180deg, rgba(18,21,26,0.98), rgba(12,14,17,0.99));
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 32px 80px rgba(0,0,0,0.7);
}
.modal-close{ position:absolute; top:14px; right:14px; background:var(--surface2); border:none; color:var(--text-dim); width:28px; height:28px; border-radius:50%; font-size:14px; }
.modal-close:hover{ background:var(--surface3); color:var(--text); }
.modal-confirm-card{ width:min(420px,90vw); padding:26px; }
.modal-confirm-card h3{ margin-top:0; }
.modal-confirm-card p{ color:var(--text-dim); font-size:14px; line-height:1.5; }
.confirm-row{ display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }

.section-label{
  color:var(--gold); text-transform:uppercase; letter-spacing:0.8px; font-size:11px;
  font-family:var(--font-display); margin-bottom:10px;
}

/* report modal */
.report-shell{ display:flex; flex-direction:column; gap:16px; flex:1; min-height:0; }
.report-header{
  display:flex; justify-content:space-between; gap:18px; align-items:flex-start;
  padding:4px 2px 12px; border-bottom:1px solid var(--border);
}
.report-header-copy{ min-width:0; }
.report-kicker{
  font-family:var(--font-mono); text-transform:uppercase; letter-spacing:1px;
  color:var(--gold); font-size:11px; margin-bottom:4px;
}
.report-header-copy h3{
  margin:0 0 6px; font-family:var(--font-display); font-size:28px; letter-spacing:-1px;
}
.report-subtitle{ color:var(--text-dim); font-size:13px; line-height:1.5; max-width:680px; }
.report-avatars{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:flex-end; }
.report-person{
  display:flex; flex-direction:column; align-items:center; gap:6px; min-width:120px;
}
.report-person-label{
  font-family:var(--font-mono); font-size:10px; letter-spacing:0.8px; text-transform:uppercase;
  color:var(--text-faint);
}
.report-person-name{ font-size:12px; font-weight:700; color:var(--text); text-align:center; }
.report-person-arrow{ color:var(--gold); font-size:22px; font-weight:900; margin-top:20px; }
.report-avatar-fallback{
  width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(255,75,43,0.7), rgba(255,176,32,0.5));
  color:#fff; font-family:var(--font-mono); font-size:13px; font-weight:800; letter-spacing:1px;
  border:1px solid rgba(255,255,255,0.1); box-shadow:0 10px 24px rgba(0,0,0,0.35);
}
.report-meta-row{ display:flex; flex-wrap:wrap; gap:8px; }
.report-meta-chip{
  display:inline-flex; align-items:center; background:var(--surface2); border:1px solid var(--border);
  border-radius:999px; padding:6px 10px; font-size:11px; font-family:var(--font-mono); color:var(--text-dim);
}
.report-meta-source{ color:var(--gold); }
.report-grid{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:16px; min-height:0; flex:1;
}
.report-chat-panel,.report-detail-panel{
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px;
  box-shadow:var(--shadow-card); min-height:0; display:flex; flex-direction:column;
}
.report-chat-panel{ overflow:hidden; }
.report-chat-messages{
  flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding-right:4px;
}
.report-chat-messages .chat-bubble{ max-width:88%; }
.report-chat-messages .chat-bubble.system{ max-width:none; }
.report-chat-input-row{ display:flex; gap:8px; margin-top:12px; }
.report-chat-input-row input{
  flex:1; background:var(--surface2); border:1px solid var(--border); color:var(--text);
  border-radius:20px; padding:10px 16px;
}
.report-detail-body{ display:flex; flex-direction:column; gap:10px; flex:1; overflow-y:auto; padding-right:4px; }
.report-detail-card{
  background:rgba(7,9,12,0.45); border:1px solid rgba(255,255,255,0.05); border-radius:12px;
  padding:12px;
}
.report-detail-label{
  font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.8px;
  color:var(--text-faint); font-size:10px; margin-bottom:6px;
}
.report-detail-value{ color:var(--text); font-size:13px; line-height:1.5; white-space:pre-wrap; }
.report-context-card{
  background:linear-gradient(135deg, rgba(255,176,32,0.08), rgba(228,55,75,0.06));
  border-color:rgba(255,176,32,0.16);
}
.report-context-title{ font-weight:800; font-size:15px; margin-bottom:6px; }
.report-context-body{ color:var(--text-dim); font-size:13px; line-height:1.6; white-space:pre-wrap; }
.report-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }

/* post modal contents */
.mp-title{ font-size:20px; font-weight:800; margin:10px 0 6px; }
.mp-body{ color:var(--text-dim); font-size:14px; line-height:1.6; white-space:pre-wrap; margin-bottom:14px; }
.comment-thread{ display:flex; flex-direction:column; gap:10px; margin-top:16px; border-top:1px solid var(--border); padding-top:14px; }
.comment-row{ display:flex; gap:10px; }
.comment-body-col{ flex:1; background:var(--surface2); border-radius:10px; padding:8px 12px; }
.comment-body-col.tone-good{ border-left:3px solid rgba(59,214,113,0.25); }
.comment-body-col.tone-bad{ border-left:3px solid rgba(228,55,75,0.28); }
.comment-meta{ display:flex; gap:8px; align-items:center; font-size:12px; margin-bottom:3px; flex-wrap:wrap; }
.comment-author{ font-weight:700; cursor:pointer; color:var(--text-dim); }
.comment-author:hover{ color:var(--gold); }
.comment-text{ font-size:13.5px; color:var(--text); line-height:1.5; }
.comment-actions{ display:flex; gap:10px; margin-top:4px; }
.comment-time{ margin-left:auto; font-family:var(--font-mono); font-size:10px; color:var(--text-faint); white-space:nowrap; }
.comment-reply{ font-family:var(--font-mono); font-size:10px; color:var(--gold); white-space:nowrap; }
.reply-composer{ margin-top:16px; display:flex; gap:8px; }
.reply-composer input{ flex:1; background:var(--surface2); border:1px solid var(--border); color:var(--text); border-radius:8px; padding:10px 12px; }

/* ============ CHAT MODAL ============ */
.modal-chat-card{ width:min(520px,92vw); height:min(640px,86vh); display:flex; flex-direction:column; padding:0; }
.chat-header{ display:flex; align-items:center; gap:10px; padding:16px; border-bottom:1px solid var(--border); }
.chat-header-text{ flex:1; }
.chat-username{ font-weight:800; font-size:15px; }
.chat-userstatus{ font-size:11px; color:var(--text-faint); }
.chat-header-actions{ display:flex; gap:6px; }
.chat-messages{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; }
.chat-bubble{ max-width:78%; padding:9px 13px; border-radius:14px; font-size:13.5px; line-height:1.45; }
.chat-bubble.them{ background:var(--surface2); align-self:flex-start; border-bottom-left-radius:4px; }
.chat-bubble.me{ background:linear-gradient(135deg, var(--hot), #c73a1f); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.chat-bubble.system{ align-self:center; background:transparent; color:var(--text-faint); font-size:11.5px; font-style:italic; }
.chat-input-row{ display:flex; gap:8px; padding:14px; border-top:1px solid var(--border); }
.chat-input-row input{ flex:1; background:var(--surface2); border:1px solid var(--border); color:var(--text); border-radius:20px; padding:10px 16px; }

/* ============ TOASTS ============ */
#toast-container{ position:fixed; bottom:20px; right:20px; display:flex; flex-direction:column; gap:8px; z-index:200; }
.toast{
  background:var(--surface3); border:1px solid var(--border); border-left:4px solid var(--hot);
  padding:12px 16px; border-radius:8px; font-size:13px; max-width:320px; box-shadow:0 8px 24px rgba(0,0,0,0.4);
  animation:toast-in .2s ease;
}
.toast.good{ border-left-color:var(--good); }
.toast.perma{ border-left-color:var(--perma); }
@keyframes toast-in{ from{ opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }

/* ============ EXIT ============ */
.exit-final{ display:none; position:fixed; inset:0; background:#000; z-index:999; align-items:center; justify-content:center; }
.exit-final.open{ display:flex; }
.exit-final-text{ text-align:center; color:#666; }
.exit-final-mark{ font-family:var(--font-mono); font-weight:900; font-size:40px; color:#333; margin-bottom:14px; }
.exit-final-small{ font-size:12px; color:#444; }

@media (max-width: 900px){
  .sidenav{ width:60px; }
  .nav-item span, .nav-item{ font-size:0; padding:11px; }
  .nav-item .badge{ font-size:11px; }
  .detail-panel{ display:none; }
  .topbar-stats{ display:none; }
  .modal-report-card{ width:96vw; height:92vh; padding:16px; }
  .report-header{ flex-direction:column; }
  .report-avatars{ width:100%; justify-content:flex-start; }
  .report-grid{ grid-template-columns:1fr; }
  .report-person-arrow{ transform:rotate(90deg); margin:0; }
  .report-chat-messages .chat-bubble{ max-width:100%; }
  .queue-actions{ flex-wrap:wrap; }
}