/* Aceleres — desktop media sizing and contrast-safe metadata. */
@media (min-width: 768px) {
  .message-bubble-container .acl-gif-bubble,
  .message-bubble-container [data-bubble-name='gif'].acl-video-bubble {
    width: auto !important;
    height: auto !important;
    max-width: min(320px, calc(100vw - 64px)) !important;
  }

  /* Largura do player do GIF: 100% da bolha, altura acompanhando, teto de
     360px. Esta é a ÚNICA regra que decide isso — este ficheiro é o último a
     carregar, e é por isso que ela vive aqui: em aceleres-overrides.css havia
     uma cópia com os mesmos valores, mas lá ela nunca chegava a valer, porque
     mais abaixo no próprio ficheiro (bloco dos 180px) o mesmo seletor era
     redefinido. Essa cópia morta foi removida. */
  .message-bubble-container .acl-gif-bubble > div.relative,
  .message-bubble-container
    [data-bubble-name='gif']
    :is(.acl-video-bubble__player, .acl-video-bubble__player--gif) {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 360px !important;
  }

  .message-bubble-container .acl-gif-bubble > div.relative > img,
  .message-bubble-container
    [data-bubble-name='gif']
    :is(.acl-video-bubble__asset, video) {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 360px !important;
    object-fit: contain !important;
  }

  .message-bubble-container .acl-sticker-bubble,
  .message-bubble-container .acl-sticker-bubble > div.relative {
    width: auto !important;
    max-width: min(240px, calc(100vw - 64px)) !important;
    max-height: 240px !important;
  }

  .message-bubble-container .acl-sticker-bubble > div.relative > img {
    width: auto !important;
    height: auto !important;
    max-width: min(240px, calc(100vw - 64px)) !important;
    max-height: 240px !important;
    object-fit: contain !important;
  }

  .message-bubble-container
    :is(
      [data-bubble-name='image'],
      [data-bubble-name='video'],
      [data-bubble-name='gif'],
      [data-bubble-name='sticker']
    )
    > .acl-media-sender {
    display: inline-flex !important;
    width: fit-content !important;
    max-width: calc(100% - 76px) !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    color: #ffffff !important;
    background: rgba(15, 23, 42, 0.58) !important;
    line-height: 1.2 !important;
    opacity: 1 !important;
    text-overflow: ellipsis !important;
    text-shadow: none !important;
    white-space: nowrap !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
  }

  .message-bubble-container
    :is(
      [data-bubble-name='image'],
      [data-bubble-name='video'],
      [data-bubble-name='gif'],
      [data-bubble-name='sticker']
    )
    > div[class~='absolute'][class~='bottom-2'][class~='right-2'] {
    padding: 0 !important;
    border-radius: 0 !important;
    color: #ffffff !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .message-bubble-container
    :is(
      [data-bubble-name='image'],
      [data-bubble-name='video'],
      [data-bubble-name='gif'],
      [data-bubble-name='sticker']
    )
    > div[class~='absolute'][class~='bottom-2'][class~='right-2']
    time {
    color: inherit !important;
    font-weight: inherit !important;
  }

  /* Media metadata must not compete with the pixels beneath it. Keep it in
     the normal message flow and close the card with the WhatsApp accent. */
  .message-bubble-container
    :is(
      [data-bubble-name='image'],
      [data-bubble-name='video'],
      [data-bubble-name='gif'],
      [data-bubble-name='sticker']
    ) {
    box-sizing: border-box !important;
    border-bottom: 0 !important;
  }

  .message-bubble-container
    :is(
      [data-bubble-name='image'],
      [data-bubble-name='video'],
      [data-bubble-name='gif'],
      [data-bubble-name='sticker']
    )
    > .acl-media-sender {
    position: static !important;
    display: block !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 6px 6px !important;
    padding: 0 !important;
    overflow: visible !important;
    border-radius: 0 !important;
    color: #26342f !important;
    background: transparent !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-overflow: clip !important;
    text-shadow: none !important;
    white-space: normal !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .message-bubble-container
    :is(
      [data-bubble-name='image'],
      [data-bubble-name='video'],
      [data-bubble-name='gif'],
      [data-bubble-name='sticker']
    )
    > div[class~='absolute'][class~='bottom-2'][class~='right-2'] {
    position: static !important;
    inset: auto !important;
    display: flex !important;
    width: 100% !important;
    margin: 6px 0 0 !important;
    padding: 0 2px !important;
    justify-content: flex-end !important;
    border-radius: 0 !important;
    color: #52766a !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Sender and timestamp stay on the media itself. Their surface follows the
     message bubble, not the changing pixels of the attachment. */
  .message-bubble-container
    :is(
      [data-bubble-name='image'],
      [data-bubble-name='video'],
      [data-bubble-name='gif'],
      [data-bubble-name='sticker']
    ) {
    padding-bottom: 0 !important;
  }

  .message-bubble-container
    :is(
      [data-bubble-name='image'],
      [data-bubble-name='video'],
      [data-bubble-name='gif'],
      [data-bubble-name='sticker']
    )
    > .acl-media-sender {
    position: absolute !important;
    top: 8px !important;
    right: auto !important;
    left: 8px !important;
    z-index: 30 !important;
    display: inline-flex !important;
    width: fit-content !important;
    max-width: calc(100% - 32px) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    text-shadow: none !important;
    white-space: nowrap !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
  }

  .message-bubble-container
    :is(
      [data-bubble-name='image'],
      [data-bubble-name='video'],
      [data-bubble-name='gif'],
      [data-bubble-name='sticker']
    )
    > div[class~='absolute'][class~='bottom-2'][class~='right-2'] {
    position: absolute !important;
    top: auto !important;
    right: 8px !important;
    bottom: 16px !important;
    left: auto !important;
    z-index: 30 !important;
    display: flex !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-content: flex-end !important;
    border-radius: 0 !important;
    color: #ffffff !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .message-bubble-container
    .left-bubble:is(
      [data-bubble-name='image'],
      [data-bubble-name='video'],
      [data-bubble-name='gif'],
      [data-bubble-name='sticker']
    )
    > .acl-media-sender,
  .message-bubble-container
    .left-bubble:is(
      [data-bubble-name='image'],
      [data-bubble-name='video'],
      [data-bubble-name='gif'],
      [data-bubble-name='sticker']
    )
    > div[class~='absolute'][class~='bottom-2'][class~='right-2'] {
    color: #ffffff !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .message-bubble-container
    .right-bubble:is(
      [data-bubble-name='image'],
      [data-bubble-name='video'],
      [data-bubble-name='gif'],
      [data-bubble-name='sticker']
    )
    > .acl-media-sender,
  .message-bubble-container
    .right-bubble:is(
      [data-bubble-name='image'],
      [data-bubble-name='video'],
      [data-bubble-name='gif'],
      [data-bubble-name='sticker']
    )
    > div[class~='absolute'][class~='bottom-2'][class~='right-2'] {
    color: #ffffff !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Images use their intrinsic dimensions. Media alone may use the complete
     conversation row; text bubbles keep their existing half-row limit. */
  .acl-message-bubble-row:has([data-bubble-name='image'])
    > .aceleres-bubble-with-actions,
  .acl-message-bubble-row:has([data-bubble-name='image'])
    > .acl-outgoing-image-wrapper {
    max-width: 100% !important;
  }

  /* These mirror the legacy image selectors exactly, so their old 408px and
     half-row caps cannot win the cascade for an image message. */
  .message-bubble-container[data-attachment-type='image']
    .acl-message-bubble-row
    > .aceleres-bubble-with-actions,
  .message-bubble-container[data-outgoing-image='true']
    .acl-message-bubble-row
    > .aceleres-bubble-with-actions.acl-outgoing-image-wrapper {
    max-width: 100% !important;
  }

  .message-bubble-container[data-attachment-type='image']
    [data-bubble-name='image'].acl-image-bubble,
  .message-bubble-container[data-attachment-type='image']
    [data-bubble-name='image'].acl-image-bubble
    > div.relative,
  .message-bubble-container[data-attachment-type='image']
    [data-bubble-name='image'].acl-image-bubble
    > div.relative
    > img {
    max-width: 100% !important;
  }

  .message-bubble-container[data-outgoing-image='true']
    .right-bubble[data-bubble-name='image']
    > div[class~='absolute'][class~='bottom-2'][class~='right-2'] {
    overflow: hidden !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .message-bubble-container[data-outgoing-image='true']
    .right-bubble[data-bubble-name='image']
    > div[class~='absolute'][class~='bottom-2'][class~='right-2']
    > * {
    color: #ffffff !important;
  }

  /* Every layer around a photo must hug the actual media. A former full-row
     rule left portrait images inside an oversized green outgoing bubble. */
  .message-bubble-container[data-attachment-type='image']
    .acl-message-bubble-row
    > .aceleres-bubble-with-actions {
    width: fit-content !important;
    max-width: min(420px, calc(100vw - 48px)) !important;
    flex: 0 1 auto !important;
  }

  /* Photos close with the bubble's own rounded surface. Avoid the artificial
     green rule and keep the compact timestamp over the image. */
  .message-bubble-container[data-attachment-type='image']
    [data-bubble-name='image'].acl-image-bubble {
    padding: 0 !important;
    border-bottom: 0 !important;
  }

  .message-bubble-container[data-attachment-type='image']
    [data-bubble-name='image'].acl-image-bubble
    > div[class~='absolute'][class~='bottom-2'][class~='right-2'] {
    bottom: 8px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
  }

  /* Tone detection used to add a light or dark text shadow directly to the
     metadata. The solid bubble-colored chip already provides contrast. */
  .message-bubble-container[data-attachment-type='image']
    [data-bubble-name='image'].acl-image-bubble[data-time-tone]
    > div[class~='absolute'][class~='bottom-2'][class~='right-2'] {
    right: 14px !important;
    bottom: 14px !important;
    gap: 2px !important;
    align-items: center !important;
    padding: 0 !important;
    border-radius: 0 !important;
    color: #ffffff !important;
    background: transparent !important;
    box-shadow: none !important;
    line-height: 14px !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85) !important;
    filter: none !important;
  }

  .message-bubble-container[data-attachment-type='image']
    [data-bubble-name='image'].acl-image-bubble[data-time-tone]
    > div[class~='absolute'][class~='bottom-2'][class~='right-2']
    time {
    display: inline-block !important;
    color: #ffffff !important;
    font-family: inherit !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    font-variant-numeric: tabular-nums !important;
    line-height: 14px !important;
    letter-spacing: 0 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85) !important;
    filter: none !important;
  }

  /* Sender tone detection also applied a shadow directly to the label.
     Both metadata chips sit eight pixels inside the actual image surface. */
  .message-bubble-container[data-attachment-type='image']
    [data-bubble-name='image'].acl-image-bubble[data-sender-tone]
    > .acl-media-sender {
    top: 14px !important;
    left: 14px !important;
    max-width: calc(100% - 28px) !important;
    text-shadow: none !important;
    filter: none !important;
  }

  /* GIFs use a four-pixel media frame, so a 12px offset keeps their metadata
     at the same visual distance from the asset as photo metadata. */
  .message-bubble-container
    [data-bubble-name='gif'].acl-gif-bubble[data-time-tone]
    > div[class~='absolute'][class~='bottom-2'][class~='right-2'] {
    right: 12px !important;
    bottom: 12px !important;
    gap: 2px !important;
    align-items: center !important;
    padding: 3px 6px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 14px !important;
    text-shadow: none !important;
    filter: none !important;
  }

  .message-bubble-container
    [data-bubble-name='gif'].acl-gif-bubble[data-time-tone]
    > div[class~='absolute'][class~='bottom-2'][class~='right-2']
    time {
    color: inherit !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    font-variant-numeric: tabular-nums !important;
    line-height: 14px !important;
    text-shadow: none !important;
    filter: none !important;
  }

  .message-bubble-container
    .left-bubble[data-bubble-name='gif'].acl-gif-bubble[data-time-tone]
    > div[class~='absolute'][class~='bottom-2'][class~='right-2'] {
    color: #26342f !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.14) !important;
  }

  .message-bubble-container
    .right-bubble[data-bubble-name='gif'].acl-gif-bubble[data-time-tone]
    > div[class~='absolute'][class~='bottom-2'][class~='right-2'] {
    color: #245044 !important;
    background: rgba(217, 253, 211, 0.94) !important;
    box-shadow: 0 1px 3px rgba(0, 76, 61, 0.16) !important;
  }

  /* A missing attachment is a compact status card, not a photo canvas.
     Restore its intrinsic width after the full-row rules used by loaded
     desktop photos. */
  .message-bubble-container[data-attachment-type='image']:has(
      [data-media-state='unavailable']
    )
    .acl-message-bubble-row
    > .aceleres-bubble-with-actions,
  .message-bubble-container[data-attachment-type='image']:has(
      [data-media-state='unavailable']
    )
    .acl-message-bubble-row
    > .aceleres-bubble-with-actions
    > .aceleres-bubble-surface {
    width: fit-content !important;
    max-width: min(300px, calc(100vw - 64px)) !important;
    flex: 0 1 auto !important;
  }

  .message-bubble-container[data-attachment-type='image']
    [data-bubble-name='image'].acl-image-bubble[data-media-state='unavailable'] {
    width: min(260px, calc(100vw - 64px)) !important;
    min-width: 0 !important;
    max-width: min(260px, calc(100vw - 64px)) !important;
    flex: 0 0 auto !important;
  }

}

/* Nome do remetente acima da imagem, fora da área visual da mídia. */
.message-bubble-container
  [data-bubble-name='image'].acl-image-bubble
  > .acl-media-sender {
  position: static !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 10px 10px 5px !important;
  overflow: visible !important;
  border-radius: 0 !important;
  background: #d9fdd3 !important;
  color: #000 !important;
  font-weight: 600 !important;
  line-height: 18px !important;
  text-align: left !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.message-bubble-container
  [data-bubble-name='image'].acl-image-bubble:not(
    :has(> div.min-w-0.break-words > .acl-image-bubble__caption)
  )
  > div[class~='absolute'][class~='right-2'] {
  position: absolute !important;
  top: auto !important;
  right: 8px !important;
  bottom: 8px !important;
  left: auto !important;
  z-index: 30 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 0 !important;
  color: #fff !important;
  background: transparent !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85) !important;
}

.message-bubble-container
  .left-bubble[data-bubble-name='image'].acl-image-bubble
  > .acl-media-sender {
  background: #fff !important;
  color: #000 !important;
}

.message-bubble-container
  .left-bubble[data-bubble-name='image'].acl-image-bubble
  .acl-image-bubble__asset-frame {
  border: 4px solid #fff !important;
}