/* ── Call Overlay — backdrop + centered popup ── */
  .call-overlay {
    position: fixed; inset: 0; z-index: 200; display: none;
    align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
    animation: fadeIn var(--transition);
  }
  .call-overlay.visible { display: flex; }

  /* Minimized state — overlay folds away entirely. The Speak iframe still
     lives in the DOM, just invisible: media tracks keep flowing, the
     voice-bar in the sidebar (.voice-bar.speak) becomes the only on-screen
     surface for the active call until the user restores. */
  .call-overlay.visible.minimized { display: none; }

  .call-popup {
    position: relative;
    width: calc(100vw - 48px); height: calc(100vh - 48px);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-l);
    display: flex; flex-direction: column;
    background: var(--void);
  }

  #speakContainer {
    flex: 1;
    min-height: 0;
  }
  #speakContainer iframe {
    width: 100%; height: 100%;
    border: 0; background: var(--void);
    display: block;
  }

  /* Close-button floats above the iframe in the top-right corner. The
     overlay backdrop click could close too, but a misclick during a
     real call is too costly — only the explicit X (or 'end-call' action)
     finalises. */
  .call-close-btn {
    position: absolute;
    top: 12px; right: 12px;
    z-index: 1;
    width: 36px; height: 36px;
    border-radius: var(--radius-full);
    background: rgba(0, 0, 0, 0.55);
    color: var(--on-accent);
    border: 0;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background var(--transition);
  }
  .call-close-btn:hover { background: rgba(0, 0, 0, 0.8); }

  /* Minimize sits to the left of the X. Same circular chrome so they read
     as a pair. */
  .call-minimize-btn {
    position: absolute;
    top: 12px; right: 56px;
    z-index: 1;
    width: 36px; height: 36px;
    border-radius: var(--radius-full);
    background: rgba(0, 0, 0, 0.55);
    color: var(--on-accent);
    border: 0;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background var(--transition);
  }
  .call-minimize-btn:hover { background: rgba(0, 0, 0, 0.8); }

  /* Desktop shell (Wails) рисует свой titlebar с системной «Вид» /
     «навигация» кнопкой в правом верхнем углу окна. Сдвигаем наши
     X / minimize левее, иначе их круги налезают на системную кнопку
     и tooltip «Kinescope Speak» (см. image-47). В браузере этой
     кнопки нет, поэтому оставляем дефолтные 12/56px. */
  body.kc-desktop .call-close-btn { right: 100px; }
  body.kc-desktop .call-minimize-btn { right: 144px; }

  .call-ctrl {
    width: 44px; height: 44px; border-radius: var(--radius-full);
    border: none;
    background: var(--glass); color: var(--ink);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
  }
  .call-ctrl:hover { background: var(--glass-hover); }
  .call-ctrl.end {
    background: var(--coral); color: white;
  }
  .call-ctrl.end:hover { background: var(--surface-button-alert-hovered); }
  .call-ctrl.accept { background: var(--live); color: white; }
  .call-ctrl.accept:hover { background: var(--color-green-88); }

  /* ── Incoming Call popup — compact centered card ── */
  .incoming-call {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 300;
    width: 260px;
    padding: var(--space-lg) var(--space-lg) var(--space-md);
    background: var(--raised);
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-l);
    backdrop-filter: blur(var(--blur));
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .incoming-call.visible { display: flex; }

  .incoming-call-avatar-wrap {
    margin-bottom: var(--space-md);
  }
  .incoming-call-avatar {
    width: var(--avatar-2xl); height: var(--avatar-2xl);
    border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center;
    font-size: 38px; font-weight: 700; color: white;
    background-size: cover; background-position: center;
  }
  .incoming-call-name {
    font-size: var(--font-lg); font-weight: 700; color: var(--ink);
    margin-bottom: 2px;
  }
  .incoming-call-label {
    font-size: var(--font-xs); color: var(--ink-muted); font-weight: 500;
    margin-bottom: var(--space-lg);
  }

  .incoming-call-actions {
    display: flex;
    gap: var(--space-lg);
    width: 100%;
    justify-content: center;
  }
  .incoming-action {
    width: 50px; height: 50px;
    border: none; border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center;
    color: white; cursor: pointer;
    transition: background var(--transition);
  }
  .incoming-action.decline { background: var(--coral); }
  .incoming-action.decline:hover { background: var(--surface-button-alert-hovered); }
  .incoming-action.accept { background: var(--live); }
  .incoming-action.accept:hover { background: var(--color-green-88); }

  /* ── Native voice call stage (Speak Этап 2-C) — floating panel ── */
  #kcVoiceStage {
    position: fixed;
    left: var(--space-md);
    bottom: var(--space-md);
    z-index: 200;
    display: none;
    flex-direction: column;
    gap: var(--space-sm);
    width: 240px;
    padding: var(--space-md);
    background: var(--raised);
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-l);
  }
  #kcVoiceStage.visible { display: flex; }
  .kc-vstage-head {
    display: flex; align-items: center; gap: 6px;
    font-size: var(--font-sm); font-weight: 600; color: var(--ink);
  }
  .kc-vstage-dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--live); flex-shrink: 0; }
  .kc-vstage-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .kc-vstage-tiles {
    display: flex; flex-wrap: wrap; gap: var(--space-sm);
    max-height: 320px; overflow-y: auto;
  }
  .kc-vtile {
    position: relative;
    width: 104px; height: 72px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-m);
    background: var(--surface);
    overflow: hidden;
  }
  .kc-vtile.speaking { box-shadow: inset 0 0 0 2px var(--live); }
  .kc-vtile-av { width: 40px; height: 40px; font-size: var(--font-sm); }
  .kc-vtile.has-video .kc-vtile-av { display: none; }
  .kc-vtile-video { position: absolute; inset: 0; }
  .kc-vtile-video video { width: 100%; height: 100%; object-fit: cover; }
  .kc-vtile-video video.mirror { transform: scaleX(-1); }
  .kc-vtile-mute {
    position: absolute; right: 4px; bottom: 4px;
    width: 18px; height: 18px;
    display: none; align-items: center; justify-content: center;
    border-radius: var(--radius-full);
    background: var(--coral); color: var(--color-white-100);
  }
  .kc-vtile.is-muted .kc-vtile-mute { display: flex; }
  .kc-vtile-mute svg { width: 11px; height: 11px; }
  .kc-vc-btn.is-on { background: var(--accent); color: var(--color-white-100); }
  .kc-vstage-controls { display: flex; gap: var(--space-sm); justify-content: center; }
  .kc-vc-btn {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-full);
    border: none; background: var(--glass); color: var(--ink);
    cursor: pointer;
    transition: background var(--transition);
  }
  .kc-vc-btn:hover { background: var(--glass-hover); }
  .kc-vc-btn.is-off { background: var(--coral); color: var(--color-white-100); }
  .kc-vc-leave { background: var(--coral); color: var(--color-white-100); }
  .kc-vc-leave:hover { filter: brightness(1.1); }

  /* ── Persistent voice bar (Этап 4.6) — Discord "Voice Connected" cue.
        Two rows: status + controls strip. ── */
  #kcVoiceBar {
    position: relative;
    display: none;
    flex-direction: column;
    gap: 6px;
    margin: 0 var(--space-sm) var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--raised);
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-m);
  }
  #kcVoiceBar.visible { display: flex; }

  .kc-vbar-top {
    display: flex; align-items: center; gap: var(--space-sm);
    min-width: 0;
    cursor: pointer;
  }
  /* Signal icon = latency level (green/amber/coral by ping). Exact value is
     in the hover-tooltip + connection popup — no separate ping number. */
  .kc-vbar-signal {
    width: 28px; height: 28px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-s);
    background: var(--glass-hover); color: var(--live);
  }
  .kc-vbar-signal.is-good { color: var(--live); }
  .kc-vbar-signal.is-mid  { color: var(--amber); }
  .kc-vbar-signal.is-bad  { color: var(--coral); }
  .kc-vbar-text { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
  .kc-vbar-status { font-size: var(--font-sm); font-weight: 700; color: var(--live); }
  .kc-vbar-channel {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: var(--font-2xs); color: var(--ink-muted);
  }

  .kc-vbar-controls { display: flex; align-items: center; gap: 2px; }
  .kc-vbar-btn {
    flex: 1; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: var(--radius-s);
    background: var(--glass); color: var(--ink-muted);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
  }
  .kc-vbar-btn:hover { background: var(--glass-hover); color: var(--ink); }
  .kc-vbar-btn svg { width: 16px; height: 16px; }
  .kc-vbar-btn.is-off { color: var(--coral); }
  .kc-vbar-btn.is-on { color: var(--live); }
  .kc-vbar-leave { color: var(--coral); }
  .kc-vbar-leave:hover { background: var(--coral); color: var(--color-white-100); }

  /* Connection-stats popup — floats above the bar (Discord-style). */
  .kc-vconn {
    position: absolute;
    bottom: calc(100% + 8px);
    left: var(--space-sm); right: var(--space-sm);
    z-index: 210;
    padding: var(--space-md);
    background: var(--raised);
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-l);
  }
  .kc-vconn[hidden] { display: none; }
  .kc-vconn-title {
    margin-bottom: var(--space-sm);
    font-size: var(--font-xs); font-weight: 700; color: var(--ink);
  }
  .kc-vconn-graph {
    width: 100%; height: 48px;
    margin-bottom: 6px;
    border-radius: var(--radius-s);
    background: var(--glass);
    overflow: hidden;
  }
  .kc-vconn-graph svg { display: block; width: 100%; height: 100%; }
  .kc-vconn-node {
    margin-bottom: var(--space-sm);
    font-family: var(--font-mono, monospace);
    font-size: var(--font-2xs); color: var(--ink-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .kc-vconn-row {
    display: flex; justify-content: space-between; gap: var(--space-md);
    padding: 2px 0;
    font-size: var(--font-2xs); color: var(--ink-muted);
  }
  .kc-vconn-row b { color: var(--ink); font-variant-numeric: tabular-nums; }
  .kc-vconn-copy {
    width: 100%; margin-top: var(--space-sm);
    padding: 6px;
    border: none; border-radius: var(--radius-s);
    background: var(--glass); color: var(--ink);
    font-size: var(--font-2xs); font-weight: 600;
    cursor: pointer;
    transition: background var(--transition);
  }
  .kc-vconn-copy:hover { background: var(--glass-hover); }

  /* ── Voice room view (Этап 4.5) — big tiles in the main content area ── */
  .kc-vroom {
    position: absolute; inset: 0;
    z-index: 5;
    display: none;
    flex-direction: column;
    background: var(--void);
  }
  .kc-vroom.visible { display: flex; }
  .kc-vroom-stage { position: relative; flex: 1; min-height: 0; }
  .kc-vroom-tiles {
    position: absolute; inset: 0;
    display: flex; flex-wrap: wrap; gap: var(--space-md);
    align-content: center; align-items: center; justify-content: center;
    padding: var(--space-lg);
    overflow: auto;
  }
  .kc-vroom-tiles .kc-vtile { width: 280px; height: 170px; }
  .kc-vroom-tiles .kc-vtile-av { width: 72px; height: 72px; font-size: var(--font-lg); }
  .kc-vroom-empty {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-muted); font-size: var(--font-sm);
    pointer-events: none;
  }
  .kc-vroom-bar {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; gap: var(--space-md);
    padding: var(--space-md);
  }
  .kc-vroom-invite {
    display: inline-flex; align-items: center; gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    border: none; border-radius: var(--radius-full);
    background: var(--glass); color: var(--ink);
    font-size: var(--font-sm); font-weight: 600;
    cursor: pointer;
    transition: background var(--transition);
  }
  .kc-vroom-invite:hover { background: var(--glass-hover); }
  .kc-vroom-invite svg { width: 18px; height: 18px; }