/* Shared media presentation for every channel; keep keyboard focus visible. */
.messages .message button:has(>img),.messages .message-image a{display:block;padding:0;border:0;background:transparent;box-shadow:none;min-height:0;line-height:0;max-width:100%}
.messages .message button:has(>img):hover,.messages .message button:has(>img):active{background:transparent;box-shadow:none}
.messages .message button:has(>img)>img{display:block;max-width:100%;object-fit:contain}
.messages .message button:has(>img):focus-visible,.messages .message-image a:focus-visible{outline:2px solid var(--accent,#217c63);outline-offset:3px}
.messages .message audio{border:0;box-shadow:none}
.messages .message.reply-target-highlight{outline:2px solid var(--accent,#217c63);background:#d9f1e7}
/* Keep audio controls on the same side as their incoming/outgoing message. */
.messages .message.out :is(.message-audio,.tg-media[data-type="audio"],.wa-media[data-wa-type="audio"],div:has(> .qr-media[data-type="audio"]),div:has(> audio)){text-align:right;margin-left:auto;margin-right:0}
.messages .message.in :is(.message-audio,.tg-media[data-type="audio"],.wa-media[data-wa-type="audio"],div:has(> .qr-media[data-type="audio"]),div:has(> audio)){text-align:left;margin-left:0;margin-right:auto}
.messages .message.out .message-audio{align-items:flex-end}
.messages .message.in .message-audio{align-items:flex-start}
.messages .message.out .message-audio :is(.audio-load,.audio-download){align-self:flex-end}
.messages .message.in .message-audio :is(.audio-load,.audio-download){align-self:flex-start}
.messages .message audio{display:block;max-width:100%}
.messages .message.out audio{margin-left:auto;margin-right:0}
.messages .message.in audio{margin-left:0;margin-right:auto}
/* A quiet metadata stack, sized by the media rather than long sender names. */
.messages .message.media-unframed{display:flex;flex-direction:column;width:fit-content;min-width:160px;max-width:min(320px,92%);padding:4px;border-color:transparent;background:transparent;box-shadow:none;gap:5px}
.messages .message.media-unframed>small{display:block;contain:inline-size;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;line-height:1.5;font-weight:500;color:#6b817b;padding:0 3px}
.messages .message.media-unframed>time{align-self:flex-end;max-width:100%;margin:0;padding:3px 7px;border-radius:6px;background:#eaf0ee;color:#647b73;font-size:10px;line-height:1.4;font-weight:400;text-align:right}
.messages .message.media-unframed.in>time{align-self:flex-start}
.messages .message.media-unframed>p{margin:2px 3px}
.messages .message.media-unframed img,.messages .message.media-unframed video{max-width:100%}
.messages .message.media-unframed.reply-target-highlight{background:#d9f1e7}