/* ── Mockups do painel dentro da página comercial ──
   O painel é outro produto visual: chassi ki-admin, Rubik, tokens do
   ez-NFe Design System com a primária trocada para o verde Dextra.
   Tudo aqui vive sob .mk para não vazar no site, que é Inter + papel. */

.mk {
  --mk-green: #006437;
  --mk-green-d: #00482a;
  --mk-green-50: #e8f1ec;
  --mk-surface: #ffffff;
  --mk-body: #f6f7fa;
  --mk-line: #ebedf0;
  --mk-ink: #082f32;
  --mk-muted: #a0a0b0;
  --mk-gray: #f4f7f8;
  --mk-wa: #1f9d55;
  --mk-warn-bg: rgba(249, 193, 35, .12);
  --mk-warn-br: rgba(249, 193, 35, .4);
  --mk-warn-tx: #6b5200;
  --mk-r: 10px;
  --mk-shadow: 0 .1rem .5rem 0 rgba(40, 35, 45, .1);
  font-family: "Rubik", system-ui, sans-serif;
  color: var(--mk-ink);
  line-height: 1.5;
}

/* moldura de janela — dá contexto de "isto é um app" sem encolher o app inteiro */
.mk-win{background:var(--mk-body);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 22px 50px rgba(0,50,25,.10);overflow:hidden;}
.mk-bar{background:var(--mk-surface);border-bottom:1px solid var(--mk-line);
  padding:11px 16px;display:flex;align-items:center;gap:9px;}
.mk-dots{display:flex;gap:5px;}
.mk-dots i{width:9px;height:9px;border-radius:50%;background:#dfe3e8;display:block;}
.mk-title{font-size:12.5px;font-weight:600;}
.mk-sub{font-size:11.5px;color:var(--mk-muted);}
.mk-pad{padding:20px;}

/* logo/marca do app */
.mk-mark{width:24px;height:24px;border-radius:6px;background:var(--mk-green);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex:none;}
.mk-av{width:30px;height:30px;border-radius:50%;background:var(--mk-gray);color:#626262;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex:none;}

/* etiquetas */
.mk-ch{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;
  padding:2px 8px;border-radius:999px;background:rgba(31,157,85,.12);color:var(--mk-wa);white-space:nowrap;}

/* ── a conversa que escalou ── */
.mk-card{background:var(--mk-surface);border-radius:var(--mk-r);box-shadow:var(--mk-shadow);overflow:hidden;}
.mk-card-h{padding:13px 16px;border-bottom:1px solid var(--mk-line);display:flex;align-items:center;gap:10px;}
.mk-why{padding:12px 16px;background:var(--mk-warn-bg);border-bottom:1px solid var(--mk-line);
  display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--mk-warn-tx);}
.mk-why b{color:#4a3800;}
.mk-msgs{padding:15px 16px;display:flex;flex-direction:column;gap:9px;}
.mk-m{max-width:86%;font-size:12.5px;padding:9px 12px;border-radius:var(--mk-r);}
.mk-m-cli{align-self:flex-start;background:var(--mk-gray);border-bottom-left-radius:3px;}
.mk-m-bot{align-self:flex-end;background:var(--mk-green-50);color:#0a3b25;border-bottom-right-radius:3px;}
.mk-who{display:flex;align-items:center;gap:5px;font-size:9.5px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;opacity:.6;margin-bottom:3px;}
.mk-acts{padding:13px 16px;border-top:1px solid var(--mk-line);display:flex;gap:9px;flex-wrap:wrap;}
.mk-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 16px;
  border-radius:var(--mk-r);font-size:13px;font-weight:600;white-space:nowrap;}
.mk-btn-1{background:var(--mk-green);color:#fff;}
.mk-btn-2{background:rgba(0,100,55,.09);color:var(--mk-green);}

/* ── celular ── */
.mk-phone{width:286px;flex:none;background:#0e1a14;border-radius:30px;padding:8px;
  box-shadow:0 22px 50px rgba(0,50,25,.16);}
.mk-phone-in{background:var(--mk-body);border-radius:23px;overflow:hidden;}
.mk-ph-status{height:26px;display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;font-size:10.5px;font-weight:600;}
.mk-ph-top{background:var(--mk-surface);border-bottom:1px solid var(--mk-line);padding:10px 13px;
  display:flex;align-items:center;gap:9px;}
.mk-ph-body{padding:12px;display:flex;flex-direction:column;gap:10px;}
.mk-ph-btn{display:flex;align-items:center;justify-content:center;gap:7px;height:44px;
  border-radius:var(--mk-r);font-size:13.5px;font-weight:600;}

/* ── números do dia ── */
.mk-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.mk-stat{background:var(--mk-surface);border-radius:var(--mk-r);box-shadow:var(--mk-shadow);
  padding:16px 18px;display:flex;flex-direction:column;gap:6px;}
.mk-stat-k{font-size:11.5px;color:var(--mk-muted);}
.mk-stat-v{font-size:30px;font-weight:600;letter-spacing:-.02em;line-height:1;}
.mk-stat-v small{font-size:13px;font-weight:500;color:var(--mk-muted);margin-left:4px;}
.mk-stat-n{font-size:11.5px;color:var(--mk-muted);}
.mk-bar-t{height:7px;border-radius:999px;background:var(--mk-gray);overflow:hidden;display:flex;margin-top:3px;}
.mk-bar-a{background:var(--mk-green);}
.mk-bar-b{background:#f9c123;}

/* ── base de conhecimento ── */
.mk-kb{display:grid;grid-template-columns:1fr 288px;gap:16px;align-items:start;}
.mk-panel{background:var(--mk-surface);border-radius:var(--mk-r);box-shadow:var(--mk-shadow);overflow:hidden;}
.mk-panel-h{padding:13px 16px;border-bottom:1px solid var(--mk-line);display:flex;align-items:center;gap:10px;}
.mk-panel-h h4{margin:0;font-size:13.5px;font-weight:600;}
.mk-panel-h span{font-size:11px;color:var(--mk-muted);margin-left:auto;}
.mk-src{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--mk-line);}
.mk-src:last-child{border-bottom:0;}
.mk-src-i{width:32px;height:32px;border-radius:7px;background:var(--mk-gray);color:#626262;
  display:flex;align-items:center;justify-content:center;font-size:16px;flex:none;}
.mk-src-b{min-width:0;flex:1;}
.mk-src-n{font-size:13px;font-weight:500;}
.mk-src-m{font-size:11.5px;color:var(--mk-muted);}
.mk-tag{font-size:10px;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap;flex:none;}
.mk-tag-ok{background:rgba(10,185,100,.12);color:#07894a;}
.mk-tag-ocr{background:rgba(65,150,250,.12);color:#4196fa;}
.mk-gap{padding:13px 16px;border-bottom:1px solid var(--mk-line);display:flex;flex-direction:column;gap:7px;}
.mk-gap:last-child{border-bottom:0;}
.mk-gap-t{font-size:12.5px;font-weight:500;}
.mk-gap-m{font-size:11px;color:var(--mk-muted);}

/* ── composições na página ── */
.mk-duo{display:grid;grid-template-columns:1fr 286px;gap:26px;align-items:center;margin-top:36px;}
.mk-note{margin:14px 0 0;font-size:13px;color:var(--soft);text-align:center;}
.mk-wrap{margin-top:36px;}

@media(max-width:960px){
  .mk-duo{grid-template-columns:1fr;justify-items:center;gap:30px;}
  .mk-kb{grid-template-columns:1fr;}
  .mk-stats{grid-template-columns:1fr;}
}
@media(max-width:640px){
  .mk-pad{padding:14px;}
  .mk-phone{width:250px;}
  .mk-m{max-width:92%;}
}