/* ============================================================================
   Karameloo — pagamento dentro do chat
   Dono unico de: .chatPaymentBtn, .chatNegotiateBtn (cor), .whitePayment*,
   .whiteCheckout*, .whitePix*, .paymentBubble.

   Por que este arquivo existe: o markup do painel de pagamento ja estava no
   index.html sem UMA linha de CSS. Overlay sem `position:fixed` renderiza no
   fluxo normal — era isso que jogava o painel "para baixo dos outros
   elementos". As medidas seguem o painel de negociacao irmao para os dois
   ficarem iguais.

   Dourado: #fcbc1d (o da logo) para preencher; texto #111827 por cima (7.2:1).
   ============================================================================ */

/* ---------- os dois botoes do cabecalho da conversa ---------- */

#screenChat .whiteChatHeaderActions{
  margin-left:auto !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  flex:0 0 auto !important;
  flex-wrap:nowrap !important;
  min-width:max-content !important;
}

/* primario: a proposta. Dourado da logo, como o Kauan pediu. */
#screenChat .chatNegotiateBtn,
#screenChat .chatNegotiateBtn--white{
  border:1px solid #b08d20 !important;
  background:#fcbc1d !important;
  color:#111827 !important;
  box-shadow:0 1px 2px rgba(17,24,39,.10) !important;
}

#screenChat .chatNegotiateBtn:hover,
#screenChat .chatNegotiateBtn--white:hover{
  background:#b89125 !important;
  box-shadow:0 2px 6px rgba(17,24,39,.14) !important;
}

/* secundario: a cobranca. Contorno, para nao competir com a proposta. */
#screenChat .chatPaymentBtn,
#screenChat .chatPaymentBtn--white{
  min-height:36px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  padding:0 13px !important;
  border:1px solid #d1d5db !important;
  border-radius:8px !important;
  background:#fff !important;
  color:#111827 !important;
  font:inherit !important;
  font-size:13px !important;
  font-weight:900 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  cursor:pointer !important;
  transition:background .2s cubic-bezier(.16,1,.3,1), border-color .2s cubic-bezier(.16,1,.3,1) !important;
}

#screenChat .chatPaymentBtn:hover,
#screenChat .chatPaymentBtn--white:hover{
  border-color:#9ca3af !important;
  background:#f4f5f7 !important;
}

#screenChat .chatPaymentBtn svg{
  flex:0 0 auto !important;
  width:16px !important;
  height:16px !important;
}

#screenChat .chatPaymentBtn:focus-visible,
#screenChat .chatNegotiateBtn:focus-visible{
  outline:2px solid #111827 !important;
  outline-offset:2px !important;
}

@media (max-width:720px){
  #screenChat .chatPaymentBtn{
    width:38px !important;
    min-width:38px !important;
    padding:0 !important;
  }
  #screenChat .chatPaymentBtn span{ display:none !important }
}

/* ---------- overlay do painel de cobranca e do checkout ---------- */

#screenChat.kmlChatWhiteScreen .whitePaymentOverlay{
  position:fixed !important;
  inset:0 !important;
  z-index:1316 !important;
  display:grid !important;
  place-items:center !important;
  padding:20px !important;
  background:rgba(15,23,42,.46) !important;
  opacity:0 !important;
  pointer-events:none !important;
  transition:opacity .2s cubic-bezier(.16,1,.3,1) !important;
}

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

#screenChat.kmlChatWhiteScreen .whitePaymentOverlay.isOpen{
  opacity:1 !important;
  pointer-events:auto !important;
}

#screenChat.kmlChatWhiteScreen .whitePaymentPanel{
  width:min(620px, calc(100vw - 32px)) !important;
  max-height:calc(100vh - 44px) !important;
  overflow:auto !important;
  border:1px solid rgba(17,24,39,.14) !important;
  border-radius:20px !important;
  background:#fff !important;
  color:#111827 !important;
  box-shadow:0 28px 80px rgba(17,24,39,.24) !important;
}

#screenChat.kmlChatWhiteScreen .whitePaymentHead{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:18px !important;
  padding:22px 24px 16px !important;
  border-bottom:1px solid #e5e7eb !important;
}

#screenChat.kmlChatWhiteScreen .whitePaymentHead span{
  display:block !important;
  margin-bottom:5px !important;
  color:#7a5d10 !important;
  font-size:12px !important;
  font-weight:950 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
}

#screenChat.kmlChatWhiteScreen .whitePaymentHead strong{
  display:block !important;
  font-size:24px !important;
  line-height:1.05 !important;
  letter-spacing:-.03em !important;
}

#screenChat.kmlChatWhiteScreen .whitePaymentPanel label{
  display:block !important;
  color:#111827 !important;
  font-size:13px !important;
  font-weight:900 !important;
}

#screenChat.kmlChatWhiteScreen .whitePaymentPanel input,
#screenChat.kmlChatWhiteScreen .whitePaymentPanel textarea,
#screenChat.kmlChatWhiteScreen .whitePaymentPanel select{
  width:100% !important;
  margin-top:8px !important;
  padding:12px !important;
  border:1px solid #d1d5db !important;
  border-radius:12px !important;
  outline:0 !important;
  background:#f9fafb !important;
  color:#111827 !important;
  font:inherit !important;
}

#screenChat.kmlChatWhiteScreen .whitePaymentPanel textarea{
  resize:vertical !important;
  min-height:116px !important;
}

#screenChat.kmlChatWhiteScreen .whitePaymentPanel input:focus,
#screenChat.kmlChatWhiteScreen .whitePaymentPanel textarea:focus,
#screenChat.kmlChatWhiteScreen .whitePaymentPanel select:focus{
  border-color:#111827 !important;
  background:#fff !important;
  box-shadow:0 0 0 3px rgba(17,24,39,.08) !important;
}

#screenChat.kmlChatWhiteScreen .whitePaymentGrid{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:14px !important;
  padding:18px 24px 0 !important;
}

#screenChat.kmlChatWhiteScreen .whitePaymentPanel > label{
  padding:18px 24px 0 !important;
}

/* a regra do dinheiro fica escrita, nao subentendida */
#screenChat.kmlChatWhiteScreen .whitePaymentGuard{
  margin:18px 24px 0 !important;
  padding:14px 16px !important;
  border:1px solid #e5e7eb !important;
  border-left:3px solid #fcbc1d !important;
  border-radius:4px !important;
  background:#f9fafb !important;
}

#screenChat.kmlChatWhiteScreen .whitePaymentGuard strong{
  display:block !important;
  margin-bottom:5px !important;
  color:#111827 !important;
  font-size:13px !important;
  font-weight:900 !important;
}

#screenChat.kmlChatWhiteScreen .whitePaymentGuard span{
  display:block !important;
  color:#4b5563 !important;
  font-size:13px !important;
  line-height:1.45 !important;
  font-weight:600 !important;
}

#screenChat.kmlChatWhiteScreen .whitePaymentPreview{
  margin:18px 24px 0 !important;
  padding:14px 16px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:14px !important;
  border:1px solid #e5e7eb !important;
  border-radius:14px !important;
  background:#f9fafb !important;
}

#screenChat.kmlChatWhiteScreen .whitePaymentPreview span{
  color:#6b7280 !important;
  font-size:13px !important;
  font-weight:760 !important;
}

#screenChat.kmlChatWhiteScreen .whitePaymentPreview strong{
  white-space:nowrap !important;
  font-size:20px !important;
  font-weight:950 !important;
}

#screenChat.kmlChatWhiteScreen .whitePaymentActions{
  display:flex !important;
  justify-content:flex-end !important;
  gap:10px !important;
  padding:18px 24px 24px !important;
}

#screenChat.kmlChatWhiteScreen .whitePayGhost,
#screenChat.kmlChatWhiteScreen .whitePaySubmit{
  min-height:46px !important;
  padding:0 18px !important;
  border-radius:12px !important;
  cursor:pointer !important;
  font:inherit !important;
  font-weight:950 !important;
  transition:background .2s cubic-bezier(.16,1,.3,1) !important;
}

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

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

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

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

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

/* ---------- checkout ---------- */

#screenChat.kmlChatWhiteScreen .whiteCheckoutBody{
  padding:20px 24px 0 !important;
}

#screenChat.kmlChatWhiteScreen .whiteCheckoutAmount{
  padding:16px !important;
  border:1px solid #e5e7eb !important;
  border-radius:14px !important;
  background:#f9fafb !important;
  text-align:center !important;
}

#screenChat.kmlChatWhiteScreen .whiteCheckoutAmount span{
  display:block !important;
  margin-bottom:6px !important;
  color:#6b7280 !important;
  font-size:12px !important;
  font-weight:900 !important;
  letter-spacing:.10em !important;
  text-transform:uppercase !important;
}

#screenChat.kmlChatWhiteScreen .whiteCheckoutAmount strong{
  display:block !important;
  color:#111827 !important;
  font-size:32px !important;
  font-weight:950 !important;
  letter-spacing:-.03em !important;
}

#screenChat.kmlChatWhiteScreen .whiteCheckoutRows{
  margin-top:14px !important;
  display:grid !important;
  gap:0 !important;
  border:1px solid #e5e7eb !important;
  border-radius:4px !important;
  overflow:hidden !important;
}

#screenChat.kmlChatWhiteScreen .whiteCheckoutRows > div{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:14px !important;
  padding:11px 14px !important;
  border-bottom:1px solid #e5e7eb !important;
}

#screenChat.kmlChatWhiteScreen .whiteCheckoutRows > div:last-child{
  border-bottom:0 !important;
}

#screenChat.kmlChatWhiteScreen .whiteCheckoutRows span{
  color:#6b7280 !important;
  font-size:13px !important;
  font-weight:700 !important;
}

#screenChat.kmlChatWhiteScreen .whiteCheckoutRows strong{
  color:#111827 !important;
  font-size:13px !important;
  font-weight:900 !important;
  text-align:right !important;
}

#screenChat.kmlChatWhiteScreen .whitePixBox{
  margin-top:14px !important;
  padding:14px 16px !important;
  border:1px dashed #d1d5db !important;
  border-radius:4px !important;
  background:#f9fafb !important;
}

#screenChat.kmlChatWhiteScreen .whitePixBox strong{
  display:block !important;
  margin-bottom:4px !important;
  color:#111827 !important;
  font-size:13px !important;
  font-weight:900 !important;
}

#screenChat.kmlChatWhiteScreen .whitePixBox > div > span{
  display:block !important;
  color:#4b5563 !important;
  font-size:12px !important;
  line-height:1.45 !important;
  font-weight:600 !important;
}

#screenChat.kmlChatWhiteScreen .whitePixBox code{
  display:block !important;
  margin-top:10px !important;
  padding:10px 12px !important;
  border:1px solid #e5e7eb !important;
  border-radius:4px !important;
  background:#fff !important;
  color:#4b5563 !important;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size:12px !important;
  overflow-wrap:anywhere !important;
}

/* ---------- balao de cobranca no fluxo da conversa ---------- */

#screenChat.kmlChatWhiteScreen .paymentBubble{
  width:min(420px, 100%) !important;
  border:1px solid rgba(17,24,39,.16) !important;
  border-left:3px solid #fcbc1d !important;
  border-radius:18px !important;
  background:#fff !important;
  color:#111827 !important;
  overflow:hidden !important;
  box-shadow:0 14px 34px rgba(17,24,39,.08) !important;
}

#screenChat.kmlChatWhiteScreen .messageGroup.isMine .paymentBubble{
  border-color:rgba(17,24,39,.32) !important;
  border-left-color:#fcbc1d !important;
  background:#111827 !important;
  color:#fff !important;
}

#screenChat.kmlChatWhiteScreen .paymentTop{
  display:flex !important;
  justify-content:space-between !important;
  gap:16px !important;
  align-items:flex-start !important;
  padding:14px 16px !important;
  border-bottom:1px solid rgba(17,24,39,.10) !important;
}

#screenChat.kmlChatWhiteScreen .messageGroup.isMine .paymentTop{
  border-bottom-color:rgba(255,255,255,.14) !important;
}

#screenChat.kmlChatWhiteScreen .paymentTop span{
  color:#6b7280 !important;
  font-size:11px !important;
  font-weight:900 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
}

#screenChat.kmlChatWhiteScreen .messageGroup.isMine .paymentTop span{
  color:rgba(255,255,255,.62) !important;
}

#screenChat.kmlChatWhiteScreen .paymentTop strong{
  white-space:nowrap !important;
  color:inherit !important;
  font-size:18px !important;
  font-weight:950 !important;
}

#screenChat.kmlChatWhiteScreen .paymentScope{
  padding:14px 16px 10px !important;
  font-size:15px !important;
  line-height:1.42 !important;
  font-weight:850 !important;
}

#screenChat.kmlChatWhiteScreen .paymentFacts{
  margin:0 !important;
  padding:0 16px 14px !important;
  display:grid !important;
  gap:8px !important;
}

#screenChat.kmlChatWhiteScreen .paymentFacts div{
  display:grid !important;
  grid-template-columns:96px minmax(0,1fr) !important;
  gap:10px !important;
}

#screenChat.kmlChatWhiteScreen .paymentFacts dt{
  color:#6b7280 !important;
  font-size:11px !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
}

#screenChat.kmlChatWhiteScreen .messageGroup.isMine .paymentFacts dt{
  color:rgba(255,255,255,.58) !important;
}

#screenChat.kmlChatWhiteScreen .paymentFacts dd{
  margin:0 !important;
  color:inherit !important;
  font-size:13px !important;
  font-weight:780 !important;
}

#screenChat.kmlChatWhiteScreen .paymentActions{
  padding:0 16px 16px !important;
}

#screenChat.kmlChatWhiteScreen .paymentActions button{
  width:100% !important;
  min-height:38px !important;
  border:1px solid #b08d20 !important;
  border-radius:11px !important;
  background:#fcbc1d !important;
  color:#111827 !important;
  cursor:pointer !important;
  font:inherit !important;
  font-size:13px !important;
  font-weight:900 !important;
  transition:background .2s cubic-bezier(.16,1,.3,1) !important;
}

#screenChat.kmlChatWhiteScreen .paymentActions button:hover{
  background:#b89125 !important;
}

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

/* status de quem enviou a cobranca: texto, nunca so cor */
#screenChat.kmlChatWhiteScreen .paymentWait{
  display:block !important;
  padding:9px 0 0 !important;
  color:#6b7280 !important;
  font-size:12px !important;
  font-weight:800 !important;
}

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

@media (max-width:560px){
  #screenChat.kmlChatWhiteScreen .whitePaymentGrid{
    grid-template-columns:1fr !important;
  }
}

@media (prefers-reduced-motion: reduce){
  #screenChat.kmlChatWhiteScreen .whitePaymentOverlay,
  #screenChat.kmlChatWhiteScreen .whitePaySubmit,
  #screenChat.kmlChatWhiteScreen .whitePayGhost,
  #screenChat .chatPaymentBtn,
  #screenChat .chatNegotiateBtn,
  #screenChat.kmlChatWhiteScreen .paymentActions button{
    transition:none !important;
  }
}

/* ============================================================================
   ENTREGA DE MATERIAL
   ============================================================================
   Terceiro cartao da familia proposta -> cobranca -> entrega, no mesmo desenho.

   A marca no player e sobreposta em CSS: NAO fica gravada no arquivo. Isso
   esta escrito na tela do editor de proposito — protecao que se promete e nao
   se cumpre custa mais caro do que limite admitido.
   ============================================================================ */

/* ---- botao no cabecalho ---- */
#screenChat .chatEntregaBtn{
  min-height:36px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  padding:0 13px !important;
  border:1px solid #d1d5db !important;
  border-radius:8px !important;
  background:#fff !important;
  color:#111827 !important;
  font:inherit !important;
  font-size:13px !important;
  font-weight:900 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  cursor:pointer !important;
  transition:background .2s cubic-bezier(.16,1,.3,1), border-color .2s cubic-bezier(.16,1,.3,1) !important;
}
#screenChat .chatEntregaBtn:hover{ border-color:#9ca3af !important; background:#f4f5f7 !important }
#screenChat .chatEntregaBtn:focus-visible{ outline:2px solid #111827 !important; outline-offset:2px !important }
#screenChat .chatEntregaBtn svg{ flex:0 0 auto !important; width:16px !important; height:16px !important }

@media (max-width:860px){
  #screenChat .chatEntregaBtn{ width:38px !important; min-width:38px !important; padding:0 !important }
  #screenChat .chatEntregaBtn span{ display:none !important }
}

/* ---- painel de envio ---- */
#screenChat.kmlChatWhiteScreen .kmlEntregaCampo{ padding:18px 24px 0 !important }
#screenChat.kmlChatWhiteScreen .kmlEntregaCampo label{
  display:block !important; color:#111827 !important;
  font-size:13px !important; font-weight:900 !important;
}
#screenChat.kmlChatWhiteScreen .kmlEntregaCampo label b{
  color:#7a5d10 !important; font-weight:800 !important;
}
#screenChat.kmlChatWhiteScreen .kmlEntregaCampo input[type="file"]{
  width:100% !important; margin-top:8px !important; padding:11px 12px !important;
  border:1px dashed #d1d5db !important; border-radius:12px !important;
  background:#f9fafb !important; color:#4b5563 !important;
  font:inherit !important; font-size:13px !important; cursor:pointer !important;
}
#screenChat.kmlChatWhiteScreen .kmlEntregaCampo input[type="file"]:focus-visible{
  outline:2px solid #111827 !important; outline-offset:2px !important;
}
#screenChat.kmlChatWhiteScreen .kmlEntregaCampo small{
  display:block !important; margin-top:6px !important;
  color:#4b5563 !important; font-size:12px !important; line-height:1.45 !important;
}

#screenChat.kmlChatWhiteScreen .kmlEntregaAviso span{
  display:block !important; margin-top:6px !important;
  color:#4b5563 !important; font-size:12.5px !important; line-height:1.5 !important;
  font-weight:600 !important;
}
#screenChat.kmlChatWhiteScreen .kmlEntregaAviso span b{
  color:#111827 !important; font-weight:900 !important;
}

/* ---- cartao no fluxo ---- */
#screenChat.kmlChatWhiteScreen .entregaBubble{
  width:min(420px,100%) !important;
  border:1px solid rgba(17,24,39,.16) !important;
  border-left:3px solid #111827 !important;
  border-radius:18px !important;
  background:#fff !important;
  color:#111827 !important;
  overflow:hidden !important;
  box-shadow:0 14px 34px rgba(17,24,39,.08) !important;
}
#screenChat.kmlChatWhiteScreen .messageGroup.isMine .entregaBubble{
  border-color:rgba(17,24,39,.32) !important;
  border-left-color:#fcbc1d !important;
  background:#111827 !important;
  color:#fff !important;
}
#screenChat.kmlChatWhiteScreen .entregaTop{
  display:flex !important; justify-content:space-between !important;
  gap:16px !important; align-items:flex-start !important;
  padding:14px 16px !important; border-bottom:1px solid rgba(17,24,39,.10) !important;
}
#screenChat.kmlChatWhiteScreen .messageGroup.isMine .entregaTop{
  border-bottom-color:rgba(255,255,255,.14) !important;
}
#screenChat.kmlChatWhiteScreen .entregaTop span{
  color:#6b7280 !important; font-size:11px !important; font-weight:900 !important;
  letter-spacing:.12em !important; text-transform:uppercase !important;
}
#screenChat.kmlChatWhiteScreen .messageGroup.isMine .entregaTop span{
  color:rgba(255,255,255,.62) !important;
}
#screenChat.kmlChatWhiteScreen .entregaTop strong{
  color:inherit !important; font-size:12px !important; font-weight:900 !important;
  text-align:right !important; white-space:nowrap !important;
}
#screenChat.kmlChatWhiteScreen .entregaScope{
  padding:14px 16px 8px !important;
  font-size:15px !important; line-height:1.42 !important; font-weight:850 !important;
}
#screenChat.kmlChatWhiteScreen .entregaNota{
  margin:0 !important; padding:0 16px 12px !important;
  color:#4b5563 !important; font-size:13px !important; line-height:1.45 !important;
}
#screenChat.kmlChatWhiteScreen .messageGroup.isMine .entregaNota{
  color:rgba(255,255,255,.72) !important;
}
#screenChat.kmlChatWhiteScreen .entregaArquivos{
  padding:0 16px 14px !important; display:grid !important; gap:8px !important;
}
#screenChat.kmlChatWhiteScreen .entregaLinha{
  width:100% !important;
  display:flex !important; align-items:baseline !important;
  justify-content:space-between !important; gap:12px !important;
  padding:10px 12px !important; text-align:left !important;
  border:1px solid rgba(17,24,39,.14) !important; border-radius:4px !important;
  background:#f9fafb !important; color:#111827 !important;
  font:inherit !important; cursor:pointer !important;
  transition:background .2s cubic-bezier(.16,1,.3,1) !important;
}
#screenChat.kmlChatWhiteScreen .entregaLinha:hover{ background:#f4f5f7 !important }
#screenChat.kmlChatWhiteScreen .entregaLinha b{ font-size:13px !important; font-weight:900 !important }
#screenChat.kmlChatWhiteScreen .entregaLinha span{ color:#4b5563 !important; font-size:12px !important; font-weight:700 !important }
#screenChat.kmlChatWhiteScreen .entregaLinha--ok{
  border-color:rgba(201,160,42,.45) !important; background:rgba(201,160,42,.10) !important;
}
/* estado travado: cadeado E texto. Nunca so a cor. */
#screenChat.kmlChatWhiteScreen .entregaLinha--travada{
  cursor:default !important; background:#fff !important;
  border-style:dashed !important; opacity:1 !important;
}
#screenChat.kmlChatWhiteScreen .entregaLinha--travada b::before{
  content:"\1F512 "; font-size:12px;
}
#screenChat.kmlChatWhiteScreen .entregaAcoes{
  padding:0 16px 14px !important; display:grid !important;
  grid-template-columns:1fr 1.3fr !important; gap:8px !important;
}
#screenChat.kmlChatWhiteScreen .entregaAcoes button{
  min-height:38px !important; border-radius:11px !important;
  font:inherit !important; font-size:13px !important; font-weight:900 !important;
  cursor:pointer !important;
}
#screenChat.kmlChatWhiteScreen .entregaAcoes button[data-entrega-decidir="revisao"]{
  border:1px solid #d1d5db !important; background:#fff !important; color:#111827 !important;
}
#screenChat.kmlChatWhiteScreen .entregaAcoes button[data-entrega-decidir="aprovar"]{
  border:1px solid #b08d20 !important; background:#fcbc1d !important; color:#111827 !important;
}
#screenChat.kmlChatWhiteScreen .entregaLog{
  display:block !important; width:calc(100% - 32px) !important; margin:0 16px 14px !important;
  padding:8px !important; border:0 !important; border-top:1px solid rgba(17,24,39,.10) !important;
  background:transparent !important; color:#4b5563 !important;
  font:inherit !important; font-size:12px !important; font-weight:800 !important;
  cursor:pointer !important; text-align:center !important;
}
#screenChat.kmlChatWhiteScreen .messageGroup.isMine .entregaLog{
  border-top-color:rgba(255,255,255,.14) !important; color:rgba(255,255,255,.72) !important;
}

/* ---- visualizador da previa ---- */
#screenChat.kmlChatWhiteScreen .kmlPreviaPanel{ width:min(760px, calc(100vw - 32px)) !important }

#screenChat.kmlChatWhiteScreen .kmlPreviaPalco{
  position:relative !important;
  margin:20px 24px 0 !important;
  border:1px solid rgba(17,24,39,.14) !important;
  border-radius:4px !important;
  background:#0a0c10 !important;
  overflow:hidden !important;
  aspect-ratio:16 / 9 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
}
#screenChat.kmlChatWhiteScreen .kmlPreviaPalco video,
#screenChat.kmlChatWhiteScreen .kmlPreviaPalco img{
  width:100% !important; height:100% !important; object-fit:contain !important;
  display:block !important; background:#0a0c10 !important;
}
#screenChat.kmlChatWhiteScreen .kmlPreviaPalco img[hidden],
#screenChat.kmlChatWhiteScreen .kmlPreviaPalco video[hidden]{ display:none !important }

/* A marca cobre o quadro em diagonal e repetida: um print de pedaco tambem
   sai marcado. pointer-events:none para nao roubar o clique do player. */
#screenChat.kmlChatWhiteScreen .kmlPreviaMarca{
  position:absolute !important; inset:-20% !important;
  display:grid !important;
  grid-template-columns:repeat(2, 1fr) !important;
  place-items:center !important;
  transform:rotate(-24deg) !important;
  pointer-events:none !important;
  z-index:2 !important;
}
#screenChat.kmlChatWhiteScreen .kmlPreviaMarca span::after{
  content:"PRÉVIA · KARAMELOO";
  color:rgba(255,255,255,.30);
  font-size:clamp(11px, 1.6vw, 15px);
  font-weight:900;
  letter-spacing:.2em;
  white-space:nowrap;
}

#screenChat.kmlChatWhiteScreen .kmlPreviaNota{
  margin:14px 24px 0 !important;
  color:#4b5563 !important; font-size:13.5px !important; line-height:1.5 !important;
}
#screenChat.kmlChatWhiteScreen .kmlPreviaNota:empty{ display:none !important }

#screenChat.kmlChatWhiteScreen .kmlPreviaEstado{
  display:flex !important; align-items:center !important; gap:9px !important;
  margin:14px 24px 0 !important; padding:11px 14px !important;
  border:1px solid #e5e7eb !important; border-left:3px solid #fcbc1d !important;
  border-radius:4px !important; background:#f9fafb !important;
}
#screenChat.kmlChatWhiteScreen .kmlPreviaPonto{
  width:8px !important; height:8px !important; flex:0 0 auto !important;
  border-radius:100px !important; background:#fcbc1d !important;
}
#screenChat.kmlChatWhiteScreen .kmlPreviaEstado b{
  color:#111827 !important; font-size:13px !important; font-weight:900 !important;
}

@media (max-width:560px){
  #screenChat.kmlChatWhiteScreen .kmlPreviaPalco{ margin-inline:14px !important }
  #screenChat.kmlChatWhiteScreen .entregaAcoes{ grid-template-columns:1fr !important }
}

@media (prefers-reduced-motion: reduce){
  #screenChat .chatEntregaBtn,
  #screenChat.kmlChatWhiteScreen .entregaLinha{ transition:none !important }
}
/* ============================================================================
   CARTÃO DE PROPOSTA COM ESTADO
   ============================================================================
   Sete estados. Regra que vale para todos: o estado e TEXTO ("Aceita",
   "Recusada"), e a cor so reforca. Quem nao distingue verde de vermelho le a
   palavra — e num cartao que decide dinheiro isso nao e detalhe.
   ============================================================================ */

#screenChat.kmlChatWhiteScreen .propostaBubble{
  width:min(430px,100%) !important;
  border:1px solid rgba(17,24,39,.16) !important;
  border-left:3px solid #6b7280 !important;
  border-radius:18px !important;
  background:#fff !important;
  color:#111827 !important;
  overflow:hidden !important;
  box-shadow:0 14px 34px rgba(17,24,39,.08) !important;
}
#screenChat.kmlChatWhiteScreen .messageGroup.isMine .propostaBubble{
  border-color:rgba(17,24,39,.32) !important;
  background:#111827 !important;
  color:#fff !important;
}

/* A barra da esquerda muda com o estado — reforco, nunca a informacao.
   Precisa do .messageGroup no seletor: a regra do isMine escreve `border-color`
   (atalho, que inclui o lado esquerdo) e, com a mesma especificidade, vencia
   por vir depois. Aqui o seletor fica mais especifico e o estado prevalece nos
   dois temas. */
#screenChat.kmlChatWhiteScreen .messageGroup .propostaBubble.prop--aceita{
  border-left-color:#1f7a45 !important;
}
#screenChat.kmlChatWhiteScreen .messageGroup .propostaBubble.prop--recusada,
#screenChat.kmlChatWhiteScreen .messageGroup .propostaBubble.prop--cancelada{
  border-left-color:#a3341f !important;
}
#screenChat.kmlChatWhiteScreen .messageGroup .propostaBubble.prop--em_negociacao{
  border-left-color:#fcbc1d !important;
}
#screenChat.kmlChatWhiteScreen .messageGroup .propostaBubble.prop--concluida{
  border-left-color:#111827 !important;
}
#screenChat.kmlChatWhiteScreen .messageGroup.isMine .propostaBubble.prop--concluida{
  border-left-color:#fcbc1d !important;   /* no cartao escuro, preto some */
}

#screenChat.kmlChatWhiteScreen .propostaTop{
  display:flex !important; justify-content:space-between !important;
  gap:16px !important; align-items:flex-start !important;
  padding:14px 16px 10px !important;
}
#screenChat.kmlChatWhiteScreen .propostaTop span{
  color:#6b7280 !important; font-size:11px !important; font-weight:900 !important;
  letter-spacing:.12em !important; text-transform:uppercase !important;
}
#screenChat.kmlChatWhiteScreen .messageGroup.isMine .propostaTop span{
  color:rgba(255,255,255,.62) !important;
}
#screenChat.kmlChatWhiteScreen .propostaTop strong{
  color:inherit !important; font-size:18px !important; font-weight:950 !important;
  white-space:nowrap !important;
}

/* a linha do estado */
#screenChat.kmlChatWhiteScreen .propostaEstado{
  display:flex !important; align-items:center !important; gap:7px !important;
  padding:0 16px 12px !important;
  border-bottom:1px solid rgba(17,24,39,.10) !important;
  margin-bottom:2px !important;
}
#screenChat.kmlChatWhiteScreen .messageGroup.isMine .propostaEstado{
  border-bottom-color:rgba(255,255,255,.14) !important;
}
#screenChat.kmlChatWhiteScreen .propostaEstado i{
  width:8px !important; height:8px !important; flex:0 0 auto !important;
  border-radius:100px !important; background:#6b7280 !important;
}
#screenChat.kmlChatWhiteScreen .prop--aceita .propostaEstado i{ background:#1f7a45 !important }
#screenChat.kmlChatWhiteScreen .prop--recusada .propostaEstado i,
#screenChat.kmlChatWhiteScreen .prop--cancelada .propostaEstado i{ background:#a3341f !important }
#screenChat.kmlChatWhiteScreen .prop--em_negociacao .propostaEstado i{ background:#fcbc1d !important }
#screenChat.kmlChatWhiteScreen .propostaEstado b{
  color:inherit !important; font-size:12.5px !important; font-weight:900 !important;
}
#screenChat.kmlChatWhiteScreen .propostaEstado span{
  color:#4b5563 !important; font-size:12px !important; font-weight:600 !important;
}
#screenChat.kmlChatWhiteScreen .messageGroup.isMine .propostaEstado span{
  color:rgba(255,255,255,.66) !important;
}

#screenChat.kmlChatWhiteScreen .propostaScope{
  padding:12px 16px 10px !important;
  font-size:15px !important; line-height:1.42 !important; font-weight:850 !important;
}
#screenChat.kmlChatWhiteScreen .propostaFatos{
  margin:0 !important; padding:0 16px 12px !important;
  display:grid !important; gap:8px !important;
}
#screenChat.kmlChatWhiteScreen .propostaFatos div{
  display:grid !important; grid-template-columns:96px minmax(0,1fr) !important; gap:10px !important;
}
#screenChat.kmlChatWhiteScreen .propostaFatos dt{
  color:#6b7280 !important; font-size:11px !important; font-weight:900 !important;
  text-transform:uppercase !important;
}
#screenChat.kmlChatWhiteScreen .messageGroup.isMine .propostaFatos dt{
  color:rgba(255,255,255,.58) !important;
}
#screenChat.kmlChatWhiteScreen .propostaFatos dd{
  margin:0 !important; color:inherit !important;
  font-size:13px !important; font-weight:780 !important;
}
#screenChat.kmlChatWhiteScreen .propostaNota{
  margin:0 !important; padding:0 16px 12px !important;
  color:#4b5563 !important; font-size:13px !important; line-height:1.45 !important;
}
#screenChat.kmlChatWhiteScreen .messageGroup.isMine .propostaNota{
  color:rgba(255,255,255,.72) !important;
}

#screenChat.kmlChatWhiteScreen .propostaAcoes{
  padding:0 16px 16px !important;
  display:grid !important; grid-template-columns:1fr 1fr 1.2fr !important; gap:7px !important;
}
#screenChat.kmlChatWhiteScreen .propostaAcoes button{
  min-height:38px !important; border-radius:11px !important;
  font:inherit !important; font-size:12.5px !important; font-weight:900 !important;
  cursor:pointer !important;
}
#screenChat.kmlChatWhiteScreen .propostaAcoes button[data-prop-acao="recusada"]{
  border:1px solid #d1d5db !important; background:#fff !important; color:#111827 !important;
}
#screenChat.kmlChatWhiteScreen .propostaAcoes button[data-prop-acao="em_negociacao"]{
  border:1px solid #d1d5db !important; background:#fff !important; color:#111827 !important;
}
#screenChat.kmlChatWhiteScreen .propostaAcoes button[data-prop-acao="aceita"]{
  border:1px solid #b08d20 !important; background:#fcbc1d !important; color:#111827 !important;
}
#screenChat.kmlChatWhiteScreen .propostaAcoes button:focus-visible{
  outline:2px solid #111827 !important; outline-offset:2px !important;
}

#screenChat.kmlChatWhiteScreen .propostaCancelar{
  display:block !important; width:calc(100% - 32px) !important; margin:0 16px 14px !important;
  padding:8px !important; border:0 !important;
  border-top:1px solid rgba(17,24,39,.10) !important;
  background:transparent !important; color:#4b5563 !important;
  font:inherit !important; font-size:12px !important; font-weight:800 !important;
  cursor:pointer !important; text-align:center !important;
}
#screenChat.kmlChatWhiteScreen .messageGroup.isMine .propostaCancelar{
  border-top-color:rgba(255,255,255,.14) !important; color:rgba(255,255,255,.72) !important;
}

@media (max-width:560px){
  #screenChat.kmlChatWhiteScreen .propostaAcoes{ grid-template-columns:1fr !important }
}