.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: var(--foreground); 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: var(--primary); background: color-mix(in oklch, var(--primary) 9%, var(--background)); box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 8%, transparent); transform: translateY(-50%) scale(1.05); } .console-v2 .v2-request-form .speech-dictation:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } .console-v2 .v2-request-form .speech-dictation:disabled { color: var(--muted-foreground); 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: var(--primary-foreground); background: var(--primary); box-shadow: 0 0 0 5px color-mix(in oklch, var(--primary) 9%, transparent), 0 7px 18px color-mix(in oklch, var(--primary) 20%, transparent); } .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: var(--primary); background: color-mix(in oklch, var(--primary) 10%, var(--background)); } .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: var(--muted-foreground); 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: color-mix(in oklch, var(--primary) 36%, transparent); box-shadow: 0 12px 35px color-mix(in oklch, var(--primary) 10%, transparent), inset 0 0 0 1px color-mix(in oklch, var(--primary) 8%, transparent); } .console-v2 .v2-request-form .command-composer[data-speech-state="listening"] .speech-status { color: var(--foreground); } .console-v2 .v2-request-form .command-composer[data-speech-state="processing"] .speech-status { color: color-mix(in oklch, var(--primary) 72%, var(--foreground)); } .console-v2 .v2-request-form .command-composer[data-speech-state="success"] .speech-status { color: var(--primary); } .console-v2 .v2-request-form #utterance[data-speech-uncertain="true"] { background: linear-gradient(90deg, color-mix(in oklch, var(--chart-1) 10%, transparent), transparent 42%); box-shadow: inset 3px 0 0 color-mix(in oklch, var(--chart-1) 58%, transparent); } .console-v2 .v2-request-form .command-composer[data-speech-state="error"] .speech-status { color: var(--destructive); } .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: var(--muted-foreground); border-radius: 50%; transform: translateY(-50%); } .console-v2 .v2-request-form .context-reset:hover, .console-v2 .v2-request-form .context-reset:focus-visible { color: var(--primary); background: color-mix(in oklch, var(--primary) 8%, var(--background)); } .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; } }