/* ═══ WIRECALL DESIGN SYSTEM v2 (2026-10) ═══
   Principles: no outlines or hairline dividers — surfaces are separated by tone, elevation and
   spacing; every color is a token; one type scale; dark and light themes share all tokens.
   Theme: <html data-theme="dark|light">; without the attribute the OS preference decides. */
:root {
  color-scheme: dark;

  /* Surfaces: page < card < raised < control < hover */
  --bg: #0b0b0d;
  --surface: #151518;
  --surface-elevated: #1c1c21;
  --surface-subtle: #24242a;
  --surface-hover: #2c2c33;
  /* Translucent fills for controls placed on any surface */
  --fill-1: rgba(255, 255, 255, 0.035);
  --fill-2: rgba(255, 255, 255, 0.065);
  --fill-3: rgba(255, 255, 255, 0.10);
  --fill-4: rgba(255, 255, 255, 0.16);
  --highlight: rgba(255, 255, 255, 0.05);   /* top inner light on raised cards */
  --inset: #0d0d10;                         /* recessed content areas: transcript, summary; clearly below the card */
  --border: transparent;
  --border-light: transparent;

  /* Text: contrast on --surface ≥ 15:1 / 7:1 / 4.5:1 */
  --text: #f1f1f4;
  --text-muted: #a8a8b3;
  --text-dim: #7c7c88;
  --on-accent: #ffffff;

  /* Brand and status */
  --accent: #6c5ce7;
  --accent-hover: #7b6cf0;
  --accent-active: #5b4bd8;
  --accent-soft: rgba(108, 92, 231, 0.18);
  --accent-text: #a99dff;          /* accent as text on surfaces */
  --danger: #e5484d;
  --danger-hover: #d93f44;
  --danger-active: #c2343a;
  --danger-soft: rgba(229, 72, 77, 0.16);
  --success: #2fcfa8;
  --success-hover: #3ddcb4;
  --success-active: #24b893;
  --success-soft: rgba(47, 207, 168, 0.14);
  --success-border: transparent;
  --warning: #f5b544;
  --warning-soft: rgba(245, 181, 68, 0.14);
  --info: #4b9dff;
  --focus-ring: rgba(169, 157, 255, 0.65);

  /* Elevation instead of outlines */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.45);
  --scrim: rgba(0, 0, 0, 0.6);

  /* Radii (concentric rule: inner = outer − padding) */
  --radius-lg: 16px;
  --radius: 12px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --radius-full: 9999px;

  /* Spacing, 4-point grid */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;

  /* Typography: Manrope, one scale, fixed line-heights */
  --font: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --fs-caption: 12px;   --lh-caption: 16px;   /* labels, timestamps, meta */
  --fs-small: 13px;     --lh-small: 18px;     /* secondary text, buttons sm */
  --fs-body: 14px;      --lh-body: 21px;      /* transcript, lists */
  --fs-base: 15px;      --lh-base: 22px;      /* default UI text, buttons */
  --fs-title-sm: 17px;  --lh-title-sm: 24px;  /* card titles */
  --fs-title: 20px;     --lh-title: 28px;     /* screen titles */
  --fs-title-lg: 24px;  --lh-title-lg: 32px;
  --fs-display: 40px;   --lh-display: 44px;   /* brand wordmark */
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-heavy: 800;
  --tracking-tight: -0.02em; --tracking-display: -0.035em; --tracking-caps: 0.06em;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

/* Light theme: same tokens, light values. Video areas stay black on purpose. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f3f6;
  --surface: #ffffff;
  --surface-elevated: #ffffff;
  --surface-subtle: #ececf1;
  --surface-hover: #e3e3ea;
  --fill-1: rgba(20, 20, 40, 0.035);
  --fill-2: rgba(20, 20, 40, 0.06);
  --fill-3: rgba(20, 20, 40, 0.09);
  --fill-4: rgba(20, 20, 40, 0.14);
  --highlight: transparent;
  --inset: #eceef3;
  --text: #15151a;
  --text-muted: #5c5c68;
  --text-dim: #85858f;
  --accent: #5b4bd8;
  --accent-hover: #4f3fcc;
  --accent-active: #4535b8;
  --accent-soft: rgba(91, 75, 216, 0.12);
  --accent-text: #4b3bc9;
  --danger: #d7373d;
  --danger-hover: #c22f35;
  --danger-active: #a9282d;
  --danger-soft: rgba(215, 55, 61, 0.1);
  --success: #12a383;
  --success-soft: rgba(18, 163, 131, 0.12);
  --warning: #b7791f;
  --warning-soft: rgba(183, 121, 31, 0.12);
  --focus-ring: rgba(91, 75, 216, 0.55);
  --shadow-1: 0 1px 2px rgba(20, 20, 40, 0.06);
  --shadow-2: 0 8px 24px rgba(20, 20, 40, 0.08);
  --shadow-3: 0 8px 24px rgba(20, 20, 40, 0.08);
  --scrim: rgba(20, 20, 30, 0.45);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ═══ ACCESSIBILITY & FOCUS ═══ */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ═══ BUTTONS ═══ */
:root {
  --control-recess: inset 0 2px 4px rgba(0, 0, 0, 0.22), inset 0 -1px 0 rgba(255, 255, 255, 0.025);
  --control-raised: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 2px 4px rgba(0, 0, 0, 0.18);
  --control-pressed: inset 0 1px 3px rgba(0, 0, 0, 0.16);
}
:root[data-theme="light"] {
  --control-recess: inset 0 1px 3px rgba(20, 20, 40, 0.10), inset 0 -1px 0 rgba(255, 255, 255, 0.7);
  --control-raised: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 2px 3px rgba(20, 20, 40, 0.10);
  --control-pressed: inset 0 1px 3px rgba(20, 20, 40, 0.12);
}

button {
  cursor: pointer;
  font: inherit;
  border: none;
  background: none;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, opacity 0.12s ease;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn {
  padding: 12px 20px;
  min-height: 48px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: var(--fs-base);
  text-decoration: none;
}

.btn-primary {
  box-shadow: var(--control-raised);
  background: var(--accent);
  color: var(--on-accent);
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { background: var(--accent-active); }

.btn-secondary {
  box-shadow: var(--control-raised);
  background: var(--fill-2);
  color: var(--text);
  border: none;
}
.btn-secondary:hover { background: var(--fill-3); }
.btn-secondary:active { background: var(--fill-4); }

.btn-danger {
  box-shadow: var(--control-raised);
  background: var(--danger);
  color: var(--on-accent);
}
.btn-danger:hover { background: var(--danger-hover); }
.btn-danger:active { background: var(--danger-active); }

.btn-primary:active, .btn-secondary:active, .btn-danger:active {
  box-shadow: var(--control-pressed);
}

.btn-ghost {
  color: var(--text-muted);
  padding: 10px 16px;
}
.btn-ghost:hover { color: var(--text); background: var(--surface-hover); }
.btn-ghost:active { background: var(--surface-subtle); }

/* Круглые иконки управления */
.btn-icon {
  width: 50px;
  height: 50px;
  min-width: 50px;
  min-height: 50px;
  border-radius: 50%;
  background: var(--surface-elevated);
  border: none;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--control-raised);
}
.btn-icon:hover {
  background: var(--surface-hover);
}
.btn-icon:active {
  background: var(--surface-subtle);
  box-shadow: var(--control-pressed);
}

/* Активные и выключенные состояния */
.btn-icon.is-active {
  background: var(--accent);
  border: none;
  color: var(--on-accent);
}
.btn-icon.is-active:active {
  background: var(--accent-active);
}
.btn-icon.is-muted {
  background: var(--surface);
  border: none;
  color: var(--text-muted);
}
.btn-icon.danger {
  background: var(--danger);
  border: none;
  color: var(--on-accent);
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;
}
.btn-icon.danger:hover {
  background: var(--danger-hover);
}
.btn-icon.danger:active {
  background: var(--danger-active);
}
/* ═══ INPUTS ═══ */
input[type="text"]:not(.auth-input) {
  width: 100%;
  height: 48px;
  padding: 12px 16px;
  font: inherit;
  font-size: var(--fs-base);
  font-weight: 500;
  background: var(--surface-elevated);
  border: 1px solid transparent;
  box-shadow: var(--control-recess);
  border-radius: var(--radius-sm);
  color: var(--text);
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
input[type="text"]:not(.auth-input):focus {
  background: var(--surface-hover);
  border-color: var(--accent);
  box-shadow: var(--control-recess);
  outline: none;
}
input[type="text"]:not(.auth-input)::placeholder {
  color: var(--text-dim);
}

/* ═══ ICONS ═══ */
.icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-sm { width: 18px; height: 18px; }
.icon-lg { width: 28px; height: 28px; }

/* ═══ TOAST NOTIFICATIONS ═══ */
#notificationContainer {
  position: fixed;
  top: max(16px, var(--safe-t));
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  width: auto;
  max-width: 90vw;
}

.toast {
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 20px;
  border-radius: var(--radius-md, 12px);
  background: var(--surface-elevated);
  box-shadow: var(--shadow-2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid transparent;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  color: var(--text);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.4;
  animation: toastIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.15s ease;
  max-width: min(440px, calc(100vw - 32px));
}
.toast:hover {
  background: rgba(34, 34, 34, 0.94);
  border-color: transparent;
}
.toast.toast-leaving {
  opacity: 0;
  transform: translateY(-8px) scale(0.96);
}
.toast.toast-info {
  border-color: transparent;
}
.toast.toast-success {
  border-color: transparent;
}
.toast.toast-warning {
  color: var(--warning);
  border-color: transparent;
}
.toast.toast-error {
  color: var(--danger);
  border-color: transparent;
  background: rgba(36, 20, 22, 0.92);
}
.toast-msg {
  text-align: center;
  word-break: break-word;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(-10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ═══ SCREENS ═══ */
.screen {
  position: fixed;
  inset: 0;
  display: none;
  flex-direction: column;
  background: var(--bg);
  z-index: 1;
  padding-top: var(--safe-t);
  padding-bottom: var(--safe-b);
  padding-left: var(--safe-l);
  padding-right: var(--safe-r);
}
.screen.is-active {
  display: flex;
}

/* ═══ LOBBY SCREEN ═══ */
#screenLobby {
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
}

.lobby-container {
  width: 100%;
  max-width: 520px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
  animation: fadeIn 0.4s ease;
}

.lobby-brand {
  text-align: center;
}
.lobby-brand h1 {
  font-size: var(--fs-display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
}
.lobby-brand h1 { display: flex; align-items: center; justify-content: center; gap: 12px; }
.brand-mark { width: 44px; height: 44px; flex-shrink: 0; filter: drop-shadow(0 6px 18px rgba(108, 92, 231, 0.4)); }
.lobby-brand h1 span {
  background: linear-gradient(135deg, #a29bfe 0%, #6c5ce7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lobby-brand p {
  color: var(--text-muted);
  font-size: var(--fs-base);
  font-weight: 500;
  margin-top: 10px;
  letter-spacing: -0.01em;
}

.lobby-topbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
  width: 100%;
}

.lobby-user-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-subtle);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  padding: 5px 12px;
  font-size: var(--fs-small);
  color: var(--text-muted);
  font-weight: 600;
  box-shadow: inset 0 1px 0 var(--highlight);
}

.lobby-user-pill .icon {
  width: 14px;
  height: 14px;
}

.lobby-user-pill button {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-caption);
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.lobby-user-pill button:hover {
  color: var(--danger);
  background: var(--danger-soft);
}

/* ═══ SCREEN 0: AUTH CARD ═══ */
.auth-card {
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  text-align: left;
}

.auth-label {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: -0.01em;
}

.auth-input {
  width: 100%;
  height: 48px;
  background: var(--surface-subtle);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0 14px;
  font-family: var(--font);
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text);
  box-sizing: border-box;
  outline: none;
  box-shadow: var(--control-recess);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.auth-input:focus {
  border-color: var(--accent);
  background: var(--surface-elevated);
}

.auth-password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.auth-password-wrapper .auth-input {
  padding-right: 52px;
}

.auth-password-toggle {
  position: absolute;
  right: 2px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  box-shadow: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color 0.15s ease;
}

.auth-password-toggle:hover {
  color: var(--text);
}

.auth-password-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -4px;
}

.auth-input::placeholder {
  color: var(--text-dim);
}

.auth-error-msg {
  background: var(--danger-soft);
  color: var(--danger);
  border: 0;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: var(--fs-small);
  font-weight: 500;
  margin-bottom: 16px;
  text-align: center;
}

.auth-submit-btn {
  width: 100%;
  height: 50px;
  font-size: var(--fs-base);
  font-weight: 600;
  border-radius: 12px;
  margin-top: 6px;
  justify-content: center;
}

.lobby-card {
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: 20px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65), inset 0 1px 0 var(--highlight);
  box-sizing: border-box;
}

.lobby-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}

.lobby-actions .btn {
  white-space: nowrap;
  padding: 0 14px;
  height: 52px;
  min-height: 52px;
  font-size: var(--fs-body);
  font-weight: 600;
  border-radius: 12px;
  gap: 8px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.lobby-actions .btn span {
  white-space: nowrap;
  font-size: var(--fs-body);
  font-weight: 600;
}
.lobby-actions .btn .icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}


.lobby-actions #btnNewMeeting {
  background: var(--fill-2);
  color: var(--text);
  border: 1px solid transparent;
  box-shadow: inset 0 1px 0 var(--highlight);
}
.lobby-actions #btnNewMeeting:hover {
  background: var(--fill-2);
  border-color: transparent;
  color: var(--text);
}
.lobby-actions #btnNewMeeting:active {
  background: var(--fill-1);
  border-color: transparent;
}
.lobby-actions #btnNewMeeting .btn-badge-sub {
  background: var(--fill-2);
  color: var(--text-muted);
  border: 1px solid transparent;
}

.btn-badge-sub {
  font-size: var(--fs-caption);
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  margin-left: auto;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}


.lobby-divider-text {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--text-dim);
  font-size: var(--fs-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 4px 0;
  user-select: none;
}
.lobby-divider-text::before,
.lobby-divider-text::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--fill-2);
}

.lobby-join-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lobby-join-label {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: -0.01em;
}

.join-row {
  display: flex;
  gap: 8px;
  width: 100%;
}
.join-row input {
  flex: 1;
  height: 48px;
  background: var(--fill-1);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0 16px;
  font-size: var(--fs-body);
  color: var(--text);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.join-row input::placeholder {
  text-transform: none !important;
  font-family: var(--font) !important;
  letter-spacing: normal !important;
  color: var(--text-dim);
  font-size: var(--fs-body);
}
.join-row input:focus {
  background: var(--fill-2);
  border-color: var(--accent);
  box-shadow: var(--control-recess);
  outline: none;
}
.join-row input:not(:placeholder-shown) {
  text-transform: uppercase;
  font-family: var(--font-mono);
  letter-spacing: 1px;
  font-weight: 600;
}
.join-row .btn {
  height: 48px;
  padding: 0 24px;
  border-radius: var(--radius);
  background: var(--fill-2);
  border: 1px solid transparent;
  color: var(--text);
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 var(--highlight);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.join-row .btn:hover {
  background: var(--fill-3);
  border-color: transparent;
  color: var(--text);
}
.join-row .btn:active {
  background: var(--fill-1);
}

/* Lobby Footer Tools (ASR test bench & Lab link) */
.lobby-footer-tools {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
  width: 100%;
}

.lobby-bench-btn,
.lobby-lab-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-small);
  color: var(--text-muted);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: var(--fill-1);
  border: 1px solid transparent;
  transition: all 0.15s ease;
}

.lobby-bench-btn:hover,
.lobby-lab-link:hover {
  color: var(--text);
  background: var(--fill-2);
  border-color: transparent;
}

/* ═══ PRE-CALL SCREEN ═══ */
#screenPrecall {
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}

.precall-container {
  width: 100%;
  max-width: 440px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.precall-header {
  text-align: center;
}
.precall-header h2 {
  font-size: var(--fs-title);
  font-weight: 700;
  margin-bottom: 4px;
}
.precall-header p {
  color: var(--text-muted);
  font-size: var(--fs-body);
}

.precall-preview-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000000;
  border: none;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
}
.precall-preview-box video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scaleX(-1);
}

.precall-cam-off {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--surface);
  color: var(--text-dim);
}
.precall-cam-off.show {
  display: flex;
}

.precall-controls-overlay {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 10;
}

.precall-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--surface);
  border: none;
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-label {
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ═══ CALL SCREEN ═══ */
#screenCall {
  background: #000000;
  padding: 0 !important;
}

/* Call Top Bar */
.call-top-bar {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(10px + var(--safe-t)) calc(16px + var(--safe-r)) 10px calc(16px + var(--safe-l));
  background: rgba(19, 19, 19, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: none;
}

.call-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: calc(100% - 108px);
}

@media (min-width: 641px) {
  .call-title-group {
    max-width: calc(50% - 110px);
  }
}

.call-title {
  font-size: var(--fs-base);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex-shrink: 1;
}

.call-timer {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--text-muted);
  flex-shrink: 0;
}

.call-top-bar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

.quality-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 9px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--fill-2);
  border: 1px solid transparent;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  user-select: none;
}
.quality-badge:hover {
  background: var(--fill-3);
  border-color: transparent;
  color: var(--text);
}
.quality-badge:active {
  background: var(--fill-3);
}
.quality-badge .icon {
  width: 14px;
  height: 14px;
}
.quality-badge.transcription-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 9px;
  height: 28px;
  gap: 6px;
  background: var(--fill-2);
  border: 1px solid transparent;
  color: var(--text-muted);
  font-weight: 500;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.quality-badge.transcription-badge:hover {
  background: var(--fill-3);
  border-color: transparent;
  color: var(--text);
}
.quality-badge.transcription-badge.is-idle .quality-dot {
  background: var(--fill-4);
}
.quality-badge.transcription-badge.is-recording {
  background: var(--success-soft);
  border-color: transparent;
  color: var(--text);
}
.quality-badge.transcription-badge.is-recording:hover {
  background: rgba(0, 210, 180, 0.2);
  border-color: rgba(0, 210, 180, 0.45);
}
.quality-badge.transcription-badge.is-recording .quality-dot {
  box-shadow: 0 0 8px rgba(0, 210, 180, 0.6);
}
.quality-badge.transcription-badge.is-active,
.quality-badge.transcription-badge.is-panel-open {
  background: rgba(0, 210, 180, 0.22);
  border-color: rgba(0, 210, 180, 0.5);
  color: var(--text);
}
.quality-badge.transcription-badge:active {
  background: rgba(0, 210, 180, 0.26);
}
.quality-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
}
.quality-dot.fair { background: var(--warning); }
.quality-dot.poor { background: var(--danger); }

/* Video Container & Areas */
.call-stage {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 1:1 Quick Call Layout */
.quickcall-view {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.remote-main-tile {
  position: absolute;
  inset: 8px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
}
.remote-main-tile video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.25s ease;
}

.remote-placeholder {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--surface);
  z-index: 2;
}
.remote-placeholder.show {
  display: flex;
}
.quick-invite-btn {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  border-radius: var(--radius-full);
  background: var(--fill-2);
  border: 1px solid transparent;
  color: var(--text-muted);
  font-weight: 500;
  font-size: var(--fs-small);
  letter-spacing: -0.01em;
  cursor: pointer;
  outline: none;
  box-shadow: none;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.quick-invite-btn:hover {
  background: var(--fill-3);
  border-color: transparent;
  color: var(--text);
}
.quick-invite-btn:active {
  background: var(--fill-3);
}
.quick-invite-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus-ring);
}
.quick-invite-btn.copied {
  background: var(--success-soft);
  border-color: transparent;
  color: var(--success);
}
.quick-invite-btn.copied:hover {
  background: rgba(0, 210, 180, 0.18);
  border-color: rgba(0, 210, 180, 0.4);
}
.quick-invite-btn.copied:active {
  background: rgba(0, 210, 180, 0.24);
}
.avatar-circle {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--surface-elevated);
  border: 1px solid transparent;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-title-lg);
  font-weight: 700;
  color: var(--text-muted);
}
.avatar-circle .icon {
  width: 32px;
  height: 32px;
  color: var(--text-dim);
}

/* Draggable PIP stack for Quick Call */
.quickcall-pip-stack {
  position: absolute;
  right: 16px;
  bottom: 84px;
  width: 140px;
  z-index: 30;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6);
  cursor: grab;
  touch-action: none;
  user-select: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.quickcall-pip-stack.dragging {
  cursor: grabbing;
}
.pip-sub-tile {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000000;
  overflow: hidden;
  transition: aspect-ratio 0.2s ease;
}
[data-orientation="portrait"] .pip-sub-tile {
  aspect-ratio: 9 / 16;
}
.pip-sub-tile video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000000;
}
#quickcallLocalVideo {
  transform: scaleX(-1);
}

/* Screen Share View for 1:1 */
.screen-share-wrap {
  position: absolute;
  inset: 8px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000000;
  z-index: 10;
  display: none;
}
.screen-share-wrap.active {
  display: flex;
}
.screen-share-wrap video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.presentation-local-placeholder {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #0a0a0a;
  color: var(--text-muted);
  font-size: var(--fs-body);
  font-weight: 500;
  z-index: 1;
}
.presentation-local-placeholder.show {
  display: flex;
}

/* ═══ MEETING GRID LAYOUT ═══ */
.meeting-view {
  position: absolute;
  inset: 8px;
  display: none;
  gap: 8px;
  overflow: hidden;
}
.meeting-view.active {
  display: grid;
}

/* Dynamic Grid Classes */
.meeting-grid-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.meeting-grid-2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.meeting-grid-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.meeting-grid-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.meeting-grid-5, .meeting-grid-6 { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; }
.meeting-grid-7, .meeting-grid-8 { grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr 1fr; }

@media (max-width: 767px) {
  .meeting-grid-2 { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .meeting-grid-3 { grid-template-columns: 1fr; grid-template-rows: repeat(3, 1fr); }
  .meeting-grid-5, .meeting-grid-6 { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); }
  .meeting-grid-7, .meeting-grid-8 { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, 1fr); }
}

/* Presentation Mode (Screen Share Active in Meeting) */
.meeting-presentation-view {
  position: absolute;
  inset: 8px;
  display: none;
  flex-direction: column;
  gap: 8px;
  z-index: 12;
}
.meeting-presentation-view.active {
  display: flex;
}
.presentation-main-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000000;
}
.presentation-main-stage video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.presentation-header-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--on-accent);
  display: flex;
  align-items: center;
  gap: 6px;
  border: none;
  z-index: 2;
  pointer-events: none;
}
.presentation-strip {
  height: 100px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  flex-shrink: 0;
  padding-bottom: 2px;
}
.presentation-strip .meeting-tile {
  width: 140px;
  height: 100%;
  flex-shrink: 0;
}

/* Individual Meeting Tile */
.meeting-tile {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  border: 2px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.meeting-tile video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.meeting-tile.is-local video {
  transform: scaleX(-1);
}
.meeting-tile.is-speaking {
  border-color: var(--accent);
  box-shadow: 0 0 16px var(--accent-soft);
}

.meeting-tile-placeholder {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  z-index: 1;
}
.meeting-tile.cam-off .meeting-tile-placeholder {
  display: flex;
}

.tile-badge-name {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--text);
  max-width: calc(100% - 40px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  z-index: 3;
}

.tile-badge-mic {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--danger);
  z-index: 3;
}
.meeting-tile.mic-off .tile-badge-mic {
  display: flex;
}

/* ═══ CALL CONTROLS BAR ═══ */
.call-bottom-bar {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px calc(16px + var(--safe-r)) calc(12px + var(--safe-b)) calc(16px + var(--safe-l));
  background: rgba(19, 19, 19, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: none;
}

/* Reconnect Overlay */
.reconnect-overlay {
  position: absolute;
  inset: 0;
  background: rgba(11, 11, 11, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 50;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  text-align: center;
}
.reconnect-overlay.show {
  display: flex;
}
.reconnect-spinner {
  width: 44px;
  height: 44px;
  border: 3px solid transparent;
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ═══ POST-CALL SCREEN ═══ */
#screenPostcall {
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
}

.postcall-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  transition: max-width 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.postcall-card.has-transcript {
  max-width: 640px;
}

.postcall-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--surface-elevated);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.postcall-title {
  font-size: var(--fs-title);
  font-weight: 700;
}

.postcall-room {
  font-size: var(--fs-body);
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
  margin-top: 4px;
}

.postcall-duration {
  font-size: var(--fs-base);
  color: var(--text-muted);
}

/* Postcall Transcript Box */
.postcall-transcript-box {
  background: var(--inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.postcall-transcript-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid transparent;
}

.postcall-transcript-heading {
  display: flex;
  align-items: center;
  gap: 8px;
}

.postcall-transcript-title {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.postcall-transcript-badge {
  font-size: var(--fs-caption);
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 12px;
  background: var(--fill-2);
  color: var(--info);
  border: 0;
}

.postcall-transcript-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.btn-sm {
  padding: 5px 10px !important;
  font-size: var(--fs-caption) !important;
  border-radius: var(--radius-sm) !important;
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.postcall-transcript-preview {
  max-height: 280px;
  overflow-y: auto;
  background: var(--inset);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  border: 1px solid transparent;
  scrollbar-width: thin;
  scrollbar-color: var(--fill-4) transparent;
}

.postcall-transcript-preview::-webkit-scrollbar {
  width: 5px;
}

.postcall-transcript-preview::-webkit-scrollbar-thumb {
  background: var(--fill-3);
  border-radius: 3px;
}

.postcall-transcript-preview .transcript-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.postcall-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.postcall-card.has-transcript .postcall-actions {
  flex-direction: row;
  justify-content: center;
}

.postcall-card.has-transcript .postcall-actions .btn {
  flex: 1;
}

@media (max-width: 600px) {
  .postcall-card.has-transcript {
    padding: 24px 16px;
  }
  .postcall-card.has-transcript .postcall-actions {
    flex-direction: column;
  }
  .postcall-transcript-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

/* Postcall Quality Card */
.postcall-quality-card {
  background: var(--inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.postcall-quality-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.postcall-quality-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.postcall-quality-title {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text);
}

.postcall-quality-badge {
  font-size: var(--fs-caption);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 0.2px;
}

.postcall-quality-badge.badge-green {
  background: var(--success-soft);
  color: var(--success);
  border: 1px solid transparent;
}

.postcall-quality-badge.badge-amber {
  background: var(--warning-soft);
  color: var(--warning);
  border: 1px solid transparent;
}

.postcall-quality-badge.badge-red {
  background: var(--danger-soft);
  color: var(--danger);
  border: 0;
}

.postcall-quality-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

@media (max-width: 540px) {
  .postcall-quality-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.postcall-quality-stat {
  background: var(--fill-2);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  border: 1px solid transparent;
}

.postcall-quality-stat .stat-label {
  font-size: var(--fs-caption);
  color: var(--text-dim);
  margin-bottom: 2px;
}

.postcall-quality-stat .stat-val {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.postcall-quality-issues {
  font-size: var(--fs-caption);
  color: var(--warning);
  background: var(--warning-soft);
  border-radius: 4px;
  padding: 6px 10px;
  line-height: 1.4;
}

/* ═══ IN-CALL TRANSCRIPTION BENCH MODAL ═══ */
.bench-modal-sheet {
  max-width: 560px !important;
  width: 95%;
  background: rgba(18, 18, 18, 0.94);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid transparent;
  border-radius: var(--radius-lg, 16px);
  padding: 20px 22px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.65);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bench-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bench-engine-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--fill-1);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: var(--fs-caption);
}

.bench-engine-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.bench-item-label {
  color: var(--text-dim);
}

.bench-item-val {
  color: var(--text);
  font-weight: 600;
}

.bench-status-badge {
  background: var(--success-soft);
  color: var(--success);
  padding: 2px 7px;
  border-radius: 8px;
  font-size: var(--fs-caption);
}

.bench-model-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--fs-caption);
}

.bench-selector-label {
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
}

.bench-model-buttons {
  display: flex;
  gap: 6px;
}

.btn-bench-model {
  background: var(--fill-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: 500;
  padding: 5px 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-bench-model:hover {
  background: var(--fill-3);
  color: var(--text);
}

.btn-bench-model.is-active {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
  font-weight: 600;
}

.bench-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bench-section-label {
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--text-muted);
}

.bench-select {
  width: 100%;
  height: 42px;
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--surface-subtle);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23999999' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 0 38px 0 12px;
  font: 500 14px/1.4 var(--font);
  color-scheme: dark;
  outline: none;
  cursor: pointer;
}

.bench-select option {
  background: var(--surface-elevated);
  color: var(--text);
}

.bench-select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.bench-textarea {
  width: 100%;
  background: var(--surface-subtle);
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 8px 10px;
  font: 500 14px/1.45 var(--font);
  resize: vertical;
  box-sizing: border-box;
}

.bench-textarea:focus {
  background: var(--surface-hover);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.bench-actions-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.bench-play-btn,
.bench-mic-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-small);
  font-weight: 600;
  padding: 8px 14px;
}

.bench-eval-btn {
  margin-left: auto;
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

.bench-live-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--accent-soft);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}

.bench-live-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-small);
  color: #c4b5fd;
  font-weight: 500;
}

.bench-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-text);
  box-shadow: 0 0 8px var(--accent-text);
  animation: pulse-dot 1.2s infinite ease-in-out;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 0.4; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.2); }
}

.bench-result-card {
  background: var(--inset);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bench-result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bench-result-title {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text);
}

.bench-score-badge {
  font-size: var(--fs-caption);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--success-soft);
  color: var(--success);
  border: 1px solid transparent;
}
.bench-score-badge.is-warning { background: var(--warning-soft); color: var(--warning); border-color: transparent; }
.bench-score-badge.is-danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }

.bench-result-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.bench-metric {
  background: var(--fill-1);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bench-metric .metric-label {
  font-size: var(--fs-caption);
  color: var(--text-dim);
}

.bench-metric .metric-val {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.bench-diff-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid transparent;
  padding-top: 8px;
  font-size: var(--fs-small);
}

.bench-diff-row {
  display: flex;
  gap: 8px;
  line-height: 1.4;
}

.bench-diff-label {
  width: 80px;
  flex-shrink: 0;
  color: var(--text-dim);
  font-size: var(--fs-caption);
}

.bench-diff-text {
  flex: 1;
  word-break: break-word;
}

.bench-ref-text {
  color: var(--text-muted);
}

.bench-hyp-text {
  color: var(--text);
  font-weight: 500;
}

.bench-diff-view {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.diff-word-match {
  color: var(--success);
}

.diff-word-sub {
  color: var(--danger);
  background: var(--danger-soft);
  padding: 0 4px;
  border-radius: 3px;
  text-decoration: line-through;
}

.diff-word-sub-expected {
  color: var(--success);
  font-weight: 600;
  margin-left: 2px;
}

.diff-word-ins {
  color: var(--warning);
  background: var(--warning-soft);
  padding: 0 4px;
  border-radius: 3px;
}

.diff-word-del {
  color: var(--danger);
  opacity: 0.7;
  text-decoration: line-through;
}

.bench-footer {
  border-top: 1px solid transparent;
  padding-top: 10px;
  display: flex;
  justify-content: flex-end;
}

.bench-lab-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-caption);
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.15s ease;
}

.bench-lab-link:hover {
  color: var(--accent);
}

/* ═══ MODAL DIALOGS & MORE MENU ═══ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-backdrop.is-open {
  display: flex;
}

#modalTranscriptionDownload {
  z-index: 150;
}

#modalTranscriptionConsent {
  z-index: 155;
}

#transcriptionDownloadBar {
  transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.modal-sheet {
  background: var(--surface);
  border: none;
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 400px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
  animation: modalIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-title {
  font-size: var(--fs-title-sm);
  font-weight: 700;
}
.modal-close-btn,
.popover-close-btn {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 4px !important;
  margin: -4px !important;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  transition: color 0.15s ease;
}
.modal-close-btn:hover,
.popover-close-btn:hover {
  color: var(--text);
}
.modal-close-btn:focus,
.modal-close-btn:focus-visible,
.popover-close-btn:focus,
.popover-close-btn:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
.modal-close-btn svg,
.popover-close-btn svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

/* ═══ POPOVER "MORE" MENU ═══ */
.popover-backdrop {
  background: rgba(0, 0, 0, 0.25) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding: 0 !important;
}

.popover-bubble {
  position: fixed !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: calc(76px + var(--safe-b)) !important;
  width: calc(100% - 24px) !important;
  max-width: 360px !important;
  background: var(--surface-elevated) !important;
  border: none !important;
  border-radius: 18px !important;
  padding: 16px 18px !important;
  box-shadow: none !important;
  animation: popoverSlideUp 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 101;
  outline: none;
}

.popover-bubble::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: var(--popover-arrow-left, calc(50% + 68px));
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: var(--surface-elevated);
  border: none;
  pointer-events: none;
}

@media (min-width: 768px) {
  .popover-backdrop {
    justify-content: center !important;
  }
  .popover-bubble {
    bottom: calc(86px + var(--safe-b)) !important;
    max-width: 380px !important;
  }
}

@keyframes popoverSlideUp {
  from {
    opacity: 0;
    transform: translate(-50%, 12px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

.popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 4px;
  border-bottom: none;
}

.popover-title {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--text);
}

.popover-menu-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.popover-row-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font-size: var(--fs-body);
  font-weight: 500;
  text-align: left;
  transition: background-color 0.15s ease;
}
.popover-row-btn:hover {
  background: var(--surface-hover);
}

.popover-row-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-body);
  font-weight: 500;
}
.popover-row-toggle:hover {
  background: var(--fill-1);
}

.popover-row-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.popover-badge {
  font-size: var(--fs-caption);
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
}

.btn-ghost-sm {
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--text-muted);
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--surface-subtle);
  border: none;
  cursor: pointer;
}
.btn-ghost-sm:hover {
  color: var(--text);
  background: var(--surface-hover);
}

/* ═══ TOGGLE SWITCH ═══ */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.toggle-slider {
  position: absolute;
  inset: 0;
  background-color: var(--surface-subtle);
  border: none;
  border-radius: 24px;
  transition: background-color 0.2s ease;
}
.toggle-slider::before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: var(--text);
  border-radius: 50%;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.toggle-switch input:checked + .toggle-slider {
  background-color: var(--accent);
  border-color: var(--accent);
}
.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(20px);
  background-color: #ffffff;
}

/* ═══ CALL TOP STATS STRIP ═══ */
.transcript-runtime-notice {
  margin: 0;
  padding: 12px 16px;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.transcript-runtime-notice[hidden] { display: none; }
#toggleTranscriptionSidebar, #toggleTranscription {
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}
#toggleTranscriptionSidebar:focus-visible + .toggle-slider,
#toggleTranscription:focus-visible + .toggle-slider {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}
.toggle-switch:has(#toggleTranscriptionSidebar:disabled),
.toggle-switch:has(#toggleTranscription:disabled) { cursor: progress; }

.call-stats-strip {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: stretch;
  background: rgba(18, 18, 18, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  overflow: hidden;
  z-index: 25;
  user-select: none;
  pointer-events: auto;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.call-stats-strip:hover {
  background: rgba(26, 26, 26, 0.92);
  border-color: transparent;
}

.stat-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  border-right: 1px solid transparent;
  cursor: help;
  transition: background-color 0.15s ease;
}
.stat-cell:last-child {
  border-right: none;
}
.stat-cell:hover {
  background: var(--fill-2);
}

.stat-cell-val {
  color: var(--text);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-caption);
  line-height: 1.1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  display: inline-block;
  white-space: nowrap;
}

#stripRtt {
  min-width: 38px;
  text-align: center;
}
#stripResolution {
  min-width: 58px;
  text-align: center;
}
#stripFps {
  min-width: 36px;
  text-align: center;
}

/* "More" Menu items */
.menu-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-base);
  font-weight: 500;
  text-align: left;
  width: 100%;
}
.menu-item:hover {
  background: var(--surface-hover);
}
.menu-item.disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* Participant list item */
.participant-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: none;
}
.participant-row:last-child {
  border-bottom: none;
}
.participant-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.participant-tag {
  font-size: var(--fs-caption);
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--surface-elevated);
  color: var(--text-muted);
}

/* Quality stats table */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.stat-box {
  background: var(--surface-elevated);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: none;
}
.stat-label {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.stat-val {
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  font-weight: 600;
}
.transcription-diagnostics-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
}
.transcription-diagnostics-note {
  max-width: 44ch;
  margin: 0;
  color: var(--text-dim);
  font-size: var(--fs-caption);
  line-height: 1.45;
}

/* ═══ ANIMATIONS ═══ */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ═══ DESKTOP ADAPTATION ═══ */
@media (min-width: 768px) {
  .lobby-card { padding: 32px 28px; }
  .lobby-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  
  .quickcall-pip-stack {
    width: 180px;
    right: 24px;
    bottom: 96px;
  }
  
  .remote-main-tile {
    inset: 16px;
  }
  .meeting-view {
    inset: 16px;
    gap: 12px;
  }
  .screen-share-wrap {
    inset: 16px;
  }
  
  .call-bottom-bar {
    gap: 20px;
  }
  .call-bottom-bar .btn-icon {
    width: 52px;
    height: 52px;
  }
  .call-bottom-bar .btn-icon.danger {
    width: 60px;
    height: 60px;
  }
}

/* ═══ MOBILE LANDSCAPE ADAPTATION (SMARTPHONES) ═══ */
@media (orientation: landscape) and (max-height: 540px) {
  /* Screen padding reset for landscape */
  .screen {
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Compact Call Top Bar */
  .call-top-bar {
    padding: calc(4px + var(--safe-t)) calc(12px + var(--safe-r)) 4px calc(12px + var(--safe-l));
  }
  .call-title {
    font-size: var(--fs-small);
    max-width: 160px;
  }
  .call-timer {
    font-size: var(--fs-caption);
  }
  .quality-badge {
    height: 24px;
    padding: 3px 7px;
    font-size: var(--fs-caption);
    gap: 4px;
  }
  .quality-badge .icon {
    width: 12px;
    height: 12px;
  }

  /* Compact Call Bottom Bar */
  .call-bottom-bar {
    padding: 5px calc(12px + var(--safe-r)) calc(5px + var(--safe-b)) calc(12px + var(--safe-l));
    gap: 10px;
  }
  .call-bottom-bar .btn-icon {
    width: 40px !important;
    height: 40px !important;
  }
  .call-bottom-bar .btn-icon .icon svg {
    width: 18px;
    height: 18px;
  }
  .call-bottom-bar .btn-icon.danger {
    width: 44px !important;
    height: 44px !important;
  }

  /* Video Stage in Landscape */
  .remote-main-tile {
    inset: 4px calc(6px + var(--safe-r)) 4px calc(6px + var(--safe-l));
  }
  .quickcall-pip-stack {
    width: 110px;
    right: calc(12px + var(--safe-r));
    bottom: calc(54px + var(--safe-b));
  }

  /* Pre-call Screen in Landscape (2-column layout) */
  .precall-container {
    max-width: 660px;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    grid-template-rows: auto 1fr;
    gap: 8px 18px;
    align-items: center;
    padding: 0 10px;
  }
  .precall-header {
    grid-column: 1 / -1;
    text-align: left;
    margin-bottom: 0;
  }
  .precall-header h2 {
    font-size: var(--fs-title-sm);
    margin-bottom: 2px;
  }
  .precall-header p {
    font-size: var(--fs-caption);
  }
  .precall-preview-box {
    aspect-ratio: 16 / 9;
  }
  .precall-form {
    gap: 8px;
  }
  .precall-form .form-group {
    gap: 4px;
  }

  /* Lobby Screen in Landscape */
  .lobby-container {
    max-width: 520px;
    padding: 0 12px;
  }
  .lobby-brand h1 {
    font-size: var(--fs-title-lg);
    margin-bottom: 2px;
  }
  .lobby-brand p {
    font-size: var(--fs-small);
  }
  .lobby-card {
    padding: 16px 20px;
  }

  /* Transcript Panel Drawer in Landscape */
  .transcript-panel {
    width: 320px;
    max-width: 50vw;
  }

  /* Compact Stats Strip in Landscape */
  .call-stats-strip {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    box-shadow: none !important;
  }
  .call-title-group {
    max-width: calc(50% - 100px) !important;
  }
}

/* ═══ TRANSCRIPTION UI ═══ */
.quality-dot.green {
  background: var(--success);
  box-shadow: 0 0 6px rgba(0, 210, 180, 0.6);
}

.popover-badge.green {
  background: var(--success-soft);
  color: var(--success);
}

/* ═══ CUSTOM DROPDOWN (LANGUAGE SELECTOR) ═══ */
.custom-dropdown {
  position: relative;
  display: inline-block;
}

.custom-dropdown-trigger {
  box-shadow: var(--control-raised);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--surface-subtle, var(--surface-subtle));
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 8px);
  padding: 6px 12px;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  font-family: inherit;
  user-select: none;
  min-height: 32px;
}

.custom-dropdown-trigger:hover,
.custom-dropdown.is-open .custom-dropdown-trigger {
  background: var(--surface-hover, var(--surface-hover));
  border-color: transparent;
}

.custom-dropdown-trigger:focus-visible {
  border-color: var(--accent);
  box-shadow: var(--control-raised);
  outline: none;
}

.dropdown-chevron {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), color 0.15s ease;
  color: var(--text-muted);
  flex-shrink: 0;
}

.custom-dropdown.is-open .dropdown-chevron {
  transform: rotate(180deg);
  color: var(--text);
}

.custom-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 175px;
  background: var(--surface-elevated, var(--surface-elevated));
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 8px);
  padding: 4px;
  display: none;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.35);
  z-index: 150;
  animation: dropdownPop 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.custom-dropdown.is-open .custom-dropdown-menu {
  display: flex;
}

@keyframes dropdownPop {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.custom-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  transition: background-color 0.12s ease, color 0.12s ease;
  user-select: none;
  outline: none;
  font-family: inherit;
}

.custom-dropdown-item:hover,
.custom-dropdown-item:focus {
  background: var(--surface-hover, var(--surface-hover));
  color: var(--text);
}

.custom-dropdown-item.is-selected {
  color: var(--text);
  font-weight: 600;
  background: var(--surface-hover, var(--surface-hover));
}

.dropdown-item-check {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.custom-dropdown-item.is-selected .dropdown-item-check {
  opacity: 1;
}

.transcript-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 360px;
  max-width: 85vw;
  background: var(--surface);
  border-left: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  z-index: 95;
  box-shadow: none;
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}

.transcript-panel.is-open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.transcript-panel-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 0;
  background: transparent;
  flex-shrink: 0;
  min-width: 0;
}

.transcript-panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.transcript-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text);
  min-width: 0;
  flex: 1;
}

.transcript-panel-close {
  flex-shrink: 0;
}

.transcript-panel-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.transcript-panel-toggle-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.panel-transcription-toggle {
  flex-shrink: 0;
}

.panel-status-badge {
  font-size: var(--fs-caption);
  padding: 2px 7px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--surface-subtle);
  color: var(--text-muted);
}

.transcript-panel-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
}

.btn-panel-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  outline: none;
  transition: color 0.15s ease, opacity 0.15s ease;
}
.btn-panel-copy:hover:not(:disabled) {
  color: var(--text);
}
.btn-panel-copy:focus-visible,
.panel-lang-trigger:focus-visible,
.panel-model-trigger:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.panel-lang-trigger:focus-visible,
.panel-model-trigger:focus-visible {
  border-color: transparent !important;
  box-shadow: none !important;
}
.btn-panel-copy:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}
.btn-panel-copy.copied {
  color: var(--success);
}

.panel-lang-dropdown,
.panel-model-dropdown {
  position: relative;
}

.panel-lang-trigger,
.panel-model-trigger {
  height: 28px !important;
  padding: 0 8px !important;
  font-size: var(--fs-caption) !important;
  font-weight: 500 !important;
  gap: 5px !important;
  border-radius: 6px !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--text-muted) !important;
}

.panel-lang-trigger:hover,
.panel-model-trigger:hover {
  color: var(--text) !important;
}

.panel-lang-dropdown .custom-dropdown-menu,
.panel-model-dropdown .custom-dropdown-menu {
  background: var(--surface-elevated);
  border: 0;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.38);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.panel-lang-dropdown .custom-dropdown-item:hover,
.panel-lang-dropdown .custom-dropdown-item:focus,
.panel-lang-dropdown .custom-dropdown-item.is-selected,
.panel-model-dropdown .custom-dropdown-item:hover,
.panel-model-dropdown .custom-dropdown-item:focus,
.panel-model-dropdown .custom-dropdown-item.is-selected {
  background: #303030;
}

.panel-lang-dropdown .dropdown-item-check,
.panel-model-dropdown .dropdown-item-check {
  stroke: var(--text-muted);
}

.panel-lang-dropdown .custom-dropdown-menu,
.panel-model-dropdown .custom-dropdown-menu {
  right: 0 !important;
  left: auto !important;
  min-width: 150px !important;
}

.panel-model-dropdown .custom-dropdown-menu {
  min-width: 175px !important;
}

.transcript-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--fill-4) transparent;
}

.transcript-empty-notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: var(--fs-small);
  text-align: center;
  margin-top: 48px;
  padding: 0 16px;
}

.transcript-empty-icon .icon {
  opacity: 0.35;
}

.transcript-empty-text {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--text-muted);
}

.transcript-empty-hint {
  font-size: var(--fs-caption);
  line-height: 1.45;
  color: var(--text-dim);
  max-width: 240px;
}

.transcript-item {
  display: grid;
  grid-template-columns: 36px 1fr;
  column-gap: 8px;
  align-items: baseline;
  padding: 3px 4px;
  border-radius: 4px;
  background: transparent;
  border: none;
  transition: background-color 0.12s ease;
}

.transcript-item:hover {
  background: var(--fill-1);
}

.transcript-item.is-partial {
  opacity: 0.75;
}

.transcript-time {
  font-size: var(--fs-caption);
  color: var(--text-dim);
  font-family: var(--font-mono, monospace);
  font-variant-numeric: tabular-nums;
  user-select: none;
  white-space: nowrap;
  line-height: 1.45;
}

.transcript-content {
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--text);
  word-break: break-word;
}

.transcript-speaker {
  display: none !important;
}

.transcript-speaker-name {
  display: block;
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.transcript-text {
  color: var(--text);
}

.transcript-text.partial-text {
  color: var(--text-muted);
  font-style: italic;
}

/* ═══ TRANSCRIPTION DOWNLOAD MODAL ═══ */
.download-modal-sheet {
  max-width: 440px !important;
  width: calc(100% - 32px) !important;
  box-sizing: border-box;
}

.download-modal-desc {
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: 1.5;
  margin: 4px 0 16px;
}

.download-progress-wrap {
  width: 100%;
  height: 6px;
  background: var(--fill-2);
  border-radius: 3px;
  overflow: hidden;
  margin: 14px 0 10px;
}

.download-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.download-status-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 24px;
  margin-bottom: 12px;
}

.download-status-title {
  font-size: var(--fs-small);
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.download-status-sub {
  font-size: var(--fs-caption);
  font-family: var(--font-mono, monospace);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  margin-left: 8px;
}

.download-modal-bg-btn {
  width: 100%;
  margin-top: 4px;
  font-size: var(--fs-small);
}

.download-modal-bg-hint {
  font-size: var(--fs-small);
  color: var(--text-dim);
  line-height: 1.45;
  margin: 6px 0 10px;
  text-align: center;
}

/* Transcription Badge Background Downloading State */
.transcription-badge.is-downloading {
  cursor: pointer;
  background: var(--warning-soft) !important;
  border: 1px solid transparent !important;
  color: var(--warning) !important;
}

.transcription-badge.is-downloading:hover {
  background: rgba(255, 214, 10, 0.18) !important;
}

.quality-dot.pulse {
  animation: dotPulse 1.5s infinite;
}

@keyframes dotPulse {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

/* ═══ MOBILE PORTRAIT & GENERAL NARROW SCREENS (<= 640px) ═══ */
@media (max-width: 640px) {
  /* Screen 1: Lobby */
  .lobby-card {
    padding: 22px 18px;
    width: 100%;
    max-width: min(400px, calc(100vw - 32px));
    margin: 0 auto;
    border-radius: var(--radius-lg, 16px);
    gap: 16px;
  }
  .lobby-actions {
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
  }
  .lobby-actions .btn {
    height: 52px;
    min-height: 52px;
    padding: 0 16px;
    font-size: var(--fs-base);
    font-weight: 600;
    justify-content: flex-start;
    gap: 10px;
    border-radius: var(--radius, 12px);
  }
  .lobby-actions .btn span {
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    font-size: var(--fs-base);
    font-weight: 600;
  }
  .lobby-actions .btn .btn-badge-sub {
    margin-left: auto;
    font-size: var(--fs-caption);
    font-weight: 700;
    padding: 3px 8px;
    border-radius: var(--radius-full);
  }
  .join-row {
    display: flex;
    gap: 8px;
    width: 100%;
  }
  .join-row input {
    height: 48px;
    min-width: 0;
    flex: 1;
    font-size: var(--fs-body);
    padding: 0 14px;
  }
  .join-row .btn {
    height: 48px;
    padding: 0 18px;
    font-size: var(--fs-body);
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Screen 2: Pre-call */
  .precall-container {
    width: 100%;
    max-width: min(420px, calc(100vw - 24px));
    margin: auto;
    padding: calc(12px + var(--safe-t)) 0 calc(16px + var(--safe-b));
    gap: 14px;
  }
  .precall-header h2 {
    font-size: var(--fs-title);
    font-weight: 700;
    margin-bottom: 2px;
  }
  .precall-header p {
    font-size: var(--fs-small);
  }
  .precall-preview-box {
    aspect-ratio: 4 / 3;
    max-height: 40vh;
    border-radius: var(--radius-lg, 16px);
  }
  .precall-form {
    padding: 20px 16px;
    border-radius: var(--radius-lg, 16px);
    gap: 14px;
  }
  .precall-form #btnStartCall {
    width: 100%;
    min-height: 48px;
    font-size: var(--fs-base);
    font-weight: 600;
    text-align: center;
    justify-content: center;
    padding: 12px 16px;
    white-space: normal;
    line-height: 1.25;
    border-radius: var(--radius, 12px);
  }
  .precall-form #btnPrecallBack {
    width: 100%;
    min-height: 44px;
    font-size: var(--fs-body);
    justify-content: center;
    border-radius: var(--radius, 12px);
  }

  /* Screen 3: Call Screen */
  .call-top-bar {
    padding: calc(8px + var(--safe-t)) calc(12px + var(--safe-r)) 8px calc(12px + var(--safe-l));
  }
  .call-title-group {
    max-width: calc(100% - 104px);
    gap: 8px;
  }
  .call-title {
    font-size: var(--fs-body);
    max-width: none;
  }
  .call-timer {
    font-size: var(--fs-small);
  }
  .call-stats-strip {
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(18, 18, 18, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    padding: 2px 4px;
  }
  .stat-cell {
    padding: 3px 8px;
  }
  .stat-cell-val {
    font-size: var(--fs-caption);
  }
  .remote-placeholder {
    padding: 0 16px 90px;
    text-align: center;
  }
  .quickcall-pip-stack {
    width: clamp(96px, 26vw, 116px);
    right: 12px;
    bottom: calc(76px + var(--safe-b));
    border-radius: 12px;
  }
  .call-bottom-bar {
    gap: clamp(6px, 2vw, 12px);
    padding: 10px calc(12px + var(--safe-r)) calc(10px + var(--safe-b)) calc(12px + var(--safe-l));
  }
  .call-bottom-bar .btn-icon {
    width: clamp(42px, 11.5vw, 48px);
    height: clamp(42px, 11.5vw, 48px);
    min-width: clamp(42px, 11.5vw, 48px);
  }
  .call-bottom-bar .btn-icon.danger {
    width: clamp(48px, 13vw, 56px);
  }

  /* Right Drawer */
  .transcript-panel {
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.7);
  }
  .transcript-panel-close {
    display: none !important;
  }

  /* Modals */
  .modal-sheet {
    width: 100%;
    max-width: min(420px, calc(100vw - 24px));
    padding: 20px 16px;
    border-radius: var(--radius-lg, 16px);
  }
}

/* ═══ TRANSCRIPT PANEL: header layout (2026-10) ═══ */
.transcript-panel { width: 400px; }
.transcript-panel-header { gap: 14px; padding: 16px 16px 12px; border-bottom: 1px solid var(--border, transparent); }
.transcript-panel-title { font-size: var(--fs-base); letter-spacing: -0.01em; }
.transcript-panel-tools { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.transcript-panel-tools .btn-panel-copy,
.transcript-panel-close { width: 32px; height: 32px; border-radius: 8px; }
.transcript-panel-tools .btn-panel-copy:hover:not(:disabled),
.transcript-panel-close:hover { background: var(--fill-2); }
.transcript-panel-controls { flex-direction: column; align-items: stretch; gap: 10px; }
.transcript-panel-toggle-group { gap: 10px; width: 100%; }
.panel-toggle-label { font-size: var(--fs-small); font-weight: 500; color: var(--text); margin-right: auto; }
.panel-status-badge { font-size: var(--fs-caption); padding: 3px 9px; border-radius: 999px; }
.transcript-panel-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-left: 0; width: 100%; }
.transcript-panel-actions .custom-dropdown { min-width: 0; }
.transcript-panel-actions .custom-dropdown-trigger { width: 100%; height: 34px !important; justify-content: flex-start; gap: 8px; padding: 0 10px !important; font-size: var(--fs-small) !important; background: var(--fill-1); border-radius: 8px; }
.transcript-panel-actions .custom-dropdown-trigger > span:nth-child(2) { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.transcript-panel-actions .custom-dropdown-menu { min-width: 100%; width: max-content; max-width: 320px; }
.transcript-item { grid-template-columns: 44px 1fr; padding: 6px 8px; }
.transcript-speaker-name { font-size: var(--fs-caption); color: var(--accent-hover); margin-bottom: 3px; }
.transcript-content { font-size: var(--fs-body); line-height: 1.5; }
.transcript-time { padding-top: 2px; }
@media (max-width: 480px) { .transcript-panel { width: 100%; max-width: 100%; } }

/* Compact transcript controls: model name + language glyph only */
.transcript-panel-actions { grid-template-columns: minmax(0, 1fr) auto; }
.transcript-panel-actions .panel-lang-trigger { width: 40px; padding: 0 !important; justify-content: center; }
.panel-lang-trigger .dropdown-chevron { display: none; }
.panel-lang-trigger .icon { width: 16px !important; height: 16px !important; }
.panel-lang-dropdown .custom-dropdown-menu { right: 0; left: auto; }

/* ═══ LOBBY: symmetric layout (2026-10) ═══ */
#screenLobby .lobby-container { max-width: 560px; gap: 28px; align-items: stretch; }
#screenLobby .lobby-brand { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
#screenLobby .lobby-brand h1 { flex-direction: column; gap: 14px; font-size: var(--fs-display); }
#screenLobby .brand-mark { width: 56px; height: 56px; }
#screenLobby .lobby-tagline { margin: 0; font-size: var(--fs-base); color: var(--text-muted); }
#screenLobby .lobby-card { max-width: none; width: 100%; margin: 0; padding: 28px; gap: 24px; border-radius: 20px; }
#screenLobby .lobby-actions { grid-template-columns: 1fr 1fr; gap: 12px; }
#screenLobby .lobby-actions .btn { height: 56px; min-height: 56px; padding: 0 16px; justify-content: center; gap: 10px; font-size: var(--fs-base); font-weight: 600; }
#screenLobby .lobby-actions .btn .btn-badge-sub { margin-left: 2px; }
#screenLobby .lobby-divider-text { margin: 0; }
#screenLobby .lobby-join-section { gap: 12px; }
#screenLobby .join-row { display: grid; grid-template-columns: 1fr 120px; gap: 12px; width: 100%; }
#screenLobby .join-row input,
#screenLobby .join-row .btn { height: 52px; min-height: 52px; box-sizing: border-box; }
#screenLobby .lobby-footer { display: flex; flex-direction: column; align-items: center; gap: 16px; }
#screenLobby .lobby-footer-tools { margin: 0; gap: 12px; }
#screenLobby .lobby-footer-tools > * { min-width: 176px; justify-content: center; }
#screenLobby .lobby-topbar { justify-content: center; margin: 0; width: auto; }
@media (max-width: 480px) {
  #screenLobby .lobby-card { padding: 20px; gap: 20px; }
  #screenLobby .lobby-actions { grid-template-columns: 1fr; }
  #screenLobby .join-row { grid-template-columns: 1fr 96px; }
  #screenLobby .lobby-footer-tools { flex-direction: column; width: 100%; }
  #screenLobby .lobby-footer-tools > * { width: 100%; }
}
/* Server recognition agent active: browser model controls do not apply */
.transcript-panel.is-server-asr .transcript-panel-actions { display: none; }
.transcript-panel.is-server-asr .transcript-panel-toggle-group { justify-content: flex-start; }
/* Recognition mode not known yet: show neither browser controls nor the old hint */
.transcript-panel.is-asr-pending .transcript-panel-controls,
.transcript-panel.is-asr-pending .transcript-empty-notice { visibility: hidden; }
/* Russian-only product: no language switching */
#panelLangDropdown, #rowTranscriptionLang { display: none !important; }
.transcript-panel-actions { grid-template-columns: minmax(0, 1fr); }

/* ═══ POST-CALL (2026-10) ═══ */
#screenPostcall .postcall-card { width: min(720px, calc(100vw - 32px)); max-width: none; padding: 28px; gap: 24px; align-items: stretch; text-align: left; }
#screenPostcall .postcall-head { display: flex; align-items: center; gap: 16px; }
#screenPostcall .postcall-icon { width: 48px; height: 48px; margin: 0; flex-shrink: 0; }
#screenPostcall .postcall-head-text { display: grid; gap: 8px; min-width: 0; }
#screenPostcall .postcall-title { margin: 0; font-size: var(--fs-title); letter-spacing: -0.02em; text-align: left; }
#screenPostcall .postcall-meta { display: flex; flex-wrap: wrap; gap: 8px; }
#screenPostcall .postcall-room,
#screenPostcall .postcall-duration { margin: 0; font-family: inherit; font-size: var(--fs-small); font-weight: 500; line-height: 1; letter-spacing: 0; color: var(--text-muted); background: var(--surface-subtle); border: 1px solid transparent; border-radius: 999px; padding: 6px 10px; }
#screenPostcall .postcall-transcript-box { gap: 14px; padding: 0; border: 0; background: transparent; }
#screenPostcall .postcall-transcript-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 0; border: 0; }
#screenPostcall .postcall-transcript-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#screenPostcall .postcall-transcript-actions .btn-sm { height: 32px; }
#screenPostcall .postcall-download { display: inline-flex; align-items: center; height: 32px; border: 1px solid transparent; border-radius: 8px; overflow: hidden; background: var(--surface-subtle); }
#screenPostcall .postcall-download-label { display: inline-flex; align-items: center; gap: 6px; height: 100%; padding: 0 10px; font-size: var(--fs-small); color: var(--text-muted); border-right: 1px solid transparent; }
#screenPostcall .postcall-download-btn { height: 100%; padding: 0 10px; font-family: inherit; font-size: var(--fs-caption); font-weight: 600; color: var(--text); background: transparent; border: 0; border-right: 1px solid transparent; cursor: pointer; transition: background-color .15s ease; }
#screenPostcall .postcall-download-btn:last-child { border-right: 0; }
#screenPostcall .postcall-download-btn:hover { background: var(--fill-2); }
#screenPostcall .postcall-download-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#screenPostcall .postcall-transcript-preview { max-height: min(52vh, 520px); padding: 4px 16px; border-radius: 12px; border: 1px solid transparent; background: var(--inset); }
#screenPostcall .postcall-transcript-preview .transcript-list { display: block; padding: 0; }
.postcall-turn { padding: 14px 0; border-bottom: 1px solid transparent; }
.postcall-turn:last-child { border-bottom: 0; }
.postcall-turn-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.postcall-turn-name { font-size: var(--fs-small); font-weight: 600; color: var(--accent-hover); }
.postcall-turn-time { font-family: var(--font-mono, monospace); font-size: var(--fs-caption); color: var(--text-dim); font-variant-numeric: tabular-nums; }
.postcall-turn-text { margin: 0 0 4px; font-size: var(--fs-body); line-height: 1.6; color: var(--text); }
#screenPostcall .postcall-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
#screenPostcall .postcall-actions .btn { height: 48px; width: 100%; }
@media (max-width: 560px) {
  #screenPostcall .postcall-card { padding: 20px; }
  #screenPostcall .postcall-actions { grid-template-columns: 1fr; }
}

/* ═══ POST-CALL v2: compact rows, concentric radii ═══
   Concentric rule: inner radius = outer radius − distance between edges
   (card 28 − padding 20 = 8 for every surface placed on the card). */
#screenPostcall .postcall-card { --pc-radius: 28px; --pc-pad: 20px; --pc-inner: calc(var(--pc-radius) - var(--pc-pad)); border-radius: var(--pc-radius); padding: var(--pc-pad); gap: 16px; }
#screenPostcall .postcall-head { display: flex; align-items: center; gap: 10px; min-height: 36px; }
#screenPostcall .postcall-icon { width: 36px; height: 36px; border-radius: var(--pc-inner); }
#screenPostcall .postcall-title { font-size: var(--fs-title-sm); flex: 1; min-width: 0; }
#screenPostcall .postcall-meta { display: flex; gap: 6px; margin-left: auto; }
#screenPostcall .postcall-room,
#screenPostcall .postcall-duration { padding: 7px 10px; border-radius: 999px; }
#screenPostcall .postcall-transcript-box { gap: 10px; }
#screenPostcall .postcall-transcript-header { gap: 10px; }
#screenPostcall .postcall-transcript-title { font-size: var(--fs-body); }
#screenPostcall .postcall-download { height: 32px; border-radius: var(--pc-inner); }
#screenPostcall .postcall-copy-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; }
#screenPostcall .postcall-download-label { padding: 0 8px 0 10px; }
#screenPostcall .postcall-transcript-preview { border-radius: var(--pc-inner); padding: 6px 14px; max-height: min(56vh, 560px); }
#screenPostcall .postcall-actions { gap: 10px; }
#screenPostcall .postcall-actions .btn { height: 44px; border-radius: var(--pc-inner); }
/* Dense transcript: a turn is a name line and the text right under it, no dividers. */
.postcall-turn { padding: 6px 0; border-bottom: 0; }
.postcall-turn-head { margin-bottom: 1px; gap: 8px; }
.postcall-turn-name { font-size: var(--fs-small); }
.postcall-turn-text { margin: 0; font-size: var(--fs-body); line-height: 1.5; }
@media (max-width: 560px) {
  #screenPostcall .postcall-card { --pc-radius: 24px; --pc-pad: 16px; }
  #screenPostcall .postcall-head { flex-wrap: wrap; }
  #screenPostcall .postcall-meta { width: 100%; margin-left: 46px; }
}
/* Toolbar segments: square inner edges, straight dividers; copy keeps one width for both labels */
#screenPostcall .postcall-download > * { border-radius: 0; height: 100%; margin: 0; box-shadow: none; }
#screenPostcall .postcall-copy-btn { width: 136px; justify-content: center; }
#screenPostcall .postcall-transcript-preview { max-height: min(66vh, 720px); }

/* Post-call transcript v3: fixed tall scroll area, one line per phrase */
#screenPostcall .postcall-transcript-preview { height: min(42vh, 460px); max-height: none; overflow-y: auto; overscroll-behavior: contain; padding: 8px 12px; }
.postcall-line { display: grid; grid-template-columns: 40px 104px minmax(0, 1fr); column-gap: 10px; align-items: baseline; padding: 3px 0; }
.postcall-line.is-new-speaker { margin-top: 6px; }
.postcall-line:first-child { margin-top: 0; }
.postcall-line-time { font-family: var(--font-mono, monospace); font-size: var(--fs-caption); color: var(--text-dim); font-variant-numeric: tabular-nums; }
.postcall-line-name { font-size: var(--fs-small); font-weight: 600; color: var(--accent-hover); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.postcall-line-text { font-size: var(--fs-body); line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .postcall-line { grid-template-columns: 36px 72px minmax(0, 1fr); column-gap: 8px; }
}

/* ═══ RECONNECT DIALOG (2026-10): concentric radii, card 28 − padding 20 = 8 ═══ */
.reconnect-overlay .reconnect-card { --rc-radius: 28px; --rc-pad: 20px; width: min(400px, calc(100vw - 32px)); padding: var(--rc-pad); border-radius: var(--rc-radius); background: var(--surface); border: 1px solid transparent; box-shadow: 0 24px 64px rgba(0,0,0,0.6); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.reconnect-overlay .reconnect-spinner { margin-bottom: 8px; }
.reconnect-overlay .reconnect-icon { width: 48px; height: 48px; margin-bottom: 8px; display: grid; place-items: center; border-radius: 999px; color: var(--danger); background: var(--danger-soft); }
.reconnect-overlay .reconnect-icon[hidden] { display: none; }
.reconnect-overlay .reconnect-title { margin: 0; font-size: var(--fs-title-sm); font-weight: 600; letter-spacing: -0.01em; }
.reconnect-overlay .reconnect-hint { margin: 0; font-size: var(--fs-small); color: var(--text-muted); }
.reconnect-overlay .reconnect-actions { width: 100%; margin-top: 16px; grid-template-columns: 1fr 1fr; gap: 10px; }
.reconnect-overlay .reconnect-actions .btn { height: 44px; width: 100%; justify-content: center; border-radius: calc(var(--rc-radius) - var(--rc-pad)); }

/* Server recognition is catching up: amber pill with a soft pulse */
.panel-status-badge.is-processing { color: var(--warning); background: var(--warning-soft); animation: wc-processing 1.6s ease-in-out infinite; }
@keyframes wc-processing { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .panel-status-badge.is-processing { animation: none; } }

/* Post-call without a transcript: compact centered summary card (same radii system 28 / 20 / 8) */
#screenPostcall .postcall-card:not(.has-transcript) { width: min(440px, calc(100vw - 32px)); align-items: center; text-align: center; gap: 20px; padding: 28px var(--pc-pad) var(--pc-pad); }
#screenPostcall .postcall-card:not(.has-transcript) .postcall-head { flex-direction: column; gap: 12px; }
#screenPostcall .postcall-card:not(.has-transcript) .postcall-icon { width: 56px; height: 56px; border-radius: 16px; }
#screenPostcall .postcall-card:not(.has-transcript) .postcall-title { flex: none; font-size: var(--fs-title); text-align: center; }
#screenPostcall .postcall-card:not(.has-transcript) .postcall-meta { margin: 0; justify-content: center; }
#screenPostcall .postcall-card:not(.has-transcript) .postcall-actions { width: 100%; }
#screenPostcall .postcall-empty-note { margin: -4px 0 0; max-width: 340px; font-size: var(--fs-small); line-height: 1.5; color: var(--text-muted); }
#screenPostcall .postcall-card.has-transcript .postcall-empty-note { display: none; }

/* Brand: the logo is a wide mark (≈1.57:1); height drives the size */
.brand-mark,
#screenLobby .brand-mark { width: auto; height: 40px; filter: drop-shadow(0 6px 18px rgba(108, 92, 231, 0.35)); }
#screenLobby .lobby-brand h1,
#screenAuth .lobby-brand h1 { gap: 16px; }

/* Quick call: waiting for the other person -> full-screen mirrored self preview with a status pill */
.remote-main-tile.is-self-preview video { transform: scaleX(-1); object-fit: contain; }
.remote-main-tile.is-self-preview .remote-placeholder { background: linear-gradient(to top, rgba(0,0,0,0.55), transparent 38%); justify-content: flex-end; padding-bottom: 28px; gap: 10px; }
.remote-main-tile.is-self-preview .avatar-circle { display: none; }
.remote-main-tile.is-self-preview #remotePlaceholderName { padding: 7px 14px; border-radius: 999px; background: rgba(0,0,0,0.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--on-accent) !important; font-size: var(--fs-small); }
.remote-main-tile.is-self-preview .quick-invite-btn { margin-top: 0; background: rgba(0,0,0,0.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--on-accent); }
.quickcall-pip-stack.is-hidden-by-preview { display: none !important; }
/* Presenting own screen: calm placeholder, accent icon */
.remote-main-tile.is-presenting .avatar-circle { color: var(--accent-hover); background: var(--accent-soft); }
/* The invite button belongs only to the waiting state */
.remote-main-tile:not(.is-waiting) .quick-invite-btn { display: none; }

/* Second thumbnail: the other person's camera while you present */
.pip-remote-tile[hidden] { display: none; }
.pip-remote-tile { display: grid; place-items: center; background: var(--surface); }
.pip-remote-tile video { position: absolute; inset: 0; }
.pip-remote-initial { font-size: var(--fs-title); font-weight: 700; color: var(--text-muted); }
/* Rule: a video stream is always shown whole (letterboxed), never cropped */
.precall-preview-box video, .meeting-tile video { background: #000; }

/* Lobby/auth brand v2: smaller mark, more air above and below the brand block */
#screenLobby .lobby-container, #screenAuth .lobby-container { gap: 44px; }
#screenLobby .lobby-brand, #screenAuth .lobby-brand { gap: 12px; }
#screenLobby .lobby-brand h1, #screenAuth .lobby-brand h1 { gap: 20px; }
#screenLobby .brand-mark, #screenAuth .brand-mark, .brand-mark { height: 32px; }
/* Waiting label sits on the video without a plate; the invite button carries the copy icon */
.remote-main-tile.is-self-preview #remotePlaceholderName { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; text-shadow: 0 1px 6px rgba(0,0,0,0.7); }
.quick-invite-btn { gap: 8px; }
.quick-invite-btn .icon { width: 15px; height: 15px; }

/* ═══ POST-CALL SUMMARY (same radii system: card 28 / 20 → inner 8) ═══ */
#screenPostcall .postcall-summary { display: grid; gap: 10px; }
#screenPostcall .postcall-summary[hidden] { display: none; }
.postcall-summary-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.postcall-summary-actions { display: flex; gap: 8px; }
.postcall-summary-actions .btn { height: 32px; min-height: 32px; padding: 0 12px; font-size: var(--fs-small); border-radius: 8px; }
.postcall-summary-actions .btn .icon { width: 14px; height: 14px; }
.postcall-summary-body { border-radius: 8px; border: 1px solid transparent; background: var(--inset); padding: 12px 14px; max-height: min(42vh, 460px); overflow-y: auto; }
.postcall-summary-hint { margin: 0; font-size: var(--fs-small); color: var(--text-muted); }
.postcall-summary-error { margin: 0; font-size: var(--fs-small); color: var(--danger); }
.postcall-summary-section { margin: 12px 0 4px; font-size: var(--fs-caption); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.postcall-summary-section:first-child { margin-top: 0; }
.postcall-summary-text { margin: 0; font-size: var(--fs-body); line-height: 1.55; }
.postcall-summary-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: var(--fs-body); line-height: 1.5; }
.postcall-summary-list li { display: list-item; }
.postcall-summary-meta { display: block; font-size: var(--fs-caption); color: var(--text-muted); }

/* Summary sending row */
#screenPostcall .postcall-deliver { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#screenPostcall .postcall-deliver[hidden] { display: none; }
.postcall-deliver-check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--text); cursor: pointer; }
.postcall-deliver-check[hidden], .postcall-deliver-emails[hidden] { display: none; }
.postcall-deliver-check input { accent-color: var(--accent); width: 16px; height: 16px; }
.postcall-deliver-emails { flex: 1 1 220px; min-width: 0; height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid transparent; background: var(--surface-subtle); color: var(--text); font: inherit; font-size: var(--fs-small); }
.postcall-deliver-emails:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#btnPostcallDeliver { height: 32px; min-height: 32px; padding: 0 12px; font-size: var(--fs-small); border-radius: 8px; }
#btnPostcallDeliver .icon { width: 14px; height: 14px; }
.postcall-deliver-status { flex-basis: 100%; margin: 0; font-size: var(--fs-small); color: var(--text-muted); }
.postcall-deliver-status:empty { display: none; }

/* ═══ v2 base typography and theme-aware details ═══ */
html, body { font-size: var(--fs-base); line-height: var(--lh-base); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4 { font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); color: var(--text); }
.transcript-time, .postcall-line-time, .postcall-turn-time, [class*="-time"] { font-variant-numeric: tabular-nums; }
:focus-visible { outline-color: var(--focus-ring); }
/* Cards rely on elevation, not lines */
.lobby-card, #screenPostcall .postcall-card, .reconnect-overlay .reconnect-card { box-shadow: var(--shadow-3), inset 0 1px 0 var(--highlight); }
/* Accent used as text (names, links) keeps contrast in both themes */
.postcall-line-name, .postcall-turn-name, .transcript-speaker-name, .text-accent { color: var(--accent-text); }
/* Light theme: video stays on black, overlays on video keep light text */
:root[data-theme="light"] .remote-main-tile, :root[data-theme="light"] .pip-sub-tile, :root[data-theme="light"] .meeting-tile { background: #0b0b0d; }
:root[data-theme="light"] .lobby-brand h1 { color: var(--text); }

/* Theme switch */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-full); border: 0; background: var(--fill-2); color: var(--text-muted); cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.theme-toggle:hover { background: var(--fill-3); color: var(--text); }
.theme-toggle .icon { width: 16px; height: 16px; }
#screenLobby .lobby-footer { flex-direction: row; justify-content: center; gap: 10px; }

/* The call screen is a stage for video: it stays dark in both themes (as in most meeting apps). */
:root[data-theme="light"] #screenCall,
:root[data-theme="light"]:has(#screenCall.is-active) .modal-backdrop {
  color-scheme: dark;
  --bg: #0b0b0d;
  --surface: #151518;
  --surface-elevated: #1c1c21;
  --surface-subtle: #24242a;
  --surface-hover: #2c2c33;
  --fill-1: rgba(255, 255, 255, 0.035);
  --fill-2: rgba(255, 255, 255, 0.065);
  --fill-3: rgba(255, 255, 255, 0.10);
  --fill-4: rgba(255, 255, 255, 0.16);
  --highlight: rgba(255, 255, 255, 0.05);   /* top inner light on raised cards */
  --inset: #0d0d10;                         /* recessed content areas: transcript, summary; clearly below the card */
  --text: #f1f1f4;
  --text-muted: #a8a8b3;
  --text-dim: #7c7c88;
  --on-accent: #ffffff;
  --accent: #6c5ce7;
  --accent-hover: #7b6cf0;
  --accent-active: #5b4bd8;
  --accent-soft: rgba(108, 92, 231, 0.18);
  --accent-text: #a99dff;          /* accent as text on surfaces */
  --danger: #e5484d;
  --danger-hover: #d93f44;
  --danger-active: #c2343a;
  --danger-soft: rgba(229, 72, 77, 0.16);
  --success: #2fcfa8;
  --success-hover: #3ddcb4;
  --success-active: #24b893;
  --success-soft: rgba(47, 207, 168, 0.14);
  --success-border: transparent;
  --warning: #f5b544;
  --warning-soft: rgba(245, 181, 68, 0.14);
  --focus-ring: rgba(169, 157, 255, 0.65);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.45);
  --scrim: rgba(0, 0, 0, 0.6);
  background: var(--bg);
  color: var(--text);
}

/* ═══ Call settings menu v2: elevation, aligned rows, quiet controls ═══ */
.popover-bubble { box-shadow: var(--shadow-3) !important; padding: 14px 10px 10px !important; gap: 6px; border-radius: 20px !important; }
.popover-header { padding: 0 8px 4px 12px; }
.popover-title { font-size: var(--fs-title-sm); line-height: var(--lh-title-sm); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); }
.popover-close-btn { width: 32px; height: 32px; border-radius: var(--radius-full); color: var(--text-muted); }
.popover-close-btn:hover { background: var(--fill-2); color: var(--text); }
.popover-menu-list { gap: 2px; }
.popover-row-btn, .popover-row-toggle { min-height: 48px; padding: 8px 10px 8px 12px; border-radius: 12px; font-size: var(--fs-base); line-height: var(--lh-base); font-weight: var(--fw-medium); }
.popover-row-btn:hover, .popover-row-toggle:hover { background: var(--fill-1); }
.popover-row-left { gap: 12px; min-width: 0; }
.popover-row-left > .icon { width: 20px; height: 20px; color: var(--text-muted); flex-shrink: 0; }
.popover-row-label { display: flex; flex-direction: column; min-width: 0; }
.popover-row-sub { font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--fw-medium); color: var(--text-dim); }
.popover-row-sub.is-on { color: var(--success); }
.popover-badge { min-width: 24px; height: 24px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: var(--fill-2); color: var(--text-muted); font-size: var(--fs-caption); }
.btn-icon-quiet { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: transparent; color: var(--text-dim); }
.btn-icon-quiet:hover { background: var(--fill-2); color: var(--text); }
.btn-icon-quiet .icon { width: 18px; height: 18px; }
#menuItemShare > .icon { color: var(--text-dim); }

/* Participants list */
.participant-name { font-weight: var(--fw-semibold); }
.participant-tag.is-host { color: var(--accent-text); }
.participant-media { display: flex; gap: 10px; align-items: center; }
.participant-media .icon { width: 16px; height: 16px; color: var(--text-muted); }
.participant-media .icon.is-off { color: var(--danger); }

/* Screen share switcher: appears when several people share at once */
.screen-switcher { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 15; display: flex; gap: 4px; padding: 4px; max-width: calc(100% - 32px); overflow-x: auto; border-radius: var(--radius-full); background: rgba(11, 11, 13, 0.72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: var(--shadow-2); }
.screen-switcher[hidden] { display: none; }
.screen-switcher-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--text-muted); font: inherit; font-size: var(--fs-small); font-weight: var(--fw-medium); white-space: nowrap; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.screen-switcher-btn:hover { background: var(--fill-2); color: var(--text); }
.screen-switcher-btn.is-active { background: var(--fill-3); color: var(--text); }
.screen-switcher-btn .icon { width: 14px; height: 14px; }

/* Time columns fit times past one hour (1:11:20) instead of running into the text */
.transcript-item { grid-template-columns: minmax(44px, max-content) minmax(0, 1fr); }
.postcall-line { grid-template-columns: minmax(40px, max-content) 104px minmax(0, 1fr); }
@media (max-width: 560px) { .postcall-line { grid-template-columns: minmax(36px, max-content) 72px minmax(0, 1fr); } }
.transcript-time, .postcall-line-time, .postcall-turn-time { font-family: inherit; }

/* Post-call v3: compact summary. On wide screens the summary and the transcript sit side by side,
   each scrolling inside one screen of height, so the page itself does not grow with the meeting. */
.postcall-summary-group { margin-top: 10px; }
.postcall-summary-group > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font-size: var(--fs-small); font-weight: 600; color: var(--text); padding: 4px 0; }
.postcall-summary-group > summary::-webkit-details-marker { display: none; }
.postcall-summary-group > summary::before { content: ''; width: 6px; height: 6px; border-right: 2px solid var(--text-dim); border-bottom: 2px solid var(--text-dim); transform: rotate(-45deg); transition: transform .15s ease; margin-right: 2px; }
.postcall-summary-group[open] > summary::before { transform: rotate(45deg); }
.postcall-summary-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-full); background: var(--fill-2); color: var(--text-muted); font-size: var(--fs-caption); display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.postcall-summary-group .postcall-summary-list { margin-top: 4px; }
@media (min-width: 1100px) {
  #screenPostcall .postcall-card.has-transcript:has(#postcallSummary:not([hidden])) {
    width: min(1240px, calc(100vw - 48px));
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-areas: "head head" "summary transcript" "summary quality" "actions actions";
    align-items: start;
  }
  #screenPostcall .postcall-card.has-transcript:has(#postcallSummary:not([hidden])) .postcall-head { grid-area: head; }
  #screenPostcall .postcall-card.has-transcript:has(#postcallSummary:not([hidden])) .postcall-summary { grid-area: summary; }
  #screenPostcall .postcall-card.has-transcript:has(#postcallSummary:not([hidden])) .postcall-transcript-box { grid-area: transcript; }
  #screenPostcall .postcall-card.has-transcript:has(#postcallSummary:not([hidden])) .postcall-quality-card { grid-area: quality; }
  #screenPostcall .postcall-card.has-transcript:has(#postcallSummary:not([hidden])) .postcall-actions { grid-area: actions; }
  #screenPostcall .postcall-card.has-transcript:has(#postcallSummary:not([hidden])) .postcall-summary-body { max-height: calc(100svh - 300px); }
  #screenPostcall .postcall-card.has-transcript:has(#postcallSummary:not([hidden])) .postcall-transcript-preview { height: calc(100svh - 300px); }
}

#screenPostcall .postcall-transcript-preview { height: min(30vh, 320px); }
#screenPostcall .postcall-summary-body { max-height: min(34vh, 360px); }
@media (min-width: 1100px) {
  #screenPostcall .postcall-card.has-transcript:has(#postcallSummary:not([hidden])) .postcall-summary-body { max-height: min(52vh, 520px); }
  #screenPostcall .postcall-card.has-transcript:has(#postcallSummary:not([hidden])) .postcall-transcript-preview { height: min(52vh, 520px); }
}

#screenPostcall .postcall-copy-btn { white-space: nowrap; width: auto; min-width: 200px; }  /* fits both labels, no jump on «Скопировано!» */
#screenPostcall .postcall-transcript-header { flex-wrap: wrap; row-gap: 8px; }
@media (min-width: 1100px) {
  #screenPostcall .postcall-card.has-transcript:has(#postcallSummary:not([hidden])) .postcall-transcript-header { flex-direction: column; align-items: flex-start; }
}

/* ═══ Post-call v4: two panels built the same way ═══
   Header: title + count left, the panel's own actions right. Body: one inset box with a thin scrollbar.
   On wide screens the two boxes share one height, so the panels line up. */
#screenPostcall .postcall-transcript-header,
#screenPostcall .postcall-summary-header { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; padding: 0; margin: 0; }
#screenPostcall .postcall-transcript-heading { min-width: 0; }
#screenPostcall .postcall-transcript-title { white-space: nowrap; }
#screenPostcall .postcall-transcript-actions,
#screenPostcall .postcall-summary-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
#screenPostcall .postcall-toolbar { display: flex; align-items: center; gap: 6px; }
.btn-tonal { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: var(--radius-sm); background: var(--fill-2); color: var(--text); font: inherit; font-size: var(--fs-small); font-weight: var(--fw-semibold); cursor: pointer; white-space: nowrap; transition: background-color .15s ease; }
.btn-tonal:hover { background: var(--fill-3); }
.btn-tonal:disabled { opacity: .6; cursor: default; }
.btn-tonal .icon { width: 14px; height: 14px; }
.btn-segmented { display: inline-flex; align-items: center; height: 32px; padding: 0 2px 0 10px; border-radius: var(--radius-sm); background: var(--fill-2); color: var(--text-muted); }
.btn-segmented > .icon { width: 14px; height: 14px; margin-right: 2px; }
.btn-segmented-item { height: 28px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--text); font: inherit; font-size: var(--fs-caption); font-weight: var(--fw-semibold); cursor: pointer; transition: background-color .15s ease; }
.btn-segmented-item:hover { background: var(--fill-3); }
#screenPostcall .postcall-summary-actions .btn { height: 32px; min-height: 32px; border-radius: var(--radius-sm); }

/* Bodies */
#screenPostcall .postcall-transcript-box, #screenPostcall .postcall-summary { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
#screenPostcall .postcall-summary[hidden] { display: none; }
#screenPostcall .postcall-summary-body { padding: 14px 16px; border-radius: 12px; }
#screenPostcall .postcall-transcript-preview,
#screenPostcall .postcall-summary-body { scrollbar-width: thin; scrollbar-color: var(--fill-4) transparent; overscroll-behavior: contain; }
#screenPostcall .postcall-transcript-preview::-webkit-scrollbar,
#screenPostcall .postcall-summary-body::-webkit-scrollbar { width: 8px; }
#screenPostcall .postcall-transcript-preview::-webkit-scrollbar-track,
#screenPostcall .postcall-summary-body::-webkit-scrollbar-track { background: transparent; }
#screenPostcall .postcall-transcript-preview::-webkit-scrollbar-thumb,
#screenPostcall .postcall-summary-body::-webkit-scrollbar-thumb { background: var(--fill-4); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
#screenPostcall .postcall-transcript-preview::-webkit-scrollbar-button,
#screenPostcall .postcall-summary-body::-webkit-scrollbar-button { display: none; height: 0; }

/* Summary content: a lead sentence, then quiet folding lists without bullets */
.postcall-summary-lead { margin: 0 0 4px; font-size: var(--fs-body); line-height: 1.55; color: var(--text); }
#screenPostcall .postcall-summary-group { margin-top: 8px; }
#screenPostcall .postcall-summary-list { list-style: none; padding: 0; margin: 2px 0 0; display: grid; gap: 2px; font-size: var(--fs-body); line-height: 1.5; }
#screenPostcall .postcall-summary-list li { display: block; position: relative; padding-left: 16px; }
#screenPostcall .postcall-summary-list li::before { content: ''; position: absolute; left: 3px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--text-dim); }
.transcript-partial-warning { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--warning-soft); color: var(--warning); font-size: var(--fs-small); }

/* Narrow: compact boxes stacked */
#screenPostcall .postcall-transcript-preview { height: min(30vh, 320px); }
#screenPostcall .postcall-summary-body { max-height: min(34vh, 360px); }

/* Wide: side by side, equal heights, diagnostics under both */
@media (min-width: 1100px) {
  #screenPostcall .postcall-card.has-transcript:has(#postcallSummary:not([hidden])) {
    grid-template-areas: "head head" "summary transcript" "quality quality" "actions actions";
    align-items: stretch;
    row-gap: 18px;
  }
  #screenPostcall .postcall-card.has-transcript:has(#postcallSummary:not([hidden])) .postcall-summary-body,
  #screenPostcall .postcall-card.has-transcript:has(#postcallSummary:not([hidden])) .postcall-transcript-preview { height: min(54vh, 540px); max-height: none; }
  #screenPostcall .postcall-card.has-transcript:has(#postcallSummary:not([hidden])) .postcall-transcript-header { flex-direction: row; align-items: center; }
}
@media (max-width: 560px) {
  #screenPostcall .postcall-transcript-header, #screenPostcall .postcall-summary-header { flex-wrap: wrap; }
}

/* Narrow screens: the summary, the most useful part, comes before the transcript */
#screenPostcall .postcall-card.has-transcript .postcall-summary { order: 1; }
#screenPostcall .postcall-card.has-transcript .postcall-transcript-box { order: 2; }
#screenPostcall .postcall-card.has-transcript .postcall-quality-card { order: 3; }
#screenPostcall .postcall-card.has-transcript .postcall-actions { order: 4; }

/* ═══ Components: small tonal button and segmented group (design system v2.1) ═══
   For actions that belong to a panel (copy, download, refresh). One height, one radius, an icon before the label. */
.btn-tonal { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--fill-3); color: var(--text); font: inherit; font-size: var(--fs-small); font-weight: var(--fw-semibold); line-height: 1; white-space: nowrap; cursor: pointer; transition: background-color .15s ease, transform .1s ease; }
.btn-tonal:hover { background: var(--fill-4); }
.btn-tonal:active { transform: scale(.98); }
.btn-tonal:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.btn-tonal:disabled { opacity: .55; cursor: default; transform: none; }
.btn-tonal .icon { width: 14px; height: 14px; color: var(--text-muted); }
.btn-segmented { display: inline-flex; align-items: center; gap: 2px; height: 32px; padding: 2px 2px 2px 10px; border-radius: 10px; background: var(--fill-3); color: var(--text-muted); }
.btn-segmented > .icon { width: 14px; height: 14px; margin-right: 4px; }
.btn-segmented-item { height: 28px; padding: 0 9px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: var(--fs-caption); font-weight: var(--fw-semibold); cursor: pointer; transition: background-color .15s ease; }
.btn-segmented-item:hover { background: var(--fill-4); }
.btn-segmented-item:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }

/* Post-call footer: actions sized to their labels, aligned right, the main one last */
#screenPostcall .postcall-card.has-transcript .postcall-actions { display: flex; justify-content: flex-end; gap: 10px; }
#screenPostcall .postcall-card.has-transcript .postcall-actions .btn { flex: 0 0 auto; width: auto; min-width: 168px; height: 44px; padding: 0 24px; }
/* The card is raised one step so the recessed boxes inside read clearly */
#screenPostcall .postcall-card.has-transcript { background: var(--surface-elevated); }
@media (max-width: 560px) {
  #screenPostcall .postcall-card.has-transcript .postcall-actions { flex-direction: column-reverse; }
  #screenPostcall .postcall-card.has-transcript .postcall-actions .btn { width: 100%; }
}

/* ═══ Design system v2.2 (2026-10-23) ═══ */
/* Recessed boxes look pressed in: a soft inner shadow on top of the --inset tone. */
:root { --inset-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45); }
:root[data-theme="light"] { --inset-shadow: inset 0 1px 3px rgba(20, 20, 40, 0.10), inset 0 0 1px rgba(20, 20, 40, 0.06); }
#screenPostcall .postcall-summary-body,
#screenPostcall .postcall-transcript-preview { box-shadow: var(--inset-shadow); }

/* Scrollbars: thin, a rounded thumb, no arrow buttons (they bump into rounded corners).
   Chromium ignores the ::-webkit-scrollbar styles as soon as scrollbar-width/-color are set,
   so in browsers that support them the standard properties are reset; Firefox keeps its thin bar. */
@supports selector(::-webkit-scrollbar) {
  * { scrollbar-width: auto !important; scrollbar-color: auto !important; }
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--fill-4); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
  ::-webkit-scrollbar-thumb:hover { background-color: var(--text-dim); }
  ::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
  /* The track stops short of the ends, so the thumb never runs into a rounded corner */
  ::-webkit-scrollbar-track:vertical { margin-block: 10px; }
  ::-webkit-scrollbar-track:horizontal { margin-inline: 10px; }
}
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--fill-4) transparent; }
}

/* Footer actions: same box, same flat surface, so the two buttons read as one height. */
#screenPostcall .postcall-card.has-transcript .postcall-actions .btn { box-shadow: none; border: 0; line-height: 1; }
#screenPostcall .postcall-meta { display: flex; align-items: center; gap: 8px; }

/* Lobby: one main action, «Новый созвон», full width, flat accent */
#screenLobby .lobby-actions { grid-template-columns: 1fr; }
#screenLobby .lobby-actions #btnNewMeeting { background: var(--accent); color: var(--on-accent); box-shadow: none; }
#screenLobby .lobby-actions #btnNewMeeting:hover { background: var(--accent-hover); color: var(--on-accent); }
#screenLobby .lobby-actions #btnNewMeeting:active { background: var(--accent-active); }
#screenLobby .lobby-actions #btnNewMeeting .btn-badge-sub { background: rgba(255, 255, 255, 0.18); color: var(--on-accent); }

/* ═══ Material (design system v2.3): controls are slightly raised and press in when clicked;
   recessed boxes sink (--inset-shadow). One light source from above. ═══ */
:root {
  --control-raised: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 2px 4px rgba(0, 0, 0, 0.18);
  --control-pressed: inset 0 1px 3px rgba(0, 0, 0, 0.16);
}
:root[data-theme="light"] {
  --control-raised: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 2px 3px rgba(20, 20, 40, 0.10);
  --control-pressed: inset 0 1px 3px rgba(20, 20, 40, 0.12);
}
.btn-primary, .btn-secondary, .btn-danger, .btn-tonal, .btn-segmented { box-shadow: var(--control-raised); }
.btn-primary:active, .btn-secondary:active, .btn-danger:active, .btn-tonal:active { box-shadow: var(--control-pressed); }
.btn-segmented-item:active { box-shadow: var(--control-pressed); }
#screenPostcall .postcall-card.has-transcript .postcall-actions .btn,
#screenLobby .lobby-actions #btnNewMeeting { box-shadow: var(--control-raised); }
#screenPostcall .postcall-card.has-transcript .postcall-actions .btn:active,
#screenLobby .lobby-actions #btnNewMeeting:active { box-shadow: var(--control-pressed); }

/* ═══ Transcription notice: everyone in the call must know their speech is being transcribed ═══ */
.asr-notice { position: absolute; top: 12px; left: 50%; z-index: 40; display: flex; align-items: center; gap: 14px;
  width: min(560px, calc(100% - 24px)); padding: 14px 14px 14px 16px; border-radius: 18px; background: rgba(23, 23, 28, 0.94);
  color: #f1f1f4; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  opacity: 0; pointer-events: none; transform: translate(-50%, -12px); transition: opacity .25s ease, transform .3s cubic-bezier(.2, .7, .2, 1); }
.asr-notice.is-shown { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.asr-notice-icon { flex-shrink: 0; width: 14px; height: 14px; margin: 0 4px; border-radius: 50%; background: #a3e635; box-shadow: 0 0 0 0 rgba(163, 230, 53, 0.6); animation: asr-rec 1.6s ease-out infinite; }
.asr-notice[data-kind="off"] .asr-notice-icon { background: #7c7c88; animation: none; }
.asr-notice-text { flex: 1; min-width: 0; }
.asr-notice-title { margin: 0; font-size: var(--fs-base); line-height: var(--lh-base); font-weight: 700; }
.asr-notice-sub { margin: 2px 0 0; font-size: var(--fs-small); line-height: var(--lh-small); color: #b8b8c2; }
.asr-notice-close { flex-shrink: 0; height: 36px; padding: 0 14px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.12); color: #fff; font: inherit; font-size: var(--fs-small); font-weight: 600; cursor: pointer; }
.asr-notice-close:hover { background: rgba(255, 255, 255, 0.2); }
@keyframes asr-rec { 0% { box-shadow: 0 0 0 0 rgba(163, 230, 53, 0.55); } 70% { box-shadow: 0 0 0 10px rgba(163, 230, 53, 0); } 100% { box-shadow: 0 0 0 0 rgba(163, 230, 53, 0); } }
/* The recording light in the top bar */
.quality-dot.rec { background: #a3e635; animation: asr-rec 1.6s ease-out infinite; }
.quality-badge.transcription-badge.is-recording { color: #fff; }
@media (prefers-reduced-motion: reduce) { .asr-notice, .asr-notice-icon, .quality-dot.rec { animation: none; transition: none; } }
@media (max-width: 560px) { .asr-notice { top: 8px; } .asr-notice-close { padding: 0 10px; } }

/* ═══ Comfortable widths (27.10.2026): the start screen is a narrow column, the join button fits its label;
   the call-end screen with summary and transcript stops at a readable width instead of filling the screen. ═══ */
#screenLobby .lobby-container { max-width: 440px; }
#screenLobby .join-row { grid-template-columns: minmax(0, 1fr) auto; }
#screenLobby .join-row .btn { padding: 0 20px; white-space: nowrap; }
@media (min-width: 1100px) {
  #screenPostcall .postcall-card.has-transcript:has(#postcallSummary:not([hidden])) { width: min(1040px, calc(100vw - 48px)); }
}

/* ═══ Call layout (27.10.2026) ═══
   Video is always shown whole, whatever its proportions; the tile itself is invisible (same as the call background,
   no frame), so the free space around a portrait or landscape picture does not look like black bars. The speaking
   person's tile still lights up.
   While a screen is shown on a wide screen, the people go into a column on the right so the screen keeps the full height.
   On a phone the join field and button stack: side by side the button label does not fit. */
.meeting-tile video { object-fit: contain; background: transparent; }
.meeting-tile, :root[data-theme="light"] .meeting-tile { background: transparent; border-color: transparent; box-shadow: none; }
.meeting-tile.is-speaking { border-color: var(--accent); box-shadow: 0 0 16px var(--accent-soft); }
@media (min-width: 768px), (orientation: landscape) and (min-width: 560px) {
  .meeting-presentation-view { flex-direction: row; }
  .presentation-strip { flex-direction: column; width: clamp(150px, 16vw, 220px); height: auto; overflow-x: hidden; overflow-y: auto; padding: 0 2px 0 0; }
  .presentation-strip .meeting-tile { width: 100%; height: auto; aspect-ratio: 16 / 10; }
}
@media (max-width: 480px) {
  #screenLobby .join-row { grid-template-columns: 1fr; }
  #screenLobby .join-row .btn { width: 100%; }
}
/* Phone call bar: the round buttons shrink in width there, so the base min-height (50 px) turned them into ovals. */
@media (max-width: 767px) {
  .call-bottom-bar .btn-icon { min-height: 0; height: auto; aspect-ratio: 1; flex-shrink: 0; }
}

/* Call-end screen on a phone: the whole card fits one screen. Summary and transcript share the height and scroll
   inside their own boxes; the buttons stay visible at the bottom. */
@media (max-width: 767px) {
  #screenPostcall { padding: 8px calc(8px + var(--safe-r)) calc(8px + var(--safe-b)) calc(8px + var(--safe-l)); overflow: hidden; }
  #screenPostcall .postcall-card.has-transcript { height: calc(100svh - 16px - var(--safe-b)); max-height: none; display: flex; flex-direction: column; gap: 10px; padding: 14px; overflow: hidden; }
  #screenPostcall .postcall-card.has-transcript .postcall-summary:not([hidden]),
  #screenPostcall .postcall-card.has-transcript .postcall-transcript-box { flex: 1 1 0; min-height: 0; }
  #screenPostcall .postcall-card.has-transcript .postcall-summary-body,
  #screenPostcall .postcall-card.has-transcript .postcall-transcript-preview { flex: 1 1 auto; min-height: 0; height: auto; max-height: none; overflow-y: auto; }
  #screenPostcall .postcall-card.has-transcript .postcall-head,
  #screenPostcall .postcall-card.has-transcript .postcall-summary-header,
  #screenPostcall .postcall-card.has-transcript .postcall-transcript-header,
  #screenPostcall .postcall-card.has-transcript .postcall-actions { flex-shrink: 0; }
  #screenPostcall .postcall-card.has-transcript .postcall-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #screenPostcall .postcall-card.has-transcript .postcall-actions .btn { height: 44px; min-width: 0; padding: 0 10px; white-space: nowrap; font-size: var(--fs-small); }
}

/* Summary by topic: a short gist, then each topic with its title, who took part and short points;
   the speaker's name at the start of a point is bold. */
#screenPostcall .postcall-summary-lead { margin: 0 0 2px; color: var(--text-muted); }
#screenPostcall .postcall-topic { margin-top: 14px; }
#screenPostcall .postcall-topic-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
#screenPostcall .postcall-topic-title { margin: 0; font-size: var(--fs-body); font-weight: 650; line-height: 1.35; color: var(--text); }
#screenPostcall .postcall-topic-speakers { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-caption); color: var(--text-dim); }
#screenPostcall .postcall-point-who { font-weight: 600; color: var(--text); }

/* ═══ Call controls over the video (28.10.2026): the video gets the whole screen on every device. The top bar and
   the buttons float over it and fade out when nobody touches the screen or moves the mouse (js/app.js). ═══ */
#screenCall .call-top-bar,
#screenCall .call-bottom-bar { position: absolute; left: 0; right: 0; z-index: 30; backdrop-filter: none; -webkit-backdrop-filter: none; transition: opacity .25s ease, transform .25s ease; }
#screenCall .call-top-bar { top: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); }
#screenCall .call-bottom-bar { bottom: 0; padding-top: 24px; background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); }
#screenCall.controls-hidden .call-top-bar { opacity: 0; transform: translateY(-12px); pointer-events: none; }
#screenCall.controls-hidden .call-bottom-bar { opacity: 0; transform: translateY(12px); pointer-events: none; }
#screenCall .meeting-view,
#screenCall .meeting-presentation-view { inset: 2px calc(2px + var(--safe-r)) 2px calc(2px + var(--safe-l)); }
/* While the bars are shown, the «who is presenting» label steps below the top bar instead of hiding under it. */
#screenCall .presentation-header-badge { transition: top .25s ease; }
#screenCall:not(.controls-hidden) .presentation-header-badge { top: calc(52px + var(--safe-t)); }
/* The people column beside a shared screen starts below the top bar's buttons. */
@media (min-width: 768px), (orientation: landscape) and (min-width: 560px) {
  #screenCall .presentation-strip { padding-top: calc(44px + var(--safe-t)); }
}
/* Computer and tablet: the buttons are a compact floating dock in the middle instead of a full-width strip. */
@media (min-width: 768px) and (min-height: 541px) {
  #screenCall .call-bottom-bar { left: 50%; right: auto; bottom: calc(16px + var(--safe-b)); transform: translateX(-50%); padding: 10px; gap: 12px; border-radius: 999px; background: rgba(22, 22, 26, 0.42); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); }
  #screenCall.controls-hidden .call-bottom-bar { transform: translate(-50%, 12px); }
  #screenCall .meeting-view,
  #screenCall .meeting-presentation-view { inset: 8px; }
}
/* Upright phone showing a screen: the shared screen is limited by the phone's width and leaves empty space above and
   below, so the presentation steps clear of the bars and the people strip sits above the buttons, never under them. */
@media (pointer: coarse) and (max-width: 767px) and (orientation: portrait) {
  #screenCall .meeting-presentation-view { top: calc(52px + var(--safe-t)); bottom: calc(84px + var(--safe-b)); }
}
@media (prefers-reduced-motion: reduce) {
  #screenCall .call-top-bar, #screenCall .call-bottom-bar { transition: none; }
}

/* «A new version is out» (js/app.js): a small note at the top with a reload button. */
.update-banner { position: fixed; top: calc(12px + var(--safe-t)); left: 50%; transform: translateX(-50%); z-index: 1000; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 24px); padding: 8px 8px 8px 16px; border-radius: 14px; background: var(--surface-elevated); color: var(--text); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); font-size: var(--fs-small); line-height: 1.35; }
.update-banner-btn { flex-shrink: 0; height: 32px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 600; white-space: nowrap; cursor: pointer; }
.update-banner-close { flex-shrink: 0; width: 32px; height: 32px; border: 0; border-radius: 10px; background: transparent; color: var(--text-muted); font: inherit; cursor: pointer; }
.update-banner-close:hover { background: var(--fill-2); color: var(--text); }

/* ═══ Pin a participant (28.10.2026): one person big, the rest beside them; only on this viewer's screen. ═══ */
.tile-pin { position: absolute; top: 8px; right: 8px; z-index: 3; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 10px; background: rgba(0, 0, 0, 0.45); color: #fff; cursor: pointer; opacity: 0; transition: opacity .15s ease, background-color .15s ease; }
.tile-pin .icon { width: 16px; height: 16px; }
.tile-pin:hover { background: rgba(0, 0, 0, 0.65); }
.meeting-tile:hover .tile-pin,
.meeting-tile.is-pinned .tile-pin,
.tile-pin:focus-visible { opacity: 1; }
.meeting-tile.is-pinned .tile-pin { background: var(--accent); }
/* A touch screen has no hover: the pins show together with the call buttons. */
@media (pointer: coarse) {
  #screenCall:not(.controls-hidden) .tile-pin { opacity: 0.9; }
}
.meeting-presentation-view.pinned-self #presentationVideo { transform: scaleX(-1); }

/* Pinned in the grid: big on the left, the others in a column on the right. */
.meeting-view.has-pin { grid-template-columns: minmax(0, 1fr) clamp(150px, 18vw, 240px); grid-template-rows: repeat(var(--pin-others), minmax(0, 1fr)); }
.meeting-view.has-pin .meeting-tile { grid-column: 2; }
.meeting-view.has-pin .meeting-tile.is-pinned { grid-column: 1; grid-row: 1 / -1; }
/* Upright phone: big on top, the others in a row below. */
@media (max-width: 767px) and (orientation: portrait) {
  .meeting-view.has-pin { grid-template-columns: repeat(var(--pin-others), minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) clamp(90px, 22vh, 140px); }
  .meeting-view.has-pin .meeting-tile { grid-column: auto; grid-row: 2; }
  .meeting-view.has-pin .meeting-tile.is-pinned { grid-column: 1 / -1; grid-row: 1; }
}

/* Phone turned sideways: the people stand in a grid, not one narrow column. */
@media (orientation: landscape) and (max-height: 540px) {
  .meeting-grid-2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
  .meeting-grid-3, .meeting-grid-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
  .meeting-grid-5, .meeting-grid-6 { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; }
  .meeting-grid-7, .meeting-grid-8 { grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr 1fr; }
}

/* Call title: an icon and the number of people. The pin sits below the floating top bar (js: _placePins) and is not
   shown when the grid has a single video: there is nothing to pin. */
.call-title { display: inline-flex; align-items: center; gap: 6px; }
.tile-pin { top: var(--pin-top, 8px); }
.meeting-grid-1 .tile-pin { display: none; }

/* The hang-up button is the same size as the other call buttons, so the dock's padding looks even on both ends. */
#screenCall .call-bottom-bar .btn-icon.danger { width: 50px; height: 50px; min-width: 50px; min-height: 50px; }
@media (min-width: 768px) {
  #screenCall .call-bottom-bar .btn-icon.danger { width: 52px; height: 52px; min-width: 52px; min-height: 52px; }
}
@media (max-width: 640px) {
  #screenCall .call-bottom-bar .btn-icon.danger { width: clamp(42px, 11.5vw, 48px); min-width: clamp(42px, 11.5vw, 48px); height: auto; min-height: 0; aspect-ratio: 1; }
}
@media (orientation: landscape) and (max-height: 540px) {
  #screenCall .call-bottom-bar .btn-icon.danger { width: 40px !important; height: 40px !important; min-width: 40px; min-height: 40px; }
}

/* ═══ Video frame (29.10.2026): the frame takes the picture's own proportions ═══
   The tile is the grid cell; .tile-frame inside it is as large as fits with the video's aspect ratio (--video-ar, set
   from the video in js/ui.js), so the rounded corners and the speaking highlight sit on the picture itself, with no
   bars above, below or beside it. A camera that is off shows a 16:9 placeholder. */
.meeting-tile { --ar: var(--video-ar, 1.7778); container-type: size; display: grid; place-items: center; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.meeting-tile.cam-off { --ar: 1.7778; }
.meeting-tile, :root[data-theme="light"] .meeting-tile, .meeting-tile.is-speaking { border-color: transparent; box-shadow: none; }
.tile-frame { position: relative; width: 100%; height: 100%; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); transition: box-shadow 0.2s ease; }
.tile-frame { width: min(100cqw, calc(100cqh * var(--ar))); height: auto; aspect-ratio: var(--ar); }
.tile-frame::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 2px solid transparent; pointer-events: none; z-index: 4; transition: border-color 0.2s ease; }
.meeting-tile.is-speaking .tile-frame { box-shadow: 0 0 16px var(--accent-soft); }
.meeting-tile.is-speaking .tile-frame::after { border-color: var(--accent); }
.meeting-tile .tile-frame video { width: 100%; height: 100%; object-fit: cover; background: transparent; }
/* In the column next to a shown screen each person's tile is exactly as tall as their picture. */
@media (min-width: 768px), (orientation: landscape) and (min-width: 560px) {
  .presentation-strip .meeting-tile { aspect-ratio: var(--ar); }
}

/* ═══ Radius standard (29.10.2026, DESIGN.md «Radii») ═══
   One rule by size: large controls 40 px and taller (fields, buttons, menu rows, messages) --radius 12 px;
   small controls 28–36 px and chips --radius-sm 8 px; media and modals --radius-lg 16 px; screen cards and
   popovers --radius-xl 20 px; pills and round buttons --radius-full. A shape inside another = outer − padding:
   the call summary and reconnect cards keep 28 px around 20 px padding so their inner blocks land on 8 px. */
:root { --radius-xl: 20px; }
.input, .auth-input, input[type="text"]:not(.auth-input), .join-row input, #precallNameInput, #shareLinkInput, .postcall-deliver-emails,
.btn:not(.btn-sm), .auth-error-msg, .custom-dropdown-menu { border-radius: var(--radius); }
.btn.btn-sm, .btn-tonal, .custom-dropdown-trigger, .panel-model-trigger, .custom-dropdown-item, .btn-panel-copy, .modal-close-btn, #btnAuthLogout,
.postcall-quality-badge, .presentation-header-badge, .postcall-quality-issues { border-radius: var(--radius-sm); }
.btn-segmented { border-radius: calc(var(--radius-sm) + 2px); }
/* The eye sits 2 px inside the field: no fill, no shadow, only its focus outline follows the field's corner. */
.auth-password-toggle { border-radius: calc(var(--radius) - 2px); background: transparent; box-shadow: none; }
#screenLobby .lobby-card, .lobby-card, .popover-bubble { border-radius: var(--radius-xl); }
.call-bottom-bar, .reconnect-icon, .postcall-room, .postcall-duration, .download-progress-wrap, .download-progress-bar { border-radius: var(--radius-full); }

/* Field standard (29.10.2026, DESIGN.md «Fields»): every text field looks the same — login, password, room code, name,
   e-mails, invite link: --surface-subtle fill, recessed inner shadow, 15 px text; focus lifts the fill and lights the border. */
input[type="text"]:not(.auth-input), .join-row input, .auth-input { background: var(--surface-subtle); border: 1px solid transparent; box-shadow: var(--control-recess); font-size: var(--fs-base); }
input[type="text"]:not(.auth-input):focus, .join-row input:focus, .auth-input:focus { background: var(--surface-elevated); border-color: var(--accent); box-shadow: var(--control-recess); outline: none; }
.join-row input::placeholder { font-size: var(--fs-base); }

/* «A new version is out», 29.10.2026: radii from the standard (card 16, buttons 8 = 16 − 8 padding). On a phone the
   note spans the screen width: the text on top, «Обновить» and the close button in a row below. */
.update-banner { border-radius: var(--radius-lg); padding: 8px 8px 8px 16px; }
.update-banner-text { flex: 1 1 auto; min-width: 0; }
.update-banner-btn, .update-banner-close { border-radius: var(--radius-sm); }
.update-banner-close { display: grid; place-items: center; padding: 0; }
@media (max-width: 560px) {
  .update-banner { left: 12px; right: 12px; transform: none; max-width: none; display: grid; grid-template-columns: 1fr 40px; gap: 8px; padding: 8px; }
  .update-banner-text { grid-column: 1 / -1; padding: 4px 8px 0; }
  .update-banner-btn, .update-banner-close { height: 40px; width: 100%; }
}