/* ===========================
   Wurksy AI – Global Styles
   =========================== */

/* Ensure [hidden] always wins over component display rules */
[hidden] { display: none !important; }

:root {
  --bg: #0b1020;
  --card: #0f152b;
  --elev: #121939;
  --border: #26314b;
  --text: #e5e7eb;
  --muted: #9aa0a6;
  --accent: #60a5fa;
  --accent-2: #22d3ee;
  --contrast: #FA9B60;
  --ring: rgba(96,165,250,.35);
  --shadow: 0 8px 30px rgba(0,0,0,.35);

  --radius: 12px;
  --radius-lg: 16px;

  /* --bubble-user-bg: color-mix(in hsl, var(--accent-2) 10%, var(--card)); */
  --bubble-user-bg: var(--bg);
  --bubble-user-border: color-mix(in hsl, var(--accent-2) 45%, var(--border));
  --bubble-user-text: var(--text);
  --bubble-assistant-bg: color-mix(in hsl, var(--accent) 24%, var(--card));
  --bubble-assistant-border: color-mix(in hsl, var(--accent) 48%, var(--border));
  --bubble-assistant-text: var(--text);

  --surface-1: linear-gradient(180deg, var(--card), var(--elev));
  --surface-2: rgba(255,255,255,.04);
}

:root[data-theme="light"] {
  --bg:#f1f1f1;
  --card:#ffffff;
  --elev:#ffffff;
  --border:#d1d1d1;
  --text:#0f172a;
  --muted:#64748b;
  --accent: #2563eb;
  --accent-2: #22d3ee;
  --ring: rgba(37,99,235,.25);
  --shadow: 0 8px 30px rgba(2,6,23,.08);
  --surface-2: rgba(0,0,0,.04);

  --bubble-user-bg: color-mix(in hsl, var(--accent-2) 18%, #ffffff);
  --bubble-user-border: color-mix(in hsl, var(--accent-2) 42%, var(--border));
  --bubble-user-text: #0f172a;
  --bubble-assistant-bg: color-mix(in hsl, var(--accent) 16%, #ffffff);
  --bubble-assistant-border: color-mix(in hsl, var(--accent) 42%, var(--border));
  --bubble-assistant-text: #0f172a;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(34,211,238,.08), transparent 40%),
    radial-gradient(1000px 600px at 100% 0%, rgba(96,165,250,.08), transparent 30%),
    var(--bg);
  color: var(--text);
  font: 15px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Focus — no outlines */
:where(a, button, input, select, textarea, [tabindex]):focus,
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
input[type="range"]:focus,
input[type="range"]:focus-visible { outline: none !important; box-shadow: none !important; }

/* Scrollbars (WebKit) */
*::-webkit-scrollbar { width: 12px; height: 12px; }
*::-webkit-scrollbar-thumb { background: color-mix(in hsl, var(--border) 60%, transparent); border-radius: 999px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------------------------
   Header / Topbar
   --------------------------- */
header.topbar {
  position: sticky; top: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in hsl, var(--bg) 86%, transparent);
  backdrop-filter: blur(6px) saturate(120%);
}

header .brand { display:flex; gap:.75rem; align-items:center; }
header .brand img { height: 32px; width: 32px; border-radius: 6px; }
header .brand span { font-weight: 700; letter-spacing: .2px; font-size: 17px; }

/* ---------------------------
   Generic Layout Helpers
   --------------------------- */
main { 
  max-width: 1120px; 
  margin: 12px auto; 
  padding: 0 16px; 
}

/* When the split editor panel is visible on Chat, tighten spacing */
body:has(#assignmentEditorPanel:not([hidden])) .assignment-layout {
  gap: 6px;
}

body:has(#assignmentEditorPanel:not([hidden])) .hero-wrap {
  padding: 10px 14px;
}

body:has(#assignmentEditorPanel:not([hidden])) .badge {
  display: none;
}

.card {
  background: var(--surface-1);
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:14px;
  box-shadow: var(--shadow);
}

/* .card + .card { margin-top: 16px; } */

h1,h2,h3 { margin:0; }
h1 { font-size: 26px; line-height: 1.2; }
h2 { font-size: 18px; }
p { margin: 8px 0; }
.muted, .doc-subtle { color: var(--muted); font-size: 12px; }
.link { color: var(--text); font-weight: 700; text-decoration: none; }
.link:hover { text-decoration: underline; }

/* ============================================
   Generic .grid helper (used in modal etc.)
   ============================================ */

.grid {
  display: grid;
  grid-template-columns: 1.6fr 0.9fr;
  gap: 20px;
  align-items: start;
}

/* Stack generic grids on tablets + phones */
@media (max-width: 1100px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

/* Chat-specific grid override (legacy) */
#chat-grid.grid {
  grid-template-columns: 2fr 1fr;
  gap: 22px;
}

@media (max-width: 1000px) {
  #chat-grid.grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   Index layout: hero, brief, chat (vertical)
   ============================================ */

.assignment-layout {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 6px;
}

/* HERO ROW
   Left = Wurksy logo/title/buttons
   Right = assignment meta
*/
.hero-wrap { padding: 14px 16px; }

/* Two-column hero: left = all content, right = assignment card */
.hero-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
}

.hero-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* assignment meta box — right column of hero-row */
.assignment-meta {
  flex: 0 0 auto;
  width: clamp(220px, 28%, 300px);
  align-self: flex-start;
  border-radius: 16px;
  padding: 8px 14px;
  background: color-mix(in hsl, var(--card) 96%, transparent);
  border: 1px solid color-mix(in hsl, var(--border) 80%, transparent);
  box-shadow: 0 4px 18px rgba(0,0,0,.3);
  font-size: 13px;
}

.assignment-meta p {
  margin: 0 0 4px 0;
}

/* make the meta text a bit bolder/clearer */
.assignment-meta h3 {
  margin: 0 0 6px 0;
  font-size: 16px;
}
.assignment-meta p:not(:first-child) {
  font-weight: 500;
}

/* keep compact header layout on narrow screens */
@media (max-width: 820px) {
  .assignment-meta {
    padding: 8px 10px;
    font-size: 12px;
  }

  .assignment-meta h3 {
    font-size: 14px;
  }
}

#assignmentBrief {
  overflow-y: auto;
}

.brief-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 4px;
  padding: 6px 12px;
  background: color-mix(in hsl, var(--card) 94%, transparent);
  border: 1px solid color-mix(in hsl, var(--border) 86%, transparent);
  border-radius: var(--radius-lg);
  line-height: 1.55;
  flex-wrap: wrap;
}

.brief-label {
  font-weight: 800;
  letter-spacing: 0.08em;
  font-size: 12px;
  color: var(--muted);
  flex: 0 0 auto;
}

.brief-text {
  flex: 1 1 auto;
  font-size: 14px;
}

.mode-notice {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1px solid color-mix(in hsl, var(--border) 82%, transparent);
  background: color-mix(in hsl, var(--card) 96%, transparent);
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .brief-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .brief-label {
    font-size: 13px;
  }
}

/* ---------------------------
   Inputs & Buttons
   --------------------------- */
input[type="text"],
input[type="search"],
input[type="number"],
input[type="file"],
textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: color-mix(in hsl, var(--card) 88%, transparent);
  color: var(--text);
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

textarea { min-height: 44px; resize: vertical; }

button {
  font: inherit;
  color: var(--text);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  cursor: pointer;
  transition: transform .06s ease, box-shadow .15s ease, background .15s ease;
}
button:hover { }
button:active { transform: translateY(1px); }

button.primary {
  border: 0;
  color: #0b1020;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 10px 14px;
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-1);
  color: var(--text);
  text-decoration:none; cursor:pointer;
  transition: box-shadow .15s ease, transform .05s ease;
}

select.btn {
  color: var(--text);
  background-color: var(--card);
  background-image: none;
}

select.btn option {
  color: var(--text);
  background-color: var(--card);
}

select.btn option:hover,
select.btn option:focus,
select.btn option:checked {
  color: var(--text);
  background-color: color-mix(in hsl, var(--accent) 20%, var(--card));
}

.btn:hover { }
.btn:active { transform: translateY(1px); }
.btn-primary { border:0; color:#0b1020; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.btn-small { padding: 7px 10px; font-size: 13px; }
.btn-accent { border-color: var(--accent); color: var(--accent); }
.btn-accent:hover { background: var(--accent); color: #0b1020; }
.card-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.card-head-actions { display: flex; gap: 8px; align-items: center; }

.ask-input {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  padding: 10px 14px;
  border-radius: 28px;
  margin-top: 4px;
  position: relative;
}

.ask-input.ask-input--compact {
  width: min(100%, 520px);
  min-height: 44px;
  padding: 6px 20px;
  border-radius: 999px;
  margin-left: 0;
  margin-right: auto;
}

.ask-input.ask-input--compact textarea {
  height: 26px;
  max-height: 26px;
  padding: 0 4px;
  line-height: 1.4;
  overflow-y: auto;
}

.ask-input textarea {
  flex: 1;
  padding: 10px 4px;
  border: none;
  background: transparent;
  resize: none;
  max-height: 10em;
  line-height: 1.5;
  font-size: 16px;
}

.ask-input textarea:focus {
  outline: none;
}

.ask-input textarea::placeholder {
  color: var(--muted);
  opacity: 1;
  font-size: 16px;
  font-weight: 400;
}

.ask-input .input-placeholder {
  position: absolute;
  left: 18px;
  right: 200px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--muted);
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  opacity: 1;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ask-input .input-placeholder__prompt {
  font: inherit;
  color: inherit;
}

.ask-input .input-placeholder__hint {
  font: inherit;
  color: inherit;
}

.ask-input textarea:focus + .input-placeholder,
.ask-input textarea:not(:placeholder-shown) + .input-placeholder {
  opacity: 0;
  visibility: hidden;
}

@media (max-width: 850px) {
  .ask-input .input-placeholder__hint {
    display: none;
  }
}

.ask-input .send-icon {
  width: 18px;
  height: 18px;
  display: block;
}

.input-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

.workspace-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
}

/* ── Standard split: hero above, [chat] | [editor] below ──────────────── */
.assignment-layout[data-panel-order="split-right"] #chat {
  grid-template-columns: 1fr 6px var(--chat-editor-w, clamp(280px, 38vw, 560px));
  column-gap: 0;
}

.assignment-layout[data-panel-order="split-right"] #aiWorkspacePanel {
  order: 1;
}

.assignment-layout[data-panel-order="split-right"] #chat .ep-resize-handle {
  order: 2;
}

.assignment-layout[data-panel-order="split-right"] #assignmentEditorPanel {
  order: 3;
}

.assignment-layout[data-panel-order="split-left"] #chat {
  grid-template-columns: var(--chat-editor-w, clamp(280px, 38vw, 560px)) 6px 1fr;
  column-gap: 0;
}

.assignment-layout[data-panel-order="split-left"] #assignmentEditorPanel {
  order: 1;
}

.assignment-layout[data-panel-order="split-left"] #chat .ep-resize-handle {
  order: 2;
}

.assignment-layout[data-panel-order="split-left"] #aiWorkspacePanel {
  order: 3;
}

/* Show drag handle in split modes */
.assignment-layout[data-panel-order="split-right"] #chat .ep-resize-handle,
.assignment-layout[data-panel-order="split-left"] #chat .ep-resize-handle {
  display: flex;
}

/* ── Wide/full split: [hero + chat] | [editor] ────────────────────────── */
/* Uses display:contents on #chat so its children join the outer grid */
.assignment-layout[data-panel-order="wide-right"] {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  grid-template-rows: auto 1fr;
  gap: 12px;
  min-height: min(88vh, 1000px);
}

.assignment-layout[data-panel-order="wide-right"] .hero-wrap {
  grid-column: 1;
  grid-row: 1;
  margin-bottom: 0;
}

.assignment-layout[data-panel-order="wide-right"] #chat {
  display: contents;
}

.assignment-layout[data-panel-order="wide-right"] #aiWorkspacePanel {
  grid-column: 1;
  grid-row: 2;
  height: 100%;
  overflow: hidden;
}

.assignment-layout[data-panel-order="wide-right"] #assignmentEditorPanel {
  grid-column: 2;
  grid-row: 1 / 3;
  height: 100%;
  overflow: hidden;
}

.assignment-layout[data-panel-order="wide-left"] {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: auto 1fr;
  gap: 12px;
  min-height: min(88vh, 1000px);
}

.assignment-layout[data-panel-order="wide-left"] .hero-wrap {
  grid-column: 2;
  grid-row: 1;
  margin-bottom: 0;
}

.assignment-layout[data-panel-order="wide-left"] #chat {
  display: contents;
}

.assignment-layout[data-panel-order="wide-left"] #aiWorkspacePanel {
  grid-column: 2;
  grid-row: 2;
  height: 100%;
  overflow: hidden;
}

.assignment-layout[data-panel-order="wide-left"] #assignmentEditorPanel {
  grid-column: 1;
  grid-row: 1 / 3;
  height: 100%;
  overflow: hidden;
}

/* ── External mode: panel position cycling ─────────────────────────────── */
/* Chat panel pinned to left or right as a narrow side panel */
.assignment-layout[data-panel-order="ext-left"] {
  max-width: 480px;
  margin-right: auto;
  margin-left: 0;
}

.assignment-layout[data-panel-order="ext-right"] {
  max-width: 480px;
  margin-left: auto;
  margin-right: 0;
}

/* Override fixed split-panel heights inside wide modes */
.assignment-layout[data-panel-order^="wide"] .split-panel {
  height: 100%;
  min-height: 0;
}

.assignment-layout[data-panel-order^="wide"] #msgs {
  max-height: none;
  flex: 1;
  overflow-y: auto;
}

.split-panel {
  min-height: 0;
  min-width: 0;
}

/* ── Page split: Lectures / Research editor side panel ─────────────────── */
.page-split {
  display: contents;
}

.page-split[data-panel-order="editor-right"] {
  display: grid;
  grid-template-columns: 1fr 6px var(--editor-w, clamp(250px, 28vw, 420px));
  height: 100dvh;
  overflow: hidden;
}

.page-split[data-panel-order="editor-left"] {
  display: grid;
  grid-template-columns: var(--editor-w, clamp(250px, 28vw, 420px)) 6px 1fr;
  height: 100dvh;
  overflow: hidden;
}

.page-split[data-panel-order="editor-wide"] {
  display: grid;
  grid-template-columns: 1fr 6px var(--editor-w, clamp(350px, 40vw, 600px));
  height: 100dvh;
  overflow: hidden;
}

/* When editor is open, shrink sidebar + chat so the viewer column has enough room */
.page-split[data-panel-order] {
  --sidebar-w: clamp(130px, 15vw, 220px);
  --chat-w: clamp(150px, 18vw, 260px);
}

.page-split[data-panel-order="editor-left"] .layout,
.page-split[data-panel-order="editor-left"] main {
  order: 3;
}

.page-split[data-panel-order="editor-left"] .ep-resize-handle {
  order: 2;
}

.page-split[data-panel-order="editor-left"] .editor-split-panel {
  order: 1;
}

.page-split[data-panel-order] .layout {
  overflow: hidden;
  height: 100%;
}

.page-split--research[data-panel-order] main {
  overflow-y: auto;
  height: 100%;
}

/* Drag resize handle between panels */
.ep-resize-handle {
  display: none;
  position: relative;
  width: 6px;
  background: transparent;
  cursor: col-resize;
  z-index: 20;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}

.page-split[data-panel-order] .ep-resize-handle {
  display: flex;
}

.ep-resize-handle::after {
  content: '';
  width: 3px;
  height: 36px;
  border-radius: 3px;
  background: var(--border);
  opacity: 0.45;
  transition: opacity 0.15s, height 0.15s, background 0.15s;
  pointer-events: none;
}

.ep-resize-handle:hover::after,
.ep-resize-handle.ep-dragging::after {
  opacity: 1;
  height: 56px;
  background: var(--border);
}

.ep-resize-handle.ep-dragging {
  background: color-mix(in hsl, var(--border) 20%, transparent);
}

.editor-split-panel {
  border-left: 1px solid var(--border);
  background: var(--bg, #0f1117);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  gap: 10px;
  padding: 12px;
  box-sizing: border-box;
}

.page-split[data-panel-order="editor-left"] .editor-split-panel {
  border-left: none;
  border-right: 1px solid var(--border);
}

@media (max-width: 1080px) {
  .page-split[data-panel-order="editor-right"],
  .page-split[data-panel-order="editor-left"],
  .page-split[data-panel-order="editor-wide"] {
    grid-template-columns: 1fr;
    height: auto;
  }

  .ep-resize-handle {
    display: none !important;
  }

  .page-split[data-panel-order="editor-left"] .layout,
  .page-split[data-panel-order="editor-left"] main,
  .page-split[data-panel-order="editor-left"] .editor-split-panel {
    order: initial;
  }

  .page-split[data-panel-order] .layout {
    height: auto;
    overflow: visible;
  }

  .page-split--research[data-panel-order] main {
    height: auto;
    overflow: visible;
  }

  .editor-split-panel {
    height: auto;
    min-height: 400px;
    border-left: none;
    border-top: 1px solid var(--border);
  }
}
/* ────────────────────────────────────────────────────────────────────────── */

.assignment-editor-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 600px;
  min-width: 0;
}

.assignment-editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.assignment-editor-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.editor-meta-divider {
  width: 1px;
  height: 14px;
  background: var(--border);
  flex-shrink: 0;
}

#rubricStatus:empty {
  display: none;
}

.assignment-editor-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in hsl, var(--card) 96%, transparent);
}

.assignment-editor-toolbar .btn {
  padding: 5px 9px;
}

#assignmentEditorToolbar .ql-formats {
  flex-shrink: 0;
}

.ql-history-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px 5px;
  font-size: 16px;
  line-height: 1;
  color: var(--muted, #8b95a8);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}

.ql-history-btn:hover {
  color: var(--text, #e2e8f0);
  background: rgba(255, 255, 255, 0.06);
}


.assignment-editor-surface {
  flex: 1;
  min-height: 0;
  background: color-mix(in hsl, var(--card) 99%, #fff 1%);
  border-radius: 10px;
  border: 1px solid var(--border);
  overflow: hidden;
}

.rubric-review-panel {
  margin-top: 2px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in hsl, var(--card) 98%, transparent);
  padding: 12px;
  display: grid;
  gap: 8px;
  max-height: min(34vh, 320px);
  min-width: 0;
}

.rubric-review-panel__header h3 {
  margin: 0;
  font-size: 14px;
}

.rubric-review-panel__header p {
  margin-top: 4px;
}

.rubric-review-panel__content {
  overflow-y: auto;
  white-space: normal;
  line-height: 1.55;
  font-size: 14px;
  padding-right: 2px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.rubric-review-block {
  border: 1px solid color-mix(in hsl, var(--border) 80%, transparent);
  border-radius: 8px;
  padding: 10px;
  background: color-mix(in hsl, var(--surface-1) 92%, transparent);
  margin-bottom: 8px;
}

.rubric-review-block h4 {
  margin: 0 0 6px 0;
  font-size: 13px;
  color: var(--text);
}

.rubric-review-block ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
}

.assignment-editor-panel .ql-container,
.editor-split-panel .ql-container {
  border: 0;
  font-size: 16px;
  line-height: 1.65;
}

.assignment-editor-panel .ql-editor,
.editor-split-panel .ql-editor {
  min-height: 460px;
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  padding: 22px;
}

.assignment-editor-panel .ql-toolbar.ql-snow,
.assignment-editor-panel .ql-container.ql-snow,
.editor-split-panel .ql-toolbar.ql-snow,
.editor-split-panel .ql-container.ql-snow {
  border-color: var(--border);
}

.assignment-editor-panel .ql-toolbar.ql-snow .ql-picker,
.assignment-editor-panel .ql-toolbar.ql-snow button,
.assignment-editor-panel .ql-toolbar.ql-snow .ql-stroke,
.editor-split-panel .ql-toolbar.ql-snow .ql-picker,
.editor-split-panel .ql-toolbar.ql-snow button,
.editor-split-panel .ql-toolbar.ql-snow .ql-stroke {
  color: var(--text);
  stroke: var(--text);
}

/* Editor locked state — triggered by .editor-locked class via JS */
.editor-locked .ql-toolbar {
  opacity: 0.4;
  pointer-events: none;
}
.editor-locked .ql-editor.ql-blank::before {
  content: "Submission locked — editing disabled";
  font-style: normal;
  color: var(--muted, #888);
}
.editor-locked .ql-editor {
  cursor: not-allowed;
  opacity: 0.7;
}
.editor-locked #rubricUploadBtn,
.editor-locked #rubricReviewBtn,
.editor-locked #rubricReReviewBtn {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Narrow workspace variant when assignment editor is enabled */
.workspace-split[data-has-editor="true"] .chat-wrap {
  gap: 8px;
}

.workspace-split[data-has-editor="true"] .split-panel {
  height: min(86vh, 980px);
  min-height: 640px;
}

.workspace-split[data-has-editor="true"] #msgs {
  max-height: 42vh;
  margin-bottom: 0;
}

.workspace-split[data-has-editor="true"] #cap {
  margin-bottom: 2px;
}

.workspace-split[data-has-editor="true"] #send {
  margin-top: 2px;
}

.workspace-split[data-has-editor="true"] #aiWorkspacePanel {
  overflow-y: auto;
}

.workspace-split[data-has-editor="true"] .notes-section {
  padding: 10px 12px;
  gap: 10px;
}

.workspace-split[data-has-editor="true"] .notes-row {
  min-height: 0;
  margin-top: 0;
}

.workspace-split[data-has-editor="true"] .notes-row + .notes-row {
  margin-top: 0;
}

.workspace-split[data-has-editor="true"] .notes-row textarea {
  min-height: 52px;
  resize: vertical;
}

.workspace-split[data-has-editor="true"] .input-placeholder__hint {
  display: none;
}

.notes-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  background: color-mix(in hsl, var(--surface-1) 60%, transparent);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.notes-section .notes-row {
  margin-top: 0;
}

.notes-section .notes-row + .notes-row {
  margin-top: 0;
}

.chat-disclaimer {
  font-size: 12px;
  margin: 4px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  line-height: 1.5;
}

.chat-footer-links {
  font-size: 12px;
  color: var(--muted, #8b95a8);
  padding-top: 12px;
  border-top: 1px solid var(--border);
  padding-bottom: 4px;
}

.chat-footer-links .link {
  color: var(--text);
  font-weight: 700;
}

@media (max-width: 1320px) {
  .assignment-layout[data-panel-order="split-right"] #chat {
    grid-template-columns: 1fr 6px var(--chat-editor-w, clamp(260px, 35vw, 480px));
  }

  .assignment-layout[data-panel-order="split-left"] #chat {
    grid-template-columns: var(--chat-editor-w, clamp(260px, 35vw, 480px)) 6px 1fr;
  }
}

@media (max-width: 1080px) {
  /* Collapse all split modes to single column */
  .assignment-layout[data-panel-order^="split"] #chat {
    grid-template-columns: 1fr;
  }

  .assignment-layout[data-panel-order^="split"] #assignmentEditorPanel,
  .assignment-layout[data-panel-order^="split"] #aiWorkspacePanel {
    order: initial;
  }

  .assignment-layout[data-panel-order^="split"] #chat .ep-resize-handle {
    display: none;
  }

  /* Collapse wide mode back to stacked layout */
  .assignment-layout[data-panel-order^="wide"] {
    display: flex;
    flex-direction: column;
    min-height: auto;
  }

  .assignment-layout[data-panel-order^="wide"] #chat {
    display: grid;
    grid-template-columns: 1fr;
  }

  .assignment-layout[data-panel-order^="wide"] .hero-wrap,
  .assignment-layout[data-panel-order^="wide"] #aiWorkspacePanel,
  .assignment-layout[data-panel-order^="wide"] #assignmentEditorPanel {
    grid-column: auto;
    grid-row: auto;
    height: auto;
  }

  .split-panel {
    height: auto;
  }

  .workspace-split[data-has-editor="true"] #msgs {
    max-height: 55vh;
  }

  .assignment-layout[data-panel-order^="wide"] #msgs {
    max-height: 55vh;
    flex: none;
  }
}

.inline-error {
  margin: 0;
  font-size: 12px;
  color: #ffb3b3;
}

.notes-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  min-width: 0;
}

.notes-row + .notes-row {
  margin-top: 18px;
}

.notes-row textarea {
  width: 100%;
  border-radius: 8px;
  padding: 8px 10px;
  line-height: 1.45;
  resize: vertical;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.notes-row textarea:focus {
  outline: none;
  border-color: var(--muted);
}

.notes-field textarea {
  width: 100%;
  min-height: 84px;
  max-height: 220px;
  border-radius: 10px;
  padding: 10px 12px;
  line-height: 1.45;
  resize: vertical;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text);
  box-sizing: border-box;
}

.ai-index-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.small-print {
  font-size: 12px;
  margin: 0;
}

.flag-cell { position: relative; display: inline-flex; align-items: center; }
.flag-score-btn {
  gap: 6px;
  background: var(--surface-2);
  font-weight: 600;
}
.flag-score-btn .flag-emoji { font-size: 14px; }
.flag-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 5;
  min-width: 240px;
  max-width: 320px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-1);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.36);
}
.flag-dropdown__header { font-weight: 700; margin-bottom: 2px; }
.flag-dropdown__meta { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.flag-detail-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
}
.flag-detail-list li { font-size: 13px; line-height: 1.35; }

.editor-replay-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
}

.editor-replay-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.editor-replay-modal__panel {
  position: relative;
  margin: 0;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  border-radius: 0;
  border: none;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

/* ── ERP Toolbar ── */
.erp-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.erp-toolbar__left {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  flex: 1;
}
.erp-toolbar__title {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.3px;
  white-space: nowrap;
  color: var(--text);
}
.erp-toolbar__right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Meta chips */
.erp-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.erp-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
.erp-chip strong {
  color: var(--text);
  font-weight: 600;
}

/* Tab bar */
.erp-tabs {
  display: flex;
  align-items: center;
  background: var(--elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.erp-tab {
  padding: 5px 14px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.erp-tab:hover { background: var(--surface-2); color: var(--text); }
.erp-tab--active {
  background: var(--surface-2);
  color: var(--text);
  font-weight: 600;
  border-bottom: 2px solid var(--accent);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.erp-tab--active:hover { background: var(--surface-2); color: var(--text); }

/* Close button */
.erp-close-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.erp-close-btn:hover { background: rgba(255,80,80,.15); color: #ff5050; border-color: rgba(255,80,80,.4); }

/* ── Controls bar ── */
.erp-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0 8px;
  flex-shrink: 0;
}
.erp-play-btn {
  padding: 6px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--elev);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.erp-play-btn:hover:not(:disabled) { background: var(--surface-2); }
.erp-play-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.erp-speed {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text);
  font-weight: 600;
}
.erp-speed select {
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--elev);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
}
.erp-step-label {
  font-size: 12px;
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

/* ── Timeline ── */
.erp-timeline {
  display: grid;
  gap: 5px;
  flex-shrink: 0;
}
.erp-timeline-label {
  font-size: 11px;
  color: var(--text);
  font-weight: 600;
}

/* ── Pane header (AI Index) ── */
.erp-pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 0 8px;
  flex-shrink: 0;
}
.erp-pane-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.editor-review-split {
  flex: 1;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0 20px 16px;
  background: var(--bg);
}

.editor-review-split[data-view-mode="combined"] {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}

.editor-review-pane {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}

/* Range input (timeline) */
.erp-timeline input[type="range"] {
  width: 100%;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--border);
  border-radius: 2px;
  cursor: pointer;
  outline: none;
}
.erp-timeline input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 0 2px rgba(96,165,250,.25);
}
.erp-timeline input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
  border: none;
}
.erp-timeline input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
}

.editor-replay-viewer {
  flex: 1;
  margin-top: 10px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}
.editor-replay-viewer * {
  color: inherit !important;
  background: transparent !important;
  font-family: inherit !important;
}

.editor-ai-index-frame {
  flex: 1;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  margin-top: 8px;
}

@media (max-width: 1080px) {
  .editor-review-split[data-view-mode="combined"] {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }
}

/* ---------------------------
   Behaviour Analytics Panel
   --------------------------- */
.erp-behaviour-pane {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.erp-behaviour-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.erp-beh-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 20px 20px;
  min-height: 0;
  overflow: hidden;
}

/* Header row: score block + headline stats */
.erp-beh-header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 16px 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  flex-shrink: 0;
}

/* Score ring + breakdown table side by side */
.erp-beh-score-block {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex: 1;
  min-width: 0;
}

.erp-beh-score-ring {
  position: relative;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}
.erp-beh-score-ring svg {
  width: 64px;
  height: 64px;
  transform: rotate(-90deg);
}
.erp-beh-score-val {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--score-colour, var(--text));
  line-height: 1;
}
.erp-beh-score-detail {
  flex: 1;
  min-width: 0;
}
.erp-beh-score-label {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 2px;
}
.erp-beh-score-formula {
  font-size: 11px;
  color: var(--muted, #888);
  margin-bottom: 10px;
}
.erp-beh-flag {
  font-size: 12px;
  color: var(--red, #ef4444);
  margin: 2px 0;
  font-weight: 500;
}

/* Score breakdown table */
.erp-score-breakdown {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.erp-score-breakdown tr {
  border-top: 1px solid var(--border);
}
.erp-score-breakdown tr:first-child {
  border-top: none;
}
.erp-score-breakdown td {
  padding: 5px 8px 5px 0;
  vertical-align: middle;
}
.erp-bd-factor {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  width: 140px;
}
.erp-bd-level {
  font-weight: 500;
  color: var(--text);
  width: 140px;
  white-space: nowrap;
}
.erp-bd-detail {
  font-size: 11px;
  color: var(--muted, #888);
}
.erp-bd-adj {
  text-align: right;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  width: 40px;
}
.adj-penalty { color: var(--red, #ef4444); }
.adj-bonus   { color: var(--green, #22c55e); }
.adj-neutral { color: var(--muted, #888); }
.erp-bd-total td {
  font-weight: 700;
  font-size: 13px;
  padding-top: 8px;
  border-top: 2px solid var(--border) !important;
  color: var(--text);
}
.erp-bd-total .erp-bd-adj {
  color: var(--text);
}

.erp-beh-header-stats {
  display: flex;
  gap: 0;
  flex-shrink: 0;
  border-left: 1px solid var(--border);
  padding-left: 20px;
}
.erp-beh-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 20px;
  border-right: 1px solid var(--border);
}
.erp-beh-stat:last-child { border-right: none; }
.erp-beh-stat__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
}
.erp-beh-stat__value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.erp-beh-stat__sub {
  font-size: 11px;
  color: var(--muted);
}

/* 2-column body */
.erp-beh-body {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 14px;
  flex: 1;
  min-height: 0;
}
.erp-beh-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow-y: auto;
}
.erp-beh-right {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

/* Typing/paste bar card */
.erp-beh-bar-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  flex-shrink: 0;
}
.erp-beh-bar-card__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

/* Cards grid */
.erp-beh-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.erp-beh-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.erp-beh-card__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
}
.erp-beh-card__value {
  font-size: 15px;
  font-weight: 600;
}
.erp-beh-card__value--plain {
  color: var(--text);
}
.erp-beh-card__sub {
  font-size: 12px;
  color: var(--muted);
}

/* Typing/paste bar */
.erp-beh-bar {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--border);
  margin: 2px 0;
}
.erp-beh-bar__fill {
  height: 100%;
  transition: width 0.4s ease;
}
.erp-beh-bar__fill--typed {
  background: var(--accent, #60a5fa);
}
.erp-beh-bar__fill--pasted {
  background: var(--orange, #f97316);
}
.erp-beh-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
}

/* Badge */
.erp-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--badge-colour, var(--muted));
  background: color-mix(in hsl, var(--badge-colour, var(--border)) 15%, transparent);
  border: 1px solid color-mix(in hsl, var(--badge-colour, var(--border)) 30%, transparent);
}

/* Event log — lives in .erp-beh-right */
.erp-beh-log {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}
.erp-beh-log__title {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.erp-beh-log__list {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex: 1;
}
.erp-beh-log__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.erp-beh-log__row:last-child { border-bottom: none; }
.erp-beh-log__icon { flex-shrink: 0; font-size: 13px; }
.erp-beh-log__desc { flex: 1; color: var(--text); }
.erp-beh-log__ts { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Empty state */
.erp-beh-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 24px;
  text-align: center;
  color: var(--muted);
}
.erp-beh-empty p { margin: 0; }

/* Behaviour pane in single-col split */
.editor-review-split[data-view-mode="behaviour"] {
  grid-template-columns: 1fr;
  padding: 0 16px 16px;
}
.editor-review-split[data-view-mode="behaviour"] .erp-behaviour-pane {
  flex: 1;
}

/* ---------------------------
   Lists (Lectures sidebar)
   --------------------------- */
.list {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-1);
  overflow: auto;
  max-height: calc(100dvh - 180px);
}
.list-item {
  padding: .65rem .75rem;
  border-bottom: 1px solid color-mix(in hsl, var(--border) 70%, transparent);
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.list-item:last-child { border-bottom: 0; }
.list-item:hover { background: var(--surface-2); }
.list-item.active { background: color-mix(in hsl, var(--accent) 12%, transparent); }

.results-list .list-item {
  flex-direction: column;
  gap: 4px;
}

.results-list .title {
  font-size: 16px;
  line-height: 1.35;
}

.results-list .muted {
  font-size: 12px;
}

.result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.result-actions .btn {
  flex: 0 0 auto;
}

.list-item .item-main { flex: 1; min-width: 0; }

/* ---------------------------
   Recommended reading (Research)
   --------------------------- */
.recommended-reading {
  margin: 12px 0 16px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-1);
  font-size: 13px;
}

.recommended-reading h2 {
  margin: 0 0 4px;
  font-size: 16px;
}

.recommended-list {
  margin: 0;
  padding-left: 20px;
  list-style: disc;
  display: grid;
  gap: 6px;
}

.recommended-item {
  color: inherit;
}

.recommended-item-body {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.bib-entry { display: flex; align-items: center; gap: 10px; }
.bib-entry-text { flex: 1; }
.bib-remove {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------------------------
   Lectures Viewer & Chat
   --------------------------- */
.viewer .toolbar {
  background: color-mix(in hsl, var(--card) 92%, transparent);
}
.doc {
  line-height: 1.65;
}
.doc .highlight,
mark.__hit {
  background: color-mix(in hsl, var(--accent) 22%, transparent);
  border-radius: 6px;
  padding: .05rem .2rem;
}

.outline {
  background: color-mix(in hsl, var(--card) 92%, transparent);
  border-right: 1px solid var(--border);
}
.outline .ol { display: grid; gap: .35rem; }
.outline .ol button {
  border-radius: 8px;
  padding: .35rem .5rem;
  background: transparent;
}
.outline .ol button:hover {
  background: var(--surface-2);
}

/* Chat panel */
.chat-wrap {
  padding: 16px;
  padding-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chat-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:2px; }
.cap { font-size: 12px; }
.prompt-count {
  white-space: nowrap;
  overflow: visible;
  min-width: 118px;
  display: inline-flex;
  justify-content: flex-end;
  font-variant-numeric: tabular-nums;
}
.cap .prompt-count {
  min-width: 0;
  justify-content: flex-start;
}
.assignment-meta .prompt-count {
  min-width: auto;
  justify-content: flex-start;
}
.locked-notice {
  border: 1px solid #5a2222;
  background: #2a1111;
  color: #ffb3b3;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
}
#msgs {
  margin: 6px 0 4px;
  max-height: 55vh;
  overflow: auto;
}

.msg-list:empty {
  display: none;
}

.msg-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.msg {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--card);
  color: var(--text);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

.msg--user {
  background: var(--bubble-user-bg);
  border-color: var(--bubble-user-border);
  color: var(--bubble-user-text);
}

.msg--assistant {
  background: var(--bubble-assistant-bg);
  border-color: var(--bubble-assistant-border);
  color: var(--bubble-assistant-text);
}

.msg--error {
  background: #2a1111;
  border-color: #5a2222;
  color: #ffb3b3;
}

.msg__meta {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}

.msg__body {
  line-height: 1.6;
  word-break: break-word;
}

.msg__body ul {
  list-style: disc;
  padding-left: 18px;
  margin: 6px 0;
}

.msg__body li {
  margin: 4px 0;
}

.research-chat {
  display: grid;
  grid-template-rows: auto 1fr auto auto auto;
  gap: 10px;
}

.research-search {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.research-search .search-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.research-search input[type="search"] {
  flex: 1;
  min-width: 260px;
  height: 42px;
  font-size: 15px;
  padding: 0 14px;
}

.research-search.research-search--no-recommended {
  flex-wrap: nowrap;
}

.research-search.research-search--no-recommended input[type="search"] {
  min-width: 420px;
}

@media (max-width: 820px) {
  .research-search,
  .research-search.research-search--no-recommended {
    flex-wrap: wrap;
    gap: 10px;
  }

  .research-search input[type="search"],
  .research-search.research-search--no-recommended input[type="search"] {
    min-width: 0;
    width: 100%;
    flex-basis: 100%;
  }

  .research-search .search-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

.research-chat__msgs {
  min-height: 120px;
  max-height: 45vh;
  overflow: auto;
}

/* ---------------------------
   Nav + Hero
   --------------------------- */
.nav { 
  max-width: 1120px; 
  margin: 0 auto; 
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  padding: 10px 16px; 
}

.brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand img { height: 32px; }
.brand-text { display:flex; flex-direction:column; line-height:1.1; }
.brand-name { font-weight:700; font-size: 18px; letter-spacing:.2px; color: var(--text); }

.links { display:flex; gap:10px; align-items:center; }
.links a { color: var(--text); text-decoration:none; padding:8px 12px; border-radius: 10px; border:1px solid transparent; }
.links a:hover { border-color: var(--border); background: color-mix(in hsl, var(--card) 80%, transparent); }
.links a.active { border-color: var(--border); background: linear-gradient(90deg, color-mix(in hsl, var(--card) 90%, transparent), color-mix(in hsl, var(--elev) 90%, transparent)); }

.themebtn { 
  border:1px solid var(--border); 
  background: var(--surface-1);
  color: var(--text); 
  border-radius: 10px; 
  padding: 8px 10px; 
  cursor:pointer; 
}
.themebtn:hover { }

.layout-picker {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  border-radius: 10px;
  padding: 4px 5px;
}

.layout-btn {
  background: none;
  border: none;
  border-radius: 7px;
  padding: 4px 5px;
  cursor: pointer;
  color: var(--muted, #8b95a8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s;
}

.layout-btn:hover {
  color: var(--text);
  background: rgba(255,255,255,0.07);
}

.layout-btn--active {
  color: var(--text);
  background: var(--surface-2, rgba(255,255,255,0.1));
}

.admin-title-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.admin-title-button:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 4px;
  border-radius: 6px;
}

.admin-logo {
  height: 26px;
  width: 26px;
  border-radius: 4px;
}

/* Base hero container – layout is handled by .hero-row */
.hero {
  margin: 0;
}

/* Title + gradient text etc */
.title-xl { 
  font-size: 78px; 
  line-height: 1.1; 
  font-weight: 900; 
  letter-spacing: .2px; 
  margin: 0; 
}

.gradient-text {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; 
  background-clip: text; 
  color: transparent;
  filter: drop-shadow(0 6px 24px rgba(34,211,238,.12));
}

.slogan-under { margin: 0 0 6px; font-size: 14px; color: var(--muted); }
.subtitle { color: var(--muted); margin-top: 8px; font-size: 14px; max-width: 56ch; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in hsl, var(--card) 90%, transparent);
  font-size: 12px;
  width: fit-content;
  margin: 0;
}
.badge-muted {
  color: var(--muted);
  border-color: var(--border);
  background: transparent;
}
.badge-green {
  color: #4caf7d;
  border-color: rgba(76,175,125,0.4);
  background: rgba(76,175,125,0.1);
}
.badge-red {
  color: #e05252;
  border-color: rgba(224,82,82,0.4);
  background: rgba(224,82,82,0.1);
}
.btn-danger {
  background: rgba(224,82,82,0.15);
  color: #e05252;
  border: 1px solid rgba(224,82,82,0.4);
}
.btn-danger:hover {
  background: rgba(224,82,82,0.28);
  color: #e05252;
}

/* ── Admin brand (logo + title) ──────────────────────────── */
.admin-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-header-card .card-head {
  flex-wrap: wrap;
  padding-bottom: 0;
}

/* ── Admin tab bar ──────────────────────────────────────── */
.admin-tabs {
  display: flex;
  gap: 0;
  margin-top: 14px;
  border-bottom: 2px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.admin-tabs::-webkit-scrollbar { display: none; }

.admin-tab {
  flex: 0 0 auto;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: 9px 20px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
  border-radius: 0;
}
.admin-tab:hover { color: var(--fg); }
.admin-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
  font-weight: 700;
}

.admin-tab-theme {
  margin-left: auto;
  border-bottom: 3px solid transparent;
  align-self: center;
  margin-bottom: -2px;
}

/* ── Compliance badge ───────────────────────────────────── */
.compliance-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.compliance-badge--compliant {
  background: color-mix(in hsl, #22c55e 14%, transparent);
  color: #22c55e;
  border: 1px solid color-mix(in hsl, #22c55e 32%, transparent);
}
.compliance-badge--flagged {
  background: color-mix(in hsl, #ef4444 14%, transparent);
  color: #ef4444;
  border: 1px solid color-mix(in hsl, #ef4444 32%, transparent);
}

/* ── Analytics dashboard v2 ──────────────────────────────── */
/* ─── Analytics Dashboard ─────────────────────────── */
.an-wrap {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 4px 0 12px;
}

/* ─── Section wrapper ─── */
.an-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.an-section-hd {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

/* ─── 4 Stat cards ─── */
.an-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.an-stat-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.an-stat-value {
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
  letter-spacing: -.01em;
}
.an-stat-label {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
}

/* ─── Standalone chart ─── */
.an-chart-card--standalone {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.an-chart-hd {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  padding: 13px 16px 10px;
  border-bottom: 1px solid var(--border);
}
.an-chart-hint {
  font-weight: 400;
  color: var(--muted);
  font-size: 11.5px;
}
.an-chart-body {
  padding: 16px;
}
.an-empty {
  padding: 24px 0;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* ─── Key Insights list ─── */
.an-insights-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.an-insight-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.55;
}
.an-insight-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 7px;
}

/* ─── Recommendations list ─── */
.an-recs-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.an-rec-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.55;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-radius: 10px;
}
.an-rec-arrow {
  flex-shrink: 0;
  font-size: 15px;
  color: var(--accent);
  font-weight: 700;
  margin-top: 1px;
}

/* ─── Filter bar ─── */
.an-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.an-filter-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.an-filter-select {
  font-size: 12px;
  padding: 4px 28px 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238b949e'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  cursor: pointer;
}
.an-filter-active {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 20px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}
.an-demo-badge {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid var(--border);
  white-space: nowrap;
}

/* ─── 6-card KPI row ─── */
.an-stats-row--6 {
  grid-template-columns: repeat(3, 1fr);
}

/* ─── 2-col chart grid ─── */
.an-charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.an-chart-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.an-chart-body--center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── 3-col insight panels ─── */
.an-insights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.an-insight-panel {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.an-insight-panel-hd {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  line-height: 1.35;
}
.an-insight-panel-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  flex: 1;
}
.an-insight-bullet {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.55;
}
.an-insight-bullet-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-top: 6px;
}

/* ─── Editor behaviour summary row ─── */
.an-beh-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.an-beh-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.an-beh-val {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
  letter-spacing: -.01em;
}
.an-beh-unit {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  margin-left: 2px;
}
.an-beh-lbl {
  font-size: 11.5px;
  color: var(--muted);
}

/* ─── Question groups ─── */
.an-q-groups {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.an-q-group {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.an-q-group-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 4%, var(--surface-2));
  border-bottom: 1px solid var(--border);
}
.an-q-group-body {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.an-q-item {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
  padding: 9px 12px;
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  border-radius: 8px;
  border-left: 3px solid var(--accent);
}
.an-q-badge {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}

/* ─── Responsive ─── */
@media (max-width: 1100px) {
  .an-insights-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 780px) {
  .an-stats-row      { grid-template-columns: repeat(2, 1fr); }
  .an-stats-row--6   { grid-template-columns: repeat(2, 1fr); }
  .an-charts-grid    { grid-template-columns: 1fr; }
  .an-insights-grid  { grid-template-columns: 1fr; }
  .an-beh-row        { grid-template-columns: repeat(2, 1fr); }
  .an-filter-bar { gap: 8px; }
  .an-demo-badge { margin-left: 0; }
}

/* ─── Editor Start Helper (.esh-*) ───────────────────────────────── */
.esh-panel {
  flex-shrink: 0;
  margin: 0 0 4px;
  padding: 8px 12px 10px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  border-radius: 10px;
}
.esh-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
  min-height: 22px;
}
.esh-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
}
/* Chevron toggle button */
.esh-chevron {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 2px 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: background 0.12s, color 0.12s;
  line-height: 0;
}
.esh-chevron:hover {
  background: var(--hover);
  color: var(--text);
}
.esh-chevron svg {
  transition: transform 0.25s ease;
}
.esh-chevron--up svg {
  transform: rotate(180deg);
}
/* Animated collapsible body */
.esh-body {
  overflow: hidden;
  transition: max-height 0.28s ease, opacity 0.25s ease;
  opacity: 1;
}
/* Wrapping chip grid — capped to 2 rows */
.esh-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 8px;
  max-height: calc(2 * (26px + 6px));
  overflow: hidden;
}
.esh-chip {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  height: 26px;
  display: flex;
  align-items: center;
  transition: background 0.13s, border-color 0.13s, color 0.13s;
}
.esh-chip:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
  border-color: var(--accent);
  color: var(--accent);
}
/* Skeleton loading chips */
.esh-chip-skeleton {
  display: inline-block;
  background: color-mix(in srgb, var(--border) 60%, var(--surface-2));
  border-radius: 20px;
  height: 26px;
  animation: esh-shimmer 1.4s ease-in-out infinite;
}
.esh-chip-skeleton:nth-child(1) { width: 110px; }
.esh-chip-skeleton:nth-child(2) { width: 145px; }
.esh-chip-skeleton:nth-child(3) { width: 128px; }
.esh-chip-skeleton:nth-child(4) { width: 160px; }
.esh-chip-skeleton:nth-child(5) { width: 102px; }
.esh-chip-skeleton:nth-child(6) { width: 138px; }
@keyframes esh-shimmer {
  0%, 100% { opacity: 0.55; }
  50%       { opacity: 0.25; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Typography extensions — Quill font / size pickers
   ──────────────────────────────────────────────────────────────────────────── */

/* Font family option labels shown in Quill Snow picker */
.ql-font span[data-value="Arial"]::before           { font-family: Arial, sans-serif; }
.ql-font span[data-value="Times New Roman"]::before { font-family: "Times New Roman", serif; }
.ql-font span[data-value="Calibri"]::before         { font-family: Calibri, sans-serif; }
.ql-font span[data-value="Georgia"]::before         { font-family: Georgia, serif; }
.ql-font span[data-value="Verdana"]::before         { font-family: Verdana, sans-serif; }
.ql-font span[data-value="Tahoma"]::before          { font-family: Tahoma, sans-serif; }
.ql-font span[data-value="Trebuchet MS"]::before    { font-family: "Trebuchet MS", sans-serif; }
.ql-font span[data-value="Garamond"]::before        { font-family: Garamond, serif; }
.ql-font span[data-value="Cambria"]::before         { font-family: Cambria, serif; }
.ql-font span[data-value="Courier New"]::before     { font-family: "Courier New", monospace; }

/* Picker label width so font names don't get clipped */
.editor-split-panel .ql-snow .ql-picker.ql-font { width: 130px; }
.editor-split-panel .ql-snow .ql-picker.ql-size { width: 62px; }
#fs-editor-wrap .ql-snow .ql-picker.ql-font     { width: 130px; }
#fs-editor-wrap .ql-snow .ql-picker.ql-size     { width: 62px; }

/* ─────────────────────────────────────────────────────────────────────────────
   Page orientation — portrait narrows the content column, landscape widens it
   ──────────────────────────────────────────────────────────────────────────── */

/* When orientation is active: show a "desk" background so the paper stands out */
.wx-portrait .ql-container,
.wx-landscape .ql-container {
  background: rgba(0,0,0,0.18);
  padding: 24px 0;
  overflow-y: auto;
}

/* Portrait: paper-width column with drop shadow */
.wx-portrait .ql-container .ql-editor {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  background: var(--card, #1e1e2e);
  box-shadow: 0 2px 20px rgba(0,0,0,0.35);
  border-radius: 3px;
  min-height: 900px;
}

/* Landscape: wider column with drop shadow */
.wx-landscape .ql-container .ql-editor {
  max-width: 1050px;
  margin-left: auto;
  margin-right: auto;
  background: var(--card, #1e1e2e);
  box-shadow: 0 2px 20px rgba(0,0,0,0.35);
  border-radius: 3px;
  min-height: 700px;
}

/* Light mode: white paper on light-grey desk */
:root[data-theme="light"] .wx-portrait .ql-container,
:root[data-theme="light"] .wx-landscape .ql-container {
  background: #d0d0d0;
}
:root[data-theme="light"] .wx-portrait .ql-container .ql-editor,
:root[data-theme="light"] .wx-landscape .ql-container .ql-editor {
  background: #ffffff;
  box-shadow: 0 2px 16px rgba(0,0,0,0.12);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Fullscreen-editor orientation overrides
   The fullscreen HTML sets `#fs-editor .ql-editor { max-width:none }` (specificity 1,1,0)
   which beats the generic `.wx-portrait .ql-container .ql-editor` rules (0,3,0).
   Adding #fs-editor-wrap gives us (1,3,0) which wins.

   Layout goal: header + paper + footer form ONE seamless document column
   floating in the body gradient (which acts as the "desk" background).
   No extra desk overlay is needed — the body's own background provides it.
   ──────────────────────────────────────────────────────────────────────────── */

/* Container: transparent so the body gradient shows through as the desk.
   scrollbar-gutter:stable reserves the scrollbar lane even when hidden, so
   the paper column centers against a consistent width and stays aligned with
   the header/footer bars that live outside the scroll container. */
#fs-editor-wrap.wx-portrait .ql-container,
#fs-editor-wrap.wx-landscape .ql-container {
  background: transparent;
  padding: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

/* Remove the Quill Snow default border that appears around the container and
   toolbar now that the Quill stylesheet loads correctly. The paper column uses
   box-shadow for depth; an extra 1px border looks wrong. */
#fs-editor-wrap .ql-container.ql-snow {
  border: none !important;
}
#fs-editor-wrap .ql-toolbar.ql-snow {
  border: none !important;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08)) !important;
}

/* ── Portrait document column ─────────────────────────────────────────────── */

/* Header — top section of the document column */
#fs-editor-wrap.wx-portrait .wx-doc-header {
  width: 100%;
  max-width: 710px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 32px;   /* desk gap above the document */
  margin-bottom: 0;
  background: var(--card, #0f152b);
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  border-radius: 6px 6px 0 0;
  padding: 7px 60px;
  box-shadow: -4px 0 24px rgba(0,0,0,0.45), 4px 0 24px rgba(0,0,0,0.45),
              0 -6px 18px rgba(0,0,0,0.35);
}

/* Paper — main writing area */
#fs-editor-wrap.wx-portrait .ql-container .ql-editor {
  max-width: 710px;
  margin-left: auto;
  margin-right: auto;
  background: var(--card, #0f152b);
  box-shadow: -4px 0 24px rgba(0,0,0,0.45), 4px 0 24px rgba(0,0,0,0.45);
  border-radius: 0;
  min-height: 840px;
  padding: 40px 60px;
  /* Quill v2 does not set position:relative on .ql-editor, which causes the
     ql-blank::before placeholder to anchor against .ql-container (x=0) instead
     of the paper column. Forcing position:relative fixes the placeholder. */
  position: relative;
}

/* Footer — bottom section of the document column */
#fs-editor-wrap.wx-portrait .wx-doc-footer {
  width: 100%;
  max-width: 710px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 32px;  /* desk gap below the document */
  background: var(--card, #0f152b);
  border: none;
  border-top: 1px solid rgba(255,255,255,0.07);
  border-radius: 0 0 6px 6px;
  padding: 7px 60px;
  box-shadow: -4px 0 24px rgba(0,0,0,0.45), 4px 0 24px rgba(0,0,0,0.45),
              0 6px 18px rgba(0,0,0,0.35);
}

/* ── Landscape document column ────────────────────────────────────────────── */

#fs-editor-wrap.wx-landscape .wx-doc-header {
  width: 100%;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 32px;
  margin-bottom: 0;
  background: var(--card, #0f152b);
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  border-radius: 6px 6px 0 0;
  padding: 7px 80px;
  box-shadow: -4px 0 24px rgba(0,0,0,0.45), 4px 0 24px rgba(0,0,0,0.45),
              0 -6px 18px rgba(0,0,0,0.35);
}

#fs-editor-wrap.wx-landscape .ql-container .ql-editor {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  background: var(--card, #0f152b);
  box-shadow: -4px 0 24px rgba(0,0,0,0.45), 4px 0 24px rgba(0,0,0,0.45);
  border-radius: 0;
  min-height: 700px;
  padding: 40px 80px;
  position: relative;
}

#fs-editor-wrap.wx-landscape .wx-doc-footer {
  width: 100%;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 32px;
  background: var(--card, #0f152b);
  border: none;
  border-top: 1px solid rgba(255,255,255,0.07);
  border-radius: 0 0 6px 6px;
  padding: 7px 80px;
  box-shadow: -4px 0 24px rgba(0,0,0,0.45), 4px 0 24px rgba(0,0,0,0.45),
              0 6px 18px rgba(0,0,0,0.35);
}

/* ── Light mode fullscreen orientation ───────────────────────────────────── */

:root[data-theme="light"] #fs-editor-wrap.wx-portrait .wx-doc-header,
:root[data-theme="light"] #fs-editor-wrap.wx-landscape .wx-doc-header {
  background: #ffffff;
  border-bottom-color: rgba(0,0,0,0.07);
  box-shadow: -3px 0 16px rgba(0,0,0,0.12), 3px 0 16px rgba(0,0,0,0.12),
              0 -5px 14px rgba(0,0,0,0.09);
}

:root[data-theme="light"] #fs-editor-wrap.wx-portrait .ql-container .ql-editor,
:root[data-theme="light"] #fs-editor-wrap.wx-landscape .ql-container .ql-editor {
  background: #ffffff;
  box-shadow: -3px 0 16px rgba(0,0,0,0.12), 3px 0 16px rgba(0,0,0,0.12);
}

:root[data-theme="light"] #fs-editor-wrap.wx-portrait .wx-doc-footer,
:root[data-theme="light"] #fs-editor-wrap.wx-landscape .wx-doc-footer {
  background: #ffffff;
  border-top-color: rgba(0,0,0,0.07);
  box-shadow: -3px 0 16px rgba(0,0,0,0.12), 3px 0 16px rgba(0,0,0,0.12),
              0 5px 14px rgba(0,0,0,0.09);
}

/* Orientation toggle button styles */
#wx-orient-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px;
  padding: 3px 10px !important;
  width: auto !important;
  height: auto !important;
  min-width: max-content;
  white-space: nowrap;
  border: 1px solid var(--border, rgba(99,102,241,0.3));
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  background: none;
  color: inherit;
  line-height: 1.4;
  transition: background 0.15s, border-color 0.15s;
}
#wx-orient-btn:hover { background: rgba(79,142,247,0.12); border-color: var(--accent, #4f8ef7); }
#wx-orient-btn.wx-orient-active {
  background: rgba(79,142,247,0.18);
  border-color: var(--accent, #4f8ef7);
  color: var(--accent, #4f8ef7);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Header and footer editable areas
   ──────────────────────────────────────────────────────────────────────────── */

.wx-doc-header,
.wx-doc-footer {
  width: 100%;
  min-height: 36px;
  padding: 7px 18px;
  font-size: 12px;
  color: var(--text, #e5e7eb);
  border: none;
  outline: none;
  background: transparent;
  box-sizing: border-box;
  line-height: 1.5;
  transition: background 0.15s;
}

.wx-doc-header { margin-bottom: 0; }
.wx-doc-footer { margin-top:    0; }

/* Placeholder text via data attribute */
.wx-doc-header:empty::before,
.wx-doc-footer:empty::before {
  content: attr(data-placeholder);
  color: var(--text, #e5e7eb);
  opacity: 0.28;
  pointer-events: none;
}

/* Subtle highlight on focus */
.wx-doc-header:focus,
.wx-doc-footer:focus {
  background: var(--surface-2, rgba(255,255,255,0.03));
  color: var(--text, #e5e7eb);
}

/* ── Table Style Panel (wx-tbl-style-panel) ──────────────────────── */
.wx-tbl-style-panel {
  position: fixed;
  z-index: 10002;
  background: var(--card, #1e1e2e);
  border: 1px solid var(--border, #444);
  border-radius: 8px;
  padding: 14px 16px;
  width: 270px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  font-size: 13px;
  color: var(--text, #e5e7eb);
}

.wx-tsp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.wx-tsp-label {
  font-size: 12px;
  min-width: 90px;
  flex-shrink: 0;
  color: var(--text, #e5e7eb);
}

.wx-tbl-style-panel input[type="color"] {
  width: 38px;
  height: 28px;
  border: 1px solid var(--border, #555);
  border-radius: 4px;
  cursor: pointer;
  padding: 1px 2px;
  background: transparent;
  flex-shrink: 0;
}

.wx-tbl-style-panel select {
  flex: 1;
  background: var(--surface, #111);
  border: 1px solid var(--border, #444);
  border-radius: 4px;
  color: inherit;
  padding: 4px 8px;
  font-size: 12px;
  font-family: inherit;
}

.wx-tsp-none-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  color: var(--muted, #888);
}

.wx-tsp-btns {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  justify-content: flex-end;
}

.wx-tsp-btns button {
  padding: 5px 14px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  border: 1px solid var(--border, #444);
  background: transparent;
  color: inherit;
  transition: opacity 0.15s;
}

.wx-tsp-btns button:hover {
  opacity: 0.8;
}

.wx-tsp-btns button.wx-tsp-primary {
  background: var(--accent, #4f8ef7);
  border-color: var(--accent, #4f8ef7);
  color: #fff;
}

/* ── Table captions in the Quill editor ─────────────────────────── */
.ql-editor table caption,
.ql-editor table caption[data-wx-caption] {
  caption-side: bottom;
  display: table-caption;
  font-size: 12px;
  font-style: italic;
  color: var(--muted, #888);
  text-align: center;
  padding: 5px 8px 4px;
  border-top: 1px dashed var(--border, #444);
  outline: none;
  cursor: text;
}

.ql-editor table caption:focus,
.ql-editor table caption[data-wx-caption]:focus {
  background: rgba(79, 142, 247, 0.06);
  border-top-color: var(--accent, #4f8ef7);
  border-radius: 0 0 4px 4px;
}

/* ── Editor tables general ──────────────────────────────────────── */
.ql-editor table {
  border-collapse: collapse;
  width: 100%;
  margin: 8px 0;
}

.ql-editor table td,
.ql-editor table th {
  min-width: 60px;
  padding: 6px 8px;
  word-break: break-word;
  color: inherit;
}

/* Text-box table — styled callout box */
.ql-editor table[data-wx-textbox] {
  border: 2px solid #4f8ef7 !important;
  border-radius: 6px;
  border-collapse: separate !important;
  border-spacing: 0;
  width: 320px;
  margin: 8px 0;
}
.ql-editor table[data-wx-textbox] td {
  background: rgba(79,142,247,.07);
  border: none !important;
  border-radius: 4px;
  padding: 10px 14px;
  min-height: 52px;
  color: inherit;
}

/* ── Citation style picker ─────────────────────────────────────────────────── */
.style-picker-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.style-picker-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 140px;
  max-width: 220px;
  justify-content: space-between;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.style-picker-btn.active,
.style-picker-btn:focus {
  border-color: var(--accent, #4f8ef7);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #4f8ef7) 20%, transparent);
}

.style-picker-chevron {
  flex-shrink: 0;
  transition: transform 0.18s;
  opacity: 0.6;
}

.style-picker-btn.active .style-picker-chevron {
  transform: rotate(180deg);
}

.style-picker-panel {
  position: fixed;
  min-width: 280px;
  max-height: 380px;
  overflow-y: auto;
  background: var(--surface, #1e1e2e);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0;
  z-index: 9500;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
}

.style-picker-search-row {
  position: relative;
  padding: 10px 10px 8px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface, #1e1e2e) 80%, transparent);
  border-radius: 10px 10px 0 0;
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}

.style-picker-search-input {
  flex: 1;
  height: 32px;
  padding: 0 28px 0 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: color-mix(in srgb, var(--text, #fff) 5%, transparent);
  color: var(--text);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}

.style-picker-search-input::placeholder {
  color: var(--muted);
  font-size: 12px;
}

.style-picker-search-input:focus {
  border-color: var(--accent, #4f8ef7);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #4f8ef7) 20%, transparent);
}

.style-search-clear,
.style-picker-search-clear {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.style-search-clear:hover,
.style-picker-search-clear:hover {
  color: var(--text);
}

.style-picker-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 14px 4px;
  margin: 0;
}

.style-picker-built-in-list {
  list-style: none;
  margin: 0;
  padding: 0 0 6px;
}

.style-picker-built-in-item {
  padding: 9px 14px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text);
  border-radius: 0;
  transition: background 0.1s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.style-picker-built-in-item:hover {
  background: color-mix(in srgb, var(--accent, #4f8ef7) 12%, transparent);
}

.style-picker-built-in-item.active {
  color: var(--accent, #4f8ef7);
  font-weight: 600;
  background: color-mix(in srgb, var(--accent, #4f8ef7) 8%, transparent);
}

.style-picker-built-in-item.active::before {
  content: "✓";
  font-size: 11px;
  margin-right: 4px;
  color: var(--accent, #4f8ef7);
}

.style-picker-results {
  border-top: 1px solid var(--border);
  padding: 4px 0;
  margin: 0;
  list-style: none;
}

.style-search-item {
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1.3;
}

.style-search-item:hover,
.style-search-item[aria-selected="true"] {
  background: color-mix(in srgb, var(--accent, #4f8ef7) 15%, transparent);
}

.style-search-item__title {
  flex: 1;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.style-search-item__badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent, #4f8ef7) 25%, transparent);
  color: var(--accent, #4f8ef7);
}

.style-search-empty {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

.style-picker-custom-section {
  border-top: 1px solid var(--border);
}

@media (max-width: 600px) {
  .style-picker-btn {
    min-width: 110px;
    font-size: 12px;
  }
  .style-picker-panel {
    min-width: 240px;
    left: 0;
    right: 0;
  }
}