/* Aetheria 2.0 System Framework: Adaptive & Mobile Viewports */

@media (max-width: 768px) {
    body {
        align-items: stretch;
        overflow-x: hidden; /* 🛡️ FORCES ZERO HORIZONTAL SPILL OVER */
        width: 100%;
        position: relative;
    }

    .glass-container {
        width: 100vw;
        max-width: 100vw; /* 🛡️ ABSOLUTE HARD LOCK */
        height: 100vh;
        border-radius: 0;
        border: none;
        overflow-x: hidden;
    }

    .chat-area {
        width: 100vw;
        max-width: 100vw; /* 🛡️ ENSURE CHAT LAYER DOESN'T SPILL OVER */
        overflow-x: hidden;
    }

    /* Sidebar Drawer conversion */
    .sidebar {
        position: fixed;
        left: -280px;
        top: 0;
        bottom: 0;
        width: 280px;
        z-index: 999;
        background: rgba(18, 20, 32, 0.95);
        backdrop-filter: blur(20px);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 10px 0 40px rgba(0, 0, 0, 0.5);
        border-right: 1px solid var(--border-glass);
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 20px));
        /* 🔥 Further lift for maximum clearance */
    }

    .sidebar.mobile-active {
        transform: translateX(280px);
    }

    .mobile-toggle-btn {
        display: block !important;
    }

    /* Responsive Top Header */
    .chat-header {
        flex-direction: row !important;
        align-items: center !important;
        padding: 12px 15px !important;
        justify-content: space-between !important;
    }

    .header-info {
        width: auto;
        display: flex;
        align-items: center;
        gap: 8px !important;
    }

    .header-info>div {
        align-items: flex-start !important;
        flex: none;
    }

    .header-info h2 {
        font-size: 1.1rem !important;
        text-align: left !important;
    }

    .header-right {
        width: auto;
        display: flex !important;
        gap: 8px !important;
    }

    .icon-only-btn {
        width: 38px;
        height: 38px;
        font-size: 1.1rem;
    }

    .header-icon-btn-wrapper {
        width: 38px;
        height: 38px;
    }

    /* Chat zone spacing reduction */
    .chat-messages {
        padding: 15px;
        gap: 16px;
    }

    .message {
        max-width: 88%;
    }

    .avatar {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }

    .message-content {
        padding: 12px 16px;
        font-size: 0.9rem;
    }

    /* Inputs and Safe Area Handling */
    .chat-input-container {
        padding: 10px 12px calc(65px + env(safe-area-inset-bottom, 20px)) 12px !important;
    }

    .input-wrapper {
        padding: 8px 12px;
        border-radius: 24px;
    }

    .input-wrapper textarea {
        font-size: 16px !important;
    }

    /* Force no-zoom viewport */

    /* Settings and forms cleanup */
    .modal-content {
        width: 92vw;
        max-height: 85vh;
        padding: 20px 16px;
        margin: 0;
    }

    #settingsModal .modal-content {
        height: 75vh;
        min-height: 450px;
        padding: 20px 15px;
    }

    .form-row {
        flex-direction: column;
        gap: 0;
    }

    .tab-buttons {
        gap: 4px;
    }

    .tab-btn {
        padding: 10px 15px;
        font-size: 0.85rem;
    }
}