/* ================================================
   플로팅 챗봇 (아티톡) — 대화창
   - 마크업: components/chatbot/shell.blade.php
   - FAB·퀵칩 스타일은 components/floating-actions.css가 소유한다(마크업 소유자와 일치).
   - 창은 페이지 테마와 무관하게 라이트 글래스 룩으로 고정한다(다크 시안의 라이트 전환판, 모션·구조 동일).
   - 토큰(tokens.css)이 먼저 로드되어 있어야 한다.
   ================================================ */

.chatbot {
  /* 창은 페이지 테마와 무관한 고정 룩 — 테마를 따라가는 --primary(남색 #074491)가
     스며들지 않게 창 안의 액센트는 전부 이 고정 토큰만 쓴다.
     accent는 채움·테두리용, accent-ink는 흰 바탕 위 텍스트용 —
     #3B82F6은 13px 텍스트로는 흰 바탕 대비 미달(3.7:1)이라 갈라 둔다. */
  --chatbot-accent: #3B82F6;
  --chatbot-accent-ink: #2563EB;
  /* 라이트 표면의 잉크 스케일 — 본문/보조/유리 위 헤어라인 */
  --chatbot-ink: #1A1A1A;
  --chatbot-ink-sub: #6B7280;
  --chatbot-line: rgba(15, 23, 42, 0.08);
  /* .floating-actions 컬럼의 자식 — 위치·FAB과의 간격은 컬럼이 소유한다.
     min-height 0: 낮은 화면에서 컬럼 max-height에 맞춰 창이 줄어들 수 있게. */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-height: 0;
  width: min(392px, calc(100vw - 48px));
}

/* textarea는 body 폰트를 상속하지 않는다(브라우저 기본이 시스템 폰트) — Pretendard 상속.
   button은 base 리셋의 font: inherit이 이미 소유한다. */
.chatbot textarea {
  font-family: inherit;
}

/* ---- 모션: 창은 FAB에서 발사되고 FAB으로 빨려 들어간다 ----
   열림은 감쇠 스프링(ζ=0.65, 32% 지점 오버슈트 6.8%) — 곡선은 스프링 방정식
   x(t)=1-e^(-ζω₀t)(cos+sin)에서 샘플링했다. 스프링은 from→to 단일 구간이어야
   물리가 안 끊긴다(키프레임을 쪼개면 이징이 구간마다 리셋된다) — 불투명도는
   별도 애니메이션으로 분리. linear() 미지원 브라우저는 timing-function 선언만
   버리고 shorthand의 오버슈트 베지어로 뜬다.
   팝인은 hidden 해제(display:none → flex)마다 재생되고(칩과 같은 메커니즘),
   닫힘의 hidden 전환은 app.js가 animationend에서 처리한다. */
.chatbot__window {
  transform-origin: bottom right;
  animation:
    chatbot-spring-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards,
    chatbot-window-fade 0.22s ease-out backwards;
  animation-timing-function:
    linear(
      0, 0.03 2%, 0.107 4%, 0.213 6%, 0.333 8%, 0.457 10%, 0.576 12%,
      0.685 14%, 0.781 16%, 0.862 18%, 0.928 20%, 0.979 22%, 1.016 24%,
      1.042 26%, 1.058 28%, 1.066 30%, 1.068 32%, 1.06 36%, 1.045 40%,
      1.028 44%, 1.014 48%, 1.005 52%, 0.997 58%, 0.995 64%, 0.998 74%, 1
    ),
    ease-out;
}

/* 프레임이 먼저, 내용물이 반 박자 뒤 — 헤더→메시지→입력바 순서로 떠오른다. */
.chatbot__window > * {
  animation: chatbot-content-rise 0.35s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.chatbot__window > :nth-child(1) { animation-delay: 0.1s; }
.chatbot__window > :nth-child(2) { animation-delay: 0.16s; }
.chatbot__window > :nth-child(3) { animation-delay: 0.22s; }

/* 닫힘 3박자: 들숨(짧고 또렷한 부풂) → 불투명한 채 FAB으로 급가속 흡입 →
   막판에만 페이드. 페이드를 늦게 시작해야 "줄어들며 버튼으로 들어가는" 게 보인다.
   구간별 이징은 키프레임 안의 animation-timing-function이 소유한다.
   forwards가 없으면 애니메이션이 끝나는 순간 창이 되살아난다 —
   hidden 전환은 app.js가 animationend에서 처리한다. */
.chatbot.is-closing .chatbot__window {
  animation: chatbot-pop-out 0.34s forwards;
}

@keyframes chatbot-spring-in {
  from {
    transform: translateY(34px) scale(0.25);
  }
}

@keyframes chatbot-window-fade {
  from {
    opacity: 0;
  }
}

@keyframes chatbot-content-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@keyframes chatbot-pop-out {
  from {
    transform: none;
    animation-timing-function: cubic-bezier(0.25, 0, 0.45, 1);
  }
  /* 흡입은 단일 구간이어야 한다 — 중간에 트랜스폼 키프레임을 두면 이징이 거기서
     리셋돼 속도가 끊긴다(스프링과 같은 원리). 지니 스쿼시는 도착 상태의 비등방
     scale(0.26, 0.08)로만 건다: 한 구간 안에서 세로가 가로를 연속적으로 앞질러
     무너져 윗변이 빠르게 걷히되, 힛치가 없다. */
  14% {
    transform: translateY(-6px) scale(1.04);
    animation-timing-function: cubic-bezier(0.55, 0, 0.75, 0.35);
  }
  /* 페이드는 마지막 순간에만 — 창은 사라지는 게 아니라 줄어들어 버튼으로 들어간다 */
  85% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateY(30px) scale(0.26, 0.08);
  }
}

/* 대화 요소도 삽입될 때마다 한 번씩 팝 — 말풍선·위젯·요약 카드 공통 */
.chatbot__messages > * {
  animation: chatbot-msg-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.chatbot-msg--bot { transform-origin: bottom left; }
.chatbot-msg--user { transform-origin: bottom right; }

@keyframes chatbot-msg-pop {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.85);
  }
}

/* 선택 항목은 하나씩 시차를 두고 — 행 단위 팝은 끄고 항목 단위로.
   항목의 --i(0부터)는 engine.js stagger()가 심고, 박자(--stagger-from/--stagger-step)는 컨테이너가 정하며,
   지연 계산은 아래 한 규칙만 안다. 긴 목록은 --stagger-cap에서 잘라 접힌 아래까지 몇 초씩 움직이지 않게 한다. */
.chatbot__messages > .chatbot-options,
.chatbot__messages > .chatbot-msg--card:has(> .chatbot-msg__bubble--card > .chatbot-menu--bare) {
  animation: none;
}

.chatbot__messages {
  --stagger-from: 0s;
  --stagger-step: 0.06s;
  --stagger-cap: 0.5s;
}

/* 홈 분류판은 잘리지 않고 통째로 보인다 — 0.5s 상한이면 9번째(거래·결제 중간)부터 21개가 한꺼번에 선다 */
.chatbot-menu--bare {
  --stagger-cap: 1.5s;
}

/* 카드 안 목록은 카드가 먼저 팝(0.3s)하고 그 안에서 행이 위로 스며든다 — 카드의 overflow가 아래를 자른다 */
.chatbot-menu__list,
.chatbot-example__list {
  --stagger-from: 0.1s;
  --stagger-step: 0.04s;
}

.chatbot-options__chip,
.chatbot-menu__pill,
.chatbot-menu__cap,
.chatbot-menu__list > *,
.chatbot-example__list > *,
.chatbot-faq__line {
  animation-delay: calc(var(--stagger-from) + min(var(--i) * var(--stagger-step), var(--stagger-cap)));
  animation-fill-mode: backwards;
}

.chatbot-options__chip,
.chatbot-menu__pill {
  animation-name: chatbot-msg-pop;
  animation-duration: 0.3s;
  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.chatbot-options__chip { transform-origin: bottom right; }
.chatbot-menu__pill { transform-origin: bottom left; }

.chatbot-menu__cap,
.chatbot-menu__list > *,
.chatbot-example__list > *,
.chatbot-faq__line {
  animation-name: chatbot-content-rise;
  animation-duration: 0.28s;
  animation-timing-function: ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .chatbot__window,
  .chatbot__window *,
  .chatbot.is-closing .chatbot__window {
    animation: none;
  }
}

.chatbot__window {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* 낮은 화면 상한은 컬럼(.floating-actions max-height)이 결정한다 — 여기선 캡만. */
  height: 600px;
  max-height: 100%;
  border-radius: 20px;
  overflow: hidden;
  /* 시그니처: 화이트 글래스 위 브랜드 블루 오로라 — 우상단 글로우 + 좌하단 잔광이
     한 장의 유리로 이어져 헤더·메시지·입력바가 같은 표면 위에 놓인다.
     (다크판의 네온 글로우를 라이트에선 은은한 빛 워시로 낮춰 같은 정체성을 유지) */
  background-color: rgba(255, 255, 255, 0.92);
  background-image:
    radial-gradient(120% 70% at 90% -10%, rgba(59, 130, 246, 0.10), transparent 65%),
    radial-gradient(90% 50% at -15% 118%, rgba(14, 165, 233, 0.05), transparent 60%);
  backdrop-filter: blur(20px);
  border: 1px solid var(--chatbot-line);
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
  color: var(--chatbot-ink);
}

.chatbot__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.07);
}

.chatbot__header-avatar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.3);
}

.chatbot__header-avatar img {
  width: 100%;
  height: 100%;
}

.chatbot__header-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--chatbot-ink);
}

.chatbot__header-caption {
  margin-top: 1px;
  font-size: 11px;
  line-height: 1.25;
  color: var(--chatbot-ink-sub);
}

/* ---- 메시지 영역 ---- */
.chatbot__messages {
  position: relative; /* 행 offsetTop의 기준 — 엔진 scrollRowToTop */
  flex: 1;
  overflow-y: auto;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 23, 42, 0.22) transparent;
}

/* 스크롤 컨테이너의 flex 자식은 수축 금지 — overflow:hidden인 카드(요약 카드 등)는
   자동 최소 높이가 0이라, 대화가 넘치는 순간 수축분을 전부 흡수해 높이 0으로 붕괴한다. */
.chatbot__messages > * {
  flex-shrink: 0;
}

.chatbot-msg {
  display: flex;
  gap: 8px;
  max-width: 88%;
}

.chatbot-msg--bot {
  align-self: flex-start;
}

.chatbot-msg--user {
  align-self: flex-end;
  justify-content: flex-end;
}

.chatbot-msg__avatar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.chatbot-msg__avatar img {
  width: 100%;
  height: 100%;
}

.chatbot-msg__bubble {
  position: relative; /* .chatbot-sr(absolute)의 기준 */
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.55;
  word-break: break-word;
  white-space: normal;
}

/* 스크린리더 전용 전문 — 타자기 프레임 대신 이걸 한 번에 낭독한다 */
.chatbot-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.chatbot-msg--bot .chatbot-msg__bubble {
  background: rgba(15, 23, 42, 0.05);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-top-left-radius: 4px;
}

.chatbot-msg--user .chatbot-msg__bubble {
  background: var(--cta-blue-gradient);
  color: #fff;
  border-top-right-radius: 4px;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.28);
}

/* 타이핑 인디케이터 */
.chatbot-msg__typing {
  display: inline-flex;
  gap: 4px;
  padding: 2px 0;
}

.chatbot-msg__typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(26, 26, 26, 0.35);
  animation: chatbot-typing 1s ease-in-out infinite;
}

.chatbot-msg__typing i:nth-child(2) { animation-delay: 0.15s; }
.chatbot-msg__typing i:nth-child(3) { animation-delay: 0.3s; }

@keyframes chatbot-typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ---- 선택지 칩 (대화 내) ---- */
.chatbot-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.chatbot-options__chip {
  padding: 7px 14px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(59, 130, 246, 0.5);
  background: rgba(59, 130, 246, 0.08);
  color: var(--chatbot-accent-ink);
  font-size: 13px;
  transition: background var(--ease-default), color var(--ease-default), border-color var(--ease-default);
}

.chatbot-options__chip:hover {
  border-color: var(--chatbot-accent);
  background: var(--chatbot-accent);
  color: #fff;
}

/* 주 액션 칩 — 전진 액션(이대로 요청하기 등)은 채움으로 위계를 세운다 */
.chatbot-options__chip--primary {
  border-color: transparent;
  background: var(--cta-blue-gradient);
  color: #fff;
  font-weight: 600;
}

.chatbot-options__chip--primary:hover {
  border-color: transparent;
  background: var(--cta-blue-gradient);
  filter: brightness(1.1);
}

/* ---- 날짜·시간 위젯 ---- */
.chatbot-datetime {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.chatbot-datetime__chips {
  display: flex;
  gap: 8px;
}

.chatbot-datetime__chip {
  padding: 7px 14px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(15, 23, 42, 0.18);
  background: transparent;
  color: #374151;
  font-size: 13px;
  transition: border-color var(--ease-default), background var(--ease-default), color var(--ease-default);
}

.chatbot-datetime__chip:hover {
  border-color: var(--chatbot-accent);
  color: var(--chatbot-accent-ink);
}

/* 선택 완료는 채움으로 — 텍스트 색만 바꾸면 상태가 안 읽힌다. */
.chatbot-datetime__chip.is-selected {
  border-color: transparent;
  background: var(--cta-blue-gradient);
  color: #fff;
}

.chatbot-datetime__picker:not(:empty) {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* flatpickr 인라인 캘린더가 창 폭을 넘지 않도록 */
.chatbot-datetime__picker .flatpickr-calendar {
  max-width: 100%;
  box-shadow: none;
}

.chatbot-datetime__confirm {
  padding: 8px 18px;
  border-radius: var(--radius-full);
  border: none;
  background: var(--cta-blue-gradient);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

.chatbot-datetime__confirm:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ---- 카드 말풍선 — 봇 아바타 행에 카드를 싣는다 (engine.appendBotNode) ---- */
.chatbot-msg--card {
  width: 88%; /* 카드는 내용과 무관하게 봇 말풍선 최대 폭을 유지한다 */
}

.chatbot-msg--card .chatbot-msg__bubble--card {
  flex: 1;
  min-width: 0;
}

/* 말풍선이 표면(배경·테두리)을 제공하므로 카드 자체 표면은 걷는다 */
.chatbot-msg__bubble--card .chatbot-example {
  padding: 0;
  border: none;
  background: transparent;
}

/* ---- 요약 카드 ---- */
.chatbot-summary {
  align-self: flex-start;
  width: 100%;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: #fff;
  overflow: hidden;
}

.chatbot-summary__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  background: var(--cta-blue-gradient);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

/* 매칭 상태 칩 — 매칭중(펄스) → 완료/실패로 전환된다 */
.chatbot-summary__status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.18);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}

.chatbot-summary__status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.chatbot-summary__status--processing i {
  animation: chatbot-status-pulse 1.2s ease-in-out infinite;
}

.chatbot-summary__status--done {
  background: rgba(74, 222, 128, 0.22);
  color: #86efac;
}

.chatbot-summary__status--failed {
  background: rgba(248, 113, 113, 0.22);
  color: #fca5a5;
}

@keyframes chatbot-status-pulse {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .chatbot-summary__status--processing i {
    animation: none;
  }
}

.chatbot-summary__notice {
  margin: 0;
  padding: 0 14px 10px;
  font-size: 12px;
  line-height: 1.5;
  color: #DC2626;
}

.chatbot-summary__rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
}

.chatbot-summary__row {
  display: flex;
  gap: 8px;
  font-size: 12px;
  line-height: 1.5;
}

.chatbot-summary__row dt {
  flex-shrink: 0;
  color: var(--chatbot-ink-sub);
}

.chatbot-summary__row dd {
  color: var(--chatbot-ink);
  word-break: break-word;
}

.chatbot-summary__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px 0;
  border: none;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  background: transparent;
  color: #374151;
  font-size: 13px;
  font-weight: 600;
  transition: background var(--ease-default);
}

.chatbot-summary__link:hover {
  background: rgba(15, 23, 42, 0.04);
}

/* ---- 요청사항 예시 카드 ---- */
.chatbot-example {
  align-self: flex-start;
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--chatbot-line);
  background: #fff;
}

.chatbot-example__title {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--chatbot-accent-ink);
}

.chatbot-example__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chatbot-example__item {
  display: grid;
  grid-template-columns: 20px 1fr;
  column-gap: 8px;
  font-size: 12px;
  line-height: 1.5;
}

.chatbot-example__icon {
  text-align: center;
}

.chatbot-example__label {
  color: var(--chatbot-ink);
  font-weight: 600;
}

.chatbot-example__sample {
  grid-column: 2;
  color: var(--chatbot-ink-sub);
}

/* ---- 선택 목록 카드 (아티톡 FAQ 채널) — 분류 알약과 질문 행 목록.
   봇이 내미는 메뉴라 봇 쪽에 좌측 정렬로 서고, 고르면 카드째 사라진다(대화 기록이 아니다). ---- */
.chatbot-menu {
  /* 색조 묶음 기본(파랑) — 홈 구역·목록 카드의 data-tone이 덮는다. 묶음은 cs-inquiry.js TONE_GROUPS가 정한다 */
  --tone-ink: var(--chatbot-accent-ink);
  --tone-accent: var(--chatbot-accent);
  --tone-tint: var(--accent-blue-soft);

  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ink는 accent 토큰을 그대로 쓰지 않는다: 13px 글자로는 accent-green·orange가 soft 바탕에서 대비 미달 */
.chatbot-menu[data-tone="money"],
.chatbot-menu [data-tone="money"] {
  --tone-ink: #047857;
  --tone-accent: var(--accent-green);
  --tone-tint: var(--accent-green-soft);
}

.chatbot-menu[data-tone="issue"],
.chatbot-menu [data-tone="issue"] {
  --tone-ink: #B45309;
  --tone-accent: var(--accent-orange);
  --tone-tint: var(--accent-orange-soft);
}

.chatbot-menu[data-tone="misc"],
.chatbot-menu [data-tone="misc"] {
  --tone-ink: var(--gray-600);
  --tone-accent: var(--gray-400);
  --tone-tint: var(--gray-100);
}

/* 홈의 분류 알약은 말풍선 표면 없이 아바타 옆에 바로 선다 — 첫 장면은 가장 가벼워야 한다 */
.chatbot-msg__bubble--card:has(> .chatbot-menu--bare) {
  padding: 0;
  border: none;
  background: transparent;
}

.chatbot-menu__head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--tone-ink);
}

.chatbot-menu__count {
  font-weight: 500;
  color: var(--chatbot-ink-sub);
}

.chatbot-menu__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chatbot-menu--bare {
  gap: 10px;
}

.chatbot-menu__section {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.chatbot-menu__cap,
.chatbot-menu__group {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--tone-ink);
}

.chatbot-menu__pill {
  padding: 7px 13px;
  border: none;
  border-radius: var(--radius-full);
  background: var(--tone-tint);
  color: var(--tone-ink);
  font-size: 13px;
  font-weight: 500;
  transition: box-shadow var(--ease-default);
}

.chatbot-menu__pill:hover {
  box-shadow: inset 0 0 0 1px var(--tone-accent);
}

.chatbot-menu__list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--chatbot-line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.chatbot-menu__list > * {
  border-top: 1px solid var(--chatbot-line);
}

.chatbot-menu__list > :first-child {
  border-top: 0;
}

.chatbot-menu__group {
  padding: 6px 12px;
  background: var(--tone-tint);
}

.chatbot-menu__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: transparent;
  color: var(--chatbot-ink);
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
  transition: background var(--ease-default), color var(--ease-default);
}

.chatbot-menu__row:hover {
  background: var(--tone-tint);
  color: var(--tone-ink);
}

.chatbot-menu__row-text {
  flex: 1;
  min-width: 0;
}

.chatbot-menu__chev {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--chatbot-ink-sub);
}

.chatbot-menu__row:hover .chatbot-menu__chev {
  color: var(--tone-accent);
}

/* ---- FAQ 답변 카드 (아티톡 FAQ 채널) — 대화 기록이라 남고, 지나간 뒤엔 칩만 죽는다 ---- */
.chatbot-faq {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chatbot-faq__title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--chatbot-ink);
}

/* 본문은 원문의 줄(\n) 단위 블록 — 줄마다 시차 등장. 관련 콘텐츠는 .chatbot-menu 행 목록을 그대로 쓴다 */
.chatbot-faq__answer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.chatbot-faq__files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chatbot-faq__file {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid var(--chatbot-line);
  border-radius: var(--radius-full);
  background: #fff;
  font-size: 12px;
  color: var(--chatbot-ink-sub);
  transition: border-color var(--ease-default), color var(--ease-default);
}

.chatbot-faq__file:hover {
  border-color: var(--chatbot-accent);
  color: var(--chatbot-accent-ink);
}

.chatbot-faq__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--chatbot-line);
}

.chatbot-faq__foot-text {
  font-size: 12px;
  color: var(--chatbot-ink-sub);
}

/* 직접문의 = 이 채널의 유일한 전진 액션(지면 이동) — 채움으로 위계를 세우고 ↗로 이동을 예고한다 */
.chatbot-faq__inquiry {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: none;
  border-radius: var(--radius-full);
  background: var(--cta-blue-gradient);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.28);
  transition: filter var(--ease-default), transform var(--ease-default);
}

.chatbot-faq__inquiry:not(:disabled):hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.chatbot-faq__inquiry i {
  font-size: 11px;
}

/* 지나간 답변의 칩 — 카드는 대화 기록이라 남지만 더는 누를 수 없다 */
.chatbot-faq :disabled {
  opacity: 0.45;
  cursor: default;
  box-shadow: none;
}

/* ---- 입력바 ---- */
.chatbot__input {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(15, 23, 42, 0.07);
}

/* ---- 보조 행 (컴포저 소속) — 네비 버튼의 자리. 말풍선 칩은 답변 선택지로 읽혀서
   역할이 다른 버튼(처음으로·다른 질문 보기·다시 입력할게요)은 여기 붙는다. ---- */
.chatbot__input-aux {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chatbot__input-aux[hidden] {
  display: none;
}

/* 답변 칩(블루)과 구분되는 무채색 고스트 알약 — 위치(컴포저)가 역할을 말하고,
   알약 형태가 존재를 말한다. 맨 텍스트로는 배경에 묻힌다. */
.chatbot__nav {
  padding: 5px 12px;
  border: 1px solid rgba(15, 23, 42, 0.16);
  border-radius: var(--radius-full);
  background: rgba(15, 23, 42, 0.03);
  color: #4B5563;
  font-size: 12px;
  transition: border-color var(--ease-default), background var(--ease-default), color var(--ease-default);
}

.chatbot__nav:hover {
  border-color: rgba(15, 23, 42, 0.32);
  background: rgba(15, 23, 42, 0.06);
  color: var(--chatbot-ink);
}

.chatbot__input-field {
  flex: 1;
  resize: none;
  border: 1px solid transparent;
  border-radius: 17px;
  padding: 7px 14px;
  background: rgba(15, 23, 42, 0.05);
  color: var(--chatbot-ink);
  font-size: 13px;
  line-height: 1.5;
  max-height: 120px;
  outline: none;
  transition: border-color var(--ease-default), background var(--ease-default);
}

/* 입력 차례가 오면 입력바가 또렷해진다 — "어디에 답하지?" 시선을 아래로 끌어온다.
   켜지는 순간 한 번 퍼지는 링(wake)으로 위치를 알려주고, 이후엔 액센트 테두리로 유지.
   활성 필드는 순백으로 띄운다 — 유리보다 한 단계 밝은 면이 "여기가 입력면" 신호. */
.chatbot__input-field:not(:disabled) {
  border-color: rgba(59, 130, 246, 0.45);
  background: #fff;
  animation: chatbot-input-wake 0.6s ease-out;
}

.chatbot__input-field:focus {
  border-color: rgba(59, 130, 246, 0.75);
  background: #fff;
}

@keyframes chatbot-input-wake {
  0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.45); }
  100% { box-shadow: 0 0 0 8px rgba(59, 130, 246, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .chatbot__input-field:not(:disabled) {
    animation: none;
  }
}

.chatbot__input-field::placeholder {
  color: rgba(26, 26, 26, 0.35);
}

.chatbot__input-field:not(:disabled)::placeholder {
  color: rgba(26, 26, 26, 0.5);
}

.chatbot__input-field:disabled {
  cursor: not-allowed;
}

.chatbot__send {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: var(--cta-blue-gradient);
  color: #fff;
  font-size: 13px;
  transition: transform var(--ease-default), box-shadow var(--ease-default);
}

/* --shadow-glow 토큰은 body.theme-dark에만 정의돼 라이트 페이지에선 선언이
   조용히 죽는다(휴면 다크모드 유산) — 창은 테마 무관 고정 룩이므로 직접 값을 쓴다. */
.chatbot__send:not(:disabled):hover {
  transform: scale(1.08);
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.35);
}

.chatbot__send:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* 키보드 포커스 — 채움 버튼(그라디언트) 위에서도 보이는 링 */
.chatbot button:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.85);
  outline-offset: 2px;
}