/* 기본 글씨체(VCworks와 동일) */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');
body * {
    font-family: 'Pretendard', sans-serif !important;
    font-size: 14px !important;
}

/* "Built with Chainlit" 문구 숨기기 */
.watermark {
    display: none !important;
}

/* 로그인 페이지 컴포넌트 정렬 */
@media (min-width: 1024px) { /* 전체 요소 */
    .lg\:grid-cols-2 {
        grid-template-columns: none !important;
    }
}

body .text-2xl.font-bold * { /* 로그인 페이지 안내문(VCworks의 로그인 정보를 사용합니다) */
    font-size: 1.25rem !important;
    line-height: 2rem !important;
}

/* 로그인 페이지 - 미로그인시 뜨는 버튼 커스터마이징 */
.w-full.max-w-xs .bg-red-50 { /* 버튼 설정 */
    display: none !important;
}
.w-full.max-w-xs .ml-3 { /* 글씨 정렬 정중앙 */
    margin-left: 0 !important;
}
.w-full.max-w-xs button { /* 로그인 버튼 설정 */
    width: 40rem;
    border-radius: var(--radius);
    border-width: 1px;
    padding: 1rem;
    background-color: #212529;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 20rem;
    color: white;
    margin-bottom: 1rem;
    margin-top: 0.5rem;
}
.w-full.max-w-xs button:hover { /* 로그인 버튼 hover */
    background-color: #514ACB !important;
}

/* 메인 컬러 */
.bg-primary {
    background-color: #212529 !important;
}
.bg-primary:hover {
    background-color: #514ACB !important;
}
*, :before, :after { /* 불필요해 보이는 강조 표시 삭제 */
    --tw-ring-inset: none !important;
}
.light .bg-sidebar { /* 사이드바 */
    background-color: #F8F9FA !important;
    border: 1.5px solid #DEE2E6 !important;
}
.light .bg-accent { /* 채팅 입력바 */
    background-color: #F8F9FA !important;
    border: 1.5px solid #DEE2E6 !important;
}

/* 소개 문구 */
img.rounded-full[src="/public/favicon.png"] { /* 아이콘 */
    border-radius: 0px !important;
}
h1.scroll-m-20.text-4xl.font-extrabold.tracking-tight.lg\:text-5xl { /* ChatVC */
    font-weight: 700 !important;
    font-size: 25px !important;
    line-height: 28px !important;
}
/* 소개 문구 */
body > #root .prose:not(.message-content .prose) * {
    text-align: center !important;
    line-height: 26px !important;
}
.light body > #root .prose:not(.message-content .prose) * {
    color: #343A40 !important;
}
div[data-orientation="horizontal"].shrink-0.bg-border {
    margin-top: 20px !important;
}
/* 파일 업로드 버튼 숨기기 -> 파일 컨텍스트 추가 작업은 RAG 이후, 안정화되었을 때 */
#upload-button {
    display: none !important;
}

/* 표 형식 */
td, th { /* 테이블에서 자동 줄바꿈 방지 */
    white-space: nowrap !important;
}
/* 테이블 각 행 높이 */
tr[node="[object Object]"] {
    line-height: 0.25rem !important;
}

body * {
    text-align: left !important;
}

/* 검색창 디자인 */
.data-\[selected\=\'true\'\]\:bg-accent[data-selected=true] {
    background-color: unset !important;
}

/* 코드 형식 */
span.text-sm.text-muted-foreground {
  font-size: 0 !important;
}

/* 스크롤바 */
::-webkit-scrollbar {
    width: 6px; /* 세로 스크롤바 */
    height: 6px; /* 가로 스크롤바 */
}
/* 다크모드 */
.dark ::-webkit-scrollbar-thumb {
    background: #404040;
    border-radius: 10px;
}
.dark ::-webkit-scrollbar-thumb:hover {
    background: #5A5A5A;
}
/* 라이트모드 */
.light ::-webkit-scrollbar-thumb {
    background: #e9ecef;
    border-radius: 10px;
}
.light ::-webkit-scrollbar-thumb:hover {
    background: #ced5da;
}

/* 링크 색상 변경 */
.message-content a {
  color: #0B57D0 !important;
  text-decoration: underline !important;
}

.message-content a[href^="https://guide.vcworks.kr"] {
  display: inline-flex;     /* 아이콘과 링크 사이 개행으로 끊어짐 방지 */
  align-items: center;     
}

/* 가이드 링크에 아이콘 적용 */
.message-content a[href^="https://guide.vcworks.kr"]::before {
  
  content: '';
  display: inline-block;    /* 아이콘을 위한 공간 확보 */
  width: 15px !important;  
  height: 15px !important; 
  margin-right: 3px;
  margin-left: 5px;        /* 아이콘과 텍스트 사이 여백 */
  vertical-align: middle;  /* 세로 정렬 */
  background-image: url('https://guide.vcworks.kr/assets/img/favicons/favicon-32x32.png');
  background-size: contain;   /* 크기에 맞춰 이미지를 조절 */
  background-repeat: no-repeat; /* 이미지 반복 방지 */
  background-position: center;  /* 이미지 중앙 정렬 */
}

/* 채팅창 하단 고정 */
.flex.flex-col.-mt-\[60px\].gap-4.w-full.flex-grow.items-center.justify-center.welcome-screen.mx-auto.transition-opacity.duration-500.delay-100.opacity-100 {
    position: relative !important;
}

.welcome-screen .bg-accent.rounded-3xl.p-3.px-4.w-full.min-h-24.flex.flex-col {
    position: absolute !important;
    bottom: 0 !important;
}

/* 모바일 설정 */
@media screen and (max-width: 768px) {
    /* 모바일에서 테마 설정(light/dark) 버튼 숨기기 */
    #theme-toggle {
        display: none;
    }
    /* 모바일에서 '사이드바 닫기' 안내문 삭제 */
    [data-radix-popper-content-wrapper][data-popup-id="close-sidebar-tooltip"] {
        display: none;
    }
     /* 모바일 첫화면 채팅창 크기 (아이폰/안드로이드 일치) */
    .bg-accent.rounded-3xl.p-3.px-4.w-full.min-h-24.flex.flex-col {
        height: 50px;
    }
}

#chat-input::placeholder {
    color: #868E96 !important;
    font-weight: 300 !important;
}

/* CoT 설정 */
.ai-message > span.inline-block:has(.animate-pulse) {
    display: none !important;
}
.message-content.flex.flex-col.gap-2 p.flex.flex-col.gap-2 .text-lg.font-semibold.leading-none.tracking-tight {
    display: none !important;
}

/* p.loading-shimmer[id^="step-"] {

    animation: none !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;

    opacity: 1 !important;
    color: #1e293b !important;
    font-weight: 600 !important;
    

    display: flex !important;
    align-items: center !important;
} */

/* =========================================================
   1. 텍스트 스타일 (항상 적용)
   ========================================================= */
/* [id^="step-"] : id가 "step-"으로 시작하는 모든 요소를 선택 */
div[data-step-type="tool"] button[id^="step-"] {
    animation: none !important;  
    /* 1. 배경(그라데이션) 제거 */
    background: none !important;
    
    /* 2. 글자를 투명하게 만들었던 설정을 초기화 (가장 중요) */
    -webkit-text-fill-color: initial !important;
    
    /* 3. 배경을 글자 모양으로 자르는 설정 해제 */
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    /*         
     opacity: 1 !important;         
      
    font-weight: 600 !important;
    text-shadow: none !important;
    display: flex;
    align-items: center; */
}  


div[data-step-type="tool"] .ai-message:has(.animate-pulse) button[id^="step-"]:not([id="step-답변 생성 과정 표시"]):not([id="step-응답 생성 완료"]):not([id="step-소요 시간"])::before {
    content: "";
    display: inline-block;
    
    /* 이미지 크기 */
    width: 17px;
    height: 17px;
    margin-right: 8px;

    /* 이미지 경로 */
    background-image: url("assets/loading_spinner.svg");
    
    /* 회전 애니메이션 (1초에 한 바퀴) */
    animation: spin-logo 1s linear infinite;

    /* 이미지 배치 */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

}

/* 회전 키프레임 */
@keyframes spin-logo {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}