/* ============================================================
   CRM Demo — a simulação "Kommo em ação" da home
   Substitui o antigo console de diagnóstico (medidores, órbitas) por
   uma interface de CRM realista: conversa de WhatsApp, funil kanban e
   ficha do lead. O roteiro animado vive em assets/js/crm-demo.js.

   Estética de produto, não de painel de ficção: superfícies discretas,
   tipografia densa, cor funcional (lima só onde há ação).
   ============================================================ */

.crm { display: flex; flex-direction: column; font-size: 12px; }

/* ---------- barra do funil ---------- */
.crm-top {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .015);
}
.crm-funnel { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 700; font-size: 12.5px; white-space: nowrap; }
.crm-funnel svg { width: 14px; height: 14px; color: var(--lime); }
.crm-funnel .caret { width: 7px; height: 7px; border-right: 1.5px solid var(--ink-4); border-bottom: 1.5px solid var(--ink-4); transform: rotate(45deg) translateY(-2px); }
.crm-search {
  flex: 1; min-width: 0; max-width: 250px;
  display: flex; align-items: center; gap: 7px;
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink-4); font-size: 11px;
  background: rgba(255, 255, 255, .02);
  white-space: nowrap; overflow: hidden;
}
.crm-search svg { width: 11px; height: 11px; flex: none; }
.crm-day { margin-left: auto; color: var(--ink-4); font-size: 11px; white-space: nowrap; }
.crm-day b { color: var(--ink-2); font-weight: 700; }
.crm-team { display: flex; }
.crm-team span {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 8.5px; font-weight: 800; color: var(--ink-2);
  background: #1c231c; border: 1.5px solid #0c110d;
  margin-left: -6px;
}
.crm-team span.otto { background: rgba(143, 233, 60, .18); color: var(--lime-2); }

/* ---------- corpo em três painéis ---------- */
.crm-grid {
  display: grid;
  grid-template-columns: 296px 1fr 246px;
  min-height: 440px;
}

/* ---------- conversa ---------- */
.crm-chat { display: flex; flex-direction: column; border-right: 1px solid var(--line); min-width: 0; }
.chat-head {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 13px; border-bottom: 1px solid var(--line);
}
.c-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 800; color: #0a2404;
  background: linear-gradient(135deg, var(--lime-2), var(--mint));
}
.chat-head > div { min-width: 0; flex: 1; }
.chat-head b { display: block; color: var(--ink); font-size: 12.5px; letter-spacing: -.01em; }
.chat-head small { display: flex; align-items: center; gap: 5px; color: var(--ink-4); font-size: 10px; }
.wa-dot { width: 6px; height: 6px; border-radius: 50%; background: #25d366; box-shadow: 0 0 6px rgba(37, 211, 102, .7); }
.chat-otto {
  flex: none; padding: 3px 8px; border-radius: 999px;
  border: 1px solid rgba(143, 233, 60, .3);
  background: rgba(143, 233, 60, .08);
  color: var(--lime-2); font-family: var(--f-mono); font-size: 8px; letter-spacing: .1em; text-transform: uppercase;
}

.chat-log {
  flex: 1;
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 13px;
  overflow: hidden;
  justify-content: flex-end;   /* as mensagens "sobem", como num chat real */
}
.msg { max-width: 86%; display: flex; flex-direction: column; }
.msg .bubble {
  padding: 8px 11px; border-radius: 12px;
  font-size: 11.5px; line-height: 1.45; color: var(--ink-2);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
}
.msg.out { align-self: flex-end; align-items: flex-end; }
.msg.out .bubble {
  background: rgba(143, 233, 60, .1);
  border-color: rgba(143, 233, 60, .22);
  color: var(--ink);
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 4px;
}
.msg .meta { display: flex; align-items: center; gap: 5px; margin-top: 3px; padding: 0 3px; color: var(--ink-4); font-size: 9px; }
.msg .meta .otto-chip { color: var(--lime-2); font-family: var(--f-mono); font-size: 8px; letter-spacing: .08em; }
.msg .ticks { color: #53bdeb; font-size: 9px; letter-spacing: -2px; }

.msg-sys {
  align-self: center; text-align: center;
  padding: 4px 10px; border-radius: 999px;
  border: 1px dashed rgba(143, 233, 60, .3);
  color: var(--lime-2); font-size: 9.5px;
  background: rgba(143, 233, 60, .05);
}

/* entrada das mensagens */
.msg, .msg-sys { animation: msg-in .34s cubic-bezier(.215, .61, .355, 1); }
@keyframes msg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* digitando… */
.typing .bubble { display: inline-flex; gap: 4px; padding: 10px 12px; }
.typing i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ink-3);
  animation: typing-dot 1.1s ease-in-out infinite;
}
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing-dot { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }

.chat-input {
  display: flex; align-items: center; gap: 8px;
  margin: 0 13px 12px; padding: 8px 11px;
  border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink-4); font-size: 11px;
  background: rgba(255, 255, 255, .02);
}
.chat-input svg { width: 14px; height: 14px; margin-left: auto; color: var(--lime); flex: none; }

/* ---------- funil kanban ---------- */
.crm-board {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  padding: 13px; min-width: 0;
}
.kb-col { min-width: 0; display: flex; flex-direction: column; }
.kb-head { padding: 0 2px 9px; border-bottom: 2px solid var(--line); margin-bottom: 10px; }
.kb-col[data-col="fechado"] .kb-head { border-bottom-color: rgba(143, 233, 60, .5); }
.kb-head b { display: block; color: var(--ink-2); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.kb-head small { display: block; margin-top: 2px; color: var(--ink-4); font-size: 9.5px; }
.kb-cards { display: flex; flex-direction: column; gap: 8px; }

.kb-card {
  padding: 9px 10px; border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .035);
  box-shadow: 0 6px 14px -10px rgba(0, 0, 0, .8);
  transition: border-color .3s, box-shadow .3s;
}
.kb-card b { display: block; color: var(--ink); font-size: 11px; letter-spacing: -.01em; }
.kb-card .kb-val { display: block; margin-top: 2px; color: var(--lime-2); font-size: 10.5px; font-weight: 700; }
.kb-card .kb-meta { display: flex; align-items: center; gap: 5px; margin-top: 5px; color: var(--ink-4); font-size: 9px; }
.kb-card .kb-src { padding: 1.5px 6px; border-radius: 999px; border: 1px solid var(--line); font-size: 8px; }
.kb-card .kb-src.wa { color: #4fd97a; border-color: rgba(37, 211, 102, .3); }
.kb-card .kb-src.ig { color: #e18ae6; border-color: rgba(214, 41, 118, .35); }
.kb-card .kb-src.site { color: #7cc4ff; border-color: rgba(83, 155, 245, .35); }
.kb-card.is-hot { border-color: rgba(143, 233, 60, .55); box-shadow: 0 0 0 1px rgba(143, 233, 60, .2), 0 10px 22px -12px rgba(143, 233, 60, .35); }
.kb-card.is-won { border-color: rgba(143, 233, 60, .45); background: rgba(143, 233, 60, .07); }
.kb-card.is-won b::after { content: " ✓"; color: var(--lime); }

/* o movimento entre colunas é FLIP: o JS aplica o transform inverso e
   esta transição o leva a zero */
.kb-card.fliping { transition: transform .65s cubic-bezier(.215, .61, .355, 1), border-color .3s, box-shadow .3s; z-index: 5; position: relative; }
.kb-card.entering { animation: kb-in .4s cubic-bezier(.215, .61, .355, 1); }
@keyframes kb-in { from { opacity: 0; transform: translateY(-8px) scale(.97); } to { opacity: 1; transform: none; } }

/* ---------- ficha do lead ---------- */
.crm-lead { border-left: 1px solid var(--line); padding: 13px; min-width: 0; display: flex; flex-direction: column; gap: 11px; }
.lead-head { display: flex; align-items: center; gap: 9px; }
.c-avatar.big { width: 34px; height: 34px; font-size: 12px; }
.lead-head b { display: block; color: var(--ink); font-size: 13px; letter-spacing: -.01em; }
.lead-head small { color: var(--ink-4); font-size: 9.5px; }
.lead-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.lead-tags span {
  padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-3); font-size: 9.5px;
  background: rgba(255, 255, 255, .025);
}
.lead-tags span.hot { border-color: rgba(143, 233, 60, .45); color: var(--lime-2); background: rgba(143, 233, 60, .08); animation: msg-in .34s cubic-bezier(.215, .61, .355, 1); }
.lead-field { padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, .02); }
.lead-field small { display: block; color: var(--ink-4); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.lead-field b { display: block; margin-top: 2px; color: var(--ink); font-size: 15px; letter-spacing: -.02em; }

.lead-next {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; border-radius: 10px;
  border: 1px solid rgba(143, 233, 60, .3);
  background: rgba(143, 233, 60, .06);
  animation: msg-in .4s cubic-bezier(.215, .61, .355, 1);
}
.lead-next svg { width: 15px; height: 15px; color: var(--lime); flex: none; }
.lead-next b { display: block; color: var(--ink); font-size: 11px; }
.lead-next small { color: var(--ink-4); font-size: 9px; }

.lead-tl-head { color: var(--ink-4); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; margin-top: 2px; }
.lead-tl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.lead-tl li {
  position: relative; padding: 0 0 12px 16px;
  color: var(--ink-3); font-size: 10.5px; line-height: 1.4;
  animation: msg-in .34s cubic-bezier(.215, .61, .355, 1);
}
.lead-tl li::before {
  content: ""; position: absolute; left: 0; top: 4px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--lime); box-shadow: 0 0 8px rgba(143, 233, 60, .5);
}
.lead-tl li::after {
  content: ""; position: absolute; left: 3px; top: 14px; bottom: 2px;
  width: 1px; background: var(--line);
}
.lead-tl li:last-child::after { display: none; }
.lead-tl li small { display: block; color: var(--ink-4); font-size: 9px; margin-top: 1px; }

/* ---------- responsivo ---------- */
@media (max-width: 1100px) {
  .crm-grid { grid-template-columns: 272px 1fr; }
  .crm-lead { display: none; }
}
@media (max-width: 980px) {
  .crm-top { flex-wrap: wrap; gap: 8px 12px; }
  .crm-search { display: none; }
  .crm-grid { grid-template-columns: 1fr; }
  .crm-chat { border-right: 0; border-bottom: 1px solid var(--line); }
  .chat-log { min-height: 240px; }
  .crm-board { grid-template-columns: repeat(4, minmax(150px, 1fr)); overflow-x: auto; -webkit-overflow-scrolling: touch; }
}