/* Screenshot-style portrait shell. All colour values remain in theme.css. */
:root,html,body { color-scheme:light; background:var(--portrait-surface); color:var(--portrait-text); }
html { -webkit-text-size-adjust:100%; }
body.chat-open { height:100dvh; min-height:0; overflow:hidden; }
.app-main { margin:0; width:100%; }
body.chat-open .app-main { margin:0; padding:0; height:100dvh; min-height:0; width:100%; overflow:hidden; }
body.chat-open .produce-page { height:100%; min-height:0; padding:0; background:var(--portrait-surface); }
body.chat-open .chat-shell { position:relative; isolation:isolate; background:var(--portrait-surface); color:var(--portrait-text); border:0; border-radius:0; box-shadow:none; max-width:none; }
/* A single compact composition bar owns the top edge; there is no navigation header. */
.portrait-titlebar { position:relative; z-index:20; flex:0 0 32px; min-height:32px; display:grid; grid-template-columns:32px minmax(0,1fr) 32px; align-items:center; background:var(--mood-sad); color:var(--portrait-button-text); box-shadow:0 1px 0 var(--portrait-border); }
#portrait-composition-title { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:0 8px; text-align:center; font:700 14.4px/1.2 system-ui,sans-serif; letter-spacing:.01em; }
.chat-conversation { padding:18px 22px calc(18px + var(--selection-list-clearance,0px)); scroll-padding-bottom:calc(18px + var(--selection-list-clearance,0px)); }
.chat-message:first-of-type { margin-top:0; }
.chat-message.user { background:transparent; border:0; border-radius:0; box-shadow:none; }
.chat-message-label,.chat-turn-status,.chat-artifact-heading span { color:var(--portrait-muted); }
.chat-turn-status.is-error { color:#77737b; }
.chat-composer { position:relative; z-index:10; background:transparent; border:0; margin:0 22px; padding:0 0 16px; }
.chat-composer textarea { color:var(--portrait-text); min-height:48px; max-height:120px; padding:8px 0; font:400 16px/1.55 system-ui; }
.chat-composer textarea::placeholder { color:var(--portrait-hint); opacity:.65; }
.prompt-input-shell { position:relative; }
.prompt-input-shell.has-prompt-stream textarea::placeholder { color:transparent; }
#prompt-suggestion-stream { position:absolute; z-index:1; inset:8px 0 auto 0; max-height:50px; overflow:hidden; pointer-events:none; color:var(--portrait-hint); opacity:.68; font:400 16px/1.55 system-ui; }
#prompt-suggestion-stream[hidden] { display:none; }
#prompt-suggestion-stream span { display:block; overflow-wrap:anywhere; }
#prompt-count { display:block; padding:0 0 8px; text-align:right; font:9px system-ui; color:var(--portrait-hint); border-bottom:1px solid var(--portrait-border); }
#prompt-count.is-over-limit { color:var(--danger); }
.chat-composer-footer { display:flex; flex-direction:column; align-items:stretch; gap:6px; padding:8px 0 0; }
.chat-composer-footer #prompt-status { max-width:none; color:var(--portrait-muted); font:10px/1.4 system-ui; }
.chat-composer-footer #prompt-status.is-idle { display:none; }
.chat-composer .produce-button { display:flex; justify-content:center; width:100%; min-height:46px; border-radius:999px; background:var(--portrait-button); color:var(--portrait-button-text); padding:10px 16px; font-size:12px; }
.chat-composer .produce-button:hover { background:var(--portrait-button); }
.chat-composer .produce-button:focus-visible { outline-color:var(--portrait-muted); }
.chat-composer .produce-button svg { width:12px;height:12px; }
.chat-artifact { background:linear-gradient(180deg,var(--surface-player-top),var(--surface-player-bottom)); color:var(--text); border:1px solid var(--player-border); border-radius:20px; padding:12px 4px 4px; box-shadow:inset 0 3px 8px var(--shadow),inset 0 1px 2px var(--shadow-deep),0 1px 0 var(--rim); }
.chat-artifact-heading { padding:0 12px 5px; }
.chat-artifact-heading strong { color:var(--text); font-size:14px; overflow-wrap:anywhere; }
/* Metadata remains available to the landscape bridge, but is not portrait UI. */
.chat-artifact-heading span,.chat-mini-timeline { display:none; }
.chat-artifact audio { color-scheme:dark; height:44px; border-radius:999px; background:transparent; }
.chat-artifact audio::-webkit-media-controls-enclosure { border-radius:999px; background:transparent; }
.chat-artifact audio::-webkit-media-controls-panel { background:linear-gradient(180deg,var(--surface-player-top),var(--surface-player-bottom)); }
#selection-markers { position:absolute; z-index:2; left:0; right:0; bottom:100%; display:flex; flex-direction:column; align-items:stretch; max-height:min(26dvh,240px); overflow-y:auto; overscroll-behavior:contain; padding:4px 0; gap:2px; scrollbar-width:thin; background:transparent; pointer-events:auto; touch-action:pan-y; transform:translateX(0); opacity:1; transition:transform .26s cubic-bezier(.2,.75,.25,1),opacity .18s ease; }
#selection-markers[hidden] { display:none; }
.selection-markers-collapsed #selection-markers { transform:translateX(calc(-100% - 22px)); opacity:0; pointer-events:none; }
#selection-markers-toggle { position:absolute; z-index:4; left:-22px; bottom:100%; display:grid; place-items:center; width:12px; height:var(--selection-list-clearance,0px); padding:0; border:0; border-radius:0 12px 12px 0 / 0 32px 32px 0; overflow:hidden; background:linear-gradient(90deg,color-mix(in srgb,var(--mood-sad) 18%,var(--portrait-surface)),color-mix(in srgb,var(--mood-sad) 34%,var(--portrait-surface))); color:var(--mood-sad); box-shadow:2px 0 8px color-mix(in srgb,var(--mood-sad) 14%,transparent); cursor:pointer; touch-action:manipulation; transition:color .32s ease,filter .18s ease,box-shadow .32s ease; }
#selection-markers-toggle::before { content:''; position:absolute; inset:0; border-radius:inherit; background:var(--mood-sad); opacity:0; pointer-events:none; transition:opacity .32s cubic-bezier(.2,.72,.25,1); }
#selection-markers-toggle svg { position:relative; z-index:1; width:10px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.selection-markers-collapsed #selection-markers-toggle { color:var(--portrait-button-text); box-shadow:2px 0 10px color-mix(in srgb,var(--mood-sad) 24%,transparent); }
.selection-markers-collapsed #selection-markers-toggle::before { opacity:1; }
#selection-markers-toggle[hidden] { display:none; }
#selection-markers-toggle:active { filter:brightness(.9); }
#selection-markers-toggle:focus-visible { outline:2px solid color-mix(in srgb,var(--mood-sad) 55%,var(--portrait-surface)); outline-offset:2px; }
.selection-marker-row { display:flex; align-items:center; flex:none; gap:4px; border-radius:9px; background:transparent; transition:background-color .2s ease; }
.selection-marker-row.is-selected { background:color-mix(in srgb,var(--marker-colour) 19%,transparent); }
.selection-marker { display:flex; align-items:center; gap:12px; flex:1; min-width:0; min-height:44px; padding:4px 0; text-align:left; border:0; border-radius:0; box-shadow:none; cursor:pointer; background:transparent; color:var(--portrait-muted); font:400 18px Georgia,'Times New Roman',serif; touch-action:manipulation; }
.selection-marker > span:not(.selection-marker-icon) { overflow-wrap:anywhere; min-width:0; flex:1; }
.selection-marker-remove { display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; padding:0; border:0; border-radius:0; box-shadow:none; background:transparent; color:var(--portrait-muted); font:400 20px/1 Arial,sans-serif; cursor:pointer; touch-action:manipulation; }
.selection-marker-remove:active { color:var(--portrait-text); }
.song-guidance-open {display:grid;place-items:center;width:32px;height:32px;padding:7px;border:0;background:transparent;color:inherit;cursor:pointer;touch-action:manipulation}
.song-guidance-open svg {width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.song-guidance-open:focus-visible {outline:2px solid currentColor;outline-offset:-4px;border-radius:50%}
#song-guidance {box-sizing:border-box;width:min(480px,calc(100vw - 36px));max-height:82dvh;padding:24px;border:1px solid var(--portrait-border);border-radius:24px;background:var(--portrait-surface);color:var(--portrait-text);box-shadow:0 18px 60px var(--portrait-scrim);overflow:hidden}
#song-guidance[open] {display:flex;flex-direction:column}
#song-guidance::backdrop {background:var(--portrait-scrim)}
.song-guidance-head {display:flex;align-items:flex-start;gap:8px;flex:none}
.song-guidance-head h2 {flex:1;margin:0;font:400 27px/1.15 Georgia,'Times New Roman',serif}
.song-guidance-close {flex:none;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--portrait-muted);font:24px system-ui;cursor:pointer}
.song-guidance-intro {margin:16px 0 18px;font:italic 16px/1.5 Georgia,'Times New Roman',serif;color:var(--portrait-muted);flex:none}
.song-guidance-options {min-height:60px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;display:flex;flex-direction:column}
.song-guidance-section {flex:none;margin:10px 5px 4px;font:600 11px/1.4 system-ui;letter-spacing:.13em;text-transform:uppercase;color:var(--portrait-muted)}
.song-guidance-library-title {margin-top:22px}
.song-guidance-option {flex:none;position:relative;display:flex;flex-direction:column;gap:5px;width:100%;padding:15px 5px 15px 14px;border:0;border-bottom:1px solid var(--portrait-border);background:transparent;color:var(--portrait-text);text-align:left;cursor:pointer}
.song-guidance-option::before {content:'';position:absolute;left:0;top:20px;width:3px;height:19px;border-radius:4px;background:var(--track-chords)}
.song-guidance-option[data-role=drums]::before {background:var(--track-drums)}
.song-guidance-option[data-role=bass]::before {background:var(--track-bass)}
.song-guidance-option[data-role=melody]::before {background:var(--track-melody)}
.song-guidance-option strong {font:400 19px/1.25 Georgia,'Times New Roman',serif}
.song-guidance-option span,.song-guidance-notice {font:12px/1.5 system-ui;color:var(--portrait-muted)}
.song-guidance-example {flex:none;position:relative;display:flex;flex-direction:column;gap:5px;padding:14px 5px 14px 14px;border-bottom:1px solid var(--portrait-border);color:var(--portrait-text)}
.song-guidance-example::before {content:'';position:absolute;left:0;top:18px;width:3px;height:18px;border-radius:4px;background:var(--track-chords)}
.song-guidance-example[data-role=drums]::before {background:var(--track-drums)}
.song-guidance-example[data-role=bass]::before {background:var(--track-bass)}
.song-guidance-example[data-role=melody]::before {background:var(--track-melody)}
.song-guidance-example strong {font:400 17px/1.25 Georgia,'Times New Roman',serif}
.song-guidance-example span {font:12px/1.55 system-ui;color:var(--portrait-muted)}
.song-guidance-notice:empty {display:none}
.song-guidance-option:focus-visible,.song-guidance-close:focus-visible {outline:2px solid var(--mood-sad);outline-offset:-2px}
@media(max-height:550px){#song-guidance{max-height:86dvh;padding:16px}.song-guidance-intro{font-size:13px;margin:8px 0}.song-guidance-head h2{font-size:23px}.song-guidance-option{padding-block:10px}}
.selection-marker-row[data-role=drums],.selection-marker[data-role=drums] { --marker-colour:var(--track-drums); }
.selection-marker-row[data-role=chords],.selection-marker[data-role=chords] { --marker-colour:var(--track-chords); }
.selection-marker-row[data-role=melody],.selection-marker[data-role=melody] { --marker-colour:var(--track-melody); }
.selection-marker-row[data-role=bass],.selection-marker[data-role=bass] { --marker-colour:var(--track-bass); }
.selection-marker[aria-pressed=true] { color:var(--portrait-text); background:transparent; }
.selection-marker-icon { display:grid; place-items:center; width:29px; height:29px; flex:none; border-radius:50%; border:2px solid var(--marker-colour); color:var(--marker-colour); }
.selection-marker-tick { flex:none; width:24px; height:24px; margin-left:auto; margin-right:8px; fill:none; stroke:color-mix(in srgb,var(--marker-colour) 68%,var(--portrait-text)); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; opacity:0; transition:opacity .2s ease; }
.selection-marker[aria-pressed=true] .selection-marker-tick { opacity:1; }
.selection-marker-icon svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.selection-marker:focus-visible,.selection-marker-remove:focus-visible { outline:2px solid var(--portrait-muted); outline-offset:1px; }
.settings-gear { display:grid; place-items:center; padding:7px; width:32px; height:32px; color:inherit; background:transparent; border:0; border-radius:50%; cursor:pointer; touch-action:manipulation; }
.settings-gear svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linejoin:round; }
.settings-gear:focus-visible { outline:2px solid currentColor; outline-offset:-4px; }
#settings-dialog { box-sizing:border-box; width:min(320px,calc(100vw - 40px)); padding:26px; border:1px solid var(--portrait-border); border-radius:20px; background:var(--portrait-surface); color:var(--portrait-text); }
#settings-dialog::backdrop { background:var(--portrait-scrim); }
#settings-dialog h2 { margin:0 0 20px; font:400 27px Georgia,serif; }
#settings-dialog button { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:48px; padding:12px 0; color:var(--portrait-text); background:transparent; border:0; border-bottom:1px solid var(--portrait-border); font:15px system-ui; text-align:left; cursor:pointer; }
#settings-dialog button:disabled { color:var(--portrait-hint); cursor:default; }
#settings-dialog button span,#settings-status { font:12px/1.5 system-ui; color:var(--portrait-muted); }
#settings-status { margin:20px 0 0; }
.home-session-note { font:14px system-ui; }
#chat-backdrop { position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; contain:strict; }
.mood-shape { display:block; position:absolute; left:0; top:0; transform-origin:50% 50%; contain:layout paint; }
.mood-shape svg { display:block; width:100%; height:100%; overflow:visible; }
/* Motion comes only from the read-only visualiser. No falling/idle CSS animation. */
@media(max-height:550px) { #selection-markers { max-height:88px; } .chat-composer { padding-bottom:8px; } .chat-conversation { padding-bottom:calc(6px + var(--selection-list-clearance,0px)); scroll-padding-bottom:calc(6px + var(--selection-list-clearance,0px)); } }
@media(prefers-reduced-motion:reduce) { #selection-markers,.selection-marker-row,.selection-marker-tick { transition:none; } }