dialog::backdrop { background:rgba(3,4,8,.78) !important; }
.overlay:not(.updating) { background:rgba(3,4,8,.78); }
.menu:not([hidden]),.pages-menu,.pop:not([hidden]),.voice-pop:not([hidden]),.color-pop:not([hidden]) { box-shadow:0 0 0 100vmax rgba(3,4,8,.6),0 12px 40px #0008; }
dialog.image-lightbox { position:fixed; inset:0; width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; border-radius:0; box-shadow:none; background:rgba(5,5,9,.95); overflow:hidden; }
.image-lightbox > h2 { display:none; }
.image-lightbox-tools { position:absolute; inset:14px 18px auto auto; display:flex; align-items:center; gap:8px; z-index:2; }
.image-lightbox-tools button { color:#eee; background:#202025; border:0; border-radius:8px; min-width:36px; min-height:36px; padding:6px 12px; cursor:pointer; }
.image-lightbox-stage { position:absolute; inset:64px 0 24px; display:flex; align-items:center; justify-content:center; overflow:hidden; touch-action:none; }
dialog.image-lightbox .image-lightbox-stage > img { display:block; width:auto; height:auto; max-width:calc(100vw - 48px); max-height:calc(100dvh - 112px); margin:0; border:0; border-radius:0; outline:none; box-shadow:none; object-fit:contain; cursor:zoom-in; user-select:none; transform-origin:center; will-change:transform; flex-shrink:0; }
.image-lightbox-stage.zoomed > img { cursor:grab; }.image-lightbox-stage.zoomed > img:active { cursor:grabbing; }
.rail-dms { display:flex; gap:8px; flex:none; padding:8px 0; border-bottom:1px solid var(--border); max-height:26vh; overflow:auto; scrollbar-width:none; }
.rail-dms[hidden] { display:none; }.rail-dms .direct-unread { position:relative; width:44px; height:44px; padding:0; border:0; border-radius:50%; flex:none; }
.rail-dms .avatar { width:44px; height:44px; border-radius:50%; }.rail-dms .badge { position:absolute; bottom:-2px; right:-3px; top:auto; border:2px solid var(--bg); }
body.rail-on .rail-dms { flex-direction:column; align-items:center; width:100%; }

/* A largura fica reservada: revelar a barra não desloca o conteúdo. */
@supports selector(::-webkit-scrollbar) {
  html,body * { --scroll-thumb:transparent; scrollbar-width:auto !important; scrollbar-color:auto !important; }
  html:hover,body *:hover { --scroll-thumb:var(--sb); }
  html::-webkit-scrollbar,body *::-webkit-scrollbar { display:block !important; width:6px !important; height:6px !important; background:transparent; }
  html::-webkit-scrollbar-thumb,body *::-webkit-scrollbar-thumb { background-color:var(--scroll-thumb); border:0; border-radius:6px; }
  html:hover::-webkit-scrollbar-thumb,body *:hover::-webkit-scrollbar-thumb { background-color:var(--sb); }
  html::-webkit-scrollbar-thumb:hover,body *::-webkit-scrollbar-thumb:hover { background-color:var(--sb-hover); }
  html::-webkit-scrollbar-track,body *::-webkit-scrollbar-track,html::-webkit-scrollbar-corner,body *::-webkit-scrollbar-corner { background:transparent; }
}
@supports not selector(::-webkit-scrollbar) {
  html,body * { scrollbar-width:thin !important; scrollbar-color:transparent transparent !important; }
  html:hover,body *:hover { scrollbar-color:var(--sb) transparent !important; }
}
@media(hover:none) {
  html,body * { scrollbar-color:var(--sb) transparent !important; }
}