/**
 * BistroBot Conversation Mode Styles
 * Styles specific to the conversation interface when widget is active
 * Excluded from Android version via :not(.conversation-fixed-layout)
 */

/* Conversation mode - static layout (exclude Android fixed layout) */
body.conversation-mode:not(.conversation-fixed-layout) {
    background: #f8fafc; /* Clean background for conversation mode */
    overflow: hidden; /* Disable page scrolling */
    height: 100vh; /* Fixed height */

    /* Header Section (5vh) - Fixed at top */
    .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: var(--layout-header-height);
        z-index: 1000;
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        pointer-events: auto !important;
        margin: 0 !important;
        padding: 10px 20px !important; /* Reduced padding for 5vh space */

        /* Compact header styling for conversation mode (5vh space) */
        h1 {
            font-size: 1.3rem; /* Smaller for 5vh space */
            margin: 0;
        }

        p {
            margin: 0;
            font-size: 0.9rem;
        }
    }

    /* Prompt Suggestion Section (8vh) - Between widget and PTT for better UX */
    #single-prompt-suggestion {
        position: fixed;
        bottom: calc(var(--layout-ptt-height) + var(--layout-footer-height)); /* Above PTT and footer */
        left: 0;
        right: 0;
        height: var(--layout-prompt-height);
        z-index: 999;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        pointer-events: auto !important;
        margin: 0 !important;
        padding: 15px 20px !important;
    }

    /* Conversation mode prompt suggestion styling (5vh space) */
    .single-prompt-suggestion {
        font-size: 1rem;
        padding: 6px 16px; /* Reduced padding for 5vh space */
        background: rgba(255, 255, 255, 0.95);
        color: #374151;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s ease;

        &:hover {
            background: rgba(255, 255, 255, 1);
            transform: translateY(-1px);
        }
    }

    /* Footer Section (6vh) - Fixed at bottom (kept for backward compatibility) */
    .footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: var(--layout-footer-height);
        z-index: 998;
    }

    /* Widget Area Section (65vh) - Main content area */
    .widget-area {
        position: fixed;
        top: var(--layout-header-height);
        left: 0;
        right: 0;
        height: var(--layout-widget-height);
        max-height: var(--layout-widget-height);
        z-index: 500;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        pointer-events: auto !important;
        margin: 0 !important;
        padding: 20px !important;
        overflow: hidden !important;  /* Contain widget within 65vh area to prevent header overlap */
        contain: paint !important;  /* Force containment of position:fixed descendants */
    }

    /* ElevenLabs Widget Styling */
    elevenlabs-convai {
        width: 100% !important;
        height: 100% !important;
        max-width: 600px !important;
        max-height: 100% !important; /* Constrain to widget area */
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        margin: 0 auto !important;  /* Center within widget area */
        overflow: visible !important;  /* Allow widget content to fill container naturally */

        .overlay {
            display: none !important; /* Hide any overlay that might interfere */
        }

        .overlay > div {
            display: none !important;
        }

        div[class*="h-[calc(100%-80px)]"] {
            height: 100% !important;
        }

        div[class*="max-h-[550px]"] {
            max-height: none !important;
        }

        .flex.flex-col {
            height: 100% !important;
            max-height: none !important;
        }

        div[class*="max-h-[550px]"] {
            max-height: 100% !important;
        }

        div[class*="h-[calc(100%-80px)]"] {
            height: 100% !important;
        }

        div[class*="flex flex-col overflow-hidden"] {
            height: 100% !important;
            max-height: none !important;
        }

        [class*="max-h-"] {
            max-height: none !important;
        }

        .modal,
        [role="dialog"] {
            z-index: 10000 !important;
        }
    }

    /* Conversation Footer Section (6vh) - Fixed at bottom */
    .conversation-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: var(--layout-footer-height);
        z-index: 997;
    }

    .trenta-logo-container {
        display: none !important;
    }

    .guidance-message {
        display: none !important;
    }

    .simple-guidance {
        display: none !important;
    }

    .trenta-logo-section {
        display: none !important;
    }

    .conversation-footer-container {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: var(--layout-footer-height);
        z-index: 996;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }

    .trenta-title-svg {
        position: fixed;
        top: 15px;
        left: 20px;
        height: 28px; /* Smaller for 5vh space */
        z-index: 1001;
    }

    .bistrobot-logo {
        position: fixed;
        top: 15px;
        right: 20px;
        height: 28px;
        z-index: 1001;
    }
}