/* ============================================================================
   Myntra research web app — styles.
   Design tokens are ported verbatim from ui/theme/Theme.kt, ui/theme/Type.kt
   and ui/alia/AliaTokens.kt. Light mode only, exactly like the Android app.
   ============================================================================ */

@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/figtree_variable.ttf") format("truetype");
  font-weight: 300 900;
  font-display: swap;
}

:root {
  --pink: #FF3F6C;
  --ink: #282C3F;
  --grey: #94969F;
  --lightgrey: #F5F5F6;
  --border: #EAEAEC;
  --green: #03A685;
  --orange: #FF905A;
  --hometop: #FAEBE6;
  --gold: #C8912F;
  --frame: 460px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: #e9e9ee;                 /* neutral gutter behind the phone column */
  font-family: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; cursor: pointer; }
img { display: block; }

/* The `hidden` attribute must beat component `display` rules (topbar/bottombar). */
[hidden] { display: none !important; }

/* The phone-width column. Everything lives inside it. */
.app-frame {
  position: relative;
  max-width: var(--frame);
  min-height: 100vh;
  margin: 0 auto;
  background: #fff;
  overflow-x: hidden;
  box-shadow: 0 0 40px rgba(0, 0, 0, .08);
}

.screen { min-height: 100vh; }

/* Content clears the fixed bottom bar on Home/PLP (frame gets .has-bar). */
.app-frame.has-bar .screen { padding-bottom: 60px; }

/* ------------------------------------------------------------------ top bar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 52px;
  padding: 0 8px;
  background: #fff;
  border-bottom: 1px solid var(--border);
}
.topbar__back {
  border: 0; background: none; color: var(--ink);
  font-size: 22px; line-height: 1; padding: 8px 10px;
}
.topbar__title { color: var(--pink); font-size: 18px; font-weight: 700; }

/* ================================================================= HOME ==== */
.home { background: var(--hometop); }
.home__strip {
  display: block;
  width: 100%;
  height: auto;
  cursor: pointer;
}

/* ================================================================== PLP ==== */
.plp { background: #fff; }

.rail {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 12px;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail--brand { padding-top: 0; padding-bottom: 10px; }

.chip {
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: var(--lightgrey);
  color: var(--ink);
  font-size: 11px;
  font-weight: 500;
  padding: 7px 12px;
  white-space: nowrap;
}
.chip--on { background: var(--pink); border-color: var(--pink); color: #fff; }

.plp__divider { height: 1px; background: var(--border); }

.plp__meta {
  display: flex;
  align-items: center;
  padding: 10px 12px;
}
.plp__count { flex: 1; font-size: 13px; color: var(--grey); }
.plp__sort {
  border: 0; background: none; color: var(--ink);
  font-size: 14px; font-weight: 700; padding: 4px;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
}
/* min-width:0 lets the 1fr tracks shrink below the nowrap text's min-content
   width — without it the 2-col grid blows out and the 2nd column clips away. */
.card { padding: 4px; cursor: pointer; min-width: 0; }
.card__imgwrap {
  position: relative;
  width: 100%;
  aspect-ratio: 0.75;
  background: var(--lightgrey);
  overflow: hidden;
}
.card__img { width: 100%; height: 100%; object-fit: cover; }
.badge {
  position: absolute;
  left: 6px; bottom: 6px;
  display: flex; align-items: center; gap: 2px;
  background: rgba(255, 255, 255, .95);
  padding: 3px 5px;
}
.badge__rating { font-size: 11px; font-weight: 700; color: var(--ink); }
.badge__star { color: var(--green); font-size: 10px; line-height: 1; }
.badge__count { font-size: 11px; color: var(--grey); }

.card__brand { font-size: 15px; font-weight: 700; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card__name { font-size: 13px; color: var(--grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card__price { display: flex; align-items: center; gap: 4px; margin-top: 3px; flex-wrap: wrap; }
.price__now { font-size: 15px; font-weight: 700; }
.price__mrp { font-size: 11px; color: var(--grey); text-decoration: line-through; }
.price__off { font-size: 11px; color: var(--orange); }

.empty { padding: 48px 24px; text-align: center; color: var(--grey); font-size: 13px; }

/* ================================================================== PDP ==== */
.pdp { background: #fff; }
.gallery { position: relative; }
.gallery__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__img {
  flex: 0 0 100%;
  width: 100%;
  aspect-ratio: 0.75;
  object-fit: cover;
  background: var(--lightgrey);
  scroll-snap-align: start;
}
.gallery__dots {
  position: absolute; left: 0; right: 0; bottom: 10px;
  display: flex; justify-content: center; gap: 4px;
}
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border); }
.dot--on { background: var(--ink); }

.sec { padding: 16px; }
.sec--tight { padding: 12px 16px; }
.pdp__brand { font-size: 18px; font-weight: 700; }
.pdp__name { font-size: 14px; color: var(--grey); margin-top: 2px; }
.pill-rating {
  display: inline-flex; align-items: center; gap: 3px;
  border: 1px solid var(--border); border-radius: 2px;
  padding: 4px 8px; margin-top: 8px;
}
.pill-rating__n { font-size: 14px; font-weight: 700; }
.pill-rating__star { color: var(--green); font-size: 12px; }
.pill-rating__c { font-size: 11px; color: var(--grey); }
.divider { height: 1px; background: var(--border); margin: 12px 0; }
.pdp__price { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pdp__price .price__now { font-size: 18px; }
.pdp__price .price__mrp { font-size: 13px; }
.pdp__price .price__off { font-size: 14px; font-weight: 700; }
.pdp__flags { color: var(--green); font-size: 11px; margin-top: 6px; }

.sectitle { font-size: 15px; font-weight: 700; }
.sizes { display: flex; gap: 10px; overflow-x: auto; padding: 10px 0; scrollbar-width: none; }
.sizes::-webkit-scrollbar { display: none; }
.size {
  flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--border); background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--ink);
}
.size--off { color: var(--border); }
.size--on { border-color: var(--pink); color: var(--pink); }

.variants { display: flex; gap: 10px; overflow-x: auto; padding-top: 10px; scrollbar-width: none; }
.variants::-webkit-scrollbar { display: none; }
.variant { flex: 0 0 auto; width: 64px; }
.variant__img {
  width: 64px; height: 84px; object-fit: cover;
  background: var(--lightgrey); border: 1px solid transparent;
}
.variant--nav .variant__img { border-color: var(--border); cursor: pointer; }
.variant__price { font-size: 11px; color: var(--grey); margin-top: 3px; }

.body { font-size: 14px; line-height: 1.5; margin-top: 8px; }
.subsec { margin-top: 12px; }
.spec { display: flex; padding-top: 8px; }
.spec__k { flex: 1; font-size: 13px; color: var(--grey); }
.spec__v { flex: 1; font-size: 14px; }

.aspects { display: flex; gap: 8px; overflow-x: auto; padding-top: 10px; scrollbar-width: none; }
.aspects::-webkit-scrollbar { display: none; }
.aspect {
  flex: 0 0 auto; border-radius: 16px; padding: 6px 12px;
  font-size: 11px; background: var(--lightgrey); color: var(--ink); white-space: nowrap;
}
.aspect--pos { background: rgba(3, 166, 133, .1); color: var(--green); }

.ratingrow { display: flex; align-items: center; gap: 8px; padding-top: 6px; }
.ratingrow__star { width: 10px; font-size: 11px; color: var(--grey); }
.ratingrow__icon { color: var(--grey); font-size: 10px; }
.bar { flex: 1; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.bar__fill { height: 100%; }
.ratingrow__n { width: 44px; font-size: 11px; color: var(--grey); text-align: right; }

.review { padding: 10px 16px; border-bottom: 1px solid var(--border); }
.review__head { display: flex; align-items: center; gap: 6px; }
.review__badge { display: inline-flex; align-items: center; gap: 3px; border-radius: 2px; padding: 2px 5px; color: #fff; font-size: 11px; font-weight: 700; }
.review__user { font-size: 13px; }
.review__date { font-size: 11px; color: var(--grey); }
.review__text { font-size: 14px; line-height: 1.5; margin-top: 6px; }
.review__imgs { display: flex; gap: 6px; overflow-x: auto; padding-top: 8px; }
.review__img { width: 64px; height: 64px; object-fit: cover; background: var(--lightgrey); }

.loading { display: flex; justify-content: center; padding: 60px; }
.spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid var(--border); border-top-color: var(--pink);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================ BOTTOM BAR ==== */
.bottombar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: var(--frame);
  z-index: 50;
  background: #fff;
  border-top: 1px solid var(--border);
  height: 60px;
  display: flex;
  align-items: center;
  padding: 6px 0;
}
.bottombar__tabs { display: flex; flex: 1; align-items: center; }
.tab { flex: 1; height: 44px; background: none; border: 0; padding: 0; }
.tab img { height: 44px; margin: 0 auto; transform: scale(1.1); object-fit: contain; }

/* The orb sits in the leftmost slot, overflowing the bar upward. */
.orb-slot { position: relative; width: 72px; height: 44px; flex: 0 0 72px; }
.orb {
  position: absolute; left: 0; bottom: -4px;
  width: 72px; height: 72px; border: 0; background: none; padding: 0;
}
.orb__blob { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.orb__blob--1 { animation: orbcycle 6s linear infinite; }
.orb__blob--2 { animation: orbcycle 6s linear infinite; animation-delay: -4s; }
.orb__blob--3 { animation: orbcycle 6s linear infinite; animation-delay: -2s; }
@keyframes orbcycle { 0%,100% { opacity: 1; } 33% { opacity: 0; } 66% { opacity: 0; } }

/* Greeting bubble beside the orb (collapsed state). */
.greeting {
  position: fixed;
  left: 50%;
  transform: translateX(calc(-50% * 1));
  bottom: 66px;
  z-index: 49;
  width: var(--frame);
  max-width: var(--frame);
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s ease, transform .45s ease;
}
.greeting.show { opacity: 1; }
.greeting__inner { margin-left: 20px; }
.greeting__l { font-size: 18px; font-weight: 700; color: var(--ink); line-height: 1.25; white-space: nowrap; }

/* ============================================================ ALIA OVERLAY = */
.alia { position: fixed; inset: 0; z-index: 100; display: none; }
.alia.open { display: block; }

/* full-column layer, centred on desktop */
.alia__col {
  position: absolute; top: 0; bottom: 0;
  left: 50%; transform: translateX(-50%);
  width: 100%; max-width: var(--frame);
  overflow: hidden;
}

/* progressive blur over the page: sharp at top, blurred toward the bottom */
.alia__blur {
  position: absolute; inset: 0;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 30%, #000 62%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, transparent 30%, #000 62%, #000 100%);
  opacity: 0; transition: opacity .52s cubic-bezier(.4,0,.2,1);
}
.alia.open .alia__blur { opacity: 1; }

/* aurora wash: layered drifting radial blobs, lower half of the screen */
.alia__wash {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 50%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.65) 45%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.65) 45%, #000 100%);
  opacity: 0; transition: opacity .52s ease;
  background:
    radial-gradient(60% 55% at 12% 78%, rgba(239,190,111,.92), transparent 62%),
    radial-gradient(58% 55% at 30% 70%, rgba(181,167,91,.85), transparent 62%),
    radial-gradient(58% 55% at 48% 80%, rgba(116,188,133,.85), transparent 62%),
    radial-gradient(58% 55% at 66% 68%, rgba(139,151,214,.85), transparent 62%),
    radial-gradient(58% 55% at 82% 80%, rgba(193,114,204,.82), transparent 62%),
    radial-gradient(60% 55% at 96% 72%, rgba(222,139,147,.82), transparent 62%);
  background-repeat: no-repeat;
  animation: aurora 18s linear infinite alternate;
}
.alia.open .alia__wash { opacity: 1; }
@keyframes aurora {
  0%   { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: -6% 3%, 5% -3%, -4% 3%, 5% -4%, -5% 3%, 4% -3%; }
}

/* darkening scrim so white text has contrast */
.alia__scrim {
  position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.135) 55%, rgba(0,0,0,.30) 100%);
}

/* Alia figure, bottom-left. Ported from AliaTokens.Figure:
   BoxFraction 0.206 (height), CropAt 0.70 (30% hangs off the bottom),
   Aspect 580/972, Left -12dp, NudgeY 12dp further down. */
.alia__figure {
  position: absolute;
  left: -12px;                     /* stays anchored bottom-left */
  bottom: calc(-6.12vh - 4px);     /* 30% of 20.4vh hangs off; nudge 12px→4px lifts her 8px */
  height: 20.4vh;                  /* 18.54vh increased 10%, still anchored bottom-left */
  max-height: 185px;
  aspect-ratio: 580 / 972;
  object-fit: contain;
  object-position: bottom;
  pointer-events: none;
}

.alia__content {
  position: absolute; left: 0; right: 0; bottom: 0;
  /* keep the composer + close button above the phone's home indicator / nav bar */
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column;
}

.alia__messages {
  /* Left-aligned like the reference. The line floats ABOVE Alia (via the bottom
     margin) rather than being indented past her, so text and figure clear each
     other vertically. */
  padding: 0 26px;
  margin-bottom: 44px;
  display: flex; flex-direction: column; justify-content: flex-end;
  max-height: 42vh; overflow: hidden;
}
.spoken {
  color: #fff; font-weight: 600; font-size: 18px; line-height: 24px;
  padding-right: 24px; margin-top: 22px;
  animation: fadein .42s ease;
  white-space: pre-wrap;
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* glass picks card */
.picks {
  margin: 0 26px 18px;
  border-radius: 28px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 16px;
  animation: fadein .42s ease;
}
.picks__text { color: #fff; font-weight: 600; font-size: 18px; line-height: 24px; margin-bottom: 16px; }
.picks__row { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.picks__row::-webkit-scrollbar { display: none; }
.pick { flex: 0 0 auto; width: 80px; }
.pick__img { width: 80px; aspect-ratio: 3/4; object-fit: cover; border-radius: 12px; background: rgba(255,255,255,.10); cursor: pointer; }

/* pills */
.pills { display: flex; gap: 12px; padding: 0 26px 32px; overflow-x: auto; scrollbar-width: none; }
.pills::-webkit-scrollbar { display: none; }
.pills--showall { padding-bottom: 18px; }
.pill {
  flex: 0 0 auto; border: 0; border-radius: 999px; background: #fff;
  color: var(--ink); font-weight: 600; font-size: 16px; padding: 13px 20px; white-space: nowrap;
}

/* composer */
.composer { display: flex; align-items: center; gap: 10px; padding-left: 89px; padding-right: 14px; transition: padding-left .42s cubic-bezier(.4,0,.2,1); }
.composer.kbd { padding-left: 26px; }
.composer__pill {
  flex: 1; display: flex; align-items: center; gap: 12px;
  height: 60px; background: #fff; border-radius: 999px; padding: 0 18px;
}
.composer__icon { border: 0; background: none; color: var(--gold); font-size: 24px; line-height: 1; padding: 0; }
.composer__icon--add { font-size: 26px; }
.composer__input { flex: 1; border: 0; outline: none; font-family: inherit; font-size: 17px; color: var(--ink); background: none; caret-color: var(--gold); min-width: 0; }
.composer__input::placeholder { color: var(--grey); }
.composer__close {
  width: 60px; height: 60px; flex: 0 0 60px; border: 0; border-radius: 50%;
  background: #fff; color: var(--gold); font-size: 26px; line-height: 1;
}

.setup-note {
  margin: 0 26px 20px; padding: 16px; border-radius: 16px;
  background: rgba(0,0,0,.45); color: #fff; font-size: 14px; line-height: 1.5;
}
.setup-note code { color: #ffd479; }