/**
 * Has Chat State CSS Module
 * 
 * This module ONLY handles styling for the "has chat" state.
 * It is completely isolated and will NOT affect the "no chat" state.
 * 
 * This state is active when:
 * - .main-content has .has-chat class
 * - .chat-messages-container is visible
 */

/* ============================================
   HAS CHAT STATE - Chat Messages Container
   ============================================ */

/* Main content when chat is active */
.main-content.has-chat {
    padding-bottom: 0;
    padding-top: 0;
    margin-top: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    display: flex;
    height: 100vh;
    flex-direction: column;
}

/* RESET padding from app-container for anonymous users in has-chat state */
/* This prevents the 100vh content from being pushed down by the container padding in style.css */
body:not(.user-logged-in).session-checked .main-content.has-chat {
    margin-top: -64px !important;
}

@media (max-width: 1199px) {
    body:not(.user-logged-in).session-checked .main-content.has-chat {
        margin-top: -56px !important;
    }
}

/* Hide centered content when chat is active (unless tool is open) */
.main-content.has-chat:not(.has-tool-open) .centered-content {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Chat messages container in has-chat state (without tool) */
.main-content.has-chat:not(.has-tool-open) .chat-messages-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    padding: 8px 24px;
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    /* Ensure scrolling works on mobile */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* For anonymous users, add padding-top to account for main-header-bar (login/signup header) */
body:not(.user-logged-in) .main-content.has-chat:not(.has-tool-open) .chat-messages-container {
    padding-top: calc(12px + 64px) !important;
    /* 12px base padding + 64px header height */
}

@media (max-width: 1199px) {
    body:not(.user-logged-in) .main-content.has-chat:not(.has-tool-open) .chat-messages-container {
        padding-top: calc(12px + 56px) !important;
        /* 12px base padding + 56px header height on mobile */
    }
}

/* Input container in has-chat state (without tool) */
.main-content.has-chat:not(.has-tool-open) .main-input-container {
    position: sticky;
    bottom: 0;
    background-color: var(--main-bg);
    padding: 10px 24px;
    border-top: none;
    z-index: 1010;
    /* Ensure it stays above loading overlay (z-index 1000) */
    max-width: 100%;
    margin: 0;
    width: 100%;
    flex-shrink: 0;
}

/* Attached files + input should feel like one surface */
.main-content.has-chat .main-input-container .input-surface {
    background-color: var(--input-main-bg, #2a2a2a) !important;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1)) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

.main-content.has-chat .main-input-container .input-surface:focus-within {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 1px var(--accent) !important;
}

.main-content.has-chat .file-preview-container:not([style*="display: none"]) {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 12px !important;
    margin-bottom: 0 !important;
    display: flex !important;
    gap: 8px !important;
}

.main-content.has-chat .file-error-message {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 8px 12px !important;
}

.main-content.has-chat .main-input-container .main-input-box {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* Hide resize handle on textarea for all screen sizes in has-chat state */
.main-content.has-chat:not(.has-tool-open) .main-input {
    resize: none !important;
    overflow-y: auto !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: pre-wrap !important;
    line-height: 1.5 !important;
    min-height: 24px !important;
    max-height: 200px !important;
}

/* Hide "no chat" elements in has-chat state */
.main-content.has-chat .welcome-section,
.main-content.has-chat .action-buttons,
.main-content.has-chat .action-pills-container,
.main-content.has-chat #practiceTestOptions,
.main-content.has-chat #studyPlanOptions,
.main-content.has-chat #memorizeOptions {
    display: none !important;
}

/* Ensure main input box is always shown in has-chat state */
.main-content.has-chat .main-input-box {
    display: flex !important;
}

/* Show AI disclaimer in has-chat state */
.main-content.has-chat .ai-disclaimer {
    display: block !important;
    text-align: center;
    margin-top: 12px;
    padding: 0 16px;
    font-size: 12px;
    color: var(--text-secondary);
    opacity: 0.7;
}

/* Ensure AI disclaimer is visible for anonymous users */
body:not(.user-logged-in) .main-content.has-chat .ai-disclaimer {
    display: block !important;
    visibility: visible !important;
    opacity: 0.7 !important;
}

/* Main header in has-chat state */
.main-content.has-chat .main-header {
    justify-content: space-between;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-top: 0;
    margin-bottom: 0;
}

/* Hide main-header completely for anonymous users in has-chat state */
/* The main-header-bar (with login/signup) will act as the header instead */
body:not(.user-logged-in) .main-content.has-chat .main-header {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* Ensure main-header-bar is visible and acts as header for anonymous users in has-chat state */
body:not(.user-logged-in) .main-content.has-chat~.main-header-bar,
body:not(.user-logged-in) .main-content.has-chat .main-header-bar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: 64px !important;
}

/* On mobile, header bar is 56px */
@media (max-width: 1199px) {

    body:not(.user-logged-in) .main-content.has-chat~.main-header-bar,
    body:not(.user-logged-in) .main-content.has-chat .main-header-bar {
        height: 56px !important;
    }
}

.main-content.has-chat .main-header-logo {
    display: flex !important;
    align-items: center;
    gap: 12px;
    margin-right: auto;
}

/* Hide logo on mobile/tablet screens */
@media (max-width: 1199px) {
    .main-content.has-chat .main-header-logo {
        display: none !important;
    }

    .main-content.has-chat .main-header {
        justify-content: space-between;
        /* Use fixed positioning on mobile so header stays visible when keyboard opens */
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;
        background-color: var(--main-bg) !important;
        border-bottom: none !important;
        width: 100% !important;
        padding: 16px 10px !important;
    }

    /* Add padding-top to main-content to account for fixed header */
    /* Use higher specificity to override style.css padding-top: 0 rule */
    body .main-content.has-chat {
        padding-top: 0 !important;
        margin-top: 0 !important;
        /* Use CSS variable for stable viewport height (set by JavaScript) */
        /* Fallback to 100vh if variable not set */
        height: var(--initial-vh, 100vh) !important;
        min-height: var(--initial-vh, 100vh) !important;
        max-height: var(--initial-vh, 100vh) !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
        /* Ensure flexbox properly distributes space so input stays visible */
        align-items: stretch !important;
        justify-content: flex-start !important;
        /* Prevent height changes when keyboard opens/closes */
        position: relative !important;
    }

    /* Ensure chat messages container scrolls properly on mobile */
    /* CRITICAL: Let flexbox handle the height naturally - don't use max-height */
    /* Add padding-top to account for fixed header (only if header is visible) */
    .main-content.has-chat:not(.has-tool-open) .chat-messages-container {
        flex: 1 1 0% !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding-top: 65px !important;
        overscroll-behavior: contain !important;
        /* Add enough padding-bottom to account for fixed input container (approx 120px for input + disclaimer + padding) */
        padding-bottom: calc(120px + env(safe-area-inset-bottom)) !important;
        /* Use stable viewport height minus header - JavaScript will set exact pixel value */
        /* Fallback to calc(100vh - 56px) if variable not set */
        height: calc(var(--initial-vh, 100vh) - 56px) !important;
        max-height: calc(var(--initial-vh, 100vh) - 56px) !important;
        box-sizing: border-box !important;
        /* Ensure it doesn't get pushed down */
        position: relative !important;
    }

    /* For anonymous users on mobile, account for main-header-bar (login/signup) instead of main-header */
    body:not(.user-logged-in) .main-content.has-chat:not(.has-tool-open) .chat-messages-container {
        padding-top: calc(24px + 56px) !important;
        /* 24px base + 56px header bar */
        height: calc(var(--initial-vh, 100vh) - 56px) !important;
        max-height: calc(var(--initial-vh, 100vh) - 56px) !important;
    }

    .main-content.has-chat:not(.has-tool-open) .main-input-container {
        padding: 12px 16px calc(16px + env(safe-area-inset-bottom)) 16px !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        flex-basis: auto !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        order: 999 !important;
        z-index: 1010 !important;
        /* Ensure it stays above loading overlay */
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 0 !important;
        background-color: var(--main-bg) !important;
        /* Ensure input container doesn't get pushed down */
        transform: translateZ(0) !important;
        will-change: transform !important;
    }

    /* For anonymous users, ensure consistent header clearance and full height */
    body:not(.user-logged-in) .main-content.has-chat:not(.has-tool-open) .chat-messages-container {
        padding-top: calc(24px + 56px) !important;
        height: calc(var(--initial-vh, 100vh)) !important;
        max-height: calc(var(--initial-vh, 100vh)) !important;
    }

    /* Compact layout for smaller screens to show more messages */
    @media (max-width: 767px) {
        .main-content.has-chat:not(.has-tool-open) .chat-messages-container {
            padding: 56px 12px 96px 12px !important;
            gap: 10px !important;
        }

        .main-content.has-chat:not(.has-tool-open) .main-input-container {
            padding: 10px 12px calc(12px + env(safe-area-inset-bottom)) 12px !important;
        }

        .main-content.has-chat:not(.has-tool-open) .main-input-box {
            padding: 10px !important;
            gap: 10px !important;
            border: none !important;
            border-radius: 0 !important;
            background: transparent !important;
        }

        .main-content.has-chat:not(.has-tool-open) .main-input {
            font-size: 15px !important;
            max-height: 100px !important;
            line-height: 1.4 !important;
        }
    }

    /* When tool is open on mobile - stack vertically */
    .main-content.has-chat.has-tool-open .centered-content {
        flex-direction: column !important;
    }

    .main-content.has-chat.has-tool-open .chat-section-wrapper {
        width: 100% !important;
        flex: 1 !important;
        border-right: none !important;
    }

    /* ============================================
       MOBILE INPUT STYLING FOR HAS-CHAT STATE
       ============================================ */

    /* Main input box - transparent inside the input-surface wrapper */
    .main-content.has-chat:not(.has-tool-open) .main-input-box {
        background-color: transparent !important;
        border-radius: 0 !important;
        border: none !important;
        padding: 12px !important;
        margin-bottom: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto !important;
        gap: 12px !important;
    }

    /* Main input field - on top, full width, supports multi-line text wrapping */
    .main-content.has-chat:not(.has-tool-open) .main-input {
        width: 100% !important;
        background: transparent !important;
        border: none !important;
        color: var(--text-primary, #ffffff) !important;
        font-size: 16px !important;
        padding: 0 !important;
        outline: none !important;
        grid-row: 1 !important;
        grid-column: 1 !important;
        resize: none !important;
        overflow-y: auto !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: pre-wrap !important;
        line-height: 1.5 !important;
        min-height: 24px !important;
        max-height: 120px !important;
        /* Auto-resize will be handled by JavaScript */
    }

    .main-content.has-chat:not(.has-tool-open) .main-input::placeholder {
        color: rgba(255, 255, 255, 0.5) !important;
    }

    /* Buttons row - create a flex container for the second row */
    .main-content.has-chat:not(.has-tool-open) .main-input-box {
        position: relative !important;
    }

    /* Paperclip button - in buttons row on the left */
    .main-content.has-chat:not(.has-tool-open) .attach-btn {
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        background: transparent !important;
        border: none !important;
        color: #ffffff !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        transition: background-color 0.2s !important;
        grid-row: 2 !important;
        grid-column: 1 !important;
        justify-self: start !important;
        align-self: center !important;
    }

    .main-content.has-chat:not(.has-tool-open) .attach-btn:hover {
        background-color: rgba(255, 255, 255, 0.1) !important;
    }

    .main-content.has-chat:not(.has-tool-open) .attach-btn i {
        font-size: 18px !important;
        color: #ffffff !important;
    }

    /* Buttons row container - below input, contains Auto and Send buttons, positioned on the right */
    .main-content.has-chat:not(.has-tool-open) .input-right-actions {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        grid-row: 2 !important;
        grid-column: 1 !important;
        justify-self: end !important;
        align-self: center !important;
        flex-shrink: 0 !important;
    }

    /* Hide autoDropdown (mode selector) completely in has-chat state */
    .main-content.has-chat:not(.has-tool-open) #autoDropdown {
        display: none !important;
    }

    /* Send button - single button that transitions between live chat and send icons */
    .main-content.has-chat:not(.has-tool-open) .send-button {
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        background: var(--bg-tertiary) !important;
        border: none !important;
        color: var(--text-primary) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
        transition: background-color 0.2s, opacity 0.2s !important;
        cursor: pointer !important;
        position: relative !important;
    }

    .main-content.has-chat:not(.has-tool-open) .send-button:hover {
        background: var(--nav-active-bg) !important;
    }

    .main-content.has-chat:not(.has-tool-open) .send-button svg {
        position: absolute !important;
        transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .main-content.has-chat:not(.has-tool-open) .send-button .voice-icon {
        opacity: 1 !important;
        transform: scale(1) translateY(0) !important;
        width: 18px !important;
        height: 18px !important;
    }

    .main-content.has-chat:not(.has-tool-open) .send-button .send-icon {
        opacity: 0 !important;
        transform: scale(0.8) translateY(8px) !important;
        width: 16px !important;
        height: 16px !important;
        display: block !important;
    }

    .main-content.has-chat:not(.has-tool-open) .send-button.has-text .voice-icon {
        opacity: 0 !important;
        transform: scale(0.8) translateY(-8px) !important;
        pointer-events: none !important;
    }

    .main-content.has-chat:not(.has-tool-open) .send-button.has-text .send-icon {
        opacity: 1 !important;
        transform: scale(1) translateY(0) !important;
    }

    /* Voice icon - commented out for now */
    /*
    .main-content.has-chat:not(.has-tool-open) .send-button .voice-icon {
        display: block !important;
        width: 20px !important;
        height: 20px !important;
        color: #1a1a1a !important;
    }
    */

    /* Hide memorize tools dropdown on mobile in has-chat state */
    .main-content.has-chat:not(.has-tool-open) #memorizeToolsDropdown {
        display: none !important;
    }

}

/* ============================================
   DESKTOP/TABLET - Hide mode text in has-chat state
   ============================================ */

@media (min-width: 1200px) {

    /* Hide autoDropdown completely in has-chat state */
    .main-content.has-chat:not(.has-tool-open) #autoDropdown {
        display: none !important;
    }

    /* Hide resize handle and set higher max-height for desktop/tablet in has-chat state */
    .main-content.has-chat:not(.has-tool-open) .main-input {
        resize: none !important;
        max-height: 200px !important;
    }

    /* Redesign input box to stacked layout on desktop - transparent wrapper */
    .main-content.has-chat:not(.has-tool-open) .main-input-box {
        display: grid !important;
        grid-template-areas: "input input" "left right" !important;
        grid-template-columns: 1fr auto !important;
        gap: 12px !important;
        padding: 16px 20px !important;
        border-radius: 0 !important;
        border: none !important;
        background: transparent !important;
        align-items: stretch !important;
    }

    .main-content.has-chat:not(.has-tool-open) .main-input {
        grid-area: input !important;
        resize: none !important;
        max-height: 200px !important;
        min-height: 40px !important;
    }

    .main-content.has-chat:not(.has-tool-open) .input-left-actions {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        grid-area: left !important;
    }

    .main-content.has-chat:not(.has-tool-open) .input-right-actions {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        grid-area: right !important;
        justify-self: end !important;
    }

    .main-content.has-chat:not(.has-tool-open) .attach-btn {
        align-self: center !important;
    }
}

/* TODO: Re-enable mode segment selector next time */
/* Completely hide header segmented switch for now */
.main-content.has-chat .header-segmented-switch,
.main-content:not(.has-chat) .header-segmented-switch {
    display: none !important;
}

/*
Header segmented switch - show only in has-chat state
.main-content.has-chat .header-segmented-switch {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 999px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
}

Hide extra modes on mobile - show only first 3 (Teach Me, You Teach, Chat)
@media (max-width: 1199px) {
    .main-content.has-chat .header-segment.header-mode-mobile-hidden {
        display: none !important;
    }
}

Hide header mode selector on desktop
@media (min-width: 1200px) {
    .main-content.has-chat .header-segmented-switch {
        display: none !important;
    }
    
    Hide autoDropdown in main input section on desktop
    .main-content.has-chat:not(.has-tool-open) #autoDropdown {
        display: none !important;
    }
}
*/

/* Hide autoDropdown in main input section on mobile too */
@media (max-width: 1199px) {
    .main-content.has-chat:not(.has-tool-open) #autoDropdown {
        display: none !important;
    }

    /* Reduce gap between icons in header right section on mobile */
    .main-content.has-chat .header-right-section {
        gap: 6px !important;
    }
}

/* Show profile, settings, and tools buttons on all screens - has-chat state */
/* Profile, settings, and tools buttons - only show if preloaded curriculum */
/* Profile button - only show if preloaded curriculum (legacy/specific logic) */
.main-content.has-chat #profileBtn {
    display: none !important;
}

.main-content.has-chat #profileBtn.is-preloaded-curriculum {
    display: inline-flex !important;
}

/* Always show Insights, Agent Mode, Settings, and Tools buttons in chat */
.main-content.has-chat #curriculumInsightsBtn,
.main-content.has-chat #agentControl,
.main-content.has-chat #settingsBtn,
.main-content.has-chat #toolsBtn {
    display: inline-flex !important;
}

/* Main logo image in has-chat state - keep visible */
.main-content.has-chat .main-header-logo .main-logo-image {
    display: inline-block !important;
}

/* Require chat button visibility */
.main-content.has-chat .require-chat {
    display: inline-flex !important;
}

/* Centered content in has-chat state */
.main-content.has-chat .centered-content {
    max-width: 100%;
}

/* ============================================
   BACK TO BOTTOM BUTTON
   ============================================ */

.back-to-bottom-btn {
    position: fixed;
    bottom: 180px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: var(--input-main-bg);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--input-border-color);
    cursor: pointer;
    z-index: 1020;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Only allow visibility when in has-chat state */
.main-content.has-chat~.back-to-bottom-btn.visible,
.main-content.has-chat .back-to-bottom-btn.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.back-to-bottom-btn:hover {
    transform: translateX(-50%) translateY(-2px);
}

.back-to-bottom-btn:active {
    transform: translateX(-50%) translateY(0);
}

.back-to-bottom-btn svg {
    width: 18px;
    height: 18px;
}

@media (max-width: 1199px) {
    .back-to-bottom-btn {
        bottom: 140px;
        width: 36px;
        height: 36px;
    }
}

/* ============================================
   HAS CHAT WITH TOOL STATE
   ============================================ */

/* When tool is open - split view layout */
.main-content.has-chat.has-tool-open {
    overflow: hidden;
}

/* Centered content when tool is open - becomes flex row */
.main-content.has-chat.has-tool-open .centered-content {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    height: calc(100vh - 56px) !important;
    /* Full viewport minus header */
    min-height: calc(100vh - 56px) !important;
    overflow: hidden !important;
    flex: 1 !important;
    padding: 0 !important;
}

/* Chat section wrapper - fixed width when tool is open */
.main-content.has-chat.has-tool-open .chat-section-wrapper {
    display: flex;
    flex-direction: column;
    width: 550px;
    flex: 0 0 550px;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    background-color: var(--main-bg);
}


/* Chat messages container in tool state */
.main-content.has-chat.has-tool-open .chat-section-wrapper .chat-messages-container {
    flex: 1;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    padding: 16px 24px;
    display: flex !important;
    flex-direction: column;
    gap: 12px;
}

/* Input container in tool state */
.main-content.has-chat.has-tool-open .chat-section-wrapper .main-input-container {
    width: 100%;
    flex: 0 0 auto;
    border-top: none;
    padding: 12px 24px;
    resize: none !important;
    overflow: hidden !important;
}

/* Prevent resize on input when tool is open */
.main-content.has-chat.has-tool-open .chat-section-wrapper .main-input {
    resize: none !important;
    overflow-y: auto !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: pre-wrap !important;
    line-height: 1.5 !important;
    min-height: 24px !important;
    max-height: 200px !important;
}

/* Hide autoDropdown (select mode) in main input section when tool is open */
.main-content.has-chat.has-tool-open #autoDropdown {
    display: none !important;
}

/* Tool interface panel */
.main-content.has-chat.has-tool-open .tool-interface-panel {
    display: flex;
    flex: 1;
    background-color: var(--tool-bg, var(--input-bg));
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* Remove border-right when tool is open */
.main-content.has-chat.has-tool-open .chat-section-wrapper {
    border-right: none;
}

/* Hide main logo when tool is open */
.main-content.has-chat.has-tool-open .main-logo {
    display: none !important;
}