/* Give the conversation the viewport, with a compact composer below it. */
#story-dialog{width:calc(100vw - 24px);max-width:1600px;height:calc(100dvh - 24px);max-height:calc(100dvh - 24px)}
#story-dialog .story-layout{grid-template-columns:190px minmax(0,1fr)}
#story-dialog .aside-content{padding:14px 16px 20px}
#story-dialog .aside-content h2{font-size:22px}
#story-dialog .aside-content>p,#story-dialog .character-note p{font-size:14px}
#story-dialog .chat-head{padding:10px 24px;min-height:58px}
#story-dialog .chat-head strong{font-size:18px}
#story-dialog .messages{padding:24px clamp(20px,4vw,64px);min-height:0;overscroll-behavior:contain;scrollbar-gutter:stable}
#story-dialog .message{max-width:1000px;margin:0 auto 28px}
#story-dialog .message small{font-size:14px;margin-bottom:10px}
#story-dialog .bubble{font-size:19px;line-height:1.95;color:#f3edf8;word-break:normal}
#story-dialog .message.scene .bubble,#story-dialog .message.assistant .bubble{padding:20px 24px;border-radius:14px;border:1px solid #43354f;background:#24202b}
#story-dialog .message.user{padding-left:12%;text-align:right}
#story-dialog .message.user .bubble{max-width:100%;padding:14px 20px}
#story-dialog .composer{padding:10px 24px 14px;flex-shrink:0;background:#18171e}
.composer-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:8px}
#story-dialog .model-label{margin:0;display:none}
#story-dialog #model-select{width:105px;height:40px;margin:0;padding:4px 12px;flex-shrink:0}
#story-dialog #price-hint{margin:0;font-size:13px;line-height:1.4}
#story-dialog #message-input{min-height:calc(3.2em + 26px);height:calc(4.8em + 26px);max-height:240px;font-size:18px;line-height:1.6;padding:12px 110px 12px 16px;resize:vertical}
#story-dialog #message-form .primary{font-size:15px;min-height:42px;bottom:12px;right:12px}
#story-dialog .composer>.composer-note{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#story-dialog .reply-waiting{font-size:16px;color:#cfbfdf}
#story-dialog .reply-flowing:after{content:'';display:inline-block;width:3px;height:1em;margin-left:4px;vertical-align:-.1em;background:#c8abf4;animation:reply-caret 1s ease-in-out infinite}
@keyframes reply-caret{50%{opacity:.25}}
@media(max-width:900px){
 #story-dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border:0;border-radius:0;margin:0;inset:0}
 #story-dialog .story-layout{display:flex;flex-direction:column}
 #story-dialog .story-aside{display:none}
 #story-dialog .chat{flex:1;min-height:0}
 #story-dialog .chat-head{padding:10px 16px;min-height:54px}
 #story-dialog .messages{padding:20px 16px}
 #story-dialog .bubble{font-size:18px;line-height:1.9}
 #story-dialog .message.scene .bubble,#story-dialog .message.assistant .bubble{padding:16px 18px}
 #story-dialog .composer{padding:8px 14px max(10px,env(safe-area-inset-bottom))}
 #story-dialog #message-input{font-size:17px;min-height:calc(3.2em + 26px);height:calc(4.8em + 26px);padding-right:98px}
 #story-dialog #message-form .primary{right:9px;bottom:10px;font-size:14px}
 #story-dialog #price-hint{font-size:12px;display:block}
 .composer-toolbar{gap:10px;flex-wrap:nowrap}
}
@media(prefers-reduced-motion:reduce){#story-dialog .reply-flowing:after{animation:none}}
.chat-actions{display:flex;align-items:center;gap:10px}.reset-story-button{border:1px solid #66536e;border-radius:8px;background:transparent;color:#d4c6dd;padding:8px 12px;font-size:13px;white-space:nowrap}
#reset-dialog{width:480px;max-width:calc(100vw - 24px)}#reset-dialog h2{font-size:22px}#reset-warning{color:#f2d9df;font-size:16px;line-height:1.8}.reset-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}.danger-button{border:1px solid #d78092;background:#a43f57;color:white;border-radius:10px;padding:12px 16px;font:inherit;font-size:14px}#reset-error{color:#ffb5bd}#reset-dialog button:disabled{opacity:.5;cursor:wait}
@media(max-width:420px){#story-dialog .chat-head span{display:none}.chat-actions{gap:7px}.reset-story-button{padding:8px;font-size:12px}.reset-actions>button{width:100%}}
/* A distinct, keyboard-accessible disclosure and a persistent scene heading. */
.profile-details>summary.profile-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none;cursor:pointer;background:#302637;border:1px solid #8c6aa1;border-radius:10px;padding:12px 16px;font-size:15px;font-weight:600;color:#f3e3ff;min-height:48px}
.profile-details>summary.profile-toggle::-webkit-details-marker{display:none}
.profile-details>summary.profile-toggle:hover{background:#40304b;border-color:#c69bea}
.profile-details>summary.profile-toggle:focus-visible{outline:3px solid #d4b3ef;outline-offset:3px}
.profile-chevron{font-size:22px;transition:transform .15s}
.profile-details[open] .profile-chevron{transform:rotate(180deg)}
#story-dialog .scene-location{display:flex;align-items:baseline;gap:10px;padding:10px 24px;background:#24202c;border-bottom:1px solid #44364e;flex-shrink:0;font-size:15px;line-height:1.5;min-width:0}
.scene-location-label{font-size:14px;color:#c9bbd4;white-space:nowrap}
#scene-location{font-weight:500;color:#f0ddff;overflow-wrap:anywhere;min-width:0}
@media(max-width:900px){#story-dialog .scene-location{padding:9px 16px;font-size:14px}}

.scene-location{flex-wrap:wrap}.photo-progress{margin-left:auto;flex-shrink:0;border:1px solid #514363;border-radius:20px;padding:4px 10px;font-size:13px;color:#d7c4ff;white-space:nowrap}