/*
  Wortic macOS UI Kit — Message Bubble / Conversation
  wm-message — cobre Message Bubble, Assistant/User/System Message,
  Conversation List, Conversation Row, Unread Marker.

  Glowup 2026 "Liquid Glass":
  - Fundo de conversa com gradiente suavíssimo (nunca cinza chapado).
  - Bolha do assistente = superfície branca elevada com sombra em camadas.
  - Bolha do usuário = gradiente accent com sombra colorida sutil.
  - Avatar do agente com gradiente da marca (azul → cyan).
*/

@layer components {
  .wm-conversation {
    /* ---- knobs locais (light) ---- */
    --wm-msg-conversation-bg: linear-gradient(
      180deg,
      var(--wm-surface-secondary) 0%,
      var(--wm-surface-base) 100%
    );
    --wm-msg-assistant-bg: var(--wm-surface-elevated);
    --wm-msg-assistant-shadow:
      0 0 0 0.5px rgba(0, 0, 0, 0.05),
      0 1px 1.5px rgba(0, 0, 0, 0.04),
      0 5px 16px -6px rgba(0, 0, 0, 0.09);
    --wm-msg-user-bg: linear-gradient(
      180deg,
      var(--wm-msg-user-top) 0%,
      var(--wm-accent) 100%
    );
    --wm-msg-user-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      0 1px 2px color-mix(in srgb, var(--wm-accent) 22%, transparent),
      0 8px 20px -8px color-mix(in srgb, var(--wm-accent) 42%, transparent);
    --wm-msg-code-bg: rgba(0, 0, 0, 0.05);

    display: flex;
    flex-direction: column;
    gap: var(--wm-space-8);
    padding: var(--wm-space-9) var(--wm-space-9) var(--wm-space-10);
    overflow-y: auto;
    background: var(--wm-msg-conversation-bg);
    border-radius: inherit;
    scrollbar-width: thin;
    scrollbar-color: var(--wm-scrollbar-thumb) transparent;
  }
  .wm-conversation::-webkit-scrollbar {
    width: 8px;
  }
  .wm-conversation::-webkit-scrollbar-thumb {
    border-radius: var(--wm-radius-pill);
    background: var(--wm-scrollbar-thumb);
    background-clip: padding-box;
    border: 2px solid transparent;
  }
  .wm-conversation::-webkit-scrollbar-thumb:hover {
    background-color: var(--wm-scrollbar-thumb-hover);
  }
  .wm-conversation::-webkit-scrollbar-track {
    background: transparent;
  }

  /* A lista rolável é focável (tabindex="0" + role="log") para rolar
     por teclado — o anel segue o padrão duplo do kit. */
  .wm-conversation:focus-visible {
    outline: var(--wm-focus-ring-width) solid var(--wm-accent);
    outline-offset: calc(-1 * var(--wm-focus-ring-width));
    box-shadow: inset 0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill);
  }

  .wm-message {
    display: flex;
    gap: var(--wm-space-5);
    max-width: 78%;
    animation: wm-message-in var(--wm-duration-normal) var(--wm-ease-emphasized) both;
  }
  @keyframes wm-message-in {
    from {
      opacity: 0;
      transform: translateY(6px) scale(0.99);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  .wm-message--user {
    align-self: flex-end;
    flex-direction: row-reverse;
  }
  .wm-message--assistant,
  .wm-message--system {
    align-self: flex-start;
  }

  .wm-message__avatar {
    flex: none;
  }

  /* Avatar do agente Wortic — momento-assinatura da marca */
  .wm-message--assistant .wm-avatar,
  .wm-message--assistant .wm-message__avatar {
    background: linear-gradient(
      135deg,
      var(--wm-brand-blue) 0%,
      var(--wm-brand-cyan) 100%
    );
    color: #ffffff;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.25),
      0 0 0 0.5px color-mix(in srgb, var(--wm-brand-blue) 14%, transparent),
      0 2px 6px -1px color-mix(in srgb, var(--wm-brand-blue) 35%, transparent);
  }

  .wm-message__content {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-3);
    min-width: 0;
  }

  .wm-message__bubble {
    padding: var(--wm-space-5) var(--wm-space-7);
    border-radius: var(--wm-radius-2xl);
    font-size: var(--wm-font-size-body);
    line-height: var(--wm-line-height-relaxed);
    transition:
      box-shadow var(--wm-duration-fast) var(--wm-ease-standard),
      transform var(--wm-duration-fast) var(--wm-ease-standard);
  }

  /* Assistente: cartão branco elevado flutuando sobre o gradiente */
  .wm-message--assistant .wm-message__bubble {
    background: var(--wm-msg-assistant-bg);
    color: var(--wm-label-primary);
    border-end-start-radius: var(--wm-radius-sm);
    box-shadow: var(--wm-msg-assistant-shadow);
  }

  /* Usuário: gradiente accent com sombra colorida discreta */
  .wm-message--user .wm-message__bubble {
    background: var(--wm-msg-user-bg);
    color: var(--wm-label-on-accent);
    border-end-end-radius: var(--wm-radius-sm);
    box-shadow: var(--wm-msg-user-shadow);
  }

  .wm-message--system {
    max-width: 100%;
    align-self: center;
  }
  .wm-message--system .wm-message__bubble {
    background: transparent;
    color: var(--wm-label-tertiary);
    font-size: var(--wm-font-size-caption);
    font-weight: var(--wm-font-weight-medium);
    letter-spacing: var(--wm-letter-spacing-wide);
    text-align: center;
    padding-block: var(--wm-space-2);
    box-shadow: none;
  }

  .wm-message__meta {
    display: flex;
    align-items: center;
    gap: var(--wm-space-2);
    font-size: var(--wm-font-size-caption);
    color: var(--wm-label-quaternary);
    font-variant-numeric: tabular-nums;
    padding-inline: var(--wm-space-3);
  }
  .wm-message--user .wm-message__meta {
    justify-content: flex-end;
  }

  /* ==============================================================
     B26.1 Parte 1 (item 1a) — barra de ações da bolha + selo de
     correção. Mesmo arquivo do B25.0 de propósito — o Will pediu as
     duas juntas para não virar edição concorrente do mesmo CSS.

     wm-message__actions é o PRÉ-REQUISITO do componente ai-correction
     (fora do território deste agente: pasta própria, fora daqui) —
     aqui só existe o LUGAR onde o botão "Corrigir" se pendura, mais
     copiar/regenerar/mais. wm-message__badge é o selo "corrigida":
     depois de uma correção salva, a bolha NÃO volta ao normal (mesmo
     princípio do agentic-handoff--decidido) — o selo fica, sempre
     visível, com o que mudou e quando; nunca "corrigida" sem link pro
     que foi corrigido (o kit já se queimou com afirmação sem lastro:
     o painel de conexões dizia "conectado" sobre chave morta).

     Visível no hover E no :focus-within (par já usado no ai-citation):
     opacity 0 não é display:none — o botão continua no Tab e no
     leitor de tela mesmo antes do hover, só fica invisível até
     alguém passar o mouse OU chegar nele por teclado. Em touch
     (sem hover) fica sempre visível — hover:none nunca revela nada.

     Convive com o slot rico do B25.0 porque mora FORA da bolha (no
     rodapé, ao lado da __meta) — nunca poderia competir com o
     rich-head, que é outra região, dentro da bolha. Provado na
     variante rich-card: gráfico + badge de correção juntos, os dois
     legíveis. ---------------------------------------------------- */
  .wm-message__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--wm-space-2) var(--wm-space-4);
    padding-inline: var(--wm-space-3);
  }
  /* A __meta NUNCA quebra em várias linhas — "Autor · 09:14" é curto de
     propósito e vira coluna vertical horrível se encolher (visto ao
     vivo num rich--flush largo dentro de 390px: a barra de ações não
     cabia ao lado, e sem isto o flex ENCOLHIA o texto da meta em vez
     de quebrar a LINHA — "Wortic Agent · 10:03" virava 4 linhas de
     uma letra por vez). flex-wrap no pai resolve: quando não cabe,
     wm-message__footer inteiro é quem quebra — a barra de ações desce
     pra própria linha, a meta continua inteira na primeira. */
  .wm-message__footer .wm-message__meta {
    flex: none;
    white-space: nowrap;
    padding-inline: 0;
  }
  .wm-message--user .wm-message__footer {
    flex-direction: row-reverse;
  }

  .wm-message__actions {
    display: flex;
    align-items: center;
    gap: var(--wm-space-1);
    opacity: 0;
    transform: translateY(-2px);
    transition:
      opacity var(--wm-duration-fast) var(--wm-ease-standard),
      transform var(--wm-duration-fast) var(--wm-ease-standard);
  }
  .wm-message:hover .wm-message__actions,
  .wm-message:focus-within .wm-message__actions,
  .wm-message__actions:focus-within {
    opacity: 1;
    transform: none;
  }
  @media (hover: none) {
    /* Sem hover, nada revela por mouse — some pra sempre. Toque
       enxerga a barra sempre visível. */
    .wm-message__actions {
      opacity: 1;
      transform: none;
    }
  }

  .wm-message__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--wm-control-height-sm);
    height: var(--wm-control-height-sm);
    border: none;
    border-radius: var(--wm-radius-sm);
    background: transparent;
    color: var(--wm-label-tertiary);
    cursor: pointer;
    transition:
      background var(--wm-duration-fast) var(--wm-ease-standard),
      color var(--wm-duration-fast) var(--wm-ease-standard);
  }
  .wm-message__action:hover {
    background: var(--wm-fill-tertiary);
    color: var(--wm-label-primary);
  }
  .wm-message__action:focus-visible {
    outline: var(--wm-focus-ring-width) solid var(--wm-accent);
    outline-offset: var(--wm-focus-ring-offset);
    box-shadow: 0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill);
  }
  .wm-message__action[aria-pressed="true"] {
    color: var(--wm-accent);
    background: var(--wm-accent-fill);
  }

  /* Selo "corrigida" — PERSISTENTE (nunca opacity:0 por hover): é
     transparência, não um atalho secundário. Botão de verdade
     (<button>), não texto — abre o painel do ai-correction com o que
     foi corrigido (aria-expanded/aria-controls ligam os dois). */
  .wm-message__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--wm-space-2);
    padding: var(--wm-space-1) var(--wm-space-4) var(--wm-space-1) var(--wm-space-3);
    border: none;
    border-radius: var(--wm-radius-pill);
    background: var(--wm-warning-fill);
    color: var(--wm-warning);
    font-size: var(--wm-font-size-caption2);
    font-weight: var(--wm-font-weight-medium);
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--wm-duration-fast) var(--wm-ease-standard);
  }
  .wm-message__badge:hover {
    background: color-mix(in srgb, var(--wm-warning-fill) 70%, var(--wm-warning) 15%);
  }
  .wm-message__badge:focus-visible {
    outline: var(--wm-focus-ring-width) solid var(--wm-accent);
    outline-offset: var(--wm-focus-ring-offset);
    box-shadow: 0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill);
  }
  .wm-message__badge .wm-icon {
    --wm-icon-size: var(--wm-icon-xs);
  }
  /* aria-expanded="true" (painel do ai-correction aberto embaixo) —
     o selo continua com a MESMA cor, só o chevron gira; cor não é o
     único sinal de estado (regra do kit: nunca cor sozinha). */
  .wm-message__badge[aria-expanded="true"] .wm-message__badge-caret {
    transform: rotate(180deg);
  }
  .wm-message__badge-caret {
    transition: transform var(--wm-duration-fast) var(--wm-ease-standard);
  }

  .wm-message__bubble pre,
  .wm-message__bubble code {
    font-family: var(--wm-font-family-mono);
    font-size: var(--wm-font-size-callout);
  }
  .wm-message__bubble pre {
    background: var(--wm-msg-code-bg);
    padding: var(--wm-space-4) var(--wm-space-5);
    border-radius: var(--wm-radius-md);
    box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.05);
    overflow-x: auto;
    margin-block-start: var(--wm-space-3);
  }
  .wm-message--user .wm-message__bubble pre {
    background: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.18);
  }

  /* Typing indicator dentro de bubble */
  .wm-message__typing {
    display: inline-flex;
  }

  /* ==============================================================
     B25.0 — Slot de conteúdo rico (extensão do message-bubble)
     ==============================================================
     Contrato que os outros 28 itens do B25 vão consumir. Cinco
     problemas, cinco peças — nomenclatura fixada em
     references/backlog.md (seção B25.0), não reabrir sem atualizar
     a ficha lá também.

     1. LARGURA — .wm-message--rich solta o max-width:78% da raiz.
        É %, não px: nunca estoura .wm-conversation nem cria barra
        horizontal na CONVERSA inteira — só o conteúdo de dentro (SVG,
        <pre>, tabela) pode rolar na própria caixa, isso já é dele.
     2. NÃO CORTAR CONTEÚDO INTERATIVO — .wm-message__bubble--rich usa
        `overflow: clip` (não `hidden`) para recortar o canto arredon-
        dado. Isso NÃO prende dropdown-menu/popover/tooltip/select: no
        kit, .wm-menu/.wm-popover são `position: fixed`, e overflow do
        ancestral não recorta elemento fixed — só um ancestral com
        transform/filter/perspective/contain/backdrop-filter/will-change
        cria um containing block novo e prenderia o menu. Por isso:
        NUNCA acrescente nenhuma dessas propriedades a .wm-message,
        .wm-message__bubble, .wm-message__rich ou .wm-message__rich-*.
        (Provado ao vivo na variante rich-card: o menu "⋯" do
        rich-head abre por cima da conversa inteira, sem ser cortado.)
     3. PADDING E FUNDO — o knob --wm-msg-rich-bg NASCE IGUAL à bolha
        de baixo (--wm-msg-assistant-bg no assistente): pintar a MESMA
        cor não é fundo-sobre-fundo, é continuidade — e é o que dá ao
        degradê do rodapé (item 4) e ao véu do portão (item 5) uma cor
        real pra desvanecer, em vez de "transparent" desenhando um
        degradê que não degradê nada. Só o USUÁRIO sobrescreve para
        --wm-surface-elevated, porque a bolha dele é o gradiente de
        accent — cartão cru em cima fica ilegível, precisa de uma
        superfície NOVA, não da mesma. wm-message--bare zera os dois
        pra transparent (não existe bolha embaixo pra combinar).
        --rich--flush (padding 0 — conteúdo com superfície própria:
        gráfico, terminal, imagem) e --rich--inset (padding — conteúdo
        cru: tabela, formulário) escolhem se existe respiro; SEM
        rich-head eles são modificador direto de .wm-message__rich,
        COM rich-head eles viram o wrapper do CORPO (o cabeçalho tem
        padding próprio e ocupa a largura cheia sempre — ver a
        variante rich-card, que usa as duas formas).
     4. ALTURA — .wm-message__rich-scroll (dentro de .wm-message__rich-
        cap) trava a PRÓPRIA altura em --wm-msg-rich-max-height, com
        `overscroll-behavior: contain` para a rolagem de dentro não
        vazar pra .wm-conversation — nunca o envelope inteiro que
        trava, só o filho que rola. Um degradê (.wm-message__rich-fade)
        e um rodapé com "Ver tudo" (composição com dialog, já existe)
        completam o teto.
     5. FOCO E GESTO — .wm-message__rich-gate é o portão do padrão que
        o Will decidiu para o map-pins (B25.1 item u): o filho nasce
        `inert` (nativo — fora do Tab, sem gesto, invisível pro leitor
        de tela) atrás de um véu com um botão "Ativar". Esc com foco
        dentro devolve o `inert` e o foco ao botão — nunca a página
        some, só a região. Capacidade OFERECIDA pelo slot; nem todo
        conteúdo rico precisa (só quem briga de gesto com a rolagem —
        provado na variante rich-card com o table-responsive).
     6. ORDEM DE LEITURA — o slot é role="group" com aria-label próprio
        e aria-live="off": a bolha continua sendo UMA mensagem (autor +
        hora na __meta, fora do slot) e o leitor de tela não relê o
        gráfico inteiro a cada atualização da conversa (role="log" já
        é aria-live polite implícito — sem o "off" aqui, uma tabela de
        40 linhas seria relida a cada mensagem nova).
     ------------------------------------------------------------ */

  /* ---- 1. Largura: solta o teto de 78% da mensagem ---- */
  .wm-message--rich {
    max-width: min(94%, 760px);
  }
  .wm-message--rich.wm-message--system {
    max-width: 100%; /* sistema já é 100%; rich não se aplica a separador */
  }

  /* ---- 2/3. A bolha em modo rich: sem padding próprio, cantos
     recortados (não escondidos — ver nota 2 acima), cor cede ao
     envelope de dentro. ---- */
  .wm-message__bubble--rich {
    padding: 0;
    overflow: clip;
  }

  /* Legenda de texto ANTES do conteúdo rico (o gerador só a produz
     quando `rico` é passado — ver code/message-bubble.py): a bolha
     virou padding:0, então quem precisa do respiro que o texto puro
     sempre teve é este parágrafo, não a bolha inteira. Sem padding
     embaixo — o slot rico começa logo a seguir, flush com a borda. */
  .wm-message__bubble--rich .wm-message__text {
    margin: 0;
    padding: var(--wm-space-5) var(--wm-space-7) var(--wm-space-4);
  }

  .wm-message__rich {
    /* Mesma cor da bolha de baixo por padrão — não é uma segunda
       camada, é a MESMA superfície repetida, o que dá ao degradê do
       rodapé (--rich-fade) e ao véu do portão (--rich-gate-veil) uma
       cor real de onde desvanecer. */
    --wm-msg-rich-bg: var(--wm-msg-assistant-bg);
    display: block;
    inline-size: 100%;
    border-radius: inherit;
    background: var(--wm-msg-rich-bg);
  }
  .wm-message--user .wm-message__rich {
    /* a bolha por baixo é gradiente de accent — cartão cru em cima
       fica ilegível; o assistente não precisa disso (a própria bolha
       branca elevada já é a superfície, por isso o valor é igual). */
    --wm-msg-rich-bg: var(--wm-surface-elevated);
  }

  .wm-message__rich--flush {
    padding: 0;
  }
  .wm-message__rich--inset {
    padding: var(--wm-space-7);
  }

  /* ---- wm-message--bare: sem bolha nenhuma (figurinha, imagem solta) ----
     A __meta (autor/hora) continua fora do bubble — a leitura da
     conversa não muda, só o CHROME ao redor do conteúdo some. */
  .wm-message--bare .wm-message__bubble {
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }
  .wm-message--bare .wm-message__rich {
    background: transparent;
  }

  /* ---- wm-message__rich-head: título/tipo/tamanho + ações (baixar,
     abrir maior, copiar, "⋯"). Quase todo conteúdo rico usa isto. ---- */
  .wm-message__rich-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--wm-space-4);
    padding: var(--wm-space-5) var(--wm-space-6);
    border-block-end: var(--wm-border-width-hairline) solid var(--wm-separator);
  }
  .wm-message__rich-head-text {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-1);
    min-width: 0;
  }
  .wm-message__rich-title {
    font-size: var(--wm-font-size-subheadline);
    font-weight: var(--wm-font-weight-semibold);
    color: var(--wm-label-primary);
  }
  .wm-message__rich-subtitle {
    font-size: var(--wm-font-size-caption);
    color: var(--wm-label-tertiary);
  }
  .wm-message__rich-actions {
    display: flex;
    align-items: center;
    gap: var(--wm-space-2);
    flex: none;
  }

  /* ---- 4. Altura: teto no FILHO rolável, nunca no envelope ---- */
  .wm-message__rich-cap {
    position: relative;
  }
  .wm-message__rich-scroll {
    max-height: var(--wm-msg-rich-max-height, 320px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--wm-scrollbar-thumb) transparent;
  }
  .wm-message__rich-scroll::-webkit-scrollbar {
    width: 8px;
  }
  .wm-message__rich-scroll::-webkit-scrollbar-thumb {
    border-radius: var(--wm-radius-pill);
    background: var(--wm-scrollbar-thumb);
    background-clip: padding-box;
    border: 2px solid transparent;
  }
  .wm-message__rich-fade {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    height: var(--wm-space-12);
    background: linear-gradient(180deg, transparent, var(--wm-msg-rich-bg) 82%);
    pointer-events: none;
  }
  .wm-message--user .wm-message__rich-fade {
    background: linear-gradient(180deg, transparent, var(--wm-surface-elevated) 82%);
  }
  .wm-message__rich-foot {
    display: flex;
    justify-content: center;
    padding: var(--wm-space-4) var(--wm-space-6);
    border-block-start: var(--wm-border-width-hairline) solid var(--wm-separator);
  }

  /* ---- 5. Foco e gesto: portão inerte → ativo ----
     [inert] é NATIVO: some do Tab, do gesto e do leitor de tela sem
     JS nenhum. O JS (message-bubble.js) só liga/desliga o atributo e
     move o foco — ver hooks.js para o mesmo padrão em outro overlay. */
  .wm-message__rich-gate {
    position: relative;
  }
  .wm-message__rich-gate-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--wm-space-3);
    background: color-mix(in srgb, var(--wm-msg-rich-bg, var(--wm-surface-elevated)) 68%, transparent);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--wm-duration-fast) var(--wm-ease-standard),
      visibility 0s linear var(--wm-duration-fast);
  }
  .wm-message__rich-gate[data-wm-rich-gate="inert"] .wm-message__rich-gate-veil {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }
  .wm-message__rich-activate {
    flex-direction: column;
    gap: var(--wm-space-2);
    width: auto;
    height: auto;
    padding: var(--wm-space-5) var(--wm-space-7);
    border-radius: var(--wm-radius-lg);
    background: var(--wm-surface-primary);
    box-shadow: var(--wm-shadow-1), 0 0 0 var(--wm-border-width-hairline) var(--wm-separator);
    font-size: var(--wm-font-size-caption);
    font-weight: var(--wm-font-weight-medium);
    color: var(--wm-label-secondary);
  }
  .wm-message__rich-activate .wm-icon {
    --wm-icon-size: var(--wm-icon-md);
  }
  .wm-message__rich-gate-hint {
    position: absolute;
    z-index: 1;
    inset-block-end: var(--wm-space-4);
    inset-inline-end: var(--wm-space-4);
    display: none;
    align-items: center;
    gap: var(--wm-space-2);
    padding: var(--wm-space-2) var(--wm-space-4);
    border-radius: var(--wm-radius-pill);
    background: var(--wm-fill-primary);
    color: var(--wm-label-secondary);
    font-size: var(--wm-font-size-caption2);
    box-shadow: var(--wm-shadow-1);
  }
  .wm-message__rich-gate[data-wm-rich-gate="active"] .wm-message__rich-gate-hint {
    display: inline-flex;
  }
  .wm-message__rich-gate[data-wm-rich-gate="active"] .wm-message__rich-scroll {
    outline: var(--wm-focus-ring-width) solid transparent; /* espaço reservado, sem salto de layout no :focus-within */
  }
  .wm-message__rich-gate[data-wm-rich-gate="active"] .wm-message__rich-scroll:focus-within {
    outline-color: var(--wm-accent);
  }

  /* ---- Estados: carregando, erro, formato sem suporte ----
     Compactos de propósito — vivem DENTRO de uma bolha, não são a
     tela inteira (por isso não reaproveitam wm-state-empty, que é
     dimensionado pra página). Três modificadores no HTML
     (--loading/--error/--unsupported, ver rich_loading()/rich_error()
     em code/message-bubble.py), mas só --error muda a cor do ícone
     de propósito: "sem suporte" é ESPERADO (nenhum navegador abre
     .docx nativo), não alarmar é a decisão certa — herda o tom neutro
     da base. --loading nem chega a usar o ícone/título (só o
     esqueleto), então também não precisa de override. */
  .wm-message__rich-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--wm-space-3);
    padding: var(--wm-space-10) var(--wm-space-7);
    text-align: center;
    color: var(--wm-label-tertiary);
  }
  .wm-message__rich-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--wm-space-14);
    height: var(--wm-space-14);
    border-radius: var(--wm-radius-pill);
    background: var(--wm-fill-secondary);
    color: var(--wm-label-quaternary);
  }
  .wm-message__rich-state--error .wm-message__rich-state-icon {
    background: var(--wm-error-fill);
    color: var(--wm-error);
  }
  .wm-message__rich-state-title {
    font-size: var(--wm-font-size-subheadline);
    font-weight: var(--wm-font-weight-medium);
    color: var(--wm-label-secondary);
  }
  .wm-message__rich-state-desc {
    font-size: var(--wm-font-size-caption);
    max-width: 34ch;
  }
  .wm-message__rich-state-meta {
    font-size: var(--wm-font-size-caption2);
    color: var(--wm-label-quaternary);
    font-variant-numeric: tabular-nums;
  }
  .wm-message__rich-state-actions {
    margin-block-start: var(--wm-space-2);
  }

  /* Skeleton — placeholders em shimmer, altura só aproximada do que
     vai chegar (o "número de linhas" é decidido por quem chama). */
  .wm-message__rich-skel {
    /* width:100% — sem isto, a barra vira 0px de largura: o pai
       (.wm-message__rich-state) é align-items:center, então este
       flex column encolhe pro CONTEÚDO; e o conteúdo (as próprias
       barras vazias, sem texto) não tem largura intrínseca nenhuma —
       0 encolhe pra 0. Achado renderizando o esqueleto de verdade,
       não lendo o CSS: no light mode o contraste baixo escondia o
       defeito, no dark mode (barras quase invisíveis) ficou óbvio. */
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: var(--wm-space-4);
    padding: var(--wm-space-7);
  }
  .wm-message__rich-skel-bar {
    height: var(--wm-space-11);
    border-radius: var(--wm-radius-sm);
    background: linear-gradient(
      90deg,
      var(--wm-fill-tertiary) 25%,
      var(--wm-fill-secondary) 37%,
      var(--wm-fill-tertiary) 63%
    );
    background-size: 400% 100%;
    animation: wm-msg-rich-shimmer 1.5s ease-in-out infinite;
  }
  .wm-message__rich-skel-bar:nth-child(2) {
    width: 82%;
  }
  .wm-message__rich-skel-bar:nth-child(3) {
    width: 60%;
  }
  @keyframes wm-msg-rich-shimmer {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }

  /* ---- Conteúdo bare (figurinha / imagem solta): a MOLDURA sai do
     próprio elemento de mídia, nunca do envelope/bubble. ---- */
  .wm-message__rich-media {
    display: block;
    max-width: 100%;
    border-radius: var(--wm-radius-xl);
  }
  .wm-message__rich-sticker {
    display: block;
    width: 132px;
    height: 132px;
  }

  /* Unread marker (divisor "novas mensagens") */
  .wm-unread-marker {
    display: flex;
    align-items: center;
    gap: var(--wm-space-5);
    color: var(--wm-error);
    font-size: var(--wm-font-size-caption2);
    font-weight: var(--wm-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--wm-letter-spacing-wide);
  }
  .wm-unread-marker::before,
  .wm-unread-marker::after {
    content: "";
    flex: 1;
    height: var(--wm-border-width-hairline);
    background: currentColor;
    opacity: 0.35;
  }

  /* ---- Dark mode: superfícies profundas, sombras mais fundas ---- */
  :root[data-theme="dark"] .wm-conversation {
    --wm-msg-conversation-bg: linear-gradient(
      180deg,
      var(--wm-surface-secondary) 0%,
      var(--wm-surface-sunken) 100%
    );
    --wm-msg-assistant-bg: var(--wm-surface-elevated);
    --wm-msg-assistant-shadow:
      inset 0 0.5px 0 rgba(255, 255, 255, 0.07),
      0 0 0 0.5px rgba(0, 0, 0, 0.35),
      0 2px 5px rgba(0, 0, 0, 0.25),
      0 10px 26px -10px rgba(0, 0, 0, 0.5);
    /* --wm-msg-user-top já vem escuro de foundation/colors.css aqui. */
    --wm-msg-user-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      0 1px 2px rgba(0, 0, 0, 0.3),
      0 8px 22px -8px color-mix(in srgb, var(--wm-msg-user-top) 55%, transparent);
    --wm-msg-code-bg: rgba(0, 0, 0, 0.28);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .wm-conversation {
      --wm-msg-conversation-bg: linear-gradient(
        180deg,
        var(--wm-surface-secondary) 0%,
        var(--wm-surface-sunken) 100%
      );
      --wm-msg-assistant-bg: var(--wm-surface-elevated);
      --wm-msg-assistant-shadow:
        inset 0 0.5px 0 rgba(255, 255, 255, 0.07),
        0 0 0 0.5px rgba(0, 0, 0, 0.35),
        0 2px 5px rgba(0, 0, 0, 0.25),
        0 10px 26px -10px rgba(0, 0, 0, 0.5);
      /* --wm-msg-user-top já vem escuro de foundation/colors.css aqui. */
      --wm-msg-user-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 1px 2px rgba(0, 0, 0, 0.3),
        0 8px 22px -8px color-mix(in srgb, var(--wm-msg-user-top) 55%, transparent);
      --wm-msg-code-bg: rgba(0, 0, 0, 0.28);
    }
  }

  /* Par [hidden] de toda classe que define display — sem isto,
     esconder via atributo perde para a especificidade da classe. */
  .wm-conversation[hidden],
  .wm-message[hidden],
  .wm-message__content[hidden],
  .wm-message__meta[hidden],
  .wm-message__typing[hidden],
  .wm-unread-marker[hidden],
  .wm-message__rich-gate-hint[hidden],
  .wm-message__rich-state[hidden],
  .wm-message__footer[hidden],
  .wm-message__actions[hidden],
  .wm-message__badge[hidden] {
    display: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .wm-message {
      animation: none;
    }
    .wm-message__bubble {
      transition: none;
    }
    .wm-message__rich-gate-veil {
      transition: none;
    }
    .wm-message__rich-skel-bar {
      animation: none;
      background: var(--wm-fill-secondary);
    }
    .wm-message__actions {
      transition: none;
    }
    .wm-message__action,
    .wm-message__badge,
    .wm-message__badge-caret {
      transition: none;
    }
  }
}