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

.ams-chat{
  --ams-chat-z: 210;
  position:fixed;
  right:16px;
  bottom:20px;
  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, #F5F5F5);
  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-launcher{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:scale(.96);
}

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

/* Ahmad'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, #141414);
  color:var(--text, #F5F5F5);
  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, #F5F5F5);
  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, #A3A3A3);
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
}

.ams-chat-close:hover,
.ams-chat-close:focus-visible{
  color:var(--text, #F5F5F5);
  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, #141414);
  color:var(--text, #F5F5F5);
  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, #141414);
  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, #A3A3A3);
  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, #141414);
  font-family:var(--font-body, Inter, sans-serif);
  font-size:.8rem;
  font-weight:500;
  line-height:1.4;
  color:var(--muted, #A3A3A3);
}

.ams-chat-footer a{
  color:var(--text, #F5F5F5);
  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, #141414);
}

.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, #F5F5F5);
  font-family:var(--font-body, Inter, sans-serif);
  font-size:1rem;
  line-height:1.4;
}

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

.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;
}

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

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

@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;
  }
}
