/* WhatsApp message typography and rhythm — 2026-08-21 */
html[data-theme="whatsapp"] body #message-list > .message-row {
  margin-block: 2px !important;
}
html[data-theme="whatsapp"] body #message-list > .message-row > .bubble {
  margin-block: 0 !important;
}
html[data-theme="whatsapp"] body #message-list .message-body-text {
  display: block;
  white-space: pre-wrap;
}
html[data-theme="whatsapp"] body #message-list .whatsapp-inline-bold {
  font-weight: 600 !important;
}

/* WhatsApp contact list cleanup — UI only, 2026-08-23 */
html[data-theme="whatsapp"] body #conversation-list .conversation-type-badge,
html[data-theme="whatsapp"] body #conversation-list .conversation-favourite-toggle,
html[data-theme="whatsapp"] body #wa-archived-row {
  display: none !important;
}

/* Keep every message family compact while preserving left/right direction. */
html[data-theme="whatsapp"] body #message-list > .message-row > .bubble,
html[data-theme="whatsapp"] body #message-list > .message-row > .bubble.has-template-message,
html[data-theme="whatsapp"] body #message-list > .message-row > .bubble:has(.special-message-card),
html[data-theme="whatsapp"] body #message-list > .message-row > .bubble:has(.whatsapp-quoted-message) {
  box-sizing: border-box !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}
html[data-theme="whatsapp"] body #message-list .bubble .special-message-card,
html[data-theme="whatsapp"] body #message-list .bubble .special-card-body,
html[data-theme="whatsapp"] body #message-list .bubble .whatsapp-quoted-message,
html[data-theme="whatsapp"] body #message-list .bubble .quoted-message-text {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}
html[data-theme="whatsapp"] body #message-list .bubble .special-message-card,
html[data-theme="whatsapp"] body #message-list .bubble .special-card-body {
  width: 100% !important;
}

@media (min-width: 721px) {
  html[data-theme="whatsapp"] body #message-list > .message-row > .bubble,
  html[data-theme="whatsapp"] body #message-list > .message-row > .bubble.has-template-message,
  html[data-theme="whatsapp"] body #message-list > .message-row > .bubble:has(.special-message-card),
  html[data-theme="whatsapp"] body #message-list > .message-row > .bubble:has(.whatsapp-quoted-message) {
    width: fit-content !important;
    max-width: min(380px, 48%) !important;
  }

  html[data-theme="whatsapp"] body #message-list > .message-row > .bubble.td-media-unified.has-compact-image,
  html[data-theme="whatsapp"] body #message-list > .message-row > .bubble.has-compact-image:has(> img.chat-media-image) {
    width: fit-content !important;
    min-width: 0 !important;
    max-width: min(300px, 42%) !important;
  }

  html[data-theme="whatsapp"] body #message-list > .message-row > .bubble.has-compact-image > img.chat-media-image {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: min(320px, 42vh) !important;
    object-fit: contain !important;
  }
}

@media (max-width: 720px) {
  html[data-theme="whatsapp"] body #message-list > .message-row > .bubble,
  html[data-theme="whatsapp"] body #message-list > .message-row > .bubble.has-template-message,
  html[data-theme="whatsapp"] body #message-list > .message-row > .bubble:has(.special-message-card),
  html[data-theme="whatsapp"] body #message-list > .message-row > .bubble:has(.whatsapp-quoted-message) {
    width: fit-content !important;
    max-width: min(86vw, calc(100vw - 52px)) !important;
  }

  html[data-theme="whatsapp"] body #message-list > .message-row > .bubble.td-media-unified.has-compact-image,
  html[data-theme="whatsapp"] body #message-list > .message-row > .bubble.has-compact-image:has(> img.chat-media-image) {
    width: fit-content !important;
    min-width: 0 !important;
    max-width: min(76vw, 300px) !important;
  }

  html[data-theme="whatsapp"] body #message-list > .message-row > .bubble.has-compact-image > img.chat-media-image {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: min(300px, 34vh) !important;
    object-fit: contain !important;
  }
}