/* Workbench — tabs, panes, word trace, full-screen page-flip view. Matches the reader's dark look. */
.wb-tabs { display: flex; gap: 6px; margin: 12px 0 10px; flex-wrap: wrap; position: sticky; top: 0; z-index: 20;
  background: rgba(7,11,18,0.92); padding: 6px 0; backdrop-filter: blur(6px); }
.wb-tab { font: inherit; font-size: 13px; font-weight: 600; color: rgba(205,225,250,0.8); background: rgba(255,255,255,0.04);
  border: 1px solid rgba(170,205,255,0.28); border-radius: 20px; height: 38px; padding: 0 16px; cursor: pointer; }
.wb-tab.on { color: #5ec8ff; border-color: rgba(56,180,255,0.7); background: linear-gradient(135deg, rgba(56,180,255,0.22), rgba(20,80,180,0.22)); }
.wb-pane { margin: 8px 0 14px; padding: 12px; border: 1px solid rgba(170,205,255,0.18); border-radius: 14px; background: rgba(255,255,255,0.03); }
.wb-pane[hidden], .wb-follow[hidden], .wb-trace[hidden], .wb-interview[hidden], .wb-text[hidden], .wb-edit-top[hidden] { display: none !important; }
.wb-edit-top { padding: 8px 12px; }
.wb-row[hidden] { display: none !important; }
.wb-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.wb-h { font-size: 15px; margin: 0 8px 0 0; color: #dce9ff; }
.wb-h3 { font-size: 13px; margin: 14px 0 4px; color: #9fd4ff; }
.wb-note { font-size: 11.5px; color: rgba(231,236,245,0.55); margin: 6px 0; }
.wb-status { font-size: 12px; color: rgba(231,236,245,0.7); }
.wb-lbl { font-size: 12px; color: rgba(231,236,245,0.7); min-width: 190px; }
.wb-check { font-size: 12.5px; color: rgba(205,225,250,0.85); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.wb-sel, .wb-in { height: 36px; min-width: 120px; }
.wb-in { flex: 1 1 180px; }
.wb-mini { height: 28px !important; padding: 0 9px !important; font-size: 11.5px !important; }
.wb-mini-sel { height: 28px; font-size: 11.5px; min-width: 90px; }
.wb-text { width: 100%; min-height: 160px; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; font: inherit; font-size: 14px; line-height: 1.5;
  background: rgba(0,0,0,0.25); color: #e7ecf5; border: 1px solid rgba(170,205,255,0.22); resize: vertical; }
.wb-small { min-height: 72px; }
.wb-card-text { min-height: 110px; }
.wb-card { margin: 8px 0; padding: 8px; border: 1px solid rgba(170,205,255,0.14); border-radius: 10px; }
.wb-card .real-input.wb-card-title { flex: 1 1 200px; font-weight: 600; }
.wb-chip { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; padding: 5px 9px; margin: 3px 4px 3px 0;
  border-radius: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(170,205,255,0.2); color: rgba(220,233,255,0.9); }
.wb-file { font-size: 12px; color: #9fd4ff; }
.wb-file-in { font-size: 12px; color: rgba(205,225,250,0.8); }
.wb-level { display: inline-block; width: 90px; height: 8px; border-radius: 4px; background: rgba(255,255,255,0.08); overflow: hidden; }
.wb-level i { display: block; height: 100%; width: 0; background: #39e07a; transition: width .08s; }
.wb-q { font-size: 14px; color: #dce9ff; margin: 8px 0; }
.wb-unset { margin-top: 12px; font-size: 12px; color: rgba(231,236,245,0.75); }

/* word trace: green current word, trail of the last three (four highlighted at once) */
.wb-trace { position: relative; max-height: 46vh; overflow-y: auto; padding: 12px; border-radius: 10px; font-size: 15px; line-height: 1.7;
  background: rgba(0,0,0,0.25); border: 1px solid rgba(170,205,255,0.22); white-space: pre-wrap; color: rgba(231,236,245,0.85); }
.tw { border-radius: 4px; padding: 0 1px; transition: background .12s, color .12s; }
.tw-cur { background: #1fdd6a; color: #04200f; font-weight: 700; }
.tw-trail1 { background: rgba(31,221,106,0.62); color: #04200f; }
.tw-trail2 { background: rgba(31,221,106,0.38); }
.tw-trail3 { background: rgba(31,221,106,0.2); }
.wb-follow { margin: 10px 0; }

.wb-toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(20px); max-width: 90vw; z-index: 12000;
  background: #12202f; color: #e7ecf5; border: 1px solid rgba(94,200,255,0.5); padding: 10px 16px; border-radius: 10px; font-size: 13px; opacity: 0; pointer-events: none; transition: .2s; }
.wb-toast.show { opacity: 1; transform: translateX(-50%); }
.wb-toast.bad { border-color: #ff7a7a; }

/* full-screen page-flip view */
.wb-viewer { position: fixed; inset: 0; z-index: 11000; background: #060a10; display: flex; flex-direction: column; color: #e7ecf5; }
.wb-vtop { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-bottom: 1px solid rgba(255,255,255,0.12); flex-wrap: wrap; }
.wb-vtitle { font-size: 14px; color: #dce9ff; }
.wb-vcount { font-size: 12px; color: rgba(231,236,245,0.6); margin-left: auto; }
.wb-stage { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: pan-y; user-select: none; }
.wb-strip { display: flex; gap: 0; align-items: stretch; box-shadow: 0 10px 50px rgba(0,0,0,0.6); }
.wb-page { background: #fbf8f1; color: #1c1b19; box-sizing: border-box; padding: 28px 28px 40px; overflow: hidden; position: relative;
  font-family: Georgia, 'Times New Roman', serif; font-size: 16px; line-height: 1.5; }
.wb-viewer.mono .wb-page { font-family: 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.25; }
.wb-page.empty { background: transparent; box-shadow: none; }
.wb-page.blank { background: #f4f0e6; }
.wb-page p { margin: 0 0 .7em; text-align: justify; hyphens: auto; }
.wb-page p.wb-dir { font-family: system-ui, sans-serif; font-size: 12px; font-style: italic; color: #8a1f1f; text-align: left; }
.wb-ptitle { font-size: 1.25em; margin: 0 0 .9em; text-align: center; letter-spacing: .02em; }
.wb-folio { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; font-size: 11px; color: #777; }
.wb-page.img { display: flex; align-items: center; justify-content: center; padding: 18px; }
.wb-page.img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.wb-cover { background: #0c1f33; color: #f2f7ff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; gap: 16px; }
.wb-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.wb-cover-title { position: relative; font-size: 28px; font-weight: 700; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.wb-cover-author { position: relative; font-size: 16px; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.wb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 64px; font-size: 26px; z-index: 2; }
.wb-nav.l { left: 8px; } .wb-nav.r { right: 8px; }
.wb-measure { visibility: hidden; }
.wb-measure.mono { font-family: 'Courier New', monospace; }
@media (max-width: 640px) {
  .wb-tab { flex: 1 1 45%; }
  .wb-lbl { min-width: 100%; }
}

/* reader memory */
.wb-memory { margin: 6px 0 8px; padding: 8px 10px; border: 1px dashed rgba(170,205,255,0.25); border-radius: 10px; }
.wb-memory .wb-row { margin: 4px 0; }
.wb-lastoffer { color: #9fd4ff; }
.wb-lib-btn { margin-left: auto; }

/* Library — same look as Super Admin's folder tree */
.lib-overlay { position: fixed; inset: 0; z-index: 11500; background: #070b12; color: #e7ecf5; display: flex; flex-direction: column; font-size: 13px; }
.lib-top { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-bottom: 1px solid rgba(255,255,255,0.12); flex-wrap: wrap; }
.lib-h { font-size: 15px; color: #dce9ff; }
.lib-sub { font-size: 11.5px; color: rgba(231,236,245,0.55); }
.lib-body { flex: 1 1 auto; overflow: auto; padding: 12px 14px; }
.lib-tb { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.lib-tb input { flex: 1; min-width: 140px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: 8px; color: inherit; font-size: 12px; padding: 7px 10px; outline: none; }
.lib-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; }
.lib-btn { font: inherit; font-size: 10.5px; font-weight: 600; padding: 5px 9px; border-radius: 7px; cursor: pointer; border: 1px solid rgba(255,255,255,.18); background: transparent; color: inherit; }
.lib-btn.danger { color: #E0556E; border-color: rgba(224,85,110,.4); }
.lib-cols { display: flex; gap: 10px; align-items: flex-start; }
.lib-side { width: 210px; flex-shrink: 0; max-height: 66vh; overflow: auto; }
.lib-main { flex: 1; min-width: 0; }
.lib-row { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 7px; cursor: pointer; font-size: 12px; outline: 2px dashed transparent; }
.lib-row:hover { background: rgba(255,255,255,.06); }
.lib-row.sel { background: rgba(31,165,232,.14); }
.lib-row.over { outline-color: #1FA5E8; background: rgba(31,165,232,.08); }
.lib-chev { width: 12px; display: inline-block; opacity: .7; }
.lib-fname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-count { font-size: 10px; opacity: .55; }
.lib-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 8px; }
.lib-title { font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-empty { font-size: 12px; opacity: .6; padding: 14px 2px; }
.lib-item { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-radius: 9px; padding: 9px 11px; margin-bottom: 7px; }
.lib-iname { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-imeta { font-size: 10.5px; opacity: .6; margin: 3px 0 7px; }
.lib-acts { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.lib-move { font-size: 10.5px; background: rgba(255,255,255,.05); color: inherit; border: 1px solid rgba(255,255,255,.18); border-radius: 7px; padding: 4px 6px; max-width: 140px; }
.lib-foot { font-size: 11px; opacity: .6; margin-top: 14px; }
@media (max-width: 640px) { .lib-cols { flex-direction: column; } .lib-side { width: 100%; max-height: none; } }

/* v9: the Library is a page, not an overlay */
.lib-overlay.lib-page { position: static; inset: auto; z-index: auto; background: transparent; display: block; min-height: 0; }
.lib-overlay.lib-page .lib-body { overflow: visible; padding: 12px 0; }
.lib-overlay.lib-page .lib-top { padding: 0 0 8px; }
.lib-overlay.lib-page .lib-side { max-height: none; }

/* Creator mode (Dr. Henderson's story workshop). Frank's material is sky blue; anything Dr. Henderson wrote is violet and labelled. */
.cr-sec { margin: 14px 0 6px; padding-top: 6px; border-top: 1px solid rgba(170,205,255,0.14); }
.cr-bar { align-items: center; }
.cr-player[hidden], .cr-deep[hidden], .cr-unsupported[hidden] { display: none !important; }
.cr-bad { color: #ff9a9a; }
.cr-ctx { margin: 6px 0; padding: 8px 10px; border-left: 3px solid rgba(56,180,255,0.55); background: rgba(0,0,0,0.2); border-radius: 0 8px 8px 0; }
.cr-stamp { font-size: 11px; color: rgba(231,236,245,0.5); }
.cr-ctxtext { font-size: 13.5px; color: #e7ecf5; white-space: pre-wrap; }
.cr-item { margin: 8px 0; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(170,205,255,0.16); background: rgba(0,0,0,0.18); }
.cr-frank { border-left: 3px solid rgba(56,180,255,0.6); }
.cr-henderson { border-left: 3px solid rgba(190,150,255,0.85); background: rgba(150,100,255,0.08); }
.cr-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; font-size: 11.5px; }
.cr-badge { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 10.5px; padding: 2px 8px; border-radius: 10px; }
.cr-b-f { color: #5ec8ff; background: rgba(56,180,255,0.12); border: 1px solid rgba(56,180,255,0.4); }
.cr-b-h { color: #d9c2ff; background: rgba(170,120,255,0.16); border: 1px solid rgba(190,150,255,0.55); }
.cr-m { color: rgba(231,236,245,0.65); }
.cr-scenetext { white-space: pre-wrap; font-size: 14px; line-height: 1.55; color: #e7ecf5; overflow-wrap: anywhere; }
.cr-ghosttext { min-height: 90px; }
.cr-gap { margin: 8px 0; padding: 8px 10px; border: 1px dashed rgba(255,200,120,0.45); border-radius: 10px; }
.cr-q { font-size: 13.5px; color: #ffd9a0; }
.cr-person { margin: 4px 0; font-size: 13.5px; }
.cr-person summary { cursor: pointer; color: #dce9ff; }
.cr-lines { margin: 6px 0 6px 14px; font-size: 13px; color: rgba(231,236,245,0.8); }
.cr-lines div { margin: 2px 0; overflow-wrap: anywhere; }
.cr-deep { margin-top: 8px; padding: 8px 10px; border: 1px solid rgba(190,150,255,0.4); border-radius: 10px; }
.cr-deeptext { white-space: pre-wrap; font-size: 13.5px; margin-top: 6px; }
@media (max-width: 520px) { .cr-meta .wb-mini { height: 32px !important; } }

/* ---- Interview tab: ONE chat field, with the text area, mic and send icons inside the same rounded border ---- */
.iv-head .grow, .iv-controls .grow { flex: 1 1 auto; }
.iv-explain { font-size: 13px; }
.iv-topic { flex: 1 1 220px; min-width: 0; }
.iv-box { border: 1px solid rgba(130,190,255,0.35); border-radius: 16px; background: rgba(255,255,255,0.025); overflow: hidden; }
.iv-chat { min-height: 220px; max-height: 340px; padding: 14px; overflow-y: auto; scrollbar-width: none; }
.iv-chat::-webkit-scrollbar { display: none; }
.iv-line { border: 1px solid rgba(150,200,255,0.18); background: rgba(255,255,255,0.04); border-radius: 12px; padding: 10px 12px; margin: 8px 0; }
.iv-line.me { background: rgba(56,180,255,0.12); border-color: rgba(56,180,255,0.35); }
.iv-line.pending { border-style: dashed; opacity: .8; }
.iv-line.thinking { opacity: .7; }
.iv-who { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(190,215,245,0.7); margin-bottom: 4px; }
.iv-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.5; }
.iv-tag { font-size: 11px; letter-spacing: 0; text-transform: none; font-weight: 500; border: 1px solid rgba(61,220,132,0.5); color: #3ddc84; border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.iv-tag.live { border-color: rgba(242,179,76,0.55); color: #f2b34c; }
.iv-comp { display: flex; align-items: flex-end; gap: 6px; padding: 8px 10px; border-top: 1px solid rgba(130,190,255,0.25); }
.iv-ans { flex: 1; border: 0; outline: 0; resize: none; background: transparent; font: inherit; font-size: 15px; color: inherit; min-height: 40px; max-height: 140px; padding: 8px 4px; box-sizing: border-box; overflow-y: auto; scrollbar-width: none; }
.iv-ans::-webkit-scrollbar { display: none; }
.iv-ico { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(150,200,255,0.3); background: transparent; color: #dce9ff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; padding: 0; }
.iv-ico.solid { background: #4cc3ff; border-color: transparent; color: #04131d; }
.iv-ico.rec { background: #c53030; color: #fff; border-color: transparent; }
.iv-ico:disabled, .iv-ans:disabled { opacity: .4; cursor: default; }
.iv-more > summary { cursor: pointer; font-weight: 600; margin: 12px 0 4px; }
.iv-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(56,180,255,0.55); background: rgba(56,180,255,0.12); }
.iv-bar[hidden] { display: none !important; }