/* ==========================================================================
   Ali "Coming Soon" announcement banner
   Placeholder shown on pages that will eventually carry the live Ali chat
   widget, while the Claude API side of it isn't funded/live yet. Uses the
   same CSS variables as the rest of the site, so it matches dark/light
   theme automatically, but deliberately leans on --violet instead of the
   site's everyday --cyan accent, plus a gradient wash and a drop-in
   entrance, so it visually reads as a distinct announcement rather than
   another pricing/content card.
   ========================================================================== */

#ali-soon-banner{
  position:relative; overflow:hidden;
  display:flex; align-items:flex-start; gap:14px;
  background:
    linear-gradient(135deg, rgba(124,111,240,0.14), rgba(79,214,232,0.08)),
    var(--panel);
  border:1px solid var(--violet);
  border-radius:14px; padding:16px 18px; margin:20px 0 28px;
  box-shadow:0 10px 26px rgba(124,111,240,0.18);
  animation:ali-soon-drop 0.5s cubic-bezier(0.22,1,0.36,1) both;
}
html[data-theme="light"] #ali-soon-banner{
  background:
    linear-gradient(135deg, rgba(214,167,60,0.16), rgba(22,48,92,0.06)),
    var(--panel);
  box-shadow:0 10px 26px rgba(214,167,60,0.16);
}

@keyframes ali-soon-drop{
  0%{ opacity:0; transform:translateY(-22px) scaleY(0.96); }
  100%{ opacity:1; transform:translateY(0) scaleY(1); }
}
@media (prefers-reduced-motion:reduce){
  #ali-soon-banner{ animation:none; }
}

#ali-soon-banner .ali-soon-icon{
  flex-shrink:0; width:34px; height:34px; border-radius:50%;
  background:var(--violet); color:var(--on-accent);
  display:flex; align-items:center; justify-content:center;
}
#ali-soon-banner .ali-soon-icon svg{ width:18px; height:18px; }
#ali-soon-banner .ali-soon-body{ flex:1; min-width:0; }
#ali-soon-banner .ali-soon-eyebrow{
  font-family:'JetBrains Mono', monospace; font-size:0.7rem; font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--violet);
  margin-bottom:5px; display:flex; align-items:center; gap:6px;
}
#ali-soon-banner .ali-soon-dot{
  width:6px; height:6px; border-radius:50%; background:var(--violet);
  animation:ali-soon-pulse 1.6s ease-in-out infinite;
}
@keyframes ali-soon-pulse{
  0%, 100%{ opacity:1; transform:scale(1); }
  50%{ opacity:0.35; transform:scale(0.7); }
}
@media (prefers-reduced-motion:reduce){
  #ali-soon-banner .ali-soon-dot{ animation:none; }
}
#ali-soon-banner .ali-soon-heading{
  font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:1.02rem;
  color:var(--text); margin-bottom:5px;
}
#ali-soon-banner .ali-soon-text{
  color:var(--text-dim); font-size:0.88rem; line-height:1.55; max-width:620px;
}
#ali-soon-banner .ali-soon-close{
  flex-shrink:0; background:none; border:none; color:var(--text-dim); cursor:pointer;
  font-size:1.1rem; line-height:1; padding:2px 4px;
}
#ali-soon-banner .ali-soon-close:hover{ color:var(--violet); }

@media (max-width:480px){
  #ali-soon-banner{ padding:14px; gap:10px; }
  #ali-soon-banner .ali-soon-icon{ width:28px; height:28px; }
}