/* EA Capital console — strict monochrome theme.
   Light mode: everything #FFFFFF, all text #000000.
   Dark mode:  everything #000000, all text #FFFFFF.
   Borders define structure. No grey patches, no navy fills. */

/* ---------- Tokens ---------- */
:root {
  --brand-primary: #14213D;        /* used by charts only */
  --brand-accent:  #3D5A99;        /* used by charts only */
}

:root,
html[data-theme="light"] {
  --bg-base: #FFFFFF;
  --bg-surface-hover: #F5F5F5;     /* tiniest hover hint */
  --border-subtle: #D4D4D4;
  --text-primary: #000000;
  --text-muted: #525252;
  color-scheme: light;
}

html.dark,
html[data-theme="dark"] {
  --bg-base: #000000;
  --bg-surface-hover: #1A1A1A;
  --border-subtle: #333333;
  --text-primary: #FFFFFF;
  --text-muted: #A3A3A3;
  color-scheme: dark;
}

html, body {
  background-color: var(--bg-base);
  color: var(--text-primary);
}

/* ---------- All backgrounds → page colour ----------
   slate-300 / dark:slate-600 deliberately excluded — they're the toggle
   track's OFF state and need to stay visibly grey. */
.bg-white,
.bg-slate-50, .bg-slate-100, .bg-slate-200, .bg-slate-700,
.bg-navy-50, .bg-navy-100, .bg-navy-200, .bg-navy-300, .bg-navy-500,
.bg-navy-700, .bg-navy-800, .bg-navy-900, .bg-navy-950,
.bg-bronze-50, .bg-bronze-100, .bg-bronze-300, .bg-bronze-500,
.bg-bronze-600, .bg-bronze-700, .bg-bronze-900,
html.dark .dark\:bg-slate-700,
html.dark .dark\:bg-slate-800,
html.dark .dark\:bg-slate-800\/40,
html.dark .dark\:bg-slate-800\/50,
html.dark .dark\:bg-slate-900,
html.dark .dark\:bg-slate-950,
html.dark .dark\:bg-slate-950\/40,
html.dark .dark\:bg-navy-800,
html.dark .dark\:bg-navy-900,
html.dark .dark\:bg-bronze-500\/15,
html.dark .dark\:bg-bronze-500\/20 {
  background-color: var(--bg-base) !important;
}

/* ---------- Toggle (agent mode) ----------
   - Track stays visibly grey when off, primary when on.
   - Knob is a CHILD of the track, not a sibling of the input, so
     Tailwind's `peer-checked:translate-x-4` doesn't reach it. We slide
     it explicitly via a descendant selector. */
.bg-slate-300 { background-color: var(--border-subtle) !important; }
html.dark .dark\:bg-slate-600 { background-color: var(--border-subtle) !important; }
.peer:checked ~ .peer-checked\:bg-bronze-500 {
  background-color: var(--text-primary) !important;
}
.peer:checked ~ .peer-checked\:bg-bronze-500 > span {
  transform: translateX(1rem);
  transition: transform 0.2s ease;
}
.peer-checked\:bg-bronze-500 > span {
  transition: transform 0.2s ease;
}

/* Tiny hover/elevated tint so interactive elements are perceptible */
.hover\:bg-slate-50:hover,
.hover\:bg-slate-100:hover,
.hover\:bg-slate-200:hover,
.hover\:bg-navy-800:hover,
.hover\:bg-navy-900:hover,
.hover\:bg-bronze-600:hover,
.bg-white\/10, .bg-white\/15,
html.dark .dark\:hover\:bg-slate-700:hover,
html.dark .dark\:hover\:bg-slate-800:hover,
html.dark .dark\:hover\:bg-slate-800\/40:hover,
html.dark .dark\:hover\:bg-slate-800\/50:hover {
  background-color: var(--bg-surface-hover) !important;
}

/* ---------- Text on coloured chips/avatars stays white ----------
   These rules win over the generic `.text-white → primary` collapse below
   because they have higher specificity (two classes). */
.bg-blue-500.text-white,
.bg-blue-600.text-white,
.bg-blue-700.text-white,
.bg-sky-500.text-white,
.bg-sky-600.text-white,
.bg-red-500.text-white,
.bg-red-600.text-white,
.bg-amber-500.text-white,
.bg-amber-600.text-white {
  color: #FFFFFF !important;
}

/* ---------- All text → primary colour ---------- */
.text-white,
.text-navy-50, .text-navy-100, .text-navy-200, .text-navy-300, .text-navy-500,
.text-navy-700, .text-navy-800, .text-navy-900, .text-navy-950,
.text-slate-100, .text-slate-200, .text-slate-300, .text-slate-600,
.text-slate-700, .text-slate-800, .text-slate-900,
.text-bronze-100, .text-bronze-300, .text-bronze-500, .text-bronze-600,
.text-bronze-700, .text-bronze-900,
html.dark .dark\:text-white,
html.dark .dark\:text-slate-100, html.dark .dark\:text-slate-200, html.dark .dark\:text-slate-300,
html.dark .dark\:text-bronze-100, html.dark .dark\:text-bronze-300, html.dark .dark\:text-bronze-500 {
  color: var(--text-primary) !important;
}

/* Muted text — keeps hierarchy without colour */
.text-slate-400, .text-slate-500,
html.dark .dark\:text-slate-400, html.dark .dark\:text-slate-500, html.dark .dark\:text-slate-600 {
  color: var(--text-muted) !important;
}

/* ---------- Borders ---------- */
.border-slate-100, .border-slate-200, .border-slate-300,
.border-navy-300, .border-navy-700, .border-navy-800, .border-navy-900,
html.dark .dark\:border-slate-700,
html.dark .dark\:border-slate-800,
html.dark .dark\:border-navy-900,
html.dark .dark\:border-black\/40 {
  border-color: var(--border-subtle) !important;
}
.divide-slate-100 > :not([hidden]) ~ :not([hidden]),
.divide-slate-200 > :not([hidden]) ~ :not([hidden]),
html.dark .dark\:divide-slate-800 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--border-subtle) !important;
}

/* Buttons / pills / avatars / agent bubbles use the brand bg/text classes
   that we've collapsed to page colour above. Add a 1-px border so they're
   still visible against the same-colour page. */
.bg-navy-950, .bg-navy-900, .bg-navy-800,
.bg-bronze-500, .bg-bronze-600, .bg-bronze-700,
.bg-navy-100, .bg-bronze-50, .bg-slate-100,
html.dark .dark\:bg-navy-800, html.dark .dark\:bg-navy-900,
html.dark .dark\:bg-slate-800 {
  border: 1px solid var(--border-subtle);
}
/* Round-pill badges / avatar circles already have rounded-full; the border
   above gives them a clean monochrome outline. */

/* ---------- Conversation layout ----------
   Layout fills the exact viewport height; input bar sits flush against the
   bottom edge of the viewport with zero gap. */
main:has(.conversation-layout) {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}

.conversation-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh; /* dvh = dynamic viewport, accounts for mobile chrome */
  background-color: var(--bg-base);
  overflow: hidden;
}
@media (max-width: 767px) {
  .conversation-layout { height: calc(100dvh - 3.5rem); }
}

.conversation-layout .conversation-header {
  flex: 0 0 auto;
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
  background-color: var(--bg-base);
}

.message-list {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem 1rem 0.5rem;
  background-color: var(--bg-base);
}

/* Input bar — flush to viewport bottom, no margin/gap below. Compact. */
.message-input-bar {
  flex: 0 0 auto;
  background: var(--bg-base);
  border-top: 1px solid var(--border-subtle);
  padding: 0.5rem 1rem;
  margin: 0;
}
.message-input-bar form { gap: 0.5rem; }
.message-input-bar input,
.message-input-bar button { height: 2.5rem; }

/* ---------- Plotly ---------- */
.js-plotly-plot, .plotly-graph-div { width: 100% !important; }
html.dark .js-plotly-plot text { fill: var(--text-primary) !important; }
html.dark .js-plotly-plot .gridlayer path { stroke: var(--border-subtle) !important; }

/* ---------- Scrollbar ---------- */
html.dark ::-webkit-scrollbar { width: 10px; height: 10px; }
html.dark ::-webkit-scrollbar-track { background: var(--bg-base); }
html.dark ::-webkit-scrollbar-thumb {
  background: var(--bg-surface-hover);
  border-radius: 6px;
}