:root {
  --ed-bg: #f4f5f7;
  --ed-panel: #ffffff;
  --ed-ink: #1d2129;
  --ed-muted: #6b7280;
  --ed-line: #e3e6ea;
  --ed-accent: #2f6df6;
  --ed-read: #b9d4ff;      /* current word highlight while reading */
  --ed-shadow: 0 1px 3px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06);
}

/* current word being read — global pseudo, only ever set by EchoDoc.
   Translucent so it also works as an overlay box on a rendered PDF page
   (the printed word stays visible through the highlight). */
::highlight(reading) {
  background-color: rgba(90, 150, 255, 0.45);
}

/* ---- Rendered PDF pages (canvas + transparent text layer) ---- */
.editor.has-pdf {
  background: #eceef1;
  padding: 16px;
}
.pdf-page {
  position: relative;
  margin: 0 auto 16px;
  background: #fff;
  box-shadow: var(--ed-shadow);
}
.pdf-page:last-child { margin-bottom: 0; }
.pdf-canvas { display: block; }
.textLayer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  line-height: 1;
}
.textLayer span {
  position: absolute;
  color: transparent;
  white-space: pre;
  transform-origin: 0 0;
}

/* ================================================================= */
/*  Standalone page chrome (offline.html only)                       */
/* ================================================================= */
body.echodoc-standalone {
  margin: 0;
  min-height: 100%;
  background: var(--ed-bg);
  color: var(--ed-ink);
  font: 15px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.echodoc-standalone .topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 16px;
  background: var(--ed-panel);
  border-bottom: 1px solid var(--ed-line);
  box-shadow: var(--ed-shadow);
  position: sticky;
  top: 0;
  z-index: 10;
  flex-wrap: wrap;
}
.echodoc-standalone .brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 18px; }
.echodoc-standalone .brand .logo { font-size: 22px; }

.echodoc-standalone .user-chip {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 5px;
  border-radius: 999px;
  border: 1px solid var(--ed-line);
  background: #fff;
  cursor: pointer;
  font-weight: 600;
}
.echodoc-standalone .user-chip:hover { background: #f0f3f8; border-color: #cfd6df; }
.echodoc-standalone .user-chip .avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--ed-accent); color: #fff;
  display: grid; place-items: center; font-size: 14px; text-transform: uppercase;
}
.echodoc-standalone .user-chip .chev { color: var(--ed-muted); font-size: 12px; }

/* ================================================================= */
/*  Integrated toolbar (index.php — sits under the CryoSim header)   */
/* ================================================================= */
.echodoc-toolbar {
  background: var(--ed-panel);
  border-bottom: 1px solid var(--ed-line);
  box-shadow: var(--ed-shadow);
  padding: 10px 16px;
  position: sticky;
  top: 0;
  z-index: 9;
}

/* ================================================================= */
/*  Shared EchoDoc components (both modes) — scoped to .echodoc       */
/* ================================================================= */
.echodoc, .echodoc * { box-sizing: border-box; }
.echodoc {
  color: var(--ed-ink);
  font: 15px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.echodoc .toolbar { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.echodoc .group { display: flex; gap: 6px; align-items: center; padding-right: 12px; border-right: 1px solid var(--ed-line); }
.echodoc .group:last-child { border-right: none; }

.echodoc button {
  font: inherit;
  padding: 7px 11px;
  border: 1px solid var(--ed-line);
  background: #fff;
  color: var(--ed-ink);
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .05s;
  white-space: nowrap;
}
.echodoc button:hover:not(:disabled) { background: #f0f3f8; border-color: #cfd6df; }
.echodoc button:active:not(:disabled) { transform: translateY(1px); }
.echodoc button:disabled { opacity: .45; cursor: not-allowed; }
.echodoc button.primary { background: var(--ed-accent); color: #fff; border-color: var(--ed-accent); }
.echodoc button.primary:hover:not(:disabled) { background: #2560e0; }
.echodoc button.active { background: #dbe6ff; border-color: var(--ed-accent); }

.echodoc .swatch { display: inline-flex; align-items: center; gap: 4px; }
.echodoc .swatch #swatch-preview {
  width: 16px; height: 16px; border-radius: 4px; display: inline-block;
  border: 1px solid rgba(0,0,0,.2);
}
.echodoc .swatch select { border: 1px solid var(--ed-line); border-radius: 6px; padding: 5px; font: inherit; }

/* Toolbar relocated into the shared header's center slot (top row).
   Self-contained so it renders correctly outside the .echodoc subtree. */
.cryo-header-center .toolbar { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin:0; }
.cryo-header-center .group { display:flex; gap:6px; align-items:center; padding-right:10px; border-right:1px solid var(--ed-line); }
.cryo-header-center .group:last-child { border-right:none; padding-right:0; }
.cryo-header-center .toolbar button {
  font:inherit; padding:7px 11px; border:1px solid var(--ed-line);
  background:#fff; color:var(--ed-ink); border-radius:8px; cursor:pointer; line-height:1.1;
}
.cryo-header-center .toolbar button:hover { border-color:var(--ed-accent); color:var(--ed-accent); }
.cryo-header-center .swatch { display:inline-flex; align-items:center; gap:4px; }
.cryo-header-center .swatch #swatch-preview { width:16px; height:16px; border-radius:4px; display:inline-block; border:1px solid rgba(0,0,0,.2); }
.cryo-header-center .swatch select { border:1px solid var(--ed-line); border-radius:6px; padding:5px; font:inherit; }

/* Workspace */
.echodoc .workspace {
  display: grid;
  grid-template-columns: 20% 1fr 20%;   /* Recent 20% · document ~60% · TTS 20% */
  gap: 16px;
  padding: 16px;
  max-width: none;
  margin: 0 auto;
}
.echodoc .editor-pane { min-width: 0; }

/* ---- Collapsible side panels ------------------------------------------------
   Either sidebar folds away to a narrow rail, giving the document the width.
   The left (files) pane collapses to the left, the Read Aloud pane to the
   right; the rail keeps a vertical label and the toggle so it can be reopened.
   State lives on .workspace and is remembered in localStorage. */
/* DOM order puts each toggle on its pane's inner edge already: the files pane
   is [label, toggle] and Read Aloud is [toggle, heading]. */
.echodoc .pane-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.echodoc .tts-pane .pane-head h2 { margin: 0; }
.echodoc .pane-label { display: none; font-weight: 600; font-size: 14px; white-space: nowrap; }
.echodoc .pane-toggle {
  padding: 4px 8px; font-size: 13px; line-height: 1; border-radius: 8px;
  border: 1px solid var(--ed-line); background: var(--ed-panel); color: var(--ed-muted);
  cursor: pointer;
}
.echodoc .pane-toggle:hover { background: #f0f3f9; color: var(--ed-ink); }

/* The files pane scrolls as ONE column: each section shows all of its items and
   the whole body scrolls. (Giving every section its own scroll box split the
   sidebar into thirds and showed only a handful of rows in each.) */
.echodoc .recent-pane .pane-body {
  flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto;
}

/* Collapsed: rail-width column, body hidden, label turned on its side. */
.echodoc .workspace.left-collapsed { grid-template-columns: auto 1fr 20%; }
.echodoc .workspace.right-collapsed { grid-template-columns: 20% 1fr auto; }
.echodoc .workspace.left-collapsed.right-collapsed { grid-template-columns: auto 1fr auto; }

.echodoc .workspace.left-collapsed .recent-pane,
.echodoc .workspace.right-collapsed .tts-pane { padding: 12px 8px; }
.echodoc .workspace.left-collapsed .recent-pane .pane-body,
.echodoc .workspace.right-collapsed .tts-pane .pane-body { display: none; }
/* Toggle on top in both rails (the two panes order label/button differently
   when expanded), so reopening is in the same place either side. */
.echodoc .workspace.left-collapsed .recent-pane .pane-head { flex-direction: column-reverse; gap: 12px; }
.echodoc .workspace.right-collapsed .tts-pane .pane-head { flex-direction: column; gap: 12px; }
.echodoc .workspace.left-collapsed .recent-pane .pane-label,
.echodoc .workspace.right-collapsed .tts-pane .pane-head h2 {
  display: block; writing-mode: vertical-rl; color: var(--ed-muted);
  font-size: 14px; white-space: nowrap;
}

/* Read Aloud stays usable while collapsed: the transport becomes a vertical
   strip of icon-only buttons under the rail's heading. */
.echodoc .workspace.right-collapsed .tts-pane .tts-controls {
  flex-direction: column; gap: 6px; margin: 12px 0 0;
}
.echodoc .workspace.right-collapsed .tts-pane .tts-controls button {
  flex: 0 0 auto; padding: 8px 6px; font-size: 15px;
}
.echodoc .workspace.right-collapsed .tts-pane .btn-text { display: none; }
/* A collapsed pane is only as tall as its label, so drop the scroll cage. */
.echodoc .workspace.left-collapsed .recent-pane { max-height: none; }

/* Recent files sidebar (browser library) */
.echodoc .recent-pane {
  background: var(--ed-panel);
  border-radius: 10px;
  box-shadow: var(--ed-shadow);
  padding: 12px;
  align-self: start;
  position: sticky;
  top: 74px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 90px);
}
.echodoc .recent-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.echodoc .recent-head h2 { margin: 0; font-size: 15px; }
.echodoc .recent-list { padding: 4px; overflow-y: auto; }

/* ---- Collapsible sections within the files pane ----------------------------
   Recent / My Documents / Workspace each fold up into their heading. A section
   takes exactly the height of its own list — no inner scroll box, no fixed
   share of the sidebar — so every item is reachable by scrolling the pane. */
.echodoc .pane-section { display: flex; flex-direction: column; flex: 0 0 auto; }
.echodoc .pane-section.collapsed > *:not(.sec-head) { display: none; }
.echodoc .pane-section > .doc-list { flex: 0 0 auto; overflow: visible; }
.echodoc .sec-head { cursor: pointer; user-select: none; }
.echodoc .sec-head:hover h2 { color: var(--ed-accent); }
.echodoc .sec-head:focus-visible { outline: 2px solid var(--ed-accent); outline-offset: 2px; border-radius: 6px; }
.echodoc .sec-head .caret {
  display: inline-block; width: 1em; font-size: 11px; color: var(--ed-muted);
  transition: transform .12s ease;
}
.echodoc .pane-section.collapsed .caret { transform: rotate(-90deg); }

/* Workspace files — second list in the same sidebar, under a divider so it
   reads as a separate library from Recent. The two share the pane's height. */
.echodoc .ws-head { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ed-line); }
.echodoc .ws-list { padding: 4px; overflow-y: auto; }
.echodoc .ws-list .doc-empty { padding: 18px 14px; font-size: 13px; }
/* The download control is an <a>, so give it the icon buttons' look. */
.echodoc .doc-row .row-actions a.icon {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 5px 9px; font-size: 13px; border-radius: 8px;
  border: 1px solid var(--ed-line); background: var(--ed-panel);
  color: inherit; text-decoration: none; line-height: 1;
}
.echodoc .doc-row .row-actions a.icon:hover { background: #f0f3f9; }
.echodoc .doc-title-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.echodoc .doc-name {
  font: 600 15px/1 inherit;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ed-ink);
  padding: 6px 8px;
  border-radius: 6px;
}
.echodoc .doc-name:hover, .echodoc .doc-name:focus { border-color: var(--ed-line); background: #fff; outline: none; }
.echodoc .hint { color: var(--ed-muted); font-size: 13px; }

.echodoc .editor {
  background: var(--ed-panel);
  min-height: 68vh;
  padding: 48px 56px;
  border-radius: 10px;
  box-shadow: var(--ed-shadow);
  outline: none;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ed-ink);
}
.echodoc .editor p { margin: 0 0 12px; }
.echodoc .editor h1 { font-size: 26px; margin: 0 0 14px; }
.echodoc .editor h2 { font-size: 21px; margin: 18px 0 10px; }
.echodoc .editor h3 { font-size: 18px; margin: 16px 0 8px; }
.echodoc .editor ul, .echodoc .editor ol { margin: 0 0 12px 24px; }
.echodoc .editor .hl { border-radius: 2px; padding: 0 1px; }

/* TTS panel */
.echodoc .tts-pane {
  background: var(--ed-panel);
  border-radius: 10px;
  box-shadow: var(--ed-shadow);
  padding: 16px;
  align-self: start;
  position: sticky;
  top: 74px;
}
.echodoc .tts-pane h2 { margin: 0 0 12px; font-size: 16px; }
.echodoc .tts-controls { display: flex; gap: 6px; margin-bottom: 16px; }
.echodoc .tts-controls button { flex: 1; }
.echodoc .field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; font-size: 13px; color: var(--ed-muted); }
.echodoc .field > span { display: flex; justify-content: space-between; }
.echodoc .field b { color: var(--ed-ink); }
.echodoc .field select, .echodoc .field input[type=range] { width: 100%; }
.echodoc .field select { padding: 7px; border: 1px solid var(--ed-line); border-radius: 8px; font: inherit; color: var(--ed-ink); }
.echodoc .field.checkbox { flex-direction: row; align-items: center; gap: 8px; }
.echodoc .field.checkbox input { width: auto; }
.echodoc .voice-note {
  margin-top: 8px; font-size: 12px; color: var(--ed-muted);
  background: #f7f9fc; border: 1px solid var(--ed-line); border-radius: 8px;
  padding: 10px; min-height: 18px;
}

/* Modal */
.echodoc .modal-overlay {
  position: fixed; inset: 0;
  background: rgba(20, 26, 38, .45);
  display: grid; place-items: center;
  z-index: 40; padding: 20px;
}
.echodoc .modal {
  background: var(--ed-panel);
  width: min(560px, 100%); max-height: 82vh;
  border-radius: 14px; box-shadow: var(--ed-shadow);
  display: flex; flex-direction: column; overflow: hidden;
}
.echodoc .modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--ed-line);
}
.echodoc .modal-head h2 { margin: 0; font-size: 17px; }
.echodoc button.icon { border: none; background: transparent; font-size: 16px; padding: 4px 8px; }

.echodoc .user-row {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 18px; border-bottom: 1px solid var(--ed-line); flex-wrap: wrap;
}
.echodoc .user-row label { color: var(--ed-muted); font-size: 13px; }
.echodoc .user-row select { flex: 1; min-width: 120px; padding: 7px; border: 1px solid var(--ed-line); border-radius: 8px; font: inherit; }
.echodoc button.danger { color: #b3261e; border-color: #f0c9c6; }
.echodoc button.danger:hover:not(:disabled) { background: #fdeceb; }

.echodoc .doc-list { overflow-y: auto; padding: 8px; flex: 1; }
.echodoc .doc-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; }
.echodoc .doc-row:hover { background: #f5f7fb; }
.echodoc .doc-row .doc-info { flex: 1; min-width: 0; cursor: pointer; }
.echodoc .doc-row .doc-info .t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.echodoc .doc-row .doc-info .m { font-size: 12px; color: var(--ed-muted); }
.echodoc .doc-row.current { background: #eaf1ff; box-shadow: inset 0 0 0 1px #cfe0ff; }
.echodoc .doc-row .row-actions { display: flex; gap: 4px; }
.echodoc .doc-row .row-actions button { padding: 5px 9px; font-size: 13px; }
.echodoc .doc-empty { padding: 30px 18px; text-align: center; color: var(--ed-muted); }
.echodoc .modal-foot { padding: 10px 18px; border-top: 1px solid var(--ed-line); font-size: 12px; color: var(--ed-muted); min-height: 16px; }

/* Toast */
.echodoc .toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: #1d2129; color: #fff; padding: 10px 18px; border-radius: 999px;
  font-size: 14px; box-shadow: var(--ed-shadow); z-index: 50;
}

@media (max-width: 820px) {
  /* Stacked layout — collapsing sideways means nothing here, so ignore the
     saved state entirely and hide the toggles rather than leave dead buttons.
     These selectors must match the .left-collapsed/.right-collapsed rules'
     specificity, or those would win regardless of order. */
  .echodoc .workspace,
  .echodoc .workspace.left-collapsed,
  .echodoc .workspace.right-collapsed,
  .echodoc .workspace.left-collapsed.right-collapsed { grid-template-columns: 1fr; }
  .echodoc .workspace.left-collapsed .recent-pane .pane-body,
  .echodoc .workspace.right-collapsed .tts-pane .pane-body { display: block; }
  .echodoc .workspace.left-collapsed .recent-pane,
  .echodoc .workspace.right-collapsed .tts-pane { padding: 12px; }
  .echodoc .workspace.left-collapsed .recent-pane .pane-label { display: none; }
  .echodoc .workspace.right-collapsed .tts-pane .tts-controls {
    flex-direction: row; gap: 6px; margin: 0 0 16px;
  }
  .echodoc .workspace.right-collapsed .tts-pane .tts-controls button { flex: 1; }
  .echodoc .workspace.right-collapsed .tts-pane .btn-text { display: inline; }
  /* Drop the sideways rail affordances, but keep the Read Aloud heading —
     it lives in .pane-head now, so hide the parts, not the row. */
  .echodoc .recent-pane .pane-head { display: none; }
  .echodoc .pane-toggle { display: none; }
  .echodoc .workspace.right-collapsed .tts-pane .pane-head h2 {
    writing-mode: horizontal-tb; color: var(--ed-ink); font-size: 16px;
  }

  .echodoc .tts-pane { position: static; }
  .echodoc .recent-pane { position: static; max-height: none; }
  .echodoc .editor { padding: 28px 24px; }
}

/* ---- Drag & drop feedback (drop a .docx/.pdf to open it) ---- */
.echodoc.drag-over .editor {
  outline: 3px dashed #31bfd8;
  outline-offset: 4px;
  background: rgba(49, 191, 216, 0.06);
}
.echodoc.drag-over::after {
  content: "⬇ Drop a .docx or .pdf to read it";
  position: fixed;
  left: 0; right: 0; bottom: 24px;
  margin: 0 auto;
  width: max-content;
  max-width: 90vw;
  background: #0f172a;
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  z-index: 9999;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}