/* ============================================================================
   atendimento.css — a tela de conversas.

   Reescrita do CSS que estava embutido no `atendimento-view.js` do
   D2Whaticket (o componente injetava ~700 linhas de <style> com uma paleta
   fixa do WhatsApp). Aqui as cores saem dos tokens do tema (--primary,
   --card-bg, --text...), entao a tela acompanha a Personalizacao como o
   resto do sistema; so as bolhas mantem o verde/cinza de origem, que e o
   que faz a conversa ser lida de relance.
   ============================================================================ */

.atd {
  display: grid;
  grid-template-columns: minmax(280px, 340px) 1fr;
  gap: 1rem;
  height: calc(100vh - var(--topbar-h) - var(--tabs-h) - 6.5rem);
  min-height: 30rem;
}

/* ---------------------------------------------------------------- lista --- */

.atd-lado {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.atd-busca {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem .9rem;
  border-bottom: 1px solid var(--card-border);
  color: var(--text-muted);
}

.atd-busca input {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  outline: none;
}

.atd-tabs {
  display: flex;
  gap: .25rem;
  padding: .5rem .6rem;
  border-bottom: 1px solid var(--card-border);
}

.atd-tab {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  padding: .35rem .2rem;
  border-radius: 999px;
  cursor: pointer;
}

.atd-tab.is-active {
  background: var(--primary-soft);
  color: var(--primary);
}

.atd-info {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  padding: .35rem .9rem;
  font-size: .72rem;
  color: var(--text-muted);
}

.atd-erro { color: var(--danger); }

.atd-lista {
  flex: 1;
  overflow-y: auto;
}

.atd-item {
  display: flex;
  gap: .65rem;
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--card-border);
  cursor: pointer;
  transition: background .15s ease;
}

.atd-item:hover { background: var(--primary-soft); }
.atd-item.is-ativo { background: var(--primary-soft); }

.atd-avatar {
  width: 2.6rem;
  height: 2.6rem;
  flex: 0 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: .82rem;
}

.atd-item-corpo { flex: 1; min-width: 0; }

.atd-item-topo,
.atd-item-baixo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

.atd-item-nome {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.atd-item-hora { font-size: .7rem; color: var(--text-muted); flex: 0 0 auto; }

.atd-item-ultima {
  font-size: .78rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.atd-item-selos { display: flex; gap: .25rem; flex: 0 0 auto; }

.atd-naolidas {
  background: var(--success);
  color: #fff;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  padding: .05rem .4rem;
}

.atd-selo, .atd-fila {
  font-size: .64rem;
  font-weight: 600;
  border-radius: 999px;
  padding: .05rem .45rem;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.atd-selo--pending { background: rgba(245, 158, 11, .18); color: #b45309; }
.atd-selo--open    { background: rgba(34, 197, 94, .18);  color: #15803d; }
.atd-selo--closed  { background: rgba(100, 116, 139, .18); color: var(--text-muted); }
.atd-selo--group   { background: rgba(59, 130, 246, .18); color: #1d4ed8; }
.atd-fila          { color: #fff; }

/* ----------------------------------------------------------------- chat --- */

.atd-chat {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.atd-chat-head {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--card-border);
}

.atd-chat-quem { flex: 1; min-width: 0; }
.atd-chat-quem strong { display: block; }
.atd-chat-quem small { color: var(--text-muted); }

.atd-chat-acoes { display: flex; gap: .4rem; flex-wrap: wrap; }

.atd-btn {
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  color: var(--text);
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  border-radius: var(--radius);
  padding: .35rem .7rem;
  cursor: pointer;
}

.atd-btn--ok   { border-color: var(--success); color: #15803d; }
.atd-btn--sair { border-color: var(--danger);  color: var(--danger); }
.atd-btn:hover { filter: brightness(.97); }

.atd-icone {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
  padding: .3rem .45rem;
  border-radius: var(--radius);
}

.atd-voltar { display: none; }

.atd-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  background:
    linear-gradient(0deg, rgba(0, 0, 0, .02), rgba(0, 0, 0, .02)),
    var(--app-bg);
}

.atd-linha { display: flex; }
.atd-linha.is-saiu { justify-content: flex-end; }

.atd-bolha {
  position: relative;
  max-width: min(78%, 34rem);
  padding: .45rem .6rem .3rem;
  border-radius: 10px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
  word-wrap: break-word;
}

.is-entrou .atd-bolha { background: var(--card-bg); border: 1px solid var(--card-border); }
.is-saiu   .atd-bolha { background: #d9fdd3; color: #0f172a; }

.atd-bolha-texto { white-space: pre-wrap; font-size: .88rem; }
.atd-bolha.is-apagada .atd-bolha-texto { font-style: italic; color: var(--text-muted); }

.atd-bolha-rodape {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .3rem;
  font-size: .66rem;
  color: var(--text-muted);
  margin-top: .1rem;
}

.atd-tick { font-size: .62rem; }
.atd-tick--lida { color: #53bdeb; }

.atd-citada {
  border-left: 3px solid var(--primary);
  background: rgba(0, 0, 0, .04);
  border-radius: 6px;
  padding: .25rem .45rem;
  margin-bottom: .25rem;
  font-size: .76rem;
  color: var(--text-muted);
}

.atd-citada span { display: block; font-weight: 700; color: var(--primary); }

.atd-marca {
  font-size: .64rem;
  color: var(--text-muted);
  margin-right: auto;
  font-style: italic;
}

.atd-midia, .atd-apagada { display: inline-flex; align-items: center; gap: .35rem; }

.atd-responder {
  position: absolute;
  top: .15rem;
  right: .2rem;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: .7rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s ease;
}

.atd-bolha:hover .atd-responder { opacity: 1; }

/* --------------------------------------------------------------- envio --- */

.atd-respondendo {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem 1rem;
  border-top: 1px solid var(--card-border);
  font-size: .78rem;
  color: var(--text-muted);
  background: var(--primary-soft);
}

.atd-respondendo span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.atd-envio {
  display: flex;
  align-items: flex-end;
  gap: .5rem;
  padding: .6rem .8rem;
  border-top: 1px solid var(--card-border);
}

.atd-envio textarea {
  flex: 1;
  resize: none;
  max-height: 8rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--app-bg);
  color: var(--text);
  font: inherit;
  padding: .5rem .7rem;
  outline: none;
}

.atd-enviar {
  border: 0;
  background: var(--primary);
  color: #111;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  cursor: pointer;
  font-size: .95rem;
}

.atd-enviar:disabled { opacity: .5; cursor: default; }

.atd-rapidas {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  max-height: 12rem;
  overflow-y: auto;
  border-top: 1px solid var(--card-border);
  padding: .4rem;
}

.atd-rapida {
  display: flex;
  gap: .5rem;
  align-items: baseline;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  padding: .35rem .5rem;
  border-radius: var(--radius);
  cursor: pointer;
}

.atd-rapida:hover { background: var(--primary-soft); }
.atd-rapida span { color: var(--text-muted); font-size: .78rem; }

/* [HIDDEN-VENCE] Estes dois nascem com a classe .hidden e o runtime a tira/poe.
   Como `.atd-rapidas{display:flex}` tem a MESMA especificidade de `.hidden` e
   vem depois no arquivo, sem as regras abaixo o painel e a barra ficariam
   visiveis para sempre. */
.atd-rapidas.hidden,
.atd-respondendo.hidden { display: none; }

.atd-vazio {
  margin: auto;
  color: var(--text-muted);
  font-size: .85rem;
  text-align: center;
  padding: 2rem 1rem;
}

/* --------------------------------------------------------------- mobile --- */

@media (max-width: 900px) {
  .atd { grid-template-columns: 1fr; }
  .atd-chat { display: none; }
  .atd-chat.is-aberto { display: flex; }
  /* A lista vem ANTES do chat no DOM, entao nao da para escondê-la com o
     combinador de irmao (~): quem decide e o pai. */
  .atd:has(.atd-chat.is-aberto) .atd-lado { display: none; }
  .atd-voltar { display: inline-flex; }
}