/* ============================================================
   KIPINÄ-KEHOTE (form.ai-hi)
   ------------------------------------------------------------
   Sivuston ensisijaisen toimintakehotteen perustyylit. Pilleri
   näyttää levossa pelkän tervehdyksen, ja hover tai fokus avaa
   syöttökentän ja lähetysnuolen.

   Linkitä tämä heti base.css:n jälkeen jokaiselle sivulle, jolla
   kehote on, jotta sivun omat säännöt voittavat nämä. Sivukohtaiset
   poikkeamat (tummat taustat, kentän leveys, mobiiliasettelu)
   kirjoitetaan sivun omaan tiedostoon vain muuttuvina arvoina.
   Rivi, jossa kehote on toisen napin kanssa, on base.css:ssä.
   ============================================================ */
.ai-hi {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 16px 28px;
  background: #fff;
  color: var(--navy-dark);
  border: 1px solid var(--border);
  font-weight: 800;
  font-size: 15px;
  border-radius: 999px;
  font-family: var(--font);
  transition: all 0.2s;
}
.ai-hi:hover, .ai-hi:focus-within {
  border-color: var(--navy);
  color: var(--navy);
  transform: translateY(-2px);
}
.ai-hi-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  user-select: none;
  cursor: default;
}
.ai-hi-wave {
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  transform-origin: 70% 70%;
  animation: aiWave 3.4s ease-in-out 2s infinite;
}
@keyframes aiWave {
  0%, 78%, 100% { transform: rotate(0deg); }
  82%  { transform: rotate(14deg); }
  86%  { transform: rotate(-8deg); }
  90%  { transform: rotate(14deg); }
  94%  { transform: rotate(-4deg); }
  98%  { transform: rotate(10deg); }
}
.ai-hi-input {
  width: 0;
  min-width: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--navy-dark);
  font: 500 14px/1 var(--font);
  opacity: 0;
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease 0.05s, padding 0.3s ease, margin 0.3s ease;
}
.ai-hi-input::placeholder {
  color: var(--text-muted);
  font-weight: 400;
}
.ai-hi:hover .ai-hi-input,
.ai-hi:focus-within .ai-hi-input {
  width: 200px;
  opacity: 1;
  padding: 0 12px;
  margin-left: 10px;
  border-left: 1px solid var(--border);
}
.ai-hi-send {
  width: 0;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--navy-dark);
  cursor: pointer;
  opacity: 0;
  transform: scale(0.65);
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease 0.1s, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}
.ai-hi-send svg { width: 14px; height: 14px; stroke-width: 2.6; }
.ai-hi:hover .ai-hi-send,
.ai-hi:focus-within .ai-hi-send {
  width: 32px;
  opacity: 1;
  transform: scale(1);
}
.ai-hi-send:hover, .ai-hi-send:focus-visible { color: var(--pink); }