/* MSG_SWARM_13 · details/right sheets · expand only · no blocking overlap
 * Cascade-last: closed by default · open via .g02-profile-open / data-vm-active
 */
html body[data-page="messenger"] .app > .details:not([data-vm-active]):not(.g02-open-force) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: fixed !important;
  inset: auto !important;
  z-index: -1 !important;
}

html body[data-page="messenger"].g02-profile-open .app > .details,
html body[data-page="messenger"].g02-profile-open .app > .details.g02-ready,
html.vm-on body[data-page="messenger"] .app > .details[data-vm-panel="info"][data-vm-active],
html body[data-page="messenger"] .app > .details.g02-open-force {
  display: flex !important;
  flex-direction: column !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: min(360px, 100vw) !important;
  max-width: min(360px, 100vw) !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 1260 !important;
  overflow: hidden !important;
  background: var(--panel, #fff) !important;
  border-left: 1px solid var(--bd, rgba(16, 24, 40, 0.12)) !important;
  box-shadow: -18px 0 48px rgba(15, 23, 42, 0.18) !important;
  transform: none !important;
  animation: msgSwarm13In 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes msgSwarm13In {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html body[data-page="messenger"].g02-profile-open .app > .details,
  html.vm-on body[data-page="messenger"] .app > .details[data-vm-panel="info"][data-vm-active] {
    animation: none !important;
  }
}

html body[data-page="messenger"] .msg-swarm13-scrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1255;
  background: rgba(8, 12, 24, 0.34);
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

html body[data-page="messenger"].g02-profile-open .msg-swarm13-scrim {
  display: block !important;
}

html body[data-page="messenger"] .tg-head .g02-info-btn,
html body[data-page="messenger"] .th-head .g02-info-btn,
html body[data-page="messenger"] .th-head .actions .g02-info-btn {
  display: inline-flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--mute);
  cursor: pointer;
  flex: none;
}

html body[data-page="messenger"].g02-profile-open .g02-info-btn {
  background: var(--acc-soft, rgba(29, 78, 216, 0.12)) !important;
  color: var(--acc, #1d4ed8) !important;
}

html body[data-page="messenger"].g02-profile-open .app > .details .g02-shell,
html body[data-page="messenger"].g02-profile-open .app > .details button,
html body[data-page="messenger"].g02-profile-open .app > .details a,
html.vm-on body[data-page="messenger"] .app > .details[data-vm-active] button,
html.vm-on body[data-page="messenger"] .app > .details[data-vm-active] a {
  pointer-events: auto !important;
  visibility: visible !important;
}

html body[data-page="messenger"].g02-profile-open .app > .details .g02-honest {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
  height: auto !important;
  width: auto !important;
  overflow: visible !important;
}

@media (max-width: 768px) {
  html body[data-page="messenger"].g02-profile-open .app > .details,
  html.vm-on body[data-page="messenger"] .app > .details[data-vm-panel="info"][data-vm-active] {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
  }
}