/* Home hero, "Abdul AI" (components/HeroAgent.astro). 1. The portrait = the VOICE call (eligible visitors only; voice-call.js).
   2. The text input under it (text chat). 3. The text chat dialog. */

/* 1 · the portrait column is the agent: the portrait (a button) with sound waves rippling out, the input under it */
#hero .hero-visual { aspect-ratio: auto; flex-direction: column; gap: 22px; max-width: 460px; }
.ha-stage { display: flex; flex-direction: column; align-items: center; gap: 34px; width: 100%; }
.ha-core { position: relative; display: block; width: min(330px, 78%); aspect-ratio: 1; padding: 0; border: 0; background: none;
  border-radius: 50%; cursor: pointer; color: inherit; -webkit-tap-highlight-color: transparent; }
.ha-core .halo { position: absolute; inset: -14%; }
.ha-core .portrait { display: block; position: relative; z-index: 1; width: 100% !important; height: 100%; margin: 0;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.ha-core:hover .portrait, .ha-core:focus-visible .portrait { transform: scale(1.02); box-shadow: 0 0 0 6px rgba(160, 190, 255, .18), 0 30px 80px rgba(20,17,46,.4); }
.ha-core:focus-visible { outline: none; }
/* sound waves: three rings breathing out from the edge of the picture, one after the other */
.ha-waves { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ha-waves i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(170, 200, 255, .55);
  animation: ha-wave 3.6s cubic-bezier(.2,.6,.3,1) infinite; opacity: 0; }
.ha-waves i:nth-child(2) { animation-delay: 1.2s; } .ha-waves i:nth-child(3) { animation-delay: 2.4s; }
@keyframes ha-wave { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.32); opacity: 0; } }
.ha-core:hover .ha-waves i { border-color: rgba(200, 220, 255, .8); animation-duration: 2.4s; }
.ha-hint { position: absolute; z-index: 2; left: 50%; bottom: -6px; translate: -50% 0; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px; white-space: nowrap; font-size: 14px; font-weight: 700; color: #16103a;
  background: #fff; box-shadow: 0 10px 26px -8px rgba(10, 6, 40, .55); }
.ha-hint svg { color: #f5536a; }
/* Voice only for eligible visitors (voice-gate.js sets html[data-voice]): everyone else sees a plain photo — no waves, no hint. */
html:not([data-voice="yes"]) .ha-waves, html:not([data-voice="yes"]) .ha-hint { display: none; }
.ha-core[disabled] { cursor: default; }
.ha-core[disabled]:hover .portrait { transform: none; box-shadow: 0 30px 80px rgba(20, 17, 46, .35); }
/* The call: the rings follow whoever is speaking (--lvl 0–1 from voice-call.js), the text input steps aside */
.ha-stage.is-call .ha-bar, .ha-stage.is-call .ha-hint { display: none; }
.ha-stage.is-call .ha-waves i { animation: none; opacity: calc(.22 + var(--lvl, 0) * .78); border-color: rgba(127, 232, 196, .55);   /* mint-300, quiet */
  transform: scale(calc(1.03 + var(--lvl, 0) * var(--k))); transition: transform .09s linear, opacity .09s linear; }
.ha-stage.is-call .ha-waves i:nth-child(1) { --k: .14; } .ha-stage.is-call .ha-waves i:nth-child(2) { --k: .26; } .ha-stage.is-call .ha-waves i:nth-child(3) { --k: .4; }
/* Live call = the brand mint (Abdul, 2026-10-13: a neon green "looks ridiculous" — use the palette, elegantly): the portrait ring turns
   mint-400, with a soft mint halo that breathes slowly. */
.ha-stage.is-call .portrait { border-color: var(--abdul-mint-400, #3ce0a6); box-shadow: 0 0 0 1px rgba(60, 224, 166, .35), 0 0 26px rgba(31, 216, 150, .22), 0 30px 80px rgba(20,17,46,.4); animation: ha-live 3.2s ease-in-out infinite; }
@keyframes ha-live { 0%, 100% { box-shadow: 0 0 0 1px rgba(60, 224, 166, .3), 0 0 18px rgba(31, 216, 150, .16), 0 30px 80px rgba(20,17,46,.4); }
  50% { box-shadow: 0 0 0 1px rgba(60, 224, 166, .45), 0 0 32px rgba(31, 216, 150, .3), 0 30px 80px rgba(20,17,46,.4); } }
.ha-call { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; max-width: 380px; }
.ha-ts { min-height: 65px; }   /* the Turnstile check before a voice call (src/scripts/voice-engine.ts) */
.ha-call[hidden] { display: none; }
.ha-status { margin: 0; font-size: 15.5px; font-weight: 600; color: #fff; line-height: 1.6; }
.ha-end { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border: 0; border-radius: 999px; background: #e5484d;
  color: #fff; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; box-shadow: 0 10px 26px -10px rgba(229, 72, 77, .7); }
.ha-end:active { transform: scale(.98); }
/* came from "talk to me" on another page: the portrait calls attention to itself until it is tapped */
.ha-core.is-calling-you .ha-waves i { border-color: rgba(31, 216, 150, .85); animation-duration: 1.8s; }
.ha-core.is-calling-you .ha-hint { background: #1fd896; }

/* (hidden for now) the tools around the portrait */
.ha-brain { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.ha-node { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: .82; }
[dir="ltr"] .ha-node { left: calc(100% - var(--x)); }
.ha-node img { width: 20px; height: 20px; object-fit: contain; }
@media (max-width: 880px) {
  #hero .hero-visual { margin-top: 8px; }
  .ha-core { width: min(260px, 70vw); }
  .ha-node, [dir="ltr"] .ha-node { left: var(--px); top: var(--py); width: 34px; height: 34px; border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) { .ha-waves i { animation: none; opacity: .35; transform: scale(1.08); } .ha-stage.is-call .ha-waves i { transition: none; } .ha-stage.is-call .portrait { animation: none; } }

/* 2 · the bar */
.ha-bar { width: 100%; max-width: 440px; }
.ha-kicker { justify-content: center; }
.ha-kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.86); }
.ha-dot { width: 8px; height: 8px; border-radius: 50%; background: #1fd896; box-shadow: 0 0 0 4px rgba(31,216,150,.18); animation: ha-pulse 2s ease-in-out infinite; }
@keyframes ha-pulse { 50% { box-shadow: 0 0 0 7px rgba(31,216,150,.06); } }
.ha-input {
  display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 18px;
  background: rgba(255,255,255,.96); box-shadow: 0 20px 50px -14px rgba(10,6,40,.7), 0 0 0 1px rgba(255,255,255,.4);
}
.ha-input input { flex: 1; min-width: 0; height: 48px; padding: 0 14px; border: 0; background: transparent; font: inherit; font-size: 16px; color: #16103a; outline: none; }
.ha-mic, .ha-send { flex: none; width: 46px; height: 46px; border: 0; border-radius: 13px; display: grid; place-items: center; cursor: pointer; }
.ha-mic { background: #f1eefb; color: #4a32d4; }
.ha-send { background: var(--abdul-gradient-salmon, #f5536a); color: #fff; }
.ha-mic:active, .ha-send:active { transform: scale(.98); }
[dir="rtl"] .ha-send svg { transform: scaleX(-1); }

/* 3 · the dialog */
/* The text chat, full screen (2026-10-14): a page of its own on every device — header with back + "new chat", the conversation in a
   centred column, the box pinned to the bottom (above the phone keyboard; hero-agent's script sizes it to the visual viewport). */
.ha-dlg { position: fixed; inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: #f7f5fc; overflow: hidden; }
.ha-dlg[open] { display: flex; flex-direction: column; animation: ha-dlg-in .22s ease-out; }
.ha-dlg::backdrop { background: #f7f5fc; }
@keyframes ha-dlg-in { from { opacity: 0; transform: translateY(18px); } }
html.ha-chat-open, html.ha-chat-open body { overflow: hidden; }
.ha-dlg .cc { --col: max(14px, calc((100% - 760px) / 2)); flex: 1; min-height: 0; display: flex; flex-direction: column; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: #f7f5fc; overflow: hidden; }
.ha-dlg .cc-head { flex: none; padding: calc(10px + env(safe-area-inset-top)) var(--col) 10px; background: rgba(255,255,255,.92); border-bottom: 1px solid rgba(20,8,50,.07); }
.ha-dlg .cc-log { flex: 1; min-height: 0; max-height: none; padding: 18px var(--col) 12px; overscroll-behavior: contain; }
.ha-dlg .cc-quick { flex: none; padding: 4px var(--col) 8px; margin: 0; }
.ha-dlg .cc-form { flex: none; padding: 8px var(--col) calc(12px + env(safe-area-inset-bottom)); background: #f7f5fc; }
.ha-dlg .cc-input { height: 54px; border-radius: 27px; padding: 0 20px; box-shadow: 0 2px 10px rgba(20,8,50,.06); }
.ha-dlg .cc-send { flex-basis: 54px; height: 54px; border-radius: 50%; }
.ha-dlg .cc-restart { flex: none; margin: 4px auto calc(14px + env(safe-area-inset-bottom)); }
.ha-dlg .cc-msg { font-size: 16px; }
.cc-welcome { display: none; }
.ha-dlg .cc-welcome { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 4vh 0 14px; }
.ha-dlg .cc-welcome img { width: 72px; height: 72px; border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(108,77,255,.22); margin-bottom: 8px; }
.ha-dlg .cc-welcome b { font-size: 20px; color: #16103a; } .ha-dlg .cc-welcome span { font-size: 13.5px; color: #6b6488; }
.ha-back { flex: none; width: 40px; height: 40px; margin-inline-end: 2px; border: 0; border-radius: 50%; background: #f1eefb; color: #2b2155; display: grid; place-items: center; cursor: pointer; }
[dir=rtl] .ha-back svg { transform: scaleX(-1); }
.ha-back:active, .cc-new:active { transform: scale(.98); }
.cc-new { margin-inline-start: auto; flex: none; height: 36px; padding: 0 14px; border: 1.5px solid rgba(108,77,255,.3); border-radius: 999px; background: #fff; color: #3a22c9; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.cc-new[hidden] { display: none; }
.cc-head > div { flex: 1; }
.ha-dlg .cc-head > div { min-width: 0; } .ha-dlg .cc-head > div > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }