/* ─────────────────────────────────────────────────────────────
   Lumina Hyperframes — shared tokens
   Shipped design system (Blue #1E5BA8, Inter Tight, JetBrains Mono)
   ───────────────────────────────────────────────────────────── */

:root {
  /* Surfaces */
  --surface:             #F8F9FD;
  --surface-container:   #EEF1F8;
  --surface-high:        #D8DCE8;
  --surface-bright:      #FFFFFF;
  --paper-blue:          #EEF3FA;   /* section tint */

  /* Ink */
  --ink:   #1A1D24;
  --ink-2: #555D6E;
  --ink-3: #808899;
  --ink-4: #9DA3B0;

  /* Borders */
  --border:         #E0E4ED;
  --border-subtle:  #EEF1F8;

  /* Blue family */
  --blue-primary: #1E5BA8;
  --blue-ink:     #091E42;
  --blue-deep:    #0747A6;
  --blue-mist:    #EBF2FF;
  --blue-paper:   #0F2540;

  /* Secondary palette */
  --terracotta:      #C4704B;
  --terracotta-soft: #E5C3B0;
  --amber:           #D4A53F;
  --sage:            #8BA888;
  --coral:           #E87461;
  --cream:           #F6F1E6;

  /* Status */
  --success:        #2D9F6F;
  --success-soft:   rgba(45,159,111,0.12);

  /* Type */
  --font-display: 'Inter Tight', system-ui, sans-serif;
  --font-ui:      'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
}

[data-theme="dark"] {
  --surface:           #181A1F;
  --surface-container: #21242A;
  --surface-high:      #2A2E35;
  --surface-bright:    #272B33;
  --paper-blue:        #1C2230;

  --ink:   #EEF0F5;
  --ink-2: #9DA3B0;
  --ink-3: #6C7385;
  --ink-4: #555D6E;

  --border:        #353840;
  --border-subtle: #2A2E35;

  --blue-primary:  #6FB3C9;   /* desaturated — no neon */
  --blue-mist:     #122A33;
  --blue-ink:      #B9DCE6;
  --blue-paper:    #0F2540;

  --terracotta:      #D4816B;
  --terracotta-soft: #8D4D3A;

  --success:      #3DB880;
  --success-soft: rgba(61,184,128,0.16);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  width: 1920px; height: 1080px;
  overflow: hidden;
  background: var(--surface);
  font-family: var(--font-display);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#root {
  position: relative;
  width: 1920px; height: 1080px;
  background: var(--surface);
  overflow: hidden;
}

/* ── Top bar (replaces floating "Lumina" wordmark) ── */
.top-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 60px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 48px;
  background: var(--surface);
  z-index: 10;
}
.top-bar .brand {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-weight: 500;
  letter-spacing: 0.22em; font-size: 12px;
  color: var(--ink);
}
.top-bar .brand-mark {
  width: 22px; height: 22px; border-radius: 5px;
  display: grid; place-items: center;
  overflow: hidden;
  background: var(--blue-primary);
}
.top-bar .brand-mark img { width: 100%; height: 100%; object-fit: cover; }

.top-bar .breadcrumb {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}
.top-bar .breadcrumb .sep { opacity: 0.35; }
.top-bar .breadcrumb .current { color: var(--ink); }

.top-bar .meta {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--ink-3);
}
.top-bar .live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px var(--success-soft);
}

/* ── Progress rail (hairline that fills as beats land) ── */
.progress-rail {
  position: absolute;
  top: 60px; left: 0; right: 0;
  height: 2px;
  z-index: 11;
  background: transparent;
}
.progress-rail .fill {
  height: 100%; width: 0%;
  background: var(--blue-primary);
  transform-origin: left center;
}

/* ── Main frame (no heavy shadow, paper-blue tint) ── */
.doc-frame {
  position: absolute;
  top: 100px; left: 80px; right: 80px; bottom: 80px;
  background: var(--surface-bright);
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: 0 24px 48px -32px rgba(9,30,66,0.12);
  display: grid;
  overflow: hidden;
}

/* ── Chrome (doc title bar inside frame) ── */
.doc-chrome {
  grid-column: 1 / -1;
  padding: 18px 28px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface);
}
.doc-tab {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 14px;
  color: var(--ink-2);
}
.doc-tab svg {
  width: 18px; height: 18px;
  color: var(--ink-3);
}
.doc-meta {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--ink-3);
}
.doc-meta .sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.5; }

.share-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  background: var(--ink); color: var(--surface-bright);
  border-radius: 8px;
  font-family: var(--font-display); font-weight: 500; font-size: 13px;
  letter-spacing: -0.005em;
  transform-origin: center;
}
[data-theme="dark"] .share-btn { background: var(--ink); color: var(--surface); }
.share-btn .arrow { font-size: 10px; opacity: 0.7; }

/* ── Chat pane (left) ── */
.chat-pane {
  padding: 40px 36px;
  background: var(--surface);
  border-right: 1px solid var(--border-subtle);
  overflow: hidden;
  min-height: 0;
  display: flex; flex-direction: column; gap: 18px;
}

.chat-msg {
  font-family: var(--font-display);
  font-size: 22px; line-height: 1.45;
  max-width: 620px;
  letter-spacing: -0.01em;
}
.chat-msg.user {
  color: var(--ink-2);
  padding-left: 16px;
  border-left: 2px solid var(--blue-primary);
  font-weight: 400;
}
.chat-msg.ai { color: var(--ink); font-weight: 400; }

/* ── Context strip (subtle, not dashed) ── */
.context-strip {
  padding: 14px 18px;
  background: var(--blue-mist);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  display: flex; flex-direction: column; gap: 12px;
}
[data-theme="dark"] .context-strip {
  background: var(--blue-mist);
  border-color: var(--border);
}
.context-label {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--blue-primary);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
}
.spinner {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid rgba(30,91,168,0.2);
  border-top-color: var(--blue-primary);
}
.checkmark {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--success); color: white;
  display: grid; place-items: center;
  font-size: 9px; font-weight: 700;
}
.context-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tool-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 8px;
  background: var(--surface-bright);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  font-family: var(--font-display); font-size: 13px;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(9,30,66,0.04);
  transform-origin: left center;
}
[data-theme="dark"] .tool-chip { background: var(--surface-high); border-color: var(--border); }
.tool-chip img { width: 18px; height: 18px; object-fit: contain; border-radius: 3px; }
.tool-chip .count {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-3);
  padding-left: 8px; border-left: 1px solid var(--border-subtle);
  margin-left: 2px;
  letter-spacing: 0.02em;
}

/* ── Reset veil ── */
.reset-veil {
  position: absolute; inset: 0;
  background: var(--surface);
  pointer-events: none;
}