/* Browser edition corrections – appended last to override legacy theme rules. */
:root{scrollbar-gutter:stable}
.workspace{min-height:0!important;overflow:hidden!important}
.workspace :is(.media-panel,.style-panel){min-width:0!important;min-height:0!important;max-height:100%;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior-y:contain;scrollbar-width:thin;scrollbar-color:#8668aa #17131e;scroll-padding-top:64px;-webkit-overflow-scrolling:touch}
.workspace .media-panel > *, .workspace .style-panel > *{min-width:0;max-width:100%}
.workspace :is(.media-panel,.style-panel) :is(details,.workspace-section,.auto-content15,.section-body){max-width:100%;box-sizing:border-box}
/* AutoCuts' old details container clipped all lower controls and export variants. */
.workspace #autoCut15{overflow:visible!important;min-height:0;max-height:none!important}
.workspace #autoCut15[open]>.auto-content15{display:block!important;overflow:visible!important;max-height:none!important;min-height:0;padding-bottom:28px}
.workspace #autoCut15 :is(.auto-batch15,.variant-options21,.auto-source15,.fields15,#autoAssets15){min-height:0;max-width:100%;overflow-wrap:anywhere}
.workspace #autoCut15 :is(input,select,button){max-width:100%;box-sizing:border-box}
.workspace #autoCut15 #autoAssets15{max-height:230px;overflow-y:auto;overscroll-behavior:contain}
/* Keep template browsing scrollable without hiding controls in the surrounding panel. */
:root[data-theme=autolyrical-v2][data-tool-v2=style] .media-panel{overflow-y:auto!important}
:root[data-theme=autolyrical-v2][data-tool-v2=style] .ux-templates34[data-v2-visible=true]{overflow:visible!important;flex-shrink:0}
:root[data-theme=autolyrical-v2][data-tool-v2=style] .ux-template-catalog34{overflow:visible!important;flex-shrink:0}
:root[data-theme=autolyrical-v2][data-tool-v2=style] .ux-templates34 .template-list{overflow-y:auto!important;max-height:min(54dvh,570px)!important;min-height:150px}
/* Timeline is a real collapsible region. Nothing is removed from the DOM. */
#toggleTimelineWeb{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:32px;padding:6px 11px;border:1px solid #665779;border-radius:8px;background:#231c30;color:#f4eafb;font:inherit;font-size:12px;cursor:pointer;white-space:nowrap;margin-left:8px}
#toggleTimelineWeb:hover{background:#3b2d50;border-color:#a78dc7}
#toggleTimelineWeb:focus-visible{outline:2px solid #d8fc83;outline-offset:2px}
.timeline-panel.timeline-collapsed{min-height:0!important;padding-bottom:0!important}
.timeline-panel.timeline-collapsed > :not(.timeline-head){display:none!important}
.timeline-panel.timeline-collapsed .timeline-tools{display:none!important}
.timeline-panel.timeline-collapsed .timeline-head{min-height:46px!important;margin-bottom:0!important;align-items:center}
:root[data-web-timeline-collapsed=true] .workspace{height:calc(100dvh - 175px)!important;min-height:360px!important}
@media (max-width:1000px){.workspace{overflow:visible!important}.workspace :is(.media-panel,.style-panel){max-height:min(72dvh,760px)!important;overflow-y:auto!important}:root[data-web-timeline-collapsed=true] .workspace{height:auto!important}}
@media (max-height:650px) and (min-width:1001px){:root[data-web-timeline-collapsed=true] .workspace{min-height:280px!important}}

/* Keep the existing editor UI; only make desktop panels accessible at small heights. */
@media (max-height:780px) { .media-panel, .styles-panel, .right-panel, .side-panel { min-height:0; overflow-y:auto; } }



.groq-owner-settings{margin:14px 0;padding:14px;border:1px solid rgba(174,147,220,.38);border-radius:12px;background:rgba(115,73,168,.06)}
.groq-owner-settings summary{font-weight:650;cursor:pointer;letter-spacing:.01em;padding:3px 0}
.groq-owner-settings label{display:block;margin:12px 0 8px}
.groq-owner-settings input{width:100%;max-width:100%;box-sizing:border-box;margin-top:5px}
.groq-owner-settings #groqOwnerSave{width:100%;margin-top:11px}
.groq-owner-status{font-size:13px;margin:9px 0;color:inherit}


/* 2026-10-31 review fixes: timeline stays accessible at laptop resolutions.
   Scope to the normal desktop workspace. Do not override intentional Lyrics Focus mode.
   Keep original controls; lower-priority tools remain reachable by scrolling the timeline. */
@media (min-width:1001px) {
  :root[data-theme="autolyrical-v2"] body { height:100dvh; overflow:hidden; }
  :root[data-theme="autolyrical-v2"] .app-shell {
    display:flex!important; flex-direction:column!important;
    height:100dvh!important; min-height:0!important; overflow:hidden!important;
  }
  :root[data-theme="autolyrical-v2"] .topbar { flex:0 0 auto; }
  :root[data-theme="autolyrical-v2"] .workspace,
  :root[data-theme="autolyrical-v2"][data-tool-v2="style"] .workspace,
  :root[data-theme="autolyrical-v2"][data-tool-v2="lyrics"] .workspace {
    flex:1 1 0!important; height:auto!important; min-height:0!important;
    max-height:none!important; overflow:hidden!important;
  }
  :root[data-theme="autolyrical-v2"] .preview-column,
  :root[data-theme="autolyrical-v2"] .stage-wrap { min-height:0!important; }
  :root[data-theme="autolyrical-v2"] .timeline-panel {
    display:flex; flex-direction:column; flex:0 0 clamp(252px,35dvh,410px);
    min-height:0!important; max-height:55dvh; overflow-x:hidden; overflow-y:auto;
    overscroll-behavior-y:contain; scrollbar-width:thin;
  }
  :root[data-theme="autolyrical-v2"] .timeline-head {
    position:sticky; top:0; z-index:6; flex:0 0 auto;
    min-height:46px!important; margin-bottom:0;
  }
  :root[data-theme="autolyrical-v2"] .timeline-head .timeline-tools {
    min-width:0; overflow-x:auto; overflow-y:hidden; flex-wrap:nowrap;
    scrollbar-width:thin;
  }
  :root[data-theme="autolyrical-v2"] .timeline-grid {
    flex:0 0 auto; min-height:170px; overflow:auto;
  }
  :root[data-theme="autolyrical-v2"] .timeline-panel :is(.range-toolbar,.track-toolbar,.new-layer-drop,.lyrics-editor) {
    flex:0 0 auto;
  }
  :root[data-theme="autolyrical-v2"] .timeline-panel.timeline-collapsed {
    flex:0 0 47px!important; max-height:47px!important;
    overflow:hidden!important; min-height:0!important;
  }
  /* Lyrics Focus is an intentional full-screen reading mode, not the default editor. */
  :root[data-theme="autolyrical-v2"][data-lyrics-focus34="true"] .timeline-panel { display:none!important; }
}
@media (min-width:1001px) and (max-height:680px) {
  :root[data-theme="autolyrical-v2"] .timeline-panel:not(.timeline-collapsed) {
    flex-basis:220px; max-height:48dvh;
  }
}
@media (max-width:1000px) {
  /* Small screens can scroll naturally without clipping editor controls. */
  :root[data-theme="autolyrical-v2"] body,
  :root[data-theme="autolyrical-v2"] .app-shell { height:auto; min-height:100dvh; overflow:visible; }
}

/* [hidden] must win over the visual empty-state rule in usability34.css. */
.empty-stage[hidden] { display:none!important; }
#notice[hidden] { display:none!important; }
:root[data-theme="autolyrical-v2"] .notice { min-height:38px; align-items:center; }
:root[data-theme="autolyrical-v2"] .notice .notice-close {
  flex:0 0 auto; margin-left:auto; padding:2px 7px; min-height:28px;
  border:1px solid var(--line); border-radius:6px; background:transparent;
  color:var(--text); font-size:17px; line-height:1;
}
:root[data-theme="autolyrical-v2"] .notice[data-kind="error"] { border-color:rgba(255,126,155,.52); }