/* ВидеоМост — calm utility UI with a distinct bridge-line signature. */
:root {
  --paper: #f3f5f7;
  --paper-deep: #e9edf1;
  --surface: #ffffff;
  --surface-soft: #f7f9fb;
  --ink: #15191f;
  --ink-soft: #343b45;
  --muted: #69727f;
  --line: #dfe4e9;
  --line-strong: #cfd6dd;
  --blue: #2864dc;
  --blue-hover: #1e55c3;
  --blue-soft: #eaf1ff;
  --cyan: #70d4ec;
  --success: #16865d;
  --danger: #d94a4a;
  --danger-hover: #bf3939;
  --warning: #9a6711;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 30px;
  --pill: 999px;
  --shadow-card: 0 18px 50px rgba(28, 40, 54, .09), 0 2px 8px rgba(28, 40, 54, .05);
  --shadow-float: 0 20px 54px rgba(0, 0, 0, .24);
  --font: "Segoe UI Variable", "Inter", "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
html, body { margin: 0; min-height: 100%; }
html { background: var(--paper); }
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  background:
    radial-gradient(circle at 16% 8%, rgba(112, 212, 236, .13), transparent 27rem),
    var(--paper);
  font: 15px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
.hidden { display: none !important; }
::selection { background: #cbdcff; }
:focus-visible { outline: 3px solid rgba(40, 100, 220, .42); outline-offset: 3px; }

/* Header */
.topbar {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 clamp(18px, 4vw, 56px);
  background: rgba(243, 245, 247, .86);
  backdrop-filter: blur(18px);
  position: sticky;
  top: 0;
  z-index: 40;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 760;
  letter-spacing: -.03em;
}
.brand small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  padding-left: 10px;
  border-left: 1px solid var(--line-strong);
}
.brand-ico { width: 31px; height: 24px; overflow: visible; }
.brand-ico path { fill: none; stroke: var(--blue); stroke-width: 2.3; stroke-linecap: round; }
.brand-ico circle { fill: var(--blue); }
nav { display: flex; align-items: center; gap: 4px; }
.navlink {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 13px;
  font-weight: 650;
  padding: 0 14px;
  border-radius: var(--pill);
  transition: background .16s ease, color .16s ease;
}
.navlink:hover { color: var(--blue); background: var(--surface); }

/* Home action hub */
.home-mode .topbar { min-height: 60px; }
.home-hub {
  flex: 1;
  min-height: calc(100dvh - 60px);
  display: grid;
  place-items: center;
  padding: 32px 20px 80px;
}
.home-shell {
  width: min(570px, 100%);
  text-align: center;
  animation: appear .32s ease-out both;
}
.home-heading { margin: 0 auto 28px; }
.home-mark { width: 42px; height: 32px; overflow: visible; }
.home-mark path { fill: none; stroke: var(--blue); stroke-width: 2.3; stroke-linecap: round; }
.home-mark circle { fill: var(--blue); }
.home-heading p {
  margin: 8px 0 7px;
  color: var(--blue);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.home-heading h1 {
  margin: 0;
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1.15;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.home-heading > span {
  display: block;
  max-width: 500px;
  margin: 9px auto 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  text-wrap: balance;
}
.home-actions {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 12px;
}
.home-actions::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border: 3px solid var(--paper);
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 1px rgba(40, 100, 220, .14);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.home-action {
  position: relative;
  min-width: 0;
  min-height: 154px;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 23px 20px 19px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 10px 28px rgba(28, 40, 54, .07), 0 2px 5px rgba(28, 40, 54, .04);
  text-align: center;
  text-decoration: none;
  touch-action: manipulation;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.home-action:not(:disabled):hover {
  z-index: 1;
  border-color: #bcc9d8;
  background: #fff;
  box-shadow: 0 16px 34px rgba(28, 40, 54, .11), 0 3px 7px rgba(28, 40, 54, .05);
  transform: translateY(-2px);
}
.home-action:not(:disabled):active { transform: translateY(0); box-shadow: 0 6px 18px rgba(28, 40, 54, .08); }
.home-action-primary {
  border-color: #bdd0f5;
  background: linear-gradient(145deg, #fff 35%, #f3f7ff 100%);
}
.home-action-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  border-radius: 16px;
  color: var(--ink-soft);
  background: var(--surface-soft);
  box-shadow: inset 0 0 0 1px rgba(105, 114, 127, .08);
}
.home-action-primary .home-action-icon { color: var(--blue); background: var(--blue-soft); }
.home-action-icon svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.home-action strong { font-size: 15px; line-height: 1.25; letter-spacing: -.015em; }
.home-action > span:not(.home-action-icon):not(.home-action-badge) {
  max-width: 210px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.home-action-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 3px 8px;
  border-radius: var(--pill);
  color: #68717d;
  background: #edf0f3;
  font-size: 10px;
  font-weight: 720;
}
.home-action-disabled { opacity: .64 !important; background: #edf0f3; }
.home-join {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 12px 30px rgba(28, 40, 54, .08);
  text-align: left;
  animation: homeJoinIn .18s ease-out both;
}
@keyframes homeJoinIn { from { opacity: 0; transform: translateY(-5px); } }
.home-join label { display: block; margin: 0 0 7px; color: var(--ink-soft); font-size: 12px; font-weight: 720; }
.home-join-row { display: flex; gap: 8px; }
.home-join input {
  min-width: 0;
  min-height: 46px;
  flex: 1;
  border: 1px solid var(--line-strong);
  border-radius: 13px;
  padding: 10px 13px;
  color: var(--ink);
  background: var(--surface);
  outline: none;
}
.home-join input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(40, 100, 220, .11); }
.home-join-error { min-height: 18px; margin: 7px 1px 0; color: var(--danger); font-size: 12px; }

/* Buttons and fields */
.btn {
  min-height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 10px 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 680;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.btn svg { width: 18px; height: 18px; fill: currentColor; }
.btn:hover { background: var(--surface-soft); border-color: #bfc8d1; }
.btn:active { box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1); }
.btn-primary {
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
  box-shadow: 0 9px 22px rgba(40, 100, 220, .22);
}
.btn-primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); }
.btn-lg { min-height: 52px; border-radius: 16px; font-size: 15px; }
.btn:disabled { opacity: .46; cursor: not-allowed; box-shadow: none; }

.field { margin: 0 0 15px; text-align: left; }
.field label, .invite label {
  display: block;
  margin-bottom: 7px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 720;
}
.field .hint { display: block; margin-top: 3px; color: var(--muted); font-size: 11.5px; font-weight: 450; }
.field input[type="text"], .field select {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: 13px;
  padding: 10px 14px;
  appearance: none;
  background-color: var(--surface);
  color: var(--ink);
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.field select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2369727f' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
}
.field input:focus, .field select:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(40, 100, 220, .11); }
input::placeholder { color: #8a929c; }
.grid2, .devices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dev-note { margin: 0 0 12px; padding: 10px 12px; color: var(--warning); background: #fff7e5; border-radius: 12px; font-size: 12px; }
#btnAllow { margin: 0 0 14px; }

/* Lobby */
.lobby { flex: 1; display: grid; place-items: center; padding: 34px 20px 64px; }
.lobby-card {
  position: relative;
  width: min(1040px, 100%);
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr);
  grid-template-rows: auto auto auto auto auto auto;
  column-gap: 28px;
  padding: 0;
  animation: appear .34s ease-out both;
}
@keyframes appear { from { opacity: 0; transform: translateY(8px); } }
.lobby-head {
  grid-column: 1 / -1;
  text-align: center;
  margin: 0 auto 28px;
  max-width: 660px;
}
.lobby-back {
  position: absolute;
  z-index: 2;
  top: 2px;
  left: 0;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: var(--pill);
  padding: 0 13px 0 9px;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, .82);
  font-size: 13px;
  font-weight: 650;
}
.lobby-back:hover { color: var(--blue); background: #fff; }
.lobby-back svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lobby-icon {
  width: 62px;
  height: 48px;
  display: grid;
  place-items: center;
  margin: 0 auto 13px;
}
.lobby-icon svg { width: 54px; height: 40px; overflow: visible; }
.lobby-icon path { fill: none; stroke: var(--blue); stroke-width: 2.4; stroke-linecap: round; }
.lobby-icon circle { fill: var(--blue); }
.lobby-kicker { color: var(--blue); font-size: 11px; font-weight: 760; letter-spacing: .12em; text-transform: uppercase; }
.lobby-head h1 { margin: 7px 0 8px; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.08; letter-spacing: -.055em; }
.sub { max-width: 560px; margin: 0 auto; color: var(--muted); font-size: 14px; }
.lobby-card > .field,
.lobby-card > .grid2,
.lobby-card > .devices,
.lobby-card > .switch-field,
.lobby-card > .dev-note,
.lobby-card > #btnAllow {
  grid-column: 1;
  background: var(--surface);
}
.lobby-card > .field { padding: 22px 22px 0; margin: 0; border: 1px solid var(--line); border-bottom: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.lobby-card > .grid2 { padding: 14px 22px 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.lobby-card > .devices { padding: 0 22px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.lobby-card > .switch-field { padding: 0 22px 22px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.lobby-card > .dev-note, .lobby-card > #btnAllow { margin-top: 10px; }
.switch-field { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.switch-field > div:first-child { min-width: 0; }
.switch-field > div > label { display: block; color: var(--ink-soft); font-size: 12px; font-weight: 720; }
.switch-field .hint { color: var(--muted); font-size: 11.5px; }
.switch { position: relative; width: 44px; height: 26px; flex: none; }
.switch input { position: absolute; opacity: 0; }
.slider { position: absolute; inset: 0; border-radius: var(--pill); background: #cbd1d8; transition: background .18s ease; }
.slider::before { content: ""; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2); transition: transform .18s ease; }
.switch input:checked + .slider { background: var(--blue); }
.switch input:checked + .slider::before { transform: translateX(18px); }
.switch input:focus-visible + .slider { outline: 3px solid rgba(40,100,220,.35); outline-offset: 3px; }

.preview-row {
  grid-column: 2;
  grid-row: 2 / span 6;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  position: relative;
}
.preview-row::before {
  content: "Предпросмотр";
  position: absolute;
  top: 27px;
  left: 28px;
  z-index: 3;
  padding: 5px 9px;
  border-radius: var(--pill);
  color: #dce7f7;
  background: rgba(11, 19, 31, .68);
  backdrop-filter: blur(8px);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.preview-tile {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 42%, #25344a 0, #162131 46%, #101722 100%);
}
.preview-tile::after { content: ""; position: absolute; inset: auto 8% 0; height: 2px; background: linear-gradient(90deg, transparent, var(--cyan), var(--blue), transparent); opacity: .7; }
.preview-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.preview-tile video,
.tile video.local,
.tile video.remote { transform: scaleX(-1); }
.preview-ph { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; color: #aab6c6; font-size: 12px; }
.preview-ph svg { width: 54px; height: 54px; fill: #637188; }
.preview-controls { position: absolute; z-index: 2; left: 0; right: 0; bottom: 13px; display: flex; justify-content: center; gap: 8px; }
.ctrl {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #f3f6fa;
  background: rgba(35, 44, 58, .9);
  box-shadow: 0 5px 18px rgba(0,0,0,.22);
  transition: background .15s ease, border-color .15s ease;
}
.ctrl:hover { background: #3c4657; border-color: rgba(255,255,255,.24); }
.ctrl svg { width: 21px; height: 21px; fill: currentColor; }
.ctrl svg .icon-slash { fill: none; stroke: currentColor; stroke-width: 2.35; stroke-linecap: round; }
.ctrl .ic-off { display: none; }
.ctrl.off { color: #fff; background: var(--danger); border-color: var(--danger); }
.ctrl.off .ic-off { display: block; }
.ctrl.off .ic-mic, .ctrl.off > svg:not(.ic-off) { display: none; }
.lobby-actions { display: flex; flex-direction: column; gap: 9px; }
.invite { padding: 11px 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-soft); }
.invite-row { display: flex; gap: 7px; }
.invite-row input { min-width: 0; flex: 1; border: 0; background: transparent; color: var(--muted); font-size: 11px; }
.err { min-height: 18px; margin: 0; color: var(--danger); font-size: 12px; font-weight: 650; }
.footnote { margin: 0; color: var(--muted); font-size: 11.5px; }

/* Call */
html:has(#view-call:not(.hidden)),
body:has(#view-call:not(.hidden)),
body.call-mode { height: 100%; overflow: hidden; background: #0f1115; color: #f5f6f8; }
body:has(#view-call:not(.hidden)) .topbar,
body.call-mode .topbar { display: none; }
#view-call:not(.hidden) {
  position: fixed;
  inset: 0;
  z-index: 50;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-width: 0;
  min-height: 0;
  max-height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #0f1115;
  color: #f5f6f8;
}
#view-call.chat-open {
  --active-dock-width: var(--chat-dock-width, clamp(348px, 27vw, 392px));
  padding-right: var(--active-dock-width);
}
#view-call.ai-open {
  --active-dock-width: var(--ai-dock-width, clamp(380px, 29vw, 430px));
  padding-right: var(--active-dock-width);
}
.call-top { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 16px; }
.call-info, .call-actions { display: flex; align-items: center; gap: 8px; min-width: 0; }
.call-brand { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 730; }
.call-brand i { width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(112,212,236,.12); }
.room-tag, .timer, .rec-badge, .pill { min-height: 38px; display: inline-flex; align-items: center; border-radius: var(--pill); }
.room-tag { max-width: 170px; overflow: hidden; text-overflow: ellipsis; padding: 0 12px; color: #9ba5b2; background: #191c22; font: 600 11px/1 ui-monospace, monospace; }
.timer { padding: 0 10px; color: #bdc4cd; font-size: 12px; font-variant-numeric: tabular-nums; }
.rec-badge { gap: 6px; padding: 0 11px; color: #ff8686; background: #2d1d20; font-size: 11px; font-weight: 720; }
.rec-badge i { width: 7px; height: 7px; border-radius: 50%; background: #ff6b6b; box-shadow: 0 0 0 3px rgba(255,107,107,.14); }
.pill { position: relative; gap: 7px; padding: 0 13px; border: 1px solid #2b2f36; color: #d7dbe1; background: #1c1f25; font-size: 12px; font-weight: 650; }
.pill:hover { background: #282c34; border-color: #3c424c; }
.pill svg { width: 17px; height: 17px; fill: currentColor; }

.stage-wrap {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  padding: 0 12px;
}
.screen { grid-column: 1 / -1; position: relative; overflow: hidden; border-radius: 14px; background: #07080a; }
.screen video { width: 100%; max-height: 43vh; display: block; object-fit: contain; }
.screen-info { position: absolute; top: 12px; left: 12px; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 24px); padding: 6px 10px; color: #fff; background: rgba(12,14,18,.75); border-radius: var(--pill); font-size: 12px; }
.screen-info span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini { min-height: 34px; border: 0; border-radius: var(--pill); padding: 0 12px; color: #fff; background: rgba(255,255,255,.13); font-weight: 650; }
.grid {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: minmax(0, 1fr);
  gap: 8px;
  overflow: hidden;
}
.grid, .invite-stage { grid-row: 2; }
.grid:empty::before {
  content: "Подключаемся к встрече…";
  min-height: 100%;
  display: grid;
  place-items: center;
  border: 1px solid #2b2e35;
  border-radius: 14px;
  color: #89919c;
  background: radial-gradient(circle at 50% 42%, #30333a, #24272d 72%);
  font-size: 12px;
}
.stage-wrap:has(.invite-stage.hidden):has(.grid .tile:nth-child(2)) .grid { grid-column: 1 / -1; }
.stage-wrap:has(.grid:empty) .invite-stage,
.stage-wrap:has(.grid .tile:only-child) .invite-stage { display: flex !important; }
.stage-wrap:has(.grid:empty) .grid,
.stage-wrap:has(.grid .tile:only-child) .grid,
.stage-wrap:has(.grid:empty) .invite-stage,
.stage-wrap:has(.grid .tile:only-child) .invite-stage {
  align-self: center;
  max-height: 100%;
  aspect-ratio: 16 / 9;
}
.grid:has(.tile:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid:has(.tile:nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid:has(.tile:nth-child(10)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid:has(.tile:nth-child(17)) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tile { position: relative; width: 100%; height: 100%; min-width: 0; min-height: 0; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid #2b2e35; border-radius: 14px; background: radial-gradient(circle at 50% 42%, #30333a, #24272d 72%); transition: border-color .18s ease, box-shadow .18s ease; }
.tile video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tile video.local,
.tile video.remote { z-index: 1; object-fit: contain; background: transparent; }
.tile video.tile-backdrop {
  inset: -12%;
  z-index: 0;
  width: 124%;
  height: 124%;
  object-fit: cover;
  pointer-events: none;
  transform: scaleX(-1) scale(1.08);
  filter: blur(18px) brightness(.62) saturate(.88);
}
.grid:has(.tile:nth-child(10)) .tile video.tile-backdrop { filter: blur(10px) brightness(.58) saturate(.84); }
.tile .ph { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; }
.tile .avatar { width: clamp(68px, 10vw, 112px); height: clamp(68px, 10vw, 112px); display: grid; place-items: center; border-radius: 50%; color: #fff; font-size: clamp(25px, 4vw, 42px); font-weight: 730; box-shadow: 0 12px 32px rgba(0,0,0,.22); }
.tile-label { position: absolute; z-index: 3; left: 10px; bottom: 10px; max-width: calc(100% - 20px); display: flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: var(--pill); background: rgba(10,11,14,.72); color: #fff; font-size: 11px; font-weight: 650; backdrop-filter: blur(7px); }
.tile-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-label .mic-ico { width: 12px; height: 12px; fill: #a9b0ba; }
.tile-label .mic-ico.off { fill: #ff7979; }
.tile.self { border-color: #48515f; }
.tile.speaking { border-color: rgba(104,211,233,.82); box-shadow: inset 0 0 0 1px rgba(104,211,233,.72), 0 0 22px rgba(104,211,233,.18); }
.tile.hand-raised { border-color: rgba(255,188,72,.96); box-shadow: inset 0 0 0 1px rgba(255,188,72,.72), 0 0 28px rgba(255,173,51,.2); }
.tile.hand-raised.speaking { box-shadow: inset 0 0 0 1px rgba(255,188,72,.84), 0 0 0 2px rgba(104,211,233,.5), 0 0 30px rgba(255,173,51,.2); }
.hand-badge { position: absolute; top: 10px; right: 10px; z-index: 5; min-height: 34px; display: flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid rgba(255,226,163,.34); border-radius: 12px; color: #241804; background: rgba(255,190,72,.95); box-shadow: 0 8px 24px rgba(0,0,0,.3); font-size: 11px; font-weight: 760; backdrop-filter: blur(12px); }
.hand-badge svg { width: 18px; height: 18px; flex: none; fill: currentColor; }
.grid:has(.tile:nth-child(10)) .hand-badge { width: 30px; min-height: 30px; justify-content: center; padding: 5px; border-radius: 10px; }
.grid:has(.tile:nth-child(10)) .hand-badge span { display: none; }

/* Режим доклада: экран занимает сцену, остальные участники находятся
   в боковой ленте, камера докладчика остаётся отдельным оверлеем. */
.stage-wrap.screen-mode {
  position: relative;
  grid-template-columns: minmax(0, 1fr) clamp(220px, 21vw, 340px);
  grid-template-rows: minmax(0, 1fr);
  gap: 10px;
}
.stage-wrap.screen-mode .screen {
  grid-column: 1;
  grid-row: 1;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 1px solid #292d34;
}
.stage-wrap.screen-mode .screen video {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  background: #07080a;
}
.stage-wrap.screen-mode .grid {
  /* The normal two-participant rule spans the grid across all columns.
     Screen mode must always win, otherwise participant tiles cover the
     received screen-share video even though the track is playing. */
  grid-column: 2 !important;
  grid-row: 1;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: minmax(112px, 1fr);
  align-content: start;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #464c56 transparent;
}
.stage-wrap.screen-mode.screen-many .grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(96px, 150px);
}
.stage-wrap.screen-mode .invite-stage { display: none !important; }
.stage-wrap.screen-mode .tile {
  min-height: 112px;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
}
.stage-wrap.screen-mode .tile .avatar {
  width: clamp(42px, 5vw, 68px);
  height: clamp(42px, 5vw, 68px);
  font-size: clamp(17px, 2vw, 25px);
}
.stage-wrap.screen-mode .tile.presenter {
  position: fixed;
  left: 24px;
  bottom: 88px;
  z-index: 56;
  width: clamp(200px, 19vw, 320px);
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
  border: 2px solid rgba(255,255,255,.24);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0,0,0,.5);
}
.stage-wrap.screen-mode.screen-solo { grid-template-columns: minmax(0, 1fr); }
.stage-wrap.screen-mode.screen-solo .grid {
  position: static;
  width: 0;
  height: 0;
  overflow: visible;
}
.invite-stage { width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(16px, 3vw, 36px); text-align: center; border: 1px solid #2b2e35; border-radius: 14px; background: #24272d; }
.invite-stage-mark { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 18px; color: var(--cyan); border-radius: 18px; background: #1b2e35; }
.invite-stage-mark svg { width: 26px; height: 26px; fill: currentColor; }
.invite-stage strong { margin-bottom: 7px; font-size: 15px; }
.invite-stage > span { max-width: 320px; color: #a5acb6; font-size: 12px; }
.stage-copy { min-height: 40px; margin-top: 18px; padding: 0 16px; border: 0; border-radius: var(--pill); color: #071a20; background: var(--cyan); font-size: 12px; font-weight: 750; }
.stage-copy:hover { background: #8be0f2; }

@media (min-width: 881px) {
  .stage-wrap:has(.grid .tile:only-child) .invite-stage {
    height: auto;
    align-self: center;
    aspect-ratio: 16 / 9;
  }
}

.ai-tip-peek {
  position: absolute;
  left: calc((100% - var(--active-dock-width, 0px)) / 2);
  bottom: 82px;
  z-index: 58;
  width: min(590px, calc(100% - var(--active-dock-width, 0px) - 28px));
  min-height: 64px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid rgba(112,212,236,.52);
  border-radius: 18px;
  color: #f7fbfc;
  background: rgba(24,31,38,.96);
  box-shadow: 0 16px 46px rgba(0,0,0,.42), 0 0 0 1px rgba(112,212,236,.07) inset;
  transform: translateX(-50%);
  backdrop-filter: blur(14px);
  animation: ai-peek-in .2s ease-out;
}
.ai-tip-peek-mark { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; color: #9cecff; background: linear-gradient(145deg,#203b46,#182d37); }
.ai-tip-peek-mark svg { width: 20px; height: 20px; fill: currentColor; }
.ai-tip-peek-main { min-width: 0; display: grid; gap: 2px; padding: 4px 2px; border: 0; color: inherit; background: transparent; text-align: left; }
.ai-tip-peek-main:hover strong { color: #b9f2ff; }
.ai-tip-peek-main:focus-visible, .ai-tip-peek-dismiss:focus-visible { outline: 2px solid #8ce7f7; outline-offset: 2px; }
.ai-tip-peek-label { overflow: hidden; color: #76d9ec; font-size: 10px; font-weight: 760; letter-spacing: .045em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.ai-tip-peek-main strong { display: -webkit-box; overflow: hidden; font-size: 13px; font-weight: 620; line-height: 1.35; text-overflow: ellipsis; transition: color .15s ease; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.ai-tip-peek-dismiss { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px; color: #8d98a5; background: transparent; font-size: 20px; }
.ai-tip-peek-dismiss:hover { color: #fff; background: #303741; }
@keyframes ai-peek-in { from { opacity: 0; transform: translate(-50%, 8px); } }

.controls { position: relative; z-index: 55; flex: none; display: flex; justify-content: center; padding: 10px 12px 5px; }
.controls-inner { display: flex; align-items: center; gap: 0; padding: 5px; border: 1px solid rgba(255,255,255,.11); border-radius: 20px; background: linear-gradient(180deg,rgba(33,37,44,.97),rgba(24,27,33,.97)); box-shadow: 0 14px 40px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.045); backdrop-filter: blur(14px); }
.control-cluster { display: flex; align-items: center; gap: 3px; }
.control-cluster + .control-cluster { margin-left: 6px; padding-left: 7px; border-left: 1px solid rgba(255,255,255,.1); }
.ctrl.big { width: auto; min-width: 46px; height: 46px; gap: 8px; padding: 0 12px; border: 0; border-radius: 14px; color: #e7ebf0; background: transparent; box-shadow: none; transition: color .15s ease, background .15s ease, transform .12s ease; }
.ctrl.big:hover { color: #fff; background: #303640; border-color: transparent; }
.ctrl.big:active { transform: scale(.97); }
.ctrl.big:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.ctrl.big .lbl { font-size: 11.5px; font-weight: 660; }
.device-control { position: relative; display: flex; min-width: 0; }
.device-control .ctrl.big { padding-right: 32px; }
.device-arrow { position: absolute; top: 6px; right: 3px; z-index: 2; width: 24px; height: 34px; display: grid; place-items: center; padding: 0; border: 0; border-left: 1px solid rgba(255,255,255,.1); border-radius: 0 9px 9px 0; color: #9da7b3; background: transparent; cursor: pointer; }
.device-arrow:hover, .device-arrow[aria-expanded="true"] { color: #fff; background: rgba(255,255,255,.1); }
.device-arrow:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.device-arrow svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .16s ease; }
.device-arrow[aria-expanded="true"] svg { transform: rotate(180deg); }
.device-quick-menu { position: fixed; z-index: 80; width: min(330px, calc(100vw - 16px)); max-height: min(420px, calc(100dvh - 110px)); overflow: hidden; padding: 9px; border: 1px solid #3b424d; border-radius: 16px; color: #f5f7fa; background: rgba(30,34,41,.98); box-shadow: 0 22px 60px rgba(0,0,0,.48); backdrop-filter: blur(18px); animation: appear .16s ease-out; }
.device-quick-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 8px 10px; }
.device-quick-head span { font-size: 13px; font-weight: 750; }
.device-quick-head small { color: #8f99a7; font-size: 10px; }
.device-quick-list { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; scrollbar-width: thin; }
.device-option { width: 100%; min-height: 44px; display: grid; grid-template-columns: 25px minmax(0,1fr); align-items: center; gap: 8px; padding: 7px 10px; border: 0; border-radius: 11px; color: #dce2ea; background: transparent; text-align: left; cursor: pointer; }
.device-option:hover { color: #fff; background: #2b313a; }
.device-option:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.device-option .device-check { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 7px; color: transparent; background: #242a32; font-size: 13px; font-weight: 800; }
.device-option[aria-checked="true"] .device-check { color: #071a20; background: var(--cyan); }
.device-option .device-name { overflow: hidden; font-size: 12px; font-weight: 600; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.device-option:disabled { opacity: .45; cursor: wait; }
.ctrl.big.off { color: #fff; background: #b4474c; border-color: transparent; }
.ctrl.big.off:hover { background: #c45156; }
.ctrl.big.rec { color: #ffb1b1; }
.ctrl.big.rec .rec-dot { width: 13px; height: 13px; border: 2px solid #ff787d; border-radius: 50%; }
.ctrl.big.rec.on { color: #ffd8d8; background: #542b2f; }
.ctrl.big.rec.on .rec-dot { background: #ff7479; border-color: #ff7479; box-shadow: 0 0 0 4px rgba(255,116,121,.12); }
.ctrl.big.pip.on { color: #dffaff; border-color: #4daec2; background: #23444d; box-shadow: inset 0 0 0 1px rgba(104,211,233,.18); }
.ctrl.big.hand.on { color: #271a03; background: #ffbd4a; box-shadow: inset 0 0 0 1px rgba(255,240,204,.42), 0 5px 18px rgba(255,173,51,.2); }
.ctrl.big.hand.on:hover { color: #1f1502; background: #ffc861; }
.ctrl.big:disabled { opacity: .42; cursor: not-allowed; }
.ctrl.big.danger { color: #fff; background: var(--danger); border-color: var(--danger); box-shadow: 0 7px 18px rgba(217,74,74,.18); }
.ctrl.big.danger:hover { background: var(--danger-hover); }
.call-note { margin: 0 0 8px; color: #69717d; text-align: center; font-size: 10px; letter-spacing: .01em; }

/* Call panels */
.parts-panel { position: fixed; top: 70px; right: 16px; z-index: 60; width: min(340px, calc(100vw - 32px)); padding: 18px; border: 1px solid #353a43; border-radius: 18px; color: #f4f5f7; background: #22262d; box-shadow: var(--shadow-float); animation: appear .2s ease-out; }
.chat-unread, .activity-badge { position: absolute; top: -5px; right: -4px; min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 5px; border: 2px solid #0f1115; border-radius: 999px; color: #fff; background: #e65757; font-size: 9px; line-height: 1; }
.activity-badge { color: #082029; background: #78dff2; font-weight: 800; }
.chat-panel { inset: 0 0 0 auto; display: flex; flex-direction: column; width: var(--chat-dock-width, clamp(348px, 27vw, 392px)); height: 100vh; height: 100dvh; padding: 0; overflow: hidden; border: 0; border-left: 1px solid #343840; border-radius: 14px 0 0 14px; background: #232429; box-shadow: -18px 0 42px rgba(0,0,0,.32); animation: chat-dock-in .18s ease-out; }
.chat-panel .parts-head { flex: none; min-height: 58px; margin: 0; padding: 0 10px 0 18px; border-bottom: 1px solid #34363d; }
.chat-panel #chatClose { border-radius: 9px; }
.chat-messages { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 9px; overflow-y: auto; padding: 14px 14px 18px; scrollbar-width: thin; scrollbar-color: #4b525e transparent; }
.chat-messages.has-items::before { content: ""; margin-top: auto; }
.chat-empty { margin: auto 18px; color: #929ba8; text-align: center; font-size: 12px; line-height: 1.5; }
.chat-message { max-width: 88%; align-self: flex-start; padding: 9px 11px; border: 1px solid #39414c; border-radius: 5px 14px 14px; background: #1b2027; }
.chat-message.mine { align-self: flex-end; border-color: #355d69; border-radius: 14px 5px 14px 14px; background: #18313a; }
.chat-message-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.chat-message-name { min-width: 0; overflow: hidden; color: #75d5e8; font-size: 10.5px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.chat-message-time { flex: none; color: #77818e; font-size: 9px; font-variant-numeric: tabular-nums; }
.chat-message-text { color: #eef1f5; font-size: 13px; line-height: 1.42; overflow-wrap: anywhere; white-space: pre-wrap; }
.chat-file { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 9px; align-items: center; width: 100%; min-width: 0; color: inherit; text-decoration: none; }
.chat-file-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #10252b; background: var(--cyan); }
.chat-file-icon svg { width: 17px; height: 17px; fill: currentColor; }
.chat-file-meta { display: block; min-width: 0; overflow: hidden; }
.chat-file-name { display: block; max-width: 100%; overflow: hidden; color: #f2f5f7; font-size: 12px; font-weight: 680; text-overflow: ellipsis; white-space: nowrap; }
.chat-file-size { display: block; margin-top: 3px; color: #a6afbb; font-size: 10px; white-space: nowrap; }
.chat-upload-state { flex: none; margin: 0; padding: 8px 14px; border-top: 1px solid #343a44; color: #bcecf5; background: #18313a; font-size: 11px; }
.chat-compose { flex: none; display: grid; grid-template-columns: 38px minmax(0,1fr) 38px; align-items: center; gap: 4px; padding: 8px 9px max(8px, env(safe-area-inset-bottom)); border-top: 1px solid #3a3c43; background: #292a30; }
.chat-compose input[type="text"] { width: 100%; min-width: 0; height: 38px; padding: 0 8px; border: 0; border-radius: 0; outline: 0; color: #f5f7fa; background: transparent; font-size: 13px; }
.chat-compose input[type="text"]:focus { border-color: #65cce2; box-shadow: 0 0 0 3px rgba(101,204,226,.12); }
.chat-compose input[type="text"]:focus { box-shadow: none; }
.chat-attach, .chat-send { width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: #aeb5bf; background: transparent; }
.chat-attach:hover { color: #fff; background: #383b43; }
.chat-send { color: #d9eef3; background: #4a505a; }
.chat-send:hover { color: #10252b; background: var(--cyan); }
.chat-attach svg, .chat-send svg { width: 18px; height: 18px; fill: currentColor; }
.chat-attach:disabled, .chat-send:disabled { opacity: .45; cursor: wait; }
.chat-limit { display: none; }
@keyframes chat-dock-in { from { opacity: .7; transform: translateX(18px); } }
@media (prefers-reduced-motion: reduce) { .chat-panel { animation: none; } }
.ai-panel { inset: 0 0 0 auto; display: flex; flex-direction: column; width: var(--ai-dock-width, clamp(380px, 29vw, 430px)); height: 100vh; height: 100dvh; max-height: none; padding: 0; overflow: hidden; border: 0; border-left: 1px solid #323944; border-radius: 16px 0 0 16px; background: #20242a; box-shadow: -18px 0 44px rgba(0,0,0,.34); animation: chat-dock-in .18s ease-out; }
.ai-panel-head { flex: none; min-height: 66px; margin: 0; padding: 0 10px 0 18px; border-bottom: 1px solid #343a44; }
.ai-panel-head > div { display: grid; gap: 1px; }
.ai-panel-head span { color: #72d7eb; font-size: 9px; font-weight: 780; letter-spacing: .09em; text-transform: uppercase; }
.ai-panel-head strong { font-size: 14px; }
.ai-panel-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 14px 24px; scrollbar-width: thin; scrollbar-color: #4b535f transparent; }
.ai-status { display:flex; align-items:center; gap:9px; margin:0 0 12px; padding:10px 12px; border:1px solid #303742; border-radius:12px; background:#191d23; color:#cbd2dc; font-size:12px; }
.ai-status i { width:9px; height:9px; flex:0 0 auto; border-radius:50%; background:#f2b84b; box-shadow:0 0 0 4px rgba(242,184,75,.12); }
.ai-status.ready i { background:#5ed3e8; box-shadow:0 0 0 4px rgba(94,211,232,.12); }
.ai-access { margin-bottom: 17px; border: 1px solid #343b46; border-radius: 14px; background: #1b1f25; }
.ai-access summary { min-height: 48px; display: flex; align-items: center; gap: 8px; padding: 0 13px; color: #e4e8ed; cursor: pointer; list-style: none; }
.ai-access summary::-webkit-details-marker { display: none; }
.ai-access summary::after { content: "⌄"; margin-left: 2px; color: #8994a1; font-size: 16px; transition: transform .15s ease; }
.ai-access[open] summary::after { transform: rotate(180deg); }
.ai-access summary span { flex: 1; font-size: 12px; font-weight: 700; }
.ai-access summary small { color: #8f99a6; font-size: 10px; }
.ai-access-body { padding: 0 11px 12px; border-top: 1px solid #303641; }
.ai-help { margin:0 0 10px; color:#aeb7c5; font-size:12px; line-height:1.45; }
.ai-access .ai-help { padding-top: 11px; }
.ai-recipients { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.ai-recipient { min-height:44px; display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid #353b45; border-radius:11px; cursor:pointer; }
.ai-recipient:hover { background:#292e36; }
.ai-recipient:focus-within { outline:2px solid #67cfe6; outline-offset:2px; }
.ai-recipient input { width:18px; height:18px; accent-color:#67cfe6; }
.ai-recipient span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ai-feed-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 2px 10px; }
.ai-feed-head strong { font-size: 12px; }
.ai-feed-head span { min-width: 25px; height: 22px; display: grid; place-items: center; padding: 0 7px; border-radius: 999px; color: #aeb8c5; background: #2a3038; font-size: 10px; font-variant-numeric: tabular-nums; }
.ai-feed { display:flex; flex-direction:column; gap:9px; margin:0; }
.ai-empty { margin:0; padding:28px 22px; border:1px dashed #36404b; border-radius:14px; color:#939daa; background:#1b1f25; text-align:center; font-size:12px; line-height:1.55; }
.ai-card { padding:12px 13px; border:1px solid #343e49; border-radius:14px; background:#1a1f25; }
.ai-card .ai-who { color:#7bd9eb; font-size:11px; font-weight:650; }
.ai-card .ai-audience { display:inline-flex; max-width:100%; margin:0 0 7px; padding:4px 8px; overflow:hidden; border:1px solid #425665; border-radius:999px; color:#c6dbe3; background:#202c34; font-size:10.5px; font-weight:650; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
.ai-card .ai-phrase { display:-webkit-box; margin-top:5px; overflow:hidden; color:#98a3b0; font-size:11.5px; line-height:1.4; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
.ai-answer-label { margin-top:10px; color:#6bcfe3; font-size:9px; font-weight:760; letter-spacing:.07em; text-transform:uppercase; }
.ai-card .ai-tip { margin-top:4px; color:#f5f7fa; font-size:13.5px; line-height:1.5; }
.ai-card.transcript-only .ai-tip { display:none; }
.ai-card.ai-pinned { position:sticky; top:0; z-index:3; border-color:#68d3e9; background:#17272e; box-shadow:0 12px 30px rgba(0,0,0,.34); }
.ai-pinned-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; color:#80e0f2; font-size:11px; font-weight:750; text-transform:uppercase; letter-spacing:.04em; }
.ai-pinned-head button { min-width:76px; min-height:32px; padding:0 11px; border:1px solid #46636c; border-radius:10px; color:#eafcff; background:#233b44; font-size:11px; font-weight:700; }
.ai-pinned-head button:hover { background:#2d4b56; }
.ai-pinned-head button:focus-visible { outline:2px solid #8ce7f7; outline-offset:2px; }
#aiSave { width:100%; min-height:42px; margin-top:8px; }
.parts-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; font-size: 14px; font-weight: 750; }
#partsClose, #devClose, #chatClose, #aiClose { width: 44px; height: 44px; border: 0; border-radius: 12px; color: #a8afb8; background: transparent; font-size: 22px; }
#partsClose:hover, #devClose:hover, #chatClose:hover, #aiClose:hover { color: #fff; background: #323740; }
#partsList { max-height: 45vh; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.part-row { min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 12px; background: #2a2f37; font-size: 13px; }
.part-row .dot { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(135deg,#2864dc,#35a8c7); font-weight: 750; }
.part-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.part-row .st svg { width: 15px; height: 15px; fill: #a8afb8; }
.part-row .st svg.off { fill: #ff7777; }
.part-row .part-hand { width: 27px; height: 27px; flex: none; display: grid; place-items: center; border-radius: 9px; color: #2b1b00; background: #ffbd4a; }
.part-row .part-hand svg { width: 15px; height: 15px; fill: currentColor; }
.parts-foot { display: flex; gap: 7px; margin-top: 12px; }
.parts-foot input { flex: 1; min-width: 0; border: 1px solid #414752; border-radius: 10px; padding: 9px; color: #dce0e6; background: #191c21; font-size: 10px; }
.parts-foot button { min-height: 42px; border: 0; border-radius: 10px; padding: 0 11px; color: #071a20; background: var(--cyan); font-size: 11px; font-weight: 750; }
.dev-panel { width: min(370px, calc(100vw - 32px)); }
.dev-panel .field label, .dev-panel .switch-field label { color: #d6dbe2; }
.dev-panel .field select { color: #f2f4f7; background-color: #191c21; border-color: #414752; }
.dev-panel .footnote { color: #9ba3ae; }

/* Archive */
.archive, .detail { flex: 1; width: min(1040px, calc(100% - 40px)); margin: 40px auto 70px; }
.archive h1, .detail-head h1 { margin: 0; line-height: 1.12; letter-spacing: -.045em; }
.archive h1 { font-size: clamp(30px, 4vw, 44px); }
.meta-row { max-width: 760px; margin: 10px 0; color: var(--muted); font-size: 13px; }
.meet-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
a.card-link { color: var(--ink); text-decoration: none; }
.meet-card { min-height: 122px; display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 13px 18px; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); transition: border-color .16s ease, box-shadow .16s ease; }
.meet-card:hover { border-color: #afbed1; box-shadow: var(--shadow-card); }
.meet-card .when { font-size: 12px; font-weight: 750; font-variant-numeric: tabular-nums; }
.meet-card .desc { grid-column: 1 / -1; min-width: 0; }
.meet-card .desc .nm { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.badge { justify-self: end; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: var(--pill); font-size: 10px; font-weight: 750; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.live { color: #14784f; background: #e7f6ef; }
.badge.processing { color: #8b6015; background: #fff5dd; }
.badge.ready { color: #2259bd; background: var(--blue-soft); }
.badge.error { color: #b53939; background: #fdeaea; }
.badge.unknown { color: var(--muted); background: var(--paper-deep); }
.detail #backList { margin: -10px 0 28px; padding-left: 0; }
.detail-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.detail-head h1 { font-size: clamp(26px, 3vw, 36px); }
.detail-head > span { flex: 1; }
.tabs { display: flex; gap: 18px; margin: 28px 0 0; border-bottom: 1px solid var(--line); }
.tab { min-height: 46px; margin-bottom: -1px; padding: 0 2px; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; font-size: 13px; font-weight: 680; }
.tab:hover { color: var(--ink); }
.tab.active { color: var(--blue); border-color: var(--blue); }
.tab:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.panel { padding: 20px 0; }
.protocol-view { display: grid; gap: 14px; }
.protocol-section { padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.protocol-section h2 { margin: 0 0 12px; font-size: 17px; letter-spacing: -.02em; }
.protocol-section ul { display: grid; gap: 9px; margin: 0; padding-left: 20px; color: var(--ink-soft); }
.protocol-section li::marker { color: var(--blue); }
.protocol-lead { border-color: #bed1f7; background: linear-gradient(135deg, #fff 0%, #f4f8ff 100%); }
.protocol-kicker { margin-bottom: 7px; color: var(--blue); font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.protocol-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.protocol-empty { margin: 0; color: var(--muted); }
.protocol-tasks { display: grid; gap: 10px; }
.protocol-task { padding: 15px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); }
.protocol-task-main { color: var(--ink); font-weight: 700; }
.protocol-task dl { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 12px 0 0; }
.protocol-task dl > div { display: grid; gap: 2px; }
.protocol-task dt { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.protocol-task dd { margin: 0; color: var(--ink-soft); font-size: 13px; }
.protocol-source { margin-top: 11px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.share-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.share-button { display: inline-flex; align-items: center; gap: 8px; }
.share-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.share-result {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  margin: 16px 0 4px;
  padding: 14px;
  border: 1px solid rgba(22, 134, 93, .2);
  border-radius: 17px;
  background: rgba(22, 134, 93, .075);
}
.share-result-copy { min-width: 0; }
.share-result-copy strong { display: block; color: var(--success); font-size: 13px; }
.share-result-copy span { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.share-link-input {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink-soft);
  background: rgba(255,255,255,.78);
  font-size: 12px;
  text-overflow: ellipsis;
}
.share-result .btn { min-height: 44px; }
.share-result .share-revoke { color: var(--danger); background: transparent; }
.share-result-error { border-color: rgba(217,74,74,.22); background: rgba(217,74,74,.07); }
.share-result-error .share-result-copy strong { color: var(--danger); }

.public-protocol-page { background: radial-gradient(circle at 50% -10%, rgba(40,100,220,.12), transparent 34rem), var(--paper); }
.public-protocol-topbar { position: static; }
.share-readonly-badge {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  color: var(--muted);
  background: rgba(255,255,255,.72);
  font-size: 11px;
  font-weight: 700;
}
.share-readonly-badge svg, .archive-lock-icon svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.share-readonly-badge svg { width: 15px; height: 15px; }
.share-detail { width: min(960px, calc(100% - 40px)); margin-top: 58px; }
.share-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.share-title-row h1 { margin: 0; font-size: clamp(30px, 4vw, 44px); line-height: 1.08; letter-spacing: -.045em; }
.share-download-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.share-kicker { margin-bottom: 7px; color: var(--blue); font-size: 11px; font-weight: 760; letter-spacing: .1em; text-transform: uppercase; }
.public-protocol-content { padding-top: 24px; }
.share-footer { max-width: 720px; margin: 22px auto 0; color: var(--muted); font-size: 12px; text-align: center; }
.share-error { display: grid; gap: 5px; padding: 24px; border: 1px solid rgba(217,74,74,.2); border-radius: 20px; color: var(--danger); background: rgba(255,255,255,.82); }
.share-error span { color: var(--muted); }

.archive-locked-page { min-height: 100dvh; }
.archive-locked-card {
  width: min(470px, calc(100% - 32px));
  margin: auto;
  padding: 40px;
  border: 1px solid rgba(29,29,31,.09);
  border-radius: 28px;
  background: rgba(255,255,255,.88);
  box-shadow: var(--shadow-card);
  text-align: center;
}
.archive-lock-icon { width: 64px; height: 64px; display: grid; place-items: center; margin: 0 auto 20px; border-radius: 20px; color: var(--blue); background: var(--blue-soft); }
.archive-lock-icon svg { width: 30px; height: 30px; }
.archive-locked-card h1 { margin: 0; font-size: clamp(24px, 5vw, 31px); line-height: 1.12; letter-spacing: -.04em; text-wrap: balance; }
.archive-locked-card p { margin: 14px 0 24px; color: var(--muted); }
.proto-text { padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.seg { margin-bottom: 18px; }
.seg .who { display: flex; align-items: center; gap: 7px; font-weight: 720; }
.seg .who .t { padding: 2px 7px; border-radius: 7px; color: var(--muted); background: var(--surface-soft); font-size: 11px; font-variant-numeric: tabular-nums; }
.seg .txt { margin-top: 5px; padding-left: 10px; border-left: 2px solid #bcd1fc; color: var(--ink-soft); }
.files-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.fcard { display: flex; flex-direction: column; gap: 10px; padding: 15px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.fcard .fn { color: var(--ink-soft); font-size: 12px; font-weight: 680; word-break: break-all; }
.fcard audio, .fcard video { width: 100%; max-height: 180px; border-radius: 11px; background: #0b0d10; }
.dl { text-decoration: none; }
.empty { padding: 40px 0; color: var(--muted); text-align: center; }
#toasts { position: fixed; top: 16px; right: 16px; z-index: 99; display: flex; flex-direction: column; gap: 8px; }
.toast { max-width: 350px; padding: 12px 16px; border: 1px solid #3a4049; border-radius: 13px; color: #fff; background: #22262d; box-shadow: var(--shadow-float); font-size: 12px; animation: appear .2s ease-out; }
.toast.err { background: var(--danger); border-color: var(--danger); }

/* Critical errors */
.error-dialog {
  width: min(500px, calc(100vw - 28px));
  max-width: none;
  max-height: calc(100dvh - 28px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 26px;
  color: #f5f7fa;
  background: transparent;
  overflow: visible;
}
.error-dialog::backdrop { background: rgba(8, 10, 14, .76); backdrop-filter: blur(5px); }
.error-card {
  max-height: calc(100dvh - 28px);
  overflow: auto;
  padding: 22px 24px 20px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 26px;
  background: #24272e;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .46);
}
.error-visual { position: relative; width: min(330px, 100%); height: 185px; margin: -4px auto 8px; }
.error-device { width: 100%; height: 100%; overflow: visible; }
.error-device ellipse { fill: #191b21; }
.error-device-base { fill: #697180; }
.error-device-screen { fill: #8a919e; stroke: #a4abb6; stroke-width: 7; stroke-linejoin: round; }
.error-device-glow { fill: var(--cyan); opacity: .9; }
.error-visual-icon {
  position: absolute;
  left: 70px;
  top: 55px;
  width: 82px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #606977;
  background: #f3f5f7;
  box-shadow: 0 9px 22px rgba(0, 0, 0, .2);
}
.error-visual-icon svg { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.error-visual-alert {
  position: absolute;
  top: 31px;
  left: 146px;
  width: 47px;
  height: 47px;
  display: grid;
  place-items: center;
  border: 5px solid #24272e;
  border-radius: 50%;
  color: #fff;
  background: #ff5c63;
  font-size: 29px;
  font-weight: 800;
  line-height: 1;
}
.error-copy { padding: 0 2px; }
.error-copy > span { display: block; margin-bottom: 7px; color: var(--cyan); font-size: 10px; font-weight: 760; letter-spacing: .1em; text-transform: uppercase; }
.error-copy h2 { margin: 0; color: #fff; font-size: 21px; line-height: 1.25; letter-spacing: -.025em; text-wrap: balance; }
.error-copy p { margin: 12px 0 0; color: #d2d7df; font-size: 15px; line-height: 1.48; }
.error-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 26px; }
.error-primary, .error-secondary {
  min-height: 46px;
  border-radius: 14px;
  padding: 0 19px;
  font-size: 14px;
  font-weight: 720;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.error-primary { border: 1px solid var(--cyan); color: #102029; background: var(--cyan); }
.error-primary:hover { border-color: #91e1f2; background: #91e1f2; }
.error-secondary { border: 1px solid #4a515d; color: #e5e9ef; background: transparent; }
.error-secondary:hover { border-color: #687281; background: #30343d; }
.error-dialog[open] .error-card { animation: errorCardIn .2s ease-out both; }
@keyframes errorCardIn { from { opacity: 0; transform: translateY(8px) scale(.985); } }

@media (max-width: 1180px) {
  #view-call:is(.chat-open,.ai-open) .ctrl.big { width: 46px; min-width: 46px; padding: 0; }
  #view-call:is(.chat-open,.ai-open) .device-control .ctrl.big { width: 50px; min-width: 50px; padding: 0 20px 0 8px; }
  #view-call:is(.chat-open,.ai-open) .ctrl.big .lbl { display: none; }
}

@media (max-width: 880px) {
  .lobby { align-items: start; padding-top: 20px; }
  .lobby-card { grid-template-columns: 1fr; }
  .lobby-head { grid-column: 1; margin-bottom: 22px; }
  .preview-row { grid-column: 1; grid-row: auto; margin-top: 14px; }
  .meet-list { grid-template-columns: 1fr; }
  .stage-wrap { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr); overflow: hidden; }
  .stage-wrap:has(.invite-stage.hidden):has(.grid .tile:nth-child(2)) { grid-template-rows: auto minmax(0, 1fr); }
  .invite-stage { grid-column: 1; grid-row: 3; }
  .stage-wrap:has(.invite-stage.hidden):has(.grid .tile:nth-child(2)) .grid { grid-column: 1; }
  .stage-wrap:has(.grid:empty) .invite-stage,
  .stage-wrap:has(.grid .tile:only-child) .invite-stage { aspect-ratio: auto; }
  .grid:has(.tile:nth-child(2)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid:has(.tile:nth-child(9)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .call-brand { display: none; }
  .pill span:not(#partsCount):not(#chatUnread) { display: none; }
  .pill { width: 42px; justify-content: center; padding: 0; }
  #view-call.ai-open { --ai-dock-width: min(380px, calc(100vw - 56px)); }
  .ai-panel { width: min(380px, calc(100vw - 56px)); border-radius: 12px 0 0 12px; }
  .stage-wrap.screen-mode {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) clamp(104px, 22vh, 156px);
  }
  .stage-wrap.screen-mode .screen { grid-column: 1; grid-row: 1; }
  .stage-wrap.screen-mode .grid,
  .stage-wrap.screen-mode.screen-many .grid {
    grid-column: 1 !important;
    grid-row: 2;
    display: flex;
    gap: 8px;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .stage-wrap.screen-mode .grid .tile {
    flex: 0 0 clamp(160px, 32vw, 230px);
    width: auto;
    height: 100%;
    min-height: 0;
  }
  .stage-wrap.screen-mode .tile.presenter {
    left: 14px;
    bottom: calc(22vh + 76px);
    width: clamp(150px, 29vw, 220px);
    height: auto;
  }
  .stage-wrap.screen-mode.screen-solo {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .hand-badge { width: 30px; min-height: 30px; justify-content: center; padding: 5px; border-radius: 10px; }
  .hand-badge span { display: none; }
  .topbar { min-height: 58px; padding: 0 14px; }
  .home-mode .topbar { min-height: 58px; }
  .brand small { display: none; }
  .home-mode #navHome { display: none; }
  .navlink { min-height: 40px; padding: 0 9px; font-size: 11px; }
  .home-hub { min-height: calc(100dvh - 58px); align-items: start; padding: 24px 12px 42px; }
  .home-heading { margin-bottom: 20px; }
  .home-heading p { font-size: 10px; }
  .home-heading > span { font-size: 12px; }
  .home-actions { gap: 9px; }
  .home-action { min-height: 148px; padding: 19px 10px 16px; border-radius: 18px; }
  .home-action-icon { width: 44px; height: 44px; margin-bottom: 10px; border-radius: 14px; }
  .home-action strong { font-size: 14px; }
  .home-action > span:not(.home-action-icon):not(.home-action-badge) { font-size: 11px; }
  .home-action-badge { top: 8px; right: 8px; }
  .home-join { padding: 13px; }
  .home-join-row .btn { padding-inline: 13px; }
  .error-card { padding: 16px 17px 16px; border-radius: 22px; }
  .error-visual { height: 156px; margin-top: -8px; transform: scale(.88); transform-origin: center; }
  .error-copy h2 { font-size: 19px; }
  .error-copy p { font-size: 14px; }
  .error-actions { margin-top: 20px; }
  .error-primary, .error-secondary { flex: 1; }
  .lobby { padding: 18px 12px 38px; }
  .lobby-head h1 { font-size: 30px; }
  .lobby-back { position: static; margin: 0 auto 12px 0; }
  .lobby-card > .field { padding: 18px 16px 0; }
  .lobby-card > .grid2, .lobby-card > .devices { padding-left: 16px; padding-right: 16px; }
  .lobby-card > .switch-field { padding: 0 16px 18px; }
  .grid2, .devices { grid-template-columns: 1fr; gap: 0; }
  .preview-row { padding: 9px; }
  .preview-row::before { top: 20px; left: 21px; }
  .preview-tile { aspect-ratio: 4 / 3; }
  .call-top { min-height: 54px; padding: 8px 10px; }
  .room-tag { display: none; }
  .timer { padding: 0 4px; }
  .call-actions { gap: 4px; }
  #view-call.chat-open { --chat-dock-width: min(360px, calc(100vw - 56px)); }
  #view-call.ai-open { --ai-dock-width: min(380px, calc(100vw - 56px)); }
  .chat-panel { width: min(360px, calc(100vw - 56px)); border-radius: 12px 0 0 12px; }
  .ai-panel { width: min(380px, calc(100vw - 56px)); border-radius: 12px 0 0 12px; }
  .stage-wrap { padding: 0 7px; }
  .grid { grid-auto-rows: minmax(0, 1fr); }
  .controls { padding: 8px 6px max(6px, env(safe-area-inset-bottom)); }
  .controls-inner { width: 100%; justify-content: center; border-radius: 17px; }
  .control-cluster { gap: 2px; }
  .control-cluster + .control-cluster { margin-left: 3px; padding-left: 4px; }
  .ctrl.big { width: 46px; min-width: 46px; padding: 0; }
  .device-control .ctrl.big { width: 50px; min-width: 50px; padding: 0 20px 0 8px; }
  .device-arrow { right: 2px; width: 20px; }
  .ctrl.big .lbl { display: none; }
  .ai-tip-peek { bottom: 73px; width: min(520px, calc(100% - var(--active-dock-width, 0px) - 16px)); grid-template-columns: 36px minmax(0,1fr) 32px; gap: 8px; min-height: 58px; padding: 7px 8px; border-radius: 16px; }
  .ai-tip-peek-mark { width: 36px; height: 36px; border-radius: 12px; }
  .ai-tip-peek-main strong { font-size: 12px; -webkit-line-clamp: 1; }
  .ai-tip-peek-dismiss { width: 32px; height: 32px; }
  .call-note { display: none; }
  .archive, .detail { width: calc(100% - 28px); margin-top: 24px; }
  .tabs { gap: 14px; overflow-x: auto; scrollbar-width: none; }
  .tab { flex: 0 0 auto; }
  .protocol-columns { grid-template-columns: 1fr; }
  .protocol-section { padding: 17px; border-radius: 16px; }
  .share-result { grid-template-columns: 1fr 1fr; }
  .share-result-copy { grid-column: 1 / -1; }
  .share-result .btn { width: 100%; }
  .public-protocol-topbar .brand small { display: none; }
  .share-detail { width: calc(100% - 28px); margin-top: 30px; }
  .share-title-row > .share-actions, .share-download-button { width: 100%; }
  .archive-locked-card { padding: 30px 22px; border-radius: 24px; }
}

@media (max-width: 340px) {
  .home-actions { grid-template-columns: 1fr; }
  .home-actions::after { display: none; }
  .home-action { min-height: 136px; }
  .home-join-row { flex-direction: column; }
  .home-join-row .btn { width: 100%; }
}

@media (max-width: 420px) {
  #btnRec { display: none; }
  #view-call.chat-open { --chat-dock-width: 100vw; }
  #view-call.ai-open { --ai-dock-width: 100vw; }
  .chat-panel { width: 100vw; border-left: 0; border-radius: 0; }
  .ai-panel { width: 100vw; border-left: 0; border-radius: 0; }
  #view-call:is(.chat-open,.ai-open) .ai-tip-peek { display: none !important; }
}

@media (max-height: 680px) and (orientation: landscape) {
  .call-top { min-height: 48px; padding-block: 5px; }
  .controls { padding-block: 7px 4px; }
  .ctrl.big { height: 44px; }
  .ai-tip-peek { bottom: 65px; min-height: 54px; }
  .call-note { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}