.speech-visually-hidden { width: 1px; height: 1px; position: absolute; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* Keep all composer actions on one calm, optically aligned rail. */ .console-v2 .v2-request-form .speech-dictation { width: 36px; height: 36px; min-height: 36px; position: absolute; top: 50%; right: 56px; bottom: auto; z-index: 13; display: grid; place-items: center; margin: 0; padding: 0; color: #284647; background: transparent; border: 0; border-radius: 50%; box-shadow: none; cursor: pointer; transform: translateY(-50%); transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease; } .console-v2 .v2-request-form .speech-dictation:hover:not(:disabled), .console-v2 .v2-request-form .speech-dictation:focus-visible { color: #08766e; background: #eaf5f3; box-shadow: 0 0 0 3px rgba(8, 118, 110, 0.08); transform: translateY(-50%) scale(1.05); } .console-v2 .v2-request-form .speech-dictation:focus-visible { outline: 2px solid rgba(8, 118, 110, 0.48); outline-offset: 2px; } .console-v2 .v2-request-form .speech-dictation:disabled { color: #9aacaa; cursor: not-allowed; opacity: 0.56; } .console-v2 .v2-request-form .speech-dictation .speech-mic-icon { width: 18px; height: 18px; stroke-width: 2; } .console-v2 .v2-request-form .speech-waveform { height: 16px; display: none; align-items: center; justify-content: center; gap: 2px; } .console-v2 .v2-request-form .speech-waveform i { width: 2px; height: 5px; display: block; background: currentColor; border-radius: 999px; } .console-v2 .v2-request-form .speech-waveform i:nth-child(2), .console-v2 .v2-request-form .speech-waveform i:nth-child(4) { height: 10px; } .console-v2 .v2-request-form .speech-waveform i:nth-child(3) { height: 15px; } .console-v2 .v2-request-form .speech-dictation.is-listening, .console-v2 .v2-request-form .speech-dictation.is-listening:hover:not(:disabled), .console-v2 .v2-request-form .speech-dictation.is-listening:focus-visible { color: #fff; background: #132c2c; box-shadow: 0 0 0 5px rgba(19, 44, 44, 0.09), 0 7px 18px rgba(17, 47, 46, 0.2); } .console-v2 .v2-request-form .speech-dictation.is-listening .speech-mic-icon, .console-v2 .v2-request-form .speech-dictation.is-processing .speech-mic-icon { display: none; } .console-v2 .v2-request-form .speech-dictation.is-listening .speech-waveform, .console-v2 .v2-request-form .speech-dictation.is-processing .speech-waveform { display: flex; } .console-v2 .v2-request-form .speech-dictation.is-listening .speech-waveform i { animation: speech-wave 760ms ease-in-out infinite alternate; } .console-v2 .v2-request-form .speech-dictation.is-listening .speech-waveform i:nth-child(2) { animation-delay: -420ms; } .console-v2 .v2-request-form .speech-dictation.is-listening .speech-waveform i:nth-child(3) { animation-delay: -180ms; } .console-v2 .v2-request-form .speech-dictation.is-listening .speech-waveform i:nth-child(4) { animation-delay: -560ms; } .console-v2 .v2-request-form .speech-dictation.is-processing { color: #08766e; background: #e5f3f1; } .console-v2 .v2-request-form .speech-dictation.is-processing .speech-waveform { animation: speech-processing-breathe 900ms ease-in-out infinite alternate; } .console-v2 .v2-request-form .speech-status { min-height: 16px; position: absolute; right: 140px; bottom: 10px; left: 194px; z-index: 12; overflow: hidden; color: #5f7474; font-size: 10px; font-weight: 650; line-height: 16px; letter-spacing: 0.01em; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; } .console-v2 .v2-request-form .command-composer[data-speech-state="listening"] { border-color: rgba(19, 76, 73, 0.36); box-shadow: 0 12px 35px rgba(25, 72, 70, 0.1), inset 0 0 0 1px rgba(19, 76, 73, 0.08); } .console-v2 .v2-request-form .command-composer[data-speech-state="listening"] .speech-status { color: #183e3d; } .console-v2 .v2-request-form .command-composer[data-speech-state="processing"] .speech-status { color: #39706d; } .console-v2 .v2-request-form .command-composer[data-speech-state="success"] .speech-status { color: #08766e; } .console-v2 .v2-request-form #utterance[data-speech-uncertain="true"] { background: linear-gradient(90deg, rgba(201, 132, 31, 0.055), transparent 42%); box-shadow: inset 3px 0 0 rgba(201, 132, 31, 0.58); } .console-v2 .v2-request-form .command-composer[data-speech-state="error"] .speech-status { color: #b54b42; } .console-v2 .v2-request-form .command-composer:not([data-speech-state="idle"]) .composer-hint { opacity: 0; } .console-v2 .v2-request-form #utterance, .console-v2.v2-interactive-sync .v2-request-form #utterance, .console-v2.v2-passive-display.v2-interactive-sync .v2-request-form #utterance { padding-right: 142px; } .console-v2 .v2-request-form .context-reset, .console-v2.v2-interactive-sync .v2-request-form .context-reset, .console-v2.v2-passive-display.v2-interactive-sync .v2-request-form .context-reset { width: 30px; height: 30px; top: 50%; right: 98px; bottom: auto; color: #75908e; border-radius: 50%; transform: translateY(-50%); } .console-v2 .v2-request-form .context-reset:hover, .console-v2 .v2-request-form .context-reset:focus-visible { color: #08766e; background: #edf6f4; } .console-v2 .v2-request-form .composer-hint, .console-v2.v2-interactive-sync .v2-request-form .composer-hint, .console-v2.v2-passive-display.v2-interactive-sync .v2-request-form .composer-hint { right: 140px; } @keyframes speech-wave { from { transform: scaleY(0.42); } to { transform: scaleY(1); } } @keyframes speech-processing-breathe { from { opacity: 0.42; transform: scaleX(0.78); } to { opacity: 1; transform: scaleX(1); } } @media (max-width: 720px) { .console-v2 .v2-request-form .speech-status { top: 8px; right: 140px; bottom: auto; left: 14px; font-size: 9px; } .console-v2 .v2-request-form .command-composer:not([data-speech-state="idle"]) #utterance { padding-top: 28px; } } @media (max-width: 460px) { .console-v2 .v2-request-form #utterance, .console-v2.v2-interactive-sync .v2-request-form #utterance, .console-v2.v2-passive-display.v2-interactive-sync .v2-request-form #utterance { padding-right: 132px; } .console-v2 .v2-request-form .speech-dictation { right: 52px; } .console-v2 .v2-request-form .context-reset, .console-v2.v2-interactive-sync .v2-request-form .context-reset, .console-v2.v2-passive-display.v2-interactive-sync .v2-request-form .context-reset { right: 92px; } } @media (prefers-reduced-motion: reduce) { .console-v2 .v2-request-form .speech-dictation, .console-v2 .v2-request-form .speech-waveform, .console-v2 .v2-request-form .speech-waveform i { animation: none !important; transition: none; } }