/* ============================================================================
   Karameloo — remaster do chat
   Dono unico de: separador de dia, agrupamento de mensagens, "tentar
   novamente", gravador de audio e balao de audio.
   O resto da tela (#screenChat) continua no karameloo-redesign.css — sao 1000+
   regras la e reescrever tudo seria trocar um risco por outro maior.

   Base: "Como Criar um Chat de Conversa Bem Feito" do cofre — separadores de
   data, agrupamento por autor, status de envio, retry, estados vazios.
   ============================================================================ */

/* ---------- a busca do marketplace nao serve dentro do chat ---------- */
/* A barra do topo é persistente: ela vive fora de #screenChat e continuava
   oferecendo "Buscar editor, especialidade..." para quem já está conversando
   com alguém. Dentro do chat a busca que faz sentido é a de conversas (na
   coluna da esquerda) e a de mensagens (na lupa do cabeçalho) — as duas já
   existem. `body.telaChat` é escrito pelo showScreen; sem essa pista o CSS
   não teria como saber qual tela está aberta. */
/* A especificidade aqui não é exagero: existe
   `body:not(.preAuth) #kmlPersistentMarketShell .kmlMarketTopSearch
    { display:flex !important }` — 1 ID + 2 classes. Um seletor sem ID perde
   dessa regra mesmo com !important, e a busca continuava aparecendo. Medido
   com CSS.getMatchedStylesForNode antes de escrever esta linha. */
body.telaChat:not(.preAuth) #kmlPersistentMarketShell .kmlMarketTopSearch,
body.telaChat:not(.preAuth) #kmlPersistentMarketShell .marketSearch,
body.telaChat .marketTop.kmlMarketPrototypeTop .kmlMarketTopSearch{
  display:none !important;
}

/* ---------- filtros e menu: nao sao do chat ---------- */
/* "Filtros" filtra o MARKETPLACE, e o menu sanduiche leva para outras telas.
   Dentro de uma conversa os dois so competiam com a atencao. Com a saida
   explicita no canto esquerdo, o caminho de volta e um so e obvio. */
body.telaChat:not(.preAuth) #kmlPersistentMarketShell .kmlMarketFilterBtn,
body.telaChat:not(.preAuth) #kmlPersistentMarketShell .kmlMarketMenuWrap,
body.telaChat .marketTop.kmlMarketPrototypeTop .kmlMarketFilterBtn,
body.telaChat .marketTop.kmlMarketPrototypeTop .kmlMarketMenuWrap{
  display:none !important;
}

/* ---------- saida do chat, no canto superior esquerdo ---------- */
/* Nao existia nenhuma: medido, zero botao ou link de voltar dentro de
   #screenChat. Sair exigia abrir o menu sanduiche e achar "Inicio".
   O botao vive na barra persistente, ANTES da marca, e so aparece no chat. */
#kmlPersistentMarketShell .chatVoltarBtn{ display:none }
body.telaChat #kmlPersistentMarketShell .chatVoltarBtn{
  display:inline-flex !important; align-items:center; gap:6px;
  flex:0 0 auto; justify-self:start;
  padding:8px 14px 8px 10px;
  border:1px solid rgba(17,24,39,.18) !important;
  border-radius:4px !important;
  background:#fff !important; color:#111827 !important;
  font-size:.82rem; font-weight:700; line-height:1;
  cursor:pointer; white-space:nowrap;
  transition:background 180ms cubic-bezier(.16,1,.3,1),
             border-color 180ms cubic-bezier(.16,1,.3,1);
}
body.telaChat #kmlPersistentMarketShell .chatVoltarBtn:hover{
  background:#f4f5f7 !important; border-color:rgba(17,24,39,.34) !important;
}
body.telaChat #kmlPersistentMarketShell .chatVoltarBtn:focus-visible{
  outline:2px solid #7a5d10; outline-offset:2px;
}
/* A barra é um grid de 3 colunas fixas (192px 560px 748px) montado para
   marca · busca · ações. No chat só sobram a saída e a marca, então a grade
   passa a se ajustar ao conteúdo — senão a marca ficaria a 560px de distância
   do botão, no meio do vazio. */
body.telaChat #kmlPersistentMarketShell .marketTop{
  grid-template-columns:auto auto 1fr !important;
  justify-content:start !important;
}
/* Alinhamento com a coluna de conversas. A barra persistente é centrada
   (`width:min(1680px,100vw-84px); margin:auto`), o que empurrava o botão para
   x=34 — enquanto o título "Conversas", logo abaixo, começa em x=16. Duas
   bordas esquerdas diferentes a 18px uma da outra leem como desalinho, não
   como respiro. Medido nos dois. */
body.telaChat #kmlPersistentMarketShell .kmlPersistentMarketInner{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding-left:16px !important;
  padding-right:16px !important;
}
@media (max-width:720px){
  body.telaChat #kmlPersistentMarketShell .chatVoltarBtn span{ display:none }
  body.telaChat #kmlPersistentMarketShell .chatVoltarBtn{ padding:8px 10px }
}
@media (prefers-reduced-motion: reduce){
  body.telaChat #kmlPersistentMarketShell .chatVoltarBtn{ transition:none !important }
}

/* ---------- a marca nao precisa aparecer duas vezes ---------- */
/* A barra fixa do site ja mostra "Karameloo" logo acima. Repetir no topo da
   coluna de conversas so gastava 56px de altura util. */
#screenChat.kmlChatWhiteScreen .chatBrandRow .chatBrand{
  display:none !important;
}

#screenChat.kmlChatWhiteScreen .chatBrandRow{
  min-height:0 !important;
  padding:0 !important;
  border:0 !important;
  justify-content:flex-end !important;
}

/* no celular a coluna vira tela cheia: o botao de fechar volta a ter lugar */
@media (max-width:760px){
  #screenChat.kmlChatWhiteScreen .chatBrandRow{
    padding:10px 14px 0 !important;
  }
}

/* ---------- conversa comeca embaixo, nao no topo ---------- */
/* Com poucas mensagens elas ficavam encostadas no topo e sobrava um vazio
   enorme ate o campo de digitar. `margin-top:auto` no primeiro filho empurra
   o bloco para a base quando ha espaco de sobra e NAO faz nada quando o
   conteudo passa da altura — que e o que quebra em `justify-content:flex-end`
   (ele corta o inicio da rolagem). */
#screenChat.kmlChatWhiteScreen .messageList{
  display:flex !important;
  flex-direction:column !important;
}

#screenChat.kmlChatWhiteScreen .messageList > *:first-child{
  margin-top:auto !important;
}

/* o estado vazio continua no meio, que e o lugar dele */
#screenChat.kmlChatWhiteScreen .messageList > .emptyMessages:first-child{
  margin-top:auto !important;
  margin-bottom:auto !important;
}

/* ---------- separador de dia ---------- */
#screenChat.kmlChatWhiteScreen .dayDivider{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:18px 0 14px !important;
}

#screenChat.kmlChatWhiteScreen .dayDivider::before,
#screenChat.kmlChatWhiteScreen .dayDivider::after{
  content:"" !important;
  flex:1 1 auto !important;
  height:1px !important;
  background:rgba(17,24,39,.10) !important;
}

#screenChat.kmlChatWhiteScreen .dayDivider span{
  flex:0 0 auto !important;
  margin:0 12px !important;
  padding:4px 12px !important;
  border:1px solid rgba(17,24,39,.10) !important;
  border-radius:999px !important;
  background:#fff !important;
  color:#4b5563 !important;
  font-size:11px !important;
  font-weight:900 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
}

/* ---------- agrupamento ---------- */
/* mensagem seguida do mesmo autor cola na anterior: 4px em vez de 12px, e o
   canto do lado do autor fica reto para ler como um bloco so */
#screenChat.kmlChatWhiteScreen .messageGroup.isFollowUp{
  margin-top:-8px !important;
}

#screenChat.kmlChatWhiteScreen .messageGroup.isFollowUp .messageBubble{
  border-top-right-radius:4px !important;
}

#screenChat.kmlChatWhiteScreen .messageGroup.isFollowUp:not(.isMine) .messageBubble{
  border-top-right-radius:var(--chat-radius, 12px) !important;
  border-top-left-radius:4px !important;
}

/* ---------- erro e retry ---------- */
#screenChat.kmlChatWhiteScreen .messageRetry{
  margin-top:6px !important;
  padding:6px 12px !important;
  border:1px solid #d1d5db !important;
  border-radius:999px !important;
  background:#fff !important;
  color:#111827 !important;
  font:inherit !important;
  font-size:12px !important;
  font-weight:900 !important;
  cursor:pointer !important;
  transition:background .2s cubic-bezier(.16,1,.3,1) !important;
}

#screenChat.kmlChatWhiteScreen .messageRetry:hover{ background:#f4f5f7 !important }

#screenChat.kmlChatWhiteScreen .messageRetry:focus-visible{
  outline:2px solid #111827 !important;
  outline-offset:2px !important;
}

/* ---------- botao de microfone ---------- */
#screenChat.kmlChatWhiteScreen #micBtn svg{
  width:19px !important;
  height:19px !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:2 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

/* ---------- gravando ---------- */
#screenChat.kmlChatWhiteScreen .audioRecorder{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  padding:16px 18px !important;
  border-top:1px solid rgba(17,24,39,.10) !important;
  background:#fff !important;
}

#screenChat.kmlChatWhiteScreen .audioRecorder[hidden]{ display:none !important }

#screenChat.kmlChatWhiteScreen .audioDot{
  flex:0 0 auto !important;
  width:10px !important;
  height:10px !important;
  border-radius:50% !important;
  background:#b3261e !important;
  animation:kmlGravando 1.4s ease-in-out infinite !important;
}

@keyframes kmlGravando{
  0%,100%{ opacity:1 }
  50%{ opacity:.28 }
}

#screenChat.kmlChatWhiteScreen .audioTimer,
#screenChat.kmlChatWhiteScreen #audioTimer{
  flex:0 0 auto !important;
  min-width:44px !important;
  color:#111827 !important;
  font-size:15px !important;
  font-weight:950 !important;
  font-variant-numeric:tabular-nums !important;
}

#screenChat.kmlChatWhiteScreen .audioHint{
  flex:1 1 auto !important;
  color:#4b5563 !important;
  font-size:13px !important;
  font-weight:700 !important;
}

#screenChat.kmlChatWhiteScreen .audioCancel,
#screenChat.kmlChatWhiteScreen .audioSend{
  flex:0 0 auto !important;
  min-height:40px !important;
  padding:0 16px !important;
  border-radius:10px !important;
  font:inherit !important;
  font-size:13px !important;
  font-weight:900 !important;
  cursor:pointer !important;
  transition:background .2s cubic-bezier(.16,1,.3,1) !important;
}

#screenChat.kmlChatWhiteScreen .audioCancel{
  border:1px solid #d1d5db !important;
  background:#fff !important;
  color:#111827 !important;
}

#screenChat.kmlChatWhiteScreen .audioCancel:hover{ background:#f4f5f7 !important }

#screenChat.kmlChatWhiteScreen .audioSend{
  border:1px solid #b08d20 !important;
  background:#fcbc1d !important;
  color:#111827 !important;
}

#screenChat.kmlChatWhiteScreen .audioSend:hover{ background:#b89125 !important }

#screenChat.kmlChatWhiteScreen .audioCancel:focus-visible,
#screenChat.kmlChatWhiteScreen .audioSend:focus-visible,
#screenChat.kmlChatWhiteScreen .audioPlay:focus-visible{
  outline:2px solid #111827 !important;
  outline-offset:2px !important;
}

@media (max-width:560px){
  #screenChat.kmlChatWhiteScreen .audioHint{ display:none !important }
  #screenChat.kmlChatWhiteScreen .audioRecorder{ gap:8px !important; padding:12px 14px !important }
}

/* ---------- balao de audio ---------- */
#screenChat.kmlChatWhiteScreen .audioBubble{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  min-width:200px !important;
  padding:10px 14px 10px 10px !important;
  border:1px solid rgba(17,24,39,.14) !important;
  border-radius:var(--chat-radius, 12px) !important;
  background:#fff !important;
  box-shadow:0 2px 8px rgba(17,24,39,.04) !important;
}

#screenChat.kmlChatWhiteScreen .messageGroup.isMine .audioBubble{
  border-color:#111827 !important;
  background:#111827 !important;
}

#screenChat.kmlChatWhiteScreen .audioPlay{
  flex:0 0 auto !important;
  width:36px !important;
  height:36px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid #b08d20 !important;
  border-radius:50% !important;
  background:#fcbc1d !important;
  color:#111827 !important;
  cursor:pointer !important;
  transition:background .2s cubic-bezier(.16,1,.3,1) !important;
}

#screenChat.kmlChatWhiteScreen .audioPlay:hover{ background:#b89125 !important }
#screenChat.kmlChatWhiteScreen .audioPlay[disabled]{ opacity:.55 !important; cursor:progress !important }

#screenChat.kmlChatWhiteScreen .audioPlay svg{
  width:16px !important;
  height:16px !important;
  fill:currentColor !important;
  stroke:none !important;
}

#screenChat.kmlChatWhiteScreen .audioWave{
  flex:1 1 auto !important;
  display:flex !important;
  align-items:center !important;
  gap:3px !important;
  height:22px !important;
}

#screenChat.kmlChatWhiteScreen .audioWave i{
  flex:1 1 auto !important;
  min-width:3px !important;
  border-radius:2px !important;
  background:rgba(17,24,39,.20) !important;
}

#screenChat.kmlChatWhiteScreen .messageGroup.isMine .audioWave i{
  background:rgba(255,255,255,.34) !important;
}

/* alturas fixas: e um desenho de onda, nao a leitura do arquivo — nao finge
   ser a forma real do audio */
#screenChat.kmlChatWhiteScreen .audioWave i:nth-child(1){ height:38% !important }
#screenChat.kmlChatWhiteScreen .audioWave i:nth-child(2){ height:72% !important }
#screenChat.kmlChatWhiteScreen .audioWave i:nth-child(3){ height:100% !important }
#screenChat.kmlChatWhiteScreen .audioWave i:nth-child(4){ height:56% !important }
#screenChat.kmlChatWhiteScreen .audioWave i:nth-child(5){ height:88% !important }
#screenChat.kmlChatWhiteScreen .audioWave i:nth-child(6){ height:44% !important }
#screenChat.kmlChatWhiteScreen .audioWave i:nth-child(7){ height:64% !important }

#screenChat.kmlChatWhiteScreen .audioBubble.isPlaying .audioWave i{
  background:#fcbc1d !important;
}

#screenChat.kmlChatWhiteScreen .audioLen{
  flex:0 0 auto !important;
  color:#4b5563 !important;
  font-size:12px !important;
  font-weight:800 !important;
  font-variant-numeric:tabular-nums !important;
}

#screenChat.kmlChatWhiteScreen .messageGroup.isMine .audioLen{
  color:rgba(255,255,255,.72) !important;
}

/* ---------- enviar desligado quando nao ha texto ---------- */
#screenChat.kmlChatWhiteScreen .sendButton[disabled]{
  opacity:.45 !important;
  cursor:not-allowed !important;
}

@media (prefers-reduced-motion: reduce){
  #screenChat.kmlChatWhiteScreen .audioDot{ animation:none !important }
  #screenChat.kmlChatWhiteScreen .audioPlay,
  #screenChat.kmlChatWhiteScreen .audioSend,
  #screenChat.kmlChatWhiteScreen .audioCancel,
  #screenChat.kmlChatWhiteScreen .messageRetry{ transition:none !important }
}

/* ============================================================================
   ANEXOS, CITAÇÃO E BUSCA NA CONVERSA
   ============================================================================ */

/* ---- balão de arquivo ---- */
#screenChat.kmlChatWhiteScreen .arquivoBubble{
  display:flex !important; align-items:center !important; gap:12px !important;
  max-width:100% !important; padding:11px 14px !important; text-align:left !important;
  border:1px solid rgba(17,24,39,.14) !important;
  border-radius:var(--chat-radius, 12px) !important;
  background:#fff !important; color:#111827 !important;
  font:inherit !important; cursor:pointer !important;
  box-shadow:0 2px 8px rgba(17,24,39,.04) !important;
  transition:background .2s cubic-bezier(.16,1,.3,1) !important;
}
#screenChat.kmlChatWhiteScreen .arquivoBubble:hover{ background:#f4f5f7 !important }
#screenChat.kmlChatWhiteScreen .messageGroup.isMine .arquivoBubble{
  border-color:#111827 !important; background:#111827 !important; color:#fff !important;
}
#screenChat.kmlChatWhiteScreen .messageGroup.isMine .arquivoBubble:hover{
  background:#1c2532 !important;
}
#screenChat.kmlChatWhiteScreen .arquivoIco{ font-size:22px !important; flex:0 0 auto !important }
#screenChat.kmlChatWhiteScreen .arquivoInfo b{
  display:block !important; font-size:13.5px !important; font-weight:900 !important;
  overflow-wrap:anywhere !important;
}
#screenChat.kmlChatWhiteScreen .arquivoInfo small{
  display:block !important; margin-top:2px !important;
  color:#4b5563 !important; font-size:12px !important; font-weight:700 !important;
}
#screenChat.kmlChatWhiteScreen .messageGroup.isMine .arquivoInfo small{
  color:rgba(255,255,255,.72) !important;
}
#screenChat.kmlChatWhiteScreen .arquivoBubble:focus-visible{
  outline:2px solid #111827 !important; outline-offset:2px !important;
}

/* imagem: prévia direto no balão */
#screenChat.kmlChatWhiteScreen .arquivoBubble--img{
  display:block !important; padding:6px !important; cursor:pointer !important;
}
#screenChat.kmlChatWhiteScreen .arquivoBubble--img img{
  display:block !important; width:100% !important; max-width:320px !important;
  max-height:280px !important; object-fit:cover !important;
  border-radius:8px !important; background:#f4f5f7 !important;
}
#screenChat.kmlChatWhiteScreen .arquivoLegenda{
  display:block !important; padding:7px 6px 2px !important;
  color:#4b5563 !important; font-size:12px !important; font-weight:700 !important;
  overflow-wrap:anywhere !important;
}
#screenChat.kmlChatWhiteScreen .messageGroup.isMine .arquivoLegenda{
  color:rgba(255,255,255,.72) !important;
}
#screenChat.kmlChatWhiteScreen .arquivoErro{
  display:block !important; padding:18px !important;
  color:#a3341f !important; font-size:12.5px !important; font-weight:800 !important;
}

/* ---- citação dentro do balão ---- */
#screenChat.kmlChatWhiteScreen .citacao{
  max-width:100% !important; margin-bottom:5px !important; padding:7px 11px !important;
  border-left:3px solid #fcbc1d !important; border-radius:4px !important;
  background:rgba(17,24,39,.05) !important;
}
#screenChat.kmlChatWhiteScreen .citacao b{
  display:block !important; color:#7a5d10 !important;
  font-size:11px !important; font-weight:900 !important;
  letter-spacing:.06em !important; text-transform:uppercase !important;
}
#screenChat.kmlChatWhiteScreen .citacao span{
  display:block !important; margin-top:2px !important;
  color:#4b5563 !important; font-size:12.5px !important; line-height:1.35 !important;
  overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important;
}

/* ---- barra "respondendo a" ---- */
#screenChat.kmlChatWhiteScreen .respondendoBar{
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  gap:12px !important; padding:10px 18px !important;
  border-top:1px solid rgba(17,24,39,.10) !important;
  background:#faf7f1 !important;
}
#screenChat.kmlChatWhiteScreen .respondendoBar[hidden]{ display:none !important }
#screenChat.kmlChatWhiteScreen .respondendoBar > div{ min-width:0 !important }
#screenChat.kmlChatWhiteScreen .respondendoBar span{
  display:block !important; color:#7a5d10 !important;
  font-size:11px !important; font-weight:900 !important;
  letter-spacing:.08em !important; text-transform:uppercase !important;
}
#screenChat.kmlChatWhiteScreen .respondendoBar b{
  display:block !important; margin-top:2px !important;
  color:#111827 !important; font-size:13px !important; font-weight:700 !important;
  overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important;
}
#screenChat.kmlChatWhiteScreen .respondendoBar button{
  flex:0 0 auto !important; width:30px !important; height:30px !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  border:1px solid #d1d5db !important; border-radius:100px !important;
  background:#fff !important; color:#111827 !important; cursor:pointer !important;
}

/* ---- botão discreto de responder ---- */
#screenChat.kmlChatWhiteScreen .responderBtn{
  margin-top:4px !important; padding:2px 8px !important;
  border:0 !important; background:transparent !important;
  color:#4b5563 !important; font:inherit !important;
  font-size:11px !important; font-weight:800 !important;
  cursor:pointer !important; opacity:0 !important;
  transition:opacity .18s cubic-bezier(.16,1,.3,1) !important;
}
/* aparece no hover e SEMPRE no foco por teclado — quem navega com Tab
   precisa alcançar o botão, e opacity:0 continua focável */
#screenChat.kmlChatWhiteScreen .messageGroup:hover .responderBtn,
#screenChat.kmlChatWhiteScreen .responderBtn:focus-visible{
  opacity:1 !important;
}
#screenChat.kmlChatWhiteScreen .responderBtn:focus-visible{
  outline:2px solid #111827 !important; outline-offset:2px !important;
}
/* em telas de toque não existe hover: o botão fica sempre visível */
@media (hover:none){
  #screenChat.kmlChatWhiteScreen .responderBtn{ opacity:1 !important }
}

/* ---- busca na conversa ---- */
#screenChat .chatBuscaBtn{
  width:36px !important; height:36px !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  border:1px solid #d1d5db !important; border-radius:8px !important;
  background:#fff !important; color:#111827 !important; cursor:pointer !important;
  margin-left:auto !important; flex:0 0 auto !important;
}
#screenChat .chatBuscaBtn:hover{ background:#f4f5f7 !important }
#screenChat .chatBuscaBtn:focus-visible{ outline:2px solid #111827 !important; outline-offset:2px !important }

#screenChat.kmlChatWhiteScreen .chatBuscaBar{
  display:flex !important; align-items:center !important; gap:10px !important;
  padding:10px 18px !important;
  border-bottom:1px solid rgba(17,24,39,.10) !important;
  background:#fff !important;
}
#screenChat.kmlChatWhiteScreen .chatBuscaBar[hidden]{ display:none !important }
#screenChat.kmlChatWhiteScreen .chatBuscaBar input{
  flex:1 1 auto !important; min-width:0 !important;
  padding:9px 12px !important;
  border:1px solid #d1d5db !important; border-radius:8px !important;
  background:#f9fafb !important; color:#111827 !important; font:inherit !important;
  font-size:13.5px !important; outline:0 !important;
}
#screenChat.kmlChatWhiteScreen .chatBuscaBar input:focus{
  border-color:#111827 !important; background:#fff !important;
  box-shadow:0 0 0 3px rgba(17,24,39,.08) !important;
}
#screenChat.kmlChatWhiteScreen .chatBuscaBar #chatBuscaContagem{
  flex:0 0 auto !important; color:#4b5563 !important;
  font-size:12px !important; font-weight:800 !important; white-space:nowrap !important;
}
#screenChat.kmlChatWhiteScreen .chatBuscaBar button{
  flex:0 0 auto !important; width:30px !important; height:30px !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  border:1px solid #d1d5db !important; border-radius:100px !important;
  background:#fff !important; color:#111827 !important; cursor:pointer !important;
}

/* mensagem encontrada: destaque por BORDA, e o resto continua visível.
   Esconder o que não casou tira o contexto — quem busca quer ver onde a
   mensagem estava na conversa. */
#screenChat.kmlChatWhiteScreen .messageGroup.isAchado .messageBubble,
#screenChat.kmlChatWhiteScreen .messageGroup.isAchado .arquivoBubble{
  outline:2px solid #fcbc1d !important;
  outline-offset:2px !important;
}

@media (prefers-reduced-motion: reduce){
  #screenChat.kmlChatWhiteScreen .arquivoBubble,
  #screenChat.kmlChatWhiteScreen .responderBtn{ transition:none !important }
}
/* ── Status do trabalho no chat ─────────────────────────────────────────────
   Quatro degraus: negociacao -> aceita -> entregue -> aprovado. O degrau nao
   e so cor: o rotulo escrito diz em que ponto esta. */
#screenChat.kmlChatWhiteScreen .trabalhoStatus{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  padding:11px 18px !important;
  border-bottom:1px solid rgba(17,24,39,.10) !important;
  background:#faf7f1 !important;
}
#screenChat.kmlChatWhiteScreen .trabalhoStatus[hidden]{ display:none !important }

#screenChat.kmlChatWhiteScreen .trabalhoEtapas{
  display:flex !important; align-items:center !important; gap:5px !important;
  flex:0 0 auto !important;
}
#screenChat.kmlChatWhiteScreen .trabalhoEtapas i{
  width:26px !important; height:5px !important; border-radius:100px !important;
  background:rgba(17,24,39,.16) !important;
}
#screenChat.kmlChatWhiteScreen .trabalhoEtapas i.is-feito{
  background:#fcbc1d !important;
}
#screenChat.kmlChatWhiteScreen .trabalhoTexto{ min-width:0 !important }
#screenChat.kmlChatWhiteScreen .trabalhoTexto b{
  display:block !important; color:#111827 !important;
  font-size:13px !important; font-weight:900 !important;
}
#screenChat.kmlChatWhiteScreen .trabalhoTexto span{
  display:block !important; margin-top:1px !important;
  color:#4b5563 !important; font-size:12px !important; font-weight:600 !important;
}

@media (max-width:560px){
  #screenChat.kmlChatWhiteScreen .trabalhoStatus{ padding:9px 14px !important; gap:10px !important }
  #screenChat.kmlChatWhiteScreen .trabalhoEtapas i{ width:18px !important }
}