/* Blite stylist: text, photos, look cards and live voice. Claude 2026-11-01.
   Loads after site.css and uses its tokens (--ink, --ink-2, --muted, --line, --ox, --stone, --paper, --ease). */
@property --pulse { syntax: '<number>'; inherits: true; initial-value: 0; }

/* ---------- header + Live voice ---------- */
.stylist__head { text-align: center; }
.vstart { display: inline-flex; align-items: center; gap: 12px; margin-top: 24px; min-height: 58px; padding: 8px 24px 8px 9px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; cursor: pointer; font: inherit; box-shadow: 0 14px 36px rgba(29,31,35,.2); transition: background .2s, box-shadow .3s var(--ease), translate .3s var(--ease); }
.vstart:hover { background: #000; translate: 0 -1px; box-shadow: 0 18px 44px rgba(29,31,35,.26); }
.vstart:active { translate: 0 1px; }
.vstart__t { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; text-align: left; }
.vstart__t b { font-weight: 500; font-size: 15.5px; letter-spacing: .01em; }
.vstart__t small { font-size: 12.5px; color: rgba(255,255,255,.6); margin-top: 3px; }
.stylist.is-voice .vstart, .stylist.is-voice .stylist__mic { display: none; }

/* ---------- the orb (panel, dock and the Live voice button share it) ---------- */
.vorb, .vstart__orb { --o: max(var(--out, 0), var(--pulse)); position: relative; display: block; border-radius: 50%;
  background:
    radial-gradient(circle at 34% 27%, rgba(255,250,242,.95) 0, rgba(255,244,230,.42) 8%, transparent 25%),
    radial-gradient(circle at 64% 76%, rgba(255,190,165,.2), transparent 46%),
    radial-gradient(circle at 50% 50%, #9C2B40 0, #6E1423 44%, #3D0A14 76%, #210509 100%);
  box-shadow: inset 0 -12px 28px rgba(0,0,0,.45), inset 0 9px 22px rgba(255,236,214,.16), 0 0 calc(var(--gw, 34px) + var(--o) * var(--gx, 80px)) rgba(156,43,64,calc(.22 + var(--o) * .5)); }
.vorb { width: 148px; height: 148px; margin: 18px auto 0; scale: calc(1 + var(--o) * .13); transition: scale .1s linear; }
.vorb::before, .vorb::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(246,243,238,.3); pointer-events: none; transition: scale .1s linear, opacity .1s linear; }
.vorb::before { inset: -14px; opacity: calc(.14 + var(--mic, 0) * .86); scale: calc(1 + var(--mic, 0) * .2); }
.vorb::after { inset: -30px; border-color: rgba(246,243,238,.16); opacity: calc(var(--mic, 0) * .9); scale: calc(1 + var(--mic, 0) * .34); }
.vorb i, .vstart__orb i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 74% 30%, rgba(255,236,214,.3), transparent 36%), radial-gradient(circle at 30% 78%, rgba(255,214,196,.1), transparent 34%); mix-blend-mode: screen; animation: vspin 12s linear infinite; }
.vstart__orb { --gw: 10px; --gx: 18px; width: 42px; height: 42px; flex: none; animation: vpulse 2.6s ease-in-out infinite; }
.vorb.vorb--mini { --gw: 8px; --gx: 20px; width: 40px; height: 40px; margin: 0; flex: none; }
.vorb--mini::before { inset: -5px; } .vorb--mini::after { inset: -10px; }
[data-state="connecting"] .vorb { animation: vbreathe 2.2s ease-in-out infinite; filter: saturate(.7) brightness(.85); }
[data-state="speak"] .vorb { animation: vpulse 1.15s ease-in-out infinite; }
[data-state="think"] .vorb i { animation-duration: 2.2s; }
.is-muted .vorb::before, .is-muted .vorb::after { opacity: 0; }

/* ---------- live voice panel ---------- */
.vpanel { position: relative; margin: 30px auto 4px; padding: 20px 22px 22px; border-radius: 26px; color: #F1ECE4; outline: none; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 95% at 50% 0%, #2B2D33 0%, #1D1F23 50%, #141518 100%);
  box-shadow: 0 34px 90px rgba(29,31,35,.3), inset 0 0 0 1px rgba(255,255,255,.06); animation: vin .45s var(--ease) both; }
.vpanel::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .07; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.vpanel::after { content: ""; position: absolute; left: 50%; top: 96px; width: 340px; height: 340px; margin-left: -170px; z-index: -1; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(156,43,64,.24), transparent 66%); }
.vpanel__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: rgba(241,236,228,.72); }
.vpanel__k { display: flex; align-items: center; gap: 10px; margin: 0; }
.vpanel__k i { width: 8px; height: 8px; border-radius: 50%; background: #E4566C; animation: vlive 1.8s infinite; }
[data-state="connecting"] .vpanel__k i { background: #C9A9A0; animation: none; opacity: .7; }
.vpanel__time { font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.vcap { min-height: 6.4em; max-width: 34em; margin: 26px auto 0; text-align: center; }
.vcap__a { font-size: clamp(17px, 2vw, 20px); line-height: 1.5; font-weight: 300; letter-spacing: -.005em; color: #F7F2EB; }
.vcap__u { margin-top: 10px; font-size: 14px; line-height: 1.45; color: rgba(241,236,228,.62); }
.vcap__u:not(:empty)::before { content: "You"; margin-right: 8px; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: #D7B3AA; }
.vcap__u.is-hint { color: #D7B3AA; }
.vcap__u.is-hint::before { content: none; }
.vctl { display: flex; justify-content: center; gap: clamp(20px, 5vw, 40px); margin-top: 18px; }
.vctl__b { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 64px; padding: 0; border: 0; background: none; color: rgba(241,236,228,.84); font: inherit; font-size: 12px; letter-spacing: .05em; cursor: pointer; }
.vctl__b .ic { box-sizing: content-box; width: 22px; height: 22px; padding: 17px; border-radius: 50%; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); stroke-width: 1.6; transition: background .2s, color .2s, scale .2s var(--ease); }
.vctl__b:hover .ic { background: rgba(255,255,255,.15); }
.vctl__b:active .ic { scale: .94; }
.vctl__b:focus-visible { outline: none; } .vctl__b:focus-visible .ic { outline: 2px solid #F1ECE4; outline-offset: 3px; }
.vctl__b[aria-pressed="true"] .ic { background: #F1ECE4; color: var(--ink); box-shadow: none; }
.vctl__b--end .ic { background: #B3263E; box-shadow: none; color: #fff; }
.vctl__b--end:hover .ic { background: #C42C46; }
.vctl__b.is-cue .ic, .vdock__b.is-cue { background: #F1ECE4; color: var(--ink); animation: vcue 1.2s ease-in-out infinite; }
.ic .ic-off { display: none; }
[aria-pressed="true"] .ic .ic-off { display: inline; }

/* ---------- conversation ---------- */
.stylist__log { gap: 14px; }
.stylist .chat__msg { max-width: min(86%, 560px); padding: 13px 17px; border-radius: 20px; font-size: 15.5px; line-height: 1.55; animation: vin .35s var(--ease) both; overflow-wrap: anywhere; }
.stylist .chat__msg--a { background: #fff; border-bottom-left-radius: 6px; box-shadow: 0 1px 0 rgba(29,31,35,.04), 0 10px 30px rgba(60,48,30,.07); }
.stylist .chat__msg--u { background: var(--ink); color: #F6F3EE; border-bottom-right-radius: 6px; }
.chat__msg--voice::before { content: "Live"; display: block; margin-bottom: 3px; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ox); }
.chat__msg--u.chat__msg--voice::before { color: #D7B3AA; }
.chat__msg--pending { opacity: .55; }
.stylist .chat__msg--typing { display: inline-flex; align-items: center; gap: 5px; min-height: 48px; padding: 0 20px; }
.chat__msg--typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: vdot 1.2s ease-in-out infinite; }
.chat__msg--typing i:nth-of-type(2) { animation-delay: .15s; } .chat__msg--typing i:nth-of-type(3) { animation-delay: .3s; }
.stylist .chat__msg--err { box-shadow: inset 3px 0 0 var(--ox), 0 10px 30px rgba(60,48,30,.07); }
.stylist .chat__msg.has-photo { display: flex; flex-direction: column; gap: 8px; max-width: min(254px, 86%); padding: 6px; }
.stylist .chat__msg.has-photo > span { padding: 2px 10px 6px; }
.stylist .chat__msg.has-photo.chat__msg--voice::before { margin: 6px 10px 0; }
.chat__photo { display: block; width: auto; max-width: min(240px, 100%); max-height: 320px; border-radius: 15px; object-fit: cover; }
.chat__photo--gone { display: block; padding: 8px 12px; font-size: 13px; opacity: .72; }
.chat__note { align-self: center; max-width: 52ch; margin: 2px 0; padding: 8px 16px; border-radius: 999px; background: rgba(29,31,35,.05); color: var(--ink-2); font-size: 13.5px; line-height: 1.45; text-align: center; animation: vin .35s var(--ease) both; }
.chat__note--err { background: rgba(110,20,35,.07); color: var(--ox); }
.stylist .chat__acts { display: flex; flex-wrap: wrap; gap: 8px; align-self: flex-start; animation: vin .45s var(--ease) both; }
.stylist .chat__acts a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(29,31,35,.16); background: rgba(255,255,255,.72); color: var(--ink); font-size: 13.5px; text-decoration: none; transition: background .2s, border-color .2s; }
.stylist .chat__acts a:hover { background: #fff; border-color: var(--ink); }
.stylist .chat__acts a:first-child { background: var(--ink); border-color: var(--ink); color: #fff; }
.stylist .chat__acts a:first-child:hover { background: #000; }

/* ---------- card strips ---------- */
.cstrip { min-width: 0; animation: vin .5s var(--ease) both; }
.cstrip__k { margin: 6px 2px 10px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ox); }
.cstrip__vp { position: relative; }
.cstrip__row { list-style: none; display: flex; gap: 12px; margin: -8px calc(var(--g) * -1) -10px; padding: 8px var(--g) 30px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--g); scrollbar-width: none; overscroll-behavior-x: contain; }
.cstrip__row::-webkit-scrollbar { display: none; }
.cstrip__row > li { display: flex; flex: 0 0 clamp(176px, 58%, 236px); scroll-snap-align: start; }
.cstrip__row > li:nth-child(2) .ccard { animation-delay: .06s; } .cstrip__row > li:nth-child(3) .ccard { animation-delay: .12s; } .cstrip__row > li:nth-child(4) .ccard { animation-delay: .18s; }
.ccard { display: flex; flex-direction: column; width: 100%; overflow: hidden; border-radius: 18px; background: #fff; color: var(--ink); text-decoration: none; box-shadow: 0 1px 0 rgba(29,31,35,.04), 0 10px 26px rgba(60,48,30,.08); animation: vin .5s var(--ease) both; transition: translate .35s var(--ease), box-shadow .35s var(--ease); }
.ccard:hover { translate: 0 -3px; box-shadow: 0 2px 0 rgba(29,31,35,.04), 0 16px 32px rgba(60,48,30,.14); }
.ccard:focus-visible { outline: 2px solid var(--ox); outline-offset: 3px; }
.ccard__media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--stone); }
.ccard__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; filter: saturate(.9) contrast(1.03); transition: scale .9s var(--ease); }
.ccard:hover .ccard__media img { scale: 1.04; }
.ccard--look .ccard__media::after { content: ""; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(to top, rgba(20,16,12,.18), transparent); pointer-events: none; }
.ccard--prod .ccard__media { background: #fff; }
.ccard--prod .ccard__media img { object-fit: contain; padding: 7%; filter: none; }
.ccard__media.is-missing img { visibility: hidden; }
.ccard__media.is-missing::before { content: "Blite"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; letter-spacing: .32em; text-transform: uppercase; color: rgba(29,31,35,.32); }
.ccard__body { display: flex; flex: 1; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.ccard__k { display: flex; justify-content: space-between; gap: 8px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.ccard__k i { font-style: normal; letter-spacing: .1em; color: var(--ox); }
.ccard__t { font-size: 15px; font-weight: 450; line-height: 1.3; letter-spacing: -.01em; }
.ccard__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 10px; font-size: 13px; font-weight: 500; color: var(--ox); }
.ccard__cta .ic { width: 15px; height: 15px; transition: translate .3s var(--ease); }
.ccard:hover .ccard__cta .ic { translate: 3px 0; }
.ccard__p { margin-top: auto; padding-top: 8px; font-size: 14.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.ccard__p.is-ask { font-size: 13px; font-weight: 400; color: var(--muted); }
.cstrip__nav { position: absolute; top: calc(50% - 38px); z-index: 2; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(246,243,238,.94); color: var(--ink); box-shadow: 0 8px 24px rgba(29,31,35,.18); cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.cstrip__nav--prev { left: -10px; } .cstrip__nav--prev .ic { rotate: 180deg; }
.cstrip__nav--next { right: -10px; }
.cstrip__nav:hover { background: #fff; }
@media (hover: none), (max-width: 699px) { .cstrip__nav { display: none; } }
@media (min-width: 700px) {
  .cstrip__row { margin: -8px -18px -10px; padding: 8px 18px 30px; scroll-padding: 0 18px; }
  .cstrip__row > li { flex-basis: clamp(176px, calc((100% - 24px) / 3), 248px); }
}

/* call-to-action cards from the live stylist (open in the Fitting Room, book a fitting) */
.ccta { display: flex; align-items: center; gap: 14px; align-self: flex-start; max-width: min(440px, 100%); padding: 9px 10px 9px 9px; border-radius: 20px; background: var(--ink); color: #fff; text-decoration: none; box-shadow: 0 14px 36px rgba(29,31,35,.2); animation: vin .45s var(--ease) both; transition: background .2s; }
.ccta:hover { background: #000; }
.ccta__img { position: relative; flex: none; width: 52px; height: 64px; overflow: hidden; border-radius: 12px; background: #34363b; }
.ccta__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.ccta__img.is-missing img { visibility: hidden; }
.ccta__ic { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 14px; background: rgba(255,255,255,.1); }
.ccta__t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ccta__t small { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: #D7B3AA; }
.ccta__t b { font-size: 15px; font-weight: 500; line-height: 1.25; }
.ccta__go { display: grid; place-items: center; flex: none; width: 38px; height: 38px; margin-left: auto; border-radius: 50%; background: #F6F3EE; color: var(--ink); }
.ccta__go .ic { width: 17px; height: 17px; }

/* ---------- composer: photo, text, live voice, send ---------- */
.stylist__form { gap: 4px; padding: 6px; }
.stylist__form #chat-q { padding: 12px 6px; }
.stylist__photo { position: relative; display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; color: var(--ink-2); cursor: pointer; transition: background .2s, color .2s; }
.stylist__photo:hover { background: var(--stone); color: var(--ink); }
.stylist__photo input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; font-size: 0; }
.stylist__photo:focus-within { outline: 2px solid var(--ox); outline-offset: 2px; }
.stylist__form .stylist__mic { width: 44px; height: 44px; background: transparent; color: var(--ink-2); transition: background .2s, color .2s; }
.stylist__form .stylist__mic:hover { background: var(--stone); color: var(--ink); }
.stylist__form .stylist__send { flex: none; }
.stylist__att { display: flex; margin-top: 24px; }
.stylist__att + .stylist__form { margin-top: 10px; }
.stylist__att[hidden] + .stylist__form { margin-top: 26px; }
.att { display: flex; align-items: center; gap: 12px; padding: 6px 8px 6px 6px; border-radius: 18px; background: #fff; box-shadow: 0 10px 30px rgba(60,48,30,.09); animation: vin .3s var(--ease) both; }
.att img { width: 46px; height: 58px; object-fit: cover; border-radius: 12px; }
.att__t { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.25; }
.att__t b { font-weight: 500; }
.att__t small { font-size: 12px; color: var(--muted); }
.att__x { display: grid; place-items: center; width: 36px; height: 36px; margin-left: 6px; border: 0; border-radius: 50%; background: var(--stone); color: var(--ink); cursor: pointer; }
.att__x:hover { background: var(--stone-2); }
.att__x .ic { width: 16px; height: 16px; }
.stylist__reset { display: none; margin: 16px auto 0; padding: 6px 4px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(29,31,35,.25); cursor: pointer; }
.stylist__reset:hover { color: var(--ink); }
.stylist.is-active .stylist__reset { display: block; }

/* ---------- dock: the call stays in reach while the page scrolls ---------- */
.vdock { --lift: 0px; position: fixed; z-index: 45; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom) + var(--lift)); translate: -50% 0; display: flex; align-items: center; gap: 6px; width: min(440px, calc(100% - 24px)); padding: 6px; border-radius: 999px; background: rgba(21,22,25,.94); color: #F1ECE4; box-shadow: 0 18px 50px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); animation: vup .35s var(--ease) both; transition: bottom .3s var(--ease); }
.vdock__main { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; padding: 0 6px 0 2px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.vdock__cap { overflow: hidden; font-size: 13.5px; white-space: nowrap; text-overflow: ellipsis; }
.vdock__b { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; cursor: pointer; }
.vdock__b[aria-pressed="true"] { background: #F1ECE4; color: var(--ink); }
.vdock__b--end { background: #B3263E; }
.vdock__b .ic { width: 20px; height: 20px; }
@media (min-width: 900px) { .vdock { left: 24px; translate: none; width: min(400px, calc(100% - 48px)); } }

/* ---------- phone ---------- */
@media (max-width: 699px) {
  .vstart { margin-top: 20px; }
  .vpanel { margin-top: 24px; padding: 16px 16px 18px; border-radius: 22px; }
  .vorb { width: 124px; height: 124px; margin-top: 16px; }
  .vcap { margin-top: 22px; min-height: 7.2em; }
  .vctl__b .ic { padding: 15px; }
  .stylist .chat__msg { max-width: 90%; }
  .stylist__form { padding: 4px; }
  .stylist__photo, .stylist__form .stylist__mic { width: 40px; height: 40px; }
}

/* ---------- motion ---------- */
@keyframes vin { from { opacity: 0; translate: 0 8px; } }
@keyframes vup { from { opacity: 0; translate: -50% 16px; } }
@media (min-width: 900px) { @keyframes vup { from { opacity: 0; translate: 0 16px; } } }
@keyframes vspin { to { rotate: 360deg; } }
@keyframes vbreathe { 50% { scale: .93; } }
@keyframes vpulse { 50% { --pulse: .38; } }
@keyframes vdot { 0%, 80%, 100% { opacity: .25; translate: 0 0; } 40% { opacity: 1; translate: 0 -3px; } }
@keyframes vlive { 0% { box-shadow: 0 0 0 0 rgba(228,86,108,.55); } 70% { box-shadow: 0 0 0 8px rgba(228,86,108,0); } 100% { box-shadow: 0 0 0 0 rgba(228,86,108,0); } }
@keyframes vcue { 50% { scale: 1.08; } }
@media (prefers-reduced-motion: reduce) {
  .vorb, .vorb i, .vstart__orb, .vstart__orb i, .vpanel__k i, .vctl__b.is-cue .ic, .vdock__b.is-cue, .chat__msg--typing i { animation: none !important; }
  .vorb, .vorb::before, .vorb::after { transition: none; }
  .vpanel, .vdock, .cstrip, .ccard, .ccta, .chat__note, .att, .stylist .chat__msg, .stylist .chat__acts { animation: none; }
  .ccard, .ccard__media img, .ccard__cta .ic { transition: none; }
}