:root {
  --ink: #14171a;
  --muted: #5b6570;
  --line: #dde1e6;
  --paper: #ffffff;
  --bg: #f4f6f8;
  --accent: #2a5b8c;
  --accent-d: #1e4266;
  --accent-bg: #eef3f8;
  --warn: #b5490a;
  --err: #a02b2b;
  --ok: #1f6b3f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

/* ─── Header ─────────────────────────────────────────────────────────────── */

header.top {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-logo { height: 22px; width: auto; display: block; }
.brand-text .app-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  border-left: 1px solid var(--line);
  padding-left: 10px;
}
.header-spacer { flex: 1; }

.top-nav { display: flex; align-items: center; gap: 20px; }
.nav-link {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  text-decoration: none;
}
.nav-link:hover { color: var(--accent-d); text-decoration: underline; }
.nav-link-sign-out { color: var(--muted); }
.nav-link-sign-out:hover { color: var(--err); }

/* ─── Banner ─────────────────────────────────────────────────────────────── */

.banner {
  background: var(--accent-bg);
  color: var(--accent-d);
  border-bottom: 1px solid var(--line);
  padding: 10px 24px;
  font-size: 13.5px;
  text-align: center;
}

/* ─── Main / two-panel layout ────────────────────────────────────────────── */

main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px 20px 40px;
}

.page-heading {
  margin: 0 0 16px;
  font-size: 22px;
  text-align: center;
}

/* Left: browse/select cases and audio (always visible, live-synced -
   src/app.js's syncCases()/syncTranscriptions()). Right: the actual
   conversation and results. Selecting files and clicking "Summarise" on
   the left sends the request into the chat on the right, so the two stay
   connected without the picker itself needing to live inside the
   conversation the way the previous single-column design had it. */
.layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 20px;
  align-items: start;
}

/* Its own scroll region is the right call here (unlike the chat, which
   deliberately has none - see below): this is a persistent, clearly-
   bordered side panel with a fixed position, not content nested mid-flow
   in a scrolling page, so the "where does this scroll?" ambiguity that
   caused real problems for the chat doesn't apply to it. */
.side-panel {
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(20, 23, 26, 0.05);
}
.side-panel-header {
  position: sticky;
  top: 0;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--accent-bg);
  border-radius: 14px 14px 0 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--accent-d);
}
.side-panel-content {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.side-panel-empty {
  padding: 16px 8px;
  font-size: 13.5px;
  color: var(--muted);
  text-align: center;
}

/* No fixed height / internal overflow on the chat card - it grows with the
   conversation and the whole PAGE scrolls, not a small box inside it. A
   nested scroll region here was a real usability trap (reported as
   "scroll doesn't work" - a mouse/trackpad gesture landing a few pixels
   outside the small internal scrollable box does nothing, and there's no
   visual cue for where that boundary is), and there's no upside to it on a
   page that has nothing else to show alongside the chat. */
.chat-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(20, 23, 26, 0.05);
  display: flex;
  flex-direction: column;
  min-width: 0; /* lets the grid column shrink below its content's natural width instead of overflowing */
  /* overflow: visible (the default) is required here, not hidden - a
     sticky-positioned descendant (.chat-form) only sticks to the viewport
     if no ancestor between it and the viewport clips/scrolls its own box.
     The header/footer get their own matching corner radii below instead
     of relying on a parent clip. */
}

.chat-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--accent-bg);
  border-radius: 14px 14px 0 0;
  flex-shrink: 0;
  /* Sticks with the chat card's own top edge as the page scrolls, so
     "Clear" (see below) stays reachable without scrolling back up through
     a long conversation - the whole point of moving it somewhere easy to
     see, not just moving it once and letting it scroll out of view again. */
  position: sticky;
  top: 0;
  z-index: 1;
}
.chat-card-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  display: inline-block;
}
.chat-card-badge {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--accent-d);
}
.chat-card-header-spacer { flex: 1; }
.chat-clear-btn {
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent-d);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 14px;
  cursor: pointer;
}
.chat-clear-btn:hover { background: var(--err); border-color: var(--err); color: #fff; }

.chat-messages {
  padding: 18px 18px 6px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.chat-msg { display: flex; flex-direction: column; gap: 8px; }
.chat-msg-user { align-items: flex-end; }
.chat-msg-assistant { align-items: flex-start; }

.chat-msg-bubble {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.chat-msg-user .chat-msg-bubble {
  background: var(--accent-d);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-msg-assistant .chat-msg-bubble {
  background: var(--bg);
  color: var(--ink);
  border-bottom-left-radius: 4px;
}
.chat-msg-bubble a { color: inherit; text-decoration: underline; }
.chat-msg-assistant .chat-msg-bubble a { color: var(--accent); }
.chat-msg-bubble.pending { color: var(--muted); font-style: italic; }

/* Structured markdown inside a bubble (headings, lists, tables) - see
   formatMessage() in app.js. Blocks are separated with a consistent gap
   instead of relying on browsers' own (inconsistent, too-large) default
   margins on <p>/<h4-6>/<ul>/<ol>. */
.chat-msg-bubble p { margin: 0; }
.chat-msg-bubble > * + * { margin-top: 8px; }
.chat-msg-bubble .chat-heading { margin: 0; font-weight: 700; line-height: 1.3; }
.chat-msg-bubble h4.chat-heading { font-size: 15.5px; }
.chat-msg-bubble h5.chat-heading { font-size: 14.5px; }
.chat-msg-bubble h6.chat-heading { font-size: 13.5px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.chat-msg-user .chat-msg-bubble h6.chat-heading { color: rgba(255, 255, 255, 0.75); }
.chat-msg-bubble ul, .chat-msg-bubble ol { margin: 0; padding-left: 22px; }
.chat-msg-bubble li + li { margin-top: 4px; }
.chat-msg-bubble hr { border: none; border-top: 1px solid var(--line); margin: 2px 0; }
.chat-msg-user .chat-msg-bubble hr { border-top-color: rgba(255, 255, 255, 0.3); }

/* A wide table must scroll inside its own bubble, never force the whole
   page to scroll sideways - the bubble itself is capped at 88% width. */
.chat-table-wrap { max-width: 100%; overflow-x: auto; }
.chat-msg-bubble table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.chat-msg-bubble th, .chat-msg-bubble td {
  border: 1px solid var(--line);
  padding: 6px 10px;
  text-align: left;
  vertical-align: top;
}
.chat-msg-bubble th { background: rgba(20, 23, 26, 0.05); font-weight: 700; }
.chat-msg-user .chat-msg-bubble th, .chat-msg-user .chat-msg-bubble td { border-color: rgba(255, 255, 255, 0.3); }
.chat-msg-user .chat-msg-bubble th { background: rgba(255, 255, 255, 0.15); }

/* ─── Case/audio picker cards, docked in the left side panel ─────────────── */

.side-panel-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px 0;
  overflow: hidden;
}

.widget-case-list { display: flex; flex-direction: column; }
.widget-case-row {
  text-align: left;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 11px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.widget-case-row:last-child { border-bottom: none; }
.widget-case-row:hover { background: var(--accent-bg); color: var(--accent-d); }
.widget-case-row .chevron { color: var(--muted); font-weight: 400; }

.widget-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
}
.widget-picker-title { font-size: 13.5px; font-weight: 700; color: var(--accent-d); }
.widget-select-all-btn {
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
}
.widget-select-all-btn:hover { background: var(--accent-bg); }

.widget-folder { border-bottom: 1px solid var(--line); }
.widget-folder:last-of-type { border-bottom: none; }
.widget-folder-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  background: none;
  border: none;
  padding: 10px 16px;
  cursor: pointer;
}
.widget-folder-header .count {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: var(--bg);
  border-radius: 999px;
  padding: 2px 9px;
}
.widget-folder-files { padding: 0 16px 8px; display: flex; flex-direction: column; gap: 2px; }
.widget-folder-files.collapsed { display: none; }
.widget-file-row { display: flex; align-items: flex-start; gap: 8px; padding: 5px 0; font-size: 13.5px; }
.widget-file-row label { cursor: pointer; }
.widget-file-row input[type="checkbox"] { margin-top: 2px; }

.widget-actions { padding: 10px 16px 12px; }
.widget-summarize-btn {
  width: 100%;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 8px;
  padding: 10px 14px;
  cursor: pointer;
}
.widget-summarize-btn:hover { background: var(--accent-d); }
.widget-summarize-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.chat-typing {
  display: flex;
  gap: 4px;
  padding: 0 22px 10px;
  flex-shrink: 0;
}
.chat-typing.hidden { display: none; }
.chat-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  animation: chat-typing-bounce 1.1s infinite ease-in-out;
}
.chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* Sticky to the viewport bottom, not the (now unbounded-height) chat card -
   the input stays reachable without scrolling all the way down through a
   long conversation, same as any normal chat app. */
.chat-form {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: var(--paper);
  border-radius: 0 0 14px 14px;
  position: sticky;
  bottom: 0;
  flex-shrink: 0;
}
.chat-form input {
  flex: 1;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
}
.chat-form input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

button.primary {
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  border-radius: 8px;
  border: 1px solid var(--accent);
  padding: 10px 18px;
  background: var(--accent);
  color: #fff;
}
button.primary:hover { background: var(--accent-d); border-color: var(--accent-d); }
button.primary:disabled { opacity: 0.5; cursor: not-allowed; }

/* ─── Audio Transcription modal ──────────────────────────────────────────── */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 23, 26, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 80;
}
.modal-overlay.hidden { display: none; }
.modal {
  background: var(--paper);
  border-radius: 12px;
  width: 380px;
  max-width: calc(100vw - 32px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.modal-header h3 { margin: 0; font-size: 15px; }
.link-btn { border: none; background: none; cursor: pointer; color: var(--muted); font-size: 18px; line-height: 1; padding: 0; }
.link-btn:hover { color: var(--ink); }
.modal-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; }
.field-label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.modal-body select, .modal-body input[type="file"], .modal-body input[type="password"], .modal-body input[type="text"] {
  font: inherit;
  font-size: 13.5px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
}
.modal-body input[type="password"]:focus, .modal-body input[type="text"]:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.modal-status { font-size: 12.5px; color: var(--muted); min-height: 16px; }
.modal-status.error { color: var(--err); }
.modal-status.ok { color: var(--ok); }
.modal-intro { margin: 0 0 4px; font-size: 13px; color: var(--muted); }
.modal-intro.hidden { display: none; }

/* Below this width the two-column grid stacks: side panel on top (its own
   scroll, capped so it can't dominate a small screen), chat below it in
   the normal page scroll - the sticky positioning above is desktop-only
   (a stacked sticky sidebar on a phone screen just eats permanent vertical
   space for no benefit). */
@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .side-panel { position: static; max-height: 46vh; }
}

@media (max-width: 640px) {
  header.top { flex-wrap: wrap; }
  .top-nav { gap: 12px; flex-wrap: wrap; }
  main { padding: 20px 12px 32px; }
}

/* ─── Login page ─────────────────────────────────────────────────────────── */
/* Moved out of login.html's own inline <style> so the CSP can drop
   'unsafe-inline' from style-src too, not just script-src. */

body.login-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(20, 23, 26, 0.06);
  padding: 32px 28px 28px;
}
.login-logo { display: block; height: 26px; width: auto; margin: 0 auto 22px; }
.login-card h1 { margin: 0 0 6px; font-size: 18px; text-align: center; }
.login-card .login-subtitle { margin: 0 0 24px; font-size: 13px; color: var(--muted); text-align: center; }
.login-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.login-field label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.login-field input {
  font: inherit;
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.login-field input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.login-error {
  display: none;
  background: var(--warn-bg, #fdecea);
  color: var(--err);
  font-size: 13px;
  padding: 9px 12px;
  border-radius: 8px;
  margin-bottom: 16px;
}
.login-error.visible { display: block; }
.login-submit { width: 100%; margin-top: 4px; }

.login-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 12.5px;
  color: var(--muted);
  cursor: pointer;
}
.login-consent input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; }
.login-consent a { color: var(--accent); text-decoration: underline; }