/* ASK ZENA, VOICE INPUT (ask-voice.js). The composer's own states while it listens. Two inks (title on surface), nothing
   under 12px, and every movement is a scale: the level bars, the sending bar, the caption's arrival. Nothing fades.
   Listening and sending are drawn inside the composer's one row, so it never changes size or place. */
.zap .zap-form{position:relative}
.zap .zap-form[data-zav] textarea{display:none}
.zav-live{min-width:0;min-height:28px;max-height:148px;overflow:auto;padding:2px 0;font:400 16px/24px var(--sans);color:var(--z-title);white-space:pre-wrap;overflow-wrap:anywhere;cursor:text}
.zav-live[hidden]{display:none}
.zav-live[data-empty]::before{content:"Speak your question";content:"Speak your question"/""}
/* words still being heard are provisional: slanted over a dotted rule, in the same ink. Settled words stand plain. */
.zav-soft{font-style:italic;text-decoration:underline dotted;text-decoration-thickness:1px;text-underline-offset:4px}

/* a clear target: 40px beside a 40px Send, 36px on a phone (ask-page.css's own phone size) */
.zap .zap-mic,.zap .zap-send{width:40px;height:40px}
@media(max-width:600px){.zap .zap-mic,.zap .zap-send{width:36px;height:36px}}
/* the mic while it listens: a filled stop control. The fill arrives at once: the lift keeps its own clock, the colour does not cross-fade */
.zap .zap-form .zap-mic{transition:transform var(--zm-quick) var(--zm-enter),box-shadow var(--zm-quick) var(--zm-enter)}
.zap-mic .zav-stop{display:none;fill:currentColor;stroke:none}
/* while it listens the control stands still under the pointer and the focus: it is the one thing to press */
.zap .zap-form .zap-mic[aria-pressed=true]{background:var(--z-title);border-color:var(--z-title);color:var(--z-surface);transform:none;box-shadow:none}
.zap-mic[aria-pressed=true] svg:not(.zav-stop){display:none}
.zap-mic[aria-pressed=true] .zav-stop{display:block}

/* the caption, in the composer's own row beside the control: Listening with its level, Sending with its bar. The row
   gains a column for it and the box gives up that width, so the composer keeps its size and place. */
.zap .zap-form[data-zav]{grid-template-columns:minmax(0,1fr) auto auto auto}
.zav-status{display:flex;align-items:center;gap:8px;margin:0;font:600 13px/18px var(--sans);color:var(--z-title);white-space:nowrap;transform-origin:right center;animation:zav-in var(--zm-quick,150ms) var(--zm-enter,ease-out)}
.zav-status[hidden]{display:none}
/* what went wrong: one sentence on its own line inside the composer, under the box */
.zav-status[data-kind=error]{grid-column:1/-1;grid-row:2;padding:6px 0 4px;border-top:1px solid var(--z-title);font-weight:500;white-space:normal;transform-origin:left center}
.zav-hint{font-weight:400}
.zav-level{display:inline-flex;align-items:center;gap:3px;height:18px}
.zav-level i{display:block;width:3px;height:18px;border-radius:2px;background:var(--z-title);transform:scaleY(.3);animation:zav-pulse 720ms ease-in-out infinite alternate}
.zav-level i:nth-child(2){animation-delay:-240ms}
.zav-level i:nth-child(3){animation-delay:-480ms}
.zav-level i:nth-child(4){animation-delay:-120ms}
/* the microphone's own loudness, where it can be read: each bar takes a share of it */
.zap-form[data-zav-meter] .zav-level i{animation:none;transform:scaleY(calc(.22 + var(--zav-level,0)*.78))}
.zap-form[data-zav-meter] .zav-level i:nth-child(odd){transform:scaleY(calc(.22 + var(--zav-level,0)*.5))}
.zav-bar{display:block;width:56px;height:4px;border-radius:2px;box-shadow:inset 0 0 0 1px var(--z-title);overflow:hidden}
.zav-bar i{display:block;height:100%;background:var(--z-title);transform-origin:left center;animation:zav-send 900ms linear both}
@keyframes zav-in{from{transform:scale(.92)}to{transform:none}}
@keyframes zav-pulse{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
@keyframes zav-send{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* a phone has no width to spare beside the words: there the caption is a label set into the composer's top edge, the
   way a field's label sits in its outline, and the row keeps its three columns. Out of the flow, so nothing moves. */
@media(max-width:600px){
  .zap .zap-form[data-zav]{grid-template-columns:minmax(0,1fr) auto auto}
  .zav-status:not([data-kind=error]){position:absolute;left:10px;top:-11px;height:22px;padding:0 8px;background:var(--z-surface);transform-origin:left center}
  .zav-hint{display:none}
}
@media(prefers-reduced-motion:reduce){.zav-status,.zav-level i,.zav-bar i{animation:none}.zav-level i:nth-child(odd){transform:scaleY(.55)}.zav-level i:nth-child(even){transform:scaleY(.9)}}
:root[data-motion=off] :is(.zav-status,.zav-level i,.zav-bar i){animation:none}