html, body { height: 100%; }
body {
  display: grid;
  grid-template-columns:
    var(--rail-width, 0px)
    minmax(0, 1fr)
    10px
    clamp(280px, var(--proof-width, 46vw), calc(100vw - var(--rail-width, 0px) - 360px));
  grid-template-rows: minmax(0, 1fr);
  height: 100dvh;
}
body.rail-open { --rail-width: 250px; }
body.is-dragging { cursor: col-resize; user-select: none; }

/* Chats of the current language */
.history {
  grid-column: 1; grid-row: 1; display: none; flex-direction: column; min-height: 0;
  background: var(--glaze-deep); padding: 20px 12px 16px;
}
body.rail-open .history { display: flex; }
.history h2 { margin: 0 0 12px; padding: 0 8px; font: 500 16px/1.3 var(--serif); color: var(--cobalt); }
.new-chat {
  margin: 0 0 12px; padding: 9px 12px; background: #fff; border: 2px solid var(--cobalt); border-radius: 3px;
  color: var(--cobalt); font-weight: 600; font-size: 14px; text-align: left; cursor: pointer;
}
.new-chat:hover { background: var(--cobalt); color: var(--on-cobalt); }
.chat-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; min-height: 0; flex: 1; }
.chat-search {
  flex: none; width: 100%; height: 36px; margin: 0 0 8px; padding: 0 10px;
  background: var(--glaze); border: 1px solid var(--ink-soft); border-radius: 3px; font-size: 14px;
}
.chat-row { position: relative; display: flex; align-items: center; min-height: 36px; }
.chat-open {
  flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; padding: 8px; background: none; border: 0;
  border-left: 3px solid transparent; border-radius: 0 3px 3px 0; text-align: left; font-size: 14px;
  line-height: 1.35; cursor: pointer;
}
.chat-lang { flex: none; font-size: 11px; font-weight: 600; color: var(--ink-soft); }
.chat-title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chat-open:hover { background: var(--glaze); }
.chat-open[aria-current="true"] { background: #fff; border-left-color: var(--cobalt); font-weight: 500; }
/* Row actions cover the end of the title when they appear, so the title keeps its full width otherwise. */
.chat-actions {
  position: absolute; right: 0; top: 0; bottom: 0; display: flex; align-items: center; padding-left: 14px;
  background: linear-gradient(90deg, transparent, var(--glaze) 12px); opacity: 0; pointer-events: none;
}
.chat-row:hover .chat-actions, .chat-actions:focus-within { opacity: 1; pointer-events: auto; }
.chat-action {
  width: 28px; height: 28px; display: grid; place-items: center; padding: 0; background: none; border: 0;
  border-radius: 3px; color: var(--ink-soft); cursor: pointer;
}
.chat-action svg { width: 15px; height: 15px; fill: currentColor; }
.chat-action:hover { background: var(--glaze-deep); color: var(--cobalt); }
.rename-input {
  width: 100%; height: 34px; padding: 0 8px; background: #fff; border: 2px solid var(--cobalt); border-radius: 3px; font-size: 14px;
}
.chat-row.is-confirming {
  flex-wrap: wrap; gap: 4px 12px; padding: 8px; background: #fff; border-left: 3px solid var(--madder); font-size: 14px;
}
.chat-confirm-text { flex: 1 0 100%; font-weight: 500; }
.chat-confirm-delete, .chat-confirm-keep {
  padding: 0; background: none; border: 0; cursor: pointer; font-weight: 500;
  text-decoration: underline; text-underline-offset: 3px;
}
.chat-confirm-delete { color: var(--madder); }
.chat-confirm-keep { color: var(--cobalt); }
@media (hover: none) {
  .chat-actions { opacity: 1; pointer-events: auto; }
}
.history .none { margin: 0; padding: 0 8px; font-size: 14px; color: var(--ink-soft); flex: 1; }
.account { flex: none; margin-top: 12px; padding: 12px 8px 0; border-top: 1px solid var(--ink-soft); font-size: 14px; }
.account p { margin: 0; }
.account-actions { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.account-actions a, .account-actions button {
  padding: 0; background: none; border: 0; color: var(--cobalt); font-weight: 500; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.account-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 4px !important; }
.account-hint { margin-top: 8px !important; color: var(--ink-soft); font-size: 13px; line-height: 1.35; }

/* Asking side */
.ask { grid-column: 2; grid-row: 1; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; }
.masthead {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 20px 40px 12px;
}
.masthead-start { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.rail-toggle {
  flex: none; background: none; border: 0; padding: 4px 10px; border-radius: 3px; cursor: pointer;
  color: var(--ink-soft); font-weight: 500; font-size: 14px; text-decoration: underline; text-underline-offset: 3px;
}
.rail-toggle:hover { color: var(--ink); }
.masthead h1 {
  margin: 0; font: 500 20px/1.2 var(--serif); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.masthead h1 a { color: var(--cobalt); text-decoration: none; }
.masthead h1 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.langs { display: flex; gap: 4px; flex: none; }
.langs button {
  background: none; border: 0; padding: 4px 10px; cursor: pointer; border-radius: 3px;
  color: var(--ink-soft); font-weight: 500; font-size: 14px;
}
.langs button[aria-pressed="true"] { background: var(--cobalt); color: var(--on-cobalt); }

.thread { overflow-y: auto; padding: 12px 40px 24px; scroll-behavior: smooth; }
.intro { max-width: 34em; padding-top: 6vh; }
.intro p { margin: 0 0 28px; font: 400 clamp(22px, 2.1vw, 32px)/1.25 var(--serif); letter-spacing: -0.01em; }
.examples { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--glaze-deep); }
.examples button {
  display: block; width: 100%; padding: 12px 0; background: none; border: 0;
  border-bottom: 1px solid var(--glaze-deep); text-align: left; cursor: pointer; color: var(--cobalt);
}
.examples button:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.turn { padding: 14px 0 12px; border-bottom: 1px solid var(--glaze-deep); max-width: 42em; }
.turn:last-child { border-bottom: 0; }
.turn .question { margin: 0 0 6px; color: var(--ink-soft); font-size: 15px; font-weight: 500; line-height: 1.35; }
.turn .steps { margin: 0; padding: 0; list-style: none; font-size: 15px; }
.turn .steps li { position: relative; padding: 2px 0 2px 22px; color: var(--ink-soft); }
.turn .steps li::before { position: absolute; left: 0; }
.turn .steps .is-done::before { content: "✓"; color: var(--turquoise); }
.turn .steps .is-current { color: var(--ink); font-weight: 500; }
.turn .steps .is-current::before {
  content: ""; top: 9px; left: 2px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--saffron); animation: working 900ms ease-in-out infinite alternate;
}
@keyframes working { from { transform: scale(.55); } to { transform: scale(1.1); } }
.timer { margin: 8px 0 0 22px; font-size: 14px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.answer { font: 400 clamp(17px, 1.35vw, 19px)/1.42 var(--serif); white-space: pre-line; overflow-wrap: anywhere; }
.answer-text { margin: 0 0 6px; }
/* A ranking: rank, name, and the value kept on the right where figures can be compared. */
.answer-list { list-style: none; margin: 0; padding: 0; }
.answer-list li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; padding: 4px 0;
  border-bottom: 1px solid var(--glaze-deep);
}
.answer-list li:last-child { border-bottom: 0; }
.answer-rank { flex: none; min-width: 1.2em; color: var(--ink-soft); font: 500 13px/1 var(--sans); font-variant-numeric: tabular-nums; }
.answer-name { flex: 1 1 10em; min-width: 0; }
.answer-value { flex: none; margin-left: auto; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
/* The one moment of motion: when a checked answer arrives, its figures are underlined in order. */
/* Backwards only: once finished, hover must be free to change the figure again. */
.is-fresh .fig { animation: draw-figure 420ms ease-out backwards; animation-delay: calc(var(--i, 0) * 110ms + 120ms); }
@keyframes draw-figure { from { background-size: 0 3px; } to { background-size: 100% 3px; } }
.is-fresh .check { animation: appear 300ms ease-out backwards; animation-delay: 300ms; }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }
.turn.is-error .answer { font: 400 16px/1.5 var(--sans); color: var(--madder); }
.turn.is-nodata .answer { border-left: 3px solid var(--madder); padding-left: 12px; }
.turn.is-clarify .answer { border-left: 3px solid var(--saffron); padding-left: 12px; }

.fig {
  all: unset; cursor: pointer; font-variant-numeric: tabular-nums;
  background-image: linear-gradient(var(--saffron), var(--saffron));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 3px;
  transition: background-size 160ms ease-out;
}
.fig:hover, .fig:focus-visible, .fig.is-on { background-size: 100% 100%; }
.fig:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }

.turn-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; margin-top: 6px; font-size: 13px; line-height: 1.5; }
.check { color: var(--turquoise); font-weight: 500; }
.check.is-plain { color: var(--ink-soft); font-weight: 400; }
.turn-meta button, .assumptions summary {
  background: none; border: 0; padding: 0; color: var(--cobalt); cursor: pointer; font: inherit;
  text-decoration: underline; text-underline-offset: 3px;
}
.assumptions summary { list-style: none; }
.assumptions summary::-webkit-details-marker { display: none; }
.assumptions[open] { flex-basis: 100%; }
.assumptions ul { margin: 4px 0 2px; padding: 0 0 0 12px; border-left: 2px solid var(--glaze-deep); list-style: none; color: var(--ink-soft); }
.turn[aria-current="true"] .show-evidence { display: none; }

.composer { padding: 12px 40px 20px; background: var(--glaze); border-top: 1px solid var(--glaze-deep); }
.composer form { display: flex; gap: 10px; align-items: flex-end; }
.composer textarea {
  flex: 1; min-width: 0; min-height: 52px; max-height: 160px; resize: none; overflow-y: hidden; padding: 13px 14px;
  background: #fff; border: 2px solid var(--cobalt); border-radius: 3px; line-height: 1.4;
}
.composer textarea::placeholder { color: var(--ink-soft); }
.composer button {
  height: 52px; padding: 0 22px; border: 0; border-radius: 3px; cursor: pointer;
  background: var(--cobalt); color: var(--on-cobalt); font-weight: 600;
}
.composer button:hover:not(:disabled) { background: var(--cobalt-deep); }
.composer button:disabled { opacity: .55; cursor: progress; }
.notice { margin: 0 0 10px; color: var(--madder); font-size: 14px; }
.guest-note { margin: 0 0 10px; font-size: 14px; color: var(--ink-soft); }
.guest-note a { color: var(--cobalt); font-weight: 500; text-underline-offset: 3px; }

/* Drag to share the width between the answer and its evidence */
.splitter {
  grid-column: 3; grid-row: 1; position: relative; background: var(--glaze-deep);
  cursor: col-resize; touch-action: none;
}
.splitter::after {
  content: ""; position: absolute; top: 50%; left: 3px; width: 4px; height: 44px; margin-top: -22px;
  border-radius: 2px; background: var(--ink-soft);
}
.splitter:hover, body.is-dragging .splitter { background: var(--saffron); }
.splitter:hover::after, body.is-dragging .splitter::after { background: var(--ink); }
.splitter:focus-visible { outline: 3px solid var(--saffron); outline-offset: -3px; }

/* Evidence side: one tile of solid cobalt */
.proof { grid-column: 4; grid-row: 1; background: var(--cobalt); color: var(--on-cobalt); overflow-y: auto; padding: 24px 32px 40px; min-height: 0; min-width: 0; }
.proof h2 { margin: 0 0 20px; font: 500 20px/1.2 var(--serif); }
.proof .empty { max-width: 28em; color: var(--on-cobalt-soft); }
.proof .empty.is-working { color: var(--on-cobalt-soft); animation: breathe 1.2s ease-in-out infinite alternate; }
@keyframes breathe { from { opacity: .55; } to { opacity: 1; } }
.step { margin: 0 0 32px; }
/* A query that just finished unrolls into place while the agent keeps working. */
.step.is-new { animation: unroll 320ms ease-out both; }
@keyframes unroll { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.copy-sql {
  display: block; margin: -4px 0 12px; padding: 0; background: none; border: 0; cursor: pointer;
  color: var(--on-cobalt-soft); font-size: 13px; text-decoration: underline; text-underline-offset: 3px;
}
.copy-sql:hover { color: var(--on-cobalt); }
.sort { all: unset; cursor: pointer; }
.sort:hover { color: var(--on-cobalt); text-decoration: underline; text-underline-offset: 3px; }
.sort:focus-visible { outline: 3px solid var(--saffron); outline-offset: 2px; }
th[aria-sort="ascending"] .sort::after { content: " ▲"; font-size: 10px; }
th[aria-sort="descending"] .sort::after { content: " ▼"; font-size: 10px; }
.step h3 { margin: 0 0 8px; font: 500 16px/1.4 var(--sans); }
.step .kind { color: var(--on-cobalt-soft); font-weight: 400; font-size: 14px; }
.step pre {
  margin: 0 0 12px; padding: 12px 14px; overflow-x: auto; background: var(--cobalt-deep);
  border-radius: 3px; font: 400 13px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere;
  color: var(--on-cobalt);
}
.step .failed { margin: 0 0 12px; color: var(--saffron); font-size: 14px; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; font-variant-numeric: tabular-nums; }
th { text-align: left; font-weight: 500; color: var(--on-cobalt-soft); padding: 6px 12px 6px 0; border-bottom: 1px solid var(--cobalt-line); white-space: nowrap; }
td { padding: 6px 12px 6px 0; border-bottom: 1px solid var(--cobalt-line); vertical-align: top; }
td.num, th.num { text-align: right; white-space: nowrap; }
td[data-cell] { transition: background-color 120ms ease-out; }
td.is-source, td.is-pinned { background: var(--saffron); color: var(--ink); box-shadow: -6px 0 0 var(--saffron), 6px 0 0 var(--saffron); }
td.is-null { color: var(--on-cobalt-soft); }
.rows-note { margin: 8px 0 0; color: var(--on-cobalt-soft); font-size: 14px; }

/* Only needed on phones and in the drawer layout. */
.pane-tabs { display: none; }
.rail-backdrop { display: none; }

/* Tablets and small laptops: the chats panel becomes a drawer over the page. */
@media (max-width: 1099px) {
  body.rail-open { --rail-width: 0px; }
  .history {
    position: fixed; inset: 0 auto 0 0; z-index: 3; width: min(300px, 85vw); box-shadow: 2px 0 0 var(--cobalt);
    padding-top: max(20px, env(safe-area-inset-top)); padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
  body.rail-open .rail-backdrop { display: block; position: fixed; inset: 0; z-index: 2; background: rgba(15, 27, 61, .4); }
  .masthead { padding: 16px 24px 8px; }
  .thread { padding: 8px 24px 16px; }
  .composer { padding: 10px 24px 14px; }
  .proof { padding: 20px 24px 32px; }
  .chat-actions { background: linear-gradient(90deg, transparent, var(--glaze-deep) 12px); }
}

/* Phones: the answer and its evidence take turns on one screen, with tabs in thumb reach. */
@media (max-width: 899px) {
  html, body { height: 100%; overflow: hidden; }
  body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    height: 100dvh;
  }
  .ask, .proof { grid-column: 1; grid-row: 1; }
  .splitter { display: none; }
  body[data-pane="answer"] .proof { display: none; }
  body[data-pane="proof"] .ask { display: none; }
  .pane-tabs {
    grid-column: 1; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr;
    padding-bottom: env(safe-area-inset-bottom); background: var(--cobalt-deep);
  }
  .pane-tabs button {
    height: 48px; background: none; border: 0; border-top: 3px solid transparent; cursor: pointer;
    color: var(--on-cobalt-soft); font-weight: 600; font-size: 15px;
  }
  .pane-tabs button[aria-pressed="true"] { color: var(--on-cobalt); border-top-color: var(--saffron); background: var(--cobalt); }
  .masthead { padding: max(12px, env(safe-area-inset-top)) 16px 6px; gap: 8px; }
  .masthead-start { gap: 8px; }
  .masthead h1 { font-size: 18px; }
  .rail-toggle { padding: 4px 0; }
  .thread { padding: 4px 16px 10px; }
  .intro { padding-top: 12px; }
  .intro p { margin-bottom: 16px; font-size: 21px; }
  .composer { padding: 8px 16px 10px; }
  .composer form { gap: 8px; }
  .composer textarea { min-height: 46px; padding: 10px 12px; }
  .composer button { height: 46px; padding: 0 16px; }
  .guest-note { margin-bottom: 6px; font-size: 13px; }
  .proof { padding: max(16px, env(safe-area-inset-top)) 16px 24px; }
  .proof h2 { margin-bottom: 14px; font-size: 18px; }
  .step { margin-bottom: 24px; }
}

/* Narrow phones: a long value moves under its name instead of squeezing it. */
@media (max-width: 480px) {
  .answer-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .answer-value { grid-column: 2; margin-left: 0; text-align: left; white-space: normal; }
}

/* Short screens, such as a phone on its side: leave the room for the answer. */
@media (max-height: 480px) {
  .masthead { padding-top: 6px; padding-bottom: 2px; }
  .guest-note { display: none; }
  .composer { padding-top: 4px; padding-bottom: 4px; }
  .composer textarea, .composer button { min-height: 40px; height: 40px; padding-top: 7px; padding-bottom: 7px; }
  .pane-tabs button { height: 38px; }
}

/* Touch: controls big enough to hit, and 16px fields so phones do not zoom in on focus. */
@media (pointer: coarse) {
  .langs button { min-height: 36px; min-width: 36px; }
  .chat-open { min-height: 44px; align-items: center; }
  .chat-action { width: 38px; height: 38px; }
  .chat-action svg { width: 18px; height: 18px; }
  .rename-input, .chat-search { height: 42px; font-size: 16px; }
  .turn-meta { font-size: 14px; gap: 6px 16px; }
  .turn-meta button, .assumptions summary { padding: 3px 0; }
  .new-chat { min-height: 44px; }
  .account-actions a, .account-actions button { display: inline-block; padding: 6px 0; }
}