/* 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; }
/* Initial breathing room scrolls away with the messages; there is no header row. */
.chat-conversation { padding:52px 22px 18px; }
.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:var(--danger); }
.chat-composer { 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-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 { 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; }
#selection-markers[hidden] { display:none; }
.selection-marker-row { display:flex; align-items:center; flex:none; gap:4px; }
.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:last-child { overflow-wrap:anywhere; }
.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;flex:0 0 40px;width:40px;height:44px;padding:9px;border:0;background:transparent;color:var(--portrait-muted);cursor:pointer;touch-action:manipulation}
.song-guidance-open svg {width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.song-guidance-open:focus-visible {outline:2px solid var(--mood-sad);outline-offset:-2px;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-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-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[data-role=drums] { --marker-colour:var(--track-drums); }
.selection-marker[data-role=chords] { --marker-colour:var(--track-chords); }
.selection-marker[data-role=melody] { --marker-colour:var(--track-melody); }
.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[aria-pressed=true] .selection-marker-icon { background:var(--marker-colour); color:var(--portrait-text); }
.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 { position:fixed; top:6px; left:6px; z-index:20; display:grid; place-items:center; padding:10px; width:44px; height:44px; color:var(--portrait-muted); background:transparent; border:0; border-radius:50%; cursor:pointer; }
.settings-gear svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linejoin:round; }
.settings-gear:focus-visible { outline:2px solid var(--portrait-muted); outline-offset:-3px; }
#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; }
.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:6px; } }