/* Workspace engine styles. Theme it from the host with these variables (defaults = a neutral light look):
   --ws-gutter (between panes) --ws-pane (pane background) --ws-head (tab strip) --ws-card (floats, menus, icons)
   --ws-ink --ws-sub --ws-line --ws-acc --ws-hover --ws-shadow --ws-font --ws-r (pane radius) */
.ws-host{--ws-gap:6px;position:relative;display:flex;min-width:0;min-height:0;overflow:hidden;background:var(--ws-gutter,#E3E3E8);
 font-family:var(--ws-font,system-ui,sans-serif);color:var(--ws-ink,#000)}
.ws-tiles{position:relative;flex:1;display:flex;min-width:0;min-height:0;padding:var(--ws-gap)}
.ws-tiles>*{flex:1}
.ws-split{display:flex;min-width:0;min-height:0;flex:1}
.ws-split.ws-row{flex-direction:row}
.ws-split.ws-col{flex-direction:column}
.ws-cell{display:flex;min-width:0;min-height:0;overflow:hidden}
.ws-cell>*{flex:1}

/* dividers: thin visible line, generous hit area */
.ws-div{position:relative;flex:none;z-index:2;touch-action:none;outline:none}
.ws-row>.ws-div{width:var(--ws-gap);cursor:col-resize}
.ws-col>.ws-div{height:var(--ws-gap);cursor:row-resize}
.ws-div::before{content:"";position:absolute;inset:-5px}
.ws-row>.ws-div::before{inset:0 -6px}
.ws-col>.ws-div::before{inset:-6px 0}
.ws-div::after{content:"";position:absolute;border-radius:2px;background:var(--ws-acc,#0A84FF);opacity:0;transition:opacity .15s}
.ws-row>.ws-div::after{top:30%;bottom:30%;left:50%;width:3px;margin-left:-1.5px}
.ws-col>.ws-div::after{left:30%;right:30%;top:50%;height:3px;margin-top:-1.5px}
.ws-div:hover::after,.ws-div.ws-active::after,.ws-div:focus-visible::after{opacity:1}
.ws-div.ws-active::after,.ws-div:focus-visible::after{top:0;bottom:0;left:0;right:0;margin:0;width:auto;height:auto;opacity:.9}
html.ws-resizing-row,html.ws-resizing-row *{cursor:col-resize!important;user-select:none!important}
html.ws-resizing-col,html.ws-resizing-col *{cursor:row-resize!important;user-select:none!important}

/* panes */
.ws-pane{container-type:inline-size;container-name:wspane;position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;border-radius:var(--ws-r,12px);overflow:hidden;background:var(--ws-pane,#F2F2F7)}
.ws-pane::after{content:"";position:absolute;inset:0;z-index:6;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 .5px var(--ws-line,#D1D1D6)}
.ws-pane.ws-focus::after{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ws-acc,#0A84FF) 60%,transparent)}
.ws-in-float::after,.ws-in-float.ws-focus::after{box-shadow:none}
.ws-head{flex:none;display:flex;align-items:stretch;height:40px;background:var(--ws-head,#E9E9EE);box-shadow:inset 0 -.5px 0 var(--ws-line,#D1D1D6)}
.ws-tabs{flex:1;display:flex;align-items:stretch;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:5px 0 0 5px;gap:2px}
.ws-tabs::-webkit-scrollbar{display:none}
.ws-tab{appearance:none;border:0;font:inherit;color:var(--ws-sub,#8A8A8E);background:transparent;display:flex;align-items:center;gap:7px;
 min-width:72px;max-width:220px;padding:0 6px 0 11px;border-radius:9px 9px 0 0;font-size:13px;font-weight:600;cursor:pointer;touch-action:none;
 user-select:none;-webkit-user-select:none;flex:0 1 auto;position:relative;transition:background-color .15s,color .15s}
.ws-tab:hover{background:var(--ws-hover,rgba(0,0,0,.05));color:var(--ws-ink,#000)}
.ws-tab.ws-on{background:var(--ws-pane,#F2F2F7);color:var(--ws-ink,#000);box-shadow:0 -.5px 0 var(--ws-line,#D1D1D6),.5px 0 0 var(--ws-line,#D1D1D6),-.5px 0 0 var(--ws-line,#D1D1D6)}
.ws-focus .ws-tab.ws-on::before{content:"";position:absolute;left:8px;right:8px;top:0;height:2px;border-radius:0 0 2px 2px;background:var(--ws-acc,#0A84FF)}
.ws-tab:focus-visible{outline:2px solid var(--ws-acc,#0A84FF);outline-offset:-2px}
.ws-ti{display:inline-flex;flex:none;color:var(--ws-acc,#0A84FF)}
.ws-ti svg{width:16px;height:16px}
.ws-tl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-tx{display:inline-flex;align-items:center;justify-content:center;flex:none;width:22px;height:22px;border-radius:6px;color:var(--ws-sub,#8A8A8E);opacity:0;transition:opacity .12s}
.ws-tx svg{width:13px;height:13px;stroke-width:2.2}
.ws-tab:hover .ws-tx,.ws-tab.ws-on .ws-tx{opacity:1}
.ws-tx:hover{background:var(--ws-hover,rgba(0,0,0,.08));color:var(--ws-ink,#000)}
.ws-acts{flex:none;display:flex;align-items:center;gap:2px;padding:0 6px}
.ws-btn{appearance:none;border:0;background:transparent;color:var(--ws-sub,#8A8A8E);width:30px;height:30px;border-radius:8px;display:inline-flex;
 align-items:center;justify-content:center;cursor:pointer;padding:0}
.ws-btn:hover{background:var(--ws-hover,rgba(0,0,0,.06));color:var(--ws-ink,#000)}
.ws-btn:focus-visible{outline:2px solid var(--ws-acc,#0A84FF);outline-offset:-2px}
.ws-body{position:relative;flex:1;min-height:0;min-width:0;overflow:hidden;container-type:inline-size;container-name:wsbody}
.ws-page{position:absolute;inset:0;overflow:auto;overscroll-behavior:contain}
.ws-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--ws-sub,#8A8A8E);font-size:15px;text-align:center;padding:20px}
@container wsbody (max-width:1px){.ws-empty{display:none}}
/* narrow panes: keep the strip usable (+ and pop out move into the ⋯ menu) */
@container wspane (max-width:300px){
 .ws-head .ws-acts [data-ws-act=add],.ws-head .ws-acts [data-ws-act=popout]{display:none}
 .ws-tab{min-width:60px;padding-left:8px}
}
@container wspane (max-width:190px){.ws-ti{display:none}}

/* floating windows + minimized icons live in .ws-layer (over everything in the float parent) */
.ws-layer{position:absolute;inset:0;pointer-events:none;z-index:60}
.ws-layer>*{pointer-events:auto}
.ws-float{position:absolute;display:flex;border-radius:14px;background:var(--ws-card,#fff);
 box-shadow:0 0 0 .5px var(--ws-line,#D1D1D6),0 22px 60px -12px var(--ws-shadow,rgba(0,0,0,.35)),0 4px 14px -4px var(--ws-shadow,rgba(0,0,0,.2));
 animation:ws-pop .18s cubic-bezier(.2,.8,.2,1)}
.ws-float>.ws-pane{flex:1;border-radius:14px;box-shadow:none}
.ws-float.ws-front{box-shadow:0 0 0 1.5px color-mix(in srgb,var(--ws-acc,#0A84FF) 55%,transparent),0 22px 60px -12px var(--ws-shadow,rgba(0,0,0,.35))}
.ws-float.ws-snapping{opacity:.75}
@keyframes ws-pop{from{transform:scale(.96);opacity:0}}
.ws-fbar{flex:none;display:flex;align-items:center;gap:8px;height:42px;padding-left:12px;background:var(--ws-card,#fff);cursor:grab;touch-action:none;
 user-select:none;-webkit-user-select:none;box-shadow:inset 0 -.5px 0 var(--ws-line,#D1D1D6)}
.ws-fbar:active{cursor:grabbing}
.ws-ficon{display:inline-flex;color:var(--ws-acc,#0A84FF)}
.ws-ficon svg{width:18px;height:18px}
.ws-ftitle{flex:1;min-width:0;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-fbar .ws-acts{padding:0 6px 0 0}
.ws-rz{position:absolute;z-index:3;touch-action:none}
.ws-rz-n,.ws-rz-s{left:12px;right:12px;height:10px;cursor:ns-resize}
.ws-rz-n{top:-5px}.ws-rz-s{bottom:-5px}
.ws-rz-e,.ws-rz-w{top:12px;bottom:12px;width:10px;cursor:ew-resize}
.ws-rz-e{right:-5px}.ws-rz-w{left:-5px}
.ws-rz-ne,.ws-rz-nw,.ws-rz-se,.ws-rz-sw{width:18px;height:18px}
.ws-rz-ne{top:-6px;right:-6px;cursor:nesw-resize}.ws-rz-sw{bottom:-6px;left:-6px;cursor:nesw-resize}
.ws-rz-nw{top:-6px;left:-6px;cursor:nwse-resize}.ws-rz-se{bottom:-6px;right:-6px;cursor:nwse-resize}
.ws-rz-se::after{content:"";position:absolute;right:9px;bottom:9px;width:8px;height:8px;border-right:2px solid var(--ws-sub,#8A8A8E);border-bottom:2px solid var(--ws-sub,#8A8A8E);border-radius:0 0 3px 0;opacity:.6}
[data-ws-mode=mobile] .ws-rz-n,[data-ws-mode=mobile] .ws-rz-s{height:18px}
[data-ws-mode=mobile] .ws-rz-se,[data-ws-mode=mobile] .ws-rz-sw{width:30px;height:30px}

.ws-icon{position:absolute;width:56px;height:56px;border-radius:50%;border:0;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;
 background:var(--ws-card,#fff);color:var(--ws-acc,#0A84FF);touch-action:none;user-select:none;-webkit-user-select:none;
 box-shadow:0 0 0 .5px var(--ws-line,#D1D1D6),0 10px 28px -6px var(--ws-shadow,rgba(0,0,0,.4));animation:ws-pop .2s cubic-bezier(.2,.8,.2,1)}
.ws-icon svg{width:26px;height:26px}
.ws-icon.ws-moving{transform:scale(1.08);cursor:grabbing}
.ws-icon.ws-settle{transition:left .24s cubic-bezier(.2,.8,.2,1),top .24s cubic-bezier(.2,.8,.2,1)}
.ws-icon:focus-visible{outline:2px solid var(--ws-acc,#0A84FF);outline-offset:3px}
.ws-badge{position:absolute;top:-2px;right:-2px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--ws-acc,#0A84FF);color:#fff;
 font:700 12px/20px var(--ws-font,system-ui);text-align:center}

/* drag feedback */
.ws-drop{position:fixed;z-index:2147483000;pointer-events:none;border-radius:10px;background:color-mix(in srgb,var(--ws-acc,#0A84FF) 16%,transparent);
 box-shadow:inset 0 0 0 2px var(--ws-acc,#0A84FF);transition:left .08s,top .08s,width .08s,height .08s}
.ws-drop.ws-line{border-radius:2px;background:var(--ws-acc,#0A84FF);box-shadow:none}
.ws-ghost{position:fixed;left:0;top:0;z-index:2147483001;pointer-events:none;display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:10px;
 background:var(--ws-card,#fff);color:var(--ws-ink,#000);font:600 13px var(--ws-font,system-ui);box-shadow:0 10px 30px -6px var(--ws-shadow,rgba(0,0,0,.35)),0 0 0 .5px var(--ws-line,#D1D1D6)}
html.ws-dragging,html.ws-dragging *{cursor:grabbing!important;user-select:none!important}

/* menus */
.ws-menu{position:absolute;z-index:2147482000;min-width:200px;max-width:280px;padding:6px;border-radius:12px;background:var(--ws-card,#fff);
 box-shadow:0 0 0 .5px var(--ws-line,#D1D1D6),0 16px 40px -8px var(--ws-shadow,rgba(0,0,0,.35));animation:ws-pop .14s cubic-bezier(.2,.8,.2,1)}
.ws-mh{padding:6px 10px 4px;font-size:12px;font-weight:600;color:var(--ws-sub,#8A8A8E)}
.ws-mi{appearance:none;border:0;background:transparent;width:100%;display:flex;align-items:center;gap:10px;padding:0 10px;height:38px;border-radius:8px;
 font:500 14px var(--ws-font,system-ui);color:var(--ws-ink,#000);cursor:pointer;text-align:left}
.ws-mi:hover,.ws-mi:focus-visible{background:var(--ws-hover,rgba(0,0,0,.06));outline:none}
.ws-mic{display:inline-flex;color:var(--ws-acc,#0A84FF)}
.ws-mic svg{width:18px;height:18px}
.ws-mi.ws-danger,.ws-mi.ws-danger .ws-mic{color:#FF3B30}
.ws-msep{height:.5px;margin:5px 4px;background:var(--ws-line,#D1D1D6)}

/* phones */
.ws-host[data-ws-mode=mobile]{--ws-gap:8px}
[data-ws-mode=mobile] .ws-head{height:44px}
[data-ws-mode=mobile] .ws-tab{font-size:14px;min-height:38px}
[data-ws-mode=mobile] .ws-tx{opacity:1}
[data-ws-mode=mobile] .ws-btn{width:36px;height:36px}
.ws-host[data-ws-mode=mobile] .ws-col>.ws-div::after{opacity:.55;left:40%;right:40%;height:4px;margin-top:-2px;background:var(--ws-sub,#8A8A8E)}
.ws-host[data-ws-mode=mobile] .ws-col>.ws-div::before{inset:-10px 0}
@media (prefers-reduced-motion:reduce){.ws-float,.ws-icon,.ws-menu{animation:none}.ws-icon.ws-settle{transition:none}}