/* Collaborate: dark, calm, chunky. Every main action is one big button (48 px+), icon + label; nothing hover-only. */
:root { --bg: #121418; --panel: #1b1f26; --plate: #232933; --plate2: #2a313d; --line: #2e3542; --text: #e8ecf1; --dim: #93a0ae; --accent: #4cc9ff; --ok: #3ddc84; --bad: #ff5a4e; --warn: #ffb547; --board: #2b2f36;
  --r: 14px; --shadow: 0 0 0 1px #05070a, inset 0 1px 0 rgba(255, 255, 255, .06); --font: "Segoe UI", system-ui, -apple-system, sans-serif; --display: Bahnschrift, "Segoe UI", system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 15px/1.45 var(--font); -webkit-font-smoothing: antialiased; overscroll-behavior: none; }
body { user-select: none; -webkit-tap-highlight-color: transparent; }
input, textarea, [contenteditable] { user-select: text; }
button { font: inherit; color: inherit; cursor: pointer; }
.ic { width: 22px; height: 22px; flex: none; }
.dim { color: var(--dim); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.sp { flex: 1; }
#app { height: 100%; display: flex; flex-direction: column; }
.boot { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 14px; font: 800 22px var(--display); letter-spacing: .04em; }
.logo-mark { width: 30px; height: 30px; border-radius: 9px; display: inline-block; background: url(/icon-192.png) center / cover; flex: none; }
.logo-mark.big { width: 72px; height: 72px; border-radius: 20px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px; border: 0; border-radius: 12px; font-weight: 700; letter-spacing: .01em; color: var(--text); white-space: nowrap;
  background: linear-gradient(180deg, #323a47, #252b35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -3px 0 rgba(0, 0, 0, .4), 0 0 0 1px #05070a; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible, .act:focus-visible, .icon-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.btn.go { background: linear-gradient(180deg, #56e39b, #22a463); color: #04210f; }
.btn.blue { background: linear-gradient(180deg, #6fd6ff, #1f8fc4); color: #04131c; }
.btn.red { background: linear-gradient(180deg, #ff6b5e, #c4372b); color: #fff; }
.btn.ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.btn.big { min-height: 58px; font-size: 17px; padding: 0 24px; border-radius: 14px; }
.btn.small { min-height: 44px; padding: 0 14px; font-size: 13.5px; }
.btn[disabled] { opacity: .5; cursor: default; }
.icon-btn { width: 44px; height: 44px; border: 0; border-radius: 10px; display: grid; place-items: center; background: transparent; color: var(--text); }
.icon-btn.on { background: var(--accent); color: #04131c; }
input.field, select.field, textarea.field { min-height: 48px; width: 100%; padding: 0 14px; border-radius: 12px; border: 0; background: #0b0d11; color: #fff; font: 600 16px var(--font); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .7), 0 0 0 1px var(--line); outline: 0; }
input.field:focus, select.field:focus, textarea.field:focus { box-shadow: inset 0 2px 6px rgba(0, 0, 0, .7), 0 0 0 2px var(--accent); }
input.code { font: 800 22px var(--display); letter-spacing: .2em; text-transform: uppercase; text-align: center; }

/* top bar */
.top { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--panel); box-shadow: 0 1px 0 #05070a; min-height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; font: 800 20px var(--display); letter-spacing: .03em; }
.me-chip { display: flex; align-items: center; gap: 10px; padding: 4px 6px 4px 12px; border-radius: 999px; background: var(--plate); box-shadow: var(--shadow); border: 0; min-height: 48px; }
.ava { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 800 15px var(--display); color: #0b0c0f; position: relative; flex: none; }
.ava.lg { width: 52px; height: 52px; font-size: 18px; }
.ava.xl { width: 104px; height: 104px; font-size: 36px; }
.ava .dot { position: absolute; right: -1px; bottom: -1px; width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--plate); background: #59616d; }
.ava .dot.on { background: var(--ok); } .ava .dot.call { background: var(--warn); }
.net-off { padding: 6px 12px; border-radius: 999px; background: #3d2522; color: #ff8c7a; font-weight: 700; font-size: 13px; }

/* home */
.home { flex: 1; display: grid; grid-template-columns: minmax(320px, 1fr) minmax(0, 1.4fr); gap: 16px; padding: 16px; min-height: 0; overflow: auto; }
.card { background: var(--panel); border-radius: 16px; padding: 18px; box-shadow: var(--shadow); min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.card h3 { margin: 0; font: 800 13px var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.friend { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border-radius: 14px; background: var(--plate); box-shadow: var(--shadow); }
.friend .who { flex: 1; min-width: 0; } .friend b { display: block; font-size: 16.5px; } .friend small { color: var(--dim); }
.mycode { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; background: #0f1216; box-shadow: inset 0 0 0 1px var(--line); }
.mycode .code-txt { font: 800 24px var(--display); letter-spacing: .18em; flex: 1; }
.empty { padding: 18px; border-radius: 14px; text-align: center; color: var(--dim); background: #0f1216; box-shadow: inset 0 0 0 1px var(--line); }
.welcome { margin: auto; width: min(460px, 92vw); display: flex; flex-direction: column; gap: 16px; align-items: stretch; }
.welcome h1 { margin: 0; font: 800 30px var(--display); text-align: center; }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.swatch { width: 44px; height: 44px; border-radius: 50%; border: 0; box-shadow: 0 0 0 2px #05070a; }
.swatch.on { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #05070a; }

/* call */
.callwrap { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.stagewrap { flex: 1; display: flex; gap: 10px; padding: 10px; min-height: 0; }
.stage { flex: 1; position: relative; border-radius: var(--r); overflow: hidden; background: #0d0f12; box-shadow: 0 0 0 1px #05070a; min-width: 0; }
.stage > .act-host { position: absolute; inset: 0; }
.strip { width: 228px; display: flex; flex-direction: column; gap: 8px; overflow: auto; flex: none; }
.strip.off { display: none; }
.faces { position: absolute; inset: 0; display: grid; gap: 10px; padding: 10px; align-content: center; }
.tile { position: relative; border-radius: 12px; overflow: hidden; background: #1a1e25; aspect-ratio: 16 / 9; box-shadow: 0 0 0 1px #05070a; flex: none; min-height: 0; }
.faces .tile { aspect-ratio: auto; height: 100%; }
/* double-click a face: it fills the stage on your screen (11-07); "Make small", Esc or another double-click puts it back */
.faces .tile.big { position: absolute; inset: 10px; z-index: 4; height: auto; box-shadow: 0 0 0 2px #3ddc84, 0 20px 60px rgba(0, 0, 0, .6); }
.faces .tile.big video { object-fit: cover; } /* (11-07: no bars; face tracking keeps the face in view) */
.tile .unspot { position: absolute; right: 54px; top: 8px; z-index: 6; background: rgba(0, 0, 0, .7); }
.tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.tile video.mirror { transform: scaleX(-1); }
.tile .noface { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 10px; }
.tile .hid-note { max-width: 80%; text-align: center; color: #cfd8e2; font-size: 13px; font-weight: 600; }
.tile .tag { position: absolute; left: 8px; bottom: 8px; display: flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 8px; background: rgba(0, 0, 0, .6); font-weight: 700; font-size: 13px; max-width: calc(100% - 16px); }
.tile .tag .ic { width: 16px; height: 16px; color: #ff8c7a; }
.tile .eye { position: absolute; right: 6px; top: 6px; width: 44px; height: 44px; border: 0; border-radius: 10px; background: rgba(0, 0, 0, .55); display: grid; place-items: center; color: #fff; }
.tile.talk { box-shadow: 0 0 0 3px var(--ok), 0 0 18px rgba(61, 220, 132, .35); }
.tile.hidden video { display: none; }
.screens { position: absolute; inset: 0; display: grid; gap: 10px; padding: 10px; }
.scr { position: relative; border-radius: 10px; overflow: hidden; background: #000; box-shadow: 0 0 0 2px var(--c, #333); min-height: 0; }
.scr video { width: 100%; height: 100%; object-fit: contain; display: block; }
.scr .tag { position: absolute; left: 10px; top: 10px; padding: 5px 10px; border-radius: 8px; background: rgba(0, 0, 0, .65); font-weight: 700; font-size: 13px; }
.scr .full { position: absolute; right: 8px; top: 8px; }
/* "Fix colors" (11-07): an HDR screen shared from Windows comes out milky; deeper blacks, more contrast and colour on the watcher's side */
.scr .hdr { position: absolute; right: 56px; top: 8px; padding: 6px 12px; font-size: 13px; background: rgba(0, 0, 0, .65); }
.scr .hdr.on { background: rgba(46, 204, 113, .85); color: #06210f; }
.scr.hdrfix video { filter: brightness(.78) contrast(1.5) saturate(1.45); }
.bar { display: flex; gap: 8px; padding: 10px 12px 12px; background: var(--panel); box-shadow: 0 -1px 0 #05070a; overflow-x: auto; align-items: stretch; scrollbar-width: thin; }
.bar .sep { width: 1px; background: var(--line); margin: 6px 2px; flex: none; }
.act { flex: none; min-width: 74px; min-height: 64px; border: 0; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 6px 8px; font-size: 12px; font-weight: 700; position: relative;
  background: linear-gradient(180deg, #323a47, #252b35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -3px 0 rgba(0, 0, 0, .4), 0 0 0 1px #05070a; }
.act .ic { width: 26px; height: 26px; }
.act:active { transform: translateY(1px); }
.act.on { background: linear-gradient(180deg, #6fd6ff, #1f8fc4); color: #04131c; }
.act.off { color: #ff8c7a; background: linear-gradient(180deg, #3d2522, #241615); }
.act.leave { background: linear-gradient(180deg, #ff6b5e, #c4372b); color: #fff; }
.act.friends { background: linear-gradient(180deg, #4be08a, #1f9d55); color: #04210f; } /* Friends: add people, one tap (11-07) */
.act .badge { position: absolute; top: 4px; right: 6px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--bad); color: #fff; font-size: 11px; line-height: 20px; }
.status-pill { position: absolute; z-index: 5; left: 12px; top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.pill { border: 0; border-radius: 999px; padding: 0 14px; min-height: 40px; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; color: #fff; background: rgba(0, 0, 0, .65); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }
.pill.on { background: var(--ok); color: #04210f; } .pill.rec { background: var(--bad); }

/* chat drawer */
.chat { position: absolute; right: 0; top: 0; bottom: 0; width: min(340px, 100%); background: var(--panel); z-index: 20; display: flex; flex-direction: column; box-shadow: -14px 0 30px rgba(0, 0, 0, .5); }
.chat header { display: flex; align-items: center; padding: 8px 8px 8px 16px; font: 800 13px var(--display); letter-spacing: .14em; }
.msgs { flex: 1; overflow: auto; padding: 8px 12px; display: flex; flex-direction: column; gap: 8px; user-select: text; }
.msg { max-width: 88%; padding: 8px 12px; border-radius: 14px; background: var(--plate); word-wrap: break-word; }
.msg.me { align-self: flex-end; background: #1d5f84; }
.msg .from { font-size: 12px; font-weight: 800; margin-bottom: 2px; }
.msg img, .msg video { display: block; max-width: 100%; max-height: 220px; border-radius: 10px; margin-top: 4px; }
.msg .fchip { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 8px; border-radius: 10px; background: rgba(0, 0, 0, .3); }
.chat .compose { display: flex; gap: 8px; padding: 10px; align-items: flex-end; }
.chat .compose textarea { flex: 1; min-height: 48px; max-height: 120px; padding: 13px 12px; resize: none; scrollbar-width: none; font-size: 15px; line-height: 22px; }
.chat .drop-hint { position: absolute; inset: 0; display: none; place-items: center; background: rgba(76, 201, 255, .18); border: 3px dashed var(--accent); font: 800 18px var(--display); z-index: 3; }
.chat.dragging .drop-hint { display: grid; }

/* ring */
.ring-back { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(5, 6, 8, .72); backdrop-filter: blur(6px); }
.ring { width: min(360px, 92vw); border-radius: 26px; padding: 30px 26px; text-align: center; background: var(--panel); box-shadow: 0 0 0 1px #05070a, 0 30px 70px rgba(0, 0, 0, .7); display: flex; flex-direction: column; gap: 6px; align-items: center; }
.ring .ava { animation: ringpulse 1.3s ease-out infinite; margin-bottom: 10px; }
@keyframes ringpulse { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 132, .55); } 100% { box-shadow: 0 0 0 30px rgba(61, 220, 132, 0); } }
.ring h2 { margin: 0; font: 800 22px var(--display); } .ring .row { margin-top: 18px; justify-content: center; }

/* modal + toast */
.modal-back { position: fixed; inset: 0; z-index: 80; background: rgba(5, 6, 8, .6); display: grid; place-items: center; padding: 16px; }
.modal { width: min(760px, 100%); max-height: 88vh; display: flex; flex-direction: column; border-radius: 18px; background: var(--panel); box-shadow: 0 0 0 1px #05070a, 0 30px 70px rgba(0, 0, 0, .7); }
.modal header { display: flex; align-items: center; padding: 10px 10px 4px 20px; } .modal header h3 { flex: 1; margin: 0; font: 800 18px var(--display); }
.modal-body { padding: 10px 20px 20px; overflow: auto; display: flex; flex-direction: column; gap: 12px; }
.toast { position: fixed; left: 50%; bottom: 100px; transform: translate(-50%, 20px); opacity: 0; transition: .2s; z-index: 99; padding: 12px 18px; border-radius: 12px; background: #05070a; color: #fff; font-weight: 600; box-shadow: 0 10px 30px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .1); pointer-events: none; max-width: 90vw; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.src-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.src { border: 0; border-radius: 12px; padding: 8px; background: var(--plate); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; text-align: left; }
.src img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #000; border-radius: 8px; }
.src span { font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src.on { box-shadow: 0 0 0 3px var(--accent); }
.toggle { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px; border-radius: 12px; background: var(--plate); box-shadow: var(--shadow); font-weight: 700; border: 0; }
.toggle .sw { width: 52px; height: 30px; border-radius: 15px; background: #3a4352; position: relative; flex: none; transition: .15s; }
.toggle .sw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: .15s; }
.toggle.on .sw { background: var(--ok); } .toggle.on .sw::after { left: 25px; }

/* files + picker tiles */
.pk-path, .crumbs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.crumb { border: 0; background: transparent; color: var(--text); font-weight: 700; min-height: 40px; padding: 0 8px; border-radius: 8px; }
.pk-grid, .fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.tile-f { position: relative; border-radius: 14px; padding: 12px; background: var(--plate); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 4px; min-height: 104px; cursor: pointer; }
.tile-f b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tile-f small { color: var(--dim); font-size: 12px; }
.tile-f .fold { width: 46px; height: 36px; border-radius: 6px 6px 8px 8px; background: var(--c); position: relative; margin-bottom: 6px; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .15); }
.tile-f .fold::before { content: ""; position: absolute; left: 0; top: -7px; width: 20px; height: 9px; border-radius: 5px 5px 0 0; background: var(--c); }
.tile-f .prev { height: 92px; border-radius: 10px; overflow: hidden; background: #0d0f12; display: grid; place-items: center; margin-bottom: 4px; }
.tile-f .prev img, .tile-f .prev video { width: 100%; height: 100%; object-fit: cover; }
.big-ic .ic { width: 40px; height: 40px; } .k-3d { color: #4cc9ff; } .k-pdf, .k-html { color: #ff5d8f; } .k-doc { color: #ff9f43; } .k-sheet { color: #3ddc84; } .k-board { color: #3ddc84; } .k-video { color: #ff4757; } .k-audio { color: #b28dff; }
.tile-f.drop-on { box-shadow: 0 0 0 3px var(--accent); }
.tile-f.sel { box-shadow: 0 0 0 3px var(--accent); }

/* getting in + getting ready (join.js) */
.center { text-align: center; } .small { font-size: 13px; }
.welcome p { margin: 0; }
input.field.big { min-height: 60px; font-size: 20px; text-align: center; }
.note { margin: 0; padding: 12px 14px; border-radius: 12px; background: #10161d; box-shadow: inset 0 0 0 1px var(--line); line-height: 1.5; }
.note.warn { background: #2b2214; box-shadow: inset 0 0 0 1px #5a4317; color: #ffd9a0; }
.wl-cam { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #0b0d11; box-shadow: 0 0 0 1px #05070a; }
.wl-cam video { width: 100%; height: 100%; object-fit: cover; display: block; }
.wl-cam video.mirror, .ct-cam video.mirror { transform: scaleX(-1); }
.wl-cam-msg { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--dim); font-weight: 700; }
.wl-cam-msg .ic { width: 44px; height: 44px; }
.wl-cam.blocked .wl-cam-msg { color: #ff8c7a; }
.home-l { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.home-l > .card { flex: none; }
.by-code summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 700; color: var(--dim); list-style: none; }
.by-code summary::before { content: "+"; display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 8px; border-radius: 8px; background: var(--plate); color: var(--text); }
.by-code[open] summary::before { content: "–"; }
.by-code > :not(summary) { margin-top: 10px; }
.ready-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.rd { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px; border: 0; border-radius: 14px; text-align: left; background: var(--plate); box-shadow: var(--shadow); }
.rd .ic { width: 28px; height: 28px; color: var(--accent); }
.rd b { display: block; font-size: 15px; } .rd small { color: var(--dim); font-size: 12.5px; }
.jc-box { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 16px; border-radius: 14px; background: #10161d; box-shadow: inset 0 0 0 1px var(--line); }
.jc-l { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 4px; }
.jc-code { font: 800 38px/1.1 var(--display); letter-spacing: .16em; color: #fff; user-select: text; }
input.join-code { min-height: 68px; font: 800 30px var(--display); text-align: center; letter-spacing: .04em; }
input.join-code.is-link { font: 600 15px var(--font); text-align: left; letter-spacing: 0; }
.fam-code { margin: 4px 0 0; padding: 22px 16px; border-radius: 18px; text-align: center; font: 800 clamp(30px, 6vw, 52px)/1.1 var(--display); letter-spacing: .05em; color: #fff; user-select: text;
  background: linear-gradient(135deg, #17324a, #2a1f4a 55%, #3d2a1c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 10px 30px rgba(0, 0, 0, .4); text-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
.fam-code.used { opacity: .45; text-decoration: line-through; }
.fam-own:not([hidden]) { display: flex; gap: 10px; }
.fam-own .field { flex: 1; }
.home-invite { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
/* group call (11-07): the online friends as bubbles, all picked; tap one to leave them out; one big Call everyone */
.group-call { display: flex; flex-direction: column; gap: 12px; padding: 14px; margin-bottom: 10px; border-radius: 16px; background: linear-gradient(135deg, #16402c, #1d1b33); box-shadow: var(--shadow); }
.gc-faces { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.gc-face { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; border: 0; border-radius: 14px; background: transparent; color: #fff; cursor: pointer; transition: transform .12s, opacity .12s; }
.gc-face .ava { box-shadow: 0 0 0 3px #3ddc84, 0 6px 16px rgba(0, 0, 0, .45); }
.gc-face:hover { transform: translateY(-2px) scale(1.04); }
.gc-face.out { opacity: .38; } .gc-face.out .ava { box-shadow: 0 0 0 2px rgba(255, 255, 255, .2); }
.gc-face small { font-weight: 700; font-size: 12px; max-width: 86px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-go { align-self: stretch; min-height: 56px; font-size: 17px; }
.call-hero { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 16px; background: linear-gradient(135deg, #18324a, #1d1b33); box-shadow: var(--shadow); flex-wrap: wrap; }
.call-hero .who { flex: 1; min-width: 140px; } .call-hero b { display: block; font: 800 24px var(--display); } .call-hero small { color: var(--dim); }
.call-hero .btn { min-height: 64px; font-size: 19px; padding: 0 28px; }
.inv-link { font: 600 14px Consolas, "Cascadia Code", monospace !important; text-overflow: ellipsis; }
.sub-h { margin: 6px 0 0; font: 800 13px var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; line-height: 1.5; }
.steps .ic { width: 18px; height: 18px; vertical-align: -3px; }
.pill.warn { background: #6b4a12; }
.ct-sum { padding: 14px 16px; border-radius: 14px; font: 800 17px var(--display); }
.ct-sum.ok { background: #12301f; color: #7ee2a0; } .ct-sum.warn { background: #2b2214; color: #ffd9a0; } .ct-sum.bad { background: #3d2522; color: #ffb3a7; } .ct-sum.run { background: var(--plate); color: var(--dim); }
.ct-grid { display: grid; grid-template-columns: 1fr 240px; gap: 14px; align-items: start; }
.ct-rows { display: flex; flex-direction: column; gap: 8px; }
.ct-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--plate); }
.ct-row > span > b { display: block; } .ct-row small { color: var(--dim); font-size: 13px; line-height: 1.45; display: block; } .ct-row small b { color: var(--text); }
.ct-ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; flex: none; background: #3a4352; }
.ct-row.ok .ct-ic { background: var(--ok); color: #04210f; } .ct-row.warn .ct-ic { background: var(--warn); color: #2b1a00; } .ct-row.bad .ct-ic { background: var(--bad); color: #fff; }
.ct-row.run .ct-ic { animation: ctspin 1s linear infinite; }
@keyframes ctspin { 50% { opacity: .35; } }
.ct-cam { display: flex; flex-direction: column; gap: 8px; }
.ct-cam video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; background: #0b0d11; }
.ct-meter { height: 12px; border-radius: 6px; background: #0b0d11; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.ct-meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #3ddc84, #b6f36b); transition: width .08s; }

/* phones: the bar scrolls, faces float small, the chat covers the stage */
@media (max-width: 760px) {
  .home { grid-template-columns: 1fr; grid-auto-rows: max-content; padding: 10px; gap: 12px; }
  /* Jacob 11-07, "SHE NEEDS TO SEE OUR FACES": with the board, screens or a movie open, the cameras stay on a phone as a
     row across the top (swipe for more) instead of disappearing; Faces puts them full size */
  .stagewrap { flex-direction: column; }
  .strip { order: -1; flex-direction: row; width: auto; height: 118px; overflow-x: auto; overflow-y: hidden; gap: 6px; }
  .strip .tile { height: 100%; width: auto; aspect-ratio: 4 / 3; }
  .act { min-width: 64px; min-height: 58px; }
  .bar { padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); gap: 6px; }
  .stagewrap { padding: 6px; }
  .top { padding: 8px 10px; padding-top: calc(8px + env(safe-area-inset-top)); min-height: 56px; }
  .brand { font-size: 18px; }
  .me-chip > span:first-child { display: none; }
  .ct-grid { grid-template-columns: 1fr; }
  .ct-cam { order: -1; }
  .friend { flex-wrap: wrap; }
  .friend .btn.go { flex: 1 0 100%; min-height: 52px; }
  .faces { gap: 6px; padding: 6px; }
  .modal-back { padding: 8px; align-items: end; }
  .modal { max-height: 92vh; }
  .welcome { padding: 18px 0; }
}
/* phones held upright with 2+ people: faces stack instead of tiny side-by-side tiles */
@media (max-width: 560px) and (orientation: portrait) {
  .faces { grid-template-columns: 1fr !important; grid-template-rows: none !important; grid-auto-rows: 1fr; }
}
/* "New version" pill (11-07): small, at the top, never over the call buttons; tap to update, x or swipe for later */
.upd-pill { position: fixed; left: 50%; top: calc(64px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 9999; display: flex; align-items: center; gap: 2px; border-radius: 999px; background: #1f9d55; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); touch-action: pan-y; }
.upd-pill button { border: 0; background: transparent; color: #04210f; font-weight: 800; font-size: 13px; min-height: 36px; cursor: pointer; }
.upd-pill .upd-go { padding: 0 6px 0 14px; }
.upd-pill .upd-x { padding: 0 12px; font-size: 15px; border-left: 1px solid rgba(0, 0, 0, .2); }
/* music "now playing" bar with your own volume (11-07): floats on the stage while music plays and you're on another screen */
.mu-mini { position: absolute; left: 50%; transform: translateX(-50%); top: 12px; z-index: 6; display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 10px; border-radius: 999px; background: rgba(20, 16, 34, .88); box-shadow: 0 0 0 1px rgba(178, 141, 255, .5), 0 8px 24px rgba(0, 0, 0, .5); max-width: min(420px, 92%); }
.mu-mini[hidden] { display: none; }
.mu-mini-ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: conic-gradient(#b28dff, #4cc9ff, #ff9f43, #b28dff); color: #fff; flex: none; }
.mu-mini-name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
.mu-mini-vol { width: 120px; height: 32px; accent-color: #b28dff; flex: none; }
.mu-mini-x { border: 0; background: transparent; color: #cfd8e2; font-size: 14px; padding: 4px 6px; cursor: pointer; }
@media (max-width: 760px) { .mu-mini { top: auto; bottom: 10px; } .mu-mini-vol { width: 100px; } }
/* version (11-07): in the top bar, and on each person's video; orange on someone running a different version than you */
.brand .ver { margin-left: 8px; font: 700 11px/1 system-ui, sans-serif; letter-spacing: .04em; color: #8a96a3; padding: 3px 6px; border-radius: 6px; background: rgba(255, 255, 255, .06); vertical-align: middle; }
.tag .tag-v { margin-left: 4px; font-size: 10px; font-weight: 700; color: #9aa7b4; }
.tag .tag-v.old { color: #ffb347; }
/* sound pills (11-07): music and anyone's shared screen sound, each with its own volume just for you, at the top of the stage */
.sounds { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; max-width: 94%; }
.sounds > * { pointer-events: auto; }
.sounds .mu-mini { position: static; transform: none; }
.snd-pill { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px; background: rgba(12, 24, 34, .88); box-shadow: 0 0 0 1px rgba(76, 201, 255, .45), 0 8px 24px rgba(0, 0, 0, .5); }
.snd-pill b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.snd-pill input { width: 120px; height: 32px; accent-color: #4cc9ff; }
.snd-ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #1f8fc4; color: #fff; flex: none; }
.mu-rm { min-width: 44px; padding: 0 12px; color: #ff8c7a; }
@media (max-width: 760px) { .sounds { top: auto; bottom: 10px; } .snd-pill input { width: 96px; } }
/* "X added you as a friend!" pop-up (11-07): faces pop in, one big Yes, a confetti burst */
.fa-pop { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 6px 0; }
.fa-pop h2 { margin: 0; font-size: 22px; }
.fa-faces { display: flex; justify-content: center; }
.fa-faces .ava { margin: 0 -8px; box-shadow: 0 0 0 4px #1b2029; animation: faPop .45s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes faPop { from { transform: scale(.2); opacity: 0; } to { transform: none; opacity: 1; } }
.fa-burst { position: fixed; top: -40px; z-index: 10000; font-size: 28px; pointer-events: none; animation: faFall 2s ease-in forwards; }
@keyframes faFall { to { transform: translateY(110vh) rotate(540deg); opacity: .2; } }
/* per-person voice volume in Settings (11-07) */
.s-vols { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, .04); }
.s-vol { display: flex; align-items: center; gap: 10px; }
.s-vol .ava { width: 30px; height: 30px; font-size: 12px; flex: none; }
.s-vol b { min-width: 70px; font-size: 14px; }
.s-vol input { flex: 1; height: 32px; accent-color: #4cc9ff; }
/* Friends (11-07): first in the bar, bigger, bright green with a soft glow; "+ Friend" on anyone in the call who isn't one yet */
.act.big-friends { min-width: 92px; font-weight: 800; background: linear-gradient(180deg, #5af09a, #1f9d55); color: #04210f; box-shadow: 0 0 0 2px rgba(90, 240, 154, .55), 0 0 18px rgba(61, 220, 132, .55); animation: frGlow 2.4s ease-in-out infinite; }
@keyframes frGlow { 50% { box-shadow: 0 0 0 2px rgba(90, 240, 154, .8), 0 0 28px rgba(61, 220, 132, .85); } }
.tile-add { position: absolute; right: 6px; bottom: 6px; z-index: 7; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: #3ddc84; color: #04210f; font-weight: 800; font-size: 13px; box-shadow: 0 4px 14px rgba(0, 0, 0, .4); cursor: pointer; }
.tile-add[disabled] { background: #2b5e41; color: #cfeedd; }
.pill.add-all { background: #3ddc84; color: #04210f; }
/* the eye always on top and clickable; the status row never blocks clicks on the tiles under it */
.tile .eye { z-index: 7; cursor: pointer; }
.status-pill { pointer-events: none; } .status-pill > * { pointer-events: auto; }
.tile.hidden .vslot video { display: none; }
/* after a call: "Add Suzanne as a friend?" (bottom, small, goes away by itself) */
.after-add { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 9998; display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; border-radius: 16px; background: #1b2029; box-shadow: 0 0 0 1px rgba(61, 220, 132, .5), 0 12px 32px rgba(0, 0, 0, .55); font-weight: 700; max-width: 94vw; }
/* "Is the other David you?" (11-07) */
.merge-hint { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 0; padding: 12px; border-radius: 14px; background: linear-gradient(135deg, #1d3a52, #2a1d44); box-shadow: 0 0 0 1px rgba(76, 201, 255, .45); }
.merge-hint .mh-txt { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 2px; }
.merge-hint small { color: #b9c6d3; }
/* Friends button, even more fun to press (11-07): a bigger glow, a hop on hover, a squish when pressed, a sparkle that drifts */
.act.big-friends { position: relative; min-width: 104px; transform-origin: 50% 80%; transition: transform .12s ease; }
.act.big-friends:hover { transform: translateY(-3px) scale(1.06) rotate(-1.5deg); }
.act.big-friends:active { transform: scale(.9); transition-duration: .05s; }
.act.big-friends::after { content: '✨'; position: absolute; top: -6px; right: -4px; font-size: 16px; animation: frSpark 2.4s ease-in-out infinite; pointer-events: none; }
@keyframes frSpark { 0%, 100% { transform: translateY(0) scale(.85) rotate(0); opacity: .75; } 50% { transform: translateY(-4px) scale(1.15) rotate(20deg); opacity: 1; } }
/* "Added you" rows (11-07): stay until Add back or x */
.req-box { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.req { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border-radius: 14px; background: linear-gradient(135deg, #16402c, #1b2029); box-shadow: 0 0 0 1px rgba(61, 220, 132, .5); flex-wrap: wrap; }
.req .req-txt { flex: 1; min-width: 140px; }
/* tap someone in a call: a little menu (11-07) */
.tmenu { position: fixed; z-index: 9999; min-width: 230px; display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 16px; background: #1b2029; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 16px 40px rgba(0, 0, 0, .6); animation: pop .14s ease-out; }
.tmenu .btn { justify-content: flex-start; }
.tm-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px 6px; }
.tm-head .ava { width: 30px; height: 30px; font-size: 12px; }
.tm-ok { display: flex; align-items: center; gap: 6px; padding: 8px 10px; color: #3ddc84; font-weight: 800; }
.tm-vol { display: flex; align-items: center; gap: 8px; padding: 2px 6px; }
.tm-vol input { flex: 1; height: 30px; accent-color: #4cc9ff; }
[data-tile] { cursor: pointer; }
.dev-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; font-size: 16px; }
.code-box { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
/* the talking glow is in each person's own color (11-07: "THE HIGHLIGHT COLOR NEEDS TO CHANGE ... IT NEEDS TO CHANGE THEIR COLOR EVERYWHERE") */
.tile.talk { box-shadow: 0 0 0 3px var(--pc, var(--ok)), 0 0 20px color-mix(in srgb, var(--pc, #3ddc84) 55%, transparent); }
.faces .tile.big.talk { box-shadow: 0 0 0 3px var(--pc, var(--ok)), 0 0 28px color-mix(in srgb, var(--pc, #3ddc84) 60%, transparent), 0 20px 60px rgba(0, 0, 0, .6); }
/* every face has a thin border in that person's own color, always; it lights up bright when they talk (11-07) */
.faces .tile, .strip .tile { box-shadow: 0 0 0 2px color-mix(in srgb, var(--pc, #5d6878) 70%, transparent); }
.faces .tile.talk, .strip .tile.talk { box-shadow: 0 0 0 4px var(--pc, var(--ok)), 0 0 22px color-mix(in srgb, var(--pc, #3ddc84) 60%, transparent); }
/* the QR code in "Set up another device" (11-07): big, white, easy for a phone camera */
.dev-qr { width: min(240px, 70vw); aspect-ratio: 1; margin: 0 auto; padding: 8px; border-radius: 14px; background: #fff; }
.dev-qr svg { width: 100%; height: 100%; display: block; }
/* "Invite family" (11-07, "MOM PROOF"): the big green share button, on home and in the family code box */
.btn.fam-share { min-height: 52px; font-size: 16px; font-weight: 800; box-shadow: 0 0 0 2px rgba(90, 240, 154, .45), 0 0 16px rgba(61, 220, 132, .4); }

/* Record + Transcribe (Jacob 11-07, "TRANSCRIBE AUDIO. A RECORD BUTTON."): red while recording, a red pill everyone sees,
   captions over the stage, the Transcript panel (the same side panel as Chat). Only opacity animates (the graphics chip does it). */
.act.rec-on { background: linear-gradient(180deg, #ff6b5e, #c4372b); color: #fff; }
.act.rec-on .ic, .rec-pill .rec-dot { animation: recPulse 1.2s ease-in-out infinite; }
.rec-pill .rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #fff; flex: none; }
.rec-pill .rec-time { font-variant-numeric: tabular-nums; opacity: .85; }
@keyframes recPulse { 50% { opacity: .3; } }
.pill.tx-pill { background: #1f6f9c; }
.pill.tx-pill .ic { width: 20px; height: 20px; }
.captions { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 6; width: min(880px, calc(100% - 24px)); display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.captions[hidden] { display: none; }
.captions .cap { background: rgba(0, 0, 0, .8); color: #fff; font-size: clamp(15px, 2.1vw, 22px); line-height: 1.35; font-weight: 600; padding: 8px 14px; border-radius: 10px; max-width: 100%; text-align: center; }
.captions .cap b { margin-right: 6px; }
.txp .msgs { gap: 2px; }
.txp .txl { padding: 6px 4px; line-height: 1.45; word-wrap: break-word; }
.txp .txl .from small { margin-left: 6px; }
.tx-foot { display: flex; gap: 8px; padding: 10px; flex-wrap: wrap; box-shadow: 0 -1px 0 var(--line); }
.tx-foot .btn { flex: 1 1 140px; justify-content: center; }
.tx-bar { height: 10px; border-radius: 6px; background: var(--plate); overflow: hidden; margin: 6px 0 14px; }
.tx-bar i { display: block; height: 100%; width: 3%; background: var(--accent); transition: width .3s; }
/* the color button on your own video and its little color pop-up (11-07) */
.tile .tile-color { position: absolute; right: 56px; top: 6px; z-index: 7; width: 44px; height: 44px; border: 0; border-radius: 10px; background: rgba(0, 0, 0, .55); font-size: 20px; cursor: pointer; box-shadow: inset 0 -3px 0 var(--pc, #4cc9ff); }
.cpop { position: fixed; z-index: 9999; display: grid; grid-template-columns: repeat(4, 40px); gap: 8px; padding: 10px; border-radius: 14px; background: #1b2029; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 14px 36px rgba(0, 0, 0, .6); animation: pop .14s ease-out; }
.cpop .swatch { width: 40px; height: 40px; }
/* "Who's using Collaborate?" (11-07) */
.who-grid { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; margin: 10px 0; }
.who-acc { position: relative; }
.who-face { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px; border: 0; border-radius: 18px; background: transparent; color: #fff; cursor: pointer; min-width: 110px; transition: transform .12s; }
.who-face:hover { transform: translateY(-3px) scale(1.05); background: rgba(255, 255, 255, .05); }
.who-face b { font-size: 17px; }
.who-x { position: absolute; top: 2px; right: 2px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #cfd8e2; cursor: pointer; }
.btn.red { background: linear-gradient(180deg, #ff6b5e, #c4372b); color: #fff; }
.s-house { gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, .04); }
.s-vol .btn.small { flex: none; }
.pill.house { background: rgba(31, 143, 196, .85); } .pill.house.off { background: rgba(196, 120, 31, .85); }
/* echo controls in Settings, a volume button on each video, the name-chip menu (11-07) */
.s-house { gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, .04); }
.s-vol .btn.small { flex: none; }
.pill.house { background: rgba(31, 143, 196, .85); } .pill.house.off { background: rgba(196, 120, 31, .85); }
.tile .tile-vol { position: absolute; left: 6px; top: 6px; z-index: 7; width: 44px; height: 44px; border: 0; border-radius: 10px; background: rgba(0, 0, 0, .55); display: grid; place-items: center; color: #fff; cursor: pointer; }
.vpop, .mepop { position: fixed; z-index: 9999; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; background: #1b2029; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 14px 36px rgba(0, 0, 0, .6); animation: pop .14s ease-out; min-width: 220px; }
.vpop input { width: 100%; height: 34px; accent-color: #4cc9ff; }
/* "Make small" (11-07): big, bottom middle of the enlarged video, impossible to miss */
.tile .unspot { left: 50%; right: auto; top: auto; bottom: 14px; transform: translateX(-50%); min-height: 48px; padding: 0 22px; font-size: 16px; background: rgba(0, 0, 0, .78); box-shadow: 0 0 0 2px rgba(255, 255, 255, .25), 0 8px 24px rgba(0, 0, 0, .5); }
/* the shared-screens layer really hides when it's not open (11-07: "WHY IS THIS BLACK POP UP ON THE SCREEN?") */
.screens[hidden] { display: none; }
/* view options (11-07): Speaker = the talker big on top, the rest small below; Side = big on the left, the rest down the side */
.faces[data-view=speaker] .tile.main { grid-column: 1 / -1; grid-row: 1; order: -1; }
.faces[data-view=speaker] .tile:not(.main) { grid-row: 2; height: 128px; }
.faces[data-view=side] .tile.main { grid-column: 1; grid-row: 1 / -1; order: -1; }
.faces[data-view=side] .tile:not(.main) { grid-column: 2; }
.faces[data-view=speaker] .tile:not(.main) .tile-add span, .faces[data-view=side] .tile:not(.main) .tile-add span { display: none; }
.viewpop { position: fixed; z-index: 9999; display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 8px; padding: 10px; border-radius: 16px; background: #1b2029; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 16px 40px rgba(0, 0, 0, .6); animation: pop .14s ease-out; }
.vopt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .05); color: #fff; text-align: left; cursor: pointer; }
.vopt .vi { font-size: 22px; } .vopt small { color: #9aa7b4; font-size: 12px; }
.vopt.on { background: linear-gradient(180deg, #6fd6ff, #1f8fc4); color: #04131c; } .vopt.on small { color: #0b3550; }
/* phones held upright: Speaker and Side both become "big on top, small below" */
@media (max-width: 560px) and (orientation: portrait) {
  .faces[data-view=speaker], .faces[data-view=side] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-template-rows: minmax(0, 1fr) 96px !important; grid-auto-rows: 96px; }
  .faces[data-view=side] .tile.main { grid-column: 1 / -1; grid-row: 1; }
  .faces[data-view=side] .tile:not(.main) { grid-column: auto; grid-row: 2; height: 96px; }
  .faces[data-view=speaker] .tile:not(.main) { height: 96px; }
}
/* instant name hints on the board's buttons (11-07) and the board's Drag out handle */
.bd-tip { position: fixed; z-index: 10000; padding: 5px 9px; border-radius: 8px; background: #0b0d11; color: #fff; font-size: 12px; font-weight: 700; box-shadow: 0 0 0 1px rgba(255, 255, 255, .15), 0 6px 18px rgba(0, 0, 0, .5); pointer-events: none; white-space: nowrap; }
.bd-tip[hidden] { display: none; }
.bd-dragout { cursor: grab; text-decoration: none; }

/* who else is on each screen (11-07): ring + tiny name tags in their colors, sitting in the bar's top padding */
.act.here { box-shadow: inset 0 0 0 2px var(--hc), 0 0 12px -2px var(--hc); }
.here-tags { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); display: flex; gap: 2px; pointer-events: none; z-index: 2; }
.here-tags i { font: 800 10px/14px var(--font); font-style: normal; padding: 0 5px; border-radius: 7px; color: #0b0d10; white-space: nowrap; box-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.here-tags i.more { background: #e8ecf1; }
/* Files: the selection bar floats at the bottom, so the grid never moves under the mouse */
.files .files-selbar { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 3; padding: 8px 10px; border-radius: 14px; background: rgba(20, 23, 28, .97); box-shadow: 0 0 0 1px #05070a, 0 10px 26px rgba(0, 0, 0, .55); flex-wrap: wrap; }

/* Hide videos / Show videos tab on the stage's right edge (11-07) */
.vidtab { position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 6; writing-mode: vertical-rl; display: flex; align-items: center; gap: 6px; padding: 12px 6px; border: 0; border-radius: 12px 0 0 12px; background: rgba(20, 23, 28, .92); color: #e8ecf1; font: 800 12px var(--font); box-shadow: 0 0 0 1px #05070a, 0 6px 16px rgba(0, 0, 0, .5); cursor: pointer; }
.vidtab .ic { width: 18px; height: 18px; writing-mode: horizontal-tb; }
.vidtab.show { background: var(--accent, #4cc9ff); color: #0b0d10; padding: 16px 8px; font-size: 13px; }
.vidtab[hidden] { display: none; }

/* the color wheel picker (11-07) */
.cpk { position: fixed; z-index: 10000; width: 312px; padding: 14px; border-radius: 20px; background: #14171c; color: #e8ecf1; box-shadow: 0 0 0 1px #05070a, 0 18px 50px rgba(0, 0, 0, .6); display: flex; flex-direction: column; gap: 10px; font-family: var(--font); }
.cpk.sheet { left: 8px !important; right: 8px; bottom: 8px; top: auto !important; width: auto; }
.cpk-head { display: flex; align-items: center; justify-content: space-between; font: 800 16px var(--display); }
.cpk-x { border: 0; background: #232933; color: #e8ecf1; width: 34px; height: 34px; border-radius: 50%; font-size: 15px; cursor: pointer; }
.cpk-main { display: flex; gap: 12px; align-items: center; }
.cpk-wheelwrap { position: relative; width: 190px; height: 190px; flex: none; touch-action: none; cursor: crosshair; }
.cpk-wheel { width: 190px; height: 190px; border-radius: 50%; display: block; box-shadow: 0 0 0 1px #05070a; }
.cpk-knob { position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 2px 8px rgba(0, 0, 0, .6); pointer-events: none; transition: width .12s, height .12s; }
.cpk-wheelwrap.drag .cpk-knob { width: 32px; height: 32px; }
.cpk-side { display: flex; flex-direction: column; gap: 8px; align-items: center; min-width: 0; flex: 1; }
.cpk-big { width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 0 0 3px #232933, 0 6px 16px rgba(0, 0, 0, .5); }
.cpk-big.pop { animation: cpkpop .18s ease-out; }
@keyframes cpkpop { from { transform: scale(.88); } to { transform: scale(1); } }
.cpk-hex { width: 84px; padding: 6px 8px; border-radius: 10px; border: 0; background: #232933; color: #e8ecf1; font: 800 13px var(--display); text-align: center; letter-spacing: .5px; }
.cpk-eye { font-size: 12px; }
.cpk-row { display: flex; align-items: center; gap: 10px; font: 700 12px var(--font); color: #93a0ae; }
.cpk-v { flex: 1; height: 14px; border-radius: 7px; -webkit-appearance: none; appearance: none; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.cpk-v::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.cpk-v::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 0; }
.cpk-label { font: 700 11px var(--font); color: #93a0ae; text-transform: uppercase; letter-spacing: .6px; margin-bottom: -4px; }
.cpk-sw { display: flex; flex-wrap: wrap; gap: 7px; min-height: 30px; align-items: center; }
.cpk-s { width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer; box-shadow: 0 0 0 2px #05070a; transition: transform .1s; }
.cpk-s:hover { transform: scale(1.15); }
.cpk-s:active { transform: scale(.9); }
.cpk-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
/* Files: the floating selection bar really hides when nothing is selected (.row's display:flex beat [hidden]) */
.files .files-selbar[hidden] { display: none; }
/* my color (11-07): 24 colors + "Any color" (a rainbow circle; a color picked on the wheel shows in its middle) */
.cpop { grid-template-columns: repeat(5, 40px); }
.swatch { cursor: pointer; }
.swatch.any { position: relative; background: conic-gradient(#ff5a5f, #ffd166, #b8f15a, #3ddc84, #4cc9ff, #8fa8ff, #b28dff, #ff8fc7, #ff5a5f); }
.swatch.any.on::after { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: var(--c, #fff); box-shadow: 0 0 0 2px #05070a; }
/* the button on my own video: just a circle in my color */
.tile .tile-color { display: grid; place-items: center; border-radius: 50%; background: transparent; box-shadow: none; font-size: 0; }
.tile .tile-color::before { content: ''; width: 28px; height: 28px; border-radius: 50%; background: var(--pc, #4cc9ff); box-shadow: 0 0 0 2px rgba(5, 7, 10, .75), 0 2px 8px rgba(0, 0, 0, .5); transition: transform .12s; }
.tile .tile-color:hover::before { transform: scale(1.12); }
/* the device after a name: "David · PC" (11-07) */
.dev-l { font-weight: 600; font-size: .72em; color: var(--dim); white-space: nowrap; }
.gc-face .gc-dev { margin-top: -3px; font-weight: 600; font-size: 11px; color: var(--dim); }

/* Jacob 11-07: "ON PHONES, IT ONLY SHOWS THE TOP OF PEOPLE'S HEADS. WE NEED TO SHOW THEIR FACES" / "SHOW THE CENTER ... AND
   CENTER THE FRAME". On phones the tiles are a different shape than the cameras, so filling them cut faces off. Phones now show
   each whole camera picture, centered (dark bars fill the rest), on the faces screen and in the strip. */
/* (undone 11-07: showing the whole picture gave a narrow slice and showed the phone lens bending at the edges, "fish eye") */

/* Jacob 11-07: "MAKE THE FACES BUTTON STAND OUT OR BE HIGHLIGHTED A LITTLE BIT SO IT'S EASY FOR NEWBIES": a soft blue outline and
   glow whenever you're on another screen (board, movie, files...), so the way back to everyone's faces is easy to spot */
.act[data-a=faces]:not(.on) { box-shadow: inset 0 0 0 2px rgba(76, 201, 255, .65), 0 0 14px -3px rgba(76, 201, 255, .7); color: #bfeaff; }
.act[data-a=faces]:not(.on):hover { box-shadow: inset 0 0 0 2px rgba(76, 201, 255, .9), 0 0 18px -2px rgba(76, 201, 255, .85); }

/* the color picker never runs off the screen (11-07): it scrolls on short windows */
.cpk { max-height: calc(100vh - 16px); overflow-y: auto; scrollbar-width: thin; }
.cpk-s { width: 28px; height: 28px; }

/* face tracking (11-07): the crop glides to keep the face in view */
/* (eased per frame in main.js faceStep, 11-07) */

/* the round Chat button on the right edge of the call screen (11-07), under the Hide videos tab */
.chatfab { position: absolute; right: 8px; top: calc(50% + 74px); z-index: 6; width: 48px; height: 48px; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(20, 23, 28, .92); color: #e8ecf1; box-shadow: 0 0 0 1px #05070a, 0 6px 16px rgba(0, 0, 0, .5); cursor: pointer; }
.chatfab .ic { width: 22px; height: 22px; }
.chatfab.on { background: #4cc9ff; color: #0b0d10; }
.chatfab .badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #ff4757; color: #fff; font: 800 11px/20px var(--font); text-align: center; box-shadow: 0 0 0 2px #14171c; }
@media (max-width: 760px) { .chatfab { width: 52px; height: 52px; } }

/* grid fill (11-07): on a phone held upright the faces stack in one column, so no spans there */
@media (max-width: 560px) and (orientation: portrait) { .faces[data-view=grid] > .tile { grid-column: auto !important; } }

/* Speaker view (Jacob 11-07: "SPEAKER VIEW IS NOT WORKING"): the others were one long thin strip across the whole width. Now the
   speaker fills the top and everyone else is a normal-shaped video box (16:9) in a centered row underneath. */
.faces[data-view=speaker] { display: flex !important; flex-wrap: wrap; justify-content: center; align-content: flex-start; }
.faces[data-view=speaker] > .tile.main { flex: 0 0 100%; height: calc(100% - 128px - 10px); order: -1; grid-column: auto; grid-row: auto; }
.faces[data-view=speaker] > .tile:not(.main) { flex: 0 0 auto; height: 128px; width: auto; aspect-ratio: 16 / 9; grid-row: auto; }
@media (max-width: 560px) and (orientation: portrait) {
  .faces[data-view=speaker] > .tile.main { height: calc(100% - 96px - 6px); }
  .faces[data-view=speaker] > .tile:not(.main) { height: 96px; }
}

/* resize handle for Side and Speaker views (11-07) */
.faces[data-view=speaker] > .tile.main { height: calc(100% - var(--thumb-h, 128px) - 10px); }
.faces[data-view=speaker] > .tile:not(.main) { height: var(--thumb-h, 128px); }
.vsplit { position: absolute; z-index: 6; display: none; touch-action: none; }
.vsplit.v { cursor: ew-resize; }
.vsplit.h { cursor: ns-resize; }
.vsplit::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 3px; background: rgba(255, 255, 255, .35); box-shadow: 0 0 0 1px rgba(0, 0, 0, .4); transition: background .15s; }
.vsplit.v::after { width: 5px; height: 48px; }
.vsplit.h::after { width: 48px; height: 5px; }
.vsplit:hover::after, .vsplit.drag::after { background: #4cc9ff; }
@media (max-width: 560px) and (orientation: portrait) {
  .faces[data-view=speaker] > .tile.main { height: calc(100% - var(--thumb-h, 96px) - 6px); }
  .faces[data-view=speaker] > .tile:not(.main) { height: var(--thumb-h, 96px); }
}

/* phones: no Hide videos tab on the screen (the bar's Hide videos button does it) (11-07) */
@media (max-width: 760px) { .vidtab { display: none !important; } }

/* chat button: lower right, with the word Chat under the icon (11-07) */
.chatfab { position: fixed !important; right: auto !important; width: 58px !important; height: 58px !important; border-radius: 18px !important; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 2px; z-index: 30 !important; }
.chatfab .lbl { font: 800 11px var(--font); line-height: 1; }

/* music on phones: now playing (with My volume) on top, the tracks below (11-07) */
@media (max-width: 760px) {
  .mu-wrap { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto minmax(0, 1fr); padding: 8px !important; gap: 8px !important; }
  .mu-wrap .mu-now { order: -1; padding: 12px; }
  .mu-wrap .mu-now .ava.xl { width: 56px; height: 56px; }
  .mu-wrap .mu-vol { width: min(220px, 60vw) !important; }
}

/* Full screen button in the top bar, with an instant label (11-07) */
.fs-btn { position: relative; width: 44px; height: 44px; border-radius: 12px; background: var(--plate); box-shadow: var(--shadow); color: #e8eef5; display: grid; place-items: center; border: 0; cursor: pointer; flex: none; }
.fs-btn:hover { background: #3a4452; }
.fs-btn svg { width: 22px; height: 22px; }
.fs-btn::after { content: attr(data-label); position: absolute; top: calc(100% + 8px); right: 0; white-space: nowrap; padding: 6px 10px; border-radius: 8px; background: #0b0e12; color: #fff; font: 700 13px var(--font); box-shadow: 0 6px 18px rgba(0, 0, 0, .5); opacity: 0; pointer-events: none; z-index: 50; }
.fs-btn:hover::after, .fs-btn:focus-visible::after { opacity: 1; }
@media (hover: none) { .fs-btn::after { display: none; } }

/* phones in a call: no top bar, the call gets the whole screen; only "Reconnecting…" floats at the top when it's needed (11-07) */
body.phone.incall .top { position: fixed; top: calc(6px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); min-height: 0; padding: 0; background: none; box-shadow: none; z-index: 60; pointer-events: none; }
body.phone.incall .top > :not(.net) { display: none !important; }
/* "My color" on your own video: a little color wheel with your color in the middle (a plain dot in red looked like a recording light) */
.tile .tile-color::before { width: 28px; height: 28px; background: radial-gradient(circle, var(--pc, #4cc9ff) 0 6px, rgba(12, 14, 18, .95) 6.5px 8.5px, transparent 9px), conic-gradient(#ff5d5e, #ff9f43, #ffd76a, #34d399, #4cc9ff, #b28dff, #ff5d5e); }

/* a picture, big (from chat): zoom, move around, download (11-07) */
.msg img { cursor: zoom-in; }
.pv { position: fixed; inset: 0; z-index: 400; display: flex; flex-direction: column; background: rgba(6, 8, 11, .93); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: pvIn .2s ease; }
.pv.out { animation: pvOut .17s ease forwards; }
.pv-top { display: flex; align-items: center; gap: 8px; padding: calc(10px + env(safe-area-inset-top)) 12px 10px; }
.pv-name { color: #e8eef5; font: 700 15px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pv .sp { flex: 1; }
.pv-b { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; height: 44px; padding: 0 12px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .1); color: #fff; font: 800 20px var(--font); cursor: pointer; text-decoration: none; flex: none; }
.pv-b:hover { background: rgba(255, 255, 255, .2); }
.pv-b svg { width: 20px; height: 20px; }
.pv-pct { min-width: 66px; font-size: 14px; font-variant-numeric: tabular-nums; }
.pv-dl { background: #4cc9ff; color: #04131c; font-size: 14px; }
.pv-dl:hover { background: #7fdcff; }
.pv-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; cursor: zoom-in; padding: 0 12px 12px; }
.pv.zoomed .pv-stage { cursor: grab; }
.pv.zoomed .pv-stage:active { cursor: grabbing; }
.pv-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); user-select: none; -webkit-user-drag: none; will-change: transform; animation: pvPop .26s cubic-bezier(.2, 1.4, .4, 1); }
.pv-hint { text-align: center; color: #8b96a5; font: 600 12px var(--font); padding: 0 12px calc(10px + env(safe-area-inset-bottom)); }
@media (hover: none) { .pv-hint { display: none; } .pv-dl span { display: none; } }
@media (max-width: 520px) { .pv-pct { display: none; } }
@keyframes pvIn { from { opacity: 0; } }
@keyframes pvOut { to { opacity: 0; } }
@keyframes pvPop { from { transform: scale(.86); opacity: .3; } }

/* a mute button on every video (11-07): others = mute them for me, mine = my mic; red while muted */
.tile .tile-mute { position: absolute; left: 6px; top: 6px; z-index: 7; width: 44px; height: 44px; border: 0; border-radius: 10px; background: rgba(0, 0, 0, .55); display: grid; place-items: center; color: #fff; cursor: pointer; }
.tile .tile-mute:hover { background: rgba(0, 0, 0, .75); }
.tile .tile-mute.off { background: #e5484d; color: #fff; box-shadow: 0 0 0 2px rgba(0, 0, 0, .35); }
.tile .tile-mute.off:hover { background: #f05a5f; }
.tile .tile-vol { left: 56px; }

/* View: a simple icon at the top (in calls), next to Full screen (11-07) */
.top .view-ic { display: none; }
body.incall .top .view-ic { display: grid; }
.viewfab { position: fixed; z-index: 6; width: 44px; height: 44px; border: 0; border-radius: 14px; display: grid; place-items: center; background: rgba(20, 23, 28, .92); color: #e8ecf1; box-shadow: 0 0 0 1px #05070a, 0 6px 16px rgba(0, 0, 0, .45); cursor: pointer; }
.viewfab[hidden] { display: none; }
.viewfab svg { width: 20px; height: 20px; }

/* reactions: the show (11-07) */
#fxlayer { position: fixed; inset: 0; pointer-events: none; z-index: 500; overflow: hidden; }
#fxlayer > div { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform, opacity; line-height: 1; user-select: none; }
.rx-hero { filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .45)); }
.rx-name { padding: 6px 14px; border-radius: 999px; background: var(--c, #4cc9ff); color: #fff; font: 900 15px/1.1 var(--font); white-space: nowrap; text-shadow: 0 1px 3px rgba(0, 0, 0, .45); box-shadow: 0 6px 18px rgba(0, 0, 0, .35), 0 0 0 3px rgba(255, 255, 255, .18); }
.rx-name.combo { font-size: 19px; padding: 7px 16px; }
.rx-ring { border-radius: 50%; border: 7px solid var(--c); box-shadow: 0 0 24px var(--c), inset 0 0 18px var(--c); }
.rx-glow { border-radius: 50%; background: radial-gradient(circle, var(--c) 0%, transparent 65%); }
.rx-bit { filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .35)); }
.rx-conf { width: 9px; height: 15px; border-radius: 2px; }
.rx-tray { position: fixed; z-index: 450; display: flex; gap: 4px; padding: 8px; border-radius: 22px; background: rgba(20, 23, 28, .96); box-shadow: 0 0 0 1px #05070a, 0 14px 40px rgba(0, 0, 0, .55); animation: rxTrayIn .32s cubic-bezier(.2, 1.6, .4, 1); transform-origin: 50% 100%; }
.rx-tray.out { animation: rxTrayOut .16s ease forwards; }
.rx-b { width: 56px; height: 56px; border: 0; border-radius: 16px; background: transparent; font-size: 32px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: transform .22s cubic-bezier(.3, 1.8, .5, 1), background .15s; animation: rxPop .4s cubic-bezier(.2, 1.7, .4, 1) both; }
.rx-b:hover { transform: translateY(-8px) scale(1.3); background: rgba(255, 255, 255, .08); }
.rx-b.hit { animation: rxHit .32s cubic-bezier(.2, 1.7, .4, 1); }
@media (max-width: 520px) { .rx-tray { flex-wrap: wrap; justify-content: center; width: calc(100vw - 24px); } .rx-b { width: 64px; height: 64px; font-size: 34px; } }
@keyframes rxTrayIn { from { opacity: 0; transform: translateY(14px) scale(.7); } }
@keyframes rxTrayOut { to { opacity: 0; transform: translateY(10px) scale(.85); } }
@keyframes rxPop { from { transform: scale(0) rotate(-30deg); } }
@keyframes rxHit { 0% { transform: scale(1); } 40% { transform: scale(.75); } 75% { transform: scale(1.35) translateY(-6px); } 100% { transform: scale(1); } }

/* video controls: name top-left; mute + camera bottom-left; color wheel (mine) or volume (theirs) top-right (11-07) */
.tile .tag { top: 8px; bottom: auto; max-width: calc(100% - 66px); }
.tile .tile-mute { top: auto; bottom: 8px; left: 8px; }
.tile .tile-cam { position: absolute; left: 58px; bottom: 8px; z-index: 7; width: 44px; height: 44px; border: 0; border-radius: 10px; background: rgba(0, 0, 0, .55); display: grid; place-items: center; color: #fff; cursor: pointer; }
.tile .tile-cam:hover { background: rgba(0, 0, 0, .75); }
.tile .tile-cam.off { background: #e5484d; box-shadow: 0 0 0 2px rgba(0, 0, 0, .35); }
.tile .tile-cam.off:hover { background: #f05a5f; }
.tile .tile-vol { left: auto; right: 6px; top: 6px; }
.tile .tile-color { right: 6px; top: 6px; }
.tile .tile-add { bottom: 10px; }
/* small videos (the strip next to an app, the small ones in Speaker / Side view): smaller buttons */
.strip .tile .tile-mute, .strip .tile .tile-cam, .strip .tile .tile-vol, .strip .tile .tile-color,
.faces[data-view=speaker] .tile:not(.main) .tile-mute, .faces[data-view=speaker] .tile:not(.main) .tile-cam, .faces[data-view=side] .tile:not(.main) .tile-mute, .faces[data-view=side] .tile:not(.main) .tile-cam { width: 34px; height: 34px; border-radius: 9px; }
.strip .tile .tile-mute, .faces[data-view=speaker] .tile:not(.main) .tile-mute, .faces[data-view=side] .tile:not(.main) .tile-mute { left: 5px; bottom: 5px; }
.strip .tile .tile-cam, .faces[data-view=speaker] .tile:not(.main) .tile-cam, .faces[data-view=side] .tile:not(.main) .tile-cam { left: 44px; bottom: 5px; }
.strip .tile .tile-mute svg, .strip .tile .tile-cam svg { width: 18px; height: 18px; }
.strip .tile .tag { font-size: 12px; padding: 3px 7px; top: 5px; left: 5px; }

/* the side tab is the one Hide / Show videos now (it left the bottom bar, 11-07): phones get it back too, a little slimmer */
@media (max-width: 760px) { .vidtab:not([hidden]) { display: flex !important; padding: 10px 5px; font-size: 11px; } .vidtab.show:not([hidden]) { padding: 12px 6px; } }

/* the name top-right with my color wheel beside it; their volume joins mute + camera bottom-left (11-07) */
.tile .tile-top { position: absolute; top: 8px; right: 8px; z-index: 7; display: flex; align-items: center; gap: 6px; max-width: calc(100% - 16px); }
.tile .tile-top .tag { position: static; max-width: none; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tile .tile-top .tile-color { position: static; flex: none; width: 34px; height: 34px; }
.tile .tile-vol { top: auto; right: auto; left: 108px; bottom: 8px; }
.strip .tile .tile-top { top: 5px; right: 5px; gap: 4px; }
.strip .tile .tile-top .tag { font-size: 12px; padding: 3px 7px; }
.strip .tile .tile-top .tile-color { width: 28px; height: 28px; }
.strip .tile .tile-vol, .faces[data-view=speaker] .tile:not(.main) .tile-vol, .faces[data-view=side] .tile:not(.main) .tile-vol { left: 83px; bottom: 5px; width: 34px; height: 34px; border-radius: 9px; }

/* the volume menu: Mute <name> on top, the slider below (11-07) */
.vpop { min-width: 220px; gap: 10px; }
.vpop .vp-mute { min-height: 46px; justify-content: center; gap: 8px; font-weight: 800; }
.vpop .vp-mute.red { background: #e5484d; color: #fff; }
.vpop .vp-vol { display: flex; align-items: center; gap: 8px; color: #cfd8e2; }
.vpop .vp-vol input { flex: 1; }

/* the round Chat button steps aside while the chat is open (it covered Send, 11-07) */
.chatfab[hidden] { display: none !important; }

/* the chat slides in and out; a slim tab with a › arrow on its left edge slides it closed (11-07) */
.chat { animation: chatIn .24s cubic-bezier(.2, .9, .3, 1); }
.chat.out { animation: chatOut .2s ease-in forwards; }
@keyframes chatIn { from { transform: translateX(100%); } }
@keyframes chatOut { to { transform: translateX(100%); } }
.chat .chat-tuck { position: absolute; left: -22px; top: 50%; transform: translateY(-50%); z-index: 2; width: 22px; height: 76px; border: 0; border-radius: 12px 0 0 12px; background: var(--panel); color: #cfd8e2; display: grid; place-items: center; cursor: pointer; padding: 0; box-shadow: -6px 0 14px rgba(0, 0, 0, .35); }
.chat .chat-tuck:hover { color: #fff; background: #2a313d; }
.chat .chat-tuck svg { width: 18px; height: 18px; }
@media (max-width: 380px) { .chat .chat-tuck { left: 0; border-radius: 0 12px 12px 0; background: rgba(255, 255, 255, .08); box-shadow: none; } }

/* every video is its own layer: no other video's name or buttons on top of the big one; the ones underneath are hidden (11-07) */
.faces .tile, .strip .tile { isolation: isolate; }
.faces:has(> .tile.big) > .tile:not(.big) { visibility: hidden; }

/* Presentation view: PRESENTER on the presenter's video (11-07) */
.tile .presenter-badge { position: absolute; left: 8px; top: 8px; z-index: 7; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: linear-gradient(135deg, #ffd76a, #ff9f43); color: #2a1600; font: 900 13px/1 var(--font); letter-spacing: .08em; box-shadow: 0 4px 14px rgba(0, 0, 0, .4), 0 0 0 2px rgba(0, 0, 0, .25); }
.tile .presenter-badge .ic, .tile .presenter-badge svg { width: 16px; height: 16px; }
.strip .tile .presenter-badge, .faces[data-view=speaker] .tile:not(.main) .presenter-badge { font-size: 10px; padding: 4px 8px; left: 5px; top: 5px; }

/* the Lock box on the big video (Speaker and Side view, 11-08) */
.tile .lock-chip { position: absolute; left: 8px; top: 8px; z-index: 7; display: none; align-items: center; gap: 5px; padding: 6px 12px; border: 0; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #fff; font: 800 13px/1 var(--font); cursor: pointer; box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); }
.tile .lock-chip:hover { background: rgba(0, 0, 0, .8); }
.tile .lock-chip.on { background: linear-gradient(135deg, #ffd76a, #ff9f43); color: #2a1600; box-shadow: 0 4px 14px rgba(0, 0, 0, .4); }
.faces[data-view=speaker] > .tile.main .lock-chip, .faces[data-view=side] > .tile.main .lock-chip { display: inline-flex; }

/* Settings checkboxes sit beside their words, not above them (11-08) */
.s-house, .s-face { flex-wrap: nowrap !important; align-items: flex-start; }
.s-house > input, .s-face > input { flex: none; margin-top: 3px; }
.s-house > span, .s-face > span { flex: 1; min-width: 0; }

/* React beside Chat, and in the open chat's typing row (11-08) */
.chat .compose .chat-react { flex: none; width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .07); color: #ffd76a; }
.chat .compose .chat-react:hover { background: rgba(255, 255, 255, .14); }
.chat .compose .chat-react svg { width: 24px; height: 24px; }
.reactfab { color: #ffd76a; }

/* clearing the chat: ask, slide away, Undo (11-08) */
.chat-confirm { margin: 0 10px 8px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 93, 94, .12); box-shadow: inset 0 0 0 1px rgba(255, 93, 94, .3); display: flex; align-items: center; gap: 8px; animation: ccIn .2s ease; }
.chat-confirm span { flex: 1; font: 700 13px/1.3 var(--font); color: #ffd9d9; }
.chat-undo { margin: 0 10px 6px; padding: 8px 8px 8px 12px; border-radius: 14px; background: #2a313d; display: flex; align-items: center; gap: 8px; animation: ccIn .2s ease; }
.chat-undo span { flex: 1; font: 700 13px var(--font); color: #e8eef5; }
.chat-undo.out { animation: ccOut .25s ease forwards; }
.msgs.clearing .msg { animation: msgOut .25s ease forwards; }
.chat-empty { margin: auto; padding: 30px 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: var(--dim, #8b96a5); font: 600 13px var(--font); }
.chat-empty b { font: 800 16px var(--font); color: #e8eef5; }
@keyframes ccIn { from { opacity: 0; transform: translateY(-6px); } }
@keyframes ccOut { to { opacity: 0; transform: translateY(6px); } }
@keyframes msgOut { to { opacity: 0; transform: translateX(40px) scale(.96); } }

/* the open chat makes room: the videos move over instead of being covered (their names top-right stay visible) (11-08) */
.faces { transition: right .24s cubic-bezier(.2, .9, .3, 1); }
@media (min-width: 700px) { #stage.chat-open > .faces { right: min(340px, 100%); } }

/* React: a big golden button at the bar's right end (11-08) */
.bar .bar-sp { flex: 1 0 8px; }
.act.big-react { min-width: 104px; font-weight: 800; background: linear-gradient(180deg, #ffe08a, #ff9f43); color: #2a1600; box-shadow: 0 0 0 2px rgba(255, 215, 106, .55), 0 0 18px rgba(255, 159, 67, .45); transform-origin: 50% 80%; transition: transform .12s ease; }
.act.big-react:hover { transform: translateY(-3px) scale(1.06) rotate(1.5deg); }
.act.big-react:active { transform: scale(.9); transition-duration: .05s; }
/* the chat's emoji grid */
.emo-pop { position: fixed; z-index: 460; display: grid; grid-template-columns: repeat(8, 40px); gap: 2px; padding: 8px; border-radius: 16px; background: rgba(20, 23, 28, .97); box-shadow: 0 0 0 1px #05070a, 0 14px 40px rgba(0, 0, 0, .55); animation: rxTrayIn .25s cubic-bezier(.2, 1.6, .4, 1); transform-origin: 0 100%; }
.emo-pop .emo { width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; font-size: 24px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: transform .15s cubic-bezier(.3, 1.8, .5, 1), background .12s; }
.emo-pop .emo:hover { transform: scale(1.25); background: rgba(255, 255, 255, .08); }
.emo-pop .emo.hit { animation: rxHit .3s cubic-bezier(.2, 1.7, .4, 1); }
@media (max-width: 420px) { .emo-pop { grid-template-columns: repeat(7, 40px); } }
/* React stays visible at the right edge even when the bar scrolls on a narrower screen (11-08) */
.bar .act.big-react { position: sticky; right: 0; z-index: 2; }

/* the small React button glides over beside the chat drawer (11-08) */
.reactfab { transition: left .24s cubic-bezier(.2, .9, .3, 1), top .24s cubic-bezier(.2, .9, .3, 1); }

/* reactions float up from the bottom, like the first version, more of them and a little longer (11-08) */
.rx-float { filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .35)); }
/* the bar's right end: React, then Leave in its own section, pinned to the right edge (they stay visible when the bar scrolls) (11-08) */
.bar .act.big-react { position: static; }
.bar .bar-end { position: sticky; right: 0; z-index: 2; display: flex; gap: 8px; align-items: stretch; flex: none; padding-left: 8px; background: var(--panel); box-shadow: -14px 0 12px -8px var(--panel); }
/* the Lock button: a plain icon like Mute and Camera (open lock; closed lock in blue when locked) (11-08) */
.tile .lock-chip { width: 44px; height: 44px; padding: 0; gap: 0; border-radius: 10px; background: rgba(0, 0, 0, .55); color: #fff; box-shadow: none; font-size: 0; }
.tile .lock-chip:hover { background: rgba(0, 0, 0, .75); }
.tile .lock-chip.on { background: #4cc9ff; color: #04131c; box-shadow: 0 0 0 2px rgba(0, 0, 0, .35); }
.tile .lock-chip svg { width: 22px; height: 22px; }
.faces[data-view=speaker] > .tile.main .lock-chip, .faces[data-view=side] > .tile.main .lock-chip { display: grid; place-items: center; }

/* Leave asks first: a small pop-up above the Leave button with a big red Leave (11-08) */
.leave-pop { position: fixed; z-index: 470; display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 14px; min-width: 200px; border-radius: 18px; background: rgba(20, 23, 28, .97); box-shadow: 0 0 0 1px #05070a, 0 14px 40px rgba(0, 0, 0, .55); text-align: center; animation: rxTrayIn .22s cubic-bezier(.2, 1.5, .4, 1); transform-origin: 50% 100%; }
.leave-pop b { font: 800 15px var(--font); color: #e8eef5; }
.leave-pop .btn.red { justify-content: center; min-height: 52px; font-size: 16px; }

/* the camera button answers at once: a soft pulse while the camera starts (11-08) */
.tile .tile-cam.starting { animation: camStart .8s ease-in-out infinite; }
@keyframes camStart { 0%, 100% { background: rgba(0, 0, 0, .55); } 50% { background: rgba(76, 201, 255, .55); } }

/* delete your own chat message: a small trash button on it (hover on a computer, tap on a phone) (11-08) */
.msg { position: relative; }
.msg .msg-x { position: absolute; top: -8px; left: -8px; width: 28px; height: 28px; border: 0; border-radius: 50%; display: none; place-items: center; background: #2a313d; color: #ffb3b3; cursor: pointer; box-shadow: 0 0 0 2px var(--panel), 0 4px 10px rgba(0, 0, 0, .4); z-index: 1; }
.msg .msg-x:hover { background: #e5484d; color: #fff; }
.msg .msg-x svg { width: 15px; height: 15px; }
.msg[data-mid]:hover .msg-x, .msg.sel .msg-x { display: grid; }
@media (hover: none) { .msg[data-mid]:hover .msg-x { display: none; } .msg.sel .msg-x { display: grid; } }
.msg.going { animation: msgOut .2s ease forwards; }
/* the trash button sits just left of your own bubble, never over the words (11-08) */
.msg.me .msg-x { top: 50%; left: -34px; transform: translateY(-50%); box-shadow: 0 4px 10px rgba(0, 0, 0, .4); }
.msg.me .msg-x::after { content: ''; position: absolute; top: 0; bottom: 0; left: 100%; width: 8px; }
/* phones (and big phone text): a pop-up box is never wider than the screen; rows wrap or shrink instead of running off the edge (11-08) */
.modal-back { grid-template-columns: minmax(0, 1fr); }
.modal { min-width: 0; max-width: 100%; justify-self: center; }
.modal-body, .modal-body > * { min-width: 0; max-width: 100%; }
.modal .field { min-width: 0; max-width: 100%; }
.modal .row { flex-wrap: wrap; }
.modal .row > span, .modal label > span { min-width: 0; overflow-wrap: break-word; }
.s-vol input { min-width: 0; }
.s-vol b { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  /* each person: picture, name and Mute here on one line, the volume slider full width under it */
  .s-vol { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "ava name btn" "vol vol vol"; column-gap: 10px; row-gap: 2px; }
  .s-vol .ava { grid-area: ava; } .s-vol b { grid-area: name; } .s-vol .btn.small { grid-area: btn; } .s-vol input { grid-area: vol; width: 100%; }
  .modal .row > .btn { flex: 1 1 auto; }
}
/* the color picker on a phone: the wheel shrinks to fit next to the preview, nothing runs off the edge */
.cpk.sheet { max-width: calc(100vw - 16px); }
.cpk-main, .cpk-foot { min-width: 0; }
.cpk-foot { flex-wrap: wrap; }
@media (max-width: 560px) {
  .cpk-wheelwrap, .cpk-wheel { width: min(190px, 46vw); height: min(190px, 46vw); }
  .cpk-hex { width: min(84px, 100%); }
}

/* Faces is a big button like Friends and React (11-08): bright blue while you're on Faces, a blue ring while you're elsewhere */
.act.big-faces { min-width: 104px; font-weight: 800; transform-origin: 50% 80%; transition: transform .12s ease; box-shadow: inset 0 0 0 2px rgba(111, 214, 255, .7), 0 0 14px -2px rgba(76, 201, 255, .45); }
.act.big-faces.on { background: linear-gradient(180deg, #8fe2ff, #2a9bd6); color: #04131c; box-shadow: 0 0 0 2px rgba(111, 214, 255, .55), 0 0 18px rgba(76, 201, 255, .5); }
.act.big-faces.here { box-shadow: inset 0 0 0 2px var(--hc), 0 0 12px -2px var(--hc); }
.act.big-faces:hover { transform: translateY(-3px) scale(1.06); }
.act.big-faces:active { transform: scale(.9); transition-duration: .05s; }

/* a phone's home screen: Shared folders as big tiles that scroll with the page (11-08) */
.hf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 4px; }
.hf { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 96px; padding: 14px 12px 12px; border: 0; border-radius: 16px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); color: #e8ecf1; text-align: left; cursor: pointer; transition: transform .1s; -webkit-tap-highlight-color: transparent; }
.hf:active { transform: scale(.95); }
.hf-ic { position: relative; width: 42px; height: 30px; margin: 6px 0 6px; border-radius: 4px 8px 8px 8px; background: var(--fc); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .18); }
.hf-ic::before { content: ''; position: absolute; left: 0; top: -6px; width: 17px; height: 8px; border-radius: 4px 4px 0 0; background: var(--fc); }
.hf b { font: 800 15px var(--font); line-height: 1.2; overflow-wrap: anywhere; }
.hf small { font: 600 12px var(--font); color: #8b98a6; }
.hf-up { background: rgba(76, 201, 255, .08); box-shadow: inset 0 0 0 1.5px rgba(76, 201, 255, .45); color: #a9e6ff; }
.hf-up svg { width: 30px; height: 30px; margin: 4px 0 6px; }
/* Jacob 11-08: 'LET'S MAKE THE FACES AND REACT BUTTONS NORMAL SIZE LIKE THE OTHER QUICK BAR ICONS' (they keep their colors) */
.act.big-react, .act.big-faces { min-width: 74px; }
@media (max-width: 760px) { .act.big-react, .act.big-faces { min-width: 64px; } }
/* Jacob 11-08: Contacts (was Friends) is normal size too (it keeps its green) */
.act.big-friends { min-width: 74px; }
@media (max-width: 760px) { .act.big-friends { min-width: 64px; } }

/* ---- emojis and GIFs in the chat (11-08) ---- */
/* GIF and the smiley inside the message box */
.chat .compose .ta-wrap { flex: 1; min-width: 0; position: relative; display: flex; }
.chat .compose .ta-wrap textarea { flex: 1; min-width: 0; padding-right: 88px; }
.ta-tools { position: absolute; right: 6px; bottom: 6px; display: flex; align-items: center; gap: 2px; }
.ta-b { width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: #9aa7b5; display: grid; place-items: center; cursor: pointer; padding: 0; transition: color .12s, background .12s, transform .1s; }
.ta-b:hover { color: #e8ecf1; background: rgba(255, 255, 255, .08); }
.ta-b:active { transform: scale(.88); }
.ta-b.on { color: #4cc9ff; background: rgba(76, 201, 255, .14); }
.ta-b svg { width: 22px; height: 22px; }
.ta-b.ta-gif { width: 40px; height: 24px; margin-right: 4px; border-radius: 6px; box-shadow: inset 0 0 0 2px currentColor; font: 900 11px/1 var(--font); letter-spacing: .6px; }
/* the panel that slides up over the message box */
.fun { flex: none; height: min(340px, 54%); display: flex; flex-direction: column; background: #14171c; border-top: 1px solid #05070a; box-shadow: 0 -10px 24px rgba(0, 0, 0, .35); animation: funIn .22s cubic-bezier(.2, .9, .3, 1); overflow: hidden; }
.fun.out { animation: funOut .16s ease forwards; }
@keyframes funIn { from { transform: translateY(26px); opacity: 0; } }
@keyframes funOut { to { transform: translateY(26px); opacity: 0; } }
.fun-tabs { display: flex; align-items: center; gap: 4px; padding: 6px 6px 2px; flex: none; }
.fun-t { border: 0; background: transparent; color: #9aa7b5; font: 800 13px var(--font); padding: 8px 10px; border-radius: 10px; cursor: pointer; white-space: nowrap; }
.fun-t:hover { color: #e8ecf1; }
.fun-t.on { background: #232933; color: #fff; }
.fun-t[hidden] { display: none; }
.fun-react { display: none; font: 800 13px var(--font); color: #e8ecf1; padding-left: 8px; }
.fun.react .fun-t { display: none; }
.fun.react .fun-react { display: block; }
.fun-x { width: 32px; height: 32px; border: 0; border-radius: 50%; background: #232933; color: #c7d0da; cursor: pointer; font-size: 14px; flex: none; }
.fun-x:hover { background: #2e3644; color: #fff; }
.fun-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.fun-top { padding: 6px 8px; flex: none; }
.fun-q { width: 100%; box-sizing: border-box; height: 38px; border-radius: 12px; border: 0; background: #232933; color: #e8ecf1; padding: 0 12px; font: 600 14px var(--font); outline: none; }
.fun-q:focus { box-shadow: 0 0 0 2px #4cc9ff; }
.fun-none, .fun-wait { padding: 24px 12px; text-align: center; color: #8b98a6; font: 700 13px var(--font); }
/* emoji */
.emo-scroll { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 0 6px 6px; overscroll-behavior: contain; scrollbar-width: thin; }
.emo-scroll section { content-visibility: auto; contain-intrinsic-size: auto 260px; }
.emo-scroll h6 { margin: 8px 4px 4px; font: 800 11px var(--font); color: #8b98a6; text-transform: uppercase; letter-spacing: .6px; }
.emo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); }
.emo-b { height: 42px; border: 0; background: transparent; border-radius: 10px; font-size: 26px; line-height: 1; cursor: pointer; padding: 0; transition: transform .1s; }
.emo-b:hover { background: #232933; transform: scale(1.15); }
.emo-b.hit { animation: emoHit .3s ease; }
@keyframes emoHit { 40% { transform: scale(1.4); } }
.emo-cats { display: flex; justify-content: space-around; padding: 4px; border-top: 1px solid #0b0d10; flex: none; }
.emo-cat { border: 0; background: transparent; font-size: 19px; width: 34px; height: 34px; border-radius: 9px; cursor: pointer; opacity: .8; padding: 0; }
.emo-cat:hover { opacity: 1; background: #232933; }
/* GIFs */
.gif-tags { display: flex; gap: 6px; overflow-x: auto; padding: 0 8px 6px; scrollbar-width: none; flex: none; }
.gif-tags::-webkit-scrollbar { display: none; }
.gif-tag { flex: none; border: 0; border-radius: 999px; padding: 7px 11px; background: #232933; color: #e8ecf1; font: 700 12px var(--font); cursor: pointer; white-space: nowrap; }
.gif-tag:hover { background: #2e3644; }
.gif-tag.on { background: #4cc9ff; color: #04131c; }
.gif-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px; overscroll-behavior: contain; scrollbar-width: thin; }
.gif-grid { display: flex; gap: 6px; align-items: flex-start; }
.gif-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.gif-t { display: block; width: 100%; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, #1d2430, #2a3342); cursor: pointer; transition: transform .12s; }
.gif-t img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gif-t:hover { transform: scale(1.03); }
.gif-t:active, .gif-t.sent { transform: scale(.92); }
.gif-more { min-height: 36px; display: grid; place-items: center; color: #8b98a6; font: 700 12px var(--font); text-align: center; padding: 6px; }
.gif-by { flex: none; text-align: right; padding: 4px 10px 6px; font: 700 10px var(--font); color: #7d8a98; letter-spacing: .3px; }
.gif-by b { color: #e8ecf1; letter-spacing: .8px; }
/* make a GIF */
.mk { flex: 1; min-height: 0; display: flex; gap: 10px; padding: 8px; align-items: center; justify-content: center; overflow-y: auto; }
.mk-stage { position: relative; width: 150px; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: #000; flex: none; box-shadow: 0 0 0 1px #05070a; }
.mk-live, .mk-out { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mk-live.mirror { transform: scaleX(-1); }
.mk-live[hidden], .mk-out[hidden] { display: none; }
.mk-prog { position: absolute; left: 0; bottom: 0; height: 5px; width: calc(var(--p, 0) * 100%); background: #ff4757; transition: width .06s linear; }
.mk-msg { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 12px; color: #e8ecf1; font: 800 13px var(--font); pointer-events: none; }
.mk-msg:empty { display: none; }
.mk-stage.rec::after { content: "\25CF  REC"; position: absolute; top: 8px; left: 8px; color: #fff; background: #ff4757; border-radius: 6px; padding: 2px 6px; font: 900 10px var(--font); animation: mkBlink 1s steps(2) infinite; }
@keyframes mkBlink { 50% { opacity: .4; } }
.mk-side { flex: 1; min-width: 0; max-width: 260px; display: flex; flex-direction: column; gap: 8px; }
.mk-modes { display: flex; gap: 4px; flex-wrap: wrap; }
.mk-m { flex: 1 1 auto; border: 0; border-radius: 10px; padding: 8px 6px; background: #232933; color: #e8ecf1; font: 700 12px var(--font); cursor: pointer; white-space: nowrap; }
.mk-m.on { background: #4cc9ff; color: #04131c; }
.mk-acts { display: flex; gap: 6px; }
.mk-acts .btn { flex: 1; justify-content: center; }
.mk-acts .btn[hidden] { display: none; }
/* messages: big dancing emojis */
.msg.jumbo { background: none !important; padding: 0 2px; box-shadow: none; }
.jb { display: inline-block; font-size: 46px; line-height: 1.12; cursor: pointer; user-select: none; transform-origin: 50% 75%; letter-spacing: 2px; }
.jb.n2 { font-size: 40px; }
.jb.n3 { font-size: 34px; }
.jb.go.k-pop { animation: jbPop .7s cubic-bezier(.2, 1.6, .4, 1); }
.jb.go.k-heart { animation: jbBeat 1.2s ease-in-out; }
.jb.go.k-shake { animation: jbShake .9s ease-in-out; }
.jb.go.k-fire { animation: jbFire 1.1s ease-in-out; transform-origin: 50% 100%; }
.jb.go.k-party { animation: jbParty .9s cubic-bezier(.2, 1.4, .4, 1); }
.jb.go.k-wave { animation: jbWave 1.2s ease-in-out; transform-origin: 75% 85%; }
.jb.go.k-bounce { animation: jbBounce .9s cubic-bezier(.3, 1.5, .5, 1); }
.jb.go.k-wow { animation: jbWow .8s cubic-bezier(.2, 1.6, .4, 1); }
.jb.go.k-sad { animation: jbSad 1.4s ease-in-out; }
@keyframes jbPop { 0% { transform: scale(.2); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes jbBeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.3); } 30% { transform: scale(1); } 45% { transform: scale(1.25); } 60% { transform: scale(1); } 75% { transform: scale(1.12); } }
@keyframes jbShake { 0%, 100% { transform: rotate(0); } 10%, 30%, 50%, 70% { transform: rotate(-14deg) scale(1.1); } 20%, 40%, 60%, 80% { transform: rotate(14deg) scale(1.1); } }
@keyframes jbFire { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.2, .9); } 40% { transform: scale(.92, 1.22); } 60% { transform: scale(1.15, .95); } 80% { transform: scale(.96, 1.12); } }
@keyframes jbParty { 0% { transform: scale(.2) rotate(-40deg); } 55% { transform: scale(1.35) rotate(15deg); } 75% { transform: scale(.95) rotate(-6deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes jbWave { 0%, 100% { transform: rotate(0); } 15%, 45%, 75% { transform: rotate(22deg); } 30%, 60%, 90% { transform: rotate(-12deg); } }
@keyframes jbBounce { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-18px) scale(1.1); } 50% { transform: translateY(0) scale(1.05, .92); } 70% { transform: translateY(-8px); } }
@keyframes jbWow { 0% { transform: scale(.4); } 40% { transform: scale(1.45); } 70% { transform: scale(.9); } 100% { transform: scale(1); } }
@keyframes jbSad { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(6px) rotate(-6deg) scale(.95); } 60% { transform: translateY(6px) rotate(6deg) scale(.95); } }
@media (prefers-reduced-motion: reduce) { .jb.go { animation: none !important; } }
/* messages: GIFs */
.msg.gifmsg { padding: 5px; }
.msg.gifmsg .from { padding: 2px 6px 3px; }
.gifm { position: relative; width: min(230px, 100%); border-radius: 11px; overflow: hidden; background: #0b0d10; }
.msg .gifm video, .msg .gifm img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: cover; margin: 0; border-radius: 0; display: block; }
.gif-badge { position: absolute; left: 6px; bottom: 6px; padding: 1px 5px; border-radius: 5px; background: rgba(0, 0, 0, .55); color: #fff; font: 900 9px var(--font); letter-spacing: .5px; pointer-events: none; }
/* messages: reactions */
.rxs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.msg.jumbo .rxs { margin-top: 2px; }
.rxc { border: 0; display: inline-flex; align-items: center; gap: 3px; height: 26px; padding: 0 8px; border-radius: 13px; background: rgba(0, 0, 0, .28); color: #e8ecf1; font: 800 12px var(--font); line-height: 1; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); transition: transform .1s; }
.rxc.on { background: rgba(76, 201, 255, .25); box-shadow: inset 0 0 0 1.5px #4cc9ff; }
.rxc:active { transform: scale(.88); }
.rxc.new { animation: rxcIn .35s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes rxcIn { from { transform: scale(.3); } }
.rxbar { position: absolute; bottom: calc(100% - 4px); left: 0; z-index: 3; display: flex; gap: 2px; padding: 4px; border-radius: 20px; background: rgba(20, 23, 28, .97); box-shadow: 0 0 0 1px #05070a, 0 8px 22px rgba(0, 0, 0, .5); animation: rxbarIn .18s cubic-bezier(.2, 1.5, .4, 1); white-space: nowrap; }
.msg.me .rxbar { left: auto; right: 0; }
.rxbar.below { bottom: auto; top: calc(100% - 4px); }
.rxq { width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; font-size: 21px; line-height: 1; cursor: pointer; padding: 0; transition: transform .1s; }
.rxq:hover { transform: scale(1.3) translateY(-2px); background: #232933; }
.rxq.more { font: 800 20px/1 var(--font); color: #c7d0da; background: #232933; }
@keyframes rxbarIn { from { transform: scale(.6) translateY(6px); opacity: 0; } }
@media (hover: none) { .rxq { width: 40px; height: 40px; font-size: 24px; } }
#fxlayer > .rx-mini { font-size: 22px; }
#fxlayer > .rx-heart { font-size: 72px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45)); }
/* Jacob 11-08: 'REDUCE THE WIDTH OF THE CONTACTS BUTTON JUST A LITTLE SO IT'S A LITTLE WIDER THAN THE OTHERS' */
.act.big-friends { min-width: 86px; }
@media (max-width: 760px) { .act.big-friends { min-width: 74px; } }
/* a GIF in the chat has a real width (it was sized from its bubble, which was sized from it: both shrank to nothing) */
.msg .gifm { width: 230px; max-width: 100%; }
/* the GIF label sits top-left, clear of words on a made GIF */
.gif-badge { top: 6px; bottom: auto; }
/* Jacob 11-08: Friends again, a little wider */
.act.big-friends { min-width: 94px; }
@media (max-width: 760px) { .act.big-friends { min-width: 82px; } }
/* Jacob 11-08: 'PUT THE COLOR PICKER BELOW THEIR NAME RIGHT JUSTIFIED' (the name on top, my color wheel under it on the right) */
.tile .tile-top { flex-direction: column-reverse; align-items: flex-end; }
.tile .tile-top .tag { max-width: 100%; }
/* Jacob 11-08: 'THIS LOOKS CUT OFF A LITTLE BIT' (Make a GIF in the chat): everything fits the chat's width, nothing scrolls sideways,
   the picture is never pushed off the left edge, and the buttons shrink to fit */
.mk { justify-content: flex-start; overflow-x: hidden; gap: 8px; }
.mk > .mk-stage { margin-left: auto; width: 136px; }
.mk > .mk-side { margin-right: auto; }
.mk-acts { gap: 5px; }
.mk-acts .btn { min-width: 0; min-height: 42px; padding: 0 8px; gap: 4px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.mk-m { padding: 7px 5px; font-size: 11.5px; }

/* the Gmail logo on its share button (11-08) */
.gm-logo { display: inline-grid; place-items: center; width: 30px; height: 26px; border-radius: 7px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); flex: none; }
.gm-logo svg { width: 20px; height: 15px; display: block; }
/* Jacob 11-08: 'MAKE THE FRIENDS BUTTON JUST A TINY BIT WIDER' */
.act.big-friends { min-width: 98px; }
@media (max-width: 760px) { .act.big-friends { min-width: 86px; } }

/* a phone held upright in a big call (11-08): 5-8 people in 2 columns, 9-12 in 3 (1-4 still stack) */
@media (max-width: 560px) and (orientation: portrait) {
  .faces[data-view=grid][data-pn="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .faces[data-view=grid][data-pn="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* a phone held upright in a big call (5+ people): room for the Chat button under the faces, never over anyone's buttons (11-08) */
@media (max-width: 560px) and (orientation: portrait) {
  .faces[data-view=grid][data-pn="2"], .faces[data-view=grid][data-pn="3"] { padding-bottom: 72px; }
}
/* Jacob 11-08: 'MAKE THE 16:9 PERSON LITTLE ICON JUST A LITTLE BIGGER' (Cams): 30px (others 26px), labels stay lined up */
.act[data-a=faces] .ic { width: 30px; height: 30px; margin: -2px 0; }
/* Jacob 11-08: 'CAN WE MAKE THE 16:9 BOX PERSON ICON A LITTLE BIGGER??? I MEAN THE PICTURE': 34px (was 30, others 26), labels stay lined up */
.act[data-a=faces] .ic { width: 34px; height: 34px; margin: -4px 0; }
/* Jacob 11-08: 'NOW MAKE THE 16:9 ICON PICTURE SLIGHTLY BIGGER': 38px (was 34), labels stay lined up */
.act[data-a=faces] .ic { width: 38px; height: 38px; margin: -6px 0; }
/* Jacob 11-08: the other bar buttons grow a little when you point at them too (the big three lift 3px and grow 6%; these lift 2px
   and grow 4%), a quick press-in when clicked; only on devices with a mouse */
@media (hover: hover) {
  .bar .act:not(.big-friends):not(.big-react):not(.big-faces) { transition: transform .12s ease; transform-origin: 50% 80%; }
  .bar .act:not(.big-friends):not(.big-react):not(.big-faces):hover { transform: translateY(-2px) scale(1.04); }
  .bar .act:not(.big-friends):not(.big-react):not(.big-faces):active { transform: scale(.93); transition-duration: .05s; }
}

/* ✨ Effects (11-08): the button on my own video, and the picker */
.tile .tile-fx { position: absolute; left: 108px; bottom: 8px; z-index: 7; width: 44px; height: 44px; border: 0; border-radius: 10px; background: rgba(0, 0, 0, .55); display: grid; place-items: center; color: #fff; cursor: pointer; }
.tile .tile-fx .ic { width: 24px; height: 24px; }
.tile .tile-fx.on { background: linear-gradient(135deg, #ff5fa2, #8b5cff 55%, #4cc9ff); box-shadow: 0 0 0 2px rgba(0, 0, 0, .35), 0 0 14px rgba(160, 110, 255, .55); }
@media (hover: hover) { .tile .tile-fx:not(.on):hover { background: rgba(0, 0, 0, .75); } .tile .tile-fx:hover { transform: translateY(-1px) scale(1.05); } }
.tile .tile-fx:active { transform: scale(.93); }
@media (max-width: 560px) and (orientation: portrait) { .faces[data-view=grid][data-pn="3"] .tile .tile-fx { display: none; } }
.s-fxbtn { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 8px 12px; border: 0; border-radius: 12px; background: var(--plate); text-align: left; font-size: 15px; }
.fx-modal .modal { width: min(760px, calc(100vw - 20px)); }
.fx-modal .modal-body { overflow-x: hidden; }
.fx-pv { position: relative; aspect-ratio: 16 / 9; max-height: 30vh; max-width: 100%; margin: 0 auto 12px; border-radius: 14px; overflow: hidden; background: #0b0d10; box-shadow: 0 0 0 1px var(--line); }
.fx-pv video { width: 100%; height: 100%; object-fit: cover; display: block; }
.fx-pv video.mirror, .fx-c.mirror { transform: scaleX(-1); }
.fx-pv-off { position: absolute; inset: 0; display: none; place-items: center; text-align: center; padding: 16px; color: var(--dim); font-size: 14px; }
.fx-pv.nocam .fx-pv-off { display: grid; }
.fx-tabs { display: flex; gap: 6px; padding: 4px; margin-bottom: 10px; border-radius: 12px; background: #12161c; }
.fx-tabs button { flex: 1; min-height: 44px; border: 0; border-radius: 9px; background: transparent; color: #c9d3de; font-weight: 650; }
.fx-tabs button.on { background: var(--plate2); color: #fff; box-shadow: var(--shadow); }
.fx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; max-height: 40vh; overflow-y: auto; padding: 3px; }
.fx-grid[hidden] { display: none; }
.fx-opt { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 0 0 8px; border: 0; border-radius: 12px; background: #1f252e; color: var(--text); font-size: 13px; overflow: hidden; transition: transform .12s ease, box-shadow .12s ease; }
.fx-th { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(135deg, #2b3242, #171b22); }
.fx-th i { font-style: normal; font-size: 30px; line-height: 1; }
.fx-th .fx-c { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: fxIn .25s ease; }
@keyframes fxIn { from { opacity: 0; } }
.fx-lb { padding: 0 6px; text-align: center; line-height: 1.2; overflow-wrap: anywhere; }
.fx-opt.on { box-shadow: 0 0 0 3px var(--accent); }
.fx-opt.on::after { content: '✓'; position: absolute; top: 6px; right: 6px; z-index: 2; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #04202c; font-size: 13px; font-weight: 800; }
@media (hover: hover) { .fx-opt:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px #3a4456; } .fx-opt.on:hover { box-shadow: 0 0 0 3px var(--accent); } }
.fx-opt:active { transform: scale(.95); }
.fx-opt.wait .fx-th::after { content: ''; position: absolute; z-index: 3; width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff; animation: fxSpin .7s linear infinite; }
@keyframes fxSpin { to { transform: rotate(1turn); } }
.fx-opt[data-id=mine]:not(.has) .fx-th::before { content: '+'; position: absolute; right: 8px; bottom: 6px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #04202c; font-size: 18px; font-weight: 800; }
.fx-change { display: none; position: absolute; left: 6px; top: 6px; z-index: 2; padding: 2px 8px; border-radius: 99px; background: rgba(0, 0, 0, .65); color: #fff; font-size: 11.5px; }
.fx-opt.on.has .fx-change { display: block; }
.fx-modal.finding .fx-grid[data-for=bgs]::before { content: 'Finding you for the backgrounds…'; grid-column: 1 / -1; color: var(--dim); font-size: 13px; }
.fx-note { margin: 10px 2px 0; font-size: 12.5px; }
.fx-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; }
.fx-foot .btn { flex: 1 1 0; min-width: 0; }
.fx-foot .btn:disabled { opacity: .45; cursor: default; }
.fx-grid { grid-auto-rows: max-content; align-content: start; }
.fx-th, .fx-lb { flex-shrink: 0; }
.fx-sec { grid-column: 1 / -1; margin: 6px 2px -2px; color: var(--dim); font-size: 12.5px; font-weight: 650; letter-spacing: .02em; }
.fx-pv { flex-shrink: 0; width: min(100%, 440px); min-height: 0; }
@media (max-height: 640px) { .fx-pv { width: min(100%, 300px); } }
.fx-finder { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 2px 10px; font-size: 13px; color: var(--dim); }
.fx-finder[hidden] { display: none; }
.fx-finder > span { font-weight: 650; margin-right: 2px; }
.fx-finder button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 99px; background: #1f252e; color: var(--text); font-weight: 600; }
.fx-finder button.on { background: var(--accent); color: #04202c; }
.fx-finder .fx-how { flex-basis: 100%; font-size: 11.5px; }

/* the one-tap move to the new address (11-08) */
.move-back { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 16px; background: rgba(6, 8, 12, .72); backdrop-filter: blur(6px); }
.move-card { width: min(420px, 100%); padding: 28px 24px 22px; border-radius: 22px; background: var(--panel); box-shadow: var(--shadow), 0 24px 60px rgba(0, 0, 0, .5); text-align: center; display: grid; gap: 10px; }
.move-house { font-size: 56px; line-height: 1; }
.move-card h2 { margin: 4px 0 0; font: 700 24px/1.2 var(--display); }
.move-url { margin: 0; color: var(--accent); font-weight: 700; font-size: 18px; }
.move-card p { margin: 0 0 6px; color: var(--dim); }
.move-card .btn { width: 100%; }