/* Mensagens agendadas e aba Templates. Usa só os tokens de estilo.css. */

/* ---------- indicador discreto (canto inferior esquerdo) + painel flutuante ---------- */
/* Ancorado na ÁREA DAS MENSAGENS (não na coluna inteira): antes, bottom medido em
   #conversa-corpo caía dentro do compositor e o pill cortava a divisória, na altura
   do campo "Escreva para…". Aqui ele fica logo acima da divisória, dentro da área
   que rola, qualquer que seja a altura do compositor (textarea crescendo, bloqueio). */
.mensagens-area { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mensagens-area > .mensagens { flex: 1; min-height: 0; }
.ag-indicador {
  position: absolute; left: 14px; bottom: 10px; z-index: 40;
  display: inline-flex; align-items: center; gap: 4px; font-size: 12px; line-height: 1;
  padding: 5px 9px; border-radius: 999px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--ouro) 40%, var(--borda));
  background: var(--marca-fundo); color: var(--marca);
}
.ag-indicador:hover, .ag-indicador:focus-visible, .ag-indicador[aria-expanded="true"] {
  border-color: var(--ouro); outline: none;
}
/* atenção: há agendamento cancelado pelo sistema que o atendente ainda não abriu */
.ag-indicador[data-atencao="1"] {
  border-color: var(--erro); color: var(--erro);
  background: rgba(220, 38, 38, .12); font-weight: 600;
}
/* painel: some da tela quando o indicador está oculto/fechado; aberto, flutua acima do
   indicador, dentro da área das mensagens (nunca cobre o campo de escrever) */
.agendamentos-faixa {
  position: absolute; left: 14px; bottom: 44px; z-index: 41; width: min(360px, calc(100% - 28px));
  margin: 0; padding: 8px 11px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--ouro) 40%, var(--borda));
  background: var(--marca-fundo); font-size: 12.5px; max-height: min(60vh, calc(100% - 52px)); overflow-y: auto;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
}
.ag-faixa-titulo { font-weight: 600; color: var(--marca); margin-bottom: 4px; }
.ag-item { padding: 6px 0; border-top: 1px dashed var(--borda); }
.ag-item:first-of-type { border-top: 0; }
.ag-quando { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ag-previa { color: var(--texto-2); white-space: pre-wrap; margin: 2px 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ag-pe { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; color: var(--texto-3); }
.ag-acoes { display: flex; gap: 10px; flex: none; }
.ag-falhou .ag-previa, .ag-cancelada .ag-previa { text-decoration: line-through; }
.ag-motivo { color: var(--erro); font-weight: 600; }
.ag-aviso { color: var(--alerta); }
/* facilitadores de horário do modal "Agendar mensagem" (+1h/+2h/+3h e 10:00/15:00/17:00) */
.ag-atalhos { display: grid; gap: 5px; margin: -2px 0 10px; }
.ag-atalhos-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.ag-atalhos-linha small { color: var(--texto-3); font-size: 11.5px; min-width: 96px; }
.ag-atalho {
  border: 1px solid var(--borda); background: var(--fundo-3); color: var(--texto);
  padding: 3px 9px; border-radius: 999px; font: inherit; font-size: 12px; line-height: 1.3; cursor: pointer;
  transition: border-color .12s, color .12s;
}
.ag-atalho:hover:not(:disabled), .ag-atalho:focus-visible { border-color: var(--ouro); color: var(--ouro); outline: none; }
.ag-atalho:disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
@media (pointer: coarse) { .ag-atalho { padding: 6px 11px; } }

.ag-tipos { display: flex; gap: 16px; }
.ag-tipos label { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--texto); }

/* marca na lista de conversas */
.ag-marca { font-size: 11px; color: var(--marca); white-space: nowrap; }

/* bloco da Gestão */
.painel-agendadas { margin-bottom: 16px; }
.painel-agendadas select { margin-left: 8px; padding: 3px 7px; border: 1px solid var(--borda); border-radius: 7px; background: var(--input); color: var(--texto); }

/* ---------- seletor de templates (modal) ---------- */
.modal-caixa:has(.tpl-seletor), .modal-caixa:has(.tpl-form) { max-width: 720px; }
.tpl-nota { font-size: 12.5px; color: var(--texto-3); margin: 4px 0 8px; }
.tpl-busca input, .tpl-filtros input, .tpl-filtros select, .tpl-novo-grupo input,
.tpl-form input, .tpl-form select, .tpl-form textarea, .modal-campo input[type="date"], .modal-campo input[type="time"], #ag-texto {
  width: 100%; padding: 7px 9px; border: 1px solid var(--borda); border-radius: 8px;
  background: var(--input); color: var(--texto); font: inherit;
}
.tpl-seletor { max-height: 52vh; overflow-y: auto; margin-top: 10px; }
.tpl-grupo { margin-bottom: 10px; }
.tpl-grupo-nome { font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--texto-3); margin: 6px 2px; }
.tpl-grupo-nome span { color: var(--texto-3); font-weight: 400; }
.tpl-item {
  display: block; width: 100%; text-align: left; cursor: pointer; margin-bottom: 5px;
  padding: 8px 10px; border: 1px solid var(--borda); border-radius: 9px; background: var(--fundo-3); color: var(--texto);
}
.tpl-item:hover { border-color: var(--ouro); }
.tpl-item-topo { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.tpl-item small { display: block; color: var(--texto-2); margin-top: 3px; white-space: pre-wrap; }

/* ---------- aba Templates ---------- */
.tpl-tela { display: grid; grid-template-columns: 280px 1fr; gap: 14px; align-items: start; }
@media (max-width: 860px) { .tpl-tela { grid-template-columns: 1fr; } }
.tpl-grupos h3 { margin-top: 0; }
.tpl-grupo-linha {
  display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 8px; margin-bottom: 3px;
  border: 1px solid transparent; border-radius: 8px; background: none; color: var(--texto);
  cursor: pointer; font: inherit; text-align: left;
}
.tpl-grupo-linha:hover { background: var(--fundo-3); }
.tpl-grupo-linha.ativa { border-color: var(--ouro); background: var(--marca-fundo); }
.tpl-grupo-rotulo, .tpl-grupo-linha > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpl-grupo-linha .conta { font-size: 11.5px; color: var(--texto-3); }
.tpl-grupo-acoes { display: none; gap: 2px; }
.tpl-grupo-linha:hover .tpl-grupo-acoes, .tpl-grupo-linha.ativa .tpl-grupo-acoes { display: inline-flex; }
.icone-mini {
  border: 1px solid var(--borda); background: var(--input); color: var(--texto-2);
  border-radius: 6px; width: 22px; height: 22px; padding: 0; cursor: pointer; font-size: 12px; line-height: 1;
}
.icone-mini:disabled { opacity: .35; cursor: default; }
.tpl-novo-grupo { display: flex; gap: 6px; margin-top: 10px; }
.tpl-filtros { display: flex; gap: 8px; margin-bottom: 10px; }
.tpl-filtros select { width: auto; }
.tpl-linha { cursor: pointer; }
.tpl-linha:hover td { background: var(--fundo-3); }
.tpl-corpo-curto { color: var(--texto-3); }
.tpl-form-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tpl-form textarea { resize: vertical; min-height: 90px; }
.tpl-status { border-top: 1px solid var(--borda); padding-top: 8px; font-size: 13px; }

/* ---------- botão de reloginho (Agendar) e menuzinho ---------- */
.ag-menu-wrap { position: relative; display: inline-flex; flex: none; }
.botao-icone {
  width: 38px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--borda); border-radius: 8px; background: var(--fundo-2); color: var(--texto-2); cursor: pointer;
}
.botao-icone:hover, .botao-icone:focus-visible { color: var(--ouro); border-color: var(--ouro); outline: none; }
.ag-menu {
  position: absolute; bottom: calc(100% + 6px); right: 0; z-index: 50; min-width: 220px;
  display: flex; flex-direction: column; gap: 2px; padding: 4px;
  border: 1px solid var(--borda); border-radius: 10px; background: var(--fundo-2); box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
}
.ag-menu-item {
  text-align: left; padding: 8px 10px; border: none; border-radius: 7px; background: none; color: var(--texto);
  font: inherit; cursor: pointer;
}
.ag-menu-item:hover, .ag-menu-item:focus-visible { background: var(--fundo-3); color: var(--ouro); outline: none; }
.ag-menu-item:disabled, .ag-menu-item:disabled:hover { color: var(--texto-3); background: none; cursor: default; }
.ag-menu-em-breve { color: var(--texto-3); font-size: 11.5px; }

/* ---------- agendar grupo de template (sequência/cascata) ---------- */
.modal-caixa:has(.ag-grupo-item) { max-width: 640px; }
#ag-grupo-select { width: 100%; padding: 7px 9px; border: 1px solid var(--borda); border-radius: 8px; background: var(--input); color: var(--texto); font: inherit; }
.ag-grupo-linha-data { grid-template-columns: 1fr 1fr 1fr; margin-bottom: 6px; }
.ag-grupo-item { padding: 10px 0; border-top: 1px dashed var(--borda); }
.ag-grupo-item:first-of-type { border-top: 0; }
.ag-grupo-item .ag-quando { margin-bottom: 6px; }

/* aba Templates: réguas (passos T1..T7) e cartões dos templates importados do ChatGuru */
.tpl-secao { font-size: 14px; margin: 14px 0 6px; }
.tpl-regua { border: 1px solid var(--borda); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.tpl-passos { margin: 6px 0 0; padding-left: 0; list-style: none; display: grid; gap: 3px; }
.tpl-passos li { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; }
.tpl-passos a { color: inherit; text-decoration: none; }
.tpl-passos a:hover code { text-decoration: underline; }
.selo-ponte { border: 1px solid var(--ouro); color: var(--ouro); background: transparent; }
.tpl-card { border: 1px solid var(--borda); border-radius: 8px; margin-bottom: 6px; }
.tpl-card > summary { cursor: pointer; padding: 7px 10px; list-style-position: inside; }
.tpl-card[open] > summary { border-bottom: 1px solid var(--borda); }
.tpl-card-topo { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tpl-card-topo code, .tpl-passos code { word-break: break-all; }
.tpl-card > summary small { display: block; margin-top: 2px; }
.tpl-card-corpo { padding: 8px 10px; }
.tpl-texto { white-space: pre-wrap; font-size: 13.5px; background: var(--fundo-3); border-radius: 6px; padding: 8px; }
.tpl-vars { margin: 0; padding-left: 0; list-style: none; font-size: 13px; display: grid; gap: 2px; }
.tpl-filtros { flex-wrap: wrap; }