*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#0e1621;color:#e6edf3}
.topbar{background:#17212b;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid #22303c}
.brand-row{display:flex;align-items:center;gap:16px;min-width:0}
.topbar h1{font-size:16px;font-weight:600;color:#fff}
.topbar .user{font-size:13px;color:#8fa5b8;display:flex;gap:14px;align-items:center}
.quick-start{display:flex;align-items:center;gap:8px;min-width:0}
.quick-start input{width:150px;margin:0;padding:8px 10px;font-size:13px}
.quick-start .btn{padding:8px 12px;white-space:nowrap}
.quick-start span{color:#ffb86b;font-size:12px;white-space:nowrap}
.btn{background:#2b5278;color:#fff;border:none;padding:8px 14px;border-radius:6px;cursor:pointer;font-size:13px;transition:.15s}
.btn:hover{background:#3a6394}
.btn.green{background:#198754}.btn.green:hover{background:#1f9d63}
.btn.red{background:#a13d3d}.btn.red:hover{background:#c04a4a}
.btn.sm{padding:4px 9px;font-size:12px}
.wrap{max-width:1200px;margin:0 auto;padding:20px;min-height:0}
.tabs{display:flex;gap:6px;margin-bottom:18px;border-bottom:1px solid #22303c}
.tab{padding:10px 18px;cursor:pointer;color:#8fa5b8;font-size:14px;border-bottom:2px solid transparent}
.tab.active{color:#fff;border-bottom-color:#2b5278}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.card{background:#17212b;border:1px solid #22303c;border-radius:10px;padding:16px;position:relative;transition:.15s}
.card:hover{border-color:#2b5278}
.card.blink{animation:blink 1s infinite}
@keyframes blink{0%,100%{border-color:#198754;box-shadow:0 0 0 0 rgba(25,135,84,.4)}50%{border-color:#25d366;box-shadow:0 0 0 4px rgba(25,135,84,.15)}}
.card h3{font-size:15px;margin-bottom:4px;color:#fff}
.card .phone{font-size:12px;color:#8fa5b8;margin-bottom:10px}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}
.dot.open{background:#25d366;box-shadow:0 0 6px #25d366}
.dot.close{background:#6b7d8d}
.dot.connecting{background:#e0a800;animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.4}}
.status-txt{font-size:12px;text-transform:capitalize}
.card-actions{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.card .owner{font-size:11px;color:#5f7party;margin-top:8px;color:#7a90a4}
.login-box{max-width:360px;margin:12vh auto;background:#17212b;padding:32px;border-radius:12px;border:1px solid #22303c}
.login-box h2{text-align:center;margin-bottom:6px;color:#fff}
.login-box p{text-align:center;color:#8fa5b8;font-size:13px;margin-bottom:22px}
input,select{width:100%;padding:11px;background:#0e1621;border:1px solid #22303c;border-radius:7px;color:#e6edf3;font-size:14px;margin-bottom:12px}
input:focus,select:focus{outline:none;border-color:#2b5278}
label{font-size:12px;color:#8fa5b8;display:block;margin-bottom:4px}
.err{color:#ff6b6b;font-size:13px;text-align:center;min-height:18px;margin-bottom:8px}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:10px;border-bottom:1px solid #22303c}
th{color:#8fa5b8;font-weight:500}
.modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:50;align-items:center;justify-content:center}
.modal-bg.show{display:flex}
.modal{background:#17212b;padding:26px;border-radius:12px;max-width:420px;width:90%;border:1px solid #22303c}
.modal h3{margin-bottom:16px;color:#fff}
.qr-img{display:block;margin:14px auto;background:#fff;padding:10px;border-radius:8px;max-width:260px}
.tag{display:inline-block;font-size:11px;padding:2px 7px;border-radius:10px;background:#2b5278;color:#fff;margin:2px}
.inbox{display:grid;grid-template-columns:300px 1fr;gap:0;height:calc(100dvh - 130px);max-height:calc(100dvh - 130px);min-height:0;border:1px solid #22303c;border-radius:10px;overflow:hidden}
.inbox>div{min-height:0;overflow:hidden}
.conv-list{background:#17212b;overflow-y:auto;border-right:1px solid #22303c;min-height:0}
.conv{padding:12px 14px;cursor:pointer;border-bottom:1px solid #1c2836}
.conv:hover{background:#1c2836}.conv.sel{background:#2b5278}
.conv .n{font-size:14px;color:#fff}.conv .p{font-size:12px;color:#8fa5b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat{display:flex;flex-direction:column;background:#0e1621;min-height:0;overflow:hidden}
.msgs{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:16px;display:flex;flex-direction:column;gap:8px}
.msg{max-width:65%;padding:8px 12px;border-radius:10px;font-size:14px;line-height:1.4;overflow-wrap:anywhere;word-break:break-word}
.msg.in{background:#17212b;align-self:flex-start}
.msg.out{background:#2b5278;align-self:flex-end}
.send-bar{display:flex;gap:8px;padding:12px;border-top:1px solid #22303c;flex-shrink:0}
.send-bar input{margin:0;flex:1;min-width:0}
.send-bar .btn{flex-shrink:0;white-space:nowrap}
.audio-status{min-height:22px;padding:0 12px 8px;color:#8fa5b8;font-size:12px;text-align:right;background:#0e1621;flex-shrink:0}

/* ===== v2: avatar, nao-lido, horario, busca ===== */
.conv{display:flex;align-items:center;gap:10px}
.conv-av{width:38px;height:38px;border-radius:50%;background:#2b5278;color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;flex-shrink:0;object-fit:cover;overflow:hidden}
img.conv-av{background:#0e1621}
.badge-unread{background:#25d366;color:#062;font-size:11px;font-weight:700;min-width:20px;height:20px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 6px;flex-shrink:0}
.msg .hora{font-size:10px;color:rgba(255,255,255,.5);margin-top:3px;text-align:right}
.msg.in .hora{color:#7a90a4}
.msg .rem{font-size:11px;color:#25d366;margin-bottom:2px;font-weight:600}
.conv-tools{display:flex;gap:8px;padding:10px;border-bottom:1px solid #22303c;background:#17212b}
.conv-tools input{margin:0;flex:1;padding:8px 10px;font-size:13px}
.filtro-btn{background:#0e1621;border:1px solid #22303c;color:#8fa5b8;padding:8px 12px;border-radius:7px;cursor:pointer;font-size:12px;white-space:nowrap}
.filtro-btn.on{background:#198754;color:#fff;border-color:#198754}
.chat-header{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid #22303c;background:#17212b;min-height:56px;flex-shrink:0}
.chat-header .conv-av{width:34px;height:34px;font-size:14px}
.chat-header .nome{font-size:14px;color:#fff;font-weight:600}
.chat-header .sub{font-size:12px;color:#8fa5b8}

@supports not (height: 100dvh){
  .inbox{height:calc(100vh - 130px);max-height:calc(100vh - 130px)}
}

@media (max-width: 760px){
  .topbar{padding:10px 12px;gap:10px;align-items:flex-start}
  .brand-row{flex-direction:column;align-items:flex-start;gap:8px}
  .topbar h1{font-size:14px}
  .topbar .user{gap:8px}
  .quick-start input{width:132px}
  .quick-start .btn{padding:8px 10px}
  .wrap{padding:10px}
  .inbox{grid-template-columns:42% 58%;height:calc(100dvh - 92px);max-height:calc(100dvh - 92px)}
  .msg{max-width:88%}
  .send-bar{padding:8px;gap:6px}
  .btn{padding:8px 10px}
}