: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 top row (index.php)                                   */
/*  The editing toolbar lives in the shared header's centre slot, so */
/*  pinning the header keeps New/Open/Save/Highlight reachable while */
/*  a long document scrolls. Scoped here rather than in the sitewide */
/*  theme so only EchoDoc gets a sticky header.                      */
/* ================================================================= */
body.cryo-app .cryo-shell {
  position: sticky;
  top: 0;
  z-index: 20;              /* over the sticky side panes, under modals (40) */
  background: var(--bg, #f4f5f7);
}

/* Actual height of that top row, measured in app.js — the toolbar wraps to a
   second line on narrow screens, so the side panes can't assume a fixed 74px. */
:root { --ed-header-h: 74px; }

/* ================================================================= */
/*  Shared EchoDoc components (both modes) — scoped to .echodoc       */
/* ================================================================= */
.echodoc, .echodoc * { box-sizing: border-box; }
.echodoc {
  color: var(--ed-ink);
  /* §6c body floor. The header toolbar is outside .echodoc and inherits the
     site font, so raising this only affects the panes, lists and transport. */
  font: 16px/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;
  min-height: 44px;          /* §6c tap floor — padding alone left these at ~34px */
}
.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;
  min-height:44px;           /* §6c tap floor, same as .echodoc button above */
}
.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: 14px; line-height: 1; border-radius: 8px; min-width: 44px;
  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: calc(var(--ed-header-h) + 8px);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--ed-header-h) - 24px);
}
.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: 14px; }
/* 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: 14px; border-radius: 8px;
  min-width: 44px; min-height: 44px;      /* §6c — it is an <a>, so the button rule misses it */
  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 {
  /* The document-title field: an editable control, so it carries the 44px tap
     floor (master §6c) — it measured 32px tall. 16px also stops iOS zooming
     on focus, which on this field used to shove the toolbar off-screen. */
  font: 600 16px/1.2 inherit;
  min-height: 44px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ed-ink);
  padding: 10px 8px;
  border-radius: 6px;
  flex: 1 1 340px;
  min-width: 220px;
  max-width: 100%;
  text-overflow: ellipsis;
}
.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: 14px; }

.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; }

/* "Page X of Y" badge — mirrors the exported .docx page-number footer.
   Pinned to the editor's bottom-right corner (position set in JS) and
   follows the read-aloud position so the number changes while reading.
   Not scoped under .echodoc: the badge is appended to <body>, which sits
   outside the .echodoc wrapper, so an unscoped selector is required. */
.page-indicator {
  position: fixed;
  right: 24px;
  bottom: 16px;
  z-index: 40;
  padding: 4px 12px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ed-muted);
  background: var(--ed-panel);
  border: 1px solid var(--ed-line);
  border-radius: 999px;
  box-shadow: var(--ed-shadow);
  pointer-events: none;
  user-select: none;
}
.page-indicator[hidden] { display: none; }
/* Lift clear of the fixed Read-Aloud pill on phones/tablets (14px float offset
   + 6px pad + 44px transport row + safe-area pad ≈ 72px, so 84px clears it). */
@media (max-width: 1024px) {
  .page-indicator { bottom: 84px; right: 14px; }
}

/* 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: calc(var(--ed-header-h) + 8px);
}
.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: 14px; 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: 14px; 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; min-width: 44px; }

.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: 14px; }
.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: 14px; 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: 8px; }   /* §6c: 8px of dead space between neighbours */
.echodoc .doc-row .row-actions button { padding: 5px 9px; font-size: 14px; min-width: 44px; }
.echodoc .doc-empty { padding: 30px 18px; text-align: center; color: var(--ed-muted); }
.echodoc .doc-row.selected { box-shadow: inset 0 0 0 1px var(--ed-accent); }
.echodoc .doc-row[draggable="true"] { cursor: pointer; }
.echodoc .doc-row.dragging { opacity: .45; }

/* ---- Folders in My Documents ------------------------------------------------
   A folder row is a doc row with a caret, a count and its own ⬆: the documents
   on that shelf slide in underneath it, indented against a rule so the nesting
   reads at a glance in a 20%-wide sidebar. Rows are drop targets — a document
   dragged onto one is filed there, a .docx dropped on one is imported there —
   and .drop-target is the "let go here" cue for both. */
.echodoc .head-actions { display: flex; align-items: center; gap: 4px; }
.echodoc .folder-group { margin-bottom: 2px; }
.echodoc .folder-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px; cursor: pointer;
}
.echodoc .folder-row:hover { background: #f5f7fb; }
.echodoc .folder-row .doc-info { flex: 1; min-width: 0; }
.echodoc .folder-row .doc-info .t {
  font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.echodoc .folder-row .doc-info .m { font-size: 14px; color: var(--ed-muted); }
.echodoc .folder-row .row-actions { display: flex; gap: 8px; }
.echodoc .folder-row .row-actions button { padding: 5px 9px; font-size: 14px; min-width: 44px; }
.echodoc .folder-row .caret {
  display: inline-block; width: 1em; font-size: 11px; color: var(--ed-muted);
  transition: transform .12s ease; transform: rotate(-90deg);
}
.echodoc .folder-group.open .folder-row .caret { transform: none; }
.echodoc .folder-docs {
  margin: 2px 0 6px 14px; padding-left: 8px; border-left: 2px solid var(--ed-line);
}
.echodoc .folder-docs .doc-empty { padding: 12px 10px; font-size: 14px; text-align: left; }
.echodoc .drop-target {
  background: #eaf1ff; box-shadow: inset 0 0 0 2px var(--ed-accent);
}
.echodoc .ws-list.drop-target { border-radius: 10px; }

/* ---- The picked document's options (in the Read Aloud pane) -----------------
   Clicking a document in the sidebar opens it and shows what can be done with
   it here, so the file list stays a list of names and these actions get room
   for real labels — including on phones, where the sidebar rows are cramped
   and drag-and-drop isn't available (the folder <select> moves it instead). */
.echodoc .doc-panel {
  margin: 0 0 16px; padding: 12px;
  border: 1px solid var(--ed-line); border-radius: 10px; background: #f7f9fc;
}
.echodoc .doc-panel[hidden] { display: none; }
.echodoc .doc-panel-head { display: flex; align-items: flex-start; gap: 8px; }
.echodoc .doc-panel-head h3 {
  margin: 0; font-size: 15px; line-height: 1.35; flex: 1; min-width: 0;
  overflow-wrap: anywhere;
}
.echodoc .doc-panel-meta { margin: 4px 0 10px; font-size: 13.5px; color: var(--ed-muted); }
.echodoc .doc-panel .field { margin-bottom: 10px; }
.echodoc .doc-panel-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.echodoc .doc-panel-actions button { flex: 1 1 auto; min-height: 44px; font-size: 14px; }
.echodoc .modal-foot { padding: 10px 18px; border-top: 1px solid var(--ed-line); font-size: 14px; 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: 15px; box-shadow: var(--ed-shadow); z-index: 50;
}

/* Mobile-only chrome — the files-drawer trigger, the two bottom-bar aux buttons
   (Files / Voice tray), the drawer close button, and the drawer/tray scrim.
   Hidden on desktop; the mobile media query below turns each one on. */
.echodoc .ed-mobile-only { display: none; }
.echodoc .ed-scrim { display: none; }

/* ================================================================= */
/*  MOBILE & TABLET  (≤1024px)                                       */
/*  Covers phones and tablets (portrait + most landscape). Two       */
/*  layers:                                                          */
/*   1. Generic stack — applies to BOTH the integrated app and the   */
/*      standalone offline.html (single column, static panes).       */
/*   2. body.cryo-app redesign — the integrated app only: document   */
/*      goes full-width, Read Aloud becomes a fixed bottom bar with  */
/*      an expandable voice tray, and Files slides in as a drawer.   */
/*      offline.html (body.echodoc-standalone) keeps the plain stack */
/*      because it has no files pane or tray wrapper.                 */
/* ================================================================= */
@media (max-width: 1024px) {
  /* ---- 1. Generic single-column stack (both pages) ---------------------- */
  .echodoc .workspace,
  .echodoc .workspace.left-collapsed,
  .echodoc .workspace.right-collapsed,
  .echodoc .workspace.left-collapsed.right-collapsed { grid-template-columns: minmax(0, 1fr); }
  /* Let single-column tracks shrink below wide content instead of overflowing */
  .echodoc .recent-pane,
  .echodoc .editor-pane,
  .echodoc .tts-pane,
  .echodoc .pane-body,
  .echodoc .field { min-width: 0; }
  .echodoc .field input,
  .echodoc .field select,
  .echodoc .tts-pane input[type=range] { max-width: 100%; }
  /* Sideways-rail affordances mean nothing when stacked. */
  .echodoc .pane-toggle { display: none; }
  .echodoc .recent-pane .pane-head { display: none; }
  .echodoc .tts-pane,
  .echodoc .recent-pane { position: static; max-height: none; }
  .echodoc .editor { padding: 26px 20px; }
  /* Drag-and-drop hint is desktop-only; free the space on touch devices. */
  .echodoc .doc-title-row .hint { display: none; }
  .echodoc .doc-name { flex: 1 1 100%; min-width: 0; }
  /* Wide rendered PDF pages scroll rather than break the layout. */
  .echodoc .editor.has-pdf { overflow-x: auto; }

  /* ---- 2. Integrated app redesign (index.php / body.cryo-app) ----------- */

  /* Document owns the screen. Read Aloud — the ONE thing this app exists to do,
     and the one control a reader touches over and over — is the fixed bar at the
     BOTTOM, in the thumb zone (master §6c "Reach"). The editing toolbar is the
     secondary, once-per-document set (Open / Save / Export, plus formatting that
     is hidden altogether while reading), so it takes the TOP slot. Leave room for
     both — heights are measured in JS (fallbacks cover first paint). On wide
     tablets the reading column is capped and centred; phones stay full-bleed. */
  body.cryo-app .echodoc .workspace {
    display: block;
    /* top-bar-h is the WHOLE editing bar (it wraps to 2–3 rows once you tap
       ✏️ Edit); +20 covers its 8px offset under the header plus breathing room.
       bottom-bar-h is the transport ROW only, so opening the voice tray overlays
       the document instead of shoving it; +44 covers the pill's 14px float
       offset, its own vertical padding and a little clearance. */
    padding: calc(var(--ed-top-bar-h, 56px) + 20px) 12px calc(var(--ed-bottom-bar-h, 44px) + 44px);
  }
  body.cryo-app .echodoc .editor-pane { max-width: 900px; margin: 0 auto; }
  body.cryo-app .echodoc .editor { min-height: 62vh; }

  /* Compact editing toolbar in the shared sticky header — every tool stays
     reachable (it scrolls horizontally), just with tap-friendly targets. */
  body.cryo-app .cryo-header-center .toolbar { gap: 8px; }
  body.cryo-app .cryo-header-center .group { gap: 4px; padding-right: 8px; }
  body.cryo-app .cryo-header-center .toolbar button { padding: 8px 10px; min-height: 44px; }   /* §6c floor — was 40px */
  /* Reading mode has nothing to format, so hide the inline formatting tools on
     touch layouts — the toolbar stays short and shows only what you can act on.
     They reappear the instant you tap ✏️ Edit (which flips body to .edit-mode). */
  body.cryo-app.reading-mode .cryo-header-center .fmt-group { display: none; }

  /* ---- Editing toolbar → floating bar at the TOP -------------------------
     Still pulled OUT of the header flow (app.js placeToolbar): .cryo-topbar has a
     backdrop-filter, which makes it the containing block for any position:fixed
     descendant, so a toolbar left inside it would anchor to the header instead of
     the viewport — and a wrapped 2–3 row toolbar in the header swallowed the
     brand row. So it stays a free-floating frosted bar, just parked under the
     header rather than in the thumb zone: these are once-per-document actions
     (Open / Save / Export), and the formatting half is hidden while reading.
     The thumb zone belongs to Read Aloud (see the .tts-pane block below).
     Its buttons are styled icon-only in the ≤640 block below. */
  body.cryo-app .cryo-header-center {
    position: fixed;
    left: 50%; right: auto; bottom: auto;
    top: calc(var(--ed-header-h, 56px) + 8px);
    transform: translateX(-50%);
    width: max-content; max-width: calc(100vw - 20px);
    margin: 0; padding: 6px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, .55);
    box-shadow: 0 12px 34px rgba(15, 23, 42, .26), 0 2px 8px rgba(15, 23, 42, .12);
    z-index: 30;
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body.cryo-app .cryo-header-center { background: rgba(255, 255, 255, .96); }
  }
  body.cryo-app .cryo-header-center .toolbar button { border-radius: 12px; }

  /* Scrim behind the drawer / tray. */
  body.cryo-app .echodoc .ed-scrim:not([hidden]) {
    display: block; position: fixed; inset: 0;
    background: rgba(15, 23, 42, .42); z-index: 34; border: 0;
    -webkit-tap-highlight-color: transparent;
  }

  /* Turn the mobile-only buttons on. */
  body.cryo-app .echodoc .ed-mobile-only { display: inline-flex; align-items: center; justify-content: center; }

  /* ---- Files: slide-in drawer from the left, under the sticky header ---- */
  body.cryo-app .echodoc .recent-pane {
    position: fixed;
    top: var(--ed-header-h, 64px);
    bottom: 0; left: 0;
    width: min(330px, 86vw);
    margin: 0; border-radius: 0 14px 0 0;
    box-shadow: 8px 0 28px rgba(0, 0, 0, .18);
    transform: translateX(-102%);
    transition: transform .24s ease;
    z-index: 36;
    overflow-y: auto;
    max-height: none;
  }
  body.cryo-app .echodoc.files-open .recent-pane { transform: translateX(0); }
  /* Drawer header with a title + close button (the desktop rail head is hidden
     generically above; re-show it here as the drawer's header). */
  body.cryo-app .echodoc .recent-pane .pane-head {
    display: flex; align-items: center; gap: 8px;
    padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--ed-line);
  }
  body.cryo-app .echodoc .recent-pane .pane-label { display: block; font-size: 15px; }
  body.cryo-app .echodoc .recent-pane .pane-toggle { display: none; }
  body.cryo-app .echodoc .ed-drawer-close {
    margin-left: auto; border: 1px solid var(--ed-line); background: var(--ed-panel);
    color: var(--ed-muted); border-radius: 8px; padding: 6px 10px; font-size: 16px; line-height: 1;
    min-width: 44px; min-height: 44px;      /* §6c floor for an icon-only control */
  }
  /* Keep the drawer body visible regardless of any saved desktop collapse state. */
  body.cryo-app .echodoc .recent-pane .pane-body,
  body.cryo-app .echodoc .workspace.left-collapsed .recent-pane .pane-body { display: flex; }

  /* ---- Read Aloud: floating, translucent pill at the BOTTOM ----------------
     THE primary action, so it owns the thumb zone (master §6c "Reach"): ▶ Read
     Aloud, ⏹ Stop, ↺ Resume, plus 📁 Files and ⚙ Voice all land within reach of
     one thumb. It floats as a rounded, frosted-glass pill centred 14px above the
     bottom edge, so the text scrolls visibly behind it. Tapping ⚙ grows it
     UPWARD into a settings card (voice / speed / pitch) — a bottom sheet.
     `bottom` is a plain 14px here: home-indicator clearance comes from the
     pill's own bottom padding (see below), the shared .cryo-fixed-bottom
     contract, and app.js keeps it glued to the VISIBLE bottom. */
  body.cryo-app .echodoc .tts-pane {
    position: fixed;
    left: 50%; right: auto; top: auto;
    bottom: 14px;
    transform: translateX(-50%);
    width: max-content; max-width: calc(100vw - 24px);
    margin: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, .55);
    box-shadow: 0 12px 34px rgba(15, 23, 42, .26), 0 2px 8px rgba(15, 23, 42, .12);
    /* The pane carries .cryo-fixed-bottom so the shared safe-area contract in
       assets/css/cryo-ergo.css applies — but that rule is one class (0,1,0) and
       loses to this app's own `.echodoc .tts-pane { padding:16px }` (0,2,0), so
       the same home-indicator clearance is restated here to actually take. */
    padding: 6px 6px max(8px, env(safe-area-inset-bottom, 0px));
    z-index: 30;
    display: flex; flex-direction: column;
    transition: border-radius .2s ease, width .2s ease;
  }
  /* No backdrop-filter (older browsers): keep it legible with a near-solid panel. */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body.cryo-app .echodoc .tts-pane { background: rgba(255, 255, 255, .96); }
  }
  body.cryo-app .echodoc .tts-pane.tray-open { z-index: 36; }   /* lift above the scrim */
  body.cryo-app .echodoc .tts-pane .pane-head { display: none; }

  /* Transport row = the always-visible pill contents. It is ordered LAST so the
     voice tray opens above it and the transport never moves under your thumb. */
  body.cryo-app .echodoc .tts-pane .tts-controls,
  body.cryo-app .echodoc .workspace.right-collapsed .tts-pane .tts-controls {
    order: 2; display: flex; flex-direction: row; gap: 6px; align-items: stretch;
    width: auto; max-width: none; margin: 0;
  }
  /* Round the buttons to match the pill and let them share its translucency. */
  body.cryo-app .echodoc .tts-pane .tts-controls button {
    /* min-WIDTH as well as height: Pause and Stop go icon-only just below, which
       collapsed them to 38px wide against the 44px §6c floor. The closed pill is
       ~288px inside a 412px viewport, so there is room for all three. */
    flex: 0 0 auto; min-height: 44px; min-width: 44px; border-radius: 999px;
    background: rgba(255, 255, 255, .6); border-color: rgba(15, 23, 42, .08);
  }
  body.cryo-app .echodoc .tts-pane .tts-controls #btn-play {
    flex: 1 1 auto; background: var(--ed-accent); border-color: var(--ed-accent);
  }
  body.cryo-app .echodoc .tts-pane .ed-bar-aux { min-width: 44px; font-size: 18px; padding: 8px 12px; }
  /* Play keeps its label; Pause/Stop go icon-only to fit the pill (IDs beat any
     saved-collapse .btn-text rule on specificity). */
  body.cryo-app .echodoc .tts-pane #btn-play .btn-text { display: inline; }
  body.cryo-app .echodoc .tts-pane #btn-pause .btn-text,
  body.cryo-app .echodoc .tts-pane #btn-stop .btn-text { display: none; }

  /* Voice tray = the pane body, grown UP off the transport row on demand. When
     open the pill squares off into a comfortable bottom-sheet settings card. */
  body.cryo-app .echodoc .tts-pane.tray-open {
    width: min(420px, calc(100vw - 24px));
    border-radius: 20px;
    padding: 10px 12px max(10px, env(safe-area-inset-bottom, 0px));
  }
  body.cryo-app .echodoc .tts-pane .pane-body,
  body.cryo-app .echodoc .workspace.right-collapsed .tts-pane .pane-body { display: none; }
  body.cryo-app .echodoc .tts-pane.tray-open .pane-body,
  body.cryo-app .echodoc .workspace.right-collapsed .tts-pane.tray-open .pane-body {
    display: block; order: 1;                 /* grows UP above the transport */
    max-height: 56vh; overflow-y: auto;
    width: 100%; margin: 0 0 8px;
    padding: 0 2px 10px;
    border-bottom: 1px solid var(--ed-line);
  }
  /* Grab-handle at the top of the open sheet (it grows upward). */
  body.cryo-app .echodoc .tts-pane.tray-open .pane-body::before {
    content: ""; display: block; width: 40px; height: 4px; border-radius: 999px;
    background: var(--ed-line); margin: 4px auto 12px;
  }
  body.cryo-app .echodoc .tts-pane.tray-open .ed-bar-aux[aria-label="Voice and speed settings"] {
    background: #dbe6ff; border-color: var(--ed-accent); color: var(--ed-accent);
  }

  /* Toasts sit ABOVE the transport now. At the default bottom:20px a toast
     ("Resuming where you left off…") would land squarely on ▶ Read Aloud — the
     one button it must never cover. Same offset the workspace uses. */
  body.cryo-app .echodoc .toast {
    bottom: calc(var(--ed-bottom-bar-h, 44px) + 44px);
  }
}

/* On phones, collapse the editing toolbar into a single horizontal-scroll strip
   (the shared theme's intent) rather than letting it wrap to 3 rows and swallow
   the sticky header. Every tool stays reachable — swipe the strip sideways.
   Tablets keep the wrapped 2-row layout, which fits their width. */
@media (max-width: 640px) {
  /* Ease of access: the editing toolbar WRAPS instead of hiding tools behind a
     sideways scroll, so every button on screen is reachable with a tap. With
     formatting hidden while reading (rule above), what's left — Edit + the
     document actions — sits in one or two tidy, centred rows. */
  body.cryo-app .cryo-header-center { overflow: visible; justify-content: center; }
  body.cryo-app .cryo-header-center .toolbar {
    flex-wrap: wrap; justify-content: center; gap: 6px; width: 100%;
  }
  /* Dissolve the group boxes so buttons wrap individually and pack the rows
     tightly (otherwise a whole group jumps to a new line and strands ✏️ Edit
     alone). The section dividers aren't useful once the bar wraps anyway. */
  body.cryo-app .cryo-header-center .group { display: contents; }
  body.cryo-app .cryo-header-center .fmt-group { border: 0; padding: 0; }
  /* Icon-only top menu on phones: show just each tool's icon and drop the text
     caption. The full label is preserved for screen readers via each button's
     title/aria (display:none only hides the visual span). This keeps the whole
     toolbar on a single compact row. B / I / U and the ✏️/✓ toggle read fine as
     glyphs on their own. */
  body.cryo-app .cryo-header-center .toolbar button .tb-label { display: none; }
  body.cryo-app .cryo-header-center .toolbar button {
    min-height: 44px; min-width: 44px; padding: 9px 11px;
    font-size: 18px; line-height: 1;   /* larger glyphs, square tap targets */
    display: inline-flex; align-items: center; justify-content: center;
  }
  /* The highlight-colour dropdown keeps its swatch; trim its width so the
     colour name doesn't stretch the icon row. */
  body.cryo-app .cryo-header-center .swatch { gap: 4px; }
  body.cryo-app .cryo-header-center .swatch select { max-width: 104px; font-size: 16px; min-height: 44px; }
  /* Make the main way in — Open a document — easy to spot while reading. */
  body.cryo-app .cryo-header-center #btn-open {
    border-color: var(--ed-accent); color: var(--ed-accent);
  }
}

/* ---- 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;
}

/* ================================================================= */
/*  Reading vs editing mode                                          */
/*  EchoDoc opens every document read-only; the ✏️ Edit toggle        */
/*  unlocks editing (✓ Done re-locks). While reading, the inline      */
/*  formatting controls are inert and the editor shows no text caret  */
/*  — but text stays selectable for Read Aloud and copying, and no    */
/*  keyboard pops up on touch devices.                                */
/* ================================================================= */
.edit-toggle { font-weight: 700; }
body.edit-mode .edit-toggle,
.edit-toggle.active {
  background: var(--ed-accent) !important;
  color: #fff !important;
  border-color: var(--ed-accent) !important;
}
body.reading-mode .toolbar .fmt-group {
  opacity: .4;
  pointer-events: none;
}
body.reading-mode .echodoc .editor,
body.reading-mode .echodoc .editor .pdf-page { cursor: default; }

/* ================================================================= */
/*  PRINT / Export PDF                                                */
/*  🖨️ Export PDF (app.js exportPdf) calls window.print(). We print   */
/*  ONLY the document: everything is hidden, then #editor and its     */
/*  descendants are made visible again and pulled to the top-left of  */
/*  the sheet. body.ed-printing (added by exportPdf) releases any     */
/*  height/overflow cap so the WHOLE document prints, not just the    */
/*  scrolled-visible part. Highlights are kept (print-color-adjust).  */
/* ================================================================= */
@media print {
  /* 1. Hide the whole page, then reveal only the document. Using visibility
     (not display) keeps #editor's own layout intact while blanking the rest. */
  body * { visibility: hidden !important; }
  #editor, #editor * { visibility: visible !important; }

  /* 2. Drop the app chrome out of flow entirely so it can't reserve space and
     spill blank sheets: the shared header + editing toolbar (.cryo-shell), the
     side panels (files + Read Aloud), the doc-title row, the page badge, toast,
     drawer scrim and the site footer. */
  .cryo-shell,
  .recent-pane,
  .tts-pane,
  .doc-title-row,
  .page-indicator,
  .toast,
  .ed-scrim,
  footer,
  .cryo-footer,
  .cryo-footer-bar,
  [class*="footer"] { display: none !important; }

  /* 3. The document fills the printable area, top-left, with no cap or chrome. */
  #editor {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  /* Belt-and-braces: the same release keyed to the class exportPdf toggles, in
     case a viewport-based height is applied to the editor anywhere. */
  body.ed-printing #editor {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* 4. Keep the yellow (and coloured) highlight spans visible — browsers drop
     backgrounds when printing unless colour adjustment is forced exact. */
  #editor,
  #editor .hl,
  #editor .pdf-page {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* 5. Rendered PDF pages: one A4 sheet each, no on-screen shadow/margin, and
     never wider than the page. (Plain .docx content has no per-page wrapper —
     it simply flows and the browser paginates it.) */
  #editor.has-pdf { background: #fff !important; padding: 0 !important; }
  .pdf-page {
    margin: 0 auto !important;
    box-shadow: none !important;
    break-after: page;
    page-break-after: always;
    max-width: 100% !important;
  }
  .pdf-page:last-child { break-after: auto; page-break-after: auto; }
  .pdf-canvas { max-width: 100% !important; height: auto !important; }

  /* 6. Page margins for the flowing document. */
  @page { margin: 14mm; }
}