/* Voice search sheet (markup in em-public/includes/header.php, script em-assets/js/layout/voice-search.js)
   A bottom sheet: slides up from the bottom edge, closes with a tap outside, a swipe down or Esc. No Stop button:
   the mic button in the middle means "done speaking". */
html.vs-open { overflow: hidden; }
.vs[hidden] { display: none; }
.vs { position: fixed; inset: 0; z-index: 100001; display: flex; align-items: flex-end; justify-content: center; }
.vs-backdrop { position: absolute; inset: 0; background: rgba(17, 24, 39, .5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: vsFade .25s ease both; }
.vs-sheet {
  position: relative; width: min(460px, 100%); padding: 8px 20px calc(20px + env(safe-area-inset-bottom)); text-align: center;
  border-radius: 28px 28px 0 0; background: #fff; box-shadow: 0 -18px 50px rgba(0, 0, 0, .22);
  animation: vsRise .38s cubic-bezier(.2, .9, .25, 1) both; transition: transform .22s ease; will-change: transform; touch-action: pan-x;
}
.vs.is-closing .vs-sheet { transform: translateY(105%) !important; animation: none; transition: transform .23s cubic-bezier(.4, 0, 1, 1); }
.vs.is-closing .vs-backdrop { opacity: 0; transition: opacity .23s; animation: none; }
.vs-grab { height: 22px; display: flex; align-items: center; justify-content: center; }
.vs-grab i { width: 42px; height: 5px; border-radius: 3px; background: #d8dbe0; }

/* the mic: glowing disc, rings breathe out while it listens */
.vs-orb { position: relative; width: 72px; height: 72px; margin: 4px auto 8px; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center; color: #fff; font-size: 26px;
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--primary, #E97C43) 70%, #fff) 0, var(--primary, #E97C43) 60%, var(--primary-dark, #C45A2A) 100%);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--primary, #E97C43) 45%, transparent); transition: transform .15s, background .3s; -webkit-tap-highlight-color: transparent; }
.vs-orb:active { transform: scale(.94); }
.vs-orb::before, .vs-orb::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--primary, #E97C43); opacity: 0; pointer-events: none; }
.vs-orb.is-live::before { animation: vsRing 1.9s ease-out infinite; }
.vs-orb.is-live::after { animation: vsRing 1.9s ease-out .95s infinite; }
.vs-orb.is-live { animation: vsBreath 2s ease-in-out infinite; }
.vs-orb.is-think { animation: vsThink 1.1s ease-in-out infinite; }
.vs-orb.is-error { background: #9ca3af; box-shadow: none; }

/* wave: 13 bars, tall in the middle, each on its own rhythm */
.vs-wave { display: flex; justify-content: center; align-items: center; gap: 5px; height: 0; margin: 0; overflow: hidden; opacity: 0; transition: opacity .25s, height .25s, margin .25s; }
.vs.is-listening .vs-wave { height: 32px; margin: 2px 0 8px; opacity: 1; }
.vs-wave i { width: 5px; height: 7px; border-radius: 3px; background: linear-gradient(var(--primary, #E97C43), color-mix(in srgb, var(--primary, #E97C43) 45%, #fff)); }
.vs.is-listening .vs-wave i { animation: vsBar 1.1s ease-in-out infinite; }
.vs-wave i:nth-child(1), .vs-wave i:nth-child(13) { --h: 12px; animation-delay: .05s !important; }
.vs-wave i:nth-child(2), .vs-wave i:nth-child(12) { --h: 20px; animation-delay: .18s !important; }
.vs-wave i:nth-child(3), .vs-wave i:nth-child(11) { --h: 28px; animation-delay: .1s !important; }
.vs-wave i:nth-child(4), .vs-wave i:nth-child(10) { --h: 22px; animation-delay: .3s !important; }
.vs-wave i:nth-child(5), .vs-wave i:nth-child(9) { --h: 34px; animation-delay: .22s !important; }
.vs-wave i:nth-child(6), .vs-wave i:nth-child(8) { --h: 26px; animation-delay: .4s !important; }
.vs-wave i:nth-child(7) { --h: 38px; animation-delay: .15s !important; }

.vs-title { margin: 0 0 3px; font-size: 1.05rem; font-weight: 800; color: #111827; }
.vs-hint { margin: 0 0 12px; color: #6b7280; font-size: .82rem; line-height: 1.5; }
.vs-said { min-height: 46px; padding: 11px 14px; border-radius: 14px; background: #f6f7f9; color: #111827; font-size: .95rem; font-weight: 600; line-height: 1.4; word-break: break-word; }
.vs-said:empty::before { content: "Your words appear here"; color: #9ca3af; font-weight: 400; }
.vs-again { margin-top: 12px; padding: 10px 20px; min-height: 44px; font-size: .88rem; border-radius: 12px; border: 0; background: var(--primary, #E97C43); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.vs-again[hidden] { display: none; }
.vs-tip { margin: 12px 0 0; font-size: .72rem; color: #9ca3af; }

@keyframes vsFade { from { opacity: 0; } }
@keyframes vsRise { from { transform: translateY(100%); } }
@keyframes vsRing { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(1.85); } }
@keyframes vsBreath { 50% { transform: scale(1.05); } }
@keyframes vsThink { 50% { transform: scale(.92); opacity: .75; } }
@keyframes vsBar { 0%, 100% { height: 7px; } 50% { height: var(--h, 24px); } }
@media (min-width: 768px) { .vs-sheet { margin-bottom: 28px; border-radius: 28px; } }
@media (prefers-reduced-motion: reduce) { .vs-sheet, .vs-backdrop, .vs-orb, .vs-orb::before, .vs-orb::after, .vs.is-listening .vs-wave i { animation: none !important; transition: none; } }