/**
 * AIRI Chat Styles - COMPLETE
 *
 * Auto-loaded by WordPress plugin
 * Contains ALL styling: behavior, branding, colors, layout
 *
 * @package AIRI_Chatbot
 * @version 8.0.13
 */

/* ============================================================================
   BUTTONS - Matching Logo Color (#921b0d)
   ============================================================================ */

/* Send button */
html body .mwai-window .mwai-input button.mwai-input-submit,
html body button.mwai-input-submit {
    background-color: #921b0d !important;
    background-image: none !important;
    background: #921b0d !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border: none !important;
}

html body .mwai-window .mwai-input button.mwai-input-submit:hover,
html body button.mwai-input-submit:hover {
    background-color: #6f1409 !important;
    background: #6f1409 !important;
}

html body .mwai-window .mwai-input button.mwai-input-submit span {
    color: #ffffff !important;
    font-size: 15px !important;
}

/* GDPR consent button ("I understand") - matches any ID starting with mwai-gdpr */
button[id^="mwai_gdpr_"],
button[id*="gdpr"],
.mwai-gdpr-button,
button.mwai-gdpr-button,
.mwai-window .mwai-gdpr-button {
    background-color: #921b0d !important;
    background-image: none !important;
    background: #921b0d !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 600 !important;
}

button[id^="mwai_gdpr_"]:hover,
button[id*="gdpr"]:hover,
.mwai-gdpr-button:hover,
button.mwai-gdpr-button:hover,
.mwai-window .mwai-gdpr-button:hover {
    background-color: #6f1409 !important;
    background: #6f1409 !important;
}

/* ============================================================================
   USER MESSAGE BUBBLE - Neutral Gray
   ============================================================================ */

.mwai-conversation .mwai-reply.mwai-user,
.mwai-reply.mwai-user {
    background-color: #475569 !important;
    background: #475569 !important;
}

.mwai-conversation .mwai-reply.mwai-user .mwai-text,
.mwai-reply.mwai-user .mwai-text {
    background-color: #475569 !important;
    background: #475569 !important;
    color: #ffffff !important;
    border: none !important;
}

/* ============================================================================
   REMOVE MESSAGE BUBBLE TAILS (Clean Look)
   ============================================================================ */

.mwai-conversation .mwai-reply.mwai-user::before,
.mwai-reply.mwai-user::before,
.mwai-conversation .mwai-reply.mwai-user::after,
.mwai-reply.mwai-user::after,
.mwai-conversation .mwai-reply.mwai-ai::before,
.mwai-reply.mwai-ai::before,
.mwai-conversation .mwai-reply.mwai-ai::after,
.mwai-reply.mwai-ai::after {
    display: none !important;
}

/* ============================================================================
   DESKTOP VERTICAL TABS - Active Tab Styling
   ============================================================================ */

.kt-tabs-title-list .kt-title-item.kt-tab-title-active .kt-tab-title,
.kt-tabs-title-list .kt-title-item .kt-tab-title.kt-tab-title-active {
    background-color: #921b0d !important;
    background: #921b0d !important;
    color: #ffffff !important;
}

/* Hover state for desktop tabs */
.kt-tabs-title-list .kt-title-item .kt-tab-title:hover {
    background-color: #f8fafc !important;
    border-left: 3px solid #921b0d !important;
}

/* ============================================================================
   MOBILE ACCORDION - Active Header Styling
   ============================================================================ */

.kb-accordion-pane-active .kt-accordion-panel-title,
.kt-accordion-header-active,
.kt-blocks-accordion-header.kt-accordion-panel-active {
    background-color: #921b0d !important;
    background: #921b0d !important;
    color: #ffffff !important;
}

/* Accordion title text color when active */
.kb-accordion-pane-active .kt-accordion-panel-title *,
.kt-accordion-header-active *,
.kt-blocks-accordion-header.kt-accordion-panel-active * {
    color: #ffffff !important;
}

/* ============================================================================
   AUTO-EXPANDING CHAT
   Override MeowApps 600px limit to allow infinite vertical growth
   Only browser scrollbar, no internal chat scrollbar
   ============================================================================ */

/* Remove height restrictions from chat containers */
.kt-accordion-panel .mwai-chat,
.kt-accordion-panel .mwai-chatbot-container,
.kt-tabs-content-wrap .mwai-chat,
.kt-tabs-content-wrap .mwai-chatbot-container {
    max-height: none !important;
    height: auto !important;
}

/* Allow conversation to expand naturally (no internal scrolling) */
.kt-accordion-panel .mwai-conversation,
.kt-tabs-content-wrap .mwai-conversation {
    max-height: none !important;
    height: auto !important;
    overflow-y: visible !important; /* KEY: No internal scrollbar */
    overflow-x: hidden !important; /* Prevent horizontal overflow */
}

/* Ensure parent containers don't restrict height */
.kt-accordion-panel-inner,
.kt-tabs-content-wrap .mwai-window {
    height: auto !important;
    min-height: 0 !important;
}

/* Smooth transitions for expanding/collapsing */
.kt-accordion-panel,
.kt-tabs-content-wrap {
    transition: height 0.3s ease-out;
}

/* Message bubbles should wrap text properly */
.mwai-conversation .mwai-reply {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ============================================================================
   FONT SIZE NORMALIZATION
   Match chatbot text size with surrounding UI elements
   ============================================================================ */

/* Normalize all chatbot text to standard 16px base font size */
.mwai-chat,
.mwai-conversation,
.mwai-conversation .mwai-reply,
.mwai-conversation .mwai-text,
.mwai-conversation p {
    font-size: 16px !important;
    line-height: 1.6 !important;
}

/* Input textarea */
.mwai-input textarea {
    font-size: 16px !important;
}

/* Headers and titles within chatbot */
.mwai-conversation h1 {
    font-size: 2em !important;
}

.mwai-conversation h2 {
    font-size: 1.5em !important;
}

.mwai-conversation h3 {
    font-size: 1.25em !important;
}

.mwai-conversation h4 {
    font-size: 1.1em !important;
}

/* Lists */
.mwai-conversation ul,
.mwai-conversation ol {
    font-size: 16px !important;
}

.mwai-conversation li {
    font-size: 16px !important;
    line-height: 1.6 !important;
}

/* Code blocks */
.mwai-conversation code,
.mwai-conversation pre {
    font-size: 14px !important;
}

/* Ensure consistent font family */
.mwai-chat,
.mwai-conversation,
.mwai-input textarea {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* ============================================================================
   MOBILE OPTIMIZATIONS
   Ensure auto-expanding works smoothly on small screens
   ============================================================================ */

@media (max-width: 768px) {
    /* CRITICAL: Remove ALL accordion container padding on mobile */
    .kt-accordion-panel,
    .kt-tabs-content-wrap,
    .kb-accordion-pane,
    .kt-blocks-accordion-pane {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Remove accordion inner padding */
    .kt-accordion-panel-inner,
    .kb-accordion-pane-inner {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Remove accordion content wrapper padding */
    .kt-accordion-panel-content,
    .kb-accordion-pane-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Remove chatbot container padding */
    .kt-accordion-panel .mwai-chatbot-container,
    .kt-tabs-content-wrap .mwai-chatbot-container,
    .mwai-chatbot-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Chat wrapper: minimal padding for breathing room */
    .kt-accordion-panel .mwai-chat,
    .kt-tabs-content-wrap .mwai-chat,
    .mwai-chat {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    /* Conversation area: no side padding */
    .kt-accordion-panel .mwai-conversation,
    .kt-tabs-content-wrap .mwai-conversation,
    .mwai-conversation {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100%;
    }

    /* Message bubbles: minimal margin for text breathing */
    .mwai-conversation .mwai-reply {
        margin-left: 4px !important;
        margin-right: 4px !important;
    }

    /* Message text: internal padding for readability */
    .mwai-conversation .mwai-text {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Input area: minimal side padding */
    .kt-accordion-panel .mwai-input,
    .kt-tabs-content-wrap .mwai-input,
    .mwai-input {
        padding-left: 4px !important;
        padding-right: 4px !important;
        position: sticky;
        bottom: 0;
        background: #ffffff;
        z-index: 10;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    }
}

/* ============================================================================
   VERTICAL RHYTHM & SPACING SYSTEM (v8.0.7)
   Aligns with GLOBAL_FORMATTING_SYSTEM spacing philosophy
   Single line break = 0.75em | Double line break = 1.5em
   ============================================================================ */

:root {
    --airi-space-xs: 0.5em;   /* List items, inline spacing */
    --airi-space-sm: 0.75em;  /* Single line break (paragraphs) */
    --airi-space-md: 1.5em;   /* Double line break (major sections) */
    --airi-space-lg: 2em;     /* Extra separation */
}

/* Paragraphs: Single line break spacing */
.mwai-conversation .mwai-text p {
    margin-top: var(--airi-space-sm);
    margin-bottom: var(--airi-space-sm);
}

/* Headers: Double line break before, single after */
.mwai-conversation .mwai-text h2,
.mwai-conversation .mwai-text h3,
.mwai-conversation .mwai-text h4 {
    margin-top: var(--airi-space-md);
    margin-bottom: var(--airi-space-sm);
    font-weight: 700;
}

/* Major section headers (## in markdown): Extra breathing room */
.mwai-conversation .mwai-text h2 {
    margin-top: var(--airi-space-lg);
}

/* Lists: Proper breathing room */
.mwai-conversation .mwai-text ul,
.mwai-conversation .mwai-text ol {
    margin-top: var(--airi-space-sm);
    margin-bottom: var(--airi-space-md);
    padding-left: 1.5em;
}

/* List items: Space between bullets */
.mwai-conversation .mwai-text li {
    margin-bottom: var(--airi-space-xs);
}

/* Nested lists: Reduce spacing */
.mwai-conversation .mwai-text li ul,
.mwai-conversation .mwai-text li ol {
    margin-top: var(--airi-space-xs);
    margin-bottom: var(--airi-space-xs);
}

/* List immediately followed by content: Force separation */
.mwai-conversation .mwai-text ul + p,
.mwai-conversation .mwai-text ol + p,
.mwai-conversation .mwai-text ul + h3,
.mwai-conversation .mwai-text ul + h4,
.mwai-conversation .mwai-text ol + h3,
.mwai-conversation .mwai-text ol + h4 {
    margin-top: var(--airi-space-md);
}

/* Horizontal rules: Section separators */
.mwai-conversation .mwai-text hr {
    margin-top: var(--airi-space-md);
    margin-bottom: var(--airi-space-md);
    border: none;
    border-top: 1px solid #e2e8f0;
    opacity: 0.5;
}

/* Blockquotes: Info boxes (💡, ⚠️, ✅) */
.mwai-conversation .mwai-text blockquote {
    margin: var(--airi-space-md) 0;
    padding: var(--airi-space-sm) 1em;
    border-left: 3px solid #921b0d;
    background-color: #f8fafc;
    border-radius: 4px;
}

/* Code blocks: Pre-formatted text */
.mwai-conversation .mwai-text pre {
    margin: var(--airi-space-md) 0;
    padding: 1em;
    background-color: #1e293b;
    border-radius: 6px;
    overflow-x: auto;
}

/* Inline code: No extra spacing */
.mwai-conversation .mwai-text code {
    padding: 0.2em 0.4em;
    background-color: #f1f5f9;
    border-radius: 3px;
}

/* Strong/Bold as pseudo-headers: Special case for emoji headers */
.mwai-conversation .mwai-text p strong:first-child {
    display: inline-block;
}

/* Paragraph with emoji/bold header: Treat as section header */
.mwai-conversation .mwai-text p:has(strong:first-child) {
    margin-top: var(--airi-space-lg);
    font-weight: 600;
}

/* First paragraph after any header: Reduce top margin */
.mwai-conversation .mwai-text h2 + p,
.mwai-conversation .mwai-text h3 + p,
.mwai-conversation .mwai-text h4 + p {
    margin-top: var(--airi-space-xs);
}

/* First list after header: Reduce top margin */
.mwai-conversation .mwai-text h2 + ul,
.mwai-conversation .mwai-text h2 + ol,
.mwai-conversation .mwai-text h3 + ul,
.mwai-conversation .mwai-text h3 + ol,
.mwai-conversation .mwai-text h4 + ul,
.mwai-conversation .mwai-text h4 + ol {
    margin-top: var(--airi-space-xs);
}

/* Remove margin from first/last elements to prevent bubble overflow */
.mwai-conversation .mwai-text > *:first-child {
    margin-top: 0;
}

.mwai-conversation .mwai-text > *:last-child {
    margin-bottom: 0;
}



/* ============================================================================
   COLLAPSIBLE SIDEBAR LOGIC (v8.1.2)
   Works with 'airi-vertical-tabs' + 'airi-collapsible-tabs'
   ============================================================================ */

/* 1. STICKY BEHAVIOR
   We target your existing 'airi-vertical-tabs' class.
   This ensures the sidebar stays visible as you scroll down long chats.
*/
.airi-vertical-tabs .kt-tabs-title-list {
    position: -webkit-sticky;
    position: sticky;
    top: 20px; /* Adjust if you have a sticky header */
    align-self: flex-start;
    z-index: 10;

    /* Smooth width transition */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    /* Ensure it doesn't shrink below readable width when open */
    min-width: 200px;
}



/* Mobile: Reduce spacing slightly for smaller screens */
@media (max-width: 768px) {
    :root {
        --airi-space-sm: 0.6em;
        --airi-space-md: 1.2em;
        --airi-space-lg: 1.5em;
    }
}