/* ── Theme variables ────────────────────────────────────────────────────────── */
:root {
  color-scheme: dark;
  /* Surfaces */
  --bg: #0f0f12;
  --bg-panel: #131318;
  --bg-surf: #17171e;
  --bg-raise: #1e1e27;
  --bg-input: #23232d;
  --bg-hover: #2a2a36;
  --card-bg: rgba(255, 255, 255, 0.03);
  /* Borders */
  --bd: #2a2a35;
  --bd-sub: #1e1e28;
  --bd-str: #36364a;
  /* Text */
  --tx: #e8e8f2;
  --tx2: #8a8aa8;
  --tx3: #56567a;
  --tx4: #38385a;
  /* Accent indigo */
  --ac: #6366f1;
  --ac-dim: #1e1e3a;
  --ac-bd: #4346a8;
  --ac-tx: #a5b4fc;
  /* Action green */
  --act-bg: #1a2e14;
  --act-h: #223d1a;
  --act-tx: #6eba52;
  /* Danger red */
  --dn-bg: #2a1414;
  --dn-h: #381c1c;
  --dn-tx: #d07070;
  /* Scrollbar */
  --sb: #2a2a38;
  /* Selection banner */
  --sel-bg: #16162a;
  --sel-bd: #4346a8;
  --sel-tx: #a5b4fc;
  --sel-g-bg: #1a2e14;
  --sel-g-bd: #2c4226;
  --sel-g-tx: #6eba52;
  --sel-r-bg: #2a1414;
  --sel-r-bd: #6a2828;
  --sel-r-tx: #d07070;
  /* SQRR indigo-toned */
  --sq-bg: #16162a;
  --sq-bd: #2e2e5a;
  --sq-tx: #9090d8;
  --sq-act: #1e1e3a;
  /* User message bubbles */
  --usr-bg: #1a1a2e;
  --usr-bd: #2e2e50;
  --usr-tx: #a0a0e8;
  /* Image context tag */
  --img-bg: #221836;
  --img-tx: #b06ad4;
  /* Score badges */
  --score-rel: #3a8a4a;
  --score-par: #8a7a2a;
  --score-irr: #8a3a3a;
  --score-un: #38384a;
  --score-un-bd: #58586a;
  /* Closed overlay */
  --ov-bg: #08080f;
  --ov-tx: #404060;
  --ov-sm: #25253a;
  /* Modal overlay */
  --modal-scrim: rgba(0, 0, 0, 0.72);
  /* Accent gradient + secondary accent */
  --ac2: #8b5cf6;
  --grad-ac: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  /* Radii scale */
  --r-s: 6px;
  --r-m: 10px;
  --r-l: 14px;
  --r-xl: 18px;
  /* Elevation */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 10px rgba(6, 6, 18, 0.35);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(6, 6, 18, 0.45);
  --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.4), 0 24px 64px rgba(4, 4, 12, 0.6);
  /* Warn (amber) — selection badge, loss-of-progress notes */
  --warn-bg: #3a2800;
  --warn-bd: #a06000;
  --warn-tx: #f0a020;
  /* Select chevrons (theme-adaptive + always-on-dark variant) */
  --select-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%238a8aa8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  --select-arrow-on-dark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%238a8aa8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

html:has(body.light) {
  color-scheme: light;
}

body.light {
  color-scheme: light;
  --bg: #f5f5f8;
  --bg-panel: #fafafd;
  --bg-surf: #ffffff;
  --bg-raise: #ededf2;
  --bg-input: #e8e8ee;
  --bg-hover: #dcdce8;
  --card-bg: var(--bg-raise);
  --bd: #cdcdd8;
  --bd-sub: #e0e0ea;
  --bd-str: #b0b0c0;
  --tx: #18181f;
  --tx2: #606075;
  --tx3: #8888a0;
  --tx4: #b8b8cc;
  --ac: #6366f1;
  --ac-dim: #eef2ff;
  --ac-bd: #c7d2fe;
  --ac-tx: #4338ca;
  --act-bg: #eaf5e0;
  --act-h: #d8ecc8;
  --act-tx: #356025;
  --dn-bg: #ffe8e8;
  --dn-h: #ffd4d4;
  --dn-tx: #c03838;
  --sb: #c0c0cc;
  --sel-bg: #eef2ff;
  --sel-bd: #c7d2fe;
  --sel-tx: #4338ca;
  --sel-g-bg: #e8f5e8;
  --sel-g-bd: #a0d0a0;
  --sel-g-tx: #306030;
  --sel-r-bg: #ffe8e8;
  --sel-r-bd: #e0a0a0;
  --sel-r-tx: #c03838;
  --sq-bg: #eeeefc;
  --sq-bd: #c8c8f0;
  --sq-tx: #4040a0;
  --sq-act: #d8d8f8;
  --usr-bg: #eeeeff;
  --usr-bd: #c0c0ee;
  --usr-tx: #4040b0;
  --img-bg: #eee0f8;
  --img-tx: #7830a0;
  --score-rel: #4a9a5a;
  --score-par: #9a8a3a;
  --score-irr: #9a4a4a;
  --score-un: #a0a0b8;
  --score-un-bd: #808098;
  --ov-bg: #eeeef8;
  --ov-tx: #7070a0;
  --ov-sm: #a0a0c8;
  --modal-scrim: rgba(0, 0, 0, 0.35);
  --shadow-1: 0 1px 2px rgba(30, 30, 60, 0.06), 0 2px 10px rgba(30, 30, 60, 0.07);
  --shadow-2: 0 2px 6px rgba(30, 30, 60, 0.08), 0 8px 24px rgba(30, 30, 60, 0.1);
  --shadow-3: 0 8px 24px rgba(30, 30, 60, 0.14), 0 24px 64px rgba(30, 30, 60, 0.18);
  --warn-bg: #fff8e6;
  --warn-bd: #c07800;
  --warn-tx: #8a5000;
  --select-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23606075' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* ── Reset & base ─────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}
input,
textarea {
  caret-color: var(--tx);
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--tx);
  font-family:
    'Inter',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

/* Unified scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--sb) transparent;
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--sb);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--bd-str);
}

/* Unified keyboard focus */
:focus-visible {
  outline: 2px solid var(--ac);
  outline-offset: 2px;
}

/* ── Selects — one shared recipe (per-context rules only carry deltas) ────── */
select {
  appearance: none;
  font-family: inherit;
  background-color: var(--bg-input);
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: right 9px center;
  color: var(--tx);
  border: 1px solid var(--bd);
  border-radius: 8px;
  padding: 4px 26px 4px 8px;
  font-size: 13px;
  cursor: pointer;
  outline: none;
  transition:
    border-color 0.15s,
    background-color 0.15s,
    box-shadow 0.15s;
}
select:hover {
  border-color: var(--bd-str);
}
select:focus {
  border-color: var(--ac);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

/* ── App shell ────────────────────────────────────────────────────────────── */
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* ── Toolbar ──────────────────────────────────────────────────────────────── */
.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--bg-raise);
  border-bottom: 1px solid var(--bd);
  flex-shrink: 0;
  min-height: 44px;
}

.toolbar button {
  background: transparent;
  color: var(--tx2);
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1.4;
  font-family: inherit;
  transition:
    background 0.15s,
    color 0.15s;
}
.toolbar button:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--tx);
}
.toolbar button:disabled {
  opacity: 0.35;
  cursor: default;
}

.toolbar-sep {
  width: 1px;
  height: 22px;
  background: var(--bd);
  flex-shrink: 0;
}

.toolbar-sep--right {
  margin-left: auto;
}

/* ── View tabs (shared top bar — same outer height as .toolbar: 44px + 1px) ── */
.view-tabs {
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 0 12px; /* vertical padding lives in the tabs so the underline reaches the bar edge */
  background: var(--bg-raise);
  border-bottom: 1px solid var(--bd);
  flex-shrink: 0;
  min-height: 44px;
}
.view-tab {
  display: flex;
  align-items: center;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0 14px;
  color: var(--tx3);
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition:
    color 0.15s,
    border-color 0.15s;
}
.view-tab:hover {
  color: var(--tx2);
}
.view-tab.active {
  color: var(--tx);
  border-bottom-color: var(--ac);
}
.view-tab:focus-visible {
  outline: 2px solid var(--ac);
  outline-offset: -2px;
}
/* "Coming soon" badge on a not-yet-shipped tab (e.g. Eigene Inhalte). */
.view-tab-soon {
  margin-left: 7px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--ac-dim);
  border: 1px solid var(--ac-bd);
  color: var(--ac-tx);
}
/* Coming-soon placeholder shown in the Eigene Inhalte panel (#bv-own). */
.bv-own-soon {
  margin: auto;
  max-width: 340px;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
}
.bv-own-soon-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--tx2);
}
.bv-own-soon-hint {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--tx3);
}

/* ── Material type chips (Bücher view, Materialien tab) ────────────────────── */
#bv-material-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.bv-chip {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--bd-sub);
  background: var(--bg-surf);
  color: var(--tx3);
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}
.bv-chip:hover {
  color: var(--tx);
  border-color: var(--bd-str);
}
.bv-chip.active {
  background: var(--ac-dim);
  border-color: var(--ac-bd);
  color: var(--ac-tx);
}

/* ── Eigene Inhalte studio (buecher-own.ts) ─────────────────────────────────── */
#bv-own {
  flex: 1;
  justify-content: center;
  overflow-y: auto;
}
.bv-own-wrap {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: min(720px, 100%);
  padding: 28px 32px 40px;
}
.bv-own-step-head h2 {
  margin: 0 0 6px;
  font-size: 20px;
}
.bv-own-step-head p {
  margin: 0;
  font-size: 13px;
  color: var(--tx3);
}
.bv-own-sources {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.bv-own-source-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 16px;
  background: var(--bg-surf);
  border: 1px solid var(--bd-sub);
  border-radius: var(--r-m);
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.bv-own-source-card:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--ac-bd);
}
.bv-own-source-card:disabled {
  opacity: 0.45;
  cursor: default;
}
.bv-own-source-icon {
  font-size: 22px;
}
.bv-own-source-icon svg {
  width: 22px;
  height: 22px;
  color: var(--tx2);
}
.bv-own-source-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--tx);
}
.bv-own-source-desc {
  font-size: 12px;
  color: var(--tx3);
  line-height: 1.4;
}
.bv-own-editor {
  min-height: 320px;
  resize: vertical;
  padding: 14px 16px;
  background: var(--bg-input);
  color: var(--tx);
  border: 1px solid var(--bd);
  border-radius: var(--r-m);
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.6;
}
.bv-own-editor:focus {
  outline: none;
  border-color: var(--ac-bd);
}
.bv-own-publish-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bv-own-desc {
  min-height: 64px;
  resize: vertical;
  padding: 10px 12px;
  background: var(--bg-input);
  color: var(--tx);
  border: 1px solid var(--bd);
  border-radius: var(--r-m);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
}
.bv-own-desc:focus {
  outline: none;
  border-color: var(--ac-bd);
}
.bv-own-step-footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.bv-own-cardpick {
  max-height: 340px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bv-own-cardpick h3 {
  margin: 10px 0 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tx3);
}
.bv-own-cardpick-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--tx);
  line-height: 1.4;
}
.bv-own-cardpick-row:hover {
  background: var(--bg-hover);
}
.bv-own-cardpick-row input {
  margin-top: 2px;
  flex-shrink: 0;
}

/* ── Selection badge (sub-toolbar) ──────────────────────────────────── */
#selection-badge {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  background: var(--warn-bg);
  border: 1px solid var(--warn-bd);
  border-radius: 999px;
  padding: 2px 4px 2px 9px;
  flex-shrink: 0;
}
/* BR-14: the session's homework context — click reopens the brief */
#hw-pill {
  margin-left: auto;
  flex-shrink: 0;
  padding: 3px 12px;
  border: 1px solid var(--ac-bd);
  border-radius: 999px;
  background: var(--ac-dim);
  color: var(--ac-tx);
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
#hw-pill:hover {
  background: var(--grad-ac);
  color: #fff;
}
#selection-badge:not([style*='none']) ~ #hw-pill {
  margin-left: 8px; /* badge already claimed the auto gap */
}
.hw-brief-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--tx);
  white-space: pre-wrap;
}
.hw-brief-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 12.5px;
  color: var(--tx3);
}
.hw-brief-steps {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: var(--bg-raise);
  border: 1px solid var(--bd-sub);
  border-radius: var(--r-m);
}
.hw-brief-stepof {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tx3);
}
.hw-brief-seq {
  font-size: 13px;
  color: var(--tx2);
}
.hw-brief-current {
  font-weight: 700;
  color: var(--ac-tx);
}
#selection-badge-label {
  font-size: 11px;
  color: var(--warn-tx);
  font-weight: 600;
  white-space: nowrap;
}
#selection-badge-jump,
#selection-badge-clear {
  background: none;
  border: none;
  color: var(--warn-tx);
  cursor: pointer;
  font-size: 13px;
  padding: 0 4px;
  line-height: 1;
  border-radius: 6px;
  transition: background 0.12s;
}
#selection-badge-jump:hover,
#selection-badge-clear:hover {
  background: rgba(160, 96, 0, 0.18);
}

/* ── Top-right action icons + settings popover ────────────────────────────── */
#top-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
#top-actions .top-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: #8a8aa8;
  padding: 7px;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
#top-actions .top-icon-btn:hover {
  background: #2a2a36;
  color: #e8e8f2;
}
.top-menu-wrap,
.top-menu-row-wrap {
  position: relative;
}
.top-menu {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 220px;
  flex-direction: column;
  gap: 2px;
  background: var(--bg-surf);
  border: 1px solid var(--bd-sub);
  border-radius: 12px;
  padding: 6px;
  box-shadow: var(--shadow-2);
  z-index: 1300;
}
.top-menu.open {
  display: flex;
  animation: cselect-in 0.15s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.top-menu--sub {
  top: -6px;
  right: calc(100% + 16px);
  min-width: 180px;
}
#top-settings-menu .top-menu-heading,
#agent-settings-menu .top-menu-heading {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tx);
  padding: 8px 12px 6px;
}
#top-settings-menu .top-menu-row,
#agent-settings-menu .top-menu-row,
#agent-settings-menu .top-menu--sub button,
#top-lang-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  background: transparent;
  color: var(--tx2);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  line-height: 1.4;
  transition:
    background 0.15s,
    color 0.15s;
}
#top-settings-menu .top-menu-row:hover,
#agent-settings-menu .top-menu-row:hover,
#agent-settings-menu .top-menu--sub button:hover,
#top-lang-menu button:hover {
  background: var(--bg-hover);
  color: var(--tx);
}
#agent-settings-menu .top-menu--sub button.active {
  color: var(--tx);
  background: var(--ac-dim);
}
/* Body-level popover: fixed position set by JS from the gear button's rect,
   so #agent-col's overflow can't clip it and submenus fly out leftward
   exactly like the system settings menu. */
#agent-settings-menu {
  position: fixed;
  right: auto;
}
#agent-settings-menu .top-menu-value {
  font-size: 12.5px;
  color: var(--tx3);
}
#top-settings-menu .fi,
#agent-settings-menu .fi,
#top-lang-menu .fi {
  font-size: 14px;
  line-height: 1;
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}

/* Toggle switch (theme) */
.switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 18px;
  border-radius: 999px;
  background: var(--bg-hover);
  flex-shrink: 0;
  transition: background 0.2s;
}
.switch .switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s;
}
.switch.on {
  background: var(--ac);
}
.switch.on .switch-knob {
  transform: translateX(16px);
}

/* Top logo */
#top-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
#logo-mark {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--grad-ac);
  box-shadow: 0 0 14px rgba(99, 102, 241, 0.45);
  flex-shrink: 0;
}

/* Top nav buttons */
/* ── Main row: home column + content ──────────────────────────────────────── */
#main-row {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}
/* Row of [active view | shared voice panel]; views are toggled via display */
#main-content {
  flex: 1;
  display: flex;
  flex-direction: row;
  min-width: 0;
  overflow: hidden;
}
#main-content > .panels {
  order: 1;
}
#main-content > #buecher-view {
  order: 2;
}
#main-content > #classroom-view {
  order: 3;
}
#main-content > #voice-panel {
  order: 10;
}

/* ── Classroom view ───────────────────────────────────────────────────────── */
#classroom-view {
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}
/* Master-detail: a fixed left column + the content pane filling the rest */
.cls-body {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}
.cls-side {
  width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 14px;
  border-right: 1px solid var(--bd);
  overflow-y: auto;
}
.cls-side-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--tx2);
}
.cls-side-hint {
  margin: 0;
  font-size: 12px;
  color: var(--tx4);
  line-height: 1.5;
}
.cls-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 16px 20px 20px;
}

/* Subject column (Fächer master list) */
.cls-subj-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cls-subj-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  background: var(--bg-surf);
  border: 1px solid var(--bd-sub);
  border-left: 3px solid var(--chip-color, var(--ac));
  border-radius: var(--r-m);
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.cls-subj-item:hover {
  background: var(--bg-hover);
}
.cls-subj-item.active {
  background: var(--ac-dim);
  border-color: var(--ac-bd);
  border-left-color: var(--chip-color, var(--ac));
}
.cls-subj-item-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.cls-subj-item-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tx);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cls-subj-item-next {
  font-size: 11px;
  color: var(--tx3);
}

/* ── Timetable (BR-01) ─────────────────────────────────────────────────────── */
.cls-tt-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  padding-bottom: 10px;
}
.cls-tt-range {
  font-size: 12.5px;
  color: var(--tx3);
}
.cls-tt-gear {
  margin-left: auto;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bd);
  border-radius: 7px;
  background: var(--bg-raise);
  color: var(--tx2);
  cursor: pointer;
}
.cls-tt-gear:hover {
  border-color: var(--ac-bd);
  color: var(--ac-tx);
}
.cls-tt-nav {
  display: flex;
  gap: 6px;
}
.cls-tt-nav button {
  min-width: 30px;
  padding: 4px 10px;
  border: 1px solid var(--bd);
  border-radius: 7px;
  background: var(--bg-raise);
  color: var(--tx2);
  font-size: 13px;
  cursor: pointer;
}
.cls-tt-nav button:hover:not(:disabled) {
  border-color: var(--ac-bd);
  color: var(--ac-tx);
}
.cls-tt-nav button:disabled {
  opacity: 0.45;
  cursor: default;
}
.cls-tt-grid {
  display: grid;
  gap: 4px;
  flex: 1;
  min-height: 0;
}
.cls-tt-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 4px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tx2);
  cursor: pointer;
  user-select: none;
}
.cls-tt-day small {
  font-size: 10.5px;
  font-weight: 400;
  color: var(--tx4);
}
.cls-tt-day:hover {
  background: var(--bg-hover);
}
.cls-tt-day.today {
  background: var(--ac-dim);
  border: 1px solid var(--ac-bd);
  color: var(--ac-tx);
}
.cls-tt-day.holiday {
  opacity: 0.4;
  text-decoration: line-through;
}
.cls-tt-time {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 1px;
  padding: 4px 8px;
  font-size: 12px;
  color: var(--tx3);
}
.cls-tt-time small {
  font-size: 9.5px;
  color: var(--tx4);
  white-space: nowrap;
}
.cls-tt-cell {
  position: relative;
  min-height: 44px;
  border: 1px solid var(--bd-sub);
  border-radius: 8px;
  background: var(--bg-surf);
  cursor: pointer;
  display: flex;
  padding: 3px;
}
.cls-tt-cell:hover {
  border-color: var(--ac-bd);
}
.cls-tt-cell.drop-target {
  border-color: var(--ac);
  background: var(--ac-dim);
}
.cls-tt-cell-edit {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 22px;
  height: 22px;
  display: none;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bd);
  border-radius: 6px;
  background: var(--bg-raise);
  color: var(--tx2);
  font-size: 12px;
  cursor: pointer;
  z-index: 1;
}
.cls-tt-cell:hover .cls-tt-cell-edit {
  display: flex;
}
.cls-tt-cell-edit:hover {
  border-color: var(--ac-bd);
  color: var(--ac-tx);
}
.cls-tt-chip.dragging {
  opacity: 0.4;
}
.cls-tt-cell.today {
  background: color-mix(in srgb, var(--ac-dim) 40%, var(--bg-surf));
}
.cls-tt-cell.holiday {
  background: transparent;
  border-style: dashed;
  opacity: 0.45;
  pointer-events: none;
}
@keyframes cls-now-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 1px var(--ac-bd);
  }
  50% {
    box-shadow: 0 0 0 3px var(--ac-bd);
  }
}
.cls-tt-cell.now {
  animation: cls-now-pulse 2.4s ease-in-out infinite;
}
.cls-tt-chip {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--chip-color) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--chip-color) 55%, transparent);
  overflow: hidden;
}
.cls-tt-abbrev {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--chip-color);
  letter-spacing: 0.03em;
}
.cls-tt-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--chip-color);
}
.cls-tt-icon svg {
  width: 17px;
  height: 17px;
}
.cls-tt-chip-name {
  max-width: 100%;
  padding: 0 5px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--tx2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cls-subject-abbrev svg {
  width: 17px;
  height: 17px;
}
/* Long-break separator row (spans all columns, same across days) */
.cls-tt-break {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 6px;
}
.cls-tt-break::before,
.cls-tt-break::after {
  content: '';
  flex: 1;
  border-top: 2px dashed var(--bd-str);
}
.cls-tt-break span {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tx4);
  white-space: nowrap;
}
.cls-tt-chip--exam {
  border-width: 2px;
  border-style: solid;
}
.cls-tt-exam-tag {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--dn-tx);
  white-space: nowrap;
}

/* Structure checkbox in the upload modal */
.bv-toc-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--tx2);
  line-height: 1.4;
  cursor: pointer;
}
.bv-toc-row input {
  margin-top: 2px;
  flex-shrink: 0;
}

/* Danger variant for destructive confirm buttons (also used in Bücher) */
.bv-btn--danger {
  border-color: var(--dn-tx);
  color: var(--dn-tx);
}
.bv-btn--danger:hover:not(:disabled) {
  background: var(--dn-tx);
  color: #fff;
}

/* ── Subject lifecycle (modal chips, +Fach, hard delete) ───────────────────── */
.cls-tt-subject-chip {
  position: relative;
  display: inline-flex;
}
.cls-tt-subject-x {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 17px;
  height: 17px;
  display: none;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bd);
  border-radius: 50%;
  background: var(--bg-raise);
  color: var(--tx3);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}
.cls-tt-subject-chip:hover .cls-tt-subject-x {
  display: flex;
}
.cls-tt-subject-x:hover {
  border-color: var(--dn-tx);
  color: var(--dn-tx);
}
.cls-subj-add {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
}
.cls-subj-add-toggle {
  padding: 7px 10px;
  border: 1px dashed var(--bd-str);
  border-radius: var(--r-m);
  background: transparent;
  color: var(--tx3);
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}
.cls-subj-add-toggle:hover {
  color: var(--ac-tx);
  border-color: var(--ac-bd);
}
.cls-subj-add-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cls-space-del {
  margin-left: auto;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bd-sub);
  border-radius: 7px;
  background: transparent;
  color: var(--tx4);
  cursor: pointer;
}
.cls-space-del:hover {
  border-color: var(--dn-tx);
  color: var(--dn-tx);
}
.cls-del-lead {
  margin: 0;
  font-size: 13px;
  color: var(--tx2);
}
.cls-del-list {
  margin: 0;
  padding-left: 18px;
  font-size: 12.5px;
  color: var(--tx3);
  line-height: 1.7;
}

/* ── Trainer (BR-09, Phase6-style review) ──────────────────────────────────── */
#trainer-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
#trainer-active,
#trainer-done {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Fill the panel so the answer flex-fills and the reveal button pins to the
   bottom — matches the SQ3R recite phase (fixed header → flex input → button). */
#trainer-active {
  flex: 1;
  min-height: 0;
}
#trainer-progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#trainer-progress {
  font-size: 12.5px;
  color: var(--tx3);
  font-variant-numeric: tabular-nums;
}
.trainer-box-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 10px;
  background: var(--ac-dim);
  border: 1px solid var(--ac-bd);
  color: var(--ac-tx);
}
#trainer-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}
#trainer-source {
  flex: 1;
  min-width: 0;
  font-size: 11.5px;
  color: var(--tx4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trainer-page-btn {
  flex-shrink: 0;
  padding: 3px 10px;
  border-radius: 7px;
  border: 1px solid var(--bd);
  background: var(--bg-raise);
  color: var(--tx2);
  font-size: 11.5px;
  font-family: inherit;
  cursor: pointer;
}
.trainer-page-btn:hover {
  border-color: var(--ac-bd);
  color: var(--ac-tx);
}
#trainer-answer {
  min-height: 110px;
}
#trainer-revealed {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.trainer-answer-text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--tx);
  padding: 8px 10px;
  background: var(--bg-surf);
  border: 1px solid var(--bd-sub);
  border-radius: var(--r-m);
}
.trainer-answer-text--ai {
  color: var(--ac-tx);
  border-color: var(--ac-bd);
}
#trainer-grade-row {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
#trainer-knew,
#trainer-notknew {
  flex: 1;
  padding: 9px 0;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
#trainer-knew {
  border: 1px solid #059669;
  background: transparent;
  color: #059669;
}
#trainer-knew:hover:not(:disabled) {
  background: #059669;
  color: #fff;
}
#trainer-notknew {
  border: 1px solid #ef4444;
  background: transparent;
  color: #ef4444;
}
#trainer-notknew:hover:not(:disabled) {
  background: #ef4444;
  color: #fff;
}
#trainer-done h3 {
  margin: 0;
  font-size: 17px;
}
#trainer-done-stats {
  margin: 0;
  font-size: 13px;
  color: var(--tx2);
}
#trainer-boxviz {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 4px 0;
}
.trainer-boxcol {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.trainer-boxbar {
  width: 100%;
  border-radius: 5px 5px 0 0;
  background: var(--ac-dim);
  border: 1px solid var(--ac-bd);
  border-bottom: 2px solid var(--ac);
}
.trainer-boxbar--done {
  background: color-mix(in srgb, #059669 18%, transparent);
  border-color: #059669;
}
.trainer-boxcount {
  font-size: 11px;
  font-weight: 700;
  color: var(--tx2);
}
.trainer-boxlbl {
  font-size: 10px;
  color: var(--tx4);
}
.cls-train-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Must outrank the base .cls-cfg-period-row grid rule (defined later in the
   file) — hence the doubled class selector */
.cls-cfg-period-row.cls-cfg-period-row--free {
  display: flex;
  grid-template-columns: none;
  gap: 8px;
  flex-wrap: nowrap;
  align-items: center;
}
.cls-cfg-period-row.cls-cfg-period-row--free span {
  white-space: nowrap;
}
.cls-cfg-period-row.cls-cfg-period-row--free span.trainer-cfg-lbl {
  flex: 1;
  width: auto;
  text-align: left;
}
.cls-cfg-period-row.cls-cfg-period-row--free input {
  flex-shrink: 0;
  width: 70px;
}

/* ── Grid config modal (Zeiten & Tage) ─────────────────────────────────────── */
.cls-cfg-box {
  gap: 12px;
  max-width: 560px;
}
.cls-cfg-days {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.cls-cfg-quickfill {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.cls-cfg-field {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cls-cfg-field span {
  width: 110px;
  flex-shrink: 0;
  font-size: 12.5px;
  color: var(--tx3);
}
.cls-cfg-quickfill input {
  padding: 5px 6px;
  background: var(--bg-input);
  color: var(--tx);
  border: 1px solid var(--bd);
  border-radius: 6px;
  font-family: inherit;
  font-size: 12.5px;
}
.cls-cfg-quickfill input[type='number'] {
  width: 70px;
}
.cls-cfg-quickfill .bv-btn {
  align-self: flex-start;
}
.cls-cfg-period-head {
  display: grid;
  grid-template-columns: 24px 120px 90px 1fr 24px;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tx4);
}
.cls-cfg-gap-cell {
  display: flex;
  align-items: center;
  gap: 5px;
}
.cls-cfg-gap-clear {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bd);
  border-radius: 5px;
  background: transparent;
  color: var(--tx4);
  font-size: 11px;
  cursor: pointer;
}
.cls-cfg-gap-clear:hover:not(:disabled) {
  border-color: #ef4444;
  color: #ef4444;
}
.cls-cfg-gap-clear:disabled {
  opacity: 0.3;
  cursor: default;
}
.cls-subj-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cls-cfg-hint {
  margin: 0;
  font-size: 11.5px;
  color: var(--tx4);
  line-height: 1.4;
}
.cls-cfg-periods {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 260px;
  overflow-y: auto;
}
.cls-cfg-period-row {
  display: grid;
  grid-template-columns: 24px 120px 90px 1fr 24px;
  gap: 8px;
  align-items: center;
  font-size: 12.5px;
  color: var(--tx3);
}
.cls-cfg-period-row span:first-child {
  text-align: right;
}
.cls-cfg-period-row input {
  padding: 4px 6px;
  background: var(--bg-input);
  color: var(--tx);
  border: 1px solid var(--bd);
  border-radius: 6px;
  font-family: inherit;
  font-size: 12.5px;
}
.cls-cfg-period-row input[type='number'] {
  width: 62px;
}
.cls-cfg-time {
  color: var(--tx2);
  font-variant-numeric: tabular-nums;
}

/* ── Cell editor modal ─────────────────────────────────────────────────────── */
.cls-tt-editor {
  gap: 14px;
}
.cls-tt-current {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cls-tt-current-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: var(--tx2);
}
.cls-tt-remove-btn {
  border: 1px solid var(--dn-tx);
  background: var(--dn-bg);
  color: var(--dn-tx);
  border-radius: 7px;
  padding: 3px 10px;
  font-size: 12px;
  cursor: pointer;
}
.cls-tt-exam-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--tx2);
  cursor: pointer;
}
.cls-tt-topic {
  padding: 6px 10px;
  border: 1px solid var(--bd);
  border-radius: 7px;
  background: var(--bg-raise);
  color: var(--tx);
  font-size: 13px;
}
.cls-tt-subject-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cls-tt-subject-btn {
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  cursor: pointer;
  background: color-mix(in srgb, var(--chip-color) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--chip-color) 55%, transparent);
  color: var(--chip-color);
}
.cls-tt-subject-btn--ghost {
  --chip-color: var(--tx3);
  border-style: dashed;
}
.cls-tt-new-row {
  display: flex;
  gap: 8px;
}
.cls-tt-new-row input {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--bd);
  border-radius: 7px;
  background: var(--bg-raise);
  color: var(--tx);
  font-size: 13px;
}
.cls-tt-swatches {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.cls-tt-swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
}
.cls-tt-swatch.active {
  border-color: var(--tx);
}

/* Lernkarten (BR-09 v1) */
.cls-cards {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  gap: 14px;
}
.cls-cards-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-shrink: 0;
}
.cls-cards-header h2 {
  margin: 0;
  font-size: 20px;
  color: var(--tx);
}
.cls-cards-count {
  font-size: 12.5px;
  color: var(--ac-tx);
  background: var(--ac-dim);
  border: 1px solid var(--ac-bd);
  border-radius: 10px;
  padding: 1px 9px;
}
.cls-cards-body {
  /* The classroom column (.cls-body) scrolls — no inner scrollbar */
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.cls-cards-empty {
  font-size: 13px;
  color: var(--tx3);
}
.cls-cards-body > .classroom-empty {
  margin: auto;
}
.cls-subject-group > h3 {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tx3);
}
.cls-card {
  background: var(--bg-surf);
  border: 1px solid var(--bd-sub);
  border-radius: 10px;
  margin-bottom: 8px;
  overflow: hidden;
}
.cls-card.open {
  border-color: var(--ac-bd);
}
.cls-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
}
.cls-card-head:hover {
  background: var(--bg-hover);
}
.cls-card-question {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  color: var(--tx);
  line-height: 1.45;
  word-break: break-word;
}
.cls-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.cls-card-badge {
  font-size: 10.5px;
  padding: 1px 8px;
  border-radius: 9px;
  background: var(--ac-dim);
  border: 1px solid var(--ac-bd);
  color: var(--ac-tx);
  white-space: nowrap;
}
.cls-card-pages {
  font-size: 11.5px;
  color: var(--tx3);
  white-space: nowrap;
}
.cls-card-del {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--tx4);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.cls-card-del:hover {
  background: var(--dn-bg);
  color: var(--dn-tx);
}
.cls-card-back {
  padding: 4px 12px 12px;
  border-top: 1px solid var(--bd-sub);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cls-card-answer {
  padding-top: 8px;
}
.cls-card-answer-text {
  font-size: 13px;
  color: var(--tx2);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  margin-top: 3px;
}
.cls-card-answer--ai .cls-card-answer-text {
  color: var(--ac-tx);
}

/* ── Subject grid (Fächer tab, BR-02 entry point v1) ──────────────────────── */
.cls-subjects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}
.cls-subject-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  background: var(--bg-surf);
  border: 1px solid var(--bd-sub);
  border-left: 3px solid var(--chip-color, var(--ac));
  border-radius: var(--r-m);
  /* entry point to the subject space — a real button */
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.cls-subject-card:hover {
  background: var(--bg-hover);
  border-color: var(--bd-str);
  border-left-color: var(--chip-color, var(--ac));
}
.cls-subject-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.cls-subject-abbrev {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--chip-color);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
}
.cls-subject-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--tx);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cls-subject-meta {
  font-size: 12px;
  color: var(--tx3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ── Hausaufgaben (BR-03) ──────────────────────────────────────────────────── */
.cls-hw-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cls-hw-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg-surf);
  border: 1px solid var(--bd-sub);
  border-radius: var(--r-m);
}
.cls-hw-row--done {
  opacity: 0.55;
}
.cls-hw-row--done .cls-hw-desc {
  text-decoration: line-through;
}
.cls-hw-state {
  flex-shrink: 0;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--bd-str);
  background: transparent;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  color: var(--tx3);
}
.cls-hw-state--offen {
  border-color: var(--bd-str);
}
.cls-hw-state--inbearbeitung {
  border-color: #d97706;
  color: #d97706;
}
.cls-hw-state--erledigt {
  border-color: #059669;
  color: #059669;
}
.cls-hw-desc {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--tx);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cls-hw-due {
  flex-shrink: 0;
  font-size: 11.5px;
  color: var(--tx3);
}
.cls-hw-due--overdue {
  color: #ef4444;
  font-weight: 600;
}
.cls-hw-action {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 96px; /* Starten / Öffnen / Schließen all render equal width */
  padding: 4px 12px;
  border-radius: 7px;
  border: 1px solid var(--ac-bd);
  background: var(--ac-dim);
  color: var(--ac-tx);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.cls-hw-action svg {
  width: 13px;
  height: 13px;
}
.cls-hw-action:hover:not(:disabled) {
  background: var(--grad-ac);
  color: #fff;
}
.cls-hw-action:disabled {
  opacity: 0.4;
  cursor: default;
}
.cls-hw-add {
  display: flex;
  gap: 8px;
  align-items: center;
}
.cls-hw-add .bv-text-input {
  flex: 1;
}
.cls-hw-date {
  flex: 0 0 auto;
  width: 140px;
}

/* ── Homework wizard + agent plans (BR-10) ─────────────────────────────────── */
.cls-hw-loc {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  color: var(--kind-color, var(--ac));
}
.cls-hw-loc svg {
  width: 14px;
  height: 14px;
}
.cls-hw-plan {
  margin: -2px 0 4px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg-surf);
  border: 1px solid var(--bd-sub);
  border-radius: var(--r-m);
}
.cls-hw-plan h4 {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tx3);
}
.cls-hw-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: transparent; /* blend with the Empfohlene-Schritte panel */
  border: 1px solid var(--bd-sub);
  border-radius: 8px;
}
.cls-hw-step-label {
  flex: 1;
  min-width: 0;
}
.cls-hw-step.done {
  opacity: 0.55;
}
.cls-hw-step.done .cls-hw-step-label {
  text-decoration: line-through;
}
.cls-prep-launch.done {
  opacity: 0.5;
}
.cls-hw-step-start {
  margin-left: auto;
}
.cls-hw-step-num {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--ac-dim);
  color: var(--ac-tx);
  font-size: 10.5px;
  font-weight: 700;
}
.cls-hw-step-icon {
  display: inline-flex;
  color: var(--tx2);
}
.cls-hw-step-icon svg {
  width: 15px;
  height: 15px;
}
.cls-hw-step-label {
  font-size: 13px;
  color: var(--tx);
}
.cls-pick-item--none {
  border-style: dashed;
}
.cls-hw-wiz-nonedesc {
  flex-shrink: 0;
  font-size: 11.5px;
  color: var(--tx3);
}
.cls-hw-wiz-note {
  margin: 4px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--tx3);
}
.cls-hw-wiz-count {
  margin-right: auto;
  align-self: center;
  font-size: 12px;
  color: var(--tx3);
}
.cls-hw-wiz-text {
  resize: vertical;
  min-height: 64px;
  font-family: inherit;
}
.cls-hw-wiz-busy {
  margin: 8px 0;
  font-size: 13px;
  color: var(--tx2);
}
.cls-wiz-seg {
  display: inline-flex;
  align-self: flex-start;
  border: 1px solid var(--bd-str);
  border-radius: 8px;
  overflow: hidden;
}
.cls-wiz-seg button {
  padding: 6px 14px;
  border: none;
  background: transparent;
  color: var(--tx3);
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.cls-wiz-seg button + button {
  border-left: 1px solid var(--bd-str);
}
.cls-wiz-seg button.active {
  background: var(--ac-dim);
  color: var(--ac-tx);
}
.cls-wiz-mode {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cls-wiz-mode .cselect-wrap {
  width: 100%;
}
.cls-wiz-mode .cselect-trigger {
  padding: 8px 10px;
}
.cls-wiz-hint {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: #d97706;
}
.cls-wiz-pagerow {
  display: flex;
  gap: 10px;
}
.cls-hw-edit {
  display: inline-flex;
  align-items: center;
}
.cls-hw-edit svg {
  width: 13px;
  height: 13px;
}
.cls-wiz-pagecol {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.cls-wiz-hint:empty {
  display: none;
}
.cls-wiz-review-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-raise);
  border: 1px solid var(--bd-sub);
  border-radius: var(--r-m);
}
.cls-wiz-review-desc {
  font-size: 13px;
  font-weight: 600;
  color: var(--tx);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cls-wiz-review-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.cls-wiz-agent-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--ac-bd);
  border-radius: 999px;
  background: var(--ac-dim);
  color: var(--ac-tx);
  font-size: 12px;
  font-weight: 600;
}
.cls-wiz-agent-chip svg {
  width: 13px;
  height: 13px;
}
.cls-wiz-agent-rm {
  padding: 0 2px;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  opacity: 0.7;
}
.cls-wiz-agent-rm:hover {
  opacity: 1;
}
.cls-wiz-agent-arrow {
  font-size: 12px;
  color: var(--tx3);
}
.cls-wiz-agent-add {
  width: 24px;
  height: 24px;
  border: 1px dashed var(--bd-str);
  border-radius: 50%;
  background: transparent;
  color: var(--tx3);
  font-size: 14px;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
}
.cls-wiz-agent-add:hover {
  border-color: var(--ac-bd);
  color: var(--ac-tx);
}
.cls-wiz-agent-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cls-wiz-agent-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--bd-sub);
  border-radius: 999px;
  background: var(--bg-surf);
  color: var(--tx2);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}
.cls-wiz-agent-opt svg {
  width: 13px;
  height: 13px;
}
.cls-wiz-agent-opt:hover {
  border-color: var(--ac-bd);
  color: var(--ac-tx);
}

/* ── Task column (BR-03 overview + BR-08 Today card) ───────────────────────── */
.cls-today-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: var(--bg-surf);
  border: 1px solid var(--bd-sub);
  border-radius: var(--r-m);
}
.cls-today-line {
  font-size: 12.5px;
  color: var(--tx2);
}
.cls-today-hw--green {
  color: #059669;
}
.cls-today-hw--amber {
  color: #d97706;
}
.cls-today-hw--red {
  color: #ef4444;
  font-weight: 600;
}
.cls-today-streak {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #d97706;
  font-weight: 600;
}
.cls-today-streak svg {
  width: 14px;
  height: 14px;
}
.cls-week-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 12px;
  background: var(--ac-dim);
  border: 1px solid var(--ac-bd);
  border-radius: var(--r-m);
}
.cls-week-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ac-tx);
}
.cls-week-dismiss {
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--tx3);
  font-size: 14px;
  cursor: pointer;
}
.cls-week-dismiss:hover {
  background: var(--bg-hover);
  color: var(--tx);
}
.cls-week-line {
  font-size: 12px;
  color: var(--tx2);
}
.cls-week-line--chapters {
  font-size: 11px;
  color: var(--tx3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cls-today-exam {
  font-size: 11.5px;
  padding: 2px 10px;
  border-radius: 10px;
  background: var(--dn-bg);
  color: var(--dn-tx);
  border: 1px solid var(--dn-tx);
  align-self: flex-start;
  white-space: nowrap;
}
.cls-task-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cls-task-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 9px;
  background: var(--bg-surf);
  border: 1px solid var(--bd-sub);
  border-radius: var(--r-m);
}
.cls-task-row input[type='checkbox'] {
  margin-top: 3px;
  flex-shrink: 0;
}
.cls-task-icon {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--chip-color, var(--ac));
}
.cls-task-icon svg {
  width: 15px;
  height: 15px;
}
.cls-task-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.cls-task-desc {
  font-size: 12.5px;
  color: var(--tx);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cls-task-text:hover .cls-task-desc {
  color: var(--ac-tx);
}
.cls-task-meta {
  font-size: 11px;
  color: var(--tx4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cls-task-meta--overdue {
  color: #ef4444;
  font-weight: 600;
}
.cls-task-meta--exam {
  color: var(--ac-tx);
  font-weight: 600;
}

/* ── Klausuren & Vorbereitung (BR-04) ──────────────────────────────────────── */
.cls-exam-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  background: var(--bg-surf);
  border: 1px solid var(--bd-sub);
  border-radius: var(--r-m);
}
.cls-exam-row.open {
  border-color: var(--ac-bd);
}
.cls-exam-head {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.cls-exam-when {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--tx3);
  font-variant-numeric: tabular-nums;
}
.cls-exam-title {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--tx);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cls-exam-badge2 {
  flex-shrink: 0;
  font-size: 11px;
  padding: 2px 9px;
  border-radius: 10px;
  background: var(--dn-bg);
  color: var(--dn-tx);
  border: 1px solid var(--dn-tx);
  white-space: nowrap;
}
.cls-exam-badge2.past {
  background: transparent;
  color: var(--tx4);
  border-color: var(--bd-str);
}
.cls-exam-add {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.cls-exam-add .bv-text-input {
  flex: 1;
  min-width: 120px;
}
.cls-exam-add .cls-hw-date,
.cls-exam-period {
  flex: 0 0 auto;
  width: auto;
}
.cls-prep {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  margin-top: -4px;
  background: var(--bg-panel);
  border: 1px solid var(--ac-bd);
  border-radius: var(--r-m);
}
.cls-prep h4 {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tx3);
}
.cls-prep-topic {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cls-prep-topic.done .cls-prep-topic-text {
  text-decoration: line-through;
  color: var(--tx4);
}
.cls-prep-topic-text {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--tx);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cls-prep-launch {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 7px;
  border: 1px solid var(--ac-bd);
  background: var(--ac-dim);
  color: var(--ac-tx);
  font-size: 11.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.cls-prep-launch svg {
  width: 12px;
  height: 12px;
}
.cls-topic-suggest {
  align-self: flex-start;
}
.cls-exam-ready {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--bd-str);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--tx2);
}
.cls-plan-loadrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 6px;
}
.cls-plan-units {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.cls-plan-unit span {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cls-plan-unit-plain {
  font-size: 12px;
  color: var(--tx2);
  padding: 3px 0;
}
.cls-prep-launch:hover {
  background: var(--grad-ac);
  color: #fff;
}
.cls-prep-add {
  display: flex;
  gap: 8px;
  align-items: center;
}
.cls-prep-add .bv-text-input {
  flex: 1;
}
.cls-prep-chapter {
  flex: 0 1 220px;
}
.cls-prep-selftest {
  align-self: flex-start;
}
.cls-prep-plan {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cls-prep-plan-day {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  color: var(--tx2);
}
.cls-prep-plan-date {
  flex-shrink: 0;
  width: 76px;
  color: var(--tx3);
  font-variant-numeric: tabular-nums;
}
.cls-prep-reflection {
  min-height: 64px;
  resize: vertical;
  padding: 10px 12px;
  background: var(--bg-input);
  color: var(--tx);
  border: 1px solid var(--bd);
  border-radius: var(--r-m);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
}
.cls-prep-reflection:focus {
  outline: none;
  border-color: var(--ac-bd);
}

/* ── Subject space (BR-02) ─────────────────────────────────────────────────── */
.cls-space {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.cls-space-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cls-space-back {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  flex-shrink: 0;
  background: var(--bg-surf);
  border: 1px solid var(--bd-sub);
  color: var(--tx2);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
}
.cls-space-back:hover {
  background: var(--bg-hover);
  color: var(--tx);
}
.cls-space-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cls-space-title-wrap h2 {
  margin: 0;
  font-size: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cls-space-meta {
  font-size: 12px;
  color: var(--tx3);
}
.cls-space-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cls-space-section > h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--tx2);
}

/* Fixed top zone: header + general + inner tabs never move; ONLY the active
   panel's content scrolls (100 Hausaufgaben scroll inside the tab container) */
.cls-main--space {
  padding: 0;
  overflow: hidden;
}
.cls-space-top {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 20px 0;
  background: var(--bg);
}
.cls-space-content {
  flex: 1;
  min-height: 0;
  overflow: hidden; /* the panel stretches; scrolling happens INSIDE it */
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 20px 16px;
}
.cls-space-content .cls-panel {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
/* The list region inside each panel is the scroll container */
.cls-panel .cls-hw-list,
.cls-panel .cls-exam-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.cls-exam-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cls-panel .cls-cards {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.cls-panel .cls-cards-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
/* Inner tab bar variant: slimmer than the view-level bars, no raised bg */
.view-tabs--sub {
  min-height: 38px;
  padding: 0;
  background: transparent;
}
.view-tabs--sub .view-tab {
  gap: 7px;
  font-size: 13px;
}
.cls-subtab-count {
  min-width: 20px;
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--ac-dim);
  border: 1px solid var(--ac-bd);
  color: var(--ac-tx);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
.cls-subtab-count.warn {
  background: var(--dn-bg);
  border-color: var(--dn-tx);
  color: var(--dn-tx);
}

/* ── Kind color-coding (books | uploaded material | own content) ────────────
   One hue per kind, reusing the app's status palette: neutral accent for
   books, amber for outside material, green for own work. Redundant with the
   icon + tooltip; applied identically in chips and both pickers. */
[data-kind='buch'] {
  --kind-color: var(--tx3); /* neutral grey — the book is the baseline */
}
[data-kind='material'] {
  --kind-color: #d97706;
}
[data-kind='eigen'] {
  --kind-color: #059669;
}

/* Pinned material chips + click menu */
.cls-pin-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cls-pin-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 240px;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--bd-str);
  background: var(--bg-surf);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}
.cls-pin-chip[data-kind] {
  border-color: color-mix(in srgb, var(--kind-color) 45%, transparent);
  background: color-mix(in srgb, var(--kind-color) 9%, var(--bg-surf));
}
.cls-pin-chip:hover {
  border-color: var(--kind-color, var(--ac-bd));
}
.cls-pin-chip-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: var(--kind-color, var(--tx3));
}
.cls-pin-chip-icon svg {
  width: 13px;
  height: 13px;
}
.cls-pin-chip-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--tx);
  font-weight: 600;
}
.cls-pin-chip-kind {
  flex-shrink: 0;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--kind-color, var(--tx4));
  font-weight: 600;
}

/* Kind coding in the pickers: colored left edge + colored kind tag */
/* Same kind tint as the pin chips — no left-border bar (that style is
   reserved for subject cards) */
.bv-own-cardpick-row[data-kind],
.cls-pick-item[data-kind] {
  border: 1px solid color-mix(in srgb, var(--kind-color) 45%, transparent);
  background: color-mix(in srgb, var(--kind-color) 9%, var(--bg-surf));
}
.bv-own-cardpick-row[data-kind] {
  border-radius: 6px;
}
.bv-own-cardpick-row[data-kind] span:nth-of-type(1) {
  flex: 1;
  min-width: 0;
}
.cls-pin-menu {
  position: fixed;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  padding: 4px;
  background: var(--bg-raise);
  border: 1px solid var(--bd);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-2);
}
.cls-pin-menu button {
  padding: 8px 12px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--tx);
  font-size: 13px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.cls-pin-menu button:hover {
  background: var(--bg-hover);
}

/* Launch picker */
.cls-pick-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cls-pick-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--bd-sub);
  border-radius: var(--r-m);
  background: var(--bg-surf);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}
.cls-pick-item:hover {
  border-color: var(--ac-bd);
  background: var(--bg-hover);
}
.cls-pick-item-title {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tx);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cls-pick-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--tx3);
  cursor: pointer;
}

/* Quiet "general" zone: quick-launch row + pin chips row — two slim lines,
   no section labels; every pixel saved here goes to the panel content */
.cls-space-general {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid var(--bd-sub);
  border-radius: var(--r-m);
}
.cls-pin-chip--action {
  border-style: dashed;
  background: transparent;
}
.cls-pin-chip--action .cls-pin-chip-title {
  color: var(--tx3);
  font-weight: 600;
}
.cls-pin-chip--action:hover .cls-pin-chip-title {
  color: var(--ac-tx);
}
.cls-space-section--quiet > h3 {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tx4);
}
.cls-space-general .cls-launch-btn {
  padding: 6px 12px;
  font-size: 12.5px;
}
.cls-space-general .cls-space-book {
  padding: 6px 10px;
}

/* Focus panels: Hausaufgaben, Klausuren, Lernkarten — the workspaces */
.cls-panel {
  padding: 16px 18px 18px;
  background: var(--bg-surf);
  border: 1px solid var(--bd-sub);
  border-radius: var(--r-l);
}
.cls-panel .cls-cards-header h2 {
  margin: 0;
  font-size: 16px;
}
/* Nested rows sit on the panel surface — recess them to the page tone */
.cls-panel .cls-hw-row,
.cls-panel .cls-exam-row,
.cls-panel .cls-card {
  background: var(--bg);
}
.cls-panel .cls-prep {
  background: var(--bg);
}
.cls-launch-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* Pinned Bücher & Material next to the Neue-Sitzung button, with a label */
.cls-pin-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
  margin-left: 10px;
}
.cls-pin-label {
  flex-shrink: 0;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--tx3);
}
.cls-launch-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--ac-bd);
  background: var(--ac-dim);
  color: var(--ac-tx);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  transition:
    background 0.15s,
    color 0.15s;
}
.cls-launch-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.cls-launch-btn:hover:not(:disabled) {
  background: var(--grad-ac);
  color: #fff;
}
.cls-launch-btn:disabled {
  opacity: 0.45;
  cursor: default;
}
/* The subject's single "Neue Sitzung" entry point — filled, primary action */
.cls-launch-btn--primary {
  background: var(--grad-ac);
  color: #fff;
  border-color: transparent;
}
.cls-launch-btn--primary:hover:not(:disabled) {
  filter: brightness(1.06);
}
/* Klausurvorbereitung is a workflow (BR-04), not an agent — visually distinct */
.cls-launch-btn--klausur {
  border-style: dashed;
  border-color: var(--bd-str);
  background: transparent;
  color: var(--tx3);
}
.cls-launch-hint {
  margin: 0;
  font-size: 12px;
  color: var(--tx3);
}
.cls-space-books {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cls-space-book {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-surf);
  border: 1px solid var(--bd-sub);
  border-radius: var(--r-m);
}
.cls-space-book-title {
  flex: 1;
  min-width: 0;
  text-align: left;
  background: none;
  border: none;
  color: var(--tx);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: inherit;
}
.cls-space-book-title:hover {
  color: var(--ac-tx);
  text-decoration: underline;
}
.cls-space-chapter {
  max-width: 280px;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--bg-input);
  color: var(--tx);
  border: 1px solid var(--bd);
  font-size: 12.5px;
  font-family: inherit;
}
.cls-space-unpin {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--tx3);
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
}
body.light .cls-space-unpin {
  color: var(--tx2);
}
.cls-space-unpin:hover {
  color: #ef4444;
  background: var(--bg-hover);
}
.cls-space-add-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.cls-space-topic {
  min-height: 64px;
  resize: vertical;
  padding: 10px 12px;
  background: var(--bg-input);
  color: var(--tx);
  border: 1px solid var(--bd);
  border-radius: var(--r-m);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
}
.cls-space-topic:focus {
  outline: none;
  border-color: var(--ac-bd);
}

.classroom-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding: 24px;
}
.classroom-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--ac-dim);
  border: 1px solid var(--ac-bd);
  color: var(--ac-tx);
}
.classroom-empty p {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--tx2);
}
.classroom-empty small {
  font-size: 12.5px;
  color: var(--tx3);
  max-width: 320px;
  line-height: 1.5;
}

/* Placeholder mode: panel visible in Bücher/Classroom, input inert for now */
#voice-panel.placeholder-mode #input-area {
  opacity: 0.45;
  pointer-events: none;
}

/* ── Home column (collapsible nav rail) ───────────────────────────────────── */
#home-col {
  width: 216px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 8px;
  background: var(--bg-panel);
  border-right: 1px solid var(--bd);
  overflow: hidden;
  transition: width 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#home-col .home-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--tx2);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  text-align: left;
  transition:
    background 0.15s,
    color 0.15s;
}
#home-col .home-item svg {
  flex-shrink: 0;
}
#home-col .home-item:hover {
  background: var(--bg-hover);
  color: var(--tx);
}
#home-col .home-item.active {
  background: linear-gradient(90deg, var(--ac-dim) 0%, transparent 95%);
  color: var(--ac-tx);
}
.home-item-label {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
#home-col-toggle {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
  border: none;
  background: transparent;
  color: var(--tx3);
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
#home-col-toggle:hover {
  background: var(--bg-hover);
  color: var(--tx);
}
#home-col-toggle svg {
  transition: transform 0.18s;
}
#home-col.collapsed {
  width: 56px;
}
#home-col.collapsed .home-item {
  justify-content: center;
  padding: 9px 0;
  gap: 0;
}
#home-col.collapsed .home-item-label {
  display: none;
}
#home-col.collapsed #home-col-toggle {
  align-self: center;
}
#home-col.collapsed #home-col-toggle svg {
  transform: rotate(180deg);
}

/* Top toolbar: elevated, always dark (both themes) */
.app-container > .toolbar {
  position: relative;
  z-index: 30;
  min-height: 52px;
  padding: 6px 14px;
  background: linear-gradient(180deg, #1a1a24 0%, #14141c 100%);
  border-bottom: 1px solid #26263a;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
body.light .app-container > .toolbar {
  background: linear-gradient(180deg, #1a1a24 0%, #14141c 100%);
  border-bottom-color: #26263a;
}
body.light .app-container > .toolbar button {
  color: #8a8aa8;
}
body.light .app-container > .toolbar button:hover:not(:disabled) {
  background: #2a2a36;
  color: #e8e8f2;
}

/* Wrapper layout for the toolbar popover selects (native selects hidden inside) */
.cselect-wrap[data-for='book-select'] {
  max-width: 200px;
  min-width: 110px;
  flex-shrink: 0;
}
.cselect-wrap[data-for='book-select'] .cselect-trigger::before {
  content: '';
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8aa8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/><path d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.cselect-wrap[data-for='book-select'] .cselect-label {
  flex: 1;
}
.cselect-wrap[data-for='section-jump'] {
  flex: 1;
  min-width: 0;
  display: none;
}

/* Show section dropdown only when sections panel is collapsed */
#left-area:has(#sections-panel.collapsed) .cselect-wrap[data-for='section-jump'] {
  display: block;
}

/* Page indicator as a "page label" chip */
#page-display {
  font-size: 12px;
  color: var(--tx2);
  white-space: nowrap;
  flex-shrink: 0;
  background: var(--bg-input);
  border: 1px solid var(--bd);
  border-radius: 999px;
  padding: 3px 11px;
  font-variant-numeric: tabular-nums;
}

#page-input {
  width: 62px;
  background: var(--bg-input);
  color: var(--tx);
  border: 1px solid var(--bd);
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 13px;
  text-align: center;
  outline: none;
  flex-shrink: 0;
}
#page-input:focus {
  border-color: var(--bd-str);
}
/* hide spinner arrows */
#page-input::-webkit-inner-spin-button,
#page-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#page-input[type='number'] {
  -moz-appearance: textfield;
}

/* ── Three-panel area ─────────────────────────────────────────────────────── */
.panels {
  display: flex;
  flex: 1;
  overflow: hidden;
}
/* #voice-panel is a sibling of .panels in #main-content (both flex: 1), so a
   collapsed PDF would otherwise leave dead space inside .panels — hug the
   collapsed content instead and let the agent workspace take the width. */
.panels:has(#pdf-panel.collapsed) {
  flex: 0 0 auto;
}
/* Divider B (PDF | workspace): user-dragged share of the left half. Only
   applies while a workspace is visible and the PDF is open — the collapsed
   rule above outweighs this via :has() specificity. */
body:has(#chat-col:not(.hidden)) .panels.user-sized:not(:has(#pdf-panel.collapsed)) {
  flex: 0 0 var(--panels-basis, 50%);
}

#left-area {
  flex: 1;
  display: grid;
  grid-template-columns: var(--sections-w, 330px) 1fr;
  grid-template-rows: auto auto 1fr; /* toolbar · launch banner · panels */
  min-width: 0;
  overflow: hidden;
  position: relative; /* anchors the floating collapse pills + drag handles */
}

/* Toolbar spans all columns */
#left-area > .toolbar {
  grid-column: 1 / -1;
  grid-row: 1;
}

/* Grid placement for panel children */
#sections-panel {
  grid-column: 1;
  grid-row: 3;
}
#pdf-panel {
  grid-column: 2;
  grid-row: 3;
}

/* Launch banner (BR-06/BR-14): prompts for a precise selection after launch */
#launch-banner {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 14px;
  background: var(--ac-dim);
  border-bottom: 1px solid var(--ac-bd);
}
#launch-banner-text {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ac-tx);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#launch-banner-all {
  flex-shrink: 0;
  padding: 4px 12px;
  border: 1px solid var(--ac-bd);
  border-radius: 7px;
  background: transparent;
  color: var(--ac-tx);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
#launch-banner-all:hover {
  background: var(--grad-ac);
  color: #fff;
}
#launch-banner-close {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--ac-tx);
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
  opacity: 0.7;
}
#launch-banner-close:hover {
  opacity: 1;
}

/* Sections collapsed — 36px bookmark ribbon */
#left-area:has(#sections-panel.collapsed) {
  grid-template-columns: 36px 1fr;
}
#left-area:has(#sections-panel.collapsed) #btn-collapse-sections {
  display: none;
}

/* PDF collapsed, sections visible — 36px hint strip */
#left-area:has(#pdf-panel.collapsed):not(:has(#sections-panel.collapsed)) {
  grid-template-columns: 330px 36px;
}
#left-area:has(#pdf-panel.collapsed):not(:has(#sections-panel.collapsed)) > .toolbar {
  border-right: 1px solid var(--bd);
}
#left-area:has(#pdf-panel.collapsed):not(:has(#sections-panel.collapsed))
  > .toolbar
  > :not(.cselect-wrap[data-for='book-select']) {
  display: none;
}
#left-area:has(#pdf-panel.collapsed) #pdf-closed-hint {
  display: flex;
}
#left-area:has(#pdf-panel.collapsed) #btn-collapse-pdf {
  display: none;
}

/* Both collapsed — two bookmark ribbons side by side */
#left-area:has(#sections-panel.collapsed):has(#pdf-panel.collapsed) {
  grid-template-columns: 36px 36px;
}
#left-area:has(#sections-panel.collapsed):has(#pdf-panel.collapsed) > .toolbar {
  display: none;
}

/* Floating collapse pills — sit on the panel boundaries, cost no width.
   Faintly visible at rest (tablet/touch users can't hover), prominent on
   hover; collapsed panels reopen via their bookmark ribbon instead. */
.panel-collapse-btn {
  position: absolute;
  z-index: 30;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg-surf);
  border: 1px solid var(--bd-str);
  color: var(--tx3);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 2px;
  opacity: 0.45;
  transition:
    opacity 0.15s,
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
  user-select: none;
}
.panel-collapse-btn:hover {
  opacity: 1;
  background: var(--ac-dim);
  border-color: var(--ac-bd);
  color: var(--ac-tx);
}
#btn-collapse-sections {
  left: var(--sections-w, 330px);
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Width drag handles — same idiom as #agent-resize-handle */
#sections-resize-handle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  cursor: ew-resize;
  z-index: 20;
  transition: background 0.15s;
}
#sections-resize-handle:hover {
  background: rgba(128, 128, 128, 0.15);
}
#sections-panel.collapsed #sections-resize-handle {
  display: none;
}
#panels-resize-handle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  cursor: ew-resize;
  z-index: 20;
  transition: background 0.15s;
}
#panels-resize-handle:hover {
  background: rgba(128, 128, 128, 0.15);
}
/* Divider B only matters with an open PDF and a visible workspace */
#left-area:has(#pdf-panel.collapsed) #panels-resize-handle,
body:has(#chat-col.hidden) #panels-resize-handle {
  display: none;
}
#btn-collapse-pdf {
  right: 3px;
  top: 50%;
  transform: translateY(-50%);
}
#btn-collapse-agent {
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
}
#agent-col.collapsed #btn-collapse-agent {
  display: none;
}

/* LEFT — Section navigation sidebar (width governed by the grid column) */
#sections-panel {
  width: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-panel);
  border-right: 1px solid var(--bd);
  position: relative;
}
#sections-panel.collapsed {
  width: auto;
}

#sections-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--sb) var(--bg-panel);
}
#sections-list::-webkit-scrollbar {
  width: 5px;
}
#sections-list::-webkit-scrollbar-track {
  background: var(--bg-panel);
}
#sections-list::-webkit-scrollbar-thumb {
  background: var(--sb);
  border-radius: 4px;
}

/* Table-of-contents look: spine line, chapter nodes, dotted page leaders.
   The spine is drawn per item (not on the scroll container — an absolute
   pseudo there only spans the visible height), so it always runs the full
   length of the list. */
.section-item::after {
  content: '';
  position: absolute;
  left: 14px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--bd-sub);
  pointer-events: none;
}
.section-item:first-child::after {
  top: 10px;
}
.section-item:last-child::after {
  bottom: auto;
  height: 14px;
}
.section-item {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 7px;
  width: 100%;
  padding: 7px 12px 7px 28px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--tx2);
  cursor: pointer;
  border: none;
  background: none;
  text-align: left;
  border-left: 2px solid transparent;
  transition:
    background 0.1s,
    color 0.1s;
  font-family: inherit;
}
.section-item:hover {
  background: var(--bg-hover);
  color: var(--tx);
}
.section-item.active {
  color: var(--tx);
  background: linear-gradient(90deg, var(--ac-dim) 0%, transparent 85%);
  border-left-color: var(--ac);
}
.section-item-title {
  word-break: break-word;
  min-width: 0;
}
.section-item-leader {
  flex: 1;
  min-width: 14px;
  border-bottom: 1px dotted var(--bd-str);
  opacity: 0.55;
  transform: translateY(-3px);
}
.section-item-page {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--tx4);
  font-variant-numeric: tabular-nums;
}
.section-item.level-1 {
  font-weight: 600;
  color: var(--tx);
}
.section-item.level-1 .section-item-title {
  text-transform: uppercase;
  font-size: 11.5px;
  letter-spacing: 0.05em;
}
.section-item.level-1::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bg-panel);
  border: 1.5px solid var(--tx3);
  z-index: 1;
}
.section-item.level-1.active::before {
  background: var(--ac);
  border-color: var(--ac);
}
.section-item.level-2 {
  padding-left: 40px;
  font-weight: 400;
}
.section-item.level-3 {
  padding-left: 52px;
  font-size: 12px;
  color: var(--tx3);
}

/* MIDDLE — PDF viewer */
#pdf-panel {
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg-surf);
  scrollbar-width: thin;
  scrollbar-color: var(--sb) var(--bg-surf);
  position: relative;
}
#pdf-panel.collapsed {
  overflow: hidden;
  border-right: 1px solid var(--bd);
}
#pdf-panel.collapsed #canvas-wrap {
  display: none;
}

/* Closed-panel bookmark ribbons (sections + pdf + agent interaction) */
#pdf-closed-hint,
#sections-closed-hint,
#agent-closed-hint {
  display: none;
  position: absolute;
  inset: 0;
  justify-content: center;
  align-items: flex-start;
  background: var(--bg-panel);
  cursor: pointer;
  user-select: none;
  z-index: 25;
  transition: background 0.15s;
}
#pdf-closed-hint:hover,
#sections-closed-hint:hover,
#agent-closed-hint:hover {
  background: var(--bg-hover);
}
.closed-ribbon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 26px;
  padding: 12px 0 18px;
  background: var(--grad-ac);
  color: #fff;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 10px), 0 100%);
  transition:
    transform 0.15s,
    filter 0.15s;
}
.closed-ribbon > span {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
.closed-ribbon svg {
  flex-shrink: 0;
}
#pdf-closed-hint:hover .closed-ribbon,
#sections-closed-hint:hover .closed-ribbon,
#agent-closed-hint:hover .closed-ribbon {
  transform: translateY(3px);
  filter: brightness(1.1);
}
#sections-panel.collapsed #sections-closed-hint {
  display: flex;
}
#agent-col.collapsed #agent-closed-hint {
  display: flex;
}

#pdf-panel::-webkit-scrollbar {
  width: 7px;
}
#pdf-panel::-webkit-scrollbar-track {
  background: var(--bg-surf);
}
#pdf-panel::-webkit-scrollbar-thumb {
  background: var(--sb);
  border-radius: 4px;
}

#selection-banner {
  display: none;
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--sel-bg);
  border-bottom: 1px solid var(--sel-bd);
  color: var(--sel-tx);
  padding: 7px 14px;
  font-size: 0.82rem;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
#selection-banner.visible {
  display: flex;
}
.selection-banner-btns {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.selection-banner-btns button {
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 0.8rem;
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: background 0.15s;
}
#btn-banner-zurueck {
  background: var(--sel-g-bg);
  color: var(--sel-g-tx);
}
#btn-banner-zurueck:hover {
  background: var(--act-h);
}
#btn-banner-verwerfen {
  background: var(--sel-r-bg);
  color: var(--sel-r-tx);
}
#btn-banner-verwerfen:hover {
  background: var(--dn-h);
}

#canvas-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0 32px;
  gap: 12px;
}

.loading-msg {
  color: var(--tx3);
  font-size: 14px;
  padding: 40px;
  text-align: center;
}

/* Paper stack: the rendered page sits on two offset "sheets" */
.page-wrapper {
  position: relative;
  z-index: 0;
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.3),
    0 6px 28px rgba(0, 0, 0, 0.35);
}
.page-wrapper::before,
.page-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #b9b9c6;
  border: 1px solid rgba(0, 0, 0, 0.2);
  z-index: -1;
  pointer-events: none;
}
.page-wrapper::before {
  transform: translate(3px, 3px);
}
.page-wrapper::after {
  transform: translate(6px, 6px);
  opacity: 0.55;
}
body.light .page-wrapper {
  box-shadow:
    0 1px 3px rgba(30, 30, 60, 0.1),
    0 6px 24px rgba(30, 30, 60, 0.16);
}
body.light .page-wrapper::before,
body.light .page-wrapper::after {
  background: #e2e2ea;
  border-color: rgba(30, 30, 60, 0.12);
}
.page-wrapper canvas {
  display: block;
  max-width: 100%;
}

.textLayer {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: visible;
  opacity: 1;
  line-height: 1;
  pointer-events: none;
}
.textLayer span {
  color: transparent;
  position: absolute;
  white-space: pre;
  transform-origin: 0% 0%;
}

/* Rubber-band selection rectangle */
/* Marker-pen selection: warm amber, like a text highlighter on paper */
#rubber-band {
  display: none;
  position: fixed;
  border: 1.5px dashed rgba(240, 160, 32, 0.8);
  background: rgba(240, 160, 32, 0.12);
  pointer-events: none;
  z-index: 1000;
}

/* Custom crosshair cursor */
#pdf-panel {
  cursor:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cline x1='12' y1='2' x2='12' y2='10' stroke='%23888888' stroke-width='1.5'/%3E%3Cline x1='12' y1='14' x2='12' y2='22' stroke='%23888888' stroke-width='1.5'/%3E%3Cline x1='2' y1='12' x2='10' y2='12' stroke='%23888888' stroke-width='1.5'/%3E%3Cline x1='14' y1='12' x2='22' y2='12' stroke='%23888888' stroke-width='1.5'/%3E%3C/svg%3E")
      12 12,
    crosshair;
}

/* Orange border overlay for rubber-band selections */
.selection-overlay {
  position: absolute;
  border: 2px solid rgba(240, 160, 32, 0.75);
  background: rgba(240, 160, 32, 0.05);
  border-radius: 3px;
  pointer-events: none;
  z-index: 10;
  box-sizing: border-box;
  transition:
    border-color 0.25s,
    background 0.25s;
}

/* Locked state */
#pdf-panel:has(.selections-locked) {
  cursor: default;
}
.selections-locked .selection-overlay {
  border-color: rgba(240, 160, 32, 0.9);
}

.sel-remove-btn {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--dn-tx);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  padding: 0;
  pointer-events: auto;
  z-index: 11;
  opacity: 0;
  transition: opacity 0.15s;
  font-family: inherit;
}
.page-wrapper:hover .sel-remove-btn {
  opacity: 1;
}
.selections-locked .sel-remove-btn {
  display: none !important;
}

/* Suppress native text selection while dragging */
body.selecting,
body.selecting * {
  user-select: none;
  cursor:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cline x1='12' y1='2' x2='12' y2='10' stroke='%23888888' stroke-width='1.5'/%3E%3Cline x1='12' y1='14' x2='12' y2='22' stroke='%23888888' stroke-width='1.5'/%3E%3Cline x1='2' y1='12' x2='10' y2='12' stroke='%23888888' stroke-width='1.5'/%3E%3Cline x1='14' y1='12' x2='22' y2='12' stroke='%23888888' stroke-width='1.5'/%3E%3C/svg%3E")
      12 12,
    crosshair !important;
}

/* docling-panel removed from layout */
#docling-panel {
  display: none;
}

.panel-header {
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tx3);
  border-bottom: 1px solid var(--bd-sub);
  flex-shrink: 0;
}

#docling-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px 22px 40px;
  scrollbar-width: thin;
  scrollbar-color: var(--sb) var(--bg-panel);
}
#docling-content::-webkit-scrollbar {
  width: 7px;
}
#docling-content::-webkit-scrollbar-track {
  background: var(--bg-panel);
}
#docling-content::-webkit-scrollbar-thumb {
  background: var(--sb);
  border-radius: 4px;
}

/* ── Docling content typography ───────────────────────────────────────────── */
.placeholder {
  color: var(--tx4);
  font-size: 13px;
  font-style: italic;
  text-align: center;
  margin-top: 40px;
}
.placeholder.error {
  color: var(--dn-tx);
  font-style: normal;
}

.dp-h1 {
  font-size: 18px;
  font-weight: 700;
  color: var(--tx);
  margin: 24px 0 10px;
  line-height: 1.3;
  border-bottom: 1px solid var(--bd-sub);
  padding-bottom: 6px;
}

.dp-h2 {
  font-size: 15px;
  font-weight: 600;
  color: var(--tx);
  margin: 20px 0 8px;
  line-height: 1.35;
}

.dp-h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--tx2);
  margin: 16px 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dp-body {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--tx);
  margin: 0 0 8px;
}

.dp-caption {
  font-size: 12px;
  color: var(--tx2);
  font-style: italic;
  margin: 4px 0 12px;
  line-height: 1.4;
}

.dp-source {
  font-size: 11.5px;
  color: var(--tx3);
  border-left: 2px solid var(--bd);
  padding: 4px 0 4px 10px;
  margin: 6px 0;
  line-height: 1.45;
}

.dp-exercise {
  font-size: 13px;
  line-height: 1.6;
  color: var(--sq-tx);
  background: var(--sq-bg);
  border-left: 3px solid var(--sq-bd);
  border-radius: 0 4px 4px 0;
  padding: 8px 12px;
  margin: 8px 0;
}

figure {
  margin: 12px 0;
  text-align: center;
}
figure img {
  max-width: 100%;
  border-radius: 4px;
  display: block;
  margin: 0 auto;
}
figcaption {
  font-size: 12px;
  color: var(--tx3);
  font-style: italic;
  margin-top: 5px;
}

hr.page-break {
  border: none;
  border-top: 1px dashed var(--bd-sub);
  margin: 24px 0;
}

/* selection-panel removed from layout */
#selection-panel {
  display: none;
}

#selection-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--sb) var(--bg-panel);
}
#selection-content::-webkit-scrollbar {
  width: 7px;
}
#selection-content::-webkit-scrollbar-track {
  background: var(--bg-panel);
}
#selection-content::-webkit-scrollbar-thumb {
  background: var(--sb);
  border-radius: 4px;
}

.selection-box {
  font-size: 13px;
  line-height: 1.6;
  color: var(--tx);
  background: var(--sq-bg);
  border: 1px solid var(--sq-bd);
  border-radius: 6px;
  padding: 12px 14px;
  white-space: pre-wrap;
  word-break: break-word;
}

#selection-images img {
  display: block;
  max-width: 100%;
  border-radius: 6px;
  border: 1px solid var(--bd);
  margin-bottom: 10px;
}

/* ── Chat panel (own column) ─────────────────────────────────────────────── */
#chat-panel {
  flex: 2;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-left: 1px solid var(--bd);
  background: var(--bg-panel);
}

.chat-badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 10px;
}

.chat-badge--none {
  background: var(--bg-input);
  color: var(--tx3);
}
.chat-badge--active {
  background: var(--act-bg);
  color: var(--act-tx);
}

#chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 80px;
}

.chat-msg {
  font-size: 12.5px;
  line-height: 1.6;
  padding: 8px 10px;
  border-radius: 6px;
  word-break: break-word;
  white-space: pre-wrap;
  max-width: 100%;
}

.chat-msg--user {
  background: var(--usr-bg);
  color: var(--usr-tx);
  align-self: flex-end;
  border: 1px solid var(--usr-bd);
}

.chat-msg--assistant {
  background: var(--bg-surf);
  color: var(--tx);
  align-self: flex-start;
  border: 1px solid var(--bd);
}

.chat-msg--error {
  color: var(--dn-tx);
  border-color: var(--dn-bg);
}

#chat-input-row {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid var(--bd);
}

#chat-input {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--bd);
  border-radius: 6px;
  color: var(--tx);
  font-size: 12.5px;
  padding: 6px 10px;
  outline: none;
}
#chat-input:focus {
  border-color: var(--ac);
}

#chat-send {
  background: var(--act-bg);
  border: none;
  border-radius: 6px;
  color: var(--act-tx);
  cursor: pointer;
  font-size: 14px;
  padding: 6px 12px;
}
#chat-send:hover {
  background: var(--act-h);
}
#chat-send:disabled {
  opacity: 0.4;
  cursor: default;
}

.chat-context-divider {
  font-size: 10px;
  color: var(--tx4);
  text-align: center;
  padding: 4px 0;
  letter-spacing: 0.05em;
}

#chat-latency {
  font-size: 10px;
  color: var(--tx3);
  padding: 2px 12px 6px;
  min-height: 16px;
}

/* ── Context blocks ───────────────────────────────────────────────────────── */
#ctx-sections {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 4px;
}

.ctx-block {
  border-radius: 6px;
  border: 1px solid var(--bd-sub);
  overflow: hidden;
}

.ctx-block__label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--bd-sub);
}

.ctx-block__tag {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
}

.ctx-block__tag--selected {
  background: var(--act-bg);
  color: var(--act-tx);
}
.ctx-block__tag--curr {
  background: var(--sq-bg);
  color: var(--sq-tx);
}
.ctx-block__tag--page {
  background: var(--bg-input);
  color: var(--tx3);
}
.ctx-block__tag--image {
  background: var(--img-bg);
  color: var(--img-tx);
}

.ctx-block__hint {
  font-size: 10px;
  color: var(--tx3);
}

.ctx-block__body {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--tx);
  padding: 8px 10px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 120px;
  overflow-y: auto;
}

.ctx-block__body--muted {
  color: var(--tx3);
  font-size: 11px;
}

/* ── Outside-book search modal ────────────────────────────────────────────── */
#open-search-modal {
  position: fixed;
  inset: 0;
  background: var(--modal-scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

#open-search-box {
  background: var(--bg-panel);
  border: 1px solid var(--bd);
  border-radius: 8px;
  padding: 24px 28px;
  max-width: 340px;
  width: 90%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#open-search-msg {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--tx);
  margin: 0;
  text-align: center;
}

#open-search-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
}

#btn-open-search-ja {
  background: var(--grad-ac);
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  padding: 8px 24px;
  transition: filter 0.15s;
}
#btn-open-search-ja:hover {
  filter: brightness(1.12);
}

#btn-open-search-nein {
  background: var(--bg-raise);
  border: none;
  border-radius: 6px;
  color: var(--tx2);
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  padding: 8px 24px;
  transition:
    background 0.15s,
    color 0.15s;
}
#btn-open-search-nein:hover {
  background: var(--bg-hover);
  color: var(--tx);
}

/* ── Out-of-scope source modal ────────────────────────────────────────────── */
#out-of-scope-modal {
  position: fixed;
  inset: 0;
  background: var(--modal-scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
#out-of-scope-box {
  background: var(--bg-panel);
  border: 1px solid var(--bd);
  border-radius: 8px;
  padding: 24px 28px;
  max-width: 360px;
  width: 90%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#out-of-scope-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--tx);
  margin: 0;
  text-align: center;
}
#out-of-scope-body {
  font-size: 13px;
  line-height: 1.6;
  color: var(--tx2);
  margin: 0;
  text-align: center;
}
#out-of-scope-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
}
#btn-out-of-scope-books {
  background: var(--grad-ac);
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  padding: 8px 20px;
  transition: filter 0.15s;
}
#btn-out-of-scope-books:hover {
  filter: brightness(1.12);
}
#btn-out-of-scope-close {
  background: var(--bg-raise);
  border: none;
  border-radius: 6px;
  color: var(--tx2);
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  padding: 8px 20px;
  transition:
    background 0.15s,
    color 0.15s;
}
#btn-out-of-scope-close:hover {
  background: var(--bg-hover);
  color: var(--tx);
}

/* Shared treatment for the small confirmation modals */
#agent-switch-modal,
#open-search-modal,
#out-of-scope-modal {
  backdrop-filter: blur(6px);
  animation: modal-fade 0.18s ease both;
}
#agent-switch-box,
#open-search-box,
#out-of-scope-box {
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-3);
  animation: modal-pop 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* ── Voice panel ──────────────────────────────────────────────────────────── */
#voice-panel {
  flex: 1;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  border-left: 1px solid var(--bd);
  background: var(--bg-panel);
}

/* Column A: chat + voice controls (wider, left) */
#chat-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  border-right: 1px solid var(--bd);
}

/* Column D: talking head + input controls (fixed width, right) */
#agent-col {
  flex: 0 0 var(--agent-col-init-width, 280px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  position: relative;
  container-type: inline-size;
  container-name: agentcol;
  padding-bottom: 8px;
}

#agent-resize-handle {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  cursor: ew-resize;
  z-index: 10;
  transition: background 0.15s;
}
#agent-resize-handle:hover {
  background: rgba(128, 128, 128, 0.15);
}
#agent-col.collapsed #agent-resize-handle {
  display: none;
}

body.resizing {
  cursor: ew-resize !important;
  user-select: none;
}

/* Talking head */
#talking-head {
  flex-shrink: 0;
  aspect-ratio: 4 / 3;
  background: radial-gradient(ellipse at 50% 35%, #1b1e33 0%, #0a0a14 78%);
  position: relative;
  overflow: hidden;
}
body.light #talking-head {
  background: radial-gradient(ellipse at 50% 35%, #eef1fb 0%, #cdd4ee 100%);
}
/* Ambient stage glow — intensifies + breathes while the avatar speaks */
#talking-head::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -25%;
  width: 80%;
  height: 55%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(99, 102, 241, 0.28) 0%, transparent 70%);
  filter: blur(24px);
  opacity: 0.55;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
#talking-head.speaking::before {
  opacity: 1;
  animation: th-breath 2.6s ease-in-out infinite;
}
@keyframes th-breath {
  0%,
  100% {
    transform: translateX(-50%) scale(1);
  }
  50% {
    transform: translateX(-50%) scale(1.18);
  }
}
/* Gradient hairline under the stage */
#talking-head::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(139, 92, 246, 0.55) 50%, transparent 100%);
  pointer-events: none;
}
#talking-head canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none;
}

/* Collapsible chat section */
#chat-section {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Chat toggle button */
.chat-toggle-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  border-top: 1px solid var(--bd-sub);
  border-bottom: 1px solid var(--bd-sub);
  color: var(--tx4);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 5px 12px;
  text-align: left;
  width: 100%;
  transition: color 0.15s;
}
.chat-toggle-btn:hover {
  color: var(--tx2);
}

/* agent-col collapsed */
#agent-col.collapsed {
  flex: 0 0 36px; /* bookmark ribbon strip, like the collapsed sections panel */
  overflow: hidden;
  padding-bottom: 0;
}
#agent-col.collapsed #talking-head,
#agent-col.collapsed #agent-toolbar,
#agent-col.collapsed #agent-controls-row,
#agent-col.collapsed #chat-section,
#agent-col.collapsed #voice-state-wrap,
#agent-col.collapsed #input-area {
  display: none;
}

/* chat-col hidden (no workspace needed for active agent) */
#chat-col.hidden {
  display: none;
}

/* voice-panel shrinks to agent-col width when workspace is hidden */
#voice-panel.workspace-hidden {
  flex: 0 0 auto;
  margin-left: auto;
}

/* agent-controls-row — hidden state holders (selects read live by getLang() etc.) */
#agent-controls-row {
  display: none;
}

/* ── Agent toolbar (top row above the avatar, mirrors left sub-toolbar) ────── */
#agent-toolbar {
  justify-content: space-between;
}
#agent-toolbar #btn-new-session {
  background: var(--bg-raise);
  color: var(--tx2);
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--bd);
  border-radius: 8px;
}
#agent-toolbar #btn-new-session:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--tx);
}
#agent-toolbar-left {
  display: flex;
  align-items: center;
  gap: 6px;
}
#agent-toolbar #btn-agent-settings,
#agent-toolbar #btn-restart-agent {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tx3);
  padding: 6px 8px;
}
#agent-toolbar #btn-agent-settings:hover,
#agent-toolbar #btn-restart-agent:hover:not(:disabled) {
  color: var(--tx);
}

/* ── New-session modal: agent cards ────────────────────────────────────────── */
.ns-warning {
  margin: 0 0 12px;
  padding: 8px 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--warn-tx);
  background: var(--warn-bg);
  border: 1px solid var(--warn-bd);
  border-radius: 8px;
}
#ns-agent-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 56vh;
  overflow-y: auto;
  padding-right: 2px;
}
.ns-group-label {
  margin: 10px 0 2px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tx3);
}
.ns-group-label:first-child {
  margin-top: 0;
}
.ns-agent {
  display: flex;
  flex-direction: column;
}
.ns-agent-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  background: var(--bg-raise);
  border: 1px solid var(--bd);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--tx2);
  transition:
    background 0.15s,
    border-color 0.15s,
    box-shadow 0.15s;
}
.ns-agent-item:hover {
  background: var(--bg-hover);
  color: var(--tx);
}
.ns-agent-item.selected {
  border-color: var(--ac);
  color: var(--tx);
  box-shadow: 0 0 0 1px var(--ac);
}
.ns-agent-item:focus-visible {
  outline: 2px solid var(--ac);
  outline-offset: 1px;
}
.ns-agent-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--ac-dim);
  color: var(--ac-tx);
  flex-shrink: 0;
  transition:
    background 0.15s,
    color 0.15s;
}
.ns-agent-icon svg {
  width: 18px;
  height: 18px;
}
.ns-agent-item.selected .ns-agent-icon {
  background: var(--grad-ac);
  color: #fff;
}
.ns-agent-name {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
}
.ns-agent-info {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--bd-str);
  background: transparent;
  color: var(--tx3);
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.ns-agent-info:hover,
.ns-agent-info.open {
  border-color: var(--ac-bd);
  color: var(--ac-tx);
  background: var(--ac-dim);
}
/* Expanded description — a panel below the row, like a Hausaufgabe sub-item */
.ns-agent-desc {
  margin: 4px 0 2px 20px;
  padding: 9px 12px;
  background: var(--bg-surf);
  border: 1px solid var(--bd-sub);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--tx2);
  line-height: 1.5;
}

/* ── Billing: plan badges + pricing modal ─────────────────────────────────── */
/* Locked tool in the New-Session picker: dim the row, show a Plus/Pro chip. */
.ns-agent-item.locked {
  opacity: 0.72;
}
.ns-agent-item.locked .ns-agent-name {
  color: var(--tx3);
}
.ns-agent-lock,
.top-menu-plan-badge {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
}
/* Plan colors: Plus = accent, Pro = a warmer/premium tone; Free = muted. */
.plan-free {
  background: var(--bd);
  color: var(--tx2);
}
.plan-plus {
  background: var(--ac-dim);
  color: var(--ac-tx);
}
.plan-pro {
  background: linear-gradient(135deg, #7c3aed, #db2777);
  color: #fff;
}
.top-menu-plan-badge {
  font-size: 10px;
  padding: 1px 7px;
}

/* Pricing modal: three tier cards side by side. Override the base .bv-modal-box
   width (defined later in the file) with a compound selector so it actually
   wins — otherwise three cards get crammed into 520px. */
.bv-modal-box.pricing-box {
  width: min(900px, 94vw);
  max-width: none;
  padding: 32px 34px 26px;
  gap: 8px;
}
.pricing-box .bv-modal-title {
  text-align: center;
  font-size: 20px;
}
.pricing-sub {
  text-align: center;
  color: var(--tx3);
  font-size: 13px;
  margin: 0 0 22px;
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
}
.pricing-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 20px;
  background: var(--bg-raise);
  border: 1px solid var(--bd-sub);
  border-radius: var(--r-l, 16px);
  position: relative;
}
/* Current plan: subtle. Recommended (Plus): bold accent so the eye lands there. */
.pricing-card.current {
  border-color: var(--ac-bd);
}
.pricing-card.recommended {
  border-color: var(--ac);
  box-shadow:
    0 0 0 1px var(--ac),
    var(--shadow-3);
}
.pricing-tag {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--grad-ac);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 13px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: var(--shadow-2, 0 2px 8px rgba(0, 0, 0, 0.25));
}
.pricing-name {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tx3);
}
.pricing-price {
  font-size: 32px;
  font-weight: 800;
  color: var(--tx);
  line-height: 1;
}
.pricing-per {
  font-size: 13px;
  font-weight: 500;
  color: var(--tx3);
  margin-left: 3px;
}
.pricing-feats {
  list-style: none;
  margin: 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--bd-sub);
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}
.pricing-feats li {
  position: relative;
  padding-left: 24px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--tx2);
}
.pricing-feats li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ac);
  font-weight: 700;
}
.pricing-btn {
  width: 100%;
  margin-top: 6px;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid var(--bd-str);
  background: transparent;
  color: var(--tx);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s,
    filter 0.15s;
}
.pricing-btn.primary {
  background: var(--grad-ac);
  border-color: transparent;
  color: #fff;
}
.pricing-btn.primary:hover {
  filter: brightness(1.06);
}
.pricing-btn.ghost:hover {
  border-color: var(--ac-bd);
  background: var(--bg-hover);
}
.pricing-btn.is-current {
  cursor: default;
  opacity: 0.55;
}
.pricing-box .bv-modal-footer {
  margin-top: 6px;
}
@media (max-width: 720px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }
  .bv-modal-box.pricing-box {
    max-height: 88vh;
    overflow-y: auto;
  }
}

/* ── Custom popover selects (.cselect-*) ──────────────────────────────────── */
.cselect-wrap {
  position: relative;
}
.cselect-wrap .cselect-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  font-family: inherit;
  background: var(--bg-input);
  color: var(--tx);
  border: 1px solid var(--bd);
  border-radius: 8px;
  padding: 4px 9px;
  font-size: 13px;
  line-height: 1.5;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s,
    box-shadow 0.15s;
}
.cselect-wrap .cselect-trigger:hover {
  border-color: var(--bd-str);
}
.cselect-wrap.open .cselect-trigger {
  border-color: var(--ac);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.cselect-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.cselect-wrap .cselect-chev {
  width: 10px;
  height: 6px;
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
  transition: transform 0.18s;
}
.cselect-wrap.open .cselect-chev {
  transform: rotate(180deg);
}

@keyframes cselect-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}
.cselect-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  max-height: 320px;
  overflow-y: auto;
  flex-direction: column;
  gap: 2px;
  background: var(--bg-surf);
  border: 1px solid var(--bd-sub);
  border-radius: 12px;
  padding: 6px;
  box-shadow: var(--shadow-2);
  z-index: 1200;
}
.cselect-menu.open {
  display: flex;
  animation: cselect-in 0.15s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.cselect-menu--right {
  left: auto;
  right: 0;
}
.cselect-menu .cselect-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  background: transparent;
  color: var(--tx2);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}
.cselect-menu .cselect-item:hover {
  background: var(--bg-hover);
  color: var(--tx);
}
.cselect-menu .cselect-item.selected {
  color: var(--tx);
  font-weight: 500;
}
.cselect-check {
  color: var(--ac);
  font-weight: 700;
  flex-shrink: 0;
}

/* Modal selects (settings age, upload grade/topic/type) — larger trigger */
.cselect-wrap[data-for='age-range-select'],
.cselect-wrap[data-for='bv-m2-grade'],
.cselect-wrap[data-for='bv-m2-topic'],
.cselect-wrap[data-for='bv-m2-type'] {
  flex: 1;
  min-width: 200px;
}
.cselect-wrap[data-for='age-range-select'] .cselect-trigger,
.cselect-wrap[data-for='bv-m2-grade'] .cselect-trigger,
.cselect-wrap[data-for='bv-m2-topic'] .cselect-trigger,
.cselect-wrap[data-for='bv-m2-type'] .cselect-trigger {
  padding: 7px 11px;
  font-size: 14px;
}

#voice-transcript {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--sb) var(--bg-panel);
}
#voice-transcript::-webkit-scrollbar {
  width: 7px;
}
#voice-transcript::-webkit-scrollbar-track {
  background: var(--bg-panel);
}
#voice-transcript::-webkit-scrollbar-thumb {
  background: var(--sb);
  border-radius: 4px;
}

@keyframes vt-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.vt-user {
  color: var(--usr-tx);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.16) 0%, rgba(139, 92, 246, 0.1) 100%);
  border: 1px solid var(--usr-bd);
  border-radius: 12px 12px 4px 12px;
  padding: 8px 11px;
  margin-bottom: 8px;
  word-break: break-word;
  white-space: pre-wrap;
  align-self: flex-end;
  max-width: 88%;
  box-shadow: var(--shadow-1);
  animation: vt-in 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes vt-shimmer {
  to {
    background-position: -200% 0;
  }
}
.vt-searching {
  font-size: 11.5px;
  font-style: italic;
  text-align: center;
  padding: 4px 0;
  align-self: center;
  background: linear-gradient(90deg, var(--tx3) 30%, var(--tx) 50%, var(--tx3) 70%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: vt-shimmer 1.6s linear infinite;
}

.vt-assistant {
  color: var(--tx);
  background: var(--bg-surf);
  border: 1px solid var(--bd);
  border-radius: 12px 12px 12px 4px;
  padding: 8px 11px;
  margin-bottom: 12px;
  word-break: break-word;
  white-space: pre-wrap;
  align-self: flex-start;
  max-width: 92%;
  box-shadow: var(--shadow-1);
  animation: vt-in 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.vt-source {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 0.72em;
  color: var(--tx3);
  font-style: italic;
}

.vt-source-btn {
  background: none;
  border: 1px solid var(--sq-bd);
  border-radius: 999px;
  color: var(--sq-tx);
  font-size: inherit;
  font-style: normal;
  font-family: inherit;
  padding: 1px 8px;
  cursor: pointer;
  transition:
    border-color 0.15s,
    color 0.15s,
    background 0.15s;
}
.vt-source-btn:hover {
  border-color: var(--ac);
  color: var(--ac-tx);
  background: var(--ac-dim);
}
.vt-source-btn--out-of-scope {
  border-color: var(--tx3);
  color: var(--tx3);
  opacity: 0.6;
}
.vt-source-btn--out-of-scope:hover {
  border-color: var(--tx2);
  color: var(--tx2);
  opacity: 0.8;
}

#voice-dots span {
  border-radius: 50%;
  background: var(--ac);
  animation: vdot 1s infinite ease-in-out;
}
#voice-dots span:nth-child(2) {
  animation-delay: 0.2s;
}
#voice-dots span:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes vdot {
  0%,
  100% {
    opacity: 0.2;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

/* ── Input area: text OR voice mode (toggled via .mode-text / .mode-voice) ── */
#input-area {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
#input-area.mode-text #voice-controls-row {
  display: none;
}
#input-area.mode-voice #voice-text-row,
#input-area.mode-voice #input-resize-handle {
  display: none;
}

/* Drag divider: grip pill on the transcript/input boundary (text mode only) */
#input-resize-handle {
  height: 14px;
  flex-shrink: 0;
  cursor: ns-resize;
  display: flex;
  align-items: center;
  justify-content: center;
}
#input-resize-grip {
  width: 36px;
  height: 5px;
  border-radius: 3px;
  background: var(--bd);
  transition:
    background 0.15s,
    transform 0.15s;
}
#input-resize-handle:hover #input-resize-grip,
#input-resize-handle.dragging #input-resize-grip {
  background: var(--ac);
  transform: scaleX(1.2);
}
body.resizing-v {
  cursor: ns-resize !important;
  user-select: none;
}

/* Mode-switch buttons (🎤 / ⌨) */
.input-mode-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-raise);
  border: 1px solid var(--bd);
  border-radius: 8px;
  color: var(--tx2);
  cursor: pointer;
  line-height: 1;
  padding: 6px 8px;
  flex-shrink: 0;
  font-family: inherit;
  transition:
    background 0.15s,
    color 0.15s;
}
.input-mode-btn:hover {
  background: var(--bg-hover);
  color: var(--tx);
}

/* Text-input card: textarea fills the card, footer row lives inside it */
#voice-text-row {
  display: flex;
  flex-direction: column;
  height: 90px;
  min-height: 64px;
  margin: 0 10px 8px;
  background: var(--bg-input);
  border: 1px solid var(--bd);
  border-radius: 12px;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
#voice-text-row:focus-within {
  border-color: var(--ac);
  box-shadow:
    0 0 0 3px rgba(99, 102, 241, 0.15),
    var(--shadow-1);
}

#voice-text-input {
  flex: 1;
  min-height: 0;
  background: transparent;
  border: none;
  color: var(--tx);
  font-size: 12.5px;
  line-height: 1.5;
  padding: 8px 10px 4px;
  outline: none;
  resize: none;
  font-family: inherit;
  scrollbar-width: thin;
  scrollbar-color: var(--sb) var(--bg-input);
}

#voice-text-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 8px 10px;
  flex-shrink: 0;
}

#voice-text-hint {
  flex: 1;
  font-size: 10px;
  color: var(--tx4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

#btn-text-send {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--grad-ac);
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 12px;
  flex-shrink: 0;
  font-family: inherit;
  transition:
    filter 0.15s,
    transform 0.1s;
}
#btn-text-send svg {
  flex-shrink: 0;
}
#btn-text-send:hover {
  filter: brightness(1.12);
}
#btn-text-send:active {
  transform: scale(0.96);
}

/* Voice controls row */
#voice-controls-row {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 10px;
  flex-shrink: 0;
}

#btn-voice {
  flex: 1;
  padding: 8px 10px;
  background: var(--grad-ac);
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  transition:
    filter 0.15s,
    transform 0.1s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 2px 12px rgba(99, 102, 241, 0.3);
}
#btn-voice:hover {
  filter: brightness(1.12);
}
#btn-voice:active {
  transform: scale(0.985);
}
#btn-voice.active {
  background: var(--dn-bg);
  color: var(--dn-tx);
  box-shadow: none;
  filter: none;
}
#btn-voice.active:hover {
  background: var(--dn-h);
}

#voice-state-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 5px 10px;
  overflow: hidden;
}

#voice-dots {
  display: none;
  align-items: center;
  gap: 4px;
  padding: 0;
}
#voice-dots span {
  width: 5px;
  height: 5px;
}

#voice-status {
  font-size: 10.5px;
  color: var(--tx3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0;
  min-height: unset;
  text-align: left;
  min-width: 0;
  flex: 1;
}

/* ── SQ3R panel ──────────────────────────────────────────────────────────── */
#sqrr-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 0 8px;
}

/* Phase indicator bar — chevron stepper */
#sqrr-phase-bar {
  display: flex;
  align-items: stretch;
  padding: 8px 12px 6px;
  gap: 0;
}

.sqrr-chevron {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  margin-left: -10px;
  padding: 0 6px 0 16px;
  background: var(--bg-raise);
  color: var(--tx4);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: default;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%);
  transition:
    background 0.2s,
    color 0.2s;
  z-index: 1;
}
.sqrr-chevron:nth-child(1) {
  z-index: 4;
}
.sqrr-chevron:nth-child(2) {
  z-index: 3;
}
.sqrr-chevron:nth-child(3) {
  z-index: 2;
}
.sqrr-chevron:nth-child(4) {
  z-index: 1;
}

.sqrr-chevron--first {
  margin-left: 0;
  padding-left: 10px;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
}
.sqrr-chevron--last {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10px 50%);
  padding-right: 10px;
}

.sqrr-chevron.active {
  background: var(--grad-ac);
  color: #fff;
}
.sqrr-chevron.done {
  background: var(--act-bg);
  color: var(--act-tx);
}

/* Phase content areas */
.sqrr-phase-content {
  flex: 1;
  min-height: 0;
  padding: 6px 12px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sqrr-hint {
  font-size: 11.5px;
  color: var(--tx3);
  line-height: 1.5;
  margin: 0;
}
.sqrr-hint strong {
  color: var(--tx2);
}

/* Spoken-instruction opening — phase-panel text that is also read aloud.
   Slim by default: quiet grey text, no card chrome, no bubble dot. The solid
   boxed variant (--solid) is kept for the Trainer flashcard question, which
   needs visual weight. Mirrors the Vorlesung structure-skeleton visual. */
.agent-speech-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 14px 18px;
}
.agent-speech-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(320px, 96%);
}
.agent-speech-card .agent-speech-dot {
  display: none; /* slim opening: no speech-bubble dot */
}
.agent-speech-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ac-dim);
  border: 1px solid var(--ac-bd);
  flex-shrink: 0;
  align-self: center;
  animation: vplan-pulse 1.6s ease-in-out infinite;
}
.agent-speech-card .sqrr-hint {
  font-size: 12px;
  color: var(--tx3);
  line-height: 1.55;
  text-align: center;
}
.agent-speech-card .sqrr-hint--warn {
  color: var(--dn-tx);
}

/* Solid boxed variant — Trainer flashcard question only. */
.agent-speech-card--solid {
  align-items: flex-start;
  gap: 12px;
  width: min(280px, 92%);
  padding: 18px 20px;
  background: var(--bg-surf);
  border: 1px solid var(--bd-sub);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-2);
}
.agent-speech-card--solid .agent-speech-dot {
  display: block; /* restore the pulsing dot in the boxed variant */
}
.agent-speech-card--solid .sqrr-hint {
  font-size: 12.5px;
  color: var(--tx2);
  text-align: left;
}

/* Dictation button while recording — red pulse until the utterance is done */
#btn-dictate.recording {
  color: var(--dn-tx);
  border-color: var(--dn-tx);
  animation: dictate-pulse 1.2s ease-in-out infinite;
}
@keyframes dictate-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

.sqrr-label {
  font-size: 10.5px;
  color: var(--tx3);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: -2px;
  flex-shrink: 0;
}

.sqrr-textarea {
  flex: 1;
  min-height: 60px;
  background: var(--bg-panel);
  border: 1px solid var(--bd);
  border-radius: 5px;
  color: var(--tx);
  font-size: 11.5px;
  font-family: inherit;
  line-height: 1.5;
  padding: 7px 9px;
  resize: none;
  max-height: none;
  outline: none;
}
.sqrr-textarea:focus {
  border-color: var(--ac);
}

/* Book locked */
#pdf-panel.pdf-locked {
  overflow: hidden;
}
#pdf-panel.pdf-locked #canvas-wrap {
  visibility: hidden;
}

/* ── SQ3R "book closed" overlay ──────────────────────────────────────────── */
#sqrr-closed-overlay {
  position: absolute;
  inset: 0;
  background: var(--ov-bg);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sqrr-closed-inner {
  text-align: center;
  color: var(--ov-tx);
  line-height: 1.8;
}
.sqrr-closed-icon {
  font-size: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  margin: 0 auto 14px;
  background: var(--ac-dim);
  border: 1px solid var(--ac-bd);
  border-radius: 50%;
}
.sqrr-closed-inner p {
  font-size: 18px;
  font-weight: 600;
  color: var(--ov-tx);
  margin: 0;
}
.sqrr-closed-inner small {
  font-size: 12px;
  color: var(--ov-sm);
}

/* ── Reprocessing required overlay ───────────────────────────────────── */
#reprocessing-overlay {
  position: absolute;
  inset: 0;
  background: var(--ov-bg);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reprocessing-overlay-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  color: var(--ov-tx);
}
.reprocessing-overlay-icon {
  font-size: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  background: var(--ac-dim);
  border: 1px solid var(--ac-bd);
  border-radius: 50%;
}
.reprocessing-overlay-inner p {
  font-size: 18px;
  font-weight: 600;
  color: var(--ov-tx);
  margin: 0;
}
.reprocessing-overlay-inner small {
  font-size: 12px;
  color: var(--ov-sm);
  max-width: 280px;
  display: block;
  line-height: 1.5;
}

.sqrr-action-btn {
  align-self: flex-end;
  margin-top: auto;
  background: var(--bg-raise);
  border: 1px solid var(--bd);
  border-radius: 8px;
  color: var(--tx2);
  font-size: 13px;
  padding: 6px 14px;
  cursor: pointer;
  font-family: inherit;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}
.sqrr-action-btn:hover {
  background: var(--bg-hover);
  color: var(--tx);
  border-color: var(--bd-str);
}

.sqrr-gate-btn {
  align-self: stretch;
  margin-top: auto;
  background: var(--grad-ac);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 14px;
  cursor: pointer;
  font-family: inherit;
  transition:
    filter 0.15s,
    transform 0.1s;
}
.sqrr-gate-btn:hover:not(:disabled) {
  filter: brightness(1.12);
}
.sqrr-gate-btn:active:not(:disabled) {
  transform: scale(0.985);
}

.sqrr-action-btn:disabled,
.sqrr-gate-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Button rows — full-width gate/action buttons, no separators */
.sqrr-btn-row {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.sqrr-btn-row > .sqrr-action-btn,
.sqrr-btn-row > .sqrr-gate-btn {
  flex: 1;
  padding: 8px 10px;
  margin-top: 0;
  align-self: auto;
}

.sqrr-label-sub {
  font-weight: 400;
  color: var(--tx4);
  text-transform: none;
  letter-spacing: 0;
}

.sqrr-textarea--small {
  min-height: 40px;
  max-height: none;
}

/* Phase 4 — one question at a time */
#sqrr-cards-area {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sqrr-q-counter {
  font-size: 10px;
  color: var(--tx4);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: -4px;
}

.sqrr-q-text {
  font-size: 13px;
  color: var(--sq-tx);
  line-height: 1.6;
  margin: 0;
  font-weight: 500;
}

.sqrr-answer-input {
  flex: 1;
  min-height: 80px;
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-panel);
  border: 1px solid var(--sq-bd);
  border-radius: 5px;
  color: var(--tx);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.6;
  padding: 9px 10px;
  resize: none;
  max-height: none;
  outline: none;
}
.sqrr-answer-input:focus {
  border-color: var(--ac);
}

.sqrr-hint--loading {
  color: var(--tx4);
  font-style: italic;
  font-size: 11px;
}

/* Disabled states */
.sqrr-textarea:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Phase 4 — Question Check scored list */
#sqrr-check-list {
  flex: 0 1 auto;
  max-height: 180px;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--card-bg);
  border: 1px solid var(--bd-sub);
  border-radius: 5px;
  padding: 6px 8px;
}

.sqrr-p3-qlist {
  max-height: 180px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--card-bg);
  border: 1px solid var(--bd-sub);
  border-radius: 5px;
  padding: 6px 8px;
}

.sqrr-check-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 4px;
  border-bottom: 1px solid var(--bd-sub);
}
.sqrr-check-row:last-child {
  border-bottom: none;
}

.sqrr-score-badge {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: transform 0.1s;
}
.sqrr-score-badge:hover {
  transform: scale(1.3);
}
.sqrr-score-badge--relevant {
  background: var(--score-rel);
}
.sqrr-score-badge--partial {
  background: var(--score-par);
}
.sqrr-score-badge--irrelevant {
  background: var(--score-irr);
}
.sqrr-score-badge--unscored {
  background: var(--score-un);
  border: 1px solid var(--score-un-bd);
}

.sqrr-check-q-text {
  flex: 1;
  font-size: 11.5px;
  color: var(--tx);
  line-height: 1.4;
  font-family: inherit;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 1px 4px;
  outline: none;
  min-width: 0;
}
.sqrr-check-q-text:hover {
  border-color: var(--bd);
}
.sqrr-check-q-text:focus {
  border-color: var(--ac);
  background: var(--bg-panel);
  color: var(--tx);
}

.sqrr-check-refine {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--sq-bd);
  font-size: 11px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  transition: color 0.1s;
}
.sqrr-check-refine:hover:not(:disabled) {
  color: var(--sq-tx);
}
.sqrr-check-refine:disabled {
  color: var(--tx4);
  cursor: default;
}

.sqrr-check-del {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--tx4);
  font-size: 14px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  transition: color 0.1s;
}
.sqrr-check-del:hover {
  color: var(--dn-tx);
}

.sqrr-score-reason {
  font-size: 10.5px;
  color: var(--tx2);
  background: var(--bg-panel);
  border: 1px solid var(--bd-sub);
  border-radius: 4px;
  padding: 5px 8px;
  margin: 2px 20px 4px 20px;
  line-height: 1.5;
}

/* Add-rows: 44px button-only row — mirrors voice-text-row */
#sqrr-p2-add-row,
#sqrr-p3-add-row,
#sqrr-check-add-row {
  display: flex;
  height: 44px;
  flex-shrink: 0;
  align-items: center;
  padding: 0;
  flex: 0 0 auto;
}
/* "+" button fills full width */
#sqrr-p2-add-row > .sqrr-action-btn,
#sqrr-p3-add-row > .sqrr-action-btn,
#sqrr-check-add-row > .sqrr-action-btn {
  flex: 1;
  margin-top: 0;
}

/* Universal gate-button row: always 44px — mirrors voice-controls-row. */
.sqrr-phase-content > .sqrr-btn-row {
  height: 44px;
  flex-shrink: 0;
  align-items: center;
  margin-top: 0;
}

/* Filler elements: absorb remaining space above the two bottom rows */
.sqrr-phase-content > .sqrr-hint {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  max-height: none;
}
/* Question lists: 1/3 of list+input space (flex-basis 0 for proportional growth) */
#sqrr-p2-list {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  max-height: none;
}
#sqrr-p3-prior {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  max-height: none;
}
#sqrr-check-list {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  max-height: none;
}
#sqrr-review-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  max-height: none;
}

/* Textarea fillers — new-question inputs get 2/3 of list+input space */
#sqrr-p2 > .sqrr-check-input,
#sqrr-p3 > .sqrr-check-input,
#sqrr-p4 > .sqrr-check-input {
  flex: 2 2 0;
  min-height: 40px;
}

/* Phase 5: two gate rows, no add-row.
   submit-row has margin-top:0 (textarea flex:1 pushes it down);
   next-row cancels the 6px gap so both rows are flush like voice rows. */
#sqrr-p5 {
  padding-bottom: 0;
}
#sqrr-p5-row-submit {
  margin-top: 0;
}
#sqrr-p5-row-next {
  margin-top: -6px;
}

.sqrr-check-input {
  flex: 1;
  min-height: 0;
  background: var(--bg-panel);
  border: 1px solid var(--sq-bd);
  border-radius: 5px;
  color: var(--tx);
  font-size: 11.5px;
  font-family: inherit;
  padding: 5px 8px;
  outline: none;
  resize: none;
  line-height: 1.5;
}
.sqrr-check-input:focus {
  border-color: var(--ac);
}

/* Phase 5 discuss sub-state */
.sqrr-recite-fixed {
  background: var(--card-bg);
  border: 1px solid var(--bd-sub);
  border-radius: 6px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex-shrink: 0;
}

.sqrr-recite-btns {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.sqrr-recite-btns > button {
  flex: 1;
}

/* Phase 5 — recite */
.sqrr-recite-header {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: var(--card-bg);
  border: 1px solid var(--bd-sub);
  border-radius: 5px;
  padding: 8px 10px;
}

.sqrr-recite-counter {
  font-size: 10px;
  color: var(--sq-tx);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.sqrr-recite-q {
  font-size: 12.5px;
  color: var(--tx);
  line-height: 1.5;
  font-weight: 500;
}

/* ── Umfeldanalyse panel ─────────────────────────────────────────────────── */
#uma-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 0 8px;
}

#uma-perspective-bar {
  display: flex;
  gap: 4px;
  padding: 8px 12px 4px;
  flex-shrink: 0;
}

.uma-persp-btn {
  flex: 1;
  min-width: 0;
  background: var(--bg-raise);
  border: 1px solid var(--bd);
  border-radius: 5px;
  color: var(--tx3);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 2px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}
.uma-persp-btn:hover {
  background: var(--bg-hover);
  color: var(--tx2);
}
.uma-persp-btn.active {
  background: var(--grad-ac);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 1px 8px rgba(99, 102, 241, 0.35);
}

/* Note input fills available space in the left panel (flex:1 from sqrr-check-input) */

/* Add row: 44px — mirrors #voice-text-row */
#uma-add-row {
  display: flex;
  height: 44px;
  flex-shrink: 0;
  align-items: center;
  padding: 0;
  flex: 0 0 auto;
}
#uma-add-row > .sqrr-action-btn {
  flex: 1;
  margin-top: 0;
}

/* Nav row: 44px — mirrors #voice-controls-row */
#uma-nav-row {
  height: 44px;
  flex-shrink: 0;
  align-items: center;
  margin-top: 0;
}

/* Note row inside aufgaben-p3 — mirrors #uma-add-row */
#aufgaben-note-row {
  display: flex;
  height: 44px;
  flex-shrink: 0;
  align-items: center;
  padding: 0;
  flex: 0 0 auto;
}
#aufgaben-note-row > .sqrr-action-btn {
  flex: 1;
  margin-top: 0;
}

/* ── Aufgaben panel ──────────────────────────────────────────────────────── */
#aufgaben-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 0 8px;
}

#aufgaben-phase-bar {
  display: flex;
  align-items: stretch;
  padding: 8px 12px 6px;
  gap: 0;
}

/* ── Explain + Abfrage + Fehlerjagd + Debatte panels (shared scorecard) ──────── */
#explain-panel,
#abfrage-panel,
#fehlerjagd-panel,
#debatte-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 0 8px;
}
#explain-phase-bar,
#abfrage-phase-bar,
#fehlerjagd-phase-bar,
#debatte-phase-bar {
  display: flex;
  align-items: stretch;
  padding: 8px 12px 6px;
  gap: 0;
}
#explain-loading,
#abfrage-loading,
#fehlerjagd-loading,
#debatte-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
}

/* Debate setup card: the Streitfrage + the agent's stance (shown, not hidden) */
.deb-setup {
  margin: 4px 0 8px;
  padding: 10px 12px;
  background: var(--ac-dim);
  border: 1px solid var(--ac-bd);
  border-radius: 8px;
}
.deb-topic {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--tx);
}
.deb-stance {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--ac-tx);
}
/* The flawed explanation the student must critique */
.fj-flawed {
  margin: 6px 0 10px;
  padding: 10px 12px;
  background: var(--bg-surf);
  border: 1px solid var(--bd-sub);
  border-radius: 8px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--tx);
  max-height: 260px;
  overflow-y: auto;
}
/* Scorecard: the flawed claim struck through, the correction below */
.fj-claim {
  text-decoration: line-through;
  color: var(--tx2);
  font-weight: 500;
}
.fj-correction {
  color: var(--tx);
}
#explain-progress {
  margin: 4px 0 8px;
}
.expl-scorecard {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 2px;
}
.expl-result-title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tx3);
}
.expl-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 10px;
  margin-bottom: 6px;
  border: 1px solid var(--bd-sub);
  border-radius: 8px;
  background: var(--bg-surf);
}
.expl-mark {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}
.expl-mark--green {
  background: #059669;
}
.expl-mark--yellow {
  background: #d97706;
}
.expl-mark--red {
  background: #dc2626;
}
.expl-row-text {
  flex: 1;
  min-width: 0;
}
.expl-topic {
  font-size: 13px;
  font-weight: 600;
  color: var(--tx);
}
.expl-expl {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--tx2);
}

#aufgaben-question-list {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
}

#aufgaben-spinner-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  flex-shrink: 0;
}

.aufgaben-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--bd);
  border-top-color: var(--ac);
  border-radius: 50%;
  flex-shrink: 0;
  animation: aufgaben-spin 0.7s linear infinite;
}

@keyframes aufgaben-spin {
  to {
    transform: rotate(360deg);
  }
}

.aufgaben-spinner-label {
  font-size: 11.5px;
  color: var(--tx3);
  font-style: italic;
}

.aufgaben-edit-ta {
  flex: 1;
  min-height: 44px;
  max-height: 120px;
  background: var(--bg-panel);
  border: 1px solid var(--ac);
  border-radius: 4px;
  color: var(--tx);
  font-size: 11.5px;
  font-family: inherit;
  padding: 4px 6px;
  outline: none;
  resize: vertical;
  line-height: 1.4;
}

/* ── Agent-switch modal (same pattern as #open-search-modal) ─────────────── */
#agent-switch-modal {
  position: fixed;
  inset: 0;
  background: var(--modal-scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
#agent-switch-box {
  background: var(--bg-panel);
  border: 1px solid var(--bd);
  border-radius: 8px;
  padding: 24px 28px;
  max-width: 340px;
  width: 90%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
#agent-switch-msg {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--tx);
  margin: 0;
  text-align: center;
}
#agent-switch-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
}
#btn-agent-switch-confirm {
  background: var(--grad-ac);
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  padding: 8px 24px;
  transition: filter 0.15s;
}
#btn-agent-switch-confirm:hover {
  filter: brightness(1.12);
}
#btn-agent-switch-cancel {
  background: var(--bg-raise);
  border: none;
  border-radius: 6px;
  color: var(--tx2);
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  padding: 8px 24px;
  transition:
    background 0.15s,
    color 0.15s;
}
#btn-agent-switch-cancel:hover {
  background: var(--bg-hover);
  color: var(--tx);
}

/* ── No-book placeholder (inside PDF panel / canvas-wrap) ─────────────────── */
#no-book-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 16px;
  width: 100%;
}
#no-book-box {
  background: var(--bg-panel);
  border: 1px solid var(--bd);
  border-radius: 8px;
  padding: 24px 28px;
  max-width: 360px;
  width: 90%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#no-book-msg {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--tx);
  margin: 0;
  text-align: center;
}
#no-book-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
#no-book-picker {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 220px;
  overflow-y: auto;
}
.no-book-pick-item {
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--bd);
  background: var(--bg);
  color: var(--tx);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.no-book-pick-item:hover {
  background: var(--bg-hover, var(--bg-panel));
  border-color: var(--bd-str, var(--bd));
}
#btn-no-book-buecher {
  background: var(--grad-ac);
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  padding: 8px 24px;
  transition: filter 0.15s;
}
#btn-no-book-buecher:hover {
  filter: brightness(1.12);
}

/* ── SQRR additions ───────────────────────────────────────────────────────── */
.sqrr-hint--warn {
  color: var(--dn-tx);
}

/* Phase 2/3 hint: fixed height, does not absorb filler space */
#sqrr-p2-hint {
  flex: 0 0 auto;
}

/* Split btn-row: back on left (secondary), gate on right (primary) */
.sqrr-btn-row--split {
  justify-content: space-between;
}
.sqrr-btn-row--split > .sqrr-back-btn {
  flex: 0 0 auto;
}
.sqrr-btn-row--split > .sqrr-gate-btn {
  flex: 1;
  margin-left: 6px;
}

.sqrr-back-btn {
  background: transparent;
  border: 1px solid var(--bd);
  border-radius: 6px;
  color: var(--tx3);
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  padding: 6px 12px;
  transition:
    background 0.15s,
    color 0.15s;
  white-space: nowrap;
}
.sqrr-back-btn:hover {
  background: var(--bg-hover);
  color: var(--tx);
}

/* ── Phase 6: Review ─────────────────────────────────────────────────────── */
#sqrr-review-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  padding: 4px 2px;
}

.sqrr-review-card {
  background: var(--card-bg);
  border: 1px solid var(--bd-sub);
  border-radius: 6px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sqrr-review-question {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tx);
  line-height: 1.45;
}

.sqrr-review-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sqrr-review-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sq-tx);
}

.sqrr-review-text {
  font-size: 12px;
  color: var(--tx2);
  line-height: 1.7;
  white-space: pre-wrap;
}

.sqrr-review-suggestion {
  border-top: 1px solid var(--sq-bd);
  padding-top: 8px;
}

.sqrr-review-suggestion .sqrr-review-label {
  color: var(--act-tx);
}
.sqrr-review-suggestion .sqrr-review-text {
  color: var(--tx);
}

.sqrr-review-improve-btn {
  align-self: flex-start;
  background: var(--bg-raise);
  border: none;
  border-radius: 6px;
  color: var(--tx2);
  cursor: pointer;
  font-size: 12px;
  padding: 5px 12px;
  font-family: inherit;
  transition:
    background 0.15s,
    color 0.15s;
}
.sqrr-review-improve-btn:hover {
  background: var(--bg-hover);
  color: var(--tx);
}
.sqrr-review-improve-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Phase 3 — prior-questions panel: card container, always visible */
#sqrr-p3-prior {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--bd-sub);
  border-radius: 5px;
  padding: 6px 8px;
  overflow-y: auto;
}

/* Inner question list fills the card without double-styling */
#sqrr-p3-prior > .sqrr-p3-qlist {
  flex: 1;
  min-height: 0;
  max-height: none;
  background: transparent;
  border: none;
  padding: 0;
}

.sqrr-prior-block {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sqrr-prior-text {
  background: var(--sq-bg);
  border: 1px solid var(--sq-bd);
  border-radius: 4px;
  color: var(--tx3);
  font-size: 11px;
  line-height: 1.55;
  padding: 6px 8px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Vorlesung ───────────────────────────────────────────────────────────────── */
#vorlesung-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 0 8px;
}

#vorlesung-phase-bar {
  display: flex;
  align-items: stretch;
  padding: 8px 12px 6px;
  gap: 0;
}

.vorlesung-lecture-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 4px;
}

/* ── Topic chips ─────────────────────────────────────────────────────── */
#vorlesung-topic-chips {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 6px;
}
.vorlesung-chip {
  font-size: 12px;
  font-weight: 600;
  padding: 8px 10px;
  border-radius: 4px;
  background: var(--bg-raise);
  border: 1px solid var(--bd);
  color: var(--tx);
  line-height: 1.4;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s,
    opacity 0.15s;
}
.vorlesung-chip--active {
  background: var(--ac-dim);
  border-color: var(--ac-bd);
  color: var(--ac-tx);
}
.vorlesung-chip--done {
  opacity: 0.45;
}

.vorlesung-raise-btn {
  background: var(--bg-raise);
  border: 1px solid var(--bd);
  border-radius: 6px;
  color: var(--tx2);
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  padding: 5px 11px;
  white-space: nowrap;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
  flex-shrink: 0;
}
.vorlesung-raise-btn:hover {
  background: var(--bg-hover);
  color: var(--tx);
}
.vorlesung-raise-btn.vorlesung-hand-raised {
  background: var(--dn-bg);
  border-color: var(--dn-tx);
  color: var(--dn-tx);
}

.vorlesung-notes {
  max-height: none;
  resize: none;
}

.vorlesung-hand-status {
  display: block;
  font-size: 11px;
  font-style: italic;
  color: var(--tx3);
  min-height: 16px;
  margin-top: 3px;
}

/* ── Topic review container ─────────────────────────────────────────── */
#vorlesung-topic-review {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* ── Topic list (structure review phase) ────────────────────────────── */
/* ── Plan skeleton: centered card previewing the outline being built ── */
#vorlesung-plan-spinner {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.vplan-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: min(250px, 92%);
  padding: 24px 26px 18px;
  background: var(--bg-surf);
  border: 1px solid var(--bd-sub);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-2);
}
.vplan-skel-row {
  display: flex;
  align-items: center;
  gap: 11px;
}
.vplan-skel-row:nth-child(2) .vplan-skel-bar,
.vplan-skel-row:nth-child(2) .vplan-skel-dot {
  animation-delay: 0.25s;
}
.vplan-skel-row:nth-child(3) .vplan-skel-bar,
.vplan-skel-row:nth-child(3) .vplan-skel-dot {
  animation-delay: 0.5s;
}
@keyframes vplan-pulse {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.9);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}
.vplan-skel-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ac-dim);
  border: 1px solid var(--ac-bd);
  flex-shrink: 0;
  animation: vplan-pulse 1.6s ease-in-out infinite;
}
.vplan-skel-bars {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vplan-skel-bar {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--bg-raise) 25%, var(--bg-hover) 50%, var(--bg-raise) 75%);
  background-size: 200% 100%;
  animation: vt-shimmer 1.6s linear infinite;
}
.vplan-skel-bar--title {
  width: 62%;
}
.vplan-skel-label {
  text-align: center;
  font-size: 11.5px;
  color: var(--tx3);
  margin-top: 2px;
}

.vorlesung-topic-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 8px 0 0;
}

/* ── Timeline rows: numbered node + connecting line + card body ─────── */
.vorlesung-topic-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 5px 0 5px 2px;
  flex-shrink: 0;
}
.vorlesung-topic-row::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--bd-sub);
  pointer-events: none;
}
.vorlesung-topic-row:first-child::before {
  top: 14px;
}
.vtl-node {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--grad-ac);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 1px 6px rgba(99, 102, 241, 0.35);
}
.vtl-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--card-bg);
  border: 1px solid var(--bd-sub);
  border-radius: 10px;
  padding: 8px 10px;
}
.vtl-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

/* ── View mode (read-only) ──────────────────────────────────────────── */
.vorlesung-topic-title-text {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--tx);
  line-height: 1.4;
  word-break: break-word;
}
.vorlesung-topic-desc-text {
  font-size: 11px;
  color: var(--tx2);
  line-height: 1.5;
  white-space: pre-wrap;
}
.vtl-angle {
  align-self: flex-start;
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--warn-tx);
  background: var(--warn-bg);
  border: 1px solid var(--warn-bd);
  border-radius: 999px;
  padding: 2px 9px;
}

/* ── Weight: Kurz · Normal · Fokus ──────────────────────────────────── */
.vtl-weight {
  display: flex;
  gap: 3px;
  margin-top: 2px;
}
.vtl-weight-btn {
  background: transparent;
  border: 1px solid var(--bd-sub);
  border-radius: 999px;
  color: var(--tx3);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 9px;
  cursor: pointer;
  font-family: inherit;
  transition:
    background 0.13s,
    color 0.13s,
    border-color 0.13s;
}
.vtl-weight-btn:hover {
  color: var(--tx2);
  border-color: var(--bd-str);
}
.vtl-weight-btn.active {
  background: var(--ac-dim);
  border-color: var(--ac-bd);
  color: var(--ac-tx);
}

/* ── Add-section row ────────────────────────────────────────────────── */
.vtl-add-row {
  margin: 6px 0 2px 33px;
  padding: 7px 10px;
  background: transparent;
  border: 1px dashed var(--bd-str);
  border-radius: 10px;
  color: var(--tx3);
  font-size: 11.5px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  flex-shrink: 0;
  transition:
    color 0.15s,
    border-color 0.15s,
    background 0.15s;
}
.vtl-add-row:hover {
  color: var(--ac-tx);
  border-color: var(--ac-bd);
  background: var(--ac-dim);
}

/* ── Source scope toggle row ────────────────────────────────────────── */
#vorlesung-scope-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 4px 0 2px;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
}
.vtl-scope-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--tx4);
  transition: color 0.15s;
}
.vtl-scope-label.active {
  color: var(--ac-tx);
}

/* ── Edit mode ──────────────────────────────────────────────────────── */
.vorlesung-edit-title {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--tx);
  background: var(--bg-input);
  border: 1px solid var(--bd);
  border-radius: 6px;
  outline: none;
  padding: 3px 6px;
  font-family: inherit;
}
.vorlesung-edit-desc {
  font-size: 11px;
  color: var(--tx2);
  background: var(--bg-input);
  border: 1px solid var(--bd);
  border-radius: 6px;
  outline: none;
  padding: 3px 6px;
  resize: none;
  min-height: 36px;
  width: 100%;
  font-family: inherit;
  line-height: 1.5;
}
.vorlesung-edit-angle {
  font-size: 10.5px;
  color: var(--tx2);
  background: var(--bg-input);
  border: 1px solid var(--warn-bd);
  border-radius: 6px;
  outline: none;
  padding: 3px 6px;
  width: 100%;
  font-family: inherit;
}
.vorlesung-edit-title:focus,
.vorlesung-edit-desc:focus,
.vorlesung-edit-angle:focus {
  border-color: var(--ac);
}

/* ── Action buttons (top-right of row) ──────────────────────────────── */
.vorlesung-topic-edit-btn,
.vorlesung-topic-del {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--tx3);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 2px 3px;
  border-radius: 5px;
  font-family: inherit;
  transition:
    color 0.13s,
    background 0.13s;
}
.vorlesung-topic-del {
  font-size: 14px;
}
.vorlesung-topic-edit-btn:hover {
  color: var(--tx);
  background: var(--bg-hover);
}
.vorlesung-topic-del:hover {
  color: var(--dn-tx);
  background: var(--dn-bg);
}

/* ══════════════════════════════════════════════════════════════════════════════
   Bücher view
   ══════════════════════════════════════════════════════════════════════════════ */

#buecher-view {
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}

/* Same frame as the classroom subject space: fixed header + chips, the grid
   itself is a stretched panel card whose inside scrolls */
#bv-list {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 12px 20px 16px;
  gap: 12px;
}
#bv-book-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 16px;
  background: var(--bg-surf);
  border: 1px solid var(--bd-sub);
  border-radius: var(--r-l);
}

/* ── Upload card ─────────────────────────────────────────────────────────── */
.bv-upload-card {
  background: var(--bg-surf);
  border: 1px solid var(--bd);
  border-radius: 10px;
  padding: 20px 24px;
  flex-shrink: 0;
}

.bv-section-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tx2);
  margin-bottom: 14px;
}

.bv-upload-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.bv-text-input {
  flex: 1;
  min-width: 200px;
  background-color: var(--bg-input);
  color: var(--tx);
  border: 1px solid var(--bd);
  border-radius: 8px;
  padding: 7px 11px;
  font-size: 14px;
  outline: none;
  font-family: inherit;
}
.bv-text-input:focus {
  border-color: var(--ac);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
select.bv-text-input {
  padding-right: 30px;
  background-position: right 11px center;
}

.bv-file-input {
  color: var(--tx2);
  font-size: 13px;
  flex-shrink: 0;
}

/* ── Book grid (now hosts table) ─────────────────────────────────────────── */
#bv-book-grid {
  display: block;
}

.bv-empty {
  color: var(--tx2);
  font-size: 14px;
  padding: 12px 0;
}

/* ── Book table ──────────────────────────────────────────────────────────── */
.bv-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  background: var(--bg-surf);
  border: 1px solid var(--bd);
  border-radius: 10px;
  overflow: hidden;
  font-size: 14px;
}
.bv-table thead {
  background: var(--bg-raise);
}
.bv-table .bv-th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tx2);
  padding: 10px 14px;
  border-bottom: 1px solid var(--bd);
  white-space: nowrap;
}
.bv-th-sortable {
  cursor: pointer;
  user-select: none;
}
.bv-th-sortable:hover {
  color: var(--ac);
}
.bv-sort-icon {
  opacity: 0.55;
  margin-left: 3px;
}
.bv-th-grade {
  width: 120px;
}
.bv-th-topic {
  width: 185px;
}
.bv-th-type {
  width: 215px;
}
.bv-th-status {
  width: 245px;
}
.bv-th-action {
  width: 280px;
}
.bv-th-del {
  width: 44px;
}

.bv-row td {
  padding: 8px 14px;
  border-bottom: 1px solid var(--bd);
  vertical-align: middle;
}
.bv-row:last-child td {
  border-bottom: none;
}
.bv-row:hover td {
  background: var(--bg-hover);
}
.bv-row-flash td {
  background: var(--act-bg) !important;
  transition: background 1.2s;
}

.bv-cell-edit {
  cursor: text;
}
.bv-cell-text {
  display: inline-block;
  padding: 4px 7px;
  border: 1px solid transparent;
  border-radius: 5px;
  min-height: 24px;
  min-width: 40px;
  transition:
    border-color 0.12s,
    background 0.12s;
}
.bv-cell-edit:hover .bv-cell-text {
  border-color: var(--bd);
  background: var(--bg-input);
}
.bv-cell-text--empty {
  color: var(--tx3);
  font-style: italic;
}
.bv-cell-title .bv-cell-text {
  font-weight: 600;
}

.bv-cell-input {
  width: 100%;
  background-color: var(--bg-input);
  color: var(--tx);
  border: 1px solid var(--ac);
  border-radius: 8px;
  padding: 4px 7px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
}
select.bv-cell-input {
  padding: 3px 24px 3px 6px;
  background-position: right 7px center;
}

.bv-cell-status .bv-card-status {
  gap: 0;
  min-height: 0;
}
.bv-cell-status .bv-progress {
  min-width: 120px;
}
.bv-cell-action .bv-card-actions {
  gap: 6px;
  flex-direction: column;
}
.bv-cell-del {
  text-align: center;
}
.bv-cell-title {
  overflow: hidden;
}
.bv-cell-title .bv-cell-text {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

/* ── Book card ───────────────────────────────────────────────────────────── */
.bv-card {
  background: var(--bg-surf);
  border: 1px solid var(--bd);
  border-radius: 10px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 0.15s;
}
.bv-card:hover {
  border-color: var(--bd-str);
}

.bv-card-top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.bv-card-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.bv-title-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  color: var(--tx);
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 4px 7px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  outline: none;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.bv-title-input:hover {
  border-color: var(--bd);
  background: var(--bg-input);
}
.bv-title-input:focus {
  border-color: var(--ac);
  background: var(--bg-input);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.bv-btn {
  background: var(--bg-raise);
  color: var(--tx);
  border: 1px solid var(--bd);
  border-radius: var(--r-m);
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  transition:
    background 0.13s,
    border-color 0.13s;
  white-space: nowrap;
}
.bv-btn:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--bd-str);
}
.bv-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
body.light .bv-btn {
  background: #fff;
  border-color: var(--bd-str);
}
body.light .bv-btn:hover:not(:disabled) {
  background: var(--bg-raise);
  border-color: var(--tx3);
}
body.light .bv-btn--primary {
  background: var(--grad-ac);
  color: #fff;
  border-color: transparent;
}

.bv-btn--primary {
  background: var(--grad-ac);
  color: #fff;
  border-color: transparent;
  transition:
    filter 0.15s,
    transform 0.1s;
}
.bv-btn--primary:hover:not(:disabled) {
  background: var(--grad-ac);
  border-color: transparent;
  filter: brightness(1.12);
}
.bv-btn--primary:active:not(:disabled) {
  transform: scale(0.985);
}
body.light .bv-btn--primary:hover:not(:disabled) {
  background: var(--grad-ac);
  border-color: transparent;
  filter: brightness(1.12);
}

.bv-icon-btn {
  background: transparent;
  color: var(--tx2);
  border: none;
  border-radius: 5px;
  padding: 3px 7px;
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background 0.13s,
    color 0.13s;
}
.bv-icon-btn:hover {
  background: var(--bg-hover);
  color: var(--tx);
}

.bv-del-btn {
  color: var(--dn-tx);
  margin-left: auto;
}
.bv-del-btn:hover {
  background: var(--dn-bg);
}

/* ── Filter row ──────────────────────────────────────────────────────────── */
.bv-filter-row td {
  padding: 4px 8px;
  background: var(--bg-panel);
  border-bottom: 2px solid var(--bd);
}

.bv-filter-input,
.bv-filter-select {
  width: 100%;
  background-color: var(--bg-input);
  border: 1px solid var(--bd);
  border-radius: 8px;
  color: var(--tx);
  font-size: 12px;
  font-family: inherit;
  padding: 4px 7px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.12s;
}
.bv-filter-input:focus,
.bv-filter-select:focus {
  border-color: var(--ac);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.bv-filter-select {
  cursor: pointer;
  padding-right: 24px;
  background-position: right 7px center;
}

.bv-filter-empty {
  text-align: center;
  padding: 24px;
  color: var(--tx3);
  font-size: 13px;
  font-style: italic;
}

/* ── Status badges ───────────────────────────────────────────────────────── */
.bv-card-status {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 24px;
}

.bv-status {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 3px 10px;
  border-radius: 999px;
  display: inline-block;
  align-self: flex-start;
  white-space: nowrap;
}
.bv-status::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 6px;
  vertical-align: 1px;
  opacity: 0.85;
}

.bv-status--busy {
  background: var(--ac-dim);
  color: var(--ac-tx);
}
.bv-status--warn {
  background: #2a1f00;
  color: #d4a030;
}
.bv-status--ok {
  background: var(--act-bg);
  color: var(--act-tx);
}
.bv-status--ready {
  background: var(--act-bg);
  color: var(--act-tx);
}
.bv-status--error {
  background: #3f1818;
  color: #fca5a5;
}
body.light .bv-status--warn {
  background: #fff8e6;
  color: #8a5000;
}

/* ── Stage indicators ────────────────────────────────────────────────────── */
.bv-stages {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.bv-stage {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  transition: box-shadow 0.3s;
}

.bv-stage--done {
  background: var(--ac);
  color: #fff;
}
.bv-stage--pending {
  background: var(--bg-raise);
  color: var(--tx3);
  border: 1px solid var(--bd);
}
.bv-stage--active {
  background: var(--ac);
  color: #fff;
  animation: bv-pulse 1.6s ease-in-out infinite;
}

@keyframes bv-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 2px var(--ac-dim);
  }
  50% {
    box-shadow: 0 0 0 5px var(--ac-dim);
  }
}

.bv-stage-label {
  font-size: 12px;
  color: var(--tx2);
  margin-left: 2px;
}

.bv-progress {
  height: 4px;
  background: var(--bg-raise);
  border-radius: 2px;
  overflow: hidden;
}
.bv-progress-bar {
  height: 100%;
  background: var(--ac);
  border-radius: 2px;
  transition: width 0.4s ease;
}

.bv-progress-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bv-progress-row .bv-progress {
  flex: 1;
}
.bv-info-btn {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--bd-str);
  background: transparent;
  color: var(--tx3);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.bv-info-btn:hover {
  color: var(--tx);
  border-color: var(--tx3);
}

.bv-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Section editor
   ══════════════════════════════════════════════════════════════════════════════ */

.bv-editor-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.bv-editor-hdr {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--bd);
  background: var(--bg-raise);
  flex-shrink: 0;
}

.bv-editor-hdr-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--tx);
}

.bv-editor-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* PDF preview column */
.bv-prev-col {
  flex: 0 0 42%;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--bd);
  overflow: hidden;
  background: var(--bg-panel);
}

.bv-prev-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 14px 18px 10px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--bd);
}

.bv-prev-scroll {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 18px 16px;
}

.bv-prev-input {
  width: 66px;
  text-align: center;
  background: var(--bg-input);
  color: var(--tx);
  border: 1px solid var(--bd);
  border-radius: 5px;
  padding: 4px 6px;
  font-size: 13px;
  outline: none;
  font-family: inherit;
}
.bv-prev-input:focus {
  border-color: var(--ac);
}
.bv-prev-input::-webkit-inner-spin-button,
.bv-prev-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
}
.bv-prev-input[type='number'] {
  -moz-appearance: textfield;
}

.bv-prev-label {
  font-size: 12px;
  color: var(--tx2);
  white-space: nowrap;
}

.bv-prev-img {
  width: 100%;
  border-radius: 4px;
  border: 1px solid var(--bd);
}

.bv-prev-ph {
  color: var(--tx3);
  font-size: 13px;
  text-align: center;
  padding: 48px 0;
}

/* Table column */
.bv-table-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.bv-table-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--bd);
  flex-shrink: 0;
  flex-wrap: wrap;
  background: var(--bg-raise);
}

.bv-offset-label {
  font-size: 13px;
  color: var(--tx2);
  display: flex;
  align-items: center;
  gap: 6px;
}

.bv-offset-input {
  width: 64px;
  background: var(--bg-input);
  color: var(--tx);
  border: 1px solid var(--bd);
  border-radius: 5px;
  padding: 4px 7px;
  font-size: 13px;
  text-align: center;
  outline: none;
  font-family: inherit;
}
.bv-offset-input:focus {
  border-color: var(--ac);
}
.bv-offset-input::-webkit-inner-spin-button,
.bv-offset-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
}
.bv-offset-input[type='number'] {
  -moz-appearance: textfield;
}

/* Section table scroll wrapper */
.bv-table-scroll {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* Section table */
.bv-sec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.bv-sec-table thead {
  position: sticky;
  top: 0;
  background: var(--bg-raise);
  z-index: 1;
}

.bv-sec-table th {
  text-align: left;
  padding: 7px 10px;
  color: var(--tx2);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--bd);
}

.bv-sec-table td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--bd-sub);
  vertical-align: middle;
}

.bv-sec-table tr:hover td {
  background: var(--bg-hover);
}
.bv-row-sel td {
  background: var(--ac-dim) !important;
}
.bv-row-flash td {
  background: var(--act-bg) !important;
  transition: background 0.8s;
}
.bv-dragging {
  opacity: 0.35;
}
.bv-drop-above td {
  border-top: 2px solid var(--ac);
}
.bv-drop-below td {
  border-bottom: 2px solid var(--ac);
}

.bv-drag-handle {
  cursor: grab;
  color: var(--tx3);
  font-size: 15px;
  padding: 0 4px;
  user-select: none;
}
.bv-drag-handle:active {
  cursor: grabbing;
}

.bv-level-inp {
  width: 48px;
  text-align: center;
}
.bv-name-inp {
  width: 100%;
}
.bv-page-inp {
  width: 64px;
  text-align: center;
}

.bv-level-inp,
.bv-name-inp,
.bv-page-inp {
  background: var(--bg-input);
  color: var(--tx);
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 13px;
  outline: none;
  font-family: inherit;
}
.bv-level-inp:focus,
.bv-name-inp:focus,
.bv-page-inp:focus {
  border-color: var(--ac);
}

.bv-level-inp::-webkit-inner-spin-button,
.bv-level-inp::-webkit-outer-spin-button,
.bv-page-inp::-webkit-inner-spin-button,
.bv-page-inp::-webkit-outer-spin-button {
  -webkit-appearance: none;
}
.bv-level-inp[type='number'],
.bv-page-inp[type='number'] {
  -moz-appearance: textfield;
}

.bv-end-page-inp {
  color: var(--tx2);
  border-style: dashed !important;
}
.bv-end-page-inp:focus {
  color: var(--tx);
  border-color: var(--ac) !important;
  border-style: solid !important;
}

.bv-row-del {
  font-size: 16px;
}

/* ── Toast ───────────────────────────────────────────────────────────────── */
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}
#bv-toast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  padding: 10px 18px;
  border-radius: var(--r-m);
  font-size: 14px;
  font-weight: 500;
  z-index: 9000;
  display: none;
  box-shadow: var(--shadow-2);
  pointer-events: none;
  animation: toast-in 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.bv-toast--ok {
  background: var(--act-bg);
  color: var(--act-tx);
  border: 1px solid var(--act-tx);
}
.bv-toast--err {
  background: var(--dn-bg);
  color: var(--dn-tx);
  border: 1px solid var(--dn-tx);
}

/* ── List header (upload button row) ─────────────────────────────────────── */
.bv-list-header {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* ── Upload modals ───────────────────────────────────────────────────────── */
@keyframes modal-fade {
  from {
    opacity: 0;
  }
}
@keyframes modal-pop {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
}

.bv-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--modal-scrim);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: modal-fade 0.18s ease both;
}

.bv-modal-box {
  background: var(--bg-surf);
  border: 1px solid var(--bd-str);
  border-radius: var(--r-xl);
  padding: 28px 32px;
  width: min(520px, 90vw);
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: var(--shadow-3);
  animation: modal-pop 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.bv-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--tx);
  margin: 0;
}

.bv-modal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bv-modal-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tx2);
  margin-bottom: -4px;
}
.bv-modal-hint {
  font-size: 12px;
  color: #f59e0b;
  margin-top: -6px;
}

.bv-modal-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.bv-modal-box--spinner {
  align-items: center;
  text-align: center;
  gap: 18px;
  padding: 40px 36px;
  width: auto;
  min-width: 220px;
}

@keyframes bv-spin {
  to {
    transform: rotate(360deg);
  }
}
.bv-spinner {
  width: 44px;
  height: 44px;
  border: 3px solid var(--bd-str);
  border-top-color: var(--ac);
  border-radius: 50%;
  animation: bv-spin 0.75s linear infinite;
  flex-shrink: 0;
}
.bv-spinner-text {
  margin: 0;
  font-size: 14px;
  color: var(--tx2);
}

/* ── Drop zone ───────────────────────────────────────────────────────────── */
.bv-drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 2px dashed var(--bd-str);
  border-radius: var(--r-l);
  padding: 28px 20px;
  background: var(--bg-raise);
  color: var(--tx2);
  font-size: 13px;
  text-align: center;
  transition:
    border-color 0.15s,
    background 0.15s;
  cursor: default;
}
.bv-drop-zone:hover {
  border-color: var(--ac-bd);
}
.bv-drop-zone--active {
  border-color: var(--ac);
  background: var(--ac-dim);
}

.bv-drop-icon {
  font-size: 32px;
  line-height: 1;
}

.bv-drop-filename {
  font-size: 12px;
  color: var(--act-tx);
  font-weight: 600;
  word-break: break-all;
  min-height: 16px;
}

/* ── Pen (XP-Pen) handwriting input ──────────────────────────────────────── */
#agent-toolbar #btn-pen-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tx3);
  padding: 6px 8px;
}
#agent-toolbar #btn-pen-toggle:hover {
  color: var(--tx);
}
#agent-toolbar #btn-pen-toggle.active {
  color: var(--ac-tx);
  background: var(--ac-dim);
  border-color: var(--ac-bd);
}
/* Subtle cue on writable fields while pen mode is on */
body.pen-mode #voice-panel textarea,
body.pen-mode #voice-panel input[type='text'],
body.pen-mode #page-input {
  cursor: cell;
}

#pen-overlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  background: rgba(0, 0, 0, 0.28);
}
#pen-overlay[hidden] {
  display: none;
}
#pen-pad {
  position: fixed;
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border: 1px solid var(--bd-str);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  padding: 8px;
  gap: 8px;
}
/* Pad drag bar + corner resize grip — same idiom as the pop-out window */
#pen-pad-drag {
  height: 14px;
  flex-shrink: 0;
  cursor: move;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -4px -4px 0;
  border-radius: 8px 8px 0 0;
}
#pen-pad-drag > span {
  width: 36px;
  height: 4px;
  border-radius: 3px;
  background: var(--bd);
}
#pen-pad-drag:hover > span {
  background: var(--ac);
}
#pen-pad-grip {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 18px;
  height: 18px;
  cursor: nwse-resize;
  z-index: 30;
  background:
    linear-gradient(135deg, transparent 0 50%, var(--bd) 50% 60%, transparent 60% 70%, var(--bd) 70% 80%, transparent 80%);
}
#pen-pad-grip:hover {
  background:
    linear-gradient(135deg, transparent 0 50%, var(--ac) 50% 60%, transparent 60% 70%, var(--ac) 70% 80%, transparent 80%);
}
#pen-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.pen-group {
  display: flex;
  align-items: center;
  gap: 4px;
}
.pen-actions {
  margin-left: auto;
}
#pen-toolbar .pen-tbtn,
#pen-toolbar select,
#pen-toolbar button,
.pen-ribbon .pen-tbtn,
.pen-ribbon select,
.pen-ribbon button,
.pen-modal-btns button {
  font: inherit;
  font-size: 13px;
}
.pen-tbtn {
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--bd);
  border-radius: 7px;
  background: var(--bg-raise);
  color: var(--tx2);
  cursor: pointer;
}
.pen-tbtn:hover {
  background: var(--bg-hover);
  color: var(--tx);
}
.pen-tbtn.active {
  color: var(--ac-tx);
  background: var(--ac-dim);
  border-color: var(--ac-bd);
}
#pen-paper,
.pen-ribbon-paper {
  height: 30px;
  border: 1px solid var(--bd);
  border-radius: 7px;
  background: var(--bg-raise);
  color: var(--tx);
  padding: 0 6px;
}
.pen-chip {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--tx2);
  border: 1px solid var(--bd);
  border-radius: 6px;
  padding: 3px 7px;
}
#pen-clear,
#pen-close,
.pen-ribbon-clear,
.pen-modal-back {
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--bd);
  border-radius: 7px;
  background: var(--bg-raise);
  color: var(--tx2);
  cursor: pointer;
}
#pen-recognize,
.pen-ribbon-recognize,
.pen-modal-add {
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--ac-bd);
  border-radius: 7px;
  background: var(--ac);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
#pen-recognize:disabled,
.pen-ribbon-recognize:disabled,
.pen-modal-add:disabled {
  opacity: 0.55;
  cursor: default;
}
#pen-clear:hover,
#pen-close:hover,
.pen-ribbon-clear:hover,
.pen-modal-back:hover {
  background: var(--bg-hover);
  color: var(--tx);
}
#pen-canvas-wrap {
  position: relative;
  height: 320px; /* flex-basis when the pad is auto-sized */
  flex: 1 1 auto;
  min-height: 160px;
  border: 1px solid var(--bd);
  border-radius: 8px;
  overflow: hidden;
}
.pen-surface {
  position: absolute;
  inset: 0;
  display: block;
}
.pen-hover {
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  border: 1.5px solid var(--ac-tx);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
  z-index: 5;
}
#pen-status {
  min-height: 16px;
  font-size: 12px;
  color: var(--tx2);
}
#pen-status.busy {
  color: var(--ac-tx);
}
#pen-status.ok {
  color: var(--act-tx);
}
#pen-status.err {
  color: #e06666;
}

/* ── Inline pen writing in the agent workspace ─────────────────────────────── */
/* The wrap mirrors the flex behavior of the field it replaces, so the canvas
   occupies exactly the field's band and the panel geometry doesn't jump. */
.pen-inline-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid var(--ac-bd);
  border-radius: 8px;
  overflow: hidden;
  flex: 1 1 0;
  min-height: 200px;
}
/* Drag divider on the canvas top edge: sizes Fragen area vs. writing area
   (same idiom as #input-resize-handle above the chat input) */
.pen-inline-resize {
  height: 12px;
  flex-shrink: 0;
  cursor: ns-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-raise);
}
.pen-inline-grip {
  width: 36px;
  height: 4px;
  border-radius: 3px;
  background: var(--bd);
  transition:
    background 0.15s,
    transform 0.15s;
}
.pen-inline-resize:hover .pen-inline-grip,
.pen-inline-resize.dragging .pen-inline-grip {
  background: var(--ac);
  transform: scaleX(1.2);
}
#sqrr-p4 > .pen-inline-wrap {
  flex: 2 2 0; /* mirrors #sqrr-p4 > .sqrr-check-input */
}
/* Single-line edit inputs live in list rows without a flex context */
.pen-inline-wrap--compact {
  flex: none;
  min-height: 0;
  height: 172px;
}
.pen-inline-hidden {
  display: none !important;
}
/* Pen mode: add/submit rows step back — the confirm modal commits instead
   (its primary button mirrors the hidden button's gating). */
body.pen-mode #sqrr-p2-add-row,
body.pen-mode #sqrr-p3-add-row,
body.pen-mode #sqrr-check-add-row,
body.pen-mode #uma-add-row,
body.pen-mode #aufgaben-note-row,
body.pen-mode #sqrr-p5-row-submit {
  display: none !important;
}
/* Slim controls ribbon inside the canvas box */
.pen-ribbon {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 32px;
  padding: 3px 6px;
  background: var(--bg-raise);
  border-bottom: 1px solid var(--bd);
  flex-shrink: 0;
}
.pen-ribbon .pen-tbtn {
  min-width: 24px;
  height: 24px;
  padding: 0 5px;
  font-size: 12px;
}
.pen-ribbon-sep {
  width: 1px;
  height: 16px;
  background: var(--bd);
  margin: 0 2px;
  flex-shrink: 0;
}
.pen-ribbon-paper {
  height: 24px;
  padding: 0 4px;
  font-size: 12px;
}
.pen-ribbon-status {
  flex: 1;
  min-width: 8px;
  font-size: 11.5px;
  color: var(--tx3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  padding-right: 4px;
}
.pen-ribbon-status.busy {
  color: var(--ac-tx);
}
.pen-ribbon-status.ok {
  color: var(--act-tx);
}
.pen-ribbon-status.err {
  color: #e06666;
}
.pen-ribbon-clear,
.pen-ribbon-recognize {
  height: 24px;
  padding: 0 8px;
  font-size: 12px;
}
.pen-inline-canvas {
  position: relative;
  flex: 1;
  min-height: 0;
}
/* Confirm modal: editable transcription over the canvas */
.pen-inline-modal {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(0, 0, 0, 0.45);
}
.pen-inline-modal[hidden] {
  display: none;
}
.pen-modal-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(440px, 100%);
  max-height: 100%;
  padding: 10px;
  background: var(--bg-panel);
  border: 1px solid var(--bd-str);
  border-radius: 10px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
}
.pen-modal-text {
  width: 100%;
  min-height: 56px;
  resize: vertical;
  font: inherit;
  font-size: 13px;
  color: var(--tx);
  background: var(--bg-input);
  border: 1px solid var(--bd);
  border-radius: 7px;
  padding: 7px 9px;
}
.pen-modal-text:focus {
  outline: none;
  border-color: var(--ac);
}
.pen-modal-btns {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ── Floating writing window (pop-out of the inline canvas) ────────────────── */
#pen-float {
  position: fixed;
  z-index: 3500;
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border: 1px solid var(--bd-str);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
#pen-float[hidden] {
  display: none;
}
#pen-float-drag {
  height: 16px;
  flex-shrink: 0;
  cursor: move;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-raise);
  border-bottom: 1px solid var(--bd);
}
#pen-float-drag > span {
  width: 36px;
  height: 4px;
  border-radius: 3px;
  background: var(--bd);
}
#pen-float-drag:hover > span {
  background: var(--ac);
}
#pen-float-body {
  flex: 1;
  min-height: 0;
  display: flex;
}
#pen-float-body > .pen-inline-wrap {
  border: none;
  border-radius: 0;
  min-height: 0;
}
#pen-float-body .pen-inline-resize {
  display: none; /* window resizing governs while floating */
}
#pen-float-grip {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 18px;
  height: 18px;
  cursor: nwse-resize;
  z-index: 30;
  background:
    linear-gradient(135deg, transparent 0 50%, var(--bd) 50% 60%, transparent 60% 70%, var(--bd) 70% 80%, transparent 80%);
}
#pen-float-grip:hover {
  background:
    linear-gradient(135deg, transparent 0 50%, var(--ac) 50% 60%, transparent 60% 70%, var(--ac) 70% 80%, transparent 80%);
}
.pen-ribbon-pop {
  margin-left: 2px;
}