.header-voice[hidden], .header-voice [hidden], .voice-screen-edge[hidden] { display: none !important; }
.header-voice { margin-left: auto; display: flex; position: relative; align-items: center; justify-content: flex-end; min-width: 0; gap: 10px; color: var(--ink); }
.header-voice__trigger { display: flex; align-items: center; gap: 18px; min-height: 48px; padding: 4px; border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; }
.header-voice__caption { display: block; max-width: 245px; padding-right: 18px; border-right: 1px solid #a58a64; font-size: 16px; line-height: 1.35; text-align: right; white-space: nowrap; }
/* The scope is read, not shown (owner decision 2026-09-23): the trigger's accessible name and this
   line still name the office, so nothing is lost for a screen reader. */
.header-voice__scope { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.header-voice__signal { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(125deg, #ffcc7e, #ffad43, #f3dfb2); color: #282319; box-shadow: 0 0 0 4px rgb(255 173 67 / 15%); }
.header-voice__wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 27px; width: 27px; }
.header-voice__wave i { display: block; width: 3px; height: 10px; border-radius: 3px; background: currentColor; }
.header-voice__wave i:nth-child(2), .header-voice__wave i:nth-child(4) { height: 17px; }
.header-voice__wave i:nth-child(3) { height: 25px; }
.header-voice[data-voice-state="live"] .header-voice__signal { background: #bce4c8; color: #173e29; box-shadow: 0 0 0 calc(4px + var(--voice-level, 0) * 5px) rgb(46 123 69 / 18%); }
.header-voice[data-voice-state="live"] .header-voice__wave i { height: calc(5px + var(--voice-level, 0) * 13px); }
.header-voice[data-voice-state="live"] .header-voice__wave i:nth-child(2), .header-voice[data-voice-state="live"] .header-voice__wave i:nth-child(4) { height: calc(8px + var(--voice-level, 0) * 16px); }
.header-voice[data-voice-state="live"] .header-voice__wave i:nth-child(3) { height: calc(11px + var(--voice-level, 0) * 16px); }
.header-voice[data-voice-state="connecting"] .header-voice__signal { outline: 2px dashed #795519; outline-offset: 3px; }
.header-voice__controls { display: flex; gap: 6px; }
.header-voice__controls button, .header-voice__fallback { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 8px 12px; border: 1px solid #9d8463; border-radius: 12px; color: var(--ink); background: #fbf9f3; font: inherit; font-size: 16px; cursor: pointer; }
.header-voice__trigger:focus-visible, .header-voice__controls button:focus-visible, .header-voice__fallback:focus-visible { outline: 3px solid #815011; outline-offset: 4px; }
.header-voice__status { position: absolute; right: 0; top: calc(100% + 22px); width: min(340px, calc(100vw - 48px)); margin: 0; padding: 12px 16px; border: 1px solid #c4b79e; border-radius: 14px; background: #fbf9f3; color: #393124; box-shadow: 0 6px 24px rgb(0 0 0 / 8%); font-size: 16px; line-height: 1.4; pointer-events: none; }
.header-voice__status:empty { display: none; }
.voice-screen-edge { position: fixed; inset: 0; z-index: 90; border: 3px solid #43865a; border-radius: 10px; box-shadow: inset 0 0 12px rgb(67 134 90 / 18%); pointer-events: none; }
@media (max-width: 700px) {
  .header-voice { gap: 5px; }
  .header-voice__trigger { gap: 10px; }
  .header-voice__caption { max-width: 170px; padding-right: 10px; }
  .header-voice__signal { width: 44px; height: 44px; }
  .header-voice__controls { position: absolute; right: 0; top: calc(100% + 8px); padding: 4px; border-radius: 14px; background: #fbf9f3; border: 1px solid #c4b79e; }
  .header-voice:has(.header-voice__controls:not([hidden])) .header-voice__status { top: calc(100% + 65px); }
}
@media (max-width: 390px) {
  .header-voice__caption { max-width: 140px; }
  .header-voice__scope { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .header-voice__signal { transition: none; }
  .header-voice[data-voice-state="live"] .header-voice__wave i { height: 10px; }
  .header-voice[data-voice-state="live"] .header-voice__wave i:nth-child(2), .header-voice[data-voice-state="live"] .header-voice__wave i:nth-child(4) { height: 17px; }
  .header-voice[data-voice-state="live"] .header-voice__wave i:nth-child(3) { height: 25px; }
}