/* Responsive additions to the recovered CueStudio build. */
.mobile-studio-nav { display: none; }

@media (max-width: 980px) {
  html[data-mobile-studio] { background: #181818; }
  html[data-mobile-studio] body { overscroll-behavior-y: none; }
  html[data-mobile-studio] .studio-shell {
    display: flex;
    flex-direction: column;
    gap: 0;
    height: var(--studio-mobile-height, 100dvh);
    min-height: 0;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) calc(72px + env(safe-area-inset-bottom)) env(safe-area-inset-left);
    overflow: hidden;
    background: #181818;
  }
  html[data-mobile-studio] .studio-header {
    flex: 0 0 auto;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 58px;
    padding: 8px 16px;
    border-radius: 0;
  }
  html[data-mobile-studio] .studio-header .wordmark { font-size: 18px; }
  html[data-mobile-studio] .session-code { display: none; }
  html[data-mobile-studio] .connection-badge { max-width: 48vw; padding: 8px; font-size: 10px; overflow-wrap: anywhere; }
  html[data-mobile-studio] .session-expiry-warning { flex: 0 0 auto; color: #f4f4f2; background: #40331f; font-size: 12px; line-height: 1.5; }
  html[data-mobile-studio] .studio-body {
    position: relative;
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    padding: 8px;
    border-radius: 0;
  }
  html[data-mobile-studio] .studio-body .split-pane { display: contents !important; }
  html[data-mobile-studio] .studio-body .splitter { display: none; }
  html[data-mobile-studio] .studio-body .pane {
    display: flex;
    position: absolute;
    inset: 8px;
    height: auto;
    min-height: 0;
    visibility: hidden;
    pointer-events: none;
  }
  html[data-mobile-studio="camera"] .studio-body .preview-pane,
  html[data-mobile-studio="script"] .studio-body .script-pane,
  html[data-mobile-studio="prompt"] .studio-body .teleprompter-pane,
  html[data-mobile-studio="controls"] .studio-body .control-rail { visibility: visible; pointer-events: auto; }
  html[data-mobile-studio] .script-card { padding: 16px; min-height: 0; overflow-y: auto; }
  html[data-mobile-studio] .panel-heading { flex-wrap: wrap; gap: 8px; }
  html[data-mobile-studio] .panel-heading h2 { white-space: normal; font-size: clamp(20px, 5vw, 26px); line-height: 1.15; }
  html[data-mobile-studio] .panel-heading .rail-label { font-size: 10px; }
  html[data-mobile-studio] .draft-status,
  html[data-mobile-studio] .prompt-state { text-align: left; font-size: 10px; }
  html[data-mobile-studio] .script-field { flex: 1 0 160px; min-height: 160px; }
  html[data-mobile-studio] .script-field textarea { font-size: 16px; padding: 12px; min-height: 160px; }
  html[data-mobile-studio] .script-footnote { margin-top: 10px; line-height: 1.5; }
  html[data-mobile-studio] .teleprompter-card {
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 12px;
    overflow-y: auto;
  }
  html[data-mobile-studio] .teleprompter-card > * { flex-shrink: 0; }
  html[data-mobile-studio] .prompt-viewport { flex: 1 0 180px; min-height: 180px; }
  html[data-mobile-studio] .prompt-copy { padding-inline: 18px; }
  html[data-mobile-studio] .prompt-empty { padding: 16px; }
  html[data-mobile-studio] .prompt-empty b { font-size: 20px; }
  html[data-mobile-studio] .mode-switch { width: 100%; }
  html[data-mobile-studio] .mode-switch button { min-width: 0; min-height: 44px; padding: 8px; }
  html[data-mobile-studio] .prompt-controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  html[data-mobile-studio] .transport-controls { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  html[data-mobile-studio] .transport-controls button { min-height: 44px; padding: 8px 4px; }
  html[data-mobile-studio] kbd { display: none; }
  html[data-mobile-studio] input[type="range"] { min-height: 32px; }
  html[data-mobile-studio] .control-rail { padding: 18px; gap: 22px; overflow-y: auto; overscroll-behavior: contain; }
  html[data-mobile-studio] .control-rail .button,
  html[data-mobile-studio] .record-button,
  html[data-mobile-studio] .mirror-toggle { min-height: 48px; width: 100%; }
  html[data-mobile-studio] .pairing-state { padding: 24px 16px 70px; overflow-y: auto; align-content: center; }
  html[data-mobile-studio] .pairing-state h1 { white-space: normal; font-size: 24px; }
  html[data-mobile-studio] .pairing-state .qr-frame { max-width: 100%; margin-bottom: 20px; }
  html[data-mobile-studio] .qr-frame svg,
  html[data-mobile-studio] .qr-frame canvas { display: block; max-width: 100%; height: auto; }
  html[data-mobile-studio] .preview-meta { left: 12px; right: 12px; bottom: 12px; gap: 8px; }
  html[data-mobile-studio] .preview-meta span { min-width: 0; overflow-wrap: anywhere; }
  html[data-mobile-studio] .mobile-studio-nav:not([hidden]) {
    position: fixed;
    z-index: 20;
    left: 0;
    right: 0;
    bottom: var(--studio-mobile-bottom, 0px);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    min-height: 72px;
    padding: 7px max(8px, env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    border-top: 1px solid #454545;
    background: #202020;
  }
  .mobile-studio-nav button {
    min-width: 0;
    min-height: 56px;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 6px 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #b6b6b3;
    background: transparent;
    font: 500 11px/1.2 var(--font-sans);
    touch-action: manipulation;
  }
  .mobile-studio-nav button[aria-selected="true"] { color: #dfff2f; background: #dfff2f12; border-color: #dfff2f3b; }
  .mobile-studio-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-studio-nav button[data-recording="true"]::after { content: ""; position: absolute; width: 6px; height: 6px; margin: -24px 0 0 30px; background: #ff806b; border-radius: 50%; }
  html[data-mobile-studio][data-mobile-editor] .studio-shell { padding-bottom: env(safe-area-inset-bottom); }
  html[data-mobile-studio][data-mobile-editor] .studio-body { overflow-y: auto; }
  html[data-mobile-studio][data-mobile-editor] .editor-host { height: auto; overflow: visible; }
  html[data-mobile-studio][data-mobile-editor] .clip-editor { height: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(300px, 55dvh) auto auto; }
  html[data-mobile-studio][data-mobile-editor] .clip-editor .pane { display: flex; position: static; visibility: visible; pointer-events: auto; height: auto; }
  html[data-mobile-studio][data-mobile-editor] .clip-editor .clip-editor__stage { display: grid; }
  html[data-mobile-studio] .clip-editor__toolbar { flex-wrap: wrap; gap: 12px; padding: 10px; }
  html[data-mobile-studio] .clip-editor__title h2 { white-space: normal; font-size: 18px; }
  html[data-mobile-studio] .clip-editor__rail { padding: 16px; overflow: visible; }
  html[data-mobile-studio] .clip-editor__field select,
  html[data-mobile-studio] .clip-editor__field input[type="text"] { font-size: 16px; min-height: 44px; }
  html[data-mobile-studio] .clip-editor .button,
  html[data-mobile-studio] .clip-editor__check { min-height: 44px; }
  html[data-mobile-studio] .trim-track { margin-inline: 12px; }
  html[data-mobile-studio] .trim-handle::after { content: ""; position: absolute; inset: -2px -10px; }
  html[data-mobile-studio] .clip-editor__badge { top: 8px; padding: 5px 7px; font-size: 9px; max-width: 46%; overflow-wrap: anywhere; }
  html[data-mobile-studio] .clip-editor__badge--time { left: 8px; }
  html[data-mobile-studio] .clip-editor__badge--look { right: 8px; }
}

@media (max-width: 980px) and (max-height: 520px) {
  html[data-mobile-studio] .studio-header { min-height: 46px; }
  html[data-mobile-studio] .pairing-state { align-content: start; }
  html[data-mobile-studio] .teleprompter-card { flex: 1 1 auto; }
}