/*********************************************************************************/
/* Wrapper                                                                       */
/*********************************************************************************/

    #wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    }

/*********************************************************************************/
/* Logo                                                                          */
/*********************************************************************************/

    #logo {
    background: #ffe9f5;
    height: 6vh;
    display: flex;
    flex-shrink: 0;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 1em;
    width: 100%;
    box-sizing: border-box;
    }

    #logo .pic img {
    height: 100%;
    object-fit: contain;
    max-width: 100%;
    }

    #logo .icon:hover {
    transform: scale(1.2); /* 확대 */
    color: #ff4444; /* 선택: 색상 강조 */
    }

    .icon-group-view {
    display: flex;
    align-items: flex-end;
    padding-right: 9em;
    }

    #logo .icon-group-view a {
    margin: 0em 0.3em 0.1em 0.2em;
    display: flex;;
    justify-content: center;
    }

    #logo .icon-group-view .icon {
    font-size: 2em;
    position: relative;
    text-decoration: none;
    justify-content: center;
    }

    .icon-view {
    color: #FF746C;
    }

    #logo .icon-view:hover {
    transform: scale(1.2); /* 확대 */
    color: #ff4444;
    }

    .icon-view.selected {
    color: #ff4444;
    font-weight: bold;
    transform: scale(1.2);
    transition: all 0.2s ease;
    }

    .icon-group {
    display: flex;
    align-items: flex-end;
    }

    #logo .icon-group a {
    color: #FF746C;
    margin: 0em 0.1em 0 0.2em;
    display: flex;
    justify-content: center;
    }

    #logo .icon-group .icon {
    font-size: 2em;
    position: relative;
    text-decoration: none;
    justify-content: center;
    }

    @keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(15deg); }
    75% { transform: rotate(-15deg); }
    }

    /* .icon-wiggling {
    animation: wiggle 6s ease-in-out infinite;
    } */
    .icon-wiggling {
    animation: none;
    } /* 앵커 자체는 흔들지 않음 */

    .icon-wiggling::before {
    display: inline-block;           /* transform이 먹도록 인라인블록 */
    animation: wiggle 6s ease-in-out infinite; /* 아이콘만 흔들기 */
    transform-origin: 50% 60%;       /* (선택) 회전 중심 미세 조정 */
    }

    .icon-view.selected {
    transform: none;
    }                /* 앵커 확대 해제 */

    .icon-view.selected::before {
    transform: scale(1.2);
    }  /* 아이콘만 확대 */

    /* viewNow: 아이콘 위 / 라벨 아래 세로 정렬 */
    #logo #viewNow {
    display: none; /* flex !important; */
    flex-direction: column !important;
    align-items: center;
    line-height: 1;
    }

    /* 활성화될 때만 보임 */
    #logo #viewNow.is-active {
    display: flex;                /* ← 응답 시작 시 보이도록 */
    }

    /* Font Awesome 아이콘(::before)을 '한 줄'로 취급해 위에 놓이도록 */
    #logo #viewNow::before {
    display: block;
    }

    /* 라벨을 아이콘 '아래'에 붙이기 */
    #logo #viewNow .icon-label {
    display: block;
    font-size: 0.5em;
    white-space: nowrap;
    pointer-events: none;
    }

    /* 아이콘 + 텍스트 수직 정렬 */
    .icon-group-view a,
    .icon-group a {
    display: flex;
    flex-direction: column;
    align-items: center;
    }

    /* 아이콘 아래 라벨 */
    .icon-label {
    font-size: 0.5em;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
    }


/*********************************************************************************/
/* Nav                                                                           */
/*********************************************************************************/

    #nav {
    background: #252522;
    display: flex;
    flex-shrink: 0;
    height: 40px;
    align-items: center;
    justify-content: flex-end;
    }

    #nav a {
    color: #ffffff;
    margin: 0 0.1em 0 0.2em;
    }

    #nav .icon {
    font-size: 2em;
    position: relative;
    text-decoration: none;
    }

    #nav .user-id {
	font-size: 1.1rem;
	font-weight: bold;
	color: #ffffff;
	margin: 0.5rem;
    }

/*********************************************************************************/
/* Main                                                                          */
/*********************************************************************************/

    #main {
    background: #ffe9f5;
    display: flex;
    position: relative;
    flex-grow: 1;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    }

/*********************************************************************************/
/* Fold: Info, History Area                                                      */
/*********************************************************************************/
    #main .history,
    #main .info {
    flex: 0 0 30px;               /* 접힌 폭 */
    width: 8px;
    min-width: 0;
    overflow: hidden;
    transition: flex-basis 180ms ease, box-shadow 180ms ease, width 180ms ease;
    position: relative;
    z-index: 1;
    pointer-events: auto;
    border-radius: 12px;
    }

    /* 내부 콘텐츠는 접힌 동안 보이지 않게 */
    #main .history:not(:hover) > *,
    #main .info:not(:hover) > * {
    opacity: 0;
    pointer-events: none;
    }

    /* Hover 시 본래 폭으로 확장 (기존 레이아웃과 동일) */
    #main .history:hover { flex-basis: 15vw; box-shadow: 2px 0 8px rgba(0,0,0,0.08); }
    #main .info:hover    { flex-basis: 11vw; box-shadow: -2px 0 8px rgba(0,0,0,0.08); }

    /* 확장되면 내부 콘텐츠 활성화 */
    #main .history:hover > *,
    #main .info:hover > * {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 120ms ease;
    }

    /* 오른쪽 info 확장 토글 */
    #main.origin-expanded .info:hover { flex-basis: 26vw; }

    /* 시각 힌트(핫존 그라데이션) */
    #main .history::after,
    #main .info::before {
    content: "";
    position: absolute;
    top: 0; height: 100%; width: 8px;
    opacity: 0.4; pointer-events: none;
    }

    #main .history::after { right: 0; background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(40,40,38,0.35) 100%); }
    #main .info::before   { left: 0;  background: linear-gradient(to left,  rgba(0,0,0,0) 0%, rgba(40,40,38,0.35) 100%); }

    /* 접근성: 모션 줄이기 설정이면 전환 제거 */
    @media (prefers-reduced-motion: reduce) {
    #main .history, #main .info, #main .llm { transition: none !important; }
    }

/*********************************************************************************/
/* Pin info panel when a quote is active                                         */
/*********************************************************************************/

    /* 인용 활성화 시(info-pinned) 오른쪽 패널은 항상 펼침 */
    #main.info-pinned .info {
    flex-basis: 11vw !important;   /* 기본 펼침폭 */
    width: auto !important;
    box-shadow: -2px 0 8px rgba(0,0,0,0.08);
    }

    /* 인용 활성화 + 너가 쓰던 확장 토글(origin-expanded)도 함께 존중 */
    #main.info-pinned.origin-expanded .info {
    flex-basis: 26vw !important;
    }

    /* 접혔을 때 숨기는 규칙 무력화: 핀 고정 상태에서는 항상 보이게 */
    #main.info-pinned .info > * {
    opacity: 1 !important;
    pointer-events: auto !important;
    }

    /* 핀 고정 상태에선 “핫존 그라데이션”도 굳이 필요없으니 흐리게(선택) */
    #main.info-pinned .info::before { opacity: 0.05; }

/*********************************************************************************/
/* Main - Info                                                                   */
/*********************************************************************************/

    #main .info {
    background: #ffe9f5;
    width: 11vw;
    display: flex;
    flex-direction: column;
    padding-left: 0.5em;
    }

    .origin-quote {
    background: #ffe9f5;
    flex: 1 1 auto;
    overflow: auto;
    }

    /* 패널 상단 버튼 바 */
    .origin-quote .oq-topbar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    margin: 4px 6px 0 6px; /* noteTop 위쪽에 살짝 여백 */
    }

    /* 패널 확대/축소 버튼 */
    .origin-quote .oq-toggle-btn {
    background-color: #fdaca8;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.7em;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    }

    .origin-quote .oq-toggle-btn:hover {
    background-color: #FF746C;
    transform: translateY(-1px);
    }

    .origin-quote .oq-toggle-btn.active {
    background-color: #fdaca8;
    font-weight: 600;
    }

    .origin-quote .oq-toggle-btn.active:hover {
    background-color: #FF746C;
    transform: translateY(-1px);
    }

    /* ✅ origin-quote 확장 상태 */
    #main.origin-expanded .info {
    width: 26vw;   /* 기본 11vw → 26vw 로 키움 */
    }

    /* ✅ 확장 시 LLM 영역 축소 */
    #main.origin-expanded .llm {
    width: 64vw;   /* 기본 79vw → 64vw 로 줄임 */
    }

    /* 확장 상태: info가 11vw → 26vw 이므로 15vw 만큼 오른쪽으로 이동 */
    #main.origin-expanded #citation-bar {
    margin-left: 15vw;
    }

    /* Origin preview card (right panel) */
    .oq-card {
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    padding: 10px 12px;
    margin: 6px 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,.04);
    font-size: 0.92em;
    }

    .oq-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    }

    .oq-title {
    font-weight: 600;
    color: #333;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    .oq-link {
    font-size: .88em;
    color: #2ba0ff; text-decoration: none;
    }

    .oq-link:hover { text-decoration: underline; }

    .oq-snippet {
    line-height: 1.5;
    color: #2a2a2a;
    }

    .oq-score-badge {
    display: inline-block;
    font-size: 12px;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 6px;
    background: #eef6ff;
    color: #2573d6;
    margin-bottom: 6px;
    font-weight: 600;
    }

    .oq-warn {
    margin:6px 0 0 6px;
    display:inline-block;
    padding:4px 8px;
    border-radius:10px;
    background:#de77fb;
    color:#ffffff;
    font-size:12px;
    font-weight:600;
    }

    .oq-snippet-body {
    margin-top: 4px;
    }

    .oq-snippet-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    }

    .oq-snippet-sep {
    border-top: 1px dashed #e6e6e6;
    margin: 2px 0;
    }

    .oq-snippet + .oq-snippet { /* 구형 브라우저 대비용 보강 */
    margin-top: 6px;
    }

    .oq-snippet sup,
    .oq-snippet sub {
    line-height: 0;
    }

    .oq-muted {
    color: #969696;
    font-size: .75em;
    margin: 15px 0 10px 6px;
    font-weight: bold;
    }

    .oq-muted .oq-sep {
    opacity: .6;
    }

    .oq-go {
    font-weight: 600;
    text-decoration: none;
    margin-left: 5px;
    color: #007bff;
    }

    .oq-go:hover {
    text-decoration: underline;
    color: #69b1fe;
    }

    .oq-hl {
    background: #fff3a3;
    padding: 0 .15em;
    border-radius: 3px;
    }

/*********************************************************************************/
/* Main - History                                                                */
/*********************************************************************************/

    #main .history {
    background: #ffe9f5;
    width: 11vw;
    color: white;
    justify-content: flex-start;
    padding-left: 0.5em;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-radius: 20px 20px 0 0;
    background-clip: padding-box;
    }

    #history-panel {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    }

    /* Chrome, Edge, Safari */
    #history-panel::-webkit-scrollbar {
    width: 10px;               /* 스크롤바 너비 */
    }

    #history-panel::-webkit-scrollbar-track {
    background: #ffe9f5;
    border-radius: 12px;
    }

    #history-panel::-webkit-scrollbar-thumb {
    background-color: rgb(183, 183, 183);
    border-radius: 12px;
    border: 2px solid #ffe9f5;
    }

    #main .history-user {
    background: #F9F9F9;
    width: 10.5vw;
    color: #282826;
    justify-content: flex-start;
    padding-left: 0.5em;
    font-size: 1em;
    font-weight: bold;
    }

    #main .history .title {
    color: #282826;
    font-size: 1.1em;
    font-weight: bold;
    border-radius: 12px;
    }

    #main .history a {
    color: #2ba0ff;
    margin: 0 0.1em;
    }

    #main .history p {
    margin-top: 1em;
    margin-bottom: 0em;
    }

    #main .history .icon {
    font-size: 1.2em;
    position: relative;
    text-decoration: none;
    }

    .history-entry {
    font-size: 0.9em;
    color: #282826;
    cursor: pointer;
    }

    .history-entry.selected {
    background-color: #ffcfcd;
    margin-right: 0.2em;
    color: black;
    transition: all 0.2s ease;
    }

    .history-entry.auto-selected {
    background-color: #ffcfcd;
    background-image: url('/static/css/images/ecailles.png');
    margin-right: 0.2em;
    color: black;
    transition: all 0.2s ease;
    }

    .history-entry:hover {
    color: #262626;
    }

    /* 토큰 사용 */
    #token-usage-bar {
    width: 100%;
    text-align: left;
    font-size: 0.9em;
    font-weight: bold;
    color: #282826;
    box-sizing: border-box;
    padding: 10px;
    padding-left: 0em;
    }

    /* 날짜 제목 */
    .history-date {
    font-weight: bold;
    margin-top: 1em;
    color: #282826;
    font-size: 1.1em;
    }

    /* 히스토리 말풍선 전용 스타일 */
    .history-bubble-main {
    background-color: #FFF4FA;
    color: #161616;
    border-radius: 12px;
    padding: 0.6em 1em;
    margin: 0.25em 0em;
    font-size: 0.9em;
    font-weight: normal;
    max-width: 85%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: background-color 0.2s ease;
    }

    .history-bubble-main:hover {
    background-color: #ffcfcd;
    }
    .source-answers {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: #444;
    }

    .file-answer, .web-answer {
    border-top: 1px dashed #aaa;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    }

    .toggle-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    }

    .toggle-btn {
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 14px;
    }

    .toggle-btn.active {
    background-color: #007bff;
    color: white;
    }

    .reply-text, .file-answer, .web-answer {
    margin-top: 10px;
    }

    .hidden {
    display: none;
    }

/*********************************************************************************/
/* Citation                                                                      */
/*********************************************************************************/
    #main .info {
    --citation-h: 170px;
    }

    #citation-bar {
    border-radius: 6px;
    font-weight: normal;
    margin-top: 3px;
    flex: 0 0 var(--citation-h);
    }

    #citation-bar a {
    text-decoration: none;
    }

    #citation-input {
    text-align: left;
    }

    #citation-input::placeholder {
    text-align: center;
    }

    #citation-submit {
    padding: 4px 12px;
    font-size: 0.7em;
    background-color: #8fc5ff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    }

    #citation-submit:hover {
    background-color: #007bff; /* 더 진한 파랑 */
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
    }

    #citation-submit.waiting {
    pointer-events: none;
    opacity: 0.5;
    }

    #citation-submit.waiting:hover {
    background-color: #8fc5ff;; /* hover 효과 제거용: 원래 색상 고정 */
    }

    .citation-row {
    display: flex;
    justify-content: left;
    gap: 8px;
    margin-top: 4px;
    margin-left: 0.3em;
    }

    #citation-title {
    color:  #8c8c89;
    font-size: 0.9em;
    font-weight: bold;
    transition: color 0.3s ease;
    display: inline-block;
    margin-top: 6px;
    max-width: 85%;              /* ✅ 최대 10자 크기로 제한 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    }

    #citation-title.waiting {
    color: #2f2f2e;
    font-weight: bold;
    font-size: 0.9em
    }

    #citation-title.error {
    color: #8c8c89;
    font-size: 0.9em;
    font-weight: bold;
    transition: color 0.3s ease;
    }

    #citation-title.ready {
    color: #2f2f2e;
    font-weight: bold;
    font-size: 0.9em;
    }

    #main .info .cite-btn {
    font-size: 0.8em;
    color: #8c8c89;
    font-weight: normal;
    }

    #main .info .cite-btn.waiting {
    font-size: 0.8em;
    color: #8c8c89;
    font-weight: bold;
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed
    }

    #main .info .cite-btn.error {
    font-size: 0.8em;
    color: #8c8c89;
    font-weight: normal;
    }

    #main .info .cite-btn.ready {
    font-size: 0.8em;
    color: #2ba0ff;
    font-weight: bold;
    }

    #main .info .cite-btn.ready:hover {
    transform: scale(1.2);
    font-weight: bold;
    }

    #main .info .cite-btn.copied {
    color: #FF746C !important;
    text-decoration: underline;
    font-weight: bold;
    }

    /* ❌ 오류 상태 */
    #main .info .cite-btn.error {
    color: #ff4d4d !important;
    text-decoration: line-through;
    }

    #main .info .cite-btn.disabled {
    color: gray !important;
    opacity: 0.2;
    pointer-events: none;
    }

    .citation-guide {
    margin-top: 4px;
    font-size: 0.75em;
    }

    .citation-license {
    margin-top: 6px;
    font-size: 0.75em;
    color: #888;
    text-align: left;
    padding-left: 6px;
    }

/*********************************************************************************/
/* ID / Password                                                                 */
/*********************************************************************************/
    /* 로그인/회원가입 입력 필드 및 버튼 공통 스타일 */
    #userIdInput,
    #passwordInput,
    #submitBtn,
    #modeToggleBtn {
    width: 100%;
    height: 17.5%;
    font-size: 1.1em;
    border-radius: 8px;
    border: 1px solid #ccc;
    margin: 0.5em 0;
    padding: 0.5em 1em;
    box-sizing: border-box;
    font-family: inherit;
    transition: all 0.2s ease-in-out;
    }

    /* 입력창 배경 및 포커스 스타일 */
    #userIdInput,
    #passwordInput {
    background-color: #ffffff;
    }

    #userIdInput:focus,
    #passwordInput:focus {
    outline: none;
    border-color: #FF746C;
    box-shadow: 0 0 0 3px rgba(255, 116, 108, 0.2);
    }

    /* 버튼 색상 및 hover 효과 */
    #submitBtn,
    #modeToggleBtn {
    background-color: #FF746C;
    color: white;
    cursor: pointer;
    font-weight: bold;
    border: none;
    }

    #submitBtn:hover,
    #modeToggleBtn:hover {
    background-color: #e8635b;
    box-shadow: 0 4px 10px rgba(255, 116, 108, 0.3);
    }

    /* user.html -> index.html 전환 */
    .page-transition {
    opacity: 1;
    transition: opacity 0.5s ease;
    }

    .page-transition.fade-out {
    opacity: 0;
    }
/*********************************************************************************/
/* Main - LLM                                                                    */
/*********************************************************************************/
    #main .llm {
    background: #ffe9f5;
    width: auto !important;
    flex: 1 1 auto !important;
    min-width: 0;
    transition: padding 180ms ease, width 180ms ease, flex-basis 180ms ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    row-gap: 0.5em;
    }

    #main .llm-system
    {
    color: #fc564e;
    font-weight: bold;
    font-size: 3em;
    }

    .llm-system.hidden {
    display: none;
    }

    #main .llm-prompt {
    width: 100%;
    text-align: center;
    color: #282826;
    font-size: 1.4em;
    }

    #main .text-area textarea {
    width: 60vw;
    background: #FFF4FA;
    white-space: normal;
    color: #282826;
    font-size: 1.3em;
    border-radius: 1em; /* 둥근 모서리 */
    padding: 1em;
    border: none;
    }
    /*********************************************************************************/

/* LLM UI                                                                       */
/*********************************************************************************/
    /* 기본 레이아웃 */
    #main .chat-box {
    max-height: 81vh;
    width: 100%;
    overflow-y: auto;
    line-height: 2;
    }

    /* Chrome, Edge, Safari */
    #main .chat-box::-webkit-scrollbar {
    width: 10px;               /* 스크롤바 너비 */
    }

    #main .chat-box::-webkit-scrollbar-track {
    background: #ffe9f5;
    border-radius: 12px;
    }

    #main .chat-box::-webkit-scrollbar-thumb {
    background-color: rgb(183, 183, 183);
    border-radius: 12px;
    border: 1px solid #ffe9f5;
    }

    /* 말풍선 공통 */
    #main .bubble {
    max-width: 90%;
    padding: 10px 15px;
    margin: 10px;
    border-radius: 15px;
    line-height: 1.4;
    white-space: pre-wrap;
    }

    /* 사용자 메시지 (오른쪽) */
    #main .user-bubble {
    background-color: #4b4b47;
    color: white;
    align-self: flex-end;
    margin-left: auto;
    margin-right: 5%;
    text-align: left;
    font-weight: normal;
    max-width: 38vw;
    word-wrap: break-word;        /* ✅ 줄바꿈 처리 */
    word-break: break-word;
    white-space: pre-wrap;
    }

    /* 서버 메시지 (왼쪽) */
    #main .bot-bubble {
    width: 100%;
    line-height: 2;
    background-color: #ffe9f5;
    color: #1d1d1c;
    align-self: center;
    text-align: left;
    text-indent: 0.5em;
    font-weight: normal;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    }

    /* Markdown */
    .bot-bubble h1, .bot-bubble h2 {
    font-size: 1.7em;
    margin: 0.5em 0;
    }

    .bot-bubble h3 {
    font-size: 1.5em;
    }

    .bot-bubble ul {
    margin: 0.5em 0;
    padding-left: 1.2em;
    }

    .bot-bubble code {
    background: #eee;
    padding: 2px 4px;
    border-radius: 4px;
    }

    .bot-bubble p {
    margin-top: 0.3em;
    margin-bottom: 0.3em;
    }

    /* 마크다운 표 스타일 */
    .bot-bubble table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5em 0;
    font-size: 0.95em;
    }

    .bot-bubble th,
    .bot-bubble td {
    border: 2px solid #ffffff;
    padding: 0.5em 0.8em;
    text-align: left;
    vertical-align: middle;
    }

    .bot-bubble th {
    background-color: #ffffff;
    font-weight: bold;
    }

    /* 인용 마크다운 */
    .bot-bubble blockquote {
    border-left: 4px solid #50bf88;
    padding: 0.5em 1em;
    margin: 0.8em 0;
    font-size: 0.9em;
    background-color: #ffffff;
    font-style: italic;
    color: #333;
    }

    /* 마우스 호버: 노란 음영 */
    .bot-bubble blockquote.quote-clickable {
    cursor: pointer;
    }

    /* 부드럽게 색 바뀌도록 */
    .bot-bubble blockquote {
    transition: background-color .15s ease, box-shadow .15s ease, border-left-color .15s ease;
    }

    .bot-bubble blockquote.quote-clickable:hover {
    background: #fff8b3;              /* 연노랑 */
    box-shadow: 0 0 0 2px rgba(255,221,87,.55) inset;
    }

    /* 활성화(선택) 상태 */
    .bot-bubble blockquote.quote-active {
    background: #fff3a3;                           /* 더 진한 노랑 */
    box-shadow: 0 0 0 2px rgba(255,221,87,.55) inset;
    border-left-color: #e0b200;                    /* 살짝 강조(선택) */
    }

    #main .bot-bubble-think {
    width: 100%;
    background-color: #ffffff;
    color: #1d1d1c;
    align-self: center;
    text-align: left;
    text-indent: 0.25em;
    font-size: 1.5em;
    }

    .bubble-separator {
    border: none;
    border-top: 1px solid #ccc;
    margin: 12px 0;
    width: 60vw;
    align-self: center;
    }

    /* 대화 정렬을 위한 flex 컨테이너 */
    #main .chat-line {
    display: flex;
    flex-direction: column;
    }


/*********************************************************************************/
/* Setting - Directory View UI                                                   */
/*********************************************************************************/
    .setting-view {
    display: flex;
    flex-direction: column;
    width: 90%;
    }

    .setting-user {
    background-color: #F0F0F0;
    padding: 1em;
    border-radius: 8px;
    margin-bottom: 1rem;
    color: #333;
    font-weight: normal;
    font-size: 0.95em;
    }

    .setting-user h3 {
    font-size: 1.1em;
    color: #333;
    }

    .setting-user ul {
    color: #333;
    font-size: 0.95em;
    font-weight: normal;
    padding-left: 0;
    }

    .directory-view {
    display: flex;
    gap: 2rem;
    position: relative;
    }

    .directory-section {
    flex: 1;
    padding: 1em;
    border-radius: 8px;
    background-color: #F0F0F0;
    }

    .directory-section h3 {
    font-size: 1.1em;
    margin-bottom: 0.5em;
    color: #333;
    }

    .directory-section ul {
    list-style: none;
    padding-left: 0;
    }

    /* 파일 목록 항목을 좌우 정렬 */
    .directory-section li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0.3em 0;
    font-size: 0.95em;
    }

    .directory-section a {
    color:  #4e4e4b;
    text-decoration: none;
    }

    .directory-section a:hover {
    text-decoration: underline;
    }

    .file-name {
    font-weight: normal;
    }

    #close-directory-view {
    position: absolute;
    top: 5px;
    right: 5px;
    background: none;
    border: none;
    font-size: 1.2em;
    cursor: pointer;
    color: #888;
    }

    #close-directory-view:hover {
    color: #333;
    }

    .remove-file-btn {
    background: none;         /* 배경 제거 */
    border: none;             /* 테두리 제거 */
    padding: 0;               /* 여백 제거 */
    cursor: pointer;
    font-size: 1em;
    color: #888;
    }

    .remove-file-btn:hover {
    color: #FF746C;           /* hover 시 색상 강조 */
    }

    .trash-icon {
    color: #ffb5b5;
    transition: transform 0.2s ease-in-out;
    cursor: pointer;
    }

    .trash-icon:hover {
    transform: scale(1.2); /* 확대 */
    color: #ff4444; /* 선택: 색상 강조 */
    }

    /* Spinner */
    #overlay-spinner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7); /* 반투명 흰색 */
    z-index: 9999; /* 최상위 표시 */
    display: flex;
    align-items: center;
    justify-content: center;
    }

    .spinner-box {
    text-align: center;
    color: #2ba0ff;
    font-size: 20px;
    }

    .spinner-box i {
    font-size: 36px;
    margin-bottom: 10px;
    }

    /* Upload button */
    .upload-btn {
    display: inline-block;
    padding: 4px;
    border-radius: 50%;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    }

    .upload-btn:hover {
    transform: scale(1.4);  /* 확대만 적용 */
    }

/*********************************************************************************/
/* Print (PDF 출력용 레이아웃)                                                   */
/*********************************************************************************/
    @media print {
        /* A4 + 여백 설정 */
        @page {
            size: A4;
            margin: 8mm;
        }

        * {
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }

        html, body {
            background: #ffffff !important;
            height: auto !important; /* 💡 페이지 높이 풀기 */
            font-size: 8px !important;
        }

        /* 전체 래퍼도 고정 높이 제거 */
        #wrapper {
            height: auto !important; /* 💡 100vh 무력화 */
        }

        /* 상단 로고, 아이콘, 히스토리, 오른쪽 info, 입력창, 푸터는 숨김 */
        /* #logo, */
        .icon-group,
        .icon-group-view,
        .footer,
        #main .history,
        #main .info,
        .text-area {
            display: none !important;
        }

        #logo {
        background: #ffffff !important;
        height: 3vh;
        }

        /* 메인은 LLM 영역만 전체 사용 */
        /* 메인은 LLM 영역만 전체 사용 + 스크롤 제거 */
        #main {
            background: #ffffff !important;
            display: block !important;
            height: auto !important;
            min-height: 0 !important;
            overflow: visible !important;     /* 💡 hidden → visible */
        }

        #main .llm {
            background: #ffffff !important;
            width: 100% !important;
            max-width: 100% !important;
            height: auto !important;
            align-items: stretch;
            justify-content: center; /*flex-start;*/      /* 가운데 정렬도 해제 */
        }

        #main .chat-box,
        #stream-box,
        #chat-box {
            display: block !important;
            max-height: none !important;
            overflow: visible !important;
            padding: 0;
        }

        /* 말풍선/텍스트는 종이에 더 잘 어울리게 살짝 정리 */
        #stream-box .chat-line,
        #chat-box .chat-line {
            display: block;
        }

        #stream-box .bubble,
        #chat-box .bubble {
            box-shadow: none !important;
            border-radius: 8px;
            margin: 6px 0;
        }

        #main .user-bubble {
        background-color: #ffe9f5 !important;
        color: #000000 !important;
        border: 1px solid #dcdcdc;   /* 종이 느낌 위해 아주 약한 테두리 추천 */
        text-align: right;
        font-size: 1.3em;
        font-weight: bold;
        float: right !important;
        }

        #main .bot-bubble {
        padding-top: 70px;
        }

        #stream-box .user-bubble,
        #chat-box .user-bubble {
            color: #000000 !important;
            border: 1px solid #e0e0e0 !important;
            max-width: 100%;
            margin-right: 0;
            page-break-inside: auto !important;
        }

        #stream-box .bot-bubble,
        #chat-box .bot-bubble {
            max-width: 96%;
            background: #ffffff !important;
            text-indent: 0.5em;
            page-break-inside: auto !important;
        }

        /* 제목은 절대 중간에서 끊기면 안 됨 */
        .bot-bubble h1,
        .bot-bubble h2,
        .bot-bubble h3 {
            page-break-inside: avoid !important;
            page-break-before: auto !important;
        }

        /* 표도 끊김 방지 */
        .bot-bubble table {
            page-break-inside: avoid !important;
        }

        /* blockquote도 보존 */
        .bot-bubble blockquote {
            page-break-inside: avoid !important;
        }

        .chat-line,
        .bubble,
        h1, h2, h3 {
            page-break-inside: auto !important;
        }
    }

/*********************************************************************************/
/* Footer                                                                        */
/*********************************************************************************/

    .footer {
    background-color: #FF746C;
    background-image: url('/static/css/images/ecailles.png');
    height: 2.25vh;
    font-weight: bold;
    flex-shrink: 0;
    text-align: center;
    align-content: center;
    color: white;
    }