/* ===== RAG Chat Custom Elements & Drawer Styles ===== */

/* RAG Drawer Slider & Overlay */
.rag-drawer-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    z-index: 10000;
    animation: fadeInOverlay 0.28s ease-out;
}
.rag-drawer-overlay.open {
    display: block;
}
@keyframes fadeInOverlay {
    from { opacity: 0; }
    to { opacity: 1; }
}
.rag-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 35vw;
    min-width: 320px;
    height: 100vh;
    background: var(--phoenix-body-bg, #ffffff);
    box-shadow: 6px 0 24px rgba(0, 0, 0, 0.15);
    z-index: 10001;
    display: flex;
    flex-direction: column;
    transform: translateX(calc(-100% - 30px));
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    border-right: 1px solid var(--phoenix-border-color, #e5e5e5);
}
.rag-drawer.open {
    transform: translateX(0);
}
.rag-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--phoenix-border-color, #e5e5e5);
    background: var(--phoenix-card-bg, #fcfcfc);
}
.rag-drawer-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--phoenix-text-emphasis, #0d0d0d);
}
.rag-drawer-close {
    background: none;
    border: none;
    color: var(--phoenix-secondary-text, #676767);
    font-size: 22px;
    cursor: pointer;
    padding: 4px;
}
.rag-drawer-close:hover {
    color: var(--phoenix-text-emphasis, #0d0d0d);
}
.rag-drawer-question {
    padding: 14px 20px;
    background: var(--phoenix-body-highlight-bg, #f7f7f8);
    border-bottom: 1px solid var(--phoenix-border-color, #e5e5e5);
    font-size: 15px;
    color: var(--phoenix-secondary-text, #374151);
}
.rag-drawer-question strong {
    display: block;
    margin-bottom: 4px;
    color: var(--phoenix-text-emphasis, #0d0d0d);
}
.rag-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}
.rag-chunk-item {
    background: var(--phoenix-card-bg, #ffffff);
    border: 1px solid var(--phoenix-border-color, #e5e5e5);
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--phoenix-text-emphasis, #0d0d0d);
    white-space: pre-wrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.rag-chunk-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--phoenix-primary, #AE0728);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.rag-no-chunks {
    text-align: center;
    color: #9b9b9b;
    margin-top: 60px;
    font-size: 16px;
}

/* User Message RAG indicator */
.user-message .sent-message-content {
    position: relative;
}


/* Model selection status color overrides */
.model-status.success { color: var(--phoenix-success, #25b76e) !important; }
.model-status.error { color: var(--phoenix-danger, #fa4b4b) !important; }
.model-status.warning { color: var(--phoenix-warning, #f59e0b) !important; }

/* Thinking container pulse animation */
@keyframes pulse {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}
.thinking-container {
    animation: pulse 1.5s infinite ease-in-out;
}

/* ===== ChatGPT Style AI Response & Layout Customizations ===== */

/* 1. White Background for Chat Area */
#chat-container {
    background-color: #ffffff !important;
}
.chat .card {
    background-color: #ffffff !important;
}

/* 2. RAG vs Simple Chat Mode Tabs Visual distinction */
#chat-mode-tabs {
    background: var(--phoenix-body-highlight-bg, #f5f5f7) !important;
    padding: 4px;
    border-radius: 20px;
    border: 1px solid var(--phoenix-border-color-translucent, #e0e0e0);
}
#chat-mode-tabs .nav-link {
    border-radius: 16px;
    padding: 6px 20px;
    font-weight: 700;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    color: var(--phoenix-secondary-text, #6c757d) !important;
    border: none !important;
    background: transparent !important;
}
#chat-mode-tabs .nav-link.active {
    background: var(--phoenix-primary, #AE0728) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(174, 7, 40, 0.25);
}

/* 3. ChatGPT-style AI Message (no speech bubble, full width, clean markdown text) */
.chat-message.ai-message {
    padding: 1.5rem 0.5rem;
    margin-bottom: 0 !important;
    border-bottom: 1px solid var(--phoenix-border-color-translucent, #f0f0f0);
}
.chat-message.ai-message .avatar {
    display: none !important; /* AI 프로필 아이콘 안 뜨게 설정 */
}
.chat-message.ai-message .w-xxl-75 {
    width: 100% !important;
}
.chat-message.ai-message .chat-message-content {
    max-width: 100% !important;
    width: 100%;
}
.chat-message.ai-message .received-message-content {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--phoenix-text-emphasis, #212529) !important;
}
.chat-message.ai-message .received-message-content::before,
.chat-message.ai-message .received-message-content::after {
    display: none !important; /* 말풍선 끄트머리 뾰족한 꼬리 안 뜨게 설정 */
}
.chat-message.ai-message .ai-response-body {
    font-size: 0.95rem;
    line-height: 1.6;
}
.chat-message.ai-message .ai-response-body p {
    margin-bottom: 1rem !important;
}
.chat-message.ai-message .ai-response-body p:last-child {
    margin-bottom: 0 !important;
}

/* 4. AI Response Action Buttons (Copy & Sources) */
.ai-response-actions {
    opacity: 0.6;
    transition: opacity 0.2s ease;
}
.ai-response-actions:hover {
    opacity: 1;
}
.ai-response-actions .btn-link {
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none !important;
    color: var(--phoenix-secondary-text, #6c757d) !important;
    transition: color 0.2s ease;
}
.ai-response-actions .btn-link:hover {
    color: var(--phoenix-primary, #AE0728) !important;
}
.ai-response-actions .btn-link span {
    font-size: 0.85rem;
}

/* 5. Responsive Sidebar Layout Alignments */
@media (min-width: 992px) {
    .content {
        margin-left: 15.875rem !important;
        transition: margin-left 0.2s ease-in-out !important;
    }
    .navbar-vertical-collapsed .content {
        margin-left: 4rem !important;
    }
}
@media (max-width: 991.98px) {
    .content {
        margin-left: 0 !important;
    }
}

/* 6. Sidebar Session List Spacing & Horizontal Scroll Patch */
#sessions-list {
    overflow-x: hidden !important;
    padding-left: 0 !important;
}
#sessions-list .nav-item {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}
#sessions-list .nav-link {
    padding-left: 8px !important;
    padding-right: 8px !important;
}
#sessions-list .nav-link .nav-link-icon {
    margin-right: 6px !important;
}

/* 7. User Message Copy Button & Selection styles */
.user-copy-btn {
    transition: opacity 0.2s ease-in-out;
}
.user-copy-btn:hover {
    opacity: 1 !important;
}
.chat-message,
.chat-message-content,
.sent-message-content, 
.sent-message-content p {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}

/* 8. User Bubble Selection Highlight Color Override */
.sent-message-content *::selection,
.sent-message-content::selection {
    background-color: rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
}
.sent-message-content *::-moz-selection,
.sent-message-content::-moz-selection {
    background-color: rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
}

/* 9. Markdown Tables in AI Response */
.ai-response-body .table-responsive {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
    border-radius: 8px;
    border: 1px solid var(--phoenix-border-color-translucent, #e0e0e0);
}
.ai-response-body table {
    width: 100%;
    margin-bottom: 0 !important;
    font-size: 0.875rem;
    border-collapse: collapse;
}
.ai-response-body th,
.ai-response-body td {
    padding: 0.65rem 0.85rem !important;
    vertical-align: middle;
}
.ai-response-body thead th {
    background-color: var(--phoenix-body-highlight-bg, #f8f9fa) !important;
    font-weight: 600;
    color: var(--phoenix-text-emphasis, #212529);
    border-bottom: 2px solid var(--phoenix-border-color-translucent, #d0d0d0) !important;
}