/*
 * SI 임베드용 챗봇 전용 스타일 오버라이드.
 * viewer.css 위에 로드되어, 챗봇 패널을 iframe 전체 화면으로 고정시킨다.
 * 플로팅 버튼은 부모 페이지(embed.js 로더)가 그리므로 숨김.
 */

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    min-height: 0;
    background: transparent;
    overflow: hidden;
}

body.embed-chatbot-root {
    background: hsl(var(--st-bg));
}

/* 플로팅 버튼은 부모 DOM이 담당 */
.embed-chatbot-root .chatbot-floating-btn,
.embed-chatbot-root .chatbot-hint-bubble {
    display: none !important;
}

/* 챗봇 패널을 iframe 전체 화면으로 강제 (뷰포트 사이즈와 무관).
   주의: 모바일 임베드에서 모달/iframe이 사용자 visible 영역에 정확히 fit되는 것은
   여기 height: 100%가 아니라 embed.js의 visualViewport sync + body scroll-lock 조합에
   의존한다. iOS Chrome은 100dvh / -webkit-fill-available가 visual viewport와 어긋나
   키보드 시 모달이 visible 밖으로 밀려난다. 이 height: 100%를 100vh / 100dvh 등으로
   바꿔도 그 문제는 해결되지 않으니 embed.js 쪽 로직을 먼저 확인할 것. */
.embed-chatbot-root .chatbot-panel {
    display: flex !important;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: hsl(var(--st-bg));
    z-index: 1;
}

/* 헤더(닫기 버튼)는 모바일 풀스크린일 때만 필요.
   데스크탑은 부모 페이지의 플로팅 버튼을 다시 눌러 닫거나 ESC로 닫으니 중복 UI 제거.
   iframe 내부에서는 부모 뷰포트를 알 수 없어 미디어 쿼리로 분기 불가 →
   embed.js가 쿼리 파라미터 fs=1을 전달하고, 서버가 body.embed-fullscreen 클래스로 반영. */
.embed-chatbot-root .chatbot-panel-header {
    display: none !important;
}

.embed-chatbot-root.embed-fullscreen .chatbot-panel-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid hsl(var(--st-line));
    flex-shrink: 0;
}

/* 타이틀(아이콘+'상담' 또는 브랜딩 로고+업체명)의 크기·정렬은 viewer.css 에서 모바일
   (≤768px)에만 걸려 있어, PC 폭에서 풀스크린으로 열리는 웹 상담 URL(fs=2)에서는 폰트
   크기 지정이 없어 텍스트가 거대해지고 아이콘과 겹쳤다. 임베드 풀스크린 컨텍스트에서는
   뷰포트 폭과 무관하게 모바일과 동일한 크기·한 줄 정렬로 고정한다. */
.embed-chatbot-root.embed-fullscreen .chatbot-header-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    color: hsl(var(--st-fg));
}

/* 독립 웹 상담(fs=2) 브랜딩 헤더 — 운영자 로고 + 업체명.
   로고는 가로형(워드마크)일 수 있어 원형 크롭(cover)하면 잘린다.
   viewer.html 상단 브랜딩 바와 동일하게 원본 비율(contain)로 높이만 맞춘다. */
.embed-chatbot-root .chatbot-header-logo {
    height: 32px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    flex-shrink: 0;
}

.embed-chatbot-root .chatbot-header-brand-name {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 독립 웹 상담(fs=2) 헤더 오른쪽 '홈페이지로 이동' 버튼. */
.embed-chatbot-root .chatbot-header-home {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    padding: 6px 12px;
    border: 1px solid hsl(var(--st-line));
    border-radius: 8px;
    font-size: 13px;
    color: hsl(var(--st-fg) / 0.7);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s, color 0.15s;
}

.embed-chatbot-root .chatbot-header-home:hover {
    background: hsl(var(--st-fg) / 0.05);
    color: hsl(var(--st-fg));
}

/* 독립 웹 상담(fs=2)은 최상위 탭 전체화면으로 열려, 팝업(460px)용 UI가 넓은 화면에서
   과하게 늘어난다. 넓은 화면에서는 상담창을 가운데 고정폭 컬럼(양옆 여백 + 얇은 경계선)으로
   제약해 문서처럼 읽기 좋게 만든다. 좁은 화면(모바일·팝업)은 기존대로 꽉 채운다. */
@media (min-width: 769px) {
    .embed-web-consult .chatbot-panel {
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
        border-left: 1px solid hsl(var(--st-line));
        border-right: 1px solid hsl(var(--st-line));
    }
}

/* iframe 내부 스크롤바는 얇게 — 좁은 위젯 공간에서 기본 OS 스크롤바가 과도한 폭을 차지하지 않도록.
   embed.css는 embed_chatbot.html에서만 로드되므로 전역 셀렉터로 적용해도 안전.
   !important로 기존 viewer.css의 선언을 확실하게 덮어쓴다. */
::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}

::-webkit-scrollbar-track {
    background: transparent !important;
}

::-webkit-scrollbar-thumb {
    background: hsl(var(--st-fg) / 0.2) !important;
    border-radius: 3px !important;
}

::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--st-fg) / 0.35) !important;
}

/* Firefox는 scrollbar-width 속성이 상속되지 않아 모든 요소에 적용 */
* {
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--st-fg) / 0.2) transparent;
}