/* The phone shell (MOBILE_SHELL). Every rule waits for .app.mshell, which
   mobile-shell.js sets on phones only. Design: public/design/mobile-shell/index.html */
.ms-top, .ms-rail, .ms-account { display: none; }

@media (max-width: 979px) {
  /* Header: drawer, title, actions. The old top bar, breadcrumb bar and dock step aside. */
  .app.mshell { grid-template-rows: calc(56px + env(safe-area-inset-top)) minmax(0, 1fr); }
  .app.mshell .topbar { height: calc(56px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 12px 0; border: 0; background: transparent; box-shadow: none; }
  .app.mshell .topbar > :not(.ms-top) { display: none; }
  .app.mshell .workspacebar, .app.mshell .mobile-dock { display: none; }
  .app.mshell .shell, .app.mshell .shell.media-layout, .app.mshell .shell.conversation-layout, .app.mshell .shell.full-layout { padding-bottom: env(safe-area-inset-bottom); }

  .app.mshell .ms-top { display: flex; width: 100%; height: 56px; align-items: center; gap: 8px; }
  .ms-title { flex: 1; min-width: 0; padding-left: 4px; overflow: hidden; color: var(--ink-bright); font: 700 13px/16px var(--font-body); white-space: nowrap; text-overflow: ellipsis; }
  .ms-btn { display: grid; width: 36px; height: 36px; flex: none; place-items: center; border: 0; border-radius: 10px; color: var(--ink); background: none; cursor: pointer; }
  .ms-btn .icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .ms-btn:active { background: rgba(255, 255, 255, .08); }
  .ms-signin { display: inline-flex; height: 34px; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid rgba(16, 185, 129, .5); border-radius: 8px; color: var(--accent-bright); background: var(--accent-bg); font: 700 12px/16px var(--font-body); cursor: pointer; }
  .ms-signin .icon { width: 14px; height: 14px; }

  /* Drawer: the module rail sits left of the app's own drawer (chats, workspaces, folders). */
  .app.mshell .ms-rail { position: fixed; z-index: 3; top: 0; bottom: 0; left: 0; display: flex; width: 60px; flex-direction: column; align-items: center; gap: 6px; padding: calc(10px + env(safe-area-inset-top)) 0 calc(20px + env(safe-area-inset-bottom)); border-right: 1px solid var(--line-faint); background: #07100b; transform: translateX(-105%); visibility: hidden; transition: transform .26s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .26s; }
  .app.mshell.mobile-drawer-open .ms-rail { transform: none; visibility: visible; transition: transform .26s cubic-bezier(.16, 1, .3, 1); }
  .app.mshell .shell > .left, .app.mshell .shell.media-layout > .left, .app.mshell .shell.conversation-layout > .left { left: 60px; width: min(276px, calc(88vw - 60px)); background: #07100b; }
  .ms-mod { display: grid; width: 42px; height: 42px; flex: none; place-items: center; border: 0; border-radius: 10px; color: var(--ink-dim); background: none; cursor: pointer; }
  .ms-mod .icon { width: 20px; height: 20px; stroke-width: 1.6; }
  .ms-mod.active { color: var(--accent-bright); background: var(--accent-bg); box-shadow: inset 0 0 0 1px rgba(16, 185, 129, .4); }
  .ms-mod.soon { opacity: .4; cursor: default; }
  .ms-sep { width: 28px; margin: 4px 0; border-top: 1px solid var(--line); }
  .ms-grow { flex: 1; }
  .ms-tile { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 8px; color: #022c1c; background: var(--accent); font: 800 13px/16px var(--font-body); }

  /* Account page */
  .app.mshell .ms-account:not([hidden]) { position: fixed; z-index: 160; inset: 0; display: flex; flex-direction: column; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); overflow-y: auto; overscroll-behavior: contain; background: radial-gradient(ellipse at 50% -10%, rgba(16, 185, 129, .2), transparent 55%), #020604; }
  .ms-account > .ms-top { display: flex; flex: none; padding: 0 12px; }
  .ms-account-body { display: flex; flex-direction: column; gap: 16px; padding: 4px 16px 24px; }
  .ms-who { display: flex; align-items: center; gap: 12px; padding: 4px 4px 0; }
  .ms-who .ms-tile { width: 44px; height: 44px; border-radius: 12px; font-size: 18px; }
  .ms-who-meta { display: flex; min-width: 0; flex-direction: column; gap: 6px; }
  .ms-who-meta strong { color: var(--ink-bright); font: 700 15px/16px var(--font-body); }
  .ms-who-meta small { color: var(--ink-dim); font: 400 12px/16px var(--font-body); }
  .ms-card { border: 1px solid var(--line); border-radius: 12px; background: rgba(6, 13, 9, .85); }
  .ms-catnip { display: flex; flex-direction: column; gap: 14px; padding: 16px; }
  .ms-label { color: var(--accent); font: 700 10px/12px var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
  .ms-amount { display: flex; align-items: center; gap: 10px; color: var(--ink-bright); font: 700 24px/28px var(--font-body); }
  .ms-amount .icon { width: 24px; height: 24px; }
  .ms-primary { display: flex; height: 42px; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 8px; color: #022c1c; background: var(--accent); font: 800 13px/16px var(--font-body); cursor: pointer; }
  .ms-primary .icon { width: 16px; height: 16px; }
  .ms-list { padding: 4px; }
  .ms-row { display: flex; width: 100%; height: 48px; align-items: center; gap: 12px; padding: 0 10px; border: 0; border-radius: 8px; color: var(--ink); background: none; font: 400 13px/16px var(--font-body); text-align: left; cursor: pointer; }
  .ms-row .icon { width: 16px; height: 16px; flex: none; }
  .ms-row > span:not([class]) { flex: 1; min-width: 0; }
  .ms-row .ms-val { color: var(--ink-dim); font-size: 11px; }
  .ms-row .ms-chev { color: var(--ink-faint); }
  .ms-row .ms-chev .icon { width: 14px; height: 14px; }
  .ms-row.ms-dim { color: var(--ink-dim); }
  .ms-legal { display: flex; justify-content: center; gap: 16px; }
  .ms-legal a { padding: 6px 2px; color: var(--ink-faint); font: 400 11px/16px var(--font-body); text-decoration: none; }

  /* The ⋯ menu is the app's conversation menu, sized for a thumb. */
  .app.mshell .conversation-context-menu { min-width: 208px; padding: 6px; border-radius: 12px; }
  .app.mshell .conversation-context-menu button { height: 40px; gap: 12px; padding: 0 10px; border-radius: 8px; font-size: 13px; }
  .app.mshell .conversation-context-menu .icon { width: 16px; height: 16px; }

  .app.mshell[data-theme="light"] .ms-rail, .app.mshell[data-theme="light"] .shell > .left { background: #f6faf8; }
  .app.mshell[data-theme="light"] .ms-account:not([hidden]) { background: radial-gradient(ellipse at 50% -10%, rgba(5, 150, 105, .16), transparent 60%), linear-gradient(180deg, #fff, #edf4f0); }
  .app.mshell[data-theme="light"] .ms-card { background: #fff; }
  .app.mshell[data-theme="light"] .ms-tile, .app.mshell[data-theme="light"] .ms-primary { color: #fff; }
}

/* ---------- Step 2: the Nyxia chat ---------- */
@media (max-width: 979px) {
  /* Nyxia's room, mood and scratchpad stay on desktop; the phone opens on her chat. */
  .app.mshell[data-view="sanctuary"] .conversation-toolgrid > .conversation-context-sidebar { display: none !important; }
  .app.mshell[data-view="sanctuary"] .conversation-toolgrid:has(> .conversation-main > .empty) { display: block; height: 100%; }
  .app.mshell[data-view="sanctuary"] .conversation-toolgrid:has(> .conversation-main > .empty) > .conversation-main { height: 100%; overflow: visible; }
  .app.mshell[data-view="sanctuary"] .conversation-main > .empty { display: flex; height: 100%; min-height: 0; padding: 0; }
  .app.mshell[data-view="sanctuary"] .conversation-main > .empty .emptyinner { display: flex; flex: 1; align-self: stretch; margin: 0; max-width: none; flex-direction: column; align-items: center; gap: 16px; padding: 0 12px; text-align: center; }
  .app.mshell[data-view="sanctuary"] .conversation-main > .empty .emptyinner::before {
    content: ""; flex: none; width: 88px; height: 88px; margin-top: auto; border: 1px solid rgba(16, 185, 129, .55); border-radius: 50%;
    background: url("/desktop/welcome/nyxia-portrait.webp") -3px -8px / 129px auto no-repeat, radial-gradient(circle at 50% 40%, rgba(16, 185, 129, .25), #04100a 70%);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, .08), 0 0 32px var(--accent-glow);
  }
  .app.mshell[data-view="sanctuary"] .conversation-main > .empty #hero-headline { display: block; padding: 0 12px; margin: 0; font-size: 26px; line-height: 30px; }
  .app.mshell[data-view="sanctuary"] .conversation-main > .empty #hero-subtext { display: block; max-width: 300px; margin: 0; color: var(--ink-dim); font-size: 11px; line-height: 16px; }
  .app.mshell[data-view="sanctuary"] .conversation-main > .empty .quick { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 4px 0 0; }
  .app.mshell[data-view="sanctuary"] .conversation-main > .empty .quick button { height: 30px; padding: 0 12px; font-size: 11px; }
  .app.mshell[data-view="sanctuary"] .conversation-main > .empty .composer { margin: auto 0 12px; }

  /* Conversation */
  .app.mshell .conversation { padding: 12px 16px 0; }
  .app.mshell .messages { gap: 20px; }
  .app.mshell .msg { max-width: 100%; }
  .app.mshell .msg.user { max-width: 82%; }
  .app.mshell .msg.user > .label { display: none; }
  .app.mshell .msg.user .bubble { padding: 12px 14px; border: 1px solid rgba(16, 185, 129, .25); border-radius: 18px; background: rgba(16, 185, 129, .12); font-size: 13px; line-height: 20px; }
  /* Inline-block on a 19.5px line made the telemetry chip 20.125px tall and put everything under it off the pixel grid. */
  .app.mshell .msg > .sanctuary-doors-container { display: flex; width: fit-content; flex-direction: column; align-items: flex-start; }
  .app.mshell .msg:not(.user) > .bubble { padding: 0; border: 0; background: none; box-shadow: none; font-size: 13px; line-height: 20px; }

  /* Message box: one pill; long text and attachments stack inside it. */
  .app.mshell .composer { width: 100%; min-height: 52px; margin: 0; padding: 0 7px 0 6px; border: 1px solid rgba(16, 185, 129, .28); border-radius: 26px; background: rgba(8, 18, 13, .94); box-shadow: 0 0 24px rgba(16, 185, 129, .12); }
  .app.mshell .conversation > .composer { margin: 8px 0 12px; }
  .app.mshell .composer .composer-action-btn { width: 34px; height: 34px; color: var(--ink-dim); }
  .app.mshell .composer .composer-action-btn .icon { width: 18px; height: 18px; }
  .app.mshell .composer textarea { padding: 9px 4px; font-size: 13px; line-height: 20px; }
  .app.mshell .composer .send { width: 38px; min-width: 38px; height: 38px; border-radius: 50%; }
  .app.mshell .composer.ms-tall, .app.mshell .composer:has(.chat-attachment-tray) { padding: 8px 8px 8px 6px; border-radius: 22px; }
  .app.mshell .composer .chat-attachment-tray { order: -2; gap: 8px; padding: 2px 2px 4px; }
  .app.mshell .composer .chat-attachment-chip { width: 64px; height: 64px; border-radius: 10px; }
  .app.mshell .composer.ms-tall textarea { grid-column: 1 / -1; order: -1; padding: 6px 8px 0; }
  .app.mshell .composer.ms-tall .send { grid-column: 4; }

  /* Voice: the recording bar covers the box; the first-time language picker is a bottom sheet. */
  .app.mshell .composer > .recording-capsule.island-capsule { inset: auto -1px -1px -1px; height: 52px; transform: none; justify-content: space-between; padding: 0 7px 0 14px; border-radius: 26px; background: #07120d; animation: none; font-family: var(--font-body); }
  .app.mshell .popover-capsule { position: fixed; z-index: 200; top: auto; right: 0; bottom: 0; left: 0; width: auto; max-width: none; max-height: 82dvh; overflow-y: auto; transform: none; padding: 16px 16px calc(20px + env(safe-area-inset-bottom)); border-radius: 16px 16px 0 0; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .6); }
  .app.mshell .popover-capsule::after { display: none; }
}

/* ---------- Step 4: studios ---------- */
@media (max-width: 979px) {
    .app.mshell.ms-studio .toolgrid > .controls:not(.ms-open) { display: none; }
  .app.mshell .toolgrid > .controls.ms-open { position: fixed; z-index: 200; right: 0; bottom: 0; left: 0; display: block; max-height: 85dvh; padding: 0 16px calc(20px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; border: 0; border-top: 1px solid var(--line); border-radius: 16px 16px 0 0; background: #07100b; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .6); }
  .ms-sheet-head { position: sticky; z-index: 2; top: 0; display: flex; align-items: center; gap: 8px; margin: 0 -16px 4px; padding: 18px 10px 6px 16px; background: inherit; color: var(--ink-bright); font: 700 13px/16px var(--font-body); }
  .ms-sheet-head::before { content: ""; position: absolute; top: 8px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: rgba(255, 255, 255, .2); }
  .ms-sheet-head > span { flex: 1; }
  .app.mshell[data-theme="light"] .toolgrid > .controls.ms-open { background: #f6faf8; }
}

/* ---------- Step 4: viewer ---------- */
.ms-viewer-bar { display: none; }
@media (max-width: 979px) {
  .app.mshell.ms-viewer .stage { padding-bottom: 96px; background: #000; }
  .app.mshell.ms-viewer .toolgrid > .canvas { min-height: 56dvh; padding: 0; border: 0; background: #000; }
  .app.mshell.ms-viewer .toolgrid > .image-details-sidebar { padding: 16px; background: transparent; }
  .app.mshell.ms-viewer .image-details-sidebar :is([data-save-to-vault], [data-image-remix-from], [data-reuse-image-prompt], [data-reuse-video-settings], [data-reuse-song-settings], [data-voice-action="reuse"], [data-model3d-action="reuse"], a[download], a[data-upscale-download], [data-delete-image], [data-delete-video], [data-voice-action="delete"], [data-model3d-action="delete"], [data-delete-song-id]):not([data-asset-action="reuse"]) { display: none; }
  /* The asset sidebar's Keep row is the bar. Reuse and the Tools stay in the page, thumb-sized. */
  .app.mshell.ms-viewer .asset-keep { display: none; }
  .app.mshell.ms-viewer :is([data-asset-action="reuse"], [data-asset-tool]) { height: 44px; min-height: 44px; gap: 8px; border-radius: 8px; font-size: 12px; line-height: 16px; }
  .app.mshell.ms-viewer :is([data-asset-action="reuse"], [data-asset-tool]) .icon { width: 16px; height: 16px; }
  .app.mshell.ms-viewer .asset-tools { gap: 8px; }
  .ms-vbtn:disabled { opacity: .4; cursor: default; }
  .app.mshell .ms-viewer-bar:not([hidden]) { position: fixed; z-index: 120; right: 0; bottom: 0; left: 0; display: flex; justify-content: space-around; padding: 8px 8px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-faint); background: rgba(0, 0, 0, .94); }
  .ms-vbtn { display: flex; min-width: 56px; flex-direction: column; align-items: center; gap: 6px; padding: 6px 0; border: 0; color: var(--ink); background: none; font: 700 10px/12px var(--font-body); cursor: pointer; }
  .ms-vbtn .icon { width: 20px; height: 20px; stroke-width: 1.6; }
  .ms-vbtn.danger { color: #f87171; }
}

/* ---------- Step 5: Vault ---------- */
@media (max-width: 979px) {
  .app.mshell .library-gallery.mode-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 4px 12px 24px; }
  .app.mshell .library-gallery.mode-tiles .library-card { min-height: 0; padding: 0; overflow: hidden; border-radius: 8px; }
  .app.mshell .library-gallery.mode-tiles .tile-thumb { height: auto; aspect-ratio: 1; border-radius: 0; }
  .app.mshell .library-gallery.mode-tiles .asset-type-circle { inset: auto auto 6px 6px; width: 22px; height: 22px; transform: none; border-radius: 6px; background: rgba(0, 0, 0, .65); }
  .app.mshell .library-gallery.mode-tiles .asset-type-circle .icon { width: 12px; height: 12px; }
  .app.mshell .library-gallery.mode-tiles .tile-meta { padding: 6px 8px 8px; }
  .app.mshell .library-gallery.mode-tiles .tile-title-row strong { display: block; overflow: hidden; font-size: 11px; line-height: 16px; white-space: nowrap; text-overflow: ellipsis; }
  .app.mshell .library-gallery.mode-tiles .tile-sub-row { display: none; }
}

/* ---------- Studio tools open as sheets ---------- */
@media (max-width: 979px) {
  /* No tool reads as switched on until its sheet is open. */
  .app.mshell:not(.ms-studio-sheet-open) .studio-rail-btn.active { border-color: transparent; color: var(--ink-dim); background: transparent; box-shadow: none; }
  .app.mshell:not(.ms-studio-sheet-open) .studio-rail-btn.active::before { display: none; }
}
@media (max-width: 979px) {
  /* Styles in the sheet: two across, so every phone gets a readable preview; the sheet scrolls. */
  .app.mshell .controls.ms-open .image-style-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .app.mshell .controls.ms-open .image-style-card.is-none { grid-column: 1 / -1; }
}

@media (max-width: 979px) {
  /* The sheet's fields get air: one rhythm for every studio form. */
  .app.mshell .toolgrid > .controls.ms-open { display: flex; flex-direction: column; gap: 20px; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
  .app.mshell .toolgrid > .controls.ms-open > .ms-sheet-head { margin-bottom: -8px; }
  .app.mshell .toolgrid > .controls.ms-open .field { gap: 10px; }
  .app.mshell .toolgrid > .controls.ms-open > .primarybtn { margin-top: 4px; }
  .app.mshell .toolgrid > .controls.ms-open > .generate-cost { margin-top: -12px; }
  /* No clipboard on phones: paste buttons go. */
  .app.mshell button:has(> svg > use[href="#clipboard-paste"]) { display: none; }
}

/* ---------- Activity ---------- */
@media (max-width: 979px) {
  .ms-activity { position: relative; }
  .ms-act-spin { position: absolute; inset: 4px; border: 1.5px solid rgba(52, 211, 153, .2); border-top-color: var(--accent-bright); border-radius: 50%; animation: generation-spin .8s linear infinite; pointer-events: none; }
  .ms-act-spin[hidden], .ms-act-n[hidden] { display: none; }
  .ms-act-n { position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; color: #022c1c; background: var(--accent-bright); font: 800 10px/16px var(--font-body); text-align: center; }
  /* The footer stays hidden on phones; only its Activity panel comes out, as a bottom sheet. No corner notices. */
  .app.mshell .statusbar { position: fixed; z-index: 250; right: 0; bottom: 0; left: 0; display: block; height: 0; padding: 0; overflow: visible; border: 0; background: none; box-shadow: none; }
  .app.mshell .statusbar > :not(.generation-queue-anchor), .app.mshell .generation-queue-anchor > :not(.generation-queue-panel) { display: none; }
  .app.mshell .generation-queue-panel { position: fixed; top: auto; right: 0; bottom: 0; left: 0; width: auto; max-height: 75dvh; padding: 8px 12px calc(16px + env(safe-area-inset-bottom)); border: 0; border-top: 1px solid var(--line); border-radius: 16px 16px 0 0; background: #07100b; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .6); animation: none; }
  .app.mshell .generation-queue-panel::before { content: ""; align-self: center; flex: none; width: 36px; height: 4px; margin: 0 0 8px; border-radius: 2px; background: rgba(255, 255, 255, .2); }
  .app.mshell .generation-queue-head { padding: 8px 6px 12px; font-size: 13px; }
  .app.mshell .generation-queue-head small { font-size: 10px; }
  .app.mshell .activity-row { min-height: 56px; }
  .app.mshell .generation-notice { display: none !important; }
  .app.mshell[data-theme="light"] .generation-queue-panel { background: #f6faf8; }
}

/* ---------- Drawer toggle, image lightbox ---------- */
.ms-lightbox { display: none; }
@media (max-width: 979px) {
  /* The rail starts with the toggle, right where the header's menu button sits. */
  .ms-rail-close { margin-bottom: 4px; color: var(--ink); }
  .app.mshell.ms-viewer .toolgrid > .canvas img { cursor: zoom-in; }
  .app.mshell .ms-lightbox:not([hidden]) { position: fixed; z-index: 400; inset: 0; display: block; background: #000; }
  .ms-lightbox-close { position: absolute; z-index: 2; top: calc(10px + env(safe-area-inset-top)); left: 12px; background: rgba(0, 0, 0, .55); color: #fff; }
  .ms-lightbox-stage { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: auto; overscroll-behavior: contain; }
  .ms-lightbox-stage img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; }
  .ms-lightbox.is-zoomed .ms-lightbox-stage { display: block; }
  .ms-lightbox.is-zoomed .ms-lightbox-stage img { max-width: none; max-height: none; cursor: zoom-out; }
}

/* Phones draw no frosted glass, so translucent menus showed what was under them (the Standard button's green). */
@media (max-width: 979px) {
  .app .create-workspace-options { background: #0a140f; }
  .app[data-theme="light"] .create-workspace-options { background: #fff; }
}
@media (max-width: 979px) {
  /* The voice viewer already shows the script above; the sidebar keeps only its Reuse button. */
  .app.mshell.ms-viewer .image-details-sidebar .image-record-section:has(> [data-voice-action="reuse"]) > :not([data-asset-action]) { display: none; }
}
@media (max-width: 979px) {
  /* Voice Booth: the chosen voice is one compact row; Preview and Change voice are real buttons. */
  .app.mshell .voice-row { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
  .app.mshell .voice-row > .voice-portrait { width: 44px; height: 44px; border-radius: 50%; }
  .app.mshell .voice-row-meta { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 4px; }
  .app.mshell .voice-row-meta > strong { overflow: hidden; color: var(--ink-bright); font: 700 13px/16px var(--font-mono); white-space: nowrap; text-overflow: ellipsis; }
  .app.mshell .voice-row-meta > span { display: -webkit-box; overflow: hidden; color: var(--ink-dim); font: 400 11px/16px var(--font-mono); -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .app.mshell .voice-row-play { display: grid; width: 44px; height: 44px; flex: none; place-items: center; border: 1px solid rgba(16, 185, 129, .5); border-radius: 50%; color: var(--accent-bright); background: var(--accent-bg); }
  .app.mshell .voice-row-play .icon { width: 16px; height: 16px; }
  .app.mshell .voice-row-play[aria-pressed="true"] { color: #022c1c; background: var(--accent); }
  .app.mshell .voice-row-play:disabled { border-color: var(--line); color: var(--ink-faint); background: none; }
  .app.mshell .voice-row-change { display: flex; width: 100%; height: 40px; align-items: center; justify-content: center; gap: 8px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: none; font: 700 12px/16px var(--font-mono); cursor: pointer; }
  .app.mshell .voice-row-change .icon { width: 14px; height: 14px; }
  .app.mshell .voice-row-change[aria-expanded="true"] { border-color: rgba(16, 185, 129, .5); color: var(--accent-bright); }
}
@media (max-width: 979px) {
  /* Slide-out panels (voice list, script, lyrics) open from the sheet, so they cover it, below the header. */
  .app.mshell .lyrics-slideout-drawer.open { position: fixed; z-index: 210; inset: calc(56px + env(safe-area-inset-top)) 0 0; width: auto; padding-bottom: env(safe-area-inset-bottom); border: 0; background: #07100b; }
  .app.mshell[data-theme="light"] .lyrics-slideout-drawer.open { background: #f6faf8; }
}
@media (max-width: 979px) {
  /* Expand (script, lyrics) and the other small header buttons: thumb-sized on phones. */
  .app.mshell .controls.ms-open .lyrics-expand-btn { height: 28px; gap: 6px; padding: 0 10px; border-radius: 6px; font-size: 12px; line-height: 16px; letter-spacing: 0; }
  .app.mshell .controls.ms-open .lyrics-expand-btn .icon { width: 12px; height: 12px; }
}
@media (max-width: 979px) {
  /* Rails show only what works: Soon tools wait for desktop. */
  .app.mshell .studio-rail-btn:has(> .studio-rail-soon) { display: none; }
  /* The Image Editor is desktop-only for now, so nothing on a phone opens it. */
  .app.mshell [data-vault-open-in="image-editor"] { display: none; }
}

@media (max-width: 979px) {
  /* A Vault item opens in the same viewer as a studio item: the picture on black, its sidebar below, the bar at the bottom. */
  .app.mshell.ms-viewer[data-view="library"] .vault-toolgrid, .app.mshell.ms-viewer[data-view="library"] .vault-main { background: #000; }
  .app.mshell.ms-viewer[data-view="library"] .vault-intake-sidebar { padding: 16px; border: 0; background: transparent; }
  /* Move to Workspace: the studio's menu as a sheet. */
  .ms-pick { display: none; }
  .app.mshell .ms-pick:not([hidden]) { position: fixed; z-index: 300; inset: 0; display: flex; align-items: flex-end; background: rgba(0, 0, 0, .6); }
  .ms-pick-sheet { width: 100%; max-height: 75dvh; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); border-radius: 16px 16px 0 0; background: #07100b; }
  .ms-pick-list { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; }
  .ms-pick-row { display: flex; width: 100%; height: 48px; align-items: center; gap: 12px; padding: 0 12px; border: 0; border-radius: 8px; color: var(--ink); background: none; font: 400 13px/16px var(--font-body); text-align: left; cursor: pointer; }
  .ms-pick-row > span:not([class]) { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .ms-pick-row .workspace-tile { width: 24px; height: 24px; flex: none; border-radius: 6px; }
  .ms-pick-row .icon { width: 16px; height: 16px; flex: none; }
  .ms-pick-row:disabled { color: var(--accent-bright); cursor: default; }
  .ms-pick-row:active:not(:disabled) { background: rgba(255, 255, 255, .06); }
  .app.mshell[data-theme="light"] .ms-pick-sheet { background: #f6faf8; }
}
@media (max-width: 979px) {
  /* Vault Move from the phone sheet: its dialog only shows to report an error. */
  .app.mshell.ms-quiet-move #move-vault-asset-modal-overlay:not(:has(.rename-modal-error:not(:empty))) { display: none; }
}
@media (max-width: 979px) {
  /* The viewer's title renames the item; the pencil says so. */
  .ms-rename { display: flex; height: 36px; align-items: center; gap: 8px; margin: 0; border: 0; background: none; text-align: left; cursor: pointer; }
  .ms-rename > span:not([class]) { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .ms-rename .icon { width: 12px; height: 12px; flex: none; color: var(--ink-dim); }
}