/*
 * The call (20-room.js) in its two layouts, and the pre-join preview. The
 * dock fits a host's sidebar from 220 x 64: two rows when narrow (faces and
 * one line of words, then buttons), one row from 480 px, and its sizes are
 * counted to stay 64 px tall with room under the buttons: 3 + 22 + 3 + 30
 * + 6 with a mouse, and a 44 px touch target drawn 39 px tall with a touch.
 * While you share, the dock's faces give way to a 64 x 36 thumbnail of it.
 */
.call { position: relative; display: flex; flex-direction: column; height: 100dvh; overflow: hidden; background: var(--call-bg); color: var(--call-text); color-scheme: dark; }
.call :focus-visible { outline-color: var(--call-focus); }
.call .btn { background: none; color: var(--call-text); border-color: var(--call-line); }
.call .btn:hover { background: var(--call-btn); }
.call .btn.ghost { border-color: transparent; }
.call .btn.primary { background: var(--call-on); border-color: var(--call-on); color: var(--on-avatar); }
.call-head { display: flex; align-items: center; gap: .5rem; padding: .4rem .75rem; border-bottom: 1px solid var(--call-line); }
.call-head-text, .dock-text { flex: 1; min-width: 0; }
.call-title { font-size: 1rem; }
.call-sub, .call-q { font-size: .85rem; color: var(--call-muted); }
.call-title, .call-sub, .tile-name, .dock-title, .dock-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.call-q { display: inline-flex; align-items: center; gap: .35rem; }
.banner, .unlock { margin: .5rem .75rem 0; padding: .5rem .75rem; border-radius: 8px; background: var(--call-panel); border: 1px solid var(--call-line); font-size: .9rem; }
.banner:empty, .waiting:empty, .share-label:empty, .pre-status:empty { display: none; }
.unlock { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .75rem; }

.stage { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .5rem; padding: .5rem .75rem; }
.waiting { text-align: center; color: var(--call-muted); font-size: .9rem; }
.wait-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .25rem .6rem; }
.call .music { padding: .2rem .7rem; font-size: .85rem; color: var(--call-muted); }
.grid { --cols: 1; flex: 1; min-height: 0; display: grid; gap: .5rem; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-auto-rows: minmax(110px, 1fr); overflow: auto; }
.grid[data-n="2"], .grid[data-n="3"], .grid[data-n="4"] { --cols: 2; }
.grid[data-n="5"], .grid[data-n="6"], .grid[data-n="7"], .grid[data-n="8"], .grid[data-n="9"] { --cols: 3; }
.grid[data-n="10"], .grid[data-n="11"], .grid[data-n="12"] { --cols: 4; }
@media (max-width: 640px) { .grid:not([data-n="1"]) { --cols: 2; } }
.tile { position: relative; display: grid; place-items: center; min-height: 0; border-radius: 12px; background: var(--call-tile); overflow: hidden; }
.tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 3px solid transparent; pointer-events: none; transition: border-color .15s; }
.tile[data-speaking="true"][data-video="true"]::after { border-color: var(--speaking); }
.tile-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--share-bg); }
.tile[data-local="true"] .tile-video, .pre-video { transform: scaleX(-1); }
.tile-foot { position: absolute; left: .4rem; right: .4rem; bottom: .4rem; display: flex; align-items: center; gap: .3rem; min-width: 0; font-size: .85rem; }
.tile-name, .tile-q, .share-label { padding: .1rem .45rem; border-radius: 6px; background: var(--call-scrim); }
.tile-name { min-width: 0; }
.tile-mute { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--call-leave); color: var(--on-avatar); }
.tile-mute .i { width: 14px; height: 14px; }
.tile-q { display: inline-grid; margin-left: auto; padding: 2px 4px; }
.tile-q .i { width: 16px; height: 16px; }

.avatar { display: grid; place-items: center; flex: none; width: 72px; height: 72px; border-radius: 50%; background: var(--av-1); color: var(--on-avatar); font-weight: 700; font-size: 1.5rem; user-select: none; transition: box-shadow .15s; }
.avatar[data-c="2"] { background: var(--av-2); }
.avatar[data-c="3"] { background: var(--av-3); }
.avatar[data-c="4"] { background: var(--av-4); }
.avatar[data-c="5"] { background: var(--av-5); }
.avatar[data-c="6"] { background: var(--av-6); }
.avatar[data-c="7"] { background: var(--av-7); }
.avatar[data-c="8"] { background: var(--av-8); }
.tile[data-speaking="true"] .avatar { box-shadow: 0 0 0 3px var(--call-tile), 0 0 0 7px var(--speaking); }

.share { display: none; }
[data-mode="share"] .share { position: relative; display: grid; place-items: center; flex: 1; min-height: 0; border-radius: 12px; overflow: hidden; background: var(--share-bg); }
.share-video { width: 100%; height: 100%; object-fit: contain; }
.share-label { position: absolute; left: .5rem; top: .5rem; font-size: .85rem; }
/* Your own share, small and in a corner, so sharing this very window is no hall of mirrors. */
.me-share { position: absolute; right: .75rem; bottom: .5rem; z-index: 3; width: clamp(10rem, 24vw, 13rem); display: grid; gap: .4rem; padding: .4rem; border-radius: 10px; background: var(--call-panel); border: 1px solid var(--call-line); box-shadow: 0 6px 18px var(--call-shadow); }
.me-video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; border-radius: 6px; background: var(--share-bg); }
.me-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem; }
.me-label { font-size: .8rem; }
.call .me-stop { padding: .2rem .7rem; font-size: .85rem; background: var(--call-leave); border-color: var(--call-leave); color: var(--on-avatar); }
.call .me-stop:hover { background: var(--call-leave-hover); }
[data-mode="share"] .grid { flex: none; display: flex; overflow: auto hidden; }
[data-mode="share"] .tile { flex: none; width: 150px; height: 88px; }
[data-mode="share"] .avatar { width: 40px; height: 40px; font-size: 1rem; }
[data-mode="share"] .tile-foot { font-size: .75rem; }
@media (min-width: 980px) {
  [data-mode="share"] { flex-direction: row; }
  [data-mode="share"] .grid { flex-direction: column; width: 200px; overflow: hidden auto; }
  [data-mode="share"] .tile { width: 100%; height: 112px; }
}

.bar { position: relative; }
.controls { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .6rem; padding: .75rem .75rem max(1.25rem, calc(.6rem + env(safe-area-inset-bottom))); border-top: 1px solid var(--call-line); }
.ctl { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-width: 44px; height: 44px; padding: 0 .7rem; border: 0; border-radius: 22px; background: var(--call-btn); color: var(--call-text); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
.ctl:hover, .ctl[aria-expanded="true"] { background: var(--call-btn-hover); }
.ctl[aria-pressed="true"] { background: var(--call-on); color: var(--on-avatar); }
.ctl[aria-pressed="true"]:hover { background: var(--call-on-hover); }
.ctl[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.ctl[aria-busy="true"] { cursor: progress; }
.ctl-leave { background: var(--call-leave); color: var(--on-avatar); padding: 0 1rem; }
.ctl-leave:hover { background: var(--call-leave-hover); }
[data-layout="expanded"] .ctl-expand, [data-layout="window"] .ctl-expand { display: none; }
/* The host draws the name, the count and Leave above a window of its own. */
[data-layout="window"] .call-head-text, [data-layout="window"] .ctl-collapse { display: none; }
[data-layout="window"] .call-head { justify-content: flex-end; }
@media (max-width: 640px) {
  .ctl .ctl-text, .call-head .ctl-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .controls { gap: .45rem; }
  .ctl-leave { padding: 0 .7rem; }
}
.pop { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 20; width: min(20rem, calc(100vw - 1.5rem)); display: grid; gap: .6rem; padding: .75rem; background: var(--call-panel); border: 1px solid var(--call-line); border-radius: 12px; box-shadow: 0 8px 24px var(--call-shadow); }
.pop fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: .15rem; }
.pop legend, .pop-h { font-weight: 700; padding: 0; margin-bottom: .3rem; }
.opt { display: flex; align-items: flex-start; gap: .6rem; min-height: 32px; padding: .4rem .5rem; border-radius: 8px; cursor: pointer; }
.opt:hover { background: var(--call-btn); }
.opt input { margin-top: .15rem; accent-color: var(--call-on); }
.hint { display: block; font-size: .8rem; color: var(--call-muted); }
.pop-now { font-size: .85rem; color: var(--call-muted); }
.pop select { width: 100%; background: var(--call-tile); color: var(--call-text); border-color: var(--call-line); }

.dock-info { display: none; }
.call[data-layout="dock"] { height: 100vh; justify-content: center; gap: 3px; padding: 3px 6px 6px; }
[data-layout="dock"] .call-head, [data-layout="dock"] .stage > :not(.me-share), [data-layout="dock"] .ctl-q, [data-layout="dock"] .ctl-dev, [data-layout="dock"] .pop { display: none; }
[data-layout="dock"] .stage, [data-layout="dock"] .me-share { display: contents; }
[data-layout="dock"] .dock-info { display: flex; align-items: center; gap: .45rem; min-width: 0; }
[data-layout="dock"] .controls { flex-wrap: nowrap; justify-content: space-between; gap: 4px; padding: 0; border: 0; }
[data-layout="dock"] .ctl { flex: 1 1 0; min-width: 0; max-width: 56px; height: 30px; padding: 0; border-radius: 8px; }
.call[data-layout="dock"][data-sharing="true"] { display: grid; grid-template: "v t" 22px "v b" 30px / 64px minmax(0, 1fr); column-gap: 8px; align-content: center; }
[data-layout="dock"][data-sharing="true"] .dock-info { display: none; }
[data-layout="dock"] .me-video { grid-area: v; align-self: center; width: 64px; height: 36px; border-radius: 4px; }
[data-layout="dock"] .me-row { grid-area: t; flex-wrap: nowrap; font-weight: 700; }
[data-layout="dock"] .bar { grid-area: b; }
[data-layout="dock"] .me-stop { min-height: 0; height: 22px; padding: 0 .6rem; font-size: .75rem; border-radius: 6px; }
[data-layout="dock"] .unlock { position: absolute; inset: 0; z-index: 5; margin: 0; padding: 4px; border-radius: 0; }
[data-layout="dock"] .unlock p { display: none; }
.dock-stack { display: flex; flex: none; }
.mini { width: 22px; height: 22px; font-size: .6rem; border: 2px solid var(--call-bg); }
.mini + .mini { margin-left: -6px; }
.mini.more { display: grid; place-items: center; border-radius: 50%; background: var(--call-btn); font-weight: 700; }
.mini[data-speaking="true"] { position: relative; box-shadow: 0 0 0 2px var(--speaking); }
/* Narrow, the title and its line share one row: two rows of words left no room under the buttons. */
.dock-text { display: flex; align-items: baseline; gap: .4rem; line-height: 1.2; }
.dock-title { flex: none; max-width: 60%; font-size: .82rem; font-weight: 700; }
.dock-sub { flex: 1; min-width: 0; font-size: .72rem; color: var(--call-muted); }
@media (min-width: 480px) {
  .call[data-layout="dock"], .call[data-layout="dock"][data-sharing="true"] { display: flex; flex-direction: row; align-items: center; gap: .75rem; padding: 0 .75rem; }
  [data-layout="dock"] .dock-info, [data-layout="dock"][data-sharing="true"] .dock-info { display: flex; flex: 1; }
  .dock-text { display: block; }
  .dock-title { max-width: none; }
  [data-layout="dock"] .me-share { position: static; display: flex; align-items: center; gap: .5rem; width: auto; padding: 0; border: 0; background: none; box-shadow: none; }
  [data-layout="dock"] .me-row { display: grid; justify-items: start; gap: 2px; font-size: .75rem; }
  [data-layout="dock"] .controls { flex: none; gap: 6px; }
  [data-layout="dock"] .ctl { flex: none; width: 36px; height: 36px; border-radius: 18px; }
  .mini { width: 30px; height: 30px; font-size: .72rem; }
}
@media (pointer: coarse) {
  .opt { min-height: 44px; }
  .call[data-layout="dock"] { gap: 1px; padding: 1px 0 0; }
  .call[data-layout="dock"][data-sharing="true"] { grid-template-rows: 18px 44px; padding: 1px 6px 0; }
  /* A 44 px target drawn 39 px tall, so the buttons do not sit on the frame's edge. */
  [data-layout="dock"] .ctl { position: relative; height: 39px; margin-bottom: 5px; max-width: none; }
  [data-layout="dock"] .ctl::after { content: ""; position: absolute; inset: 0 0 -5px; }
  [data-layout="dock"] .dock-info { padding: 0 6px; }
  /* The share button below is the full-size way to stop; this one is a shortcut. */
  [data-layout="dock"] .me-stop { height: 18px; }
  .mini { width: 18px; height: 18px; font-size: .5rem; border-width: 1px; }
  .dock-sub { display: none; }
}

.embed-msg { display: grid; place-items: center; min-height: 100vh; padding: .5rem .75rem; text-align: center; font-size: .9rem; overflow: auto; }
.embed-msg-h { font-weight: 700; }
.prejoin { max-width: 520px; }
.pre-preview { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--call-tile); }
.pre-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pre-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.toggle { border-radius: 22px; min-height: 44px; }
.toggle[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.toggle-i { display: inline-flex; }