/* =============================================================================
   make-chat.css — o CHAT do time, ABA dentro do painel do assistente.

   Não tem bolha nem painel próprios. Teve, por um tempo, e o canto de baixo à
   direita acabou com três coisas empilhadas: assistente, chat e o botão "ao
   topo". O dono olhou e disse "ficou feio, mais fácil fazer um chatzão supremo
   com os dois" — e tinha razão: o problema não era a distância entre as
   bolhas, era haver três. Agora é um painel só, com "Ajuda" e "Conversas".

   Então este arquivo estiliza só o MIOLO: a busca de pessoa, a lista, as
   mensagens e o campo de escrever. A casca (bolha, painel, topo, abas,
   contador) é do make-assistente.css.

   O fundo do painel é --md-surface-container-high. As cores daqui são
   escolhidas para se lerem SOBRE ele, nos dois temas.
   ========================================================================== */

/* NAO declara `display` aqui. Quem mostra e esconde a aba e' o par
   .mkasst__pane / .mkasst__pane--on, do make-assistente.css — e `#mkchat` e'
   um ID (1-0-0), que ganha de qualquer classe (0-1-0). Quando eu tinha
   `display:flex` nesta regra, a aba do chat NUNCA sumia: abrindo "Ajuda", a
   resposta da ajuda aparecia e a lista de pessoas ficava logo abaixo, as duas
   ao mesmo tempo. Aqui fica so' o que nao briga com isso. */
#mkchat {
  font-family: var(--md-font, 'Figtree', system-ui, sans-serif);
}

/* ------------------------------------------------------------ buscar pessoa */
.mkchat__busca {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--md-outline-variant, #c3ccc3);
}
.mkchat__busca svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--md-on-surface-variant, #414a43);
}
/* !important contra o CSS de formulário do admin, que impõe altura mínima e
   moldura em todo input da página. */
.mkchat__busca input {
  flex: 1;
  border: 0 !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
  padding: 8px 0 !important;
  font: 400 13.5px/1.4 var(--md-font, sans-serif);
  color: var(--md-on-surface, #171d19);
}

/* --------------------------------------------------------------- as pessoas */
.mkchat__lista { flex: 1; min-height: 0; overflow-y: auto; }
#mkchat.mkchat--conversa .mkchat__lista,
#mkchat.mkchat--conversa .mkchat__busca { display: none; }

.mkchat__p {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  padding: 9px 14px;
  transition: background .14s;
}
/* Degrau de superfície, NÃO --md-action-hover: aquele token é o lima de botão
   de acento, pensado para texto escuro em cima. Aqui o texto é --md-on-surface
   — no tema escuro daria quase-branco sobre lima (1,5:1). */
.mkchat__p:hover { background: var(--md-surface-container-highest, #dee4dd); }

.mkchat__av {
  position: relative;
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--md-shape-full, 999px);
  background: var(--md-secondary-container, #d1e8d5);
  color: var(--md-on-secondary-container, #0c1f13);
  font: 700 12px/1 var(--md-font, sans-serif);
}
/* O pontinho verde só em quem está no sistema AGORA — sinal que vale é sinal
   raro; um ponto em todo mundo não diz nada. */
.mkchat__on {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 10px;
  height: 10px;
  border-radius: var(--md-shape-full, 999px);
  background: var(--md-primary, #00713a);
  box-shadow: 0 0 0 2px var(--md-surface-container-high, #e3eae2);
}
.mkchat__t { flex: 1; min-width: 0; display: grid; }
.mkchat__nome {
  font: 600 13.2px/18px var(--md-font, sans-serif);
  color: var(--md-on-surface, #171d19);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mkchat__u {
  font-size: 11.6px;
  color: var(--md-on-surface-variant, #414a43);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mkchat__b {
  flex: none;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: var(--md-shape-full, 999px);
  background: var(--md-primary, #00713a);
  color: var(--md-on-primary, #fff);
  font: 700 11px/1 var(--md-font, sans-serif);
}
.mkchat__q { flex: none; font-size: 10.5px; color: var(--md-on-surface-variant); }

/* ------------------------------------------------------------- as mensagens
   Daqui para baixo o estilo serve as DUAS abas do painel: as conversas com
   gente e as respostas da ajuda. Sao as MESMAS classes de proposito — ele
   perguntou "vai ter 2 estilos de chat no meu sistema?" e a resposta so' e'
   nao se o balao for literalmente o mesmo, e nao um parecido que diverge na
   primeira vez que alguem mexer num dos dois. */
.mkchat__msgs {
  display: none;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px;
  gap: 8px;
  align-content: start;
}
#mkchat.mkchat--conversa .mkchat__msgs { display: grid; }

.mkchat__m, .mkasst__fio > .mkchat__m { display: grid; gap: 2px; justify-items: start; max-width: 82%; }
.mkchat__m--meu { justify-self: end; justify-items: end; }
/* --md-surface sobre o painel (--md-surface-container-high): mais claro que o
   fundo no tema claro, mais escuro no escuro — dos dois lados a bolha se
   destaca, e o texto continua sendo --md-on-surface. */
.mkchat__bolha {
  background: var(--md-surface, #f7fcf6);
  color: var(--md-on-surface, #171d19);
  padding: 8px 12px;
  border-radius: 14px 14px 14px 4px;
  font: 400 13.5px/19px var(--md-font, sans-serif);
  white-space: pre-wrap;
  word-break: break-word;
}
.mkchat__m--meu .mkchat__bolha {
  background: var(--md-primary-container, #8df8b0);
  color: var(--md-on-primary-container, #002110);
  border-radius: 14px 14px 4px 14px;
}
.mkchat__h { font-size: 10.4px; color: var(--md-on-surface-variant, #414a43); }
.mkchat__bolha img { max-width: 100%; border-radius: 8px; display: block; margin-top: 6px; }
.mkchat__cita {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 5px 8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--md-surface-container-high) 60%, transparent);
  font: 600 11.2px/1.35 var(--md-font, sans-serif);
}
.mkchat__cita svg { width: 12px; height: 12px; flex: none; opacity: .7; }

/* ----------------------------------------------------------------- escrever */
.mkchat__esc {
  display: none;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--md-outline-variant, #c3ccc3);
}
#mkchat.mkchat--conversa .mkchat__esc { display: flex; }
.mkchat__esc textarea, .mkasst__esc textarea {
  flex: 1;
  border: 1px solid var(--md-outline-variant, #c3ccc3) !important;
  background: var(--md-surface, #f7fcf6) !important;
  border-radius: 18px !important;
  padding: 9px 12px !important;
  min-height: 0 !important;
  max-height: 110px !important;
  height: auto !important;
  box-shadow: none !important;
  outline: none !important;
  min-width: 0 !important;
  resize: none;
  font: 400 13.5px/19px var(--md-font, sans-serif);
  color: var(--md-on-surface, #171d19);
}
.mkchat__esc textarea:focus, .mkasst__esc textarea:focus { border-color: var(--md-primary, #00713a) !important; }
.mkchat__enviar, .mkasst__enviar {
  flex: none;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--md-shape-full, 999px);
  background: var(--md-primary, #00713a);
  color: var(--md-on-primary, #fff);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.mkchat__enviar:disabled, .mkasst__enviar:disabled {
  background: var(--md-surface-variant, #dbe5db);
  color: var(--md-on-surface-variant, #414a43);
  cursor: default;
}
.mkchat__enviar svg, .mkasst__enviar svg { width: 17px; height: 17px; }

.mkchat__vazio {
  padding: 24px 18px;
  text-align: center;
  font: 400 12.6px/18px var(--md-font, sans-serif);
  color: var(--md-on-surface-variant, #414a43);
}