.voice-dialog{
  width:min(600px,calc(100% - 2rem));
  padding:0;
  overflow:hidden
}

.voice-dialog-head{
  display:flex;
  align-items:center;
  gap:14px;
  padding:22px 24px 18px;
  background:linear-gradient(145deg,#0d527d,#073f65);
  color:#fff
}

.voice-room-icon{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:56px;
  height:56px;
  border-radius:50%;
  background:rgba(255,255,255,.15);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.13);
  font-size:1.6rem
}

.voice-dialog-head-copy{
  min-width:0;
  flex:1
}

.voice-dialog-head h2{
  margin:2px 0 6px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-family:Georgia,serif;
  font-size:1.55rem
}

.voice-dialog-head .cr-eyebrow{color:#cdeafa}

.voice-dialog .dialog-close{
  color:#fff;
  background:rgba(255,255,255,.12)
}

.voice-head-status{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px
}

.voice-status,
.voice-quality{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:.78rem;
  font-weight:800
}

.voice-status span,
.voice-quality span{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#aab8c1
}

.voice-status.connected span{
  background:#43d17a;
  box-shadow:0 0 0 4px rgba(67,209,122,.14)
}

.voice-status.connecting span,
.voice-status.reconnecting span{
  background:#ffd166;
  animation:voicePulse 1s infinite
}

.voice-status.error span{background:#ff7b7b}

.voice-quality{
  padding-left:10px;
  border-left:1px solid rgba(255,255,255,.24);
  color:#d8ebf7
}

.voice-quality.excellent span,
.voice-quality.good span{background:#43d17a}

.voice-quality.poor span{background:#ffd166}
.voice-quality.lost span{background:#ff7b7b}

@keyframes voicePulse{50%{opacity:.35}}

.voice-dialog-body{padding:20px 24px 24px}

.voice-mic-monitor{
  margin-bottom:18px;
  padding:12px 14px;
  border:1px solid #dce7ee;
  border-radius:13px;
  background:#f7fbfd
}

.voice-mic-monitor-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
  color:#38576a;
  font-size:.78rem;
  font-weight:800
}

.voice-meter{
  height:9px;
  overflow:hidden;
  border-radius:999px;
  background:#dce8ee
}

.voice-meter-fill{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#43b96f,#7bd67f,#ffd166);
  transition:width 70ms linear
}

.voice-meter.has-signal{
  box-shadow:0 0 0 3px rgba(67,185,111,.08)
}

.voice-meter.strong-signal .voice-meter-fill{
  background:linear-gradient(90deg,#43b96f,#ffd166,#f28b55)
}

.voice-meter.is-muted .voice-meter-fill{width:0!important}

.voice-participant-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px
}

.voice-participant-heading span{
  display:grid;
  place-items:center;
  min-width:30px;
  height:30px;
  border-radius:999px;
  background:#e8f4fb;
  color:#075483;
  font-weight:900
}

.voice-participant-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 10px;
  max-height:308px;
  overflow:auto;
  padding-right:2px
}

.voice-person{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto auto;
  align-items:center;
  gap:8px;
  min-height:54px;
  padding:7px 9px;
  border:1px solid #dce7ee;
  border-radius:12px;
  background:#fafdff;
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease
}

.voice-person.speaking{
  border-color:#49b978;
  box-shadow:0 0 0 3px rgba(73,185,120,.12);
  transform:translateY(-1px)
}

.voice-avatar{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:50%;
  background:#0a557f;
  color:#fff;
  font-size:.66rem;
  font-weight:900
}

.voice-person-copy{
  display:grid;
  min-width:0
}

.voice-person-copy strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.voice-person small{
  margin-top:1px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#647b8b;
  font-size:.72rem
}

.voice-speaking-bars{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:2px;
  width:18px;
  height:20px;
  opacity:.18
}

.voice-speaking-bars i{
  display:block;
  width:3px;
  height:6px;
  border-radius:3px;
  background:#43b96f
}

.voice-speaking-bars i:nth-child(2){height:12px}
.voice-speaking-bars i:nth-child(3){height:9px}

.voice-person.speaking .voice-speaking-bars{opacity:1}

.voice-person.speaking .voice-speaking-bars i{
  animation:voiceBars .65s ease-in-out infinite alternate
}

.voice-person.speaking .voice-speaking-bars i:nth-child(2){animation-delay:.15s}
.voice-person.speaking .voice-speaking-bars i:nth-child(3){animation-delay:.3s}

@keyframes voiceBars{
  from{transform:scaleY(.45)}
  to{transform:scaleY(1)}
}

.voice-mic-indicator{font-size:1rem}

.voice-empty{
  padding:26px;
  text-align:center;
  color:#647b8b;
  border:1px dashed #cbdbe5;
  border-radius:12px
}

.voice-controls{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:18px
}

.voice-control{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:58px;
  padding:8px 12px;
  border:1px solid #cbdbe5;
  border-radius:12px;
  background:#fff;
  color:#153f5b;
  font-weight:900;
  cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease
}

.voice-control:not(:disabled):hover{
  transform:translateY(-1px);
  border-color:#8db8d1;
  box-shadow:0 5px 14px rgba(13,82,125,.08)
}

.voice-control:disabled{
  cursor:not-allowed;
  opacity:.58
}

.voice-control>span:last-child{
  display:grid;
  text-align:left
}

.voice-control small{
  margin-top:2px;
  color:#6c8190;
  font-size:.68rem;
  font-weight:650
}

.voice-control-icon{font-size:1.25rem}

.voice-control.is-off{
  border-color:#efc6c6;
  background:#fff7f7;
  color:#8a2f2f
}

.voice-control.is-blocked{
  border-color:#f1d28b;
  background:#fffaf0;
  color:#72500b
}

.voice-leave{
  grid-column:1/-1;
  min-height:50px;
  border:0;
  background:#9b2f38;
  color:#fff
}

.voice-leave:hover{background:#872832}

.voice-error{
  margin-top:14px;
  padding:11px;
  border-radius:10px;
  background:#fff1f1;
  color:#8b2630;
  font-weight:750
}

.voice-error[hidden]{display:none}

#crcVoiceAudio{
  position:fixed;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden
}

@media(max-width:520px){
  .voice-dialog-head{padding-right:54px}
  .voice-head-status{gap:7px}
  .voice-quality{padding-left:0;border-left:0}
  .voice-controls{grid-template-columns:1fr}
  .voice-leave{grid-column:auto}
  .voice-participant-list{grid-template-columns:1fr}
  .voice-person{grid-template-columns:34px minmax(0,1fr) auto}
  .voice-speaking-bars{display:none}
}


@media(min-width:521px) and (max-width:680px){
  .voice-dialog{width:min(650px,calc(100% - 1rem))}
  .voice-person{grid-template-columns:32px minmax(0,1fr) auto}
  .voice-avatar{width:32px;height:32px}
  .voice-speaking-bars{display:none}
}