.call-overlay {
    position: fixed;
    inset: 0;
    background: rgba(13, 0, 26, 0.95);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.call-card {
    text-align: center;
    padding: 40px;
    max-width: 420px;
    width: 90%;
}
.call-avatar-big {
    width: 140px;
    height: 140px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 56px;
    font-weight: 700;
    color: white;
    filter: drop-shadow(0 0 30px rgba(176, 110, 243, 0.4));
    overflow: hidden;
}
.call-avatar-big img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.call-card h2 {
    color: var(--text-primary);
    margin-bottom: 8px;
    font-size: 24px;
}
.call-type-label {
    color: var(--text-secondary);
    font-size: 16px;
    margin-bottom: 40px;
}
#call-timer {
    color: var(--accent);
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 30px;
}
.call-buttons {
    display: flex;
    justify-content: center;
    gap: 60px;
    margin-top: 40px;
}
.call-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.call-btn {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, box-shadow 0.2s;
}
.call-btn svg {
    width: 28px;
    height: 28px;
    display: block;
}
.call-btn:hover {
    transform: scale(1.08);
}
.call-btn:active {
    transform: scale(0.96);
}
.call-btn.accept {
    background: var(--success);
    color: white;
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.35);
}
.call-btn.reject {
    background: var(--danger);
    color: white;
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.35);
}
/* Rejected/ended call: the handset points down */
.call-btn.reject svg {
    transform: rotate(135deg);
}
.call-btn-label {
    font-size: 13px;
    color: var(--text-secondary);
}
.call-controls {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 14px;
    gap: 16px;
    margin-top: 40px;
}
.call-control-btn {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.call-control-btn svg {
    width: 24px;
    height: 24px;
    display: block;
}
.call-control-btn:hover {
    background: var(--bg-secondary);
    transform: scale(1.05);
}
.call-control-btn.hangup {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}
.call-control-btn.hangup svg {
    transform: rotate(135deg);
}
.call-control-btn.muted {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
    position: relative;
}
/* Diagonal slash over the icon when muted/off */
.call-control-btn.muted::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 32px;
    height: 2.5px;
    background: #fff;
    border-radius: 2px;
    transform: translate(-50%, -50%) rotate(-45deg);
    pointer-events: none;
}
#remote-video {
    width: 100%;
    max-height: 50vh;
    border-radius: 16px;
    margin-bottom: 20px;
    background: #000;
}
#local-video {
    position: absolute;
    bottom: 120px;
    right: 20px;
    width: 120px;
    height: 160px;
    border-radius: 12px;
    border: 2px solid var(--accent);
    background: #000;
    cursor: grab;
    touch-action: none;
    box-shadow: 0 4px 16px var(--shadow);
}
#local-video.dragging {
    cursor: grabbing;
    opacity: 0.85;
    box-shadow: 0 8px 28px var(--shadow);
}
/* Outgoing call — ringing animation */
.call-ringing .call-avatar-big {
    animation: ringPulse 1.5s ease-in-out infinite;
}
@keyframes ringPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}
.call-minimize-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    font-size: 20px;
    cursor: pointer;
    z-index: 1;
}
.call-minimize-btn:hover {
    background: rgba(255, 255, 255, 0.18);
}
/* Floating minimized-call pill */
#call-minibar {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--success);
    color: #fff;
    padding: 8px 18px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 4px 16px var(--shadow);
    z-index: 9998;
    cursor: pointer;
    animation: fadeIn 0.2s ease;
}
#call-minibar-timer {
    opacity: 0.85;
    font-weight: 400;
}
@media (max-width: 768px) {
    .call-card {
        padding: 30px 20px;
    }
    .call-buttons {
        gap: 40px;
    }
    .call-controls {
        gap: 12px;
        margin-top: 28px;
    }
    .call-control-btn {
        width: 48px;
        height: 48px;
    }
    .call-control-btn svg {
        width: 20px;
        height: 20px;
    }
    #local-video {
        width: 90px;
        height: 120px;
        bottom: 140px;
        right: 16px;
    }
}

/* ===== Group voice channel (Discord-like) ===== */
.voice-header-btn{position:relative;display:flex;align-items:center;gap:3px;color:var(--text-secondary)}
.voice-header-btn.connected{color:var(--success)}
.voice-header-count{font-size:12px;font-weight:700;min-width:10px;text-align:left}

/* ===== Channel live broadcast header button — pulses red while a broadcast you
   haven't joined yet is in progress, so it reads as "live now, tap to join". ===== */
.channel-live-header-btn{font-size:15px}
.channel-live-header-btn.pulsing{animation:channelLivePulse 1.4s ease-in-out infinite}
@keyframes channelLivePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(1.15)}}

/* Role status line in the live view — tells the broadcaster and the listeners exactly
   what they're doing and who's on air. */
.channel-live-status{text-align:center;font-size:13px;color:var(--text-secondary);padding:6px 12px 2px}
.voice-tile-you{font-size:11px;color:var(--accent);font-weight:600}

/* Floating bottom bar — mounted at #app level so it survives switching between chats */
.voice-channel-bar{
    position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);transform:translateX(-50%);
    z-index:9000;display:flex;align-items:center;gap:14px;
    background:var(--bg-secondary);border:1px solid var(--border);border-radius:18px;
    padding:8px 10px 8px 14px;box-shadow:0 8px 30px var(--shadow);max-width:min(560px,94vw);
    animation:fadeInUp .25s ease;transition:bottom .18s ease;
}
.voice-bar-info{display:flex;align-items:center;gap:10px;min-width:0}
.voice-bar-icon{color:var(--success);flex-shrink:0}
.voice-bar-name{font-size:13px;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px;flex-shrink:0}
.voice-bar-avatars{display:flex;align-items:center;gap:0;overflow-x:auto;scrollbar-width:none;max-width:220px}
.voice-bar-avatars::-webkit-scrollbar{display:none}
.voice-avatar{
    position:relative;width:34px;height:34px;border-radius:50%;flex-shrink:0;margin-left:-8px;
    background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;
    font-size:12px;font-weight:700;border:2px solid var(--bg-secondary);cursor:pointer;overflow:hidden;
    transition:box-shadow .12s;
}
.voice-avatar:first-child{margin-left:0}
.voice-avatar img{width:100%;height:100%;object-fit:cover}
.voice-avatar.speaking{box-shadow:0 0 0 2.5px var(--success)}
.voice-avatar.has-video{cursor:pointer}
.voice-avatar-video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transform:scaleX(-1)}
.voice-mute-badge{position:absolute;bottom:-1px;right:-1px;width:15px;height:15px;border-radius:50%;background:var(--danger);display:flex;align-items:center;justify-content:center;font-size:8px;border:2px solid var(--bg-secondary)}
.voice-bar-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.voice-bar-btn{
    width:34px;height:34px;border-radius:50%;border:none;background:var(--bg-tertiary);
    color:var(--text-primary);display:flex;align-items:center;justify-content:center;cursor:pointer;
    transition:background .15s,color .15s;flex-shrink:0;
}
.voice-bar-btn:hover{background:var(--border)}
.voice-bar-btn.active{background:var(--danger);color:#fff}
.voice-bar-btn.leave{background:var(--danger);color:#fff}
.voice-bar-btn.leave svg{transform:rotate(135deg)}
.voice-bar-btn.leave:hover{background:#dc2626}

/* Expanded video view for one participant */
.voice-video-stage{position:relative;width:min(80vw,80vh);aspect-ratio:1;border-radius:16px;overflow:hidden;background:#000}
.voice-video-modal-el{width:100%;height:100%;object-fit:cover;display:block;transform:scaleX(-1)}
.voice-video-modal-close{position:fixed;top:calc(env(safe-area-inset-top,0px) + 16px);right:18px;background:rgba(255,255,255,.1);border:none;color:#fff;font-size:22px;width:42px;height:42px;border-radius:50%;cursor:pointer;z-index:10002}
.voice-video-modal-close:hover{background:rgba(255,255,255,.2)}

@media (max-width:768px){
    .voice-channel-bar{max-width:96vw;padding:7px 8px 7px 12px;gap:10px}
    .voice-bar-name{max-width:70px}
    .voice-bar-avatars{max-width:120px}
    .voice-bar-btn{width:32px;height:32px}
}

/* ===== Big voice room view (Discord-like grid), replaces the message list only ===== */
.voice-grid-view{flex:1;display:flex;flex-direction:column;background:var(--bg-primary);overflow:hidden;min-height:0}
.voice-grid-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;flex-shrink:0}
.voice-grid-title{font-size:14px;font-weight:700;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.voice-grid-collapse{background:var(--bg-tertiary);border:none;color:var(--text-primary);width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.voice-grid-collapse:hover{background:var(--border)}
.voice-grid-tiles{flex:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));grid-auto-rows:minmax(140px,1fr);gap:10px;padding:0 16px 16px;overflow-y:auto;align-content:start}
.voice-tile{position:relative;border-radius:14px;background:var(--bg-tertiary);display:flex;align-items:center;justify-content:center;overflow:hidden;border:2.5px solid transparent;transition:border-color .12s}
.voice-tile.speaking{border-color:var(--success)}
.voice-tile-avatar{width:25%;max-width:88px;min-width:48px;aspect-ratio:1;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;flex-shrink:0}
.voice-tile-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.voice-tile-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.voice-tile-video.mirrored{transform:scaleX(-1)}
.voice-tile-label{position:absolute;left:8px;bottom:8px;right:8px;display:flex;align-items:center;gap:5px;background:rgba(0,0,0,.55);padding:4px 10px;border-radius:10px;font-size:12px;color:#fff;font-weight:600}
.voice-tile-label span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.voice-tile-mute{flex-shrink:0}
.voice-grid-controls{display:flex;align-items:center;justify-content:center;gap:16px;padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px));flex-shrink:0;border-top:1px solid var(--border)}
.voice-grid-controls .voice-bar-btn{width:48px;height:48px}
@media (max-width:768px){
    .voice-grid-tiles{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));grid-auto-rows:minmax(110px,1fr);padding:0 10px 10px}
    .voice-grid-controls{gap:12px}
}

/* ===== Screen sharing ===== */

/* "Started sharing" highlight for the 1:1 call control button — a distinct highlighted
   state (not the red .muted "off" look used elsewhere on this button row). */
.call-control-btn.sharing{background:var(--accent);border-color:var(--accent);color:#fff}

/* Small clickable "{name} ведёт стрим" card/tile. Same class is reused in the 1:1 call
   overlay (floated near the top) and as an extra tile appended to the voice-channel grid. */
.screenshare-card{
    display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
    border-radius:14px;padding:8px 14px;color:#fff;font-size:13px;font-weight:600;
    transition:background .15s;
}
.screenshare-card:hover{background:rgba(255,255,255,.16)}
#call-screenshare-card{position:absolute;top:20px;right:20px}
.voice-tile.screenshare-card{
    flex-direction:column;justify-content:center;gap:6px;background:var(--bg-tertiary);
    border:2.5px solid transparent;padding:0;color:var(--text-primary);
}
.voice-tile.screenshare-card:hover{background:var(--border)}
.voice-tile.screenshare-card span{font-size:12px;text-align:center;padding:0 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}

/* Fullscreen viewer */
.screenshare-viewer{
    position:fixed;inset:0;z-index:10500;background:#000;
    display:flex;flex-direction:column;animation:fadeIn .2s ease;
}
.screenshare-viewer-topbar{
    display:flex;align-items:center;gap:10px;padding:12px 16px;
    background:linear-gradient(rgba(0,0,0,.6),transparent);flex-shrink:0;
}
.screenshare-viewer-label{flex:1;color:#fff;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.screenshare-viewer-btn{
    width:38px;height:38px;border-radius:50%;border:none;background:rgba(255,255,255,.12);
    color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.screenshare-viewer-btn:hover{background:rgba(255,255,255,.22)}
.screenshare-viewer-stage{flex:1;display:flex;align-items:center;justify-content:center;min-height:0}
.screenshare-stage-video{max-width:100%;max-height:100%;object-fit:contain;display:block}

/* Draggable minimized PiP window */
.screenshare-pip{
    position:fixed;left:auto;top:auto;right:20px;bottom:calc(env(safe-area-inset-bottom,0px) + 90px);
    width:260px;aspect-ratio:16/9;z-index:10400;border-radius:12px;overflow:hidden;
    background:#000;box-shadow:0 8px 30px var(--shadow);cursor:grab;touch-action:none;
}
.screenshare-pip.dragging{cursor:grabbing;opacity:.9;box-shadow:0 12px 36px var(--shadow)}
.screenshare-pip-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.screenshare-pip .screenshare-stage-video{width:100%;height:100%}
.screenshare-pip-bar{
    position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:6px;
    padding:6px 8px;background:linear-gradient(transparent,rgba(0,0,0,.65));
}
.screenshare-pip-label{flex:1;color:#fff;font-size:11px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.screenshare-pip-btn{
    width:24px;height:24px;border-radius:50%;border:none;background:rgba(255,255,255,.18);
    color:#fff;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.screenshare-pip-btn:hover{background:rgba(255,255,255,.3)}
@media (max-width:768px){
    .screenshare-pip{width:170px;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 110px)}
}