dictate.css

/* Voice dictation (dictate.ts): only the mic button and the text cursor change. The composer keeps its size and layout. */
:root{--rec:#dc2626;--recsoft:rgba(220,38,38,.16)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--rec:#ef4444;--recsoft:rgba(239,68,68,.22)}}
:root[data-theme=dark]{--rec:#ef4444;--recsoft:rgba(239,68,68,.22)}
/* The mic stays next to Send once there's text, so more can be added by voice. */
.composer.has .cbtn.dict{display:grid}
.cbtn.dict{position:relative;transition:box-shadow .12s}
.cbtn.dict.rec{background:var(--rec);color:#fff;box-shadow:0 0 0 calc(2px + var(--lvl,0) * 4px) var(--recsoft)}
.cbtn.dict.rec:hover{background:var(--rec);color:#fff;filter:brightness(1.06)}
.cbtn.dict.rec:focus-visible{outline:2px solid var(--rec);outline-offset:3px}
.cbtn.dict.busy{background:var(--abub);color:var(--ink2);cursor:default}
.cbtn.dict:disabled{opacity:1}
.dspin{width:16px;height:16px;border-radius:50%;border:2px solid var(--line2);border-top-color:var(--ink2);animation:dspin .8s linear infinite}
@keyframes dspin{to{transform:rotate(1turn)}}
form.dicting #go,form.dicting #ngo{opacity:.35;pointer-events:none}
/* While the microphone opens the button just looks pressed (no spinner, no text). */
.cbtn.dict.on.arm{background:var(--ink);color:var(--sheet);cursor:default}
.cbtn.dict.arm:hover{background:var(--ink);color:var(--sheet)}
/* An empty box shows only the pulsing cursor; the native caret is swapped for the bar while recording. */
textarea.dact::placeholder{color:transparent!important;opacity:0!important}
textarea.drec{caret-color:transparent!important}
form:has(>.dcue){position:relative}
.dcue{position:absolute;left:0;top:0;width:2px;border-radius:1px;background:var(--rec);pointer-events:none;z-index:3;visibility:hidden;box-shadow:0 0 calc(2px + var(--lvl,0) * 9px) calc(var(--lvl,0) * 2px) var(--rec);animation:dpulse 1.1s ease-in-out infinite}
@keyframes dpulse{50%{opacity:.55}}
.dmirror{position:absolute;top:-9999px;left:-9999px;visibility:hidden;pointer-events:none;white-space:pre-wrap;overflow-wrap:break-word;word-wrap:break-word;overflow:hidden;border:0;margin:0;height:auto}
.dsr{position:fixed;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.dspin{animation:none}.cbtn.dict{transition:none}.dcue{animation:none;box-shadow:0 0 3px var(--rec)}}