:root {
    --chat-bg: #f8f9fa; /* light panel background */
    --chat-user-bg: #0d6efd; /* light user bubble */
    --chat-assistant-bg: #f8f9fa;
    --chat-input-bg: #ffffff;
    --chat-text: #212529;
    --chat-user-text: #fff;
    --chat-assistant-text: #212529;
    --chat-icon-color: #333;
    --chat-icon-hover-bg: rgba(0,0,0,0.05);
}

[data-bs-theme="dark"] {
    --chat-bg: #212529;
    --chat-user-bg: #333333;
    --chat-assistant-bg: #212529;
    --chat-input-bg: #333333;
    --chat-text: #f8f9fa;
    --chat-user-text: #fff;
    --chat-assistant-text: #ddd;
    --chat-icon-color: #ccc;
    --chat-icon-hover-bg: rgba(255,255,255,0.1);
}

#promptInput:empty:before {
    content: attr(data-placeholder);
    color: #aaa;
}

.chat-bubble {
    max-width: 70%;
    padding: 10px 14px 10px 10px;
    border-radius: 18px;
    word-wrap: break-word;
    /*white-space: pre-wrap;*/
    color: var(--chat-text);
}

/* Assistant bubble (left, gray) */
.chat-bubble.assistant {
    background-color: transparent; /*var(--chat-assistant-bg);*/
    color: var(--chat-assistant-text);
    border-radius: 4px;
    max-width: 100%; /* previously 70% */
    width: 100%; /* ensures it fills container */
    /* Animation */
    opacity: 0;
    transform: translateY(10px);
    animation: fadeSlideIn 0.3s forwards;
}

.chat-bubble-container {
    padding-right: 10px;
}

/* User bubble (right, blue) */
.chat-bubble.user {
    background-color: var(--chat-user-bg);
    color: var(--chat-user-text);
    border-bottom-right-radius: 4px;
    opacity: 0;
    transform: translateY(10px);
    animation: fadeSlideIn 0.3s forwards;
}


.chat-bubble.typing {
    background-color: var(--chat-assistant-bg);
    color: var(--chat-assistant-text);
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 4px;
}

.typing-dots {
    display: inline-flex; /* sit in same line as text */
    gap: 3px;
    vertical-align: middle; /* align nicely with text baseline */
}

.typing-dots span {
    display: block;
    width: 6px;
    height: 6px;
    background-color: #666;
    border-radius: 50%;
    animation: typing-bounce 1.4s infinite;
}

.typing-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing-bounce {
    0%, 80%, 100% {
        transform: scale(0.6);
        opacity: 0.5;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}


@keyframes fadeSlideIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/***********************************/
.chat-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important; /* force circle */
    background-color: transparent;
    color: var(--chat-icon-color);
    transition: background-color 0.2s;
}

    .chat-btn:hover {
        /*background-color: rgba(255, 255, 255, 0.1);*/
        background-color: var(--chat-icon-hover-bg);
        color: var(--chat-icon-color);
    }

.chat-btn.btn-danger {
    background-color: #dc3545;
    color: #fff;
}

.chat-btn.btn-danger:hover {
    background-color: #bb2d3b;
}

.btn-sm.rounded-circle {
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

.btn-sm.rounded-circle:hover {
    background-color: rgba(0, 0, 0, 0.1); /* subtle hover effect */
}

.chat-btn-ass {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important; /* force circle */
    background-color: transparent;
    color: var(--chat-icon-color);
    transition: background-color 0.2s;
}

    .chat-btn-ass:hover {
        background-color: var(--chat-icon-hover-bg);
        color: var(--chat-icon-color);
        /*background-color: #fff; */ /* white-ish on hover */
        /*color: #000;*/ /* icon turns dark */
    }

/*****************************/
.chat-input-container {
    border-radius: 24px;
    background-color: var(--chat-input-bg);
    color: var(--chat-text); /* ensures text + caret (cursor) visible */
}

/* also make sure textarea/input inside inherit */
.chat-input-container input,
.chat-input-container textarea {
    background: transparent;
    border: none;
    outline: none;
    width: 100%;
    resize: none;
    color: var(--chat-text); /* explicit */
    caret-color: var(--chat-text); /* cursor color */
}

/*****************************/
.chat-input {
    max-height: calc(1.5em * 10); /* ~10 lines */
    min-height: 2.5em; /* one line */
    overflow-y: auto;
    width: 100%; /* use full available width */
    white-space: pre-wrap; /* preserve line breaks, wrap normally */
    word-wrap: break-word; /* break long words in older browsers */
    overflow-wrap: anywhere; /* modern, allows breaking anywhere in a word */
    overflow-x: hidden; /* hide horizontal overflow */

    resize: none;
    line-height: 1.5em;
    cursor: text;
    color: var(--chat-text);
    caret-color: var(--chat-text);
    border: 1px solid rgba(0,0,0,0.03); /* very subtle gray border */
    border-radius: 6px; /* slight rounding */
    padding: 0.5em; /* breathing room */
    background: var(--chat-bg); /* follow theme */
}

/* Highlight when focused */
.chat-input:focus {
    border-color: var(--chat-accent, #007bff); /* or your theme accent */
    outline: none; /* remove default browser outline */
    box-shadow: 0 0 0 2px rgba(0,123,255,0.2); /* subtle glow */
}

/* Placeholder styling for contenteditable */
.chat-input:empty:before {
    content: attr(data-placeholder);
    color: #aaa;
    pointer-events: none;
}



/******************/
#chatContainer {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0; /* important */
}

/* Let chatPanel grow only until input pushes it */
#chatPanel {
    flex-grow: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* Ensure messages stack from top down */
#chatPanel > * {
    flex-shrink: 0;
}

/*************************** Dialog*/
.modal-content {
    transition: background-color 0.3s ease, color 0.3s ease;
}

[data-bs-theme="dark"] .modal-content {
    background-color: #2b2b2b;
    color: #f8f9fa;
}

[data-bs-theme="dark"] .btn-light {
    background-color: #3a3a3a;
    color: #e2e2e2;
}

/* Force static clean look for snapshot */
.snapshot-mode,
.snapshot-mode * {
    background: #ffffff !important; /* Force white background */
    color: #000000 !important; /* Force black text (or pick your own) */
    box-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    transition: none !important;
}

/* Optional: adjust for dark theme snapshots */
:root[data-bs-theme="dark"] .snapshot-mode,
:root[data-bs-theme="dark"] .snapshot-mode * {
    background: #1e1e1e !important;
    color: #f8f9fa !important;
}

/************************ Forms */
.yaml-form-placeholder {
    width: 100%; /* default to full width */
    max-width: 50%; /* but no more than 50% of parent */
    min-width: 300px; /* don’t shrink too small */
    box-sizing: border-box; /* include padding/border in width */
}
.yaml-form-placeholder.center {
    margin: 0 auto; /* centers when smaller than max */
}

/* When the parent (or viewport) is smaller than 600px, use full width */
@media (max-width: 600px) {
    .yaml-form-placeholder {
        max-width: 100%;
    }
}