/* V245 — DM status messages must reserve their full height.
   Without a non-shrinking flex basis, a multi-line error could collapse to a
   zero-height row while its text painted over the first bubble or image. */
#dmConversationStatus:not(:empty) {
  display: block !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-height: 1.25em !important;
  height: auto !important;
  max-height: none !important;
  margin: 5px 18px 8px !important;
  overflow: visible !important;
  overflow-wrap: anywhere;
  position: relative;
}

/* V245 — admins use a simple outline shield; developers retain the wrench. */
.admin-badge > .role-shield-icon {
  display: block !important;
  width: 19px !important;
  height: 19px !important;
  min-width: 19px !important;
  min-height: 19px !important;
  overflow: visible !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.15 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  color: inherit !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

.admin-badge > .role-shield-icon path {
  fill: none !important;
  stroke: currentColor !important;
}

/* Static markup from older builds is replaced as the module starts. Keep the
   former admin wrench hidden during that handoff so it never flashes first. */
.admin-badge > .role-wrench-icon {
  display: none !important;
}

body[data-auth-state="authenticated"]
  #authenticatedAccountIdentity
  .admin-badge > .role-shield-icon {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
}

@media (max-width: 430px) {
  #dmConversationStatus:not(:empty) {
    margin-inline: 12px !important;
  }
}

/* Keep Yap avatars aligned with the display-name row. Extra role badges must
   not make the avatar drift downward beside the taller author information. */
.post-author-row > .avatar-profile-button {
  align-self: flex-start !important;
  margin-top: 0 !important;
}

/* Contact info owns the whole DM surface. Paint its spotlight on that outer
   surface and clip it to the same rounded edge instead of an inset rectangle. */
#dmModal.dm-showing-contact-info > .dm-modal.modal-surface {
  padding: 0 !important;
  overflow: hidden !important;
  background:
    radial-gradient(ellipse 100% 52% at 50% 0%, color-mix(in srgb, var(--primary) 23%, transparent) 0%, color-mix(in srgb, var(--primary) 10%, transparent) 54%, transparent 100%),
    color-mix(in srgb, var(--card) 96%, var(--primary) 4%) !important;
  background-clip: padding-box !important;
}

#dmModal.dm-showing-contact-info .dm-contact-info-panel {
  background: transparent !important;
}

#dmModal.dm-showing-contact-info .dm-contact-info-header {
  grid-template-columns: 44px minmax(0, 1fr) !important;
  min-height: 60px !important;
  padding: 10px 16px 6px !important;
}

#dmModal.dm-showing-contact-info .dm-contact-info-header::after {
  content: none !important;
  display: none !important;
}

#dmModal.dm-showing-contact-info .dm-contact-info-header .dm-panel-header-copy {
  text-align: left !important;
}

#dmModal.dm-showing-contact-info .dm-contact-info-profile-button {
  width: min(100%, 220px) !important;
  min-height: 38px !important;
  padding: 6px 16px !important;
  font-size: 13px !important;
}

/* Shared-theme geometry: keep the picker full-width and preserve Yapper's
   rounded-rectangle language instead of inheriting the global pill rule. */
#dmModal.dm-showing-theme > .dm-modal.modal-surface {
  padding: 0 !important;
  overflow: hidden !important;
  background:
    radial-gradient(ellipse 100% 52% at 50% 0%, color-mix(in srgb, var(--primary) 23%, transparent) 0%, color-mix(in srgb, var(--primary) 10%, transparent) 54%, transparent 100%),
    color-mix(in srgb, var(--card) 96%, var(--primary) 4%) !important;
  background-clip: padding-box !important;
}

#dmModal.dm-showing-theme .dm-theme-panel {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  background: transparent !important;
}

#dmModal.dm-showing-theme .dm-theme-header {
  border-bottom: 0 !important;
  background: transparent !important;
}

#dmModal.dm-showing-theme .dm-theme-scroll {
  background: transparent !important;
}

#dmModal.dm-showing-theme .dm-theme-scroll {
  padding-inline: 10px !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

#dmModal .dm-theme-choice {
  border-radius: 22px !important;
}

#dmModal .dm-theme-preview {
  border-radius: 17px !important;
}

#dmModal .dm-contact-info-row,
#dmModal .dm-group-theme-button {
  border-radius: 22px !important;
}