/* In-chat voice messages: composer recorder UI + message-bubble player. */

/* --- Composer: Telegram-style plain icon buttons (attach / emoji / mic / send) --------------
   `html body` + !important is needed here, not for specificity games of my own making, but
   because several older "skin" stylesheets (composer-polish.css, telegram-shell.css,
   whatsapp-ux.css, rasan-theme.css — each a leftover from an earlier redesign pass) still carry
   their own !important rules for .attach/.send from before this look existed. This block is now
   the single authoritative definition of the composer's icon buttons and the input pill. */
html body .attach,html body .mic,html body .send{
  width:44px;height:44px;flex:none;border:0;border-radius:50%;
  background:transparent!important;box-shadow:none!important;
  color:#6d7c82!important;display:grid!important;place-items:center;
  transition:color .15s ease,background-color .15s ease;
}
html body .attach:hover,html body .mic:hover:not(:disabled),html body .send:hover:not(:disabled){background:#0000000c!important}
html body .attach svg,html body .mic svg,html body .send svg{width:23px;height:23px}
html body .mic:disabled,html body .send:disabled{color:#b7c1bd!important;background:transparent!important}
html body .mic.armed{color:#d8394a!important}
/* The mic ↔ send swap itself: an #composer.has-content ID-scoped rule always outranks the
   plain-class rule above regardless of load order, so this reliably wins. */
#composer.has-content .mic{display:none!important}
#composer:not(.has-content) .send{display:none!important}
html body #composer.has-content .send{color:var(--brand)!important}

html body .input-wrap{background:#fff!important;border:0!important;box-shadow:inset 0 0 0 1px #e6ece9!important}
html body .input-wrap .emoji-trigger,html body .input-wrap>button{width:36px!important;height:36px!important;color:#8b9a95!important;background:transparent!important}
html body .input-wrap .emoji-trigger svg{width:22px;height:22px}

/* --- Composer: recording bar ------------------------------------------------------------------ */
.voice-record{display:flex;align-items:center;gap:8px}.voice-record[hidden]{display:none}
.voice-cancel{width:44px;height:44px;border-radius:50%;background:transparent;color:#b23b3b;flex:none;display:grid;place-items:center}
.voice-cancel:hover{background:#fbeaea}
.voice-record-body{position:relative;flex:1;min-width:0;min-height:44px;display:flex;align-items:center;gap:9px;padding:2px 15px;border-radius:23px;background:#fff;border:1px solid #dde6e3;overflow:hidden}
.voice-dot{width:10px;height:10px;border-radius:50%;background:#d8394a;flex:none;animation:voice-pulse 1.1s ease-in-out infinite}
@keyframes voice-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
.voice-timer{flex:none;font-variant-numeric:tabular-nums;font-size:13px;color:#3a4d49;min-width:34px}
.voice-live-wave{flex:1;height:26px;min-width:0}
.voice-cancel-hint{flex:none;font-size:12px;color:#8b9b96;white-space:nowrap;transition:opacity .15s ease}
.voice-lock-hint{position:absolute;inset-inline-end:12px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;background:#eef3f2;color:#5c716c;display:grid;place-items:center;transition:transform .18s ease,background .18s ease,color .18s ease}
.voice-lock-hint svg{width:14px;height:14px}
.voice-record.locking .voice-lock-hint{transform:translateY(-70%) scale(1.15);background:var(--brand);color:#fff}
.voice-record.locked .voice-cancel-hint,.voice-record.locked .voice-lock-hint{display:none}
.voice-record.cancelling .voice-record-body{background:#fff3f3;border-color:#f3c6c6}
.voice-record.cancelling .voice-cancel-hint{color:#c94b4b;font-weight:700}
.voice-send{width:46px;height:46px;border-radius:50%;background:var(--brand);color:#fff;flex:none;display:grid;place-items:center;box-shadow:0 3px 10px #08796d30}.voice-send[hidden]{display:none}
.voice-send:hover{background:var(--brand-dark)}

/* --- Message bubble: voice player -------------------------------------------------------------- */
.voice-message{display:flex;align-items:center;gap:10px;min-width:220px;max-width:100%;padding:4px 2px}
.voice-play{width:38px;height:38px;border-radius:50%;border:0;flex:none;background:var(--brand);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 7px #08796d30;transition:transform .12s ease}
.voice-play:hover{transform:scale(1.05)}
.voice-play svg{width:17px;height:17px}
.mine .voice-play{background:#0e8f70}
.voice-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.voice-wave{width:100%;height:32px;cursor:pointer;display:block}
.voice-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;color:#7c8d89}
.mine .voice-meta{color:#4f7a6c}
.voice-speed{border:0;background:#eef3f2;color:#4a615c;border-radius:9px;padding:2px 7px;font-size:10.5px;font-weight:700;cursor:pointer;flex:none}
.mine .voice-speed{background:#c8ecdd;color:#1c5f4c}
.voice-speed:hover{filter:brightness(.96)}
.voice-message.loading .voice-wave{opacity:.5}

/* --- WhatsApp-style voice bubble --------------------------------------------------------------
   Left-to-right like WhatsApp in every language: ▶ then the waveform; the duration sits under the
   start of the waveform and the speed control under its end. Fixed, comfortable width. */
html body .voice-message{direction:ltr;width:min(270px,68vw);min-width:0;gap:12px;padding:6px 4px 2px}
html body .voice-play{width:40px;height:40px;background:transparent!important;color:#54656f!important;box-shadow:none!important}
html body .voice-play svg{width:28px;height:28px;fill:currentColor}
html body .mine .voice-play{color:color-mix(in srgb,var(--theme-primary,#168c7e) 70%,#1f2c29)!important}
html body .voice-body{gap:4px}
html body .voice-wave{width:100%;height:30px}
html body .voice-meta{direction:ltr;font-size:12px;color:#667781}
html body .voice-speed{background:#0000000f;color:#3b4a54;font-size:11px;border-radius:10px;padding:2px 8px}
/* The send arrow while recording was white on the white bar (an older skin overrode it). */
html body .voice-send{background:var(--theme-primary,#168c7e)!important;color:#fff!important;border:0!important}
html body .voice-send svg{color:#fff;stroke:currentColor}
html body #composer.has-content .send{color:var(--theme-primary,#168c7e)!important}
/* With a ready attachment the send button is filled with the brand color; its arrow must be white. */
html body #composer.attachment-ready .send,html body #composer.has-content.attachment-ready .send{background:var(--theme-primary,#168c7e)!important;color:#fff!important}
html body #composer.attachment-ready .send svg{color:#fff!important;stroke:#fff!important}
html body #composer.has-attachment:not(.attachment-ready) .send{opacity:.55}