.voice-note-dialog { width:calc(100% - 32px); max-width:440px; max-height:calc(100dvh - 32px); margin:auto; padding:0; border:1px solid #d8e4e3; border-radius:8px; background:#fff; color:#183337; box-shadow:0 24px 80px #052e3433; font:inherit; overflow:auto; }
.voice-note-dialog::backdrop { background:#102e365c; backdrop-filter:blur(4px); }
.voice-note-dialog [hidden] { display:none !important; }
.voice-note-content { padding:24px 28px 18px; }
.voice-note-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.voice-note-header img { object-fit:contain; }
.voice-note-header .icon-button { border:0; background:transparent; color:#55716f; width:40px; height:40px; }
.voice-note-content h2 { margin:0; font-size:28px; line-height:1.3; font-weight:700; }
.voice-note-content > p { margin:7px 0 0; font-size:15px; color:#5a6f70; line-height:1.5; }
.voice-recorder { display:flex; flex-direction:column; align-items:center; padding:28px 0 20px; }
.voice-note-mic { display:grid; place-items:center; width:64px; height:64px; border-radius:50%; color:#007f85; background:#e9f7f5; margin:0 auto 14px; }
.voice-note-mic svg { width:28px; height:28px; }
.voice-note-state { font-size:13px; color:#57716f; }
.voice-note-time { margin:8px 0 22px; font-variant-numeric:tabular-nums; font-size:36px; font-weight:600; line-height:1.25; }
.voice-note-primary { display:flex; align-items:center; justify-content:center; gap:10px; min-height:48px; width:100%; padding:12px 16px; background:#007e85; border:1px solid #007e85; border-radius:6px; color:#fff; font:inherit; font-size:15px; font-weight:600; text-decoration:none; cursor:pointer; }
.voice-note-primary svg { width:20px; height:20px; flex-shrink:0; }
.voice-note-primary:hover { background:#006b71; }
.voice-note-primary:disabled { opacity:.6; cursor:wait; }
.voice-note-dialog[data-state="recording"] .voice-note-mic { background:#fff0ee; color:#b24338; }
.voice-note-dialog[data-state="recording"] [data-voice-record] { background:#fff; border-color:#bd483b; color:#a33228; }
.voice-note-dialog[data-state="recording"] [data-voice-record] svg { display:none; }
.voice-note-dialog[data-state="recording"] [data-voice-record]::before { content:''; width:12px; height:12px; border-radius:2px; background:currentColor; }
.voice-note-share { background:#087b59; border-color:#087b59; }
.voice-note-share:hover { background:#056244; }
.voice-note-fallback { display:grid; width:100%; gap:10px; }
.voice-note-secondary { display:flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:12px 16px; border:1px solid #b9d3cf; border-radius:6px; color:#17645e; background:#fff; font:inherit; font-size:15px; font-weight:600; text-decoration:none; }
.voice-note-secondary:hover { background:#edf7f5; }
.voice-note-secondary svg { width:20px; height:20px; }
.voice-note-again { margin-top:8px; min-height:40px; border:0; background:transparent; padding:8px; font:inherit; font-size:13px; color:#3e6564; cursor:pointer; }
.voice-note-player { width:100%; margin:0 0 18px; height:44px; }
.voice-note-dialog:is([data-state="ready"],[data-state="sharing"]) .voice-note-mic, .voice-note-dialog:is([data-state="ready"],[data-state="sharing"]) .voice-note-time { display:none; }
.voice-note-dialog:is([data-state="ready"],[data-state="sharing"]) .voice-note-state { margin-bottom:16px; }
.voice-note-hint { margin:14px 0 0; text-align:center; color:#637674; font-size:12px; line-height:1.6; max-width:290px; }
.voice-note-direct { padding:28px 0 22px; text-align:center; }
.voice-note-direct h3 { margin:0 0 8px; font-size:18px; }
.voice-note-direct p { margin:0 0 20px; font-size:14px; color:#5a6f70; line-height:1.6; }
.voice-note-content .voice-note-feedback { margin:0 0 18px; padding:12px 0; color:#6c4f26; font-size:13px; line-height:1.5; border-top:1px solid #e5ecea; }
.voice-note-footer { padding-top:16px; border-top:1px solid #e5ecea; }
.voice-note-footer a { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:#17645e; text-decoration:none; min-height:32px; }
.voice-note-footer a span { margin-left:auto; font-weight:500; font-variant-numeric:tabular-nums; }
.voice-note-footer svg { width:16px; height:16px; }
.voice-note-footer p { margin:12px 0 0; font-size:11px; color:#718480; text-align:center; }
.voice-note-dialog :focus-visible { outline:2px solid #007e85; outline-offset:3px; }
@media(max-width:380px) { .voice-note-content { padding:18px 20px 16px; } .voice-note-content h2 { font-size:25px; } .voice-recorder { padding-top:20px; } }
@media(max-height:680px) { .voice-recorder { padding-top:18px; } .voice-note-mic { width:48px; height:48px; margin-bottom:10px; } .voice-note-header { margin-bottom:12px; } .voice-note-time { margin-bottom:16px; } }