/* =====================================================================
   WhatsApp CRM — Modern SaaS design system (on top of Bootstrap 5)
   ===================================================================== */
:root{
  --wa:#25D366; --wa-dark:#1da851; --wa-darker:#128C7E; --wa-teal:#075E54;
  --ink:#0f172a; --body:#334155; --muted:#64748b; --faint:#94a3b8;
  --line:#e9eef3; --line-2:#eef2f6;
  --bg:#f6f8fa; --surface:#ffffff; --surface-2:#f8fafc;
  --primary:var(--wa); --primary-ink:#0b3d2e;
  --info:#3b82f6; --warn:#f59e0b; --danger:#ef4444; --success:#22c55e;
  --radius:14px; --radius-sm:10px; --radius-lg:20px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.04);
  --shadow:0 4px 16px rgba(16,24,40,.06),0 2px 6px rgba(16,24,40,.04);
  --shadow-lg:0 18px 48px rgba(16,24,40,.12);
  --sidebar:#0b1220; --sidebar-ink:#cbd5e1; --sidebar-active:#13351f;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

*{ -webkit-font-smoothing:antialiased; }
body{
  font-family:var(--font); background:var(--bg); color:var(--body);
  font-size:.925rem; line-height:1.5;
  max-width:100%;
}
*, *::before, *::after{ box-sizing:border-box; }
/* Wide content (tables, charts) scrolls inside its own box, not the page. */
.table-responsive{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
img, canvas, svg, table{ max-width:100%; }
h1,h2,h3,h4,h5,h6{ color:var(--ink); font-weight:700; letter-spacing:-.01em; }
a{ color:var(--wa-dark); text-decoration:none; }
a:hover{ color:var(--wa-darker); }
.text-muted{ color:var(--muted)!important; }
.text-wa{ color:var(--wa)!important; }

/* ---------- App shell ---------- */
.shell{ display:flex; min-height:100vh; }
.sidebar{
  width:248px; flex:0 0 248px; background:var(--sidebar); color:var(--sidebar-ink);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
  padding:18px 14px; gap:4px; overflow-y:auto; overflow-x:visible;
  /* Above the topbar (20) and positioned cards so collapsed-rail tooltips
     paint on top of the content — sticky traps the tooltip's z-index inside
     the sidebar's own stacking context, so the sidebar itself must be raised. */
  z-index:60;
}
.sidebar .brand{
  display:flex; align-items:center; gap:10px; color:#fff; font-weight:800;
  font-size:1.05rem; padding:6px 10px 16px; letter-spacing:-.02em;
}
.sidebar .brand .logo{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--wa),var(--wa-darker));
  box-shadow:0 6px 16px rgba(37,211,102,.35); font-size:18px;
}
.sidebar .nav-label{ font-size:.68rem; text-transform:uppercase; letter-spacing:.08em;
  color:#64748b; padding:14px 12px 6px; font-weight:600; }
.sidebar .nav-link{
  display:flex; align-items:center; gap:11px; color:var(--sidebar-ink);
  padding:.62rem .75rem; border-radius:var(--radius-sm); font-weight:500;
  transition:background .15s,color .15s; font-size:.9rem;
}
.sidebar .nav-link .ic{ width:18px; text-align:center; opacity:.85; font-size:1rem; }
.sidebar .nav-link:hover{ background:rgba(255,255,255,.06); color:#fff; }
.sidebar .nav-link.active{
  background:linear-gradient(90deg,rgba(37,211,102,.18),rgba(37,211,102,.02));
  color:#fff; box-shadow:inset 3px 0 0 var(--wa);
}
.sidebar .side-foot{ margin-top:auto; padding:12px 10px 4px; border-top:1px solid rgba(255,255,255,.07); }
.sidebar .side-foot small{ color:#64748b; }

/* ---- Collapsible accordion groups ---- */
.sidebar .side-nav{ display:flex; flex-direction:column; gap:2px; }
.sidebar .nav-group-head{
  display:flex; align-items:center; gap:11px; width:100%;
  background:none; border:0; cursor:pointer; text-align:left;
  color:#8ea3bd; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  padding:12px 12px 8px; transition:color .15s;
}
.sidebar .nav-group-head:hover{ color:#cdd9e8; }
.sidebar .nav-group-head .ic{ width:18px; text-align:center; font-size:.95rem; opacity:.9; }
.sidebar .nav-group-title{ flex:1; }
.sidebar .nav-caret{ font-size:.8rem; transition:transform .2s; opacity:.7; }
.sidebar .nav-group.open .nav-caret{ transform:rotate(180deg); }
.sidebar .nav-group-body{
  overflow:hidden; max-height:0; opacity:0;
  transition:max-height .22s ease, opacity .18s ease;
  display:flex; flex-direction:column; gap:2px;
}
.sidebar .nav-group.open .nav-group-body{ max-height:420px; opacity:1; }

/* Collapsed (icon-only) sidebar: show all items, hide group chrome */
.shell.collapsed .sidebar .nav-group-head{ display:none !important; }
.shell.collapsed .sidebar .nav-group{ margin-bottom:2px; }
.shell.collapsed .sidebar .nav-group-body{ max-height:none !important; opacity:1 !important; overflow:visible !important; }
.shell.collapsed .sidebar .side-nav{ gap:0; }

/* ---- Collapsible sidebar (desktop) — toggle lives in the topbar ---- */
.shell.collapsed .sidebar{ width:74px; flex-basis:74px; padding-left:10px; padding-right:10px; }
.shell.collapsed .sidebar .brand span:last-child,
.shell.collapsed .sidebar .nav-link span:not(.ic),
.shell.collapsed .sidebar .nav-label,
.shell.collapsed .sidebar .side-foot small{ display:none; }
.shell.collapsed .sidebar .brand{ justify-content:center; padding:6px 0 16px; }
.shell.collapsed .sidebar .nav-link{ justify-content:center; padding:.62rem 0; }
.shell.collapsed .sidebar .nav-link .ic{ font-size:1.15rem; }
.shell.collapsed #collapseBtn i{ transform:rotate(180deg); }
.shell.collapsed .sidebar .nav-link{ position:relative; }
.shell.collapsed .sidebar .nav-link:hover::after{
  content:attr(data-tip);
  position:absolute; left:100%; top:50%; margin-left:14px; transform:translateY(-50%);
  white-space:nowrap;
  background:var(--ink); color:#fff; padding:.4rem .65rem; border-radius:8px; font-size:.78rem;
  z-index:2000; box-shadow:0 6px 20px rgba(0,0,0,.35); pointer-events:none;
}
/* small arrow on the tooltip */
.shell.collapsed .sidebar .nav-link:hover::before{
  content:''; position:absolute; left:100%; top:50%; margin-left:8px; transform:translateY(-50%);
  border:6px solid transparent; border-right-color:var(--ink); z-index:2000; pointer-events:none;
}
/* The collapsed rail must NOT clip the tooltip. Disable vertical scroll here
   (few icons fit without it) so overflow can stay visible. */
.shell.collapsed .sidebar{ overflow:visible; }
.shell.collapsed .sidebar .side-nav{ overflow:visible; }
.shell.collapsed .sidebar .nav-group,
.shell.collapsed .sidebar .nav-group-body{ overflow:visible; }
/* Keep the main area from clipping the tooltip that spills over from the rail */
.shell.collapsed .main{ overflow:visible; }

.main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; overflow-x:hidden; }
.topbar{
  height:62px; background:rgba(255,255,255,.85); backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--line); display:flex; align-items:center;
  justify-content:space-between; padding:0 24px; position:sticky; top:0; z-index:20;
}
.topbar .page-title{ font-weight:700; font-size:.95rem; color:#fff; letter-spacing:-.01em;
  background:linear-gradient(135deg,var(--wa),var(--wa-darker)); padding:.45rem 1rem; border-radius:999px;
  box-shadow:0 4px 12px rgba(37,211,102,.3); display:inline-flex; align-items:center; margin-left:6px; }
.topbar .d-flex.align-items-center.gap-2{ gap:12px!important; }
.topbar .tb-right{ display:flex; align-items:center; gap:14px; }
.icon-btn{
  width:38px;height:38px;border-radius:10px;border:1px solid var(--line);
  background:#fff;display:grid;place-items:center;color:var(--muted);position:relative;
  transition:.15s;
}
.icon-btn:hover{ border-color:var(--wa); color:var(--wa-dark); }
.icon-btn .dot{ position:absolute; top:8px; right:9px; width:7px;height:7px;border-radius:50%;background:var(--danger); border:2px solid #fff; }
.content{ padding:26px 28px 48px; width:100%; max-width:100%; min-width:0; }
.content > *{ max-width:100%; }

/* ---------- Avatar ---------- */
.avatar{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  font-weight:700;color:#fff;font-size:.85rem;flex:0 0 auto;
  background:linear-gradient(135deg,var(--wa),var(--wa-teal));
}
.avatar.sm{ width:30px;height:30px;font-size:.72rem; }
.avatar.lg{ width:46px;height:46px;font-size:1rem; }
.tb-user{ display:flex; align-items:center; gap:10px; }
.tb-user .nm{ font-weight:600; color:var(--ink); font-size:.85rem; line-height:1.1; }
.tb-user .rl{ font-size:.72rem; color:var(--faint); }

/* ---------- Cards ---------- */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); }
.card .card-header{ background:transparent; border-bottom:1px solid var(--line-2);
  font-weight:700; color:var(--ink); padding:.9rem 1.1rem; }
.card .card-body{ padding:1.1rem; }
.soft-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }

/* Branded (WhatsApp green) card header */
.card-header.wa-head, .wa-head{
  background:linear-gradient(135deg,var(--wa),var(--wa-darker)); color:#fff;
  border:0; border-radius:var(--radius) var(--radius) 0 0; padding:.85rem 1.1rem;
  display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-.01em;
}
.wa-head .wa-ic{ width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
  background:rgba(255,255,255,.2); font-size:1rem; color:#fff; }
.wa-head .wa-sub{ font-weight:400; font-size:.78rem; opacity:.9; margin-top:1px; }
.wa-head .wa-right{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.wa-head .badge{ background:rgba(255,255,255,.22)!important; color:#fff!important; }
.wa-head.admin{ background:linear-gradient(135deg,#7c3aed,#4f46e5); }

/* hero greeting */
.hero{
  background:radial-gradient(1200px 200px at 0% 0%,rgba(37,211,102,.12),transparent 60%),
             linear-gradient(135deg,#0b1220,#0e2a20);
  color:#fff; border-radius:var(--radius-lg); padding:26px 28px; margin-bottom:22px;
  box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.hero h1{ color:#fff; font-size:1.5rem; margin:0; }
.hero p{ color:#9fb3c8; margin:.35rem 0 0; }
.hero .hero-cta{ position:absolute; right:24px; top:50%; transform:translateY(-50%); }

/* ---------- Stat cards ---------- */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; }
.stat{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow-sm); transition:transform .15s,box-shadow .15s;
  position:relative; overflow:hidden;
}
.stat:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
a.stat-link{ display:block; text-decoration:none; color:inherit; cursor:pointer; }
a.stat-link:hover{ border-color:var(--wa); }
a.sort-link{ text-decoration:none; color:inherit; white-space:nowrap; display:inline-flex; align-items:center; gap:5px; }
a.sort-link i{ font-size:.85rem; opacity:.45; transition:opacity .12s; }
a.sort-link:hover{ color:var(--wa-darker); }
a.sort-link:hover i{ opacity:.9; }
a.sort-link.sort-active{ color:var(--wa-darker); font-weight:700; }
a.sort-link.sort-active i{ opacity:1; color:var(--wa-darker); }
.stat .stat-ic{ width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  font-size:1.15rem; margin-bottom:12px; }
.stat .stat-label{ color:var(--muted); font-size:.8rem; font-weight:500; }
.stat .stat-value{ font-size:1.75rem; font-weight:800; color:var(--ink); letter-spacing:-.02em; line-height:1.1; }
.stat .stat-trend{ font-size:.75rem; font-weight:600; margin-top:4px; }
.tint-green{ background:rgba(37,211,102,.12); color:var(--wa-darker); }
.tint-blue{ background:rgba(59,130,246,.12); color:#2563eb; }
.tint-amber{ background:rgba(245,158,11,.14); color:#b45309; }
.tint-red{ background:rgba(239,68,68,.12); color:#dc2626; }
.tint-slate{ background:rgba(100,116,139,.12); color:#475569; }
.tint-violet{ background:rgba(139,92,246,.14); color:#7c3aed; }

/* ---------- Buttons ---------- */
.btn{ border-radius:10px; font-weight:600; font-size:.875rem; padding:.5rem .95rem; transition:.15s; }
.btn-primary,.btn-wa{ background:var(--wa); border-color:var(--wa); color:#06301f; }
.btn-primary:hover,.btn-wa:hover{ background:var(--wa-dark); border-color:var(--wa-dark); color:#fff; box-shadow:0 6px 18px rgba(37,211,102,.35); }
.btn-dark{ background:var(--ink); border-color:var(--ink); }
.btn-light{ background:#fff; border:1px solid var(--line); color:var(--body); }
.btn-light:hover{ background:var(--surface-2); border-color:var(--faint); }
.btn-outline-secondary{ border-color:var(--line); color:var(--muted); }
.btn-sm{ padding:.35rem .7rem; font-size:.8rem; border-radius:8px; }

/* ---------- Tables ---------- */
.table{ color:var(--body); margin:0; }
.table thead th{
  background:var(--surface-2); color:var(--muted); font-weight:600; font-size:.74rem;
  text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--line);
  padding:.7rem 1rem;
}
.table tbody td{ padding:.8rem 1rem; border-bottom:1px solid var(--line-2); vertical-align:middle; }
.table tbody tr:last-child td{ border-bottom:0; }
.table tbody tr{ transition:background .12s; }
.table-hover tbody tr:hover,.table tbody tr[onclick]:hover{ background:var(--surface-2); cursor:pointer; }
.table-card{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-sm); background:#fff; }

/* ---------- Pills / badges ---------- */
.badge{ font-weight:600; font-size:.72rem; padding:.36em .7em; border-radius:999px; }
.pill{ display:inline-flex; align-items:center; gap:6px; padding:.28rem .6rem; border-radius:999px;
  font-size:.74rem; font-weight:600; line-height:1; }
.pill::before{ content:""; width:7px;height:7px;border-radius:50%;background:currentColor; opacity:.9; }
.pill-green{ background:rgba(34,197,94,.12); color:#16a34a; }
.pill-red{ background:rgba(239,68,68,.12); color:#dc2626; }
.pill-amber{ background:rgba(245,158,11,.15); color:#b45309; }
.pill-blue{ background:rgba(59,130,246,.12); color:#2563eb; }
.pill-slate{ background:rgba(100,116,139,.13); color:#475569; }
.pill-violet{ background:rgba(139,92,246,.14); color:#7c3aed; }

/* ---------- Forms ---------- */
.form-label{ font-weight:600; color:var(--ink); font-size:.82rem; margin-bottom:.3rem; }
.form-control,.form-select{
  border:1px solid var(--line); border-radius:10px; padding:.55rem .8rem; font-size:.9rem; color:var(--ink);
  background:#fff; transition:border-color .15s, box-shadow .15s;
}
.form-control:focus,.form-select:focus{
  border-color:var(--wa); box-shadow:0 0 0 3px rgba(37,211,102,.15); outline:none;
}
.form-text{ font-size:.78rem; color:var(--faint); }
.input-group-text{ border-radius:10px; border-color:var(--line); background:var(--surface-2); color:var(--muted); }
.form-control::placeholder{ color:#b6c0cc; }
.form-switch .form-check-input{ width:2.4em; height:1.25em; }
.form-check-input:checked{ background-color:var(--wa); border-color:var(--wa); }
.form-check-input:focus{ box-shadow:0 0 0 3px rgba(37,211,102,.15); border-color:var(--wa); }

/* ---- Rich form layout ---- */
.form-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); overflow:hidden; max-width:920px; }
.form-section{ padding:20px 22px; border-bottom:1px solid var(--line-2); }
.form-section:last-of-type{ border-bottom:0; }
.form-section .fs-head{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.form-section .fs-ic{ width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:rgba(37,211,102,.12); color:var(--wa-darker); font-size:1rem; flex:0 0 auto; }
.form-section .fs-title{ font-weight:700; color:var(--ink); font-size:.95rem; line-height:1.1; }
.form-section .fs-sub{ font-size:.78rem; color:var(--faint); }
.form-foot{ background:var(--surface-2); padding:14px 22px; display:flex; justify-content:flex-end; gap:10px;
  position:sticky; bottom:0; }
.req{ color:var(--danger); }

/* ---------- Page header ---------- */
.page-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
.page-head h1,.page-head h2{ margin:0; font-size:1.4rem; }
.page-head .sub{ color:var(--muted); font-size:.85rem; margin-top:2px; }

/* ---------- Slide-over drawer ---------- */
.drawer-backdrop{ position:fixed; inset:0; background:rgba(15,23,42,.45); backdrop-filter:blur(2px);
  opacity:0; visibility:hidden; transition:opacity .2s; z-index:1080; }
.drawer-backdrop.show{ opacity:1; visibility:visible; }
.drawer{ position:fixed; top:0; right:0; width:480px; max-width:94vw; background:var(--bg);
  box-shadow:-20px 0 60px rgba(15,23,42,.18); transform:translateX(110%); transition:transform .26s cubic-bezier(.22,.61,.36,1);
  z-index:1090; display:flex; flex-direction:column;
  /* size to content: hug the form but never exceed the viewport */
  height:auto; max-height:100vh; top:50%; transform:translate(110%,-50%);
  border-radius:22px 0 0 22px; overflow:hidden; }
.drawer.show{ transform:translate(0,-50%); }
/* width variants by form complexity */
.drawer[data-size="sm"]{ width:420px; }
.drawer[data-size="md"]{ width:520px; }
.drawer[data-size="lg"]{ width:680px; }
/* if the form is tall, let it fill height and scroll internally */
.drawer{ }
.drawer .dw-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px;
  background:linear-gradient(135deg,var(--wa),var(--wa-darker)); color:#fff; border:0; }
.drawer .dw-head h3{ margin:0; font-size:1.15rem; color:#fff; }
.drawer .dw-head .sub{ font-size:.8rem; color:rgba(255,255,255,.85); }
.drawer .drawer-close{ background:rgba(255,255,255,.18); border:0; color:#fff; }
.drawer .drawer-close:hover{ background:rgba(255,255,255,.3); color:#fff; }
.drawer .dw-body{ flex:1 1 auto; overflow:auto; padding:0; min-height:0; }
.drawer .dw-body .form-card{ border:0; box-shadow:none; border-radius:0; max-width:none; background:transparent; }
.drawer .dw-body .form-foot{ position:sticky; bottom:0; }
/* Comfortable padding for forms that use card-body (templates, plans) inside the drawer */
.drawer .dw-body .card-body{ padding:20px 22px; }
.drawer .dw-body .form-section{ padding:20px 22px; }
.drawer .dw-body .row{ --bs-gutter-y:1rem; }
.drawer .dw-body .form-label{ margin-bottom:.35rem; }
.drawer-close{ width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:#fff;
  display:grid;place-items:center;color:var(--muted);cursor:pointer; transition:.15s; }
.drawer-close:hover{ border-color:var(--danger); color:var(--danger); }
.dw-loading{ padding:60px; text-align:center; color:var(--muted); }

/* ---------- WhatsApp-style contact picker ---------- */
.picker{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; }
.picker .pk-search{ padding:12px 14px; border-bottom:1px solid var(--line-2); position:sticky; top:0; background:#fff; z-index:2; }
.picker .pk-chips{ display:flex; flex-wrap:wrap; gap:6px; padding:0 14px 10px; }
.pk-chip{ display:inline-flex; align-items:center; gap:6px; background:rgba(37,211,102,.12); color:var(--wa-darker);
  border-radius:999px; padding:.2rem .35rem .2rem .6rem; font-size:.78rem; font-weight:600; }
.pk-chip button{ border:0; background:rgba(0,0,0,.06); color:inherit; width:18px;height:18px;border-radius:50%; line-height:1; cursor:pointer; }
.picker .pk-list{ max-height:52vh; overflow:auto; }
.pk-row{ display:flex; align-items:center; gap:12px; padding:11px 14px; cursor:pointer; border-bottom:1px solid var(--line-2);
  transition:background .12s; user-select:none; }
.pk-row:hover{ background:var(--surface-2); }
.pk-row.sel{ background:rgba(37,211,102,.07); }
.pk-row .pk-main{ flex:1; min-width:0; }
.pk-row .pk-name{ font-weight:600; color:var(--ink); font-size:.9rem; }
.pk-row .pk-sub{ font-size:.78rem; color:var(--muted); }
.pk-check{ width:24px;height:24px;border-radius:50%;border:2px solid var(--line); flex:0 0 auto;
  display:grid;place-items:center;color:#fff;transition:.12s; }
.pk-row.sel .pk-check{ background:var(--wa); border-color:var(--wa); }
.pk-row .pk-check i{ opacity:0; font-size:.8rem; }
.pk-row.sel .pk-check i{ opacity:1; }
.picker .pk-foot{ padding:12px 14px; border-top:1px solid var(--line-2); position:sticky; bottom:0; background:#fff;
  display:flex; align-items:center; gap:10px; }
.pk-toolbar{ display:flex; align-items:center; justify-content:space-between; padding:8px 14px; border-bottom:1px solid var(--line-2);
  font-size:.8rem; color:var(--muted); }
.pk-toolbar a{ font-weight:600; cursor:pointer; }
.pk-none{ padding:30px; text-align:center; color:var(--muted); }

/* ---------- Empty states ---------- */
.empty{ text-align:center; padding:48px 20px; color:var(--muted); }
.empty .em-ic{ font-size:2.4rem; opacity:.5; margin-bottom:10px; }
.empty .em-title{ font-weight:700; color:var(--ink); }

/* ---------- Alerts ---------- */
.alert{ border:0; border-radius:12px; font-size:.88rem; box-shadow:var(--shadow-sm); }
.alert-success{ background:rgba(34,197,94,.12); color:#15803d; }
.alert-danger{ background:rgba(239,68,68,.1); color:#b91c1c; }
.alert-warning{ background:rgba(245,158,11,.13); color:#92400e; }
.alert-info{ background:rgba(59,130,246,.1); color:#1d4ed8; }
.alert-light{ background:var(--surface-2); color:var(--body); }

/* ---------- Inbox / chat ---------- */
.inbox{ display:grid; grid-template-columns:340px 1fr; min-height:74vh; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); }
.inbox .conv-list{ border-right:1px solid var(--line); overflow:auto; background:#fff; }
.inbox .conv-head{ padding:14px 16px; border-bottom:1px solid var(--line); font-weight:700; color:var(--ink);
  position:sticky; top:0; background:#fff; z-index:2; }
.conv-row{ display:flex; gap:11px; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line-2);
  text-decoration:none; color:var(--body); transition:background .12s; }
.conv-row:hover{ background:var(--surface-2); color:var(--body); }
.conv-row.active{ background:rgba(37,211,102,.08); box-shadow:inset 3px 0 0 var(--wa); }
.conv-row .cr-main{ min-width:0; flex:1; }
.conv-row .cr-name{ font-weight:600; color:var(--ink); font-size:.9rem; }
.conv-row .cr-last{ font-size:.8rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conv-row .cr-meta{ text-align:right; }
.unread{ background:var(--wa); color:#06301f; font-weight:700; border-radius:999px; font-size:.7rem; padding:.1rem .45rem; }

.thread{ display:flex; flex-direction:column; min-width:0;
  background:linear-gradient(0deg,#efeae2,#efeae2);
  background-image:radial-gradient(rgba(0,0,0,.025) 1px,transparent 1px); background-size:18px 18px; }
.thread .th-head{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 16px; border-bottom:1px solid var(--line); background:#fff; }
.thread .th-body{ flex:1; overflow:auto; padding:20px; display:flex; flex-direction:column; gap:8px; }
.msg{ max-width:70%; padding:.55rem .8rem; border-radius:12px; font-size:.9rem; box-shadow:0 1px 1px rgba(0,0,0,.05);
  position:relative; }
.msg .meta{ font-size:.68rem; color:var(--faint); margin-top:3px; text-align:right; }
.msg.in{ align-self:flex-start; background:#fff; border-top-left-radius:4px; }
.msg.out{ align-self:flex-end; background:#d9fdd3; border-top-right-radius:4px; }
.thread .composer{ border-top:1px solid var(--line); background:#fff; padding:12px 16px; }

/* ---------- Public / auth ---------- */
.auth-wrap{ min-height:100vh; display:grid; grid-template-columns:1.1fr .9fr; }
.auth-hero{ background:radial-gradient(900px 400px at 20% 20%,rgba(37,211,102,.25),transparent 55%),
  linear-gradient(135deg,#0b1220,#0e2a20); color:#fff; padding:56px; display:flex; flex-direction:column; justify-content:center; }
.auth-hero .logo{ width:54px;height:54px;border-radius:14px;background:linear-gradient(135deg,var(--wa),var(--wa-darker));
  display:grid;place-items:center;font-size:26px;box-shadow:0 10px 30px rgba(37,211,102,.4); margin-bottom:24px; }
.auth-hero h1{ color:#fff; font-size:2rem; line-height:1.2; }
.auth-hero p{ color:#9fb3c8; max-width:420px; }
.auth-hero .feat{ display:flex; gap:10px; align-items:center; color:#cbd5e1; margin-top:10px; font-size:.9rem; }
.auth-form{ display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg); }
.auth-card{ width:100%; max-width:400px; }
@media(max-width:860px){ .auth-wrap{ grid-template-columns:1fr; } .auth-hero{ display:none; } }

/* ---------- Responsive ---------- */
@media(max-width:992px){
  .sidebar{ position:fixed; left:-260px; z-index:1050; transition:left .2s; }
  .sidebar.open{ left:0; }
  .inbox{ grid-template-columns:1fr; }
}
.scrim{ display:none; }
@media(max-width:992px){ .scrim.show{ display:block; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:1040; } }