/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --bg:#06060f; --panel:#0d0d1f; --border:#1a1a36;
  --accent:#00ffe5; --accent2:#ff2d78; --accent3:#ffe600;
  --text:#d8d8f8; --muted:#4a4a7a;
  --hype:#00ffe5; --funny:#ffe600; --love:#ff2d78;
  --toxic:#ff4800; --sad:#9b6ef3; --neutral:#2e3d5e;
  --calm:#4fc3f7; --angry:#ff1744; --excited:#76ff03;
  --cringe:#e040fb; --wholesome:#ffab40; --confused:#78909c;

  /* Layout rhythm — one place to tune spacing across all sections */
  --gap:16px;
  --card-radius:14px;
  --card-pad:18px;

  /* App container visual frame */
  --frame-glow: 0 0 0 1px rgba(0,255,229,.06), 0 0 60px rgba(0,255,229,.04);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }

body {
  font-family:'Share Tech Mono',monospace;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
}

/* Scanline overlay */
body::before {
  content:''; position:fixed; inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,255,229,.011) 2px,rgba(0,255,229,.011) 4px);
  pointer-events:none; z-index:999;
}

/* Background grid */
body::after {
  content:''; position:fixed; inset:0;
  background-image:
    linear-gradient(rgba(0,255,229,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,255,229,.028) 1px,transparent 1px);
  background-size:48px 48px;
  pointer-events:none; z-index:0;
  animation:gridScroll 25s linear infinite;
}
@keyframes gridScroll { to { background-position:48px 48px } }

/* ============================================================
   APP CONTAINER — cleaner visual frame, better rhythm
   ============================================================ */
.app {
  position:relative; z-index:1;
  max-width:1340px; margin:0 auto;
  padding:24px 14px 64px;
  /* Subtle inner-border frame to visually contain the dashboard */
  background:linear-gradient(180deg, rgba(0,255,229,.018) 0%, transparent 120px);
  border-left:1px solid rgba(0,255,229,.06);
  border-right:1px solid rgba(0,255,229,.06);
  min-height:100vh;
}
@media(min-width:480px) { .app { padding:30px 20px 64px } }

/* Thin top accent line on the container */
.app::before {
  content:''; display:block;
  height:2px; margin:-30px -20px 28px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:.4;
}
@media(max-width:479px) { .app::before { margin:-24px -14px 22px } }

/* ============================================================
   HEADER — flex row containing title block + settings button
   ============================================================ */
header {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-bottom:22px;
  /* Prevent the settings button from pushing title off-center
     by using a symmetrical padding trick: the button's width is
     mirrored on the left as invisible space */
  position:relative;
}

/* Title + subtitle stacked, centered in available space */
.header-center {
  text-align:center;
  flex:1;               /* grows to fill space */
  min-width:0;          /* allows text to shrink/wrap safely */
}

.title {
  font-family:'Orbitron',sans-serif;
  font-size:clamp(1.7rem,5vw,3.4rem);
  font-weight:900; letter-spacing:.1em;
  background:linear-gradient(90deg,var(--accent),var(--accent2),var(--accent3),var(--accent));
  background-size:300% 100%;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  animation:titleShift 6s linear infinite;
}
@keyframes titleShift { to { background-position:-300% 0 } }

.subtitle {
  color:var(--muted); font-size:.76em;
  letter-spacing:.22em; margin-top:5px;
}

/* ============================================================
   SETTINGS MENU — inline with the title row, icon-only button
   ============================================================ */
.settings-wrap {
  /* No longer absolute — it's a natural flex item in the header row */
  position:relative;
  flex-shrink:0;
}

.settings-btn {
  background:transparent;
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--muted);
  /* Square-ish, icon-only: removed letter-spacing and white-space */
  padding:7px 8px;
  cursor:pointer;
  transition:color .2s,border-color .2s,background .2s;
  display:flex; align-items:center; justify-content:center;
}
.settings-btn:hover { color:var(--accent); border-color:var(--accent); background:rgba(0,255,229,.05) }
.settings-btn svg { width:15px; height:15px; fill:currentColor; flex-shrink:0; display:block }

.settings-dropdown {
  position:absolute;
  top:calc(100% + 6px); right:0;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:10px;
  padding:6px;
  min-width:220px;
  z-index:500;
  display:none;
  box-shadow:0 8px 32px rgba(0,0,0,.6);
  max-height:70vh;
  overflow-y:auto;
}
.settings-dropdown.open { display:block }

.settings-section-label {
  font-family:'Orbitron',sans-serif;
  font-size:.55em; letter-spacing:.2em;
  color:var(--muted);
  padding:6px 10px 4px;
  text-transform:uppercase;
}

.preset-btn {
  display:flex; align-items:center; gap:8px;
  width:100%; background:transparent; border:none;
  color:var(--text); font-family:'Share Tech Mono',monospace;
  font-size:.78em; letter-spacing:.06em;
  padding:8px 10px; border-radius:6px;
  cursor:pointer; transition:background .15s,color .15s;
  text-align:left;
}
.preset-btn:hover { background:rgba(0,255,229,.07); color:var(--accent) }
.preset-btn.active { color:var(--accent) }
.preset-btn .preset-icon {
  width:24px; height:18px; border-radius:3px;
  border:1px solid currentColor; opacity:.6; flex-shrink:0;
  position:relative;
}
/* Dashboard icon — two-column grid visual */
.preset-btn[data-preset="dashboard"] .preset-icon::before,
.preset-btn[data-preset="dashboard"] .preset-icon::after {
  content:''; position:absolute;
  top:3px; bottom:3px; width:8px;
  background:currentColor; border-radius:1px; opacity:.5;
}
.preset-btn[data-preset="dashboard"] .preset-icon::before { left:3px }
.preset-btn[data-preset="dashboard"] .preset-icon::after  { right:3px }
/* List icon — stacked rows visual */
.preset-btn[data-preset="list"] .preset-icon::before {
  content:''; position:absolute;
  left:3px; right:3px;
  top:3px; height:3px;
  background:currentColor; border-radius:1px; opacity:.5;
  box-shadow:0 5px 0 currentColor, 0 10px 0 currentColor;
}

/* ============================================================
   CONNECT PANEL
   ============================================================ */
.connect-panel {
  background:var(--panel); border:1px solid var(--border);
  border-radius:12px; padding:14px 18px;
  display:flex; flex-wrap:wrap; align-items:center;
  gap:10px; justify-content:center;
  margin-bottom:var(--gap);
}
.input-wrap { position:relative; display:flex; align-items:center }
.input-prefix { position:absolute; left:12px; color:var(--accent); pointer-events:none }
input[type=text] {
  background:#080814; border:1px solid var(--border); border-radius:8px;
  color:var(--text); font-family:'Share Tech Mono',monospace; font-size:1em;
  padding:9px 13px 9px 28px; width:200px; outline:none;
  transition:border-color .2s,box-shadow .2s;
}
input[type=text]:focus { border-color:var(--accent); box-shadow:0 0 10px rgba(0,255,229,.2) }
.hl-wrap { display:flex; align-items:center; gap:7px; font-size:.76em; color:var(--muted) }
input[type=range] { -webkit-appearance:none; appearance:none; width:100%; max-width:100%; height:8px; background:var(--border); border-radius:4px; outline:none; cursor:pointer; padding:10px 0; background-clip:content-box; touch-action:none }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:24px; height:24px; border-radius:50%; background:var(--accent); cursor:pointer; box-shadow:0 0 8px rgba(0,255,229,.35); transition:box-shadow .15s,transform .15s; border:2px solid rgba(0,0,0,.4) }
input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.15); box-shadow:0 0 14px rgba(0,255,229,.55) }
input[type=range]::-webkit-slider-thumb:active { transform:scale(1.25); box-shadow:0 0 20px rgba(0,255,229,.7) }
input[type=range]::-moz-range-thumb { width:24px; height:24px; border-radius:50%; background:var(--accent); cursor:pointer; box-shadow:0 0 8px rgba(0,255,229,.35); border:2px solid rgba(0,0,0,.4) }
input[type=range]::-moz-range-track { height:8px; background:var(--border); border-radius:4px }
input[type=range]:focus-visible { outline:2px solid var(--accent); outline-offset:4px }
#hlVal { color:var(--accent); min-width:26px }
.btn {
  font-family:'Orbitron',sans-serif; font-size:.68em; font-weight:700;
  letter-spacing:.08em; padding:9px 18px; border-radius:8px;
  border:none; cursor:pointer; transition:all .2s; text-transform:uppercase;
}
.btn-connect { background:var(--accent); color:#000; box-shadow:0 0 15px rgba(0,255,229,.3) }
.btn-connect:hover { box-shadow:0 0 24px rgba(0,255,229,.6); transform:translateY(-1px) }
.btn-connect:disabled { opacity:.4; cursor:not-allowed; transform:none }
.btn-disconnect { background:transparent; color:var(--muted); border:1px solid var(--border) }
.btn-disconnect:hover { border-color:var(--accent2); color:var(--accent2) }
.bot-toggle-wrap { display:flex; align-items:center; gap:6px; cursor:pointer; user-select:none }
.bot-toggle-wrap input[type=checkbox] { width:14px; height:14px; accent-color:var(--accent); cursor:pointer }
.bot-toggle-label { font-size:.72em; color:var(--muted); letter-spacing:.1em }

/* ============================================================
   HELP BUTTON + MODAL
   ============================================================ */
.help-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; border-radius:50%;
  border:1px solid var(--muted); background:transparent;
  color:var(--muted); font-size:.6em; cursor:pointer;
  line-height:1; vertical-align:middle; margin-left:4px;
  transition:color .2s,border-color .2s;
  font-family:'Share Tech Mono',monospace; flex-shrink:0;
}
.help-btn:hover { color:var(--accent); border-color:var(--accent) }

.help-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.72); z-index:2000;
  align-items:center; justify-content:center; padding:16px;
}
.help-overlay.open { display:flex }
.help-modal {
  background:var(--panel); border:1px solid var(--border);
  border-radius:var(--card-radius); padding:24px;
  max-width:480px; width:100%; position:relative;
  max-height:80vh; overflow-y:auto;
}
.help-modal h3 { font-family:'Orbitron',sans-serif; font-size:.8em; letter-spacing:.2em; color:var(--accent); margin-bottom:14px }
.help-modal p,.help-modal li { font-size:.8em; color:#9898c8; line-height:1.7; margin-bottom:8px }
.help-modal ul { padding-left:16px; margin-bottom:8px }
.help-modal li { margin-bottom:4px }
.help-modal strong { color:var(--text) }
.help-close { position:absolute; top:14px; right:16px; background:transparent; border:none; color:var(--muted); font-size:1.1em; cursor:pointer; line-height:1; padding:4px }
.help-close:hover { color:var(--accent) }

/* Disconnected pulsing red inlaid border — applied when logging was active but connection was lost */
body.disconnected {
  background:var(--bg);
  animation:disconnectPulse 2s ease-in-out infinite;
}
@keyframes disconnectPulse {
  0%,100% { box-shadow:inset 0 0 30px 4px rgba(220,30,30,.12), inset 0 0 0 2px rgba(220,30,30,.15) }
  50%     { box-shadow:inset 0 0 60px 8px rgba(220,30,30,.22), inset 0 0 0 3px rgba(220,30,30,.35) }
}
/* Smooth removal when reconnected */
body:not(.disconnected) {
  box-shadow:none;
  animation:none;
  transition:box-shadow .8s ease;
}

/* Channel history dropdown */
.channel-history-dropdown {
  position:absolute;
  top:100%;
  left:0;
  right:0;
  background:var(--panel);
  border:1px solid var(--border);
  border-top:none;
  border-radius:0 0 8px 8px;
  z-index:600;
  display:none;
  max-height:200px;
  overflow-y:auto;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
}
.channel-history-dropdown.open { display:block }
.channel-history-dropdown::-webkit-scrollbar { width:3px }
.channel-history-dropdown::-webkit-scrollbar-thumb { background:var(--border) }

.history-item {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:7px 10px;
  cursor:pointer;
  font-size:.82em;
  color:var(--text);
  transition:background .12s;
  gap:8px;
}
.history-item:hover { background:rgba(0,255,229,.07) }
.history-item-name {
  flex:1;
  color:var(--accent);
  letter-spacing:.04em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.history-item-name::before { content:'#'; color:var(--muted); margin-right:2px }
.history-delete {
  background:transparent;
  border:none;
  color:var(--muted);
  cursor:pointer;
  font-size:.9em;
  padding:2px 5px;
  border-radius:4px;
  line-height:1;
  flex-shrink:0;
  transition:color .15s, background .15s;
}
.history-delete:hover { color:var(--accent2); background:rgba(255,45,120,.1) }
.history-empty {
  padding:10px;
  font-size:.76em;
  color:var(--muted);
  text-align:center;
  letter-spacing:.1em;
}
.status-bar.live { color:var(--accent) }
.status-bar.error { color:var(--accent2) }
.live-dot { display:inline-block; width:7px; height:7px; background:var(--accent); border-radius:50%; margin-right:7px; animation:blink 1s step-end infinite }
@keyframes blink { 50% { opacity:0 } }

.stats-row { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-bottom:12px }
.stat-box { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:9px 14px; text-align:center; min-width:80px }
.stat-val { font-family:'Orbitron',sans-serif; font-size:1.4em; font-weight:700; color:var(--accent) }
.stat-label { font-size:.6em; letter-spacing:.15em; color:var(--muted); margin-top:2px }

.throughput-bar-wrap { display:flex; align-items:center; gap:9px; font-size:.66em; color:var(--muted); margin-bottom:14px; justify-content:center }
.tbar { flex:1; max-width:260px; height:5px; background:var(--border); border-radius:3px; overflow:hidden }
.tbar-fill { height:100%; background:var(--accent); border-radius:3px; transition:width .3s,background .3s; width:0% }

/* ============================================================
   DOMINANT MOOD + SHIFT ALERT
   ============================================================ */
.dominant-mood {
  text-align:center; margin-bottom:8px;
  font-family:'Orbitron',sans-serif;
  font-size:clamp(1rem,2.4vw,1.8rem); font-weight:700; letter-spacing:.17em;
  opacity:0; transition:opacity .4s,color .5s,text-shadow .5s;
}
.dominant-mood.visible { opacity:1 }
.shift-alert {
  text-align:center; font-size:.76em; letter-spacing:.17em;
  min-height:20px; margin-bottom:14px; color:var(--accent3);
  opacity:0; transition:opacity .3s;
}
.shift-alert.show { opacity:1 }

/* ============================================================
   SECTION DIVIDERS — subtle rhythm between logical groups
   ============================================================ */
.section-divider {
  height:1px; margin:4px 0 var(--gap);
  background:linear-gradient(90deg,transparent,rgba(0,255,229,.08),transparent);
}

/* ============================================================
   CHARTS GRID — DASHBOARD preset (default)
   ============================================================ */
.charts-top {
  display:grid; grid-template-columns:1fr 1fr;
  gap:var(--gap); margin-bottom:var(--gap);
}
@media(max-width:660px) { .charts-top { grid-template-columns:1fr } }

.chart-card {
  background:var(--panel); border:1px solid var(--border);
  border-radius:var(--card-radius); padding:var(--card-pad);
  display:flex; flex-direction:column; align-items:center;
  transition:border-color .5s,box-shadow .5s;
}
.chart-card.flush { border-color:var(--accent); box-shadow:0 0 26px rgba(0,255,229,.13) }
.chart-title {
  font-family:'Orbitron',sans-serif; font-size:.6em; letter-spacing:.2em;
  color:var(--muted); margin-bottom:12px; align-self:flex-start;
  display:flex; align-items:center; gap:4px;
}
.chart-wrap { width:100%; max-width:100%; aspect-ratio:1; position:relative }

/* ============================================================
   BUBBLE CARD
   ============================================================ */
.bubble-card {
  background:var(--panel); border:1px solid var(--border);
  border-radius:var(--card-radius); padding:var(--card-pad);
  margin-bottom:var(--gap);
  overflow:hidden;
}
#bubbleCanvas { width:100%; height:260px; display:block; cursor:default; border-radius:8px; min-height:100px; max-width:100%; max-height:100% }
.bubble-card { position:relative; overflow:hidden }
.bubble-card .collapsible-body { overflow:hidden; position:relative }

/* ============================================================
   APPROVAL METER — enlarged, more prominent
   ============================================================ */
.approval-card {
  background:var(--panel);
  /* Stronger border tint to visually distinguish this section */
  border:1px solid rgba(0,255,229,.18);
  border-radius:var(--card-radius);
  padding:20px var(--card-pad);
  margin-bottom:var(--gap);
  position:relative;
  /* Subtle outer glow to draw the eye */
  box-shadow:0 0 0 1px rgba(0,255,229,.04), inset 0 1px 0 rgba(0,255,229,.06);
}
.approval-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; gap:8px }
.approval-label-left {
  font-family:'Orbitron',sans-serif;
  font-size:clamp(.6em,.78em,1em); /* larger than before */
  letter-spacing:.12em; color:#ff4800; text-transform:uppercase; flex:1; font-weight:700;
}
.approval-label-center {
  font-family:'Orbitron',sans-serif;
  font-size:clamp(.56em,.66em,1em);
  letter-spacing:.15em; color:var(--muted); text-align:center; flex:2;
  display:flex; align-items:center; justify-content:center; gap:4px;
}
.approval-label-right {
  font-family:'Orbitron',sans-serif;
  font-size:clamp(.6em,.78em,1em); /* larger than before */
  letter-spacing:.12em; color:#00ffe5; text-align:right; text-transform:uppercase; flex:1; font-weight:700;
}

/* Track wrap: taller (64px vs 48px) */
.approval-track-wrap { position:relative; height:64px; display:flex; align-items:center; margin:0 6px }

/* Track: thicker (14px vs 8px), stronger glow */
.approval-track {
  position:absolute; left:0; right:0; height:14px; border-radius:7px;
  background:linear-gradient(90deg,#ff4800 0%,#ff6600 25%,#ff8800 38%,#444466 50%,#00aa88 62%,#00dd99 75%,#00ffe5 100%);
  box-shadow:0 0 12px rgba(0,0,0,.6), inset 0 2px 4px rgba(0,0,0,.5);
}
/* Center tick mark — taller and more visible */
.approval-track::before {
  content:''; position:absolute;
  left:50%; top:-10px; bottom:-10px;
  width:2px; background:rgba(255,255,255,.28);
  transform:translateX(-50%);
}

/* Thumb: 36px (vs 26px), heavier border and glow */
.approval-thumb {
  position:absolute; top:50%; transform:translate(-50%,-50%);
  width:36px; height:36px; border-radius:50%;
  border:4px solid #fff; background:#0d0d1f;
  transition:left .55s cubic-bezier(.25,.8,.25,1),box-shadow .55s;
  cursor:default; z-index:2;
}
.approval-thumb::after {
  content:''; position:absolute; inset:5px;
  border-radius:50%; background:currentColor; opacity:.92;
}

/* Ticks: taller (10px vs 6px) */
.approval-ticks { position:absolute; left:0; right:0; top:50%; display:flex; justify-content:space-between; pointer-events:none }
.approval-tick { width:2px; height:10px; background:rgba(255,255,255,.15); margin-top:-5px; border-radius:1px }

/* Score: larger font */
.approval-score {
  text-align:center; margin-top:12px;
  font-family:'Orbitron',sans-serif;
  font-size:clamp(1.4em,1.8em,2.4em); /* bump from 1.4em */
  font-weight:700; letter-spacing:.1em;
  transition:color .55s,text-shadow .55s;
}
.approval-verdict {
  text-align:center; font-size:clamp(.66em,.76em,1em); /* bump from .7em */
  letter-spacing:.18em; color:var(--muted);
  margin-top:4px; min-height:18px; transition:color .4s;
}
.approval-mini { display:flex; gap:2px; justify-content:center; margin-top:14px; height:28px; align-items:flex-end; flex-wrap:nowrap; overflow:hidden }
.approval-mini-bar { flex:1; max-width:8px; border-radius:2px 2px 0 0; min-height:3px; transition:height .3s,background .3s }

/* ============================================================
   TIMELINE CARD
   ============================================================ */
.timeline-card {
  background:var(--panel); border:1px solid var(--border);
  border-radius:var(--card-radius); padding:var(--card-pad);
  margin-bottom:var(--gap);
}
.timeline-wrap { width:100%; height:320px } /* doubled from 160px */
.timeline-controls {
  display:flex; align-items:center; gap:8px;
  margin-bottom:10px; justify-content:flex-end;
}
.scale-toggle {
  font-family:'Share Tech Mono',monospace; font-size:.68em;
  letter-spacing:.08em; padding:3px 10px; border-radius:5px;
  border:1px solid var(--border); background:transparent;
  color:var(--muted); cursor:pointer; transition:all .2s;
}
.scale-toggle:hover { border-color:var(--accent); color:var(--accent) }
.scale-toggle.active { background:rgba(0,255,229,.1); border-color:var(--accent); color:var(--accent) }

/* ============================================================
   LEGEND + FEED
   ============================================================ */
.legend-row { display:flex; flex-wrap:wrap; justify-content:center; gap:11px; margin-bottom:14px }
.legend-item { display:flex; align-items:center; gap:5px; font-size:.68em; color:var(--muted) }
.legend-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0 }

.feed-card {
  background:var(--panel); border:1px solid var(--border);
  border-radius:var(--card-radius); padding:14px;
  max-height:200px; overflow-y:auto;
}
.feed-title { font-family:'Orbitron',sans-serif; font-size:.58em; letter-spacing:.2em; color:var(--muted); margin-bottom:7px; display:flex; align-items:center; gap:4px }
.feed-item { font-size:.72em; padding:4px 0; border-bottom:1px solid rgba(255,255,255,.04); display:grid; grid-template-columns:auto 1fr 62px 80px; gap:0 6px; align-items:baseline; animation:fadeIn .2s ease }
@keyframes fadeIn { from { opacity:0; transform:translateY(3px) } }
.feed-user { color:var(--accent); min-width:66px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.feed-msg { color:#6a6a8e; word-break:break-word; white-space:normal }
.feed-meta { display:flex; align-items:center; gap:5px; flex-shrink:0 }
.feed-mood { font-size:.68em; padding:1px 4px; border-radius:4px; white-space:nowrap; text-align:center; display:inline-block; min-width:52px; max-width:72px; overflow:hidden; text-overflow:ellipsis }
.feed-apv { display:flex; align-items:center; gap:3px }
.feed-apv-bar { width:28px; height:4px; border-radius:2px; background:var(--border); overflow:hidden; flex-shrink:0 }
.feed-apv-fill { height:100%; border-radius:2px; transition:width .3s }
.feed-apv-num { font-size:.65em; color:var(--muted); min-width:34px; text-align:right; font-variant-numeric:tabular-nums }
.mood-hype      { background:rgba(0,255,229,.12);  color:var(--hype) }
.mood-funny     { background:rgba(255,230,0,.12);  color:var(--funny) }
.mood-love      { background:rgba(255,45,120,.12); color:var(--love) }
.mood-toxic     { background:rgba(255,72,0,.12);   color:var(--toxic) }
.mood-sad       { background:rgba(155,110,243,.18);color:var(--sad) }
.mood-calm      { background:rgba(79,195,247,.12); color:var(--calm) }
.mood-angry     { background:rgba(255,23,68,.12);  color:var(--angry) }
.mood-excited   { background:rgba(118,255,3,.12);  color:var(--excited) }
.mood-cringe    { background:rgba(224,64,251,.12); color:var(--cringe) }
.mood-wholesome { background:rgba(255,171,64,.12); color:var(--wholesome) }
.mood-confused  { background:rgba(120,144,156,.18);color:var(--confused) }
.mood-neutral   { background:rgba(46,61,94,.35);   color:#4a6688 }
.feed-card::-webkit-scrollbar { width:3px }
.feed-card::-webkit-scrollbar-thumb { background:var(--border) }
.feed-bot { opacity:.35 }
.feed-bot .feed-user { color:var(--muted) }
.mood-bot { background:rgba(255,72,0,.1); color:#ff6622; font-size:.65em; letter-spacing:.05em }

/* bubble tooltip */
#bubbleTip { position:fixed; background:#0d0d1f; border:1px solid #1a1a36; border-radius:6px; padding:5px 10px; font-size:.72em; color:var(--text); pointer-events:none; opacity:0; transition:opacity .15s; z-index:1000; white-space:nowrap }

/* ============================================================
   FEED FONT SIZE SLIDER — inline with feed title
   ============================================================ */
.feed-title-row {
  display:flex; align-items:center; gap:10px; margin-bottom:7px; flex-wrap:wrap;
}
.feed-title-row .feed-title { margin-bottom:0; flex-shrink:0 }
.feed-font-slider-wrap {
  display:flex; align-items:center; gap:6px; margin-left:auto;
}
.feed-font-slider-wrap input[type=range] {
  -webkit-appearance:none; appearance:none; width:100%; max-width:100%; height:6px; background:var(--border); border-radius:3px; outline:none; cursor:pointer; padding:8px 0; background-clip:content-box; touch-action:none;
}
.feed-font-slider-wrap input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%; background:var(--accent); cursor:pointer; box-shadow:0 0 6px rgba(0,255,229,.3); border:2px solid rgba(0,0,0,.4); transition:box-shadow .15s,transform .15s;
}
.feed-font-slider-wrap input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.15); box-shadow:0 0 12px rgba(0,255,229,.5) }
.feed-font-slider-wrap input[type=range]::-webkit-slider-thumb:active { transform:scale(1.25); box-shadow:0 0 18px rgba(0,255,229,.65) }
.feed-font-slider-wrap input[type=range]::-moz-range-thumb { width:20px; height:20px; border-radius:50%; background:var(--accent); cursor:pointer; box-shadow:0 0 6px rgba(0,255,229,.3); border:2px solid rgba(0,0,0,.4) }
.feed-font-slider-wrap input[type=range]::-moz-range-track { height:6px; background:var(--border); border-radius:3px }
.feed-font-slider-label {
  font-size:.6em; color:var(--muted); letter-spacing:.08em; white-space:nowrap;
}
.feed-font-slider-val {
  font-size:.62em; color:var(--accent); min-width:22px; text-align:right;
}

.filtered-feed-filter-wrap input[type=text] {
  background:#080814; border:1px solid var(--border); border-radius:6px;
  color:var(--text); font-family:'Share Tech Mono',monospace;
  outline:none; transition:border-color .2s,box-shadow .2s;
}
.filtered-feed-filter-wrap input[type=text]:focus { border-color:var(--accent); box-shadow:0 0 8px rgba(0,255,229,.15) }
.filtered-feed-filter-wrap input[type=text].regex-error { border-color:var(--accent2); box-shadow:0 0 8px rgba(255,45,120,.2) }

/* Inside resizable cards, collapsible-body must participate in flex so charts fill remaining space */
.collapsible-body { display:flex; flex-direction:column }
.resizable .collapsible-body { flex:1; min-height:0; display:flex; flex-direction:column }
.resizable .collapsible-body .chart-wrap,
.resizable .collapsible-body .timeline-wrap { flex:1; min-height:0 }
.resizable .collapsible-body #bubbleCanvas { flex:1; min-height:0; height:auto }
.resizable .collapsible-body #feedList { flex:1; min-height:0; overflow-y:auto }

/* ============================================================
   LAYOUT MANAGER — in settings dropdown
   ============================================================ */
.layout-section { padding:4px 10px 8px }
.layout-item {
  display:flex; align-items:center; gap:6px;
  padding:5px 6px; border-radius:5px;
  font-size:.72em; color:var(--text); letter-spacing:.04em;
  cursor:grab; user-select:none;
  border:1px solid transparent;
  transition:background .12s, border-color .12s;
}
.layout-item:hover { background:rgba(0,255,229,.05) }
.layout-item.dragging { opacity:.5; border-color:var(--accent) }
.layout-item .drag-handle {
  color:var(--muted); font-size:.9em; cursor:grab; flex-shrink:0; line-height:1;
}
.layout-item .layout-item-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.layout-inline-toggle {
  background:transparent; border:1px solid var(--border); border-radius:4px;
  color:var(--muted); font-size:.6em; padding:2px 5px; cursor:pointer;
  letter-spacing:.06em; transition:all .15s; flex-shrink:0; white-space:nowrap;
}
.layout-inline-toggle:hover { border-color:var(--accent); color:var(--accent) }
.layout-inline-toggle.active { background:rgba(0,255,229,.1); border-color:var(--accent); color:var(--accent) }
.layout-apply-btn {
  display:block; width:100%; margin-top:6px; padding:6px 0;
  font-family:'Orbitron',sans-serif; font-size:.58em; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  background:rgba(0,255,229,.08); border:1px solid var(--accent);
  border-radius:5px; color:var(--accent); cursor:pointer;
  transition:background .15s;
}
.layout-apply-btn:hover { background:rgba(0,255,229,.18) }
.layout-drop-indicator {
  height:2px; background:var(--accent); border-radius:1px;
  margin:1px 0; opacity:0; transition:opacity .1s;
}
.layout-drop-indicator.active { opacity:1 }

/* Section card title */
.card-title { font-family:'Orbitron',sans-serif; font-size:clamp(.52em,.6em,1em); letter-spacing:.18em; color:var(--muted); margin-bottom:10px; text-transform:uppercase; display:flex; align-items:center; gap:5px }

/* ============================================================
   RESIZABLE CARDS — custom JS drag handle replaces native resizer.
   Cards marked .resizable have overflow:hidden (clips content at
   the card boundary) and a .resize-handle child injected by JS.
   ============================================================ */
.resizable {
  overflow:hidden;
  min-height:80px;
  min-width:120px;
  box-sizing:border-box;
  position:relative; /* needed so handle can be absolute inside */
}

/* Custom resize handle — large enough to grab comfortably */
.resize-handle {
  position:absolute;
  bottom:0; right:0;
  width:22px; height:22px;
  cursor:nwse-resize;
  z-index:10;
  /* Visible diagonal grip lines */
  background:
    linear-gradient(
      135deg,
      transparent 30%,
      rgba(0,255,229,.22) 30%, rgba(0,255,229,.22) 38%,
      transparent 38%,
      transparent 52%,
      rgba(0,255,229,.22) 52%, rgba(0,255,229,.22) 60%,
      transparent 60%,
      transparent 74%,
      rgba(0,255,229,.22) 74%, rgba(0,255,229,.22) 82%,
      transparent 82%
    );
  border-radius:0 0 var(--card-radius) 0;
  transition:background .2s;
}
.resize-handle:hover {
  background:
    linear-gradient(
      135deg,
      transparent 30%,
      rgba(0,255,229,.55) 30%, rgba(0,255,229,.55) 38%,
      transparent 38%,
      transparent 52%,
      rgba(0,255,229,.55) 52%, rgba(0,255,229,.55) 60%,
      transparent 60%,
      transparent 74%,
      rgba(0,255,229,.55) 74%, rgba(0,255,229,.55) 82%,
      transparent 82%
    );
}

/* Chart cards: allow flex child (chart-wrap) to fill remaining height */
.chart-card.resizable {
  align-items:stretch;
  display:flex;
  flex-direction:column;
}
/* chart-wrap fills remaining flex space */
.chart-card.resizable .chart-wrap {
  flex:1;
  max-width:100%;
  aspect-ratio:unset;
  width:100%;
  min-height:0;
}

/* Bubble card: canvas fills 100% of card interior minus padding/title */
.bubble-card.resizable {
  display:flex;
  flex-direction:column;
}
.bubble-card.resizable #bubbleCanvas {
  flex:1;
  height:auto;
}

/* Timeline cards (mood + approval): make inner timeline-wrap fill the resized card */
.timeline-card.resizable {
  display:flex;
  flex-direction:column;
}
.timeline-card.resizable .timeline-wrap {
  flex:1;
  height:auto;
}

/* Feed card: inner list scrolls within the resized boundary */
.feed-card.resizable {
  display:flex;
  flex-direction:column;
  max-height:none;
  height:200px;
}
.feed-card.resizable #feedList,
.feed-card.resizable #filteredFeedList,
.feed-card.resizable #outlierFeedList {
  flex:1;
  overflow-y:auto;
  min-height:0;
}

/* Approval card: resizable layout */
.approval-card.resizable {
  display:flex;
  flex-direction:column;
}
.approval-card.resizable .collapsible-body {
  flex:1; min-height:0; justify-content:center;
}

/* ============================================================
   LIST PRESET — body.preset-list overrides
   In list mode everything stacks single-column, charts are
   wider/shorter, feed is taller. No JS restructuring needed.
   ============================================================ */
body.preset-list .charts-top {
  grid-template-columns:1fr;
}
body.preset-list .chart-wrap {
  max-width:100%;
  aspect-ratio:unset;
  height:240px; /* fixed height instead of square */
}
/* In list mode the bubble canvas is taller */
body.preset-list #bubbleCanvas {
  height:200px;
}
/* Timeline taller in list mode */
body.preset-list .timeline-wrap {
  height:360px;
}
/* Feed taller in list mode */
body.preset-list .feed-card {
  max-height:320px;
}
/* In list mode, stat boxes use all available width */
body.preset-list .stats-row {
  gap:6px;
}
body.preset-list .stat-box {
  flex:1; min-width:70px;
}
/* Spacing between all cards is slightly increased in list mode */
body.preset-list { --gap:20px }

/* ============================================================
   CUSTOM LAYOUT — dynamic container arrangement
   ============================================================ */
.layout-row {
  display:grid; gap:var(--gap); margin-bottom:var(--gap);
}
.layout-row.cols-1 { grid-template-columns:1fr }
.layout-row.cols-2 { grid-template-columns:repeat(2,1fr) }
.layout-row.cols-3 { grid-template-columns:repeat(3,1fr) }
.layout-row.cols-4 { grid-template-columns:repeat(4,1fr) }
.layout-row.cols-5 { grid-template-columns:repeat(5,1fr) }
.layout-row.cols-6 { grid-template-columns:repeat(6,1fr) }
.layout-row.cols-7 { grid-template-columns:repeat(7,1fr) }
.layout-row.cols-8 { grid-template-columns:repeat(8,1fr) }
@media(max-width:660px) {
  .layout-row.cols-2, .layout-row.cols-3, .layout-row.cols-4,
  .layout-row.cols-5, .layout-row.cols-6, .layout-row.cols-7,
  .layout-row.cols-8 { grid-template-columns:1fr }
}

/* When using custom layout, hide the default structure wrappers */
body.preset-custom .charts-top,
body.preset-custom .section-divider { display:none }
body.preset-custom #customLayoutContainer { display:block }
#customLayoutContainer { display:none }