html,body { margin:0; width:100%; height:100%; min-height:100dvh; overflow:hidden; overscroll-behavior:none; background:#000; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",Inter,Arial,sans-serif; -webkit-text-size-adjust:100%; }
#paneWorkspace { position:fixed; inset:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px); overflow:hidden; background:#252529; }
#loadingWorkspace { position:fixed; inset:0; z-index:100; display:grid; place-items:center; background:#000; color:rgba(255,255,255,.62); font-size:13px; letter-spacing:.02em; }
.paneSlot,.paneGhost { position:absolute; min-width:0; min-height:0; box-sizing:border-box; overflow:hidden; transition:left .16s ease,top .16s ease,width .16s ease,height .16s ease,outline-color .12s ease; }
.paneSlot { background:#000; outline:1px solid transparent; }
.paneSlot.active { outline-color:rgba(10,132,255,.72); outline-offset:-2px; }
.paneSlot.swapTarget { outline:3px solid #0a84ff; outline-offset:-3px; }
.paneSlot.dropValid { outline:4px solid #30d158; outline-offset:-4px; }
.paneSlot.dropInvalid { outline:4px solid #ff453a; outline-offset:-4px; }
.paneSlot.dropInvalid::after { content:"Cannot drop bubbles into a note"; position:absolute; z-index:24; inset:50% auto auto 50%; transform:translate(-50%,-50%); padding:9px 13px; border-radius:999px; background:rgba(92,20,18,.94); color:#ffb4ae; font-size:13px; font-weight:650; white-space:nowrap; pointer-events:none; }
.paneSlot.dropInvalid[data-drop-reason="cycle"]::after { content:"Cannot move a folder into itself or a descendant"; }
.paneFrame { position:absolute; inset:0; width:100%; height:100%; border:0; background:#000; }
.paneClose { position:absolute; z-index:20; left:8px; top:8px; width:24px; height:24px; padding:0; border:1px solid #414146; border-radius:50%; background:rgba(25,25,28,.94); color:#fff; font-size:19.55px; line-height:21px; cursor:pointer; }
.paneClose:disabled { display:none; }
.paneHandle { --drag-x:0px; --drag-y:0px; position:absolute; z-index:20; left:50%; top:56px; width:60px; height:14px; padding:0; transform:translate(calc(-50% + var(--drag-x)),var(--drag-y)); border:0; background:transparent; cursor:grab; touch-action:none; }
.paneHandle.returning { transition:transform .16s ease-out; }
.paneHandle::before { content:""; position:absolute; left:0; right:0; top:5px; height:4px; border-radius:999px; background:rgba(255,255,255,.52); box-shadow:0 1px 5px rgba(0,0,0,.45); }
.paneHandle:active { cursor:grabbing; }
.paneHandle:disabled { cursor:default; opacity:.28; }
.paneSlot.previewOpen .paneHandle { pointer-events:none; }
.paneSlot.noteView .paneHandle { display:none; }
.paneGhost { background:rgba(10,132,255,.14); border:2px dashed rgba(102,169,255,.9); }
.paneGhost::after { content:"New Pane"; position:absolute; inset:0; display:grid; place-items:center; color:#8fc1ff; font-size:13px; font-weight:650; letter-spacing:.03em; }
#paneWorkspace.dragging .paneFrame { pointer-events:none; }
.hostBubbleDragLayer { position:fixed; inset:0; z-index:40; pointer-events:none; }
.hostBubbleDragLayer canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
@media (prefers-reduced-motion:reduce) { .paneSlot,.paneGhost,.paneHandle.returning { transition:none; } }
@media (pointer:coarse), (max-width:620px), (max-height:500px) and (max-width:950px) {
  .paneClose { left:0; top:0; width:44px; height:44px; border:0; background:transparent; color:transparent; font-size:0; touch-action:manipulation; }
  .paneClose::before { content:"×"; position:absolute; left:8px; top:8px; display:grid; place-items:center; width:28px; height:28px; box-sizing:border-box; border:1px solid #414146; border-radius:50%; background:rgba(25,25,28,.94); color:#fff; font-size:21px; line-height:1; }
  .paneHandle { height:44px; margin-top:-15px; touch-action:none; }
  .paneHandle::before { top:20px; }
}