/* Alazan bot widget. Namespaced under .alazan-* and pinned to the viewport so a
   theme's own layout rules cannot drag it out of the corner. */

#alazan-bot-root {
  --alazan-brand: #2563c9;
  /* The readable twin of the accent. The script overwrites it with a
     darkened version of whatever colour the owner picked, so a bright
     accent can stay bright on buttons without turning label text into
     something nobody can read on white. */
  --alazan-brand-ink: #2563c9;
  --alazan-mid: #3f8fd8;
  --alazan-pale: #35c9c2;
  /* Four stops, not three: the extra stop in the middle is what keeps the blue
     from washing out into the teal and makes the transition actually read. */
  --alazan-grad: linear-gradient(135deg, #1b3f96 0%, #2563c9 35%, #3f9ede 68%, #35c9c2 100%);
  /* The frosted wash. Kept light, but saturated enough to be a colour rather
     than a grey — the earlier version lost its hue against white. */
  --alazan-aurora: linear-gradient(140deg, rgba(196,222,250,.95) 0%, rgba(206,214,250,.9) 40%, rgba(190,240,236,.95) 100%);
  --alazan-halo: conic-gradient(from 0deg, #7c5cf5, #2f7fe8, #23d3c8, #5ad0ff, #a15cf5, #7c5cf5);
  /* WhatsApp keeps its own colour: a green button ringed in blue would read as a
     third brand rather than the channel people already recognise. */
  --alazan-halo-wa: conic-gradient(from 0deg, #25d366, #6bff9e, #0f9d58, #3ff2a8, #128c7e, #25d366);
  --alazan-ink: #16202b;
  --alazan-muted: #6b7785;
  --alazan-line: #e3e7ec;
  --alazan-bg: #ffffff;
  --alazan-soft: #f5f7f9;
  --alazan-font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.alazan-launcher {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2147483000;
  width: 60px;
  height: 60px;
  border: 0;
  border-radius: 50%;
  background: var(--alazan-grad);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(37, 99, 201, .42);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .18s ease, box-shadow .18s ease;
}
.alazan-launcher:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(16, 24, 40, .3); }
.alazan-launcher svg { width: 28px; height: 28px; }

.alazan-panel {
  position: fixed;
  right: 20px;
  bottom: 92px;
  z-index: 2147483000;
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 560px;
  max-height: calc(100vh - 130px);
  background: var(--alazan-bg);
  border: 1px solid var(--alazan-line);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(16, 24, 40, .22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font: 15px/1.5 var(--alazan-font);
  color: var(--alazan-ink);
}
.alazan-panel[hidden] { display: none; }

.alazan-head {
  background: var(--alazan-grad);
  color: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: 0 0 auto;
}
.alazan-head strong { font-size: 15px; font-weight: 600; }
.alazan-head-actions { display: flex; align-items: center; gap: 4px; }
.alazan-icon-btn {
  background: rgba(255, 255, 255, .16);
  border: 0;
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
}
.alazan-icon-btn:hover { background: rgba(255, 255, 255, .28); }

.alazan-log {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
  background: var(--alazan-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Nothing in the log may shrink; the log scrolls instead. Without this a flex
   child that sets overflow of its own — the card strip scrolls sideways, the
   try-on button clips its shine — loses the automatic minimum size that keeps
   every other child at its content height, and gets squeezed to a few invisible
   pixels the moment the thread is taller than the panel. */
.alazan-log > * { flex: 0 0 auto; }

.alazan-msg { max-width: 85%; padding: 10px 13px; border-radius: 14px; white-space: pre-wrap; word-wrap: break-word; }
.alazan-msg.bot  { background: #fff; border: 1px solid var(--alazan-line); border-bottom-left-radius: 4px; align-self: flex-start; }
.alazan-msg.user { background: var(--alazan-grad); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.alazan-msg.err  { background: #fdecec; border: 1px solid #f5c2c2; color: #8a1f1f; align-self: flex-start; }
.alazan-msg.typing { color: var(--alazan-muted); font-style: italic; }
.alazan-wait { display: block; margin-top: 4px; font-size: 12px; font-style: normal; color: var(--alazan-muted); }

/* Product cards scroll sideways inside their own strip; the panel itself never
   scrolls horizontally. */
.alazan-cards { display: flex; gap: 10px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: thin; }
.alazan-card {
  flex: 0 0 150px;
  background: #fff;
  border: 1px solid var(--alazan-line);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.alazan-card-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; flex: 1 1 auto; }
.alazan-card img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; background: var(--alazan-soft); }
.alazan-card-try {
  border: 0;
  border-top: 1px solid var(--alazan-line);
  background: var(--alazan-soft);
  color: var(--alazan-brand-ink);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 6px;
  cursor: pointer;
}
.alazan-card-try:hover { background: var(--alazan-brand); color: #fff; }
.alazan-card-body { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 3px; }
.alazan-card-name { font-size: 13px; font-weight: 600; line-height: 1.3; }
.alazan-card-price { font-size: 13px; color: var(--alazan-brand-ink); font-weight: 600; }
.alazan-card-sku { font-size: 11px; color: var(--alazan-muted); }

.alazan-tryon-result { border-radius: 12px; border: 1px solid var(--alazan-line); max-width: 240px; display: block; }

.alazan-foot { flex: 0 0 auto; border-top: 1px solid var(--alazan-line); background: #fff; padding: 10px; }
.alazan-row { display: flex; gap: 8px; align-items: flex-end; }
.alazan-input {
  flex: 1 1 auto;
  resize: none;
  border: 1px solid var(--alazan-line);
  border-radius: 10px;
  padding: 9px 11px;
  font: inherit;
  max-height: 96px;
  color: var(--alazan-ink);
  background: #fff;
}
.alazan-input:focus { outline: 2px solid var(--alazan-brand); outline-offset: -1px; }
.alazan-send {
  flex: 0 0 auto;
  border: 0;
  background: var(--alazan-grad);
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.alazan-send:disabled { opacity: .5; cursor: default; }
/* The try-on invitation, sitting above the input. It carries a slow highlight
   sweep so it reads as an offer rather than another toolbar button — timed long
   enough apart that it never competes with someone typing. */
.alazan-try-cta {
  position: relative;
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-bottom: 9px;
  padding: 12px 14px;
  /* Frosted glass: a translucent wash over a blurred backdrop, lit along the top
     edge so it reads as a raised pane rather than a flat tint. */
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 14px;
  background: var(--alazan-aurora);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 0 rgba(255, 255, 255, .35),
    0 4px 18px rgba(47, 100, 142, .14);
  color: #17407e;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .1px;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.alazan-try-cta svg { width: 17px; height: 17px; flex: 0 0 auto; }
.alazan-try-cta:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, .95);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 8px 26px rgba(47, 100, 142, .22);
}
.alazan-try-cta:active { transform: translateY(0); }
.alazan-try-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .85) 50%, transparent 58%);
  transform: translateX(-100%);
  animation: alazan-sweep 6s ease-in-out infinite;
}
@keyframes alazan-sweep {
  0%, 72%  { transform: translateX(-100%); }
  88%, 100% { transform: translateX(100%); }
}

/* Motion here is decoration; anyone who has asked for less of it gets none. */
@media (prefers-reduced-motion: reduce) {
  .alazan-try-cta::after,
  .alazan-live-dot,
  .alazan-wave i { animation: none; }
  .alazan-try-cta { transition: none; }
}

.alazan-consent { font-size: 12px; color: var(--alazan-muted); display: flex; gap: 7px; align-items: flex-start; margin-top: 8px; }
.alazan-consent input { margin-top: 2px; flex: 0 0 auto; }

@media (max-width: 480px) {
  .alazan-panel { right: 8px; left: 8px; bottom: 84px; width: auto; height: calc(100vh - 110px); }
}

.alazan-consent-form {
  background: #fff;
  border: 1px solid var(--alazan-line);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.alazan-consent-form .alazan-consent { margin-top: 0; }
.alazan-consent-email {
  border: 1px solid var(--alazan-line);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--alazan-ink);
  background: #fff;
}
.alazan-consent-email:focus { outline: 2px solid var(--alazan-brand); outline-offset: -1px; }
.alazan-consent-note { margin: 0; font-size: 11px; color: var(--alazan-muted); }
.alazan-consent-start {
  border: 0;
  background: var(--alazan-grad);
  color: #fff;
  border-radius: 8px;
  padding: 9px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.alazan-consent-start:disabled { opacity: .45; cursor: default; }

/* Sits under "add to cart" on a product page; deliberately quieter than the
   store's own primary button so it reads as an extra, not a rival. */
.alazan-product-tryon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Spacing in the add-to-cart row belongs to the theme's flex gap alone. */
  margin: 0;
  min-height: 52px;
  padding: 12px 20px;
  border: 1px solid #111;
  border-radius: 0;
  background: #fff;
  color: #111;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
/* currentColor resolves against this rule's own colour, so the pair is explicit. */
.alazan-product-tryon:hover,
.alazan-product-tryon:focus-visible { background: #111; color: #fff; border-color: #111; }

/* Shown only while a voice call is running, in the corner the chat launcher has
   vacated. ElevenLabs draws its own panel above this. */
.alazan-voice-exit {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 2147483000;
  border: 1px solid var(--alazan-line);
  border-radius: 999px;
  background: #fff;
  color: var(--alazan-ink);
  font: inherit;
  font-size: 13px;
  padding: 10px 16px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(16, 24, 40, .18);
}
.alazan-voice-exit:hover { border-color: var(--alazan-brand); color: var(--alazan-brand-ink); }
.alazan-voice-exit[hidden] { display: none !important; }
.alazan-launcher[hidden] { display: none !important; }

/* Stacked directly above the chat bubble. Deliberately smaller than it: the
   assistant is the primary route, WhatsApp the alternative for people who want
   the thread to live in their own phone. */
.alazan-wa-launcher {
  position: fixed;
  right: 24px;
  bottom: 92px;
  z-index: 2147483000;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 6px 22px rgba(37, 211, 102, .5);
  transition: transform .16s ease, box-shadow .16s ease;
}
.alazan-wa-launcher svg { width: 28px; height: 28px; }
.alazan-wa-launcher:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(37, 211, 102, .46);
}
.alazan-wa-launcher[hidden] { display: none !important; }

@media (max-width: 480px) {
  .alazan-wa-launcher { right: 16px; bottom: 86px; width: 48px; height: 48px; }
  .alazan-wa-launcher svg { width: 25px; height: 25px; }
}

/* "Live" rather than a phone icon: a handset reads as a paid call, which put
   people off picking it up. */
.alazan-live-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .16s ease;
}
.alazan-live-btn:hover { background: rgba(255, 255, 255, .3); }
.alazan-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff5a5a;
  box-shadow: 0 0 0 0 rgba(255, 90, 90, .7);
  animation: alazan-blink 2s ease-out infinite;
}
@keyframes alazan-blink {
  0%   { box-shadow: 0 0 0 0 rgba(255, 90, 90, .7); }
  70%  { box-shadow: 0 0 0 7px rgba(255, 90, 90, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 90, 90, 0); }
}

/* The call bar lives inside the panel, above the input, so the conversation
   stays in one place instead of moving to a separate window. */
.alazan-live-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--alazan-grad);
  color: #fff;
  font: 13px/1 var(--alazan-font);
}
.alazan-live-state { flex: 1 1 auto; font-weight: 600; }
.alazan-live-end {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .16);
  color: #fff;
  border-radius: 999px;
  padding: 5px 12px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.alazan-live-end:hover { background: rgba(255, 255, 255, .32); }
/* Taller bars while the assistant talks, so the state is readable at a glance. */
.alazan-live-bar.is-speaking .alazan-wave i { animation-duration: .65s; }

.alazan-wave { display: flex; align-items: center; gap: 3px; height: 20px; }
.alazan-wave i {
  display: block;
  width: 3px;
  height: 6px;
  border-radius: 2px;
  background: #fff;
  animation: alazan-bars 1.1s ease-in-out infinite;
}
.alazan-wave i:nth-child(2) { animation-delay: .12s; }
.alazan-wave i:nth-child(3) { animation-delay: .24s; }
.alazan-wave i:nth-child(4) { animation-delay: .36s; }
.alazan-wave i:nth-child(5) { animation-delay: .48s; }
@keyframes alazan-bars {
  0%, 100% { height: 6px;  opacity: .6; }
  50%      { height: 18px; opacity: 1; }
}

.alazan-try-hint {
  margin: 0 0 9px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--alazan-muted);
  text-align: center;
}

/* Colour choice before the photo — shown as words, since the shop's colour names
   are what the customer will hear back. */
.alazan-colours { display: flex; flex-wrap: wrap; gap: 7px; }
.alazan-colour {
  border: 1px solid var(--alazan-line);
  background: #fff;
  border-radius: 999px;
  padding: 7px 14px;
  font: inherit;
  font-size: 13px;
  color: var(--alazan-ink);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.alazan-colour:hover {
  border-color: var(--alazan-brand);
  color: var(--alazan-brand-ink);
  transform: translateY(-1px);
}

/* A slowly rotating halo behind the launcher. It sits on a negative layer so the
   bubble's own fill stays opaque and only the blurred edge shows. */
.alazan-launcher::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: var(--alazan-halo);
  filter: blur(9px);
  opacity: .95;
  z-index: -1;
  animation: alazan-spin 4.5s linear infinite;
}
@keyframes alazan-spin { to { transform: rotate(360deg); } }

/* "I'm here" — a couple of unhurried tilts, not a permanent jiggle. */
.alazan-wave-hello { animation: alazan-hello 1.6s ease-in-out 2; }
@keyframes alazan-hello {
  0%, 60%, 100% { transform: rotate(0) translateY(0); }
  15% { transform: rotate(-11deg) translateY(-3px); }
  30% { transform: rotate(9deg)  translateY(-3px); }
  45% { transform: rotate(-5deg) translateY(-1px); }
}

.alazan-nudge {
  position: fixed;
  right: 92px;
  bottom: 30px;
  z-index: 2147483000;
  max-width: 220px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 11px 12px 11px 14px;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 14px;
  background: var(--alazan-aurora);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 8px 26px rgba(47, 100, 142, .2);
  color: #17407e;
  font: 600 13px/1.45 var(--alazan-font);
  cursor: pointer;
  animation: alazan-nudge-in .45s cubic-bezier(.2, .9, .3, 1.3) both;
}
.alazan-nudge[hidden] { display: none !important; }
.alazan-nudge::after {
  content: '';
  position: absolute;
  right: -6px;
  bottom: 18px;
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
  background: rgba(200, 224, 250, .96);
  border-right: 1px solid rgba(255, 255, 255, .8);
  border-top: 1px solid rgba(255, 255, 255, .8);
}
@keyframes alazan-nudge-in {
  from { opacity: 0; transform: translateX(10px) scale(.94); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
.alazan-nudge-close {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: #6b8299;
  font: inherit;
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
}
.alazan-nudge-close:hover { color: #274a66; }

@media (max-width: 480px) {
  .alazan-nudge { right: 84px; bottom: 26px; max-width: 170px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .alazan-launcher::before,
  .alazan-wa-launcher::before,
  .alazan-wave-hello,
  .alazan-nudge { animation: none; }
}

/* The same halo as the chat bubble, so the pair reads as one system rather than
   two widgets that happen to share a corner. */
.alazan-wa-launcher::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: var(--alazan-halo-wa);
  filter: blur(9px);
  opacity: .95;
  z-index: -1;
  animation: alazan-spin 4.5s linear infinite reverse;
}

.alazan-msg a.alazan-link {
  color: var(--alazan-brand-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-word;
}
.alazan-msg a.alazan-link:hover { text-decoration-thickness: 2px; }
.alazan-msg.user a.alazan-link { color: #fff; }

.alazan-live-mute {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.alazan-live-mute[hidden] { display: none !important; }
.alazan-live-mute svg { width: 15px; height: 15px; }
/* The slash only appears once the microphone is actually off. */
.alazan-live-mute .alazan-mute-slash { opacity: 0; }
.alazan-live-mute.is-muted { background: rgba(255, 90, 90, .85); border-color: rgba(255, 255, 255, .7); }
.alazan-live-mute.is-muted .alazan-mute-slash { opacity: 1; }
/* Bars fall still while muted: nothing is being heard, so nothing should move. */
.alazan-live-bar.is-muted .alazan-wave i { animation: none; height: 6px; opacity: .45; }