/* Estilos das telas de trabalho: conversas, funil e ficha do negocio.
   Separado de styles.css para os dois ficarem abaixo de 500 linhas. */

/* Conversas em tres colunas, como o inbox do Belasis: lista | conversa |
   ficha da cliente. A altura acompanha a tela para a conversa rolar por
   dentro, e nao a pagina inteira. */
.inbox {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  height: calc(100vh - 44px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.inbox.com-ficha { grid-template-columns: 300px minmax(0, 1fr) 280px; }
.inbox-lista { display: flex; flex-direction: column; border-right: 1px solid var(--line); min-height: 0; }
.inbox-busca { padding: 12px 12px 8px; }
.inbox-filtros { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 10px; border-bottom: 1px solid var(--line); }
.inbox-filtros a {
  padding: 4px 9px; border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted); font-size: .74rem; font-weight: 700;
}
.inbox-filtros a:hover { text-decoration: none; border-color: var(--blue); }
.inbox-filtros a.atual { background: var(--text); border-color: var(--text); color: #fff; }
.inbox-conversas { flex: 1; overflow-y: auto; }
.inbox-item {
  display: flex; gap: 10px;
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--text); font-weight: 400;
}
.inbox-item:hover { background: #f6f9fa; text-decoration: none; }
.inbox-item.atual { background: #e8f6fe; }
.inbox-texto { display: grid; gap: 3px; min-width: 0; flex: 1; }
.inbox-linha { display: flex; justify-content: space-between; gap: 8px; }
.inbox-linha strong { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-linha time { color: var(--muted); font-size: .72rem; flex: none; font-variant-numeric: tabular-nums; }
.inbox-previa { color: var(--muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-teste { padding: 8px 12px 12px; border-top: 1px solid var(--line); }
.avatar {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: 50%;
  background: #e4eef2; color: var(--text);
  font-size: .86rem; font-weight: 800;
}
.avatar.humano { background: #fde9c4; color: #8a4c00; }
.avatar.ia { background: #d8f1fd; color: #0b6fa6; }
.avatar.fim { background: #eceff1; color: #8a979d; }
.estado { justify-self: start; font-size: .68rem; font-weight: 700; color: var(--muted); }
.estado.humano { color: #a35b00; }
.estado.ia { color: #0b6fa6; }
.inbox-chat { display: grid; grid-template-rows: auto 1fr auto auto; min-height: 0; padding: 0 16px 14px; }
.chat-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.chat-quem { display: flex; align-items: center; gap: 10px; min-width: 0; }
.chat-quem strong { display: block; }
.inbox-chat .messages { padding: 14px 4px 8px 0; min-height: 0; }
.message time { display: block; margin-top: 5px; color: var(--muted); font-size: .68rem; text-align: right; }
.message strong { font-size: .76rem; color: var(--muted); }
button.secundario { background: #fff; color: var(--text); border: 1px solid var(--line); }
button.secundario:hover { border-color: var(--blue); }
.inbox-ficha { border-left: 1px solid var(--line); overflow-y: auto; padding: 14px; display: grid; align-content: start; gap: 16px; background: #fbfcfd; }
.inbox-ficha h2 { margin-bottom: 6px; }
.ficha-topo { display: grid; gap: 3px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.ficha-topo strong { font-size: 1.05rem; }
.ficha-topo a { font-size: .8rem; margin-top: 4px; }
.ficha-destaque { margin: 0; font-weight: 700; }
.ficha-nota { margin: 0 0 8px; font-size: .84rem; line-height: 1.4; white-space: pre-wrap; }
.inbox-ficha textarea { min-height: 60px; }
@media (max-width: 1200px) {
  .inbox.com-ficha { grid-template-columns: 260px minmax(0, 1fr); }
  .inbox-ficha { display: none; }
}
@media (max-width: 800px) {
  .inbox, .inbox.com-ficha { grid-template-columns: 1fr; height: auto; }
  .inbox-lista { border-right: 0; max-height: 45vh; }
  .inbox-chat { min-height: 70vh; }
}
/* No inbox vale o costume do WhatsApp: a cliente a esquerda, o estudio (IA
   ou equipe) a direita. */
.inbox-chat .message.user { justify-self: start; background: #fff; border-color: var(--line); }
.inbox-chat .message.assistant, .inbox-chat .message.human { justify-self: end; }
.inbox-chat .message.human { background: #eef9ff; border-color: #cfe9fb; }

/* Funil no jeito do Kommo: faixa de cor sob o nome da etapa, o nome da
   cliente em destaque e ha quanto tempo o negocio nao anda. */
.kanban .column { border-top: 3px solid var(--cor, var(--line)); transition: background-color .15s ease; }
.kanban .column.alvo { background: #f3faff; }
.lead-card { cursor: grab; transition: opacity .15s ease, box-shadow .15s ease; }
.lead-card:hover { box-shadow: 0 4px 12px rgba(34, 55, 64, .08); }
.lead-card.arrastando { opacity: .4; }
.lead-card.movendo { opacity: .6; pointer-events: none; }
.lead-nome { color: var(--text); font-size: .92rem; }
.lead-rodape { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.lead-rodape small { color: var(--muted); font-size: .72rem; }
.kanban.com-js .lead-mover { grid-template-columns: 1fr; }
.kanban.com-js .lead-mover button { display: none; }
.kanban.com-js .lead-mover select { padding: 6px 8px; font-size: .78rem; color: var(--muted); }

/* Ficha do negocio: dados a esquerda, historia a direita. */
.ficha-negocio {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  height: calc(100vh - 44px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.negocio-dados { overflow-y: auto; padding: 16px; border-right: 1px solid var(--line); background: #fbfcfd; display: grid; align-content: start; gap: 12px; }
.negocio-dados h1 { margin: 0; font-size: 1.25rem; }
.negocio-dados p { margin: 0; }
.negocio-voltar { font-size: .8rem; }
.negocio-atalhos { display: flex; flex-wrap: wrap; gap: 6px; }
.negocio-atalhos .ghost-link { font-size: .8rem; padding: 6px 9px; }
.negocio-tarefas { border-top: 1px solid var(--line); padding-top: 12px; }
.negocio-tarefas .task-list { margin-top: 0; }
.negocio-historia { display: grid; grid-template-rows: 1fr auto; min-height: 0; }
.historia-lista { overflow-y: auto; padding: 16px; display: grid; align-content: start; gap: 10px; }
.historia-item { max-width: 78%; border: 1px solid var(--line); border-radius: 14px; padding: 9px 12px; background: #fff; }
.historia-item strong { font-size: .74rem; color: var(--muted); }
.historia-item p { margin: 4px 0 0; white-space: pre-wrap; line-height: 1.45; }
.historia-item time { display: block; margin-top: 4px; font-size: .68rem; color: var(--muted); text-align: right; }
.historia-item.assistant, .historia-item.human { justify-self: end; background: #f6fdf9; border-color: #cfeedd; }
.historia-item.human { background: #eef9ff; border-color: #cfe9fb; }
.historia-item.nota { justify-self: center; max-width: 90%; background: #fffcf0; border-color: #f1e3b1; }
.historia-nota { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; padding: 12px 16px; border-top: 1px solid var(--line); }
.historia-nota textarea { min-height: 56px; }
@media (max-width: 800px) {
  .ficha-negocio { grid-template-columns: 1fr; height: auto; }
  .negocio-dados { border-right: 0; border-bottom: 1px solid var(--line); }
  .historia-lista { max-height: 60vh; }
  .historia-nota { grid-template-columns: 1fr; }
}