.brill-voice {
  height: 100%;
  overflow-y: auto;
  padding: 28px 22px;
}

.brill-voice-card {
  width: min(720px,100%);
  margin: 0 auto;

  padding: 28px;

  border: 1px solid var(--border);
  border-radius: 22px;

  background:
    radial-gradient(
      circle at 20% 0%,
      rgba(102,120,255,.15),
      transparent 40%
    ),
    #111722;
}

.brill-voice-logo {
  width: 66px;
  height: 66px;

  display: grid;
  place-items: center;

  border-radius: 20px;

  font-size: 28px;

  background:
    linear-gradient(
      135deg,
      rgba(102,120,255,.28),
      rgba(141,85,255,.22)
    );

  border:
    1px solid
    rgba(110,120,255,.22);
}

.brill-voice-card h2 {
  margin: 18px 0 5px;
  font-size: 25px;
}

.brill-voice-description {
  color: var(--muted);
  font-size: 11px;
}

.voice-join {
  margin-top: 21px;

  border: 0;
  border-radius: 11px;

  padding: 12px 19px;

  color: white;
  font-weight: 850;

  background:
    linear-gradient(
      135deg,
      var(--accent),
      var(--accent-2)
    );
}

.voice-status {
  margin-top: 13px;

  color: #758196;
  font-size: 10px;
}

.voice-users {
  width: min(720px,100%);
  margin: 14px auto 0;

  padding: 14px;

  border: 1px solid var(--border);
  border-radius: 16px;

  background: #10151f;
}

.voice-user {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 8px;

  border-radius: 11px;
}

.voice-user.speaking {
  background:
    rgba(67,220,155,.07);
}

.voice-user-avatar {
  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  border: 2px solid transparent;
  border-radius: 13px;

  background: #192130;

  font-size: 10px;
  font-weight: 900;
}

.voice-user.speaking
.voice-user-avatar {
  border-color: #43dd9b;

  box-shadow:
    0 0 0 4px
    rgba(67,220,155,.08);
}

.voice-user-info {
  flex: 1;
}

.voice-user-name {
  font-size: 12px;
  font-weight: 800;
}

.voice-user-state {
  margin-top: 2px;

  color: #6e798d;
  font-size: 9px;
}

.voice-controls {
  width: min(720px,100%);
  margin: 12px auto 0;

  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.voice-control {
  padding: 9px 11px;

  border: 1px solid var(--border);
  border-radius: 10px;

  color: #aab3c4;
  background: #151b27;
}

.voice-control.active {
  color: white;

  border-color:
    rgba(102,120,255,.35);

  background:
    rgba(102,120,255,.14);
}

.voice-control.danger {
  color: #ff96a3;

  border-color:
    rgba(255,90,110,.18);

  background:
    rgba(255,90,110,.07);
}

.voice-device {
  min-width: 190px;

  padding: 9px 10px;

  border: 1px solid var(--border);
  border-radius: 10px;

  outline: 0;

  color: #b5bece;
  background: #111620;
}

#brillVoiceAudio {
  position: fixed;

  width: 1px;
  height: 1px;

  opacity: .01;
  overflow: hidden;

  pointer-events: none;
}

.voice-dock {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 66px;

  z-index: 20;

  padding: 10px 12px;

  background: #0d121b;

  border-top:
    1px solid var(--border);

  border-bottom:
    1px solid var(--border);
}

.voice-dock-status {
  color: #43dd9b;

  font-size: 9px;
  font-weight: 900;

  letter-spacing: .08em;
}

.voice-dock-room {
  margin-top: 3px;

  font-size: 11px;
  font-weight: 800;
}

.voice-dock-actions {
  display: flex;
  gap: 5px;

  margin-top: 8px;
}

.voice-dock-actions button {
  flex: 1;

  padding: 6px;

  border:
    1px solid var(--border);

  border-radius: 8px;

  color: #99a3b5;
  background: #161c27;
}

.voice-dock-actions
.voice-danger {
  color: #ff94a2;
}

@media (max-width:760px) {

  .brill-voice {
    padding: 18px 12px;
  }

  .brill-voice-card {
    padding: 21px;
  }

  .voice-controls {
    display: grid;

    grid-template-columns:
      1fr 1fr;
  }

  .voice-device {
    width: 100%;
    min-width: 0;

    grid-column:
      1 / -1;
  }
}