:root{
--bg:#F1F6F0;
--surface:#FFFFFF;
--surface-2:#E2ECE3;
--surface-3:#F7FAF6;
--ink:#12211A;
--ink-2:#43544B;
--ink-3:#71837A;
--line:#D2E0D5;
--pine:#0B6B47;
--pine-deep:#063F2A;
--pine-mid:#12805C;
--pine-soft:#D9EDDE;
--pine-ink:#06402A;
--orange:#EE5F1F;
--orange-deep:#B5440E;
--orange-soft:#FDEBE2;
--amber:#9A6206;
--amber-soft:#FBF0DA;
--red:#B3382E;
--red-soft:#FBE7E4;
--blue:#2C5F8A;
--blue-soft:#E4EDF5;
--wira:#5446B8; --wira-soft:#E7E3FB; --wira-ink:#382A8A;
--sinta:#B07E10; --sinta-soft:#F7E8C3; --sinta-ink:#6E4E00;
--dita:#0E7C86; --dita-soft:#DAF1F1; --dita-ink:#075862;
--roni:#D9521A; --roni-soft:#FDE6D8; --roni-ink:#9E3A0C;
--eko:#33689E; --eko-soft:#E0EAF7; --eko-ink:#1D4A75;
--mira:#BC3E87; --mira-soft:#FBE1EF; --mira-ink:#87235E;
--ratih:#35794B; --ratih-soft:#DFF1E0; --ratih-ink:#1C5A31;
--gilang:#66723A; --gilang-soft:#E9EDCF; --gilang-ink:#46511E;
--shadow:0 1px 2px rgba(10,40,28,.05),0 10px 30px -14px rgba(10,40,28,.18);
--shadow-lg:0 28px 64px -22px rgba(7,45,30,.35);
--r-lg:28px; --r-md:22px; --r-sm:16px;
--sidebar-w:264px;
--app-max:2560px;
--bg-outer:#D9E6DB;
--bg-outer-2:#CBDCCF;
}
@media (prefers-color-scheme: dark){
:root{
--bg:#0C130F;
--surface:#151E19;
--surface-2:#1E2A23;
--surface-3:#111915;
--ink:#E9F2EC;
--ink-2:#AEC0B4;
--ink-3:#7E9187;
--line:#27382E;
--pine:#35BE8C;
--pine-deep:#0A2E21;
--pine-mid:#35BE8C;
--pine-soft:#173A2B;
--pine-ink:#9FE3C3;
--orange:#FF7A3D;
--orange-deep:#FFB08A;
--orange-soft:#3C2312;
--amber:#E5B45A;
--amber-soft:#372B12;
--red:#E87A6E;
--red-soft:#3A1D1A;
--blue:#7FB0D8;
--blue-soft:#1C2C3A;
--wira:#A79DFF; --wira-soft:#2C2560; --wira-ink:#D5CFFF;
--sinta:#E3B341; --sinta-soft:#3D2F0E; --sinta-ink:#F5D67A;
--dita:#4FC3CC; --dita-soft:#10383C; --dita-ink:#A9E6EA;
--roni:#FF9A66; --roni-soft:#452413; --roni-ink:#FFC4A3;
--eko:#8FBAE8; --eko-soft:#1B3049; --eko-ink:#C4DCF5;
--mira:#F194C4; --mira-soft:#471C33; --mira-ink:#FBC9E1;
--ratih:#8FD79E; --ratih-soft:#173A22; --ratih-ink:#C2EBC9;
--gilang:#C0CF71; --gilang-soft:#303716; --gilang-ink:#E3EDAA;
--shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.5);
--shadow-lg:0 24px 60px -20px rgba(0,0,0,.7);
--bg-outer:#060B08;
--bg-outer-2:#0A120D;
}
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
background:
radial-gradient(1200px 620px at 18% -120px, color-mix(in srgb,var(--pine-soft) 55%,transparent), transparent 62%),
linear-gradient(180deg,var(--bg-outer),var(--bg-outer-2));
background-attachment:fixed;
color:var(--ink);
font-size:15px; line-height:1.55;
-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:"Sora","Plus Jakarta Sans",sans-serif;margin:0;line-height:1.25}
p{margin:0}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
input{font:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:6px}
/* ===== Top strip ===== */
.mock-strip{
background:repeating-linear-gradient(-45deg,#123B2C 0 18px,#0E3225 18px 36px);
color:#D9F2E4; text-align:center;
font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
padding:7px 12px;
max-width:var(--app-max); margin:0 auto;
box-shadow:0 1px 0 rgba(6,40,26,.14), 18px 0 34px -28px rgba(6,40,26,.35), -18px 0 34px -28px rgba(6,40,26,.35);
}
.mock-strip b{color:#FFB38A}
/* ===== Layout ===== */
.app{
display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);min-height:100vh;
max-width:var(--app-max); margin:0 auto; width:100%;
background:var(--bg);
box-shadow:0 0 0 1px color-mix(in srgb,var(--line) 70%,transparent), 0 28px 70px -34px rgba(6,40,26,.38), 20px 0 42px -34px rgba(6,40,26,.28), -20px 0 42px -34px rgba(6,40,26,.28);
}
/* ===== Sidebar ===== */
.sidebar{
background:linear-gradient(180deg,#0B4A34 0%,#073D2A 55%,#062E20 100%);
color:#DCEFE6; position:sticky; top:0; height:100vh;
display:flex; flex-direction:column; z-index:40;
}
.brand{padding:20px 20px 14px;display:flex;gap:12px;align-items:center}
.brand-mark{
width:42px;height:42px;flex:none;border-radius:12px;
background:linear-gradient(135deg,#12805C,#0B4A34);
border:1px solid rgba(255,255,255,.22);
display:grid;place-items:center;color:#CFF3E2;
}
.brand-name{font-family:"Sora",sans-serif;font-weight:800;font-size:15.5px;color:#fff;line-height:1.2}
.brand-sub{font-size:12px;color:#9CC7B2;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.side-scroll{overflow-y:auto;padding:6px 12px 16px;flex:1}
.nav-label{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#7FAE99;font-weight:700;padding:14px 10px 6px}
.nav-item{
width:100%;display:flex;align-items:center;gap:11px;text-align:left;
padding:10px 12px;border-radius:12px;color:#CDE7DA;font-weight:600;font-size:14px;
transition:background .15s,color .15s;margin-bottom:2px;
}
.nav-item svg{flex:none;opacity:.85}
.nav-item:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-item.active{background:#fff;color:#0A4630;box-shadow:0 6px 16px -8px rgba(0,0,0,.5)}
.nav-item.active svg{opacity:1}
.nav-badge{margin-left:auto;background:var(--orange);color:#fff;font-size:12px;font-weight:800;min-width:22px;height:22px;padding:0 6px;border-radius:99px;display:grid;place-items:center}
.nav-item.active .nav-badge{background:var(--orange)}
.side-card{
margin:14px 4px 4px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
border-radius:14px;padding:13px 14px;
}
.side-card h4{color:#fff;font-size:14px;margin-bottom:4px}
.side-card p{font-size:12px;color:#A9CDBB}
.side-foot{padding:14px 20px;border-top:1px solid rgba(255,255,255,.12);font-size:12px;color:#8FBBA4}
.side-foot .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#39D98A;margin-right:7px;box-shadow:0 0 0 4px rgba(57,217,138,.18)}
/* ===== Main / header ===== */
.main{min-width:0;display:flex;flex-direction:column}
.topbar{
position:sticky;top:0;z-index:30;
background:color-mix(in srgb,var(--bg) 82%,transparent);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
border-bottom:1px solid var(--line);
}
.topbar-in{max-width:1240px;margin:0 auto;padding:14px 26px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.page-title{min-width:0}
.page-title h1{font-size:21px;font-weight:800;letter-spacing:-.01em}
.page-title .sub{font-size:14px;color:var(--ink-2);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.live-dot{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--pine-ink)}
.live-dot i{width:8px;height:8px;border-radius:50%;background:#2BB673;display:inline-block;animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(43,182,115,.45)}70%{box-shadow:0 0 0 7px rgba(43,182,115,0)}100%{box-shadow:0 0 0 0 rgba(43,182,115,0)}}
@media (prefers-reduced-motion: reduce){.live-dot i{animation:none}}
.dot-status{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none}
.dot-status.dot-on{background:#2BB673;animation:dotGlow 2.4s ease-in-out infinite}
.dot-status.dot-off{background:#E5484D}
.dot-status.dot-netral{background:#B9B4CC}
/* ===== Pemilih nomor ringkas mobile (Varian B, 29 Okt 2026) ===== */
.pemilih-nomor{display:none;width:100%;align-items:center;gap:11px;background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:10px 12px;cursor:pointer;text-align:left}
.pemilih-teks{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.pemilih-teks b{font-size:15px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pemilih-teks small{font-size:12px;color:var(--ink-3);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pemilih-ganti{background:var(--pine);color:#fff;font-size:12.5px;font-weight:800;padding:9px 13px;border-radius:999px;white-space:nowrap;flex:none}
.laci-scrim{position:fixed;inset:0;background:rgba(10,8,30,.48);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s;z-index:320}
.laci-scrim.terbuka{opacity:1;visibility:visible}
.laci-nomor{position:fixed;left:0;right:0;bottom:0;z-index:321;background:var(--surface);border-radius:26px 26px 0 0;padding:10px 16px calc(14px + env(safe-area-inset-bottom));transform:translateY(106%);transition:transform .38s cubic-bezier(.34,1.3,.64,1);max-height:78dvh;display:flex;flex-direction:column;box-shadow:0 -18px 50px rgba(10,6,30,.35)}
.laci-nomor.terbuka{transform:none}
.laci-grip{width:42px;height:5px;border-radius:99px;background:var(--line);margin:2px auto 10px;flex:none}
.laci-nomor h3{font-size:16px;color:var(--ink);flex:none}
.laci-ket{font-size:12px;color:var(--ink-3);margin:2px 0 6px;flex:none}
#laciNomorDaftar{overflow-y:auto}
.laci-baris{display:flex;align-items:center;gap:11px;width:100%;background:none;border:none;border-bottom:1px solid var(--line);padding:11px 4px;cursor:pointer;text-align:left}
.laci-baris:last-child{border-bottom:none}
.laci-baris.aktif{background:#F1EDFD;border-radius:12px}
.laci-teks{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.laci-teks b{font-size:14.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.laci-teks small{font-size:12px;color:var(--ink-3);font-weight:600}
.laci-cek{color:var(--pine-ink);font-weight:900;font-size:16px;flex:none}
@media (min-width:901px){.laci-nomor,.laci-scrim{display:none}}
@media (max-width:900px){
#panel-percakapan #numTabs{display:none}
#panel-percakapan .pemilih-nomor{display:flex}
#panel-percakapan .numtabs-row{flex-wrap:wrap}
#panel-percakapan #btnFokusChat{margin-left:auto}
}
@keyframes dotGlow{0%,100%{box-shadow:0 0 0 0 rgba(43,182,115,.45)}50%{box-shadow:0 0 0 6px rgba(43,182,115,0)}}
@media (prefers-reduced-motion: reduce){.dot-status.dot-on{animation:none}}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.search{
display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);
border-radius:99px;padding:8px 14px;min-width:230px;color:var(--ink-3);
}
.search input{border:0;outline:0;background:none;color:var(--ink);width:100%;font-size:14px}
.search input::placeholder{color:var(--ink-3)}
.icon-btn{
width:40px;height:40px;border-radius:12px;background:var(--surface);border:1px solid var(--line);
display:grid;place-items:center;color:var(--ink-2);position:relative;flex:none;
}
.icon-btn:hover{color:var(--pine-ink);border-color:var(--pine)}
.icon-btn .n{position:absolute;top:-5px;right:-5px;background:var(--orange);color:#fff;font-size:12px;font-weight:800;min-width:18px;height:18px;border-radius:99px;display:grid;place-items:center;padding:0 4px}
.owner{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:5px 14px 5px 5px}
.owner .av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--pine),var(--pine-deep));color:#fff;display:grid;place-items:center;font-weight:800;font-size:12px}
.owner .who{line-height:1.15}
.owner .who b{font-size:14px;display:block}
.owner .who span{font-size:12px;color:var(--ink-3)}
/* ===== Ganti Peran (demo) ===== */
.owner-wrap{position:relative}
.owner{cursor:pointer;text-align:left}
.owner:hover{border-color:var(--pine)}
.owner .chev{flex:none;color:var(--ink-3);margin-left:2px}
.role-chip{display:inline-flex;align-items:center;gap:6px;background:var(--pine);color:#fff;font-size:12px;font-weight:800;padding:4px 11px;border-radius:99px;white-space:nowrap}
.role-chip i{width:7px;height:7px;border-radius:50%;background:#7CF2B6;flex:none}
body.role-limited .side-agents,body.role-limited .side-card{display:none !important}
body.role-limited .beranda-owner-only{display:none !important}
body.role-adminorder #panel-lead .appr-actions{display:none !important}
.meja-note{background:var(--amber-soft);border:1px solid color-mix(in srgb,var(--amber) 30%,transparent);border-radius:14px;padding:12px 15px;font-size:14px;margin-bottom:16px}
.meja-note b{color:var(--amber)}
.task-card{padding:18px 20px;margin-bottom:12px}
.task-card .tt{font-weight:700;font-size:14.5px}
.task-card .ds{font-size:14px;color:var(--ink-2);margin-top:3px}
.task-card .meta{font-size:12px;color:var(--ink-3);margin-top:5px}
.focus-banner{display:flex;gap:12px;align-items:flex-start;background:var(--blue-soft);border:1px solid color-mix(in srgb,var(--blue) 30%,transparent);border-radius:16px;padding:14px 16px;margin-bottom:16px;font-size:14px}
.focus-banner b{color:var(--blue)}
.stage-node.focus{background:var(--blue);color:#fff;border-color:transparent;box-shadow:0 0 0 4px var(--blue-soft)}
@media (max-width:900px){.role-chip{display:none}.owner-wrap{margin-left:auto}}
.content{max-width:1240px;margin:0 auto;padding:22px 26px 8px;width:100%}
.panel{display:none}
.panel.active{display:block;animation:fadein .25s ease}
@keyframes fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.panel.active{animation:none}}
.panel-head{margin:4px 0 12px}
.panel-head h2{font-size:19px;font-weight:700}
/* Varian A judul tunggal (keputusan Bos 28 Okt 2026): judul halaman
cukup di topbar yang menempel; h2 panel yang mengulanginya disembunyikan
(elemen tetap di DOM untuk skrip lama), deskripsi panel tetap tampil. */
.panel-head h2.judul-ganda{display:none}
.panel-head p{color:var(--ink-2);font-size:14px;max-width:70ch}
/* ===== Cards & grids ===== */
.card{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.card-pad{padding:20px}
.grid-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-bottom:16px}
.stat{padding:16px 18px;position:relative;overflow:hidden}
.stat .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;margin-bottom:10px}
.stat .num{font-family:"Sora",sans-serif;font-size:27px;font-weight:800;line-height:1}
.stat .lbl{font-size:14px;color:var(--ink-2);font-weight:600;margin-top:5px}
.stat .delta{font-size:12px;font-weight:700;margin-top:6px;display:inline-flex;gap:4px;align-items:center}
.up{color:var(--pine-ink)} .warn{color:var(--amber)} .bad{color:var(--red)}
.ic-pine{background:var(--pine-soft);color:var(--pine-ink)}
.ic-orange{background:var(--orange-soft);color:var(--orange-deep)}
.ic-blue{background:var(--blue-soft);color:var(--blue)}
.ic-amber{background:var(--amber-soft);color:var(--amber)}
.grid-2{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:16px;margin-bottom:16px}
.grid-2e{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px}
.card-head{display:flex;align-items:flex-start;gap:12px;padding:18px 20px 0}
.card-head h3{font-size:15.5px;font-weight:700}
.card-head p{font-size:14px;color:var(--ink-2)}
.card-head .right{margin-left:auto;flex:none}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:4px 10px;border-radius:99px;white-space:nowrap}
.chip-pine{background:var(--pine-soft);color:var(--pine-ink)}
.chip-orange{background:var(--orange-soft);color:var(--orange-deep)}
.chip-amber{background:var(--amber-soft);color:var(--amber)}
.chip-red{background:var(--red-soft);color:var(--red)}
.chip-blue{background:var(--blue-soft);color:var(--blue)}
.chip-gray{background:var(--surface-2);color:var(--ink-2)}
.chip-merah{background:var(--red-soft);color:var(--red)}
/* Kapsul status Kesehatan Sinkron — Material 3 Expressive
(29 Okt 2026): pill besar, tipografi tegas, wadah tonal.
Sebelumnya chip-merah bahkan tidak terdefinisi sehingga kapsul
peringatan tampil polos tanpa wadah warna. */
.ks-pill{font-size:13px;font-weight:800;padding:9px 18px;letter-spacing:.01em;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
.ks-chevron{display:inline-flex;margin-left:10px;font-size:19px;line-height:1;color:var(--ink-3);transition:transform .25s ease}
.ks-chevron.buka{transform:rotate(180deg)}
.btn{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:14px;padding:9px 16px;border-radius:11px;transition:filter .15s,background .15s}
.btn-pine{background:var(--pine);color:#fff}
.btn-pine:hover{filter:brightness(1.1)}
.btn-ghost{background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--pine);color:var(--pine-ink)}
.btn-danger-ghost{background:var(--surface);border:1px solid var(--line);color:var(--red)}
.btn-danger-ghost:hover{border-color:var(--red);background:var(--red-soft)}
.btn-sm{padding:6px 12px;font-size:12px;border-radius:9px}
.btn[disabled]{opacity:.45;cursor:default;filter:none}
/* Wira brief */
.brief{background:linear-gradient(135deg,var(--pine-deep),#0B5340 70%);color:#E4F3EA;border:0;overflow:hidden;position:relative}
@media (prefers-color-scheme: dark){.brief{background:linear-gradient(135deg,#0D3A2A,#0A2E21 70%)}}
.brief .card-head h3{color:#fff}
.brief .card-head p{color:#A9CDBB}
.brief-body{padding:6px 20px 20px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.brief-item{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);border-radius:14px;padding:13px 15px}
.brief-item .t{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:#9CC7B2;display:flex;gap:7px;align-items:center}
.brief-item h4{color:#fff;font-size:14px;margin:5px 0 3px}
.brief-item p{font-size:14px;color:#C4DFD0}
.brief-item .hot{color:#FFB38A;font-weight:800}
.home-nav{cursor:pointer}
button.home-nav{width:100%;text-align:left}
.home-nav:hover{border-color:var(--pine);box-shadow:0 0 0 2px color-mix(in srgb,var(--pine) 22%,transparent),var(--shadow)}
.brief-item.home-nav:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.42);box-shadow:none}
.home-open-hint{display:inline-flex;align-items:center;gap:5px;margin-top:10px;font-size:12px;font-weight:800;color:var(--pine-ink)}
.brief-item .home-open-hint{color:#FFD9C2}
.home-focus{outline:3px solid var(--orange) !important;outline-offset:3px;box-shadow:0 0 0 6px var(--orange-soft),var(--shadow-lg) !important;scroll-margin:150px 0}
/* Agent cards */
.agents{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-bottom:16px}
.agent{padding:18px;text-align:left;width:100%;transition:transform .15s,border-color .15s;display:block}
.agent:hover{transform:translateY(-2px);border-color:var(--pine)}
@media (prefers-reduced-motion: reduce){.agent:hover{transform:none}}
.agent-top{display:flex;gap:13px;align-items:center}
.avatar{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;font-family:"Sora",sans-serif;font-weight:800;font-size:17px;color:#fff;flex:none}
.av-wira{background:linear-gradient(135deg,#0C5B40,#073D2A)}
.av-dita{background:linear-gradient(135deg,#EE5F1F,#C94A12)}
.av-roni{background:linear-gradient(135deg,#2C5F8A,#1D4465)}
.av-eko{background:linear-gradient(135deg,#5B6B62,#39463F)}
.av-mira{background:linear-gradient(135deg,#8A4B8C,#5F3260)}
.av-ratih{background:linear-gradient(135deg,#A86A08,#7A4D05)}
.agent .nm{font-family:"Sora",sans-serif;font-weight:700;font-size:15.5px}
.agent .role{font-size:12px;color:var(--ink-2);font-weight:600}
.agent .task{font-size:14px;color:var(--ink-2);margin-top:11px;min-height:38px}
.agent .foot{display:flex;align-items:center;gap:8px;margin-top:10px}
.status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700}
.status i{width:8px;height:8px;border-radius:50%;background:#2BB673;flex:none}
.status.busy i{background:var(--orange)}
.status.draft i{background:var(--amber)}
.agent .go{margin-left:auto;font-size:12px;font-weight:700;color:var(--pine-ink)}
/* Lists */
.rows{display:flex;flex-direction:column}
.row{display:flex;gap:13px;padding:13px 20px;border-top:1px solid var(--line);align-items:flex-start}
.row:first-child{border-top:0}
.row .grow{min-width:0;flex:1}
.row .tt{font-weight:700;font-size:14px}
.row .ds{font-size:14px;color:var(--ink-2)}
.row .meta{font-size:12px;color:var(--ink-3);margin-top:2px}
.empty{padding:22px;text-align:center;color:var(--ink-3);font-size:14px}
/* Pipeline */
.pipe{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.pipe-col{background:var(--surface-3);border:1px solid var(--line);border-radius:16px;padding:12px;min-height:120px}
.pipe-col h4{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);display:flex;align-items:center;gap:7px;margin-bottom:10px}
.pipe-col h4 .cnt{background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:0 8px;font-size:12px}
.lead-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:11px 12px;margin-bottom:9px;box-shadow:var(--shadow)}
.lead-card .t{font-weight:700;font-size:14px}
.lead-card .d{font-size:12px;color:var(--ink-2);margin-top:2px}
.lead-card .f{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
/* Production */
.po{border-top:1px solid var(--line);padding:16px 20px}
.po:first-of-type{border-top:0}
.po-head{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}
.po-head .t{font-weight:700;font-size:14px}
.po-head .d{font-size:14px;color:var(--ink-2)}
.stepper{display:flex;gap:0;margin:14px 0 6px;flex-wrap:wrap}
.step{flex:1;min-width:86px;text-align:center;position:relative;padding-top:20px;font-size:12px;font-weight:600;color:var(--ink-3)}
.step::before{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);width:13px;height:13px;border-radius:50%;background:var(--surface);border:2.5px solid var(--line);z-index:1}
.step::after{content:"";position:absolute;top:13px;left:calc(-50% + 8px);width:calc(100% - 16px);height:2.5px;background:var(--line)}
.step:first-child::after{display:none}
.step.done{color:var(--pine-ink)}
.step.done::before{background:var(--pine);border-color:var(--pine)}
.step.done::after{background:var(--pine)}
.step.now{color:var(--orange-deep)}
.step.now::before{background:var(--orange);border-color:var(--orange);box-shadow:0 0 0 5px var(--orange-soft)}
.step.now::after{background:var(--pine)}
.progress{height:9px;border-radius:99px;background:var(--surface-2);overflow:hidden;margin-top:8px}
.progress i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--pine-mid),var(--pine))}
/* Chat */
.chat-wrap{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px}
.chat-body{padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.bubble{max-width:82%;padding:11px 14px;border-radius:16px;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.bubble-text{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.42}
.bubble .tm{display:block;font-size:12px;margin-top:5px;opacity:.65;font-weight:600}
.bubble.in{background:var(--surface-2);border-bottom-left-radius:5px;align-self:flex-start}
.bubble.out{background:var(--pine);color:#fff;border-bottom-right-radius:5px;align-self:flex-end}
@media (prefers-color-scheme: dark){.bubble.out{background:#14563E}}
.bubble .who{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;margin-bottom:3px;display:block;opacity:.8}
.chat-note{margin:0 18px 16px;background:var(--amber-soft);border:1px solid color-mix(in srgb,var(--amber) 30%,transparent);color:var(--ink);border-radius:12px;padding:11px 13px;font-size:14px}
.chat-note b{color:var(--amber)}
/* Catalog */
.cat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.cat{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.cat .ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;margin-bottom:9px}
.cat .n{font-family:"Sora",sans-serif;font-size:21px;font-weight:800;line-height:1.1}
.cat .l{font-size:14px;color:var(--ink-2);font-weight:600}
/* Charts */
.chart-box{padding:8px 20px 18px}
.chart-box svg{width:100%;height:auto;display:block}
.hbar{display:flex;align-items:center;gap:10px;font-size:14px;padding:6px 0}
.hbar .hl{width:118px;flex:none;font-weight:600;color:var(--ink-2)}
.hbar .track{flex:1;height:10px;background:var(--surface-2);border-radius:99px;overflow:hidden}
.hbar .track i{display:block;height:100%;border-radius:99px}
.hbar .hv{width:30px;flex:none;text-align:right;font-weight:700}
/* Approvals */
.appr-actions{display:flex;gap:8px;flex:none}
.done-note{font-size:12px;font-weight:700;display:inline-flex;gap:6px;align-items:center}
/* Agenda */
.agenda-item{display:flex;gap:12px;padding:11px 20px;border-top:1px solid var(--line);align-items:flex-start}
.agenda-item:first-child{border-top:0}
.agenda-time{font-family:"Sora",sans-serif;font-weight:700;font-size:14px;color:var(--pine-ink);width:52px;flex:none;padding-top:1px}
.agenda-item .t{font-weight:700;font-size:14px}
.agenda-item .d{font-size:14px;color:var(--ink-2)}
.photo-card{overflow:hidden;padding:0}
.photo-card img{width:100%;height:190px;object-fit:cover}
.photo-card .cap{padding:14px 18px}
.photo-card .cap h4{font-size:14px}
.photo-card .cap p{font-size:14px;color:var(--ink-2)}
.principle{display:flex;gap:14px;align-items:flex-start;background:var(--pine-soft);border:1px solid color-mix(in srgb,var(--pine) 25%,transparent);border-radius:16px;padding:16px 18px;margin-bottom:16px}
.principle .ic{width:40px;height:40px;flex:none;border-radius:12px;background:var(--pine);color:#fff;display:grid;place-items:center}
.principle h3{font-size:14.5px;color:var(--pine-ink)}
.principle p{font-size:14px;color:var(--ink-2)}
footer.site{max-width:1240px;margin:26px auto 0;padding:18px 26px 30px;width:100%}
footer.site .box{border-top:1px solid var(--line);padding-top:16px;display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between}
footer.site p{font-size:12px;color:var(--ink-3);max-width:75ch}
.foot-mark{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--pine-ink);background:var(--pine-soft);padding:6px 12px;border-radius:99px;white-space:nowrap}
/* Drawer */
.scrim{position:fixed;inset:0;background:rgba(6,25,17,.5);opacity:0;pointer-events:none;transition:opacity .2s;z-index:60}
.scrim.open{opacity:1;pointer-events:auto}
.drawer[hidden]{display:none}
.drawer{
position:fixed;top:0;right:max(0px,calc((100vw - var(--app-max))/2));height:100dvh;width:min(460px,100vw);z-index:70;
background:var(--surface);box-shadow:var(--shadow-lg);
transform:translateX(102%);transition:transform .25s ease;
display:flex;flex-direction:column;
}
.drawer.open{transform:none}
@media (prefers-reduced-motion: reduce){.drawer,.scrim{transition:none}}
.drawer-head{padding:20px;border-bottom:1px solid var(--line);display:flex;gap:14px;align-items:flex-start}
.drawer-body{overflow-y:auto;padding:18px 20px 26px;flex:1}
.drawer-body h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:18px 0 9px}
.drawer-body h4:first-child{margin-top:0}
.work-item{background:var(--surface-3);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:9px}
.work-item .t{font-weight:700;font-size:14px}
.work-item .d{font-size:14px;color:var(--ink-2);margin-top:2px}
.kv{display:flex;justify-content:space-between;gap:10px;font-size:14px;padding:7px 0;border-bottom:1px dashed var(--line)}
.kv:last-child{border-bottom:0}
.kv b{font-weight:700}
.kv span{color:var(--ink-2)}
/* Toast */
.toast{
position:fixed;left:50%;bottom:24px;transform:translate(-50%,80px);z-index:90;
background:var(--pine-deep);color:#EAF6EF;padding:12px 18px;border-radius:13px;
font-size:14px;font-weight:600;box-shadow:var(--shadow-lg);
transition:transform .25s ease;max-width:min(92vw,520px);text-align:center;
}
.toast.show{transform:translate(-50%,0)}
@media (prefers-reduced-motion: reduce){.toast{transition:none}}
/* Petunjuk Mode Demo Bertahap: bar bawah yang TIDAK hilang otomatis.
Tetap tampil sampai ditutup; sesudah ditutup ada tab pembuka di tepi bawah. */
.demo-guide{
position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));z-index:94;
width:min(94vw,600px);max-height:42vh;overflow:auto;
transform:translateX(-50%);
background:var(--pine-deep);color:#EAF6EF;border-radius:14px;
box-shadow:var(--shadow-lg);padding:12px 12px 12px 16px;
display:none;align-items:flex-start;gap:8px;
}
.demo-guide.show{display:flex;animation:demoGuideIn .25s ease}
@keyframes demoGuideIn{from{transform:translate(-50%,16px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
.demo-guide-body{flex:1 1 auto;min-width:0;font-size:14px;line-height:1.5;overflow-wrap:break-word}
.demo-guide-body b{color:#fff}
.demo-guide-title{font-weight:800;font-size:12.5px;color:#9AD5BB;margin-bottom:3px}
.demo-guide-close{
flex:none;width:44px;height:44px;margin:-4px -4px 0 0;border:0;border-radius:11px;
background:rgba(255,255,255,.14);color:#EAF6EF;font-size:24px;line-height:1;
display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.demo-guide-close:hover{background:rgba(255,255,255,.24)}
.demo-guide-close:focus-visible{outline:2px solid #EAF6EF;outline-offset:2px}
.demo-guide-tab{
position:fixed;right:14px;bottom:max(14px,env(safe-area-inset-bottom));z-index:93;
display:none;align-items:center;gap:7px;min-height:44px;
background:var(--pine);color:#fff;border:1px solid var(--pine);border-radius:999px;
padding:11px 16px;font-size:13px;font-weight:700;cursor:pointer;box-shadow:var(--shadow-lg);
-webkit-tap-highlight-color:transparent;
}
.demo-guide-tab.show{display:inline-flex}
.demo-guide-tab:hover{filter:brightness(1.08)}
.demo-guide-tab:focus-visible{outline:2px solid var(--pine-deep);outline-offset:2px}
@media (prefers-reduced-motion: reduce){.demo-guide.show{animation:none}}
/* Notif dropdown */
.notif-pop{position:absolute;top:calc(100% + 10px);right:0;width:min(340px,90vw);background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);display:none;z-index:50;overflow:hidden}
.notif-pop.open{display:flex;flex-direction:column;max-height:min(74vh,600px)}
.notif-pop h4{padding:13px 16px 8px;font-size:14px;flex:none}
#notifList{overflow-y:auto;min-height:0;overscroll-behavior:contain;scrollbar-width:thin}
.notif-item{padding:10px 16px;border-top:1px solid var(--line);font-size:14px}
.notif-item b{display:block;font-size:14px}
.notif-item span{color:var(--ink-3)}
.menu-btn{display:none}
/* ===== Responsive ===== */
@media (max-width:1080px){
.grid-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
.agents{grid-template-columns:repeat(2,minmax(0,1fr))}
.cat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.pipe{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
.app{grid-template-columns:1fr}
.sidebar{position:sticky;top:0;height:auto;z-index:45}
.brand{padding:14px 16px 8px}
.side-scroll{overflow:visible;padding:4px 12px 12px}
.nav-label{display:none}
.nav-group{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.nav-item{flex-direction:column;gap:5px;font-size:12px;padding:9px 4px;text-align:center;border-radius:10px}
.nav-item .nav-badge{position:absolute;margin:0}
.nav-item{position:relative}
.nav-badge{top:4px;right:6px;min-width:18px;height:18px;font-size:12px}
.side-card,.side-foot{display:none}
.grid-2,.grid-2e,.chat-wrap{grid-template-columns:1fr}
.brief-body{grid-template-columns:1fr}
.topbar-in{padding:12px 16px}
.content{padding:18px 16px 4px}
footer.site{padding:18px 16px 26px}
.search{min-width:0;flex:1}
.owner .who{display:none}
.owner{padding:5px}
}
@media (max-width:620px){
.grid-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.agents,.cat-grid{grid-template-columns:1fr}
.pipe{grid-template-columns:1fr}
.page-title h1{font-size:18px}
.step{min-width:30%;margin-bottom:12px}
.bubble{max-width:92%}
.appr-actions{flex-wrap:wrap}
}
/* ===== Material 3 Expressive layer ===== */
.page-title h1{font-size:24px;font-weight:800}
.brand-mark{border-radius:18px}
.nav-item{border-radius:999px;padding:11px 16px}
.icon-btn{border-radius:16px}
.btn{border-radius:999px;padding:11px 20px}
.btn-sm{padding:7px 14px;border-radius:999px}
.principle{border-radius:var(--r-md)}
.pipe-col{border-radius:20px}
.lead-card{border-radius:16px}
.cat{border-radius:22px}
.cat .ic{border-radius:14px}
.brief-item{border-radius:18px}
.work-item{border-radius:16px}
.notif-pop{border-radius:22px}
.toast{border-radius:999px;padding:13px 22px}
.stat .ic{border-radius:14px}
.chip{padding:5px 12px}
/* Kartu statistik: container tonal berbeda per kartu */
.grid-stats .stat{border-color:transparent}
.grid-stats .stat:nth-child(1){background:var(--roni-soft)}
.grid-stats .stat:nth-child(2){background:var(--dita-soft)}
.grid-stats .stat:nth-child(3){background:var(--eko-soft)}
.grid-stats .stat:nth-child(4){background:var(--amber-soft)}
.grid-stats .stat:nth-child(5){background:var(--ratih-soft)}
.grid-stats .stat .ic{background:rgba(255,255,255,.85)}
@media (prefers-color-scheme: dark){.grid-stats .stat .ic{background:rgba(0,0,0,.28)}}
/* Foto profil agent */
.avatar{width:64px;height:64px;border-radius:50%;overflow:hidden;background:var(--surface-2)}
.avatar img{width:100%;height:100%;object-fit:cover}
.av-wira{box-shadow:0 0 0 3px var(--surface),0 0 0 6px var(--wira)}
.av-sinta{box-shadow:0 0 0 3px var(--surface),0 0 0 6px var(--sinta)}
.av-dita{box-shadow:0 0 0 3px var(--surface),0 0 0 6px var(--dita)}
.av-roni{box-shadow:0 0 0 3px var(--surface),0 0 0 6px var(--roni)}
.av-eko{box-shadow:0 0 0 3px var(--surface),0 0 0 6px var(--eko)}
.av-mira{box-shadow:0 0 0 3px var(--surface),0 0 0 6px var(--mira)}
.av-ratih{box-shadow:0 0 0 3px var(--surface),0 0 0 6px var(--ratih)}
.av-gilang{box-shadow:0 0 0 3px var(--surface),0 0 0 6px var(--gilang)}
.ai-tag{display:inline-block;margin-left:5px;font-size:.64em;font-weight:750;color:var(--ink-2);vertical-align:.16em;white-space:nowrap}
/* Kartu agent: container tonal sesuai identitas */
.agent{border-radius:32px;padding:22px;border-color:transparent}
.agent:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:transparent}
.agent[data-agent="wira"]{background:var(--wira-soft)}
.agent[data-agent="sinta"]{background:var(--sinta-soft)}
.agent[data-agent="dita"]{background:var(--dita-soft)}
.agent[data-agent="roni"]{background:var(--roni-soft)}
.agent[data-agent="eko"]{background:var(--eko-soft)}
.agent[data-agent="mira"]{background:var(--mira-soft)}
.agent[data-agent="ratih"]{background:var(--ratih-soft)}
.agent[data-agent="gilang"]{background:var(--gilang-soft)}
.agent[data-agent="wira"] .go{color:var(--wira-ink)}
.agent[data-agent="sinta"] .go{color:var(--sinta-ink)}
.agent[data-agent="dita"] .go{color:var(--dita-ink)}
.agent[data-agent="roni"] .go{color:var(--roni-ink)}
.agent[data-agent="eko"] .go{color:var(--eko-ink)}
.agent[data-agent="mira"] .go{color:var(--mira-ink)}
.agent[data-agent="ratih"] .go{color:var(--ratih-ink)}
.agent[data-agent="gilang"] .go{color:var(--gilang-ink)}
.agent-top .avatar{width:68px;height:68px}
.agent .nm{font-size:17px}
/* Foto mini di chat, chip, dan baris meta */
.bubble .who{display:flex;align-items:center;gap:7px}
.who-av{width:22px;height:22px;border-radius:50%;object-fit:cover;flex:none}
.bubble.out.dita{background:var(--dita)}
.bubble.out.sinta{background:var(--sinta)}
.bubble.out.roni{background:var(--roni)}
.meta-av{width:20px;height:20px;border-radius:50%;object-fit:cover;vertical-align:-6px;margin-right:5px}
.chip-av{width:20px;height:20px;border-radius:50%;object-fit:cover}
/* Daftar agent di sidebar */
.side-agents{display:flex;flex-direction:column;gap:4px;margin-bottom:4px}
.side-agent{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:7px 10px;border-radius:999px;color:#EAF5EE;transition:background .15s}
.side-agent:hover{background:rgba(255,255,255,.1)}
.side-agent img{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none}
.side-agent .sa-tx{line-height:1.15;min-width:0}
.side-agent .sa-tx b{display:block;font-size:14px;color:#fff}
.side-agent .sa-tx span{font-size:12px;color:#A9CDBB}
.sa-dot{margin-left:auto;width:8px;height:8px;border-radius:50%;background:#39D98A;flex:none}
.sa-dot.busy{background:#FF9A5C}
.sa-dot.draft{background:#F2C14E}
@media (max-width:900px){.side-agents{display:none}}
/* ===== Radar Operasional ===== */
.grid-stats-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1080px){.grid-stats-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.grid-stats-4 .stat{border-color:transparent}
.grid-stats-4 .stat:nth-child(1){background:var(--amber-soft)}
.grid-stats-4 .stat:nth-child(2){background:var(--roni-soft)}
.grid-stats-4 .stat:nth-child(3){background:var(--red-soft)}
.grid-stats-4 .stat:nth-child(4){background:var(--ratih-soft)}
.grid-stats-4 .stat .ic{background:rgba(255,255,255,.85)}
@media (prefers-color-scheme: dark){.grid-stats-4 .stat .ic{background:rgba(0,0,0,.28)}}
.fchips{display:flex;gap:8px;flex-wrap:wrap}
.fchip{padding:8px 15px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-weight:700;font-size:14px;color:var(--ink-2);transition:background .15s,color .15s,border-color .15s}
.fchip:hover{border-color:var(--pine);color:var(--pine-ink)}
.fchip.active{background:var(--pine);border-color:var(--pine);color:#fff}
.r-av{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:none}
.radar-item{transition:opacity .2s}
.radar-item.resolved{opacity:.55}
.radar-item.resolved .tt{text-decoration:line-through}
.radar-wrap{display:grid;place-items:center;padding:12px 20px 2px}
.radar-wrap svg{width:min(290px,78vw);height:auto;display:block}
.sweep{transform-origin:150px 150px;animation:radarsweep 7s linear infinite}
@keyframes radarsweep{to{transform:rotate(360deg)}}
.blip{animation:blip 2.4s ease-in-out infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.3}}
@media (prefers-reduced-motion: reduce){.sweep,.blip{animation:none}}
.legend{display:flex;gap:8px 16px;flex-wrap:wrap;justify-content:center;padding:12px 20px 18px;font-size:12px;font-weight:600;color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center}
.legend i{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:6px;flex:none}
.esc{display:flex;flex-direction:column;margin-top:4px}
.esc-step{display:flex;gap:13px;position:relative;padding-bottom:17px}
.esc-step::before{content:"";position:absolute;left:33px;top:36px;bottom:-2px;width:2.5px;background:var(--line);border-radius:2px}
.esc-step:last-child{padding-bottom:2px}
.esc-step:last-child::before{display:none}
.esc-time{font-family:"Sora",sans-serif;font-weight:800;font-size:14px;background:var(--pine-soft);color:var(--pine-ink);border-radius:999px;padding:6px 10px;height:fit-content;flex:none;min-width:66px;text-align:center;position:relative;z-index:1}
.esc-step .t{font-weight:700;font-size:14px}
.esc-step .d{font-size:14px;color:var(--ink-2)}
.safe-list{list-style:none;margin:0;padding:4px 20px 20px;display:flex;flex-direction:column;gap:11px}
.safe-list li{display:flex;gap:11px;font-size:14px;color:var(--ink-2);align-items:flex-start}
.safe-list li b{color:var(--ink)}
.safe-list .sic{width:26px;height:26px;flex:none;border-radius:9px;background:var(--pine-soft);color:var(--pine-ink);display:grid;place-items:center;margin-top:1px}
/* ===== Aksi cepat, Chat demo & Meja agent ===== */
.agent{position:relative;cursor:pointer}
.agent-top{padding-right:82px}
.agent-actions{position:absolute;top:14px;right:14px;display:flex;gap:7px;z-index:3}
.mini-icon{
width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;
background:color-mix(in srgb,var(--surface) 90%,transparent);color:var(--ink);
border:1px solid color-mix(in srgb,var(--line) 75%,transparent);
box-shadow:0 5px 16px rgba(10,40,28,.14);transition:transform .15s,background .15s,color .15s;
}
.mini-icon:hover{transform:translateY(-1px);background:var(--surface);color:var(--pine-ink)}
.agent[data-agent="wira"] .mini-icon:hover{color:var(--wira-ink)}
.agent[data-agent="sinta"] .mini-icon:hover{color:var(--sinta-ink)}
.agent[data-agent="dita"] .mini-icon:hover{color:var(--dita-ink)}
.agent[data-agent="roni"] .mini-icon:hover{color:var(--roni-ink)}
.agent[data-agent="eko"] .mini-icon:hover{color:var(--eko-ink)}
.agent[data-agent="mira"] .mini-icon:hover{color:var(--mira-ink)}
.agent[data-agent="ratih"] .mini-icon:hover{color:var(--ratih-ink)}
.agent[data-agent="gilang"] .mini-icon:hover{color:var(--gilang-ink)}
.drawer-actions{display:flex;gap:9px;flex-wrap:wrap;margin:16px 0 4px}
.chat-scrim{z-index:80}
.chat-drawer{z-index:90;width:min(480px,100vw)}
.chat-drawer-head{padding:20px;border-bottom:1px solid var(--line);display:flex;gap:14px;align-items:flex-start}
.chat-drawer-head .avatar{width:64px;height:64px}
.chat-scroll{overflow-y:auto;padding:16px 18px;flex:1;display:flex;flex-direction:column;gap:10px;min-height:0}
.demo-banner{
background:var(--amber-soft);border:1px solid color-mix(in srgb,var(--amber) 30%,transparent);
border-radius:16px;padding:11px 13px;font-size:14px;color:var(--ink);
}
.demo-banner b{color:var(--amber)}
.prompt-chips{display:flex;gap:8px;flex-wrap:wrap}
.prompt-chip{
padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);
font-size:12px;font-weight:700;color:var(--ink-2);text-align:left;
}
.prompt-chip:hover,.prompt-chip.active{border-color:var(--pine);background:var(--pine-soft);color:var(--pine-ink)}
.chat-thread{display:flex;flex-direction:column;gap:10px}
.chat-thread .bubble{max-width:88%}
.demo-composer{border-top:1px solid var(--line);padding:13px 16px 16px;background:var(--surface)}
.demo-composer-row{display:flex;gap:9px}
.demo-composer input{
flex:1;min-width:0;border:1px solid var(--line);background:var(--surface-3);color:var(--ink);
border-radius:999px;padding:11px 15px;outline:0;
}
.demo-composer input:focus{border-color:var(--pine)}
.demo-note{font-size:12px;color:var(--ink-2);margin-top:9px;display:none}
.demo-note.show{display:block}
.demo-note b{color:var(--amber)}
/* ===== Lampiran di kotak chat ===== */
.attach-btn{
width:44px;height:44px;min-width:44px;min-height:44px;flex:none;border-radius:50%;
display:grid;place-items:center;background:var(--surface-3);border:1px solid var(--line);color:var(--ink-2);
transition:background .15s,border-color .15s,color .15s;
}
.attach-btn:hover{border-color:var(--pine);color:var(--pine-ink);background:var(--pine-soft)}
.attach-btn:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.attach-btn svg{flex:none}
.attach-row{display:none;margin-bottom:10px}
.attach-row.show{display:block}
.attach-chip{
display:flex;align-items:flex-start;gap:10px;background:var(--pine-soft);
border:1px solid color-mix(in srgb,var(--pine) 26%,transparent);border-radius:14px;padding:10px 12px;
}
.attach-chip-ic{width:36px;height:36px;flex:none;border-radius:10px;background:var(--surface);display:grid;place-items:center;font-size:17px;line-height:1}
.attach-chip-tx{flex:1;min-width:0;font-size:14px;line-height:1.45;color:var(--ink)}
.attach-chip-tx b{font-weight:800;overflow-wrap:break-word}
.attach-chip-tx span{display:block;color:var(--ink-2);font-size:12.5px;line-height:1.45;margin-top:1px}
.attach-chip-x{
width:36px;height:36px;min-width:36px;flex:none;border-radius:50%;display:grid;place-items:center;
background:var(--surface);border:1px solid var(--line);color:var(--ink-2);font-size:17px;line-height:1;
}
.attach-chip-x:hover{color:var(--red);border-color:var(--red)}
.bubble-attach{margin-top:8px;border-radius:12px;overflow:hidden;background:rgba(255,255,255,.14);border:1px solid rgba(127,127,127,.18)}
.bubble.in .bubble-attach{background:var(--surface);border-color:var(--line)}
.bubble-attach img{width:100%;max-width:220px;height:auto;max-height:150px;object-fit:cover;display:block}
.bubble-attach-cap{padding:8px 10px;font-size:12.5px;line-height:1.45}
.bubble-attach-cap b{display:block;font-size:13px;overflow-wrap:break-word}
.bubble-attach-cap span{opacity:.85}
.bubble-attach-file{display:flex;align-items:center;gap:9px;padding:9px 10px;font-size:13px;line-height:1.4}
.bubble-attach-file .fic{width:34px;height:34px;flex:none;border-radius:9px;background:var(--surface-2);display:grid;place-items:center;font-size:16px}
.demo-composer-row{align-items:center}
.demo-composer-row .btn{flex:none}
@media (max-width:380px){.bubble-attach img{max-width:180px}}
/* ===== Antrean Persetujuan satu pintu berjenjang ===== */
.jenjang-chip{margin-left:6px;white-space:normal;line-height:1.35}
.appr-thumb{width:92px;height:72px;flex:none;border-radius:14px;object-fit:cover;border:1px solid var(--line);background:var(--surface-2)}
.appr-monitor{margin-top:8px;background:var(--surface-3);border:1px dashed var(--line);border-radius:12px;padding:9px 11px;font-size:12.5px;color:var(--ink-2);line-height:1.5}
.appr-hasil{display:none;margin-top:9px;background:var(--pine-soft);border:1px solid color-mix(in srgb,var(--pine) 24%,transparent);border-radius:12px;padding:9px 11px;font-size:13px;line-height:1.55;color:var(--ink)}
.appr-hasil.show{display:block}
.appr-hasil b{color:var(--pine-ink)}
.appr-scope{margin-bottom:14px;background:var(--blue-soft);border:1px solid color-mix(in srgb,var(--blue) 26%,transparent);border-radius:14px;padding:12px 15px;font-size:14px;line-height:1.55;color:var(--ink)}
.appr-scope b{color:var(--blue)}
@media (max-width:620px){.appr-thumb{width:76px;height:60px}.row .appr-thumb{order:0}}
/* ===== Bekal vs laporan canvasser + Formulir Lapor Kunjungan ===== */
.bekal-chip{display:inline-flex;align-items:center;gap:6px;background:var(--roni-soft);color:var(--roni-ink);font-size:12px;font-weight:800;padding:5px 11px;border-radius:999px;white-space:normal;line-height:1.35}
.bekal-line{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);margin-top:10px}
.laporan-saya{display:none;margin-top:12px;background:var(--pine-soft);border:1px solid color-mix(in srgb,var(--pine) 24%,transparent);border-radius:14px;padding:12px 14px;font-size:14px;line-height:1.55;color:var(--ink)}
.laporan-saya.show{display:block}
.laporan-saya b{color:var(--pine-ink)}
.laporan-saya .roni-note{display:block;margin-top:6px;font-size:12.5px;color:var(--ink-2)}
.lapor-scrim{position:fixed;inset:0;background:rgba(6,25,17,.55);opacity:0;pointer-events:none;transition:opacity .2s;z-index:95}
.lapor-scrim.open{opacity:1;pointer-events:auto}
.lapor-modal{position:fixed;inset:0;z-index:96;display:none;place-items:center;padding:16px}
.lapor-modal.open{display:grid}
.lapor-card{background:var(--surface);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow-lg);width:min(560px,100%);max-height:calc(100dvh - 32px);overflow-y:auto}
.lapor-head{padding:20px 20px 0;display:flex;gap:12px;align-items:flex-start}
.lapor-head h3{font-size:18px;flex:1}
.lapor-head p{font-size:14px;color:var(--ink-2);margin-top:3px;line-height:1.5}
.lapor-body{padding:16px 20px 20px;display:flex;flex-direction:column;gap:14px}
.lapor-field{display:flex;flex-direction:column;gap:6px;font-size:14px}
.lapor-field>span{font-weight:800;font-size:13px}
.lapor-field small{font-weight:600;color:var(--ink-3);font-size:12px;line-height:1.45}
.lapor-field input[type="text"],.lapor-field input[type="date"],.lapor-field textarea{
width:100%;border:1px solid var(--line);background:var(--surface-3);color:var(--ink);border-radius:14px;padding:11px 13px;font:inherit;min-height:44px;
}
.lapor-field textarea{min-height:76px;resize:vertical}
.lapor-field input:focus,.lapor-field textarea:focus{border-color:var(--pine);outline:2px solid color-mix(in srgb,var(--pine) 25%,transparent)}
.lapor-field select{width:100%;border:1px solid var(--line);background:var(--surface-3);color:var(--ink);border-radius:14px;padding:11px 13px;font:inherit;min-height:44px}
.lapor-field select:focus{border-color:var(--pine);outline:2px solid color-mix(in srgb,var(--pine) 25%,transparent)}
/* ===== Formulir penugasan kunjungan (input SPV di Sales Lapangan) ===== */
.assign-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.assign-attrib{font-size:12.5px;color:var(--ink-3);line-height:1.5}
.assign-attrib b{color:var(--ink-2)}
.assign-status{font-size:13.5px;color:var(--ink-2);line-height:1.5}
.assign-status.done{color:var(--pine-ink);font-weight:700}
.assign-chip{white-space:normal;line-height:1.35;text-align:left}
@media (max-width:620px){.assign-grid{grid-template-columns:1fr}}
.lapor-attach-row{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}
.lapor-attach-row .attach-row{flex:1 1 220px;margin-bottom:0}
.status-opts{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.status-opts legend{font-weight:800;font-size:13px;margin-bottom:7px;padding:0}
.status-opt{position:relative}
.status-opt input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer}
.status-opt span{display:inline-flex;align-items:center;min-height:44px;padding:9px 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface-3);font-weight:800;font-size:14px;color:var(--ink-2)}
.status-opt input:checked+span{background:var(--pine);border-color:var(--pine);color:#fff}
.status-opt input:focus-visible+span{outline:2px solid var(--orange);outline-offset:2px}
.lapor-actions{display:flex;gap:9px;flex-wrap:wrap;padding-top:2px}
.lapor-actions .btn{flex:1;justify-content:center}
@media (prefers-reduced-motion: reduce){.lapor-scrim{transition:none}}
@media (max-width:620px){.lapor-modal{padding:10px}.lapor-head,.lapor-body{padding-left:16px;padding-right:16px}}
.desk-back{margin-bottom:14px}
.desk-hero{
border-radius:32px;padding:24px;margin-bottom:16px;border:1px solid transparent;
display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center;
}
.desk-hero[data-agent="wira"]{background:var(--wira-soft)} .desk-hero[data-agent="sinta"]{background:var(--sinta-soft)} .desk-hero[data-agent="dita"]{background:var(--dita-soft)}
.desk-hero[data-agent="roni"]{background:var(--roni-soft)} .desk-hero[data-agent="eko"]{background:var(--eko-soft)}
.desk-hero[data-agent="mira"]{background:var(--mira-soft)} .desk-hero[data-agent="ratih"]{background:var(--ratih-soft)} .desk-hero[data-agent="gilang"]{background:var(--gilang-soft)}
.desk-hero .avatar{width:104px;height:104px}
.desk-hero h2{font-size:27px;margin:2px 0 3px}
.desk-hero .desk-role{font-weight:700;color:var(--ink-2)}
.desk-hero .desk-about{font-size:14px;color:var(--ink-2);max-width:72ch;margin-top:8px}
.desk-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}
.desk-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}
.desk-stat{padding:17px 18px;border-radius:24px}
.desk-stat .v{font-family:"Sora",sans-serif;font-size:23px;font-weight:800;line-height:1.1}
.desk-stat .l{font-size:14px;color:var(--ink-2);font-weight:600;margin-top:4px}
.desk-chat{margin-bottom:16px;overflow:hidden}
.desk-chat .chat-thread{padding:16px 18px 6px}
.desk-chat .prompt-chips{padding:12px 18px 0}
.desk-chat .demo-composer{margin-top:12px}
.desk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px}
.desk-list{list-style:none;margin:0;padding:6px 20px 18px;display:flex;flex-direction:column;gap:10px}
.desk-list li{display:flex;gap:10px;font-size:14px;color:var(--ink-2);align-items:flex-start}
.desk-list li b{color:var(--ink)}
.desk-list .dotmark{width:9px;height:9px;border-radius:50%;background:var(--pine);flex:none;margin-top:6px}
.desk-special{grid-column:1/-1}
/* ===== Dari Lapangan (Canvassing) di Meja Sinta ===== */
.canvass-card{grid-column:1/-1;margin-bottom:16px;border-color:color-mix(in srgb,var(--sinta) 35%,var(--line));background:color-mix(in srgb,var(--sinta-soft) 38%,var(--surface))}
.chain-flow{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.chain-note{font-size:13.5px;color:var(--ink-2);line-height:1.55}
.chain-card{margin-bottom:16px}
.chain-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:14px 20px 20px}
.chain-case{background:var(--surface-3);border:1px solid var(--line);border-radius:18px;padding:16px}
.chain-case h4{font-size:15px;margin-bottom:8px}
/* ===== Jalur Fulfillment (4 jalur owner) ===== */
.ful-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:14px 20px 6px}
.ful-card{border:1px solid var(--line);border-radius:20px;padding:16px 18px;background:var(--surface-3)}
.ful-card[data-lane="1"]{background:var(--pine-soft);border-color:color-mix(in srgb,var(--pine) 24%,transparent)}
.ful-card[data-lane="2"]{background:var(--blue-soft);border-color:color-mix(in srgb,var(--blue) 24%,transparent)}
.ful-card[data-lane="3"]{background:var(--eko-soft);border-color:color-mix(in srgb,var(--eko) 26%,transparent)}
.ful-card[data-lane="4"]{background:var(--amber-soft);border-color:color-mix(in srgb,var(--amber) 30%,transparent)}
.ful-top{display:flex;gap:11px;align-items:flex-start}
.ful-num{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-family:"Sora",sans-serif;font-weight:800;font-size:14px;color:#fff;margin-top:1px}
.ful-card[data-lane="1"] .ful-num{background:var(--pine)}
.ful-card[data-lane="2"] .ful-num{background:var(--blue)}
.ful-card[data-lane="3"] .ful-num{background:var(--eko)}
.ful-card[data-lane="4"] .ful-num{background:var(--amber)}
.ful-card h4{font-size:15.5px;line-height:1.3}
.ful-when{font-size:13.5px;color:var(--ink-2);line-height:1.5;margin-top:3px}
.ful-flow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:11px}
.ful-flow .stage-node{background:var(--surface);font-size:11.5px;padding:6px 10px}
.ful-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:11px;align-items:center}
.ful-ex{margin-top:10px;font-size:13px;line-height:1.55;color:var(--ink-2);background:var(--surface);border:1px dashed color-mix(in srgb,var(--line) 80%,transparent);border-radius:12px;padding:9px 11px}
.ful-ex b{color:var(--ink)}
@media (max-width:700px){.ful-grid{grid-template-columns:1fr;padding:12px 16px 4px}}
.ful-tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;letter-spacing:.02em;padding:4px 9px;border-radius:999px;white-space:nowrap;line-height:1.3}
.ful-tag-1{background:var(--pine-soft);color:var(--pine-ink)}
.ful-tag-2{background:var(--blue-soft);color:var(--blue)}
.ful-tag-3{background:var(--eko-soft);color:var(--eko-ink)}
.ful-tag-4{background:var(--amber-soft);color:var(--amber)}
.ful-stack{display:flex;flex-direction:column;gap:5px;align-items:flex-start}
@media (max-width:700px){.chain-grid{grid-template-columns:1fr;padding:12px 16px 16px}}
.canvass-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:14px 20px 20px}
.canvass-case{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px 17px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:9px}
.canvass-case h4{font-size:15px;line-height:1.35}
.canvass-src{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;background:var(--roni-soft);color:var(--roni-ink);font-size:12px;font-weight:800;padding:5px 11px;border-radius:999px;line-height:1.35}
.canvass-chain{font-size:13.5px;color:var(--ink-2);line-height:1.55}
.canvass-chain b{color:var(--ink)}
.canvass-tahap{background:var(--amber-soft);border:1px solid color-mix(in srgb,var(--amber) 28%,transparent);border-radius:14px;padding:11px 13px;font-size:13.5px;line-height:1.55}
.canvass-tahap b{color:var(--amber)}
.canvass-tahap.sent{background:var(--pine-soft);border-color:color-mix(in srgb,var(--pine) 24%,transparent)}
.canvass-tahap.sent b{color:var(--pine-ink)}
.canvass-meta{font-size:12.5px;color:var(--ink-3);line-height:1.5}
.canvass-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:4px}
.canvass-actions .btn{flex:1 1 140px;justify-content:center}
@media (max-width:700px){.canvass-grid{grid-template-columns:1fr;padding:12px 16px 16px}}
@media (max-width:700px){
.desk-hero{grid-template-columns:1fr;padding:20px}
.desk-hero .avatar{width:82px;height:82px}
.desk-stats{grid-template-columns:1fr}
.desk-grid{grid-template-columns:1fr}
.desk-special{grid-column:auto}
.agent-top{padding-right:76px}
.chat-thread .bubble{max-width:94%}
}
@media (max-width:380px){
.agent-actions{top:10px;right:10px}
.mini-icon{width:35px;height:35px}
.agent-top{padding-right:70px}
}
/* ===== Asisten Saya (per peran) ===== */
.asisten-card{
display:flex;gap:16px;align-items:flex-start;
border:1px solid transparent;border-radius:24px;padding:18px 20px;margin-bottom:16px;
box-shadow:var(--shadow);
}
.asisten-card[data-agent="wira"]{background:var(--wira-soft)} .asisten-card[data-agent="sinta"]{background:var(--sinta-soft)}
.asisten-card[data-agent="dita"]{background:var(--dita-soft)} .asisten-card[data-agent="roni"]{background:var(--roni-soft)}
.asisten-card[data-agent="eko"]{background:var(--eko-soft)} .asisten-card[data-agent="mira"]{background:var(--mira-soft)}
.asisten-card[data-agent="ratih"]{background:var(--ratih-soft)} .asisten-card[data-agent="gilang"]{background:var(--gilang-soft)}
.asisten-card .avatar{width:64px;height:64px;flex:none}
.asisten-main{flex:1;min-width:0}
.asisten-kicker{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.asisten-kicker .stby{display:inline-flex;align-items:center;gap:6px;letter-spacing:0;text-transform:none;font-size:12px;color:var(--pine-ink);font-weight:700}
.asisten-kicker .stby i{width:8px;height:8px;border-radius:50%;background:#2BB673;flex:none}
.asisten-name{font-family:"Sora",sans-serif;font-size:19px;font-weight:800;margin-top:2px}
.asisten-role{font-size:14px;font-weight:700;color:var(--ink-2)}
.asisten-can{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.asisten-can li{display:flex;gap:9px;font-size:14px;color:var(--ink-2);align-items:flex-start}
.asisten-can li b{color:var(--ink)}
.asisten-can .dotmark{width:9px;height:9px;border-radius:50%;background:var(--pine);flex:none;margin-top:6px}
.asisten-bound{font-size:14px;color:var(--ink-2);margin-top:10px}
.asisten-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:13px}
.chat-boundary{background:var(--pine-soft);border:1px solid color-mix(in srgb,var(--pine) 25%,transparent);border-radius:12px;padding:11px 13px;font-size:14px;color:var(--ink)}
.chat-boundary b{color:var(--pine-ink)}
.side-asisten{margin-bottom:2px}
@media (max-width:900px){.side-asisten{display:none !important}}
@media (max-width:620px){
.asisten-card{flex-direction:column;padding:16px}
.asisten-card .avatar{width:56px;height:56px}
.asisten-actions .btn{flex:1;justify-content:center}
}
/* ===== SOP: tabel responsif, funnel, order, backup ===== */
.table-scroll{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
.rtable{width:100%;border-collapse:collapse;font-size:14px}
.rtable th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:12px 14px;border-bottom:1.5px solid var(--line);white-space:nowrap}
.rtable td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.rtable tbody tr:last-child td{border-bottom:0}
.rtable .num-c{font-weight:800;font-family:"Sora",sans-serif}
/* Panel Gudang & Stok + Rekap Penawaran */
.gstk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:14px 20px 18px}
.gstk-blk{background:var(--surface-2);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.gstk-blk h4{font-size:14px;margin:0 0 8px}
.gstk-note{font-size:12.5px;color:var(--ink-3);margin:9px 0 0;line-height:1.5}
tr.rekap-grp td{background:var(--pine-soft);color:var(--pine-ink);font-weight:800;font-size:13px;border-bottom:1.5px solid var(--line);white-space:normal}
.rekap-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.rekap-tools select{min-height:40px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:12px;padding:7px 10px;font-size:14px;font-weight:600;font-family:inherit}
@media (max-width:620px){.gstk-grid{grid-template-columns:1fr}}
.pair-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:4px 20px 20px}
.pair{display:flex;align-items:center;gap:12px;background:var(--surface-3);border:1px solid var(--line);border-radius:18px;padding:13px 15px;flex-wrap:wrap}
.pair .who-pair{flex:1;min-width:120px}
.pair .who-pair b{display:block;font-size:14px}
.pair .who-pair span{font-size:12px;color:var(--ink-2)}
.pair .swap{width:36px;height:36px;flex:none;border-radius:50%;background:var(--pine-soft);color:var(--pine-ink);display:grid;place-items:center}
.op-av{width:38px;height:38px;border-radius:50%;background:var(--pine);color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px;flex:none}
.op-av.alt{background:var(--blue)}
.stage-flow{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.stage-node{background:var(--surface-3);border:1px solid var(--line);border-radius:999px;padding:7px 13px;font-size:12px;font-weight:700}
.stage-node.hot{background:var(--orange-soft);color:var(--orange-deep);border-color:transparent}
.stage-arrow{color:var(--ink-3);font-weight:800}
.fstage{display:flex;align-items:center;gap:12px;padding:9px 0}
.fstage .fl{width:170px;flex:none;font-weight:700;font-size:14px}
.fstage .fl small{display:block;font-weight:600;color:var(--ink-3);font-size:12px;margin-top:1px}
.fstage .ftrack{flex:1;height:26px;background:var(--surface-2);border-radius:99px;overflow:hidden}
.fstage .ftrack i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--pine-mid),var(--pine))}
.fstage .fv{width:210px;flex:none;font-size:14px;color:var(--ink-2)}
.fstage .fv b{color:var(--ink);font-family:"Sora",sans-serif;font-size:14px}
.paket-box{background:var(--surface-3);border:1.5px dashed color-mix(in srgb,var(--pine) 40%,var(--line));border-radius:18px;padding:16px 18px;font-size:14px;line-height:1.75;white-space:pre-wrap;overflow-wrap:break-word;margin:0 20px 20px}
.ck-list{list-style:none;margin:0;padding:6px 20px 18px;display:flex;flex-direction:column;gap:11px}
.ck-list li{display:flex;gap:11px;font-size:14px;color:var(--ink-2);align-items:flex-start;flex-wrap:wrap}
.ck-list li b{color:var(--ink)}
.ck-list .sic{width:26px;height:26px;flex:none;border-radius:9px;background:var(--pine-soft);color:var(--pine-ink);display:grid;place-items:center;margin-top:1px}
.ck-list .ck-tx{flex:1;min-width:180px}
.route-list{list-style:none;counter-reset:route;margin:0;padding:4px 20px 18px;display:flex;flex-direction:column;gap:9px}
.route-list li{display:flex;gap:11px;font-size:14px;color:var(--ink-2);align-items:flex-start;counter-increment:route}
.route-list .rn{width:26px;height:26px;flex:none;border-radius:50%;background:var(--pine);color:#fff;display:grid;place-items:center;font-weight:800;font-size:12px}
.route-list .rn::before{content:counter(route)}
.def-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:4px 20px 20px}
.def-item{background:var(--surface-3);border:1px solid var(--line);border-radius:14px;padding:11px 13px;font-size:14px;color:var(--ink-2)}
.def-item b{display:block;color:var(--ink);font-size:14px;margin-bottom:2px}
@media (max-width:900px){.pair-grid,.def-grid{grid-template-columns:1fr}}
@media (max-width:700px){
.rtable thead{display:none}
.rtable,.rtable tbody,.rtable tr,.rtable td{display:block;width:100%}
.rtable tr{padding:10px 16px;border-bottom:1px solid var(--line)}
.rtable tbody tr:last-child{border-bottom:0}
.rtable td{border:0;padding:3px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;text-align:right}
.rtable td::before{content:attr(data-th);font-weight:700;color:var(--ink-3);font-size:12px;letter-spacing:.05em;text-transform:uppercase;text-align:left;flex:none}
.fstage{flex-wrap:wrap}
.fstage .fl{width:100%}
.fstage .fv{width:auto}
}
/* ===== Responsive safety layer: sidebar tidak pernah hilang ===== */
html,body{max-width:100%;overflow-x:clip}
body{min-width:0}
.app{min-width:0}
.main,.content,.panel,.card,.grid-2,.grid-2e,.chat-wrap{min-width:0}
.sidebar{min-height:0;height:100dvh;max-height:100dvh;overflow:hidden}
.brand{flex:none}
.side-scroll{min-height:0;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.30) transparent}
.side-scroll::-webkit-scrollbar{width:6px;height:6px}
.side-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);border-radius:99px}
.side-scroll::-webkit-scrollbar-track{background:transparent}
.side-foot{flex:none}
.nav-item{min-width:0}
.nav-txt{min-width:0;line-height:1.25;overflow-wrap:break-word}
.nav-badge{flex:none}
.side-agent .sa-tx{min-width:0}
.side-agent .sa-tx b,.side-agent .sa-tx span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-in,.top-actions,.row,.po-head{min-width:0}
.row .tt,.row .ds,.lead-card .t,.lead-card .d{overflow-wrap:break-word}
/* Laptop & tablet landscape: sidebar ramping, label tetap utuh terbaca */
@media (min-width:861px) and (max-width:1200px){
:root{--sidebar-w:216px}
.app{grid-template-columns:var(--sidebar-w) minmax(0,1fr)}
.sidebar{position:sticky;top:0;height:100dvh;max-height:100dvh}
.brand{padding:16px 16px 10px}
.brand-name{font-size:14px}
.brand-sub{font-size:12px}
.brand-mark{width:38px;height:38px;border-radius:16px}
.side-scroll{overflow-y:auto;padding:4px 10px 14px}
.nav-label{display:block;padding:12px 10px 5px}
.nav-group{display:block}
.nav-item{flex-direction:row;justify-content:flex-start;text-align:left;font-size:14px;padding:9px 13px;gap:9px;border-radius:999px;position:static}
.nav-item .nav-badge{position:static;margin-left:auto;min-width:22px;height:22px;font-size:12px;padding:0 6px}
.side-agents{display:flex}
.side-agent{padding:6px 9px}
.side-agent img{width:30px;height:30px}
.side-card{display:block;margin:10px 2px 2px;padding:11px 12px}
.side-foot{display:block;padding:11px 16px}
.owner .who{display:block}
.search{min-width:200px;flex:none}
}
/* Desktop/laptop tinggi pendek: padatkan, sisanya digulir di dalam sidebar */
@media (min-width:861px) and (max-height:820px){
.brand{padding-top:13px;padding-bottom:7px}
.nav-label{padding-top:9px}
.nav-item{padding-top:7px;padding-bottom:7px}
.side-agent{padding-top:5px;padding-bottom:5px}
.side-card{margin-top:9px;padding:10px 12px}
.side-foot{padding-top:10px;padding-bottom:10px}
}
/* Tablet portrait & HP: brand + menu grid menempel di atas, semua menu terlihat */
@media (max-width:860px){
.app{display:block}
.sidebar{
display:flex;flex-direction:column;position:sticky;top:0;z-index:45;
height:auto;max-height:none;overflow:visible;
background:linear-gradient(180deg,#0B4A34 0%,#073D2A 60%,#062E20 100%);
box-shadow:0 10px 26px rgba(4,30,20,.28);
}
.brand{padding:10px 14px 4px;background:none}
.brand-mark{width:36px;height:36px;border-radius:14px}
.brand-name{font-size:14px}
.side-scroll{
position:static;overflow:visible;flex:none;height:auto;max-height:none;
padding:2px 8px 10px;background:none;border:0;box-shadow:none;
}
.nav-label,.side-agents,.side-card,.side-foot{display:none !important}
/* 2026-10-14: menu mobile = grid 5 kolom tanpa scroll horizontal —
tap tidak tertelan gesture scroll; touch-action:manipulation
menghilangkan jeda tap di browser HP */
.nav-group{
display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;
overflow:visible;padding:2px;
}
.nav-item{
flex:none;width:auto;min-height:60px;
flex-direction:column;justify-content:center;align-items:center;
gap:5px;text-align:center;font-size:12px;line-height:1.2;
padding:8px 3px 7px;border-radius:16px;margin:0;
position:relative;min-width:0;
touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer;
}
.nav-txt{display:block;line-height:1.2;overflow-wrap:break-word;hyphens:auto}
.nav-item .nav-badge,.nav-badge{
position:absolute;top:4px;right:6px;margin:0;
min-width:18px;height:18px;font-size:12px;padding:0 5px;
}
.main{padding-bottom:28px}
.topbar{position:static}
.grid-2,.grid-2e,.chat-wrap{grid-template-columns:1fr}
.topbar-in{padding:12px 16px}
.content{padding:18px 16px 4px}
footer.site{padding:18px 16px 26px}
.search{min-width:0;flex:1}
.owner .who{display:none}
.owner{padding:5px}
}
/* HP kecil: baris boleh membungkus, tidak ada yang melebar keluar layar */
@media (max-width:620px){
.row{flex-wrap:wrap}
.row .grow{flex:1 1 180px}
.appr-actions{flex-wrap:wrap}
.fchips{flex-wrap:wrap}
.esc-step::before{left:31px}
.hbar .hl{width:92px}
.chat-wrap .card{min-width:0}
.radar-wrap{padding-left:10px;padding-right:10px}
}
@media (max-width:380px){
.nav-item{font-size:12px;min-height:56px;padding-left:2px;padding-right:2px}
.page-title h1{font-size:20px}
.grid-stats{grid-template-columns:1fr 1fr}
.stat .num{font-size:23px}
}
/* ===== Skala baca M3 Expressive (peningkatan keterbacaan) ===== */
body{font-size:15.5px;line-height:1.6}
p,li{line-height:1.55}
/* Teks isi utama 14–14,5px */
.panel-head p{font-size:14.5px;line-height:1.6}
.card-head p{font-size:14px;line-height:1.55}
.row .ds,.row .tt,.lead-card .d,.po-head .d,.esc-step .d,.safe-list li,.ck-list li,.route-list li,.def-item,.desk-list li,.asisten-can li,.brief-item p,.chat-note,.demo-banner,.chat-boundary,.focus-banner,.meja-note,.legend,.empty,footer.site p{font-size:14px;line-height:1.55}
.row .tt,.lead-card .t,.work-item .t,.esc-step .t,.agenda-item .t,.photo-card .cap h4,.principle h3{font-size:14.5px}
.work-item .d,.bubble,.kv,.notif-item,.desk-about,.asisten-bound,.task-card .ds,.agenda-item .d,.hbar,.cat .l,.stat .lbl,.desk-stat .l,.brief-item p{font-size:14px}
.bubble{line-height:1.6;padding:12px 15px}
.rtable{font-size:14px;line-height:1.55}
.rtable td{padding:13px 14px}
.paket-box{font-size:14px;line-height:1.7}
.search input{font-size:14px}
.page-title .sub{font-size:14px}
.owner .who b{font-size:14px}
.notif-item b{font-size:14px}
.task-card .tt{font-size:15.5px}
.side-card h4{font-size:14px}
.side-card p{font-size:14px;line-height:1.55}
.pair .who-pair b{font-size:14.5px}
.pair .who-pair span{font-size:14px}
/* Label & teks kecil: minimum 12px */
.bubble .tm{font-size:12px}
.nav-label{letter-spacing:.12em}
/* Judul & angka: naik sebanding */
.page-title h1{font-size:26px}
.panel-head h2{font-size:21px}
.card-head h3{font-size:17.5px}
.brand-name{font-size:17px}
.stat .num{font-size:30px}
.desk-stat .v{font-size:25px}
.cat .n{font-size:23px}
.agent .nm{font-size:19px}
.agent .role{font-size:14px}
.agent .task{font-size:14px;line-height:1.55;min-height:44px}
.desk-hero h2{font-size:29px}
.desk-hero .desk-role{font-size:14.5px}
.asisten-name{font-size:21px}
.asisten-role{font-size:14px}
.asisten-bound,.fstage .fv{font-size:14px}
.fstage .fl{font-size:14px}
.fstage .fv b{font-size:15px}
.principle p{font-size:14px;line-height:1.6}
/* Target sentuh ≥44px & padding lega */
.btn{min-height:44px;padding:11px 20px;font-size:14px}
.btn-sm{min-height:44px;padding:9px 16px;font-size:14px}
.icon-btn{width:44px;height:44px}
.nav-item{min-height:44px;padding:12px 16px;font-size:14.5px}
.fchip{min-height:44px;padding:10px 16px;font-size:14px;display:inline-flex;align-items:center}
.prompt-chip{min-height:44px;padding:10px 14px;font-size:14px;display:inline-flex;align-items:center}
.side-agent{min-height:44px;padding:9px 10px}
.side-agent .sa-tx b{font-size:14px}
.side-agent .sa-tx span{font-size:12px}
.mini-icon{width:44px;height:44px}
.chip{min-height:28px;padding:6px 12px}
.owner{min-height:44px}
.role-chip{min-height:28px}
.card-pad{padding:22px}
.stat{padding:18px 20px}
.row{padding:15px 22px}
.agent{padding:24px}
.task-card{padding:20px 22px}
.asisten-card{padding:20px 22px}
.po{padding:18px 22px}
.agenda-item{padding:13px 22px}
.drawer-body{padding:20px 22px 28px}
.chat-scroll{gap:12px;padding:18px 20px}
.desk-hero{padding:26px}
@media (max-width:900px){
.nav-item{min-height:60px;font-size:12px}
.side-agents{display:none}
}
@media (max-width:620px){
.btn,.btn-sm{min-height:44px}
.stat .num{font-size:27px}
.agent{padding:20px}
}
@media (max-width:380px){
.nav-item{font-size:12px;min-height:58px}
.stat .num{font-size:25px}
}
/* ===== Kartu Pemakaian Bulan Ini (kuota percakapan) ===== */
.quota-card{margin-bottom:16px}
.quota-card .card-head{flex-wrap:wrap}
.quota-card .card-head>div:first-child{min-width:0;flex:1 1 220px}
.quota-head-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;max-width:100%;min-width:0}
.quota-head-right .chip{white-space:normal;line-height:1.4;text-align:left}
@media (max-width:620px){.quota-card .card-head .right{margin-left:0}}
.quota-help-btn{width:44px;height:44px;flex:none;border-radius:50%;background:var(--pine);color:#fff;font-family:"Sora",sans-serif;font-weight:800;font-size:17px;display:grid;place-items:center;box-shadow:var(--shadow);transition:filter .15s}
.quota-help-btn:hover{filter:brightness(1.12)}
.quota-help-btn[aria-expanded="true"]{background:var(--pine-deep);color:#fff}
.quota-body{padding:16px 20px 20px}
.quota-big{font-family:"Sora",sans-serif;font-size:34px;font-weight:800;line-height:1.1;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.quota-big .of{font-family:"Plus Jakarta Sans",sans-serif;font-size:14px;font-weight:600;color:var(--ink-2)}
.quota-sub{font-size:14px;color:var(--ink-2);margin-top:7px;display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.quota-sub b{color:var(--ink)}
.quota-bar{height:14px;margin-top:14px}
.quota-bar i{background:linear-gradient(90deg,var(--pine-mid),var(--pine));transition:width .35s ease}
.quota-card.s-near .quota-bar i{background:linear-gradient(90deg,#D99A26,var(--amber))}
.quota-card.s-over .quota-bar i{background:linear-gradient(90deg,#D2604F,var(--red))}
@media (prefers-reduced-motion: reduce){.quota-bar i{transition:none}}
.quota-note{font-size:14px;color:var(--ink-2);margin-top:10px;max-width:78ch}
.quota-pkg-label{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-top:18px}
.quota-pkgs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:9px}
.quota-pkg{min-height:44px;text-align:left;border:1.5px solid var(--line);background:var(--surface-3);border-radius:18px;padding:14px 16px;display:flex;gap:12px;align-items:flex-start;transition:border-color .15s,background .15s;width:100%}
.quota-pkg:hover{border-color:var(--pine)}
.quota-pkg.active{border-color:var(--pine);background:var(--pine-soft)}
.quota-pkg .pradio{width:22px;height:22px;flex:none;border-radius:50%;border:2px solid var(--line);margin-top:2px;display:grid;place-items:center;background:var(--surface)}
.quota-pkg.active .pradio{border-color:var(--pine)}
.quota-pkg.active .pradio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--pine)}
.quota-pkg .pn{font-family:"Sora",sans-serif;font-weight:800;font-size:16px;display:block;line-height:1.25}
.quota-pkg .pq{font-size:14px;color:var(--ink-2);display:block;margin-top:2px}
.quota-pkg .pt{font-size:12px;font-weight:800;color:var(--pine-ink);display:none;margin-top:6px}
.quota-pkg.active .pt{display:block}
@media (max-width:620px){.quota-pkgs{grid-template-columns:1fr}}
.quota-help{margin:14px 20px 0;background:var(--surface-3);border:1px solid var(--line);border-radius:18px;padding:18px 20px}
.quota-help[hidden]{display:none}
.quota-help-head{display:flex;align-items:flex-start;gap:10px}
.quota-help-head h4{font-size:15.5px;flex:1;padding-top:9px}
.quota-help-close{width:44px;height:44px;flex:none;border-radius:50%;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-2)}
.quota-help-close:hover{color:var(--red);border-color:var(--red)}
.quota-help h5{font-size:14px;margin:15px 0 4px;color:var(--pine-ink)}
.quota-help p,.quota-help li{font-size:14px;color:var(--ink-2);line-height:1.6}
.quota-help ul{margin:4px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:5px}
.quota-example{background:var(--pine-soft);border:1px solid color-mix(in srgb,var(--pine) 22%,transparent);border-radius:14px;padding:12px 15px;margin-top:7px}
.quota-example p{color:var(--ink)}
.quota-sources{margin-top:20px;border-top:1px dashed var(--line);padding-top:16px}
.quota-sources h4{font-size:14.5px}
.quota-sources>p{font-size:14px;color:var(--ink-2);margin-top:2px}
.qsrc{display:flex;align-items:center;gap:12px;padding:8px 0;font-size:14px}
.qsrc .ql{width:200px;flex:none;font-weight:600;color:var(--ink-2)}
.qsrc .qtrack{flex:1;height:10px;background:var(--surface-2);border-radius:99px;overflow:hidden;min-width:60px}
.qsrc .qtrack i{display:block;height:100%;border-radius:99px}
.qsrc .qv{flex:none;text-align:right;font-weight:700;white-space:nowrap}
.qsrc .qv span{color:var(--ink-3);font-weight:600}
.qfill-1{background:var(--pine)} .qfill-2{background:var(--blue)} .qfill-3{background:var(--orange)}
@media (max-width:620px){
.qsrc{flex-wrap:wrap;gap:7px}
.qsrc .ql{width:100%}
.qsrc .qv{text-align:left}
.quota-big{font-size:29px}
.quota-help{margin-left:16px;margin-right:16px;padding:16px}
.quota-body{padding:14px 16px 18px}
}
/* ===== Halaman Pengaturan (khusus Pemilik) ===== */
.settings-stack{display:flex;flex-direction:column;gap:26px}
.settings-intro{display:flex;gap:14px;align-items:flex-start;background:var(--pine-soft);border:1px solid color-mix(in srgb,var(--pine) 24%,transparent);border-radius:20px;padding:16px 18px}
.settings-intro .sic{width:42px;height:42px;flex:none;border-radius:14px;background:var(--pine);color:#fff;display:grid;place-items:center}
.settings-intro b{color:var(--pine-ink)}
.settings-intro p{font-size:14px;color:var(--ink-2);line-height:1.55}
.settings-owner-tools{display:flex;align-items:center;gap:16px;justify-content:space-between;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:15px 18px;box-shadow:var(--shadow)}
.settings-owner-tools-copy{display:flex;gap:11px;align-items:flex-start;min-width:0}
.settings-owner-tools-copy .ric{width:38px;height:38px;flex:none;border-radius:13px;background:var(--orange-soft);color:var(--orange-deep);display:grid;place-items:center}
.settings-owner-tools-copy b{display:block;font-size:14px}
.settings-owner-tools-copy span{display:block;font-size:12.5px;color:var(--ink-2);line-height:1.5;margin-top:2px}
.settings-block-head{display:flex;align-items:flex-start;gap:13px;margin-bottom:13px}
.settings-block-actions{margin-left:auto;display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;flex:none}
.settings-block-actions .chip{margin-left:0}
.settings-reset-btn svg{flex:none}
.settings-reset-btn.btn-sm{min-height:38px;padding:8px 13px}
.settings-step{width:34px;height:34px;flex:none;border-radius:50%;background:var(--pine);color:#fff;display:grid;place-items:center;font-family:"Sora",sans-serif;font-size:14px;font-weight:800;box-shadow:var(--shadow)}
.settings-block-head h3{font-size:18px}
.settings-block-head p{font-size:14px;color:var(--ink-2);line-height:1.55;max-width:78ch;margin-top:3px}
.settings-block-head .chip{margin-left:auto;flex:none}
.settings-stack .quota-card{margin-bottom:0}
.access-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.access-role{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:18px;box-shadow:var(--shadow)}
.access-role-head{display:flex;gap:12px;align-items:flex-start;padding-bottom:12px;border-bottom:1px solid var(--line)}
.access-avatar{width:44px;height:44px;flex:none;border-radius:50%;background:var(--pine-soft);color:var(--pine-ink);display:grid;place-items:center;font-family:"Sora",sans-serif;font-weight:800}
.access-role-head h4{font-size:15.5px}
.access-role-head p{font-size:12px;color:var(--ink-3);line-height:1.45;margin-top:2px}
.access-role-head .chip{margin-left:auto;flex:none}
.setting-list{display:flex;flex-direction:column}
.setting-row{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px dashed var(--line)}
.setting-row:last-child{border-bottom:0;padding-bottom:2px}
.setting-copy{flex:1;min-width:0}
.setting-copy b{display:block;font-size:14px;line-height:1.4}
.setting-copy span{display:block;font-size:12px;color:var(--ink-3);line-height:1.45;margin-top:2px}
.switch-btn{min-width:96px;min-height:44px;display:inline-flex;align-items:center;gap:8px;justify-content:flex-end;border-radius:999px;padding:5px 2px;color:var(--ink-2)}
.switch-track{width:52px;height:30px;flex:none;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);position:relative;transition:background .18s,border-color .18s}
.switch-thumb{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--surface);box-shadow:0 2px 7px rgba(10,40,28,.22);transition:transform .18s}
.switch-btn[aria-checked="true"] .switch-track{background:var(--pine);border-color:var(--pine)}
.switch-btn[aria-checked="true"] .switch-thumb{transform:translateX(22px)}
.switch-state{font-size:12px;font-weight:800;min-width:38px;text-align:left;color:var(--ink-3)}
.switch-btn[aria-checked="true"] .switch-state{color:var(--pine-ink)}
@media (prefers-reduced-motion: reduce){.switch-track,.switch-thumb{transition:none}}
.settings-note{font-size:14px;color:var(--ink-2);background:var(--amber-soft);border:1px solid color-mix(in srgb,var(--amber) 28%,transparent);border-radius:16px;padding:13px 15px;line-height:1.55;margin-top:14px}
.settings-note b{color:var(--amber)}
.datasource-options{display:grid;gap:12px;padding:4px 20px}
.datasource-option{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:16px;padding:16px;cursor:pointer;background:var(--surface)}
.datasource-option:has(input:checked){border-color:var(--pine);box-shadow:0 0 0 1px var(--pine)}
.datasource-option input[type=radio]{margin-top:4px;accent-color:var(--pine)}
.datasource-body{display:grid;gap:6px;flex:1}
.datasource-title{font-weight:700;font-size:15px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.datasource-desc{font-size:13px;color:var(--muted)}
.datasource-fields{display:grid;gap:10px;margin-top:6px}
.datasource-field{display:grid;gap:6px;font-size:13px;font-weight:600}
.datasource-hint{font-size:12px;color:var(--muted)}
.mode-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.mode-row{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:17px;box-shadow:var(--shadow);min-width:0}
.mode-row-top{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.mode-copy{min-width:0}
.mode-copy h4{font-size:15.5px}
.mode-copy p{font-size:12.5px;color:var(--ink-2);line-height:1.45;margin-top:3px}
.mode-agent{display:inline-flex;align-items:center;gap:7px;margin-top:7px;font-size:11.5px;font-weight:800;color:var(--pine-ink);background:var(--pine-soft);border-radius:999px;padding:5px 9px}
.seg-control{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:4px;width:100%;min-width:0}
.seg-btn{min-height:40px;border-radius:999px;padding:8px 10px;font-size:12.5px;font-weight:800;color:var(--ink-2);display:flex;align-items:center;justify-content:center;text-align:center}
.seg-btn.active{background:var(--surface);color:var(--pine-ink);box-shadow:0 3px 10px rgba(10,40,28,.12)}
.mode-impact{font-size:12.5px;color:var(--ink-2);line-height:1.48;background:var(--surface-3);border:1px solid var(--line);border-radius:15px;padding:10px 12px;margin-top:11px}
.mode-impact b{color:var(--pine-ink)}
.mode-safe{display:flex;gap:12px;align-items:flex-start;background:var(--blue-soft);border:1px solid color-mix(in srgb,var(--blue) 26%,transparent);border-radius:18px;padding:14px 16px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.mode-safe b{color:var(--blue)}
.ai-number-card{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:20px;box-shadow:var(--shadow)}
.ai-number-top{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.ai-number-identity{display:flex;gap:13px;align-items:center;flex:1 1 360px;min-width:0}
.ai-number-icon{width:52px;height:52px;flex:none;border-radius:18px;background:var(--wira-soft);color:var(--wira-ink);display:grid;place-items:center}
.ai-number-identity h4{font-size:16px}
.ai-number-identity p{font-size:14px;color:var(--ink-2);margin-top:3px;line-height:1.5}
.ai-number-health{display:grid;grid-template-columns:repeat(2,minmax(145px,1fr));gap:10px;flex:1 1 330px}
.ai-health-item{background:var(--surface-3);border:1px solid var(--line);border-radius:16px;padding:12px 14px}
.ai-health-item span{display:block;font-size:12px;color:var(--ink-3);font-weight:700}
.ai-health-item b{display:flex;align-items:center;gap:7px;font-size:14px;margin-top:3px}
.ai-health-item i{width:8px;height:8px;border-radius:50%;background:#2BB673;box-shadow:0 0 0 4px color-mix(in srgb,#2BB673 16%,transparent)}
.ai-number-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.ai-number-actions .btn{min-height:44px}
.ai-number-explain{margin-top:14px;background:var(--amber-soft);border:1px solid color-mix(in srgb,var(--amber) 28%,transparent);border-radius:16px;padding:13px 15px;font-size:14px;color:var(--ink-2);line-height:1.55}
.ai-number-explain b{color:var(--amber)}
.ai-number-flow{display:grid;grid-template-columns:140px minmax(0,1fr);gap:16px;align-items:center;margin-top:14px;padding:16px;background:var(--surface-3);border:1px dashed var(--line);border-radius:18px}
.ai-number-flow[hidden]{display:none}
.demo-qr{width:132px;height:132px;padding:9px;background:#fff;border:1px solid var(--line);border-radius:14px;color:#102018}
.demo-qr svg{width:100%;height:100%;display:block}
.ai-flow-copy h5{font-family:"Sora",sans-serif;font-size:15px;margin:0}
.ai-flow-copy p{font-size:14px;color:var(--ink-2);line-height:1.55;margin-top:5px}
.ai-flow-copy .chip{margin-top:10px}
.ai-number-log{margin-top:14px;border-top:1px solid var(--line);padding-top:13px}
.ai-number-log h5{font-family:"Sora",sans-serif;font-size:13px;margin:0 0 7px}
.ai-log-row{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--ink-2);line-height:1.5}
.ai-log-row b{color:var(--ink)}
@media (max-width:620px){.ai-number-health{grid-template-columns:1fr}.ai-number-flow{grid-template-columns:1fr}.demo-qr{width:124px;height:124px}.ai-number-actions .btn{flex:1 1 150px;justify-content:center}}
.related-card{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:18px 20px;box-shadow:var(--shadow)}
.related-group{padding:15px 0;border-bottom:1px solid var(--line)}
.related-group:first-child{padding-top:2px}
.related-group:last-child{border-bottom:0;padding-bottom:2px}
.related-group h4{font-size:15.5px}
.related-group>p{font-size:14px;color:var(--ink-2);line-height:1.55;margin-top:3px;max-width:78ch}
.threshold-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:13px}
.threshold-item{background:var(--surface-3);border:1px solid var(--line);border-radius:18px;padding:14px}
.threshold-item b{font-size:14px;display:block;line-height:1.4}
.threshold-item p{font-size:12px;color:var(--ink-3);line-height:1.45;margin-top:3px}
.stepper{display:flex;align-items:center;gap:9px;margin-top:11px}
.step-btn{width:44px;height:44px;flex:none;border-radius:50%;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;font-size:19px;font-weight:800;color:var(--pine-ink)}
.step-btn:hover{border-color:var(--pine)}
.step-value{flex:1;text-align:center;font-family:"Sora",sans-serif;font-weight:800;font-size:16px;white-space:nowrap}
.hours-row{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin-top:13px}
.hours-field{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:800;color:var(--ink-2)}
.time-input{min-height:44px;border:1px solid var(--line);background:var(--surface-3);color:var(--ink);border-radius:14px;padding:9px 12px;font-size:14px;min-width:132px}
.hours-days{font-size:14px;color:var(--ink-2);background:var(--surface-3);border:1px solid var(--line);border-radius:14px;padding:11px 13px}
.settings-actions-note{font-size:12px;color:var(--ink-3);line-height:1.5;margin-top:10px}
.settings-reset-scrim{position:fixed;inset:0;background:rgba(6,25,17,.55);opacity:0;pointer-events:none;transition:opacity .2s;z-index:97}
.settings-reset-scrim.open{opacity:1;pointer-events:auto}
.settings-reset-modal{position:fixed;inset:0;z-index:98;display:none;place-items:center;padding:16px}
.settings-reset-modal.open{display:grid}
.settings-reset-card{width:min(470px,100%);background:var(--surface);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow-lg);padding:20px}
.settings-reset-card-head{display:flex;gap:13px;align-items:flex-start}
.settings-reset-card .ric{width:44px;height:44px;flex:none;border-radius:15px;background:var(--orange-soft);color:var(--orange-deep);display:grid;place-items:center}
.settings-reset-card h3{font-size:18px}
.settings-reset-card p{font-size:14px;color:var(--ink-2);line-height:1.55;margin-top:4px}
.settings-reset-card .settings-note{margin-top:14px}
.settings-reset-actions{display:flex;justify-content:flex-end;gap:9px;flex-wrap:wrap;margin-top:16px}
@media (prefers-reduced-motion: reduce){.settings-reset-scrim{transition:none}}
@media (max-width:900px){.access-grid,.mode-list{grid-template-columns:1fr}.threshold-grid{grid-template-columns:1fr}}
@media (max-width:620px){
.settings-intro{padding:14px}
.settings-owner-tools{align-items:stretch;flex-direction:column;padding:14px}
.settings-owner-tools .btn{width:100%;justify-content:center}
.settings-block-head{flex-wrap:wrap}
.settings-block-actions{width:100%;margin-left:47px;justify-content:flex-start}
.settings-block-head .chip{margin-left:0}
.settings-reset-card{padding:17px}
.settings-reset-actions .btn{flex:1 1 130px;justify-content:center}
.access-role,.mode-row{padding:16px}
.related-card{padding:16px}
.setting-row{align-items:flex-start}
.switch-btn{min-width:88px}
.seg-control{flex-basis:100%;min-width:0}
.mode-row-top{gap:10px}
.hours-field{flex:1 1 132px}
.time-input{width:100%}
}
/* ---------- Mode Demo Bertahap ---------- */
.demo-door{margin:14px 20px 0;padding:10px 14px;background:var(--pine-soft);border-radius:12px;font-size:13.5px;color:var(--pine-ink);line-height:1.55}
.demo-lock{display:flex;gap:10px;align-items:flex-start;padding:14px 18px;border:1.5px dashed var(--line);border-radius:var(--r-sm);background:var(--surface-3);color:var(--ink-2);font-size:13.5px;line-height:1.55;margin:8px 0}
.demo-lock b{color:var(--ink)}
.demo-lock svg{flex:none;margin-top:2px;color:var(--ink-3)}
.demo-lock-row td{padding:12px 16px;background:var(--surface-3);color:var(--ink-2);font-size:13.5px;line-height:1.55;border-top:1px solid var(--line)}
.demo-lock-row b{color:var(--ink)}
/* ---------- Draf balasan Dita ---------- */
.dita-draft{margin:2px 20px 0;background:var(--dita-soft);border:1px solid color-mix(in srgb,var(--dita) 32%,transparent);border-radius:18px;padding:16px 18px}
.dita-draft-head{display:flex;align-items:flex-start;gap:11px;flex-wrap:wrap}
.dita-draft-head .avatar{width:42px;height:42px;flex:none}
.dita-draft-title{font-weight:800;font-size:15px;line-height:1.3}
.dita-draft-sub{font-size:12.5px;color:var(--dita-ink);font-weight:700;line-height:1.45;margin-top:1px}
.dita-draft-status{margin-left:auto}
.dita-draft-text{background:var(--surface);border:1px solid color-mix(in srgb,var(--dita) 26%,transparent);border-radius:14px;padding:12px 14px;font-size:14px;line-height:1.6;margin-top:12px;white-space:pre-wrap;overflow-wrap:break-word}
.dita-draft-label{display:block;font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--dita-ink);margin-top:14px}
.dita-reply{width:100%;min-height:88px;resize:vertical;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:14px;padding:11px 13px;font:inherit;font-size:14px;line-height:1.55;margin-top:7px}
.dita-reply:focus{border-color:var(--dita);outline:2px solid color-mix(in srgb,var(--dita) 30%,transparent)}
.dita-reply[disabled]{opacity:.65}
.dita-draft-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:11px}
.dita-draft-actions .btn{min-height:44px;justify-content:center}
.dita-draft-note{font-size:12.5px;color:var(--ink-2);margin-top:10px;line-height:1.55}
.dita-draft-note b{color:var(--ink)}
@media (max-width:620px){
.dita-draft{margin:2px 14px 0;padding:14px}
.dita-draft-actions .btn{flex:1 1 150px}
}
/* --- Mode Demo Bertahap: bar docked inline (bukan overlay) --- */
.demo-panel{position:relative;z-index:5;width:100%;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:0 12px 24px -20px rgba(6,40,26,.35)}
.demo-bar{max-width:1240px;margin:0 auto;padding:10px 26px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.demo-bar-left{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1 1 340px;min-width:0}
.demo-bar-title{font-family:"Sora",sans-serif;font-weight:800;font-size:12.5px;letter-spacing:.02em;white-space:nowrap;background:var(--pine-deep);color:#EAF6EF;padding:7px 12px;border-radius:999px;line-height:1.2}
.demo-panel-mini{font-size:12px;font-weight:800;background:var(--pine-soft);color:var(--pine-ink);border:1px solid color-mix(in srgb,var(--pine) 22%,transparent);border-radius:999px;padding:6px 10px;white-space:nowrap;line-height:1.2}
.demo-bar-hint{font-size:12.5px;color:var(--ink-2);line-height:1.35;flex:1 1 180px;min-width:120px;overflow-wrap:break-word}
.demo-bar-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto;min-width:0}
.demo-bar-actions .btn{min-height:38px;padding:8px 14px;font-size:13px;white-space:nowrap}
#demoBarNext{background:var(--pine);color:#fff;border:1px solid var(--pine)}
#demoBarNext:hover{filter:brightness(1.08)}
#demoBarNext[disabled]{opacity:.55;cursor:default;filter:none}
.demo-panel-body{max-width:1240px;margin:0 auto;padding:4px 26px 16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;min-width:0}
.demo-panel.collapsed .demo-panel-body,.demo-panel.collapsed .demo-panel-foot{display:none}
.demo-case{border:1px solid var(--line);border-radius:16px;padding:13px 14px;background:var(--surface-3);min-width:0}
.demo-case-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;flex-wrap:wrap}
.demo-case-top b{font-size:14px;line-height:1.35;min-width:0;overflow-wrap:break-word}
.demo-case-door{font-size:11.5px;color:var(--ink-3);margin-top:3px;line-height:1.45;overflow-wrap:break-word}
.demo-case-stage{font-size:13px;color:var(--ink-2);margin:7px 0 10px;line-height:1.5;overflow-wrap:break-word}
.demo-next{width:100%;justify-content:center;text-align:center;white-space:normal}
.demo-panel-foot{max-width:1240px;margin:0 auto;font-size:11.5px;color:var(--ink-3);padding:0 26px 13px;line-height:1.5}
@media (max-width:900px){
.demo-bar{padding:10px 16px}
.demo-panel-body{padding-left:16px;padding-right:16px}
.demo-panel-foot{padding-left:16px;padding-right:16px}
}
@media (max-width:860px){
.demo-panel-body{grid-template-columns:1fr}
}
@media (max-width:620px){
.demo-bar{padding:10px 14px;gap:8px}
.demo-bar-left{flex:1 1 100%}
.demo-bar-hint{display:none}
.demo-bar-actions{margin-left:0;width:100%}
.demo-bar-actions .btn{flex:1 1 auto;justify-content:center}
.demo-panel-body{padding-left:14px;padding-right:14px;padding-bottom:14px;gap:10px}
.demo-panel-foot{padding-left:14px;padding-right:14px}
}
/* ---------- Mode Demo Terpandu (di atas Mode Demo Bertahap) ---------- */
#demoStart{background:var(--orange);border:1px solid var(--orange);color:#fff;min-height:44px;padding:10px 18px;font-size:14px}
#demoStart:hover{filter:brightness(1.07)}
#demoStart:focus-visible{outline:2px solid var(--orange-deep);outline-offset:2px}
.demo-guided-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;background:var(--orange-soft);color:var(--orange-deep);border:1px solid color-mix(in srgb,var(--orange) 38%,transparent);border-radius:999px;padding:6px 11px;line-height:1.25;overflow-wrap:break-word}
#demoEndGuided{border-color:color-mix(in srgb,var(--orange) 45%,transparent);color:var(--orange-deep)}
#demoGuidedChip[hidden],#demoEndGuided[hidden]{display:none}
.demo-guide.guided{flex-wrap:wrap}
.demo-guide-goto{
display:none;flex:1 1 100%;order:3;margin-top:9px;min-height:44px;
background:#fff;color:var(--pine-deep);border:0;border-radius:11px;
padding:10px 14px;font:inherit;font-weight:800;font-size:13.5px;cursor:pointer;
align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;
}
.demo-guide.guided .demo-guide-goto{display:inline-flex}
.demo-guide-goto:hover{background:var(--pine-soft)}
.demo-guide-goto:focus-visible{outline:2px solid #EAF6EF;outline-offset:2px}
/* Pemilih skenario Demo Terpandu */
.pick-scrim{position:fixed;inset:0;background:rgba(6,25,17,.55);opacity:0;pointer-events:none;transition:opacity .2s;z-index:97}
.pick-scrim.open{opacity:1;pointer-events:auto}
.pick-modal{position:fixed;inset:0;z-index:98;display:none;place-items:center;padding:16px}
.pick-modal.open{display:grid}
.pick-card{background:var(--surface);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow-lg);width:min(560px,100%);max-height:calc(100dvh - 32px);overflow-y:auto;padding:20px}
.pick-head{display:flex;gap:12px;align-items:flex-start}
.pick-head h3{font-size:18px;flex:1;min-width:0}
.pick-head p{font-size:14px;color:var(--ink-2);margin-top:3px;line-height:1.5}
.pick-opt{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;font:inherit;background:var(--surface-3);border:1.5px solid var(--line);border-radius:16px;padding:14px 16px;min-height:64px;cursor:pointer;margin-top:10px;-webkit-tap-highlight-color:transparent}
.pick-opt:hover{border-color:var(--pine)}
.pick-opt:focus-visible{outline:2px solid var(--pine);outline-offset:2px}
.pick-opt-t{font-weight:800;font-size:15px;color:var(--ink);line-height:1.35}
.pick-opt-d{font-size:13px;color:var(--ink-2);line-height:1.5}
.pick-opt-s{font-size:12px;font-weight:800;color:var(--pine-ink);margin-top:2px}
.pick-cancel{width:100%;justify-content:center;margin-top:12px;min-height:44px}
@media (prefers-reduced-motion: reduce){.pick-scrim{transition:none}}
@media (max-width:620px){.pick-modal{padding:10px}.pick-card{padding:16px}}
/* ===== Mode Shift + Tab per Nomor (Percakapan Pelanggan) ===== */
.shift-top{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-bottom:10px}
.shift-top>div:first-child{flex:1 1 330px;min-width:0}
.shift-top b{font-size:14.5px}
.shift-top .shift-hours{display:block;font-size:12.5px;color:var(--ink-2);line-height:1.5;margin-top:2px}
.shift-auto-label{display:inline-block;font-size:11.5px;font-weight:700;color:var(--pine);background:var(--pine-soft,#e8f3ec);border:1px solid var(--line);border-radius:99px;padding:3px 10px;margin-left:8px;vertical-align:middle}
.mode-chips{display:flex;gap:6px;flex-wrap:wrap}
.mode-chip{min-height:44px;padding:10px 16px;border-radius:99px;border:1px solid var(--line);background:var(--surface);font-weight:800;font-size:14px;color:var(--ink-2);cursor:pointer}
.mode-chip:hover{border-color:var(--pine);color:var(--pine-ink)}
.mode-chip.active{background:var(--pine);border-color:var(--pine);color:#fff}
.shift-banner{border-radius:20px;padding:14px 16px;margin-bottom:12px;background:var(--surface-3);box-shadow:var(--shadow)}
.shift-banner .sb-t{font-family:"Sora",sans-serif;font-weight:800;font-size:17px;line-height:1.3}
.shift-banner .sb-d{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin-top:3px}
.shift-banner.sb-piket{background:var(--amber-soft);border-color:color-mix(in srgb,var(--amber) 38%,transparent)}
.shift-banner.sb-piket .sb-t{font-size:20px}
.shift-banner.sb-malam{background:var(--blue-soft);border-color:color-mix(in srgb,var(--blue) 32%,transparent)}
.numtabs{display:flex;gap:7px;flex-wrap:wrap}
.numtab{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:8px 13px;border-radius:99px;border:1px solid var(--line);background:var(--surface);font-weight:800;font-size:13.5px;color:var(--ink-2);cursor:pointer}
.numtab:hover{border-color:var(--pine);color:var(--pine-ink)}
.numtab.active{background:var(--pine);border-color:var(--pine);color:#fff}
.numtab .nt-num{font-weight:700;font-size:12px;opacity:.75}
.nt-badge{min-width:24px;height:24px;padding:0 6px;border-radius:99px;background:#D92D20;color:#fff;font-size:12.5px;font-weight:800;display:inline-grid;place-items:center}
.nt-badge.total{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}
.numtab.active .nt-badge.total{background:rgba(255,255,255,.22);color:#fff;border-color:transparent}
.nt-badge.zero{background:var(--surface-2);color:var(--ink-3);border:1px solid var(--line)}
.numtab.active .nt-badge.zero{background:rgba(255,255,255,.16);color:#fff;border-color:transparent}
.numtab-note{font-size:12.5px;color:var(--ink-3);line-height:1.5;margin-top:8px}
.numtab[hidden]{display:none!important}
.sop-steps{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px;padding:4px 20px 8px}
.sop-step{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line,rgba(0,0,0,.08));border-radius:12px;padding:12px 14px;background:var(--card,#fff)}
.sop-n{flex:none;width:30px;height:30px;border-radius:50%;background:var(--pine,#0A4630);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:14px}
.sop-step b{font-size:14px}
.sop-step p{font-size:13px;color:var(--ink-2);margin:4px 0 8px}
.sop-note{padding:0 20px 4px;font-size:13px}
.sop-note .chip{margin:2px}
.nt-canvass{font-size:10px;font-weight:700;color:var(--pine);background:var(--pine-soft,#e6f4ea);border-radius:99px;padding:2px 8px;margin-left:4px}
.nt-lock{font-size:13px;margin-left:4px}
.numtab[data-restricted="anita"]{border-style:dashed}
/* Penegakan struktural lingkup Sheren + Mode Siang: selama kelas ini
terpasang di body, tab nomor di luar lingkup Sheren tidak bisa tampil
apa pun jalur render-nya (bukan hanya bergantung atribut hidden). */
body.ja-rina-siang #numTabs .numtab:not(.scope-allowed){display:none!important}
.numtab .nt-scope{font-size:11px;font-weight:800;padding:3px 7px;border-radius:99px;background:var(--blue-soft);color:var(--blue);white-space:nowrap}
.numtab .nt-scope[hidden]{display:none!important}
.numtab.scope-own{box-shadow:0 0 0 2px color-mix(in srgb,var(--pine) 22%,transparent)}
.numtab.scope-backup{opacity:.68;border-style:dashed;background:var(--surface-3);filter:saturate(.75)}
.numtab.scope-backup:hover{opacity:.86}
.numtab.scope-backup.active{background:var(--surface-2);color:var(--ink);border-color:color-mix(in srgb,var(--blue) 45%,transparent)}
.numtab.scope-backup.active .nt-num{color:var(--ink-2);opacity:1}
.numtab.scope-backup.takeover-on{opacity:1;border-style:solid;filter:none}
.sb-rina-btn{margin-top:10px}
.sb-rina-btn[hidden]{display:none!important}
.numtab-scope-note{font-size:12.5px;color:var(--ink-2);line-height:1.5;margin-top:8px;background:var(--blue-soft);border:1px solid color-mix(in srgb,var(--blue) 24%,transparent);border-radius:12px;padding:8px 11px}
.numtab-scope-note[hidden],.takeover-bar[hidden]{display:none!important}
.takeover-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 14px;background:var(--amber-soft);border-bottom:1px solid var(--line)}
.takeover-copy{flex:1 1 230px;min-width:0}
.takeover-copy b{display:block;font-size:13.5px;line-height:1.35}
.takeover-copy span{display:block;font-size:12.5px;color:var(--ink-2);line-height:1.5;margin-top:2px}
.takeover-bar .btn{flex:0 1 auto}
@media (max-width:620px){.takeover-bar{align-items:stretch}.takeover-bar .btn{width:100%}}
.ivv-owner{font-size:11.5px;font-weight:800;color:var(--pine-ink);background:var(--pine-soft);border-radius:99px;padding:3px 8px;white-space:nowrap}
.ns-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.ns-stat{background:var(--surface-3);border:1px solid var(--line);border-radius:16px;padding:12px 14px}
.ns-stat .n{font-family:"Sora",sans-serif;font-size:24px;font-weight:800;line-height:1.1}
.ns-stat .l{font-size:12.5px;color:var(--ink-2);line-height:1.45;margin-top:2px}
@media (max-width:620px){.ns-grid{grid-template-columns:1fr}.shift-banner.sb-piket .sb-t{font-size:18px}}
/* ===== Pengaturan: Jam Layanan & Shift ===== */
.shift-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:13px}
.shift-card{background:var(--surface-3);border:1px solid var(--line);border-radius:18px;padding:14px}
.shift-card h5{font-size:14.5px;line-height:1.35}
.shift-card>p{font-size:12.5px;color:var(--ink-2);line-height:1.5;margin-top:3px}
.shift-field{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:800;color:var(--ink-2);margin-top:11px}
.shift-field input[type="text"],.shift-field select{min-height:44px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:14px;padding:9px 12px;font-size:14px;width:100%;font-weight:600}
@media (max-width:900px){.shift-grid{grid-template-columns:1fr}}
#settingsSpvNote{display:none}
#panel-pengaturan.spv-shift [data-scope="owner-only"]{display:none !important}
#panel-pengaturan.spv-shift #settingsOwnerIntro{display:none}
#panel-pengaturan.spv-shift #settingsSpvNote{display:flex}
/* ===== Beranda Pengaturan: kartu berjajar (pola app Presensi) =====
Halaman Pengaturan dibuka sebagai kisi kartu; mengeklik kartu masuk
ke rincian satu kelompok pengaturan, tombol kembali ke beranda. */
.settings-backbar{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.settings-backbar[hidden]{display:none}
.settings-backbar-title{font-size:16px;font-weight:800;color:var(--ink)}
.settings-home-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin-bottom:20px}
.setcard{position:relative;text-align:left;border:0;cursor:pointer;border-radius:26px;padding:20px;min-height:148px;color:#fff;display:flex;flex-direction:column;gap:4px;box-shadow:0 14px 30px -14px rgba(15,23,42,.45);transition:transform .16s ease,box-shadow .16s ease;overflow:hidden;font-family:inherit}
.setcard:hover{transform:translateY(-3px);box-shadow:0 20px 36px -14px rgba(15,23,42,.5)}
.setcard-ic{width:42px;height:42px;border-radius:14px;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:10px}
.setcard-cat{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.setcard-title{font-size:19px;font-weight:800;line-height:1.2}
.setcard-desc{font-size:12.5px;line-height:1.45;opacity:.92}
.sc-violet{background:linear-gradient(135deg,#6D5DF6,#8B5CF6)}
.sc-magenta{background:linear-gradient(135deg,#C026D3,#E0218A)}
.sc-blue{background:linear-gradient(135deg,#3B82F6,#2563EB)}
.sc-teal{background:linear-gradient(135deg,#0D9488,#0F766E)}
.sc-green{background:linear-gradient(135deg,#16A34A,#15803D)}
.sc-purple{background:linear-gradient(135deg,#7C3AED,#6D28D9)}
.sc-indigo{background:linear-gradient(135deg,#4F46E5,#4338CA)}
.sc-emerald{background:linear-gradient(135deg,#059669,#047857)}
.sc-amber{background:linear-gradient(135deg,#F59E0B,#D97706)}
.sc-slate{background:linear-gradient(135deg,#475569,#334155)}
.sc-cyan{background:linear-gradient(135deg,#0891B2,#0E7490)}
#panel-pengaturan .settings-stack[data-view="home"] [data-setting-key]{display:none !important}
#panel-pengaturan .settings-stack[data-view="detail"] [data-setting-key]{display:none !important}
#panel-pengaturan .settings-stack[data-view="detail"] [data-setting-home]{display:none}
#panel-pengaturan .settings-stack[data-view="detail"] .settings-home-only{display:none !important}
#panel-pengaturan .settings-stack[data-view="detail"][data-open="koneksi"] [data-setting-key="koneksi"],
#panel-pengaturan .settings-stack[data-view="detail"][data-open="pengguna"] [data-setting-key="pengguna"],
#panel-pengaturan .settings-stack[data-view="detail"][data-open="profil"] [data-setting-key="profil"],
#panel-pengaturan .settings-stack[data-view="detail"][data-open="shift"] [data-setting-key="shift"],
#panel-pengaturan .settings-stack[data-view="detail"][data-open="radar-grup"] [data-setting-key="radar-grup"],
#panel-pengaturan .settings-stack[data-view="detail"][data-open="pantau"] [data-setting-key="pantau"],
#panel-pengaturan .settings-stack[data-view="detail"][data-open="modes"] [data-setting-key="modes"],
#panel-pengaturan .settings-stack[data-view="detail"][data-open="number"] [data-setting-key="number"],
#panel-pengaturan .settings-stack[data-view="detail"][data-open="datasource"] [data-setting-key="datasource"],
#panel-pengaturan .settings-stack[data-view="detail"][data-open="akses"] [data-setting-key="akses"],
#panel-pengaturan .settings-stack[data-view="detail"][data-open="related"] [data-setting-key="related"],
#panel-pengaturan .settings-stack[data-view="detail"][data-open="pairing-mandiri"] [data-setting-key="pairing-mandiri"],
#panel-pengaturan .settings-stack[data-view="detail"][data-open="armada"] [data-setting-key="armada"]{display:block !important}
@media (max-width:620px){.settings-home-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}.setcard{min-height:132px;padding:16px}.setcard-title{font-size:16.5px}}
/* ===== Kotak Masuk 3 panel — Percakapan Pelanggan =====
Kiri: antrean ringkas yang bisa diklik (cari + filter). Tengah: utas
percakapan terpilih + kotak balasan menempel di bawah. Kanan: konteks
pelanggan & aksi berikutnya. Di layar lebar ketiga panel bertinggi
tetap mengikuti area konten dan bergulir mandiri; di HP alurnya
daftar -> percakapan layar penuh (tombol kembali) + konteks drawer. */
.inbox{
position:relative;display:grid;grid-template-columns:320px minmax(0,1fr);
background:var(--surface);border-radius:var(--r-lg);
box-shadow:var(--shadow);overflow:hidden;
height:clamp(620px,calc(100dvh - 150px),1200px);
}
/* Panel Percakapan memakai lebar konten penuh (menembus batas 1240px
bawaan .content) dan tinggi semaksimal layar, sesuai permintaan:
kotak chat lebar penuh + tinggi penuh. */
body:has(#panel-percakapan.active) .content{max-width:1720px}
.inbox-list{display:flex;flex-direction:column;min-height:0;min-width:0;background:var(--surface-3)}
.inbox-tools{padding:14px 14px 10px;background:var(--surface)}
.inbox-search{display:flex;align-items:center;gap:8px;background:var(--surface-3);border:2px solid var(--pine);border-radius:99px;padding:9px 14px;color:var(--ink-3)}
.inbox-search:focus-within{box-shadow:0 0 0 4px var(--pine-soft)}
.inbox-search svg{flex:none}
.inbox-search input{border:0;outline:0;background:none;color:var(--ink);width:100%;font-size:14px;min-width:0}
.inbox-search input::placeholder{color:var(--ink-3)}
.inbox-filters::-webkit-scrollbar{display:none}
.inbox-filters{display:flex;gap:2px;margin-top:10px;background:var(--surface-3);border-radius:99px;padding:4px;max-width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ifilter{flex:1 0 auto;white-space:nowrap;border:0;background:transparent;border-radius:99px;font-size:12px;font-weight:800;padding:8px 13px;min-height:36px;color:var(--ink-2);transition:background .15s,color .15s;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ifilter:hover:not(.active){background:rgba(11,107,71,.08);color:var(--pine-ink)}
.ifilter.active{background:var(--pine);color:#fff;box-shadow:0 2px 10px rgba(11,107,71,.28)}
.inbox-count{font-size:12px;color:var(--ink-3);font-weight:600;margin-top:9px;line-height:1.45}
.inbox-items{flex:1;overflow-y:auto;min-height:0;overscroll-behavior:contain}
.ivv{
display:block;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;
padding:12px 14px 11px;border-bottom:1px solid var(--line);background:transparent;
transition:background .15s;min-height:64px;-webkit-tap-highlight-color:transparent;
}
.ivv:hover{background:var(--surface)}
.ivv.active{background:var(--pine-soft);box-shadow:inset 3px 0 0 var(--pine)}
.ivv[hidden]{display:none !important}
.ivv-top{display:flex;align-items:baseline;gap:8px}
.ivv-name{flex:1;min-width:0;font-weight:800;font-size:14px;line-height:1.3;overflow-wrap:break-word}
.ivv-time{font-size:12px;color:var(--ink-3);font-weight:700;flex:none}
.ivv-dot{width:9px;height:9px;border-radius:50%;background:var(--orange);flex:none;align-self:center}
.ivv-prev{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;color:var(--ink-2);line-height:1.45;margin-top:3px;overflow-wrap:break-word}
.ivv-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:7px}
.ivv-src{font-size:12px;color:var(--ink-3);font-weight:700}
.ivv-prio{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:var(--orange-deep);margin-top:6px;line-height:1.4}
.ivv-prio i{width:7px;height:7px;border-radius:50%;background:var(--orange);flex:none}
@media (prefers-color-scheme: dark){.ivv-prio{color:var(--orange-deep)}}
.inbox-empty{padding:20px 16px;font-size:13.5px;color:var(--ink-2);line-height:1.55}
#inboxItems>div.inbox-empty{margin:14px;border-radius:20px;background:var(--surface);box-shadow:var(--shadow)}
.inbox-main{display:flex;flex-direction:column;min-height:0;min-width:0;background:var(--surface)}
.inbox-empty-detail{margin:16px;border-radius:24px;background:var(--surface-3);box-shadow:var(--shadow)}
.inbox-main-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);background:linear-gradient(120deg,#E7E3FF 0%,#F3E8FF 45%,#FFE4EC 100%);flex:none;flex-wrap:wrap;position:relative;z-index:7}
.inbox-back{display:none;align-items:center;gap:6px;font-weight:800;font-size:13px;color:var(--pine-ink);background:var(--pine-soft);border-radius:99px;padding:9px 14px;min-height:40px;flex:none;position:relative;z-index:8;pointer-events:auto;touch-action:manipulation;cursor:pointer;-webkit-tap-highlight-color:transparent}
.inbox-title{flex:1;min-width:140px}
.inbox-title h3{font-size:15.5px;font-weight:800;line-height:1.3;overflow-wrap:break-word}
.inbox-title p{font-size:12.5px;color:var(--ink-2);line-height:1.45;margin-top:1px;overflow-wrap:break-word}
.inbox-ctx-toggle{display:none;align-items:center;gap:6px;font-weight:800;font-size:13px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:9px 14px;min-height:40px;flex:none}
.inbox-ctx-toggle:hover{border-color:var(--pine);color:var(--pine-ink)}
.inbox-scroll{flex:1;overflow-y:auto;min-height:0;overscroll-behavior:contain;background:var(--surface)}
.inbox-thread .card{background:transparent;border:0;box-shadow:none;border-radius:0;margin:0}
.inbox-composer{flex:none;border-top:1px solid var(--line);background:var(--surface-3);padding:12px 14px;max-height:88%;overflow-y:auto}
.inbox-composer .dita-draft{margin:0;padding:11px 13px}
.inbox-composer .dita-draft-text{font-size:13px;line-height:1.48;padding:10px 12px;margin-top:9px}
.inbox-composer .dita-draft-sub{font-size:12px}
.inbox-composer .dita-draft-note{font-size:12px;line-height:1.45;margin-top:8px}
.inbox-composer .dita-reply{min-height:52px}
.inbox-thread .card-head{display:none}
.composer-note{font-size:12px;color:var(--ink-2);line-height:1.5;flex:1 1 220px}
.composer-generic .dita-draft-label{color:var(--ink-2);margin-top:0}
.composer-generic .dita-draft-actions{align-items:center}
.composer-generic .dita-draft-actions .btn{min-height:44px;margin-left:auto;flex:none}
.inbox-ctx{overflow-y:auto;min-height:0;min-width:0;border-left:1px solid var(--line);background:var(--surface);padding:16px 16px 20px}
.ctx-drawer-head{display:none}
.ctx-sec{margin-bottom:18px}
.ctx-sec:last-child{margin-bottom:0}
.ctx-sec h4{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:800;margin-bottom:8px;font-family:"Plus Jakarta Sans",sans-serif}
.ctx-list{margin:0;padding-left:17px;font-size:13.5px;color:var(--ink-2);line-height:1.55}
.ctx-list li{margin-bottom:4px;overflow-wrap:break-word}
.ctx-list li::marker{color:var(--pine)}
.ctx-actions{display:flex;flex-direction:column;gap:8px}
.ctx-actions .btn{justify-content:center;min-height:42px;width:100%;white-space:normal;text-align:center}
.ctx-note{font-size:12.5px;color:var(--ink-2);line-height:1.55;margin-top:10px}
.ctx-note b{color:var(--ink)}
.inbox-photo{display:grid;grid-template-columns:230px minmax(0,1fr);margin-top:16px;align-items:stretch}
.inbox-photo img{height:100%;min-height:150px}
@media (max-width:1180px){
.inbox{grid-template-columns:280px minmax(0,1fr)}
}
@media (max-width:980px){
.inbox{grid-template-columns:238px minmax(0,1fr)}
.inbox-ctx{
position:absolute;top:0;right:0;bottom:0;width:min(330px,94%);z-index:6;
box-shadow:var(--shadow-lg);border-left:1px solid var(--line);
transform:translateX(104%);transition:transform .25s ease;
pointer-events:none;
}
.inbox.ctx-open .inbox-ctx{transform:none;pointer-events:auto}
.inbox-ctx-toggle{display:inline-flex}
.ctx-drawer-head{display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:800;font-size:14px;margin:-16px -16px 12px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--surface);position:sticky;top:-16px;z-index:2}
}
@media (prefers-reduced-motion: reduce){.inbox-ctx{transition:none}}
@media (max-width:700px){
.inbox{grid-template-columns:1fr;height:auto;scroll-margin-top:12px}
.inbox-list{border-right:0;max-height:76dvh}
.inbox:not(.show-thread) .inbox-list{display:flex}
.inbox:not(.show-thread) .inbox-main{display:none}
.inbox.show-thread .inbox-list{display:none}
.inbox.show-thread .inbox-main{display:flex}
/* Kepala utas menempel di tepi atas saat laman bergulir, di atas
menu lengket — tombol "← Antrean" tetap terlihat & bisa ditekan
di lebar 360–430px, tidak tertutup elemen lain. */
.inbox-main-head{position:sticky;top:var(--inbox-head-top,0px);z-index:60}
.inbox-scroll{max-height:52dvh}
.inbox-back{display:inline-flex;min-height:44px;scroll-margin-top:12px}
.inbox-ctx-toggle{min-height:44px}
.inbox-composer{max-height:none;overflow:visible}
.inbox-photo{grid-template-columns:1fr}
.inbox-photo img{height:170px;min-height:0}
}
/* ====================================================== */
/* ===== JACC Login Gate (Material 3 Expressive) ===== */
#jaccLogin{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px;overflow:hidden;
background:linear-gradient(165deg,#F5F8FE 0%,#EDF2FC 55%,#E9EFFC 100%);}
.jacc-waves{position:absolute;inset:0;z-index:0;pointer-events:none}
.jacc-wave{position:absolute;left:0;width:200%;will-change:transform}
.jacc-w1{bottom:-4%;height:54%;opacity:.34;animation:jaccDrift 32s linear infinite}
.jacc-w2{bottom:-7%;height:45%;opacity:.30;animation:jaccDrift 24s linear infinite reverse}
.jacc-w3{bottom:-10%;height:37%;opacity:.26;animation:jaccDrift 40s linear infinite}
@keyframes jaccDrift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.jacc-wave{animation:none}}
.jacc-orbs{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.jacc-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;will-change:transform}
.jacc-o1{width:46vmax;height:46vmax;left:-12vmax;top:4%;background:#8AB4F8;animation:jaccFloat1 26s ease-in-out infinite alternate}
.jacc-o2{width:40vmax;height:40vmax;right:-10vmax;top:20%;background:#C58AF9;animation:jaccFloat2 32s ease-in-out infinite alternate}
.jacc-o3{width:36vmax;height:36vmax;left:32%;bottom:-8vmax;background:#F2A3C0;animation:jaccFloat3 29s ease-in-out infinite alternate}
@keyframes jaccFloat1{from{transform:translate(0,0) scale(1)}to{transform:translate(6vmax,4vmax) scale(1.12)}}
@keyframes jaccFloat2{from{transform:translate(0,0) scale(1.05)}to{transform:translate(-5vmax,5vmax) scale(.95)}}
@keyframes jaccFloat3{from{transform:translate(0,0) scale(1)}to{transform:translate(4vmax,-4vmax) scale(1.1)}}
@media (prefers-reduced-motion: reduce){.jacc-orb{animation:none}}
.jacc-card{position:relative;z-index:2;width:100%;max-width:400px;border-radius:32px;padding:38px 32px 30px;
background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6);
border:1px solid rgba(255,255,255,.65);
box-shadow:0 30px 80px -20px rgba(76,110,245,.35), 0 10px 30px -10px rgba(155,114,203,.30), inset 0 1px 0 rgba(255,255,255,.7);
animation:jaccIn .45s cubic-bezier(.2,.9,.25,1.2);}
@keyframes jaccIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.jacc-brand{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.jacc-mark{width:50px;height:50px;border-radius:18px;background:linear-gradient(135deg,#4796E3 0%,#9B72CB 52%,#E16A8A 100%);color:#fff;
display:flex;align-items:center;justify-content:center;flex:none;
box-shadow:0 10px 24px -6px rgba(123,92,220,.55), inset 0 1px 0 rgba(255,255,255,.35);}
.jacc-brand-name{font-weight:800;font-size:19px;color:#12211A;letter-spacing:-.01em}
.jacc-brand-sub{font-size:11px;font-weight:800;letter-spacing:.16em;
background:linear-gradient(90deg,#4796E3,#9B72CB,#E16A8A);-webkit-background-clip:text;background-clip:text;color:transparent}
.jacc-title{font-size:22px;font-weight:800;color:#12211A;margin:18px 0 4px;letter-spacing:-.01em}
.jacc-sub{font-size:13.5px;color:#71837A;margin:0 0 22px}
.jacc-field{position:relative;margin-bottom:16px}
.jacc-field svg.jacc-ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:#71837A;pointer-events:none}
.jacc-field input{width:100%;box-sizing:border-box;padding:15px 44px 15px 44px;font-size:15px;color:#12211A;background:#F7FAF6;
border:1.5px solid #D2E0D5;border-radius:16px;outline:none;transition:border-color .15s, box-shadow .15s, background .15s}
.jacc-field input:focus{border-color:#8B5CF6;background:rgba(255,255,255,.92);box-shadow:0 0 0 4px rgba(139,92,246,.16)}
.jacc-field input::placeholder{color:#9DB0A6}
.jacc-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:none;cursor:pointer;
width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#71837A}
.jacc-toggle:hover{background:#E2ECE3}
.jacc-toggle svg{width:20px;height:20px}
.jacc-err{display:none;align-items:flex-start;gap:8px;background:#FDECEA;color:#B3261E;font-size:13px;font-weight:600;
border-radius:14px;padding:11px 14px;margin:2px 0 16px}
.jacc-btn{width:100%;border:0;cursor:pointer;color:#fff;font-size:15.5px;font-weight:700;
padding:15px;border-radius:100px;letter-spacing:.01em;
background:linear-gradient(135deg,#3E8BEB 0%,#8B5CF6 50%,#E16A8A 100%);
box-shadow:0 14px 30px -8px rgba(124,92,246,.60), inset 0 1px 0 rgba(255,255,255,.30);
transition:filter .15s, transform .1s}
.jacc-btn:hover{filter:brightness(1.07)}
.jacc-btn:active{transform:scale(.985)}
.jacc-btn:active{transform:scale(.985)}
.jacc-note{margin:18px 0 0;text-align:center;font-size:12px;color:#9DB0A6}
.jacc-shake{animation:jaccShake .4s}
@keyframes jaccShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(4px)}}
#jaccLogin.jacc-ok .jacc-card{transition:opacity .25s, transform .25s;opacity:0;transform:translateY(-12px) scale(.98)}
body.jacc-locked{overflow:hidden}
.jacc-logout-btn{display:flex;align-items:center;gap:10px;width:calc(100% - 24px);margin:14px 12px 12px;padding:11px 14px;
background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:#EAF2EB;border-radius:14px;
font-size:13.5px;font-weight:600;cursor:pointer;transition:background .15s;font-family:inherit}
.jacc-logout-btn:hover{background:rgba(255,255,255,.14)}
.jacc-logout-btn svg{width:18px;height:18px;flex:none}
/* ====================================================== */
/* ===== JACC Retheme: M3 Expressive + Apple Music red (2026-10-17) ===== */
:root{
--bg:#F3F5FD; --surface:#FFFFFF; --surface-2:#E9EDFB; --surface-3:#F7F9FF;
--ink:#161A28; --ink-2:#4B506A; --ink-3:#7C8199;
--line:#DFE4F4;
--pine:#6C5CE7; --pine-deep:#1E1B4B; --pine-mid:#8B7CF6; --pine-soft:#E7E3FF; --pine-ink:#3F3A8C;
--shadow:0 1px 2px rgba(30,27,75,.08),0 12px 32px -12px rgba(108,92,231,.22);
--shadow-lg:0 24px 60px -20px rgba(108,92,231,.35);
--bg-outer:#ECEFF9; --bg-outer-2:#E3E7F8;
}
.sidebar{background:linear-gradient(180deg,#251F66 0%,#1A1547 55%,#100E2C 100%) !important;color:#E8E6FF !important;}
.sidebar .brand-mark,.brand-mark{background:linear-gradient(135deg,#4796E3 0%,#9B72CB 52%,#E16A8A 100%) !important;border-color:transparent !important;}
.mock-strip{background:repeating-linear-gradient(-45deg,#2B2568 0 18px,#221D54 18px 36px) !important;color:#DCD8FF !important;}
.btn-pine{background:linear-gradient(135deg,#fb3b57 0%,#fa2d48 55%,#df2540 100%) !important;color:#fff !important;border-color:transparent !important;
box-shadow:0 10px 24px -8px rgba(250,45,72,.55), inset 0 1px 0 rgba(255,255,255,.25) !important;}
.btn-pine:hover{filter:brightness(1.07) !important;}
@media (prefers-color-scheme: dark){
:root{
--bg:#0B0D19; --surface:#141829; --surface-2:#1C2236; --surface-3:#0F1322;
--ink:#E9EBF7; --ink-2:#A7ABC7; --ink-3:#7D829C;
--line:#262C46;
--pine:#9D8FFF; --pine-deep:#131130; --pine-mid:#8B7CF6; --pine-soft:#26224F; --pine-ink:#D5CFFF;
--shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.5);
--shadow-lg:0 24px 60px -20px rgba(0,0,0,.7);
--bg-outer:#070912; --bg-outer-2:#0A0D18;
}
.sidebar{background:linear-gradient(180deg,#1B1749 0%,#12102C 60%,#0B0A1D 100%) !important;}
}
/* ====================================================== */
.wa-grup-card{border-radius:24px!important}
.wa-grup-head{display:flex;align-items:center;gap:14px;padding:20px 20px 16px}
.wa-grup-ic{width:48px;height:48px;border-radius:16px;background:var(--pine-soft);color:var(--pine);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.wa-grup-title{flex:1;min-width:0}
.wa-grup-title h3{margin:0;font-size:16px}
.wa-grup-title p{margin:4px 0 0;font-size:12px;color:#6b7280}
.wa-grup-total{font-size:13px;padding:6px 14px;border-radius:20px}
.wa-grup-list{padding:0 12px 12px;display:flex;flex-direction:column;gap:8px}
.wa-cat{border-radius:18px;background:#f8faf9;overflow:hidden}
.wa-cat[open]{background:var(--pine-soft)}
.wa-cat-head{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;list-style:none;user-select:none}
.wa-cat-head::-webkit-details-marker{display:none}
.wa-cat-ic{font-size:20px;width:36px;text-align:center;flex-shrink:0}
.wa-cat-title{flex:1;font-weight:600;font-size:14px}
.wa-cat-count{font-size:12px;color:#6b7280;background:#fff;border-radius:12px;padding:3px 10px;white-space:nowrap}
.wa-cat[open] .wa-cat-count{background:var(--pine);color:#fff}
.wa-cat-chev{font-size:18px;color:#9ca3af;transition:transform .2s;flex-shrink:0}
.wa-cat[open] .wa-cat-chev{transform:rotate(90deg)}
.wa-cat-body{padding:4px 16px 16px;display:flex;flex-wrap:wrap;gap:8px}
.wa-chip{display:inline-block;font-size:12px;padding:7px 14px;border-radius:16px;background:#fff;border:1px solid #e5e7eb;color:#374151}
@media(max-width:600px){.wa-grup-head{padding:16px 14px 12px}.wa-cat-head{padding:12px 14px}.wa-chip{font-size:11px;padding:6px 12px}}
/* ---------- Help Button & Modal (Mode Bersih) ---------- */
.help-btn{
position:absolute;top:12px;right:12px;
width:28px;height:28px;border-radius:50%;
background:rgba(255,255,255,.9);border:1px solid #e5e7eb;
color:#6b7280;font-size:14px;font-weight:700;line-height:1;
display:flex;align-items:center;justify-content:center;
cursor:pointer;z-index:5;transition:all .2s;
box-shadow:0 1px 3px rgba(0,0,0,.1);
}
.help-btn:hover{background:#1a5c4d;color:#fff;border-color:#1a5c4d;transform:scale(1.1)}
.panel-head{position:relative}
.help-backdrop{
position:fixed;inset:0;background:rgba(0,0,0,.4);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
z-index:9998;opacity:0;pointer-events:none;transition:opacity .3s;
}
.help-backdrop.show{opacity:1;pointer-events:auto}
.help-modal{
position:fixed;top:50%;left:50%;
transform:translate(-50%,-50%) scale(.9);
width:min(560px,92vw);max-height:85vh;overflow-y:auto;
background:#fff;border-radius:28px;
box-shadow:0 24px 64px rgba(0,0,0,.25);
z-index:9999;opacity:0;pointer-events:none;
transition:all .3s cubic-bezier(.34,1.56,.64,1);
}
.help-modal.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.help-modal-head{
display:flex;align-items:center;justify-content:space-between;
padding:20px 24px 0;
}
.help-modal-title{font-size:18px;font-weight:700;color:#1a2e28;margin:0}
.help-modal-close{
width:32px;height:32px;border-radius:50%;border:none;
background:#f3f4f6;color:#6b7280;font-size:16px;cursor:pointer;
display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.help-modal-close:hover{background:#e5e7eb}
.help-modal-body{padding:16px 24px 24px}
.help-section{margin-bottom:16px}
.help-section:last-child{margin-bottom:0}
.help-section-label{
font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
color:#1a5c4d;margin-bottom:6px;
}
.help-section-text{font-size:14px;line-height:1.6;color:#374151}
.help-example{
background:#f9fafb;border:1px solid #e5e7eb;border-radius:16px;
padding:12px 16px;font-size:13px;color:#6b7280;line-height:1.5;
}
/* Sembunyikan catatan demo kecil (mode bersih) */
.demo-hidden{display:none!important}
.demo-panel.prod-hidden{display:none!important}
#demoGuideFab{position:fixed;bottom:22px;right:22px;z-index:60;background:var(--pine-deep);color:#EAF6EF;border:none;border-radius:999px;padding:12px 18px;font-size:13px;font-weight:800;cursor:pointer;box-shadow:0 8px 24px -8px rgba(6,40,26,.5);display:flex;align-items:center;gap:8px;font-family:"Sora",sans-serif}
#demoGuideFab:hover{filter:brightness(1.12)}
@media (max-width:620px){#demoGuideFab{bottom:16px;right:16px;padding:10px 15px;font-size:12px}}
@media(max-width:600px){
.help-modal{width:94vw;border-radius:20px}
.help-modal-body{padding:12px 16px 16px}
}
/* ==============================================================================
MATERIAL 3 EXPRESSIVE DIALOG (JACC LOGOUT)
============================================================================== */
.m3-dialog-scrim {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 999999;
display: flex;
align-items: center;
justify-content: center;
padding: 18px;
opacity: 0;
visibility: hidden;
transition: opacity 0.24s cubic-bezier(0.2, 0, 0, 1), visibility 0.24s;
}
/* Dialog konfirmasi SELALU di lapisan paling atas: ia bisa dipanggil
dari dalam popup lain (mis. Arsipkan di popup Penawaran Terbit), dan
semua scrim berbagi z-index yang sama sehingga urutan DOM yang
menentukan — konfirmasi harus menang dari pemanggilnya. */
#m3ConfirmModal { z-index: 1000001; }
.m3-dialog-scrim.open {
opacity: 1;
visibility: visible;
}
.m3-dialog-container {
width: 100%;
max-width: 410px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 28px;
padding: 28px 24px 22px;
box-shadow: 0 24px 50px -12px rgba(0, 0, 0, 0.45);
color: var(--ink);
transform: scale(0.92) translateY(10px);
opacity: 0;
transition: transform 0.26s cubic-bezier(0.05, 0.7, 0.1, 1), opacity 0.22s ease;
box-sizing: border-box;
}
.m3-dialog-scrim.open .m3-dialog-container {
transform: scale(1) translateY(0);
opacity: 1;
}
.m3-dialog-hero-icon {
width: 54px;
height: 54px;
border-radius: 18px;
background: var(--red-soft, rgba(179, 56, 46, 0.12));
color: var(--red, #B3382E);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
box-shadow: 0 4px 14px rgba(179, 56, 46, 0.15);
}
.m3-dialog-title {
margin: 0 0 8px;
font-size: 21px;
font-weight: 700;
text-align: center;
color: var(--ink);
letter-spacing: -0.015em;
}
.m3-dialog-supporting-text {
margin: 0 0 18px;
font-size: 13.5px;
line-height: 1.55;
text-align: center;
color: var(--ink-2);
}
.m3-dialog-user-badge {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: 18px;
margin-bottom: 22px;
}
.m3-dialog-user-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--pine);
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 16px;
flex-shrink: 0;
}
.m3-dialog-user-info {
flex: 1;
min-width: 0;
}
.m3-dialog-user-name {
font-size: 14px;
font-weight: 700;
color: var(--ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.m3-dialog-user-email {
font-size: 12px;
color: var(--ink-3);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.m3-dialog-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
align-items: center;
}
.m3-btn-tonal {
border: none;
background: transparent;
color: var(--ink-2);
padding: 10px 22px;
border-radius: 9999px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
font-family: inherit;
}
.m3-btn-tonal:hover {
background: var(--surface-2);
color: var(--ink);
}
.m3-btn-destructive {
border: none;
background: var(--red, #B3382E);
color: #FFFFFF;
padding: 10px 24px;
border-radius: 9999px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
box-shadow: 0 4px 12px rgba(179, 56, 46, 0.28);
transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
font-family: inherit;
}
.m3-btn-destructive:hover {
background: #962B22;
box-shadow: 0 6px 16px rgba(179, 56, 46, 0.38);
transform: translateY(-1px);
}
.m3-btn-destructive:active {
transform: translateY(0);
}
/* Peta Radar (panel Radar, 24 Okt 2026): sapuan berputar + titik antrean grup */
.radar-map{position:relative;width:280px;height:280px;max-width:78vw;max-height:78vw;border-radius:50%;overflow:hidden;flex:none;background:radial-gradient(circle at 50% 50%,#14532d 0%,#0b3d22 55%,#062e1a 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 12px 30px rgba(0,0,0,.25)}
.radar-sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(74,222,128,.55) 0deg,rgba(74,222,128,.12) 60deg,transparent 90deg);animation:radar-spin 5s linear infinite}
.radar-ring{position:absolute;border:1px solid rgba(255,255,255,.16);border-radius:50%}
.radar-ring.r1{inset:16%}.radar-ring.r2{inset:32%}.radar-ring.r3{inset:48%}
.radar-center{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#4ade80;box-shadow:0 0 10px #4ade80}
.radar-dot{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:2px solid #fff;cursor:pointer;box-shadow:0 0 8px rgba(0,0,0,.45);z-index:2}
.radar-dot:hover{transform:scale(1.35)}
.radar-dot-personal{border-radius:3px;transform:rotate(45deg)}
.radar-dot-personal:hover{transform:rotate(45deg) scale(1.3)}
.radar-dot-legend-personal{border-radius:3px !important;transform:rotate(45deg)}
#radarMapDots.padat .radar-dot{width:10px;height:10px;margin:-5px 0 0 -5px}
.radar-dot-legend{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:8px;vertical-align:-1px}
@keyframes radar-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.radar-sweep{animation:none}}
/* Dialog konfirmasi umum M3 Expressive (pengganti confirm() bawaan browser, 24 Okt 2026) */
.m3-dialog-hero-icon.pine {
background: rgba(47, 158, 110, 0.14);
color: #2f9e6e;
box-shadow: 0 4px 14px rgba(47, 158, 110, 0.15);
}
.m3-dialog-supporting-text.lg {
font-size: 15px;
line-height: 1.65;
}
.m3-btn-filled {
border: none;
background: #2f9e6e;
color: #ffffff;
padding: 10px 24px;
border-radius: 9999px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
box-shadow: 0 4px 12px rgba(47, 158, 110, 0.28);
transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
font-family: inherit;
}
.m3-btn-filled:hover {
background: #27855c;
}
/* Seragamkan kartu modal lama ke bahasa M3 yang sama (radius besar, padding lega) */
#userEditModal .card,
#userResetModal .card,
#userDeleteModal .card,
#forcedPasswordModal .card,
#contactLabelModal .card,
#rejectModal .card,
#qrModal .card {
border-radius: 28px !important;
padding: 28px 24px !important;
}
#userEditModal .card h3,
#userResetModal .card h3,
#userDeleteModal .card h3,
#forcedPasswordModal .card h3,
#contactLabelModal .card h3,
#rejectModal .card h3,
#qrModal .card h3 {
font-size: 20px !important;
}
/* Badge radar merah (navigasi + ikon radar topbar), 24 Okt 2026 */
#radarBadge,
#radarTopBadge {
background: #d64541 !important;
}
/* Ikon radar topbar menyala saat ada antrean (24 Okt 2026) */
#radarBtn.radar-alert {
animation: radar-glow 2s ease-in-out infinite;
}
@keyframes radar-glow {
0%, 100% { box-shadow: 0 0 0 0 rgba(214, 69, 65, 0); }
50% { box-shadow: 0 0 0 7px rgba(214, 69, 65, 0.22), 0 0 18px rgba(214, 69, 65, 0.35); }
}
@media (prefers-reduced-motion: reduce) {
#radarBtn.radar-alert { animation: none; }
}
/* Centang status pesan keluar (24 Okt 2026): abu = terkirim/diterima, biru = dibaca */
.ck { font-size: 11px; letter-spacing: -1px; }
.ck-sent, .ck-delivered { color: #8696a0; }
.ck-read { color: #53bdeb; }
/* Radar Grup WhatsApp: kisi kartu ringkas (M3) — menggantikan daftar formulir panjang */
.rg-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.rg-search{display:flex;align-items:center;gap:8px;background:var(--surface-3);border:2px solid var(--pine);border-radius:99px;padding:8px 14px;color:var(--ink-3);flex:1;min-width:220px;max-width:430px}
.rg-search input{border:0;outline:0;background:none;color:var(--ink);width:100%;font-size:14px;min-width:0}
.rg-count{font-size:13px;color:var(--ink-2);font-weight:600}
.rg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.rg-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px}
.rg-card.open{grid-column:1/-1}
.rg-card-head{display:flex;gap:10px;align-items:flex-start}
.rg-dot{width:11px;height:11px;border-radius:50%;margin-top:5px;flex:none;background:#C6C6D4}
.rg-card.on .rg-dot{background:#22A06B}
.rg-title{flex:1;min-width:0}
.rg-title b{font-size:14.5px;color:var(--ink);display:block;overflow-wrap:break-word}
.rg-sub{font-size:11.5px;color:var(--ink-3);font-family:monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rg-chips{display:flex;gap:6px;flex-wrap:wrap}
.rg-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto}
.rg-detail{border-top:1px dashed var(--line);padding-top:12px}
.rg-empty-filter{text-align:center;color:var(--ink-3);padding:18px;font-size:13.5px}
/* ===== Navigasi seluler: sidebar menjadi laci geser (maks 900px) ===== */
.nav-toggle{display:none;flex:none}
.nav-scrim{position:fixed;inset:0;background:rgba(10,8,30,.48);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s;z-index:190}
body.nav-open .nav-scrim{opacity:1;visibility:visible}
@media (max-width:900px){
.nav-toggle{display:inline-flex;align-items:center;justify-content:center;padding:0}
.sidebar{position:fixed;left:0;top:0;bottom:0;height:100dvh;width:min(300px,85vw);z-index:200;transform:translateX(-106%);transition:transform .28s ease;box-shadow:0 0 60px rgba(5,20,14,.35)}
body.nav-open .sidebar{transform:none}
body.nav-open{overflow:hidden}
.brand{padding:18px 18px 10px}
.side-scroll{overflow-y:auto;padding:6px 12px 16px;flex:1 1 auto;min-height:0}
.nav-label{display:block !important}
.nav-group{display:flex;flex-direction:column;gap:2px}
.nav-item{flex-direction:row;gap:10px;font-size:14px;padding:11px 16px;text-align:left;justify-content:flex-start}
.nav-item .nav-badge{position:static;margin:0 0 0 auto}
.side-card{display:block !important}
.side-foot{display:flex !important}
.top-actions .search{display:none}
}
/* Perbaikan gulir menu: tanpa min-height 0, kolom flex tidak mau
mengecil sehingga daftar menu meluber dan tidak bisa digulir,
terutama di laci seluler (menu bawah seperti Pengaturan tertutup). */
.side-scroll{min-height:0;overscroll-behavior:contain}
/* === Ringkasan Wira Opsi A: Terang Berlapis (24 Okt 2026) === */
.brief{background:#FFFFFF;color:var(--ink);border:1px solid #E7E2F5;overflow:hidden;box-shadow:0 8px 28px rgba(30,27,75,.07)}
@media (prefers-color-scheme: dark){.brief{background:#FFFFFF;color:var(--ink)}}
.brief .card-head h3{color:var(--ink)}
.brief .card-head p{color:#7C8199}
.wira-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:900px){.wira-grid{grid-template-columns:1fr}}
.wira-sec{border-radius:20px;padding:16px 18px;border:1px solid transparent}
.wira-sec h4{font-size:15px;font-weight:800;margin-bottom:8px}
.wira-sec ul{list-style:none;display:grid;gap:6px;margin:0;padding:0}
.wira-sec li{font-size:14px;line-height:1.55;padding-left:18px;position:relative}
.wira-sec li::before{content:"•";position:absolute;left:2px;font-weight:800}
.ws-lav{background:#F6F4FF;border-color:#E4DEFF}
.ws-lav h4{color:#3F3A8C}
.ws-cream{background:#FFF8EC;border-color:#F3E3BC}
.ws-cream h4{color:#7A5B00}
.ws-green{background:#EFFAF1;border-color:#CDEED3}
.ws-green h4{color:#14532D}
.wira-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.wira-group b{display:block;margin-bottom:4px;font-size:13.5px}
.wira-note{margin-top:14px;font-size:13px;color:#7C8199;line-height:1.6}
/* === Kartu berwarna M3 Expressive ala Kantor Sinteniki (26 Okt 2026):
pita judul gradien untuk kartu Ringkasan Operasional Wira, kartu
Mode Siang/Piket/Malam, dan kartu Status Sesi Nomor WhatsApp. Isi,
angka, dan perilaku kartu tidak berubah; hanya tampilan judul. === */
#berandaBriefCard{border-color:#DDD6FE}
#berandaBriefCard .card-head{background:linear-gradient(135deg,#4F46E5 0%,#7C3AED 58%,#9333EA 100%);color:#fff;padding:17px 20px 16px;border-bottom:1px solid rgba(255,255,255,.22)}
#berandaBriefCard .card-head h3{color:#fff;font-size:17px}
#berandaBriefCard .card-head p{color:#E0E7FF}
#berandaBriefCard .card-head .chip{box-shadow:0 4px 14px rgba(49,46,129,.22)}
.mode-shift-wrap{margin:16px 0 20px}
.mode-shift-title{font-size:13px;font-weight:800;color:var(--ink);margin-bottom:9px}
.mode-shift-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.mode-card{background:var(--surface);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 8px 22px -16px rgba(15,23,42,.35)}
.rek-menu-item{display:block;width:100%;text-align:left;border:none;background:transparent;cursor:pointer;font:inherit;font-size:12.5px;color:var(--ink);padding:7px 9px;border-radius:7px}
.rek-menu-item:hover{background:var(--bg)}
.mode-card-head{display:flex;gap:11px;align-items:flex-start;padding:11px 14px 10px;color:var(--ink);background:var(--bg);border-bottom:1px solid var(--line);box-sizing:border-box;min-height:76px}
.mode-card-icon{width:34px;height:34px;flex:none;border-radius:12px;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;font-size:17px;line-height:1}
.mode-card-heading{flex:1;min-width:0}
.mode-card-title{font-size:14.5px;font-weight:800;line-height:1.25}
.mode-card-subtitle{font-size:12px;line-height:1.35;color:var(--ink-2);margin-top:1px;height:32px;overflow:hidden}
.mode-card-time{font-size:11.5px;font-weight:800;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px 8px;white-space:nowrap}
.mode-card-body{padding:12px 14px 14px}
.mode-piket-line{font-size:12.5px;color:var(--ink-2)}
.mode-metrics{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;margin-top:8px;font-size:12.5px;color:var(--ink-2)}
.mode-metrics b{color:var(--ink)}
.mode-metrics .mode-hang-value{color:var(--red)}
.wa-session-card{padding:0;overflow:hidden}
.wa-session-head{background:linear-gradient(135deg,#0B6B47,#0E7C86);color:#fff;padding:17px 20px 16px;border-bottom:1px solid rgba(255,255,255,.2)}
.wa-session-head h3{color:#fff;font-size:16.5px}
.wa-session-head p{color:#D9F3E7}
.wa-session-body{padding:16px 20px 20px}
.wa-session-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.wa-session-empty{text-align:center;padding:26px 20px 30px;color:var(--ink-3);font-size:13.5px}
.wa-session-manage{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.45);color:#fff}
.wa-session-manage:hover{background:rgba(255,255,255,.26);border-color:#fff;color:#fff}
@media (max-width:620px){
#berandaBriefCard .card-head,.wa-session-head{padding:15px 16px 14px}
.wa-session-body{padding:14px 14px 16px}
.mode-card-head{flex-wrap:wrap}
.mode-card-time{margin-left:45px}
}
/* === Mention WhatsApp (@Nama) di utas percakapan (25 Okt 2026) === */
.mention{color:#5B54C7;font-weight:700;background:#EFEDFF;border-radius:6px;padding:0 5px;cursor:pointer;white-space:nowrap}
.mention:hover{background:#E0DCFF}
.mention.unknown{color:#7C8199;background:#F1F0F7;font-weight:600}
/* === Baris Asisten AI composer: chip persona M3 Expressive (24 Okt 2026) === */
.ai-draft-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:12px}
.ai-draft-personas{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ai-draft-label{font-size:12.5px;font-weight:800;color:var(--ink);margin-right:2px}
.persona-chip{display:inline-flex;align-items:center;gap:8px;padding:5px 14px 5px 6px;border-radius:99px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;font:inherit;transition:all .16s ease}
.persona-chip img{width:27px;height:27px;border-radius:50%;object-fit:cover;flex:none}
.persona-chip .pc-name{font-weight:800;font-size:13px;line-height:1}
.persona-chip .pc-role{font-size:11px;font-weight:600;color:#7C8199;line-height:1}
.persona-chip:hover{border-color:#B9B0F5;transform:translateY(-1px);box-shadow:0 4px 12px rgba(108,92,231,.14)}
.persona-chip.active{background:linear-gradient(120deg,#E7E3FF,#F3E8FF 60%,#FFE4EC);border-color:#7C6CF0;color:#2E2A6E;box-shadow:0 5px 16px rgba(108,92,231,.22)}
.persona-chip.active .pc-role{color:#6A63B8}
.ai-draft-btn{border:0;border-radius:99px;background:linear-gradient(120deg,#6C5CE7,#A55EEA);color:#fff;font:inherit;font-weight:800;font-size:13px;padding:11px 20px;cursor:pointer;box-shadow:0 6px 18px rgba(108,92,231,.32);transition:all .16s ease;white-space:nowrap}
.ai-draft-btn:hover{transform:translateY(-1px);box-shadow:0 9px 22px rgba(108,92,231,.38)}
.ai-draft-btn:disabled{opacity:.65;cursor:wait;transform:none}
@media (max-width:900px){.ai-draft-btn{width:100%}}
/* === Draf AI inline di composer (24 Okt 2026) === */
.ai-draft-hint{font-size:12px;color:#7C8199;font-weight:600}
.persona-chip.static{cursor:default}
.persona-chip.static:hover{transform:none;box-shadow:none}
.inline-draft{margin-top:14px;border-radius:20px;border:1.5px solid #CFC6F7;background:linear-gradient(150deg,#F4F1FF 0%,#FBF7FF 55%,#FFF5F8 100%);padding:15px 17px;animation:idIn .25s ease}
@keyframes idIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.inline-draft.loading{display:flex;align-items:center;gap:12px}
.inline-draft.loading img{width:34px;height:34px;border-radius:50%;object-fit:cover;animation:idPulse 1.1s ease-in-out infinite}
@keyframes idPulse{0%,100%{opacity:.55}50%{opacity:1}}
.inline-draft .id-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.inline-draft .id-head img{width:32px;height:32px;border-radius:50%;object-fit:cover}
.inline-draft .id-title{font-weight:800;font-size:14px;color:var(--ink)}
.inline-draft .id-meta{font-size:11.5px;color:#6A63B8;font-weight:600}
.inline-draft .id-badge{margin-left:auto;background:#6C5CE7;color:#fff;font-size:11px;font-weight:800;border-radius:99px;padding:4px 11px}
.inline-draft textarea{width:100%;padding:12px 14px;border:1px dashed #C4BAF2;border-radius:14px;background:rgba(255,255,255,.85);color:var(--ink);font:inherit;font-size:13.8px;line-height:1.65;resize:vertical;outline:none}
.inline-draft textarea:focus{border-color:#7C6CF0;border-style:solid}
.inline-draft .id-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px;align-items:center}
.btn-insert{background:#161A28;color:#fff;border:0;border-radius:99px;font:inherit;font-weight:800;font-size:13px;padding:11px 19px;cursor:pointer}
.btn-insert:hover{background:#262B45}
.btn-queue{background:#fff;color:#3F3A8C;border:1.5px solid #B9B0F5;border-radius:99px;font:inherit;font-weight:800;font-size:13px;padding:10px 18px;cursor:pointer}
.btn-queue:hover{background:#EFEDFF}
.btn-ghost2{background:transparent;color:#7C8199;border:0;font:inherit;font-weight:700;font-size:13px;padding:10px 8px;cursor:pointer}
.inline-draft.error{border-color:#F3C6C6;background:linear-gradient(150deg,#FFF5F5,#FFF)}
/* === Meja Agent + Tanya Agent (24 Okt 2026) === */
.card.agent .tanya-chip{margin-left:auto;background:linear-gradient(120deg,#6C5CE7,#A55EEA);color:#fff;font-size:11.5px;font-weight:800;border-radius:99px;padding:5px 12px;box-shadow:0 4px 12px rgba(108,92,231,.28)}
.desk-head2{display:flex;align-items:center;gap:14px;margin:6px 0 16px}
.desk-head2 img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:3px solid #E1DCF5}
.desk-nm{font-size:19px;font-weight:800;color:var(--ink)}
.desk-nm small{font-size:12px;color:var(--ink-3);font-weight:700}
.desk-rl{color:#5B6478;font-size:13px;font-weight:600}
.desk-aktif{margin-left:auto;background:#EAF6EC;color:#1B7A43;font-weight:800;font-size:12px;border-radius:99px;padding:6px 13px;white-space:nowrap}
.desk-cols{display:grid;grid-template-columns:1.65fr 1fr;gap:14px;align-items:start}
@media (max-width:900px){.desk-cols{grid-template-columns:1fr}}
.desk-chat-card h3,.desk-bekal-card h3{font-size:14.5px;font-weight:800;margin-bottom:4px}
.desk-hint{font-size:12px;color:#7C8199;margin-bottom:12px;line-height:1.5}
.tanya-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.tanya-chipq{background:#F1EFFD;border:1.5px solid #D8D2F7;color:#3F3A8C;font:inherit;font-weight:700;font-size:12.5px;border-radius:99px;padding:7px 13px;cursor:pointer;text-align:left}
.tanya-chipq:hover{background:#E7E3FF}
.tanya-log{max-height:430px;overflow-y:auto;padding:4px 2px;margin-bottom:12px}
.tanya-empty{font-size:13px;color:var(--ink-3);text-align:center;padding:22px 10px}
.tanya-msg{display:flex;margin-bottom:9px}
.tanya-msg.user{justify-content:flex-end}
.tanya-bubble{max-width:88%;border-radius:16px;padding:11px 14px;font-size:13.5px;line-height:1.6}
.tanya-msg.user .tanya-bubble{background:#161A28;color:#fff;border-bottom-right-radius:6px}
.tanya-msg.agent .tanya-bubble{background:#F4F1FF;border:1px solid #E2DCFA;border-bottom-left-radius:6px}
.tanya-bubble.loading{color:#6A63B8;font-weight:700;animation:idPulse 1.1s ease-in-out infinite}
.tanya-acts{display:flex;gap:8px;margin:-3px 0 12px}
.tanya-form{display:flex;gap:9px}
.tanya-form input{flex:1;padding:11px 13px;border:1px solid #DAD5F2;border-radius:12px;background:#F6F5FC;font:inherit;font-size:13.5px;color:var(--ink);outline:none}
.tanya-form input:focus{border-color:#7C6CF0}
.tanya-send{background:linear-gradient(120deg,#6C5CE7,#A55EEA);color:#fff;border:0;border-radius:99px;font:inherit;font-weight:800;padding:0 22px;cursor:pointer;box-shadow:0 6px 16px rgba(108,92,231,.3)}
.bekal-row{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px dashed #E7E4F2;font-size:13px}
.bekal-row b{font-size:13.5px;text-align:right}
.bekal-row .bekal-na{color:#B07D10}
.bekal-note{font-size:12px;line-height:1.55;color:#7A5B00;background:#FFF7DB;border:1px solid #F3E3BC;border-radius:10px;padding:8px 12px;margin:8px 0 4px}
/* === Meja Agent v2 — Material 3 Expressive (24 Okt 2026) === */
.card.agent .tanya-chip{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;font-size:16px;padding:0}
#panel-meja .desk-back{border-radius:99px;border:1.5px solid var(--line);background:var(--surface);font-weight:800;padding:9px 18px;box-shadow:0 3px 10px rgba(30,27,75,.06)}
.desk2{--acc:#6C5CE7;--soft:#EFEDFF;margin-top:4px}
.desk-hero{display:flex;align-items:center;gap:16px;background:linear-gradient(120deg,var(--soft),#fff 75%);border:1.5px solid var(--soft);border-radius:26px;padding:18px 22px;margin-bottom:14px}
.desk-hero img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:3px solid var(--acc);flex:none}
.desk-hero-nm{font-size:21px;font-weight:800;color:var(--ink);line-height:1.15}
.desk-hero-nm small{font-size:12px;color:var(--ink-3);font-weight:700}
.desk-hero-rl{font-size:13px;font-weight:700;color:#5B6478}
.desk-hero-tag{font-size:13px;color:var(--acc);font-weight:600;font-style:italic;margin-top:2px}
.desk-hero-side{margin-left:auto;text-align:right;display:flex;flex-direction:column;gap:5px;align-items:flex-end;flex:none}
.desk-pill{background:#EAF6EC;color:#1B7A43;font-weight:800;font-size:12px;border-radius:99px;padding:6px 13px}
.desk-updated{font-size:11.5px;color:#7C8199;font-weight:600}
.desk-grid{display:grid;grid-template-columns:1.65fr 1fr;gap:14px;align-items:start}
@media (max-width:900px){.desk-grid{grid-template-columns:1fr}.desk-hero{flex-wrap:wrap}.desk-hero-side{margin-left:0;align-items:flex-start;text-align:left}}
.desk-card{background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:18px 20px;box-shadow:0 8px 24px rgba(30,27,75,.05)}
.desk-card-head{font-size:15px;font-weight:800;color:var(--ink);margin-bottom:4px}
.desk-card .tanya-chipq{background:var(--soft);border-color:transparent;color:var(--ink)}
.desk-card .tanya-chipq:hover{border-color:var(--acc)}
.desk-card .tanya-send{background:var(--acc);box-shadow:0 6px 16px rgba(30,27,75,.22)}
.desk-card .tanya-msg.agent .tanya-bubble{background:var(--soft);border-color:transparent}
.tanya-empty2{text-align:center;padding:30px 16px 24px}
.tanya-empty2 img{width:58px;height:58px;border-radius:50%;object-fit:cover;margin-bottom:10px}
.tanya-empty2 .te-title{font-size:16px;font-weight:800;color:var(--ink);margin-bottom:4px}
.tanya-empty2 .te-sub{font-size:13px;color:var(--ink-3);line-height:1.55;max-width:420px;margin:0 auto}
.desk-goto{margin-top:14px;width:100%;background:var(--soft);color:var(--ink);border:0;border-radius:99px;font:inherit;font-weight:800;font-size:13px;padding:11px 16px;cursor:pointer}
.desk-goto:hover{filter:brightness(.97)}
.desk-denied{background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:38px 26px;text-align:center;box-shadow:0 8px 24px rgba(30,27,75,.05)}
.desk-denied img{width:64px;height:64px;border-radius:50%;object-fit:cover;margin-bottom:12px;filter:grayscale(.4)}
.desk-denied h3{font-size:17px;font-weight:800;color:var(--ink);margin-bottom:6px}
.desk-denied p{font-size:13.5px;color:var(--ink-2);line-height:1.6;max-width:520px;margin:0 auto}
.desk-denied-btns{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.desk-denied-btns .btn{display:inline-flex;align-items:center;gap:8px;border-radius:99px}
.desk-denied-btns .btn img{width:24px;height:24px;border-radius:50%;object-fit:cover;margin:0;filter:none}
/* === Daftar AI Agent di sidebar (24 Okt 2026) === */
.side-agents-nav{padding:12px 12px 4px;border-top:1px solid rgba(255,255,255,.10);margin-top:10px}
.side-agents-title{font-size:11px;font-weight:800;letter-spacing:.12em;color:#8FBBA4;text-transform:uppercase;padding:0 12px 8px}
.nav-agent{position:relative;width:100%;display:flex;align-items:center;gap:10px;text-align:left;padding:8px 12px;border-radius:12px;color:#CDE7DA;font:inherit;font-weight:600;font-size:13.5px;background:transparent;border:0;cursor:pointer;transition:background .15s,color .15s;margin-bottom:2px}
.nav-agent .na-dot{position:absolute;left:31px;top:27px;width:9px;height:9px;border-radius:50%;background:#7A8A80;border:2px solid #0B4A34;z-index:1;pointer-events:none}
.nav-agent .na-dot.aktif{background:#39D98A;box-shadow:0 0 0 3px rgba(57,217,138,.20)}
.nav-agent img{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:none}
.nav-agent .na-rl{margin-left:auto;font-size:11px;color:#8FBBA4;font-weight:600;text-align:right}
.nav-agent:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-agent.active{background:rgba(255,255,255,.13);color:#fff}
/* === Format jawaban agent + layout meja mengisi halaman (24 Okt 2026) === */
.desk2{min-height:calc(100vh - 195px);display:flex;flex-direction:column}
.desk-grid{flex:1;align-items:stretch}
.desk-card{display:flex;flex-direction:column}
.desk-card .tanya-log{flex:1;max-height:600px;min-height:320px}
.ta-h{font-weight:800;font-size:13.8px;color:var(--ink);margin:13px 0 5px}
.ta-h:first-child{margin-top:0}
.ta-p{margin:5px 0;line-height:1.6}
.ta-ul{margin:4px 0 8px;padding-left:19px;line-height:1.6}
.ta-ul li{margin:2.5px 0}
.ta-tablewrap{overflow-x:auto;margin:8px 0 10px;border:1px solid #E2DCFA;border-radius:12px}
.ta-table{border-collapse:collapse;width:100%;font-size:12.8px;background:rgba(255,255,255,.65)}
.ta-table th{text-align:left;font-weight:800;padding:7px 10px;background:var(--soft);border-bottom:1.5px solid #E2DCFA;white-space:nowrap}
.ta-table td{padding:6.5px 10px;border-bottom:1px solid #EEEAF9;vertical-align:top}
.ta-table tr:last-child td{border-bottom:0}
/* === Paket poles layar kecil (disetujui Bos 24 Okt 2026) ===
Layar tim umumnya 1366x768 / 1280x720 / scaling Windows 125%:
rapatkan jarak, tumpuk meja lebih awal, hero ramping di layar pendek.
Tidak mengubah tampilan di layar lebar/tinggi. */
@media (max-width:1280px){
.desk-grid{gap:12px}
.grid-2,.grid-2e,.chat-wrap{gap:12px}
.content{padding-left:20px;padding-right:20px}
}
@media (max-width:1100px){
.desk-grid{grid-template-columns:1fr}
}
@media (max-height:800px){
.desk-hero{padding:16px 20px}
.desk-hero img{width:54px;height:54px}
}
/* === Tipografi narasi laporan (24 Okt 2026) === */
.ta-title{font-size:16.5px;font-weight:800;color:var(--ink);margin:0 0 4px;letter-spacing:.01em}
.ta-sub{font-weight:800;font-size:13.5px;color:var(--ink);margin:11px 0 4px}
.lap-chip{display:inline-flex;align-items:center;gap:8px}
.lap-chip img{width:24px;height:24px;border-radius:50%;object-fit:cover}
.laporan-narasi .ta-h{font-size:14.5px}
/* === Aksen tepi Material 3 Expressive untuk judul teks AI (29 Okt 2026, permintaan Bos) ===
Judul dokumen dan sub-judul pada narasi Wira/Tanya mendapat garis
tepi kiri bergradasi khas M3 Expressive (ungu -> magenta -> oranye)
agar jenjang bacaan jelas tanpa penanda markdown mentah. */
.ta-title{position:relative;padding-left:14px}
.ta-title::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:5px;border-radius:99px;background:linear-gradient(180deg,#6C4BD8,#C86DD7 55%,#FF8A5B)}
.ta-h{position:relative;padding-left:12px}
.ta-h::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:4px;border-radius:99px;background:linear-gradient(180deg,#6C4BD8,#C86DD7)}
.ta-sub{position:relative;padding-left:12px}
.ta-sub::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:4px;border-radius:99px;background:#C9B8F5}
.ta-hr{border:0;border-top:1.5px solid #E7E1F5;margin:12px 0}
/* ===== Konsep B+ Percakapan: ringkasan, saringan dua baris, keadaan baca ===== */
.inbox-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 14px}
.istat{display:flex;gap:12px;align-items:center;background:#fff;border:1.5px solid #EDE3D3;border-radius:18px;padding:13px 16px}
.istat-ic{font-size:21px}
.istat-n{font-size:21px;font-weight:800;line-height:1.05}
.istat-l{font-size:12px;color:var(--ink-3);font-weight:600}
.inbox-filters2{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.inbox-filters2 .frow{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.inbox-filters2 .flabel{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-3);width:52px;flex:none}
.inbox-filters2 .ifilter{display:inline-flex;align-items:center;gap:6px}
.inbox-filters2 .fcnt{font-size:11px;font-weight:800;background:rgba(0,0,0,.07);padding:1px 8px;border-radius:999px}
.inbox-filters2 .ifilter.active .fcnt{background:rgba(255,255,255,.25)}
.ivv.unread{background:#EFE9FD;box-shadow:inset 4px 0 0 #5B4BC4}
.ivv.unread:hover{background:#E7DFFB}
.ivv.unread.active{background:#EFE9FD;box-shadow:inset 4px 0 0 #5B4BC4}
.ivv.unread .ivv-name{font-weight:800}
.ivv .newcnt{flex:none;background:#5B4BC4;color:#fff;font-size:11px;font-weight:800;padding:2px 9px;border-radius:999px}
.ivv.dimprev .ivv-prev{color:var(--ink-3)}
.chip-hot{background:#FFE1EC;color:#A4133C}
#ibxPanasBtn.panas-on{background:#FFE1EC !important;color:#A4133C;border-color:#F3B8CE}
@media (max-width:900px){.inbox-stats{grid-template-columns:repeat(2,1fr)}}
.inbox-filters2 .ifilter{padding:6px 11px;font-size:12.5px;min-height:34px}
/* ===== Batang segmen saringan Percakapan (ganti chip lepas) ===== */
.inbox-filters2{gap:10px}
.segrow{margin:0}
.segcap{font-size:10px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--ink-3);margin:0 0 5px 2px}
.segbar{display:flex;background:#fff;border:1.5px solid #E4D8C3;border-radius:14px;overflow:hidden}
.segbtn{font:inherit;flex:1;display:flex;flex-direction:column;align-items:center;gap:0;padding:7px 2px 6px;background:transparent;border:none;border-right:1px solid #F0E7D5;color:var(--ink-2);cursor:pointer;min-height:48px}
.segbtn:last-child{border-right:none}
.segbtn .segn{font-size:16px;font-weight:800;line-height:1.1}
.segbtn .segt{font-size:10px;font-weight:700;white-space:nowrap}
.segbtn.active{background:#5B4BC4;color:#fff}
.segbtn:not(.active):hover{background:var(--surface)}
/* ===== Kartu ringkasan = saringan (digabung, hemat ruang) ===== */
.inbox-stats{grid-template-columns:repeat(4,1fr) 1.2fr}
button.istat{font:inherit;text-align:left;cursor:pointer;width:100%}
button.istat:hover{border-color:#D9CDB4}
button.istat.active{border-color:#5B4BC4;background:#EFE9FD;box-shadow:inset 0 0 0 1.5px #5B4BC4}
.istat-jenis{cursor:default}
.segbar.mini .segbtn{min-height:34px;padding:4px 2px}
.segbar.mini .segn{font-size:13px}
.segbar.mini .segt{font-size:9.5px}
@media (max-width:900px){.inbox-stats{grid-template-columns:repeat(2,1fr)}}
/* ===== 6 kotak sebaris: status (4) + jenis (2) ===== */
.stats6-caps{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:6px}
.stats6-caps span{font-size:10px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;color:var(--ink-3)}
.stats6-caps .cap-status{grid-column:1 / 5}
.stats6-caps .cap-jenis{grid-column:5 / 7;border-left:2px solid #E4D8C3;padding-left:12px}
.inbox-stats{grid-template-columns:repeat(6,1fr)}
.inbox-stats .istat{padding:9px 13px;border-radius:16px}
.inbox-stats .istat-n{font-size:19px}
.inbox-stats .istat-ic{font-size:19px}
.inbox-stats .istat-l{font-size:11.5px;white-space:nowrap}
button.istat.jenis{border-style:dashed}
button.istat.jenis.active{border-style:solid}
@media (max-width:900px){.stats6-caps{display:none}}
/* ===== Pencarian di dalam utas ===== */
.cari-mark{background:#FFE58A;border-radius:3px;padding:0 1px;color:inherit}
.cari-now-mark{background:#FFB020}
.bubble.cari-now{box-shadow:0 0 0 2.5px #E8B04B}
/* ===== Blok kutipan di gelembung ===== */
.kutipan-blok{border-left:3px solid #5B4BC4;background:rgba(91,75,196,.08);border-radius:6px;padding:6px 9px;font-size:12px;line-height:1.45;color:var(--ink-2);margin:2px 0 6px;cursor:pointer;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* ===== Tombol balas (kutip) pada gelembung ===== */
.bubble-reply{position:absolute;top:2px;right:4px;width:24px;height:24px;border:none;border-radius:50%;background:rgba(91,75,196,.13);color:#5B4BC4;font-size:13px;line-height:1;cursor:pointer;opacity:0;transition:opacity .15s;padding:0;z-index:2}
.bubble:hover .bubble-reply{opacity:1}
/* ===== Aksi gelembung, reaksi, sematan (Tahap 3) ===== */
.bubble-actions{position:absolute;top:2px;right:4px;display:flex;gap:4px;opacity:0;transition:opacity .15s;z-index:2}
.bubble:hover .bubble-actions{opacity:1}
.bubble-act{width:24px;height:24px;border:none;border-radius:50%;background:rgba(91,75,196,.13);font-size:12px;line-height:1;cursor:pointer;padding:0}
.bubble-act:hover{background:rgba(91,75,196,.28)}
.reaksi-row{display:flex;gap:4px;margin-top:4px}
.reaksi-chip{background:rgba(91,75,196,.12);border:1px solid rgba(91,75,196,.25);border-radius:999px;padding:1px 7px;font-size:12px;line-height:1.5}
.emoji-picker{position:fixed;z-index:9999;display:flex;gap:2px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px 8px;box-shadow:0 10px 30px rgba(20,15,50,.22)}
.emoji-picker button{border:none;background:none;font-size:19px;cursor:pointer;padding:3px 5px;border-radius:50%;line-height:1}
.emoji-picker button:hover{background:rgba(91,75,196,.14)}
.emoji-picker button.aktif{background:rgba(91,75,196,.22)}
.emoji-picker button.hapus{font-size:12px;font-weight:700;color:#C2432F}
/* ===== Popup pratinjau media (Material 3 Expressive) ===== */
.media-expand{position:absolute;right:6px;bottom:8px;width:30px;height:30px;border:none;border-radius:50%;background:rgba(15,10,35,.66);color:#fff;cursor:pointer;font-size:14px;line-height:1;z-index:2}
.doc-chip{display:flex;gap:8px;align-items:center;background:rgba(0,0,0,.04);border:1px solid var(--line);border-radius:10px;padding:9px 12px;margin:2px 0 6px;color:inherit;font-family:inherit;text-align:left;cursor:pointer}
.doc-chip:hover{background:rgba(91,75,196,.08)}
.media-modal-scrim{position:fixed;inset:0;z-index:10000;background:rgba(18,14,38,.58);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:22px;animation:mediaScrimIn .22s ease-out}
.media-modal{background:var(--surface);border-radius:28px;max-width:min(920px,94vw);max-height:92vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 70px rgba(10,6,30,.45);animation:mediaPopIn .34s cubic-bezier(.34,1.4,.64,1)}
@keyframes mediaPopIn{from{transform:scale(.92) translateY(14px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
@keyframes mediaScrimIn{from{opacity:0}to{opacity:1}}
.media-modal-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
.media-modal-title{font-weight:800;font-size:14.5px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.media-modal-unduh{background:#5B4BC4;color:#fff;text-decoration:none;font-weight:700;font-size:13px;padding:9px 16px;border-radius:999px;flex:none}
.media-modal-x{width:38px;height:38px;border:none;border-radius:50%;background:var(--surface-3);cursor:pointer;font-size:15px;flex:none}
.media-modal-body{display:flex;align-items:center;justify-content:center;background:#14101F;min-height:180px}
.media-modal-body img{max-width:100%;max-height:74vh;display:block}
.media-modal-body video{max-width:100%;max-height:74vh;display:block}
.media-modal-body iframe{width:min(860px,92vw);height:74vh;border:none;background:#fff;display:block}
.media-modal-noprev{color:#E9E4F7;text-align:center;padding:44px 30px;font-size:14px;line-height:1.6}
.media-modal-caption{white-space:pre-wrap;overflow-wrap:anywhere;padding:12px 18px;font-size:13.5px;color:var(--ink-2);border-top:1px solid var(--line)}
/* ===== Pola satu scroll ala WhatsApp Web (khusus panel Percakapan, desktop) =====
Dokumen dikunci; panel menjadi satu-satunya wadah gulir luar (judul panel,
banner shift, tab nomor, dan kartu saringan boleh tergulir sekali ke atas),
sedangkan kotak chat tingginya tepat satu layar panel: begitu utas dibuka,
panel digulir sampai kotak chat mengisi layar dan sesudahnya yang bergulir
hanya daftar percakapan dan isi chat. Kepala chat & composer tidak pernah
hilang. Panel lain tidak terpengaruh. */
@media (min-width:701px){
html:has(#panel-percakapan.active), body:has(#panel-percakapan.active){overflow:hidden}
body:has(#panel-percakapan.active){display:flex;flex-direction:column;height:100dvh}
body:has(#panel-percakapan.active) .app{flex:1;min-height:0;height:auto}
body:has(#panel-percakapan.active) .main{min-height:0}
body:has(#panel-percakapan.active) .content{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
body:has(#panel-percakapan.active) #panel-percakapan{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
body:has(#panel-percakapan.active) .inbox{height:100%;min-height:0}
}
/* ===== Warna baris daftar Konsep A — Tegas Berjenjang (keputusan Bos 25 Okt) =====
Jenjang kekuatan warna mengikuti urgensi: baru paling pekat, yang sudah
beres paling pudar. Rel kiri 5px menjadi kode warna tiap keadaan. */
.ivv.st-baru{background:#DCD0FA;box-shadow:inset 5px 0 0 #5B4BC4}
.ivv.st-baru .ivv-name{font-weight:800;color:#241A4D}
.ivv.st-baru .ivv-prev{color:#3D3470;font-weight:600}
.ivv.st-menunggu{background:var(--surface);box-shadow:inset 5px 0 0 #E8862E}
.ivv.st-gantung{background:#FDECEA;box-shadow:inset 5px 0 0 #C62F2F}
.ivv.st-terkirim{background:#F2F2F5}
.ivv.st-terkirim .ivv-name{color:#55506E}
.ivv.st-terkirim .ivv-prev{color:#9B97B0}
.ivv.st-selesai{background:var(--surface);box-shadow:inset 5px 0 0 #B9B5CC}
.ivv.st-selesai .ivv-prev{color:#8A86A0}
/* Baris yang sedang dibuka: bingkai pine di sisi dalam, tidak menimpa rel keadaan */
.ivv.active{outline:2px solid var(--pine);outline-offset:-2px}
/* ===== Catatan keterangan panel Percakapan khusus Owner/Admin ===== */
body.sembunyi-catatan-percakapan #panel-percakapan .panel-head p,
body.sembunyi-catatan-percakapan #shiftWrap .numtab-anita-note,
body.sembunyi-catatan-percakapan #shiftWrap .numtab-note{display:none}
/* ===== Ruang lega bawah panel Percakapan di layar lebar (perbaikan 25 Okt) =====
Kartu chat yang tingginya tepat 100% panel membuat composer menempel tepi
bawah monitor; kurangi tinggi kartu sebesar ruang napas (20-36px mengikuti
tinggi layar) supaya selalu ada jarak lega di bawah kartu, dan beri panel
bantalan bawah yang sama agar gulir penyelarasan kotak chat tetap dapat
mencapai posisi pasnya. Strip judul di atas halaman sudah dihapus dari
index.html atas permintaan Bos, jadi tidak ada lagi kompensasi tinggi
sidebar di sini. */
@media (min-width:701px){
body:has(#panel-percakapan.active) .inbox{height:calc(100% - clamp(20px,3dvh,36px))}
body:has(#panel-percakapan.active) #panel-percakapan{padding-bottom:clamp(20px,3dvh,36px)}
}
/* ===== Lidah panah kembali ke tab (panel Percakapan, pilihan Bos 25 Okt) =====
Lidah kecil berbahan liquid glass menempel di tepi kanan kartu chat,
setinggi tengah kartu: tembus pandang berblur sehingga tidak menutupi
isi dan tidak berpindah tempat saat jendela diubah ukurannya. Muncul
hanya saat panel sudah digulir jauh (tab nomor & kartu saringan
tertutup kotak chat); satu klik mengembalikan panel ke paling atas. */
.btn-tab-saringan{position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:65;display:none;align-items:center;justify-content:center;width:30px;height:58px;padding:0;background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(14px) saturate(1.7);backdrop-filter:blur(14px) saturate(1.7);border:1px solid rgba(255,255,255,.65);border-right:none;border-radius:12px 0 0 12px;box-shadow:0 4px 18px rgba(36,26,77,.14),inset 0 1px 0 rgba(255,255,255,.85);color:#5B4BC4;font-family:inherit;font-size:17px;font-weight:800;cursor:pointer}
.btn-tab-saringan.tampil{display:flex}
.btn-tab-saringan:hover{background:rgba(255,255,255,.78);color:#3D3470}
@media (max-width:700px){.btn-tab-saringan{display:none !important}}
/* ===== Chat melayang Sinta di panel Percakapan (25 Okt 2026, permintaan Bos) =====
Tombol avatar melayang di pojok kanan bawah, hanya tampil saat panel
Percakapan aktif dan peran pengguna boleh bertanya ke Sinta. Popup
memakai jalur Tanya yang sama dengan Meja Agent (riwayat menyatu). */
/* Posisi Sinta: Opsi 1 'Tepi Konten' (pilihan Bos 26 Okt 2026).
Tombol & popup tidak lagi dipaku ke tepi jendela browser —
di monitor ultra lebar (3440px) tombolnya dulu jatuh ~900px
dari area kerja karena .app dibatasi 1650px di tengah layar.
Kini patokannya tepi kanan rangka .app: right dihitung dari
(100vw - app-max)/2 + 22px, dengan lantai 22px untuk layar
yang lebih sempit dari rangka. Pola yang sama seperti laci
konteks yang sudah lebih dulu memakai rumus ini. */
.sinta-fab{position:fixed;right:max(22px,calc((100vw - var(--app-max))/2 + 22px));bottom:22px;z-index:70;width:56px;height:56px;border-radius:50%;border:2.5px solid #fff;padding:0;background:#A97B12;box-shadow:0 8px 22px rgba(36,26,77,.32);cursor:pointer;display:none;overflow:visible}
.sinta-fab.tampil{display:block}
.sinta-fab img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.sinta-fab:hover{transform:scale(1.06)}
.sinta-fab-dot{position:absolute;right:1px;bottom:1px;width:13px;height:13px;border-radius:50%;background:#2FBF71;border:2px solid #fff}
.sinta-pop{position:fixed;right:max(22px,calc((100vw - var(--app-max))/2 + 22px));bottom:90px;z-index:70;width:min(386px,calc(100vw - 32px));height:min(600px,calc(100dvh - 120px));background:#fff;border:1px solid #E4DEF7;border-radius:20px;box-shadow:0 18px 50px rgba(36,26,77,.28);display:none;flex-direction:column;overflow:hidden}
.sinta-pop.buka{display:flex}
.sinta-pop-head{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#FFF6D9;border-bottom:1px solid #F0E3B2}
.sinta-pop-head img{width:38px;height:38px;border-radius:50%;object-fit:cover}
.sinta-pop-title{flex:1;line-height:1.25}
.sinta-pop-title b{display:block;font-size:14.5px;color:#241A4D}
.sinta-pop-title small{font-size:11.5px;color:#7A6A2F}
.sinta-pop-x{background:none;border:none;font-size:15px;color:#6B6486;cursor:pointer;padding:5px 8px;border-radius:8px}
.sinta-pop-x:hover{background:rgba(0,0,0,.06)}
.sinta-pop-chips{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px 2px}
.sinta-pop-chips:empty{display:none}
.sinta-pop-log{flex:1;overflow-y:auto;padding:12px;background:#FBFAFE}
.sinta-pop-form{display:flex;gap:8px;padding:10px 12px;border-top:1px solid #EDEAF7;background:#fff}
.sinta-pop-form input{flex:1;border:1.5px solid #D9D2F2;border-radius:99px;padding:9px 14px;font:inherit;font-size:13.5px;outline:none}
.sinta-pop-form input:focus{border-color:#A97B12}
@media (max-width:700px){.sinta-fab,.sinta-pop{display:none !important}}
/* ===== Mode besar popup Sinta (25 Okt 2026, permintaan Bos) =====
Tombol ⤢ di kepala popup membesarkannya ke tengah layar (Material 3
Expressive, radius 28px + tirai) agar tabel lebar terbaca penuh tanpa
meninggalkan halaman Percakapan; ⤡ / klik tirai / Esc mengecilkan
kembali ke pojok kanan bawah; ✕ selalu menutup tuntas. */
.sinta-pop{transition:width .42s cubic-bezier(.2,0,0,1),height .42s cubic-bezier(.2,0,0,1),right .42s cubic-bezier(.2,0,0,1),bottom .42s cubic-bezier(.2,0,0,1),transform .42s cubic-bezier(.2,0,0,1),border-radius .42s cubic-bezier(.2,0,0,1)}
.sinta-pop.besar{right:50%;bottom:50%;transform:translate(50%,50%);width:min(880px,calc(100vw - 48px));height:min(84dvh,920px);border-radius:28px;box-shadow:0 24px 70px rgba(36,26,77,.38)}
.sinta-scrim{position:fixed;inset:0;z-index:69;background:rgba(27,18,64,.44);backdrop-filter:blur(3px);display:none}
.sinta-scrim.tampil{display:block}
.sinta-pop .tanya-bubble{overflow-x:auto}
/* ===== Katalog: tab aktif berwarna + badge antrean merah (permintaan Bos 25 Okt 2026) ===== */
#tabBtnKatalogItems.active,#tabBtnKatalogReview.active,#tabBtnKatalogDocs.active{
background:var(--pine);color:#fff;border-color:transparent;
box-shadow:0 8px 20px -8px rgba(108,92,231,.55);
}
#tabBtnKatalogItems.active:hover,#tabBtnKatalogReview.active:hover,#tabBtnKatalogDocs.active:hover{
color:#fff;border-color:transparent;filter:brightness(1.06);
}
@media (prefers-color-scheme: dark){
#tabBtnKatalogItems.active,#tabBtnKatalogReview.active,#tabBtnKatalogDocs.active{color:#17142E}
}
.katalog-review-badge{
background:#FA2D48;color:#fff;font-size:12px;font-weight:800;
min-width:22px;height:22px;line-height:22px;padding:0 6px;border-radius:99px;
text-align:center;vertical-align:middle;
}
/* ===== Kunci tinggi area kerja Percakapan + kepala ramping =====
Ide 1, persetujuan Bos 26 Okt 2026: di monitor 3440x1440 bagian
bawah halaman Percakapan (rekomendasi + kotak pesan) tertutup
lipatan dan harus discroll dulu. Akar: .inbox diberi tinggi
dari hitungan layar (clamp/calc) TANPA mengurangkan blok kepala
panel (judul + shift + tab nomor + kotak saringan), sehingga
total panel selalu lebih tinggi dari layar. Kini panel menjadi
kolom flex: blok kepala menyusut seperlunya (flex:none) dan
.inbox mengambil SISA tinggi persis (flex:1) — linimasa
menggulir di dalam kolomnya sendiri, rekomendasi dan komposer
selalu terlihat. Blok kepala sekalian dirampingkan: banner
shift lebih tipis, tab nomor satu baris bergeser menyamping,
kotak saringan lebih padat. Hanya layar >=701px; alur HP
tidak disentuh. */
@media (min-width:701px){
body:has(#panel-percakapan.active) #panel-percakapan{
/* !important pada display: pengalih panel memasang display:block
secara inline lewat JS, dan gaya inline mengalahkan lembar
gaya biasa — tanpa !important panel tidak pernah jadi flex. */
display:flex !important;flex-direction:column;overflow:hidden;
}
body:has(#panel-percakapan.active) #panel-percakapan > .panel-head,
body:has(#panel-percakapan.active) #panel-percakapan > .shift-wrap,
body:has(#panel-percakapan.active) #panel-percakapan > .stats6-caps,
body:has(#panel-percakapan.active) #panel-percakapan > .inbox-stats{flex:none}
body:has(#panel-percakapan.active) #panel-percakapan .inbox{
flex:1;min-height:0;height:auto;
}
body:has(#panel-percakapan.active) #panel-percakapan .panel-head{margin:2px 0 10px}
body:has(#panel-percakapan.active) #panel-percakapan .shift-banner{padding:10px 14px;margin-bottom:9px;border-radius:14px}
body:has(#panel-percakapan.active) #panel-percakapan .shift-banner .sb-t{font-size:15px}
body:has(#panel-percakapan.active) #panel-percakapan .shift-banner .sb-d{font-size:12.5px;line-height:1.45;margin-top:2px}
body:has(#panel-percakapan.active) #panel-percakapan .numtabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
body:has(#panel-percakapan.active) #panel-percakapan .numtabs::-webkit-scrollbar{display:none}
body:has(#panel-percakapan.active) #panel-percakapan .numtab{flex:none;min-height:38px;padding:6px 12px;font-size:12.5px}
body:has(#panel-percakapan.active) #panel-percakapan .inbox-stats{margin:0 0 10px}
body:has(#panel-percakapan.active) #panel-percakapan .inbox-stats .istat{padding:7px 12px;border-radius:14px}
body:has(#panel-percakapan.active) #panel-percakapan .inbox-stats .istat-n{font-size:17px}
}
/* Mode padat untuk jendela pendek (laptop <=1000px tinggi): tanpa
ini, pada layar 1440x900 tumpukan kepala utas + kartu katalog +
komposer Sampel A melampaui ruang yang tersedia dan tombol
Kirim terpotong. Area tulis dipendekkan, baris alat dipaksa
satu baris (petunjuk Dita disembunyikan), dan bantalan
diperkecil — secukupnya agar semua muat; layar tinggi
(>=1001px, termasuk 3440x1440) tidak terpengaruh. */
@media (min-width:701px) and (max-height:1000px){
body:has(#panel-percakapan.active) #liveReplyInput{max-height:120px !important;min-height:56px !important}
body:has(#panel-percakapan.active) #inboxComposer > div{padding:10px 14px !important}
body:has(#panel-percakapan.active) #panel-percakapan .ai-draft-bar{flex-wrap:nowrap;margin-top:8px !important}
body:has(#panel-percakapan.active) #panel-percakapan .ai-draft-hint{display:none}
body:has(#panel-percakapan.active) #inboxRekBar{padding:8px 14px 0 !important}
body:has(#panel-percakapan.active) #panel-percakapan .inbox-main-head{padding-top:8px;padding-bottom:8px}
}
/* ===== Popup Rincian Kuota AI — Material 3 Expressive (26 Okt 2026) ===== */
.kq-card{width:100%;max-width:920px;max-height:88vh;overflow-y:auto;background:var(--surface);border-radius:28px;box-shadow:0 24px 70px rgba(0,0,0,.45);color:var(--ink)}
.kq-layout{display:block}
.kq-groups{display:grid;grid-template-columns:1fr 1fr;gap:6px 30px;align-items:start}
.kq-hero-meter{display:flex;align-items:center;gap:24px;margin-top:16px}
.kq-hero-meter .kq-big{margin-top:0;flex:none}
.kq-hero-side{flex:1;min-width:0}
.kq-hero-side .kq-bar{margin-top:0}
.kq-hero-side .kq-chips{margin-top:12px}
@media (max-width:820px){.kq-groups{grid-template-columns:1fr}.kq-hero-meter{flex-direction:column;align-items:stretch;gap:12px}}
.kq-hero{background:linear-gradient(135deg,#0891B2 0%,#2563EB 55%,#7C3AED 100%);color:#fff;padding:22px 24px 20px}
.kq-hero-top{display:flex;justify-content:space-between;align-items:flex-start}
.kq-hero-ic{width:52px;height:52px;border-radius:18px;background:rgba(255,255,255,.2);display:grid;place-items:center;font-size:27px}
.kq-x{width:36px;height:36px;border:none;border-radius:50%;background:rgba(255,255,255,.2);color:#fff;font-size:17px;cursor:pointer;line-height:1}
.kq-hero h3{font-family:"Sora","Plus Jakarta Sans",sans-serif;font-size:22px;font-weight:800;margin:14px 0 2px;color:#fff}
.kq-hero-sub{margin:0;font-size:12.5px;color:rgba(255,255,255,.82)}
.kq-big{display:flex;align-items:baseline;gap:9px;margin-top:16px}
.kq-big-num{font-family:"Sora",sans-serif;font-size:46px;font-weight:800;line-height:1}
.kq-big-dari{font-size:13.5px;color:rgba(255,255,255,.88)}
.kq-bar{height:13px;border-radius:99px;background:rgba(255,255,255,.28);margin-top:10px;overflow:hidden}
.kq-bar i{display:block;height:100%;border-radius:99px;background:#fff;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.kq-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.kq-chip{background:rgba(255,255,255,.18);color:#fff;font-size:12px;font-weight:600;padding:6px 12px;border-radius:99px}
.kq-body{padding:20px 24px 22px}
.kq-sec{display:flex;align-items:center;gap:10px;margin:4px 0 6px}
.kq-sec-chip{font-size:11px;font-weight:800;letter-spacing:.07em;padding:5px 11px;border-radius:99px}
.kq-sec-chip-a{background:color-mix(in srgb,#7C3AED 14%, transparent);color:#7C3AED}
.kq-sec-chip-b{background:color-mix(in srgb,#64748B 16%, transparent);color:var(--ink-2)}
.kq-sec-note{font-size:12px;color:var(--ink-3)}
.kq-row{display:flex;gap:13px;align-items:center;padding:11px 2px;border-bottom:1px solid var(--line)}
.kq-row:last-child{border-bottom:none}
.kq-ic{width:42px;height:42px;flex:none;border-radius:14px;display:grid;place-items:center;font-size:19px;background:color-mix(in srgb,var(--kq-c) 15%, transparent)}
.kq-row-main{flex:1;min-width:0}
.kq-row-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.kq-row-label{font-weight:700;font-size:14.5px}
.kq-row-count{font-family:"Sora",sans-serif;font-weight:800;font-size:15.5px;white-space:nowrap}
.kq-row-count small{font-family:"Plus Jakarta Sans",sans-serif;font-weight:600;font-size:12px;color:var(--ink-3)}
.kq-mini{height:7px;border-radius:99px;background:color-mix(in srgb,var(--kq-c) 15%, transparent);margin-top:7px;overflow:hidden}
.kq-mini i{display:block;height:100%;border-radius:99px;background:var(--kq-c);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.kq-note{background:var(--surface-3);border:1px solid var(--line);border-radius:18px;padding:13px 15px;font-size:12.5px;color:var(--ink-2);margin-top:16px;line-height:1.55}
.kq-foot{display:flex;justify-content:flex-end;margin-top:18px}
.kq-btn{border:none;cursor:pointer;background:linear-gradient(135deg,#0891B2,#7C3AED);color:#fff;font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:14px;padding:12px 30px;border-radius:99px;box-shadow:0 8px 20px rgba(8,145,178,.35)}
.kq-load{padding:38px 24px;text-align:center;color:var(--ink-2);font-size:13.5px}
/* Pemolesan landscape popup kuota: chip seksi satu baris, hitungan sejajar baris pertama label */
.kq-sec{flex-wrap:wrap;row-gap:4px}
.kq-sec-chip{white-space:nowrap}
.kq-row-top{align-items:flex-start}
.kq-row-count{padding-top:1px}
/* Chip kuota satu baris + titik status berdenyut (27 Okt, arahan Bos) */
.kq-chips{flex-wrap:nowrap}
.kq-chip{white-space:nowrap;display:inline-flex;align-items:center;gap:7px}
.kq-dot{width:9px;height:9px;flex:none;border-radius:50%;background:#4ADE80;animation:kqPulse 2.2s ease-in-out infinite}
.kq-dot-off{width:9px;height:9px;flex:none;border-radius:50%;background:#CBD5E1}
@keyframes kqPulse{0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,.55);opacity:1}50%{box-shadow:0 0 0 6px rgba(74,222,128,0);opacity:.6}}
@media (max-width:820px){.kq-chips{flex-wrap:wrap}}
/* Meter kuota: label di atas bar, maksimum di ujung garis, nilai di dalam bar (27 Okt, arahan Bos) */
.kq-meter-head{display:flex;justify-content:space-between;align-items:baseline;margin-top:18px;font-size:13px;color:rgba(255,255,255,.88)}
.kq-meter-max{font-family:"Sora",sans-serif;font-weight:800;font-size:16px;color:#fff}
.kq-bar{position:relative;height:10px}
.kq-meter-val{font-family:"Sora",sans-serif;font-weight:800;color:#fff}
.kq-bar-tag{position:absolute;left:6px;top:50%;transform:translateY(-50%);background:#fff;color:#4338CA;font-family:"Sora",sans-serif;font-weight:800;font-size:12.5px;padding:3px 11px;border-radius:99px;box-shadow:0 2px 8px rgba(0,0,0,.18);white-space:nowrap}
/* Legenda patokan bar rincian kuota (Opsi 3, 27 Okt) */
.kq-legend{background:var(--surface-3);border:1px solid var(--line);border-radius:14px;padding:10px 14px;font-size:12.5px;color:var(--ink-2);margin-bottom:14px;line-height:1.55}
/* Operasional Marketing — Material 3 Expressive (27 Okt 2026, permintaan Bos):
ubin statistik memakai wadah tonal peran warna M3 (primary/secondary/
tertiary/error + sun), radius ekstra besar, keping ikon jenuh, dan
gerak pegas khas Expressive. Pasangan warna gelap mengikuti skema M3. */
.ops-toolbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:16px; }
.ops-tgl { font-size:13px; color:var(--ink-2); display:flex; align-items:center; gap:8px; font-weight:600; }
.ops-tgl input { padding:8px 14px; border:1.5px solid var(--line); border-radius:999px; background:var(--surface); color:var(--ink); font:inherit; font-size:13px; }
.ops-toolbar .btn { border-radius:999px; background:#E8DEF8; color:#1D192B; border:none; font-weight:700; padding:9px 18px; transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .2s; }
.ops-toolbar .btn:hover { transform:translateY(-1px) scale(1.03); box-shadow:0 4px 14px rgba(103,80,164,.25); }
.ops-diperbarui { font-size:12px; color:var(--ink-3); }
.ops-tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-top:18px; }
.ops-tile { border-radius:28px; padding:18px 20px 16px; display:flex; flex-direction:column; gap:3px; position:relative; overflow:hidden; transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .25s; }
.ops-tile:hover { transform:translateY(-3px) scale(1.015); box-shadow:0 10px 24px rgba(29,27,32,.16); }
.ops-tile-ikon { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:18px; margin-bottom:8px; }
.ops-tile-val { font-size:27px; font-weight:800; line-height:1.1; font-family:"Sora",sans-serif; }
.ops-tile-label { font-size:12px; font-weight:600; opacity:.75; }
.ops-tile-sub { font-size:11px; font-weight:600; opacity:.65; }
.ops-durasi { font-size:12px; color:var(--ink-3); margin:-6px 0 10px; font-weight:600; }
.ops-durasi-blok { font-size:12.5px; color:var(--ink-2); font-weight:700; margin:0 0 12px; }
.ops-ket-durasi { font-size:12.5px; color:var(--ink-2); font-weight:700; }
.ops-tone-primary { background:#EADDFF; color:#21005D; }
.ops-tone-primary .ops-tile-ikon { background:#6750A4; }
.ops-tone-secondary { background:#E8DEF8; color:#1D192B; }
.ops-tone-secondary .ops-tile-ikon { background:#625B71; }
.ops-tone-tertiary { background:#FFD8E4; color:#31111D; }
.ops-tone-tertiary .ops-tile-ikon { background:#7D5260; }
.ops-tone-error { background:#F9DEDC; color:#410E0B; }
.ops-tone-error .ops-tile-ikon { background:#BA1A1A; }
.ops-tone-sun { background:#FFEFB2; color:#3A3000; }
.ops-tone-sun .ops-tile-ikon { background:#8A6D00; }
.ops-tone-success { background:#C6E8CE; color:#0B3D20; }
.ops-tone-success .ops-tile-ikon { background:#1B7A43; }
.ops-tile-sub { font-size:11.5px; opacity:.72; font-weight:600; }
.ops-tile-ikon { filter:drop-shadow(0 2px 5px rgba(0,0,0,.25)); }
@media (prefers-color-scheme: dark) {
.ops-toolbar .btn { background:#4A4458; color:#E8DEF8; }
.ops-tone-primary { background:#4F378B; color:#EADDFF; }
.ops-tone-primary .ops-tile-ikon { background:#D0BCFF; }
.ops-tone-secondary { background:#4A4458; color:#E8DEF8; }
.ops-tone-secondary .ops-tile-ikon { background:#CCC2DC; }
.ops-tone-tertiary { background:#633B48; color:#FFD8E4; }
.ops-tone-tertiary .ops-tile-ikon { background:#EFB8C8; }
.ops-tone-error { background:#8C1D18; color:#F9DEDC; }
.ops-tone-error .ops-tile-ikon { background:#F2B8B5; }
.ops-tone-sun { background:#5A4A00; color:#FFEFB2; }
.ops-tone-sun .ops-tile-ikon { background:#E7C948; }
.ops-tone-success { background:#14522D; color:#C6E8CE; }
.ops-tone-success .ops-tile-ikon { background:#7BD88F; }
}
.ops-card { margin-top:18px; padding:22px; border-radius:28px; border:1px solid var(--line); }
.ops-card h3 { font-size:15.5px; font-weight:800; color:var(--ink); margin-bottom:12px; font-family:"Sora",sans-serif; display:flex; align-items:center; gap:10px; }
.ops-card h3::before { content:""; width:10px; height:26px; border-radius:999px; background:#6750A4; flex:none; }
.ops-card + .ops-card h3::before { background:#7D5260; }
.ops-note { font-size:12.5px; color:var(--ink-3); margin-bottom:10px; line-height:1.5; }
.ops-muat { font-size:13px; color:var(--ink-3); padding:10px 0; }
.ops-tablewrap { overflow-x:auto; border-radius:18px; }
.ops-table { width:100%; border-collapse:collapse; font-size:13.5px; }
.ops-table th { text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-3); padding:9px 12px; border-bottom:1.5px solid var(--line); white-space:nowrap; }
.ops-table td { padding:11px 12px; border-bottom:1px solid var(--line); color:var(--ink); vertical-align:top; font-variant-numeric:tabular-nums; }
.ops-table tbody tr { transition:background .2s; }
.ops-table tbody tr:hover { background:rgba(103,80,164,.06); }
.ops-sub { display:block; font-size:12px; color:var(--ink-3); margin-top:2px; }
.ops-table td.ops-gantung-aktif { color:#BA1A1A; font-weight:800; }
.ops-foot { font-size:12px; color:var(--ink-3); line-height:1.55; margin-top:16px; max-width:900px; }
/* Angka menggantung bisa diklik + panel daftar utas (27 Okt 2026) */
.ops-gantung-btn { background:#F9DEDC; color:#BA1A1A; border:none; font:inherit; font-weight:800; border-radius:999px; padding:3px 14px; cursor:pointer; transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .2s; }
.ops-gantung-btn:hover { transform:scale(1.12); box-shadow:0 3px 10px rgba(186,26,26,.3); }
@media (prefers-color-scheme: dark) { .ops-gantung-btn { background:#8C1D18; color:#F9DEDC; } }
.ops-gantung-panel { margin-top:18px; padding:20px 22px; border-radius:28px; border:1.5px solid #F9DEDC; }
.ops-gantung-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
.ops-gantung-head h3 { font-size:15px; font-weight:800; color:var(--ink); font-family:"Sora",sans-serif; }
.ops-gantung-row { display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%; text-align:left; background:transparent; border:none; border-bottom:1px solid var(--line); padding:11px 10px; cursor:pointer; font:inherit; color:var(--ink); transition:background .2s; border-radius:14px; }
.ops-gantung-row:hover { background:rgba(186,26,26,.05); }
.ops-gantung-row-main { display:flex; flex-direction:column; gap:2px; min-width:0; }
.ops-gantung-row-sub { font-size:12px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:640px; }
.ops-gantung-chip { flex:none; background:#F9DEDC; color:#BA1A1A; font-size:11.5px; font-weight:700; border-radius:999px; padding:3px 10px; }
@media (prefers-color-scheme: dark) { .ops-gantung-chip { background:#8C1D18; color:#F9DEDC; } .ops-gantung-panel { border-color:#8C1D18; } }
/* Popup daftar chat menggantung (M3 Expressive, 27 Okt 2026) */
.ogm-card { background:var(--surface); width:min(880px,94vw); max-height:86vh; display:flex; flex-direction:column; border-radius:28px; overflow:hidden; box-shadow:0 24px 70px rgba(20,10,60,.35); animation:ogmMasuk .38s cubic-bezier(.34,1.56,.64,1); }
@keyframes ogmMasuk { from { transform:scale(.92) translateY(16px); opacity:0; } to { transform:none; opacity:1; } }
.ogm-hero { background:linear-gradient(115deg,#F9DEDC 0%,#FFD8E4 55%,#EADDFF 100%); padding:20px 24px; display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.ogm-hero h3 { font-family:"Sora",sans-serif; font-size:19px; font-weight:800; color:#410E0B; }
.ogm-hero p { font-size:13px; color:#7A2E35; margin-top:4px; }
.ogm-x { flex:none; width:36px; height:36px; border-radius:50%; border:none; background:rgba(255,255,255,.65); color:#410E0B; font-size:15px; cursor:pointer; transition:transform .25s cubic-bezier(.34,1.56,.64,1); }
.ogm-x:hover { background:#fff; transform:scale(1.1); }
.ogm-isi { overflow-y:auto; padding:10px 14px 16px; }
@media (prefers-color-scheme: dark) {
.ogm-hero { background:linear-gradient(115deg,#5A1A14,#4A2436 55%,#3A2A5A); }
.ogm-hero h3 { color:#FFE9E6; } .ogm-hero p { color:#F3C6C0; }
.ogm-x { background:rgba(255,255,255,.14); color:#FFE9E6; }
}
/* Ikon bantuan "?" pada kartu Operasional + popup penjelasannya (27 Okt 2026) */
.ops-help { position:absolute; top:10px; right:12px; width:26px; height:26px; border-radius:0; border:none; background:transparent; box-shadow:none; color:#8B84A8; opacity:.75; font-size:16.5px; font-weight:700; font-family:"Sora",sans-serif; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:color .2s, opacity .2s; z-index:2; }
.ops-help:hover { color:#6750A4; opacity:1; background:transparent; }
@media (prefers-color-scheme: dark) { .ops-help { color:#9C95BC; } .ops-help:hover { color:#CDBFF5; background:transparent; } }
.obm-card { width:min(1120px,96vw); }
.obm-hero { background:linear-gradient(115deg,#EADDFF 0%,#E8DEF8 55%,#FFD8E4 100%); }
.obm-hero h3 { color:#21005D !important; }
.obm-hero p { color:#4A3A7A !important; }
.obm-isi { overflow-y:auto; padding:20px 26px 24px; column-count:2; column-gap:38px; }
.obm-isi p { break-inside:avoid; }
.obm-isi h4 { break-after:avoid; }
.ops-wawasan-periode { margin:2px 0 10px; }
.ops-wawasan-seg { display:inline-flex; background:var(--lav,#EDE9FD); border-radius:999px; padding:3px; gap:2px; }
.ops-wawasan-segbtn { border:none; background:transparent; padding:6px 14px; border-radius:999px; font-family:"Sora",sans-serif; font-size:13px; font-weight:600; color:var(--ink-2); cursor:pointer; }
.ops-wawasan-segbtn.aktif { background:var(--pine,#6750A4); color:#fff; }
.obm-isi ul { margin:2px 0 12px; padding-left:20px; }
.obm-isi li { font-size:14.5px; line-height:1.6; color:var(--ink-2); margin:4px 0; break-inside:avoid; }
.obm-isi li::marker { color:var(--pine,#6750A4); font-weight:700; }
@media (max-width: 760px) { .obm-isi { column-count:1; } }
.obm-isi h4 { font-family:"Sora",sans-serif; font-size:13px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--pine,#6750A4); margin:16px 0 5px; }
.obm-isi h4:first-child { margin-top:0; }
.obm-isi p { font-size:14.5px; line-height:1.65; color:var(--ink-2); }
@media (prefers-color-scheme: dark) {
.obm-hero { background:linear-gradient(115deg,#3A2A5A,#33284E 55%,#4A2436); }
.obm-hero h3 { color:#EFE7FF !important; } .obm-hero p { color:#CDBEF2 !important; }
}
/* ===== Operasional Tahap 2: Pola Beban & Keadilan (27 Okt 2026) ===== */
.ops-pola-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:30px 0 14px; flex-wrap:wrap; }
.ops-pola-judul { font-family:"Sora",sans-serif; font-size:19px; font-weight:800; color:var(--ink); display:flex; align-items:center; gap:10px; }
.ops-tahap-chip { background:#EADDFF; color:#21005D; font-size:11px; font-weight:800; letter-spacing:.5px; padding:3px 10px; border-radius:999px; text-transform:uppercase; }
@media (prefers-color-scheme: dark) { .ops-tahap-chip { background:#4A3A7A; color:#EFE7FF; } }
.ops-periode { display:flex; background:var(--lav,#EDE9FD); border-radius:999px; padding:4px; gap:4px; }
.ops-periode-btn { border:none; background:transparent; font:inherit; font-size:13.5px; font-weight:700; color:var(--ink-2); padding:7px 18px; border-radius:999px; cursor:pointer; transition:all .25s; }
.ops-periode-btn.aktif { background:#6750A4; color:#fff; box-shadow:0 3px 10px rgba(103,80,164,.35); }
.ops-legenda { display:flex; align-items:center; gap:20px; font-size:13px; font-weight:600; color:var(--ink-2); margin-bottom:8px; flex-wrap:wrap; }
.ops-legenda .lg { display:inline-block; width:12px; height:12px; border-radius:4px; margin-right:7px; vertical-align:-1px; }
.lg-masuk { background:#6750A4; } .lg-keluar { background:#B7A8E8; }
.ops-legenda-total { margin-left:auto; color:var(--ink-3); font-weight:600; }
.ops-tren { display:flex; gap:6px; align-items:stretch; height:200px; padding-top:6px; }
.ops-tren-kol { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; min-width:0; }
.ops-tren-nilai { font-size:11.5px; font-weight:800; color:var(--ink); height:15px; }
.ops-tren-batang { flex:1; display:flex; align-items:flex-end; justify-content:center; gap:2.5px; width:100%; }
.ops-tren-batang i { display:block; width:38%; max-width:17px; border-radius:6px 6px 3px 3px; }
.ops-tren-batang .b-masuk { background:#6750A4; }
.ops-tren-batang .b-keluar { background:#B7A8E8; }
.ops-tren-tgl { font-size:10.5px; color:var(--ink-3); font-weight:600; }
.ops-tren-utas { font-size:10px; color:var(--ink-3); }
.ops-jam { display:flex; flex-direction:column; gap:3px; }
.ops-jam-baris { display:grid; grid-template-columns:44px repeat(24, 1fr); gap:3px; align-items:center; }
.ops-jam-hari { font-size:11.5px; font-weight:700; color:var(--ink-2); }
.ops-jam-sel { aspect-ratio:1.25; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; border-radius:6px; background:rgba(103,80,164,.05); color:var(--ink-3); }
.ops-jam-kepala { background:transparent; aspect-ratio:auto; height:14px; font-size:9.5px; }
.ops-split { display:flex; gap:14px; flex-wrap:wrap; }
.ops-split-blok { flex:1; min-width:170px; background:var(--lav,#EDE9FD); border-radius:20px; padding:16px 18px; display:flex; flex-direction:column; gap:4px; }
.ops-split-blok.utama { background:#EADDFF; }
@media (prefers-color-scheme: dark) { .ops-split-blok { background:#2A2440; } .ops-split-blok.utama { background:#3A2A5A; } }
.ops-split-label { font-size:12.5px; font-weight:700; color:var(--ink-2); }
.ops-split-val { font-family:"Sora",sans-serif; font-size:27px; font-weight:800; color:var(--ink); }
.ops-adil { display:flex; align-items:center; gap:10px; min-width:170px; }
.ops-adil-bar { position:relative; flex:1; height:12px; border-radius:99px; background:#EDE9FD; }
.ops-adil-bar i { display:block; height:100%; border-radius:99px; background:#6750A4; }
.ops-adil-bar em { position:absolute; top:-3px; width:2.5px; height:18px; background:#B42318; border-radius:2px; }
.ops-adil-persen { font-weight:800; font-size:13px; color:var(--ink); min-width:44px; }
/* Ikon "?" pada kartu berisi tabel/grafik (pendamping ubin, 27 Okt 2026) */
.ops-card { position:relative; }
.ops-card > .ops-help { top:14px; right:14px; }
/* ===== Operasional Tahap 3: Wawasan Wira (27 Okt 2026) ===== */
.ops-wawasan { margin-bottom:22px; background:linear-gradient(160deg, rgba(234,221,255,.45), rgba(255,216,228,.30) 55%, var(--surface) 100%); }
.ops-wawasan-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:13px; color:var(--ink-2); font-weight:600; margin-bottom:8px; }
.ops-wawasan-aksi { display:flex; align-items:center; gap:9px; }
.ops-wawasan-aksi select { font:inherit; font-size:13px; font-weight:600; color:var(--ink); background:var(--lav,#EDE9FD); border:none; border-radius:999px; padding:7px 12px; cursor:pointer; }
.ops-btn-tonal { border:none; background:#6750A4; color:#fff; font:inherit; font-size:13px; font-weight:700; padding:8px 16px; border-radius:999px; cursor:pointer; transition:all .2s; }
.ops-btn-tonal:hover { background:#5A439A; }
.ops-btn-tonal:disabled { opacity:.55; cursor:wait; }
.ops-wawasan-narasi h4 { font-family:"Sora",sans-serif; font-size:14.5px; font-weight:800; color:var(--ink); margin:15px 0 5px; }
.ops-wawasan-narasi h4:first-child { margin-top:4px; }
.ops-wawasan-narasi p { font-size:14.5px; line-height:1.65; color:var(--ink-2); margin:0 0 8px; max-width:900px; }
.ops-wawasan-li { padding-left:18px; position:relative; }
.ops-wawasan-li::before { content:"•"; position:absolute; left:2px; color:#6750A4; font-weight:800; }
.ops-wawasan-tabelwrap { overflow-x:auto; margin:6px 0 12px; }
.ops-wawasan-tabel { border-collapse:collapse; width:100%; font-size:13px; }
.ops-wawasan-tabel th, .ops-wawasan-tabel td { border:1px solid var(--line); padding:6px 9px; text-align:left; }
.ops-wawasan-tabel th { background:var(--lav,#EDE9FD); font-weight:700; color:var(--ink); }
/* Wawasan Varian B: pratinjau memudar (keputusan Bos 27 Okt 2026) */
.ops-wawasan-pratinjau { position:relative; max-height:118px; overflow:hidden; transition:max-height .5s ease; }
.ops-wawasan-pratinjau.buka { max-height:2400px; }
.ops-wawasan-pratinjau::after { content:""; position:absolute; left:0; right:0; bottom:0; height:58px; background:linear-gradient(transparent, #FAF5FD); pointer-events:none; }
.ops-wawasan-pratinjau.buka::after { display:none; }
@media (prefers-color-scheme: dark) { .ops-wawasan-pratinjau::after { background:linear-gradient(transparent, #241F38); } }
.ops-wawasan-barisbawah { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px; flex-wrap:wrap; }
.ops-wawasan-kaki { font-size:12px; color:var(--ink-3); }
.ops-btn-pucat { border:none; background:var(--lav,#EDE9FD); color:var(--ink); font:inherit; font-size:13px; font-weight:700; padding:8px 16px; border-radius:999px; cursor:pointer; }
.ops-btn-pucat:hover { background:#EADDFF; }
@media (prefers-color-scheme: dark) { .ops-btn-pucat { background:#3A3358; color:#E6E1FA; } }
.ops-wawasan-ava { width:27px; height:27px; border-radius:50%; object-fit:cover; vertical-align:-7px; margin-right:3px; }
.rek-gudang-chip { display:inline-block; font-size:11.5px; font-weight:700; color:#8A6D00; background:#FFEFB2; padding:4px 10px; border-radius:999px; white-space:nowrap; }
@media (prefers-color-scheme: dark) { .rek-gudang-chip { background:#4A3D00; color:#FFE98A; } }
.rev-gudang { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:8px; background:#FFF7DB; border:1px solid #F0DFA0; border-radius:10px; padding:8px 12px; font-size:12.5px; color:var(--ink-2); }
.rev-gudang b { color:var(--ink); }
@media (prefers-color-scheme: dark) { .rev-gudang { background:#37300A; border-color:#5A4D12; } }
/* Bilah satu baris Katalog & Konten (27 Okt 2026): tab kiri, aksi
kanan, Panduan paling kanan. Bila ruang sempit, Panduan menyusut
menjadi kapsul bulat "?" warna Material 3. */
.kat-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:nowrap; border-bottom:1px solid var(--line); margin:16px 0 20px; padding-bottom:10px; overflow-x:auto; scrollbar-width:none; }
.kat-toolbar::-webkit-scrollbar { display:none; }
.kat-tabs { display:flex; gap:8px; flex:none; align-items:center; }
.kat-actions { display:flex; gap:8px; flex:none; align-items:center; margin-left:auto; }
.kat-panduan { display:flex; align-items:center; gap:6px; border:1px solid var(--line); }
.kat-panduan-tanya { font-weight:800; color:#8B84A8; font-family:"Sora",sans-serif; }
@media (max-width: 1500px) {
.kat-toolbar { gap:6px; }
.kat-tabs, .kat-actions { gap:6px; }
.kat-tabs .btn, .kat-actions .btn { padding-left:11px; padding-right:11px; font-size:13px; }
.kat-panduan { width:38px; height:38px; min-width:38px; border-radius:50%; padding:0; justify-content:center; background:#E8DEF8; border:none; }
.kat-panduan-teks { display:none; }
.kat-panduan-tanya { color:#4A4458; font-size:17px; }
}
@media (prefers-color-scheme: dark) and (max-width: 1500px) {
.kat-panduan { background:#4A4458; }
.kat-panduan-tanya { color:#E8DEF8; }
}
/* ===== Kartu Antrean Tinjauan — Varian B Ekspresif Tenang (27 Okt 2026) ===== */
.rev-card-b { background:var(--surface); border:1px solid var(--line); border-left:7px solid #F9A825; border-radius:26px 26px 26px 10px; box-shadow:0 3px 12px rgba(29,27,32,.06); }
.rev-b-atas { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:10px; margin-bottom:4px; }
.rev-b-chip { background:#FFF3C4; color:#7A5B00; font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px; }
.rev-b-aksi { display:flex; gap:6px; flex-wrap:wrap; }
.rev-b-aksi .btn { border-radius:12px; font-weight:700; border:none; }
.rev-b-terima { background:#D3E8CD; color:#14532D; }
.rev-b-terima.nonaktif { background:var(--surface-sunken); color:var(--ink-3); cursor:not-allowed; }
.rev-b-ubah { background:#EDE7F6; color:#4F378B; }
.rev-b-tolak { background:transparent; color:var(--red); }
.rev-b-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:10px; background:var(--surface-sunken); padding:12px 16px; border-radius:16px; font-size:13px; margin:12px 0 10px; }
.rev-b-grid small { display:block; font-size:11px; color:var(--ink-3); font-weight:600; margin-bottom:2px; }
.rev-conf-chip { font-size:11px; background:var(--surface); padding:3px 9px; border-radius:999px; border:1px solid var(--line); font-weight:600; }
.rev-gudang { background:#F1F8E9; border:none; border-radius:14px; color:#33691E; padding:10px 14px; }
.rev-gudang b { color:#1B3A0E; }
.rev-gudang-btn { background:#33691E !important; color:#fff !important; border:none !important; border-radius:999px !important; font-weight:700; margin-left:auto; }
/* ===== Tinjauan Massal Antrean (4 Nov 2026) ===== */
.revbulk-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.revbulk-hitung { font-size:12.5px; color:var(--ink-2); font-weight:700; }
.revbulk-bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; background:var(--surface); border:1.5px solid #33691E; border-radius:14px; padding:10px 14px; margin-bottom:12px; font-size:13px; color:var(--ink); }
.revbulk-btn-gudang { background:#33691E; color:#fff; border:none; border-radius:999px; font-weight:700; }
.revbulk-check { width:18px; height:18px; accent-color:#33691E; cursor:pointer; flex:none; margin:0; }
.rev-card-b.revbulk-dipilih { outline:2px solid #33691E; outline-offset:-2px; }
.revbulk-baris { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:7px 10px; border:1px solid var(--line); border-radius:8px; margin-bottom:6px; font-size:12.5px; color:var(--ink); }
.revbulk-risk { color:var(--amber); font-weight:700; white-space:nowrap; }
.revbulk-skip { font-size:12.5px; color:var(--ink-2); margin-top:10px; }
@media (prefers-color-scheme: dark) {
.revbulk-bar { border-color:#AED581; }
.rev-card-b.revbulk-dipilih { outline-color:#AED581; }
.revbulk-check { accent-color:#AED581; }
}
@media (prefers-color-scheme: dark) {
.rev-gudang { background:#1E3312; color:#AED581; }
.rev-gudang b { color:#DCEDC8; }
.rev-b-chip { background:#4A3800; color:#FFD54F; }
.rev-b-terima { background:#1B4332; color:#A7D7A0; }
.rev-b-ubah { background:#372B4D; color:#CDBCF2; }
}
/* Dropdown saring Material 3 Expressive (27 Okt 2026): pil, panah
chevron berjarak lega dari tepi kanan, fokus ungu lembut. */
.select-m3 { appearance:none; -webkit-appearance:none; background-color:var(--surface); border:1.5px solid var(--line); border-radius:999px; padding:10px 42px 10px 16px; font-family:"Plus Jakarta Sans",sans-serif; font-size:13.5px; font-weight:600; color:var(--ink); cursor:pointer; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:right 16px center; background-size:12px 8px; transition:border-color .15s, box-shadow .15s; }
.select-m3:hover { border-color:#6750A4; }
.select-m3:focus { outline:none; border-color:#6750A4; box-shadow:0 0 0 3px rgba(103,80,164,.18); }
/* ===== Lead & Penawaran: grid kartu (27 Okt 2026) =====
1 kolom di HP, 2 kolom di layar sedang, 3 kolom di layar lebar.
Kotak scroll internal (max-height 560px) DIHAPUS malam 27 Okt atas
keluhan Bos: scroll di dalam kotak membingungkan (scroll terasa
berhenti karena yang bergerak kotaknya, bukan halaman). Daftar kini
mengalir mengikuti halaman; dokumen penawaran dibuka lewat popup
dari tombol di kartu lead, seksi Penawaran Terbit terpisah ditiadakan. */
.lead-grid { display:grid; grid-template-columns:1fr; gap:10px; align-items:stretch; padding:4px; }
@media (min-width:700px) { .lead-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:1200px) { .lead-grid { grid-template-columns:repeat(3, minmax(0,1fr)); } }
.lead-grid-card { background:var(--surface); border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow); padding:18px 20px 14px; min-width:0; display:flex; flex-direction:column; gap:10px; height:100%; }
.lead-grid-kosong { grid-column:1 / -1; font-size:13px; color:var(--ink-3); padding:10px 2px; }
/* Kartu lega (mockup disetujui Bos 27 Okt 17.27): hierarki judul Sora,
subjudul tebal, meta abu, pil status tonal, kotak item + SKU menonjol. */
.lg2-head { display:flex; align-items:flex-start; gap:12px; min-width:0; }
.lg2-ava { width:46px; height:46px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-family:"Sora",sans-serif; font-weight:800; font-size:17px; }
.lg2-ava-a { background:#EADDFF; color:#21005D; }
.lg2-ava-b { background:#FFD8E4; color:#5B1130; }
.lg2-ava-c { background:#FFEFB2; color:#6D5A00; }
.lg2-ava-d { background:#E8DEF8; color:#21005D; }
.lg2-headmain { flex:1; min-width:0; }
.lg2-title { font-family:"Sora",sans-serif; font-size:17px; font-weight:800; line-height:1.25; color:var(--ink); overflow-wrap:break-word; }
.lg2-nomor { font-family:"Sora",sans-serif; font-size:17.5px; font-weight:800; letter-spacing:.01em; color:var(--ink); overflow-wrap:break-word; }
.lg2-sub { font-size:13.5px; font-weight:700; color:var(--ink-2); margin-top:2px; overflow-wrap:break-word; }
.lg2-meta { font-size:12.5px; font-weight:500; color:var(--ink-3); margin-top:3px; line-height:1.45; }
.lg2-tgl { font-size:12.5px; font-weight:600; color:var(--ink-3); white-space:nowrap; padding-top:3px; flex:none; }
.lg2-pill { flex:none; font-size:11.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:6px 12px; border-radius:999px; white-space:nowrap; }
.lg2-pill-success { background:#C6E8CE; color:#0B5228; }
.lg2-pill-error { background:#F9DEDC; color:#8C1D18; }
.lg2-pill-sun { background:#FFEFB2; color:#6D5A00; }
.lg2-pill-secondary { background:#E8DEF8; color:#21005D; }
.lg2-pill-netral { background:#E7E4F0; color:var(--ink-2); }
.lg2-quote { background:var(--surface-3); border-radius:14px; padding:11px 13px; font-size:13.5px; line-height:1.5; color:var(--ink-2); font-style:italic; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; box-sizing:border-box; height:63px; flex:none; }
.lg2-stat { font-size:13px; color:var(--ink-2); display:flex; gap:7px; align-items:center; flex-wrap:wrap; min-height:58px; }
/* Kelompok bawah kartu (pemilih status + tombol aksi) menempel ke
dasar supaya kartu sebaris sejajar (perintah Bos 27 Okt 19.49). */
.lg2-dorong { margin-top:auto; }
.lg2-stat b { color:var(--ink); font-weight:800; }
/* Tombol Penawaran Terbit di kartu lead -> membuka popup per lead
(konsep disetujui Bos 27 Okt 19.22, menggantikan baris statis). */
.btn-penawaran { display:flex; align-items:center; gap:9px; width:100%; text-align:left; background:#E8DEF8; border:1.6px solid #C9B8F0; border-radius:14px; padding:11px 13px; font-family:inherit; cursor:pointer; }
.btn-penawaran:hover { background:#DFD2F7; }
.btn-penawaran .bp-ikon { font-size:16px; }
.btn-penawaran .bp-teks { flex:1; font-size:13px; color:#21005D; line-height:1.4; }
.btn-penawaran .bp-teks b { font-weight:800; }
.btn-penawaran .bp-panah { font-size:17px; font-weight:800; color:#6750A4; }
.lead-popup-isi { display:flex; flex-direction:column; gap:12px; }
.lead-popup-isi .lead-grid-card { box-shadow:none; }
/* Kepala popup LENGKET bergaya Material 3 Expressive (perintah Bos
27 Okt 19.44): wadah menjadi kolom fleksibel, kepala (judul +
subjudul + tombol silang) tidak ikut bergeser saat badan popup
di-scroll, sehingga popup bisa ditutup kapan saja. Latar kepala
gradasi tonal dengan garis bawah berwarna. */
.dlg-flex { max-width:640px; max-height:88vh; display:flex; flex-direction:column; overflow:hidden; padding:0; }
.dlg-head-m3 { flex:none; display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:20px 24px 15px; background:linear-gradient(120deg,#EADDFF 0%,#E8DEF8 55%,#FFD8E4 135%); border-bottom:2px solid #C9B8F0; }
.dlg-head-m3 h3 { margin:0; font-family:"Sora",sans-serif; font-size:18px; font-weight:800; color:#21005D; }
.dlg-head-m3 p { margin:4px 0 0; font-size:12.5px; font-weight:600; color:#4A4458; }
.dlg-x-m3 { flex:none; width:36px; height:36px; border-radius:50%; border:1.6px solid rgba(33,0,93,.18); background:rgba(255,255,255,.65); color:#21005D; font-size:15px; cursor:pointer; line-height:1; }
.dlg-x-m3:hover { background:#fff; }
.dlg-body-m3 { overflow-y:auto; padding:16px 24px 22px; }
/* Funnel Penjualan (27 Okt 2026 malam): batang tahap snapshot;
lebar relatif terhadap tahap terbanyak, klik membuka popup daftar. */
.funnel-row { display:block; width:100%; text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:13px 16px; cursor:pointer; font-family:inherit; box-shadow:var(--shadow); }
.funnel-row:hover { border-color:#C9B8F0; }
.funnel-bar-head { display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
.funnel-bar-nama { font-family:"Sora",sans-serif; font-weight:800; font-size:15px; color:var(--ink); }
.funnel-bar-angka { font-size:13px; color:var(--ink-2); font-weight:700; white-space:nowrap; }
.funnel-track { height:14px; border-radius:99px; background:var(--surface-3); margin-top:8px; overflow:hidden; }
.funnel-fill { height:100%; border-radius:99px; transition:width .4s ease; }
.funnel-bar-sub { font-size:12.5px; color:var(--ink-3); margin-top:6px; font-weight:600; }
.lg2-strip { border-radius:14px; padding:11px 14px; font-size:12.8px; line-height:1.5; font-weight:600; }
.lg2-strip-lock { background:#FBF1F0; color:#7A2A24; }
.lg2-strip-umur { background:#FFF8DC; color:#7A5B00; }
.lg2-strip-netral { background:var(--surface-3); color:var(--ink-2); }
.lg2-items { display:flex; flex-direction:column; gap:11px; background:var(--surface-3); border-radius:16px; padding:14px 16px; }
.lg2-itemrow { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.lg2-itemnama { font-size:14px; font-weight:700; line-height:1.4; color:var(--ink); }
.lg2-sku { display:inline-block; font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:11.5px; font-weight:700; background:#E9E5F5; color:#21005D; border-radius:7px; padding:2.5px 8px; margin-top:4px; letter-spacing:.02em; }
.lg2-itemhitung { font-size:12.5px; font-weight:600; color:var(--ink-3); margin-top:3px; }
.lg2-itemjumlah { font-size:14px; font-weight:800; white-space:nowrap; padding-top:1px; color:var(--ink); }
.lg2-totalrow { display:flex; justify-content:space-between; align-items:center; border-top:1.6px dashed #D8D3E8; padding-top:11px; }
.lg2-totallabel { font-size:12.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.lg2-totalnilai { font-family:"Sora",sans-serif; font-size:19px; font-weight:800; color:#6750A4; }
.lead-grid-card .select-m3 { width:100%; }
.lg2-actions { display:flex; gap:9px; flex-wrap:wrap; }
.lg2-actions .btn { flex:1 1 auto; justify-content:center; white-space:nowrap; font-size:12.5px; padding:10px 8px; }
.lg2-btn-tonal { background:#E8DEF8; color:#21005D; border:1.6px solid transparent; }
.lg2-btn-outline { background:var(--surface); color:#21005D; border:1.6px solid #CFC9E0; }
.lg2-btn-filled { background:#6750A4; color:#fff; border:1.6px solid transparent; }
.lg2-btn-ghost { background:transparent; color:var(--ink-2); border:1.6px solid transparent; }
@media (prefers-color-scheme: dark) {
.btn-penawaran { background:#4A4458; border-color:#6E6390; }
.btn-penawaran:hover { background:#554C6E; }
.btn-penawaran .bp-teks { color:#E8DEF8; }
.btn-penawaran .bp-panah { color:#D0BCFF; }
.dlg-head-m3 { background:linear-gradient(120deg,#3A2E5C 0%,#4F378B 60%,#633B48 135%); border-bottom-color:#6750A4; }
.dlg-head-m3 h3 { color:#EADDFF; }
.dlg-head-m3 p { color:#CAC4D0; }
.dlg-x-m3 { background:rgba(255,255,255,.08); border-color:rgba(234,221,255,.35); color:#EADDFF; }
.dlg-x-m3:hover { background:rgba(255,255,255,.16); }
.lg2-ava-a { background:#4F378B; color:#EADDFF; }
.lg2-ava-b { background:#633B48; color:#FFD8E4; }
.lg2-ava-c { background:#5A4A00; color:#FFEFB2; }
.lg2-ava-d { background:#4A4458; color:#E8DEF8; }
.lg2-pill-success { background:#14522D; color:#C6E8CE; }
.lg2-pill-error { background:#8C1D18; color:#F9DEDC; }
.lg2-pill-sun { background:#5A4A00; color:#FFEFB2; }
.lg2-pill-secondary { background:#4A4458; color:#E8DEF8; }
.lg2-pill-netral { background:#2A2A33; color:var(--ink-2); }
.lg2-sku { background:#2C2560; color:#D5CFFF; }
.lg2-strip-lock { background:#3A1D1A; color:#F2B8B5; }
.lg2-strip-umur { background:#372B12; color:#E7C948; }
.lg2-btn-tonal { background:#4A4458; color:#E8DEF8; }
.lg2-btn-outline { background:transparent; border-color:#4A4458; color:#E8DEF8; }
.lg2-btn-filled { background:#D0BCFF; color:#21005D; }
.lg2-totalnilai { color:#D0BCFF; }
.lg2-totalrow { border-top-color:#3A3650; }
}
/* ===== Rekomendasi Varian A (keputusan Bos 27 Okt 2026 20.47–20.48):
kapsul kecil dengan BORDER MENYALA TIPIS kemerahan bergaya ambient
Gemini (gradasi conic berputar pelan + pijar luar lembut), supaya
tim sadar ada rekomendasi produk baru di utas yang dibuka. Popup
landscape M3 menampung maksimal 4 produk. ===== */
@property --pil-sudut { syntax: ''; initial-value: 0deg; inherits: false; }
.pil-rek {
position: relative;
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 15px; border-radius: 999px; cursor: pointer;
font-family: inherit; font-size: 13px; font-weight: 700; color: var(--ink);
border: 1.5px solid transparent;
background:
linear-gradient(var(--surface), var(--surface)) padding-box,
conic-gradient(from var(--pil-sudut), #f44336, #ff7043, #ec407a, #f9ab00, #f44336) border-box;
box-shadow: 0 0 0 1px rgba(244,67,54,.06), 0 3px 14px rgba(244,67,54,.30), 0 2px 7px rgba(236,64,122,.20);
animation: pilPutar 5.5s linear infinite, pilPijar 2.8s ease-in-out infinite alternate;
}
.pil-rek:hover { transform: translateY(-1px); }
.pil-rek .lencana { background: #FFD54F; color: #5D4037; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 1px 8px; }
@keyframes pilPutar { to { --pil-sudut: 360deg; } }
@keyframes pilPijar {
from { box-shadow: 0 0 0 1px rgba(244,67,54,.05), 0 3px 11px rgba(244,67,54,.22), 0 2px 6px rgba(236,64,122,.15); }
to { box-shadow: 0 0 0 1px rgba(244,67,54,.09), 0 4px 19px rgba(244,67,54,.40), 0 3px 10px rgba(236,64,122,.27); }
}
@media (prefers-reduced-motion: reduce) { .pil-rek { animation: none; } }
.rek-pop-box {
max-width: 1140px; padding: 0; overflow: hidden; border: none; border-radius: 28px;
max-height: 88vh; display: flex; flex-direction: column;
}
.rek-pop-hero {
background: linear-gradient(100deg, #3E2A7A, #6750A4 55%, #8B6FD8); color: #fff;
padding: 18px 24px; display: flex; align-items: center; gap: 14px; flex: none;
}
.rek-pop-ikon { width: 44px; height: 44px; border-radius: 14px; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; font-size: 22px; flex: none; }
.rek-pop-hero h3 { font-size: 17px; font-family: "Sora", sans-serif; }
.rek-pop-hero p { font-size: 12px; opacity: .87; margin-top: 2px; }
.rek-pop-x { margin-left: auto; background: rgba(255,255,255,.16); color: #fff; border: none; width: 34px; height: 34px; border-radius: 50%; font-size: 15px; cursor: pointer; flex: none; }
.rek-pop-x:hover { background: rgba(255,255,255,.28); }
.rek-pop-isi {
padding: 18px 20px 8px; display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
gap: 14px; background: var(--surface-sunken); overflow-y: auto;
}
.rek-pop-kartu { background: var(--surface); border: 1.5px solid var(--line); border-radius: 20px; padding: 14px; display: flex; flex-direction: column; gap: 7px; }
.rek-pop-kartu .huruf { width: 38px; height: 38px; border-radius: 12px; background: var(--surface-3); color: var(--ink-2); display: flex; align-items: center; justify-content: center; font-weight: 800; }
.rek-pop-kartu b.nama { font-size: 13px; line-height: 1.35; color: var(--ink); }
.rek-pop-kartu .sku { font-size: 11px; color: var(--ink-3); font-family: monospace; }
.rek-pop-kartu .keping { align-self: flex-start; background: #E3F3E5; color: #256029; font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.rek-pop-kartu .harga { font-size: 15.5px; font-weight: 800; color: var(--pine); }
.rek-pop-kartu .aksi { margin-top: auto; display: flex; gap: 6px; flex-wrap: wrap; padding-top: 4px; }
.rek-pop-kartu .aksi button { border: none; border-radius: 999px; padding: 7px 12px; font-size: 11.5px; font-weight: 700; cursor: pointer; font-family: inherit; }
.rek-a-utama { background: #D3E8CD; color: #14532D; }
.rek-a-ungu { background: #EDE7F6; color: #4F378B; }
.rek-a-netral { background: transparent; color: #B3261E; }
.rek-pop-kaki { padding: 10px 20px 16px; background: var(--surface-sunken); display: flex; justify-content: flex-end; flex: none; }
@media (prefers-color-scheme: dark) {
.rek-pop-kartu .keping { background: #1E4620; color: #A5D6A7; }
.rek-a-utama { background: #2E4A2A; color: #C5E1B8; }
.rek-a-ungu { background: #3A2E5C; color: #D0BCFF; }
.rek-a-netral { color: #F2B8B5; }
}
/* ===== Mode Fokus Varian A: rel ikon + laci melayang + chip jam (28 Okt 2026) ===== */
.jam-chip{display:inline-flex;align-items:center;gap:6px;background:#E9F7EE;color:#0B6B47;font-weight:700;font-size:12.5px;padding:4px 12px;border-radius:999px;white-space:nowrap}
.rail-toggle{display:none}
@media (min-width:901px){
body.rel-mode{--sidebar-w:68px}
body.rel-mode .content{max-width:1760px}
body.rel-mode .topbar-in{max-width:1760px}
body.rel-mode .sidebar{transition:width .22s ease, box-shadow .22s ease}
body.rel-mode .brand{justify-content:center;padding:16px 0 10px}
body.rel-mode .brand div:not(.brand-mark){display:none}
body.rel-mode .side-scroll{padding:6px 10px 12px}
body.rel-mode .nav-label,body.rel-mode .side-agents-title,body.rel-mode .side-card{display:none}
body.rel-mode .nav-item{justify-content:center;padding:11px 0;position:relative}
body.rel-mode .nav-txt{display:none}
body.rel-mode .nav-badge{position:absolute;top:0;right:0;margin:0;min-width:16px;height:16px;font-size:9.5px;padding:0 4px}
body.rel-mode .side-agents-nav{padding:12px 6px 4px}
body.rel-mode .nav-agent{justify-content:center;padding:6px 0}
body.rel-mode .nav-agent .na-nm,body.rel-mode .nav-agent .na-rl{display:none}
body.rel-mode .nav-agent .na-dot{left:auto;right:5px;top:auto;bottom:3px}
body.rel-mode .side-foot{font-size:0;text-align:center;padding:13px 0}
body.rel-mode .side-foot .dot{margin-right:0}
body.rel-mode .rail-toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:8px auto 4px;border:0;border-radius:13px;background:#FFCA28;color:#3E2723;font-size:19px;font-weight:900;cursor:pointer;flex:none}
body.rel-mode .rail-toggle:hover{background:#FFD54F}
body.rel-mode .jacc-logout-btn{margin:10px auto 14px !important;width:44px;height:44px;padding:0 !important;justify-content:center;border-radius:13px}
body.rel-mode .jacc-logout-btn span{display:none}
/* --- Laci terbuka: sidebar penuh melayang di atas konten --- */
body.rel-mode.laci-terbuka .sidebar{position:fixed;top:0;left:max(0px,calc((100vw - var(--app-max))/2));width:264px;height:100vh;z-index:80;box-shadow:24px 0 48px -12px rgba(6,40,26,.45)}
body.rel-mode.laci-terbuka .brand{justify-content:flex-start;padding:20px 20px 14px}
body.rel-mode.laci-terbuka .brand div:not(.brand-mark){display:block}
body.rel-mode.laci-terbuka .side-scroll{padding:6px 12px 16px}
body.rel-mode.laci-terbuka .nav-label,body.rel-mode.laci-terbuka .side-agents-title{display:block}
body.rel-mode.laci-terbuka .side-card{display:block}
body.rel-mode.laci-terbuka .nav-item{justify-content:flex-start;padding:11px 16px}
/* Label menu = item flex sungguhan yang bisa menyusut & membungkus;
display:inline membuat teks meluber dari kotaknya dan tertutup
lencana (kasus "Radar Operasional" vs lencana "38 item", laporan
Bos 29 Okt 2026). */
body.rel-mode.laci-terbuka .nav-txt{display:block;flex:1 1 auto;min-width:0;overflow-wrap:break-word}
body.rel-mode.laci-terbuka .nav-badge{position:static;flex:none;margin-left:auto;min-width:22px;height:22px;font-size:12px;padding:0 6px}
body.rel-mode.laci-terbuka .side-agents-nav{padding:12px 12px 4px}
body.rel-mode.laci-terbuka .nav-agent{justify-content:flex-start;padding:8px 12px}
body.rel-mode.laci-terbuka .nav-agent .na-nm{display:inline}
body.rel-mode.laci-terbuka .nav-agent .na-rl{display:block}
body.rel-mode.laci-terbuka .nav-agent .na-dot{left:31px;top:27px;right:auto;bottom:auto}
body.rel-mode.laci-terbuka .side-foot{font-size:12px;text-align:left;padding:14px 20px}
body.rel-mode.laci-terbuka .side-foot .dot{margin-right:7px}
body.rel-mode.laci-terbuka .rail-toggle{margin:8px 12px 4px}
body.rel-mode.laci-terbuka .jacc-logout-btn{margin:10px 14px 18px !important;width:auto;height:auto;padding:12px 18px !important;justify-content:flex-start;border-radius:12px}
body.rel-mode.laci-terbuka .jacc-logout-btn span{display:inline}
}
/* ===== Menu Geser: laci menjadi sidebar pendorong di layar lebar (28 Okt 2026, permintaan Bos) =====
Di layar >=1281px menu yang terbuka melebarkan kolom grid sehingga
seluruh konten bergeser utuh dan tidak ada yang tertutup; di layar
yang lebih sempit perilaku lama (laci melayang) dipertahankan.
--sidebar-w didaftarkan lewat @property agar perubahan lebar kolom
bisa dianimasikan; peramban tanpa @property tetap benar geometrinya,
hanya tanpa animasi. */
@property --sidebar-w{syntax:"";inherits:true;initial-value:264px}
@media (min-width:1281px){
body.rel-mode{transition:--sidebar-w .25s ease}
body.rel-mode.laci-terbuka{--sidebar-w:264px}
/* Sidebar tetap sticky setinggi layar (height:100vh dari aturan dasar
dipertahankan): bila tingginya auto, baris grid menyusut mengikuti
isi sidebar (844px) dan konten utama menyisakan ruang kosong di
bawah (laporan Bos 28 Okt 2026). */
body.rel-mode.laci-terbuka .sidebar{position:sticky;left:auto;width:auto;z-index:auto;box-shadow:none}
}
@media (min-width:991px) and (max-width:1200px){
body.rel-mode.laci-terbuka .sidebar{width:216px}
}
@media (min-width:901px){
/* Kolom utama dikunci di kolom grid kedua: saat laci terbuka sidebar
menjadi fixed (keluar dari aliran grid) dan tanpa kunci ini kolom
utama melompat ke kolom pertama selebar rel -> halaman tampak
kosong (perbaikan 28 Okt 2026, laporan Bos). */
body.rel-mode .main{grid-column:2}
/* Tooltip nama menu pada rel ikon (muncul saat kursor di atas ikon) */
#railTip{position:fixed;z-index:300;background:#241547;color:#fff;font-size:12.5px;font-weight:600;line-height:1;padding:8px 12px;border-radius:9px;pointer-events:none;white-space:nowrap;box-shadow:0 10px 24px rgba(20,8,60,.35);opacity:0;transform:translateY(-50%) scale(.96);transition:opacity .13s ease,transform .13s ease}
#railTip.tampil{opacity:1;transform:translateY(-50%) scale(1)}
}
/* === Paket Lega (keputusan Bos 28 Okt 2026): Mode Fokus Chat + lebar penuh ===
Tombol "Fokus Chat" di halaman Percakapan menyembunyikan topbar dan
mengubah kapsul saringan menjadi satu baris ramping (tetap bisa diklik);
keadaan tersimpan per perangkat. Lebar aplikasi dilonggarkan di atas. */
.numtabs-row{display:flex;gap:8px;align-items:flex-start;padding-right:44px}
.numtabs-row .numtabs{flex:1;min-width:0}
.btn-fokus-chat{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:6px 14px;border-radius:99px;border:1.5px solid #5B4BC4;background:#fff;color:#5B4BC4;font-weight:800;font-size:12.5px;cursor:pointer;font-family:inherit}
.btn-fokus-chat:hover{background:#EFE9FD}
.btn-fokus-chat.aktif{background:#5B4BC4;color:#fff}
/* Penanda Uji Sinkron di tab nomor + tombol Tes Terima (29 Okt 2026) */
.uji-mini{display:inline-flex;align-items:center;font-size:10.5px;font-weight:800;line-height:1;padding:3px 7px;border-radius:99px;white-space:nowrap}
.uji-ok{color:#1B7A43;background:#DFF5E6}
.uji-buruk{color:#9C1C1C;background:#F9DEDC}
.uji-netral{color:#475569;background:#E2E8F0}
.uji-proses{color:#7A5B00;background:#FDEEC3}
.btn-tes-nomor{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:6px 14px;border-radius:99px;border:1.5px solid #0E7C66;background:#fff;color:#0E7C66;font-weight:800;font-size:12.5px;cursor:pointer;font-family:inherit}
.btn-tes-nomor:hover{background:#E2F4EF}
.status-tes-nomor{flex:none;align-self:center;display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2,#4A4458);max-width:320px}
.status-tes-nomor:empty{display:none}
.sts-x{flex:none;width:20px;height:20px;border-radius:99px;border:1px solid var(--line,#E3DEF2);background:#fff;color:var(--ink-2,#4A4458);font-size:11px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;font-family:inherit}
.sts-x:hover{background:#F3F0FF}
.laci-tes{display:flex;width:100%;align-items:center;justify-content:center;gap:6px;margin-top:10px;min-height:42px;padding:8px 14px;border-radius:12px;border:1.5px solid #0E7C66;background:#fff;color:#0E7C66;font-weight:800;font-size:13px;cursor:pointer;font-family:inherit}
.laci-tes:hover{background:#E2F4EF}
#statusTesNomorLaci{margin-top:8px;max-width:none;display:flex;justify-content:center}
#statusTesNomorLaci:empty{display:none}
@media (max-width:900px){.btn-tes-nomor{display:none}.status-tes-nomor#statusTesNomor{display:none}}
body.fokus-chat .topbar{display:none}
body.fokus-chat .content{padding-top:10px}
body.fokus-chat .stats6-caps{display:none}
body.fokus-chat #inboxStats{grid-template-columns:repeat(6,1fr);gap:8px;margin:2px 0 10px}
body.fokus-chat #inboxStats .istat{padding:6px 12px;border-radius:99px;gap:8px}
body.fokus-chat #inboxStats .istat-ic{font-size:15px}
body.fokus-chat #inboxStats .istat>div{display:flex;align-items:baseline;gap:6px}
body.fokus-chat #inboxStats .istat-n{font-size:15px}
body.fokus-chat #inboxStats .istat-l{font-size:11.5px;white-space:nowrap}
/* Tombol tampilkan semua di dasar daftar Semua Nomor (batas gambar 200) */
.ivv-lainnya{justify-content:center;text-align:center;font-weight:800;color:#5B4BC4;border-style:dashed;cursor:pointer}
/* ===== Panel Order & Pengiriman: PRATINJAU berlabel (29 Okt 2026, pilihan Bos) =====
Halaman menampilkan rancangan modul dengan data contoh; mesin order
belum dibangun. Semua kelas berawalan ordp- agar terisolasi. */
.ordp-banner{display:flex;gap:12px;align-items:flex-start;background:#FFF6DE;border:1.5px solid #E8B93B;border-radius:16px;padding:16px 18px;margin-top:16px}
.ordp-banner p{margin:0;font-size:13.5px;line-height:1.55;color:#6D4C00}
.ordp-tag{flex:none;background:#D97706;color:#fff;font-size:11px;font-weight:800;letter-spacing:.05em;padding:5px 11px;border-radius:99px;margin-top:1px}
.ordp-tag-kecil{font-size:10px;padding:3px 9px;background:#8A6100}
.ordp-alur{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin-top:14px}
.ordp-langkah{background:#EFE9FB;color:#4A2E8F;font-size:12.5px;font-weight:700;padding:6px 12px;border-radius:99px;white-space:nowrap}
.ordp-panah{color:var(--ink-3);font-weight:700}
.ordp-catatan{flex-basis:100%;font-size:12.5px;color:var(--ink-2);margin-top:2px}
.ordp-ubin{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:14px}
.ordp-ubin-item{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.ordp-ubin-item b{display:block;font-size:22px;line-height:1.1;color:var(--ink)}
.ordp-ubin-item span{font-size:12px;color:var(--ink-2)}
.ordp-kartu{padding:18px 20px;margin-top:14px}
.ordp-kepala{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.ordp-kepala h3{margin:0;font-size:15px}
.ordp-tabel-bungkus{overflow-x:auto}
.ordp-tabel{width:100%;border-collapse:collapse;font-size:13px}
.ordp-tabel th{text-align:left;padding:8px 10px;border-bottom:2px solid var(--line);color:var(--ink-2);font-size:12px;white-space:nowrap}
.ordp-tabel td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.45}
.ordp-tabel td small{color:var(--ink-3)}
.ordp-chip{display:inline-block;padding:3px 9px;border-radius:99px;font-size:11.5px;font-weight:700;white-space:nowrap}
.ordp-chip-hijau{background:#E3F4E5;color:#1B6B35}
.ordp-chip-kuning{background:#FFF3CD;color:#8A6100}
.ordp-chip-biru{background:#E1ECFD;color:#1D4FB8}
.ordp-chip-abu{background:#ECECF1;color:#5A5A6E}
.ordp-chip-ungu{background:#EFE9FB;color:#5B3FA8;white-space:normal}
.ordp-kartu button[disabled]{opacity:.55;cursor:not-allowed}
.ordp-kaki{font-size:12.5px;color:var(--ink-2);margin:12px 0 0;line-height:1.55}
.ordp-duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:900px){.ordp-duo{grid-template-columns:1fr}}
.ordp-daftar{margin:0;padding-left:18px}
.ordp-daftar li{margin-bottom:8px;font-size:13px;line-height:1.55}
/* ===== Order & Pengiriman Tahap 1 fungsional (4 Nov 2026) ===== */
.ordp-kosong{border:1.5px dashed var(--line);border-radius:12px;padding:14px 10px;text-align:center;font-size:12.5px;color:var(--ink-3);margin:0}
.ordp-order{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px;background:var(--surface)}
.ordp-order:last-child{margin-bottom:0}
.ordp-order-kepala{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:6px}
.ordp-order-kepala b{font-size:14px;margin-right:4px}
.ordp-order-meta{font-size:12.5px;color:var(--ink-2);line-height:1.5;margin-bottom:4px}
.ordp-order-isi{font-size:13px;line-height:1.5;margin-bottom:6px}
.ordp-item-daftar{margin:8px 0}
.ordp-item-baris{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12.5px;padding:5px 0;border-bottom:1px dashed var(--line)}
.ordp-item-baris:last-child{border-bottom:0}
.ordp-item-baris small{color:var(--ink-3)}
.ordp-cek-kapan{display:block;margin-top:4px;color:var(--ink-3);font-size:11.5px}
.ordp-aksi{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ordp-rincian{border-color:var(--orange,#D97706)}
.ordp-log-judul{margin:14px 0 6px;font-size:13.5px}
.ordp-log-baris{font-size:12.5px;line-height:1.55;padding:6px 0;border-bottom:1px dashed var(--line)}
.ordp-log-baris:last-child{border-bottom:0}
.ordp-log-baris small{color:var(--ink-3)}
.ordp-log-catatan{color:var(--ink-2);margin-top:2px}
/* ===== Pratinjau Pipeline Custom DS Steel: papan tahap (29 Okt 2026) ===== */
.ordp-chip-merah{background:#FDE3E3;color:#A11D1D}
.pipe-papan{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;align-items:flex-start}
.pipe-kolom{flex:0 0 232px;background:var(--surface-sunken,#F4F2FA);border:1px solid var(--line);border-radius:14px;padding:10px}
.pipe-kepala{display:flex;align-items:center;justify-content:space-between;margin:2px 2px 10px}
.pipe-kepala b{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2)}
.pipe-kartu{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:8px}
.pipe-kartu b{font-size:13px}
.pipe-kartu small{display:block;color:var(--ink-3);font-size:11.5px;margin:1px 0 4px}
.pipe-kartu p{margin:0 0 8px;font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.pipe-meta{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:11.5px;color:var(--ink-3);margin-bottom:8px}
.pipe-bar{height:6px;border-radius:99px;background:#E7E4F2;overflow:hidden;margin-bottom:8px}
.pipe-bar span{display:block;height:100%;background:#6C4BD8;border-radius:99px}
.pipe-kosong{border:1.5px dashed var(--line);border-radius:12px;padding:14px 10px;text-align:center;font-size:12px;color:var(--ink-3);margin:0}
.pipe-kartu button[disabled]{opacity:.55;cursor:not-allowed}
/* Autosuggest SKU gudang pada form katalog (31 Okt 2026) */
.sku-status{margin-top:6px;font-size:12px;line-height:1.45;padding:6px 9px;border-radius:8px;border:1px solid var(--line);color:var(--ink-3)}
.sku-status.ok{border-color:color-mix(in srgb,var(--pine-ink) 35%,transparent);background:color-mix(in srgb,var(--pine-ink) 8%,transparent);color:var(--pine-ink)}
.sku-status.warn{border-color:color-mix(in srgb,var(--amber) 35%,transparent);background:var(--amber-soft);color:var(--amber)}
.sku-saran{margin-top:6px;border:1px solid var(--line);border-radius:10px;background:var(--surface,#fff);box-shadow:0 10px 28px rgba(20,30,25,.14);overflow-x:hidden;overflow-y:auto;max-height:264px}
.sku-saran-item{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;text-align:left;padding:8px 11px;border:0;border-bottom:1px solid var(--line);background:transparent;cursor:pointer;font-size:12.5px;color:var(--ink)}
.sku-saran-item:last-child{border-bottom:0}
.sku-saran-item:hover{background:var(--surface-sunken)}
.sku-saran-item .kiri{min-width:0}
.sku-saran-item .sku{font-weight:700}
.sku-saran-item .nama{display:block;color:var(--ink-3);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:330px}
.sku-saran-item .stok{white-space:nowrap;font-weight:600}
/* ===== Surat Jalan (Order Tahap 2, 4 Nov 2026) =====
Area cetak tersembunyi di layar; saat mencetak (kelas pencetak surat jalan
pada body), hanya area surat jalan ini yang tampil. */
@media print {
body.mencetak-sj > *:not(.sj-cetak) { display: none !important; }
body.mencetak-sj .sj-cetak { display: block !important; }
.sj-cetak { font-family: Arial, Helvetica, sans-serif; color: #000; padding: 8mm; }
.sj-kepala { border-bottom: 3px double #000; padding-bottom: 10px; margin-bottom: 14px; display: flex; justify-content: space-between; align-items: flex-end; }
.sj-nama { font-size: 22px; font-weight: 800; letter-spacing: .5px; }
.sj-judul { font-size: 18px; font-weight: 700; letter-spacing: 2px; }
.sj-meta { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-bottom: 14px; }
.sj-meta td { padding: 2.5px 6px 2.5px 0; vertical-align: top; }
.sj-meta td:nth-child(odd) { width: 110px; color: #333; }
.sj-item { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.sj-item th, .sj-item td { border: 1px solid #000; padding: 6px 8px; text-align: left; }
.sj-item th { background: #eee; }
.sj-item td span { color: #444; font-size: 11.5px; }
.sj-catatan { font-size: 12px; margin: 14px 0 22px; }
.sj-ttd { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.sj-ttd td { width: 33%; vertical-align: top; }
}
/* ===== Kartu Kerja Pipeline Custom (4 Nov 2026 malam) =====
Pola sama dengan Surat Jalan: area cetak tersembunyi di layar;
saat mencetak (kelas pencetak kartu kerja pada body), hanya
area kartu kerja ini yang tampil. */
@media print {
body.mencetak-kk > *:not(.kk-cetak) { display: none !important; }
body.mencetak-kk .kk-cetak { display: block !important; }
.kk-cetak { font-family: Arial, Helvetica, sans-serif; color: #000; padding: 8mm; }
.kk-kepala { border-bottom: 3px double #000; padding-bottom: 10px; margin-bottom: 14px; display: flex; justify-content: space-between; align-items: flex-end; }
.kk-nama { font-size: 22px; font-weight: 800; letter-spacing: .5px; }
.kk-judul { font-size: 16px; font-weight: 700; letter-spacing: 1.5px; }
.kk-meta { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-bottom: 12px; }
.kk-meta td { padding: 2.5px 6px 2.5px 0; vertical-align: top; }
.kk-meta td:nth-child(odd) { width: 110px; color: #333; }
.kk-deskripsi { font-size: 12.5px; margin: 0 0 12px; line-height: 1.5; }
.kk-subjudul { font-size: 13px; font-weight: 700; margin: 14px 0 6px; text-transform: uppercase; letter-spacing: .4px; }
.kk-tabel { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.kk-tabel th, .kk-tabel td { border: 1px solid #000; padding: 6px 8px; text-align: left; }
.kk-tabel th { background: #eee; }
.kk-tabel td span { color: #444; font-size: 11.5px; }
.kk-cek { display: inline-block; width: 14px; height: 14px; border: 1.5px solid #000; line-height: 13px; font-size: 12px; text-align: center; vertical-align: middle; }
.kk-lampiran { font-size: 12px; margin: 12px 0 0; }
.kk-garis { border-bottom: 1px solid #999; height: 26px; }
.kk-ttd { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 20px; }
.kk-ttd td { width: 33%; vertical-align: top; }
.kk-kaki { font-size: 11px; color: #444; margin: 16px 0 0; }
}