/* The call window on chat.cu29.tools (public/call.js), in the page's own look:
   the same window as the chat and the artifact pane, the pills along its head,
   the people as tiles, the controls at its foot. Loaded with the script, only
   once someone starts or joins a call. The page's tokens (--card-grad, --edge,
   --pill, --sans...) and its .pill are used as they are. */
.call-win {
  flex: 1; min-height: 0; display: flex; flex-direction: column; container-type: inline-size;
  border-radius: 21px; background: var(--card-grad); border: 1px solid var(--edge); box-shadow: var(--lift);
  padding: 18px 20px 20px; animation: window-in 0.52s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.call-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; min-height: 28px; }
.call-head .kind { flex: 0 0 44px; font: 9.5px/16px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: #3c443a; text-align: center; background: rgba(255, 255, 255, 0.6); border-radius: 8px; padding: 1px 0; }
.call-head .kind.live { background: #101210; color: #fff; }
.call-title { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; padding-left: 2px; }
.call-title .name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #2f3630; font-variant-numeric: tabular-nums; }
.call-title .meta { flex: 0 100 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 12px/16px var(--sans); letter-spacing: 0.01em; color: var(--hint); }
.call-head > :not(.call-title) { flex-shrink: 0; }
.call-head .pill.leave { background: #101210; color: #fff; }
.call-head .pill.leave:hover { background: #2a2e2a; }
.call-head .pill.copied { background: #fff; color: var(--prompt); }
/* Chat: back to the chat under the call, on a screen too narrow for both; the Call pill brings it back. */
.call-head .pill.tuck { display: none; }
@media (max-width: 1239px) { .call-head .pill.tuck { display: inline-flex; } }
.call-head .pill.tuck[hidden] { display: none; }   /* the guests' page has no chat to go back to */
@container (max-width: 560px) { .call-title .meta { display: none; } }

.call-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* ------------------------------------------------ before joining: a look at yourself, a name, and the way in */
.preflight { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 8px 0 12px; }
.preflight .look, .lobby .look { position: relative; width: min(100%, 520px); aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #1a1d1b; }
.preflight .look video, .lobby .look video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.preflight .look.off video, .lobby .look.off video { display: none; }
.preflight .look .who, .lobby .look .who { position: absolute; inset: 0; display: grid; place-items: center; font: 600 44px/1 var(--sans); color: rgba(255, 255, 255, 0.85); }
.preflight .look:not(.off) .who { display: none; }
.preflight .look .say { position: absolute; left: 12px; bottom: 10px; font: 11px/16px var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.8); }
.preflight .devices { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.preflight .devices .told { flex-basis: 100%; font: 12px/17px var(--sans); color: var(--hint); text-align: center; }
/* A guest who has an account after all: the way to the chat's own door. */
.preflight .chat-door { font: 12px/17px var(--sans); color: var(--hint); text-decoration: underline; text-underline-offset: 2px; }
.preflight .chat-door:hover { color: var(--ink); }
/* A guest at the door: their look, and a word while they wait. */
.lobby { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 8px 0 12px; text-align: center; font: 13px/19px var(--sans); color: var(--hint); }
.lobby b { font: 500 13px/19px var(--sans); color: #2f3630; margin-top: 8px; }
/* Guests at the door, for the hosts: a line each above the tiles. */
.knocks:empty { display: none; }
.knocks { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.knock { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px 8px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.66); font: 13px/19px var(--sans); color: var(--ink); }
.knock span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knock .pill { padding: 6px 12px; }
.preflight .name { width: min(100%, 520px); display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.66); border-radius: 14px; padding: 6px 8px 6px 15px; }
.preflight .name input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; color: var(--ink); font: 13px/20px var(--sans); padding: 6px 0; }
.preflight .name input::placeholder { color: rgba(60, 68, 58, 0.5); }
.preflight .name .pill.go { background: #101210; color: #fff; }
.preflight .name .pill.go:hover { background: #2a2e2a; }
.preflight .name .pill.go[disabled] { opacity: 0.5; cursor: default; }
/* Notes on, to You / a team / P.INC: the host's choice before the call; a joiner reads that notes are on. */
.preflight .notes-row { width: min(100%, 520px); display: flex; align-items: center; flex-wrap: wrap; gap: 6px; justify-content: center; }
.preflight .notes-row:empty { display: none; }
.preflight .notes-row .to { font: 12px/16px var(--sans); color: var(--hint); padding: 0 2px; }
.preflight .notes-row .homes { display: flex; flex-wrap: wrap; gap: 4px; }
.preflight .notes-row .pill.home { background: transparent; color: var(--hint); }
.preflight .notes-row .pill.home:hover { background: rgba(255, 255, 255, 0.55); color: var(--ink); }
.preflight .notes-row .pill.home.on { background: #fff; color: var(--ink); }
.preflight .notes-row .told { font: 12px/17px var(--sans); color: var(--hint); text-align: center; }
.preflight .note, .call-note { max-width: 440px; text-align: center; font: 12px/17px var(--sans); color: var(--hint); }
.preflight .note.bad, .call-note.bad { color: var(--down); }
.preflight .note:empty { display: none; }
/* Something ended or didn't start: one line, in the middle. */
.call-over { margin: auto; max-width: 400px; text-align: center; font: 13px/19px var(--sans); color: var(--hint); display: flex; flex-direction: column; align-items: center; gap: 6px; padding-bottom: 24px; }
.call-over b { font: 500 13px/19px var(--sans); color: #2f3630; }
.call-over .pill { margin-top: 10px; }

/* ------------------------------------------------ the call: tiles, then the controls */
.seats { flex: 1; min-height: 0; display: grid; gap: 8px; align-content: center; align-items: start; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); }
/* Beyond a grid, or with a screen shared: one large tile, a strip of the others beneath. */
.seats.stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; align-content: stretch; }
.seats.stage .strip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.seats.stage .strip::-webkit-scrollbar { display: none; }
.seats.stage .strip .seat { flex: 0 0 auto; width: clamp(120px, 18%, 200px); }
.seats.stage .strip:empty { display: none; }
.seat { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #1a1d1b; min-height: 0; }
.seats.stage > .seat.main { aspect-ratio: auto; height: 100%; width: 100%; }
.seat video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #1a1d1b; }
.seat.mine video { transform: scaleX(-1); }
.seat.screen video, .seat.mine.screen video { object-fit: contain; transform: none; }
.seat.off video { display: none; }
.seat .who { position: absolute; inset: 0; display: grid; place-items: center; font: 600 clamp(18px, 8cqw, 40px) / 1 var(--sans); color: rgba(255, 255, 255, 0.85); }
.seat:not(.off) .who { display: none; }
.seat .say { position: absolute; left: 10px; bottom: 8px; right: 10px; display: flex; align-items: center; gap: 6px; font: 11px/16px var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.86); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); }
.seat .say span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat .say i { flex: 0 0 auto; width: 14px; height: 14px; display: none; }
.seat .say i svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.seat.muted .say i.mic { display: block; color: #ff8a73; }
.seat .say b { font-weight: 400; opacity: 0.6; }
.seat.talking { box-shadow: inset 0 0 0 2px rgba(110, 196, 55, 0.9); }
.seats.stage .strip .seat .say { left: 7px; bottom: 5px; right: 7px; font-size: 10px; }
.seats.stage .strip .seat .say b, .seat.screen .say i.mic { display: none; }
.seats.stage .strip .seat .who { font-size: 18px; }
/* A host's hand on someone else's tile: Remove and Co-host, on hover. */
.seat .hand { position: absolute; top: 8px; right: 8px; display: none; gap: 4px; }
.seat .hand .pill { padding: 5px 9px; background: rgba(16, 18, 16, 0.6); color: #fff; }
.seat .hand .pill:hover { background: #101210; }
.seat .hand .pill.yes { background: #b3261e; }
.seat:hover .hand, .seat:focus-within .hand { display: flex; }
.seats .more { display: grid; place-items: center; font: 12px/16px var(--sans); color: var(--hint); }

/* The shared pad, between the tiles and the controls, when someone opens it with the Notes pill. */
.call-pad { display: none; flex: 0 0 auto; margin-top: 10px; }
.call-pad.open { display: flex; }
.call-pad textarea { flex: 1; min-width: 0; width: 100%; height: clamp(72px, 18vh, 140px); resize: vertical; border: 0; outline: none; background: rgba(255, 255, 255, 0.66); border-radius: 14px; padding: 10px 15px; color: var(--ink); font: 13px/19px var(--sans); }
.call-pad textarea::placeholder { color: rgba(60, 68, 58, 0.5); }
.call-pad textarea:focus { background: #fff; }

.call-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.call-foot .pill.on, .call-foot .pill.on:hover { background: #101210; color: #fff; }   /* the page's on-state; the foot's light pills and their hover otherwise make it white on white */
.call-foot .pill.jot.has::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; margin-left: 6px; }
.call-foot .pill { background: rgba(255, 255, 255, 0.66); padding: 8px 13px; }
.call-foot .pill:hover { background: #fff; }
.call-foot .pill.off { background: #101210; color: #fff; }
.call-foot .pill svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.call-foot .host { display: flex; gap: 6px; margin-left: auto; }
.call-foot .host .pill.end { background: #b3261e; color: #fff; }
.call-foot .host .pill.end:hover { background: #8f1d17; }
.call-foot .host .pill.asking { background: #fff; color: var(--down); }
.call-foot .count { font: 12px/16px var(--sans); color: var(--hint); padding: 0 6px; }
.call-note { margin: 8px 0 0; }
.call-note:empty { display: none; }

@media (max-width: 600px) {
  .call-win { padding: 12px; border-radius: 18px; }
  .call-head .pill { padding: 8px 10px; letter-spacing: 0.03em; }
  .call-foot .pill { padding: 8px 10px; }
  .call-foot .pill .label { display: none; }
  .seats.stage .strip .seat { width: 96px; }
}
@media (prefers-reduced-motion: reduce) { .call-win { animation: none; } }