.vc-dock-grip{ display:none; position:fixed; z-index:9450; touch-action:none; }
  .vc-dock-grip::before{ content:''; position:absolute; border-radius:99px; background:rgba(255,255,255,.35); transition:background .15s; }
  .vc-dock-grip:hover::before, .vc-dock-grip.on::before{ background:#2dd4bf; }
  body.vc-dockcol #vcDockGrip{ display:block; top:var(--vdTop); bottom:var(--vdBottom); right:calc(var(--vdW) + 12px); width:14px; cursor:ew-resize; }
  #vcDockGrip::before{ left:5px; width:4px; top:calc(50% - 30px); height:60px; }
  .vc-dock-grip.h{ right:12px; width:var(--vdW); height:14px; cursor:ns-resize; }
  .vc-dock-grip.h.show{ display:block; }
  .vc-dock-grip.h::before{ top:5px; height:4px; left:calc(50% - 30px); width:60px; }
  body.vc-dockcol #liveShell .live-stage:not(.floating){ margin-right:calc(var(--vdW) + 26px); }
  body.vc-dockcol #roomFloatBar{ right:calc(var(--vdW) + 30px); }
  /* Study docked UNDER the video: a wide strip, the video shrinks upward. */
  #studyDockPos, #buddyDockPos{ display:none !important; }
  @media (min-width:900px){ body.in-live-room #studyDockPos, body.in-live-room #buddyDockPos{ display:inline-flex !important; align-items:center; justify-content:center; } }
  body.vc-botdock #liveShell .live-stage:not(.floating){ margin-bottom:calc(var(--vdBH) + 14px); }
  body.vc-botdock #roomFloatBar{ bottom:calc(var(--vdBottom) + var(--vdBH) + 22px); }
  body.vc-botdock #studyPanel.vc-bottom, body.vc-botdock #buddyPanel.vc-bottom{ left:var(--bl, 12px) !important; right:var(--br, 12px) !important; top:auto !important; bottom:var(--vdBottom) !important; height:var(--vdBH) !important; width:auto !important; max-width:none !important; max-height:none !important; margin:0 !important; border-radius:16px; }
  #buddyPanel.vc-bottom .bd-resize{ display:none; }
  #studyPanel.show.vc-bottom{ display:grid; grid-template-columns:minmax(0,1fr) 190px; grid-template-rows:auto minmax(0,1fr); }
  #studyPanel.vc-bottom .study-head{ grid-column:1 / -1; padding:8px 14px 6px; }
  #studyPanel.vc-bottom .study-body{ grid-column:1; grid-row:2; min-height:0; overflow:auto; padding:8px 14px; }
  #studyPanel.vc-bottom .study-foot{ grid-column:2; grid-row:2; flex-direction:column; justify-content:center; padding:8px 12px; gap:8px; border-top:none; }
  #studyPanel.vc-bottom .study-foot button{ flex:0 0 auto !important; width:100%; }
  #studyPanel.vc-bottom .study-card{ min-height:0; padding:10px 14px; }
  #studyPanel.vc-bottom .study-front-row{ margin-bottom:6px; }
  #studyPanel.vc-bottom .study-resize-handle{ display:none; }
  body.vc-botdock #vcDockGripB{ display:block; left:12px; right:12px; bottom:calc(var(--vdBottom) + var(--vdBH)); height:14px; cursor:ns-resize; }
  body.vc-botdock #vcDockGripB{ right:var(--vdBR, 12px); }
  #vcDockGripB::before{ top:5px; height:4px; left:calc(50% - 30px); width:60px; }
  body.vc-sidedock .vc-docked{ left:auto !important; right:12px !important; top:var(--pt) !important; bottom:var(--pb) !important; width:var(--vdW) !important; height:auto !important; max-width:none !important; max-height:none !important; margin:0 !important; border-radius:16px; }
  body.vc-sidedock #studyPanel.vc-docked .study-body{ overflow:auto; min-height:0; flex:1; }
  body.vc-sidedock .study-title{ white-space:nowrap; font-size:14px; }
  body.vc-sidedock .study-sub{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* The video's resize corner is always there on a computer, not only after it has been dragged out. */
  @media (min-width:760px){
    .live-stage .live-stage-resize{
      display:block; position:absolute; right:6px; bottom:6px; width:20px; height:20px; cursor:nwse-resize; z-index:2;
      background: linear-gradient(135deg, transparent 0 42%, rgba(255,255,255,0.5) 42% 48%, transparent 48% 62%, rgba(255,255,255,0.5) 62% 68%, transparent 68%);
    }
    .live-stage-hint{ font-weight:600; opacity:.75; }
  }
  @media (max-width:759px){ .live-stage-hint{ display:none; } }

/* ---------- v212: snap layout (246-snap-layout.js) — computers in a call ---------- */
html.vc-snap body.in-live-room #liveShell.show:not(.minimized){ left:var(--snapL, 0px) !important; right:var(--snapR, 0px) !important; bottom:var(--snapB, 0px) !important; transition:left .18s, right .18s, bottom .18s; }
html.vc-snap #liveShell .live-stage:not(.floating){ margin-right:0 !important; margin-bottom:0 !important; }
html.vc-snap #roomFloatBar{ right:calc(var(--snapR, 0px) + 12px) !important; bottom:calc(var(--snapB, 0px) + 12px) !important; }
/* the panels' older dock buttons and resize corners stand aside */
html.vc-snap #vcToneDock, html.vc-snap .vc-tp-dock, html.vc-snap #studyDockPos, html.vc-snap #studyDock, html.vc-snap #buddyDock, html.vc-snap #buddyDockPos,
html.vc-snap .vc-snapped .study-resize-handle, html.vc-snap .vc-snapped .vc-tp-grip, html.vc-snap .vc-snapped .vc-fp-resize, html.vc-snap .vc-snapped .bd-resize,
html.vc-snap .vc-dock-grip{ display:none !important; }
html.vc-snap .vc-snapped{ position:fixed !important; display:flex; flex-direction:column; overflow:hidden; box-sizing:border-box; border-radius:16px !important; box-shadow:0 12px 34px rgba(0,0,0,.32); transition:left .16s, top .16s, width .16s, height .16s; }
html.vc-snap .vc-snapped.vc-snap-dragging{ transition:none; opacity:.9; box-shadow:0 18px 44px rgba(0,0,0,.45); }
html.vc-snap #studyPanel.vc-snapped:not(.vc-bottom) .study-body, html.vc-snap #buddyPanel.vc-snapped > :not(.bd-head):not(.vc-snap-rs){ min-height:0; }
html.vc-snap #studyPanel.vc-snapped:not(.vc-bottom) .study-body{ flex:1 1 auto; overflow:auto; }
html.vc-snap #studyPanel.vc-snapped.vc-bottom{ display:grid; }
html.vc-snap .vc-snapped[id^="vc"]:not(.vc-fp){ overflow:auto; }
html.vc-snap #roomChatPanel.vc-snapped .room-chat-body, html.vc-snap #roomChatPanel.vc-snapped .room-chat-list{ min-height:0; }
/* title bars are the drag handle */
html.vc-snap #studyDragHandle, html.vc-snap #vcToneHead, html.vc-snap #buddyDrag, html.vc-snap .vc-snapped .room-chat-head, html.vc-snap .vc-snapped > .vc-tp-bar{ cursor:grab; touch-action:none; }
.vc-snap-btn{ display:none; }
html.vc-snap .vc-snap-btn{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:30px; height:30px; margin-left:4px; border-radius:9px; border:1px solid var(--line, #d8e2dc); background:var(--card, #fff); color:var(--ink, #1c1917); font-size:16px; line-height:1; cursor:pointer; padding:0; }
html.vc-snap .vc-snap-btn:hover{ border-color:var(--cover, #0f7a5c); color:var(--cover, #0f7a5c); }
.vc-snap-rs{ display:none; }
html.vc-snap .vc-snapped[data-snap="F"] > .vc-snap-rs{ display:block; position:absolute; right:3px; bottom:3px; width:18px; height:18px; cursor:nwse-resize; z-index:5; opacity:.7;
  background:linear-gradient(135deg, transparent 0 45%, currentColor 45% 52%, transparent 52% 66%, currentColor 66% 73%, transparent 73%); color:var(--muted, #889); }
/* the lines you drag to resize */
#vcSnapSplits{ position:fixed; inset:0; pointer-events:none; z-index:9620; }
html:not(.vc-snap) #vcSnapSplits{ display:none; }
.vc-snap-split{ position:fixed; pointer-events:auto; touch-action:none; }
.vc-snap-split[data-dir="v"]{ cursor:ew-resize; }
.vc-snap-split[data-dir="h"]{ cursor:ns-resize; }
.vc-snap-split[data-kind="w"][data-dir="v"]{ cursor:ns-resize; }
.vc-snap-split[data-kind="w"][data-dir="h"]{ cursor:ew-resize; }
.vc-snap-split::before{ content:''; position:absolute; border-radius:99px; background:rgba(255,255,255,.28); transition:background .15s; }
.vc-snap-split[data-dir="v"]::before{ left:calc(50% - 2px); width:4px; top:calc(50% - 28px); height:56px; }
.vc-snap-split[data-dir="h"]::before{ top:calc(50% - 2px); height:4px; left:calc(50% - 28px); width:56px; }
.vc-snap-split[data-kind="w"][data-dir="v"]::before{ top:calc(50% - 2px); height:4px; left:calc(50% - 28px); width:56px; }
.vc-snap-split[data-kind="w"][data-dir="h"]::before{ left:calc(50% - 2px); width:4px; top:calc(50% - 28px); height:56px; }
.vc-snap-split:hover::before, .vc-snap-split.on::before{ background:#2dd4bf; }
/* drop targets while dragging a panel */
#vcSnapZones{ position:fixed; inset:0; z-index:9640; pointer-events:none; display:none; }
#vcSnapZones.show{ display:block; }
#vcSnapZones i{ position:absolute; border:2px dashed rgba(45,212,191,.55); background:rgba(45,212,191,.08); border-radius:16px; transition:background .12s, border-color .12s; }
#vcSnapZones i[data-z="L"]{ left:6px; top:6px; bottom:6px; width:max(110px, 10vw); }
#vcSnapZones i[data-z="R"]{ right:6px; top:6px; bottom:6px; width:max(110px, 10vw); }
#vcSnapZones i[data-z="B"]{ left:calc(max(110px, 10vw) + 12px); right:calc(max(110px, 10vw) + 12px); bottom:6px; height:max(120px, 16vh); }
#vcSnapZones i.hot{ background:rgba(45,212,191,.22); border-color:#2dd4bf; border-style:solid; }
#vcSnapZones .vc-snap-ghost{ position:fixed; display:none; border-radius:16px; background:rgba(45,212,191,.18); border:2px solid #2dd4bf; transition:all .1s; }
.vc-snap-menu{ position:fixed; z-index:9700; display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:8px; width:170px; border-radius:14px; background:var(--card, #fff); border:1px solid var(--line, #d8e2dc); box-shadow:0 14px 34px rgba(0,0,0,.28); }
.vc-snap-menu button{ display:flex; flex-direction:column; align-items:center; gap:2px; min-height:52px; border-radius:10px; border:1px solid var(--line, #d8e2dc); background:var(--paper, #f7f7f5); color:var(--ink, #1c1917); font:600 12px var(--font, inherit); cursor:pointer; }
.vc-snap-menu button span{ font-size:20px; line-height:1; }
.vc-snap-menu button.on{ border-color:var(--cover, #0f7a5c); background:rgba(15,122,92,.1); color:var(--cover, #0f7a5c); }
/* the app page behind must not peek through the gaps between docked panels */
html.vc-snap body.in-live-room::before{ content:''; position:fixed; inset:0; z-index:8790; background:#0b1714; pointer-events:none; }
.vc-snap-menu .vc-snap-auto{ grid-column:1 / -1; flex-direction:row; justify-content:center; min-height:40px; background:linear-gradient(135deg, rgba(15,122,92,.12), rgba(45,212,191,.12)); border-color:rgba(15,122,92,.35); color:var(--cover, #0f7a5c); }
.vc-snap-grip{ display:none; }
html.vc-snap .vc-snap-grip{ display:inline-flex; align-items:center; justify-content:center; width:22px; min-height:30px; margin-right:2px; color:var(--muted, #889); font-size:16px; cursor:grab; user-select:none; flex:0 0 auto; }