/* KMS (Knowledge RAG Platform) 전용 스타일 */

/******************************************************************/
/* Knowledge RAG Platform Web Interface 전용 스타일 */

.content-section {
    animation: fadeIn 0.3s;
}

/* 드래그앤드랍 업로드 영역 스타일 */
.upload-area {
    border: 2px dashed var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 2rem;
    text-align: center;
    background-color: var(--bs-secondary-bg);
    transition: all 0.3s ease;
    cursor: pointer;
}

.upload-area:hover {
    border-color: var(--bs-primary);
    background-color: var(--bs-tertiary-bg);
}

.upload-area.dragover {
    border-color: var(--bs-success);
    background-color: var(--bs-success-bg-subtle);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* #chat-messages는 기본 폰트 상속 (Noto Sans KR) */

.message-user {
    background-color: #e3f2fd;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    border-radius: 0.25rem;
}

.message-assistant {
    background-color: #f1f8e9;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    border-radius: 0.25rem;
}

.source-item {
    margin-bottom: 0.125rem;
}

/* 출처 항목 넘버링 스타일 */
.step-number {
    display: inline-block;
    padding: 0.125rem 0.35rem;
    background-color: #cfe2ff;
    color: var(--bs-primary);
    border-radius: 0.2rem;
    font-size: 0.75rem;
    font-weight: normal;
    margin-right: 0.35rem;
}

/* LLM 질문 헤더 스타일 */
.llm-question-header {
    background-color: rgba(0, 0, 0, 0.05);
    border-left: 4px solid var(--bs-primary);
    border-bottom: 2px solid var(--bs-border-color);
    padding-left: calc(1rem - 4px);
}

/* 다크 모드 지원 */
[data-bs-theme="dark"] .llm-question-header {
    background-color: rgba(255, 255, 255, 0.05);
    border-bottom-color: var(--bs-border-color);
}

/* 메시지 저장 상태 아이콘 수직 정렬 (상단 정렬) */
.message-save-status-icon {
    align-self: flex-start;
}

/* ID 복사 버튼 스타일 (작은 크기, 테두리 없음) */
.id-copy-btn {
    padding: 0.125rem 0.25rem;
    font-size: 0.75rem;
    line-height: 1;
    border: none;
    min-width: auto;
    text-decoration: none;
    color: var(--bs-secondary);
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.id-copy-btn:hover {
    color: var(--bs-primary);
    text-decoration: none;
    background-color: transparent;
}

.id-copy-btn:focus {
    box-shadow: none;
    color: var(--bs-primary);
    background-color: transparent;
}

.id-copy-btn:active {
    background-color: transparent;
}

.id-copy-btn i {
    font-size: 0.75rem;
    line-height: 1;
    display: inline-block;
}

/* LLM 답변 바디 스타일 */
.llm-answer-body {
    border-left: 4px solid var(--bs-warning);
    padding-left: calc(1rem - 4px);
    background-color: var(--bs-body-bg);
}

/* RAG 질의 카드의 footer 스타일 (출처 + 피드백 섹션) */
.rag-card-footer {
    border-left: 4px solid var(--bs-success);
    padding-left: calc(1rem - 4px);
    margin-top: 0;
    border-top: 1px solid var(--bs-border-color);
}

/* 마크다운 렌더링 스타일 */
.rag-answer,
.summarize-result,
.llm-answer-body {
    line-height: 1.6;
}

.llm-answer-body h1,
.rag-answer h1,
.summarize-result h1 {
    font-size: 1.75rem;
    font-weight: bold;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--bs-border-color);
}

.llm-answer-body h2,
.rag-answer h2,
.summarize-result h2 {
    font-size: 1.5rem;
    font-weight: bold;
    margin-top: 1.25rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.375rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.llm-answer-body h3,
.rag-answer h3,
.summarize-result h3 {
    font-size: 1.25rem;
    font-weight: bold;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.llm-content h4,
.rag-answer h4,
.summarize-result h4 {
    font-size: 1.125rem;
    font-weight: bold;
    margin-top: 0.875rem;
    margin-bottom: 0.5rem;
}

.llm-answer-body h5,
.rag-answer h5,
.summarize-result h5 {
    font-size: 1rem;
    font-weight: bold;
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
}

.llm-content h6,
.rag-answer h6,
.summarize-result h6 {
    font-size: 0.875rem;
    font-weight: bold;
    margin-top: 0.625rem;
    margin-bottom: 0.5rem;
}

.llm-answer-body p,
.rag-answer p,
.summarize-result p {
    margin-bottom: 1rem;
}

.llm-answer-body ul,
.llm-answer-body ol,
.rag-answer ul,
.rag-answer ol,
.summarize-result ul,
.summarize-result ol {
    margin-bottom: 1rem;
    padding-left: 2rem;
}

.llm-answer-body li,
.rag-answer li,
.summarize-result li {
    margin-bottom: 0.5rem;
}

.llm-content ul li,
.rag-answer ul li,
.summarize-result ul li {
    list-style-type: disc;
}

.llm-answer-body ol li,
.rag-answer ol li,
.summarize-result ol li {
    list-style-type: decimal;
}

.llm-content code,
.rag-answer code,
.summarize-result code {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-emphasis-color);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.875em;
}

.llm-answer-body pre,
.rag-answer pre,
.summarize-result pre {
    background-color: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 1rem;
    overflow-x: auto;
}

.llm-answer-body pre code,
.rag-answer pre code,
.summarize-result pre code {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    font-size: 0.875rem;
    display: block;
    white-space: pre;
}

.llm-answer-body blockquote,
.rag-answer blockquote,
.summarize-result blockquote {
    border-left: 4px solid var(--bs-primary);
    padding-left: 1rem;
    margin-left: 0;
    margin-bottom: 1rem;
    color: var(--bs-secondary-color);
    font-style: italic;
}

.llm-answer-body table,
.rag-answer table,
.summarize-result table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.llm-answer-body table th,
.llm-answer-body table td,
.rag-answer table th,
.rag-answer table td,
.summarize-result table th,
.summarize-result table td {
    border: 1px solid var(--bs-border-color);
    padding: 0.5rem;
    text-align: left;
}

.llm-answer-body table th,
.rag-answer table th,
.summarize-result table th {
    background-color: var(--bs-secondary-bg);
    font-weight: bold;
}

.llm-answer-body strong,
.rag-answer strong,
.summarize-result strong {
    font-weight: bold;
}

.llm-answer-body em,
.rag-answer em,
.summarize-result em {
    font-style: italic;
}

.llm-answer-body a,
.rag-answer a,
.summarize-result a {
    color: var(--bs-link-color);
    text-decoration: underline;
}

.llm-answer-body a:hover,
.rag-answer a:hover,
.summarize-result a:hover {
    color: var(--bs-link-hover-color);
}

.llm-answer-body hr,
.rag-answer hr,
.summarize-result hr {
    border: none;
    border-top: 1px solid var(--bs-border-color);
    margin: 1.5rem 0;
}

/* 알림 스타일 */
.alert {
    margin-bottom: 1rem;
}

/* 로딩 스피너 */
.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

/******************************************************************/
/* 프로그레스바 스타일 (배지 및 아이콘과 높이 일치: 20px) */

/* 프로그레스바 부드러운 전환 효과 */
.progress-bar {
    transition: width 0.3s ease-out, background-color 0.3s ease-out;
}

/* 테이블 내 진행률 바 높이를 배지 및 아이콘과 일치하도록 조정 */
table.dataTable tbody td .progress {
    height: initial;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 0.375rem;
}

/* 작업관리 테이블 진행률 컬럼 수직 중앙 정렬 */
#job-table tbody td:nth-child(4) {
    vertical-align: middle;
}

/* 일반 진행률 바 (테이블 외부) */
.progress {
    height: 1.5rem;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 0.375rem;
}

/* 유틸리티 클래스 */
.max-w-300 {
    max-width: 300px;
}

.scrollable-area {
    overflow-y: auto;
    transition: none !important;
}

/* 현대적인 스크롤바 스타일 */
/* 웹킷 브라우저 (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

/* 라이트 모드 스크롤바 - 배경 투명 */
::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    border: 2px solid transparent;
    transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.5);
}

/* 다크 모드 스크롤바 - 배경 투명 */
[data-bs-theme="dark"] ::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    border: 2px solid transparent;
    transition: background 0.2s ease;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* Firefox - 라이트 모드 - 배경 투명 */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
}

/* Firefox - 다크 모드 - 배경 투명 */
[data-bs-theme="dark"] * {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

/* 채팅 details 요소 스타일 */
.chat-details {
    position: relative;
    z-index: 10;
    margin-bottom: 0;
    background-color: var(--bs-body-bg);
    padding-bottom: 0.5rem;
}

/* 채팅 details 내부 p 요소 스타일 (div.mt-2 제거 후) */
.chat-details > p {
    margin-top: 0.5rem; /* mt-2 대체 */
}

/* RAG details 요소 스타일 */
.rag-details {
    position: relative;
    z-index: 10;
    margin-bottom: 0;
    background-color: var(--bs-body-bg);
    padding-bottom: 0.5rem;
}

/* RAG details 내부 p 요소 스타일 (div.mt-2 제거 후) */
.rag-details > p {
    margin-top: 0.5rem; /* mt-2 대체 */
}

/* 요약 페이지 details 내부 p 요소 스타일 (div.mt-2 제거 후) */
details.mb-3 > p {
    margin-top: 0.5rem; /* mt-2 대체 */
}

/* 채팅 메시지 영역 스타일 (상단 배치) */
.chat-messages-area {
    position: absolute;
    top: var(--details-height, 0px); /* details 높이만큼 아래에서 시작 */
    left: 0;
    right: 0;
    bottom: var(--input-container-height, 0px); /* 입력 컨테이너 높이만큼 위에서 끝 */
    overflow-y: auto;
    padding: 1rem 0; /* 상하 패딩만 유지, 좌우 패딩 제거 */
    margin: 0;
    z-index: 2; /* details 요소 위에 표시되도록 (z-index: 10보다 낮지만 메시지는 표시되어야 함) */
    border-top: 1px solid var(--bs-border-color);
    border-bottom: 1px solid var(--bs-border-color);
}

/* RAG 메시지 영역 스타일 (상단 배치) */
.rag-messages-area {
    position: absolute;
    top: var(--rag-details-height, 0px); /* details 높이만큼 아래에서 시작 */
    left: 0;
    right: 0;
    bottom: var(--rag-input-container-height, 0px); /* 입력 컨테이너 높이만큼 위에서 끝 */
    overflow-y: auto;
    padding: 0;
    margin: 0;
    z-index: 1; /* details 요소 아래에 표시되도록 */
    border-top: 1px solid var(--bs-border-color);
    border-bottom: 1px solid var(--bs-border-color);
}

/* 채팅 입력 컨테이너 (하단 고정, footer 위에 배치) - container와 동일한 스타일 적용 */
.chat-input-container {
    position: fixed;
    bottom: 28px; /* footer 높이만큼 위에 배치 */
    left: 50%;
    transform: translateX(-50%); /* 중앙 정렬 */
    width: 100%;
    max-width: 100%; /* 기본값: 작은 화면 */
    background-color: var(--bs-body-bg);
    z-index: 1000;
    padding: 1rem 0.75rem 0 0.75rem; /* 상단 및 좌우 패딩 (container와 동일) */
    margin: 0;
    box-sizing: border-box;
}

/* RAG 입력 컨테이너 (하단 고정, footer 위에 배치) - container와 동일한 스타일 적용 */
.rag-input-container {
    position: fixed;
    bottom: 28px; /* footer 높이만큼 위에 배치 */
    left: 50%;
    transform: translateX(-50%); /* 중앙 정렬 */
    width: 100%;
    max-width: 100%; /* 기본값: 작은 화면 */
    background-color: var(--bs-body-bg);
    z-index: 1000;
    padding: 1rem 0.75rem 0 0.75rem; /* 상단 및 좌우 패딩 (container와 동일) */
    margin: 0;
    box-sizing: border-box;
}

/* Bootstrap container의 max-width와 동일하게 적용 (cascade 활용) */
@media (min-width: 576px) {
    .chat-input-container,
    .rag-input-container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .chat-input-container,
    .rag-input-container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .chat-input-container,
    .rag-input-container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .chat-input-container,
    .rag-input-container {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .chat-input-container,
    .rag-input-container {
        max-width: 1320px;
    }
}

/* site.css의 @media (max-width: 992px) 규칙과 동일하게 적용 (cascade 활용, 나중에 선언하여 우선순위 확보) */
@media (max-width: 992px) {
    .chat-input-container,
    .rag-input-container {
        max-width: 100%;
    }
}

/* 채팅 입력 컨테이너 내부 카드 하단 마진/패딩 제거 (cascade 활용) */
.chat-input-container .card {
    margin-bottom: 0 !important;
    width: 100%;
    box-sizing: border-box;
}

/* RAG 입력 컨테이너 내부 카드 하단 마진/패딩 제거 (cascade 활용) */
.rag-input-container .card {
    margin-bottom: 0 !important;
    width: 100%;
    box-sizing: border-box;
}


/* footer 높이를 CSS 변수로 설정 (JavaScript에서 동적으로 설정) */
footer.footer {
    --footer-height: auto;
}

/* section-chat을 상대 위치 컨테이너로 설정 */
#section-chat {
    position: relative;
    width: 100%;
    /* 높이는 JavaScript에서 동적으로 계산하여 설정 */
    min-height: 500px;
}

/* section-rag을 상대 위치 컨테이너로 설정 */
#section-rag {
    position: relative;
    width: 100%;
    /* 높이는 JavaScript에서 동적으로 계산하여 설정 */
    min-height: 500px;
}

/* 채팅 입력창 자동 높이 조절 */
#chat-input {
    resize: none !important;
    overflow-y: auto;
    min-height: calc(1.5em * 3 + 0.5rem * 2 + 2px); /* 기본 3줄 높이 */
    max-height: calc(1.5em * 10 + 0.5rem * 2 + 2px); /* 최대 10줄 높이 */
    line-height: 1.5;
}

/* RAG 필터 옵션: 레이블·컨트롤 가로 배치, 태그+날짜 한 줄(좁은 화면은 flex-wrap) */
.rag-filters-panel .rag-filter-label {
    margin-bottom: 0;
    flex-shrink: 0;
}
.rag-filters-panel .rag-filter-inline-row {
    width: 100%;
}
.rag-filters-panel .rag-filter-tags-group {
    flex: 1 1 12rem;
    min-width: min(100%, 12rem);
}
.rag-filters-panel .rag-filter-tags-input {
    min-width: 0;
    flex: 1 1 auto;
}
.rag-filters-panel .rag-filter-date-input {
    width: auto;
    max-width: 11rem;
    min-width: 9rem;
}

/* RAG 입력창 자동 높이 조절 */
#rag-query {
    resize: none !important;
    overflow-y: auto;
    min-height: calc(1.5em * 3 + 0.5rem * 2 + 2px); /* 기본 3줄 높이 */
    max-height: calc(1.5em * 10 + 0.5rem * 2 + 2px); /* 최대 10줄 높이 */
    line-height: 1.5;
}

/* 메시지 영역 transition 완전 제거 및 높이 동적 설정 */
#rag-messages {
    height: auto !important;
    max-height: none !important;
    transition: none !important;
}

/* chat-messages는 절대 위치이므로 높이는 부모 컨테이너에 맞춤 (bottom: 0으로 설정됨) */
#chat-messages.chat-messages-area {
    /* 절대 위치이므로 높이는 top/bottom으로 자동 계산됨 */
    transition: none !important;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    -ms-transition: none !important;
    transition-duration: 0s !important;
    -webkit-transition-duration: 0s !important;
    -moz-transition-duration: 0s !important;
    -o-transition-duration: 0s !important;
    -ms-transition-duration: 0s !important;
    transition-property: none !important;
    -webkit-transition-property: none !important;
    -moz-transition-property: none !important;
    -o-transition-property: none !important;
    -ms-transition-property: none !important;
    transition-timing-function: none !important;
    -webkit-transition-timing-function: none !important;
    -moz-transition-timing-function: none !important;
    -o-transition-timing-function: none !important;
    -ms-transition-timing-function: none !important;
    animation: none !important;
    -webkit-animation: none !important;
    -moz-animation: none !important;
    -o-animation: none !important;
    -ms-animation: none !important;
}

/* 메시지 영역의 부모 요소들도 transition 제거 */
#section-chat,
#section-rag,
#section-chat > *,
#section-rag > * {
    transition: none !important;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    -ms-transition: none !important;
}

/* DataTables 테이블 상단 컨트롤 레이아웃 - KMS 전용 */
.dataTables_wrapper .row {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.dataTables_wrapper .dataTables_length {
    flex: 0 0 auto;
    margin-right: auto;
}

.dataTables_wrapper .dataTables_filter {
    flex: 0 0 auto;
    margin-left: auto;
}

/******************************************************************/
/* 테이블 내부 버튼 스타일: 기본 투명 배경, 호버 시 배경색 표시 */

table tbody td .btn-group .btn {
    background-color: transparent !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

table tbody td .btn-group .btn.btn-primary {
    color: var(--bs-primary) !important;
    border-color: var(--bs-primary);
}

table tbody td .btn-group .btn.btn-primary:hover {
    background-color: var(--bs-primary) !important;
    color: var(--bs-primary-contrast, #fff) !important;
}

table tbody td .btn-group .btn.btn-warning {
    color: var(--bs-warning) !important;
    border-color: var(--bs-warning);
}

table tbody td .btn-group .btn.btn-warning:hover {
    background-color: var(--bs-warning) !important;
    color: var(--bs-warning-contrast, #000) !important;
}

table tbody td .btn-group .btn.btn-danger {
    color: var(--bs-danger) !important;
    border-color: var(--bs-danger);
}

table tbody td .btn-group .btn.btn-danger:hover {
    background-color: var(--bs-danger) !important;
    color: var(--bs-danger-contrast, #fff) !important;
}

table tbody td .btn-group .btn.btn-secondary {
    color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary);
}

table tbody td .btn-group .btn.btn-secondary:hover:not(:disabled) {
    background-color: var(--bs-secondary) !important;
    color: var(--bs-secondary-contrast, #fff) !important;
}

table tbody td .btn-group .btn.btn-success {
    color: var(--bs-success) !important;
    border-color: var(--bs-success);
}

table tbody td .btn-group .btn.btn-success:hover {
    background-color: var(--bs-success) !important;
    color: var(--bs-success-contrast, #fff) !important;
}

/******************************************************************/
/* 출처 원문보기 모달 - 가독성 개선 */

.chunk-original-text {
    font-family: "Noto Sans KR", "Noto Sans CJK KR", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "NanumBarunGothic", Roboto, "Segoe UI", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif, emoji;
    font-size: 0.9375rem;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    max-height: 60vh;
    overflow-y: auto;
    padding: 1rem 1.25rem;
    margin: 0;
    background-color: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
}

/* 문서별 참고 청크 박스 (원문보기 모달) */
.chunk-box {
    background-color: var(--bs-body-bg);
}
.chunk-box .chunk-original-text {
    max-height: 30vh;
}

/* 파일 제거 버튼 스타일 */
.file-remove-btn {
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.file-remove-btn:hover {
    opacity: 1;
    color: var(--bs-danger) !important;
}

/******************************************************************/
/* 모달 헤더 높이 및 패딩 조정 */

.modal-header {
    padding: 0.5rem 1rem !important;
    min-height: auto;
}

.modal-header .modal-title {
    margin-bottom: 0;
    line-height: 1.5;
}

/******************************************************************/
/* 모달 헤더 텍스트 색상 가독성 개선 */

.modal-header.bg-primary .modal-title {
    color: #fff !important;
}

.modal-header.bg-secondary .modal-title {
    color: #fff !important;
}

.modal-header.bg-success .modal-title {
    color: #fff !important;
}

.modal-header.bg-danger .modal-title {
    color: #fff !important;
}

.modal-header.bg-warning .modal-title {
    color: #000 !important;
}

.modal-header.bg-info .modal-title {
    color: #000 !important;
}

.modal-header.bg-light .modal-title {
    color: #000 !important;
}

.modal-header.bg-dark .modal-title {
    color: #fff !important;
}

/******************************************************************/
/* 모달 헤더 X 버튼 색상 자동 조정 (타이틀 텍스트 색상과 동일) */

/* 검은색 타이틀: 검은색 X 버튼 (기본값) */
.modal-header.bg-warning .btn-close,
.modal-header.bg-info .btn-close,
.modal-header.bg-light .btn-close {
    filter: none;
    opacity: 1;
}

/* 흰색 타이틀: 흰색 X 버튼 */
.modal-header.bg-primary .btn-close,
.modal-header.bg-secondary .btn-close,
.modal-header.bg-success .btn-close,
.modal-header.bg-danger .btn-close,
.modal-header.bg-dark .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 1;
}

/******************************************************************/
/* DataTables Responsive 서브항목 한 줄 표시 스타일 */

/* 서브항목 셀 스타일 */
tr.child td {
    padding: 0.5rem 1rem !important;
    white-space: normal !important;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

/* 서브항목 한 줄 표시 컨테이너 */
tr.child td .dtr-details-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* 서브항목 인라인 항목 */
tr.child td .dtr-details-inline .dtr-inline {
    display: inline-block;
    white-space: nowrap;
}

/* 서브항목 컬럼명 스타일 */
tr.child td .dtr-details-inline .dtr-inline strong {
    color: var(--bs-secondary);
    font-weight: 600;
    margin-right: 0.25rem;
}

/* Dark 테마에서 컬럼명 색상 조정 */
[data-bs-theme="dark"] tr.child td .dtr-details-inline .dtr-inline strong {
    color: var(--bs-info);
}

/******************************************************************/
/* 세션 메시지 모달 리사이즈 가능 설정 */

#view-session-messages-modal .modal-dialog {
    position: relative;
    width: 800px;
    height: 600px;
    min-width: 500px;
    min-height: 400px;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    margin: 1.75rem auto;
}

#view-session-messages-modal .modal-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

#view-session-messages-modal .modal-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#view-session-messages-modal #session-messages-list {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    height: auto !important;
    max-height: none !important;
}

/* 리사이즈 핸들 */
#view-session-messages-modal .modal-resize-handle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 16px;
    height: 16px;
    cursor: nwse-resize;
    z-index: 1055;
    background-image: repeating-linear-gradient(
        -45deg,
        var(--bs-border-color),
        var(--bs-border-color) 1px,
        transparent 1px,
        transparent 4px
    );
    opacity: 0.6;
}

#view-session-messages-modal .modal-resize-handle:hover {
    opacity: 1;
    background-image: repeating-linear-gradient(
        -45deg,
        var(--bs-primary),
        var(--bs-primary) 1px,
        transparent 1px,
        transparent 4px
    );
}

/******************************************************************/
/* 문서관리 테이블 제목 컬럼 ellipsis 처리 */

.text-truncate-title {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/******************************************************************/
/* 타입 아이콘 테마별 색상 조정 */

/* 타입 아이콘에 클래스 추가하여 테마별 색상 적용 */
.type-icon-file {
    color: var(--bs-success) !important; /* 파일 업로드: 녹색 */
    font-size: 1rem !important; /* 16px */
}

.type-icon-file::before {
    font-weight: 600 !important;
}

.type-icon-conversation {
    color: var(--bs-warning) !important; /* 대화 지식 추가: 주황색 */
    font-size: 1rem !important; /* 16px */
}

.type-icon-conversation::before {
    font-weight: 600 !important;
}

.type-icon-rag {
    color: var(--bs-success) !important; /* 지식 질의: 녹색 */
    font-size: 1rem !important; /* 16px */
}

.type-icon-rag::before {
    font-weight: 600 !important;
}

.type-icon-chat {
    color: var(--bs-warning) !important; /* 일반 대화: 주황색 (문서의 대화와 동일) */
    font-size: 1rem !important; /* 16px */
}

.type-icon-chat::before {
    font-weight: 600 !important;
}

/* Dark 테마: 더 밝은 색상으로 조정하여 가독성 향상 */
[data-bs-theme="dark"] .type-icon-file {
    color: #75b798 !important; /* 다크 모드에서 더 밝은 녹색 */
}

[data-bs-theme="dark"] .type-icon-conversation {
    color: #ffc107 !important; /* 다크 모드에서 더 밝은 주황색 */
}

[data-bs-theme="dark"] .type-icon-rag {
    color: #75b798 !important; /* 다크 모드에서 더 밝은 녹색 */
}

[data-bs-theme="dark"] .type-icon-chat {
    color: #ffc107 !important; /* 다크 모드에서 더 밝은 주황색 (문서의 대화와 동일) */
}


/******************************************************************/
/* DataTables Responsive 자동 표시 및 클릭 비활성화 */

/* 행 클릭 영역 비활성화 (서브항목 토글 버튼 제거) */
table.dataTable tbody tr td.dtr-control {
    pointer-events: none !important;
    cursor: default !important;
}

/* 부모 행의 클릭 이벤트 비활성화 */
table.dataTable tbody tr.parent {
    cursor: default !important;
}

table.dataTable tbody tr.parent:hover {
    background-color: inherit !important;
}

/* 서브항목 행의 클릭 이벤트 비활성화 (ID 클릭은 허용) */
table.dataTable tbody tr.child {
    pointer-events: none !important;
}

/* 서브항목 내 ID 클릭은 허용 */
table.dataTable tbody tr.child .dtr-id-clickable {
    pointer-events: auto !important;
}

/******************************************************************/
/* 토스트 알림 (ID 복사 및 일반 알림) */

.copy-toast,
.alert-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateY(20px);
    background-color: var(--bs-dark);
    color: var(--bs-light);
    padding: 0.75rem 1.25rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    pointer-events: none;
    display: flex;
    align-items: center;
}

.copy-toast.show,
.alert-toast.show {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(0);
}

/* Dark 테마에서 토스트 스타일 조정 */
[data-bs-theme="dark"] .copy-toast,
[data-bs-theme="dark"] .alert-toast {
    background-color: var(--bs-light);
    color: var(--bs-dark);
}

/* 알림 타입별 색상 */
.alert-toast-success {
    background-color: var(--bs-success) !important;
    color: white !important;
}

.alert-toast-danger {
    background-color: var(--bs-danger) !important;
    color: white !important;
}

.alert-toast-warning {
    background-color: var(--bs-warning) !important;
    color: var(--bs-dark) !important;
}

.alert-toast-info {
    background-color: var(--bs-info) !important;
    color: white !important;
}

/* Dark 테마에서 알림 타입별 색상 조정 */
[data-bs-theme="dark"] .alert-toast-success {
    background-color: var(--bs-success) !important;
    color: white !important;
}

[data-bs-theme="dark"] .alert-toast-danger {
    background-color: var(--bs-danger) !important;
    color: white !important;
}

[data-bs-theme="dark"] .alert-toast-warning {
    background-color: var(--bs-warning) !important;
    color: var(--bs-dark) !important;
}

[data-bs-theme="dark"] .alert-toast-info {
    background-color: var(--bs-info) !important;
    color: white !important;
}

/* ID 컬럼 클릭 가능 스타일 */
table.dataTable tbody td.id-column {
    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease;
}

table.dataTable tbody td.id-column .id-clickable {
    transition: color 0.2s ease;
}

table.dataTable tbody td.id-column:hover .id-clickable {
    color: var(--bs-primary);
}

table.dataTable tbody td.id-column:active .id-clickable {
    color: var(--bs-primary);
    opacity: 0.8;
}

/* 일반 ID 클릭 가능 스타일 (테이블 외부) */
.id-clickable {
    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease;
}

.id-clickable:hover {
    color: var(--bs-primary);
}

.id-clickable:active {
    color: var(--bs-primary);
    opacity: 0.8;
}

/* 서브 항목의 ID 클릭 가능 스타일 */
.dtr-id-clickable {
    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease;
}

.dtr-id-clickable:hover {
    color: var(--bs-primary);
}

.dtr-id-clickable:active {
    color: var(--bs-primary);
    opacity: 0.8;
}

/******************************************************************/
/* 세션 메시지 스타일 */

/* 사용자 메시지 스타일 */
.message-user-bordered {
    border-left: 4px solid var(--bs-primary);
    padding-left: calc(0.5rem - 4px);
}

/* Assistant 메시지 스타일 */
.message-assistant-bordered {
    border-left: 4px solid var(--bs-warning);
    padding-left: calc(0.5rem - 4px);
}

/******************************************************************/
/* 모델 관리 페이지 스타일 */

/* 기본 모델 아이콘이 헤더 높이에 영향을 주지 않도록 설정 */
#section-model .card-header .model-default-icon {
    font-size: 0.9rem;
    vertical-align: baseline;
    margin-left: 0.5rem;
    display: inline-block;
    line-height: 1;
}

/* 아코디언 스타일 */
.cursor-pointer {
    cursor: pointer;
}

details summary {
    user-select: none;
}

details summary:hover {
    opacity: 0.8;
}

/******************************************************************/
/* 세션 드롭다운 스타일 (2depth 메뉴) - Bootstrap 기본 스타일과 일관성 유지 */

/* 드롭다운 메뉴 최소 너비 설정 (버튼 너비와 일치) - z-index: 메시지 입력(1000)보다 높게 하여 하단 영역이 가려지지 않도록 */
.chat-session-dropdown.dropdown-menu {
    min-width: 100%;
    white-space: nowrap;
    z-index: 1050;
}

/* 페이지 서브타이틀의 모델 드롭다운 메뉴 너비 설정 */
.page-subtitle-info .btn-group .dropdown-menu {
    min-width: 100%;
    white-space: nowrap;
}

/* 드롭다운 아이템 텍스트 오버플로우 처리 */
.chat-session-dropdown .dropdown-item,
.page-subtitle-info .dropdown-item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* 2depth 메뉴 스타일 */
.chat-session-dropdown .dropdown-submenu {
    position: relative;
}

.chat-session-dropdown .dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
    margin-left: 0.125rem;
    display: none;
    min-width: auto; /* 2depth 메뉴는 자동 너비 */
}

.chat-session-dropdown .dropdown-submenu:hover > .dropdown-menu {
    display: block;
}

.chat-session-dropdown .dropdown-submenu > .dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chat-session-dropdown .dropdown-submenu .dropdown-menu .dropdown-item {
    padding-left: 1.5rem;
    white-space: nowrap; /* 2depth 메뉴 아이템은 줄바꿈 없음 */
}

/* 세션 드롭다운 페이지네이션 영역 고정 너비 및 왼쪽 정렬 */
.chat-session-dropdown .chat-session-pagination {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    padding: 0 !important;
}

.chat-session-dropdown .chat-session-pagination-inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    width: 200px;
    padding: 0.25rem 0.5rem;
}

.chat-session-dropdown .chat-session-pagination .dropdown-item {
    width: auto !important;
    flex: 0 0 auto !important;
    padding: 0.25rem 0.5rem !important;
    text-align: center;
    min-width: auto;
}

.chat-session-dropdown .chat-session-pagination .dropdown-item-text {
    flex: 0 0 auto;
    padding: 0.25rem 0.5rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--bs-secondary);
    white-space: nowrap;
}

/******************************************************************/
/* RAG 세션 드롭다운 스타일 (일반대화와 동일한 스타일 적용) */

/* 드롭다운 메뉴 최소 너비 설정 (버튼 너비와 일치) - z-index: 메시지 입력(1000)보다 높게 하여 하단 영역이 가려지지 않도록 */
.rag-session-dropdown.dropdown-menu {
    min-width: 100%;
    white-space: nowrap;
    z-index: 1050;
}

/* 드롭다운 아이템 텍스트 오버플로우 처리 */
.rag-session-dropdown .dropdown-item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* 2depth 메뉴 스타일 */
.rag-session-dropdown .dropdown-submenu {
    position: relative;
}

.rag-session-dropdown .dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
    margin-left: 0.125rem;
    display: none;
    min-width: auto; /* 2depth 메뉴는 자동 너비 */
}

.rag-session-dropdown .dropdown-submenu:hover > .dropdown-menu {
    display: block;
}

.rag-session-dropdown .dropdown-submenu > .dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rag-session-dropdown .dropdown-submenu .dropdown-menu .dropdown-item {
    padding-left: 1.5rem;
    white-space: nowrap; /* 2depth 메뉴 아이템은 줄바꿈 없음 */
}

/* RAG 세션 드롭다운 페이지네이션 영역 고정 너비 및 왼쪽 정렬 */
.rag-session-dropdown .rag-session-pagination {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    padding: 0 !important;
}

.rag-session-dropdown .rag-session-pagination-inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    width: 200px;
    padding: 0.25rem 0.5rem;
}

.rag-session-dropdown .rag-session-pagination .dropdown-item {
    width: auto !important;
    flex: 0 0 auto !important;
    padding: 0.25rem 0.5rem !important;
    text-align: center;
    min-width: auto;
}

.rag-session-dropdown .rag-session-pagination .dropdown-item-text {
    flex: 0 0 auto;
    padding: 0.25rem 0.5rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--bs-secondary);
    white-space: nowrap;
}