/* =========================================================
   EL Omni-Inbox — gaya bersama semua halaman
   - state composer (dari artboard "Composer & State Balasan")
   - tampilan HP (dari artboard "Mobile — Inbox & Balasan")
   - tab bar bawah HP + toast notifikasi
   Gaya utama tiap halaman ada di css/<halaman>.css (disalin dari desain).
   ========================================================= */

/* ---------- Composer: balasan cepat "/" ---------- */
.cmp-wrap{position:relative}
.cmp-wrap .qr{position:absolute;left:0;right:0;bottom:calc(100% + 8px);z-index:30;border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow-h);overflow:hidden;background:var(--surface)}
.qr-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:0;border-bottom:1px solid var(--line);font-size:12.5px;width:100%;text-align:left;background:var(--surface);color:var(--ink);font-weight:600}
.qr-item:last-child{border-bottom:0}
.qr-item.hl,.qr-item:hover{background:var(--pink-card)}
.cmp-wrap .qr .sh{font-family:"IBM Plex Mono",monospace;font-weight:700;color:#fff;background:var(--pink);border-radius:6px;padding:2px 8px;flex:none;font-size:11px}
.qr-empty{padding:11px 12px;font-size:12.5px;color:var(--muted);font-weight:600}

/* ---------- Composer: saran AI ---------- */
.ai-card{border:1px solid var(--violet-soft);background:#F6F4FD;border-radius:13px;padding:13px;margin-bottom:10px}
.ai-top{display:flex;align-items:center;gap:7px;font-weight:800;font-size:12px;color:#6B5BC2;margin-bottom:9px}
.ai-text{font-size:13px;color:var(--ink);line-height:1.5;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:11px;margin-bottom:11px}
.ai-actions{display:flex;gap:7px}
.ab{height:34px;padding:0 13px;border-radius:9px;font-weight:800;font-size:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink2)}
.ab.use{background:var(--pink);border:0;color:#fff}

/* ---------- Composer: catatan internal ---------- */
.cmp-box.note-mode{background:var(--yellow-card);border-color:var(--yellow-soft)}
.cmp-box.note-mode .ta{color:#8A6410}
.cmp-box.note-mode .cmp-bar{border-top-color:var(--yellow-soft)}
.btn-note{background:var(--yellow);border:0;color:#5A4410}
.btn-note:hover{background:#EBAA2C}
.msg.inote{align-self:center;max-width:86%}
.msg.inote .bubble{background:var(--yellow-card);border:1px solid var(--yellow-soft);color:#8A6410;border-radius:14px}
.msg.inote .bubble .nm{display:block;font-size:10.5px;font-weight:800;color:#B07D14;margin-bottom:2px;text-transform:uppercase;letter-spacing:.04em}
.mention{color:var(--pink);font-weight:800}

/* ---------- Composer: di luar window 24 jam ---------- */
.composer{max-height:62%;overflow-y:auto}
.cmp-box.disabled .ta{min-height:44px}
.win-banner.risk{color:var(--pink);background:var(--pink-card)}
.cmp-box.disabled{background:var(--bg);border-style:dashed}
.cmp-box.disabled .ta{color:var(--muted);cursor:not-allowed}
.btn[disabled]{background:var(--bg);color:var(--muted);border:1px solid var(--line);box-shadow:none;cursor:not-allowed;transform:none}
.btn[disabled]::after{display:none}
.tpl{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.tpl-cap{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tpl-item{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:10px 11px;background:var(--bg);font-size:12.5px;width:100%;text-align:left;color:var(--ink);transition:.15s}
.tpl-item:hover{background:var(--pink-card);border-color:var(--pink-soft)}
.tpl-item .nm{font-weight:700;font-family:"IBM Plex Mono",monospace}
.catt{font-size:10px;font-weight:800;padding:2px 8px;border-radius:999px;margin-left:auto;flex:none}
.catt.util{background:var(--green-soft);color:#1E8E68}
.catt.mkt{background:var(--violet-soft);color:#6B5BC2}
.catt.auth{background:var(--surface);color:var(--ink2);border:1px solid var(--line)}

/* ---------- Asal pesan & deteksi komplain ---------- */
.c-src{display:flex;align-items:center;gap:6px;margin-top:5px;font-size:11px;font-weight:700;color:var(--ink2);background:var(--bg);border-radius:8px;padding:4px 8px;max-width:100%;width:fit-content}
.c-src span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-src .i{width:13px;height:13px;color:var(--muted)}
.conv.active .c-src{background:#fff}
.badge.b-cmp{background:var(--pink-soft);color:#C2306F;gap:4px}
.badge.b-cmp .i{width:11px;height:11px;stroke-width:2.4}
.cmp-filter.on{background:var(--pink-card);border-color:var(--pink-soft);color:var(--pink)}
.cmp-filter .mono{color:var(--pink);font-weight:700}
.q-title .cmp-filter{margin-left:auto;height:28px;padding:0 10px;font-size:11.5px;border-radius:9px;gap:5px}
.q-title .cmp-filter .mono{background:none;padding:0;font-size:11.5px}
@media (min-width:861px){
  .q-title{flex-wrap:nowrap;gap:6px}
  .q-title b{font-size:14.5px}
  .q-title .count{padding:2px 8px;font-size:11px;white-space:nowrap}
  .q-title .cmp-filter{padding:0 8px;font-size:11px;white-space:nowrap;flex:none}
}
.th-src{flex:none;padding:12px 18px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:10px;background:var(--surface)}
.th-src:empty{display:none}
.src-card{display:flex;gap:12px;align-items:center}
.src-thumb{width:52px;height:52px;border-radius:14px;flex:none;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.src-kind{font-size:8.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.src-ico{width:44px;height:44px;border-radius:13px;background:var(--bg);border:1px solid var(--line);color:var(--ink2);display:flex;align-items:center;justify-content:center;flex:none}
.src-main{flex:1;min-width:0}
.src-type{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.src-main b{display:block;font-size:13.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.src-meta{font-size:11.5px;color:var(--ink2);font-weight:600}
.src-act{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none}
.src-link{font-size:11.5px}
.cmp-alert{background:var(--pink-card);border:1px solid var(--pink-soft);border-radius:14px;padding:11px 13px}
.ca-h{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:800;color:var(--pink)}
.ca-h b{color:var(--ink)}
.ca-why{font-size:12px;color:var(--ink2);font-weight:600;margin:4px 0 9px}
.ca-why b{color:var(--ink)}
.ca-acts{display:flex;gap:6px;flex-wrap:wrap}
.ca-btn{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 11px;border-radius:9px;border:1px solid var(--pink-soft);background:#fff;color:var(--ink2);font-weight:700;font-size:12px}
.ca-btn:hover{background:var(--bg)}
.ca-btn.primary{background:var(--pink);color:#fff;border:0}
.ca-btn.done{background:var(--green-soft);color:#1E8E68;border:0}
.m-app .mc-src{display:flex;align-items:center;gap:5px;margin-top:4px;font-size:11px;font-weight:700;color:var(--muted)}
.m-app .mc-src span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-app .mc-src .i{width:12px;height:12px}
.m-app .m-src{display:flex;align-items:center;gap:7px;margin:10px 14px 0;font-size:11.5px;font-weight:700;color:var(--ink2);background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:8px 11px}
.m-app .m-src span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-app .m-cmp{display:flex;align-items:center;gap:10px;margin:8px 14px 0;background:var(--pink-card);border:1px solid var(--pink-soft);border-radius:11px;padding:8px 11px;font-size:11.5px;color:var(--pink)}
.m-app .m-cmp>div{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.m-app .m-cmp span{color:var(--ink2);font-weight:600;width:100%}
.m-app .m-cmp button{height:32px;padding:0 12px;border-radius:9px;border:0;background:var(--pink);color:#fff;font-weight:800;font-size:12px;flex:none}
.m-app .m-cmp-ok{width:auto!important;flex:none;color:#1E8E68!important;font-weight:800!important}

/* ---------- Toast notifikasi ---------- */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;z-index:100;background:var(--ink,#2A2B3A);color:#fff;font:700 13px/1.4 "Plus Jakarta Sans",system-ui,sans-serif;padding:11px 18px;border-radius:12px;box-shadow:0 10px 28px rgba(42,43,58,.25);transition:.25s;pointer-events:none;max-width:calc(100vw - 32px);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- Tampilan HP (disalin dari desain, diberi awalan .m-app) ---------- */
.m-app .scr{flex:1;display:flex;flex-direction:column;min-height:0;padding-top:14px;background:#fff}
.m-app .mhead{display:flex;align-items:center;gap:11px;padding:10px 18px 12px}
.m-app .mhead .bb{width:32px;height:32px;border-radius:10px;background:var(--pink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;box-shadow:0 6px 14px rgba(236,78,149,.35)}
.m-app .mhead b{font-size:18px;font-weight:800;flex:1;letter-spacing:-.01em}
.m-app .mhead .ic{width:40px;height:40px;border-radius:12px;background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--ink2);border:1px solid var(--line)}
.m-app .chips{display:flex;gap:8px;padding:2px 18px 12px;overflow-x:auto}
.m-app .chip{height:36px;padding:0 15px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink2);font-weight:800;font-size:12.5px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.m-app .chip.on{background:var(--pink);color:#fff;border:0}
.m-app .chip .cd{width:9px;height:9px;border-radius:50%}
.m-app .mlist{flex:1;overflow-y:auto;padding:0 12px}
.m-app .mconv{display:flex;gap:12px;padding:13px 11px;border-radius:17px;align-items:flex-start;margin-bottom:3px;border:1px solid transparent}
.m-app .mconv.sel{background:var(--pink-card);border-color:var(--pink-soft)}
.m-app .mconv .av{width:46px;height:46px;border-radius:15px;flex:none;color:#fff;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}
.m-app .mc-main{flex:1;min-width:0}
.m-app .mc-top{display:flex;align-items:center;gap:7px}
.m-app .mc-top b{font-size:14px;font-weight:800;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-app .mc-top .t{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted)}
.m-app .mc-sub{display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:800;color:var(--ink2);margin-top:2px}
.m-app .mc-sub .cd{width:8px;height:8px;border-radius:50%}
.m-app .mc-snip{font-size:13px;color:var(--ink2);margin-top:3px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.m-app .mc-badges{display:flex;align-items:center;gap:7px;margin-top:7px}
.m-app .bdg{font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:999px;display:inline-flex;align-items:center;gap:4px}
.m-app .bdg .d{width:5px;height:5px;border-radius:50%}
.m-app .bdg.new{background:var(--yellow-card);color:#B07D14}
.m-app .bdg.new .d{background:var(--yellow)}
.m-app .bdg.risk{background:var(--pink-card);color:var(--pink)}
.m-app .bdg.risk .d{background:var(--pink)}
.m-app .asg{font-size:11px;color:var(--muted);font-weight:700;display:inline-flex;align-items:center;gap:5px}
.m-app .asg .av{width:18px;height:18px;border-radius:6px;font-size:8px}
.m-app .unread{width:10px;height:10px;border-radius:50%;background:var(--pink);flex:none;margin-top:6px}
.m-app .tabbar{display:flex;gap:6px;padding:10px 12px 16px;background:var(--surface);border-top:1px solid var(--line)}
.m-app .tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:transparent;color:var(--muted);font-size:10.5px;font-weight:800;padding:8px 0;min-height:52px;border-radius:14px}
.m-app .tab.on{color:var(--pink);background:var(--pink-card)}
.m-app .cvhead{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.m-app .cvhead .bk{width:38px;height:38px;border-radius:11px;background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--ink2);border:1px solid var(--line)}
.m-app .cvhead .av{width:40px;height:40px;border-radius:13px;background:var(--pink);color:#fff;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}
.m-app .cvhead .nm b{font-size:15px;font-weight:800;display:block}
.m-app .cvhead .nm span{font-size:11.5px;color:var(--ink2);font-weight:800;display:inline-flex;align-items:center;gap:5px}
.m-app .cvhead .nm .cd{width:7px;height:7px;border-radius:50%}
.m-app .cvhead .ac{margin-left:auto;display:flex;gap:7px}
.m-app .cvhead .ic{width:38px;height:38px;border-radius:11px;background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--ink2);border:1px solid var(--line)}
.m-app .wbar{display:flex;align-items:center;gap:7px;margin:11px 14px 0;font-size:11.5px;font-weight:800;color:#1E8E68;background:var(--green-soft);border-radius:11px;padding:8px 11px}
.m-app .cvbody{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:11px;background:#F4F5F9}
.m-app .b{max-width:80%;padding:10px 13px;font-size:13.5px;line-height:1.45;border-radius:17px}
.m-app .b.in{align-self:flex-start;background:var(--pink-soft);color:var(--ink);border-top-left-radius:5px}
.m-app .b.out{align-self:flex-end;background:var(--yellow-soft);color:var(--ink);border-top-right-radius:5px}
.m-app .bt{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--muted);margin-top:3px}
.m-app .qrow{display:flex;gap:8px;padding:11px 14px;overflow-x:auto;background:var(--surface);border-top:1px solid var(--line)}
.m-app .qchip{height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-weight:800;font-size:12px;color:var(--pink);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.m-app .mcomposer{display:flex;align-items:center;gap:10px;padding:11px 12px 16px;background:var(--surface);border-top:1px solid var(--line)}
.m-app .minput{flex:1;height:46px;border:1px solid var(--line);border-radius:999px;background:var(--bg);padding:0 17px;font:inherit;font-size:13.5px;color:var(--muted);display:flex;align-items:center}
.m-app .msend{width:46px;height:46px;border-radius:50%;background:var(--pink);color:#fff;border:0;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 8px 18px rgba(236,78,149,.4)}
.m-app .mconv .av,.m-app .cvhead .av{transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.m-app .mconv:hover .av{transform:scale(1.07) rotate(-4deg)}
.m-app .unread{animation:pulse 2.1s ease-out infinite}

/* ---------- Tab bar bawah (khusus HP) ---------- */
.mtabbar{display:none}
.m-app{display:none}

@media (max-width:860px){
  .sidebar{display:none}
  .mtabbar{display:flex;gap:6px;padding:10px 12px calc(12px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid #ECEDF3;position:fixed;left:0;right:0;bottom:0;z-index:40}
  .mtabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#A0A1B2;font-size:10.5px;font-weight:800;padding:8px 0;min-height:52px;border-radius:14px;text-decoration:none}
  .mtabbar a.on{color:#EC4E95;background:#FCE4EF}
  .mtabbar .i{width:18px;height:18px}
  body{padding-bottom:84px}
  .topbar{gap:10px;padding:0 14px}
  .topbar .acct,.topbar .pill,.topbar .avatars,.topbar .prof .nm,.topbar .search{display:none}
  .topbar .tb-right{margin-left:auto}
  .topbar .btn{padding:0 13px}
  .toast{bottom:96px}

  /* Inbox di HP: pakai tampilan khusus mobile */
  body[data-page="inbox"]{padding-bottom:0}
  body[data-page="inbox"] .app{display:none}
  body[data-page="inbox"] .m-app{display:flex;flex-direction:column;height:100vh;height:100dvh;background:#fff}
  body[data-page="inbox"].m-in-conv .mtabbar{display:none}
  .m-app .scr{padding-top:max(14px,env(safe-area-inset-top))}
  .m-app .m-screen{display:none;flex:1;min-height:0;flex-direction:column}
  .m-app .m-screen.on{display:flex}
  .m-app .mlist{padding-bottom:84px}
  .m-app .mconv{width:100%;text-align:left;background:transparent;font:inherit;color:inherit}
  .m-app .minput{color:var(--ink);outline:none}
  .m-app .minput::placeholder{color:var(--muted)}
  .m-app .wbar.risk{color:var(--pink);background:var(--pink-card)}
  .m-app .msend[disabled]{background:var(--bg);color:var(--muted);box-shadow:none;border:1px solid var(--line)}
  .m-app .b.note{align-self:center;background:var(--yellow-card);color:#8A6410;border:1px solid var(--yellow-soft)}
  .m-app .cvhead .nm{min-width:0}
  .m-app .cvhead .nm b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* =========================================================
   Desktop: semua muat dalam SATU layar (laptop 1280×680 s/d 1920×1080)
   ========================================================= */
@media (min-width:861px){
  /* Sidebar tetap di kiri (desain asli menumpuknya ke atas di bawah 980px) */
  .body{display:flex;flex-wrap:nowrap}
  .sidebar{border-right:1px solid var(--line);border-bottom:0}
  .content{min-width:0}

  /* Inbox: 3 kolom terkunci berjejer, tidak pernah turun ke bawah */
  body[data-page="inbox"] .work{display:grid;grid-template-columns:minmax(270px,330px) minmax(0,1fr) minmax(250px,300px);flex:1 1 auto;height:100%;min-height:0}
  body[data-page="inbox"] .work>.col{height:100%;min-height:0;margin:0;max-width:none}
  body[data-page="inbox"] .context{display:flex}
  .ctx-toggle,.ctx-close{display:none}
  .th-body{min-height:0}
}

/* Laptop menengah (1181–1440px): kolom samping lebih ramping, chat tetap lega */
@media (min-width:1181px) and (max-width:1440px){
  .sidebar{width:212px}
  body[data-page="inbox"] .work{grid-template-columns:minmax(270px,310px) minmax(0,1fr) minmax(230px,250px)}
  .context{padding:14px}
  .kv .k{width:70px}
}
/* Menu samping & tab: selalu satu baris */
@media (min-width:861px){
  .nav-item{white-space:nowrap}
  .nav-item>span:not(.count):not(.ico):not(.nav-ico):not(.nav-dot){overflow:hidden;text-overflow:ellipsis}
  .tabs{gap:2px}
  .tab{padding:0 9px;white-space:nowrap}
}
@media (min-width:861px) and (max-width:1440px){
  .nav-item{gap:9px;padding-left:10px;padding-right:10px;font-size:12.5px}
  .sidebar{padding-left:9px;padding-right:9px}
  .tab{padding:0 7px;font-size:12px}
}
/* Judul & kartu sumber tidak boleh terlipat jadi tinggi */
.th-id{flex:1 1 auto}
.th-id .nm{min-width:0}
.th-id .nm b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.th-id .c-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.th-actions{flex:none}
.src-meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.src-type{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.src-act{flex-direction:column;align-items:flex-end;gap:3px}
.src-act .btn.sm{height:30px;padding:0 11px;font-size:12px}
.src-link{font-size:11px;white-space:nowrap}

/* Laptop sempit: profil kontak jadi panel geser (tombol "Info kontak") */
@media (min-width:861px) and (max-width:1180px){
  .sidebar{width:206px}
  body[data-page="inbox"] .work{grid-template-columns:minmax(260px,300px) minmax(0,1fr)}
  body[data-page="inbox"] .context{display:none}
  body[data-page="inbox"].ctx-open .context{display:flex;position:fixed;top:80px;right:14px;bottom:14px;width:300px;z-index:50;box-shadow:var(--shadow-h)}
  .ctx-toggle{display:inline-flex}
  .ctx-close{display:flex;position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink2);align-items:center;justify-content:center}
  body[data-page="inbox"] .context{position:relative}
}

/* Kartu sumber & peringatan komplain yang ringkas */
.th-src{padding:10px 16px;gap:8px}
.src-thumb{width:44px;height:44px;border-radius:12px}
.src-ico{width:40px;height:40px}
.cmp-alert{padding:8px 11px;display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap}
.ca-h{flex:1 1 260px;min-width:0;flex-wrap:wrap;font-size:12px;gap:5px}
.ca-h .ca-trig{color:var(--ink2);font-weight:600}
.ca-why{display:none}
.ca-acts{flex:none}
.ca-btn{height:28px;padding:0 10px;font-size:11.5px}

/* Tinggi ≤ 960px: menu samping dirapatkan agar semua menu terlihat */
@media (min-width:861px) and (max-height:960px){
  .sidebar{padding:14px 10px;gap:12px}
  .nav-grp{gap:2px}
  .nav-item{min-height:38px;height:auto;padding:5px 12px}
}
/* Layar pendek (tinggi ≤ 820px): rapatkan navigasi, topbar, dan composer */
@media (min-width:861px) and (max-height:820px){
  .topbar{height:58px}
  .brand-badge{width:34px;height:34px;border-radius:11px;font-size:13px}
  .search{height:40px}
  .iconbtn{width:38px;height:38px}
  .topbar .btn{height:38px}
  .avatar{width:32px;height:32px;font-size:11px}
  .pill{height:30px}
  .sidebar{padding:12px 10px;gap:10px}
  .nav-grp{gap:1px}
  .nav-cap{padding:2px 12px 3px;font-size:10px}
  .nav-item{min-height:34px;height:auto;padding:4px 12px;font-size:12.5px;border-radius:11px}
  .side-card{padding:9px 12px;border-radius:12px}
  .side-card>span:not(.ld){display:none}
  .side-card b,.side-card{font-size:11.5px}
  .work{padding:10px;gap:10px}
  body[data-page="inbox"] .work{gap:10px}
  .q-head{padding:12px 13px 10px;gap:9px}
  .conv{padding:9px 10px;gap:5px}
  .th-head{padding:10px 16px}
  .th-id .c-ava{width:40px;height:40px;border-radius:12px}
  .th-body{padding:12px 16px;gap:9px}
  .composer{padding:9px 14px 12px}
  .win-banner{padding:6px 11px;margin-bottom:7px;font-size:11.5px}
  .cmp-tabs{margin-bottom:6px}
  .cmp-tab{height:28px}
  .ta{min-height:42px;padding:9px 13px}
  .cmp-bar{padding:6px 8px}
  .tool{width:32px;height:32px}
  .context{padding:14px;gap:10px}
  .ctx-person .c-ava{width:56px;height:56px;border-radius:18px;font-size:19px}
  .content{padding:18px 24px 28px}
}
/* Sangat pendek (≤ 700px): menu lebih rapat lagi */
@media (min-width:861px) and (max-height:700px){
  .nav-item{min-height:31px;padding:3px 12px}
  .sidebar{gap:7px}
  .nav-cap{padding:1px 12px 2px}
}

/* =========================================================
   Menu samping bisa diperkecil (tombol « / »)
   ========================================================= */
.nav-toggle{display:none}
@media (min-width:861px){
  .sidebar{transition:width .2s ease,padding .2s ease}
  .nav-toggle{display:flex;align-items:center;gap:8px;width:100%;height:32px;padding:0 11px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font:700 11.5px/1 "Plus Jakarta Sans",system-ui,sans-serif;flex:none;transition:.16s}
  .nav-toggle:hover{background:var(--bg);color:var(--ink)}
  .nav-toggle .i{transition:transform .2s ease}

  body.nav-mini .sidebar{width:68px;padding-left:8px;padding-right:8px;overflow-x:hidden}
  body.nav-mini .nav-toggle{justify-content:center;padding:0}
  body.nav-mini .nav-toggle span{display:none}
  body.nav-mini .nav-toggle .i{transform:rotate(180deg)}
  /* Judul grup jadi garis pemisah tipis */
  body.nav-mini .nav-cap{font-size:0;height:1px;padding:0;margin:5px 10px;background:var(--line)}
  /* Item menu: ikon saja, angka jadi badge kecil */
  body.nav-mini .nav-item{position:relative;justify-content:center;gap:0;padding:0;font-size:0;min-height:40px}
  body.nav-mini .nav-item>span:not(.count):not(.ico):not(.nav-ico):not(.nav-dot){display:none}
  body.nav-mini .nav-item .count{position:absolute;top:3px;right:2px;margin:0;font-size:9px;line-height:1.4;padding:0 5px;background:var(--surface);border:1px solid var(--line)}
  body.nav-mini .nav-item.active .count{border-color:var(--pink-soft)}
  /* Kartu status: tinggal titik hijau */
  body.nav-mini .side-card{font-size:0;justify-content:center;align-items:center;padding:12px 0}
  body.nav-mini .side-card span:not(.ld),body.nav-mini .side-card b{font-size:0}
  body.nav-mini .side-card b{gap:0}
}
@media (min-width:861px) and (max-height:820px){
  body.nav-mini .nav-item{min-height:34px}
}

/* Logo platform di menu channel */
.nav-dot.logo{width:22px;height:22px;display:flex;align-items:center;justify-content:center;flex:none}
.nav-dot.logo svg{width:20px;height:20px;display:block;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.nav-item:hover .nav-dot.logo svg{transform:scale(1.1)}
@media (min-width:861px){ body.nav-mini .nav-dot.logo svg{width:22px;height:22px} }