/* ===================================================================
   Demo do Agente — Orbit Lab
   Simulador de WhatsApp + painel de bastidores, montado na hora para o
   negócio que o cliente descreveu. Usado por monte.html e demo.html.
   Variáveis (--violet, --display…) vêm da página que carrega este CSS.
   =================================================================== */

/* ===== container ===== */
.dm-overlay{display:none;position:fixed;inset:0;z-index:210;background:rgba(4,3,10,.94);backdrop-filter:blur(10px);overflow-y:auto}
.dm-overlay.on{display:block}
.dm-overlay.inline{display:block;position:static;background:transparent;backdrop-filter:none;overflow:visible}
.dm-bar{position:sticky;top:0;z-index:6;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  padding:14px 22px;background:rgba(6,5,12,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.dm-overlay.inline .dm-bar{display:none}
.dm-bar .t{font-family:var(--display);font-weight:700;font-size:16px}
.dm-bar .t small{display:block;font-family:var(--sans);font-weight:400;font-size:12px;color:var(--muted)}
.dm-stage{max-width:1080px;margin:0 auto;padding:26px 18px 40px;display:grid;gap:22px;grid-template-columns:1fr;align-items:start}
@media(min-width:980px){.dm-stage{grid-template-columns:390px 1fr}}

/* ===== celular ===== */
.dm-phone{width:390px;max-width:100%;height:680px;background:#000;border-radius:40px;padding:11px;position:relative;
  box-shadow:0 30px 80px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.08),0 0 60px rgba(124,58,237,.25);margin:0 auto}
.dm-notch{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:140px;height:24px;background:#000;border-radius:0 0 16px 16px;z-index:3}
.dm-screen{height:100%;border-radius:30px;overflow:hidden;display:flex;flex-direction:column;background:#ECE5DD;position:relative}
.dm-head{background:#075E54;color:#fff;padding:14px 12px 11px;display:flex;align-items:center;gap:10px;flex:0 0 auto}
.dm-head .av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#A855F7,#6D28D9);display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:14px;color:#fff;flex:0 0 auto}
.dm-head .who{flex:1;min-width:0}
.dm-head .who .n{font-weight:600;font-size:15.5px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-head .who .s{font-size:12px;opacity:.85;height:15px}
.dm-head .ic{font-size:16px;opacity:.9}
.dm-chat{flex:1;overflow-y:auto;padding:12px 10px 8px;background:#ECE5DD;
  background-image:radial-gradient(rgba(0,0,0,.035) 1px,transparent 1px);background-size:18px 18px;scroll-behavior:smooth}
.dm-chip{align-self:center;background:#FDF4C9;color:#54656f;font-size:11px;line-height:1.4;text-align:center;padding:7px 12px;border-radius:8px;margin:0 14px 12px;display:block}
.dm-row{display:flex;margin:3px 2px;animation:dmpop .18s ease}
@keyframes dmpop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.dm-row.in{justify-content:flex-start}
.dm-row.out{justify-content:flex-end}
.dm-bub{max-width:82%;padding:7px 9px 7px;border-radius:9px;font-size:14.4px;line-height:1.42;color:#111b21;white-space:pre-wrap;word-wrap:break-word;
  box-shadow:0 1px 1px rgba(0,0,0,.13)}
.in .dm-bub{background:#fff;border-top-left-radius:2px}
.out .dm-bub{background:#DCF8C6;border-top-right-radius:2px}
.dm-bub .h{display:block;font-size:10.5px;color:#667781;text-align:right;margin-top:2px}
.out .dm-bub .h::after{content:" ✓✓";color:#53bdeb}
.dm-typing .dm-bub{display:inline-flex;gap:4px;padding:11px 12px}
.dm-typing i{width:7px;height:7px;border-radius:50%;background:#9aa6ad;animation:dmblink 1.2s infinite;display:block}
.dm-typing i:nth-child(2){animation-delay:.2s}.dm-typing i:nth-child(3){animation-delay:.4s}
@keyframes dmblink{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.dm-quick{display:flex;flex-wrap:wrap;gap:6px;padding:6px 10px 2px;justify-content:flex-end}
.dm-quick button{background:#fff;color:#075E54;border:1px solid #cfe9e3;border-radius:16px;padding:7px 12px;font-size:12.5px;font-weight:600;cursor:pointer;
  font-family:var(--sans);box-shadow:0 1px 1px rgba(0,0,0,.1);transition:.12s}
.dm-quick button:hover{background:#e7f7f2}
.dm-foot{display:flex;align-items:center;gap:8px;padding:8px;flex:0 0 auto}
.dm-inp{flex:1;display:flex;align-items:center;background:#fff;border-radius:24px;padding:9px 14px;box-shadow:0 1px 1px rgba(0,0,0,.1)}
.dm-inp input{flex:1;border:0;outline:0;font-size:15px;background:transparent;color:#111b21;font-family:var(--sans)}
.dm-send{width:44px;height:44px;border-radius:50%;background:#075E54;color:#fff;border:0;font-size:18px;cursor:pointer;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;transition:.12s}
.dm-send:active{transform:scale(.92)}
.dm-send:disabled{opacity:.5;cursor:not-allowed}

/* ===== bastidores ===== */
.dm-side{display:flex;flex-direction:column;gap:14px}
.dm-side .hd h3{font-size:clamp(20px,3vw,26px)}
.dm-side .hd p{color:var(--ink-2);font-size:14.5px;margin-top:6px}
.dm-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.dm-kpi{background:var(--glass);border:1px solid var(--line);border-radius:14px;padding:12px 13px}
.dm-kpi .k{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.dm-kpi .v{font-family:var(--display);font-weight:700;font-size:20px;margin-top:2px}
.dm-card{background:var(--glass);border:1px solid var(--line);border-radius:16px;padding:16px 17px}
.dm-card .ttl{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--violet-2);font-weight:700;margin-bottom:10px;display:flex;gap:7px;align-items:center}
.dm-empty{font-size:13.5px;color:var(--muted);font-style:italic}
.dm-item{border-left:3px solid #34D399;padding:7px 0 7px 11px;margin-bottom:9px;font-size:13.5px;line-height:1.5;color:var(--ink-2);animation:dmpop .3s ease}
.dm-item.ag{border-left-color:#60A5FA}
.dm-item.tr{border-left-color:#FBBF24}
.dm-item b{color:#fff}
.dm-item .tg{display:inline-block;font-size:10.5px;font-weight:700;border-radius:6px;padding:2px 7px;margin-left:5px;background:rgba(52,211,153,.15);color:#6EE7B7}
.dm-item.ag .tg{background:rgba(96,165,250,.15);color:#93C5FD}
.dm-item.tr .tg{background:rgba(251,191,36,.15);color:#FCD34D}
.dm-know{display:flex;flex-wrap:wrap;gap:6px}
.dm-know span{font-size:12px;color:var(--ink-2);background:var(--glass-2);border:1px solid var(--line);border-radius:8px;padding:5px 9px}
/* a promessa da versão definitiva: tem que saltar aos olhos, não ser rodapé */
.dm-real{margin-top:14px;background:linear-gradient(135deg,rgba(124,58,237,.22),rgba(99,102,241,.12));
  border:1px solid rgba(167,139,250,.45);border-left:4px solid var(--violet-l);border-radius:14px;padding:14px 16px}
.dm-real .t{font-family:var(--display);font-weight:700;font-size:15px;color:#fff;margin-bottom:6px}
.dm-real p{font-size:14px;line-height:1.6;color:var(--ink-2);margin:0}
.dm-real p b{color:#fff}

.dm-cta{background:linear-gradient(160deg,rgba(124,58,237,.2),var(--glass));border:1px solid rgba(167,139,250,.35);border-radius:18px;padding:18px}
.dm-cta h4{font-family:var(--display);font-size:18px;margin-bottom:5px}
.dm-cta p{color:var(--ink-2);font-size:14px;margin-bottom:14px}
.dm-fine{font-size:12px;color:var(--muted);line-height:1.5}

/* carregando a persona */
.dm-boot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:420px;text-align:center;padding:30px}
.dm-boot .sp{width:54px;height:54px;position:relative}
.dm-boot .sp i{position:absolute;inset:0;border:2px solid transparent;border-top-color:var(--violet-l);border-radius:50%;animation:dmspin 1s linear infinite;display:block}
.dm-boot .sp i:nth-child(2){inset:9px;border-top-color:var(--violet-2);animation-duration:1.5s}
@keyframes dmspin{to{transform:rotate(360deg)}}
.dm-boot p{color:var(--ink-2);font-size:15px}

@media print{ .dm-overlay{display:none !important} }