/*
 * Guide shell — chat is the page.
 *
 * Layout at load: thin header (toggle + title + Playtest) + full-viewport
 * chat. The four non-chat mounts (#project-overview, #navigator-panel,
 * #inspector-panel, #preview-panel) plus every Studio button live in a
 * side drawer that stays off-canvas until the ≡ toggle slides it in.
 *
 * z-index legend:
 *  20  sticky header
 *  90  drawer scrim
 *  95  drawer
 * 200  skip link
 */

:root {
    color-scheme: light;
    --guide-bg: #f6f3ee;
    --guide-surface: rgba(255, 255, 255, 0.94);
    --guide-ink: #1b1f23;
    --guide-ink-soft: #5d666c;
    --guide-line: rgba(27, 31, 35, 0.10);
    --guide-accent: #2e6f5e;
    --guide-accent-soft: rgba(46, 111, 94, 0.12);
    --guide-shadow: 0 12px 28px rgba(20, 30, 28, 0.12);
    --guide-radius: 12px;
    --guide-ui: "Inter", system-ui, sans-serif;
    --guide-serif: "Newsreader", serif;
    --guide-mono: "IBM Plex Mono", monospace;
}

body.guide[data-theme="dark"] {
    color-scheme: dark;
    --guide-bg: #15181c;
    --guide-surface: rgba(26, 30, 34, 0.94);
    --guide-ink: #f3efe9;
    --guide-ink-soft: #aab1b8;
    --guide-line: rgba(243, 239, 233, 0.10);
    --guide-shadow: 0 16px 32px rgba(0, 0, 0, 0.32);
}

*, *::before, *::after { box-sizing: border-box; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }

body.guide {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    font-family: var(--guide-ui);
    background: var(--guide-bg);
    color: var(--guide-ink);
    display: flex;
    flex-direction: column;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.guide-skip-link {
    position: fixed;
    left: 1rem;
    top: 1rem;
    z-index: 200;
    padding: 0.55rem 0.85rem;
    border-radius: 999px;
    background: var(--guide-ink);
    color: var(--guide-bg);
    transform: translateY(-140%);
    transition: transform 0.18s ease;
}
.guide-skip-link:focus { transform: translateY(0); }

/* --- Header (the only persistent chrome) --- */

.guide-bar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.75rem;
    background: var(--guide-surface);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--guide-line);
}

.guide-drawer-toggle,
.guide-preview-toggle {
    position: relative;
    min-width: 40px;
    min-height: 40px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--guide-ink);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.14s ease;
}
.guide-drawer-toggle:hover,
.guide-preview-toggle:hover { background: var(--guide-accent-soft); }
.guide-preview-toggle[aria-expanded="true"] { background: var(--guide-accent-soft); color: var(--guide-accent); }

.guide-drawer-toggle[data-pending="true"]::after {
    content: "";
    position: absolute;
    top: 7px;
    right: 7px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--guide-accent);
    box-shadow: 0 0 0 2px var(--guide-surface);
}

.guide-title {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 40px;
    padding: 0.42rem 0.7rem;
    border: 1px solid var(--guide-line);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.45);
    color: var(--guide-ink);
    font-family: var(--guide-serif);
    font-size: clamp(1rem, 2.4vw, 1.22rem);
    line-height: 1.1;
}
body.guide[data-theme="dark"] .guide-title { background: rgba(255, 255, 255, 0.04); }

/* --- Buttons --- */

.guide-button {
    min-height: 40px;
    min-width: 40px;
    padding: 0.45rem 0.8rem;
    border-radius: 10px;
    border: 1px solid var(--guide-line);
    background: rgba(255, 255, 255, 0.55);
    color: var(--guide-ink);
    font-size: 0.88rem;
    cursor: pointer;
    transition: transform 0.14s ease, background 0.14s ease;
}
.guide-button:hover { transform: translateY(-1px); }
.guide-button--primary {
    background: var(--guide-accent);
    color: #f4fbf8;
    border-color: transparent;
    box-shadow: 0 6px 14px rgba(46, 111, 94, 0.22);
}
.guide-button--ghost { background: transparent; }

/* The Studio brain emits these legacy classes inside #chat-panel and the
   drawer panels. They get the same minimal chrome as guide-button. */
.studio-button,
.studio-button-primary,
.studio-button-subtle,
.studio-button-ghost,
.studio-button-danger,
.studio-send-btn,
.context-pill-clear {
    min-height: 38px;
    min-width: 38px;
    padding: 0.42rem 0.75rem;
    border-radius: 10px;
    border: 1px solid var(--guide-line);
    background: rgba(255, 255, 255, 0.55);
    color: var(--guide-ink);
    font-size: 0.86rem;
    cursor: pointer;
}
.studio-button-primary,
.studio-send-btn {
    background: var(--guide-accent);
    color: #f4fbf8;
    border-color: transparent;
}
.studio-button-danger {
    background: rgba(175, 74, 63, 0.12);
    border-color: rgba(175, 74, 63, 0.25);
    color: #af4a3f;
}

/* --- Stage: chat fills the viewport, or splits with the preview pane --- */

.guide-stage {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0.6rem 0.9rem 0;
    max-width: 880px;
    width: 100%;
    margin: 0 auto;
}

body.guide[data-guide-preview="open"] .guide-stage {
    max-width: 1320px;
    display: grid;
    gap: 0.6rem;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 0.6rem;
}

#chat-panel,
.guide-chat {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

body.guide[data-guide-preview="open"] #chat-panel { min-height: 0; }

/* When the composer takes focus on mobile, shrink the preview pane to a
   compact band so the iOS keyboard does not collapse the chat history.
   The author can always scroll, but the dialogue/options stay reachable. */
body.guide[data-guide-preview="open"][data-guide-composer="focused"] .guide-stage {
    grid-template-rows: minmax(0, 3fr) minmax(0, 1fr);
}

/* Brain-rendered chat structure: title row, history, composer */

#chat-panel .chat-title,
#chat-panel .chat-header-title-row,
#chat-panel .section-meta {
    flex: 0 0 auto;
    margin: 0 0 0.3rem;
    font-family: var(--guide-serif);
    font-size: 1.02rem;
    color: var(--guide-ink-soft);
}

#chat-panel .chat-history {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding-bottom: 0.5rem;
}

#chat-panel .chat-composer {
    flex: 0 0 auto;
    position: sticky;
    bottom: 0;
    display: grid;
    gap: 0.45rem;
    padding: 0.6rem 0 0.8rem;
    background: linear-gradient(180deg, transparent, var(--guide-bg) 30%, var(--guide-bg));
}

.studio-textarea,
.studio-textarea-composer {
    width: 100%;
    min-height: 96px;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--guide-line);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.55);
    color: var(--guide-ink);
    font-family: var(--guide-ui);
    font-size: 0.95rem;
    line-height: 1.4;
    resize: vertical;
}
body.guide[data-theme="dark"] .studio-textarea,
body.guide[data-theme="dark"] .studio-textarea-composer { background: rgba(255, 255, 255, 0.04); }

.composer-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.composer-hint,
.composer-prompt-block,
.field-help,
.section-meta,
.chat-role,
.muted-copy,
.proposal-json-summary {
    color: var(--guide-ink-soft);
    font-size: 0.78rem;
    line-height: 1.4;
}

/* Content chrome — chat bubbles, proposal cards, etc. The brain renders
   these classes; Guide keeps them but minimal. */

.chat-bubble,
.proposal-card,
.proposal-item,
.timeline-card,
.navigator-item,
.diff-side,
.diff-content-preview,
.refine-segment,
.empty-panel,
.chat-empty-card,
.character-library-import-row {
    padding: 0.65rem 0.8rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--guide-line);
}
body.guide[data-theme="dark"] .chat-bubble,
body.guide[data-theme="dark"] .proposal-card,
body.guide[data-theme="dark"] .proposal-item,
body.guide[data-theme="dark"] .timeline-card,
body.guide[data-theme="dark"] .navigator-item,
body.guide[data-theme="dark"] .diff-side,
body.guide[data-theme="dark"] .diff-content-preview,
body.guide[data-theme="dark"] .refine-segment,
body.guide[data-theme="dark"] .empty-panel,
body.guide[data-theme="dark"] .chat-empty-card,
body.guide[data-theme="dark"] .character-library-import-row {
    background: rgba(255, 255, 255, 0.04);
}

/* Proposal staging — distinguish pending proposals from chat bubbles so the
 * author can spot them in the scroll. Accent left strip + soft accent tint
 * + entrance animation. Recon-flagged Wave 3 gap (2026-05-20). */
.proposal-card {
    position: relative;
    border-left: 4px solid var(--guide-accent);
    background: var(--guide-accent-soft);
    box-shadow: 0 4px 14px rgba(46, 111, 94, 0.10);
    padding-left: 0.95rem;
    animation: guide-proposal-enter 280ms ease-out;
}
body.guide[data-theme="dark"] .proposal-card {
    background: rgba(46, 111, 94, 0.16);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
}
.proposal-card h4 {
    color: var(--guide-accent);
    letter-spacing: 0.01em;
}
body.guide[data-theme="dark"] .proposal-card h4 {
    color: #6fbfa6;
}
@keyframes guide-proposal-enter {
    from { opacity: 0; transform: translateX(8px); }
    to { opacity: 1; transform: translateX(0); }
}

.chat-message { display: grid; gap: 0.18rem; }
.chat-role { text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--guide-mono); font-size: 0.7rem; }

.proposal-list,
.timeline-stack,
.refine-segments,
.character-library-import-list,
.inspector-stack {
    display: grid;
    gap: 0.5rem;
    margin: 0.45rem 0 0;
}

.context-pill-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    padding: 0.45rem 0.6rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.32);
}
body.guide[data-theme="dark"] .context-pill-row { background: rgba(255, 255, 255, 0.02); }

.tag,
.reasoning-badge,
.context-pill-kind,
.context-pill-prefix {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.16rem 0.4rem;
    border-radius: 6px;
    background: var(--guide-accent-soft);
    color: var(--guide-ink);
    font-family: var(--guide-mono);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
}

.proposal-diff { display: grid; gap: 0.6rem; margin-top: 0.6rem; }
.diff-panel { display: grid; gap: 0.55rem; }
.diff-field-label {
    font-family: var(--guide-mono);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--guide-ink-soft);
}
.diff-side { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; }
.diff-marker { font-weight: 700; color: var(--guide-accent); }

.proposal-json-details,
.studio-disclosure {
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.24);
}
body.guide[data-theme="dark"] .proposal-json-details,
body.guide[data-theme="dark"] .studio-disclosure { background: rgba(255, 255, 255, 0.02); }
.proposal-json-summary,
.studio-disclosure-summary {
    cursor: pointer;
    list-style: none;
    padding: 0.6rem 0.75rem;
}
.proposal-json-summary::-webkit-details-marker,
.studio-disclosure-summary::-webkit-details-marker { display: none; }
.proposal-json-pre {
    margin: 0;
    padding: 0 0.75rem 0.75rem;
    overflow: auto;
    font-family: var(--guide-mono);
    font-size: 0.72rem;
}
.studio-disclosure-body { padding: 0 0.75rem 0.75rem; }

.inspector-actions,
.choice-inline-actions,
.proposal-actions,
.navigator-inline-actions,
.refine-toolbar-actions,
.stack-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.studio-form-grid { display: grid; gap: 0.55rem; }
.form-block { display: grid; gap: 0.32rem; }
.form-block label {
    font-family: var(--guide-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--guide-ink-soft);
}
.studio-field,
.studio-select {
    min-height: 38px;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--guide-line);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.55);
    color: var(--guide-ink);
    font-size: 0.86rem;
}
body.guide[data-theme="dark"] .studio-field,
body.guide[data-theme="dark"] .studio-select { background: rgba(255, 255, 255, 0.04); }

.thinking-indicator { display: inline-flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.thinking-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--guide-accent);
    animation: guide-pulse 1s ease-in-out infinite;
}
.thinking-dot:nth-child(2) { animation-delay: 0.16s; }
.thinking-dot:nth-child(3) { animation-delay: 0.32s; }
@keyframes guide-pulse {
    0%, 80%, 100% { transform: scale(0.76); opacity: 0.35; }
    40% { transform: scale(1); opacity: 1; }
}

/* --- Drawer --- */

.guide-scrim {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(15, 18, 22, 0.42);
    backdrop-filter: blur(6px);
}

.guide-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 95;
    width: min(360px, 92vw);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.85rem 0.9rem 1rem;
    background: var(--guide-surface);
    backdrop-filter: blur(28px);
    box-shadow: var(--guide-shadow);
    overflow-y: auto;
    transition: transform 0.22s ease;
}
body.guide[data-guide-drawer="closed"] .guide-drawer { transform: translateX(-110%); }
body.guide[data-guide-drawer="open"]   .guide-drawer { transform: translateX(0); }

.guide-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.guide-drawer__title {
    margin: 0;
    font-family: var(--guide-serif);
    font-size: 1.1rem;
}

/* Shell nav, surfaced into the always-visible bar (2026-05-27). It used to
 * live inside the drawer (.guide-drawer__shells, now removed) which made
 * leaving Guide non-obvious — the chief "Guide isn't intuitive" complaint.
 * Compact mono pill group, native to Guide's editorial palette. */
.guide-shell-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    flex: 0 0 auto;
    padding: 0.15rem;
    border: 1px solid var(--guide-line);
    border-radius: 999px;
    font-family: var(--guide-mono);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.guide-shell-nav__link,
.guide-shell-nav__current {
    padding: 0.28rem 0.58rem;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    color: var(--guide-ink-soft);
    transition: background 140ms ease, color 140ms ease;
}
.guide-shell-nav__link:hover { background: var(--guide-accent-soft); color: var(--guide-ink); }
.guide-shell-nav__current {
    background: var(--guide-accent);
    color: #fff;
}
.guide-shell-nav__link--alt { color: var(--guide-accent); }
/* Mobile: let the bar wrap so the nav keeps a full row rather than
 * crushing the title + Playtest. Stays visible (the drawer no longer
 * carries it), so shell-switching is reachable on phones too. */
@media (max-width: 680px) {
    .guide-bar { flex-wrap: wrap; }
    .guide-shell-nav { order: 5; width: 100%; justify-content: center; }
}

.guide-drawer__section { border-radius: 10px; }
.guide-drawer__section summary {
    cursor: pointer;
    padding: 0.52rem 0.62rem;
    border-radius: 8px;
    list-style: none;
    font-family: var(--guide-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--guide-ink-soft);
}
.guide-drawer__section summary::-webkit-details-marker { display: none; }
.guide-drawer__section summary:hover { background: var(--guide-accent-soft); color: var(--guide-ink); }
.guide-drawer__section[open] > summary { color: var(--guide-ink); }
.guide-drawer__section > div,
.guide-drawer__section > #project-overview,
.guide-drawer__section > #navigator-panel,
.guide-drawer__section > #inspector-panel,
.guide-drawer__section > #preview-panel {
    padding: 0.4rem 0.55rem 0.55rem;
}

.guide-drawer__actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
}
.guide-drawer__actions .guide-button { width: 100%; }
.guide-field {
    display: grid;
    gap: 0.2rem;
    grid-column: span 2;
}
.guide-field > span {
    font-family: var(--guide-mono);
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--guide-ink-soft);
}
.guide-select {
    min-height: 38px;
    padding: 0.42rem 0.55rem;
    border: 1px solid var(--guide-line);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.55);
    color: var(--guide-ink);
    font-size: 0.85rem;
}
body.guide[data-theme="dark"] .guide-select { background: rgba(255, 255, 255, 0.04); }

/* Navigator items inside the drawer */
.guide-drawer__section .navigator-item {
    display: block;
    width: 100%;
    margin: 0 0 0.4rem;
    padding: 0.55rem 0.65rem;
    text-align: left;
    text-decoration: none;
    color: inherit;
}
.guide-drawer__section .navigator-item strong { display: block; font-size: 0.86rem; }
.guide-drawer__section .navigator-item span {
    display: block;
    margin-top: 0.15rem;
    color: var(--guide-ink-soft);
    font-size: 0.76rem;
    line-height: 1.35;
}
.guide-drawer__section .navigator-item.is-selected {
    background: var(--guide-accent-soft);
    border-color: rgba(46, 111, 94, 0.3);
}

/* --- Overlays (reused from other shells) --- */

.chat-overlay-scrim {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(15, 18, 22, 0.52);
    backdrop-filter: blur(10px);
}
.chat-overlay-card {
    position: relative;
    width: min(960px, 100%);
    max-height: calc(100vh - 2rem);
    overflow: auto;
    padding: 1rem;
    border-radius: 22px;
    background: var(--guide-surface);
    box-shadow: var(--guide-shadow);
}
.chat-overlay-close {
    position: sticky;
    top: 0;
    left: calc(100% - 48px);
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    color: var(--guide-ink);
}

.character-creator-modal {
    position: fixed;
    inset: 0;
    z-index: 115;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(18, 24, 26, 0.54);
}
.character-creator-modal-card {
    width: min(960px, 100%);
    max-height: calc(100vh - 2rem);
    overflow: auto;
    padding: 1rem;
    border-radius: 20px;
    background: var(--guide-surface);
    box-shadow: var(--guide-shadow);
}
.character-creator-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.character-creator-modal-close {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.5);
    color: var(--guide-ink);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
a:focus-visible,
.chat-overlay-card:focus-visible,
#chat-panel:focus-visible {
    outline: 3px solid rgba(46, 111, 94, 0.45);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

@media (min-width: 720px) {
    .guide-bar { padding: 0.55rem 1.1rem; }
    .guide-stage { padding: 0.8rem 1.1rem 0; }
}

/* --- Preview pane (chat-and-play split) ---------------------------------
   The pane is hidden by default. data-guide-preview="open" on <body> reveals
   it via the grid override in the stage block above. At ≥1080px the split
   flips from top/bottom rows to left/right columns (the desktop side-sheet
   shape the council preferred). */

.guide-preview-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--guide-line);
    border-radius: 14px;
    overflow: hidden;
}
body.guide[data-theme="dark"] .guide-preview-pane { background: rgba(255, 255, 255, 0.03); }

.guide-preview-pane__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--guide-line);
    background: rgba(255, 255, 255, 0.45);
}
body.guide[data-theme="dark"] .guide-preview-pane__head { background: rgba(255, 255, 255, 0.04); }

.guide-preview-pane__label {
    flex: 1 1 auto;
    font-family: var(--guide-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--guide-ink-soft);
}

.guide-preview-pane__btn {
    min-width: 32px;
    min-height: 32px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--guide-ink-soft);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}
.guide-preview-pane__btn:hover { background: var(--guide-accent-soft); color: var(--guide-ink); }

.guide-preview-pane__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0.85rem 1rem 1rem;
}

/* The brain renders into #preview-panel with its own .preview-shell /
   .preview-header / .preview-stack / .preview-scene / .preview-choice
   markup. Guide hides the brain's diagnostic header (Whole Story /
   Selected Scene / Reset Preview / Schema-valid pill) — those repeat
   what the pane head already gives the author — and reflows the rest
   as a reading view: title, prose body, dialogue beats as a script,
   variable strip as a quiet footer, choices as primary buttons stacked. */

.guide-preview-pane .preview-shell { display: contents; }
.guide-preview-pane .preview-header { display: none; }

.guide-preview-pane .preview-body {
    display: grid;
    gap: 0.9rem;
}

.guide-preview-pane .preview-blocked {
    padding: 0.65rem 0.8rem;
    border-radius: 10px;
    background: rgba(175, 74, 63, 0.12);
    color: #af4a3f;
    font-size: 0.85rem;
}

.guide-preview-pane .empty-panel {
    padding: 1.5rem 1rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.4);
    color: var(--guide-ink-soft);
    text-align: center;
    font-size: 0.9rem;
}

.guide-preview-pane .preview-stack {
    display: grid;
    gap: 0.9rem;
}

.guide-preview-pane .preview-scene {
    display: grid;
    gap: 0.7rem;
}

.guide-preview-pane .preview-scene-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-family: var(--guide-mono);
    font-size: 0.66rem;
    letter-spacing: 0.04em;
    color: var(--guide-ink-soft);
}
.guide-preview-pane .preview-scene-meta code {
    padding: 0.15rem 0.4rem;
    border-radius: 5px;
    background: rgba(46, 111, 94, 0.08);
    color: var(--guide-ink);
}

.guide-preview-pane .preview-scene h3 {
    margin: 0;
    font-family: var(--guide-serif);
    font-size: 1.35rem;
    line-height: 1.2;
    color: var(--guide-ink);
}

.guide-preview-pane .preview-scene > p {
    margin: 0;
    font-family: var(--guide-serif);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--guide-ink);
}

.guide-preview-pane .preview-dialogue {
    display: grid;
    gap: 0.45rem;
    padding: 0.7rem 0.85rem;
    border-radius: 12px;
    background: rgba(46, 111, 94, 0.06);
}
.guide-preview-pane .preview-dialogue-line {
    display: grid;
    grid-template-columns: minmax(70px, auto) 1fr;
    gap: 0.6rem;
    align-items: baseline;
    font-size: 0.95rem;
    line-height: 1.45;
}
.guide-preview-pane .preview-dialogue-line strong {
    font-family: var(--guide-serif);
    font-weight: 600;
    color: var(--guide-accent);
}
.guide-preview-pane .preview-dialogue-line span {
    color: var(--guide-ink);
}

.guide-preview-pane .field-help {
    font-family: var(--guide-mono);
    font-size: 0.7rem;
    color: var(--guide-ink-soft);
    padding: 0.4rem 0.55rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.35);
}

.guide-preview-pane .preview-variable-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding-top: 0.25rem;
}
.guide-preview-pane .preview-variable {
    padding: 0.16rem 0.45rem;
    border-radius: 5px;
    background: rgba(46, 111, 94, 0.08);
    font-family: var(--guide-mono);
    font-size: 0.7rem;
    color: var(--guide-ink);
}

.guide-preview-pane .choice-stack {
    display: grid;
    gap: 0.55rem;
}

.guide-preview-pane .preview-choice {
    display: grid;
    gap: 0.35rem;
    padding: 0.7rem 0.85rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid var(--guide-line);
}
body.guide[data-theme="dark"] .guide-preview-pane .preview-choice { background: rgba(255, 255, 255, 0.04); }

.guide-preview-pane .preview-choice .choice-card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}
.guide-preview-pane .preview-choice .choice-card-header strong {
    font-family: var(--guide-serif);
    font-size: 0.96rem;
    color: var(--guide-ink);
}
.guide-preview-pane .preview-choice .choice-card-header .tag {
    background: transparent;
    color: var(--guide-ink-soft);
    font-size: 0.66rem;
}
.guide-preview-pane .preview-choice .muted-copy {
    color: var(--guide-ink-soft);
    font-size: 0.82rem;
    line-height: 1.45;
}
.guide-preview-pane .preview-choice .studio-button {
    width: 100%;
    background: var(--guide-accent);
    color: #f4fbf8;
    border-color: transparent;
    font-family: var(--guide-ui);
    font-weight: 500;
}

/* Desktop side-sheet: chat on the left, preview on the right. The grid
   above flips from top/bottom rows to left/right columns. */
@media (min-width: 1080px) {
    body.guide[data-guide-preview="open"] .guide-stage {
        grid-template-rows: minmax(0, 1fr);
        grid-template-columns: minmax(0, 1.05fr) minmax(360px, 1fr);
        gap: 1rem;
    }
    body.guide[data-guide-preview="open"][data-guide-composer="focused"] .guide-stage {
        grid-template-rows: minmax(0, 1fr);
        grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.85fr);
    }
}


/* ===== Launchpad — first-run onboarding over the chat (2026-05-27) =====
 * Ported affordances from the archived Signal shell. Shown by guide-shell.js
 * only while the story has no scenes; hidden once authoring begins. */
.guide-launchpad {
    margin: 0 auto;
    max-width: 760px;
    width: 100%;
    padding: 20px 20px 4px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.guide-launchpad__lead {
    margin: 0;
    font-family: var(--guide-serif, Georgia, serif);
    font-size: 1.05rem;
    color: var(--guide-ink-soft, #6b6b6b);
}
.guide-launchpad__lane {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}
.guide-launchpad__deck {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}
.guide-focus-card,
.guide-prompt-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
    padding: 12px 14px;
    border: 1px solid var(--guide-line, #e0ddd6);
    border-radius: var(--guide-radius, 12px);
    background: var(--guide-surface, #fff);
    color: var(--guide-ink, #222);
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.guide-focus-card:hover,
.guide-prompt-card:hover {
    border-color: var(--guide-accent, #2e6f5e);
    transform: translateY(-1px);
}
.guide-focus-card:focus-visible,
.guide-prompt-card:focus-visible {
    outline: 2px solid var(--guide-accent, #2e6f5e);
    outline-offset: 2px;
}
.guide-focus-card__eyebrow {
    font-family: var(--guide-mono, ui-monospace, monospace);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--guide-accent, #2e6f5e);
}
.guide-focus-card__title { font-weight: 600; font-size: 0.9rem; }
.guide-prompt-card__title { font-weight: 600; font-size: 0.86rem; }
.guide-prompt-card__copy { font-size: 0.76rem; color: var(--guide-ink-soft, #6b6b6b); line-height: 1.35; }

/* ===== In-editor art generation panel (WS-D, 2026-05-27) ===== */
.guide-art {
    position: fixed;
    top: 56px;
    right: 16px;
    z-index: 60;
    width: min(360px, calc(100vw - 32px));
    max-height: calc(100vh - 80px);
    overflow: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--guide-surface, #fff);
    border: 1px solid var(--guide-line, #e0ddd6);
    border-radius: var(--guide-radius, 12px);
    box-shadow: var(--guide-shadow, 0 12px 28px rgba(20,30,28,0.12));
}
.guide-art__head { display: flex; align-items: center; justify-content: space-between; }
.guide-art__x {
    border: 0; background: transparent; color: var(--guide-ink, #222);
    font-size: 1.2rem; line-height: 1; cursor: pointer; min-width: 32px; min-height: 32px;
}
.guide-art__row { display: flex; gap: 6px; }
.guide-art__seg {
    flex: 1 1 0; padding: 7px 10px; cursor: pointer; font-size: 0.82rem;
    border: 1px solid var(--guide-line, #e0ddd6); border-radius: 8px;
    background: transparent; color: var(--guide-ink, #222);
}
.guide-art__seg.is-on { background: var(--guide-accent, #2e6f5e); color: #f4fbf8; border-color: transparent; }
.guide-art__field { display: flex; flex-direction: column; gap: 4px; font-size: 0.74rem; color: var(--guide-ink-soft, #6b6b6b); }
.guide-art__field select {
    padding: 7px 8px; border: 1px solid var(--guide-line, #e0ddd6);
    border-radius: 8px; background: var(--guide-surface, #fff); color: var(--guide-ink, #222);
}
.guide-art__empty { font-size: 0.82rem; color: var(--guide-ink-soft, #6b6b6b); margin: 0; }
.guide-art__spinner, .guide-art__err { font-size: 0.82rem; padding: 8px 0; }
.guide-art__err { color: #af4a3f; }
.guide-art__card { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.guide-art__card img { width: 100%; border-radius: 10px; display: block; }
.guide-art__card figcaption { display: flex; gap: 6px; flex-wrap: wrap; }