.voice-input-wrapper { position: relative; width: 100%; }
.voice-input-wrapper > .voice-enabled { width: 100%; padding-right: 2.9rem; }
.voice-input-button { position: absolute; z-index: 5; top: 50%; right: .45rem; display: inline-flex; align-items: center; justify-content: center; width: 2.15rem; height: 2.15rem; padding: 0; transform: translateY(-50%); border: 1px solid #d9d6ff; border-radius: 50%; background: #f0efff; color: #6254e7; cursor: pointer; line-height: 1; font-size: 1rem; font-weight: 700; box-shadow: 0 2px 6px rgba(98, 84, 231, .16); transition: transform .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease; }
.voice-input-button::after { position: absolute; right: 0; bottom: calc(100% + .45rem); padding: .3rem .5rem; border-radius: 4px; background: #312e62; color: #fff; content: attr(data-tooltip); font-size: .7rem; font-weight: 600; line-height: 1.2; white-space: nowrap; opacity: 0; pointer-events: none; transform: translateY(.2rem); transition: opacity .16s ease, transform .16s ease; }
.voice-input-button:hover::after, .voice-input-button:focus-visible::after { opacity: 1; transform: translateY(0); }
textarea.voice-enabled { padding-bottom: 2.65rem; }
textarea.voice-enabled + .voice-textarea-button { top: auto; right: .45rem; bottom: .45rem; width: auto; min-width: 5.1rem; height: 1.85rem; padding: 0 .42rem; gap: .24rem; transform: none; border: 0; border-radius: 999px; background: #6254e7; color: #fff; font-size: .69rem; font-weight: 700; box-shadow: 0 4px 9px rgba(98, 84, 231, .18); }
textarea.voice-enabled + .voice-textarea-button em { font-size: .9rem; }
textarea.voice-enabled + .voice-textarea-button:hover, textarea.voice-enabled + .voice-textarea-button:focus-visible { transform: scale(1.04); background: #5545df; color: #fff; box-shadow: 0 11px 22px rgba(98, 84, 231, .32); }
textarea.voice-enabled + .voice-textarea-button.listening { background: #e85347; }
.voice-input-button:hover, .voice-input-button:focus-visible { background: #e5e2ff; color: #5143d8; outline: 0; }
.voice-input-button:hover { transform: translateY(-50%) scale(1.1); box-shadow: 0 5px 12px rgba(98, 84, 231, .28); animation: voice-hover .75s ease-in-out infinite alternate; }
.voice-input-button.listening { background: #e85347; color: #fff; animation: voice-pulse 1.2s infinite; }
.voice-listening { border-color: #e85347 !important; }
.voice-tools-tray { position: fixed; z-index: 1030; right: max(.75rem, env(safe-area-inset-right)); bottom: 0; font-family: inherit; }
.voice-tools-toggle { display: flex; align-items: center; gap: .4rem; min-height: 28px; padding: .25rem .65rem calc(.25rem + env(safe-area-inset-bottom)); border: 1px solid #dce1e8; border-bottom: 0; border-radius: 7px 7px 0 0; background: #f5f7fa; color: #526174; font: inherit; font-size: .7rem; line-height: 1.4; cursor: pointer; }
.voice-tools-toggle:hover, .voice-tools-toggle[aria-expanded="true"] { background: #eaeef5; color: #35465b; }
.voice-tools-panel { position: absolute; right: 0; bottom: calc(100% + .45rem); width: 245px; max-width: calc(100vw - 1.5rem); padding: 1rem; border: 1px solid #dce1e8; border-radius: 10px; background: #fff; color: #36465b; box-shadow: 0 8px 25px rgba(32, 45, 65, .15); }
.voice-tools-panel[hidden] { display: none !important; }
.voice-tools-panel > strong { display: block; margin: 0 0 .4rem; font-size: .85rem; }
.voice-tools-panel > p { margin: 0 0 .8rem; font-size: .75rem; line-height: 1.5; color: #65758a; }
.voice-floating-button { display: flex; align-items: center; justify-content: center; gap: .45rem; width: 100%; min-height: 38px; padding: .5rem .75rem; border: 0; border-radius: 6px; background: #6254e7; color: #fff; cursor: pointer; font: inherit; font-size: .8rem; }
.voice-floating-button:hover { background: #5545df; }
.voice-floating-button.listening { background: #e85347; }
.voice-tools-tray button:focus-visible { outline: 3px solid #8f86e9; outline-offset: 3px; }
.voice-floating-hint { display: none; align-items: center; gap: .38rem; margin-top: .7rem; color: #526174; font-size: .75rem; line-height: 1.4; }
.voice-floating-hint.show { display: flex; }
.voice-floating-hint .icon { color: #6254e7; font-size: 1rem; }
@keyframes voice-pulse { 0% { box-shadow: 0 0 0 0 rgba(232, 83, 71, .45); } 70% { box-shadow: 0 0 0 .6rem rgba(232, 83, 71, 0); } 100% { box-shadow: 0 0 0 0 rgba(232, 83, 71, 0); } }
@keyframes voice-hover { from { filter: brightness(1); } to { filter: brightness(1.08); } }
@media print { .voice-input-button, .voice-tools-tray, .voice-floating-hint { display: none !important; } }
@media (max-width: 576px) { .voice-input-button { right: .35rem; width: 1.9rem; height: 1.9rem; } }