/* O atendimento usa a mesma paleta e tipografia do CRM. */
.wa-notifications {
  position: fixed;
  top: calc(var(--crm-header) + 14px);
  right: max(18px, env(safe-area-inset-right));
  width: min(350px, calc(100vw - 32px));
  z-index: 115;
  pointer-events: none;
}
.wa-notification {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 12px 16px 16px;
  border: 1px solid var(--crm-linha-forte);
  border-radius: 14px;
  background: var(--crm-painel);
  color: var(--crm-tinta);
  box-shadow: var(--crm-sombra-alta);
  pointer-events: auto;
  animation: wa-notification-in .2s ease-out;
}
.wa-notification-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  background: var(--crm-painel-2);
  color: var(--crm-plum);
}
.wa-notification svg { width: 19px; height: 19px; }
.wa-notification-open {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  text-align: left;
  border-radius: 4px;
}
.wa-notification-label { font-size: 11px; color: var(--crm-tinta-3); }
.wa-notification-open strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.wa-notification-preview {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  color: var(--crm-tinta-2);
  font-size: 13px;
  line-height: 1.5;
}
.wa-notification-action { margin-top: 5px; font-size: 12px; font-weight: 500; color: var(--crm-plum); }
.wa-notification-close { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 8px; color: var(--crm-tinta-3); }
.wa-notification-close:hover { background: var(--crm-painel-2); }
.wa-notification button:focus-visible { outline: 2px solid var(--crm-orchid); outline-offset: 3px; }
@keyframes wa-notification-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .wa-notification { animation: none; } }

body[data-tela="conversas"] .crm-main {
  padding: 18px;
  overflow: hidden;
  display: flex;
}
.wa-shell {
  flex: 1;
}
.wa-shell .sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.wa-shell h1,.wa-shell h2,.wa-shell h3,.wa-dialog h2,.wa-config h2,.wa-config h3 {
  font-family:Jost,"Instrument Sans",system-ui,sans-serif;
}
.wa-shell {
  display: grid;
  grid-template-columns: minmax(260px,310px) minmax(0,1fr);
  position: relative;
  isolation: isolate;
  height: calc(100dvh - var(--crm-header) - 48px);
  min-height: 0;
  border: 1px solid var(--crm-linha);
  border-radius: var(--crm-raio-g);
  overflow: hidden;
  background: var(--crm-painel);
}
.wa-inbox,
.wa-thread,
.wa-context {
  min-width: 0;
  min-height: 0;
}
.wa-inbox {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--crm-linha);
}
.wa-list-head {
  padding: 23px 20px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wa-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--crm-tinta-3);
}
.wa-list-head h1 {
  font: 500 27px Jost,sans-serif;
  line-height: 1.3;
}
.wa-button {
  font: inherit;
  font-size: 13px;
  border: 1px solid var(--crm-linha-forte);
  background: var(--crm-painel);
  color: var(--crm-tinta);
  border-radius: 8px;
  cursor: pointer;
  padding: 7px 10px;
  line-height: 1.5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  transition: background-color .15s, border-color .15s;
}
.wa-button:hover:not(:disabled) {
  background: var(--crm-painel-2);
  border-color: var(--crm-orchid);
}
.wa-button:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.wa-button svg { width: 17px; height: 17px; flex: none; }
.wa-button > span:empty { display: none; }
.wa-primary {
  background: var(--crm-plum);
  color: var(--crm-painel);
  border-color: var(--crm-plum);
}
.wa-primary:hover:not(:disabled) {
  background: var(--crm-orchid);
  color: var(--crm-painel);
}
.wa-shell input,
.wa-shell select,
.wa-dialog input,
.wa-dialog select,
.wa-dialog textarea,
.wa-config input,
.wa-config select {
  font: inherit;
  font-size: 12px;
  color: var(--crm-tinta);
  /* background-color, nunca o atalho: o atalho zera a seta desenhada
     em crm.css e o navegador repete o SVG pelo campo inteiro. */
  background-color: var(--crm-painel);
  border: 1px solid var(--crm-linha-forte);
  padding: 9px 10px;
  border-radius: 8px;
  min-width: 0;
  max-width: 100%;
}
.wa-shell :focus-visible,
.wa-dialog :focus-visible,
.wa-config :focus-visible {
  outline: 2px solid var(--crm-orchid);
  outline-offset: 3px;
}
.wa-hours-days {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  border: 0;
  padding: 0;
  margin: 10px 0;
}
.wa-shell [hidden], .wa-dialog [hidden], .wa-config [hidden] {
  display: none!important;
}
.wa-connection {
  padding: 0 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.wa-connection-state {
  font-size: 10px;
  color: var(--crm-tinta-3);
}
.wa-filters {
  padding: 0 14px 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}
.wa-filter-row {
  display: flex;
  gap: 6px;
}
.wa-filter-row > * {
  min-width: 0;
  flex: 1;
}
.wa-filter-row label {
  font-size: 10px;
  white-space: nowrap;
}
.wa-filter-row input {
  vertical-align: middle;
  accent-color: var(--crm-plum);
}
.wa-list {
  overflow: auto;
  flex: 1;
  overscroll-behavior: contain;
}
.wa-contact {
  display: flex;
  gap: 11px;
  padding: 16px 14px;
  width: 100%;
  border: 0;
  border-top: 1px solid var(--crm-linha);
  text-align: left;
  background: transparent;
  color: var(--crm-tinta);
  font: inherit;
  cursor: pointer;
}
.wa-contact:hover {
  background: var(--crm-painel-2);
}
.wa-contact.selected {
  background: var(--crm-painel-2);
  box-shadow: inset 3px 0 var(--crm-plum);
}
.wa-avatar {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: var(--crm-painel-3);
  color: var(--crm-plum);
  font: 500 17px Jost,sans-serif;
  flex-shrink: 0;
}
.wa-contact-copy {
  min-width: 0;
  flex: 1;
  display: grid;
  /* Sem isto a coluna cresce até caber a etiqueta inteira e empurra hora e responsável para fora. */
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
}
.wa-contact-top {
  display: flex;
  justify-content: space-between;
  gap: 5px;
}
.wa-contact-top strong {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wa-contact-top time {
  font-size: 10px;
  white-space: nowrap;
  color: var(--crm-tinta-3);
}
.wa-preview {
  font-size: 12px;
  color: var(--crm-tinta-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wa-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 10px;
  color: var(--crm-tinta-3);
}
.wa-tags > span {
  background: var(--crm-painel);
  border: 1px solid var(--crm-linha);
  padding: 1px 5px;
  border-radius: 4px;
}
.wa-contact-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wa-status {
  font-size: 11px;
  color: var(--crm-tinta-3);
}
.wa-status:before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--crm-tinta-3);
  margin-right: 5px;
}
.wa-status.aguardando_equipe {
  color: var(--crm-accent-texto);
}
.wa-status.aguardando_equipe:before {
  background: var(--crm-accent);
}
.wa-status.aguardando_lead:before {
  background: #6292b8;
}
.wa-unread {
  font-size: 10px;
  border-radius: 10px;
  background: var(--crm-plum);
  color: var(--crm-painel);
  padding: 1px 6px;
}
.wa-owner-name {
  font-size: 10px;
  color: var(--crm-tinta-3);
}
.wa-list-footer {
  padding: 8px 12px;
  border-top: 1px solid var(--crm-linha);
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}
.wa-sync {
  font-size: 10px;
  color: var(--crm-tinta-3);
}
.wa-thread {
  display: flex;
  flex-direction: column;
  background: var(--crm-bg);
  overflow: hidden;
  position: relative;
}
.wa-thread-head {
  flex-shrink: 0;
  padding: 14px 20px 10px;
  background: var(--crm-painel);
  border-bottom: 1px solid var(--crm-linha);
  display: grid;
  grid-template-columns: 36px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
}
.wa-title {
  min-width: 0;
  flex: 1;
}
.wa-title h2 {
  font: 500 21px Jost,sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wa-title p,
.wa-title small {
  font-size: 11px;
  color: var(--crm-tinta-3);
}
.wa-head-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}
.wa-head-actions > span {
  font-size: 11px;
}
.wa-thread-head [data-wa="back"] {
  display: none;
}
.wa-timeline {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 20px 24px;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wa-older {
  align-self: center;
  margin-bottom: 10px;
}
.wa-item {
  flex-shrink: 0;
  max-width: 90%;
  font-size: 14px;
}
.wa-item p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 5px 0;
}
.wa-item small {
  font-size: 11px;
  display: block;
  color: var(--crm-tinta-3);
}
.wa-entrada {
  align-self: flex-start;
}
.wa-saida {
  align-self: flex-end;
}
.wa-message {
  padding: 12px 15px;
  background: var(--crm-painel);
  border: 1px solid var(--crm-linha);
  border-radius: 12px;
}
.wa-saida .wa-message {
  background: color-mix(in srgb, var(--crm-plum) 9%, var(--crm-painel));
  border-color: color-mix(in srgb, var(--crm-plum) 28%, transparent);
}
.wa-message-author {
  font-size: 10px;
  color: var(--crm-tinta-2);
  font-weight: 500;
}
.wa-note {
  align-self: stretch;
  max-width: none;
  background: var(--crm-accent-soft);
  border-left: 3px solid var(--crm-accent);
  padding: 12px 15px;
  border-radius: 6px;
}
.wa-note > strong {
  font-size: 11px;
  color: var(--crm-accent-texto);
}
.wa-event {
  max-width: 100%;
  align-self: center;
  text-align: center;
  color: var(--crm-tinta-3);
  padding: 5px 16px;
  font-size: 11px;
}
.wa-event > strong {
  font-size: 10px;
  font-weight: 500;
}
.wa-compose {
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  min-height: 90px;
  max-height: 65%;
  background: var(--crm-painel);
  border-top: 1px solid var(--crm-linha);
}
.wa-compose-body { min-height: 0; overflow-y: auto; }
.wa-compose-footer { flex-shrink: 0; padding-top: 5px; }
.wa-compose-tools,
.wa-compose-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
}
.wa-compose-tools {
  justify-content: flex-start;
}
.wa-compose-tools [aria-pressed="true"] {
  background: var(--crm-painel-2);
  color: var(--crm-plum);
  border-color: var(--crm-plum);
}
.wa-compose-tools select {
  margin-left: auto;
  max-width: 42%;
}
.wa-compose textarea {
  font: inherit;
  font-size: 14px;
  resize: none;
  min-height: 52px;
  max-height: 132px;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--crm-tinta);
  padding: 12px 10px;
  border-radius: 8px;
  outline: none;
}
/* Por dentro: .wa-compose-body rola e cortaria um contorno afastado. */
.wa-compose textarea:focus-visible {
  outline: 1px solid var(--crm-orchid);
  outline-offset: -1px;
}
.wa-compose-footer > div {
  display: flex;
  gap: 7px;
}
.wa-compose-hint {
  display: block;
  color: var(--crm-tinta-3);
  font-size: 10px;
  margin-top: 7px;
}
.wa-note-mode {
  background: var(--crm-accent-soft);
}
.wa-attachment {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 11px;
  margin-bottom: 8px;
  flex-direction: column;
  align-items: stretch;
  padding: 10px;
  border: 1px solid var(--crm-linha-forte);
  border-radius: 10px;
  background: var(--crm-painel-2);
}
.wa-media {
  display: grid;
  gap: 7px;
  min-width: 150px;
  margin: 6px 0;
}
.wa-media > strong {
  font-size: 12px;
}
.wa-player {
  display: block;
  max-width: 100%;
  max-height: 280px;
}
img.wa-player { cursor: zoom-in; border-radius: 8px; }
.wa-media audio {
  width: 250px;
}
/* Tocador de voz: play, barra, tempo e velocidade, como no WhatsApp. */
.wa-voice {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(320px, 100%);
}
.wa-voice-play {
  width: 36px;
  height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--crm-plum);
  color: var(--crm-painel);
  cursor: pointer;
}
.wa-voice-play:hover:not(:disabled) { background: var(--crm-orchid); }
.wa-voice-play svg { width: 16px; height: 16px; }
.wa-shell .wa-voice-bar {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  accent-color: var(--crm-plum);
  cursor: pointer;
}
.wa-voice-time {
  min-width: 32px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--crm-tinta-3);
}
.wa-voice-rate {
  flex: none;
  min-width: 40px;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border: 0;
  border-radius: 999px;
  background: var(--crm-painel-3);
  color: var(--crm-tinta);
  cursor: pointer;
}
.wa-voice-box audio { display: none; }
.wa-voice-box > small { font-size: 11px; color: var(--crm-tinta-3); }
.wa-context {
  border-left: 1px solid var(--crm-linha);
  padding: 24px 20px;
  overflow: auto;
  background: var(--crm-painel);
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(360px,100%);
  z-index: 5;
  box-shadow: var(--crm-sombra-alta);
}
.wa-context > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wa-context h2 {
  font: 500 22px Jost,sans-serif;
  margin: 14px 0 5px;
}
.wa-context h3 {
  font: 500 16px Jost,sans-serif;
  margin-bottom: 10px;
}
.wa-context-stage {
  display: inline-block;
  font-size: 11px;
  padding: 3px 8px;
  border: 1px solid var(--crm-linha-forte);
  border-radius: 5px;
}
.wa-context dl {
  display: grid;
  gap: 3px;
  margin: 20px 0;
}
.wa-context dt {
  color: var(--crm-tinta-3);
  font-size: 10px;
  margin-top: 9px;
}
.wa-context dd {
  font-size: 12px;
  overflow-wrap: anywhere;
}
.wa-next {
  padding: 13px;
  background: var(--crm-painel-2);
  border-radius: 9px;
}
.wa-next span {
  font-size: 9px;
  letter-spacing: .1em;
  color: var(--crm-plum);
}
.wa-next p {
  font-size: 12px;
  margin-top: 4px;
}
.wa-context-actions {
  display: grid;
  gap: 6px;
  margin: 14px 0 24px;
}
.wa-context-actions .wa-button {
  text-align: left;
}
.wa-context [data-wa="context-close"] {
  display: inline-flex;
}
.wa-scheduled {
  padding-top: 15px;
  border-top: 1px solid var(--crm-linha);
}
.wa-scheduled-card {
  border: 1px dashed var(--crm-linha-forte);
  border-radius: 8px;
  padding: 11px;
  margin: 8px 0;
  display: grid;
  gap: 5px;
  font-size: 11px;
}
.wa-scheduled-card p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wa-scheduled-card small,
.wa-muted {
  font-size: 11px;
  color: var(--crm-tinta-3);
}
.wa-empty {
  margin: auto;
  text-align: center;
  padding: 32px 22px;
  max-width: 430px;
}
.wa-empty h2 {
  font: 500 23px Jost,sans-serif;
  margin: 12px 0;
}
.wa-empty p {
  font-size: 13px;
  color: var(--crm-tinta-3);
}
.wa-empty-mark {
  display: inline-grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border: 1px solid var(--crm-linha-forte);
  border-radius: 50%;
  font: 300 38px Jost,sans-serif;
  color: var(--crm-plum);
}
.wa-empty a {
  color: var(--crm-plum);
  display: inline-block;
  margin-top: 15px;
}
.wa-dialog {
  margin: auto;
  border: 1px solid var(--crm-linha-forte);
  border-radius: 16px;
  background: var(--crm-painel);
  color: var(--crm-tinta);
  padding: 24px;
  max-width: min(540px,94vw);
  width: 540px;
  max-height: 90dvh;
  box-shadow: var(--crm-sombra-alta);
}
.wa-dialog::backdrop {
  background: rgba(20,12,25,.5);
}
.wa-dialog header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.wa-dialog header h2 {
  font: 500 23px Jost,sans-serif;
}
.wa-dialog header button {
  border: 0;
  background: none;
  color: var(--crm-tinta);
  font-size: 24px;
  cursor: pointer;
}
.wa-dialog label {
  display: grid;
  gap: 5px;
  font-size: 12px;
  margin: 12px 0;
}
.wa-dialog .wa-check {
  display: flex;
  gap: 8px;
  align-items: center;
}
.wa-dialog textarea {
  resize: vertical;
}
/* Variáveis clicáveis do modelo de mensagem. */
.wa-vars { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: -4px 0 12px; }
.wa-vars .wa-muted { width: 100%; font-size: 11px; }
.wa-var {
  font: inherit;
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid var(--crm-linha-forte);
  border-radius: 999px;
  background: var(--crm-painel-2);
  color: var(--crm-tinta);
  cursor: pointer;
}
.wa-var:hover { border-color: var(--crm-orchid); color: var(--crm-plum); }
.wa-dialog footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}
.wa-dialog-error {
  color: var(--crm-perigo);
  font-size: 12px;
  margin-top: 10px;
}
.wa-form-row {
  display: flex;
  gap: 12px;
}
.wa-form-row > * {
  flex: 1;
  min-width: 0;
}
/* Seção de Configurações (.cfg-secao) já traz moldura e título. */
.wa-config:not(.cfg-secao) {
  padding: 24px;
  background: var(--crm-painel);
  border: 1px solid var(--crm-linha);
  border-radius: var(--crm-raio-g);
}
.wa-config:not(.cfg-secao) h2 {
  font: 500 24px Jost,sans-serif;
}
.wa-config h3 {
  font: 500 19px Jost,sans-serif;
  margin-top: 22px;
}
.wa-config-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 14px 0;
}
/* Painel de conexão: passo a passo à esquerda da leitura, QR centralizado
   e grande o bastante para a câmera do celular pegar de longe. */
.wa-steps {
  margin: 0 0 14px;
  padding-left: 20px;
  font-size: 12px;
  color: var(--crm-tinta-2);
  line-height: 1.7;
}
.wa-qr {
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  border: 1px solid var(--crm-linha);
  border-radius: 10px;
  background-color: #fff;
}
.wa-qr img {
  width: 230px;
  height: 230px;
  display: block;
}
.wa-qr .wa-muted,
.wa-qr .wa-paircode,
.wa-qr .wa-qr-ok {
  color: #3a2f40;
  text-align: center;
  margin: 0;
}
.wa-paircode {
  font-size: 26px;
  letter-spacing: 4px;
  font-weight: 600;
}
.wa-qr-ok {
  font-size: 15px;
  font-weight: 600;
}
/* Cartão da conta UAZAPI: fica acima da conexão porque é dele que a
   conexão nasce. Destacado da lista para não virar "mais uma linha". */
.wa-account {
  margin: 16px 0 20px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border: 1px solid var(--crm-linha-forte);
  border-radius: 10px;
  background-color: var(--crm-painel-2);
}
.wa-account small {
  display: block;
  font-size: 11px;
  color: var(--crm-tinta-3);
  margin-top: 2px;
  word-break: break-all;
}
.wa-account .wa-config-tools {
  margin: 0;
}
.wa-template-row {
  padding: 12px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--crm-linha);
}
.wa-template-row small {
  display: block;
  font-size: 11px;
  color: var(--crm-tinta-3);
}
.wa-config img {
  max-width: 230px;
  display: block;
}
.wa-config label {
  font-size: 12px;
}
/* Chave de ligar e desligar cada automação, ao lado de Configurar. */
.wa-rule-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.wa-switch { position: relative; display: inline-flex; cursor: pointer; }
.wa-switch input { position: absolute; z-index: 1; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.wa-switch-track {
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--crm-linha-forte);
  position: relative;
  transition: background-color .15s;
}
.wa-switch-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--crm-painel);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  transition: transform .15s;
}
.wa-switch input:checked + .wa-switch-track { background: var(--crm-plum); }
.wa-switch input:checked + .wa-switch-track::after { transform: translateX(16px); }
.wa-switch input:focus-visible + .wa-switch-track { outline: 2px solid var(--crm-orchid); outline-offset: 2px; }
.wa-switch input:disabled + .wa-switch-track { opacity: .55; }
.wa-config .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* As seções do WhatsApp entram direto na coluna de Configurações. */
.wa-config-grupo { display: contents; }
.wa-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 0;
  border-top: 1px solid var(--crm-linha);
}
.wa-config-feedback:empty + .wa-linha { border-top: 0; padding-top: 0; }
.wa-linha .wa-config-tools { margin: 0; }
.wa-linha strong { display: block; font-size: 13px; }
.wa-linha small { display: block; margin-top: 3px; font-size: 12px; color: var(--crm-tinta-3); }
.wa-config .wa-form-row { max-width: 360px; margin-bottom: 12px; }
.wa-config .wa-form-row label { display: grid; gap: 5px; }
.wa-hours-days .wa-check {
  display: flex;
  gap: 6px;
  align-items: center;
  cursor: pointer;
}
.wa-hours-days input { accent-color: var(--crm-plum); }

/* Uma área de leitura, um compositor e detalhes apenas quando solicitados. */
.wa-inbox { overflow: hidden; }
.wa-list-head { padding: 18px 16px 10px; flex-shrink: 0; }
.wa-connection { padding: 0 16px 12px; flex-shrink: 0; }
.wa-connection-state { display: flex; flex-wrap: wrap; gap: 3px 10px; font-size: 11px; }
.wa-connection-badge { display: inline-flex; align-items: center; gap: 5px; }
.wa-connection-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--crm-tinta-3); }
.wa-connection-badge.is-connected i { background: var(--crm-ok); }
.wa-search { display: flex; gap: 6px; padding: 0 12px 12px; flex-shrink: 0; }
.wa-search input { flex: 1; width: 0; }
.wa-search .wa-button { font-size: 12px; padding: 7px; }
.wa-search .wa-button svg { width: 15px; }
.wa-filters { flex-shrink: 1; overflow: auto; max-height: 40%; }
.wa-filter-row label { font-size: 11px; white-space: normal; }
.wa-list { min-height: 75px; flex: 1 1 0; }
.wa-contact { padding: 13px 12px; gap: 10px; }
.wa-contact .avatar { width: 38px; height: 38px; flex: none; margin-top: 3px; }
.wa-contact-copy { gap: 4px; }
.wa-contact-top strong { font-size: 14px; font-weight: 500; }
.wa-contact.has-unread .wa-contact-top strong { font-weight: 700; }
.wa-contact.selected { border-left: 3px solid var(--crm-plum); padding-left: 9px; box-shadow: none; }
.wa-contact.selected .wa-contact-top strong { text-decoration: underline; text-underline-offset: 3px; }
.wa-contact-top time, .wa-owner-name { font-size: 11px; }
.wa-list-footer { flex-shrink: 0; flex-wrap: wrap; }
.wa-list-feedback, .wa-history-feedback { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; padding: 8px 12px; }
.wa-list-feedback:empty, .wa-history-feedback:empty { display: none; }
.wa-list-feedback:has(.wa-inline-error) { max-height: 100px; overflow: auto; }
.wa-loading { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 28px 16px; color: var(--crm-tinta-2); font-size: 13px; }
.wa-spinner { display: inline-block; width: 15px; height: 15px; flex: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: wa-spin .8s linear infinite; }
@keyframes wa-spin { to { transform: rotate(360deg); } }
.wa-title h2 { font-size: 21px; }
.wa-title p { overflow-wrap: anywhere; font-size: 12px; }
.wa-next-inline { grid-column: 1 / -1; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--crm-tinta-2); padding-top: 4px; }
.wa-next-inline span { font-weight: 600; color: var(--crm-plum); margin-right: 5px; }
.wa-head-actions { display: grid; grid-template-columns: auto auto; align-items: center; }
.wa-head-actions > span { grid-column: 1 / -1; text-align: right; }
.wa-head-actions .wa-button { font-size: 12px; }
.wa-thread-head > .avatar { width: 36px; height: 36px; }
.wa-thread-loading { padding: 16px; }
.wa-context-backdrop { position: absolute; inset: 0; background: rgba(20,12,25,.35); z-index: 4; }
.wa-day { align-self: center; flex: none; margin: 4px 0 10px; border: 1px solid var(--crm-linha); border-radius: 20px; padding: 4px 12px; background: var(--crm-painel); color: var(--crm-tinta-2); font-size: 11px; }
.wa-item { max-width: min(85%,680px); }
.wa-grouped { margin-top: -7px; }
.wa-grouped .wa-message-author { display: none; }
.wa-message-author { font-size: 11px; }
.wa-message p a { color: var(--crm-plum); text-decoration: underline; text-underline-offset: 2px; }
.wa-message-meta { text-align: right; margin-top: 7px; }
.wa-delivery-lida { color: var(--crm-ok); font-weight: 600; }
.wa-delivery-falhou, .wa-inline-error { color: var(--crm-perigo); }
.wa-message-failed { border-color: var(--crm-perigo); }
.wa-message-uncertain { border-style: dashed; border-color: var(--crm-accent); }
.wa-message > .wa-button { font-size: 12px; margin-top: 8px; }
.wa-note, .wa-event { max-width: 100%; }
.wa-new-messages { text-align: center; height: 0; z-index: 2; }
.wa-new-messages .wa-button { transform: translateY(calc(-100% - 10px)); box-shadow: var(--crm-sombra); border-color: var(--crm-plum); }
.wa-compose-tools, .wa-compose-footer { flex-wrap: wrap; }
.wa-compose-tools .wa-button { font-size: 12px; min-height: 32px; padding: 5px 8px; }
.wa-compose-tools select { max-width: 44%; padding-top: 7px; padding-bottom: 7px; }
.wa-compose-hint { font-size: 11px; }
.wa-compose-feedback { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; margin-bottom: 8px; }
.wa-compose-feedback:empty { display: none; }
.wa-compose-footer > div { flex-wrap: wrap; }
.wa-recording { border: 1px solid var(--crm-perigo); background: var(--crm-painel-2); border-radius: 10px; padding: 12px; margin: 8px 0; }
.wa-rec-status, .wa-rec-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.wa-rec-actions { margin-top: 10px; justify-content: flex-end; }
.wa-rec-dot { background: var(--crm-perigo); width: 9px; height: 9px; border-radius: 50%; animation: wa-recording 1.4s ease-in-out infinite; }
.wa-rec-wave { flex: 1; min-width: 60px; height: 32px; color: var(--crm-plum); }
.wa-rec-time { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 18px; font-weight: 600; }
@keyframes wa-recording { 50% { opacity: .45; } }
.wa-compose:has(.wa-recording:not([hidden])) #waText { display: none; }
.wa-attachment-content { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; min-width: 0; }
.wa-attachment-content > div { min-width: 0; flex: 1 1 140px; }
.wa-attachment-content strong { font-size: 12px; display: block; overflow-wrap: anywhere; }
.wa-attachment-content small { display: block; font-size: 11px; color: var(--crm-tinta-2); }
.wa-attachment-preview { max-width: 100%; max-height: 110px; border-radius: 6px; }
img.wa-attachment-preview { width: 64px; height: 64px; object-fit: cover; }
audio.wa-attachment-preview { width: min(100%,270px); height: 38px; }
.wa-attachment-status, .wa-attachment-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.wa-attachment-actions { justify-content: flex-end; }
.wa-attachment-actions .wa-button { font-size: 12px; min-height: 32px; padding: 3px 8px; }
.wa-file-icon svg { width: 30px; height: 30px; }
.wa-media { min-width: 0; }
.wa-media audio { max-width: 100%; }
.wa-media-error { font-size: 12px; }
.wa-session { position: absolute; inset: 0 0 auto; z-index: 8; background: var(--crm-painel); border-bottom: 2px solid var(--crm-perigo); padding: 14px; font-size: 13px; box-shadow: var(--crm-sombra); }
.wa-session .wa-button { margin-left: 8px; }
.wa-config-section { padding: 18px 0; border-top: 1px solid var(--crm-linha); }
.wa-config-section > h3 { margin-top: 0; }
.wa-config-section > summary { cursor: pointer; font-size: 15px; font-weight: 500; }
.wa-config-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.wa-config-feedback { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; margin: 10px 0; }
.wa-config-feedback:empty { display: none; }
.wa-next-step { padding: 12px; margin: 12px 0; border-radius: 8px; background: var(--crm-painel-2); font-size: 13px; }
.wa-danger { color: var(--crm-perigo); }
.wa-template-row { flex-wrap: wrap; }
.wa-template-row > div:first-child { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.wa-template-row > div:last-child { display: flex; gap: 6px; flex-wrap: wrap; }
.wa-dialog { overflow-y: auto; }
.wa-dialog input:not([type="checkbox"]), .wa-dialog select, .wa-dialog textarea { width: 100%; }
.wa-dialog footer { flex-wrap: wrap; }
.wa-qr { min-width: 0; }
.wa-qr img { max-width: 100%; height: auto; aspect-ratio: 1; }
.wa-paircode { overflow-wrap: anywhere; }

/* O corte acompanha a largura útil, inclusive ao lado do menu do CRM. */
.wa-shell.wa-compact { display: block; }
.wa-compact .wa-inbox { height: 100%; border: 0; }
.wa-compact .wa-thread { display: none; height: 100%; }
.wa-compact.wa-open .wa-inbox { display: none; }
.wa-compact.wa-open .wa-thread { display: flex; }
.wa-compact .wa-thread-head { padding: 10px 12px 8px; grid-template-columns: 36px minmax(0,1fr) auto; gap: 7px; }
.wa-compact .wa-thread-head > .avatar { display: none !important; }
.wa-compact .wa-thread-head [data-wa="back"] { display: inline-flex; padding: 7px; }
.wa-compact .wa-title h2 { font-size: 18px; }
.wa-compact .wa-title p { font-size: 11px; }
.wa-compact .wa-title p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-compact .wa-head-actions { grid-template-columns: auto; gap: 4px; }
.wa-compact .wa-head-actions > span { font-size: 10px; max-width: 120px; }
.wa-compact .wa-head-actions .wa-button { min-height: 30px; padding: 4px 7px; font-size: 11px; }
.wa-compact .wa-timeline { padding: 14px 12px; }
.wa-compact .wa-compose { padding: 8px 10px; }
.wa-compact .wa-compose-footer { gap: 6px; }
.wa-compact .wa-compose-footer .wa-button { padding: 6px; font-size: 12px; }
.wa-compact .wa-compose-footer > div { gap: 4px; }
.wa-compact .wa-compose-tools select { max-width: 38%; }
.wa-compact .wa-compose-tools { gap: 5px; }
.wa-compact .wa-compose-tools .wa-button { font-size: 11px; padding: 4px 6px; }
.wa-compact .wa-attachment { gap: 6px; padding: 7px; }
.wa-compact .wa-attachment-content { gap: 6px; }
.wa-compact audio.wa-attachment-preview { width: 100%; }
.wa-compact .wa-context { padding: 18px 16px; }
@media (max-width:600px) {
  body[data-tela="conversas"] .crm-main { padding: 6px; }
  .wa-dialog { padding: 18px; max-width: calc(100vw - 20px); }
  .wa-config:not(.cfg-secao) { padding: 16px; }
  .wa-compose-tools select { font-size: 11px; }
}
@media (max-height:600px) {
  .wa-list-head { padding: 10px 12px 6px; }
  .wa-list-head .wa-eyebrow { display: none; }
  .wa-list-head h1 { font-size: 23px; }
  .wa-connection { padding-bottom: 6px; }
  .wa-search { padding-bottom: 8px; }
  .wa-compose-hint { display: none; }
  .wa-compose textarea { min-height: 38px; max-height: 65px; padding: 7px 8px; }
  .wa-compact .wa-head-actions { grid-template-columns: auto auto; }
  .wa-compact .wa-head-actions > span { max-width: none; }
  .wa-compact .wa-head-actions [data-wa="context"] span { display: none; }
  .wa-attachment-preview { max-height: 65px; }
  .wa-rec-actions { margin-top: 5px; }
}
@media (pointer:coarse) {
  .wa-shell .wa-button, .wa-shell.wa-compact .wa-button, .wa-dialog .wa-button, .wa-config .wa-button { min-height: 44px; }
  .wa-dialog header button { min-width: 40px; min-height: 40px; }
  .wa-shell input, .wa-shell select, .wa-shell textarea, .wa-dialog input, .wa-dialog select, .wa-dialog textarea { font-size: 16px; }
}
@media (prefers-reduced-motion:reduce) {
  .wa-spinner, .wa-rec-dot { animation: none; }
}

/* Conversas GIO: composição compacta, sem alterar os controles de Configurações. */
body[data-tela="conversas"] .crm-main { padding: 10px; }
.wa-shell { grid-template-columns: var(--wa-lista, minmax(290px,330px)) minmax(0,1fr); border-radius: 12px; }
/* Divisória entre lista e conversa: arrastar ajusta --wa-lista (crm-conversas.js). */
.wa-shell .wa-inbox { position: relative; }
.wa-resizer { position: absolute; top: 0; right: 0; bottom: 0; width: 8px; z-index: 3; cursor: col-resize; touch-action: none; }
.wa-resizer::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 2px; background: transparent; transition: background .15s; }
.wa-resizer:hover::after, .wa-resizer:focus-visible::after, body.wa-resizing .wa-resizer::after { background: var(--crm-accent); }
.wa-resizer:focus-visible { outline: none; }
body.wa-resizing { cursor: col-resize; user-select: none; }
.wa-compact .wa-resizer { display: none; }
.wa-shell .wa-list-head { padding: 16px 16px 8px; }
.wa-shell .wa-list-head .wa-eyebrow { display: none; }
.wa-shell .wa-list-head h1 { font-size: 25px; font-weight: 600; }
.wa-shell .wa-connection { padding: 0 16px 10px; }
.wa-shell .wa-connection-state { font-size: 11px; }
.wa-shell .wa-search { padding: 0 12px 8px; }
.wa-shell #waSearch { background-color: var(--crm-painel-2); border-color: transparent; font-size: 13px; border-radius: 10px; min-height: 40px; }
.wa-quick-filters { display: flex; gap: 5px; overflow-x: auto; flex: none; padding: 0 12px 12px; scrollbar-width: thin; }
.wa-shell .wa-quick-filters .wa-button { flex: none; border-radius: 20px; border-color: transparent; background: var(--crm-painel-2); font-size: 11px; padding: 4px 9px; min-height: 30px; white-space: nowrap; }
.wa-shell .wa-quick-filters [aria-pressed="true"] { background: var(--crm-plum); color: var(--crm-painel); }
.wa-shell .wa-contact { min-height: 84px; padding: 11px 12px; gap: 11px; border-top: 0; border-bottom: 1px solid var(--crm-linha); align-items: center; }
.wa-shell .wa-contact .avatar { width: 44px; height: 44px; margin: 0; font-size: 16px; }
.wa-shell .wa-contact-copy { gap: 3px; }
.wa-shell .wa-contact-top strong { font-size: 14px; }
.wa-shell .wa-contact.selected { padding-left: 12px; border-left: 0; background: color-mix(in srgb, var(--crm-plum) 10%, var(--crm-painel)); }
.wa-shell .wa-contact.selected .wa-contact-top strong { text-decoration: none; }
/* Prévia sempre no cinza secundário, lida ou não: o destaque é do nome e do contador. */
.wa-shell .wa-preview { color: var(--crm-tinta-3); }
/* Prévia no jeito do WhatsApp: ícone do tipo e ✓/✓✓ em linha com o texto, sem perder as reticências. */
.wa-preview-kind, .wa-ticks { display: inline-flex; vertical-align: -2px; margin-right: 4px; }
.wa-preview-icon, .wa-tick-icon { width: 14px; height: 14px; flex: none; }
.wa-ticks { color: var(--crm-tinta-3); margin-right: 3px; }
.wa-preview-kind, .wa-preview-media { color: var(--crm-tinta-3); }
.wa-ticks[data-estado="lida"] { color: #2b9ad6; }
html[data-tema="escuro"] .wa-ticks[data-estado="lida"] { color: #53bdeb; }
.wa-shell .wa-contact-bottom { gap: 6px; }
.wa-shell .wa-contact-bottom .wa-status { font-size: 10px; white-space: nowrap; }
.wa-shell .wa-owner-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: auto; font-size: 10px; }
.wa-shell .wa-unread { flex: none; min-width: 18px; text-align: center; order: 1; }
/* Etapa do funil no card: fundo na cor da etapa (inline, vinda das Configurações). */
/* Falta espaço: encolhe o responsável, depois a situação da conversa; a etapa por último. */
.wa-stage-tag {
  flex: none; max-width: 60%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 10px; font-weight: 600; line-height: 16px;
  padding: 0 7px; border-radius: 999px;
  background: var(--crm-plum); color: #fff;
}
.wa-stage-tag.alerta { flex: none; background: var(--crm-accent-soft); color: var(--crm-accent-texto); }
.wa-stage-tag.perdido { flex: none; background: var(--crm-painel-3); color: var(--crm-tinta-3); }
.wa-stage-tag.vazio { flex: none; background: transparent; color: var(--crm-tinta-3); box-shadow: inset 0 0 0 1px var(--crm-linha-forte); }
.wa-shell .wa-contact-bottom .wa-status { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wa-shell .wa-contact-bottom .wa-owner-name { flex-shrink: 5; }
.wa-shell .wa-thread-head { padding: 8px 16px 0; grid-template-columns: minmax(0,1fr) auto; gap: 4px 12px; }
.wa-contact-heading { display: flex; align-items: center; gap: 10px; text-align: left; min-width: 0; border-radius: 8px; padding: 3px 0; }
.wa-contact-heading .avatar { flex: none; width: 40px; height: 40px; }
.wa-shell .wa-title h2 { font-size: 19px; line-height: 1.4; }
.wa-shell .wa-title small { display: none; }
.wa-shell .wa-head-actions { grid-template-columns: auto 34px 34px; gap: 2px 6px; }
.wa-shell .wa-head-actions > span { font-size: 10px; line-height: 1.4; }
.wa-shell .wa-head-actions .wa-button { min-height: 32px; padding: 5px 8px; }
.wa-shell .wa-head-actions [data-wa="search-messages"], .wa-shell .wa-head-actions [data-wa="context"] { border-color: transparent; padding: 5px; }
.wa-shell .wa-next-inline { margin-top: 3px; padding: 5px 0; border-top: 1px solid var(--crm-linha); font-size: 11px; }
.wa-shell .wa-timeline { padding: 16px 28px; gap: 10px; }
.wa-shell .wa-day { margin: 2px 0 8px; padding: 3px 11px; border: 0; box-shadow: var(--crm-sombra); }
.wa-shell .wa-message { position: relative; border: 0; border-radius: 8px; padding: 7px 11px 5px; box-shadow: 0 1px 1px var(--crm-linha); min-width: 90px; }
.wa-shell .wa-saida .wa-message { background: color-mix(in srgb,var(--crm-plum) 12%,var(--crm-painel)); }
.wa-shell .wa-message p { margin: 2px 0; padding-right: 14px; font-size: 14px; line-height: 1.5; }
.wa-shell .wa-message-author { display: block; font-size: 10px; padding-right: 25px; color: var(--crm-plum); }
.wa-shell .wa-entrada .wa-message-author, .wa-shell .wa-grouped .wa-message-author { display: none; }
.wa-shell .wa-message-meta { margin-top: 1px; display: flex; align-items: center; justify-content: flex-end; gap: 4px; font-size: 10px; line-height: 1.5; }
.wa-delivery { display: inline-flex; align-items: center; gap: 3px; }
.wa-delivery svg { width: 17px; height: 17px; }
.wa-shell .wa-delivery-lida { color: var(--crm-orchid); }
.wa-shell .wa-message-failed { outline: 1px solid var(--crm-perigo); }
.wa-shell .wa-message-uncertain { outline: 1px dashed var(--crm-accent); }
.wa-message-menu { position: absolute; right: 2px; top: 1px; z-index: 1; }
.wa-message-menu[open] { z-index: 3; }
.wa-message-menu summary { display: grid; place-items: center; list-style: none; cursor: pointer; width: 26px; height: 25px; border-radius: 6px; color: var(--crm-tinta-3); background: var(--crm-painel-2); opacity: 0; }
.wa-message-menu summary::-webkit-details-marker { display: none; }
.wa-message:hover .wa-message-menu summary, .wa-message-menu:focus-within summary, .wa-message-menu[open] summary { opacity: 1; }
.wa-message-menu > .wa-button { position: absolute; right: 0; top: 28px; min-width: 125px; box-shadow: var(--crm-sombra-alta); }
.wa-shell .wa-note { border-radius: 8px; padding: 10px 12px; }
.wa-shell .wa-compose { padding: 7px 12px; min-height: 0; max-height: 65%; gap: 5px; }
.wa-shell .wa-compose-body { flex: 0 1 auto; }
.wa-shell .wa-compose-tools { display: grid; grid-template-columns: auto auto minmax(90px,1fr) auto; gap: 5px; }
.wa-shell .wa-compose-tools .wa-button { min-height: 28px; padding: 3px 8px; font-size: 11px; border-color: transparent; }
.wa-shell .wa-compose-tools [aria-pressed="true"] { background: var(--crm-painel-2); color: var(--crm-plum); }
.wa-shell .wa-compose-tools select { width: 160px; max-width: 100%; justify-self: end; font-size: 11px; padding-top: 4px; padding-bottom: 4px; border-color: transparent; }
.wa-shell .wa-compose-footer { padding: 0; flex-wrap: nowrap; gap: 7px; align-items: flex-end; }
.wa-shell .wa-compose-footer .wa-button { width: 40px; min-height: 40px; flex: none; border: 0; padding: 8px; border-radius: 50%; }
.wa-shell .wa-compose-footer [data-wa="send"] { width: auto; min-width: 40px; border-radius: 20px; }
.wa-shell .wa-compose-footer [data-wa="send"] span { font-size: 12px; }
.wa-shell .wa-compose textarea { min-width: 0; flex: 1; width: 0; min-height: 40px; max-height: 120px; border-radius: 20px; background: var(--crm-painel-2); padding: 9px 14px; line-height: 22px; overflow-y: auto; }
.wa-shell .wa-compose-hint { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; }
.wa-shell .wa-note-mode .wa-compose-hint { position: static; width: auto; height: auto; clip-path: none; }
.wa-shell .wa-note-mode textarea { background: var(--crm-painel); }
.wa-shell .wa-compose-feedback { margin: 6px 0 2px; }
.wa-shell .wa-compose-feedback:empty { margin: 0; }
.wa-quote, .wa-reply-preview { border-left: 3px solid var(--crm-orchid); border-radius: 5px; background: color-mix(in srgb,var(--crm-plum) 7%,var(--crm-painel)); padding: 7px 10px; margin: 4px 0 6px; text-align: left; }
.wa-quote { display: grid; width: 100%; gap: 2px; font-size: 12px; min-width: 0; }
.wa-quote strong, .wa-reply-preview strong { color: var(--crm-plum); font-size: 11px; }
.wa-quote span { overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wa-reply-preview { display: flex; align-items: center; gap: 8px; margin-top: 7px; font-size: 12px; }
.wa-reply-preview > div { flex: 1; min-width: 0; display: grid; }
.wa-reply-preview span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-reply-preview small { font-size: 10px; color: var(--crm-tinta-3); margin-top: 2px; }
.wa-located .wa-message { outline: 2px solid var(--crm-orchid); outline-offset: 3px; }
.wa-message-search { position: absolute; inset: 0 0 0 auto; width: min(380px,100%); z-index: 5; background: var(--crm-painel); padding: 18px; display: flex; flex-direction: column; gap: 12px; min-height: 0; box-shadow: var(--crm-sombra-alta); }
.wa-message-search header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wa-shell .wa-message-search h2 { font-size: 20px; }
.wa-message-search-feedback { font-size: 12px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wa-search-results { flex: 1; overflow: auto; min-height: 0; }
.wa-search-result { width: 100%; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 5px 8px; text-align: left; border-bottom: 1px solid var(--crm-linha); padding: 12px 5px; border-radius: 4px; font-size: 12px; }
.wa-search-result:hover { background: var(--crm-painel-2); }
.wa-search-result strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-search-result time { color: var(--crm-tinta-3); font-size: 11px; }
.wa-search-result p { grid-column: 1 / -1; overflow-wrap: anywhere; }
.wa-search-result mark { background: var(--crm-accent-soft); color: var(--crm-tinta); font-weight: 600; }
.wa-window-navigation { padding: 5px 12px; display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; font-size: 11px; background: var(--crm-painel-2); flex: none; }
.wa-shell .wa-window-navigation .wa-button { font-size: 11px; padding: 3px 8px; min-height: 28px; }
.wa-shell.wa-compact .wa-thread-head { grid-template-columns: 32px minmax(0,1fr) auto; padding: 7px 8px 0; gap: 3px 6px; }
.wa-shell.wa-compact .wa-contact-heading .avatar { width: 32px; height: 32px; }
.wa-shell.wa-compact .wa-contact-heading { gap: 7px; }
.wa-shell.wa-compact .wa-title h2 { font-size: 16px; }
.wa-shell.wa-compact .wa-title .wa-status { font-size: 10px; }
.wa-shell.wa-compact .wa-head-actions { grid-template-columns: auto 30px 30px; gap: 3px; }
.wa-shell.wa-compact .wa-head-actions > span { max-width: 145px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-shell.wa-compact .wa-head-actions .wa-button { min-height: 30px; padding: 4px; }
.wa-shell.wa-compact .wa-head-actions [data-wa="claim"], .wa-shell.wa-compact .wa-head-actions [data-wa="owner"] { grid-column: 1; max-width: 58px; }
.wa-shell.wa-compact .wa-head-actions [data-wa="claim"] span, .wa-shell.wa-compact .wa-head-actions [data-wa="owner"] span { font-size: 0; }
.wa-shell.wa-compact .wa-head-actions [data-wa="claim"]::after { content: 'Assumir'; font-size: 10px; }
.wa-shell.wa-compact .wa-head-actions [data-wa="owner"]::after { content: 'Atribuir'; font-size: 10px; }
.wa-shell.wa-compact .wa-timeline { padding: 12px; }
.wa-shell.wa-compact .wa-compose { padding: 6px 8px; }
.wa-shell.wa-compact .wa-compose-tools { gap: 3px; grid-template-columns: auto auto minmax(70px,1fr) auto; }
.wa-shell.wa-compact .wa-compose-tools .wa-button { padding: 3px 4px; }
.wa-shell.wa-compact .wa-compose-footer { gap: 3px; }
.wa-shell.wa-compact .wa-compose-footer [data-wa="send"] { width: 40px; }
.wa-shell.wa-compact .wa-compose-footer [data-wa="send"] > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width:600px) {
  body[data-tela="conversas"] .crm-main { padding: 0; }
  .wa-shell { border: 0; border-radius: 0; }
  .wa-shell.wa-compact .wa-contact-heading .avatar { display: none !important; }
}
@media (pointer:coarse) {
  .wa-shell .wa-button, .wa-shell.wa-compact .wa-button, .wa-shell .wa-compose-tools .wa-button { min-height: 44px; min-width: 44px; }
  .wa-shell.wa-compact .wa-thread-head { grid-template-columns: 44px minmax(0,1fr) auto; }
  .wa-shell #waSearch, .wa-shell #waMessageSearch, .wa-shell .wa-compose-tools select { min-height: 44px; }
  .wa-shell .wa-compose-footer .wa-button { min-width: 44px; }
  .wa-shell .wa-head-actions, .wa-shell.wa-compact .wa-head-actions { grid-template-columns: auto 44px 44px; }
  .wa-shell .wa-message-menu summary { opacity: 1; width: 44px; height: 44px; background: transparent; }
  .wa-shell .wa-message:has(.wa-message-menu) { padding-right: 38px; }
  .wa-shell #waSearch, .wa-shell .wa-compose-tools select, .wa-shell .wa-compose textarea { font-size: 16px; }
}
@media (max-height:600px) {
  .wa-shell .wa-list-head { padding-top: 8px; }
  .wa-shell .wa-quick-filters { padding-bottom: 5px; }
  .wa-shell .wa-next-inline { display: none; }
  .wa-shell .wa-compose { max-height: 70%; }
  .wa-shell .wa-compose textarea { max-height: 66px; }
}