/* 0.30.0 owns the final phone, tablet, and desktop boundaries. */
:root {
  --creator-phone-nav-height: 58px;
  --creator-tablet-header-height: 42px;
  --creator-tablet-nav-height: 38px;
}

.editor-mobile-rail { display: none; }

/* Tablet: retain the desktop workflow, with panels presented as drawers. */
@media (min-width: 768px) and (max-width: 1100px) {
  body.desktop-studio .studio-container {
    grid-template-rows: var(--creator-tablet-header-height) var(--creator-tablet-nav-height) minmax(0, 1fr) !important;
  }

  .studio-container > .dock-topbar {
    display: flex !important;
    min-width: 0;
    height: var(--creator-tablet-header-height);
    padding: 4px 8px;
    gap: 6px;
  }

  .studio-container .dock-top-actions {
    min-width: 0;
    max-width: 72vw;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  .studio-container .dock-top-actions::-webkit-scrollbar,
  .studio-container .studio-page-nav::-webkit-scrollbar {
    display: none;
  }

  .studio-container .dock-top-actions > *,
  .studio-container .dock-top-actions button,
  .studio-container .dock-mode-label {
    flex: 0 0 auto;
  }

  .studio-container > .studio-page-nav {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(82px, 1fr));
    grid-row: 2;
    height: var(--creator-tablet-nav-height);
    padding: 4px 8px;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .studio-container .studio-page-nav button {
    width: 100%;
    height: 30px;
    min-height: 30px;
  }

  .studio-container > .studio-mobile-tools {
    display: none !important;
  }

  body.desktop-studio .studio-container .studio-main-workarea,
  .studio-container #dockPages {
    grid-row: 3 !important;
    grid-column: 1;
  }

  body.desktop-studio .studio-container .studio-main-workarea {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
    max-width: 100%;
  }

  .studio-container .dock-top-actions [data-dock-drawer="library"],
  .studio-container .dock-top-actions [data-dock-drawer="inspector"] {
    display: block !important;
  }

  .studio-container #dockLibrary,
  .studio-container #dockInspector {
    position: fixed !important;
    z-index: 80;
    top: calc(var(--creator-tablet-header-height) + var(--creator-tablet-nav-height));
    bottom: 0;
    display: none !important;
    width: min(380px, 46vw) !important;
    max-width: 92vw;
    box-shadow: 0 18px 52px rgba(0, 0, 0, .58);
  }

  .studio-container #dockLibrary { left: 0; right: auto; }
  .studio-container #dockInspector { right: 0; left: auto; }
  .studio-container[data-drawer="library"] #dockLibrary,
  .studio-container[data-drawer="inspector"] #dockInspector { display: flex !important; }
  .studio-container .dock-panel-close { display: grid !important; place-items: center; }

  body.desktop-studio .studio-container[data-page="create"] {
    grid-template-rows: var(--creator-tablet-header-height) var(--creator-tablet-nav-height) minmax(0, 1fr) 8px clamp(180px, var(--timeline-height, 250px), min(48dvh, 460px)) !important;
  }

  .studio-container[data-page="create"] .studio-page-nav { grid-row: 2 !important; }
  .studio-container[data-page="create"] .studio-main-workarea { grid-row: 3 !important; }
  .studio-container[data-page="create"] #timelineResizeHandle { grid-row: 4 !important; }
  .studio-container[data-page="create"] #dockTimeline { grid-row: 5 !important; }
  .studio-container[data-page="create"] #dockTimeline > .timeline-dock { height: 100% !important; }
  .studio-container[data-page="create"] #dockLibrary,
  .studio-container[data-page="create"] #dockInspector { bottom: calc(clamp(180px, var(--timeline-height, 250px), min(48dvh, 460px)) + 8px); }

  body.desktop-studio .studio-container:is([data-page="studio"], [data-page="live"]) {
    grid-template-rows: var(--creator-tablet-header-height) var(--creator-tablet-nav-height) minmax(0, 1fr) !important;
  }

  .studio-container:is([data-page="studio"], [data-page="live"]) .studio-main-workarea { grid-row: 3 !important; }
  .studio-container:is([data-page="studio"], [data-page="live"]) #dockRecordWell { padding: 0 !important; }
  .studio-container:is([data-page="studio"], [data-page="live"]) #dockInspector { top: calc(var(--creator-tablet-header-height) + var(--creator-tablet-nav-height)); bottom: 0; }

  #dockPages > .dock-pane { padding: clamp(14px, 2.3vw, 26px); }
  #dock-pane-home .hero-copy h1 { font-size: clamp(34px, 5vw, 52px); }
  #dock-pane-home .loop-orbit { height: 330px; }
  #dock-pane-prompts .ai-console-layout { display: grid !important; grid-template-columns: minmax(180px, 28%) minmax(0, 1fr); }
  #dock-pane-prompts .dock-ai-history { order: initial; }
  #dock-pane-prompts .ai-console { min-height: 0 !important; }
}

/* Phone: full-bleed capture and one consistent, scrollable navigation rail. */
@media (max-width: 767px) {
  body.desktop-studio .studio-container:not([data-page="studio"]):not([data-page="live"]) {
    width: 100vw;
    max-width: 100vw;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) calc(var(--creator-phone-nav-height) + env(safe-area-inset-bottom)) !important;
    padding: env(safe-area-inset-top) 0 0 !important;
    overflow: hidden;
  }

  .studio-container:not([data-page="studio"]):not([data-page="live"]) > .dock-topbar,
  .studio-container:not([data-page="studio"]):not([data-page="live"]) > .studio-page-nav {
    display: none !important;
  }

  .studio-container > .studio-mobile-tools {
    display: flex !important;
    grid-row: 2 !important;
    grid-column: 1;
    align-items: stretch;
    width: 100vw !important;
    height: calc(var(--creator-phone-nav-height) + env(safe-area-inset-bottom)) !important;
    padding: 3px max(6px, env(safe-area-inset-right)) calc(3px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
    gap: 2px;
    overflow-x: auto !important;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .studio-container > .studio-mobile-tools::-webkit-scrollbar { display: none; }

  .studio-container .studio-mobile-tools button {
    flex: 0 0 clamp(60px, 17vw, 74px);
    width: auto;
    min-width: 60px;
    height: 52px;
    min-height: 52px;
    padding: 3px 5px;
    border-radius: 9px;
    scroll-snap-align: center;
  }

  .studio-container .studio-mobile-tools button[aria-current="page"] {
    background: #18364a;
    color: #8fd9ff;
    box-shadow: inset 0 2px #38adf8;
  }

  .studio-container .studio-mobile-tools b { font-size: 17px; }
  .studio-container .studio-mobile-tools span { display: block; font-size: 9px; overflow: visible; }

  .studio-container:not([data-page="create"]) #dockPages {
    grid-row: 1 !important;
    grid-column: 1;
    width: 100%;
    min-width: 0;
  }

  #dockPages > .dock-pane {
    width: 100%;
    min-width: 0;
    padding: clamp(10px, 3.5vw, 18px);
    padding-bottom: 20px;
    overflow-x: hidden;
  }

  #dockPages .view,
  #dockPages :is(article, section, form, details) { min-width: 0; max-width: 100%; }
  #dockPages .page-title h1 { font-size: clamp(25px, 8vw, 34px); overflow-wrap: anywhere; }

  body.desktop-studio .studio-container[data-page="create"]:not([data-page="studio"]):not([data-page="live"]) {
    grid-template-rows: minmax(0, 1fr) 18px clamp(25dvh, var(--timeline-height, 32dvh), 60dvh) calc(var(--creator-phone-nav-height) + env(safe-area-inset-bottom)) !important;
  }

  .studio-container[data-page="create"] .studio-main-workarea,
  .studio-container[data-page="create"] .dock-monitor,
  .studio-container[data-page="create"] #dockEditMonitor,
  .studio-container[data-page="create"] #dockPreviewWell {
    grid-row: 1;
    grid-column: 1;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .studio-container[data-page="create"] #timelineResizeHandle { grid-row: 2 !important; }
  .studio-container[data-page="create"] #dockTimeline { grid-row: 3 !important; width: 100% !important; }
  .studio-container[data-page="create"] > .studio-mobile-tools { grid-row: 4 !important; }
  .studio-container[data-page="create"] #dockTimeline > .timeline-dock { height: 100% !important; }
  .studio-container[data-page="create"] #timelineResizeHandle {
    height: 18px !important;
    touch-action: none;
    background: rgba(19, 23, 29, .96);
    cursor: ns-resize;
  }
  .studio-container[data-page="create"] #timelineResizeHandle i { width: 66px; height: 5px; border-radius: 999px; background: #8b98a8; box-shadow: 0 0 0 1px rgba(0,0,0,.7); }
  .studio-container[data-page="create"] #timelineResizeHandle.dragging { background: rgba(29,64,84,.98); }
  .studio-container[data-page="create"] #timelineResizeHandle.dragging i { background: #64c8ff; box-shadow: 0 0 14px rgba(56,173,248,.65); }
  .studio-container[data-page="create"] #timelineResizeHandle span { display: none; }

  .studio-container[data-page="create"] .dock-monitor > .dock-panel-header { display: none !important; }

  .studio-container[data-page="create"] .studio-main-workarea { position: relative; }
  .studio-container[data-page="create"] .editor-mobile-rail {
    position: absolute;
    z-index: 10;
    top: 20%;
    right: max(12px, env(safe-area-inset-right));
    display: flex;
    width: 60px;
    max-height: 72%;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 8px;
    overflow-y: auto;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 16px;
    background: rgba(18,18,18,.55);
    box-shadow: 0 10px 30px rgba(0,0,0,.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    scrollbar-width: none;
  }
  .studio-container[data-page="create"] .editor-mobile-rail::-webkit-scrollbar { display: none; }
  .studio-container[data-page="create"] .editor-mobile-rail button {
    display: grid;
    min-width: 42px;
    width: 44px;
    min-height: 42px;
    height: 42px;
    place-items: center;
    align-content: center;
    gap: 0;
    padding: 2px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: #fff;
  }
  .studio-container[data-page="create"] .editor-mobile-rail button:active { background: rgba(56,173,248,.22); }
  .studio-container[data-page="create"] .editor-mobile-rail b { color: #fff; font-size: 16px; line-height: 1; }
  .studio-container[data-page="create"] .editor-mobile-rail span { font-size: 7px; font-weight: 800; line-height: 1.2; }

  .studio-container[data-page="create"] > .studio-mobile-tools { overflow: hidden !important; }
  .studio-container[data-page="create"] > .studio-mobile-tools button:not([data-mobile-module="create"]):not([data-mobile-module="studio"]):not([data-mobile-module="live"]):not([data-mobile-module="prompts"]) { display: none !important; }
  .studio-container[data-page="create"] > .studio-mobile-tools button {
    flex: 1 1 25%;
    min-width: 0;
    max-width: none;
  }
  .studio-container[data-page="create"] .editor-playback-bar {
    grid-template-columns: 40px 40px 40px auto minmax(54px, 1fr) auto;
    height: 48px;
    padding: 4px 7px;
    gap: 4px;
    background: rgba(22,24,29,.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .studio-container[data-page="create"] .editor-playback-bar button { min-width: 40px; width: 40px; min-height: 40px; height: 40px; padding: 0; }
  .studio-container[data-page="create"] .editor-playback-bar #editorRestartButton { display: none !important; }
  .studio-container[data-page="create"] .editor-playback-bar :is(#editorUndoButton,#editorRedoButton) { display: grid; place-items: center; border-radius: 10px; font-size: 19px; }
  .studio-container[data-page="create"] .editor-playback-bar :is(#editorUndoButton,#editorRedoButton) span { display: none; }
  .studio-container[data-page="create"] .editor-playback-bar #editorMuteButton { display: none !important; }
  .studio-container[data-page="create"] .timeline-toolbar {
    min-width: 0;
    border-bottom: 1px solid rgba(255,255,255,.14);
    background: rgba(25,28,34,.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .studio-container[data-page="create"] .timeline-tools { width: max-content; }
  .studio-container[data-page="create"] .timeline-scroll { scroll-behavior: smooth; overscroll-behavior-x: contain; }
  .studio-container[data-page="create"] .timeline-track-label {
    border-right: 1px solid rgba(255,255,255,.16);
    background: #111820;
    color: #fff;
  }
  .studio-container[data-page="create"] .timeline-track-label b { color: #79ccff; text-shadow: 0 1px 8px rgba(56,173,248,.28); }

  .studio-container[data-page="create"] #dockLibrary,
  .studio-container[data-page="create"] #dockInspector {
    position: fixed !important;
    z-index: 85;
    top: auto !important;
    right: 0 !important;
    bottom: calc(var(--creator-phone-nav-height) + env(safe-area-inset-bottom)) !important;
    left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: min(58dvh, 520px) !important;
    max-height: min(58dvh, 520px) !important;
    border-radius: 20px 20px 0 0 !important;
  }

  .studio-container[data-page="create"] .dock-panel-close { display: grid !important; place-items: center; }

  .studio-container[data-page="studio"] .recorder-overlay-top {
    padding-right: max(14px, env(safe-area-inset-right)) !important;
    padding-left: max(14px, env(safe-area-inset-left)) !important;
  }

  .studio-container[data-page="studio"] .recorder-overlay-right-rail {
    right: max(12px, env(safe-area-inset-right)) !important;
    width: 58px;
  }

  .studio-container[data-page="studio"] .recorder-settings-icon { right: max(14px, env(safe-area-inset-right)); }
  .studio-container[data-page="studio"] .recorder-close-button { left: max(14px, env(safe-area-inset-left)); }
  .studio-container[data-page="studio"] .recorder-sound-prompt-pill { max-width: calc(100vw - 136px); }

  .studio-container[data-page="live"] .live-top-bar {
    right: max(12px, env(safe-area-inset-right)) !important;
    left: max(12px, env(safe-area-inset-left)) !important;
  }

  .studio-container[data-page="live"] .live-bottom-dock {
    right: max(10px, env(safe-area-inset-right)) !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    left: max(10px, env(safe-area-inset-left)) !important;
    width: auto;
  }

  .studio-container[data-page="live"] .live-chat-feed { max-width: min(86vw, 390px); }
  .studio-container[data-page="live"] .live-action-bar { min-width: 0; }
  .studio-container[data-page="live"] .chat-input-pill { min-width: 0; }
  .studio-container[data-page="live"] .live-action-buttons { flex: 0 0 auto; }
}

@media (max-width: 767px) and (orientation: landscape) {
  .studio-container[data-page="studio"] .recorder-overlay-right-rail {
    top: calc(env(safe-area-inset-top) + 56px) !important;
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 68px);
    gap: 3px;
    padding: 5px;
  }

  .studio-container[data-page="studio"] .recorder-overlay-right-rail button { min-height: 38px; height: 38px; }
  .studio-container[data-page="studio"] .recorder-overlay-right-rail b { font-size: 18px; }
  .studio-container[data-page="live"] .live-chat-feed { max-height: 28dvh; }
}