/* Desktop/PC Styles for Bari Meeting */

/* Base desktop styles */
@media (min-width: 992px) {
    /* Ensure body and html maintain desktop proportions */
    html, body {
        overflow: auto !important;
        height: auto !important;
        width: auto !important;
    }

    /* Desktop-optimized video layout with proper spacing */
    #meeting-interface {
        border-radius: 22px;
        margin: 10px 20px;
        max-width: calc(100vw - 40px);
        width: calc(100% - 40px);
        height: calc(100vh - 20px);
        box-shadow: 0 14px 42px -12px rgba(13,71,161,0.25), 0 4px 8px -2px rgba(0,0,0,0.06);
    }

    /* No bezels - full-screen video */
    .video-grid {
        gap: 0;
        padding: 0;
        bottom: 0;
        height: 100vh;
    }

    .video-tile {
        /* Responsive scaling with no bezels */
        width: 100%;
        height: auto;
        flex: 1 1 50%;
        max-width: 50%;
        /* Wide aspect ratio for PC screens */
        aspect-ratio: 16/9;
        border-radius: 0;
    }

    .local-video-container {
        aspect-ratio: 16/9; /* Standard widescreen for PC */
    }

    /* Hide chat close button on desktop */
    .chat-close-btn {
        display: none !important;
    }

    /* Desktop chat input button - rectangular shape with text */
    .chat-input button {
        border-radius: 12px !important;
        min-width: 80px !important;
        padding: 12px 20px !important;
        width: auto !important;
        height: auto !important;
        font-size: 14px !important;
    }

    /* Reset mobile button styling for desktop */
    .chat-input button::after {
        content: none !important;
    }

    /* Desktop chat input optimization */
    .chat-input {
        padding: 12px !important;
        gap: 10px !important;
    }

    .chat-input input {
        padding: 14px 18px !important;
        font-size: 14px !important;
        min-height: 44px !important;
    }
}

/* Extra Large Screens (1400px+) */
@media (min-width: 1400px) {
    .chat-container { width: 380px; }
    /* No bezels for maximum video space */
    .video-grid { padding: 0; gap: 0; bottom: 0; height: 100vh; }
    .video-tile { width: auto; height: auto; flex: 1 1 50%; max-width: 50%; }
    .local-video-container { width: 220px; bottom: 90px; right: 30px; }
}

/* Large Screens (1200px - 1399px) */
@media (max-width: 1399px) and (min-width: 1200px) {
    .chat-container { width: 350px; }
    .video-grid { padding: 0; gap: 0; bottom: 0; height: 100vh; }
}

/* Desktop/Laptop (992px - 1199px) */
@media (max-width: 1199px) and (min-width: 992px) {
    .chat-container { width: 320px; }
    .video-grid { padding: 0; gap: 0; bottom: 0; height: 100vh; }
    .video-tile { width: auto; height: auto; flex: 1 1 50%; max-width: 50%; }
}

/* Tablet Landscape (768px - 991px) */
@media (max-width: 991px) and (min-width: 768px) {
    .chat-container { width: 280px; }
    .video-grid { padding: 0; gap: 0; bottom: 0; height: 100vh; }
    .video-tile { width: auto; height: auto; flex: 1 1 50%; max-width: 50%; aspect-ratio: 16/9; }
    .local-video-container { width: 180px; bottom: 80px; right: 25px; }
    .meeting-controls { bottom: 25px; }
    .control-btn { width: 55px; height: 55px; }
    .control-btn.danger { width: 65px; height: 65px; }
}

/* High DPI displays for desktop */
@media (-webkit-min-device-pixel-ratio: 2) and (min-width: 992px),
       (min-resolution: 192dpi) and (min-width: 992px) {
    .video-tile, .local-video-container {
        transform: translateZ(0); /* GPU acceleration */
    }
}

/* Desktop single remote video optimization - full viewport */
@media (min-width: 992px) {
    .video-grid.single-remote {
        padding: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;
    }
    .video-grid.single-remote .video-tile {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        aspect-ratio: unset !important;
        border-radius: 0 !important;
    }
    .video-grid.single-remote .video-tile video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}