:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #182033;
  background: #f4f7fb;
  --navy: #111a31;
  --navy-soft: #1d2944;
  --blue: #2864ed;
  --blue-soft: #edf3ff;
  --surface: #ffffff;
  --surface-soft: #f7f9fc;
  --line: #dfe5ee;
  --muted: #6d7890;
  --warning: #946200;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
body { margin: 0; overflow: hidden; background: #f4f7fb; }
button, textarea, select { font: inherit; }
button { border: 1px solid var(--line); border-radius: 9px; padding: .7rem .9rem; color: #26324a; background: #fff; cursor: pointer; transition: background .16s ease, border-color .16s ease, transform .16s ease; }
button:hover:not(:disabled) { border-color: #b9c6da; background: #f7f9fc; }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { cursor: not-allowed; opacity: .45; }
button.primary { border-color: var(--blue); color: #fff; background: var(--blue); font-weight: 750; }
button.primary:hover:not(:disabled) { border-color: #1854dc; background: #1854dc; }

.layout { display: grid; grid-template-columns: 196px minmax(0, 1fr); width: 100%; height: 100vh; }
.sidebar { display: flex; min-width: 0; flex-direction: column; gap: .7rem; padding: 14px 12px 12px; color: #e7edfa; background: var(--navy); }
.brand { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 0 3px 8px; }
.brand-mark, .empty-icon { display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; color: #fff; background: linear-gradient(145deg, #6c7cff, #3d51dc); font-size: .78rem; font-weight: 900; box-shadow: 0 6px 16px rgba(62, 82, 224, .28); }
.brand-mark img { width: 23px; height: 19px; object-fit: contain; }
.brand strong { display: block; color: #fff; font-size: .9rem; }
.brand small { display: block; max-width: 128px; margin-top: 2px; overflow: hidden; color: #8f9bb3; font-size: .59rem; text-overflow: ellipsis; white-space: nowrap; }
.lab-controls { display: grid; gap: .65rem; }
.lab-controls[hidden] { display: none; }
.sidebar label { color: #aab5c9; font-size: .72rem; }
.sidebar select { width: 100%; padding: .65rem; border: 1px solid #34415e; border-radius: 8px; color: #fff; background: #18223a; }
.lab-badge { padding: .35rem .5rem; border: 1px solid #695933; border-radius: 8px; color: #f0ca78; font-size: .64rem; font-weight: 750; }
.new-chat { display: flex; align-items: center; justify-content: flex-start; gap: 6px; width: 100%; border-color: #3b4864; color: #fff; background: var(--navy-soft); font-weight: 750; }
.new-chat:hover:not(:disabled) { border-color: #63708b; background: #27334e; }
.nav-label { margin: 7px 7px 0; color: #8491a9; font-size: .62rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
nav { display: grid; align-content: start; gap: 5px; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
nav button { width: 100%; overflow: hidden; border-color: transparent; color: #c5cede; background: transparent; font-size: .72rem; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
nav button:hover:not(:disabled), nav button.active { border-color: #2d3a55; color: #fff; background: #202b43; }
.sidebar-footer { display: grid; gap: 7px; margin-top: auto; padding-top: 8px; border-top: 1px solid #26324a; }
.principal { white-space: pre-line; color: #a9b4c7; font-size: .66rem; line-height: 1.45; overflow-wrap: anywhere; }
.session-warning { padding: .48rem .55rem; border: 1px solid #514728; border-radius: 7px; color: #e0bc6e; background: #211e19; font-size: .58rem; line-height: 1.35; }
.sidebar-actions { display: grid; grid-template-columns: 1fr auto; gap: 5px; }
.sidebar-actions button { padding: .48rem .5rem; border-color: #303c56; color: #aeb9ca; background: transparent; font-size: .63rem; }

.chat-panel { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; background: var(--surface-soft); }
.topbar { display: flex; min-height: 70px; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .96); }
.topbar h1 { margin: 2px 0 0; color: #1a2439; font-size: 1rem; line-height: 1.2; }
.topbar p { margin: 3px 0 0; color: var(--muted); font-size: .68rem; }
.eyebrow { color: var(--blue); font-size: .58rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.usage { display: flex; gap: 10px; color: #8490a5; font-size: .57rem; text-align: right; }
.usage span { min-width: 50px; }
.usage strong { display: block; color: #33405a; font-size: .67rem; white-space: nowrap; }
.simulation-banner { padding: .46rem .75rem; border-bottom: 1px solid #dce6fa; color: #456185; background: #f1f5fd; font-size: .62rem; font-weight: 750; text-align: center; }
.empty-state { align-self: center; justify-self: center; width: min(100%, 560px); padding: 1.8rem; text-align: center; }
.empty-icon { width: 42px; height: 42px; margin: 0 auto 13px; border-radius: 13px; }
.empty-state h2 { margin: 0 0 .65rem; color: #192338; font-size: clamp(1.25rem, 3vw, 2rem); line-height: 1.12; }
.empty-state p { margin: 0 auto; color: var(--muted); font-size: .8rem; line-height: 1.55; }
.suggestions { display: flex; justify-content: center; gap: 8px; margin-top: 17px; }
.suggestions span { padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 10px; color: #5c6880; background: #fff; font-size: .67rem; }
.messages { padding: 18px clamp(16px, 5vw, 52px); overflow-y: auto; scrollbar-width: thin; }
.message { max-width: 680px; margin: 0 0 12px; padding: .86rem 1rem; border: 1px solid var(--line); border-radius: 14px; color: #29344a; background: #fff; box-shadow: 0 4px 14px rgba(27, 42, 71, .04); font-size: .8rem; line-height: 1.55; }
.message.user { width: fit-content; max-width: 82%; margin-left: auto; border-color: var(--blue); border-bottom-right-radius: 5px; color: #fff; background: var(--blue); }
.message-label { display: block; margin-bottom: .35rem; color: var(--blue); font-size: .58rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.message.user .message-label { color: #dce8ff; }
.message p { margin: 0; white-space: pre-wrap; }
.limitations { display: block; margin-top: .65rem; color: #7b879c; }
.evidence-assessment, .abstention, .conflicts { margin-top: .65rem; padding: .5rem .6rem; border-radius: 8px; font-size: .66rem; font-weight: 700; }
.evidence-assessment { color: #176243; background: #ecf8f3; }
.abstention, .conflicts { color: var(--warning); background: #fff6de; }
.evidence-list { display: grid; gap: .5rem; margin-top: .7rem; }
.evidence-card { padding: .65rem; border-left: 3px solid #33b979; border-radius: 8px; background: #f1f5f9; }
.evidence-card strong { display: block; color: #246047; font-size: .65rem; }
.evidence-card small { display: block; margin-top: .28rem; color: #748096; overflow-wrap: anywhere; }
.composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 12px 16px 10px; border-top: 1px solid var(--line); background: rgba(255, 255, 255, .98); }
.composer textarea { width: 100%; min-height: 48px; max-height: 120px; resize: vertical; padding: .76rem .9rem; border: 1px solid #cfd8e5; border-radius: 12px; outline: none; color: #26324a; background: #fff; }
.composer textarea:focus { border-color: #6d96f4; box-shadow: 0 0 0 3px rgba(40, 100, 237, .1); }
.send { display: flex; align-items: center; gap: 7px; align-self: stretch; border-radius: 12px; }
.send b { font-size: 1rem; }
.privacy-warning { grid-column: 1 / -1; margin: 0 2px; color: #8a6b24; font-size: .59rem; }

dialog { width: min(90vw, 540px); border: 1px solid var(--line); border-radius: 18px; padding: 0; color: #253047; background: #fff; box-shadow: 0 28px 80px rgba(15, 23, 42, .28); }
dialog::backdrop { background: rgba(15, 23, 42, .58); backdrop-filter: blur(4px); }
dialog form { padding: 1.7rem; }
dialog h2 { margin-top: .35rem; }
dialog li { margin: .65rem 0; color: #5f6b80; line-height: 1.45; }
dialog button { width: 100%; margin-top: 1rem; }

@media (max-width: 620px) {
  .layout { grid-template-columns: 154px minmax(0, 1fr); }
  .sidebar { padding: 10px 8px; }
  .brand small, .usage, .topbar p { display: none; }
  .topbar { min-height: 58px; padding: 10px 12px; }
  .messages { padding: 12px; }
  .composer { padding: 9px; }
  .send span { display: none; }
  .suggestions { display: none; }
}