/* ==========================================================================
   WebSteer — Chat assistant widget
   Depends on the design tokens declared in styles.css
   ========================================================================== */

/* ---------------------------------------------------------------- Launcher */
.chat-launcher{
  position:fixed; right:22px; bottom:22px; z-index:120;
  width:60px; height:60px; border-radius:50%;
  display:grid; place-items:center;
  color:#fff; background:var(--grad-brand-alt); background-size:150% 150%;
  box-shadow:0 16px 38px -12px rgba(86,70,232,.65), 0 0 0 1px rgba(255,255,255,.12) inset;
  transition:transform .38s var(--ease), box-shadow .38s var(--ease), background-position .5s var(--ease);
}
.chat-launcher:hover{ transform:translateY(-3px) scale(1.04); background-position:100% 50%; box-shadow:0 22px 48px -14px rgba(86,70,232,.75); }
.chat-launcher:active{ transform:scale(.97); }
.chat-launcher svg{ width:27px; height:27px; grid-area:1/1; transition:opacity .28s var(--ease), transform .38s var(--ease); }
.chat-launcher .ic-close{ opacity:0; transform:rotate(-90deg) scale(.6); }
body.chat-open .chat-launcher .ic-chat{ opacity:0; transform:rotate(90deg) scale(.6); }
body.chat-open .chat-launcher .ic-close{ opacity:1; transform:none; }

/* Unread pip */
.chat-pip{
  position:absolute; top:2px; right:2px; width:14px; height:14px; border-radius:50%;
  background:#22C55E; border:2.5px solid #fff;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
body.chat-open .chat-pip,
.chat-launcher.seen .chat-pip{ opacity:0; transform:scale(.4); }

/* Attention ring, fires once */
.chat-launcher::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(109,94,248,.5);
  animation:chatPing 2.6s var(--ease) 3;
}
@keyframes chatPing{
  0%{ transform:scale(1); opacity:.9 }
  70%,100%{ transform:scale(1.55); opacity:0 }
}
body.chat-open .chat-launcher::after{ display:none; }

/* Back-to-top stacks above the launcher instead of colliding with it */
.to-top{ right:29px; bottom:96px; }
body.chat-open .to-top{ opacity:0; visibility:hidden; }

/* ------------------------------------------------------------- Nudge bubble */
.chat-nudge{
  position:fixed; right:96px; bottom:32px; z-index:119;
  max-width:270px; padding:14px 40px 14px 17px;
  border-radius:16px 16px 4px 16px;
  background:#fff; border:1px solid var(--line);
  box-shadow:var(--sh-lg);
  font-size:.905rem; line-height:1.5; color:var(--slate-700);
  animation:nudgeIn .55s var(--ease-out) both;
}
.chat-nudge strong{ display:block; color:var(--slate-900); letter-spacing:-.02em; }
.chat-nudge-open{ position:absolute; inset:0; border-radius:inherit; cursor:pointer; }
.chat-nudge-close{
  position:absolute; top:7px; right:7px; z-index:2;
  width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  color:var(--slate-400); transition:background-color .2s var(--ease), color .2s var(--ease);
}
.chat-nudge-close:hover{ background:var(--paper-2); color:var(--slate-900); }
.chat-nudge-close svg{ width:13px; height:13px; }
@keyframes nudgeIn{ from{ opacity:0; transform:translateY(10px) scale(.94) } to{ opacity:1; transform:none } }

/* ------------------------------------------------------------------ Panel */
.chat-panel{
  position:fixed; right:22px; bottom:96px; z-index:121;
  display:flex; flex-direction:column;
  width:min(384px, calc(100vw - 44px));
  height:min(624px, calc(100vh - 140px));
  height:min(624px, calc(100dvh - 140px));   /* dvh where supported */
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:0 40px 90px -28px rgba(10,15,31,.42), 0 12px 30px -18px rgba(10,15,31,.24);
  overflow:hidden;
  transform-origin:bottom right;
  opacity:0; visibility:hidden; transform:translateY(16px) scale(.96);
  transition:opacity .34s var(--ease-out), transform .34s var(--ease-out), visibility .34s;
}
.chat-panel.open{ opacity:1; visibility:visible; transform:none; }

/* Header */
.chat-head{
  position:relative; flex:none;
  display:flex; align-items:center; gap:12px;
  padding:16px 16px 16px 18px;
  background:linear-gradient(135deg,#141C3B 0%, #0A0F1F 60%, #10233F 100%);
  color:#fff;
}
.chat-head::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(420px circle at 15% -40%, rgba(109,94,248,.5), transparent 70%);
}
.chat-head > *{ position:relative; z-index:1; }
.chat-ava{
  width:40px; height:40px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--grad-brand-alt);
  box-shadow:0 0 0 2px rgba(255,255,255,.14);
}
.chat-ava svg{ width:21px; height:21px; }
.chat-ava .chat-brand-mark{ width:29px; height:20px; object-fit:contain; }
.chat-id{ min-width:0; margin-right:auto; }
.chat-id strong{ display:block; font-size:.96rem; letter-spacing:-.02em; }
.chat-id span{ display:flex; align-items:center; gap:6px; font-size:.775rem; color:rgba(255,255,255,.6); margin-top:2px; }
.chat-id span::before{
  content:""; width:7px; height:7px; border-radius:50%; background:#22C55E;
  box-shadow:0 0 0 3px rgba(34,197,94,.22);
}
.chat-head-btn{
  width:32px; height:32px; border-radius:9px; flex:none;
  display:grid; place-items:center; color:rgba(255,255,255,.62);
  transition:background-color .22s var(--ease), color .22s var(--ease);
}
.chat-head-btn:hover{ background:rgba(255,255,255,.12); color:#fff; }
.chat-head-btn svg{ width:16px; height:16px; }

/* Message log */
.chat-log{
  flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding:20px 18px 8px;
  background:
    radial-gradient(560px circle at 100% 0%, rgba(109,94,248,.055), transparent 62%),
    var(--paper);
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
.chat-log::-webkit-scrollbar{ width:8px; }
.chat-log::-webkit-scrollbar-thumb{ background:var(--line); border-radius:8px; border:2px solid transparent; background-clip:content-box; }

.msg{ display:flex; gap:9px; margin-bottom:11px; animation:msgIn .42s var(--ease-out) both; }
@keyframes msgIn{ from{ opacity:0; transform:translateY(9px) } to{ opacity:1; transform:none } }

.msg-ava{
  width:26px; height:26px; border-radius:50%; flex:none; align-self:flex-end;
  display:grid; place-items:center; background:var(--grad-brand-alt);
}
.msg-ava svg{ width:14px; height:14px; }
.msg-ava .chat-brand-mark{ width:20px; height:14px; object-fit:contain; }
.msg.bot + .msg.bot .msg-ava{ visibility:hidden; }

.bubble{
  max-width:83%; padding:11px 15px;
  font-size:.925rem; line-height:1.55;
  border-radius:16px;
}
.msg.bot .bubble{
  background:#fff; color:var(--slate-700);
  border:1px solid var(--line); border-bottom-left-radius:5px;
  box-shadow:var(--sh-xs);
}
.msg.user{ justify-content:flex-end; }
.msg.user .bubble{
  background:var(--grad-brand-alt); color:#fff;
  border-bottom-right-radius:5px;
  box-shadow:0 8px 20px -10px rgba(86,70,232,.6);
}
.bubble strong{ font-weight:700; color:var(--slate-900); }
.msg.user .bubble strong{ color:#fff; }
.bubble a{ color:var(--violet-deep); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.bubble ul{ margin:9px 0 2px; display:grid; gap:6px; }
.bubble li{ position:relative; padding-left:17px; }
.bubble li::before{
  content:""; position:absolute; left:2px; top:.58em; width:5px; height:5px; border-radius:50%;
  background:var(--violet);
}
.bubble .price{
  display:block; margin:10px 0 2px; padding:11px 13px;
  border-radius:11px; background:rgba(109,94,248,.07); border:1px solid rgba(109,94,248,.16);
}
.bubble .price b{ display:block; font-size:1.18rem; letter-spacing:-.035em; color:var(--slate-900); }
.bubble .price i{ font-style:normal; font-size:.79rem; color:var(--slate-400); }

/* Typing indicator */
.typing .bubble{ display:flex; gap:4px; padding:14px 15px; }
.typing i{
  width:6px; height:6px; border-radius:50%; background:var(--slate-400);
  animation:blink 1.3s ease-in-out infinite;
}
.typing i:nth-child(2){ animation-delay:.18s } .typing i:nth-child(3){ animation-delay:.36s }
@keyframes blink{ 0%,60%,100%{ opacity:.25; transform:translateY(0) } 30%{ opacity:1; transform:translateY(-3px) } }

/* Quick replies */
.chat-replies{
  display:flex; flex-wrap:wrap; gap:7px;
  padding:4px 0 14px 35px;
  animation:msgIn .42s var(--ease-out) both;
}
.chat-reply{
  padding:8px 15px; border-radius:var(--r-pill);
  background:#fff; border:1.5px solid rgba(109,94,248,.32);
  font-size:.855rem; font-weight:600; color:var(--violet-deep);
  transition:all .24s var(--ease);
}
.chat-reply:hover{ background:var(--violet-deep); border-color:var(--violet-deep); color:#fff; transform:translateY(-2px); box-shadow:var(--sh-brand); }

/* Inline CTA card */
.chat-cta{
  display:grid; gap:8px; padding:4px 0 14px 35px;
  animation:msgIn .42s var(--ease-out) both;
}
.chat-cta a{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 18px; border-radius:var(--r-pill);
  font-size:.9rem; font-weight:600;
  transition:all .26s var(--ease);
}
.chat-cta a svg{ width:17px; height:17px; }
.chat-cta .primary{ color:#fff; background:var(--grad-brand-alt); box-shadow:var(--sh-brand); }
.chat-cta .primary:hover{ transform:translateY(-2px); box-shadow:0 18px 38px -12px rgba(109,94,248,.6); }
.chat-cta .secondary{ color:var(--slate-700); background:#fff; border:1.5px solid var(--line); }
.chat-cta .secondary:hover{ border-color:var(--violet); color:var(--violet-deep); transform:translateY(-2px); }

/* Composer */
.chat-form{
  flex:none; display:flex; align-items:flex-end; gap:9px;
  padding:12px 14px 12px 16px;
  background:#fff; border-top:1px solid var(--line-soft);
}
.chat-input{
  flex:1; min-width:0; resize:none;
  max-height:110px; padding:10px 2px;
  font:inherit; font-size:.92rem; line-height:1.5; color:var(--slate-900);
  background:transparent; border:0; outline:none;
}
.chat-input::placeholder{ color:var(--slate-400); }
.chat-send{
  width:38px; height:38px; flex:none; border-radius:50%;
  display:grid; place-items:center; color:#fff;
  background:var(--grad-brand-alt); box-shadow:var(--sh-brand);
  transition:transform .26s var(--ease), opacity .26s var(--ease), box-shadow .26s var(--ease);
}
.chat-send svg{ width:17px; height:17px; }
.chat-send:hover:not(:disabled){ transform:translateY(-2px) scale(1.05); }
.chat-send:disabled{ opacity:.32; box-shadow:none; cursor:not-allowed; }

.chat-foot{
  flex:none; padding:0 16px 11px; background:#fff;
  font-size:.715rem; color:var(--slate-400); text-align:center;
}
.chat-foot a{ color:var(--slate-500); text-decoration:underline; text-underline-offset:2px; }

.chat-error{
  padding:0 0 10px 35px; font-size:.8rem; font-weight:600; color:#DC2626;
  animation:msgIn .3s var(--ease-out) both;
}

/* --------------------------------------------------------------- Responsive */
@media (max-width:640px){
  .chat-launcher{ right:14px; bottom:14px; width:54px; height:54px; }
  .chat-launcher svg{ width:24px; height:24px; }
  .to-top{ right:18px; bottom:80px; width:42px; height:42px; }
  .chat-nudge{ right:78px; bottom:22px; max-width:min(238px, calc(100vw - 100px)); font-size:.85rem; }

  .chat-panel{
    right:0; bottom:0; left:0;
    width:100%;
    height:100vh; max-height:100vh;
    height:100dvh; max-height:100dvh;
    border-radius:0; border:0;
    transform-origin:bottom center;
  }
  .chat-panel:not(.open){ transform:translateY(24px) scale(1); }
  body.chat-open{ overflow:hidden; }
  body.chat-open .chat-launcher{ display:none; }
  .chat-head{ padding-top:max(16px, env(safe-area-inset-top)); }
  .chat-foot{ padding-bottom:max(11px, env(safe-area-inset-bottom)); }
}

/* ------------------------------------------------------------ Reduced motion */
@media (prefers-reduced-motion:reduce){
  .chat-launcher::after{ display:none; }
  .msg,.chat-replies,.chat-cta,.chat-nudge,.chat-error{ animation:none !important; }
  .typing i{ animation:none; opacity:.5; }
}