/* ── Mobile nav bar (hidden on desktop) ── */
.mobile-nav { display: none; }
.post-expand-tab { display: none !important; }

@media (max-width: 768px) {
    body {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
            "banner"
            "content"
            "mobile-nav";
        height: 100dvh;
    }

    /* The desktop fold is a side shadow; stacked, the sidebar needs a bottom
       edge instead and no elevation at all. */
    .sidebar    { grid-area: content; box-shadow: none; border-bottom: 1px solid var(--seam); }
    .story-area { grid-area: content; }

    /* Default: show story */
    body:not(.mobile-tasks) .sidebar { display: none; }
    body.mobile-tasks .story-area    { display: none; }

    header { display: none; }

    #postTextarea { width: 100%; max-height: 320px; overflow-y: auto; }
    .post-input-area { display: none; }
    .post-input-area.visible { display: block; }
    .post-expand-tab {
        position: sticky; bottom: 0; left: 0; right: 0; z-index: 10;
        width: 100%; padding: 0.4rem 1rem;
        background: var(--panel); border-top: 1px solid var(--seam);
        text-align: center; cursor: pointer;
        color: var(--muted); font-size: 0.72rem; letter-spacing: 0.1em;
        text-transform: uppercase;
        display: block !important;
    }
    .post-expand-tab.hidden { display: none !important; }

    .story-feed      { padding: 1rem; }
    .post-input-area { padding: 0.75rem 1rem; }
    /* The 60% chat-bubble cap leaves a post barely readable at phone widths. */
    .post-player     { max-width: 95%; }
    .scene-header    { height: 18vh; }
    #sceneFeedFade   { top: 18vh; }
    /* No header strip here, so the fixed settings gear sits directly on top of
       this button in whichever corner it occupies — put them on opposite sides. */
    body:not(.rtl) .scene-regen-btn { left: 8px; right: auto; }
    /* Portrait sizes are fixed vh values, not relative to the header's own
       height — at the desktop 19vh/15vh sizes the protagonist portrait alone
       is taller than this whole 18vh header, guaranteeing its top gets
       clipped by the header's overflow:hidden. Scaled down here to the same
       ~76%/~60%-of-header-height ratio the desktop sizes use against 25vh. */
    .scene-portraits-inner { bottom: 10px; }
    .scene-protagonist-slot .scene-portrait-thumb { height: 13.5vh; width: calc(13.5vh * 2 / 3); }
    .scene-char-slots .scene-portrait-thumb       { height: 10.5vh; width: calc(10.5vh * 2 / 3); }

    .post-story, .post-player {
        font-size: 1rem;
        padding-left: 1rem;
    }

    /* Config modal */
    .modal-overlay { align-items: flex-end; }
    .modal {
        width: 100vw;
        max-width: 100vw;
        height: calc(100dvh - 56px);
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
        overflow-x: hidden;
    }
    .modal-header   { padding: 0.75rem 1rem; }
    .modal-footer   { padding: 0.65rem 1rem; flex-wrap: wrap; }
    .modal-footer-note { display: none; }
    .modal-footer-btns { margin-left: auto; }
    .doc-section    { padding: 0.75rem 1rem; }
    .modal-tab      { padding: 0.5rem 0.65rem; font-size: 0.65rem; }

    /* A general row is label-then-control side by side. At phone widths the
       dictionary's pair of controls leaves the text nothing to shrink into, so
       the row overruns the list, whose overflow:hidden cuts the on/off button
       off the edge. Stacked, both halves get the full width. */
    .general-row          { flex-wrap: wrap; gap: 0.6rem; justify-content: flex-end; }
    .general-row-text     { flex: 1 1 100%; min-width: 0; }
    .general-row-controls { width: 100%; justify-content: flex-end; }

    /* Characters / World / Backstory inner layout — the sidebar becomes one
       row: pick from the dropdown, remove it, or add another. */
    .chars-section  { flex-direction: column; }
    .chars-sidebar  {
        width: 100%; flex-direction: row; align-items: center; gap: 0.4rem;
        padding: 0.4rem 0.6rem;
        border-right: none; border-bottom: 1px solid var(--seam);
    }
    .chars-list    { display: none; }
    .chars-picker  { display: flex; flex: 1; min-width: 0; align-items: center; gap: 0.3rem; }
    .chars-add-btn { margin: 0; }
    /* Character panel (both tabs) — portrait on top, then name, then bio.
       Side by side there isn't width left for either of them. */
    .character-section { padding: 0.75rem 1rem; gap: 0.75rem; flex-direction: column; overflow-y: auto; }
    .portrait-panel    { width: 130px; align-self: center; }
    .character-bio     { overflow: visible; }
    .character-bio .doc-textarea { min-height: 30vh; }

    /* Generate Story Bible — inspiration grid below the prompt, full width */
    .generate-section     { flex-direction: column; }
    .generate-inspiration { width: 100%; }

    .mobile-nav {
        grid-area: mobile-nav;
        display: flex;
        border-top: 1px solid var(--seam);
        background: var(--panel);
        flex-shrink: 0;
    }

    .mobile-tab-btn {
        flex: 1;
        background: none;
        border: none;
        color: var(--muted);
        cursor: pointer;
        padding: 0.65rem 0.5rem 0.5rem;
        font-family: 'Nunito', sans-serif;
        font-size: 0.65rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.2rem;
        transition: color 0.15s;
    }
    .mobile-tab-btn.active { color: var(--accent); }
    .mobile-tab-btn .tab-icon { font-size: 1.05rem; line-height: 1; }
}