/* LudoChatbot - painel
   Paleta e tipografia conforme o Manual de Identidade Visual v1.0
   Navy #09142D | Blue #3D5AFE | Cyan #18C8FF | Mint #38E6B0 | Ice #F4F7FC */
:root{
  --navy:#09142D; --blue:#3D5AFE; --cyan:#18C8FF; --mint:#38E6B0; --ice:#F4F7FC;

  --bg:#09142D; --bg2:#0E1C3C; --bg3:#16274F; --line:#1F3260;
  --txt:#F4F7FC; --mut:#93A4C4; --acc:#38E6B0; --acc2:#18C8FF;
  --warn:#f59e0b; --err:#ef4444; --r:10px;
  --ff:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,Arial,Helvetica,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--txt);font-family:var(--ff);font-size:14px;line-height:1.5}
a{color:var(--acc2);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0 0 12px;font-weight:650;letter-spacing:-.01em}
h1{font-size:22px} h2{font-size:17px} h3{font-size:15px}
.muted{color:var(--mut)}
.small{font-size:12px}
code,kbd{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;background:var(--bg3);padding:2px 6px;border-radius:6px}

/* layout */
.app{display:flex;min-height:100vh}
.side{width:230px;flex:0 0 230px;background:var(--bg2);border-right:1px solid var(--line);
      display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{padding:19px 18px;display:flex;align-items:center;gap:11px;
       border-bottom:1px solid var(--line);text-decoration:none}
.brand:hover{text-decoration:none}
.brand img{width:34px;height:34px;flex:0 0 34px;display:block}
.brand .nome{font-size:18px;line-height:1;letter-spacing:-.025em;color:var(--txt)}
.brand .nome b{font-weight:800}
.brand .nome span{font-weight:400}
.nav{padding:6px;display:flex;flex-direction:column;gap:2px;flex:1;overflow:auto}
.nav a{display:flex;gap:10px;align-items:center;padding:9px 12px;border-radius:8px;color:var(--mut);font-weight:500}
.nav a:hover{background:var(--bg3);color:var(--txt);text-decoration:none}
.nav a.on{background:var(--bg3);color:var(--txt);box-shadow:inset 2px 0 0 var(--acc)}
.nav .sec{padding:14px 12px 6px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#5f719a}
.side .foot{padding:12px;border-top:1px solid var(--line);font-size:12px;color:var(--mut)}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{height:56px;border-bottom:1px solid var(--line);display:flex;align-items:center;
     justify-content:space-between;padding:0 20px;background:var(--bg2);position:sticky;top:0;z-index:20}
.wrap{padding:22px;max-width:1280px;width:100%}

/* componentes */
.card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:18px;margin-bottom:16px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g2,.g3,.g4{grid-template-columns:1fr}.side{display:none}}
.kpi{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.kpi b{display:block;font-size:26px;font-weight:700;letter-spacing:-.02em}
.kpi span{color:var(--mut);font-size:12px;text-transform:uppercase;letter-spacing:.05em}

.btn{display:inline-flex;align-items:center;gap:7px;background:var(--mint);color:var(--navy);border:0;
     padding:9px 15px;border-radius:8px;font-weight:650;cursor:pointer;font-size:13px;font-family:var(--ff)}
.btn:hover{filter:brightness(1.08);text-decoration:none}
.btn.sec{background:var(--bg3);color:var(--txt);border:1px solid var(--line)}
.btn.dan{background:#3a1d1f;color:#ff9a9a;border:1px solid #572629}
.btn.sm{padding:6px 10px;font-size:12px}
.btn[disabled]{opacity:.5;cursor:not-allowed}

label{display:block;font-size:12px;color:var(--mut);margin:12px 0 5px;font-weight:600}
input,select,textarea{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--txt);
  padding:9px 11px;border-radius:8px;font-family:var(--ff);font-size:13px}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(56,230,176,.32);border-color:var(--mint)}
textarea{min-height:80px;resize:vertical}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

table{width:100%;border-collapse:collapse}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);font-size:13px}
th{color:var(--mut);font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
tr:hover td{background:rgba(255,255,255,.02)}

.tag{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600;background:var(--bg3);color:var(--mut)}
.tag.ok{background:rgba(56,230,176,.14);color:var(--mint)}
.tag.err{background:rgba(239,68,68,.12);color:#f87171}
.tag.warn{background:rgba(245,158,11,.12);color:var(--warn)}
.flash{padding:11px 14px;border-radius:8px;margin-bottom:14px;font-weight:500}
.flash.ok{background:rgba(37,211,102,.12);color:var(--acc);border:1px solid rgba(37,211,102,.3)}
.flash.err{background:rgba(239,68,68,.12);color:#f87171;border:1px solid rgba(239,68,68,.3)}
.empty{padding:44px;text-align:center;color:var(--mut)}

/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:20px;
  background:radial-gradient(760px 460px at 50% -8%,rgba(24,200,255,.16),transparent),
             radial-gradient(620px 420px at 50% 108%,rgba(56,230,176,.10),transparent),var(--navy)}
.login .card{width:100%;max-width:390px;padding:32px 30px}
.login .marca{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:18px}
.login .marca .nome{font-size:26px;letter-spacing:-.03em;line-height:1;text-align:center}
.login .marca .nome b{font-weight:800}
.login .marca .nome span{font-weight:400}
.login .marca .tag{display:block;font-size:9px;font-weight:700;letter-spacing:.16em;
                   text-transform:uppercase;color:var(--mint);margin-top:7px}
.login .card .btn{margin-top:4px}
.login .rodape{margin-top:18px;text-align:center;font-size:11px;color:var(--mut)}

/* inbox */
.inbox{display:grid;grid-template-columns:290px 1fr 260px;height:calc(100vh - 56px)}
@media(max-width:1100px){.inbox{grid-template-columns:250px 1fr}.inbox .info{display:none}}
.convs{border-right:1px solid var(--line);overflow:auto;background:var(--bg2)}
.conv{padding:12px 14px;border-bottom:1px solid var(--line);cursor:pointer}
.conv:hover{background:var(--bg3)}
.conv.on{background:var(--bg3);box-shadow:inset 3px 0 0 var(--acc)}
.conv .n{font-weight:600;display:flex;justify-content:space-between;gap:8px}
.conv .p{color:var(--mut);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat{display:flex;flex-direction:column;min-width:0}
.msgs{flex:1;overflow:auto;padding:18px;display:flex;flex-direction:column;gap:8px;
      background:linear-gradient(180deg,var(--bg),#0c0e13)}
.msg{max-width:66%;padding:9px 12px;border-radius:12px;white-space:pre-wrap;word-break:break-word;font-size:13.5px}
.msg.in{background:var(--bg3);align-self:flex-start;border-bottom-left-radius:3px}
.msg.out{background:#0f4d2a;align-self:flex-end;border-bottom-right-radius:3px}
.msg .t{display:block;font-size:10px;color:rgba(255,255,255,.45);margin-top:4px}
.composer{border-top:1px solid var(--line);padding:12px;display:flex;gap:9px;background:var(--bg2)}
.info{border-left:1px solid var(--line);padding:16px;overflow:auto;background:var(--bg2)}

/* ---------- etiquetas coloridas ----------
   A cor sai do proprio nome da etiqueta (tag_color no PHP, tagColor no JS),
   entao a mesma palavra tem sempre a mesma cor em todas as telas. */
.tag.c0{background:rgba(14,165,233,.14);color:#38bdf8}
.tag.c1{background:rgba(37,211,102,.14);color:#4ade80}
.tag.c2{background:rgba(168,85,247,.14);color:#c084fc}
.tag.c3{background:rgba(245,158,11,.14);color:#fbbf24}
.tag.c4{background:rgba(236,72,153,.14);color:#f472b6}
.tag.c5{background:rgba(6,182,212,.14);color:#22d3ee}
.tag.c6{background:rgba(132,204,22,.14);color:#a3e635}
.tag.c7{background:rgba(239,68,68,.14);color:#f87171}
.tag.c8{background:rgba(99,102,241,.14);color:#818cf8}
.tag.c9{background:rgba(20,184,166,.14);color:#2dd4bf}

/* ---------- anexos na conversa ---------- */
.att-img{max-width:260px;max-height:280px;border-radius:9px;display:block;margin-top:6px;cursor:zoom-in}
.att-media{max-width:280px;margin-top:6px;display:block}
.att{display:inline-block;margin-top:6px;word-break:break-all}

/* ---------- mensagens rapidas ---------- */
.btn.ic{padding:0;width:38px;min-width:38px;height:38px;font-size:16px;line-height:1;
        display:inline-flex;align-items:center;justify-content:center}
.quickbox{max-height:220px;overflow:auto;border-top:1px solid var(--line);background:var(--bg2)}
.quickbox .qr{padding:9px 13px;border-bottom:1px solid var(--line);cursor:pointer;
              display:flex;gap:9px;align-items:center}
.quickbox .qr:hover{background:var(--bg3)}
.quickbox .qr strong{font-weight:600;white-space:nowrap}
.quickbox .qr .small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* passo a passo numerado */
.passos{margin:10px 0 16px;padding-left:0;list-style:none;counter-reset:p}
.passos li{counter-increment:p;position:relative;padding:5px 0 5px 30px;line-height:1.6}
.passos li::before{content:counter(p);position:absolute;left:0;top:5px;width:20px;height:20px;
  border-radius:50%;background:var(--bg3);border:1px solid var(--line);color:var(--mint);
  font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.agora{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:10px;
  padding:9px 12px;background:var(--bg3);border:1px solid var(--line);border-radius:8px}