/* =====================================================================
   WhatsApp AI Agent — UI v1.2
   Modern "app" look (Next.js / shadcn style) on top of Bootstrap 5.
   Light + dark themes, glass top bar, smooth motion. No build step.
   ===================================================================== */

/* ---------- Design tokens ---------- */
:root,[data-bs-theme=light]{
  --brand:#059669; --brand-2:#10b981; --brand-dark:#047857; --brand-ink:#065f46;
  --brand-soft:rgba(16,185,129,.12); --brand-ring:rgba(16,185,129,.28);
  --bg:#f7f7f8; --surface:#ffffff; --surface-2:#f4f4f5; --surface-3:#ececef;
  --ink:#09090b; --ink-2:#27272a; --muted:#71717a; --line:#e6e6ea; --line-strong:#d4d4d8;
  --side:#fbfbfc; --side-ink:#52525b; --side-ink-strong:#09090b; --side-hover:#f0f0f2; --side-active:#ffffff;
  --shadow-xs:0 1px 2px rgba(16,24,40,.05);
  --shadow-sm:0 1px 3px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.04);
  --shadow-md:0 8px 24px -6px rgba(16,24,40,.10),0 2px 6px rgba(16,24,40,.05);
  --shadow-lg:0 24px 48px -12px rgba(16,24,40,.18);
  --glass:rgba(247,247,248,.72);
  --ok-bg:#ecfdf5; --ok-ink:#047857; --warn-bg:#fffbeb; --warn-ink:#b45309;
  --bad-bg:#fef2f2; --bad-ink:#b91c1c; --info-bg:#eff6ff; --info-ink:#1d4ed8; --neutral-bg:#f4f4f5; --neutral-ink:#3f3f46;
  --chat-bg:#efeae2; --chat-dot:rgba(0,0,0,.04); --bubble-in:#ffffff; --bubble-out:#d9fdd3; --bubble-staff:#dbeafe; --bubble-meta:#667781;
  --radius:12px; --radius-lg:16px;
  --ease:cubic-bezier(.22,1,.36,1); --ease-spring:cubic-bezier(.34,1.56,.64,1);

  --bs-body-font-family:'Geist','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --bs-font-monospace:'Geist Mono',ui-monospace,Menlo,Consolas,monospace;
  --bs-body-bg:var(--bg); --bs-body-color:var(--ink); --bs-emphasis-color:var(--ink);
  --bs-secondary-color:var(--muted); --bs-tertiary-color:#a1a1aa;
  --bs-secondary-bg:var(--surface-2); --bs-tertiary-bg:var(--surface-2);
  --bs-border-color:var(--line); --bs-border-radius:10px; --bs-border-radius-lg:14px; --bs-border-radius-sm:8px;
  --bs-primary:#059669; --bs-primary-rgb:5,150,105; --bs-success-rgb:5,150,105;
  --bs-link-color:var(--brand); --bs-link-color-rgb:5,150,105; --bs-link-hover-color:var(--brand-dark); --bs-link-hover-color-rgb:4,120,87;
}
[data-bs-theme=dark]{
  --brand:#10b981; --brand-2:#34d399; --brand-dark:#059669; --brand-ink:#6ee7b7;
  --brand-soft:rgba(16,185,129,.14); --brand-ring:rgba(52,211,153,.32);
  --bg:#09090b; --surface:#111113; --surface-2:#18181b; --surface-3:#222226;
  --ink:#fafafa; --ink-2:#e4e4e7; --muted:#a1a1aa; --line:#232328; --line-strong:#333338;
  --side:#0c0c0e; --side-ink:#a1a1aa; --side-ink-strong:#fafafa; --side-hover:#18181b; --side-active:#1c1c20;
  --shadow-xs:0 1px 2px rgba(0,0,0,.4); --shadow-sm:0 1px 3px rgba(0,0,0,.5);
  --shadow-md:0 8px 24px -6px rgba(0,0,0,.6); --shadow-lg:0 24px 48px -12px rgba(0,0,0,.7);
  --glass:rgba(9,9,11,.7);
  --ok-bg:rgba(16,185,129,.14); --ok-ink:#6ee7b7; --warn-bg:rgba(245,158,11,.14); --warn-ink:#fcd34d;
  --bad-bg:rgba(239,68,68,.15); --bad-ink:#fca5a5; --info-bg:rgba(59,130,246,.15); --info-ink:#93c5fd; --neutral-bg:#222226; --neutral-ink:#d4d4d8;
  --chat-bg:#0b141a; --chat-dot:rgba(255,255,255,.03); --bubble-in:#202c33; --bubble-out:#005c4b; --bubble-staff:#1e3a5f; --bubble-meta:#8696a0;
  --bs-body-bg:var(--bg); --bs-body-color:var(--ink); --bs-emphasis-color:var(--ink);
  --bs-secondary-color:var(--muted); --bs-tertiary-color:#71717a;
  --bs-secondary-bg:var(--surface-2); --bs-tertiary-bg:var(--surface-2); --bs-border-color:var(--line);
  --bs-link-color:var(--brand-2); --bs-link-color-rgb:52,211,153; --bs-link-hover-color:#6ee7b7;
  color-scheme:dark;
}

/* ---------- Base ---------- */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{background:var(--bg);color:var(--ink);font-size:.9rem;letter-spacing:-.006em;transition:background-color .3s var(--ease),color .3s var(--ease)}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{letter-spacing:-.022em;color:var(--ink)}
a{transition:color .15s}
::selection{background:var(--brand-ring)}
.text-muted{color:var(--muted)!important}
code{color:var(--brand-ink);background:var(--surface-2);border:1px solid var(--line);padding:.08rem .35rem;border-radius:6px;font-size:.82em}
hr{border-color:var(--line);opacity:1}
*{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px;border:3px solid transparent;background-clip:content-box}

/* Smooth page-to-page transitions (Chrome/Edge 126+; other browsers just load normally) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .18s var(--ease) both}
::view-transition-new(root){animation:vt-in .32s var(--ease) both}
.sidebar{view-transition-name:sidebar}
@keyframes vt-out{to{opacity:0;transform:translateY(-4px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(8px)}}

/* ---------- Buttons ---------- */
.btn{--bs-btn-font-weight:500;--bs-btn-border-radius:10px;--bs-btn-padding-x:.9rem;--bs-btn-focus-box-shadow:0 0 0 3px var(--brand-ring);
  transition:transform .15s var(--ease),background-color .2s,border-color .2s,box-shadow .2s,color .2s;letter-spacing:-.005em}
.btn:active{transform:scale(.97)}
.btn-sm{--bs-btn-border-radius:8px;--bs-btn-padding-x:.65rem}
.btn-lg{--bs-btn-border-radius:12px}
.btn-primary,.btn-success{--bs-btn-color:#fff;--bs-btn-bg:var(--brand);--bs-btn-border-color:transparent;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--brand-dark);--bs-btn-hover-border-color:transparent;
  --bs-btn-active-bg:var(--brand-dark);--bs-btn-active-border-color:transparent;--bs-btn-disabled-bg:var(--brand);--bs-btn-disabled-border-color:transparent;
  background-image:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(5,150,105,.35),0 0 0 1px rgba(5,150,105,.6)}
.btn-primary:hover,.btn-success:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 6px 16px -4px rgba(5,150,105,.5),0 0 0 1px rgba(5,150,105,.7)}
.btn-outline-primary,.btn-outline-success{--bs-btn-color:var(--brand);--bs-btn-border-color:var(--brand-ring);--bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--brand);--bs-btn-hover-border-color:var(--brand);--bs-btn-active-bg:var(--brand-dark)}
.btn-light,.btn-outline-secondary,.btn-secondary{--bs-btn-color:var(--ink-2);--bs-btn-bg:var(--surface);--bs-btn-border-color:var(--line);--bs-btn-hover-color:var(--ink);--bs-btn-hover-bg:var(--surface-2);--bs-btn-hover-border-color:var(--line-strong);
  --bs-btn-active-color:var(--ink);--bs-btn-active-bg:var(--surface-3);--bs-btn-active-border-color:var(--line-strong);box-shadow:var(--shadow-xs)}
.btn-outline-danger{--bs-btn-border-color:rgba(220,38,38,.35)}
.btn-danger{box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 2px rgba(220,38,38,.35)}
.btn-link{text-decoration:none;font-weight:500}
.btn-close{transition:opacity .15s,transform .2s var(--ease)}.btn-close:hover{transform:rotate(90deg)}

/* ---------- Forms ---------- */
.form-control,.form-select{background-color:var(--surface);border-color:var(--line);border-radius:10px;color:var(--ink);box-shadow:var(--shadow-xs);
  transition:border-color .15s,box-shadow .2s var(--ease),background-color .2s}
.form-control-sm,.form-select-sm{border-radius:8px}
.form-control-lg,.form-select-lg{border-radius:12px;font-size:1rem}
.form-control:hover,.form-select:hover{border-color:var(--line-strong)}
.form-control:focus,.form-select:focus{background-color:var(--surface);color:var(--ink);border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring)}
.form-control::placeholder{color:#a1a1aa}
.form-label{font-weight:500;font-size:.82rem;color:var(--ink-2);margin-bottom:.35rem}
.form-text{color:var(--muted)}
.form-check-input{border-color:var(--line-strong);transition:background-color .15s,border-color .15s,box-shadow .2s,background-position .25s var(--ease)}
.form-check-input:checked{background-color:var(--brand);border-color:var(--brand)}
.form-check-input:focus{box-shadow:0 0 0 3px var(--brand-ring);border-color:var(--brand)}
.input-group-text{background:var(--surface-2);border-color:var(--line);color:var(--muted)}

/* ---------- App shell ---------- */
.app{display:flex;min-height:100vh}
.sidebar{width:260px;background:var(--side)!important;color:var(--side-ink);flex-shrink:0;border-right:1px solid var(--line)} /* !important: Bootstrap .offcanvas-lg is transparent on desktop */
@media(min-width:992px){.sidebar{position:sticky;top:0;height:100vh;overflow-y:auto;visibility:visible!important;transform:none!important;display:flex;flex-direction:column}}
@media(max-width:991.98px){.sidebar{--bs-offcanvas-width:280px;background:var(--side);--bs-offcanvas-transition:transform .35s var(--ease)}}
.sidebar-brand{display:flex;align-items:center;gap:.7rem;padding:1.1rem 1.1rem 1rem;color:var(--side-ink-strong)}
.sidebar-brand img{width:36px;height:36px;object-fit:contain;background:#fff;border-radius:10px;padding:3px;box-shadow:var(--shadow-sm),0 0 0 1px var(--line)}
.sidebar-brand small{color:var(--muted);font-size:.72rem}
.logo-dot{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--brand-2),var(--brand-dark));display:grid;place-items:center;font-size:1.1rem;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 4px 12px -2px rgba(5,150,105,.45)}
.sidebar-search{margin:0 .8rem .4rem;display:flex;align-items:center;gap:.5rem;width:calc(100% - 1.6rem);padding:.45rem .7rem;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--muted);font-size:.84rem;box-shadow:var(--shadow-xs);transition:border-color .15s,box-shadow .2s}
.sidebar-search:hover{border-color:var(--line-strong);box-shadow:var(--shadow-sm)}
.sidebar-search kbd,.kbd-hint{margin-left:auto;font-family:var(--bs-font-monospace);font-size:.68rem;padding:.1rem .35rem;border-radius:5px;background:var(--surface-2);border:1px solid var(--line);color:var(--muted);box-shadow:none}
.sidebar-nav{position:relative;padding:.4rem .8rem 1.5rem;flex:1}
.nav-section{font-size:.7rem;font-weight:500;letter-spacing:.02em;color:#a1a1aa;padding:1rem .7rem .4rem}
.sidebar .nav-link{position:relative;z-index:1;display:flex;align-items:center;gap:.7rem;color:var(--side-ink);padding:.48rem .7rem;border-radius:9px;font-size:.865rem;font-weight:500;transition:color .15s}
.sidebar .nav-link i{font-size:1rem;width:1.1rem;opacity:.85;transition:transform .25s var(--ease-spring)}
.sidebar .nav-link:hover{color:var(--side-ink-strong)}
.sidebar .nav-link:hover i{transform:scale(1.12)}
.sidebar .nav-link.active{color:var(--side-ink-strong);background:var(--side-active);box-shadow:var(--shadow-sm),0 0 0 1px var(--line)}
.sidebar .nav-link.active i{color:var(--brand);opacity:1}
.sidebar .nav-link.active::before{content:"";position:absolute;left:-.8rem;top:22%;bottom:22%;width:3px;border-radius:0 3px 3px 0;background:var(--brand);animation:grow-y .4s var(--ease) both}
.sidebar .nav-link .badge{font-size:.68rem;font-weight:600;padding:.25em .55em}
/* sliding hover highlight (moved by app.js) */
.nav-hover{position:absolute;left:.8rem;right:.8rem;top:0;height:0;border-radius:9px;background:var(--side-hover);opacity:0;pointer-events:none;z-index:0;
  transition:transform .28s var(--ease),height .28s var(--ease),opacity .2s}
.sidebar-foot{padding:.8rem 1.1rem 1rem;border-top:1px solid var(--line);font-size:.75rem;color:var(--muted);display:flex;align-items:center;gap:.5rem}
.sidebar-foot .dot{width:7px;height:7px;border-radius:50%;background:var(--brand-2);box-shadow:0 0 0 3px var(--brand-soft);animation:pulse 2.4s infinite}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:.75rem;padding:.7rem 1.75rem;background:var(--glass);-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;view-transition-name:topbar;min-height:60px}
.topbar .crumb{font-size:.75rem;color:var(--muted);line-height:1.1;margin-bottom:.1rem}
.topbar h1{font-size:1.05rem!important;font-weight:600!important;letter-spacing:-.02em}
.topbar .btn-light{box-shadow:none;border-color:transparent;background:transparent}
.topbar .btn-light:hover{background:var(--surface-2);border-color:var(--line)}
.icon-btn{width:36px;height:36px;padding:0;display:inline-grid;place-items:center;border-radius:10px}
.content{padding:1.75rem;flex:1;width:100%;max-width:1600px}
@media(max-width:575px){.content{padding:1rem}.topbar{padding:.6rem 1rem}}
.app-footer{padding:0 1.75rem 1.25rem;font-size:.75rem;color:var(--muted)}
.avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--brand-soft),rgba(59,130,246,.12));color:var(--brand-ink);display:inline-grid;place-items:center;font-weight:600;font-size:.8rem;box-shadow:0 0 0 1px var(--line)}
.status-pill{align-items:center;gap:.4rem;font-size:.75rem;font-weight:500;padding:.3rem .7rem;border-radius:99px;border:1px solid transparent}
.status-pill.ok{background:var(--ok-bg);color:var(--ok-ink);border-color:rgba(16,185,129,.25)}
.status-pill.ok::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand-2);animation:pulse 2.4s infinite}
.status-pill.bad{background:var(--bad-bg);color:var(--bad-ink);border-color:rgba(239,68,68,.25)}
.notif-menu{width:360px;max-height:460px;overflow:auto}
.theme-toggle .bi-sun{display:none}[data-bs-theme=dark] .theme-toggle .bi-sun{display:inline}[data-bs-theme=dark] .theme-toggle .bi-moon-stars{display:none}
.theme-toggle i{transition:transform .5s var(--ease-spring)}.theme-toggle:hover i{transform:rotate(-25deg)}

/* top route progress bar */
#route-progress{position:fixed;left:0;top:0;height:2px;width:0;z-index:2000;background:linear-gradient(90deg,var(--brand-2),#22d3ee);box-shadow:0 0 10px var(--brand-2);opacity:0;transition:width .4s var(--ease),opacity .3s}
#route-progress.run{opacity:1;width:80%;transition:width 8s cubic-bezier(.1,.7,.2,1),opacity .2s}

/* ---------- Dropdowns, modals, offcanvas ---------- */
.dropdown-menu{--bs-dropdown-bg:var(--surface);--bs-dropdown-border-color:var(--line);--bs-dropdown-link-hover-bg:var(--surface-2);--bs-dropdown-link-active-bg:var(--brand);--bs-dropdown-link-color:var(--ink-2);
  border-radius:12px;box-shadow:var(--shadow-lg);padding:.35rem;font-size:.86rem}
.dropdown-menu.show{animation:pop-in .18s var(--ease) both;transform-origin:top right}
.dropdown-item{border-radius:8px;padding:.45rem .65rem;transition:background-color .12s}
.notif-menu .dropdown-item{white-space:normal}
.modal{--bs-modal-bg:var(--surface);--bs-modal-border-color:var(--line);--bs-modal-border-radius:16px;--bs-modal-header-border-color:var(--line);--bs-modal-footer-border-color:var(--line)}
.modal-content{box-shadow:var(--shadow-lg)}
.modal.fade .modal-dialog{transform:translateY(12px) scale(.97);transition:transform .3s var(--ease),opacity .3s}
.modal.show .modal-dialog{transform:none}
.modal-backdrop.show{opacity:.45;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.offcanvas-backdrop.show{opacity:.4}

/* ---------- Cards & data ---------- */
.card{--bs-card-bg:var(--surface);--bs-card-border-color:var(--line);--bs-card-cap-bg:transparent;border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);transition:box-shadow .25s var(--ease),border-color .25s}
.card-header{background:transparent;border-bottom:1px solid var(--line);font-weight:600;font-size:.88rem;padding:.9rem 1.15rem;letter-spacing:-.01em}
.card-header:first-child{border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.card-body{padding:1.15rem}
.card-footer{background:transparent!important;border-top:1px solid var(--line);padding:.8rem 1.15rem}
.card .list-group{--bs-list-group-bg:transparent;--bs-list-group-border-color:var(--line);--bs-list-group-action-hover-bg:var(--surface-2);--bs-list-group-action-hover-color:var(--ink)}
.list-group{--bs-list-group-bg:var(--surface);--bs-list-group-border-color:var(--line)}
.list-group-item-action{transition:background-color .15s,padding-left .2s var(--ease)}
.list-group-item-action:hover{padding-left:1.25rem}
.table{--bs-table-bg:transparent;--bs-table-color:var(--ink);--bs-table-hover-bg:var(--surface-2);--bs-table-hover-color:var(--ink);--bs-table-striped-bg:var(--surface-2);--bs-table-border-color:var(--line);margin-bottom:0}
.table thead th{font-size:.74rem;color:var(--muted);font-weight:500;border-bottom-width:1px;white-space:nowrap;background:var(--surface-2);padding-top:.6rem;padding-bottom:.6rem}
.table td,.table th{padding:.7rem .9rem;vertical-align:middle}
.table-hover>tbody>tr{transition:background-color .15s}
.table>:not(caption)>*>*{border-bottom-color:var(--line)}
.table tbody tr:last-child td{border-bottom:0}
.progress{--bs-progress-bg:var(--surface-2);border-radius:99px;overflow:hidden}
.progress-bar{background:linear-gradient(90deg,var(--brand),var(--brand-2))!important;border-radius:99px;animation:bar-in 1s var(--ease) both}
.pagination{--bs-pagination-bg:var(--surface);--bs-pagination-border-color:var(--line);--bs-pagination-color:var(--ink-2);--bs-pagination-hover-bg:var(--surface-2);--bs-pagination-hover-color:var(--ink);--bs-pagination-hover-border-color:var(--line);gap:.25rem}
.pagination .page-link{border-radius:8px!important;min-width:32px;text-align:center}
.page-item.active .page-link{background:var(--brand);border-color:var(--brand);color:#fff}
.nav-pills{--bs-nav-pills-link-active-bg:var(--surface);--bs-nav-pills-link-active-color:var(--ink);background:var(--surface-2);padding:3px;border-radius:11px;border:1px solid var(--line)}
.nav-pills .nav-link{color:var(--muted);border-radius:8px!important;font-weight:500;font-size:.83rem;transition:color .15s,background-color .2s,box-shadow .2s}
.nav-pills .nav-link:hover{color:var(--ink)}
.nav-pills .nav-link.active{background:var(--surface)!important;color:var(--ink)!important;box-shadow:var(--shadow-sm),0 0 0 1px var(--line)}
.nav-tabs{--bs-nav-tabs-border-color:var(--line);--bs-nav-tabs-link-active-bg:transparent;--bs-nav-tabs-link-active-color:var(--ink);--bs-nav-tabs-link-active-border-color:transparent;gap:.25rem;border-bottom:1px solid var(--line)}
.nav-tabs .nav-link{border:0;border-bottom:2px solid transparent;color:var(--muted);font-weight:500;padding:.6rem .9rem;transition:color .15s,border-color .25s var(--ease)}
.nav-tabs .nav-link:hover{color:var(--ink);border-bottom-color:var(--line-strong)}
.nav-tabs .nav-link.active{color:var(--ink);border-bottom-color:var(--brand)}
.accordion{--bs-accordion-bg:var(--surface);--bs-accordion-border-color:var(--line);--bs-accordion-active-bg:var(--brand-soft);--bs-accordion-active-color:var(--brand-ink);--bs-accordion-btn-focus-box-shadow:0 0 0 3px var(--brand-ring)}

/* soft badges */
.badge{font-weight:500;letter-spacing:0;border-radius:99px;padding:.32em .65em}
.text-bg-success,.text-bg-primary{background:var(--ok-bg)!important;color:var(--ok-ink)!important;box-shadow:inset 0 0 0 1px rgba(16,185,129,.25)}
.text-bg-danger{background:var(--bad-bg)!important;color:var(--bad-ink)!important;box-shadow:inset 0 0 0 1px rgba(239,68,68,.25)}
.text-bg-warning{background:var(--warn-bg)!important;color:var(--warn-ink)!important;box-shadow:inset 0 0 0 1px rgba(245,158,11,.3)}
.text-bg-info{background:var(--info-bg)!important;color:var(--info-ink)!important;box-shadow:inset 0 0 0 1px rgba(59,130,246,.25)}
.text-bg-secondary,.text-bg-dark{background:var(--neutral-bg)!important;color:var(--neutral-ink)!important;box-shadow:inset 0 0 0 1px var(--line-strong)}
.text-bg-light{background:var(--surface)!important;color:var(--ink-2)!important}
.badge.border{border-color:var(--line)!important}
.bg-danger.badge,.sidebar .badge.text-bg-danger,.topbar .badge{background:#ef4444!important;color:#fff!important;box-shadow:0 0 0 2px var(--side)}
.topbar .badge{box-shadow:0 0 0 2px var(--bg);animation:pop-in .4s var(--ease-spring) both}
.bg-white{background:var(--surface)!important}.bg-light{background:var(--surface-2)!important}
.text-dark{color:var(--ink)!important}.border{border-color:var(--line)!important}

/* alerts + toasts */
.alert{border-radius:12px;border:1px solid transparent;font-size:.875rem;box-shadow:var(--shadow-xs)}
.alert-success{background:var(--ok-bg);color:var(--ok-ink);border-color:rgba(16,185,129,.25)}
.alert-danger{background:var(--bad-bg);color:var(--bad-ink);border-color:rgba(239,68,68,.25)}
.alert-warning{background:var(--warn-bg);color:var(--warn-ink);border-color:rgba(245,158,11,.3)}
.alert-info{background:var(--info-bg);color:var(--info-ink);border-color:rgba(59,130,246,.25)}
.alert-secondary,.alert-light{background:var(--surface-2);color:var(--ink-2);border-color:var(--line)}
.toast-stack{position:fixed;right:1.25rem;bottom:1.25rem;z-index:1090;display:flex;flex-direction:column;gap:.6rem;width:min(380px,calc(100vw - 2.5rem))}
.toast-stack .alert{margin:0;background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow-lg);padding:.85rem 2.6rem .85rem 2.6rem;position:relative;animation:toast-in .45s var(--ease-spring) both}
.toast-stack .alert::before{font-family:bootstrap-icons;position:absolute;left:.9rem;top:.82rem;font-size:1.05rem}
.toast-stack .alert-success::before{content:"\f26a";color:var(--brand)}
.toast-stack .alert-danger::before{content:"\f33a";color:#ef4444}
.toast-stack .alert-warning::before{content:"\f33a";color:#f59e0b}
.toast-stack .alert-info::before{content:"\f431";color:#3b82f6}
.toast-stack .alert .btn-close{position:absolute;top:.6rem;right:.6rem;padding:.5rem;font-size:.7rem}
.toast-stack .alert.leaving{animation:toast-out .3s var(--ease) both}
.toast-stack .alert .toast-timer{position:absolute;left:0;bottom:0;height:2px;background:var(--brand-2);border-radius:0 0 0 12px;animation:timer linear both}

/* stat cards */
.stat-card{position:relative;display:flex;flex-direction:column;gap:.6rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1rem 1.1rem;height:100%;overflow:hidden;box-shadow:var(--shadow-xs);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.stat-card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),var(--brand-soft),transparent 70%)}
a:hover>.stat-card,.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--line-strong)}
.stat-card:hover::after{opacity:1}
.stat-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.stat-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:1rem;flex-shrink:0;transition:transform .35s var(--ease-spring)}
a:hover>.stat-card .stat-icon{transform:scale(1.1) rotate(-6deg)}
.tone-success{background:var(--ok-bg);color:var(--ok-ink)}.tone-warning{background:var(--warn-bg);color:var(--warn-ink)}
.tone-danger{background:var(--bad-bg);color:var(--bad-ink)}.tone-info{background:var(--info-bg);color:var(--info-ink)}.tone-dark{background:var(--neutral-bg);color:var(--neutral-ink)}
.stat-value{font-size:1.75rem;font-weight:600;line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.stat-label{color:var(--muted);font-size:.8rem;font-weight:500}
.stat-card .stat-go{font-size:.75rem;color:var(--muted);opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .3s var(--ease)}
a:hover>.stat-card .stat-go{opacity:1;transform:none}
.empty{padding:2.75rem 1rem;text-align:center;color:var(--muted)}
.empty i{font-size:1.4rem;display:grid;place-items:center;width:52px;height:52px;margin:0 auto .75rem;border-radius:14px;background:var(--surface-2);border:1px solid var(--line);color:var(--muted);animation:float 4s ease-in-out infinite}

/* ---------- Chat ---------- */
.chat-wrap{background-color:var(--chat-bg);background-image:radial-gradient(var(--chat-dot) 1px,transparent 1px);background-size:16px 16px;height:62vh;overflow-y:auto;padding:1rem 1.1rem;border-radius:0 0 var(--radius-lg) var(--radius-lg);scroll-behavior:smooth}
.bubble{max-width:78%;padding:.5rem .75rem .35rem;border-radius:12px;margin-bottom:.45rem;white-space:normal;overflow-wrap:anywhere;font-size:.88rem;box-shadow:0 1px .5px rgba(0,0,0,.13);position:relative;color:var(--ink)}
.bubble.in{background:var(--bubble-in);border-top-left-radius:3px;transform-origin:left bottom}
.bubble.out{background:var(--bubble-out);margin-left:auto;border-top-right-radius:3px;transform-origin:right bottom}
.bubble.out.staff{background:var(--bubble-staff)}
.bubble.blocked,.bubble.failed{background:var(--bad-bg)}
.bubble.pop{animation:bubble-in .4s var(--ease-spring) both}
.bubble .meta{font-size:.67rem;color:var(--bubble-meta);text-align:right;margin-top:.2rem}
.bubble img{max-width:220px;border-radius:8px;display:block;margin-bottom:.3rem}
.conv-item{display:flex;gap:.8rem;padding:.85rem 1.15rem;border-bottom:1px solid var(--line);color:inherit;text-decoration:none;position:relative;transition:background-color .15s}
.conv-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--brand);transform:scaleY(0);transition:transform .25s var(--ease)}
.conv-item:hover{background:var(--surface-2);color:inherit}
.conv-item:hover::before{transform:scaleY(1)}
.conv-item .avatar{width:40px;height:40px;flex-shrink:0;font-size:.9rem}
.conv-item:last-of-type{border-bottom:0}

/* ---------- Simulator phone ---------- */
.phone{max-width:400px;margin:auto;border:10px solid #18181b;border-radius:40px;overflow:hidden;background:var(--chat-bg);box-shadow:var(--shadow-lg),0 0 0 1px #3f3f46,inset 0 0 0 1px #27272a}
.phone-head{background:#075e54;color:#fff;padding:.75rem 1rem;display:flex;align-items:center;gap:.6rem}
[data-bs-theme=dark] .phone-head{background:#202c33}
.phone .chat-wrap{height:520px;border-radius:0}
.phone-input{display:flex;gap:.4rem;padding:.5rem;background:var(--surface-2)}
.sim-btn{display:block;width:100%;background:var(--bubble-in);border:0;border-top:1px solid var(--line);color:#027eb5;padding:.4rem;font-size:.85rem;transition:background-color .15s}
.sim-btn:hover{background:var(--surface-2)}

/* ---------- Misc ---------- */
.kbd{font-family:var(--bs-font-monospace);background:var(--surface-2);border:1px solid var(--line);padding:.1rem .4rem;border-radius:6px;font-size:.8rem}
.copy-field{font-family:var(--bs-font-monospace);font-size:.8rem}
.check-row{display:flex;gap:.8rem;align-items:flex-start;padding:.9rem 0;border-bottom:1px solid var(--line)}
.check-row:last-child{border:0}
.check-row .bi{font-size:1.15rem}
.text-success{color:var(--brand)!important}

/* ---------- Command palette (Ctrl/⌘ K) ---------- */
.cmdk{position:fixed;inset:0;z-index:1080;display:none;align-items:flex-start;justify-content:center;padding:12vh 1rem 1rem;background:rgba(9,9,11,.4);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.cmdk.open{display:flex;animation:fade-in .18s ease both}
.cmdk-box{width:min(620px,100%);background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden;animation:pop-in .25s var(--ease) both}
.cmdk-input{display:flex;align-items:center;gap:.6rem;padding:.9rem 1.1rem;border-bottom:1px solid var(--line)}
.cmdk-input i{color:var(--muted)}
.cmdk-input input{flex:1;border:0;outline:0;background:transparent;color:var(--ink);font-size:.98rem}
.cmdk-list{max-height:min(420px,60vh);overflow:auto;padding:.4rem}
.cmdk-group{font-size:.7rem;color:var(--muted);font-weight:500;padding:.6rem .7rem .3rem}
.cmdk-item{display:flex;align-items:center;gap:.7rem;padding:.6rem .7rem;border-radius:10px;color:var(--ink-2);text-decoration:none;cursor:pointer;font-size:.88rem}
.cmdk-item i{width:1.1rem;color:var(--muted)}
.cmdk-item .hint{margin-left:auto;font-size:.72rem;color:var(--muted)}
.cmdk-item.sel{background:var(--surface-2);color:var(--ink)}
.cmdk-item.sel i{color:var(--brand)}
.cmdk-empty{padding:2rem;text-align:center;color:var(--muted);font-size:.88rem}
.cmdk-foot{display:flex;gap:1rem;padding:.55rem 1rem;border-top:1px solid var(--line);font-size:.72rem;color:var(--muted);background:var(--surface-2)}

/* ---------- Sign-in & installer ---------- */
.login-bg{min-height:100vh;display:grid;place-items:center;padding:1.25rem;position:relative;overflow:hidden;background:var(--bg)}
.login-bg::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 20%,transparent 75%);opacity:.7}
.aurora{position:absolute;inset:-20%;filter:blur(70px);opacity:.8;pointer-events:none}
.aurora span{position:absolute;border-radius:50%;mix-blend-mode:normal}
.aurora span:nth-child(1){width:42vmax;height:42vmax;left:8%;top:4%;background:radial-gradient(circle,rgba(16,185,129,.55),transparent 65%);animation:drift1 18s ease-in-out infinite}
.aurora span:nth-child(2){width:36vmax;height:36vmax;right:6%;top:18%;background:radial-gradient(circle,rgba(34,211,238,.4),transparent 65%);animation:drift2 22s ease-in-out infinite}
.aurora span:nth-child(3){width:30vmax;height:30vmax;left:32%;bottom:0;background:radial-gradient(circle,rgba(132,204,22,.3),transparent 65%);animation:drift3 26s ease-in-out infinite}
[data-bs-theme=dark] .aurora{opacity:.35}
.login-card{position:relative;width:100%;max-width:410px;background:color-mix(in srgb,var(--surface) 82%,transparent);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-lg);padding:2.1rem;animation:rise .7s var(--ease) both}
.login-card .logo-dot{width:52px;height:52px;font-size:1.5rem;border-radius:14px}
.login-card .pw-wrap{position:relative}
.login-card .pw-toggle{position:absolute;right:.4rem;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--muted);padding:.4rem .55rem;border-radius:8px}
.login-card .pw-toggle:hover{background:var(--surface-2);color:var(--ink)}
.login-foot{position:relative;margin-top:1.4rem;font-size:.75rem;color:var(--muted);text-align:center;animation:rise .7s .15s var(--ease) both}
.btn .spinner-border{width:1rem;height:1rem;border-width:2px;vertical-align:-2px;margin-right:.4rem}
.install-page{background:var(--bg);min-height:100vh;position:relative}
.install-page .brand{background:linear-gradient(90deg,var(--brand),#0891b2);-webkit-background-clip:text;background-clip:text;color:transparent}
.install-page .card{border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.install-page .tip{background:var(--brand-soft);border-left:3px solid var(--brand);padding:.65rem .9rem;border-radius:8px;font-size:.86rem}

/* ---------- Motion ---------- */
.reveal{animation:rise .55s var(--ease) both;animation-delay:calc(var(--i,0) * 55ms)}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes pop-in{from{opacity:0;transform:scale(.96) translateY(-4px)}to{opacity:1;transform:none}}
@keyframes toast-in{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
@keyframes toast-out{to{opacity:0;transform:translateX(24px) scale(.97)}}
@keyframes timer{from{width:100%}to{width:0}}
@keyframes bubble-in{from{opacity:0;transform:scale(.85) translateY(6px)}to{opacity:1;transform:none}}
@keyframes bar-in{from{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1);transform-origin:left}}
@keyframes grow-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.45)}60%{box-shadow:0 0 0 6px rgba(16,185,129,0)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(8vw,6vh) scale(1.1)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-10vw,8vh) scale(.92)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,-8vh) scale(1.15)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  @view-transition{navigation:none}
}
@media print{.sidebar,.topbar,.toast-stack,#route-progress,.cmdk{display:none!important}.content{padding:0}}