@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700;900&display=swap');

body {
    font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* 모바일 뷰포트 높이 문제 해결 */
:root {
    --vh: 1vh;
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-top: env(safe-area-inset-top, 0px);
}

/* 동적 뷰포트 높이 적용 */
.h-screen-dynamic {
    height: 100vh;
    height: 100dvh;
    height: calc(var(--vh, 1vh) * 100);
}

/* iOS safe area 지원 */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .pb-safe {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .pt-safe {
        padding-top: env(safe-area-inset-top);
    }
}

.scrollbar-thin::-webkit-scrollbar {
    width: 6px;
}

.scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* 설정 모달 탭 스크롤바 숨김 */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.typing-dot {
    animation: typing 1.4s infinite ease-in-out both;
}

.typing-dot:nth-child(1) {
    animation-delay: -0.32s;
}

.typing-dot:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes typing {

    0%,
    80%,
    100% {
        transform: scale(0.6);
        opacity: 0.5;
    }

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

/* 20턴 초과 경고 배너 */
.turn-warning-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 16px 8px 8px;
    padding: 14px 18px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.6;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    animation: warningFadeIn 0.4s ease;
}

.turn-warning-banner > i {
    color: #9ca3af;
    font-size: 15px;
    margin-top: 2px;
    flex-shrink: 0;
}

.turn-warning-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

@media (min-width: 640px) {
    .turn-warning-content {
        flex-direction: row;
        align-items: center;
        gap: 16px;
    }
    .turn-warning-content span {
        flex: 1;
    }
    .turn-warning-btn {
        white-space: nowrap;
        flex-shrink: 0;
    }
}

.turn-warning-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-end;
    padding: 8px 16px;
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.turn-warning-btn:hover {
    background: #e5e7eb;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.turn-warning-btn:active {
    transform: translateY(0);
}

@keyframes warningFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 대화 기록 항목 */
.history-item {
    transition: all 0.15s ease;
}

.history-item:hover {
    background: rgba(255, 255, 255, 0.5);
}

.history-item.active {
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* 터치 환경에서는 더보기 버튼을 항상 노출해 유령 클릭 영역을 제거 */
@media (hover: none), (pointer: coarse) {
    .history-item .history-more-btn {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .history-item .pin-icon {
        display: none !important;
    }
}

/* 검색 결과 매칭 하이라이트 */
.search-highlight {
    background: rgba(20, 184, 166, 0.2);
    color: #0d9488;
    border-radius: 2px;
    padding: 0 1px;
}

.search-snippet {
    font-size: 11px;
    color: #9ca3af;
    line-height: 1.4;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 메시지 내 검색 키워드 하이라이트 */
.search-match-highlight {
    background: rgba(250, 204, 21, 0.4);
    color: inherit;
    border-radius: 2px;
    padding: 1px 2px;
}

/* 매칭 메시지 깜빡임 효과 */
.search-flash {
    animation: searchFlash 2s ease-out;
}

@keyframes searchFlash {

    0%,
    30% {
        background-color: rgba(20, 184, 166, 0.1);
    }

    100% {
        background-color: transparent;
    }
}

/* 토스트 알림 */
.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: #1f2937;
    color: white;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 14px;
    z-index: 9999;
    opacity: 0;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.toast.error {
    background: #dc2626;
}

/* 커스텀 체크박스 */
.custom-checkbox {
    position: relative;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.custom-checkbox input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 1;
}

.custom-checkbox .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    background: white;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.custom-checkbox input:checked+.checkmark {
    background: #4a3f6b;
    border-color: #4a3f6b;
}

.custom-checkbox .checkmark:after {
    content: '';
    position: absolute;
    display: none;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.custom-checkbox input:checked+.checkmark:after {
    display: block;
}

/* 라디오 버튼 스타일 */
.custom-checkbox .checkmark.radio {
    border-radius: 50%;
}

.custom-checkbox .checkmark.radio:after {
    left: 4px;
    top: 4px;
    width: 6px;
    height: 6px;
    border: none;
    background: white;
    border-radius: 50%;
    transform: none;
}

/* 마크다운 스타일 */
.markdown-content {
    line-height: 1.7;
    overflow: visible;
}

.markdown-content p {
    margin-bottom: 1em;
}

.markdown-content p:last-child {
    margin-bottom: 0;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3 {
    font-weight: 600;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

.markdown-content h1 {
    font-size: 1.5em;
}

.markdown-content h2 {
    font-size: 1.25em;
}

.markdown-content h3 {
    font-size: 1.1em;
}

.markdown-content ul,
.markdown-content ol {
    margin: 1em 0;
    padding-left: 1.5em;
}

.markdown-content li {
    margin: 0.5em 0;
}

.markdown-content ul li {
    list-style-type: disc;
}

.markdown-content ol li {
    list-style-type: decimal;
}

.markdown-content code {
    background: #f3f4f6;
    padding: 0.2em 0.4em;
    border-radius: 4px;
    font-size: 0.9em;
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
}

.markdown-content pre {
    background: #1f2937;
    color: #e5e7eb;
    padding: 1em;
    border-radius: 8px;
    overflow-x: auto;
    margin: 1em 0;
}

.markdown-content pre code {
    background: transparent;
    padding: 0;
    color: inherit;
}

.markdown-content blockquote {
    border-left: 4px solid #4a3f6b;
    padding-left: 1em;
    margin: 1em 0;
    color: #6b7280;
    font-style: italic;
}

.markdown-content strong {
    font-weight: 600;
}

.markdown-content a {
    color: #4a3f6b;
    text-decoration: underline;
}

.markdown-content hr {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 1.5em 0;
}

.markdown-content table {
    border-collapse: collapse;
    width: 100%;
    margin: 1em 0;
}

.markdown-content th,
.markdown-content td {
    border: 1px solid #e5e7eb;
    padding: 0.5em 1em;
    text-align: left;
}

.markdown-content th {
    background: #f9fafb;
    font-weight: 600;
}

/* Thinking 박스 스타일 */
.thinking-box {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 1em;
    overflow: hidden;
}

.thinking-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    font-size: 13px;
    color: #6b7280;
    transition: background 0.15s ease;
}

.thinking-header:hover {
    background: #e5e7eb;
}

.thinking-header i {
    transition: transform 0.2s ease;
}

.thinking-box.open .thinking-header i {
    transform: rotate(90deg);
}

.thinking-content {
    display: none;
    padding: 0 14px 14px;
    font-size: 13px;
    color: #4b5563;
    line-height: 1.6;
    border-top: 1px solid #e5e7eb;
}

.thinking-box.open .thinking-content {
    display: block;
}

/* 깔끔한 쿠폰 스타일 */
.coupon-box {
    position: relative;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.coupon-part {
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    min-width: 0;
}

.coupon-part.top {
    background: #faf9fc;
}

.coupon-dashed {
    position: relative;
    width: 0;
    border-left: 1.5px dashed #e5e7eb;
    margin: 10px 0;
}

/* 사이드 컷아웃 */
.coupon-cut {
    position: absolute;
    width: 14px;
    height: 14px;
    background: #fff;
    /* 모달 배경색 */
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.cut-left {
    top: -21px;
}

.cut-right {
    bottom: -21px;
}

#referralModal .bg-white {
    background: #fff;
}

/* 도구 도움말 말풍선 */
.tool-help-bubble {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    background: #9b59b6;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 10px;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(155, 89, 182, 0.3);
    z-index: 30;
    animation: toolBubbleFadeIn 0.4s ease;
}

.tool-help-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #9b59b6;
}

@keyframes toolBubbleFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

[data-theme="dark"] .tool-help-bubble {
    background: #a855c8;
    box-shadow: 0 4px 16px rgba(168, 85, 200, 0.35);
}

[data-theme="dark"] .tool-help-bubble::after {
    border-top-color: #a855c8;
}

/* 도구 사용 표시 스타일 */
.tool-indicator {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    padding: 4px 0;
    font-size: 13px;
    color: #888;
    animation: fadeIn 0.3s ease;
}

.tool-main {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tool-indicator.loading {
    color: #f57f17;
}

.tool-indicator.loading .tool-name {
    color: #e65100;
}

.tool-indicator.success {
    color: #666;
}

.tool-indicator.success .tool-name {
    color: #2e7d32;
}

.tool-indicator.success .fa-check {
    color: #4caf50;
}

.tool-indicator.error {
    color: #c62828;
}

.tool-indicator i {
    font-size: 12px;
}

.tool-indicator .spinner {
    width: 12px;
    height: 12px;
    border: 2px solid #f57f17;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.tool-args {
    font-size: 12px;
    color: #999;
}

@media (max-width: 640px) {
    .tool-args {
        font-size: 11px;
        width: 100%;
        padding-left: 18px;
    }
}

.tool-name {
    font-weight: 500;
}

.tool-preview {
    margin-top: 8px;
    animation: fadeIn 0.3s ease;
}

/* 토큰 사용량 정보 스타일 */
.token-usage-info {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed #e0e0e0;
    font-size: 12px;
}

.token-usage-header {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #888;
    cursor: pointer;
    user-select: none;
    padding: 4px 0;
}

.token-usage-header:hover {
    color: #666;
}

.token-usage-header i:first-child {
    color: #f59e0b;
}

.token-usage-header .token-total {
    color: #6b7280;
    font-weight: 500;
}

.token-usage-header .token-cost {
    color: #10b981;
    font-weight: 600;
    margin-left: auto;
}

.token-usage-header .expand-icon {
    transition: transform 0.2s;
    font-size: 10px;
    margin-left: 4px;
}

.token-usage-info.expanded .expand-icon {
    transform: rotate(180deg);
}

.token-usage-details {
    display: none;
    margin-top: 8px;
    padding: 8px 12px;
    background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
    border-radius: 8px;
    font-family: 'Menlo', 'Monaco', monospace;
}

.token-usage-info.expanded .token-usage-details {
    display: block;
    animation: fadeIn 0.2s ease;
}

.token-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
}

.token-row.total {
    border-top: 1px solid #e5e7eb;
    margin-top: 4px;
    padding-top: 6px;
    font-weight: 600;
}

.token-label {
    color: #6b7280;
    min-width: 80px;
}

.token-value {
    color: #374151;
    font-weight: 500;
    flex: 1;
    text-align: right;
    margin-right: 12px;
}

.token-price {
    color: #10b981;
    min-width: 140px;
    text-align: right;
}

.token-row.total .token-price {
    color: #059669;
}

.token-row.subtotal {
    border-top: 1px dashed #e5e7eb;
    margin-top: 4px;
    padding-top: 4px;
    font-weight: 500;
}

.token-section-title {
    font-size: 11px;
    color: #9ca3af;
    font-weight: 600;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.token-section-title.cumulative {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #e5e7eb;
    color: #6366f1;
}

.token-usage-header .token-label-main {
    color: #6b7280;
    font-weight: 600;
    font-size: 11px;
}

.token-usage-header .token-divider {
    color: #d1d5db;
    margin: 0 6px;
}

.token-usage-header .token-cumulative-label {
    color: #6366f1;
    font-weight: 600;
    font-size: 11px;
}

.token-usage-header .token-cumulative {
    color: #4f46e5;
    font-weight: 600;
}

.token-usage-header .token-cumulative-cost {
    color: #7c3aed;
    font-weight: 600;
}

.saju-preview {
    display: inline-block;
    background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 8px 12px;
}

.saju-table {
    border-collapse: collapse;
    font-size: 12px;
    text-align: center;
}

.saju-table th {
    font-weight: 500;
    color: #888;
    padding: 2px 12px;
    font-size: 10px;
}

.saju-table td {
    padding: 4px 12px;
    line-height: 1.2;
}

.saju-table .cheongan td,
.saju-table .jiji td {
    font-weight: 700;
    font-size: 18px;
}

/* 오행별 색상 */
.ohang-wood {
    color: #16a34a !important;
}

/* 목(木) - 초록색 */
.ohang-fire {
    color: #dc2626 !important;
}

/* 화(火) - 빨간색 */
.ohang-water {
    color: #1a1a1a !important;
}

/* 수(水) - 검은색 */
.ohang-earth {
    color: #ca8a04 !important;
}

/* 토(土) - 노란색 */
.ohang-metal {
    color: #ffffff !important;
    /* 금(金) - 흰색 */
    text-shadow: -1px -1px 0 #aaa, 1px -1px 0 #aaa, -1px 1px 0 #aaa, 1px 1px 0 #aaa;
    /* 연한 회색 테두리 */
}

.saju-table .kr {
    font-size: 10px;
    opacity: 0.6;
    font-weight: 400;
    display: block;
    margin-top: 1px;
}

/* 타로 미리보기 */
.tarot-preview {
    display: inline-block;
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
    border: 1px solid #ddd6fe;
    border-radius: 8px;
    padding: 10px 14px;
    margin-top: 4px;
}

.tarot-spread-info {
    font-size: 13px;
    color: #6b21a8;
}

.tarot-spread-info .spread-name {
    font-weight: 600;
}

.tarot-spread-info .card-count {
    color: #9333ea;
    margin-left: 4px;
}

.tarot-spread-info .not-selected {
    color: #a78bfa;
    font-style: italic;
    margin-left: 6px;
}

.tarot-cards-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.tarot-card-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50px;
}

.tarot-card-item img {
    width: 45px;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.tarot-card-item img.reversed-img {
    transform: rotate(180deg);
}

.tarot-card-item .card-info {
    text-align: center;
    margin-top: 4px;
}

.tarot-card-item .card-name {
    display: block;
    font-size: 9px;
    color: #6b21a8;
    line-height: 1.2;
}

.tarot-card-item .card-direction {
    display: block;
    font-size: 8px;
    color: #22c55e;
}

.tarot-card-item .card-direction.reversed {
    color: #ef4444;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes subtlePulse {

    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(139, 92, 246, 0);
    }

    50% {
        opacity: 1;
        box-shadow: 0 0 0 6px rgba(139, 92, 246, 0.15);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 도구 사용 컨테이너 */
.tools-container {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 8px;
}

/* AI 메시지 flex-1 래퍼: min-width 0으로 오버플로우 방지 */
.ai-msg>div.flex-1,
.ai-msg>.flex-1 {
    min-width: 0;
}

/* 메시지 복사 버튼 */
.message-wrapper {
    position: relative;
    overflow: visible;
}

.message-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
}

.message-actions .copy-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 11px;
}

.message-actions .copy-btn:hover {
    background: #f3f4f6;
    color: #374151;
}

.message-actions .copy-btn.copied {
    background: #d1fae5;
    border-color: #10b981;
    color: #059669;
}

.message-actions .copy-btn i {
    font-size: 11px;
}

.message-actions .archive-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 11px;
}

.message-actions .archive-btn:hover {
    background: #f3f4f6;
    color: #374151;
}

.message-actions .archive-btn.archived {
    background: #ede9fe;
    border-color: #8b5cf6;
    color: #7c3aed;
}

.message-actions .archive-btn i {
    font-size: 11px;
}

/* 프로필 드롭다운 스타일 */
.profile-list::-webkit-scrollbar {
    width: 4px;
}

.profile-list::-webkit-scrollbar-track {
    background: transparent;
}

.profile-list::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 2px;
}

/* 멘션 뱃지 스타일 */
#mentionBadges,
#mentionBadgesBottom {
    min-height: 0;
}

#mentionBadges.flex,
#mentionBadgesBottom.flex {
    min-height: 32px;
}

.profile-item.selected {
    border-color: #14b8a6;
    background: linear-gradient(135deg, #f0fdfa, #f5f3ff);
}

/* 출처 뱃지 스타일 */
.source-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    margin: 0 2px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    vertical-align: middle;
}

.source-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.source-badge i {
    font-size: 10px;
}

/* 출처별 색상 */
.source-badge.saju {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    border: 1px solid #f59e0b;
}

.source-badge.astrology {
    background: linear-gradient(135deg, #ddd6fe, #c4b5fd);
    color: #5b21b6;
    border: 1px solid #8b5cf6;
}

.source-badge.ziwei {
    background: linear-gradient(135deg, #cffafe, #a5f3fc);
    color: #155e75;
    border: 1px solid #06b6d4;
}

.source-badge.ilzin {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    color: #065f46;
    border: 1px solid #10b981;
}

.source-badge.tarot {
    background: linear-gradient(135deg, #fce7f3, #fbcfe8);
    color: #9d174d;
    border: 1px solid #ec4899;
}

/* 타로 카드 선택 UI */
.tarot-pick-container {
    background: linear-gradient(135deg, #1e1b4b, #312e81);
    border-radius: 16px;
    padding: 24px;
    margin: 16px 0;
    position: relative;
    overflow: hidden;
    max-width: 100%;
}

.tarot-pick-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.08'%3E%3Cpath d='M30 30l15-15M30 30L15 15M30 30l15 15M30 30L15 45'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.tarot-pick-header {
    text-align: center;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.tarot-pick-title {
    color: #e9d5ff;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.tarot-pick-subtitle {
    color: #a5b4fc;
    font-size: 13px;
}

.tarot-pick-counter {
    display: inline-block;
    background: rgba(139, 92, 246, 0.3);
    padding: 4px 12px;
    border-radius: 20px;
    color: #c4b5fd;
    font-size: 12px;
    margin-top: 8px;
}

/* 카드 캐러셀 영역 */
.tarot-cards-area {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.tarot-carousel {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: rgba(30, 27, 75, 0.5);
    padding: 24px 0 16px;
}

.tarot-carousel-track {
    display: flex;
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    padding: 20px 0 12px;
    cursor: grab;
    user-select: none;
}

.tarot-carousel-track:active {
    cursor: grabbing;
}

.tarot-carousel-track .tarot-card {
    flex-shrink: 0;
    margin: 0 -4px;
}

/* 좌우 화살표 */
.tarot-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 56px;
    background: rgba(124, 58, 237, 0.7);
    border: none;
    border-radius: 8px;
    color: #e9d5ff;
    font-size: 16px;
    cursor: pointer;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    backdrop-filter: blur(4px);
}

.tarot-nav-btn:hover {
    background: rgba(139, 92, 246, 0.9);
}

.tarot-nav-btn.prev {
    left: 4px;
}

.tarot-nav-btn.next {
    right: 4px;
}

.tarot-nav-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

/* 진행 바 */
.tarot-progress {
    margin: 10px 16px 0;
    height: 6px;
    background: rgba(99, 72, 168, 0.3);
    border-radius: 3px;
    overflow: visible;
    position: relative;
    z-index: 2;
    cursor: pointer;
    /* 터치 영역 확대 */
    padding: 8px 0;
    margin-top: 2px;
    background-clip: content-box;
}

.tarot-progress-bar {
    height: 6px;
    background: #7c3aed;
    border-radius: 3px;
    transition: width 0.35s ease;
    min-width: 8%;
    pointer-events: none;
}

.tarot-progress:hover .tarot-progress-bar {
    background: #8b5cf6;
}

.tarot-progress:active .tarot-progress-bar,
.tarot-progress.active .tarot-progress-bar {
    transition: width 0.05s ease;
}

.tarot-page-info {
    text-align: center;
    color: #a5b4fc;
    font-size: 11px;
    margin-top: 6px;
    position: relative;
    z-index: 1;
}

/* 카드 */
.tarot-card {
    width: 64px;
    height: 96px;
    background: linear-gradient(145deg, #4c1d95, #6d28d9);
    border: 2px solid #7c3aed;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, margin 0.2s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.tarot-card::before {
    content: '✦';
    color: #c4b5fd;
    font-size: 22px;
    opacity: 0.6;
}

.tarot-card::after {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(196, 181, 253, 0.3);
    border-radius: 4px;
    pointer-events: none;
}

.tarot-card:hover:not(.selected):not(.disabled) {
    transform: translateY(-6px) scale(1.05);
    border-color: #a78bfa;
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.5);
    z-index: 2;
}

.tarot-card.selected {
    background: linear-gradient(145deg, #7c3aed, #8b5cf6);
    border-color: #fef08a;
    transform: translateY(-10px) scale(1.08);
    box-shadow: 0 12px 24px rgba(139, 92, 246, 0.6);
    animation: cardGlow 1.5s ease-in-out infinite;
    z-index: 3;
    margin: 0 2px;
}

.tarot-card.selected::before {
    content: '★';
    color: #fef08a;
    font-size: 26px;
    opacity: 1;
}

.tarot-card.disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

@keyframes cardGlow {

    0%,
    100% {
        box-shadow: 0 12px 24px rgba(139, 92, 246, 0.6);
    }

    50% {
        box-shadow: 0 12px 32px rgba(167, 139, 250, 0.8);
    }
}

.tarot-complete-msg {
    text-align: center;
    margin-top: 16px;
    color: #a5f3fc;
    font-size: 14px;
    animation: pulse 1s ease-in-out infinite;
    position: relative;
    z-index: 1;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

/* 타로 기록 뱃지 (완료/대기 중) */
.tarot-history-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #e9d5ff, #c4b5fd);
    color: #5b21b6;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
}

.tarot-history-badge.completed {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    color: #047857;
}

.tarot-history-badge.pending {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
}

.tarot-pending-hint {
    font-size: 11px;
    opacity: 0.8;
    margin-left: 4px;
    margin: 8px 0;
}

/* 사용자 타로 카드 선택 표시 */
.user-tarot-selection {
    background: linear-gradient(135deg, #1e1b4b, #312e81);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 8px;
}

.tarot-selection-header {
    color: #c4b5fd;
    font-size: 12px;
    margin-bottom: 8px;
    text-align: center;
}

.user-tarot-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.user-tarot-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 55px;
}

.user-tarot-card img {
    width: 50px;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.user-tarot-card img.reversed-img {
    transform: rotate(180deg);
}

.user-tarot-card .card-label {
    color: #e9d5ff;
    font-size: 9px;
    margin-top: 4px;
    text-align: center;
    line-height: 1.2;
}

.user-tarot-card .card-dir {
    color: #86efac;
    font-size: 8px;
}

.user-tarot-card .card-dir.reversed {
    color: #fca5a5;
}

.tarot-history-badge i {
    font-size: 14px;
}

/* 선택된 카드 결과 표시 */
.tarot-result-area {
    position: relative;
    z-index: 1;
}

.tarot-result-title {
    text-align: center;
    color: #fef08a;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
}

.tarot-result-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

.tarot-result-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: cardReveal 0.6s ease-out forwards;
    opacity: 0;
}

.tarot-result-card:nth-child(1) {
    animation-delay: 0s;
}

.tarot-result-card:nth-child(2) {
    animation-delay: 0.15s;
}

.tarot-result-card:nth-child(3) {
    animation-delay: 0.3s;
}

.tarot-result-card:nth-child(4) {
    animation-delay: 0.45s;
}

.tarot-result-card:nth-child(5) {
    animation-delay: 0.6s;
}

.tarot-result-card:nth-child(6) {
    animation-delay: 0.75s;
}

.tarot-result-card:nth-child(7) {
    animation-delay: 0.9s;
}

.tarot-result-card:nth-child(8) {
    animation-delay: 1.05s;
}

.tarot-result-card:nth-child(9) {
    animation-delay: 1.2s;
}

.tarot-result-card:nth-child(10) {
    animation-delay: 1.35s;
}

@keyframes cardReveal {
    0% {
        opacity: 0;
        transform: rotateY(180deg) scale(0.5);
    }

    100% {
        opacity: 1;
        transform: rotateY(0) scale(1);
    }
}

.tarot-result-card img {
    width: 100px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease;
}

.tarot-result-card.reversed img {
    transform: rotate(180deg);
}

.tarot-result-card:hover img {
    transform: scale(1.05);
}

.tarot-result-card.reversed:hover img {
    transform: rotate(180deg) scale(1.05);
}

.tarot-result-name {
    margin-top: 8px;
    color: #e9d5ff;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
}

.tarot-result-direction {
    color: #a5b4fc;
    font-size: 10px;
    margin-top: 2px;
}

.tarot-result-card.reversed .tarot-result-direction {
    color: #fca5a5;
}

@media (max-width: 640px) {
    .tarot-card {
        width: 54px;
        height: 81px;
    }

    .tarot-card::before {
        font-size: 18px;
    }

    .tarot-nav-btn {
        width: 30px;
        height: 48px;
        font-size: 15px;
    }

    .tarot-carousel {
        padding: 18px 0 12px;
    }

    .tarot-carousel-track {
        padding: 16px 0 10px;
    }

    .tarot-result-card img {
        width: 70px;
    }

    .tarot-result-name {
        font-size: 10px;
    }

    /* 타로 컨테이너 모바일 오버플로우 수정 */
    .tarot-pick-container {
        padding: 16px 8px !important;
        margin-left: -20px !important;
        margin-right: -20px !important;
        border-radius: 0 !important;
        width: calc(100% + 40px) !important;
        max-width: calc(100% + 40px) !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .tarot-carousel-viewport {
        padding: 0 20px !important;
    }

    .tarot-progress {
        margin-left: 8px;
        margin-right: 8px;
    }

    /* 채팅 영역 가로 스크롤 방지 */
    #chatArea {
        overflow-x: hidden;
    }

    #conversationScreen {
        overflow-x: hidden;
    }

    #chatMessages {
        overflow-x: hidden;
    }
}

/* 툴팁 스타일 */
.source-tooltip {
    position: fixed;
    bottom: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #1f2937;
    color: white;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    width: max-content;
    max-width: min(320px, calc(100vw - 40px));
    min-width: 120px;
    text-align: left;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.source-tooltip::after {
    display: none;
}

.source-badge:hover .source-tooltip,
.source-badge.active .source-tooltip {
    opacity: 1;
    visibility: visible;
}

/* 데스크톱: 뱃지 위에 표시 (화면 넓으면 안전) */
@media (min-width: 769px) {
    .source-tooltip {
        position: absolute;
        bottom: calc(100% + 8px);
        top: auto;
        left: 50%;
        transform: translateX(-50%);
        max-width: 320px;
    }

    .source-tooltip::after {
        display: block;
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 6px solid transparent;
        border-top-color: #1f2937;
    }
}

/* 모바일: AI 메시지 레이아웃 (로고+이름을 말풍선 바깥 위에) */
@media (max-width: 640px) {
    .ai-msg {
        flex-direction: column !important;
        gap: 4px !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .ai-msg>.ai-avatar-side {
        display: none !important;
    }

    .ai-msg .ai-avatar-top {
        display: flex !important;
    }

    .ai-msg>.flex-1 {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .ai-msg .message-wrapper {
        overflow: hidden !important;
        max-width: 100% !important;
    }
}

.ai-avatar-top {
    display: none;
    align-items: center;
    gap: 6px;
    padding-left: 2px;
    margin-bottom: 6px;
}

.ai-avatar-top img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
}

.ai-avatar-top span {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
}

/* 모바일 레이아웃 최적화 */
@media (max-width: 1024px) {

    /* 사이드바 하단 여백 추가 */
    #sidebar {
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }

    /* 하단 입력창 safe area 처리 */
    #bottomInput {
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    }
}

/* 모바일 하단 입력창 ChatGPT 스타일 */
@media (max-width: 640px) {

    /* 하단 입력창 컨테이너 */
    #bottomInput {
        padding: 8px 12px !important;
        padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
        border-top: none !important;
    }

    #bottomInput>.max-w-3xl {
        max-width: 100%;
    }

    /* 입력 카드 */
    #bottomInput .bg-white.rounded-2xl {
        border-radius: 1.5rem;
        box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
        border: 1px solid #e5e7eb;
    }

    /* 텍스트 영역 */
    #bottomInput textarea {
        padding: 14px 18px 6px;
        font-size: 16px;
        line-height: 1.5;
        min-height: 44px;
    }

    /* 하단 도구/전송 영역 - 구분선 제거, 컴팩트하게 */
    #bottomInput .border-t.border-gray-100 {
        border-top: none;
        padding: 4px 12px 10px;
    }

    /* 글자수 카운터 숨김 */
    #bottomInput #charCountBottom {
        display: none;
    }

    /* 안내 메시지 숨김 */
    #bottomInput .text-center.text-xs.text-gray-400.mb-2 {
        display: none;
    }

    /* 웰컴 화면 입력창도 동일하게 */
    #welcomeScreen {
        padding-left: 12px;
        padding-right: 12px;
    }

    #welcomeScreen .relative.mb-8 .bg-white.rounded-2xl {
        border-radius: 1.5rem;
        box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
    }

    #welcomeScreen textarea {
        padding: 14px 18px 6px;
        font-size: 16px;
    }

    #welcomeScreen #charCount {
        display: none;
    }

    #welcomeScreen .border-t.border-gray-100 {
        border-top: none;
        padding: 4px 12px 10px;
    }

    /* 웰컴 화면 드롭다운: 위로 열리면 navbar에 가려지므로 아래로 열기 */
    #welcomeScreen #toolsDropdown,
    #welcomeScreen #profileDropdown {
        bottom: auto !important;
        top: 100% !important;
        margin-top: 8px !important;
        margin-bottom: 0 !important;
    }

    /* 대화 영역 패딩 축소 */
    #conversationScreen {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* 블러된 보라색 원 배경 효과 */
.bg-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.bg-glow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.2) 0%, rgba(139, 92, 246, 0.12) 30%, rgba(139, 92, 246, 0.04) 60%, transparent 70%);
    border-radius: 50%;
    filter: blur(60px);
    animation: float-1 4s ease-in-out infinite;
}

.bg-glow::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(167, 139, 250, 0.18) 0%, rgba(167, 139, 250, 0.08) 40%, transparent 70%);
    border-radius: 50%;
    filter: blur(50px);
    animation: float-2 3.5s ease-in-out infinite;
}

@keyframes float-1 {
    0% {
        transform: translate(-50%, -50%) scale(0.7);
        opacity: 0.5;
    }

    25% {
        transform: translate(-45%, -55%) scale(1);
        opacity: 0.8;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 1;
    }

    75% {
        transform: translate(-55%, -45%) scale(1);
        opacity: 0.8;
    }

    100% {
        transform: translate(-50%, -50%) scale(0.7);
        opacity: 0.5;
    }
}

@keyframes float-2 {
    0% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 1;
    }

    33% {
        transform: translate(-55%, -50%) scale(0.7);
        opacity: 0.6;
    }

    66% {
        transform: translate(-45%, -50%) scale(1.1);
        opacity: 0.9;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 1;
    }
}

/* ============================================
   PC 사이드바 접기/펼치기
   ============================================ */
/* 접기 토글 버튼 (헤더 옆) */
.sidebar-collapse-btn {
    display: none;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    padding: 0;
    flex-shrink: 0;
}

.sidebar-collapse-btn:hover {
    background: rgba(0, 0, 0, 0.06);
}

.sidebar-collapse-btn svg {
    width: 16px;
    height: 16px;
    color: #9ca3af;
    transition: color 0.2s;
}

.sidebar-collapse-btn:hover svg {
    color: #6b7280;
}

@media (min-width: 1024px) {
    .sidebar-collapse-btn {
        display: flex;
    }
}

/* 접힌 사이드바 - 좁은 바 형태 */
@media (min-width: 1024px) {
    #sidebar.sidebar-collapsed {
        width: 56px;
        padding: 8px 4px;
        min-width: 56px;
    }

    #sidebar.sidebar-collapsed .sidebar-inner-content {
        opacity: 0;
        pointer-events: none;
        overflow: hidden;
        width: 0;
        height: 0;
    }

    #sidebar.sidebar-collapsed .sidebar-collapsed-icons {
        display: flex;
    }
}

/* 접힌 상태에서 보이는 아이콘들 */
.sidebar-collapsed-icons {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
    height: 100%;
}

.sidebar-collapsed-icons .collapsed-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    border: none;
    background: transparent;
    color: #6b7280;
}

.sidebar-collapsed-icons .collapsed-icon-btn:hover {
    background: rgba(0, 0, 0, 0.06);
}

.sidebar-collapsed-icons .collapsed-icon-btn svg,
.sidebar-collapsed-icons .collapsed-icon-btn i {
    width: 18px;
    height: 18px;
    font-size: 16px;
}

.sidebar-collapsed-icons .collapsed-icon-btn img {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    object-fit: cover;
}

/* 프로필 버튼 하단 고정 */
.sidebar-collapsed-icons .collapsed-profile-btn {
    margin-top: auto;
    margin-bottom: 12px;
}

.sidebar-collapsed-icons .collapsed-profile-btn img {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    object-fit: cover;
    background: #e9e4ed;
}

[data-theme="dark"] .sidebar-collapsed-icons .collapsed-profile-btn img {
    background: #2d2e4a;
}

/* 접힌 로고 버튼: hover 시 화살표로 변환 */
.sidebar-collapsed-icons .collapsed-logo-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    border: none;
    background: transparent;
    position: relative;
    padding: 0;
}

.sidebar-collapsed-icons .collapsed-logo-btn:hover {
    background: rgba(0, 0, 0, 0.06);
}

.collapsed-logo-btn .collapsed-logo-img {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    object-fit: cover;
    transition: opacity 0.15s ease;
}

.collapsed-logo-btn .collapsed-logo-arrow {
    width: 18px;
    height: 18px;
    color: #6b7280;
    position: absolute;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.collapsed-logo-btn:hover .collapsed-logo-img {
    opacity: 0;
}

.collapsed-logo-btn:hover .collapsed-logo-arrow {
    opacity: 1;
}

[data-theme="dark"] .collapsed-logo-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .collapsed-logo-btn .collapsed-logo-arrow {
    color: #9ca3af;
}

[data-theme="dark"] .sidebar-collapse-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .sidebar-collapse-btn svg {
    color: #6b7280;
}

[data-theme="dark"] .sidebar-collapse-btn:hover svg {
    color: #9ca3af;
}

[data-theme="dark"] .sidebar-collapsed-icons .collapsed-icon-btn {
    color: #9ca3af;
}

[data-theme="dark"] .sidebar-collapsed-icons .collapsed-icon-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* ============================================
   다크 모드 테마
   ============================================ */
[data-theme="dark"] {
    color-scheme: dark;
}

/* --- 기본 배경 / 텍스트 --- */
[data-theme="dark"] body {
    background-color: #1a1b2e !important;
    color: #e2e8f0;
}

/* --- 사이드바 --- */
[data-theme="dark"] #sidebar {
    background-color: #1e1f36 !important;
    border-color: #2d2e4a !important;
}

[data-theme="dark"] #sidebar .font-semibold.text-gray-800 {
    color: #e2e8f0 !important;
}

[data-theme="dark"] #sidebar .bg-white {
    background-color: #2d2e4a !important;
    color: #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] #sidebar .bg-white\/50,
[data-theme="dark"] #sidebar .bg-white\/70 {
    background-color: rgba(45, 46, 74, 0.6) !important;
}

[data-theme="dark"] #sidebar .hover\:bg-white\/70:hover {
    background-color: rgba(54, 55, 88, 0.8) !important;
}

[data-theme="dark"] #sidebar .text-gray-800 {
    color: #e2e8f0 !important;
}

[data-theme="dark"] #sidebar .text-gray-600,
[data-theme="dark"] #sidebar .text-gray-500 {
    color: #a0aec0 !important;
}

[data-theme="dark"] #sidebar .text-gray-400 {
    color: #718096 !important;
}

[data-theme="dark"] #sidebar .text-gray-300 {
    color: #4a5568 !important;
}

[data-theme="dark"] #sidebar .border-cream-dark {
    border-color: #2d2e4a !important;
}

[data-theme="dark"] .history-item:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .history-item.active {
    background: #2d2e4a !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .history-item .text-gray-700 {
    color: #cbd5e0 !important;
}

[data-theme="dark"] .history-item .text-gray-400 {
    color: #718096 !important;
}

[data-theme="dark"] #searchInput {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: #3d3e5c !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] #searchInput::placeholder {
    color: #718096 !important;
}

[data-theme="dark"] .search-highlight {
    background: rgba(20, 184, 166, 0.3);
    color: #5eead4;
}

[data-theme="dark"] .search-snippet {
    color: #718096;
}

[data-theme="dark"] .search-match-highlight {
    background: rgba(250, 204, 21, 0.3);
}

[data-theme="dark"] .search-flash {
    animation: searchFlashDark 2s ease-out;
}

@keyframes searchFlashDark {

    0%,
    30% {
        background-color: rgba(20, 184, 166, 0.15);
    }

    100% {
        background-color: transparent;
    }
}

[data-theme="dark"] #sidebar .hover\:bg-cream-dark:hover {
    background-color: #2d2e4a !important;
}

[data-theme="dark"] #sidebar .credit-section-box {
    border-color: #5a6578 !important;
}

[data-theme="dark"] #sidebar #activePlanName {
    color: #ffffff !important;
}

/* 사이드바 사용자 메뉴 드롭다운 */
[data-theme="dark"] #userMenu {
    background-color: #252640 !important;
    border-color: #3d3e5c !important;
}

[data-theme="dark"] #userMenu .hover\:bg-gray-50:hover {
    background-color: #2d2e4a !important;
}

[data-theme="dark"] #userMenu .text-gray-700 {
    color: #cbd5e0 !important;
}

/* --- 모바일 헤더 --- */
[data-theme="dark"] header.bg-cream {
    background-color: #1e1f36 !important;
    border-bottom-color: #5a6578 !important;
}

[data-theme="dark"] header .border-cream-dark {
    border-color: #2d2e4a !important;
}

[data-theme="dark"] header .text-gray-800 {
    color: #e2e8f0 !important;
}

[data-theme="dark"] header .text-gray-600 {
    color: #a0aec0 !important;
}

[data-theme="dark"] header .hover\:bg-cream-dark:hover {
    background-color: #2d2e4a !important;
}

/* 모바일 메뉴 */
[data-theme="dark"] #mobileMenu {
    background-color: #252640 !important;
    border-color: #3d3e5c !important;
}

[data-theme="dark"] #mobileMenu .border-gray-100 {
    border-color: #2d2e4a !important;
}

[data-theme="dark"] #mobileMenu .text-gray-800 {
    color: #e2e8f0 !important;
}

[data-theme="dark"] #mobileMenu .text-gray-500 {
    color: #a0aec0 !important;
}

[data-theme="dark"] #mobileMenu .text-gray-700 {
    color: #cbd5e0 !important;
}

[data-theme="dark"] #mobileMenu .hover\:bg-gray-50:hover {
    background-color: #2d2e4a !important;
}

/* --- 채팅 영역 배경 --- */
[data-theme="dark"] #chatArea {
    background-color: #1a1b2e !important;
}

/* --- Welcome 화면 --- */
[data-theme="dark"] #welcomeScreen .text-gray-800,
[data-theme="dark"] #welcomeScreen .text-gray-900 {
    color: #f1f5f9 !important;
}

[data-theme="dark"] #welcomeScreen .text-gray-500 {
    color: #a0aec0 !important;
}

[data-theme="dark"] #welcomeScreen .text-gray-400 {
    color: #718096 !important;
}

[data-theme="dark"] #welcomeScreen .text-gray-600 {
    color: #a0aec0 !important;
}

/* Welcome 입력 영역 */
[data-theme="dark"] #welcomeScreen .bg-white {
    background-color: #252640 !important;
    border-color: #3d3e5c !important;
}

[data-theme="dark"] #welcomeScreen .border-gray-200 {
    border-color: #3d3e5c !important;
}

[data-theme="dark"] #welcomeScreen .border-gray-100 {
    border-color: #2d2e4a !important;
}

/* 추천 질문 버튼 */
[data-theme="dark"] #welcomeScreen button.bg-white {
    background-color: #252640 !important;
    border-color: #3d3e5c !important;
    color: #cbd5e0 !important;
}

[data-theme="dark"] #welcomeScreen button.bg-white:hover {
    background-color: #2d2e4a !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* BETA 배지 */
[data-theme="dark"] #welcomeScreen .from-violet-50 {
    background: linear-gradient(to right, rgba(139, 92, 246, 0.15), rgba(168, 85, 247, 0.15)) !important;
    border-color: rgba(139, 92, 246, 0.3) !important;
}

[data-theme="dark"] #welcomeScreen .text-violet-700 {
    color: #c4b5fd !important;
}

/* --- 메시지 말풍선 (AI) --- */
[data-theme="dark"] .message-wrapper {
    background-color: #252640 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .message-wrapper .text-gray-800 {
    color: #e2e8f0 !important;
}

[data-theme="dark"] .message-wrapper .border-gray-100,
[data-theme="dark"] .message-wrapper .border-t {
    border-color: #3d3e5c !important;
}

[data-theme="dark"] .message-actions {}

[data-theme="dark"] .message-actions .copy-btn {
    background-color: #2d2e4a !important;
    border-color: #3d3e5c !important;
    color: #a0aec0 !important;
}

[data-theme="dark"] .message-actions .copy-btn:hover {
    background-color: #363758 !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] .message-actions .archive-btn {
    background-color: #2d2e4a !important;
    border-color: #3d3e5c !important;
    color: #a0aec0 !important;
}

[data-theme="dark"] .message-actions .archive-btn:hover {
    background-color: #363758 !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] .message-actions .archive-btn.archived {
    background-color: #3b2f63 !important;
    border-color: #7c3aed !important;
    color: #a78bfa !important;
}

/* 사용자 메시지 (보라색 유지, 약간 조정) */
[data-theme="dark"] .bg-teal {
    background-color: #3d3570 !important;
}

/* --- 타이핑 인디케이터 --- */
[data-theme="dark"] #typingIndicator .bg-white {
    background-color: #252640 !important;
}

/* --- 공유하기 버튼 --- */
[data-theme="dark"] #shareBtn {
    background-color: rgba(37, 38, 64, 0.8) !important;
    border-color: #3d3e5c !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] #shareBtn:hover {
    background-color: rgba(45, 46, 74, 0.95) !important;
}

[data-theme="dark"] #shareBtnMobile,
[data-theme="dark"] #shareBtnMobileGuest {
    color: #a0aec0 !important;
}

/* --- 공유 모달 --- */
[data-theme="dark"] #shareModal .bg-white {
    background-color: #1e1f36 !important;
}

[data-theme="dark"] #shareModal .text-gray-800 {
    color: #e2e8f0 !important;
}

[data-theme="dark"] #shareModal .text-gray-500 {
    color: #a0aec0 !important;
}

[data-theme="dark"] #shareModal .bg-gray-50 {
    background-color: #252640 !important;
}

[data-theme="dark"] #shareModal .border-gray-100,
[data-theme="dark"] #shareModal .border-gray-200 {
    border-color: #3d3e5c !important;
}

[data-theme="dark"] #shareModal input {
    background-color: #2d2e4a !important;
    border-color: #3d3e5c !important;
    color: #a0aec0 !important;
}

[data-theme="dark"] #shareModal .bg-gray-800 {
    background-color: #4a5568 !important;
}

[data-theme="dark"] #shareModal .bg-gray-800:hover,
[data-theme="dark"] #shareModal .hover\:bg-gray-900:hover {
    background-color: #5a6577 !important;
}

/* ===== HORI INPUT BOX (ChatGPT Style) ===== */
.hori-input-box {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 28px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: border-color 0.2s, box-shadow 0.2s;
    position: relative;
}

.hori-input-box:focus-within {
    border-color: #4a3f6b;
    box-shadow: 0 0 0 3px rgba(74, 63, 107, 0.08), 0 2px 12px rgba(0, 0, 0, 0.06);
}

.hori-textarea {
    width: 100%;
    padding: 20px 22px 12px;
    font-size: 16px;
    line-height: 1.6;
    min-height: 64px;
    color: #1f2937;
    background: transparent;
    border: none;
    resize: none;
    outline: none;
}

.hori-textarea::placeholder {
    color: #9ca3af;
}

.hori-input-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px 10px;
}

.hori-input-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
}

@media (max-width: 640px) {
    .hori-input-btn {
        gap: 4px;
        padding: 5px 8px;
        font-size: 12px;
    }
    .hori-input-btn i:first-child {
        font-size: 12px;
    }
    .hori-input-btn .fa-chevron-down {
        display: none;
    }
}

.hori-input-btn:hover {
    color: #4a3f6b;
    background: rgba(74, 63, 107, 0.06);
}

.hori-input-btn i:first-child {
    font-size: 14px;
}

.hori-send-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #4a3f6b;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.hori-send-btn:hover:not(:disabled) {
    background: #3a3157;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(74, 63, 107, 0.3);
}

.hori-send-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Dark Mode - Input Box */
[data-theme="dark"] .hori-input-box {
    background: #252640;
    border-color: #3d3e5c;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .hori-input-box:focus-within {
    border-color: #6b5f8f;
    box-shadow: 0 0 0 3px rgba(107, 95, 143, 0.15), 0 2px 12px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .hori-textarea {
    color: #e2e8f0;
}

[data-theme="dark"] .hori-textarea::placeholder {
    color: #718096;
}

[data-theme="dark"] .hori-input-btn {
    color: #a0aec0;
}

[data-theme="dark"] .hori-input-btn:hover {
    color: #9d8ec7;
    background: rgba(157, 142, 199, 0.1);
}

[data-theme="dark"] .hori-send-btn {
    background: #6b5f8f;
}

[data-theme="dark"] .hori-send-btn:hover:not(:disabled) {
    background: #7c6faa;
    box-shadow: 0 4px 12px rgba(107, 95, 143, 0.4);
}

/* ===== 이벤트 배너 ===== */
.hori-event-banner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: -16px;
    margin-bottom: 24px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid #e5e7eb;
    border-radius: 9999px;
    font-size: 12px;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s;
}

.hori-event-banner:hover {
    border-color: rgba(74, 63, 107, 0.3);
    color: #4a3f6b;
    background: rgba(74, 63, 107, 0.04);
}

.hori-event-badge {
    padding: 1px 5px;
    background: rgba(74, 63, 107, 0.1);
    color: #4a3f6b;
    font-size: 9px;
    font-weight: 700;
    border-radius: 4px;
    text-transform: uppercase;
    line-height: 1;
}

[data-theme="dark"] .hori-event-banner {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    color: #a0aec0;
}

[data-theme="dark"] .hori-event-banner:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(157, 142, 199, 0.3);
    color: #c4b5e0;
}

[data-theme="dark"] .hori-event-badge {
    background: rgba(157, 142, 199, 0.2);
    color: #b8aad8;
}

/* ===== 추천 질문 칩 ===== */
.hori-suggestion-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
    border-radius: 9999px;
    font-size: 12px;
    color: #6b7280;
    border: 1px solid rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: all 0.2s;
}

.hori-suggestion-chip:hover {
    color: #374151;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .hori-suggestion-chip {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    color: #a0aec0;
}

[data-theme="dark"] .hori-suggestion-chip:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* --- 입력 영역 (하단) --- */
[data-theme="dark"] #bottomInput {
    background-color: #1a1b2e !important;
    border-color: #2d2e4a !important;
}

[data-theme="dark"] #bottomInput .bg-white {
    background-color: #252640 !important;
    border-color: #3d3e5c !important;
}

[data-theme="dark"] #bottomInput .border-gray-200 {
    border-color: #3d3e5c !important;
}

[data-theme="dark"] #bottomInput .border-gray-100 {
    border-color: #2d2e4a !important;
}

[data-theme="dark"] #bottomInput .text-gray-500 {
    color: #a0aec0 !important;
}

/* textarea */
[data-theme="dark"] textarea {
    background-color: transparent !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] textarea::placeholder {
    color: #718096 !important;
}

/* --- 드롭다운 공통 --- */
[data-theme="dark"] #toolsDropdown,
[data-theme="dark"] #toolsDropdownBottom,
[data-theme="dark"] #profileDropdown,
[data-theme="dark"] #profileDropdownBottom,
[data-theme="dark"] #mentionDropdown {
    background-color: #252640 !important;
    border-color: #3d3e5c !important;
}

[data-theme="dark"] #toolsDropdown .hover\:bg-gray-50:hover,
[data-theme="dark"] #toolsDropdownBottom .hover\:bg-gray-50:hover,
[data-theme="dark"] #profileDropdown .hover\:bg-gray-50:hover,
[data-theme="dark"] #profileDropdownBottom .hover\:bg-gray-50:hover,
[data-theme="dark"] #mentionDropdown .hover\:bg-gray-50:hover {
    background-color: #2d2e4a !important;
}

[data-theme="dark"] #toolsDropdown .text-gray-700,
[data-theme="dark"] #toolsDropdownBottom .text-gray-700,
[data-theme="dark"] #profileDropdown .text-gray-700,
[data-theme="dark"] #profileDropdownBottom .text-gray-700 {
    color: #cbd5e0 !important;
}

[data-theme="dark"] #toolsDropdown .text-gray-500,
[data-theme="dark"] #toolsDropdownBottom .text-gray-500,
[data-theme="dark"] #profileDropdown .text-gray-500,
[data-theme="dark"] #profileDropdownBottom .text-gray-500 {
    color: #a0aec0 !important;
}

[data-theme="dark"] #toolsDropdown .border-gray-100,
[data-theme="dark"] #toolsDropdownBottom .border-gray-100,
[data-theme="dark"] #profileDropdown .border-gray-100,
[data-theme="dark"] #profileDropdownBottom .border-gray-100 {
    border-color: #2d2e4a !important;
}

[data-theme="dark"] #toolsDropdown .text-gray-600,
[data-theme="dark"] #toolsDropdownBottom .text-gray-600 {
    color: #a0aec0 !important;
}

/* --- 설정 모달 레이아웃 --- */
/* 모바일: 사이드바/콘텐츠 전환을 단일 클래스로 제어 */
@media (max-width: 1023px) {
    .settings-sidebar {
        display: block;
    }

    .settings-content {
        display: none;
    }

    .settings-show-content .settings-sidebar {
        display: none;
    }

    .settings-show-content .settings-content {
        display: block;
    }
}

@media (min-width: 1024px) {
    .settings-sidebar {
        display: block;
    }

    .settings-content {
        display: block;
    }
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
}

.settings-divider {
    border-bottom: 1px solid #e5e7eb;
    margin: 0.25rem 0;
}

.settings-select {
    appearance: none;
    width: 100%;
    padding: 0.625rem 2rem 0.625rem 0.75rem;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: #374151;
    cursor: pointer;
    transition: border-color 0.15s;
}

.settings-select:hover {
    border-color: #d1d5db;
}

.settings-select:focus {
    outline: none;
    border-color: #9ca3af;
    box-shadow: 0 0 0 2px rgba(156, 163, 175, 0.15);
}

/* 토글 스위치 */
.settings-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    cursor: pointer;
}
.settings-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}
.settings-toggle-slider {
    position: absolute;
    inset: 0;
    background-color: #d1d5db;
    border-radius: 24px;
    transition: background-color 0.2s;
}
.settings-toggle-slider::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}
.settings-toggle input:checked + .settings-toggle-slider {
    background-color: #6b5f8f;
}
.settings-toggle input:checked + .settings-toggle-slider::before {
    transform: translateX(20px);
}
[data-theme="dark"] .settings-toggle-slider {
    background-color: #3a3b5c;
}
[data-theme="dark"] .settings-toggle input:checked + .settings-toggle-slider {
    background-color: #8b7fb8;
}

/* 탭 활성 상태 */
.settings-tab-active {
    background-color: #f3f4f6;
}

.settings-tab-active i {
    color: #4a3f6b !important;
}

.settings-tab-active span {
    color: #1f2937 !important;
    font-weight: 600 !important;
}

/* --- 설정 모달 다크모드 --- */
[data-theme="dark"] #settingsModal>div:first-child {
    background: rgba(0, 0, 0, 0.7) !important;
}

[data-theme="dark"] #settingsModal .bg-white,
[data-theme="dark"] #settingsModal #settingsContent {
    background-color: #1e1f36 !important;
}

[data-theme="dark"] #settingsModal .border-gray-200,
[data-theme="dark"] .settings-divider {
    border-color: #2d2e4a !important;
}

[data-theme="dark"] #settingsModal .text-gray-800,
[data-theme="dark"] #settingsModal .text-lg {
    color: #e2e8f0 !important;
}

[data-theme="dark"] #settingsModal .text-gray-700 {
    color: #cbd5e0 !important;
}

[data-theme="dark"] #settingsModal .text-gray-600 {
    color: #a0aec0 !important;
}

[data-theme="dark"] #settingsModal .text-gray-500 {
    color: #a0aec0 !important;
}

[data-theme="dark"] #settingsModal .text-gray-400 {
    color: #718096 !important;
}

[data-theme="dark"] #settingsModal .hover\:bg-gray-100:hover {
    background-color: #2d2e4a !important;
}

[data-theme="dark"] #settingsModal .hover\:bg-gray-50:hover {
    background-color: #252640 !important;
}

/* 사이드바 */
[data-theme="dark"] #settingsSidebar {
    background-color: #191a2e !important;
}

[data-theme="dark"] .settings-tab-active {
    background-color: #252640 !important;
}

[data-theme="dark"] .settings-tab-active i {
    color: #a78bfa !important;
}

[data-theme="dark"] .settings-tab-active span {
    color: #e2e8f0 !important;
}

/* 섹션 배경 */
[data-theme="dark"] #settingsModal .bg-gray-50 {
    background-color: #252640 !important;
}

[data-theme="dark"] #settingsModal .bg-red-50 {
    background-color: rgba(239, 68, 68, 0.1) !important;
}

[data-theme="dark"] #settingsModal .border-red-200 {
    border-color: rgba(239, 68, 68, 0.25) !important;
}

[data-theme="dark"] #settingsModal .bg-red-100 {
    background-color: rgba(239, 68, 68, 0.15) !important;
}

/* 셀렉트/인풋 */
[data-theme="dark"] #settingsModal select,
[data-theme="dark"] #settingsModal .settings-select,
[data-theme="dark"] #settingsModal input[type="text"],
[data-theme="dark"] #settingsModal input[type="number"] {
    background-color: #2d2e4a !important;
    border-color: #3d3e5c !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] #settingsModal select option {
    background-color: #2d2e4a;
    color: #e2e8f0;
}

/* 버튼 */
[data-theme="dark"] #settingsModal .bg-white.border {
    background-color: #2d2e4a !important;
    border-color: #3d3e5c !important;
    color: #cbd5e0 !important;
}

[data-theme="dark"] #settingsModal .bg-white.border:hover {
    background-color: #363758 !important;
}

/* --- 설정 마법사 모달 --- */
[data-theme="dark"] #setupWizardCard {
    background-color: #1e1f3b !important;
}

[data-theme="dark"] #setupWizardModal .text-gray-800 {
    color: #e2e8f0 !important;
}

[data-theme="dark"] #setupWizardModal .text-gray-700 {
    color: #cbd5e0 !important;
}

[data-theme="dark"] #setupWizardModal .text-gray-500 {
    color: #a0aec0 !important;
}

[data-theme="dark"] #setupWizardModal .border-gray-200 {
    border-color: #3d3e5c !important;
}

[data-theme="dark"] #setupWizardModal .border-gray-300 {
    border-color: #3d3e5c !important;
}

[data-theme="dark"] #setupWizardModal .bg-gray-300 {
    background-color: #3d3e5c !important;
}

[data-theme="dark"] #setupWizardModal .hover\:bg-gray-50:hover {
    background-color: #252640 !important;
}

[data-theme="dark"] #setupWizardModal .bg-violet-100 {
    background-color: rgba(139, 92, 246, 0.15) !important;
}

[data-theme="dark"] #setupWizardModal .bg-amber-100 {
    background-color: rgba(245, 158, 11, 0.15) !important;
}

[data-theme="dark"] #setupWizardModal .text-xs.text-gray-500 {
    color: #8892a8 !important;
}

[data-theme="dark"] #setupWizardModal .bg-gray-50 {
    background-color: #252640 !important;
}

[data-theme="dark"] #setupWizardModal .text-gray-400 {
    color: #718096 !important;
}

[data-theme="dark"] #setupWizardModal .text-gray-600 {
    color: #a0aec0 !important;
}

/* --- 확인 모달 --- */
[data-theme="dark"] #confirmModal .bg-white {
    background-color: #1e1f36 !important;
}

[data-theme="dark"] #confirmModal .text-gray-800 {
    color: #e2e8f0 !important;
}

[data-theme="dark"] #confirmModal .text-gray-500 {
    color: #a0aec0 !important;
}

[data-theme="dark"] #confirmModal .bg-gray-100 {
    background-color: #2d2e4a !important;
    color: #cbd5e0 !important;
}

[data-theme="dark"] #confirmModal .bg-gray-100:hover {
    background-color: #363758 !important;
}

/* --- 제목 수정 모달 --- */
[data-theme="dark"] #editTitleModal .bg-white {
    background-color: #1e1f36 !important;
}

[data-theme="dark"] #editTitleModal .text-gray-800 {
    color: #e2e8f0 !important;
}

[data-theme="dark"] #editTitleModal input {
    background-color: #2d2e4a !important;
    border-color: #3d3e5c !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] #editTitleModal .bg-gray-100 {
    background-color: #2d2e4a !important;
    color: #cbd5e0 !important;
}

/* --- 로그인 모달 --- */
[data-theme="dark"] #internalLoginModal .bg-white {
    background-color: #1e1f36 !important;
}

[data-theme="dark"] #internalLoginModal .text-gray-800 {
    color: #e2e8f0 !important;
}

[data-theme="dark"] #internalLoginModal .text-gray-600 {
    color: #a0aec0 !important;
}

[data-theme="dark"] #internalLoginModal .text-gray-500 {
    color: #a0aec0 !important;
}

[data-theme="dark"] #internalLoginModal input {
    background-color: #2d2e4a !important;
    border-color: #3d3e5c !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] #internalLoginModal .bg-gray-50 {
    background-color: #252640 !important;
}

[data-theme="dark"] #internalLoginModal .border-gray-200 {
    border-color: #3d3e5c !important;
}

[data-theme="dark"] #internalLoginModal .bg-gray-100 {
    background-color: #2d2e4a !important;
    color: #cbd5e0 !important;
}

/* --- 리퍼럴 모달 --- */
[data-theme="dark"] #referralModal .bg-white {
    background-color: #1e1f36 !important;
}

[data-theme="dark"] #referralModal .text-gray-800,
[data-theme="dark"] #referralModal .text-gray-700 {
    color: #e2e8f0 !important;
}

[data-theme="dark"] #referralModal .text-gray-500,
[data-theme="dark"] #referralModal .text-gray-400,
[data-theme="dark"] #referralModal .text-gray-600 {
    color: #a0aec0 !important;
}

[data-theme="dark"] #referralModal .bg-gray-50 {
    background-color: #252640 !important;
}

[data-theme="dark"] #referralModal .border-gray-200,
[data-theme="dark"] #referralModal .border-gray-100 {
    border-color: #3d3e5c !important;
}

[data-theme="dark"] #referralModal input {
    background-color: #2d2e4a !important;
    border-color: #3d3e5c !important;
    color: #e2e8f0 !important;
}

/* 쿠폰 박스 다크모드 */
[data-theme="dark"] #referralModal .coupon-box {
    background: #252640 !important;
    border-color: #3d3e5c !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] #referralModal .coupon-part.top {
    background: #2d2e4a !important;
}

[data-theme="dark"] #referralModal .coupon-dashed {
    border-left-color: #3d3e5c !important;
}

[data-theme="dark"] #referralModal .coupon-cut {
    background: #1e1f36 !important;
    border-color: #3d3e5c !important;
}

/* --- About 모달 --- */
[data-theme="dark"] #aboutModal .bg-white {
    background-color: #1e1f36 !important;
}

[data-theme="dark"] #aboutModal .text-gray-800 {
    color: #e2e8f0 !important;
}

[data-theme="dark"] #aboutModal .text-gray-700 {
    color: #cbd5e0 !important;
}

[data-theme="dark"] #aboutModal .text-gray-600 {
    color: #a0aec0 !important;
}

[data-theme="dark"] #aboutModal .text-gray-500 {
    color: #a0aec0 !important;
}

[data-theme="dark"] #aboutModal .bg-gray-50 {
    background-color: #252640 !important;
}

[data-theme="dark"] #aboutModal .border-gray-200 {
    border-color: #3d3e5c !important;
}

/* --- 프로필 모달 --- */
[data-theme="dark"] #profileModal .bg-white {
    background-color: #1e1f36 !important;
}

[data-theme="dark"] #profileModal .text-gray-800 {
    color: #e2e8f0 !important;
}

[data-theme="dark"] #profileModal .text-gray-700 {
    color: #cbd5e0 !important;
}

[data-theme="dark"] #profileModal .text-gray-600,
[data-theme="dark"] #profileModal .text-gray-500 {
    color: #a0aec0 !important;
}

[data-theme="dark"] #profileModal .bg-gray-50 {
    background-color: #252640 !important;
}

[data-theme="dark"] #profileModal .border-gray-200 {
    border-color: #3d3e5c !important;
}

[data-theme="dark"] #profileModal .border-gray-100 {
    border-color: #2d2e4a !important;
}

[data-theme="dark"] #profileModal input,
[data-theme="dark"] #profileModal select,
[data-theme="dark"] #profileModal textarea {
    background-color: #2d2e4a !important;
    border-color: #3d3e5c !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] #profileModal .bg-gray-100 {
    background-color: #2d2e4a !important;
    color: #cbd5e0 !important;
}

[data-theme="dark"] #profileModal .hover\:bg-gray-50:hover {
    background-color: #252640 !important;
}

/* --- 피드백 모달 --- */
[data-theme="dark"] #feedbackModal .bg-white {
    background-color: #1e1f36 !important;
}

[data-theme="dark"] #feedbackModal .text-gray-800 {
    color: #e2e8f0 !important;
}

[data-theme="dark"] #feedbackModal .text-gray-500 {
    color: #a0aec0 !important;
}

[data-theme="dark"] #feedbackModal textarea {
    background-color: #2d2e4a !important;
    border-color: #3d3e5c !important;
    color: #e2e8f0 !important;
}

/* --- 마크다운 콘텐츠 --- */
[data-theme="dark"] .markdown-content {
    color: #e2e8f0 !important;
}

[data-theme="dark"] .markdown-content h1,
[data-theme="dark"] .markdown-content h2,
[data-theme="dark"] .markdown-content h3 {
    color: #f7fafc !important;
}

[data-theme="dark"] .markdown-content a {
    color: #90cdf4 !important;
}

[data-theme="dark"] .markdown-content blockquote {
    border-left-color: #4a5568 !important;
    color: #a0aec0 !important;
    background-color: rgba(45, 46, 74, 0.5) !important;
}

[data-theme="dark"] .markdown-content code:not(pre code) {
    background-color: #2d2e4a !important;
    color: #f6ad55 !important;
}

[data-theme="dark"] .markdown-content pre {
    background-color: #0d1117 !important;
    border-color: #2d2e4a !important;
}

[data-theme="dark"] .markdown-content table {
    border-color: #3d3e5c !important;
}

[data-theme="dark"] .markdown-content th {
    background-color: #2d2e4a !important;
    color: #e2e8f0 !important;
    border-color: #3d3e5c !important;
}

[data-theme="dark"] .markdown-content td {
    border-color: #3d3e5c !important;
    color: #cbd5e0 !important;
}

[data-theme="dark"] .markdown-content tr:nth-child(even) td {
    background-color: rgba(45, 46, 74, 0.3) !important;
}

[data-theme="dark"] .markdown-content hr {
    border-color: #3d3e5c !important;
}

[data-theme="dark"] .markdown-content strong {
    color: #f7fafc !important;
}

/* --- 토큰 사용량 --- */
[data-theme="dark"] .token-usage-info {
    background-color: #252640 !important;
    border-color: #3d3e5c !important;
}

[data-theme="dark"] .token-usage-header {
    color: #a0aec0 !important;
}

[data-theme="dark"] .token-usage-details {
    border-top-color: #3d3e5c !important;
    color: #a0aec0 !important;
}

/* --- 도구 인디케이터 --- */
[data-theme="dark"] .tool-indicator {
    background-color: #252640 !important;
    border-color: #3d3e5c !important;
}

[data-theme="dark"] .tool-indicator .text-gray-600 {
    color: #a0aec0 !important;
}

[data-theme="dark"] .tool-result-box {
    background-color: #1e1f36 !important;
    border-color: #3d3e5c !important;
}

[data-theme="dark"] .tool-result-box .text-gray-700 {
    color: #cbd5e0 !important;
}

/* --- 소스 뱃지 --- */
[data-theme="dark"] .source-tooltip {
    background-color: #252640 !important;
    border-color: #3d3e5c !important;
    color: #cbd5e0 !important;
}

@media (min-width: 769px) {
    [data-theme="dark"] .source-tooltip::after {
        border-top-color: #252640 !important;
    }
}

/* --- 토스트 --- */
[data-theme="dark"] .toast {
    background-color: #252640 !important;
    color: #e2e8f0 !important;
    border-color: #3d3e5c !important;
}

/* --- 멘션 뱃지 --- */
[data-theme="dark"] .mention-badge {
    background-color: #2d2e4a !important;
    border-color: #3d3e5c !important;
    color: #cbd5e0 !important;
}

/* --- 스크롤바 --- */
[data-theme="dark"] .scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
}

[data-theme="dark"] .scrollbar-thin::-webkit-scrollbar-thumb {
    background: #3d3e5c;
}

[data-theme="dark"] .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: #4a5568;
}

/* --- 전송 버튼 (보라색 유지, 약간 밝게) --- */
[data-theme="dark"] .bg-teal.text-white {
    background-color: #5a4f8b !important;
}

[data-theme="dark"] .bg-teal.text-white:hover,
[data-theme="dark"] .hover\:bg-teal-dark:hover {
    background-color: #6d5da3 !important;
}

/* --- 하단 고정 문구 --- */
[data-theme="dark"] .text-gray-400.text-xs {
    color: #4a5568 !important;
}

/* --- 보라빛 글로우 배경 효과 (다크에서 약간 더 어두운 톤) --- */
[data-theme="dark"] .bg-glow::before {
    background: radial-gradient(circle, rgba(139, 92, 246, 0.12) 0%, rgba(139, 92, 246, 0.06) 30%, transparent 60%) !important;
}

[data-theme="dark"] .bg-glow::after {
    background: radial-gradient(circle, rgba(167, 139, 250, 0.1) 0%, rgba(167, 139, 250, 0.04) 40%, transparent 70%) !important;
}

/* --- 크레딧 뱃지 (다크) --- */
[data-theme="dark"] .bg-amber-50 {
    background-color: rgba(245, 158, 11, 0.12) !important;
}

[data-theme="dark"] .border-amber-200 {
    border-color: rgba(245, 158, 11, 0.25) !important;
}

[data-theme="dark"] .text-amber-700 {
    color: #fbbf24 !important;
}

/* --- Teal 배경/텍스트 유틸 (사이드바 Beta뱃지 등) --- */
[data-theme="dark"] .bg-teal\/10 {
    background-color: rgba(90, 79, 139, 0.2) !important;
}

[data-theme="dark"] .text-teal {
    color: #a78bfa !important;
}

[data-theme="dark"] .hover\:text-teal:hover {
    color: #c4b5fd !important;
}

[data-theme="dark"] .hover\:bg-teal\/10:hover {
    background-color: rgba(90, 79, 139, 0.25) !important;
}

/* --- 코드 하이라이팅 다크 테마 --- */
[data-theme="dark"] .hljs {
    background: #0d1117 !important;
    color: #e6edf3 !important;
}

[data-theme="dark"] .hljs-keyword {
    color: #ff7b72 !important;
}

[data-theme="dark"] .hljs-string {
    color: #a5d6ff !important;
}

[data-theme="dark"] .hljs-number {
    color: #79c0ff !important;
}

[data-theme="dark"] .hljs-function {
    color: #d2a8ff !important;
}

[data-theme="dark"] .hljs-title {
    color: #d2a8ff !important;
}

[data-theme="dark"] .hljs-params {
    color: #e6edf3 !important;
}

[data-theme="dark"] .hljs-comment {
    color: #8b949e !important;
}

[data-theme="dark"] .hljs-built_in {
    color: #ffa657 !important;
}

[data-theme="dark"] .hljs-literal {
    color: #79c0ff !important;
}

[data-theme="dark"] .hljs-type {
    color: #ffa657 !important;
}

[data-theme="dark"] .hljs-attr {
    color: #79c0ff !important;
}

[data-theme="dark"] .hljs-selector-class {
    color: #7ee787 !important;
}

[data-theme="dark"] .hljs-selector-tag {
    color: #7ee787 !important;
}

[data-theme="dark"] .hljs-meta {
    color: #79c0ff !important;
}

/* 코드 블록 복사 버튼 */
[data-theme="dark"] .code-block-header {
    background-color: #161b22 !important;
    border-color: #2d2e4a !important;
    color: #a0aec0 !important;
}

[data-theme="dark"] .copy-code-btn {
    color: #a0aec0 !important;
}

[data-theme="dark"] .copy-code-btn:hover {
    color: #e2e8f0 !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* --- 블로그 제보 모달 (다크) --- */
[data-theme="dark"] #blogReportModal .bg-white {
    background-color: #1e1f36 !important;
}

[data-theme="dark"] #blogReportModal .text-gray-800 {
    color: #e2e8f0 !important;
}

[data-theme="dark"] #blogReportModal .text-gray-500 {
    color: #a0aec0 !important;
}

[data-theme="dark"] #blogReportModal .text-gray-400 {
    color: #718096 !important;
}

[data-theme="dark"] #blogReportModal .text-gray-700 {
    color: #cbd5e0 !important;
}

[data-theme="dark"] #blogReportModal .bg-gray-50 {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] #blogReportModal .border-gray-200 {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] #blogReportModal input,
[data-theme="dark"] #blogReportModal textarea {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #cbd5e0 !important;
}

[data-theme="dark"] #blogReportModal input::placeholder,
[data-theme="dark"] #blogReportModal textarea::placeholder {
    color: #4a5568 !important;
}

[data-theme="dark"] #blogReportModal .hover\:bg-gray-100:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] #blogReportModal .bg-red-50 {
    background-color: rgba(239, 68, 68, 0.15) !important;
}

[data-theme="dark"] #blogReportModal .bg-green-50 {
    background-color: rgba(34, 197, 94, 0.15) !important;
}