/* ═══════════════════════════════════════════════════════════
   PREMIUM MOBILE CHATBOT STYLES (Gemini-Inspired)
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* Widget - Full Viewport */
    #chatbot-widget {
        position: fixed !important;
        inset: 12px !important;
        /* Padding from screen edges */
        width: auto !important;
        height: auto !important;
        max-height: none !important;
        border-radius: 24px !important;
        margin: 0 !important;
        box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2), 0 0 0 100vmax rgba(0, 0, 0, 0.45) !important;
        z-index: 99999 !important;
        display: flex !important;
        flex-direction: column !important;
        background: #FFFFFF !important;
    }

    html.dark #chatbot-widget {
        background: #000000 !important;
    }

    /* Header */
    .chatbot-header {
        padding: 16px 20px !important;
        flex-shrink: 0 !important;
        background: rgba(255, 255, 255, 0.8) !important;
        backdrop-filter: blur(20px) !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    }

    html.dark .chatbot-header {
        background: rgba(0, 0, 0, 0.8) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    /* Messages Area - Flexible */
    #chatbot-messages {
        flex: 1 1 auto !important;
        height: 0 !important;
        /* Forces flex scrolling */
        padding: 20px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Message Bubbles - Optimized for Mobile */
    .message {
        max-width: 85% !important;
    }

    /* Input Container - Fixed at Bottom */
    .chatbot-input-container {
        flex-shrink: 0 !important;
        background: #FFFFFF !important;
        padding: 12px 16px !important;
        padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
        border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
        position: relative !important;
        z-index: 10 !important;
    }

    html.dark .chatbot-input-container {
        background: #1C1C1E !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    /* Input Pill Wrapper */
    .input-wrapper {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-end !important;
        /* Align to bottom for multiline */
        gap: 12px !important;
        padding: 8px 12px !important;
        background: #F2F2F7 !important;
        border-radius: 28px !important;
        border: 1px solid transparent !important;
        min-height: 56px !important;
    }

    html.dark .input-wrapper {
        background: #2C2C2E !important;
    }

    /* Textarea - The Core Input */
    #chatbot-input {
        flex: 1 !important;
        min-width: 0 !important;
        background: transparent !important;
        border: none !important;
        padding: 14px 0 !important;
        /* Center text vertically */
        font-size: 17px !important;
        line-height: 1.4 !important;
        max-height: 120px !important;
        color: #000000 !important;
        margin: 0 !important;
    }

    html.dark #chatbot-input {
        color: #FFFFFF !important;
    }

    /* Buttons - Fixed Size & Position */
    .chatbot-voice-btn,
    .chatbot-send-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        flex: 0 0 40px !important;
        flex-shrink: 0 !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-bottom: 0 !important;
        /* Align with input text */
        align-self: center !important;
        /* Center properly */
        padding: 0 !important;
    }

    /* Hide Toggle Button when Open */
    #chatbot-widget.visible~#chatbot-toggle {
        display: none !important;
    }

    /* Hide scroll-to-top button when chatbot is open to prevent overlap */
    body.chatbot-open #go-to-top {
        display: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}