/* Shared conversations and forum presentation. Hover never changes geometry. */
#dm-content { --message-edge:20px; }
:is(#dm-content,#live-chat-messages) { --message-avatar-size:34px; --message-copy-gap:14px; }
/* Short histories rest above the composer; long histories keep normal scroll order.
   The flexible space is before messages, not a trailing gap after the latest one. */
:is(#dm-content>.messages,#live-chat-messages) { padding-bottom:4px; }
:is(#dm-content>.messages,#live-chat-messages):has(>.live-message) { display:flex; flex-direction:column; }
:is(#dm-content>.messages,#live-chat-messages):has(>.live-message)::before { content:''; flex:1 0 0; min-height:0; }
:is(#dm-content>.messages,#live-chat-messages)>.live-message { flex-shrink:0; }
@media(max-width:650px) {
 :is(#dm-content>.messages,#live-chat-messages) { padding-bottom:12px; }
}
#dm-form.message-composer { margin-top:0; }
/* An open conversation has one header: its contact, not a second inbox title.
   Phone headers already occupy the top edge; keep their navigation slots. */
@media(min-width:651px) {
 .mobile-dm-conversation #dms-view.dm-page { height:calc(100dvh / var(--ui-zoom)); }
 .mobile-dm-conversation #dm-content { padding-top:0; }
 .mobile-dm-conversation #dm-content>.dm-header { flex:none; min-height:var(--desktop-header-height,65px); margin-inline:calc(-1 * var(--message-edge)); padding:7px var(--message-edge); background:var(--foam); }
 .mobile-dm-conversation #dm-content>.dm-header>.dm-peer { flex:1; min-width:0; padding-block:0; }
 .mobile-dm-conversation #dm-content>.dm-header .dm-peer-copy { gap:2px; }
 .mobile-dm-conversation #dm-content>.dm-header .dm-peer-name b,
 .mobile-dm-conversation #dm-content>.dm-header .dm-peer-copy>.name-with-badges>b { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
#dm-content .dm-contact { cursor:default; }
#dm-content .dm-peer-avatar,#dm-content .dm-peer-name { border:0; background:none; padding:0; margin:0; color:inherit; text-align:left; font:inherit; }
#dm-content .dm-peer-avatar { display:flex; flex:none; }
#dm-content .dm-peer-name { min-width:0; }
#dm-content .dm-peer-name:hover b { text-decoration:underline; }
#dm-content .dm-contact-heading { display:flex; flex-wrap:wrap; align-items:center; gap:2px 6px; min-width:0; }
#dm-content .dm-contact-heading>.dm-header-badges { margin:0; gap:4px; }
#dm-content .dm-peer-name .name-with-badges { min-height:26px; }
#dm-form { flex-wrap:wrap; }
#dm-form>.reply-target { order:-1; flex:0 0 100%; grid-column:1/-1; grid-row:1; width:100%; min-width:0; flex-wrap:nowrap; margin:0 0 4px; }
#dm-form>.reply-target>span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#dm-form>.reply-target>.reply-target-cancel { flex:none; }
#dm-form:has(>.reply-target:not([hidden]))>:is(.dm-attach,textarea,.emoji-insert,button.primary) { grid-row:2; }
#dm-form>textarea { min-width:0; }
/* Replying belongs to the composer, not a separate boxed notice. */
:is(#dm-form,#live-chat-form) { --reply-banner-gutter:24px; }
:is(#dm-form.message-composer,#live-chat-form):has(>.reply-target:not([hidden])) { padding-top:0; }
:is(#dm-form,#live-chat-form)>.reply-target { order:-1; flex:0 0 calc(100% + 2 * var(--reply-banner-gutter)); grid-column:1/-1; grid-row:1; width:calc(100% + 2 * var(--reply-banner-gutter)); min-width:0; min-height:36px; margin:0 calc(-1 * var(--reply-banner-gutter)) 2px; padding:6px var(--reply-banner-gutter); flex-wrap:nowrap; gap:8px; border:0; border-bottom:1px solid var(--line); border-radius:0; background:color-mix(in srgb,var(--sea) 8%,var(--composer-surface)); color:var(--deep); font:12px/1.4 Arial,sans-serif; }
:is(#dm-form,#live-chat-form)>.reply-target>span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
:is(#dm-form,#live-chat-form)>.reply-target strong { margin-inline-start:3px; font-weight:700; }
:is(#dm-form,#live-chat-form)>.reply-target>.reply-target-cancel { display:grid; place-items:center; flex:none; width:28px; height:28px; margin:0 -4px 0 0; padding:0; font-size:17px; }
:is(#dm-form,#live-chat-form)>.reply-target[hidden] { display:none; }
@media(max-width:650px) {
 :is(#dm-form,#live-chat-form) { --reply-banner-gutter:8px; }
 :is(#dm-form,#live-chat-form)>.reply-target>.reply-target-cancel { width:36px; height:36px; }
}
#dm-content .dm-receipt { display:inline-flex; align-items:center; gap:4px; margin:0; padding:0; color:var(--muted); font:11px/1.4 Arial,sans-serif; }
#dm-content .dm-receipt.is-read { color:var(--sea); }
#dm-content .dm-receipt svg { flex:none; width:16px; height:12px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
@media(max-width:650px) { #dm-content .dm-receipt { font-size:12px; } }
:is(#dm-content,#live-chat-messages) .message-inline-meta { display:inline-flex; align-items:baseline; gap:5px; margin-inline-start:6px; vertical-align:baseline; white-space:nowrap; }
:is(#dm-content,#live-chat-messages) .message-last-line { display:inline-flex; align-items:baseline; max-width:100%; vertical-align:baseline; }
:is(#dm-content,#live-chat-messages) .message-last-word { min-width:0; overflow-wrap:anywhere; }
:is(#dm-content,#live-chat-messages) .message-last-line>.message-inline-meta { flex:none; }
:is(#dm-content,#live-chat-messages) .message-inline-meta>.message-edited { display:inline; width:auto; margin:0; font:400 10px/1.4 Arial,sans-serif; color:var(--muted); }
:is(#dm-content,#live-chat-messages) .message-media-meta { text-align:right; }
:is(#dm-content,#live-chat-messages) [data-inline-editing="true"] .message-inline-meta { display:none; }
/* Keep receipts on the final text line at the payload edge; edited stays inline. */
#dm-content .message-payload>:is(p,small,.attachment-expired):has(.dm-receipt) { position:relative; padding-inline-end:22px; }
#dm-content .message-payload>:is(small,.attachment-expired):has(.dm-receipt) { display:block; }
#dm-content .message-inline-meta>.dm-receipt { position:absolute; inset-inline-end:0; bottom:4px; }
#dm-content .message-payload>:is(small,.attachment-expired) .dm-receipt { bottom:2px; }
#dm-content .message-inline-meta:has(>.dm-receipt):not(:has(>.message-edited)) { margin-inline-start:0; }
#live-chat-messages { --message-edge:24px; }
.mobile-dm-actions { display:none; }
/* Selection paint fills both list gutters; avatar/text/action positions stay fixed. */
#dm-navigation { margin-inline:-8px; padding-inline:8px; }
#dm-navigation #side-dm-list { margin-inline:-8px; padding-inline:20px; }
#dm-navigation #side-dm-list .conversation-button.active { box-shadow:-20px 0 0 #495F75,20px 0 0 #495F75; }
#dm-navigation #side-dm-list .conversation-button { transition:none; }
#dm-navigation #side-dm-list .conversation-button:hover { box-shadow:-20px 0 0 #364557,20px 0 0 #364557; }
#dm-navigation #side-dm-list .conversation-button.active:is(:hover,:focus-visible) { background:#495F75; box-shadow:-20px 0 0 #495F75,20px 0 0 #495F75; }
@media(max-width:650px) {
 .conversation-list .conversation-button.active { box-shadow:-12px 0 0 var(--mist),12px 0 0 var(--mist); }
 .conversation-list .conversation-button { transition:none; }
 .conversation-list .conversation-button:hover { box-shadow:-12px 0 0 var(--mist),12px 0 0 var(--mist); }
}
@media(min-width:651px) {
 /* Balance the contact strip between the page header and its bottom divider. */
 #dm-content { padding-top:4px; }
 #dm-content > .messages { margin-left:-20px; padding-left:20px; margin-right:-20px; padding-right:24px; }
}
#forum-view,#thread-scroll { isolation:isolate; }
#thread-scroll { --reply-avatar-size:34px; --reply-copy-gap:14px; --reply-copy-inset:calc(var(--reply-avatar-size) + var(--reply-copy-gap)); margin-left:-27px; padding-left:27px; margin-right:-27px; padding-right:27px; }
:is(#thread-scroll,#forum-online-panel) { scrollbar-width:thin; scrollbar-color:transparent transparent; }
:is(#thread-scroll,#forum-online-panel):is(:hover,:focus-within) { scrollbar-color:var(--muted) transparent; }
:is(#thread-scroll,#forum-online-panel)::-webkit-scrollbar { width:8px; background:transparent; }
:is(#thread-scroll,#forum-online-panel)::-webkit-scrollbar-thumb { background:transparent; border-radius:4px; }
:is(#thread-scroll,#forum-online-panel):is(:hover,:focus-within)::-webkit-scrollbar-thumb { background:var(--muted); }
#forum-view .thread-row,#thread-scroll :is(.thread-article,.reply) { position:relative; }
#forum-view .thread-row,#thread-scroll :is(.reply,.reply-list,.piazza-reply-children) { border-radius:0; }
#forum-view .thread-row,#thread-scroll .reply { border-bottom:1px solid var(--line); }
/* A visible tree rail and square joints make the parent/child relationship clear.
   Keep the existing indentation and leave message hover paint/actions untouched. */
#thread-scroll .piazza-reply-children { --reply-rail-inset:15px; --reply-rail-joint:calc(14px + var(--reply-avatar-size) / 2); border-left-color:transparent; }
#thread-scroll .piazza-reply-children>.piazza-reply-branch { position:relative; }
#thread-scroll .piazza-reply-children>.piazza-reply-branch::before,
#thread-scroll .piazza-reply-children>.piazza-reply-branch::after { content:''; position:absolute; left:calc(-1 * var(--reply-rail-inset)); background:var(--line); pointer-events:none; z-index:1; }
#thread-scroll .piazza-reply-children>.piazza-reply-branch::before { top:0; bottom:0; width:1px; }
#thread-scroll .piazza-reply-children>.piazza-reply-branch:last-child::before { bottom:auto; height:var(--reply-rail-joint); }
#thread-scroll .piazza-reply-children>.piazza-reply-branch::after { top:var(--reply-rail-joint); width:calc(var(--reply-rail-inset) - 3px); height:1px; }
#thread-scroll .piazza-reply-branch.deep>.piazza-reply-children { --reply-rail-inset:12px; }
#thread-scroll .reply-subthread { margin:0; padding:0; border:0; background:none; }
#thread-scroll .piazza-reply-branch:has(>.reply-subthread) { border-bottom:1px solid var(--line); }
#thread-scroll .piazza-reply-branch:has(>.reply-subthread)>.reply { border-bottom:0; padding-bottom:0; }
#thread-scroll .reply-subthread>.piazza-reply-children>.piazza-reply-branch:last-child { border-bottom:0; }
#thread-scroll .reply-subthread>.piazza-reply-children>.piazza-reply-branch:last-child>.reply { border-bottom:0; }
#thread-scroll .reply-subthread>.reply-show-more { display:block; width:fit-content; min-height:44px; padding:5px 0; margin:0; border:0; background:none; font:600 12px/1.4 Arial,sans-serif; color:var(--muted); cursor:pointer; }
#thread-scroll .piazza-reply-branch[data-reply-tail]::before { bottom:auto; height:var(--reply-rail-joint); }
#thread-scroll .piazza-reply-branch[hidden] { display:none!important; }
#thread-scroll .reply-show-more:focus-visible { outline:2px solid var(--sea); outline-offset:3px; }
#thread-scroll .reply-show-more:hover { text-decoration:underline; }
/* Keep the avatar in its own gutter; copy starts directly beneath the name. */
#thread-scroll :is(.thread-article,.reply)>.thread-meta { position:relative; min-height:22px; padding-inline-start:var(--reply-copy-inset); gap:4px 8px; align-items:baseline; }
#thread-scroll :is(.thread-article,.reply)>.thread-meta>.name-with-badges { min-height:0; }
#thread-scroll :is(.thread-article,.reply)>.thread-meta>.avatar { position:absolute; inset:2px auto auto 0; width:var(--reply-avatar-size); height:var(--reply-avatar-size); font-size:13px; }
#thread-scroll .thread-article>:not(.thread-meta) { margin-inline-start:var(--reply-copy-inset); max-width:calc(100% - var(--reply-copy-inset)); }
#thread-scroll .thread-article>.body { margin-top:0; min-height:22px; font-size:14px; line-height:1.5; }
#thread-scroll .thread-article>.body .wob-rich-reader { font-size:inherit; line-height:1.5; }
#thread-scroll .reply>:is(.msg-content-line,.reply-quote,.msg-foot) { margin-inline-start:var(--reply-copy-inset); }
#thread-scroll .reply>.msg-content-line { min-height:22px; }
#thread-scroll .reply .message-payload { font-size:14px; line-height:1.5; }
#thread-scroll .reply .message-payload>p { margin-top:0; font-size:inherit; line-height:inherit; }
#thread-scroll .reply-subthread>.reply-show-more { margin-inline-start:var(--reply-copy-inset); }
/* The scroll viewport clips the paint to its left edge, including nested replies. */
#forum-view .thread-row::before,#thread-scroll :is(.thread-article,.reply)::before { content:''; position:absolute; inset:0 0 0 auto; width:100vw; z-index:-1; pointer-events:none; }
:is(#dm-content,#live-chat-messages) .live-message { display:block; }
:is(#dm-content,#live-chat-messages) .live-message:has(+ .live-message.grouped) { padding-bottom:0; }
:is(#dm-content,#live-chat-messages) .live-message.grouped { padding-block:0; }
:is(#dm-content,#live-chat-messages) .live-message.grouped .message-row { padding-block:1px; }
:is(#dm-content,#live-chat-messages) .message-row { position:relative; display:grid; grid-template-columns:var(--message-avatar-size) minmax(0,1fr); gap:var(--message-copy-gap); width:100%; padding-block:3px; border-radius:0; }
:is(#dm-content,#live-chat-messages) .message-row>.msg-side>.avatar { width:var(--message-avatar-size); height:var(--message-avatar-size); margin-top:2px; font-size:13px; }
.message-row > div { min-width:0; }
:is(#dm-content,#live-chat-messages) .message-row .message-payload > p { margin:0; font-size:14px; line-height:1.5; }
:is(#dm-content,#live-chat-messages) .message-row .thread-meta { min-height:22px; margin-bottom:0; }
/* Compact reply context sits above the author, joined to the avatar gutter. */
:is(#dm-content,#live-chat-messages) .message-row.has-reply { row-gap:4px; }
.message-row.has-reply>.message-reply-context { grid-column:2; grid-row:1; }
.message-row.has-reply>.msg-side { grid-column:1; grid-row:2; }
.message-row.has-reply>div { grid-column:2; grid-row:2; }
.message-reply-context { position:relative; display:flex; align-items:center; gap:5px; min-width:0; width:100%; min-height:22px; margin:0; padding:0; border:0; background:none; color:var(--muted); text-align:left; font:11px/1.4 Arial,sans-serif; }
.message-reply-context::before { content:''; position:absolute; left:calc(-1 * (var(--message-avatar-size) / 2 + var(--message-copy-gap))); top:50%; width:calc(var(--message-avatar-size) / 2 + var(--message-copy-gap) - 8px); height:calc(50% + 4px); border-top:1px solid var(--line); border-left:1px solid var(--line); border-top-left-radius:6px; pointer-events:none; }
.message-reply-context>b { flex:0 0 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:45%; }
.reply-context-excerpt { flex:0 1 auto; min-width:0; max-width:42ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.reply-context-avatar { display:grid; place-items:center; flex:none; width:16px; height:16px; border-radius:50%; overflow:hidden; background:var(--sea); color:var(--foam); font-size:7px; }
.reply-context-avatar>img { width:100%; height:100%; object-fit:cover; }
.message-reply-context:not(:disabled):hover .reply-context-excerpt { color:var(--deep); }
.message-reply-context:focus-visible { outline:2px solid var(--sea); outline-offset:2px; }
.message-reply-context:disabled { cursor:default; }
#live-chat-messages .message-reply-context { width:min(64%,780px); }
@media(min-width:651px) and (hover:hover) { .has-reply .msg-content-line>.msg-tools { top:28px!important; } }
/* Use the text's real first baseline, not a pixel offset from the row edge. */
:is(#dm-content,#live-chat-messages) .grouped:has(.message-payload > p) .message-row { align-items:baseline; }
:is(#dm-content,#live-chat-messages) .grouped:has(.message-payload > p) .message-row > .msg-side { align-self:baseline; }
/* A quoted reply is a separate row; its caption is not the message baseline. */
#live-chat-messages .grouped:has(.chat-reply-quote) .message-row > div { display:contents; }
#live-chat-messages .grouped:has(.chat-reply-quote) .message-row > .msg-side { grid-column:1; grid-row:2; }
#live-chat-messages .grouped:has(.chat-reply-quote) .chat-reply-quote { grid-column:2; grid-row:1; width:min(64%,780px); margin-block:0; }
#live-chat-messages .grouped:has(.chat-reply-quote) .msg-content-line { grid-column:2; grid-row:2; width:min(64%,780px); }
#live-chat-messages .grouped:has(.chat-reply-quote) .message-row { row-gap:6px; }
#live-chat-messages .message-row > div { width:min(64%,780px); }
:is(#dm-content,#live-chat-messages) .message-day { grid-column:1/-1; display:flex; align-items:center; gap:10px; width:100%; margin:10px 0 12px; color:var(--muted); font-size:12px; font-weight:600; line-height:20px; }
:is(#dm-content,#live-chat-messages) .message-day[hidden] { display:none; }
.message-day::before,.message-day::after { content:''; flex:1; height:1px; background:var(--line); }
.message-day > time { flex:none; }
:is(#dm-content,#live-chat-messages) .live-message .thread-meta { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; }
/* The global 26px name wrapper used to push the first text line below the PFP. */
:is(#dm-content,#live-chat-messages) .live-message .thread-meta>.name-with-badges { min-height:0; }
:is(#dm-content,#live-chat-messages) .live-message .thread-meta>.name-with-badges>b { font-size:14px; line-height:1.35; font-weight:600; }
:is(#forum-view,#thread-scroll) .thread-meta>.name-with-badges>b { font-size:14px; line-height:1.35; font-weight:600; }
/* Use the device's semibold face; Arial 500 often renders as regular text. */
:is(#dm-content,#live-chat-messages,#forum-view,#thread-scroll) .thread-meta>.name-with-badges>b { color:var(--deep); font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
[data-theme="dark"] :is(#dm-content,#live-chat-messages,#forum-view,#thread-scroll) .thread-meta>.name-with-badges>b { color:#f2f3f5; }
:is(#dm-content,#live-chat-messages) .live-message .thread-meta > time { margin:0; padding:0; background:none; font-size:12px; white-space:nowrap; }
:is(#dm-content,#live-chat-messages) .live-message .msg-side > .side-stamp { display:block; opacity:0; margin:0; padding:0; font-size:10px; line-height:1.5; font-variant-numeric:tabular-nums; }
:is(#dm-content,#live-chat-messages) .live-message:focus-within .msg-side > .side-stamp { opacity:1; }
@media(hover:hover) {
 #forum-view .thread-row:is(:hover,:focus-within),
 #thread-scroll :is(.thread-article,.reply):is(:hover,:focus-within) { background:none; border-radius:0; }
 #forum-view .thread-row:is(:hover,:focus-within)::before,
 #thread-scroll :is(.thread-article,.reply):is(:hover,:focus-within)::before { background:color-mix(in srgb,var(--sea) 11%,transparent); }
 :is(#dm-content,#live-chat-messages) .message-row:hover,
 :is(#dm-content,#live-chat-messages) .message-row:focus-within { background:color-mix(in srgb,var(--sea) 11%,transparent); box-shadow:calc(-1 * var(--message-edge)) 0 0 color-mix(in srgb,var(--sea) 11%,transparent); }
 :is(#dm-content,#live-chat-messages) .live-message:hover .msg-side > .side-stamp { opacity:1; }
}
@media(max-width:650px) {
 #thread-scroll { --reply-avatar-size:32px; --reply-copy-gap:10px; }
 #thread-scroll :is(.thread-article>.body,.reply .message-payload) { font-size:13.5px; }
 #thread-scroll :is(.thread-article,.reply)>.thread-meta { column-gap:6px; }
 #thread-scroll .thread-meta .phone-badge-more { width:32px; min-width:32px; height:28px; min-height:28px; }
 #thread-scroll .piazza-reply-children { --reply-rail-inset:10px; }
 #thread-scroll .piazza-reply-branch.deep>.piazza-reply-children { --reply-rail-inset:7px; }
 #thread-scroll { margin-left:-14px; padding-left:14px; margin-right:-14px; padding-right:14px; }
 #dm-content > .messages { padding-right:24px; }
 :is(#dm-content,#live-chat-messages) { --message-edge:12px; --message-avatar-size:32px; --message-copy-gap:10px; }
 :is(#dm-content,#live-chat-messages) .message-row .message-payload>p { font-size:13.5px; }
 #live-chat-messages .message-reply-context { width:100%; }
 :is(#dm-content,#live-chat-messages) .message-row .message-payload { align-self:start; }
 /* Compact real hit boxes, not oversized invisible targets over nearby copy. */
 :is(#dm-content,#live-chat-messages) .thread-meta .phone-badge-more { width:32px; min-width:32px; height:28px; min-height:28px; }
 :is(#dm-content,#live-chat-messages) .message-reply-context { min-height:32px; padding-block:5px; }
 :is(#dm-content,#live-chat-messages) .message-row.has-reply { row-gap:6px; }
 :is(#dm-form.message-composer,#live-chat-form)>textarea { height:44px; min-height:44px; max-height:var(--chat-draft-max-height,110px); overflow-y:auto; }
 :is(#dm-form.message-composer,#live-chat-form)>:is(.dm-attach,.composer-attach,button.primary) { align-self:flex-end; }
 .mobile-dm-actions { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; margin-bottom:8px; }
 .mobile-dm-actions>:is(.mobile-new-dm,.group-create) { display:flex; align-items:center; justify-content:center; gap:5px; width:100%; max-width:none; min-width:0; min-height:44px; margin:0; padding:6px; font:600 12px/1.3 Arial,sans-serif; text-align:center; }
 #live-chat-messages .message-row > div { width:100%; }
 #live-chat-messages .grouped:has(.chat-reply-quote) :is(.chat-reply-quote,.msg-content-line) { width:100%; }
 :is(#dm-content,#live-chat-messages) .message-day { font-size:11px; gap:8px; margin:8px 0; }
 :is(#dm-content,#live-chat-messages) .live-message .thread-meta > time { font-size:11px; }
 :is(#dm-content,#live-chat-messages) .live-message .thread-meta>.name-with-badges>b { font-size:14px; }
 :is(#forum-view,#thread-scroll) .thread-meta>.name-with-badges>b { font-size:14px; }
 :is(#dm-content,#live-chat-messages) .live-message .msg-side > .side-stamp { font-size:10px; line-height:20.25px; }
}
/* Single photos keep their proportions within a compact envelope. Only multiple
   photos in the same payload/post use square crops; consecutive messages do not. */
:is(#dm-content,#live-chat-messages,#thread-scroll) {
 --photo-single-width:300px; --photo-single-height:240px; --photo-square-size:180px;
 --photo-frame-width:fit-content; --photo-aspect:auto; --photo-width:auto; --photo-height:auto;
 --photo-max-height:var(--photo-single-height); --photo-fit:contain;
 --photo-placeholder-width:min(280px,100%); --photo-placeholder-height:120px;
}
#thread-scroll :is(.thread-article,.message-payload) { container-type:inline-size; }
:is(#dm-content,#live-chat-messages,#thread-scroll) :is(.message-payload,.thread-article):has(> :is(button.message-image-link,button.data-saver-image.message-image) ~ :is(button.message-image-link,button.data-saver-image.message-image)),
#thread-scroll .thread-article:has(.rich-reader-image ~ .rich-reader-image),
#thread-scroll .thread-article:has(.rich-reader-image):has(> :is(button.message-image-link,button.data-saver-image.message-image)) {
 --photo-frame-width:min(var(--photo-square-size),100%); --photo-aspect:1; --photo-width:100%; --photo-height:100%;
 --photo-max-height:none; --photo-fit:cover;
 --photo-placeholder-width:min(var(--photo-square-size),100%); --photo-placeholder-height:auto;
}
:is(#dm-content,#live-chat-messages,#thread-scroll) :is(.message-payload,.thread-article)>button.message-image-link {
 display:block; width:var(--photo-frame-width); max-width:100%; height:auto; aspect-ratio:var(--photo-aspect);
 padding:0; overflow:hidden; background:transparent; line-height:0;
}
:is(#dm-content,#live-chat-messages,#thread-scroll) :is(.message-payload,.thread-article)>button.message-image-link>img.message-image {
 display:block; width:var(--photo-width); height:var(--photo-height); max-width:min(var(--photo-single-width),calc(100cqi - 2px));
 max-height:var(--photo-max-height); min-width:0; min-height:0; object-fit:var(--photo-fit); margin:0;
}
:is(#dm-content,#live-chat-messages,#thread-scroll) :is(.message-payload,.thread-article)>button.data-saver-image.message-image {
 width:var(--photo-placeholder-width); height:var(--photo-placeholder-height); min-height:0; aspect-ratio:var(--photo-aspect); margin-top:9px;
}
#thread-scroll .thread-article .rich-reader-image {
 width:var(--photo-frame-width); max-width:100%; aspect-ratio:var(--photo-aspect); overflow:hidden;
}
#thread-scroll .thread-article .rich-reader-image>img.data-saver-inline {
 width:var(--photo-width); height:var(--photo-height); min-height:0; max-width:min(var(--photo-single-width),100cqi);
 max-height:var(--photo-max-height); margin:0; object-fit:var(--photo-fit);
}
#thread-scroll .thread-article .rich-reader-image>button.data-saver-inline {
 width:var(--photo-placeholder-width); height:var(--photo-placeholder-height); min-height:0; aspect-ratio:var(--photo-aspect); margin:0;
}
@media(max-width:650px) {
 :is(#dm-content,#live-chat-messages,#thread-scroll) { --photo-single-width:260px; --photo-single-height:220px; --photo-square-size:160px; }
}