/* One composer only: keep the reference capsule silhouette in every state.
   Shared by keyboard and hold-to-talk; no alternate theme shape or press transform. */
.composer-wrap { position:relative; flex:none; z-index:4; padding:8px 24px calc(16px + var(--safe-bottom)); }
.composer { box-sizing:border-box; display:flex; align-items:center; margin:0 auto; width:100%; max-width:740px; height:60px; min-height:60px; max-height:60px; padding:7px; gap:4px; border:1px solid color-mix(in srgb,var(--line-2) 80%,transparent); border-radius:999px; background:var(--workbench-surface); box-shadow:0 4px 24px #16203912,inset 0 1px 0 #ffffff4d; transition:border-color .15s,background-color .15s; transform:none; }
html[data-panel][data-style] .composer { background:var(--workbench-surface); backdrop-filter:none; -webkit-backdrop-filter:none; }
.composer:is(:active,:focus-within,.recording,.cancel-recording) { transform:none; border-radius:999px; }
.composer:focus-within { border-color:var(--accent-text); }
.composer [hidden] { display:none!important; }
.composer .add-file,.composer .input-mode,.composer .send { box-sizing:border-box; flex:0 0 44px; width:44px; min-width:44px; height:44px; min-height:44px; padding:0; margin:0; display:grid; place-items:center; border:0; border-radius:50%; color:var(--text-2); background:transparent; transform:none; }
.composer .add-file { order:0; }
.composer .input-mode { order:2; }
.composer .send { order:3; background:var(--text); color:var(--surface); }
.composer .send:disabled { opacity:.35; cursor:default; }
.composer textarea { order:1; box-sizing:border-box; flex:1 1 0; width:0; min-width:0; height:44px; min-height:44px; max-height:44px; padding:10px 4px; border:0; border-radius:0; outline:none; resize:none; overflow-y:auto; background:transparent; color:var(--text); font:16px/24px var(--font); }
.composer textarea::placeholder { color:var(--sub); }
.mode-keyboard { display:none; }
.composer[data-input-mode="voice"] .mode-mic,.composer[data-input-mode="voice"] .send { display:none; }
.composer[data-input-mode="voice"] .mode-keyboard { display:block; }
.voice-hold { order:1; box-sizing:border-box; flex:1 1 0; min-width:0; height:44px; min-height:44px; max-height:44px; display:flex; gap:10px; align-items:center; justify-content:center; border:0; border-radius:999px; background:color-mix(in srgb,var(--surface-2) calc(var(--panel-alpha) * 100%),transparent); color:var(--text); font:500 16px/24px var(--font); padding:8px 12px; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; touch-action:none; transform:none; transition:background-color .15s,color .15s; }
.voice-hold:is(:active,:focus,.recording) { transform:none; border-radius:999px; }
.recording .voice-wave i { animation:cat-voice-wave .7s ease-in-out infinite alternate; }
.recording .voice-wave i:nth-child(2n) { animation-delay:-.3s; }
.cancel-recording .voice-hold { color:var(--bad); background:var(--bad-soft); }
.mic-hint { position:absolute; left:50%; bottom:calc(100% + 4px); transform:translateX(-50%); width:max-content; max-width:calc(100% - 32px); display:flex; align-items:center; gap:8px; padding:12px 16px; border-radius:18px; background:var(--surface); color:var(--text); border:1px solid var(--line); box-shadow:var(--shadow); font:14px/1.5 var(--font); pointer-events:none; z-index:6; }
.mic-hint.hidden { display:none; }
.mic-dot { flex:none; width:8px; height:8px; border-radius:50%; background:var(--bad); }
html:has(.composer.recording) .toast { bottom:calc(160px + var(--safe-bottom)); }
@media(max-width:860px) {
 .composer-wrap { padding:8px 12px calc(12px + var(--safe-bottom)); }
 .composer { height:58px; min-height:58px; max-height:58px; padding:6px; gap:2px; }
 .voice-hold { padding:8px; }
 .keyboard-open .composer-wrap { padding-bottom:8px; }
}
@media(max-width:360px) { .voice-hold { gap:6px; font-size:15px; } }
@media(prefers-reduced-motion:reduce) { .composer,.voice-hold { transition:none; } .recording .voice-wave i { animation:none; } }
/* Sent recordings stay a single compact row; secondary actions never stretch the bubble. */
.msg.user .bubble:has(.voice-message) { padding:0; border-radius:999px; width:fit-content; max-width:100%; white-space:normal; }
.voice-message { display:flex; align-items:center; height:48px; min-width:188px; max-width:100%; padding:0 4px; }
.voice-play { display:flex; align-items:center; justify-content:center; gap:12px; height:48px; min-height:44px; min-width:140px; flex:1; padding:0 12px; border:0; border-radius:999px; background:transparent; color:var(--text); font:600 16px/24px var(--font); cursor:pointer; }
.voice-play-symbol { display:grid; place-items:center; width:18px; font-size:14px; }
.voice-duration { font-variant-numeric:tabular-nums; white-space:nowrap; }
.voice-more { flex:0 0 44px; display:grid; place-items:center; height:44px; width:44px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--sub); cursor:pointer; }
.voice-message.playing .voice-wave i { animation:cat-voice-wave .7s ease-in-out infinite alternate; }
.voice-actions { box-sizing:border-box; width:min(400px,calc(100vw - 32px)); max-height:calc(var(--app-height,100dvh) - 48px); overflow-y:auto; padding:16px; border:1px solid var(--line-2); border-radius:20px; color:var(--text); background:var(--reading-surface); font:16px/1.5 var(--font); }
.voice-actions::backdrop { background:transparent; backdrop-filter:none; }
.voice-actions [hidden] { display:none!important; }
.voice-actions-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }
#voiceTranscriptText { white-space:pre-wrap; overflow-wrap:anywhere; max-height:45dvh; overflow-y:auto; margin:12px 0 16px; }
.voice-secondary { display:flex; gap:8px; margin-top:12px; }
html:has(#voiceActions[open]) .main,html:has(#voiceActions[open]) #sidebar,html:has(#voiceActions[open]) #panel,html:has(#voiceActions[open]) #modal { visibility:hidden!important; pointer-events:none!important; }
@media(prefers-reduced-motion:reduce) { .voice-message.playing .voice-wave i { animation:none; } }