/* ALWIS multi-user: presence, share panel, remote carets, focus rings, loading. */
.cb-root { position:relative; display:flex; align-items:center; gap:6px; flex:none; order:10; }
.cb-root[data-state="idle"] .cb-stack, .cb-root[data-state="closed"] .cb-stack { display:none; }
.cb-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.cb-stack { display:flex; align-items:center; padding-left:8px; }
.cb-av { --c:#4a545d; --cb:#66707a; --cs:rgba(0,0,0,.12); --cf:rgba(0,0,0,.2); position:relative; display:inline-grid; place-items:center; flex:none; border-radius:50%; background:var(--c); color:#fff; font:600 12px/1 var(--sans); text-transform:uppercase; user-select:none; box-shadow:0 0 0 2px var(--faceplate); transition:transform .18s var(--ease), opacity .2s, box-shadow .2s; }
.cb-md { width:28px; height:28px; } .cb-sm { width:18px; height:18px; font-size:10px; box-shadow:0 0 0 1.5px var(--sheet); } .cb-lg { width:34px; height:34px; font-size:14px; }
.cb-stack .cb-av { margin-left:-9px; cursor:pointer; border:0; }
.cb-stack .cb-av:hover, .cb-stack .cb-av:focus-visible { transform:translateY(-2px); z-index:2; outline:none; box-shadow:0 0 0 2px var(--faceplate), 0 0 0 4px var(--cb); }
.cb-stack .cb-av.following { box-shadow:0 0 0 2px var(--faceplate), 0 0 0 4px var(--cb); z-index:1; }
.cb-av.away { opacity:.5; box-shadow:0 0 0 2px var(--faceplate), 0 0 0 3.5px var(--off); animation:cbPulse 1.6s ease-in-out infinite; }
.cb-more { background:var(--recess); color:var(--ink-2); text-transform:none; cursor:pointer; }
.cb-trigger { position:relative; }
.cb-dot { position:absolute; top:5px; right:5px; width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 2px var(--faceplate); display:none; }
.cb-root[data-state="live"] .cb-dot { display:block; } .cb-root[data-state="reconnecting"] .cb-dot { display:block; background:var(--warn); animation:cbPulse 1s infinite; }
@keyframes cbPulse { 50% { opacity:.55; } }

/* ---- share panel ---- */
.cb-pop { position:absolute; top:calc(100% + 8px); right:0; z-index:60; width:min(372px, calc(100vw - 24px)); max-height:calc(100vh - 72px); overflow:auto; padding:18px; background:var(--raised); color:var(--ink); border:1px solid var(--seam-2); border-radius:var(--r-l); box-shadow:0 16px 44px rgba(10,14,20,.24); transform-origin:top right; animation:cbIn .16s var(--ease); }
.cb-pop[hidden] { display:none; }
@keyframes cbIn { from { opacity:0; transform:translateY(-4px) scale(.98); } }
.cb-h { margin:0 0 6px; font:650 16px/1.3 var(--sans); letter-spacing:-.005em; }
.cb-p { margin:0 0 16px; font-size:13.5px; line-height:1.55; color:var(--ink-2); }
.cb-sub { margin:0; font-size:12.5px; color:var(--ink-3); }
.cb-l { display:block; margin:0 0 6px; font-size:12.5px; font-weight:600; color:var(--ink); }
.cb-input { width:100%; box-sizing:border-box; padding:10px 12px; margin:0; font:inherit; font-size:14px; color:var(--ink); background:var(--sheet); border:1px solid var(--seam-2); border-radius:var(--r); }
.cb-input:focus-visible { outline:2px solid var(--signal); outline-offset:1px; }
.cb-input::placeholder { color:var(--ink-3); }
.cb-url { font-family:var(--mono); font-size:12px; text-overflow:ellipsis; margin-bottom:8px; }
.cb-hint { margin:6px 0 14px; font-size:12px; line-height:1.5; color:var(--ink-3); }
.cb-foot { margin:12px 0 0; font-size:12px; line-height:1.5; color:var(--ink-3); }
.cb-err { margin:-4px 0 12px; font-size:12.5px; color:var(--err); }
.cb-wide { width:100%; justify-content:center; display:inline-flex; align-items:center; gap:7px; }
.cb-pop .btn { min-height:38px; } .cb-pop .btn.pri.done { background:var(--ok); border-color:var(--ok); }
.cb-form .cb-input { margin-bottom:0; }
.cb-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:14px; }
.cb-pill { flex:none; display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border:1px solid var(--seam-2); border-radius:99px; font-size:12px; font-weight:550; color:var(--ink-2); }
.cb-pill::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--off); }
.cb-pill.ok::before { background:var(--ok); } .cb-pill.warn::before { background:var(--warn); animation:cbPulse 1s infinite; }
.cb-sec { margin:0 0 16px; padding-top:14px; border-top:1px solid var(--seam); } .cb-head + .cb-sec { border-top:0; padding-top:0; }
.cb-label { margin:0 0 8px; font-size:11.5px; font-weight:650; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); }
.cb-check { display:flex; gap:9px; align-items:center; margin:0; font-size:13px; color:var(--ink-2); cursor:pointer; }
.cb-list { list-style:none; margin:0; padding:0; display:grid; gap:2px; max-height:280px; overflow:auto; }
.cb-row { display:flex; align-items:center; gap:10px; padding:7px 6px; border-radius:var(--r); } .cb-row:hover { background:var(--hover); } .cb-row.away { opacity:.8; }
.cb-row .cb-av { box-shadow:none; width:30px; height:30px; }
.cb-who { display:grid; min-width:0; flex:1; } .cb-who b { font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .cb-who small { font-size:12px; color:var(--ink-3); }
.cb-acts { display:flex; gap:2px; flex:none; }
.cb-act { padding:4px 8px; border:0; border-radius:var(--r); background:none; font:inherit; font-size:12px; font-weight:550; color:var(--signal); cursor:pointer; }
.cb-act:hover { background:var(--sel); } .cb-act.on { background:var(--signal); color:#fff; } .cb-act.danger { color:var(--err); } .cb-act.danger:hover { background:color-mix(in srgb, var(--err) 12%, transparent); }
.cb-leave { margin-top:2px; } .cb-pop .cb-leave { color:var(--err); }
.cb-pending { display:flex; align-items:center; gap:12px; padding:8px 2px; font-size:13.5px; color:var(--ink-2); }

/* ---- status banner ---- */
.cb-banner { position:sticky; top:0; z-index:50; flex:none; display:flex; align-items:center; justify-content:center; gap:12px; padding:8px 14px; font-size:13px; text-align:center; border-bottom:1px solid var(--seam-2); background:var(--recess); color:var(--ink); }
.cb-banner[data-kind="warn"] { background:color-mix(in srgb, var(--warn) 14%, var(--sheet)); } .cb-banner[data-kind="err"] { background:color-mix(in srgb, var(--err) 12%, var(--sheet)); } .cb-banner[data-kind="follow"] { background:color-mix(in srgb, var(--signal) 11%, var(--sheet)); }
.cb-banner[hidden] { display:none; }
.cb-banner-btn { padding:3px 10px; border:1px solid var(--seam-2); border-radius:var(--r); background:var(--raised); color:var(--ink); font:inherit; font-size:12.5px; cursor:pointer; }

/* ---- join dialog ---- */
.cb-modal { position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:16px; background:rgba(10,14,20,.5); backdrop-filter:blur(3px); animation:cbIn .18s var(--ease); }
.cb-card { width:min(420px,100%); padding:26px; background:var(--raised); color:var(--ink); border-radius:14px; border:1px solid var(--seam-2); box-shadow:0 24px 60px rgba(0,0,0,.3); }
.cb-card-icon { display:grid; place-items:center; width:44px; height:44px; margin-bottom:14px; border-radius:12px; background:color-mix(in srgb, var(--signal) 13%, var(--raised)); color:var(--signal); } .cb-card-icon .ic { width:22px; height:22px; }
.cb-card .cb-hint { margin-bottom:16px; }
.cb-actions { display:flex; gap:8px; justify-content:flex-end; } .cb-actions .btn { min-height:38px; padding:0 16px; }

/* ---- loading overlay for guests waiting on the host ---- */
.cb-loading { position:absolute; inset:0; z-index:30; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; background:linear-gradient(100deg, transparent 30%, rgba(127,127,127,.12) 50%, transparent 70%) 0 0/300% 100%, color-mix(in srgb, var(--sheet) 88%, transparent); animation:cbShimmer 1.4s linear infinite; font-size:13px; color:var(--ink-2); }
@keyframes cbShimmer { to { background-position:-300% 0, 0 0; } }
.cb-spin { width:20px; height:20px; border-radius:50%; border:2.5px solid var(--seam-2); border-top-color:var(--signal); animation:cbSpin .8s linear infinite; flex:none; }
@keyframes cbSpin { to { transform:rotate(360deg); } }

/* ---- explorer badges: who has this file open, pinned to the right edge of the row ---- */
.cb-badges { display:inline-flex; align-items:center; margin-left:auto; padding:0 6px 0 8px; flex:none; }
.cb-badges .cb-av { margin-left:-5px; } .cb-badges .cb-av:first-child { margin-left:0; }
[data-path][data-kind=file]:has(.cb-badges) .acts { margin-left:0; }

/* ---- remote carets in CodeMirror ---- */
.cm-cb-caret { position:relative; margin-left:-1px; margin-right:-1px; border-left:2px solid var(--cb); pointer-events:none; }
.cm-cb-flag { position:absolute; top:-1.35em; left:-2px; padding:1px 5px; font:600 10px/1.3 var(--sans); color:#fff; background:var(--c); border-radius:3px 3px 3px 0; white-space:nowrap; opacity:0; transform:translateY(2px); transition:opacity .15s, transform .15s; pointer-events:none; }
.cm-cb-caret:hover .cm-cb-flag, .cm-cb-caret.recent .cm-cb-flag { opacity:1; transform:none; }
.cm-cb-sel { background:var(--cs); border-radius:0; }
/* Freshly typed remote text: square-cornered and gap-free so neighbouring letters read as one band. */
.cm-cb-ins { background:var(--cf); border-radius:0; padding:0; margin:0; box-decoration-break:clone; animation:cbFade var(--cb-fade,4s) ease-out forwards; }
@keyframes cbFade { 0%,35% { background:var(--cf); } 100% { background:transparent; } }

/* ---- shared focus: cells, rows, new rows and columns ---- */
[data-cb-focus] { outline:2px solid var(--cb); outline-offset:-2px; position:relative; }
[data-cb-focus]::after { content:attr(data-cb-name); position:absolute; top:-1px; right:-1px; transform:translateY(-100%); padding:1px 5px; font:600 10px/1.3 var(--sans); color:#fff; background:var(--c); border-radius:3px 3px 0 0; white-space:nowrap; z-index:5; pointer-events:none; }
tr[data-cb-focus] { outline-offset:-1px; background:var(--cs); } tr[data-cb-focus]::after { display:none; }
tr.cb-ghostline { outline:2px dashed var(--cb); background:var(--cs); } tr.cb-ghostline td { padding:6px 10px; font-size:13px; } tr.cb-ghostline td.cb-active { background:var(--cf); }
tr.cb-ncol td { padding:8px 12px; font:500 13px var(--mono); color:var(--ink); }
tr.cb-ncol { outline:2px dashed var(--cb); }
/* what somebody is typing in a cell appears live, on top of the cell */
.cb-live-value { position:absolute; z-index:8; inset:0; display:flex; align-items:center; padding:0 8px; overflow:hidden; white-space:pre; text-overflow:ellipsis; color:var(--ink); background:color-mix(in srgb, var(--c) 14%, var(--sheet)); box-shadow:inset 0 0 0 2px var(--cb); pointer-events:none; }
.cb-live-value:empty::before { content:"…"; color:var(--ink-3); }
.cb-mouse { position:fixed; z-index:150; pointer-events:none; width:16px; height:16px; margin:-2px 0 0 -2px; transition:left .09s linear, top .09s linear; }
.cb-mouse svg { width:16px; height:16px; fill:var(--cb); stroke:#fff; stroke-width:1.5; filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.cb-mouse span { position:absolute; left:14px; top:12px; padding:1px 6px; font:600 10px/1.4 var(--sans); color:#fff; background:var(--c); border-radius:9px; white-space:nowrap; }
.cb-click { position:fixed; z-index:149; pointer-events:none; width:26px; height:26px; margin:-13px 0 0 -13px; border-radius:50%; border:2px solid var(--cb); animation:cbClick .55s ease-out forwards; }
@keyframes cbClick { from { transform:scale(.3); opacity:1; } to { transform:scale(1.6); opacity:0; } }
@media (prefers-reduced-motion:reduce) { .cb-pop,.cb-modal { animation:none; } .cb-av.away,.cb-spin,.cb-loading,.cb-click { animation:none; } .cm-cb-ins { animation-duration:.01s; } .cb-mouse { transition:none; } }
@media (max-width:680px) { .cb-pop { position:fixed; top:56px; right:8px; left:8px; width:auto; } .cb-stack .cb-av:nth-child(n+3) { display:none; } }