/* Jasmine Customer Service — isolated public-site chat UI */
:root{
  --jasmine-pink:#ef4f9c;
  --jasmine-pink-deep:#d93584;
  --jasmine-teal:#13bdc6;
  --jasmine-teal-deep:#079ca6;
  --jasmine-black:#071018;
  --jasmine-ink:#111827;
  --jasmine-muted:#6b7280;
  --jasmine-line:rgba(7,16,24,.1);
  --jasmine-ease:cubic-bezier(.22,.8,.24,1);
}

.jasmine-chat-launcher{
  position:fixed;
  z-index:176;
  right:26px;
  bottom:26px;
  width:68px;
  height:68px;
  border:1px solid rgba(255,255,255,.58);
  border-radius:23px;
  display:grid;
  place-items:center;
  cursor:pointer;
  color:#fff;
  background:
    radial-gradient(circle at 28% 18%,rgba(255,255,255,.40) 0,rgba(255,255,255,.12) 24%,transparent 46%),
    linear-gradient(145deg,#f469ae 0%,#ec4f9f 28%,#c252b5 52%,#32bdc7 78%,#0ba5b2 100%);
  background-size:100% 100%,160% 160%;
  background-position:center,20% 20%;
  box-shadow:
    0 20px 52px rgba(7,16,24,.25),
    0 12px 30px rgba(229,66,147,.24),
    inset 0 1px 0 rgba(255,255,255,.48),
    inset 0 -12px 24px rgba(7,16,24,.10);
  isolation:isolate;
  overflow:visible;
  transition:transform .3s var(--jasmine-ease),box-shadow .3s var(--jasmine-ease),border-radius .3s var(--jasmine-ease),background-position .55s var(--jasmine-ease);
}
.jasmine-chat-launcher::before{
  content:"";
  position:absolute;
  inset:-7px;
  z-index:-1;
  border-radius:29px;
  border:1px solid rgba(19,189,198,.30);
  background:linear-gradient(145deg,rgba(239,79,156,.10),rgba(19,189,198,.08));
  animation:jasminePulseRing 2.6s ease-out infinite;
}
.jasmine-chat-launcher::after{
  content:"";
  position:absolute;
  right:6px;
  top:6px;
  width:12px;
  height:12px;
  border:3px solid #fff;
  border-radius:50%;
  background:#2fdb91;
  box-shadow:0 0 0 0 rgba(47,219,145,.44),0 5px 14px rgba(7,16,24,.22);
  animation:jasmineOnlineLive 2s ease-in-out infinite;
}
.jasmine-chat-launcher:hover{
  transform:translateY(-4px) scale(1.035);
  background-position:center,85% 80%;
  box-shadow:0 25px 62px rgba(7,16,24,.29),0 15px 38px rgba(229,66,147,.29),inset 0 1px 0 rgba(255,255,255,.52),inset 0 -12px 24px rgba(7,16,24,.08)
}
.jasmine-chat-launcher:active{transform:translateY(-1px) scale(.97)}
.jasmine-chat-launcher svg{width:29px;height:29px;filter:drop-shadow(0 3px 8px rgba(7,16,24,.18));transition:transform .35s var(--jasmine-ease),opacity .25s ease}
.jasmine-chat-launcher .jasmine-icon-chat{animation:jasmineChatIconLive 3s ease-in-out infinite}
.jasmine-chat-launcher .jasmine-icon-close{position:absolute;opacity:0;transform:scale(.45) rotate(-70deg)}
.jasmine-chat-launcher[aria-expanded="true"]{border-radius:50%;transform:rotate(1deg)}
.jasmine-chat-launcher[aria-expanded="true"] .jasmine-icon-chat{opacity:0;transform:scale(.45) rotate(70deg)}
.jasmine-chat-launcher[aria-expanded="true"] .jasmine-icon-close{opacity:1;transform:scale(1) rotate(0)}

.jasmine-chat-panel{
  position:fixed;
  z-index:175;
  right:26px;
  bottom:108px;
  width:min(398px,calc(100vw - 52px));
  height:min(620px,calc(100vh - 140px));
  min-height:480px;
  display:grid;
  grid-template-rows:auto 1fr auto auto;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.82);
  border-radius:30px;
  background:rgba(255,255,255,.98);
  box-shadow:0 35px 100px rgba(7,16,24,.25),0 10px 35px rgba(239,79,156,.12);
  backdrop-filter:blur(24px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(20px) scale(.955);
  transform-origin:right bottom;
  transition:opacity .28s ease,visibility .28s ease,transform .42s var(--jasmine-ease);
}
.jasmine-chat-panel.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:none}

.jasmine-chat-header{
  position:relative;
  min-height:104px;
  display:grid;
  grid-template-columns:62px minmax(0,1fr) 38px;
  align-items:center;
  gap:13px;
  padding:18px 17px 18px 18px;
  color:#fff;
  background:
    radial-gradient(circle at 90% -30%,rgba(255,255,255,.25),transparent 48%),
    linear-gradient(128deg,var(--jasmine-black) 0 24%,#12242a 42%,var(--jasmine-teal-deep) 72%,var(--jasmine-pink-deep) 125%);
  isolation:isolate;
}
.jasmine-chat-header::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:4px;
  background:linear-gradient(90deg,var(--jasmine-pink),var(--jasmine-teal),var(--jasmine-pink));
  background-size:200% 100%;
  animation:jasmineGradientFlow 5s linear infinite;
}
.jasmine-avatar-wrap{position:relative;width:62px;height:62px}
.jasmine-avatar{
  width:62px;
  height:62px;
  border-radius:21px;
  object-fit:cover;
  object-position:center 30%;
  border:3px solid rgba(255,255,255,.9);
  box-shadow:0 10px 24px rgba(0,0,0,.22);
}
.jasmine-status-dot{
  position:absolute;
  right:-2px;
  bottom:-2px;
  width:17px;
  height:17px;
  border:4px solid #102228;
  border-radius:50%;
  background:#34d399;
  box-shadow:0 0 0 0 rgba(52,211,153,.35);
  animation:jasmineHeaderOnline 2.2s ease-in-out infinite;
}
.jasmine-chat-heading{min-width:0}
.jasmine-chat-heading strong{display:block;font-size:14px;line-height:1.25;font-weight:900;letter-spacing:-.02em}
.jasmine-chat-heading span{display:block;margin-top:5px;color:rgba(255,255,255,.72);font-size:9px;line-height:1.45;font-weight:600;letter-spacing:.015em}
.jasmine-chat-close{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.18);
  border-radius:13px;
  color:#fff;
  background:rgba(255,255,255,.09);
  cursor:pointer;
  transition:transform .25s var(--jasmine-ease),background .25s ease;
}
.jasmine-chat-close:hover{background:rgba(255,255,255,.18);transform:rotate(5deg)}
.jasmine-chat-close svg{width:18px;height:18px}

.jasmine-chat-messages{
  position:relative;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:20px 16px 16px;
  display:flex;
  flex-direction:column;
  gap:13px;
  background:
    radial-gradient(circle at 10% 5%,rgba(239,79,156,.075),transparent 28%),
    radial-gradient(circle at 90% 14%,rgba(19,189,198,.09),transparent 30%),
    linear-gradient(#fbfdfe,#f8fbfc);
  scrollbar-width:thin;
  scrollbar-color:rgba(7,16,24,.18) transparent;
}
.jasmine-chat-messages::-webkit-scrollbar{width:5px}
.jasmine-chat-messages::-webkit-scrollbar-thumb{background:rgba(7,16,24,.18);border-radius:999px}

.jasmine-message-row{display:flex;align-items:flex-end;gap:8px;animation:jasmineBubbleIn .38s var(--jasmine-ease) both}
.jasmine-message-row.is-user{justify-content:flex-end}
.jasmine-message-avatar{
  flex:0 0 28px;
  width:28px;
  height:28px;
  border-radius:10px;
  object-fit:cover;
  object-position:center 30%;
  box-shadow:0 4px 12px rgba(7,16,24,.14);
}
.jasmine-message{
  max-width:82%;
  padding:12px 14px;
  border:1px solid rgba(7,16,24,.06);
  border-radius:18px 18px 18px 6px;
  color:var(--jasmine-ink);
  background:#fff;
  box-shadow:0 9px 26px rgba(7,16,24,.07);
  font-family:Inter,system-ui,sans-serif;
  font-size:11px;
  line-height:1.62;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.jasmine-message-row.is-user .jasmine-message{
  border:0;
  border-radius:18px 18px 6px 18px;
  color:#fff;
  background:linear-gradient(135deg,var(--jasmine-pink) 0 46%,var(--jasmine-teal) 100%);
  box-shadow:0 10px 28px rgba(239,79,156,.2);
}
.jasmine-message-time{display:block;margin-top:6px;font-size:7.5px;line-height:1;color:rgba(107,114,128,.7);font-weight:700;text-align:right}
.jasmine-message-row.is-user .jasmine-message-time{color:rgba(255,255,255,.74)}

.jasmine-typing-row{display:flex;align-items:flex-end;gap:8px;animation:jasmineBubbleIn .3s var(--jasmine-ease) both}
.jasmine-typing{
  min-width:62px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  border:1px solid rgba(7,16,24,.06);
  border-radius:17px 17px 17px 6px;
  background:#fff;
  box-shadow:0 9px 26px rgba(7,16,24,.07);
}
.jasmine-typing i{width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,var(--jasmine-pink),var(--jasmine-teal));animation:jasmineTyping 1.15s ease-in-out infinite}
.jasmine-typing i:nth-child(2){animation-delay:.14s}.jasmine-typing i:nth-child(3){animation-delay:.28s}

.jasmine-chat-suggestions{
  display:flex;
  gap:7px;
  overflow-x:auto;
  padding:10px 14px 8px;
  border-top:1px solid rgba(7,16,24,.055);
  background:#fff;
  scrollbar-width:none;
}
.jasmine-chat-suggestions::-webkit-scrollbar{display:none}
.jasmine-chat-suggestions button{
  flex:none;
  min-height:34px;
  padding:0 12px;
  border:1px solid rgba(7,16,24,.1);
  border-radius:999px;
  color:var(--jasmine-ink);
  background:linear-gradient(180deg,#fff,#f8fafb);
  cursor:pointer;
  font-family:Inter,system-ui,sans-serif;
  font-size:8.5px;
  font-weight:800;
  white-space:nowrap;
  transition:border-color .22s ease,transform .22s var(--jasmine-ease),background .22s ease;
}
.jasmine-chat-suggestions button:hover{border-color:var(--jasmine-teal);background:#effdfe;transform:translateY(-2px)}

.jasmine-chat-form{
  display:grid;
  grid-template-columns:minmax(0,1fr) 48px;
  align-items:end;
  gap:9px;
  padding:11px 13px 13px;
  border-top:1px solid rgba(7,16,24,.07);
  background:#fff;
}
.jasmine-input-wrap{
  min-height:48px;
  display:flex;
  align-items:center;
  padding:9px 14px;
  border:1px solid rgba(7,16,24,.09);
  border-radius:17px;
  background:linear-gradient(180deg,#fbfcfd 0%,#f5f8f9 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 5px 16px rgba(7,16,24,.035);
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.jasmine-input-wrap:focus-within{
  border-color:rgba(19,189,198,.52);
  background:#fff;
  box-shadow:0 0 0 4px rgba(19,189,198,.085),0 8px 22px rgba(7,16,24,.055)
}
.jasmine-chat-input{
  width:100%;
  max-height:94px;
  min-height:22px;
  resize:none;
  overflow-y:auto;
  border:0;
  outline:0;
  color:var(--jasmine-ink);
  background:transparent;
  font-family:Inter,system-ui,sans-serif;
  font-size:11px;
  line-height:1.48;
}
.jasmine-chat-input::placeholder{color:#9ca3af}
.jasmine-chat-send{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.56);
  border-radius:16px;
  color:#fff;
  background:linear-gradient(145deg,#f164aa 0%,#dd4ca3 38%,#45bec8 100%);
  cursor:pointer;
  box-shadow:0 10px 24px rgba(223,70,154,.20),inset 0 1px 0 rgba(255,255,255,.42);
  transition:transform .25s var(--jasmine-ease),filter .25s ease,opacity .25s ease,box-shadow .25s ease;
}
.jasmine-chat-send:hover{transform:translateY(-2px) rotate(-2deg);filter:saturate(1.08);box-shadow:0 14px 30px rgba(223,70,154,.25),inset 0 1px 0 rgba(255,255,255,.46)}
.jasmine-chat-send:disabled{cursor:not-allowed;opacity:.48;transform:none}
.jasmine-chat-send svg{width:20px;height:20px}

.jasmine-chat-note{
  position:absolute;
  left:14px;
  right:14px;
  bottom:74px;
  z-index:3;
  padding:9px 11px;
  border:1px solid rgba(239,79,156,.16);
  border-radius:13px;
  color:#7a284f;
  background:rgba(255,242,248,.96);
  box-shadow:0 8px 22px rgba(7,16,24,.08);
  font-size:8.5px;
  line-height:1.45;
  opacity:0;
  pointer-events:none;
  transform:translateY(7px);
  transition:.25s ease;
}
.jasmine-chat-note.is-visible{opacity:1;transform:none}

/* Existing header icon is mobile-only. The chat module controls its active state. */
.mobile-cs-ai[aria-expanded="true"]{
  color:#fff!important;
  border-color:transparent!important;
  background:linear-gradient(135deg,var(--jasmine-pink),var(--jasmine-teal))!important;
  box-shadow:0 10px 24px rgba(239,79,156,.22)!important;
}
.mobile-cs-ai svg{transition:transform .28s var(--jasmine-ease)}
.mobile-cs-ai[aria-expanded="true"] svg{transform:rotate(-8deg) scale(.92)}

@keyframes jasminePulseRing{0%{opacity:.72;transform:scale(.86)}70%,100%{opacity:0;transform:scale(1.17)}}
@keyframes jasmineOnlineLive{
  0%,100%{transform:translate3d(0,0,0) scale(.92);box-shadow:0 0 0 0 rgba(47,219,145,.42),0 5px 14px rgba(7,16,24,.22)}
  45%{transform:translate3d(0,-2px,0) scale(1.05);box-shadow:0 0 0 7px rgba(47,219,145,0),0 7px 17px rgba(7,16,24,.22)}
}
@keyframes jasmineChatIconLive{0%,100%{transform:translateY(0) rotate(0)}45%{transform:translateY(-1.5px) rotate(-3deg)}65%{transform:translateY(0) rotate(2deg)}}
@keyframes jasmineHeaderOnline{0%,100%{transform:scale(.94);box-shadow:0 0 0 0 rgba(52,211,153,.34)}50%{transform:scale(1.05);box-shadow:0 0 0 6px rgba(52,211,153,0)}}
@keyframes jasmineGradientFlow{to{background-position:200% 0}}
@keyframes jasmineBubbleIn{from{opacity:0;transform:translateY(9px) scale(.98)}to{opacity:1;transform:none}}
@keyframes jasmineTyping{0%,60%,100%{opacity:.35;transform:translateY(0) scale(.82)}30%{opacity:1;transform:translateY(-4px) scale(1)}}

@media(max-width:820px){
  .jasmine-chat-launcher{right:18px;bottom:90px;width:62px;height:62px;border-radius:21px}
  .jasmine-chat-panel{right:16px;bottom:164px;width:min(384px,calc(100vw - 32px));height:min(590px,calc(100vh - 190px));min-height:450px}
}

@media(max-width:560px){
  .jasmine-chat-launcher{display:none!important}
  .jasmine-chat-panel{
    top:72px;
    right:10px;
    bottom:84px;
    left:10px;
    width:auto;
    height:auto;
    min-height:0;
    border-radius:24px;
    transform-origin:top right;
    transform:translateY(-12px) scale(.975);
  }
  .jasmine-chat-panel.is-open{transform:none}
  .jasmine-chat-header{min-height:91px;grid-template-columns:54px minmax(0,1fr) 36px;padding:14px 13px 14px 14px}
  .jasmine-avatar-wrap,.jasmine-avatar{width:54px;height:54px}.jasmine-avatar{border-radius:18px}
  .jasmine-chat-heading strong{font-size:13px}.jasmine-chat-heading span{font-size:8px}
  .jasmine-chat-close{width:36px;height:36px}
  .jasmine-chat-messages{padding:16px 12px 13px;gap:11px}
  .jasmine-message{max-width:84%;font-size:10.5px;padding:11px 12px}
  .jasmine-chat-suggestions{padding:8px 11px 7px}
  .jasmine-chat-form{grid-template-columns:minmax(0,1fr) 46px;padding:9px 10px 11px}
  .jasmine-input-wrap{min-height:46px}.jasmine-chat-send{width:46px;height:46px}
}

@media(prefers-reduced-motion:reduce){
  .jasmine-chat-launcher::before,.jasmine-chat-launcher::after,.jasmine-chat-launcher .jasmine-icon-chat,.jasmine-chat-header::after,.jasmine-status-dot,.jasmine-typing i{animation:none!important}
}
