.group-avatar { background:var(--mist); color:var(--sea); }
/* Breathing room between the newest message and the composer, inside the
   scrollable history so pin-to-bottom and older-message positions still work. */
.dm-content > .messages { padding-bottom:24px; }
.group-avatar svg { width:24px; height:24px; }
.group-create { display:flex; flex:none; align-self:flex-start; align-items:center; justify-content:center; gap:6px; width:max-content; max-width:calc(100% - 24px); min-height:32px; margin:8px 12px; padding:5px 10px; font:600 13px/1.3 Arial,sans-serif; }
.group-create .group-avatar { width:20px; height:20px; flex:none; }
.conversation-list > .group-create { display:none; }
.conversation-list > .group-invitations { display:none; }
.group-invitations { padding:8px; }
.group-invitations h3 { font:600 13px/1.4 Arial,sans-serif; color:var(--sea); margin:0 0 8px; }
.group-invitation { display:grid; gap:6px; padding:10px; margin-bottom:8px; border:1px solid var(--line); background:var(--mist); }
.group-invitation > strong { font-size:14px; overflow-wrap:anywhere; color:var(--deep); }
.group-invitation > small { font-size:12px; color:var(--muted); }
.group-invitation > div { display:flex; gap:6px; }
.group-invitation button { min-height:36px; font-size:12px; padding:6px 10px; }
.group-details-button { flex:none; width:44px; height:44px; padding:0; color:var(--sea); background:none; border:0; font-size:24px; margin-left:auto; }
.group-dialog { width:min(480px,calc(100vw - 24px)); max-height:calc(100dvh - 32px); overflow:auto; font-size:15px; }
.group-dialog > header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.group-dialog > header h2 { font-size:20px; margin:0; }
.group-editor { display:grid; gap:14px; min-width:0; }
.group-editor > label { display:grid; gap:6px; margin:0; }
.group-editor input { width:100%; min-width:0; font:inherit; font-size:16px; }
.group-selection { display:flex; flex-wrap:wrap; gap:6px; }
.group-chip { font:inherit; font-size:13px; max-width:100%; overflow-wrap:anywhere; padding:6px 10px; color:var(--deep); background:var(--mist); border:1px solid var(--line); }
.group-search-results { max-height:240px; overflow-y:auto; display:grid; gap:4px; }
.group-member-option { display:grid; grid-template-columns:32px minmax(0,1fr) 24px; align-items:center; gap:10px; text-align:left; padding:8px; min-height:48px; font:inherit; background:var(--foam); color:var(--deep); border:1px solid var(--line); }
.group-member-option > span:nth-child(2) { overflow-wrap:anywhere; }
.group-member-photo { width:32px; height:32px; border-radius:50%; overflow:hidden; background:var(--sea); color:white; display:grid; place-items:center; font-size:12px; }
.group-member-photo img { width:100%; height:100%; object-fit:cover; }
.group-check { visibility:hidden; color:var(--sea); }
.group-member-option[aria-pressed=true] { background:var(--mist); border-color:var(--sea); }
.group-member-option[aria-pressed=true] .group-check { visibility:visible; }
.group-current-members { display:grid; gap:6px; }
.group-current-member { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:40px; }
.group-current-member > span { min-width:0; overflow-wrap:anywhere; }
.group-current-member button { flex:none; font-size:13px; margin:0; }
.group-selection:empty,.group-search-results:empty { display:none; }
.group-removing > span { opacity:.5; text-decoration:line-through; }
.group-status { margin:0; color:var(--muted); font-size:13px; }
.group-status:empty { display:none; }
.group-editor > footer { display:flex; justify-content:space-between; gap:12px; padding-top:8px; }
.group-editor > footer button { width:auto; min-height:40px; font:inherit; font-size:14px; padding:8px 16px; }
@media(max-width:760px) {
 .conversation-list > .group-invitations:not([hidden]) { display:block; }
 .group-create { min-height:44px; }
 .conversation-list > .group-create { display:flex; width:max-content; min-height:44px; margin-inline:0; }
 .group-invitation button { min-height:44px; }
 .group-dialog { padding:16px; }
 .group-dialog > header { margin-bottom:16px; }
 .group-search-results { max-height:180px; }
 .dm-header:has([data-manage-group]) { grid-template-columns:44px minmax(0,1fr) 44px; }
 .dm-header:has([data-manage-group]):has(> .install-app-button) { grid-template-columns:44px minmax(0,1fr) 44px 44px; }
 .dm-header:has([data-manage-group]) > .dm-peer { grid-column:2; }
 .group-details-button { grid-column:3; grid-row:1; }
 .dm-header:has([data-manage-group]) > .install-app-button { grid-column:4; grid-row:1; width:44px; min-width:44px; margin:0; }
}
/* DM-only phone alignment: conversation edges, header slots and input baseline.
   Keep desktop and the shared public-chat grouping rules unchanged. */
@media(max-width:650px) {
 #dms-view > .dm-content { padding:0; }
 .dm-content > .dm-header { padding:8px; gap:0 6px; min-height:60px; }
 .dm-content > .dm-header > .dm-peer { grid-column:2; grid-row:1; padding:0; width:100%; min-width:0; min-height:44px; gap:8px; }
 .dm-content > .dm-header > .install-app-button { grid-column:3; grid-row:1; width:44px; min-width:44px; height:44px; margin:0; }
 .dm-content > .dm-header > .dm-header-badges { grid-column:2/-1; grid-row:2; margin-left:42px; min-width:0; gap:4px; }
 .dm-content > .dm-header .dm-badge-more { min-width:44px; min-height:44px; }
 .dm-content > .dm-header:has([data-manage-group]):has(> .install-app-button) { grid-template-columns:44px minmax(0,1fr) 44px 44px; }
 .dm-content > .dm-header > .group-details-button { grid-column:3; grid-row:1; margin:0; }
 .dm-content > .dm-header:has([data-manage-group]) > .install-app-button { grid-column:4; grid-row:1; }
 .dm-content > .dm-header .group-avatar { width:34px; height:34px; flex:none; }
 .conversation-list .conversation-button .group-avatar { width:34px; height:34px; flex:none; }
 .dm-content .live-message .thread-meta { display:grid; grid-template-columns:minmax(0,1fr); gap:2px; margin-bottom:4px; }
 .dm-content .live-message .thread-meta > time { margin:0; line-height:1.4; }
 #dm-form.message-composer { min-height:60px; padding:8px 8px max(8px,env(safe-area-inset-bottom)); gap:5px; align-items:center; }
 #dm-form.message-composer > .dm-attach,
 #dm-form.message-composer > button.primary { flex:0 0 44px; width:44px; min-width:44px; height:44px; min-height:44px; margin:0; }
 #dm-form.message-composer > textarea { padding:10px 44px 10px 10px; margin:0; align-self:center; }
 #dm-form.message-composer > .emoji-insert { right:57px; bottom:max(8px,env(safe-area-inset-bottom)); width:40px; height:44px; margin:0; }
}