@charset "utf-8";

/* 챗봇 팝업창 기본 창 */
#ai-chat-window {position:fixed;bottom:77px;right:10px;width:360px;height:560px;background:white;border-radius:15px;box-shadow:0 8px 28px rgba(0,0,0,0.22);display:none;flex-direction:column;z-index:9999;overflow:hidden;border:1px solid #ddd;}
#ai-chat-header {background:#007bff;color:white;padding:10px 12px;font-weight:bold;display:flex;justify-content:space-between;align-items:center;min-height:50px;box-sizing:border-box;}
#ai-chat-header .header-title {font-size:14px;font-weight:700;letter-spacing:-0.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;}
#ai-chat-header .header-actions {display:flex !important;align-items:center !important;gap:5px !important;margin-left:auto;}

/* 상단 버튼 공통 스타일 (고정 너비로 호버 시 가로 늘어남 원천 차단) */
#ai-chat-header .header-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    padding: 0 !important;
    height: 25px !important;
    border-radius: 14px !important;
    letter-spacing: -0.02em !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    border: 1px solid rgba(255,255,255,0.4) !important;
    background: rgba(255,255,255,0.18) !important;
    color: #ffffff !important;
    transition: color 0.15s ease !important;
    flex-shrink: 0 !important;
    width: auto !important;
    min-width: 52px !important;
    padding: 0 6px !important;
}

/* 카톡, 전화 호버 시 글자색만 부드럽게 노란색 변경 */
#ai-chat-header .header-btn:hover {
    color: #ffeb3b !important;
    background: rgba(255,255,255,0.18) !important;
    border: 1px solid rgba(255,255,255,0.4) !important;
}

/* 상담원 연결 버튼 */
#ai-chat-header .btn-req-admin {
    background: #ffc107 !important;
    color: #1e293b !important;
    border-color: #f59e0b !important;
    min-width: 68px !important;
}
#ai-chat-header .btn-req-admin:hover {
    color: #2563eb !important;
    background: #ffc107 !important;
}

#ai-chat-header .btn-req-admin.status-away {
    background: rgba(255,255,255,0.2) !important;
    color: #fef08a !important;
    border-color: rgba(255,255,255,0.4) !important;
    min-width: 58px !important;
}
#ai-chat-header .btn-req-admin.status-away:hover {
    color: #fff !important;
}

#ai-chat-close {cursor:pointer;font-size:16px;font-weight:normal;line-height:1;padding:4px 6px;margin-left:2px;color:rgba(255,255,255,0.85);transition:color 0.15s ease;flex-shrink:0;width:24px;text-align:center;}
#ai-chat-close:hover {color:#ffeb3b;}

#ai-chat-box {flex:1;padding:15px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;background:#f4f4f9;}

/* AI/상담원 아이콘 및 상담자명 스타일 */
.ai-bot-row {display:flex;gap:8px;margin-bottom:5px;}
.ai-bot-icon {width:36px;height:36px;background:#e9ecef;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;box-shadow:0 2px 4px rgba(0,0,0,0.1);overflow:hidden;}
.ai-bot-content {display:flex;flex-direction:column;align-items:flex-start;max-width:78%;}
.ai-bot-name {font-size:0.82rem;color:#555;margin-bottom:4px;margin-left:2px;font-weight:bold;}

/* 말풍선 스타일 */
.ai-msg-bubble {padding:10px 12px;border-radius:12px;font-size:13px;line-height:1.45;word-break:break-all;}
.ai-user {background:#007bff;color:white;align-self:flex-end;border-bottom-right-radius:2px;max-width:80%;}
.ai-bot {background:#fff;color:#333;border:1px solid #ddd;border-top-left-radius:2px;}
.ai-admin {background:#e0f2fe;color:#0369a1;border:1px solid #bae6fd;border-top-left-radius:2px;font-weight:500;}

/* 자주 묻는 질문(퀵버튼) 스타일 */
#ai-quick-replies {display:flex !important;gap:6px !important;padding:8px 10px !important;background:#fff !important;border-top:1px solid #eee !important;overflow-x:auto !important;white-space:nowrap !important;align-items:center !important;}
#ai-quick-replies::-webkit-scrollbar {height:4px;}
#ai-quick-replies::-webkit-scrollbar-thumb {background:#ccc;border-radius:4px;}
.ai-quick-reply-btn {display:inline-flex !important;align-items:center !important;justify-content:center !important;width:auto !important;height:auto !important;min-height:28px !important;background:#f4f4f9 !important;border:1px solid #cbd5e1 !important;padding:5px 12px !important;border-radius:15px !important;font-size:11px !important;font-weight:600 !important;cursor:pointer !important;color:#334155 !important;box-shadow:none !important;transition:all 0.2s ease !important;white-space:nowrap !important;flex-shrink:0 !important;text-decoration:none !important;box-sizing:border-box !important;}
.ai-quick-reply-btn:hover {background:#e2e6ea !important;border-color:#94a3b8 !important;color:#0f172a !important;transform:none !important;}

/* 입력창 영역 */
#ai-chat-input-area {display:flex;padding:10px;background:white;border-top:1px solid #eee;}
#ai-chat-message {flex:1;padding:9px 12px;border:1px solid #ddd;border-radius:6px;outline:none;font-size:13px;}
#ai-chat-send {padding:9px 15px;margin-left:6px;background:#333;color:white;border:none;border-radius:6px;cursor:pointer;font-size:13px;font-weight:bold;}

/* 상태 배너 (고객이 AI로 언제든 탈출 가능) */
#ai-chat-status-bar {display:none;background:#fef3c7;border-bottom:1px solid #fde68a;padding:6px 12px;font-size:11px;color:#92400e;display:none;justify-content:space-between;align-items:center;font-weight:600;}
.btn-back-ai {background:#2563eb;color:#fff;border:0;border-radius:10px;padding:2px 8px;font-size:10px;cursor:pointer;font-weight:700;}
.btn-back-ai:hover {background:#1d4ed8;}

/* 부재중 간이 연락처 남기기 폼 모달 */
#lead-form-box {display:none;background:#fff;border:1px solid #3b82f6;border-radius:10px;padding:12px;margin:8px 0;box-shadow:0 4px 12px rgba(59,130,246,0.15);}
#lead-form-box h5 {margin:0 0 8px;font-size:12px;font-weight:700;color:#1e293b;}
.lead-input {width:100%;height:32px;padding:0 8px;border:1px solid #cbd5e1;border-radius:6px;margin-bottom:6px;font-size:12px;box-sizing:border-box;}
.btn-lead-submit {width:100%;height:32px;background:#2563eb;color:#fff;border:0;border-radius:6px;font-size:12px;font-weight:700;cursor:pointer;}

/* AI퀵버튼 */
.quick img {width:3.00rem;height:auto;}




/* 관리자 실시간 상담 알림 모듈 (Web Audio + 비프음 + 화면 토스트) */

@keyframes aiToastPulse {
    0% { transform: scale(1); box-shadow: 0 10px 25px rgba(37, 99, 235, 0.4); }
    50% { transform: scale(1.02); box-shadow: 0 15px 35px rgba(239, 68, 68, 0.6); }
    100% { transform: scale(1); box-shadow: 0 10px 25px rgba(37, 99, 235, 0.4); }
}
#ai_admin_alarm_toast {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999999 !important;
    background: #0f172a;
    color: #ffffff;
    padding: 16px 20px;
    border-radius: 16px;
    border: 3px solid #ef4444;
    max-width: 380px;
    font-family: -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", sans-serif;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    animation: aiToastPulse 2s infinite ease-in-out;
    cursor: pointer;
}
#ai_admin_alarm_toast:hover {
    border-color: #3b82f6;
}
.ai-alarm-btn-close {
    background: #334155;
    border: none;
    color: #cbd5e1;
    font-size: 14px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: 0.15s;
}
.ai-alarm-btn-close:hover {
    background: #ef4444;
    color: #fff;
}