/* Mobile editing keeps the canvas, transport, tracks and tool dock in view. */
.mobile-editor-home,.mobile-projects,.transport-time,.clip-filmstrip,.clip-duration,.mobile-nav-label{display:none}
@media(max-width:800px){
 body,body.selection-tools{--editor-header-height:48px;--mobile-dock-height:calc(76px + env(safe-area-inset-bottom));--timeline-label-width:34px}
 body.selection-tools{--editor-header-height:92px}
 .header{height:var(--editor-header-height);position:relative;z-index:13;box-shadow:none}
 .header-main,.selection-tools .header-main{display:grid;grid-template-columns:44px 44px minmax(0,1fr) 44px;grid-template-rows:48px;height:var(--editor-header-height);min-height:var(--editor-header-height);padding:0 8px;gap:0}
 .selection-tools .header-main{grid-template-rows:48px 44px}
 .header-main .logo,.header-main .project-heading{display:none}
 .mobile-editor-home,.mobile-projects{display:flex;width:44px;height:44px;align-self:center;color:#c2d9e4;border-radius:9px;grid-row:1}
 .mobile-editor-home{grid-column:1}.mobile-projects{grid-column:2}.mobile-projects svg{width:23px;height:23px}
 .header-main .header-actions,.selection-tools .header-main .header-actions{grid-column:4;grid-row:1;margin:0}
 .header #exportBtn{width:44px;height:44px;min-height:44px;padding:10px;border:0;background:transparent;box-shadow:none;border-radius:9px;font-size:0}
 .header #exportBtn::after{content:'';width:23px;height:23px;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 16V3m-5 5 5-5 5 5M4 15v6h16v-6' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
 .header-main .header-tools{grid-column:1/-1;grid-row:2;height:44px;padding:0;width:100%;min-width:0}
 .header-tools .context-toolbar{width:100%;height:44px;justify-content:flex-start;gap:4px;border:0;border-top:1px solid #ffffff0c;border-radius:0;padding:2px 4px;background:transparent;box-shadow:none;backdrop-filter:none}
 .header-tools .context-toolbar button{height:40px;min-height:40px;padding:0 13px;font-size:12px;gap:7px}
 .header-tools .context-toolbar .tool-audio{order:1}.header-tools .context-toolbar .tool-speed{order:2}.header-tools .context-toolbar .tool-all{order:3}
 .header-tools .context-toolbar.text-edit-toolbar{padding:2px 4px}
 .header-tools .context-toolbar.text-edit-toolbar>button,.header-tools .text-edit-toolbar select,.header-tools .text-size-control,.header-tools .text-toolbar-color{height:40px;min-height:40px}
 .editor{height:calc(100dvh - var(--editor-header-height) - var(--mobile-dock-height));min-height:0;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 18px var(--timeline-panel-height,232px) 32px}
 .workspace{min-height:0;background:#1d2329}
 .stage-toolbar{height:0;padding:0;position:static}
 .stage-toolbar .crumb{display:none}
 .stage-toolbar .tool-right{position:fixed;top:0;right:56px;height:48px;gap:0;z-index:14}
 .tool-right .icon-button{width:40px!important;height:44px!important}.tool-right .line{display:none}
 .tool-right .format-button{height:44px;min-width:50px;gap:3px;font-size:10px;padding:0 4px}.tool-right .format-button svg{display:none}
 .preview-space{padding:12px 18px 8px;scrollbar-width:none;overscroll-behavior:contain}
 .preview-space::-webkit-scrollbar{display:none}.canvas-wrap{border-radius:2px;outline:0;box-shadow:0 8px 24px #0005}.canvas-wrap:focus-within{outline:1px solid #43d9ff60}
 .playback{height:60px;min-height:60px;padding:0 12px;justify-content:center}
 .playback-left{left:8px}.playback-left #timeDisplay{display:none}
 .playback-left .icon-button{height:44px;width:36px}.playback-left svg{width:18px;height:18px}
 .playback .transport{gap:12px!important;max-width:calc(100% - 88px)}
 .transport #backBtn,.transport #forwardBtn{display:none}
 .transport-time{display:block;min-width:44px;white-space:nowrap;font-size:13px;font-variant-numeric:tabular-nums;text-align:center;color:#9eb3bf}
 .transport-time.play-time{font-weight:700;color:#edf5f9}
 .play-button{width:48px;height:48px;min-width:48px;border:1px solid #ffffff20;background:#303b44;box-shadow:0 3px 12px #0003}.play-button svg{width:23px;height:23px}
 .timeline-resizer{height:18px;min-height:18px;gap:0;background:#222b33;border-bottom:0;border-top:1px solid #ffffff0c}
 .timeline-resizer>span:not(.resize-grip){display:none}.resize-grip{height:3px;width:32px;background:#5f7787}
 .timeline-section{min-height:0;background:#202a32}
 .timeline-toolbar{height:36px;padding:0 8px;gap:8px;background:transparent;border-bottom:0}
 .timeline-title{display:block!important;font-size:10px;font-weight:500;color:#9cb0bd}.timeline-title span{display:none}
 .timeline-edit{gap:3px}.timeline-edit .small-button{height:34px;min-height:34px;font-size:11px;padding:0 9px;background:transparent;border-color:transparent}
 .timeline-edit .icon-button{height:34px;width:34px}.timeline-edit svg{width:17px;height:17px}
 .timeline-scroll{background:transparent;overscroll-behavior:contain;touch-action:pan-x pan-y;scrollbar-width:thin}
 .timeline{margin:0 8px 4px;display:flex;flex-direction:column;min-height:0;padding-bottom:4px}
 .ruler{order:0;height:24px;min-height:24px;margin-left:var(--timeline-label-width);border:0}
 .tick{font-size:9px;top:0;color:#9fb5c2}.tick:after{top:15px;background:#637785;height:5px}
 .track{flex-shrink:0;height:56px;min-height:0;margin-bottom:5px;align-items:stretch}
 .track:has(>[data-track=layer]){order:1;height:auto;min-height:32px}
 .track:has(>[data-track=clip]){order:2}
 .track:has(>[data-track=audio]){order:3;height:32px;margin-bottom:0}
 .track-label{width:var(--timeline-label-width);font-size:0;position:sticky;left:0;z-index:4;justify-content:center;gap:0;background:#202a32;color:#8fa8b7}
 .track-label svg{width:15px;height:15px}
 .track-body{border:0;background:#29343e;border-radius:7px;flex-shrink:0;min-height:0}
 .track-body[data-track=layer]{background:#26313a}
 .clip-block[data-type=clip]{height:54px;top:1px;border-radius:6px;background:#263b47}
 .clip-block[data-type=clip]>img{display:none}.clip-filmstrip{display:block;position:absolute;inset:0;background-size:auto 100%;background-repeat:repeat-x;opacity:.85;pointer-events:none}
 .clip-block[data-type=clip]>.block-name{align-self:flex-end;position:relative;max-width:calc(100% - 36px);padding:3px 5px;background:#15232ccc;color:#e7f5fa;font-size:9px;line-height:1.5;border-radius:0 4px 0 0;pointer-events:none}
 .clip-duration{display:block;position:absolute;right:4px;bottom:2px;font-size:9px;color:#fff;text-shadow:0 1px 3px #000;pointer-events:none}
 .clip-block.text{background:#2f5257;border-radius:5px}.clip-block.caption{background:#28636d}.clip-block.text>.block-name{font-size:10px;color:#d2f4f5;padding:0 7px}
 .clip-block.audio{height:30px;top:1px;background:#4d426a}.clip-block.audio .block-name{font-size:9px;color:#e2d7fa}.waveform{opacity:.65}.waveform i{background:#c4a7e6}
 .empty-track{height:100%;font-size:10px;min-width:100px;padding:0 9px;color:#8ea8b9;background:transparent;white-space:nowrap}
 .track-body[data-track=audio] .empty-track{height:100%;margin:0}
 .timeline-add{width:42px;height:42px;min-width:42px;border-radius:50%;font-size:27px;background:#d6f5fc;color:#143442;border-color:transparent;box-shadow:0 2px 7px #0003}
 .timeline-add-hint{left:58px;font-size:10px}
 .playhead{top:22px;bottom:3px;background:#8be7fc;width:2px}.playhead:before{background:#8be7fc;width:10px;height:10px}
 .zoom-footer{height:32px;gap:7px;padding:0 12px;background:#202a32;border-top:1px solid #ffffff0a}
 .zoom-mode-button{height:30px;min-height:30px;width:32px}.zoom-mode-button svg{width:21px;height:21px}
 .zoom-footer>input[type=range]{width:128px;height:30px}.zoom-percent,.zoom-percent input{font-size:11px;min-height:30px}
 .rail{height:var(--mobile-dock-height);padding:5px 8px calc(5px + env(safe-area-inset-bottom));justify-content:flex-start;align-items:stretch;gap:4px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;background:#252e36;border-top:1px solid #ffffff12;box-shadow:none}
 .rail::-webkit-scrollbar{display:none}
 .rail .nav-item{flex:0 0 76px;min-width:76px;max-width:none;height:64px;min-height:64px;padding:6px 4px;gap:8px;font-size:11px;font-weight:500;border:0;border-radius:9px}
 .nav-item svg{width:25px;height:25px}.rail .nav-item.active{background:#2d414b;box-shadow:none}
 .rail .nav-item[data-tab=templates]{order:0}.rail .nav-item[data-tab=text]{order:1}.rail .nav-item[data-tab=captions]{order:2}.rail .nav-item[data-tab=media]{order:3}.rail .nav-item[data-tab=audio]{order:4}.rail .nav-item[data-tab=brand]{order:5}
 .library-panel,.inspector-dialog,.quick-panel{border-radius:18px 18px 0 0}
 .library-panel{height:min(62dvh,560px);max-height:78dvh}
 .library-sheet-header{padding:10px 18px}.library-sheet-header h2{font-size:17px}
 .library{padding:0 18px 24px}.library .media-image{height:120px}
 .import-status{bottom:calc(var(--mobile-dock-height) + 8px)}
 #toast{bottom:calc(var(--mobile-dock-height) + 12px)}
}
@media(max-width:360px){.header-main,.selection-tools .header-main{padding:0 4px}.tool-right .icon-button{width:34px!important}.stage-toolbar .tool-right{right:50px}.mobile-projects{width:38px}.header-tools .context-toolbar button{padding:0 10px}.rail .nav-item{flex-basis:72px;min-width:72px}}
@media(max-width:800px) and (max-height:620px){
 body,body.selection-tools{--mobile-dock-height:calc(64px + env(safe-area-inset-bottom))}
 .rail .nav-item{height:54px;min-height:54px;gap:4px}.nav-item svg{width:22px;height:22px}
 .playback{height:48px;min-height:48px}.play-button{height:40px;width:40px;min-width:40px}
 .editor{grid-template-rows:minmax(0,1fr) 18px var(--timeline-panel-height,168px) 32px}
}

/* Selection tools share the mobile dock. The only zoom control is the pinch gesture. */
@media(max-width:800px){
 body,body.selection-tools{--editor-header-height:48px}
 .header-main,.selection-tools .header-main{grid-template-rows:48px}
 .editor{grid-template-rows:minmax(0,1fr) 18px var(--timeline-panel-height,232px)}
 #zoomFooter{display:none}
 .rail>.header-tools{display:contents}
 .rail>.header-tools[hidden]{display:none}
 .rail .context-toolbar{display:contents}
 .rail .context-toolbar .desktop-only,.rail .context-toolbar .desktop-label,.rail .context-toolbar .toolbar-divider{display:none}
 .rail .context-toolbar:not(.text-edit-toolbar)>button{order:0;flex:0 0 76px;min-width:76px;max-width:none;height:64px;min-height:64px;flex-direction:column;gap:8px;padding:6px 4px;border:0;border-radius:9px;color:#bed3df;font-size:11px;font-weight:500}
 .rail .context-toolbar:not(.text-edit-toolbar)>button svg{width:25px;height:25px}
 .rail .context-toolbar .tool-audio{order:0!important}.rail .context-toolbar .tool-speed{order:1!important}.rail .context-toolbar .tool-all{order:2!important}
 .rail .nav-item[data-tab=templates]{order:10}.rail .nav-item[data-tab=text]{order:11}.rail .nav-item[data-tab=captions]{order:12}.rail .nav-item[data-tab=media]{order:13}.rail .nav-item[data-tab=audio]{order:14}.rail .nav-item[data-tab=brand]{order:15}
 .rail .context-toolbar.text-edit-toolbar{display:flex;order:0;flex:0 0 auto;width:auto;max-width:none;height:64px;align-items:center;gap:4px;margin:0 8px 0 0;padding:0 8px 0 0;overflow:visible;white-space:nowrap;border:0;border-right:1px solid #ffffff20;background:transparent;box-shadow:none;backdrop-filter:none}
 .rail .context-toolbar.text-edit-toolbar>button{height:42px;min-height:42px;flex-shrink:0}
 .rail .text-edit-toolbar .text-size-control,.rail .text-edit-toolbar select,.rail .text-edit-toolbar .text-toolbar-color{height:42px;min-height:42px;flex-shrink:0}
 .rail .context-toolbar button.active{background:#2d414b;color:var(--neon)}
 .mobile-nav-label{display:inline}.desktop-nav-label{display:none}
 .timeline-scroll{touch-action:none}
}
@media(max-width:360px){.rail .context-toolbar:not(.text-edit-toolbar)>button{flex-basis:72px;min-width:72px}}
@media(max-width:800px) and (max-height:620px){
 .editor{grid-template-rows:minmax(0,1fr) 18px var(--timeline-panel-height,168px)}
 .rail .context-toolbar:not(.text-edit-toolbar)>button,.rail .context-toolbar.text-edit-toolbar{height:54px;min-height:54px;gap:4px}
 .rail .context-toolbar:not(.text-edit-toolbar)>button svg{width:22px;height:22px}
}