/* =========================================================================
   1. GLOBAL LLM THEME VARIABLES (Default: Modern Notebook Dot Grid)
   ========================================================================= */
:root {
    /* Base background: The Dot Grid */
    --llm-css-theme-main-bg: #f8f9fa radial-gradient(#d1d5db 1px, transparent 1px) 0 0 / 20px 20px repeat; 
    
    /* Universal text: Dark grey for readability */
    --llm-css-theme-text-color: #333333; 
    
    /* Calculated automatically by JS, default white */
    --llm-css-theme-input-bg: #ffffff; 
    
    /* Bot bubbles: Crisp White with a soft grey border */
    --llm-css-theme-bot-bg: #ffffff;
    --llm-css-theme-bot-border: 1px solid #e5e7eb;
    
    /* User bubbles, Send Button & Practice Buttons: Signature Anyboli Yellow */
    --llm-css-theme-user-bg: #f1aa3b;
    --llm-css-theme-user-border: none;
    
    /* Practice Hover: A slightly darker/intense Anyboli Yellow */
    --llm-css-theme-practice-hover: #d9952b; 
    
    --llm-css-theme-border-radius: 12px; 
}

/* =========================================================================
   2. MAP LLM VARIABLES TO UI ELEMENTS
   ========================================================================= */

/* Outer Area AND Chat Area */
.wrapper.chatbot-home,
.chatbot-bg {
    background: var(--llm-css-theme-main-bg) !important;
    transition: background 0.8s ease;
}

/* Bot Chat Bubbles */
.message-sent:not(.message-received) .comment-box {
    background: var(--llm-css-theme-bot-bg) !important;
    color: var(--llm-css-theme-text-color) !important; 
    border: var(--llm-css-theme-bot-border) !important;
    border-radius: var(--llm-css-theme-border-radius) !important;
    transition: all 0.5s ease;
}

/* User Chat Bubbles */
.message-received .comment-box {
    background: var(--llm-css-theme-user-bg) !important;
    color: var(--llm-css-theme-text-color) !important; 
    border: var(--llm-css-theme-user-border) !important;
    border-radius: var(--llm-css-theme-border-radius) !important;
    transition: all 0.5s ease;
}

/* Practice Option Buttons */
.choose-options .option-btn {
    background: var(--llm-css-theme-user-bg) !important; 
    color: var(--llm-css-theme-text-color) !important; 
    border: var(--llm-css-theme-user-border) !important;
    border-radius: var(--llm-css-theme-border-radius) !important; 
    transition: all 0.3s ease;
}

.choose-options .option-btn:hover {
    background: var(--llm-css-theme-practice-hover) !important;
}

/* Fix the Timestamp Color */
.time {
    color: var(--llm-css-theme-text-color) !important;
    opacity: 0.6 !important; 
    transition: color 0.5s ease;
}

/* Utility Icons (Like/Dislike) - AUTOMATED SOFT CONTRAST */
.icon-main .like-icons img, 
.icon-main .up-icons img {
    background: color-mix(in srgb, var(--llm-css-theme-text-color) 8%, transparent) !important;
    border-radius: 50% !important; 
    padding: 6px !important;       
    transition: all 0.2s ease;
}

.icon-main .like-icons img:hover, 
.icon-main .up-icons img:hover {
    background: var(--llm-css-theme-practice-hover) !important;
    transform: scale(1.05);
}

/* =========================================================================
   3. MODERN CHAT INPUT BAR STYLING
   ========================================================================= */

/* The Input Wrapper */
.modern-chat-bar {
    background: var(--llm-css-theme-input-bg) !important;
    display: flex;
    align-items: flex-end; 
    gap: 8px;
    border-radius: 24px; 
    padding: 8px 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid #e0e0e0;
    margin: 10px 0; 
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 100;
}

/* The Text Area (Updated to use the new input text color with fallback) */
.modern-textarea {
    flex: 1;
    border: none !important;
    outline: none !important;
    background: transparent;
    padding: 10px 4px;
    margin: 0;
    font-size: 15px;
    font-family: 'Inter', sans-serif;
    max-height: 120px;
    line-height: 1.4;
    resize: none;
    box-shadow: none !important;
    align-self: center;
    overflow-y: auto;
    color: var(--llm-css-theme-input-text, var(--llm-css-theme-text-color)) !important;
}

/* Placeholder (Mixes the new input text color with transparency) */
.modern-textarea::placeholder {
    color: color-mix(in srgb, var(--llm-css-theme-input-text, var(--llm-css-theme-text-color)) 50%, transparent) !important;
}

/* Shared Icon Button Styles */
.modern-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    padding: 0;
}

/* Custom Camera Class */
.modern_chat_camera {
    width: 42px;
    height: 42px;
    margin-bottom: 2px;
    position: relative; 
}
.modern_chat_camera:hover { background: #f0f2f5; }
.modern_chat_camera img {
    width: 32px !important; 
    height: 32px !important;
    opacity: 0.7;
    object-fit: contain;
}

/* Notification Badge for Uploads */
.camera-badge {
    position: absolute;
    top: -4px;
    right: -12px;
    background: #ff4d4f; 
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    padding: 2px 6px;
    border-radius: 10px;
    line-height: 1.2;
    white-space: nowrap; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    pointer-events: none; 
}
.camera-badge:empty { display: none; }

/* Action Container (holds mic and send) */
.modern-action-container {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1px;
}

/* Mic Button */
.mic-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}
.modern-icon-btn.mic-btn {
    background: #f0f2f5;
    width: 42px;
    height: 42px;
}
.modern-icon-btn.mic-btn:hover { background: #e4e6eb; }
.modern-icon-btn.mic-btn img {
    height: 22px; 
    width: auto;  
    object-fit: contain;
}

/* The Send Button */
.modern-icon-btn.send-btn {
    width: 42px;
    height: 42px;
    background: var(--llm-css-theme-user-bg) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.modern-icon-btn.send-btn:hover {
    transform: translateY(-2px);
    filter: brightness(0.9);
}
.modern-icon-btn.send-btn img {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1);
    margin-right: 2px;
}

/* Mobile Tweaks */
@media (max-width: 480px) {
    .modern-chat-bar {
        margin: 5px 10px;
        width: calc(100% - 20px);
        padding: 6px 10px;
    }
    .modern-textarea { font-size: 14px; }
}

/* =========================================================================
   4. CLEANUP LEGACY ARTIFACTS (Triangles & Wrapper Backgrounds)
   ========================================================================= */

/* Hide the pointy triangles from all chat bubbles */
.comment-box::before,
.comment-box::after,
.comment-outer::before,
.comment-outer::after {
    display: none !important;
    content: none !important;
    border: none !important;
}

/* Remove the semi-transparent/light boxes around the input bar and options */
.choose-options,
#list_user_responses,
.type-here {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Ensure bottom-level wrappers let the LLM theme shine through */
.question-body,
.question-main,
.question-section {
    background-color: transparent !important;
}