/* chat.css — ChartPug AI 채팅 (홈·앱 같이 씀). 이름은 모두 ai- 로 시작 (앱 스타일과 안 겹치게) */
.ai-root { --ai-bg: #0d0d10; --ai-surface: #16161a; --ai-raise: #1d1d22; --ai-edge: #26262c; --ai-line: #1c1c21;
  --ai-ink: #ececef; --ai-muted: #8b8f98; --ai-dim: #5f636b; --ai-point: #f5b841; --ai-on: #1a1408;
  --ai-up: #26a69a; --ai-down: #ef5350;
  --ai-font: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --ai-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; color-scheme: dark }

/* 떠 있는 버튼 */
.ai-fab { position: fixed; z-index: 55; right: calc(20px + env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px 0 16px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--ai-point); color: var(--ai-on); font: 700 14px var(--ai-font); letter-spacing: -.01em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 10px 28px rgba(0,0,0,.55); transition: transform .15s, background .15s }
.ai-fab:hover { background: color-mix(in srgb, var(--ai-point) 88%, #fff); transform: translateY(-1px) }
.ai-fab svg { width: 18px; height: 18px }
.ai-fab[hidden] { display: none }

/* 패널 */
.ai-panel { position: fixed; z-index: 60; top: 0; right: 0; bottom: 0; width: min(440px, 100%); display: flex; flex-direction: column;
  background: var(--ai-bg); border-left: 1px solid var(--ai-edge); box-shadow: -24px 0 60px rgba(0,0,0,.5);
  color: var(--ai-ink); font: 14px/1.6 var(--ai-font); padding-top: env(safe-area-inset-top, 0px);
  animation: ai-in .22s cubic-bezier(.2,.8,.2,1) }
.ai-panel[hidden] { display: none }
@keyframes ai-in { from { transform: translateX(24px); opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .ai-panel, .ai-dots i { animation: none } }

.ai-head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 18px; border-bottom: 1px solid var(--ai-line) }
.ai-mark { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--ai-point); color: var(--ai-on) }
.ai-mark svg { width: 16px; height: 16px }
.ai-title { flex: 1; min-width: 0 }
.ai-title b { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.01em }
.ai-title span { display: block; font-size: 12px; color: var(--ai-muted) }
.ai-x { flex: none; width: 34px; height: 34px; border: 0; border-radius: 10px; background: transparent; color: var(--ai-muted); cursor: pointer; display: grid; place-items: center }
.ai-x:hover { background: var(--ai-raise); color: var(--ai-ink) }
.ai-x svg { width: 18px; height: 18px }

.ai-log { flex: 1; overflow-y: auto; padding: 20px 18px 8px; display: flex; flex-direction: column; gap: 20px; overscroll-behavior: contain }

/* 처음 화면 */
.ai-hello { display: flex; flex-direction: column; gap: 14px; padding-top: 6px }
.ai-hello h3 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.35; text-wrap: balance }
.ai-hello p { margin: -6px 0 0; color: var(--ai-muted); font-size: 13px }
.ai-sug { display: flex; flex-direction: column; gap: 8px }
.ai-sug button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 13px 14px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--ai-edge); background: var(--ai-surface); color: var(--ai-ink); font: 500 14px var(--ai-font); transition: border-color .15s, background .15s }
.ai-sug button span { flex: 1; min-width: 0 }
.ai-sug button svg { flex: none; width: 16px; height: 16px; color: var(--ai-dim); transition: color .15s, transform .15s }
.ai-sug button:hover { border-color: color-mix(in srgb, var(--ai-point) 45%, var(--ai-edge)); background: var(--ai-raise) }
.ai-sug button:hover svg { color: var(--ai-point); transform: translateX(2px) }

/* 메시지 */
.ai-me { align-self: flex-end; max-width: 85%; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: #26262c; color: #fff; white-space: pre-wrap; word-break: break-word }
.ai-bot { display: flex; min-width: 0 }   /* 답 앞 아이콘 없음 (제목 줄 아이콘과 겹쳐 보여서) */
.ai-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px }
.ai-txt { margin: 0; white-space: pre-wrap; word-break: break-word }
.ai-note { margin: 0; font-size: 12px; color: var(--ai-dim) }
.ai-mut { margin: 0; color: var(--ai-muted) }

/* 글 속 종목 코드: 누르면 그 종목 차트 (밑줄 점선 + 앰버) */
.ai-sym { display: inline; padding: 0 3px; margin: 0 -1px; border: 0; border-radius: 5px; background: rgba(245,184,65,.12); color: var(--ai-point);
  font: 600 .95em var(--ai-mono); cursor: pointer; text-decoration: underline dotted rgba(245,184,65,.55); text-underline-offset: 3px }
.ai-sym:hover { background: rgba(245,184,65,.24); text-decoration-style: solid }

/* 데이터 보기 (접힘) */
.ai-data summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ai-dim) }
.ai-data summary::-webkit-details-marker { display: none }
.ai-data summary::before { content: "▸"; font-size: 10px; transition: transform .15s }
.ai-data[open] summary::before { transform: rotate(90deg) }
.ai-data summary:hover { color: var(--ai-muted) }
.ai-rt { margin-top: 8px; overflow-x: auto; border: 1px solid var(--ai-edge); border-radius: 10px }
.ai-rt table { border-collapse: collapse; font-size: 12px; width: 100% }
.ai-rt th, .ai-rt td { padding: 6px 9px; border-bottom: 1px solid var(--ai-line); text-align: left; white-space: nowrap }
.ai-rt tr:last-child td { border-bottom: 0 }
.ai-rt th { color: var(--ai-muted); font-weight: 600; background: #121215 }
.ai-rt .n { font-family: var(--ai-mono); font-variant-numeric: tabular-nums } .ai-rt .up { color: var(--ai-up) } .ai-rt .down { color: var(--ai-down) }
.ai-rt pre { margin: 0; padding: 8px 10px; border-top: 1px solid var(--ai-line); font: 11.5px/1.5 var(--ai-mono); color: var(--ai-dim); white-space: pre-wrap; word-break: break-word }

/* 로그인·가입 안내 카드 */
.ai-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 14px; border: 1px solid var(--ai-edge); background: var(--ai-surface) }
.ai-card p { margin: 0 }
.ai-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 42px; padding: 0 16px; border-radius: 11px; border: 0; cursor: pointer; font: 700 14px var(--ai-font) }
.ai-btn.g { background: #fff; color: #1f1f1f } .ai-btn.g:hover { background: #f1f1f1 }
.ai-btn.g svg { width: 18px; height: 18px }
.ai-btn.p { background: var(--ai-point); color: var(--ai-on); box-shadow: inset 0 1px 0 rgba(255,255,255,.28) } .ai-btn.p:hover { background: color-mix(in srgb, var(--ai-point) 88%, #fff) }

/* 기다리는 점 + 단계 문구 (질문 의도 파악 → 데이터베이스 검색 → 결과 분석 → 답변 정리) */
.ai-wait { display: flex; align-items: center; gap: 10px }
.ai-stage { font-size: 13px; color: var(--ai-muted) }
.ai-stage.on { animation: ai-stage .35s ease-out }
@keyframes ai-stage { from { opacity: 0; transform: translateY(4px) } }
.ai-dots { display: inline-flex; gap: 5px; padding: 8px 0 }
.ai-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--ai-muted); animation: ai-dot 1.1s infinite ease-in-out }
.ai-dots i:nth-child(2) { animation-delay: .15s } .ai-dots i:nth-child(3) { animation-delay: .3s }
@keyframes ai-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0) } 40% { opacity: 1; transform: translateY(-3px) } }

/* 입력 */
.ai-form { padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--ai-line) }
.ai-input { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 16px; border: 1px solid var(--ai-edge); background: var(--ai-surface); transition: border-color .15s }
.ai-input:focus-within { border-color: color-mix(in srgb, var(--ai-point) 55%, var(--ai-edge)) }
.ai-input textarea { box-sizing: border-box; flex: 1; min-width: 0; resize: none; border: 0; outline: none; background: transparent; color: var(--ai-ink); font: 15px/22px var(--ai-font); padding: 8px 0; height: 38px; max-height: 120px; align-self: center }
.ai-input textarea::placeholder { color: var(--ai-dim) }
.ai-send { flex: none; width: 36px; height: 36px; border-radius: 11px; border: 0; cursor: pointer; display: grid; place-items: center; background: var(--ai-point); color: var(--ai-on) }
.ai-send svg { width: 18px; height: 18px }
.ai-send:disabled { background: var(--ai-raise); color: var(--ai-dim); cursor: default }