/* ==================== Call UI (Phase 9) ==================== */
/* Lazy-loaded: only fetched when a call/stream/recording feature is used */
/* WhatsApp-inspired full-screen call design */

/* =====================================================
   INCOMING CALL — Full-screen overlay (WhatsApp style)
   ===================================================== */

.incoming-call-screen {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    animation: callFadeIn 0.3s ease-out;
}

.incoming-call-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #0d1b2a 0%, #1b263b 40%, #415a77 100%);
    z-index: -1;
}

@keyframes callFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.incoming-call-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 60px 24px 48px;
}

.incoming-call-top {
    text-align: center;
}

.incoming-call-label {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 500;
}

.incoming-call-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.incoming-call-avatar-ring {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: callRingPulse 2s ease-in-out infinite;
    background: rgba(255, 255, 255, 0.08);
}

@keyframes callRingPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2), 0 0 0 0 rgba(255, 255, 255, 0.1); }
    50% { box-shadow: 0 0 0 20px rgba(255, 255, 255, 0), 0 0 0 40px rgba(255, 255, 255, 0); }
}

.incoming-call-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4a90d9, #357abd);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
}

.incoming-call-name {
    font-size: 28px;
    font-weight: 600;
    color: #ffffff;
    text-align: center;
}

.incoming-call-type {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.6);
}

.incoming-call-actions {
    display: flex;
    gap: 64px;
    align-items: center;
    padding-bottom: 16px;
}

.incoming-call-action-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.incoming-call-btn {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, box-shadow 0.15s;
}

.incoming-call-btn:hover {
    transform: scale(1.08);
}

.incoming-call-btn:active {
    transform: scale(0.95);
}

.incoming-call-btn-icon {
    font-size: 28px;
}

.reject-btn {
    background: #e53935;
    color: white;
    box-shadow: 0 4px 20px rgba(229, 57, 53, 0.4);
}

.accept-btn {
    background: #43a047;
    color: white;
    box-shadow: 0 4px 20px rgba(67, 160, 71, 0.4);
}

.accept-btn.accept-video {
    background: #1e88e5;
    box-shadow: 0 4px 20px rgba(30, 136, 229, 0.4);
}

.incoming-call-btn-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

/* =====================================================
   ACTIVE CALL SCREEN (CallView)
   ===================================================== */

.call-screen {
    position: fixed;
    inset: 0;
    background: #0a0a14;
    z-index: 9999;
    display: flex;
    flex-direction: column;
}

/* --- Video Call --- */
.call-screen-video .call-video-container {
    flex: 1;
    position: relative;
    overflow: hidden;
}

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

.call-local-pip {
    position: absolute;
    top: 56px;
    right: 16px;
    width: 110px;
    height: 150px;
    border-radius: 14px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    z-index: 2;
    object-fit: cover;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.call-local-mirrored {
    transform: scaleX(-1);
}

.call-video-top-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
    z-index: 1;
}

.call-video-name {
    font-size: 16px;
    font-weight: 600;
    color: white;
    flex: 1;
}

.call-video-timer {
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.9);
}

/* Preview mode (ringing/connecting) */
.call-preview-mode {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0a0a14;
    position: relative;
}

.call-local-fullscreen {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.call-status-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 60px 24px 24px;
    text-align: center;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
    z-index: 1;
}

.call-status-name {
    display: block;
    font-size: 22px;
    font-weight: 600;
    color: white;
    margin-bottom: 6px;
}

.call-status-text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

/* --- Audio Call --- */
.call-screen-audio {
    background: linear-gradient(135deg, #0d1b2a 0%, #1b263b 40%, #415a77 100%);
}

.call-audio-screen {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    gap: 16px;
}

.call-audio-top {
    text-align: center;
}

.call-audio-timer {
    font-size: 18px;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.9);
}

.call-audio-status {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.6);
}

.call-audio-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.call-audio-avatar-ring {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
}

.call-audio-avatar-ring.connected {
    animation: callAudioPulse 3s ease-in-out infinite;
}

@keyframes callAudioPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(67, 160, 71, 0.3); }
    50% { box-shadow: 0 0 0 24px rgba(67, 160, 71, 0); }
}

.call-audio-avatar {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4a90d9, #357abd);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 52px;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
}

.call-audio-name {
    font-size: 26px;
    font-weight: 600;
    color: #ffffff;
}

/* Recording badge */
.call-rec-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #e53935;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
}

.call-rec-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e53935;
    animation: recDotPulse 1s infinite;
}

@keyframes recDotPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* =====================================================
   CALL CONTROLS BAR (bottom of call screen)
   ===================================================== */

.call-controls-bar {
    padding: 16px 24px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    width: 100%;
}

/* Auto-ausblendbare Steuerleiste als Overlay: der Call nutzt die volle Flaeche, statt dass die
   Leiste unten festen Platz wegnimmt. Desktop: Hover am unteren Bildrand (.call-controls-hotzone)
   faehrt sie aus. Touch: die Griff-Lasche haelt sie offen (.pinned via _controlsPinned). Der Griff
   schaut immer ein Stueck heraus, damit die Leiste auffindbar bleibt. */
.call-controls-layer {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 30;
    pointer-events: none;
}

.call-controls-hotzone {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 46px;
    pointer-events: auto;
}

.call-controls-panel {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: auto;
    /* ueber der System-Navigationsleiste halten (Android/iOS), damit die Buttons erreichbar sind */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(calc(100% - 26px));   /* eingefahren: nur der Griff schaut heraus */
    transition: transform .22s ease;
    will-change: transform;
}

/* Desktop (Zeiger mit Hover): Hover am unteren Rand oder ueber der Leiste blendet sie ein. */
.call-controls-hotzone:hover ~ .call-controls-panel,
.call-controls-panel:hover {
    transform: translateY(0);
}

/* Touch (kein Hover, z.B. Handy): die Hover-Zone bringt nichts und der Griff liegt leicht unter
   der System-Leiste. Darum ist die Steuerleiste hier standardmaessig SICHTBAR (Buttons erreichbar),
   und der Griff klappt sie bei Bedarf ein (.collapsed). Behebt "keine Buttons sichtbar" auf Android. */
@media (hover: none) {
    .call-controls-hotzone { display: none; }
    .call-controls-panel { transform: translateY(0); }
    .call-controls-layer.collapsed .call-controls-panel {
        transform: translateY(calc(100% - 26px - env(safe-area-inset-bottom, 0px)));
    }
}

.call-controls-handle {
    width: 54px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    border: none;
    border-radius: 12px 12px 0 0;
    cursor: pointer;
    flex: 0 0 auto;
}
.call-controls-handle span {
    width: 32px; height: 4px; border-radius: 2px;
    background: rgba(255, 255, 255, 0.65);
    transition: background .15s;
}
.call-controls-handle:hover span { background: #fff; }

/* Angedockter PiP-Modus: Leiste immer sichtbar (zu klein zum Verstecken). */
.call-docked-panel .call-controls-layer { position: static; pointer-events: auto; }
.call-docked-panel .call-controls-panel { position: static; transform: none; }
.call-docked-panel .call-controls-hotzone,
.call-docked-panel .call-controls-handle { display: none; }

.call-controls-row {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.call-ctrl-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.call-ctrl-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.15s;
}

.call-ctrl-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}

.call-ctrl-btn:active {
    transform: scale(0.95);
}

.call-ctrl-btn.active {
    background: rgba(255, 255, 255, 0.35);
}

.call-ctrl-btn.recording-active {
    background: rgba(229, 57, 53, 0.3);
}

.call-ctrl-icon {
    font-size: 22px;
}

.call-ctrl-icon.rec-icon {
    color: #e53935;
}

.call-ctrl-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.call-hangup-row {
    display: flex;
    justify-content: center;
}

.call-hangup-btn {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: none;
    background: #e53935;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(229, 57, 53, 0.4);
    transition: transform 0.15s, background 0.15s;
}

.call-hangup-btn:hover {
    background: #c62828;
    transform: scale(1.05);
}

.call-hangup-btn:active {
    transform: scale(0.95);
}

.call-hangup-icon {
    font-size: 28px;
}

/* Mobile adjustments for call controls */
@media (max-width: 480px) {
    .call-controls-row { gap: 12px; }
    .call-ctrl-btn { width: 48px; height: 48px; }
    .call-hangup-btn { width: 60px; height: 60px; }
    .incoming-call-actions { gap: 48px; }
    .incoming-call-btn { width: 62px; height: 62px; }
    .incoming-call-content { padding: 40px 20px 36px; }
}

/* --- Group Call Grid --- */
.group-call-grid {
    display: grid;
    gap: 4px;
    flex: 1;
    padding: 4px;
}

.group-call-grid.grid-2 { grid-template-columns: 1fr 1fr; }
.group-call-grid.grid-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.group-call-grid.grid-9 { grid-template-columns: 1fr 1fr 1fr; }
.group-call-grid.grid-16 { grid-template-columns: 1fr 1fr 1fr 1fr; }

.participant-tile {
    position: relative;
    background: #1a1a2e;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
}

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

.participant-tile-name {
    position: absolute;
    bottom: 8px;
    left: 8px;
    color: white;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.5);
    padding: 2px 8px;
    border-radius: 4px;
}

.participant-tile-muted {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 14px;
}

/* --- Stream View --- */
.stream-view {
    flex: 1;
    position: relative;
}

.stream-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #ef4444;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    z-index: 1;
}

.stream-viewer-count {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 1;
}

/* --- Recording Indicator --- */
.recording-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ef4444;
    font-size: 12px;
    font-weight: 600;
}

.recording-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    animation: recordingPulse 1s infinite;
}

@keyframes recordingPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* --- PiP (Picture-in-Picture mini view) --- */
.pip-container {
    position: fixed;
    bottom: 80px;
    right: 16px;
    width: 180px;
    height: 120px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    z-index: 9998;
    cursor: pointer;
}

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

/* --- Call Notification Banner --- */
.call-notification {
    background: var(--em-bg-tertiary, #2a2a3e);
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--em-text-secondary, #a0a0a0);
    border-bottom: 1px solid var(--em-border, #333);
    cursor: pointer;
}

.call-notification:hover {
    background: var(--em-surface-hover);
}

.call-notification-icon {
    font-size: 18px;
}

.call-notification-text {
    flex: 1;
}

.call-notification-btn {
    background: var(--em-accent, #5b5bd6);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 12px;
    cursor: pointer;
}

.call-notification-btn:hover {
    background: var(--em-accent-hover, #4a4ac4);
}

/* --- PiP Controls --- */
.pip-visible {
    display: block;
}

.pip-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px;
    background: linear-gradient(180deg, rgba(0,0,0,0.6), transparent);
    z-index: 1;
}

.pip-title {
    font-size: 11px;
    color: white;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pip-close {
    background: none;
    border: none;
    color: white;
    font-size: 14px;
    cursor: pointer;
    padding: 0 4px;
}

.pip-controls {
    position: absolute;
    bottom: 4px;
    right: 4px;
    z-index: 1;
}

.pip-btn {
    background: rgba(0,0,0,0.5);
    border: none;
    color: white;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 12px;
    cursor: pointer;
}

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

/* --- Stream Browser --- */
.stream-browser {
    padding: 8px;
}

.stream-browser-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: var(--em-text-primary, #e0e0e0);
}

.stream-browser-empty {
    color: var(--em-text-secondary, #a0a0a0);
    font-size: 13px;
    text-align: center;
    padding: 16px;
}

.stream-browser-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stream-browser-item {
    display: flex;
    gap: 8px;
    padding: 8px;
    border-radius: 8px;
    background: var(--em-bg-tertiary, #2a2a3e);
    cursor: pointer;
    transition: background 0.15s;
}

.stream-browser-item:hover {
    background: var(--em-surface-hover);
}

.stream-browser-preview {
    width: 80px;
    height: 50px;
    border-radius: 6px;
    background: #1a1a2a;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stream-browser-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.stream-browser-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--em-text-primary, #e0e0e0);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stream-browser-streamer {
    font-size: 12px;
    color: var(--em-text-secondary, #a0a0a0);
}

.stream-browser-viewers {
    font-size: 11px;
    color: var(--em-text-muted);
}

/* --- Live Badge in Sidebar Tab --- */
.live-badge {
    background: #e53935 !important;
    animation: pulse-live 1.5s ease-in-out infinite;
}

@keyframes pulse-live {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* --- Screen Share Picker --- */
.screen-share-desc {
    color: var(--em-text-secondary, #a0a0a0);
    margin-bottom: 16px;
    font-size: 14px;
}

/* --- Recording Controls --- */
.recording-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.recording-icon {
    color: #e53935;
}

.recording-start .control-icon {
    color: #e53935;
}

.recording-timer {
    font-family: monospace;
    font-size: 12px;
    margin-left: 4px;
}

/* --- Voice Message Recording --- */
.btn-voice-record {
    background: none;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    padding: 4px 8px;
    color: var(--em-text-secondary);
    transition: color 0.2s;
    border-radius: 50%;
    line-height: 1;
}

.btn-voice-record:hover {
    color: var(--em-primary);
}

.btn-voice-record:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.voice-recording-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--em-bg-primary);
    border-radius: 8px;
    animation: voice-bar-in 0.2s ease;
}

@keyframes voice-bar-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.voice-rec-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e53935;
    animation: voice-pulse 1s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes voice-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.85); }
}

.voice-rec-timer {
    font-family: monospace;
    font-size: 1.1rem;
    color: var(--em-text-primary);
    min-width: 40px;
    flex: 1;
}

.voice-rec-cancel {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--em-text-secondary);
    padding: 6px 10px;
    border-radius: 50%;
    transition: background 0.2s, color 0.2s;
}

.voice-rec-cancel:hover {
    background: rgba(229, 57, 53, 0.1);
    color: #e53935;
}

.voice-rec-send {
    background: var(--em-primary);
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: white;
    padding: 8px 12px;
    border-radius: 50%;
    transition: background 0.2s;
}

.voice-rec-send:hover {
    filter: brightness(1.1);
}

/* Paused dot — no pulse */
.voice-rec-dot.paused {
    animation: none;
    opacity: 0.5;
}

/* Pause / Resume / Stop buttons (shared) */
.rec-btn {
    background: none;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 50%;
    transition: background 0.2s, color 0.2s;
    line-height: 1;
    color: var(--em-text-secondary);
}

.rec-btn:hover {
    background: rgba(128, 128, 128, 0.15);
}

.rec-btn.rec-pause:hover {
    color: #fb8c00;
}

.rec-btn.rec-resume:hover {
    color: var(--em-primary);
}

.rec-btn.rec-stop {
    color: #e53935;
}

.rec-btn.rec-stop:hover {
    background: rgba(229, 57, 53, 0.12);
}

/* Preview bar (voice + video) */
.rec-preview-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--em-bg-primary);
    border-radius: 8px;
    animation: voice-bar-in 0.2s ease;
}

.rec-preview-player {
    flex: 1;
    min-width: 0;
    height: 36px;
    border-radius: 6px;
}

.rec-preview-duration {
    font-family: monospace;
    font-size: 0.85rem;
    color: var(--em-text-secondary);
    white-space: nowrap;
}

.rec-preview-bar.video-preview {
    flex-direction: column;
    align-items: stretch;
}

.rec-preview-bar.video-preview .video-rec-preview-wrap {
    max-width: 320px;
    align-self: center;
}

.video-rec-preview.playback,
.rec-preview-bar.video-preview .video-rec-preview {
    transform: none;
}

.rec-preview-bar.video-preview .video-rec-controls {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}

.voice-error {
    padding: 4px 12px;
    font-size: 0.8rem;
    color: #e53935;
    text-align: center;
}

/* --- Video Message Recording --- */
.video-quality-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.btn-video-record {
    background: none;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    padding: 4px 8px;
    color: var(--em-text-secondary);
    transition: color 0.2s;
    border-radius: 50%;
    line-height: 1;
}

.btn-video-record:hover {
    color: var(--em-primary);
}

.btn-video-record:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Die Qualitaetsmarke neben dem Video-Knopf.

   Sie sass als gefuellter Block mit fetten Versalien ("MEDIUM") zwischen lauter flaechenlosen
   Symbolknoepfen und zog den Blick auf sich — eine Nebeneinstellung, die aussah wie die
   Hauptsache. Sie traegt jetzt die beiden Farben des Systems: dunkelgraue Flaeche, blaue
   Schrift. Damit gehoert sie sichtbar dazu, ohne sich vorzudraengen. */
.btn-video-quality {
    background: var(--em-surface-raised);
    border: 1px solid var(--em-line-strong);
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: .02em;
    padding: 3px 9px;
    cursor: pointer;
    color: var(--em-accent);
    line-height: 1.3;
    margin-left: 0;
    transition: background .12s, border-color .12s, color .12s;
}

.btn-video-quality:hover:not(:disabled) {
    background: var(--em-surface-hover);
    border-color: var(--em-accent-dim);
    color: var(--em-accent-hover);
}

/* Aufgeklappt gefuellt — sonst sucht man, was das Menue geoeffnet hat. */
.btn-video-quality.is-open {
    background: var(--em-accent-wash);
    border-color: var(--em-accent);
    color: var(--em-accent);
}

.btn-video-quality:focus-visible {
    outline: 2px solid var(--em-accent);
    outline-offset: 1px;
}

.btn-video-quality:disabled {
    opacity: .5;
    cursor: default;
}

.btn-video-quality:hover {
    color: var(--em-primary);
    border-color: var(--em-primary);
}

.btn-video-quality:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.video-quality-dropdown {
    position: absolute;
    bottom: 100%;
    right: 0;
    background: var(--em-surface-raised);
    border: 1px solid var(--em-line-strong);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 100;
    min-width: 140px;
    padding: 4px 0;
    margin-bottom: 4px;
}

.video-quality-option {
    display: block;
    width: 100%;
    background: none;
    border: none;
    padding: 6px 12px;
    text-align: left;
    font-size: 0.85rem;
    cursor: pointer;
    color: var(--em-text-primary);
    transition: background 0.15s;
}

.video-quality-option:hover {
    background: var(--em-surface-hover);
}

/* Die gewaehlte Stufe in derselben Systemfarbe wie der Knopf, mit einer schwachen Flaeche
   dahinter — allein an der Schriftfarbe ist sie in einer Liste leicht zu uebersehen. */
.video-quality-option.active {
    color: var(--em-accent);
    background: var(--em-accent-wash);
    font-weight: 600;
}

.video-recording-bar {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    padding: 8px 12px;
    background: var(--em-bg-primary);
    border-radius: 8px;
    animation: voice-bar-in 0.2s ease;
}

.video-rec-preview-wrap {
    position: relative;
    flex: 1;
    max-width: 240px;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
}

.video-rec-preview {
    width: 100%;
    height: auto;
    display: block;
    transform: scaleX(-1);
}

.video-rec-overlay {
    position: absolute;
    top: 6px;
    left: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.5);
    padding: 2px 8px;
    border-radius: 12px;
}

.video-rec-overlay .voice-rec-timer {
    color: #fff;
    font-size: 0.85rem;
}

.video-rec-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* --- Camera Switcher --- */
.camera-switch-btn {
    position: relative;
}

.camera-switch-wrapper {
    position: relative;
    display: inline-block;
}

.camera-picker-dropdown {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--em-bg-primary);
    border: 1px solid var(--em-border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 100;
    min-width: 180px;
    padding: 4px 0;
    margin-bottom: 4px;
}

.camera-picker-dropdown.call-camera-dropdown {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 4px;
}

.camera-picker-option {
    display: block;
    width: 100%;
    background: none;
    border: none;
    padding: 8px 12px;
    text-align: left;
    font-size: 0.85rem;
    cursor: pointer;
    color: var(--em-text-primary);
    transition: background 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.camera-picker-option:hover {
    background: var(--em-bg-secondary);
}

.camera-picker-option.active {
    color: var(--em-primary);
    font-weight: 600;
}

/* --- Media Caption Input --- */
.rec-preview-caption {
    width: 100%;
    padding: 6px 12px;
    border: 1px solid var(--em-border);
    border-radius: 6px;
    font-size: 0.85rem;
    background: var(--em-bg-secondary);
    color: var(--em-text-primary);
    outline: none;
    margin-top: 6px;
}

.rec-preview-caption:focus {
    border-color: var(--em-primary);
}

.rec-preview-bar.video-preview .rec-preview-caption {
    flex: 1;
    margin-top: 0;
    min-width: 0;
}

/* === Video Recording/Preview Overlay === */
.video-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: video-overlay-in 0.2s ease;
}

@keyframes video-overlay-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.video-overlay-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90vw;
    max-width: 640px;
    max-height: 90vh;
}

.video-overlay-preview {
    position: relative;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.video-overlay-video {
    width: 100%;
    height: auto;
    display: block;
    max-height: 70vh;
    object-fit: contain;
    transform: scaleX(-1);
}

.video-overlay-video.playback {
    transform: none;
}

/* Recording badge (top-left) */
.video-overlay-rec-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.6);
    padding: 4px 12px;
    border-radius: 16px;
    backdrop-filter: blur(4px);
}

.video-overlay-timer {
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Controls bar below video */
.video-overlay-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 10px 16px;
    background: rgba(30, 30, 30, 0.9);
    border-radius: 12px;
    backdrop-filter: blur(8px);
    width: 100%;
    justify-content: center;
}

.video-overlay-btn {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #fff;
    font-size: 1.3rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, transform 0.1s;
}

.video-overlay-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}

.video-overlay-btn:active {
    transform: scale(0.95);
}

.video-overlay-stop {
    background: #e53935;
    font-size: 1.1rem;
}

.video-overlay-stop:hover {
    background: #c62828;
}

.video-overlay-cancel {
    background: rgba(255, 255, 255, 0.1);
    font-size: 1rem;
}

.video-overlay-send {
    background: var(--em-primary);
    font-size: 1.2rem;
    width: 48px;
    height: 48px;
}

.video-overlay-send:hover {
    background: var(--em-primary-hover, #1976d2);
}

/* Caption input in overlay */
.video-overlay-caption {
    flex: 1;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    outline: none;
    min-width: 0;
}

.video-overlay-caption::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.video-overlay-caption:focus {
    border-color: var(--em-primary);
    background: rgba(255, 255, 255, 0.15);
}

/* Duration label */
.video-overlay-duration {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Camera picker positioned above controls in overlay */
.video-overlay-picker {
    bottom: auto;
    top: auto;
    position: fixed;
    transform: translate(-50%, -100%);
    margin-bottom: 8px;
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .video-overlay-content {
        width: 95vw;
    }

    .video-overlay-controls {
        gap: 8px;
        padding: 8px 12px;
    }

    .video-overlay-btn {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }

    .video-overlay-caption {
        font-size: 0.85rem;
        padding: 6px 10px;
    }
}

/* --- Post-Call Recording Dialog --- */
.post-call-recording-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.post-call-recording-dialog {
    background: #1e1e2e;
    border-radius: 16px;
    padding: 24px;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.post-call-recording-header {
    text-align: center;
    margin-bottom: 16px;
}

.post-call-recording-title {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 4px;
}

.post-call-recording-info {
    font-size: 0.85rem;
    color: #aaa;
}

.post-call-recording-preview {
    margin-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
}

.post-call-recording-video {
    width: 100%;
    max-height: 240px;
    background: #000;
    border-radius: 8px;
}

.post-call-recording-audio {
    width: 100%;
}

.post-call-recording-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.post-call-btn {
    flex: 1;
    padding: 10px 12px;
    border: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: opacity 0.15s;
}

.post-call-btn:hover {
    opacity: 0.85;
}

.post-call-btn-send {
    background: #25d366;
    color: #fff;
}

.post-call-btn-download {
    background: #3390ec;
    color: #fff;
}

.post-call-btn-discard {
    background: #444;
    color: #ccc;
}

/* Call recording active button styling */
.recording-active-btn .control-icon {
    color: #e53935;
}

.recording-stop-btn .control-icon {
    color: #e53935;
}

@media (max-width: 600px) {
    .post-call-recording-dialog {
        padding: 16px;
        border-radius: 12px;
    }

    .post-call-btn {
        padding: 8px 8px;
        font-size: 0.8rem;
    }
}

/* ==================== Docked Call Mode ==================== */
/* When user toggles "Chat" during a call, the call UI docks to the right
   and the main chat underneath becomes visible. */

.call-docked-panel {
    position: static !important;
    inset: unset !important;
    width: 380px;
    flex-shrink: 0;
    height: 100vh;
    height: 100dvh;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.4);
    z-index: 0 !important;
    background: #0a0a14;
    display: flex;
    flex-direction: column;
}

.call-docked-panel .call-video-container {
    border-radius: 0;
}

.call-docked-panel .call-local-pip {
    width: 80px;
    height: 110px;
    top: 44px;
    right: 10px;
}

.call-docked-panel .call-video-top-bar {
    padding: 10px 14px;
}

.call-docked-panel .call-video-name {
    font-size: 13px;
}

.call-docked-panel .call-video-timer {
    font-size: 12px;
}

.call-docked-panel .call-audio-center {
    transform: scale(0.75);
}

.call-docked-panel .call-controls-bar {
    padding: 8px 10px;
}

.call-docked-panel .call-controls-row {
    gap: 8px;
}

.call-docked-panel .call-ctrl-btn {
    width: 42px;
    height: 42px;
}

.call-docked-panel .call-ctrl-label {
    font-size: 10px;
}

.call-docked-panel .call-hangup-btn {
    width: 52px;
    height: 52px;
}

@media (max-width: 800px) {
    .call-docked-panel {
        width: 300px;
    }
}

@media (max-width: 600px) {
    .call-docked-panel {
        position: fixed !important;
        inset: 0 !important;
        width: 100%;
        height: 100%;
        z-index: 9999 !important;
    }
}

/* Docked video: show full frame (no cropping) */
.call-docked-panel .call-remote-video {
    object-fit: contain;
    background: #000;
}

/* Docked group call: vertical scroll instead of grid */
.call-docked-panel .group-call-grid {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    gap: 4px;
    padding: 4px;
}

.call-docked-panel .participant-tile {
    min-height: 200px;
    flex-shrink: 0;
}

/* Prevent chat from being pushed under docked call panel */
.call-docked-active {
    overflow: hidden;
}

.call-docked-active #chat-panel {
    min-width: 0;
    overflow: hidden;
}

/* ==================== Rejoin Banner (header area) ==================== */

.call-rejoin-banner {
    background: linear-gradient(135deg, #1a5276, #2471a3);
    color: #fff;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    animation: rejoinBannerSlideDown 0.3s ease-out;
}

@keyframes rejoinBannerSlideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.rejoin-banner-icon { font-size: 18px; flex-shrink: 0; }

.rejoin-banner-text {
    font-size: 14px;
    font-weight: 500;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rejoin-banner-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* ==================== Rejoin Footer Bar ==================== */

.call-rejoin-footer {
    background: linear-gradient(135deg, #1a5276, #2471a3);
    color: #fff;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    animation: rejoinFooterSlideUp 0.3s ease-out;
}

@keyframes rejoinFooterSlideUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.rejoin-footer-text {
    font-size: 14px;
    font-weight: 500;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rejoin-footer-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.btn-rejoin {
    background: #27ae60;
    color: #fff;
    border: none;
    padding: 6px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
}

.btn-rejoin:hover {
    background: #219a52;
}

.btn-dismiss {
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 6px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}

.btn-dismiss:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.6);
}

/* ==================== Peer Disconnected Overlay ==================== */

.call-peer-disconnected-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    z-index: 10;
}

.call-disconnected-icon {
    font-size: 48px;
}

.call-disconnected-text {
    font-size: 18px;
    font-weight: 600;
}

.call-disconnected-timer {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}

/* ==================== Call Waiting (Anklopfen) Banner ==================== */

.call-waiting-banner {
    position: fixed;
    top: 12px;
    right: 12px;
    background: linear-gradient(135deg, #1a3a5c, #2471a3);
    color: #fff;
    padding: 12px 16px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 10001;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    animation: callWaitingSlideIn 0.3s ease-out;
    min-width: 240px;
    max-width: 320px;
}

@keyframes callWaitingSlideIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.call-waiting-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
}

.call-waiting-icon {
    font-size: 20px;
}

.call-waiting-actions {
    display: flex;
    gap: 8px;
}

.btn-call-waiting-accept {
    flex: 1;
    background: #27ae60;
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}

.btn-call-waiting-accept:hover {
    background: #219a52;
}

.btn-call-waiting-reject {
    flex: 1;
    background: #e74c3c;
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}

.btn-call-waiting-reject:hover {
    background: #c0392b;
}

/* --- Bildausschnitt im Anruf ---------------------------------------------
 *
 * Die Vorgabe ist "cover": das Bild fuellt die Flaeche und wird dafuer
 * beschnitten. Das sieht bei passendem Seitenverhaeltnis gut aus und schneidet
 * sonst Raender weg — bei einer Kamera im Hochformat auf einer breiten Flaeche
 * fehlt oben und unten ein erheblicher Teil, ohne dass man es merkt.
 *
 * Welche der beiden Darstellungen richtig ist, haengt davon ab, was gezeigt
 * wird: bei einem Gesicht stoert der Beschnitt selten, bei einem geteilten
 * Bildschirm oder einem Whiteboard ist er fatal. Das kann die Anwendung nicht
 * wissen — also entscheidet es der Nutzer.
 *
 * Das kleine Selbstbild bleibt bewusst beschnitten: es ist eine Miniatur zur
 * Kontrolle der eigenen Position, kein Bild, das man betrachtet. Es mit Balken
 * zu versehen macht es nur kleiner.
 */
.em-video-contain .call-remote-video,
.em-video-contain .call-local-fullscreen,
.em-video-contain .participant-tile video,
.em-video-contain .stream-video {
    object-fit: contain;
    background: #000;
}