/* Mobile Chats palette and density, with a two-pane desktop workspace. */
/* Only the conversation/list scroll; the header and composer stay in view. */
body.on-chats { overflow:hidden; }
body.on-chats .main-wrap { position:fixed; top:var(--header-h); bottom:0; left:var(--sidebar-w); right:0; max-width:none; min-height:0; margin:0; padding:12px 16px; }
body.on-chats #messagesPage { height:100%; min-height:0; }
body.on-chats #dmFloatingRoot { display:none; }
#messagesPage { --chat-bg:#f7f6fb; --chat-bar:#fbfafe; --chat-surface:#eceaf4; --chat-border:#e4e1f0; --chat-ink:#17173a; --chat-soft:#55547a; --chat-muted:#8b8aa3; --chat-purple:var(--accent-primary); color:var(--chat-ink); }
#messagesPage [hidden] { display:none !important; }
#messagesPage button { font-family:inherit; }
#messagesPage button:focus-visible { outline:2px solid var(--chat-purple); outline-offset:2px; }
#messagesPage .dm-shell { height:100%; min-height:0; border:1px solid var(--chat-border); border-radius:18px; background:var(--chat-bg); overflow:hidden; box-shadow:none; }
#messagesPage .dm-sidebar { width:340px; min-width:300px; max-width:40%; background:var(--chat-bg); border-right:1px solid var(--chat-border); }
#messagesPage .dm-sidebar-header { padding:16px 16px 10px; gap:10px; border:0; }
#messagesPage .dm-sidebar-header h2 { flex:1; margin:0; font-size:26px; font-weight:800; letter-spacing:-.6px; background:none; -webkit-text-fill-color:currentColor; color:var(--chat-ink); }
#messagesPage .dm-sidebar-actions { gap:6px; }
#messagesPage :is(.dm-new-btn,.chats-self-avatar) { padding:0; width:34px; height:34px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:50%; color:var(--chat-ink); background:var(--chat-surface); box-shadow:none; }
#messagesPage .dm-new-btn:hover { background:#e0daf2; transform:none; }
#messagesPage .dm-new-btn[aria-pressed=true] { color:var(--chat-purple); background:var(--accent-soft); }
.chats-avatar { width:var(--avatar-size,52px); height:var(--avatar-size,52px); border-radius:50%; display:inline-flex; align-items:center; justify-content:center; flex:none; overflow:hidden; background:var(--avatar-color,#7c5ce6); color:#fff; font-weight:700; font-size:16px; }
.chats-avatar img { width:100%; height:100%; object-fit:cover; }
#messagesPage .dm-search-wrap { margin:0 16px 12px; padding:0; }
#messagesPage #dmSearchInput { width:100%; height:40px; border:0; border-radius:18px; background:var(--chat-surface); color:var(--chat-ink); padding:0 14px 0 38px; font-size:14px; box-shadow:none; }
#messagesPage #dmSearchInput::placeholder { color:var(--chat-muted); }
#messagesPage .dm-search-icon { left:13px; color:var(--chat-muted); }
.chats-contacts { display:flex; flex:none; overflow-x:auto; gap:12px; padding:2px 16px 16px; scrollbar-width:none; }
.chats-contacts::-webkit-scrollbar { display:none; }
.chats-contact { border:0; background:none; color:var(--chat-soft); display:flex; flex-direction:column; align-items:center; gap:7px; width:56px; padding:0; flex:none; }
.chats-contact>span:last-child { max-width:62px; font-size:11px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.chats-self .chats-avatar { background:linear-gradient(135deg,var(--accent-primary),var(--accent-light)); }
#messagesPage .dm-conv-list { padding:0 6px; overscroll-behavior:contain; scrollbar-width:thin; }
#messagesPage .dm-conv-item { gap:12px; padding:10px; border-radius:12px; border:0; margin:0 0 2px; min-height:74px; background:transparent; color:var(--chat-ink); }
#messagesPage .dm-conv-item:hover { background:var(--chat-surface); }
#messagesPage .dm-conv-item.active { background:var(--accent-soft); border:0; }
#messagesPage .dm-conv-avatar { width:52px; height:52px; flex:none; background:var(--chat-surface); color:var(--chat-purple); border:0; }
#messagesPage .dm-conv-avatar img { object-fit:cover; }
#messagesPage .dm-conv-name { font-size:15px; font-weight:600; color:var(--chat-ink); }
#messagesPage .has-unread .dm-conv-name { font-weight:800; }
#messagesPage .dm-conv-row { margin-bottom:4px; }
.chats-preview-line { display:flex; align-items:baseline; min-width:0; gap:4px; }
#messagesPage .dm-conv-preview { color:var(--chat-muted); min-width:0; font-size:13px; line-height:18px; }
#messagesPage .has-unread .dm-conv-preview { color:var(--chat-soft); font-weight:600; }
#messagesPage .dm-conv-time { flex:none; font-size:12px; color:var(--chat-muted); }
#messagesPage .dm-conv-unread { background:var(--chat-purple); min-width:20px; height:20px; font-size:11px; box-shadow:none; }
.chats-archive { border:0; background:none; display:flex; align-items:center; gap:10px; padding:14px 22px; color:var(--chat-soft); font-size:13px; flex:none; }
.chats-bottom-nav { display:flex; flex:none; justify-content:space-around; border-top:1px solid var(--chat-border); background:var(--chat-bar); padding:8px 12px; }
.chats-bottom-nav button { flex:1; border:0; border-radius:10px; background:none; display:flex; flex-direction:column; align-items:center; gap:4px; padding:3px; color:var(--chat-muted); font-size:11px; }
.chats-bottom-nav button[aria-current] { color:var(--chat-purple); font-weight:700; }
.chats-new-group,.chats-person { width:100%; border:0; background:none; display:flex; align-items:center; gap:12px; text-align:left; padding:12px 10px; color:var(--chat-ink); border-radius:12px; }
.chats-person:hover,.chats-new-group:hover { background:var(--chat-surface); }
.chats-person>span:nth-child(2),.chats-new-group>span { flex:1; min-width:0; }
.chats-person strong { display:block; font-size:15px; overflow:hidden; text-overflow:ellipsis; }
.chats-person small { display:block; margin-top:4px; font-size:12px; color:var(--chat-muted); }
.chats-person>svg,.chats-new-group>svg { color:var(--chat-purple); }
.chats-people-label { font-size:10px; color:var(--chat-muted); font-weight:700; letter-spacing:1px; margin:14px 10px 6px; }
#messagesPage .dm-thread { min-width:0; min-height:0; background:var(--chat-bar); }
#messagesPage .dm-thread-active { height:100%; min-height:0; }
#messagesPage .dm-thread-header { background:var(--chat-bar); padding:12px 18px; min-height:66px; gap:10px; border-bottom:1px solid var(--chat-border); box-shadow:none; }
#messagesPage .dm-thread-avatar { width:38px; height:38px; }
#messagesPage .dm-thread-name { font-size:15px; font-weight:700; color:var(--chat-ink); }
#messagesPage .dm-thread-status { font-size:11px; color:var(--chat-muted); }
#messagesPage :is(.dm-back-btn,.dm-thread-menu) { background:none; color:var(--chat-purple); }
#messagesPage .dm-thread-empty { color:var(--chat-soft); padding:32px; text-align:center; }
#messagesPage .dm-thread-empty-icon { color:var(--chat-purple); background:var(--accent-soft); width:100px; height:100px; border-radius:32px; display:grid; place-items:center; margin-bottom:18px; }
#messagesPage .dm-thread-empty h2 { font-size:22px; font-weight:750; color:var(--chat-ink); margin:0 0 8px; }
#messagesPage .dm-thread-empty p { font-size:14px; max-width:290px; line-height:1.6; margin:0; color:var(--chat-muted); }
#messagesPage .dm-messages { min-height:0; padding:18px 20px 12px; overscroll-behavior:contain; scrollbar-width:thin; background:var(--chat-bar); }
#messagesPage .dm-bubble { max-width:min(460px,78%); padding:9px 13px; font-size:14px; line-height:1.45; box-shadow:none; }
#messagesPage .mine .dm-bubble { background:linear-gradient(135deg,var(--accent-primary),var(--accent-primary)); color:#fff; }
#messagesPage .theirs .dm-bubble { background:var(--chat-surface); color:var(--chat-ink); }
#messagesPage .dm-date-divider { font-size:11px; color:var(--chat-muted); }
#messagesPage .dm-composer { padding:10px 14px 12px; gap:8px; border-top:1px solid var(--chat-border); background:var(--chat-bar); }
#messagesPage .dm-composer-input-wrap { min-width:0; background:var(--chat-surface); border:0; border-radius:22px; box-shadow:none; }
#messagesPage #dmInput { min-width:0; width:100%; max-height:min(180px,26dvh); overflow-y:auto; overscroll-behavior:contain; color:var(--chat-ink); font-size:14px; padding:10px 12px; }
#messagesPage :is(.dm-composer-btn,.dm-composer-emoji,.dm-send-btn) { color:var(--chat-purple); background:none; box-shadow:none; }
#messagesPage .dm-send-btn { width:38px; height:38px; }
#messagesPage .dm-empty-list { color:var(--chat-muted); font-size:13px; padding:34px 18px; }
#messagesPage .dm-empty-title,#messagesPage .dm-empty-list h3 { color:var(--chat-ink); font-size:16px; }
#messagesPage .dm-conv-skel { margin:10px; height:64px; background:linear-gradient(90deg,var(--chat-surface),var(--chat-bar),var(--chat-surface)); border-radius:12px; animation:chats-pulse 1.3s ease-in-out infinite alternate; }
.chats-thread-skeleton { display:flex; flex-direction:column; gap:18px; padding:24px 0; }
.chats-thread-skeleton i { width:48%; height:42px; border-radius:18px; background:var(--chat-surface); animation:chats-pulse 1.3s ease-in-out infinite alternate; }
.chats-thread-skeleton i:nth-child(2) { align-self:flex-end; width:34%; }
.chats-thread-skeleton i:last-child { width:60%; height:70px; }
@keyframes chats-pulse { to { opacity:.45; } }
.dm-new-modal { border-radius:22px; padding:24px; }
.dm-new-modal h2 { font-size:24px; letter-spacing:-.5px; margin-top:0; }
@media(max-width:1050px) {
  #messagesPage .dm-sidebar { width:310px; min-width:280px; }
  #messagesPage .dm-sidebar-header { padding-inline:12px; gap:7px; }
  #messagesPage .dm-sidebar-header h2 { font-size:23px; }
}
@media(max-width:900px) {
  body.on-chats .main-wrap { padding:0; }
  #messagesPage .dm-shell { height:100%; min-height:0; border:0; border-radius:0; }
  #messagesPage .dm-sidebar { width:100%; max-width:none; min-width:0; border:0; }
  #messagesPage .dm-thread { display:none; }
  #messagesPage .thread-open .dm-sidebar { display:none; }
  #messagesPage .thread-open .dm-thread { display:flex; width:100%; }
  #messagesPage .dm-back-btn { display:inline-flex; }
  #messagesPage .dm-sidebar-header { padding:14px 16px 10px; }
  #messagesPage .dm-sidebar-header h2 { font-size:26px; }
  #messagesPage .dm-messages { padding:14px 12px 10px; }
  #messagesPage .dm-thread-header { padding:8px 12px; min-height:58px; }
  .chats-bottom-nav { padding-bottom:max(8px,env(safe-area-inset-bottom)); }
  #messagesPage .dm-composer { padding-bottom:max(10px,env(safe-area-inset-bottom)); }
}
@media(prefers-reduced-motion:reduce) {
  #messagesPage *,#messagesPage *::before { animation:none !important; scroll-behavior:auto !important; }
}

@media(max-width:768px) { body.on-chats .main-wrap { left:0; margin-left:0; } }
.chats-call-soon { display:flex; flex-direction:column; align-items:center; gap:1px; color:var(--chat-purple); }
.chats-call-soon button { display:grid; place-items:center; padding:0; width:32px; height:24px; border:0; background:none; color:inherit; opacity:.6; }
.chats-call-soon small { font-size:7px; line-height:10px; font-weight:750; letter-spacing:.3px; }
#messagesPage .chats-gif-btn { font-size:10px; font-weight:800; width:30px; height:30px; border:1.5px solid #c9c0e6; border-radius:8px; padding:0; }
#messagesPage .dm-thread-info { min-width:0; }
#messagesPage .dm-thread-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
body.on-chats :is(.dm-new-modal,.group-info-modal,.dm-conv-menu) { background:#fbfafe; color:#17173a; border:1px solid #e4e1f0; box-shadow:0 16px 60px #21153b24; }
body.on-chats .dm-new-modal :is(h2,h3,.dm-new-result-name) { color:#17173a; }
body.on-chats .dm-new-modal :is(.modal-sub,.dm-new-hint,.dm-cap-counter) { color:#8b8aa3; font-size:13px; line-height:1.5; }
body.on-chats .dm-new-modal :is(input,.dm-new-chip) { background:#eceaf4; color:#17173a; border:1px solid #e4e1f0; border-radius:12px; }
body.on-chats .dm-new-modal input { min-height:42px; font-size:14px; }
body.on-chats .dm-new-modal .btn-ghost { color:#55547a; border-color:#e4e1f0; }
body.on-chats .dm-new-modal .btn-primary { background:var(--accent-primary); color:white; border:0; border-radius:18px; box-shadow:none; }
body.on-chats .dm-new-modal .btn-primary:disabled { opacity:.45; }
body.on-chats .dm-new-modal .dm-new-result:hover { background:#eceaf4; }
#messagesPage .dm-secret-gate { color:var(--chat-soft); }
#messagesPage .dm-secret-gate :is(input,button) { border-radius:14px; }
#messagesPage .dm-secret-gate input { background:var(--chat-surface); color:var(--chat-ink); border:1px solid var(--chat-border); }
#messagesPage .dm-secret-gate button { background:var(--chat-purple); color:white; }
body.on-chats .site-footer { display:none; }
/* Explicit message actions sit beside the bubble, never over its text. */
.chat-message-line { display:flex; align-items:center; gap:6px; max-width:100%; min-width:0; }
.dm-bubble-row.mine .chat-message-line,.dm-mini-row.is-mine .chat-message-line { flex-direction:row-reverse; }
#messagesPage .dm-bubble-wrap { max-width:min(650px,calc(100% - 34px)); min-width:0; }
#messagesPage .chat-bubble-with-reactions>.dm-bubble { max-width:100%; min-width:0; flex:0 1 auto; cursor:text; }
#messagesPage .dm-bubble:hover { filter:none; }
.chat-message-actions { display:flex; align-items:center; gap:2px; flex:none; }
.chat-message-actions.is-pending { visibility:hidden; pointer-events:none; }
.chat-message-actions button { display:grid; place-items:center; width:28px; height:30px; padding:0; color:#777780; border:0; border-radius:50%; background:transparent; cursor:pointer; }
.chat-message-actions button:hover { background:#e9e6f1; color:#64508d; }
.chat-message-actions button:focus-visible { outline:2px solid var(--accent-primary); outline-offset:1px; }
.chat-message-actions svg { width:18px; height:18px; pointer-events:none; }
.dm-mini-bubble-wrap[data-msg] { cursor:default; }
.dm-mini-bubble-wrap[data-msg]:active .dm-mini-bubble { opacity:1; }
.chat-message-content { min-width:0; flex:0 1 auto; }
.dm-mini-row .chat-message-line { width:fit-content; }
.dm-mini-row .chat-message-content .dm-mini-bubble { max-width:100%; cursor:text; }
.dm-mini-row .chat-message-actions { gap:0; }
.dm-mini-row .chat-message-actions button { width:25px; height:30px; }
.dm-mini-row .chat-message-actions svg { width:16px; height:16px; }
.dm-hover-menu,.dm-mini-action-popover { flex-direction:column; align-items:stretch; gap:2px; min-width:140px; padding:6px; border-radius:12px; }
.dm-hover-menu .dm-hover-btn,.dm-mini-action-popover .dm-mini-pop-act { width:100%; height:auto; min-height:34px; border-radius:7px; padding:8px 12px; font-size:13px; justify-content:flex-start; text-align:left; transform:none; }
body.on-chats .dm-hover-menu { background:#fbfafe; border:1px solid #e4e1f0; color:#17173a; box-shadow:0 5px 24px #21153b22; }
body.on-chats .dm-hover-menu .dm-hover-btn { color:#55547a; }
body.on-chats .dm-hover-menu .dm-hover-danger { color:#be354a; }
@media(pointer:coarse) { .chat-message-actions button { width:32px; height:36px; } }

/* Reactions sit on the bubble edge, independent of the action buttons.
   Keep them in flow so multiple emojis wrap without covering the next message. */
.chat-message-anchor { position:relative; display:flex; flex-direction:column; align-items:stretch; min-width:0; max-width:100%; flex:0 1 auto; }
/* Size the reaction anchor to this bubble, even when its reply quote is wider. */
#messagesPage .chat-bubble-with-reactions { display:flex; flex-direction:column; width:fit-content; max-width:100%; min-width:0; position:relative; z-index:1; }
.chat-message-anchor :is(.dm-bubble-reactions,.dm-mini-bubble-reactions) {
  position:relative; z-index:1; align-self:flex-end; display:flex; align-items:center;
  width:max-content; max-width:calc(100% - 8px); flex-wrap:wrap; gap:0;
  margin:-5px 4px 2px; padding:0; border:1px solid #fff; border-radius:12px;
  background:#fff; box-shadow:0 1px 3px #18203418;
}
:is(.dm-bubble-row.mine,.dm-mini-row.is-mine) .chat-message-anchor :is(.dm-bubble-reactions,.dm-mini-bubble-reactions) { align-self:flex-start; }
.chat-message-anchor :is(.dm-rx-pill,.dm-mini-rx-pill) {
  display:inline-flex; align-items:center; justify-content:center; gap:3px;
  box-sizing:border-box; min-width:18px; height:18px; margin:0; padding:0 2px; border:0; border-radius:11px;
  background:transparent; color:#5f6470; box-shadow:none; line-height:1; transform:none;
}
.chat-message-anchor :is(.dm-rx-pill.mine,.dm-mini-rx-pill.is-mine) { background:var(--accent-soft); color:var(--accent-strong); }
.chat-message-anchor :is(.dm-rx-pill,.dm-mini-rx-pill):hover { background:#eae6f3; transform:none; }
.chat-message-anchor :is(.dm-rx-pill,.dm-mini-rx-pill):focus-visible { outline:2px solid var(--accent-primary); outline-offset:2px; }
.chat-message-anchor .chat-reaction-emoji { font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif; font-size:14px; line-height:1; }
.chat-message-anchor :is(.dm-rx-count,.dm-mini-rx-pill-count) { font-size:10px; font-weight:600; line-height:1; padding-right:2px; }
body:not(.light) .chat-message-anchor :is(.dm-bubble-reactions,.dm-mini-bubble-reactions) { background:#29283a; border-color:#29283a; box-shadow:0 2px 5px #0005; }
body:not(.light) .chat-message-anchor :is(.dm-rx-pill,.dm-mini-rx-pill) { background:transparent; color:#e0ddee; }
body:not(.light) .chat-message-anchor :is(.dm-rx-pill.mine,.dm-mini-rx-pill.is-mine) { background:var(--accent-soft); color:var(--accent-light); }
body:not(.light) .chat-message-anchor :is(.dm-rx-pill,.dm-mini-rx-pill):hover { background:#423d53; }

/* Reserve a photo tile while private mobile attachments are authorized. */
.chat-attachment { position:relative; display:block; max-width:100%; overflow:hidden; border-radius:inherit; }
.chat-attachment.is-loading,.chat-attachment.is-unavailable { min-width:120px; min-height:140px; background:var(--surface-2,#efedf6); }
.chat-attachment img[hidden],.chat-attachment-status[hidden] { display:none !important; }
.chat-attachment-status { display:flex; align-items:center; justify-content:center; position:absolute; inset:0; width:100%; padding:12px; border:0; background:transparent; color:#777184; font:500 12px/1.4 Inter,sans-serif; cursor:pointer; }
.chat-attachment-status:disabled { cursor:default; }
.chat-attachment-status:focus-visible { outline:2px solid var(--accent-primary); outline-offset:-3px; }
.chat-attachment.is-unavailable .chat-attachment-status { color:#7656bb; }
body:not(.light) .chat-attachment.is-loading,body:not(.light) .chat-attachment.is-unavailable { background:#29283a; }

:is(.dm-bubble-gallery-cell,.dm-mini-image-cell) > .chat-attachment { width:100%; height:100%; min-width:0; min-height:0; }

/* A compact reply context sits behind the new bubble, like the mobile thread. */
.has-reply .chat-message-anchor { align-items:flex-start; }
:is(.dm-bubble-row.mine,.dm-mini-row.is-mine).has-reply .chat-message-anchor { align-items:flex-end; }
.chat-reply-context { display:flex; flex-direction:column; align-items:flex-start; width:fit-content; max-width:min(360px,100%); min-width:0; padding-top:6px; }
:is(.dm-bubble-row.mine,.dm-mini-row.is-mine) .chat-reply-context { align-items:flex-end; }
.chat-reply-label { display:flex; align-items:center; gap:4px; max-width:100%; margin:0 8px 5px; color:#797585; font-size:11px; line-height:1.4; }
.chat-reply-label svg { width:12px; height:12px; flex:none; }
.chat-reply-label span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-reply-context .chat-reply-preview { display:block; width:fit-content; min-width:0; max-width:100%; margin:0 0 -8px; padding:8px 12px 16px; border:0; border-radius:16px; background:#f0edf5; color:#777181; font:400 13px/1.4 Inter,sans-serif; text-align:left; box-shadow:none; cursor:pointer; }
.chat-reply-context .chat-reply-preview:hover { background:#e8e3ef; }
.chat-reply-context .chat-reply-preview:focus-visible { outline:2px solid var(--accent-primary); outline-offset:2px; }
.chat-reply-context .chat-reply-preview.is-orphan { cursor:default; }
.chat-reply-text { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.has-reply .chat-message-anchor > :is(.dm-bubble,.dm-mini-bubble,.dm-mini-image,.dm-mini-image-grid) { position:relative; z-index:1; }
.dm-mini-row .chat-reply-context { max-width:min(210px,100%); }
.dm-mini-row .chat-reply-label { font-size:10px; }
.dm-mini-row .chat-reply-preview { font-size:12px; padding:7px 10px 15px; }
body:not(.light) .chat-reply-label { color:#aaa5b8; }
body:not(.light) .chat-reply-context .chat-reply-preview { background:#302d3e; color:#b8b3c7; border:0; }
body:not(.light) .chat-reply-context .chat-reply-preview:hover { background:#393447; }
.dm-bubble-row.is-jump-highlight .dm-bubble { outline:2px solid var(--accent-light); outline-offset:2px; }
.has-reply .chat-message-actions { align-self:flex-end; margin-bottom:2px; }
.has-reply:has(.dm-bubble-reactions,.dm-mini-bubble-reactions) .chat-message-actions { margin-bottom:18px; }

/* Desktop file drops land in the selected 1:1 or group conversation. */
#dmThreadActive { position:relative; }
.chat-photo-drop-hint { display:none; pointer-events:none; position:absolute; inset:10px; z-index:20; border:2px dashed var(--accent-primary); border-radius:18px; background:rgba(247,243,255,.96); color:var(--accent-strong); align-items:center; justify-content:center; flex-direction:column; gap:8px; }
.chat-photo-drop-hint span { font-size:20px; font-weight:650; }
.chat-photo-drop-hint small { font-size:13px; }
#dmThreadActive.is-photo-dragover .chat-photo-drop-hint { display:flex; }
body:not(.light) .chat-photo-drop-hint { background:rgba(37,30,53,.96); color:var(--accent-light); }

/* Shared message controls: native profile links and a compact composer tool row. */
.chat-profile-avatar { appearance:none; padding:0; border:0; cursor:pointer; font:inherit; color:inherit; }
.chat-profile-avatar:focus-visible { outline:2px solid var(--chat-purple,#8455ed); outline-offset:3px; }
#messagesPage :is(#dmAttachBtn,.chats-gif-btn,.chats-gift-btn), .dm-mini-chat :is(.dm-mini-attach,.dm-mini-gift) {
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 32px;
  width:32px; height:32px; padding:0; border:0; border-radius:50%;
  background:var(--accent-soft); color:var(--chat-purple,#8455ed); cursor:pointer;
  transition:background .15s ease,transform .15s ease;
}
#messagesPage :is(#dmAttachBtn,.chats-gif-btn,.chats-gift-btn):hover, .dm-mini-chat :is(.dm-mini-attach,.dm-mini-gift):hover { background:rgba(var(--accent-rgb),.17); }
#messagesPage .chats-gif-btn { border-radius:10px; font-size:10px; font-weight:800; letter-spacing:-.3px; }
#messagesPage :is(#dmAttachBtn,.chats-gif-btn,.chats-gift-btn):disabled { opacity:.4; cursor:default; }
#messagesPage .chats-gift-btn[hidden], .dm-mini-gift[hidden] { display:none; }
.dm-mini-chat :is(.dm-mini-attach,.dm-mini-gift) { width:28px; height:28px; flex-basis:28px; }
.dm-mini-chat .dm-mini-gift svg { width:19px; height:19px; }
.dm-mini-attach-opt-gif { font-size:10px; font-weight:800; border:1.5px solid currentColor; border-radius:5px; padding:2px; }
.chat-gift-card { display:flex; align-items:center; gap:10px; border:0; border-radius:16px; padding:12px 16px; background:#f0e8ff; color:#6339aa; cursor:pointer; text-align:left; font:inherit; }
.chat-gift-card svg { width:36px; height:36px; flex-shrink:0; }
.chat-gift-card strong,.chat-gift-card small { display:block; }
.chat-gift-card strong { font-size:14px; }.chat-gift-card small { margin-top:3px; font-size:11px; opacity:.8; }
.chat-gift-dialog { margin:auto; inset:0; box-sizing:border-box; width:min(460px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; border:1px solid #e7dff5; border-radius:22px; padding:20px; background:var(--surface,#fff); color:var(--text,#201a35); box-shadow:0 20px 70px #21133933; font-family:Inter,sans-serif; }
.chat-gift-dialog::backdrop { background:#17102766; }
.chat-gift-dialog header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.chat-gift-dialog h2 { margin:0; font-size:19px; }
.chat-gift-close { display:grid; place-items:center; flex-shrink:0; width:32px; height:32px; padding:0; border:0; border-radius:50%; background:#f0eaf7; color:#665575; line-height:1; cursor:pointer; }
.chat-gift-close svg { display:block; width:18px; height:18px; }
.chat-gift-recipient,.chat-gift-balance,.chat-gift-status { font-size:13px; line-height:1.5; }
.chat-gift-recipient { color:#756581; }.chat-gift-balance { font-weight:600; }
.chat-gift-status { color:#756581; }.chat-gift-status:empty { display:none; }
.chat-gift-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; max-height:280px; overflow:auto; }
.chat-gift-grid button { display:flex; flex-direction:column; align-items:center; gap:4px; padding:9px 3px; border:1.5px solid transparent; border-radius:12px; background:#f9f6fc; color:inherit; font:inherit; cursor:pointer; }
.chat-gift-grid button[aria-pressed="true"] { border-color:var(--accent-primary); background:var(--accent-soft); }
.chat-gift-grid img { width:48px; height:48px; object-fit:contain; }.chat-gift-grid strong { font-size:11px; }.chat-gift-grid small { font-size:10px; color:#74657e; }
.chat-gift-note { display:block; font-size:12px; margin-top:16px; }.chat-gift-note span { color:#82758d; }
.chat-gift-note textarea { box-sizing:border-box; display:block; width:100%; margin-top:6px; resize:vertical; border:1px solid #ded3ed; border-radius:10px; padding:10px; font:inherit; font-size:14px; background:transparent; color:inherit; }
.chat-gift-send { width:100%; margin-top:14px; min-height:40px; border:0; border-radius:12px; background:var(--accent-primary); color:#fff; font:600 13px Inter,sans-serif; cursor:pointer; }
.chat-gift-send:disabled { opacity:.45; cursor:default; }
.chat-gift-reveal { text-align:center; padding:16px; }.chat-gift-reveal img { width:120px; height:120px; object-fit:contain; }.chat-gift-reveal p { font-size:14px; }.chat-gift-reveal-note { white-space:pre-wrap; overflow-wrap:anywhere; }
@media(max-width:480px){ #messagesPage .dm-composer { gap:5px; padding-left:8px; padding-right:8px; } }

/* Separate conversation turns without loosening same-sender message groups. */
#messagesPage .dm-bubble-row.theirs + .dm-bubble-row.mine,
#messagesPage .dm-bubble-row.mine + .dm-bubble-row.theirs { margin-top:14px; }
.dm-mini-messages > .dm-mini-row.is-theirs + .dm-mini-row.is-mine,
.dm-mini-messages > .dm-mini-row.is-mine + .dm-mini-row.is-theirs { margin-top:12px; }

/* Compact floating Chats: give the conversation the width, not its tools. */
.dm-mini-chat {
  width:360px; max-width:calc(100vw - 24px);
  height:min(500px,calc(100dvh - 80px));
  border-radius:16px;
  box-shadow:0 10px 32px #211b3920,0 2px 8px #211b3910;
}
.dm-mini-header { min-height:48px; flex-shrink:0; padding:6px 8px; background:#fff; }
.dm-mini-name { font-size:14px; }
.dm-mini-messages { min-height:0; padding:12px; background:#fff; scrollbar-width:thin; }
.dm-mini-row .chat-message-line { position:relative; max-width:100%; gap:6px; align-items:center; }
.dm-mini-row .chat-message-content { max-width:100%; }
.dm-mini-row .chat-message-line:has(.chat-message-actions) .chat-message-content { max-width:calc(100% - 84px); }
.dm-mini-row .dm-mini-bubble { font-size:14px; line-height:20px; padding:8px 11px; box-shadow:none; overflow-wrap:anywhere; }
.dm-mini-row.is-mine .dm-mini-bubble:not(.is-deleted) { background:var(--accent-primary); box-shadow:none; color:#fff; }
.dm-mini-sender-name { font-size:11px; line-height:16px; color:#777284; margin:0 0 2px 6px; }
.dm-mini-row .chat-reply-context { max-width:100%; }
.dm-mini-row .dm-mini-image,.dm-mini-row .dm-mini-image-grid { max-width:100%; }
/* Keep a stable side slot: hover never covers text or moves the bubble. */
.dm-mini-row .chat-message-actions { position:static; flex:0 0 78px; margin:0; background:transparent; border:0; border-radius:0; box-shadow:none; padding:0; opacity:0; pointer-events:none; transition:opacity 100ms; }
.dm-mini-row .chat-message-actions button { width:26px; height:30px; }
.dm-mini-row .chat-message-actions svg { width:16px; height:16px; }
.dm-mini-row:hover .chat-message-actions,.dm-mini-row:focus-within .chat-message-actions { opacity:1; pointer-events:auto; }
.dm-mini-input-wrap { flex:1; min-width:0; display:flex; align-items:flex-end; border:1px solid transparent; border-radius:20px; background:#f3f1f7; }
.dm-mini-input-wrap:focus-within { border-color:var(--accent-border); }
.dm-mini-chat .dm-mini-input { width:100%; min-width:0; min-height:36px; max-height:96px; padding:8px 4px 8px 12px; border:0; background:transparent; border-radius:20px; font-size:14px; line-height:20px; box-shadow:none; }
.dm-mini-chat .dm-mini-input:focus { border:0; background:transparent; box-shadow:none; }
.dm-mini-input-wrap .dm-mini-emoji { width:30px; height:34px; margin-right:3px; color:var(--accent-primary); }
.dm-mini-composer { flex-shrink:0; gap:5px; padding:8px; align-items:flex-end; }
.dm-mini-composer :is(.dm-mini-attach-wrap,.dm-mini-gift,.dm-mini-send) { margin-bottom:3px; }
.dm-mini-chat .dm-mini-send { background:transparent; box-shadow:none; color:var(--accent-primary); width:30px; height:30px; }
.dm-mini-chat .dm-mini-send:hover { background:var(--accent-soft); box-shadow:none; transform:none; }
.dm-mini-chat .dm-mini-send svg { width:20px; height:20px; }
.dm-mini-jump-bar { position:relative; flex:0 0 0; z-index:6; display:flex; justify-content:center; }
.dm-mini-new-messages { position:absolute; bottom:10px; padding:7px 13px; border:1px solid #e5ddf5; border-radius:18px; background:#fff; color:var(--accent-primary); box-shadow:0 3px 12px #211b3922; font-family:inherit; font-size:12px; font-weight:600; line-height:16px; cursor:pointer; }
.dm-mini-new-messages[hidden] { display:none; }
.dm-mini-new-messages:focus-visible { outline:2px solid var(--accent-primary); outline-offset:2px; }
@media (hover:none), (pointer:coarse) {
  .dm-mini-row .chat-message-actions { opacity:1; pointer-events:auto; }
  .dm-mini-row .chat-message-actions button { height:34px; }
}
body:not(.light) .dm-mini-input-wrap { background:#302b3d; }
body:not(.light) .dm-mini-chat .dm-mini-input { background:transparent; }
body:not(.light) .dm-mini-new-messages { background:#302b3d; color:var(--accent-light); border-color:#514760; }
@media (prefers-reduced-motion:reduce) { .dm-mini-row .chat-message-actions { transition:none; } }

@media (min-width:768px) and (max-width:850px) { .dm-mini-chat { width:calc((100vw - 116px) / 2); } }

/* Read receipts sit under the sent bubble; keep the first avatar unclipped. */
#messagesPage .dm-bubble-read.is-group { overflow:visible; box-shadow:none; }
#messagesPage .dm-bubble-read.is-group > :first-child { margin-left:0; }
#messagesPage .dm-bubble-read.is-group > :not(.dm-bubble-read-overflow) { flex-shrink:0; }

/* History grows above the reader; explicit message anchors retain their place. */
.dm-mini-messages,#dmMessages { overflow-anchor:none; }
.chat-history-status { padding:8px; text-align:center; color:#83778f; font-size:12px; line-height:18px; }

/* Unsent messages are quiet status notices, including inside outgoing runs.
   Normal whitespace prevents template indentation from inflating dock rows. */
#messagesPage .dm-bubble.is-deleted,
.dm-mini-row:is(.is-mine,.is-theirs) .dm-mini-bubble.is-deleted {
  display:inline-flex; align-items:center; gap:7px;
  width:fit-content; max-width:100%; min-height:0;
  padding:7px 11px; border:1px solid #ddd9e5; border-radius:12px;
  background:transparent !important; color:#716b7c !important;
  box-shadow:none !important; font-size:13px; font-weight:400; font-style:normal;
  line-height:20px; white-space:normal; overflow-wrap:anywhere;
  cursor:default;
}
#messagesPage .dm-bubble-deleted { font-style:normal; }
.dm-mini-row .dm-mini-bubble.is-deleted .dm-mini-deleted-icon { flex:0 0 14px; opacity:1; }
.dm-mini-row .dm-mini-deleted-icon svg { width:14px; height:14px; }
.chat-unsent-label { min-width:0; }
body:not(.light) #messagesPage .dm-bubble.is-deleted,
body:not(.light) .dm-mini-row:is(.is-mine,.is-theirs) .dm-mini-bubble.is-deleted {
  color:#b8b2c5 !important; border-color:#514a60;
}

/* Chat confirmations use the shared, theme-aware styles in confirm-dialog.css. */

/* Give an active edit a readable card instead of a two-line mini bubble. */
.dm-mini-row:has(.dm-mini-edit-wrap) .dm-mini-bubble-wrap,
.dm-mini-row:has(.dm-mini-edit-wrap) .chat-message-line,
.dm-mini-row:has(.dm-mini-edit-wrap) .chat-message-content { width:100%; max-width:100%; }
.dm-mini-row:has(.dm-mini-edit-wrap) .chat-reply-context { margin-bottom:8px; }
.dm-mini-row:has(.dm-mini-edit-wrap) .chat-reply-preview { margin-bottom:0; padding-bottom:8px; }
.dm-mini-chat .dm-mini-edit-wrap { width:100%; max-width:100%; min-width:0; padding:12px; gap:10px; border:1px solid #d9ccef; border-radius:14px; background:#faf8ff; color:#29243a; box-shadow:0 2px 8px #33214f08; }
.dm-mini-edit-heading { color:#74618f; font-size:11px; font-weight:650; line-height:16px; }
.dm-mini-chat .dm-mini-edit-textarea { display:block; width:100%; min-width:0; min-height:60px; max-height:160px; padding:0; font-size:14px; line-height:20px; color:inherit; border-radius:0; overscroll-behavior:contain; }
.dm-mini-chat .dm-mini-edit-actions { gap:8px; padding-top:8px; border-top:1px solid #eae3f3; }
.dm-mini-chat :is(.dm-mini-edit-cancel,.dm-mini-edit-save) { min-height:34px; padding:7px 14px; border-radius:9px; font-family:inherit; font-size:13px; font-weight:600; }
.dm-mini-chat .dm-mini-edit-cancel { background:#efebf5; color:#625671; }
.dm-mini-chat .dm-mini-edit-save { background:var(--accent-primary); color:#fff; }
.dm-mini-chat .dm-mini-edit-save:hover { background:var(--accent-strong); transform:none; }
.dm-mini-chat .dm-mini-edit-wrap button:disabled { opacity:.55; cursor:wait; }
.dm-mini-edit-wrap button:focus-visible { outline:2px solid var(--accent-primary); outline-offset:2px; }
.dm-mini-edit-hint { color:#83768f; font-size:10px; line-height:15px; }
.dm-mini-edit-error { color:#b9364e; font-size:12px; line-height:17px; }
body:not(.light) .dm-mini-chat .dm-mini-edit-wrap { background:#302b3d; color:#eee7fa; border-color:#67517f; }
body:not(.light) :is(.dm-mini-edit-heading,.dm-mini-edit-hint) { color:#beb0d0; }
body:not(.light) .dm-mini-chat .dm-mini-edit-actions { border-color:#493e59; }
body:not(.light) .dm-mini-chat .dm-mini-edit-cancel { background:#463a55; color:#eee7fa; }
body:not(.light) .dm-mini-edit-error { color:#ffacbd; }

/* Shared full-page and floating-chat links stay readable inside narrow bubbles. */
:is(.dm-bubble,.dm-mini-bubble) a { color:inherit; text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; word-break:break-word; cursor:pointer; }
:is(.dm-bubble,.dm-mini-bubble) a:focus-visible { outline:2px solid currentColor; outline-offset:3px; border-radius:2px; }