/* =====================================================================
   Tela "Agente Inti" (home)
   Cabeçalhos (desktop e mobile), área de conversa rolável (saudação,
   insights do dia e mensagens), rodapé fixo (painel "Ouvindo…", sugestões
   e compositor) e resumo do dia na lateral direita. Abaixo de 992px vira
   o layout do protótipo mobile: carrossel de insights, chips em linha e
   compositor redondo com microfone.
   Tokens e componentes compartilhados vêm de base.css.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Altura da tela: cabeçalho + área rolável + rodapé fixo. Só a área de
   mensagens rola; no mobile a casca já reserva a nav inferior com
   padding-bottom no .app-conteudo.
   --------------------------------------------------------------------- */
.pagina-agente .app { height: 100vh; height: 100dvh; min-height: 0; }
.pagina-agente .app-conteudo { min-height: 0; }
.pagina-agente .app-principal { min-height: 0; }
.pagina-agente .lateral-direita { overflow-y: auto; }

/* Visibilidade por faixa (desktop a partir de 992px) */
@media (min-width: 992px) {
  .agente-so-mobile { display: none !important; }
}
@media (max-width: 991.98px) {
  .agente-so-desktop { display: none !important; }
}
/* Elementos alternados pelo JS com o atributo hidden: garante o display:none
   mesmo sem o reboot do Bootstrap (estas classes definem display flex). */
.agente-pendente[hidden],
.agente-ouvindo[hidden],
.agente-botao-redondo[hidden] { display: none !important; }

/* ---------------------------------------------------------------------
   Cabeçalhos
   --------------------------------------------------------------------- */
.agente-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
  color: var(--cor-texto-suave);
}
.agente-cabecalho-mobile {
  flex-wrap: nowrap;
  gap: 12px;
  padding: 14px 12px 12px 16px;
}
.agente-cabecalho-mobile-titulo {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.agente-cabecalho-mobile-nome { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.25; }
.agente-status-mobile { gap: 6px; font-size: 12px; }
.agente-status-mobile .ponto-status { width: 7px; height: 7px; flex-basis: 7px; }
.agente-cabecalho-mobile .botao-icone { border-radius: var(--raio-md); }

/* ---------------------------------------------------------------------
   Área de conversa (a única parte que rola)
   --------------------------------------------------------------------- */
.agente-rolagem {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 32px 32px 16px;
}
.agente-conversa {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Saudação */
.agente-saudacao { display: flex; align-items: center; gap: 20px; padding-top: 8px; }
.agente-saudacao-texto { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.agente-saudacao-descricao { font-size: 16px; line-height: 1.5; color: var(--cor-texto-suave); }

/* Insights do dia */
.agente-insight-categoria {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--cor-texto-3);
}
.agente-insight-botao { align-self: flex-start; margin-top: 2px; }

/* Mensagens */
.agente-mensagens { display: flex; flex-direction: column; gap: 28px; }
.agente-mensagens:empty { display: none; }
.agente-mensagem-usuario { display: flex; justify-content: flex-end; }
.agente-balao {
  max-width: 70%;
  background: var(--cor-escuro);
  color: #FFFFFF;
  padding: 12px 16px;
  border-radius: 18px 18px 4px 18px;
  font-size: 15px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.agente-mensagem-agente { display: flex; gap: 14px; align-items: flex-start; }
.agente-mensagem-sol { width: 32px; height: 32px; }
.agente-mensagem-corpo {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 4px;
}
.agente-mensagem-texto { font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.agente-cartao-resposta { padding: 16px 18px; gap: 12px; max-width: 520px; }
.agente-cartao-cabeca { display: flex; flex-direction: column; gap: 4px; }
.agente-cartao-tag { font-size: 12px; font-weight: 600; color: var(--cor-texto-mudo); }
.agente-cartao-titulo { font-size: 15px; font-weight: 700; }
.agente-cartao-linhas { display: flex; flex-direction: column; }
.agente-cartao-acao { align-self: flex-start; }

/* Indicador "Pensando…" / "Executando…" */
.agente-pendente { display: flex; gap: 14px; align-items: center; }
.agente-pendente-texto { font-size: 14px; color: var(--cor-texto-suave); }

/* ---------------------------------------------------------------------
   Rodapé fixo: painel "Ouvindo…", sugestões e compositor
   --------------------------------------------------------------------- */
.agente-rodape { flex: 0 0 auto; padding: 8px 32px 20px; }
.agente-rodape-interno {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.agente-ouvindo {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--raio-xl);
  background: var(--cor-escuro-2);
  color: #FFFFFF;
}
.agente-ouvindo-texto {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.agente-ouvindo-titulo { font-size: 15px; font-weight: 700; }
.agente-ouvindo-descricao { font-size: 13px; color: var(--cor-texto-claro); }
.agente-ouvindo-parar {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--cor-texto-suave);
  border-radius: var(--raio-sm);
  background: transparent;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.agente-ouvindo-parar:hover { background: rgba(255, 255, 255, .08); }
.agente-compositor .botao-icone { border-radius: var(--raio-md); color: var(--cor-texto-suave); }
.agente-compositor .botao-icone-redondo { border-radius: 50%; }
.agente-botao-redondo {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--cor-laranja);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transicao);
}
.agente-botao-redondo:hover { background: #E64D00; }
.agente-aviso { text-align: center; font-size: 12px; color: var(--cor-texto-mudo); }

/* ---------------------------------------------------------------------
   Resumo do dia (lateral direita, a partir de 1200px)
   --------------------------------------------------------------------- */
.agente-hoje { display: flex; flex-direction: column; gap: 4px; }
.agente-hoje-data { font-size: 16px; font-weight: 700; }
.agente-clima {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 14px;
  background: var(--cor-fundo);
  color: var(--cor-texto-2);
}
.agente-clima-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.agente-clima-temperatura { font-size: 22px; font-weight: 700; color: var(--cor-texto); }
.agente-clima-local { font-size: 13px; color: var(--cor-texto-suave); }
.agente-visitas { display: flex; flex-direction: column; gap: 4px; }
.agente-visitas-titulo { padding-bottom: 6px; }
.agente-visita { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--cor-divisor); }
.agente-visita-hora { width: 44px; flex: 0 0 44px; font-size: 13px; font-weight: 700; }
.agente-visita-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.agente-visita-local { font-size: 14px; font-weight: 600; }
.agente-visita-descricao { font-size: 13px; color: var(--cor-texto-suave); }
.agente-pendencias { display: flex; flex-direction: column; gap: 10px; }
.agente-pendencia {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 10px 12px;
  box-sizing: border-box;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  color: var(--cor-texto);
  font-size: 13px;
  text-decoration: none;
  transition: border-color var(--transicao), background var(--transicao);
}
.agente-pendencia:hover { color: var(--cor-texto); border-color: var(--cor-borda-hover); background: var(--cor-cinza-hover); }
.agente-pendencia .icone { color: var(--cor-texto-mudo); }

/* ---------------------------------------------------------------------
   Mobile e tablet (abaixo de 992px): layout do protótipo mobile
   --------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .agente-rolagem { padding: 20px 16px 12px; scrollbar-width: none; }
  .agente-rolagem::-webkit-scrollbar { display: none; }
  .agente-conversa { gap: 18px; }

  /* Saudação só com texto */
  .agente-saudacao { gap: 0; padding-top: 0; }
  .agente-saudacao-texto { gap: 4px; }
  .agente-saudacao .titulo-saudacao { font-size: 24px; letter-spacing: -0.4px; }
  .agente-saudacao-descricao { font-size: 14px; }

  /* Insights viram carrossel horizontal encostado nas bordas */
  .agente-insights {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    margin: 0 -16px;
    padding: 0 16px 4px;
    scroll-snap-type: x mandatory;
  }
  .agente-insight { flex: 0 0 264px; scroll-snap-align: start; padding: 16px; gap: 8px; }
  /* No protótipo mobile o cabeçalho do card é só a categoria, sem ícone */
  .agente-insight .icone-caixa { display: none; }
  .agente-insight .titulo-cartao { font-size: 15px; }
  .agente-insight .texto-descricao { font-size: 13px; line-height: 1.45; }

  /* Mensagens */
  .agente-mensagens { gap: 18px; }
  .agente-balao { max-width: 82%; padding: 11px 14px; line-height: 1.45; }
  .agente-mensagem-agente { gap: 10px; }
  .agente-mensagem-sol { width: 26px; height: 26px; margin-top: 2px; }
  .agente-mensagem-sol .sol { width: 24px; height: 24px; }
  .agente-mensagem-corpo { gap: 10px; padding-top: 0; }
  .agente-mensagem-texto { line-height: 1.55; }
  .agente-cartao-resposta { max-width: none; border-radius: 14px; padding: 14px; gap: 10px; }
  .agente-cartao-cabeca { gap: 2px; }
  .agente-cartao-resposta .linha-dados { gap: 12px; padding: 8px 0; font-size: 13px; }
  .agente-cartao-acao { align-self: stretch; }
  .agente-pendente { gap: 10px; }
  .agente-pendente .agente-mensagem-sol { margin-top: 0; }

  /* Rodapé: chips em linha única com rolagem e compositor redondo */
  .agente-rodape { padding: 8px 12px 10px; }
  .agente-rodape-interno { gap: 8px; }
  .agente-sugestoes { flex-wrap: nowrap; overflow-x: auto; margin: -4px -12px; padding: 4px 12px; }
  .agente-sugestoes .chip { flex: 0 0 auto; position: relative; }
  /* Chip continua com 36px de altura, mas a área de toque chega a 44px */
  .agente-sugestoes .chip::before { content: ""; position: absolute; left: 0; right: 0; top: -5px; bottom: -5px; }
  .agente-compositor { border-radius: 26px; padding: 4px 4px 4px 6px; }
  .agente-compositor input { font-size: 16px; }

  /* Alvos de toque de pelo menos 44px */
  .agente-insight-botao, .agente-ouvindo-parar { min-height: 44px; }
}