/* =========================================================
   HIRO AI Skin Consultant — chat widget
   ========================================================= */
.hc-launch {
  position: fixed; right: 24px; bottom: 24px; z-index: 120;
  display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 24px 0 8px;
  border-radius: 999px; background: var(--ink); color: #F4EFE7;
  box-shadow: 0 18px 40px -14px rgba(18,17,22,.55), 0 0 0 1px rgba(255,255,255,.06) inset;
  transition: transform .5s var(--ease), opacity .4s var(--ease), box-shadow .4s var(--ease);
}
.hc-launch:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -16px rgba(18,17,22,.6); }
.hc-launch__orb { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--gold-2), var(--gold)); color: var(--night); flex: none; }
.hc-launch__orb::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--gold-2); opacity: 0; animation: hcRing 3.2s var(--ease) infinite; }
@keyframes hcRing { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
.hc-launch__orb svg { width: 22px; height: 22px; }
.hc-launch__txt { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.hc-launch__txt b { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.hc-launch__txt small { font-family: var(--serif-en); font-style: italic; font-size: 13px; color: var(--gold-2); }
.hc-open .hc-launch { opacity: 0; pointer-events: none; transform: translateY(12px) scale(.96); }

.hc-nudge {
  position: fixed; right: 24px; bottom: 96px; z-index: 119; max-width: 260px;
  background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 14px 14px 4px 14px;
  padding: 14px 36px 14px 16px; font-size: 13.5px; line-height: 1.6; box-shadow: 0 20px 40px -24px rgba(30,31,42,.4);
  opacity: 0; transform: translateY(8px); pointer-events: none; transition: all .6s var(--ease);
}
.hc-nudge.is-on { opacity: 1; transform: none; pointer-events: auto; }
.hc-nudge button { position: absolute; top: 6px; right: 8px; width: 24px; height: 24px; color: var(--muted); font-size: 18px; line-height: 1; }
.hc-open .hc-nudge { opacity: 0; pointer-events: none; }

/* ---------- Panel ---------- */
.hc {
  position: fixed; right: 24px; bottom: 24px; z-index: 130;
  width: min(620px, calc(100vw - 48px)); height: min(820px, calc(100svh - 48px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--ivory); border-radius: 20px;
  box-shadow: 0 40px 100px -30px rgba(18,17,22,.55), 0 0 0 1px rgba(30,31,42,.08);
  opacity: 0; transform: translateY(24px) scale(.97); transform-origin: bottom right; pointer-events: none;
  transition: opacity .45s var(--ease), transform .55s var(--ease);
}
.hc-open .hc { opacity: 1; transform: none; pointer-events: auto; }

.hc__hd { flex: none; display: flex; align-items: center; gap: 12px; padding: 16px 14px 16px 18px; background: var(--ink); color: #F4EFE7; position: relative; }
.hc__hd::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-2), transparent); opacity: .5; }
.hc__avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; background: linear-gradient(135deg, var(--gold-2), var(--gold)); color: var(--night); }
.hc__avatar svg { width: 20px; height: 20px; }
.hc__title { flex: 1; min-width: 0; }
.hc__title b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.hc__title small { display: flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(244,239,231,.6); }
.hc__title small::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #7FC29B; box-shadow: 0 0 0 3px rgba(127,194,155,.18); }
.hc__icon { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: rgba(244,239,231,.75); transition: background .3s, color .3s; }
.hc__icon:hover { background: rgba(255,255,255,.08); color: #fff; }
.hc__icon svg { width: 18px; height: 18px; }

.hc__body { flex: 1; overflow-y: auto; padding: 22px 16px 8px; scroll-behavior: smooth; overscroll-behavior: contain; }
.hc__body::-webkit-scrollbar { width: 4px; }
.hc__body::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

.hc__notice { font-size: 11.5px; line-height: 1.6; color: var(--muted); text-align: center; margin: 0 8px 20px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px; }

.hc-row { display: flex; gap: 10px; margin-bottom: 14px; animation: hcIn .45s var(--ease) both; }
@keyframes hcIn { from { opacity: 0; transform: translateY(8px); } }
.hc-row--bot .hc-row__av { width: 28px; height: 28px; border-radius: 50%; flex: none; margin-top: 2px; display: grid; place-items: center; background: linear-gradient(135deg, var(--gold-2), var(--gold)); color: var(--night); }
.hc-row--bot .hc-row__av svg { width: 14px; height: 14px; }
.hc-row--user { justify-content: flex-end; }
.hc-row__col { min-width: 0; flex: 1; max-width: calc(100% - 38px); display: flex; flex-direction: column; gap: 10px; }
.hc-bubble { align-self: flex-start; max-width: 100%; font-size: 14.5px; line-height: 1.7; padding: 12px 15px; border-radius: 4px 16px 16px 16px; background: #fff; color: var(--ink); box-shadow: 0 1px 0 rgba(30,31,42,.05); white-space: pre-line; word-break: keep-all; overflow-wrap: anywhere; }
.hc-bubble b { font-weight: 600; color: var(--ink); background: linear-gradient(transparent 62%, rgba(216,189,140,.35) 0); }
.hc-row--user .hc-bubble { background: var(--ink); color: #F4EFE7; border-radius: 16px 4px 16px 16px; max-width: 80%; }
.hc-bubble--err { background: #FBEDEA; color: #8A3B2C; }
.hc-bubble--err button { margin-top: 8px; font-size: 13px; text-decoration: underline; color: inherit; display: block; }

/* typing */
.hc-typing { display: inline-flex; gap: 5px; padding: 16px 16px; background: #fff; border-radius: 4px 16px 16px 16px; }
.hc-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: hcDot 1.2s infinite ease-in-out; }
.hc-typing i:nth-child(2) { animation-delay: .15s; }
.hc-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes hcDot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }
.hc-typing__txt { font-size: 12px; color: var(--muted); margin: 6px 0 0 2px; font-family: var(--serif-en); font-style: italic; }

/* product cards */
.hc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 2px 0 6px; }
.hc-card { min-width: 0; background: #fff; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 0 rgba(30,31,42,.05), 0 12px 24px -20px rgba(30,31,42,.35); text-align: left; transition: transform .4s var(--ease); animation: hcIn .5s var(--ease) both; }
.hc-card:hover { transform: translateY(-3px); }
.hc-card__img { position: relative; aspect-ratio: 1; background: #fff; }
.hc-card__img img { width: 100%; height: 100%; object-fit: contain; padding: 10%; }
.hc-card__step { position: absolute; top: 8px; left: 8px; font-family: var(--serif-en); font-size: 11px; letter-spacing: .12em; color: var(--gold); background: rgba(247,244,239,.9); padding: 2px 8px; border-radius: 999px; }
.hc-card__body { padding: 10px 12px 12px; display: flex; flex-direction: column; flex: 1; border-top: 1px solid rgba(30,31,42,.06); }
.hc-card__series { font-family: var(--serif-en); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.hc-card__name { font-size: 13.5px; font-weight: 600; line-height: 1.4; margin-top: 2px; }
.hc-card__why { font-size: 12px; line-height: 1.55; color: var(--muted); margin-top: 6px; flex: 1; }
.hc-card__more { margin-top: 10px; font-size: 12px; font-weight: 500; color: var(--ink); display: inline-flex; align-items: center; gap: 4px; }
.hc-card__more::after { content: "→"; transition: transform .3s var(--ease); }
.hc-card:hover .hc-card__more::after { transform: translateX(3px); }

/* ---------- Skin survey (shown before chat) ---------- */
.hw { display: none; flex: 1; min-height: 0; flex-direction: column; padding: 20px 28px 18px; overflow-y: auto; overscroll-behavior: contain; }
.hc--intake .hw { display: flex; }
.hc--intake .hc__body, .hc--intake .hc__ft { display: none; }
.hw__top { display: flex; align-items: center; gap: 14px; min-height: 36px; }
.hw__back { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--ink); border: 1px solid var(--line); background: #fff; transition: border-color .3s; }
.hw__back:hover { border-color: var(--ink); }
.hw__back[hidden] { display: grid; visibility: hidden; }
.hw__back svg { width: 16px; height: 16px; }
.hw__prog { flex: 1; height: 3px; border-radius: 3px; background: rgba(30,31,42,.1); overflow: hidden; }
.hw__prog i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--gold-2), var(--gold)); transition: width .6s var(--ease); }
.hw__count { font-family: var(--serif-en); font-size: 15px; color: var(--ink); letter-spacing: .06em; white-space: nowrap; }
.hw__count em { font-style: normal; color: var(--muted); font-size: 13px; }

.hw__stage { padding-top: 22px; }
.hw__stage.is-next { animation: hwNext .45s var(--ease) both; }
.hw__stage.is-prev { animation: hwPrev .45s var(--ease) both; }
@keyframes hwNext { from { opacity: 0; transform: translateX(28px); } }
@keyframes hwPrev { from { opacity: 0; transform: translateX(-28px); } }
.hw__intro { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; margin-bottom: 18px; border-radius: 999px; background: #fff; font-size: 13px; color: var(--ink); box-shadow: 0 1px 0 rgba(30,31,42,.05); }
.hw__intro svg { width: 16px; height: 16px; color: var(--gold); flex: none; }
.hw__intro b { font-weight: 600; }
.hw__eyebrow { font-family: var(--serif-en); font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.hw__q { font-family: var(--serif-kr); font-weight: 400; font-size: clamp(24px, 3vw, 30px); line-height: 1.3; letter-spacing: -.035em; outline: none; }
.hw__sub { font-size: 14px; color: var(--muted); margin: 8px 0 22px; }

.hw__opts { display: grid; gap: 10px; }
.hw__opts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hw__opts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hw__opt { position: relative; min-height: 58px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid rgba(30,31,42,.12); color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center; transition: border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); }
.hw__opts--desc .hw__opt { min-height: 72px; align-items: flex-start; text-align: left; padding: 14px 16px; }
.hw__opt:hover { border-color: var(--ink); transform: translateY(-1px); }
.hw__opt-v { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.hw__opt-d { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.hw__opt[aria-checked="true"], .hw__opt[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #F4EFE7; }
.hw__opt[aria-checked="true"] .hw__opt-d, .hw__opt[aria-pressed="true"] .hw__opt-d { color: rgba(244,239,231,.65); }
.hw__opt[aria-checked="true"]::after, .hw__opt[aria-pressed="true"]::after { content: "✓"; position: absolute; top: 8px; right: 10px; font-size: 11px; font-weight: 700; color: var(--gold-2); }

.hw__toggle { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid rgba(30,31,42,.12); cursor: pointer; }
.hw__toggle input { width: 20px; height: 20px; accent-color: var(--ink); flex: none; }
.hw__toggle b { display: block; font-size: 14px; font-weight: 600; }
.hw__toggle small { display: block; font-size: 12px; color: var(--muted); }
.hw__note { display: flex; flex-direction: column; gap: 4px; margin-top: 16px; font-size: 13px; font-weight: 600; }
.hw__note small { font-weight: 400; color: var(--muted); }
.hw__note input { font: inherit; font-weight: 400; font-size: 14px; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 8px 0; outline: 0; }
.hw__note input:focus { border-color: var(--ink); }

.hw__foot { margin-top: auto; padding-top: 22px; display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.hw__next { height: 54px; border-radius: 999px; background: var(--ink); color: #F4EFE7; font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: opacity .3s, transform .3s var(--ease), background .3s; }
.hw__next em { font-style: normal; font-weight: 400; font-size: 13px; color: var(--gold-2); }
.hw__next:not(:disabled):hover { transform: translateY(-1px); }
.hw__next:disabled { opacity: .28; cursor: default; }
.hw__next--go { background: linear-gradient(135deg, var(--gold-2), var(--gold)); color: var(--night); }
.hw__next--go svg { width: 16px; height: 16px; }
.hw__skip { align-self: center; font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; padding: 4px 8px; }
.hw__skip:hover { color: var(--ink); }
.hw__notice { font-size: 11px; line-height: 1.55; color: var(--muted); text-align: center; opacity: .85; }

/* submitted profile (user side) */
.hc-profile { background: var(--ink); color: #F4EFE7; border-radius: 16px 4px 16px 16px; padding: 14px 16px; width: min(100%, 360px); }
.hc-profile__ttl { font-family: var(--serif-en); font-style: italic; font-size: 13px; color: var(--gold-2); margin-bottom: 8px; }
.hc-profile dl div { display: flex; gap: 12px; padding: 4px 0; font-size: 13px; border-top: 1px solid rgba(255,255,255,.08); }
.hc-profile dl div:first-child { border-top: 0; }
.hc-profile dt { width: 64px; flex: none; color: rgba(244,239,231,.55); }
.hc-profile dd { flex: 1; }

/* chips */
.hc-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 38px; margin: -2px 0 16px; animation: hcIn .5s var(--ease) .1s both; }
.hc-chip { height: 36px; padding: 0 14px; border-radius: 999px; font-size: 13px; border: 1px solid rgba(30,31,42,.18); background: var(--paper); color: var(--ink); transition: all .25s var(--ease); }
.hc-chip:hover { border-color: var(--ink); }
.hc-chip[aria-pressed="true"] { background: var(--ink); color: #F4EFE7; border-color: var(--ink); }
.hc-chip--done { background: linear-gradient(135deg, var(--gold-2), var(--gold)); border-color: transparent; color: var(--night); font-weight: 600; }
.hc-chip--done:disabled { opacity: .45; cursor: default; }
.hc-chips.is-used { display: none; }

/* composer */
.hc__ft { flex: none; padding: 10px 12px 12px; border-top: 1px solid var(--line); background: var(--paper); }
.hc__form { display: flex; align-items: flex-end; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 6px 6px 6px 14px; transition: border-color .3s; }
.hc__form:focus-within { border-color: var(--ink); }
.hc__input { flex: 1; border: 0; outline: 0; resize: none; font: inherit; font-size: 14.5px; line-height: 1.5; max-height: 110px; padding: 7px 0; background: transparent; color: var(--ink); }
.hc__send { width: 38px; height: 38px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--ink); color: #fff; transition: background .3s, opacity .3s; }
.hc__send:disabled { opacity: .3; cursor: default; }
.hc__send:not(:disabled):hover { background: var(--gold); }
.hc__send svg { width: 18px; height: 18px; }
.hc__legal { font-size: 10.5px; color: var(--muted); text-align: center; margin-top: 8px; letter-spacing: -.01em; }

/* in-page CTA */
.ai-cta { margin-top: clamp(64px, 7vw, 100px); display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 56px); background: var(--ink); color: #F4EFE7; border-radius: 4px; position: relative; overflow: hidden; }
.ai-cta::before { content: ""; position: absolute; width: 420px; height: 420px; right: -120px; top: -200px; border-radius: 50%; background: radial-gradient(circle, rgba(216,189,140,.28), transparent 65%); }
.ai-cta__txt { position: relative; }
.ai-cta__txt .eyebrow { color: var(--gold-2); margin-bottom: 12px; }
.ai-cta__txt h3 { font-family: var(--serif-kr); font-weight: 400; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.4; letter-spacing: -.03em; }
.ai-cta__txt p { color: rgba(244,239,231,.65); font-size: 14.5px; margin-top: 8px; }
.ai-cta .btn { position: relative; flex: none; margin: 0; }

@media (max-width: 760px) {
  .hc-launch { right: 16px; bottom: 16px; height: 56px; padding: 0 6px; }
  .hc-launch__txt { display: none; }

  .hc-nudge { right: 16px; bottom: 84px; }
  .hc { right: 0; bottom: 0; width: 100%; height: 100svh; border-radius: 0; }
  .hw { padding: 16px 18px 14px; }
  .hw__opt { padding: 10px 8px; }
  .hw__opts--desc .hw__opt { padding: 12px 14px; }
  .hw__opt-v { font-size: 14px; }
  .hc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai-cta { flex-direction: column; align-items: flex-start; }
  .ai-cta .btn { width: 100%; }
}
@media (pointer: coarse) {
  .hc__input, .hw__note input { font-size: 16px; }
  .hc-nudge button { width: 40px; height: 40px; top: 0; right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hc-launch__orb::after { animation: none; }
}