/* Read-only story preview and character selection. */
.story-preview { width:min(660px,calc(100% - 24px)); height:min(820px,calc(100dvh - 24px)); padding:24px; overflow:hidden; }
.story-preview[open] { display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
.preview-content { min-height:0; overflow:auto; overscroll-behavior:contain; }
.story-preview header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.story-preview header h2 { margin:0; font-size:22px; }
.story-preview header button { flex:0 0 44px; width:44px; height:44px; padding:0; border:0; background:transparent; font-size:26px; }
.story-preview .preview-portrait { display:block; width:160px; height:190px; margin:20px auto; border-radius:16px; }
.story-preview .preview-character { min-height:24px; color:var(--ui-accent); text-align:center; font-size:14px; font-weight:600; }
.preview-content>p { color:var(--ui-muted); line-height:1.8; }
.preview-opening { padding:18px; margin:20px 0; border:1px solid var(--ui-line); border-radius:16px; background:var(--ui-surface-raised); }
.preview-opening h3 { margin:0 0 12px; font-size:15px; font-weight:600; }
.preview-opening p { margin:0; line-height:1.85; white-space:pre-wrap; }
@media(max-width:600px) { .story-preview { width:calc(100% - 12px); max-width:none; height:calc(100dvh - 12px); margin:auto 6px 6px; padding:20px; border-radius:22px; } }