/* AMS custom chat widget — tokens from the locked design system.
   Panel / send / user bubbles still use var(--cta) / var(--cta-text).
   The launcher is the owner's living blue robot, not the site CTA chip. */

#ams-chat,
.ams-chat{
  /* teslatintla stacking: launcher under the CTA / price bar (bar is 90–200). */
  --ams-chat-z: 50;
  /* 5.27: this file inherits the page's --surface/--bg/--text/--muted/--accent/--cta/--cta-text
     tokens as-is (they already resolve to our cream/dark-text/gold palette), so the panel needs
     no further recoloring. Only --hairline/--border have no match in our theme and would otherwise
     fall back to a near-invisible light-on-light line (the source widget assumed a dark panel);
     pointing them at our own line color here fixes every var(--hairline/--border, ...) use below. */
  --hairline: var(--ams-line, rgba(197, 202, 208, 0.28));
  --border: var(--ams-line, rgba(255, 255, 255, 0.10));
  position:fixed;
  right:16px;
  /* Khloud: clear the 65px mobile CTA bar + 16px gap. Desktop (no bar) overrides below. */
  bottom:calc(65px + env(safe-area-inset-bottom, 0px) + 16px);
  z-index:var(--ams-chat-z);
  font-family:var(--font-body, Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  font-size:1rem;
  line-height:1.6;
  color:var(--text, #F4FAFD);
  pointer-events:none;
  overflow:visible;
}

.ams-chat *{ box-sizing:border-box; }

.ams-chat-launcher,
.ams-chat-panel{
  pointer-events:auto;
}

.ams-chat-launcher{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  width:74px;
  height:74px;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:inherit;
  cursor:pointer;
  box-shadow:none;
  overflow:visible;
  appearance:none;
  -webkit-appearance:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:opacity .2s ease, visibility .2s ease, transform .2s ease;
}

.ams-chat-launcher:hover,
.ams-chat-launcher:focus-visible{
  outline:none;
}

.ams-chat-launcher:focus-visible{
  box-shadow:0 0 0 3px rgba(77, 166, 255, .45);
}

.ams-chat.is-open{
  --ams-chat-z: 220;
}

.ams-chat.is-open .ams-chat-launcher{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:scale(.96);
}

.ams-chat.is-open .speech{
  opacity:0;
  visibility:hidden;
}

/* the owner's living Grok-style robot — scoped under .ams-chat so .face / .eye / .speech
   do not collide with the rest of the site. The button IS #ams-ai-bot. Placement
   stays on .ams-chat (above the sticky mobile bar), not his standalone 110px pin. */
.ams-chat #ams-ai-bot,
.ams-chat #ams-ai-bot *{
  box-sizing:content-box;
}

.ams-chat #ams-ai-bot{
  position:relative;
  width:74px;
  height:74px;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}

.ams-chat .bot-body{
  width:74px;
  height:74px;
  border-radius:50%;
  background:linear-gradient(145deg, #4da6ff, #1a73e8);
  box-shadow:
    0 10px 28px rgba(26, 115, 232, 0.55),
    0 0 0 3px rgba(255, 255, 255, 0.18);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  animation:float 3.6s ease-in-out infinite, tilt 5.2s ease-in-out infinite;
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}

.ams-chat #ams-ai-bot:hover .bot-body,
.ams-chat #ams-ai-bot:active .bot-body,
.ams-chat #ams-ai-bot:focus-visible .bot-body{
  transform:scale(1.13);
  box-shadow:
    0 14px 36px rgba(26, 115, 232, 0.7),
    0 0 0 4px rgba(255, 255, 255, 0.28);
}

.ams-chat .antenna{
  position:absolute;
  top:-15px;
  left:50%;
  transform:translateX(-50%);
  width:4px;
  height:17px;
  background:#0d1b2a;
  border-radius:4px;
}
.ams-chat .antenna::after{
  content:'';
  position:absolute;
  top:-7px;
  left:50%;
  transform:translateX(-50%);
  width:11px;
  height:11px;
  background:#00d4ff;
  border-radius:50%;
  box-shadow:0 0 10px #00d4ff;
  animation:pulse-dot 2s ease-in-out infinite;
}

.ams-chat .face{
  width:54px;
  height:54px;
  background:#0d1b2a;
  border-radius:50%;
  position:relative;
  overflow:hidden;
}

.ams-chat .eyes{
  position:absolute;
  top:15px;
  left:0;
  width:100%;
  display:flex;
  justify-content:center;
  gap:11px;
}
.ams-chat .eye{
  width:15px;
  height:15px;
  background:#ffffff;
  border-radius:50%;
  position:relative;
  overflow:hidden;
}
.ams-chat .pupil{
  width:8px;
  height:8px;
  background:#000000;
  border-radius:50%;
  position:absolute;
  top:3.5px;
  left:3.5px;
  transition:all 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ams-chat .mouth{
  position:absolute;
  bottom:12px;
  left:50%;
  transform:translateX(-50%);
  width:18px;
  height:8px;
  border-bottom:3px solid #ffffff;
  border-radius:0 0 12px 12px;
  transition:all 0.3s ease;
}

.ams-chat .speech{
  position:absolute;
  bottom:84px;
  right:0;
  background:#ffffff;
  color:#0d1b2a;
  font-family:system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size:13.5px;
  font-weight:650;
  padding:9px 15px;
  border-radius:20px;
  white-space:nowrap;
  box-shadow:0 8px 24px rgba(0,0,0,0.28);
  opacity:0;
  transform:translateY(10px) scale(0.92);
  transition:all 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events:none;
}
.ams-chat .speech::after{
  content:'';
  position:absolute;
  bottom:-6px;
  right:24px;
  width:13px;
  height:13px;
  background:#ffffff;
  transform:rotate(45deg);
}

.ams-chat #ams-ai-bot:hover .speech,
.ams-chat #ams-ai-bot.show-bubble .speech{
  opacity:1;
  transform:translateY(0) scale(1);
}

@keyframes float{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-8px); }
}
@keyframes tilt{
  0%, 100%{ transform:rotate(-3.5deg); }
  50%{ transform:rotate(3.5deg); }
}
@keyframes pulse-dot{
  0%, 100%{ opacity:1; transform:translateX(-50%) scale(1); }
  50%{ opacity:0.65; transform:translateX(-50%) scale(0.82); }
}

.ams-chat-panel{
  position:absolute;
  right:0;
  bottom:86px;
  display:flex;
  flex-direction:column;
  width:380px;
  height:520px;
  max-width:calc(100vw - 32px);
  background:var(--surface, #0B1F2E);
  color:var(--text, #F4FAFD);
  border:1px solid var(--hairline, rgba(197, 202, 208, 0.28));
  border-radius:var(--radius, 8px);
  box-shadow:var(--shadow-glow, 0 0 0 1px var(--hairline, rgba(197, 202, 208, 0.28)));
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
}

.ams-chat.is-open .ams-chat-panel{
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto;
}

.ams-chat-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px;
  border-bottom:1px solid var(--hairline, rgba(197, 202, 208, 0.28));
  background:var(--bg);
}

.ams-chat-title{
  margin:0;
  font-family:var(--font-head, Outfit, sans-serif);
  font-size:1rem;
  font-weight:600;
  letter-spacing:-0.02em;
  line-height:1.25;
  color:var(--text, #F4FAFD);
  text-transform:none;
}

.ams-chat-close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  padding:0;
  flex-shrink:0;
  border:1px solid var(--border, rgba(255,255,255,0.10));
  border-radius:var(--radius-sm, 4px);
  background:transparent;
  color:var(--muted, #4A5B68);
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
}

.ams-chat-close:hover,
.ams-chat-close:focus-visible{
  color:var(--text, #F4FAFD);
  border-color:var(--accent);
  outline:none;
}

.ams-chat-close svg{
  width:16px;
  height:16px;
  display:block;
}

.ams-chat-log{
  flex:1;
  overflow-y:auto;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
  background:var(--bg);
  -webkit-overflow-scrolling:touch;
}

.ams-chat-msg{
  display:flex;
  max-width:88%;
}

.ams-chat-msg--assistant{ align-self:flex-start; }
.ams-chat-msg--user{ align-self:flex-end; }

.ams-chat-msg-body{
  margin:0;
  padding:10px 12px;
  border-radius:var(--radius, 8px);
  font-size:.95rem;
  line-height:1.55;
  word-wrap:break-word;
  overflow-wrap:anywhere;
}

.ams-chat-msg--assistant .ams-chat-msg-body{
  background:var(--surface, #0B1F2E);
  color:var(--text, #F4FAFD);
  border:1px solid var(--border, rgba(255,255,255,0.10));
}

.ams-chat-msg--user .ams-chat-msg-body{
  background:var(--cta, var(--accent));
  color:var(--cta-text, var(--bg));
  border:1px solid transparent;
}

.ams-chat-msg-body a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:2px;
}

.ams-chat-msg--user .ams-chat-msg-body a{ color:var(--cta-text, var(--bg)); }

.ams-chat-book{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:8px;
  padding:10px 16px;
  border:0;
  border-radius:var(--radius-sm, 4px);
  background:var(--cta, var(--accent));
  color:var(--cta-text, var(--bg));
  font-family:var(--font-body, Inter, sans-serif);
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.02em;
  text-decoration:none;
  cursor:pointer;
  transition:transform .15s ease;
}

.ams-chat-book:hover{ transform:translateY(-2px); }

.ams-chat-typing{
  display:none;
  align-items:center;
  gap:6px;
  align-self:flex-start;
  padding:10px 12px;
  border-radius:var(--radius, 8px);
  background:var(--surface, #0B1F2E);
  border:1px solid var(--border, rgba(255,255,255,0.10));
}

.ams-chat-typing.is-on{ display:inline-flex; }

.ams-chat-typing span{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--muted, #4A5B68);
  animation:ams-chat-dot 1.2s ease-in-out infinite;
}

.ams-chat-typing span:nth-child(2){ animation-delay:.15s; }
.ams-chat-typing span:nth-child(3){ animation-delay:.3s; }

@keyframes ams-chat-dot{
  0%, 80%, 100%{ opacity:.28; transform:translateY(0); }
  40%{ opacity:1; transform:translateY(-3px); }
}

.ams-chat-footer{
  margin:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 16px;
  background:var(--surface, #0B1F2E);
  font-family:var(--font-body, Inter, sans-serif);
  font-size:.8rem;
  font-weight:500;
  line-height:1.4;
  color:var(--muted, #4A5B68);
}

.ams-chat-footer a{
  color:var(--text, #F4FAFD);
  text-decoration:underline;
  text-underline-offset:2px;
}

.ams-chat-footer a:hover,
.ams-chat-footer a:focus-visible{
  color:var(--accent);
  outline:none;
}

.ams-chat-form{
  display:flex;
  align-items:flex-end;
  gap:8px;
  padding:12px;
  border-top:1px solid var(--hairline, rgba(197, 202, 208, 0.28));
  background:var(--surface, #0B1F2E);
}

.ams-chat-input{
  flex:1;
  min-height:40px;
  max-height:96px;
  resize:none;
  padding:8px 12px;
  border:1px solid var(--border, rgba(255,255,255,0.10));
  border-radius:var(--radius-sm, 4px);
  background:var(--bg);
  color:var(--text, #F4FAFD);
  font-family:var(--font-body, Inter, sans-serif);
  font-size:1rem;
  line-height:1.4;
}

.ams-chat-input::placeholder{ color:var(--muted, #4A5B68); }

.ams-chat-input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft, rgba(198, 161, 91, .14));
}

.ams-chat-send{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  padding:0 16px;
  border:0;
  border-radius:var(--radius-sm, 4px);
  background:var(--cta, var(--accent));
  color:var(--cta-text, var(--bg));
  font-family:var(--font-body, Inter, sans-serif);
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.02em;
  cursor:pointer;
  transition:transform .15s ease, opacity .15s ease;
}

.ams-chat-send:hover:not(:disabled){ transform:translateY(-2px); }

.ams-chat-send:disabled{
  opacity:.45;
  cursor:not-allowed;
  transform:none;
}

.ams-chat-sr{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* 5.27: the phone nav drawer (.nav.is-open, z-index 41, opaque, full-bleed over the page) sits
   under the chat widget's z-index (50), so the launcher was floating on top of it, overlapping
   the last menu row. Hide the widget outright while the drawer is open -- simplest way to guarantee
   it never covers any menu item, now or if the menu grows. */
body.nav-open #ams-chat,
body.nav-open .ams-chat{
  display:none;
}

@media (max-width: 1120px){
  #ams-chat,
  .ams-chat{
    right:12px;
    bottom:calc(65px + env(safe-area-inset-bottom, 0px) + 16px);
  }

  .ams-chat-panel{
    width:min(400px, calc(100vw - 24px));
    height:min(560px, calc(100dvh - 72px - env(safe-area-inset-bottom, 0px) - 110px));
    bottom:86px;
  }
}

/* CTA bar is display:none from 1121px up. Do not keep the 65px hoist. */
@media (min-width: 1121px){
  #ams-chat,
  .ams-chat{
    bottom:16px;
  }
}

/* 5.27: /tesla/'s own ported sticky estimate bar (sim.css: fixed, 82px tall, bottom:0 by default,
   bottom:72px under the sim's own max-width:980px breakpoint -- so its top edge sits at 82px or
   154px from the viewport bottom) overlaps the chat launcher's default position at every width.
   Hoist the widget above it at each of the sim's own breakpoints; both rules come after the
   1121px desktop rule above so they win there too (same specificity, source order). */
@media (max-width: 980px){
  body.sim-pricebar-on #ams-chat,
  body.sim-pricebar-on .ams-chat{
    bottom:calc(154px + env(safe-area-inset-bottom, 0px) + 16px);
  }
}
@media (min-width: 981px){
  body.sim-pricebar-on #ams-chat,
  body.sim-pricebar-on .ams-chat{
    bottom:calc(82px + env(safe-area-inset-bottom, 0px) + 16px);
  }
}

@media (max-width: 480px){
  .ams-chat-panel{
    width:calc(100vw - 24px);
  }
}

@media (prefers-reduced-motion: reduce){
  .ams-chat-launcher,
  .ams-chat-panel,
  .ams-chat-book,
  .ams-chat-send,
  .ams-chat-typing span,
  .ams-chat .bot-body,
  .ams-chat .antenna::after,
  .ams-chat .pupil,
  .ams-chat .mouth,
  .ams-chat .speech{
    transition:none;
    animation:none;
  }

  .ams-chat-panel{
    transform:none;
  }
}