html,body{margin:0; padding:0;width:100%;height:100%;overflow:hidden;background-color:white;font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', Meiryo, sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
input:focus, textarea:focus{outline:none; outline-offset:0;}
a,textarea{text-decoration:none; color:inherit;}
*{margin:0;padding:0;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);}


::-webkit-scrollbar {
width:2px;
}


::-webkit-scrollbar-thumb {
background-color: var(--aidex-scrollbar-thumb-color, rgba(0,0,0,0.2));
border-radius:10px;
}


::-webkit-scrollbar-track {
background-color:none;
}


::-ms-scrollbar {
width:10px;
}


::-ms-scrollbar-thumb {
background-color:#333;
border-radius:10px;
}


.messageStyle{margin:10px;height:auto;overflow:hidden;}

/* 채팅 시작/종료 버튼 - 환영 메시지 바로 아래 한 번만 표시된다 */
.aidexSessionButtons{display:flex; gap:8px; justify-content:center; margin:12px 10px;}
.aidexSessionBtn{flex:1; max-width:120px; padding:6px 12px; border-radius:16px; font-size:12px; font-weight:bold; cursor:pointer; transition:opacity 0.2s;}
.aidexSessionBtn:hover{opacity:0.85;}
/* "시작" 버튼: 관리자가 정한 브랜드색(전송버튼과 같은 --aidex-send-btn-color)을
   배경으로 쓴다. 이 색은 항상 흰 아이콘/글자와 짝을 이루도록 설계된 변수라서
   --aidex-bubble-agent-bg(밝은 회색/흰색 계열이라 흰 글자와 대비가 거의 없었음)와
   달리 밝은 배경이든 다크모드든 흰 글자와의 대비가 항상 보장된다. */
.aidexSessionBtnStart{background:var(--aidex-send-btn-color, #4a6baf); color:#ffffff; border:none;}
/* "종료" 버튼: 테두리만 있는 보조 버튼. 라이트모드 기본값은 진한 회색 테두리/글자,
   다크모드에서는 밝은 회색으로 바꿔 항상 어두운/밝은 배경 양쪽에서 또렷이 보이게 한다. */
.aidexSessionBtnEnd{background:transparent; color:#555555; border:1.5px solid #999999;}
.aidex-dark-mode-use-on .aidexSessionBtnEnd{color:#e3e3e3; border-color:#777777;}

/* 시스템 메시지(채팅 시작/종료/이탈 안내) - 말풍선 없이 가운데 정렬된 작은 안내문 */
.aidexSystemMessage{text-align:center; color:#999; font-size:12px; margin:12px 10px; padding:4px 0;}
.fade{opacity:0;animation:fadeIn 0.5s ease-in-out forwards;}

/* animation_use=0 이면 등장 애니메이션 없이 바로 표시 */
.aidex-animation-use-off .fade{animation:none;opacity:1;}

.messageView1_left{float:left;width:calc(var(--aidex-avatar-size, 34px) + 8px);height:var(--aidex-avatar-size, 34px);}
.messageView1_right{float:right;width:calc(var(--aidex-avatar-size, 34px) + 8px);height:var(--aidex-avatar-size, 34px);text-align:right;}

/* 아바타 표시/숨김(관리자 설정) */
.aidex-show-agent-avatar-off .messageView1_left{display:none;}
.aidex-show-customer-avatar-off .messageView1_right{display:none;}
.aidex-show-agent-avatar-off .messageView2V_left{max-width:100%;}
.aidex-show-customer-avatar-off .messageView2V_right{max-width:100%;}

.messageView2V_left{float:left;max-width:calc(100% - 84px);height:auto;overflow:hidden;}
.messageView2_left{float:left;max-width:calc(100% - 0px);height:auto;overflow:hidden;}
.messageView2V_right{float:right;max-width:calc(100% - 84px);height:auto;overflow:hidden;}
.messageView2_right{float:right;max-width:calc(100% - 0px);height:auto;overflow:hidden;}

.messageContent_left{padding:10px;max-width:100%;min-height:20px;border-radius:5px 15px 15px 15px;white-space:pre-wrap;word-break:break-all;overflow-wrap:break-word;font-size:var(--aidex-font-size, 14px);background:var(--aidex-bubble-agent-bg, #F3F4F8);color:var(--aidex-bubble-agent-text-color, #222222);}
.messageContent_right{padding:10px;max-width:100%;min-height:20px;border-radius:15px 5px 15px 15px;white-space:pre-wrap;word-break:break-all;overflow-wrap:break-word;font-size:var(--aidex-font-size, 14px);background:var(--aidex-bubble-customer-bg, #F3F4F8);color:var(--aidex-bubble-customer-text-color, #222222);}

.messagePicture_left{padding:10px;max-width:100%;min-height:20px;border-radius:5px 15px 15px 15px;background:#EDF1F4;overflow:hidden;}
.messagePicture_right{padding:10px;max-width:100%;min-height:20px;border-radius:15px 5px 15px 15px;background:#EDF1F4;overflow:hidden;}

.messageView2VT1{height:25px;line-height:25px;font-size:12px;}
.messageView2VT2{margin:0 0 0 10px;font-size:11px;color:var(--aidex-timestamp-color, #ccc);}

/* 메시지 발송시간 표시/숨김(관리자 설정) */
.aidex-show-timestamp-off .messageView2VT2{display:none;}

.avatar{width:var(--aidex-avatar-size, 34px);height:var(--aidex-avatar-size, 34px);border-radius:50%;}

.pictureStyle{width:100%;border-radius:5px;}

.fl{float:left;}
.fr{float:right;}

.bg1{background:#f1f1f1;color:black;}
.bg2{background:#e3effd;color:black;}




.chatContainer{display:flex;flex-direction:column;width:100%;height:100%;background-color:#f5f5f5;overflow:hidden;position:relative;}

/* 다크모드(관리자 설정) */
.aidex-dark-mode-use-on .chatContainer{background-color:#1e1f22;}
.aidex-dark-mode-use-on .chatContentView{background-color:#1e1f22;}
.aidex-dark-mode-use-on .messageContent_left{background:#2b2d31;color:#e3e3e3;}
.aidex-dark-mode-use-on .messageContent_right{background:#3a5a9f;color:#ffffff;}
.aidex-dark-mode-use-on .chatInput_pc,
.aidex-dark-mode-use-on .chatInput_mb{background-color:#2b2d31;border-top:1px solid #444;}
.aidex-dark-mode-use-on .textContent{background-color:#1e1f22;color:#e3e3e3;border-color:#444;}

.chatHeader_pc{height:var(--aidex-header-height, 50px);color:var(--aidex-header-text-color, #ffffff);background-color:var(--aidex-header-bg-color, #4a6baf);overflow:hidden;}
.chatHeader_mb{height:35px;color:var(--aidex-header-text-color, #ffffff);background-color:var(--aidex-header-bg-color, #4a6baf);overflow:hidden;}

.chatHeaderP_pc{float:left;margin:8px 10px;width:34px;height:34px;border-radius:10px;}
.chatHeaderP_mb{float:left;margin:2px 5px;width:30px;height:30px;border-radius:10px;}

.chatHeaderT_pc{float:left;padding:15px 0px;width:calc(100% - 54px);height:20px;line-height:20px;font-size:15px;font-weight:500;}
.chatHeaderT_mb{float:left;padding:10px 0px;width:calc(100% - 40px);height:15px;line-height:15px;font-size:15px;font-weight:500;}

.chatContentView{flex:1;padding:5px 0px;overflow-x:hidden;overflow-y:auto;background-color:#f9f9f9;}

.cstime{font-size: 13px;}
@keyframes fadeIn{
from{ opacity:0; transform:translateY(10px); }
to{ opacity:1; transform:translateY(0); }
}

.chatInput_pc{display:flex;padding:15px;border-top:1px solid #eee;background-color:white;}
.chatInput_mb{display:flex;padding:5px 8px;border-top:1px solid #eee;background-color:white;}

/* 이미지 전송 기능 꺼짐(관리자 설정) */
.aidex-image-upload-use-off .sendPictureView{display:none;}

.sendPictureView{display:flex;margin-right:10px;text-align:center;}

.sendPicture{width:38px;height:38px;border-radius:50%;background-color:transparent;border:none;color:#666;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.3s;}

.sendPicture:hover{background-color:#f0f0f0;color:var(--aidex-header-bg-color, #4a6baf);transform:scale(1.1);}

.textContent{flex:1;border:1px solid var(--aidex-input-border-color, #ddd); border-radius:20px;padding:8px 15px;font-size:16px;outline:none;resize:none;height:20px;line-height:20px;transition:border 0.3s, background 0.3s, box-shadow 0.3s;font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', Meiryo, sans-serif;background-color:var(--aidex-input-bg-color, #ffffff);color:var(--aidex-input-text-color, #222222);}

.textContent:focus{border-color:var(--aidex-send-btn-color, #4a6baf);}

/* 입력창 스타일(관리자 기본설정 > 채팅창 디자인 설정 > 채팅 입력창 스타일) */

/* 각진 사각형 - 모서리를 거의 없애고 은은한 배경을 채운 카드형 */
.aidex-input-style-boxed .textContent{border-radius:8px;background-color:var(--aidex-surface-2, #f2f3f5);border-color:transparent;}
.aidex-input-style-boxed .textContent:focus{background-color:var(--aidex-input-bg-color, #ffffff);border-color:var(--aidex-send-btn-color, #4a6baf);box-shadow:0 0 0 3px rgba(0,0,0,0.04);}

/* 밑줄형 - 좌우/위 테두리 없이 아래쪽 선만 강조 */
.aidex-input-style-underline .textContent{border:none;border-bottom:2px solid var(--aidex-input-border-color, #ddd);border-radius:0;padding:8px 4px;background:transparent;}
.aidex-input-style-underline .textContent:focus{border-bottom-color:var(--aidex-send-btn-color, #4a6baf);}

/* 굵은 테두리형 - 테두리를 두껍게, 포커스 시 컬러 링 강조 */
.aidex-input-style-bordered .textContent{border-width:2px;border-radius:12px;}
.aidex-input-style-bordered .textContent:focus{box-shadow:0 0 0 3px rgba(74,107,175,0.15);}
.aidex-dark-mode-use-on.aidex-input-style-bordered .textContent:focus{box-shadow:0 0 0 3px rgba(255,255,255,0.12);}

.sendText{width:var(--aidex-send-btn-size, 40px);height:var(--aidex-send-btn-size, 40px);border-radius:50%; background-color:var(--aidex-send-btn-color, #4a6baf);color:white;border:none;margin-left:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.3s;}

.sendText:hover{background-color:#3a5a9f;transform:scale(1.05);}


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

.chatContentView::-webkit-scrollbar-track{
background:#f1f1f1;
}

.chatContentView::-webkit-scrollbar-thumb{
background: var(--aidex-scrollbar-thumb-color, #ccc);
border-radius:3px;
}

.chatContentView::-webkit-scrollbar-thumb:hover{
background:#aaa;
}

/* 일반채팅/관리자문의/예약채팅 탭 */
.aidexTabBar{display:flex; border-top:1px solid #eee; background:#fafafa;}
.aidexTabBtn{flex:1; padding:10px 4px; border:none; background:none; font-size:13px; color:#666; cursor:pointer; border-bottom:2px solid transparent; transition:all 0.2s;}
.aidexTabBtn:hover{color:var(--aidex-send-btn-color, #4a6baf);}
.aidexTabBtn.aidexTabActive{color:var(--aidex-send-btn-color, #4a6baf); font-weight:bold; border-bottom:2px solid var(--aidex-send-btn-color, #4a6baf);}
@media (max-width:360px){
.aidexTabBtn{font-size:11px; padding:8px 2px;}
}

/* 관리자 온라인 상태 표시 뱃지 */
.aidexAdminStatusDot{display:inline-block; width:8px; height:8px; border-radius:50%; margin-left:4px; vertical-align:middle;}
.aidexAdminStatusDot.aidexOnline{background:#2ecc71;}
.aidexAdminStatusDot.aidexOffline{background:#bbb;}

.aidexAdminStatusLabel{padding:4px 15px;font-size:11px;color:#888;background:#fafafa;border-top:1px solid #eee;}

/* 예약채팅 폼 */
.aidexReserveForm{display:flex; flex-direction:column; gap:8px; padding:12px 15px; background:white; border-top:1px solid #eee;}
.aidexReserveInput{width:100%; box-sizing:border-box; border:1px solid var(--aidex-input-border-color, #ddd); border-radius:6px; padding:8px 10px; font-size:16px; font-family:'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', Meiryo, sans-serif;}
.aidexReserveSubmit{padding:9px; border:none; border-radius:6px; background:var(--aidex-send-btn-color, #4a6baf); color:#fff; font-size:13px; cursor:pointer;}
.aidexReserveSubmit:hover{background:#3a5a9f;}

/* 관리자문의/예약채팅 탭 상단 공지사항(뉴스 티커) 배너 */
.aidexNoticeBanner{display:flex; align-items:center; gap:8px; padding:6px 12px; background:#fff8e6; border-top:1px solid #f0e0b0; border-bottom:1px solid #f0e0b0; overflow:hidden;}
.aidexNoticeBannerIcon{flex:none; color:#e0a300; font-size:12px;}
.aidexNoticeBannerTrack{flex:1; overflow:hidden; white-space:nowrap; position:relative; height:16px;}
.aidexNoticeBannerText{display:inline-block; white-space:nowrap; font-size:12px; color:#8a6d1f; position:absolute; left:100%; animation:aidexNoticeScroll 22s linear infinite;}
@keyframes aidexNoticeScroll{
    0%{left:100%;}
    100%{left:-100%;}
}

/* 타이핑 인디케이터("상담원이 입력 중...") - 상담원 말풍선과 같은 배경색을 그대로 써서
   테마 색상(관리자가 채팅창 디자인 설정에서 바꾼 색)이 자동으로 반영된다 */
.aidexTypingBubble{display:flex; align-items:center; gap:4px; padding:12px 14px !important; min-height:0 !important;}
.aidexTypingDot{width:6px; height:6px; border-radius:50%; background:currentColor; opacity:0.4; animation:aidexTypingBounce 1.2s infinite ease-in-out;}
.aidexTypingDot:nth-child(2){animation-delay:0.2s;}
.aidexTypingDot:nth-child(3){animation-delay:0.4s;}
@keyframes aidexTypingBounce{
    0%, 60%, 100%{opacity:0.4; transform:translateY(0);}
    30%{opacity:1; transform:translateY(-3px);}
}

/* 채팅창 애드센스 광고 오버레이 - 채팅 UI 전체를 덮고, 지정된 시간이 지나면
   서서히 사라지며 실제 채팅 화면을 드러낸다 */
.aidexAdOverlay{position:fixed; inset:0; z-index:9999; background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; transition:opacity 0.3s ease; padding:20px; box-sizing:border-box;}
.aidexAdOverlayHide{opacity:0; pointer-events:none;}
/* 애드센스의 반응형(auto/full-width-responsive) 광고 단위는 부모 요소의 실제 너비를
   기준으로 자기 크기를 계산하므로, flex가 아니라 폭이 명확한 일반 블록 요소로 둔다.
   (구글 공식 가이드: <ins class="adsbygoogle" style="display:block" ...> 그대로) */
.aidexAdOverlayInner{width:100%; max-width:500px; text-align:center;}
.aidexAdCountdown{position:absolute; top:12px; right:14px; min-width:28px; height:28px; padding:0 6px; background:rgba(0,0,0,0.55); color:#fff; font-size:13px; font-weight:bold; border-radius:14px; display:flex; align-items:center; justify-content:center;}
.aidexAdImage{max-width:90vw; max-height:70vh; border-radius:8px; box-shadow:0 4px 16px rgba(0,0,0,0.15); cursor:pointer;}

/* 관리자문의/예약채팅 탭 클릭 시 이름을 먼저 입력받는 오버레이 */

.aidexGuestNameOverlay{position:absolute; left:0; right:0; top:0; bottom:0; background:rgba(0,0,0,0.35); display:flex; align-items:center; justify-content:center; z-index:50; padding:20px;}
.aidexGuestNameBox{width:100%; max-width:280px; background:#fff; border-radius:10px; padding:18px; box-sizing:border-box; box-shadow:0 6px 24px rgba(0,0,0,0.2); display:flex; flex-direction:column; gap:8px;}
.aidexGuestNameTitle{font-size:15px; font-weight:bold; color:#333;}
.aidexGuestNameDesc{font-size:12px; color:#888; line-height:1.4; margin-bottom:4px;}


/* 채팅 시작 버튼을 누르기 전(또는 종료 후)에는 입력창/버튼이 잠긴 상태로 보이게 한다 */
.textContent:disabled{background:#f5f5f5; color:#999; cursor:not-allowed;}
.sendText:disabled, .sendPicture:disabled{opacity:0.4; cursor:not-allowed;}