/* Shared site palette for the full chat and drawer. */
.messages-page .content{padding-bottom:12px}
.messages-page .page-head{margin-bottom:18px}
.messages-page .page-head h1{font-size:25px;letter-spacing:-.6px}
.messages-page .page-head p{display:none}
.messages-page .footer{display:none}
.messages-page .msg{grid-template-columns:300px minmax(0,1fr);gap:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--bg-elev)}
.messages-page .msg-side,.messages-page .msg-main{min-width:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.messages-page .msg-side{padding:16px 10px 10px;border-right:1px solid var(--line);gap:12px;background:var(--surface)}
.msg-search{margin:0 4px}
.msg-search svg{position:absolute;left:12px;top:13px;width:18px;height:18px;color:var(--text-3);pointer-events:none}
.msg-search .input{padding-left:38px;font-size:13px;border-radius:10px;min-height:44px;background:var(--bg-elev)}
.messages-page .msg-list{margin:0;padding:0;scrollbar-width:thin}
.messages-page .msg-row{min-height:70px;padding:11px 10px;gap:11px;border-radius:11px}
.messages-page .msg-row.active{background:var(--surface-3);border-color:var(--surface-2);box-shadow:inset 3px 0 var(--accent)}
.messages-page .msg-row:hover:not(.active){background:var(--surface-2)}
.messages-page .msg-row .ava{width:40px;height:40px;font-size:12px;color:var(--text-2);background:var(--surface-3)}
.messages-page .msg-row b{font-size:14px;line-height:1.45}
.messages-page .msg-row small{margin-top:4px;line-height:1.4;font-size:12px;color:var(--text-2)}
.msg-row-aside{align-self:stretch;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:7px;flex:none}
.msg-row time{font-size:10px;color:var(--text-3);font-variant-numeric:tabular-nums}
.messages-page .msg-row .badge-new{background:var(--accent);color:var(--bg);font-size:10px;min-width:19px;line-height:17px;padding:0 5px}
.messages-page .msg-row.has-unread b,.messages-page .msg-row.has-unread small{color:var(--text)}
.messages-page .msg-section{margin:17px 10px 5px;font-size:10px;letter-spacing:.07em;color:var(--text-3)}
.messages-page .msg-head{flex:none;min-height:76px;padding:16px 24px;background:var(--surface);border-bottom:1px solid var(--line)}
.msg-head-title{min-width:0}
.messages-page .msg-head b{font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.messages-page .msg-head small{font-size:12px;margin-top:3px}
.messages-page .msg-row .ava.msg-public-mark,.messages-page .msg-head .ava.msg-public-mark{border-radius:50%;background:var(--surface-3);box-shadow:none}
.messages-page .ava.msg-public-mark img{display:block;width:25px;height:25px;object-fit:contain}
.messages-page .msg-head .ava{background:var(--surface-3);color:var(--text-2)}
.msg-thread-stage{display:flex;flex:1;min-height:0;flex-direction:column;position:relative}
:is(.messages-page .thread,.cp .cp-list){padding:8px clamp(16px,3vw,40px) 24px;scrollbar-width:thin;overflow-anchor:none}
:is(.messages-page .thread,.cp .cp-list) .cp-msg{max-width:min(86%,640px);gap:10px;margin-top:20px;flex:none}
:is(.messages-page .thread,.cp .cp-list) .cp-msg.tail{margin-top:5px}
:is(.messages-page .thread,.cp .cp-list) .cp-bubble{padding:11px 15px 7px;background:var(--surface-2);border-color:transparent;border-radius:14px 14px 14px 5px;box-shadow:0 1px 1px #0001}
:is(.messages-page .thread,.cp .cp-list) .cp-msg.mine .cp-bubble{background:var(--surface-3);border-color:var(--line);border-radius:14px 14px 5px 14px}
:is(.messages-page .thread,.cp .cp-list) .cp-msg.more .cp-bubble{border-bottom-left-radius:7px}
:is(.messages-page .thread,.cp .cp-list) .cp-msg.mine.more .cp-bubble{border-bottom-left-radius:14px;border-bottom-right-radius:7px}
:is(.messages-page .thread,.cp .cp-list) .cp-body{font-size:16px;line-height:1.55;color:var(--text)}
:is(.messages-page .thread,.cp .cp-list) .chat-ava{align-self:flex-start;margin-top:3px;width:32px;height:32px;font-size:11px;background:var(--surface-3);color:var(--text-2)}
:is(.messages-page .thread,.cp .cp-list) .cp-msg.more .chat-ava{visibility:visible}
:is(.messages-page .thread,.cp .cp-list) .cp-msg.tail .chat-ava{visibility:hidden}
:is(.messages-page,.cp) .cp-author{margin-bottom:6px;gap:7px}
:is(.messages-page,.cp) .cp-from{font-size:13px;font-weight:650}
:is(.messages-page,.cp) .cp-team{border:0;background:transparent;padding:0;color:var(--text-2);font-size:11px}
:is(.messages-page,.cp) .cp-team::before{content:'·';margin-right:7px}
:is(.messages-page,.cp) .cp-meta{min-height:22px;margin-top:3px;font-size:10px;color:var(--text-2);gap:5px}
:is(.messages-page,.cp) .cp-reply,:is(.messages-page,.cp) .cp-more{height:25px;width:28px;color:var(--text-2)}
:is(.messages-page,.cp) .cp-reply svg{width:16px;height:16px}
:is(.messages-page,.cp) .cp-day{margin:20px 0 2px;color:var(--text-2);font-size:11px;font-weight:500;text-transform:none;letter-spacing:0}
:is(.messages-page,.cp) .cp-day:first-child{margin-top:8px}
:is(.messages-page,.cp) .cp-quote{color:var(--text-2);border-left:2px solid var(--accent-line);background:var(--bg-elev);padding:8px 10px}
:is(.messages-page,.cp) .cp-quote span{font-size:13px}
:is(.messages-page,.cp) .cp-quote b{color:var(--accent-hover)}
:is(.messages-page,.cp) .cp-quote:hover{background:var(--surface)}
:is(.messages-page,.cp) .chat-file.doc{width:300px;max-width:100%;padding:11px 12px;border:1px solid var(--line);background:var(--surface);border-radius:9px}
:is(.messages-page,.cp) .chat-file.doc>span{min-width:0}
:is(.messages-page,.cp) .chat-file.doc b{font-size:13px;font-weight:500}
:is(.messages-page,.cp) .chat-file.doc small{font-size:11px;color:var(--text-2)}
:is(.messages-page,.cp) .chat-file.doc i{width:34px;height:40px;background:var(--surface-3);color:var(--text-2)}
:is(.messages-page .thread,.cp .cp-list) .cp-msg:has(.chat-poll){width:400px;max-width:86%}
:is(.messages-page .thread,.cp .cp-list) .chat-poll{width:100%}
:is(.messages-page,.cp) .chat-poll h3{font-size:16px;margin:10px 0 12px}
:is(.messages-page,.cp) .chat-poll-option{min-height:43px;border-color:var(--line-strong);border-radius:8px}
:is(.messages-page,.cp) .chat-poll-option-text{font-size:14px}
:is(.messages-page,.cp) .chat-poll-info{margin-bottom:4px}
:is(.messages-page .thread,.cp .cp-list):focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.chat-latest{position:absolute;right:20px;bottom:12px;display:flex;align-items:center;gap:8px;min-height:40px;padding:9px 14px;border:1px solid var(--line-strong);border-radius:24px;background:var(--surface-3);color:var(--text);box-shadow:0 4px 18px #0005;font:600 12px/1.2 var(--font);cursor:pointer;z-index:2}
.chat-latest[hidden]{display:none}
.chat-latest svg{width:16px;height:16px}
.chat-latest:hover{background:var(--surface-2)}
.messages-page .msg-form{flex:none;margin:0 16px 16px;padding:7px 8px;gap:4px;align-items:flex-end;border:1px solid var(--line-strong);border-radius:13px;background:var(--surface-2)}
.messages-page .msg-form:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.messages-page .msg-form .input{background:transparent;border:0;box-shadow:none;outline:none;padding:11px 9px;font-size:15px;line-height:22px;resize:none}
.messages-page .msg-form .chat-tool{background:transparent;border:0;box-shadow:none;color:var(--text-2);border-radius:8px}
.messages-page .msg-form .chat-tool:hover{background:var(--surface-3);color:var(--text)}
.messages-page .msg-form .msg-send{border-radius:9px;background:var(--accent);color:var(--bg);border:0;box-shadow:none;width:42px;height:42px;min-height:42px;margin:1px}
.messages-page .msg-form .msg-send svg{width:20px;height:20px}
:is(.messages-page,.cp) .cp-reply-draft{margin:0 16px 8px;border:0;border-radius:10px;background:var(--surface-2);color:var(--text-2)}
:is(.messages-page,.cp) .cp-reply-draft b{color:var(--text)}
:is(.messages-page,.cp) .cp-reply-draft span:not(.cp-reply-mark),:is(.messages-page,.cp) .cp-reply-draft button{color:var(--text-2)}
.messages-page .chat-pending,:is(.messages-page,.cp) .chat-poll-draft{margin:0 16px 8px}
.messages-page .msg-head .msg-back{width:36px;height:36px;padding:0;font-size:20px;margin-left:0;flex:none}
@media(hover:hover) and (pointer:fine){
  :is(.messages-page,.cp) .cp-reply,:is(.messages-page,.cp) .cp-more{opacity:.35;transition:opacity .12s,background .12s}
  :is(.messages-page,.cp) .cp-msg:hover .cp-reply,:is(.messages-page,.cp) .cp-msg:hover .cp-more,:is(.messages-page,.cp) .cp-msg:focus-within .cp-reply,:is(.messages-page,.cp) .cp-msg:focus-within .cp-more{opacity:1}
}
@media(max-width:1100px) and (min-width:901px){.messages-page .msg{grid-template-columns:260px minmax(0,1fr)}:is(.messages-page .thread,.cp .cp-list){padding-inline:16px}:is(.messages-page .thread,.cp .cp-list) .cp-msg{max-width:94%}}
@media(max-width:900px){
  .messages-page .msg{grid-template-columns:minmax(0,1fr)}
  .messages-page .msg-side{border-right:0}
  .messages-page .msg-head{padding:12px 14px;gap:10px;min-height:66px}
  .messages-page .page-head{margin-bottom:12px}
}
@media(min-width:901px){.messages-page .msg-side[hidden],.messages-page .msg-main[hidden]{display:flex}}
@media(max-width:600px){
  .messages-page .page-head{display:none}
  .messages-page .content{padding-top:10px}
  .messages-page .msg{border-radius:13px}
  :is(.messages-page .thread,.cp .cp-list){padding:6px 11px 18px}
  :is(.messages-page .thread,.cp .cp-list) .cp-msg{max-width:96%;gap:7px;margin-top:17px}
  :is(.messages-page .thread,.cp .cp-list) .cp-body{font-size:15px;line-height:1.55}
  :is(.messages-page .thread,.cp .cp-list) .cp-bubble{padding:9px 11px 6px}
  :is(.messages-page .thread,.cp .cp-list) .chat-ava{width:26px;height:26px;font-size:9px}
  :is(.messages-page .thread,.cp .cp-list) .cp-msg:has(.chat-poll){max-width:96%}
  :is(.messages-page,.cp) .cp-reply,:is(.messages-page,.cp) .cp-more{width:36px;height:32px}
  :is(.messages-page,.cp) .cp-reply svg{width:18px;height:18px}
  .messages-page .msg-head-actions{gap:3px}
  .messages-page .msg-head-actions .btn{font-size:11px;padding:6px 8px;min-height:36px}
  .messages-page .msg-head-actions .friend-btn{font-size:0;gap:0;width:34px;justify-content:center}
  .messages-page .msg-form{display:grid;grid-template-columns:40px 40px 40px 1fr 40px;gap:0;margin:0 9px 9px;padding:4px 6px}
  .messages-page .msg-form .input{grid-row:1;grid-column:1/-1;padding:9px 7px;font-size:16px;max-height:110px}
  .messages-page .msg-form .chat-tool{grid-row:2;width:40px;height:38px}
  .messages-page .msg-form .msg-send{grid-row:2;grid-column:5;width:36px;height:36px;min-height:36px;justify-self:end}
  :is(.messages-page,.cp) .cp-reply-draft,.messages-page .chat-pending,:is(.messages-page,.cp) .chat-poll-draft{margin-inline:9px}
}

/* The drawer uses the same message styles as the full chat above. */
.cp{background:var(--bg-elev);border-left-color:var(--line-strong)}
.cp .cp-head{padding:14px 18px;gap:10px;background:var(--surface);border-bottom-color:var(--line);flex:none}
.cp .cp-title b{font-size:16px;line-height:1.45}
.cp .cp-title small{font-size:12px;color:var(--text-2);margin-top:3px}
.cp .cp-title small.live{color:var(--win)}
.cp .cp-title small.warn{color:var(--loss)}
.cp .cp-dialogs{background:var(--surface)}
.cp .cp-search-row{padding:16px 18px 8px}
.cp .cp-search{min-height:44px;border-radius:10px;background:var(--bg-elev);font-size:13px}
.cp .cp-rows{padding:0 10px 16px;scrollbar-width:thin;overscroll-behavior:contain}
.cp .cp-row{min-height:70px;padding:11px 10px;gap:12px;border-radius:11px}
.cp .cp-row:hover{background:var(--surface-2)}
.cp .cp-row[data-channel=public]{background:var(--surface-3);box-shadow:inset 3px 0 var(--accent);margin-bottom:6px}
.cp .cp-row .chat-ava,.cp .cp-general{width:40px;height:40px;font-size:12px;color:var(--text-2);background:var(--surface-3)}
.cp .cp-row-main b{font-size:14px;line-height:1.45}
.cp .cp-row-main small{margin-top:4px;line-height:1.4;font-size:12px;color:var(--text-2)}
.cp .cp-row.has-unread b,.cp .cp-row.has-unread small{color:var(--text)}
.cp .cp-unread{background:var(--accent);color:var(--bg);font-size:10px;min-width:19px;line-height:17px;padding:0 5px}
.cp .cp-section{margin:17px 10px 5px;font-size:10px;letter-spacing:.07em;color:var(--text-3)}
.cp .cp-list{overscroll-behavior:contain}
.cp .cp-list .cp-msg{max-width:min(94%,640px)}
.cp .cp-list .cp-msg:has(.chat-poll){max-width:96%}
.cp .cp-form{flex:none;margin:0 14px max(14px,env(safe-area-inset-bottom));padding:7px 8px;gap:4px;align-items:flex-end;border:1px solid var(--line-strong);border-radius:13px;background:var(--surface-2)}
.cp .cp-form:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.cp .cp-form .input{background:transparent;border:0;box-shadow:none;outline:none;padding:11px 9px;font-size:15px;line-height:22px;resize:none;border-radius:8px}
.cp .cp-form .chat-tool{background:transparent;border:0;box-shadow:none;color:var(--text-2);border-radius:8px}
.cp .cp-form .chat-tool:hover{background:var(--surface-3);color:var(--text)}
.cp .cp-send{border-radius:9px;background:var(--accent);color:var(--bg);width:42px;height:42px;margin:1px}
@container chat-panel (max-width:540px){
  .cp .cp-list{padding:8px 14px 20px}
  .cp .cp-list .cp-msg{max-width:96%;gap:8px}
  .cp .cp-list .cp-body{font-size:15px}
  .cp .cp-form{display:grid;grid-template-columns:40px 40px 40px 1fr 40px;gap:0;padding:4px 6px}
  .cp .cp-form[hidden]{display:none}
  .cp .cp-form .input{grid-row:1;grid-column:1/-1;padding:9px 7px;font-size:16px;max-height:110px}
  .cp .cp-form .chat-tool{grid-row:2;width:40px;height:38px}
  .cp .cp-form .cp-send{grid-row:2;grid-column:5;width:36px;height:36px;justify-self:end}
}
.cp .chat-ava .cp-community-mark{width:25px;height:25px;object-fit:contain}

/* Messenger refinement: readable neutral layers and compact conversation rhythm. */
.messages-page .page-head{display:none}
.messages-page .content{padding-top:18px}
.messages-page .msg{border-color:#353c47;border-radius:15px;background:#14171c}
.messages-page .msg-list-title{margin:0 10px 3px;font-size:21px;font-weight:700;letter-spacing:-.5px}
.messages-page .msg-side{background:#1b1f25;padding-top:20px}
.messages-page .msg-row{min-height:68px}
.messages-page .msg-row.active,.cp .cp-row[data-channel=public]{background:#2c333d;box-shadow:inset 3px 0 var(--accent)}
.messages-page .msg-row:hover:not(.active),.cp .cp-row:hover{background:#262c34}
.messages-page .msg-row .ava,.cp .cp-row .chat-ava,.cp .cp-general{background:#303741;color:#d1d7df}
.messages-page .msg-head,.cp .cp-head{min-height:66px;padding:12px 20px;background:#1e232a;border-color:#353c47}
.messages-page .msg-head-title{flex:1}
.messages-page .msg-head b,.cp .cp-title b{font-size:16px}
.messages-page .msg-head .ava,.cp .cp-who .chat-ava{width:36px;height:36px}
.messages-page .msg-head .cp-icon,.cp .cp-search-messages{color:#c0c8d3}
.cp{background:#14171c;border-left-color:#46505e;box-shadow:-18px 0 60px #0008}
.cp .cp-dialogs{background:#1b1f25}
.cp .cp-head{gap:10px;flex-wrap:nowrap}
.cp .cp-open-page{flex:0 0 auto;order:0;min-height:36px;padding:7px 10px;font-size:11px;gap:7px;background:#292f38;border-color:#46505e;white-space:nowrap}
.cp .cp-title{flex:1;min-width:60px}
.cp .cp-head>.cp-icon{width:32px;height:36px}
@container chat-panel (max-width:420px){
  .cp .cp-head{padding:10px 12px;gap:6px;flex-wrap:wrap}
  .cp .cp-open-page{order:6;flex:1 0 100%;min-height:32px;padding-block:5px}
}
:is(.messages-page .thread,.cp .cp-list){padding:10px clamp(14px,2.5vw,30px) 20px;background:#14171c}
:is(.messages-page .thread,.cp .cp-list) .cp-msg{margin-top:14px;gap:10px;max-width:min(90%,680px);align-items:flex-start}
:is(.messages-page .thread,.cp .cp-list) .cp-msg.tail{margin-top:4px}
:is(.messages-page .thread,.cp .cp-list) .cp-bubble{padding:10px 13px 6px;background:#252b33;border:1px solid #353d49;border-radius:13px 13px 13px 4px;box-shadow:0 1px 2px #0002}
:is(.messages-page .thread,.cp .cp-list) .cp-msg.mine .cp-bubble{background:#303943;border-color:#475565;border-radius:13px 13px 4px 13px}
:is(.messages-page .thread,.cp .cp-list) .cp-body{color:#f0f2f5;font-size:16px;line-height:1.5}
:is(.messages-page .thread,.cp .cp-list) .chat-ava{width:32px;height:32px;margin-top:2px}
:is(.messages-page,.cp) .cp-author{margin-bottom:4px;gap:5px 7px}
:is(.messages-page,.cp) .cp-from{font-size:14px;color:#a9c8f4;line-height:1.4}
:is(.messages-page,.cp) .cp-team{font-size:11px;color:#b1bac5;line-height:1.4}
:is(.messages-page,.cp) .cp-team::before{margin-right:6px}
:is(.messages-page,.cp) .cp-meta{font-size:11px;color:#b0bac7;min-height:24px;margin-top:3px;gap:4px;white-space:nowrap}
:is(.messages-page,.cp) .cp-meta>span:first-of-type{margin-right:3px}
:is(.messages-page,.cp) .cp-reply,:is(.messages-page,.cp) .cp-more{width:28px;height:28px;opacity:1;color:#c3cedc}
:is(.messages-page,.cp) .cp-more{opacity:.7}
:is(.messages-page,.cp) .cp-reply svg{width:18px;height:18px}
:is(.messages-page,.cp) .cp-reply:hover,:is(.messages-page,.cp) .cp-more:hover{background:#ffffff10;color:#fff}
:is(.messages-page .thread,.cp .cp-list) .cp-compact .cp-bubble{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:12px;padding-top:9px;padding-bottom:7px}
:is(.messages-page .thread,.cp .cp-list) .cp-compact .cp-author{grid-column:1/-1}
:is(.messages-page .thread,.cp .cp-list) .cp-compact .cp-body{grid-column:1}
:is(.messages-page .thread,.cp .cp-list) .cp-compact .cp-meta{grid-column:2;margin:0;min-height:24px}
:is(.messages-page .thread,.cp .cp-list) .cp-compact .mx-reactions{grid-column:1/-1}
:is(.messages-page,.cp) .cp-day{margin:18px 0 3px;color:#aab3bf;font-size:11px}
:is(.messages-page,.cp) .chat-unread-divider{margin:14px 0 5px}
:is(.messages-page,.cp) .cp-quote{background:#171d25;border-left-color:#88afe4;border-radius:4px 7px 7px 4px;padding:7px 9px;color:#c3cbd6}
:is(.messages-page,.cp) .cp-quote:hover{background:#1d2530}
:is(.messages-page,.cp) .cp-quote span{-webkit-line-clamp:2;font-size:13px;line-height:1.4}
:is(.messages-page,.cp) .chat-file.doc{background:#1c222a;border-color:#48525f}
:is(.messages-page,.cp) .chat-poll-option{background:#1c2128;border-color:#4b5563}
:is(.messages-page,.cp) .chat-poll-option.is-selected{background:#303b49;border-color:#8bb6f2}
:is(.messages-page,.cp) .chat-poll-info{margin:8px 0 4px}
:is(.messages-page,.cp) .chat-poll-actions{margin-top:8px;gap:10px}
:is(.messages-page,.cp) .chat-poll-close{margin-top:6px}
:is(.messages-page,.cp) .cp-reply-draft{background:#242c36;border:1px solid #46505e;margin-bottom:6px}
.messages-page .msg-form,.cp .cp-form{display:flex;align-items:flex-end;gap:3px;padding:6px 7px;margin:0 14px 14px;border:1px solid #505c6d;border-radius:12px;background:#292f38;box-shadow:0 3px 12px #0002}
.messages-page .msg-form .input,.cp .cp-form .input{order:2;flex:1;min-width:0;width:0;min-height:44px;max-height:132px;padding:11px 8px;font-size:16px;line-height:22px;color:#f0f2f5;background:transparent}
.messages-page .msg-form .input::placeholder,.cp .cp-form .input::placeholder{color:#abb4c0}
.messages-page .msg-form .chat-tool,.cp .cp-form .chat-tool{width:34px;height:44px;min-height:44px;flex:none;padding:8px;color:#c0c9d6}
.messages-page .msg-form label.chat-tool,.cp .cp-form label.chat-tool{order:1}
.messages-page .msg-form #emoji,.cp .cp-form .cp-emoji{order:3}
.messages-page .msg-form #createPoll,.cp .cp-form .cp-poll{order:4}
.messages-page .msg-form .msg-send,.cp .cp-form .cp-send{order:5;flex:none;width:40px;height:40px;min-height:40px;margin:2px;border-radius:9px;background:#80aef0;color:#11213a}
.messages-page .msg-form:focus-within,.cp .cp-form:focus-within{border-color:#8bb6f2;box-shadow:0 0 0 2px #5d95ec18}

/* Reactions stay beside the message instead of creating an empty footer. */
.mx-reactions{display:flex;flex-wrap:wrap;gap:5px;margin:5px 0 3px}
.mx-reaction{display:inline-flex;align-items:center;gap:5px;min-width:38px;min-height:29px;padding:3px 8px;border:1px solid #4e5968;border-radius:9px;background:#1d242c;color:#e6eaf0;font:600 12px/1.25 var(--font);cursor:pointer}
.mx-reaction[aria-pressed=true]{border-color:#8db8f0;background:#344960;color:#edf5ff}
.mx-reaction:hover{border-color:#9cb2cb}
.mx-react-add{display:grid;place-items:center;width:28px;height:28px;padding:5px;border:0;border-radius:6px;background:transparent;color:#b7c4d4;cursor:pointer}
.mx-react-add svg{display:block;width:18px;height:18px}
.mx-react-add:hover,.mx-react-add[aria-expanded=true]{background:#ffffff10;color:#fff}
.mx-reaction-picker{position:fixed;inset:auto;z-index:2002;display:flex;align-items:center;gap:3px;width:max-content;max-width:calc(100vw - 16px);padding:6px;border:1px solid #566273;border-radius:14px;background:#2b333e;color:#fff;box-shadow:0 6px 26px #0006}
.mx-reaction-picker[hidden]{display:none}
.mx-reaction-picker button{display:grid;place-items:center;flex:none;width:38px;height:38px;padding:0;border:0;border-radius:9px;background:transparent;font:23px/1 var(--font);cursor:pointer}
.mx-reaction-picker button:hover,.mx-reaction-picker button[aria-pressed=true]{background:#ffffff15}
.mx-reaction:focus-visible,.mx-react-add:focus-visible,.mx-reaction-picker button:focus-visible{outline:2px solid var(--accent-hover);outline-offset:2px}
.mx-reaction:disabled,.mx-react-add:disabled{opacity:.6;cursor:wait}

/* Search is scoped to the open conversation; history opens in the same thread. */
.mx-search{flex:none;min-width:0;padding:12px 16px;border-bottom:1px solid #414b58;background:#20262e}
.mx-search[hidden]{display:none}
.mx-search-form{display:flex;gap:8px;align-items:center}
.mx-search-input{flex:1;min-width:0;min-height:40px;padding:9px 12px;border:1px solid #566273;border-radius:8px;background:#141a21;color:#eef2f7;font:14px/1.4 var(--font);outline:none}
.mx-search-input:focus{border-color:#8bb6f2}
.mx-search-input::placeholder{color:#a6b1bf}
.mx-search-close{display:grid;place-items:center;width:36px;height:40px;flex:none;padding:0;border:0;border-radius:8px;background:transparent;color:#c4cfdd;font:24px/1 var(--font);cursor:pointer}
.mx-search-close:hover{background:#ffffff0a}
.mx-search-status{color:#b2bece;font-size:12px;padding-top:9px}
.mx-search-status:empty{display:none}
.mx-search-results{max-height:min(32dvh,300px);overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:5px;padding-top:8px}
.mx-search-results:empty{display:none}
.mx-search-result{display:block;width:100%;padding:10px 12px;border:1px solid #434e5d;border-radius:9px;text-align:left;background:#29323d;color:#f0f2f5;font:14px/1.45 var(--font);cursor:pointer}
.mx-search-result:hover{border-color:#86a9d6;background:#303c4b}
.mx-search-result-meta{display:flex;justify-content:space-between;gap:10px;margin-bottom:4px;font-size:11px;color:#aabed8}
.mx-search-result-meta b{font-size:12px;color:#b7d2f7}
.mx-search-result-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;white-space:pre-wrap}
.mx-search-result mark{padding:0 1px;background:#c0a46040;color:#fff0be;border-radius:2px}
.mx-search-more{align-self:center;min-height:36px;padding:7px 14px;border:1px solid #566273;border-radius:8px;background:#2b3542;color:#d6e3f5;font:12px var(--font);cursor:pointer}
@media(max-width:900px){
  .messages-page .content{padding-top:12px}
  .messages-page .msg-head{padding:10px 14px;min-height:62px}
  .messages-page .msg-list-title{margin-bottom:6px}
}
@media(max-width:600px){
  .messages-page:has(#board:not([hidden]) #main:not([hidden])) .sidebar,
  .messages-page:has(#board:not([hidden]) #main:not([hidden])) .topbar{display:none}
  .messages-page:has(#board:not([hidden]) #main:not([hidden])) .content{padding:0}
  .messages-page:has(#board:not([hidden]) #main:not([hidden])) .msg{border:0;border-radius:0}
  .messages-page .msg-head{padding:10px 12px;min-height:62px;gap:9px}
  :is(.messages-page .thread,.cp .cp-list){padding:6px 12px 16px}
  :is(.messages-page .thread,.cp .cp-list) .cp-msg{max-width:100%;gap:7px;margin-top:12px}
  :is(.messages-page .thread,.cp .cp-list) .cp-body{font-size:16px;line-height:1.48}
  :is(.messages-page .thread,.cp .cp-list) .chat-ava{width:28px;height:28px;font-size:10px}
  :is(.messages-page,.cp) .cp-from{font-size:13px}
  :is(.messages-page,.cp) .cp-meta{font-size:11px;gap:2px}
  :is(.messages-page,.cp) .cp-reply,:is(.messages-page,.cp) .cp-more,.mx-react-add{width:30px;height:30px}
  :is(.messages-page .thread,.cp .cp-list) .cp-bubble{padding:9px 11px 5px}
  :is(.messages-page .thread,.cp .cp-list) .cp-compact .cp-bubble{column-gap:8px}
  :is(.messages-page .thread,.cp .cp-list) .cp-msg:has(.chat-poll){max-width:100%}
  .messages-page .msg-form,.cp .cp-form{display:flex;gap:0;margin:0 8px max(8px,env(safe-area-inset-bottom));padding:4px 5px}
  .messages-page .msg-form .chat-tool,.cp .cp-form .chat-tool{width:32px;height:42px;min-height:42px;padding:7px}
  .messages-page .msg-form .input,.cp .cp-form .input{padding:10px 6px;min-height:42px;max-height:120px}
  .messages-page .msg-form .msg-send,.cp .cp-form .cp-send{width:36px;height:36px;min-height:36px;margin:3px}
  .mx-search{padding:10px 12px}
  .mx-search-input{font-size:16px}
  .mx-reaction-picker button{width:40px;height:40px}
}