*{box-sizing:border-box;}
body{margin:0;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#eef1f5;color:#222;}
a{color:#2563eb;text-decoration:none;} a:hover{text-decoration:underline;}
code{background:#eee;padding:1px 5px;border-radius:4px;}

header{display:flex;align-items:center;gap:16px;background:#1f2937;color:#fff;padding:0 16px;height:52px;flex-wrap:wrap;}
header .brand{font-weight:700;font-size:16px;}
header nav{display:flex;gap:4px;flex:1;flex-wrap:wrap;}
header nav a{color:#cbd5e1;padding:7px 12px;border-radius:8px;font-size:14px;}
header nav a:hover{background:#374151;text-decoration:none;} header nav a.active{background:#2563eb;color:#fff;}
header .me{font-size:13px;color:#cbd5e1;} header .me a{color:#93c5fd;}
main{padding:16px;max-width:1200px;margin:0 auto;}

.card{background:#fff;border-radius:12px;padding:20px;box-shadow:0 1px 4px rgba(0,0,0,.06);max-width:720px;margin-bottom:16px;}
.card h2{margin:0 0 14px;font-size:18px;} hr{border:none;border-top:1px solid #eee;margin:16px 0;}
.row{display:flex;align-items:center;gap:10px;margin:9px 0;flex-wrap:wrap;}
.row label{width:180px;color:#555;font-size:14px;}
.row input:not([type=radio]),.row textarea,.row select{flex:1;min-width:160px;padding:8px 10px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;}
.row .num{flex:0 0 66px;min-width:56px;}
button{background:#2563eb;color:#fff;border:none;padding:9px 18px;border-radius:8px;font-size:14px;cursor:pointer;margin-top:6px;}
button:hover{background:#1d4ed8;}
.ok{background:#dcfce7;color:#166534;padding:8px 12px;border-radius:8px;margin-bottom:12px;}
.err{background:#fee2e2;color:#991b1b;padding:8px 12px;border-radius:8px;margin-bottom:12px;}
.muted{color:#888;font-size:13px;} .count{background:#eef2ff;color:#3730a3;border-radius:10px;padding:1px 9px;font-size:13px;}
textarea.code{width:100%;font-family:monospace;background:#0f172a;color:#7dd3fc;border-radius:8px;padding:12px;border:none;}

.authbg{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#2563eb,#7c3aed);}
.authbox{background:#fff;padding:32px;border-radius:16px;width:340px;display:flex;flex-direction:column;gap:12px;box-shadow:0 20px 60px rgba(0,0,0,.3);}
.authbox h1{margin:0;text-align:center;} .authbox .sub{margin:0 0 6px;text-align:center;color:#666;}
.authbox input{padding:11px;border:1px solid #d1d5db;border-radius:8px;font-size:15px;}
.authbox .switch{text-align:center;font-size:13px;color:#666;margin:4px 0 0;}

/* tables (leads/sites) */
.tbl{width:100%;border-collapse:collapse;font-size:14px;}
.tbl th{text-align:left;color:#666;font-weight:600;padding:8px 6px;border-bottom:2px solid #eef2f7;font-size:13px;}
.tbl td{padding:8px 6px;border-bottom:1px solid #f2f4f7;vertical-align:middle;}
.carrier{color:#fff;padding:2px 8px;border-radius:10px;font-size:12px;white-space:nowrap;}
.ads{background:#fef3c7;color:#92400e;border-radius:6px;padding:1px 6px;font-size:11px;}
.leads .pane-h{margin-bottom:12px;} .leads select{padding:8px;border:1px solid #d1d5db;border-radius:8px;}

/* inbox 3-pane */
#inbox{display:flex;gap:12px;height:calc(100vh - 84px);}
#conv-list{width:270px;background:#fff;border-radius:12px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.06);}
.pane-h{padding:8px;border-bottom:1px solid #eee;display:flex;gap:6px;align-items:center;}
#site-picker{flex:1;padding:7px;border:1px solid #d1d5db;border-radius:8px;}
#notif-btn{margin:0;padding:7px 10px;background:#f1f5f9;color:#333;}
#convs{overflow-y:auto;flex:1;}
.conv{padding:10px 12px;border-bottom:1px solid #f1f1f1;cursor:pointer;}
.conv:hover{background:#f8fafc;} .conv.active{background:#eff6ff;} .conv.unread .ct{font-weight:700;}
.conv .ct{font-size:14px;} .conv .cu{font-size:12px;color:#999;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.conv .cmeta{margin-top:3px;display:flex;gap:4px;flex-wrap:wrap;}
.conv .cmeta span{font-size:11px;color:#64748b;background:#f1f5f9;border-radius:6px;padding:0 5px;}
.badge{background:#ef4444;color:#fff;border-radius:10px;padding:0 6px;font-size:11px;}
.chip{color:#000;border-radius:8px;padding:0 6px;font-size:10px;}
.empty{padding:20px;color:#999;text-align:center;font-size:13px;}

#thread{flex:1;background:#fff;border-radius:12px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.06);}
#thread-head{padding:11px 14px;border-bottom:1px solid #eee;font-weight:600;font-size:14px;color:#374151;}
#thread-log{flex:1;overflow-y:auto;padding:14px;background:#f7f9fc;}
.m{margin:8px 0;max-width:72%;} .m .mb{padding:8px 12px;border-radius:12px;line-height:1.4;word-wrap:break-word;overflow-wrap:anywhere;}
.m .mt{font-size:11px;color:#aaa;margin-top:2px;} .mimg{max-width:200px;border-radius:8px;display:block;}
.m-visitor{margin-right:auto;} .m-visitor .mb{background:#fff;border:1px solid #e5e7eb;}
.m-admin{margin-left:auto;text-align:right;} .m-admin .mb{background:#2563eb;color:#fff;}
.m-auto .mb{background:#fef9c3;border:1px solid #fde68a;}
#quickbar{border-top:1px solid #eee;padding:8px;max-height:220px;overflow-y:auto;background:#fafafa;}
.qrrow{display:flex;gap:6px;margin-bottom:6px;} .qrrow input{flex:1;padding:7px;border:1px solid #d1d5db;border-radius:6px;} .qrrow button{margin:0;padding:7px 10px;}
#reply{display:flex;border-top:1px solid #eee;align-items:center;gap:2px;padding:0 4px;}
#reply input{flex:1;border:none;padding:13px 8px;font-size:14px;outline:none;}
#reply button{margin:0;} #qr-toggle,#img-toggle{background:#f1f5f9;color:#333;padding:8px 10px;}

#detail{width:280px;background:#fff;border-radius:12px;padding:14px;overflow-y:auto;box-shadow:0 1px 4px rgba(0,0,0,.06);}
.dh{font-weight:700;font-size:13px;color:#374151;margin:12px 0 6px;text-transform:uppercase;letter-spacing:.03em;}
.dh:first-child{margin-top:0;}
.di{display:flex;justify-content:space-between;gap:8px;padding:5px 0;border-bottom:1px solid #f4f4f5;font-size:13px;}
.di span{color:#888;} .di b,.di a{text-align:right;word-break:break-word;}
.tags{display:flex;flex-wrap:wrap;gap:5px;}
.tagbtn{margin:0;background:#f1f5f9;color:#555;border:1px solid #e5e7eb;border-radius:14px;padding:4px 9px;font-size:12px;}
.tagbtn.on{border-color:transparent;font-weight:600;}
.dacts{margin-top:16px;} #del-conv{background:#fee2e2;color:#b91c1c;width:100%;}

@media(max-width:900px){#inbox{flex-direction:column;height:auto;}#conv-list,#detail{width:100%;}#thread{min-height:60vh;}}