/* ==========================================================================
   css/layouts/mobile-base.css
   Split from app.html (build 2026.10.08.9-beta), original lines 4737-4780.
   Rules are in their ORIGINAL order; load order is defined in index.html.
   ========================================================================== */
/* -- MOBILE ---------------------------------------------------- */
.mobile-menu-btn { display:none;background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px 6px;border-radius:6px;flex-shrink:0 }
.mobile-menu-btn:hover { color:var(--text-primary);background:var(--bg-hover) }
/* Real (non-floating) top bar shown on mobile in views that hide the channel header
   (discovery / admin / friends), so there's always a way to open the sidebar. */
.mobile-view-bar { display:none }

/* Pause every running CSS animation while the window isn't focused. A backgrounded
   window was still compositing the animated gradient background, animated names,
   spinners, etc. at ~18% CPU; this drops it to near-zero when you're not looking.
   body.rift-idle does the same after a spell of no interaction WHILE focused: the CEF
   off-screen renderer composites every painted frame, so continuously-animating
   decorations kept the GPU busy (~20%) even sitting idle. Any input lifts it instantly. */
body.win-blur, body.win-blur *, body.win-blur *::before, body.win-blur *::after,
body.rift-idle, body.rift-idle *, body.rift-idle *::before, body.rift-idle *::after {
  animation-play-state: paused !important;
}
/* Custom paint: the channel header gets the wallpaper-repaint treatment (see
   GlobalRiftCss theme-grad rules) - a translucent bg here STACKED on the panel
   behind it and read DARKER than the chat, the opposite of the reference. */
/* Customize-theme panel DOCKS: it pushes the whole app over instead of floating on
   top of it (reference-client appearance editor behavior). #app has an inline
   width:100%, hence the !important. The native title bar and the fixed min/max/close
   cluster must slide with it or they'd sit stranded over the panel. On mobile
   there's no room - keep the overlay. */
#app, #nativeTitleBar { transition: width .25s ease; }
.nt-winbtns { transition: right .25s ease; }
body.ctp-open #app { width: calc(100% - 300px) !important; }
body.ctp-open #nativeTitleBar { width: calc(100% - 300px); }
body.ctp-open .nt-winbtns { right: 300px; }
@media (max-width: 768px) {
  body.ctp-open #app { width: 100% !important; }
  body.ctp-open #nativeTitleBar { width: 100%; }
  body.ctp-open .nt-winbtns { right: 0; }
}

/* The docked DM panel pushes ONLY the app content (#app) left by its width - it sits
   BELOW the native title bar and never touches it or the window controls. */
body.dmpop-open #app { width: calc(100% - var(--dmp-w)) !important; }
/* Start below the title bar. This used to be gated on body.native because the bar was
   app-only; it is always visible now, so on the web the panel was covering it. */
body .dmp { top: var(--titlebar-h, 32px); }
body.mobile-shell .dmp { top: 0; }   /* no title bar there to clear */
@media (max-width: 768px) {
  body.dmpop-open #app { width: 100% !important; }   /* on a phone the panel overlays instead */
}