/* ============================================================
   WoChat — Mockups de produto (ilustrativos, tokens do DS)
   Blocos "fake UI" para as seções de recursos. Nunca são prints reais.
   Requer: assets/tokens.css
   ============================================================ */

/* ---- Moldura de app ---- */
.mk-frame {
  background: var(--wc-paper);
  border: 1px solid var(--wc-border-default);
  border-radius: var(--wc-radius-xl);
  box-shadow: var(--wc-shadow-lg);
  overflow: hidden;
}
.mk-frame__bar {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 16px;
  background: var(--wc-ink-50);
  border-bottom: 1px solid var(--wc-ink-100);
}
.mk-frame__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--wc-ink-300); }
.mk-frame__bar span {
  margin-left: 8px;
  font-family: var(--wc-font-mono);
  font-size: 0.6875rem; letter-spacing: .04em;
  color: var(--wc-text-faint);
}
.mk-frame__body { padding: var(--wc-space-6); }

/* ---- Conversa / bolhas ---- */
.mk-chat { display: flex; flex-direction: column; gap: 10px; }
.mk-bubble {
  max-width: 78%;
  padding: 10px 14px;
  font-size: 0.8125rem; line-height: 1.5;
  border-radius: 14px;
  color: var(--wc-ink-700);
}
.mk-bubble--in  { align-self: flex-start; background: var(--wc-ink-100); border-bottom-left-radius: 4px; }
.mk-bubble--out { align-self: flex-end; background: var(--wc-navy-500); color: #fff; border-bottom-right-radius: 4px; }
.mk-bubble--ai  { align-self: flex-end; background: rgba(37,211,102,.12); color: #0E7A3C; border-bottom-right-radius: 4px; }
.mk-bubble__tag {
  display: block; margin-bottom: 3px;
  font-family: var(--wc-font-mono); font-size: 0.625rem;
  letter-spacing: .06em; text-transform: uppercase; opacity: .7;
}

/* ---- Lista de conversas ---- */
.mk-list { display: flex; flex-direction: column; }
.mk-list__item {
  display: flex; gap: 12px; align-items: center;
  padding: 12px 4px;
  border-bottom: 1px solid var(--wc-ink-100);
}
.mk-list__item:last-child { border-bottom: 0; }
.mk-avatar {
  flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--wc-navy-100); color: var(--wc-navy-500);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.75rem;
}
.mk-line { height: 8px; border-radius: 4px; background: var(--wc-ink-100); }
.mk-line--sm { width: 40%; }
.mk-line--md { width: 65%; }
.mk-line--lg { width: 90%; }
.mk-chip-ch {
  flex-shrink: 0;
  font-family: var(--wc-font-mono); font-size: 0.625rem;
  padding: 2px 7px; border-radius: var(--wc-radius-pill);
  background: var(--wc-ink-50); color: var(--wc-text-faint);
  border: 1px solid var(--wc-ink-200);
}

/* ---- Caixa de entrada (hero): rail + conversa ---- */
.mk-inbox {
  display: grid;
  grid-template-columns: minmax(0, 210px) 1fr;
  min-height: 336px;
}
.mk-inbox__rail {
  border-right: 1px solid var(--wc-ink-100);
  padding: 8px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--wc-ink-50);
}
.mk-conv {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 10px;
  border-radius: var(--wc-radius-sm);
}
.mk-conv--active { background: var(--wc-paper); box-shadow: var(--wc-shadow-xs); }
.mk-conv__body { flex: 1; min-width: 0; }
.mk-conv__top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.mk-conv__top b { font-size: 0.75rem; font-weight: 700; color: var(--wc-navy-500); }
.mk-conv__top time { font-family: var(--wc-font-mono); font-size: 0.5625rem; color: var(--wc-text-faint); flex-shrink: 0; }
.mk-conv p {
  margin: 2px 0 0;
  font-size: 0.6875rem; line-height: 1.4; color: var(--wc-text-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mk-conv__badge {
  flex-shrink: 0; align-self: center;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: var(--wc-radius-pill);
  background: var(--wc-success); color: #fff;
  font-size: 0.5625rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.mk-avatar--wa { background: rgba(37,211,102,.16); color: #0E7A3C; }
.mk-avatar--ig { background: var(--wc-amber-100); color: var(--wc-amber-600); }
.mk-avatar--em { background: var(--wc-navy-100); color: var(--wc-navy-500); }

.mk-inbox__main { display: flex; flex-direction: column; padding: 14px 16px; }
.mk-inbox__head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1px solid var(--wc-ink-100);
}
.mk-inbox__head b { font-size: 0.8125rem; font-weight: 700; color: var(--wc-navy-500); display: block; }
.mk-inbox__chan {
  font-family: var(--wc-font-mono); font-size: 0.5625rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--wc-text-faint);
  display: flex; align-items: center; gap: 5px;
}
.mk-inbox__chan i { color: var(--wc-success); font-size: 0.75rem; }
.mk-inbox__reply {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between;
  border: 1px solid var(--wc-ink-200); border-radius: var(--wc-radius-sm);
  padding: 9px 12px; font-size: 0.75rem; color: var(--wc-ink-400);
}
.mk-inbox__reply i { color: var(--wc-navy-300); }

@media (max-width: 720px) {
  .mk-inbox { grid-template-columns: 1fr; }
  .mk-inbox__rail { display: none; }
}

/* ---- Kanban ---- */
.mk-kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mk-col {
  background: var(--wc-ink-50);
  border: 1px solid var(--wc-ink-100);
  border-radius: var(--wc-radius-md);
  padding: 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.mk-col__head {
  font-family: var(--wc-font-mono); font-size: 0.625rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--wc-text-faint);
  display: flex; align-items: center; gap: 6px;
}
.mk-col__head::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--wc-navy-300); }
.mk-col:nth-child(1) .mk-col__head::before { background: #6366f1; }
.mk-col:nth-child(2) .mk-col__head::before { background: #8b5cf6; }
.mk-col:nth-child(3) .mk-col__head::before { background: var(--wc-amber-400); }
.mk-col:nth-child(4) .mk-col__head::before { background: var(--wc-whatsapp); }
.mk-card {
  background: var(--wc-paper);
  border: 1px solid var(--wc-ink-200);
  border-radius: var(--wc-radius-sm);
  padding: 9px 10px;
  display: flex; flex-direction: column; gap: 6px;
  box-shadow: var(--wc-shadow-xs);
}
.mk-card__title { font-size: 0.75rem; font-weight: 700; color: var(--wc-navy-500); }
.mk-card__meta { font-family: var(--wc-font-mono); font-size: 0.625rem; color: var(--wc-text-faint); }

/* ---- Tiles de métrica ---- */
.mk-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mk-stat {
  background: var(--wc-paper);
  border: 1px solid var(--wc-ink-200);
  border-radius: var(--wc-radius-md);
  padding: 14px;
}
.mk-stat__num { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; color: var(--wc-navy-500); }
.mk-stat__lbl { font-family: var(--wc-font-mono); font-size: 0.625rem; letter-spacing: .06em; text-transform: uppercase; color: var(--wc-text-faint); }
.mk-bars { display: flex; align-items: flex-end; gap: 6px; height: 60px; margin-top: 10px; }
.mk-bars i { flex: 1; background: var(--wc-navy-100); border-radius: 3px 3px 0 0; }
.mk-bars i:nth-child(2) { background: var(--wc-navy-300); }
.mk-bars i:nth-child(4) { background: var(--wc-amber-300); }
.mk-bars i:nth-child(5) { background: var(--wc-navy-500); }

/* ---- Nuvem de canais ---- */
.mk-channels { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.mk-channels .wc-chip { background: var(--wc-paper); }

/* ---- Painel do agente de IA ---- */
.mk-agent {
  border: 1px solid var(--wc-ink-200);
  border-radius: var(--wc-radius-md);
  padding: 14px;
  background: var(--wc-paper);
}
.mk-agent__head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  font-size: 0.8125rem; font-weight: 700; color: var(--wc-navy-500);
}
.mk-agent__head i {
  width: 26px; height: 26px; border-radius: var(--wc-radius-sm);
  background: rgba(37,211,102,.14); color: var(--wc-whatsapp);
  display: flex; align-items: center; justify-content: center; font-size: 0.75rem;
}
.mk-agent__src {
  margin-top: 10px;
  font-family: var(--wc-font-mono); font-size: 0.625rem;
  color: var(--wc-text-faint); letter-spacing: .04em;
}

/* ---- Barra de progresso (cobertura de conhecimento) ---- */
.mk-progress {
  height: 8px; border-radius: 4px;
  background: var(--wc-ink-100); overflow: hidden;
}
.mk-progress > i { display: block; height: 100%; background: var(--wc-whatsapp); border-radius: 4px; }

/* ---- Stepper / progresso do funil ---- */
.mk-stepper { display: flex; align-items: flex-start; gap: 4px; }
.mk-step { flex: 1; text-align: center; position: relative; }
.mk-step__dot {
  width: 26px; height: 26px; border-radius: 50%; margin: 0 auto 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6875rem; font-weight: 700;
  background: var(--wc-ink-100); color: var(--wc-text-faint);
}
.mk-step--done .mk-step__dot { background: var(--wc-whatsapp); color: #fff; }
.mk-step--now  .mk-step__dot { background: var(--wc-navy-500); color: #fff; box-shadow: 0 0 0 4px var(--wc-navy-50); }
.mk-step__lbl { font-size: 0.6875rem; font-weight: 700; color: var(--wc-navy-500); }
.mk-step__sub { font-family: var(--wc-font-mono); font-size: 0.625rem; color: var(--wc-text-faint); }
.mk-step:not(:last-child)::after {
  content: ""; position: absolute; top: 13px; left: calc(50% + 16px); right: calc(-50% + 16px);
  height: 2px; background: var(--wc-ink-200);
}
.mk-step--done:not(:last-child)::after { background: var(--wc-whatsapp); }

/* ---- Regra de automação (quando → então) ---- */
.mk-rule { display: flex; flex-direction: column; gap: 8px; }
.mk-rule__row {
  border: 1px solid var(--wc-ink-200); border-radius: var(--wc-radius-md);
  padding: 12px; background: var(--wc-paper);
}
.mk-rule__k {
  font-family: var(--wc-font-mono); font-size: 0.625rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--wc-amber-500); font-weight: 700;
}
.mk-rule__v { margin-top: 4px; font-size: 0.8125rem; color: var(--wc-ink-700); }
.mk-rule__arrow { text-align: center; color: var(--wc-ink-300); font-size: 0.75rem; }

/* ---- Campos de formulário fake ---- */
.mk-form { display: flex; flex-direction: column; gap: 12px; }
.mk-field label {
  display: block; margin-bottom: 4px;
  font-family: var(--wc-font-mono); font-size: 0.625rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--wc-text-faint); font-weight: 600;
}
.mk-field__box {
  border: 1px solid var(--wc-ink-200); border-radius: var(--wc-radius-sm);
  padding: 9px 12px; font-size: 0.8125rem; color: var(--wc-ink-500);
  background: var(--wc-paper);
}
.mk-field__box--filled { color: var(--wc-navy-500); font-weight: 600; }

/* ---- Mini calendário ---- */
.mk-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.mk-cal span {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: 0.625rem; color: var(--wc-text-faint);
  border-radius: var(--wc-radius-xs); background: var(--wc-ink-50);
}
.mk-cal span.on { background: var(--wc-navy-500); color: #fff; font-weight: 700; }
.mk-cal span.dot { position: relative; color: var(--wc-ink-700); background: var(--wc-paper); border: 1px solid var(--wc-ink-200); }
.mk-cal span.dot::after { content: ""; position: absolute; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--wc-amber-400); }

/* ---- Responsivo ---- */
@media (max-width: 640px) {
  .mk-kanban { grid-template-columns: repeat(2, 1fr); }
  .mk-stats  { grid-template-columns: 1fr 1fr; }
  .mk-step__sub { display: none; }
}