/* static/css/knowledge_llm.css */

/* ================== NEW STYLES FOR UI IMPROVEMENTS ================== */

#main-task-tab .nav-item {
    flex-basis: 0;
    flex-grow: 1;
}
/* ==================================================================== */


/* --- Enhanced Upload Areas --- */
.upload-area {
    border: 2px dashed #ced4da;
    border-radius: .375rem;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    background-color: #f8f9fa;
    transition: background-color 0.2s, border-color 0.2s;
}
.upload-area:hover, .upload-area.dragover {
    background-color: #e9ecef;
    border-color: #0d6efd;
}
.upload-area .upload-icon {
    font-size: 2.5rem;
    color: #adb5bd;
    margin-bottom: 0.5rem;
}
.upload-area span { color: #0d6efd; text-decoration: none; }
.file-previews { max-height: 150px; overflow-y: auto; }

/* --- Chat Interface (Unchanged) --- */
.chatbox {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.message-group {
    display: flex;
    gap: 0.75rem;
    max-width: 85%;
}
.message-group.user {
    align-self: flex-end;
    flex-direction: row-reverse;
}
.message-group.bot {
    align-self: flex-start;
}
.chat-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: white;
    flex-shrink: 0;
}
.chat-avatar.user-avatar { background-color: #0d6efd; }
.chat-avatar.bot-avatar { background-color: #6c757d; }
.chat-content {
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    word-wrap: break-word;
}
/* Replace the old rule with this one */
.message-group.user .chat-content {
    background-color: white; /* Use the same gray as the bot */
    color: #212529; /* Use dark text for readability on gray */
    border: 1px solid #0d6efd; /* Add a subtle blue border */
    border-bottom-right-radius: 0.25rem;
}
.message-group.bot .chat-content {
    background-color: #e9ecef;
    color: #212529;
    border-bottom-left-radius: 0.25rem;
}
.bot.typing .chat-content {
    background-color: #e9ecef;
}
.bot.typing .dot {
    display: inline-block; width: 8px; height: 8px;
    background-color: #6c757d; border-radius: 50%;
    margin: 0 2px; animation: typing-blink 1.4s infinite both;
}
.bot.typing .dot:nth-child(2) { animation-delay: 0.2s; }
.bot.typing .dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing-blink { 0% { opacity: .2; } 20% { opacity: 1; } 100% { opacity: .2; } }
.chat-input-area textarea {
    resize: none;
}
.clickable-source {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
    background-color: rgba(0,0,0,0.05);
    padding: 2px 4px;
    border-radius: 4px;
    text-decoration: none;
}
.clickable-source:hover {
    text-decoration: underline;
}
/* ================== NEW STYLES FOR "OMNI-BAR" INPUT ================== */
.omni-bar {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid #dee2e6;
    border-radius: 1.5rem; /* Rounded corners */
    background-color: #fff;
    padding: 0.5rem;
    transition: box-shadow 0.2s;
}

.omni-bar:focus-within {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    border-color: #86b7fe;
}

.omni-bar .config-buttons {
    position: absolute;
    top: -32px; /* Position above the bar */
    left: 10px;
    display: flex;
    gap: 0.5rem;
}

.omni-bar textarea {
    flex-grow: 1;
    border: none;
    resize: none;
    background-color: transparent;
    padding-left: 0.5rem;
    max-height: 200px; /* Limit growth */
}
/* Remove the default focus outline since the parent handles it */
.omni-bar textarea:focus {
    box-shadow: none;
}

.omni-bar .btn {
    flex-shrink: 0;
}
.omni-bar #send-btn {
    width: 38px;
    height: 38px;
    transition: background-color 0.2s, opacity 0.2s;
}
.omni-bar #send-btn:disabled {
    background-color: #ced4da;
    opacity: 0.7;
}

/* Custom styling for Bootstrap popovers */
.popover {
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
    border-width: 0;
}
/* Target the card body specifically within the LLM chat pane */
#llm-chat-pane .card-body {
    /*
     * This calculation does the following:
     * 100vh: Start with the full height of the browser window.
     * 380px: Subtract the approximate combined height of all elements
     *        ABOVE the chat box (main nav, page title, tabs, padding, etc).
     * This makes the chat interface fill the remaining vertical space perfectly.
    */
    height: calc(100vh - 380px);
}
/* ================== NEW STYLES FOR DELETE MESSAGE BUTTON ================== */

/* Make the parent group relative for positioning the button */
.message-group.user {
    position: relative;
}

/* Style the delete button itself */
.delete-btn {
    position: absolute;
    left: -25px; /* Position it to the left of the user message bubble */
    top: 50%;
    transform: translateY(-50%);
    color: #adb5bd; /* Muted gray color */
    cursor: pointer;
    font-size: 0.9rem;
    opacity: 0; /* Hide it by default */
    transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out;
}

/* Show the button when hovering over the message group */
.message-group.user:hover .delete-btn {
    opacity: 1;
}

/* Make the icon slightly red on its own hover */
.delete-btn:hover {
    color: #dc3545;
}

/* In static/css/knowledge_llm.css */
.upload-area.disabled-upload {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #e9ecef;
}
@media (min-width: 576px) {
    .display-5.fw-bold {
        font-size: 1.8rem !important;
    }
    
    .lead.text-muted {
        font-size: 1rem !important;
    }
}