/* ================================================================
   IDC.KR AI 챗봇 — v3.0 (Hyundai Navy × White Design)
   Primary  : #002C5F (현대 딥 네이비)
   Accent   : #00AAD2 (스카이 블루)
   ----------------------------------------------------------------
   Namespace: #idc-cb-root (Elementor 충돌 차단)
================================================================ */

/* ──── 기본 리셋 ──── */
#idc-cb-root,
#idc-cb-root * {
  box-sizing: border-box !important;
  font-family: "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif !important;
}
#idc-cb-root button,
#idc-cb-root input  { outline: none !important; border: none !important; }
#idc-cb-root p,
#idc-cb-root em     { margin: 0 !important; padding: 0 !important; }

/* ══════════════════════════════════════════
   루트 고정 위치 (플로팅 버튼 앵커)
══════════════════════════════════════════ */
#idc-cb-root {
  position: fixed !important;
  bottom: 70px !important;
  right: 105px !important;
  z-index: 999999 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 2px !important;
}

/* ══════════════════════════════════════════
   말풍선
══════════════════════════════════════════ */
#idc-cb-bubble {
  background: #ffffff !important;
  color: #1a1a2e !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  padding: 10px 24px !important;
  border-radius: 22px 22px 6px 22px !important;
  cursor: pointer !important;
  box-shadow: 0 6px 28px rgba(0,44,95,.20) !important;
  border: 2px solid #dde3ea !important;
  animation: idcCbBounce 2.6s ease-in-out infinite !important;
  white-space: nowrap !important;
  text-align: center !important;
  /* 캐릭터와 독립 배치: 절대 위치로 분리 */
  position: absolute !important;
  bottom: 168px !important;
  right: 45px !important;
}
#idc-cb-bubble::after {
  content: "" !important;
  position: absolute !important;
  bottom: -12px !important; right: 28px !important;
  border: 12px solid transparent !important;
  border-top-color: #ffffff !important;
  border-bottom: 0 !important;
}
#idc-cb-bubble strong {
  display: block !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  color: #002C5F !important;
  margin-bottom: 1px !important;
}
@keyframes idcCbBounce {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
#idc-cb-bubble.hidden { display: none !important; }

/* ══════════════════════════════════════════
   플로팅 캐릭터 토글 버튼
══════════════════════════════════════════ */
#idc-cb-toggle {
  width: 161px !important;
  height: 161px !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: 0 10px 36px rgba(0,44,95,.18) !important;
  cursor: pointer !important;
  padding: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
  border: 4px solid rgba(255,255,255,.85) !important;
  animation: idcCbCharIn .35s cubic-bezier(.22,1,.36,1) both !important;
}
#idc-cb-toggle:hover {
  transform: scale(1.07) !important;
  box-shadow: 0 12px 36px rgba(0,44,95,.28) !important;
}
@keyframes idcCbCharIn {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: scale(1); }
}
#idc-cb-char {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  background: transparent !important;
}
#idc-cb-badge {
  position: absolute !important;
  top: -4px !important; right: -4px !important;
  width: 24px !important; height: 24px !important;
  background: #e11d2e !important;
  color: #fff !important;
  border-radius: 50% !important;
  font-size: 12px !important; font-weight: 700 !important;
  display: flex !important;
  align-items: center !important; justify-content: center !important;
  border: 2.5px solid #fff !important;
}
#idc-cb-badge.hidden { display: none !important; }

/* ══════════════════════════════════════════
   팝업 — 화면 중앙, 대형
══════════════════════════════════════════ */
#idc-cb-popup {
  position: fixed !important;
  bottom: 30px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(1120px, 94vw) !important;
  height: min(800px, 90vh) !important;
  background: #ffffff !important;
  border-radius: 20px !important;
  box-shadow:
    0 40px 100px rgba(0,44,95,.22),
    0 8px 24px rgba(0,44,95,.12) !important;
  display: none !important;
  flex-direction: column !important;
  overflow: hidden !important;
  z-index: 999998 !important;
}
#idc-cb-popup.open {
  display: flex !important;
  animation: idcCbOpen .3s cubic-bezier(.22,1,.36,1) !important;
}
@keyframes idcCbOpen {
  from { opacity: 0; transform: translateX(-50%) translateY(20px) scale(.94); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0)    scale(1); }
}

/* ══════════════════════════════════════════
   헤더 — 흰색 + 네이비 타이틀
══════════════════════════════════════════ */
#idc-cb-header {
  display: flex !important;
  align-items: flex-start !important;
  padding: 28px 60px 24px 32px !important;
  background: #ffffff !important;
  flex-shrink: 0 !important;
  border-bottom: 2px solid #002C5F !important;
  position: relative !important;
}
#idc-cb-hinfo {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
/* 대형 타이틀 */
#idc-cb-hinfo strong {
  display: block !important;
  color: #002C5F !important;
  font-size: 32px !important;
  font-weight: 900 !important;
  letter-spacing: -.04em !important;
  line-height: 1.1 !important;
  font-style: normal !important;
}
/* "AI 챗봇" — 스카이블루 강조 */
#idc-cb-htitle-accent {
  color: #00AAD2 !important;
  font-style: normal !important;
}
/* 부제목 1 */
#idc-cb-hinfo > span {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #374151 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}
/* 부제목 2 */
#idc-cb-sub {
  font-style: normal !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #002C5F !important;
  opacity: .72 !important;
}

/* 온라인 상태 점 */
.idc-cb-dot {
  display: inline-block !important;
  width: 9px !important; height: 9px !important;
  border-radius: 50% !important;
  background: #00AAD2 !important;
  box-shadow: 0 0 0 2px rgba(0,170,210,.28) !important;
  animation: idcCbPulse 2s ease-in-out infinite !important;
  flex-shrink: 0 !important;
}
@keyframes idcCbPulse {
  0%,100% { box-shadow: 0 0 0 2px rgba(0,170,210,.28); }
  50%      { box-shadow: 0 0 0 7px rgba(0,170,210,.1); }
}

/* 닫기 버튼 */
#idc-cb-close {
  position: absolute !important;
  top: 20px !important; right: 20px !important;
  background: #f0f4f8 !important;
  color: #374151 !important;
  width: 36px !important; height: 36px !important;
  border-radius: 50% !important;
  font-size: 16px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important; justify-content: center !important;
  transition: background .2s, color .2s !important;
  z-index: 5 !important;
}
#idc-cb-close:hover { background: #002C5F !important; color: #fff !important; }

/* ══════════════════════════════════════════
   본문 레이아웃
══════════════════════════════════════════ */
#idc-cb-body {
  display: flex !important;
  flex: 1 !important;
  overflow: hidden !important;
}

/* ──── 왼쪽 사이드바 ──── */
#idc-cb-sidebar {
  width: 210px !important;
  flex-shrink: 0 !important;
  background: #f0f4f8 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 20px 14px !important;
  overflow-y: auto !important;
  border-right: 1px solid #dde3ea !important;
}
/* 메뉴 항목 */
.idc-cb-menu {
  width: 100% !important;
  background: #ffffff !important;
  color: #002C5F !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 11px 13px !important;
  border-radius: 10px !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: background .18s, color .18s, transform .15s !important;
  line-height: 1.2 !important;
  box-shadow: 0 1px 4px rgba(0,44,95,.08) !important;
  border: 1.5px solid #dde3ea !important;
  /* 인라인 레이아웃 — 테마 column 충돌 차단 */
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 9px !important;
  line-height: 1 !important;
  /* 줄바꿈 방지 */
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* SVG 크기 CSS 보조 (인라인 style이 우선) */
.idc-cb-menu svg,
.idc-cb-consult svg {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  min-height: 15px !important;
  max-width: 15px !important;
  max-height: 15px !important;
  flex-shrink: 0 !important;
}
.idc-cb-menu:hover {
  background: #002C5F !important;
  color: #ffffff !important;
  border-color: #002C5F !important;
  transform: translateX(3px) !important;
  box-shadow: 0 4px 14px rgba(0,44,95,.22) !important;
}
.idc-cb-menu.active {
  background: #00AAD2 !important;
  color: #fff !important;
  border-color: #00AAD2 !important;
}
/* 빠른상담 버튼 — 네이비 + 화이트 */
.idc-cb-consult {
  margin-top: auto !important;
  width: 100% !important;
  background: #002C5F !important;
  color: #ffffff !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  padding: 13px 12px !important;
  border-radius: 10px !important;
  text-align: center !important;
  cursor: pointer !important;
  letter-spacing: -.01em !important;
  transition: background .18s, transform .18s, box-shadow .18s !important;
  box-shadow: 0 6px 20px rgba(0,44,95,.32) !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
}
.idc-cb-consult:hover {
  background: #00AAD2 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(0,170,210,.35) !important;
}

/* ──── 채팅 메인 ──── */
#idc-cb-main {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: #fafbfd !important;
}

/* 메시지 목록 */
#idc-cb-messages {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 24px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  scroll-behavior: smooth !important;
}
#idc-cb-messages::-webkit-scrollbar { width: 5px; }
#idc-cb-messages::-webkit-scrollbar-track { background: transparent; }
#idc-cb-messages::-webkit-scrollbar-thumb { background: #c8d3e0; border-radius: 4px; }

/* 메시지 컨테이너 */
.idc-cb-msg {
  max-width: 90% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  animation: idcCbMsgIn .22s ease !important;
}
@keyframes idcCbMsgIn {
  from { opacity:0; transform: translateY(10px); }
  to   { opacity:1; transform: translateY(0); }
}
.idc-cb-msg.user { align-self: flex-end !important; align-items: flex-end !important; }
.idc-cb-msg.bot  { align-self: flex-start !important; align-items: flex-start !important; }

.idc-cb-bubble-wrap {
  display: flex !important;
  align-items: flex-end !important;
  gap: 10px !important;
}
.idc-cb-msg.user .idc-cb-bubble-wrap { flex-direction: row-reverse !important; }

/* 아바타 */
.idc-cb-avatar {
  width: 36px !important; height: 36px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  border: 2px solid #dde3ea !important;
}
.idc-cb-msg.user .idc-cb-avatar { border-color: #002C5F !important; }

/* 말풍선 텍스트 */
.idc-cb-text {
  padding: 13px 18px !important;
  border-radius: 18px !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  word-break: keep-all !important;
  white-space: pre-line !important;
}
.idc-cb-msg.bot .idc-cb-text {
  background: #ffffff !important;
  color: #111827 !important;
  border-bottom-left-radius: 4px !important;
  border: 1px solid #e8eef5 !important;
  box-shadow: 0 1px 4px rgba(0,44,95,.07) !important;
}
.idc-cb-msg.user .idc-cb-text {
  background: #002C5F !important;
  color: #ffffff !important;
  border-bottom-right-radius: 4px !important;
}

/* 타임스탬프 */
.idc-cb-time {
  font-size: 11px !important;
  color: #9ca3af !important;
}

/* 타이핑 인디케이터 */
.idc-cb-typing span {
  display: inline-block !important;
  width: 8px !important; height: 8px !important;
  border-radius: 50% !important;
  background: #00AAD2 !important;
  margin: 0 2.5px !important;
  animation: idcCbDot 1.2s ease-in-out infinite !important;
}
.idc-cb-typing span:nth-child(2) { animation-delay: .2s !important; }
.idc-cb-typing span:nth-child(3) { animation-delay: .4s !important; }
@keyframes idcCbDot {
  0%,80%,100% { transform: translateY(0); }
  40%          { transform: translateY(-8px); }
}

/* 빠른 응답 버튼 */
.idc-cb-quick-wrap {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  margin-top: 7px !important;
}
.idc-cb-quick {
  background: #fff !important;
  color: #002C5F !important;
  border: 1.5px solid #002C5F !important;
  border-radius: 999px !important;
  padding: 6px 16px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background .18s, color .18s !important;
}
.idc-cb-quick:hover {
  background: #002C5F !important;
  color: #fff !important;
}

/* 링크 버튼 */
.idc-cb-link-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin-top: 10px !important;
  padding: 10px 22px !important;
  background: #002C5F !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: background .2s !important;
}
.idc-cb-link-btn:hover { background: #00AAD2 !important; }

/* ──── 입력창 영역 ──── */
#idc-cb-input-wrap {
  display: flex !important;
  gap: 10px !important;
  padding: 16px 18px !important;
  border-top: 1.5px solid #e8eef5 !important;
  background: #ffffff !important;
  flex-shrink: 0 !important;
}
#idc-cb-input {
  flex: 1 !important;
  background: #f0f4f8 !important;
  border-radius: 28px !important;
  padding: 13px 22px !important;
  font-size: 15px !important;
  color: #111827 !important;
  border: 1.5px solid #dde3ea !important;
  transition: border-color .2s, background .2s !important;
}
#idc-cb-input::placeholder { color: #9ca3af !important; }
#idc-cb-input:focus {
  border-color: #002C5F !important;
  background: #fff !important;
}
#idc-cb-send {
  width: 48px !important; height: 48px !important;
  background: #002C5F !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important; justify-content: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  align-self: center !important;
  transition: background .2s, transform .2s !important;
  box-shadow: 0 4px 14px rgba(0,44,95,.28) !important;
}
#idc-cb-send:hover { background: #00AAD2 !important; transform: scale(1.08) !important; }
#idc-cb-send svg {
  width: 20px !important; height: 20px !important;
  stroke: #fff !important;
}

/* ══════════════════════════════════════════
   모바일 반응형
══════════════════════════════════════════ */
@media (max-width: 768px) {
  #idc-cb-root { bottom: 20px !important; right: 20px !important; }
  #idc-cb-toggle { width: 129px !important; height: 129px !important; }
  #idc-cb-bubble { font-size: 15px !important; padding: 9px 18px !important; line-height: 1.4 !important; }
  #idc-cb-bubble strong { font-size: 16px !important; margin-bottom: 1px !important; }

  #idc-cb-popup {
    bottom: 16px !important;
    left: 16px !important;
    transform: none !important;
    width: calc(100vw - 32px) !important;
    height: calc(100vh - 110px) !important;
  }
  #idc-cb-popup.open { animation: idcCbOpenMob .3s cubic-bezier(.22,1,.36,1) !important; }
  @keyframes idcCbOpenMob {
    from { opacity:0; transform: scale(.92) translateY(16px); }
    to   { opacity:1; transform: scale(1) translateY(0); }
  }
  #idc-cb-header { padding: 20px 52px 18px 18px !important; }
  #idc-cb-hinfo strong { font-size: 22px !important; }
  #idc-cb-hinfo > span { font-size: 13px !important; }
  #idc-cb-sidebar { width: 155px !important; padding: 14px 10px !important; gap: 6px !important; }
  .idc-cb-menu { font-size: 13px !important; padding: 11px 11px !important; }
  .idc-cb-consult { font-size: 13.5px !important; padding: 12px 8px !important; }
  .idc-cb-text { font-size: 14px !important; }
}

@media (max-width: 480px) {
  #idc-cb-sidebar { display: none !important; }
  #idc-cb-hinfo strong { font-size: 18px !important; }
}