/* Use skin-derived foregrounds for the real-account shell, including small copy. */
html[data-skin] .connected-app{color:var(--skin-text);background:var(--skin-bg);--muted:var(--skin-muted)}
html[data-skin] .connected-app :is(.connection-muted,.connected-chat-head p,.connected-compose small,.connected-draft-state,.connection-device-row span,.connection-room-state p,.connection-preview-status,.connection-link-preview small,.connection-messages .message>small,.connected-room-row span,.connected-room-row small,.connected-friend-row small,.hint,.unified-cache,.room-board .board-empty){color:var(--skin-muted)}
html[data-skin] .connected-app :is(.connection-card,.connected-compose,#connected-compose-notice,#connection-dialog,.connection-help-popover,.list-action-menu,.room-profile-menu,.connection-link-preview,.connected-preview-content article){background:var(--skin-surface);color:var(--skin-text);border-color:var(--skin-border)}
html[data-skin] .connected-app :is(input,textarea,select){color:var(--skin-text);background:var(--skin-surface);border-color:var(--skin-border)}
html[data-skin] .connected-app :is(input,textarea)::placeholder{color:var(--skin-muted);opacity:1}
html[data-skin] .connected-app :is(.nav-item.active,.unified-heading button,.brand-mark,.reading-trigger,.board-toggle,.bubble a,.connection-banner a,.connected-tools button,.compose-tools button,.connection-help,.room-title-trigger){color:var(--skin-accent-text)}
html[data-skin] .connected-app :is(.list-action-menu button,.room-profile-menu button,.connected-friend-result,.connected-search-result){color:var(--skin-text)}
html[data-skin] .connected-app :is(.list-action-menu button:hover,.connected-search-result:hover,.connected-preview-content article,#connected-reply){background:var(--skin-mine);color:var(--skin-text)}
html[data-skin] .connected-app .primary{background:var(--skin-accent);color:#fff;border-color:var(--skin-accent)}
html[data-skin] .connected-app #connection-dialog :is(fieldset,button){border-color:var(--skin-border)}
html[data-skin] .connected-app .connected-review{background:var(--skin-mine);color:var(--skin-text)}
.connected-contact-tools{padding:12px 18px 0;display:flex;gap:8px;flex-wrap:wrap;flex:none}
.connected-contact-tools>button,.connected-contact-tools summary{min-height:44px;border:1px solid var(--skin-border);border-radius:8px;padding:10px;font-size:12px}
.connected-contact-tools>details,.connected-contact-tools>p{width:100%}.connected-contact-tools summary{cursor:pointer;display:flex;align-items:center}.connected-contact-tools p{font-size:11px;line-height:1.6;margin:0}
.connected-contact-tools form{display:grid;gap:8px;padding:10px 0}.connected-contact-tools label{display:grid;gap:4px;font-size:12px}.connected-contact-tools input{min-width:0;width:100%;font-size:16px;padding:10px}.connected-contact-tools form button{min-height:44px}
.connected-friend-filters{display:flex;flex-wrap:wrap;gap:5px;padding:8px 18px;flex:none}.connected-friend-filters button{min-height:40px;padding:7px 9px;font-size:11px;border-radius:8px}.connected-friend-filters button[aria-pressed=true]{background:var(--skin-mine);color:var(--skin-accent-text)}
.connected-friend-list .list-entry{position:relative}.connected-friend-list .connected-friend-row{padding-right:86px;min-height:76px}.connected-friend-invite{position:absolute;right:40px;top:50%;transform:translateY(-50%);width:44px;height:44px;padding:11px;color:var(--skin-accent-text)}.connected-friend-invite svg{width:22px;height:22px}
.connected-friend-avatar[data-registration=registered]{background:var(--skin-mine);box-shadow:inset 0 0 0 2px var(--skin-accent-text)}.connected-friend-avatar[data-registration=unregistered]{background:color-mix(in srgb,var(--skin-surface) 85%,var(--skin-text));box-shadow:inset 0 0 0 1px var(--skin-border)}
.contact-invitation textarea{width:100%;min-height:150px;resize:vertical;font-size:16px;padding:12px}.contact-invitation pre{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;line-height:1.7;padding:12px;background:var(--skin-mine);border-radius:8px}
.contact-send-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.contact-send-actions>*{flex:1;text-align:center;min-height:44px;border-radius:8px;padding:12px;text-decoration:none;font-size:13px}.contact-send-actions [aria-disabled=true]{opacity:.55}
.connected-search-result{display:block;width:100%;min-height:44px;padding:12px;text-align:left;border-bottom:1px solid var(--skin-border);overflow-wrap:anywhere;white-space:pre-wrap}

.connected-app .unified-workspace :is(.connection-back,[data-board-toggle],[data-board-close]){box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex:0 0 40px;width:40px;height:40px;min-width:40px;min-height:40px;padding:8px;border:0;border-radius:0;background:transparent;color:var(--skin-accent-text);transform:none}
.connected-app .unified-workspace :is(.connection-back,[data-board-toggle],[data-board-close]) svg{width:22px;height:22px;display:block;margin:0;flex:none}
@media(min-width:701px){.connected-app .unified-workspace .connection-back{display:none}}
@media(max-width:700px){.connected-app .board-head [data-board-close]{order:-1}}

html[data-skin] .connected-app .unified-workspace .connected-room-row>.connection-unread-badge{background:var(--skin-surface);color:var(--skin-text);border:1px solid var(--skin-border)}

html[data-skin] .connected-app .connected-tools button.expression-trigger{border:0;background:transparent;box-shadow:none;font-size:34px;line-height:1;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;color:var(--skin-accent-text)}.connection-read-count{display:block;font-size:11px;margin-top:5px;color:var(--skin-muted)}

.list-action-symbol{display:inline-flex;vertical-align:middle;width:38px;height:38px;margin-right:10px}.list-action-symbol .profile-avatar{width:38px;height:38px}.contact-profile-identity{display:flex;align-items:center;gap:10px}

.list-action-symbol>svg,.list-action-symbol>img{width:38px;height:38px;max-width:38px;max-height:38px}.connected-tools .connected-paragraph{white-space:nowrap}

.connection-messages .message>.connection-message-meta{display:flex;align-items:baseline;gap:6px;white-space:nowrap;min-width:0}.connection-messages .connection-read-count{display:inline;margin:0;font-size:11px;white-space:nowrap}.connection-messages .connection-read-count[hidden]{display:none}
/* Compact chat: avatar beside the sender name and message, as in a messenger conversation. */
.connection-messages .message{display:grid;grid-template-columns:calc(32px * var(--ui-font-scale,1)) minmax(0,1fr) minmax(0,max-content);align-items:start;column-gap:6px;row-gap:2px;max-width:96%;margin-bottom:10px}
.connection-messages .message>.message-author{grid-column:2;grid-row:1;position:relative;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:5px;margin:0;min-width:0;min-height:16px}
.connection-messages .message>.message-author .message-avatar{position:absolute;top:0;left:calc(-6px - 32px * var(--ui-font-scale,1));width:calc(32px * var(--ui-font-scale,1));height:calc(32px * var(--ui-font-scale,1));flex-basis:calc(32px * var(--ui-font-scale,1))}
.connection-messages .message>.message-author .message-author-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;overflow-wrap:normal}
.connection-messages .message>.message-author .message-author-role{white-space:nowrap}
.connection-messages .message>.bubble{grid-column:2;grid-row:2;min-width:0;padding:8px 12px}
.connection-messages .message>.connection-message-meta{grid-column:3;grid-row:2;align-self:end;margin:0;max-width:110px;overflow:hidden;text-overflow:ellipsis}
.connection-messages .message>.comment{grid-column:1 / -1}
.connection-messages .comment.message{max-width:100%;margin-top:6px}
.connection-messages .comment.message>.message-author .message-avatar{width:calc(28px * var(--ui-font-scale,1));height:calc(28px * var(--ui-font-scale,1))}

/* My own messages do not repeat my name or avatar. */
.connection-messages .message.mine{grid-template-columns:minmax(0,max-content) minmax(0,1fr)}
.connection-messages .message.mine>.message-author{display:none}
.connection-messages .message.mine>.bubble{grid-column:2;grid-row:1}
.connection-messages .message.mine>.connection-message-meta{grid-column:1;grid-row:1}

/* The signed-in status is available in Settings, leaving more room for chat. */
.connected-app.connection-active>.connection-banner{display:none}

/* Device alerts live in Settings; keep an unobtrusive menu indicator. */
.connected-app>.device-approval-banner{display:none!important}
.unified-rail .nav-item[data-workspace-page="settings"]{position:relative}
.unified-rail .nav-item[data-workspace-page="settings"][data-device-alert="true"]::after{content:"";position:absolute;top:8px;right:10px;width:9px;height:9px;border-radius:50%;background:#df493f;box-shadow:0 0 0 2px var(--skin-surface,#fff)}

/* Center the actual shared card, independently of who created it. */
.connection-messages>.message.shared{width:min(100%,680px);max-width:100%;min-width:0;grid-template-columns:minmax(0,1fr) minmax(0,min(84%,520px)) minmax(0,1fr)}
.connection-messages>.message.shared>.message-author{grid-column:2;grid-row:1;justify-content:flex-start}
.connection-messages>.message.shared>.bubble,.connection-messages>.message.shared.mine>.bubble{grid-column:2;grid-row:2;background:color-mix(in srgb,var(--skin-accent,#6544b5) 16%,var(--skin-surface,#fff));border-color:var(--skin-accent,#6544b5)}
.connection-messages>.message.shared>.connection-message-meta,.connection-messages>.message.shared.mine>.connection-message-meta{grid-column:2;grid-row:3;justify-self:end}

/* Keep sticker artwork measurable inside compact message grids. */
.connection-messages .message>.bubble:has(>.connected-sticker){min-width:min(204px,55vw)}
.connection-messages .connected-sticker{width:min(180px,calc(55vw - 24px));max-width:100%}
.connection-messages .connected-sticker>svg{display:block;width:100%;height:auto}

/* Reserve the same space for time and unread status before and after updates. */
.connection-messages .message:not(.shared){grid-template-columns:calc(32px * var(--ui-font-scale,1)) minmax(0,1fr) 80px}
.connection-messages .message.mine:not(.shared){grid-template-columns:80px minmax(0,1fr)}
.connection-messages .message:not(.shared)>.connection-message-meta{width:80px;max-width:80px}
.connection-messages .message.mine:not(.shared)>.connection-message-meta{justify-content:flex-end}