/* Voice call view: tiles, share cards, watch stage, dock and the camera / more sheets.
   The call surface is dark in both themes, so the palette is pinned here and everything inside reads the usual tokens. */

.call {
  --bg: #0c0d12; --bg-2: #111218; --panel: #15171f; --panel-2: #1a1d26; --panel-3: #222633;
  --line: #20242f; --line-2: #2a2f3d;
  --ink: #f2f4f8; --ink-2: #c9cedb; --ink-3: #98a0b3; --ink-4: #6d7488;
  --accent: #5b8def; --accent-2: #8b7cf6; --accent-soft: rgba(91, 141, 239, .14);
  --rec: #d4423a;
  color-scheme: dark;
}

.call__main { flex: 1; min-height: 0; padding: 16px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; overscroll-behavior: contain; }
.call__notices { display: grid; gap: 8px; }
.call__notices:empty, .wpanel-slot:empty { display: none; }
.call__label { font-size: 12.5px; color: var(--ink-3); }
.call .spacer { flex: 1; }

.live-tag { display: inline-flex; align-items: center; direction: ltr; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; line-height: 1.5; background: var(--rec); color: #fff; padding: 1px 7px; border-radius: 6px; }

/* Share cards */
.scards { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.scard { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line-2); }
.scard__thumb { flex: none; width: 96px; height: 54px; border-radius: 10px; background: #1d2231; display: grid; place-items: center; color: var(--ink-3); }
.scard__body { flex: 1; min-width: 0; display: grid; line-height: 1.5; }
.scard__meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.scard__body b { margin-top: 4px; font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.scard__detail { font-size: 12px; color: var(--ink-3); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.scard__btn { flex: none; min-width: 44px; height: 44px; padding: 0 16px; border: 0; border-radius: 14px; background: var(--accent); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; }
.scard.is-p2p .scard__btn { background: var(--panel-3); color: var(--ink-3); font-weight: 500; font-size: 13px; }

/* Tiles */
.tile { background: var(--panel-2); border-radius: 20px; }
.tile.is-tappable { cursor: pointer; }
.tile.is-speaking .av { box-shadow: 0 0 0 4px rgba(63, 178, 127, .35); }
.tile__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.tile.has-video > .av { display: none; }
.tile.is-speaking.has-video { border-color: var(--ok); }
.tile.is-mirror .tile__video { transform: scaleX(-1); }
.tile__tags { position: absolute; top: 10px; left: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.tile__tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 8px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 11px; }
.tile__tag svg { width: 13px; height: 13px; stroke-width: 2; }
.tile__tag--live { background: var(--rec); }
.tile__name { bottom: 10px; inset-inline-start: 10px; color: #fff; }
.tile__vol { inset-inline-end: auto; inset-inline-start: 8px; color: #fff; }
.tile__vol input { min-height: 28px; }

.call__grid.has-stage { display: flex; flex: none; gap: 10px; overflow-x: auto; overflow-y: hidden; max-height: none; justify-content: safe center; padding-bottom: 4px; scrollbar-width: thin; }
.has-stage .tile { flex: none; width: 150px; height: 104px; aspect-ratio: auto; border-radius: 16px; }
.has-stage .tile .av--xl { width: 44px; height: 44px; font-size: 18px; }
.has-stage .tile__name { bottom: 6px; inset-inline-start: 6px; font-size: 11px; padding: 1px 7px; }
.has-stage .tile__tags, .has-stage .tile__vol { display: none; }

/* Stage */
.stage { color: #fff; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.stage__view { position: absolute; inset: 0; overflow: hidden; display: grid; place-items: center; touch-action: none; }
.stage__view.is-mirror { transform: scaleX(-1); }
/* Absolute: as a grid item the video takes its own aspect height and overflows a wide, short screen. */
.stage .stage__view video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform-origin: 50% 50%; will-change: transform; }
.stage.is-zoomed { cursor: grab; }
.stage__wait, .stage__paused { z-index: 1; pointer-events: none; }
.stage__top, .stage__bottom { position: absolute; inset-inline: 10px; z-index: 2; display: flex; align-items: center; gap: 6px; pointer-events: none; transition: opacity .25s; }
.stage__top { top: 10px; }
.stage__bottom { bottom: 10px; gap: 8px; }
.stage__top > *, .stage__bottom > * { pointer-events: auto; }
.stage__chip { min-width: 0; padding: 3px 9px; border-radius: 8px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage__viewers { font-size: 12.5px; color: #c9cedb; white-space: nowrap; }
.ovb { flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer; transition: background .15s; }
.ovb.is-off { background: #f2f4f8; color: #111; }
.ovb--leave { background: var(--rec); }
.stage__pill { flex: none; height: 44px; padding: 0 14px; border: 0; border-radius: 22px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 13px; cursor: pointer; white-space: nowrap; }
.stage__zoom { position: absolute; top: 50%; left: 12px; z-index: 2; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; transition: opacity .25s; }
.stage__zoom .stage__chip { font-size: 13px; font-weight: 700; padding: 5px 10px; border-radius: 10px; }
.stage__side { position: absolute; top: 50%; right: max(20px, env(safe-area-inset-right)); z-index: 2; transform: translateY(-50%); display: none; flex-direction: column; gap: 10px; transition: opacity .25s; }
.stage__exit, .stage__viewers { display: none; }
.stage__vol { width: 140px; min-height: 32px; accent-color: var(--accent); }
.stage__vol[hidden] { display: none; }
@media (max-width: 480px) { .stage__vol { width: 96px; } }
.stage__menu { position: absolute; bottom: 64px; inset-inline-end: 10px; z-index: 3; width: min(340px, calc(100% - 20px)); max-height: calc(100% - 80px); overflow-y: auto; padding: 12px 14px; border-radius: 16px; background: rgba(21, 23, 31, .96); border: 1px solid var(--line-2); transition: opacity .25s; }
.stage__menu .wpanel { background: none; border: 0; padding: 0; }

.stage.is-full { border-radius: 0; aspect-ratio: auto; max-height: none; margin: 0; }
.stage.is-full::before, .stage.is-full::after { content: ""; position: absolute; inset-inline: 0; z-index: 1; pointer-events: none; transition: opacity .25s; }
.stage.is-full::before { top: 0; height: 90px; background: linear-gradient(rgba(0, 0, 0, .7), transparent); }
.stage.is-full::after { bottom: 0; height: 100px; background: linear-gradient(transparent, rgba(0, 0, 0, .7)); }
.stage.is-full .stage__top { top: max(14px, env(safe-area-inset-top)); inset-inline: max(20px, env(safe-area-inset-left), env(safe-area-inset-right)); gap: 10px; }
.stage.is-full .stage__bottom { bottom: max(14px, env(safe-area-inset-bottom)); inset-inline: max(20px, env(safe-area-inset-left), env(safe-area-inset-right)); gap: 10px; }
.stage.is-full .stage__zoom { left: max(20px, env(safe-area-inset-left)); }
.stage.is-full .stage__side { display: flex; }
.stage.is-full .stage__exit { display: grid; }
.stage.is-full .stage__viewers { display: inline; }
.stage.is-full .stage__close { display: none; }
.stage.is-full .stage__label { font-size: 14px; font-weight: 700; }
.stage.is-idle { cursor: none; }
.stage.is-idle::before, .stage.is-idle::after,
.stage.is-idle :is(.stage__top, .stage__bottom, .stage__side, .stage__zoom, .stage__menu) { opacity: 0; }
.stage.is-idle :is(.stage__top, .stage__bottom, .stage__side, .stage__zoom, .stage__menu),
.stage.is-idle :is(.stage__top, .stage__bottom, .stage__side, .stage__zoom, .stage__menu) * { pointer-events: none; }

/* Under the stage */
.winfo { display: flex; align-items: center; gap: 12px; }
.winfo__who { flex: 1; min-width: 0; display: grid; line-height: 1.5; }
.winfo__who b { font-size: 15px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.winfo__who span { font-size: 12.5px; color: var(--ink-3); }
.winfo__viewers { flex: none; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.winfo__stack { display: flex; }
.winfo__stack .av { width: 28px; height: 28px; font-size: 12px; border: 2px solid var(--bg); }
.winfo__stack .av + .av { margin-inline-start: -8px; }

.wpanel { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); }
.wpanel__label, .csheet__label { font-size: 12.5px; color: var(--ink-3); }
.wpanel__vol { display: flex; align-items: center; gap: 10px; color: var(--ink-3); }
.wpanel__vol input { flex: 1; min-width: 0; min-height: 32px; accent-color: var(--accent); }
.wpanel__pct { width: 40px; flex: none; text-align: end; font-size: 13px; color: var(--ink-2); }
.wpanel__note { font-size: 12px; line-height: 1.7; color: var(--ink-4); }

.cchips { display: flex; flex-wrap: wrap; gap: 8px; }
.cchip { min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: transparent; color: var(--ink-2); font-size: 13px; cursor: pointer; }
.cchip.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.cchip:disabled { opacity: .5; cursor: default; }

/* Dock */
.call__dock { flex: none; display: flex; justify-content: center; align-items: flex-start; gap: 10px; padding: 4px 16px 18px; flex-wrap: wrap; }
.dock__btn { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 52px; padding: 0; border: 0; background: none; color: var(--ink-2); font-size: 11px; line-height: 1.3; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dock__ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--panel-3); color: var(--ink); transition: background .15s, transform .15s; }
.dock__ico svg { width: 22px; height: 22px; }
.dock__btn:active .dock__ico { transform: scale(.95); }
.dock__btn.is-off .dock__ico { background: #f2f4f8; color: #111; }
.dock__btn.is-active .dock__ico { background: var(--accent); color: #fff; }
.dock__btn--leave .dock__ico { width: 64px; background: var(--rec); color: #fff; }
.dock__lbl { display: none; }
@media (hover: hover) {
  .dock__btn:hover .dock__ico { background: #2c3141; }
  .dock__btn.is-off:hover .dock__ico { background: #fff; }
  .dock__btn.is-active:hover .dock__ico { filter: brightness(1.08); background: var(--accent); }
  .dock__btn--leave:hover .dock__ico { background: #f0645c; }
  .ovb:hover { background: rgba(0, 0, 0, .75); }
  .scard__btn:hover { filter: brightness(1.08); }
  .cchip:not(:disabled):hover { border-color: var(--ink-4); }
}

/* Sheets */
.csheet { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; justify-content: flex-end; color: var(--ink); }
.csheet__scrim { position: absolute; inset: 0; background: rgba(5, 6, 9, .55); animation: csheet-fade .2s ease; }
.csheet__panel { position: relative; display: flex; flex-direction: column; gap: 14px; max-height: 78dvh; overflow-y: auto; overscroll-behavior: contain; padding: 10px 18px calc(22px + env(safe-area-inset-bottom)); background: var(--panel); border-top: 1px solid var(--line-2); border-radius: 26px 26px 0 0; animation: csheet-up .22s ease; }
.csheet__grab { width: 40px; height: 5px; flex: none; border-radius: 3px; background: #3a4052; align-self: center; }
.csheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.csheet__head h2 { font-size: 18px; font-weight: 800; }
.csheet__label { margin-bottom: 8px; }
.csheet__rowtext { flex: 1; min-width: 0; display: grid; line-height: 1.5; text-align: start; }
.csheet__rowtext b { font-size: 14px; font-weight: 600; }
.csheet__rowtext span { font-size: 12px; color: var(--ink-3); }
.csheet__actions { display: flex; gap: 10px; }
.csheet__actions .btn { flex: 1; min-height: 50px; border-radius: 15px; }
.csheet__item { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); cursor: pointer; }
.csheet__item > svg { color: var(--ink-3); }
.csheet__item.is-on > svg { color: var(--accent); }
.csheet__item:disabled { cursor: default; }
.csheet__item:disabled b { color: var(--ink-3); }
.csheet__people { display: grid; gap: 4px; }
.csheet__person { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(110px, 40%); align-items: center; gap: 10px; min-height: 48px; }
.csheet__person span:not(.av) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; }
.csheet__person input { min-height: 32px; accent-color: var(--accent); }
.cchip:focus-visible, .dock__btn:focus-visible .dock__ico, .ovb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* My own camera: full-view setup and live views, a centred card on wide screens */
html.has-selfcam, html.has-selfcam body { overflow: hidden; }
.selfcam { position: fixed; inset: 0; z-index: 46; color: #fff; background: #000; animation: csheet-fade .2s ease; -webkit-tap-highlight-color: transparent; }
.selfcam__frame { position: absolute; inset: 0; overflow: hidden; background: #111318; user-select: none; -webkit-user-select: none; }
.selfcam__frame::before, .selfcam__frame::after { content: ""; position: absolute; inset-inline: 0; z-index: 1; pointer-events: none; }
.selfcam__frame::before { top: 0; height: 160px; background: linear-gradient(rgba(0, 0, 0, .58), transparent); }
.selfcam__frame::after { bottom: 0; height: 300px; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); }
.selfcam__video, .selfpip .selfcam__video { position: absolute; inset: 0; }
.selfcam__video video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.selfcam__video.is-mirror video { transform: scaleX(-1); }
.selfcam__empty { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 24px; text-align: center; color: #c9cedb; }
.selfcam__empty .btn { min-height: 44px; }
.selfcam__top { position: absolute; z-index: 3; top: max(14px, calc(env(safe-area-inset-top) + 8px)); left: max(14px, env(safe-area-inset-left)); right: max(14px, env(safe-area-inset-right)); display: flex; align-items: center; gap: 10px; }
.selfcam__chip { display: inline-flex; align-items: center; gap: 8px; min-width: 0; min-height: 36px; padding: 6px 13px; border-radius: 999px; background: rgba(10, 12, 18, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 13px; font-weight: 700; white-space: nowrap; }
.selfcam__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #f0b23a; }
.selfcam__dot.is-live { width: 9px; height: 9px; background: #ff4d43; box-shadow: 0 0 0 4px rgba(255, 77, 67, .25); }
.selfcam__time { color: #c9cedb; font-weight: 500; font-variant-numeric: tabular-nums; }
.selfcam__viewers { padding-inline-start: 4px; font-size: 12.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.selfcam__stack { display: flex; flex: none; }
.selfcam__stack .av { width: 26px; height: 26px; font-size: 11px; border: 2px solid #15110d; }
.selfcam__stack .av + .av { margin-inline-start: -8px; }
.selfcam__notice { position: absolute; z-index: 3; top: max(66px, calc(env(safe-area-inset-top) + 60px)); left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); padding: 8px 14px; border-radius: 12px; background: rgba(40, 30, 10, .82); color: #f1c47a; font-size: 13px; line-height: 1.6; text-align: center; }

.selfcam__glass { flex: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(10, 12, 18, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; cursor: pointer; transition: background .15s, transform .15s; }
.selfcam__glass svg { width: 22px; height: 22px; }
.selfcam__glass:active { transform: scale(.94); }
.selfcam__glass:disabled { opacity: .6; cursor: default; }
.selfcam__glass.is-on { background: #fff; color: #111; }
.selfcam__glass.is-accent { background: rgba(91, 141, 239, .9); color: #fff; }
.selfcam__glass.is-flip[aria-busy="true"] svg { animation: spin .8s linear infinite; }
.selfcam__top .selfcam__glass { width: 44px; height: 44px; }

.selfcam__rail { position: absolute; z-index: 3; top: max(96px, calc(env(safe-area-inset-top) + 88px)); left: max(14px, env(safe-area-inset-left)); display: flex; flex-direction: column; gap: 12px; align-items: center; }
.selfcam__railitem { display: grid; justify-items: center; gap: 4px; }
.selfcam__rail .selfcam__glass.is-on { background: rgba(91, 141, 239, .9); color: #fff; }
.selfcam__raillbl { font-size: 10.5px; color: #e9ecf3; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.selfcam__quality { font: inherit; font-size: 11px; font-weight: 800; direction: ltr; }

.selfcam__bottom { position: absolute; z-index: 3; left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right)); bottom: max(26px, calc(env(safe-area-inset-bottom) + 14px)); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.selfcam__lenses { display: flex; align-items: center; gap: 2px; max-width: 100%; padding: 4px; border-radius: 999px; background: rgba(10, 12, 18, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); overflow-x: auto; scrollbar-width: none; }
.selfcam__lens { flex: none; min-width: 44px; height: 44px; padding: 0 8px; border: 0; border-radius: 999px; background: transparent; color: #fff; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.selfcam__lens.is-on { background: #fff; color: #111; font-size: 13px; }
.selfcam__lenses.is-named .selfcam__lens { max-width: 160px; padding: 0 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.selfcam__lens:disabled { cursor: default; }
.selfcam__facing { display: flex; gap: 24px; }
.selfcam__tab { min-width: 44px; min-height: 44px; padding: 0 6px; border: 0; border-bottom: 2px solid transparent; background: none; color: rgba(255, 255, 255, .7); font: inherit; font-size: 14px; font-weight: 700; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); cursor: pointer; }
.selfcam__tab.is-on { color: #ffcf5a; border-bottom-color: #ffcf5a; }
.selfcam__tab:disabled { cursor: default; }

.selfcam__shutter { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; width: min(100%, 360px); margin-top: 6px; }
.selfcam__cancel { justify-self: center; width: 96px; height: 48px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(10, 12, 18, .45); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.selfcam__start { width: 84px; height: 84px; padding: 0; border: 4px solid #fff; border-radius: 50%; background: transparent; display: grid; place-items: center; cursor: pointer; transition: transform .15s; }
.selfcam__start > span { width: 66px; height: 66px; border-radius: 50%; background: #3f6fd8; display: grid; place-items: center; color: #fff; }
.selfcam__start svg { width: 28px; height: 28px; stroke-width: 2.2; }
.selfcam__start:active { transform: scale(.94); }
.selfcam__start:disabled { cursor: default; }
.selfcam__start:disabled > span { background: #34508f; }
.selfcam__hint { justify-self: center; display: grid; font-size: 12px; line-height: 1.5; color: #d7dbe6; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.selfcam__hint b { font-size: 14px; color: #fff; }

.selfcam__peers { position: absolute; z-index: 3; top: max(84px, calc(env(safe-area-inset-top) + 76px)); left: max(14px, env(safe-area-inset-left)); display: flex; flex-direction: column; gap: 10px; }
.selfcam__peer { position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; }
.selfcam__peer .av { width: 46px; height: 46px; font-size: 16px; border: 2px solid rgba(255, 255, 255, .85); }
.selfcam__peer.is-speaking .av { border-color: #3fb27f; box-shadow: 0 0 0 3px #3fb27f; }
.selfcam__more { background: rgba(10, 12, 18, .6); border: 2px solid rgba(255, 255, 255, .5); font-size: 13px; font-weight: 800; }
.selfcam__peermute { position: absolute; bottom: -2px; left: -2px; width: 18px; height: 18px; border-radius: 50%; background: #e5534b; display: grid; place-items: center; }
.selfcam__peermute svg { width: 11px; height: 11px; stroke-width: 2.6; color: #fff; }
.selfcam__flip { position: absolute; z-index: 3; right: max(20px, env(safe-area-inset-right)); bottom: calc(max(26px, calc(env(safe-area-inset-bottom) + 14px)) + 106px); width: 52px; height: 52px; }
.selfcam__flip svg { width: 24px; height: 24px; }
.selfcam__res { position: absolute; z-index: 3; left: max(20px, env(safe-area-inset-left)); bottom: calc(max(26px, calc(env(safe-area-inset-bottom) + 14px)) + 116px); min-height: 32px; font-size: 12px; font-weight: 500; }
.selfcam__dock { display: flex; justify-content: space-between; align-items: center; gap: 6px; width: min(100%, 420px); padding: 10px 12px; border-radius: 28px; background: rgba(18, 20, 28, .55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .12); }
.selfcam__dock .selfcam__glass { width: 56px; height: 56px; border-radius: 20px; background: rgba(255, 255, 255, .14); }
.selfcam__dock .selfcam__glass svg { width: 24px; height: 24px; }
.selfcam__dock .selfcam__glass.is-on { background: #fff; color: #111; }
.selfcam__dock .selfcam__glass.is-accent { background: var(--accent); color: #fff; }
.selfcam__dock .selfcam__leave { width: 68px; background: var(--rec); color: #fff; }
.selfcam__glass:focus-visible, .selfcam__lens:focus-visible, .selfcam__tab:focus-visible, .selfcam__cancel:focus-visible, .selfcam__start:focus-visible, .selfpip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (hover: hover) {
  .selfcam__glass:not(:disabled):hover { background: rgba(10, 12, 18, .75); }
  .selfcam__dock .selfcam__glass:not(:disabled):hover { background: rgba(255, 255, 255, .24); }
  .selfcam__dock .selfcam__glass.is-on:hover { background: #fff; }
  .selfcam__dock .selfcam__leave:hover { background: #f0645c; }
}

/* Phone on its side: controls move to the sides, the people to the bottom. */
@media (orientation: landscape) and (max-height: 540px) {
  .selfcam__frame::before { height: 90px; }
  .selfcam__frame::after { height: 120px; }
  .selfcam__top { left: max(20px, env(safe-area-inset-left)); right: max(20px, env(safe-area-inset-right)); }
  .selfcam__notice { top: max(62px, calc(env(safe-area-inset-top) + 56px)); }
  .selfcam__rail { top: 50%; transform: translateY(-50%); gap: 10px; }
  .selfcam__raillbl { display: none; }
  .selfcam--live .selfcam__rail { left: auto; right: max(20px, env(safe-area-inset-right)); }
  .selfcam__bottom { bottom: max(12px, calc(env(safe-area-inset-bottom) + 6px)); gap: 6px; left: 25%; right: 25%; }
  .selfcam__facing { order: 2; }
  .selfcam__shutter { position: fixed; top: 50%; right: max(20px, env(safe-area-inset-right)); transform: translateY(-50%); width: auto; display: flex; flex-direction: column; gap: 14px; margin: 0; }
  .selfcam__hint { display: none; }
  .selfcam__start { order: -1; }
  .selfcam__cancel { width: 84px; }
  .selfcam__dock { position: fixed; top: 50%; left: max(20px, env(safe-area-inset-left)); transform: translateY(-50%); flex-direction: column; width: auto; padding: 0; gap: 8px; border: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .selfcam__dock .selfcam__glass { width: 44px; height: 44px; border-radius: 50%; background: rgba(10, 12, 18, .55); }
  .selfcam__dock .selfcam__leave { width: 44px; background: var(--rec); }
  .selfcam__peers { top: auto; left: auto; right: max(20px, env(safe-area-inset-right)); bottom: max(14px, calc(env(safe-area-inset-bottom) + 8px)); flex-direction: row; gap: 8px; }
  .selfcam__peer, .selfcam__peer .av { width: 44px; height: 44px; }
  .selfcam__flip { bottom: auto; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; }
  .selfcam__res { display: none; }
}

/* Wide screens: the same view as a large card over the call. */
@media (min-width: 821px) and (min-height: 541px) {
  .selfcam { background: rgba(5, 6, 9, .8); display: grid; place-items: center; padding: 24px; }
  .selfcam__frame { position: relative; inset: auto; width: min(960px, 100%, calc((100dvh - 48px) * 1.6)); aspect-ratio: 16 / 10; border-radius: 24px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
  html .selfpip { width: 150px; height: 224px; }
  html .selfpip.is-wide { width: 240px; height: 135px; }
}

/* My camera as a floating window over the call; it snaps to the corner it is dropped nearest. */
.selfpip { position: fixed; z-index: 34; width: 118px; height: 176px; border-radius: 22px; overflow: hidden; background: #000; color: #fff; box-shadow: 0 14px 34px rgba(0, 0, 0, .6), 0 0 0 2px rgba(255, 255, 255, .9); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; transition: transform .24s cubic-bezier(.2, .8, .2, 1); }
.selfpip.is-wide { width: 176px; height: 118px; }
.selfpip.is-dragging { transition: none; cursor: grabbing; }
.selfpip[data-corner^="t"] { top: var(--pip-top, 80px); }
.selfpip[data-corner^="b"] { bottom: var(--pip-bottom, 120px); }
.selfpip[data-corner$="l"] { left: max(var(--pip-left, 12px), calc(env(safe-area-inset-left) + 12px)); }
.selfpip[data-corner$="r"] { right: max(var(--pip-right, 12px), calc(env(safe-area-inset-right) + 12px)); }
.selfpip__me { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; background: rgba(0, 0, 0, .55); font-size: 10.5px; font-weight: 700; }
.selfpip__me i { width: 6px; height: 6px; border-radius: 50%; background: #ff4d43; }
.selfpip__flip, .selfpip__expand { position: absolute; bottom: 4px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: none; color: #fff; }
.selfpip__flip { left: 4px; cursor: pointer; }
.selfpip__expand { right: 4px; pointer-events: none; }
.selfpip__flip::before, .selfpip__expand::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: rgba(0, 0, 0, .55); }
.selfpip__flip svg, .selfpip__expand svg { position: relative; width: 18px; height: 18px; }
.selfpip__flip[aria-busy="true"] svg { animation: spin .8s linear infinite; }
.selfpip__flip[hidden] { display: none; }
.tile__away { display: none; }
.tile.is-away { border: 2px dashed var(--line-2); background: #11131a; }
.tile.is-away > .av, .tile.is-away .tile__tags { display: none; }
.tile.is-away .tile__away { display: block; padding: 0 12px; font-size: 12.5px; line-height: 1.8; color: var(--ink-4); text-align: center; }

@keyframes csheet-fade { from { opacity: 0; } }
@keyframes csheet-up { from { transform: translateY(24px); opacity: 0; } }

/* Phones and narrow windows */
@media (max-width: 820px) {
  .call__main { padding: 8px 12px 0; gap: 10px; }
  .call__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(150px, 1fr); gap: 10px; align-content: stretch; }
  .call__grid[data-count="1"], .call__grid[data-count="2"] { grid-template-columns: minmax(0, 1fr); }
  .call__grid:not(.has-stage) .tile { aspect-ratio: auto; }
  .call__grid .av--xl { width: 72px; height: 72px; font-size: 28px; }
  .has-stage .tile { width: 92px; height: 92px; }
  .call__dock { margin: 10px 10px calc(12px + env(safe-area-inset-bottom)); padding: 12px 8px 10px; gap: 4px; justify-content: space-around; border-radius: 24px; background: var(--panel); border: 1px solid var(--line); flex-wrap: nowrap; }
  .dock__ico { border-radius: 18px; }
  .dock__lbl { display: block; }
  .call.is-watching .call__dock { margin-top: 0; background: none; border-color: transparent; justify-content: center; gap: 12px; padding-top: 8px; }
  .call.is-watching .dock__lbl { display: none; }
  .call.is-watching .call__main { padding-top: 0; }
  .call.is-watching .stage:not(.is-full) { flex: none; margin-inline: -12px; border-radius: 0; aspect-ratio: 16 / 9; max-height: 62dvh; }
  .stage:not(.is-full) .stage__q { display: none; }
  .scard { padding: 10px; gap: 10px; }
  .scard__thumb { width: 72px; height: 44px; }
}
@media (max-width: 820px) and (orientation: landscape) and (max-height: 500px) {
  .call.is-watching .stage:not(.is-full) { aspect-ratio: auto; height: calc(100dvh - 24px); max-height: none; }
}
@media (min-width: 821px) {
  .call.is-watching .stage { flex: 1 0 auto; min-height: 320px; }
  .call.is-watching .call__label, .call.is-watching .wpanel-slot { display: none; }
  .csheet { justify-content: center; align-items: center; padding: 24px; }
  .csheet > .csheet__panel { width: min(440px, 100%); }
  .csheet__grab { display: none; }
  .csheet__panel { max-height: calc(100dvh - 48px); border: 1px solid var(--line-2); border-radius: 20px; padding: 18px 20px 20px; }
}
@media (hover: none) {
  .tile__vol { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .csheet__panel, .csheet__scrim, .selfcam { animation: none; }
  .selfpip, .selfcam__glass, .selfcam__start { transition: none; }
  .selfcam__glass:active, .selfcam__start:active { transform: none; }
}

#pip-park { position: fixed; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; inset-inline-start: 0; bottom: 0; }

/* Stand-in for element fullscreen where the browser has none (iPhone Safari). */
.stage.is-fake-full { position: fixed; inset: 0; z-index: 80; width: 100vw; height: 100dvh; max-height: none; aspect-ratio: auto; margin: 0; flex: none; }
html.has-stage-full, html.has-stage-full body { overflow: hidden; }