/* ============================================================================
   Screen Share — Демонстрация экрана во время звонка
   ============================================================================ */

/* Screen Share Container */
.call-screen-share-container {
    display: none;
    background: #000;
    position: relative;
}

.call-screen-share-container.active {
    display: block;
}

.call-screen-share-container video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Minimized: компактное превью видео */
.call-widget.minimized .call-screen-share-container {
    max-height: 180px;
    border-bottom: 1px solid var(--border);
}

.call-widget.minimized .call-screen-share-container video {
    max-height: 180px;
}

/* Fullscreen: видео заполняет весь экран за элементами управления */
.call-widget.fullscreen .call-screen-share-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

/* ============================================================================
   Fullscreen + Active Screen Share — контролы поверх видео
   ============================================================================ */

/* Header → компактная полоса сверху */
.call-widget.fullscreen .call-screen-share-container.active ~ .call-widget-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
    backdrop-filter: none;
    border-radius: 0;
    transition: opacity 0.3s ease;
}

/* Аватар маленький */
.call-widget.fullscreen .call-screen-share-container.active ~ .call-widget-header .call-widget-avatar {
    width: 36px;
    height: 36px;
    font-size: 15px;
    animation: none;
    box-shadow: none;
    flex-shrink: 0;
}

.call-widget.fullscreen .call-screen-share-container.active ~ .call-widget-header .call-widget-avatar img {
    width: 36px;
    height: 36px;
}

/* Инфо в строку */
.call-widget.fullscreen .call-screen-share-container.active ~ .call-widget-header .call-widget-info {
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

/* Имя компактное */
.call-widget.fullscreen .call-screen-share-container.active ~ .call-widget-header .call-widget-name {
    font-size: 15px;
    font-weight: 500;
}

/* Статус компактный */
.call-widget.fullscreen .call-screen-share-container.active ~ .call-widget-header .call-widget-status {
    font-size: 13px;
    opacity: 0.7;
}

/* Таймер компактный */
.call-widget.fullscreen .call-screen-share-container.active ~ .call-widget-header .call-widget-timer {
    font-size: 15px;
    font-weight: 400;
    margin-top: 0;
    opacity: 0.7;
    letter-spacing: 0;
}

/* Actions → компактная полоса снизу */
.call-widget.fullscreen .call-screen-share-container.active ~ .call-widget-actions {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    justify-content: center;
    gap: 16px;
    padding: 24px 20px;
    margin-top: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
    backdrop-filter: none;
    border-radius: 0;
    transition: opacity 0.3s ease;
}

/* Кнопки чуть меньше */
.call-widget.fullscreen .call-screen-share-container.active ~ .call-widget-actions .call-widget-btn {
    width: 52px;
    height: 52px;
}

.call-widget.fullscreen .call-screen-share-container.active ~ .call-widget-actions .call-widget-btn svg {
    width: 22px;
    height: 22px;
}

/* ============================================================================
   Auto-hide: контролы скрываются при бездействии мыши
   ============================================================================ */

.call-widget.fullscreen.controls-hidden .call-screen-share-container.active ~ .call-widget-header,
.call-widget.fullscreen.controls-hidden .call-screen-share-container.active ~ .call-widget-actions {
    opacity: 0;
    pointer-events: none;
}

.call-widget.fullscreen.controls-hidden {
    cursor: none;
}

/* ============================================================================
   Screen share button
   ============================================================================ */

.call-widget-btn.screen-share {
    background: #3a3a3c;
    color: white;
    position: relative;
}

.call-widget-btn.screen-share.active {
    background: var(--accent);
}

/* Индикатор активной демонстрации */
.screen-share-indicator {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    background: var(--success);
    border-radius: 50%;
    animation: screenSharePulse 1.5s ease-in-out infinite;
}

@keyframes screenSharePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ============================================================================
   Mobile — демонстрация экрана
   ============================================================================ */

@media (max-width: 768px) {
    /* Minimized: уменьшаем превью */
    .call-widget.minimized .call-screen-share-container {
        max-height: 140px;
    }
    .call-widget.minimized .call-screen-share-container video {
        max-height: 140px;
    }

    /* Fullscreen: safe area для контролов */
    .call-widget.fullscreen .call-screen-share-container.active ~ .call-widget-header {
        padding: max(12px, env(safe-area-inset-top)) 16px 12px;
        gap: 8px;
    }
    .call-widget.fullscreen .call-screen-share-container.active ~ .call-widget-header .call-widget-avatar {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }
    .call-widget.fullscreen .call-screen-share-container.active ~ .call-widget-header .call-widget-avatar img {
        width: 32px;
        height: 32px;
    }
    .call-widget.fullscreen .call-screen-share-container.active ~ .call-widget-header .call-widget-name {
        font-size: 14px;
    }
    .call-widget.fullscreen .call-screen-share-container.active ~ .call-widget-header .call-widget-timer {
        font-size: 13px;
    }

    /* Actions — safe area снизу */
    .call-widget.fullscreen .call-screen-share-container.active ~ .call-widget-actions {
        padding: 16px 12px max(16px, env(safe-area-inset-bottom));
        gap: 12px;
    }
    .call-widget.fullscreen .call-screen-share-container.active ~ .call-widget-actions .call-widget-btn {
        width: 48px;
        height: 48px;
    }
    .call-widget.fullscreen .call-screen-share-container.active ~ .call-widget-actions .call-widget-btn svg {
        width: 20px;
        height: 20px;
    }
}

/* Landscape + screen share */
@media (max-width: 900px) and (orientation: landscape) {
    .call-widget.fullscreen .call-screen-share-container.active ~ .call-widget-header {
        padding: 8px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
    }
    .call-widget.fullscreen .call-screen-share-container.active ~ .call-widget-actions {
        padding: 8px max(12px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    }
    /* Controls hidden — не прятать на тач-устройствах курсор */
    .call-widget.fullscreen.controls-hidden {
        cursor: auto;
    }
}