/* =========================================================
   Voice Critic – base tokens + themes + clean layout
   ========================================================= */

/* ---- Tokens (overridden by themes) ---- */
:root{
  --bg:#0f1116;
  --card:#141824;
  --ink:#e6e9ef;
  --muted:#a7b0be;
  --line:#222838;
  --accent:#7aa2ff;
  --radius:14px;
  --gap:16px;
  --shadow: 0 10px 32px rgba(0,0,0,.28);
  --font: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* ---- Themes ---- */
body.theme-modern-dark{
  --bg:#0f1116; --card:#141824; --ink:#e6e9ef; --muted:#a7b0be; --line:#222838; --accent:#7aa2ff;
  --shadow: 0 12px 40px rgba(0,0,0,.35);
}
body.theme-modern-light{
  --bg:#f6f7fb; --card:#ffffff; --ink:#0e1220; --muted:#5e6a7e; --line:#e8ecf5; --accent:#3b6cff;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
}
body.theme-retro-2000s{
  --bg:#cfd8e6; --card:#e7eef9; --ink:#112244; --muted:#415b78; --line:#b8c7de; --accent:#2a77ff;
  --radius:10px; --shadow: 0 2px 0 #a5b7d3, inset 0 1px 0 #fff; --font: "Tahoma","Verdana",system-ui,sans-serif;
}
body.theme-neon{
  --bg:#06070d; --card:#0b0f1a; --ink:#e9f1ff; --muted:#97a3c0; --line:#12172a; --accent:#00e5ff;
  --shadow: 0 0 0 1px #0a1130, 0 10px 30px rgba(0,229,255,.12);
}
body.theme-paper{
  --bg:#f4f0ea; --card:#fffdf8; --ink:#1b1918; --muted:#68615b; --line:#e6dfd6; --accent:#b85620;
  --shadow: 0 8px 24px rgba(120,90,60,.15); --font:"Georgia","Times New Roman",serif;
}

/* =========================================================
   Base
   ========================================================= */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font:16px/1.55 var(--font);
  color:var(--ink);
  background:var(--bg);
}

/* Header */
header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:14px 18px; border-bottom:1px solid var(--line);
  backdrop-filter:saturate(120%) blur(8px);
  background:color-mix(in oklab, var(--bg) 60%, transparent);
}
header h1{ margin:0; font-size:18px; letter-spacing:.3px }
.pill{ font-size:12px; color:var(--muted); border:1px solid var(--line); padding:4px 8px; border-radius:999px }
.theme-picker{ margin-left:auto; display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px }
.theme-picker select{
  appearance:none; background:var(--card); color:var(--ink);
  border:1px solid var(--line); border-radius:10px; padding:6px 10px;
}

/* Layout */
main{ max-width:940px; margin:0 auto; padding:20px }
.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
}
.card + .card{ margin-top:var(--gap) }

/* =========================================================
   Debate block
   ========================================================= */

/* Two columns on desktop; stack on mobile */
.debate{ display:grid; grid-template-columns:1fr }
@media (min-width: 860px){
  .debate__head{
    display:grid; grid-template-columns: 360px 1fr; gap: var(--gap);
    padding: var(--gap); align-items: start;
  }
}
@media (max-width: 859.98px){
  .debate__head{
    display:grid; grid-template-columns: 1fr; gap: var(--gap);
    padding: var(--gap);
  }
}

/* Media tile never collapses */
.debate__media{
  position: relative;
  aspect-ratio: 4 / 3;           /* change to 3/2 or 16/10 if you prefer */
  min-height: 220px;
  border-radius: 14px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.08)),
    #0b0d14;
  border: 1px solid var(--line);
}
@media (min-width:1100px){
  .debate__media{ aspect-ratio: 3 / 2; min-height: 260px; }
}

.debate__image{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; display:block;
}

/* Text column */
.debate__title{ margin:0 0 6px; font-size:28px; font-weight:800; text-align:center }
@media (min-width: 860px){
  .debate__title{ text-align:left; font-size:26px }
}
.debate__meta{ font-size:12px; color:var(--muted) }
.debate__body{ padding:0 var(--gap) var(--gap); color:color-mix(in oklab, var(--ink) 85%, var(--muted) 15%) }

/* Divider heading */
.section-title{ font-size:14px; color:var(--muted); padding:8px var(--gap); border-top:1px dashed var(--line) }

/* Replies placeholder */
.empty{ color:var(--muted); padding:14px var(--gap) }
ul.replies{ list-style:none; margin:0; padding:0 }

/* =========================================================
   Mic button (inside tile; no overlap with text column)
   ========================================================= */
.mic-btn{
  position:absolute; left:14px; bottom:14px;      /* INSIDE the tile */
  width:68px; height:68px; border:none; border-radius:50%;
  display:grid; place-items:center; color:#fff; cursor:pointer;
  background: radial-gradient(120% 120% at 30% 30%, var(--accent), color-mix(in oklab, var(--accent) 60%, #000 40%));
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  outline-offset:3px;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.mic-btn:hover{ transform: translateY(-1px) scale(1.02); }
.mic-btn:active{ transform: translateY(0) scale(.98); }

.mic-btn::after{
  content:""; position:absolute; inset:-8px; border-radius:inherit;
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 40%, transparent);
  animation: micPulse 2s ease-out infinite;
}
@keyframes micPulse{
  0%{ box-shadow:0 0 0 0 rgba(0,0,0,0), 0 0 0 0 color-mix(in oklab, var(--accent) 30%, transparent) }
  70%{ box-shadow:0 0 0 12px rgba(0,0,0,0), 0 0 0 18px transparent }
  100%{ box-shadow:0 0 0 0 rgba(0,0,0,0), 0 0 0 0 transparent }
}

/* Recording state */
.mic-btn.recording{
  background: radial-gradient(120% 120% at 30% 30%, #ff3b30, #a80d0d);
}
.mic-btn.recording::after{
  animation: micPulseRec 1.2s ease-out infinite;
}
@keyframes micPulseRec{
  0%  { box-shadow: 0 0 0 0 rgba(255,59,48,.35) }
  100%{ box-shadow: 0 0 0 16px rgba(255,59,48,0) }
}

/* Timer chip (also inside the tile) */
.mic-timer{
  position:absolute; left:96px; bottom:22px;
  background: color-mix(in oklab, var(--card) 90%, transparent);
  border:1px solid var(--line);
  color: var(--ink);
  font-weight:700; font-variant-numeric: tabular-nums;
  padding:6px 10px; border-radius:12px; box-shadow: var(--shadow);
}

/* Mobile tweaks */
@media (max-width:520px){
  .mic-btn{ width:60px; height:60px; left:12px; bottom:12px; }
  .mic-timer{ left:84px; bottom:18px; }
}
/* === Nudge the image a bit left and give the text more room (desktop only) === */
@media (min-width: 860px){
  /* make the image column a little slimmer + bigger gap */
  .debate__head{
    grid-template-columns: 300px minmax(0,1fr); /* was 360/340 → now 300 */
    gap: 28px;                                   /* extra breathing room */
  }

  /* slide the image tile a hair to the left (optional but helps the feel) */
  .debate__media{ margin-left: -8px; }

  /* tiny inward padding so the title can't visually collide with the tile edge */
  .debate__head > div:last-child{ padding-left: 4px; }
}

/* XL screens: keep it balanced but still not huge */
@media (min-width: 1100px){
  .debate__head{ grid-template-columns: 320px minmax(0,1fr); gap: 30px; }
  .debate__media{ margin-left: -10px; }
}
/* ===== Fix: keep image + text in their own lanes (no overlap) ===== */
@media (min-width: 860px){
  .debate__head{
    display: grid;
    grid-template-columns: 300px 1fr; /* image column, then text column */
    gap: 32px;                        /* clear breathing room */
    align-items: start;
  }

  /* IMPORTANT: don't let the image tile drift into the text column */
  .debate__media{
    margin: 0 !important;   /* cancels any earlier negative margins */
    width: 100%;
    z-index: 0;             /* layer under, but it won't matter since no overlap */
  }

  /* allow text column to shrink properly instead of forcing overlap */
  .debate__head > div:last-child{
    min-width: 0;           /* prevents overflow pushing under the image */
    padding-left: 0;        /* remove any leftover inset */
    position: relative;
    z-index: 1;
  }

  /* left-align the title so it sits nicely away from the image */
  .debate__title{ text-align: left !important; }
}

/* XL screens: still separate, just a touch wider image if you like */
@media (min-width: 1100px){
  .debate__head{
    grid-template-columns: 320px 1fr;
    gap: 36px;
  }
}
/* ========== Text reply button (matches mic color, smaller, no glow) ========== */
.text-btn{
  position:absolute; left:96px; bottom:14px;              /* beside the mic */
  width:52px; height:52px;
  display:grid; place-items:center;
  border:none;
  border-radius:50%;
  background: radial-gradient(120% 120% at 30% 30%,
              var(--accent),
              color-mix(in oklab, var(--accent) 60%, #000 40%));
  color:#fff;
  cursor:pointer;
  box-shadow: 0 8px 22px rgba(0,0,0,.28);                 /* softer than mic */
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.text-btn:hover{ transform: translateY(-1px) }
.text-btn:active{ transform: translateY(0) scale(.98) }

/* Mobile tweak */
@media (max-width:520px){
  .text-btn{ left:80px; bottom:12px; width:48px; height:48px; }
}

/* ========== Minimal composer beneath the media ========== */
.text-composer{
  margin: 8px var(--gap) var(--gap);
  background: color-mix(in oklab, var(--card) 96%, transparent);
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
}
.text-composer textarea{
  width:100%;
  min-height:90px;
  resize: vertical;
  background: #0e0f14;
  color: var(--ink);
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px;
  outline: none;
}
.composer-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:10px;
}
.btn{
  appearance:none;
  border:1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
}
.btn[disabled]{ opacity:.6; cursor:not-allowed; }
.btn.primary{
  background: var(--accent);
  color: #fff;
  border-color: color-mix(in oklab, var(--accent) 60%, #000 40%);
}
.btn.ghost{ background: transparent; }
.hint{ margin:8px 0 0; font-size:12px; color: var(--muted); }
/* Keep timer clear of the text button */
.mic-timer{
  left: 160px;   /* was 96px; moves it right of the chat button */
  bottom: 22px;
}

/* Row for Send/Discard chips (inside the media tile, bottom-right) */
.send-row{
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  gap: 8px;
}

/* Small pill buttons */
.chip-btn{
  appearance: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  background: color-mix(in oklab, var(--card) 92%, transparent);
  color: var(--ink);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.chip-btn.primary{
  background: var(--accent);
  border-color: color-mix(in oklab, var(--accent) 60%, #000 40%);
  color: #fff;
}
.chip-btn.ghost{
  background: transparent;
}

.chip-btn[disabled]{ opacity:.6; cursor:not-allowed; }

/* Mobile tweaks */
@media (max-width:520px){
  .mic-timer{ left: 150px; bottom: 18px; }
  .send-row{ right: 8px; bottom: 8px; }
}
/* Replies tidy styles */
.reply-head{ font-size:13px; margin-bottom:6px }
.reply-head .muted{ color: var(--muted) }
.pill.kind{
  font-size:11px; border:1px solid var(--line); border-radius:999px;
  padding:2px 6px; margin-left:6px; color: var(--muted);
}
.reply .reply-content p{ margin: 6px 0 0; color: color-mix(in oklab, var(--ink) 90%, var(--muted) 10%) }
/* ---------- Brand (logo + name) ---------- */
.brand{
  display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink);
}
.brand__logo{
  width:28px; height:28px; object-fit:contain; display:block;
  border-radius:6px;
}
.brand__name{
  font-weight:800; letter-spacing:.2px; font-size:18px;
}

/* ---------- Discard chip: always visible on any image ---------- */
.chip-btn.discard{
  background: #e64545;             /* solid red for contrast */
  color: #fff;
  border-color: color-mix(in oklab, #e64545 60%, #000 40%);
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
  box-shadow: 0 8px 20px rgba(230,69,69,.35);
}
.chip-btn.discard:hover{ filter: brightness(1.05) }
.chip-btn.discard:active{ filter: brightness(.96) }
/* ==== Header auth chips (match current IDs) ==== */
#btn-login,
#btn-register,
#btn-logout,
#user-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:30px;
  padding:0 12px;
  border-radius:999px;
  font-size:13px;
  border:1px solid var(--line);
  background: color-mix(in oklab, var(--card) 92%, transparent);
  color: var(--ink);
  cursor:pointer;
}

#btn-register{ background:transparent }
#btn-logout{ background:transparent }
#user-pill{
  cursor:default;
  font-weight:600;
  background: color-mix(in oklab, var(--surface) 85%, transparent);
}

/* Space them nicely if they sit inline in the header */
#btn-login, #btn-register, #btn-logout, #user-pill { margin-left:8px }

/* ==== Auth dialogs (match #dlg-login / #dlg-register) ==== */
dialog[id^="dlg-"]{
  border:none;
  padding:0;
  border-radius:14px;
  width: min(92vw, 360px);
  background: var(--surface);
  box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 0 0 1px var(--line) inset;
  color: var(--ink);
}

dialog[id^="dlg-"]::backdrop{
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}

dialog[id^="dlg-"] form{
  padding:14px 14px 12px;
}

dialog[id^="dlg-"] h3{
  margin: 6px 2px 10px;
  font-size: 16px;
  font-weight: 700;
}

dialog[id^="dlg-"] input{
  width:100%;
  padding:10px 12px;
  margin: 8px 0;
  border-radius:12px;
  border:1px solid var(--line);
  background: var(--card);
  color: var(--ink);
}

dialog[id^="dlg-"] .row{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:8px;
}

dialog[id^="dlg-"] .row button{
  height:32px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid var(--line);
  background: color-mix(in oklab, var(--card) 92%, transparent);
  color: var(--ink);
  cursor:pointer;
}

#login-submit,
#register-submit{
  background: #3b82f6;           /* primary */
  border-color: color-mix(in oklab, #3b82f6 60%, #000 40%);
  color:#fff;
}

.error{
  margin:8px 2px 0;
  font-size:12px;
  color:#ff6b6b;
}
.ok{
  margin:8px 2px 0;
  font-size:12px;
  color:#22c55e;
}
/* Make the native [hidden] attribute always hide, even on flex chips */
:where([hidden]){ display:none !important; }
.waveform{ width:100%; margin:8px 0 6px; }
.wf-play{
  padding:6px 10px; border-radius:10px; border:1px solid var(--line);
  background: color-mix(in oklab, var(--card) 92%, transparent);
  color: var(--ink); cursor:pointer; font-size:13px; margin-right:8px;
}
.reply-actions { margin-top: .4rem; }
.reply-actions .btn.danger { font-size: .9rem; opacity:.8; }
.reply-actions .btn.danger:hover { opacity:1 }
/* ----- Reply action row (share / vote / flag / delete) ----- */
.reply .action-row{
  display:flex;
  gap:10px;
  margin-top:8px;
  align-items:center;
}

.reply .action-row button{
  appearance:none;
  border:1px solid var(--line);
  background: color-mix(in oklab, var(--card) 92%, transparent);
  color: var(--ink);
  width:34px;
  height:34px;
  border-radius:10px;
  display:grid;
  place-items:center;
  cursor:pointer;
  opacity:.9;
}

.reply .action-row button:hover{
  opacity:1;
  transform: translateY(-1px);
}

.reply .action-row i{
  font-size:14px;            /* icon size */
  line-height:1;
}

/* make the delete/flag stand out a touch on dark */
.reply .action-row .fa-trash,
.reply .action-row .fa-flag{
  color: color-mix(in oklab, #ff6b6b 80%, var(--ink) 20%);
}
/* Ensure Font Awesome solid icons render even if global styles override fonts */
.action-row i.fa-solid{
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;   /* FA Solid needs 900 */
  font-size: 14px;
  line-height: 1;
}
/* ===== Share Dialog ===== */
#dlg-share {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  border-radius: 16px;
  padding: 0;
  width: min(560px, 92vw);
  max-width: 560px;
  box-shadow: 0 10px 40px rgba(0,0,0,.45);
}
#dlg-share::backdrop {
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}

.share-wrap { padding: 16px; }
.share-head h3 { margin: 0 0 8px 0; font-size: 1.15rem; }

.share-field {
  position: relative;
  display: flex;
  gap: 8px;
  margin: 8px 0 14px;
}
#share-url {
  flex: 1;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--card) 92%, black 8%);
  color: var(--ink);
  border-radius: 12px;
  padding: 12px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  outline: none;
}
.btn-copy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--card) 92%, white 8%);
  color: var(--ink);
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.btn-copy:hover { transform: translateY(-1px); }

.share-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in oklab, var(--card) 92%, white 8%);
  color: var(--ink);
  text-decoration: none;
}
.chip:hover { transform: translateY(-1px); }
.chip i { font-size: 16px; }

.share-foot {
  display: flex;
  justify-content: flex-end;
}
.btn-close {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
}
.btn-close:hover { background: color-mix(in oklab, var(--card) 88%, white 12%); }

/* ensure FA renders properly even with custom fonts */
#dlg-share i.fa-solid, #dlg-share i.fa-brands {
  font-family: "Font Awesome 6 Free","Font Awesome 6 Brands", sans-serif !important;
  font-weight: 900;
}
/* Share dialog tweaks */
#dlg-share { overflow: hidden; }                /* no horizontal scrollbar */
.share-wrap { max-height: 80vh; overflow: auto; }

.share-sub {
  margin: 2px 0 8px 0;
  color: var(--muted, #aab3c2);
  font-size: .95rem;
}
/* ===== Archive dialog ===== */
#dlg-archive{
  border:1px solid var(--line);
  background:var(--card);
  color:var(--ink);
  border-radius:16px;
  padding:0;
  width:min(560px,92vw);
  box-shadow:0 10px 40px rgba(0,0,0,.45);
}
#dlg-archive::backdrop{ background:rgba(0,0,0,.55); backdrop-filter:blur(2px); }
.archive-wrap{ padding:16px; max-height:80vh; overflow:auto; }
.archive-head h3{ margin:0 0 4px 0; font-size:1.15rem; }
.archive-head .muted{ margin:0 0 12px 0; color:var(--muted,#aab3c2); }

.archive-controls{
  display:flex; gap:8px; margin-bottom:12px; align-items:center;
}
#arch-date{
  border:1px solid var(--line);
  background: color-mix(in oklab, var(--card) 92%, white 8%);
  color:var(--ink); border-radius:10px; padding:10px 12px;
}
.archive-list{ display:grid; grid-template-columns:1fr; gap:8px; }
.archive-item{
  display:flex; justify-content:space-between; align-items:center;
  border:1px solid var(--line); border-radius:12px; padding:10px 12px;
  background: color-mix(in oklab, var(--card) 92%, white 8%);
}
.archive-item .title{ font-weight:600; }
.archive-item .meta{ color:var(--muted,#aab3c2); font-size:.9rem; }
.archive-item .open{ border:1px solid var(--line); background:transparent; color:var(--ink);
  padding:8px 10px; border-radius:10px; cursor:pointer; }
.archive-item .open:hover{ transform:translateY(-1px); }

.btn{ border:1px solid var(--line); background:transparent; color:var(--ink);
  padding:10px 14px; border-radius:12px; cursor:pointer; }
/* Ghost (teaser) icon button */
.icon-btn.ghost {
  opacity: .6;
  border-style: dashed;
}
.icon-btn.ghost:hover { opacity: .9; transform: translateY(-1px); }

/* Subtle info banner */
.info-banner{
  margin: 10px 0 14px;
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: color-mix(in oklab, var(--card) 92%, white 8%);
  color: var(--ink);
  font-size: .95rem;
}
.info-banner .linklike{
  border: none;
  background: transparent;
  color: var(--accent, #3b82f6);
  cursor: pointer;
  padding: 0 2px;
  text-decoration: underline;
}
.site-footer{
  border-top: 1px solid var(--line);
  margin-top: 24px;
  padding: 14px 0;
  background: color-mix(in oklab, var(--card) 92%, white 8%);
}
.foot-inner{
  max-width: 960px; margin: 0 auto;
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
}
.foot-inner a{ color: var(--ink); opacity:.85; }
.foot-inner a:hover{ opacity: 1; text-decoration: underline; }
/* Profile dropdown */
.user-menu{
  position: absolute;
  right: 12px; top: 54px; z-index: 20;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  display: grid; gap: 4px;
}
.user-menu button{
  background: transparent; color: var(--ink);
  border: 0; text-align: left; padding: 8px 12px; border-radius: 8px;
}
.user-menu button:hover{ background: color-mix(in oklab, var(--card) 88%, white 12%); }

/* Activity dialog */
.tabs{ display:flex; gap:8px; margin: 8px 0 10px; }
.tab{
  border:1px solid var(--line); background: transparent; color: var(--ink);
  padding: 8px 12px; border-radius: 10px; cursor: pointer;
}
.tab.active{ background: color-mix(in oklab, var(--card) 88%, white 12%); }
.act-panel{ display:grid; gap:8px; }
.activity-item{
  border:1px solid var(--line); border-radius:12px; padding:10px 12px;
  background: color-mix(in oklab, var(--card) 92%, white 8%);
  display:flex; justify-content: space-between; gap:10px; align-items:center;
}
.activity-item .meta{ color: var(--muted, #aab3c2); font-size: .9rem; }
.activity-item .open{ border:1px solid var(--line); background:transparent; color:var(--ink);
  padding:8px 10px; border-radius:10px; cursor:pointer; }
.activity-item .open:hover{ transform: translateY(-1px); }

/* Achievements list */
.ach-list{ list-style:none; padding:0; margin:6px 0; display:grid; gap:8px; }
.ach-list li{
  border:1px solid var(--line); border-radius:10px; padding:10px 12px;
  background: color-mix(in oklab, var(--card) 92%, white 8%);
  display:flex; gap:10px; align-items:center;
}
.ach-list .icon{ width:28px; text-align:center; }
.transcript {
  margin-top: .5rem;
  font-size: .9rem;
  line-height: 1.3;
}
.transcript.muted { color: var(--muted, #777); }
/* add to style.css if you like */
#dlg-edit-profile label { display:block; }
#dlg-edit-profile input, #dlg-edit-profile textarea, #dlg-edit-profile select {
  width:100%; box-sizing:border-box;
}
/* --- Toasts --- */
.toasts{
  position: fixed;
  inset: 16px 16px auto auto;                /* top-right */
  display: grid;
  gap: 10px;
  z-index: 9999;
}
.toast{
  background: color-mix(in oklab, var(--card) 94%, #000 6%);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: var(--shadow);
  max-width: min(360px, 90vw);
  opacity: 0;
  transform: translateY(-6px);
  animation: toastIn .18s ease forwards;
}
.toast.success{ border-color: color-mix(in oklab, #2ecc71 40%, var(--line)); }
.toast.error  { border-color: color-mix(in oklab, #ff4d4f 40%, var(--line)); }
.toast.warn   { border-color: color-mix(in oklab, #f6c945 40%, var(--line)); }
.toast button{
  all: unset;
  float: right;
  margin-left: 10px;
  cursor: pointer;
  opacity: .8;
}
@keyframes toastIn{
  to { opacity: 1; transform: translateY(0); }
}
/* Share dialog – make actions wrap on small screens */
@media (max-width: 480px) {
  #dlg-share .row {
    flex-wrap: wrap;            /* allow a second line */
    gap: 6px;                   /* a bit tighter */
  }
  #dlg-share .chip {
    padding: 8px 10px;          /* slightly smaller pills */
    font-size: 0.95rem;
    line-height: 1.1;
  }
  /* Optional: make chips distribute nicely if they wrap */
  #dlg-share .row .chip {
    flex: 1 1 calc(50% - 6px);  /* two per row when wrapping */
    justify-content: center;    /* label centered */
    text-align: center;
  }
}
/* Solid (non-translucent) modals on mobile */
@media (max-width: 640px) {
  /* Common modal shells */
  dialog,
  [role="dialog"],
  .modal,
  #dlg-edit-profile,
  #dlg-notifications,
  #dlg-achievements,
  #dlg-share {
    background-color: var(--card) !important;   /* solid panel */
    backdrop-filter: none !important;           /* remove blur/glass */
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;                      /* no see-through */
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
  }

  /* If you have inner “card” wrappers that were translucent */
  dialog .card,
  .modal .card {
    background-color: var(--card) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Backdrop: darker, no blur */
  dialog::backdrop {
    background: rgba(0,0,0,0.6) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}
.user-menu .um-sep{
  border: none;
  border-top: 1px solid var(--line);
  margin: 4px 6px;
}
.user-menu #um-close{
  text-align: center;
  opacity: .9;
}
.user-menu #um-close:hover{ opacity: 1; }
/* ======= Player UI ======= */
.vc-controls{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:8px;
}
.vc-controls .btn.tiny, .vc-controls .select.tiny,
#playback-toolbar .btn.tiny, #playback-toolbar .select.tiny{
  font-size:.9rem; padding:6px 10px; border-radius:10px;
}

/* Player shell uses CSS variables so themes are easy */
.vc-player{
  --vc-bg: #0e1116;
  --vc-wave: #8aa1ff;
  --vc-prog: #3d6cff;
  --vc-knob: #ffffff;
  background: var(--vc-bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
}

/* WaveSurfer/visual area */
.vc-wave{
  height: 64px;
}
.vc-compact .vc-wave{ height: 42px; }

/* ======= Themes (data-theme on .vc-player) ======= */
.vc-player[data-theme="classic"]{
  --vc-bg: color-mix(in oklab, var(--card) 96%, #000 4%);
  --vc-wave: #9fb4ff;
  --vc-prog: #446dff;
  --vc-knob: #1b2553;
}
.vc-player[data-theme="midnight"]{
  --vc-bg:#0b0e14; --vc-wave:#90e0ef; --vc-prog:#48cae4; --vc-knob:#caf0f8;
}
.vc-player[data-theme="neon"]{
  --vc-bg:#090909; --vc-wave:#00ffd0; --vc-prog:#00d4ff; --vc-knob:#fff;
  box-shadow: 0 0 0 1px #00ffd0 inset, 0 6px 20px rgba(0,255,208,.08);
}
.vc-player[data-theme="sunset"]{
  --vc-bg:#20141a; --vc-wave:#ffb86b; --vc-prog:#ff6b6b; --vc-knob:#ffe7d1;
}
.vc-player[data-theme="mono"]{
  --vc-bg:#151515; --vc-wave:#cfcfcf; --vc-prog:#ffffff; --vc-knob:#ffffff;
}

/* Buttons read theme */
.vc-player .btn, #playback-toolbar .btn{
  background: color-mix(in oklab, var(--vc-prog) 15%, var(--card));
  border: 1px solid color-mix(in oklab, var(--vc-prog) 35%, var(--line));
  color: var(--ink);
}

/* Small toolbar in header */
.vc-toolbar{ display:flex; gap:8px; align-items:center; }
@media (max-width:640px){
  #playback-toolbar{ margin-left:auto; }
}

/* Optional: tiny tag showing speed inside players */
.vc-speed-tag{ font-size:.8rem; opacity:.8; }