:root{--blue:#2563eb;--blue2:#1d4ed8;--bg:#f4f7fb;--text:#172033;--muted:#718096;--border:#e5eaf2;--green:#16a34a;--yellow:#d97706;--red:#dc2626;--white:#fff;--shadow:0 8px 28px rgba(31,48,78,.08)}*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}button,input,textarea,select{font:inherit}.app-shell{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh}.sidebar{background:#0d1b35;color:#fff;padding:22px 14px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}.sidebar-brand{display:flex;align-items:center;gap:11px;padding:0 8px 24px}.sidebar-brand div:last-child{display:flex;flex-direction:column}.sidebar-brand span,.sidebar-footer span{font-size:12px;color:#9aaccc}.brand-mark{width:54px;height:54px;border-radius:18px;background:linear-gradient(135deg,#3b82f6,#1d4ed8);display:grid;place-items:center;color:#fff;font-size:20px;font-weight:900;box-shadow:0 10px 25px rgba(37,99,235,.3);margin:0 auto 18px}.small-mark{width:40px;height:40px;border-radius:13px;font-size:15px;margin:0}.sidebar nav{display:flex;flex-direction:column;gap:5px}.sidebar nav a{color:#b9c5dc;text-decoration:none;padding:11px 12px;border-radius:10px;display:flex;align-items:center;gap:11px;font-size:14px}.sidebar nav a:hover,.sidebar nav a.active{background:#1b2c4c;color:#fff}.sidebar nav a span{font-size:17px}.nav-badge{margin-left:auto;background:#ef4444;color:#fff;border-radius:20px;padding:2px 7px;font-size:11px}.sidebar-footer{margin-top:auto;border-top:1px solid rgba(255,255,255,.1);padding:17px 5px 0;display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:9px}.sidebar-footer .avatar{width:36px;height:36px}.sidebar-footer div:nth-child(2){display:flex;flex-direction:column;font-size:13px}.sidebar-footer a{color:#fff;text-decoration:none;font-size:20px}.main-content{min-width:0;padding:25px 28px 40px}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.topbar h1{margin:0;font-size:25px}.topbar p{margin:5px 0 0;color:var(--muted);font-size:13px}.panel{background:#fff;border:1px solid var(--border);border-radius:15px;box-shadow:var(--shadow)}.panel-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--border)}.panel-head h2,.form-panel h2,.panel>h2{margin:0 0 4px;font-size:17px}.panel-head p{margin:0;color:var(--muted);font-size:12px}.btn{border:0;border-radius:9px;padding:9px 13px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-weight:700;font-size:13px}.btn.primary{background:var(--blue);color:#fff}.btn.primary:hover{background:var(--blue2)}.btn.ghost{background:#f3f6fb;color:#3e4b64}.btn.warning{background:#fff4df;color:#9a5b00}.btn.success{background:#e9f9ee;color:#087a31}.btn.full{width:100%}.icon-btn{width:36px;height:36px;padding:0;font-size:21px}.stats-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-bottom:18px}.stat-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:17px;display:flex;align-items:center;gap:13px;box-shadow:var(--shadow)}.stat-card>span{width:42px;height:42px;border-radius:12px;background:#eef4ff;display:grid;place-items:center;font-size:20px}.stat-card div{display:flex;flex-direction:column}.stat-card b{font-size:23px}.stat-card small{color:var(--muted)}.dashboard-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:18px}.simple-list a{display:grid;grid-template-columns:42px 1fr auto;gap:11px;align-items:center;padding:12px 22px;text-decoration:none;color:var(--text);border-bottom:1px solid #f0f2f6}.simple-list a:last-child{border:0}.simple-list a>div:nth-child(2){display:flex;flex-direction:column}.simple-list span,.simple-list time{color:var(--muted);font-size:12px}.avatar{width:40px;height:40px;border-radius:50%;background:#e9effa;color:#31558e;display:grid;place-items:center;font-weight:800;flex-shrink:0}.urgent-avatar{background:#ffe9e9;color:#c52a2a}.status-list{padding:12px 20px}.status-list>div{display:grid;grid-template-columns:15px 1fr auto;align-items:center;padding:12px 0;border-bottom:1px solid #f0f2f6;font-size:13px}.status-list>div:last-child{border:0}.status-list small{color:var(--muted)}.dot{width:9px;height:9px;border-radius:50%}.dot.green{background:#22c55e}.dot.yellow{background:#f59e0b}.guide-panel{margin-top:18px;padding:22px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(110deg,#fff,#eef5ff)}.guide-panel h2{margin:0 0 5px;font-size:18px}.guide-panel p{margin:0;color:var(--muted);font-size:13px;max-width:820px}.alert{padding:12px 15px;border-radius:10px;margin-bottom:17px;font-size:13px}.alert.success{background:#eaf8ef;color:#0b7532}.alert.danger{background:#ffebeb;color:#9e2020}.chat-layout{display:grid;grid-template-columns:300px minmax(420px,1fr) 255px;gap:12px;height:calc(100vh - 116px)}.conversation-list,.chat-panel,.customer-panel{overflow:hidden;min-height:0}.conversation-list{display:flex;flex-direction:column}.conversation-list-head{padding:16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border)}.conversation-list-head h2{margin:0;font-size:17px}.conversation-list-head small{color:var(--muted)}.conversation-search{padding:10px;border-bottom:1px solid var(--border)}.conversation-search input{width:100%;border:1px solid var(--border);background:#f8fafc;border-radius:9px;padding:9px}.conversation-items{overflow:auto}.conversation-item{position:relative;display:flex;gap:10px;padding:12px 13px;text-decoration:none;color:var(--text);border-bottom:1px solid #f0f2f6}.conversation-item:hover,.conversation-item.selected{background:#f0f6ff}.conv-copy{min-width:0;flex:1}.conv-copy>div{display:flex;justify-content:space-between;gap:5px}.conv-copy strong{font-size:13px}.conv-copy time{font-size:10px;color:var(--muted)}.conv-copy p{margin:4px 0 0;color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden}.category-pill{display:inline-block;font-size:9px;padding:3px 6px;border-radius:20px;background:#eaf1ff;color:#245bb0}.ai-dot{position:absolute;right:10px;bottom:11px;width:7px;height:7px;border-radius:50%;background:#22c55e}.chat-panel{display:flex;flex-direction:column}.chat-head{padding:13px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border)}.large-avatar{width:43px;height:43px}.chat-head h2{font-size:15px;margin:0}.chat-head p{font-size:11px;color:var(--muted);margin:3px 0 0}.chat-actions{margin-left:auto;display:flex;gap:7px}.chat-actions form{margin:0}.chat-status-bar{padding:7px 16px;display:flex;gap:7px;background:#fafbfc;border-bottom:1px solid var(--border)}.status-chip{display:inline-block;padding:4px 8px;border-radius:20px;background:#eef1f6;color:#5c6678;font-size:10px}.status-chip.online{background:#e7f9ec;color:#11813c}.status-chip.manual{background:#fff4db;color:#9e6600}.status-chip.urgent{background:#ffe8e8;color:#c22626}.messages{flex:1;overflow:auto;padding:18px;background:#f7f9fc}.message-row{display:flex;margin-bottom:12px}.message-row.customer{justify-content:flex-start}.message-row.ai,.message-row.admin{justify-content:flex-end}.message-bubble{max-width:78%;padding:10px 12px;border-radius:13px;background:#fff;border:1px solid var(--border);box-shadow:0 3px 12px rgba(20,35,60,.04)}.message-row.ai .message-bubble{background:#eaf3ff;border-color:#d6e7ff}.message-row.admin .message-bubble{background:#e9f9ef;border-color:#d4f0dd}.message-meta{display:flex;gap:15px;justify-content:space-between;align-items:center;margin-bottom:5px}.message-meta strong{font-size:11px}.message-meta time{font-size:9px;color:var(--muted)}.message-text{font-size:13px;line-height:1.48}.ai-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;padding-top:7px;border-top:1px solid rgba(40,90,150,.13);font-size:9px;color:#6e7c90}.risk-hijau{color:#13823f!important}.risk-kuning{color:#a46700!important}.risk-merah{color:#c72525!important}.link-btn{border:0;background:none;padding:0;color:var(--blue);cursor:pointer;font-size:11px;font-weight:700}.danger-text{color:var(--red)}.composer-tabs{display:flex;gap:4px;padding:7px 13px 0;border-top:1px solid var(--border)}.composer-tabs button{border:0;background:none;color:var(--muted);padding:6px 8px;font-size:10px;cursor:pointer;border-bottom:2px solid transparent}.composer-tabs button.active{color:var(--blue);border-color:var(--blue)}.composer{display:flex;gap:8px;padding:9px 13px 13px}.composer textarea{resize:none;flex:1;border:1px solid var(--border);border-radius:10px;padding:10px;outline:0}.composer textarea:focus{border-color:#93b4f7;box-shadow:0 0 0 3px #edf3ff}.customer-panel{padding:18px}.customer-panel h3{margin:0 0 18px;font-size:14px}.profile-big{text-align:center;display:flex;flex-direction:column;align-items:center}.huge-avatar{width:64px;height:64px;font-size:23px;margin-bottom:9px}.profile-big span{font-size:11px;color:var(--muted);margin-top:3px}.detail-list{margin:20px 0}.detail-list div{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #f0f2f6;font-size:11px}.detail-list dt{color:var(--muted)}.detail-list dd{margin:0;font-weight:700;text-align:right}.admin-note{margin-top:15px;padding:12px;border-radius:10px;background:#fff8e9;font-size:10px;color:#71521a}.admin-note p{margin:4px 0 0;line-height:1.5}.empty-state{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--muted);text-align:center;padding:30px}.empty-state>span{font-size:44px}.empty-state h2{color:var(--text);font-size:18px;margin:8px 0 3px}.empty-state p{font-size:12px}.empty-state.compact{min-height:250px}.two-column,.settings-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,.75fr);gap:18px}.form-panel{padding:22px}.stack{display:flex;flex-direction:column;gap:13px}.stack label{font-size:12px;font-weight:700;display:flex;flex-direction:column;gap:6px}.stack input,.stack textarea,.stack select{border:1px solid var(--border);border-radius:9px;padding:10px;background:#fff;outline:0}.stack input:focus,.stack textarea:focus,.stack select:focus{border-color:#8db0f1;box-shadow:0 0 0 3px #edf3ff}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:12px}th{text-align:left;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.04em;background:#fafbfc}th,td{padding:12px 15px;border-bottom:1px solid var(--border);vertical-align:middle}td strong,td small{display:block}td small{color:var(--muted);margin-top:3px}.stock{display:inline-grid;place-items:center;min-width:29px;height:24px;padding:0 6px;border-radius:8px;background:#e9f9ee;color:#16813d;font-weight:800}.stock.empty{background:#ffecec;color:#c42c2c}.count-badge{background:#edf3ff;color:#315fa5;border-radius:20px;padding:5px 9px;font-size:11px}.knowledge-list{padding:8px 18px}.knowledge-list article{padding:15px 2px;border-bottom:1px solid var(--border)}.knowledge-list article:last-child{border:0}.knowledge-list h3{font-size:13px;margin:8px 0 5px}.knowledge-list p{font-size:12px;line-height:1.5;margin:0 0 6px}.knowledge-list small{color:var(--muted)}.knowledge-list form{float:right}.correction-list{padding:8px 20px}.correction-list article{padding:15px 0;border-bottom:1px solid var(--border)}.correction-head{display:flex;justify-content:space-between;font-size:12px}.correction-head time{color:var(--muted);font-size:10px}.compare{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0}.compare>div{padding:11px;background:#f7f9fc;border-radius:9px}.compare>div:last-child{background:#edf9f1}.compare span{font-size:9px;text-transform:uppercase;color:var(--muted);font-weight:800}.compare p{font-size:11px;line-height:1.45;margin:5px 0}.correction-list small{color:var(--muted)}.integration-card{display:flex;gap:12px;padding:15px;background:#f5f8fd;border-radius:12px;margin-top:15px}.integration-card>span{font-size:26px}.integration-card strong{font-size:13px}.integration-card p{font-size:11px;color:var(--muted);line-height:1.5;margin:5px 0}.muted-card{background:#faf8f1}.code-note{margin-top:14px;padding:13px;border:1px dashed #cbd6e8;border-radius:10px;display:flex;flex-direction:column;gap:7px;font-size:11px}.code-note code{background:#13203a;color:#cde1ff;padding:7px;border-radius:6px}.mt{margin-top:25px!important}.modal{position:fixed;inset:0;background:rgba(10,20,40,.5);z-index:30;display:none;align-items:center;justify-content:center;padding:20px}.modal.show{display:flex}.modal-card{width:min(480px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:16px;padding:24px;box-shadow:0 20px 70px rgba(0,0,0,.25);position:relative}.modal-card h2{margin:0 0 16px;font-size:20px}.modal-close{position:absolute;right:15px;top:12px;border:0;background:none;font-size:25px;color:var(--muted);cursor:pointer}.auth-body{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at top,#dceaff,#f6f8fb 55%);padding:20px}.auth-card{width:min(420px,100%);background:#fff;border:1px solid var(--border);border-radius:20px;padding:30px;box-shadow:0 20px 60px rgba(32,55,93,.15)}.auth-card h1{text-align:center;margin:0 0 6px;font-size:22px}.auth-card>.muted{text-align:center}.muted{color:var(--muted)}.small{font-size:11px}.center{text-align:center}.demo-login{background:#f4f7fb;border-radius:10px;padding:12px;margin-top:15px;font-size:12px;line-height:1.7}.install-card{width:min(520px,100%)}code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.mobile-menu{display:none}@media(max-width:1180px){.chat-layout{grid-template-columns:280px minmax(420px,1fr)}.customer-panel{display:none}.stats-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:850px){.app-shell{grid-template-columns:1fr}.sidebar{position:relative;height:auto}.sidebar nav{display:grid;grid-template-columns:repeat(2,1fr)}.sidebar-footer{display:none}.main-content{padding:18px}.chat-layout{height:auto;grid-template-columns:1fr}.conversation-list{max-height:360px}.chat-panel{min-height:650px}.dashboard-grid,.two-column,.settings-grid{grid-template-columns:1fr}.stats-grid{grid-template-columns:repeat(2,1fr)}.guide-panel{align-items:flex-start;gap:15px;flex-direction:column}}@media(max-width:520px){.stats-grid{grid-template-columns:1fr}.sidebar nav{grid-template-columns:1fr 1fr}.topbar h1{font-size:21px}.main-content{padding:13px}.chat-actions .btn{font-size:0}.chat-actions .btn:first-letter{font-size:15px}.message-bubble{max-width:90%}.compare,.form-grid{grid-template-columns:1fr}.panel-head{padding:16px}.guide-panel{padding:17px}}

/* Final V2: realtime dan integrasi */
.unread-badge{min-width:22px;height:22px;border-radius:999px;background:#2563eb;color:#fff;display:grid;place-items:center;font-size:11px;font-weight:800;padding:0 6px}
.delivery-status{display:block;text-align:right;margin-top:6px;color:#64748b;font-size:11px}
.live-toast{position:fixed;right:24px;bottom:24px;z-index:5000;max-width:360px;padding:13px 18px;border-radius:12px;background:#0f172a;color:white;box-shadow:0 18px 45px rgba(15,23,42,.24);opacity:0;transform:translateY(16px);pointer-events:none;transition:.2s ease}
.live-toast.show{opacity:1;transform:translateY(0)}
.live-toast.danger{background:#b91c1c}
.integration-panel hr{border:0;border-top:1px solid #e5e7eb;margin:22px 0}
.switch-line{display:flex!important;align-items:center;gap:10px;padding:11px 13px;border:1px solid #dbe4f0;border-radius:10px;background:#f8fafc;font-weight:700!important}
.switch-line input{width:18px!important;height:18px!important;margin:0}
.integration-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}
.webhook-panel{margin-top:18px}
.guide-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
.guide-steps>div{display:flex;gap:10px;align-items:flex-start;background:#f8fafc;border:1px solid #e5e7eb;border-radius:12px;padding:14px}
.guide-steps b{flex:0 0 28px;height:28px;border-radius:50%;background:#2563eb;color:white;display:grid;place-items:center}
.guide-steps span{line-height:1.5;font-size:13px}
#webhookUrl{word-break:break-all;user-select:all}
.message-text{white-space:pre-wrap}
@media(max-width:900px){.integration-actions,.guide-steps{grid-template-columns:1fr}.live-toast{left:16px;right:16px;bottom:16px;max-width:none}}

/* =========================================================
   Final V2.1 — perbaikan layout responsif dan anti-overflow
   ========================================================= */
html,body{max-width:100%;overflow-x:hidden}
.app-shell,.main-content,.topbar,.panel,.panel-head,.dashboard-grid,.two-column,.settings-grid,.chat-layout,.chat-panel,.conversation-list,.customer-panel,.form-panel,.stack,.form-grid,.integration-actions,.guide-steps{min-width:0;max-width:100%}
.main-content{width:100%;overflow-x:hidden}
.panel{min-width:0}
.two-column>*,.settings-grid>*,.dashboard-grid>*,.stats-grid>*,.form-grid>*,.integration-actions>*,.guide-steps>*{min-width:0;max-width:100%}
form,label{min-width:0;max-width:100%}
input,textarea,select{display:block;width:100%;max-width:100%;min-width:0}
input[type="checkbox"],input[type="radio"]{width:auto;max-width:none}
input,textarea,select,.btn{overflow-wrap:anywhere}
input[type="text"],input[type="password"],input[type="number"],input[type="tel"],input[type="url"],input:not([type]){text-overflow:ellipsis}
textarea{resize:vertical;overflow:auto}
.form-grid{grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
.stack{width:100%}
.stack>*,.stack label>*{max-width:100%}
.btn{max-width:100%;white-space:normal;text-align:center;line-height:1.25}
.panel-head{gap:12px;flex-wrap:wrap}
.panel-head>div,.form-section-head>div{min-width:0;flex:1 1 220px}
.panel-head h2,.panel-head p,.form-section-head h2,.form-section-head p,.topbar h1,.topbar p{overflow-wrap:anywhere}
.topbar{gap:14px;flex-wrap:wrap}
.topbar>div{min-width:0}

/* Produk dan stok */
.product-layout{grid-template-columns:minmax(0,1.45fr) minmax(320px,.8fr);align-items:start}
.product-list-panel,.product-form-panel{width:100%;min-width:0}
.product-form-panel{position:sticky;top:24px}
.product-table{min-width:620px}
.product-table td:first-child{min-width:180px;max-width:320px;white-space:normal;overflow-wrap:anywhere}
.table-wrap{display:block;width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain}
table{max-width:100%}
th,td{overflow-wrap:anywhere}
td form{display:inline-block;max-width:100%}

/* Judul form yang tetap berada di dalam panel */
.form-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 18px;padding:0 0 15px;border-bottom:1px solid var(--border)}
.form-section-head h2{margin:0 0 5px;font-size:17px}
.form-section-head p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
.form-section-head.with-status{align-items:center}
.form-section-head .status-chip{flex:0 0 auto}

/* Pengaturan */
.settings-grid{grid-template-columns:minmax(280px,.78fr) minmax(0,1.42fr);align-items:start}
.settings-business-panel,.settings-integration-panel{width:100%;min-width:0}
.settings-business-panel{position:sticky;top:24px}
.integration-panel hr{width:100%;max-width:100%}
.switch-line{width:100%;max-width:100%;flex-wrap:wrap;overflow-wrap:anywhere}
.switch-line input{flex:0 0 18px}
.integration-actions{width:100%;grid-template-columns:repeat(3,minmax(0,1fr))}
.integration-actions form,.integration-actions button{width:100%;min-width:0}

/* Webhook dan teks panjang */
.webhook-panel{overflow:hidden}
.webhook-panel>.code-note,.webhook-panel>.guide-steps,.webhook-panel>p{margin-left:22px;margin-right:22px}
.webhook-panel>p{margin-bottom:20px}
.code-note{min-width:0;max-width:calc(100% - 44px)}
.code-note code{display:block;width:100%;max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;overflow-x:auto}
.guide-steps{width:auto}
.guide-steps span,.guide-steps code{min-width:0;max-width:100%;overflow-wrap:anywhere;word-break:break-word}

/* Chat dan komponen umum */
.chat-head{flex-wrap:wrap}
.chat-head>div:nth-child(2){min-width:0;flex:1 1 180px}
.chat-head h2,.chat-head p{overflow-wrap:anywhere}
.chat-actions{min-width:0;max-width:100%;flex-wrap:wrap}
.chat-actions form{min-width:0}
.chat-status-bar{flex-wrap:wrap}
.composer{min-width:0}
.composer textarea{min-width:0;width:auto}
.message-text,.admin-note,.detail-list dd,.integration-card p,.knowledge-list p,.compare p{overflow-wrap:anywhere;word-break:break-word}
.simple-list a,.conversation-item{min-width:0}
.conv-copy{min-width:0}
.conv-copy>div{min-width:0}
.conv-copy strong,.conv-copy p{min-width:0;overflow:hidden;text-overflow:ellipsis}
.modal-card{max-width:calc(100vw - 28px)}

@media(max-width:1120px){
  .product-layout,.settings-grid{grid-template-columns:1fr}
  .product-form-panel,.settings-business-panel{position:static}
}
@media(max-width:850px){
  .main-content{padding:18px;overflow-x:hidden}
  .panel-head{align-items:flex-start}
  .form-panel{padding:18px}
  .webhook-panel>.code-note,.webhook-panel>.guide-steps,.webhook-panel>p{margin-left:18px;margin-right:18px}
  .code-note{max-width:calc(100% - 36px)}
  .product-table{min-width:560px}
}
@media(max-width:680px){
  .form-grid,.integration-actions,.guide-steps{grid-template-columns:1fr}
  .settings-business-panel .btn,.settings-integration-panel .btn{width:100%}
  .chat-actions{width:100%;margin-left:0}
  .chat-actions form,.chat-actions .btn{flex:1 1 150px}
  .composer{align-items:stretch;flex-direction:column}
  .composer textarea{width:100%}
  .composer .btn{width:100%}
}
@media(max-width:520px){
  .main-content{padding:12px}
  .form-panel{padding:15px}
  .panel-head{padding:15px}
  .webhook-panel>.code-note,.webhook-panel>.guide-steps,.webhook-panel>p{margin-left:15px;margin-right:15px}
  .code-note{max-width:calc(100% - 30px)}
  .product-table{min-width:520px}
  .count-badge,.status-chip{max-width:100%;white-space:normal}
}
input[type="hidden"]{display:none!important}

/* =========================================================
   Final V3.1 — menu 3 akun WhatsApp lebih rapi dan bersimbol
   ========================================================= */
.wa-nav-badge{background:#16a34a}
.wa-filter-tabs{display:flex;gap:8px;align-items:center;overflow-x:auto;padding:0 0 13px;margin-top:-5px;scrollbar-width:thin}
.wa-filter-tabs a{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:#526078;background:#fff;border:1px solid var(--border);border-radius:999px;padding:8px 12px;font-size:12px;font-weight:800;box-shadow:0 3px 10px rgba(31,48,78,.04)}
.wa-filter-tabs a i{width:9px;height:9px;border-radius:50%;background:var(--wa-color,#64748b)}
.wa-filter-tabs a.active{color:#fff;background:#17233b;border-color:#17233b}
.wa-filter-tabs+.chat-layout{height:calc(100vh - 166px)}
.conv-labels{display:flex!important;justify-content:flex-start!important;align-items:center;gap:5px!important;flex-wrap:wrap;margin-top:3px}
.wa-account-pill{display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:3px 7px;border-radius:999px;font-size:9px;font-weight:800;color:var(--wa-color,#64748b);background:color-mix(in srgb,var(--wa-color,#64748b) 11%,white);border:1px solid color-mix(in srgb,var(--wa-color,#64748b) 22%,white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-account-pill:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--wa-color,#64748b);flex:0 0 6px}
.chat-title{min-width:0;flex:1 1 190px}.chat-title .wa-account-pill{margin-top:5px}

.multi-wa-hero{padding:22px 24px;margin-bottom:15px;display:flex;align-items:center;justify-content:space-between;gap:18px;background:linear-gradient(120deg,#fff 15%,#eefaf3);overflow:hidden}
.multi-wa-hero-copy{display:flex;align-items:center;gap:14px;min-width:0}
.multi-wa-hero-icon{width:50px;height:50px;display:grid;place-items:center;flex:0 0 50px;border-radius:16px;background:#dcfce7;font-size:25px;box-shadow:inset 0 0 0 1px #bbf7d0}
.multi-wa-hero h2{margin:0 0 5px;font-size:20px}.multi-wa-hero p{margin:0;color:var(--muted);font-size:13px;line-height:1.55;max-width:880px}
.wa-ready-badge{flex:0 0 auto;padding:7px 11px;background:#e8f8ed;color:#13753a;border:1px solid #ccefd7}

.wa-overview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-bottom:18px}
.wa-overview-card{position:relative;display:grid;grid-template-columns:42px minmax(0,1fr);gap:11px;padding:15px 16px;border-left:4px solid var(--wa-color,#2563eb);overflow:hidden}
.wa-overview-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:color-mix(in srgb,var(--wa-color,#2563eb) 12%,white);font-size:20px}
.wa-overview-copy{display:flex;flex-direction:column;min-width:0}.wa-overview-copy small{font-size:9px;font-weight:900;letter-spacing:.08em;color:var(--wa-color,#2563eb)}.wa-overview-copy strong{font-size:13px;margin:2px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wa-overview-copy>span{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wa-overview-status{grid-column:1/-1;display:flex;gap:7px;align-items:center;flex-wrap:wrap;padding-top:10px;border-top:1px solid #eef1f5}
.mini-ai-status{font-size:10px;padding:4px 8px;border-radius:999px;background:#f3f4f6;color:#6b7280}.mini-ai-status.active{background:#eef4ff;color:#255bb0}

.wa-account-list{display:flex;flex-direction:column;gap:18px}
.wa-account-card-wide{position:relative;overflow:hidden;border-top:4px solid var(--wa-color,#2563eb);padding:0}
.wa-account-head-wide{display:flex;align-items:center;gap:13px;padding:18px 21px;margin:0;border-bottom:1px solid var(--border);background:linear-gradient(110deg,#fff,color-mix(in srgb,var(--wa-color,#2563eb) 5%,white));min-width:0}
.wa-account-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex:0 0 46px;background:var(--wa-color,#2563eb);color:#fff;font-size:17px;font-weight:900;box-shadow:0 8px 18px color-mix(in srgb,var(--wa-color,#2563eb) 25%,transparent)}
.wa-account-title{min-width:0;flex:1}.wa-account-eyebrow{display:block;font-size:9px;letter-spacing:.09em;font-weight:900;color:var(--wa-color,#2563eb);margin-bottom:3px}.wa-account-title h2{margin:0 0 3px;font-size:17px}.wa-account-title p{margin:0;color:var(--muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wa-account-head-status{flex:0 0 auto}
.wa-account-form{display:flex;flex-direction:column;gap:0;padding:0 21px 21px;min-width:0}
.wa-form-section{padding:19px 0;border-bottom:1px solid #edf0f5;min-width:0}.wa-form-section:last-of-type{border-bottom:0}.wa-form-section-soft{margin:17px 0 0;padding:17px;border:1px solid #e6ebf3;border-radius:13px;background:#f8fafc}
.wa-form-section-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px}.wa-form-section-head>span{width:34px;height:34px;display:grid;place-items:center;flex:0 0 34px;border-radius:10px;background:#eef3fb;font-size:17px}.wa-form-section-head h3{margin:0 0 3px;font-size:14px}.wa-form-section-head p{margin:0;color:var(--muted);font-size:11px;line-height:1.45}
.wa-account-form label{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:11px;font-weight:800;color:#3d485d}.wa-account-form label>span:first-child{overflow-wrap:anywhere}
.wa-account-form input,.wa-account-form select,.wa-account-form textarea{width:100%;min-width:0;max-width:100%;border:1px solid var(--border);border-radius:9px;padding:10px;background:#fff;outline:0}.wa-account-form input:focus,.wa-account-form select:focus,.wa-account-form textarea:focus{border-color:#8db0f1;box-shadow:0 0 0 3px #edf3ff}
.wa-identity-grid,.wa-test-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.wa-three-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin-top:12px;min-width:0}
.wa-field-full{margin-top:12px}.wa-form-section-head+.wa-field-full{margin-top:0}
.wa-account-card input[type="color"]{width:56px;height:42px;padding:4px;cursor:pointer;flex:0 0 56px}
.color-picker-wrap{display:flex;align-items:center;gap:10px;min-height:42px}.color-picker-wrap em{font-style:normal;font-size:10px;line-height:1.4;color:var(--muted);font-weight:500}
.wa-toggle-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-top:14px}
.wa-toggle-card{position:relative!important;display:grid!important;grid-template-columns:auto 34px minmax(0,1fr);align-items:center;gap:10px!important;padding:12px!important;border:1px solid #e2e8f0;border-radius:11px;background:#fff;cursor:pointer}.wa-toggle-card:hover{border-color:#b8c9e6}.wa-toggle-card input{width:17px!important;height:17px;margin:0}.wa-toggle-symbol{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:#f2f5fa;font-size:17px}.wa-toggle-card>span:last-child{display:flex;flex-direction:column;min-width:0}.wa-toggle-card strong{font-size:12px}.wa-toggle-card small{font-size:10px;color:var(--muted);line-height:1.4;margin-top:2px;font-weight:500}
.wa-action-row{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(200px,.65fr);gap:10px;padding-top:18px}.wa-action-row .btn{width:100%;min-height:42px}.hidden-action-form{display:none}

.wa-global-grid{margin-top:18px;grid-template-columns:minmax(320px,.82fr) minmax(0,1.18fr);align-items:start}
.wa-webhook-settings,.wa-callback-panel{min-width:0}.wa-webhook-settings label>span{font-weight:800}
.wa-callback-panel{overflow:hidden}.wa-callback-panel>.code-note,.wa-callback-panel>.guide-steps,.wa-callback-panel>.wa-queue-form{margin-left:22px;margin-right:22px}.wa-callback-panel>.wa-queue-form{margin-top:16px;margin-bottom:22px}
.wa-guide-steps{grid-template-columns:repeat(3,minmax(0,1fr))}.wa-guide-steps>div{min-width:0}.wa-guide-steps span{display:flex;flex-direction:column;gap:3px;min-width:0}.wa-guide-steps strong{font-size:11px}.wa-guide-steps small{font-size:10px;color:var(--muted);line-height:1.4}
.single-action{grid-template-columns:1fr}

@media(max-width:1180px){
  .wa-overview-grid{grid-template-columns:1fr 1fr}
  .wa-overview-card:last-child{grid-column:1/-1}
  .wa-three-grid{grid-template-columns:1fr 1fr}.wa-three-grid label:last-child{grid-column:1/-1}
}
@media(max-width:900px){
  .wa-overview-grid,.wa-global-grid{grid-template-columns:1fr}.wa-overview-card:last-child{grid-column:auto}
  .wa-filter-tabs+.chat-layout{height:auto}.multi-wa-hero{align-items:flex-start;flex-direction:column}.wa-ready-badge{align-self:flex-start}
  .wa-account-head-wide{align-items:flex-start;flex-wrap:wrap}.wa-account-head-status{margin-left:59px}
}
@media(max-width:680px){
  .wa-identity-grid,.wa-test-grid,.wa-three-grid,.wa-toggle-grid,.wa-action-row{grid-template-columns:1fr}.wa-three-grid label:last-child{grid-column:auto}
  .wa-account-form{padding-left:16px;padding-right:16px;padding-bottom:16px}.wa-account-head-wide{padding:16px}
  .wa-form-section-soft{padding:14px}.color-picker-wrap{align-items:flex-start;flex-direction:column}
  .wa-callback-panel>.code-note,.wa-callback-panel>.guide-steps,.wa-callback-panel>.wa-queue-form{margin-left:17px;margin-right:17px}
}
@media(max-width:520px){
  .wa-overview-grid{gap:10px}.wa-account-list{gap:13px}.multi-wa-hero{padding:17px}.multi-wa-hero-copy{align-items:flex-start}.multi-wa-hero-icon{width:42px;height:42px;flex-basis:42px;border-radius:13px;font-size:21px}
  .wa-account-head-status{width:100%;margin-left:0}.wa-account-head-status .status-chip{width:100%;text-align:center}
  .wa-toggle-card{grid-template-columns:auto 30px minmax(0,1fr);padding:10px!important}.wa-toggle-symbol{width:30px;height:30px}
  .wa-callback-panel>.code-note,.wa-callback-panel>.guide-steps,.wa-callback-panel>.wa-queue-form{margin-left:14px;margin-right:14px}
  .wa-filter-tabs{margin-right:-12px;padding-right:12px}
}

/* =========================================================
   WhatsApp Multi-account layout v3.2
   Simple, stable, and cache-busted for desktop/mobile.
   ========================================================= */
.wa32-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 24px;margin-bottom:16px;overflow:hidden;background:linear-gradient(135deg,#ffffff,#eefbf3)}
.wa32-hero-main{display:flex;align-items:center;gap:14px;min-width:0}.wa32-hero-icon{display:grid;place-items:center;width:50px;height:50px;flex:0 0 50px;border-radius:15px;background:#dcfce7;border:1px solid #bbf7d0;font-size:24px}.wa32-hero h2{margin:0 0 5px;font-size:20px}.wa32-hero p{max-width:850px;margin:0;color:var(--muted);font-size:13px;line-height:1.55}.wa32-ready{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:110px;padding:10px 14px;border:1px solid #ccefd7;border-radius:12px;background:#eaf9ef;color:#15783d}.wa32-ready strong{font-size:18px}.wa32-ready span{font-size:10px;font-weight:700}
.wa32-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin:0 0 18px}.wa32-summary-card{display:grid;grid-template-columns:42px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;gap:10px 12px;padding:15px 16px;border-left:4px solid var(--wa-color,#2563eb);text-decoration:none;color:var(--text);transition:transform .15s ease,border-color .15s ease}.wa32-summary-card:hover{transform:translateY(-2px);border-color:var(--wa-color,#2563eb)}.wa32-summary-number{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--wa-color,#2563eb);color:#fff;font-weight:900}.wa32-summary-text{display:flex;flex-direction:column;min-width:0}.wa32-summary-text small{font-size:9px;letter-spacing:.08em;font-weight:900;color:var(--wa-color,#2563eb)}.wa32-summary-text strong{margin:2px 0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wa32-summary-text em{font-style:normal;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wa32-summary-state{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:10px;border-top:1px solid #edf1f5}.wa32-summary-state b,.wa32-summary-state i{display:inline-flex;padding:4px 8px;border-radius:999px;font-size:10px;font-style:normal}.wa32-summary-state .is-ready{background:#e9f8ef;color:#13763a}.wa32-summary-state .is-pending{background:#fff5e5;color:#9b6208}.wa32-summary-state i{background:#eef4ff;color:#315fa5}
.wa32-account-list{display:flex;flex-direction:column;gap:14px}.wa32-account{overflow:hidden;border-top:4px solid var(--wa-color,#2563eb)}.wa32-account-summary{list-style:none;display:grid;grid-template-columns:46px minmax(0,1fr) auto 24px;align-items:center;gap:13px;padding:17px 20px;cursor:pointer;background:#fff}.wa32-account-summary::-webkit-details-marker{display:none}.wa32-account[open]>.wa32-account-summary{border-bottom:1px solid var(--border);background:#fbfdff}.wa32-account-number{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:var(--wa-color,#2563eb);color:#fff;font-weight:900;box-shadow:0 8px 18px rgba(15,23,42,.12)}.wa32-account-name{display:flex;flex-direction:column;min-width:0}.wa32-account-name small{font-size:9px;letter-spacing:.09em;font-weight:900;color:var(--wa-color,#2563eb)}.wa32-account-name strong{margin:2px 0;font-size:16px}.wa32-account-name em{font-size:11px;font-style:normal;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wa32-account-status{display:flex;flex-direction:column;align-items:flex-end;gap:5px}.wa32-account-status b,.wa32-account-status i{padding:4px 8px;border-radius:999px;font-size:10px;font-style:normal;white-space:nowrap}.wa32-account-status .is-ready{background:#e9f8ef;color:#13763a}.wa32-account-status .is-pending{background:#fff5e5;color:#9b6208}.wa32-account-status i{background:#eef4ff;color:#315fa5}.wa32-chevron{font-size:22px;color:#718096;transition:transform .2s ease}.wa32-account[open] .wa32-chevron{transform:rotate(180deg)}
.wa32-account-body{padding:0 20px 20px}.wa32-form{min-width:0}.wa32-config-section{padding:20px 0;border-bottom:1px solid #edf1f5}.wa32-config-section:last-of-type{border-bottom:0}.wa32-soft-section{margin-top:18px;padding:17px;border:1px solid #e5eaf2;border-radius:13px;background:#f8fafc}.wa32-section-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px}.wa32-section-head>span{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border-radius:10px;background:#eef3fb;font-size:17px}.wa32-section-head h3{margin:0 0 3px;font-size:14px}.wa32-section-head p{margin:0;color:var(--muted);font-size:11px;line-height:1.45}.wa32-field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.wa32-field{display:flex;flex-direction:column;gap:6px;min-width:0}.wa32-full{grid-column:1/-1}.wa32-label{font-size:11px;font-weight:800;color:#3d485d}.wa32-field input,.wa32-field select,.wa32-field textarea{display:block;width:100%;min-width:0;max-width:100%;height:42px;padding:10px 11px;border:1px solid var(--border);border-radius:9px;background:#fff;outline:0}.wa32-field input:focus,.wa32-field select:focus,.wa32-field textarea:focus{border-color:#8db0f1;box-shadow:0 0 0 3px #edf3ff}.wa32-field small{font-size:10px;font-weight:500;line-height:1.4;color:var(--muted)}.wa32-color-row{display:flex;align-items:center;gap:10px;min-height:42px}.wa32-color-row input[type=color]{width:58px;height:42px;flex:0 0 58px;padding:4px;cursor:pointer}.wa32-color-row em{font-style:normal;font-size:10px;color:var(--muted);line-height:1.4}
.wa32-switch-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-top:14px}.wa32-switch-row{display:grid;grid-template-columns:18px 36px minmax(0,1fr);align-items:center;gap:10px;padding:12px;border:1px solid #e2e8f0;border-radius:11px;background:#fff;cursor:pointer}.wa32-switch-row:hover{border-color:#b9c8df}.wa32-switch-row input{width:18px;height:18px;margin:0}.wa32-switch-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:9px;background:#f1f5f9;font-size:18px}.wa32-switch-copy{display:flex;flex-direction:column;min-width:0}.wa32-switch-copy strong{font-size:12px}.wa32-switch-copy small{margin-top:2px;color:var(--muted);font-size:10px;line-height:1.4}.wa32-actions{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(190px,.65fr);gap:10px;padding-top:18px}.wa32-actions .btn{width:100%;min-height:42px}
.wa32-webhook-card{margin-top:18px;overflow:hidden}.wa32-webhook-head{display:flex;align-items:center;gap:11px;padding:18px 20px;border-bottom:1px solid var(--border)}.wa32-webhook-head>span{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#eef4ff;font-size:19px}.wa32-webhook-head h2{margin:0 0 3px;font-size:16px}.wa32-webhook-head p{margin:0;color:var(--muted);font-size:11px}.wa32-webhook-grid{display:grid;grid-template-columns:minmax(300px,.8fr) minmax(0,1.2fr);gap:0}.wa32-webhook-form{display:flex;flex-direction:column;gap:13px;padding:20px;border-right:1px solid var(--border)}.wa32-callback-box{min-width:0;padding:20px}.wa32-callback-title{display:flex;align-items:center;gap:10px;margin-bottom:13px}.wa32-callback-title>span{font-size:22px}.wa32-callback-title h3{margin:0 0 3px;font-size:14px}.wa32-callback-title p{margin:0;color:var(--muted);font-size:11px}.wa32-code-box{display:flex;flex-direction:column;gap:7px;padding:12px;border:1px dashed #cbd6e8;border-radius:10px}.wa32-code-box strong{font-size:11px}.wa32-code-box code{display:block;max-width:100%;padding:9px;border-radius:7px;background:#13203a;color:#cde1ff;overflow:auto;white-space:nowrap}.wa32-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0;padding:0;list-style:none}.wa32-steps li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;align-items:start;padding:10px;border:1px solid #e6ebf3;border-radius:10px;background:#fafbfd}.wa32-steps b{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#e8f0ff;color:#2659aa}.wa32-steps span{display:flex;flex-direction:column}.wa32-steps strong{font-size:11px}.wa32-steps small{margin-top:2px;color:var(--muted);font-size:9px;line-height:1.4}
@media(max-width:1050px){.wa32-summary-grid{grid-template-columns:1fr 1fr}.wa32-summary-card:last-child{grid-column:1/-1}.wa32-webhook-grid{grid-template-columns:1fr}.wa32-webhook-form{border-right:0;border-bottom:1px solid var(--border)}}
@media(max-width:760px){.wa32-hero{align-items:flex-start;flex-direction:column}.wa32-ready{align-items:flex-start}.wa32-summary-grid{grid-template-columns:1fr}.wa32-summary-card:last-child{grid-column:auto}.wa32-account-summary{grid-template-columns:42px minmax(0,1fr) 22px;padding:15px}.wa32-account-number{width:42px;height:42px}.wa32-account-status{grid-column:2/4;align-items:flex-start;flex-direction:row;flex-wrap:wrap}.wa32-chevron{grid-column:3;grid-row:1}.wa32-account-body{padding:0 15px 15px}.wa32-field-grid,.wa32-switch-list,.wa32-actions,.wa32-steps{grid-template-columns:1fr}.wa32-full{grid-column:auto}.wa32-soft-section{padding:14px}.wa32-webhook-form,.wa32-callback-box{padding:16px}}
@media(max-width:480px){.wa32-hero{padding:16px}.wa32-hero-main{align-items:flex-start}.wa32-hero-icon{width:42px;height:42px;flex-basis:42px}.wa32-account-summary{gap:10px;padding:13px}.wa32-account-name strong{font-size:14px}.wa32-account-status b,.wa32-account-status i{font-size:9px}.wa32-switch-row{grid-template-columns:18px 32px minmax(0,1fr);padding:10px}.wa32-switch-icon{width:32px;height:32px}.wa32-color-row{align-items:flex-start;flex-direction:column}}

/* =========================================================
   Pusat Pengetahuan AI Final V4
   ========================================================= */
.knowledge-hero{display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:16px;padding:21px 23px;margin-bottom:14px;background:linear-gradient(135deg,#fff,#f1f7ff);overflow:hidden}.knowledge-hero-icon{display:grid;place-items:center;width:58px;height:58px;border-radius:17px;background:#e5efff;border:1px solid #cfe0ff;font-size:29px}.knowledge-hero h2{margin:0 0 5px;font-size:20px}.knowledge-hero p{margin:0;max-width:820px;color:var(--muted);font-size:12px;line-height:1.55}.knowledge-health{min-width:130px;padding:12px 16px;border:1px solid #cfe4d7;border-radius:13px;background:#ebf9f0;text-align:center;color:#15733a}.knowledge-health strong{display:block;font-size:22px}.knowledge-health span{font-size:10px;font-weight:800}
.knowledge-tabs{display:flex;align-items:center;gap:7px;margin-bottom:17px;padding:7px;overflow-x:auto;background:#fff;border:1px solid var(--border);border-radius:13px;box-shadow:var(--shadow);scrollbar-width:thin}.knowledge-tabs a{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;padding:9px 11px;border-radius:9px;text-decoration:none;color:#556176;font-size:11px;font-weight:800;white-space:nowrap}.knowledge-tabs a:hover{background:#f3f6fb;color:#244d91}.knowledge-tabs a.active{background:#e9f1ff;color:#1f56ad}.knowledge-tabs a b{display:grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:#ef4444;color:#fff;font-size:9px}
.knowledge-stat-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:17px}.knowledge-stat-grid article{display:flex;align-items:center;gap:11px;min-width:0;padding:15px;background:#fff;border:1px solid var(--border);border-radius:13px;box-shadow:var(--shadow)}.knowledge-stat-grid article>span{display:grid;place-items:center;width:39px;height:39px;flex:0 0 39px;border-radius:11px;background:#eff5ff;font-size:19px}.knowledge-stat-grid article div{display:flex;flex-direction:column;min-width:0}.knowledge-stat-grid b{font-size:21px}.knowledge-stat-grid small{overflow:hidden;color:var(--muted);font-size:9px;text-overflow:ellipsis;white-space:nowrap}
.knowledge-overview-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);gap:17px;margin-bottom:17px}.category-progress-list{padding:10px 21px 18px}.category-progress-list>div{padding:10px 0}.category-progress-list>div>div{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}.category-progress-list strong{font-size:12px}.category-progress-list span{color:var(--muted);font-size:10px}.category-progress-list i{display:block;height:7px;overflow:hidden;border-radius:99px;background:#edf1f6}.category-progress-list i b{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#3b82f6,#2563eb)}.rank-list{padding:9px 20px 17px}.rank-list>div{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #f0f2f6}.rank-list>div:last-child{border-bottom:0}.rank-list>div>span{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:#eef4ff;color:#2a5ba9;font-size:11px;font-weight:900}.rank-list strong,.rank-list small{display:block}.rank-list strong{overflow:hidden;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.rank-list small{margin-top:2px;color:var(--muted);font-size:9px}.simple-knowledge-log{padding:9px 20px 17px}.simple-knowledge-log>div{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:start;gap:9px;padding:10px 0;border-bottom:1px solid #f0f2f6}.simple-knowledge-log>div:last-child{border-bottom:0}.simple-knowledge-log>div>span{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:#fff8e6}.simple-knowledge-log strong,.simple-knowledge-log small{display:block}.simple-knowledge-log strong{font-size:11px;line-height:1.4}.simple-knowledge-log small{margin-top:3px;color:var(--muted);font-size:9px}.knowledge-quick-actions{padding-bottom:12px}.knowledge-quick-actions>a{display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:10px;margin:0 14px 8px;padding:11px;border:1px solid #e8edf5;border-radius:11px;text-decoration:none;color:var(--text);background:#fbfcfe}.knowledge-quick-actions>a:hover{border-color:#b8cdf1;background:#f2f7ff}.knowledge-quick-actions>a>span{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#eaf2ff;font-size:18px}.knowledge-quick-actions strong,.knowledge-quick-actions small{display:block}.knowledge-quick-actions strong{font-size:12px}.knowledge-quick-actions small{margin-top:2px;color:var(--muted);font-size:9px}
.knowledge-main-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(320px,.65fr);gap:17px;align-items:start}.knowledge-library-panel,.knowledge-add-panel{min-width:0}.knowledge-add-panel{position:sticky;top:22px}.knowledge-filter{display:grid;grid-template-columns:minmax(220px,1.4fr) minmax(150px,.7fr) minmax(130px,.55fr) auto;align-items:end;gap:9px;padding:14px 18px;border-bottom:1px solid var(--border);background:#fafbfd}.knowledge-filter label{display:flex;flex-direction:column;gap:5px;min-width:0}.knowledge-filter label>span{font-size:9px;font-weight:900;color:#536078}.knowledge-filter input,.knowledge-filter select{display:block;width:100%;min-width:0;height:38px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:#fff;outline:0}.knowledge-card-list{padding:11px 17px 18px}.knowledge-card{margin-bottom:12px;padding:15px;border:1px solid #e4eaf2;border-radius:12px;background:#fff}.knowledge-card:last-child{margin-bottom:0}.knowledge-card.is-expired{border-color:#f5c9c9;background:#fffafa}.knowledge-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.knowledge-card-badges{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.knowledge-card h3{margin:10px 0 6px;font-size:14px;line-height:1.4}.knowledge-answer{margin:0 0 8px;font-size:11px;line-height:1.55;color:#374151}.knowledge-variants{margin:0 0 7px;padding:8px 10px;border-radius:8px;background:#f7f9fc;color:#5e697b;font-size:10px;line-height:1.45}.knowledge-meta{display:flex;flex-wrap:wrap;gap:7px 13px;padding-top:8px;border-top:1px dashed #e2e8f0;color:var(--muted);font-size:9px}.knowledge-status{display:inline-flex;align-items:center;padding:4px 8px;border-radius:99px;font-size:9px;font-weight:900}.status-active{background:#e7f8ed;color:#10773a}.status-draft{background:#eef1f5;color:#5e6878}.status-review{background:#fff4d9;color:#936000}.status-inactive{background:#f1f3f6;color:#727b89}.status-expired{background:#ffe8e8;color:#bb2929}.usage-pill{flex:0 0 auto;padding:4px 7px;border-radius:99px;background:#eef4ff;color:#315c9d;font-size:9px}.knowledge-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:12px}.knowledge-actions form{margin:0}.small-btn{padding:7px 9px;font-size:10px}.btn.danger{background:#feeaea;color:#b42323}.edit-knowledge-details{flex:1 1 100%;min-width:0}.edit-knowledge-details>summary{display:inline-flex;align-items:center;padding:7px 9px;border-radius:8px;background:#f1f5f9;color:#3e4b64;cursor:pointer;font-size:10px;font-weight:800;list-style:none}.edit-knowledge-details>summary::-webkit-details-marker{display:none}.edit-knowledge-details[open]{margin-bottom:5px}.knowledge-edit-form{margin-top:10px;padding:14px;border:1px solid #dbe5f3;border-radius:11px;background:#f8fbff}.knowledge-placeholder-help{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:15px;padding:12px;border-radius:10px;background:#f7f9fc;font-size:9px}.knowledge-placeholder-help strong{grid-column:1/-1}.knowledge-placeholder-help span{display:flex;gap:4px;align-items:center}.knowledge-placeholder-help code{padding:2px 4px;border-radius:4px;background:#e7eef9;color:#2457a6}
.category-management-grid{grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr)}.category-admin-list{padding:10px 18px 18px}.category-admin-list article{display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;align-items:center;gap:11px;padding:12px 0;border-bottom:1px solid #edf0f5}.category-admin-list article:last-child{border-bottom:0}.category-icon-preview{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#eef4ff;font-size:21px}.category-admin-list h3,.category-admin-list strong{font-size:12px}.category-admin-list p{margin:3px 0;color:var(--muted);font-size:10px}.category-admin-list small{color:var(--muted);font-size:9px}.row-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.row-actions form{margin:0}
.ai-rule-list,.flow-list,.correction-approval-list{padding:11px 17px 18px}.ai-rule-list article,.flow-list article,.correction-approval-list article{margin-bottom:11px;padding:14px;border:1px solid #e4eaf2;border-radius:12px;background:#fff}.ai-rule-list article:last-child,.flow-list article:last-child,.correction-approval-list article:last-child{margin-bottom:0}.rule-type-mandatory{border-left:4px solid #16a34a!important}.rule-type-prohibited{border-left:4px solid #dc2626!important}.rule-type-handoff{border-left:4px solid #d97706!important}.rule-type-style{border-left:4px solid #2563eb!important}.muted-rule,.muted-flow{opacity:.58}.rule-head,.flow-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.rule-head span{font-size:9px;font-weight:900;color:#536078}.rule-head h3,.flow-head h3{margin:3px 0 0;font-size:13px}.rule-head>b,.flow-head>b{flex:0 0 auto;padding:4px 7px;border-radius:99px;background:#f0f3f7;color:#606a79;font-size:9px}.ai-rule-list article>p{margin:9px 0;color:#3d4655;font-size:11px;line-height:1.55}.ai-rule-list article>small{display:block;margin-bottom:9px;color:var(--muted);font-size:9px}.rule-response{margin:9px 0;padding:10px;border-radius:9px;background:#fff8e8}.rule-response strong{font-size:9px;color:#85600e}.rule-response p{margin:4px 0 0;font-size:10px;line-height:1.5}.flow-head{justify-content:flex-start}.flow-head>span{display:grid;place-items:center;width:37px;height:37px;border-radius:10px;background:#eaf2ff}.flow-head>div{flex:1}.flow-head small{color:var(--muted);font-size:9px}.flow-steps{counter-reset:flowstep;margin:11px 0}.flow-steps p{counter-increment:flowstep;position:relative;margin:6px 0;padding:8px 9px 8px 34px;border-radius:8px;background:#f7f9fc;font-size:10px;line-height:1.45}.flow-steps p:before{content:counter(flowstep);position:absolute;left:8px;top:7px;display:grid;place-items:center;width:19px;height:19px;border-radius:6px;background:#e3edff;color:#2d5da7;font-size:9px;font-weight:900}.completion-action{margin:9px 0;padding:9px;border-radius:8px;background:#ebf8ef;font-size:10px;color:#23633a}
.correction-status-pending{border-left:4px solid #f59e0b!important}.correction-status-approved{border-left:4px solid #22c55e!important}.correction-status-rejected{border-left:4px solid #94a3b8!important;opacity:.75}.correction-head>div{display:flex;align-items:center;gap:8px;min-width:0}.correction-head strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.correction-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:11px;padding-top:11px;border-top:1px solid #edf0f5}.correction-actions form:first-child{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.inline-check{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700}.inline-check input{margin:0}
.knowledge-test-grid,.knowledge-import-grid{display:grid;grid-template-columns:minmax(310px,.7fr) minmax(0,1.3fr);gap:17px;align-items:start}.test-note{margin-top:13px;padding:10px;border-radius:9px;background:#f7f9fc;color:var(--muted);font-size:9px;line-height:1.45}.test-result-panel{min-width:0}.test-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;padding:16px}.test-summary>div{padding:11px;border:1px solid #e5eaf2;border-radius:10px;background:#fafbfd;text-align:center}.test-summary span,.test-summary small,.test-summary strong{display:block}.test-summary span{font-size:19px}.test-summary small{margin:4px 0 2px;color:var(--muted);font-size:8px;text-transform:uppercase}.test-summary strong{overflow:hidden;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.test-warning{margin:0 16px 12px;padding:11px;border-radius:9px;background:#fff3dc;color:#7f5708}.test-warning strong{font-size:11px}.test-warning p{margin:3px 0 0;font-size:10px}.test-answer{margin:0 16px 12px;padding:14px;border-radius:10px;background:#eaf3ff}.test-answer small{display:block;margin-bottom:5px;color:#55709c;font-size:9px;font-weight:900}.test-answer p{margin:0;font-size:12px;line-height:1.6}.test-sources{padding:0 16px 16px}.test-sources h3{margin:14px 0 6px;font-size:11px}.test-sources>div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid #edf0f5}.test-sources>div b{font-size:10px}.test-sources>div span{color:var(--muted);font-size:9px}.test-sources>p{color:var(--muted);font-size:10px}.csv-format{padding:12px;border-radius:10px;background:#f7f9fc}.csv-format strong,.csv-format code,.csv-format p{display:block}.csv-format strong{font-size:11px}.csv-format code{margin:7px 0;padding:8px;overflow:auto;border-radius:7px;background:#15223d;color:#d6e7ff;font-size:9px;white-space:nowrap}.csv-format p{margin:0;color:var(--muted);font-size:9px;line-height:1.5}.export-card{display:flex;align-items:center;gap:12px;margin:12px 0 17px;padding:15px;border-radius:11px;background:#eef5ff}.export-card>span{font-size:28px}.export-card strong{font-size:13px}.export-card p{margin:3px 0 0;color:var(--muted);font-size:10px;line-height:1.45}.backup-advice{margin-top:15px;padding:12px;border-radius:10px;background:#fff8e7}.backup-advice strong{font-size:10px}.backup-advice p{margin:4px 0 0;color:#71551d;font-size:9px;line-height:1.5}.history-table-wrap{width:100%;max-width:100%;overflow:auto}.entity-pill{display:inline-flex;padding:4px 7px;border-radius:99px;background:#eef4ff;color:#315b9b;font-size:9px;font-weight:800}
@media(max-width:1250px){.knowledge-stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.knowledge-main-grid{grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr)}}
@media(max-width:950px){.knowledge-overview-grid,.knowledge-main-grid,.knowledge-test-grid,.knowledge-import-grid{grid-template-columns:1fr}.knowledge-add-panel{position:static}.knowledge-filter{grid-template-columns:1fr 1fr}.knowledge-filter label:first-of-type{grid-column:1/-1}.knowledge-filter .btn{width:100%}.category-management-grid{grid-template-columns:1fr}.test-summary{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.knowledge-hero{grid-template-columns:46px minmax(0,1fr);padding:17px}.knowledge-hero-icon{width:46px;height:46px;font-size:23px}.knowledge-health{grid-column:1/-1;width:100%;text-align:left}.knowledge-stat-grid{grid-template-columns:1fr 1fr}.knowledge-card-head{align-items:flex-start;flex-direction:column}.usage-pill{align-self:flex-start}.category-admin-list article{grid-template-columns:39px minmax(0,1fr) auto}.category-icon-preview{width:39px;height:39px}.category-admin-list .row-actions{grid-column:2/-1}.knowledge-filter{grid-template-columns:1fr}.knowledge-filter label:first-of-type{grid-column:auto}.compare{grid-template-columns:1fr}.correction-head{align-items:flex-start;gap:8px;flex-direction:column}.correction-head>div{align-items:flex-start;flex-direction:column}.correction-head strong{white-space:normal}.test-summary{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.knowledge-stat-grid{grid-template-columns:1fr}.knowledge-tabs{margin-right:-12px;padding-right:12px}.knowledge-card-list,.ai-rule-list,.flow-list,.correction-approval-list{padding:10px}.knowledge-card{padding:12px}.knowledge-placeholder-help{grid-template-columns:1fr}.knowledge-placeholder-help strong{grid-column:auto}.test-summary{grid-template-columns:1fr}.knowledge-actions{align-items:stretch;flex-direction:column}.knowledge-actions form,.knowledge-actions .btn,.knowledge-actions details{width:100%}.edit-knowledge-details>summary{width:100%;justify-content:center}.category-admin-list article{grid-template-columns:39px minmax(0,1fr)}.category-admin-list article>.knowledge-status{grid-column:2}.category-admin-list .row-actions{grid-column:2}.correction-actions{align-items:stretch;flex-direction:column}.correction-actions form,.correction-actions .btn{width:100%}.correction-actions form:first-child{align-items:stretch;flex-direction:column}}
.knowledge-media{margin:8px 0;padding:8px 10px;border-radius:8px;background:#eef5ff;color:#315b96;font-size:9px;overflow-wrap:anywhere}.field-check{justify-content:flex-start;min-height:42px;padding:9px 10px;border:1px solid var(--border);border-radius:9px;background:#fff}.field-check input{width:17px!important;height:17px!important;flex:0 0 17px;margin:0}


/* ===== Pusat Pengaturan Final V5 ===== */
.settings5-hero{display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:16px;padding:20px;background:linear-gradient(135deg,#f8fbff,#eef5ff)}.settings5-hero-icon{display:grid;place-items:center;width:58px;height:58px;border-radius:17px;background:#1f5fd1;color:#fff;font-size:28px;box-shadow:0 10px 24px rgba(31,95,209,.2)}.settings5-hero h2{margin:0;font-size:20px}.settings5-hero p{margin:5px 0 0;color:var(--muted);font-size:11px}.settings5-health{min-width:105px;padding:11px 14px;border-radius:12px;background:#fff;text-align:center;box-shadow:0 5px 18px rgba(35,65,110,.08)}.settings5-health strong,.settings5-health span{display:block}.settings5-health strong{font-size:18px;color:#1d5ac5}.settings5-health span{color:var(--muted);font-size:9px}.settings5-tabs{display:flex;gap:7px;margin:14px 0 17px;padding:5px;overflow:auto;border:1px solid var(--border);border-radius:13px;background:#fff;scrollbar-width:thin}.settings5-tabs a{display:flex;align-items:center;gap:7px;flex:0 0 auto;padding:9px 11px;border-radius:9px;color:#506077;font-size:10px;font-weight:800;text-decoration:none}.settings5-tabs a:hover{background:#f4f7fb}.settings5-tabs a.active{background:#1f5fd1;color:#fff;box-shadow:0 5px 14px rgba(31,95,209,.2)}.settings5-tabs span{font-size:15px}.settings5-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:17px}.settings5-stat-grid article{display:flex;align-items:center;gap:12px;min-width:0;padding:16px;border:1px solid var(--border);border-radius:13px;background:#fff}.settings5-stat-grid article>span{font-size:24px}.settings5-stat-grid b,.settings5-stat-grid small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.settings5-stat-grid b{font-size:13px}.settings5-stat-grid small{margin-top:3px;color:var(--muted);font-size:9px}.settings5-grid{display:grid;gap:17px;align-items:start}.settings5-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.settings5-grid.template-layout,.settings5-grid.users-layout,.settings5-grid.integration-layout{grid-template-columns:minmax(300px,.7fr) minmax(0,1.3fr)}.settings5-grid+.settings5-grid{margin-top:17px}.settings5-grid .panel{min-width:0}.settings5-grid .form-section-head{display:flex;align-items:flex-start;gap:11px}.settings5-grid .form-section-head>span{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border-radius:11px;background:#edf4ff;font-size:20px}.settings5-grid .form-section-head.with-status{display:grid;grid-template-columns:40px minmax(0,1fr) auto}.settings5-savebar{display:flex;align-items:center;justify-content:space-between;gap:13px;padding:13px 15px;border:1px solid #d7e4f8;border-radius:12px;background:#f5f9ff}.settings5-savebar span{font-size:10px;color:#52657d}.span-all{grid-column:1/-1}.form-grid .span-2{grid-column:1/-1}.settings5-health-list{padding:3px 17px 16px}.settings5-health-list>div{display:grid;grid-template-columns:34px minmax(0,1fr) 12px;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #eef1f5}.settings5-health-list>div:last-child{border-bottom:0}.settings5-health-list>div>span{font-size:18px}.settings5-health-list b,.settings5-health-list small{display:block}.settings5-health-list b{font-size:11px}.settings5-health-list small{margin-top:2px;color:var(--muted);font-size:9px}.health-dot{width:9px;height:9px;border-radius:50%;background:#ef4444}.health-dot.ok{background:#22c55e}.health-dot.warn{background:#f59e0b}.settings5-shortcuts{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:5px 17px 18px}.settings5-shortcuts a{padding:12px;border:1px solid #e3eaf4;border-radius:10px;background:#fafcff;color:#34455f;font-size:10px;font-weight:800;text-decoration:none}.settings5-shortcuts a:hover{border-color:#b7d0f7;background:#eef5ff}.switch-stack{display:grid;gap:9px}.top-gap{margin-top:10px}.template5-list,.user5-list,.backup5-list,.integration5-list,.log5-list{padding:8px 16px 17px}.template5-list article{margin-bottom:11px;padding:13px;border:1px solid #e4eaf2;border-radius:11px}.template5-list article>div:first-child{display:flex;align-items:center;gap:9px}.template5-list strong,.template5-list small{display:block}.template5-list strong{font-size:11px}.template5-list small{margin-top:2px;color:var(--muted);font-size:9px}.template5-list p{margin:10px 0;padding:10px;border-radius:8px;background:#f7f9fc;font-size:10px;line-height:1.55}.user5-list article{display:grid;grid-template-columns:38px minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid #edf0f5}.user5-list strong,.user5-list small{display:block}.user5-list strong{font-size:11px}.user5-list small{margin-top:3px;color:var(--muted);font-size:9px}.backup5-list{padding:13px 0 0}.backup5-list>div{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid #edf0f5}.backup5-list strong,.backup5-list small{display:block}.backup5-list strong{font-size:10px}.backup5-list small{margin-top:2px;color:var(--muted);font-size:8px}.backup-warning{margin-top:15px;padding:11px;border-radius:9px;background:#fff6df;color:#765619;font-size:9px;line-height:1.5}.integration5-list article{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid #edf0f5}.integration5-list article>span{font-size:20px}.integration5-list strong,.integration5-list small,.integration5-list em{display:block}.integration5-list strong{font-size:11px}.integration5-list small{margin:3px 0;color:var(--muted);font-size:9px;overflow-wrap:anywhere}.integration5-list em{font-size:8px;color:#65758a}.settings5-health-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin-bottom:17px}.health-card{display:grid;grid-template-columns:38px minmax(0,1fr) 10px;align-items:center;gap:10px;padding:13px;border:1px solid var(--border);border-radius:11px;background:#fff}.health-card>span{font-size:20px}.health-card strong,.health-card small{display:block}.health-card strong{font-size:11px}.health-card small{margin-top:3px;color:var(--muted);font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.health-card>i{width:9px;height:9px;border-radius:50%;background:#ef4444}.health-card.ok>i{background:#22c55e}.health-card.warn>i{background:#f59e0b}.log5-list>div{display:grid;grid-template-columns:80px minmax(0,1fr) auto;gap:10px;padding:9px 0;border-bottom:1px solid #edf0f5;font-size:9px}.log5-list b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.log5-list span{color:#4a5668}.log5-list time{color:var(--muted)}
@media(max-width:1050px){.settings5-stat-grid{grid-template-columns:1fr 1fr}.settings5-grid.two,.settings5-grid.template-layout,.settings5-grid.users-layout,.settings5-grid.integration-layout{grid-template-columns:1fr}.settings5-health-grid{grid-template-columns:1fr 1fr}.span-all{grid-column:auto}}
@media(max-width:720px){.settings5-hero{grid-template-columns:48px minmax(0,1fr);padding:16px}.settings5-hero-icon{width:48px;height:48px;font-size:23px}.settings5-health{grid-column:1/-1;text-align:left}.settings5-stat-grid{grid-template-columns:1fr}.settings5-shortcuts{grid-template-columns:1fr}.settings5-savebar{align-items:stretch;flex-direction:column}.settings5-savebar .btn{width:100%}.settings5-health-grid{grid-template-columns:1fr}.user5-list article{grid-template-columns:38px minmax(0,1fr) auto}.user5-list article form{grid-column:2/-1}.log5-list>div{grid-template-columns:1fr}.log5-list time{justify-self:start}.settings5-grid .form-section-head.with-status{grid-template-columns:40px minmax(0,1fr)}.settings5-grid .form-section-head.with-status>.status-chip{grid-column:2;justify-self:start}}
@media(max-width:480px){.settings5-tabs{margin-right:-12px;padding-right:12px}.settings5-stat-grid article{padding:13px}.settings5-hero h2{font-size:17px}.backup5-list>div{grid-template-columns:28px minmax(0,1fr)}.backup5-list form{grid-column:2}.integration5-list article{grid-template-columns:30px minmax(0,1fr)}.integration5-list form{grid-column:2}}

/* =========================================================
   Pusat Pengaturan Final V5
   ========================================================= */
.settings5-hero{display:flex;align-items:center;gap:16px;padding:20px 22px;margin-bottom:17px;background:linear-gradient(135deg,#f7faff,#eef5ff)}
.settings5-hero-icon{display:grid;place-items:center;flex:0 0 54px;height:54px;border-radius:16px;background:#fff;box-shadow:0 8px 24px rgba(37,99,235,.12);font-size:27px}
.settings5-hero-copy{min-width:0;flex:1}.settings5-hero-copy h2{margin:0 0 5px;font-size:18px}.settings5-hero-copy p{margin:0;color:var(--muted);font-size:11px;line-height:1.55}
.settings5-hero-status{display:flex;flex-direction:column;align-items:center;min-width:112px;padding:11px 14px;border:1px solid #dbe7fb;border-radius:13px;background:#fff}.settings5-hero-status strong{font-size:20px;color:#2459a5}.settings5-hero-status span{margin-top:2px;color:var(--muted);font-size:9px}
.settings5-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:17px;align-items:start}.settings5-content{min-width:0}.settings5-nav{position:sticky;top:18px;padding:8px}.settings5-nav a{display:flex;align-items:center;gap:10px;margin:2px 0;padding:10px 11px;border-radius:9px;color:#526174;text-decoration:none}.settings5-nav a span{display:grid;place-items:center;width:25px;font-size:16px}.settings5-nav a b{font-size:10px}.settings5-nav a:hover{background:#f4f7fb}.settings5-nav a.active{background:#eaf2ff;color:#1f55a4;box-shadow:inset 3px 0 #2563eb}
.settings5-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-bottom:17px}.settings5-summary-card{display:flex;align-items:center;gap:13px;padding:17px;text-decoration:none;color:inherit}.settings5-summary-card>span{display:grid;place-items:center;width:43px;height:43px;border-radius:12px;background:#eff5ff;font-size:21px}.settings5-summary-card b,.settings5-summary-card small{display:block}.settings5-summary-card b{font-size:12px}.settings5-summary-card small{margin-top:4px;color:var(--muted);font-size:9px;line-height:1.4}.settings5-summary-card:hover{border-color:#b9cff4;transform:translateY(-1px)}
.settings5-checklist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.settings5-checklist a{display:flex;gap:11px;padding:13px;border:1px solid #e8edf5;border-radius:11px;color:inherit;text-decoration:none;background:#fbfcfe}.settings5-checklist a>span{font-size:19px}.settings5-checklist b,.settings5-checklist small{display:block}.settings5-checklist b{font-size:11px}.settings5-checklist small{margin-top:4px;color:var(--muted);font-size:9px;line-height:1.45}
.settings5-two-column{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px;align-items:start}.settings5-action-form{margin-top:9px}.settings5-switch{display:grid!important;grid-template-columns:22px minmax(0,1fr);grid-template-areas:"check title" "check help";align-items:start;column-gap:9px;padding:11px 12px;border:1px solid #e5eaf2;border-radius:10px;background:#fafbfd;font-weight:400!important}.settings5-switch input{grid-area:check;width:18px!important;height:18px;margin:1px 0 0;padding:0!important;box-shadow:none!important}.settings5-switch span{grid-area:title;font-size:11px;font-weight:800}.settings5-switch small{grid-area:help;margin-top:3px;color:var(--muted);font-size:9px;line-height:1.45}
.settings5-day-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}.settings5-day-grid label{display:flex;align-items:center;justify-content:center;gap:5px;padding:9px 5px;border:1px solid #e3e8f0;border-radius:9px;background:#fafbfd;font-size:9px!important;cursor:pointer}.settings5-day-grid input{width:14px!important;height:14px;padding:0!important}
.settings5-rule-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.settings5-template-layout{grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr)}.settings5-template-list{padding:7px 18px}.settings5-template-list article{display:flex;justify-content:space-between;gap:13px;padding:14px 0;border-bottom:1px solid #edf0f5}.settings5-template-list article:last-child{border:0}.settings5-template-list article>div{min-width:0;flex:1}.settings5-template-list h3{margin:7px 0 4px;font-size:12px}.settings5-template-list code{display:inline-block;margin-bottom:6px;padding:3px 6px;border-radius:5px;background:#17243d;color:#d5e6ff;font-size:8px}.settings5-template-list p{margin:0;color:#4e5c70;font-size:9px;line-height:1.55;overflow-wrap:anywhere}.settings5-template-list form{flex:0 0 auto}
.settings5-backup-hero{margin-bottom:17px}.settings5-inline-actions{display:flex;align-items:center;gap:8px}.settings5-inline-actions form{margin:0}.settings5-health-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:17px}.settings5-health-item{display:flex;align-items:center;gap:11px;padding:12px;border:1px solid #e5eaf2;border-radius:11px;background:#fafbfd}.settings5-health-item.ok{background:#f1fbf5;border-color:#d3eedc}.settings5-health-item.warn{background:#fff9ed;border-color:#f1dfb9}.settings5-health-item>span{font-size:19px}.settings5-health-item b,.settings5-health-item small{display:block}.settings5-health-item b{font-size:11px}.settings5-health-item small{margin-top:3px;color:var(--muted);font-size:9px;line-height:1.4}
.settings5-content .form-panel,.settings5-content .panel{min-width:0}.settings5-content input,.settings5-content textarea,.settings5-content select{width:100%;max-width:100%;box-sizing:border-box}.settings5-content table{min-width:650px}.settings5-content .detail-list dd{max-width:70%;overflow-wrap:anywhere}
@media(max-width:1050px){.settings5-layout{grid-template-columns:190px minmax(0,1fr)}.settings5-day-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.settings5-two-column,.settings5-template-layout{grid-template-columns:1fr}.settings5-nav a b{font-size:9px}}
@media(max-width:850px){.settings5-layout{grid-template-columns:1fr}.settings5-nav{position:static;display:flex;gap:6px;overflow-x:auto;padding:7px}.settings5-nav a{flex:0 0 auto;margin:0;padding:9px 10px}.settings5-nav a span{width:auto}.settings5-summary-grid,.settings5-checklist,.settings5-rule-grid,.settings5-health-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.settings5-hero{align-items:flex-start;padding:16px}.settings5-hero-status{display:none}.settings5-hero-icon{flex-basis:43px;height:43px;font-size:21px}.settings5-summary-grid,.settings5-checklist,.settings5-rule-grid,.settings5-health-grid{grid-template-columns:1fr}.settings5-day-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.settings5-content .form-grid{grid-template-columns:1fr}.settings5-nav a b{display:none}.settings5-nav a span{font-size:18px}.settings5-template-list article{align-items:flex-start}.settings5-inline-actions{flex-direction:column;align-items:flex-start}}


/* Percakapan WhatsApp nyata v5.2 */
.simulation-warning{margin:10px 14px 0;padding:9px 11px;border:1px solid #f5d58b;border-radius:9px;background:#fff9e8;color:#7a5814;font-size:10px;line-height:1.45}
.composer{flex-wrap:wrap}.composer-wa-account{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border:1px solid #dfe7f2;border-radius:9px;background:#f8fbff;color:#4a5a70;font-size:9px;font-weight:700}.composer-wa-account select{flex:1;min-width:0;padding:7px 9px;border:1px solid #ccd8e7;border-radius:7px;background:#fff}.is-hidden{display:none!important}.send-wa-link{color:#167847!important;font-weight:800!important}
#newConversationAccountWrap small,.modal-card label small{display:block;margin-top:4px;color:var(--muted);font-size:9px;font-weight:400;line-height:1.4}
@media(max-width:680px){.composer-wa-account{align-items:stretch;flex-direction:column}.composer-wa-account select{width:100%}.simulation-warning{margin-left:10px;margin-right:10px}}

/* =========================================================
   TES & BELAJAR AI — V5.3
   ========================================================= */
.ai-lab-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 26px;margin-bottom:18px;background:linear-gradient(135deg,#f8fbff 0%,#eef5ff 100%)}
.ai-lab-hero-copy{display:flex;align-items:center;gap:16px;min-width:0}.ai-lab-hero-copy h2{margin:0 0 6px;font-size:24px}.ai-lab-hero-copy p{margin:0;color:var(--muted);max-width:780px;line-height:1.55}.ai-lab-hero-icon{width:56px;height:56px;display:grid;place-items:center;border-radius:18px;background:#fff;box-shadow:0 10px 28px rgba(37,99,235,.12);font-size:28px;flex:0 0 auto}.ai-lab-status{padding:12px 16px;border-radius:14px;display:flex;flex-direction:column;min-width:150px;text-align:center;border:1px solid}.ai-lab-status.is-ready{background:#ecfdf3;border-color:#bbf7d0;color:#166534}.ai-lab-status.is-warning{background:#fffbeb;border-color:#fde68a;color:#92400e}.ai-lab-status strong{font-size:14px}.ai-lab-status span{font-size:11px;margin-top:3px}
.ai-lab-stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:18px}.ai-lab-stat{display:flex;align-items:center;gap:13px;padding:17px 18px}.ai-lab-stat>span{font-size:25px;width:44px;height:44px;display:grid;place-items:center;border-radius:14px;background:#f1f5f9}.ai-lab-stat b{display:block;font-size:22px;line-height:1}.ai-lab-stat small{display:block;color:var(--muted);margin-top:5px}
.ai-lab-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(340px,.85fr);gap:18px;align-items:start;margin-bottom:18px}.ai-lab-test-panel,.ai-lab-profile-panel,.ai-lab-learning-panel{padding:22px}.ai-lab-form-grid{display:grid;grid-template-columns:1.25fr .8fr .8fr;gap:12px}.ai-lab-form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.ai-lab-form-grid label,.ai-lab-profile-panel label,.ai-lab-source-select label{min-width:0}
.ai-lab-chat{height:440px;overflow:auto;border:1px solid #dbe4f0;border-radius:18px;background:linear-gradient(180deg,#f8fafc,#f1f5f9);padding:18px;display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth}.ai-lab-chat-empty{margin:auto;text-align:center;color:var(--muted);max-width:320px}.ai-lab-chat-empty span{display:block;font-size:38px;margin-bottom:8px}.ai-lab-chat-empty strong{display:block;color:var(--text);font-size:16px}.ai-lab-chat-empty p{margin:6px 0 0;line-height:1.5}.ai-lab-chat-row{display:flex}.ai-lab-chat-row.customer{justify-content:flex-end}.ai-lab-chat-row.ai{justify-content:flex-start}.ai-lab-chat-bubble{max-width:min(82%,720px);padding:12px 14px;border-radius:16px;box-shadow:0 3px 12px rgba(15,23,42,.06)}.ai-lab-chat-row.customer .ai-lab-chat-bubble{background:#2563eb;color:#fff;border-bottom-right-radius:5px}.ai-lab-chat-row.ai .ai-lab-chat-bubble{background:#fff;border:1px solid #e2e8f0;border-bottom-left-radius:5px}.ai-lab-chat-meta{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:6px;font-size:11px}.ai-lab-chat-meta span{opacity:.72;text-align:right}.ai-lab-chat-text{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.55;font-size:14px}.ai-lab-composer{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}.ai-lab-composer textarea{min-height:80px;resize:vertical}.ai-lab-composer button{height:46px;white-space:nowrap}
.ai-lab-profile-panel{position:sticky;top:18px}.ai-lab-profile-form{margin-top:16px;padding-top:16px;border-top:1px dashed #dbe4f0}.switch-row{display:flex!important;align-items:flex-start;gap:10px;padding:12px;border:1px solid #dbe4f0;border-radius:13px;background:#f8fafc}.switch-row input{width:auto!important;margin-top:3px}.switch-row span{display:block}.switch-row strong,.switch-row small{display:block}.switch-row small{color:var(--muted);margin-top:3px;line-height:1.4}
.ai-lab-learning-head{align-items:end}.ai-lab-source-select{min-width:280px}.ai-lab-source-select label{margin:0}.ai-lab-safety-note{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:14px;background:#eff6ff;border:1px solid #bfdbfe;color:#1e3a8a;margin-bottom:16px}.ai-lab-safety-note span{font-size:20px}.ai-lab-safety-note p{margin:0;line-height:1.5;font-size:13px}.ai-lab-candidate-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.ai-lab-candidate{border:1px solid #dbe4f0;border-radius:16px;padding:16px;background:#fff;box-shadow:0 4px 16px rgba(15,23,42,.04)}.ai-lab-candidate.is-verified{border-color:#bbf7d0}.ai-lab-candidate.needs-review{border-color:#fde68a}.ai-lab-candidate>header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px}.ai-lab-candidate>header>div{display:flex;align-items:center;gap:8px}.candidate-number{font-size:11px;font-weight:800;background:#e2e8f0;color:#475569;padding:4px 7px;border-radius:999px}.candidate-badge{font-size:11px;font-weight:700;padding:5px 8px;border-radius:999px;background:#f1f5f9;color:#475569}.is-verified .candidate-badge{background:#dcfce7;color:#166534}.needs-review .candidate-badge{background:#fef3c7;color:#92400e}.ai-lab-candidate textarea{resize:vertical}.ai-lab-candidate-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.check-inline{display:flex!important;align-items:center;gap:7px;margin:0!important;font-size:13px;color:#475569}.check-inline input{width:auto!important}.empty-state.compact{padding:34px 20px}.empty-state.compact h3{margin:7px 0 4px}.empty-state.compact p{margin:0}
@media(max-width:1180px){.ai-lab-layout{grid-template-columns:1fr}.ai-lab-profile-panel{position:static}.ai-lab-candidate-list{grid-template-columns:1fr}.ai-lab-form-grid{grid-template-columns:1fr 1fr}.ai-lab-form-grid>label:first-child{grid-column:1/-1}}
@media(max-width:760px){.ai-lab-hero{align-items:flex-start;flex-direction:column;padding:19px}.ai-lab-status{width:100%}.ai-lab-stat-grid{grid-template-columns:1fr}.ai-lab-test-panel,.ai-lab-profile-panel,.ai-lab-learning-panel{padding:16px}.ai-lab-form-grid,.ai-lab-form-grid.two{grid-template-columns:1fr}.ai-lab-form-grid>label:first-child{grid-column:auto}.ai-lab-chat{height:390px;padding:12px}.ai-lab-chat-bubble{max-width:92%}.ai-lab-composer{grid-template-columns:1fr}.ai-lab-composer button{width:100%}.ai-lab-learning-head{align-items:stretch;flex-direction:column}.ai-lab-source-select{min-width:0;width:100%}.ai-lab-candidate-actions{align-items:stretch;flex-direction:column}.ai-lab-candidate-actions .btn{width:100%}}
.btn.secondary{background:#eaf2ff;color:#2457a6}.btn.secondary:hover{background:#dbeafe}


/* Foto profil WhatsApp realtime — V5.3.2
   Aturan dibuat eksplisit agar foto tidak keluar dari lingkaran avatar meski ada CSS lama/cache browser. */
.avatar{position:relative;overflow:hidden;border-radius:50%;isolation:isolate}
.avatar-fallback{display:grid;place-items:center;width:100%;height:100%;position:absolute;inset:0;z-index:1;border-radius:inherit}
.avatar.has-photo>img,.avatar>img{position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;min-width:100%!important;min-height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:cover!important;object-position:center!important;border:0!important;border-radius:inherit!important;margin:0!important;padding:0!important;z-index:2;background:#e9effa}
.large-avatar{width:43px!important;height:43px!important;min-width:43px!important;min-height:43px!important;max-width:43px!important;max-height:43px!important;flex:0 0 43px}
.huge-avatar{width:64px!important;height:64px!important;min-width:64px!important;min-height:64px!important;max-width:64px!important;max-height:64px!important;flex:0 0 64px}
.chat-head>.avatar{align-self:center}
.profile-big>.avatar{display:grid;margin:0 auto 9px}
.profile-big>strong,.profile-big>span,.profile-big>.profile-sync-note{position:relative;z-index:3}
.profile-sync-note{margin-top:5px;color:var(--muted);font-size:9px;line-height:1.35;max-width:180px}


/* =========================================================
   KIRIM MEDIA WHATSAPP — V5.3.3
   ========================================================= */
.composer-entry{display:flex;align-items:flex-end;gap:8px;width:100%}.composer-entry textarea{min-width:0}.composer-entry>.btn{min-height:42px;white-space:nowrap}.composer-attach{width:42px;height:42px;flex:0 0 42px;border:1px solid #dbe4f0;border-radius:11px;background:#f8fafc;color:#334155;display:grid;place-items:center;font-size:20px;cursor:pointer}.composer-attach:hover{background:#eef4ff;border-color:#b8cdf5}.composer-media-note{width:100%;display:block;color:var(--muted);font-size:9px;padding:0 2px}.composer-media-preview{width:100%}.composer-media-card{display:grid;grid-template-columns:52px minmax(0,1fr) 30px;gap:10px;align-items:center;padding:8px 10px;border:1px solid #cfe0f8;background:#f5f9ff;border-radius:11px}.composer-media-thumb{width:52px;height:52px;border-radius:9px;background:#e9effa;display:grid;place-items:center;overflow:hidden;font-size:24px}.composer-media-thumb img{width:100%;height:100%;object-fit:cover;display:block}.composer-media-copy{min-width:0;display:flex;flex-direction:column}.composer-media-copy strong{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.composer-media-copy small{margin-top:3px;color:var(--muted);font-size:9px}.composer-media-remove{border:0;background:#fff;color:#64748b;width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:18px;line-height:1}.composer-media-remove:hover{background:#fee2e2;color:#b91c1c}
.message-media{margin-top:8px;max-width:360px}.message-media img,.message-media video{display:block;max-width:100%;width:auto;height:auto;max-height:320px;border-radius:10px;background:#e2e8f0}.message-media-image a{display:block}.message-media-video video{width:100%;min-width:220px}.message-media-audio audio{display:block;width:min(320px,100%);max-width:100%}.message-media-file a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;padding:9px 10px;border:1px solid rgba(100,116,139,.18);border-radius:9px;background:rgba(255,255,255,.62);text-decoration:none;color:inherit;font-size:11px}.message-media-file a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.message-media-file a b{color:var(--blue);font-size:10px;white-space:nowrap}
@media(max-width:680px){.composer-entry{align-items:stretch}.composer-entry>.btn{padding-left:10px;padding-right:10px}.composer-attach{align-self:flex-end}.message-media{max-width:100%}.message-media-video video{min-width:0}}

/* =========================================================
   V5.4.0 — Percakapan Modern Final
   Header compact + inbox modern + chat WhatsApp-like + info pelanggan.
   ========================================================= */
.chat-topbar-modern{position:sticky;top:0;z-index:12;min-height:52px;margin:-6px 0 8px;padding:7px 10px;background:rgba(246,248,251,.94);backdrop-filter:blur(12px);border-bottom:1px solid rgba(220,227,238,.85)}
.chat-topbar-title{display:flex;align-items:center;gap:10px;min-width:0}.chat-topbar-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#eaf1ff;font-size:17px}.chat-topbar-title h1{display:flex;align-items:baseline;gap:7px;font-size:20px;line-height:1.1}.chat-topbar-title h1 small{font-size:11px;color:var(--muted);font-weight:700}.chat-topbar-title p{margin:2px 0 0;font-size:10px}.chat-ai-mode{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:999px;font-size:10px;font-weight:800;background:#eef2f7;color:#536079;white-space:nowrap}.chat-ai-mode i{width:7px;height:7px;border-radius:50%;background:#94a3b8}.chat-ai-mode.is-online{background:#e8f8ee;color:#137a3c}.chat-ai-mode.is-online i{background:#22c55e}.chat-ai-mode.is-local{background:#fff5e6;color:#94610a}.chat-ai-mode.is-local i{background:#f59e0b}
.wa-filter-tabs-modern{position:sticky;top:52px;z-index:11;margin:0 -2px 8px;padding:3px 2px 7px;background:linear-gradient(#f6f8fb 72%,rgba(246,248,251,0));gap:6px}.wa-filter-tabs-modern a{padding:6px 9px;min-height:31px;box-shadow:none;font-size:10px}.wa-filter-tabs-modern a span{max-width:145px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wa-filter-tabs-modern a b{font-size:9px;padding:2px 5px;border-radius:999px;background:#eef2f7;color:#64748b}.wa-filter-tabs-modern a em{display:grid;place-items:center;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:#ef4444;color:#fff;font-size:8px;font-style:normal;font-weight:900}.wa-filter-tabs-modern a.active b{background:rgba(255,255,255,.16);color:#fff}.wa-filter-tabs-modern a.active em{background:#fff;color:#dc2626}
.wa-filter-tabs-modern+.chat-layout-modern{height:calc(100vh - 126px)}.chat-layout-modern{grid-template-columns:minmax(270px,300px) minmax(430px,1fr) minmax(245px,270px);gap:10px}
.modern-inbox-head{padding:11px 13px}.modern-inbox-head h2{font-size:15px}.modern-inbox-head small{display:block;margin-top:2px;font-size:9px}.modern-inbox-head small strong{color:#dc2626}.modern-search{position:relative;padding:8px 10px 6px;border-bottom:0}.modern-search span{position:absolute;left:20px;top:16px;color:#94a3b8;font-size:16px;pointer-events:none}.modern-search input{padding:9px 10px 9px 30px;background:#f8fafc;border-radius:10px;font-size:11px}
.inbox-quick-filters{display:flex;gap:4px;overflow-x:auto;padding:3px 10px 8px;border-bottom:1px solid var(--border);scrollbar-width:none}.inbox-quick-filters::-webkit-scrollbar{display:none}.inbox-quick-filters button{flex:0 0 auto;border:0;border-radius:999px;padding:5px 8px;background:#f1f5f9;color:#64748b;font-size:9px;font-weight:800;cursor:pointer}.inbox-quick-filters button.active{background:#17233b;color:#fff}.new-conversation-banner{margin:7px 10px 0;padding:7px 10px;border:0;border-radius:999px;background:#2563eb;color:#fff;font-size:10px;font-weight:800;cursor:pointer;box-shadow:0 5px 16px rgba(37,99,235,.2)}
.modern-conversation-item{min-height:72px;padding:9px 10px 9px 12px;gap:9px;border-left:3px solid transparent}.modern-conversation-item.selected{background:#eef5ff;border-left-color:#2563eb}.modern-conversation-item.has-unread:not(.selected){background:#fbfdff}.modern-conversation-item.has-unread .conv-copy strong{font-weight:900;color:#0f172a}.modern-conversation-item.is-pinned .conv-copy strong:after{content:""}.modern-conversation-item .avatar{width:40px;height:40px;min-width:40px}.modern-conversation-item .conv-copy{padding-right:42px}.conv-title-line{align-items:center}.modern-conversation-item .conv-copy strong{font-size:12px}.modern-conversation-item .conv-copy time{font-size:9px}.modern-conversation-item .conv-labels{margin-top:2px}.modern-conversation-item .conv-copy p{margin-top:3px;font-size:10px;text-overflow:ellipsis}.modern-conversation-item .category-pill,.modern-conversation-item .wa-account-pill{font-size:8px;padding:2px 5px}.conv-handler{position:absolute;right:28px;bottom:9px;display:grid;place-items:center;width:20px;height:20px;border-radius:7px;font-size:10px;background:#f1f5f9}.conv-handler.is-ai{background:#e8f8ee}.conv-handler.is-admin{background:#fff4df}.conv-pin{position:absolute;right:7px;bottom:10px;width:18px;height:18px;opacity:.25;font-size:11px;cursor:pointer;filter:grayscale(1);transition:.15s}.conv-pin:hover,.conv-pin.active{opacity:1;filter:none;transform:scale(1.05)}.modern-conversation-item .unread-badge{position:absolute;right:8px;top:30px;min-width:18px;height:18px;padding:0 5px;display:grid;place-items:center;border-radius:999px;background:#22c55e;color:#fff;font-size:8px}.modern-conversation-item.has-unread .conv-handler{right:30px;bottom:8px}.modern-conversation-item.has-unread .conv-pin{display:none}
.modern-chat-panel{position:relative}.modern-chat-head{padding:9px 12px;min-height:67px;gap:9px}.modern-chat-head .large-avatar{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;max-width:40px!important;max-height:40px!important;flex-basis:40px}.chat-title-name{display:flex;align-items:center;gap:5px}.modern-chat-head .chat-title h2{font-size:14px}.modern-chat-head .chat-title p{margin:1px 0;font-size:10px}.chat-inline-status{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-top:3px}.chat-inline-status .wa-account-pill,.chat-inline-status .status-chip{font-size:8px;padding:2px 6px}.compact-chat-actions{gap:5px}.compact-chat-actions .btn{padding:7px 9px;font-size:10px;min-height:34px}.urgent-chat-note{padding:5px 12px;background:#fff1f2;color:#be123c;border-bottom:1px solid #fecdd3;font-size:9px;font-weight:700}
.modern-chat-panel .messages{background:#fff;padding:15px 16px 12px;scroll-behavior:smooth}.message-date-separator{display:flex;align-items:center;justify-content:center;margin:8px 0 14px;position:relative}.message-date-separator:before{content:"";position:absolute;left:0;right:0;height:1px;background:#eef2f7}.message-date-separator span{position:relative;z-index:1;padding:4px 9px;border:1px solid #e7ebf2;border-radius:999px;background:#f8fafc;color:#7b8798;font-size:8px;font-weight:800}.modern-chat-panel .message-row{margin-bottom:7px}.modern-chat-panel .message-row.grouped-message{margin-top:-3px}.modern-chat-panel .message-bubble{position:relative;max-width:76%;padding:9px 11px 7px;border-radius:14px;box-shadow:0 2px 8px rgba(15,23,42,.035)}.modern-chat-panel .message-row.customer .message-bubble{background:#fff;border-color:#e3e8f0;border-bottom-left-radius:5px}.modern-chat-panel .message-row.admin .message-bubble,.modern-chat-panel .message-row.ai .message-bubble{background:#eaf9ef;border-color:#d4efdc;border-bottom-right-radius:5px}.modern-chat-panel .message-row.ai .message-bubble{background:#eefaf2}.modern-chat-panel .message-row.is-starred .message-bubble{box-shadow:0 0 0 2px #fbbf24 inset,0 2px 8px rgba(15,23,42,.04)}.modern-chat-panel .message-meta{margin-bottom:4px}.modern-chat-panel .message-meta strong{font-size:9px;color:#324155}.modern-chat-panel .message-meta time{font-size:8px}.modern-chat-panel .message-text{font-size:12px;line-height:1.45}.grouped-message .message-meta strong{opacity:.72}.message-reply-quote{display:flex;flex-direction:column;gap:2px;margin:-2px -2px 7px;padding:6px 8px;border-left:3px solid #3b82f6;border-radius:7px;background:rgba(226,232,240,.55)}.message-reply-quote strong{font-size:8px;color:#2563eb}.message-reply-quote span{font-size:9px;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px}.message-bottom-line{display:flex;justify-content:flex-end;align-items:center;gap:5px;min-height:12px;margin-top:4px}.delivery-status{font-size:8px;color:#64748b}.status-read{color:#2563eb}.status-failed{color:#dc2626}.star-indicator{color:#d97706;font-size:9px}.message-tools{position:absolute;top:-15px;right:6px;display:flex;gap:2px;padding:3px;border:1px solid #e2e8f0;border-radius:8px;background:#fff;box-shadow:0 5px 16px rgba(15,23,42,.1);opacity:0;pointer-events:none;transform:translateY(3px);transition:.15s;z-index:4}.message-row.customer .message-tools{left:6px;right:auto}.message-bubble:hover .message-tools,.message-bubble:focus-within .message-tools{opacity:1;pointer-events:auto;transform:none}.message-tools button{border:0;background:transparent;border-radius:5px;padding:4px 5px;color:#64748b;font-size:8px;font-weight:700;cursor:pointer}.message-tools button:hover{background:#eff6ff;color:#2563eb}.chat-new-message-button{position:absolute;left:50%;bottom:108px;z-index:7;transform:translateX(-50%);border:0;border-radius:999px;padding:7px 11px;background:#17233b;color:#fff;font-size:9px;font-weight:800;box-shadow:0 8px 22px rgba(15,23,42,.22);cursor:pointer}
.compact-composer-tabs{min-height:25px;padding:3px 12px 0}.compact-composer-tabs span{padding:5px 7px;color:#64748b;font-size:9px;font-weight:800}.modern-composer{position:relative;display:block;padding:6px 10px 9px;border-top:1px solid #eef2f7;background:#fff}.modern-composer-entry{display:grid;grid-template-columns:38px minmax(0,1fr) 38px auto;align-items:end;gap:6px}.modern-composer-entry .composer-attach,.composer-ai-button{width:38px;height:38px;min-width:38px;border:1px solid #dbe4f0;border-radius:11px;background:#f8fafc;color:#334155;display:grid;place-items:center;font-size:17px;cursor:pointer}.modern-composer-entry textarea{min-height:38px;max-height:110px;padding:9px 11px!important;border-radius:12px!important;font-size:12px;line-height:1.35;overflow-y:auto}.composer-send{min-height:38px;padding:0 12px!important;white-space:nowrap;font-size:11px!important}.ai-assist-wrap{position:relative}.ai-assist-menu{position:absolute;right:0;bottom:45px;z-index:18;min-width:180px;padding:5px;border:1px solid #dfe6ef;border-radius:11px;background:#fff;box-shadow:0 14px 35px rgba(15,23,42,.17)}.ai-assist-menu button{display:block;width:100%;border:0;background:transparent;padding:8px 9px;border-radius:7px;text-align:left;color:#334155;font-size:10px;cursor:pointer}.ai-assist-menu button:hover{background:#f1f5f9}.composer-media-note{padding:3px 45px 0!important;font-size:8px!important}.composer-reply-preview{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 42px 6px;padding:6px 8px;border-left:3px solid #2563eb;border-radius:7px;background:#eff6ff}.composer-reply-preview>div{display:flex;flex-direction:column;min-width:0}.composer-reply-preview strong{font-size:8px;color:#2563eb}.composer-reply-preview span{font-size:9px;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.composer-reply-preview button{border:0;background:transparent;color:#64748b;font-size:17px;cursor:pointer}.composer-media-preview{margin:0 42px 6px}.composer-wa-account{margin-bottom:6px}
.modern-customer-panel{padding:14px;overflow:auto}.modern-customer-panel h3{margin:0 0 12px;font-size:12px}.customer-identity-compact{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;align-items:center;padding-bottom:11px;border-bottom:1px solid #edf1f5}.customer-identity-compact .huge-avatar{width:52px!important;height:52px!important;min-width:52px!important;min-height:52px!important;max-width:52px!important;max-height:52px!important;margin:0;font-size:18px}.customer-identity-compact>div{display:flex;flex-direction:column;align-items:flex-start;min-width:0}.customer-identity-compact strong{font-size:14px}.customer-identity-compact span:not(.wa-account-pill){margin:2px 0 5px;color:#64748b;font-size:9px}.customer-quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:9px 0}.customer-quick-actions .btn{padding:7px 6px;font-size:9px}.compact-detail-list{margin:8px 0}.compact-detail-list div{padding:7px 0;font-size:9px}.customer-ai-state{font-size:8px}.customer-ai-state.active{color:#16803f}.customer-ai-state.manual{color:#9a6504}.customer-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:10px 0}.customer-stats-grid div{padding:8px;border:1px solid #e7ecf3;border-radius:9px;background:#fafbfd;display:flex;flex-direction:column}.customer-stats-grid b{font-size:13px}.customer-stats-grid span{margin-top:2px;color:#7b8798;font-size:8px}.customer-style-card{padding:9px;border:1px solid #e5ebf3;border-radius:10px;background:#f8fafc}.customer-style-card>div{display:flex;align-items:center;justify-content:space-between;gap:8px}.customer-style-card strong{font-size:9px}.customer-style-card a{font-size:8px;color:#2563eb;text-decoration:none;font-weight:800}.customer-style-card p{margin:5px 0 2px;font-size:9px;line-height:1.4}.customer-style-card small{font-size:8px;color:#64748b;line-height:1.35}.customer-note-card,.routing-safe-details{margin-top:9px;border:1px solid #e7ecf3;border-radius:10px;background:#fff;overflow:hidden}.customer-note-card summary,.routing-safe-details summary{display:flex;justify-content:space-between;gap:8px;padding:9px 10px;cursor:pointer;list-style:none;font-size:9px;font-weight:800}.customer-note-card summary::-webkit-details-marker,.routing-safe-details summary::-webkit-details-marker{display:none}.customer-note-card summary span,.routing-safe-details summary span{color:#2563eb;font-size:8px}.customer-note-card form{padding:0 9px 9px}.customer-note-card textarea{font-size:9px}.customer-note-card .btn{font-size:9px}.customer-complete-btn{margin-top:9px;font-size:9px}.routing-safe-details{background:#fff9ed;border-color:#f5e5bd}.routing-safe-details p{margin:0;padding:0 10px 10px;color:#75571b;font-size:8px;line-height:1.45}
@media(max-width:1180px){.chat-layout-modern{grid-template-columns:270px minmax(430px,1fr)}.modern-customer-panel{display:none}}
@media(max-width:850px){.chat-topbar-modern{top:0}.wa-filter-tabs-modern{top:52px}.wa-filter-tabs-modern+.chat-layout-modern{height:auto}.chat-layout-modern{grid-template-columns:1fr}.modern-conversation-item{min-height:68px}.modern-chat-panel{min-height:650px}.modern-chat-panel .messages{min-height:430px}.compact-chat-actions .btn span{display:none}}
@media(max-width:600px){.chat-topbar-title h1{font-size:17px}.chat-topbar-title h1 small{font-size:9px}.chat-topbar-title p{display:none}.chat-ai-mode{font-size:0;padding:6px}.chat-ai-mode:first-letter{font-size:14px}.wa-filter-tabs-modern a{padding:6px 8px}.wa-filter-tabs-modern a b{display:none}.modern-chat-head{align-items:flex-start}.compact-chat-actions{width:auto!important;margin-left:auto!important}.compact-chat-actions form,.compact-chat-actions .btn{flex:0 0 auto!important}.compact-chat-actions .btn{font-size:0;padding:7px}.compact-chat-actions .btn:first-letter{font-size:14px}.modern-chat-panel .message-bubble{max-width:88%}.modern-composer-entry{grid-template-columns:36px minmax(0,1fr) 36px 42px}.modern-composer-entry .composer-attach,.composer-ai-button{width:36px;height:36px;min-width:36px}.composer-send{width:42px!important;font-size:0!important;padding:0!important}.composer-send::after{content:"➤";font-size:15px}.composer-media-note{padding-left:40px!important}.message-tools{opacity:1;pointer-events:auto;position:static;margin-top:6px;box-shadow:none;border:0;background:transparent;padding:0}.message-tools button{background:rgba(255,255,255,.7)}}

/* =========================================================
   V5.4.1 — Kotak Masuk compact & rapi
   Memperbaiki filter cepat yang terpotong/berdesakan.
   ========================================================= */
.modern-inbox-head{
  min-height:62px;
  padding:11px 13px 9px;
  gap:10px;
  flex-wrap:nowrap;
}
.modern-inbox-head>div{min-width:0;flex:1 1 auto}
.modern-inbox-head h2{margin:0;font-size:15px;line-height:1.2}
.modern-inbox-head small{margin-top:3px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.modern-inbox-head .icon-btn{flex:0 0 36px;width:36px;height:36px;border-radius:10px}

.modern-search{
  padding:9px 11px 7px;
  border-bottom:0;
}
.modern-search span{
  left:21px;
  top:50%;
  transform:translateY(-50%);
  margin-top:1px;
  font-size:14px;
}
.modern-search input{
  height:38px;
  padding:8px 11px 8px 31px;
  border:1px solid #dfe6ef;
  border-radius:10px;
  background:#f8fafc;
  font-size:10px;
  line-height:1.2;
}

.inbox-quick-filters{
  display:grid;
  grid-template-columns:minmax(52px,.82fr) minmax(78px,1.22fr) minmax(40px,.62fr) minmax(52px,.82fr);
  align-items:stretch;
  gap:5px;
  min-height:38px;
  padding:2px 11px 9px;
  overflow:visible;
  border-bottom:1px solid var(--border);
}
.inbox-quick-filters button{
  width:100%;
  min-width:0;
  height:28px;
  padding:0 6px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #e5eaf2;
  border-radius:8px;
  background:#f8fafc;
  color:#64748b;
  font-size:8.5px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  box-shadow:none;
}
.inbox-quick-filters button:hover{background:#eef4ff;color:#245bb0;border-color:#d7e4fb}
.inbox-quick-filters button.active{
  background:#17233b;
  border-color:#17233b;
  color:#fff;
  box-shadow:0 3px 8px rgba(23,35,59,.12);
}

@media(max-width:360px){
  .inbox-quick-filters{
    grid-template-columns:repeat(2,minmax(0,1fr));
    min-height:70px;
  }
  .inbox-quick-filters button{height:27px}
}

/* =========================================================
   V5.4.2 — Workspace Percakapan Full Height
   Menghilangkan ruang kosong bawah, menjaga 3 panel memenuhi
   tinggi viewport, scroll independen, composer tetap di bawah,
   dan mencegah overflow horizontal pada layar desktop.
   ========================================================= */
.main-content-chat{
  height:100vh;
  height:100dvh;
  min-height:0;
  max-width:100%;
  padding:10px 14px 0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.main-content-chat .chat-topbar-modern{
  position:relative;
  top:auto;
  z-index:12;
  flex:0 0 auto;
  min-height:48px;
  margin:0 0 6px;
  padding:6px 9px;
}
.main-content-chat .wa-filter-tabs-modern{
  position:relative;
  top:auto;
  z-index:11;
  flex:0 0 auto;
  width:100%;
  min-width:0;
  max-width:100%;
  margin:0 0 6px;
  padding:2px 1px 5px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
}
.main-content-chat .wa-filter-tabs-modern::-webkit-scrollbar{display:none}
.main-content-chat>.alert{
  flex:0 0 auto;
  margin-bottom:6px;
}
.main-content-chat .wa-filter-tabs-modern+.chat-layout-modern,
.main-content-chat .chat-layout-modern{
  flex:1 1 auto;
  width:100%;
  max-width:100%;
  height:auto!important;
  min-height:0;
  grid-template-columns:minmax(250px,300px) minmax(0,1fr) minmax(225px,270px);
  gap:10px;
  overflow:hidden;
}
.main-content-chat .chat-layout-modern>*{
  min-width:0;
  min-height:0;
  max-width:100%;
}
.main-content-chat .conversation-list,
.main-content-chat .modern-chat-panel,
.main-content-chat .modern-customer-panel{
  height:100%;
  min-height:0;
  overflow:hidden;
}
.main-content-chat .conversation-list{
  display:flex;
  flex-direction:column;
}
.main-content-chat .modern-inbox-head,
.main-content-chat .modern-search,
.main-content-chat .inbox-quick-filters,
.main-content-chat .new-conversation-banner{
  flex:0 0 auto;
}
.main-content-chat .conversation-items{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
}
.main-content-chat .modern-chat-panel{
  display:flex;
  flex-direction:column;
}
.main-content-chat .modern-chat-head,
.main-content-chat .urgent-chat-note,
.main-content-chat .simulation-warning,
.main-content-chat .compact-composer-tabs,
.main-content-chat .modern-composer{
  flex:0 0 auto;
}
.main-content-chat .modern-chat-panel .messages{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
}
.main-content-chat .modern-composer{
  position:relative;
  bottom:auto;
  z-index:8;
  width:100%;
  min-width:0;
  background:#fff;
}
.main-content-chat .modern-composer-entry{
  min-width:0;
}
.main-content-chat .modern-composer-entry textarea{
  min-width:0;
  width:100%;
}
.main-content-chat .modern-customer-panel{
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
}
.main-content-chat .panel{
  min-width:0;
}

/* Desktop: cegah scrollbar horizontal akibat min-width lama / zoom browser. */
@media(min-width:851px){
  body.section-chats{overflow:hidden}
  .section-chats .app-shell{
    width:100%;
    max-width:100vw;
    height:100vh;
    height:100dvh;
    min-height:0;
    overflow:hidden;
  }
}

/* Tablet: panel info disembunyikan seperti sebelumnya, chat tetap memenuhi ruang. */
@media(max-width:1180px) and (min-width:851px){
  .main-content-chat .chat-layout-modern{
    grid-template-columns:minmax(245px,290px) minmax(0,1fr);
  }
}

/* Mobile tetap memakai alur halaman normal agar tidak mengunci layar kecil. */
@media(max-width:850px){
  .main-content-chat{
    height:auto;
    min-height:100vh;
    min-height:100dvh;
    padding:10px 10px 24px;
    overflow:visible;
  }
  .main-content-chat .chat-topbar-modern,
  .main-content-chat .wa-filter-tabs-modern{
    position:sticky;
  }
  .main-content-chat .chat-topbar-modern{top:0}
  .main-content-chat .wa-filter-tabs-modern{top:52px}
  .main-content-chat .wa-filter-tabs-modern+.chat-layout-modern,
  .main-content-chat .chat-layout-modern{
    display:grid;
    height:auto!important;
    overflow:visible;
    grid-template-columns:1fr;
  }
  .main-content-chat .conversation-list,
  .main-content-chat .modern-chat-panel{
    height:auto;
  }
  .main-content-chat .conversation-items{
    max-height:58vh;
  }
}


/* =========================================================
   V5.4.3 — Bubble media mengikuti ukuran gambar
   ========================================================= */
.modern-chat-panel .message-bubble.has-media-image,
.modern-chat-panel .message-row:has(.message-media-image) .message-bubble{
  width:fit-content;
  max-width:min(76%,380px);
  min-width:0;
  padding:8px 8px 7px;
}
.modern-chat-panel .message-bubble.has-media-image .message-text,
.modern-chat-panel .message-row:has(.message-media-image) .message-text{
  width:auto;
  max-width:340px;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.modern-chat-panel .message-media-image{
  display:block;
  width:fit-content;
  max-width:340px;
  margin-top:6px;
  border-radius:11px;
  overflow:hidden;
  background:transparent;
}
.modern-chat-panel .message-media-image a{
  display:block;
  width:fit-content;
  max-width:100%;
  border-radius:inherit;
  line-height:0;
  cursor:zoom-in;
}
.modern-chat-panel .message-media-image img{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:340px!important;
  max-height:430px!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:0!important;
  padding:0!important;
  border-radius:10px!important;
  background:transparent!important;
}
.modern-chat-panel .message-bubble.has-media-video,
.modern-chat-panel .message-row:has(.message-media-video) .message-bubble{
  width:min(360px,76%);
  max-width:76%;
}
.media-lightbox{
  position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:24px;
  background:rgba(10,18,32,.88);backdrop-filter:blur(5px)
}
.media-lightbox.is-hidden{display:none!important}
.media-lightbox-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;width:min(94vw,1100px);max-height:92vh}
.media-lightbox-stage img{display:block;max-width:100%;max-height:82vh;width:auto;height:auto;object-fit:contain;border-radius:12px;box-shadow:0 20px 65px rgba(0,0,0,.4);background:#fff}
.media-lightbox-caption{max-width:min(92vw,900px);margin-top:10px;padding:7px 11px;border-radius:999px;background:rgba(15,23,42,.72);color:#fff;font-size:10px;line-height:1.35;text-align:center;overflow-wrap:anywhere}
.media-lightbox-caption:empty{display:none}
.media-lightbox-close{position:fixed;top:14px;right:18px;z-index:10000;width:42px;height:42px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:30px;line-height:1;cursor:pointer}
.media-lightbox-close:hover{background:rgba(255,255,255,.24)}
@media(max-width:600px){
  .modern-chat-panel .message-bubble.has-media-image,
  .modern-chat-panel .message-row:has(.message-media-image) .message-bubble{max-width:90%}
  .modern-chat-panel .message-media-image,
  .modern-chat-panel .message-media-image img{max-width:min(76vw,340px)!important;max-height:62vh!important}
  .media-lightbox{padding:12px}.media-lightbox-stage img{max-height:84vh}
}

/* =========================================================
   V5.5.0 — Fixed Sidebar + Independent Content Scroll
   Berlaku global di semua menu desktop.
   ========================================================= */
.sidebar-close{display:none}

@media(min-width:851px){
  html,body{height:100%;overflow:hidden}
  .app-shell{
    height:100vh;
    height:100dvh;
    min-height:0;
    overflow:hidden;
    grid-template-columns:240px minmax(0,1fr);
  }
  .sidebar{
    position:relative;
    top:auto;
    height:100vh;
    height:100dvh;
    min-height:0;
    overflow:hidden;
    flex:0 0 auto;
  }
  .sidebar-brand{flex:0 0 auto}
  .sidebar nav{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    padding-right:2px;
  }
  .sidebar-footer{
    flex:0 0 auto;
    margin-top:12px;
    background:#0d1b35;
  }
  .main-content{
    height:100vh;
    height:100dvh;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    scroll-behavior:smooth;
  }
  .main-content-chat{
    overflow:hidden!important;
  }
}

/* Mobile/tablet: sidebar menjadi drawer, konten tetap memakai alur normal. */
@media(max-width:850px){
  html,body{height:auto;overflow-x:hidden;overflow-y:auto}
  .app-shell{display:block;height:auto;min-height:100vh;overflow:visible}
  .sidebar{
    position:fixed!important;
    z-index:1000;
    inset:0 auto 0 0;
    width:min(82vw,300px);
    height:100vh!important;
    height:100dvh!important;
    padding-top:18px;
    transform:translateX(-105%);
    transition:transform .22s ease;
    box-shadow:18px 0 40px rgba(7,20,43,.28);
    overflow:hidden;
  }
  .sidebar:target{transform:translateX(0)}
  .sidebar-close{
    display:grid;
    place-items:center;
    position:absolute;
    right:10px;
    top:10px;
    width:34px;
    height:34px;
    border-radius:10px;
    color:#fff;
    text-decoration:none;
    background:rgba(255,255,255,.08);
    font-size:23px;
    z-index:2;
  }
  .sidebar-brand{padding-right:38px;flex:0 0 auto}
  .sidebar nav{
    display:flex!important;
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
  }
  .sidebar-footer{
    display:grid!important;
    flex:0 0 auto;
    margin-top:10px;
  }
  .main-content{
    height:auto;
    min-height:100vh;
    overflow:visible;
  }
  .mobile-menu{display:inline-flex}
}

/* =========================================================
   V5.5.0 — Tes & Belajar AI lebih ringkas dan terstruktur
   ========================================================= */
.section-ai_lab .main-content{padding-top:14px}
.ai-lab-topbar-modern{
  min-height:62px;
  margin-bottom:14px;
  padding:8px 2px;
  gap:18px;
}
.ai-lab-topbar-title{display:flex;align-items:center;gap:11px;min-width:0}
.ai-lab-topbar-title>span{
  width:42px;height:42px;display:grid;place-items:center;border-radius:13px;
  background:#eaf2ff;font-size:22px;flex:0 0 auto;
}
.ai-lab-topbar-title h1{font-size:23px;margin:0}
.ai-lab-topbar-title p{margin:3px 0 0;max-width:720px}
.ai-lab-topbar-right{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.ai-lab-live-status{
  position:relative;display:flex;flex-direction:column;min-width:150px;padding:8px 30px 8px 12px;
  border:1px solid;border-radius:13px;background:#fff;
}
.ai-lab-live-status strong{font-size:12px;line-height:1.2}
.ai-lab-live-status span{font-size:10px;margin-top:3px;opacity:.76}
.ai-lab-live-status i{position:absolute;right:12px;top:50%;width:9px;height:9px;border-radius:50%;transform:translateY(-50%)}
.ai-lab-live-status.is-online{background:#effcf3;border-color:#bbf7d0;color:#166534}
.ai-lab-live-status.is-online i{background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.12)}
.ai-lab-live-status.is-local{background:#fffaf0;border-color:#fde68a;color:#92400e}
.ai-lab-live-status.is-local i{background:#f59e0b;box-shadow:0 0 0 4px rgba(245,158,11,.12)}

.ai-lab-stat-grid-v55{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:12px}
.ai-lab-stat-action{
  width:100%;border:1px solid var(--border);text-align:left;color:var(--text);cursor:pointer;
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.ai-lab-stat-action:hover{transform:translateY(-1px);border-color:#cddbf2;box-shadow:0 10px 26px rgba(31,48,78,.1)}
.ai-lab-stat-action.has-pending>span{background:#fff5dd}
.ai-lab-stat-action.has-pending b{color:#b45309}

.ai-lab-tabs{
  display:flex;gap:7px;align-items:center;padding:5px;margin-bottom:14px;
  background:#eaf0f8;border:1px solid #dfe7f2;border-radius:14px;position:sticky;top:0;z-index:25;
}
.ai-lab-tab-button{
  border:0;background:transparent;color:#526078;border-radius:10px;padding:10px 14px;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;font-weight:800;font-size:13px;cursor:pointer;
}
.ai-lab-tab-button:hover{background:rgba(255,255,255,.6)}
.ai-lab-tab-button.active{background:#fff;color:#163c78;box-shadow:0 4px 13px rgba(31,48,78,.09)}
.ai-lab-tab-button b{min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:#ef4444;color:#fff;font-size:10px;display:grid;place-items:center}
.ai-lab-tab-panel[hidden]{display:none!important}
.ai-lab-tab-panel.active{display:block}

.ai-lab-test-panel-v55,.ai-lab-profile-summary-v55,.ai-lab-profile-editor-v55,.ai-lab-learning-panel-v55{padding:0;overflow:hidden}
.ai-lab-compact-head{padding:15px 18px}
.ai-lab-test-panel-v55>form,.ai-lab-profile-picker-v55,.ai-lab-profile-form-v55{padding:16px 18px 18px}

/* Chat tes adaptif: kecil saat kosong, membesar setelah ada riwayat. */
.ai-lab-test-panel-v55 .ai-lab-chat{
  height:210px;
  min-height:210px;
  max-height:210px;
  transition:max-height .2s ease,height .2s ease;
}
.ai-lab-test-panel-v55 .ai-lab-chat.has-history{
  height:min(46vh,460px);
  max-height:460px;
  min-height:300px;
}
.ai-lab-composer-v55 textarea{min-height:58px;max-height:140px}

.ai-lab-profile-layout-v55{display:grid;grid-template-columns:minmax(260px,.72fr) minmax(0,1.55fr);gap:14px;align-items:start}
.ai-lab-selected-customer-card{
  display:flex;flex-direction:column;gap:3px;padding:12px;border:1px solid #dfe7f2;border-radius:12px;background:#f8fafc;
}
.ai-lab-selected-customer-card strong{font-size:14px}
.ai-lab-selected-customer-card span,.ai-lab-selected-customer-card small{color:var(--muted);font-size:11px}
.ai-lab-profile-form-v55{margin:0;border:0;padding-top:16px}
.ai-lab-details{border:1px solid #dfe7f2;border-radius:13px;background:#fff;overflow:hidden}
.ai-lab-details+ .ai-lab-details{margin-top:1px}
.ai-lab-details summary{
  list-style:none;cursor:pointer;padding:12px 14px;font-weight:800;font-size:13px;background:#f8fafc;display:flex;align-items:center;justify-content:space-between;
}
.ai-lab-details summary::-webkit-details-marker{display:none}
.ai-lab-details summary::after{content:'›';font-size:20px;color:#7b8799;transform:rotate(0);transition:transform .15s ease}
.ai-lab-details[open] summary::after{transform:rotate(90deg)}
.ai-lab-details-body{padding:14px;border-top:1px solid #e9eef5}

.ai-lab-learning-policy-v55{margin:16px 18px 12px;padding:13px;border:1px solid #cfe0fa;border-radius:14px;background:#f7fbff}
.ai-lab-policy-title{display:flex;align-items:center;gap:10px}
.ai-lab-policy-title>span{font-size:21px}
.ai-lab-policy-title>div{display:flex;flex-direction:column;flex:1;min-width:0}
.ai-lab-policy-title strong{font-size:13px}.ai-lab-policy-title small{font-size:11px;color:var(--muted);margin-top:2px}
.ai-lab-policy-title>b{font-size:10px;padding:5px 8px;border-radius:999px;background:#dcfce7;color:#166534}
.ai-lab-policy-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;margin-top:12px}
.ai-lab-policy-grid label{display:flex;align-items:center;gap:8px;font-size:12px;color:#475569}
.ai-lab-policy-grid input{width:auto}
.ai-lab-learning-panel-v55 .ai-lab-safety-note{margin:0 18px 16px}
.ai-lab-learning-panel-v55 .ai-lab-candidate-list{padding:0 18px 18px}
.ai-lab-learning-panel-v55>.empty-state{min-height:280px}

@media(max-width:1180px){
  .ai-lab-stat-grid-v55{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ai-lab-profile-layout-v55{grid-template-columns:1fr}
}
@media(max-width:760px){
  .section-ai_lab .main-content{padding-top:10px}
  .ai-lab-topbar-modern{align-items:flex-start;gap:10px}
  .ai-lab-topbar-title>span{display:none}
  .ai-lab-topbar-title h1{font-size:20px}
  .ai-lab-topbar-title p{font-size:11px}
  .ai-lab-live-status{min-width:0;padding:7px 27px 7px 9px}
  .ai-lab-live-status span{display:none}
  .ai-lab-stat-grid-v55{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .ai-lab-stat{padding:12px}.ai-lab-stat>span{width:36px;height:36px;font-size:20px}.ai-lab-stat b{font-size:18px}.ai-lab-stat small{font-size:10px}
  .ai-lab-tabs{overflow-x:auto;justify-content:flex-start;scrollbar-width:none}
  .ai-lab-tabs::-webkit-scrollbar{display:none}
  .ai-lab-tab-button{white-space:nowrap;padding:9px 11px}
  .ai-lab-test-panel-v55 .ai-lab-chat{height:190px;min-height:190px;max-height:190px}
  .ai-lab-test-panel-v55 .ai-lab-chat.has-history{height:390px;min-height:260px;max-height:390px}
  .ai-lab-policy-grid{grid-template-columns:1fr}
}

/* =========================================================
   V5.7.0 — Dashboard Control Center
   Dashboard menjadi pusat kontrol operasional WhatsApp + AI.
   ========================================================= */
.section-overview .main-content{padding-top:14px}
.dashboard-topbar-v57{min-height:64px;margin-bottom:14px;padding:8px 2px;gap:16px}
.dashboard-topbar-title{display:flex;align-items:center;gap:11px;min-width:0}
.dashboard-topbar-title>span{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:#eaf2ff;color:#173f7a;font-size:23px;font-weight:900;flex:0 0 auto}
.dashboard-topbar-title h1{margin:0;font-size:23px}
.dashboard-topbar-title p{margin:3px 0 0;color:var(--muted);font-size:12px}
.dashboard-topbar-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.dashboard-live-status{position:relative;display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:13px;border:1px solid;min-width:164px;background:#fff}
.dashboard-live-status>i{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.dashboard-live-status>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.dashboard-live-status strong{font-size:11px;line-height:1.2}.dashboard-live-status small{font-size:10px;opacity:.72;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dashboard-live-status.is-online{border-color:#bbf7d0;background:#effcf3;color:#166534}.dashboard-live-status.is-online>i{background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.12)}
.dashboard-live-status.is-local{border-color:#fde68a;background:#fffaf0;color:#92400e}.dashboard-live-status.is-local>i{background:#f59e0b;box-shadow:0 0 0 4px rgba(245,158,11,.12)}
.dashboard-last-refresh{display:flex;flex-direction:column;align-items:flex-end;color:var(--muted);font-size:9px;white-space:nowrap}.dashboard-last-refresh b{font-size:11px;color:var(--text);margin-top:1px}

.dashboard-control-center-v57{display:flex;flex-direction:column;gap:14px;padding-bottom:20px}
.dashboard-control-center-v57 .panel{margin:0}
.dashboard-control-center-v57 .panel-head.compact{padding:15px 17px 12px;margin:0;border-bottom:1px solid #edf1f6}
.dashboard-control-center-v57 .panel-head.compact h2{font-size:15px;margin:0}.dashboard-control-center-v57 .panel-head.compact p{font-size:10px;margin:3px 0 0}
.dashboard-control-center-v57 .btn.small{padding:7px 10px;font-size:10px;border-radius:9px}

.dashboard-kpi-grid-v57{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.dashboard-kpi-card-v57{position:relative;min-width:0;display:grid;grid-template-columns:42px minmax(0,1fr);gap:10px;align-items:center;padding:13px 14px;border:1px solid var(--border);border-radius:15px;background:#fff;text-decoration:none;color:var(--text);box-shadow:0 5px 18px rgba(31,48,78,.045);transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.dashboard-kpi-card-v57:hover{transform:translateY(-1px);border-color:#c9d8ed;box-shadow:0 10px 25px rgba(31,48,78,.09)}
.dashboard-kpi-card-v57 .kpi-icon{width:42px;height:42px;border-radius:13px;background:#f1f6fd;display:grid;place-items:center;font-size:21px}
.dashboard-kpi-card-v57>div{display:flex;flex-direction:column;min-width:0}.dashboard-kpi-card-v57 b{font-size:23px;line-height:1;font-weight:900}.dashboard-kpi-card-v57 small{font-size:10px;color:var(--muted);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dashboard-kpi-card-v57 em{grid-column:2;font-size:9px;color:#4772ad;font-style:normal;margin-top:-6px}
.dashboard-kpi-card-v57.is-alert .kpi-icon{background:#fff1f2}.dashboard-kpi-card-v57.is-alert b{color:#b42336}

.dashboard-primary-grid-v57,.dashboard-secondary-grid-v57,.dashboard-tertiary-grid-v57,.dashboard-bottom-grid-v57{display:grid;gap:14px;align-items:stretch}
.dashboard-primary-grid-v57{grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr)}
.dashboard-secondary-grid-v57{grid-template-columns:minmax(0,1.45fr) minmax(320px,.75fr)}
.dashboard-tertiary-grid-v57{grid-template-columns:1fr 1fr}
.dashboard-bottom-grid-v57{grid-template-columns:minmax(330px,.8fr) minmax(0,1.2fr)}
.dashboard-primary-grid-v57>.panel,.dashboard-secondary-grid-v57>.panel,.dashboard-tertiary-grid-v57>.panel,.dashboard-bottom-grid-v57>.panel{overflow:hidden}

.dashboard-priority-badge{padding:5px 8px;border-radius:999px;background:#fff1f2;color:#b42336;font-size:9px;font-weight:900}
.dashboard-attention-list-v57{padding:4px 12px 12px;display:flex;flex-direction:column}
.dashboard-attention-list-v57>a{display:grid;grid-template-columns:32px minmax(0,1fr) 16px;gap:10px;align-items:center;padding:10px 6px;border-bottom:1px solid #f0f3f7;text-decoration:none;color:var(--text);border-radius:10px}
.dashboard-attention-list-v57>a:last-child{border-bottom:0}.dashboard-attention-list-v57>a:hover{background:#f8fafc}
.dashboard-attention-list-v57>a>span{width:32px;height:32px;border-radius:10px;background:#f7f9fc;display:grid;place-items:center;font-size:16px}
.dashboard-attention-list-v57>a>div{display:flex;flex-direction:column;min-width:0}.dashboard-attention-list-v57 strong{font-size:11px}.dashboard-attention-list-v57 strong b{font-size:12px}.dashboard-attention-list-v57 small{font-size:9px;color:var(--muted);margin-top:3px}.dashboard-attention-list-v57>a>i{font-style:normal;color:#9aa8ba;font-size:20px}

.dashboard-wa-list-v57{padding:5px 12px 12px;display:flex;flex-direction:column}
.dashboard-wa-row-v57{display:grid;grid-template-columns:9px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 6px;border-bottom:1px solid #f0f3f7;text-decoration:none;color:var(--text);border-radius:10px}.dashboard-wa-row-v57:last-child{border-bottom:0}.dashboard-wa-row-v57:hover{background:#f8fafc}
.dashboard-wa-row-v57>.wa-color{width:8px;height:44px;border-radius:999px;background:var(--wa-color,#64748b)}
.dashboard-wa-row-v57 .wa-copy{display:flex;flex-direction:column;min-width:0}.dashboard-wa-row-v57 .wa-copy strong{font-size:11px}.dashboard-wa-row-v57 .wa-copy span{font-size:9px;color:#526078;margin-top:2px}.dashboard-wa-row-v57 .wa-copy small{font-size:9px;color:var(--muted);margin-top:3px}
.dashboard-wa-row-v57 .wa-state{display:flex;flex-direction:column;align-items:flex-end;gap:5px}.dashboard-wa-row-v57 .wa-state>small{font-size:9px;color:var(--muted);white-space:nowrap}
.dashboard-state-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 7px;border-radius:999px;font-size:8px;font-weight:900;white-space:nowrap}.dashboard-state-pill>i{width:6px;height:6px;border-radius:50%}
.dashboard-state-pill.is-ready{background:#ecfdf3;color:#166534}.dashboard-state-pill.is-ready>i{background:#22c55e}.dashboard-state-pill.is-warning{background:#fff8e5;color:#92400e}.dashboard-state-pill.is-warning>i{background:#f59e0b}.dashboard-state-pill.is-off{background:#f1f5f9;color:#64748b}.dashboard-state-pill.is-off>i{background:#94a3b8}

.dashboard-recent-list-v57{padding:4px 12px 12px;display:flex;flex-direction:column}
.dashboard-recent-list-v57>a{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 6px;text-decoration:none;color:var(--text);border-bottom:1px solid #f0f3f7;border-radius:10px}.dashboard-recent-list-v57>a:last-child{border-bottom:0}.dashboard-recent-list-v57>a:hover{background:#f8fafc}
.dashboard-recent-list-v57 .avatar{width:40px;height:40px;min-width:40px;min-height:40px}
.dashboard-recent-list-v57 .recent-copy{min-width:0}.dashboard-recent-list-v57 .recent-copy>div{display:flex;align-items:center;justify-content:space-between;gap:10px}.dashboard-recent-list-v57 strong{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dashboard-recent-list-v57 time{font-size:9px;color:var(--muted)}
.dashboard-recent-list-v57 p{font-size:10px;color:#526078;margin:3px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dashboard-recent-list-v57 small{display:flex;align-items:center;gap:5px;font-size:8px;color:var(--muted)}
.mini-wa-dot{width:6px;height:6px;border-radius:50%;background:var(--wa-color,#64748b)}.dashboard-unread-badge{min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#2563eb;color:#fff;font-size:9px;display:grid;place-items:center}

.dashboard-ai-status-v57{padding-bottom:13px}.dashboard-ai-main-v57{margin:13px 15px 10px;padding:12px;border:1px solid;border-radius:14px;display:grid;grid-template-columns:38px minmax(0,1fr) 9px;gap:9px;align-items:center}.dashboard-ai-main-v57>span{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:19px;background:rgba(255,255,255,.68)}.dashboard-ai-main-v57>div{display:flex;flex-direction:column}.dashboard-ai-main-v57 strong{font-size:12px}.dashboard-ai-main-v57 small{font-size:9px;margin-top:3px;opacity:.75}.dashboard-ai-main-v57>i{width:9px;height:9px;border-radius:50%}
.dashboard-ai-main-v57.is-online{background:#effcf3;border-color:#bbf7d0;color:#166534}.dashboard-ai-main-v57.is-online>i{background:#22c55e}.dashboard-ai-main-v57.is-local{background:#fffaf0;border-color:#fde68a;color:#92400e}.dashboard-ai-main-v57.is-local>i{background:#f59e0b}
.dashboard-ai-metrics-v57{padding:0 15px;display:flex;flex-direction:column}.dashboard-ai-metrics-v57>div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid #f0f3f7}.dashboard-ai-metrics-v57>div:last-child{border-bottom:0}.dashboard-ai-metrics-v57 span{font-size:10px;color:#526078}.dashboard-ai-metrics-v57 b{font-size:11px}.dashboard-inline-link{display:inline-flex;margin:8px 15px 0;font-size:9px;text-decoration:none;color:#315f9e;font-weight:800}

.dashboard-today-grid-v57{padding:14px 15px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.dashboard-today-grid-v57>div{padding:10px 8px;border:1px solid #edf1f6;border-radius:12px;background:#fbfcfe;display:flex;flex-direction:column;align-items:center;text-align:center}.dashboard-today-grid-v57 span{font-size:16px}.dashboard-today-grid-v57 b{font-size:18px;margin-top:4px}.dashboard-today-grid-v57 small{font-size:8px;color:var(--muted);margin-top:2px}
.dashboard-handler-share-v57{padding:0 15px 15px}.dashboard-handler-share-v57>div:first-child{display:flex;justify-content:space-between;font-size:9px;color:#526078;margin-bottom:7px}.dashboard-handler-share-v57 .share-bar{height:8px;background:#e8eef6;border-radius:999px;overflow:hidden}.dashboard-handler-share-v57 .share-bar i{display:block;height:100%;background:#5c83bd;border-radius:inherit}

.dashboard-score-v57{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;align-items:center;margin:14px 15px;padding:12px;border-radius:14px;background:#f4f8fe;border:1px solid #dce8f7}.dashboard-score-v57>strong{font-size:26px;color:#194b8d;text-align:center}.dashboard-score-v57>div{display:flex;flex-direction:column}.dashboard-score-v57>div b{font-size:11px}.dashboard-score-v57>div small{font-size:9px;color:var(--muted);margin-top:4px;line-height:1.45}
.dashboard-ai-performance-list-v57{padding:0 15px 14px;display:grid;grid-template-columns:1fr 1fr;gap:7px}.dashboard-ai-performance-list-v57>div{padding:9px 10px;border:1px solid #edf1f6;border-radius:10px;display:flex;justify-content:space-between;gap:8px}.dashboard-ai-performance-list-v57 span{font-size:9px;color:#526078}.dashboard-ai-performance-list-v57 b{font-size:10px}

.dashboard-activity-chart-v57{overflow:hidden}.dashboard-chart-legend{display:flex;align-items:center;gap:12px;font-size:8px;color:var(--muted)}.dashboard-chart-legend span{display:flex;align-items:center;gap:4px}.dashboard-chart-legend i{width:8px;height:8px;border-radius:2px}.dashboard-chart-legend .inbound,.dashboard-chart-v57 .inbound{background:#7ea5dd}.dashboard-chart-legend .ai,.dashboard-chart-v57 .ai{background:#61b980}.dashboard-chart-legend .admin,.dashboard-chart-v57 .admin{background:#d2a763}
.dashboard-chart-v57{height:190px;padding:20px 22px 14px;display:grid;grid-template-columns:repeat(6,1fr);gap:18px;align-items:end;background:linear-gradient(to bottom,transparent 24%,#eef2f7 25%,transparent 26%,transparent 49%,#eef2f7 50%,transparent 51%,transparent 74%,#eef2f7 75%,transparent 76%)}
.dashboard-chart-group-v57{height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:7px}.dashboard-chart-group-v57 .bars{height:135px;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:4px}.dashboard-chart-group-v57 .bars i{display:block;width:min(18%,16px);min-height:4px;border-radius:4px 4px 1px 1px;transition:height .2s ease}.dashboard-chart-group-v57 small{font-size:8px;color:var(--muted)}

.dashboard-waiting-list-v57,.dashboard-activity-list-v57{padding:5px 12px 12px;display:flex;flex-direction:column}
.dashboard-waiting-list-v57>a{display:grid;grid-template-columns:10px minmax(0,1fr) auto 12px;gap:9px;align-items:center;padding:10px 6px;border-bottom:1px solid #f0f3f7;text-decoration:none;color:var(--text);border-radius:9px}.dashboard-waiting-list-v57>a:last-child{border-bottom:0}.dashboard-waiting-list-v57>a:hover{background:#f8fafc}.wait-dot{width:8px;height:8px;border-radius:50%}.wait-dot.is-green{background:#22c55e}.wait-dot.is-yellow{background:#eab308}.wait-dot.is-orange{background:#f97316}.wait-dot.is-red{background:#ef4444}.dashboard-waiting-list-v57>a>div{display:flex;flex-direction:column;min-width:0}.dashboard-waiting-list-v57 strong{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dashboard-waiting-list-v57 small{font-size:8px;color:var(--muted);margin-top:2px}.dashboard-waiting-list-v57>a>b{font-size:9px;white-space:nowrap}.dashboard-waiting-list-v57>a>i{font-style:normal;color:#9aa8ba}
.dashboard-activity-list-v57>a{display:grid;grid-template-columns:35px 26px minmax(0,1fr);gap:7px;align-items:center;padding:8px 6px;border-bottom:1px solid #f0f3f7;text-decoration:none;color:var(--text);border-radius:9px}.dashboard-activity-list-v57>a:last-child{border-bottom:0}.dashboard-activity-list-v57>a:hover{background:#f8fafc}.dashboard-activity-list-v57 time{font-size:8px;color:var(--muted)}.dashboard-activity-list-v57>a>span{width:25px;height:25px;border-radius:8px;background:#f4f7fb;display:grid;place-items:center;font-size:12px}.dashboard-activity-list-v57>a>div{display:flex;flex-direction:column;min-width:0}.dashboard-activity-list-v57 strong{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dashboard-activity-list-v57 small{font-size:8px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dashboard-empty-mini{padding:18px;text-align:center;color:var(--muted);font-size:10px}.dashboard-empty-mini.is-good{color:#166534}

.dashboard-quick-actions-v57{padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:15px}.dashboard-quick-actions-v57>div{display:flex;flex-direction:column}.dashboard-quick-actions-v57>div strong{font-size:12px}.dashboard-quick-actions-v57>div small{font-size:9px;color:var(--muted);margin-top:3px}.dashboard-quick-actions-v57 nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px}.dashboard-quick-actions-v57 nav a{padding:8px 10px;border:1px solid #dfe7f2;border-radius:9px;text-decoration:none;color:#315f9e;background:#f8fbff;font-size:9px;font-weight:800}.dashboard-quick-actions-v57 nav a:hover{background:#eef5ff;border-color:#cbdcf4}

@media(max-width:1280px){
  .dashboard-kpi-grid-v57{grid-template-columns:repeat(3,minmax(0,1fr))}.dashboard-kpi-card-v57:nth-child(4),.dashboard-kpi-card-v57:nth-child(5){grid-column:auto}
  .dashboard-primary-grid-v57,.dashboard-secondary-grid-v57{grid-template-columns:1fr 1fr}
}
@media(max-width:1050px){
  .dashboard-primary-grid-v57,.dashboard-secondary-grid-v57,.dashboard-tertiary-grid-v57,.dashboard-bottom-grid-v57{grid-template-columns:1fr}
  .dashboard-wa-status-v57{min-height:0}.dashboard-chart-v57{gap:10px}
}
@media(max-width:760px){
  .section-overview .main-content{padding-top:10px}
  .dashboard-topbar-title>span,.dashboard-last-refresh{display:none}.dashboard-topbar-title h1{font-size:20px}.dashboard-topbar-title p{font-size:10px}.dashboard-live-status{min-width:0;padding:7px 9px}.dashboard-live-status small{display:none}
  .dashboard-control-center-v57{gap:10px}.dashboard-kpi-grid-v57{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.dashboard-kpi-card-v57{grid-template-columns:36px minmax(0,1fr);padding:11px}.dashboard-kpi-card-v57 .kpi-icon{width:36px;height:36px;font-size:18px}.dashboard-kpi-card-v57 b{font-size:19px}.dashboard-kpi-card-v57 em{display:none}.dashboard-kpi-card-v57:last-child{grid-column:1/-1}
  .dashboard-control-center-v57 .panel-head.compact{padding:13px 14px 10px}.dashboard-chart-legend{display:none}.dashboard-chart-v57{height:165px;padding:16px 10px 10px;gap:6px}.dashboard-chart-group-v57 .bars{height:115px}.dashboard-chart-group-v57 .bars i{width:min(24%,13px)}
  .dashboard-today-grid-v57{grid-template-columns:repeat(2,1fr);padding:12px}.dashboard-ai-performance-list-v57{grid-template-columns:1fr}
  .dashboard-quick-actions-v57{align-items:flex-start;flex-direction:column}.dashboard-quick-actions-v57 nav{justify-content:flex-start}
  .dashboard-wa-row-v57{grid-template-columns:8px minmax(0,1fr)}.dashboard-wa-row-v57 .wa-state{grid-column:2;flex-direction:row;justify-content:space-between;align-items:center}.dashboard-wa-row-v57>.wa-color{grid-row:1/3;height:56px}
}

/* V5.8.0 — Status Penanganan: Baru → Dilihat → Ditangani → Selesai */
.handling-pill{display:inline-flex;align-items:center;gap:3px;padding:2px 6px;border-radius:999px;font-size:8px;font-weight:800;line-height:1.2;white-space:nowrap;border:1px solid transparent}
.handling-pill.is-baru,.handling-status-chip.is-baru{background:#fff1f2;color:#be123c;border-color:#fecdd3}
.handling-pill.is-dilihat,.handling-status-chip.is-dilihat{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}
.handling-pill.is-ditangani,.handling-status-chip.is-ditangani{background:#fff7ed;color:#c2410c;border-color:#fed7aa}
.handling-pill.is-selesai,.handling-status-chip.is-selesai{background:#ecfdf5;color:#047857;border-color:#a7f3d0}
.modern-conversation-item.status-baru:not(.selected){border-left-color:#ef4444}
.modern-conversation-item.status-dilihat:not(.selected){border-left-color:#60a5fa}
.modern-conversation-item.status-ditangani:not(.selected){border-left-color:#fb923c}
.modern-conversation-item.status-selesai:not(.selected){border-left-color:#34d399;opacity:.86}
.modern-conversation-item .conv-labels{display:flex;align-items:center;gap:3px;flex-wrap:wrap}
.handling-workflow-card{margin:10px 0;padding:10px;border:1px solid #e5eaf1;border-radius:12px;background:#fbfdff}
.handling-workflow-card>div:first-child{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
.handling-workflow-card strong{font-size:10px;color:#26344b}
.handling-workflow-card small{font-size:8px;line-height:1.4;color:#738096}
.handling-workflow-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.handling-workflow-actions form{margin:0}
.handling-action{width:100%;min-height:31px;border:1px solid #dce3ed;border-radius:9px;background:#fff;color:#526078;font-size:8px;font-weight:800;cursor:pointer;transition:.15s}
.handling-action:hover{background:#f3f7fc;border-color:#b8c8dd;color:#1e3a5f}
.handling-action.active{background:#eaf2ff;border-color:#93b4e8;color:#1d4ed8;box-shadow:0 0 0 1px rgba(37,99,235,.05) inset}
.inbox-quick-filters{grid-template-columns:repeat(7,minmax(0,1fr))!important}
.inbox-quick-filters button{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:1180px){.inbox-quick-filters{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:760px){.inbox-quick-filters{grid-template-columns:repeat(3,minmax(0,1fr))!important}.handling-workflow-actions{grid-template-columns:1fr}}


/* === V5.9.0 · sumber balasan dua arah === */
.message-source-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;line-height:1.2;padding:3px 7px;border-radius:999px;white-space:nowrap;border:1px solid rgba(148,163,184,.25);background:rgba(248,250,252,.72);color:#64748b}
.message-source-badge.source-whatsapp-phone{background:#ecfdf5;border-color:#bbf7d0;color:#047857}
.message-source-badge.source-dashboard{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}
.message-row.admin .message-bottom-line{gap:6px;flex-wrap:wrap}
@media(max-width:640px){.message-source-badge{font-size:9px;padding:2px 6px}}

/* V5.10.0 — Pusat WhatsApp Modern */
.wa-center-topbar-v510{display:flex;align-items:center;justify-content:space-between;gap:18px}
.wa-center-topbar-title{display:flex;align-items:center;gap:12px;min-width:0}.wa-center-topbar-title>span{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border-radius:13px;background:#eaf8ef;font-size:21px}.wa-center-topbar-title h1{margin:0;font-size:23px}.wa-center-topbar-title p{margin:4px 0 0;color:var(--muted);font-size:12px}
.wa-center-topbar-actions{display:flex;align-items:center;gap:10px}.wa-center-ai-status{display:flex;align-items:center;gap:9px;padding:8px 11px;border:1px solid #e3e9f2;border-radius:12px;background:#fff}.wa-center-ai-status>i{width:8px;height:8px;border-radius:50%;background:#f59e0b;box-shadow:0 0 0 3px #fef3c7}.wa-center-ai-status.is-online>i{background:#22c55e;box-shadow:0 0 0 3px #dcfce7}.wa-center-ai-status div{display:flex;flex-direction:column}.wa-center-ai-status strong{font-size:11px}.wa-center-ai-status small{font-size:9px;color:var(--muted)}
.wa-center-hero-v510{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 22px;margin-bottom:14px;background:linear-gradient(135deg,#fff,#f3fbf6)}.wa-center-hero-copy-v510{display:flex;align-items:center;gap:13px;min-width:0}.wa-center-hero-icon-v510{display:grid;place-items:center;width:48px;height:48px;flex:0 0 48px;border-radius:14px;background:#dcfce7;border:1px solid #bbf7d0;font-size:23px}.wa-center-hero-copy-v510 h2{margin:0 0 4px;font-size:20px}.wa-center-hero-copy-v510 p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}.wa-center-config-state-v510{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:118px;padding:10px 14px;border:1px solid #cfead8;border-radius:12px;background:#edf9f1}.wa-center-config-state-v510 strong{font-size:18px;color:#168142}.wa-center-config-state-v510 span{margin-top:2px;font-size:9px;font-weight:800;color:#447258}
.wa-center-kpi-grid-v510{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:12px}.wa-center-kpi-v510{display:flex;align-items:center;gap:12px;padding:14px 15px}.wa-center-kpi-v510>span{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border-radius:11px;background:#f1f5f9;font-size:18px}.wa-center-kpi-v510>div{display:flex;flex-direction:column}.wa-center-kpi-v510 b{font-size:20px;line-height:1}.wa-center-kpi-v510 small{margin-top:4px;color:var(--muted);font-size:10px}.wa-center-kpi-v510.is-warning{border-color:#fed7aa;background:#fffaf2}.wa-center-kpi-v510.is-warning>span{background:#fff1dc}
.wa-center-note-v510{display:flex;align-items:flex-start;gap:9px;margin:0 0 14px;padding:10px 12px;border:1px solid #dbe6f4;border-radius:10px;background:#f8fbff;color:#52627a}.wa-center-note-v510>span{font-size:15px}.wa-center-note-v510 p{margin:0;font-size:10px;line-height:1.5}.wa-center-note-v510 strong{color:#30435d}
.wa-center-account-summary-v510{grid-template-columns:46px minmax(170px,1.15fr) minmax(260px,.95fr) auto auto;gap:14px}.wa-center-account-stats-v510{display:grid;grid-template-columns:repeat(4,minmax(52px,1fr));gap:7px}.wa-center-account-stats-v510>span{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:48px;padding:6px;border:1px solid #e7edf5;border-radius:9px;background:#fafcff}.wa-center-account-stats-v510 b{font-size:14px}.wa-center-account-stats-v510 small{margin-top:2px;color:var(--muted);font-size:8px}.wa-center-account-status-v510 small{font-size:9px;color:var(--muted);white-space:nowrap}.wa-center-account-status-v510 .is-off{background:#f1f5f9;color:#64748b}.wa-center-settings-label-v510{display:flex;align-items:center;gap:5px;color:#53647c;font-size:10px;font-weight:800;white-space:nowrap}.wa-center-settings-label-v510 i{font-size:16px;font-style:normal;transition:transform .2s ease}.wa-center-account-v510[open] .wa-center-settings-label-v510 i{transform:rotate(180deg)}
.wa-center-account-tools-v510{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:16px 0 0;padding:12px 14px;border:1px solid #e5ebf3;border-radius:11px;background:#f9fbfd}.wa-center-account-tools-v510>div:first-child{display:flex;flex-direction:column}.wa-center-account-tools-v510 strong{font-size:12px}.wa-center-account-tools-v510 small{margin-top:2px;color:var(--muted);font-size:9px}.wa-center-account-tool-actions-v510{display:flex;align-items:center;gap:8px}.wa-center-account-tool-actions-v510 .btn{min-height:34px;padding:7px 10px;font-size:10px}
@media(max-width:1180px){.wa-center-account-summary-v510{grid-template-columns:46px minmax(180px,1fr) minmax(230px,1fr) auto}.wa-center-settings-label-v510{grid-column:2/-1;justify-self:end}.wa-center-account-status-v510{grid-column:4;grid-row:1}}
@media(max-width:900px){.wa-center-kpi-grid-v510{grid-template-columns:repeat(2,minmax(0,1fr))}.wa-center-account-summary-v510{grid-template-columns:44px minmax(0,1fr) auto}.wa-center-account-stats-v510{grid-column:2/-1;grid-row:2}.wa-center-account-status-v510{grid-column:3;grid-row:1}.wa-center-settings-label-v510{grid-column:2/-1;grid-row:3;justify-self:end}.wa-center-account-tools-v510{align-items:flex-start;flex-direction:column}.wa-center-account-tool-actions-v510{width:100%}.wa-center-account-tool-actions-v510 .btn{flex:1}}
@media(max-width:700px){.wa-center-topbar-v510{align-items:flex-start}.wa-center-ai-status{display:none}.wa-center-hero-v510{align-items:flex-start;flex-direction:column}.wa-center-config-state-v510{align-items:flex-start}.wa-center-account-summary-v510{grid-template-columns:42px minmax(0,1fr) 22px}.wa-center-account-status-v510{grid-column:2/-1;grid-row:2;align-items:flex-start;flex-direction:row;flex-wrap:wrap}.wa-center-account-stats-v510{grid-column:1/-1;grid-row:3}.wa-center-settings-label-v510{grid-column:1/-1;grid-row:4;justify-self:end}.wa-center-account-status-v510 small{width:100%;white-space:normal}.wa-center-account-tool-actions-v510{flex-direction:column}.wa-center-account-tool-actions-v510 .btn{width:100%}}
@media(max-width:480px){.wa-center-kpi-grid-v510{grid-template-columns:1fr 1fr;gap:8px}.wa-center-kpi-v510{padding:11px}.wa-center-kpi-v510>span{width:34px;height:34px;flex-basis:34px}.wa-center-kpi-v510 b{font-size:17px}.wa-center-account-stats-v510{grid-template-columns:repeat(2,1fr)}.wa-center-hero-v510{padding:15px}.wa-center-hero-icon-v510{width:42px;height:42px;flex-basis:42px}}

/* V5.10.1 — hilangkan judul Pusat WhatsApp yang berulang pada topbar */
.wa-center-topbar-compact-v510{justify-content:flex-end;padding-top:10px;padding-bottom:10px;min-height:0}
@media(max-width:700px){.wa-center-topbar-compact-v510{justify-content:flex-end}}


/* =========================================================
   V5.10.3 — Tampilan Ringkas
   - Pengetahuan AI langsung ke tab/konten tanpa hero pembuka.
   - Pusat WhatsApp tidak menyisakan ruang header kosong;
     status AI disatukan ke kartu utama.
   ========================================================= */
.section-whatsapp .main-content{padding-top:12px}
.section-whatsapp .wa-center-topbar-compact-v510{min-height:0;height:0;margin:0;padding:0;overflow:visible;justify-content:flex-end}
.section-whatsapp .wa-center-topbar-compact-v510 .mobile-menu{position:relative;z-index:5}
.wa-center-hero-actions-v510{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex:0 0 auto}
.wa-center-hero-actions-v510 .wa-center-ai-status{min-width:126px}
.section-knowledge .knowledge-tabs{margin-top:0}
@media(max-width:850px){
  .section-whatsapp .wa-center-topbar-compact-v510{height:auto;margin:0 0 8px;overflow:visible}
}
@media(max-width:700px){
  .wa-center-hero-actions-v510{width:100%;justify-content:space-between;align-items:stretch;flex-wrap:wrap}
  .wa-center-hero-actions-v510 .wa-center-ai-status{display:flex;flex:1 1 150px}
  .wa-center-hero-actions-v510 .wa-center-config-state-v510{flex:1 1 130px}
}


/* =========================================================
   V5.10.4 — Filter Kotak Masuk hanya simbol
   Menghilangkan teks filter agar tidak terpotong pada panel sempit.
   Nama fungsi tetap tersedia lewat title/aria-label untuk aksesibilitas.
   ========================================================= */
.inbox-quick-filters.inbox-symbol-filters{
  display:grid!important;
  grid-template-columns:repeat(7,minmax(30px,1fr))!important;
  gap:5px!important;
  min-height:0!important;
  padding:3px 10px 9px!important;
  overflow:visible!important;
}
.inbox-quick-filters.inbox-symbol-filters button{
  width:100%!important;
  min-width:30px!important;
  height:32px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid #e2e8f0!important;
  border-radius:10px!important;
  background:#f8fafc!important;
  color:#526078!important;
  font-size:0!important;
  line-height:1!important;
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:normal!important;
  box-shadow:none!important;
}
.inbox-quick-filters.inbox-symbol-filters button>span{
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  font-size:15px;
  line-height:1;
}
.inbox-quick-filters.inbox-symbol-filters button:hover{
  background:#eef4ff!important;
  border-color:#cbdaf0!important;
  color:#245bb0!important;
}
.inbox-quick-filters.inbox-symbol-filters button.active{
  background:#17233b!important;
  border-color:#17233b!important;
  color:#fff!important;
  box-shadow:0 3px 8px rgba(23,35,59,.12)!important;
}
.inbox-quick-filters.inbox-symbol-filters button[data-inbox-filter="new"]>span{color:#2563eb}
.inbox-quick-filters.inbox-symbol-filters button[data-inbox-filter="viewed"]>span{color:#475569}
.inbox-quick-filters.inbox-symbol-filters button[data-inbox-filter="handled"]>span{color:#7c3aed}
.inbox-quick-filters.inbox-symbol-filters button[data-inbox-filter="done"]>span{color:#16a34a}
.inbox-quick-filters.inbox-symbol-filters button[data-inbox-filter="ai"]>span{color:#4f46e5}
.inbox-quick-filters.inbox-symbol-filters button[data-inbox-filter="admin"]>span{color:#475569}
.inbox-quick-filters.inbox-symbol-filters button.active>span{color:#fff!important}
@media(max-width:1180px){
  .inbox-quick-filters.inbox-symbol-filters{grid-template-columns:repeat(7,minmax(30px,1fr))!important}
}
@media(max-width:420px){
  .inbox-quick-filters.inbox-symbol-filters{gap:4px!important;padding-left:8px!important;padding-right:8px!important}
  .inbox-quick-filters.inbox-symbol-filters button{min-width:28px!important;height:30px!important;border-radius:9px!important}
  .inbox-quick-filters.inbox-symbol-filters button>span{font-size:14px}
}

/* =========================================================
   V5.10.6 — Preview gambar masuk lebih kecil
   Hanya thumbnail pesan pelanggan yang diperkecil.
   Klik gambar tetap membuka lightbox ukuran besar.
   ========================================================= */
.modern-chat-panel .message-row.customer .message-bubble.has-media-image,
.modern-chat-panel .message-row.customer:has(.message-media-image) .message-bubble{
  width:fit-content;
  max-width:min(70%,230px);
}
.modern-chat-panel .message-row.customer .message-media-image{
  width:fit-content;
  max-width:210px;
}
.modern-chat-panel .message-row.customer .message-media-image img{
  width:auto!important;
  height:auto!important;
  max-width:210px!important;
  max-height:280px!important;
  object-fit:contain!important;
}
@media(max-width:600px){
  .modern-chat-panel .message-row.customer .message-bubble.has-media-image,
  .modern-chat-panel .message-row.customer:has(.message-media-image) .message-bubble{
    max-width:min(82%,200px);
  }
  .modern-chat-panel .message-row.customer .message-media-image,
  .modern-chat-panel .message-row.customer .message-media-image img{
    max-width:180px!important;
    max-height:240px!important;
  }
}

/* =========================================================
   V5.10.7 — Sidebar desktop dapat diperkecil menjadi ikon saja
   ========================================================= */
@media(min-width:851px){
  .app-shell,.sidebar,.main-content{transition:grid-template-columns .2s ease,width .2s ease,padding .2s ease}
  .sidebar{position:relative}
  .sidebar-collapse-toggle{
    position:absolute;right:-12px;top:72px;z-index:12;
    width:25px;height:38px;border:1px solid rgba(255,255,255,.16);border-radius:0 10px 10px 0;
    display:grid;place-items:center;padding:0;cursor:pointer;
    background:#162844;color:#dbe7fb;font-size:24px;line-height:1;
    box-shadow:5px 3px 14px rgba(7,20,43,.18)
  }
  .sidebar-collapse-toggle:hover{background:#20365a;color:#fff}
  .sidebar nav a{position:relative;white-space:nowrap}
  .sidebar .nav-icon{width:20px;min-width:20px;display:inline-grid;place-items:center;font-size:17px}
  .sidebar .nav-label,.sidebar-brand-copy,.sidebar-user-copy{transition:opacity .14s ease}

  html.tm-sidebar-collapsed .app-shell{grid-template-columns:72px minmax(0,1fr)}
  html.tm-sidebar-collapsed .sidebar{padding-left:9px;padding-right:9px}
  html.tm-sidebar-collapsed .sidebar-collapse-toggle{right:-12px}
  html.tm-sidebar-collapsed .sidebar-brand{justify-content:center;padding:0 0 24px;gap:0}
  html.tm-sidebar-collapsed .sidebar-brand-copy{display:none}
  html.tm-sidebar-collapsed .sidebar-brand .small-mark{width:42px;height:42px;border-radius:14px;font-size:15px}
  html.tm-sidebar-collapsed .sidebar nav{padding-right:0;overflow-x:visible}
  html.tm-sidebar-collapsed .sidebar nav a{
    min-height:44px;padding:11px 8px;justify-content:center;gap:0;border-radius:11px
  }
  html.tm-sidebar-collapsed .sidebar nav a .nav-label{display:none}
  html.tm-sidebar-collapsed .sidebar nav a .nav-icon{width:24px;min-width:24px;font-size:18px}
  html.tm-sidebar-collapsed .sidebar nav a .nav-badge{
    position:absolute;top:4px;right:2px;min-width:16px;height:16px;padding:0 4px;
    display:grid;place-items:center;border:2px solid #0d1b35;font-size:8px;line-height:1
  }
  html.tm-sidebar-collapsed .sidebar nav a .wa-nav-badge{right:-1px;font-size:7px;min-width:28px}
  html.tm-sidebar-collapsed .sidebar-footer{
    grid-template-columns:1fr;justify-items:center;gap:9px;padding:14px 0 0;margin-top:12px
  }
  html.tm-sidebar-collapsed .sidebar-user-copy{display:none}
  html.tm-sidebar-collapsed .sidebar-footer a{font-size:19px;line-height:1}
  html.tm-sidebar-collapsed .sidebar-footer .avatar{width:38px;height:38px}
}

@media(max-width:850px){
  .sidebar-collapse-toggle{display:none!important}
}