/* --- INTEGRATED AI CHAT CSS (Scoped to #ai-view) --- */
    #ai-view {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 4000; /* Above everything else */
        background: #f9f9f9; /* var(--bg) from provided code */
        display: flex;
        flex-direction: column;
        font-family: Inter, "Segoe UI", Arial, sans-serif;
    }

    /* Mapping provided :root vars to the scope */
    #ai-view {
        --accent: #0077ff;
        --bg: #f9f9f9;
        --card: #fff;
    }

    #ai-view header {
        background: var(--accent);
        color: #fff;
        padding: 14px 20px;
        font-weight: 600;
        font-size: 18px;
        text-align: center;
    }

    #ai-view main {
        flex: 1;
        display: flex;
        overflow: hidden;
    }

    /* Chat Section */
    #chat-section {
        flex: 2;
        display: flex;
        flex-direction: column;
        border-right: 1px solid #e6e6e6;
        background: var(--card);
        position: relative;
        overflow: hidden;
    }

    /* Watermark inside chat area */
    #chat-section::after {
        content: "Siyoro AI";
        position: absolute;
        bottom: 10%;
        right: 5%;
        font-size: 34px;
        color: rgba(0, 0, 0, 0.05);
        font-weight: 700;
        letter-spacing: 2px;
        transform: rotate(-10deg);
        pointer-events: none;
        user-select: none;
        z-index: 0;
    }

    #chat-log {
        flex: 1;
        padding: 18px;
        overflow-y: auto;
        background: var(--card);
        position: relative;
        z-index: 1;
    }

    .msg {
        margin: 8px 0;
        padding: 10px 12px;
        border-radius: 10px;
        max-width: 78%;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.02) inset;
        word-wrap: break-word;
        position: relative;
        z-index: 2;
    }

    .user {
        align-self: flex-end;
        background: #e8f5e9;
    }

    .bot {
        align-self: flex-start;
        background: #e3f2fd;
    }

    #chat-input-area {
        display: flex;
        gap: 8px;
        padding: 12px;
        border-top: 1px solid #eee;
        background: #fafafa;
        z-index: 2;
    }

    #chat-input {
        flex: 1;
        min-height: 56px;
        resize: none;
        padding: 10px;
        border-radius: 8px;
        border: 1px solid #ddd;
        font-size: 14px;
        font-family: inherit;
    }

    #chat-send {
        background: #c84a3a;
        color: #fff;
        border: none;
        padding: 0 18px;
        border-radius: 8px;
        cursor: pointer;
        font-weight: 500;
    }

    /* Suggestions */
    #suggestions {
        flex: 1;
        padding: 18px;
        background: #fff;
        overflow-y: auto;
    }

    .suggestion-btn {
        display: block;
        width: 100%;
        text-align: left;
        padding: 10px 12px;
        margin: 8px 0;
        border: 1px solid var(--accent);
        border-radius: 8px;
        background: #fff;
        color: var(--accent);
        cursor: pointer;
        font-size: 14px;
        transition: 0.2s;
    }

    .suggestion-btn:hover {
        background: var(--accent);
        color: #fff;
    }

    #ai-view .meta {
        font-size: 12px;
        color: #666;
        margin-bottom: 12px;
    }

    #ai-view .card {
        background: #fff;
        border-radius: 8px;
        padding: 12px;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
    }

    /* Responsive Design */
    @media (max-width: 768px) {
        #ai-view main {
            flex-direction: column;
        }

        #chat-section {
            border-right: none;
            border-bottom: 1px solid #e6e6e6;
        }

        #suggestions {
            order: 2;
            padding: 14px;
            display: none; /* As per provided CSS */
        }

        #chat-input {
            min-height: 48px;
            font-size: 13px;
        }

        .suggestion-btn {
            font-size: 13px;
            padding: 8px 10px;
        }

        #chat-section::after {
            font-size: 22px;
            bottom: 5%;
            right: 10%;
        }
        
        /* Ensure input area doesn't get hidden behind mobile tab bar if specific safe areas exist */
        #chat-input-area {
            padding-bottom: max(12px, env(safe-area-inset-bottom));
        }
    }

    @media (max-width: 480px) {
        #ai-view header {
            font-size: 16px;
            padding: 10px;
        }

        #chat-send {
            padding: 0 14px;
            font-size: 13px;
        }

        #chat-input {
            font-size: 13px;
        }

        .msg {
            max-width: 90%;
            font-size: 13px;
        }
    }
/* --- AI VIEW LAYOUT FIXES --- */
#ai-view {
    /* Lower Z-Index to 950 so it sits BELOW:
       - Global Header (z-index: 1000) 
       - Bottom Tabs (z-index: 3000)
    */
    z-index: 950 !important;
    
    /* Push content down to accommodate Global Header */
    padding-top: 70px;
    
    /* Ensure padding doesn't increase total width/height */
    box-sizing: border-box;
}

/* Mobile-Only Adjustment */
@media (max-width: 768px) {
    #ai-view {
        /* Push content up to accommodate Bottom Tab Bar */
        padding-bottom: 60px;
    }
}
/* --- AI CHAT PLACEHOLDER (Auto-Hides) --- */
/* Only visible when #chat-log has NO children (empty) */
#chat-log:empty::before {
    content: "SiyoroAI";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.5rem; /* Large but subtle */
    font-weight: 700;
    color: rgba(0, 0, 0, 0.08); /* Very subtle grey */
    pointer-events: none; /* Clicks pass through */
    white-space: nowrap;
    z-index: 0;
}