:root{
  --ink:#10231e; --muted:#5d6f69; --soft:#8a9a95; --line:#e1e8e4; --bg:#f3f6f4; --card:#fff;
  --brand:#14a44d; --brand-dark:#0d7a39; --brand-soft:#e6f6ec;
  --blue:#2563eb; --blue-soft:#e8f0ff; --amber:#b45309; --amber-soft:#fff4e0; --red:#c2271d; --red-soft:#fdecea; --gray-soft:#eef2f0;
  --side-a:#05231c; --side-b:#0a3f33; --radius:12px; --shadow:0 1px 2px rgba(16,35,30,.05),0 6px 22px rgba(16,35,30,.06);
}
*{box-sizing:border-box} html,body{margin:0}
body{font:14.5px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--ink);background:var(--bg)}
a{color:var(--brand-dark);text-decoration:none} a:hover{text-decoration:underline}
h1,h2,h3{margin:0;letter-spacing:-.2px} h1{font-size:22px} h2{font-size:17px} h3{font-size:15px}
.muted{color:var(--muted)} .soft{color:var(--soft)} .small{font-size:12.5px} .right{text-align:right} .center{text-align:center} .nowrap{white-space:nowrap}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px}
.mt{margin-top:18px} .mb{margin-bottom:18px} .mt0{margin-top:0} .flex{display:flex} .between{justify-content:space-between} .gap{gap:12px} .wrap{flex-wrap:wrap} .items-center{align-items:center}
hr{border:0;border-top:1px solid var(--line);margin:18px 0}

/* shell */
.shell{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.sidebar{background:linear-gradient(175deg,var(--side-a),var(--side-b));color:#cfe8dd;padding:20px 14px;position:sticky;top:0;height:100vh;overflow-x:hidden;overflow-y:auto;display:flex;flex-direction:column;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.sidebar::-webkit-scrollbar{width:5px}.sidebar::-webkit-scrollbar-track{background:transparent}.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:99px}.sidebar::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.32)}
.sb-brand{display:flex;align-items:center;gap:10px;padding:4px 8px 18px;color:#fff;font-weight:700;font-size:16px}
.sb-brand .logo.has-img{background:#fff;box-shadow:none;padding:3px;overflow:hidden} .logo img{width:100%;height:100%;object-fit:contain;display:block;border-radius:6px}
.sb-brand .logo{width:34px;height:34px;border-radius:10px;background:var(--brand);display:grid;place-items:center;font-weight:800;box-shadow:0 4px 14px rgba(20,164,77,.5)}
.sb-group{font-size:11px;text-transform:uppercase;letter-spacing:.9px;color:#7ea899;margin:16px 10px 6px}
.sb-link{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;color:#cfe8dd;margin-bottom:2px;font-weight:500}
.sb-link:hover{background:rgba(255,255,255,.07);text-decoration:none;color:#fff}
.sb-link.active{background:rgba(20,164,77,.22);color:#fff;box-shadow:inset 3px 0 0 var(--brand)}
.sb-link svg{flex:none;opacity:.9}
.sb-badge{margin-left:auto;background:#f59e0b;color:#2b1a00;border-radius:99px;font-size:11px;padding:0 7px;font-weight:700}
.sb-foot{margin-top:auto;padding:14px 10px 0;font-size:12px;color:#7ea899}
.sb-foot a{color:#b7dccc}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:14px;padding:12px 28px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.topbar .burger{display:none;background:none;border:0;padding:6px;cursor:pointer;color:var(--ink)}
.topbar .grow{flex:1}
.userbox{position:relative}
.userbox summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:5px 8px;border-radius:10px}
.userbox summary::-webkit-details-marker{display:none}
.userbox summary:hover{background:var(--gray-soft)}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--brand-soft);color:var(--brand-dark);display:grid;place-items:center;font-weight:700}
.menu{position:absolute;right:0;top:calc(100% + 6px);min-width:210px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;z-index:30}
.menu a,.menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;border:0;background:none;border-radius:8px;color:var(--ink);font:inherit;cursor:pointer;text-align:left}
.menu a:hover,.menu button:hover{background:var(--gray-soft);text-decoration:none}
.content{padding:26px 32px 40px;max-width:1760px;width:100%;margin:0 auto}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:22px;flex-wrap:wrap}
.page-head p{margin:4px 0 0;color:var(--muted)}
.imp-bar{background:#fff4e0;border-bottom:1px solid #f5d9a6;color:#7a3d03;padding:8px 28px;display:flex;gap:12px;align-items:center;justify-content:space-between}
.foot{padding:0 28px 24px;color:var(--soft);font-size:12.5px}

/* cards & tiles */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.card.flush{padding:0;overflow:hidden}
.card.flush .card-h{padding:16px 20px;margin:0;border-bottom:1px solid var(--line)}
.grid{display:grid;gap:18px} .cols-2{grid-template-columns:repeat(2,1fr)} .cols-3{grid-template-columns:repeat(3,1fr)} .cols-4{grid-template-columns:repeat(4,1fr)}
.split-12{grid-template-columns:1fr 2fr}.split-21{grid-template-columns:2fr 1fr}.split-side{grid-template-columns:minmax(260px,1fr) 2fr;align-items:start}
.stat{display:flex;gap:14px;align-items:center}
.stat .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand-dark);flex:none}
.stat .ic.blue{background:var(--blue-soft);color:var(--blue)} .stat .ic.amber{background:var(--amber-soft);color:var(--amber)} .stat .ic.red{background:var(--red-soft);color:var(--red)}
.stat b{display:block;font-size:22px;line-height:1.15} .stat span{color:var(--muted);font-size:13px}

/* tables */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:600;text-align:left;padding:11px 16px;background:#f8faf9;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:#fafcfb}
td .sub{display:block;color:var(--muted);font-size:12.5px}
.empty{padding:36px 20px;text-align:center;color:var(--muted)}

/* badges */
.badge{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:600;background:var(--gray-soft);color:var(--muted);white-space:nowrap}
.badge.green{background:var(--brand-soft);color:var(--brand-dark)} .badge.red{background:var(--red-soft);color:var(--red)}
.badge.amber{background:var(--amber-soft);color:var(--amber)} .badge.blue{background:var(--blue-soft);color:var(--blue)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:9px;border:1px solid transparent;background:var(--brand);color:#fff;font:inherit;font-weight:600;cursor:pointer;line-height:1.2;transition:.15s}
.btn:hover{background:var(--brand-dark);text-decoration:none;color:#fff}
.btn.secondary{background:#fff;color:var(--ink);border-color:#cfd9d4} .btn.secondary:hover{background:#f4f8f6;color:var(--ink)}
.btn.danger{background:var(--red)} .btn.danger:hover{background:#9c1f17}
.btn.warn{background:#d97706} .btn.warn:hover{background:#b45309}
.btn.sm{padding:5px 11px;font-size:13px;border-radius:8px} .btn.block{width:100%;justify-content:center}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* forms */
.field{margin-bottom:16px} .field label{display:block;font-weight:600;margin-bottom:5px}
.field .hint{color:var(--muted);font-size:12.5px;margin-top:4px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=url],select,textarea{width:100%;padding:9px 12px;border:1px solid #cfd9d4;border-radius:9px;font:inherit;color:var(--ink);background:#fff}
textarea{min-height:90px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(20,164,77,.16)}
.err{color:var(--red);font-size:12.5px;margin-top:4px}
.check{display:flex;gap:9px;align-items:flex-start;margin:6px 0} .check input{margin-top:4px;accent-color:var(--brand);width:16px;height:16px}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 18px}
.form-grid .full{grid-column:1/-1}
.form-actions{display:flex;gap:10px;margin-top:8px;padding-top:16px;border-top:1px solid var(--line)}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:center}
.filters input,.filters select{width:auto;min-width:150px}

/* alerts */
.alert{padding:11px 14px;border-radius:10px;margin-bottom:16px;border:1px solid}
.alert.ok{background:var(--brand-soft);border-color:#bfe6cd;color:#0d5a2b} .alert.bad{background:var(--red-soft);border-color:#f4c7c3;color:#8f1d15}
.alert.warn{background:var(--amber-soft);border-color:#f5d9a6;color:#7a3d03} .alert.info{background:var(--blue-soft);border-color:#c5d8ff;color:#1c3f94}

/* definition lists / kv */
.kv{display:grid;grid-template-columns:150px 1fr;gap:8px 14px;margin:0}
.kv dt{color:var(--muted)} .kv dd{margin:0;word-break:break-word}

/* plans */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.plan{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;display:flex;flex-direction:column;position:relative;box-shadow:var(--shadow)}
.plan.featured{border-color:var(--brand);box-shadow:0 10px 36px rgba(20,164,77,.16)}
.plan .ribbon{position:absolute;top:-11px;left:24px;background:var(--brand);color:#fff;font-size:11.5px;font-weight:700;padding:3px 11px;border-radius:99px}
.plan .price{font-size:34px;font-weight:800;letter-spacing:-1px;margin:10px 0 2px} .plan .price small{font-size:14px;font-weight:500;color:var(--muted);letter-spacing:0}
.plan ul{list-style:none;padding:0;margin:16px 0 22px;flex:1} .plan li{padding:5px 0;display:flex;gap:9px;align-items:flex-start}
.plan li .tick{color:var(--brand);font-weight:800} .plan li.off{color:var(--soft);text-decoration:line-through} .plan li.off .tick{color:var(--soft)}
.progress{height:8px;background:var(--gray-soft);border-radius:99px;overflow:hidden} .progress>i{display:block;height:100%;background:var(--brand);border-radius:99px}

/* auth + landing */
.auth{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.auth-art{background:linear-gradient(160deg,var(--side-a),var(--auth-b,#0d5a47));color:#e8f5ef;padding:56px;display:flex;flex-direction:column;justify-content:center}
.auth-art h1{font-size:34px;line-height:1.15;color:#fff;margin:18px 0 12px;letter-spacing:-.8px}
.auth-art p{color:#a9d2c1;max-width:420px}
.auth-art ul{list-style:none;padding:0;margin:26px 0 0} .auth-art li{padding:6px 0;display:flex;gap:10px;color:#cfe8dd} .auth-art li:before{content:"✓";color:#4ade80;font-weight:800}
.auth-form{display:flex;align-items:center;justify-content:center;padding:32px}
.auth-card{width:100%;max-width:400px}
.auth-card h2{font-size:24px;margin-bottom:6px}
.pub-nav{display:flex;align-items:center;justify-content:space-between;padding:18px 6vw;background:#fff;border-bottom:1px solid var(--line)}
.pub-nav .links{display:flex;gap:14px;align-items:center}
.hero{padding:70px 6vw 50px;text-align:center;background:linear-gradient(180deg,#eaf7ef,var(--bg))}
.hero h1{font-size:44px;line-height:1.1;letter-spacing:-1.4px;max-width:760px;margin:0 auto 14px}
.hero p{font-size:18px;color:var(--muted);max-width:620px;margin:0 auto 26px}
.section{padding:44px 6vw}
.pagination{display:flex;gap:6px;align-items:center;justify-content:center;padding:16px;flex-wrap:wrap}
.pagination a,.pagination span{padding:6px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font-size:13px}
.pagination span.cur{background:var(--brand);border-color:var(--brand);color:#fff} .pagination span.dis{color:var(--soft)}
.qr{display:inline-block;padding:10px;background:#fff;border:1px solid var(--line);border-radius:12px} .qr svg{display:block;width:180px;height:180px}
.invoice{max-width:760px;margin:0 auto;background:#fff;padding:36px;border:1px solid var(--line);border-radius:12px}

@media (max-width:1000px){.cols-4{grid-template-columns:repeat(2,1fr)} .cols-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;bottom:0;width:260px;z-index:50;transform:translateX(-100%);transition:transform .2s}
  body.nav-open .sidebar{transform:none}
  body.nav-open:after{content:"";position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:40}
  .topbar .burger{display:block} .topbar{padding:10px 16px} .content{padding:18px 16px 32px}
  .cols-2,.cols-3,.cols-4,.form-grid,.split-12,.split-21,.split-side{grid-template-columns:1fr}
  .auth{grid-template-columns:1fr} .auth-art{display:none}
  .hero h1{font-size:32px} .kv{grid-template-columns:1fr}
}
@media print{.sidebar,.topbar,.foot,.no-print{display:none!important} .shell{display:block} body{background:#fff} .invoice{border:0;padding:0}}

/* WhatsApp numbers / developer pages */
.qrbox{width:300px;max-width:100%;aspect-ratio:1;margin:0 auto;border:1px solid var(--line);border-radius:14px;background:#fff;display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;overflow:hidden}
.qrbox img{width:100%;height:100%;display:block}
.pair-code{font:700 34px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.14em;color:var(--ink)}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#b8c4be;margin-right:6px}
.dot.on{background:var(--brand)} .dot.wait{background:#e0a100} .dot.off{background:var(--red)}
pre.code{background:#0f1f17;color:#d8f5e3;border-radius:10px;padding:14px 16px;overflow:auto;font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;margin:8px 0 16px;white-space:pre}
code.inline{background:#eef3f0;border-radius:6px;padding:1px 6px;font:12.5px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.copyrow{display:flex;gap:8px;align-items:center}.copyrow input{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px}
.newkey{border:2px dashed var(--brand);background:var(--brand-soft);border-radius:12px;padding:16px;margin-bottom:18px}
.bubble{max-width:560px;word-break:break-word;white-space:pre-wrap}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.opt{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;flex:1;min-width:200px}
.opt input{margin-top:4px;accent-color:var(--brand)} .opt:has(input:checked){border-color:var(--brand);background:var(--brand-soft)}

/* Inbox */
.inbox{display:grid;grid-template-columns:330px 1fr;height:calc(100vh - 190px);min-height:480px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.in-left{border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.in-tools{padding:12px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.in-chips{display:flex;gap:6px} .chip{border:1px solid var(--line);background:#fff;border-radius:99px;padding:3px 12px;font-size:12.5px;cursor:pointer;color:var(--muted)} .chip.on{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-dark);font-weight:600}
.in-list{overflow:auto;flex:1}
.in-empty{padding:26px 16px;text-align:center}
.in-row{display:flex;gap:11px;align-items:flex-start;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);background:#fff;padding:11px 14px;cursor:pointer;font:inherit;color:inherit}
.in-row:hover{background:#f7faf8} .in-row.on{background:var(--brand-soft)}
.in-row-top,.in-row-bot{display:flex;justify-content:space-between;gap:8px;align-items:center}
.in-row-top b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.in-prev{color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.in-row.unread .in-prev{color:var(--ink);font-weight:600}
.in-badge{background:var(--brand);color:#fff;border-radius:99px;font-size:11px;font-weight:700;padding:0 7px;min-width:20px;text-align:center;flex:none}
.in-right{display:flex;flex-direction:column;min-height:0;background:#efeae2}
.in-placeholder{margin:auto}
.in-chat{display:flex;flex-direction:column;flex:1;min-height:0}
.in-head{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#fff;border-bottom:1px solid var(--line)} .in-head .grow{flex:1;min-width:0}
.in-back{display:none}
.in-msgs{flex:1;overflow:auto;padding:14px 18px;display:flex;flex-direction:column;gap:6px}
.msg{display:flex} .msg.out{justify-content:flex-end}
.msg-b{max-width:min(520px,82%);padding:7px 10px 4px;border-radius:10px;background:#fff;box-shadow:0 1px 1px rgba(0,0,0,.08);word-break:break-word}
.msg.out .msg-b{background:#d9fdd3}
.msg-t{white-space:pre-wrap} .msg-m{color:var(--soft);text-align:right;margin-top:2px;white-space:pre} .msg-s{color:var(--brand-dark);font-weight:600}
.msg-img{max-width:100%;max-height:260px;border-radius:6px;display:block;margin-bottom:4px}
.in-err{background:var(--red-soft);color:var(--red);padding:8px 14px;font-size:13px}
.in-compose{display:flex;gap:8px;padding:10px 12px;background:#f6f6f6;border-top:1px solid var(--line);align-items:flex-end}
.in-compose textarea{flex:1;resize:none;max-height:140px;min-height:40px}
.in-fname{padding:4px 14px;background:#f6f6f6;cursor:pointer}
.in-dlg{border:0;border-radius:14px;padding:22px;width:min(400px,92vw);box-shadow:0 20px 60px rgba(0,0,0,.3)} .in-dlg::backdrop{background:rgba(0,0,0,.45)}
.edit-row{display:inline-block;position:relative} .edit-row summary{list-style:none;cursor:pointer;display:inline-block} .edit-row summary::-webkit-details-marker{display:none}
.edit-row[open]>.edit-back{position:fixed;inset:0;background:rgba(8,24,17,.5);z-index:190}
.edit-pop{display:none}
.edit-row[open]>.edit-pop{display:block;position:fixed;z-index:200;left:50%;top:50%;transform:translate(-50%,-50%);width:min(480px,calc(100vw - 28px));max-height:calc(100vh - 40px);overflow:auto;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 70px rgba(0,0,0,.35);padding:20px 20px 16px;text-align:left;white-space:normal}
.edit-pop .edit-head{display:flex;align-items:center;justify-content:space-between;margin:-4px 0 12px}
.edit-pop .edit-head b{font-size:16px}
.edit-pop .edit-x{border:0;background:var(--gray-soft);width:30px;height:30px;border-radius:8px;font-size:18px;line-height:1;cursor:pointer}
@media (max-width:860px){
  .inbox{grid-template-columns:1fr;height:calc(100vh - 150px)}
  .in-right{display:none} .inbox.chat-open .in-right{display:flex} .inbox.chat-open .in-left{display:none}
  .in-back{display:inline-block}
}

/* Single send */
.s-suggest{position:absolute;left:0;right:0;top:100%;z-index:15;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.14);overflow:hidden}
.s-suggest button{display:block;width:100%;text-align:left;border:0;background:#fff;padding:9px 12px;font:inherit;cursor:pointer;border-bottom:1px solid var(--line)} .s-suggest button:hover{background:var(--brand-soft)}
.s-btn{display:grid;grid-template-columns:130px 1fr 1fr;gap:8px;margin-bottom:8px}
@media (max-width:860px){.s-btn{grid-template-columns:1fr}}
.qr-pop{position:absolute;left:12px;right:12px;bottom:64px;max-height:240px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.18);z-index:30}
.qr-pop button{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);background:#fff;padding:8px 12px;font:inherit;cursor:pointer} .qr-pop button:hover,.qr-pop button.on{background:var(--brand-soft)} .qr-pop small{color:var(--muted)}
.in-chat{position:relative}

/* chatbot flow builder */
.fb-step{border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:12px;background:#fcfdfc}
.fb-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.fb-head .grow{flex:1}
.fb-body .field{margin-bottom:10px}
.fb-opt{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px 12px;align-items:end;border:1px dashed var(--line);border-radius:10px;padding:10px;margin:8px 0;background:#fff}
.fb-opt .field{margin-bottom:0}
.fb-sec{border-left:3px solid var(--brand-soft);padding-left:10px;margin:10px 0}

/* visual flow builder (canvas) */
.fbx-set{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:2px 16px} .fbx-set .field{margin-bottom:8px} .fbx-set .fbx-name{grid-column:span 2} .fbx-set[hidden]{display:none} .fbx-toprow{margin-top:2px} .fbx-more{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
@media (max-width:640px){.fbx-set .fbx-name{grid-column:auto}}
.fbx{margin-bottom:24px}
.fbx-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-bottom:0;border-radius:var(--radius) var(--radius) 0 0;padding:8px 10px;position:relative;z-index:5}
.fbx-bar .grow,.fbx-ph .grow{flex:1}
.fbx-sep{width:1px;height:22px;background:var(--line);margin:0 4px}
.fbx-zl{min-width:44px;text-align:center;font-size:12.5px;color:var(--muted)}
.fbx-msg{font-size:12.5px;color:var(--brand-dark);margin-left:6px}
.fbx-addwrap{position:relative}
.fbx-menu{position:absolute;left:0;top:calc(100% + 6px);z-index:60;width:300px;max-width:calc(100vw - 32px);max-height:min(420px,70vh);overflow:auto;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 44px rgba(0,0,0,.22);padding:6px}
.fbx-menu[hidden]{display:none}
.fbx-qmenu{width:290px}
.fbx-mi{display:block;width:100%;text-align:left;border:0;background:#fff;border-radius:8px;padding:8px 10px;font:inherit;cursor:pointer}
.fbx-mi:hover,.fbx-mi:focus{background:var(--brand-soft);outline:0}
.fbx-mi b{display:block;font-size:13.5px} .fbx-mi span{display:block;font-size:12px;color:var(--muted);line-height:1.35}
.fbx-main{--fbx-h:clamp(520px,calc(100vh - 290px),880px);display:grid;grid-template-columns:200px minmax(0,1fr) 340px;border:1px solid var(--line);border-radius:0 0 var(--radius) var(--radius);background:var(--card);overflow:hidden}
.fbx-canvas{position:relative;height:var(--fbx-h);overflow:hidden;touch-action:none;cursor:grab;background-color:#f6f9f7;background-image:radial-gradient(circle,#c9d6d0 1.2px,transparent 1.3px);background-size:24px 24px;user-select:none;-webkit-user-select:none;outline:0}
.fbx-canvas.panning{cursor:grabbing}
.fbx-world{position:absolute;left:0;top:0;width:1px;height:1px;transform-origin:0 0}
.fbx-edges{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
#fbx-nodes{position:absolute;left:0;top:0}
.fbx-hint{position:absolute;left:10px;bottom:8px;font-size:11.5px;color:var(--soft);background:rgba(255,255,255,.85);padding:3px 8px;border-radius:99px;pointer-events:none;max-width:calc(100% - 20px)}
.fbx-panel{height:var(--fbx-h);overflow:auto;padding:16px;border-left:1px solid var(--line);background:#fff}
.fbx-panel h3{margin-bottom:8px}
.fbx-tips{margin:0;padding-left:18px;color:var(--muted);font-size:13px} .fbx-tips li{margin-bottom:8px}
.fbx-ph{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.fbx-acts{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 14px}
.fbx-panel .fb-body .field{margin-bottom:10px}
.fbx-panel textarea{min-height:60px}

.fbx-node{position:absolute;background:#fff;border:1.5px solid #d3ddd8;border-radius:12px;box-shadow:0 2px 10px rgba(16,35,30,.09);cursor:grab;touch-action:none;transition:box-shadow .12s,border-color .12s}
.fbx-node.sel{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft),0 8px 26px rgba(16,35,30,.16);z-index:3}
.fbx-node.drag{cursor:grabbing;box-shadow:0 12px 34px rgba(16,35,30,.25);z-index:4}
.fbx-node.hl{outline:3px dashed var(--brand);outline-offset:3px}
.fbx-node.orphan{border-style:dashed}
.fbx-nh{position:relative;display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:10px 10px 0 0;font-size:13px;background:#e9f6ef}
.fbx-nh b{flex:1;min-width:0;line-height:1.2;overflow-wrap:anywhere}
.fbx-num{flex:none;background:#fff;color:var(--ink);border-radius:99px;font-size:11px;font-weight:700;padding:1px 8px;min-width:22px;text-align:center}
.fbx-num.start{background:var(--brand);color:#fff;letter-spacing:.4px}
.fbx-tag{display:none;font-size:10.5px;color:#8a5a00;background:var(--amber-soft);border-radius:99px;padding:0 7px;white-space:nowrap}
.fbx-node.orphan .fbx-tag{display:inline}
.fbx-c-ask .fbx-nh{background:#e8f0ff} .fbx-c-logic .fbx-nh{background:#fff4e0} .fbx-c-tech .fbx-nh{background:#f0eaff} .fbx-c-end .fbx-nh{background:#eef0ef}
.fbx-nb{padding:9px 12px 8px;font-size:12.5px}
.fbx-prev{color:#3c4c46;white-space:pre-wrap;word-break:break-word;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;margin-bottom:4px;min-height:18px}
.fbx-prev.empty{color:var(--soft);font-style:italic}
.fbx-row{position:relative;display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px dashed var(--line)}
.fbx-row.dim .fbx-rt{color:var(--muted);font-weight:500}
.fbx-rt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;font-size:12px}
.fbx-port{position:absolute;width:14px;height:14px;border-radius:50%;background:#fff;border:2.5px solid var(--brand);cursor:crosshair;touch-action:none}
.fbx-port::after{content:"";position:absolute;inset:-9px}
.fbx-port.in{left:-8px;top:50%;margin-top:-7px;border-color:#7b8d86}
.fbx-port.out{right:-19px;top:50%;margin-top:-7px}
.fbx-port.out:hover,.fbx-port.out.active{background:var(--brand);transform:scale(1.25)}
.fbx-port.out.on{background:var(--brand)}
.fbx-edge{fill:none;stroke:#6fae8a;stroke-width:2.4;stroke-linecap:round}
.fbx-edge.tmp{stroke:var(--brand);stroke-dasharray:6 5}
.fbx-arrow{fill:#6fae8a}
.fbx-ehit{fill:none;stroke:transparent;stroke-width:16;pointer-events:stroke}
.fbx-eg:hover .fbx-edge{stroke:var(--brand);stroke-width:3.2}
.fbx-edel{opacity:0;cursor:pointer;pointer-events:all;transition:opacity .1s}
.fbx-eg:hover .fbx-edel,.fbx-edel:hover{opacity:1}
.fbx-edel circle{fill:#fff;stroke:var(--red);stroke-width:1.6}
.fbx-edel text{fill:var(--red);font:700 15px/1 sans-serif}
@media (hover:none){.fbx-edel{opacity:.9}.fbx-port::after{inset:-12px}}

.fbx.fbx-full{position:fixed;inset:0;z-index:300;background:var(--bg);padding:10px;margin:0;display:flex;flex-direction:column}
.fbx.fbx-full .fbx-main{--fbx-h:calc(100vh - 78px);flex:1}
body.fbx-lock{overflow:hidden}

@media (max-width:1000px){
  .fbx-main{grid-template-columns:1fr;--fbx-h:clamp(420px,62vh,640px)}
  .fbx-pal{height:auto;border-right:0;border-bottom:1px solid var(--line)} .fbx-pal-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .fbx-panel{height:auto;max-height:none;border-left:0;border-top:1px solid var(--line)}
  .fbx.fbx-full .fbx-main{grid-template-rows:auto minmax(0,1fr) auto;--fbx-h:100%} .fbx.fbx-full .fbx-pal{max-height:132px;overflow:auto}
  .fbx.fbx-full .fbx-canvas{height:100%} .fbx.fbx-full .fbx-panel{max-height:46vh;overflow:auto}
  .fbx-hint{display:none}
}
.grid>*{min-width:0}

/* ── v1.9 composer, templates, broadcast sender picker ── */
.cmp [hidden],.cmp-media[hidden]{display:none!important}
.cmp .s-btn{grid-template-columns:130px 1fr 1fr 38px;align-items:center}
@media (max-width:860px){.cmp .s-btn{grid-template-columns:1fr 38px}.cmp .s-btn .b-type,.cmp .s-btn .b-value{grid-column:1 / -1}}
.cmp-kept{margin-top:6px;padding:6px 10px;background:var(--brand-soft);border-radius:8px;color:var(--brand-dark)}
.cmp-rm{padding:0;width:34px;height:34px;font-size:18px;line-height:1}
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.tpl-card{border:1px solid var(--line);border-radius:12px;padding:14px;background:#fff;display:flex;flex-direction:column;gap:6px;min-width:0}
.tpl-card h3{margin:0;font-size:15px;overflow-wrap:anywhere}.tpl-card p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;max-height:84px;overflow:hidden}
.tpl-badge{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:99px;background:var(--brand-soft);color:var(--brand-dark)}
.num-list{display:grid;gap:8px}
.num-opt{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff;cursor:pointer;min-width:0}
.num-opt input{flex:none}.num-opt.on{border-color:var(--brand);background:var(--brand-soft)}
.num-opt .num-name{flex:1;min-width:0;overflow-wrap:anywhere}
.badge-on,.badge-off{font-size:11px;font-weight:600;padding:2px 8px;border-radius:99px;white-space:nowrap}
.badge-on{background:#dcfce7;color:#166534}.badge-off{background:#fee2e2;color:#991b1b}
.later-box{border:1px dashed var(--line);border-radius:12px;padding:12px;background:#fafafa}
.later-quick{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.tpl-pick{position:absolute;bottom:56px;left:0;right:0;z-index:20;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.16);max-height:300px;overflow:auto}
.tpl-pick button{display:block;width:100%;text-align:left;border:0;background:#fff;padding:9px 12px;font:inherit;cursor:pointer;border-bottom:1px solid var(--line)}.tpl-pick button:hover{background:var(--brand-soft)}
.later-box input[type=datetime-local]{width:100%;max-width:100%}

/* file picker: one clear button + the chosen file name (enhanced by app.js) */
input[type=file]{font:inherit;color:var(--muted);max-width:100%}
input[type=file]::file-selector-button{margin-right:12px;padding:8px 14px;border:0;border-radius:8px;background:var(--brand);color:#fff;font:inherit;font-weight:600;cursor:pointer}
.filebox{display:flex;align-items:center;gap:12px;width:100%;padding:8px 12px 8px 8px;border:1.5px dashed #b9c9c1;border-radius:11px;background:#fafcfb;cursor:pointer;position:relative;transition:border-color .15s,background .15s;margin:0;font-weight:400}
.filebox:hover,.filebox.is-drag{border-color:var(--brand);background:var(--brand-soft)}
.filebox:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(20,164,77,.16)}
.filebox input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;padding:0;border:0}
.filebox .fb-btn{flex:none;display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:8px;background:var(--brand);color:#fff;font-weight:600;font-size:13.5px;line-height:1}
.filebox:hover .fb-btn{background:var(--brand-dark)}
.filebox .fb-btn svg{width:16px;height:16px}
.filebox .fb-name{min-width:0;flex:1;color:var(--muted);font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filebox.has-file{border-style:solid;border-color:var(--brand);background:var(--brand-soft)}
.filebox.has-file .fb-name{color:var(--ink);font-weight:600}
.filebox .fb-x{position:relative;z-index:2;flex:none;border:0;background:transparent;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;padding:2px 6px;border-radius:6px;display:none}
.filebox.has-file .fb-x{display:inline-block}
.filebox .fb-x:hover{background:#fff;color:var(--red)}
.form-grid>.field{min-width:0}
.filebox{box-sizing:border-box;min-width:0;max-width:100%}
.filebox{flex-wrap:wrap;row-gap:6px}
.filebox .fb-name{flex:1 1 120px}

/* page tabs (Website / Branding settings) */
.ptab-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px;align-items:start}
.ptab-main{min-width:0}
.ptab-side{position:sticky;top:16px}
@media (max-width:1180px){.ptab-grid{grid-template-columns:1fr}.ptab-side{position:static}}
.ptabs{display:flex;flex-wrap:wrap;gap:0 2px;margin:0 0 18px;box-shadow:inset 0 -1px 0 var(--line)}
.ptabs button{appearance:none;background:none;border:0;border-bottom:2px solid transparent;padding:10px 12px;font:inherit;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap;display:inline-flex;gap:7px;align-items:center;border-radius:8px 8px 0 0}
.ptabs button:hover{color:var(--ink);background:var(--gray-soft)}
.ptabs button[aria-selected=true]{color:var(--brand-dark);border-bottom-color:var(--brand);background:none}
.ptabs button:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.ptabs button.has-err::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--red)}
.ptabs .tcount{font-size:11px;font-weight:700;background:var(--brand-soft);color:var(--brand-dark);border-radius:99px;padding:1px 7px}
.ppanel[hidden],.savebar[hidden]{display:none!important}
.ppanel+.ppanel{margin-top:0}
.savebar{margin-top:16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sl-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
.sl-two>div{min-width:0}
@media (max-width:760px){.sl-two{grid-template-columns:1fr}.ptabs button{padding:9px 11px}}

/* inbox: profile pictures, labels, ticks */
.av{flex:none;width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;color:#fff;font-weight:700;font-size:15px;letter-spacing:.3px;background:var(--soft);user-select:none}
.av img{width:100%;height:100%;object-fit:cover;display:block}
.in-head .av{width:38px;height:38px;font-size:14px}
.in-main{flex:1;min-width:0}
.in-main .in-row-top{margin-bottom:1px} .in-row-top .nowrap{flex:none}
.in-tick{color:var(--soft);font-size:12px;letter-spacing:-1px} .in-tick.read{color:#53bdeb} .in-tick.failed{color:var(--red)}
.in-row-bot .in-prev{flex:1;min-width:0}
.lb-row{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px} .lb-row:empty{display:none}
.lb-chip{display:inline-block;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:99px;padding:0 8px;font-size:11px;line-height:18px;font-weight:600}
.lb-more{font-size:11px;color:var(--muted);line-height:18px}
.lb-wrap{position:relative;flex:none}
.lb-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:220px;max-width:280px;max-height:320px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 36px rgba(16,35,30,.18);padding:6px}
.lb-opt{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:8px;cursor:pointer;margin:0;font-weight:500} .lb-opt:hover{background:var(--gray-soft)} .lb-opt input{accent-color:var(--brand)}
.lb-dot{width:12px;height:12px;border-radius:50%;flex:none}
.lb-manage{display:block;width:100%;text-align:left;border:0;border-top:1px solid var(--line);background:none;margin-top:4px;padding:9px 9px 6px;font:inherit;font-size:13px;color:var(--brand-dark);cursor:pointer;font-weight:600}
.lb-dlg{width:min(480px,94vw);max-height:88vh;overflow:auto}
.lb-new{padding:12px;border:1px dashed var(--line);border-radius:10px;margin-bottom:12px}
.lb-item{padding:10px 0;border-bottom:1px solid var(--line)}
.lb-line{display:flex;gap:8px;align-items:center;margin-top:8px} .lb-line input{flex:1;min-width:0}
.lb-sw{display:flex;gap:6px;flex-wrap:wrap}
.lb-sw button{width:22px;height:22px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:pointer;padding:0}
.lb-sw button.on{box-shadow:0 0 0 2px var(--ink)}
.lb-sw button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media (max-width:760px){.in-head .btn.sm{padding:6px 8px}.lb-pop{right:auto;left:-120px}}

/* colours + live preview */
.palettes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:0 0 18px}
.pal{display:flex;align-items:center;gap:9px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 10px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;color:var(--ink);text-align:left}
.pal:hover{border-color:var(--brand);background:var(--brand-soft)}
.pal-sw{display:inline-flex;flex:none} .pal-sw i{width:16px;height:26px;display:block} .pal-sw i:first-child{border-radius:6px 0 0 6px} .pal-sw i:last-child{border-radius:0 6px 6px 0}
.clr{display:flex;gap:8px;align-items:center} .clr input[type=color]{width:46px;height:40px;padding:2px;flex:none;cursor:pointer} .clr input[type=text]{flex:1;min-width:0}
.bp{--bp-main:#14a44d;--bp-main-dark:#0f7f3b;--bp-soft:#e1f4e8;--bp-deep:#06281d;--bp-acc:#53bdeb;--bp-mint:#7fcdf0;--bp-side-a:#02150f;--bp-side-b:#064430;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px}
.bp-title{font-weight:700;margin:0 2px 10px}
.bp-site{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#f5f8f6;font-size:11px}
.bp-nav{display:flex;align-items:center;gap:8px;background:#fff;padding:8px 10px;border-bottom:1px solid var(--line)}
.bp-nav b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
.bp-logo{width:20px;height:20px;border-radius:6px;background:var(--bp-main);color:#fff;display:grid;place-items:center;font-weight:800;font-size:11px;flex:none}
.bp-logoimg{width:20px;height:20px;object-fit:contain;border-radius:4px;flex:none}
.bp-links{display:flex;gap:6px;margin-left:auto} .bp-links i{width:22px;height:5px;border-radius:3px;background:#cfdad4;display:block}
.bp-btn{display:inline-block;background:var(--bp-main-dark);color:#fff;border-radius:7px;padding:6px 12px;font-weight:700;font-size:11px;white-space:nowrap} .bp-btn.sm{padding:4px 9px;font-size:10px}
.bp-ghost{display:inline-block;border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:7px;padding:5px 11px;font-weight:600;font-size:11px}
.bp-hero{background:var(--bp-deep);color:#fff;padding:18px 14px 16px;position:relative}
.bp-h{font-size:16px;line-height:1.15;font-weight:800;letter-spacing:-.02em;max-width:230px;margin-bottom:12px}
.bp-actions{display:flex;gap:8px;margin-bottom:14px}
.bp-hero .bp-btn{background:var(--bp-main)}
.bp-chat{display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.bp-bubble{background:rgba(255,255,255,.12);border-radius:8px 8px 8px 2px;padding:5px 9px}
.bp-bubble.out{align-self:flex-end;background:var(--bp-main);border-radius:8px 8px 2px 8px}
.bp-tick{font-style:normal;color:var(--bp-acc);letter-spacing:-2px;margin-left:3px}
.bp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:10px}
.bp-cards div{background:#fff;border:1px solid var(--line);border-radius:7px;padding:8px}
.bp-cards b{display:block;width:16px;height:16px;border-radius:5px;background:var(--bp-soft);box-shadow:inset 0 0 0 5px var(--bp-soft),inset 0 0 0 16px var(--bp-main);opacity:.9;margin-bottom:6px}
.bp-cards i{display:block;height:4px;border-radius:2px;background:#d7e1db;margin-top:4px} .bp-cards i+i{width:70%}
.bp-foot{background:var(--bp-deep);padding:9px 12px;display:flex;gap:8px;align-items:center} .bp-foot span{width:34px;height:6px;border-radius:3px;background:var(--bp-mint)} .bp-foot i{width:22px;height:4px;border-radius:2px;background:rgba(255,255,255,.35)}
.bp-panel{display:flex;margin-top:10px;border:1px solid var(--line);border-radius:10px;overflow:hidden;height:92px}
.bp-side{width:54px;background:linear-gradient(175deg,var(--bp-side-a),var(--bp-side-b));padding:10px 8px;display:flex;flex-direction:column;gap:7px;flex:none}
.bp-side i{display:block;height:7px;border-radius:3px;background:rgba(255,255,255,.28)} .bp-side i.on{background:var(--bp-main)}
.bp-body{flex:1;padding:10px;background:#f3f6f4}
.bp-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
.bp-badge{background:var(--bp-soft);color:var(--bp-main-dark);border-radius:99px;padding:2px 8px;font-weight:700;font-size:10px}
.bp-line{height:6px;border-radius:3px;background:#d7e1db;margin-bottom:6px} .bp-line.s{width:60%}

/* date picker */
.dp{position:relative;display:inline-block;vertical-align:middle;max-width:100%}
.field .dp,.later-box .dp{display:block}
.filters .dp{min-width:164px}
.filters .dp-field{padding-right:30px;gap:7px}
.dp-native{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;left:0;top:0;border:0;padding:0}
.dp-field{display:flex;align-items:center;gap:9px;width:100%;min-height:40px;padding:8px 34px 8px 12px;border:1px solid #cfd9d4;border-radius:9px;background:#fff;font:inherit;color:var(--soft);cursor:pointer;text-align:left}
.dp-field svg{flex:none;color:var(--muted)}
.dp.has-value .dp-field{color:var(--ink)}
.dp-field:hover{border-color:#9db3a9}
.dp-field:focus-visible,.dp.is-open .dp-field{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(20,164,77,.16)}
.dp.is-disabled .dp-field{background:var(--gray-soft);color:var(--soft);cursor:not-allowed}
.dp-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dp-clear{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:24px;height:24px;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:18px;line-height:1;cursor:pointer;padding:0}
.dp-clear:hover{background:var(--gray-soft);color:var(--ink)}
.dp-pop{position:absolute;z-index:120;top:calc(100% + 6px);left:0;width:300px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px rgba(16,35,30,.22);padding:12px}
.dp-pop[hidden],.dp-back[hidden]{display:none!important}
.dp.dp-right .dp-pop{left:auto;right:0} .dp.dp-up .dp-pop{top:auto;bottom:calc(100% + 6px)}
.dp-head{display:flex;align-items:center;gap:6px;margin-bottom:10px}
.dp-nav{flex:none;width:32px;height:32px;border:0;border-radius:8px;background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0}
.dp-nav:hover{background:var(--gray-soft)}
.dp-sel{appearance:auto;width:auto!important;min-width:0;padding:5px 6px!important;border:1px solid transparent!important;border-radius:8px!important;background:transparent!important;font:inherit;font-weight:700;color:var(--ink);cursor:pointer}
.dp-sel:hover{background:var(--gray-soft)!important}
.dp-head .dp-sel:first-of-type{flex:1 1 auto;min-width:112px}
.dp-head .dp-sel:nth-of-type(2){flex:none}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp-dow{text-align:center;font-size:11.5px;font-weight:700;color:var(--soft);padding:4px 0}
.dp-day{aspect-ratio:1;border:0;border-radius:50%;background:transparent;font:inherit;font-size:13.5px;color:var(--ink);cursor:pointer;padding:0;display:grid;place-items:center}
.dp-day:hover:not(:disabled){background:var(--brand-soft)}
.dp-day.out{color:#b3c0ba}
.dp-day.today{box-shadow:inset 0 0 0 1.5px var(--brand);font-weight:700}
.dp-day.sel{background:var(--brand);color:#fff;font-weight:700;box-shadow:none}
.dp-day.sel:hover{background:var(--brand-dark)}
.dp-day:disabled{color:#cdd6d2;cursor:not-allowed;text-decoration:line-through}
.dp-day:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.dp-timerow{display:flex;align-items:center;gap:4px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.dp-tlabel{font-size:12.5px;font-weight:600;color:var(--muted);margin-right:auto}
.dp-timerow .dp-sel{border-color:var(--line)!important;background:#fff!important}
.dp-colon{font-weight:700}
.dp-foot{display:flex;align-items:center;gap:14px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.dp-time .dp-timerow+.dp-foot{border-top:0;margin-top:6px;padding-top:0}
.dp-link{border:0;background:none;color:var(--brand-dark);font:inherit;font-weight:600;font-size:13.5px;cursor:pointer;padding:2px 0}
.dp-link:hover{text-decoration:underline}
.dp-done{margin-left:auto;border:0;border-radius:8px;background:var(--brand);color:#fff;font:inherit;font-weight:600;padding:7px 18px;cursor:pointer}
.dp-done:hover{background:var(--brand-dark)}
.dp-back{display:none}
@media (max-width:560px){
  .dp-back{display:block;position:fixed;inset:0;z-index:119;background:rgba(8,24,17,.45)}
  .dp-pop{position:fixed;left:12px;right:12px;bottom:12px;top:auto;width:auto;max-width:420px;margin:0 auto;z-index:121;padding:14px}
  .dp.dp-right .dp-pop,.dp.dp-up .dp-pop{left:12px;right:12px;bottom:12px;top:auto}
  .dp-day{font-size:15px}
}

/* Uploaded logo: its own shape and size, no brand name next to it */
.logo.logo-wide{width:auto;height:auto;max-width:100%;padding:5px 10px;border-radius:10px;background:#fff;box-shadow:none;display:inline-flex;align-items:center;justify-content:center;overflow:hidden}
.sb-brand .logo.logo-wide{width:auto;height:auto;padding:5px 10px;border-radius:10px;background:#fff;box-shadow:none;max-width:100%}
.logo.logo-wide img{width:auto;height:34px;max-width:100%;object-fit:contain;display:block;border-radius:0}
.sb-brand .logo-name{min-width:0}
.bp-logoimg{width:auto;height:24px;max-width:120px;border-radius:0}

/* Copy button next to an ID */
.idcopy{display:inline-flex;align-items:center;gap:6px}
.idcopy code{font-size:12px;color:var(--muted);background:transparent;padding:0}
.copy-btn{display:inline-grid;place-items:center;width:24px;height:24px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--muted);cursor:pointer;padding:0;flex:none;transition:color .15s,border-color .15s,background .15s}
.copy-btn:hover{color:var(--brand-dark);border-color:var(--brand)}
.copy-btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.copy-btn .ic-ok{display:none}
.copy-btn.copied{color:#fff;background:var(--brand);border-color:var(--brand)}
.copy-btn.copied .ic-copy{display:none}.copy-btn.copied .ic-ok{display:block}

/* ── Inbox, laid out like WhatsApp Web ─────────────────────────────── */
body.inbox-page{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
body.inbox-page .shell{flex:1;min-height:0;height:auto;grid-template-rows:minmax(0,1fr)}
body.inbox-page .sidebar{height:100%}
body.inbox-page .main{height:100%;min-height:0;overflow:hidden}
body.inbox-page .content{flex:1;min-height:0;display:flex;flex-direction:column;padding:14px 20px 16px;max-width:none}
body.inbox-page .foot{display:none}
body.inbox-page .content>.alert{flex:none}
.inbox{flex:1;height:auto;min-height:0;grid-template-columns:minmax(320px,32%) minmax(0,1fr);border-radius:12px;--wa-line:#e9edef;--wa-bg:#f0f2f5;--wa-ink:#111b21;--wa-sub:#667781;--wa-ic:#54656f}
.inbox .in-left,.inbox .in-right{min-width:0;min-height:0}
.inbox .in-left{background:#fff;border-right:1px solid var(--wa-line)}
.in-lhead{display:flex;align-items:center;justify-content:space-between;padding:14px 12px 4px 16px}
.in-lhead h1{margin:0;font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--wa-ink)}
.in-unread{display:inline-block;background:var(--brand);color:#fff;border-radius:99px;font-size:12px;padding:1px 8px;margin-left:6px;font-weight:700;vertical-align:middle;letter-spacing:0}
.in-acts{display:flex;gap:2px}
.in-ic{width:40px;height:40px;border-radius:50%;border:0;background:transparent;color:var(--wa-ic,#54656f);display:inline-grid;place-items:center;cursor:pointer;padding:0;margin:0;flex:none;transition:background .15s}
.in-ic:hover{background:#f0f2f5} .in-ic:focus-visible,.in-act:focus-visible,.in-send:focus-visible,.in-down:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.in-search{display:flex;align-items:center;gap:10px;margin:6px 12px 6px;padding:0 12px;background:var(--wa-bg);border-radius:10px;color:var(--wa-ic)}
.in-search:focus-within{box-shadow:0 0 0 2px var(--brand-soft),0 0 0 3px var(--brand)}
.in-search input{flex:1;min-width:0;border:0!important;background:transparent!important;box-shadow:none!important;outline:0;padding:9px 0;font-size:14px;height:auto}
.inbox .in-chips{display:flex;gap:6px;padding:4px 12px 8px;flex-wrap:wrap}
.inbox .chip{border:0;background:var(--wa-bg);color:var(--wa-sub);border-radius:99px;padding:5px 13px;font-size:13px;font-weight:500;cursor:pointer}
.inbox .chip:hover{background:#e4e7e9} .inbox .chip.on{background:var(--brand-soft);color:var(--brand-dark);font-weight:600}
.in-sel{display:flex;gap:8px;padding:0 12px 10px}
.in-sel select{flex:1;min-width:0;font-size:13px;padding:6px 8px;border:0;border-radius:8px;background-color:var(--wa-bg);color:var(--wa-ink);height:auto}
.inbox .in-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c5ccd0 transparent;border-top:1px solid var(--wa-line)}
.inbox .in-row{position:relative;align-items:center;gap:13px;padding:10px 15px;border:0;background:#fff;min-height:72px}
.inbox .in-row::after{content:"";position:absolute;left:77px;right:0;bottom:0;border-bottom:1px solid #f0f2f5}
.inbox .in-row:hover{background:#f5f6f6} .inbox .in-row.on{background:var(--wa-bg)}
.inbox .in-row .av{width:49px;height:49px;font-size:17px}
.inbox .in-row-top b{font-weight:500;font-size:16px;color:var(--wa-ink)}
.in-time{font-size:12px;color:var(--wa-sub)} .in-row.unread .in-time{color:var(--brand-dark);font-weight:600}
.inbox .in-prev{font-size:14px;color:var(--wa-sub)} .inbox .in-row.unread .in-prev{color:var(--wa-ink);font-weight:500}
.inbox .in-badge{min-width:20px;height:20px;line-height:20px;padding:0 6px;font-size:12px}
.inbox .in-empty{padding:30px 20px}
/* right side */
.inbox .in-right{position:relative;background:#efeae2}
.in-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:var(--wa-bg);color:var(--wa-sub);padding:24px;border-bottom:6px solid var(--brand)}
.in-placeholder h2{margin:14px 0 6px;font-size:26px;font-weight:300;color:#41525d}
.in-placeholder p{margin:0;font-size:14px;line-height:1.6}
.in-ph-ic{width:84px;height:84px;border-radius:50%;background:#fff;color:var(--brand);display:grid;place-items:center;box-shadow:0 1px 3px rgba(11,20,26,.1)}
.inbox .in-chat{flex:1;min-height:0}
.inbox .in-head{background:var(--wa-bg);border-bottom:1px solid var(--wa-line);padding:9px 14px;gap:12px;min-height:60px}
.inbox .in-head .av{width:40px;height:40px}
.inbox .in-head b{font-weight:500;font-size:16px;color:var(--wa-ink)}
.inbox .in-head .small{font-size:13px}
.inbox .in-back{display:none}
.in-act{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;border-radius:8px;padding:8px 10px;font:inherit;font-size:13px;font-weight:500;color:var(--wa-ic);cursor:pointer;white-space:nowrap;margin:0}
.in-act:hover{background:#e4e7e9} .in-act.human{background:#fff3cd;color:#7a5b00}
.in-body{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;background-color:#efeae2;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.05' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='20' cy='22' r='7'/%3E%3Cpath d='M70 18h14M77 11v14'/%3E%3Cpath d='M30 80l10 10M40 80L30 90'/%3E%3Crect x='80' y='70' width='16' height='12' rx='3'/%3E%3Cpath d='M58 100q6-8 12 0'/%3E%3C/g%3E%3C/svg%3E")}
.inbox .in-msgs{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(11,20,26,.25) transparent;padding:12px 7% 10px;gap:0}
.in-day{align-self:center;margin:12px 0 8px}
.in-day span{display:inline-block;background:#fff;color:var(--wa-ic);font-size:12.5px;padding:5px 12px;border-radius:8px;box-shadow:0 1px 1px rgba(11,20,26,.13)}
.inbox .msg{margin-top:2px} .inbox .msg.first{margin-top:9px}
.inbox .msg-b{position:relative;max-width:min(65%,600px);padding:6px 8px 5px 9px;border-radius:8px;font-size:14.2px;line-height:1.38;background:#fff;box-shadow:0 1px .5px rgba(11,20,26,.13);color:var(--wa-ink)}
.inbox .msg.out .msg-b{background:#d9fdd3}
.inbox .msg.first.in .msg-b{border-top-left-radius:0}.inbox .msg.first.out .msg-b{border-top-right-radius:0}
.inbox .msg.first.in .msg-b::before,.inbox .msg.first.out .msg-b::before{content:"";position:absolute;top:0;width:0;height:0;border-bottom:9px solid transparent}
.inbox .msg.first.in .msg-b::before{left:-8px;border-right:9px solid #fff}
.inbox .msg.first.out .msg-b::before{right:-8px;border-left:9px solid #d9fdd3}
.inbox .msg-b::after{content:"";display:table;clear:both}
.inbox .msg-t{display:inline;white-space:pre-wrap;word-break:break-word}
.inbox .msg-s{display:block;font-size:12.5px}
.inbox .msg-img{max-width:100%;width:auto;max-height:300px;border-radius:6px;display:block;margin:0 0 3px}
.inbox .msg-file{display:inline-block;margin-bottom:2px}
.inbox .msg-m{float:right;display:flex;align-items:center;gap:3px;margin:7px 0 -2px 12px;height:15px;font-size:11px;color:var(--wa-sub);text-align:right;white-space:nowrap}
.msg-m .in-tick{font-size:12px;letter-spacing:-2px;color:#8696a0;margin-left:1px} .msg-m .in-tick.read{color:#53bdeb} .msg-m .in-tick.failed{color:var(--red)}
.in-down{position:absolute;right:18px;bottom:14px;width:42px;height:42px;border-radius:50%;border:0;background:#fff;color:var(--wa-ic);display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 6px rgba(11,20,26,.25);z-index:5}
.in-down:hover{background:#f5f6f6}
.inbox .in-err{border-radius:0}
.inbox .in-fname{background:var(--wa-bg);padding:6px 16px;border-top:1px solid var(--wa-line)}
.inbox .in-compose{background:var(--wa-bg);border-top:0;padding:10px 14px;gap:4px;align-items:flex-end}
.inbox .in-compose textarea{flex:1;min-height:42px;max-height:140px;border:0!important;box-shadow:none!important;outline:0;border-radius:10px;background:#fff;padding:10px 14px;font-size:15px;line-height:1.35;margin:0 4px}
.in-send{width:44px;height:44px;border-radius:50%;border:0;background:var(--brand);color:#fff;display:grid;place-items:center;cursor:pointer;flex:none;padding:0;transition:background .15s,transform .1s}
.in-send:hover{background:var(--brand-dark)} .in-send:active{transform:scale(.95)} .in-send:disabled{opacity:.6;cursor:default}
.inbox .qr-pop{bottom:68px}
@media (max-width:860px){
  body.inbox-page .content{padding:0}
  body.inbox-page .content>.alert{margin:10px}
  .inbox{grid-template-columns:minmax(0,1fr);border-radius:0;border-left:0;border-right:0}
  .inbox .in-back{display:inline-grid}
  .inbox .in-msgs{padding:10px 12px}
  .inbox .msg-b{max-width:84%}
  .in-act span{display:none} .in-act{padding:8px}
}

/* Inbox: attach menu, file preview, emoji picker, "sent by" tag */
.at-pop{position:absolute;left:12px;bottom:68px;z-index:30;min-width:190px;background:#fff;border-radius:14px;box-shadow:0 8px 30px rgba(11,20,26,.22);padding:8px}
.at-pop button{display:flex;align-items:center;gap:14px;width:100%;border:0;background:transparent;border-radius:8px;padding:9px 12px;font:inherit;font-size:15px;color:var(--wa-ink,#111b21);cursor:pointer;text-align:left}
.at-pop button:hover,.at-pop button:focus-visible{background:#f0f2f5;outline:0}
.at-ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;flex:none}
.at-ic.doc{background:#7f66ff}.at-ic.img{background:#007bfc}.at-ic.vid{background:#e0266d}.at-ic.aud{background:#ff6a3d}
.fp-dlg{width:min(480px,94vw)}
.fp-dlg h2{margin:0 0 12px}
.fp-view{background:#0b141a;border-radius:10px;min-height:120px;max-height:46vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.fp-view img,.fp-view video{max-width:100%;max-height:46vh;display:block;object-fit:contain}
.fp-view audio{width:92%;margin:26px 0}
.fp-doc{display:flex;flex-direction:column;align-items:center;gap:12px;padding:30px 20px;color:#fff;text-align:center;max-width:100%}
.fp-doc b{font-weight:500;word-break:break-all;font-size:14px}
.fp-doc-ic{width:64px;height:78px;border-radius:8px;background:#7f66ff;display:grid;place-items:center;font-weight:800;font-size:15px;letter-spacing:.5px}
.fp-meta{margin:8px 2px 0;word-break:break-all}
.fp-capwrap{display:flex;align-items:flex-end;gap:6px;margin-top:12px;background:#f0f2f5;border-radius:10px;padding:4px 4px 4px 4px}
.fp-capwrap textarea{flex:1;border:0!important;box-shadow:none!important;background:transparent!important;resize:none;padding:9px 10px;outline:0;font-size:15px;min-height:44px}
.emo-pop{position:fixed;z-index:400;background:#fff;border-radius:14px;box-shadow:0 8px 30px rgba(11,20,26,.25);overflow:hidden;display:flex;flex-direction:column;max-height:300px}
.emo-tabs{display:flex;gap:2px;padding:6px 8px 0;border-bottom:1px solid #e9edef;overflow-x:auto;scrollbar-width:none;flex:none}
.emo-tab{border:0;background:transparent;padding:7px 10px;font:inherit;font-size:12.5px;font-weight:600;color:#667781;cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap}
.emo-tab.on{color:var(--brand-dark);border-bottom-color:var(--brand)}
.emo-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:8px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.emo{border:0;background:transparent;border-radius:8px;font-size:22px;line-height:1;padding:6px 0;cursor:pointer;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.emo:hover,.emo:focus-visible{background:#f0f2f5;outline:0}
.inbox .msg-via{display:inline-block;margin:0 0 3px;padding:0 7px;border-radius:99px;font-size:10.5px;line-height:16px;font-weight:700;letter-spacing:.2px;background:rgba(11,20,26,.07);color:#54656f}
.inbox .msg-via.via-broadcast{background:#fff0d6;color:#8a5a00}
.inbox .msg-via.via-api{background:#e3e8ff;color:#3347b3}
.inbox .msg-via.via-flow,.inbox .msg-via.via-auto{background:#e2f6e9;color:#12703a}
.inbox .msg-via.via-single{background:#f3e5ff;color:#6a2c9c}
.inbox .msg-via.via-warmer{background:#ffe5e0;color:#a33a24}
.inbox .msg-b>.msg-via{display:block;width:max-content}
@media (max-width:860px){.at-pop{left:8px}}

/* Team members */
.perm-chips{display:flex;flex-wrap:wrap;gap:4px;max-width:420px}
.perm-chip{display:inline-block;background:var(--brand-soft);color:var(--brand-dark);border-radius:99px;padding:1px 9px;font-size:12px;font-weight:600;white-space:nowrap}
.perm-chip.restrict{background:#fff3cd;color:#7a5b00}
.team-presets{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.team-presets .chip{border:1px solid var(--line);background:#fff;border-radius:99px;padding:5px 13px;font-size:13px;font-weight:600;cursor:pointer;color:var(--ink)}
.team-presets .chip:hover{border-color:var(--brand);color:var(--brand-dark)}
.tp-group{border:1px solid var(--line);border-radius:12px;margin-bottom:10px;overflow:hidden;background:#fff}
.tp-group.restrict{background:#fffdf5;border-color:#f1e3b4}
.tp-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;margin:0;cursor:pointer;font-weight:400}
.tp-row+.tp-row{border-top:1px solid #eef2ef}
.tp-child{padding-left:34px;background:#fafcfb}
.tp-child.off{opacity:.5;cursor:not-allowed}
.tp-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.tp-text b{font-weight:600;font-size:14.5px;color:var(--ink)}
.tp-child .tp-text b{font-weight:500;font-size:14px}
.tp-hint{font-size:12.5px;color:var(--muted);line-height:1.4}
.tp-switch{position:relative;flex:none;width:42px;height:24px}
.tp-switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:2}
.tp-switch i{position:absolute;inset:0;border-radius:99px;background:#cdd5d1;transition:background .15s}
.tp-switch i::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.tp-switch input:checked+i{background:var(--brand)} .tp-switch input:checked+i::after{transform:translateX(18px)}
.tp-group.restrict .tp-switch input:checked+i{background:#d99a00}
.tp-switch input:focus-visible+i{outline:2px solid var(--brand);outline-offset:2px}
.tp-switch input:disabled{cursor:not-allowed}
@media (max-width:640px){.tp-row{padding:12px}.tp-child{padding-left:22px}}

/* Inbox: team (assign, who looks after a chat) */
.in-sel{flex-wrap:wrap}
.in-sel #in-agent{flex:1 1 100%}
.in-assign{padding:0 6px 0 10px;cursor:default}
.in-assign select{border:0;background:transparent;font:inherit;font-size:13px;font-weight:500;color:inherit;padding:8px 2px;max-width:150px;cursor:pointer;height:auto;margin:0;width:auto}
.in-assign:hover{background:#e4e7e9}
.as-row{margin-top:3px}
.as-chip{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:99px;padding:0 8px;font-size:11px;line-height:18px;font-weight:600;background:#e7f3ef;color:#0b5d4b}
@media (max-width:760px){.in-assign select{max-width:96px}}


/* Flow builder: the list of nodes you drag onto the canvas */
.fbx-pal{height:var(--fbx-h);overflow:auto;padding:12px 10px;border-right:1px solid var(--line);background:#fafbfa}
.fbx-pal-h{font-size:12px;font-weight:600;color:var(--muted);padding:0 4px 8px}
.fbx-pal-list{display:flex;flex-direction:column;gap:7px}
.fbx-pi{--c:#1f7a4d;--bg:#eefbf3;--bd:#bfe8cf;display:flex;align-items:center;gap:9px;width:100%;margin:0;padding:8px 10px;border:1px solid var(--bd);border-radius:10px;background:var(--bg);color:var(--c);font:inherit;font-size:13px;font-weight:600;text-align:left;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;transition:box-shadow .15s,transform .15s}
.fbx-pi svg{flex:none;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fbx-pi span{min-width:0;line-height:1.2}
.fbx-pi:hover{box-shadow:0 2px 8px rgba(16,35,30,.14);transform:translateY(-1px)}
.fbx-pi:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.fbx-pi.t-media{--c:#2554b8;--bg:#eef3ff;--bd:#c7d7fb} .fbx-pi.t-tpl{--c:#0f766e;--bg:#ecfdfa;--bd:#b4ece3}
.fbx-pi.t-btn{--c:#8a5a00;--bg:#fff8d6;--bd:#f2e08a} .fbx-pi.t-list{--c:#6b3fb0;--bg:#f6f0ff;--bd:#dccbf7}
.fbx-pi.t-cta{--c:#0b7a8a;--bg:#e9fbff;--bd:#b3eaf3} .fbx-pi.t-delay{--c:#b4540a;--bg:#fff3e6;--bd:#f9d2a8}
.fbx-pi.t-cond{--c:#1f7a4d;--bg:#eefbf3;--bd:#bfe8cf} .fbx-pi.t-save{--c:#a21caf;--bg:#fdf0ff;--bd:#f0c4f5}
.fbx-pi.t-api{--c:#1d6fb8;--bg:#eef7ff;--bd:#bcdcf7} .fbx-pi.t-ai{--c:#4338ca;--bg:#eef0ff;--bd:#c9ccf8}
.fbx-pi.t-assign{--c:#0e7490;--bg:#e8fafd;--bd:#a9e6ef} .fbx-pi.t-human{--c:#b42318;--bg:#fff0ef;--bd:#f7c1bc}
.fbx-pi.t-end{--c:#4b5563;--bg:#f3f4f6;--bd:#d6d9de}
.fbx-pi.ghost{position:fixed;z-index:3000;width:200px;pointer-events:none;cursor:grabbing;box-shadow:0 10px 28px rgba(16,35,30,.28);transform:rotate(-2deg);opacity:.96}
.fbx-canvas.drop-ok{box-shadow:inset 0 0 0 2px var(--brand)}
.fbx-nh .fbx-ic{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.fbx-c-team .fbx-nh{background:#e0f6fa}

/* ── File manager ───────────────────────────────────────────────── */
.fm{position:relative}
.fm.drop{outline:2px dashed var(--brand);outline-offset:6px;border-radius:12px}
.fm-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.fm-tabs{display:flex;gap:4px;flex-wrap:wrap;background:var(--gray-soft);padding:3px;border-radius:10px}
.fm-tab{border:0;background:transparent;padding:6px 12px;border-radius:8px;font:inherit;font-size:13px;color:var(--muted);cursor:pointer}
.fm-tab:hover{color:var(--ink)} .fm-tab.on{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(16,35,30,.1)}
.fm-search{flex:1;min-width:150px;display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:10px;padding:0 10px;background:#fff;color:var(--soft)}
.fm-search input{border:0;outline:0;background:transparent;font:inherit;padding:8px 0;flex:1;min-width:0;color:var(--ink)}
.fm-search:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.fm-i{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.fm-msg{min-height:0;font-size:13px;margin-bottom:8px} .fm-msg:empty{display:none}
.fm-msg.ok{color:var(--brand-dark)} .fm-msg.bad{color:var(--red)}
.fm-prog{height:4px;background:var(--gray-soft);border-radius:99px;overflow:hidden;margin-bottom:10px} .fm-prog span{display:block;height:100%;background:var(--brand);transition:width .2s}
.fm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
.fm-card{position:relative;border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden;cursor:pointer;display:flex;flex-direction:column}
.fm-card:hover{border-color:#c7d6cf;box-shadow:var(--shadow)} .fm-card:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.fm-card.sel{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.fm-th{height:112px;background:var(--gray-soft);display:grid;place-items:center;position:relative;overflow:hidden;color:var(--muted)}
.fm-th img,.fm-th video{width:100%;height:100%;object-fit:cover;display:block}
.fm-th .fm-ext{position:absolute;bottom:8px;left:8px;background:#fff;border-radius:6px;padding:1px 7px;font-size:11px;font-weight:700;color:var(--ink)}
.fm-th.fm-k-audio{background:#eaf1ff;color:var(--blue)} .fm-th.fm-k-document{background:#fff4e0;color:var(--amber)} .fm-th.fm-k-video{background:#1c2b27;color:#fff}
.fm-play{position:absolute;right:8px;bottom:8px;width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center}
.fm-info{padding:8px 10px 6px;min-width:0} .fm-nm{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fm-mt{font-size:12px;color:var(--muted)}
.fm-acts{display:flex;gap:2px;padding:0 6px 6px}
.fm-ib{border:0;background:transparent;color:var(--muted);width:30px;height:30px;border-radius:8px;display:inline-grid;place-items:center;cursor:pointer;text-decoration:none}
.fm-ib:hover{background:var(--gray-soft);color:var(--ink);text-decoration:none} .fm-ib.danger:hover{background:var(--red-soft);color:var(--red)}
.fm-ib:focus-visible{outline:2px solid var(--brand)}
.fm-empty{grid-column:1/-1;text-align:center;padding:34px 12px;color:var(--soft)} .fm-empty p{margin:8px 0 0;color:var(--muted)}
.fm-more{display:block;margin:14px auto 0}
.fm-quota{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px}
.fm-ql{display:flex;gap:6px 16px;flex-wrap:wrap;justify-content:space-between}
.fm-qb{height:7px;background:var(--gray-soft);border-radius:99px;overflow:hidden;margin-top:7px} .fm-qb i{display:block;height:100%;background:var(--brand);border-radius:99px} .fm-qb.hot i{background:var(--red)}
.fm-qn{margin-top:8px;color:var(--amber)}
.fm-top{display:flex;gap:18px 32px;flex-wrap:wrap;align-items:center}
.fm-top-main{flex:1;min-width:220px} .fm-top-n{font-size:20px;font-weight:700}
.fm-top-n .muted{font-size:13px;font-weight:400}
.fm-top-lim{display:flex;gap:20px;flex-wrap:wrap} .fm-top-lim div{display:flex;flex-direction:column}
/* picker window */
.fm-dlg{width:min(860px,96vw);max-height:92vh;padding:0;border:0;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.3);overflow:hidden}
.fm-dlg[open]{display:flex;flex-direction:column}
.fm-dlg::backdrop,.fm-prev::backdrop{background:rgba(8,20,16,.55)}
.fm-dh{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)} .fm-dh h2{margin:0}
.fm-db{padding:14px 18px;overflow:auto;flex:1;min-height:280px} .fm-pick .fm-th{height:92px} .fm-pick .fm-grid{grid-template-columns:repeat(auto-fill,minmax(138px,1fr))}
.fm-pick .fm-acts{padding:0 4px 4px}
.fm-df{display:flex;gap:10px;align-items:center;padding:12px 18px;border-top:1px solid var(--line);background:#fafcfb}
/* preview window */
.fm-prev{width:min(920px,96vw);max-height:94vh;padding:0;border:0;border-radius:14px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.fm-prev[open]{display:flex;flex-direction:column}
.fm-ph{display:flex;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)} .fm-ph b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} .fm-ph .muted{flex:1;white-space:nowrap}
.fm-pv{background:#0e1a16;display:grid;place-items:center;min-height:300px;max-height:68vh;overflow:auto;flex:1}
.fm-pv img,.fm-pv video{max-width:100%;max-height:68vh;display:block} .fm-pv audio{width:min(480px,90%);margin:60px 0} .fm-pv iframe{width:100%;height:68vh;border:0;background:#fff}
.fm-nopv{color:#cfe8dd;text-align:center;padding:40px 16px} .fm-nopv p{margin:8px 0 0}
.fm-pf{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line);justify-content:flex-end}
/* the form control */
.fm-field{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px}
.fm-chip{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:4px 4px 4px 4px;min-width:0;max-width:100%}
.fm-chip-th{width:38px;height:38px;border-radius:8px;overflow:hidden;background:var(--gray-soft);display:grid;place-items:center;color:var(--muted);flex:none} .fm-chip-th img{width:100%;height:100%;object-fit:cover}
.fm-chip-tx{display:flex;flex-direction:column;min-width:0;line-height:1.25} .fm-chip-tx b{font-size:13px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:560px){.fm-grid{grid-template-columns:repeat(2,1fr)}.fm-dlg{width:100vw;max-height:100vh;border-radius:0}.fm-top-lim{gap:14px}}
@media (prefers-reduced-motion:reduce){.fm-prog span{transition:none}}
.fb-fm{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fb-fm-chip{display:flex;gap:8px;align-items:center;background:var(--brand-soft);color:var(--brand-dark);border-radius:8px;padding:3px 4px 3px 10px;font-size:13px;max-width:100%}
.fb-fm-chip b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}
.fm [hidden],.fm-dlg [hidden],.fm-field [hidden]{display:none!important}
/* flow: which numbers it runs on */
.fl-nums-box{margin:4px 0 14px;padding-top:14px;border-top:1px solid var(--line)}
.fl-nums-h{margin-bottom:8px}
.fl-nums{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.fl-num{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:9px 12px;background:#fff;cursor:pointer;margin:0}
.fl-num:hover{border-color:#c7d6cf} .fl-num:has(input:checked){border-color:var(--brand);background:var(--brand-soft)}
.fl-num input{margin-top:3px;flex:none} .fl-num span{display:flex;flex-direction:column;min-width:0} .fl-num b{font-weight:600} .fl-num small{color:var(--muted);font-size:12px}
.fl-num.off:not(.all){opacity:.55}

/* Inbox: contact card */
.ii-trigger{cursor:pointer} .ii-trigger:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:8px}
.in-head #c-who:hover #c-title{text-decoration:underline}
.in-info{position:absolute;top:0;right:0;bottom:0;width:390px;max-width:100%;background:#fff;z-index:25;display:flex;flex-direction:column;box-shadow:-8px 0 28px rgba(11,20,26,.18);animation:iiIn .18s ease-out}
.in-info[hidden]{display:none}
@keyframes iiIn{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.in-info{animation:none}}
.ii-head{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--wa-bg,#f0f2f5);border-bottom:1px solid var(--wa-line,#e9edef);min-height:60px}
.ii-head .in-ic{font-size:16px;line-height:1}
.ii-body{flex:1;overflow-y:auto;padding:0 0 16px;background:#f0f2f5}
.ii-top{background:#fff;padding:22px 18px 16px;text-align:center;margin-bottom:8px}
.ii-av{width:96px!important;height:96px!important;margin:0 auto 10px;font-size:34px!important;cursor:default}
.ii-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.ii-name{font-size:19px;font-weight:600;overflow-wrap:anywhere}
.ii-phone{display:flex;gap:8px;align-items:center;justify-content:center;color:var(--muted);margin-top:2px}
.ii-copy{border:0;background:var(--gray-soft);border-radius:6px;padding:2px 9px;font:inherit;font-size:12px;cursor:pointer;color:var(--ink)} .ii-copy:hover{background:#e1e8e4}
.ii-state{margin-top:8px;font-size:12.5px;color:var(--amber)} .ii-state.on{color:var(--brand-dark)}
.ii-s{background:#fff;padding:14px 18px 6px;margin-bottom:8px}
.ii-s h3{font-size:13px;color:var(--brand-dark);margin:0 0 10px;font-weight:600}
.ii-f{margin-bottom:12px} .ii-f label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:3px}
.ii-f input,.ii-f select,.ii-f textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:inherit;background:#fafcfb;color:var(--ink)}
.ii-f input:focus,.ii-f select:focus,.ii-f textarea:focus{outline:0;border-color:var(--brand);background:#fff;box-shadow:0 0 0 3px var(--brand-soft)}
.ii-hint{font-size:12px;color:var(--soft);margin-top:3px} .ii-hidden{font-size:13px;color:var(--soft);padding:8px 0}
.ii-chk{display:flex;gap:8px;align-items:center;margin:0 0 10px;font-size:14px;cursor:pointer}
.ii-rows{margin-bottom:8px} .ii-row{display:grid;grid-template-columns:1fr 1.4fr 30px;gap:6px;margin-bottom:8px}
.ii-row input{border:1px solid var(--line);border-radius:8px;padding:7px 9px;font:inherit;min-width:0;background:#fafcfb}
.ii-rm{border:0;background:transparent;font-size:20px;line-height:1;color:var(--muted);cursor:pointer;border-radius:8px} .ii-rm:hover{background:var(--red-soft);color:var(--red)}
.ii-s .btn{margin-bottom:12px}
.ii-dl{display:grid;grid-template-columns:1fr auto;gap:6px 12px;margin:0 0 12px;font-size:13.5px} .ii-dl dt{color:var(--muted)} .ii-dl dd{margin:0;text-align:right;font-weight:500}
.ii-note{padding:18px;color:var(--muted);text-align:center;margin:0} .ii-note.bad{color:var(--red)}
.ii-foot{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--line);background:#fff}
.ii-foot span{flex:1;font-size:13px} .ii-foot .ok{color:var(--brand-dark)} .ii-foot .bad{color:var(--red)}
@media (max-width:860px){.in-info{width:100%}}

/* inbox image viewer */
body.iv-lock{overflow:hidden}
.iv{position:fixed;inset:0;z-index:3000;background:#fff;display:flex;flex-direction:column;color:#1f2430}
.iv[hidden]{display:none}
.iv-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;border-bottom:1px solid #e6e8ee;flex:none}
.iv-who{min-width:0}.iv-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iv-acts{display:flex;align-items:center;gap:8px;flex:none}
.iv-btn{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;color:inherit;font:inherit;font-weight:600;cursor:pointer;padding:8px 12px;border-radius:9px;text-decoration:none}
.iv-btn:hover{background:#f0f1f6}
.iv-dl{background:#f1edfd;color:#5b34d6}.iv-dl:hover{background:#e6defb}
.iv-btn:focus-visible,.iv-nav:focus-visible,.iv-th:focus-visible{outline:3px solid #8b6cf0;outline-offset:2px}
.iv-stage{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;padding:14px 70px}
.iv-big{max-width:100%;max-height:100%;object-fit:contain;display:block;border-radius:4px}
.iv-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(31,36,48,.55);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.iv-nav:hover{background:rgba(31,36,48,.8)}
.iv-nav[hidden]{display:none}
.iv-prev{left:14px}.iv-next{right:14px}
.iv-cap{text-align:center;padding:6px 20px 10px;font-size:14px;max-height:84px;overflow:auto;white-space:pre-wrap;flex:none}
.iv-strip{display:flex;gap:8px;overflow-x:auto;padding:10px 16px 14px;border-top:1px solid #e6e8ee;justify-content:safe center;flex:none;scroll-behavior:smooth}
.iv-th{flex:none;width:62px;height:62px;border-radius:8px;border:2px solid transparent;padding:0;background:#eef0f5;cursor:pointer;overflow:hidden;opacity:.75}
.iv-th img{width:100%;height:100%;object-fit:cover;display:block}
.iv-th:hover{opacity:1}
.iv-th.on{border-color:#6c3ff0;opacity:1}
@media (max-width:640px){.iv-stage{padding:10px 8px}.iv-nav{width:38px;height:38px}.iv-prev{left:6px}.iv-next{right:6px}.iv-dl span{display:none}.iv-th{width:52px;height:52px}}
@media (prefers-reduced-motion:reduce){.iv-strip{scroll-behavior:auto}}

/* inbox: "more" menu and the clear / delete dialog */
.cm-pop{min-width:190px;padding:6px}
@media (max-width:760px){.lb-pop.cm-pop{left:auto;right:0}}
.cm-i{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;text-align:left;border:0;background:transparent;color:var(--ink,#1f2430);font:inherit;font-size:14px;padding:9px 10px;border-radius:8px;cursor:pointer;text-decoration:none}
.cm-i:hover,.cm-i:focus-visible{background:#f1f2f6;outline:none}
.cm-i.danger{color:var(--red,#b42318)}
.cm-i.danger:hover,.cm-i.danger:focus-visible{background:#fdecea}
.cd-dlg{width:min(440px,94vw)}
.cd-dlg h2{margin:0 0 8px}
.cd-tick{display:flex;gap:10px;align-items:flex-start;margin:12px 0 4px;padding:12px;border:1px solid var(--line,#e3e6ee);border-radius:10px;cursor:pointer}
.cd-tick input{margin-top:3px;width:17px;height:17px;flex:none}
.cd-tick span span{display:block;margin-top:2px}

/* default picture: a grey person / people */
.av.av-def{background:#dfe5ec;color:#fff}
.av.av-def .av-sil{width:78%;height:78%;display:block;color:#9aa7b5;margin-top:14%}
.ii-av.av-def .av-sil{width:80%;height:80%}

/* admin: WhatsApp health */
.wh-tabs{margin:0 0 18px;border-bottom:1px solid var(--line);gap:2px}
.wh-tabs a{padding:9px 14px;border-radius:9px 9px 0 0;color:var(--muted);font-weight:600;text-decoration:none;border-bottom:3px solid transparent;margin-bottom:-1px}
.wh-tabs a:hover{color:var(--ink);background:#f4f8f6}
.wh-tabs a.on{color:var(--brand-dark);border-bottom-color:var(--brand)}
.wh-dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:8px 0 14px}.wh-dl dt{color:var(--muted)}.wh-dl dd{margin:0;font-weight:600;word-break:break-word}
.wh-row{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line)}.wh-row:first-of-type{border-top:0}
.wh-step{padding:6px 0 6px 2px;border-top:1px solid var(--line)}.wh-step:first-of-type{border-top:0}
.wh-step>span:first-child{display:inline-block;width:18px;font-weight:700}
.wh-step.ok>span:first-child{color:var(--brand-dark)}.wh-step.warn>span:first-child{color:var(--amber)}.wh-step.bad>span:first-child{color:var(--red)}
.wh-step .muted{font-size:13px;margin-left:20px}.wh-step>span.muted{margin-left:4px}
.wh-verdict{padding:10px 14px;border-radius:10px;margin-bottom:8px;background:var(--brand-soft)}
.wh-verdict.warn{background:var(--amber-soft)}.wh-verdict.fail{background:var(--red-soft)}
.wh-steps{list-style:none;margin:8px 0 0;padding:0}.wh-steps li{padding:9px 0 9px 34px;position:relative;border-top:1px solid var(--line);color:var(--muted)}.wh-steps li:first-child{border-top:0}
.wh-steps li::before{content:'';position:absolute;left:6px;top:11px;width:16px;height:16px;border-radius:50%;border:2px solid #c9d3ce;box-sizing:border-box}
.wh-steps li.run{color:var(--ink);font-weight:600}.wh-steps li.run::before{border-color:var(--brand);border-top-color:transparent;animation:whspin 1s linear infinite}
.wh-steps li.ok{color:var(--ink)}.wh-steps li.ok::before{background:var(--brand);border-color:var(--brand)}
.wh-steps li.bad{color:var(--red)}.wh-steps li.bad::before{background:var(--red);border-color:var(--red)}
.wh-steps .st{font-weight:400;color:var(--muted)}
@keyframes whspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.wh-steps li.run::before{animation:none}}
@media (max-width:900px){.grid.split-12[style]{grid-template-columns:1fr!important}}

/* dashboard: big numbers with a coloured round icon and a "Manage ..." link */
.dash{border-top:4px solid var(--brand);border-radius:0 0 14px 14px;padding:22px 20px 6px;margin:-6px -6px 18px;background-color:#f6f8f6;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180' fill='none' stroke='%238a9a95' stroke-opacity='.16' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 28h34a6 6 0 0 1 6 6v18a6 6 0 0 1-6 6H40l-10 9v-9h-8a6 6 0 0 1-6-6V34a6 6 0 0 1 6-6z'/%3E%3Cpath d='M118 40a14 14 0 1 0 28 0 14 14 0 0 0-28 0zM126 40l5 5 8-9'/%3E%3Cpath d='M44 120c-10-8-16-14-16-21a9 9 0 0 1 16-5 9 9 0 0 1 16 5c0 7-6 13-16 21z'/%3E%3Cpath d='M120 112l22 8-9 4 6 10-6 3-6-10-7 7z'/%3E%3Ccircle cx='96' cy='150' r='4'/%3E%3Ccircle cx='160' cy='92' r='3'/%3E%3C/svg%3E")}
.dash-hi{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 18px}
.dash-hi h1{font-size:34px;font-weight:500;color:var(--brand);letter-spacing:-.4px;line-height:1.15}
.dash-hi .btn{margin-left:2px}
.sc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:18px}
.sc{background:var(--card);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);padding:22px 24px 20px;min-height:160px;display:flex;flex-direction:column;justify-content:space-between;gap:18px}
.sc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.sc-main{min-width:0}
.sc-l{font-size:13px;letter-spacing:.2px;text-transform:uppercase;color:var(--muted)}
.sc-v{font-size:32px;font-weight:700;line-height:1.2;margin-top:6px;color:#2a2d52;overflow-wrap:anywhere}
.sc-ic{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;flex:none;color:#fff;background:var(--brand)}
.sc-ic.teal{background:#1796a8}.sc-ic.blue{background:#2f6fe4}.sc-ic.pink{background:#ee3a62}.sc-ic.orange{background:#f4623a}.sc-ic.amber{background:#d98a0b}.sc-ic.purple{background:#7a54d6}.sc-ic.slate{background:#56667a}
.sc-foot{min-height:20px;font-size:14px}
.sc-foot a{color:var(--brand-dark)}
.sc-note{color:var(--muted);font-size:13px}
@media (max-width:1180px){.sc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.sc-grid{grid-template-columns:1fr;gap:12px}.dash{padding:16px 12px 2px;margin:-6px 0 16px}.dash-hi h1{font-size:28px}.sc{min-height:0}}

/* inbox: the buttons of a message we sent */
.msg-f{font-size:12px;color:var(--soft);margin-top:3px}
.msg-btns{margin:6px -2px 2px;display:flex;flex-direction:column;gap:3px}
.msg-btn{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;padding:7px 10px;border-radius:7px;background:rgba(255,255,255,.75);color:#027eb5;font-size:13.5px;text-align:center;box-shadow:0 1px 0 rgba(11,20,26,.08)}
.msg-btn b{font-weight:600}.msg-bi{font-size:14px;line-height:1}
.msg-bt{flex-basis:100%;font-size:11.5px;font-weight:400;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.msg-bn{color:var(--muted);margin-top:4px}