/* =========================================================
   V252 — CHAT GEOMETRY, THEME PICKER, AND WALLPAPER MOTION
   ========================================================= */

/* Post answer is always a horizontal pill, including narrow phones. */
.yap-snippet-question .question-answer-composer .send-reply-button,
#yapFeed .yap-snippet-question .question-answer-composer .send-reply-button {
  width: auto !important;
  min-width: 112px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 17px !important;
  border-radius: 9999px !important;
  white-space: nowrap !important;
}

/* Keep wrapped/big messages as balanced bubbles. Only a genuinely rendered
   one-line message receives the full pill radius. */
#dmModal .dm-message-bubble:not(.dm-voice-message-bubble) {
  border-radius: 22px !important;
}

#dmModal .dm-message-bubble.is-single-line:not(.dm-voice-message-bubble) {
  border-radius: 9999px !important;
}

#dmModal .dm-message-bubble.is-multi-line:not(.dm-voice-message-bubble) {
  border-radius: 22px !important;
}

/* Preserve the modal's original size. The header, notice, and status stay
   fixed; only the existing theme cards form the invisible scroll region. */
#dmModal.dm-showing-theme .dm-theme-scroll {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 12px 10px max(14px, env(safe-area-inset-bottom)) !important;
}

#dmModal.dm-showing-theme .dm-theme-choices {
  flex: 0 1 auto !important;
  max-height: 446px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--primary) 48%, transparent) transparent;
}

#dmModal.dm-showing-theme .dm-theme-choices::-webkit-scrollbar {
  width: 4px;
}

#dmModal.dm-showing-theme .dm-theme-choices::-webkit-scrollbar-track {
  background: transparent;
}

#dmModal.dm-showing-theme .dm-theme-choices::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 48%, transparent);
}

#dmModal.dm-showing-theme .dm-theme-shared-note {
  flex: 0 0 auto !important;
  margin-top: 12px !important;
}

#dmModal.dm-showing-theme #dmThemeStatus:empty {
  display: none !important;
}

/* Background-position motion is steadier than translating the entire image
   layer in mobile Safari and stays active while the message list scrolls. */
.dm-message-viewport.dm-wallpaper-motion-active .dm-theme-wallpaper {
  inset: -10px !important;
  transform: scale(1.035) !important;
  background-position:
    calc(50% + var(--dm-wallpaper-motion-x, 0px))
    calc(-10px + var(--dm-wallpaper-motion-y, 0px)) !important;
  will-change: background-position !important;
}

@media (max-width: 540px) {
  .yap-snippet-question .question-answer-composer .send-reply-button,
  #yapFeed .yap-snippet-question .question-answer-composer .send-reply-button {
    min-width: 108px !important;
    padding-inline: 14px !important;
  }

  #dmModal .dm-message-bubble:not(.dm-voice-message-bubble),
  #dmModal .dm-message-bubble.is-multi-line:not(.dm-voice-message-bubble) {
    border-radius: 19px !important;
  }

  #dmModal .dm-message-bubble.is-single-line:not(.dm-voice-message-bubble) {
    border-radius: 9999px !important;
  }

  #dmModal.dm-showing-theme .dm-theme-choices {
    /* Four cards remain available at the old picker height. The new 8 Bit
       card begins immediately below and appears only after scrolling. */
    max-height: 406px !important;
  }
}


/* =========================================================
   V256 — DESKTOP DM INFO/THEME SURFACES
   Mobile keeps its existing full-screen layout exactly as-is.
   ========================================================= */
@media (min-width: 641px) {
  /* Stop these secondary screens from inheriting the giant 760x740
     conversation window. They should feel like compact desktop sheets. */
  #dmModal.dm-showing-contact-info > .dm-modal.modal-surface {
    width: min(620px, calc(100vw - 56px)) !important;
    height: auto !important;
    max-height: min(560px, calc(100dvh - 56px)) !important;
    border-radius: 30px !important;
  }

  #dmModal.dm-showing-theme > .dm-modal.modal-surface {
    width: min(700px, calc(100vw - 56px)) !important;
    height: auto !important;
    max-height: min(640px, calc(100dvh - 56px)) !important;
    border-radius: 30px !important;
  }

  /* Contact info: keep the exact visual language, just use desktop space
     intentionally and remove the huge dead lower half. */
  #dmModal.dm-showing-contact-info .dm-contact-info-panel {
    flex: 0 1 auto !important;
    min-height: 0 !important;
  }

  #dmModal.dm-showing-contact-info .dm-contact-info-header {
    min-height: 62px !important;
    padding: 11px 18px 7px !important;
  }

  #dmModal.dm-showing-contact-info .dm-contact-info-scroll {
    flex: 0 1 auto !important;
    max-height: calc(100dvh - 150px) !important;
    padding: 6px 24px 22px !important;
  }

  #dmModal.dm-showing-contact-info .dm-contact-info-hero,
  #dmModal.dm-showing-contact-info .dm-contact-info-card {
    width: min(100%, 520px) !important;
  }

  #dmModal.dm-showing-contact-info .dm-contact-info-hero {
    padding-top: 4px !important;
  }

  #dmModal.dm-showing-contact-info .dm-contact-info-card {
    margin-top: 7px !important;
  }

  /* Theme picker: desktop gets a compact picker instead of an oversized
     conversation-sized shell with a list floating at the top. */
  #dmModal.dm-showing-theme .dm-theme-panel {
    flex: 0 1 auto !important;
    min-height: 0 !important;
  }

  #dmModal.dm-showing-theme .dm-theme-header {
    min-height: 64px !important;
    padding: 10px 18px !important;
  }

  #dmModal.dm-showing-theme .dm-theme-scroll {
    flex: 0 1 auto !important;
    max-height: calc(100dvh - 150px) !important;
    padding: 8px 18px 18px !important;
  }

  #dmModal.dm-showing-theme .dm-theme-choices {
    width: min(100%, 640px) !important;
    max-height: 438px !important;
    gap: 9px !important;
    padding-right: 3px !important;
  }

  #dmModal.dm-showing-theme .dm-theme-choice {
    min-height: 92px !important;
    grid-template-columns: 104px minmax(0, 1fr) 28px !important;
    gap: 11px !important;
    padding: 8px 12px 8px 8px !important;
  }

  #dmModal.dm-showing-theme .dm-theme-preview {
    height: 74px !important;
  }

  #dmModal.dm-showing-theme .dm-theme-shared-note {
    margin-top: 10px !important;
  }
}