/* Sidebar panel — gaya kustom (tanpa build Tailwind). Warna ikut variabel tema di app.src.css */
@property --sb-ft { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --sb-fb { syntax: '<length>'; inherits: false; initial-value: 0px; }

/* ---------- Logo ---------- */
.sb-logo { display:grid; place-items:center; width:1.875rem; height:1.875rem; border-radius:.625rem; color:#fff;
  background:linear-gradient(135deg,#60a5fa 0%,#2563eb 55%,#1d4ed8 100%);
  box-shadow:0 6px 14px -4px rgb(37 99 235/.55), inset 0 1px 0 rgb(255 255 255/.35); }

/* ---------- Area scroll ---------- */
.sb-nav { --sb-ft:0px; --sb-fb:0px; flex:1 1 0%; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
  padding:.125rem .625rem .875rem; scrollbar-width:thin; scrollbar-color:transparent transparent;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--sb-ft),#000 calc(100% - var(--sb-fb)),transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 var(--sb-ft),#000 calc(100% - var(--sb-fb)),transparent 100%);
  transition:--sb-ft .2s ease, --sb-fb .2s ease; }
.sb-nav.sb-t { --sb-ft:22px; }
.sb-nav.sb-b { --sb-fb:34px; }
.sb-nav:hover { scrollbar-color:rgb(var(--muted)/.4) transparent; }
.sb-nav::-webkit-scrollbar { width:6px; }
.sb-nav::-webkit-scrollbar-button { display:none; width:0; height:0; }
.sb-nav::-webkit-scrollbar-track { background:transparent; }
.sb-nav::-webkit-scrollbar-thumb { background:transparent; border-radius:999px; }
.sb-nav:hover::-webkit-scrollbar-thumb { background:rgb(var(--muted)/.4); }
.sb-nav::-webkit-scrollbar-thumb:hover { background:rgb(var(--muted)/.7); }

/* ---------- Judul grup ---------- */
.sb-label { display:flex; align-items:center; gap:.5rem; width:100%; padding:1.125rem .5rem .375rem; font-size:10.5px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:rgb(var(--muted)/.8); background:none; border:0; cursor:default; text-align:left; }
.sb-label::after { content:""; flex:1 1 auto; height:1px; background:linear-gradient(90deg,rgb(var(--line)),transparent); }
button.sb-label { cursor:pointer; }
button.sb-label:hover { color:rgb(var(--fg)); }
.sb-label .sb-chev { order:2; transition:transform .2s ease; }

/* ---------- Item menu ---------- */
.sb-link { position:relative; display:flex; align-items:center; gap:.625rem; padding:.3125rem .5rem; margin-top:2px; border-radius:.75rem;
  font-size:13px; font-weight:500; color:rgb(var(--muted)); transition:background-color .18s, color .18s; outline:none; }
.sb-ico { display:grid; place-items:center; flex:none; width:1.75rem; height:1.75rem; border-radius:.5rem; background:rgb(var(--subtle));
  color:rgb(var(--muted)); transition:background .18s, color .18s, transform .18s, box-shadow .18s; }
.sb-txt { min-width:0; flex:1 1 0%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sb-link:hover { color:rgb(var(--fg)); background:rgb(var(--subtle)/.7); }
.sb-link:hover .sb-ico { background:rgb(37 99 235/.12); color:#2563eb; transform:scale(1.06); }
.dark .sb-link:hover .sb-ico { background:rgb(96 165 250/.16); color:#93c5fd; }
.sb-link:focus-visible { box-shadow:0 0 0 2px rgb(59 130 246/.45); }

.sb-link[aria-current="page"] { color:rgb(var(--fg)); font-weight:600; background:linear-gradient(90deg,rgb(37 99 235/.13),rgb(37 99 235/.03) 70%,transparent); }
.dark .sb-link[aria-current="page"] { background:linear-gradient(90deg,rgb(96 165 250/.18),rgb(96 165 250/.04) 70%,transparent); }
.sb-link[aria-current="page"] .sb-ico { color:#fff; transform:none; background:linear-gradient(135deg,#3b82f6,#1d4ed8);
  box-shadow:0 6px 12px -4px rgb(37 99 235/.6), inset 0 1px 0 rgb(255 255 255/.28); }
.sb-link[aria-current="page"]::before { content:""; position:absolute; left:-.625rem; top:.4375rem; bottom:.4375rem; width:3px;
  border-radius:0 4px 4px 0; background:linear-gradient(180deg,#60a5fa,#2563eb); box-shadow:0 0 10px rgb(59 130 246/.7); }

/* "Segera hadir" */
.sb-link.is-soon { color:rgb(var(--muted)/.8); }
.sb-link.is-soon .sb-ico { background:transparent; box-shadow:inset 0 0 0 1px rgb(var(--line)); }
.sb-link.is-soon[aria-current="page"] .sb-ico { box-shadow:0 6px 12px -4px rgb(37 99 235/.6); }
.sb-tag { flex:none; padding:1px 6px; border-radius:999px; font-size:9.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:rgb(var(--muted)); background:rgb(var(--subtle)); }

/* ---------- Footer: status bot + akun ---------- */
.sb-foot { flex:none; padding:.75rem; border-top:1px solid rgb(var(--line)); background:linear-gradient(180deg,transparent,rgb(var(--subtle)/.45)); }
.sb-status { display:flex; align-items:center; gap:.625rem; padding:.5rem .75rem; border-radius:.75rem; border:1px solid rgb(var(--line));
  background:rgb(var(--surface)); transition:border-color .18s, box-shadow .18s, transform .18s; }
.sb-status:hover { border-color:rgb(59 130 246/.45); box-shadow:0 4px 14px -6px rgb(37 99 235/.4); }
.sb-dot { position:relative; flex:none; width:.5rem; height:.5rem; border-radius:999px; background:#cbd5e1; }
.sb-dot.ok { background:#10b981; animation:sb-ping 2.2s cubic-bezier(0,0,.2,1) infinite; }
.sb-dot.off { background:#f59e0b; }
@keyframes sb-ping { 0% { box-shadow:0 0 0 0 rgb(16 185 129/.55); } 70%,100% { box-shadow:0 0 0 7px rgb(16 185 129/0); } }
.sb-avatar { display:grid; place-items:center; flex:none; width:2rem; height:2rem; border-radius:999px; font-size:.8125rem; font-weight:700; color:#fff;
  background:linear-gradient(135deg,#60a5fa,#2563eb); box-shadow:0 0 0 2px rgb(var(--surface)), 0 0 0 3px rgb(37 99 235/.35); }
.sb-out { display:grid; place-items:center; width:2rem; height:2rem; border-radius:.5rem; color:rgb(var(--muted)); transition:background .18s,color .18s; }
.sb-out:hover { color:#e11d48; background:rgb(225 29 72/.1); }

/* ---------- Badge jumlah pesan belum dibaca (Chat Reseller) ---------- */
.sb-badge { flex:none; min-width:1.25rem; height:1.25rem; padding:0 .4rem; border-radius:999px; font-size:.6875rem; font-weight:700; line-height:1.25rem;
  text-align:center; color:#fff; background:#2563eb; box-shadow:0 2px 6px -1px rgb(37 99 235/.5); }
.sb-badge[x-cloak] { display:none; }

/* Header kartu berwarna (gaya jokibot): bungkus judul + keterangan kartu dengan <div class="ch"> */
.cdh{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;margin:-1.25rem -1.25rem 1.1rem;padding:.95rem 1.25rem;background:var(--ch-bg);border-bottom:1px solid rgb(var(--line));border-radius:calc(.75rem - 1px) calc(.75rem - 1px) 0 0}
.cdh.p4{margin:-1rem -1rem 1rem;padding:.85rem 1rem}
.cdh.flush{margin:0;border-radius:0}
.cdh-main{min-width:0}
.cdh h2,.cdh h3{display:flex;align-items:center;gap:.5rem;font-size:.95rem;font-weight:700;line-height:1.3}
.cdh h2>svg,.cdh h3>svg{width:1.05rem;height:1.05rem;flex:none;color:rgb(var(--fg)/.7)}
.cdh .hint{margin-top:.2rem;line-height:1.35}
.cdh>button,.cdh>a,.cdh>form{flex:none}
.cdh.mid{align-items:center}
.cdh+*{margin-top:0!important}
.ol-head,.cat-head,.od-panel-head{background:var(--ch-bg)}
.bc-form .bc-h{margin:-1.25rem -1.25rem 0;padding:.95rem 1.25rem;background:var(--ch-bg);border-bottom:1px solid rgb(var(--line));border-radius:calc(.75rem - 1px) calc(.75rem - 1px) 0 0}

:root{--ch-bg:#f6f9fe}
.dark{--ch-bg:rgb(24 28 38/.9)}
.ol-head h2{display:flex;align-items:center;gap:.5rem;font-size:.95rem;font-weight:700;line-height:1.3}
.ol-head h2>svg{width:1.05rem;height:1.05rem;flex:none;color:rgb(var(--fg)/.7)}
.ol-head .hint{margin-top:.2rem}