/* ============================================================================
   chat.css — 데이터 분석 챗봇 UI 스타일시트 (확정 디자인 명세 적용)
   ----------------------------------------------------------------------------
   목적   : 바리바디 대시보드(db.barybody.com) 안의 "분석 챗봇" 화면 전용 스타일.
            매출·마진·광고·채널·제품을 자연어로 물어보는 대화형 UI(말풍선 스트림 +
            하단 입력 바)를 입힌다. 디자인 리드가 visual/ux 산출물을 병합해 확정한 스펙.
   기준   : common.css 의 :root 디자인 토큰만 재사용한다(색·반경·그림자·폰트 100%).
            새 색/그림자 하드코딩 금지 — 흰색 #FFFFFF 만 예외. 그 외는 무조건 var(--…).
            - 면   : --surface(흰 버블/입력바), --surface-2(disabled 면), --thead-bg(표 헤더)
            - 글자 : --text, --text-2, --muted, --brand-ink
            - 보더 : --line(기본), --line-2, --line-strong(인풋/스크롤바)
            - 액센트: --brand(세이지), --brand-ink(hover), --sage(레일·점), --sage-tint(포커스링)
            - 빈상태: --grad-badge(배지 그라데이션), --brand-weak(예시 칩 배경), --sage-tint-2
            - 반경 : --radius / --radius-lg / --radius-md / --radius-sm / --radius-badge / --radius-pill
            - 그림자: --shadow-card / --shadow-badge
            - 폰트 : --font-sans, tabular-nums(봇 답변 숫자 자릿수 정렬)
   구조   : #chatView > .chat-wrap > (.chat-stream[#chatStream] + form.chat-input[#chatForm])
            메시지: .chat-msg(--user/--bot) > .chat-bubble(--typing) / .chat-dot ×3
            빈상태: .chat-empty(::before 배지) > .chat-empty-title/-desc/-ex(단일 칩)
            입력  : .chat-textarea[#chatInput] + .chat-send[#chatSend]
   핵심 결정 :
            · 높이/간격은 #chatView 블록의 "채팅 전용 스코프 변수"로 제어(:root 오염 금지).
            · textarea 높이는 chat.js 가 ta.style.height=scrollHeight 로 소유한다 →
              CSS 는 .chat-textarea 에 height/min-height 를 절대 선언하지 않는다(max-height만).
            · 봇 버블 좌측 세이지 레일은 border-left 대신 inset box-shadow 합성으로 그린다
              (border-left 면 12px 라운드가 깨짐 → inset 그림자라야 모서리 보존).
            · 빈 상태 아이콘 배지는 JS 가 안 그리므로 CSS ::before 로 생성(텍스트/이모지 X).
            · 예시 질문(.chat-empty-ex)은 renderEmpty()가 innerHTML로 주입하는 단일 요소다 →
              칩 다중화·클릭 핸들러 없음 → cursor:pointer·hover 변화 금지(정적 "예시" 표식).
   주의   : 이 파일만 수정한다. common.css·chat.js·index.html(캐시버전 1줄 제외)은 안 건드린다.
   ============================================================================ */

/* ── 채팅 화면 컨테이너 + 채팅 전용 스코프 변수 ─────────────────────────────
   index.html: <section class="section" id="chatView" hidden> 안에서 동작.
   변수는 #chatView 블록 안에만 선언해 :root 를 오염시키지 않는다(반응형에서 이 값만 덮어씀). */
#chatView {
  display: block;

  /* 높이 모델 — 화면에서 챗봇이 점유할 수 없는 크롬(상단바+거터×2+탭 여백 20px+입력바 80px) */
  --chat-chrome: calc(var(--topbar-h) + (var(--main-gutter) * 2) + 20px + 80px);
  --chat-measure: 820px;          /* 대화 가독 폭(measure) */
  --chat-bubble-max: 76%;         /* 말풍선 최대 폭 */
  --chat-gap: 16px;               /* 메시지 사이 기본 간격 */
  --chat-gap-group: 6px;          /* 같은 발화자 연속 시 축소 간격 */
  --chat-pad-x: 16px;             /* 버블 좌우 패딩 */
  --chat-pad-y: 12px;             /* 버블 상하 패딩 */
  --chat-stream-pad: 20px;        /* 스트림 상하 패딩 */
  --chat-fade: 24px;             /* 상하 페이드 마스크 길이 */
  --chat-input-gap: 14px;         /* 스트림 ↔ 입력바 간격 */
  --chat-touch: 40px;             /* 전송 버튼 터치 크기 */
  --chat-fs-bubble: 15px;         /* 버블 글자 크기 */
  --chat-fs-input: 15px;          /* 입력 글자 크기 */
}
#chatView[hidden] {
  display: none;
}

/* ── 1. chat-wrap : 세로 컬럼 래퍼(스트림 위 + 입력 아래) ────────────────── */
.chat-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--chat-measure);
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  /* 점진 향상: dvh 미지원 브라우저는 vh 로 폴백, 지원 브라우저는 아래 줄로 덮어씀 */
  height: calc(100vh - var(--chat-chrome));
  height: calc(100dvh - var(--chat-chrome));
  min-height: 420px;
}

/* ── 2. chat-stream : 메시지 스크롤 영역(세로 나열) ─────────────────────── */
.chat-stream {
  flex: 1 1 auto;
  min-height: 0;            /* flex 컨테이너 안에서 overflow 스크롤이 먹도록 */
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: var(--chat-gap);
  padding: var(--chat-stream-pad) 4px;
  scroll-behavior: smooth;
  /* Firefox용 얇은 스크롤바 */
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
  /* 상하 페이드 마스크 — 콘텐츠가 상단 경계/입력바 쪽에서 부드럽게 사라지게 */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--chat-fade), #000 calc(100% - var(--chat-fade)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--chat-fade), #000 calc(100% - var(--chat-fade)), transparent 100%);
}
/* WebKit(크롬·사파리) 스크롤바 — 얇고 은은하게 */
.chat-stream::-webkit-scrollbar {
  width: 6px;
}
.chat-stream::-webkit-scrollbar-track {
  background: transparent;
}
.chat-stream::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: var(--radius-pill);
}
.chat-stream::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}

/* ── 3. chat-msg : 한 메시지 줄(좌/우 정렬 + 같은 발화자 그룹핑) ─────────── */
.chat-msg {
  display: flex;
  width: 100%;
}
.chat-msg--user {
  justify-content: flex-end;   /* 사용자 메시지 → 오른쪽 */
}
.chat-msg--bot {
  justify-content: flex-start; /* 봇 메시지 → 왼쪽 */
}
/* 같은 발화자가 연속되면 간격을 축소(DOM 변경 없이 인접 선택자로만) */
.chat-msg--user + .chat-msg--user,
.chat-msg--bot + .chat-msg--bot {
  margin-top: calc(var(--chat-gap-group) - var(--chat-gap));
}

/* ── 4. chat-bubble : 둥근 말풍선(위계의 핵심) ──────────────────────────── */
.chat-bubble {
  max-width: var(--chat-bubble-max);
  padding: var(--chat-pad-y) var(--chat-pad-x);
  border-radius: var(--radius-md);
  line-height: 1.65;
  font-size: var(--chat-fs-bubble);
  font-family: var(--font-sans);
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;       /* 줄바꿈 보존 */
  transition: box-shadow .18s ease, background-color .18s ease;
}

/* 사용자 버블 — 세이지 배경 + 흰 글자, 꼬리는 우하단 모서리만 살짝 깎음 */
.chat-msg--user .chat-bubble {
  background: var(--brand);
  color: #FFFFFF;
  box-shadow: var(--shadow-badge);
  border-bottom-right-radius: var(--radius-sm);
}

/* 봇 버블 — 흰 배경 + 보더 + 좌측 세이지 레일(inset 그림자로 라운드 보존) + 카드 그림자,
   꼬리는 좌하단 모서리만 살짝 깎음. 답변 속 매출/숫자 자릿수 정렬용 tabular-nums. */
.chat-msg--bot .chat-bubble {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  /* inset 3px 세이지 레일 + 카드 그림자 합성 — border-left 쓰지 않음(12px 라운드 깨짐 방지) */
  box-shadow: inset 3px 0 0 0 var(--sage), var(--shadow-card);
  /* 좌측 레일 폭(1px)만큼 왼쪽 패딩을 보정 */
  padding: var(--chat-pad-y) var(--chat-pad-x) var(--chat-pad-y) calc(var(--chat-pad-x) + 1px);
  border-bottom-left-radius: var(--radius-sm);
  font-variant-numeric: tabular-nums;
  /* 봇 답변은 마크다운 HTML(블록 요소가 줄바꿈·간격을 만든다) → 공통의 pre-wrap을 normal로 덮어
     원문 공백/개행이 이중으로 벌어지지 않게 한다(유저 버블은 평문이라 pre-wrap 유지). */
  white-space: normal;
}

/* ── 5. chat-bubble--typing : 로딩 점 3개 ───────────────────────────────── */
/* 봇 버블(#chatTyping 은 .chat-msg--bot > .chat-bubble.chat-bubble--typing 구조)에서
   흰 배경·보더·좌측 세이지 레일을 그대로 상속받고, 패딩만 아래 값으로 덮어쓴다. */
.chat-bubble--typing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 12px 16px;
}
.chat-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sage);
  display: inline-block;
  /* 두근두근 펄스(scale+opacity 박동) — 점 3개가 0.2s씩 지연돼 순차로 뛴다 */
  animation: chat-dot-pulse 1.2s infinite ease-in-out both;
}
.chat-dot:nth-child(1) { animation-delay: 0s; }
.chat-dot:nth-child(2) { animation-delay: .2s; }
.chat-dot:nth-child(3) { animation-delay: .4s; }

/* 작고 흐리게(쉴 때) → 크고 진하게(박동) → 다시 작고 흐리게 — 심장 두근거림 */
@keyframes chat-dot-pulse {
  0%, 100% {
    transform: scale(.7);
    opacity: .35;
  }
  50% {
    transform: scale(1.25);
    opacity: 1;
  }
}

/* ── 6. chat-empty : 진입 시 빈 상태(첫인상) ────────────────────────────── */
/* renderEmpty()가 innerHTML 로 .chat-empty > (배지 없음) + -title + -desc + -ex(단일)를 주입.
   아이콘 배지는 JS 가 안 그리므로 ::before 로 생성한다(텍스트/이모지 금지, 깔끔한 그라데이션 사각). */
.chat-empty {
  margin: auto;                 /* flex column 안 상하·좌우 중앙 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 460px;
  padding: 40px 28px;
  text-align: center;
  color: var(--muted);
}
.chat-empty::before {
  content: none;
}
.chat-empty-mascot {
  width: 64px;
  height: 64px;
  margin-bottom: 10px;
  flex: 0 0 auto;
  filter: drop-shadow(0 6px 14px rgba(60, 90, 70, 0.28));
  animation: bari-float 3.2s ease-in-out infinite;
}
@keyframes bari-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .chat-empty-mascot { animation: none; }
}
.chat-empty-title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text);
  margin: 0;
}
.chat-empty-desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-2);
  margin: 0;
}
/* 예시 질문 — 단일 칩(클릭 핸들러 없음). cursor/hover 변화 금지(거짓 버튼 방지). */
.chat-empty-ex {
  margin: 8px 0 0;
  padding: 8px 14px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--brand-ink);
  background: var(--brand-weak);
  border: 1px solid var(--sage-tint-2);
  border-radius: var(--radius-pill);
}

/* ── 7. chat-input : 하단 입력 바 ───────────────────────────────────────── */
.chat-input {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: var(--chat-input-gap);
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* 포커스 시 세이지 보더 + 카드 그림자 위에 3px 세이지 포커스링(shadow-pop 안 씀) */
.chat-input:focus-within {
  border-color: var(--brand);
  box-shadow: var(--shadow-card), 0 0 0 3px var(--sage-tint);
}

/* ── 8. chat-textarea : 자동 늘어나는 입력창 ────────────────────────────── */
/* ⚠ height/min-height 선언 금지 — 높이는 chat.js 가 ta.style.height=scrollHeight 로 소유.
   여기서는 max-height(상한)만 둔다. */
.chat-textarea {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  resize: none;
  font-family: var(--font-sans);
  font-size: var(--chat-fs-input);
  line-height: 1.55;
  color: var(--text);
  padding: 8px 6px;
  max-height: 140px;            /* 여러 줄 입력 시 늘어나되 상한 */
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.chat-textarea::placeholder {
  color: var(--muted);
}
.chat-textarea::-webkit-scrollbar {
  width: 6px;
}
.chat-textarea::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: var(--radius-pill);
}

/* ── 9. chat-send : 전송 버튼 ──────────────────────────────────────────── */
.chat-send {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--chat-touch);
  height: var(--chat-touch);
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  background: var(--brand);
  color: #FFFFFF;
  cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.chat-send:hover {
  background: var(--brand-ink);
  box-shadow: var(--shadow-badge);
}
.chat-send:active {
  transform: scale(.94);
}
.chat-send:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.chat-send svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  display: block;
}
/* 비활성 — opacity 트릭 대신 회색 면 + muted 아이콘 */
.chat-send:disabled {
  background: var(--surface-2);
  color: var(--muted);
  box-shadow: none;
  cursor: not-allowed;
}
.chat-send:disabled:hover {
  background: var(--surface-2);
  box-shadow: none;
}

/* ── 10. 마크다운 요소 스타일 — 봇 버블 안(renderMarkdown이 만든 표·리스트·코드·제목 등) ──
   봇 버블만 스코프(.chat-msg--bot .chat-bubble …). 모든 색/면/보더는 common.css 토큰 재사용.
   봇 버블이 이미 font-variant-numeric:tabular-nums 라서 표·코드 숫자 자릿수가 정렬된다. */

/* 표 — 가로 스크롤 가능한 블록. 헤더 면 --thead-bg, 셀은 좌정렬 기본(숫자열은 마크다운
   정렬구문 `---:`가 인라인 text-align:right 로 넣어줌 → 그게 우선). 숫자 자릿수 tabular-nums. */
.chat-msg--bot .chat-bubble table,
.chat-msg--bot .chat-bubble pre {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 8px 0;
  font-size: 13.5px;
}
.chat-msg--bot .chat-bubble table {
  border-collapse: collapse;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.chat-msg--bot .chat-bubble th,
.chat-msg--bot .chat-bubble td {
  border: 1px solid var(--line);
  padding: 7px 12px;
  text-align: left;            /* 기본 좌정렬 — 텍스트 열 가독. 숫자열은 인라인 right가 덮음 */
  vertical-align: top;
}
.chat-msg--bot .chat-bubble th {
  background: var(--thead-bg);
  color: var(--text-2);
  font-weight: 600;
  white-space: nowrap;
}
.chat-msg--bot .chat-bubble tbody tr:nth-child(even) td {
  background: var(--surface-2);  /* 짝수 행 옅은 면 — 행 구분 가독 */
}

/* 강조 — 굵게/기울임 */
.chat-msg--bot .chat-bubble strong,
.chat-msg--bot .chat-bubble b {
  font-weight: 700;
  color: var(--text);
}
.chat-msg--bot .chat-bubble em,
.chat-msg--bot .chat-bubble i {
  font-style: italic;
}

/* 문단 — 첫·마지막은 버블 패딩과 겹치지 않게 margin 제거, 사이는 한 줄 간격 */
.chat-msg--bot .chat-bubble p {
  margin: 0 0 .6em;
}
.chat-msg--bot .chat-bubble p:last-child {
  margin-bottom: 0;
}
.chat-msg--bot .chat-bubble > :first-child {
  margin-top: 0;
}
.chat-msg--bot .chat-bubble > :last-child {
  margin-bottom: 0;
}

/* 리스트 — 들여쓰기 + 항목 간 간격 */
.chat-msg--bot .chat-bubble ul,
.chat-msg--bot .chat-bubble ol {
  margin: .4em 0 .6em;
  padding-left: 1.4em;
}
.chat-msg--bot .chat-bubble li {
  margin: .2em 0;
}
.chat-msg--bot .chat-bubble li > ul,
.chat-msg--bot .chat-bubble li > ol {
  margin: .2em 0;
}

/* 제목 h1~h4 — 버블 안에서는 과하지 않게 단계적 축소 */
.chat-msg--bot .chat-bubble h1,
.chat-msg--bot .chat-bubble h2,
.chat-msg--bot .chat-bubble h3,
.chat-msg--bot .chat-bubble h4 {
  margin: .8em 0 .4em;
  line-height: 1.35;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.01em;
}
.chat-msg--bot .chat-bubble h1 { font-size: 1.3em; }
.chat-msg--bot .chat-bubble h2 { font-size: 1.18em; }
.chat-msg--bot .chat-bubble h3 { font-size: 1.06em; }
.chat-msg--bot .chat-bubble h4 { font-size: 1em; }

/* 인라인 코드 — 옅은 면 + 보더, 고정폭 */
.chat-msg--bot .chat-bubble code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .1em .35em;
}
/* 코드 블록 — pre 안의 code는 보더/면을 풀고 pre가 면을 가진다(이중 박스 방지) */
.chat-msg--bot .chat-bubble pre {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  white-space: pre;
}
.chat-msg--bot .chat-bubble pre code {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  font-size: 13px;
}

/* 인용구 — 좌측 세이지 바 + 옅은 글자 */
.chat-msg--bot .chat-bubble blockquote {
  margin: .6em 0;
  padding: .2em 0 .2em .9em;
  border-left: 3px solid var(--sage);
  color: var(--text-2);
}
.chat-msg--bot .chat-bubble blockquote p {
  margin: 0;
}

/* 링크 — 브랜드 색 + 밑줄 */
.chat-msg--bot .chat-bubble a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.chat-msg--bot .chat-bubble a:hover {
  color: var(--brand-ink);
}

/* 구분선 */
.chat-msg--bot .chat-bubble hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: .9em 0;
}

/* 표/코드를 가진 봇 버블은 폭 제한을 풀어 가로 스크롤 영역을 충분히 확보 */
.chat-msg--bot .chat-bubble:has(table),
.chat-msg--bot .chat-bubble:has(pre),
.chat-msg--bot .chat-bubble:has(.chat-chart) {
  max-width: 100%;
}

/* ── 10.5. chat-chart : 봇 답변 속 barychart 코드블록 → Chart.js 캔버스 컨테이너 ──
   chat.js 가 ```barychart {json} 블록을 파싱해 이 div(+canvas)로 치환하고 new Chart 로 그린다.
   흰 면 + 보더 + 둥근 모서리 + 여백, 높이는 max-height 로 상한(캔버스가 폭에 맞춰 반응형). */
.chat-msg--bot .chat-bubble .chat-chart {
  margin: 10px 0;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  /* 캔버스 높이 상한 — Chart.js 가 부모 높이에 맞추므로 컨테이너에 위치 컨텍스트를 준다 */
  position: relative;
  height: 280px;
  max-height: 280px;
  box-sizing: border-box;
}
/* Chart.js 가 만든 canvas 는 컨테이너(패딩 안)에 꽉 채운다(반응형: 폭 100%, 높이 부모 기준). */
.chat-msg--bot .chat-bubble .chat-chart > canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
/* 차트 렌더 대기/실패 안내 — 작고 흐린 한 줄(코드블록 원문 노출 방지) */
.chat-msg--bot .chat-bubble .chat-chart--pending {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  max-height: 60px;
  font-size: 13px;
  color: var(--muted);
}

/* ── 11. 반응형 ─────────────────────────────────────────────────────────── */
/* 태블릿 — 버블 폭만 살짝 넓히고 스트림 패딩 축소 */
@media (max-width: 1023px) {
  #chatView {
    --chat-bubble-max: 82%;
    --chat-stream-pad: 18px;
  }
}
/* 모바일 — 폭 100%, 크롬 높이/간격/터치 크기를 좁은 화면에 맞춤 */
@media (max-width: 639px) {
  #chatView {
    --chat-chrome: calc(var(--topbar-h) + (var(--main-gutter) * 2) + 16px + 72px);
    --chat-measure: 100%;
    --chat-bubble-max: 86%;
    --chat-gap: 14px;
    --chat-pad-x: 14px;
    --chat-pad-y: 10px;
    --chat-stream-pad: 14px;
    --chat-touch: 44px;
    --chat-fade: 16px;
  }
  .chat-wrap {
    min-height: 0;
  }
  .chat-empty {
    padding: 28px 20px;
  }
  .chat-empty-title {
    font-size: 16px;
  }
  /* 좁은 화면 — 차트 높이를 줄여 말풍선이 과하게 길어지지 않게 */
  .chat-msg--bot .chat-bubble .chat-chart {
    height: 220px;
    max-height: 220px;
    padding: 10px;
  }
}
/* 가로모드(낮은 높이) — 세로 여백을 더 줄여 입력 바를 확보 */
@media (max-height: 480px) {
  #chatView {
    --chat-stream-pad: 10px;
    --chat-gap: 10px;
  }
  .chat-wrap {
    min-height: 0;
  }
}
/* iOS 줌 차단 — 모바일 사파리에서 입력 포커스 시 자동 확대 방지(16px 이상) */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 639px) {
    .chat-textarea {
      font-size: 16px;
    }
  }
}

/* ── 12. 모션 접근성 — 모션 최소화 선호 시 점 애니메이션/부드러운 스크롤 끔 ── */
@media (prefers-reduced-motion: reduce) {
  .chat-dot {
    animation: none;
    opacity: .6;
  }
  .chat-stream {
    scroll-behavior: auto;
  }
}

/* chat.css — 끝(EOF) */

/* SPA 뷰 전환 — 분석 챗봇 뷰(.view-chat)일 때 다른 섹션(퍼포먼스 테이블 등)을 숨겨 챗봇만 단독 표시.
   cost.css의 .view-cost 패턴과 동일. 이 규칙 누락이 "테이블 밑에 챗봇이 같이 나오는" 버그 원인이었음. */
.container.view-chat > .section:not(#chatView),
.container.view-chat > #bannerSlot,
.container.view-chat > #emptySlot { display: none; }


/* 대화 이력(세션) 목록 바 */
.chat-sessions { display:flex; gap:6px; overflow-x:auto; padding:6px 2px 10px; flex:0 0 auto; border-bottom:1px solid var(--line); margin-bottom:10px; }
.chat-sess-new { flex:0 0 auto; padding:6px 12px; border:1px dashed var(--line-strong,var(--line)); border-radius:999px; background:transparent; color:var(--brand-ink,var(--text)); font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; }
.chat-sess-new:hover { background:var(--brand-weak,var(--surface-2)); border-color:var(--brand); }
.chat-sess-item { flex:0 0 auto; display:flex; align-items:center; gap:4px; padding:6px 8px 6px 12px; border:1px solid var(--line); border-radius:999px; background:var(--surface,#fff); font-size:12px; cursor:pointer; white-space:nowrap; max-width:170px; }
.chat-sess-item:hover { border-color:var(--brand); }
.chat-sess-item.is-active { background:var(--brand-weak,var(--surface-2)); border-color:var(--brand); }
.chat-sess-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-sess-del { border:none; background:transparent; color:var(--muted); cursor:pointer; font-size:15px; line-height:1; padding:0 3px; border-radius:50%; }
.chat-sess-del:hover { color:#D6336C; }


/* 대화 목록 — 좌측 세로 리스트 레이아웃 */
.chat-layout { display:flex; gap:14px; height:calc(100dvh - var(--chat-chrome, 210px)); min-height:0; }
.chat-sessions { flex:0 0 210px; flex-direction:column; overflow-x:hidden; overflow-y:auto; border-right:1px solid var(--line); border-bottom:none; padding:4px 12px 4px 0; margin:0; }
.chat-sess-item { max-width:none; width:100%; justify-content:space-between; }
.chat-sess-new { width:100%; justify-content:center; margin-bottom:4px; }
.chat-wrap { flex:1 1 auto; min-width:0; height:100%; }
@media (max-width:720px){ .chat-sessions{ flex-basis:140px; } }