/* ────────────────────────────────────────────────────────────────────────
     DailyDex Cockpit — visual system
     Theme: studio cockpit, dense, info-rich. Source colors drive accents.
     ──────────────────────────────────────────────────────────────────────── */
  :root {
    /* Dark cockpit (default) */
    --bg-0: #07090C;       /* deepest, page bg */
    --bg-1: #0D1117;       /* panel */
    --bg-2: #141923;       /* raised */
    --bg-3: #1B2230;       /* hover / chip */
    --line: #1F2632;
    --line-2: #2A3343;
    --line-hi: #3A4658;
    --text-hi: #ECEFF4;
    --text:    #C7CDD9;
    --text-mid:#8B93A3;
    --text-lo: #5A6273;
    --text-vlo:#3D4452;

    /* Signal palette */
    --signal:        #F0B72F;   /* primary — DailyDex amber */
    --signal-hot:    #FF7A1A;
    --signal-cool:   #62A8FF;
    --signal-up:     #7CFFB2;
    --signal-down:   #FF6B6B;

    /* Source family colors */
    --src-github:    #7DDE5B;
    --src-hf:        #FFD021;
    --src-youtube:   #FF5A5A;
    --src-blogs:     #62A8FF;
    --src-papers:    #B084F2;

    /* Type */
    --font-sans: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;
    --font-serif:"Instrument Serif", "Iowan Old Style", Georgia, serif;

    /* Geometry */
    --r-sm: 4px;
    --r-md: 6px;
    --r-lg: 10px;
    --r-xl: 14px;

    /* Layout */
    --nav-w: 232px;
    --rail-w: 312px;
    --topbar-h: 56px;
    --dock-h: 60px;
  }

  /* Light theme override */
  html[data-theme="light"] {
    --bg-0: #F4F2EC;
    --bg-1: #FFFFFF;
    --bg-2: #FBFAF6;
    --bg-3: #EEEBE2;
    --line: #E5E0D2;
    --line-2: #D7D1C0;
    --line-hi: #BBB39E;
    --text-hi: #15171A;
    --text:    #303339;
    --text-mid:#646A77;
    --text-lo: #9098A6;
    --text-vlo:#C0C5D0;
    --signal: #D4881A;
  }

  /* Editorial (warm magazine) */
  html[data-theme="editorial"] {
    --bg-0: #F2EDE2;
    --bg-1: #F8F4EA;
    --bg-2: #FFFCF3;
    --bg-3: #EAE3D1;
    --line: #DCD3BA;
    --line-2: #C6BB9B;
    --line-hi: #9E9474;
    --text-hi: #1A1611;
    --text:    #2E281F;
    --text-mid:#6B6450;
    --text-lo: #968F77;
    --text-vlo:#C5BFA8;
    --signal: #C44A1F;
    --signal-cool: #2C5F8D;
    --font-sans: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  }

  * { box-sizing: border-box; }
  html, body {
    margin: 0; padding: 0;
    background: var(--bg-0);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  /* Subtle grain on dark to feel like a real studio surface */
  html[data-theme="dark"] body::before,
  html:not([data-theme]) body::before {
    content: "";
    position: fixed; inset: 0;
    pointer-events: none;
    background:
      radial-gradient(1200px 800px at 70% -10%, rgba(240,183,47,0.06), transparent 60%),
      radial-gradient(900px 700px at -10% 110%, rgba(98,168,255,0.05), transparent 60%);
    z-index: 0;
  }

  /* Scrollbar */
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }

  /* Typography utilities */
  .mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1, "ss01" 1; }
  .serif { font-family: var(--font-serif); }
  .uppercase { letter-spacing: 0.08em; text-transform: uppercase; }
  .tnum { font-variant-numeric: tabular-nums; }
  .micro { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-lo); }
  .label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mid); }

  /* Buttons (primitive) */
  .btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--line-2);
    background: var(--bg-2);
    color: var(--text);
    border-radius: var(--r-md);
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 120ms, background 120ms, color 120ms;
  }
  .btn:hover { border-color: var(--line-hi); background: var(--bg-3); color: var(--text-hi); }
  .btn.primary {
    background: var(--signal); color: #1A1100; border-color: var(--signal);
  }
  .btn.primary:hover { background: #FFC74C; }
  .btn.ghost { background: transparent; border-color: var(--line); }
  .btn.icon { padding: 6px 8px; }

  .chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 7px;
    border: 1px solid var(--line-2);
    background: var(--bg-2);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.04em;
    color: var(--text-mid);
  }
  .chip.dot::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
  }

  .panel {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
  }

  /* Cross-hair corner accent for cockpit panels */
  .crosshair {
    position: relative;
  }
  .crosshair::before, .crosshair::after,
  .crosshair > .ch-tr, .crosshair > .ch-bl, .crosshair > .ch-br {
    content: ""; position: absolute; width: 10px; height: 10px;
    border-color: var(--line-hi); pointer-events: none;
  }
  .crosshair::before { top: -1px; left: -1px; border-top: 1px solid; border-left: 1px solid; }
  .crosshair::after  { top: -1px; right: -1px; border-top: 1px solid; border-right: 1px solid; }
  .crosshair > .ch-bl { bottom: -1px; left: -1px; border-bottom: 1px solid var(--line-hi); border-left: 1px solid var(--line-hi); }
  .crosshair > .ch-br { bottom: -1px; right: -1px; border-bottom: 1px solid var(--line-hi); border-right: 1px solid var(--line-hi); }

  /* App layout */
  .app {
    position: relative;
    display: grid;
    grid-template-columns: var(--nav-w) 1fr var(--rail-w);
    grid-template-rows: var(--topbar-h) 1fr var(--dock-h);
    grid-template-areas:
      "nav  top   top"
      "nav  main  rail"
      "nav  dock  dock";
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    z-index: 1;
  }

  .nav      { grid-area: nav;  border-right: 1px solid var(--line); background: var(--bg-1); }
  .topbar   { grid-area: top;  border-bottom: 1px solid var(--line); background: var(--bg-1); }
  .main     { grid-area: main; overflow: hidden; position: relative; }
  .rail     { grid-area: rail; border-left: 1px solid var(--line); background: var(--bg-1); overflow: hidden; }
  .dock     { grid-area: dock; border-top: 1px solid var(--line); background: var(--bg-1); }

  .main-scroll {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 24px 24px;
  }

  /* Selection */
  ::selection { background: rgba(240,183,47,0.4); color: var(--text-hi); }

  /* Animations */
  @keyframes blink { 0%, 60% { opacity: 1; } 70%, 100% { opacity: 0.15; } }
  @keyframes scan  { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
  @keyframes ping  { 0% { transform: scale(0.3); opacity: 0.9; } 80%, 100% { transform: scale(2.4); opacity: 0; } }
  @keyframes pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
  @keyframes radarSweep { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

  .blink { animation: blink 1.2s infinite; }
  .pulse-anim { animation: pulse 2.2s ease-in-out infinite; }

  /* Hide tweaks default ugliness */
  [hidden] { display: none !important; }

  /* Markdown styling inside Chat & Copilot panels */
  .markdown-content p {
    margin: 0 0 10px 0;
    line-height: 1.5;
  }
  .markdown-content p:last-child {
    margin-bottom: 0;
  }
  .markdown-content strong {
    color: var(--text-hi);
    font-weight: 600;
  }
  .markdown-content ul, .markdown-content ol {
    margin: 0 0 10px 0;
    padding-left: 20px;
  }
  .markdown-content li {
    margin-bottom: 4px;
    line-height: 1.45;
  }
  .markdown-content code {
    font-family: var(--font-mono);
    font-size: 11.5px;
    background: var(--bg-3);
    color: var(--signal);
    padding: 2px 4px;
    border-radius: 3px;
    border: 1px solid var(--line-hi);
  }
  .markdown-content pre {
    background: var(--bg-0);
    border: 1px solid var(--line-2);
    border-radius: var(--r-md);
    padding: 10px 12px;
    overflow-x: auto;
    margin: 10px 0;
  }
  .markdown-content pre code {
    background: transparent;
    border: none;
    color: var(--text-hi);
    padding: 0;
    font-size: 11px;
    line-height: 1.4;
  }
  .markdown-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 12px;
    background: rgba(7, 9, 12, 0.4);
    border-radius: var(--r-md);
    overflow: hidden;
  }
  .markdown-content th, .markdown-content td {
    padding: 8px 10px;
    border: 1px solid var(--line-2);
    text-align: left;
  }
  .markdown-content th {
    background: var(--bg-3);
    color: var(--text-hi);
    font-family: var(--font-mono);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.05em;
  }
  .markdown-content tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.02);
  }
  .markdown-content tr:hover td {
    background: var(--bg-3);
  }