.voice-action{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);width:100%}.voice-btn{--btn-size: 144px;--btn-color: var(--accent);--btn-bg-inner: rgba(0, 229, 204, .1);--btn-bg-outer: rgba(0, 229, 204, .02);--voice-level: 0;position:relative;width:var(--btn-size);height:var(--btn-size);border-radius:50%;border:1.5px solid color-mix(in srgb,var(--btn-color) 65%,transparent);color:var(--btn-color);font-family:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;isolation:isolate;background:radial-gradient(circle at 50% 38%,var(--btn-bg-inner) 0%,var(--btn-bg-outer) 70%),color-mix(in srgb,var(--btn-color) 4%,var(--bg-secondary, #081420));box-shadow:inset 0 1px #ffffff0a,inset 0 -8px 18px #0000002e,0 1px 2px #0006,0 0 color-mix(in srgb,var(--btn-color) 18%,transparent);transition:transform .16s ease-out,box-shadow .22s ease-out,border-color .22s ease-out,background-color .22s ease-out;-webkit-tap-highlight-color:transparent;touch-action:manipulation;animation:voice-breathe 4s ease-in-out infinite}.voice-action.compact .voice-btn{--btn-size: 116px}.voice-btn:hover:not(:disabled){transform:scale(1.03);border-color:var(--btn-color);box-shadow:inset 0 1px #ffffff0f,inset 0 -8px 18px #0000002e,0 4px 12px #00000073,0 0 0 6px color-mix(in srgb,var(--btn-color) 12%,transparent)}.voice-btn:active:not(:disabled){transform:scale(.97);transition-duration:80ms}.voice-btn:focus-visible{outline:none;box-shadow:inset 0 1px #ffffff0f,0 0 0 3px var(--bg-primary, #02090f),0 0 0 5px var(--btn-color)}.voice-btn:disabled{opacity:.55;cursor:not-allowed;animation:none}.voice-btn-ring{position:absolute;inset:-10px;border-radius:50%;border:1px solid color-mix(in srgb,var(--btn-color) 45%,transparent);opacity:.35;pointer-events:none}.voice-btn-pulse{position:absolute;inset:-2px;border-radius:50%;pointer-events:none;z-index:-1;background:radial-gradient(circle,color-mix(in srgb,var(--btn-color) 28%,transparent) 0%,transparent 68%);opacity:0;transform:scale(1);transition:opacity .22s ease-out}.voice-btn.recording{--btn-color: #ff5b78;--btn-bg-inner: rgba(255, 91, 120, .16);--btn-bg-outer: rgba(255, 91, 120, .04);border-color:var(--btn-color);animation:voice-pulse-ring 1.5s ease-in-out infinite,voice-recording-tilt 5s ease-in-out infinite}.voice-btn.recording .voice-btn-pulse{opacity:1;transform:scale(calc(1 + var(--voice-level) * .55));transition:transform 70ms linear,opacity .22s ease-out;background:radial-gradient(circle,rgba(255,91,120,.45) 0%,rgba(255,91,120,.12) 45%,transparent 72%)}.voice-btn.recording .voice-btn-ring{animation:voice-ring-rotate 6s linear infinite;border-style:dashed;border-color:color-mix(in srgb,var(--btn-color) 70%,transparent);opacity:.55}.voice-btn.busy{--btn-color: #ffd54f;--btn-bg-inner: rgba(255, 213, 79, .14);--btn-bg-outer: rgba(255, 213, 79, .03);animation:voice-busy-spin 1.6s linear infinite}.voice-btn.done{--btn-color: #6bdc8a;--btn-bg-inner: rgba(107, 220, 138, .16);--btn-bg-outer: rgba(107, 220, 138, .03);animation:none}.voice-btn-core{display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 0 14px color-mix(in srgb,var(--btn-color) 40%,transparent))}.voice-btn-core svg{width:44px;height:44px;color:var(--btn-color);transition:transform .16s ease-out}.voice-action.compact .voice-btn-core svg{width:32px;height:32px}.voice-btn.recording .voice-btn-core svg{transform:scale(calc(1 + var(--voice-level) * .18))}.voice-btn-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--btn-color);margin-top:2px;text-shadow:0 1px 2px rgba(0,0,0,.5)}.voice-action.compact .voice-btn-label{font-size:10px;letter-spacing:.18em}.voice-btn-elapsed{position:absolute;bottom:-30px;font-family:var(--font-mono);font-size:13px;font-variant-numeric:tabular-nums;color:var(--btn-color);letter-spacing:.06em;text-shadow:0 0 12px color-mix(in srgb,var(--btn-color) 40%,transparent)}.voice-meter{display:flex;align-items:flex-end;justify-content:center;gap:4px;height:22px;margin-top:var(--space-3);opacity:0;transition:opacity .18s ease-out}.voice-meter.is-active{opacity:1}.voice-meter-bar{width:4px;height:4px;border-radius:2px;background:linear-gradient(180deg,#ff5b78,#ff8aa1);transform-origin:bottom center;transform:scaleY(var(--bar-scale, .2));transition:transform 80ms ease-out;box-shadow:0 0 8px #ff5b7866}.voice-hint{margin:0;font-size:var(--font-size-sm);color:var(--text-muted);text-align:center;max-width:48ch;line-height:1.5;text-wrap:pretty}.voice-transcript{max-width:56ch;font-size:var(--font-size-base);line-height:1.55;color:var(--text-primary);text-align:left;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 4%,var(--bg-secondary)) 0%,var(--bg-secondary) 100%);border:1px solid color-mix(in srgb,var(--accent) 25%,var(--border));border-radius:var(--radius-md);padding:var(--space-4);margin-top:var(--space-3);text-wrap:pretty;box-shadow:0 4px 14px #00000040}.voice-transcript-final{color:var(--text-primary)}.voice-transcript-interim{color:var(--text-muted);font-style:italic}.voice-error{color:#ff7d8a;font-size:var(--font-size-sm);font-family:var(--font-mono);text-align:center;max-width:48ch;padding:var(--space-3);border:1px solid rgba(255,125,138,.3);border-radius:var(--radius-sm);background:#ff7d8a0f}.voice-action-unsupported{padding:var(--space-3) var(--space-4);border:1px dashed var(--border);border-radius:var(--radius-md);background:#ffd54f0f}.voice-unsupported-note{margin:0;font-size:var(--font-size-sm);color:var(--text-secondary);line-height:1.5;text-align:center}.voice-transcript-float{position:fixed;right:var(--space-4);bottom:var(--space-4);width:min(360px,calc(100vw - 2 * var(--space-4)));max-height:40vh;display:flex;flex-direction:column;background:var(--bg-secondary);border:1px solid var(--accent);border-radius:var(--radius-md);box-shadow:0 12px 32px #00000059,0 0 0 1px #00e5cc26;z-index:50;overflow:hidden;animation:voice-transcript-float-in .2s ease-out}@keyframes voice-transcript-float-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.voice-transcript-float-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-2) var(--space-3);background:linear-gradient(180deg,rgba(0,229,204,.1) 0%,transparent 100%);border-bottom:1px solid var(--border)}.voice-transcript-float-title{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}.voice-transcript-float-close{background:transparent;border:none;color:var(--text-muted);font-size:20px;line-height:1;cursor:pointer;padding:0 6px;border-radius:var(--radius-sm);transition:color .12s ease,background .12s ease}.voice-transcript-float-close:hover{color:var(--text-primary);background:#ffffff0a}.voice-transcript-float-body{padding:var(--space-3);font-size:var(--font-size-sm);line-height:1.55;color:var(--text-primary);overflow-y:auto;flex:1;text-wrap:pretty}@media(max-width:480px){.voice-transcript-float{right:var(--space-2);bottom:var(--space-2);width:calc(100vw - 2 * var(--space-2));max-height:35vh}}@keyframes voice-breathe{0%,to{box-shadow:inset 0 1px #ffffff0a,inset 0 -8px 18px #0000002e,0 1px 2px #0006,0 0 color-mix(in srgb,var(--btn-color) 18%,transparent)}50%{box-shadow:inset 0 1px #ffffff0a,inset 0 -8px 18px #0000002e,0 1px 2px #0006,0 0 0 8px color-mix(in srgb,var(--btn-color) 8%,transparent)}}@keyframes voice-pulse-ring{0%,to{box-shadow:inset 0 1px #ffffff0f,inset 0 -10px 22px #00000038,0 0 #ff5b788c}60%{box-shadow:inset 0 1px #ffffff0f,inset 0 -10px 22px #00000038,0 0 0 22px #ff5b7800}}@keyframes voice-recording-tilt{0%,to{transform:scale(1) rotate(0)}25%{transform:scale(1.005) rotate(.4deg)}75%{transform:scale(1.005) rotate(-.4deg)}}@keyframes voice-ring-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes voice-busy-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(max-width:640px){.voice-btn{--btn-size: 124px}.voice-action.compact .voice-btn{--btn-size: 104px}.voice-btn-core svg{width:38px;height:38px}.voice-action.compact .voice-btn-core svg{width:28px;height:28px}}@media(prefers-reduced-motion:reduce){.voice-btn,.voice-btn.recording,.voice-btn.busy,.voice-btn.recording .voice-btn-ring,.voice-btn.recording .voice-btn-pulse{animation:none!important}.voice-btn.recording .voice-btn-pulse{transform:none}.voice-meter-bar{transition:none}}
