/* ─────────────────────────────────────────────────────────────
   COMMAND DECK LAYOUT — v11 chrome redesign.

   Deliberately additive/override-only, same philosophy as
   leather-skin.css: existing elements (settingsPanel, savePanel,
   libraryPanel, inputPanel, helpPanel) keep the exact classList.toggle
   ('open') calls reader.js already wires — only their CSS treatment
   changes here, from "inline accordion that pushes the page down" /
   "sliding panel" to "header trigger + drawer/modal overlay". Nothing
   in reader.js's panel-open/close logic needed to change for that.

   New surface-level-only additions: the slim header, the fixed bottom
   Command Deck, and two small popovers (speed, export) — all driven
   by a handful of new functions in reader.js that only read/write
   state that already existed (settings.speed, segments, etc).
   ───────────────────────────────────────────────────────────── */

:root { --deck-h: 60px; --header-h: 48px; }

/* ============ SLIM HEADER (replaces .site-nav + old .nav) ============ */
.app-header {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; gap: 0.75rem;
    height: var(--header-h);
    padding: 0 1rem;
    background: rgba(10,10,15,0.97);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(20px);
}
.header-left { display: flex; align-items: center; gap: 0.75rem; min-width: 0; flex: 1; }
.brand-back { color: #888; text-decoration: none; letter-spacing: 0.12em; font-size: 0.68rem; font-family: var(--font-body); flex-shrink: 0; }
.brand-back:hover { color: var(--primary); }
.brand-title { color: var(--text-main); font-size: 0.8rem; font-family: var(--font-head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.header-center { flex-shrink: 0; }
.header-right { display: flex; align-items: center; gap: 0.35rem; flex-shrink: 0; }
.nav-btn { background: rgba(0,0,0,0.5); color: var(--primary); border: 1px solid var(--border); padding: 0.4rem 0.65rem; border-radius: 4px; cursor: pointer; font-family: var(--font-head); font-size: 0.68rem; white-space: nowrap; position: relative; }
.nav-btn:hover { background: rgba(0,243,255,0.1); }
.nav-btn.btn-icon { padding: 0.4rem 0.55rem; }
.studio-error-dot { position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: #ffb020; box-shadow: 0 0 6px #ffb020; }
.studio-error-dot[hidden] { display: none; }

@media (max-width: 640px) {
    .brand-title { display: none; }
    #chapterSelect { max-width: 110px; }
}

/* Character chip row now sits directly under the header instead of
   inside the old sticky nav block. */
.char-row { margin-top: 0.5rem; }

/* ============ READING STAGE ============ */
/* Bottom padding so the fixed Command Deck never covers the last
   paragraph of text; leather-skin.css's own min-height calc for the
   book already accounts for --deck-h separately. */
.container { padding-bottom: calc(var(--deck-h) + 1.5rem); }

/* ============ INTAKE LAUNCHPAD (empty-state) ============ */
.intake-launchpad { text-align: center; padding: 2.5rem 0.5rem 1rem; }
.intake-launchpad h2 { font-family: var(--font-head); color: var(--primary); font-size: 1.15rem; margin: 0 0 0.4rem; }
.launchpad-sub { color: #888; font-size: 0.82rem; margin: 0 0 1.75rem; }
.launchpad-grid { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-bottom: 1.5rem; }
.launch-card {
    flex: 1; min-width: 160px; max-width: 220px; background: rgba(255,255,255,0.02); border: 1px solid var(--border);
    border-radius: 10px; padding: 1.4rem 1rem; cursor: pointer; color: inherit; font-family: var(--font-body);
    transition: 0.15s;
}
.launch-card:hover { background: rgba(0,243,255,0.06); border-color: var(--primary); transform: translateY(-2px); }
.launch-card .icon { font-size: 1.9rem; display: block; margin-bottom: 0.5rem; }
.launch-card strong { display: block; color: var(--primary); font-size: 0.85rem; margin-bottom: 0.35rem; }
.launch-card p { margin: 0; font-size: 0.72rem; color: #999; line-height: 1.4; }

/* ============ DRAWERS (Library = left, Studio/Save = right) ============
   Reuses the exact same .open class each element's existing JS already
   toggles (toggleLibrary/togglePanel/openSavePanel) — only position/
   transition differ from the old accordion/panel look. */
#libraryPanel.drawer {
    /* Full reset of the base .collapsible box model (margin/max-width/
       border/border-radius) -- this is now a fixed slide-in drawer, not
       an inline accordion, and would otherwise inherit both. */
    position: fixed; top: 0; left: 0; bottom: 0; width: min(420px, 92vw);
    margin: 0; max-width: none; border-radius: 0; border: none;
    background: rgba(5,5,10,0.98); border-right: 1px solid var(--primary);
    z-index: 200; overflow-y: auto; backdrop-filter: blur(20px);
    transform: translateX(-105%); transition: transform 0.3s;
    padding: 1rem 1rem 2rem;
}
#libraryPanel.drawer.open { transform: translateX(0); }
#libraryPanel .collapsible-header { display: none; } /* header replaced by drawer-header below */
.drawer-header { display: flex; justify-content: space-between; align-items: center; padding: 0.2rem 0.1rem 1rem; color: var(--primary); font-family: var(--font-head); font-size: 0.82rem; }

/* ============ MODALS (Help + Load Content) ============
   Same trick: #helpPanel / #inputPanel keep their existing
   toggleHelp()/toggleInputPanel() classList('open') calls; CSS turns
   them into a centered modal instead of a pushed-down accordion. */
#helpPanel.modal, #inputPanel.modal {
    position: fixed; inset: 0; z-index: 210; display: none;
    align-items: flex-start; justify-content: center;
    padding: 4vh 1rem; overflow-y: auto;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(6px);
    margin: 0; max-width: none; width: 100%; border-radius: 0; border: none;
}
#helpPanel.modal.open, #inputPanel.modal.open { display: flex; }
#helpPanel.modal .collapsible-body, #inputPanel.modal .collapsible-body { display: block; }
#helpPanel .modal-card, #inputPanel .modal-card {
    background: rgba(8,8,14,0.98); border: 1px solid var(--border); border-radius: 12px;
    max-width: 640px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,0.7);
}
#helpPanel .modal-card .collapsible-header, #inputPanel .modal-card .collapsible-header { display: none; }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.2rem; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: inherit; border-radius: 12px 12px 0 0; }
.modal-header-title { color: var(--primary); font-family: var(--font-head); font-size: 0.85rem; }
.modal-body { padding: 1rem 1.2rem 1.4rem; }

/* ============ COMMAND DECK (fixed bottom transport) ============ */
.command-deck {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
    height: var(--deck-h);
    background: rgba(8,8,14,0.97); border-top: 1px solid var(--border);
    backdrop-filter: blur(20px);
    display: flex; flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom);
}
.deck-scrub-wrap { width: 100%; height: 3px; background: #111; cursor: pointer; flex-shrink: 0; }
.deck-scrub-wrap #progressBar { transition: width 0.4s; }
.deck-body { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0 0.6rem; min-width: 0; }

.deck-speaker { flex-shrink: 0; min-width: 0; }
.speaker-chip {
    display: flex; align-items: center; gap: 5px; background: rgba(0,0,0,0.5); border: 1px solid var(--border);
    color: var(--text-main); padding: 0.4rem 0.6rem; border-radius: 999px; cursor: pointer; font-family: var(--font-body);
    font-size: 0.7rem; max-width: 34vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.speaker-chip:hover { border-color: var(--primary); }
.speaker-chip .sc-caret { color: #888; flex-shrink: 0; }

.deck-transport { display: flex; align-items: center; gap: 0.3rem; flex-shrink: 0; }
.deck-transport .btn-play { min-width: 74px; }

.speed-wrap { position: relative; }
.speed-pill {
    background: rgba(0,243,255,0.08); border: 1px solid var(--border); color: var(--primary);
    padding: 0.4rem 0.55rem; border-radius: 999px; cursor: pointer; font-family: var(--font-head); font-size: 0.68rem;
}
.speed-pill:hover { background: rgba(0,243,255,0.16); }
.speed-popover {
    display: none; position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
    background: rgba(5,5,10,0.98); border: 1px solid var(--primary); border-radius: 10px; padding: 0.7rem;
    box-shadow: 0 12px 30px rgba(0,0,0,0.6); z-index: 160; width: 220px;
}
.speed-popover.open { display: block; }
.speed-presets { display: flex; gap: 4px; margin-bottom: 0.6rem; flex-wrap: wrap; }
.speed-presets button { flex: 1; min-width: 38px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: #ccc; padding: 5px 4px; border-radius: 4px; cursor: pointer; font-size: 0.68rem; }
.speed-presets button.active, .speed-presets button:hover { background: rgba(0,243,255,0.15); border-color: var(--primary); color: var(--primary); }

.deck-actions { display: flex; align-items: center; gap: 0.3rem; flex-shrink: 0; }
.deck-action-btn { background: rgba(0,0,0,0.5); color: var(--primary); border: 1px solid var(--border); padding: 0.4rem 0.55rem; border-radius: 4px; cursor: pointer; font-family: var(--font-head); font-size: 0.66rem; white-space: nowrap; }
.deck-action-btn:hover { background: rgba(0,243,255,0.1); }
.export-dropdown-wrap { position: relative; }
.export-popover {
    display: none; position: absolute; bottom: calc(100% + 10px); right: 0;
    background: rgba(5,5,10,0.98); border: 1px solid var(--primary); border-radius: 10px; padding: 6px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.6); z-index: 160; min-width: 210px; flex-direction: column; gap: 2px;
}
.export-popover.open { display: flex; }
.export-popover button { background: transparent; border: none; color: var(--text-main); text-align: left; padding: 0.55rem 0.65rem; border-radius: 5px; cursor: pointer; font-family: var(--font-body); font-size: 0.78rem; }
.export-popover button:hover { background: rgba(0,243,255,0.1); color: var(--primary); }
.export-popover button:disabled { opacity: 0.5; cursor: wait; }

@media (max-width: 640px) {
    :root { --deck-h: 96px; }
    .command-deck { flex-wrap: wrap; }
    .deck-body { flex-wrap: wrap; padding: 0.35rem 0.5rem; row-gap: 0.35rem; }
    .deck-speaker { order: 1; flex: 1 1 auto; }
    .deck-actions { order: 2; }
    .deck-transport { order: 3; flex: 1 1 100%; justify-content: center; }
    .speaker-chip { max-width: none; }
}

/* Reposition the toast so it floats above the deck instead of behind it. */
#ttsStatus { bottom: calc(var(--deck-h) + 14px) !important; }

/* Studio drawer sections that used to live in the hamburger menu */
.studio-footer-links { display: flex; justify-content: space-between; padding: 0.9rem 1.2rem 1.2rem; gap: 0.5rem; flex-wrap: wrap; }
.studio-footer-links button { background: transparent; border: 1px dashed var(--border); color: #999; padding: 0.4rem 0.7rem; border-radius: 6px; cursor: pointer; font-family: var(--font-body); font-size: 0.72rem; }
.studio-footer-links button:hover { color: var(--primary); border-color: var(--primary); }