/* Live front desk panel: one mic button starts the real conversation in the page. Transform and opacity only. */
.talk{--tk:#0a3eff;position:relative;display:grid;justify-items:center;gap:14px;padding:clamp(22px,4vw,36px) clamp(18px,3vw,32px);border-radius:28px;color:#fff;text-align:center;overflow:hidden;background:radial-gradient(70% 80% at 10% 0%,rgba(10,62,255,.75),transparent 70%),radial-gradient(70% 80% at 100% 100%,rgba(255,62,165,.45),transparent 70%),#060a1c;box-shadow:0 30px 80px -24px rgba(6,10,28,.7)}
.talk-k{font-size:.85rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.talk-h{font-size:clamp(1.5rem,2vw + 1rem,2.3rem);font-weight:700;letter-spacing:-.03em;line-height:1.08;color:#fff}
.talk-mic{position:relative;width:clamp(84px,14vh,112px);aspect-ratio:1;border:0;border-radius:50%;background:var(--tk);color:#fff;cursor:pointer;display:grid;place-items:center;box-shadow:0 14px 50px rgba(10,62,255,.8),inset 0 0 0 2px rgba(255,255,255,.3);transition:transform .16s cubic-bezier(.23,1,.32,1),background-color .16s ease-out}
.talk-mic svg{width:46%;height:46%}
.talk-mic:active{transform:scale(.96)}
.talk-mic:disabled{cursor:progress}
.talk-mic[aria-pressed=true]{background:#fff;color:var(--tk)}
.talk-mic i{position:absolute;inset:0;border-radius:50%;border:2px solid #7ba2ff;opacity:0;pointer-events:none}
.talk-mic:focus-visible,.talk-form :focus-visible{outline:3px solid #fff;outline-offset:3px}
.talk-status{min-height:1.5em;font-size:1rem;color:rgba(255,255,255,.92)}
.talk-wave{display:flex;align-items:center;justify-content:center;gap:5px;width:min(100%,340px);height:44px;border-radius:22px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.talk-wave u{width:5px;height:30px;border-radius:3px;background:#fff;transform:scaleY(.12);will-change:transform}
.talk-log{width:100%;height:7.4em;overflow:auto;display:grid;align-content:start;gap:6px;text-align:left;font-size:1rem;line-height:1.35;padding:8px;border-radius:16px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.talk-log:empty::before{content:"The conversation appears here.";font-size:.85rem;color:rgba(255,255,255,.7);padding:.3em .5em}
.talk-log p{padding:.45em .8em;border-radius:14px;background:rgba(255,255,255,.14);justify-self:start;max-width:92%}
.talk-log p.you{background:#fff;color:#0a0d1c;justify-self:end}
.talk-form{display:flex;gap:8px;width:100%}
.talk-form input{flex:1;min-width:0;min-height:48px;padding:0 18px;border-radius:99px;border:0;background:rgba(255,255,255,.95);color:#0a0d1c;font:inherit;font-size:1rem}
.talk-form button{min-height:48px;padding:0 20px;border:0;border-radius:99px;background:#fff;color:#0a0d1c;font:inherit;font-weight:700;cursor:pointer}
.talk-form button:disabled{opacity:.45;cursor:default}
.talk-note{font-size:.85rem;line-height:1.4;color:rgba(255,255,255,.78);max-width:36em}
.hero .talk{align-self:center}
/* inside the story's last scene the scene itself is the dark stage */
.story .talk{background:none;box-shadow:none;padding:0;overflow:visible;width:min(100%,560px)}
/* idle: the bar breathes until a conversation takes it over */
@keyframes talk-idle{0%,100%{transform:scaleY(.12)}50%{transform:scaleY(.42)}}
.talk-wave u{animation:talk-idle 2.2s ease-in-out infinite}
.talk-wave u:nth-child(3n){animation-delay:-.7s}.talk-wave u:nth-child(3n+1){animation-delay:-1.4s}.talk-wave u:nth-child(4n){animation-duration:2.9s}
.talk.is-on .talk-wave u{animation:none}
@media(prefers-reduced-motion:reduce){.talk-mic{transition:none}.talk-wave u{animation:none}}