/**
 * StoreSage 위젯 스타일 — 시안 C-1/C-2/C-3/C-4 충실 반영.
 * 격리: 전 선택자 .storesage-root 하위로 스코프 + ss- 네임스페이스(상점 테마 충돌 0).
 * 토큰: --jk-*(브랜드 화이트라벨) / --ss-accent(셀러 1색) / --store-*(상점 매칭).
 * 색·폰트·간격 하드코딩 금지 — 변수만. 셀러 강조색은 인라인 --ss-accent로 주입.
 */
.storesage-root {
  --jk-primary:#4F46E5; --jk-on-primary:#fff;
  --jk-success:#059669; --jk-warning:#D97706; --jk-danger:#DC2626;
  --jk-radius:8px;
  /* 위젯 강조색 — 셀러가 1색 선택(설정에서 인라인 주입, 아래는 기본값) */
  --ss-accent:#B0573A; --ss-accent-hover:#964930; --ss-tint:#FBF3EE; --ss-tint-2:#F4E7DF;
  /* 상점 매칭 중립색 */
  --store-ink:#1C1917; --store-muted:#79716B; --store-soft:#A8A29E;
  --store-line:#EBE5DF; --store-bg:#FAF7F4;
  font-family:Inter,Pretendard,system-ui,sans-serif;
  color:var(--store-ink); -webkit-font-smoothing:antialiased;
}
.storesage-root *,
.storesage-root *::before,
.storesage-root *::after { box-sizing:border-box; }

@keyframes ss-ping {0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(2.4);opacity:0}}
@keyframes ss-blink {0%,80%,100%{opacity:.22;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}

/* ── 컨테이너 ───────────────────────────────────────────── */
.ss-chat {
  border:1px solid var(--store-line); border-radius:16px; overflow:hidden;
  box-shadow:0 1px 2px rgba(28,25,23,.04),0 22px 50px -30px rgba(28,25,23,.28);
  background:var(--store-bg);
}

/* ── 헤더 ───────────────────────────────────────────────── */
.ss-chat__header { padding:14px 18px; background:var(--ss-tint); border-bottom:1px solid var(--ss-tint-2); }
.ss-chat__bar { display:flex; align-items:center; gap:12px; }
.ss-chat__avatar {
  width:38px; height:38px; border-radius:11px; flex-shrink:0;
  background:linear-gradient(140deg,var(--ss-accent),#D98A5E);
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.ss-chat__id { flex:1; }
.ss-chat__name { display:flex; align-items:center; gap:8px; font:600 15px Inter; }
.ss-chat__badge {
  font-size:10px; font-weight:700; color:var(--ss-accent); background:#fff;
  border:1px solid var(--ss-tint-2); border-radius:5px; padding:1px 6px; letter-spacing:.04em;
}
.ss-chat__status { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--store-muted); margin-top:1px; }
.ss-dot { width:7px; height:7px; border-radius:999px; background:var(--jk-success); position:relative; display:inline-flex; }
.ss-dot::after { content:""; position:absolute; inset:0; border-radius:999px; background:var(--jk-success); animation:ss-ping 1.8s ease-out infinite; }
.ss-lang {
  display:flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:var(--store-muted);
  background:#fff; border:1px solid var(--store-line); border-radius:999px; padding:6px 10px; cursor:pointer;
}
.ss-ctx { display:flex; align-items:center; gap:9px; margin-top:12px; background:#fff; border:1px solid var(--store-line); border-radius:10px; padding:7px 10px; }
.ss-ctx__img { width:30px; height:30px; border-radius:7px; object-fit:cover; flex-shrink:0; background:var(--store-bg); }
.ss-ctx__title { font-size:12.5px; font-weight:600; line-height:1.2; }
.ss-ctx__title span { color:var(--store-muted); font-weight:400; }
.ss-ctx__tag { margin-left:auto; font-size:10.5px; font-weight:600; color:var(--ss-accent); background:var(--ss-tint); border-radius:5px; padding:3px 7px; }

/* ── 메시지 영역 ─────────────────────────────────────────── */
.ss-messages { padding:18px 18px 8px; background:var(--store-bg); max-height:430px; overflow:auto; }
.ss-msg { display:flex; gap:9px; margin-bottom:14px; }
.ss-msg--ai { max-width:84%; }
.ss-msg--user { justify-content:flex-end; }
.ss-msg__avatar { width:26px; height:26px; border-radius:8px; background:var(--ss-accent); flex-shrink:0; margin-top:2px; }
.ss-bubble { font-size:13.5px; line-height:1.6; }
.ss-bubble--ai { background:#fff; border:1px solid var(--store-line); border-radius:3px 13px 13px 13px; padding:12px 14px; }
.ss-bubble--user { background:var(--ss-accent); color:#fff; border-radius:13px 3px 13px 13px; padding:11px 14px; max-width:72%; line-height:1.5; }
.ss-bubble--guard { background:#FFF7ED; border-color:var(--jk-warning); }

/* 근거 출처 칩 */
.ss-sources { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.ss-source { display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--store-muted); background:var(--store-bg); border:1px solid var(--store-line); border-radius:6px; padding:3px 8px; }

/* 질문칩 */
.ss-chips { margin:0 0 16px 35px; }
.ss-chips__label { font-size:11px; font-weight:600; color:var(--store-soft); margin-bottom:8px; letter-spacing:.02em; }
.ss-chips__list { display:flex; flex-wrap:wrap; gap:8px; }
.ss-chip {
  display:inline-flex; align-items:center; gap:6px; border:1px solid var(--ss-accent); color:var(--ss-accent);
  background:#fff; border-radius:999px; padding:8px 13px; font-size:12.5px; font-weight:500; cursor:pointer;
}
.ss-chip:hover { background:var(--ss-tint); }

/* 인라인 상품카드 */
.ss-card { display:flex; gap:12px; background:#fff; border:1px solid var(--store-line); border-radius:12px; padding:10px; margin-top:10px; align-items:center; }
.ss-card__img { width:62px; height:62px; border-radius:9px; object-fit:cover; flex-shrink:0; background:var(--store-bg); }
.ss-card__body { flex:1; min-width:0; }
.ss-card__title { font-size:13px; font-weight:600; line-height:1.25; }
.ss-card__meta { font-size:11.5px; color:var(--store-muted); margin:2px 0 5px; }
.ss-card__row { display:flex; align-items:center; gap:8px; }
.ss-card__price { font-size:15px; font-weight:700; }
.ss-stock { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; color:var(--jk-success); }
.ss-stock::before { content:""; width:6px; height:6px; border-radius:999px; background:var(--jk-success); }
.ss-stock--out { color:var(--jk-danger); }
.ss-stock--out::before { background:var(--jk-danger); }
.ss-card__cta { border:none; background:var(--ss-accent); color:#fff; border-radius:8px; padding:9px 14px; font:600 13px Inter; cursor:pointer; flex-shrink:0; }
.ss-card__cta:hover { background:var(--ss-accent-hover); }
.ss-card__cta:disabled { background:var(--store-soft); cursor:not-allowed; }

/* 라이브 검증 라인 */
.ss-live { display:flex; align-items:center; gap:6px; margin-top:7px; font-size:11px; color:var(--store-muted); }

/* 생각 중(타이핑) */
.ss-typing { display:inline-flex; gap:4px; padding:12px 14px; background:#fff; border:1px solid var(--store-line); border-radius:3px 13px 13px 13px; }
.ss-typing span { width:6px; height:6px; border-radius:999px; background:var(--store-soft); animation:ss-blink 1.4s infinite both; }
.ss-typing span:nth-child(2){animation-delay:.2s} .ss-typing span:nth-child(3){animation-delay:.4s}

/* 한도 소진/오류 배너 */
.ss-banner { display:flex; align-items:center; gap:8px; font-size:12.5px; padding:10px 12px; border-radius:10px; margin:0 0 12px; }
.ss-banner--limit { background:#FEF2F2; color:var(--jk-danger); border:1px solid #FECACA; }

/* ── 입력 ───────────────────────────────────────────────── */
.ss-input { padding:12px 16px 14px; background:#fff; border-top:1px solid var(--store-line); }
.ss-input__box { display:flex; align-items:center; gap:10px; border:1px solid var(--store-line); border-radius:11px; padding:5px 6px 5px 14px; }
.ss-input__box input { flex:1; border:none; outline:none; font:400 13.5px Inter; background:transparent; color:var(--store-ink); }
.ss-input__send { width:34px; height:34px; border:none; border-radius:9px; background:var(--ss-accent); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
.ss-input__send:disabled { background:var(--store-soft); cursor:not-allowed; }
.ss-input__foot { display:flex; align-items:center; gap:5px; margin-top:8px; font-size:10.5px; color:var(--store-soft); }
.ss-input__foot .ss-powered { margin-left:auto; font-weight:600; letter-spacing:.02em; }

/* ── 플로팅 모드 (C-2) ──────────────────────────────────── */
.storesage-root.ss-floating { position:fixed; right:22px; bottom:22px; z-index:99999; width:auto; }
.ss-floating .ss-chat { width:380px; max-width:calc(100vw - 44px); }
.ss-floating.ss-collapsed .ss-chat { display:none; }
.ss-launcher {
  display:none; align-items:center; gap:10px; background:var(--ss-accent); color:#fff;
  border:none; border-radius:999px; padding:13px 18px; font:600 14px Inter; cursor:pointer;
  box-shadow:0 10px 30px -8px rgba(28,25,23,.5); margin-left:auto;
}
.ss-floating.ss-collapsed .ss-launcher { display:inline-flex; }
.ss-chat__close { background:none; border:none; color:var(--store-muted); cursor:pointer; padding:4px; display:none; }
.ss-floating .ss-chat__close { display:inline-flex; }

/* ── 모바일 (C-4) ───────────────────────────────────────── */
@media (max-width:560px) {
  .ss-floating .ss-chat { position:fixed; inset:auto 0 0 0; width:100%; max-width:100%; border-radius:16px 16px 0 0; }
  .ss-messages { max-height:60vh; }
  .ss-msg--ai { max-width:92%; }
}