/* ============================================================ tokens */
/* Warm-neutral, monochrome design language: stone panels, hairline borders,
   black pill buttons, large tight headings. Color is reserved for data and status. */

:root {
  --bg: #f7f7f5;
  --panel: #f3f2ef;
  --card: #fcfcfb;
  --surface: #ffffff;
  --surface-2: #f7f7f5;
  --surface-3: #efeeea;
  --border: #e7e7e4;
  --border-strong: #d6d5d0;
  --text: #111111;
  --text-2: #3a3a38;
  --muted: #6b6b6b;
  --faint: #9a9a96;

  --primary: #111111;
  --primary-hover: #2b2b2b;
  --brand: #4a55e8; /* the blue-violet of the logo (brand-mark.svg) */
  --success: #15803d;
  --success-50: #eff8f2;
  --success-100: #d3ecdb;
  --blue: #2563eb;
  --blue-700: #1e3a8a;
  --blue-50: #eff5ff;
  --blue-100: #dbe6fe;
  /* the accent: the logo's violet, blue and cyan */
  --accent-gradient: linear-gradient(135deg, #7c5cff 0%, #3b6cf6 50%, #06b6d4 100%);
  --amber-50: #fffbeb;
  --warning: #b45309;
  --error: #b91c1c;
  --error-50: #fef2f2;

  --shadow-xs: 0 1px 2px rgba(17, 17, 17, .04);
  --shadow-sm: 0 1px 3px rgba(17, 17, 17, .05), 0 1px 2px rgba(17, 17, 17, .03);
  --shadow-md: 0 14px 34px -14px rgba(17, 17, 17, .14);
  --shadow-lg: 0 34px 70px -26px rgba(17, 17, 17, .24);

  --font: "Geist", "Heebo", "Segoe UI", system-ui, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--text); }
code, .mono { font-family: var(--mono); }
.icon { width: 18px; height: 18px; flex-shrink: 0; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d6d5d0; border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }

.muted { color: var(--muted); }
.error-text { color: var(--error); }
.warning-text { color: var(--warning); }
body:not(.engineer) .engineer-only { display: none !important; }

.label-caps { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* ========================================================== controls */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-size: 14.5px; font-weight: 500;
  padding: 9px 18px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, opacity .15s;
}
.btn.primary { background: var(--primary); color: #fff; }
.btn.primary:hover { background: var(--primary-hover); }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn.ghost:hover { background: var(--surface-3); }
.btn.danger { color: var(--error); }
.btn.danger:hover { background: var(--error-50); border-color: #f3c7c7; }
.btn.sm { padding: 6px 12px; font-size: 13px; }
.btn.lg { padding: 13px 26px; font-size: 16px; }
.btn:disabled { opacity: .45; cursor: default; }
.btn .icon { width: 17px; height: 17px; }

.icon-btn {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer;
}
.icon-btn:hover { background: var(--surface-3); color: var(--text); }

input[type="password"], input[type="text"] {
  font: inherit; padding: 10px 16px;
  border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--surface); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
input[type="password"]:focus, input[type="text"]:focus { border-color: var(--text); box-shadow: 0 0 0 4px rgba(17, 17, 17, .06); }

.engineer-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 999px;
  font-size: 14px; font-weight: 500; color: var(--muted); cursor: pointer; user-select: none;
}
.engineer-toggle:hover { color: var(--text); }
.engineer-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.engineer-toggle .switch { position: relative; width: 36px; height: 21px; border-radius: 99px; background: #d6d5d0; transition: background .2s; }
.engineer-toggle .switch::after {
  content: ""; position: absolute; top: 3px; inset-inline-start: 3px;
  width: 15px; height: 15px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: inset-inline-start .2s;
}
.engineer-toggle input:checked + .switch { background: var(--primary); }
.engineer-toggle input:checked + .switch::after { inset-inline-start: 18px; }
.engineer-toggle input:checked ~ span:last-child { color: var(--text); }
.engineer-toggle input:focus-visible + .switch { outline: 2px solid var(--text); outline-offset: 2px; }


.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 4px 12px; border-radius: 99px; }
.badge.warn { background: var(--amber-50); color: var(--warning); border: 1px solid #f5e1a8; }


.tile { background: var(--panel); color: var(--text); border: 1px solid var(--border); }

.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--border-strong); border-top-color: var(--text); border-radius: 50%; animation: spin .8s linear infinite; }

canvas.barcode { display: block; width: 100%; height: 18px; border-radius: 4px; border: 1px solid var(--border); image-rendering: pixelated; }

/* ============================================================ header */

.app-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 16px;
  height: 72px; padding: 0 32px;
  background: rgba(247, 247, 245, .82); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(231, 231, 228, .8);
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--text); text-decoration: none; }
.brand-logo { display: block; height: 40px; width: auto; flex-shrink: 0; }
/* the name, and under it the institute; its long name gives way (…) before the buttons beside it
   are pushed off screen */
.brand-text { display: grid; min-width: 0; line-height: 1.25; }
.brand-text > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-text strong { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.brand-text small { margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.header-controls { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }
/* Small screens: the header's controls stay on one row, and the engineer switch loses its label. */
@media (max-width: 640px) {
  .header-controls { flex-wrap: nowrap; flex-shrink: 1; gap: 6px; min-width: 0; }
}
@media (max-width: 480px) {
  .app-header .engineer-toggle { padding: 6px 2px; }
  .app-header .engineer-toggle > span:last-child { display: none; }
}

/* ============================================================== chat */



.suggestion {
  display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--border);
  font: inherit; color: var(--text); text-align: start; cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.suggestion:hover { background: var(--surface); border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.suggestion strong { display: block; font-weight: 600; font-size: 13.5px; }
.suggestion small { display: block; color: var(--muted); font-size: 12.5px; }
.s-icon { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }
.s-icon [data-icon] svg, .s-icon svg { width: 14px; height: 14px; }

.msg-row { display: flex; gap: 12px; align-items: flex-start; animation: fadeUp .35s ease both; }
.msg-row.user { justify-content: flex-end; }
.bubble-user {
  max-width: 75%; padding: 11px 18px;
  border-radius: 22px; border-end-end-radius: 6px;
  background: var(--primary); color: #fff; white-space: pre-wrap;
}
.avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); }
.avatar img { height: 22px; width: auto; }
.bot-card {
  flex: 1; min-width: 0; padding: 16px 20px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 22px; border-start-start-radius: 6px;
}
.bot-card.error { background: var(--error-50); border-color: #f3c7c7; color: var(--error); }
.bot-card.notice { background: var(--amber-50); border-color: #f5e1a8; }

.answer p { margin: .35em 0; }
.answer ul, .answer ol { margin: .35em 0; padding-inline-start: 1.4em; }
.answer li { margin: .15em 0; }
.answer .answer-h { margin-top: .7em; font-weight: 600; }
.answer b { font-weight: 600; }
/* the question an answer ends with when a detail would make it exact ("כדי לדייק: …") */
.answer .answer-ask {
  display: flex; align-items: flex-start; gap: 8px; margin-top: .8em; padding: 9px 12px;
  border-radius: 12px; background: var(--blue-50); color: var(--text);
}
.answer .answer-ask .icon { width: 16px; height: 16px; margin-top: .3em; color: var(--blue); }
/* what the model marked as important: plain text until the "הדגשה" tool is on, then marked like
   a highlighter, one part after another, from where the reading starts */
.answer strong.key {
  font-weight: inherit; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(rgba(250, 204, 21, .4), rgba(250, 204, 21, .4)) right / 0% 100% no-repeat;
  transition: background-size .45s ease calc(var(--i, 0) * 70ms);
}
.answer:dir(ltr) strong.key { background-position: left; }
.answer.key-on strong.key { font-weight: 600; background-size: 100% 100%; }
/* a table the model wrote; on a narrow screen it scrolls sideways inside its frame */
.answer .table-wrap { margin: .6em 0; overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.answer table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.6; }
.answer th, .answer td { padding: 9px 12px; text-align: start; vertical-align: top; border-bottom: 1px solid var(--border); }
.answer th + th, .answer td + td { border-inline-start: 1px solid var(--border); }
.answer th { background: var(--panel); font-weight: 600; white-space: nowrap; }
.answer tbody tr:last-child td { border-bottom: 0; }
.answer td:first-child { min-width: 7em; font-weight: 500; color: var(--text); }
.answer td { min-width: 10em; }

.cite {
  display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; margin: 0 2px;
  font: inherit; font-size: 11px; font-weight: 600; line-height: 1;
  color: var(--text); background: var(--panel); border: 1px solid var(--border-strong); border-radius: 6px;
  vertical-align: 2px; cursor: pointer; transition: background .15s, color .15s;
}
.cite:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

/* "thinking" progress: real pipeline steps until the answer starts streaming */
.thinking { display: grid; gap: 6px; padding: 2px 0; }
.think-done { display: grid; gap: 5px; }
.think-done:empty { display: none; }
.think-step { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); animation: fadeUp .25s ease both; }
.think-step span { display: grid; place-items: center; width: 17px; }
.think-step .icon { width: 14px; height: 14px; color: var(--success); }
.think-current { display: flex; align-items: center; gap: 10px; }
.think-label { font-size: 14.5px; font-weight: 500; }
.think-hint { margin-inline-start: 27px; font-size: 12.5px; color: var(--muted); }
/* one plain line for everyone; the technical steps only in engineer mode */
body:not(.engineer) .think-tech, body:not(.engineer) .think-done { display: none; }
body.engineer .think-simple { display: none; }
/* a tiny 3x3 "vector grid" with a diagonal wave running through it */
.think-grid { display: grid; grid-template-columns: repeat(3, 5px); gap: 1px; flex-shrink: 0; }
.think-grid i { width: 5px; height: 5px; border-radius: 1.5px; background: var(--text); animation: cellWave 1.1s ease-in-out infinite; }
.think-grid i:nth-child(2), .think-grid i:nth-child(4) { animation-delay: .1s; }
.think-grid i:nth-child(3), .think-grid i:nth-child(5), .think-grid i:nth-child(7) { animation-delay: .2s; }
.think-grid i:nth-child(6), .think-grid i:nth-child(8) { animation-delay: .3s; }
.think-grid i:nth-child(9) { animation-delay: .4s; }
@keyframes cellWave { 0%, 100% { opacity: .15; transform: scale(.7); } 45% { opacity: 1; transform: scale(1); } }
/* text with a light sweep moving right to left (reading direction) */
.shimmer {
  background: linear-gradient(90deg, var(--muted) 0%, var(--muted) 40%, var(--text) 50%, var(--muted) 60%, var(--muted) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmerText 1.8s linear infinite;
}
@keyframes shimmerText { from { background-position: 0% 0; } to { background-position: 100% 0; } }

/* the model's reasoning (chat.js: thoughtPanel): a card while it thinks, with a window of fixed
   size; then a plain line above the answer, which opens back into the card */
.thinking.reasoning .think-current { display: none; } /* the card replaces the step line */
.thought {
  max-width: 560px; margin-bottom: 14px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); box-shadow: var(--shadow-xs); overflow: hidden; animation: fadeUp .25s ease both;
  transition: border-color .3s, background-color .3s, box-shadow .3s;
}
.thought:not(.live):not(.open) { border-color: transparent; background-color: transparent; box-shadow: none; }
.thought-head {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; background: none;
  font: inherit; font-size: 13px; font-weight: 500; color: var(--text-2); text-align: start; cursor: pointer;
  transition: padding .3s, color .15s;
}
.thought:not(.live):not(.open) .thought-head { padding-inline: 0; color: var(--muted); } /* in line with the answer */
.thought-head:hover:not(:disabled) { color: var(--text); }
.thought-head:disabled { cursor: default; }
.thought-icon {
  position: relative; width: 24px; height: 24px; flex-shrink: 0; display: grid; place-items: center; overflow: hidden;
  border-radius: 7px; background: var(--primary); color: #fff;
}
/* while it works, a sheen passes over the icon (the research card's icon has the same) */
.thought.live .thought-icon::after, .research-live.live .rl-icon::after {
  content: ""; position: absolute; inset: 0; transform: translateX(120%);
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%);
  animation: rlSheen 2.6s ease-in-out infinite;
}
.thought-icon .icon { width: 15px; height: 15px; }
.thought.live .thought-icon .icon { animation: thoughtPulse 1.6s ease-in-out infinite; }
.thought-label { font-weight: 600; }
.thought:not(.live) .thought-label { font-weight: 500; }
.thought-time { margin-inline-start: auto; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--faint); }
.thought:not(.live) .thought-time { display: none; }
.thought-chevron { display: grid; color: var(--faint); }
.thought-chevron .icon { width: 14px; height: 14px; transition: transform .2s; }
.thought.live .thought-chevron { display: none; }
.thought.open .thought-chevron .icon { transform: rotate(180deg); }
/* a hairline under the header; while thinking, a short bar runs along it */
.thought-progress { position: relative; height: 1px; background: var(--border); overflow: hidden; transition: background-color .3s; }
.thought:not(.live):not(.open) .thought-progress { background-color: transparent; }
.thought.live .thought-progress::after {
  content: ""; position: absolute; inset-block: 0; width: 28%; background: linear-gradient(90deg, transparent, var(--blue), #0b0f1a);
  animation: thoughtProgress 1.5s ease-in-out infinite;
}
/* folding: the row shrinks from the window's height to nothing (the clip has no padding, so it can) */
.thought-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s ease; }
.thought.live .thought-wrap, .thought.open .thought-wrap { grid-template-rows: 1fr; }
.thought-clip { min-height: 0; overflow: hidden; }
.thought-body {
  padding: 10px 14px 12px; font-size: 12.5px; line-height: 1.7; color: var(--muted);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
/* while thinking: always the same size, the newest lines at the bottom and the older ones fading out */
.thought.live .thought-body {
  height: 104px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 42%); mask-image: linear-gradient(to bottom, transparent, #000 42%);
}
.thought.open .thought-body { max-height: 280px; overflow-y: auto; }
@keyframes thoughtPulse { 0%, 100% { opacity: .55; transform: scale(.92); } 50% { opacity: 1; transform: scale(1); } }
@keyframes thoughtProgress { from { inset-inline-start: -28%; } to { inset-inline-start: 100%; } }

.sources { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.sources-label { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.sources-label .icon { width: 15px; height: 15px; }
.source-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.source-chip {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  padding: 5px 14px 5px 6px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--border);
  font: inherit; font-size: 13.5px; color: var(--text-2); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.source-chip:hover { border-color: var(--text); background: var(--surface); color: var(--text); }
.source-chip .num { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: #fff; font-size: 11.5px; font-weight: 600; }
.source-chip .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.source-chip .page { color: var(--muted); font-size: 12.5px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-chip .icon { width: 15px; height: 15px; color: #b7791f; }

.answer-meta { margin-top: 12px; display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.meta-note { color: var(--warning); }
.copy-btn {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border: 0; border-radius: 8px;
  background: transparent; font: inherit; font-size: 12px; color: var(--muted); cursor: pointer; transition: background .15s, color .15s;
}
.copy-btn:hover { background: var(--panel); color: var(--text); }
.copy-btn .icon { width: 13px; height: 13px; }

/* The composer: the question on top, and under it a toolbar with the chat tools and the send button */
.composer {
  display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px;
  border-radius: 24px; background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-md); transition: border-color .15s, box-shadow .15s;
}
.composer:focus-within { border-color: var(--border-strong); box-shadow: 0 0 0 4px rgba(17, 17, 17, .05), var(--shadow-md); }
.composer textarea {
  width: 100%; border: 0; outline: none; resize: none; background: transparent;
  font: inherit; font-size: 16px; line-height: 1.5; padding: 8px 8px 6px; max-height: 180px;
}
.composer-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
/* the notes above the tools open from the toolbar's edge, so they stay on screen on a phone too */
.composer-tools { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
/* the voice conversation button, next to sending */
.composer-end { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.tool-btn.voice-link { text-decoration: none; }
.tool-group { display: flex; }
.send-btn {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: var(--primary); color: #fff; cursor: pointer; transition: background .15s, opacity .15s;
}
.send-btn:hover { background: var(--primary-hover); }
.send-btn .icon { width: 19px; height: 19px; stroke-width: 2.4; }
.send-btn.stop .icon { width: 13px; height: 13px; fill: currentColor; }
/* nothing to send yet */
.send-btn.idle { opacity: .28; cursor: default; }
.send-btn.idle:hover { background: var(--primary); }
.stopped-note { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.stopped-note .icon { width: 13px; height: 13px; }
/* the tools: round icon buttons; a tool that is on (or a thinking level above the default) is tinted and shows its name */
.tool-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; min-width: 36px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--border);
  background: transparent; font: inherit; font-size: 13px; font-weight: 500; color: var(--muted);
  white-space: nowrap; cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
.tool-btn:hover { border-color: var(--border-strong); background: var(--panel); color: var(--text); }
.tool-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.tool-btn .icon { width: 18px; height: 18px; flex-shrink: 0; }
.tool-btn .tool-label { display: none; }
.tool-btn[aria-pressed="true"], .tool-btn.active { padding-inline: 9px 13px; border-color: var(--blue-100); background: var(--blue-50); color: var(--blue-700); }
.tool-btn[aria-pressed="true"] .icon, .tool-btn.active .icon { color: var(--blue); }
.tool-btn[aria-pressed="true"] .tool-label, .tool-btn.active .tool-label { display: inline; }
/* the tool's name above it on mouse hover (a tool that is on already shows it) */
@media (hover: hover) {
  .tool-btn[data-tip]::after {
    content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; translate: -50% 3px; z-index: 21;
    padding: 5px 9px; border-radius: 8px; background: var(--primary); color: #fff; font-size: 12px; font-weight: 500;
    pointer-events: none; opacity: 0; transition: opacity .12s, translate .12s;
  }
  .tool-btn[data-tip]:hover::after { opacity: 1; translate: -50% 0; transition-delay: .3s; }
  .tool-btn[aria-pressed="true"]::after, .tool-btn.active::after, .tool-group:has(.tool-pop:not([hidden])) .tool-btn::after { display: none; }
}
/* deep research in the chat (chat.js: researchCard). While it runs: a light runs along the border,
   the stage in progress shimmers and the track into it flows, the text of the aspects being
   searched shimmers, and the passages found come in as tiles that the review keeps (solid) or drops (faded).
   Then it folds into one line above the answer, which opens back into the card. */
@property --rl-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.thinking.deep { display: block; padding: 0; }
.research-live {
  position: relative; max-width: 600px; margin-bottom: 14px; container-type: inline-size; border: 1px solid var(--border); border-radius: 16px;
  background: var(--surface); box-shadow: var(--shadow-sm); animation: fadeUp .3s ease both;
  transition: background-color .35s, box-shadow .35s, border-radius .35s;
}
.research-live:not(.live) { border-radius: 12px; background: var(--panel); box-shadow: none; }
.research-live.open { background: var(--surface); }
.research-live.live::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--rl-angle), transparent 0 40%, rgba(30, 58, 138, .25) 52%, #1e3a8a 64%, #2f6df6 74%, #9db8ff 78%, #2f6df6 82%, #0b0f1a 92%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: rlBorder 3.2s linear infinite;
}
.rl-head {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; border: 0; background: none;
  font: inherit; font-size: 13.5px; color: var(--text-2); text-align: start; cursor: pointer; transition: padding .35s;
}
.research-live:not(.live) .rl-head { padding: 7px 12px; font-size: 13px; }
.rl-head:disabled { cursor: default; }
.rl-icon {
  position: relative; width: 28px; height: 28px; flex-shrink: 0; display: grid; place-items: center; overflow: hidden;
  border-radius: 8px; background: var(--primary); color: #fff; transition: width .35s, height .35s;
}
.research-live:not(.live) .rl-icon { width: 22px; height: 22px; background: none; color: var(--text); }
.rl-icon .icon { width: 16px; height: 16px; }
.research-live.live .rl-icon .icon { animation: rlScope 2.6s ease-in-out infinite; }
.rl-title { flex-shrink: 0; font-weight: 600; color: var(--text); }
.research-live:not(.live) .rl-title { font-weight: 500; color: var(--text-2); }
.rl-phase, .rl-summary { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-phase { padding-inline-start: 10px; border-inline-start: 1px solid var(--border); font-weight: 500; }
.research-live:not(.live) .rl-phase, .research-live.live .rl-summary { display: none; }
.rl-summary { color: var(--muted); }
.rl-summary::before { content: "· "; }
.rl-time { margin-inline-start: auto; flex-shrink: 0; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--faint); }
.research-live:not(.live) .rl-time { display: none; }
.rl-chevron { display: grid; margin-inline-start: auto; color: var(--faint); }
.rl-chevron .icon { width: 14px; height: 14px; transition: transform .2s; }
.research-live.live .rl-chevron { display: none; }
.research-live.open .rl-chevron .icon { transform: rotate(180deg); }
.rl-head:not(:disabled):hover .rl-chevron, .rl-head:not(:disabled):hover .rl-title { color: var(--text); }
/* folding: the row shrinks from the body's height to nothing, as the reasoning window does */
.rl-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s ease; }
.research-live.live .rl-wrap, .research-live.open .rl-wrap { grid-template-rows: 1fr; }
.rl-clip { min-height: 0; overflow: hidden; }
.rl-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 0 14px 14px; }
/* the stages, on a track */
.rl-stages { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.rl-stage { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; font-size: 12.5px; font-weight: 500; color: var(--faint); transition: color .3s; }
.rl-stage b {
  width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; color: transparent;
  border: 1.5px solid var(--border-strong); background: var(--surface); transition: background-color .3s, border-color .3s, color .3s;
}
.rl-stage b .icon { width: 10px; height: 10px; stroke-width: 3.2; }
.rl-stage.active { color: var(--text); }
.rl-stage.active b { border-color: var(--blue); background: var(--blue-50); animation: rlRing 1.6s ease-out infinite; }
.rl-stage.active b::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-gradient); animation: thoughtPulse 1.6s ease-in-out infinite; }
.rl-stage.active b .icon { display: none; }
.rl-stage.done { color: var(--text-2); }
.rl-stage.done b { border-color: var(--text); background: var(--text); color: #fff; animation: pop .35s ease; }
.rl-stage[data-stage="again"] { animation: fadeIn .35s ease both; }
.rl-link { position: relative; flex: 1; min-width: 12px; height: 2px; border-radius: 2px; background: var(--border); overflow: hidden; }
.rl-link::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 0; background: var(--text); transition: width .5s ease; }
.rl-link.filled::before { width: 100%; }
.rl-link.flowing::after {
  content: ""; position: absolute; inset-block: 0; width: 55%;
  background: linear-gradient(90deg, transparent, var(--blue), #0b0f1a, transparent); animation: rlFlow 1.25s ease-in-out infinite;
}
/* the aspects: plain lines; the text shimmers while searched, and a check comes beside the ones found */
.rl-aspects { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.rl-aspects li {
  display: flex; align-items: baseline; gap: 10px; font-size: 13px; color: var(--text-2);
  animation: fadeUp .3s ease both; animation-delay: calc(var(--i, 0) * 90ms); transition: color .4s;
}
.rl-aspects .asp-num {
  width: auto; height: auto; border: 0; background: none; flex-shrink: 0; min-width: 12px;
  font: 500 11.5px var(--mono); color: var(--faint);
}
.rl-q { flex: 1; min-width: 0; }
.rl-aspects li.scanning .rl-q {
  background: linear-gradient(90deg, var(--muted) 0%, var(--muted) 40%, var(--text) 50%, var(--muted) 60%, var(--muted) 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmerText 1.8s linear infinite; animation-delay: calc(var(--i, 0) * 200ms);
}
.rl-aspects .aspect-mark { flex-shrink: 0; margin-inline-start: auto; white-space: nowrap; align-self: center; }
.rl-aspects .aspect-mark.ok .icon { width: 15px; height: 15px; animation: pop .45s ease; }
.rl-aspects li.covered { color: var(--text); }
.rl-aspects li.missing { color: var(--muted); }
/* the passages found: tiles, kept (solid) or dropped (faded) by the review; waiting ones breathe */
.rl-passages { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rl-tiles { display: flex; flex-wrap: wrap; gap: 4px; }
.rl-tiles i {
  width: 9px; height: 12px; border-radius: 2.5px; background: var(--border-strong);
  animation: rlTile .35s ease both; animation-delay: calc(var(--i, 0) * 45ms);
  transition: background-color .35s, opacity .35s, transform .35s, box-shadow .35s; transition-delay: calc(var(--i, 0) * 40ms);
}
.research-live.live .rl-tiles i:not(.kept):not(.dropped) {
  animation: rlTile .35s ease both, rlBreathe 1.2s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 45ms), calc(var(--i, 0) * 45ms + .4s);
}
.rl-tiles i.kept { background: var(--text); }
.rl-tiles i.dropped { background: transparent; box-shadow: inset 0 0 0 1px var(--border-strong); opacity: .55; transform: scale(.82); }
.rl-count { font-size: 12.5px; color: var(--muted); }
.rl-count span { display: inline-block; animation: fadeIn .35s ease both; }
/* engineer mode: the technical steps already done */
.rl-log { display: grid; gap: 4px; padding: 8px 10px; border-radius: 10px; background: var(--panel); border: 1px solid var(--border); }
.rl-log .think-step { font-size: 12px; }
.rl-log:empty, body:not(.engineer) .rl-log { display: none; }
.research-live .think-hint { margin: 0; }
@keyframes rlBorder { to { --rl-angle: 360deg; } }
@keyframes rlScope { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(6deg); } }
@keyframes rlSheen { 0%, 45% { transform: translateX(120%); } 100% { transform: translateX(-120%); } }
@keyframes rlRing { 0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, .35); } 100% { box-shadow: 0 0 0 7px rgba(37, 99, 235, 0); } }
@keyframes rlFlow { from { inset-inline-start: -55%; } to { inset-inline-start: 100%; } }
@keyframes rlTile { from { opacity: 0; transform: translateY(5px) scale(.5); } }
@keyframes rlBreathe { 50% { opacity: .4; } }
@container (max-width: 560px) { /* a narrow card: only the stage in progress keeps its name */
  .rl-stage:not(.active) > span { display: none; }
}
/* what the review found for each aspect: a check, "searching again" while another round runs, or "not found" */
.aspect-mark { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 6px; vertical-align: -2px; font-size: 11.5px; font-weight: 500; animation: fadeIn .25s ease both; }
.aspect-mark .icon { width: 13px; height: 13px; }
.aspect-mark.ok { color: var(--success); }
.aspect-mark.again { color: var(--blue-700); }
.aspect-mark.again .icon { animation: spin 1.4s linear infinite; }
.aspect-mark.missing { padding: 0 7px; border-radius: 99px; background: var(--surface-3); color: var(--muted); }
/* the note that opens above a tool when it is turned on or off */
.tool-pop {
  position: absolute; bottom: calc(100% + 10px); inset-inline-start: 0; z-index: 20; width: 280px;
  padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-lg); font-size: 13.5px; line-height: 1.6; color: var(--text-2); animation: popIn .2s ease both;
}
.tool-pop[hidden] { display: none; }
.tool-pop strong { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 14px; color: var(--text); }
.tool-pop p { margin: 0; }
.tool-state { padding: 1px 8px; border-radius: 99px; background: var(--panel); color: var(--muted); font-size: 11.5px; font-weight: 600; }
.tool-pop.on .tool-state { background: var(--blue-50); color: var(--blue-700); }
/* a tool's menu of choices (answer length, thinking level), as a radio list */
.menu-options { display: grid; gap: 2px; margin: 10px -6px 0; }
.menu-option {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 0; border-radius: 10px;
  background: transparent; font: inherit; font-size: 14px; color: var(--text); text-align: start; cursor: pointer;
}
.menu-option:hover { background: var(--panel); }
.menu-option::before { content: ""; width: 16px; height: 16px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid var(--border-strong); }
.menu-option[aria-checked="true"]::before { border: 5px solid var(--blue); }
.menu-option-text { display: grid; line-height: 1.35; }
.menu-option-text small { font-size: 12px; color: var(--muted); }
.menu-option em { margin-inline-start: auto; font-size: 11.5px; font-style: normal; color: var(--faint); white-space: nowrap; }
/* multiple-choice follow-up when there is no exact answer (interactive chat) */
.choice-list { display: grid; gap: 8px; margin-top: 12px; }
.choice {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--border); font: inherit; font-size: 14.5px; color: var(--text);
  text-align: start; cursor: pointer; transition: border-color .15s, background .15s, opacity .2s;
}
.choice:hover { border-color: var(--text); background: var(--surface); }
.choice-letter {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--border-strong); font-size: 13px; font-weight: 600; color: var(--muted);
  transition: background .15s, color .15s, border-color .15s;
}
.choice:hover .choice-letter, .choice.picked .choice-letter { background: var(--primary); border-color: var(--primary); color: #fff; }
.choice.picked { border-color: var(--text); background: var(--surface); }
.choice-list.used .choice:not(.picked) { opacity: .5; }
/* an answer reused from an earlier question (answer cache), with "new answer" and "turn off" */
.reused {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 12px; padding: 8px 10px;
  border-radius: 12px; background: var(--success-50); border: 1px solid var(--success-100); font-size: 12.5px; color: var(--text-2);
}
.reused-badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 99px; white-space: nowrap;
  background: var(--surface); border: 1px solid var(--success-100); color: var(--success); font-weight: 600;
}
.reused-badge .icon { width: 13px; height: 13px; }
/* how similar the question was to the saved one, as a small meter */
.reused-score { display: inline-flex; align-items: center; gap: 6px; padding-inline-start: 8px; margin-inline-start: 2px; border-inline-start: 1px solid var(--success-100); font-variant-numeric: tabular-nums; }
.reused-score i { position: relative; width: 34px; height: 5px; border-radius: 99px; background: var(--success-100); overflow: hidden; }
.reused-score i::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--p); border-radius: 99px; background: var(--success); }
.reused-text { flex: 1; min-width: 180px; line-height: 1.5; }
.reused-actions { display: flex; gap: 2px; margin-inline-start: auto; }
.link-btn {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border: 0; border-radius: 8px;
  background: transparent; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--text); cursor: pointer; white-space: nowrap;
}
.link-btn:hover { background: rgba(17, 17, 17, .06); }
.link-btn:disabled { color: var(--muted); background: transparent; cursor: default; }
.link-btn .icon { width: 13px; height: 13px; }
/* saved answers turned off: a chip that turns them back on */
.tool-btn.reuse-off { padding-inline: 10px 12px; border-style: dashed; border-color: var(--border-strong); color: var(--text-2); }
.tool-btn.reuse-off .icon { width: 15px; height: 15px; }
.tool-btn.reuse-off .tool-label { display: inline; }
/* the toolbar stays on one row next to the send button: when the names do not fit (chat.js:
   fitTools), every tool shows by its icon, and one that is on by its tint */
.composer-tools.compact .tool-btn { padding-inline: 8px; }
.composer-tools.compact .tool-label { display: none; }
@media (max-width: 480px) {
  .composer { padding: 6px 8px 8px; }
  .composer-bar { gap: 8px; }
  .composer-tools { gap: 4px; }
  .tool-btn.reuse-off { font-size: 12px; padding-inline: 8px 10px; }
  .tool-pop { width: min(280px, calc(100vw - 48px)); }
}
.disclaimer { font-size: 12.5px; color: var(--muted); text-align: center; margin: 12px 0 0; }

/* -------------------------------------------- behind the scenes (chat) */

.debug { margin-top: 16px; border-radius: 18px; overflow: hidden; background: var(--card); border: 1px solid var(--border); }
body:not(.engineer) .debug { display: none; }
.debug summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; font-size: 13.5px; font-weight: 600;
}
.debug summary .icon { color: var(--blue); }
.debug summary::-webkit-details-marker { display: none; }
.debug summary .muted { font-weight: 400; }
.debug-body { padding: 2px 16px 16px; }
.pipeline { display: grid; gap: 16px; }
.pstep { display: grid; grid-template-columns: 28px 1fr; gap: 12px; }
.pstep-num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--border); font-weight: 600; font-size: 12.5px; }
.pstep-title { font-weight: 600; font-size: 14px; }
.pstep-meta { font-size: 12.5px; color: var(--muted); margin: 1px 0 8px; font-family: var(--mono); }
code.vec {
  display: block; margin-top: 6px; padding: 7px 10px; border-radius: 10px;
  font-size: 12px; color: var(--text-2); background: var(--panel); border: 1px solid var(--border);
  direction: ltr; text-align: left; white-space: nowrap; overflow-x: auto;
}
.hits { display: grid; gap: 6px; }
.hit {
  display: grid; grid-template-columns: 1fr 160px; gap: 12px; align-items: center;
  padding: 8px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border);
  font: inherit; font-size: 13px; text-align: start; color: var(--text-2); cursor: pointer;
}
.hit:hover { border-color: var(--border-strong); }
.hit.cited { border-color: var(--success-100); background: #fbfefc; }
.hit-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hit-score { display: flex; align-items: center; gap: 8px; direction: ltr; }
.score-bar { flex: 1; height: 5px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.score-bar i { display: block; height: 100%; border-radius: 99px; background: #a3a29d; }
.hit.cited .score-bar i { background: var(--primary); }
.score-num { font-family: var(--mono); font-size: 12px; width: 46px; text-align: right; }
.tag-cited { font-size: 11px; font-weight: 500; color: var(--success); background: var(--success-50); padding: 1px 8px; border-radius: 99px; margin-inline-start: 6px; }
.tag-plain { font-size: 11px; font-weight: 500; color: var(--text-2); background: var(--surface-3); padding: 1px 8px; border-radius: 99px; margin-inline-start: 6px; }
/* deep research: a passage's origin under its name, its grade in place of the score */
.hit-main { display: grid; gap: 1px; min-width: 0; }
.hit-sub { font: 11.5px var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hit-sub .tag-cited { margin: 0; margin-inline-end: 6px; font-family: var(--font); }
.debug-list { display: grid; gap: 3px; margin: 0 0 4px; padding-inline-start: 20px; font-size: 13px; color: var(--text-2); }
.debug-list code { padding: 1px 6px; border-radius: 6px; background: var(--panel); border: 1px solid var(--border); font-family: var(--font); font-size: 12.5px; }
.debug-round { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: var(--blue-50); border: 1px solid var(--blue-100); }
.debug-round-title { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--blue-700); }
.debug-round-title .icon { width: 14px; height: 14px; }
.debug-round .pstep-meta { margin: 4px 0 0; }

/* ========================================================= chat page */
/* chat.html is an app: a side bar on a warm canvas, and the conversation on a white panel beside
   it. On the empty page the composer sits in the middle, and it moves to the bottom with the first
   question; answers are set as text rather than in cards. The page's surfaces are a step lighter
   than the other pages', and the rules below refine the chat components above for it. */

body.chat-page {
  --canvas: #f4f3f0;
  --bg: #ffffff;
  --panel: #f5f4f1;
  --card: #ffffff;
  --surface: #ffffff;
  --surface-2: #f8f8f6;
  --surface-3: #f1f0ed;
  --border: #e8e7e3;
  --border-strong: #d9d8d3;
  --text: #151514;
  --text-2: #3b3b38;
  --muted: #6f6e69;
  --faint: #a09f99;
  --primary: #151514;
  --primary-hover: #2e2e2c;
  --hover: rgba(21, 21, 20, .05);
  --pressed: rgba(21, 21, 20, .08);
  --shadow-xs: 0 1px 2px rgba(21, 21, 20, .05);
  --shadow-pop: 0 0 0 1px rgba(21, 21, 20, .06), 0 18px 40px -14px rgba(21, 21, 20, .22);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --column: 768px; /* the width of the conversation and the composer */
  --sidebar: 264px;

  height: 100vh; height: 100dvh; overflow: hidden;
  background: var(--canvas);
}
.chat-page ::selection { background: rgba(37, 99, 235, .16); }
.chat-page .icon { stroke-width: 1.8; }
.chat-page :focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.chat-page textarea:focus-visible { outline: none; }

/* ------------------------------------------------------------ layout */

.chat-app { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); height: 100%; transition: grid-template-columns .28s var(--ease); }

.chat-main {
  position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden;
  margin: 8px; margin-inline-start: 0; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); box-shadow: 0 1px 2px rgba(21, 21, 20, .04);
  transition: margin .28s var(--ease);
}

/* a wide screen folds the side bar away (chat.js remembers it); a narrow one slides it over the page */
@media (min-width: 901px) {
  .chat-app.sidebar-closed { grid-template-columns: 0 minmax(0, 1fr); }
  .chat-app.sidebar-closed .chat-main { margin-inline-start: 8px; }
  .chat-app.sidebar-closed .sidebar { visibility: hidden; transition: visibility 0s .28s; }
  .chat-app:not(.sidebar-closed) .when-sidebar-closed { display: none; }
}

/* ---------------------------------------------------------- side bar */

.sidebar { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; padding: 10px 10px 12px; }
.sidebar > * { flex-shrink: 0; width: calc(var(--sidebar) - 20px); } /* its own width, so nothing reflows while it folds */
.sidebar-head { display: flex; align-items: center; gap: 8px; height: 40px; padding-inline-start: 6px; }
.sidebar-brand {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
  font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--text); text-decoration: none;
}
.sidebar-brand img { width: 26px; height: 26px; flex-shrink: 0; object-fit: contain; } /* an organization's logo may not be square */
.sidebar-brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.new-chat {
  display: flex; align-items: center; gap: 10px; height: 38px; margin-top: 10px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-xs);
  font: inherit; font-size: 14px; font-weight: 500; color: var(--text); cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.new-chat:hover { border-color: var(--border-strong); box-shadow: 0 3px 8px -3px rgba(21, 21, 20, .12); }
.new-chat .icon { width: 17px; height: 17px; color: var(--text-2); }

/* the questions of this conversation; a click goes back to one */
.sidebar-history { flex: 1 1 auto; min-height: 0; overflow: hidden auto; margin-top: 22px; }
.sidebar-label { padding: 0 10px; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--faint); }
.question-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; margin: 0; padding: 0; list-style: none; }
.question-list li { animation: fadeIn .25s ease both; }
.question-list button {
  display: block; width: 100%; padding: 7px 10px; border: 0; border-radius: 8px; background: none;
  font: inherit; font-size: 13.5px; line-height: 1.45; color: var(--text-2); text-align: start;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s;
}
.question-list button:hover { background: var(--hover); color: var(--text); }
.question-list button[aria-current="true"] { background: var(--pressed); color: var(--text); font-weight: 500; }
.sidebar-empty { margin: 2px 10px 0; font-size: 13px; color: var(--faint); }
.question-list:not(:empty) + .sidebar-empty { display: none; }

.sidebar-foot { display: grid; gap: 1px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.sidebar-item {
  display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: 8px;
  font-size: 13.5px; font-weight: 500; color: var(--text-2); text-decoration: none; cursor: pointer; transition: background .15s, color .15s;
}
.sidebar-item:hover { background: var(--hover); color: var(--text); }
.sidebar-item .icon { width: 16px; height: 16px; color: var(--muted); }
/* the engineer switch, as a row of the side bar */
.chat-page .sidebar-item.engineer-toggle { display: flex; padding: 0 10px; border-radius: 8px; font-size: 13.5px; color: var(--text-2); }
.chat-page .sidebar-item.engineer-toggle:hover { color: var(--text); }
.chat-page .engineer-toggle .switch { margin-inline-start: auto; width: 30px; height: 18px; }
.chat-page .engineer-toggle .switch::after { width: 12px; height: 12px; }
.chat-page .engineer-toggle input:checked + .switch::after { inset-inline-start: 15px; }
.sidebar-org { display: grid; gap: 2px; padding: 10px 10px 0; font-size: 11.5px; line-height: 1.45; color: var(--faint); }
.sidebar-org span:empty { display: none; }

/* --------------------------------------------------------- top bar */

.chat-top { display: flex; align-items: center; gap: 4px; flex-shrink: 0; height: 52px; padding: 0 10px; border-bottom: 1px solid transparent; transition: border-color .2s; }
.chat-main.scrolled .chat-top { border-bottom-color: var(--border); }
.chat-top-end { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }
.chat-top .badge.warn { font-size: 12px; }

.bar-btn {
  position: relative; display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0;
  border: 0; border-radius: 9px; background: none; color: var(--muted); cursor: pointer; transition: background .15s, color .15s;
}
.bar-btn:hover { background: var(--hover); color: var(--text); }
.bar-btn .icon { width: 18px; height: 18px; }
/* the button's name under it on hover; in the side bar it opens inward, so the side bar's edge does not cut it */
@media (hover: hover) {
  .bar-btn[data-tip]::after {
    content: attr(data-tip); position: absolute; top: calc(100% + 6px); left: 50%; z-index: 60; translate: -50% -3px;
    padding: 4px 8px; border-radius: 7px; background: var(--primary); color: #fff; font-size: 12px; font-weight: 500; white-space: nowrap;
    pointer-events: none; opacity: 0; transition: opacity .12s, translate .12s;
  }
  .sidebar .bar-btn[data-tip]::after { left: auto; inset-inline-end: 0; translate: 0 -3px; }
  .bar-btn[data-tip]:hover::after { opacity: 1; translate: -50% 0; transition-delay: .35s; }
  .sidebar .bar-btn[data-tip]:hover::after { translate: 0 0; }
}

/* the model menu: the name of the model, opening a list grouped by provider */
.model-picker { position: relative; min-width: 0; }
.model-btn {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 34px; padding: 0 10px;
  border: 0; border-radius: 9px; background: none; font: inherit; font-size: 15px; font-weight: 600; color: var(--text);
  cursor: pointer; transition: background .15s;
}
.model-btn:hover, .model-btn[aria-expanded="true"] { background: var(--hover); }
/* the name, and beside it the account it runs on; two flex items, so the English words keep the page's order */
.model-name { display: flex; align-items: baseline; gap: 7px; min-width: 0; white-space: nowrap; }
.model-name > * { overflow: hidden; text-overflow: ellipsis; }
.model-name small { font-size: 13px; font-weight: 500; color: var(--faint); }
.model-btn .icon { width: 15px; height: 15px; color: var(--faint); transition: transform .2s; }
.model-btn[aria-expanded="true"] .icon { transform: rotate(180deg); }
.model-list {
  position: absolute; top: calc(100% + 6px); inset-inline-start: 0; z-index: 70; min-width: 270px;
  max-height: min(440px, 70vh); overflow-y: auto; padding: 6px;
  border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-pop); animation: menuIn .16s ease both;
}
.model-group + .model-group { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border); }
.model-group-label { padding: 7px 10px 3px; font-size: 11.5px; font-weight: 600; color: var(--faint); }
.model-option {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px;
  background: none; font: inherit; font-size: 14px; color: var(--text); text-align: start; cursor: pointer;
}
.model-option:hover, .model-option:focus-visible { background: var(--hover); outline: none; }
.model-check { display: grid; margin-inline-start: auto; visibility: hidden; }
.model-check .icon { width: 16px; height: 16px; }
.model-option[aria-selected="true"] { font-weight: 500; }
.model-option[aria-selected="true"] .model-check { visibility: visible; }
.model-list::-webkit-scrollbar { width: 8px; }
@keyframes menuIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } }

/* ------------------------------------------- the conversation and the dock */

/* the thread scrolls across the whole panel, so its scroll bar is at the panel's edge; the
   messages keep to a column in its middle */
.thread {
  position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 28px;
  padding: 20px max(20px, calc((100% - var(--column)) / 2)) 36px;
  scrollbar-gutter: stable both-edges;
}
.dock { position: relative; flex-shrink: 0; padding: 0 max(20px, calc((100% - var(--column)) / 2)) 10px; }
/* the last lines of the thread fade out under the composer */
.chat-main:not(.is-empty) .dock::before {
  content: ""; position: absolute; bottom: 100%; inset-inline: max(20px, calc((100% - var(--column)) / 2)); height: 28px;
  background: linear-gradient(to top, var(--surface), rgba(255, 255, 255, 0)); pointer-events: none;
}

/* the empty page: the greeting, the composer and the starter questions, together in the middle */
.chat-main.is-empty .thread:empty { display: none; }
.chat-main.is-empty .welcome { margin-top: auto; }
.chat-main.is-empty .dock { margin-bottom: auto; padding-bottom: 11vh; }
.chat-main.is-empty .disclaimer, .chat-main:not(.is-empty) .starters { display: none; }

.welcome { flex-shrink: 0; padding: 0 24px 26px; text-align: center; animation: fadeUp .5s ease both; }
.welcome h1 {
  display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0;
  font-size: clamp(26px, 2.6vw, 32px); font-weight: 600; line-height: 1.2; letter-spacing: -.02em;
}
.welcome h1 img { width: 34px; height: 34px; }
.welcome p { max-width: 560px; margin: 10px auto 0; font-size: 15px; color: var(--muted); text-wrap: balance; }
.welcome .welcome-langs { margin-top: 4px; font-size: 13px; }
.welcome .typer { --typer-align: center; font-weight: 500; color: var(--faint); }

.to-end {
  position: absolute; bottom: calc(100% + 10px); left: 50%; z-index: 5; translate: -50% 0;
  display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 50%;
  background: var(--surface); color: var(--text-2); box-shadow: 0 6px 16px -6px rgba(21, 21, 20, .2);
  cursor: pointer; animation: fadeIn .2s ease both; transition: color .15s, border-color .15s;
}
.to-end:hover { border-color: var(--border-strong); color: var(--text); }
.to-end .icon { width: 17px; height: 17px; }

/* ----------------------------------------------------------- composer */

.chat-page .composer {
  gap: 0; padding: 8px; border-color: #e2e1dd; border-radius: 22px;
  box-shadow: 0 1px 2px rgba(21, 21, 20, .04), 0 12px 32px -16px rgba(21, 21, 20, .16);
}
.chat-page .composer:focus-within { border-color: var(--border-strong); box-shadow: 0 1px 2px rgba(21, 21, 20, .04), 0 14px 34px -16px rgba(21, 21, 20, .22); }
.chat-page .composer textarea { padding: 8px 10px 6px; font-size: 15.5px; line-height: 1.6; color: var(--text); }
.chat-page .composer textarea::placeholder { color: var(--faint); }
.chat-main.is-empty .composer textarea { min-height: 66px; }
.chat-page .composer-bar { align-items: center; }
.chat-page .composer-tools { gap: 2px; }

/* the tools: quiet icons; one that is on is tinted and shows its name */
.chat-page .tool-btn { height: 34px; min-width: 34px; padding: 0 8px; border: 0; border-radius: 10px; color: var(--muted); }
.chat-page .tool-btn:hover { border: 0; background: var(--hover); color: var(--text); }
.chat-page .tool-btn[aria-pressed="true"], .chat-page .tool-btn.active { padding-inline: 8px 11px; background: var(--blue-50); color: var(--blue-700); }
.chat-page .tool-btn[aria-pressed="true"]:hover, .chat-page .tool-btn.active:hover { background: var(--blue-100); }
.chat-page .tool-btn.reuse-off { border: 1px dashed var(--border-strong); }
.chat-page .composer-tools.compact .tool-btn { padding-inline: 8px; }
@media (hover: hover) {
  .chat-page .tool-btn[data-tip]::after { padding: 4px 8px; border-radius: 7px; }
}
.chat-page .tool-pop { border: 0; border-radius: 14px; box-shadow: var(--shadow-pop); }

.chat-page .send-btn { width: 36px; height: 36px; }
.chat-page .send-btn .icon { stroke-width: 2.3; }
.chat-page .send-btn.idle, .chat-page .send-btn.idle:hover { opacity: 1; background: #e4e3df; color: #fff; }

.chat-page .disclaimer { margin: 8px 0 0; font-size: 12px; color: var(--faint); }

/* the starter questions under the composer */
.starters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; animation: fadeUp .5s .08s ease both; }
.chat-page .starters .suggestion {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); box-shadow: none; transition: border-color .15s, background .15s;
}
.chat-page .starters .suggestion:hover { border-color: var(--border-strong); background: var(--surface-2); box-shadow: none; }
.chat-page .starters .s-icon { width: 32px; height: 32px; border-radius: 9px; background: var(--surface-3); color: var(--text-2); }
.chat-page .starters .s-icon svg { width: 16px; height: 16px; }
.chat-page .starters .suggestion > span:last-child { min-width: 0; }
.chat-page .starters strong { font-size: 13.5px; font-weight: 600; }
.chat-page .starters small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--muted); }

/* ----------------------------------------------------------- messages */

.chat-page .msg-row { gap: 14px; }
.chat-page .bubble-user {
  max-width: min(80%, 600px); padding: 10px 16px; border-radius: 20px;
  background: var(--surface-3); color: var(--text); font-size: 15.5px; line-height: 1.6;
}
/* a question picked in the side bar lights up for a moment */
.chat-page .msg-row.flash .bubble-user { animation: questionFlash 1.4s ease; }
@keyframes questionFlash { 25% { background: var(--blue-100); } }
.chat-page .avatar { width: 28px; height: 28px; border-color: var(--border); background: var(--surface); }
.chat-page .avatar img { height: 17px; }
/* the answer is text on the page, not a card */
.chat-page .bot-card { padding: 0; border: 0; border-radius: 0; background: none; }
.chat-page .bot-card.error { padding: 12px 16px; border: 1px solid #f3c7c7; border-radius: 14px; background: var(--error-50); }
.chat-page .bot-card.notice { padding: 12px 16px; border: 1px solid #f5e1a8; border-radius: 14px; background: var(--amber-50); }
.chat-page .bot-card > .error-text { padding: 10px 14px; border: 1px solid #f3c7c7; border-radius: 12px; background: var(--error-50); font-size: 14.5px; }
.chat-page .thinking { min-height: 28px; align-content: center; }

/* ------------------------------------------------------------- the answer's text */
/* Set as calm reading text: a comfortable Hebrew line, quiet section headings, small muted list
   markers, labels in plain bold, and citations as small chips kept apart from each other. */
.chat-page .answer { padding-top: 1px; font-size: 16px; line-height: 1.75; color: #1d1d1b; overflow-wrap: break-word; }
.chat-page .answer p { margin: 0 0 .65em; text-wrap: pretty; }
.chat-page .answer > :first-child { margin-top: 0; }
.chat-page .answer > :last-child { margin-bottom: 0; }
.chat-page .answer b { font-weight: 600; color: var(--text); }
.chat-page .answer em { font-style: normal; color: var(--text-2); } /* Hebrew has no true italic */
.chat-page .answer a { color: var(--text); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.chat-page .answer a:hover { text-decoration-color: currentColor; }

/* section headings ("###", or a line that is all bold) and the subheadings under "###" ones */
.chat-page .answer .answer-h,
.chat-page .answer .answer-sub { text-wrap: balance; }
.chat-page .answer .answer-h { margin: 1.5em 0 .45em; font-size: 17px; line-height: 1.45; font-weight: 600; color: var(--text); letter-spacing: -.005em; }
.chat-page .answer .answer-sub { margin: 1.2em 0 .35em; font-size: 15.5px; line-height: 1.5; font-weight: 600; color: var(--text-2); }
.chat-page .answer .answer-h + .answer-sub { margin-top: .6em; }
.chat-page .answer .h-num { margin-inline-end: .45em; font-weight: 500; color: var(--faint); font-variant-numeric: tabular-nums; }

/* lists: all numbered, up to three levels, the model's numbers kept (<ol start>, <li value>) */
.chat-page .answer ol { margin: .3em 0 .9em; padding-inline-start: 1.6em; }
.chat-page .answer li { margin: .3em 0; padding-inline-start: .2em; text-wrap: pretty; }
.chat-page .answer li > ol { margin: .3em 0 .5em; padding-inline-start: 2.3em; }
.chat-page .answer li li > ol { padding-inline-start: 3em; }
.chat-page .answer li > .li-p { margin: .3em 0; }
/* numbers: muted, in even widths; a list inside an item counts under it (1.1, 1.2, 1.2.1) */
.chat-page .answer ol > li::marker { color: var(--muted); font-size: .94em; font-weight: 500; font-variant-numeric: tabular-nums; }
.chat-page .answer li > ol > li::marker { content: counters(list-item, ".") ". "; }

/* a "---" the model put between two parts of the answer */
.chat-page .answer hr { height: 1px; margin: 1.3em 0; border: 0; background: var(--border); }

/* citations: a cluster per place, each source a small chip of its own, kept with the word before it */
.chat-page .answer .cite-tail { white-space: nowrap; }
.chat-page .answer .cites { display: inline-flex; gap: 3px; margin-inline-start: .3em; vertical-align: .1em; white-space: nowrap; }
.chat-page .answer .cite {
  min-width: 17px; height: 17px; margin: 0; padding: 0 4px;
  border: 1px solid var(--border); border-radius: 5px; background: var(--surface-2);
  color: var(--muted); font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1;
}
.chat-page .answer .cite:hover,
.chat-page .answer .cite:focus-visible { border-color: var(--primary); background: var(--primary); color: #fff; outline: none; }
.chat-page .answer .answer-h .cites,
.chat-page .answer .answer-sub .cites { vertical-align: .15em; }

/* the question an answer ends with when a detail would make it exact ("כדי לדייק: …") */
.chat-page .answer .answer-ask {
  display: flex; align-items: flex-start; gap: 10px; margin: 1.15em 0 0; padding: 11px 14px;
  border-radius: 12px; background: var(--blue-50); line-height: 1.65; color: var(--text);
}
.chat-page .answer .answer-ask .icon { width: 17px; height: 17px; margin-top: .2em; color: var(--blue); }
/* what a deep research did not find ("מה לא מצאתי: …") */
.chat-page .answer .answer-note { margin-top: 1em; padding: 9px 13px; border-radius: 10px; background: var(--surface-2); font-size: 14.5px; color: var(--text-2); }

/* tables */
.chat-page .answer .table-wrap { margin: .4em 0 .9em; border-radius: 12px; }
.chat-page .answer table { font-size: 14px; }
.chat-page .answer th { background: var(--surface-2); font-weight: 600; color: var(--text); }

/* while the answer is written: a soft dot where the text ends */
.chat-page .answer .stream-caret { display: none; }
.chat-page .answer.streaming .stream-caret,
.chat-page .answer.streaming:empty::after {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-inline-start: 5px; border-radius: 50%;
  vertical-align: 1px; background: var(--text); animation: streamDot 1.1s ease-in-out infinite;
}
@keyframes streamDot { 50% { opacity: .25; transform: scale(.8); } }

/* the sources, as cards: the number, the document, and the section in it */
.chat-page .sources { margin-top: 18px; padding-top: 0; border-top: 0; }
.chat-page .sources-label { margin-bottom: 8px; font-size: 12.5px; color: var(--muted); }
.chat-page .sources-label .icon { width: 14px; height: 14px; }
.chat-page .source-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.source-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 8px 10px; align-items: center;
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); font: inherit; font-size: 13.5px; color: var(--text); text-align: start; cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.source-card:hover { border-color: var(--border-strong); background: var(--surface); box-shadow: 0 6px 16px -8px rgba(21, 21, 20, .16); }
.source-card .num {
  grid-row: 1 / span 2; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px;
  background: var(--surface-3); color: var(--text-2); font-size: 11.5px; font-weight: 600;
}
.source-card .name, .source-card .page, .source-card .date { grid-column: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.4; }
.source-card .name { font-size: 13px; font-weight: 500; }
.source-card .page { font-size: 12px; color: var(--muted); }
/* the procedure's date, as a third line ("בתוקף מ־13.8.2025") */
.source-card .date { font-size: 11.5px; color: var(--faint); }
.source-card.dated { row-gap: 2px; }
.source-card.dated .num, .source-card.dated .file-type, .source-card.dated > span:last-child { grid-row: 1 / span 3; }
.source-card > span:last-child { grid-column: 4; grid-row: 1 / span 2; display: grid; color: var(--faint); transition: color .15s; }
.source-card .icon { width: 16px; height: 16px; }
.source-card:hover > span:last-child { color: #b7791f; }
/* the source's file, as an icon: a page with a folded corner and its kind on a band, in the colors
   these files usually have (PDF red, Word blue) */
.file-type { grid-column: 3; grid-row: 1 / span 2; display: grid; width: 26px; height: 32px; }
.file-type svg { width: 100%; height: 100%; overflow: visible; }
.file-type .ft-page { fill: #fff; stroke: #cfcec8; stroke-width: 1.2; }
.file-type .ft-fold { fill: #ecebe7; stroke: #cfcec8; stroke-width: 1.2; stroke-linejoin: round; }
.file-type .ft-band { fill: #78776f; }
.file-type text { fill: #fff; font: 700 7.6px var(--font); letter-spacing: .02em; }
.file-type text.ft-long { font-size: 6.6px; }
.file-type.pdf .ft-band { fill: #d92d20; }
.file-type.docx .ft-band, .file-type.doc .ft-band { fill: #2b579a; }

/* under the answer: copy, then the model and the time */
.chat-page .answer-meta { justify-content: flex-start; gap: 4px; margin-top: 12px; font-size: 12.5px; color: var(--faint); }
.chat-page .answer-meta .copy-btn { order: -1; height: 28px; margin-inline-end: 4px; padding: 0 8px; font-size: 12.5px; color: var(--muted); }
.chat-page .answer-meta .copy-btn:hover { background: var(--hover); color: var(--text); }
.meta-model { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); }
.meta-model .icon { width: 13px; height: 13px; }
.chat-page .answer-meta .meta-model + span::before { content: "·"; margin-inline-end: 4px; }
.chat-page .answer-meta .meta-note { order: 1; margin-inline-start: 6px; }

.chat-page .choice { border-radius: 12px; background: var(--surface); }
.chat-page .reused { border-radius: 12px; }
.chat-page .research-live, .chat-page .thought { border-radius: 14px; }
.chat-page .debug { margin-top: 18px; border-radius: 14px; background: var(--surface-2); }

/* ------------------------------------------------------- narrow screens */

@media (max-width: 900px) {
  .chat-app { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 80; width: min(300px, 86vw);
    background: var(--canvas); box-shadow: var(--shadow-lg);
    transform: translateX(105%); visibility: hidden; transition: transform .28s var(--ease), visibility 0s .28s;
  }
  .sidebar > * { width: auto; }
  .chat-app.sidebar-open .sidebar { transform: none; visibility: visible; transition: transform .28s var(--ease); }
  .sidebar-scrim { position: fixed; inset: 0; z-index: 79; background: rgba(21, 21, 20, .24); animation: fadeIn .2s ease both; }
  .chat-main { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
}
@media (max-width: 560px) {
  .chat-top { padding: 0 6px; }
  .thread { gap: 22px; padding-inline: 14px; }
  .dock { padding-inline: 10px; }
  .chat-main:not(.is-empty) .dock::before { inset-inline: 10px; }
  .chat-main.is-empty .dock { padding-bottom: 6vh; }
  .welcome { padding-inline: 16px; }
  .welcome h1 { gap: 10px; font-size: 24px; }
  .welcome h1 img { width: 28px; height: 28px; }
  .starters .suggestion small { display: none; }
  .chat-page .msg-row.bot .avatar { display: none; }
  .chat-page .bubble-user { max-width: 88%; }
  .chat-page .source-chips { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================ drawer */

.drawer-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(17, 17, 17, .22); opacity: 0; transition: opacity .25s; }
.drawer-backdrop.open { opacity: 1; }
.drawer {
  position: fixed; top: 0; bottom: 0; inset-inline-end: 0; z-index: 100;
  width: min(660px, 94vw); display: flex; flex-direction: column;
  background: var(--card); box-shadow: var(--shadow-lg);
  transform: translateX(-104%); transition: transform .32s cubic-bezier(.2, .8, .2, 1);
}
.drawer.open { transform: none; }
.drawer.wide { width: min(1100px, 96vw); }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 26px 16px; border-bottom: 1px solid var(--border); }
.drawer-title { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.drawer-subtitle { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.drawer-body { flex: 1; overflow-y: auto; padding: 22px 26px; background: var(--panel); }
.drawer-foot { padding: 16px 26px; border-top: 1px solid var(--border); background: var(--card); }
.drawer-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.viewer-loading { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); padding: 40px; }
.page-view { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-md); }
.page-view img { display: block; width: 100%; height: auto; }
.hl {
  position: absolute; border-radius: 3px;
  background: rgba(250, 204, 21, .42); mix-blend-mode: multiply;
  box-shadow: 0 0 0 1.5px rgba(202, 138, 4, .5);
  transform-origin: right center; animation: hlIn .55s ease both;
}
.note { display: flex; gap: 8px; align-items: flex-start; padding: 12px 14px; margin-bottom: 14px; border-radius: 14px; background: var(--amber-50); border: 1px solid #f5e1a8; color: #92400e; font-size: 13.5px; }
.chunk-quote { margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); border-inline-start: 3px solid #eab308; }
.chunk-quote .label { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; color: var(--muted); margin-bottom: 6px; }
.chunk-quote p { margin: 0; white-space: pre-wrap; font-size: 14px; line-height: 1.7; }
.note.info { background: var(--blue-50); border-color: var(--blue-100); color: var(--blue-700); }

/* ------------------------------------------- forms (common.js: formCard, openFormViewer) */
/* A form from the procedures: the top of its page (a click opens it large), its name, where it is
   from, and its actions; a link to a form has an icon in place of the page. Under a chat answer
   and in the voice transcript. */
.forms { margin-top: 18px; }
.form-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.form-card {
  display: flex; align-items: flex-start; gap: 14px; padding: 12px; text-align: start;
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
  animation: fadeUp .35s ease both;
}
.form-thumb {
  flex: none; display: block; width: 84px; height: 108px; padding: 0; overflow: hidden;
  border: 1px solid var(--border); border-radius: 8px; background: #fff; box-shadow: var(--shadow-xs);
  cursor: zoom-in; transition: border-color .15s, box-shadow .15s;
}
.form-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
button.form-thumb:hover { border-color: var(--border-strong); box-shadow: 0 6px 16px -8px rgba(21, 21, 20, .22); }
.form-thumb.icon-only { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--surface-3); color: var(--text-2); box-shadow: none; cursor: default; }
.form-thumb.icon-only .icon { width: 20px; height: 20px; }
.form-body { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.form-kind { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: var(--muted); }
.form-title { font-size: 14px; font-weight: 600; line-height: 1.45; }
.form-where { font-size: 12px; line-height: 1.5; color: var(--muted); }
.form-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.form-actions .btn { max-width: 100%; }
.form-actions .btn .icon { width: 15px; height: 15px; }
.form-viewer .page-view + .page-view, .form-viewer .page-view + .form-page-label { margin-top: 14px; }
.form-page-label { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.drawer-actions .btn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.doc-context { max-height: 58vh; overflow: auto; padding: 20px 22px; background: #fff; border: 1px solid var(--border); border-radius: 14px; }
.doc-context p { white-space: pre-wrap; margin: 0 0 12px; line-height: 1.75; }
.ctx-dim { color: var(--faint); }
.ctx-mark { padding: 6px 10px; border-radius: 6px; background: rgba(250, 204, 21, .28); border-inline-start: 3px solid #eab308; }

/* =========================================================== landing */

/* Hero band background: an interactive dot grid (drawn by landing.js) that
   fades out toward the edges, plus a very soft glow in the logo green. */
.hero-band { position: relative; overflow: hidden; padding: 140px 0 96px; }
.hero-band::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(640px 340px at 82% 22%, rgba(10, 132, 6, .07), transparent 70%); }
.hero-dots {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 100% 120% at 55% 0%, #000 30%, rgba(0, 0, 0, .6) 60%, transparent 95%);
  mask-image: radial-gradient(ellipse 100% 120% at 55% 0%, #000 30%, rgba(0, 0, 0, .6) 60%, transparent 95%);
}
.hero-band .container { position: relative; z-index: 1; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }

.site-nav {
  position: fixed; top: 0; inset-inline: 0; z-index: 50;
  background: rgba(247, 247, 245, .82); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(231, 231, 228, .7);
}
.nav-inner { max-width: 1280px; height: 72px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; }
.nav-start { display: flex; align-items: center; gap: 48px; }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-link { font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none; transition: color .15s; }
.nav-link:hover { color: var(--text); }

.hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; align-items: center; }
.hero-main { grid-column: span 6; }
.hero-visual { grid-column: span 6; }
.hero h1 { margin: 0; font-size: clamp(38px, 4.4vw, 58px); font-weight: 600; line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }
.hero h1 .soft { color: var(--faint); }
/* above the headline, small and quiet: the system's name, then a fine black line */
.hero h1 .hero-tech {
  display: block; text-align: right; font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--text-2);
}
.hero h1 .hero-rule {
  position: relative; display: block; width: 84px; height: 2px; margin: 11px 0 18px; border-radius: 99px;
  background: linear-gradient(90deg, transparent, var(--text) 20%, var(--text) 80%, transparent);
}
.hero h1 .hero-he { display: block; }
/* "ask in any language", typed in turn in four languages; smaller, so the longest (Russian) fits */
.hero h1 .typer { margin-top: .2em; font-size: .7em; letter-spacing: -.02em; color: var(--faint); }
@media (max-width: 420px) { .hero h1 { font-size: 34px; } } /* each line of the headline on one row */
.hero-lead { margin: 22px 0 0; max-width: 560px; font-size: 18px; line-height: 1.65; color: var(--muted); }

/* hero demo (landing.js: initHeroDemo): a real question, its answer with a source, and the
   source page with the passage highlighted. Class toggles and CSS transitions only. */
.demo { position: relative; padding-bottom: 56px; pointer-events: none; user-select: none; }
.demo-chat {
  position: relative; margin-inline-end: 9%; border-radius: 24px; overflow: hidden;
  background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-md);
}
.demo-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 14px; }
.demo-bar img { height: 26px; width: auto; }
.demo-tag { margin-inline-start: auto; padding: 3px 10px; border-radius: 99px; background: var(--panel); border: 1px solid var(--border); font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.demo-thread { display: flex; flex-direction: column; gap: 12px; height: 344px; padding: 18px 16px 0; overflow: hidden; }
.demo-q {
  align-self: flex-end; max-width: 82%; padding: 9px 15px; border-radius: 20px; border-end-end-radius: 6px;
  background: var(--primary); color: #fff; font-size: 14.5px; line-height: 1.5;
  opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s;
}
.demo-bot { display: flex; gap: 10px; align-items: flex-start; opacity: 0; transform: translateY(8px); transition: opacity .3s .12s, transform .3s .12s; }
.demo-bot .avatar { width: 30px; height: 30px; }
.demo-bot .avatar img { height: 18px; }
.demo-card { flex: 1; min-width: 0; padding: 11px 14px; border-radius: 18px; border-start-start-radius: 6px; background: var(--surface); border: 1px solid var(--border); }
.demo.asked .demo-q, .demo.asked .demo-bot { opacity: 1; transform: none; }
/* the brief "searching" moment, with the question shown as a vector */
.demo-search { display: none; align-items: center; gap: 10px; min-height: 23px; font-size: 13.5px; font-weight: 500; }
.demo.searching .demo-search { display: flex; }
.demo-vec { display: grid; grid-template-columns: repeat(24, 4px); gap: 1.5px; flex-shrink: 0; direction: ltr; }
.demo-vec i { height: 14px; border-radius: 1.5px; opacity: 0; transition: opacity .2s var(--d, 0ms); }
.demo.searching .demo-vec i { opacity: 1; }
.demo-a { display: none; font-size: 14.5px; line-height: 1.65; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 5; }
.demo.answered .demo-a { display: -webkit-box; }
.demo-src { display: none; margin-top: 10px; cursor: default; }
.demo-src .name { max-width: 220px; }
.demo.sourced .demo-src { display: inline-flex; animation: fadeUp .3s ease both; }
.demo-src.pressed { border-color: var(--text); background: var(--surface); }
.demo-more { margin-inline-start: 6px; font-size: 12px; color: var(--muted); }
/* the chat input at the bottom: the question, and under it the tools and the send button */
.demo-input {
  display: grid; gap: 4px; margin: 10px 14px 14px; padding: 8px; border-radius: 20px;
  background: var(--surface); border: 1px solid var(--border-strong); transition: border-color .2s, box-shadow .2s;
}
.demo.typing .demo-input { border-color: var(--text); box-shadow: 0 0 0 4px rgba(17, 17, 17, .06); }
.demo-field { position: relative; display: flex; align-items: center; height: 26px; padding-inline: 6px; }
.demo-typed { flex: 1; min-width: 0; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo:not(.typing) .caret { display: none; }
.demo-placeholder { position: absolute; inset-inline-start: 6px; font-size: 14.5px; color: var(--faint); }
.demo.typing .demo-placeholder { display: none; }
.demo-tools { display: flex; align-items: center; gap: 5px; }
.demo-tool {
  display: inline-flex; align-items: center; gap: 5px; height: 28px; min-width: 28px; padding: 0 6px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--muted); font-size: 12px; white-space: nowrap;
  transition: background-color .2s, border-color .2s, color .2s, transform .12s;
}
.demo-tool .icon { width: 15px; height: 15px; flex-shrink: 0; }
.demo-tool b { display: none; font-weight: 500; }
.demo-tool.on { padding-inline: 7px 10px; background: var(--blue-50); border-color: var(--blue-100); color: var(--blue-700); }
.demo-tool.on .icon { color: var(--blue); }
.demo-tool.on b { display: inline; }
.demo-tool.pressed { transform: scale(.92); }
.demo-send {
  width: 32px; height: 32px; flex-shrink: 0; margin-inline-start: auto; border-radius: 50%; display: grid; place-items: center;
  background: var(--primary); color: #fff; opacity: .3; transition: opacity .2s, transform .12s;
}
.demo.typing .demo-send { opacity: 1; }
.demo-send.press { transform: scale(.86); }
.demo-send .icon { width: 16px; height: 16px; stroke-width: 2.4; }
/* the model's short thinking (the chat's thought card, smaller), then a table answer */
.demo .thought { max-width: none; margin-bottom: 8px; box-shadow: none; }
.demo .thought-head { gap: 8px; padding: 6px 9px; font-size: 12px; }
.demo .thought:not(.live):not(.open) .thought-head { padding-block: 0 2px; }
.demo .thought-icon { width: 20px; height: 20px; border-radius: 6px; }
.demo .thought-icon .icon { width: 13px; height: 13px; }
.demo .thought.live .thought-body { height: 50px; padding: 6px 10px; font-size: 11.5px; line-height: 1.55; }
.demo.answered .demo-a.table { display: block; }
/* deep research: the chat's research card (common.js: researchShell), smaller */
.demo.planning .demo-search { display: none; }
.demo .research-live { max-width: none; margin-bottom: 8px; box-shadow: none; }
.demo .rl-head { gap: 8px; padding: 7px 10px; font-size: 12px; }
.demo .research-live:not(.live) .rl-head { padding: 5px 10px; font-size: 12px; }
.demo .rl-icon { width: 22px; height: 22px; border-radius: 6px; }
.demo .rl-icon .icon { width: 13px; height: 13px; }
.demo .rl-phase { padding-inline-start: 8px; }
.demo .rl-body { gap: 8px; padding: 0 10px 10px; }
.demo .rl-stages { padding-top: 8px; gap: 6px; }
.demo .rl-stage { font-size: 11px; }
.demo .rl-stage b { width: 14px; height: 14px; }
.demo .rl-aspects { gap: 4px; }
.demo .rl-aspects li { gap: 8px; font-size: 11.5px; line-height: 1.4; }
.demo .rl-aspects .asp-num { font-size: 10px; }
.demo .rl-tiles i { width: 7px; height: 10px; }
.demo .rl-count { font-size: 11.5px; }
/* interactive chat: questions to pick from (the chat's choices, smaller) */
.demo .choice-list { gap: 6px; margin-top: 10px; }
.demo .choice { gap: 9px; padding: 6px 10px; border-radius: 12px; font-size: 13px; animation: fadeUp .25s ease both; }
.demo .choice-letter { width: 21px; height: 21px; font-size: 11.5px; }
/* the important parts, plain until the highlighting tool marks them (as in the chat) */
.demo strong.key {
  font-weight: inherit; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(rgba(250, 204, 21, .45), rgba(250, 204, 21, .45)) right / 0% 100% no-repeat;
  transition: background-size .45s ease calc(var(--i, 0) * 110ms);
}
.demo.highlight strong.key { font-weight: 600; background-size: 100% 100%; }
.demo-table { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.demo-table table { width: 100%; border-collapse: collapse; font-size: 12px; line-height: 1.45; }
.demo-table th, .demo-table td { padding: 4px 8px; text-align: start; vertical-align: top; border-bottom: 1px solid var(--border); }
.demo-table th + th, .demo-table td + td { border-inline-start: 1px solid var(--border); }
.demo-table th { background: var(--panel); font-weight: 600; }
.demo-table td:first-child { font-weight: 500; white-space: nowrap; }
.demo-table tbody tr { animation: fadeUp .25s ease both; }
.demo-table tbody tr:last-child td { border-bottom: 0; }
/* the source page that opens from the citation, with the passage highlighted */
.demo-pdf {
  position: absolute; inset-inline-end: 0; bottom: 0; z-index: 2; width: min(340px, 62%); padding: 12px;
  border-radius: 18px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(14px) scale(.97); transform-origin: bottom left; transition: opacity .35s, transform .35s;
}
.demo.opened .demo-pdf { opacity: 1; transform: none; }
.pdf-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12.5px; }
.pdf-badge { flex-shrink: 0; padding: 2px 6px; border-radius: 5px; background: #fdecea; color: #b42318; font: 700 10px var(--mono); letter-spacing: .04em; }
.pdf-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.pdf-page { flex-shrink: 0; margin-inline-start: auto; color: var(--muted); }
.pdf-sheet { display: grid; gap: 7px; padding: 14px 14px 16px; border-radius: 10px; background: #fff; border: 1px solid var(--border); }
.pdf-sheet i { display: block; height: 7px; border-radius: 3px; background: #e9e8e4; }
.pdf-sheet i.h { width: 45%; height: 9px; margin-bottom: 3px; background: #d6d5d0; }
.pdf-sheet i.s { width: 62%; }
.pdf-mark { margin: 2px 0; font-size: 12.5px; line-height: 1.75; }
.pdf-mark mark {
  padding: 1px 2px; border-radius: 3px; color: inherit;
  background: linear-gradient(rgba(250, 204, 21, .55), rgba(250, 204, 21, .55)) right / 0% 100% no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .9s ease .3s;
}
.demo.opened .pdf-mark mark { background-size: 100% 100%; }
.demo.leaving .demo-q, .demo.leaving .demo-bot, .demo.leaving .demo-pdf { opacity: 0; transition-delay: 0s; }
/* simulated mouse pointer */
.demo-cursor {
  position: absolute; top: 0; left: 0; z-index: 4; width: 32px; height: 32px;
  opacity: 0; transition: transform .75s cubic-bezier(.45, .05, .25, 1), opacity .3s;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .3));
}
.demo-cursor.show { opacity: 1; }
.demo-cursor svg { display: block; width: 100%; height: 100%; transform-origin: 5px 4px; transition: transform .12s; }
.demo-cursor.press svg { transform: scale(.8); }
.demo-cursor::after {
  content: ""; position: absolute; left: -10px; top: -10px; width: 30px; height: 30px;
  border-radius: 50%; border: 2px solid var(--primary); opacity: 0;
}
.demo-cursor.press::after { animation: ripple .55s ease-out; }
@keyframes ripple { from { transform: scale(.3); opacity: .7; } to { transform: scale(1.7); opacity: 0; } }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.hero-cta .btn.primary .icon { transition: transform .2s; }
.hero-cta .btn.primary:hover .icon { transform: translateX(-3px); }

.value-props { list-style: none; margin: 0 0 56px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border); }
.vp { padding: 28px 28px 4px; border-inline-start: 1px solid var(--border); animation: fadeUp .5s ease both; }
.vp:first-child { border-inline-start: 0; padding-inline-start: 0; }
.vp:nth-child(2) { animation-delay: .08s; }
.vp:nth-child(3) { animation-delay: .16s; }
.vp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.vp-head .icon { width: 22px; height: 22px; }
.vp-title { font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.vp-tag { margin-inline-start: auto; font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--muted); padding: 3px 10px; border-radius: 99px; background: var(--panel); border: 1px solid var(--border); }
.vp p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--muted); }

/* soft blurred color orbs, used behind the showcase cards */
.orbs { position: absolute; inset: 0; pointer-events: none; display: flex; align-items: center; justify-content: center; opacity: .7; }
.orbs span { position: absolute; border-radius: 50%; filter: blur(64px); }
.orbs span:nth-child(1) { width: 300px; height: 300px; background: linear-gradient(45deg, #fbd5d5, #fde7d3); transform: translate(180px, 40px); }
.orbs span:nth-child(2) { width: 400px; height: 400px; background: linear-gradient(45deg, #e2e5fb, #ece0fa); }
.orbs span:nth-child(3) { width: 260px; height: 260px; background: linear-gradient(45deg, #d6f2e6, #d5f1ef); transform: translate(-170px, 110px); }
.orbs span:nth-child(4) { width: 340px; height: 340px; background: linear-gradient(45deg, #dcecfb, #d6e2fa); transform: translate(-330px, -90px); }

/* blinking text cursor (hero demo input) */
.caret { display: inline-block; width: 2px; height: 1.05em; background: var(--text); vertical-align: -3px; margin-inline-start: 2px; animation: blink 1s steps(1) infinite; }

/* example questions: plain text, no animation */
.ask-examples { margin-bottom: 120px; }
.ask-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; align-items: start; }
.ask-intro { grid-column: span 5; }
.ask-intro h2 { margin: 0 0 12px; font-size: clamp(30px, 3.4vw, 44px); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.ask-intro p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--muted); }
.ask-list { grid-column: 7 / span 6; display: grid; border-top: 1px solid var(--border); }
.ask-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 4px; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; font-size: 17px; transition: color .15s, padding .15s; }
.ask-list a::after { content: "←"; color: var(--faint); transition: color .15s, transform .15s; }
.ask-list a:hover { color: var(--text); padding-inline-start: 10px; }
.ask-list a:hover::after { color: var(--text); transform: translateX(-3px); }

/* live numbers strip */
.numbers { text-align: center; margin-bottom: 140px; }
.numbers .label-caps { margin-bottom: 40px; }
.numbers-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.numbers-grid div { padding: 32px 16px; border-inline-start: 1px solid var(--border); }
.numbers-grid div:first-child { border-inline-start: 0; }
.numbers-grid b { display: block; font-size: 48px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.numbers-grid span { font-size: 14px; color: var(--muted); }
/* a number with a footnote: an asterisk next to it (outside the text, which counts up) and a note below */
.numbers-grid b.noted::after { content: "*"; margin-inline-start: .06em; font-size: .5em; vertical-align: .7em; color: var(--brand); }
.numbers-note { display: block; margin-top: 6px; font-size: 12.5px; color: var(--faint); }
.numbers-note::before { content: "* "; color: var(--brand); font-weight: 600; }

/* modules */
.module { margin-bottom: 140px; }
.section-label { display: flex; align-items: center; gap: 16px; margin-bottom: 32px; }
.section-label .label-caps { padding: 5px 12px; border-radius: 99px; background: #e9e8e4; color: var(--text); letter-spacing: .08em; }
.section-label .rule { flex: 1; height: 1px; background: var(--border); }
.module-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; margin-bottom: 44px; }
.module-head h2 { grid-column: span 6; margin: 0; font-size: clamp(34px, 4vw, 52px); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.module-head p { grid-column: 8 / span 5; align-self: end; margin: 0; font-size: 18px; line-height: 1.65; color: var(--muted); }

.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.step-card {
  min-height: 270px; padding: 24px; border-radius: 22px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--card); border: 1px solid var(--border); transition: box-shadow .2s, border-color .2s;
}
.step-card:hover { box-shadow: var(--shadow-sm); border-color: var(--border-strong); }
.step-top { display: flex; align-items: center; justify-content: space-between; }
.step-icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; }
.step-icon .icon { width: 21px; height: 21px; }
.step-n { font-family: var(--mono); font-size: 13px; color: var(--faint); }
.step-card h3 { margin: 0 0 8px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.step-card p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--muted); }

.showcase-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-bottom: 24px; }
.showcase {
  position: relative; overflow: hidden; height: 460px; padding: 28px;
  display: flex; flex-direction: column; border-radius: 28px;
  background: var(--card); border: 1px solid var(--border);
}
.showcase .orbs { opacity: .45; transition: opacity .5s; }
.showcase:hover .orbs { opacity: .7; }
.showcase > *:not(.orbs) { position: relative; z-index: 1; }
.showcase-tag { align-self: flex-start; padding: 8px 16px; border-radius: 999px; background: rgba(252, 252, 251, .85); border: 1px solid var(--border); font-size: 14px; font-weight: 500; }
.showcase-foot { margin-top: auto; padding: 22px; border-radius: 20px; background: rgba(255, 255, 255, .9); backdrop-filter: blur(10px); border: 1px solid var(--border); }
.showcase-foot h4 { margin: 0 0 6px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.showcase-foot p { margin: 0; font-size: 14.5px; color: var(--muted); }
.mock-chat { display: grid; gap: 12px; margin-bottom: 14px; }
.mock-row { display: flex; align-items: flex-end; gap: 10px; }
.mock-row.user { flex-direction: row-reverse; }
.mock-row .who { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: var(--primary); color: #fff; }
.mock-row.user .who { background: #e5e4df; color: var(--muted); }
.mock-row .who .icon { width: 15px; height: 15px; }
.mock-row.bot .who { background: var(--surface); border: 1px solid var(--border); }
.mock-row .who img { height: 21px; width: auto; }
.mock-bubble { padding: 10px 16px; border-radius: 18px; font-size: 14px; max-width: 80%; }
.mock-row.bot .mock-bubble { background: #ecebe7; border-end-start-radius: 4px; }
.mock-row.user .mock-bubble { background: var(--primary); color: #fff; border-end-end-radius: 4px; }
.mock-source { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 3px 10px; border-radius: 99px; background: #fff; border: 1px solid var(--border); font-size: 12px; color: var(--text-2); }
.mock-source mark { background: rgba(250, 204, 21, .45); border-radius: 3px; padding: 0 3px; }
.mock-bars { flex: 1; display: flex; align-items: flex-end; gap: 12px; padding: 30px 12px 34px; }
.mock-bars i { flex: 1; border-radius: 6px 6px 2px 2px; background: #e5e4df; position: relative; }
.mock-bars i.top { background: rgba(17, 17, 17, .18); }
.mock-bars i.top::after { content: ""; position: absolute; top: -11px; left: 50%; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: var(--primary); border: 3px solid var(--card); }
.mock-bars b { position: absolute; bottom: -22px; left: 0; right: 0; text-align: center; font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--muted); }

.mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mini-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 18px; background: var(--panel); border: 1px solid var(--border); transition: background .15s; }
.mini-card:hover { background: #ebeae6; }
.mini-card .icon { width: 22px; height: 22px; }
.mini-card strong { font-size: 15px; font-weight: 600; }
.mini-card span { font-size: 13.5px; color: var(--muted); line-height: 1.55; }

.closing { text-align: center; margin-bottom: 140px; }
.closing h2 { margin: 0 0 14px; font-size: clamp(34px, 4.4vw, 56px); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.closing p { margin: 0 0 30px; font-size: 18px; color: var(--muted); }

.site-footer { background: var(--panel); border-top: 1px solid var(--border); }
.footer-inner { max-width: 1280px; margin: 0 auto; padding: 72px 32px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 40px; }
.footer-brand { grid-column: span 3; display: flex; flex-direction: column; gap: 14px; }
.footer-logo { display: block; align-self: flex-start; height: 52px; width: auto; }
.footer-brand strong { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.footer-brand p { margin: 0; font-size: 14px; color: var(--muted); max-width: 320px; line-height: 1.6; }
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col .label-caps { color: var(--text); margin-bottom: 6px; }
.footer-col a, .footer-col span:not(.label-caps) { font-size: 14px; color: var(--muted); text-decoration: none; }
.footer-col a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }

.module-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-weight: 500; color: var(--text); }
.module-more .icon { width: 16px; height: 16px; transition: transform .2s; }
.module-more:hover .icon { transform: translateX(-4px); }

/* ===================================================== how it works */

.how-page main { padding-top: 120px; }
.nav-link.active { color: var(--text); }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

.how-hero { margin-bottom: 90px; }
.how-hero h1 { margin: 0 0 18px; font-size: clamp(38px, 5vw, 66px); font-weight: 600; line-height: 1.08; letter-spacing: -.03em; }
.how-hero h1 .soft { color: var(--faint); }
.how-lead { max-width: 720px; margin: 0 0 40px; font-size: 19px; line-height: 1.7; color: var(--muted); }

/* hero: the text next to a "console" that replays the retrieval math (how.js: initConsole) */
.how-hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; margin-bottom: 56px; }
.how-hero-grid h1 { font-size: clamp(36px, 4.2vw, 58px); }
.how-hero-grid .how-lead { margin-bottom: 0; }
.console { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px; border-radius: 24px; background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-md); }
.console-head { display: flex; align-items: center; gap: 10px; padding: 2px 4px; direction: ltr; }
.console-dots { display: flex; gap: 6px; }
.console-dots i { width: 9px; height: 9px; border-radius: 50%; background: #dddcd7; }
.console-title { font: 500 12px var(--mono); color: var(--muted); }
.console-tag { margin-left: auto; padding: 3px 10px; border-radius: 99px; background: var(--panel); border: 1px solid var(--border); font-size: 11.5px; color: var(--muted); direction: rtl; }
.console-block { padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.console-label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: var(--muted); }
.console-label .mono { font: 500 11.5px var(--mono); letter-spacing: 0; direction: ltr; white-space: nowrap; }
.console-query { margin-bottom: 8px; font-size: 14.5px; font-weight: 500; }
.console-vec { display: grid; grid-template-columns: repeat(48, minmax(0, 1fr)); gap: 2px; direction: ltr; }
.console-vec i { height: 16px; border-radius: 2px; background: var(--surface-3); transition: background .3s var(--d, 0ms); }
.console.vectorized .console-vec i { background: var(--c); }
.console-code { display: block; min-height: 17px; margin-top: 8px; font: 11.5px var(--mono); color: var(--text-2); direction: ltr; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.console-formula { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; direction: ltr; font: 500 14px var(--mono); }
.console-formula .frac span:first-child { border-color: var(--text); }
.console-heat { display: grid; gap: 3px; direction: ltr; }
.console-heat i {
  height: 14px; border-radius: 4px; background: #efeeea; display: grid; place-items: center;
  font: 500 10.5px var(--mono); font-style: normal; color: transparent;
  transition: background .35s var(--d, 0ms), color .35s var(--d, 0ms), opacity .3s, box-shadow .3s;
}
.console-heat.labeled i { height: 30px; }
.console.computed .console-heat i { background: var(--c); color: var(--ink); }
.console.ranked .console-heat i:not(.top) { opacity: .35; }
.console.ranked .console-heat i.top { box-shadow: 0 0 0 2px var(--text); }
.console-legend { display: flex; align-items: center; gap: 8px; margin-top: 10px; font: 11px var(--mono); color: var(--muted); direction: ltr; }
.console-legend i { flex: 1; height: 5px; border-radius: 99px; background: linear-gradient(90deg, rgb(239, 238, 234), rgb(37, 99, 235)); }
.console-top { margin: 0; padding: 0 6px 4px; color: var(--text); font-weight: 500; }
.console sup { font-size: .72em; line-height: 0; vertical-align: .5em; }
.how-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.how-stats div { padding: 24px 20px; border-inline-start: 1px solid var(--border); }
.how-stats div:first-child { border-inline-start: 0; padding-inline-start: 0; }
.how-stats b { display: block; font-size: 38px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.how-stats span { font-size: 14px; color: var(--muted); }

.phase { margin-bottom: 70px; }
.phase-head { margin-bottom: 18px; }
.phase-tag { display: inline-block; margin-bottom: 12px; padding: 4px 12px; border-radius: 99px; background: var(--primary); color: #fff; font-size: 13px; font-weight: 600; }
.phase-head h2 { margin: 0 0 6px; font-size: clamp(30px, 3.6vw, 44px); font-weight: 600; letter-spacing: -.03em; }
.phase-head p { margin: 0; font-size: 17px; color: var(--muted); }

/* one step of the timeline: number | text | illustration */
.how-step {
  position: relative; display: grid; grid-template-columns: 56px minmax(0, 5fr) minmax(0, 6fr); gap: 32px;
  align-items: center; padding: 34px 0;
}
.how-step::before { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: 27px; width: 1px; background: var(--border); }
.how-step.wide { grid-template-columns: 56px minmax(0, 4fr) minmax(0, 7fr); }
.phase .how-step:first-of-type::before { top: 34px; }
.step-num {
  position: relative; z-index: 1; align-self: start; margin-top: 4px; width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; background: var(--card); border: 1px solid var(--border-strong);
  font: 600 16px var(--mono); color: var(--text);
}
.how-step.in .step-num { background: var(--primary); border-color: var(--primary); color: #fff; transition: background .4s .2s, color .4s .2s; }
.step-text h3 { margin: 0 0 10px; font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.step-text p { margin: 0 0 14px; font-size: 16px; line-height: 1.7; color: var(--muted); }
.step-text p b { color: var(--text); font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips span { padding: 4px 11px; border-radius: 99px; background: var(--panel); border: 1px solid var(--border); font-size: 12.5px; color: var(--text-2); }
.step-visual { padding: 20px; border-radius: 22px; background: var(--panel); border: 1px solid var(--border); min-height: 150px; }
.formula {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; padding: 12px 14px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--border); font: 500 15px var(--mono); direction: ltr; justify-content: flex-end;
}
.formula small { font-family: var(--font); font-size: 12.5px; color: var(--muted); direction: rtl; }
.frac { display: inline-grid; text-align: center; line-height: 1.4; }
.frac span:first-child { border-bottom: 1.5px solid var(--text); padding: 0 6px; }

/* vector cells used by several illustrations */
.vec-strip, .ix-cells, .mm-cells { display: grid; gap: 2px; direction: ltr; }
.vec-strip { grid-template-columns: repeat(32, 1fr); }
.vec-strip i, .ix-cells i, .mm-cells i { display: block; height: 14px; border-radius: 2px; opacity: 0; transition: opacity .35s var(--d, 0ms); }
.in .vec-strip i, .in .ix-cells i, .in .mm-cells i { opacity: 1; }
.vec-text { display: block; margin-top: 8px; font-size: 12px; color: var(--text-2); direction: ltr; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.embed-arrow { display: flex; align-items: center; gap: 10px; margin: 12px 0; font: 600 12px var(--mono); color: var(--blue); direction: ltr; }
.embed-arrow::before, .embed-arrow::after { content: ""; flex: 1; height: 1px; background: var(--border-strong); }

.viz-upload .file-card { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.file-card > span { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--border); }
.file-card b { display: block; font-weight: 500; }
.file-card small { color: var(--muted); }
.upload-bar { height: 6px; margin-top: 14px; border-radius: 99px; background: #e5e4df; overflow: hidden; }
.upload-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--primary); transition: width 1.4s ease .3s; }
.in .upload-bar i { width: 100%; }

.viz-bidi { display: grid; gap: 10px; }
.bidi-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.bidi-row .tag { flex-shrink: 0; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; }
.bidi-row.bad .tag { background: var(--error-50); color: var(--error); }.bidi-row.good .tag { background: var(--success-50); color: var(--success); }
.bidi-row code { font-family: var(--font); font-size: 14.5px; line-height: 1.6; }
.bidi-row.bad code { color: var(--muted); }

.viz-chunks { position: relative; height: calc(12 * 21px + 26px); }
.page-lines { display: grid; gap: 7px; width: 70%; }
.page-lines i { display: block; height: 14px; border-radius: 4px; background: #dcdbd6; }
.chunk-br {
  --c: 19, 121, 91;
  position: absolute; inset-inline: 0; top: calc(var(--a) * 21px - 3px); height: calc((var(--b) - var(--a)) * 21px - 1px);
  border-radius: 8px; background: rgba(var(--c), .1); border-inline-start: 3px solid rgb(var(--c));
  opacity: 0; transition: opacity .4s calc(var(--k) * 220ms + 200ms);
}
.chunk-br.c1 { --c: 79, 124, 224; }
.chunk-br.c2 { --c: 30, 58, 138; }
.chunk-br.c3 { --c: 224, 122, 95; }
.chunk-br small { position: absolute; inset-inline-end: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: 600; color: rgb(var(--c)); }
.in .chunk-br { opacity: 1; }
.overlap-note { position: absolute; bottom: 0; inset-inline-start: 0; font-size: 12px; color: var(--muted); }

.chunk-mini { padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.chunk-mini small { font: 500 11.5px var(--mono); color: var(--muted); }
.chunk-mini p { margin: 4px 0 0; font-size: 14px; }

.viz-index { display: grid; gap: 4px; }
.ix-row { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 8px; }
.ix-id { font: 500 11px var(--mono); color: var(--muted); direction: ltr; }
.ix-cells { grid-template-columns: repeat(32, 1fr); }
.ix-cells i { height: 11px; transition-delay: calc(var(--r, 0) * 60ms); }
.ix-more { padding-top: 4px; font-size: 12.5px; color: var(--muted); }

.q-bubble { display: inline-block; padding: 10px 16px; border-radius: 18px; border-end-end-radius: 6px; background: var(--primary); color: #fff; font-size: 15px; }

.viz-mm .mm-head { display: grid; grid-template-columns: 1fr auto 56px; gap: 10px; margin-bottom: 8px; font-size: 12px; color: var(--muted); }
.mm-rows { display: grid; gap: 4px; }
.mm-row {
  display: grid; grid-template-columns: 36px 1fr 56px; align-items: center; gap: 10px; padding: 5px 8px;
  border-radius: 10px; border: 1px solid transparent; transition: background .3s, border-color .3s, opacity .4s;
}
.mm-id { font: 500 11.5px var(--mono); color: var(--muted); direction: ltr; }
.mm-cells { grid-template-columns: repeat(16, 1fr); }
.mm-cells i { height: 12px; }
.mm-score { font: 600 13px var(--mono); text-align: left; direction: ltr; opacity: 0; transition: opacity .3s; }
.mm-row.computed { background: var(--surface); }
.mm-row.computed .mm-score { opacity: 1; }
.viz-mm.ranked .mm-row:not(.is-top) { opacity: .38; }
.viz-mm.ranked .mm-row.is-top { border-color: var(--success-100); background: var(--success-50); }
.viz-mm.ranked .mm-row.is-top .mm-score { color: var(--success); }
.mm-note { margin-top: 10px; font-size: 12px; color: var(--muted); }

.viz-topk { display: grid; gap: 6px; }
.tk-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) 80px 46px; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); font-size: 13px; }
.tk-rank { font: 600 12px var(--mono); color: var(--faint); }
.tk-name { display: flex; align-items: baseline; gap: 6px; min-width: 0; white-space: nowrap; }
.tk-doc { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tk-name small { flex-shrink: 0; font-size: 12px; color: var(--muted); }
.tk-bar { height: 5px; border-radius: 99px; background: var(--surface-3); overflow: hidden; direction: ltr; }
.tk-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--primary); transition: width .7s ease calc(var(--i) * 90ms + 200ms); }
.in .tk-bar i { width: var(--w); }
.tk-score { font: 600 12px var(--mono); text-align: left; direction: ltr; }
.tk-rest { padding: 8px 10px; border-radius: 12px; border: 1px dashed var(--border-strong); font-size: 13px; color: var(--muted); text-align: center; }

/* phase C, deep research: the aspects, the two rankings fused, the review's grades, the extra round */
.viz-aspects { display: grid; gap: 7px; justify-items: start; }
.viz-aspects .embed-arrow { justify-self: stretch; margin: 4px 0; }
.asp-row, .loop-step {
  display: flex; align-items: center; gap: 10px; justify-self: stretch; padding: 8px 12px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border); font-size: 13.5px;
  opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; transition-delay: calc(var(--i) * 160ms + 250ms);
}
.in .asp-row, .in .loop-step { opacity: 1; transform: none; }
.asp-num { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--border); font: 600 11px var(--mono); }
.asp-row .aspect-mark { margin-inline-start: auto; animation: none; }
.loop-step { border-style: dashed; color: var(--blue-700); background: var(--blue-50); border-color: var(--blue-100); }
.loop-step .icon { width: 15px; height: 15px; }
.loop-step code { padding: 1px 7px; border-radius: 6px; background: var(--surface); font-family: var(--font); font-size: 13px; color: var(--text); }
.loop-step.found { border-style: solid; color: var(--success); background: var(--success-50); border-color: var(--success-100); }
.viz-fusion table { width: 100%; border-collapse: separate; border-spacing: 0 5px; font-size: 13px; }
.viz-fusion th { padding: 0 10px; font-size: 12px; font-weight: 500; color: var(--muted); text-align: start; }
.viz-fusion tbody tr { opacity: 0; transition: opacity .35s calc(var(--i) * 140ms + 250ms); }
.in .viz-fusion tbody tr { opacity: 1; }
.viz-fusion td { padding: 8px 10px; background: var(--surface); border-block: 1px solid var(--border); }
.viz-fusion td:first-child { border-inline-start: 1px solid var(--border); border-start-start-radius: 10px; border-end-start-radius: 10px; }
.viz-fusion td:last-child { border-inline-end: 1px solid var(--border); border-start-end-radius: 10px; border-end-end-radius: 10px; font-weight: 600; }
.viz-fusion .rk { font: 500 12.5px var(--mono); color: var(--text-2); }
.viz-fusion .none { color: var(--faint); }
.fusion-formula { margin-top: 6px; font: 500 12.5px var(--mono); color: var(--muted); direction: ltr; text-align: left; }
.viz-review .tk-row.g3 .tk-bar i { background: var(--success); }
.viz-review .tk-row.dropped { opacity: .5; }
.viz-review .tk-row.dropped .tk-doc { text-decoration: line-through; }

.prompt-stack { display: grid; gap: 6px; }
.p-part { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); font-size: 13.5px; }
.p-part .icon { width: 16px; height: 16px; color: var(--muted); }
.p-part.chunks { display: block; }
.p-title { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13.5px; }
.p-title .icon { width: 16px; height: 16px; color: var(--muted); }
.p-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.p-pills span { max-width: 100%; padding: 2px 9px; border-radius: 99px; background: var(--panel); border: 1px solid var(--border); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-part.question { background: var(--primary); border-color: var(--primary); color: #fff; }
.p-part.question .icon { color: #fff; }
.prompt-total { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 14px; }
.prompt-total .icon { width: 16px; height: 16px; color: var(--blue); }
.compare { display: grid; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.cmp-row { display: grid; grid-template-columns: 76px 1fr 64px; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); }
.cmp-row b { font: 600 12.5px var(--mono); color: var(--text); text-align: left; direction: ltr; }
.cmp-bar { height: 10px; border-radius: 99px; background: #e5e4df; overflow: hidden; direction: ltr; }
.cmp-bar i { display: block; height: 100%; width: 0; border-radius: 99px; transition: width 1s ease .3s; }
.cmp-bar.all i { background: #b9b8b2; }
.cmp-bar.sent i { background: var(--success); }
.in .cmp-bar.all i { width: 100%; }
.in .cmp-bar.sent i { width: var(--sent, 30%); }

.a-bubble { padding: 14px 16px; border-radius: 18px; border-start-start-radius: 6px; background: var(--surface); border: 1px solid var(--border); font-size: 14.5px; line-height: 1.7; }
.a-source { margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); border-inline-start: 3px solid #eab308; }
.a-source:empty { display: none; }
.src-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.src-head .icon { width: 15px; height: 15px; color: #b7791f; }
.a-source p { margin: 0; font-size: 13.5px; line-height: 1.7; }
.a-source mark { padding: 1px 2px; border-radius: 3px; background: rgba(250, 204, 21, .45); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

.how-summary { margin-bottom: 110px; }
.summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.summary-grid div { padding: 30px 20px; border-inline-start: 1px solid var(--border); }
.summary-grid div:first-child { border-inline-start: 0; padding-inline-start: 0; }
.summary-grid b { display: block; font-size: 44px; font-weight: 600; letter-spacing: -.03em; direction: ltr; text-align: right; font-variant-numeric: tabular-nums; }
.summary-grid span { font-size: 14.5px; color: var(--muted); }

@media (max-width: 1024px) {
  .how-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .how-step, .how-step.wide { grid-template-columns: 56px minmax(0, 1fr); gap: 18px 22px; }
  .step-visual { grid-column: 2; }
  .how-stats { grid-template-columns: repeat(2, 1fr); }
  .how-stats div:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
}
@media (max-width: 640px) {
  .how-step, .how-step.wide { grid-template-columns: minmax(0, 1fr); }
  .how-step::before { display: none; }
  .step-visual { grid-column: 1; }
  .summary-grid { grid-template-columns: 1fr; }
  .summary-grid div { border-inline-start: 0; padding-inline-start: 0; border-top: 1px solid var(--border); }
}

/* ============================================================= about */

.about-page main { padding-top: 120px; }
.about-hero { margin-bottom: 56px; }
.people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 120px; }
.person { padding: 30px; border-radius: 24px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-xs); }
.person-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.person-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--border); }
.person-icon .icon { width: 22px; height: 22px; }
.person-role { padding: 4px 12px; border-radius: 99px; background: var(--panel); border: 1px solid var(--border); font-size: 13px; font-weight: 500; color: var(--text-2); }
.person h2 { margin: 0 0 4px; font-size: 28px; font-weight: 600; letter-spacing: -.02em; }
.person-title { margin: 0; font-size: 15px; color: var(--muted); }

@media (max-width: 640px) {
  .people { grid-template-columns: minmax(0, 1fr); }
  .person { padding: 24px; }
}

/* ============================================================= admin */

.admin-shell { max-width: 1200px; margin: 0 auto; padding: 36px 32px 96px; }
.card { margin-bottom: 20px; padding: 24px; border-radius: 24px; background: var(--card); border: 1px solid var(--border); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.card-head h2 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; margin: 0; }

.login-card { max-width: 460px; margin: 10vh auto; padding: 40px 36px; text-align: center; animation: fadeUp .4s ease both; }
.login-card h2 { margin: 0 0 8px; font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.login-card p { margin: 0; color: var(--muted); }
.login-icon { width: 56px; height: 56px; margin: 0 auto 20px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: #fff; }
.login-icon .icon { width: 24px; height: 24px; }
.login-card form { display: flex; gap: 8px; margin-top: 24px; }
.login-card input { flex: 1; min-width: 0; }
.login-card .error-text { margin: 14px 0 0; font-size: 14px; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.page-head h1 { margin: 0; font-size: 36px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.page-head p { margin: 8px 0 0; color: var(--muted); font-size: 15.5px; }

/* the summary: one strip of numbers with hairlines between them; engineer mode adds a second row
   with the vectors (4 cells: two numbers and the model across two) */
.summary-strip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-bottom: 20px; overflow: hidden;
  border: 1px solid var(--border); border-radius: 18px; background: var(--border);
}
.summary-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 14px 20px; background: var(--card); }
.summary-item.wide { grid-column: span 2; }
.summary-item span { font-size: 13px; color: var(--muted); }
.summary-item b { font-size: 24px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; font-variant-numeric: tabular-nums; }
.summary-item b.mono { padding-top: 5px; font-size: 13px; font-weight: 500; letter-spacing: 0; line-height: 1.6; direction: ltr; text-align: right; overflow-wrap: anywhere; }
.summary-item.alert b { color: var(--error); }

/* the upload: one bar to drop files on or choose them; what was chosen shows under it */
.upload-card { padding: 8px; }
.dropzone {
  display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: 18px; cursor: pointer;
  border: 1.5px dashed var(--border-strong); background: var(--panel); transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.drag { border-color: var(--text); background: var(--surface-3); }
.dropzone.drag { border-style: solid; }
.dz-icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex-shrink: 0; background: var(--surface); border: 1px solid var(--border); color: var(--text); transition: transform .2s; }
.dz-icon .icon { width: 20px; height: 20px; }
.dropzone.drag .dz-icon { transform: translateY(-2px); }
.dz-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.dz-text strong { font-size: 15.5px; font-weight: 600; }
.dz-text small { font-size: 13px; color: var(--muted); }
.dz-text small b { font-weight: 500; color: var(--text); }
.dz-actions { display: flex; gap: 8px; flex-shrink: 0; }
.dz-actions .btn { background: var(--surface); }
.dz-actions .btn:hover { background: var(--surface-3); }
.upload-pending { padding: 14px 10px 6px; }
.selected-files { display: flex; flex-wrap: wrap; gap: 8px; max-height: 136px; overflow-y: auto; }
.upload-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; margin-top: 14px; }
.file-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 6px 5px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 13.5px; }
.file-chip .size { color: var(--muted); font-size: 12px; }
.file-chip button { border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 3px; border-radius: 50%; display: grid; }
.file-chip button:hover { background: var(--surface-3); color: var(--error); }
.file-chip .icon { width: 14px; height: 14px; }
.upload-actions { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }

/* the list of documents: the folder's path as the title, the tools, then the table edge to edge */
.docs-card { padding: 0; overflow: clip; }
.docs-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; padding: 18px 24px 0; }
.docs-actions { display: flex; align-items: center; gap: 8px; }
.docs-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 14px 24px 16px; }
.docs-count { font-size: 13px; color: var(--muted); }
.toolbar-end { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.sort-btn { height: 34px; }
.sort-btn .icon { width: 15px; height: 15px; color: var(--muted); }

.documents-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; min-width: 0; min-height: 36px; }
.path-link {
  padding: 2px 8px; border: 0; border-radius: 9px; background: none; color: var(--muted);
  font: inherit; font-size: 20px; font-weight: 600; letter-spacing: -.015em; cursor: pointer; transition: color .15s, background .15s;
}
.path-link:hover { color: var(--text); background: var(--surface-3); }
.path-link.current { color: var(--text); }
span.path-link.current { cursor: default; background: none; } /* the title of search results */
.path-link.drop-target { color: var(--blue); background: var(--blue-50); }
.path-separator { display: grid; color: var(--faint); }
.path-separator .icon { width: 16px; height: 16px; transform: rotate(90deg); } /* points into the folder, to the left */
.back-folder {
  display: grid; place-items: center; width: 34px; height: 34px; margin-inline-end: 6px; padding: 0;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text-2); cursor: pointer;
}
.back-folder:hover { background: var(--surface-3); color: var(--text); }
.back-folder .icon { width: 16px; height: 16px; transform: scaleX(-1); } /* back points to the right in Hebrew */

.doc-search {
  display: inline-flex; align-items: center; gap: 8px; width: min(320px, 100%); height: 36px; padding: 0 14px;
  border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--faint);
  transition: border-color .15s, box-shadow .15s;
}
.doc-search:focus-within { border-color: var(--text); box-shadow: 0 0 0 4px rgba(17, 17, 17, .06); }
.doc-search .icon { width: 15px; height: 15px; }
.doc-search input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: inherit; font-size: 13.5px; color: var(--text); padding: 0; }

.table-wrap { overflow-x: auto; }
.docs { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.docs th { text-align: start; padding: 9px 12px; white-space: nowrap; font-size: 12.5px; font-weight: 500; color: var(--muted); background: var(--surface-2); border-block: 1px solid var(--border); }
.docs td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.docs th:first-child, .docs td:first-child { padding-inline-start: 24px; }
.docs th:last-child, .docs td:last-child { padding-inline-end: 18px; }
.docs tbody tr:last-child td { border-bottom: 0; }
.docs tbody tr:hover td { background: #fafaf8; }
.docs .num { text-align: center; font-variant-numeric: tabular-nums; }
.docs td.date { white-space: nowrap; font-size: 13.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* a folder: its drawing, as on the desktop, its name and how many files it holds */
.folder-link { display: flex; align-items: center; gap: 12px; width: 100%; padding: 0; border: 0; background: none; color: var(--text); font: inherit; text-align: start; cursor: pointer; }
.folder-link:hover b { color: var(--blue); }
.folder-art { width: 36px; height: 36px; display: grid; place-items: center; flex-shrink: 0; }
.folder-art svg { display: block; width: 32px; height: 26px; }
/* a document: a tile with its type, the name, and under it details, notes and marks */
.doc-name { display: flex; align-items: flex-start; gap: 12px; }
/* on a narrow screen the table scrolls sideways before the names are squeezed to a word per line */
.doc-name, .folder-link { min-width: 240px; }
.doc-text { display: grid; justify-items: start; gap: 1px; min-width: 0; }
.doc-text b { font-weight: 500; overflow-wrap: anywhere; }
.doc-text small { color: var(--muted); font-size: 12px; }
.file-icon {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0;
  background: var(--surface-3); color: var(--text-2); font: 600 10px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase;
}
.file-icon.pdf { background: #fcefed; color: #c0392b; }
.file-icon.docx, .file-icon.doc { background: var(--blue-50); color: #2f62d6; }
.doc-note { display: flex; align-items: flex-start; gap: 5px; max-width: 520px; margin-top: 3px; font-size: 12.5px; line-height: 1.45; }
.doc-note .icon { width: 13px; height: 13px; margin-top: 2px; }
.doc-note.error { color: var(--error); }
.doc-note.warning { color: var(--warning); }
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 99px; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* ready is the usual state, so it stays quiet; the others stand out */
.status-pill.ready { padding-inline: 0; background: none; color: var(--text-2); }
.status-pill.ready::before { background: var(--success); }
.status-pill.error { background: var(--error-50); color: var(--error); }
.status-pill.processing { background: var(--amber-50); color: var(--warning); }
.row-actions { display: flex; align-items: center; gap: 2px; justify-content: flex-end; }
.empty-state { display: grid; justify-items: center; gap: 12px; padding: 44px 24px 40px; text-align: center; color: var(--muted); font-size: 14.5px; }
.empty-state p { max-width: 380px; margin: 0; }
.empty-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--border); color: var(--faint); }
.empty-icon .icon { width: 22px; height: 22px; }

/* ----------------------------------------------- document management (backoffice) */
/* the bar of what can be done with the selected items: floating at the bottom of the screen, so that
   selecting does not move the list or the icons under the pointer */
.selection-bar {
  position: fixed; z-index: 60; bottom: 22px; inset-inline: 0; width: max-content; max-width: calc(100% - 24px); margin: 0 auto;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px; padding-inline-start: 18px;
  border-radius: 24px; background: var(--primary); color: #fff; font-size: 13.5px; box-shadow: var(--shadow-lg);
  animation: fadeUp .18s ease both;
}
.selection-bar b { margin-inline-end: 8px; font-weight: 600; }
.selection-bar .btn { border-color: rgba(255, 255, 255, .2); background: transparent; color: #fff; }
.selection-bar .btn:hover { background: rgba(255, 255, 255, .12); }
.selection-bar .btn.danger { color: #fca5a5; }
.selection-bar .btn.danger:hover { background: rgba(252, 165, 165, .14); border-color: rgba(252, 165, 165, .35); }
/* the list: a column of check boxes, selected and dragged rows, and where they can be dropped */
.docs .check-col { width: 48px; padding-inline: 12px 4px; }
.docs .check-col input { width: 15px; height: 15px; margin: 0; accent-color: var(--primary); cursor: pointer; }
.docs .document-row.selected td { background: #f6f8fc; }
.docs .document-row.dragging { opacity: .45; }
.docs .document-row[draggable="true"] { cursor: grab; }
.docs .folder-row.drop-target td { background: var(--blue-50); box-shadow: inset 0 0 0 1.5px var(--blue); }
.path-link.drop-target { color: var(--blue); text-decoration: underline; }
.row-icon { width: 32px; height: 32px; border-radius: 9px; }
.row-icon .icon { width: 16px; height: 16px; }
.row-icon.danger:hover { background: var(--error-50); color: var(--error); }
.docs .folder-row .row-actions { opacity: 0; transition: opacity .15s; }
.docs .folder-row:hover .row-actions, .docs .folder-row:focus-within .row-actions { opacity: 1; }
.doc-name .in-folder { display: block; color: var(--muted); font-size: 12px; }
.doc-name .doc-meta { display: block; max-width: 440px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.doc-name .replaced-note, .doc-name .dup-badge { display: inline-block; margin-inline-end: 6px; }
.link-like { padding: 0; border: 0; background: none; font: inherit; text-align: start; cursor: pointer; }
.link-like:hover { color: var(--text); text-decoration: underline; }
.replaced-note { color: var(--success) !important; }
.dup-badge { display: inline-block; margin-top: 3px; padding: 1px 8px; border: 0; border-radius: 99px; background: var(--amber-50); color: var(--warning); font: inherit; font-size: 11.5px; cursor: pointer; }
.dup-badge:hover { background: #fdf0c8; }
.docs-hint { margin: 0; padding: 12px 24px 14px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--faint); }
/* the menu of actions of a document */
.row-menu {
  position: fixed; z-index: 130; min-width: 190px; padding: 6px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-lg); animation: fadeIn .12s ease both;
}
.row-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 9px; background: none; font: inherit; font-size: 14px; color: var(--text); text-align: start; cursor: pointer; }
.row-menu button:hover, .row-menu button:focus-visible { background: var(--surface-3); outline: none; }
.row-menu button .icon { width: 16px; height: 16px; color: var(--muted); }
.row-menu button.danger { color: var(--error); }
.row-menu button.danger .icon { color: var(--error); }
.row-menu hr { margin: 5px 6px; border: 0; border-top: 1px solid var(--border); }
.menu-heading { padding: 6px 10px 3px; font-size: 11.5px; font-weight: 600; letter-spacing: .03em; color: var(--faint); }
/* folders in the list can be selected and dragged too */
.docs .folder-row[draggable="true"] { cursor: grab; }
.docs .folder-row.selected td { background: #f6f8fc; }
.docs .folder-row.dragging { opacity: .45; }

/* --------------------------------------------- the desktop view: folders and files as icons */
.view-switch { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--panel); border: 1px solid var(--border); }
.view-switch button { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; transition: color .15s, background .15s; }
.view-switch button .icon { width: 15px; height: 15px; }
.view-switch button:hover { color: var(--text); }
.view-switch button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-xs), 0 0 0 1px var(--border); }

.desktop {
  position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); align-content: start; gap: 4px 6px;
  min-height: 400px; padding: 18px 14px; border-radius: 18px; border: 1px solid var(--border);
  background-color: var(--surface-2);
  background-image: radial-gradient(rgba(17, 17, 17, .075) 1px, transparent 1.3px); background-size: 20px 20px;
  user-select: none; outline: none; transition: background-color .15s, border-color .15s;
}
.desktop:focus-visible { box-shadow: 0 0 0 3px var(--blue-100); }
/* files from the computer over the empty space: they go to the folder on screen */
.desktop.drop-target { border-color: var(--blue); background-color: var(--blue-50); }
.desktop.drop-target::after {
  content: attr(data-drop); position: absolute; inset-inline: 0; bottom: 16px; width: max-content; max-width: 90%; margin: auto;
  padding: 7px 16px; border-radius: 99px; background: var(--primary); color: #fff; font-size: 13px; pointer-events: none;
}
/* in the list's card the desktop runs edge to edge, under a hairline */
.docs-card .desktop { min-height: 360px; border: 0; border-top: 1px solid var(--border); border-radius: 0; }
.docs-card .desktop:focus-visible { box-shadow: inset 0 0 0 2px var(--blue-100); }
.docs-card .desktop.drop-target { box-shadow: inset 0 0 0 1.5px var(--blue); }
.desktop-empty { grid-column: 1 / -1; margin: 110px auto 0; max-width: 380px; text-align: center; color: var(--muted); font-size: 14.5px; }

.dk-item {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0;
  padding: 12px 6px 10px; border-radius: 14px; border: 1px solid transparent; text-align: center; outline: none;
  transition: background .12s, border-color .12s, opacity .12s;
}
.dk-item:hover { background: rgba(17, 17, 17, .04); }
.dk-item.selected { background: var(--blue-50); border-color: var(--blue-100); }
.dk-item:focus-visible { border-color: var(--blue); }
.dk-item.dragging { opacity: .4; }
.dk-item.drop-target { background: var(--blue-50); border: 1px dashed var(--blue); }
.dk-art { position: relative; display: grid; place-items: center; width: 64px; height: 60px; transition: transform .18s cubic-bezier(.2, .8, .2, 1); }
.dk-item.drop-target .dk-art { transform: scale(1.08); }
.dk-art svg { display: block; }
/* a folder: a back with a tab, papers when it holds documents, and a front */
.dk-item.folder svg { width: 62px; height: 51px; }
.dk-item.folder .back, .folder-art .back { fill: #8eaeea; }
.dk-item.folder .paper, .folder-art .paper { fill: #fff; }
.dk-item.folder .front, .folder-art .front { fill: #b7cdf6; }
.dk-item.folder.empty .back, .folder-art.empty .back { fill: #b2c7ef; }
.dk-item.folder.empty .front, .folder-art.empty .front { fill: #d2e0fa; }
/* a document: a page with its type on a label */
.dk-file { width: 46px; height: 58px; }
.dk-file svg { width: 100%; height: 100%; }
.dk-item.doc .sheet { fill: #fff; stroke: var(--border-strong); stroke-width: 1.4; }
.dk-item.doc .fold { fill: var(--panel); stroke: var(--border-strong); stroke-width: 1.4; stroke-linejoin: round; }
.dk-item.doc .lines { fill: none; stroke: #e2e1dc; stroke-width: 2.4; stroke-linecap: round; }
.dk-ext {
  position: absolute; left: 3px; bottom: 9px; padding: 1px 5px; border-radius: 5px;
  font: 600 9.5px/1.45 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: #fff; background: #6b6b6b;
}
.dk-ext.pdf { background: #d33a2c; }
.dk-ext.docx, .dk-ext.doc { background: #2f62d6; }
.dk-ext.md { background: var(--primary); }
.dk-item.processing .dk-file { opacity: .55; }
/* a mark on the icon: failed, being processed, or a copy of a file elsewhere */
.dk-badge { position: absolute; top: -2px; right: 2px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 0 0 2px var(--surface); }
.dk-badge .icon { width: 12px; height: 12px; stroke-width: 2.6; }
.dk-badge.error { background: var(--error); }
.dk-badge.processing { background: var(--warning); }
.dk-badge.dup { background: #d97706; }
.dk-name {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-width: 100%;
  font-size: 13px; line-height: 1.35; color: var(--text); overflow-wrap: anywhere;
}
.dk-item.selected .dk-name { color: var(--blue-700); }
.dk-item.error .dk-name { color: var(--error); }
.dk-item small { max-width: 100%; margin-top: -2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11.5px; color: var(--faint); }
/* the frame drawn over the empty space to select several icons */
.dk-frame { position: absolute; z-index: 2; border: 1px solid rgba(37, 99, 235, .55); border-radius: 3px; background: rgba(37, 99, 235, .08); pointer-events: none; }
/* the picture dragged when several items move together */
.drag-ghost { position: fixed; top: -200px; left: 0; padding: 6px 14px; border-radius: 99px; background: var(--primary); color: #fff; font: 500 13px/1.4 var(--font); white-space: nowrap; }
/* the files about to be uploaded, in the confirmation */
.drop-list { margin: 0 0 4px; padding: 10px 14px; border-radius: 12px; background: var(--panel); list-style: none; font-size: 13.5px; max-height: 180px; overflow: auto; }
.drop-list li { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; unicode-bidi: plaintext; }
.drop-list li + li { margin-top: 3px; }
.drop-list li.more { color: var(--muted); }

/* --------------------------------------------- the scan for duplicates */
.count-badge {
  display: inline-grid; place-items: center; min-width: 19px; height: 19px; margin-inline-start: 2px; padding: 0 5px;
  border-radius: 99px; border: 1px solid #f3dcae; background: var(--amber-50); color: var(--warning); font-size: 11.5px; font-weight: 600;
}
/* the dialog keeps to the window: its title, text and buttons stay, and the groups scroll between them */
.modal.dialog:has(.dup-review) { display: flex; flex-direction: column; overflow: hidden; }
.modal.dialog:has(.dup-review) > :not(.dup-review) { flex-shrink: 0; }
.dup-review { flex: 1 1 auto; min-height: 120px; overflow: auto; margin: 0 -6px; padding: 0 6px; }
.dup-kind + .dup-kind { margin-top: 18px; }
.dup-kind h4 { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.dup-group { margin-bottom: 10px; padding: 10px 14px 4px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.dup-group.off { background: var(--surface-2); }
.dup-group.off .dup-row { opacity: .6; }
.dup-head { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; cursor: pointer; }
.dup-head input, .dup-pick input { width: 15px; height: 15px; margin: 0; flex-shrink: 0; accent-color: var(--primary); cursor: pointer; }
.dup-reason { margin: 4px 0 6px; font-size: 12.5px; color: var(--muted); }
.dup-warning { margin: 0 0 6px; padding: 5px 10px; border-radius: 8px; background: var(--amber-50); color: var(--warning); font-size: 12.5px; }
.dup-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); }
.dup-pick { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.dup-row .dk-ext { position: static; flex-shrink: 0; }
.dup-row.deleted .sg-doc b { color: var(--muted); text-decoration: line-through; }
.dup-mark { flex-shrink: 0; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.dup-mark.keep { background: var(--success-50); color: var(--success); }
.dup-mark.delete { background: var(--error-50); color: var(--error); }
.dup-mark.stays { background: var(--surface-3); color: var(--muted); }
.dup-row .btn.sm { padding: 6px 8px; }

/* small dialogs: a name, a confirmation, a folder to move to */
.modal.dialog { width: min(460px, 100%); padding: 24px 26px 20px; border-radius: 22px; }
.modal.dialog h3 { margin: 0 0 8px; font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.dialog-text { margin: 0 0 14px; color: var(--text-2); font-size: 14.5px; line-height: 1.6; }
.dialog-input { width: 100%; margin: 4px 0 6px; padding: 10px 14px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); font: inherit; font-size: 15px; outline: none; }
.dialog-input:focus { border-color: var(--text); box-shadow: 0 0 0 4px rgba(17, 17, 17, .06); }
.dialog-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.btn.danger-solid { background: var(--error); color: #fff; }
.btn.danger-solid:hover { background: #991b1b; }
.folder-picker { max-height: min(300px, 40vh); overflow-y: auto; margin-bottom: 10px; padding: 4px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.picker-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; padding-inline-start: calc(10px + var(--depth, 0) * 18px); border: 0; border-radius: 8px; background: none; font: inherit; font-size: 14px; color: var(--text); text-align: start; cursor: pointer; }
.picker-row:hover { background: var(--surface-3); }
.picker-row.chosen { background: var(--blue-50); color: var(--blue-700); font-weight: 500; }
.picker-row .icon { width: 16px; height: 16px; color: var(--blue); }
/* older versions: the check box under the upload, and the review of what was found */
.check-similar { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text-2); cursor: pointer; }
.check-similar input { width: 15px; height: 15px; margin: 0; accent-color: var(--primary); }
.modal.dialog.wide { width: min(760px, 100%); }
.similar-review { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.dialog .similar-review { margin-top: 0; padding-top: 0; border-top: 0; }
.similar-review h4 { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.sg-help { margin: 0 0 12px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.sg-group { margin-bottom: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.sg-new { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; font-size: 14px; }
.sg-new > span, .sg-new small { color: var(--muted); font-size: 12.5px; }
.sg-new b { font-weight: 600; }
.sg-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 6px 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.sg-row.removed .sg-doc, .sg-row.kept .sg-doc { opacity: .5; }
.sg-row.removed .sg-doc b { text-decoration: line-through; }
.sg-badge { padding: 2px 9px; border-radius: 99px; background: var(--surface-3); font-size: 12px; font-weight: 500; white-space: nowrap; color: var(--text-2); }
.sg-badge.identical { background: var(--amber-50); color: var(--warning); }
.sg-doc { display: grid; gap: 2px; min-width: 0; }
.sg-doc b { font-weight: 500; font-size: 14px; overflow-wrap: anywhere; }
.sg-doc small { color: var(--muted); font-size: 12px; }
.sg-tag { justify-self: start; padding: 1px 8px; border-radius: 99px; font-size: 11.5px; }
.sg-tag.older { background: var(--success-50); color: var(--success); }
.sg-tag.newer { background: var(--error-50); color: var(--error); }
.sg-actions { grid-column: 2; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sg-done { font-size: 13px; color: var(--muted); }
.legend { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.legend .grad-bar { width: 110px; height: 8px; border-radius: 99px; border: 1px solid var(--border); background: linear-gradient(90deg, rgb(37, 99, 235), #fff, rgb(15, 118, 110)); }

/* small screens: the upload's buttons go under its text, and the search takes a row of its own */
@media (max-width: 720px) {
  .admin-shell { padding: 24px 16px 96px; }
  .page-head h1 { font-size: 30px; }
  .summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .summary-item { padding: 12px 16px; }
  .summary-item b { font-size: 21px; }
  .dropzone { flex-wrap: wrap; gap: 12px 14px; }
  .dz-text { flex-basis: calc(100% - 60px); }
  .dz-actions { width: 100%; }
  .dz-actions .btn { flex: 1; }
  .docs-head, .docs-toolbar { padding-inline: 16px; }
  .path-link { font-size: 18px; }
  .doc-search { width: 100%; }
  .toolbar-end { margin-inline-start: 0; }
  .docs th:first-child, .docs td:first-child { padding-inline-start: 16px; }
  .docs-hint { padding-inline: 16px; }
}

/* ----------------------------------------------- processing modal */

.modal-backdrop { position: fixed; inset: 0; z-index: 120; padding: 20px; display: grid; place-items: center; background: rgba(17, 17, 17, .28); backdrop-filter: blur(3px); animation: fadeIn .2s ease both; }
.modal { width: min(800px, 100%); max-height: 94vh; overflow: auto; padding: 28px 30px; border-radius: 28px; background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-lg); animation: popIn .35s cubic-bezier(.2, .8, .2, 1) both; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.modal-head h3 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.modal-head p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.pm-percent { font-family: var(--mono); font-size: 28px; font-weight: 600; direction: ltr; letter-spacing: -.02em; }
.modal.complete .pm-percent { animation: pop .5s ease; }

.stepper { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.stepper li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); text-align: center; }
.stepper li::before { content: ""; position: absolute; top: 18px; inset-inline-start: 50%; width: 100%; height: 1.5px; background: var(--border); transition: background .3s; }
.stepper li:last-child::before { display: none; }
.stepper li.done::before { background: var(--primary); }
.step-dot { position: relative; z-index: 1; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--card); border: 1.5px solid var(--border-strong); color: var(--muted); transition: background .3s, border-color .3s, color .3s; }
.step-dot .icon { width: 16px; height: 16px; }
.stepper li.active { color: var(--text); font-weight: 600; }
.stepper li.active .step-dot { border-color: var(--text); color: var(--text); animation: pulseRing 1.6s infinite; }
.stepper li.done .step-dot { background: var(--primary); border-color: var(--primary); color: #fff; }
.stepper li.failed .step-dot { background: var(--error); border-color: var(--error); color: #fff; }

.pm-status { display: flex; align-items: center; gap: 10px; min-height: 26px; margin-bottom: 14px; font-size: 15px; font-weight: 500; }
.pm-status .done-icon { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--success); color: #fff; }
.pm-status .done-icon .icon { width: 13px; height: 13px; }

.vector-console {
  position: relative; height: 256px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
  padding: 36px 12px 12px; border-radius: 20px; background: var(--panel); border: 1px solid var(--border);
}
.vector-console::before { content: attr(data-title); position: absolute; top: 11px; left: 14px; right: 14px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); direction: ltr; }
.vector-console .placeholder { margin: auto; color: var(--muted); font-size: 13.5px; display: flex; align-items: center; gap: 10px; }
.vrow { display: grid; gap: 6px; padding: 9px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); animation: slideIn .35s ease both; transition: opacity .4s; }
.vrow.fading { opacity: .5; }
.vrow-head { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.vrow-head .chip { font-family: var(--mono); font-weight: 600; padding: 1px 8px; border-radius: 99px; background: var(--panel); border: 1px solid var(--border); color: var(--text); }
.vrow-head .arrow { margin-inline-start: auto; font-family: var(--mono); direction: ltr; }
.vrow-text { font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vcells { display: grid; grid-template-columns: repeat(48, 1fr); gap: 2px; direction: ltr; }
.vcells i { height: 10px; border-radius: 2px; background: #ecebe7; transition: background .25s; }
.vnums { min-height: 16px; font-family: var(--mono); font-size: 11.5px; color: var(--text-2); direction: ltr; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.progress { position: relative; height: 6px; margin-top: 18px; border-radius: 99px; overflow: hidden; background: #e9e8e4; }
.progress-bar { position: relative; height: 100%; width: 0; border-radius: 99px; background: var(--primary); overflow: hidden; transition: width .5s ease; }
.progress-bar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); animation: shimmer 1.4s infinite; }
.modal.complete .progress-bar::after { display: none; }
.pm-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.pm-tech { font-family: var(--mono); direction: ltr; }
.pm-results { display: grid; gap: 8px; margin-top: 18px; }
.result-row { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 16px; border: 1px solid var(--border); font-size: 14px; animation: fadeUp .3s ease both; }
.result-row.ok { background: var(--success-50); border-color: var(--success-100); }
.result-row.fail { background: var(--error-50); border-color: #f3c7c7; }
.result-row .ricon { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: var(--success); color: #fff; }
.result-row.fail .ricon { background: var(--error); }
.result-row .ricon .icon { width: 14px; height: 14px; }
.result-row .rmeta { margin-inline-start: auto; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.modal-foot { display: flex; justify-content: flex-end; margin-top: 20px; }

/* --------------------------------------------------------- inspector */

.inspector-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.kv { padding: 6px 14px; border-radius: 99px; background: var(--surface); border: 1px solid var(--border); font-size: 13px; }
.kv b { font-weight: 600; }
.explain { display: flex; gap: 12px; margin-bottom: 18px; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); color: var(--text-2); font-size: 13.5px; line-height: 1.7; }
.explain .icon { color: var(--blue); }
.chunk-list { display: grid; gap: 12px; }
.chunk-card { padding: 14px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); }
.chunk-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; font-size: 12.5px; color: var(--muted); }
.chunk-head .chip { font-family: var(--mono); font-weight: 600; padding: 1px 8px; border-radius: 99px; background: var(--panel); border: 1px solid var(--border); color: var(--text); }
.chunk-head .chunk-actions { margin-inline-start: auto; display: flex; gap: 6px; }
.chunk-text { margin-bottom: 10px; font-size: 13.5px; line-height: 1.65; color: var(--text-2); white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.chunk-card.open .chunk-text { display: block; }
.chunk-details { display: grid; gap: 12px; margin-top: 14px; }
.detail-label { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; color: var(--muted); margin-bottom: 6px; }
pre.embedded { margin: 0; padding: 12px; max-height: 160px; overflow: auto; border-radius: 12px; background: var(--panel); border: 1px solid var(--border); font-family: inherit; font-size: 13px; white-space: pre-wrap; }
.vec-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.vec-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; max-height: 260px; overflow: auto; padding: 4px; border-radius: 12px; background: #fff; border: 1px solid var(--border); font-family: var(--mono); font-size: 11px; direction: ltr; }
.vec-grid span { padding: 3px 5px; border-radius: 4px; text-align: right; color: #1f2937; }

/* ============================================================= voice */
/* The voice page: an orb that listens and speaks (voice.js moves it, orb.js draws it). */

.voice-page main { display: flex; justify-content: center; min-height: 100vh; padding: 112px 24px 48px; }
.voice-page .site-nav .engineer-toggle { font-size: 14px; }

/* data-state: the conversation's state; --level: the voice heard now (0-1), for the microphone icon (voice.js) */
.voice-stage { --level: 0; --orb-size: min(280px, 62vw); display: flex; flex-direction: column; align-items: center; width: min(680px, 100%); text-align: center; }
.voice-tag { padding-bottom: 6px; border-bottom: 1px solid var(--text); font-size: 13px; color: var(--text-2); }
.voice-stage h1 { margin: 18px 0 8px; font-size: clamp(28px, 3.4vw, 40px); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }
.voice-lead { margin: 0 0 44px; font-size: 16px; color: var(--muted); }

/* the orb between two quiet panels: the call on the right, the sources on the left (wider than
   the stage, centered on it); on narrow screens only the orb. The row is as tall as the orb, so a
   longer list of sources reaches above and below it and nothing under it moves. */
.voice-hud {
  display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: var(--orb-size); align-items: center; column-gap: 72px;
  width: min(980px, calc(100vw - 48px));
}
.voice-side { display: flex; flex-direction: column; gap: 10px; width: 200px; text-align: start; }
.side-call { justify-self: end; }
.side-sources { justify-self: start; }
.side-label { padding-bottom: 8px; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--muted); }
.side-value { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); }
.side-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.side-time { margin-inline-start: auto; font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.side-sub { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
/* the voice heard now, in bands from low to high (voice.js scales each bar) */
.side-meter { display: flex; align-items: center; gap: 3px; height: 26px; }
.side-meter i { flex: 1; max-width: 4px; height: 100%; border-radius: 2px; background: var(--border-strong); transform: scaleY(.12); }
.side-facts { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 2px 0 0; font-size: 12px; }
.side-facts dt { color: var(--faint); }
.side-facts dd { margin: 0; font-family: var(--mono); color: var(--text-2); text-align: end; overflow-wrap: anywhere; }
#side-sources { display: flex; flex-direction: column; gap: 8px; }
.side-searching { margin: 0; font-size: 14px; }
.side-query { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.side-list { display: flex; flex-direction: column; }
.side-source {
  display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 8px 0;
  font: inherit; text-align: start; color: var(--text-2); background: none; border: 0; border-bottom: 1px solid var(--border); cursor: pointer;
  animation: fadeUp .35s ease both;
}
.side-source:nth-child(2) { animation-delay: .08s; }
.side-source:nth-child(3) { animation-delay: .16s; }
.side-source:last-child { border-bottom: 0; }
.side-source:hover { color: var(--text); }
.side-source:hover .side-source-title { text-decoration: underline; text-underline-offset: 3px; }
.side-source:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.side-source .icon { flex: none; width: 14px; height: 14px; margin-top: 3px; color: var(--muted); }
.side-source-text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.side-source-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; line-height: 1.45; }
.side-source small { font-size: 12px; color: var(--faint); }
.side-source .side-date { font-size: 11.5px; }
.side-score { margin-top: 2px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
/* a form the assistant put on the screen, above the sources */
.side-form { padding: 9px 10px; border: 1px solid var(--blue-100); border-radius: 12px; background: var(--blue-50); color: var(--text); }
.side-form:last-child { border-bottom: 1px solid var(--blue-100); }
.side-form .icon { color: var(--blue); }
.side-form small { color: var(--blue-700); font-weight: 500; }

.voice-stage:is([data-state="connected"], [data-state="listening"], [data-state="muted"], [data-state="searching"], [data-state="thinking"], [data-state="speaking"]) .side-dot { background: var(--success); }
.voice-stage[data-state="connecting"] .side-dot { background: var(--blue); animation: streamDot 1.1s ease-in-out infinite; }
.voice-stage[data-state="error"] .side-dot { background: var(--error); }
.voice-stage[data-state="unavailable"] .side-dot { background: var(--warning); }
.voice-stage:is([data-state="listening"], [data-state="speaking"]) .side-meter i { background: var(--blue); }

@media (max-width: 920px) {
  .voice-hud { grid-template-columns: auto; width: auto; }
  .voice-side { display: none; }
}

.orb {
  position: relative; width: var(--orb-size); height: var(--orb-size);
  padding: 0; border: 0; border-radius: 50%; background: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.orb[aria-disabled="true"] { cursor: default; }
.orb:focus-visible { outline: 2px solid var(--text); outline-offset: 14px; }

/* orb.js draws the globe, its ring of ticks and its glow on a canvas ORB_SCALE times as wide as the orb;
   it comes a little closer under the pointer when a click starts a call */
.orb-canvas {
  position: absolute; inset: -17.5%; width: 135%; height: 135%; pointer-events: none;
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.orb:not([aria-disabled="true"]):hover .orb-canvas { transform: scale(1.03); }
/* without a canvas: a still globe of dots in the logo's colors */
.orb-frame { position: absolute; inset: 0; border-radius: 50%; }
.orb:not(.drawn) .orb-frame::after {
  content: ""; position: absolute; inset: 13%; border-radius: 50%;
  background: radial-gradient(circle, #3b6cf6 1.1px, transparent 1.5px) 0 0 / 8px 8px;
  -webkit-mask: radial-gradient(closest-side, #000 60%, transparent);
  mask: radial-gradient(closest-side, #000 60%, transparent);
}

/* the status: a pill under the orb, in the color of what it asks (data-kind, voice.js): blue while
   it gets ready and amber while it searches or prepares an answer, both pulsing (wait); green when
   one can talk. With an icon for the state: a spinner while loading or connecting, dots while
   thinking, bars while speaking, and the common.js icons for the rest. */
.voice-status {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; max-width: 100%; min-height: 46px;
  margin: 40px 0 0; padding: 10px 22px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); box-shadow: var(--shadow-sm);
  font-size: 16.5px; font-weight: 500; line-height: 1.4; color: var(--text-2);
  transition: background-color .25s, border-color .25s, color .25s;
}
.voice-stage[data-kind="wait"] .voice-status {
  border-color: #f4d58d; background: var(--amber-50); color: #92400e; animation: statusWait 1.6s ease-in-out infinite;
}
.voice-stage:is([data-state="loading"], [data-state="connecting"]) .voice-status {
  --pulse: rgba(37, 99, 235, .16); border-color: var(--blue-100); background: var(--blue-50); color: var(--blue-700);
}
.voice-stage[data-kind="talk"] .voice-status { border-color: var(--success-100); background: var(--success-50); color: var(--success); }
.voice-stage[data-state="error"] .voice-status { border-color: #f3c7c7; background: var(--error-50); color: var(--error); }
@keyframes statusWait { 50% { box-shadow: 0 0 0 7px var(--pulse, rgba(217, 119, 6, .14)); } }
.status-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: inherit; }
.status-icon:empty { display: none; }
.status-icon .icon { width: 16px; height: 16px; animation: pop .35s ease; }
.status-icon .spinner { width: 14px; height: 14px; border-width: 1.5px; border-color: var(--blue-100); border-top-color: currentColor; }
.status-dots { display: inline-flex; gap: 3px; }
.status-dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: streamDot 1.1s ease-in-out infinite; }
.status-dots i:nth-child(2) { animation-delay: .15s; }
.status-dots i:nth-child(3) { animation-delay: .3s; }
.status-bars { display: inline-flex; align-items: center; gap: 2px; height: 14px; }
.status-bars i { width: 2.5px; height: 100%; border-radius: 2px; background: currentColor; animation: statusBar .9s ease-in-out infinite; }
.status-bars i:nth-child(1) { animation-delay: -.2s; }
.status-bars i:nth-child(2) { animation-delay: -.45s; }
.status-bars i:nth-child(3) { animation-delay: -.1s; }
.status-bars i:nth-child(4) { animation-delay: -.6s; }
@keyframes statusBar { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.voice-stage[data-state="listening"] .status-icon { transform: scale(calc(1 + var(--level) * .3)); }
.voice-stage[data-state="searching"] .status-icon .icon { animation: rlScope 1.2s ease-in-out infinite; }
.voice-stage[data-state="connected"] .status-icon { color: var(--success); }
.voice-stage:is([data-state="muted"], [data-state="ended"]) .status-icon { color: var(--muted); }
.voice-stage[data-state="error"] .status-icon { color: var(--error); }
.voice-stage[data-state="unavailable"] .status-icon { color: var(--warning); }

.voice-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; min-height: 40px; margin-top: 18px; }
.voice-controls .btn[aria-pressed="true"] { background: var(--surface-3); }
.voice-select {
  appearance: none; font: inherit; font-size: 14px; color: var(--text);
  padding: 8px 16px; padding-inline-end: 36px; border: 1px solid var(--border-strong); border-radius: 999px; cursor: pointer;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat left 14px center;
}
.voice-select:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

.voice-transcript {
  display: flex; flex-direction: column; gap: 14px; width: 100%; max-height: 340px; overflow-y: auto;
  margin: 36px 0 0; padding: 0; list-style: none; text-align: start;
}
.voice-transcript:empty { display: none; }
.turn { font-size: 15.5px; line-height: 1.7; }
.turn.user { align-self: flex-start; max-width: 85%; padding: 8px 14px; border-radius: 18px; background: var(--surface-3); color: var(--text-2); }
.turn.assistant { color: var(--text); }
.turn.cut .turn-text::after { content: " …"; color: var(--faint); }
.turn.pending { font-size: 15px; animation: fadeIn .25s ease both; } /* "מחפש בנהלים…" until the answer begins */
.turn-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.turn-sources .label { font-size: 12.5px; color: var(--faint); }
.turn-forms { display: grid; gap: 8px; margin-top: 10px; }
.turn-forms .form-card { max-width: 480px; }
.source-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px;
  font: inherit; font-size: 12.5px; color: var(--text-2);
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface); cursor: pointer;
}
.source-chip:hover { border-color: var(--border-strong); color: var(--text); }
.source-chip .icon { width: 13px; height: 13px; }

/* engineer mode: the connection, the searches and their timings */
.voice-log {
  width: 100%; max-height: 220px; overflow-y: auto; margin-top: 24px; padding: 12px 14px;
  font-family: var(--mono); font-size: 12px; line-height: 1.7; text-align: start; color: var(--text-2);
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
}
.voice-log:empty::before { content: "כאן יופיעו פרטי החיבור, החיפושים והזמנים."; color: var(--faint); }
.voice-log div { unicode-bidi: plaintext; }
.voice-log time { color: var(--faint); margin-inline-end: 8px; }

.voice-note { margin: 40px 0 0; font-size: 12.5px; color: var(--faint); }

@media (max-width: 720px) {
  .voice-page main { padding-top: 96px; }
}

/* ======================================================== animations */

/* a line that types a phrase in a few languages in turn (common.js: runTyper); all the phrases
   share one grid cell, so the line is as wide as the longest and nothing around it moves */
.typer { display: inline-grid; vertical-align: top; color: var(--brand); }
.typer > * { grid-area: 1 / 1; justify-self: var(--typer-align, start); white-space: nowrap; }
.typer > [lang] + [lang]:not(.typer-out) { visibility: hidden; }
.typer.typing > [lang]:first-child { color: transparent; } /* unseen, but still read by screen readers */
.typer-out { text-align: start; }
.typer-out::after {
  content: ""; display: inline-block; width: max(2px, .06em); height: .95em; margin-inline-start: .08em;
  vertical-align: -.1em; background: currentColor; animation: blink 1.1s step-end infinite;
}
.typer.busy .typer-out::after { animation: none; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes slideIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes pulseRing { 0% { box-shadow: 0 0 0 0 rgba(17, 17, 17, .18); } 100% { box-shadow: 0 0 0 10px rgba(17, 17, 17, 0); } }
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes hlIn { from { opacity: 0; transform: scaleX(.3); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.15); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ======================================================== responsive */

@media (max-width: 1024px) {
  /* 12 columns with 32px gaps need 352px of gaps alone; use one column instead */
  .hero, .module-head, .ask-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .hero-main, .hero-visual, .module-head h2, .module-head p { grid-column: 1 / -1; }
  .hero-visual { margin-top: 12px; }
  .demo-chat { margin-inline-end: 0; }
  .demo-pdf { width: min(340px, 84%); }
  .ask-intro, .ask-list { grid-column: 1 / -1; }
  .steps-grid, .mini-grid, .numbers-grid { grid-template-columns: repeat(2, 1fr); }
  .numbers-grid div:nth-child(3) { border-inline-start: 0; }
  .showcase-grid, .value-props { grid-template-columns: 1fr; }
  .vp, .vp:first-child { border-inline-start: 0; padding-inline-start: 0; }
  .footer-inner { grid-template-columns: repeat(2, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .app-header, .nav-inner { padding: 0 16px; }
  .container { padding: 0 16px; }
  .brand-text small, .nav-links, .app-header .brand-text { display: none; }
  .brand-logo { height: 34px; }
  .brand-text strong { font-size: 16px; }
  .site-nav .btn { padding: 8px 14px; }
  .steps-grid, .mini-grid { grid-template-columns: 1fr; }
  .stepper li span.step-label { display: none; }
  /* the source page sits lower and shorter, so the answer stays readable */
  .demo { padding-bottom: 104px; }
  .demo-thread { height: 420px; } /* the table's rows wrap on a narrow card */
  .demo-tool.on b { display: none; } /* the tools that are on show by their tint */
  .pdf-sheet i:nth-child(3), .pdf-sheet i:nth-child(6) { display: none; }
  .console-heat.labeled i { height: 24px; font-size: 8.5px; }
  .console-formula { font-size: 12.5px; }
}

/* ------------------------------------------------ accounts: sign-in, rooms, manage */
/* auth.html (/login, /register), rooms.html and manage.html, with auth.js, rooms.js and manage.js.
   Built from the admin page's parts (cards, the summary strip, the documents table, dialogs);
   what is here is what they lack: form fields, room cards, tabs and the usage report. */

.account-page :focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.account-page :is(input, select, textarea):focus-visible { outline: none; } /* they have a ring of their own */

/* form fields: a label over a field; single lines are pills, like the other inputs */
.field { display: grid; gap: 6px; margin-bottom: 16px; text-align: start; }
.field > label, .option-group legend { font-size: 13.5px; font-weight: 500; color: var(--text-2); }
.field input, .field textarea, .field select, select.inline-select,
input.limit-input, input.price-input, input.member-search, input.invite-link {
  width: 100%; min-width: 0; padding: 10px 16px; font: inherit; font-size: 15px; color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 999px; background-color: var(--surface); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.field textarea { min-height: 84px; border-radius: 16px; line-height: 1.55; resize: vertical; }
:is(.field input, .field textarea, .field select, select.inline-select, input.limit-input, input.price-input, input.member-search, input.invite-link):focus {
  border-color: var(--text); box-shadow: 0 0 0 4px rgba(17, 17, 17, .06);
}
.field select, select.inline-select {
  appearance: none; padding-inline-end: 36px; cursor: pointer;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat left 14px center;
}
select.inline-select { width: auto; padding-block: 6px; padding-inline-start: 14px; font-size: 13.5px; }
select.inline-select:disabled { opacity: .55; cursor: default; }
.field-hint { font-size: 12.5px; line-height: 1.5; color: var(--muted); }

/* a choice of two, as cards with a radio button (joining or opening an organization, a room's access) */
.option-group { min-width: 0; margin: 0 0 16px; padding: 0; border: 0; }
.option-group legend { margin-bottom: 6px; padding: 0; }
.option-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.option-card {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; text-align: start; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: 16px; background: var(--surface);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.option-card:hover { background: var(--surface-2); }
.option-card:has(input:checked) { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.option-card:has(input:focus-visible) { outline: 2px solid var(--text); outline-offset: 2px; }
.option-card input { flex-shrink: 0; width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--primary); cursor: pointer; }
.option-card span { display: grid; gap: 2px; min-width: 0; }
.option-card b { font-size: 14.5px; font-weight: 600; }
.option-card small { font-size: 12.5px; line-height: 1.45; color: var(--muted); }

/* the header's buttons lose their words on a phone (still read by screen readers) */
.account-page .app-header .btn-label { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) {
  .account-page .app-header .btn { padding: 9px 11px; }
  .account-page .app-header .btn-label {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}

.spinner.on-dark { border-color: rgba(255, 255, 255, .35); border-top-color: #fff; }

/* -------------------------------------------- sign-in and sign-up (auth.html) */
.auth-shell { display: grid; justify-items: center; padding: 7vh 20px 80px; }
.auth-card { width: min(460px, 100%); margin: 0; padding: 36px 34px 28px; text-align: center; box-shadow: var(--shadow-md); animation: fadeUp .4s ease both; }
.auth-title { margin: 0 0 6px; font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.auth-lead { margin: 0 0 22px; font-size: 15px; color: var(--muted); }
.auth-form { text-align: start; }
.auth-form .note { margin-bottom: 18px; }
.auth-form .note a { color: inherit; font-weight: 600; }
.auth-error { margin: 0 0 14px; font-size: 14px; }
.auth-submit { width: 100%; padding: 12px 18px; font-size: 15.5px; }
.auth-switch { margin: 18px 0 0; font-size: 14px; color: var(--muted); }
.auth-switch a { color: var(--text); font-weight: 500; }
.auth-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
#invite-code { letter-spacing: .08em; text-transform: uppercase; }

/* ------------------------------- why the rooms are closed, or a page that did not load */
.status-card { max-width: 560px; margin: 8vh auto; padding: 40px 36px; text-align: center; animation: fadeUp .4s ease both; }
.status-card :is(h1, h2) { margin: 0 0 8px; font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.status-card p { max-width: 420px; margin: 0 auto; color: var(--muted); }
.status-icon { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%; background: var(--surface-3); color: var(--text-2); }
.status-icon .icon { width: 24px; height: 24px; }
.status-icon.wait { background: var(--amber-50); color: var(--warning); box-shadow: inset 0 0 0 1px #f5e1a8; }
.status-icon.error { background: var(--error-50); color: var(--error); }
.status-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.status-actions:empty { display: none; }

/* ------------------------------------------------------- rooms (rooms.html) */
.rooms-page .page-head { flex-wrap: wrap; }

/* the tokens used this month, and the limit as a bar */
.quota { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: -6px 0 22px; font-size: 14px; color: var(--text-2); }
.quota-label { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 6px; }
.quota-label .icon { width: 16px; height: 16px; color: var(--muted); }
.quota-label b { font-weight: 600; font-variant-numeric: tabular-nums; }
.quota-bar { position: relative; width: 160px; height: 6px; overflow: hidden; border-radius: 99px; background: var(--surface-3); }
.quota-bar::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--share, 0%); border-radius: inherit; background: var(--text); }
.quota-bar.high::after { background: var(--warning); }
.quota-bar.full::after { background: var(--error); }
.quota-bar.mini { display: block; width: 72px; height: 4px; margin: 5px auto 0; }
.quota-note { flex-basis: 100%; font-size: 13.5px; }

.room-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.room-card { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 20px 20px 18px; transition: border-color .15s, box-shadow .15s; }
.room-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.room-card.fresh { border-color: var(--text); animation: popIn .4s cubic-bezier(.2, .8, .2, 1) both; }
.room-top { display: flex; align-items: flex-start; gap: 12px; }
.room-top .icon-btn { flex-shrink: 0; margin-block-start: -4px; margin-inline-end: -6px; }
.room-icon { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 13px; background: var(--panel); border: 1px solid var(--border); color: var(--text-2); }
.room-icon .icon { width: 20px; height: 20px; }
.room-title { display: grid; justify-items: start; gap: 5px; flex: 1; min-width: 0; }
.room-title h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; overflow-wrap: anywhere; }
.room-title h2 a { color: inherit; text-decoration: none; }
.room-title h2 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.access-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 99px; background: var(--surface-3); color: var(--text-2); font-size: 12px; font-weight: 500; }
.access-badge .icon { width: 13px; height: 13px; }
.access-badge.members { background: var(--blue-50); color: var(--blue-700); }
.room-desc {
  display: -webkit-box; margin: 0; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  font-size: 14px; line-height: 1.6; color: var(--text-2);
}
.room-meta { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--muted); }
.room-meta .icon { width: 15px; height: 15px; }
.room-hint { margin: 0; padding: 8px 12px; border-radius: 12px; background: var(--amber-50); color: #92400e; font-size: 13px; }
.room-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px; }
.room-actions .btn .icon { width: 15px; height: 15px; }

/* a room's settings, in the drawer: who is in it and who manages it */
.drawer-form h4 { margin: 0; font-size: 15px; font-weight: 600; }
.member-section { margin-top: 6px; padding-top: 18px; border-top: 1px solid var(--border); }
.member-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
input.member-search { width: min(220px, 55%); padding: 7px 14px; font-size: 13.5px; }
.member-note { margin: 0 0 10px; }
.member-list { overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.member-list .viewer-loading { padding: 24px; }
.member-list > .error-text { margin: 14px 14px 8px; }
.member-list > .btn { margin: 0 14px 14px; }
.member-row { display: flex; align-items: center; gap: 14px; padding: 10px 14px; }
.member-row + .member-row { border-top: 1px solid var(--border); }
.member-who { display: grid; justify-items: start; gap: 1px; flex: 1; min-width: 0; }
.member-who b { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.member-who > small { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.member-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); white-space: nowrap; cursor: pointer; }
.member-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); cursor: pointer; }
.member-check:has(input:disabled) { color: var(--faint); cursor: default; }
.member-list.org-wide .col-member { display: none; }
.you-tag { margin-inline-start: 6px; padding: 1px 7px; border-radius: 99px; background: var(--surface-3); color: var(--muted); font-size: 11.5px; font-weight: 500; white-space: nowrap; vertical-align: 1px; }
.drawer-actions .push-end { margin-inline-start: auto; }

/* the account, in the drawer */
.account-facts {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 20px; margin: 0 0 22px; padding: 16px 18px;
  border: 1px solid var(--border); border-radius: 16px; background: var(--surface); font-size: 14px;
}
.account-facts dt { color: var(--muted); }
.account-facts dd { margin: 0; overflow-wrap: anywhere; }
.password-form h4 { margin-bottom: 12px; }
.form-message { margin: 0 0 12px; font-size: 14px; }
.form-message.ok { color: var(--success); }

/* a short confirmation at the bottom of the screen */
.toast-region { position: fixed; z-index: 130; bottom: 24px; inset-inline: 0; display: flex; justify-content: center; pointer-events: none; }
.toast {
  display: inline-flex; align-items: center; gap: 8px; max-width: calc(100% - 32px); padding: 10px 18px;
  border-radius: 999px; background: var(--primary); color: #fff; font-size: 14px; box-shadow: var(--shadow-lg);
  animation: fadeUp .2s ease both; transition: opacity .3s, transform .3s;
}
.toast .icon { width: 16px; height: 16px; color: #86efac; }
.toast.out { opacity: 0; transform: translateY(6px); }

/* ------------------------------------------------------ manage (manage.html) */
.tabs {
  display: flex; gap: 4px; width: max-content; max-width: 100%; margin: 0 0 22px; padding: 4px; overflow-x: auto;
  border: 1px solid var(--border); border-radius: 999px; background: var(--panel);
}
.tabs [role="tab"] {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: 0; border-radius: 999px;
  background: none; color: var(--muted); font: inherit; font-size: 14.5px; font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: background .15s, color .15s;
}
.tabs [role="tab"]:hover { color: var(--text); }
.tabs [role="tab"][aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.tabs .count-badge { margin-inline-start: 0; }
.tab-panel { animation: fadeIn .2s ease both; }
.tab-panel:focus { outline: none; }
.tab-panel .status-card { margin: 24px auto; }
.tab-panel .card > h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.tab-panel .status-card > h2 { display: block; margin-bottom: 8px; font-size: 22px; }
.card-lead { margin: 0 0 6px; font-size: 14px; }

/* users: the invite and the organization's settings side by side, then who waits, then everyone */
.manage-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
.manage-grid > .card { margin: 0; }
.invite-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 14px; }
.invite-label { flex-basis: 100%; font-size: 13px; color: var(--muted); }
.invite-code {
  padding: 5px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel);
  font-size: 18px; font-weight: 600; letter-spacing: .12em; user-select: all;
}
input.invite-link { flex: 1 1 220px; width: auto; padding: 7px 14px; font-size: 13px; color: var(--text-2); background-color: var(--surface-2); }
.check-row { display: flex; align-items: flex-start; gap: 10px; margin-top: 4px; cursor: pointer; }
.check-row input { flex-shrink: 0; width: 17px; height: 17px; margin: 3px 0 0; accent-color: var(--primary); cursor: pointer; }
.check-row span { display: grid; gap: 2px; }
.check-row b { font-size: 14.5px; font-weight: 500; }
.check-row small { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.pending-card { border-color: #f5e1a8; background: linear-gradient(var(--amber-50), var(--card) 120px); }
.pending-list { margin: 10px 0 0; padding: 0; list-style: none; }
.pending-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; padding: 12px 0; }
.pending-row + .pending-row { border-top: 1px solid var(--border); }
.row-buttons { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.pending-row .row-buttons { margin-inline-start: auto; }
.role-fixed { padding-inline-start: 4px; font-size: 14px; color: var(--text-2); }
.table-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 18px 24px 14px; }
.table-card-head h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.table-card-head .muted { font-size: 13px; }
.status-pill.off { background: var(--surface-3); color: var(--muted); }
.status-cell { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.pending-note { display: block; font-size: 12px; color: var(--warning); white-space: nowrap; }
.used-cell { display: inline-grid; justify-items: center; font-variant-numeric: tabular-nums; }

/* a limit typed in place, and a check for a moment once it is saved */
.limit-cell { display: inline-flex; align-items: center; gap: 6px; }
.limit-cell.wide { display: flex; }
.limit-cell.wide input { flex: 1; }
input.limit-input { width: 140px; padding: 6px 12px; font-size: 13.5px; text-align: right; font-variant-numeric: tabular-nums; }
input.limit-input::placeholder, input.price-input::placeholder { color: var(--faint); }
.save-mark { display: grid; color: var(--success); opacity: 0; }
.save-mark .icon { width: 16px; height: 16px; }
.save-mark.on { animation: accountSaved 1.8s ease both; }
@keyframes accountSaved { 0% { opacity: 0; transform: scale(.6); } 15%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* usage: the filters, the totals, then a table by user, model, kind of use and room */
.usage-filters { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 18px; }
.usage-filters .grow { flex: 1; }
.field.inline { gap: 4px; margin: 0; }
.field.inline select { min-width: 190px; }
.usage-body { transition: opacity .15s; }
.usage-body.busy { opacity: .55; pointer-events: none; }
.usage-body .quota { margin: 0 0 16px; }
.usage-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.usage-tiles .summary-item b { overflow-wrap: anywhere; }
.summary-item small { font-size: 12px; line-height: 1.4; color: var(--muted); }
.usage-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; align-items: start; }
.share { display: inline-grid; justify-items: center; gap: 4px; }
.share-bar { position: relative; width: 64px; height: 4px; overflow: hidden; border-radius: 99px; background: var(--surface-3); }
.share-bar::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--share, 0%); border-radius: inherit; background: var(--blue); }

/* prices: two prices a model, saved together */
.price-cell { display: inline-flex; align-items: center; gap: 6px; direction: ltr; }
input.price-input { width: 110px; padding: 6px 12px; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.form-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 16px 24px; border-top: 1px solid var(--border); }
.form-foot .muted { font-size: 13.5px; }

/* the organization beside the platform's name in the header: its logo when it has one, and its name */
.org-chip { display: flex; align-items: center; gap: 9px; min-width: 0; padding-inline-start: 16px; border-inline-start: 1px solid var(--border-strong); }
.org-logo { display: block; flex-shrink: 0; width: auto; max-width: 96px; height: 28px; object-fit: contain; border-radius: 6px; }
.org-chip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 600; color: var(--text-2); }

/* a logo (the organization's, the platform's): a preview, and beside it upload and remove */
.field > .field-label { font-size: 13.5px; font-weight: 500; color: var(--text-2); }
.logo-editor { display: flex; align-items: center; gap: 14px; }
.logo-preview {
  display: grid; place-items: center; flex-shrink: 0; width: 72px; height: 72px; padding: 8px; overflow: hidden;
  border: 1px solid var(--border); border-radius: 16px; background: var(--surface);
}
.logo-preview img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-placeholder { font-size: 26px; font-weight: 600; color: var(--faint); }
.logo-side { display: grid; gap: 6px; min-width: 0; }
.logo-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.branding-card { max-width: 640px; }

@media (max-width: 900px) {
  .manage-grid, .usage-pair { grid-template-columns: minmax(0, 1fr); }
  .usage-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .usage-tiles .summary-item:last-child { grid-column: span 2; }
}
@media (max-width: 720px) {
  .auth-shell { padding-top: 32px; }
  .auth-card { padding: 28px 20px 22px; }
  .status-card { margin: 32px auto; padding: 32px 22px; }
  .option-cards { grid-template-columns: minmax(0, 1fr); }
  .room-grid { grid-template-columns: minmax(0, 1fr); }
  .table-card-head, .form-foot { padding-inline: 16px; }
  .usage-filters .field.inline { flex: 1 1 160px; }
  .field.inline select { min-width: 0; width: 100%; }
  .member-row { flex-wrap: wrap; gap: 6px 14px; }
  .member-who { flex-basis: 100%; }
  .org-chip { gap: 7px; padding-inline-start: 12px; }
  .org-logo { height: 24px; }
}

/* ------------------------------------------------ chat: saved conversations in the side bar (chat.js) */
.this-chat { margin-bottom: 18px; }
.history-group { margin-bottom: 14px; }
.history-items { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
.history-item { position: relative; display: flex; align-items: center; flex-wrap: wrap; border-radius: 8px; animation: fadeIn .25s ease both; }
.history-item:hover, .history-item.menu-open { background: var(--hover); }
.history-item.active { background: var(--pressed); }
.history-open {
  flex: 1 1 0; min-width: 0; padding: 7px 10px; border: 0; background: none; font: inherit; font-size: 13.5px;
  line-height: 1.45; color: var(--text-2); text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
}
.history-item.active .history-open { color: var(--text); font-weight: 500; }
.history-more {
  display: grid; place-items: center; width: 28px; height: 28px; margin-inline-end: 4px; border: 0; border-radius: 6px;
  background: none; color: var(--muted); cursor: pointer; opacity: 0; transition: opacity .15s, background .15s;
}
.history-item:hover .history-more, .history-item.active .history-more, .history-item.menu-open .history-more,
.history-more:focus-visible { opacity: 1; }
.history-more:hover { background: var(--pressed); color: var(--text); }
.history-more .icon { width: 16px; height: 16px; }
.history-menu, .history-confirm { display: flex; flex-basis: 100%; gap: 4px; padding: 2px 6px 6px; }
.history-menu[hidden] { display: none; }
.history-menu button, .history-confirm button {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--surface); font: inherit; font-size: 12.5px; color: var(--text-2); cursor: pointer;
}
.history-menu button:hover, .history-confirm button:hover { border-color: var(--border-strong); color: var(--text); }
.history-menu .icon { width: 14px; height: 14px; }
.history-menu .danger, .history-confirm .danger { color: var(--error); }
.history-confirm { align-items: center; font-size: 12.5px; color: var(--text-2); }
.history-confirm span { margin-inline-end: auto; }
.history-rename {
  flex: 1 1 0; min-width: 0; margin: 3px 4px; padding: 5px 8px; border: 1px solid var(--border-strong); border-radius: 7px;
  font: inherit; font-size: 13.5px; background: var(--surface); color: var(--text);
}
.history-clear {
  margin: 4px 10px 10px; padding: 0; border: 0; background: none; font: inherit; font-size: 12.5px;
  color: var(--faint); cursor: pointer;
}
.history-clear:hover, .history-clear[data-confirm] { color: var(--error); }
@media (hover: none) { .history-more { opacity: 1; } }