.call-banner {
  background: var(--color-surface, oklch(0.97 0 0));
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px oklch(0 0 0 / 0.15);
  inset-block-start: var(--block-space);
  inset-inline-end: calc(var(--sidebar-width) + var(--inline-space));
  padding: 0.5em 1em;
  position: fixed;
  z-index: 3;
}

.call-banner__indicator {
  background: oklch(0.65 0.2 145);
  block-size: 0.5em;
  border-radius: 50%;
  inline-size: 0.5em;
  animation: call-pulse 2s ease-in-out infinite;
}

@keyframes call-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Fullscreen overlay like Teams */
.call-container {
  background: oklch(0.12 0 0);
  display: flex;
  flex-direction: column;
  block-size: 100dvh;
  inset: 0;
  overflow: hidden;
  position: fixed;
  z-index: 10;
}

/* Grid: remote participants fill the space */
.call-grid {
  display: grid;
  flex: 1 1 0;
  gap: 0.5rem;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  min-block-size: 0;
  overflow: hidden;
  padding: 0.5rem;
  position: relative;
}

/* Grid columns managed by JS via _updateGridLayout() */

/* Remote tiles: fill the grid */
.call-tile {
  background: oklch(0.18 0 0);
  border-radius: 0.5rem;
  min-block-size: 0;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;

  video {
    block-size: 100%;
    inline-size: 100%;
    object-fit: cover;
  }

  audio {
    display: none;
  }
}

/* Local tile: small picture-in-picture in bottom right */
.call-tile--local {
  aspect-ratio: 16 / 9;
  border: 2px solid oklch(1 0 0 / 0.2);
  border-radius: 0.5rem;
  block-size: auto;
  box-shadow: 0 2px 12px oklch(0 0 0 / 0.5);
  inset-block-end: 5rem;
  inset-inline-end: 1.5rem;
  inline-size: 20rem;
  max-inline-size: 25vw;
  position: absolute;
  width: auto;
  z-index: 2;
}

/* Avatar visibility and styles controlled via inline JS */

.call-tile__name {
  background: oklch(0 0 0 / 0.6);
  border-radius: 0.25rem;
  color: white;
  font-size: 1.2rem;
  inset-block-end: 1.5rem;
  inset-inline-start: 1.5rem;
  padding: 0.4em 1em;
  position: absolute;
}

.call-tile--local .call-tile__name {
  font-size: 1rem;
  inset-block-end: 0.5rem;
  inset-inline-start: 0.5rem;
  padding: 0.25em 0.6em;
}

.call-controls {
  align-items: center;
  background: oklch(0.18 0 0 / 0.85);
  backdrop-filter: blur(10px);
  border-radius: 1rem;
  display: flex;
  gap: 0.75rem;
  inset-block-end: 1.5rem;
  inset-inline-start: 50%;
  justify-content: center;
  opacity: 0;
  padding: 0.75em 1.5em;
  position: absolute;
  transform: translateX(-50%);
  transition: opacity 0.3s ease;
  z-index: 3;
}

.call-container:hover .call-controls,
.call-container--controls-visible .call-controls {
  opacity: 1;
}

.call-controls .btn {
  --btn-background: oklch(0.3 0 0);
  --btn-border-color: oklch(0.35 0 0);
  --btn-size: 3.2em;

  img {
    filter: invert(100%);
  }
}

.call-controls .btn--active {
  --btn-background: white;
  --btn-border-color: white;

  img {
    filter: invert(0%);
  }
}

.call-controls .btn--negative {
  --btn-background: oklch(0.55 0.25 25);
  --btn-border-color: oklch(0.55 0.25 25);

  img {
    filter: invert(100%);
  }
}