/**
 * Skin canônica — bolhas de timeline (texto in/out + sistema).
 * Autoridade visual compartilhada: Chats + espelho Relatórios (.rel-dw-chats-mirror).
 * Analista/cliente: mesma escala (pad/fonte); fills e cauda distintos.
 */

#page-chats,
#page-relatorios .cv-thread.rel-dw-chats-mirror {
    --chats-info-card-bg: #ffffff;
    --chats-info-card-border: #c8daf3;
    --chats-info-card-radius: 0.75rem;
    --chats-info-card-pad: 0.875rem 1rem;
    --chats-info-card-shadow: 0 0.0625rem 0.125rem rgba(13, 40, 80, 0.06);
    /* Cliente: fill mais quieto; analista branco com borda um pouco mais azul. */
    --chats-client-card-bg: #eef2f7;
    --chats-client-card-border: #d3dce8;
    --chats-msg-text-ink: #1c2a44;
    --chats-msg-time-ink: #8b97ab;
    --chats-msg-text-max-w: 62%;
    --chats-bubble-radius: 1rem;
    --chats-bubble-tail: 0.3125rem;
    --chats-bubble-pad: 0.5rem 0.75rem 0.4375rem;
    --chats-bubble-shadow: 0 0.0625rem 0.125rem rgba(13, 40, 80, 0.05);
    --chats-bubble-shadow-hover: 0 0.125rem 0.625rem rgba(13, 40, 80, 0.10);
    /* Bolha informativa (.chats-event--system: "Triagem TR-… iniciada" etc.) — token PRÓPRIO,
       separado de --chats-info-card-bg. Antes as duas eram a mesma variável, então a bolha
       informativa e a bolha real do analista (que também usa --chats-info-card-bg) ficavam
       visualmente idênticas. Azul leve fosco = default (filas Ativos/Pausados/Finalizados). */
    --chats-system-event-bg: linear-gradient(180deg, #e6effc 0%, #eff5fd 100%);
    --chats-system-event-border: #aecaf0;
}

/* ---------- Relatórios: layout de row/bolha (espelho Chats, sem carregar la-v2) ---------- */
#page-relatorios .cv-thread.rel-dw-chats-mirror {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
    align-items: stretch;
}

/* Respiro entre falas; consecutivas do mesmo remetente ficam juntas. */
#page-chats .chats-timeline {
    gap: 1.125rem !important;
}
#page-chats .chats-msg-row:has(.chats-msg--group-next),
#page-relatorios .cv-thread.rel-dw-chats-mirror .chats-msg-row:has(.chats-msg--group-next) {
    margin-top: -0.875rem;
}

#page-relatorios .cv-thread.rel-dw-chats-mirror .chats-msg-row {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 0;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
}

#page-relatorios .cv-thread.rel-dw-chats-mirror .chats-msg-row--in {
    justify-content: flex-start;
}

#page-relatorios .cv-thread.rel-dw-chats-mirror .chats-msg-row--out {
    justify-content: flex-end;
}

#page-relatorios .cv-thread.rel-dw-chats-mirror .chats-msg-row .chats-msg {
    position: relative;
    flex: 0 0 auto;
    width: fit-content;
    max-width: min(var(--chats-msg-text-max-w), 100%);
    min-width: 0;
    display: block;
    box-sizing: border-box;
}

#page-relatorios .cv-thread.rel-dw-chats-mirror .chats-msg-content {
    min-width: 0;
}

#page-relatorios .cv-thread.rel-dw-chats-mirror .chats-msg-body-inner--text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

#page-relatorios .cv-thread.rel-dw-chats-mirror .chats-msg-body {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#page-relatorios .cv-thread.rel-dw-chats-mirror .chats-msg-tail {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    align-self: flex-end;
}

#page-relatorios .cv-thread.rel-dw-chats-mirror .chats-msg-row--in .chats-msg-tail {
    align-self: flex-start;
}

#page-relatorios .cv-thread.rel-dw-chats-mirror .chats-msg-select-cb {
    display: none !important;
}

/* ---------- Sistema / informativa — shrink-wrap + centralizada ---------- */
/* flex-shrink:0: overflow≠visible em filho de coluna flex permite encolher
   abaixo do conteúdo (corta o <time>) quando a lista de triagem enche a viewport. */
#page-chats .chats-event--system,
#page-chats .chats-timeline-event.chats-event--system,
#page-relatorios .cv-thread.rel-dw-chats-mirror .chats-event--system,
#page-relatorios .cv-thread.rel-dw-chats-mirror .chats-timeline-event.chats-event--system {
    display: inline-flex !important;
    align-items: flex-start !important;
    gap: 0 !important;
    align-self: center !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    width: fit-content !important;
    max-width: min(57.5rem, 96%) !important;
    height: auto !important;
    min-height: min-content !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    background: var(--chats-system-event-bg) !important;
    border: 0.0625rem solid var(--chats-system-event-border) !important;
    border-radius: var(--chats-info-card-radius) !important;
    padding: var(--chats-info-card-pad) !important;
    box-shadow: var(--chats-info-card-shadow) !important;
    text-align: left !important;
    overflow: visible !important;
}

#page-chats .chats-event--system .chats-timeline-event-marker,
#page-relatorios .cv-thread.rel-dw-chats-mirror .chats-event--system .chats-timeline-event-marker {
    display: none !important;
}

#page-chats .chats-event--system .chats-timeline-event-body,
#page-relatorios .cv-thread.rel-dw-chats-mirror .chats-event--system .chats-timeline-event-body {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 0.125rem !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: min-content !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
}

#page-chats .chats-event--system .chats-timeline-event-mainline,
#page-relatorios .cv-thread.rel-dw-chats-mirror .chats-event--system .chats-timeline-event-mainline {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

#page-chats .chats-event--system .chats-timeline-event-title,
#page-relatorios .cv-thread.rel-dw-chats-mirror .chats-event--system .chats-timeline-event-title {
    margin: 0 !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    color: #0a5fd4 !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

#page-chats .chats-event--system .chats-timeline-event-desc,
#page-relatorios .cv-thread.rel-dw-chats-mirror .chats-event--system .chats-timeline-event-desc {
    display: none !important;
}

#page-chats .chats-event--system .chats-timeline-event-ticket,
#page-relatorios .cv-thread.rel-dw-chats-mirror .chats-event--system .chats-timeline-event-ticket {
    font-weight: 700 !important;
    color: var(--f5c-ink-1, #0F1B17) !important;
}

#page-chats .chats-event--system .chats-timeline-event-triagem,
#page-relatorios .cv-thread.rel-dw-chats-mirror .chats-event--system .chats-timeline-event-triagem {
    font-weight: 700 !important;
    color: var(--warn-dot, #d4a017) !important;
}

#page-chats .chats-event--system .chats-timeline-event-time,
#page-relatorios .cv-thread.rel-dw-chats-mirror .chats-event--system .chats-timeline-event-time {
    display: block !important;
    margin: 0 !important;
    font-size: 0.71875rem !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    color: #7c8aa6 !important;
    font-variant-numeric: tabular-nums;
    /* Mesmo padrão das bolhas de mensagem: horário no canto inferior direito. */
    align-self: flex-end !important;
    flex-shrink: 0 !important;
}

/* ---------- Cliente (texto) — bolha, canto de cauda à esquerda ---------- */
#page-chats .chats-msg-row .chats-msg.chats-msg-in:not(.chats-msg-nota-interna):not(.chats-msg--media-image):not(.chats-msg--media-video):not(.chats-msg--media-sticker):not(.chats-msg--media-gif):not(.chats-msg--apagada),
#page-relatorios .cv-thread.rel-dw-chats-mirror .chats-msg-row .chats-msg.chats-msg-in.chats-msg--text {
    max-width: min(var(--chats-msg-text-max-w), 100%) !important;
    padding: var(--chats-bubble-pad) !important;
    border-radius: var(--chats-bubble-radius) var(--chats-bubble-radius) var(--chats-bubble-radius) var(--chats-bubble-tail) !important;
    font-size: 0.9375rem !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    background: var(--chats-client-card-bg) !important;
    border: 0.0625rem solid var(--chats-client-card-border) !important;
    color: var(--chats-msg-text-ink) !important;
    box-shadow: var(--chats-bubble-shadow) !important;
    transition: box-shadow 120ms ease, border-color 120ms ease;
}

/* ---------- Analista (texto) — bolha branca, canto de cauda à direita ---------- */
#page-chats .chats-msg-row .chats-msg.chats-msg-out:not(.chats-msg-nota-interna):not(.chats-msg--media-image):not(.chats-msg--media-video):not(.chats-msg--media-sticker):not(.chats-msg--media-gif):not(.chats-msg--apagada),
#page-relatorios .cv-thread.rel-dw-chats-mirror .chats-msg-row .chats-msg.chats-msg-out.chats-msg--text {
    max-width: min(var(--chats-msg-text-max-w), 100%) !important;
    padding: var(--chats-bubble-pad) !important;
    border-radius: var(--chats-bubble-radius) var(--chats-bubble-radius) var(--chats-bubble-tail) var(--chats-bubble-radius) !important;
    font-size: 0.9375rem !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    background: var(--chats-info-card-bg) !important;
    border: 0.0625rem solid var(--chats-info-card-border) !important;
    color: var(--chats-msg-text-ink) !important;
    box-shadow: var(--chats-bubble-shadow) !important;
    transition: box-shadow 120ms ease, border-color 120ms ease;
}

#page-chats .chats-msg-row:hover .chats-msg.chats-msg-in:not(.chats-msg-nota-interna):not(.chats-msg--media-image):not(.chats-msg--media-video):not(.chats-msg--media-sticker):not(.chats-msg--media-gif):not(.chats-msg--apagada),
#page-chats .chats-msg-row:hover .chats-msg.chats-msg-out:not(.chats-msg-nota-interna):not(.chats-msg--media-image):not(.chats-msg--media-video):not(.chats-msg--media-sticker):not(.chats-msg--media-gif):not(.chats-msg--apagada),
#page-relatorios .cv-thread.rel-dw-chats-mirror .chats-msg-row:hover .chats-msg.chats-msg--text {
    box-shadow: var(--chats-bubble-shadow-hover) !important;
}

#page-chats .chats-msg-in.chats-msg--group-next:not(.chats-msg-nota-interna):not(.chats-msg--media-image):not(.chats-msg--media-video):not(.chats-msg--media-sticker):not(.chats-msg--media-gif):not(.chats-msg--apagada),
#page-relatorios .cv-thread.rel-dw-chats-mirror .chats-msg-in.chats-msg--group-next.chats-msg--text {
    border-top-left-radius: 0.625rem !important;
}

#page-chats .chats-msg-out.chats-msg--group-next:not(.chats-msg-nota-interna):not(.chats-msg--media-image):not(.chats-msg--media-video):not(.chats-msg--media-sticker):not(.chats-msg--media-gif):not(.chats-msg--apagada),
#page-relatorios .cv-thread.rel-dw-chats-mirror .chats-msg-out.chats-msg--group-next.chats-msg--text {
    border-top-right-radius: 0.625rem !important;
}

#page-chats .chats-msg-in:not(.chats-msg-nota-interna):not(.chats-msg--media-image):not(.chats-msg--media-video):not(.chats-msg--media-sticker):not(.chats-msg--media-gif):not(.chats-msg--apagada) .chats-msg-body,
#page-chats .chats-msg-in:not(.chats-msg-nota-interna):not(.chats-msg--media-image):not(.chats-msg--media-video):not(.chats-msg--media-sticker):not(.chats-msg--media-gif):not(.chats-msg--apagada) .chats-msg-body-inner,
#page-relatorios .cv-thread.rel-dw-chats-mirror .chats-msg-in.chats-msg--text .chats-msg-body,
#page-relatorios .cv-thread.rel-dw-chats-mirror .chats-msg-in.chats-msg--text .chats-msg-body-inner,
#page-chats .chats-msg-out:not(.chats-msg-nota-interna):not(.chats-msg--media-image):not(.chats-msg--media-video):not(.chats-msg--media-sticker):not(.chats-msg--media-gif):not(.chats-msg--apagada) .chats-msg-body,
#page-chats .chats-msg-out:not(.chats-msg-nota-interna):not(.chats-msg--media-image):not(.chats-msg--media-video):not(.chats-msg--media-sticker):not(.chats-msg--media-gif):not(.chats-msg--apagada) .chats-msg-body-inner,
#page-relatorios .cv-thread.rel-dw-chats-mirror .chats-msg-out.chats-msg--text .chats-msg-body,
#page-relatorios .cv-thread.rel-dw-chats-mirror .chats-msg-out.chats-msg--text .chats-msg-body-inner {
    color: var(--chats-msg-text-ink) !important;
    font-size: 0.9375rem !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
}

/* URLs na bolha: azul e clicáveis (vence color !important do body acima). */
#page-chats .chats-msg-body .chats-msg-link,
#page-chats .chats-msg-body-inner .chats-msg-link,
#page-relatorios .cv-thread.rel-dw-chats-mirror .chats-msg-link {
    color: #0a5fd4 !important;
    text-decoration: underline !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    font-style: normal !important;
    word-break: break-all;
}
#page-chats .chats-msg-body .chats-msg-link:hover,
#page-chats .chats-msg-body-inner .chats-msg-link:hover,
#page-relatorios .cv-thread.rel-dw-chats-mirror .chats-msg-link:hover {
    color: #0847a8 !important;
}

#page-chats .chats-msg-out:not(.chats-msg-nota-interna):not(.chats-msg--media-image):not(.chats-msg--media-video):not(.chats-msg--media-sticker):not(.chats-msg--media-gif):not(.chats-msg--apagada) .chats-msg-tail .chats-msg-time,
#page-relatorios .cv-thread.rel-dw-chats-mirror .chats-msg-out.chats-msg--text .chats-msg-tail .chats-msg-time,
#page-chats .chats-msg-in:not(.chats-msg-nota-interna):not(.chats-msg--media-image):not(.chats-msg--media-video):not(.chats-msg--media-sticker):not(.chats-msg--media-gif):not(.chats-msg--apagada) .chats-msg-tail .chats-msg-time,
#page-relatorios .cv-thread.rel-dw-chats-mirror .chats-msg-in.chats-msg--text .chats-msg-tail .chats-msg-time {
    font-size: 0.6875rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.01em;
    color: var(--chats-msg-time-ink) !important;
}

/* Dark / cinza — reforço (especificidade com html[data-theme]) */
html[data-theme='dark'] #page-chats .chats-msg-row .chats-msg.chats-msg-out:not(.chats-msg-nota-interna):not(.chats-msg--media-image):not(.chats-msg--media-video):not(.chats-msg--media-sticker):not(.chats-msg--media-gif):not(.chats-msg--apagada),
html[data-theme='cinza'] #page-chats .chats-msg-row .chats-msg.chats-msg-out:not(.chats-msg-nota-interna):not(.chats-msg--media-image):not(.chats-msg--media-video):not(.chats-msg--media-sticker):not(.chats-msg--media-gif):not(.chats-msg--apagada),
html[data-theme='dark'] #page-relatorios .cv-thread.rel-dw-chats-mirror .chats-msg-row .chats-msg.chats-msg-out.chats-msg--text,
html[data-theme='cinza'] #page-relatorios .cv-thread.rel-dw-chats-mirror .chats-msg-row .chats-msg.chats-msg-out.chats-msg--text {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 0.0625rem solid color-mix(in srgb, #c8daf3 50%, transparent) !important;
    border-radius: var(--chats-bubble-radius) var(--chats-bubble-radius) var(--chats-bubble-tail) var(--chats-bubble-radius) !important;
    color: var(--f5c-ink-1, #e8eef8) !important;
    box-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.28) !important;
}

html[data-theme='dark'] #page-chats .chats-msg-row .chats-msg.chats-msg-in:not(.chats-msg-nota-interna):not(.chats-msg--media-image):not(.chats-msg--media-video):not(.chats-msg--media-sticker):not(.chats-msg--media-gif):not(.chats-msg--apagada),
html[data-theme='cinza'] #page-chats .chats-msg-row .chats-msg.chats-msg-in:not(.chats-msg-nota-interna):not(.chats-msg--media-image):not(.chats-msg--media-video):not(.chats-msg--media-sticker):not(.chats-msg--media-gif):not(.chats-msg--apagada),
html[data-theme='dark'] #page-relatorios .cv-thread.rel-dw-chats-mirror .chats-msg-row .chats-msg.chats-msg-in.chats-msg--text,
html[data-theme='cinza'] #page-relatorios .cv-thread.rel-dw-chats-mirror .chats-msg-row .chats-msg.chats-msg-in.chats-msg--text {
    background: rgba(238, 242, 247, 0.12) !important;
    border: 0.0625rem solid color-mix(in srgb, #d3dce8 40%, transparent) !important;
    border-radius: var(--chats-bubble-radius) var(--chats-bubble-radius) var(--chats-bubble-radius) var(--chats-bubble-tail) !important;
    color: var(--f5c-ink-1, #e8eef8) !important;
    box-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.28) !important;
}

html[data-theme='dark'] #page-chats .chats-event--system,
html[data-theme='dark'] #page-chats .chats-timeline-event.chats-event--system,
html[data-theme='cinza'] #page-chats .chats-event--system,
html[data-theme='cinza'] #page-chats .chats-timeline-event.chats-event--system,
html[data-theme='dark'] #page-relatorios .cv-thread.rel-dw-chats-mirror .chats-event--system,
html[data-theme='cinza'] #page-relatorios .cv-thread.rel-dw-chats-mirror .chats-event--system {
    /* Deriva do token --chats-system-event-border (via color-mix) em vez de hex fixo, para o
       dark/cinza também diferenciar azul (default) de âmbar (triagem) — antes era sempre o
       mesmo tom aqui, independente da fila. */
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--chats-system-event-border) 22%, transparent) 0%,
        color-mix(in srgb, var(--chats-system-event-border) 8%, transparent) 100%
    ) !important;
    border-color: color-mix(in srgb, var(--chats-system-event-border) 55%, transparent) !important;
}

/* ---------- Imagem / vídeo / gif — mesmo card do texto + gap 0.1875rem ---------- */
#page-chats .chats-msg-row .chats-msg.chats-msg-out.chats-msg--media-image.chats-msg--has-media,
#page-chats .chats-msg-row .chats-msg.chats-msg-out.chats-msg--media-video.chats-msg--has-media,
#page-chats .chats-msg-row .chats-msg.chats-msg-out.chats-msg--media-gif.chats-msg--has-media,
#page-relatorios .cv-thread.rel-dw-chats-mirror .chats-msg-row .chats-msg.chats-msg-out.chats-msg--media-image,
#page-relatorios .cv-thread.rel-dw-chats-mirror .chats-msg-row .chats-msg.chats-msg-out.chats-msg--media-video,
#page-relatorios .cv-thread.rel-dw-chats-mirror .chats-msg-row .chats-msg.chats-msg-out.chats-msg--media-gif {
    padding: 0.1875rem !important;
    border: 0.0625rem solid var(--chats-info-card-border) !important;
    border-radius: var(--chats-info-card-radius) !important;
    background: var(--chats-info-card-bg) !important;
    box-shadow: var(--chats-info-card-shadow) !important;
    box-sizing: border-box !important;
}

#page-chats .chats-msg-row .chats-msg.chats-msg-in.chats-msg--media-image.chats-msg--has-media,
#page-chats .chats-msg-row .chats-msg.chats-msg-in.chats-msg--media-video.chats-msg--has-media,
#page-chats .chats-msg-row .chats-msg.chats-msg-in.chats-msg--media-gif.chats-msg--has-media,
#page-relatorios .cv-thread.rel-dw-chats-mirror .chats-msg-row .chats-msg.chats-msg-in.chats-msg--media-image,
#page-relatorios .cv-thread.rel-dw-chats-mirror .chats-msg-row .chats-msg.chats-msg-in.chats-msg--media-video,
#page-relatorios .cv-thread.rel-dw-chats-mirror .chats-msg-row .chats-msg.chats-msg-in.chats-msg--media-gif {
    padding: 0.1875rem !important;
    border: 0.0625rem solid var(--chats-info-card-border) !important;
    border-radius: var(--chats-info-card-radius) !important;
    background: var(--chats-client-card-bg) !important;
    box-shadow: var(--chats-info-card-shadow) !important;
    box-sizing: border-box !important;
}

#page-chats .chats-msg--media-image.chats-msg--has-media .chats-msg-media-frame--image,
#page-chats .chats-msg--media-video.chats-msg--has-media .chats-msg-media-frame--video,
#page-chats .chats-msg--media-gif.chats-msg--has-media .chats-msg-media-frame--image,
#page-relatorios .cv-thread.rel-dw-chats-mirror .chats-msg-media-frame--image,
#page-relatorios .cv-thread.rel-dw-chats-mirror .chats-msg-media-frame--video {
    border-radius: 0.6875rem !important;
    overflow: hidden !important;
}

/* Relatórios usa a mesma proporção visual do Chats: miniatura contida e expansão só por clique. */
#page-relatorios .cv-thread.rel-dw-chats-mirror .chats-msg--media-image,
#page-relatorios .cv-thread.rel-dw-chats-mirror .chats-msg--media-video {
    width: fit-content !important;
    max-width: min(18.75rem, 72vw) !important;
}

#page-relatorios .cv-thread.rel-dw-chats-mirror .chats-msg-media-frame--image,
#page-relatorios .cv-thread.rel-dw-chats-mirror .chats-msg-media-frame--video,
#page-relatorios .cv-thread.rel-dw-chats-mirror .relatorio-media-slot {
    display: block !important;
    width: fit-content !important;
    max-width: 100% !important;
}

#page-relatorios .cv-thread.rel-dw-chats-mirror .chats-msg-media-image,
#page-relatorios .cv-thread.rel-dw-chats-mirror .chats-msg-media-video {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: min(17.5rem, 70vw) !important;
    max-height: min(22.5rem, 55vh) !important;
    object-fit: contain !important;
    border-radius: 0.6875rem !important;
}

#page-relatorios .cv-thread.rel-dw-chats-mirror .chats-msg-media-image.chats-msg-media--openable {
    cursor: zoom-in !important;
}

.relatorios-media-lightbox {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: grid;
    place-items: center;
    padding: 1.75rem;
    background: rgba(5, 12, 24, 0.88);
    backdrop-filter: blur(0.375rem);
}

.relatorios-media-lightbox-stage {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
}

.relatorios-media-lightbox-image {
    display: block;
    max-width: min(94vw, 100rem);
    max-height: 92vh;
    object-fit: contain;
    border-radius: 0.75rem;
    box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, 0.48);
}

.relatorios-media-lightbox-close {
    position: fixed;
    top: 1.125rem;
    right: 1.375rem;
    z-index: 1;
    width: 2.625rem;
    height: 2.625rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font: 300 2rem/1 sans-serif;
    cursor: pointer;
}

#page-chats .chats-msg--media-image .chats-msg-media-meta,
#page-chats .chats-msg--media-video .chats-msg-media-meta,
#page-chats .chats-msg--media-gif .chats-msg-media-meta {
    right: 0.5rem !important;
    bottom: 0.5rem !important;
    min-width: max-content !important;
    max-width: none !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
}

/* Link-preview: meta fica no card; densidade não pode reexibir o tail ao lado do link. */
#page-chats .chats-msg--has-link-preview .chats-msg-tail--hidden-for-link-preview,
#page-chats .chats-msg--has-link-preview .chats-msg-tail.chats-msg-tail--text {
    display: none !important;
    float: none !important;
}

/* Pill escuro (imagem/vídeo/gif/link-preview/áudio): Whatsapp + hora em branco. */
#page-chats .chats-msg-media-meta .chats-msg-time--media-overlay,
#page-chats .chats-msg-media-meta .chats-msg-whatsapp-externo-label {
    color: #fff !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

#page-chats .chats-msg--media-sticker:not(.chats-msg--media-has-caption) .chats-msg-media-meta .chats-msg-time--media-overlay,
#page-chats .chats-msg--media-sticker:not(.chats-msg--media-has-caption) .chats-msg-media-meta .chats-msg-whatsapp-externo-label,
#page-chats .chats-msg--shared-contact .chats-msg-media-meta .chats-msg-time--media-overlay,
#page-chats .chats-msg--shared-contact .chats-msg-media-meta .chats-msg-whatsapp-externo-label {
    color: var(--f5c-ink-2, #3d4844) !important;
}

/* Figurinha emoji do FiveChat (sem webp): maior que emoji de texto, como no app. */
#page-chats .chats-msg-emoji-sticker {
    display: inline-block;
    font-size: 4rem !important;
    line-height: 1.1 !important;
    user-select: text;
}

#page-chats .chats-msg.chats-msg--media-sticker:has(.chats-msg-emoji-sticker) {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0.125rem 0.25rem !important;
}

#page-chats .chats-msg.chats-msg--media-sticker:has(.chats-msg-emoji-sticker) .chats-msg-body,
#page-chats .chats-msg.chats-msg--media-sticker:has(.chats-msg-emoji-sticker) .chats-msg-body-inner {
    background: transparent !important;
    padding: 0 !important;
}

/* Documento: pill Whatsapp/hora na margem direita da linha acima do divisor (sem nome duplicado). */
#page-chats .chats-msg-doc-caption--meta {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    min-height: 1.125rem !important;
}

#page-chats .chats-msg-media-meta--doc {
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    max-width: none !important;
}

/* Urgência cobrada — bolha vermelha (autoridade skin) */
#page-chats .chats-event--urgencia.chats-event--system,
#page-chats .chats-timeline-event.chats-event--urgencia,
#page-relatorios .cv-thread.rel-dw-chats-mirror .chats-event--urgencia {
    background: color-mix(in srgb, #dc2626 10%, #fff) !important;
    border: 0.0625rem solid #dc2626 !important;
    box-shadow: none !important;
}
#page-chats .chats-event--urgencia .chats-timeline-event-title,
#page-relatorios .cv-thread.rel-dw-chats-mirror .chats-event--urgencia .chats-timeline-event-title {
    color: #991b1b !important;
    font-weight: 700 !important;
}