/* Clean Blue component styling. Palette is controlled by clean-ui.js. */
button,.library-link{border-radius:12px;background:var(--surface);font-weight:500;box-shadow:0 1px 2px #18243b05;transition:background .15s,border-color .15s,box-shadow .15s}
button:hover:not(:disabled),.library-link:hover{background:var(--soft);border-color:var(--accent)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
button.primary{background:var(--button);color:#fff;border-color:var(--button);box-shadow:0 2px 5px #18243b12}button.primary:hover:not(:disabled){filter:brightness(1.08)}button:disabled{cursor:not-allowed;filter:none;box-shadow:none}
button.quiet{background:transparent}input,select,textarea{border-radius:12px;background:var(--control);border-color:var(--line)}input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
#app-header{background:var(--surface);border-bottom:1px solid var(--line)}.brand{color:var(--ink);font-weight:750}.brand span{color:var(--accent)}.eyebrow{color:var(--accent)}
#reading-column,#library-page{background:var(--surface)}.side-panel{background:var(--bg)}.story-heading{background:var(--surface)}.story-heading h1{font-weight:650;letter-spacing:-.025em}
.story-link{background:var(--surface);border:1px solid var(--line);border-radius:12px}.story-link[aria-current=true]{background:var(--soft);border-color:var(--accent);box-shadow:inset 3px 0 var(--accent)}.library-link[aria-current=true]{color:var(--accent)}
.card,.field,.connection-card,.usage-grid>div{background:var(--surface);border-radius:12px;border-color:var(--line)}.inspector .panel{border-radius:12px;padding:16px 12px;margin:10px 0;background:var(--surface);border:1px solid var(--line)}.tool-buttons{justify-items:stretch}.tool-buttons button{text-align:left}
#compose{background:var(--surface)}#compose>textarea{background:var(--bg);border:1px solid var(--line);border-radius:12px}.speech{border-radius:0 12px 12px 0}.user-message{border-radius:12px 12px 3px 12px}.thought,.user_action{color:var(--muted)}#recovery{color:var(--ink)}
dialog{border-radius:16px;box-shadow:0 24px 80px #18243b30}dialog::backdrop{background:#18243b66}.dialog-heading,.dialog-footer{background:var(--surface)}
#story-delete,button.danger{background:var(--surface);color:var(--danger);border-color:var(--danger)}#story-delete:hover,button.danger:hover{background:var(--soft)}
#connections-status,#connection-status,#library-status,#library-asset-status,#start-readiness{color:var(--accent)}.toast{box-shadow:0 8px 28px #18243b20}.toast[data-type=error] strong{color:var(--danger)}.toast[data-type=success] strong{color:#287647}.toast[data-type=warning] strong{color:#886016}
:root[data-mode=dark] .toast[data-type=success] strong{color:#8cd5a9}:root[data-mode=dark] .toast[data-type=warning] strong{color:#e4c17b}
@media(prefers-reduced-motion:reduce){button,.library-link{transition:none}}
/* Compact panels: same width per button group, measured by the longest label. */
:root{--compact-left:174px;--compact-right:236px}body,button,input,textarea,select{font-family:Pretendard,'Malgun Gothic',system-ui,sans-serif}button,.library-link{font-weight:600;letter-spacing:-.015em}
@media(min-width:1001px){#workspace{grid-template-columns:var(--compact-left) minmax(0,1fr) var(--compact-right)}#workspace.library-view{grid-template-columns:var(--compact-left) minmax(0,1fr)}}
.side-panel{padding:16px 12px}.library>.section-heading{margin:0}.library>.section-heading:has(.panel-close:only-child){min-height:0}.library-bottom{gap:8px;padding-top:12px}.library-link,.story-link{font-size:14px;padding:9px 12px;min-height:38px}.story-link{width:100%}
.inspector .panel{padding:12px 10px;margin:8px 0}.inspector,.inspector .small,.inspector label,.inspector p,.inspector h3,.inspector .panel>summary,.inspector .field,.inspector .card small{font-size:14px;line-height:1.65}.inspector h2{font-size:16px}.inspector button,.tool-buttons button,#story-ai-open,#story-lore-open,#enable-budget{font-size:14px;padding:9px 10px;min-height:38px}.tool-buttons{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;justify-items:stretch}.tool-buttons button{text-align:center;width:100%;white-space:normal}.inspector .section-heading{flex-wrap:wrap}.inspector .section-heading button{min-width:64px}.inspector input,.inspector select,.inspector textarea{max-width:100%;min-width:0}.inspector .usage-details pre{font-size:12px}.story-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.story-actions button{font-size:13px;min-height:36px}
#story-delete{background:#f9cbd4;color:#ae1938;border:1px solid #f0a4b4;box-shadow:0 2px 3px #6c283a22;border-radius:12px;width:100%;font-weight:600}#story-delete:hover:not(:disabled){background:#f6b8c5;border-color:#e88ea3}
.extras-list .card img{display:block;max-width:100%;max-height:65vh;margin:12px auto;border-radius:12px}.extras-list .card .row{flex-wrap:wrap}.bookmark-target{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:1000px){.side-panel{width:min(var(--compact-right),88vw)}.side-panel.library{width:min(var(--compact-left),88vw)}}@media(max-width:600px){.story-heading{flex-wrap:wrap}.story-actions{width:100%;justify-content:flex-start}.story-actions button{font-size:12px}.inspector button{min-height:40px}}
.speaker{color:color-mix(in srgb,var(--speaker,var(--accent)) 40%,var(--ink))}.inspector .small.muted{font-weight:450}#app-header button,.library-link{font-size:14px}

/* V2 conversation placement: scene left, compact user bubble and tools right.
   Keep multiline text left-aligned inside the right-positioned bubble for reading. */
#reader .message-scene{text-align:left}
#reader .message-user{text-align:right}
#reader .message-user .user-message{width:fit-content;max-width:82%;margin:0 0 4px auto;text-align:left;overflow-wrap:anywhere;border-radius:12px 3px 12px 12px}
#reader .message-user>button{margin-left:5px;margin-right:0}
@media(max-width:600px){#reader .message-user .user-message{max-width:calc(100% - 24px)}}