/* ════════════════════════════════════════════════════════════
   HAMBURGER FIX - Icon visible + Desktop container fix
   Load LAST after mobile-final.css
   ════════════════════════════════════════════════════════════ */

/* === HAMBURGER BUTTON FIX (MOBILE) === */
@media screen and (max-width: 768px) {

    /* Hamburger container */
    .hamburger-menu,
    body .hamburger-menu,
    html body .hamburger-menu,
    #hamburgerMenu {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: fixed !important;
        top: 12px !important;
        left: 12px !important;
        z-index: 1001 !important;
        width: 44px !important;
        height: 44px !important;
        padding: 8px !important;
        background: #0d1f3c !important;
        border: 1px solid #3d5a80 !important;
        border-radius: 10px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
    }

    /* Hamburger icon container */
    .hamburger-icon,
    body .hamburger-icon,
    .hamburger-menu .hamburger-icon {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-around !important;
        align-items: center !important;
        width: 24px !important;
        height: 20px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* THE THREE LINES - MUST BE VISIBLE - ULTRA HIGH SPECIFICITY */
    html body .hamburger-menu .hamburger-icon .hamburger-line,
    html body .hamburger-menu .hamburger-icon div.hamburger-line,
    html body #hamburgerMenu .hamburger-icon .hamburger-line,
    body .hamburger-icon .hamburger-line,
    .hamburger-icon > .hamburger-line,
    div.hamburger-icon > div.hamburger-line,
    .hamburger-line {
        display: block !important;
        width: 24px !important;
        min-width: 24px !important;
        max-width: 24px !important;
        height: 3px !important;
        min-height: 3px !important;
        max-height: 3px !important;
        background-color: #FFFFFF !important;
        background: #FFFFFF !important;
        border-radius: 2px !important;
        margin: 2px 0 !important;
        padding: 0 !important;
        transition: all 0.3s ease !important;
        opacity: 1 !important;
        visibility: visible !important;
        flex: none !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
    }

    /* Active state - X shape */
    .hamburger-menu.active .hamburger-line:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px) !important;
    }

    .hamburger-menu.active .hamburger-line:nth-child(2) {
        opacity: 0 !important;
    }

    .hamburger-menu.active .hamburger-line:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px) !important;
    }

    /* Hover effect */
    .hamburger-menu:hover {
        border-color: #60a5fa !important;
        background: #1a3a5c !important;
    }
}

/* === DESKTOP - FULL WIDTH LAYOUT (no borders, no dark zones) === */
@media screen and (min-width: 769px) {

    /* HIDE hamburger on desktop */
    .hamburger-menu,
    body .hamburger-menu,
    #hamburgerMenu {
        display: none !important;
    }

    /* Body and HTML - uniform background */
    html, body {
        background: #0d1929 !important;
    }

    /* App container - flex layout, no borders */
    .app-container,
    body .app-container,
    html body .app-container {
        display: flex !important;
        width: 100% !important;
        height: 100vh !important;
        background: #0d1929 !important;
        border: none !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Sidebar - fixed width on left */
    .sidebar,
    body .sidebar,
    html body .sidebar {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        width: 300px !important;
        height: 100vh !important;
        z-index: 100 !important;
        transform: none !important;
        flex-shrink: 0 !important;
    }

    /* Main content - FULL WIDTH after sidebar, NO borders */
    .main-content,
    body .main-content,
    html body .main-content,
    body .app-container .main-content {
        margin-left: 0 !important; /* controlled by desktop-fullwidth */
        width: calc(100% - 300px) !important;
        max-width: none !important;
        min-width: 0 !important;
        background: #0d1929 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        min-height: 100vh !important;
        flex: 1 !important;
    }

    /* Chat container - FULL WIDTH, NO border, NO max-width */
    .chat-container,
    body .chat-container,
    body .main-content .chat-container,
    html body .main-content .chat-container {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #0d1929 !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    /* Header - full width */
    .header,
    body .header,
    body .main-content .header {
        width: 100% !important;
        max-width: none !important;
        background: #0d1929 !important;
        border: none !important;
        border-bottom: none !important;
        padding: 16px 24px !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }

    /* Messages area - FULL WIDTH, no borders */
    .messages,
    #messagesContainer,
    body .messages,
    body .chat-container .messages {
        flex: 1 !important;
        width: 100% !important;
        max-width: none !important;
        background: #0d1929 !important;
        padding: 24px !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    /* Message bubbles - reasonable width for readability */
    .message,
    body .message,
    .messages .message {
        max-width: 70% !important;
    }

    /* Input area - FULL WIDTH, subtle top border only */
    .input-area,
    body .input-area,
    body .chat-container .input-area {
        width: 100% !important;
        max-width: none !important;
        background: #0a1628 !important;
        border: none !important;
        border-top: 1px solid rgba(61, 90, 128, 0.3) !important;
        border-radius: 0 !important;
        padding: 16px 24px !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
        box-shadow: none !important;
    }

    /* Remove any pseudo-elements that might create borders */
    .chat-container::before,
    .chat-container::after,
    .main-content::before,
    .main-content::after,
    .messages::before,
    .messages::after {
        display: none !important;
        content: none !important;
    }
}