/* =========================================================
  O V R D  —  Neon CRT / Apocalyptic Console UI
  Single-file replacement
========================================================= */

:root{
  /* Core palette */
  --bg:#0A0C0F; --panel:#0E1116;
  --ink:#D3DBE4; --muted:#9AA6B2;

  --red:#E0112B; --green:#A2FF3C; --amber:#FFD300;
  --blue:#67C3FF; --vio:#BFA7FF; --mint:#7DFFB0; --rose:#FF9FB3; --gold:#FFCF33;

  /* Glow helpers */
  --glow-red: 0 0 16px rgba(224,17,43,.42);
  --glow-green: 0 0 14px rgba(162,255,60,.28);
  --glow-amber: 0 0 14px rgba(255,211,0,.28);

  /* Terminal scale */
  --terminal-size: 21px;
  --terminal-line: 1.9;

  /* Surfaces */
  --border:#161b22;
  --border-soft:#141920;
  --panel-grad: linear-gradient(180deg,#0D1014 0%, #0B0E12 60%, #0A0D11 100%);

  /* Depth */
  --ring: inset 0 0 0 1px #0A0D11, 0 0 40px rgba(224,17,43,.06);
}

*{box-sizing:border-box}
html,body,#root{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--muted);
  background:radial-gradient(1300px 900px at 70% -10%, #10141b 0%, #0B0D10 48%, #090B0E 100%);
  font-family:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow:hidden;
}
.app{display:flex;flex-direction:column;height:100%}

/* ---------- Header / Clock ---------- */
header{padding:20px 24px 6px;position:relative}
.clock-wrap{
  position:relative;background:var(--panel-grad);
  border:1px solid var(--border); box-shadow:var(--ring);
  padding:20px;border-radius:10px;overflow:hidden;
  backdrop-filter:saturate(1.1) blur(.5px);
}
.clock{
  font-family:'JetBrains Mono', monospace; color:var(--red);
  font-size:clamp(34px,6.4vw,84px); letter-spacing:.06em; text-align:center;
  text-shadow:var(--glow-red);
}
.clock-sub{
  margin-top:8px;text-align:center;font-size:12px;color:#8b9097;
  letter-spacing:.22em;text-transform:uppercase
}
.scanline{
  position:absolute;left:0;right:0;top:-100%;height:100%;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.045),rgba(255,255,255,.045) 1px,transparent 2px,transparent 3px);
  animation:scan 12s linear infinite;mix-blend-mode:overlay
}
@keyframes scan{from{transform:translateY(0)}to{transform:translateY(200%)}}
.cracks{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(220px 220px at 90% 10%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(160px 160px at 10% 15%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(280px 280px at 80% 80%, rgba(255,255,255,.05), transparent 70%);
  mask-image:radial-gradient(120% 120% at 50% 50%, #000, rgba(0,0,0,.2));
  opacity:.22; filter:blur(.25px)
}
.crack-lines::before,.crack-lines::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(22deg,transparent 0 28px,rgba(255,255,255,.07) 29px 29.7px,transparent 30px 56px),
    repeating-linear-gradient(-17deg,transparent 0 34px,rgba(255,255,255,.05) 35px 35.6px,transparent 36px 70px);
  mix-blend-mode:overlay;opacity:.16
}

/* ---------- Layout ---------- */
main{
  display:grid;grid-template-columns:260px 1fr;gap:16px;padding:8px 24px 22px;height:100%;
}
@media(max-width:1020px){main{grid-template-columns:1fr}}
.panel{
  background:var(--panel-grad); border:1px solid var(--border);
  border-radius:10px; position:relative; overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.25), inset 0 0 0 1px #0A0D11;
}
.panel-title{
  position:sticky; top:0; z-index:2;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  padding:10px 12px; color:#8b9097; background:#0C1015CC; backdrop-filter:saturate(1.2) blur(4px);
  border-bottom:1px solid var(--border-soft)
}

/* ---------- Sidebar ---------- */
.sidebar{display:flex;flex-direction:column;height:calc(100% - 2px)}
.stats{padding:10px 12px;display:grid;gap:12px}
.meter .label{font-size:11px;color:#8b9097;letter-spacing:.16em;text-transform:uppercase;margin-bottom:6px}
.bar{font-family:'JetBrains Mono',monospace;color:var(--ink)}

/* ---------- Terminal ---------- */
.terminal{height:calc(100% - 24px);display:flex;flex-direction:column}

/* Feed CRT */
.feed{
  flex:1; overflow:auto; padding:18px 22px 24px;
  font-size: var(--terminal-size);
  line-height: var(--terminal-line);
  position:relative; background:var(--panel-grad);
  scrollbar-gutter:stable both-edges;
}
.feed::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.03) 50%,rgba(0,0,0,.03) 50%);
  background-size:100% 3px;mix-blend-mode:overlay;opacity:.55
}
.feed::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 160px rgba(0,0,0,.65)
}

/* Lines */
.line{display:block;margin:10px 0; position:relative;}
.line::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px;
  height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
  opacity:.12;
}
.line .text{ white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere; }

/* Speakers */
.omega .tag{color:var(--red);font-weight:700;text-shadow:var(--glow-red)}
.omega .text{color:#FF6A7C;text-shadow:0 0 7px rgba(255,106,124,.16);font-weight:650;letter-spacing:.01em}
.sigma .tag{color:var(--green);font-weight:700;text-shadow:var(--glow-green)}
.sigma .text{color:#D6FF84;text-shadow:0 0 7px rgba(214,255,132,.16);font-weight:650;letter-spacing:.01em}
.system .tag{color:var(--amber);text-shadow:var(--glow-amber)}
.system .text{color:var(--ink)}

/* Topic/Phase badge */
.badge{
  float:right; margin-left:10px; padding:3px 10px; border-radius:999px;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  background:linear-gradient(180deg,#121720 0%, #0F141C 100%);
  border:1px solid #1E2430; color:#9aa6b2; box-shadow:inset 0 0 0 1px #0A0E15;
  opacity:.95; transform:translateZ(0);
}
.badge .dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px;box-shadow:0 0 9px currentColor;}
.badge.prophecy .dot{ background:var(--gold); color:var(--gold) }
.badge.countdown .dot{ background:var(--red); color:var(--red) }
.badge.banking .dot{ background:var(--blue); color:var(--blue) }
.badge.religion .dot{ background:var(--green); color:var(--green) }
.badge.education .dot{ background:var(--vio); color:var(--vio) }
.badge.law .dot{ background:var(--rose); color:var(--rose) }
.badge.ecology .dot{ background:var(--mint); color:var(--mint) }
.badge.culture .dot{ background:#FFDA7D; color:#FFDA7D }
.badge.methods .dot{ background:#9AD1FF; color:#9AD1FF }

/* ASCII */
.ascii{
  color:var(--amber); text-align:center; white-space:pre; margin:12px 0 14px;
  text-shadow:0 0 12px rgba(255,211,0,.16); font-size:16px; line-height:1.55;
  letter-spacing:.02em;
}

/* Footer */
.footer{
  text-align:center;font-size:11px;color:#6f7682;letter-spacing:.18em;text-transform:uppercase;padding:8px 0 12px
}

/* Static film grain */
.grain{
  position:fixed;inset:0;pointer-events:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="128" height="128" filter="url(%23n)" opacity="0.035"/></svg>');
  opacity:.8; mix-blend-mode:soft-light;
}

/* Scrollbars */
.feed::-webkit-scrollbar{width:10px}
.feed::-webkit-scrollbar-track{background:#0b0e12}
.feed::-webkit-scrollbar-thumb{background:#1a2029;border-radius:8px;border:2px solid #0b0e12}
.feed::-webkit-scrollbar-thumb:hover{background:#232a36}

/* Selection */
::selection{background:rgba(224,17,43,.32);color:#fff}

/* Responsive type */
@media (min-width:1200px){
  .feed{ font-size: clamp(22px, 1.5vw, 26px); line-height: 2.0; }
}
@media (max-width:900px){
  .feed{ font-size: 19px; line-height: 1.85; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .scanline{animation:none}
  .feed::before{opacity:.3}
}

/* =========================
   MOBILE REFINEMENTS
   ========================= */

@media (max-width: 640px) {
  html, body, #root, .app { height:auto; min-height:100%; }
  body {
    overflow:auto; -webkit-overflow-scrolling:touch;
    padding-bottom: env(safe-area-inset-bottom);
  }

  header { padding: 14px 14px 6px; }

  .clock-wrap {
    padding: 14px; border-radius: 10px;
    box-shadow: inset 0 0 0 1px #0a0d11, 0 0 26px rgba(224,17,43,.05);
  }
  .clock {
    font-size: clamp(24px, 10vw, 40px);
    letter-spacing: .04em; text-shadow: 0 0 7px rgba(224,17,43,.28);
  }
  .clock-sub { font-size:10px; letter-spacing:.16em; margin-top:6px; }

  main {
    grid-template-columns: 1fr;
    gap: 12px; padding: 8px 14px 16px;
    height:auto; min-height: 100dvh;
  }

  .panel { border-radius:10px; }
  .panel-title { font-size:10px; letter-spacing:.14em; padding:8px 10px; }

  .stats { gap:8px; padding:10px; }
  .meter .label { font-size:10px; letter-spacing:.12em; margin-bottom:4px; }

  .terminal { height:auto; }
  .feed {
    padding: 12px 12px 16px;
    font-size: 15px; line-height: 1.6;
    max-height:none; overflow:visible;
    word-break:break-word; white-space:normal;
  }
  .line { margin: 6px 0; }
  .omega .text { color: #ff7587; }
  .sigma .text { color: #e6ffa0; }

  .ascii {
    margin: 8px 0 10px; font-size: 13px;
    text-shadow: 0 0 7px rgba(255,211,0,.14);
    white-space: pre-wrap; word-break: break-word;
  }

  .footer { font-size:9px; letter-spacing:.16em; padding:10px 0 18px; }
  .scanline { opacity:.5; }
  .cracks   { opacity:.18; }
}

/* Ultra-small */
@media (max-width: 400px) {
  .clock { font-size: clamp(20px, 11vw, 34px); }
  .feed  { font-size: 14px; }
}

/* =========================
   Conversation log UI (sidebar modal)
========================= */
.convo-list { padding:10px; display:flex; flex-direction:column; gap:8px; }
.convo-item {
  text-align:left; background:#0F1216; border:1px solid var(--border);
  color:#C9D1D9; border-radius:8px; padding:10px 12px; cursor:pointer;
  transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.convo-item:hover{
  transform:translateY(-1px);
  border-color:#243042;
  box-shadow:0 6px 16px rgba(0,0,0,.28), 0 0 0 1px #0A0E15 inset;
}
.convo-item .t { font-weight:700; font-size:13px; color:#E0E6EE; }
.convo-item .m { opacity:.7; font-size:11px; display:flex; gap:10px; margin-top:4px; }

.convo-modal { position:fixed; inset:0; background:rgba(5,7,10,.66); display:flex; align-items:center; justify-content:center; z-index:50; }
.convo-dialog {
  width:min(960px,92vw); max-height:82vh;
  background:linear-gradient(180deg,#0F1217 0%, #0C1015 100%);
  border:1px solid var(--border); border-radius:12px; display:flex; flex-direction:column;
  box-shadow:0 18px 60px rgba(0,0,0,.5), inset 0 0 0 1px #0A0E15;
}
.convo-head { display:flex; gap:12px; align-items:center; padding:12px 14px; border-bottom:1px solid var(--border-soft); background:#0C1015CC; backdrop-filter:saturate(1.15) blur(4px); }
.convo-head .title { font-weight:800; color:#E6EDF6; }
.convo-head .meta { font-size:12px; opacity:.75; }
.convo-head .x { margin-left:auto; background:transparent; border:0; color:#A9B2BE; font-size:20px; cursor:pointer; }
.convo-body { padding:14px 16px; overflow:auto; }

/* =========================
   Micro flourishes
========================= */
@keyframes caret { 0%,60%{opacity:1} 61%,100%{opacity:.05} }
.caret { display:inline-block; width:1ch; text-align:center; animation:caret 1.2s steps(1) infinite; color:var(--amber); }

@keyframes flicker { 0%,100%{opacity:1} 49%{opacity:.98} 50%{opacity:.92} 51%{opacity:1} }
.flicker { animation:flicker 7s linear infinite; opacity:1; }