/* ======================= THEME TOKENS ======================= */
/* System default: light tokens; auto-switch to dark via media query.
   Explicit themes override with [data-theme="..."] below. */

:root{
  /* Light (Slate Light) — default for 'system' on light OS */
  --bg:#f7f9fc; --card:#ffffff; --text:#0b1220; --muted:#51667d;
  --accent:#2563eb; --accent-2:#0ea5e9; --danger:#b91c1c; --border:#dbe4f2;
  --shadow:0 6px 18px rgba(0,0,0,.08);

  /* Derived surfaces (used across ALL themes) */
  --surface-1: color-mix(in oklab, var(--card) 94%, var(--bg) 6%);
  --surface-2: color-mix(in oklab, var(--card) 90%, var(--bg) 10%);
  --field:     color-mix(in oklab, var(--card) 92%, var(--bg) 8%);
}

/* System dark auto-override */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0f14; --card:#111823; --muted:#9bb0c2; --text:#e6eef6;
    --accent:#70b7ff; --accent-2:#39d98a; --danger:#ff6b6b; --border:#203245;
    --shadow:0 6px 18px rgba(0,0,0,.25);

    --surface-1: color-mix(in oklab, var(--card) 94%, var(--bg) 6%);
    --surface-2: color-mix(in oklab, var(--card) 90%, var(--bg) 10%);
    --field:     color-mix(in oklab, var(--card) 92%, var(--bg) 8%);
  }
}

/* Midnight */
html[data-theme="midnight"]{
  --bg:#0b0f14; --card:#111823; --muted:#9bb0c2; --text:#e6eef6;
  --accent:#70b7ff; --accent-2:#39d98a; --danger:#ff6b6b; --border:#203245;
  --shadow:0 6px 18px rgba(0,0,0,.25);

  --surface-1: color-mix(in oklab, var(--card) 94%, var(--bg) 6%);
  --surface-2: color-mix(in oklab, var(--card) 90%, var(--bg) 10%);
  --field:     color-mix(in oklab, var(--card) 92%, var(--bg) 8%);
}

/* Nord */
html[data-theme="nord"]{
  --bg:#2e3440; --card:#232936; --text:#eceff4; --muted:#c0cad8;
  --accent:#88c0d0; --accent-2:#a3be8c; --danger:#bf616a; --border:#3b4252;
  --shadow:0 6px 18px rgba(0,0,0,.25);

  --surface-1: color-mix(in oklab, var(--card) 94%, var(--bg) 6%);
  --surface-2: color-mix(in oklab, var(--card) 90%, var(--bg) 10%);
  --field:     color-mix(in oklab, var(--card) 92%, var(--bg) 8%);
}

/* Emerald */
html[data-theme="emerald"]{
  --bg:#0b1210; --card:#0f1916; --text:#e8fff6; --muted:#93b1a7;
  --accent:#34d399; --accent-2:#10b981; --danger:#ff6b6b; --border:#1a2a25;
  --shadow:0 6px 18px rgba(0,0,0,.25);

  --surface-1: color-mix(in oklab, var(--card) 94%, var(--bg) 6%);
  --surface-2: color-mix(in oklab, var(--card) 90%, var(--bg) 10%);
  --field:     color-mix(in oklab, var(--card) 92%, var(--bg) 8%);
}

/* Rose */
html[data-theme="rose"]{
  --bg:#120d14; --card:#1a121b; --text:#ffeef7; --muted:#c9b5bf;
  --accent:#ff7aa2; --accent-2:#f28fb3; --danger:#ff6b6b; --border:#2a1b25;
  --shadow:0 6px 18px rgba(0,0,0,.25);

  --surface-1: color-mix(in oklab, var(--card) 94%, var(--bg) 6%);
  --surface-2: color-mix(in oklab, var(--card) 90%, var(--bg) 10%);
  --field:     color-mix(in oklab, var(--card) 92%, var(--bg) 8%);
}

/* Slate Light */
html[data-theme="slate-light"]{
  --bg:#f7f9fc; --card:#ffffff; --text:#0b1220; --muted:#51667d;
  --accent:#2563eb; --accent-2:#0ea5e9; --danger:#b91c1c; --border:#dbe4f2;
  --shadow:0 6px 18px rgba(0,0,0,.08);

  --surface-1: color-mix(in oklab, var(--card) 94%, var(--bg) 6%);
  --surface-2: color-mix(in oklab, var(--card) 90%, var(--bg) 10%);
  --field:     color-mix(in oklab, var(--card) 92%, var(--bg) 8%);
}

/* Dracula */
html[data-theme="dracula"]{
  --bg:#1e1f29; --card:#282a36; --text:#f8f8f2; --muted:#c3c7d1;
  --accent:#8be9fd; --accent-2:#50fa7b; --danger:#ff5555; --border:#3a3d4d;
  --shadow:0 6px 18px rgba(0,0,0,.25);

  --surface-1: color-mix(in oklab, var(--card) 94%, var(--bg) 6%);
  --surface-2: color-mix(in oklab, var(--card) 90%, var(--bg) 10%);
  --field:     color-mix(in oklab, var(--card) 92%, var(--bg) 8%);
}

/* Gruvbox Dark */
html[data-theme="gruvbox-dark"]{
  --bg:#1d2021; --card:#282828; --text:#ebdbb2; --muted:#bdae93;
  --accent:#83a598; --accent-2:#b8bb26; --danger:#fb4934; --border:#3c3836;
  --shadow:0 6px 18px rgba(0,0,0,.25);

  --surface-1: color-mix(in oklab, var(--card) 94%, var(--bg) 6%);
  --surface-2: color-mix(in oklab, var(--card) 90%, var(--bg) 10%);
  --field:     color-mix(in oklab, var(--card) 92%, var(--bg) 8%);
}

/* Solarized Dark */
html[data-theme="solarized-dark"]{
  --bg:#002b36; --card:#073642; --text:#eee8d5; --muted:#93a1a1;
  --accent:#268bd2; --accent-2:#2aa198; --danger:#dc322f; --border:#0a3942;
  --shadow:0 6px 18px rgba(0,0,0,.25);

  --surface-1: color-mix(in oklab, var(--card) 94%, var(--bg) 6%);
  --surface-2: color-mix(in oklab, var(--card) 90%, var(--bg) 10%);
  --field:     color-mix(in oklab, var(--card) 92%, var(--bg) 8%);
}

/* Solarized Light */
html[data-theme="solarized-light"]{
  --bg:#fdf6e3; --card:#fffdf5; --text:#073642; --muted:#657b83;
  --accent:#268bd2; --accent-2:#2aa198; --danger:#dc322f; --border:#e6dfc8;
  --shadow:0 6px 18px rgba(0,0,0,.08);

  --surface-1: color-mix(in oklab, var(--card) 94%, var(--bg) 6%);
  --surface-2: color-mix(in oklab, var(--card) 90%, var(--bg) 10%);
  --field:     color-mix(in oklab, var(--card) 92%, var(--bg) 8%);
}

/* Catppuccin Mocha */
html[data-theme="catppuccin-mocha"]{
  --bg:#1e1e2e; --card:#181825; --text:#cdd6f4; --muted:#a6adc8;
  --accent:#89b4fa; --accent-2:#94e2d5; --danger:#f38ba8; --border:#313244;
  --shadow:0 6px 18px rgba(0,0,0,.25);

  --surface-1: color-mix(in oklab, var(--card) 94%, var(--bg) 6%);
  --surface-2: color-mix(in oklab, var(--card) 90%, var(--bg) 10%);
  --field:     color-mix(in oklab, var(--card) 92%, var(--bg) 8%);
}

/* Catppuccin Latte */
html[data-theme="catppuccin-latte"]{
  --bg:#eff1f5; --card:#ffffff; --text:#4c4f69; --muted:#6c6f85;
  --accent:#1e66f5; --accent-2:#179299; --danger:#d20f39; --border:#ccd0da;
  --shadow:0 6px 18px rgba(0,0,0,.08);

  --surface-1: color-mix(in oklab, var(--card) 94%, var(--bg) 6%);
  --surface-2: color-mix(in oklab, var(--card) 90%, var(--bg) 10%);
  --field:     color-mix(in oklab, var(--card) 92%, var(--bg) 8%);
}

/* Monokai */
html[data-theme="monokai"]{
  --bg:#272822; --card:#2e2f27; --text:#f8f8f2; --muted:#a6a69a;
  --accent:#66d9ef; --accent-2:#a6e22e; --danger:#f92672; --border:#3a3b33;
  --shadow:0 6px 18px rgba(0,0,0,.25);

  --surface-1: color-mix(in oklab, var(--card) 94%, var(--bg) 6%);
  --surface-2: color-mix(in oklab, var(--card) 90%, var(--bg) 10%);
  --field:     color-mix(in oklab, var(--card) 92%, var(--bg) 8%);
}

/* Ayu Mirage */
html[data-theme="ayu-mirage"]{
  --bg:#1f2430; --card:#1a1f2b; --text:#cbced0; --muted:#9aa5b1;
  --accent:#5ccfe6; --accent-2:#ffd173; --danger:#ef6b73; --border:#2b3240;
  --shadow:0 6px 18px rgba(0,0,0,.25);

  --surface-1: color-mix(in oklab, var(--card) 94%, var(--bg) 6%);
  --surface-2: color-mix(in oklab, var(--card) 90%, var(--bg) 10%);
  --field:     color-mix(in oklab, var(--card) 92%, var(--bg) 8%);
}

/* ======================= BASE + LAYOUT ======================= */
*{ box-sizing:border-box }
html,body{ margin:0; height:100%; background:var(--bg); color:var(--text);
  font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,sans-serif; }

/* anti-overflow (not for buttons) */
h1,h2,h3,h4,h5,h6,p,li,blockquote,
.title,.body,.composer-context,.composer-context *,.parent-excerpt,
.thread-titlebar,.thread-actions,.item,.item *,.thread-tree .post,.thread-tree .post *,
input[type=text],input[type=search],textarea { overflow-wrap:anywhere; word-break:break-word; hyphens:auto; max-width:100%; }

.topbar{ display:flex; justify-content:space-between; align-items:center; padding:12px 16px;
  border-bottom:1px solid var(--border); background:color-mix(in oklab, var(--bg) 96%, #000 4%); position:sticky; top:0; z-index:100; }
.topbar .brand{ display:flex; align-items:center; gap:8px; color:var(--accent-2); }
.topbar h1{ margin:0; font-size:18px; letter-spacing:.5px; }

/* Theme select */
.theme-sel{ display:inline-flex; align-items:center; gap:6px; margin-right:10px; }
.theme-sel select{ background:var(--card); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:6px 8px; }

.container{ max-width:1100px; margin:24px auto; padding:0 16px; display:grid; gap:16px; grid-template-columns:1fr; grid-auto-rows:min-content; }
@media (min-width:980px){
  .container{ grid-template-columns:360px 1fr; align-items:start; }
  .threads,.new-thread{ position:sticky; top:76px; z-index:1; }
  .new-thread { grid-column: 1; }
  .threads    { grid-column: 2; }
  #threadView { grid-column: 2; }
}
.thread-view{ position:relative; z-index:2; }

.card{ background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px; box-shadow:var(--shadow); }
.card-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
h2{ margin:0; font-size:16px; }
label{ display:block; margin:8px 0; }

/* Inputs / textareas — now theme-aware */
input[type=text],input[type=search],textarea{
  width:100%; background:var(--field); color:var(--text); border:1px solid var(--border);
  border-radius:10px; padding:10px; outline:none;
}
input:focus,textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in oklab, var(--accent) 20%, transparent); }

/* Buttons never wrap */
button{ background:var(--accent); color:#001524; border:0; border-radius:10px; padding:8px 12px; cursor:pointer; }
button, .link, .collapse-btn, .icon-btn { white-space:nowrap; overflow-wrap:normal; word-break:normal; }
button[disabled]{ opacity:.45; cursor:not-allowed; }
.link{ background:transparent; color:var(--accent); border:1px solid var(--border); }
.link.danger{ color:var(--danger); border-color:color-mix(in oklab, var(--danger) 35%, #000); }
.hidden{ display:none!important; }

.list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.item{ padding:10px; background:var(--surface-1); border:1px solid var(--border); border-radius:10px; }
.item .meta{ color:var(--muted); font-size:12px; }
.item .title{ font-weight:600; color:var(--accent-2); text-decoration:none; display:inline-block; }

.mt{ margin-top:12px; }
.footer{ text-align:center; padding:24px; color:var(--muted); }
.muted{ color:var(--muted); }
nav button{ margin-left:8px; }
.pager{ display:flex; justify-content:center; align-items:center; gap:12px; margin-top:12px; }
.row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.row.end{ justify-content:flex-end; }
.stack{ display:grid; gap:10px; }
.stack-sm{ display:grid; gap:6px; }

/* Thread header */
.thread-view-header{ display:grid; gap:8px; margin-bottom:8px; }
.thread-titlebar{ display:flex; gap:12px; align-items:center; justify-content:space-between; min-width:0; }
.thread-actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.thread-actions .link{ padding:6px 10px; border-radius:8px; }

/* Badges/Toast */
.badge{ display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:999px; background:color-mix(in oklab, var(--accent) 18%, transparent); color:var(--accent); }
.toast{ position:fixed; left:50%; transform:translateX(-50%); bottom:18px; background:var(--card); border:1px solid var(--border); color:var(--text); padding:10px 14px; border-radius:10px; box-shadow:var(--shadow); max-width:80vw; cursor:pointer; z-index:200; }
.toast.hidden{ display:none!important; }
button:focus-visible,.link:focus-visible,input:focus-visible,textarea:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* Filters */
.filters{ display:grid; grid-template-columns:1fr auto; gap:10px; margin-bottom:8px; }
.chk{ display:inline-flex; align-items:center; gap:8px; user-select:none; }
.chk input{ inline-size:16px; block-size:16px; }

/* Hide legacy inline composer (we use modal) */
#postForm{ display:none !important; }

/* ==================== MODAL (composer + auth) ==================== */
.modal.hidden{ display:none!important; }
.modal{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; }
.modal-backdrop{ position:absolute; inset:0; background: var(--modal-backdrop); backdrop-filter: blur(2px); }
.modal-dialog{
  position:relative; z-index:1001; width:min(900px, 92vw); max-width:92vw; max-height:85vh; overflow:auto;
  background:var(--card); border:1px solid var(--border); border-radius:14px; box-shadow:0 12px 48px rgba(0,0,0,.5); padding:16px;
  contain: layout paint;
}
.modal-header{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; min-width:0; }
.icon-btn{ background:var(--surface-2); border:1px solid var(--border); color:var(--muted); border-radius:10px; padding:6px 10px; line-height:1; }
.icon-btn:hover{ color:var(--text); }
.composer-context{ background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:10px; color:var(--muted); }
.composer-context .ctx-title{ color:var(--text); font-weight:600; display:block; }
.composer-context .ctx-meta{ font-size:12px; }
.composer-context blockquote{ margin:8px 0 0 0; padding:8px 10px; border-left:3px solid var(--accent); background:var(--surface-1); color:var(--text); white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere; }
body.modal-open{ overflow:hidden; }

/* ==================== THREAD TREE ==================== */
.thread-tree{ gap:8px; }
.thread-tree .post{ position:relative; scroll-margin-top: 90px; }
.thread-tree .post .post-head{ display:grid; grid-template-columns: 1fr auto; align-items:center; gap:8px; }
.thread-tree .post .post-head .post-actions{ display:inline-flex; gap:8px; }
.thread-tree .post .body{ white-space:pre-wrap; }
.thread-tree .children{ margin-top:8px; margin-left:22px; padding-left:14px; border-left:1px dashed var(--border); display:grid; gap:8px; }

/* Parent chip */
.parent-chip{ font-size:12px; color:var(--muted); }
.parent-chip a{ color:var(--accent); text-decoration:none; }
.parent-chip a:hover{ text-decoration:underline; }

/* Parent excerpt */
.parent-excerpt{ margin-top:6px; color:var(--muted); background:var(--surface-1); border:1px solid var(--border); border-radius:8px; padding:6px 8px; white-space:pre-wrap; }

/* Collapse button */
.collapse-btn{ background:var(--surface-2); border:1px solid var(--border); color:var(--muted); border-radius:8px; padding:2px 6px; font-size:12px; line-height:1.2; }
.collapse-btn:hover{ color:var(--text); }

/* Flash highlight when jumping to parent */
@keyframes flash { 0%{ background:color-mix(in oklab, var(--accent) 12%, transparent); } 50%{ background:transparent; } 100%{ background:color-mix(in oklab, var(--accent) 12%, transparent); } }
.flash-highlight{ animation: flash 1.8s ease-in-out 1; }

mark.mention{
  background: color-mix(in oklab, var(--accent) 30%, transparent);
  color: var(--text);
  padding: 0 2px;
  border-radius: 4px;
}

/* ==================== AUTH MODAL (card) ==================== */
.auth-card {
  width: min(92vw, 420px);
  max-height: 90vh;
  overflow: auto;
  background: var(--modal-surface);
  color: var(--modal-text);
  border: 1px solid var(--modal-border);
  border-radius: 16px;
  box-shadow: 0 20px 60px color-mix(in oklab, black 20%, transparent);
  padding: 1.25rem 1.25rem 1rem;
  position: relative;
  transform: translateY(-6px);
  animation: auth-pop 160ms ease-out;
}
@keyframes auth-pop {
  from { opacity: 0; transform: translateY(6px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.close-btn {
  position: absolute;
  top: .5rem;
  right: .5rem;
  font-size: 1.25rem;
  line-height: 1;
  padding: .25rem .5rem;
  opacity: .8;
}
.close-btn:hover { opacity: 1; }

.auth-header { text-align: center; margin: .25rem 0 1rem 0; }
.auth-logo { font-size: 2rem; margin-bottom: .25rem; }
.auth-title { margin: 0; font-size: 1.35rem; }
.auth-subtitle { margin: .25rem 0 0; font-size: .95rem; color: color-mix(in oklab, var(--modal-text) 70%, transparent); }

.auth-body { display: grid; gap: 1rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font: inherit;
  padding: .65rem .9rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text);
  cursor: pointer;
  user-select: none;
  transition: transform .06s ease, background .1s ease, border-color .1s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-google {
  border-color: color-mix(in oklab, var(--accent) 35%, var(--border));
  background: linear-gradient(0deg, color-mix(in oklab, var(--accent) 10%, transparent), transparent);
}
.btn-google .btn-icn { display: inline-flex; }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent, #fff);
}
.btn-primary:hover { filter: brightness(1.05); }
.btn-ghost { background: transparent; }

.divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .75rem;
  color: color-mix(in oklab, var(--modal-text) 60%, transparent);
  font-size: .9rem;
}
.divider::before,
.divider::after { content: ""; height: 1px; background: var(--modal-border); display: block; }

.auth-form { display: grid; gap: .6rem; }

.field {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  align-items: center;
  border: 1px solid var(--modal-border);
  border-radius: 10px;
  background: var(--modal-surface);
}
.field.with-icn .field-icn { text-align: center; opacity: .8; }
.field input[type="email"] {
  background: transparent; border: 0; padding: .6rem .75rem .6rem .25rem; color: var(--modal-text); width: 100%;
}
.field input[type="email"]::placeholder { color: color-mix(in oklab, var(--modal-text) 65%, transparent); }

.helper { margin: 0; font-size: .9rem; color: color-mix(in oklab, var(--modal-text) 65%, transparent); }

.actions { display: flex; justify-content: end; gap: .5rem; margin-top: .25rem; }

.form-error { min-height: 1.1rem; color: var(--danger, #e11d48); font-size: .9rem; }

.spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid color-mix(in oklab, var(--on-accent, #fff) 30%, transparent);
  border-top-color: var(--on-accent, #fff);
  animation: spin .8s linear infinite;
  margin-left: .35rem;
}
.spinner.hidden { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ==================== THEME-AWARE MODAL TOKENS ==================== */
/* Single source of truth for popup contrast; applies to ANY modal using .modal/.auth-card */

:root{
  --modal-surface: var(--card);
  --modal-text:    var(--text);
  --modal-border:  var(--border);
  --modal-backdrop: rgba(0,0,0,.60);  /* base */
}

/* Light themes → softer backdrop for readability */
html[data-theme="slate-light"],
html[data-theme="solarized-light"],
html[data-theme="catppuccin-latte"]{
  --modal-backdrop: rgba(0,0,0,.45);
}

/* Dark themes → stronger backdrop for contrast */
html[data-theme="midnight"],
html[data-theme="nord"],
html[data-theme="emerald"],
html[data-theme="rose"],
html[data-theme="dracula"],
html[data-theme="gruvbox-dark"],
html[data-theme="solarized-dark"],
html[data-theme="catppuccin-mocha"],
html[data-theme="monokai"],
html[data-theme="ayu-mirage"]{
  --modal-backdrop: rgba(0,0,0,.82);
}

/* If user prefers dark and no explicit theme is set, bias backdrop darker */
@media (prefers-color-scheme: dark){
  :root{ --modal-backdrop: rgba(0,0,0,.78); }
}