/* Mobile fixes for Chainlit chat interface */

.watermark {
    display: none !important;
}
#theme-toggle {
    display: none !important;
}

/* Mobile Chat Layout - Fixed Top Nav, Fixed Bottom Input, Scrollable Messages */
@media (max-width: 1056px) { 
    /* Remove default body margins/padding and ensure full viewport coverage */
    html, body {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        height: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important; /* Prevent body scroll */
    }

    /* Remove any white frame around the main container */
    main, 
    [data-testid="main-container"],
    .main-container,
    .cl-main-container,
    [class*="main-container"] {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        background: inherit !important;
        border: none !important;
        box-shadow: none !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Fixed top navigation bar */
    header,
    nav,
    [data-testid="header"],
    [data-testid="nav"],
    [class*="header"],
    [class*="nav"],
    [class*="toolbar"],
    .cl-header,
    .cl-nav,
    .cl-toolbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 1001 !important;
        background: white !important;
        border-bottom: 1px solid #e0e0e0 !important;
        padding: 8px 12px !important;
        min-height: 44px !important;
        max-height: 60px !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    /* Ensure new chat button and other nav elements are visible */
    header *,
    nav *,
    [data-testid="header"] *,
    [data-testid="nav"] *,
    [class*="header"] *,
    [class*="nav"] *,
    [class*="toolbar"] *,
    .cl-header *,
    .cl-nav *,
    .cl-toolbar * {
        position: relative !important;
        z-index: inherit !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* Specific styling for new chat button */
    button[data-testid="new-chat"],
    .new-chat,
    .cl-new-chat,
    [class*="new-chat"],
    button:contains("New Chat"),
    button:contains("new chat"),
    [aria-label*="new chat"],
    [aria-label*="New Chat"] {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #f0f0f0 !important;
        border: 1px solid #ddd !important;
        border-radius: 6px !important;
        padding: 6px 12px !important;
        font-size: 14px !important;
        cursor: pointer !important;
        transition: background-color 0.2s ease !important;
        white-space: nowrap !important;
        min-width: 80px !important;
        height: 32px !important;
    }

    button[data-testid="new-chat"]:hover,
    .new-chat:hover,
    .cl-new-chat:hover,
    [class*="new-chat"]:hover {
        background: #e0e0e0 !important;
    }

    /* Ensure buttons and interactive elements in header work */
    header button,
    nav button,
    [data-testid="header"] button,
    [data-testid="nav"] button,
    [class*="header"] button,
    [class*="nav"] button,
    [class*="toolbar"] button,
    .cl-header button,
    .cl-nav button,
    .cl-toolbar button {
        display: inline-flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        position: relative !important;
        z-index: 1002 !important;
    }

    /* Ensure any icons or text in the header are visible */
    header svg,
    nav svg,
    [data-testid="header"] svg,
    [data-testid="nav"] svg,
    [class*="header"] svg,
    [class*="nav"] svg,
    .cl-header svg,
    .cl-nav svg {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Ensure New Chat button is visible when messages are present */
    body[data-has-messages="true"] header,
    body[data-has-messages="true"] nav,
    body[data-has-messages="true"] [data-testid="header"],
    body[data-has-messages="true"] [data-testid="nav"],
    body[data-has-messages="true"] [class*="header"],
    body[data-has-messages="true"] [class*="nav"],
    body[data-has-messages="true"] [class*="toolbar"],
    body[data-has-messages="true"] .cl-header,
    body[data-has-messages="true"] .cl-nav,
    body[data-has-messages="true"] .cl-toolbar {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* Specific New Chat button visibility during chat */
    body[data-has-messages="true"] button[data-testid="new-chat"],
    body[data-has-messages="true"] .new-chat,
    body[data-has-messages="true"] .cl-new-chat,
    body[data-has-messages="true"] [class*="new-chat"],
    body[data-has-messages="true"] button:contains("New Chat"),
    body[data-has-messages="true"] button:contains("new chat"),
    body[data-has-messages="true"] [aria-label*="new chat"],
    body[data-has-messages="true"] [aria-label*="New Chat"] {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        position: relative !important;
        z-index: 1003 !important;
        background: #f0f0f0 !important;
        border: 1px solid #ddd !important;
        border-radius: 6px !important;
        padding: 6px 12px !important;
        font-size: 14px !important;
        cursor: pointer !important;
        color: #333 !important;
        min-width: 80px !important;
        height: 32px !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body[data-has-messages="true"] button[data-testid="new-chat"]:hover,
    body[data-has-messages="true"] .new-chat:hover,
    body[data-has-messages="true"] .cl-new-chat:hover,
    body[data-has-messages="true"] [class*="new-chat"]:hover {
        background: #e0e0e0 !important;
    }

    /* Ensure all buttons in header work when messages are present */
    body[data-has-messages="true"] header button,
    body[data-has-messages="true"] nav button,
    body[data-has-messages="true"] [data-testid="header"] button,
    body[data-has-messages="true"] [data-testid="nav"] button,
    body[data-has-messages="true"] [class*="header"] button,
    body[data-has-messages="true"] [class*="nav"] button,
    body[data-has-messages="true"] [class*="toolbar"] button,
    body[data-has-messages="true"] .cl-header button,
    body[data-has-messages="true"] .cl-nav button,
    body[data-has-messages="true"] .cl-toolbar button {
        display: inline-flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        position: relative !important;
        z-index: 1003 !important;
    }

    /* Prevent scrolling on front page */
    body:not([data-has-messages="true"]) {
        overflow: hidden !important;
        height: 100vh !important;
    }

    /* Messages area - scrollable between fixed top and bottom */
    [data-testid="chat-messages"],
    .chat-messages,
    .cl-chat-messages,
    [class*="messages-container"] {
        position: fixed !important;
        top: 60px !important; /* Space for fixed header */
        bottom: 80px !important; /* Space for fixed input */
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 10px 8px !important;
        margin: 0 !important; 
        background: inherit !important;
        border: none !important; 
        box-shadow: none !important; 
        box-sizing: border-box !important;
        z-index: 1 !important;
    }

    /* Only fix positioning of existing input when messages are present */
    body[data-has-messages="true"] [data-testid="chat-input-container"],
    body[data-has-messages="true"] .chat-input-container,
    body[data-has-messages="true"] .cl-chat-input,
    body[data-has-messages="true"] [class*="input-container"]:last-child,
    body[data-has-messages="true"] .cl-chat-form,
    body[data-has-messages="true"] [data-testid="chat-input-form"],
    body[data-has-messages="true"] [class*="chat-input-form"] {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 1002 !important;
        background: white !important;
        border-top: 1px solid #e0e0e0 !important;
        box-shadow: 0 -2px 4px rgba(0,0,0,0.1) !important;
        min-height: 44px !important;
        max-height: 80px !important;
        padding: 8px 12px !important;
        box-sizing: border-box !important;
        /* Keep existing styles, just fix position */
        transform: translateY(0px) !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* Fix for Streamlit chat input if present */
    .stChatFloatingInputContainer {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1002 !important;
        background: white !important;
        border-top: 1px solid #e0e0e0 !important;
        box-shadow: 0 -2px 4px rgba(0,0,0,0.1) !important;
    }

    /* Category buttons at bottom when no chat - also fixed */
    body:not([data-has-messages="true"]) .cl-chat-starters,
    body:not([data-has-messages="true"]) [class*="starters"],
    body:not([data-has-messages="true"]) [class*="categories"] {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: white !important;
        padding: 12px !important; 
        border-top: 1px solid #e0e0e0 !important;
        z-index: 1002 !important;
        margin: 0 !important;
        box-shadow: 0 -2px 4px rgba(0,0,0,0.1) !important;
    }

    /* Adjust main content area for front page when no messages */
    body:not([data-has-messages="true"]) main,
    body:not([data-has-messages="true"]) [data-testid="main-container"],
    body:not([data-has-messages="true"]) .main-container {
        padding-top: 60px !important; /* Space for header */
        padding-bottom: 100px !important; /* Space for category buttons */
        overflow-y: auto !important;
        height: calc(100vh - 160px) !important;
    }

    /* Input visibility states */
    .mobile-input-visible {
        transform: translateY(0px) !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* Remove the hidden state - input should always be visible */
    .mobile-input-hidden {
        transform: translateY(0px) !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}

/* Tablet and smaller desktop breakpoint */
@media (max-width: 768px) {
    /* Adjust spacing for smaller screens */
    [data-testid="chat-messages"],
    .chat-messages,
    .cl-chat-messages,
    [class*="messages-container"] {
        top: 50px !important; /* Smaller header on small screens */
        bottom: 70px !important; /* Smaller input on small screens */
        padding: 8px 4px !important;
    }

    /* Smaller header on small screens */
    header,
    nav,
    [data-testid="header"],
    [data-testid="nav"],
    [class*="header"],
    [class*="nav"],
    [class*="toolbar"],
    .cl-header,
    .cl-nav,
    .cl-toolbar {
        min-height: 40px !important;
        max-height: 50px !important;
        padding: 6px 8px !important;
    }

    /* Smaller input on small screens */
    body[data-has-messages="true"] [data-testid="chat-input-container"],
    body[data-has-messages="true"] .chat-input-container,
    body[data-has-messages="true"] .cl-chat-input,
    body[data-has-messages="true"] [class*="input-container"]:last-child,
    body[data-has-messages="true"] .cl-chat-form,
    body[data-has-messages="true"] [data-testid="chat-input-form"],
    body[data-has-messages="true"] [class*="chat-input-form"] {
        min-height: 40px !important;
        max-height: 70px !important;
        padding: 6px 8px !important;
    }
}

/* iPhone specific fixes */
@media (max-width: 480px) {
    /* Ensure fixed elements respect safe areas */
    header,
    nav,
    [data-testid="header"],
    [data-testid="nav"],
    [class*="header"],
    [class*="nav"],
    [class*="toolbar"],
    .cl-header,
    .cl-nav,
    .cl-toolbar {
        top: env(safe-area-inset-top, 0px) !important;
        padding-top: calc(8px + env(safe-area-inset-top, 0px)) !important;
    }

    body[data-has-messages="true"] [data-testid="chat-input-container"],
    body[data-has-messages="true"] .chat-input-container,
    body[data-has-messages="true"] .cl-chat-input,
    body[data-has-messages="true"] [class*="input-container"]:last-child,
    body[data-has-messages="true"] .cl-chat-form,
    body[data-has-messages="true"] [data-testid="chat-input-form"],
    body[data-has-messages="true"] [class*="chat-input-form"] {
        bottom: env(safe-area-inset-bottom, 0px) !important;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Adjust messages area for safe areas */
    [data-testid="chat-messages"],
    .chat-messages,
    .cl-chat-messages,
    [class*="messages-container"] {
        top: calc(50px + env(safe-area-inset-top, 0px)) !important;
        bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* General improvements for all screen sizes */
.message,
.cl-message {
    margin-bottom: 12px !important;
}

/* Ensure proper touch scrolling on iOS */
[data-testid="chat-messages"],
.chat-messages,
.cl-chat-messages,
[class*="messages"],
[class*="messages-container"] {
    -webkit-overflow-scrolling: touch !important;
}