/* ==========================================================================
   css/components/dm-popout.css
   Split from app.html (build 2026.10.08.9-beta), original lines 3804-3837.
   Rules are in their ORIGINAL order; load order is defined in index.html.
   ========================================================================== */
/* -- DM popout -- */
.dmpop-dot { position:absolute; top:3px; right:3px; width:8px; height:8px; border-radius:50%; background:var(--red); border:2px solid var(--bg-surface); }
/* Voice channel chat - docked INSIDE the call window (a persistent child of
   .channel-area), so the call tiles reflow left to make room instead of being covered. */
.vcchat { position:absolute; top:48px; right:0; bottom:0; width:380px; max-width:100%; background:var(--bg-chat,var(--bg-base)); border-left:1px solid var(--border-strong); z-index:6; display:flex; flex-direction:column; animation:vcchat-in .18s var(--ease-out, ease); }
@keyframes vcchat-in { from { transform:translateX(24px); opacity:0; } to { transform:none; opacity:1; } }
/* Reflow the call view so the tiles don't sit under the chat panel. */
.channel-area.vcchat-open #messagesArea { padding-right:380px; }
/* 'side' push-out: occupies the SAME right-edge area as the DM / notifications / profile
   panels (.dmp) - same width, top offset, z-index - and pushes #app narrower the same way. */
.vcchat.vcchat-side { position:fixed; top:0; right:0; bottom:0; left:auto; width:var(--dmp-w); max-width:100vw; z-index:120; border-left:1px solid var(--border-strong); }
body.native .vcchat.vcchat-side { top:32px; }
body.vcchat-side-open #app { width: calc(100% - var(--dmp-w)) !important; }
@media (max-width:640px) { .vcchat.vcchat-side { width:100vw; } body.vcchat-side-open #app { width:0 !important; } }
/* "Viewing older messages" jump bar - sits just above the composer when scrolled up. */
#jumpPresentBar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 16px -4px; padding:6px 14px; border-radius:9px 9px 0 0; background:color-mix(in srgb,var(--accent) 22%,var(--bg-elevated)); border:1px solid var(--border-strong); border-bottom:none; color:var(--text-primary); font-size:12.5px; font-weight:600; cursor:pointer; animation:jpb-in .16s var(--ease-out,ease); }
#jumpPresentBar:hover { background:color-mix(in srgb,var(--accent) 30%,var(--bg-elevated)); }
#jumpPresentBar .jpb-btn { display:inline-flex; align-items:center; gap:5px; color:var(--accent); font-weight:700; }
@keyframes jpb-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.vcchat-head { display:flex; align-items:center; gap:9px; padding:0 16px; height:48px; border-bottom:1px solid var(--border); flex-shrink:0; color:var(--text-primary); }
.vcchat-title { font-size:15px; font-weight:700; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vcchat-close { background:none; border:none; color:var(--text-muted); font-size:24px; line-height:1; cursor:pointer; padding:0 4px; }
.vcchat-close:hover { color:var(--text-primary); }
.vcchat-msgs { flex:1; overflow-y:auto; padding:12px 6px 12px 12px; }
.vcchat-input { display:flex; align-items:flex-end; gap:6px; padding:10px 12px 14px; border-top:1px solid var(--border); flex-shrink:0; }
.vcchat-input textarea { flex:1; resize:none; background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; color:var(--text-primary); padding:9px 12px; font-size:14px; font-family:inherit; outline:none; max-height:120px; }
.vcchat-input textarea:focus { border-color:var(--accent); }
/* -- Profile stats tiles (settings → Account) -------------------- */
.pstat { background:var(--bg-surface); border:1px solid var(--border); border-radius:12px; padding:14px 16px; }
.pstat-val { font-family:var(--font-display,'Space Grotesk',sans-serif); font-size:24px; font-weight:800; color:var(--text-primary); font-variant-numeric:tabular-nums; }
.pstat-lbl { font-size:11.5px; font-weight:600; letter-spacing:.04em; color:var(--text-muted); margin-top:2px; }