﻿/* chatbot.css의 영향을 방지하기 위해 기본 스타일 초기화 가깝게 설정 */
#chatbot-new-container {
    font-family: 'Inter', sans-serif !important;
}

#chatbot-new-container ::-webkit-scrollbar {
    width: 6px;
}

#chatbot-new-container ::-webkit-scrollbar-track {
    background: transparent;
}

#chatbot-new-container ::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 10px;
}

.dark #chatbot-new-container ::-webkit-scrollbar-thumb {
    background: #334155;
}

/* AI 응답(HTML) 내 헤더 폰트 사이즈 축소 */
#chatbot-new-container h1 { font-size: 1.30rem !important; margin-top: 1rem; margin-bottom: 0.5rem; font-weight: 700; }
#chatbot-new-container h2 { font-size: 1.20rem !important; margin-top: 0.8rem; margin-bottom: 0.4rem; font-weight: 700; }
#chatbot-new-container h3 { font-size: 1.15rem !important; margin-top: 0.6rem; margin-bottom: 0.3rem; font-weight: 700; }
#chatbot-new-container h4 { font-size: 1.10rem !important; margin-top: 0.4rem; margin-bottom: 0.2rem; font-weight: 700; }

/* 기존 chatbot.css 또는 테마의 h1-h4 영향 최소화 */
#chatbot-new-container .chatgpt-thread h1,
#chatbot-new-container .chatgpt-thread h2,
#chatbot-new-container .chatgpt-thread h3,
#chatbot-new-container .chatgpt-thread h4 {
    line-height: 1.4;
}
/* Typing Animation */
.typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-top: 4px;
}

.typing span {
    width: 5px;
    height: 5px;
    background: #cbd5e1; /* slate-300 */
    border-radius: 50%;
    display: inline-block;
    animation: typing 2.5s infinite ease-in-out both;
}

.typing span:nth-child(2) { animation-delay: 0.4s; }
.typing span:nth-child(3) { animation-delay: 0.8s; }

@keyframes typing {
    0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
    40% { opacity: 0.8; transform: translateY(-1px); }
}

#chatbot-new-container .chat-bubble table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

#chatbot-new-container .chat-bubble pre {
    white-space: pre-wrap;
    word-break: break-all;
    max-width: 100%;
    overflow-x: auto;
}
