@import url('../controls/scroll-buttons.css');
/* Reusable docking control; Studio-specific adjustments are scoped below. */
.dock-workspace{--dock-active:#007acc;--dock-active-soft:#007acc25;--dock-head:#f3f3f5;--dock-header-text:#404047;position:relative!important;display:block!important;min-width:0;min-height:0;overflow:hidden!important;background:var(--canvas,#e7e7eb);font:12px/1.35 'Segoe UI',system-ui,sans-serif;color:var(--text,#292834)}
.dark .dock-workspace{--dock-head:#292a30;--dock-header-text:#d9d9e0;--dock-active:#3794ff;--dock-active-soft:#3794ff29}.dock-shell{position:absolute;inset:0;overflow:hidden;--rail-left:0px;--rail-right:0px;--rail-top:0px;--rail-bottom:0px}.dock-shell.has-auto-left{--rail-left:25px}.dock-shell.has-auto-right{--rail-right:25px}.dock-shell.has-auto-top{--rail-top:25px}.dock-shell.has-auto-bottom{--rail-bottom:25px}.dock-root{position:absolute;left:var(--rail-left);right:var(--rail-right);top:var(--rail-top);bottom:var(--rail-bottom);padding:3px;overflow:hidden}.dock-root>.dock-group,.dock-root>.dock-split,.dock-branch>.dock-group,.dock-branch>.dock-split{height:100%;width:100%}.dock-split{display:grid;min-width:0;min-height:0;overflow:hidden}.split-horizontal{grid-template-rows:minmax(0,1fr)}.split-vertical{grid-template-columns:minmax(0,1fr)}.dock-branch{min-width:0;min-height:0;overflow:hidden}.dock-splitter{position:relative;background:var(--canvas,#e7e7eb);touch-action:none;outline:none;z-index:2}.split-horizontal>.dock-splitter{cursor:col-resize}.split-vertical>.dock-splitter{cursor:row-resize}.dock-splitter:hover,.dock-splitter:focus-visible{background:var(--dock-active)}.dock-group{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;border:1px solid var(--border,#c8c8cf);background:var(--panel,#fff);position:relative}.dock-group-active{border-color:var(--dock-active)}.dock-group-header{height:26px;min-height:26px;display:flex;align-items:center;background:var(--dock-head);color:var(--dock-header-text);padding:0 3px 0 8px;gap:2px;user-select:none;touch-action:none;border-bottom:1px solid var(--border,#d5d5da)}.dock-group-active>.dock-group-header{background:var(--dock-active);color:#fff}.dock-group-title{font-size:12px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:grab}.dock-group-header .dock-button{color:inherit;font-size:13px;width:23px;height:22px;min-width:23px;line-height:20px;text-align:center;padding:0;border:0;border-radius:0;background:transparent}.dock-group-header .dock-button:hover{background:#ffffff30}.dock-button{font-family:inherit;cursor:pointer}.dock-tabs{display:flex;align-items:stretch;min-height:29px;height:29px;overflow:auto hidden;scrollbar-width:thin;flex-shrink:0;background:var(--dock-head);border-bottom:1px solid var(--border,#ddd);overscroll-behavior:contain}.dock-tab-wrap{display:flex;align-items:center;flex:0 0 auto;min-width:50px;max-width:230px;border-right:1px solid var(--border,#ddd);position:relative;color:var(--muted,#666)}.dock-tab-wrap.active{background:var(--panel,#fff);color:var(--text,#292834);box-shadow:inset 0 2px var(--dock-active)}.dock-tab{display:flex;align-items:center;gap:6px;min-width:0;max-width:190px;font:12px/1.3 'Segoe UI',system-ui,sans-serif;border:0;border-radius:0;background:transparent;color:inherit;padding:5px 8px;cursor:default;touch-action:none}.dock-tab-icon{color:var(--dock-active);font-size:13px;flex-shrink:0}.dock-tab-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.dock-tab-wrap>.dock-button{color:var(--muted);background:transparent;border:0;min-width:18px;height:24px;padding:0 3px;font-size:11px;border-radius:0}.dock-tab-wrap>.dock-button:hover{color:var(--text);background:var(--dock-active-soft)}.dock-tab-wrap.pinned .dock-tab-text{max-width:105px}.dock-group-body{position:relative;flex:1;min-width:0;min-height:0;overflow:hidden;display:flex;flex-direction:column}.dock-group-body>[data-dock-content]{height:100%;min-width:0;min-height:0;flex:1;width:100%;box-sizing:border-box}.dock-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--muted);padding:28px;font-size:13px;line-height:1.5;text-align:center;min-height:90px}.dock-floating{position:absolute;display:flex;flex-direction:column;min-width:100px;min-height:80px;box-shadow:0 7px 28px #10132645;border:1px solid var(--dock-active);background:var(--panel);z-index:20}.dock-floating>.dock-group,.dock-floating>.dock-split{width:100%;height:100%;flex:1;min-height:0}.dock-float-resize{position:absolute;z-index:8;touch-action:none}.resize-n,.resize-s{left:5px;right:5px;height:7px;cursor:ns-resize}.resize-n{top:-3px}.resize-s{bottom:-3px}.resize-e,.resize-w{top:5px;bottom:5px;width:7px;cursor:ew-resize}.resize-e{right:-3px}.resize-w{left:-3px}.resize-ne,.resize-nw,.resize-se,.resize-sw{width:11px;height:11px}.resize-ne{top:-4px;right:-4px;cursor:nesw-resize}.resize-nw{top:-4px;left:-4px;cursor:nwse-resize}.resize-se{bottom:-4px;right:-4px;cursor:nwse-resize}.resize-sw{bottom:-4px;left:-4px;cursor:nesw-resize}.dock-auto-strip{position:absolute;display:flex;gap:3px;z-index:31;overflow:auto;scrollbar-width:none;background:var(--canvas);padding:2px}.dock-auto-left,.dock-auto-right{top:var(--rail-top);bottom:var(--rail-bottom);width:25px;flex-direction:column}.dock-auto-left{left:0}.dock-auto-right{right:0}.dock-auto-top,.dock-auto-bottom{height:25px;left:var(--rail-left);right:var(--rail-right);flex-direction:row}.dock-auto-top{top:0}.dock-auto-bottom{bottom:0}.dock-auto-strip:empty{display:none}.dock-auto-tab{padding:7px 4px;background:var(--dock-head);color:var(--text);font:12px 'Segoe UI',sans-serif;border:0;border-left:2px solid transparent;white-space:nowrap}.dock-auto-left .dock-auto-tab,.dock-auto-right .dock-auto-tab{writing-mode:vertical-rl;flex-shrink:0}.dock-auto-top .dock-auto-tab,.dock-auto-bottom .dock-auto-tab{padding:3px 9px}.dock-auto-tab:hover,.dock-auto-tab[aria-expanded=true]{border-color:var(--dock-active);background:var(--dock-active-soft)}.dock-flyout{position:absolute;display:flex;flex-direction:column;z-index:35;box-shadow:0 5px 24px #20202e50;background:var(--panel);border:1px solid var(--dock-active);min-width:0;min-height:0;overflow:hidden}.flyout-left{left:var(--rail-left);top:var(--rail-top);bottom:var(--rail-bottom);width:min(340px,calc(100% - 55px))}.flyout-right{right:var(--rail-right);top:var(--rail-top);bottom:var(--rail-bottom);width:min(340px,calc(100% - 55px))}.flyout-top{left:var(--rail-left);right:var(--rail-right);top:var(--rail-top);height:min(320px,70%)}.flyout-bottom{left:var(--rail-left);right:var(--rail-right);bottom:var(--rail-bottom);height:min(320px,70%)}.dock-gesturing{user-select:none!important;cursor:grabbing}.dock-drag-ghost{position:fixed;z-index:9999;pointer-events:none;background:#007acc;color:white;padding:8px 13px;border:1px solid #abd7ff;box-shadow:0 5px 15px #0004;font:12px 'Segoe UI',sans-serif;white-space:nowrap}.dock-drop-overlay{position:fixed;inset:0;z-index:9998;pointer-events:none}.dock-drop-preview{position:fixed;background:#007acc38;border:2px solid #1496ff;box-shadow:inset 0 0 0 1px #fff5}.dock-drop-preview>span{position:absolute;bottom:8px;left:8px;background:#006abb;color:white;padding:5px 8px;font:12px 'Segoe UI',sans-serif}.dock-compass{position:fixed;transform:translate(-50%,-50%);width:108px;height:108px;display:grid;grid-template-columns:repeat(3,34px);grid-template-rows:repeat(3,34px);gap:3px;filter:drop-shadow(0 3px 5px #0005)}.dock-compass>span{pointer-events:auto;display:grid;place-items:center;background:#f5f8ff;color:#176fc2;border:2px solid #457eb7;font:22px 'Segoe UI',sans-serif}.dock-compass>span.active,.dock-compass>span:hover{background:#ffe7a8;border-color:#edaa35;color:#715300}.guide-top{grid-column:2;grid-row:1}.guide-left{grid-column:1;grid-row:2}.guide-center{grid-column:2;grid-row:2}.guide-right{grid-column:3;grid-row:2}.guide-bottom{grid-column:2;grid-row:3}.dock-menu{position:fixed;z-index:10000;min-width:230px;max-width:350px;max-height:min(620px,90vh);overflow:auto;display:flex;flex-direction:column;padding:5px;background:var(--panel,#fff);color:var(--text,#292834);border:1px solid var(--border,#bbb);box-shadow:0 5px 18px #0003;font:12px 'Segoe UI',sans-serif}.dock-menu-title{padding:8px;color:var(--muted);border-bottom:1px solid var(--border);margin-bottom:3px;font-size:12px}.dock-menu button{text-align:left;padding:7px 12px;border:0;border-radius:0;background:transparent;color:inherit;font:inherit}.dock-menu button:hover,.dock-menu button:focus-visible{background:var(--accent-soft,#def);outline:1px solid var(--dock-active,#007acc)}.dock-menu button:disabled{opacity:.4;cursor:default}.dock-announcer{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.dock-parking,.dock-canvas-parking,.dock-legacy-status{display:none!important}.dock-button:focus-visible,.dock-tab:focus-visible,.dock-auto-tab:focus-visible{outline:2px solid var(--dock-active);outline-offset:-2px}
/* Studio adapters preserve live content while dropping the old fixed grid. */
.studio.docking-enabled .workspace{grid-template-columns:none;grid-template-rows:none;flex:1}.docking-enabled .dock-live-canvas{width:100%!important;height:100%!important;display:flex!important;flex-direction:column;min-width:0;min-height:0;overflow:hidden;border:0}.docking-enabled .canvas-viewport{display:block!important;flex:1;min-height:0;min-width:0}.docking-enabled .canvas-header{min-height:30px;height:30px;font-size:11px;overflow:hidden}.docking-enabled .canvas-header #canvas-file{display:none}.docking-enabled .code-panel{height:100%!important;max-height:none!important;min-height:0!important;display:flex!important;flex-direction:column;border:0;flex:1}.docking-enabled #code-resize{display:none}.docking-enabled .code-header{height:31px;min-height:31px;padding:0 8px}.docking-enabled .code-header .file-tab{max-width:180px;overflow:hidden}.docking-enabled .code-editor{height:auto;flex:1;min-height:0;overflow:hidden}.docking-enabled .motion-panel{height:100%;max-height:none;min-height:0;flex:1;border:0;display:flex!important}.dock-timeline-content,.dock-view-content{display:flex;flex-direction:column;min-height:0;overflow:hidden;position:relative}.docking-enabled #views-board{display:flex!important;position:relative!important;inset:auto!important;flex:1;width:100%;height:100%;min-height:0}.dock-sidebar-content,.dock-inspector-content{overflow:auto!important;overscroll-behavior:contain;scrollbar-width:thin;padding:0;background:var(--panel)}.dock-inspector-content{font-size:12px}.dock-document-content{position:relative;overflow:hidden;background:var(--canvas)}.dock-passive-document{position:relative;width:100%;height:100%;overflow:hidden;background:var(--canvas);cursor:pointer}.dock-passive-surface{position:absolute;left:50%;top:50%;transform-origin:center center;background:white;box-shadow:0 3px 15px #20203625;pointer-events:none}.dock-passive-surface>.design-node{height:100%;width:100%}.dock-passive-label{position:absolute;left:0;right:0;bottom:0;padding:7px 12px;text-align:center;color:var(--muted);background:var(--panel);border-top:1px solid var(--border);font-size:12px}.dock-problems-content{display:flex;flex-direction:column;overflow:auto;background:var(--panel)}.dock-error-toolbar{display:flex;align-items:center;gap:15px;min-height:35px;padding:5px 12px;border-bottom:1px solid var(--border);font-size:12px}.dock-error-toolbar .button{margin-left:auto}.dock-error-list{overflow:auto;flex:1}.dock-error-row{display:grid;grid-template-columns:15px minmax(120px,1fr) auto;gap:10px;width:100%;text-align:left;border:0;border-bottom:1px solid var(--border);padding:8px 12px;font-size:12px;background:transparent;color:var(--text)}.dock-error-row:hover{background:var(--accent-soft)}.dock-error-row.error>span:first-child{color:#d34848}.dock-error-row.warning>span:first-child{color:#c88917}.dock-error-row>span:last-child{color:var(--muted)}.dock-window-menu{padding:5px 10px!important;min-height:27px;font-size:12px}.dock-layout-actions{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.dock-presets{display:grid;grid-template-columns:1fr 1fr;gap:10px}.dock-presets>button{text-align:left;border:1px solid var(--border);background:var(--input);padding:13px;border-radius:5px;color:var(--text)}.dock-presets>button:hover{border-color:#007acc;background:var(--accent-soft)}.dock-presets strong,.dock-presets span{display:block}.dock-presets strong{font-size:14px;margin-bottom:5px}.dock-presets span{font-size:12px;color:var(--muted)}.dock-save-layout{display:flex;gap:8px;margin:12px 0}.dock-save-layout input{flex:1;min-width:0;margin:0}.dock-saved-layouts>div{display:flex;border-bottom:1px solid var(--border);padding:5px}.dock-saved-layouts>div>button:first-child{flex:1;text-align:left;padding:5px}.dock-saved-layouts>div>button:last-child{width:26px}.dock-window-list{max-height:420px;overflow:auto}.dock-window-list>button{display:flex;align-items:center;gap:12px;text-align:left;padding:11px 10px;border-bottom:1px solid var(--border);width:100%;font-size:13px}.dock-window-list>button:hover{background:var(--accent-soft)}.dock-window-list small{margin-left:auto;color:var(--muted)}
@media(max-width:1000px){.docking-enabled .topbar .file-folder,.docking-enabled .topbar .save-state{display:none}.dock-tab{max-width:160px}.docking-enabled .canvas-hint{display:none}.docking-enabled .feature-toolbar span{display:none}.dock-error-row{grid-template-columns:15px minmax(120px,1fr)}.dock-error-row>span:last-child{grid-column:2}.docking-enabled .brand{min-width:0}.docking-enabled .topbar{gap:6px}}
@media(max-width:650px){.dock-presets{grid-template-columns:1fr}.docking-enabled .topbar .file-title,.docking-enabled .topbar .avatar,.docking-enabled .topbar .brand>span,.docking-enabled .toolbar .secondary-tool{display:none}.docking-enabled .toolbar{gap:3px;padding:4px}.docking-enabled .framework-select{max-width:90px}.docking-enabled .statusbar .status-right{display:none}.dock-tab{max-width:140px}.dock-group-header{height:28px;min-height:28px}.dock-tabs{min-height:31px;height:31px}.dock-tab-wrap>.dock-button{min-width:22px}.dock-tab-wrap{max-width:200px}.dock-save-layout{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.dock-workspace *{scroll-behavior:auto!important;transition:none!important}}
.dock-flyout-resize{position:absolute;z-index:5;touch-action:none;background:transparent}.dock-flyout-resize:hover{background:var(--dock-active)}