.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-floating-button { position: fixed; z-index: 1060; right: 1.15rem; bottom: 1.15rem; display: inline-flex; align-items: center; justify-content: center; width: 2.8rem; height: 2.8rem; padding: 0; border: 0; border-radius: 50%; background: #6254e7; color: #fff; cursor: pointer; font-size: 1.25rem; box-shadow: 0 8px 20px rgba(98, 84, 231, .3); transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease; }
.voice-floating-button::after { position: absolute; right: 0; bottom: calc(100% + .55rem); padding: .32rem .52rem; 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-floating-button:hover, .voice-floating-button:focus-visible { transform: scale(1.08); background: #5545df; color: #fff; box-shadow: 0 12px 24px rgba(98, 84, 231, .36); outline: 0; }
.voice-floating-button:hover::after, .voice-floating-button:focus-visible::after { opacity: 1; transform: translateY(0); }
.voice-floating-button.listening { background: #e85347; animation: voice-pulse 1.2s infinite; }
.voice-floating-hint { position: fixed; z-index: 1061; right: 1.15rem; bottom: 4.2rem; display: flex; align-items: center; gap: .38rem; max-width: 13rem; padding: .52rem .66rem; border: 1px solid #ddd9ff; border-radius: 6px; background: #fff; color: #393975; box-shadow: 0 8px 18px rgba(42, 40, 90, .16); font-size: .73rem; font-weight: 700; line-height: 1.25; opacity: 0; pointer-events: none; transform: translateY(.35rem); transition: opacity .16s ease, transform .16s ease; }
.voice-floating-hint::after { position: absolute; right: 1.08rem; bottom: -.46rem; width: 0; height: 0; border-top: .48rem solid #fff; border-right: .42rem solid transparent; border-left: .42rem solid transparent; content: ''; filter: drop-shadow(0 1px 0 #ddd9ff); }
.voice-floating-hint.show { opacity: 1; transform: translateY(0); }
.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 (max-width: 576px) { .voice-input-button { right: .35rem; width: 1.9rem; height: 1.9rem; } .voice-floating-button { right: .8rem; bottom: .8rem; width: 2.55rem; height: 2.55rem; } .voice-floating-hint { right: .8rem; bottom: 3.7rem; } }