:root {
  color-scheme: light;
  --ink: #30302e;
  --muted: #77756f;
  --paper: #ffffff;
  --line: #e3e0d9;
  --green: #b86348;
  --light: #f0ede7;
  --orange: #b86348;
  --shadow: 0 8px 32px #21372b08;
  font-family: Arial, "Noto Sans Hebrew", sans-serif;
  font-size: 15px;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #f8f7f3;
  color: var(--ink);
  height: 100dvh;
  overflow: hidden;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
textarea,
select {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 9px;
  background: var(--green);
  color: white;
  padding: 10px 17px;
  transition:
    background 0.15s,
    box-shadow 0.15s;
}
button:hover {
  filter: brightness(0.96);
}
button:disabled {
  opacity: 0.48;
  cursor: wait;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid #c69b54;
  outline-offset: 2px;
}
a {
  color: var(--green);
}
input,
select,
textarea {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  padding: 10px;
}
textarea {
  resize: vertical;
  min-height: 88px;
  max-height: 240px;
  unicode-bidi: plaintext;
  line-height: 1.6;
}
input::placeholder,
textarea::placeholder {
  color: #8b8982;
}
.quiet {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
  padding: 8px 12px;
}
/* The settings button lives in the top bar (.top-actions) with the other header buttons. */
.workspace {
  height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 62fr) minmax(320px, 38fr);
  min-height: 0;
  overflow: hidden;
}
.tutor-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  position: relative;
  padding-top: 68px;
}
.eyebrow {
  font-size: 11px;
  letter-spacing: 0.03em;
  color: #77756f;
  margin-bottom: 8px;
}
.catalog-filters h3 {
  margin: 0 0 0.4rem;
  font-size: 1rem;
}
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
}
.filter-row label {
  display: grid;
  gap: 0.3rem;
  font-size: 0.9rem;
}
.filter-row input,
.filter-row select {
  min-width: 88px;
}
.result-card {
  width: 100%;
  text-align: right;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  padding: 12px 14px;
  margin-bottom: 7px;
  display: block;
}
.result-card:hover {
  border-color: #b9aca0;
  background: #f4f2ec;
}
.result-card strong {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin: 6px 0;
  line-height: 1.5;
}
.card-meta {
  font-size: 11px;
  color: var(--muted);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.card-meta b {
  color: var(--green);
  font-weight: 500;
}
.learning-area {
  flex: 1;
  overflow: auto;
  padding: 20px 30px;
  scroll-behavior: smooth;
}
.welcome {
  max-width: 680px;
  margin: 0 auto 28px;
  text-align: center;
}
.welcome-prompt {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
  margin: 16px 0 0;
}
.stem {
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.9;
  max-height: 190px;
  overflow: auto;
  padding: 0 0 14px;
}
.question-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.question-actions button {
  font-size: 11px;
  padding: 5px 8px;
  background: #f4f2ec;
  border: 1px solid var(--line);
  color: var(--green);
}
.question-actions button:first-child {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}
.messages {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 740px;
  margin: auto;
}
.message {
  display: flex;
  gap: 11px;
  align-items: flex-start;
}
.avatar {
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: #f0e6df;
  color: var(--green);
  font:
    16px Georgia,
    serif;
  border-radius: 8px;
}
.message.system {
  padding: 8px 0;
  border-block: 1px solid var(--line);
}
.message.system .avatar {
  display: none;
}
.message.system .content {
  font-size: 12px;
  color: var(--muted);
}
.catalog-text {
  font-size: 12px;
  margin-block: 6px;
}
.catalog-text summary {
  cursor: pointer;
}
.part-links {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.message.user .avatar {
  background: #eeece6;
  color: #6b6760;
  font: 12px Arial;
}
.message-body {
  min-width: 0;
  flex: 1;
  font-size: 16px;
  line-height: 1.85;
}
.message.user .content {
  background: #eeece6;
  padding: 10px 14px;
  border-radius: 10px;
  white-space: pre-wrap;
  unicode-bidi: plaintext;
}
.message-label {
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 4px;
}
.content p {
  margin: 4px 0 12px;
}
.content pre,
.content code {
  direction: ltr;
  unicode-bidi: isolate;
  background: #eeece6;
  border-radius: 5px;
}
.content pre {
  padding: 12px;
  overflow: auto;
}
.content table {
  border-collapse: collapse;
}
.content td,
.content th {
  padding: 6px;
  border: 1px solid var(--line);
}
.content blockquote {
  border-right: 3px solid #cc9c88;
  margin: 10px 0;
  padding-right: 12px;
  color: var(--muted);
}
.content img {
  max-width: 100%;
}
.content .katex,
.message-preview .katex {
  direction: ltr;
  unicode-bidi: isolate;
}
.katex-display {
  overflow: auto hidden;
  padding: 5px 0;
  direction: ltr;
  unicode-bidi: isolate;
}
.source-chip {
  background: #f0eee8;
  color: #706a61;
  border: 1px solid #dedad1;
  border-radius: 20px;
  font-size: 10px;
  padding: 3px 9px;
}
.usage {
  font-size: 10px;
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.6;
  direction: rtl;
}
.notice {
  color: #9b613b;
  font-size: 12px;
}
.composer-area {
  background: #f8f7f3;
  padding: 12px 30px 20px;
  width: min(800px, 100%);
  margin-inline: auto;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}
.composer {
  background: var(--paper);
  border: 1px solid #d9d5cd;
  border-radius: 22px;
  box-shadow: 0 3px 5px #302c2410, 0 12px 35px #302c2405;
  padding: 16px;
  order: 1;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.composer textarea {
  width: 100%;
  border: 0;
  padding: 6px 4px;
  background: transparent;
  outline-offset: 0;
  display: block;
  min-height: 68px;
  height: 68px;
  max-height: 180px;
  resize: none;
  font-size: 16px;
}
.composer-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}
.composer-tools > div {
  display: flex;
  align-items: center;
  gap: 12px;
}
.math-button {
  font-size: 11px;
  border: 0;
  padding: 5px;
}
.math-button span {
  font:
    italic 16px Georgia,
    serif;
}
.composer-tools #send {
  width: 36px;
  height: 36px;
  padding: 0;
  font: 24px Arial, sans-serif;
  border-radius: 10px;
  display: grid;
  place-items: center;
}
.session-panel {
  display: grid;
  gap: 10px;
  margin-bottom: 4px;
}
.session-panel-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  font-size: 13px;
}
.session-label {
  color: var(--muted);
  font-size: 12px;
}
.session-panel #reset-session {
  justify-self: start;
  font-size: 12px;
  padding: 7px 11px;
}
.key-notice {
  font-size: 11px;
  line-height: 1.7;
  background: #f3eddf;
  border: 1px solid #e8dfc8;
  border-radius: 7px;
  padding: 8px 11px;
  margin-bottom: 8px;
  color: #8c7551;
}
.image-pane {
  background: #eeece6;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 20px 12px 12px;
  position: relative;
}
.page-chrome {
  position: absolute;
  top: 14px;
  inset-inline-start: 14px;
  z-index: 2;
  display: flex;
  gap: 6px;
  align-items: center;
  pointer-events: none;
}
.page-chrome > * {
  pointer-events: auto;
}
.page-open {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #fffffff2;
  border: 1px solid #d5dbc8;
  color: var(--green);
  text-decoration: none;
  font-size: 14px;
  box-shadow: 0 2px 10px #26302014;
}
.page-open:hover {
  background: #fff;
}
.page-stage {
  flex: 1;
  overflow: auto;
  text-align: center;
  min-height: 0;
  border: 1px solid #dcd8cf;
  border-radius: 8px;
  background: #e8e5de;
}
.page-stage img {
  width: 100%;
  height: auto;
  display: block;
  background: white;
  box-shadow: 0 2px 20px #2630200a;
}
.page-empty {
  height: 100%;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #77756f;
}
.page-empty > span {
  font-size: 50px;
  font-weight: 100;
  color: #aaa298;
}
.page-empty p {
  font-size: 14px;
  margin: 14px 0 8px;
}
.page-empty small {
  font-size: 11px;
}
.settings-dialog {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--paper);
  color: var(--ink);
  padding: 25px;
  box-shadow: 0 25px 100px #18331d30;
  width: min(480px, calc(100% - 28px));
  max-height: 90dvh;
}
dialog::backdrop {
  background: #30302e3b;
  backdrop-filter: blur(2px);
}
.dialog-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}
.dialog-heading h2 {
  font-size: 21px;
  font-weight: 500;
  margin: 0;
}
.dialog-heading .quiet {
  border: 0;
}
.settings-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 12px;
}
.settings-fields label {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.settings-fields select {
  width: 100%;
}
.settings-fields label[for="reasoning"] {
  flex-direction: row;
  justify-content: space-between;
  margin-top: 10px;
}
.settings-fields input[type="range"] {
  padding: 0;
  accent-color: var(--green);
}
.slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--muted);
  margin-top: -8px;
}
.mapping {
  font-family: monospace;
  font-size: 11px;
  line-height: 1.6;
  background: #f0eee8;
  border-radius: 7px;
  padding: 10px;
}
.price-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}
.price-grid > div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  color: var(--muted);
}
.price-grid strong {
  font-size: 23px;
  font-weight: 500;
  color: var(--green);
  display: block;
  margin-top: 7px;
}
.muted {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
  margin: 6px 0;
}
.settings-fields small {
  color: #77756f;
  line-height: 1.7;
}
.settings-help {
  font-size: 12px;
  line-height: 1.8;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-bottom: 0;
}
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 20px;
  background: #30302e;
  color: white;
  border-radius: 9px;
  z-index: 100;
  font-size: 13px;
  max-width: 90vw;
  box-shadow: var(--shadow);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
[hidden] {
  display: none !important;
}
@media (max-width: 1000px) {
  .learning-area {
    padding: 14px 20px;
  }
  .composer-area {
    padding: 10px 20px;
  }
  .question-actions {
    gap: 5px;
  }
}
@media (max-width: 740px) {
  .learning-area {
    padding: 16px;
  }
  .welcome {
    margin: 8px auto 12px;
  }
  .page-empty {
    min-height: 120px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    scroll-behavior: auto !important;
  }
}


.settings-divider {
  border: 0;
  border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  margin: 1rem 0;
}

.byok-block h3 {
  margin: 0 0 0.4rem;
  font-size: 1rem;
}

.byok-note {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  line-height: 1.45;
}

.byok-block label {
  display: grid;
  gap: 0.3rem;
  margin-bottom: 0.65rem;
  font-size: 0.9rem;
}

.byok-block input[type="password"] {
  width: 100%;
  box-sizing: border-box;
  padding: 0.55rem 0.7rem;
  border-radius: 0.55rem;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  background: color-mix(in srgb, Canvas 92%, CanvasText 8%);
  color: inherit;
  font: inherit;
}

.byok-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.35rem;
}

.byok-actions #byok-status {
  font-size: 0.85rem;
}

/* The start screen stays focused on the conversation. The exam opens on selection. */
.welcome-mark { color: #c37356; font-size: 58px; line-height: 1; margin-bottom: 22px; }
.welcome h1 {
  font-family: "Noto Serif Hebrew", "Times New Roman", serif;
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 400;
  letter-spacing: -1.2px;
  line-height: 1.2;
  margin: 0;
}
.workspace:not(.page-expanded) { grid-template-columns: minmax(0, 1fr); }
.tutor-pane:has(#welcome:not([hidden])) { justify-content: center; padding-bottom: 8dvh; }
.tutor-pane:has(#welcome:not([hidden])) .learning-area { flex: 0 0 auto; padding-bottom: 0; }
.tutor-pane:has(#welcome:not([hidden])) .messages:empty { display: none; }
.key-notice { order: 4; background: transparent; border: 0; text-align: center; color: var(--muted); margin: 12px 0 0; padding: 0; }
.composer:focus-within { border-color: #b7afa1; box-shadow: 0 3px 5px #302c2410, 0 0 0 2px #b7afa115; }
.composer textarea:focus-visible { outline: none; }
.composer-tools > div { gap: 8px; min-width: 0; flex: 1; margin-inline-end: 12px; }
.math-button { border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; color: #68645e; white-space: nowrap; }
.model-button { display: flex; align-items: center; gap: 8px; border: 0; color: #68645e; font-size: 12px; padding: 6px 8px; min-width: 0; }
.model-button bdi { min-width: 0; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message.user { margin-inline-start: 34px; }
.message.user .avatar, .message.user .message-label { display: none; }
.message.user .content { padding: 14px 18px; border-radius: 16px; }
.message:not(.user) .avatar { background: transparent; color: var(--green); font-size: 24px; }
.message.system { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #f2f0ea; }
.source-chip { color: #706a61; }
.settings-dialog { box-shadow: 0 25px 100px #302c2429; }
dialog::backdrop { background: #302c243b; }
@media (max-width: 740px) {
  .tutor-pane { padding-top: 60px; }
  .tutor-pane:has(#welcome:not([hidden])) { padding-bottom: 8dvh; }
  .welcome { margin-bottom: 16px; }
  .welcome-mark { font-size: 48px; margin-bottom: 18px; }
  .welcome-prompt { font-size: 14px; }
  .composer-area { padding: 12px 16px 16px; }
  .composer { padding: 12px; border-radius: 18px; }
  .composer-tools > div { gap: 4px; }
  .model-button bdi { max-width: 120px; }
  .message-body { font-size: 15px; }
}
@media (max-height: 620px) {
  .tutor-pane:has(#welcome:not([hidden])) { justify-content: flex-start; padding-bottom: 0; overflow: auto; }
  .tutor-pane:has(#welcome:not([hidden])) .learning-area { overflow: visible; padding-top: 16px; }
  .welcome-mark { font-size: 36px; margin-bottom: 12px; }
  .welcome h1 { font-size: 32px; }
}

.panel-toggle {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0 0 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--muted);
  font: 28px Arial, sans-serif;
  box-shadow: 0 2px 6px #302c2408;
}
.panel-toggle:hover, .quiet:hover { background: #eeece6; filter: none; }
.page-chrome:has(.page-open[hidden]) { display: none; }
@media (max-width: 740px) {
  .panel-toggle { top: 12px; left: 12px; }
}

.reply-waiting {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 6px 12px;
  color: var(--muted);
  font-size: 13px;
}
.waiting-dots { display: flex; align-items: center; gap: 4px; }
.waiting-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
  animation: waiting-pulse 1.2s ease-in-out infinite;
}
.waiting-dots i:nth-child(2) { animation-delay: 0.15s; }
.waiting-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes waiting-pulse {
  0%, 70%, 100% { opacity: 0.3; transform: translateY(0); }
  35% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .waiting-dots i { animation: none; opacity: 0.7; }
}

/* MathPaster formula editor overlay (vendor/mathpaster). */
.mp-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.mp-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.mp-overlay iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  color-scheme: normal;
}
.mp-exit {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 4px 18px #0003;
  z-index: 2;
}

/* Scope pickers (units, questionnaire) sit in the composer toolbar like the other quiet controls. */
.composer-tools > div { flex-wrap: wrap; }
.scope-select {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: 12px;
  color: #68645e;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%2368645e' stroke-width='1.5'%3E%3Cpath d='m1 1 4 4 4-4'/%3E%3C/svg%3E") no-repeat left 8px center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 9px 6px 24px;
  cursor: pointer;
  width: auto;
  max-width: 130px;
}
.scope-select:hover { background-color: #eeece6; }
.scope-select:focus-visible { outline: 2px solid #b7afa180; outline-offset: 1px; }
/* Live preview of $...$ typed in the message box. */
.message-preview {
  margin: 2px 4px 6px;
  padding: 8px 10px;
  border-top: 1px dashed var(--line);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.9;
  max-height: 110px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.message.user .content { white-space: pre-wrap; }

/* ── Polish ─────────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: #d2cdc3 transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #d2cdc3; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #b7afa1; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* One calm focus ring everywhere (replaces the double ring). */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid #b86348;
  outline-offset: 2px;
  box-shadow: none;
}

button { transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.1s, opacity 0.15s; }
button:not(:disabled):active { transform: scale(0.97); }
.composer-tools #send { background: var(--green); color: #fff; }
.composer-tools #send:not(:disabled):hover { background: #a3553c; }
.composer-tools #send:disabled { opacity: 0.55; cursor: progress; }

/* Starter prompts on the empty screen. */
.starters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
  max-width: 560px;
  margin-inline: auto;
}
.starter {
  font-size: 13px;
  color: #68645e;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
}
.starter:hover { background: #eeece6; border-color: #cfc9bd; color: var(--ink); }

/* Composer controls share one height. */
.composer-tools .math-button, .scope-select, .model-button { height: 32px; }
.composer-tools .math-button { display: inline-flex; align-items: center; gap: 6px; }
.model-button { border-radius: 8px; }
.model-button:hover { background: #eeece6; }

/* Messages. */
.message { animation: message-in 0.22s ease-out both; }
@keyframes message-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.message.user .content { width: fit-content; max-width: 100%; background: #efede7; }
.content ol, .content ul { margin: 6px 0 12px; padding-inline-start: 1.5em; }
.content li { margin: 3px 0; }
.content li > p { margin: 0; }
.content h1, .content h2, .content h3 { line-height: 1.4; margin: 16px 0 6px; }
.content h1 { font-size: 1.25em; } .content h2 { font-size: 1.15em; } .content h3 { font-size: 1.05em; }
.content hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
.usage { color: #9a968e; font-size: 11px; margin-top: 6px; }
.notice:not(:empty) { color: #9a4a35; background: #fbeeea; border-radius: 8px; padding: 6px 10px; margin-top: 8px; font-size: 13px; }

/* Catalog note: quiet and compact. */
.message.system { padding: 10px 14px; gap: 10px; }
.message.system .message-label { font-size: 11px; letter-spacing: 0.02em; }
.message.system .content { font-size: 13px; color: #5d5a54; }
.catalog-text summary { color: var(--green); list-style-position: inside; padding: 2px 0; }
.catalog-text[open] summary { margin-bottom: 6px; }
.catalog-text .stem { background: #fbfaf7; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }

/* Settings dialog. */
.settings-dialog { border: 0; border-radius: 18px; }
.settings-dialog select, .settings-dialog input { border-radius: 10px; }

/* Phones: the toolbar scrolls sideways instead of wrapping into rows. */
@media (max-width: 740px) {
  .composer-tools { align-items: flex-end; }
  .composer-tools > div {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
    margin-inline-end: 8px;
  }
  .composer-tools > div::-webkit-scrollbar { display: none; }
  .composer-tools > div { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px); mask-image: linear-gradient(to right, transparent 0, #000 22px); }
  .composer-tools > div > * { flex: none; }
  .starters { margin-top: 16px; }
  .starter { font-size: 12.5px; padding: 6px 12px; }
}
@media (prefers-reduced-motion: reduce) { .message { animation: none; } button { transition: none; } }

/* ── Dialogs and overlays ───────────────────────────────── */
.settings-dialog {
  padding: 0;
  width: min(520px, calc(100% - 24px));
  max-height: min(86dvh, 760px);
  overflow: hidden;
  display: none;
  flex-direction: column;
  background: #faf9f6;
  border-radius: 20px;
  box-shadow: 0 30px 90px #302c2440, 0 2px 8px #302c2410;
}
.settings-dialog[open] { display: flex; animation: dialog-in 0.2s cubic-bezier(0.2, 0.8, 0.3, 1); }
.settings-dialog[open]::backdrop { animation: fade-in 0.2s ease-out; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.sd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--line);
  background: #faf9f6;
  flex: none;
}
.sd-head h2 { font-size: 20px; font-weight: 500; margin: 2px 0 0; }
.sd-close {
  width: 34px; height: 34px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 10px;
  background: transparent; color: var(--muted); font-size: 15px; cursor: pointer;
}
.sd-close:hover { background: #eeece6; color: var(--ink); }
.sd-body {
  overflow-y: auto;
  padding: 16px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sd-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sd-card h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.sd-card .muted { margin: 0; }
.sd-field { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: #5d5a54; }
.sd-field select, .sd-field input[type="password"], .sd-field input[type="number"], .settings-dialog .filter-row input {
  width: 100%;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: #fbfaf7;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 11px;
}
.sd-field select:hover, .sd-field input:hover { border-color: #cfc9bd; }
.sd-field select:focus, .sd-field input:focus { border-color: #b86348; outline: none; box-shadow: 0 0 0 3px #b8634826; }
.sd-row { display: flex; justify-content: space-between; align-items: baseline; }
.sd-row output { color: var(--green); font-weight: 600; }
.settings-dialog .filter-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.settings-dialog .slider-labels { margin-top: -4px; font-size: 11px; }
.settings-dialog .mapping { margin: 2px 0 0; font-size: 11px; color: #6b6760; background: #f4f2ec; border-radius: 8px; }
.settings-dialog .price-grid { margin-top: 0; }
.settings-dialog .price-grid > div { border-radius: 10px; padding: 10px 12px; font-size: 12px; background: #fbfaf7; }
.settings-dialog .price-grid strong { font-size: 20px; margin-top: 4px; text-align: start; }
.sd-fine { color: #8d8a83; font-size: 11.5px; line-height: 1.7; }
.settings-dialog .session-panel-row { font-size: 13px; }
.settings-dialog .session-label { color: var(--muted); }
.settings-dialog #reset-session { align-self: flex-start; }
.settings-dialog .byok-actions { margin-top: 2px; gap: 8px; }
.sd-primary {
  background: var(--green); color: #fff; border: 0; border-radius: 10px;
  padding: 9px 16px; font: inherit; font-size: 13px; cursor: pointer;
}
.sd-primary:hover { background: #a3553c; }
.settings-dialog .quiet { border: 1px solid var(--line); border-radius: 10px; font-size: 13px; padding: 8px 13px; }
.settings-dialog .byok-actions #byok-status { color: #4f7a4a; font-size: 12px; }

/* Formula editor overlay: same dim and blur as the dialogs. */
.mp-overlay { background: #302c2400; transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.22s; }
.mp-overlay.open { background: #302c243b; backdrop-filter: blur(2px); }
.mp-exit { transition: opacity 0.15s, background-color 0.15s; }
.mp-exit:hover { background: #eeece6; }

/* Toast. */
.toast {
  background: #30302e;
  border-radius: 12px;
  box-shadow: 0 10px 34px #302c2438;
  font-size: 13px;
  line-height: 1.5;
  padding: 11px 18px;
  text-align: center;
}
.toast:not([hidden]) { animation: toast-in 0.22s ease-out; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (max-width: 740px) {
  .settings-dialog { width: calc(100% - 16px); max-height: 92dvh; border-radius: 18px; }
  .sd-head { padding: 14px 16px 12px; }
  .sd-body { padding: 12px 14px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .settings-dialog[open], .settings-dialog[open]::backdrop, .toast:not([hidden]) { animation: none; }
}

.settings-dialog input[type="range"] { width: 100%; accent-color: #b86348; padding: 0; margin: 2px 0; }
/* Opening the dialog focuses its first control; do not paint a ring on the close button for that. */
.sd-close:focus:not(:focus-visible) { outline: none; }
.sd-close:focus-visible { outline: 2px solid #b86348; outline-offset: 1px; }
.settings-dialog:focus, .sd-body:focus { outline: none; }

/* ── Exam-pane toggle ───────────────────────────────────── */
.panel-toggle {
  padding: 0;
  font-size: 0;
  border-radius: 12px;
  color: #6f6a62;
  background: #fffffff2;
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 2px #302c240d, 0 4px 14px #302c2410;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.3, 1.4, 0.5, 1), box-shadow 0.2s, color 0.2s, border-color 0.2s, background-color 0.2s;
}
.panel-toggle .chev {
  display: block;
  /* Points right when the pane is closed (open it), left when open (tuck it away). */
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.panel-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.panel-toggle:hover {
  color: var(--green);
  border-color: #dcb7a8;
  background: #fff;
  box-shadow: 0 2px 4px #b863481a, 0 8px 22px #b8634826;
  transform: translateY(-1px);
}
.panel-toggle:hover .chev { transform: translateX(2px); }
.panel-toggle[aria-expanded="true"]:hover .chev { transform: rotate(180deg) translateX(2px); }
.panel-toggle:active { transform: scale(0.93); transition-duration: 0.08s; }
.panel-toggle:focus-visible { outline: 2px solid #b8634899; outline-offset: 3px; }
/* The word in the toggle belongs to sheet mode (narrow or short screens). On a wide screen it is taken out, so
   the chevron is the button's only child and sits exactly in its middle. */
#page-toggle .toggle-text { display: none; }
/* Wide screens: the toggle rides on the pane's edge. Closed, it waits at the screen's corner; open, it sits just
   outside the pane's inner edge and travels there together with the pane (same curve and time as the grid). */
@media (min-width: 1001px) and (min-height: 521px) {
  #page-toggle {
    transition: left 0.5s cubic-bezier(0.22, 0.9, 0.3, 1), transform 0.18s cubic-bezier(0.3, 1.4, 0.5, 1),
      box-shadow 0.2s, color 0.2s, border-color 0.2s, background-color 0.2s;
  }
  #page-toggle[aria-expanded="true"] { left: calc(38% + 10px); }
}
/* A soft ring pulses once when the pane opens by itself (a question just loaded). */
.panel-toggle.ping::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 12px;
  border: 2px solid #b86348;
  animation: toggle-ping 0.9s ease-out;
  pointer-events: none;
}
@keyframes toggle-ping { from { opacity: 0.7; transform: scale(1); } to { opacity: 0; transform: scale(1.7); } }

/* Desktop: the exam pane slides open and shut instead of popping. */
@media (min-width: 1001px) {
  .workspace {
    grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
    transition: grid-template-columns 0.5s cubic-bezier(0.22, 0.9, 0.3, 1);
  }
  .workspace:not(.page-expanded) { grid-template-columns: minmax(0, 1fr) minmax(0, 0fr); }
  .image-pane {
    min-width: 0;
    overflow: hidden;
    transition: opacity 0.35s ease, visibility 0s linear 0s;
  }
  .image-pane[hidden] {
    display: flex !important;
    visibility: hidden;
    opacity: 0;
    padding-inline: 0;
    border-width: 0;
    transition: opacity 0.2s ease, visibility 0s linear 0.5s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .panel-toggle, .panel-toggle .chev, .workspace, .image-pane { transition: none !important; }
  .panel-toggle.ping::after { animation: none; }
}

/* ── Custom dropdowns (composer pickers) ────────────────── */
.dd { position: relative; display: inline-flex; flex: none; }
.dd-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dd-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 10px 0 12px;
  font: inherit;
  font-size: 12px;
  color: #68645e;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.dd-btn:hover { background: #f1efe9; border-color: #d3cdc1; }
.dd-btn[aria-expanded="true"] { background: #fbf1ed; border-color: #dcb7a8; color: var(--green); box-shadow: 0 0 0 3px #b8634218; }
.dd-btn:focus-visible { outline: 2px solid #b8634899; outline-offset: 2px; }
.dd-chev { flex: none; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.dd-btn[aria-expanded="true"] .dd-chev { transform: rotate(180deg); }
.dd-list {
  position: fixed;
  z-index: 70;
  margin: 0;
  padding: 5px;
  list-style: none;
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 14px 40px #302c2426, 0 2px 8px #302c240d;
  font-size: 13px;
  outline: none;
  animation: dd-in-down 0.16s cubic-bezier(0.2, 0.8, 0.3, 1);
  transform-origin: top;
}
.dd-list[data-dir="up"] { animation-name: dd-in-up; transform-origin: bottom; }
.dd-list[hidden] { display: none; }
@keyframes dd-in-down { from { opacity: 0; transform: translateY(-6px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes dd-in-up { from { opacity: 0; transform: translateY(6px) scale(0.97); } to { opacity: 1; transform: none; } }
.dd-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 12px;
  border-radius: 9px;
  color: #4a4742;
  cursor: pointer;
  white-space: nowrap;
}
.dd-item.active { background: #f3f1eb; }
.dd-item[aria-selected="true"] { color: var(--green); font-weight: 600; }
.dd-item[aria-selected="true"]::after {
  content: "";
  width: 12px;
  height: 12px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (prefers-reduced-motion: reduce) { .dd-list { animation: none; } .dd-chev { transition: none; } }

/* ── Chat history ───────────────────────────────────────── */
.top-actions { position: fixed; top: 16px; right: 16px; z-index: 5; display: flex; gap: 8px; }
.top-actions .panel-toggle { position: static; }
.history-backdrop {
  position: fixed; inset: 0; z-index: 40;
  background: #302c2400; transition: background-color 0.3s;
}
.history-backdrop.open { background: #302c243b; backdrop-filter: blur(2px); }
.history-drawer {
  position: fixed; top: 0; bottom: 0; right: 0; z-index: 41;
  width: min(340px, 88vw);
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px 14px 12px;
  background: #faf9f6;
  border-left: 1px solid var(--line);
  box-shadow: -20px 0 60px #302c2426;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.22, 0.9, 0.3, 1);
}
.history-drawer.open { transform: none; }
.history-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 2px 2px; }
.history-head h2 { margin: 0; font-size: 18px; font-weight: 500; }
.history-new {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 14px; border: 0; border-radius: 12px;
  background: var(--green); color: #fff; font: inherit; font-size: 14px; cursor: pointer;
}
.history-new:hover { background: #a3553c; }
.history-search {
  display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 38px;
  border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--muted);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.history-search:focus-within { border-color: #b86348; box-shadow: 0 0 0 3px #b8634226; }
.history-search input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 14px; color: var(--ink);
  appearance: none; -webkit-appearance: none;
}
.history-search input::-webkit-search-cancel-button { display: none; }
.history-list { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -6px; padding: 0 6px 8px; }
.history-group { margin: 14px 8px 6px; font-size: 11px; font-weight: 600; color: #9a968e; letter-spacing: 0.02em; }
.history-empty { margin: 28px 12px; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.8; }
.chat-row {
  position: relative; display: flex; align-items: center; gap: 2px;
  border-radius: 11px; transition: background-color 0.15s;
}
.chat-row:hover, .chat-row:focus-within { background: #f0eee8; }
.chat-row.current { background: #f8ece7; }
.chat-row.current .chat-title { color: var(--green); font-weight: 600; }
.chat-main {
  flex: 1; min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border: 0; background: transparent; font: inherit; font-size: 13.5px; text-align: start; cursor: pointer; color: var(--ink);
  border-radius: 11px;
}
.chat-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-when { flex: none; font-size: 11px; color: #a09b92; }
.chat-actions { display: none; flex: none; gap: 2px; padding-inline-end: 4px; }
.chat-row:hover .chat-actions, .chat-row:focus-within .chat-actions { display: flex; }
.chat-row:hover .chat-when, .chat-row:focus-within .chat-when { display: none; }
.chat-act {
  width: 28px; height: 28px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 8px; background: transparent; color: #8d8a83; cursor: pointer;
}
.chat-act:hover { background: #e4e0d7; color: var(--ink); }
.chat-act.danger:hover { background: #f7dfd8; color: #a3402a; }
.chat-rename {
  flex: 1; margin: 4px 6px; padding: 6px 10px; font: inherit; font-size: 13.5px;
  border: 1px solid #b86348; border-radius: 9px; outline: none; box-shadow: 0 0 0 3px #b8634226; background: #fff;
}
.chat-row.confirming { flex-wrap: wrap; padding: 8px 12px; gap: 8px; background: #fbeeea; }
.chat-confirm-text { flex: 1 1 100%; font-size: 13px; color: #7a3524; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-confirm { padding: 6px 14px; border-radius: 9px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: 12.5px; cursor: pointer; }
.chat-confirm.yes { background: #b3402a; border-color: #b3402a; color: #fff; }
.chat-confirm.yes:hover { background: #9a3623; }
.history-drawer :focus-visible { outline: 2px solid #b8634899; outline-offset: 1px; }
@media (max-width: 740px) {
  .top-actions { top: 12px; right: 12px; }
  .history-drawer { width: min(340px, 92vw); }
}
@media (prefers-reduced-motion: reduce) { .history-drawer, .history-backdrop { transition: none; } }
.history-search input:focus-visible { outline: none; }
.chat-confirm { color: var(--ink); }
.chat-confirm.yes { color: #fff; }
.chat-confirm:hover { background: #f3f1eb; }
.chat-confirm.yes:hover { background: #9a3623; }

/* ── Exam page navigator ────────────────────────────────── */
.page-stage { outline: none; scroll-behavior: smooth; padding-bottom: 64px; }
.page-stage:focus-visible { box-shadow: inset 0 0 0 2px #b8634866; }
.page-stage img { transition: opacity 0.2s ease; }
.page-stage img.turning { opacity: 0.35; }
/* A question image shorter than the pane sits in its middle; a taller one starts at the top and scrolls.
   The top padding keeps the corner buttons off the question. */
.page-stage { display: flex; flex-direction: column; padding-top: 52px; }
.page-stage > img { margin-block: auto; flex: none; }
.page-stage > .page-empty { flex: 1; height: auto; }
.page-nav {
  position: absolute;
  inset-inline: 0;
  bottom: 22px;
  margin-inline: auto;
  width: max-content;
  max-width: calc(100% - 24px);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: #fffffff0;
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 6px 22px #302c2420, 0 1px 3px #302c240d;
  animation: nav-in 0.3s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.page-nav[hidden] { display: none; }
@keyframes nav-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pn-btn {
  width: 34px; height: 34px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: #5d5a54; cursor: pointer;
}
.pn-btn:hover:not(:disabled) { background: #f3ebe7; color: var(--green); }
.pn-btn:disabled { opacity: 0.3; cursor: default; }
.pn-pos { min-width: 96px; text-align: center; font-size: 13px; color: #4a4742; font-variant-numeric: tabular-nums; padding: 0 6px; user-select: none; }
.pn-sep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; }
.pn-chip {
  border: 0; border-radius: 999px; padding: 6px 12px; margin-inline: 2px;
  background: #f8ece7; color: var(--green); font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap;
}
.pn-chip:hover { background: #f3dcd2; }
.pn-chip[hidden], .pn-btn[hidden] { display: none; }
.page-log {
  position: absolute; bottom: calc(100% + 10px); inset-inline-start: 0;
  margin: 0; padding: 5px; list-style: none; min-width: 240px; max-height: 260px; overflow-y: auto;
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 14px 40px #302c2426; animation: dd-in-up 0.16s cubic-bezier(0.2, 0.8, 0.3, 1); transform-origin: bottom;
}
.page-log[hidden] { display: none; }
.pl-item {
  width: 100%; display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
  padding: 8px 12px; border: 0; border-radius: 9px; background: transparent; font: inherit; font-size: 13px;
  color: #4a4742; text-align: start; cursor: pointer; white-space: nowrap;
}
.pl-item:hover { background: #f3f1eb; }
.pl-item[aria-current="true"] { color: var(--green); font-weight: 600; }
.pl-page { color: #9a968e; font-size: 12px; font-weight: 400; }
.pn-btn:focus-visible, .pn-chip:focus-visible, .pl-item:focus-visible { outline: 2px solid #b8634899; outline-offset: 1px; }
@media (max-width: 740px) {
  .page-nav { bottom: 14px; }
  .pn-pos { min-width: 84px; font-size: 12px; }
  .pn-chip { padding: 6px 10px; }
}
@media (prefers-reduced-motion: reduce) { .page-nav, .page-log { animation: none; } .page-stage { scroll-behavior: auto; } .page-stage img { transition: none; } }

/* ── Collection view: every question of a type, in the side pane ── */
.collection { flex: 1; min-height: 0; display: flex; flex-direction: column; border: 1px solid #dcd8cf; border-radius: 8px; background: #e8e5de; overflow: hidden; animation: co-in 0.28s cubic-bezier(0.2, 0.8, 0.3, 1); }
.collection[hidden] { display: none; }
@keyframes co-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.image-pane.show-collection .page-stage,
.image-pane.show-collection .page-nav,
.image-pane.show-collection .page-chrome { display: none; }
.co-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; padding-inline-end: 60px; background: #fffffff2; border-bottom: 1px solid var(--line); flex: none; }
.co-titles { display: flex; flex-direction: column; min-width: 0; }
.co-titles strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-titles small { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.co-actions { display: flex; gap: 6px; flex: none; }
.co-btn { border: 1px solid var(--line); background: #fff; color: #4a4742; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12.5px; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.co-btn:hover { background: #f8ece7; color: var(--green); border-color: #e7c9bd; }
.co-btn[hidden] { display: none; }
.co-list { flex: 1; min-height: 0; overflow: auto; padding: 12px 12px 70px; display: flex; flex-direction: column; gap: 14px; outline: none; scroll-behavior: smooth; }
.co-list:focus-visible { box-shadow: inset 0 0 0 2px #b8634866; }
.co-card { background: #fff; border-radius: 8px; box-shadow: 0 2px 14px #2630200d; overflow: hidden; flex: none; }
.co-card-head { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid #f0ede7; }
.co-num { width: 26px; height: 26px; flex: none; border-radius: 50%; background: #f8ece7; color: var(--green); display: grid; place-items: center; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.co-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.co-info strong { font-size: 13.5px; }
.co-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.co-chip { font-size: 11px; line-height: 1; padding: 3px 7px; border-radius: 999px; background: #f0ede7; color: #5d5a54; }
.co-chip.accent { background: #f8ece7; color: var(--green); }
.co-open { flex: none; border: 0; border-radius: 999px; padding: 7px 12px; background: var(--green); color: #fff; font: inherit; font-size: 12.5px; cursor: pointer; transition: filter 0.15s, transform 0.1s; }
.co-open:hover { filter: brightness(1.08); }
.co-open:active { transform: scale(0.97); }
.co-card img { display: block; width: 100%; height: auto; min-height: 160px; background: #fafaf8; }
.co-more { align-self: center; border: 1px dashed #cfc9bd; background: #fffffff0; color: var(--green); border-radius: 999px; padding: 9px 18px; font: inherit; font-size: 13px; cursor: pointer; }
.co-more:hover { background: #f8ece7; }
.co-note { margin: 4px 8px 0; text-align: center; font-size: 12.5px; color: var(--muted); }
.co-btn:focus-visible, .co-open:focus-visible, .co-more:focus-visible { outline: 2px solid #b8634899; outline-offset: 2px; }
@media (max-width: 700px) { .co-card-head { flex-wrap: wrap; } .co-open { margin-inline-start: auto; } }
@media (prefers-reduced-motion: reduce) { .collection { animation: none; } .co-list { scroll-behavior: auto; } }
.co-section { margin: 8px 4px 0; font-size: 13px; font-weight: 600; color: var(--green); display: flex; align-items: center; gap: 8px; }
.co-section::after { content: ""; flex: 1; height: 1px; background: #d9d3c7; }
.co-section:first-child { margin-top: 0; }

/* ── Chat history additions (owned by chats.js: second line, touch actions, export/import, reset confirm) ── */
.chat-main { align-items: center; }
.chat-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: #8d8a83; }
.chat-sub.match { color: #7a5a4c; }
.history-tools { display: flex; gap: 4px; padding-top: 8px; border-top: 1px solid var(--line); }
.history-tool {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 10px; border: 0; border-radius: 10px; background: transparent;
  font: inherit; font-size: 13px; color: var(--muted); cursor: pointer;
}
.history-tool::before {
  content: ""; width: 15px; height: 15px; flex: none; background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}
.history-tool:first-child { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 11l5 5 5-5M5 20h14'/%3E%3C/svg%3E"); }
.history-tool:nth-child(2) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V5M7 9l5-5 5 5M5 20h14'/%3E%3C/svg%3E"); }
.history-tool:hover { background: var(--light); color: var(--ink); }
.history-list { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.history-list::-webkit-scrollbar { width: 8px; }
.history-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
.history-list::-webkit-scrollbar-button { display: none; }
@media (hover: none), (pointer: coarse) {
  /* No hover on touch screens: keep rename and delete visible, with finger-sized targets. */
  .chat-actions { display: flex; }
  .chat-row .chat-when { display: none; }
  .chat-act { width: 44px; height: 44px; }
  .history-tool { padding: 12px 10px; }
  .history-search input, .chat-rename { font-size: 16px; } /* 16px keeps iOS from zooming in on focus */
}
.reset-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding: 10px 12px; border-radius: 11px; background: color-mix(in srgb, var(--green) 14%, transparent); }
.reset-confirm .chat-confirm-text { white-space: normal; }

/* ══ Stream D: layout, page viewer, collection, a11y, dark mode, print ══════════════════════════════ */
:root {
  --green: #a9583e; /* the accent, a touch darker: 5:1 on white, so it passes as text and under white text */
  --orange: #a9583e;
  --muted: #66635d; /* secondary text, 5.6:1 on the page background */
  --bg: #f8f7f3;
  --top-h: 64px; /* room for the fixed top bar */
  --focus: #a9583e;
}
body { background: var(--bg); }

/* Top bar: history, new chat and settings sit together (top right in RTL); the exam toggle top left. */
.top-actions .settings-btn { position: static; }

/* Focus rings: one solid ring, visible on every surface. */
.panel-toggle:focus-visible, .dd-btn:focus-visible, .pn-btn:focus-visible, .pn-chip:focus-visible, .pl-item:focus-visible,
.co-btn:focus-visible, .co-open:focus-visible, .co-more:focus-visible, .history-drawer :focus-visible, .sd-close:focus-visible,
.scope-select:focus-visible, .starter:focus-visible, .zm-btn:focus-visible, .co-remove:focus-visible, .co-link:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.page-stage:focus-visible, .co-list:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
.composer:focus-within { border-color: #9d958a; }

/* Readable small text (WCAG AA): nothing under 12px, secondary gray at >= 4.5:1. */
.eyebrow, .message-label, .source-chip, .slider-labels, .mapping, .card-meta, .page-empty small, .co-chip,
.history-group, .chat-when, .settings-dialog .slider-labels, .settings-dialog .mapping { font-size: 12px; }
.usage { color: var(--muted); font-size: 12px; }
.eyebrow, .settings-fields small, .page-empty, .history-group, .chat-when, .pl-page, .sd-fine, input::placeholder,
textarea::placeholder { color: var(--muted); }
.sd-fine { font-size: 12px; }
.key-notice { font-size: 12px; }
.math-button, .model-button, .scope-select, .dd-btn, .starter { color: #57544e; }

/* Wide display equations scroll sideways; a soft shadow at the edge says there is more. */
.content .katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 2px;
  background:
    linear-gradient(to right, var(--bg) 30%, transparent) left center / 28px 100% no-repeat local,
    linear-gradient(to left, var(--bg) 30%, transparent) right center / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, #302c2430, transparent) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, #302c2430, transparent) right center / 12px 100% no-repeat scroll;
}
/* Hebrew words inside math (a numerator like "דרך", a unit like קמ"ש) are taller than KaTeX's Latin metrics. */
.content .katex { line-height: 1.35; }
.content .katex .vlist-t2 > .vlist-r:first-child, .content .katex .vlist { overflow: visible; }

/* Page viewer: the page is clickable (opens the zoom view). */
#exam-page { cursor: zoom-in; }
.page-chrome { gap: 8px; }
.page-zoom { padding: 0; border: 1px solid #d5dbc8; cursor: pointer; }
.page-zoom:hover { filter: none; background: #fff; }
.toggle-text { white-space: nowrap; }

/* Collection cards: clear label, every page, done and remove. */
.co-card-head { align-items: flex-start; }
.co-info strong { font-size: 14px; line-height: 1.45; }
.co-subject { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.co-chip { line-height: 1.2; padding: 3px 8px; color: #4f4c46; }
.co-card-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.co-done { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #4f4c46; cursor: pointer; padding: 6px 8px; border-radius: 999px; user-select: none; }
.co-done:hover { background: #f3f1eb; }
.co-done input { width: 17px; height: 17px; margin: 0; accent-color: var(--green); cursor: pointer; }
.co-remove { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--muted); }
.co-remove:hover { background: #f7dfd8; color: #9a3623; filter: none; }
.co-card img { cursor: zoom-in; }
.co-card img.co-cont { border-top: 2px dashed #e3ddd2; }
.co-card.done .co-num { background: #e6efe3; color: #3f6b3a; }
.co-card.done .co-num::before { content: "✓"; }
.co-card.done .co-num { font-size: 0; }
.co-card.done .co-num::before { font-size: 14px; }
.co-card.done img { opacity: 0.55; }
.co-card.done .co-info strong { color: var(--muted); }
.co-bar { display: flex; flex-direction: column; gap: 4px; padding: 7px 12px; background: #fbf4ef; border-bottom: 1px solid #ecd9cf; font-size: 13px; color: #4f4c46; flex: none; }
.co-bar-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.co-bar-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-link { flex: none; background: transparent; border: 0; padding: 4px 6px; color: var(--green); font: inherit; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.co-link:hover { filter: none; color: #8a4530; }
@media (max-width: 700px) {
  .co-card-head { flex-wrap: wrap; }
  .co-card-actions { width: 100%; justify-content: flex-end; }
  .co-open { margin-inline-start: 0; }
}

/* ── Zoom view (a page, large) ─────────────────────────── */
.zoom {
  position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: #1d1c1af2; color: #f3f1ec;
  display: none; flex-direction: column; overflow: hidden;
}
.zoom[open] { display: flex; animation: fade-in 0.18s ease-out; }
.zoom::backdrop { background: transparent; }
html.zoom-open, html.zoom-open body { overflow: hidden; }
.zm-top {
  flex: none; display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
}
.zm-title { font-size: 15px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zm-hint { font-size: 12.5px; color: #c9c5bd; white-space: nowrap; }
.zm-stage { flex: 1; min-height: 0; position: relative; overflow: hidden; touch-action: none; cursor: grab; user-select: none; }
.zm-stage:active { cursor: grabbing; }
.zm-img { position: absolute; top: 0; left: 0; transform-origin: 0 0; max-width: none; background: #fff; box-shadow: 0 10px 40px #0006; border-radius: 2px; }
.zm-bar {
  flex: none; align-self: center; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center;
  margin: 8px 12px max(12px, env(safe-area-inset-bottom)); padding: 5px;
  background: #fffffff2; color: #30302e; border-radius: 999px; box-shadow: 0 8px 30px #0005;
}
.zm-btn {
  width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: transparent; color: #4a4742; text-decoration: none; cursor: pointer;
}
.zm-btn:hover:not(:disabled) { background: #f3ebe7; color: var(--green); filter: none; }
.zm-btn:disabled { opacity: 0.3; cursor: default; }
.zm-btn[hidden], .zm-pos[hidden], .zm-sep[hidden] { display: none; }
.zm-fit { width: auto; min-width: 64px; padding: 0 10px; border-radius: 999px; font-size: 13px; font-variant-numeric: tabular-nums; }
.zm-close { background: var(--green); color: #fff; }
.zm-close:hover:not(:disabled) { background: #8a4530; color: #fff; }
.zm-pos { min-width: 92px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; }
.zm-sep { width: 1px; height: 22px; background: #ddd8cf; margin: 0 4px; }
@media (max-width: 560px) {
  .zm-hint, .zm-link, .zm-sep { display: none !important; }
  .zm-bar { flex-wrap: nowrap; gap: 0; margin-inline: 8px; }
  .zm-pos { min-width: 0; padding: 0 4px; font-size: 12.5px; white-space: nowrap; }
  .zm-fit { min-width: 52px; padding: 0 6px; }
}
@media (prefers-reduced-motion: reduce) { .zoom[open] { animation: none; } }

/* ── Sheet mode: phones, small tablets, short or zoomed-in windows ──────────────────────────────
   The conversation and the message box get the whole screen. The exam pane, when open, is a sheet that
   covers the conversation only: it sits between the top bar and the message box, which stays usable
   (its height comes from pageview.js as --composer-h). Nothing ever covers the message box. */
@media (max-width: 1000px), (max-height: 520px) {
  .workspace, .workspace:not(.page-expanded) { display: flex; flex-direction: column; height: 100dvh; }
  .tutor-pane { flex: 1; min-height: 0; padding-top: var(--top-h); }
  .learning-area { min-height: 0; }
  .composer-area { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .image-pane {
    position: fixed; z-index: 4; top: 0; inset-inline: 0;
    bottom: var(--composer-h, 0px);
    max-height: none; min-height: 0;
    padding: var(--top-h) max(10px, env(safe-area-inset-right)) 6px max(10px, env(safe-area-inset-left));
    border: 0; border-bottom: 1px solid var(--line);
    box-shadow: 0 6px 18px #302c2414;
    animation: sheet-in 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
  }
  .image-pane .page-stage { display: flex; flex: 1; min-height: 0; max-height: none; padding-bottom: 60px; }
  .page-chrome { position: absolute; top: calc(var(--top-h) + 8px); inset-inline-start: 18px; margin: 0; }
  .page-nav { bottom: 14px; }
  /* The exam toggle says what it does, and appears only once there is a page or a worksheet to open. */
  html:not(.has-exam) #page-toggle { display: none; }
  #page-toggle { width: auto; display: inline-flex; align-items: center; gap: 4px; padding: 0 12px 0 8px; }
  #page-toggle .toggle-text { display: inline; font-size: 14px; color: var(--ink); }
  #page-toggle[aria-expanded="true"] { background: var(--green); border-color: var(--green); color: #fff; }
  #page-toggle[aria-expanded="true"] .toggle-text { color: #fff; }
  #page-toggle:hover .chev, #page-toggle[aria-expanded="true"]:hover .chev { transform: none; }
  #page-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
  .co-head { padding-inline-end: 12px; flex-wrap: wrap; }
  .co-actions { flex-wrap: wrap; }
}
@keyframes sheet-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .image-pane { animation: none !important; } }
@media (max-width: 740px) {
  :root { --top-h: 62px; }
  .page-chrome { inset-inline-start: 14px; }
  .composer textarea { min-height: 46px; height: 46px; padding: 6px 4px; }
  .pn-pos { min-width: 0; }
}
/* Short screens (landscape phone, on-screen keyboard up, 200% zoom): a slimmer top bar and message box. */
@media (max-height: 520px) {
  :root { --top-h: 52px; }
  .top-actions, .panel-toggle { top: 8px; }
  #page-toggle { top: 8px; left: 12px; }
  .top-actions { right: 12px; }
  .composer-area { padding: 6px 16px max(8px, env(safe-area-inset-bottom)); }
  .composer { padding: 8px 12px; border-radius: 16px; }
  .composer textarea { min-height: 40px; height: 40px; padding: 4px; --pad-top: 4px; }
  .key-notice { margin-top: 6px; }
  .reply-waiting { padding-bottom: 6px; }
  .page-nav { bottom: 8px; }
  .image-pane .page-stage { padding-bottom: 52px; }
}

/* Message box toolbar on narrow screens: one row that scrolls sideways, with a fade at the far edge as a cue. */
@media (max-width: 740px), (max-height: 520px) {
  .composer-tools > div {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    padding-inline-end: 28px; margin-inline-end: 8px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 36px);
    mask-image: linear-gradient(to right, transparent 0, #000 36px);
  }
  .composer-tools > div::-webkit-scrollbar { display: none; }
  .composer-tools > div > * { flex: none; }
  /* The formula button shows just ƒx here; its name stays for screen readers and in the tooltip. */
  .composer-tools .math-button { font-size: 0; gap: 0; padding: 0 10px; }
  .composer-tools .math-button span { font-size: 17px; }
}

/* Touch screens: every control at least 44px. */
@media (pointer: coarse) {
  .panel-toggle { width: 44px; height: 44px; }
  .composer-tools #send { width: 44px; height: 44px; }
  .composer-tools .math-button, .scope-select, .model-button, .dd-btn { height: 44px; min-width: 44px; }
  .composer-tools > div { gap: 6px; }
  .pn-btn, .sd-close, .chat-act, .co-remove, .page-open { width: 44px; height: 44px; }
  .pn-chip, .co-btn, .co-open, .co-more, .co-link, .starter { min-height: 44px; }
  .co-done { min-height: 44px; }
  .co-done input { width: 22px; height: 22px; }
  .dd-item, .pl-item { min-height: 44px; }
  .chat-main { min-height: 44px; }
  .zm-bar { gap: 2px; }
}
/* Chat rename / delete: with no hover (touch), always shown. */
@media (hover: none) {
  .chat-actions { display: flex; }
  .chat-row .chat-when { display: none; }
}

/* ── Print the conversation (the worksheet has its own print view) ── */
@media print {
  html, body { height: auto !important; overflow: visible !important; background: #fff !important; color: #000; }
  .workspace { display: block !important; height: auto !important; overflow: visible !important; }
  .tutor-pane { display: block !important; padding: 0 !important; overflow: visible !important; }
  .learning-area { overflow: visible !important; height: auto !important; padding: 0 !important; }
  .messages { max-width: none; }
  .message { animation: none !important; break-inside: avoid-page; }
  .composer-area, .image-pane, .top-actions, .panel-toggle, .history-drawer, .history-backdrop, .toast,
  .welcome, .reply-waiting, .zoom, .mp-overlay, dialog, .message button { display: none !important; }
  .content .katex-display { background: none; overflow: visible; }
}

/* ── Dark mode ─────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ink: #ebe8e2;
    --muted: #b2ada4;
    --paper: #26251f;
    --line: #3d3b36;
    --green: #e0907a;
    --orange: #e0907a;
    --light: #2c2a26;
    --bg: #1c1b19;
    --focus: #e0a08a;
  }
  body, .composer-area { background: var(--bg); }
  button { color: #fff; }
  button { background-color: #b7644a; } /* class rules (quiet, chips, icons) still win */
  .composer-tools #send, .sd-primary, .history-new, .co-open { background: #b7644a; color: #fff; }
  .composer-tools #send:not(:disabled):hover, .sd-primary:hover, .history-new:hover { background: #c4715a; }
  .composer, .settings-dialog, .sd-head, .history-drawer, .dd-list, .page-log, .sd-card { background: var(--paper); border-color: var(--line); }
  .settings-dialog, .sd-head, .history-drawer { background: #22211e; }
  .composer:focus-within { border-color: #6a655c; }
  .message.user .content { background: #2e2c28; }
  .message.system, .catalog-text .stem, .mapping, .settings-dialog .mapping, .settings-dialog .price-grid > div,
  .sd-field select, .sd-field input[type="password"], .sd-field input[type="number"], .settings-dialog .filter-row input,
  .history-search { background: #2a2925; border-color: var(--line); color: var(--ink); }
  .message.system .content, .sd-field, .co-chip, .co-done, .co-bar, .dd-item, .pl-item, .pn-pos { color: #d3cfc7; }
  .content pre, .content code { background: #2e2c28; }
  .math-button, .model-button, .scope-select, .dd-btn, .starter, .chat-act, .pn-btn, .sd-close { color: #cfcac1; }
  .quiet:hover, .model-button:hover, .scope-select:hover, .starter:hover, .dd-btn:hover, .dd-item.active, .pl-item:hover,
  .chat-row:hover, .chat-row:focus-within, .chat-act:hover, .sd-close:hover, .pn-btn:hover:not(:disabled), .co-done:hover { background: #34322d; color: var(--ink); }
  .dd-btn[aria-expanded="true"], .chat-row.current, .pn-chip, .co-num, .co-chip.accent { background: #3e2c25; color: #f0a890; border-color: #6e4434; }
  .panel-toggle, .page-open, .page-nav, .co-head, .co-btn { background: #2a2925f2; border-color: var(--line); color: #d3cfc7; }
  .panel-toggle:hover { background: #34322d; border-color: #6e4434; }
  .toast { background: #ebe8e2; color: #1c1b19; }
  .image-pane { background: #22211e; }
  .page-stage, .collection { background: #1a1917; border-color: var(--line); }
  /* Exam pages stay paper-white (they are scans) but a little dimmer, so they do not glare at night. */
  .page-stage img, .co-card img { filter: brightness(0.86) contrast(1.05); }
  .co-card { background: #26251f; box-shadow: none; }
  .co-card-head { border-bottom-color: var(--line); }
  .co-chip { background: #34322d; }
  .co-card.done .co-num { background: #26382a; color: #9fd09a; }
  .co-bar { background: #2f2622; border-color: #5a3a2e; }
  .co-link { color: #f0a890; }
  .co-more { background: #26251f; border-color: #55524b; }
  .co-section::after { background: var(--line); }
  .notice:not(:empty) { background: #3a2520; color: #f0b3a3; }
  .history-backdrop.open, dialog::backdrop, .mp-overlay.open { background: #0008; }
  .chat-confirm { background: #2a2925; color: var(--ink); }
  .chat-row.confirming { background: #3a2520; }
  .chat-confirm-text { color: #f0b3a3; }
  ::-webkit-scrollbar-thumb { background: #4a4740; background-clip: content-box; }
  * { scrollbar-color: #4a4740 transparent; }
  .waiting-dots i { background: var(--green); }
  .zm-bar { background: #2a2925f2; color: var(--ink); }
  .zm-btn { color: #d3cfc7; }
  .zm-btn:hover:not(:disabled) { background: #34322d; color: #f0a890; }
  .zm-close { background: #b7644a; color: #fff; }
  .zm-sep { background: var(--line); }
  .welcome-mark { color: #e0907a; }
  .katex { color: var(--ink); }
}
@media (prefers-color-scheme: dark) and (max-width: 1000px), (prefers-color-scheme: dark) and (max-height: 520px) {
  #page-toggle[aria-expanded="true"] { background: #b7644a; border-color: #b7644a; }
}
/* ══ end of Stream D ════════════════════════════════════════════════════════════════════════════ */

/* ══ Stream C: composer and messages (stop button, counter, message actions) ═══════════════════════ */
.composer-tools #send { user-select: none; -webkit-user-select: none; }
.composer-tools #send.stop { background: var(--ink); color: var(--paper); cursor: pointer; }
.composer-tools #send.stop:hover { background: #000; }
.char-count { margin: 0 6px 4px; font-size: 12px; color: var(--muted); }
.char-count.over { color: #9a4a35; font-weight: 600; }
.message-actions { display: flex; gap: 6px; margin-top: 6px; }
.message-actions:empty { display: none; }
.msg-act {
  font: inherit; font-size: 12px; line-height: 1.4; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer;
}
.msg-act:hover { color: var(--ink); border-color: #cfcac0; }
.msg-act:focus-visible { outline: 2px solid #b7afa1; outline-offset: 1px; }
.msg-act.retry { color: var(--green); border-color: currentColor; font-weight: 600; }
.msg-act.retry:hover { background: #fbf1ed; color: var(--green); }
.message .content .math-inline, .message .content .ltr-run { unicode-bidi: isolate; }
.usage-toggle { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); margin: 8px 0; cursor: pointer; }
@media (prefers-color-scheme: dark) {
  .composer-tools #send.stop { background: #e9e5dc; color: #1f1e1b; }
  .composer-tools #send.stop:hover { background: #fff; }
  .msg-act:hover { border-color: #5a564e; }
  .msg-act.retry:hover { background: #3a2520; }
  .char-count.over { color: #f0a890; }
}
/* ══ end of Stream C ═══════════════════════════════════════════════════════════════════════════════ */

/* ══ Settings dialog: flat sections with dividers; owner options collapsed under "הגדרות מתקדמות" ══════════ */
.settings-dialog { width: min(480px, calc(100% - 24px)); }
.sd-head { padding: 16px 22px 14px; }
.sd-head h2 { margin: 0; font-size: 18px; font-weight: 600; }
.sd-body { padding: 0 22px 14px; gap: 0; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.sd-body::-webkit-scrollbar { width: 8px; }
.sd-body::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
.sd-body::-webkit-scrollbar-button { display: none; }
.sd-sec { display: flex; flex-direction: column; gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.sd-sec h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.sd-hint { margin: 0; font-size: 13px; line-height: 1.65; color: var(--muted); }
.settings-dialog .sd-field { gap: 7px; font-size: 13.5px; color: var(--ink); }
.settings-dialog .sd-row { align-items: center; }
.settings-dialog .sd-row output {
  font-size: 12.5px; font-weight: 600; color: var(--green);
  background: color-mix(in srgb, var(--green) 13%, transparent); border-radius: 999px; padding: 3px 11px;
}
.settings-dialog input[type="range"] { accent-color: var(--green); margin: 4px 0 0; }
.settings-dialog .slider-labels { margin-top: 0; font-size: 12.5px; color: var(--muted); }
.sd-advanced > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 0 12px; font-size: 14px; color: var(--muted); cursor: pointer; list-style: none; border-radius: 8px;
}
.sd-advanced > summary::-webkit-details-marker { display: none; }
.sd-advanced > summary::after {
  content: ""; width: 7px; height: 7px; margin-inline-end: 4px;
  border: solid currentColor; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); transition: transform 0.15s;
}
.sd-advanced[open] > summary::after { transform: rotate(-135deg); }
.sd-advanced > summary:hover { color: var(--ink); }
.sd-advanced > summary:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.sd-adv-body { display: flex; flex-direction: column; gap: 26px; padding: 6px 0 8px; }
.sd-group { display: flex; flex-direction: column; gap: 11px; }
.sd-group h4 { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.settings-dialog .mapping { margin: 0; padding: 8px 11px; font-size: 12px; background: var(--light); color: var(--muted); border-radius: 8px; overflow-wrap: anywhere; }
.settings-dialog .price-grid { gap: 8px; }
.settings-dialog .price-grid > div { border: 0; background: var(--light); padding: 10px 12px; font-size: 12.5px; }
.settings-dialog .price-grid strong { margin-top: 3px; font-size: 16px; font-weight: 600; color: var(--ink); }
.settings-dialog .session-panel-row { font-size: 13.5px; }
.settings-dialog .usage-toggle { margin: 2px 0; font-size: 13.5px; color: var(--ink); }
@media (max-width: 560px) { .sd-body { padding: 0 16px 12px; } .sd-head { padding: 14px 16px 12px; } }
@media (prefers-reduced-motion: reduce) { .sd-advanced > summary::after { transition: none; } }
/* ══ end of settings dialog ═════════════════════════════════════════════════════════════════════════ */

/* ══ Formula panel inside the message box: field, symbol tabs, symbol keys ════════════════════════════ */
.fx { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; padding: 10px 0 2px; border-top: 1px solid var(--line); }
.fx[hidden] { display: none; }
.fx-field {
  display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 4px 14px 4px 5px;
  border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--ink) 3%, transparent);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.fx-field:focus-within { border-color: color-mix(in srgb, var(--green) 60%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 14%, transparent); }
.fx-input {
  order: 1; flex: 1; min-width: 0; display: block; padding: 4px 0; border: 0; outline: 0; background: transparent; color: var(--ink);
  font-size: 19px; --caret-color: var(--green); --selection-background-color: color-mix(in srgb, var(--green) 24%, transparent);
  --selection-color: var(--ink); --contains-highlight-background-color: transparent; --placeholder-color: var(--muted);
  --smart-fence-color: var(--ink);
}
.fx-input:focus, .fx-input:focus-within { outline: 0; }
.fx-input::part(virtual-keyboard-toggle), .fx-input::part(menu-toggle) { display: none; }
.fx-insert {
  order: 0; flex: none; height: 34px; padding: 0 16px; border: 0; border-radius: 9px; cursor: pointer;
  background: var(--green); color: #fff; font: inherit; font-size: 13.5px;
}
.fx-insert:hover { filter: brightness(1.07); }
.fx-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fx-tabs { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.fx-tabs::-webkit-scrollbar { display: none; }
.fx-tab {
  flex: none; padding: 5px 11px; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--muted);
}
.fx-tab:hover { color: var(--ink); }
.fx-tab[aria-selected="true"] { background: var(--light); color: var(--ink); }
.fx-close {
  flex: none; width: 28px; height: 28px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: transparent; color: var(--muted); font-size: 13px; cursor: pointer;
}
.fx-close:hover { background: var(--light); color: var(--ink); }
.fx-keys { display: flex; flex-wrap: wrap; gap: 6px; max-height: 82px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.fx-key {
  flex: none; min-width: 40px; height: 38px; padding: 0 9px; display: grid; place-items: center; direction: ltr;
  border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--ink); cursor: pointer;
  font-size: 15px; line-height: 1; transition: background-color 0.12s, border-color 0.12s, transform 0.08s;
}
.fx-key:hover { background: var(--light); border-color: color-mix(in srgb, var(--ink) 22%, var(--line)); }
.fx-key:active { transform: scale(0.95); }
.fx-key .katex { font-size: 1em; }
.fx-key .amsrm { opacity: 0.55; font-size: 0.82em; } /* the empty-slot squares */
.fx-key:has(.mfrac) .katex { font-size: 0.74em; } /* fractions and binomials are two lines tall */
.fx-tab:focus-visible, .fx-key:focus-visible, .fx-close:focus-visible, .fx-insert:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.math-button[aria-expanded="true"] { background: var(--light); color: var(--ink); }
@media (hover: none), (pointer: coarse) {
  .fx-key { min-width: 44px; height: 44px; } .fx-keys { max-height: 94px; } .fx-close { width: 40px; height: 40px; }
  .fx-insert { height: 40px; } .fx-tab { padding: 9px 12px; }
}
@media (prefers-reduced-motion: reduce) { .fx-key, .fx-field { transition: none; } }
@media (hover: none) { .fx-key:hover { background: transparent; border-color: var(--line); } } /* no stuck hover after a tap */
@media (prefers-color-scheme: dark) { .fx-insert { background: #b7644a; } }
@media print { .fx { display: none !important; } }
/* ══ end of formula panel ═════════════════════════════════════════════════════════════════════ */
.toast { cursor: pointer; } /* a click dismisses it */

/* ── Guide ──────────────────────────────────────────────── */
.guide-dialog { width: min(760px, calc(100% - 24px)); max-height: min(88dvh, 860px); }
.guide-dialog .sd-body { padding: 18px 22px 22px; gap: 0; }
.gd-lead { margin: 0 0 16px; font-size: 14.5px; line-height: 1.7; color: var(--ink); }
.gd-sec { border-top: 1px solid var(--line); padding: 4px 0 2px; }
.gd-sec > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0; cursor: pointer; list-style: none;
  font-size: 15px; font-weight: 600; color: var(--ink);
}
.gd-sec > summary::-webkit-details-marker { display: none; }
.gd-sec > summary::after {
  content: ""; width: 7px; height: 7px; flex: none; margin-inline-end: 4px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform 0.15s ease;
}
.gd-sec[open] > summary::after { transform: rotate(-135deg); }
.gd-sec > summary:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 6px; }
.gd-sec > :not(summary) { margin-bottom: 14px; }
.gd-asks { margin: 0; display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 10px 16px; align-items: start; }
.gd-asks dt { font-size: 13px; color: var(--muted); padding-top: 7px; }
.gd-asks dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; min-width: 0; }
.gd-asks .starter, .gd-tags .starter { text-align: start; }
.gd-note { font-size: 12.5px; color: var(--muted); flex-basis: 100%; }
.gd-list { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; line-height: 1.7; color: var(--ink); }
.gd-search { margin: 0 0 12px; }
.gd-tags { display: flex; flex-direction: column; gap: 14px; }
.gd-subject { display: flex; flex-direction: column; gap: 8px; padding-bottom: 14px; border-bottom: 1px dashed var(--line); }
.gd-subject:last-of-type { border-bottom: 0; padding-bottom: 0; }
.gd-subject h3 { margin: 0; }
.gd-subject h3 .starter { font-size: 14px; font-weight: 600; color: var(--ink); border-color: #cfc9bd; }
.gd-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gd-kind { font-size: 12px; color: var(--muted); min-width: 62px; }
.gd-tag { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 11px; font-size: 12.5px; }
.gd-count { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .gd-asks { grid-template-columns: 1fr; gap: 4px; }
  .gd-asks dt { padding-top: 8px; }
  .gd-kind { min-width: 0; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { .gd-sec > summary::after { transition: none; } }
@media print { .guide-dialog { display: none !important; } }

/* ── Scrollbars on the right ────────────────────────────── */
/* In a right-to-left page a scrolling box puts its scrollbar on the left. The chat, the dialogs and the chat list
   scroll as left-to-right boxes so the bar is on the right, and their content is turned back to right-to-left. */
.learning-area, .sd-body, .history-list { direction: ltr; }
.learning-area > *, .sd-body > *, .history-list > * { direction: rtl; }

/* ── The caret of the message box ───────────────────────── */
/* An empty box used to take its direction from its (missing) text, which put the caret on the left. While the
   placeholder shows, the box follows the page, so the caret waits on the right where Hebrew starts. */
.composer textarea:placeholder-shown { unicode-bidi: normal; }
/* The caret is the accent colour and breathes (a slow fade) instead of blinking on and off. */
@property --caret-a { syntax: "<number>"; inherits: false; initial-value: 1; }
input, textarea { caret-color: var(--green); }
.composer textarea { caret-animation: manual; animation: caret-breathe 1.3s ease-in-out infinite; }
@keyframes caret-breathe {
  0%, 100% { --caret-a: 1; caret-color: var(--green); }
  50% { --caret-a: 0.28; caret-color: color-mix(in srgb, var(--green) 35%, transparent); }
}
/* Empty and focused: instead of the browser's hairline, a tapered stroke with a soft glow stands where the first
   letter will go. It is drawn as the box's background, so nothing has to follow the caret; once there is text,
   the browser's own caret (same colour, same breathing) takes over. */
.composer textarea:focus:placeholder-shown {
  caret-color: transparent !important;
  background-image:
    linear-gradient(to bottom, transparent, rgb(from var(--green) r g b / var(--caret-a)) 24%,
      rgb(from var(--green) r g b / var(--caret-a)) 76%, transparent),
    radial-gradient(closest-side, rgb(from var(--green) r g b / calc(var(--caret-a) * 0.4)), transparent);
  background-repeat: no-repeat;
  background-size: 2.5px 26px, 18px 36px;
  background-position: right 0 top calc(var(--pad-top, 6px) - 0.5px), right -7.75px top calc(var(--pad-top, 6px) - 5.5px);
}
@media (prefers-reduced-motion: reduce) {
  .composer textarea { animation: none; caret-animation: auto; }
}

/* ── Accounts (hosted app) ──────────────────────────────── */
.signin {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px;
  background: var(--bg, #f7f5f0);
}
.signin-card { max-width: 420px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.signin-card h1 { margin: 0; font-size: 28px; font-weight: 500; letter-spacing: -0.5px; color: var(--ink); }
.signin-card p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--muted); }
.signin-card small { font-size: 12.5px; color: var(--muted); }
.signin-google {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; padding: 11px 22px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink);
  font-size: 15px; font-weight: 500; cursor: pointer; box-shadow: 0 2px 10px #302c2412;
}
.signin-google:hover { border-color: #cfc9bd; filter: none; }
.signin-google:disabled { opacity: 0.6; cursor: progress; }
.signin-status { min-height: 1.4em; font-size: 13.5px; }
/* Online the tutor uses the service's own key, so the bring-your-own-key and model settings are not shown. */
.hosted .sd-advanced { display: none; }