:root {
  --brand-primary: #2A4093;
  --brand-secondary: #006869;
  --brand-accent: #00CFD2;
  --bg: #f4f7fb;
  --bg-card: #ffffff;
  --ink: #141617;
  --muted: #5b6573;
  --line: #e3e8ef;
  --accent: var(--brand-primary);
  --accent-ink: #ffffff;
  --danger: #b91c1c;
  --warn: #d97706;
  --user: #eef3fb;
  --assistant: #e6fafa;
  --radius: 5px;
  --shadow: 0 1px 2px rgba(20, 22, 23, 0.05), 0 6px 18px rgba(42, 64, 147, 0.06);
  --font-heading: "Catamaran", Arial, Helvetica, sans-serif;
  --font-body: "Merriweather", Georgia, "Times New Roman", serif;

  /* Fluid sizing — degrades smoothly across viewports. */
  --fs-body: clamp(15px, 0.95rem + 0.15vw, 17px);
  --fs-h1: clamp(26px, 1.55rem + 1.6vw, 38px);
  --fs-h2: clamp(20px, 1.25rem + 1.0vw, 28px);
  --fs-h3: clamp(17px, 1.05rem + 0.4vw, 20px);
  --pad-card: clamp(16px, 3.5vw, 28px);
  --pad-container-x: clamp(14px, 4vw, 24px);
  --pad-container-y: clamp(16px, 3vw, 28px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font: var(--fs-body)/1.6 var(--font-body);
  overflow-wrap: break-word;
  word-wrap: break-word;
  /* Prevent any wide child (long URL, code block, table) from
     spilling the viewport and making the page horizontally scroll. */
  max-width: 100vw;
  overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--brand-primary);
  overflow-wrap: anywhere;
}
h1 { font-size: var(--fs-h1); line-height: 1.15; }
h2 { font-size: var(--fs-h2); line-height: 1.2; }
h3 { font-size: var(--fs-h3); }
a { color: var(--brand-secondary); text-decoration: none; }
a:hover { color: var(--brand-primary); text-decoration: underline; }

/* ---------- Topbar ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px var(--pad-container-x);
  background: var(--bg-card);
  border-bottom: 3px solid var(--brand-accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  position: relative;
}
.topbar .brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-heading);
  font-weight: 700; font-size: clamp(15px, 1rem + 0.2vw, 18px);
  color: var(--brand-primary);
  text-decoration: none;
  min-width: 0;
  flex: 1 1 auto;
}
.topbar .brand:hover { text-decoration: none; }
.topbar .brand-logo { height: 30px; width: auto; display: block; flex-shrink: 0; }
.topbar .brand-text { color: var(--brand-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.primary-nav {
  display: flex; gap: 18px; align-items: center;
  font-family: var(--font-heading); font-size: 14px;
  flex-wrap: wrap; justify-content: flex-end;
}
.primary-nav a { color: var(--ink); }
.primary-nav a:hover { color: var(--brand-primary); }
.nav-email { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-logout { display: inline; margin: 0; }

/* Hamburger button — hidden on tablet/desktop. */
.nav-toggle {
  display: none;
  flex-direction: column; justify-content: space-between;
  width: 44px; height: 44px;
  padding: 11px 9px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  height: 2px; width: 100%;
  background: var(--brand-primary);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle.is-open .nav-toggle-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .nav-toggle-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- Layout primitives ---------- */
.container { max-width: 1100px; margin: var(--pad-container-y) auto; padding: 0 var(--pad-container-x); }
.muted { color: var(--muted); }
.small { font-size: 12px; }

.card {
  background: var(--bg-card);
  padding: var(--pad-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border-top: 3px solid var(--brand-accent);
}
.card.narrow { max-width: 420px; margin: clamp(20px, 6vw, 60px) auto; }
.card h1 { margin-top: 0; }

.error {
  background: #fef2f2; color: var(--danger);
  padding: 10px 12px; border-radius: var(--radius); margin-bottom: 16px;
  font-size: 14px;
}

label { display: block; margin: 14px 0; font-family: var(--font-heading); font-size: 14px; color: var(--ink); }
input[type=text], input[type=email], input[type=password], textarea, input[type=file] {
  width: 100%; max-width: 100%; padding: 11px 13px; border: 1px solid var(--line);
  border-radius: 6px; font: inherit; background: #fff; color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus { outline: none; border-color: var(--brand-accent); box-shadow: 0 0 0 3px rgba(0, 207, 210, 0.18); }
textarea { resize: vertical; min-height: 96px; }

button { font: inherit; cursor: pointer; font-family: var(--font-heading); }
button.primary {
  background: var(--brand-primary); color: var(--accent-ink); border: 0;
  padding: 11px 20px; border-radius: var(--radius); font-weight: 600; letter-spacing: 0.02em;
  min-height: 44px;
  transition: background .15s, transform .05s;
}
button.primary:hover { background: var(--brand-secondary); }
button.primary:active { transform: translateY(1px); }
button.danger {
  background: transparent; color: var(--danger); border: 1px solid var(--danger);
  padding: 6px 12px; border-radius: 6px; font-size: 12px;
  min-height: 36px;
}
button.link-btn { background: none; border: 0; color: var(--ink); padding: 6px 4px; font-family: var(--font-heading); }
button.link-btn:hover { color: var(--brand-primary); text-decoration: underline; }

.row { display: flex; gap: 10px; align-items: center; margin: 12px 0; flex-wrap: wrap; }

.layout { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: start; }
/* Critical: grid items default to min-width:auto, which lets a long URL,
   code block, or table inside the chat blow out the column width. Force
   them to be allowed to shrink so the chat column never exceeds its
   share of the viewport. */
.layout > * { min-width: 0; }

.side {
  background: var(--bg-card); padding: 18px; border-radius: var(--radius);
  box-shadow: var(--shadow); border-top: 3px solid var(--brand-secondary);
  min-width: 0;
}
.side h2 { margin: 0 0 12px; font-size: 13px; text-transform: uppercase; color: var(--brand-secondary); letter-spacing: 0.08em; font-weight: 700; }
.list { list-style: none; padding: 0; margin: 16px 0 0; }
.list li { padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.list li.active a { font-weight: 700; color: var(--brand-primary); }
.list li a { display: block; min-height: 28px; }
.list li .small { display: block; }

.main {
  background: var(--bg-card); padding: var(--pad-card); border-radius: var(--radius);
  box-shadow: var(--shadow); border-top: 3px solid var(--brand-accent);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.main h1 { margin-top: 0; overflow-wrap: anywhere; }

/* ---------- Tables ---------- */
.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 12px; }
.data { width: 100%; border-collapse: collapse; margin-top: 12px; }
.table-scroll .data { margin-top: 0; }
.data th, .data td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.data th { font-family: var(--font-heading); font-size: 12px; text-transform: uppercase; color: var(--brand-secondary); letter-spacing: 0.08em; }

/* ---------- Messages / chat ---------- */
.messages { display: flex; flex-direction: column; gap: 14px; margin: 18px 0; }
.msg { padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--line); }
.msg-user { background: var(--user); border-left: 3px solid var(--brand-primary); }
.msg-assistant { background: var(--assistant); border-left: 3px solid var(--brand-accent); }
.msg .role { font-family: var(--font-heading); font-size: 11px; text-transform: uppercase; color: var(--muted); letter-spacing: 0.08em; margin-bottom: 6px; font-weight: 700; }
.msg .content { word-wrap: break-word; overflow-wrap: anywhere; }
.msg .content > *:first-child { margin-top: 0; }
.msg .content > *:last-child { margin-bottom: 0; }
.msg .content p { margin: 0 0 10px; }
.msg .content h1, .msg .content h2, .msg .content h3,
.msg .content h4, .msg .content h5, .msg .content h6 {
  margin: 14px 0 6px;
  line-height: 1.25;
  color: var(--brand-primary);
}
.msg .content h1 { font-size: 22px; }
.msg .content h2 { font-size: 19px; }
.msg .content h3 { font-size: 17px; }
.msg .content h4, .msg .content h5, .msg .content h6 { font-size: 15px; }
.msg .content ul, .msg .content ol { margin: 6px 0 10px; padding-left: 24px; }
.msg .content li { margin: 3px 0; }
.msg .content li > p { margin: 0 0 4px; }
.msg .content strong { font-weight: 700; }
.msg .content em { font-style: italic; }
.msg .content blockquote {
  margin: 8px 0;
  padding: 4px 12px;
  border-left: 3px solid var(--brand-accent);
  background: rgba(0, 207, 210, 0.08);
  color: var(--ink);
}
.msg .content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: rgba(20, 22, 23, 0.06);
  padding: 1px 5px;
  border-radius: 4px;
  word-break: break-word;
}
.msg .content pre {
  background: #0f172a;
  color: #e2e8f0;
  padding: 12px 14px;
  border-radius: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 8px 0;
  font-size: 13px;
  line-height: 1.5;
  max-width: 100%;
}
.msg .content pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
  word-break: normal;
}
.msg .content a { color: var(--brand-secondary); text-decoration: underline; word-break: break-word; }
.msg .content a:hover { color: var(--brand-primary); }
.msg .content hr { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }
.msg .content table {
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 14px;
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.msg .content th, .msg .content td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; }
.msg .content th { background: rgba(42, 64, 147, 0.06); font-family: var(--font-heading); }

.sources { margin-top: 10px; font-size: 13px; }
.sources summary { cursor: pointer; color: var(--brand-secondary); font-family: var(--font-heading); padding: 6px 0; }
.sources ul { margin: 6px 0 0 16px; padding: 0; }
.sources li { padding: 6px; border-radius: 4px; transition: background-color .25s ease; list-style: disc; word-break: break-word; }
.sources li.source-highlight { animation: src-flash 1.6s ease-out; }
@keyframes src-flash {
  0%   { background-color: rgba(0, 207, 210, 0.55); box-shadow: 0 0 0 4px rgba(0, 207, 210, 0.20); }
  100% { background-color: transparent; box-shadow: 0 0 0 0 rgba(0, 207, 210, 0); }
}

.src-pill {
  display: inline-block;
  padding: 0 8px;
  margin-right: 6px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  vertical-align: 0.05em;
}
.src-pill-kb { background: rgba(42, 64, 147, 0.12); color: var(--brand-primary); }
.src-pill-my { background: rgba(0, 207, 210, 0.20); color: var(--brand-secondary); }

a.citation {
  display: inline-block;
  padding: 0 7px;
  margin: 0 1px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.78em;
  line-height: 1.7;
  letter-spacing: 0.03em;
  text-decoration: none !important;
  vertical-align: 0.05em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter .15s ease, transform .05s ease;
}
a.citation:hover { filter: brightness(0.93); text-decoration: none !important; }
a.citation:active { transform: translateY(1px); }
a.citation-kb { background: rgba(42, 64, 147, 0.12); color: var(--brand-primary); border-color: rgba(42, 64, 147, 0.22); }
a.citation-my { background: rgba(0, 207, 210, 0.18); color: var(--brand-secondary); border-color: rgba(0, 207, 210, 0.32); }

.structured { margin-top: 14px; padding: 14px; background: #fff; border: 1px dashed var(--brand-accent); border-radius: var(--radius); }
.structured h4 { margin: 8px 0 4px; color: var(--brand-primary); font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--font-heading); }
.structured ul { padding-left: 22px; }

.composer { margin-top: 18px; }
.composer-row { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; gap: 12px; flex-wrap: wrap; }
.composer-row label { margin: 0; }

/* Upload row used on the conversations page. */
.upload-row { gap: 12px; align-items: stretch; }
.upload-row .upload-label { margin: 0; flex: 1 1 220px; min-width: 200px; }
.upload-row input[type=file] { width: 100%; }
.upload-row .upload-flag { margin: 0; flex: 1 1 220px; display: flex; align-items: center; gap: 8px; }
.upload-row button.primary { flex: 0 0 auto; }

.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--font-heading); font-weight: 700; }
.badge.user { background: #e3e8ef; color: #374151; }
.badge.admin { background: var(--brand-primary); color: #fff; }

.lang-switcher {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px;
  font-family: var(--font-heading); font-size: 12px;
  min-height: 36px;
}
.lang-switcher .lang-opt { color: var(--muted); text-decoration: none; font-weight: 600; letter-spacing: 0.05em; padding: 4px 4px; }
.lang-switcher .lang-opt:hover { color: var(--brand-primary); text-decoration: none; }
.lang-switcher .lang-opt.active { color: var(--brand-primary); }
.lang-switcher .lang-sep { color: var(--line); }

/* ---------- Breakpoints ---------- */

/* ≤ 1024px — tablet */
@media (max-width: 1024px) {
  .layout { grid-template-columns: 240px 1fr; gap: 18px; }
}

/* ≤ 800px — collapse layout grid (kept from original behaviour) */
@media (max-width: 800px) {
  .layout { grid-template-columns: 1fr; }
}

/* ≤ 768px — phone+ : enable hamburger nav. */
@media (max-width: 768px) {
  .topbar { padding: 10px 14px; gap: 8px; flex-wrap: nowrap; }
  .topbar .brand { gap: 8px; }
  .topbar .brand-text { display: none; }
  .nav-toggle { display: flex; }
  .primary-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 14px 16px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    z-index: 30;
  }
  .primary-nav[data-open="false"] { display: none; }
  .primary-nav a, .primary-nav .nav-email, .primary-nav .nav-logout, .primary-nav .lang-switcher {
    width: 100%;
    padding: 12px 4px;
    border-bottom: 1px solid var(--line);
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .primary-nav .nav-logout { padding: 0; }
  .primary-nav .nav-logout .link-btn { width: 100%; text-align: left; padding: 12px 4px; min-height: 44px; }
  .primary-nav .lang-switcher {
    border: 1px solid var(--line);
    border-radius: 999px;
    width: auto;
    align-self: flex-start;
    margin-top: 8px;
  }
  .nav-email { max-width: none; white-space: normal; word-break: break-all; }
}

/* ≤ 640px — small phone : fluid spacing, stacked admin tables. */
@media (max-width: 640px) {
  .card { padding: clamp(14px, 4.5vw, 22px); }
  .main { padding: clamp(14px, 4.5vw, 22px); }
  .side { padding: 14px; }

  .upload-row { flex-direction: column; align-items: stretch; }
  .upload-row .upload-label,
  .upload-row .upload-flag,
  .upload-row button.primary { flex: 1 1 auto; width: 100%; }

  .composer-row { flex-direction: column; align-items: stretch; }
  .composer-row button { width: 100%; }

  /* Stacked admin tables: each row becomes a card with label/value pairs. */
  .data.stacked thead { display: none; }
  .data.stacked, .data.stacked tbody, .data.stacked tr, .data.stacked td { display: block; width: 100%; }
  .data.stacked tr {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: 12px;
    padding: 8px 12px;
  }
  .data.stacked td {
    border: 0;
    padding: 8px 0;
    border-bottom: 1px dashed var(--line);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    text-align: right;
  }
  .data.stacked td:last-child { border-bottom: 0; }
  .data.stacked td::before {
    content: attr(data-label);
    font-family: var(--font-heading);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--brand-secondary);
    margin-right: 12px;
    text-align: left;
    flex: 0 0 auto;
  }
  .data.stacked td:empty::before,
  .data.stacked td:not([data-label])::before { content: none; }
  .data.stacked td a { font-weight: 600; }

  .messages { gap: 10px; }
  .msg { padding: 12px 14px; }

  /* Bigger tap targets for sources/citation pills on small screens. */
  .sources li { padding: 8px 6px; }
}

/* Small phones — ensure narrow card has no awkward top margin under keyboards. */
@media (max-width: 420px) {
  .card.narrow { margin: 16px auto; }
  .topbar { padding: 8px 10px; }
}

/* Touch devices: enforce ≥44 px tap targets on pill-sized controls. */
@media (pointer: coarse) {
  .lang-switcher { min-height: 44px; padding: 8px 14px; }
  .lang-switcher .lang-opt {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; min-width: 44px; padding: 8px 12px;
  }
  a.citation {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; min-width: 44px; padding: 6px 14px; font-size: 0.9em;
    line-height: 1.2;
  }
  .src-pill {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; min-width: 44px; padding: 6px 14px; font-size: 12px;
    line-height: 1.2;
  }
  button.danger { min-height: 44px; padding: 8px 14px; font-size: 13px; }
  button.link-btn { min-height: 44px; padding: 10px 8px; display: inline-flex; align-items: center; }
  /* Sidebar conversation list items must be easy to tap. */
  .list li { padding: 6px 0; }
  .list li a {
    display: flex; align-items: center;
    min-height: 44px;
    padding: 10px 4px;
  }
  .list li .small { padding: 0 4px 6px; }
  .sources summary { min-height: 44px; display: flex; align-items: center; }
  .sources li { min-height: 44px; padding: 10px 8px; display: flex; align-items: center; }
}

/* ---- Site footer + changelog page ------------------------------------ */

.sitefoot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 18px;
  padding: 18px var(--pad-container-x) 22px;
  margin-top: 32px;
  border-top: 1px solid var(--line);
  background: var(--bg-card);
  text-align: center;
}
.sitefoot-brand { white-space: nowrap; }
.sitefoot-link {
  color: var(--brand-primary);
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95em;
}
.sitefoot-link:hover,
.sitefoot-link:focus { text-decoration: underline; }
.sitefoot-version {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
@media (pointer: coarse) {
  .sitefoot-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 6px 10px;
  }
}

.changelog { max-width: 760px; margin: 0 auto; }
.changelog-head { margin-bottom: 28px; }
.changelog-head h1 { margin-bottom: 6px; }
.changelog-current {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 16px;
  background: var(--user);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand-primary);
  border-radius: var(--radius);
}
.changelog-current-label { font-family: var(--font-heading); font-weight: 600; }
.changelog-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--brand-primary);
  color: var(--accent-ink);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85em;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.changelog-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.changelog-entry {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--pad-card);
  margin-bottom: 18px;
}
.changelog-entry.is-current {
  border-color: var(--brand-primary);
}
.changelog-entry-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 10px;
}
.changelog-entry-title {
  font-size: var(--fs-h3);
  margin: 0;
  flex: 1 1 100%;
  font-family: var(--font-heading);
  line-height: 1.25;
}
.changelog-items {
  margin: 6px 0 0;
  padding-left: 1.2em;
}
.changelog-items li { margin-bottom: 6px; line-height: 1.55; }