/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ==================== TYPING INDICATOR ==================== */
.typing-indicator {
  animation: fadeInTyping 0.3s ease-in-out;
}
.typing-dots {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 20px;
}
.typing-dots span {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #90949c;
  animation: typingBounce 1.4s infinite ease-in-out both;
}
.typing-dots span:nth-child(1) {
  animation-delay: 0s;
}
.typing-dots span:nth-child(2) {
  animation-delay: 0.2s;
}
.typing-dots span:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes typingBounce {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.4;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes fadeInTyping {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==================== BACKDROP DOS MODAIS ==================== */
/* Cinza TRANSLÚCIDO garantido (pedido do QA: ver a tela atrás do modal).
 * Em produção o fundo aparecia 100% preto opaco; localmente o padrão do
 * Bootstrap (preto + opacity .5) está correto — este override defensivo com
 * !important e rgba (cor+alpha na MESMA propriedade, independente de
 * `opacity`) torna o resultado imune a conflito de tema do navegador,
 * extensão, ordem de carga de CSS ou backdrop empilhado no ambiente. */
.modal-backdrop {
  background-color: rgba(33, 37, 41, 0.5) !important;
}
/* opacity 1 só com .show — preserva o fade de entrada/saída (.fade => 0). */
.modal-backdrop.show {
  opacity: 1 !important;
}
/* Backdrops EMPILHADOS (órfãos/duplicados) compõem alpha (0.5ⁿ → preto):
 * garante um único backdrop visível, qualquer que seja a origem do extra. */
.modal-backdrop.show ~ .modal-backdrop.show {
  display: none !important;
}

/* ==================== UTILITÁRIOS p/ remover style="" inline (CSP) ==================== */
/* Substituem atributos style= nas views renderizadas — necessário para que o
 * Content-Security-Policy possa rodar sem 'unsafe-inline' em style-src. */

/* Visibilidade controlada por markup */
.is-hidden { display: none !important; }

/* Avatares circulares e thumbnails */
.avatar-circle-sm { width: 40px; height: 40px; }
.avatar-circle-md { width: 45px; height: 45px; }
.avatar-img-cover { object-fit: cover; }

/* Painel de mensagens do agente */
.chat-messages-pane { max-height: 60vh; }
.chat-message-bubble { max-width: 75%; }
/* Quebras de linha digitadas (Shift+Enter) renderizam na bolha; palavras/URLs
   compridas sem espaço quebram em vez de estourar a largura. */
.chat-message-bubble .message-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* Vídeo anexado na bolha: mesmo espírito do cap de imagem — nunca domina o
   histórico; o player nativo cuida do resto. */
.chat-message-bubble .message-attachment.video-attachment video {
  max-width: 260px;
  max-height: 180px;
  border-radius: 6px;
  display: block;
}
/* Campo de mensagem: textarea auto-crescente (mensagem longa QUEBRA linha em
   vez de rolar horizontalmente — bug relatado). Altura controlada pelo JS
   (autosizeField); depois do teto, rola internamente. */
.chat-input-autogrow {
  resize: none;
  overflow-y: auto;
  max-height: 132px;
}

/* Tamanhos de ícone usados em listas/empty states */
.icon-1-5rem { font-size: 1.5rem; }
.icon-1-8rem { font-size: 1.8rem; }
.icon-2rem   { font-size: 2rem; }
.icon-4rem   { font-size: 4rem; }

/* Campo numérico estreito (ex.: limite simultâneo nos modais) */
.input-narrow { width: 110px; }

/* ==================== MODAIS ROLÁVEIS COM FORM ====================
 * Nos modais .modal-dialog-scrollable em que um <form> envolve
 * header/body/footer (ex.: Editar/Cadastrar widget), o form vira o ÚNICO
 * filho flex do .modal-content e cresce além do max-height — o conteúdo é
 * CLIPADO pelo overflow:hidden sem nunca ativar o scroll do .modal-body.
 * Este bloco propaga o layout flex do Bootstrap através do form, devolvendo
 * ao .modal-body a altura restrita (e o scroll) e mantendo o footer visível. */
.modal-dialog-scrollable .modal-content > form {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* ==================== ANEXOS (painel do agente) ====================
 * Mesmas classes de widget.css (preview de upload + anexo na mensagem) —
 * o layout admin não carrega widget.css, então precisam existir aqui também. */
#chatForm .attachment-preview {
  display: none;
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 6px;
}
#chatForm .attachment-preview.show {
  display: flex;
  align-items: center;
  gap: 10px;
}
#chatForm .attachment-preview .file-info {
  flex: 1;
  font-size: 0.85rem;
  color: #495057;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#chatForm .attachment-preview .file-info i {
  margin-right: 5px;
  color: #6c757d;
}
#chatForm .attachment-preview .remove-attachment {
  background: none;
  border: none;
  color: #dc3545;
  cursor: pointer;
  padding: 2px 6px;
}

.chat-message-bubble .message-attachment {
  margin-top: 8px;
}
.chat-message-bubble .message-attachment.image-attachment img {
  max-width: 200px;
  max-height: 150px;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s;
}
.chat-message-bubble .message-attachment.image-attachment img:hover {
  transform: scale(1.02);
}
.chat-message-bubble .message-attachment.file-attachment .attachment-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  font-size: 0.85rem;
  transition: background 0.2s;
}
.chat-message-bubble .message-attachment.file-attachment .attachment-link:hover {
  background: rgba(0, 0, 0, 0.18);
}
.chat-message-bubble .message-attachment.file-attachment .attachment-link i:first-child {
  font-size: 1.5rem;
}
.chat-message-bubble .message-attachment.file-attachment .attachment-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Abas do painel de atendimentos (Humano / Anne / Em espera): coluna lateral
   é estreita (col-lg-3) e as 3 abas quebravam em duas linhas. flex-nowrap no
   markup segura a linha única; aqui o conteúdo encolhe pra caber nela e, se
   ainda faltar, rola horizontal em vez de quebrar. */
.chat-panel-tabs {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.chat-panel-tabs .nav-link {
  white-space: nowrap;
  padding: 0.4rem 0.55rem;
  font-size: 0.85rem;
}
.chat-panel-tabs .nav-link .badge {
  font-size: 0.68rem;
}
@media (min-width: 992px) and (max-width: 1399px) {
  /* Faixa em que a coluna é mais apertada: ícone das abas sai, o rótulo fica. */
  .chat-panel-tabs .nav-link .bi {
    display: none;
  }
}