.right-panel{
display:flex;
flex-direction:column;
gap:20px;
}
.panel{
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius);
padding:20px;
backdrop-filter:blur(18px);
box-shadow:var(--shadow);
transition:var(--transition);
}
.panel:hover{
border-color:rgba(124,92,255,.35);
}
.panel-header{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:18px;
}
.panel-header h3{
font-size:16px;
font-weight:700;
}
.badge{
padding:5px 12px;
border-radius:30px;
font-size:11px;
font-weight:700;
text-transform:uppercase;
}
.badge.success{
background:rgba(34,197,94,.15);
color:var(--success);
}
.voice-card{
display:flex;
flex-direction:column;
gap:18px;
}
.voice-status{
display:flex;
align-items:center;
gap:12px;
padding:16px;
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.05);
border-radius:16px;
}
.pulse{
width:14px;
height:14px;
border-radius:50%;
background:var(--danger);
box-shadow:0 0 12px var(--danger);
animation:pulse 1.6s infinite;
}
.voice-status.connected .pulse{
background:var(--success);
box-shadow:0 0 12px var(--success);
}
#voiceStatus{
font-size:14px;
font-weight:600;
}
.voice-controls{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:8px;
}
.panel-btn{
height:44px;
border-radius:14px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
color:#fff;
font-size:13px;
font-weight:600;
transition:var(--transition);
padding:0 6px;
white-space:nowrap;
}
.panel-btn:hover{
background:rgba(255,255,255,.08);
transform:translateY(-2px);
}
.panel-btn.primary{
background:linear-gradient(135deg,var(--primary),var(--secondary));
border:none;
box-shadow:0 10px 25px rgba(124,92,255,.35);
}
.panel-btn.primary:hover{
box-shadow:0 15px 35px rgba(124,92,255,.45);
}
.panel-btn.danger{
background:rgba(239,68,68,.15);
border:1px solid rgba(239,68,68,.25);
color:#FCA5A5;
}
.panel-btn.danger:hover{
background:rgba(239,68,68,.25);
}
.voice-users{
display:flex;
flex-direction:column;
gap:12px;
max-height:260px;
overflow-y:auto;
}
.voice-user{
display:flex;
align-items:center;
gap:12px;
padding:12px;
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.05);
border-radius:16px;
transition:var(--transition);
}
.voice-user:hover{
background:rgba(255,255,255,.06);
}
.voice-avatar{
width:46px;
height:46px;
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,var(--primary),var(--secondary));
color:#fff;
font-weight:700;
font-size:18px;
position:relative;
}
.voice-avatar.speaking::after{
content:"";
position:absolute;
inset:-4px;
border:2px solid var(--success);
border-radius:18px;
animation:voiceRing 1s infinite;
}
.voice-info{
flex:1;
}
.voice-info h4{
font-size:14px;
margin-bottom:3px;
}
.voice-info span{
font-size:12px;
color:var(--muted);
}
.voice-level{
width:80px;
height:6px;
background:rgba(255,255,255,.08);
border-radius:30px;
overflow:hidden;
}
.voice-level div{
height:100%;
width:40%;
background:linear-gradient(90deg,var(--success),var(--secondary));
border-radius:30px;
transition:.2s;
}
.wave{
display:flex;
align-items:flex-end;
justify-content:center;
gap:3px;
height:26px;
}
.wave span{
width:4px;
border-radius:20px;
background:var(--secondary);
animation:wave 1.1s infinite ease-in-out;
}
.wave span:nth-child(1){height:10px;animation-delay:.1s;}
.wave span:nth-child(2){height:18px;animation-delay:.2s;}
.wave span:nth-child(3){height:24px;animation-delay:.3s;}
.wave span:nth-child(4){height:14px;animation-delay:.4s;}
.wave span:nth-child(5){height:20px;animation-delay:.5s;}

/* Video Meeting Grid & Tile Styling */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.video-tile {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.video-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-tile-badge {
  position: absolute;
  bottom: 6px;
  left: 6px;
  right: 6px;
  padding: 4px 8px;
  background: rgba(10, 15, 30, 0.75);
  backdrop-filter: blur(8px);
  border-radius: 8px;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}