/* Chat */

    html {
      scroll-behavior: smooth;
    }
    #chat {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .chat-header {
        display: flex;
        align-items: flex-start;
        border-bottom: 1px solid #eee;     
        gap: 16px;
        padding: 8px;
    }
    .chat-header img {
        right: unset !important;
        width: 36px; 
        height: 36px;
    }
    .chat-header h3 {
    }
    
    .chat-container {
        flex: 1;
        min-height: 500px;
        height: 500px;
        max-height: 500px;
        width: 28vw;
        max-width: 28vw;
        background: white;
        border-radius: 20px;
        padding: 1rem;
        box-shadow: 0 6px 18px rgba(0,0,0,0.08);
        margin-bottom: 3rem;
        overflow-y: scroll;
        display: flex;
        flex-direction: column;
    }
    .chat-messages { flex: 1; overflow-y: auto; padding: 1rem; border-bottom: 1px solid #eee; }
    .message { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 1rem; }
    .message.user { flex-direction: row-reverse; text-align: right; }
    .message img { width: 36px; height: 36px; border-radius: 50%; right: unset !important; }
    .bubble {
    padding: 0.6rem 1rem;
    border-radius: 15px;
    max-width: 70%;
    background: #f0f0f5;

    /* New lines to fix overflow */
    word-wrap: break-word;       /* Break long words */
    overflow-wrap: break-word;   /* Ensure breaking for very long strings */
    white-space: pre-wrap;       /* Preserve line breaks from LLMs */
    overflow-x: auto;            /* Allow horizontal scroll for very wide content (like tables) */
}
    .message.user .bubble { background: #7e57c2; color: white; }
    .chat-input-area { display: flex; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: nowrap; }
    .chat-input-area select, .chat-input-area input {
        flex: 1; padding: 0.7rem; border: 1px solid #ddd; border-radius: 10px; font-size: 1rem;
    }
    .chat-input-area button {
        flex-shrink: 0; /* don’t let button shrink too small */
        background: linear-gradient(-45deg, #7e57c2, #9c27b0, #512da8, #b388ff); color: white; border: none; padding: 0.7rem 1.5rem; border-radius: 25px;
        cursor: pointer; font-size: 1rem; transition: transform 0.2s ease;
    }
    .chat-input-area button:hover { transform: scale(1.05); }


/* Mobile adjustments */
@media (max-width: 768px) {

    #chat-area .row {
        flex-direction: column-reverse !important;
    }

    #chat-area h2 {
        visibility:collapse !important;
    }
    .chat-container {
        margin-top: 56px;
        min-width: 95vw;
        width: 95vw;
        max-width: 95vw;
        height: 60vh;
        max-height: 60vh;
        bottom: 80px; /* leave space for toggle button */
        right: unset;
        border-radius: 15px;
        padding: 0.8rem;
    }

    .chat-messages { padding: 0.5rem; }
    .bubble {
        padding: 0.6rem 1rem;
        font-size: 14px !important;
    }
    .message img { width: 24px; height: 24px; }

    .chat-input-area {
        gap: 0.4rem;
        flex-wrap: nowrap; /* Prevent wrapping */
    }
    .chat-input-area input {
        min-width: 0;
    }
    .chat-input-area button {
    }
}