:root{
  --brand:#0f8a6c; --brand-dark:#0b6b54; --brand-soft:#e6f4ef; --ink:#14201c; --muted:#6b7a74;
  --side:#0f1f1a; --side-ink:#b9c9c2; --bg:#f4f7f5; --line:#e3e9e6;
  --bs-body-font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --bs-primary:#0f8a6c; --bs-primary-rgb:15,138,108; --bs-link-color:#0f8a6c; --bs-link-hover-color:#0b6b54;
}
body{background:var(--bg);color:var(--ink);font-size:.925rem}
.btn-primary,.btn-success{--bs-btn-bg:var(--brand);--bs-btn-border-color:var(--brand);--bs-btn-hover-bg:var(--brand-dark);--bs-btn-hover-border-color:var(--brand-dark);--bs-btn-active-bg:var(--brand-dark)}
.btn-outline-primary{--bs-btn-color:var(--brand);--bs-btn-border-color:var(--brand);--bs-btn-hover-bg:var(--brand);--bs-btn-hover-border-color:var(--brand)}
.text-bg-primary{background:var(--brand)!important}
.form-control:focus,.form-select:focus{border-color:var(--brand);box-shadow:0 0 0 .2rem rgba(15,138,108,.15)}
.form-check-input:checked{background-color:var(--brand);border-color:var(--brand)}
.page-item.active .page-link{background:var(--brand);border-color:var(--brand)}

.app{display:flex;min-height:100vh}
.sidebar{width:252px;background:var(--side)!important;color:var(--side-ink);flex-shrink:0} /* !important: Bootstrap .offcanvas-lg makes it transparent on desktop */
@media(min-width:992px){.sidebar{position:sticky;top:0;height:100vh;overflow-y:auto;visibility:visible!important;transform:none!important}}
@media(max-width:991.98px){.sidebar{--bs-offcanvas-width:262px;background:var(--side)}}
.sidebar-brand{display:flex;align-items:center;gap:.7rem;padding:1.1rem 1rem;color:#fff;border-bottom:1px solid rgba(255,255,255,.06)}
.sidebar-brand img{width:38px;height:38px;object-fit:contain;background:#fff;border-radius:10px;padding:3px}
.sidebar-brand small{color:var(--side-ink);font-size:.72rem}
.logo-dot{width:38px;height:38px;border-radius:10px;background:var(--brand);display:grid;place-items:center;font-size:1.2rem;color:#fff}
.sidebar-nav{padding:.6rem .6rem 2rem}
.nav-section{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:#6f857c;padding:1rem .75rem .35rem}
.sidebar .nav-link{display:flex;align-items:center;gap:.7rem;color:var(--side-ink);padding:.5rem .75rem;border-radius:8px;font-size:.88rem}
.sidebar .nav-link i{font-size:1.05rem;width:1.1rem}
.sidebar .nav-link:hover{background:rgba(255,255,255,.05);color:#fff}
.sidebar .nav-link.active{background:var(--brand);color:#fff}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:.75rem;padding:.8rem 1.5rem;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.content{padding:1.5rem;flex:1}
@media(max-width:575px){.content{padding:1rem}.topbar{padding:.7rem 1rem}}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--brand-soft);color:var(--brand-dark);display:inline-grid;place-items:center;font-weight:600;font-size:.85rem}
.status-pill{align-items:center;gap:.35rem;font-size:.78rem;padding:.3rem .7rem;border-radius:99px}
.status-pill.ok{background:var(--brand-soft);color:var(--brand-dark)}.status-pill.bad{background:#fdecea;color:#b42318}
.notif-menu{width:340px;max-height:440px;overflow:auto}

.card{border:1px solid var(--line);border-radius:12px;box-shadow:none}
.card-header{background:#fff;border-bottom:1px solid var(--line);font-weight:600;padding:.85rem 1.1rem}
.table{--bs-table-bg:transparent;margin-bottom:0}
.table thead th{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600;border-bottom-width:1px;white-space:nowrap}
.table td{vertical-align:middle}
.stat-card{display:flex;gap:.9rem;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem;height:100%}
.stat-icon{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;font-size:1.25rem}
.tone-success{background:var(--brand-soft);color:var(--brand-dark)}.tone-warning{background:#fff4e0;color:#a15c00}
.tone-danger{background:#fdecea;color:#b42318}.tone-info{background:#e7f1fd;color:#1d5fa8}.tone-dark{background:#eceff1;color:#37474f}
.stat-value{font-size:1.45rem;font-weight:700;line-height:1.1}.stat-label{color:var(--muted);font-size:.8rem}
.empty{padding:2.5rem 1rem;text-align:center;color:var(--muted)}
.empty i{font-size:2rem;display:block;margin-bottom:.5rem;opacity:.5}

/* chat */
.chat-wrap{background:#efeae2;background-image:radial-gradient(rgba(0,0,0,.035) 1px,transparent 1px);background-size:16px 16px;height:62vh;overflow-y:auto;padding:1rem;border-radius:0 0 12px 12px}
.bubble{max-width:78%;padding:.5rem .75rem .35rem;border-radius:10px;margin-bottom:.45rem;white-space:normal;overflow-wrap:anywhere;font-size:.9rem;box-shadow:0 1px .5px rgba(0,0,0,.12);position:relative}
.bubble.in{background:#fff;border-top-left-radius:2px}
.bubble.out{background:#d9fdd3;margin-left:auto;border-top-right-radius:2px}
.bubble.out.staff{background:#cfe9ff}
.bubble.blocked,.bubble.failed{background:#fdecea}
.bubble .meta{font-size:.68rem;color:#667781;text-align:right;margin-top:.2rem}
.bubble img{max-width:220px;border-radius:6px;display:block;margin-bottom:.3rem}
.conv-item{display:flex;gap:.75rem;padding:.8rem 1rem;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
.conv-item:hover{background:#f8faf9}
.conv-item .avatar{width:40px;height:40px;flex-shrink:0}

/* simulator phone */
.phone{max-width:400px;margin:auto;border:10px solid #1d2b26;border-radius:32px;overflow:hidden;background:#efeae2}
.phone-head{background:#075e54;color:#fff;padding:.7rem 1rem;display:flex;align-items:center;gap:.6rem}
.phone .chat-wrap{height:520px;border-radius:0}
.phone-input{display:flex;gap:.4rem;padding:.5rem;background:#f0f0f0}
.sim-btn{display:block;width:100%;background:#fff;border:0;border-top:1px solid #eee;color:#027eb5;padding:.4rem;font-size:.85rem}
.sim-btn:hover{background:#f6f6f6}
.login-bg{min-height:100vh;background:linear-gradient(135deg,#0f1f1a 0%,#0f8a6c 130%);display:grid;place-items:center;padding:1rem}
.kbd{font-family:ui-monospace,Menlo,monospace;background:#f1f4f2;border:1px solid var(--line);padding:.1rem .4rem;border-radius:5px;font-size:.82rem}
.copy-field{font-family:ui-monospace,Menlo,monospace;font-size:.82rem}
.check-row{display:flex;gap:.75rem;align-items:flex-start;padding:.85rem 0;border-bottom:1px solid var(--line)}
.check-row:last-child{border:0}
.check-row .bi{font-size:1.2rem}