/* Direct messages as a messenger, plus the floating friend list (chat-ui.js). Loaded after theme.css.
   Same "Glut" tokens as the rest: your own bubbles are ember (#ff9e57, text #1d0e05 at 9.2:1),
   theirs sit on --surface-2 (#241e28, warm white text at 14.9:1). Green only ever means online.
   Signature: your last message keeps a soft ember glow while it is unread and cools once it is seen. */
:root { --dm-mine:var(--accent,#ff9e57); --dm-on-mine:var(--on-accent,#1d0e05); --dm-theirs:var(--surface-2,#241e28); --dm-thread-bg:#161118; --dm-head-h:64px; }
.dm-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- Avatar with presence dot ---------- */
.dm-face { position:relative; display:inline-grid; flex:none; width:var(--size); height:var(--size); }
.dm-face > .avatar { width:var(--size) !important; height:var(--size) !important; }
.dm-dot { display:none; position:absolute; right:-1px; bottom:-1px; width:max(10px, calc(var(--size) * .26)); height:max(10px, calc(var(--size) * .26)); border-radius:50%; background:var(--live,#5fd99a); box-shadow:0 0 0 3px var(--dot-ring, var(--surface,#1b161e)); z-index:3; }
.dm-face.is-online .dm-dot { display:block; }
.dm-face.presence-away .dm-dot { background:#ffc24a; }
.dm-face.presence-dnd .dm-dot { background:#ff5e6c; }
.dm-face.presence-ingame .dm-dot { background:#63e5ff; }
.dm-unread { font-style:normal; display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px; border-radius:99px; background:var(--accent,#ff9e57); color:var(--on-accent,#1d0e05); font-size:11px; font-weight:800; line-height:1; }

/* ---------- Desktop: list and chat side by side ---------- */
body.is-inbox .app-shell { grid-template-columns:248px minmax(0,1fr); }
body.is-inbox .app-shell > .right { display:none; }
body.is-inbox .topbar .crumb { visibility:hidden; }
body.is-inbox .main > .footnote { display:none; }
.dm { display:grid; grid-template-columns:minmax(280px,340px) minmax(0,1fr); height:max(520px, calc(100dvh - 112px)); background:var(--surface,#1b161e); border-radius:var(--radius,16px); overflow:hidden; }
.dm-list { display:flex; flex-direction:column; min-height:0; border-right:1px solid var(--hairline,#fff2e812); }
.dm-list-head { padding:18px 18px 10px; }
.dm-list-head h1 { margin:0; font:750 24px/1.15 var(--font-display,var(--font)); letter-spacing:-.025em; }
.dm-search, .fd-search { display:flex; align-items:center; gap:8px; margin:0 14px 10px; padding:0 12px; height:40px; border-radius:12px; background:var(--surface-2,#241e28); color:var(--subtle,#998c97); }
.dm-search input, .fd-search input { flex:1; min-width:0; height:100%; border:0; background:transparent; color:var(--ink,#f7f1ec); font:inherit; font-size:15px; outline:none; }
.dm-search:focus-within, .fd-search:focus-within { box-shadow:0 0 0 2px var(--accent,#ff9e57); }
.dm-list-scroll { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:0 8px 12px; scrollbar-width:thin; }

.dm-online { padding:4px 6px 8px; }
.dm-online h2 { margin:0 0 8px; font-size:13px; font-weight:600; color:var(--muted,#b7abb4); }
.dm-online-row { display:flex; gap:12px; overflow-x:auto; padding:2px 2px 6px; scrollbar-width:none; }
.dm-online-row::-webkit-scrollbar { display:none; }
.dm-online-item { display:flex; flex-direction:column; align-items:center; gap:6px; width:62px; flex:none; border:0; background:none; color:var(--muted,#b7abb4); font-size:12px; font-weight:600; padding:0; }
.dm-online-item > span:last-child { max-width:62px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dm-online-item:hover { color:var(--ink,#f7f1ec); }

.dm-rows { display:grid; gap:2px; }
.dm-row { position:relative; display:flex; align-items:center; gap:12px; width:100%; min-height:68px; padding:9px 10px; border:0; border-radius:14px; background:transparent; color:var(--ink,#f7f1ec); text-align:left; --dot-ring:var(--surface,#1b161e); }
.dm-row:hover { background:var(--surface-hover,#2b2430); --dot-ring:var(--surface-hover,#2b2430); }
.dm-row.is-active { background:var(--surface-2,#241e28); --dot-ring:var(--surface-2,#241e28); }
.dm-row-main { display:grid; gap:2px; flex:1; min-width:0; }
.dm-row-top, .dm-row-bottom { display:flex; align-items:center; gap:8px; min-width:0; }
.dm-row-top strong { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; font-weight:650; }
.dm-row-top time { flex:none; font-size:12px; color:var(--subtle,#998c97); }
.dm-preview { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; color:var(--muted,#b7abb4); }
.dm-row.is-unread .dm-row-top strong { font-weight:800; }
.dm-row.is-unread .dm-preview { color:var(--ink,#f7f1ec); font-weight:600; }
.dm-row.is-unread time { color:var(--accent,#ff9e57); font-weight:700; }
.dm-row > .nav-hint { display:none; }
.dm-list-empty { padding:28px 14px; text-align:center; color:var(--muted,#b7abb4); font-size:14px; }
.dm-list-empty strong { display:block; color:var(--ink,#f7f1ec); font-size:15px; margin-bottom:4px; }
.dm-list-empty p { margin:0; }

/* Chat */
.dm-thread { display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--dm-thread-bg); }
.dm-thread-head { display:flex; align-items:center; gap:8px; min-height:var(--dm-head-h); padding:10px 14px; border-bottom:1px solid var(--hairline,#fff2e812); --dot-ring:var(--dm-thread-bg); }
.dm-back { display:none; }
.dm-who { display:flex; align-items:center; gap:11px; flex:1; min-width:0; border:0; background:none; color:inherit; text-align:left; padding:4px 8px 4px 4px; border-radius:12px; }
.dm-who:not([disabled]):hover { background:var(--surface-hover,#2b2430); --dot-ring:var(--surface-hover,#2b2430); }
.dm-who > span:last-child { display:grid; min-width:0; }
.dm-who strong { font-size:16px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dm-status { font-size:13px; color:var(--subtle,#998c97); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dm-status.is-online { color:var(--live,#5fd99a); }
.dm-head-btn, .fd-act, .fd-close { display:grid; place-items:center; flex:none; width:40px; height:40px; border:0; border-radius:50%; background:transparent; color:var(--muted,#b7abb4); position:relative; }
.dm-head-btn:hover, .fd-act:hover, .fd-close:hover { background:var(--surface-hover,#2b2430); color:var(--ink,#f7f1ec); }

.dm-scroll { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:20px 18px 8px; display:flex; flex-direction:column; scrollbar-width:thin; }
.dm-intro { margin-top:auto; display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; padding:18px 0 22px; --dot-ring:var(--dm-thread-bg); }
.dm-intro .dm-face { margin-bottom:8px; }
.dm-intro strong { font-size:18px; font-weight:750; }
.dm-intro small { color:var(--subtle,#998c97); font-size:13px; }
.dm-intro p { margin:6px 0 0; color:var(--muted,#b7abb4); font-size:14px; }
.dm-messages { display:flex; flex-direction:column; gap:10px; }
.dm-day { display:flex; justify-content:center; margin:8px 0 2px; }
.dm-day span { font-size:12px; font-weight:600; color:var(--subtle,#998c97); background:var(--surface,#1b161e); padding:4px 10px; border-radius:99px; }

.dm-group { display:flex; align-items:flex-end; gap:8px; max-width:min(78%, 560px); }
.dm-group.is-mine { align-self:flex-end; }
.dm-group.is-theirs { align-self:flex-start; }
.dm-group-face { flex:none; width:28px; margin-bottom:22px; }
.dm-group-face .avatar { width:28px !important; height:28px !important; }
.dm-group-stack { display:flex; flex-direction:column; gap:2px; min-width:0; }
.is-mine .dm-group-stack { align-items:flex-end; }
.is-theirs .dm-group-stack { align-items:flex-start; }
.dm-bubble { max-width:100%; padding:9px 14px; font-size:15px; line-height:1.4; white-space:pre-wrap; overflow-wrap:anywhere; transition:box-shadow .6s var(--ease,ease); }
.is-theirs .dm-bubble { background:var(--dm-theirs); color:var(--ink,#f7f1ec); border-radius:6px 20px 20px 6px; }
.is-theirs .dm-bubble.is-first { border-top-left-radius:20px; }
.is-theirs .dm-bubble.is-last { border-bottom-left-radius:20px; }
.is-mine .dm-bubble { background:var(--dm-mine); color:var(--dm-on-mine); border-radius:20px 6px 6px 20px; font-weight:500; }
.is-mine .dm-bubble.is-first { border-top-right-radius:20px; }
.is-mine .dm-bubble.is-last { border-bottom-right-radius:20px; }
.is-mine .dm-bubble.is-warm { box-shadow:0 0 0 1px #ffb47866, 0 6px 22px -4px #ff9e5770; }
.dm-bubble.is-pending { opacity:.65; }
.dm-bubble.is-failed { background:transparent !important; color:var(--ink,#f7f1ec) !important; box-shadow:inset 0 0 0 1.5px #ff5e6c; }
.dm-bubble.is-emoji { background:transparent !important; box-shadow:none !important; padding:0 2px; font-size:38px; line-height:1.15; }
.dm-group.is-system { align-self:center; max-width:min(92%, 560px); }
.dm-group.is-system .dm-group-face { display:none; }
.dm-group.is-system .dm-group-stack { align-items:stretch; }
.dm-group.is-system .dm-bubble { border-radius:14px; background:var(--surface,#1b161e); box-shadow:inset 0 0 0 1px #ff9e5740; }
.dm-system-label { font-size:12px; font-weight:700; color:var(--accent,#ff9e57); margin:0 4px 2px; }
.dm-meta { font-size:12px; color:var(--subtle,#998c97); margin:3px 6px 0; }
.dm-retry { border:0; background:none; color:#ff8a94; font:inherit; font-size:12px; font-weight:700; margin:3px 6px 0; padding:4px 0; }
.dm-retry:hover { text-decoration:underline; }

.dm-composer { display:flex; align-items:flex-end; gap:8px; padding:10px 14px 14px; position:relative; }
.dm-input { flex:1; min-width:0; display:flex; background:var(--surface-2,#241e28); border-radius:22px; padding:0 4px 0 16px; box-shadow:inset 0 0 0 1px var(--hairline,#fff2e812); }
.dm-input:focus-within { box-shadow:inset 0 0 0 1.5px var(--accent,#ff9e57); }
.dm-input textarea { flex:1; min-width:0; height:44px; max-height:140px; resize:none; border:0; background:transparent; color:var(--ink,#f7f1ec); font:inherit; font-size:16px; line-height:1.4; padding:11px 0; outline:none; }
.dm-input textarea::placeholder { color:var(--subtle,#998c97); }
.dm-send { display:grid; place-items:center; flex:none; width:44px; height:44px; border:0; border-radius:50%; background:var(--accent,#ff9e57); color:var(--on-accent,#1d0e05); transition:transform .15s var(--ease,ease), background .15s; }
.dm-send:hover:not(:disabled) { background:var(--accent-hover,#ffb478); }
.dm-send:active:not(:disabled) { transform:scale(.92); }
.dm-send:disabled { background:var(--surface-2,#241e28); color:var(--subtle,#998c97); }
.dm-noreply { margin:0; padding:14px 18px 18px; text-align:center; color:var(--muted,#b7abb4); font-size:14px; }

.dm-thread.is-blank { display:grid; place-items:center; padding:30px; }
.dm-blank { text-align:center; max-width:360px; }
.dm-blank-icon { display:inline-grid; place-items:center; width:64px; height:64px; border-radius:50%; background:var(--surface-2,#241e28); color:var(--accent,#ff9e57); margin-bottom:12px; }
.dm-blank-icon svg { width:28px; height:28px; }
.dm-blank h2 { margin:0 0 4px; font-size:19px; font-weight:700; }
.dm-blank p { margin:0 0 16px; color:var(--muted,#b7abb4); font-size:14px; }
.dm-blank-people { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; --dot-ring:var(--surface-2,#241e28); }
.dm-blank-people button { display:flex; align-items:center; gap:8px; border:0; border-radius:99px; background:var(--surface-2,#241e28); color:var(--ink,#f7f1ec); padding:5px 14px 5px 5px; font-size:14px; font-weight:600; }
.dm-blank-people button:hover { background:var(--surface-hover,#2b2430); --dot-ring:var(--surface-hover,#2b2430); }

/* ---------- Phone: a messenger ---------- */
@media (max-width:730px) {
  .dm { display:block; height:auto; background:transparent; border-radius:0; overflow:visible; }
  .dm-list { border:0; }
  .dm-list-head { padding:2px 2px 12px; }
  .dm-list-head h1 { font-size:32px; }
  .dm-search { margin:0 0 14px; height:42px; }
  .dm-list-scroll { overflow:visible; padding:0; }
  .dm-online { padding:0 0 10px; margin:0 -16px; }
  .dm-online h2 { padding:0 16px; }
  .dm-online-row { padding:2px 16px 6px; gap:14px; --dot-ring:var(--bg,#120e14); }
  .dm-rows { gap:0; margin:0 -8px; }
  .dm-row { min-height:74px; border-radius:16px; --dot-ring:var(--bg,#120e14); }
  .dm-row + .dm-row::before { content:""; position:absolute; top:0; left:72px; right:10px; height:1px; background:var(--hairline,#fff2e812); }
  .dm-row.is-active { background:transparent; --dot-ring:var(--bg,#120e14); }
  .dm-row:active { background:var(--surface,#1b161e); }
  .dm-thread, .dm-thread.is-blank { display:none; }

  /* The open chat takes the whole screen; the tab bar steps aside and the back button leads to the list. */
  .dm.has-thread .dm-thread { display:flex; position:fixed; inset:0; z-index:40; height:100dvh; background:var(--bg,#120e14); --dm-thread-bg:var(--bg,#120e14); animation:dm-in .22s var(--ease,ease) both; }
  body.dm-thread-open { overflow:hidden; }
  body.dm-thread-open .mobile-nav, body.dm-thread-open .more-sheet { display:none !important; }
  .dm-thread-head { position:relative; z-index:2; padding:calc(6px + env(safe-area-inset-top)) 6px 6px; min-height:calc(58px + env(safe-area-inset-top)); background:#120e14e0; border-bottom:1px solid var(--hairline,#fff2e812); }
  @supports (backdrop-filter:blur(1px)) { .dm-thread-head { background:#120e14b8; backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4); } }
  .dm-back { display:grid; place-items:center; flex:none; width:44px; height:44px; border:0; border-radius:50%; background:none; color:var(--accent,#ff9e57); }
  .dm-back:active { background:var(--surface,#1b161e); }
  .dm-who { padding-left:0; gap:10px; }
  .dm-head-btn { width:44px; height:44px; }
  .dm-scroll { padding:12px 12px 6px; }
  .dm-group { max-width:84%; }
  .dm-bubble { font-size:16px; }
  .dm-composer { padding:8px 10px max(10px, env(safe-area-inset-bottom)); background:var(--bg,#120e14); border-top:1px solid var(--hairline,#fff2e812); }
  .dm-noreply { padding-bottom:max(18px, env(safe-area-inset-bottom)); }
}
@keyframes dm-in { from { transform:translateX(24px); opacity:0; } to { transform:none; opacity:1; } }

/* ---------- Floating friend list ---------- */
.fd { position:fixed; right:24px; bottom:24px; z-index:45; display:flex; flex-direction:column; align-items:flex-end; gap:12px; pointer-events:none; }
.fd > * { pointer-events:auto; }
body.is-inbox .fd { display:none; }
.fd-backdrop { display:none; }
.fd-fab { position:relative; display:flex; align-items:center; gap:10px; height:52px; padding:0 16px 0 14px; border:0; border-radius:99px; background:var(--surface-2,#241e28); color:var(--ink,#f7f1ec); font-size:15px; font-weight:700; box-shadow:0 0 0 1px var(--hairline,#fff2e812), 0 12px 32px -8px #000000b3; transition:transform .15s var(--ease,ease), background .15s; }
.fd-fab:hover { background:var(--surface-hover,#2b2430); }
.fd-fab:active { transform:scale(.97); }
.fd.is-open .fd-fab { background:var(--surface-hover,#2b2430); }
.fd-fab-icon { display:grid; color:var(--muted,#b7abb4); }
.fd-stack { display:flex; padding-left:4px; }
.fd-stack-face { display:inline-grid; margin-left:-9px; border-radius:50%; box-shadow:0 0 0 2.5px var(--surface-2,#241e28); }
.fd-stack-face .avatar { width:26px !important; height:26px !important; }
.fd-stack + .fd-fab-label { margin-left:-2px; }
.fd-fab-count { display:inline-flex; align-items:center; gap:6px; color:var(--subtle,#998c97); font-weight:700; font-variant-numeric:tabular-nums; }
.fd-fab-count i, .fd-live { width:8px; height:8px; border-radius:50%; background:var(--subtle,#998c97); display:inline-block; }
.fd-fab-count.is-live { color:var(--live,#5fd99a); }
.fd-fab-count.is-live i, .fd-live { background:var(--live,#5fd99a); }
.fd-fab-unread { position:absolute; top:-4px; right:-4px; box-shadow:0 0 0 3px var(--bg,#120e14); }

.fd-panel { width:340px; max-height:min(560px, calc(100dvh - 120px)); display:flex; flex-direction:column; background:var(--surface,#1b161e); border-radius:20px; box-shadow:0 0 0 1px var(--hairline,#fff2e812), 0 24px 60px -12px #000000cc; overflow:hidden; transform-origin:bottom right; animation:fd-pop .18s var(--ease,ease) both; }
.fd-panel[hidden] { display:none; }
.fd-head { display:flex; align-items:center; gap:10px; padding:16px 12px 10px 18px; }
.fd-head > div { flex:1; min-width:0; }
.fd-head h2 { margin:0; font-size:18px; font-weight:750; letter-spacing:-.01em; }
.fd-head small { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--muted,#b7abb4); }
.fd-search { margin:0 14px 8px; }
.fd-list { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:0 8px 10px; scrollbar-width:thin; }
.fd-list ul { list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.fd-sec { display:flex; gap:6px; margin:10px 10px 6px; font-size:13px; font-weight:600; color:var(--muted,#b7abb4); }
.fd-sec span { color:var(--subtle,#998c97); font-variant-numeric:tabular-nums; }
.fd-row { display:flex; align-items:center; gap:2px; border-radius:14px; padding:2px 4px 2px 2px; --dot-ring:var(--surface,#1b161e); }
.fd-row:hover, .fd-row:focus-within { background:var(--surface-2,#241e28); --dot-ring:var(--surface-2,#241e28); }
.fd-row:not(.is-on) .dm-face { opacity:.6; }
.fd-who { display:flex; align-items:center; gap:10px; flex:1; min-width:0; border:0; background:none; color:var(--ink,#f7f1ec); text-align:left; padding:7px 8px; border-radius:12px; }
.fd-who > span:last-child { display:grid; min-width:0; }
.fd-who strong { font-size:15px; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fd-who small { font-size:13px; color:var(--subtle,#998c97); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fd-row.is-on .fd-who small { color:var(--muted,#b7abb4); }
.fd-act.is-dm { color:var(--accent,#ff9e57); }
.fd-act.is-dm:hover { background:var(--accent-soft,#ff9e571f); color:var(--accent-hover,#ffb478); }
.fd-act .dm-unread { position:absolute; top:0; right:-2px; min-width:17px; height:17px; font-size:10px; padding:0 4px; box-shadow:0 0 0 2px var(--surface,#1b161e); }
.fd-empty { text-align:center; padding:12px 22px 24px; color:var(--muted,#b7abb4); font-size:14px; }
.fd-empty-icon { display:inline-grid; place-items:center; width:56px; height:56px; border-radius:50%; background:var(--surface-2,#241e28); color:var(--accent,#ff9e57); margin-bottom:10px; }
.fd-empty strong { display:block; color:var(--ink,#f7f1ec); font-size:16px; margin-bottom:4px; }
.fd-empty p { margin:0 0 14px; }
@keyframes fd-pop { from { transform:translateY(8px) scale(.98); opacity:0; } to { transform:none; opacity:1; } }

@media (max-width:730px) {
  .fd { right:16px; bottom:calc(76px + env(safe-area-inset-bottom)); }
  .fd-fab { width:52px; height:52px; padding:0; justify-content:center; gap:0; border-radius:50%; }
  .fd-fab-label, .fd-stack { display:none; }
  .fd-fab-icon { color:var(--ink,#f7f1ec); }
  .fd-fab-count { position:absolute; left:-4px; bottom:-4px; min-width:22px; height:22px; padding:0 6px; justify-content:center; gap:0; border-radius:99px; background:var(--surface-2,#241e28); box-shadow:0 0 0 3px var(--bg,#120e14); font-size:12px; }
  .fd-fab-count i { display:none; }
  .fd-fab-count.is-live { background:var(--live,#5fd99a); color:#06281a; }
  /* The list opens as a sheet from the bottom, like the "Mehr" sheet. */
  .fd.is-open { inset:0; right:0; bottom:0; z-index:46; }
  .fd.is-open .fd-fab { display:none; }
  .fd-backdrop { display:block; position:absolute; inset:0; background:#09060bb3; animation:fd-fade .18s ease-out both; }
  .fd-panel { position:absolute; left:0; right:0; bottom:0; width:auto; max-height:min(78dvh, 640px); border-radius:22px 22px 0 0; padding-bottom:env(safe-area-inset-bottom); transform-origin:bottom center; animation:fd-up .22s var(--ease,ease) both; }
  .fd-panel::before { content:""; display:block; width:38px; height:4px; border-radius:99px; background:#ffffff26; margin:8px auto 0; flex:none; }
  .fd-head { padding-top:8px; }
  .fd-act, .fd-close { width:44px; height:44px; }
  .fd-who { min-height:52px; }
}
@keyframes fd-up { from { transform:translateY(24px); opacity:0; } to { transform:none; opacity:1; } }
@keyframes fd-fade { from { opacity:0; } to { opacity:1; } }

@media (prefers-reduced-motion:reduce) {
  .dm.has-thread .dm-thread, .fd-panel, .fd-backdrop { animation:none !important; }
  .dm-bubble, .dm-send, .fd-fab { transition:none; }
}
@media (prefers-contrast:more) {
  .dm-row-top time, .dm-meta, .dm-status, .fd-who small, .dm-preview { color:var(--muted,#b7abb4); }
  .is-theirs .dm-bubble { box-shadow:inset 0 0 0 1px #ffffff40; }
}
@media (prefers-reduced-transparency:reduce) {
  .dm-thread-head { background:var(--bg,#120e14) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
}

/* Friend requests and game invites (social.css) sit inside the chat. */
.dm-request-slot { margin:0 0 16px; }
.dm-request-slot:empty { display:none; }
.dm-bubble.is-card { background:transparent !important; color:var(--ink,#f7f1ec) !important; padding:0; box-shadow:none !important; font-weight:400; white-space:normal; min-width:min(280px, 100%); }