@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* Palette matches codingneurons.com's real, live design: a light, near-white
   marketing surface by default, blue as the primary accent (their "Neurons"
   wordmark / terminal prompt color), green reserved for success/positive
   states (their terminal's "Status: JOB-READY ENGINEER" line), and solid
   monochrome black/white for primary buttons rather than colored fills.
   Inter + JetBrains Mono typography. Same variable names throughout the
   stylesheet mean every component re-themes automatically — only the values
   below change between light (default) and dark (the [data-theme="dark"]
   block after it, toggled by js/theme.js). */
:root {
  --imp-banner-h: 0px; /* set to the real height by body.has-impersonation-banner below */
  --bg: #fafbfc;
  --bg-elevated: #ffffff;
  --bg-panel: #f5f6f8;
  --bg-panel-2: #eef0f3;
  --bg-hover: #e5e7eb;
  --border: #e5e7eb;
  --border-light: #d1d5db;
  --text: #0a0a0a;
  --text-dim: #52525b;
  --text-faint: #71717a;
  --accent: #2563eb;
  --accent-dark: #1d4ed8;
  --blue: #2563eb;
  --easy: #16a34a;
  --medium: #ca8a04;
  --hard: #dc2626;
  --premium: #7c3aed;
  --danger: #dc2626;
  --success: #16a34a;
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glow-accent: rgba(37, 99, 235, 0.05);
  --glow-blue: rgba(37, 99, 235, 0.05);
  --chat-received-bg: #f0f0f0;
  --chat-received-text: #0a0a0a;
  --dot-color: rgba(10, 10, 10, 0.05);
  --radius: 10px;
  --radius-sm: 6px;
  font-size: 15px;
}

/* Dark mode — same component CSS, an inverted-surface palette (this app's
   original look, and close to codingneurons.com's own dark UI surfaces like
   their terminal card). Applied by toggling data-theme on <html>. */
:root[data-theme="dark"] {
  --bg: #0a0a0a;
  --bg-elevated: #171717;
  --bg-panel: #111111;
  --bg-panel-2: #1a1a1a;
  --bg-hover: #262626;
  --border: #262626;
  --border-light: #404040;
  --text: #fafafa;
  --text-dim: #a3a3a3;
  --text-faint: #737373;
  --accent: #3b82f6;
  --accent-dark: #60a5fa;
  --blue: #3b82f6;
  --easy: #22c55e;
  --medium: #eab308;
  --hard: #ef4444;
  --premium: #a78bfa;
  --danger: #ef4444;
  --success: #22c55e;
  --glass-bg: rgba(10, 10, 10, 0.72);
  --glow-accent: rgba(59, 130, 246, 0.08);
  --glow-blue: rgba(59, 130, 246, 0.08);
  --chat-received-bg: #2c2f36;
  --chat-received-text: var(--text);
  --dot-color: rgba(255, 255, 255, 0.06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background-color: var(--bg);
  /* Subtle dot-grid texture, matching codingneurons.com's hero background. */
  background-image: radial-gradient(var(--dot-color) 1px, transparent 1px);
  background-size: 22px 22px;
  color: var(--text);
  font-family: 'Inter', -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

code, pre, textarea.mono, .mono { font-family: 'JetBrains Mono', 'Fira Code', monospace; }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

/* ---------- Navbar ---------- */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 52px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: var(--imp-banner-h);
  z-index: 30;
}
.navbar .left { display: flex; align-items: center; gap: 24px; min-width: 0; }
/* flex-shrink: 0 on both — a flex row with too little space silently shrinks
   its items below their own CSS width/height instead of overflowing
   visibly, which is what turned .navbar-toggle into a squashed oval on a
   phone before the inline nav next to it was hidden there entirely (see
   the mobile media query below). Kept here too as a floor so neither the
   brand nor the menu button can ever be squeezed like that again, no
   matter what else changes in this row later. */
.navbar .brand { font-weight: 700; font-size: 17px; display: flex; align-items: center; gap: 8px; color: var(--text); flex-shrink: 0; }
/* The LearningNeurons mark: a white neuron (inline SVG, drawn in currentColor) on the
   brand gradient — the same artwork as favicon.svg and the Android launcher icon. */
.logo-mark {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--premium));
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; box-shadow: 0 2px 8px rgba(91, 76, 240, 0.28);
}
.logo-mark svg { display: block; width: 19px; height: 19px; }
/* Whitelabel company branding (js/navbar.js's paintCompanyBrand) — replaces
   the .logo-mark/text pair above once signed in, same .brand flex row. */
.brand-company-logo {
  width: 30px; height: 30px; border-radius: 8px; object-fit: cover; flex-shrink: 0;
}
.brand-company-logo-fallback {
  background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px;
  margin-right: 5px;
}
.brand-company-text { display: flex; flex-direction: column; line-height: 1.25; gap: 1px; }
.brand-company-name { font-weight: 700; font-size: 15px; color: var(--text); }
.brand-powered-by { font-weight: 500; font-size: 10px; letter-spacing: 0.03em; color: var(--text-faint); text-transform: uppercase; }
@media (max-width: 720px) {
  .brand-company-text { display: none; }
}

.navbar nav { display: flex; align-items: center; gap: 4px; }
.navbar nav a.nav-link {
  color: var(--text-dim); font-size: 14px; font-weight: 500;
  padding: 6px 12px; border-radius: var(--radius-sm);
}
.navbar nav a.nav-link:hover { color: var(--text); background: var(--bg-hover); text-decoration: none; }
.navbar nav a.nav-link.active { color: var(--text); }
.navbar .right { display: flex; align-items: center; gap: 14px; }

.navbar-toggle {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: transparent; border: 1px solid var(--border-light); color: var(--text);
  padding: 6px 10px; font-size: 16px; border-radius: var(--radius-sm); line-height: 1;
}
.navbar-toggle:hover { background: var(--bg-hover); }

/* ---------- Left-hand sidebar (js/navbar.js's setupNavSidebar) ----------
   Holds every nav page except the short, frequently-used set that stays
   inline in the top bar; opened by .navbar-toggle on any screen size, not
   just mobile — see that function's own comment for why. */
.nav-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 110;
  width: 260px; max-width: 82vw;
  background: var(--bg-elevated); border-right: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.22s ease;
  overflow-y: auto;
}
.nav-sidebar.open { transform: translateX(0); }
.nav-sidebar-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  font-weight: 700; font-size: 14px; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.04em;
  flex: none;
}
.nav-sidebar nav { display: flex; flex-direction: column; gap: 2px; padding: 10px; }
.nav-sidebar nav a.nav-link, .nav-sidebar nav button.nav-link {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px; border-radius: var(--radius-sm); font-size: 14.5px;
}
/* Log Out is a <button>, not an <a> — same look as every other row here
   (reset the generic button styling: no background fill, no forced min-height,
   left-aligned text, inherited font) rather than standing out as an obviously
   different element. */
.nav-sidebar nav button.nav-link {
  width: 100%; background: none; border: none; color: var(--text-dim);
  font-family: inherit; font-weight: 500; text-align: left; cursor: pointer;
  min-height: 0; box-shadow: none;
}
.nav-sidebar nav button.nav-link:hover { color: var(--text); background: var(--bg-hover); }
.nav-sidebar-icon { flex: none; opacity: 0.75; }
.nav-sidebar-divider { border: none; border-top: 1px solid var(--border); margin: 4px 10px; }
.nav-sidebar-backdrop {
  position: fixed; inset: 0; z-index: 105;
  background: rgba(8, 10, 16, 0.45);
  opacity: 0; visibility: hidden;
  transition: opacity 0.22s ease;
}
.nav-sidebar-backdrop.open { opacity: 1; visibility: visible; }
/* Hidden by default: on wider screens the primary links are already inline
   in the top bar, so their clones here (see setupNavSidebar) would just be
   a redundant duplicate list; shown again below 720px, where the inline
   nav is hidden entirely and the sidebar is the only way to reach them.
   Explicit "flex" rather than "revert" so they line up with every other
   row's icon+label layout instead of falling back to a bare <a>'s inline
   default. Selector repeats .nav-link and its ancestors (not just the one
   .nav-sidebar-primary-copy class) so its specificity beats the icon-layout
   "display: flex" rule above — a bare single-class selector here previously
   lost to that rule despite coming later in the file, since specificity
   always wins over source order, silently showing every primary link on
   desktop too. */
.nav-sidebar nav a.nav-link.nav-sidebar-primary-copy { display: none; }
@media (max-width: 720px) {
  .nav-sidebar nav a.nav-link.nav-sidebar-primary-copy { display: flex; }
}

.theme-toggle-btn {
  width: 32px; height: 32px; padding: 0; margin-right: 4px; flex-shrink: 0;
  border-radius: 50%; background: var(--bg-panel-2); border: 1px solid var(--border-light);
  color: var(--text); display: flex; align-items: center; justify-content: center;
}
.theme-toggle-btn svg { width: 16px; height: 16px; }
.theme-toggle-btn:hover { background: var(--bg-hover); }

.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg-panel-2); border: 1px solid var(--border-light);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; color: var(--text); cursor: pointer;
}
/* Wraps the navbar's own email + avatar so the whole cluster is one link to
   your own profile (see js/navbar.js) — .hint's own color wins over the
   generic `a` rule below by specificity, so the email doesn't turn link-blue. */
.navbar-profile-link { display: flex; align-items: center; gap: 8px; }
.tier-chip {
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.tier-chip.free { background: var(--bg-panel-2); color: var(--text-dim); border: 1px solid var(--border-light); }
.tier-chip.plus { background: rgba(124,58,237,0.15); color: var(--premium); border: 1px solid rgba(124,58,237,0.4); }
.tier-chip.pro { background: rgba(59,130,246,0.15); color: var(--accent); border: 1px solid rgba(59,130,246,0.4); }
.tier-chip.admin { background: rgba(59,130,246,0.15); color: var(--blue); border: 1px solid rgba(59,130,246,0.4); }

/* ---------- Layout ---------- */
.container { max-width: 1200px; margin: 0 auto; padding: 28px 24px; }

.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}

.auth-shell {
  min-height: calc(100vh - 52px);
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 0%, rgba(59,130,246,0.06), transparent 60%);
}
@supports (min-height: 100dvh) {
  .auth-shell { min-height: calc(100dvh - 52px); }
}
.auth-card { width: 380px; max-width: 92vw; }
.auth-card h2 { margin: 0 0 4px; font-size: 22px; }
.auth-card .sub { color: var(--text-dim); font-size: 13px; margin-bottom: 20px; }

.google-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #fff; color: #1f1f1f; border: 1px solid var(--border-light);
  font-weight: 600; padding: 10px 16px;
}
.google-btn:hover { background: #f3f3f3; }
.auth-divider {
  display: flex; align-items: center; text-align: center; color: var(--text-faint);
  font-size: 12px; margin: 16px 0;
}
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; border-bottom: 1px solid var(--border); }
.auth-divider span { padding: 0 10px; }

/* ---------- Forms ---------- */
label { font-size: 13px; color: var(--text-dim); display: block; margin-bottom: 6px; }

input, select, textarea, button {
  font-family: inherit;
  font-size: 14px;
}

input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 14px;
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  transition: border-color 0.15s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
}

/* Primary buttons are solid monochrome (black-on-light / white-on-dark) —
   matching codingneurons.com's actual CTAs ("Book a Free Session", "Explore
   Programs" are solid black, not colored) — with blue/green reserved as
   accent colors for links, badges, focus states, and success indicators. */
button {
  cursor: pointer;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  /* The --btn-* variables let a UI style (css/themes.css) restyle the DEFAULT
     button only — any component that sets its own background/border (tabs, sheet
     items, chips…) keeps its look, because its own rule beats this one. */
  border: var(--btn-border, none);
  background: var(--btn-bg, var(--text));
  color: var(--btn-fg, var(--bg));
  box-shadow: var(--btn-shadow, none);
  font-weight: 600;
  transition: background 0.15s, opacity 0.15s;
}
button:hover { opacity: 0.85; }
button.secondary { background: var(--bg-panel-2); color: var(--text); border: 1px solid var(--border-light); }
button.secondary:hover { background: var(--bg-hover); }
button.ghost { background: transparent; color: var(--text-dim); border: 1px solid var(--border-light); }
button.ghost:hover { color: var(--text); background: var(--bg-hover); }
button.danger { background: var(--danger); color: white; }
button.danger:hover { opacity: 0.85; }
button.accept { background: var(--success); color: #fff; }
button.accept:hover { opacity: 0.85; }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button.link-btn { background: transparent; border: none; color: var(--accent); padding: 2px 0; font-weight: 400; font-size: 13px; width: auto; }
button.link-btn:hover { opacity: 0.8; text-decoration: underline; }

.tab-strip { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.tab-strip button {
  background: transparent; color: var(--text-dim); border: none; border-bottom: 2px solid transparent;
  border-radius: 0; padding: 10px 4px; margin-right: 20px; font-weight: 600;
}
.tab-strip button.active { color: var(--text); border-bottom-color: var(--accent); }
.tab-strip button:hover { background: transparent; color: var(--text); }

.error-msg { color: var(--danger); font-size: 13px; margin: -6px 0 10px; min-height: 16px; }
.hint { color: var(--text-dim); font-size: 13px; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border); font-size: 14px; }
th { color: var(--text-faint); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; }
tbody tr:hover td { background: var(--bg-hover); }

/* Question names in the Problems list read as plain (near-white in dark
   mode, near-black in light mode) text rather than link-blue — easier to
   scan a long list of titles when they're not all competing for attention
   as "links." Still turns accent-colored on hover so it's clearly clickable. */
.question-title { color: var(--text); font-weight: 500; }
.question-title:hover { color: var(--accent); text-decoration: underline; }

.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.badge.easy { background: rgba(34,197,94,0.12); color: var(--easy); }
.badge.medium { background: rgba(234,179,8,0.12); color: var(--medium); }
.badge.hard { background: rgba(239,68,68,0.12); color: var(--hard); }
.badge.premium { background: rgba(167,139,250,0.12); color: var(--premium); }
.badge.type { background: var(--bg-panel-2); color: var(--text-dim); border: 1px solid var(--border-light); }

/* ---------- Dashboard ---------- */
.dashboard-grid { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: start; }
.sidebar-card { position: sticky; top: calc(76px + var(--imp-banner-h)); }
.sidebar-card h4 { margin: 0 0 12px; font-size: 13px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; }

.progress-ring-wrap { display: flex; align-items: center; gap: 16px; }
.progress-ring-wrap svg { flex-shrink: 0; }
.progress-stat { font-size: 22px; font-weight: 700; }
.progress-legend { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; font-size: 13px; }
.progress-legend .row { display: flex; justify-content: space-between; align-items: center; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; }

.topic-list { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.topic-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: 13.5px; color: var(--text-dim);
}
.topic-item:hover { background: var(--bg-hover); color: var(--text); }
.topic-item.active { background: rgba(59,130,246,0.12); color: var(--accent); font-weight: 600; }
.topic-item .lock { opacity: 0.7; display: inline-flex; }
.topic-item .lock svg { width: 12px; height: 12px; }

.filters { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.filters select { width: auto; margin-bottom: 0; padding: 8px 10px; }
.search-box { position: relative; flex: 1; min-width: 220px; }
.search-box input { margin-bottom: 0; padding-left: 34px; }
.search-box .icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-faint); display: flex; }

.solved-check { color: var(--success); font-weight: 700; }
.acc-rate { color: var(--text-dim); font-size: 13px; }

/* ---------- Problem page ---------- */
.problem-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; height: 48px; background: var(--bg-elevated); border-bottom: 1px solid var(--border);
}
.problem-topbar .nav-buttons { display: flex; gap: 8px; align-items: center; }
.problem-topbar .nav-buttons > a { display: inline-flex; }
/* These are TEXT buttons ("All Problems", "Prev", "Next") — the site-wide
   button.icon-btn rule further down makes every icon-btn a 42px circle, which
   squeezed and misaligned them, so size/shape are set explicitly here. */
.problem-topbar button.icon-btn {
  background: transparent; color: var(--text-dim); border: 1px solid var(--border-light);
  width: auto; height: 32px; padding: 0 12px; border-radius: var(--radius-sm);
  font-size: 13px; line-height: 1; white-space: nowrap;
}
.problem-topbar button.icon-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.problem-topbar button.icon-btn:hover { color: var(--text); background: var(--bg-hover); }

.split-h {
  display: flex;
  height: calc(100vh - 100px);
  overflow: hidden;
}
.split-pane {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.split-pane.desc-pane { flex: 0 0 480px; }
.split-pane.work-pane { flex: 1 1 auto; }

.v-resizer {
  flex: 0 0 6px;
  cursor: col-resize;
  background: var(--border);
  position: relative;
}
.v-resizer:hover, .v-resizer:active { background: var(--accent); }

.h-resizer {
  flex: 0 0 6px;
  cursor: row-resize;
  background: var(--border);
}
.h-resizer:hover, .h-resizer:active { background: var(--accent); }

.desc-scroll { flex: 1; overflow-y: auto; padding: 20px 24px; }
.desc-scroll h1 { margin-top: 0; font-size: 19px; }
.desc-scroll pre {
  background: var(--bg-panel-2);
  padding: 12px;
  border-radius: var(--radius-sm);
  overflow-x: auto;
  border: 1px solid var(--border);
}
.desc-scroll code { background: var(--bg-panel-2); padding: 1px 5px; border-radius: 4px; }
.desc-meta { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }

.editor-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 14px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.editor-toolbar select { width: 130px; margin: 0; padding: 6px 8px; }
.editor-toolbar #environment-select { width: 170px; }
.editor-toolbar .spacer { flex: 1; }
.editor-toolbar .icon-btn {
  background: transparent; border: 1px solid var(--border-light); color: var(--text-dim);
  padding: 6px 9px; font-size: 13px;
}
.editor-toolbar .icon-btn:hover { color: var(--text); background: var(--bg-hover); }

.editor-area { flex: 1 1 auto; min-height: 120px; overflow: hidden; }
#monaco-editor { height: 100%; }

.console-pane { display: flex; flex-direction: column; overflow: hidden; }
.console-tabs {
  display: flex; gap: 4px; padding: 8px 14px 0; background: var(--bg-elevated);
  border-bottom: 1px solid var(--border); flex: 0 0 auto;
}
.console-tabs button {
  background: transparent; color: var(--text-dim); border: none; border-radius: 0;
  padding: 7px 4px; margin-right: 18px; font-weight: 600; font-size: 13px; border-bottom: 2px solid transparent;
}
.console-tabs button.active { color: var(--text); border-bottom-color: var(--accent); }
.console-body { flex: 1; overflow-y: auto; padding: 14px 16px; background: var(--bg-panel); font-size: 13px; }

.case-tab-strip { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.case-tab-strip .case-btn {
  padding: 5px 12px; border-radius: var(--radius-sm); font-size: 12.5px;
  background: var(--bg-panel-2); color: var(--text-dim); border: 1px solid var(--border-light); cursor: pointer;
}
.case-tab-strip .case-btn.active { background: var(--bg-hover); color: var(--text); border-color: var(--text-faint); }
.case-tab-strip .case-btn.pass { border-color: var(--success); color: var(--success); }
.case-tab-strip .case-btn.fail { border-color: var(--danger); color: var(--danger); }

.field-block { margin-bottom: 12px; }
.field-block .field-label { font-size: 12px; color: var(--text-faint); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.03em; }
.field-block textarea, .field-block pre {
  margin-bottom: 0; background: var(--bg-panel-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 10px; font-size: 13px; color: var(--text);
}

.verdict-banner { font-weight: 700; font-size: 16px; padding: 4px 0 10px; display: flex; align-items: center; gap: 8px; }
.verdict-banner.accepted { color: var(--success); }
.verdict-banner.wrong_answer, .verdict-banner.runtime_error, .verdict-banner.compile_error { color: var(--danger); }
.verdict-banner.time_limit_exceeded, .verdict-banner.memory_limit_exceeded { color: var(--medium); }
.verdict-banner.manual_review, .verdict-banner.pending { color: var(--text-dim); }

.stat-row { display: flex; gap: 18px; color: var(--text-dim); font-size: 12.5px; margin-bottom: 12px; }

.testcase-result {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-top: 8px;
  background: var(--bg-panel-2);
}
.testcase-result.pass { border-left: 3px solid var(--success); }
.testcase-result.fail { border-left: 3px solid var(--danger); }

.mcq-options label {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px; cursor: pointer; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-panel-2);
}
.mcq-options label:hover { border-color: var(--text-faint); }
.mcq-options input { width: auto; margin: 0; }

.submission-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 13.5px; }
.submission-row:hover { color: var(--accent); }

.paywall { text-align: center; padding: 80px 20px; }
.paywall .lock { margin-bottom: 10px; display: flex; justify-content: center; color: var(--text-dim); }
.paywall .lock svg { width: 44px; height: 44px; }

.plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 22px; }
.plan-card { text-align: center; position: relative; }
.plan-card.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.plan-card .price { font-size: 30px; font-weight: 700; margin: 10px 0; }
.plan-card .price span { font-size: 13px; color: var(--text-dim); font-weight: 400; }

#limits-table th:not(:first-child), #limits-table td:not(:first-child) { text-align: center; }
#limits-table td:first-child { color: var(--text-dim); }

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.65);
  display: flex; justify-content: center; z-index: 50;
  backdrop-filter: blur(2px);
  /* A tall modal (a full post with a video and comments, opened from Search/a shared
     link) used to be clamped to 86vh with its own inner scrollbar — a small boxed-in
     scroll strip inside an already-scrollable-looking overlay. Letting the backdrop
     itself scroll instead reads as one normal scrollable page, the way Instagram's own
     post view does, and never clips content a short viewport can't otherwise reach. */
  overflow-y: auto; padding: 40px 16px;
}
/* auto top/bottom margins (not align-items:center) center a short modal vertically
   without the flexbox-centering-plus-overflow bug that clips a tall one's top edge. */
.modal { width: 640px; max-width: 92vw; margin: auto 0; }
.modal h3 { margin-top: 0; }
/* The theme picker (js/navbar.js's openThemeModal) — a much narrower modal
   than the default 640px, since it's just three rows. */
.theme-modal { width: 320px; }
.theme-option-list { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.theme-option {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 12px; border-radius: var(--radius-sm); background: none; border: none;
  color: var(--text); font-family: inherit; font-size: 14.5px; font-weight: 500;
  text-align: left; cursor: pointer; min-height: 0; box-shadow: none;
}
.theme-option:hover { background: var(--bg-hover); }
.theme-option span { flex: 1; }
.theme-option-check { flex: none; color: var(--accent); visibility: hidden; }
.theme-option.active { background: var(--bg-panel-2); }
.theme-option.active .theme-option-check { visibility: visible; }
.theme-modal-subheading { margin: 18px 0 0; font-size: 13px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; }
.theme-swatch-list { display: flex; gap: 12px; margin-top: 12px; }
.theme-swatch {
  width: 34px; height: 34px; border-radius: 50%; padding: 0; min-height: 0;
  background: var(--swatch-color); border: 2px solid transparent; box-shadow: none;
  cursor: pointer; position: relative;
}
.theme-swatch:hover { transform: scale(1.08); }
.theme-swatch.active { border-color: var(--text); }
.theme-swatch.active::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 8px; height: 8px;
  border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
}

.confirm-modal { width: 380px; }
.confirm-modal-message { margin: 0 0 18px; }
.confirm-modal-actions { display: flex; justify-content: flex-end; gap: 10px; }

.tag { color: var(--text-dim); font-size: 12px; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.mt-16 { margin-top: 16px; }
.mt-8 { margin-top: 8px; }

.empty-state { text-align: center; padding: 40px 20px; color: var(--text-dim); }

.kbd { background: var(--bg-panel-2); border: 1px solid var(--border-light); border-radius: 4px; padding: 1px 6px; font-size: 11px; }

/* ---------- Installed packages table ---------- */
.pkg-table { width: 100%; font-size: 13px; }
.pkg-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); }
.pkg-table .pkg-version { color: var(--text-dim); font-family: 'JetBrains Mono', monospace; }
.pkg-table button { padding: 4px 10px; font-size: 12px; }

/* ---------- Terminal ---------- */
.terminal-toggle { margin-top: 8px; }
.terminal-wrap { margin-top: 10px; }
/* macOS-style title bar, matching codingneurons.com's terminal hero card. */
.terminal-titlebar {
  display: flex; align-items: center; gap: 6px; padding: 8px 12px;
  background: #17191d; border: 1px solid var(--border); border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.terminal-dot { width: 10px; height: 10px; border-radius: 50%; }
.terminal-dot.dot-red { background: #ff5f57; }
.terminal-dot.dot-yellow { background: #febc2e; }
.terminal-dot.dot-green { background: #28c840; }
.terminal-titlebar-label { margin-left: 8px; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: #737373; }

.terminal-screen {
  background: #0a0d12;
  border: 1px solid var(--border);
  border-top: none;
  padding: 10px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  height: 220px;
  overflow-y: auto;
  color: #d4d4d4;
}
.terminal-screen .t-line { white-space: pre-wrap; word-break: break-word; margin-bottom: 3px; line-height: 1.5; }
.terminal-screen .t-cmd { color: var(--accent); }
.terminal-screen .t-cmd::before { content: "$ "; opacity: 0.7; }
.terminal-screen .t-stderr { color: var(--danger); }
.terminal-screen .t-meta { color: var(--text-faint); }
.terminal-input-row {
  display: flex; align-items: center; gap: 6px;
  background: #0a0d12; border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding: 8px 12px;
}
.terminal-input-row .prompt-sign { color: var(--accent); font-family: 'JetBrains Mono', monospace; font-size: 13px; }
.terminal-input-row input {
  background: transparent; border: none; margin: 0; padding: 0;
  font-family: 'JetBrains Mono', monospace; color: #d4d4d4; font-size: 13px;
}
.terminal-input-row input:focus { outline: none; border: none; }

/* ---------- Full-page question editor window ---------- */
.editor-shell {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
}
.editor-shell-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.editor-section h3 { margin-top: 0; }
.editor-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.editor-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.desc-preview {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px; background: var(--bg-panel-2); min-height: 120px;
}
.testcase-editor-row {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px; margin-bottom: 10px; background: var(--bg-panel-2);
}
.testcase-editor-row .flex-between { margin-bottom: 8px; }
@media (max-width: 860px) {
  .editor-shell { grid-template-columns: 1fr; }
  .editor-grid-2, .editor-grid-3 { grid-template-columns: 1fr; }
}

/* ---------- Avatars ---------- */
.avatar-circle {
  border-radius: 50%; background: var(--bg-panel-2); border: 1px solid var(--border-light);
  display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--text);
  object-fit: cover; flex-shrink: 0; overflow: hidden;
}
.avatar-xl { width: 96px; height: 96px; font-size: 32px; }
.avatar-lg { width: 56px; height: 56px; font-size: 20px; }
.avatar-md { width: 40px; height: 40px; font-size: 15px; }
.avatar-sm { width: 28px; height: 28px; font-size: 12px; }

/* ---------- Profile page ---------- */
.profile-header { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.profile-header .info { flex: 1; min-width: 220px; }
.profile-header h1 { margin: 0 0 4px; font-size: 22px; }
.online-status { font-size: 13px; color: var(--text-dim); margin-bottom: 6px; }
.online-status.is-online { color: var(--success); font-weight: 600; }
.online-status.is-online::before { content: "●"; margin-right: 5px; font-size: 9px; }
.profile-stats { display: flex; gap: 22px; margin: 14px 0; }
.profile-stats .stat-num { font-weight: 700; font-size: 16px; }
.profile-stats .stat-label { color: var(--text-dim); font-size: 12.5px; }
.profile-stats .stat-clickable { cursor: pointer; border-radius: 6px; padding: 2px 4px; margin: -2px -4px; }
.profile-stats .stat-clickable:hover { background: var(--bg-hover); }
.profile-stats .stat-clickable:hover .stat-num, .profile-stats .stat-clickable:hover .stat-label { color: var(--accent); }

.people-list-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.people-list-row:last-child { border-bottom: none; }
.people-list-row .info { flex: 1; min-width: 0; }
.people-list-row .name { font-weight: 600; }
.profile-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.avatar-upload-wrap { position: relative; }
.avatar-upload-wrap input[type=file] { display: none; }
.avatar-upload-btn {
  position: absolute; bottom: 0; right: 0; width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 13px; border: 2px solid var(--bg);
}

.profile-tabs { display: flex; gap: 4px; margin: 20px 0 16px; border-bottom: 1px solid var(--border); }
.profile-tabs button {
  background: transparent; color: var(--text-dim); border: none; border-bottom: 2px solid transparent;
  border-radius: 0; padding: 10px 4px; margin-right: 20px; font-weight: 600;
}
.profile-tabs button.active { color: var(--text); border-bottom-color: var(--accent); }

.coding-stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; }
.coding-stat-tile { text-align: center; background: var(--bg-panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 8px; }
.coding-stat-num { font-size: 22px; font-weight: 700; }
.coding-stat-label { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.coding-stats-breakdown { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-dim); }

.highlight-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.highlight-bubble { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; width: 76px; }
.highlight-bubble .avatar-circle { border: 2px solid var(--border-light); }
.highlight-bubble span { font-size: 12px; color: var(--text-dim); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }

.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 4px; }
.post-grid-cell { aspect-ratio: 1; background: var(--bg-panel-2); border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; }
.post-grid-cell img, .post-grid-cell video { width: 100%; height: 100%; object-fit: cover; }
.post-grid-cell .no-media { display: flex; align-items: center; justify-content: center; height: 100%; padding: 10px; font-size: 12px; color: var(--text-dim); text-align: center; }

/* ---------- Search ---------- */
.search-result-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.search-result-row .info { flex: 1; min-width: 0; }
.search-result-row .name { font-weight: 600; }
.search-result-row .sub { color: var(--text-dim); font-size: 13px; }

/* ---------- Feed / Posts ---------- */
.composer textarea { resize: vertical; }
.composer-actions { display: flex; justify-content: space-between; align-items: center; }
.composer-preview { position: relative; margin-bottom: 10px; }
.composer-preview img, .composer-preview video { max-height: 240px; border-radius: var(--radius-sm); }
.composer-preview .remove-preview { position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,0.6); border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; }

.post-card { margin-bottom: 16px; }
.post-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.post-card-header .name { font-weight: 600; }
.post-card-header .time { color: var(--text-faint); font-size: 12px; }
.post-card-media { width: 100%; border-radius: var(--radius-sm); margin-bottom: 10px; max-height: 480px; object-fit: contain; background: #000; }
.post-card-actions { display: flex; gap: 16px; margin-bottom: 8px; }
.post-card-actions button { background: transparent; border: none; color: var(--text-dim); padding: 4px 0; font-weight: 600; font-size: 13.5px; }
.post-card-actions button.liked { color: var(--danger); }
.post-card-actions button:hover { color: var(--text); background: transparent; }
.post-comment-row { display: flex; gap: 8px; margin-top: 8px; font-size: 13.5px; }
.post-comment-row .comment-user { font-weight: 600; }
.comment-input-row { display: flex; gap: 8px; margin-top: 10px; }
.comment-input-row input { margin-bottom: 0; }

/* ---------- Stories ---------- */
.story-bar { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 14px; }
.story-bubble { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; width: 68px; flex-shrink: 0; }
.story-bubble .ring { padding: 2px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--success)); }
.story-bubble .ring.seen { background: var(--border-light); }
.story-bubble .ring .avatar-circle { border: 2px solid var(--bg); }
.story-bubble span { font-size: 11.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; text-align: center; }
.add-story-btn { position: relative; }
.add-story-btn .plus-badge {
  position: absolute; bottom: 4px; right: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg);
}

.story-viewer-backdrop {
  position: fixed; inset: 0; background: #000; z-index: 80;
  display: flex; align-items: center; justify-content: center;
}
.story-viewer { width: 100%; max-width: 420px; height: 100%; max-height: 780px; position: relative; display: flex; flex-direction: column; }
.story-progress-row { display: flex; gap: 4px; padding: 10px; }
.story-progress-row .seg { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.3); overflow: hidden; }
.story-progress-row .seg .fill { height: 100%; background: #fff; width: 0%; }
.story-progress-row .seg.done .fill { width: 100%; }
.story-viewer-header { display: flex; align-items: center; gap: 10px; padding: 0 12px 10px; color: #fff; }
.story-viewer-media-wrap { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.story-viewer-media-wrap img, .story-viewer-media-wrap video { max-width: 100%; max-height: 100%; }
.story-viewer-caption { color: #fff; padding: 10px 14px; text-align: center; font-size: 14px; }
.story-nav-zone { position: absolute; top: 0; bottom: 0; width: 33%; cursor: pointer; }
.story-viewer-close { position: absolute; top: 10px; right: 10px; color: #fff; font-size: 22px; cursor: pointer; z-index: 5; background:transparent; border:none; padding: 6px; }

/* ---------- Messages (iMessage-inspired) ---------- */
.messages-shell {
  display: grid; grid-template-columns: 320px 1fr; height: calc(100vh - 52px); overflow: hidden;
  background: var(--bg-panel);
}
@supports (height: 100dvh) {
  /* 100vh on mobile browsers is the height with the address bar collapsed —
     not the actually-visible area — so the bottom of the chat (including
     the input row) ends up clipped behind real browser chrome. dvh tracks
     the real visible viewport as it changes; the plain vh rule above stays
     as the fallback for browsers that don't support dvh at all. */
  .messages-shell { height: calc(100dvh - 52px); }
}
.conversation-list { border-right: 1px solid var(--border); overflow-y: auto; min-height: 0; background: var(--bg-elevated); }
.conversation-row { display: flex; gap: 12px; align-items: center; padding: 12px 16px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background 0.12s; position: relative; }
.conversation-row:hover { background: var(--bg-hover); }
.conversation-row.active { background: var(--bg-panel-2); }
.conversation-row.active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.conversation-row .avatar-circle.avatar-md { width: 52px; height: 52px; font-size: 18px; }
.conversation-row .info { flex: 1; min-width: 0; }
.conversation-row .name { font-weight: 600; font-size: 14.5px; color: var(--text); }
.conversation-row .preview { color: var(--text-dim); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.conversation-row.has-unread .name { font-weight: 700; }
.conversation-row.has-unread .preview { color: var(--text); font-weight: 500; }
.conversation-row .unread-badge {
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 999px; padding: 2px 7px; min-width: 18px; text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* ---------- Nav red dot (unread chat indicator) ---------- */
.nav-link { position: relative; }
.nav-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger); margin-left: 5px; vertical-align: middle;
}

/* ---------- Upload spinner (WhatsApp-style rotating circle) ---------- */
.upload-spinner {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,0.35); border-top-color: #fff;
  animation: spin 0.8s linear infinite; flex-shrink: 0;
}
.upload-spinner.dark { border: 2.5px solid rgba(0,0,0,0.15); border-top-color: var(--accent); }
@keyframes spin { to { transform: rotate(360deg); } }
.chat-bubble.sending { opacity: 0.75; }
.chat-bubble .sending-row { display: flex; align-items: center; gap: 8px; }
.chat-bubble .media-uploading-wrap { position: relative; display: inline-block; margin-top: 6px; }
.chat-bubble .media-uploading-wrap img, .chat-bubble .media-uploading-wrap video { filter: brightness(0.6); }
.chat-bubble .media-uploading-wrap .upload-spinner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.chat-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg-panel); }
.chat-header {
  display: flex; align-items: center; gap: 12px; padding: 12px 20px; flex: 0 0 auto;
  background: var(--glass-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border); position: relative; z-index: 2;
}
.chat-header .avatar-circle.avatar-md { width: 38px; height: 38px; font-size: 14px; }
.chat-header strong { font-weight: 600; font-size: 15px; color: var(--text); }
.chat-header .online-status { font-size: 12px; color: var(--text-dim); }
.chat-header .online-status.is-online { color: #34c759; }

.chat-messages {
  flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column;
  gap: 3px; min-height: 0;
  background:
    radial-gradient(circle at 15% 8%, var(--glow-accent), transparent 45%),
    radial-gradient(circle at 85% 92%, var(--glow-blue), transparent 45%);
}
.chat-bubble-row {
  display: flex; align-items: flex-end; gap: 4px; margin-top: 12px;
  animation: bubble-pop-in 0.18s ease;
}
.chat-bubble-row.grouped { margin-top: 2px; }
@keyframes bubble-pop-in {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.chat-bubble-row.mine { justify-content: flex-end; }

.chat-bubble {
  max-width: 62%; padding: 9px 14px; border-radius: 19px;
  background: var(--chat-received-bg); color: var(--chat-received-text); font-size: 14.5px; line-height: 1.35;
  box-shadow: 0 1px 1px rgba(0,0,0,0.18);
  border-bottom-left-radius: 6px;
}
.chat-bubble-row.mine .chat-bubble {
  background: linear-gradient(180deg, #2b93ff 0%, #0a7cff 100%);
  color: #fff; border-radius: 19px; border-bottom-right-radius: 6px; border-bottom-left-radius: 19px;
}
.chat-bubble-row:not(.mine) .chat-bubble { border-bottom-left-radius: 6px; border-bottom-right-radius: 19px; }

.chat-bubble img, .chat-bubble video {
  max-width: 260px; max-height: 320px; width: auto; height: auto;
  border-radius: 13px; margin-top: 6px; display: block; object-fit: cover;
}
.chat-bubble .time { font-size: 10.5px; opacity: 0.65; margin-top: 4px; }
/* "mine" bubbles are a blue gradient, so seen-receipts use bright white rather
   than WhatsApp's light blue (which was designed for a white/green background). */
.chat-bubble .receipt { font-size: 11px; letter-spacing: -1px; opacity: 0.75; }
.chat-bubble .receipt.seen { color: #fff; opacity: 1; font-weight: 700; }
.chat-bubble .edited-label { font-size: 10.5px; opacity: 0.65; font-style: italic; margin-right: 4px; }
.chat-bubble.deleted-bubble { font-style: italic; color: var(--text-faint); background: var(--bg-panel-2); box-shadow: none; }
.chat-bubble-row.mine .chat-bubble.deleted-bubble { background: var(--bg-panel-2); color: var(--text-faint); }

.msg-menu-wrap { position: relative; align-self: center; }
.msg-menu-toggle {
  background: transparent; border: none; color: var(--text-faint); padding: 2px 4px;
  font-size: 15px; opacity: 0; transition: opacity 0.1s;
}
.chat-bubble-row:hover .msg-menu-toggle { opacity: 1; }
.msg-menu-toggle:hover { color: var(--text); background: var(--bg-hover); }
.msg-menu {
  position: absolute; bottom: 100%; background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.45); z-index: 20;
  display: flex; flex-direction: column; min-width: 150px; overflow: hidden;
}
.msg-menu-item {
  background: transparent; border: none; border-radius: 0; text-align: left; padding: 9px 12px;
  color: var(--text); font-size: 13px;
}
.msg-menu-item:hover { background: var(--bg-hover); }

.edit-banner {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 20px; background: rgba(59,130,246,0.1); border-top: 1px solid var(--border);
  font-size: 13px;
}
.reply-banner {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 20px; background: var(--bg-panel-2); border-top: 1px solid var(--border);
  font-size: 13px;
}
.reply-banner .reply-target { border-left: 3px solid var(--accent); padding-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.reply-banner .reply-target .reply-sender { font-weight: 600; color: var(--accent); display: block; font-size: 12px; }

.pinned-bar { border-bottom: 1px solid var(--border); background: rgba(59,130,246,0.06); }
.pinned-row { display: flex; align-items: center; gap: 8px; padding: 7px 20px; font-size: 12.5px; border-bottom: 1px solid var(--border); }
.pinned-row:last-child { border-bottom: none; }
.pinned-row .pin-icon { color: var(--accent); }
.pinned-row .pinned-content { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.pinned-row .pinned-sender { font-weight: 600; margin-right: 4px; }
.pinned-row button { padding: 2px 8px; font-size: 11px; }

.msg-quote {
  border-left: 3px solid rgba(255,255,255,0.4); padding: 4px 8px; margin-bottom: 6px;
  background: rgba(0,0,0,0.15); border-radius: 8px; font-size: 12.5px; opacity: 0.9;
  cursor: pointer;
}
.msg-quote:hover { opacity: 1; background: rgba(0,0,0,0.22); }
.chat-bubble-row:not(.mine) .msg-quote { border-left-color: var(--accent); background: rgba(255,255,255,0.05); }
.chat-bubble-row:not(.mine) .msg-quote:hover { background: rgba(255,255,255,0.1); }
.msg-quote .quote-sender { font-weight: 600; display: block; }

.chat-bubble-row.jump-highlight .chat-bubble { animation: jump-flash 1.5s ease; }
@keyframes jump-flash {
  0%, 100% { box-shadow: none; }
  20% { box-shadow: 0 0 0 3px var(--accent); }
}

.msg-like-row { display: flex; align-items: center; gap: 4px; margin-top: 3px; }
.msg-like-btn { background: transparent; border: none; padding: 0; font-size: 12px; color: var(--text-faint); }
.chat-bubble-row.mine .msg-like-btn { color: rgba(255,255,255,0.75); }
.msg-like-btn.liked { color: var(--danger); }
.forwarded-label { font-size: 10.5px; color: var(--text-faint); font-style: italic; display: block; margin-bottom: 3px; }
.chat-bubble-row.mine .forwarded-label { color: rgba(255,255,255,0.7); }

.forward-contact-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.forward-contact-row:hover { background: var(--bg-hover); }

/* ---------- Media lightbox ---------- */
.lightbox-trigger { cursor: zoom-in; }
.media-lightbox-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 100;
  display: flex; align-items: center; justify-content: center;
  animation: lightbox-fade-in 0.15s ease;
}
@keyframes lightbox-fade-in { from { opacity: 0; } to { opacity: 1; } }
.media-lightbox-img { max-width: 92vw; max-height: 92vh; object-fit: contain; border-radius: 8px; }
.media-lightbox-close {
  position: absolute; top: 18px; right: 22px; background: rgba(255,255,255,0.12); border: none;
  color: #fff; font-size: 26px; width: 40px; height: 40px; border-radius: 50%; line-height: 1;
  cursor: pointer;
}
.media-lightbox-close:hover { background: rgba(255,255,255,0.22); }

.chat-input-row {
  display: flex; gap: 10px; padding: 12px 18px; align-items: center; flex: 0 0 auto;
  background: var(--glass-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
}
.chat-input-row input[type=text] {
  margin: 0; border-radius: 20px; background: var(--bg-panel-2); border: 1px solid var(--border-light);
  padding: 10px 16px; font-size: 14px;
}
.chat-input-row input[type=text]:focus { border-color: var(--accent); }
.chat-attach-btn {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--bg-panel-2);
  border: 1px solid var(--border-light); display: flex; align-items: center; justify-content: center;
  font-size: 17px; cursor: pointer; transition: background 0.12s;
}
.chat-attach-btn:hover { background: var(--bg-hover); }
#chat-send-btn { border-radius: 20px; padding: 9px 18px; }
.chat-attach-preview { padding: 0 18px; display: flex; align-items: center; gap: 10px; }
.chat-attach-preview .preview-thumb { max-width: 70px; max-height: 70px; border-radius: 10px; object-fit: cover; }
.chat-attach-preview .preview-meta { font-size: 12px; color: var(--text-dim); }

/* ---------- Attachment editor (crop/rotate/resize images, trim/mute video) ---------- */
.attach-editor-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 90;
  display: flex; align-items: center; justify-content: center;
}
.attach-editor {
  width: 520px; max-width: 94vw; max-height: 92vh; overflow-y: auto;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px;
}
.attach-editor h3 { margin-top: 0; }
.editor-canvas-wrap {
  position: relative; display: flex; align-items: center; justify-content: center;
  background: #000; border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 14px;
  min-height: 200px; max-height: 380px;
  user-select: none;
}
.editor-canvas-wrap canvas { max-width: 100%; max-height: 380px; display: block; cursor: crosshair; }
.editor-canvas-wrap.crop-mode canvas { cursor: crosshair; }
.crop-rect {
  position: absolute; border: 2px dashed var(--accent); background: rgba(59,130,246,0.15);
  pointer-events: none;
}
.editor-toolbar-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; }
.editor-toolbar-row button.icon-btn { padding: 7px 12px; }
.editor-toolbar-row button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.editor-slider-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 13px; color: var(--text-dim); }
.editor-slider-row input[type=range] { flex: 1; margin: 0; }
.editor-slider-row .val { min-width: 46px; text-align: right; font-family: 'JetBrains Mono', monospace; }

.attach-video-preview { width: 100%; max-height: 320px; border-radius: var(--radius-sm); background: #000; margin-bottom: 14px; }
.trim-track { position: relative; height: 34px; background: var(--bg-panel-2); border-radius: 6px; margin-bottom: 10px; }
.trim-track .trim-range { position: absolute; top: 0; bottom: 0; background: rgba(59,130,246,0.35); border: 1px solid var(--accent); border-radius: 4px; }
.trim-track input[type=range] {
  position: absolute; top: 0; left: 0; width: 100%; height: 34px; margin: 0;
  -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none;
}
.trim-track input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto; width: 14px; height: 34px; border-radius: 4px;
  background: var(--accent); cursor: ew-resize; border: none;
}
.trim-track input[type=range]::-moz-range-thumb {
  pointer-events: auto; width: 14px; height: 34px; border-radius: 4px; background: var(--accent);
  cursor: ew-resize; border: none;
}
.trim-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-dim); margin-bottom: 14px; font-family: 'JetBrains Mono', monospace; }

/* ---------- Notification bell ---------- */
.notif-bell-wrap { position: relative; }
.notif-bell-btn { position: relative; font-size: 16px; padding: 6px 9px; border: none; background: transparent; }
.notif-bell-btn:hover { background: var(--bg-hover); }
.notif-badge {
  position: absolute; top: 0px; right: 0px; background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 700; border-radius: 999px; min-width: 16px; height: 16px;
  align-items: center; justify-content: center; padding: 0 3px; line-height: 1;
}
.notif-dropdown {
  position: absolute; top: 40px; right: 0; width: min(340px, calc(100vw - 24px)); max-height: 440px; overflow-y: auto;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4); z-index: 40;
}
.notif-header { padding: 12px 14px; font-weight: 700; border-bottom: 1px solid var(--border); }
.notif-header button { font-size: 12px; padding: 4px 8px; }
.notif-row {
  display: flex; gap: 10px; padding: 10px 14px; text-decoration: none; color: var(--text);
  border-bottom: 1px solid var(--border);
}
.notif-row:hover { background: var(--bg-hover); }
.notif-row.unread { background: rgba(59,130,246,0.06); }
.notif-row .info { flex: 1; min-width: 0; }
.notif-row .text { font-size: 13.5px; }
.notif-row .time { font-size: 11.5px; color: var(--text-faint); margin-top: 2px; }

/* ---------- Requests page ---------- */
.request-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.request-row .info { flex: 1; min-width: 0; }
.request-row .name { font-weight: 600; }

/* ---------- Activity heatmap (day-wise progress) ---------- */
.heatmap-scroll { overflow-x: auto; padding-top: 10px; }
.heatmap-body { display: flex; gap: 6px; }
.heatmap-daylabels {
  display: grid; grid-template-rows: repeat(7, 11px); gap: 3px;
  margin-top: 17px; font-size: 10px; color: var(--text-faint); line-height: 11px;
}
.heatmap-months {
  display: grid; gap: 3px; margin-bottom: 4px; font-size: 11px; color: var(--text-faint);
}
.heatmap-month-label { grid-row: 1; white-space: nowrap; }
.heatmap-grid { display: grid; gap: 3px; }
.heat-cell {
  width: 11px; height: 11px; border-radius: 2px; cursor: pointer;
  transition: outline-color 0.1s;
}
.heat-cell.level-0 { background: var(--bg-panel-2); border: 1px solid var(--border); }
.heat-cell.level-1 { background: rgba(34, 197, 94, 0.28); }
.heat-cell.level-2 { background: rgba(34, 197, 94, 0.5); }
.heat-cell.level-3 { background: rgba(34, 197, 94, 0.75); }
.heat-cell.level-4 { background: var(--success); }
.heat-cell:hover, .heat-cell:focus-visible {
  outline: 2px solid var(--text); outline-offset: 1px;
}
.heatmap-legend {
  display: flex; align-items: center; gap: 4px; font-size: 11px;
  color: var(--text-faint); margin-top: 10px;
}
.heatmap-legend .heat-cell { width: 10px; height: 10px; cursor: default; }
.heatmap-tooltip {
  position: fixed; background: #000; color: #fff; padding: 5px 9px; border-radius: 5px;
  font-size: 12px; pointer-events: none; z-index: 60; opacity: 0;
  transition: opacity 0.1s; white-space: nowrap;
}

/* ---------- Pagination ---------- */
.pagination-bar { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 16px; flex-wrap: wrap; }
.page-btn {
  background: var(--bg-panel-2); color: var(--text-dim); border: 1px solid var(--border-light);
  border-radius: var(--radius-sm); padding: 6px 12px; font-size: 13px; cursor: pointer; min-width: 36px;
}
.page-btn:hover:not([disabled]) { background: var(--bg-hover); color: var(--text); }
.page-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 700; }
.page-btn[disabled] { opacity: 0.4; cursor: default; }
.page-ellipsis { color: var(--text-faint); padding: 0 2px; }

/* ---------- Learn (AI roadmap / lessons) ---------- */
.learn-shell { display: grid; grid-template-columns: 280px 1fr; gap: 20px; max-width: 1100px; margin: 24px auto; padding: 0 20px; }
.goals-sidebar { display: flex; flex-direction: column; gap: 10px; }
.goals-sidebar > button { width: 100%; }
.goals-list { display: flex; flex-direction: column; gap: 4px; }
.goal-list-item {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 8px 10px 12px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid transparent;
}
.goal-list-item:hover { background: var(--bg-hover); }
.goal-list-item.active { background: var(--bg-panel-2); border-color: var(--border-light); }
.goal-list-text { flex: 1; min-width: 0; }
.goal-delete-btn { width: 30px; height: 30px; flex: none; color: var(--text-faint); opacity: 0; transition: opacity .12s; }
.goal-list-item:hover .goal-delete-btn, .goal-delete-btn:focus-visible { opacity: 1; }
.goal-delete-btn:hover { color: var(--danger); background: rgba(239,68,68,0.1); }
/* Hover-to-reveal doesn't work on touch — keep it visible there so it's still reachable. */
@media (hover: none) { .goal-delete-btn { opacity: 1; } }
.goal-list-title { font-size: 13.5px; color: var(--text); font-weight: 500; line-height: 1.35; }
.goal-list-meta { font-size: 11.5px; color: var(--text-faint); margin-top: 3px; }

.goal-input-card textarea { resize: vertical; }

.topic-list-editor { display: flex; flex-direction: column; gap: 8px; }
.topic-card {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--bg-panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.topic-card.clickable { cursor: pointer; transition: border-color 0.12s; }
.topic-card.clickable:hover { border-color: var(--accent); }
.topic-card .topic-delete-live-btn { width: 32px; height: 32px; flex: none; color: var(--text-faint); }
.topic-card .topic-delete-live-btn:hover { color: var(--danger); background: rgba(239,68,68,0.1); }
.topic-select input { width: auto; margin: 0; }
.topic-info { flex: 1; min-width: 0; }
.topic-title { font-weight: 600; font-size: 14px; }
.topic-desc { color: var(--text-dim); font-size: 12.5px; margin-top: 2px; }
.topic-delete-btn { flex-shrink: 0; padding: 4px 10px; }
.topic-status { flex-shrink: 0; }

.add-topic-row { display: flex; gap: 8px; }
.add-topic-row input { margin: 0; }
.add-topic-row button { flex-shrink: 0; }

.status-pill {
  display: inline-block; font-size: 11.5px; font-weight: 600; padding: 3px 10px;
  border-radius: 999px; white-space: nowrap;
}
.status-pill.pending { background: var(--bg-hover); color: var(--text-dim); }
.status-pill.generating { background: rgba(59,130,246,0.15); color: var(--accent); }
.status-pill.ready { background: rgba(34,197,94,0.15); color: var(--success); }
.status-pill.failed { background: rgba(239,68,68,0.15); color: var(--danger); }
.status-pill.locked { background: var(--bg-hover); color: var(--text-faint); }
.status-pill.done { background: rgba(34,197,94,0.15); color: var(--success); }

/* Topic quiz (learn.js's "Knowledge check") */
.topic-card.locked { opacity: 0.55; cursor: not-allowed; }
.topic-card.locked:hover { border-color: var(--border); }
.topic-card .topic-lock-icon { color: var(--text-faint); flex-shrink: 0; display: flex; }
.quiz-section { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.quiz-progress { font-size: 13px; color: var(--text-dim); margin: 4px 0 14px; }
.quiz-q-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; }
.quiz-q-card.correct { border-color: rgba(34,197,94,0.4); background: rgba(34,197,94,0.05); }
.quiz-q-text { font-weight: 600; margin: 0 0 10px; font-size: 14.5px; }
.quiz-options { display: flex; flex-direction: column; gap: 8px; }
.quiz-opt {
  display: flex; gap: 10px; align-items: flex-start; text-align: left; width: 100%;
  background: var(--bg-elevated); color: var(--text); border: 1.5px solid var(--border-light);
  padding: 10px 12px; font-weight: 500; font-size: 13.5px; line-height: 1.4; border-radius: var(--radius-sm);
}
.quiz-opt:hover:not(:disabled) { background: var(--bg-hover); }
.quiz-opt:disabled { cursor: default; opacity: 0.85; }
.quiz-opt .quiz-opt-l {
  flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--bg-panel-2);
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
}
.quiz-opt.picked { border-color: var(--accent); }
.quiz-opt.right { border-color: var(--success); background: rgba(34,197,94,0.1); }
.quiz-opt.right .quiz-opt-l { background: var(--success); color: #fff; }
.quiz-opt.wrong { border-color: var(--danger); background: rgba(239,68,68,0.08); }
.quiz-opt.wrong .quiz-opt-l { background: var(--danger); color: #fff; }
.quiz-feedback { margin-top: 10px; font-size: 13px; padding: 8px 10px; border-radius: var(--radius-sm); }
.quiz-feedback.right { background: rgba(34,197,94,0.1); color: var(--success); }
.quiz-feedback.wrong { background: rgba(239,68,68,0.08); color: var(--danger); }
.quiz-complete-banner {
  display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap;
  background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.3); border-radius: var(--radius);
  padding: 14px 16px; margin-top: 6px;
}

.animation-frame { margin: 16px 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.animation-frame iframe { display: block; width: 100%; height: 420px; border: none; background: var(--bg-panel); }

.lesson-blog { line-height: 1.7; color: var(--text); }
.lesson-blog h1, .lesson-blog h2, .lesson-blog h3 { color: var(--text); margin-top: 28px; }
.lesson-blog p, .lesson-blog li { color: var(--text); font-size: 14.5px; }
.lesson-blog code { background: var(--bg-panel-2); padding: 1px 5px; border-radius: 4px; }
.lesson-blog pre { background: var(--bg-panel-2); padding: 12px 14px; border-radius: var(--radius-sm); overflow-x: auto; }
.lesson-blog pre code { background: none; padding: 0; }

.video-section { border-top: 1px solid var(--border); padding-top: 16px; }
.teacher-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px;
  background: linear-gradient(135deg, var(--glow-accent), transparent 70%), var(--bg-elevated);
}
.teacher-cta button { width: auto; }

@media (max-width: 800px) {
  .learn-shell { grid-template-columns: 1fr; }
}

/* ---------- Meetings list ---------- */
.meeting-row { margin-bottom: 12px; }
.meeting-title { font-size: 17px; font-weight: 600; }

/* ---------- Meeting room (live call) ---------- */
.meeting-shell { display: flex; flex-direction: column; height: 100vh; background: #0b0d11; }
@supports (height: 100dvh) {
  .meeting-shell { height: 100dvh; }
}
.meeting-header {
  display: flex; align-items: center; justify-content: space-between; padding: 12px 20px;
  background: var(--bg-elevated); border-bottom: 1px solid var(--border); flex: 0 0 auto;
}
.meeting-header strong { color: var(--text); font-size: 15px; }
.meeting-header-actions { display: flex; align-items: center; gap: 12px; }
#meeting-timer { font-variant-numeric: tabular-nums; }
#meeting-timer.timer-low { color: var(--danger, #e5484d); font-weight: 600; }
.meeting-body { flex: 1; display: flex; min-height: 0; }
.video-area { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* Fixed column counts (3 on laptop/desktop, 2 on phones — see the mobile
   override below) instead of auto-fill-by-width, paired with pagination
   instead of an endless vertical scroll once a call has more participants
   than fit on one screen. */
.video-grid {
  flex: 1; display: grid; grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(160px, 1fr); gap: 10px; padding: 14px; align-content: start; overflow: hidden;
}
.video-tile.grid-hidden { display: none; }
.grid-pagination {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 0 14px 12px;
}
.grid-pagination button {
  width: 30px; height: 30px; padding: 0; border-radius: 8px; background: var(--bg-panel-2);
  color: var(--text); border: 1px solid var(--border-light);
}
.grid-pagination button:disabled { opacity: 0.35; cursor: not-allowed; }

/* Teams-style "speaker view" — whichever participant is currently talking
   (see meeting-room.js's speaker-detection section) takes over this whole
   area full-size, with everyone else demoted to a small scrollable strip,
   instead of staying an equal-sized tile in the grid. */
.spotlight-view { flex: 1; display: flex; flex-direction: column; min-height: 0; gap: 10px; padding: 14px; }
.spotlight-main { flex: 1; min-height: 0; position: relative; }
.spotlight-main .video-tile { position: absolute; inset: 0; }
.spotlight-strip { flex: 0 0 auto; display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.spotlight-strip .video-tile { flex: 0 0 auto; width: 160px; height: 90px; }
.video-tile.speaking { box-shadow: 0 0 0 3px var(--success) inset; }

.video-tile { position: relative; background: #000; border-radius: 10px; overflow: hidden; }
.video-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-tile .tile-label {
  position: absolute; bottom: 8px; left: 10px; color: #fff; font-size: 12px;
  background: rgba(0,0,0,0.55); padding: 3px 9px; border-radius: 6px;
}

.meeting-side {
  width: 300px; flex: 0 0 auto; border-left: 1px solid var(--border); background: var(--bg-elevated);
  display: flex; flex-direction: column; padding: 12px;
}
.meeting-side .tab-strip { margin-bottom: 10px; }
.side-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.chat-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 4px; }
.chat-log-row { font-size: 13px; color: var(--text); background: var(--bg-panel-2); padding: 6px 10px; border-radius: 8px; }
.chat-log-row.mine { background: rgba(59,130,246,0.12); }
.chat-log-sender { display: block; font-size: 11px; font-weight: 600; color: var(--text-faint); }
.meeting-side .chat-input-row { padding: 10px 0 0; border-top: none; }
.meeting-side .chat-input-row input { margin: 0; }

.participant-row { padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.participant-controls { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.participant-controls button { padding: 4px 9px; font-size: 11.5px; }

.meeting-controls {
  display: flex; gap: 12px; justify-content: center; align-items: center; padding: 16px;
  background: var(--bg-elevated); border-top: 1px solid var(--border); flex: 0 0 auto;
}
.control-btn {
  width: 52px; height: 52px; border-radius: 50%; background: var(--bg-panel-2);
  color: var(--text); border: 1px solid var(--border-light);
  display: inline-flex; align-items: center; justify-content: center;
}
.control-btn svg { width: 22px; height: 22px; }
.control-btn:hover { background: var(--bg-hover); }
.control-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.control-btn.danger { background: var(--danger); color: #fff; border-color: var(--danger); }
#record-btn.active { background: var(--danger); color: #fff; border-color: var(--danger); animation: record-pulse 1.5s infinite; }
@keyframes record-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

/* ============================================================
   Mobile responsive layer. Kept as one block at the end so every
   phone-width override lives in one place rather than scattered
   next to each component's desktop rules.
   ============================================================ */

/* The notification bell is NOT the rightmost item in the navbar (the tier
   badge and avatar circle sit to its right) — .notif-dropdown's `right: 0`
   anchors to the BELL's own box, not the true screen edge, so on a narrow
   phone the dropdown's left edge can land in negative territory (off the
   left of the screen entirely) because it's positioned as if the bell were
   flush against the edge when it isn't. Switching to `position: fixed`
   with explicit left/right margins anchors it to the real viewport instead
   of the bell's coincidental position, which sidesteps that math no matter
   what else is in the navbar. */
@media (max-width: 720px) {
  .notif-dropdown {
    position: fixed; top: 52px; left: 10px; right: 10px; width: auto; max-width: none;
  }
}

/* Problems page (dashboard.html) is genuinely not usable at phone width —
   rather than a squeezed, half-broken layout, phones get a clear notice
   telling them to switch to a bigger screen instead; tablets and up see the
   real page as normal (the breakpoint matches the dashboard-grid/table
   stacking rules below, i.e. the same point where this page starts
   actually struggling). */
.mobile-only-notice { display: none; }
@media (max-width: 720px) {
  .mobile-only-notice {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
    max-width: 340px; margin: 60px auto; padding: 0 24px; color: var(--text-faint);
  }
  .mobile-only-notice h3 { margin: 4px 0 0; color: var(--text); }
  .mobile-only-notice button { width: auto; margin-top: 4px; }
  #dashboard-content { display: none; }
  /* Same story for problem.html (the solve page: editor, console and question side by
     side) — the "Solve" link on the feed streak banner and daily challenge card both
     point straight here, so this has to hold regardless of question type (coding, MCQ,
     a locked Pro question) — all three of JS's layout containers set their own inline
     display, so !important is what actually wins here, not just specificity. */
  .problem-topbar { display: none; }
  #paywall-view, #mcq-layout, #coding-layout { display: none !important; }
}

/* Any plain data table (dashboard question list, admin tables) scrolls
   horizontally instead of squeezing columns unreadably narrow. Only the
   outer element becomes a block — rows/cells keep their table display
   roles, so column alignment is unaffected. Threshold matches the
   dashboard-grid stacking breakpoint below — a 7-column table trying to
   survive next to a fixed 260px sidebar is exactly the "squeezed" case
   this exists to prevent, so both need to kick in together. */
@media (max-width: 960px) {
  table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ---------- Navbar: hamburger menu ---------- */
@media (max-width: 720px) {
  .navbar { padding: 0 14px; }
  .navbar .left { gap: 10px; }
  .navbar .brand { font-size: 15px; }
  .navbar .brand .logo-mark { width: 22px; height: 22px; font-size: 12px; }
  /* The inline top nav (even just the short PRIMARY_HREFS set) doesn't
     actually fit here alongside the brand, hamburger, and account controls
     on a real phone — flexbox silently shrinks flex items below their own
     width to make room instead of overflowing visibly, which is what made
     the hamburger button itself render as a squashed oval rather than a
     clean square. Hidden entirely at this width instead: the sidebar is
     the one nav surface on mobile, and already has its own clones of these
     same primary links at the top (see setupNavSidebar) specifically for
     this. */
  .navbar > .left > nav { display: none; }
  .navbar .right { gap: 8px; }
  .navbar .right .hint { display: none; }
}

/* ---------- Auth / dashboard / profile ---------- */
/* Was 720px — too narrow. Between 720-960px (tablets, a narrow laptop
   window) the sidebar stayed a fixed 260px while the question table's
   seven columns had nowhere near enough room, squeezing everything
   unreadably before either responsive rule engaged. Stacking earlier
   covers that whole gap. */
@media (max-width: 960px) {
  .dashboard-grid { grid-template-columns: 1fr; }
  /* Sticky positioning only makes sense next to a taller independent
     column (the desktop two-column layout) — stacked on one column it
     pins the progress card mid-scroll while the topics list underneath
     it keeps moving, which reads as broken rather than sticky. */
  .sidebar-card { position: static; }
  /* The search box (min-width 220px) plus two width:auto selects don't
     divide the row evenly once wrapped onto their own line(s) — letting
     the selects flex to share the remaining width instead of shrink-
     wrapping to their content reads as a deliberate layout, not leftovers. */
  .filters select { flex: 1 1 140px; }
}

/* ---------- Problem-solving split view ---------- */
@media (max-width: 900px) {
  .split-h { flex-direction: column; height: auto; }
  /* !important: resizer.js restores a saved pixel flex-basis from
     localStorage on load, which as an inline style would otherwise
     outrank this stacked mobile layout. */
  .split-pane.desc-pane {
    flex: 0 0 auto !important; width: 100% !important;
    max-height: none; overflow: visible;
  }
  /* The description no longer scrolls in its own clipped box — it's full
     height and the whole page scrolls instead, so the problem statement
     reads naturally instead of being crammed into a tiny window. */
  .desc-scroll { overflow-y: visible; max-height: none; }
  .split-pane.work-pane { flex: 0 0 auto !important; width: 100% !important; min-height: 70vh; }
  .v-resizer { display: none; }
  .problem-topbar { flex-wrap: wrap; height: auto; padding: 8px 12px; row-gap: 6px; }
  .editor-toolbar { flex-wrap: wrap; row-gap: 8px; }
  .editor-toolbar select { width: auto; flex: 1 1 120px; }
  .editor-toolbar #environment-select { width: auto; flex: 1 1 140px; }
}

/* ---------- Messages: single-pane on phones, back button to return
   to the conversation list ---------- */
@media (max-width: 720px) {
  .messages-shell { grid-template-columns: 1fr; }
  .conversation-list { display: block; }
  .chat-pane { display: none; }
  .messages-shell.chat-open .conversation-list { display: none; }
  .messages-shell.chat-open .chat-pane { display: flex; }
}
.chat-back-btn { display: none; background: transparent; border: none; color: var(--text); font-size: 20px; padding: 4px 10px 4px 0; cursor: pointer; }
@media (max-width: 720px) {
  .chat-back-btn { display: inline-flex; align-items: center; }
}

/* ---------- Meeting room: side panel stacks below the video grid ---------- */
@media (max-width: 720px) {
  .meeting-body { flex-direction: column; }
  .meeting-side { width: 100%; border-left: none; border-top: 1px solid var(--border); max-height: 45vh; }
  .video-grid { grid-template-columns: repeat(2, 1fr); }
  .spotlight-strip .video-tile { width: 110px; height: 64px; }
}

/* ---------- Mobile bottom tab bar (Instagram-style) ---------- */
.mobile-tabbar { display: none; }
@media (max-width: 720px) {
  :root { --tabbar-h: 54px; }
  .mobile-tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--bg-elevated); border-top: 1px solid var(--border);
  }
  .mobile-tabbar a {
    flex: 1; display: flex; align-items: center; justify-content: center; position: relative;
    color: var(--text-faint); text-decoration: none; -webkit-tap-highlight-color: transparent;
  }
  .mobile-tabbar a svg { width: 26px; height: 26px; }
  .mobile-tabbar a.active { color: var(--text); }
  .mobile-tabbar a.active svg { stroke-width: 2.5; }
  .mobile-tabbar a.active::after {
    content: ""; position: absolute; bottom: 5px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent);
  }
  .mobile-tabbar .tab-dot {
    position: absolute; top: 11px; left: calc(50% + 9px); width: 9px; height: 9px; border-radius: 50%;
    background: var(--danger, #e5484d); border: 2px solid var(--bg-elevated); box-sizing: content-box;
  }
  body.has-tabbar { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }
  /* Full-height chat shell must stop above the tab bar or its input row hides behind it. */
  .messages-shell { height: calc(100vh - 52px - var(--tabbar-h) - env(safe-area-inset-bottom, 0px)); }
  @supports (height: 100dvh) {
    .messages-shell { height: calc(100dvh - 52px - var(--tabbar-h) - env(safe-area-inset-bottom, 0px)); }
  }
  /* Floating widgets sit above the bar instead of under it. */
  body.has-tabbar #nova-launcher { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 14px); }
  body.has-tabbar #nova-panel { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 82px); }
  body.has-tabbar #nova-launcher.nova-raised { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 82px); }
  body.has-tabbar #nova-panel.nova-raised { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 150px); }
  body.has-tabbar #toast-container { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 12px) !important; }
}

@media (max-width: 720px) {
  .navbar nav a.nav-link.in-tabbar { display: none; }
  /* Same idea, for whichever of those got moved into the sidebar instead of
     staying in .navbar nav (see setupNavSidebar) — the bottom tab bar
     already covers them on phones, so they'd otherwise show up twice. */
  .nav-sidebar nav a.nav-link.in-tabbar { display: none; }
}

/* =====================================================================
   Design refresh v2 — overrides everything above.
   References: Instagram (large rounded inputs, solid blue CTAs, edge-to-edge
   posts on phones, gradient story rings), Linear (tight type, hairline
   borders, glass header, soft depth), Duolingo (chunky, friendly, generous
   touch targets). Tokens first, then components.
   ===================================================================== */
:root {
  --bg: #f6f7fb;
  --bg-elevated: #ffffff;
  --bg-panel: #f1f3f8;
  --bg-panel-2: #eceff5;
  --bg-hover: #e6e9f0;
  --border: #e6e8ef;
  --border-light: #d5d9e3;
  --text: #0f1219;
  --text-dim: #4b5262;
  --text-faint: #7b8394;
  --accent: #2b6cf6;
  --accent-dark: #1f56d6;
  --blue: #2b6cf6;
  --glass-bg: rgba(255, 255, 255, 0.78);
  --radius: 16px;
  --radius-sm: 12px;
  --shadow-sm: 0 1px 2px rgba(20, 28, 48, 0.05), 0 2px 8px rgba(20, 28, 48, 0.04);
  --shadow-md: 0 4px 12px rgba(20, 28, 48, 0.07), 0 16px 40px rgba(20, 28, 48, 0.08);
  --accent-gradient: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
  --story-gradient: linear-gradient(45deg, #f59e0b 0%, #ef4444 45%, #a855f7 100%);
}
:root[data-theme="dark"] {
  --bg: #0b0d12;
  --bg-elevated: #14171e;
  --bg-panel: #10131a;
  --bg-panel-2: #1a1e27;
  --bg-hover: #222733;
  --border: #232834;
  --border-light: #323948;
  --text: #f2f4f8;
  --text-dim: #aab1c0;
  --text-faint: #7d8597;
  --accent: #4d8dff;
  --accent-dark: #7aa9ff;
  --blue: #4d8dff;
  --glass-bg: rgba(15, 18, 25, 0.78);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.45);
  --accent-gradient: linear-gradient(135deg, #4d8dff 0%, #7c6cff 100%);
  --story-gradient: linear-gradient(45deg, #f59e0b 0%, #ef4444 45%, #a855f7 100%);
}

/* Accent colors — an independent choice layered on top of light/dark (see
   js/theme.js's data-accent attribute, separate from data-theme) rather than
   whole new from-scratch palettes. Deliberately doesn't touch --bg/--text/
   --border/etc: this file has a handful of dark-mode-specific special cases
   elsewhere ([data-theme="dark"] .tok-k/.tok-s/.tok-n for code syntax
   highlighting, .tr-board's chalkboard background) that a genuinely new,
   independently-named theme would silently miss (:root:not([data-theme=
   "light"]) .tr-board, for one, would treat any theme that isn't literally
   "light" as if it were dark). Only ever changing the accent hue — used
   throughout for buttons, links, focus rings, progress bars and glows —
   sidesteps all of that entirely, while still giving each choice a real,
   distinct identity across the whole app. Each has its own dark-mode
   variant (brighter/lighter, the same relationship dark already has to
   light for the default blue) rather than reusing the light one as-is. */
:root[data-accent="ocean"] {
  --accent: #0891b2; --accent-dark: #0e7490; --blue: #0891b2;
  --accent-gradient: linear-gradient(135deg, #06b6d4 0%, #0ea5e9 100%);
  --glow-accent: rgba(8, 145, 178, 0.06); --glow-blue: rgba(8, 145, 178, 0.06);
}
:root[data-theme="dark"][data-accent="ocean"] {
  --accent: #22d3ee; --accent-dark: #67e8f9; --blue: #22d3ee;
  --accent-gradient: linear-gradient(135deg, #22d3ee 0%, #38bdf8 100%);
  --glow-accent: rgba(34, 211, 238, 0.09); --glow-blue: rgba(34, 211, 238, 0.09);
}
:root[data-accent="sunset"] {
  --accent: #ea580c; --accent-dark: #c2410c; --blue: #ea580c;
  --accent-gradient: linear-gradient(135deg, #f97316 0%, #ec4899 100%);
  --glow-accent: rgba(234, 88, 12, 0.06); --glow-blue: rgba(234, 88, 12, 0.06);
}
:root[data-theme="dark"][data-accent="sunset"] {
  --accent: #fb923c; --accent-dark: #fdba74; --blue: #fb923c;
  --accent-gradient: linear-gradient(135deg, #fb923c 0%, #f472b6 100%);
  --glow-accent: rgba(251, 146, 60, 0.09); --glow-blue: rgba(251, 146, 60, 0.09);
}
:root[data-accent="forest"] {
  --accent: #16a34a; --accent-dark: #15803d; --blue: #16a34a;
  --accent-gradient: linear-gradient(135deg, #22c55e 0%, #84cc16 100%);
  --glow-accent: rgba(22, 163, 74, 0.06); --glow-blue: rgba(22, 163, 74, 0.06);
}
:root[data-theme="dark"][data-accent="forest"] {
  --accent: #4ade80; --accent-dark: #86efac; --blue: #4ade80;
  --accent-gradient: linear-gradient(135deg, #4ade80 0%, #a3e635 100%);
  --glow-accent: rgba(74, 222, 128, 0.09); --glow-blue: rgba(74, 222, 128, 0.09);
}
:root[data-accent="violet"] {
  --accent: #7c3aed; --accent-dark: #6d28d9; --blue: #7c3aed;
  --accent-gradient: linear-gradient(135deg, #8b5cf6 0%, #d946ef 100%);
  --glow-accent: rgba(124, 58, 237, 0.06); --glow-blue: rgba(124, 58, 237, 0.06);
}
:root[data-theme="dark"][data-accent="violet"] {
  --accent: #a78bfa; --accent-dark: #c4b5fd; --blue: #a78bfa;
  --accent-gradient: linear-gradient(135deg, #a78bfa 0%, #e879f9 100%);
  --glow-accent: rgba(167, 139, 250, 0.09); --glow-blue: rgba(167, 139, 250, 0.09);
}

body {
  background-image: none;
  line-height: 1.5;
  letter-spacing: -0.006em;
  font-feature-settings: "cv11", "ss01";
}
h1, h2, h3, h4 { letter-spacing: -0.02em; font-weight: 700; }
::selection { background: rgba(43, 108, 246, 0.22); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Header ---- */
.navbar {
  height: 56px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--border);
}
.navbar .brand { gap: 0; font-weight: 800; font-size: 18px; letter-spacing: -0.03em; }
.navbar .brand .logo-mark {
  margin-right: 9px; width: 30px; height: 30px; border-radius: 9px; font-size: 13px;
  background: var(--accent-gradient); color: #fff; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.35);
}
.navbar nav a.nav-link { border-radius: 999px; padding: 7px 14px; }
.navbar nav a.nav-link.active { background: var(--bg-panel-2); color: var(--text); font-weight: 600; }
.avatar, .avatar-circle {
  background: var(--accent-gradient); color: #fff; border: none;
}
.avatar-circle img, .avatar img { border-radius: 50%; }
.tier-chip.free { background: var(--bg-panel-2); border-color: transparent; }

/* ---- Surfaces ---- */
.card { border-radius: var(--radius); box-shadow: var(--shadow-sm); border-color: var(--border); }
.container { padding: 28px 24px 40px; }

/* ---- Forms ---- */
input, select, textarea {
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--bg-panel); border: 1px solid var(--border);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
input:focus, select:focus, textarea:focus {
  background: var(--bg-elevated); border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(43, 108, 246, 0.14);
}
::placeholder { color: var(--text-faint); }

/* ---- Buttons ---- */
button {
  background: var(--accent); color: #fff; border-radius: var(--radius-sm);
  padding: 11px 20px; font-weight: 600; letter-spacing: -0.005em;
  box-shadow: 0 1px 2px rgba(43, 108, 246, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition: background .15s, transform .08s, box-shadow .15s, opacity .15s;
}
button:hover { opacity: 1; background: var(--accent-dark); }
button:active { transform: scale(0.97); }
button.secondary, button.ghost {
  box-shadow: none; background: var(--bg-elevated); color: var(--text); border: 1px solid var(--border-light);
}
button.secondary:hover, button.ghost:hover { background: var(--bg-hover); }
button.ghost { color: var(--text-dim); }
button.danger { background: var(--danger); box-shadow: none; }
button.danger:hover { background: var(--danger); opacity: .88; }
button.accept { box-shadow: none; }
button.link-btn, .post-card-actions button, .tab-strip button, .profile-tabs button, .navbar-toggle {
  box-shadow: none;
}
button.link-btn { background: transparent; }
button.link-btn:hover { background: transparent; }
.google-btn {
  border-radius: 999px; padding: 12px 18px; box-shadow: var(--shadow-sm); border: 1px solid var(--border-light);
}
.google-btn:hover { background: #f5f6f9; }
.theme-toggle-btn, .notif-bell-btn { box-shadow: none; background: var(--bg-panel-2); color: var(--text); border: none; }
.theme-toggle-btn:hover, .notif-bell-btn:hover { background: var(--bg-hover); }

/* ---- Tabs ---- */
.tab-strip button, .profile-tabs button { font-weight: 600; }
.tab-strip button.active, .profile-tabs button.active { border-bottom-width: 3px; }

/* ---- Auth ---- */
.auth-shell {
  background:
    radial-gradient(600px 300px at 20% 0%, rgba(99, 102, 241, 0.16), transparent 70%),
    radial-gradient(600px 300px at 85% 10%, rgba(59, 130, 246, 0.16), transparent 70%);
}
.auth-card { border-radius: 24px; padding: 28px; box-shadow: var(--shadow-md); }
.auth-card input { padding: 14px 16px; }
.auth-card form button[type="submit"] { padding: 14px 20px; width: 100%; border-radius: 999px; }

/* ---- Feed: stories + posts ---- */
.story-bubble .ring { padding: 3px; background: var(--story-gradient); }
.story-bubble .ring.seen { background: var(--border-light); }
.story-bubble .ring > * { border: 3px solid var(--bg); }
.post-card { border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); }
.post-card-header .name { font-size: 15px; letter-spacing: -0.01em; }
.post-card-media { border-radius: var(--radius-sm); }
.post-card-actions { gap: 6px; margin: 12px -6px 4px; }
.post-card-actions button {
  padding: 8px 12px; border-radius: 999px; color: var(--text-dim);
}
.post-card-actions button:hover { background: var(--bg-panel-2); color: var(--text); }
.post-card-actions button.liked { color: #ef4444; }

/* ---- Bottom tab bar ---- */
@media (max-width: 720px) {
  .mobile-tabbar {
    background: var(--glass-bg);
    -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
    border-top: 1px solid var(--border);
  }
  .mobile-tabbar a.active::after { display: none; }
  .mobile-tabbar a.active svg {
    stroke-width: 2.3; color: var(--accent);
  }
  .mobile-tabbar a.active { color: var(--accent); }
  .mobile-tabbar a.active::before {
    content: ""; position: absolute; width: 52px; height: 34px; border-radius: 999px;
    background: rgba(43, 108, 246, 0.12);
  }
  .mobile-tabbar a svg { position: relative; }
  .container { padding: 16px 12px 28px; }
  /* Instagram-style: posts run edge to edge on phones. */
  .post-card {
    border-radius: 0; border-left: none; border-right: none; box-shadow: none;
    margin-left: -12px; margin-right: -12px; padding: 16px 16px 12px;
  }
  input, select, textarea { font-size: 16px; }
  button { min-height: 44px; }
  .navbar-toggle, .theme-toggle-btn, .notif-bell-btn, .avatar { min-height: 0; }
}

/* ---- Nova launcher ---- */
body #nova-launcher {
  background: var(--accent-gradient); color: #fff;
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.45);
}
body #nova-launcher.nova-active { background: var(--accent-gradient); filter: brightness(1.1); }

/* Desktop nav: tighter so ten links + the account cluster fit at laptop widths. */
.navbar nav { gap: 0; }
.navbar nav a.nav-link { padding: 6px 10px; display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; }
.navbar .left { gap: 18px; }
.navbar .right { gap: 10px; }
.nav-dot { position: static; margin: 0; flex-shrink: 0; }
@media (max-width: 1360px) { .navbar .right .hint { display: none; } }

/* =====================================================================
   Instagram-style posts, Explore grid, icon buttons
   ===================================================================== */
.ic { flex-shrink: 0; display: block; }
button.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 42px; height: 42px; min-height: 0; padding: 0; border-radius: 50%;
  background: transparent; color: var(--text); box-shadow: none; border: none;
}
button.icon-btn:hover { background: var(--bg-panel-2); }
button.icon-btn:active { transform: scale(0.88); }

.post-card { --post-pad: 18px; overflow: hidden; }
.post-card-header { margin-bottom: 10px; }
.post-card-who { flex: 1; min-width: 0; }
.post-author-link { color: inherit; text-decoration: none; }
.post-author-link:hover { text-decoration: none; }
.post-media-wrap {
  position: relative; margin: 0 calc(var(--post-pad) * -1) 4px; background: #000;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.post-media-wrap .post-card-media { display: block; border-radius: 0; margin: 0; max-height: 560px; width: 100%; }
.like-burst {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; opacity: 0; pointer-events: none; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.45));
}
.like-burst.show { animation: heart-burst 0.85s ease-out; }
@keyframes heart-burst {
  0% { opacity: 0; transform: scale(0.3); }
  18% { opacity: 1; transform: scale(1.25); }
  32% { transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.15) translateY(-14px); }
}
.post-card .post-card-actions {
  display: flex; align-items: center; gap: 0; margin: 4px -10px 0;
}
.post-card .post-card-actions .save-btn { margin-left: auto; }
.post-card-actions button.icon-btn { color: var(--text); padding: 0; }
.post-card-actions button.icon-btn.liked { color: #ef4444; }
.post-card-actions button.icon-btn.liked .ic { animation: like-pop 0.32s ease; }
@keyframes like-pop { 0% { transform: scale(0.7); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }
.post-likes { font-weight: 700; font-size: 14px; margin: 0 0 6px; }
.post-text { font-size: 16px; line-height: 1.55; margin: 2px 0 8px; white-space: pre-wrap; word-break: break-word; }
.post-caption { margin: 0 0 6px; font-size: 14.5px; line-height: 1.5; word-break: break-word; }
.post-caption-name { font-weight: 700; color: var(--text); margin-right: 4px; }
.post-caption-name:hover { text-decoration: none; }
button.post-view-comments {
  display: block; background: transparent; border: none; box-shadow: none; color: var(--text-faint);
  padding: 2px 0; min-height: 0; font-weight: 500; font-size: 13.5px; text-align: left;
}
button.post-view-comments:hover { background: transparent; color: var(--text-dim); }
.modal .post-card { border: none; box-shadow: none; padding: 0; margin: 0; --post-pad: 0px; }
.modal .post-media-wrap { margin: 0 0 4px; border-radius: var(--radius-sm); overflow: hidden; }

/* Explore + profile grids */
.explore-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin-top: 10px; }
.explore-cell, .post-grid-cell { position: relative; }
.explore-cell {
  display: block; aspect-ratio: 1; background: var(--bg-panel-2); overflow: hidden; border-radius: 6px;
}
.explore-cell img, .explore-cell video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.explore-cell:hover img, .explore-cell:hover video { transform: scale(1.05); }
.grid-badge { position: absolute; top: 8px; right: 8px; color: #fff; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6)); display: flex; }
.post-grid { gap: 3px; }
.post-grid-cell { border-radius: 6px; }
.post-grid-cell:hover img, .post-grid-cell:hover video { filter: brightness(0.9); }
.profile-tabs { justify-content: center; }
.profile-tabs button { display: inline-flex; align-items: center; gap: 7px; flex: 1; justify-content: center; max-width: 220px; }

@media (max-width: 720px) {
  .post-card { --post-pad: 16px; }
  .explore-grid { margin-left: -12px; margin-right: -12px; gap: 2px; }
  .explore-cell { border-radius: 0; }
}
.msg-like-btn { display: inline-flex; align-items: center; gap: 3px; box-shadow: none; min-height: 0; }
.pinned-row .pin-icon { display: inline-flex; align-items: center; }
.avatar-upload-btn { display: flex; align-items: center; justify-content: center; }
#modal-like-btn { display: inline-flex; align-items: center; gap: 6px; }
#modal-like-btn.liked { color: #ef4444; }
#cancel-reply-btn { width: 32px; height: 32px; }
.navbar-toggle { display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 720px) { .navbar-toggle { width: 38px; height: 38px; padding: 0; } }
.avatar-upload-btn { color: #fff; }

/* ---------- Action sheet / edit sheet ---------- */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 200; background: rgba(8, 10, 16, 0.5);
  display: flex; align-items: flex-end; justify-content: center;
  animation: sheet-fade .16s ease;
}
@keyframes sheet-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet {
  width: 100%; max-width: 440px; background: var(--bg-elevated); border-radius: 20px 20px 0 0;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); box-shadow: var(--shadow-md);
  animation: sheet-up .2s ease;
}
.sheet-item {
  display: flex; align-items: center; gap: 12px; width: 100%; justify-content: flex-start;
  background: transparent; color: var(--text); box-shadow: none; border-radius: 12px;
  padding: 15px 16px; font-size: 15.5px; font-weight: 500; min-height: 0;
}
.sheet-item:hover { background: var(--bg-panel-2); }
.sheet-item.danger { color: var(--danger); }
.sheet-cancel { justify-content: center; color: var(--text-dim); border-top: 1px solid var(--border); border-radius: 0 0 12px 12px; margin-top: 4px; }
.edit-sheet { padding: 18px; }
.edit-sheet h3 { margin: 0 0 12px; }
.edit-sheet textarea { margin-bottom: 12px; resize: vertical; }
.edit-sheet-actions { display: flex; justify-content: flex-end; gap: 8px; }
@media (min-width: 721px) {
  .sheet-backdrop { align-items: center; }
  .sheet { border-radius: 20px; padding: 10px; }
}

/* ---------- Comments ---------- */
.comments-section { margin-top: 8px; }
.comment { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; }
.comment-reply { margin-left: 38px; }
.comment-body { flex: 1; min-width: 0; font-size: 14px; line-height: 1.45; word-break: break-word; }
.comment-user { font-weight: 700; color: var(--text); margin-right: 4px; }
.comment-user:hover { text-decoration: none; }
.comment-meta { display: flex; gap: 12px; align-items: center; color: var(--text-faint); font-size: 12px; margin-top: 3px; }
.comment-meta button {
  background: transparent; box-shadow: none; padding: 0; min-height: 0; color: var(--text-faint);
  font-size: 12px; font-weight: 700; border-radius: 0;
}
.comment-meta button:hover { background: transparent; color: var(--text); }
.comment-meta .cmt-delete:hover { color: var(--danger); }
button.icon-btn.cmt-like { width: 30px; height: 30px; color: var(--text-faint); flex-shrink: 0; }
button.icon-btn.cmt-like.liked { color: #ef4444; }
.reply-chip {
  align-items: center; justify-content: space-between; margin-top: 8px; padding: 6px 6px 6px 12px;
  background: var(--bg-panel-2); border-radius: 999px; font-size: 13px; color: var(--text-dim);
}
.reply-chip button.icon-btn { width: 26px; height: 26px; }
a.hashtag { color: var(--accent); font-weight: 500; }

/* ---------- Tag page ---------- */
#tag-title { font-size: 22px; margin: 6px 0 0; }

/* =====================================================================
   Carousel posts, composer strip, send-to-chat, story footer, Reels
   ===================================================================== */
.carousel {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel-slide { flex: 0 0 100%; scroll-snap-align: center; display: flex; align-items: center; justify-content: center; background: #000; }
.carousel-count {
  position: absolute; top: 10px; right: 10px; background: rgba(0, 0, 0, 0.6); color: #fff;
  font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; pointer-events: none;
}
.carousel-dots { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.carousel-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); transition: background .15s, transform .15s; }
.carousel-dots i.on { background: #fff; transform: scale(1.25); }

.preview-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.preview-item { position: relative; flex: 0 0 auto; }
.preview-item img, .preview-item video { height: 110px; width: auto; max-width: 180px; object-fit: cover; border-radius: var(--radius-sm); display: block; }
.preview-item .remove-preview { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; background: rgba(0, 0, 0, 0.65); color: #fff; }
.preview-item .remove-preview:hover { background: rgba(0, 0, 0, 0.85); }

.send-sheet { padding: 14px 8px 8px; }
.send-sheet h3 { margin: 0 0 6px 12px; }
.send-list { max-height: 50vh; overflow-y: auto; }
.send-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; }
.send-name { flex: 1; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.send-btn { padding: 7px 18px; min-height: 0; border-radius: 999px; }

.story-viewer-footer { padding: 10px 12px 14px; display: flex; align-items: center; gap: 6px; }
.story-viewer-footer input {
  flex: 1; margin: 0; background: rgba(255, 255, 255, 0.12); color: #fff; border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px; padding: 11px 16px;
}
.story-viewer-footer input::placeholder { color: rgba(255, 255, 255, 0.7); }
.story-viewer-footer input:focus { background: rgba(255, 255, 255, 0.18); box-shadow: none; border-color: #fff; }
.story-viewer-footer button.icon-btn { color: #fff; width: 44px; height: 44px; }
.story-viewer-footer button.icon-btn:hover { background: rgba(255, 255, 255, 0.15); }
.story-viewer-footer button.sv-heart.liked { color: #ef4444; }
.sv-seen { background: transparent; color: #fff; box-shadow: none; display: inline-flex; align-items: center; gap: 8px; padding: 8px 4px; min-height: 0; font-weight: 600; }
.sv-seen:hover { background: transparent; opacity: .85; }

/* ---- Reels ---- */
.reels-viewport {
  height: calc(100vh - 56px); overflow-y: scroll; scroll-snap-type: y mandatory; background: #000;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
@supports (height: 100dvh) { .reels-viewport { height: calc(100dvh - 56px); } }
.reels-viewport::-webkit-scrollbar { display: none; }
.reel {
  position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always;
  display: flex; align-items: center; justify-content: center; background: #000; overflow: hidden;
}
.reel video { width: 100%; height: 100%; object-fit: contain; max-width: 520px; }
.reel-shade { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(transparent, rgba(0, 0, 0, 0.65)); pointer-events: none; }
.reel-info { position: absolute; left: 14px; right: 84px; bottom: 18px; color: #fff; }
.reel-author { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; text-decoration: none; }
.reel-author:hover { text-decoration: none; }
.reel-caption { margin: 8px 0 0; font-size: 14px; line-height: 1.45; max-height: 4.4em; overflow: hidden; word-break: break-word; }
.reel-caption a { color: #fff; font-weight: 700; }
.reel-rail { position: absolute; right: 8px; bottom: 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.reel-rail .icon-btn, .reel-sound {
  flex-direction: column; width: 54px; height: auto; min-height: 0; padding: 6px 0; border-radius: 14px;
  color: #fff; background: transparent; text-decoration: none; font-size: 12px; font-weight: 600; gap: 2px;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
}
.reel-rail .icon-btn:hover { background: rgba(255, 255, 255, 0.12); }
.reel-rail .icon-btn.liked { color: #ef4444; }
.reel-sound { position: absolute; top: 12px; right: 10px; width: 40px; height: 40px; padding: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.45); }
.reels-empty { height: 100%; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; display: flex; }
.reels-empty .hint { color: rgba(255, 255, 255, 0.7); margin-bottom: 12px; }

@media (max-width: 720px) {
  .reels-viewport { height: calc(100vh - 56px - var(--tabbar-h) - env(safe-area-inset-bottom, 0px)); }
  @supports (height: 100dvh) {
    .reels-viewport { height: calc(100dvh - 56px - var(--tabbar-h) - env(safe-area-inset-bottom, 0px)); }
  }
  body.reels-page #nova-launcher { display: none; }
}

/* ---------- Small-phone fit: the top bar must never be wider than the screen ---------- */
html, body { overflow-x: clip; max-width: 100%; }
@media (max-width: 480px) {
  .navbar { padding: 0 10px; }
  .navbar .left { gap: 6px; min-width: 0; }
  .navbar .right { gap: 6px; }
  .navbar .brand { font-size: 16px; }
  .navbar .brand .logo-mark { margin-right: 7px; }
  .navbar .tier-chip { display: none; }
}
@media (max-width: 350px) {
  /* Very narrow screens: keep just the logo mark, the wordmark is what overflows. */
  .navbar .brand { font-size: 0; }
  .navbar .brand .logo-mark { font-size: 13px; margin-right: 0; }
}

/* =====================================================================
   Stories v2: seen rings, viewer, text/poll stickers, editor
   ===================================================================== */
.sbg-sunset { background: linear-gradient(160deg, #f6d365 0%, #fda085 45%, #f5576c 100%); }
.sbg-ocean  { background: linear-gradient(160deg, #2193b0 0%, #6dd5ed 50%, #3a7bd5 100%); }
.sbg-forest { background: linear-gradient(160deg, #134e5e 0%, #71b280 100%); }
.sbg-grape  { background: linear-gradient(160deg, #7b4397 0%, #dc2430 100%); }
.sbg-ember  { background: linear-gradient(160deg, #f12711 0%, #f5af19 100%); }
.sbg-night  { background: linear-gradient(160deg, #0f2027 0%, #203a43 50%, #2c5364 100%); }
.sbg-mint   { background: linear-gradient(160deg, #11998e 0%, #38ef7d 100%); }
.sbg-candy  { background: linear-gradient(160deg, #ff9a9e 0%, #fad0c4 45%, #a18cd1 100%); }

/* Story bar */
.story-bubble .ring { background: var(--story-gradient); padding: 3px; }
.story-bubble .ring.seen { background: var(--border-light); }
.story-bubble.own-story { position: relative; }
.story-bubble .plus-badge {
  position: absolute; top: 48px; right: 4px; width: 22px; height: 22px; min-height: 0; padding: 0; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 15px; font-weight: 800; line-height: 1; box-shadow: none;
  display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg);
}

/* Viewer */
.story-viewer-backdrop { z-index: 150; background: #050506; }
.story-viewer { max-width: 440px; max-height: 100dvh; gap: 0; }
.story-viewer-header { padding: 0 10px 8px; gap: 8px; }
.story-viewer-header strong { font-size: 14px; }
.story-time { color: rgba(255, 255, 255, 0.7); font-size: 12px; }
.sv-spacer { flex: 1; }
button.icon-btn.sv-tool { color: #fff; width: 38px; height: 38px; }
button.icon-btn.sv-tool:hover { background: rgba(255, 255, 255, 0.15); }
.story-stage {
  position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: 14px; background-color: #111;
  display: flex; align-items: center; justify-content: center; touch-action: none; -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
.story-stage > img, .story-stage > video { max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.story-text {
  position: absolute; left: 6%; right: 6%; transform: translateY(-50%); text-align: center; font-weight: 700;
  line-height: 1.25; word-break: break-word; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45); pointer-events: none;
}
.story-text.se-draggable { pointer-events: auto; cursor: grab; touch-action: none; }
.story-text.font-sans { font-family: 'Inter', sans-serif; }
.story-text.font-serif { font-family: Georgia, 'Times New Roman', serif; }
.story-text.font-mono { font-family: 'JetBrains Mono', monospace; font-weight: 600; }
.story-text.font-hand { font-family: 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive; font-weight: 600; }
.story-text.font-bold { font-family: 'Inter', sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: 0.02em; }
.story-viewer-caption { padding: 8px 14px 0; font-size: 14px; }
.story-viewer-footer { flex-wrap: wrap; align-items: center; padding: 10px 6px 12px; }
.sv-reactions { flex: 1 0 100%; display: flex; justify-content: space-around; margin-bottom: 6px; }
button.sv-react { background: transparent; box-shadow: none; min-height: 0; padding: 2px 6px; font-size: 26px; line-height: 1; transition: transform .12s; }
button.sv-react:hover { background: transparent; transform: scale(1.25); }
.sv-reply-row { flex: 1 0 100%; display: flex; align-items: center; gap: 6px; }
.sv-likes { margin-left: auto; color: #fff; display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: 14px; }
.sv-likes .ic { color: #ef4444; }
.sv-float { position: absolute; left: 50%; bottom: 14%; font-size: 64px; transform: translateX(-50%); animation: sv-float 1.1s ease-out forwards; pointer-events: none; }
@keyframes sv-float { 0% { opacity: 0; transform: translate(-50%, 20px) scale(.5); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -160px) scale(1.4); } }

/* Poll sticker */
.story-poll {
  position: absolute; left: 8%; right: 8%; bottom: 12%; background: rgba(255, 255, 255, 0.96); color: #111;
  border-radius: 18px; padding: 12px 12px 10px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35); text-shadow: none;
}
.poll-q { text-align: center; font-weight: 800; font-size: 15px; margin-bottom: 10px; word-break: break-word; }
.poll-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.poll-opt {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 6px;
  min-height: 40px; padding: 8px 12px; border-radius: 12px; background: #eef0f5; color: #111; font-weight: 700; font-size: 14px;
  border: none; box-shadow: none; text-align: center; justify-content: center; word-break: break-word;
}
button.poll-opt:hover { background: #e2e6ef; }
.poll-opt.result { justify-content: space-between; z-index: 0; }
.poll-opt.result::before { content: ""; position: absolute; inset: 0; width: var(--pct); background: rgba(43, 108, 246, 0.28); z-index: -1; }
.poll-opt.result.mine { outline: 2px solid var(--accent); }
.poll-total { text-align: center; font-size: 11.5px; color: #666; margin-top: 8px; }

/* Own-story menu targets, highlight thumbs */
.story-thumb-text { width: 100%; height: 100%; }
.hl-thumb { display: block; width: 60px; height: 60px; border-radius: 8px; overflow: hidden; background: var(--bg-panel-2); }
.hl-thumb img, .hl-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Editor */
.se-backdrop { position: fixed; inset: 0; z-index: 150; background: #050506; display: flex; align-items: center; justify-content: center; }
.se-panel { width: 100%; max-width: 440px; height: 100%; max-height: 100dvh; display: flex; flex-direction: column; color: #fff; }
.se-top { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; }
.se-title { font-weight: 700; font-size: 15px; }
button.icon-btn.se-x { color: #fff; }
.se-stage { margin: 0 8px; }
.se-tools { display: flex; gap: 8px; justify-content: center; padding: 10px 8px 6px; flex-wrap: wrap; }
button.se-tool {
  display: inline-flex; align-items: center; gap: 6px; min-height: 0; padding: 8px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.12); color: #fff; box-shadow: none; font-size: 13.5px;
}
button.se-tool:hover { background: rgba(255, 255, 255, 0.2); }
button.se-tool.on { background: #fff; color: #111; }
.se-panel-body { padding: 4px 12px 0; max-height: 200px; overflow-y: auto; }
.se-panel-body textarea, .se-panel-body input[type="text"] {
  background: rgba(255, 255, 255, 0.12); color: #fff; border: 1px solid rgba(255, 255, 255, 0.3); margin-bottom: 8px;
}
.se-panel-body textarea::placeholder, .se-panel-body input::placeholder { color: rgba(255, 255, 255, 0.6); }
.se-panel-body textarea:focus, .se-panel-body input:focus { background: rgba(255, 255, 255, 0.18); border-color: #fff; box-shadow: none; }
.se-poll-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.se-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; align-items: center; }
button.se-chip { min-height: 0; width: 42px; height: 34px; padding: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.12); color: #fff; box-shadow: none; font-size: 17px; }
button.se-chip.on { background: #fff; color: #111; }
button.se-swatch { min-height: 0; width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.5); box-shadow: none; }
button.se-swatch.on { border-color: #fff; transform: scale(1.18); }
button.se-bg { min-height: 0; width: 38px; height: 38px; padding: 0; border-radius: 12px; border: 2px solid transparent; box-shadow: none; }
button.se-bg.on { border-color: #fff; transform: scale(1.1); }
.se-size { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(255, 255, 255, 0.8); margin: 0; }
.se-size input { margin: 0; flex: 1; padding: 0; background: transparent; border: none; }
.se-hint { color: rgba(255, 255, 255, 0.65); margin: 6px 0 0; text-align: center; }
.se-footer { padding: 10px 12px calc(14px + env(safe-area-inset-bottom, 0px)); }
.se-footer button { width: 100%; border-radius: 999px; padding: 14px; font-size: 15px; }

/* =====================================================================
   Chat v2 (Instagram-style DMs). Scoped to the chat page so the meeting
   room's side chat keeps its own look.
   ===================================================================== */
.messages-shell { min-width: 0; }
.messages-shell .chat-pane { min-width: 0; overflow: hidden; }

/* -- conversation list -- */
.conv-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 4px; }
.conv-head h2 { margin: 0; font-size: 22px; }
.conv-search {
  display: flex; align-items: center; gap: 8px; margin: 8px 12px 10px; padding: 0 12px; border-radius: 12px;
  background: var(--bg-panel-2); color: var(--text-faint);
}
.conv-search input { margin: 0; border: none; background: transparent; padding: 11px 0; box-shadow: none; }
.conv-search input:focus { background: transparent; box-shadow: none; }
.conversation-row { padding: 10px 16px; border-bottom: none; }
.conversation-row.active::before { display: none; }
.conversation-row.active { background: var(--bg-panel-2); }
.conv-avatar { position: relative; flex-shrink: 0; }
.online-dot {
  position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; border-radius: 50%;
  background: #34c759; border: 2px solid var(--bg-elevated);
}
.conversation-row .preview { display: flex; gap: 5px; color: var(--text-dim); }
.conversation-row .preview-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.conversation-row .preview-ago { flex-shrink: 0; }
.conversation-row.has-unread .preview-text { color: var(--text); font-weight: 700; }
.unread-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

/* -- header -- */
.chat-pane .chat-header { padding: 8px 12px; gap: 6px; }
.chat-pane .chat-header .chat-back-btn { display: none; }
.chat-who { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.chat-who:hover { text-decoration: none; }
.chat-who-avatar { position: relative; flex-shrink: 0; }
.chat-who-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.chat-who-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-who-text .online-status { font-size: 12px; color: var(--text-dim); }
.chat-who-text .online-status.is-online { color: #34c759; }
a.icon-btn.chat-info-btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; color: var(--text); border-radius: 50%; }
a.icon-btn.chat-info-btn:hover { background: var(--bg-panel-2); text-decoration: none; }

/* -- message area -- */
.chat-pane .chat-messages { padding: 12px 12px 8px; gap: 0; overflow-x: hidden; overflow-y: auto; }
.chat-pane .chat-bubble-row { display: block; margin-top: 12px; animation: bubble-pop-in 0.16s ease; }
.chat-pane .chat-bubble-row.pos-mid, .chat-pane .chat-bubble-row.pos-last { margin-top: 2px; }
.chat-pane .chat-bubble-row.mine { justify-content: initial; }
.bubble-line { display: flex; align-items: flex-end; gap: 8px; position: relative; transition: transform .12s ease; }
.chat-bubble-row.mine .bubble-line { justify-content: flex-end; }
.bubble-avatar { width: 28px; flex: 0 0 28px; }
.bubble-avatar .avatar-circle { width: 28px; height: 28px; font-size: 11px; }
.bubble-col { display: flex; flex-direction: column; min-width: 0; max-width: min(78%, 480px); position: relative; }
.chat-bubble-row.mine .bubble-col { align-items: flex-end; }
.chat-bubble-row.mine .bubble-actions { order: -1; }

.chat-pane .chat-bubble {
  max-width: 100%; min-width: 0; padding: 9px 14px; border-radius: 22px; box-shadow: none;
  font-size: 15px; line-height: 1.4;
  overflow-wrap: anywhere; word-break: break-word; /* long pasted links must wrap, never widen the chat */
}
.chat-pane .chat-bubble-row.theirs .chat-bubble { background: var(--chat-received-bg); color: var(--chat-received-text); }
.chat-pane .chat-bubble-row.mine .chat-bubble {
  background: linear-gradient(160deg, #4f8cff 0%, #7b5cff 100%); color: #fff;
}
.chat-pane .chat-bubble-row.mine.pos-first .chat-bubble { border-bottom-right-radius: 6px; }
.chat-pane .chat-bubble-row.mine.pos-mid .chat-bubble { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
.chat-pane .chat-bubble-row.mine.pos-last .chat-bubble { border-top-right-radius: 6px; }
.chat-pane .chat-bubble-row.theirs.pos-first .chat-bubble { border-bottom-left-radius: 6px; }
.chat-pane .chat-bubble-row.theirs.pos-mid .chat-bubble { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.chat-pane .chat-bubble-row.theirs.pos-last .chat-bubble { border-top-left-radius: 6px; }
.chat-pane .chat-bubble a { color: var(--accent); text-decoration: underline; overflow-wrap: anywhere; word-break: break-all; }
.chat-pane .chat-bubble-row.mine .chat-bubble a { color: #fff; }
.chat-pane .chat-bubble img, .chat-pane .chat-bubble video {
  display: block; max-width: 100%; width: auto; height: auto; max-height: 320px; margin: 8px 0 0; border-radius: 16px; object-fit: cover;
}
.chat-pane .chat-bubble > img:first-child, .chat-pane .chat-bubble > video:first-child { margin-top: 0; }
.chat-pane .chat-bubble.media-only { padding: 0; background: transparent !important; overflow: hidden; }
.chat-pane .chat-bubble.media-only img, .chat-pane .chat-bubble.media-only video { margin: 0; max-width: min(260px, 100%); }
.chat-pane .chat-bubble.deleted-bubble { background: transparent !important; border: 1px dashed var(--border-light); color: var(--text-faint); font-style: italic; }
.chat-pane .chat-bubble.has-card { padding: 6px; }
.chat-pane .chat-bubble.sending { opacity: .7; }

/* shared post card inside a message */
.chat-pane a.chat-post-card {
  display: block; width: min(250px, 100%); background: var(--bg-elevated); color: var(--text); text-decoration: none;
  border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
}
.chat-pane .chat-bubble-row.mine a.chat-post-card { color: var(--text); }
.pc-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-weight: 700; font-size: 13.5px; }
.pc-head .avatar-circle { width: 24px; height: 24px; font-size: 10px; }
.pc-media { background: #000; }
.chat-pane .pc-media img, .chat-pane .pc-media video { width: 100%; height: auto; max-height: 260px; margin: 0; border-radius: 0; aspect-ratio: 1; object-fit: cover; }
.pc-caption { padding: 8px 10px 10px; font-size: 13px; color: var(--text-dim); line-height: 1.35; overflow-wrap: anywhere; }
.pc-loading { display: block; padding: 18px 14px; font-size: 13px; color: var(--text-faint); }
.story-reply-label { font-size: 11.5px; opacity: .75; margin-bottom: 3px; font-weight: 600; }

/* labels, quotes, reactions */
.bubble-flags { display: flex; gap: 8px; align-items: center; font-size: 11px; color: var(--text-faint); margin: 0 4px 2px; }
.bubble-flags .ic { display: inline-block; vertical-align: -2px; }
.chat-pane .bubble-col .msg-quote {
  max-width: 100%; margin: 0 0 -8px; padding: 7px 12px 14px; border-radius: 16px; background: var(--bg-panel-2); color: var(--text-dim);
  border: none; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
}
.chat-pane .bubble-col .msg-quote .quote-sender { display: block; font-weight: 700; font-size: 11.5px; color: var(--text); }
button.react-badge {
  align-self: flex-start; margin: -9px 0 0 12px; position: relative; z-index: 1; min-height: 0; padding: 2px 7px;
  display: inline-flex; align-items: center; gap: 3px; border-radius: 999px; color: #ef4444;
  background: var(--bg-elevated); border: 1px solid var(--border); box-shadow: var(--shadow-sm); font-size: 12px;
}
.chat-bubble-row.mine button.react-badge { align-self: flex-end; margin: -9px 12px 0 0; }
button.react-badge:hover { background: var(--bg-elevated); }
button.react-badge b { color: var(--text-dim); font-weight: 600; }
.seen-label { text-align: right; font-size: 11.5px; color: var(--text-faint); margin: 3px 6px 0; }
.chat-sep { text-align: center; font-size: 11.5px; font-weight: 500; color: var(--text-faint); margin: 10px 0 8px; }
.chat-bubble-row.system-row { margin-top: 6px; }
.chat-system { text-align: center; color: var(--text-faint); font-size: 12.5px; padding: 6px 8px; }
.sys-emoji { font-size: 20px; margin-right: 6px; vertical-align: -2px; }

/* hover actions (desktop only) and swipe-to-reply hint (touch) */
.bubble-actions { display: flex; gap: 0; align-self: center; opacity: 0; pointer-events: none; transition: opacity .12s; }
.chat-bubble-row:hover .bubble-actions { opacity: 1; pointer-events: auto; }
.bubble-actions button.icon-btn { width: 30px; height: 30px; color: var(--text-faint); }
.bubble-actions button.icon-btn:hover { background: var(--bg-panel-2); color: var(--text); }
@media (hover: none) { .bubble-actions { display: none; } }
.bubble-line.swipe-armed::before {
  content: ""; position: absolute; left: -34px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%;
  background: var(--accent); opacity: .9;
}

/* empty thread */
.chat-empty { margin: auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px; }

/* -- composer -- */
.chat-pane .chat-input-row { display: block; position: relative; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
.chat-composer { display: flex; align-items: center; gap: 2px; background: var(--bg-panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px 6px; }
.chat-composer:focus-within { border-color: var(--accent); }
.chat-pane .chat-input-row .chat-composer input[type=text] {
  flex: 1; min-width: 0; margin: 0; padding: 10px 6px; border: none; border-radius: 0; background: transparent; box-shadow: none; font-size: 16px;
}
.chat-pane .chat-input-row .chat-composer input[type=text]:focus { background: transparent; box-shadow: none; border: none; }
.chat-pane .chat-input-row .chat-attach-btn { width: 42px; height: 42px; background: transparent; border: none; color: var(--text); cursor: pointer; }
.chat-pane .chat-input-row .chat-attach-btn:hover { background: var(--bg-hover); }
button.chat-send {
  min-height: 0; padding: 8px 12px; border-radius: 999px; background: transparent; color: var(--accent); box-shadow: none; font-weight: 700; font-size: 15px;
}
button.chat-send:hover { background: transparent; opacity: .8; }
button.chat-send[data-mode="heart"] { color: var(--text); padding: 8px 10px; }
.emoji-panel {
  position: absolute; left: 12px; right: 12px; bottom: calc(100% - 4px); z-index: 5; display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 2px;
  padding: 8px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-md); max-height: 200px; overflow-y: auto;
}
button.emoji-key { min-height: 0; padding: 4px; font-size: 24px; background: transparent; box-shadow: none; border-radius: 10px; line-height: 1.2; }
button.emoji-key:hover { background: var(--bg-panel-2); }
.chat-pane .chat-attach-preview { max-width: 100%; overflow: hidden; }

@media (max-width: 720px) {
  .chat-pane .chat-header .chat-back-btn { display: inline-flex; }
  .chat-pane .chat-messages { padding: 10px 10px 6px; }
  .bubble-col { max-width: 82%; }
}
.chat-pane .chat-bubble.has-card { padding: 0; background: transparent !important; }
.chat-pane .chat-bubble.has-card > div:not(.chat-post-card) { padding: 8px 12px; border-radius: 18px; margin-bottom: 4px; }
.chat-pane .chat-bubble-row.theirs .chat-bubble.has-card > div:not(.chat-post-card) { background: var(--chat-received-bg); color: var(--chat-received-text); }
.chat-pane .chat-bubble-row.mine .chat-bubble.has-card > div:not(.chat-post-card) { background: linear-gradient(160deg, #4f8cff 0%, #7b5cff 100%); color: #fff; }

/* ---------- Reels: burst + comments sheet ---------- */
.reel-burst {
  position: absolute; left: 50%; top: 50%; margin: -48px 0 0 -48px; color: #fff; opacity: 0; pointer-events: none;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.5));
}
.reel-burst.show { animation: heart-burst 0.85s ease-out; }
.reel-rail button.icon-btn, .reel-rail .icon-btn { border: none; }
.comments-sheet { max-width: 520px; padding: 0; display: flex; flex-direction: column; max-height: 78dvh; max-height: 78vh; }
@supports (height: 100dvh) { .comments-sheet { max-height: 78dvh; } }
.comments-sheet-head { display: flex; align-items: center; justify-content: center; position: relative; padding: 14px 12px 10px; border-bottom: 1px solid var(--border); }
.comments-sheet-head .grabber { position: absolute; top: 6px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 2px; background: var(--border-light); }
.comments-sheet-head button.icon-btn { position: absolute; right: 8px; top: 8px; }
.comments-sheet .comments-section { margin: 0; padding: 4px 14px 14px; overflow-y: auto; display: flex; flex-direction: column; min-height: 0; flex: 1; }
.comments-sheet .comments-list { flex: 1; overflow-y: auto; min-height: 120px; }
.comments-sheet .comment-input-row { position: sticky; bottom: 0; background: var(--bg-elevated); padding-top: 8px; }
.comments-empty { text-align: center; padding: 40px 12px; }

/* ---------- Safety UI ---------- */
.sheet-title { padding: 12px 16px 6px; font-weight: 700; font-size: 14px; color: var(--text-dim); text-align: center; }
.comment-meta .cmt-report:hover { color: var(--danger); }
.private-notice { text-align: center; padding: 36px 20px; }
.private-notice .lock { display: inline-flex; width: 64px; height: 64px; border-radius: 50%; align-items: center; justify-content: center; border: 2px solid var(--text); margin-bottom: 10px; }
.privacy-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.privacy-row .desc { flex: 1; min-width: 0; }
.privacy-row .desc b { display: block; }
.switch { position: relative; width: 48px; height: 28px; flex-shrink: 0; }
.switch input { opacity: 0; width: 100%; height: 100%; margin: 0; position: absolute; cursor: pointer; z-index: 1; }
.switch i { position: absolute; inset: 0; border-radius: 999px; background: var(--border-light); transition: background .15s; }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.switch input:checked + i { background: var(--accent); }
.switch input:checked + i::after { transform: translateX(20px); }
.safety-person { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.safety-person .name { flex: 1; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-row { display: flex; gap: 14px; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.report-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; overflow-wrap: anywhere; }
.report-actions { display: flex; gap: 8px; }
a.mention { color: var(--accent); font-weight: 600; }
.mention-menu {
  position: fixed; z-index: 250; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-md); padding: 4px; max-height: 260px; overflow-y: auto;
}
.mention-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.mention-item.on, .mention-item:hover { background: var(--bg-panel-2); }
.mention-item .mi-user { font-weight: 700; }
.mention-item .mi-name { color: var(--text-faint); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* =====================================================================
   Chat v3: groups, typing, voice messages, meeting cards
   ===================================================================== */
.avatar-circle.group-avatar { background: linear-gradient(135deg, #7b5cff 0%, #3b82f6 100%); color: #fff; display: flex; align-items: center; justify-content: center; }
.study-tag { display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 1px 7px; border-radius: 999px; background: rgba(43,108,246,.14); color: var(--accent); vertical-align: 1px; margin-left: 4px; }
.chat-who.as-button { background: transparent; border: none; box-shadow: none; padding: 0; text-align: left; min-height: 0; color: var(--text); cursor: pointer; }
.chat-who.as-button:hover { background: transparent; }
.chat-who-text .online-status.typing { color: var(--accent); font-weight: 600; }
.sender-name { font-weight: 700; color: var(--text-dim); }
.new-group-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin: 0 6px; border-radius: 14px; cursor: pointer; }
.new-group-row:hover { background: var(--bg-panel-2); }
.new-group-row .ng-icon { width: 42px; height: 42px; border-radius: 50%; background: var(--bg-panel-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.new-group-row small { display: block; color: var(--text-faint); font-size: 12.5px; }
label.pick-check { cursor: pointer; }
label.pick-check input { width: 20px; height: 20px; margin: 0; flex-shrink: 0; }
.group-info-head { display: flex; align-items: center; gap: 14px; margin: 14px 0; }
.group-info-head .gi-name { font-size: 18px; }
.gi-actions { display: flex; gap: 8px; flex-wrap: wrap; }
button.danger-text { color: var(--danger); }

/* typing dots */
.chat-pane .chat-bubble.typing-bubble { display: inline-flex; gap: 4px; align-items: center; padding: 14px 16px; }
.typing-bubble i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); animation: typing-bounce 1.2s infinite ease-in-out; }
.typing-bubble i:nth-child(2) { animation-delay: .15s; }
.typing-bubble i:nth-child(3) { animation-delay: .3s; }
@keyframes typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }

/* voice */
.rec-bar { display: flex; align-items: center; gap: 10px; background: var(--bg-panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 4px 6px; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; animation: rec-pulse 1s infinite; }
@keyframes rec-pulse { 50% { opacity: .3; } }
.rec-bar .hint { flex: 1; }
#rec-time { font-variant-numeric: tabular-nums; font-weight: 600; }
.voice-msg { display: flex; align-items: center; gap: 8px; min-width: 200px; }
.voice-msg audio { height: 36px; max-width: 230px; width: 100%; }
.chat-pane .chat-bubble-row.mine .voice-msg .ic { color: #fff; }

/* meeting card */
.meeting-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 6px auto; max-width: min(360px, 92%); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-sm); }
.meeting-card .mc-icon { width: 42px; height: 42px; border-radius: 12px; background: var(--accent-gradient); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.meeting-card .mc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.meeting-card small { color: var(--text-faint); }
.meeting-card .mc-join button { min-height: 0; padding: 8px 16px; border-radius: 999px; }

/* ---------- Stories: close friends + sticker cards ---------- */
.story-bubble .ring.close { background: linear-gradient(135deg, #22c55e, #16a34a); }
.story-bubble .ring.close.seen { background: var(--border-light); }
.cf-pill { display: inline-flex; align-items: center; gap: 4px; background: #16a34a; color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.cf-star { color: #16a34a; display: inline-flex; vertical-align: -3px; }
.story-sticker {
  position: absolute; left: 8%; right: 8%; bottom: 12%; background: rgba(255, 255, 255, 0.96); color: #111; border-radius: 18px;
  padding: 12px 14px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35); text-shadow: none;
}
.ss-q { text-align: center; font-weight: 800; font-size: 15px; margin-bottom: 10px; word-break: break-word; }
.ss-track { position: relative; height: 34px; --v: 50%; }
.ss-track input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 12px; margin: 11px 0; padding: 0; border: none; border-radius: 999px;
  background: linear-gradient(90deg, #f59e0b 0, #ef4444 var(--v), #e5e7eb var(--v)); box-shadow: none; cursor: pointer;
}
.ss-track input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 34px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.ss-track input[type="range"]::-moz-range-thumb { width: 34px; height: 34px; border-radius: 50%; background: #fff; border: none; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.ss-track input[type="range"]:disabled { cursor: default; opacity: .9; }
.ss-emoji { position: absolute; top: 3px; left: calc(var(--v) - 15px); font-size: 26px; line-height: 1; pointer-events: none; transform: translateX(calc((50% - var(--v)) * 0.16)); }
.ss-result { text-align: center; font-size: 12px; color: #555; margin-top: 6px; }
.ss-result.hint-light { color: #888; }
.ss-ask { display: flex; gap: 6px; }
.ss-ask input { flex: 1; margin: 0; background: #eef0f5; color: #111; border: none; padding: 10px 12px; }
.ss-ask button { min-height: 0; padding: 8px 14px; border-radius: 12px; }
.ss-input-fake { background: #eef0f5; color: #888; border-radius: 12px; padding: 11px 12px; font-size: 14px; }
button.ss-answers { display: block; margin: 0 auto; background: #eef0f5; color: #111; box-shadow: none; border-radius: 999px; padding: 8px 16px; min-height: 0; font-weight: 700; }
button.ss-answers:hover { background: #e2e6ef; }
.se-audience { display: flex; gap: 6px; margin-bottom: 8px; }
.se-audience button { flex: 1; min-height: 0; padding: 9px 10px; border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; box-shadow: none; font-size: 13.5px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.se-audience button.on { background: #fff; color: #111; }
.se-audience button.cf.on { background: #16a34a; color: #fff; }

/* ---------- Collections + insights ---------- */
.collection-bar { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 12px; scrollbar-width: none; }
.collection-bar::-webkit-scrollbar { display: none; }
button.chip {
  flex-shrink: 0; min-height: 0; padding: 7px 14px; border-radius: 999px; background: var(--bg-panel-2); color: var(--text);
  box-shadow: none; font-weight: 600; font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent;
}
button.chip:hover { background: var(--bg-hover); }
button.chip.on { background: var(--text); color: var(--bg); }
button.chip small { opacity: .65; font-weight: 500; }
button.chip.add { background: transparent; border-color: var(--border-light); color: var(--text-dim); }

.insights-sheet { max-width: 560px; padding: 0; display: flex; flex-direction: column; max-height: 88vh; }
@supports (height: 100dvh) { .insights-sheet { max-height: 88dvh; } }
.insights-body { overflow-y: auto; padding: 8px 16px 20px; }
.ic-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 8px 0 12px; }
.ic-tile { background: var(--bg-panel); border-radius: 14px; padding: 10px 6px; text-align: center; }
.ic-tile-value { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.ic-tile-label { font-size: 11.5px; color: var(--text-dim); margin-top: 1px; }
.ic-eng { margin: 4px 0 10px; }
.ic-reach { margin-bottom: 12px; }
.ic-meter { height: 8px; border-radius: 999px; background: rgba(43, 108, 246, 0.16); overflow: hidden; margin-top: 6px; }
.ic-meter i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.ic-chart { background: var(--bg-panel); border-radius: 16px; padding: 12px 12px 8px; margin-top: 12px; }
.ic-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
button.ic-toggle { min-height: 0; padding: 4px 12px; font-size: 12.5px; border-radius: 999px; }
.ic-plot { display: flex; gap: 6px; height: 140px; }
.ic-y { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; font-size: 11px; color: var(--text-faint); width: 28px; padding: 0; line-height: 1; font-variant-numeric: tabular-nums; }
.ic-area { position: relative; flex: 1; }
.ic-grid { position: absolute; left: 0; right: 0; height: 1px; background: var(--border); }
.ic-grid.base { background: var(--border-light); }
.ic-bars { position: absolute; inset: 0; display: flex; align-items: flex-end; }
.ic-band { flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; cursor: default; }
.ic-bar { position: relative; width: min(24px, 60%); min-height: 2px; background: var(--accent); border-radius: 4px 4px 0 0; transition: filter .12s; outline-offset: 2px; }
.ic-band:hover .ic-bar, .ic-bar:focus-visible { filter: brightness(1.18); }
.ic-peak { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: 3px; font-size: 11.5px; font-weight: 700; color: var(--text); }
.ic-tip { position: absolute; top: 2px; transform: translateX(-50%); background: var(--bg-elevated); border: 1px solid var(--border); box-shadow: var(--shadow-md); border-radius: 10px; padding: 6px 10px; display: flex; flex-direction: column; gap: 1px; pointer-events: none; z-index: 2; white-space: nowrap; }
.ic-tip b { font-size: 14px; }
.ic-tip span { font-size: 11.5px; color: var(--text-dim); }
.ic-x { display: flex; margin: 4px 0 0 34px; }
.ic-x span { flex: 1; text-align: center; font-size: 11px; color: var(--text-faint); }
table.ic-table { display: table; width: 100%; white-space: normal; overflow: visible; }
table.ic-table[hidden] { display: none; }
.ic-table th, .ic-table td { padding: 6px 4px; font-size: 13px; }
.ic-table td:last-child, .ic-table th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.ic-top { display: flex; align-items: center; gap: 10px; padding: 8px 0; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border); }
.ic-top:hover { text-decoration: none; background: var(--bg-panel); }
.ic-top-thumb { width: 44px; height: 44px; border-radius: 10px; overflow: hidden; background: var(--bg-panel-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ic-top-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ic-top-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ic-top-num { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
@media (max-width: 420px) { .ic-tiles { grid-template-columns: repeat(2, 1fr); } }

.ic-tip[hidden] { display: none; }

/* =====================================================================
   Learning features: code posts, solve cards, leaderboard, daily challenge
   ===================================================================== */
.composer-code { margin: 8px 0; }
.composer-code select { width: auto; margin: 0 0 8px; padding: 8px 12px; }
.composer-code textarea { margin: 0; font-size: 13px; line-height: 1.5; resize: vertical; tab-size: 4; white-space: pre; overflow: auto; }
button.composer-code-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 0; padding: 8px 14px; }
button.composer-code-btn.on { background: var(--accent); color: #fff; border-color: transparent; }

.code-block { position: relative; background: var(--bg-panel-2); border-radius: 14px; overflow: hidden; margin: 8px 0; max-width: 100%; border: 1px solid var(--border); }
.code-bar { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px 6px 14px; border-bottom: 1px solid var(--border); }
.code-lang { font-size: 12px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; }
button.code-copy { min-height: 0; padding: 4px 10px; font-size: 12.5px; border-radius: 999px; background: transparent; color: var(--text-dim); box-shadow: none; display: inline-flex; align-items: center; gap: 5px; }
button.code-copy:hover { background: var(--bg-hover); color: var(--text); }
.code-block pre { margin: 0; padding: 12px 14px; overflow-x: auto; font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 13px; line-height: 1.55; tab-size: 4; }
.code-block code { font-family: inherit; white-space: pre; }
.code-block.collapsed pre { max-height: 19em; overflow-y: hidden; }
.code-block.collapsed::after { content: ""; position: absolute; left: 0; right: 0; bottom: 34px; height: 46px; background: linear-gradient(transparent, var(--bg-panel-2)); pointer-events: none; }
button.code-more { display: block; width: 100%; min-height: 0; padding: 8px; border-radius: 0; background: transparent; color: var(--accent); box-shadow: none; border-top: 1px solid var(--border); font-size: 13px; }
button.code-more:hover { background: var(--bg-hover); }
.tok-k { color: #7c3aed; font-weight: 600; }
.tok-s { color: #15803d; }
.tok-n { color: #c2410c; }
.tok-c { color: var(--text-faint); font-style: italic; }
:root[data-theme="dark"] .tok-k { color: #c4a5ff; }
:root[data-theme="dark"] .tok-s { color: #86d29a; }
:root[data-theme="dark"] .tok-n { color: #f0a36b; }

.solve-card { border: 1px solid var(--border); border-radius: 16px; padding: 12px; margin: 6px 0 4px; background: var(--bg-panel); }
.solve-head { display: flex; align-items: center; gap: 10px; }
.solve-check { width: 28px; height: 28px; border-radius: 50%; background: var(--success); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.solve-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.solve-title a { font-weight: 800; font-size: 16px; color: var(--text); overflow-wrap: anywhere; }
.solve-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 2px; }
.chip-static { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: var(--bg-elevated); border: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--text-dim); }
.chip-static.streak { color: #ea580c; border-color: rgba(234, 88, 12, .35); }
.share-solve { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.share-solve button { display: inline-flex; align-items: center; gap: 6px; }

.daily-card { margin-bottom: 16px; background: linear-gradient(135deg, rgba(245, 158, 11, .12), rgba(239, 68, 68, .10)); }
.daily-head { display: flex; align-items: center; gap: 12px; }
.daily-icon { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #f59e0b, #ef4444); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.daily-body { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.daily-title { font-size: 17px; font-weight: 800; overflow-wrap: anywhere; }
.daily-title a { color: var(--text); }
.daily-done { display: inline-flex; align-items: center; gap: 6px; color: var(--success); font-weight: 700; }
.lb-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 8px; flex-wrap: wrap; }
.lb-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; }
.lb-row:last-child { border-bottom: none; }
.lb-row:hover { background: var(--bg-panel); text-decoration: none; }
.lb-row.me { background: rgba(43, 108, 246, .08); }
.lb-rank { width: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 2px; font-size: 16px; flex-shrink: 0; color: var(--text-dim); }
.lb-rank.gold { color: #d4a017; } .lb-rank.silver { color: #8a94a6; } .lb-rank.bronze { color: #b26a3d; }
.lb-name { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-streak { display: inline-flex; align-items: center; gap: 3px; color: #ea580c; font-weight: 700; font-size: 13px; }
.lb-solved { font-size: 13px; color: var(--text-dim); white-space: nowrap; }
.lb-solved b { color: var(--text); font-size: 15px; }
.streak-banner { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 14px; border-radius: 16px; background: linear-gradient(135deg, rgba(245, 158, 11, .16), rgba(239, 68, 68, .12)); border: 1px solid rgba(245, 158, 11, .3); }
.streak-banner .sb-icon { color: #ea580c; display: inline-flex; }
.streak-banner .sb-text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13.5px; }
.streak-banner .sb-text span { color: var(--text-dim); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.streak-banner button:not(.icon-btn) { min-height: 0; padding: 8px 16px; border-radius: 999px; }
.streak-banner .sb-close { width: 30px; height: 30px; }


/* =========================================================================
   Mock interviews (interview.html, interview-room.html, interview-report.html)
   ========================================================================= */
.iv-page { max-width: 1040px; }
.iv-page h1 { margin: 0 0 6px; }
.iv-card h2 { font-size: 16px; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.iv-card h4 { margin: 14px 0 6px; font-size: 13px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; }
.iv-step { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; flex: none; }

.iv-hero { display: flex; gap: 24px; align-items: center; padding: 20px; margin-bottom: 18px; border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(135deg, var(--glow-accent), transparent 70%), var(--bg-elevated); }
.iv-hero-avatar { width: 150px; height: 175px; flex: none; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-sm); }
.iv-hero-text { min-width: 0; }
.iv-hero-text p { margin: 0 0 12px; color: var(--text-dim); line-height: 1.55; }
.priya-svg { width: 100%; height: 100%; display: block; }

.iv-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
.iv-hero-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.iv-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--bg-panel-2); color: var(--text-dim); border: 1px solid var(--border); }
.iv-chip.good { background: rgba(34,197,94,.12); color: var(--easy); border-color: transparent; }
.iv-chip.ok { background: rgba(234,179,8,.14); color: var(--medium); border-color: transparent; }
.iv-chip.low { background: rgba(239,68,68,.12); color: var(--hard); border-color: transparent; }
.iv-chip.miss { opacity: .55; }
.iv-chip[hidden] { display: none; }
.iv-chip.fu { background: rgba(124,58,237,.12); color: var(--premium); border-color: transparent; }
button.iv-chip.btn { cursor: pointer; min-height: 0; width: auto; }
button.iv-chip.btn:hover { background: var(--bg-hover); color: var(--text); }

.iv-tabs { margin: 8px 0 16px; }
.iv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.iv-grid > * { min-width: 0; }

.iv-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 22px 14px; border: 2px dashed var(--border-light); border-radius: 14px; cursor: pointer; margin: 0 0 12px; color: var(--text); font-size: 14px; transition: border-color .15s, background .15s; }
.iv-drop:hover, .iv-drop.over { border-color: var(--accent); background: var(--glow-accent); }
.iv-drop.busy { opacity: .7; pointer-events: none; }
.iv-drop-icon { width: 46px; height: 46px; border-radius: 50%; background: var(--glow-accent); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; }
.iv-privacy { margin: 10px 0 0; }
.iv-resume { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 8px; cursor: pointer; }
.iv-resume.sel { border-color: var(--accent); background: var(--glow-accent); }
.iv-resume-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.iv-resume-main .hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iv-skills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.iv-skill { font-size: 11.5px; padding: 1px 8px; border-radius: 6px; background: var(--bg-panel-2); color: var(--text-dim); }

.iv-seg { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.iv-seg button { flex: 0 0 auto; min-height: 0; width: auto; padding: 7px 13px; border-radius: 999px; background: var(--bg-panel-2); color: var(--text-dim); border: 1px solid var(--border); font-size: 13px; font-weight: 600; }
.iv-seg button:hover { background: var(--bg-hover); color: var(--text); }
.iv-seg button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.iv-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.iv-row > * { min-width: 0; }
.iv-role-suggest { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0 14px; }
.iv-role-suggest:empty { display: none; }
#role { margin-bottom: 0; }
.iv-jd { margin: 4px 0 14px; }
.iv-jd summary { cursor: pointer; font-size: 13.5px; padding: 6px 0; }
.iv-jd textarea { margin-top: 6px; resize: vertical; }
.iv-start { width: 100%; padding: 13px; font-size: 15px; border-radius: 12px; }
.iv-limit { text-align: center; margin: 8px 0 0; }
#mode-hint { margin: -6px 0 14px; }

.iv-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.55); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 16px; }
.iv-overlay[hidden] { display: none; }
.iv-overlay-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 18px; padding: 26px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 380px; width: 100%; }
.iv-spinner { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--border-light); border-top-color: var(--accent); animation: iv-spin .8s linear infinite; }
@keyframes iv-spin { to { transform: rotate(360deg); } }

.iv-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 16px; }
.iv-stat { padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-elevated); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.iv-stat b { font-size: 26px; line-height: 1.15; }
.iv-stat b small { font-size: 13px; font-weight: 500; color: var(--text-dim); }
.iv-trend { grid-column: span 2; }
.iv-bars { display: flex; align-items: flex-end; gap: 5px; height: 48px; margin-top: 6px; }
.iv-bar { width: 10px; border-radius: 4px 4px 0 0; background: var(--accent); min-height: 4px; }

.iv-hist { display: flex; align-items: center; border-bottom: 1px solid var(--border); }
.iv-hist:last-child { border-bottom: none; }
.iv-hist-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 12px 14px; color: var(--text); text-decoration: none; }
.iv-hist-main:hover { background: var(--bg-hover); }
.iv-hist-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.iv-hist-text b, .iv-hist-text .hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iv-hist-status { font-size: 12.5px; color: var(--text-dim); white-space: nowrap; }
.iv-hist-score { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex: none; background: var(--bg-panel-2); color: var(--text-dim); }
.iv-hist-score.sm { width: 34px; height: 34px; font-size: 13px; border-radius: 10px; }
.iv-hist-score.good { background: rgba(34,197,94,.14); color: var(--easy); }
.iv-hist-score.ok { background: rgba(234,179,8,.16); color: var(--medium); }
.iv-hist-score.low { background: rgba(239,68,68,.14); color: var(--hard); }

/* score ring */
.iv-ring { --c: var(--accent); border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; position: relative; background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--border) 0); }
.iv-ring.good { --c: var(--easy); } .iv-ring.ok { --c: var(--medium); } .iv-ring.low { --c: var(--hard); }
.iv-ring::before { content: ""; position: absolute; inset: 9%; border-radius: 50%; background: var(--bg-elevated); }
.iv-ring span { position: relative; font-weight: 800; font-size: 1.05em; }
.iv-summary .iv-ring { font-size: 26px; }
.iv-ring { font-size: 17px; }

/* feedback */
.iv-fb { margin-top: 14px; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-elevated); }
.iv-fb-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.iv-fb-say { font-style: italic; color: var(--text-dim); min-width: 0; overflow-wrap: anywhere; }
.iv-verdict { font-weight: 700; margin-bottom: 6px; }
.iv-verdict.good { color: var(--easy); } .iv-verdict.low { color: var(--hard); }
.iv-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.iv-list li { position: relative; padding-left: 22px; line-height: 1.45; overflow-wrap: anywhere; }
.iv-list li::before { position: absolute; left: 0; top: 0; font-weight: 800; }
.iv-list.plus li::before { content: "✓"; color: var(--easy); }
.iv-list.minus li::before { content: "→"; color: var(--medium); }
.iv-list.step { counter-reset: s; }
.iv-list.step li { counter-increment: s; }
.iv-list.step li::before { content: counter(s); color: #fff; background: var(--accent); width: 18px; height: 18px; border-radius: 50%; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; top: 2px; }
.iv-minis { display: grid; gap: 6px; margin: 8px 0; }
.iv-mini { display: grid; grid-template-columns: 74px 1fr 22px; gap: 8px; align-items: center; font-size: 13px; }
.iv-mini-track, .iv-cat-track { height: 8px; border-radius: 4px; background: var(--bg-panel-2); overflow: hidden; }
.iv-mini-track i, .iv-cat-track i { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.iv-model { margin-top: 12px; }
.iv-model summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 13.5px; }
.iv-model p { margin: 8px 0 0; line-height: 1.55; overflow-wrap: anywhere; }
.iv-model .code-block { margin-top: 8px; }

/* report */
.iv-summary { display: flex; gap: 22px; align-items: center; padding: 22px; margin-bottom: 16px; }
.iv-summary-text { min-width: 0; }
.iv-summary-text p { margin: 8px 0 0; line-height: 1.6; color: var(--text-dim); overflow-wrap: anywhere; }
.iv-verdict-pill { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--bg-panel-2); }
.iv-verdict-pill.good { background: rgba(34,197,94,.14); color: var(--easy); }
.iv-verdict-pill.ok { background: rgba(234,179,8,.16); color: var(--medium); }
.iv-verdict-pill.low { background: rgba(239,68,68,.14); color: var(--hard); }
.iv-report .iv-card { margin-bottom: 16px; }
.iv-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.iv-two > * { min-width: 0; margin-bottom: 16px; }
.iv-two:empty { display: none; }
.iv-cat { display: grid; grid-template-columns: 130px 1fr 34px; gap: 10px; align-items: center; margin: 8px 0; font-size: 13.5px; }
.iv-cat-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iv-cat b { text-align: right; }
#cat-table { width: 100%; }
.iv-review { border-top: 1px solid var(--border); }
.iv-review > summary { list-style: none; display: flex; gap: 12px; align-items: center; padding: 12px 0; cursor: pointer; }
.iv-review > summary::-webkit-details-marker { display: none; }
.iv-review-q { min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.iv-review-body { padding: 0 0 16px; }
.iv-yours { margin: 0 0 8px; padding: 10px 14px; border-left: 3px solid var(--border-light); background: var(--bg-panel-2); border-radius: 0 10px 10px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.iv-report-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 30px; }
.iv-report-actions button { width: auto; }
.btn-link { text-decoration: none; }

/* lobby */
.iv-lobby { max-width: 420px; gap: 6px; }
.iv-lobby-avatar { width: 150px; height: 175px; border-radius: 18px; overflow: hidden; margin-bottom: 6px; }
.iv-lobby h2 { margin: 4px 0 0; }
.iv-tips { text-align: left; margin: 10px 0; padding-left: 18px; color: var(--text-dim); font-size: 13.5px; line-height: 1.6; }

/* room */
.rm-body { background: var(--bg); }
.rm { max-width: 1100px; margin: 0 auto; padding: 0 16px 40px; }
.rm-top { position: sticky; top: var(--imp-banner-h); z-index: 30; display: flex; align-items: center; gap: 12px; padding: 10px 0; background: var(--bg); border-bottom: 1px solid var(--border); }
.rm-prog { flex: 1; min-width: 0; }
.rm-prog-text { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.rm-prog-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-prog-track { height: 6px; border-radius: 3px; background: var(--bg-panel-2); margin-top: 6px; overflow: hidden; }
.rm-prog-track i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 3px; transition: width .4s; }
.rm-timer { font-variant-numeric: tabular-nums; font-weight: 700; padding: 5px 11px; border-radius: 999px; background: var(--bg-panel-2); font-size: 13.5px; }
.rm-timer.warn { background: rgba(234,179,8,.18); color: var(--medium); }
.rm-timer.over { background: rgba(239,68,68,.15); color: var(--hard); }
.rm-main { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 8px; }
.rm-stage { position: sticky; top: calc(64px + var(--imp-banner-h)); border: 1px solid var(--border); border-radius: 18px; background: var(--bg-elevated); padding: 12px; }
.rm-avatar { width: 100%; aspect-ratio: 240 / 280; border-radius: 14px; overflow: hidden; position: relative; }
.rm-stage[data-s], .rm-avatar { transition: box-shadow .25s; }
.rm-avatar[data-state="speaking"] { box-shadow: 0 0 0 3px rgba(37,99,235,.55); }
.rm-avatar[data-state="listening"] { box-shadow: 0 0 0 3px rgba(34,197,94,.6); }
.rm-avatar[data-state="thinking"] { box-shadow: 0 0 0 3px rgba(234,179,8,.6); }
.rm-stage-info { display: flex; justify-content: space-between; align-items: center; margin: 10px 2px 4px; gap: 8px; }
.rm-name { display: flex; flex-direction: column; line-height: 1.25; }
.rm-status { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--bg-panel-2); color: var(--text-dim); }
.rm-status[data-s="speaking"] { background: rgba(37,99,235,.14); color: var(--accent); }
.rm-status[data-s="listening"] { background: rgba(34,197,94,.14); color: var(--easy); }
.rm-status[data-s="thinking"] { background: rgba(234,179,8,.16); color: var(--medium); }
.rm-status[data-s="paused"] { background: rgba(124,58,237,.14); color: var(--premium); }
.rm-caption { min-height: 2.6em; max-height: 9em; overflow-y: auto; font-size: 13px; line-height: 1.45; color: var(--text-dim); padding: 6px 2px; overflow-wrap: anywhere; }
.rm-stage-btns { display: flex; gap: 8px; }
.rm-stage-btns button { flex: 1; min-height: 0; padding: 8px 10px; font-size: 13px; width: auto; }
.rm-work { min-width: 0; }
.rm-q { padding: 18px 20px; }
.rm-q-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.rm-q-text { margin: 0; font-size: 18px; line-height: 1.55; font-weight: 600; white-space: pre-wrap; overflow-wrap: anywhere; }
.rm-ans { margin-top: 14px; padding: 16px; }
.rm-ans.busy { opacity: .75; }
.rm-ans textarea { resize: vertical; min-height: 130px; }
.rm-ans-foot { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 10px; min-height: 22px; }
.rm-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; }
.rm-actions button { width: auto; }
.rm-mic { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-panel-2); color: var(--text); border: 1px solid var(--border-light); }
.rm-mic:hover { background: var(--bg-hover); }
.rm-rec { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 10px; border-radius: 12px; background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.3); }
.rm-rec[hidden] { display: none; }
.rm-rec button { width: auto; min-height: 0; padding: 7px 12px; font-size: 13px; }
.rm-rec-hint { flex: 1 1 100%; order: 5; margin: 0; }
.rm-rec-hint:empty { display: none; }
.rm-autosend { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: var(--glow-accent); border: 1px solid var(--accent); font-size: 14px; }
.rm-autosend .link-btn { width: auto; }
.rm-stage-btns { flex-wrap: wrap; }
.rm-stage-btns button { flex: 1 1 45%; }
.rm-rec canvas { flex: 1; min-width: 60px; max-width: 120px; height: 24px; }
.rm-rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); animation: iv-pulse 1s infinite; }
@keyframes iv-pulse { 50% { opacity: .25; } }
.rm-opts { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.rm-opt { display: flex; gap: 12px; align-items: flex-start; text-align: left; width: 100%; background: var(--bg-elevated); color: var(--text); border: 1.5px solid var(--border-light); padding: 12px 14px; font-weight: 500; line-height: 1.45; overflow-wrap: anywhere; }
.rm-opt:hover { background: var(--bg-hover); }
.rm-opt.on { border-color: var(--accent); background: var(--glow-accent); }
.rm-opt-l { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--bg-panel-2); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.rm-opt.on .rm-opt-l { background: var(--accent); color: #fff; }
.rm-opt.right { border-color: var(--easy); background: rgba(34,197,94,.1); }
.rm-opt.right .rm-opt-l { background: var(--easy); color: #fff; }
.rm-opt.wrong { border-color: var(--hard); background: rgba(239,68,68,.08); }
.rm-opt.wrong .rm-opt-l { background: var(--hard); color: #fff; }
.rm-code-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.rm-code-top select { width: auto; margin: 0; }
.rm-code-top button { width: auto; }
.rm-ans .rm-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; line-height: 1.5; min-height: 260px; tab-size: 4; white-space: pre; overflow: auto; }
.rm-next { margin-top: 12px; }

/* ---- AI Teacher room (teacher-room.html) — reuses the .rm/.rm-stage/.rm-avatar shell
   above; these rules are just its blackboard, transcript and voice-picker content. ---- */
.tr-voice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 4px 0 16px; }
.tr-voice-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 10px; border: 1.5px solid var(--border-light); border-radius: 12px; cursor: pointer; text-align: center; background: var(--bg-elevated); }
.tr-voice-card:hover { background: var(--bg-hover); }
.tr-voice-card.on { border-color: var(--accent); background: var(--glow-accent); }
.tr-voice-label { font-weight: 600; font-size: 13.5px; }
.tr-voice-preview { width: auto; padding: 4px 10px; font-size: 12px; }

.tr-board {
  position: relative; background: #16332a; color: #eafff2; border-radius: 16px; padding: 20px 22px;
  min-height: 220px; box-shadow: inset 0 0 0 8px #0e241d, 0 4px 16px rgba(0,0,0,0.2);
}
:root[data-theme="dark"] .tr-board, :root:not([data-theme="light"]) .tr-board { background: #122720; box-shadow: inset 0 0 0 8px #0a1a15, 0 4px 16px rgba(0,0,0,0.4); }
.tr-board .hint { color: #9fd8bd; }
.tr-board h3 { margin: 8px 0 12px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 20px; color: #fff; min-height: 1.2em; }
.tr-board ul { margin: 0 0 12px; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.tr-board li { font-size: 15px; line-height: 1.45; position: relative; }
.tr-code {
  background: rgba(0,0,0,0.28); border-radius: 8px; padding: 12px 14px; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 12px; color: #d7ffe9;
}
.tr-diagram { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.tr-diagram-box {
  padding: 7px 14px; border: 1.5px solid #eafff2; border-radius: 8px; font-size: 13.5px; font-weight: 600;
  opacity: 0; transform: translateY(4px) scale(0.94); animation: tr-chalk-in 0.35s ease-out forwards;
}
.tr-diagram-arrow { font-size: 16px; opacity: 0; animation: tr-chalk-in 0.35s ease-out forwards; }

/* "Teacher writing on the board" effects: a chalk-in pop for anything newly written, a
   blinking typewriter cursor while text is actively being typed (see teacher-room.js's
   typeInto()), and an SVG overlay for the hand-drawn circle/underline annotations the
   teacher draws for emphasis after writing something — mirrors how a real teacher marks
   up a board while explaining rather than just having text appear instantly. */
@keyframes tr-chalk-in { from { opacity: 0; transform: translateY(4px) scale(0.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
.tr-board h3.tr-chalk-in, .tr-board li.tr-chalk-in { animation: tr-chalk-in 0.25s ease-out; }
.tr-typing::after {
  content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -0.15em;
  background: currentColor; animation: tr-cursor-blink 0.85s step-end infinite;
}
@keyframes tr-cursor-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.tr-annotate-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.tr-annot-stroke { fill: none; stroke: #ffd76a; stroke-width: 2; stroke-linecap: round; }
.tr-annot-underline { stroke-width: 3; }

/* A bounded chat-style panel — heading and input pinned in place, only the message
   list itself scrolls, so a long conversation grows a scrollbar here instead of
   pushing the input (or the rest of the page) further down every time. Same
   heading-fixed/middle-scrolls/footer-fixed shape as Nova's own #nova-panel. */
.tr-transcript-card { margin-top: 16px; display: flex; flex-direction: column; max-height: min(420px, 55vh); }
.tr-transcript-card h4 { flex: none; }
.tr-transcript { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; }
.tr-input-row { flex: none; }
.tr-msg { font-size: 13.5px; line-height: 1.45; padding: 8px 11px; border-radius: 10px; max-width: 90%; white-space: pre-wrap; overflow-wrap: anywhere; }
.tr-msg.tr-teacher { align-self: flex-start; background: var(--bg-panel); color: var(--text); }
.tr-msg.tr-student { align-self: flex-end; background: var(--accent); color: #fff; }
.tr-msg.tr-system { align-self: center; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); background: none; }
.tr-input-row { display: flex; gap: 8px; margin-top: 10px; }
.tr-input-row input { flex: 1; margin: 0; }
.tr-input-row button { width: auto; }

/* =========================================================================
   Study notes (notes.html, js/notes.js) — a printable written notes document for
   one Learn topic, generated by teaching_ai.generate_topic_notes. "Download as
   PDF" is a plain window.print() over this print-friendly layout, the same
   convention as the interview report (see .iv-report-actions below).
   ========================================================================= */
.notes-page { max-width: 760px; }
.notes-card { margin-bottom: 16px; }
.notes-header h1 { margin: 4px 0 6px; }
.notes-section { margin-bottom: 18px; }
.notes-section:last-child { margin-bottom: 0; }
.notes-section h3 { margin: 0 0 6px; font-size: 15px; }
.notes-section p { margin: 0 0 10px; line-height: 1.6; color: var(--text-dim); }
.notes-section p:last-child { margin-bottom: 0; }
.notes-code { background: var(--bg-panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-family: var(--font-mono, monospace); font-size: 12.5px; overflow-x: auto; white-space: pre; margin: 0 0 10px; }
.notes-derivation { margin-bottom: 16px; }
.notes-derivation:last-child { margin-bottom: 0; }
.notes-derivation h4 { margin: 0 0 6px; font-size: 13.5px; }
.notes-derivation ol { margin: 0 0 8px; padding-left: 20px; line-height: 1.6; color: var(--text-dim); }
.notes-derivation ol li { margin-bottom: 3px; }
.notes-result { margin: 0; font-size: 13.5px; }
.notes-glossary dt { font-weight: 700; margin-top: 10px; }
.notes-glossary dt:first-child { margin-top: 0; }
.notes-glossary dd { margin: 2px 0 0; color: var(--text-dim); line-height: 1.5; }
.notes-qa { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.notes-qa:last-child { margin-bottom: 0; }
.notes-qa summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
.notes-qa p { margin: 8px 0 0; color: var(--text-dim); line-height: 1.55; }
.notes-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 4px; }
.notes-actions button { width: auto; }

@media (max-width: 860px) {
  .iv-grid, .iv-two { grid-template-columns: 1fr; }
  .iv-hero { flex-direction: column; text-align: center; padding: 16px; }
  .iv-hero-chips { justify-content: center; }
  .iv-trend { grid-column: span 1; }
  .iv-summary { flex-direction: column; text-align: center; }
  .rm-main { grid-template-columns: 1fr; gap: 12px; }
  .rm-stage { position: sticky; top: calc(56px + var(--imp-banner-h)); z-index: 20; display: grid; grid-template-columns: 84px 1fr; gap: 4px 12px; align-items: center; padding: 8px; }
  .rm-avatar { grid-row: span 2; }
  .rm-stage-info { margin: 0; }
  .rm-caption { display: none; }
  .rm-stage-btns { grid-column: 2; }
  .rm-q-text { font-size: 16.5px; }
}
@media (max-width: 480px) {
  .iv-row { grid-template-columns: 1fr; gap: 0; }
  .iv-cat { grid-template-columns: 96px 1fr 32px; }
  .iv-hist-status { display: none; }
  .rm-actions { justify-content: stretch; }
  .rm-actions button { flex: 1 1 calc(50% - 8px); }
  #submit-btn { flex-basis: 100%; order: 3; }
}
@media print {
  .navbar, .mobile-tabbar, .iv-report-actions, .notes-actions, .back-to-learn-btn, #nova-launcher, .toast-container, #toast-container, #cat-toggle { display: none !important; }
  .container { padding: 0; max-width: none; }
  .card, .iv-stat, .iv-fb, .notes-section, .notes-derivation, .notes-qa { break-inside: avoid; box-shadow: none; }
}

/* =========================================================================
   Admin "sign in as this user" banner (js/navbar.js, api.js' getImpersonation)
   ========================================================================= */
body.has-impersonation-banner { --imp-banner-h: 40px; }
.impersonation-banner {
  position: sticky; top: 0; z-index: 40;
  height: var(--imp-banner-h);
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 0 14px;
  background: linear-gradient(135deg, #7c3aed, #4338ca);
  color: #fff; font-size: 13px; text-align: center;
}
.impersonation-banner span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.impersonation-banner b { font-weight: 800; }
.impersonation-banner button {
  width: auto; min-height: 0; padding: 5px 14px; font-size: 12.5px; font-weight: 600; flex: none;
  background: rgba(255, 255, 255, 0.18); color: #fff; border: 1px solid rgba(255, 255, 255, 0.45);
}
.impersonation-banner button:hover { background: rgba(255, 255, 255, 0.3); opacity: 1; }
@media print { .impersonation-banner { display: none !important; } }

/* Problems page: "Recently solved" under Your Progress (js/dashboard.js loadRecentlySolved). */
.recent-solved { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.recent-solved h5 { margin: 0; font-size: 13px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; }
.recent-solved ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.recent-solved li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13.5px; }
.recent-solved li a { color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-solved li a:hover { color: var(--accent); }

/* Profile grid: code and solved-problem posts (js/profile.js gridTextTileHtml), and the
   owner's Edit / Delete buttons in the post viewer. */
.post-grid-cell .no-media.code-tile { position: relative; align-items: flex-start; justify-content: flex-start; padding: 0; background: #0d1117; }
.post-grid-cell .code-tile pre { margin: 0; padding: 26px 8px 8px; width: 100%; height: 100%; overflow: hidden; text-align: left; font-size: 9.5px; line-height: 1.35; color: #c9d1d9; white-space: pre; }
.post-grid-cell .code-badge { left: 6px; right: auto; top: 6px; font-size: 10px; font-weight: 700; padding: 1px 6px; }
.post-grid-cell .no-media.solve-tile { flex-direction: column; gap: 4px; }
.post-grid-cell .solve-tile b { font-size: 12.5px; color: var(--text); }
.solve-tile-check { color: var(--success); }
.modal-owner-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.modal-owner-actions button { display: inline-flex; align-items: center; gap: 6px; }
.danger-text { color: var(--danger) !important; }
#modal-caption textarea { width: 100%; resize: vertical; }

/* Feed: "People you may know" (js/people-suggest.js). */
.people-suggest { margin-bottom: 16px; }
.people-suggest .ps-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.people-suggest .ps-head h4 { margin: 0; }
.people-suggest .ps-more { font-size: 13px; font-weight: 600; }
.people-suggest .ps-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.people-suggest .ps-person { display: flex; align-items: center; gap: 10px; }
.people-suggest .ps-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.people-suggest .ps-name { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.people-suggest .ps-who .hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.people-suggest .ps-connect { flex-shrink: 0; padding: 6px 12px; font-size: 13px; }
/* Search result actions for people you're already connected with (search.js). */
.search-result-row .sr-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.search-result-row .sr-connected { font-size: 13px; font-weight: 600; color: var(--success); white-space: nowrap; }
.search-result-row .sr-message button { width: auto; }

/* Profile: the list of solved problems (profile.js loadSolvedList). */
.solved-items { display: flex; flex-direction: column; }
.solved-item { display: grid; grid-template-columns: 18px 1fr auto auto; align-items: center; gap: 10px; padding: 8px 6px;
  border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; border-radius: 6px; }
.solved-item:hover { background: var(--bg-hover); }
.solved-item .solved-check { color: var(--success); font-weight: 700; }
.solved-item .solved-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.solved-item .solved-diff { font-size: 12.5px; font-weight: 600; text-transform: capitalize; }
.solved-item .solved-when { font-size: 12px; }
@media (max-width: 520px) { .solved-item { grid-template-columns: 18px 1fr auto; } .solved-item .solved-when { display: none; } }
/* Problem page: solved badge + note (problem.js showSolvedState). */
.badge.solved-badge { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); font-weight: 700; }
.solved-note { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; line-height: 1.5;
  background: color-mix(in srgb, var(--success) 10%, transparent); border: 1px solid color-mix(in srgb, var(--success) 35%, transparent); }

/* Pricing page: section rows in the comparison table + "Your usage this month". */
#limits-table tr.limits-section td { font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-dim); background: var(--bg-panel); }
.usage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 22px; }
.usage-item { font-size: 13.5px; }
.usage-bar { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; margin-top: 6px; }
.usage-bar i { display: block; height: 100%; background: var(--accent); }
.usage-bar i.full { background: var(--danger); }

/* Max — the top plan (pricing.html, navbar tier chip). */
.tier-chip.max { background: linear-gradient(135deg, rgba(245,158,11,0.18), rgba(236,72,153,0.18)); color: #d97706; border: 1px solid rgba(245,158,11,0.5); }
:root[data-theme="dark"] .tier-chip.max { color: #fbbf24; }
.plan-card.plan-max { border-color: #f59e0b; box-shadow: 0 0 0 1px #f59e0b, 0 10px 30px rgba(245,158,11,0.15); }
.plan-card.plan-max button { --btn-bg: linear-gradient(135deg, #f59e0b, #ec4899); --btn-fg: #fff; background: linear-gradient(135deg, #f59e0b, #ec4899); color: #fff; border-color: transparent; }
.plan-ribbon { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); padding: 3px 12px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em; background: var(--accent); color: #fff; white-space: nowrap; }
.plan-ribbon.max { background: linear-gradient(135deg, #f59e0b, #ec4899); }

/* Profile: connection requests (moved from the old Requests page). */
.requests-card .request-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.requests-card .request-row:last-child { border-bottom: none; }
.requests-card .request-row .info { flex: 1; min-width: 0; }
.requests-card .request-row .name { font-weight: 600; }
.requests-card .request-row button { width: auto; margin: 0; }
.requests-card .badge:empty { display: none; }