.voice-player { display:flex; align-items:center; gap:11px; width:270px; max-width:100%; min-height:58px; padding:7px 0; white-space:normal; }
.voice-player>audio[hidden] { display:none; }
.voice-player-toggle { display:grid; place-items:center; flex:0 0 40px; width:40px; height:40px; padding:0; color:white; background:#456748; border:0; border-radius:50%; cursor:pointer; }
.voice-player-toggle:hover { background:#294b3d; }
.voice-player-toggle svg { width:22px; height:22px; }
.voice-player-content { flex:1; min-width:0; }
.voice-player-progress { appearance:none; display:block; width:100%; height:20px; margin:0; padding:0; border:0; box-shadow:none; cursor:pointer; accent-color:#456748; background:transparent; }
.voice-player-progress::-webkit-slider-runnable-track { height:4px; border-radius:8px; background:linear-gradient(to right,#456748 var(--voice-progress,0%),#c5d4bb var(--voice-progress,0%)); }
.voice-player-progress::-webkit-slider-thumb { appearance:none; width:12px; height:12px; margin-top:-4px; border:0; border-radius:50%; background:#456748; }
.voice-player-progress::-moz-range-track { height:4px; border-radius:8px; background:#c5d4bb; }
.voice-player-progress::-moz-range-progress { height:4px; border-radius:8px; background:#456748; }
.voice-player-progress::-moz-range-thumb { width:12px; height:12px; border:0; border-radius:50%; background:#456748; }
.voice-player-progress:disabled { opacity:.45; cursor:default; }
.voice-player-footer { display:flex; justify-content:space-between; align-items:center; gap:8px; min-height:23px; }
.voice-player-time { color:#768475; font-size:10px; font-variant-numeric:tabular-nums; }
.voice-player-speed { background:transparent; border:0; border-radius:8px; color:#426044; font-size:10px; font-weight:750; min-width:32px; min-height:26px; padding:3px 5px; }
.voice-player-speed:hover { background:#294b3d0d; }
.voice-player-status { display:block; font-size:10px; color:#835b46; line-height:1.45; }
.voice-player-status:empty { display:none; }
.voice-player-fallback { font-size:10px; color:#426044; text-decoration:underline; }
.voice-player button:focus-visible,.voice-player input:focus-visible,img.chat-media:focus-visible { outline:2px solid #5c8255; outline-offset:3px; }
#chat-attachment-preview>.voice-player { flex:1 1 190px; }
img.chat-media[role=button] { cursor:zoom-in; }
.chat-photo-viewer { position:fixed; inset:0; margin:auto; width:min(1100px,96vw); max-width:96vw; height:90dvh; max-height:90dvh; padding:48px 16px 16px; border:0; border-radius:18px; background:#122019; color:white; overflow:hidden; box-shadow:0 24px 100px #0005; }
.chat-photo-viewer::backdrop { background:#07120eef; }
.chat-photo-viewer-image { display:block; width:100%; height:100%; object-fit:contain; }
.chat-photo-viewer-close { position:absolute; right:12px; top:10px; display:grid; place-items:center; width:36px; height:36px; padding:8px; color:white; border:0; border-radius:50%; background:#ffffff17; z-index:1; }
.chat-photo-viewer-close:hover { background:#ffffff2c; }
.chat-photo-viewer-close svg { width:20px; height:20px; }
.chat-photo-viewer-status { position:absolute; left:20px; right:20px; bottom:24px; text-align:center; color:white; }
@media(max-width:400px) { .voice-player { gap:8px; width:235px; } .voice-player-toggle { width:36px; height:36px; flex-basis:36px; } .chat-photo-viewer { width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; border-radius:0; } }