:root{--bg:#0b1120;--panel:#111827;--panel2:#172033;--text:#e5e7eb;--muted:#94a3b8;--line:#243044;--accent:#22c55e;--danger:#ef4444;--shadow:0 14px 35px rgba(0,0,0,.18)}
body.light{--bg:#f3f6fb;--panel:#fff;--panel2:#f8fafc;--text:#172033;--muted:#64748b;--line:#e2e8f0;--shadow:0 10px 30px rgba(15,23,42,.08)}
*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text)}
a{text-decoration:none;color:inherit}.layout{display:grid;grid-template-columns:260px 1fr;min-height:100vh}.sidebar{background:var(--panel);border-right:1px solid var(--line);padding:20px;position:sticky;top:0;height:100vh}
.brand{font-size:20px;font-weight:800;margin:5px 0 24px}.brand span{color:var(--accent)}.nav a{display:flex;gap:10px;padding:12px 14px;border-radius:12px;color:var(--muted);margin-bottom:6px}.nav a:hover,.nav a.active{background:var(--panel2);color:var(--text)}
.main{padding:24px}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.title h1{font-size:24px;margin:0}.title p{color:var(--muted);margin:5px 0 0}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.kpi .num{font-size:30px;font-weight:800}.muted{color:var(--muted)}.btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:10px;padding:10px 14px;font-weight:700;cursor:pointer;background:var(--panel2);color:var(--text)}
.btn.primary{background:var(--accent);color:#052e16}.btn.danger{background:var(--danger);color:#fff}.field{margin-bottom:14px}.field label{display:block;color:var(--muted);font-size:13px;margin-bottom:6px}
input,textarea,select{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);color:var(--text);outline:none}textarea{min-height:130px;resize:vertical}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:12px;border-bottom:1px solid var(--line);font-size:14px}th{color:var(--muted)}
.badge{padding:5px 9px;border-radius:999px;font-size:12px;font-weight:800;background:var(--panel2)}.ok{color:#22c55e}.fail{color:#ef4444}.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.alert{padding:12px 14px;border-radius:10px;margin-bottom:14px;background:var(--panel2);border:1px solid var(--line)}
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px}.login-card{width:min(430px,100%);background:var(--panel);padding:28px;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}
@media(max-width:900px){.layout{grid-template-columns:1fr}.sidebar{height:auto;position:relative}.grid{grid-template-columns:1fr 1fr}.row{grid-template-columns:1fr}}
@media(max-width:580px){.grid{grid-template-columns:1fr}.main{padding:14px}}
.pager{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:16px}.device-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.device-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.status-dot{display:inline-block;width:9px;height:9px;border-radius:999px;background:#94a3b8;margin-right:6px}.status-dot.connected{background:#22c55e}.status-dot.error,.status-dot.logged_out{background:#ef4444}.status-dot.qr_required{background:#f59e0b}.qr-box{display:none;margin-top:14px;padding:14px;background:#fff;border-radius:14px;text-align:center}.qr-box img{max-width:280px;width:100%}.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.toolbar{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin-bottom:16px}.toolbar .field{margin:0;min-width:220px}.queue-status{font-weight:800}.queue-status.SENT{color:#22c55e}.queue-status.FAILED{color:#ef4444}.queue-status.RETRYING{color:#f59e0b}@media(max-width:900px){.device-grid{grid-template-columns:1fr}}
.inbox-layout{display:grid;grid-template-columns:minmax(300px,38%) 1fr;gap:16px}.conversation{display:flex;justify-content:space-between;gap:12px;padding:12px;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;background:var(--panel2)}.conversation.active{outline:2px solid var(--accent)}.unread-badge{min-width:24px;height:24px;padding:0 7px;border-radius:999px;display:grid;place-items:center;background:var(--accent);color:#052e16;font-weight:800}.small{font-size:12px}.chat-panel{min-height:520px;display:flex;flex-direction:column}.chat-head{padding-bottom:12px;border-bottom:1px solid var(--line)}.messages{display:flex;flex-direction:column;gap:10px;padding:16px 0;flex:1;max-height:560px;overflow:auto}.bubble{max-width:78%;padding:11px 13px;border-radius:14px;background:var(--panel2);border:1px solid var(--line)}.bubble.out{align-self:flex-end;background:rgba(34,197,94,.12)}.bubble.in{align-self:flex-start}.bubble small{display:block;color:var(--muted);margin-top:6px;font-size:11px}.reply-box{border-top:1px solid var(--line);padding-top:12px}.reply-box textarea{min-height:85px}.empty-chat{margin:auto;text-align:center}.check{display:flex;gap:8px;align-items:center;margin:10px 0;color:var(--text)}.check input{width:auto}.menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.menu-option{position:relative;border:1px solid var(--line);border-radius:14px;padding:14px;background:var(--panel2)}.menu-number{position:absolute;right:12px;top:10px;font-size:30px;font-weight:900;color:var(--muted);opacity:.4}@media(max-width:900px){.inbox-layout{grid-template-columns:1fr}.menu-grid{grid-template-columns:1fr}.chat-panel{min-height:420px}}

.status-box{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.status-box>div{display:flex;flex-direction:column;gap:4px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}@media(max-width:700px){.status-box{grid-template-columns:1fr}}

.device-edit-panel{margin-top:14px;padding:16px;border-top:1px solid var(--line);background:var(--panel2);border-radius:12px}.device-edit-panel h4{margin:0 0 14px}.small{font-size:12px}

/* v1.5.3 compact sidebar polish */
.sidebar{display:flex;flex-direction:column;overflow:hidden;padding:20px 16px}
.brand{padding:0 4px;margin:5px 0 22px}
.nav-scroll{flex:1;min-height:0;overflow-y:auto;padding-right:2px}
.nav-scroll::-webkit-scrollbar{width:6px}
.nav-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px}
.nav{display:flex;flex-direction:column;gap:3px}
.nav>a{margin:0;padding:11px 12px}
.nav-group{margin:1px 0;border-radius:12px}
.nav-group-toggle{list-style:none;display:flex;align-items:center;justify-content:space-between;width:100%;gap:12px;padding:11px 12px;border-radius:12px;color:var(--muted);font-size:12px;font-weight:800;letter-spacing:.035em;cursor:pointer;user-select:none}
.nav-group-toggle::-webkit-details-marker{display:none}
.nav-group-toggle::marker{content:""}
.nav-group-toggle:hover,.nav-group[open]>.nav-group-toggle{background:var(--panel2);color:var(--text)}
.nav-group-title{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-chevron{flex:0 0 auto;display:grid;place-items:center;width:24px;height:24px;border-radius:8px;font-size:20px;line-height:1;transition:transform .18s ease}
.nav-group[open] .nav-chevron{transform:rotate(90deg)}
.nav-group-items{display:flex;flex-direction:column;gap:3px;padding:5px 0 5px 10px}
.nav-group-items a{margin:0;padding:10px 12px;font-size:14px;border-radius:10px}
.sidebar-footer{flex:0 0 auto;border-top:1px solid var(--line);padding:14px 0 0;margin-top:12px;background:var(--panel)}
.sidebar-user{display:flex;align-items:center;gap:10px;padding:0 4px 12px}
.sidebar-avatar{flex:0 0 38px;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--panel2);font-size:17px}
.sidebar-user-info{min-width:0;display:flex;flex:1;flex-direction:column;gap:2px}
.sidebar-user-info strong{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;line-height:1.25}
.sidebar-user-info small{display:block;color:var(--muted);font-size:11px;line-height:1.2;letter-spacing:.04em}
.logout-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:10px 12px;border:1px solid rgba(239,68,68,.22);border-radius:11px;background:rgba(239,68,68,.08);color:#fca5a5;font-size:13px;font-weight:800}
.logout-btn:hover{background:rgba(239,68,68,.16);border-color:rgba(239,68,68,.35);color:var(--text)}
@media(max-width:900px){.sidebar{height:auto;max-height:none;overflow:visible;padding:16px}.nav-scroll{overflow:visible}.sidebar-footer{position:relative}.nav-group-title{white-space:normal}}



/* v1.5.4 sidebar rebuild */
.sidebar{display:flex!important;flex-direction:column!important;height:100vh!important;padding:18px 14px!important;overflow:hidden!important}
.sidebar .brand{flex:0 0 auto;padding:2px 8px 0!important;margin:0 0 18px!important}
.sidebar .nav-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:0 2px}
.sidebar .nav{display:flex;flex-direction:column;gap:5px}
.sidebar .nav>a{display:flex;align-items:center;min-height:44px;margin:0!important;padding:10px 12px!important;border-radius:12px}
.sidebar-section{display:block;width:100%;margin:1px 0}
.sidebar-section-toggle{appearance:none;-webkit-appearance:none;border:0;outline:0;width:100%;min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 11px;margin:0;border-radius:11px;background:transparent;color:var(--muted);font:inherit;font-size:12px;font-weight:800;letter-spacing:.035em;text-align:left;cursor:pointer}
.sidebar-section-toggle:hover,.sidebar-section.open>.sidebar-section-toggle{background:var(--panel2);color:var(--text)}
.sidebar-section-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-section-chevron{flex:0 0 22px;width:22px;height:22px;display:grid;place-items:center;font-size:20px;line-height:1;transition:transform .16s ease}
.sidebar-section.open .sidebar-section-chevron{transform:rotate(90deg)}
.sidebar-section-items{display:none;flex-direction:column;gap:3px;padding:5px 0 6px 10px}
.sidebar-section.open .sidebar-section-items{display:flex}
.sidebar-section-items>a{display:flex;align-items:center;min-height:38px;margin:0!important;padding:8px 11px!important;border-radius:10px;font-size:13px}
.sidebar-footer{flex:0 0 auto!important;margin:12px 0 0!important;padding:14px 0 0!important;border-top:1px solid var(--line)!important;background:var(--panel)!important}
.sidebar-account-card{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:10px;padding:0 4px 12px}
.sidebar-account-avatar{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--panel2);font-size:17px}
.sidebar-account-text{min-width:0;display:flex;flex-direction:column;gap:3px}
.sidebar-account-text strong{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;line-height:1.2}
.sidebar-account-text span{display:block;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.05em;line-height:1.2}
.sidebar-logout{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:40px;margin:0!important;padding:9px 12px;border:1px solid rgba(239,68,68,.28);border-radius:11px;background:rgba(239,68,68,.09);color:#fca5a5;font-size:13px;font-weight:800}
.sidebar-logout:hover{background:rgba(239,68,68,.16);color:var(--text)}
@media(max-width:900px){.sidebar{height:auto!important;overflow:visible!important;padding:14px!important}.sidebar .nav-scroll{overflow:visible}.sidebar-footer{margin-top:14px!important}}

/* v1.6.0 Anti Delete */
.deleted-message{outline:1px dashed rgba(248,113,113,.42)}
.deleted-badge{margin-top:7px;font-size:10px;font-weight:800;letter-spacing:.04em;color:#fca5a5}

/* v1.6.5 View Once Archive */
.view-once-badge{margin-top:8px;font-size:11px;font-weight:800;letter-spacing:.03em;color:#fbbf24}
.archived-media{margin-top:9px;display:flex;flex-direction:column;gap:7px}
.archived-media img,.archived-media video{display:block;max-width:min(420px,100%);max-height:420px;border-radius:12px;border:1px solid var(--line);background:#000;object-fit:contain}
.archived-media a{display:inline-block;width:fit-content;max-width:100%}
.archive-delete-form{margin-top:3px}
.archive-delete-form .btn{font-size:11px;padding:7px 9px}

/* v1.7.0 XSTECH dashboard UI refresh */
:root{
  --bg:#0b1018;--panel:#111821;--panel2:#161f2a;--panel3:#1b2633;--text:#f3f4f6;--muted:#8fa0b5;--line:#233041;
  --accent:#ff7a00;--accent-2:#ff9a2e;--accent-soft:rgba(255,122,0,.12);--green:#22c55e;--blue:#3b82f6;--purple:#8b5cf6;--teal:#14b8a6;--danger:#ef4444;
  --shadow:0 10px 26px rgba(0,0,0,.16);--radius:14px;
}
body.light{
  --bg:#f5f7fb;--panel:#ffffff;--panel2:#f8fafc;--panel3:#f1f5f9;--text:#162033;--muted:#66758a;--line:#e1e7ef;
  --shadow:0 8px 24px rgba(15,23,42,.07);--accent-soft:rgba(255,122,0,.08);
}
html,body{min-height:100%;background:var(--bg)}
body{font-size:14px;letter-spacing:-.005em}
.app-shell{grid-template-columns:228px minmax(0,1fr);background:var(--bg)}
.app-content{min-width:0;display:flex;flex-direction:column;min-height:100vh}
.sidebar{background:#08111d!important;border-right:1px solid rgba(148,163,184,.12)!important;color:#fff!important;padding:18px 12px!important}
body.light .sidebar{background:#0b1523!important}
.brand-lockup{display:flex!important;align-items:center;gap:10px;padding:0 8px 16px!important;margin:0!important;border-bottom:1px solid rgba(148,163,184,.12)}
.brand-mark{width:38px;height:38px;display:grid;place-items:center;font-size:29px;font-weight:950;font-style:italic;color:var(--accent);line-height:1}
.brand-copy{display:flex;flex-direction:column;line-height:1.05}.brand-copy b{font-size:21px;letter-spacing:.04em}.brand-copy small{font-size:10px;color:#cbd5e1;font-weight:700;margin-top:4px}
.sidebar-profile{display:grid;grid-template-columns:38px 1fr;gap:10px;align-items:center;padding:14px 8px;margin-bottom:6px;border-bottom:1px solid rgba(148,163,184,.12)}
.sidebar-profile-avatar,.topbar-user-avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#dbe3ef;color:#6b7280;font-size:10px}
.sidebar-profile strong,.sidebar-profile small,.online-indicator{display:block}.sidebar-profile strong{font-size:13px}.sidebar-profile small{font-size:11px;color:#cbd5e1;margin-top:2px}.online-indicator{font-size:10px;color:#22c55e;margin-top:4px}
.sidebar .nav{gap:2px}.sidebar .nav>a,.sidebar-section-items>a{color:#d6deea!important}.sidebar .nav>a.active,.sidebar-section-items>a.active{background:linear-gradient(135deg,#ff6a00,#ff8f13)!important;color:#fff!important;box-shadow:0 7px 18px rgba(255,122,0,.22)}
.sidebar .nav>a:hover,.sidebar-section-items>a:hover{background:rgba(255,255,255,.06)!important;color:#fff!important}.sidebar-section-toggle{color:#9fb0c4!important;font-size:10px!important;letter-spacing:.08em!important;padding:10px 8px!important}.sidebar-section.open>.sidebar-section-toggle{background:transparent!important;color:#fff!important}
.sidebar-section-items{padding-left:4px!important}.sidebar-footer{border-top:1px solid rgba(148,163,184,.12)!important;background:transparent!important}.sidebar-logout{background:linear-gradient(135deg,#ff6a00,#ff8f13)!important;border:0!important;color:#fff!important;min-height:42px!important}
.topbar{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;gap:20px;margin:0!important;padding:14px 22px;background:color-mix(in srgb,var(--panel) 94%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.topbar-left,.topbar-actions,.topbar-user{display:flex;align-items:center}.topbar-left{gap:12px}.topbar-actions{gap:10px}.page-heading h1{font-size:22px;margin:0;line-height:1.2}.page-heading p{font-size:12px;color:var(--muted);margin:3px 0 0}.topbar-date,.theme-switch,.topbar-user{border:1px solid var(--line);background:var(--panel2);border-radius:11px;padding:9px 12px;color:var(--text)}
.theme-switch{display:flex;align-items:center;gap:7px;font-weight:800;cursor:pointer}.topbar-user{gap:8px;padding:6px 9px}.topbar-user strong,.topbar-user small{display:block}.topbar-user strong{font-size:12px}.topbar-user small{font-size:10px;color:var(--muted)}.topbar-user-avatar{width:32px;height:32px}.mobile-menu-toggle{display:none;border:0;background:transparent;color:var(--text);font-size:22px;cursor:pointer}
.main{padding:18px 22px 26px!important;max-width:1680px;width:100%;margin:0 auto}.card{border-radius:var(--radius)!important;box-shadow:var(--shadow)!important;background:var(--panel)!important}.card h3{margin-top:0}.table-wrap{width:100%;overflow:auto}table{min-width:720px}th{font-size:11px;text-transform:uppercase;letter-spacing:.035em}td{font-size:13px}.btn.primary{background:linear-gradient(135deg,#ff6a00,#ff8d12)!important;color:#fff!important}.full-btn{width:100%;justify-content:center;margin-top:12px}
.app-footer{display:flex;justify-content:space-between;gap:20px;padding:16px 22px;color:var(--muted);font-size:11px;border-top:1px solid var(--line);margin-top:auto}
.dashboard-kpi-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-bottom:14px}.metric-card{min-height:126px;border:1px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:var(--shadow);padding:16px;display:grid;grid-template-columns:46px 1fr;gap:12px;align-items:start}.metric-icon{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:21px;font-weight:900;color:#fff}.metric-card span{display:block;color:var(--muted);font-size:11px;margin-bottom:8px}.metric-card strong{display:block;font-size:25px;line-height:1.05}.metric-card small{display:block;color:var(--muted);font-size:10px;margin-top:10px}.metric-green .metric-icon{background:var(--green)}.metric-blue .metric-icon{background:var(--blue)}.metric-purple .metric-icon{background:var(--purple)}.metric-orange .metric-icon{background:var(--accent)}.metric-teal .metric-icon{background:var(--teal)}
.dashboard-workspace{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:14px}.dashboard-main-column,.dashboard-side-column{min-width:0;display:flex;flex-direction:column;gap:14px}.dashboard-row-primary{display:grid;grid-template-columns:minmax(360px,1.3fr) minmax(250px,.78fr) minmax(280px,.92fr);gap:14px}.card-heading{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:14px}.card-heading h3{margin:0;font-size:14px}.card-heading p{margin:4px 0 0;color:var(--muted);font-size:10px}.card-heading a{font-size:10px;color:var(--blue);font-weight:800}.dashboard-chart-card{min-height:350px}.trend-chart{height:270px;display:flex;flex-direction:column}.trend-legend{display:flex;gap:16px;justify-content:center;color:var(--muted);font-size:10px;margin-bottom:12px}.legend-dot{display:inline-block;width:8px;height:8px;border-radius:999px;margin-right:6px}.legend-dot.incoming,.trend-bar.incoming{background:var(--blue)}.legend-dot.outgoing,.trend-bar.outgoing{background:var(--green)}.trend-bars{flex:1;display:grid;grid-template-columns:repeat(7,1fr);gap:10px;align-items:end;border-bottom:1px solid var(--line);padding:14px 8px 0;background:repeating-linear-gradient(to top,transparent 0,transparent 24%,color-mix(in srgb,var(--line) 45%,transparent) 25%)}.trend-day{height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px}.trend-columns{height:88%;display:flex;align-items:flex-end;gap:4px}.trend-bar{width:8px;border-radius:6px 6px 2px 2px;min-height:5px}.trend-day small{font-size:9px;color:var(--muted);white-space:nowrap}
.device-status-list,.activity-list{display:flex;flex-direction:column}.device-status-item,.activity-item{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:9px;padding:10px 0;border-bottom:1px solid var(--line)}.device-status-item:last-child,.activity-item:last-child{border-bottom:0}.device-status-icon{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(34,197,94,.11);color:var(--green)}.device-status-copy strong,.activity-copy strong{display:block;font-size:11px}.device-status-copy small,.activity-copy small{display:block;color:var(--muted);font-size:9px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status-pill,.table-status{font-size:9px;font-weight:900;border-radius:7px;padding:5px 7px}.status-pill.connected,.table-status.done{background:rgba(34,197,94,.12);color:#22c55e}.status-pill.connecting{background:rgba(245,158,11,.13);color:#f59e0b}.status-pill.disconnected{background:rgba(239,68,68,.12);color:#ef4444}.activity-icon{width:28px;height:28px;border-radius:50%;display:grid;place-items:center}.activity-icon.in{background:rgba(59,130,246,.12);color:var(--blue)}.activity-icon.out{background:rgba(20,184,166,.12);color:var(--teal)}.activity-item time{font-size:9px;color:var(--muted)}.table-status.new{background:rgba(59,130,246,.12);color:var(--blue)}
.quick-menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.quick-menu-grid a{min-height:74px;border:1px solid var(--line);border-radius:11px;background:var(--panel2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;transition:.15s}.quick-menu-grid a:hover{transform:translateY(-2px);border-color:var(--accent)}.quick-menu-grid b{font-size:20px;color:var(--accent)}.quick-menu-grid span{font-size:9px}.status-summary-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);font-size:10px}.status-summary-row span{display:flex;align-items:center;gap:7px}.status-summary-row .status-dot{margin:0}.feature-card ul{list-style:none;margin:0;padding:0}.feature-card li{position:relative;padding:6px 0 6px 20px;font-size:10px}.feature-card li:before{content:'✓';position:absolute;left:0;top:6px;width:14px;height:14px;border-radius:50%;display:grid;place-items:center;background:rgba(34,197,94,.14);color:var(--green);font-size:9px;font-weight:900}.engine-card{display:flex;justify-content:space-between;gap:10px;align-items:center}.engine-card h3{margin-bottom:5px}.engine-card p{margin:0;font-size:11px}.recent-table-card{padding-bottom:8px}.empty-state{color:var(--muted);font-size:11px;padding:18px 0;text-align:center}
.page-devices .device-grid,.page-users_global .row,.page-settings .row{align-items:start}.page-users_global .card,.page-devices .card,.page-inbox .card{overflow:hidden}
@media(max-width:1380px){.dashboard-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.dashboard-row-primary{grid-template-columns:1fr 1fr}.dashboard-row-primary .activity-card{grid-column:1/-1}.dashboard-workspace{grid-template-columns:minmax(0,1fr) 250px}}
@media(max-width:1100px){.app-shell{grid-template-columns:210px minmax(0,1fr)}.dashboard-workspace{grid-template-columns:1fr}.dashboard-side-column{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-row-primary{grid-template-columns:1fr 1fr}.topbar-user{display:none}}
@media(max-width:900px){.app-shell{display:block}.sidebar{position:fixed!important;left:-250px;top:0;bottom:0;width:228px;height:100vh!important;z-index:70;transition:left .2s ease}.sidebar.mobile-open{left:0}.mobile-menu-toggle{display:block}.topbar{padding:12px 14px}.main{padding:14px!important}.dashboard-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-row-primary{grid-template-columns:1fr}.dashboard-row-primary .activity-card{grid-column:auto}.dashboard-side-column{grid-template-columns:1fr 1fr}.topbar-date{display:none}.app-footer{padding:14px}}
@media(max-width:620px){.dashboard-kpi-grid{grid-template-columns:1fr}.dashboard-side-column{display:flex}.topbar-actions{gap:6px}.theme-switch{padding:8px 10px}.page-heading h1{font-size:18px}.metric-card{min-height:108px}.app-footer{flex-direction:column}.quick-menu-grid{grid-template-columns:repeat(3,1fr)}.row,.grid{grid-template-columns:1fr!important}}

/* v1.7.0 compact accordion sidebar */
.sidebar-section-items{display:none!important;padding:3px 0 5px 8px!important}
.sidebar-section.open>.sidebar-section-items{display:flex!important}
.sidebar-section-toggle{min-height:38px!important;padding:8px 10px!important}
.sidebar-section-items a{min-height:36px!important;padding:8px 10px!important;font-size:12px!important}
.sidebar .nav>a{min-height:40px!important;padding:9px 11px!important}
.sidebar-section-chevron{transition:transform .16s ease!important}
.sidebar-section.open .sidebar-section-chevron{transform:rotate(90deg)!important}
.engine-status-panel{padding:10px 0}.engine-status-panel strong{font-size:24px;margin-left:7px}.engine-status-panel p{margin:10px 0 0}

/* v1.7.1 global UI/theme audit */
body:not(.light){color-scheme:dark}
body.light{color-scheme:light}

input,textarea,select{
  min-height:42px;
  background:var(--panel2)!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
  box-shadow:none!important;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
textarea{min-height:110px}
input::placeholder,textarea::placeholder{color:var(--muted)!important;opacity:.85}
select option{background:var(--panel);color:var(--text)}
input:focus,textarea:focus,select:focus{
  border-color:var(--accent)!important;
  box-shadow:0 0 0 3px var(--accent-soft)!important;
}
input:disabled,textarea:disabled,select:disabled,
input[readonly],textarea[readonly]{opacity:.72;cursor:not-allowed;background:var(--panel3)!important}
input[type="checkbox"],input[type="radio"]{width:16px!important;min-height:16px;height:16px;accent-color:var(--accent);box-shadow:none!important}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color:var(--text)!important;
  caret-color:var(--text)!important;
  -webkit-box-shadow:0 0 0 1000px var(--panel2) inset!important;
  box-shadow:0 0 0 1000px var(--panel2) inset!important;
  transition:background-color 9999s ease-out 0s;
}

.field label{font-weight:600;color:var(--muted)}
.check{min-height:34px;padding:7px 9px;border:1px solid transparent;border-radius:9px}
.check:hover{background:var(--panel2);border-color:var(--line)}

.card{overflow:visible}
.page-users_global .card,.page-devices .card,.page-inbox .card{overflow:hidden}
.row{align-items:start}
.access-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;margin:8px 0 18px}
.access-grid .check{margin:0;background:var(--panel2);border-color:var(--line)}
.access-grid .empty-state{grid-column:1/-1;border:1px dashed var(--line);border-radius:10px;padding:14px}

.table-wrap, .card>div[style*="overflow:auto"]{border-radius:10px}
table{background:transparent}
thead th,table tr:first-child th{background:color-mix(in srgb,var(--panel2) 82%,transparent)}
tbody tr:hover td,table tr:not(:first-child):hover td{background:color-mix(in srgb,var(--accent-soft) 38%,transparent)}

.pager .btn{min-width:38px;justify-content:center;border:1px solid var(--line)}
.pager .btn.primary{border-color:transparent;box-shadow:0 5px 14px rgba(255,122,0,.18)}
.alert.ok{border-color:rgba(34,197,94,.28);background:rgba(34,197,94,.08)}
.alert.fail{border-color:rgba(239,68,68,.28);background:rgba(239,68,68,.08)}

body.light input,body.light textarea,body.light select{background:#fff!important;color:var(--text)!important}
body.light input:-webkit-autofill,
body.light input:-webkit-autofill:hover,
body.light input:-webkit-autofill:focus,
body.light textarea:-webkit-autofill,
body.light select:-webkit-autofill{
  -webkit-text-fill-color:var(--text)!important;
  -webkit-box-shadow:0 0 0 1000px #fff inset!important;
  box-shadow:0 0 0 1000px #fff inset!important;
}

@media(max-width:700px){.access-grid{grid-template-columns:1fr}}

/* XSTECH WA - elegant green navigation + interactive card polish */
:root{
  --sidebar-green:#064e3b;
  --sidebar-green-deep:#043b2e;
  --sidebar-green-hover:rgba(52,211,153,.12);
  --sidebar-green-active:#10b981;
  --sidebar-green-active-2:#059669;
}
.sidebar,
body.light .sidebar{
  background:linear-gradient(180deg,var(--sidebar-green-deep) 0%,#052f27 54%,#04261f 100%)!important;
  border-right:1px solid rgba(167,243,208,.13)!important;
  box-shadow:10px 0 28px rgba(2,44,34,.10);
}
.brand-lockup,.sidebar-profile,.sidebar-footer{border-color:rgba(167,243,208,.13)!important}
.brand-copy small,.sidebar-profile small{color:#c7f9e7!important}
.online-indicator{color:#5ee6a8!important}
.sidebar-profile-avatar{background:rgba(255,255,255,.13)!important;color:#ecfdf5!important;border:1px solid rgba(255,255,255,.10)}
.sidebar .nav>a,.sidebar-section-items>a{color:#e6fff5!important;transition:transform .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease!important}
.sidebar .nav>a:hover,.sidebar-section-items>a:hover{background:var(--sidebar-green-hover)!important;color:#fff!important;transform:translateX(3px)}
.sidebar .nav>a.active,.sidebar-section-items>a.active{
  background:linear-gradient(135deg,var(--sidebar-green-active),var(--sidebar-green-active-2))!important;
  color:#fff!important;
  box-shadow:0 8px 20px rgba(16,185,129,.24)!important;
}
.sidebar-section-toggle{color:#a7dcca!important;transition:background .16s ease,color .16s ease!important}
.sidebar-section-toggle:hover,.sidebar-section.open>.sidebar-section-toggle{color:#fff!important;background:rgba(255,255,255,.055)!important}
.sidebar-section-chevron{color:#7ee2bd}
.sidebar-logout{box-shadow:0 8px 18px rgba(255,122,0,.16)}
.nav-scroll::-webkit-scrollbar-thumb{background:rgba(167,243,208,.25)!important}

/* subtle motion like a modern SaaS dashboard */
.card,.metric-card,.quick-menu-grid a{
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;
}
.card:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--green) 30%,var(--line))!important;
  box-shadow:0 14px 32px rgba(0,0,0,.20)!important;
}
body.light .card:hover{box-shadow:0 14px 32px rgba(15,23,42,.11)!important}
.metric-card:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--green) 34%,var(--line));
  box-shadow:0 15px 34px rgba(0,0,0,.19);
}
body.light .metric-card:hover{box-shadow:0 15px 34px rgba(15,23,42,.12)}
.metric-icon{transition:transform .18s ease,filter .18s ease}
.metric-card:hover .metric-icon{transform:translateY(-2px) scale(1.06);filter:brightness(1.06)}
.quick-menu-grid a:hover{transform:translateY(-3px);border-color:var(--green)!important;box-shadow:0 10px 22px rgba(16,185,129,.10)}
.quick-menu-grid a:hover b{transform:scale(1.08)}
.quick-menu-grid b{transition:transform .18s ease}

/* keep data-entry cards stable while cursor moves across long forms */
.page-users_global .card:hover,.page-settings .card:hover,.page-devices .card:hover,.page-inbox .card:hover{transform:none}

@media (prefers-reduced-motion:reduce){
  .card,.metric-card,.metric-icon,.quick-menu-grid a,.quick-menu-grid b,.sidebar .nav>a,.sidebar-section-items>a{transition:none!important;transform:none!important}
}

/* v1.7.6 dashboard clickable KPI + destination highlight */
.metric-card-link{color:inherit;text-decoration:none;cursor:pointer;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.metric-card-link:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:0 10px 28px rgba(0,0,0,.12)}.metric-card-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.dashboard-highlight-target{animation:xstechDashboardHighlight 2.6s ease both;scroll-margin-top:90px}@keyframes xstechDashboardHighlight{0%,35%{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 75%,transparent),0 0 0 8px color-mix(in srgb,var(--accent) 18%,transparent)}100%{box-shadow:var(--shadow)}}

/* Realtime WhatsApp-like Inbox */
.page-inbox{padding:0!important;max-width:none!important;height:calc(100vh - 77px);overflow:hidden}
.page-inbox+.app-footer{display:none}
.app-content:has(.page-inbox){height:100dvh;min-height:0;overflow:hidden}
.app-content:has(.page-inbox) .topbar{flex:0 0 auto;margin-bottom:0}
.app-content:has(.page-inbox) .page-inbox{display:flex!important;flex-direction:column;flex:1 1 auto;min-height:0;height:auto!important;overflow:hidden}
.app-content:has(.page-inbox) .wa-inbox-app{flex:1 1 auto;min-height:0;height:auto}

.wa-inbox-app{height:auto;flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(310px,380px) minmax(0,1fr);background:var(--panel);border-top:1px solid var(--line);overflow:hidden}
.wa-chat-list-panel{min-width:0;border-right:1px solid var(--line);display:flex;flex-direction:column;background:var(--panel)}
.wa-list-head{padding:14px 14px 10px;border-bottom:1px solid var(--line);background:var(--panel);z-index:3}
.wa-list-title{display:flex;align-items:center;justify-content:space-between;font-size:20px;margin-bottom:12px}.wa-live-dot{font-size:13px;color:#22c55e}.wa-live-dot.offline{color:#ef4444}
.wa-list-tools{display:grid;grid-template-columns:145px minmax(0,1fr);gap:8px}.wa-list-tools select,.wa-search input{min-height:38px!important;height:38px!important;border-radius:20px!important;font-size:12px!important}.wa-search{position:relative}.wa-search span{position:absolute;left:12px;top:9px;color:var(--muted);z-index:2}.wa-search input{padding-left:31px!important}
.wa-filter-row{display:flex;gap:6px;overflow:auto;padding-top:10px}.wa-filter-row button{white-space:nowrap;border:1px solid var(--line);background:var(--panel2);color:var(--muted);border-radius:999px;padding:7px 11px;font-size:11px;font-weight:800;cursor:pointer}.wa-filter-row button.active{background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.35);color:#5ee6a8}
.wa-conversation-list{overflow:auto;flex:1;min-height:0}.wa-conversation-item{width:100%;border:0;border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);background:transparent;color:var(--text);padding:11px 12px;display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:10px;text-align:left;cursor:pointer}.wa-conversation-item:hover,.wa-conversation-item.active{background:var(--panel2)}.wa-conversation-item.active{box-shadow:inset 3px 0 #22c55e}.wa-conv-avatar,.wa-avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#dbe4ef,#8fa0b5);color:#263548;font-weight:900}.wa-conv-main{min-width:0}.wa-conv-top{display:flex;justify-content:space-between;gap:8px}.wa-conv-top strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.wa-conv-top time{font-size:10px;color:var(--muted);flex:0 0 auto}.wa-conv-preview{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}.wa-conv-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}.wa-device-badge,.wa-status-badge{display:inline-flex;align-items:center;border-radius:999px;padding:2px 6px;font-size:9px;font-weight:900;letter-spacing:.02em}.wa-device-badge{background:rgba(59,130,246,.13);color:#93c5fd}.wa-status-badge.manual{background:rgba(245,158,11,.14);color:#fbbf24}.wa-status-badge.ticket{background:rgba(139,92,246,.15);color:#c4b5fd}.wa-unread{align-self:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#22c55e;color:#052e16;font-size:10px;font-weight:900;display:grid;place-items:center}.wa-list-empty,.wa-loading{padding:30px 16px;text-align:center;color:var(--muted)}
.wa-chat-panel{height:100%;display:flex;flex-direction:column;min-width:0;min-height:0;background:color-mix(in srgb,var(--bg) 72%,var(--panel));position:relative}.wa-chat-header{min-height:66px;display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--panel);border-bottom:1px solid var(--line);z-index:4}.wa-chat-header .wa-avatar{width:42px;height:42px}.wa-chat-person{min-width:0;flex:1}.wa-chat-person strong{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wa-chat-person>span{display:block;color:var(--muted);font-size:10px;margin-top:2px}.wa-chat-badges{display:flex;gap:5px;flex-wrap:wrap;margin-top:4px}.wa-chat-more{position:relative}.wa-chat-more summary{list-style:none;width:36px;height:36px;display:grid;place-items:center;font-size:21px;cursor:pointer;border-radius:50%}.wa-chat-more summary:hover{background:var(--panel2)}.wa-chat-more-menu{position:absolute;right:0;top:40px;width:235px;padding:11px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px;font-size:11px;color:var(--muted);z-index:10}.wa-mobile-back{display:none;border:0;background:transparent;color:var(--text);font-size:24px;cursor:pointer;padding:5px}
.wa-message-list{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:20px clamp(12px,5vw,70px);padding-bottom:18px;display:flex;flex-direction:column;gap:4px;background-image:radial-gradient(circle at 1px 1px,rgba(148,163,184,.045) 1px,transparent 0);background-size:22px 22px}.wa-message-row{display:flex}.wa-message-row.out{justify-content:flex-end}.wa-message-row.in{justify-content:flex-start}.wa-message-bubble{max-width:min(72%,680px);padding:8px 9px 5px;border-radius:8px;background:var(--panel2);box-shadow:0 1px 1px rgba(0,0,0,.13);overflow:hidden}.wa-message-row.out .wa-message-bubble{background:color-mix(in srgb,#075e54 72%,var(--panel));color:#f5fffb}.wa-message-text{font-size:13px;line-height:1.4;word-break:break-word}.wa-message-foot{display:flex;justify-content:flex-end;gap:5px;color:color-mix(in srgb,var(--muted) 82%,transparent);font-size:9px;margin-top:3px}.wa-media-image,.wa-media-video{display:block;max-width:min(420px,100%);max-height:420px;border-radius:7px;object-fit:contain;background:#000;margin-bottom:5px}.wa-media-image-link{display:block}.wa-media-audio{width:min(340px,72vw);max-width:100%;height:38px}.wa-document-card{display:flex;align-items:center;gap:10px;min-width:min(320px,68vw);padding:10px;background:rgba(0,0,0,.13);border-radius:7px;margin-bottom:5px}.wa-document-card>span{font-size:26px}.wa-document-card div{min-width:0}.wa-document-card strong,.wa-document-card small{display:block}.wa-document-card strong{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wa-document-card small{font-size:9px;color:var(--muted);margin-top:2px}.wa-view-once-tag{font-size:9px;color:#fbbf24;margin-top:5px}.wa-empty-chat{margin:auto;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--muted);text-align:center}.wa-empty-chat>div{font-size:44px;opacity:.35}
.wa-composer{flex:0 0 auto;position:static;display:grid;grid-template-columns:auto auto auto auto auto minmax(0,1fr) auto;align-items:end;gap:4px;padding:8px 10px;background:var(--panel);border-top:1px solid var(--line)}.wa-compose-icon,.wa-send-button{width:38px;height:38px;border:0;border-radius:50%;display:grid;place-items:center;background:transparent;color:var(--text);cursor:pointer;font-size:18px}.wa-compose-icon:hover{background:var(--panel2)}.wa-compose-icon.recording{background:#ef4444;color:#fff;animation:waPulse 1s infinite}.wa-send-button{background:#22c55e;color:#052e16;font-size:21px;font-weight:900}.wa-send-button:disabled{opacity:.5}.wa-composer textarea{min-height:40px!important;max-height:110px;resize:none!important;border-radius:20px!important;padding:10px 13px!important;font-size:13px!important;line-height:1.35}.wa-emoji-panel{position:absolute;left:12px;bottom:62px;max-width:300px;padding:8px;background:var(--panel);border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow);z-index:8}.wa-emoji-panel button{border:0;background:transparent;font-size:21px;padding:5px;cursor:pointer;border-radius:7px}.wa-emoji-panel button:hover{background:var(--panel2)}.wa-attachment-preview{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--panel);border-top:1px solid var(--line)}.wa-attachment-preview img,.wa-attachment-preview video{width:58px;height:58px;border-radius:8px;object-fit:cover;background:#000}.wa-attachment-preview audio{width:200px;max-width:55vw}.wa-attachment-preview>div{min-width:0;flex:1}.wa-attachment-preview strong,.wa-attachment-preview small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wa-attachment-preview small{color:var(--muted);font-size:10px}.wa-attachment-preview>button{border:0;background:var(--panel2);color:var(--text);border-radius:50%;width:28px;height:28px;cursor:pointer}.wa-preview-file{font-size:34px}.wa-inbox-app.dragging:after{content:'Lepaskan file untuk dilampirkan';position:absolute;inset:16px;z-index:40;border:2px dashed #22c55e;border-radius:18px;background:rgba(5,46,22,.86);display:grid;place-items:center;font-size:20px;font-weight:900;color:#fff;pointer-events:none}@keyframes waPulse{50%{opacity:.55}}
@media(max-width:900px){.wa-inbox-app{grid-template-columns:330px minmax(0,1fr)}}
@media(max-width:700px){.page-inbox .alert{display:none}.wa-inbox-app{display:block;position:relative}.wa-chat-list-panel,.wa-chat-panel{position:absolute;inset:0}.wa-chat-list-panel{display:flex}.wa-chat-panel{display:none}.wa-inbox-app.has-active-chat .wa-chat-list-panel{display:none}.wa-inbox-app.has-active-chat .wa-chat-panel{display:flex}.wa-mobile-back{display:block}.wa-list-tools{grid-template-columns:132px minmax(0,1fr)}.wa-list-head{padding:10px}.wa-message-list{padding:14px 8px}.wa-message-bubble{max-width:88%}.wa-camera-button{display:none}.wa-composer{grid-template-columns:auto auto auto auto minmax(0,1fr) auto;padding:7px 6px}.wa-composer .wa-camera-button{display:none}.wa-chat-header{padding:7px 8px}.wa-chat-more-menu{right:4px}.wa-media-image,.wa-media-video{max-height:330px}.topbar-date,.topbar-user,.theme-switch{display:none}.page-inbox .app-footer{display:none}}


/* XSTECH Inbox final viewport layout */
.app-content.inbox-shell{
  height:100dvh;
  min-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.app-content.inbox-shell .topbar{
  flex:0 0 auto;
  margin-bottom:0;
}
.inbox-shell .page-inbox{
  flex:1 1 auto;
  min-height:0;
  height:auto!important;
  overflow:hidden;
  display:flex!important;
  flex-direction:column;
  padding:0!important;
  max-width:none!important;
}
.inbox-shell .wa-inbox-app{
  flex:1 1 auto;
  min-height:0;
  height:auto!important;
  overflow:hidden;
}
.wa-chat-list-panel{
  height:100%;
  min-height:0;
  overflow:hidden;
}
.wa-chat-panel{
  height:100%;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto auto;
  min-width:0;
  min-height:0;
  overflow:hidden;
}
.wa-message-list{
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding-bottom:18px;
}
.wa-attachment-preview{
  min-height:0;
}
.wa-composer{
  min-height:56px;
  position:relative;
  flex:none;
  z-index:2;
  align-self:stretch;
}
@media(max-width:700px){
  .app-content.inbox-shell{height:100dvh}
  .inbox-shell .wa-inbox-app{position:relative}
  .wa-chat-list-panel,.wa-chat-panel{height:100%}
}


/* ============================================================
   XSTECH WA GLOBAL MOCKUP UI
   Approved global visual shell. Runtime/backend behavior unchanged.
   ============================================================ */
:root{
  --x-bg:#07131d;
  --x-bg-soft:#0a1823;
  --x-panel:#0b1924;
  --x-panel-2:#0f2130;
  --x-line:#203442;
  --x-line-soft:rgba(148,163,184,.14);
  --x-text:#f5f8fb;
  --x-muted:#9eb0bf;
  --x-green:#00c98b;
  --x-green-2:#00ad78;
  --x-green-deep:#004b3f;
  --x-orange:#ff7900;
  --x-orange-2:#ff9300;
  --x-blue:#1462ad;
}
html,body{min-height:100%;background:var(--x-bg)}
body{background:radial-gradient(circle at 75% 12%,rgba(0,201,139,.035),transparent 35%),var(--x-bg);color:var(--x-text)}
.mockup-shell-v2.app-shell{min-height:100dvh;grid-template-columns:254px minmax(0,1fr);background:var(--x-bg)}
.mockup-shell-v2 .app-content{min-width:0;background:var(--x-bg)}
.mockup-shell-v2 .sidebar{
  width:auto!important;
  min-width:0;
  height:100dvh!important;
  position:sticky!important;
  top:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:18px 14px 14px!important;
  background:linear-gradient(180deg,#004c40 0%,#00443b 38%,#003b34 100%)!important;
  border-right:1px solid rgba(255,255,255,.09)!important;
  color:#fff!important;
  box-shadow:14px 0 32px rgba(0,0,0,.13);
}
.mockup-shell-v2 .brand-lockup{
  min-height:64px;
  display:flex!important;
  align-items:flex-start!important;
  gap:12px!important;
  padding:2px 8px 14px!important;
  margin:0 0 8px!important;
  border-bottom:1px solid rgba(255,255,255,.09)!important;
}
.mockup-shell-v2 .brand-mark{
  width:39px;height:39px;display:grid;place-items:center;
  color:var(--x-orange);font-weight:1000;font-size:32px;line-height:1;
  font-style:italic;letter-spacing:-5px;transform:skew(-8deg);
}
.mockup-shell-v2 .brand-copy{display:flex;flex-direction:column;line-height:1.05;padding-top:3px}
.mockup-shell-v2 .brand-copy b{font-size:24px;letter-spacing:.02em;color:var(--x-orange);font-weight:1000}
.mockup-shell-v2 .brand-copy small{font-size:9px;margin-top:5px;color:#fff;opacity:.95;font-weight:700}
.mockup-shell-v2 .sidebar-profile{
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr) 20px;
  align-items:center;
  gap:10px;
  min-height:72px;
  padding:10px 8px 12px!important;
  margin:0 0 6px!important;
  border:0!important;
}
.mockup-shell-v2 .sidebar-profile-avatar{
  width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(145deg,#13aa84,#08735f);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;font-size:12px;
}
.mockup-shell-v2 .sidebar-profile-copy{min-width:0;display:flex;flex-direction:column}
.mockup-shell-v2 .sidebar-profile-copy strong{font-size:14px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mockup-shell-v2 .online-indicator{font-size:10px!important;color:#a6f6d7!important;margin-top:5px!important}
.mockup-shell-v2 .sidebar-profile-chevron{font-size:17px;color:#fff;opacity:.9;text-align:center}
.mockup-shell-v2 .nav-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding-right:2px;scrollbar-width:thin}
.mockup-shell-v2 .nav{display:flex!important;flex-direction:column;gap:3px}
.mockup-shell-v2 .sidebar-nav-item{
  min-height:44px;
  display:flex!important;
  align-items:center;
  gap:12px;
  width:100%;
  padding:9px 11px!important;
  border-radius:9px!important;
  color:rgba(255,255,255,.96)!important;
  text-decoration:none!important;
  border:0!important;
  background:transparent!important;
  font-size:13px!important;
  font-weight:600!important;
  transition:background .15s ease,color .15s ease,transform .15s ease;
}
.mockup-shell-v2 .sidebar-nav-item:hover{background:rgba(255,255,255,.08)!important;transform:translateX(1px)}
.mockup-shell-v2 .sidebar-nav-item.active{
  background:linear-gradient(135deg,#00c48a,#08b984)!important;
  color:#fff!important;
  box-shadow:0 6px 20px rgba(0,0,0,.16),inset 0 0 0 1px rgba(255,255,255,.07);
}
.mockup-shell-v2 .sidebar-nav-icon{
  width:22px;height:22px;flex:0 0 22px;
  display:grid;place-items:center;color:currentColor
}
.mockup-shell-v2 .sidebar-nav-icon svg{
  width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round
}
.mockup-shell-v2 .sidebar-item-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mockup-shell-v2 .sidebar-section{margin-top:8px!important;border:0!important;background:transparent!important}
.mockup-shell-v2 .sidebar-section-toggle{
  width:100%;min-height:38px;
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 10px!important;
  background:transparent!important;border:0!important;
  color:#fff!important;cursor:pointer;
  font-size:11px!important;font-weight:900!important;
  letter-spacing:.035em;text-align:left;
}
.mockup-shell-v2 .sidebar-section-chevron{font-size:20px;line-height:1;transition:transform .18s ease}
.mockup-shell-v2 .sidebar-section.open .sidebar-section-chevron{transform:rotate(90deg)}
.mockup-shell-v2 .sidebar-section-items{padding-left:0!important;margin-top:1px}
.mockup-shell-v2 .sidebar-section-items .sidebar-nav-item{padding-left:14px!important;min-height:41px;font-size:12px!important}
.mockup-shell-v2 .sidebar-footer{
  flex:0 0 auto;
  padding:12px 5px 0!important;
  margin:8px 0 0!important;
  border-top:1px solid rgba(255,255,255,.09)!important;
  background:transparent!important;
}
.mockup-shell-v2 .sidebar-logout{
  width:100%;
  min-height:48px;
  display:flex!important;align-items:center;justify-content:center;gap:9px;
  border-radius:10px!important;
  background:linear-gradient(135deg,var(--x-orange),var(--x-orange-2))!important;
  color:#fff!important;font-size:13px!important;font-weight:900!important;
  border:0!important;box-shadow:0 8px 18px rgba(0,0,0,.16)
}
.mockup-shell-v2 .sidebar-brand-meta{
  display:flex;align-items:center;gap:9px;
  padding:13px 7px 0;color:rgba(255,255,255,.88)
}
.mockup-shell-v2 .sidebar-brand-mini{
  width:27px;height:27px;display:grid;place-items:center;
  font-size:20px;font-weight:1000;font-style:italic;color:var(--x-orange)
}
.mockup-shell-v2 .sidebar-brand-meta>span:last-child{display:flex;flex-direction:column}
.mockup-shell-v2 .sidebar-brand-meta strong{font-size:11px}
.mockup-shell-v2 .sidebar-brand-meta small{font-size:8px;color:rgba(255,255,255,.64);margin-top:2px}

/* global topbar */
.mockup-shell-v2 .topbar{
  min-height:80px;
  margin:0!important;
  padding:14px 24px!important;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:linear-gradient(180deg,#0a1823,#091620)!important;
  border-bottom:1px solid var(--x-line)!important;
  box-shadow:none!important;
}
.mockup-shell-v2 .topbar-left{display:flex;align-items:center;gap:12px;min-width:0}
.mockup-shell-v2 .page-heading h1{font-size:25px!important;line-height:1.05;margin:0!important;color:#fff!important;font-weight:900}
.mockup-shell-v2 .page-heading p{font-size:11px!important;margin:6px 0 0!important;color:var(--x-muted)!important}
.mockup-shell-v2 .topbar-actions{display:flex;align-items:center;gap:9px}
.mockup-shell-v2 .topbar-date,.mockup-shell-v2 .theme-switch,.mockup-shell-v2 .topbar-user{
  min-height:42px!important;
  border:1px solid var(--x-line)!important;
  border-radius:11px!important;
  background:#0d1b27!important;
  color:#fff!important;
  box-shadow:none!important;
}
.mockup-shell-v2 .topbar-date{display:flex;align-items:center;padding:0 14px!important;font-size:11px}
.mockup-shell-v2 .theme-switch{padding:0 13px!important;font-size:11px;font-weight:800}
.mockup-shell-v2 .topbar-user{display:flex;align-items:center;gap:8px;padding:5px 10px!important}
.mockup-shell-v2 .topbar-user-avatar{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:#dbe7f2;color:#24384b}
.mockup-shell-v2 .topbar-user strong{display:block;font-size:11px}
.mockup-shell-v2 .topbar-user small{display:block;font-size:8px;color:var(--x-muted);margin-top:1px}
.mockup-shell-v2 .mobile-menu-toggle{
  width:36px;height:36px;border:0;border-radius:8px;background:transparent;color:#fff;font-size:20px;display:none;place-items:center
}

/* global page/card treatment keeps existing functionality but aligns visual language */
.mockup-shell-v2 .main{width:100%;max-width:none!important;margin:0!important;padding:20px 22px 28px!important;background:var(--x-bg);min-width:0}
.mockup-shell-v2 .card{background:var(--x-panel)!important;border:1px solid var(--x-line)!important;border-radius:12px!important;box-shadow:none!important}
.mockup-shell-v2 input,.mockup-shell-v2 select,.mockup-shell-v2 textarea{
  background:#0d1c28!important;border:1px solid #263a48!important;color:#fff!important;border-radius:10px!important
}
.mockup-shell-v2 input::placeholder,.mockup-shell-v2 textarea::placeholder{color:#8295a5!important}
.mockup-shell-v2 .btn{border-radius:9px!important}
.mockup-shell-v2 .btn.primary{background:linear-gradient(135deg,#00b97e,#00a970)!important;color:#fff!important}

/* Inbox is a real three-region layout: list and chat never overlap */
.mockup-shell-v2 .app-content.inbox-shell{height:100dvh!important;min-height:0!important;overflow:hidden!important;display:flex!important;flex-direction:column!important}
.mockup-shell-v2 .inbox-shell .topbar{flex:0 0 80px!important}
.mockup-shell-v2 .inbox-shell .page-inbox{
  flex:1 1 auto!important;
  min-height:0!important;height:auto!important;
  padding:0!important;overflow:hidden!important;
  display:flex!important;flex-direction:column!important
}
.mockup-shell-v2 .inbox-shell .wa-inbox-app{
  flex:1 1 auto!important;min-height:0!important;height:auto!important;
  display:grid!important;grid-template-columns:405px minmax(0,1fr)!important;
  overflow:hidden!important;background:var(--x-bg)!important;border:0!important
}
.mockup-shell-v2 .wa-chat-list-panel{
  position:relative!important;inset:auto!important;
  height:100%!important;min-height:0!important;overflow:hidden!important;
  display:flex!important;flex-direction:column!important;
  background:#091722!important;border-right:1px solid var(--x-line)!important
}
.mockup-shell-v2 .wa-list-head{
  flex:0 0 auto;padding:15px 14px 10px!important;background:#091722!important;
  border-bottom:1px solid var(--x-line)!important
}
.mockup-shell-v2 .wa-list-title{font-size:18px!important;margin-bottom:11px!important}
.mockup-shell-v2 .wa-live-dot{font-size:11px;color:#00db91}
.mockup-shell-v2 .wa-list-tools{grid-template-columns:165px minmax(0,1fr)!important;gap:8px!important}
.mockup-shell-v2 .wa-list-tools select,.mockup-shell-v2 .wa-search input{
  height:42px!important;min-height:42px!important;border-radius:22px!important;background:#0e1d29!important;border-color:#263a48!important
}
.mockup-shell-v2 .wa-filter-row{gap:7px!important;padding-top:10px!important}
.mockup-shell-v2 .wa-filter-row button{
  min-height:32px;padding:6px 12px!important;border-radius:18px!important;background:#0e1d29!important;border-color:#263a48!important;color:#b9c6d0!important
}
.mockup-shell-v2 .wa-filter-row button.active{background:#006d55!important;border-color:#008b6a!important;color:#dffff2!important}
.mockup-shell-v2 .wa-conversation-list{
  flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;background:#091722!important
}
.mockup-shell-v2 .wa-conversation-item{
  min-height:76px!important;padding:10px 13px!important;
  grid-template-columns:48px minmax(0,1fr) auto!important;gap:10px!important;
  border-bottom:1px solid var(--x-line-soft)!important;background:#091722!important
}
.mockup-shell-v2 .wa-conversation-item:hover{background:#0d1e2b!important}
.mockup-shell-v2 .wa-conversation-item.active{background:#0e2230!important;box-shadow:inset 3px 0 #00d08e!important}
.mockup-shell-v2 .wa-conv-avatar,.mockup-shell-v2 .wa-avatar{
  width:46px!important;height:46px!important;border-radius:50%!important;
  background:linear-gradient(145deg,#e5eef6,#a5b8ca)!important;color:#183044!important
}
.mockup-shell-v2 .wa-conv-top strong{font-size:13px!important;color:#fff}
.mockup-shell-v2 .wa-conv-top time{font-size:9px!important;color:#a8bac8!important}
.mockup-shell-v2 .wa-conv-preview{font-size:11px!important;color:#c2cdd6!important;margin-top:3px}
.mockup-shell-v2 .wa-device-pill{font-size:8px!important}
.mockup-shell-v2 .wa-unread-count{background:#00d28d!important;color:#00291d!important}

/* chat panel: exact non-overlapping rows */
.mockup-shell-v2 .wa-chat-panel{
  position:relative!important;inset:auto!important;
  height:100%!important;min-height:0!important;min-width:0!important;
  display:grid!important;
  grid-template-rows:74px minmax(0,1fr) auto 58px!important;
  overflow:hidden!important;
  background:#07141e!important
}
.mockup-shell-v2 .wa-chat-header{
  grid-row:1;min-height:0!important;height:74px!important;padding:9px 16px!important;
  background:#091722!important;border-bottom:1px solid var(--x-line)!important;z-index:5!important
}
.mockup-shell-v2 .wa-chat-person strong{font-size:14px!important}
.mockup-shell-v2 .wa-chat-person>span{font-size:9px!important;color:#a9bac7!important}
.mockup-shell-v2 .wa-status-badge{font-size:9px!important}
.mockup-shell-v2 .wa-chat-more summary{font-size:21px!important}
.mockup-shell-v2 .wa-message-list{
  grid-row:2;min-height:0!important;height:auto!important;
  overflow-y:auto!important;overflow-x:hidden!important;
  padding:16px clamp(28px,4.2vw,64px) 18px!important;
  background-color:#07141e!important;
  background-image:
    radial-gradient(circle at 1px 1px,rgba(148,163,184,.045) 1px,transparent 0),
    linear-gradient(rgba(7,20,30,.93),rgba(7,20,30,.93))!important;
  background-size:22px 22px,auto!important;
  scroll-padding-bottom:20px
}
.mockup-shell-v2 .wa-message-row{flex:0 0 auto}
.mockup-shell-v2 .wa-message-bubble{
  max-width:min(68%,620px)!important;
  background:#122331!important;border:0!important;border-radius:8px!important;
  box-shadow:0 1px 2px rgba(0,0,0,.18)!important;padding:9px 10px 6px!important
}
.mockup-shell-v2 .wa-message-row.out .wa-message-bubble{background:#006c59!important;color:#f4fffb!important}
.mockup-shell-v2 .wa-message-text{font-size:12px!important;line-height:1.46!important}
.mockup-shell-v2 .wa-message-foot{font-size:8px!important;color:#9eb3bd!important}
.mockup-shell-v2 .wa-attachment-preview{
  grid-row:3;position:relative!important;min-height:0!important;max-height:84px;overflow:hidden;
  background:#0a1823!important;border-top:1px solid var(--x-line)!important
}
.mockup-shell-v2 .wa-attachment-preview[hidden]{display:none!important}
.mockup-shell-v2 .wa-composer{
  grid-row:4;position:relative!important;bottom:auto!important;z-index:4!important;
  height:58px!important;min-height:58px!important;max-height:58px!important;
  display:grid!important;grid-template-columns:auto auto auto auto auto minmax(0,1fr) auto!important;
  align-items:center!important;gap:5px!important;
  padding:7px 12px!important;background:#091722!important;border-top:1px solid var(--x-line)!important
}
.mockup-shell-v2 .wa-compose-icon,.mockup-shell-v2 .wa-send-button{
  width:38px!important;height:38px!important;min-width:38px!important;border-radius:50%!important
}
.mockup-shell-v2 .wa-composer textarea{
  height:40px!important;min-height:40px!important;max-height:40px!important;
  border-radius:22px!important;padding:10px 15px!important;
  background:#0e1d29!important;border:1px solid #263b49!important;font-size:12px!important
}
.mockup-shell-v2 .wa-send-button{background:#00c987!important;color:#00372a!important}
.mockup-shell-v2 .wa-emoji-panel{bottom:64px!important}

/* Medium desktop / laptop */
@media(max-width:1280px){
  .mockup-shell-v2.app-shell{grid-template-columns:224px minmax(0,1fr)}
  .mockup-shell-v2 .inbox-shell .wa-inbox-app{grid-template-columns:350px minmax(0,1fr)!important}
  .mockup-shell-v2 .brand-copy b{font-size:21px}
  .mockup-shell-v2 .sidebar-nav-item{font-size:12px!important}
  .mockup-shell-v2 .wa-message-bubble{max-width:73%!important}
}

/* Tablet: sidebar becomes drawer, chat still uses list + conversation */
@media(max-width:900px){
  .mockup-shell-v2.app-shell{display:block!important}
  .mockup-shell-v2 .sidebar{
    position:fixed!important;left:-260px!important;top:0!important;bottom:0!important;
    width:254px!important;height:100dvh!important;z-index:100!important;
    transition:left .2s ease!important
  }
  .mockup-shell-v2 .sidebar.mobile-open{left:0!important}
  .mockup-shell-v2 .mobile-menu-toggle{display:grid!important}
  .mockup-shell-v2 .topbar{min-height:68px!important;padding:10px 14px!important}
  .mockup-shell-v2 .page-heading h1{font-size:20px!important}
  .mockup-shell-v2 .inbox-shell .topbar{flex-basis:68px!important}
  .mockup-shell-v2 .inbox-shell .wa-inbox-app{grid-template-columns:330px minmax(0,1fr)!important}
  .mockup-shell-v2 .wa-message-list{padding-left:18px!important;padding-right:18px!important}
  .mockup-shell-v2 .wa-message-bubble{max-width:82%!important}
  .mockup-shell-v2 .main:not(.page-inbox){padding:14px!important}
}

/* Mobile: list-first. Chat exists only after selection. No panel overlap. */
@media(max-width:700px){
  .mockup-shell-v2 .topbar{height:64px!important;min-height:64px!important;padding:8px 10px!important}
  .mockup-shell-v2 .topbar-date,.mockup-shell-v2 .theme-switch,.mockup-shell-v2 .topbar-user{display:none!important}
  .mockup-shell-v2 .page-heading h1{font-size:17px!important}
  .mockup-shell-v2 .page-heading p{font-size:9px!important;margin-top:3px!important}
  .mockup-shell-v2 .inbox-shell .topbar{flex:0 0 64px!important}
  .mockup-shell-v2 .inbox-shell .page-inbox{position:relative!important}
  .mockup-shell-v2 .inbox-shell .wa-inbox-app{
    position:relative!important;display:block!important;width:100%!important;height:100%!important;overflow:hidden!important
  }
  .mockup-shell-v2 .wa-inbox-app:not(.has-active-chat) .wa-chat-list-panel{display:flex!important;position:absolute!important;inset:0!important;width:100%!important}
  .mockup-shell-v2 .wa-inbox-app:not(.has-active-chat) .wa-chat-panel{display:none!important}
  .mockup-shell-v2 .wa-inbox-app.has-active-chat .wa-chat-list-panel{display:none!important}
  .mockup-shell-v2 .wa-inbox-app.has-active-chat .wa-chat-panel{
    display:grid!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
    grid-template-rows:66px minmax(0,1fr) auto 56px!important
  }
  .mockup-shell-v2 .wa-mobile-back{display:grid!important;width:34px;height:34px;place-items:center}
  .mockup-shell-v2 .wa-list-head{padding:10px!important}
  .mockup-shell-v2 .wa-list-tools{grid-template-columns:138px minmax(0,1fr)!important}
  .mockup-shell-v2 .wa-filter-row{padding-top:8px!important}
  .mockup-shell-v2 .wa-conversation-item{min-height:70px!important}
  .mockup-shell-v2 .wa-chat-header{height:66px!important;padding:7px 8px!important}
  .mockup-shell-v2 .wa-chat-header .wa-avatar{width:38px!important;height:38px!important}
  .mockup-shell-v2 .wa-message-list{padding:12px 8px 14px!important}
  .mockup-shell-v2 .wa-message-bubble{max-width:90%!important}
  .mockup-shell-v2 .wa-composer{
    height:56px!important;min-height:56px!important;max-height:56px!important;
    grid-template-columns:auto auto auto auto minmax(0,1fr) auto!important;padding:6px 6px!important
  }
  .mockup-shell-v2 .wa-camera-button{display:none!important}
  .mockup-shell-v2 .wa-compose-icon,.mockup-shell-v2 .wa-send-button{width:36px!important;height:36px!important;min-width:36px!important}
  .mockup-shell-v2 .wa-composer textarea{height:38px!important;min-height:38px!important;max-height:38px!important;font-size:12px!important}
  .mockup-shell-v2 .wa-media-image,.mockup-shell-v2 .wa-media-video{max-height:310px!important}
  .mockup-shell-v2 .wa-document-card{min-width:0!important;width:min(290px,80vw)!important}
}

/* Small mobile */
@media(max-width:390px){
  .mockup-shell-v2 .wa-list-tools{grid-template-columns:126px minmax(0,1fr)!important}
  .mockup-shell-v2 .wa-filter-row button{padding:5px 9px!important;font-size:10px!important}
  .mockup-shell-v2 .wa-conv-avatar{width:43px!important;height:43px!important}
  .mockup-shell-v2 .wa-compose-icon,.mockup-shell-v2 .wa-send-button{width:34px!important;height:34px!important;min-width:34px!important}
}


/* Preserve existing light-theme control without changing the approved structure */
body.light .mockup-shell-v2{
  --x-bg:#eef4f7;
  --x-bg-soft:#f5f8fa;
  --x-panel:#ffffff;
  --x-panel-2:#f3f7f9;
  --x-line:#d7e1e7;
  --x-line-soft:rgba(73,96,112,.13);
  --x-text:#152631;
  --x-muted:#607685;
}
body.light .mockup-shell-v2 .app-content,
body.light .mockup-shell-v2 .main{background:#eef4f7!important;color:#152631!important}
body.light .mockup-shell-v2 .topbar,
body.light .mockup-shell-v2 .wa-list-head,
body.light .mockup-shell-v2 .wa-chat-list-panel,
body.light .mockup-shell-v2 .wa-chat-header,
body.light .mockup-shell-v2 .wa-composer{background:#fff!important;color:#152631!important}
body.light .mockup-shell-v2 .wa-conversation-list,
body.light .mockup-shell-v2 .wa-conversation-item{background:#fff!important;color:#152631!important}
body.light .mockup-shell-v2 .wa-conversation-item:hover{background:#f5f8fa!important}
body.light .mockup-shell-v2 .wa-conversation-item.active{background:#edf7f3!important}
body.light .mockup-shell-v2 .wa-chat-panel,
body.light .mockup-shell-v2 .wa-message-list{background-color:#e9eff2!important}
body.light .mockup-shell-v2 .wa-message-list{
  background-image:radial-gradient(circle at 1px 1px,rgba(80,103,116,.05) 1px,transparent 0),linear-gradient(rgba(233,239,242,.94),rgba(233,239,242,.94))!important
}
body.light .mockup-shell-v2 .wa-message-bubble{background:#fff!important;color:#172832!important}
body.light .mockup-shell-v2 .wa-message-row.out .wa-message-bubble{background:#d7f7ea!important;color:#17382f!important}
body.light .mockup-shell-v2 input,
body.light .mockup-shell-v2 select,
body.light .mockup-shell-v2 textarea,
body.light .mockup-shell-v2 .topbar-date,
body.light .mockup-shell-v2 .theme-switch,
body.light .mockup-shell-v2 .topbar-user{background:#f5f8fa!important;color:#152631!important;border-color:#d7e1e7!important}
body.light .mockup-shell-v2 .page-heading h1,
body.light .mockup-shell-v2 .wa-conv-top strong,
body.light .mockup-shell-v2 .wa-chat-person strong{color:#152631!important}

/* XSTECH Icon Rail + Expandable Flyout Sidebar */
.mockup-shell-v2.rail-shell{grid-template-columns:64px minmax(0,1fr)!important;position:relative}
.mockup-shell-v2 .icon-rail{position:sticky;top:0;height:100dvh;z-index:120;display:flex;flex-direction:column;align-items:center;background:linear-gradient(180deg,#dceaf7,#d3e4f2);border-right:1px solid #c5d8e8;padding:8px 6px;color:#61788b}
.mockup-shell-v2 .rail-brand{width:44px;height:44px;display:grid;place-items:center;text-decoration:none;margin:0 0 9px;border-radius:10px;background:#eef7ff;color:#ff7900;font-size:26px;font-weight:1000;font-style:italic}
.mockup-shell-v2 .rail-nav{display:flex;flex-direction:column;align-items:center;gap:5px;width:100%}
.mockup-shell-v2 .rail-button{position:relative;width:46px;height:46px;display:grid;place-items:center;border:0;border-radius:9px;background:transparent;color:#71879a;text-decoration:none;cursor:pointer;transition:.15s ease}
.mockup-shell-v2 .rail-button:hover{background:rgba(255,255,255,.65);color:#1769d2}
.mockup-shell-v2 .rail-button.active{background:#b9d8ff;color:#1167e8}
.mockup-shell-v2 .rail-button .sidebar-nav-icon{width:24px;height:24px}
.mockup-shell-v2 .rail-button .sidebar-nav-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.mockup-shell-v2 .rail-dot{position:absolute;right:5px;top:5px;width:7px;height:7px;border-radius:50%;background:#ff5c5c;border:1px solid #fff}
.mockup-shell-v2 .rail-bottom{margin-top:auto;display:flex;flex-direction:column;gap:5px}
.mockup-shell-v2 .rail-logout{color:#d04a4a}.mockup-shell-v2 .rail-hamburger{font-size:19px}
.mockup-shell-v2 .rail-flyout{position:fixed;z-index:115;left:64px;top:0;bottom:0;width:286px;transform:translateX(-110%);opacity:0;pointer-events:none;background:#fff;color:#17232d;border-right:1px solid #dce5ec;box-shadow:14px 0 28px rgba(0,0,0,.12);transition:transform .18s ease,opacity .18s ease;display:flex;flex-direction:column}
.mockup-shell-v2 .rail-flyout.open{transform:translateX(0);opacity:1;pointer-events:auto}
.mockup-shell-v2 .rail-flyout-head{min-height:72px;padding:14px 14px 12px 17px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e7edf2}
.mockup-shell-v2 .rail-flyout-head strong{display:block;font-size:17px}.mockup-shell-v2 .rail-flyout-head small{display:block;margin-top:4px;font-size:9px;color:#8293a1}
.mockup-shell-v2 .rail-flyout-head button{width:34px;height:34px;border:0;border-radius:50%;background:#f1f5f8;color:#617585;font-size:23px;cursor:pointer}
.mockup-shell-v2 .rail-flyout-body{flex:1;overflow-y:auto;padding:10px 8px 18px}
.mockup-shell-v2 .rail-menu-panel{display:none}.mockup-shell-v2 .rail-menu-panel.active{display:block}
.mockup-shell-v2 .rail-menu-caption{padding:10px 10px 7px;font-size:11px;color:#8495a4;text-transform:uppercase;font-weight:800;letter-spacing:.04em}
.mockup-shell-v2 .rail-menu-link{min-height:46px;display:grid;grid-template-columns:27px minmax(0,1fr) 15px;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;text-decoration:none;color:#182832;font-size:13px}
.mockup-shell-v2 .rail-menu-link:hover{background:#f1f6fa}.mockup-shell-v2 .rail-menu-link.active{background:#e6f1ff;color:#1267d8;font-weight:800}
.mockup-shell-v2 .rail-menu-link .sidebar-nav-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}.mockup-shell-v2 .rail-menu-link b{font-size:19px;font-weight:400;color:#9aa9b5}
body.light .mockup-shell-v2 .icon-rail{background:linear-gradient(180deg,#dceaf7,#d3e4f2)!important;color:#61788b!important}
body.light .mockup-shell-v2 .rail-flyout{background:#fff!important;color:#17232d!important}
body:not(.light) .mockup-shell-v2 .icon-rail{background:linear-gradient(180deg,#082d30,#073f3a);border-right-color:#14504b;color:#a8c3c2}
body:not(.light) .mockup-shell-v2 .rail-button:hover{background:rgba(255,255,255,.08);color:#fff}body:not(.light) .mockup-shell-v2 .rail-button.active{background:#00a879;color:#fff}
body:not(.light) .mockup-shell-v2 .rail-brand{background:#073b36;color:#ff7900}
body:not(.light) .mockup-shell-v2 .rail-flyout{background:#0c1b26;color:#f4f8fa;border-right-color:#243946}
body:not(.light) .mockup-shell-v2 .rail-flyout-head{border-bottom-color:#243946}body:not(.light) .mockup-shell-v2 .rail-flyout-head button{background:#142735;color:#b9c8d2}
body:not(.light) .mockup-shell-v2 .rail-menu-link{color:#e8eff4}body:not(.light) .mockup-shell-v2 .rail-menu-link:hover{background:#122633}body:not(.light) .mockup-shell-v2 .rail-menu-link.active{background:#063e35;color:#7ff2cc}
@media(max-width:900px){.mockup-shell-v2.rail-shell{display:grid!important;grid-template-columns:56px minmax(0,1fr)!important}.mockup-shell-v2 .icon-rail{position:sticky!important;left:auto!important;width:auto!important;height:100dvh!important;padding:7px 5px!important}.mockup-shell-v2 .rail-button{width:42px;height:42px}.mockup-shell-v2 .rail-flyout{left:56px;width:min(286px,calc(100vw - 56px))}.mockup-shell-v2 .mobile-menu-toggle{display:none!important}}
@media(max-width:700px){.mockup-shell-v2.rail-shell{grid-template-columns:52px minmax(0,1fr)!important}.mockup-shell-v2 .icon-rail{padding:6px 4px!important}.mockup-shell-v2 .rail-brand{width:40px;height:40px}.mockup-shell-v2 .rail-button{width:40px;height:40px}.mockup-shell-v2 .rail-flyout{left:52px;width:calc(100vw - 52px)}.mockup-shell-v2 .topbar{padding-left:9px!important}.mockup-shell-v2 .inbox-shell .wa-inbox-app{width:100%!important}}

/* Compact per-device privacy accordion */
.device-privacy-accordion{margin:12px 0;border:1px solid var(--line);border-radius:12px;background:var(--panel2);overflow:hidden}
.device-privacy-summary{min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;cursor:pointer;list-style:none;user-select:none}
.device-privacy-summary::-webkit-details-marker{display:none}
.device-privacy-summary>span:first-child{display:flex;flex-direction:column;gap:3px}
.device-privacy-summary b{font-size:14px}.device-privacy-summary small{font-size:10px;color:var(--muted);font-weight:500}
.device-privacy-count{flex:0 0 auto;padding:5px 9px;border-radius:999px;background:rgba(0,201,139,.12);color:#23d69c;font-size:10px;font-weight:800}
.device-privacy-summary::after{content:'›';margin-left:4px;color:var(--muted);font-size:20px;transition:transform .18s ease}
.device-privacy-accordion[open] .device-privacy-summary::after{transform:rotate(90deg)}
.device-privacy-body{padding:2px 14px 14px;border-top:1px solid var(--line)}
.device-privacy-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:10px}
.device-privacy-body h5{margin:8px 0 7px;font-size:12px}
.device-privacy-media{margin-top:8px;padding-top:9px;border-top:1px solid var(--line)}
.device-privacy-media-options{display:flex;flex-wrap:wrap;gap:8px 18px}
@media(max-width:700px){.device-privacy-grid{grid-template-columns:1fr;gap:4px}.device-privacy-media-options{display:grid;grid-template-columns:1fr 1fr}}

.wa-status-badge.bot-stop{background:rgba(239,68,68,.16);color:#ff8f8f;border:1px solid rgba(239,68,68,.25)}

/* XSTECH Template Pribadi selector in realtime Inbox */
.wa-template-select{max-width:150px;min-width:110px;height:40px;border:1px solid var(--line,#d8dee9);border-radius:10px;background:var(--card,#fff);color:inherit;padding:0 8px;font-size:13px}
@media(max-width:700px){.wa-template-select{max-width:112px;min-width:92px;font-size:12px;padding:0 5px}}

.device-session-health{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:7px 0 2px;font-size:10px}.device-session-health [data-health-status]{padding:3px 7px;border-radius:999px;background:var(--panel2)}.device-session-health [data-health-status=READY]{color:#22c55e}.device-session-health [data-health-status=DEGRADED],.device-session-health [data-health-status=RECOVERING]{color:#f59e0b}.device-session-health [data-health-status=REPAIR_NEEDED]{color:#ef4444}.session-repair-btn{border-color:#f59e0b}