.message-dock { position:fixed; z-index:850; display:flex; flex-direction:column; border:1px solid var(--border); border-radius:13px; background:var(--surface); color:var(--text); box-shadow:0 12px 44px #0003,0 2px 8px #0002; overflow:hidden; }
.message-dock[hidden],.message-nav-launcher[hidden],.message-dock-body[hidden],.message-dock-resize[hidden] { display:none; }
.message-dock-header { flex:0 0 47px; display:flex; align-items:center; gap:5px; padding:5px 9px 5px 15px; background:var(--surface-alt); border-bottom:1px solid var(--border); cursor:move; touch-action:none; user-select:none; }
.message-dock-title { flex:1; min-width:0; display:flex; align-items:center; gap:9px; font-size:14px; }
.message-dock-header .icon-button { width:31px; height:31px; min-height:31px; padding:5px; }
.message-dock-count,.message-launcher-count { display:grid; place-items:center; min-width:21px; height:21px; padding:0 5px; font-size:11px; font-weight:750; border-radius:12px; background:var(--border); color:var(--text); }
.has-unread .message-dock-count,.has-unread .message-launcher-count { background:var(--primary); color:var(--primary-contrast,#fff); }
.message-dock-body { flex:1; min-height:0; overflow:hidden; container-type:inline-size; }
.message-dock .community-messages-layout { height:100%; min-height:0; border:0; border-radius:0; box-shadow:none; display:grid; grid-template-columns:180px minmax(0,1fr); overflow:hidden; margin:0; }
.message-dock .conversation-list { display:block; min-height:0; overflow:auto; padding:0; border-right:1px solid var(--border); border-bottom:0; }
.conversation-items { min-width:0; }
.message-dock .conversation-heading { padding:14px 12px; }
.message-dock .conversation-heading h2 { font-size:17px; }
.message-dock .conversation-row { width:100%; min-width:0; padding:11px 10px; gap:8px; }
.message-dock .conversation-row > span:not(.community-avatar) { min-width:0; }
.message-dock .conversation-row strong,.message-dock .conversation-row small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.message-dock .community-avatar { width:30px; height:30px; flex:none; font-size:12px; }
.message-dock .message-thread-host { min-height:0; overflow:hidden; }
.message-dock .message-thread-header { padding:12px; flex:none; }
.message-dock .message-thread { flex:1; overflow-y:auto; min-height:0; padding:12px; overscroll-behavior:contain; }
.message-dock .direct-message { max-width:95%; font-size:13px; }
.message-dock .direct-message p { font-size:13px; }
.message-dock .conversation-row strong { font-size:12px; }
.message-dock .conversation-row small { font-size:11px; }
.message-dock .message-composer { grid-template-columns:minmax(0,1fr) auto; padding:10px 12px 18px; flex:none; gap:6px; }
.message-dock .message-composer textarea { width:100%; min-height:48px; max-height:110px; padding:9px; resize:none; font-size:14px; }
.message-dock .message-composer .button { padding:9px; min-height:42px; }
.message-dock .message-composer .button span { display:none; }
.message-dock .message-history-controls { flex:none; }
.message-dock .dm-typing-indicator { flex:none; font-size:11px; min-height:18px; padding:0 12px; }
.message-dock-resize { position:absolute; bottom:0; right:0; width:20px; height:20px; display:grid; place-items:center; padding:0; border:0; background:transparent; color:var(--muted); cursor:nwse-resize; touch-action:none; }
.sidebar-messages:empty,.sidebar-messages:has(.message-nav-launcher[hidden]) { display:none; }
.message-nav-launcher { width:100%; border-color:color-mix(in srgb,var(--primary) 38%,var(--border)); background:color-mix(in srgb,var(--primary) 9%,var(--surface-alt)); color:var(--text); text-align:left; margin-bottom:10px; }
.message-nav-launcher:hover { border-color:color-mix(in srgb,var(--primary) 55%,var(--border)); background:color-mix(in srgb,var(--primary) 16%,var(--surface-alt)); }
.message-nav-launcher .message-launcher-count { flex:none; margin-left:auto; }
.message-dock.is-narrow .community-messages-layout { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); }
.message-dock.is-narrow .conversation-list { border-right:0; border-bottom:1px solid var(--border); }
.message-dock.is-narrow .conversation-heading { display:none; }
.message-dock.is-narrow .conversation-items { display:flex; overflow:auto; gap:3px; padding:5px; max-height:75px; }
.message-dock.is-narrow .conversation-row { flex:0 0 140px; }
.message-dock.is-narrow .conversation-row small { display:none; }
.message-dock.is-offline .message-dock-title strong::after { content:' · reconnecting'; font-size:10px; font-weight:400; color:var(--muted); }
@media(max-width:920px){.community-pane .conversation-items{display:flex;overflow-x:auto}.community-messages-layout .conversation-items .conversation-row{flex-shrink:0}}
@media print{.message-dock,.message-nav-launcher{display:none!important}}

/* Friend actions occupy their own view so conversation drafts remain in place. */
.message-dock-friends { display:flex; align-items:center; gap:6px; min-height:32px; padding:5px 8px; font-size:12px; }
.message-dock .message-dock-friends[aria-expanded="true"] { background:color-mix(in srgb,var(--primary) 14%,var(--surface)); color:var(--text); border-color:var(--primary); }
.message-dock .message-dock-friends[aria-expanded="true"]:is(:hover,:focus-visible):not(:disabled) { background:color-mix(in srgb,var(--primary) 22%,var(--surface)); color:var(--text); border-color:var(--primary); }
.message-friends-count,.message-request-badge { display:inline-flex; align-items:center; justify-content:center; gap:3px; min-width:19px; padding:1px 5px; border-radius:12px; background:var(--primary); color:var(--primary-contrast,#fff); font-size:11px; }
.message-dock-friends[aria-expanded="true"] .message-friends-count { background:var(--surface); color:var(--text); }
.message-request-badge { flex:none; }
.message-dock-friends-body { display:flex; flex:1; flex-direction:column; min-height:0; overflow:hidden; }
.message-dock-friends-body[hidden],.message-friends-count[hidden],.message-request-badge[hidden],.message-friends-results[hidden],.message-friends-outgoing[hidden] { display:none; }
.message-friends-scroll { overflow-y:auto; overscroll-behavior:contain; padding:16px; min-height:0; }
.message-friends-scroll h2 { font-size:18px; margin:0 0 12px; }
.message-friends-scroll h3 { font-size:13px; margin:16px 0 7px; }
.message-friends-search label { display:block; font-size:12px; color:var(--muted); margin-bottom:6px; }
.message-friends-search > div { display:flex; gap:8px; }
.message-friends-search input { width:100%; min-width:0; font-size:14px; padding:9px 11px; }
.message-friends-search button { flex:none; padding:8px 10px; }
.message-friends-status { font-size:12px; color:var(--text); margin:10px 0; }
.message-friends-status:empty { display:none; }
.message-friends-status .text-button { font-size:inherit; }
.message-friend-row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:12px 0; border-bottom:1px solid var(--border); }
.message-friend-row:last-child { border-bottom:0; }
.message-friend-name { flex:1; min-width:90px; overflow-wrap:anywhere; display:grid; gap:3px; }
.message-friend-name strong { font-size:13px; }
.message-friend-name small { color:var(--muted); font-size:11px; }
.message-friend-actions { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-left:auto; }
.message-friend-actions .button { min-height:34px; font-size:12px; padding:6px 10px; }
.message-friend-pending { display:inline-flex; align-items:center; gap:5px; color:var(--muted); font-size:11px; }
.message-friends-outgoing { margin-top:14px; border-top:1px solid var(--border); padding-top:12px; }
.message-friends-outgoing summary { font-size:12px; cursor:pointer; }
.message-friends-outgoing summary span { color:var(--muted); }
.message-friends-scroll .subtle-empty { font-size:12px; padding:10px 0; margin:0; }
.message-dock .message-dock-friends > span:not([hidden]) { display:inline-flex; }

/* Composer tools and attachments are shared by the popup and Community Messages. */
.message-composer { position:relative; grid-template-columns:minmax(0,1fr) auto; }
.message-composer textarea { grid-column:1/-1; }
.message-composer-tools { display:flex; align-items:center; gap:4px; grid-column:1; grid-row:3; }
.message-composer-tools .icon-button { width:34px; height:34px; min-height:34px; padding:6px; border:0; box-shadow:none; background:transparent; }
.message-composer-tools .icon-button:hover { background:var(--surface-alt); }
.message-composer [type=submit] { grid-column:2; grid-row:3; }
.message-draft-attachments { display:flex; flex-wrap:wrap; gap:6px; grid-column:1/-1; grid-row:2; max-height:112px; overflow:auto; }
.message-draft-attachments[hidden] { display:none; }
.message-draft-attachment { display:flex; gap:6px; align-items:center; max-width:100%; min-width:0; padding:5px; border:1px solid var(--border); border-radius:7px; background:var(--surface-alt); }
.message-draft-attachment img { width:40px; height:40px; object-fit:cover; border-radius:4px; }
.message-draft-attachment > span { min-width:0; }
.message-draft-attachment strong { display:block; max-width:160px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:12px; }
.message-draft-attachment small { font-size:10px; color:var(--muted); }
.message-draft-attachment .icon-button { border:0; box-shadow:none; width:25px; height:25px; min-height:25px; padding:4px; background:transparent; }
.message-composer-status { grid-column:1/-1; grid-row:4; margin:0; font-size:12px; overflow-wrap:anywhere; }
.message-composer-status:empty { display:none; }
.message-image { display:block; margin:4px 0; max-width:300px; }
.message-image img { display:block; max-width:100%; width:auto; max-height:240px; height:auto; border-radius:8px; object-fit:contain; }
.message-material { display:flex; align-items:center; gap:10px; padding:10px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); text-decoration:none; max-width:320px; }
.message-material span { min-width:0; overflow-wrap:anywhere; }
.message-material small { display:block; color:var(--muted); font-size:11px; }
.message-material svg { flex:none; }
.direct-message p { overflow-wrap:anywhere; }

.emoji-popover { position:fixed; z-index:860; display:flex; flex-direction:column; width:328px; height:370px; max-width:calc(100vw - 16px); padding:12px; border:1px solid var(--border); border-radius:12px; background:var(--surface); color:var(--text); box-shadow:0 5px 20px #0003; }
.message-dock > .emoji-popover,.modal > .emoji-popover { position:absolute; z-index:5; }
.emoji-popover::after { content:''; position:absolute; left:var(--emoji-pointer,20px); bottom:-5px; width:8px; height:8px; background:var(--surface); border-right:1px solid var(--border); border-bottom:1px solid var(--border); transform:rotate(45deg); }
.emoji-popover[data-placement="below"]::after { top:-5px; bottom:auto; transform:rotate(225deg); }
.emoji-picker-header { flex:none; display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
.emoji-picker-header strong { font-size:14px; }
.emoji-picker-header .icon-button { border:0; box-shadow:none; background:transparent; width:26px; min-height:26px; height:26px; padding:4px; }
.emoji-picker { display:flex; flex:1; min-height:0; flex-direction:column; gap:8px; }
.emoji-picker .field { margin:0; }
.emoji-picker input,.emoji-picker select { width:100%; font-size:13px; padding:8px 10px; }
.emoji-picker .field > span { font-size:12px; }
.message-composer-tools .message-emoji[aria-expanded="true"],.group-emoji[aria-expanded="true"],.board-note-emoji[aria-expanded="true"] { background:var(--surface-alt); color:var(--text); outline:1px solid var(--primary); outline-offset:-1px; }
.emoji-picker-filters { display:flex; gap:8px; }
.emoji-picker-filters select { min-width:0; flex:1; }
.emoji-results { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
.emoji-results h3 { font-size:12px; margin:14px 0 7px; color:var(--muted); }
.emoji-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(38px,1fr)); gap:3px; }
.emoji-grid button { font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif; font-size:24px; height:40px; padding:3px; border:0; border-radius:6px; background:transparent; box-shadow:none; cursor:pointer; }
.emoji-grid button:hover,.emoji-grid button:focus-visible { background:var(--surface-alt); outline:2px solid var(--primary); outline-offset:-2px; }
.board-note-emoji svg { width:15px; height:15px; }

.group-composer-tools { display:flex; align-items:center; gap:6px; flex-wrap:wrap; grid-column:1/-1; }
.group-composer-tools .icon-button { border:0; box-shadow:none; background:transparent; }
.group-composer-tools small { color:var(--muted); font-size:11px; }
.group-composer-tools .message-draft-attachments,.group-composer-tools .message-composer-status { flex-basis:100%; }

/* Keep the call action alongside the selected friend's identity at every window size. */
.message-thread-header > div { flex: 1; min-width: 0; }
.message-thread-header > div strong, .message-thread-header > div small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-thread-header .message-call { margin-left: auto; flex-shrink: 0; min-height: 36px; }