a.watermark{
    display: none !important;
}

#readme-button {
    display: none;
}

#theme-toggle {
    display: none;
}

/***************************************************/
/* Custom CSS to fix mobile viewport issues - START*/
/***************************************************/
/*
 * Custom CSS for Chainlit - FINAL STABLE SCROLL FIX
 * Goal: Ensure scrollability using the ABSOLUTE model for Chrome/iOS.
 */

@media screen and (max-width: 600px), screen and (max-device-width: 600px) {

    /* 0. ROOT element must fill the dynamic viewport height and be relative */
    #root {
        height: var(--vh-height) !important;
        max-height: var(--vh-height) !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        position: relative !important; 
    }
    
    /* 1. BASE/CHROME CONFIGURATION: Absolute positioning for stability */
    #mobile-scroll-wrapper {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important; 

        height: unset !important; 
        max-height: unset !important;
        width: 100% !important;
        
        overflow-y: scroll !important; 
        overflow-x: hidden !important;
        
        display: block !important;
    }

    /* 2. Hide the chat header */
    #header > div:not(:first-child) {
        display: none !important;
    }

    /* 3. Chainlit's main content area should be flexible (auto) within the scroll wrapper */
    .h-screen.w-screen.flex {
        height: auto !important; 
        max-height: unset !important; 
        min-height: 100% !important; 
        width: 100% !important;
        overflow: visible !important; 
    }

    /* 4. Ensure all inner components are flexible and allow content to flow */
    .flex.flex-col.h-full.w-full,
    .flex-row.flex-grow.overflow-auto,
    .flex.flex-col.flex-grow.overflow-y-auto {
        height: auto !important; 
        max-height: unset !important;
        overflow: visible !important; 
        flex-grow: 1 !important;
    }

    /* 5. Target the messages container for proper spacing/alignment and auto-scroll */
    .flex.flex-col.mx-auto.w-full.flex-grow.p-4 {
        height: auto !important;
        min-height: unset !important; 
        justify-content: flex-end !important; 
        
        margin-top: 0 !important;
        padding: 20px 4px 0 4px !important; 
    }
    
    /* 6. Input composer structure. Margin is controlled by JS. */
    #message-composer {
        position: relative !important;
        bottom: unset !important;
        width: 100% !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
        
        margin-top: 0 !important; 
        padding: 8px !important; 
        
        /* CRITICAL FIX: Add large bottom margin to force scroll on initial screen (JS removes this later) */
        margin-bottom: 25vh !important; 
    }

    /* 7. Clean up any unnecessary padding or margin */
    .flex-shrink-0[style="height: 0px;"] {
        display: none !important;
    }
}
/*************************************************/
/* Custom CSS to fix mobile viewport issues - END*/
/********************************************* ***/