/* =========================================
   CRM PRO UI
   PART 1
========================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Syne:wght@500;600;700&display=swap');

:root{

    --accent:#e85d04;
    --accent2:#ff8c42;

    --accent-bg:#fff3eb;
    --accent-border:#ffd1b5;

    --bg:#f2ede6;

    --surface:#ffffff;
    --surface2:#f8f5f0;
    --surface3:#ede7de;

    --text:#161616;
    --text2:#5f6368;
    --text3:#8c8c8c;

    --border:rgba(0,0,0,0.06);
    --border2:rgba(0,0,0,0.12);

    --green:#1fa971;
    --red:#d93025;
    --blue:#2563eb;
    --yellow:#d97706;

    --sidebar:#111827;
    --sidebar2:#1f2937;

    --radius:18px;
    --radius-sm:12px;

    --shadow1:
    0 2px 8px rgba(0,0,0,.05);

    --shadow2:
    0 10px 30px rgba(0,0,0,.08);

    --shadow3:
    0 20px 40px rgba(0,0,0,.12);
}

/* DARK THEME */

[data-theme="dark"]{

    --bg:#0f1117;

    --surface:#171923;
    --surface2:#1d2130;
    --surface3:#24293a;

    --text:#f3f4f6;
    --text2:#c9ced6;
    --text3:#9aa2af;

    --border:#2d3446;
    --border2:#394156;

    --sidebar:#090b10;
    --sidebar2:#131722;

    --accent-bg:
    rgba(
        232,
        93,
        4,
        .15
    );

    --shadow1:
    0 2px 10px rgba(0,0,0,.30);

    --shadow2:
    0 10px 30px rgba(0,0,0,.40);

    --shadow3:
    0 20px 50px rgba(0,0,0,.50);
}

/* RESET */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{

    width:100%;
    height:100%;
}

body{

    background:var(--bg);

    color:var(--text);

    font-family:
    'Inter',
    sans-serif;

    overflow:hidden;
}

/* SCROLLBAR */

::-webkit-scrollbar{
    width:8px;
    height:8px;
}

::-webkit-scrollbar-thumb{

    background:
    rgba(
        0,
        0,
        0,
        .15
    );

    border-radius:99px;
}

[data-theme="dark"]
::-webkit-scrollbar-thumb{

    background:
    rgba(
        255,
        255,
        255,
        .15
    );
}

/* APP */

.app{

    display:flex;

    width:100%;
    height:100vh;
}

/* =====================================
   SIDEBAR
===================================== */

.sb{

    width:270px;

    min-width:270px;

    background:
    linear-gradient(
        180deg,
        var(--sidebar),
        var(--sidebar2)
    );

    color:#fff;

    display:flex;

    flex-direction:column;

    border-right:
    1px solid rgba(255,255,255,.06);

    position:relative;

    z-index:50;
}

.sb::before{

    content:'';

    position:absolute;

    top:0;
    left:0;
    right:0;

    height:1px;

    background:
    rgba(
        255,
        255,
        255,
        .08
    );
}

.sb-logo{

    padding:26px 22px;

    border-bottom:
    1px solid rgba(255,255,255,.06);
}

.logo-wrap{

    display:flex;

    align-items:center;

    gap:14px;
}

.logo-icon{

    width:48px;
    height:48px;

    border-radius:14px;

    background:
    linear-gradient(
        135deg,
        var(--accent),
        var(--accent2)
    );

    display:flex;

    align-items:center;
    justify-content:center;

    color:#fff;

    font-size:20px;

    font-weight:700;
}

.logo-txt{

    display:flex;
    flex-direction:column;
}

.logo-n{

    font-family:
    'Syne',
    sans-serif;

    font-size:18px;

    font-weight:700;
}

.logo-s{

    font-size:12px;

    opacity:.7;
}

.sb-nav{

    flex:1;

    overflow:auto;

    padding:18px 12px;
}

.sb-sec{

    margin-bottom:18px;
}

.sb-title{

    padding:
    0 12px
    8px;

    font-size:11px;

    text-transform:uppercase;

    letter-spacing:1px;

    opacity:.55;
}

.ni{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    padding:
    12px
    14px;

    border-radius:14px;

    cursor:pointer;

    transition:.2s;

    color:
    rgba(
        255,
        255,
        255,
        .82
    );

    margin-bottom:4px;
}

.ni:hover{

    background:
    rgba(
        255,
        255,
        255,
        .05
    );
}

.ni.active{

    background:
    rgba(
        232,
        93,
        4,
        .15
    );

    color:#fff;

    border:
    1px solid
    rgba(
        232,
        93,
        4,
        .25
    );
}

.ni-l{

    display:flex;

    align-items:center;

    gap:12px;
}

.ni i{

    font-size:18px;
}

.nb{

    min-width:24px;

    height:24px;

    border-radius:999px;

    background:
    rgba(
        255,
        255,
        255,
        .08
    );

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:11px;
}

.sb-ft{

    padding:18px;

    border-top:
    1px solid rgba(255,255,255,.06);
}
/* =========================================
   CRM PRO UI
   PART 2
   TOPBAR + CONTENT + BUTTONS + FORMS
========================================= */

/* MAIN */

.main{

    flex:1;

    display:flex;

    flex-direction:column;

    min-width:0;

    background:var(--bg);
}

/* TOPBAR */

.topbar{

    height:74px;

    min-height:74px;

    background:var(--surface);

    border-bottom:
    1px solid var(--border);

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:
    0 24px;

    gap:20px;

    position:sticky;

    top:0;

    z-index:30;
}

.tb-left{

    display:flex;

    align-items:center;

    gap:16px;

    flex:1;
}

.tb-right{

    display:flex;

    align-items:center;

    gap:12px;
}

/* PAGE TITLE */

.view-title{

    font-family:
    'Syne',
    sans-serif;

    font-size:24px;

    font-weight:700;

    color:var(--text);
}

/* SEARCH */

.search-wrap{

    position:relative;

    width:100%;

    max-width:420px;
}

.search-wrap i{

    position:absolute;

    left:14px;

    top:50%;

    transform:
    translateY(-50%);

    color:var(--text3);

    font-size:16px;
}

.search-wrap input{

    width:100%;

    height:46px;

    border:
    1px solid var(--border);

    background:var(--surface);

    color:var(--text);

    border-radius:14px;

    padding:
    0 16px
    0 42px;

    outline:none;

    transition:.2s;
}

.search-wrap input:focus{

    border-color:
    var(--accent);

    box-shadow:
    0 0 0 4px
    rgba(
        232,
        93,
        4,
        .10
    );
}

/* ICON BUTTON */

.icon-btn{

    width:44px;
    height:44px;

    border-radius:14px;

    border:
    1px solid var(--border);

    background:var(--surface);

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.2s;
}

.icon-btn:hover{

    transform:
    translateY(-2px);

    box-shadow:
    var(--shadow1);
}

.icon-btn i{

    font-size:18px;

    color:var(--text2);
}

/* PRIMARY BUTTON */

.btn-primary{

    height:46px;

    border:none;

    border-radius:14px;

    padding:
    0 18px;

    background:
    linear-gradient(
        135deg,
        var(--accent),
        var(--accent2)
    );

    color:#fff;

    font-weight:600;

    cursor:pointer;

    transition:.2s;
}

.btn-primary:hover{

    transform:
    translateY(-2px);

    box-shadow:
    0 10px 24px
    rgba(
        232,
        93,
        4,
        .28
    );
}

/* SECONDARY BUTTON */

.btn-secondary{

    height:46px;

    border:
    1px solid var(--border);

    border-radius:14px;

    padding:
    0 18px;

    background:var(--surface);

    color:var(--text);

    font-weight:600;

    cursor:pointer;

    transition:.2s;
}

.btn-secondary:hover{

    background:
    var(--surface2);
}

/* CONTENT */

.content{

    flex:1;

    overflow:auto;

    padding:24px;
}

/* CARD */

.card{

    background:var(--surface);

    border:
    1px solid var(--border);

    border-radius:20px;

    padding:20px;

    box-shadow:
    var(--shadow1);
}

.card h3{

    font-family:
    'Syne',
    sans-serif;

    font-size:18px;

    margin-bottom:10px;
}

/* INPUT */

input,
select,
textarea{

    width:100%;

    border:
    1px solid var(--border);

    background:
    var(--surface);

    color:
    var(--text);

    border-radius:14px;

    outline:none;

    transition:.2s;

    font-family:
    inherit;
}

input,
select{

    height:48px;

    padding:
    0 14px;
}

textarea{

    padding:14px;

    resize:vertical;

    min-height:120px;
}

input:focus,
select:focus,
textarea:focus{

    border-color:
    var(--accent);

    box-shadow:
    0 0 0 4px
    rgba(
        232,
        93,
        4,
        .10
    );
}

/* FORM GRID */

.form-grid{

    display:grid;

    grid-template-columns:
    repeat(
        2,
        minmax(0,1fr)
    );

    gap:14px;
}

.form-grid.full{

    grid-template-columns:
    1fr;
}

/* LABEL */

label{

    display:block;

    margin-bottom:8px;

    font-size:13px;

    font-weight:600;

    color:var(--text2);
}

/* SECTION TITLE */

.sec-title{

    font-family:
    'Syne',
    sans-serif;

    font-size:20px;

    font-weight:700;

    margin-bottom:16px;
}

/* EMPTY STATE */

.empty-state{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    padding:60px 20px;

    text-align:center;

    color:var(--text3);
}

.empty-state i{

    font-size:42px;

    margin-bottom:12px;
}

.empty-state p{

    font-size:14px;
}
/* =========================================
   CRM PRO UI
   PART 3
   DASHBOARD + STATS + FILTERS
========================================= */

/* STATS ROW */

.stats-row{

    display:grid;

    grid-template-columns:
    repeat(
        auto-fit,
        minmax(220px,1fr)
    );

    gap:16px;

    margin-bottom:24px;
}

/* STAT CARD */

.stat-c{

    position:relative;

    background:
    var(--surface);

    border:
    1px solid var(--border);

    border-radius:20px;

    padding:22px;

    overflow:hidden;

    transition:.25s;

    box-shadow:
    var(--shadow1);
}

.stat-c:hover{

    transform:
    translateY(-4px);

    box-shadow:
    var(--shadow2);
}

.stat-c::before{

    content:'';

    position:absolute;

    top:0;
    left:0;
    right:0;

    height:4px;

    background:
    linear-gradient(
        90deg,
        var(--accent),
        var(--accent2)
    );
}

/* ACTIVE CARD */

.active-s{

    border-color:
    var(--accent-border);

    background:
    linear-gradient(
        180deg,
        var(--surface),
        var(--accent-bg)
    );
}

/* NUMBER */

.stat-num{

    font-size:30px;

    font-weight:700;

    color:var(--text);

    line-height:1;
}

/* LABEL */

.stat-lbl{

    margin-top:10px;

    color:var(--text2);

    font-size:13px;

    font-weight:500;
}

/* CHANGE */

.stat-chg{

    margin-top:10px;

    font-size:12px;

    font-weight:600;
}

.stat-chg.pos{

    color:
    var(--green);
}

.stat-chg.neg{

    color:
    var(--red);
}

/* FILTER PILLS */

#filterPills{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:22px;
}

.pill{

    padding:
    10px 16px;

    border-radius:999px;

    border:
    1px solid var(--border);

    background:
    var(--surface);

    color:
    var(--text2);

    cursor:pointer;

    transition:.2s;

    font-size:13px;

    font-weight:600;
}

.pill:hover{

    border-color:
    var(--accent);

    color:
    var(--accent);
}

.pill.active{

    background:
    linear-gradient(
        135deg,
        var(--accent),
        var(--accent2)
    );

    border-color:
    transparent;

    color:#fff;
}

/* DASHBOARD GRID */

.dash-grid{

    display:grid;

    grid-template-columns:
    repeat(
        12,
        1fr
    );

    gap:18px;
}

/* CARD */

.dash-card{

    grid-column:
    span 4;

    background:
    var(--surface);

    border:
    1px solid var(--border);

    border-radius:22px;

    padding:20px;

    box-shadow:
    var(--shadow1);

    transition:.25s;
}

.dash-card:hover{

    transform:
    translateY(-4px);

    box-shadow:
    var(--shadow2);
}

.dash-card.wide{

    grid-column:
    span 8;
}

/* HEADER */

.dash-head{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:14px;
}

.dash-title{

    font-family:
    'Syne',
    sans-serif;

    font-size:18px;

    font-weight:700;
}

/* VALUE */

.dash-value{

    font-size:34px;

    font-weight:700;

    margin-top:10px;
}

/* LABEL */

.dash-label{

    font-size:13px;

    color:var(--text2);

    margin-top:8px;
}

/* QUICK ACTIONS */

.quick-actions{

    display:grid;

    grid-template-columns:
    repeat(
        auto-fit,
        minmax(150px,1fr)
    );

    gap:14px;
}

.quick-action{

    border:
    1px solid var(--border);

    background:
    var(--surface);

    border-radius:18px;

    padding:18px;

    text-align:center;

    cursor:pointer;

    transition:.25s;
}

.quick-action:hover{

    transform:
    translateY(-3px);

    border-color:
    var(--accent);

    box-shadow:
    var(--shadow1);
}

.quick-action i{

    font-size:26px;

    color:
    var(--accent);

    margin-bottom:10px;
}

.quick-action span{

    display:block;

    font-size:13px;

    font-weight:600;
}

/* KPI LIST */

.kpi-list{

    display:flex;

    flex-direction:column;

    gap:14px;
}

.kpi-item{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding-bottom:12px;

    border-bottom:
    1px solid var(--border);
}

.kpi-item:last-child{

    border-bottom:none;

    padding-bottom:0;
}

.kpi-name{

    color:
    var(--text2);

    font-size:13px;
}

.kpi-value{

    font-weight:700;
}

/* CHART PLACEHOLDER */

.chart-box{

    width:100%;

    height:300px;

    border-radius:18px;

    background:
    linear-gradient(
        180deg,
        var(--surface2),
        var(--surface3)
    );

    border:
    1px dashed var(--border);

    display:flex;

    align-items:center;

    justify-content:center;

    color:
    var(--text3);
}
/* =========================================
   CRM PRO UI
   PART 4
   LEADS TABLE + CARDS
========================================= */

/* TABLE WRAPPER */

.tw{

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:22px;

    overflow:hidden;

    box-shadow:var(--shadow1);
}

/* TABLE */

.ct{

    width:100%;

    border-collapse:collapse;
}

.ct thead{

    background:var(--surface2);
}

.ct th{

    text-align:left;

    padding:18px;

    font-size:12px;

    text-transform:uppercase;

    letter-spacing:.5px;

    color:var(--text2);

    border-bottom:1px solid var(--border);
}

.ct td{

    padding:16px 18px;

    border-bottom:1px solid var(--border);

    vertical-align:middle;
}

.ct tbody tr{

    transition:.2s;

    cursor:pointer;
}

.ct tbody tr:hover{

    background:var(--surface2);
}

.ct tbody tr:last-child td{

    border-bottom:none;
}

/* LEAD CELL */

.lc{

    display:flex;

    align-items:center;

    gap:12px;
}

/* AVATAR */

.av{

    width:42px;
    height:42px;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    font-size:14px;

    flex-shrink:0;
}

/* LEAD NAME */

.ln{

    font-weight:700;

    color:var(--text);
}

.lco{

    font-size:12px;

    color:var(--text3);

    margin-top:2px;
}

/* VALUE */

.val-cell{

    font-weight:700;

    color:var(--accent);
}

/* DATE */

.date-cell{

    color:var(--text3);

    font-size:12px;
}

/* STATUS BADGE */

.sbadge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:7px 12px;

    border-radius:999px;

    font-size:12px;

    font-weight:700;
}

/* STATUS COLORS */

.sb-new{

    background:#eef6ff;

    color:#2563eb;
}

.sb-talking{

    background:#fff7ed;

    color:#ea580c;
}

.sb-proposal{

    background:#f5f3ff;

    color:#7c3aed;
}

.sb-won{

    background:#ecfdf5;

    color:#16a34a;
}

.sb-lost{

    background:#fef2f2;

    color:#dc2626;
}

/* TAGS */

.stag{

    display:inline-flex;

    align-items:center;

    gap:4px;

    padding:5px 10px;

    border-radius:999px;

    background:var(--surface2);

    border:1px solid var(--border);

    font-size:11px;

    font-weight:600;
}

/* ACTIONS */

.act-row{

    display:flex;

    align-items:center;

    gap:6px;
}

.ib{

    width:34px;
    height:34px;

    border-radius:10px;

    border:1px solid var(--border);

    background:var(--surface);

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.2s;
}

.ib:hover{

    transform:translateY(-2px);

    box-shadow:var(--shadow1);
}

.ib i{

    font-size:16px;
}

.ib.red{

    color:var(--red);
}

.ib.wa{

    color:#25D366;
}

.ib.inv{

    color:var(--accent);
}

/* =====================================
   LEAD CARDS
===================================== */

.cg{

    display:grid;

    grid-template-columns:
    repeat(
        auto-fill,
        minmax(320px,1fr)
    );

    gap:18px;
}

.lkc{

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:22px;

    padding:18px;

    transition:.25s;

    cursor:pointer;

    box-shadow:var(--shadow1);
}

.lkc:hover{

    transform:translateY(-4px);

    box-shadow:var(--shadow2);
}

/* CARD TOP */

.ct2{

    display:flex;

    align-items:center;

    gap:12px;
}

.cav{

    width:48px;
    height:48px;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;
}

/* NAME */

.cn{

    font-size:15px;

    font-weight:700;
}

.cco{

    font-size:12px;

    color:var(--text3);

    margin-top:2px;
}

/* STATUS ROW */

.csr{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-top:14px;
}

.cval{

    color:var(--accent);

    font-size:18px;

    font-weight:700;
}

/* DIVIDER */

.cdiv{

    height:1px;

    background:var(--border);

    margin:14px 0;
}

/* META */

.cmeta{

    display:grid;

    grid-template-columns:
    repeat(
        2,
        1fr
    );

    gap:12px;
}

.cmi{

    display:flex;

    flex-direction:column;
}

.cmi label{

    font-size:11px;

    color:var(--text3);

    margin-bottom:4px;
}

.cmi span{

    font-size:13px;

    font-weight:600;
}

/* TAG ROW */

.tags-row{

    display:flex;

    flex-wrap:wrap;

    gap:6px;

    margin-top:12px;
}

/* CARD ACTIONS */

.card-acts{
  display:flex;
  gap:6px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--border);
}

.ca{
  width:36px;
  height:36px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--surface2);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:15px;
  text-decoration:none;
  color:var(--text2);
  transition:all .18s cubic-bezier(.34,1.56,.64,1);
  flex-shrink:0;
}

.ca:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,0,0,.10);
  border-color:var(--border2);
  color:var(--text);
}

.ca.wa{
  background:#25D366;
  color:#fff;
  border-color:#25D366;
}
.ca.wa:hover{
  background:#1ebe5d;
  border-color:#1ebe5d;
  box-shadow:0 4px 12px rgba(37,211,102,.35);
}
.ca.inv:hover{
  color:var(--yellow);
  border-color:rgba(217,119,6,.3);
  background:rgba(217,119,6,.08);
}

/* =========================================
   CRM PRO UI
   PART 5
   PIPELINE + DRAWER
========================================= */

/* PIPELINE */

.pipeline{

    display:grid;

    grid-template-columns:
    repeat(
        auto-fit,
        minmax(280px,1fr)
    );

    gap:18px;

    align-items:start;
}

/* COLUMN */

.pc{

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:22px;

    overflow:hidden;

    box-shadow:var(--shadow1);

    min-height:500px;
}

/* HEADER */

.ph{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:18px;

    border-bottom:1px solid var(--border);

    background:var(--surface2);
}

.pt{

    font-weight:700;

    font-size:14px;
}

.pcount{

    min-width:28px;

    height:28px;

    border-radius:999px;

    background:var(--accent-bg);

    color:var(--accent);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:12px;

    font-weight:700;
}

/* BODY */

.pb-cards{

    padding:14px;

    display:flex;

    flex-direction:column;

    gap:12px;
}

/* CARD */

.pkc{

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:18px;

    padding:14px;

    cursor:pointer;

    transition:.25s;
}

.pkc:hover{

    transform:translateY(-3px);

    box-shadow:var(--shadow1);
}

.pkn{

    font-size:14px;

    font-weight:700;

    margin-bottom:6px;
}

.pks{

    font-size:12px;

    color:var(--text3);

    margin-bottom:8px;
}

.pkv{

    color:var(--accent);

    font-weight:700;

    font-size:15px;
}

/* =====================================
   DRAWER
===================================== */

.drawer{

    position:fixed;

    top:0;
    right:-560px;

    width:560px;

    max-width:100%;

    height:100vh;

    background:var(--surface);

    z-index:9999;

    transition:.35s ease;

    box-shadow:
    -10px 0 40px rgba(0,0,0,.15);

    display:flex;

    flex-direction:column;
}

.drawer.open{

    right:0;
}

/* OVERLAY */

.drawer-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    opacity:0;

    visibility:hidden;

    transition:.25s;

    z-index:9998;
}

.drawer-overlay.show{

    opacity:1;

    visibility:visible;
}

/* HEADER */

.dh{

    padding:22px;

    border-bottom:1px solid var(--border);

    display:flex;

    justify-content:space-between;

    align-items:center;
}

.dtitle{

    font-family:'Syne',sans-serif;

    font-size:20px;

    font-weight:700;
}

.dclose{

    width:40px;
    height:40px;

    border-radius:12px;

    border:1px solid var(--border);

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;
}

/* BODY */

.dbody{

    flex:1;

    overflow:auto;

    padding:20px;
}

/* GRID */

.qa-grid{

    display:grid;

    grid-template-columns:
    repeat(
        2,
        minmax(0,1fr)
    );

    gap:14px;
}

/* FIELD */

.qa{

    display:flex;

    flex-direction:column;
}

.qa label{

    font-size:12px;

    color:var(--text2);

    margin-bottom:6px;
}

/* FULL */

.qa.full{

    grid-column:1/-1;
}

/* TEXTAREA */

.qa textarea{

    min-height:120px;
}

/* =====================================
   QUICK ACTIONS
===================================== */

.quick-row{

    display:flex;

    gap:10px;

    margin-top:18px;

    flex-wrap:wrap;
}

.quick-btn{

    flex:1;

    min-width:120px;

    height:44px;

    border-radius:14px;

    border:none;

    cursor:pointer;

    font-weight:600;

    transition:.2s;
}

.quick-btn:hover{

    transform:translateY(-2px);
}

.quick-btn.call{

    background:#eff6ff;

    color:#2563eb;
}

.quick-btn.wa{

    background:#dcfce7;

    color:#16a34a;
}

.quick-btn.mail{

    background:#f3e8ff;

    color:#9333ea;
}

.quick-btn.invoice{

    background:var(--accent-bg);

    color:var(--accent);
}

/* =====================================
   TIMELINE
===================================== */

.timeline{

    margin-top:20px;

    border-top:1px solid var(--border);

    padding-top:20px;
}

.timeline-item{

    position:relative;

    padding-left:24px;

    margin-bottom:18px;
}

.timeline-item::before{

    content:'';

    position:absolute;

    left:0;

    top:4px;

    width:10px;
    height:10px;

    border-radius:50%;

    background:var(--accent);
}

.timeline-title{

    font-size:13px;

    font-weight:700;
}

.timeline-date{

    font-size:11px;

    color:var(--text3);

    margin-top:2px;
}

.timeline-desc{

    margin-top:6px;

    font-size:12px;

    color:var(--text2);
}

/* =========================================
   CRM PRO UI
   PART 6
   MODALS + TOASTS
========================================= */

/* MODAL OVERLAY */

.modal{

    position:fixed;

    inset:0;

    background:
    rgba(
        0,
        0,
        0,
        .55
    );

    backdrop-filter:
    blur(4px);

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    visibility:hidden;

    transition:.25s;

    z-index:10000;
}

.modal.open{

    opacity:1;

    visibility:visible;
}

/* MODAL WINDOW */

.mov{

    width:720px;

    max-width:95%;

    max-height:90vh;

    overflow:auto;

    background:
    var(--surface);

    border:
    1px solid var(--border);

    border-radius:24px;

    box-shadow:
    var(--shadow3);

    animation:
    modalPop .25s ease;
}

@keyframes modalPop{

    from{

        transform:
        translateY(20px)
        scale(.98);

        opacity:0;
    }

    to{

        transform:
        translateY(0)
        scale(1);

        opacity:1;
    }
}

/* HEADER */

.mh{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:22px;

    border-bottom:
    1px solid var(--border);
}

.mt{

    font-family:
    'Syne',
    sans-serif;

    font-size:22px;

    font-weight:700;
}

.mc{

    width:42px;
    height:42px;

    border-radius:14px;

    border:
    1px solid var(--border);

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
    var(--surface);
}

/* BODY */

.mb{

    padding:22px;
}

/* FOOTER */

.mf{

    display:flex;

    justify-content:flex-end;

    gap:10px;

    padding:22px;

    border-top:
    1px solid var(--border);
}

/* =====================================
   ADD LEAD
===================================== */

.add-lead-form{

    display:grid;

    grid-template-columns:
    repeat(
        2,
        minmax(0,1fr)
    );

    gap:14px;
}

.add-lead-form .full{

    grid-column:
    1 / -1;
}

/* =====================================
   PAYMENT MODAL
===================================== */

.payment-modal{

    width:900px;

    max-width:95%;
}

.payment-layout{

    display:grid;

    grid-template-columns:
    1fr 320px;

    gap:20px;
}

.payment-side{

    background:
    var(--surface2);

    border:
    1px solid var(--border);

    border-radius:18px;

    padding:16px;
}

.payment-side h3{

    margin-bottom:12px;
}

/* =====================================
   INVOICE
===================================== */

.invoice-box{

    border:
    1px solid var(--border);

    border-radius:20px;

    padding:24px;

    background:
    var(--surface);
}

.invoice-top{

    display:flex;

    justify-content:space-between;

    margin-bottom:20px;
}

.invoice-title{

    font-size:28px;

    font-weight:700;

    font-family:
    'Syne',
    sans-serif;
}

.invoice-table{

    width:100%;

    border-collapse:collapse;

    margin-top:20px;
}

.invoice-table th{

    background:
    var(--surface2);

    text-align:left;

    padding:12px;
}

.invoice-table td{

    padding:12px;

    border-bottom:
    1px solid var(--border);
}

/* =====================================
   TOAST
===================================== */

.toast-wrap{

    position:fixed;

    top:20px;

    right:20px;

    z-index:20000;

    display:flex;

    flex-direction:column;

    gap:10px;
}

.toast{

    min-width:280px;

    background:
    var(--surface);

    border:
    1px solid var(--border);

    border-left:
    4px solid var(--accent);

    border-radius:16px;

    padding:14px 16px;

    display:flex;

    align-items:center;

    gap:12px;

    box-shadow:
    var(--shadow2);

    animation:
    toastIn .25s ease;
}

@keyframes toastIn{

    from{

        transform:
        translateX(40px);

        opacity:0;
    }

    to{

        transform:
        translateX(0);

        opacity:1;
    }
}

.toast-icon{

    width:36px;
    height:36px;

    border-radius:12px;

    background:
    var(--accent-bg);

    display:flex;

    align-items:center;

    justify-content:center;

    color:
    var(--accent);
}

.toast-title{

    font-weight:700;

    font-size:13px;
}

.toast-msg{

    font-size:12px;

    color:
    var(--text2);
}

/* SUCCESS */

.toast.success{

    border-left-color:
    var(--green);
}

.toast.success
.toast-icon{

    background:
    rgba(
        31,
        169,
        113,
        .12
    );

    color:
    var(--green);
}

/* ERROR */

.toast.error{

    border-left-color:
    var(--red);
}

.toast.error
.toast-icon{

    background:
    rgba(
        217,
        48,
        37,
        .12
    );

    color:
    var(--red);
}

/* WARNING */

.toast.warning{

    border-left-color:
    var(--yellow);
}

.toast.warning
.toast-icon{

    background:
    rgba(
        217,
        119,
        6,
        .12
    );

    color:
    var(--yellow);
}

/* =========================================
   CRM PRO UI
   PART 7
   WHATSAPP + EMAIL + TASKS
========================================= */

/* =====================================
   WHATSAPP
===================================== */

.wa-wrap{

    display:grid;

    grid-template-columns:
    320px 1fr;

    gap:18px;

    height:
    calc(
        100vh - 180px
    );
}

/* SIDEBAR */

.wa-sidebar{

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:22px;

    overflow:hidden;

    display:flex;

    flex-direction:column;
}

.wa-head{

    padding:18px;

    border-bottom:1px solid var(--border);
}

.wa-search{

    position:relative;
}

.wa-search i{

    position:absolute;

    left:14px;

    top:50%;

    transform:
    translateY(-50%);

    color:var(--text3);
}

.wa-search input{

    padding-left:40px;
}

/* CHAT LIST */

.wa-list{

    flex:1;

    overflow:auto;
}

.wa-user{

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px 16px;

    cursor:pointer;

    transition:.2s;

    border-bottom:
    1px solid var(--border);
}

.wa-user:hover{

    background:
    var(--surface2);
}

.wa-user.active{

    background:
    var(--accent-bg);
}

.wa-av{

    width:46px;
    height:46px;

    border-radius:14px;

    background:
    linear-gradient(
        135deg,
        #25D366,
        #128C7E
    );

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;
}

.wa-info{

    flex:1;
}

.wa-name{

    font-weight:700;
}

.wa-preview{

    font-size:12px;

    color:var(--text3);

    margin-top:3px;
}

/* CHAT AREA */

.wa-chat{

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:22px;

    display:flex;

    flex-direction:column;

    overflow:hidden;
}

.wa-chat-head{

    padding:18px;

    border-bottom:
    1px solid var(--border);

    display:flex;

    align-items:center;

    justify-content:space-between;
}

.wa-messages{

    flex:1;

    overflow:auto;

    padding:20px;

    background:
    var(--surface2);

    display:flex;

    flex-direction:column;

    gap:12px;
}

.wa-msg{

    max-width:70%;

    padding:12px 14px;

    border-radius:16px;

    font-size:14px;
}

.wa-msg.in{

    background:#fff;

    border:
    1px solid var(--border);

    align-self:flex-start;
}

.wa-msg.out{

    background:#dcfce7;

    align-self:flex-end;
}

.wa-input{

    display:flex;

    gap:10px;

    padding:18px;

    border-top:
    1px solid var(--border);
}

/* =====================================
   EMAIL
===================================== */

.email-layout{

    display:grid;

    grid-template-columns:
    340px 1fr;

    gap:18px;
}

.email-list{

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:22px;

    overflow:hidden;
}

.email-item{

    padding:16px;

    border-bottom:
    1px solid var(--border);

    cursor:pointer;

    transition:.2s;
}

.email-item:hover{

    background:
    var(--surface2);
}

.email-item.active{

    background:
    var(--accent-bg);
}

.email-from{

    font-weight:700;
}

.email-sub{

    margin-top:4px;

    font-size:13px;
}

.email-snippet{

    margin-top:4px;

    color:var(--text3);

    font-size:12px;
}

.email-view{

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:22px;

    padding:24px;
}

/* =====================================
   TASKS
===================================== */

.task-grid{

    display:grid;

    grid-template-columns:
    repeat(
        auto-fill,
        minmax(
            320px,
            1fr
        )
    );

    gap:18px;
}

.task-card{

    background:
    var(--surface);

    border:
    1px solid var(--border);

    border-radius:20px;

    padding:18px;

    transition:.2s;
}

.task-card:hover{

    transform:
    translateY(-3px);

    box-shadow:
    var(--shadow2);
}

.task-top{

    display:flex;

    justify-content:space-between;

    margin-bottom:12px;
}

.task-title{

    font-size:15px;

    font-weight:700;
}

.task-status{

    padding:
    6px 10px;

    border-radius:999px;

    font-size:11px;

    font-weight:700;
}

.task-status.pending{

    background:#fff7ed;

    color:#ea580c;
}

.task-status.done{

    background:#dcfce7;

    color:#16a34a;
}

.task-desc{

    color:
    var(--text2);

    font-size:13px;

    margin-bottom:12px;
}

.task-date{

    font-size:12px;

    color:
    var(--text3);
}

/* =====================================
   AUTOMATION
===================================== */

.auto-grid{

    display:grid;

    grid-template-columns:
    repeat(
        auto-fill,
        minmax(
            280px,
            1fr
        )
    );

    gap:18px;
}

.auto-card{

    background:
    var(--surface);

    border:
    1px solid var(--border);

    border-radius:20px;

    padding:18px;

    transition:.25s;
}

.auto-card:hover{

    transform:
    translateY(-3px);

    box-shadow:
    var(--shadow2);
}

.auto-icon{

    width:50px;
    height:50px;

    border-radius:16px;

    background:
    var(--accent-bg);

    color:
    var(--accent);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    margin-bottom:14px;
}

.auto-title{

    font-size:16px;

    font-weight:700;

    margin-bottom:6px;
}

.auto-desc{

    color:
    var(--text2);

    font-size:13px;
}

/* =====================================
   MEETINGS
===================================== */

.meeting-list{

    display:flex;

    flex-direction:column;

    gap:14px;
}

.meeting-card{

    background:
    var(--surface);

    border:
    1px solid var(--border);

    border-radius:20px;

    padding:18px;
}

.meeting-title{

    font-weight:700;

    margin-bottom:8px;
}

.meeting-meta{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    font-size:13px;

    color:
    var(--text2);
}

.meeting-actions{

    display:flex;

    gap:10px;

    margin-top:14px;
}

/* =========================================
   CRM PRO UI
   PART 8
   RESPONSIVE + FINAL POLISH
========================================= */

/* SMOOTH */

html{

    scroll-behavior:smooth;
}

*{

    -webkit-tap-highlight-color:
    transparent;
}

/* TRANSITIONS */

body,
.card,
.stat-c,
.lkc,
.pc,
.pkc,
.ni,
.btn-primary,
.btn-secondary,
input,
select,
textarea{

    transition:
    background .25s,
    border-color .25s,
    color .25s,
    box-shadow .25s,
    transform .25s;
}

/* THEME SWITCH */

.theme-switch{

    width:52px;
    height:30px;

    border-radius:999px;

    background:
    var(--surface3);

    border:
    1px solid var(--border);

    position:relative;

    cursor:pointer;
}

.theme-switch::before{

    content:'';

    position:absolute;

    top:3px;
    left:3px;

    width:22px;
    height:22px;

    border-radius:50%;

    background:
    var(--accent);

    transition:.25s;
}

[data-theme="dark"]
.theme-switch::before{

    transform:
    translateX(22px);
}

/* COLOR DOT */

.color-dot{

    width:10px;
    height:10px;

    border-radius:50%;

    display:inline-block;
}

/* STATUS COLORS */

:root{

    --status-new:#2563eb;
    --status-talking:#f59e0b;
    --status-proposal:#7c3aed;
    --status-won:#16a34a;
    --status-lost:#dc2626;
}

/* BADGE ANIMATION */

.sbadge{

    animation:
    badgeFade .25s ease;
}

@keyframes badgeFade{

    from{

        opacity:0;

        transform:
        scale(.9);
    }

    to{

        opacity:1;

        transform:
        scale(1);
    }
}

/* BUTTON ICON GAP */

.btn-primary i,
.btn-secondary i{

    margin-right:6px;
}

/* LOADING */

.loading{

    display:flex;

    align-items:center;

    justify-content:center;

    padding:50px;
}

.spinner{

    width:40px;
    height:40px;

    border-radius:50%;

    border:
    3px solid
    rgba(
        0,
        0,
        0,
        .08
    );

    border-top:
    3px solid
    var(--accent);

    animation:
    spin 1s linear infinite;
}

@keyframes spin{

    to{

        transform:
        rotate(
            360deg
        );
    }
}

/* MOBILE SIDEBAR */

.mobile-overlay{

    position:fixed;

    inset:0;

    background:
    rgba(
        0,
        0,
        0,
        .45
    );

    opacity:0;

    visibility:hidden;

    transition:.25s;

    z-index:80;
}

.mobile-overlay.show{

    opacity:1;

    visibility:visible;
}

/* TABLET */

@media
(max-width:1200px){

    .stats-row{

        grid-template-columns:
        repeat(
            2,
            1fr
        );
    }

    .dash-grid{

        grid-template-columns:
        repeat(
            2,
            1fr
        );
    }

    .dash-card,
    .dash-card.wide{

        grid-column:auto;
    }

    .payment-layout{

        grid-template-columns:
        1fr;
    }

    .wa-wrap{

        grid-template-columns:
        280px 1fr;
    }
}

/* MOBILE */

@media
(max-width:900px){

    .sb{

        position:fixed;

        top:0;
        left:-280px;

        height:100vh;

        z-index:100;

        transition:.3s;
    }

    .sb.open{

        left:0;
    }

    .main{

        width:100%;
    }

    .topbar{

        padding:
        0 14px;
    }

    .tb-left{

        gap:10px;
    }

    .view-title{

        font-size:20px;
    }

    .search-wrap{

        display:none;
    }

    .stats-row{

        grid-template-columns:
        1fr;
    }

    .cg{

        grid-template-columns:
        1fr;
    }

    .pipeline{

        grid-template-columns:
        1fr;
    }

    .drawer{

        width:100%;
    }

    .qa-grid{

        grid-template-columns:
        1fr;
    }

    .wa-wrap{

        grid-template-columns:
        1fr;
    }

    .wa-sidebar{

        display:none;
    }

    .email-layout{

        grid-template-columns:
        1fr;
    }

    .email-list{

        display:none;
    }

    .task-grid{

        grid-template-columns:
        1fr;
    }

    .auto-grid{

        grid-template-columns:
        1fr;
    }

    .meeting-list{

        gap:10px;
    }
}

/* SMALL MOBILE */

@media
(max-width:600px){

    .content{

        padding:14px;
    }

    .card{

        padding:14px;
    }

    .stat-c{

        padding:16px;
    }

    .stat-num{

        font-size:24px;
    }

    .btn-primary,
    .btn-secondary{

        width:100%;
    }

    .card-acts{

        flex-direction:column;
    }

    .quick-row{

        flex-direction:column;
    }

    .payment-history-grid{

        grid-template-columns:
        1fr;
    }
}

/* PRINT */

@media print{

    .sb,
    .topbar,
    .drawer,
    .modal,
    .toast-wrap,
    .card-acts,
    .act-row{

        display:none !important;
    }

    body{

        background:#fff;
    }

    .content{

        padding:0;
    }
}

/* =====================================
   END OF CRM PRO UI
===================================== */
/* =========================================
   TEMPLATE MERGE OVERRIDES
   Existing style.css variables are preserved.
   Template variables are mapped to the current variable contract.
========================================= */
:root{
    --success-bg:rgba(31,169,113,.12);
    --success-border:rgba(31,169,113,.24);
    --warning-bg:rgba(217,119,6,.12);
    --warning-border:rgba(217,119,6,.24);
    --info-bg:rgba(37,99,235,.10);
    --info-border:rgba(37,99,235,.24);
    --danger-bg:rgba(217,48,37,.10);
    --danger-border:rgba(217,48,37,.24);
    --purple:#7c3aed;
    --purple-bg:rgba(124,58,237,.10);
    --purple-border:rgba(124,58,237,.24);
    --shadow-accent:0 10px 24px rgba(232,93,4,.28);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg);color:var(--text);min-height:100vh;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
.app{display:flex;height:100vh;overflow:hidden}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font-family:'Inter',sans-serif}
*::-webkit-scrollbar{width:5px;height:5px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:99px}
*::-webkit-scrollbar-thumb:hover{background:var(--border2)}


.sb{
  width:234px;
  background:linear-gradient(180deg,#0d1117 0%,#131926 50%,#0f1420 100%);
  border-right:none;
  display:flex;flex-direction:column;flex-shrink:0;
  box-shadow:4px 0 40px rgba(0,0,0,0.4);
  z-index:10;position:relative;overflow:hidden;
}


.sb::before{
  content:'';position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(232,93,4,0.04) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(59,130,246,0.03) 0%, transparent 50%),
    radial-gradient(rgba(255,255,255,0.018) 1px,transparent 1px);
  background-size:100% 100%,100% 100%,22px 22px;
  pointer-events:none;z-index:0;
}


.sb::after{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent 0%,#e85d04 30%,#ff9040 50%,#e85d04 70%,transparent 100%);
  background-size:200% 100%;
  animation:sb-shine 4s ease-in-out infinite;
  z-index:2;
}
@keyframes sb-shine{
  0%,100%{background-position:200% 0;opacity:.6}
  50%{background-position:-200% 0;opacity:1}
}


.sb-logo{
  padding:18px 14px 14px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  position:relative;z-index:1;
}
.logo-wrap{display:flex;align-items:center;gap:11px}
.logo-icon{
  width:40px;height:40px;border-radius:12px;
  background:linear-gradient(140deg,#ff9040,#e85d04,#c84000);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;flex-shrink:0;
  box-shadow:0 4px 16px rgba(232,93,4,0.5),0 0 0 1px rgba(232,93,4,0.2);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s;
}
.logo-icon:hover{transform:scale(1.08) rotate(-3deg);box-shadow:0 6px 24px rgba(232,93,4,0.7),0 0 0 2px rgba(232,93,4,0.3)}
.logo-n{font-family:'Syne',sans-serif;font-size:14.5px;font-weight:800;color:#fff;letter-spacing:-.3px;line-height:1.2}
.logo-s{font-size:8.5px;color:rgba(255,255,255,0.45);letter-spacing:1.8px;text-transform:uppercase;margin-top:2px;font-weight:600}


.sb-nav{padding:8px 8px;flex:1;overflow-y:auto;scrollbar-width:none;position:relative;z-index:1}
.sb-nav::-webkit-scrollbar{display:none}
.sb-sec{
  font-size:9.5px;letter-spacing:2px;text-transform:uppercase;
  color:rgba(255,255,255,0.4);padding:0 10px;
  margin:18px 0 5px;font-weight:700;
  display:flex;align-items:center;gap:8px;
}
.sb-sec::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,0.1),transparent)}


.ni{
  display:flex;align-items:center;gap:9px;
  padding:7px 10px;border-radius:10px;
  cursor:pointer;color:rgba(255,255,255,0.72);font-size:13px;
  transition:color .2s,background .2s,border-color .2s,transform .15s;
  margin-bottom:2px;
  border:1px solid transparent;
  user-select:none;position:relative;overflow:hidden;
  font-weight:500;letter-spacing:.1px;
  -webkit-tap-highlight-color:transparent;
}


.ni::after{
  content:'';position:absolute;
  border-radius:50%;background:rgba(255,255,255,0.15);
  width:0;height:0;left:50%;top:50%;
  transform:translate(-50%,-50%);
  transition:width .4s ease-out,height .4s ease-out,opacity .4s ease-out;
  opacity:0;pointer-events:none;
}
.ni:active::after{width:180px;height:180px;opacity:1;transition:none}

.ni:hover{
  background:rgba(255,255,255,0.08);
  color:#fff;
  border-color:rgba(255,255,255,0.08);
  transform:translateX(2px);
}
.ni:active{transform:translateX(2px) scale(.98)}

.ni.active{
  background:linear-gradient(110deg,rgba(232,93,4,0.22) 0%,rgba(232,93,4,0.08) 100%);
  color:#fff;
  border-color:rgba(232,93,4,0.3);
  font-weight:600;
  transform:translateX(2px);
  box-shadow:0 2px 16px rgba(232,93,4,0.12),inset 0 1px 0 rgba(255,255,255,0.06);
}


.ni.active::before{
  content:'';position:absolute;left:0;top:20%;bottom:20%;
  width:3px;background:linear-gradient(180deg,#ff9040,#e85d04);
  border-radius:0 3px 3px 0;
  box-shadow:0 0 10px rgba(232,93,4,0.8),0 0 20px rgba(232,93,4,0.4);
  animation:indicator-pulse 2s ease-in-out infinite;
}
@keyframes indicator-pulse{
  0%,100%{box-shadow:0 0 8px rgba(232,93,4,0.7),0 0 16px rgba(232,93,4,0.3)}
  50%{box-shadow:0 0 14px rgba(232,93,4,1),0 0 28px rgba(232,93,4,0.5)}
}
@keyframes pulse-dot{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.7;transform:scale(1.2)}
}


.ni-em{
  width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  border-radius:8px;flex-shrink:0;font-size:15px;
  transition:all .2s cubic-bezier(.34,1.56,.64,1);
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.09);
}
.ni:hover .ni-em{
  background:rgba(255,255,255,0.12);
  border-color:rgba(255,255,255,0.14);
  transform:scale(1.1) rotate(-4deg);
}
.ni.active .ni-em{
  background:linear-gradient(135deg,rgba(232,93,4,0.45),rgba(232,93,4,0.2));
  border-color:rgba(232,93,4,0.5);
  box-shadow:0 2px 10px rgba(232,93,4,0.3);
  transform:scale(1.05);
}


.nb{
  margin-left:auto;
  background:var(--accent);color:#fff;
  font-size:9px;font-weight:700;
  padding:2px 7px;border-radius:99px;
  min-width:16px;text-align:center;
  box-shadow:0 2px 6px rgba(232,93,4,0.4);
  letter-spacing:.3px;
  animation:badge-pop .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes badge-pop{from{transform:scale(0)}to{transform:scale(1)}}


.sb-ft{
  padding:10px 10px 12px;
  border-top:1px solid rgba(255,255,255,0.05);
  background:rgba(0,0,0,0.25);
  position:relative;z-index:1;
}
.upill{
  display:flex;align-items:center;gap:9px;
  padding:9px 11px;border-radius:11px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.07);
  transition:all .16s;
}
.upill:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.1)}
.uav{
  width:30px;height:30px;border-radius:8px;
  background:linear-gradient(135deg,#ff8040,#e85d04);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;flex-shrink:0;
  box-shadow:0 2px 8px rgba(232,93,4,0.35);
}


.main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;height:60px;
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,0.98);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  flex-shrink:0;gap:12px;
  box-shadow:0 1px 0 var(--border),0 4px 16px rgba(20,24,50,0.05);
  position:sticky;top:0;z-index:5;
}
.tb-l h1{font-family:'Syne',sans-serif;font-size:17px;font-weight:700;letter-spacing:-.4px;color:var(--text)}
.tb-l p{font-size:11px;color:var(--text3);margin-top:1px;line-height:1}
.tb-r{display:flex;align-items:center;gap:8px}
.sw{
  display:flex;align-items:center;gap:8px;
  background:var(--surface2);border:1.5px solid var(--border);
  border-radius:99px;padding:8px 14px;width:220px;
  transition:all .18s;
}
.sw:focus-within{
  border-color:var(--accent-border);background:var(--surface);
  box-shadow:0 0 0 4px rgba(232,93,4,0.07);
  width:250px;
}
.sw input{background:transparent;border:none;outline:none;color:var(--text);font-size:13px;width:100%}
.sw input::placeholder{color:var(--text3)}
.sw i{color:var(--text3);font-size:14px;flex-shrink:0}
.btnp{
  display:flex;align-items:center;gap:7px;
  padding:0 18px;height:38px;
  background:var(--accent);
  color:#fff;border:none;border-radius:99px;
  font-size:13px;font-weight:500;cursor:pointer;
  white-space:nowrap;
  transition:all .18s;
  box-shadow:var(--shadow-accent, 0 10px 24px rgba(232,93,4,.28));
  letter-spacing:-.1px;
}
.btnp:hover{background:var(--accent2);box-shadow:0 6px 20px rgba(232,93,4,0.38);transform:translateY(-1px)}
.btnp:active{transform:translateY(0);box-shadow:var(--shadow-accent, 0 10px 24px rgba(232,93,4,.28))}
.ham{
  display:none;width:36px;height:36px;
  align-items:center;justify-content:center;
  border-radius:var(--radius-sm);border:1.5px solid var(--border);
  background:var(--surface2);color:var(--text2);cursor:pointer;font-size:18px;flex-shrink:0;
  transition:all .15s;
}
.ham:hover{background:var(--surface3);border-color:var(--border2)}


.sr{
  display:grid;grid-template-columns:repeat(5,1fr);
  background:var(--surface);
  border-bottom:1.5px solid var(--border2);
  flex-shrink:0;
}
.sc{
  padding:16px 20px;position:relative;
  border-right:1px solid var(--border);
  transition:background .15s;cursor:default;
  overflow:hidden;
}
.sc:last-child{border-right:none}
.sc:hover{background:var(--surface2)}
.sc::after{
  content:'';position:absolute;bottom:0;left:0;right:0;
  height:2px;background:transparent;transition:background .2s;
}
.sc.act::after{background:linear-gradient(90deg,var(--accent),var(--accent2))}
.sc:hover::after{background:var(--border2)}
.sc-icon{
  width:34px;height:34px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:17px;margin-bottom:10px;
}
.sn{
  font-size:24px;font-weight:600;line-height:1;
  letter-spacing:-.8px;color:var(--text);
  font-variant-numeric:tabular-nums;
}
.sl{font-size:11px;color:var(--text3);margin-top:5px;font-weight:400}
.pos{color:var(--green);font-size:11px;font-weight:500;margin-top:3px;display:block}
.neg{color:var(--red);font-size:11px;font-weight:500;margin-top:3px;display:block}


.con{flex:1;overflow:hidden;padding:18px 24px;background:var(--bg);display:flex;flex-direction:column}
.fr2{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:8px}
.pills{display:flex;gap:5px;flex-wrap:wrap}
.pill{
  padding:5px 13px;border-radius:99px;font-size:12px;
  cursor:pointer;border:1.5px solid var(--border2);
  color:var(--text3);background:transparent;
  transition:all .16s;font-weight:400;
}
.pill:hover{border-color:var(--accent-border);color:var(--accent);background:var(--accent-bg)}
.pill.active{
  background:var(--accent);border-color:var(--accent);
  color:#fff;font-weight:500;
  box-shadow:0 2px 8px rgba(232,93,4,0.25);
}
.vtg{display:flex;gap:4px;background:var(--surface2);padding:4px;border-radius:var(--radius-sm);border:1px solid var(--border)}
.vb{
  width:30px;height:28px;display:flex;align-items:center;justify-content:center;
  border-radius:7px;border:none;background:transparent;
  color:var(--text3);cursor:pointer;font-size:14px;transition:all .15s;
}
.vb:hover{color:var(--text2)}
.vb.active{background:var(--surface);color:var(--accent);box-shadow:var(--shadow1)}


.tw{
  background:var(--surface);border:1px solid var(--border2);
  border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow2);
}
.ct{width:100%;border-collapse:collapse}
.ct thead tr{
  background:var(--surface2);
  border-bottom:2px solid var(--border2);
  position:sticky;
  top:0;
  z-index:10;
}
.ct th{
  padding:13px 16px;text-align:left;
  font-size:10px;font-weight:700;
  letter-spacing:1.4px;text-transform:uppercase;
  color:var(--text3);white-space:nowrap;
}
.ct td{
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  vertical-align:middle;
}
.ct tbody tr:last-child td{border-bottom:none}
.ct tbody tr{transition:all .14s;cursor:pointer}
.ct tbody tr:hover{background:var(--surface2);cursor:pointer}
.ct tbody tr:hover .ar{opacity:1 !important}
.lc{display:flex;align-items:center;gap:11px}
.av{
  width:38px;height:38px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;flex-shrink:0;
  position:relative;
}
.ln{font-size:13px;font-weight:500;color:var(--text);line-height:1.3}
.lco{font-size:11px;color:var(--text3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}
.lsv{font-size:11px;color:var(--text3);margin-top:2px}
.cdot{width:8px;height:8px;border-radius:50%;flex-shrink:0;display:inline-block}
.tag{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:99px;font-size:11px;font-weight:400;background:var(--surface2);border:1px solid var(--border);color:var(--text2);white-space:nowrap}
.vc{font-family:'Syne',sans-serif;font-size:13px;font-weight:600;color:var(--accent)}
.ca-row{display:flex;gap:5px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}


.sbg{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:8px;
  font-size:11px;font-weight:600;
  border:1.5px solid;letter-spacing:.1px;
  white-space:nowrap;
}

.s-New     {color:#1455b0;background:#e8f0ff;border-color:#c0d0f5}
.s-Talking {color:#a05000;background:#fff3e0;border-color:#f0c890}
.s-Proposal{color:#6a1f9a;background:#f5e8ff;border-color:#d4a8f0}
.s-Won     {color:#0a6e35;background:#e0f7eb;border-color:#90d4b0}
.s-Lost    {color:#b02020;background:#ffe8e8;border-color:#f0a8a8}


.ar{display:flex;align-items:center;gap:3px;opacity:0;transition:opacity .15s}
.ct tbody tr:hover .ar{opacity:1}
.ib{
  width:30px;height:30px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:8px;cursor:pointer;border:1px solid var(--border);
  background:var(--surface2);color:var(--text2);font-size:14px;
  transition:all .15s;text-decoration:none;
}
.ib:hover{background:var(--surface3);border-color:var(--border2);color:var(--text)}
.ib.wa:hover{background:rgba(37,211,102,0.1);border-color:rgba(37,211,102,0.25);color:#1da851}
.ib.inv:hover{background:var(--warning-bg, rgba(217,119,6,.12));border-color:var(--warning-border, rgba(217,119,6,.24));color:var(--yellow)}
.ib.rd:hover{background:var(--danger-bg, rgba(217,48,37,.10));border-color:var(--danger-border, rgba(217,48,37,.24));color:var(--red)}


.cg{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}
.lkc{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:16px;
  cursor:pointer;transition:all .2s ease;
  box-shadow:var(--shadow1);position:relative;overflow:hidden;
}
.lkc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:transparent;transition:background .2s}
.lkc:hover{box-shadow:var(--shadow2);transform:translateY(-2px)}
.lkc:hover::before{background:linear-gradient(90deg,var(--accent),#ff9060)}
.lkc-hdr{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px}
.ca{
  width:28px;height:28px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:8px;cursor:pointer;border:1px solid var(--border);
  background:var(--surface2);color:var(--text2);font-size:13px;
  transition:all .15s;text-decoration:none;
}
.ca:hover{background:var(--surface3);border-color:var(--border2);color:var(--text)}
.ca.wa:hover{background:rgba(37,211,102,0.1);border-color:rgba(37,211,102,0.25);color:#1da851}
.ca.inv:hover{background:var(--warning-bg, rgba(217,119,6,.12));border-color:var(--warning-border, rgba(217,119,6,.24));color:var(--yellow)}
.ca.rd:hover{background:var(--danger-bg, rgba(217,48,37,.10));border-color:var(--danger-border, rgba(217,48,37,.24));color:var(--red)}


.pipe{
  display:grid;
  grid-template-columns:repeat(7,240px);
  gap:10px;
  min-width:max-content;
  height:100%;
  align-items:stretch;
}


.pcol{
  border-radius:16px;
  border:1px solid var(--border);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transition:box-shadow .2s ease;
  position:relative;
}
.pcol:hover{box-shadow:0 8px 32px rgba(0,0,0,0.1)}


.pc-hdr{
  padding:12px 14px 10px;
  flex-shrink:0;
  position:sticky;top:0;z-index:2;
}


.pc-c{
  padding:8px;
  display:flex;flex-direction:column;gap:7px;
  flex:1;
  overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,0.1) transparent;
}
.pc-c::-webkit-scrollbar{width:3px}
.pc-c::-webkit-scrollbar-thumb{background:var(--border2);border-radius:99px}
.pc-c::-webkit-scrollbar-track{background:transparent}


.pk{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:11px 12px;
  cursor:pointer;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s ease,border-color .18s ease;
  position:relative;
  min-width:0;
  width:100%;
  box-sizing:border-box;
}
.pk::after{
  content:'';position:absolute;inset:0;opacity:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.06),transparent);
  transition:opacity .18s;border-radius:12px;pointer-events:none;
}
.pk:hover{
  transform:translateY(-2px) scale(1.01);
  box-shadow:0 6px 20px rgba(0,0,0,0.12);
  border-color:var(--border2);
}
.pk:hover::after{opacity:1}
.pk:active{transform:translateY(0) scale(.99)}

@media(max-width:768px){
  .pipe{grid-template-columns:repeat(7,220px)}
  .pk:hover{transform:none;box-shadow:none}
  .pk:active{transform:scale(.98);background:var(--surface2)}
}



/* ═══════════════════════════════════════
   PIPELINE V2
═══════════════════════════════════════ */

/* viewArea when pipeline is active */
#viewArea.pipeline-active{
  overflow:hidden !important;
  display:flex;
  flex-direction:column;
}

/* pipeline: statsRow shows, fr2 hidden, con fills remaining space */
body.pipeline-view .con{
  padding:0;
  overflow:hidden;
}
body.pipeline-view #statsRow{
  display:grid !important;
}

/* pipeline-view: fr2 hidden, statsRow stays visible */

.pipe-wrap{
  display:flex;flex-direction:column;
  flex:1;min-height:0;overflow:hidden;
}

/* Fields bar */
.pipe-fields-bar{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:8px 14px;background:var(--surface);border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.pipe-fields-label{
  font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:1.2px;flex-shrink:0;margin-right:2px;
}
.pipe-field-chip{
  display:inline-flex;align-items:center;gap:5px;cursor:pointer;
  font-size:12px;font-weight:500;color:var(--text2);
  padding:4px 10px;border-radius:99px;
  border:1.5px solid var(--border);background:var(--surface);
  transition:all .15s ease;user-select:none;
}
.pipe-field-chip:hover{border-color:var(--accent);color:var(--accent)}
.pipe-field-chip.active{
  background:var(--accent);color:#fff;border-color:var(--accent);
}
.pipe-field-check{
  width:14px;height:14px;border-radius:4px;display:flex;align-items:center;
  justify-content:center;flex-shrink:0;
}
.pipe-field-chip.active .pipe-field-check{color:#fff}

/* Scroll container */
.pipe-scroll{
  flex:1;min-height:0;overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;padding:12px 14px 12px;
  scrollbar-width:thin;scrollbar-color:var(--border2) transparent;
}
.pipe-scroll::-webkit-scrollbar{height:5px}
.pipe-scroll::-webkit-scrollbar-thumb{background:var(--border2);border-radius:99px}
.pipe-scroll::-webkit-scrollbar{height:4px}
.pipe-scroll::-webkit-scrollbar-thumb{background:var(--border2);border-radius:99px}

/* Grid */
.pipe2{
  display:grid;
  grid-template-columns:repeat(6,260px);
  gap:10px;
  min-width:max-content;
  height:100%;
  align-items:stretch;
}

/* Column */
.pcol2{
  border-radius:14px;display:flex;flex-direction:column;
  overflow:hidden;transition:box-shadow .2s ease;
  border:1.5px solid var(--border);
  min-height:200px;
  min-width:0;
  width:100%;
}
.pcol2:hover{box-shadow:0 6px 24px rgba(0,0,0,.09)}

/* Column header */
.pc-hdr2{padding:11px 13px 10px;flex-shrink:0}
.pc-hdr2-top{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-bottom:0;
}
.pc-hdr2-left{display:flex;align-items:center;gap:7px}
.pc-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.pc-title{font-size:13px;font-weight:800;letter-spacing:-.15px}
.pc-badge{
  color:#fff;font-size:11px;font-weight:700;
  padding:2px 8px;border-radius:99px;
}
.pc-pipeline-row{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:8px;padding:5px 9px;
  background:rgba(255,255,255,0.13);border:1px solid transparent;border-radius:8px;
}
.pc-pip-label{font-size:10px;font-weight:600;opacity:.75}
.pc-pip-val{font-size:12px;font-weight:800}

/* Cards container */
.pc-c{
  padding:8px 8px 12px;display:flex;flex-direction:column;gap:7px;
  flex:1;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  min-width:0;
  scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.06) transparent;
}
.pc-c::-webkit-scrollbar{width:3px}
.pc-c::-webkit-scrollbar-thumb{background:var(--border2);border-radius:99px}

/* Card v2 */
.pk2{
  background:var(--surface);border:1px solid var(--border);
  border-radius:11px;padding:11px 12px;cursor:pointer;
  transition:transform .16s cubic-bezier(.34,1.56,.64,1),box-shadow .16s ease;
  position:relative;
}
.pk2:hover{
  transform:translateY(-2px);
  box-shadow:0 5px 16px rgba(0,0,0,.11);
  border-color:var(--border2);
}
.pk2:active{transform:scale(.98)}

.pk2-top{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:6px;margin-bottom:5px;
}
.pk2-name{
  font-size:13px;font-weight:700;color:var(--text);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;
}
.pk2-avatar{
  width:26px;height:26px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:8.5px;font-weight:800;flex-shrink:0;
}
.pk2-company{
  font-size:11px;color:var(--text3);margin-bottom:5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  display:flex;align-items:center;gap:3px;
}
.pk2-tag{
  display:inline-flex;align-items:center;font-size:10.5px;font-weight:600;
  padding:2px 9px;border-radius:99px;border:1px solid transparent;
  margin-bottom:5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pk2-meta{
  display:flex;flex-direction:column;gap:3px;
  margin-top:6px;padding-top:6px;border-top:1px solid var(--border);
}
.pk2-meta-row{
  display:flex;align-items:center;gap:5px;
  font-size:11px;color:var(--text2);
}
.pk2-meta-row i{font-size:10px;flex-shrink:0}
.pk2-footer{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:7px;padding-top:6px;border-top:1px solid var(--border);
}
.pk2-time{font-size:10px;color:var(--text3)}
.pk2-tags{display:flex;gap:3px;flex-wrap:wrap}
.pk2-tag-sm{
  font-size:9.5px;padding:2px 6px;background:var(--surface2);
  border:1px solid var(--border);border-radius:99px;color:var(--text3);
}

/* Empty state */
.pc-empty{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:28px 12px;gap:7px;opacity:.5;
}
.pc-empty-icon{
  width:40px;height:40px;border-radius:12px;
  border:2px dashed;display:flex;align-items:center;justify-content:center;
}
.pc-empty-icon i{font-size:17px}
.pc-empty-txt{font-size:11.5px;font-weight:500}

/* ── MOBILE: pipeline scrolls horizontally, columns narrower ── */
@media(max-width:768px){
  .pipe-fields-bar{padding:7px 10px;gap:5px}
  .pipe-scroll{padding:8px 10px}
  .pipe2{grid-template-columns:repeat(6,210px);gap:8px}
  .pk:hover{transform:none;box-shadow:none}
  .pk:active{transform:scale(.98);background:var(--surface2)}
  .pc-c{max-height:60dvh}
}
/* ── END PIPELINE V2 ── */

.tasks-wrap{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.tk{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:18px;
  box-shadow:var(--shadow1);
}
.tk-title{
  font-family:'Syne',sans-serif;font-size:15px;font-weight:700;
  display:flex;align-items:center;gap:8px;margin-bottom:16px;
  color:var(--text);
}
.ti-item{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 12px;border-radius:var(--radius-sm);
  background:var(--surface2);border:1px solid var(--border);
  margin-bottom:7px;transition:all .15s;
  cursor:pointer;
}
.ti-item:hover{background:var(--surface3);border-color:var(--border2)}
.ti-item.done{opacity:.55}
.ti-cb{
  width:18px;height:18px;border-radius:5px;
  border:1.5px solid var(--border2);background:var(--surface);
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:10px;margin-top:1px;transition:all .15s;cursor:pointer;
}
.ti-item.done .ti-cb{background:var(--green);border-color:var(--green);color:#fff}


.drawer{
  position:fixed;right:-380px;top:0;bottom:0;
  width:380px;background:var(--surface);
  border-left:1px solid var(--border);
  box-shadow:var(--shadow3);
  z-index:250;transition:right .28s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;overflow:hidden;
}
.drawer.open{right:0}
.d-hdr{
  padding:16px 18px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  background:var(--surface);flex-shrink:0;
}
.d-hdr span{font-family:'Syne',sans-serif;font-size:15px;font-weight:700}
.dbody{padding:18px;overflow-y:auto;flex:1}
.dbody::-webkit-scrollbar{width:4px}
.dbody::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:99px}

.dh{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid var(--border);background:var(--surface2);flex-shrink:0}
.dh h2,.dh #d-name{font-family:'Syne',sans-serif;font-size:15px;font-weight:700;color:var(--text);margin:0}
.drawer-body{flex:1;overflow-y:auto;min-height:0;display:flex;flex-direction:column}
.df{display:flex;align-items:center;gap:8px;padding:12px 16px;border-top:1.5px solid var(--border2);background:var(--surface2);flex-shrink:0}
.btn-g{padding:0 16px;height:36px;border:1.5px solid var(--border2);background:transparent;border-radius:99px;color:var(--text2);font-size:13px;cursor:pointer;transition:all .15s;font-family:'Inter',sans-serif}
.btn-g:hover{background:var(--surface3);border-color:var(--border2)}
.btn-d{width:36px;height:36px;margin-left:auto;border:1.5px solid var(--danger-border, rgba(217,48,37,.24));background:var(--danger-bg, rgba(217,48,37,.10));border-radius:99px;color:var(--red);font-size:15px;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center}
.btn-d:hover{background:var(--red);color:#fff}
.ds{margin-bottom:18px}
.ds-t{
  font-size:9.5px;font-weight:600;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--text3);
  margin-bottom:10px;
}
.dvd{height:1px;background:var(--border);margin:16px 0}
.qa-row{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-bottom:4px}
.qa{
  display:flex;flex-direction:column;align-items:center;
  gap:5px;padding:9px 6px;border-radius:var(--radius-sm);
  background:var(--surface2);border:1px solid var(--border);
  cursor:pointer;transition:all .15s;font-size:10.5px;
  color:var(--text2);text-decoration:none;font-weight:400;
}
.qa:hover{background:var(--surface3);border-color:var(--border2);color:var(--text)}
.qa i{font-size:18px}
.qa.wa:hover{background:rgba(37,211,102,0.1);border-color:rgba(37,211,102,0.25);color:#1da851}
.qa.inv:hover{background:var(--warning-bg, rgba(217,119,6,.12));border-color:var(--warning-border, rgba(217,119,6,.24));color:var(--yellow)}


.ig{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.ii{display:flex;flex-direction:column;gap:4px}
.ii label{font-size:10px;font-weight:600;color:var(--text3);letter-spacing:.6px;text-transform:uppercase}
.ii input,.ii select,.ii textarea{
  background:var(--surface2);border:1.5px solid var(--border);
  border-radius:var(--radius-sm);padding:8px 10px;
  color:var(--text);font-size:13px;outline:none;
  transition:border-color .15s,box-shadow .15s;width:100%;
}
.ii input:focus,.ii select:focus,.ii textarea:focus{
  border-color:var(--accent-border);
  box-shadow:0 0 0 3px rgba(232,93,4,0.07);
  background:var(--surface);
}
.clr-wrap{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.clr{
  width:24px;height:24px;border-radius:7px;
  cursor:pointer;border:2px solid transparent;
  transition:all .15s;display:flex;align-items:center;justify-content:center;
  font-size:11px;color:#fff;
}
.clr:hover{transform:scale(1.15)}
.clr.sel{border-color:var(--text);box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--text)}


.tag-chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:99px;font-size:11.5px;
  font-weight:500;cursor:pointer;transition:all .15s;
}


.mov{
  position:fixed;inset:0;
  width:auto;
  max-width:none;
  max-height:none;
  overflow:visible;
  background:rgba(20,14,8,0.45);
  backdrop-filter:blur(4px);
  border:0;
  border-radius:0;
  box-shadow:none;
  animation:none;
  z-index:12000;display:none;
  align-items:center;justify-content:center;padding:20px;
}
.mov.open{display:flex}
.mov.open > .modal{
  opacity:1 !important;
  visibility:visible !important;
}
.modal{
  position:relative;
  inset:auto;
  opacity:1;
  visibility:visible;
  z-index:auto;
  background:var(--surface);border-radius:var(--radius);
  width:100%;max-width:580px;
  box-shadow:var(--shadow3);
  max-height:92dvh;overflow:hidden;
  display:flex;flex-direction:column;
  animation:modal-in .22s cubic-bezier(.34,1.56,.64,1);
}
.settings-modal{
  display:block;
  padding:22px;
  overflow-y:auto;
}

.settings-modal h2{
  font-family:'Syne',sans-serif;
  font-size:18px;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:18px;
}
@keyframes modal-in{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}
.amodal{max-width:680px}
.modal-hdr{
  padding:14px 18px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;background:var(--surface2);
}
.modal-hdr h2{
  font-family:'Syne',sans-serif;font-size:15px;
  font-weight:700;display:flex;align-items:center;gap:9px;
}
.modal-body{
  padding:16px;
  overflow-y:auto;
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:12px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.lead-mode-tabs{
  display:flex;
  gap:8px;
  padding:4px;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:14px;
}
.lead-mode-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  flex:1;
  height:38px;
  border:none;
  background:transparent;
  border-radius:11px;
  color:var(--text2);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
}
.lead-mode-btn.active{
  background:var(--surface);
  color:var(--accent);
  box-shadow:var(--shadow1);
}
.csv-box{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.csv-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--surface2);
}
.csv-head strong{
  display:block;
  font-size:14px;
  color:var(--text);
}
.csv-head p{
  margin-top:4px;
  font-size:12px;
  color:var(--text3);
  line-height:1.5;
}
.csv-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:0 14px;
  height:38px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  flex-shrink:0;
}
.csv-btn input{
  display:none;
}
.csv-meta{
  font-size:12px;
  color:var(--text3);
  padding:10px 12px;
  border:1px dashed var(--border);
  border-radius:var(--radius-sm);
  background:var(--surface);
}
.csv-preview-wrap{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.csv-preview-title{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--text3);
}
.csv-preview{
  max-height:280px;
  overflow:auto;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--surface);
}
.csv-table{
  width:100%;
  border-collapse:collapse;
}
.csv-table th,
.csv-table td{
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  text-align:left;
  font-size:12px;
}
.csv-table th{
  position:sticky;
  top:0;
  background:var(--surface2);
  z-index:1;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--text3);
}
.csv-table tr:last-child td{
  border-bottom:none;
}
.csv-pill{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 8px;
  border-radius:999px;
  background:var(--accent-bg);
  color:var(--accent);
  font-size:11px;
  font-weight:600;
}
.modal-ft{
  padding:12px 18px;border-top:1px solid var(--border);
  display:flex;justify-content:flex-end;gap:9px;
  background:var(--surface2);flex-shrink:0;
}
.fr{display:flex;gap:12px;width:100%}
.fr .fg{flex:1;display:flex;flex-direction:column;gap:4px}
.fr.full{flex-direction:column}
.fr .fg label{font-size:10px;font-weight:600;color:var(--text3);letter-spacing:.6px;text-transform:uppercase}
.fr .fg input,.fr .fg select,.fr .fg textarea{
  background:var(--surface2);border:1.5px solid var(--border);
  border-radius:var(--radius-sm);padding:9px 11px;
  color:var(--text);font-size:13px;outline:none;
  transition:border-color .15s,box-shadow .15s;width:100%;
}
.fr .fg input:focus,.fr .fg select:focus,.fr .fg textarea:focus{
  border-color:var(--accent-border);
  box-shadow:0 0 0 3px rgba(232,93,4,0.07);
  background:var(--surface);
}
.btn-c{
  padding:0 16px;height:36px;
  border:1.5px solid var(--border2);background:transparent;
  border-radius:99px;color:var(--text2);font-size:13px;
  cursor:pointer;transition:all .15s;font-weight:400;
}
.btn-c:hover{background:var(--surface2);border-color:var(--border2)}


.auto-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.acard{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:16px;
  display:flex;align-items:center;gap:12px;
  box-shadow:var(--shadow1);transition:all .18s;
}
.acard:hover{box-shadow:var(--shadow2);transform:translateY(-1px)}
.atag{
  font-size:9.5px;font-weight:600;letter-spacing:1px;
  text-transform:uppercase;padding:2px 8px;
  border-radius:99px;border:1px solid;margin-bottom:8px;
  display:inline-block;
}


.inv-modal{
  position:fixed;inset:0;
  background:rgba(20,14,8,0.5);
  backdrop-filter:blur(6px);
  z-index:450;display:none;
  align-items:flex-start;justify-content:center;
  overflow-y:auto;padding:20px;
}
.inv-modal.open{display:flex}
.inv-box{
  background:var(--surface);border-radius:var(--radius);
  width:100%;max-width:720px;margin:auto;
  box-shadow:var(--shadow3);overflow:hidden;
  animation:modal-in .22s cubic-bezier(.34,1.56,.64,1);
}


.toast{
  position:fixed;bottom:24px;left:50%;
  transform:translateX(-50%) translateY(100px);
  background:rgba(26,18,8,0.92);
  color:#fff;padding:11px 18px;border-radius:99px;
  font-size:13px;display:flex;align-items:center;gap:9px;
  z-index:9999;transition:transform .3s cubic-bezier(.34,1.56,.64,1);
  backdrop-filter:blur(8px);
  box-shadow:0 8px 28px rgba(0,0,0,0.25);
  white-space:nowrap;
}
.toast.show{transform:translateX(-50%) translateY(0)}


.wa-wrap{display:flex;height:100%;gap:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow1)}
.wa-contacts{width:280px;border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;background:var(--surface)}
.wa-contacts-hdr{padding:14px 14px 10px;border-bottom:1px solid var(--border);background:var(--surface)}
.wa-contacts-search{display:flex;align-items:center;gap:7px;background:var(--surface2);border:1px solid var(--border);border-radius:99px;padding:7px 12px;margin-top:8px;transition:all .15s}
.wa-contacts-search:focus-within{border-color:var(--accent-border);background:var(--surface)}
.wa-contacts-search input{background:transparent;border:none;outline:none;font-size:12px;color:var(--text);width:100%}
.wa-contact-list{flex:1;overflow-y:auto}
.wa-contact-item,.wci{display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;border-bottom:1px solid var(--border);transition:background .12s;position:relative}
.wa-contact-item:hover,.wci:hover{background:var(--surface2)}
.wa-contact-item.active,.wci.active{background:rgba(37,211,102,0.06);border-right:2px solid #1da851}
.wci-av{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;box-shadow:var(--shadow1)}
.wci-info{flex:1;min-width:0}
.wci-name{font-size:13px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wci-last{font-size:11px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.wci-time{font-size:10px;color:var(--text3);position:absolute;top:11px;right:12px}
.wci-unread{position:absolute;bottom:11px;right:12px;background:#1da851;color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:99px;min-width:16px;text-align:center}
.wa-chat{flex:1;display:flex;flex-direction:column;background:#ece5dd}
.wa-chat-hdr{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0}
.wa-chat-hdr-info{flex:1;min-width:0}
.wa-chat-hdr-name{font-size:14px;font-weight:600;line-height:1.2}
.wa-chat-actions{display:flex;gap:5px}
.wa-chat-body{flex:1;overflow-y:auto;padding:10px 14px 6px;display:flex;flex-direction:column;gap:2px}

/* Bubble row wrappers */
.wa-bubble-row{display:flex;padding:1px 0}
.wa-bubble-row--out{justify-content:flex-end;padding-right:2px}
.wa-bubble-row--in{justify-content:flex-start;padding-left:2px}

/* Base bubble */
.wa-bubble{
  position:relative;
  max-width:min(65%,480px);
  width:fit-content;
  padding:6px 8px 4px 9px;
  font-size:13.5px;
  line-height:1.45;
  word-break:break-word;
  overflow-wrap:anywhere;
}

/* Outgoing (sent) bubble */
.wa-bubble--out{
  background:#d9fdd3;
  color:#111b21;
  border-radius:12px 12px 3px 12px;
  box-shadow:0 1px 1px rgba(11,20,26,.12);
}
/* Tail for outgoing */
.wa-bubble--out::after{
  content:'';
  position:absolute;
  bottom:0;
  right:-8px;
  width:0;height:0;
  border-style:solid;
  border-width:0 0 10px 10px;
  border-color:transparent transparent #d9fdd3 transparent;
}

/* Incoming bubble */
.wa-bubble--in{
  background:#fff;
  color:#111b21;
  border-radius:12px 12px 12px 3px;
  box-shadow:0 1px 1px rgba(11,20,26,.1);
}
/* Tail for incoming */
.wa-bubble--in::before{
  content:'';
  position:absolute;
  bottom:0;
  left:-8px;
  width:0;height:0;
  border-style:solid;
  border-width:0 10px 10px 0;
  border-color:transparent #fff transparent transparent;
}

/* Message text */
.wa-bubble-text{white-space:pre-wrap;padding-right:2px}

/* Meta row (time + ticks) */
.wa-bubble-meta{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:3px;
  margin-top:2px;
  float:right;
  margin-left:8px;
  position:relative;
  bottom:-1px;
}
.wa-bubble-time{font-size:11px;color:#667781;line-height:1}
.wa-tick{flex-shrink:0;display:inline-flex;vertical-align:middle}

/* Media */
.wa-bubble-media{margin-bottom:4px}
.wa-bubble-file{display:flex;align-items:center;gap:6px;font-size:12.5px;padding:4px 0}
.wa-bubble-file a{color:#007bff;text-decoration:none}

/* Date separator */
.wa-date-sep{align-self:center;background:rgba(255,255,255,0.82);border-radius:99px;padding:3px 13px;font-size:11px;color:#54656f;backdrop-filter:blur(4px);margin:6px 0;box-shadow:0 1px 2px rgba(0,0,0,0.08)}
.wa-empty-chat{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--text3)}
.wa-chat-input{
  padding:8px 12px;
  padding-bottom:max(8px,env(safe-area-inset-bottom));
  background:var(--surface);border-top:1px solid var(--border);
  display:flex;align-items:flex-end;gap:8px;
  flex-shrink:0;position:relative;z-index:2;
}

body.wa-chat-open .mob-nav,
body.wa-chat-open .mob-fab{ display:none !important; }
.wa-input-box{flex:1;background:var(--surface2);border:1.5px solid var(--border);border-radius:22px;padding:9px 14px;font-size:13px;color:var(--text);outline:none;resize:none;max-height:100px;line-height:1.5;transition:all .15s}
.wa-input-box:focus{border-color:rgba(37,211,102,0.4);background:var(--surface)}
.wa-send-fab{width:40px;height:40px;border-radius:50%;background:#1da851;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;transition:all .15s;box-shadow:0 2px 8px rgba(29,168,81,0.35)}
.wa-send-fab:hover{background:#178a43;box-shadow:0 4px 14px rgba(29,168,81,0.4);transform:scale(1.05)}
.wa-tpl-chip{padding:5px 12px;border-radius:99px;border:1px solid var(--border);background:transparent;font-size:11.5px;color:var(--text2);cursor:pointer;font-family:'Inter',sans-serif;transition:all .15s}
.wa-tpl-chip:hover{background:var(--success-bg, rgba(31,169,113,.12));border-color:var(--success-border, rgba(31,169,113,.24));color:var(--green)}
.wa-chat-pane{width:100%;height:100%;display:flex;flex-direction:column;min-height:0;background:#efe7dc}
.wa-chat-pane .wa-chat-hdr{padding:10px 14px;background:#fbfcfb}
.wa-chat-pane .wa-chat-body{
  padding:18px;
  background:
    linear-gradient(rgba(239,231,220,.94),rgba(239,231,220,.94)),
    repeating-linear-gradient(45deg,rgba(20,80,50,.08) 0 1px,transparent 1px 14px);
}
.wa-chat-pane .wa-bubble--out,
.wa-chat-pane .wa-bubble--in{
  max-width:min(74%,620px);
  overflow-wrap:anywhere;
}
.wa-composer{
  position:relative;
  flex-shrink:0;
  background:#f8faf9;
  border-top:1px solid var(--border);
  box-shadow:0 -8px 22px rgba(15,23,42,.05);
}
.wa-composer .wa-chat-input{
  border-top:0;
  background:transparent;
  padding:10px 12px;
  align-items:center;
}
.wa-tool-btn{
  width:38px;
  height:38px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text2);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex-shrink:0;
  font-size:18px;
  transition:all .15s;
}
.wa-tool-btn:hover,
.wa-tool-btn.active{
  color:#14803d;
  border-color:rgba(20,128,61,.26);
  background:#eafaf0;
}
.wa-composer .wa-input-box{
  min-height:40px;
  max-height:118px;
  border-radius:12px;
  padding:10px 12px;
  background:#fff;
}
.wa-composer .wa-send-fab{
  width:40px;
  height:40px;
  border-radius:12px;
}
.wa-attachment-meta{
  display:none;
  margin:8px 12px 0;
  padding:7px 10px;
  border:1px solid rgba(20,128,61,.18);
  border-radius:10px;
  background:#effdf4;
  color:#166534;
  font-size:12px;
  max-width:calc(100% - 24px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.wa-attachment-meta:not(:empty){display:block}
.wa-chat-template-panel{
  display:none;
  position:absolute;
  left:12px;
  right:12px;
  bottom:64px;
  max-height:min(340px,46vh);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 18px 48px rgba(15,23,42,.18);
  overflow:hidden;
  z-index:8;
}
.wa-chat-template-panel.open{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.wa-chat-template-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  font-size:13px;
  font-weight:700;
  color:var(--text);
}
.wa-chat-template-head span{display:flex;align-items:center;gap:7px}
.wa-chat-template-head button{
  width:30px;
  height:30px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--surface2);
  color:var(--text2);
  cursor:pointer;
}
.wa-chat-template-list{
  min-height:0;
  overflow:auto;
  padding:8px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:8px;
}
.wa-chat-template-item{
  border:1px solid var(--border);
  background:var(--surface2);
  border-radius:10px;
  padding:10px;
  text-align:left;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  cursor:pointer;
  color:var(--text);
  font-family:'Inter',sans-serif;
}
.wa-chat-template-item:hover{border-color:rgba(20,128,61,.24);background:#f1fbf5}
.wa-chat-template-item span{min-width:0;display:flex;flex-direction:column;gap:2px}
.wa-chat-template-item b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-chat-template-item small{font-size:11px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-chat-template-empty{padding:18px;text-align:center;color:var(--text3);font-size:12.5px;grid-column:1/-1}
.wa-chat-vars{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  padding:9px 10px 10px;
  border-top:1px solid var(--border);
  background:var(--surface);
}
.wa-tab{display:flex;align-items:center;gap:5px;padding:9px 13px;font-size:12.5px;color:var(--text3);cursor:pointer;border-bottom:2px solid transparent;transition:all .16s;user-select:none;white-space:nowrap;flex-shrink:0}
.wa-tab:hover{color:var(--text)}
.wa-tab.active{color:var(--green);border-bottom-color:var(--green);font-weight:500}


.bc-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow1)}
.bc-title{font-family:'Syne',sans-serif;font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px;margin-bottom:14px}
.bc-filter-chip{padding:5px 13px;border-radius:99px;border:1.5px solid var(--border);background:transparent;font-size:12px;color:var(--text3);cursor:pointer;font-family:'Inter',sans-serif;transition:all .15s}
.bc-filter-chip:hover{border-color:var(--success-border, rgba(31,169,113,.24));color:var(--green)}
.bc-filter-chip.sel{background:var(--green);border-color:var(--green);color:#fff}
.bc-lead-check{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--radius-sm);border:1.5px solid var(--border);background:var(--surface2);cursor:pointer;transition:all .15s}
.bc-lead-check:hover{border-color:var(--success-border, rgba(31,169,113,.24))}
.bc-lead-check.checked{background:var(--success-bg, rgba(31,169,113,.12));border-color:var(--success-border, rgba(31,169,113,.24))}
.bc-chk{width:17px;height:17px;border-radius:5px;border:1.5px solid var(--border2);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;background:white}
.bc-lead-check.checked .bc-chk{background:var(--green);border-color:var(--green);color:#fff}
.bc-leads-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;max-height:240px;overflow-y:auto;margin-bottom:14px}
.bc-msg-area{width:100%;background:var(--surface2);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;color:var(--text);font-size:13px;font-family:'Inter',sans-serif;outline:none;resize:vertical;min-height:90px;transition:all .15s}
.bc-msg-area:focus{border-color:var(--success-border, rgba(31,169,113,.24));box-shadow:0 0 0 3px rgba(26,168,81,0.07)}
.bc-send-bar{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.bc-history-item{display:flex;align-items:flex-start;gap:11px;padding:11px 0;border-bottom:1px solid var(--border)}
.bc-history-item:last-child{border-bottom:none}
.bc-hist-icon{width:34px;height:34px;border-radius:10px;background:var(--success-bg, rgba(31,169,113,.12));color:var(--green);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.bc-stat-row{display:flex;gap:12px;margin-top:4px}
.bc-stat{font-size:11px;color:var(--text3)}


.ws-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow1)}
.ws-title{font-family:'Syne',sans-serif;font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px;margin-bottom:14px}
.ws-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.ws-field{display:flex;flex-direction:column;gap:4px}
.ws-field label{font-size:10px;font-weight:600;color:var(--text3);letter-spacing:.6px;text-transform:uppercase}
.ws-field input,.ws-field select{background:var(--surface2);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:8px 11px;color:var(--text);font-size:13px;font-family:'Inter',sans-serif;outline:none;transition:all .15s;width:100%}
.ws-field input:focus,.ws-field select:focus{border-color:var(--accent-border);box-shadow:0 0 0 3px rgba(232,93,4,0.07)}
.ws-info-box{background:var(--warning-bg, rgba(217,119,6,.12));border:1px solid var(--warning-border, rgba(217,119,6,.24));border-radius:var(--radius-sm);padding:11px 13px;font-size:12px;color:var(--yellow);line-height:1.7;margin-bottom:14px}
.tpl-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tpl2-card{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px}
.tpl2-card input{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:7px;padding:6px 9px;font-size:12px;color:var(--text);margin-bottom:6px;outline:none;font-family:'Inter',sans-serif;transition:border-color .15s}
.tpl2-card input:focus{border-color:var(--accent-border)}
.tpl2-card textarea{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:7px;padding:7px 9px;font-size:12px;color:var(--text);resize:vertical;outline:none;font-family:'Inter',sans-serif;line-height:1.5;transition:border-color .15s}
.tpl2-card textarea:focus{border-color:var(--accent-border)}
.tpl2-save{padding:4px 12px;background:var(--accent-bg);border:1px solid var(--accent-border);border-radius:99px;color:var(--accent2);font-size:11.5px;cursor:pointer;font-family:'Inter',sans-serif;display:flex;align-items:center;gap:4px;transition:all .15s}
.tpl2-save:hover{background:var(--accent);color:#fff}
.btn-wa-save{display:flex;align-items:center;gap:6px;padding:0 16px;height:36px;background:var(--green);color:#fff;border:none;border-radius:99px;font-size:13px;font-weight:500;cursor:pointer;font-family:'Inter',sans-serif;transition:all .15s;box-shadow:0 2px 8px rgba(26,122,66,0.28)}
.btn-wa-save:hover{background:#166636;box-shadow:0 4px 14px rgba(26,122,66,0.35);transform:translateY(-1px)}
.btn-wa-test{display:flex;align-items:center;gap:6px;padding:0 14px;height:36px;background:var(--surface2);color:var(--text2);border:1.5px solid var(--border2);border-radius:99px;font-size:13px;cursor:pointer;font-family:'Inter',sans-serif;transition:all .15s}
.btn-wa-test:hover{border-color:var(--success-border, rgba(31,169,113,.24));color:var(--green);background:var(--success-bg, rgba(31,169,113,.12))}
.wa-status-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:99px;font-size:11px;font-weight:500;border:1px solid}
.wa-conn{background:var(--success-bg, rgba(31,169,113,.12));color:var(--green);border-color:var(--success-border, rgba(31,169,113,.24))}
.wa-disc{background:var(--danger-bg, rgba(217,48,37,.10));color:var(--red);border-color:var(--danger-border, rgba(217,48,37,.24))}
.wa-btns{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wa-form{display:grid;grid-template-columns:1fr 1fr;gap:10px}


.wa-send-modal{position:fixed;inset:0;background:rgba(20,14,8,0.5);backdrop-filter:blur(4px);z-index:500;display:none;align-items:center;justify-content:center;padding:16px}
.wa-send-modal.open{display:flex}
.wa-send-box{background:var(--surface);border-radius:var(--radius);width:100%;max-width:460px;box-shadow:var(--shadow3);overflow:hidden;display:flex;flex-direction:column;animation:modal-in .22s cubic-bezier(.34,1.56,.64,1)}
.wsb-head{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--border);background:var(--success-bg, rgba(31,169,113,.12))}
.wsb-head h3{font-family:'Syne',sans-serif;font-size:15px;font-weight:700;color:var(--green);flex:1}
.wsb-body{padding:16px 18px;display:flex;flex-direction:column;gap:13px}
.wsb-to{display:flex;align-items:center;gap:10px;padding:10px 13px;background:var(--surface2);border:1.5px solid var(--border);border-radius:var(--radius)}
.wname{font-size:13px;font-weight:600}
.wnum{font-size:11.5px;color:var(--text3);margin-top:2px}
.wa-tpl-sel{display:flex;flex-wrap:wrap;gap:5px}
.wa-tpl-sel button{padding:4px 11px;border-radius:99px;font-size:11.5px;border:1.5px solid var(--border);background:transparent;color:var(--text2);cursor:pointer;font-family:'Inter',sans-serif;transition:all .15s}
.wa-tpl-sel button:hover,.wa-tpl-sel button.active{border-color:var(--success-border, rgba(31,169,113,.24));color:var(--green);background:var(--success-bg, rgba(31,169,113,.12))}
.wsb-foot{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-top:1px solid var(--border);background:var(--surface2)}
.btn-wa-send{display:inline-flex;align-items:center;gap:6px;padding:0 18px;height:36px;background:var(--green);color:#fff;border:none;border-radius:99px;font-size:13px;font-weight:500;cursor:pointer;font-family:'Inter',sans-serif;transition:all .15s;box-shadow:0 2px 8px rgba(26,122,66,0.28)}
.btn-wa-send:hover{background:#166636;transform:translateY(-1px)}
.wa-char{font-size:11px;color:var(--text3)}
.wa-msg-area{width:100%;background:var(--surface2);border:1.5px solid var(--border);border-radius:var(--radius);padding:10px 13px;font-size:13px;color:var(--text);font-family:'Inter',sans-serif;outline:none;resize:vertical;transition:all .15s}
.wa-msg-area:focus{border-color:var(--success-border, rgba(31,169,113,.24));box-shadow:0 0 0 3px rgba(26,168,81,0.07);background:var(--surface)}


.divv{height:1px;background:var(--border);margin:14px 0}
.empty{text-align:center;padding:52px 20px;color:var(--text3)}
.empty i{font-size:44px;margin-bottom:14px;display:block;opacity:.3}
.empty p{font-size:13px;line-height:1.6;color:var(--text3)}
.mt{display:flex;gap:5px}
.mt-btn{padding:5px 12px;border-radius:99px;font-size:11.5px;border:1.5px solid var(--border);background:transparent;color:var(--text3);cursor:pointer;font-family:'Inter',sans-serif;transition:all .15s}
.mt-btn:hover{border-color:var(--border2);color:var(--text2)}
.mt-btn.active{background:var(--surface2);border-color:var(--border2);color:var(--text)}
.mt-call{color:var(--blue)}.mt-zoom{color:var(--purple, #7c3aed)}.mt-visit{color:var(--yellow)}
.av-sm{width:22px;height:22px;border-radius:7px;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}

.mob-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:rgba(255,255,255,0.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--border);z-index:200;padding:6px 4px;padding-bottom:max(6px,env(safe-area-inset-bottom));box-shadow:0 -4px 20px rgba(0,0,0,0.06)}
.mob-nav-inner{display:flex;justify-content:space-around;align-items:center}
.mn-item{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 12px;border-radius:var(--radius-sm);cursor:pointer;color:var(--text3);font-size:9.5px;font-weight:500;min-width:52px;transition:all .15s;position:relative;border:none;background:transparent;font-family:'Inter',sans-serif}
.mn-item i{font-size:22px;transition:all .15s}
.mn-item.active{color:var(--accent)}
.mn-item.active i{color:var(--accent);transform:translateY(-1px)}
.mn-badge{position:absolute;top:3px;right:6px;background:var(--accent);color:#fff;font-size:9px;font-weight:700;padding:1px 5px;border-radius:99px;min-width:16px;text-align:center;border:2px solid var(--surface)}
.mob-fab{display:none;position:fixed;bottom:80px;right:18px;width:54px;height:54px;border-radius:50%;background:var(--accent);color:#fff;border:none;font-size:24px;cursor:pointer;box-shadow:0 4px 18px rgba(232,93,4,0.42);z-index:190;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.34,1.56,.64,1)}
.mob-fab:active{transform:scale(.92)}
.sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:299;backdrop-filter:blur(2px)}
.sb-overlay.open{display:block}

/* Auth + sidebar cleanup overrides */
#app-root{
  display:none;
  width:100%;
  height:100vh;
  overflow:hidden;
}

.login-screen{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:
    radial-gradient(circle at top, rgba(232,93,4,0.12), transparent 28%),
    var(--bg);
}

.login-card{
  width:100%;
  max-width:420px;
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:24px;
  box-shadow:var(--shadow3);
  padding:30px;
}

.login-brand{
  text-align:center;
  margin-bottom:24px;
}

.login-logo{
  width:58px;
  height:58px;
  border-radius:18px;
  margin:0 auto 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  color:#fff;
  background:linear-gradient(135deg,#e85d04,#ff8c42);
  box-shadow:0 10px 28px rgba(232,93,4,0.35);
}

.login-name{
  font-family:'Syne',sans-serif;
  font-size:23px;
  font-weight:700;
  color:var(--text);
  line-height:1.15;
}

.login-sub{
  margin-top:4px;
  font-size:12px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--text3);
}

.login-error{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border:1px solid rgba(217,48,37,0.22);
  background:rgba(217,48,37,0.08);
  color:var(--red);
  border-radius:14px;
  margin-bottom:14px;
  font-size:12.5px;
}

.login-label{
  display:block;
  margin:12px 0 6px;
  font-size:12px;
  font-weight:600;
  color:var(--text2);
}

.login-field{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border:1.5px solid var(--border);
  background:var(--surface2);
  border-radius:14px;
}

.login-field:focus-within{
  border-color:var(--accent-border);
  background:var(--surface);
  box-shadow:0 0 0 4px rgba(232,93,4,0.08);
}

.login-field i{
  color:var(--text3);
  font-size:16px;
  flex-shrink:0;
}

.login-field input{
  width:100%;
  border:none;
  background:transparent;
  outline:none;
  color:var(--text);
  font-size:13.5px;
  font-family:'Inter',sans-serif;
}

.login-submit{
  width:100%;
  height:44px;
  margin-top:18px;
  border:none;
  border-radius:14px;
  background:linear-gradient(135deg,var(--accent),#d94e00);
  color:#fff;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(232,93,4,0.25);
}

.login-otp-btn{
  width:100%;
  height:44px;
  margin-top:18px;
  border:none;
  border-radius:14px;
  background:linear-gradient(135deg,var(--accent),#d94e00);
  color:#fff;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(232,93,4,0.25);
}
.login-quick{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid var(--border);
}

.login-quick-label{
  font-size:11px;
  font-weight:600;
  color:var(--text3);
  margin-bottom:8px;
}

.login-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.login-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--border);
  background:var(--surface2);
  color:var(--text2);
  border-radius:999px;
  padding:6px 10px;
  font-size:11.5px;
  cursor:pointer;
}

.login-chip-av{
  width:18px;
  height:18px;
  border-radius:5px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:8px;
  font-weight:700;
  flex-shrink:0;
}

.sb{
  width:260px;
}

.sb .ni{
  justify-content:flex-start;
  gap:0;
  padding:10px 12px;
  min-height:42px;
}

.sb .ni-l{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:1;
}

.sb .ni-tx{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  line-height:1.2;
}

.sb .nb{
  margin-left:auto;
}

.sb .upill{
  align-items:center;
}

.sb .uname{
  font-size:13px;
  line-height:1.2;
}

.sb .urole{
  font-size:11px;
  color:rgba(255,255,255,0.55);
}


.mob-lead-list{display:none;flex-direction:column;background:var(--bg);min-height:100%;width:100%}
.mob-lead-row:active{background:var(--surface2) !important}
.desk-lead-table{display:block}

.date-filter-btn{
  padding:3px 10px;
  border-radius:99px;
  font-size:11.5px;
  font-weight:500;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text3);
  cursor:pointer;
  font-family:'Inter',sans-serif;
  transition:all .14s;
  white-space:nowrap;
}
.date-filter-btn:hover{
  border-color:var(--accent-border);
  color:var(--accent);
  background:var(--accent-bg);
}
.date-filter-btn.active{
  background:var(--accent-bg);
  color:var(--accent);
  border-color:var(--accent-border);
  font-weight:700;
}
.date-filter-clear{
  background:var(--danger-bg, rgba(217,48,37,.10));
  border-color:var(--danger-border, rgba(217,48,37,.24));
  color:var(--red);
  display:inline-flex;
  align-items:center;
  gap:3px;
}


.sw{position:relative}
.sw input{width:100%;background:transparent;border:none;outline:none;font-size:13px;color:var(--text);font-family:'Inter',sans-serif}
.sw input::placeholder{color:var(--text3)}


@media(max-width:1200px){
  .sb{width:230px}
  .con{padding:16px 18px;overflow:hidden}
  .sc{padding:13px 14px}
  .sn{font-size:20px}
  .cg{grid-template-columns:repeat(3,1fr)}
  .wa-contacts{width:240px}
}


@media(max-width:960px){
  .sb{width:215px}
  .topbar{padding:0 16px}
  .con{padding:14px 16px;overflow:hidden}
  .sr{grid-template-columns:repeat(3,1fr)}
  .sc:nth-child(4),.sc:nth-child(5){display:none}
  .sn{font-size:19px}
  .ct th:nth-child(5),.ct td:nth-child(5){display:none}
  .cg{grid-template-columns:repeat(2,1fr)}
  .tasks-wrap{grid-template-columns:1fr}
  .drawer{width:340px;right:-340px}
  .wa-contacts{width:210px}
  .modal,.amodal{max-width:95vw}
}


@media(max-width:768px){
  .sb{position:fixed;left:-270px;top:0;bottom:0;width:270px;z-index:300;transition:left .28s cubic-bezier(.4,0,.2,1)}
  .sb.open{left:0;box-shadow:var(--shadow3)}
  .ham{display:flex}
  .mob-nav{display:block}
  .mob-fab{display:flex}
  .topbar{padding:0 12px;height:52px}
  .tb-l h1{font-size:15px}
  .tb-l p{display:none}
  .tb-r .sw{width:140px}
  .tb-r .sw:focus-within{width:170px}
  .btnp{display:none}
  #tb-clock{display:none !important}
  .sr{grid-template-columns:repeat(2,1fr)}
  .sc:nth-child(3){grid-column:1/-1;border-right:none}
  .sc:nth-child(4),.sc:nth-child(5){display:none}
  .sc{padding:8px 10px}
  .sn{font-size:16px}
  .sc-icon{width:22px;height:22px;font-size:11px;margin-bottom:4px}
  .sl{font-size:10px;margin-top:3px}
  .con{padding:0;overflow:hidden}
  .fr2{flex-direction:column;align-items:flex-start;padding:0 10px}
  .vtg{display:none}
  .pills{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px;width:100%}
  .pills::-webkit-scrollbar{display:none}
  .tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .ct{min-width:460px}
  .ct th:nth-child(4),.ct td:nth-child(4),
  .ct th:nth-child(5),.ct td:nth-child(5),
  .ct th:nth-child(7),.ct td:nth-child(7){display:none}
  .cg{grid-template-columns:1fr}
  .tasks-wrap{grid-template-columns:1fr}
  .drawer{width:100vw;right:-100vw;border-radius:0}
  .mov{align-items:flex-end;padding:0}
  .modal{max-width:100%;border-radius:20px 20px 0 0;max-height:93dvh}
  .amodal{max-width:100%;border-radius:20px 20px 0 0;max-height:96dvh}
  .modal-ft{padding-bottom:max(12px,env(safe-area-inset-bottom))}
  .fr{flex-direction:column}
  .ig{grid-template-columns:1fr}
  .ws-grid,.tpl-grid2,.wa-form{grid-template-columns:1fr !important}
  .bc-leads-grid{grid-template-columns:1fr !important}
  .bc-filter-row{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;padding-bottom:2px}
  .bc-filter-row::-webkit-scrollbar{display:none}
  #notif-drop{width:calc(100vw - 24px) !important;right:-40px !important}
  .inv-box{border-radius:20px 20px 0 0}
  .prop-list-col{width:100% !important;max-height:220px !important;border-right:none !important;border-bottom:1px solid var(--border)}
  [style*="height:calc(100vh - 200px)"]{height:calc(100dvh - 160px) !important}
  .wa-left-panel{width:100% !important;border-right:none !important}

  .pay-grid{grid-template-columns:1fr !important}

  .mob-lead-list{display:flex !important}
  .desk-lead-table{display:none !important}

  .pipe{min-width:520px}

  .ni{min-height:44px}
  .wa-tab,.tab{min-height:44px}

  [style*="grid-template-columns:1fr 300px"]{grid-template-columns:1fr !important}
  [style*="grid-template-columns:340px"]{grid-template-columns:1fr !important}
  [style*="grid-template-columns:1fr 360px"]{grid-template-columns:1fr !important}
  [style*="grid-template-columns:1fr 320px"]{grid-template-columns:1fr !important}
}


@media(max-width:480px){
  .topbar{padding:0 11px;height:50px}
  .tb-l h1{font-size:14.5px}
  .sw{width:130px}
  .sr{grid-template-columns:repeat(2,1fr)}
  .sc:nth-child(3){grid-column:auto}
  .sc{padding:7px 9px}
  .sc-icon{display:none}
  .sn{font-size:15px}
  .sl{font-size:10px}
  .con{padding:9px;padding-bottom:0;overflow:hidden}
  .ct{min-width:380px}
  .ct th:nth-child(3),.ct td:nth-child(3){display:none}
  .ct td,.ct th{padding:9px 8px;font-size:12px}
  .av{width:28px;height:28px;font-size:10px;border-radius:8px}
  .ln{font-size:12px}
  .lsv{display:none}
  .wa-bubble--out,.wa-bubble--in{max-width:90%}
  .wa-chat-pane .wa-chat-body{padding:12px 10px}
  .wa-chat-pane .wa-bubble--out,.wa-chat-pane .wa-bubble--in{max-width:88%}
  .wa-composer .wa-chat-input{gap:6px;padding:8px}
  .wa-tool-btn{width:34px;height:34px;border-radius:9px;font-size:16px}
  .wa-composer .wa-send-fab{width:36px;height:36px;border-radius:10px}
  .wa-composer .wa-input-box{min-height:36px;padding:8px 10px;font-size:12.5px}
  .wa-chat-template-panel{left:8px;right:8px;bottom:54px;max-height:52vh}
  .wa-chat-template-list{grid-template-columns:1fr}
  .mn-item{font-size:8px;min-width:44px;padding:4px 6px}
  .mn-item i{font-size:19px}
  .wa-tab{padding:7px 10px;font-size:11px;gap:3px}
  .wa-tab i{font-size:13px}

  .wa-tpl-panel{flex-direction:column!important}
  .wa-tpl-panel > div:first-child{width:100%!important;border-right:none!important;border-bottom:1px solid var(--border);max-height:220px}

  .wf-outer{flex-direction:column!important}
  .wf-flow-list{width:100%!important;max-height:130px!important;border-right:none!important;border-bottom:1px solid var(--border)!important}
  .wf-flow-list > div:nth-child(2){flex-direction:row!important;overflow-x:auto!important;overflow-y:hidden!important;padding:6px!important;gap:6px!important;display:flex!important}

  .wf-guide{display:none!important}
  .wf-grid > div:last-child{display:none!important}
  .wf-grid{grid-template-columns:1fr!important;padding:8px!important}

  .wa-tabs-row{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .wa-tabs-row::-webkit-scrollbar{display:none}
  .mob-fab{width:50px;height:50px;font-size:22px;bottom:76px;right:14px}
  .modal-hdr{padding:13px 15px}
  .modal-body{padding:13px}
  .modal-hdr h2{font-size:13.5px}
}


@media(min-width:1440px){
  .sb{width:256px}
  .sc{padding:16px 22px}
  .sn{font-size:24px}
  .cg{grid-template-columns:repeat(4,1fr)}
  .wa-contacts{width:290px}
  .topbar{padding:0 28px}
}


@media(min-width:1920px){
  .sb{width:272px}
  .cg{grid-template-columns:repeat(5,1fr)}
  .sr{grid-template-columns:repeat(6,1fr)}
}


@media(hover:none){
  .ar{opacity:1 !important}
  .lkc:hover{transform:none !important;box-shadow:var(--shadow1) !important}
  .lkc:hover::before{background:transparent !important}
  .pk:hover{transform:none !important;box-shadow:var(--shadow1) !important}
  .step-actions{opacity:1 !important}
  .btnp:hover,.btn-wa-save:hover,.wa-send-fab:hover{transform:none !important}
  .ni:hover{transform:none !important}

  .ni{min-height:44px}
  .wa-tab,.tab{min-height:44px}
}


@media(max-width:768px){

  #va [style*="overflow-y:auto"],
  #va [style*="overflow-y:scroll"]{
    padding-bottom:max(72px,calc(72px + env(safe-area-inset-bottom))) !important;
  }

  .wa-chat-body{
    padding-bottom:8px !important;
  }

  .wa-chat-input{
    position:relative;
    z-index:10;
  }
}
  .mob-nav{padding-bottom:max(8px,env(safe-area-inset-bottom)) !important}
  .drawer{padding-bottom:env(safe-area-inset-bottom)}
  .modal-ft{padding-bottom:max(12px,env(safe-area-inset-bottom))}
.tasks-wrap{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.task-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow1)}
.panel-hdr{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border);background:var(--surface2);border-radius:var(--radius) var(--radius) 0 0;gap:8px;min-height:50px}
.panel-title{font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:7px;color:var(--text);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.task-list{padding:10px;display:flex;flex-direction:column;gap:6px;min-height:60px}
.task-item{display:flex;align-items:flex-start;gap:10px;padding:12px;border-radius:var(--radius-sm);background:var(--surface2);border:1px solid var(--border);transition:all .15s;cursor:pointer;min-height:44px}
.task-item:hover{background:var(--surface3);border-color:var(--border2)}
.task-item.done{opacity:.55}
.task-cb{width:20px;height:20px;border-radius:6px;border:2px solid var(--border2);background:var(--surface);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;cursor:pointer;transition:all .15s;margin-top:1px}
.task-cb.chk{background:var(--green);border-color:var(--green);color:#fff}
.task-txt{flex:1;min-width:0}
.task-name{font-size:13px;font-weight:500;color:var(--text);line-height:1.3}
.task-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:5px;font-size:11px;color:var(--text3)}
.task-meta span{display:flex;align-items:center;gap:3px}
.task-pri{padding:2px 7px;border-radius:99px;font-size:10.5px;font-weight:500;border:1px solid}
.pri-high{color:var(--red);background:var(--danger-bg, rgba(217,48,37,.10));border-color:var(--danger-border, rgba(217,48,37,.24))}
.pri-med{color:var(--yellow);background:var(--warning-bg, rgba(217,119,6,.12));border-color:var(--warning-border, rgba(217,119,6,.24))}
.pri-low{color:var(--green);background:var(--success-bg, rgba(31,169,113,.12));border-color:var(--success-border, rgba(31,169,113,.24))}
.task-add-btn{display:flex;align-items:center;gap:5px;padding:7px 14px;font-size:12.5px;flex-shrink:0;white-space:nowrap}
@media(max-width:480px){
  .task-add-btn .btn-lbl{display:none}
  .task-add-btn{padding:8px;width:34px;height:34px;border-radius:9px;justify-content:center}
}
.task-del{width:32px;height:32px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--text3);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;transition:all .15s;-webkit-tap-highlight-color:transparent}
.task-del:hover{background:var(--danger-bg, rgba(217,48,37,.10));border-color:var(--danger-border, rgba(217,48,37,.24));color:var(--red)}


.meet-item{display:flex;align-items:flex-start;gap:12px;padding:12px;border-radius:var(--radius-sm);background:var(--surface2);border:1px solid var(--border);transition:all .15s}
.meet-item:hover{background:var(--surface3);border-color:var(--border2)}
.meet-time{text-align:center;flex-shrink:0;min-width:44px}
.mt-time{font-family:'Syne',sans-serif;font-size:15px;font-weight:700;color:var(--purple, #7c3aed)}
.mt-date{font-size:10px;color:var(--text3);margin-top:2px}
.meet-info{flex:1;min-width:0}
.meet-title{font-size:13px;font-weight:500;color:var(--text);line-height:1.3}
.meet-type{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:99px;font-size:10.5px;font-weight:500;border:1px solid}
.mt-call{color:var(--blue);background:var(--info-bg, rgba(37,99,235,.10));border-color:var(--info-border, rgba(37,99,235,.24))}
.mt-zoom{color:var(--purple, #7c3aed);background:var(--purple-bg);border-color:var(--purple-border)}
.mt-visit{color:var(--yellow);background:var(--warning-bg, rgba(217,119,6,.12));border-color:var(--warning-border, rgba(217,119,6,.24))}



.lkc{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;cursor:pointer;transition:all .2s ease;box-shadow:var(--shadow1);position:relative;overflow:hidden}
.lkc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:transparent;transition:background .2s}
.lkc:hover{box-shadow:var(--shadow2);transform:translateY(-2px)}
.lkc:hover::before{background:linear-gradient(90deg,var(--accent),#ff9060)}
.lkc-hdr{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px}
.ca{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;border:1px solid var(--border);background:var(--surface2);color:var(--text2);font-size:13px;transition:all .15s;text-decoration:none}
.ca:hover{background:var(--surface3);border-color:var(--border2)}
.ca.wa:hover{background:rgba(29,168,81,0.1);border-color:rgba(29,168,81,0.25);color:#1da851}
.ca.inv:hover{background:var(--warning-bg, rgba(217,119,6,.12));border-color:var(--warning-border, rgba(217,119,6,.24));color:var(--yellow)}
.ca.rd:hover{background:var(--danger-bg, rgba(217,48,37,.10));border-color:var(--danger-border, rgba(217,48,37,.24));color:var(--red)}


.dov{position:fixed;inset:0;background:rgba(0,0,0,0.3);z-index:249;display:none;backdrop-filter:blur(2px)}
.dov.open{display:block}
.d-hdr{padding:15px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:var(--surface2);flex-shrink:0}
.d-hdr span{font-family:'Syne',sans-serif;font-size:15px;font-weight:700}
#d-name{font-family:'Syne',sans-serif;font-size:15px;font-weight:700}
.dbody{padding:16px;overflow-y:auto;flex:1}
.ds{margin-bottom:16px}
.ds-t{font-size:9.5px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--text3);margin-bottom:9px}
.dvd{height:1px;background:var(--border);margin:14px 0}
.qa-row{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:4px}
.clr-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}
.notes-f{width:100%;background:var(--surface2);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:9px 11px;color:var(--text);font-size:13px;font-family:'Inter',sans-serif;outline:none;resize:vertical;min-height:80px;line-height:1.6;transition:all .15s}
.notes-f:focus{border-color:var(--accent-border);box-shadow:0 0 0 3px rgba(232,93,4,0.07);background:var(--surface)}
.tag-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;min-height:16px}
.tc{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:500;background:var(--accent-bg);border:1px solid var(--accent-border);color:var(--accent2)}
.tc button{background:none;border:none;cursor:pointer;color:var(--accent2);font-size:14px;line-height:1;padding:0;opacity:.7;display:flex;align-items:center}
.tc button:hover{opacity:1}


.bc-filter-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
.wa-tab-bar{display:flex;border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0;overflow-x:auto;scrollbar-width:none}
.wa-tab-bar::-webkit-scrollbar{display:none}
.fr2{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:8px}
.pills{display:flex;gap:5px;flex-wrap:wrap}
.vtg{display:flex;gap:4px;background:var(--surface2);padding:4px;border-radius:var(--radius-sm);border:1px solid var(--border)}
.vb{width:30px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:7px;border:none;background:transparent;color:var(--text3);cursor:pointer;font-size:14px;transition:all .15s}
.vb:hover{color:var(--text2)}
.vb.active{background:var(--surface);color:var(--accent);box-shadow:var(--shadow1)}
.aico{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.toggle{width:38px;height:22px;border-radius:99px;border:none;cursor:pointer;transition:all .2s;flex-shrink:0;position:relative}
.toggle.on{background:var(--green)}.toggle.off{background:var(--surface3)}
.toggle::after{content:'';position:absolute;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:all .2s;box-shadow:0 1px 3px rgba(0,0,0,0.2)}
.toggle.on::after{left:calc(100% - 19px)}.toggle.off::after{left:3px}
@supports(padding:max(0px)){
  .mob-nav{padding-bottom:max(6px,env(safe-area-inset-bottom))}
  .mob-fab{bottom:max(80px,calc(66px + env(safe-area-inset-bottom)))}
}

/* =========================================
   PROJECT DOM FIXES
   Real markup compatibility after template merge.
========================================= */
:root{
  --ac:var(--accent);
  --ac2:var(--accent2);
  --ac3:var(--accent2);
  --ac-bg:var(--accent-bg);
  --ac-bd:var(--accent-border);
  --sf:var(--surface);
  --sf2:var(--surface2);
  --sf3:var(--surface3);
  --sf4:var(--surface3);
  --bd:var(--border);
  --bd2:var(--border2);
  --bd3:var(--border2);
  --tx:var(--text);
  --tx2:var(--text2);
  --tx3:var(--text3);
  --tx4:var(--text3);
  --gn:var(--green);
  --rd:var(--red);
  --bl:var(--blue);
  --am:var(--yellow);
  --amber:var(--yellow);
  --pu:var(--purple);
  --r:var(--radius-sm);
  --rlg:var(--radius);
  --rxl:22px;
  --sh0:var(--shadow1);
  --sh1:var(--shadow1);
  --sh2:var(--shadow2);
  --sh3:var(--shadow3);
}

.main{
  min-width:0;
}

.topbar{
  min-height:64px;
}

.tb-left,
.tb-right{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.tb-left{
  flex:1;
}

#view-title{
  font-family:'Syne',sans-serif;
  font-size:20px;
  line-height:1.15;
  color:var(--text);
  margin:0;
}

#view-sub{
  font-size:12px;
  color:var(--text3);
  margin-top:3px;
}

.search-wrap{
  position:relative;
  width:320px;
  max-width:34vw;
}

.search-wrap i{
  position:absolute;
  left:13px;
  top:50%;
  transform:translateY(-50%);
  color:var(--text3);
  pointer-events:none;
}

.search-wrap input{
  height:40px;
  padding-left:38px;
  border-radius:999px;
  background:var(--surface2);
}

.stats-row{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:0;
  margin:0;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}

.stat-c{
  min-height:96px;
  border:0;
  border-right:1px solid var(--border);
  border-radius:0;
  box-shadow:none;
  padding:16px 18px;
  background:var(--surface);
}

.stat-c:last-child{
  border-right:0;
}

.stat-c:hover{
  transform:none;
  box-shadow:none;
  background:var(--surface2);
}

.stat-c::before{
  height:2px;
  opacity:0;
}

.stat-c.active-s::before,
.stat-c:hover::before{
  opacity:1;
}

.stat-num{
  font-size:25px;
}

.stat-lbl{
  margin-top:7px;
  font-size:12px;
}

.stat-chg{
  margin-top:5px;
}

.content{
  flex:1;
  min-height:0;
  overflow:auto;
  padding:18px 24px;
}

.filters-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.pills{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  min-width:0;
}

.pill{
  white-space:nowrap;
}

.vt{
  display:flex;
  align-items:center;
  gap:4px;
  padding:4px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--surface2);
  flex-shrink:0;
}

.vb{
  width:34px;
  height:32px;
}

#viewArea,
.view-area{
  flex:1;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  min-height:0;
  min-width:0;
}

.tw{
  max-width:100%;
  overflow:auto;
  background:var(--surface);
  border:1px solid var(--border2);
  border-radius:var(--radius);
  box-shadow:var(--shadow2);
}

.con .ct{
  width:100%;
  min-width:0;
}

.sb-ft button,
.btn-cancel,
.btn-ghost,
.btn-danger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:36px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  padding:0 12px;
  cursor:pointer;
  font:inherit;
  font-size:13px;
  transition:.18s;
}

.sb-ft button{
  width:100%;
  color:rgba(255,255,255,.78);
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.08);
  justify-content:flex-start;
}

.sb-ft button:hover{
  color:#fff;
  background:rgba(255,255,255,.09);
}

.btn-ghost{
  background:var(--accent-bg);
  border-color:var(--accent-border);
  color:var(--accent);
  font-weight:700;
}

.btn-danger{
  background:var(--danger-bg);
  border-color:var(--danger-border);
  color:var(--red);
  font-weight:700;
}

.btn-cancel:hover,
.btn-ghost:hover,
.btn-danger:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow1);
}

.uname{
  font-size:13px;
  font-weight:700;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.urole{
  font-size:11px;
  color:rgba(255,255,255,.52);
}

.auto-panel,
.dashboard-panel{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow1);
  padding:18px;
}

.auto-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.auto-title{
  font-family:'Syne',sans-serif;
  font-size:18px;
  font-weight:700;
  color:var(--text);
  display:flex;
  align-items:center;
  gap:8px;
}

.auto-name{
  font-weight:700;
  color:var(--text);
}

.auto-desc{
  color:var(--text2);
  font-size:13px;
  margin-top:4px;
}

.tm-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

.stat-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow1);
}

.input{
  width:100%;
}

.divider{
  height:1px;
  background:var(--border);
  margin:16px 0;
}

.ds-title{
  font-size:11px;
  font-weight:800;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:var(--text3);
  margin-bottom:9px;
}

.ig2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.val{
  color:var(--text);
  font-weight:600;
  overflow-wrap:anywhere;
}

.sbtns{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.sbtn{
  border:1px solid var(--border);
  background:var(--surface2);
  color:var(--text2);
  border-radius:999px;
  padding:8px 12px;
  cursor:pointer;
  font-weight:700;
}

.sbtn.active,
.sbtn:hover{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}

.section-gap{
  margin-bottom:16px;
}

.color-opts{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.clr-opt{
  width:28px;
  height:28px;
  border-radius:9px;
  border:2px solid transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  cursor:pointer;
  box-shadow:var(--shadow1);
}

.clr-opt.sel{
  border-color:var(--text);
  outline:2px solid var(--surface);
}

.tag-input-wrap{
  display:flex;
  gap:8px;
}

.tags-list{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:8px;
}

.tag-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  border-radius:999px;
  background:var(--accent-bg);
  border:1px solid var(--accent-border);
  color:var(--accent);
  font-size:12px;
  font-weight:700;
}

.tag-chip button{
  border:0;
  background:transparent;
  color:inherit;
  cursor:pointer;
  font-size:14px;
}

.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 18px;
  border-bottom:1px solid var(--border);
  background:var(--surface2);
}

.invoice-modal{
  max-width:900px;
}

.inv-table{
  width:100%;
  border-collapse:collapse;
}

.inv-table th,
.inv-table td{
  padding:10px;
  border-bottom:1px solid var(--border);
  text-align:left;
}

.aud-chip{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--surface);
  cursor:pointer;
}

@media(max-width:1100px){
  .sr{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .sc:nth-child(3){
    border-right:0;
  }
}

@media(max-width:768px){
  .topbar{
    min-height:56px;
    height:52px;
    padding:0 12px;
  }

  .tb-r .sw,
  .search-wrap{
    width:140px;
    max-width:140px;
  }

  .tb-r .sw:focus-within,
  .search-wrap:focus-within{
    width:170px;
    max-width:170px;
  }

  .btnp,
  .btn-primary{
    display:none;
  }

  .sr{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .sc{
    padding:10px 12px;
  }

  .sn{
    font-size:20px;
  }

  .con,
  .content{
    padding:12px;
    padding-bottom:84px;
  }

  .fr2,
  .filters-row{
    align-items:flex-start;
    flex-direction:column;
  }

  .vt,
  .vtg{
    width:100%;
    justify-content:space-between;
  }

  .vb{
    flex:1;
  }

  .tm-grid,
  .ig2{
    grid-template-columns:1fr;
  }

  .card-acts,
  .tag-input-wrap{
    flex-wrap:wrap;
  }
}

@media(max-width:480px){
  .tb-right{
    gap:7px;
  }

  #view-title{
    font-size:16px;
  }

  #view-sub{
    display:none;
  }

  .stats-row{
    grid-template-columns:1fr 1fr;
  }

  .btn-primary{
    padding:0 12px;
  }
}

/* New modules */
.funnel-wrap,
.capture-wrap,
.calls-wrap{
  display:flex;
  flex-direction:column;
  gap:18px;
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding-bottom:8px;
}

.funnel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.funnel-head p{
  margin-top:4px;
  color:var(--text3);
  font-size:13px;
}

.funnel-kpis{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
}

.funnel-kpi{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--surface);
  box-shadow:var(--shadow1);
}

.funnel-kpi i{
  font-size:18px;
}

.funnel-kpi strong,
.funnel-stage-top b{
  display:block;
  font-size:18px;
  color:var(--text);
}

.funnel-kpi small,
.funnel-stage-top span,
.funnel-meta span,
.capture-source p,
.capture-log span,
.capture-log small,
.call-item span,
.call-item small{
  color:var(--text3);
  font-size:12px;
}

.funnel-stages{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
}

.funnel-stage{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:14px;
  box-shadow:var(--shadow1);
}

.funnel-stage-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px;
}

.funnel-bar{
  height:10px;
  background:var(--surface2);
  border-radius:999px;
  overflow:hidden;
}

.funnel-bar i{
  display:block;
  height:100%;
  border-radius:999px;
}

.funnel-meta{
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-top:10px;
}

.funnel-arrow{
  display:flex;
  justify-content:center;
  margin-top:10px;
  color:var(--text3);
}

.capture-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.capture-source{
  display:flex;
  gap:12px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--surface2);
}

.capture-icon{
  width:42px;
  height:42px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--accent-bg);
  color:var(--accent);
  flex-shrink:0;
  font-size:18px;
}

.capture-source strong{
  display:block;
  font-size:14px;
  margin-bottom:4px;
}

.capture-source p{
  margin-bottom:10px;
  line-height:1.4;
}

.capture-panels{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:18px;
}

.capture-actions{
  margin-top:14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.capture-log-list,
.call-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.capture-log,
.call-item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--surface2);
}

.capture-log strong,
.call-item strong{
  display:block;
  margin-bottom:4px;
}

.call-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.call-grid .full{
  grid-column:1 / -1;
}

.call-actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-shrink:0;
}

@media(max-width:900px){
  .funnel-kpis,
  .funnel-stages,
  .capture-panels{
    grid-template-columns:1fr;
  }

  .capture-grid,
  .call-grid{
    grid-template-columns:1fr;
  }
}



/* Email and WhatsApp reading panes */
.email-layout{
  height:calc(100vh - 260px);
  min-height:420px;
  overflow:hidden;
}

.email-stage{
  min-height:0;
}

.email-list,
.email-view{
  min-height:0;
  max-height:100%;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

.email-view{
  overflow-x:hidden;
}

.email-view > div:last-child,
.email-view [style*="white-space:pre-wrap"]{
  overflow-wrap:anywhere;
}

#viewArea [style*="grid-template-columns:320px 1fr"][style*="min-height:600px"]{
  height:calc(100vh - 280px);
  min-height:430px !important;
  max-height:720px;
}

#viewArea [style*="grid-template-columns:320px 1fr"][style*="min-height:600px"] > div{
  min-height:0;
}

#viewArea [style*="grid-template-columns:320px 1fr"][style*="min-height:600px"] > div:first-child > div:last-child{
  max-height:calc(100% - 73px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

#waMessages{
  min-height:0;
  max-height:100%;
  overflow-y:auto !important;
  overflow-x:hidden;
  overflow-anchor:none;
  -webkit-overflow-scrolling:touch;
}

.wa-chat-bottom{
  flex:0 0 1px;
  height:1px;
}

.wa-stage{
  height:calc(100vh - 260px);
  min-height:430px;
}

.wa-contacts,
.wa-chat{
  min-height:0;
}

.wa-contact-list{
  min-height:0;
}

.wa-chat-body{
  min-height:0;
}

.wa-shell{
  height:calc(100vh - 190px);
  min-height:560px;
  display:flex;
  flex-direction:column;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow2);
  overflow:hidden;
}

.wa-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,var(--surface),var(--surface2));
  flex-shrink:0;
}

.wa-brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.wa-brand-icon{
  width:42px;
  height:42px;
  border-radius:14px;
  background:#e7fdf0;
  color:#1da851;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  flex-shrink:0;
  box-shadow:0 8px 18px rgba(29,168,81,.14);
}

.wa-brand-title{
  font-family:'Syne',sans-serif;
  font-size:18px;
  font-weight:700;
  color:var(--text);
}

.wa-brand-sub{
  margin-top:2px;
  font-size:12px;
  color:var(--text3);
}

.wa-top-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.wa-tabs-row{
  display:flex;
  align-items:center;
  gap:2px;
  border-bottom:1px solid var(--border);
  background:var(--surface);
  overflow-x:auto;
  scrollbar-width:none;
  flex-shrink:0;
}

.wa-tabs-row::-webkit-scrollbar{
  display:none;
}

.wa-tabs-row .wa-tab{
  background:transparent;
  border:0;
  border-bottom:2px solid transparent;
  min-height:44px;
  font-family:'Inter',sans-serif;
}

.wa-content{
  flex:1;
  min-height:0;
  overflow:auto;
  background:var(--surface2);
  padding:14px;
}

.wa-content .wa-wrap,
.wa-chat-stage{
  height:100%;
  min-height:0;
  border-radius:14px;
}

.wa-chat .wa-empty-chat{
  min-height:100%;
}

.wa-grid,
.wa-settings-grid{
  display:grid;
  gap:16px;
}

.wa-grid-audience{
  grid-template-columns:minmax(260px,340px) minmax(0,1fr);
  align-items:start;
}

.wa-settings-grid{
  grid-template-columns:minmax(320px,1fr) minmax(320px,1fr);
  align-items:start;
}

.wa-section{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.wa-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow1);
}

.wa-section-head h3{
  margin:0;
  font-family:'Syne',sans-serif;
  font-size:16px;
}

.wa-section-head p{
  margin-top:4px;
  font-size:12px;
  color:var(--text3);
}

.wa-log-list{
  max-height:420px;
  overflow:auto;
}

.wa-log-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid var(--border);
}

.wa-log-row:last-child{
  border-bottom:0;
}

.wa-log-avatar{
  width:34px;
  height:34px;
  border-radius:11px;
  background:#e7fdf0;
  color:#1da851;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:800;
  flex-shrink:0;
}

.wa-log-main{
  flex:1;
  min-width:0;
}

.wa-log-title{
  font-size:13px;
  font-weight:700;
  color:var(--text);
}

.wa-log-msg{
  margin-top:3px;
  font-size:12px;
  color:var(--text3);
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.wa-log-meta{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
  font-size:10.5px;
  color:var(--text3);
  flex-shrink:0;
}

.wa-broadcast-layout{
  display:grid;
  grid-template-columns:minmax(280px,390px) minmax(0,1fr);
  gap:16px;
  align-items:start;
}

.bc-filter-row{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}

.wa-step-dot{
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:800;
  flex-shrink:0;
}

.wa-message-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 13px;
  border-radius:999px;
  border:1.5px solid var(--border);
  background:var(--surface);
  color:var(--text2);
  font-size:12px;
  font-family:'Inter',sans-serif;
  cursor:pointer;
}

.wa-message-chip.active{
  border-color:var(--green);
  background:#e7fdf0;
  color:var(--green);
  font-weight:700;
}

.wa-phone-preview{
  background:#e5ddd5;
  border-radius:14px;
  overflow:hidden;
}

.wa-phone-head{
  background:#075e54;
  padding:10px 12px;
  display:flex;
  align-items:center;
  gap:9px;
}

.wa-phone-body{
  min-height:170px;
  padding:14px;
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
}

.wa-phone-bubble{
  max-width:88%;
  background:#dcf8c6;
  color:#111;
  border-radius:10px 0 10px 10px;
  padding:10px 12px;
  font-size:12.5px;
  line-height:1.65;
  box-shadow:0 1px 2px rgba(0,0,0,.15);
}

.wa-phone-bubble.incoming{
  background:#fff;
  border-radius:0 10px 10px 10px;
}

.wa-phone-time{
  margin-top:6px;
  text-align:right;
  color:#667;
  font-size:10px;
}

.wa-summary-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:10px;
}

.wa-summary-row div{
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:10px;
  padding:9px 10px;
}

.wa-summary-row b{
  display:block;
  font-family:'Syne',sans-serif;
  font-size:18px;
}

.wa-summary-row span{
  display:block;
  font-size:11px;
  color:var(--text3);
  margin-top:2px;
}

.wa-workflow-layout{
  min-height:100%;
  display:grid;
  grid-template-columns:240px minmax(0,1fr) 300px;
  gap:0;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
}

.wf-list{
  border-right:1px solid var(--border);
  background:var(--surface);
  min-height:0;
}

.wf-list-head{
  padding:12px;
  border-bottom:1px solid var(--border);
  background:var(--surface2);
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:13px;
  font-weight:800;
}

.wf-list-head button{
  width:28px;
  height:28px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  cursor:pointer;
}

.wf-list-body{
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.wf-item{
  padding:10px;
  border:1.5px solid var(--border);
  border-radius:10px;
  background:var(--surface2);
  cursor:pointer;
}

.wf-item.active{
  border-color:#b78cff;
  background:#f6efff;
}

.wf-item-title{
  font-size:12.5px;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.wf-item-meta{
  margin-top:3px;
  font-size:10.5px;
  color:var(--text3);
}

.wf-toggle{
  width:32px;
  height:18px;
  border-radius:999px;
  border:0;
  background:var(--surface3);
  position:relative;
  cursor:pointer;
  flex-shrink:0;
}

.wf-toggle:after{
  content:"";
  position:absolute;
  top:2px;
  left:2px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
}

.wf-toggle.on{
  background:var(--green);
}

.wf-toggle.on:after{
  left:16px;
}

.wf-builder{
  background:var(--bg);
  min-width:0;
  overflow:auto;
  padding:14px;
}

.wf-builder-head,
.wf-trigger-card,
.wf-step-card,
.wf-guide-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow1);
}

.wf-builder-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  margin-bottom:12px;
}

.wf-builder-title{
  font-size:15px;
  font-weight:800;
}

.wf-builder-sub{
  margin-top:2px;
  font-size:11.5px;
  color:var(--text3);
}

.wf-trigger-card{
  display:flex;
  gap:12px;
  padding:14px;
  background:linear-gradient(135deg,#6b21a8,#9333ea);
  color:#fff;
  border:0;
}

.wf-trigger-icon{
  width:38px;
  height:38px;
  border-radius:12px;
  background:rgba(255,255,255,.16);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:19px;
  flex-shrink:0;
}

.wf-label{
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:1px;
  color:rgba(255,255,255,.72);
  margin-bottom:8px;
}

.wf-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.wf-form-grid input,
.wf-form-grid select{
  width:100%;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.12);
  color:#fff;
  outline:none;
}

.wf-form-grid option{
  color:#111;
}

.wf-step-stack{
  margin-top:0;
}

.wf-step{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.wf-step-connector,
.wf-line{
  width:2px;
  height:14px;
  background:var(--border2);
}

.wf-delay-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 12px;
  border-radius:999px;
  background:#fff7ed;
  border:1px solid #fed7aa;
  color:#d97706;
  font-size:11px;
  font-weight:800;
}

.wf-step-card{
  width:100%;
  overflow:hidden;
}

.wf-step-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  background:#e7fdf0;
  color:var(--green);
  font-size:12px;
  font-weight:800;
}

.wf-step-head span{
  color:var(--text3);
  font-weight:500;
  margin-left:4px;
}

.wf-step-head select,
.wf-step-head button{
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text2);
  border-radius:7px;
  padding:5px 7px;
  cursor:pointer;
}

.wf-step-body{
  padding:12px;
}

.wf-step-body textarea{
  width:100%;
  min-height:90px;
  resize:vertical;
  padding:10px 12px;
  border:1.5px solid var(--border);
  border-radius:10px;
  background:var(--surface2);
  color:var(--text);
  font-family:'Inter',sans-serif;
  line-height:1.6;
}

.wf-vars{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px;
}

.wf-vars span{
  font-size:10px;
  color:var(--text3);
  font-weight:800;
}

.wf-vars button,
.wf-guide-card code{
  border:1px solid #ddd6fe;
  background:#f5f3ff;
  color:#6b21a8;
  border-radius:999px;
  padding:3px 9px;
  font-size:11px;
  cursor:pointer;
}

.wf-end-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

.wf-complete{
  border:2px dashed var(--border2);
  border-radius:12px;
  padding:10px 22px;
  color:var(--text3);
  background:var(--surface3);
  font-size:13px;
  font-weight:700;
}

.wf-guide{
  padding:14px;
  background:var(--surface2);
  border-left:1px solid var(--border);
  display:flex;
  flex-direction:column;
  gap:12px;
}

.wf-guide-card{
  padding:12px;
}

.wf-guide-title{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:13px;
  font-weight:800;
  margin-bottom:10px;
  color:#6b21a8;
}

.wf-guide-row{
  display:flex;
  gap:9px;
  align-items:flex-start;
  padding:7px 0;
}

.wf-guide-row i{
  color:#6b21a8;
  margin-top:2px;
}

.wf-guide-row b{
  display:block;
  font-size:12px;
}

.wf-guide-row span{
  display:block;
  font-size:11px;
  line-height:1.45;
  color:var(--text3);
}

.wa-festival-layout{
  min-height:100%;
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
}

.fest-left{
  border-right:1px solid var(--border);
  background:var(--surface);
}

.fest-head{
  padding:12px;
  background:var(--surface2);
  border-bottom:1px solid var(--border);
  font-size:11px;
  font-weight:900;
  color:var(--text3);
  text-transform:uppercase;
  letter-spacing:1px;
}

.fest-list{
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:5px;
}

.fest-item{
  display:flex;
  align-items:center;
  gap:9px;
  width:100%;
  border:2px solid transparent;
  background:transparent;
  color:var(--text2);
  border-radius:10px;
  padding:9px 10px;
  cursor:pointer;
  text-align:left;
  font-family:'Inter',sans-serif;
  font-size:12px;
  font-weight:700;
}

.fest-item.active{
  border-color:var(--fest);
  background:color-mix(in srgb, var(--fest) 11%, white);
  color:var(--fest);
}

.fest-dot,
.fest-big-dot{
  width:12px;
  height:12px;
  border-radius:50%;
  flex-shrink:0;
}

.fest-main{
  padding:14px;
  overflow:auto;
  background:var(--bg);
}

.fest-title-card{
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid;
  border-radius:14px;
  padding:14px;
  margin-bottom:14px;
}

.fest-big-dot{
  width:42px;
  height:42px;
}

.fest-title-card h3{
  font-family:'Syne',sans-serif;
  margin:0;
}

.fest-title-card p{
  margin-top:3px;
  color:var(--text3);
  font-size:12px;
}

.fest-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 390px;
  gap:14px;
  align-items:start;
}

.wa-send-row{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.wa-send-row select{
  flex:1;
  min-width:190px;
  padding:10px 12px;
  border:1.5px solid var(--border);
  border-radius:10px;
  background:var(--surface2);
  color:var(--text);
}

.wa-or-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin:12px 0;
  color:var(--text3);
  font-size:11px;
}

.wa-or-row span{
  height:1px;
  flex:1;
  background:var(--border);
}

.fest-broadcast-box{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  padding:12px;
  border:1px solid rgba(31,169,113,.24);
  background:rgba(31,169,113,.10);
  border-radius:12px;
}

.fest-broadcast-box p{
  margin-top:3px;
  font-size:12px;
  color:var(--text2);
}

@media(max-width:980px){
  .wa-grid-audience,
  .wa-settings-grid,
  .wa-broadcast-layout,
  .fest-grid{
    grid-template-columns:1fr;
  }

  .wa-workflow-layout{
    grid-template-columns:1fr;
  }

  .wf-list,
  .wf-guide{
    border:0;
  }

  .wa-festival-layout{
    grid-template-columns:1fr;
  }

  .fest-left{
    border-right:0;
    border-bottom:1px solid var(--border);
  }

  .fest-list{
    flex-direction:row;
    overflow:auto;
  }

  .fest-item{
    width:auto;
    white-space:nowrap;
  }
}

@media(max-width:768px){
  .wa-shell{
    height:calc(100dvh - 160px);
    min-height:420px;
    border-radius:12px;
  }

  .wa-topbar{
    align-items:flex-start;
    flex-direction:column;
  }

  .wa-top-actions{
    width:100%;
    justify-content:flex-start;
  }

  .wa-content{
    padding:10px;
  }
}

@media(max-width:768px){
  .email-layout{
    height:calc(100dvh - 255px);
    min-height:360px;
  }

  #viewArea [style*="grid-template-columns:320px 1fr"][style*="min-height:600px"]{
    height:calc(100dvh - 270px);
    min-height:380px !important;
    grid-template-columns:1fr !important;
  }
}

/* Final modal override: keeps legacy .mov dialogs visible above the app. */
.mov{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  max-width:none !important;
  height:100dvh !important;
  max-height:none !important;
  overflow:visible !important;
  display:none !important;
  align-items:center !important;
  justify-content:center !important;
  padding:20px !important;
  background:rgba(20,14,8,0.45) !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  z-index:12000 !important;
}

.mov.open{
  display:flex !important;
}

.mov > .modal{
  position:relative !important;
  inset:auto !important;
  opacity:1 !important;
  visibility:visible !important;
  z-index:auto !important;
  width:100% !important;
  max-width:580px !important;
  max-height:92dvh !important;
  background:var(--surface) !important;
  border-radius:var(--radius) !important;
  box-shadow:var(--shadow3) !important;
}

.mov > .settings-modal{
  display:block !important;
  padding:22px !important;
  overflow-y:auto !important;
}

.modal-close{
  position:absolute;
  top:12px;
  right:12px;
  width:34px;
  height:34px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  color:var(--text2);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:3;
  transition:.15s;
}

.modal-close:hover{
  color:var(--red);
  border-color:rgba(217,48,37,.22);
  background:#fff5f5;
}

.modal-close i{
  font-size:18px;
}

.settings-modal{
  padding-top:48px !important;
}

/* =========================================
   LEADS UI — TEMPLATE ALIGNMENT
========================================= */

.con,
.content{
  flex:1;
  min-height:0;
  overflow:hidden;
  padding:18px 24px;
  background:var(--bg);
  display:flex;
  flex-direction:column;
}

.con #filterPills,
.fr2 #filterPills{
  margin-bottom:0;
}

.topbar{
  height:60px;
  min-height:60px;
  padding:0 24px;
  background:rgba(255,255,255,0.98);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 1px 0 var(--border),0 4px 16px rgba(20,24,50,0.05);
}

.tb-l h1,
#view-title{
  font-family:'Syne',sans-serif;
  font-size:17px;
  font-weight:700;
  letter-spacing:-.4px;
  color:var(--text);
  margin:0;
}

.tb-l p,
#view-sub{
  font-size:11px;
  color:var(--text3);
  margin-top:1px;
  line-height:1;
}

.tb-left,
.tb-right,
.tb-l,
.tb-r{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.tb-left,
.tb-l{
  flex:1;
  gap:10px;
}

.sw,
.search-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  width:220px;
  max-width:34vw;
  background:var(--surface2);
  border:1.5px solid var(--border);
  border-radius:99px;
  padding:8px 14px;
  transition:all .18s;
  position:relative;
}

.sw:focus-within,
.search-wrap:focus-within{
  border-color:var(--accent-border);
  background:var(--surface);
  box-shadow:0 0 0 4px rgba(232,93,4,0.07);
  width:250px;
  max-width:250px;
}

.sw i,
.search-wrap i{
  position:static;
  transform:none;
  color:var(--text3);
  font-size:14px;
  flex-shrink:0;
  pointer-events:none;
}

.sw input,
.search-wrap input{
  width:100%;
  height:auto;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  font-size:13px;
}

.sw input:focus,
.search-wrap input:focus{
  border:0;
  box-shadow:none;
}

.tb-icon-btn,
.icon-btn{
  width:38px;
  height:38px;
  min-width:38px;
  border-radius:10px;
  border:1.5px solid var(--border);
  background:var(--surface2);
  color:var(--text2);
  font-size:17px;
}

.tb-icon-btn:hover,
.icon-btn:hover{
  background:var(--surface3);
  border-color:var(--border2);
  color:var(--text);
}

.btnp,
.btn-primary{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:0 18px;
  height:38px;
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:99px;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  white-space:nowrap;
  box-shadow:var(--shadow-accent,0 4px 16px rgba(232,93,4,0.28));
  transition:all .18s;
}

.btnp:hover,
.btn-primary:hover{
  background:var(--accent2);
  box-shadow:0 6px 20px rgba(232,93,4,0.38);
  transform:translateY(-1px);
}

.con .pill,
.fr2 .pill{
  padding:5px 13px;
  border-radius:99px;
  font-size:12px;
  font-weight:400;
  border:1.5px solid var(--border2);
  color:var(--text3);
  background:transparent;
}

.con .pill:hover,
.fr2 .pill:hover{
  border-color:var(--accent-border);
  color:var(--accent);
  background:var(--accent-bg);
}

.con .pill.active,
.fr2 .pill.active{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
  font-weight:500;
  box-shadow:0 2px 8px rgba(232,93,4,0.25);
}

.sr{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  background:var(--surface);
  border-bottom:1.5px solid var(--border2);
  flex-shrink:0;
}

.sc{
  padding:16px 20px;
  position:relative;
  border-right:1px solid var(--border);
  transition:background .15s;
}

.sc:last-child{
  border-right:none;
}

.sc:hover{
  background:var(--surface2);
}

.sc::after{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:2px;
  background:transparent;
  transition:background .2s;
}

.sc.act::after{
  background:linear-gradient(90deg,var(--accent),var(--accent2));
}

.sc:hover::after{
  background:var(--border2);
}

.sc-icon{
  width:34px;
  height:34px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:17px;
  margin-bottom:10px;
}

.sn{
  font-size:24px;
  font-weight:600;
  line-height:1;
  letter-spacing:-.8px;
  color:var(--text);
  font-variant-numeric:tabular-nums;
}

.sl{
  font-size:11px;
  color:var(--text3);
  margin-top:5px;
}

.con .tw .ct th{
  padding:13px 16px;
  font-size:10px;
  font-weight:700;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--text3);
}

.con .tw .ct td{
  padding:14px 16px;
}

.con .tw .ct tbody tr:hover .ar{
  opacity:1 !important;
}

.ar{
  opacity:0;
  transition:opacity .15s;
}

.empty{
  text-align:center;
  padding:52px 20px;
  color:var(--text3);
}

.empty p{
  font-size:13px;
  line-height:1.6;
  color:var(--text3);
}

body:not(.app-ready) .mob-nav,
body:not(.app-ready) .mob-fab{
  display:none !important;
}

/* =========================================
   FINAL RESPONSIVE OVERRIDES
   Based on DigitalAdIn_CRM_v60_Funnel mobile layout
========================================= */

html{
  height:100%;
  overflow:hidden;
}

body{
  min-width:0;
}

.main,
.con,
.view-area,
#viewArea{
  min-width:0;
}

img,
video,
canvas,
svg{
  max-width:100%;
}

input,
select,
textarea,
button{
  font:inherit;
}

@media(max-width:1200px){
  .sb{
    width:238px;
    min-width:238px;
  }

  .con{
    padding:14px;
  }

  .sr{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .cg,
  .pipeline{
    grid-template-columns:repeat(2,minmax(260px,1fr));
  }

  .wa-contacts{
    width:240px;
  }
}

@media(max-width:960px){
  .sb{
    width:220px;
    min-width:220px;
  }

  .topbar{
    height:56px;
    padding:0 14px;
  }

  .sr{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .sc:nth-child(4),
  .sc:nth-child(5){
    display:none;
  }

  .tasks-wrap,
  .qa-grid,
  .payment-layout,
  .email-layout,
  .wa-settings-grid,
  .wa-grid-audience,
  .wa-broadcast-layout,
  .wa-workflow-layout,
  .wa-festival-layout,
  .fest-grid,
  .capture-panels{
    grid-template-columns:1fr !important;
  }

  .drawer{
    width:360px;
    right:-360px;
  }
}

@media(max-width:768px){
  body{
    overflow:hidden;
  }

  .app{
    height:100dvh;
    overflow:hidden;
  }

  .main{
    width:100%;
    min-width:0;
  }

  .sb{
    position:fixed;
    top:0;
    bottom:0;
    left:-280px;
    width:280px;
    min-width:280px;
    max-width:86vw;
    z-index:300;
    transition:left .28s cubic-bezier(.4,0,.2,1);
    box-shadow:none;
  }

  .sb.open{
    left:0;
    box-shadow:var(--shadow3);
  }

  .ham,
  #sb-close{
    display:flex !important;
  }

  .mob-nav{
    display:block !important;
    z-index:260;
  }

  .mob-fab{
    display:flex !important;
  }

  .topbar{
    height:52px;
    min-height:52px;
    padding:0 11px;
    gap:8px;
  }

  .tb-l h1,
  #view-title{
    font-size:15px;
    max-width:38vw;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .tb-l p,
  #view-sub,
  #tb-clock{
    display:none !important;
  }

  .tb-r,
  .tb-right{
    gap:6px;
  }

  .sw,
  .search-wrap{
    width:138px;
    max-width:38vw;
    height:36px;
    padding:7px 10px;
  }

  .sw:focus-within,
  .search-wrap:focus-within{
    width:168px;
    max-width:48vw;
  }

  .tb-icon-btn,
  .icon-btn{
    width:36px;
    height:36px;
    min-width:36px;
    border-radius:10px;
  }

  .btnp,
  .btn-primary{
    min-height:38px;
  }

  .topbar .btnp,
  .topbar .btn-primary,
  .tb-r > .btnp,
  .tb-r > .btn-primary{
    display:none !important;
  }

  .sr{
    grid-template-columns:repeat(2,minmax(0,1fr));
    max-height:138px;
    overflow:hidden;
  }

  .sc{
    padding:9px 11px;
  }

  .sc:nth-child(3){
    grid-column:auto;
  }

  .sc:nth-child(n+5){
    display:none;
  }

  .sc-icon{
    width:25px;
    height:25px;
    margin-bottom:5px;
    font-size:13px;
  }

  .sn{
    font-size:18px;
  }

  .sl{
    font-size:10px;
  }

  .con{
    flex:1;
    min-height:0;
    overflow:hidden;
    padding:8px;
    padding-bottom:calc(76px + env(safe-area-inset-bottom));
  }

  .fr2{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    margin-bottom:8px;
    padding:0;
  }

  .fr2 > div:first-child{
    width:100%;
    min-width:0;
  }

  .pills,
  #filterPills,
  .wa-tabs-row,
  .bc-filter-row,
  .vt,
  .vtg,
  .tab-row{
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    flex-wrap:nowrap !important;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }

  .pills::-webkit-scrollbar,
  #filterPills::-webkit-scrollbar,
  .wa-tabs-row::-webkit-scrollbar,
  .bc-filter-row::-webkit-scrollbar,
  .vt::-webkit-scrollbar,
  .vtg::-webkit-scrollbar,
  .tab-row::-webkit-scrollbar{
    display:none;
  }

  .vtg{
    justify-content:flex-start;
  }

  .vb,
  .wa-tab,
  .tab,
  .mn-item,
  .ni{
    min-height:44px;
  }

  #viewArea,
  .view-area{
    flex:1;
    min-height:0;
    overflow:hidden;
    -webkit-overflow-scrolling:touch;
    padding-bottom:0;
  }

  .tw{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  .ct{
    min-width:520px;
  }

  .ct th:nth-child(4),
  .ct td:nth-child(4),
  .ct th:nth-child(5),
  .ct td:nth-child(5),
  .ct th:nth-child(7),
  .ct td:nth-child(7){
    display:none;
  }

  .desk-lead-table{
    display:none !important;
  }

  .mob-lead-list{
    display:flex !important;
    flex-direction:column;
    gap:8px;
  }

  .cg,
  .pipeline,
  .qa-grid,
  .tasks-wrap,
  .payment-layout,
  .pay-grid,
  .email-layout,
  .wa-grid,
  .wa-settings-grid,
  .wa-grid-audience,
  .wa-broadcast-layout,
  .wa-workflow-layout,
  .wa-festival-layout,
  .fest-grid,
  .capture-grid,
  .capture-panels,
  .funnel-kpis,
  .funnel-stages,
  .ws-grid,
  .tpl-grid2,
  .wa-form,
  .bc-leads-grid{
    grid-template-columns:1fr !important;
  }

  [style*="grid-template-columns:1fr 300px"],
  [style*="grid-template-columns:1fr 320px"],
  [style*="grid-template-columns:1fr 340px"],
  [style*="grid-template-columns:1fr 360px"],
  [style*="grid-template-columns:1fr 390px"],
  [style*="grid-template-columns:280px"],
  [style*="grid-template-columns:300px"],
  [style*="grid-template-columns:320px"],
  [style*="grid-template-columns:340px"],
  [style*="grid-template-columns:360px"],
  [style*="grid-template-columns:minmax(260px"],
  [style*="grid-template-columns:minmax(280px"],
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:repeat(4"]{
    grid-template-columns:1fr !important;
  }

  [style*="height:calc(100vh"],
  [style*="height: calc(100vh"]{
    height:calc(100dvh - 170px) !important;
    min-height:360px !important;
  }

  .drawer{
    width:100vw;
    max-width:100vw;
    right:-100vw;
    border-radius:0;
    padding-bottom:env(safe-area-inset-bottom);
  }

  .drawer.open{
    right:0;
  }

  .mov{
    align-items:flex-end !important;
    padding:0 !important;
  }

  .modal,
  .amodal,
  .mov > .modal,
  .settings-modal{
    width:100% !important;
    max-width:100% !important;
    max-height:94dvh !important;
    border-radius:20px 20px 0 0 !important;
  }

  .modal-body,
  .dbody{
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }

  .modal-ft,
  .mbtns{
    padding-bottom:max(12px,env(safe-area-inset-bottom)) !important;
    flex-wrap:wrap;
  }

  .fr,
  .fg,
  .ig{
    grid-template-columns:1fr !important;
  }

  .fr{
    flex-direction:column;
  }

  .wa-shell,
  .email-stage,
  .email-layout{
    height:calc(100dvh - 70px) !important;
    min-height:380px !important;
  }

  /* Fix height chain: shell → content → wrap → contacts → list */
  .wa-content{
    padding:0 !important;
    overflow:hidden !important;
    display:flex !important;
    flex-direction:column !important;
  }

  .wa-content .wa-wrap,
  .wa-chat-stage{
    height:100% !important;
    min-height:0 !important;
    border-radius:0 !important;
    flex:1 !important;
    overflow:hidden !important;
  }

  .wa-topbar{
    padding:10px 12px;
    gap:8px;
    align-items:flex-start;
  }

  .wa-brand-title{
    font-size:15px;
  }

  .wa-brand-sub{
    font-size:10.5px;
  }

  .wa-top-actions{
    gap:6px;
  }

  .wa-status-badge{
    display:none !important;
  }

  .wa-chat-stage{
    display:flex !important;
    flex-direction:column;
    height:100%;
    min-height:0;
    flex:1;
  }

  .wa-contacts{
    width:100% !important;
    flex:1 !important;
    height:auto !important;
    max-height:none !important;
    border-right:0;
    border-bottom:none;
    overflow:hidden;
    display:flex !important;
    flex-direction:column !important;
  }

  .wa-contacts-hdr{
    flex-shrink:0;
  }

  .wa-contact-list{
    flex:1 !important;
    min-height:0 !important;
    display:flex;
    flex-direction:column;
    gap:0;
    overflow-x:hidden;
    overflow-y:auto !important;
    padding:0;
    scrollbar-width:none;
    max-height:none !important;
  }

  .wa-contact-list::-webkit-scrollbar{
    display:none;
  }

  .wa-contact-item{
    width:100%;
    min-width:unset;
    border:none;
    border-bottom:1px solid var(--border);
    border-radius:0;
    background:var(--surface);
  }

  .wa-chat{
    min-height:0;
  }

  .wa-chat-hdr{
    padding:9px 10px;
  }

  .wa-chat-actions .btn-secondary{
    padding:7px 9px;
    font-size:0;
  }

  .wa-chat-actions .btn-secondary i{
    font-size:16px;
  }

  .wa-chat-body{
    padding:10px !important;
  }

  .wa-bubble--out,
  .wa-bubble--in,
  .wa-chat-pane .wa-bubble--out,
  .wa-chat-pane .wa-bubble--in{
    max-width:88%;
  }

  .wa-composer .wa-chat-input{
    gap:6px;
    padding:8px;
  }

  .wa-tool-btn{
    width:34px;
    height:34px;
  }

  .wa-composer .wa-input-box{
    min-height:36px;
    font-size:12.5px;
  }

  .wa-chat-template-panel{
    left:8px;
    right:8px;
    bottom:54px;
    max-height:52vh;
  }

  .wa-chat-template-list{
    grid-template-columns:1fr;
  }

  .email-list{
    max-height:220px;
    border-right:0;
    border-bottom:1px solid var(--border);
  }

  .email-view{
    min-height:0;
  }

  .payment-side{
    display:none;
  }

  .funnel-wrap,
  .capture-wrap,
  .calls-wrap{
    padding:0;
  }

  .capture-source,
  .funnel-stage,
  .task-panel,
  .bc-card,
  .card{
    border-radius:14px;
  }
}

@media(max-width:480px){
  .topbar{
    height:50px;
    min-height:50px;
    padding:0 9px;
  }

  .tb-l h1,
  #view-title{
    font-size:14px;
    max-width:34vw;
  }

  .sw,
  .search-wrap{
    width:122px;
    max-width:36vw;
    padding:6px 9px;
  }

  .sw:focus-within,
  .search-wrap:focus-within{
    width:152px;
    max-width:50vw;
  }

  .tb-icon-btn,
  .icon-btn{
    width:34px;
    height:34px;
    min-width:34px;
  }

  .sr{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .sc{
    padding:8px 10px;
  }

  .sc-icon{
    display:none;
  }

  .sn{
    font-size:17px;
  }

  .sl{
    font-size:9.5px;
  }

  .con{
    padding:7px;
    padding-bottom:calc(74px + env(safe-area-inset-bottom));
  }

  .ct{
    min-width:420px;
  }

  .ct th:nth-child(3),
  .ct td:nth-child(3){
    display:none;
  }

  .ct th,
  .ct td{
    padding:9px 8px !important;
    font-size:12px;
  }

  .av,
  .wci-av{
    width:30px !important;
    height:30px !important;
    border-radius:9px;
    font-size:10px;
  }

  .ln{
    font-size:12px;
  }

  .lco,
  .lsv{
    max-width:150px;
  }

  .wa-shell,
  .email-stage,
  .email-layout{
    height:calc(100dvh - 70px) !important;
    min-height:360px !important;
  }

  .wa-top-actions .btn-secondary,
  .wa-top-actions .btn-primary{
    width:34px;
    height:34px;
    padding:0;
    justify-content:center;
    font-size:0;
  }

  .wa-top-actions .btn-secondary i,
  .wa-top-actions .btn-primary i{
    font-size:16px;
  }

  .wa-contact-item{
    width:100%;
    min-width:unset;
    padding:11px 14px;
  }

  .mn-item{
    min-width:44px;
    padding:4px 5px;
    font-size:8px;
  }

  .mn-item i{
    font-size:19px;
  }

  .modal-hdr,
  .modal-head{
    padding:12px 14px;
  }

  .modal-body{
    padding:12px;
  }

  .modal-hdr h2,
  .modal-head h2{
    font-size:13.5px;
  }
}

@media(hover:none){
  .ar,
  .step-actions{
    opacity:1 !important;
  }

  .btnp:hover,
  .btn-primary:hover,
  .wa-send-fab:hover,
  .ni:hover,
  .lkc:hover,
  .pk:hover{
    transform:none !important;
  }
}

/* =========================================
   REFERENCE POLISH: TASKS, MEETINGS, WHATSAPP
========================================= */

.tm-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  align-items:stretch;
  height:calc(100dvh - 190px);
  min-height:420px;
  min-width:0;
}

.tm-grid .auto-panel,
.auto-panel:has(#meeting-list){
  background:rgba(255,255,255,.78);
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  box-shadow:0 1px 4px rgba(0,0,0,.06),0 2px 8px rgba(0,0,0,.04);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:0;
  max-height:calc(100dvh - 190px);
}

.tm-grid .auto-header,
.auto-panel:has(#meeting-list) .auto-header{
  min-height:58px;
  padding:14px 16px;
  background:linear-gradient(180deg,#fff,#f8f5f0);
  border-bottom:1px solid rgba(0,0,0,.06);
}

.tm-grid .auto-title,
.auto-panel:has(#meeting-list) .auto-title{
  display:flex;
  align-items:center;
  gap:9px;
  font-family:'Syne',sans-serif;
  font-size:17px;
  font-weight:800;
  color:#1a1208;
}

#task-list,
#meeting-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px;
  flex:1;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}

.tm-card{
  position:relative;
  overflow:visible;
  border-radius:14px;
  padding:14px;
  padding-top:17px;
  background:linear-gradient(180deg,#fff,#fbfaf8);
  border:1px solid rgba(0,0,0,.07);
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}

.tm-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  border-radius:14px 14px 0 0;
  background:linear-gradient(90deg,#e85d04,#ff9040);
}

.meeting-ref-card::before{
  background:linear-gradient(90deg,#1255a8,#47a3ff);
}

.tm-card:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}

.tm-card-main{
  min-width:0;
}

.tm-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.tm-card-icon{
  width:36px;
  height:36px;
  border-radius:11px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  flex-shrink:0;
  border:1px solid rgba(232,93,4,.22);
  background:rgba(232,93,4,.08);
  color:#e85d04;
}

.tm-card-icon.meeting-icon{
  border-color:rgba(18,85,168,.22);
  background:rgba(18,85,168,.08);
  color:#1255a8;
}

.tm-card-actions{
  display:flex;
  align-items:center;
  gap:6px;
}

.tm-icon-btn{
  width:32px;
  height:32px;
  border-radius:9px;
  border:1px solid rgba(0,0,0,.07);
  background:#f8f5f0;
  color:#5a4530;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:all .15s;
}

.tm-icon-btn:hover{
  background:#fff;
  color:#e85d04;
  transform:translateY(-1px);
}

.tm-icon-btn.danger:hover{
  background:rgba(184,50,40,.08);
  border-color:rgba(184,50,40,.22);
  color:#b83228;
}

.tm-card .auto-name{
  font-size:14px;
  font-weight:800;
  color:#1a1208;
  line-height:1.35;
}

.tm-card .auto-desc{
  margin-top:5px;
  color:#5a4530;
  font-size:12.5px;
  line-height:1.55;
}

.tm-pill-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  margin-top:11px;
}

.tm-pill{
  border:1px solid rgba(0,0,0,.08);
  background:#f8f5f0;
  color:#5a4530;
  font-size:10.5px;
  font-weight:800;
}

.tm-pill.priority-high,
.tm-pill.status-cancelled{
  background:rgba(184,50,40,.08);
  border-color:rgba(184,50,40,.22);
  color:#b83228;
}

.tm-pill.priority-medium,
.tm-pill.status-scheduled,
.tm-pill.status-pending{
  background:rgba(154,90,0,.08);
  border-color:rgba(154,90,0,.22);
  color:#9a5a00;
}

.tm-pill.priority-low,
.tm-pill.status-completed{
  background:rgba(26,122,66,.08);
  border-color:rgba(26,122,66,.22);
  color:#1a7a42;
}

.tm-meta{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:10px;
  font-size:12px;
  color:#9e8268;
}

.tm-lead-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  max-width:100%;
  margin-top:10px;
  padding:6px 9px;
  border-radius:10px;
  border:1px solid rgba(232,93,4,.20);
  background:rgba(232,93,4,.07);
  color:#5a4530;
  font-size:11.5px;
  font-weight:800;
}

.tm-lead-chip span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.tm-lead-chip small{
  color:#9e8268;
  font-size:10.5px;
  font-weight:700;
  white-space:nowrap;
}

.tm-link-row{
  margin-top:11px;
}

.tm-join-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:34px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid rgba(18,85,168,.22);
  background:rgba(18,85,168,.08);
  color:#1255a8;
  font-size:12px;
  font-weight:800;
}

.task-meeting-modal{
  max-width:640px;
  padding:0;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 12px 40px rgba(0,0,0,.12),0 4px 12px rgba(0,0,0,.07);
  overflow-y:auto;
}

.mov > .task-meeting-modal{
  max-width:640px !important;
}

.task-meeting-modal .modal-close,
#whatsappModal .modal-close{
  top:14px;
  right:14px;
}

.modal-title-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:18px 22px;
  padding-right:58px;
  margin:0 0 16px;
  background:linear-gradient(180deg,#fff,#f8f5f0);
  border-bottom:1px solid rgba(0,0,0,.06);
}

.modal-title-card h2,
.settings-modal .modal-title-card h2{
  margin:0;
  font-family:'Syne',sans-serif;
  font-size:18px;
  font-weight:800;
  color:#1a1208;
}

.modal-title-card p{
  margin-top:2px;
  font-size:12px;
  color:#9e8268;
}

.modal-title-icon{
  width:42px;
  height:42px;
  border-radius:13px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#ff9040,#e85d04);
  color:#fff;
  font-size:21px;
  box-shadow:0 4px 16px rgba(232,93,4,.28);
  flex-shrink:0;
}

.meeting-title-card .modal-title-icon{
  background:linear-gradient(135deg,#47a3ff,#1255a8);
  box-shadow:0 4px 16px rgba(18,85,168,.24);
}

.task-meeting-modal > .fr,
.task-meeting-modal > .mbtns{
  padding-left:22px;
  padding-right:22px;
}

.task-meeting-modal > .mbtns{
  margin-top:16px;
  padding-top:14px;
  padding-bottom:16px;
  background:#f8f5f0;
  border-top:1px solid rgba(0,0,0,.06);
}

.fr .fg label{
  display:flex;
  align-items:center;
  gap:6px;
  color:#9e8268;
}

.fr .fg input,
.fr .fg select,
.fr .fg textarea,
#whatsappModal .fr .fg input,
#whatsappModal .fr .fg select,
#whatsappModal .fr .fg textarea{
  min-height:42px;
  border-radius:12px;
  background:#f8f5f0;
  border:1.5px solid rgba(0,0,0,.08);
  color:#1a1208;
}

.fr .fg textarea,
#whatsappModal .fr .fg textarea{
  min-height:112px;
  resize:vertical;
}

.fr .fg input:focus,
.fr .fg select:focus,
.fr .fg textarea:focus,
#whatsappModal .fr .fg input:focus,
#whatsappModal .fr .fg select:focus,
#whatsappModal .fr .fg textarea:focus{
  background:#fff;
  border-color:rgba(232,93,4,.32);
  box-shadow:0 0 0 4px rgba(232,93,4,.08);
}

.mbtns{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:9px;
}

.btn-cancel,
.btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
}

#whatsappModal .settings-modal{
  max-width:760px;
  padding:0;
}

#whatsappModal.mov > .settings-modal{
  max-width:760px !important;
}

#whatsappModal #waStatus{
  margin:18px 22px 0 !important;
  border:1px solid rgba(184,50,40,.16);
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}

#whatsappModal .settings-modal > h2{
  margin:0 0 14px;
  padding:18px 22px;
  padding-right:58px;
  background:linear-gradient(180deg,#fff,#f8f5f0);
  border-bottom:1px solid rgba(0,0,0,.06);
  font-size:18px;
}

#whatsappModal .settings-modal > h2 i{
  width:40px;
  height:40px;
  border-radius:13px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#e7fdf0;
  color:#1a7a42;
}

#whatsappModal .settings-modal > .fr,
#whatsappModal .settings-modal > .mbtns{
  padding-left:22px;
  padding-right:22px;
}

#whatsappModal .settings-modal > .mbtns{
  padding-top:14px;
  padding-bottom:16px;
  margin-top:16px;
  border-top:1px solid rgba(0,0,0,.06);
  background:#f8f5f0;
}

.wa-shell{
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.06),0 2px 8px rgba(0,0,0,.04);
  overflow:hidden;
}

.wa-topbar{
  background:linear-gradient(180deg,#fff,#f8f5f0);
  border-bottom:1px solid rgba(0,0,0,.06);
}

.wa-brand-icon{
  border-radius:13px;
  background:linear-gradient(135deg,#e7fdf0,#d5f8e2);
  border:1px solid rgba(26,122,66,.18);
}

.wa-tabs-row{
  gap:6px;
  padding:8px 10px;
  background:#fff;
}

.wa-tabs-row .wa-tab{
  min-height:38px;
  padding:0 12px;
  border:1px solid transparent;
  border-radius:10px;
  color:#5a4530;
  font-size:12.5px;
  font-weight:700;
  white-space:nowrap;
}

.wa-tabs-row .wa-tab.active{
  border-color:rgba(232,93,4,.22);
  background:rgba(232,93,4,.08);
  color:#e85d04;
}

.wa-content{
  background:#f2ede6;
  padding:12px;
}

.wa-wrap{
  border-radius:14px;
  border:1px solid rgba(0,0,0,.07);
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}

.wa-contacts{
  background:#fff;
}

.wa-contacts-hdr{
  background:#f8f5f0;
}

.wa-contact-item,
.wci{
  border-bottom:1px solid rgba(0,0,0,.05);
}

.wa-contact-item.active,
.wci.active{
  background:rgba(232,93,4,.07);
  border-right:3px solid #e85d04;
}

.wa-chat-pane .wa-chat-hdr{
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,.06);
}

.wa-chat-pane .wa-chat-body{
  background:
    linear-gradient(rgba(242,237,230,.92),rgba(242,237,230,.92)),
    radial-gradient(circle at 20% 20%,rgba(232,93,4,.06),transparent 28%),
    repeating-linear-gradient(45deg,rgba(90,69,48,.06) 0 1px,transparent 1px 14px);
}

.wa-chat-input{
  background:#fff;
}

.wa-tool-btn{
  border-radius:11px;
}

.wa-input-box{
  border-radius:18px;
  background:#f8f5f0;
}

.ws-card,
.bc-card,
.wa-section-head,
.wf-builder-head,
.wf-trigger-card,
.wf-step-card,
.wf-guide-card{
  border-radius:14px;
  border-color:rgba(0,0,0,.07);
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}

.ws-field input,
.ws-field select,
.ws-field textarea{
  border-radius:12px !important;
  background:#f8f5f0 !important;
  border:1.5px solid rgba(0,0,0,.08) !important;
}

#viewArea.lead-scroll-active{
  overflow:auto !important;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}

.lead-scroll-page{
  min-height:100%;
  padding-bottom:10px;
}

@media(max-width:960px){
  .tm-grid{
    grid-template-columns:1fr;
    height:auto;
    min-height:0;
  }
}

@media(max-width:768px){
  .tm-grid{
    gap:10px;
  }

  .tm-grid .auto-panel,
  .auto-panel:has(#meeting-list){
    max-height:calc(100dvh - 170px);
  }

  .tm-grid .auto-header,
  .auto-panel:has(#meeting-list) .auto-header{
    padding:12px;
  }

    #task-list,
    #meeting-list{
      padding:9px;
      gap:8px;
      max-height:calc(100dvh - 250px);
    }

  .tm-card{
    padding:12px;
    border-radius:13px;
  }

  .tm-card .auto-name{
    font-size:13.5px;
  }

  .task-meeting-modal,
  #whatsappModal .settings-modal{
    max-height:94dvh !important;
  }

  .modal-title-card,
  #whatsappModal .settings-modal > h2{
    padding:16px;
    padding-right:54px;
  }

  .task-meeting-modal > .fr,
  .task-meeting-modal > .mbtns,
  #whatsappModal .settings-modal > .fr,
  #whatsappModal .settings-modal > .mbtns{
    padding-left:16px;
    padding-right:16px;
  }

  .mbtns{
    justify-content:stretch;
  }

  .mbtns button{
    flex:1;
    min-width:0;
  }

  .wa-shell{
    border-radius:13px;
  }

  .wa-tabs-row{
    padding:7px;
  }

  .wa-tabs-row .wa-tab{
    min-width:max-content;
  }

  .wa-content{
    padding:8px;
  }

  .wa-contacts{
    max-height:none;
    height:100%;
  }

  .wa-contact-item.active{
    border-right:1px solid rgba(0,0,0,.07);
    border-bottom:3px solid #e85d04;
  }
}

@media(max-width:480px){
  .modal-title-icon{
    width:38px;
    height:38px;
    border-radius:12px;
    font-size:19px;
  }

  .modal-title-card h2,
  .settings-modal .modal-title-card h2,
  #whatsappModal .settings-modal > h2{
    font-size:16px;
  }

  .modal-title-card p{
    display:none;
  }

  .tm-card-actions{
    gap:4px;
  }

  .tm-icon-btn{
    width:30px;
    height:30px;
  }
}

/* WhatsApp screen final polish */
body.whatsapp-view .con{
  padding:14px 18px 18px;
}

body.whatsapp-view #viewArea{
  overflow:hidden !important;
}

body.whatsapp-view .mob-fab{
  display:none !important;
}

body.whatsapp-view .wa-shell{
  height:100% !important;
  min-height:0 !important;
  border-radius:8px;
  border:1px solid rgba(17,27,33,.12);
  background:#f0f2f5;
  box-shadow:0 1px 3px rgba(17,27,33,.08);
}

body.whatsapp-view .wa-topbar{
  min-height:70px;
  padding:12px 18px;
  background:#f0f2f5;
  border-bottom:1px solid rgba(17,27,33,.10);
}

body.whatsapp-view .wa-brand-icon{
  width:44px;
  height:44px;
  border-radius:50%;
  background:#d9fdd3;
  border:0;
  box-shadow:none;
  color:#00a884;
}

body.whatsapp-view .wa-brand-title{
  font-family:'Syne',sans-serif;
  color:#111b21;
}

body.whatsapp-view .wa-brand-sub{
  color:#667781;
}

body.whatsapp-view .wa-top-actions .btn-primary{
  background:#00a884;
  border-radius:999px;
  box-shadow:none;
}

body.whatsapp-view .wa-top-actions .btn-secondary{
  border-radius:999px;
  background:#fff;
}

body.whatsapp-view .wa-tabs-row{
  padding:0 12px;
  gap:4px;
  background:#fff;
  border-bottom:1px solid rgba(17,27,33,.10);
}

body.whatsapp-view .wa-tabs-row .wa-tab{
  min-height:48px;
  border:0;
  border-bottom:3px solid transparent;
  border-radius:0;
  color:#54656f;
}

body.whatsapp-view .wa-tabs-row .wa-tab.active{
  background:transparent;
  border-bottom-color:#00a884;
  color:#008069;
}

body.whatsapp-view .wa-content{
  padding:0;
  background:#e5ddd5;
  overflow:hidden;
}

body.whatsapp-view .wa-chat-stage{
  height:100%;
  border:0;
  border-radius:0;
  box-shadow:none;
}

body.whatsapp-view .wa-contacts{
  width:360px;
  background:#fff;
  border-right:1px solid rgba(17,27,33,.12);
}

body.whatsapp-view .wa-contacts-hdr{
  padding:14px 14px 12px;
  background:#fff;
}

body.whatsapp-view .wa-contacts-hdr > div:first-child{
  color:#111b21 !important;
  font-size:13px !important;
}

body.whatsapp-view .wa-contacts-search{
  min-height:44px;
  padding:0 15px;
  border:0;
  border-radius:8px;
  background:#f0f2f5;
}

body.whatsapp-view .wa-contact-list,
body.whatsapp-view .wa-chat-body,
body.whatsapp-view .wa-content,
body.whatsapp-view #viewArea{
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}

body.whatsapp-view .wa-contact-item{
  min-width:0;
  width:auto;
  padding:12px 14px;
  border:0;
  border-bottom:1px solid rgba(17,27,33,.08);
  border-radius:0;
  background:#fff;
}

body.whatsapp-view .wa-contact-item:hover,
body.whatsapp-view .wa-contact-item.active{
  background:#f0f2f5;
}

body.whatsapp-view .wa-contact-item.active{
  border-right:0;
}

body.whatsapp-view .wci-av{
  border-radius:50% !important;
  box-shadow:none;
}

body.whatsapp-view .wci-name{
  color:#111b21;
  font-weight:700;
}

body.whatsapp-view .wci-last{
  color:#667781;
}

body.whatsapp-view .wa-chat{
  background:#efeae2;
}

body.whatsapp-view .wa-chat-pane{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
}

body.whatsapp-view .wa-chat-pane .wa-chat-hdr{
  min-height:64px;
  padding:10px 16px;
  background:#f0f2f5;
}

body.whatsapp-view .wa-chat-pane .wa-chat-body,
body.whatsapp-view .wa-chat{
  background-color:#efeae2;
  background-image:
    linear-gradient(rgba(239,234,226,.94),rgba(239,234,226,.94)),
    radial-gradient(circle at 18% 22%,rgba(0,128,105,.08) 0 1px,transparent 1px),
    radial-gradient(circle at 72% 36%,rgba(17,27,33,.07) 0 1px,transparent 1px);
  background-size:auto,22px 22px,26px 26px;
}

body.whatsapp-view .wa-chat > div:not(.wa-chat-pane){
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#667781 !important;
}

body.whatsapp-view .wa-chat > div:not(.wa-chat-pane) i{
  color:#00a884 !important;
}

body.whatsapp-view .wa-bubble--out{
  background:#d9fdd3;
  border:0;
  border-radius:12px 12px 3px 12px;
}

body.whatsapp-view .wa-bubble--in{
  border:0;
  border-radius:12px 12px 12px 3px;
}

body.whatsapp-view .wa-chat-input{
  min-height:62px;
  padding:10px 12px;
  background:#f0f2f5;
}

body.whatsapp-view .wa-tool-btn{
  border:0;
  background:transparent;
  color:#54656f;
}

body.whatsapp-view .wa-input-box{
  min-height:42px;
  border:0;
  border-radius:8px;
  background:#fff;
}

body.whatsapp-view .wa-send-fab{
  background:#00a884;
  box-shadow:none;
}

@media(max-width:768px){
  body.whatsapp-view .topbar{
    display:none;
  }

  body.whatsapp-view .con{
    padding:0;
    padding-bottom:calc(64px + env(safe-area-inset-bottom));
  }

  body.whatsapp-view #viewArea{
    padding-bottom:0;
  }

  body.whatsapp-view .wa-shell{
    height:100% !important;
    min-height:0 !important;
    border:0;
    border-radius:0;
  }

  body.whatsapp-view .wa-topbar{
    min-height:86px;
    align-items:center;
    padding:10px 12px;
  }

  body.whatsapp-view .wa-brand{
    flex:1;
  }

  body.whatsapp-view .wa-top-actions{
    flex-wrap:nowrap;
  }

  body.whatsapp-view .wa-tabs-row{
    padding:0 8px;
  }

  body.whatsapp-view .wa-content{
    overflow:hidden;
    padding:0 !important;
    display:flex !important;
    flex-direction:column !important;
  }

  body.whatsapp-view .wa-chat-stage{
    display:flex !important;
    flex-direction:column;
    flex:1 !important;
    height:100% !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  body.whatsapp-view .wa-contacts{
    width:100%;
    max-height:none !important;
    flex:1 !important;
    height:auto !important;
    border-right:0;
    border-bottom:none;
    overflow:hidden;
    display:flex !important;
    flex-direction:column !important;
  }

  body.whatsapp-view .wa-contacts-hdr{
    padding:10px 12px 8px;
  }

  body.whatsapp-view .wa-contacts-search{
    min-height:42px;
  }

  body.whatsapp-view .wa-contact-list{
    display:flex;
    flex-direction:column;
    gap:0;
    padding:0;
    overflow-x:hidden;
    overflow-y:auto;
    flex:1 !important;
    min-height:0 !important;
    max-height:none !important;
  }

  body.whatsapp-view .wa-contact-item{
    width:100%;
    min-width:unset;
    border:none;
    border-bottom:1px solid rgba(17,27,33,.08);
    border-radius:0;
    padding:12px 14px;
  }

  body.whatsapp-view .wa-contact-item.active{
    border-bottom-color:rgba(17,27,33,.08);
    box-shadow:none;
    background:rgba(0,168,132,0.07);
    border-left:3px solid #00a884;
  }

  body.whatsapp-view .wa-chat{
    flex:1;
    min-height:0;
  }

  body.whatsapp-view .wa-chat-pane .wa-chat-hdr{
    min-height:54px;
    padding:8px 10px;
  }

  body.whatsapp-view .wa-chat-actions{
    gap:4px;
  }

  body.whatsapp-view .wa-chat-body{
    padding:12px 10px !important;
  }

  body.whatsapp-view .wa-chat-input{
    min-height:56px;
    padding:8px;
  }

  body.whatsapp-view .wa-section,
  body.whatsapp-view .wa-settings-grid,
  body.whatsapp-view .wa-broadcast-layout,
  body.whatsapp-view .wa-workflow-layout,
  body.whatsapp-view .wa-festival-layout{
    height:100%;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
  }

  body.whatsapp-view .wa-section{
    gap:10px;
    padding:10px;
  }

  body.whatsapp-view .wa-section-head{
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
    padding:12px;
    border-radius:8px;
    box-shadow:none;
  }

  body.whatsapp-view .wa-section-head .btn-secondary{
    width:100%;
    min-height:40px;
  }

  body.whatsapp-view .wa-settings-grid,
  body.whatsapp-view .wa-broadcast-layout,
  body.whatsapp-view .wa-festival-layout,
  body.whatsapp-view .fest-grid{
    display:grid;
    grid-template-columns:1fr !important;
    gap:10px;
    padding:10px;
    background:#f0f2f5;
    border:0;
    border-radius:0;
  }

  body.whatsapp-view .wa-settings-grid > div[style*="grid-column"]{
    grid-column:auto !important;
  }

  body.whatsapp-view .ws-card,
  body.whatsapp-view .bc-card,
  body.whatsapp-view .wf-builder-head,
  body.whatsapp-view .wf-trigger-card,
  body.whatsapp-view .wf-step-card,
  body.whatsapp-view .wf-guide-card,
  body.whatsapp-view .fest-title-card{
    border-radius:8px;
    padding:12px;
    box-shadow:none;
  }

  body.whatsapp-view .ws-title,
  body.whatsapp-view .bc-title{
    align-items:flex-start;
    flex-wrap:wrap;
    gap:7px;
    margin-bottom:10px;
  }

  body.whatsapp-view .ws-grid,
  body.whatsapp-view .tpl-grid2,
  body.whatsapp-view .wf-form-grid{
    grid-template-columns:1fr !important;
    gap:9px;
  }

  body.whatsapp-view .wa-btns,
  body.whatsapp-view .wa-send-row,
  body.whatsapp-view .fest-broadcast-box,
  body.whatsapp-view .wf-builder-head,
  body.whatsapp-view .wf-trigger-card,
  body.whatsapp-view .wf-step-head{
    flex-direction:column;
    align-items:stretch;
  }

  body.whatsapp-view .wa-btns button,
  body.whatsapp-view .wa-send-row button,
  body.whatsapp-view .wa-send-row select,
  body.whatsapp-view .fest-broadcast-box button,
  body.whatsapp-view .wf-builder-head button,
  body.whatsapp-view .wf-end-card button,
  body.whatsapp-view .bc-card .btn-primary,
  body.whatsapp-view .bc-card .btn-secondary{
    width:100%;
    min-width:0;
    justify-content:center;
  }

  body.whatsapp-view .wa-log-list{
    max-height:320px;
    overflow:auto;
  }

  body.whatsapp-view .wa-log-row{
    display:grid;
    grid-template-columns:34px minmax(0,1fr);
  }

  body.whatsapp-view .wa-log-meta{
    grid-column:2;
    align-items:flex-start;
  }

  body.whatsapp-view .bc-filter-row,
  body.whatsapp-view .wa-tpl-row,
  body.whatsapp-view .wf-vars{
    flex-wrap:nowrap !important;
    overflow-x:auto;
    overflow-y:hidden;
    padding-bottom:2px;
    scrollbar-width:none;
  }

  body.whatsapp-view .bc-filter-row::-webkit-scrollbar,
  body.whatsapp-view .wa-tpl-row::-webkit-scrollbar,
  body.whatsapp-view .wf-vars::-webkit-scrollbar{
    display:none;
  }

  body.whatsapp-view .bc-filter-chip,
  body.whatsapp-view .wa-tpl-chip,
  body.whatsapp-view .wf-vars button,
  body.whatsapp-view .wf-guide-card code{
    flex:0 0 auto;
    white-space:nowrap;
  }

  body.whatsapp-view .bc-leads-grid{
    grid-template-columns:1fr !important;
    max-height:260px !important;
    overflow:auto;
    margin-bottom:0;
  }

  body.whatsapp-view .bc-msg-area{
    min-height:150px;
    max-height:42dvh;
  }

  body.whatsapp-view .wa-message-chip{
    flex:1 1 calc(50% - 8px);
    justify-content:center;
    min-width:128px;
  }

  body.whatsapp-view .wa-phone-preview{
    border-radius:8px;
  }

  body.whatsapp-view .wa-phone-body{
    min-height:220px;
    max-height:48dvh;
    overflow:auto;
  }

  body.whatsapp-view .wa-summary-row{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  body.whatsapp-view .wa-broadcast-main{
    min-width:0;
  }

  body.whatsapp-view .wa-broadcast-main .bc-card[style*="margin-top"]{
    margin-top:10px !important;
  }

  body.whatsapp-view .wa-broadcast-main .bc-card div[style*="margin-left:auto"][style*="display:flex"]{
    width:100%;
    margin-left:0 !important;
    flex-direction:column;
  }

  body.whatsapp-view .wa-workflow-layout{
    display:flex;
    flex-direction:column;
    gap:0;
    background:#f0f2f5;
    border:0;
    border-radius:0;
  }

  body.whatsapp-view .wf-list{
    flex:0 0 auto;
    border:0;
    border-bottom:1px solid rgba(17,27,33,.10);
    background:#fff;
  }

  body.whatsapp-view .wf-list-head{
    padding:10px 12px;
    background:#fff;
  }

  body.whatsapp-view .wf-list-body{
    display:flex;
    flex-direction:row;
    gap:8px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:8px 10px 10px;
    scrollbar-width:none;
  }

  body.whatsapp-view .wf-list-body::-webkit-scrollbar{
    display:none;
  }

  body.whatsapp-view .wf-item{
    width:220px;
    min-width:220px;
    border-radius:8px;
    background:#f0f2f5;
  }

  body.whatsapp-view .wf-builder{
    flex:1;
    min-height:0;
    overflow:visible;
    padding:10px;
    background:#f0f2f5;
  }

  body.whatsapp-view .wf-guide{
    display:none;
  }

  body.whatsapp-view .wf-trigger-card{
    gap:10px;
  }

  body.whatsapp-view .wf-trigger-icon{
    display:none;
  }

  body.whatsapp-view .wf-step-head > div:last-child{
    display:grid !important;
    grid-template-columns:1fr repeat(3,38px);
    gap:6px;
    width:100%;
  }

  body.whatsapp-view .wf-step-head select{
    min-width:0;
    width:100%;
  }

  body.whatsapp-view .wf-step-head button{
    width:38px;
    min-height:34px;
    padding:0;
  }

  body.whatsapp-view .wf-step-body textarea{
    min-height:140px;
  }

  body.whatsapp-view .wf-end-card{
    padding:10px 0;
  }

  body.whatsapp-view .wf-end-card > div:nth-child(2){
    width:100%;
  }

  body.whatsapp-view .wa-festival-layout{
    display:flex;
    flex-direction:column;
    gap:0;
    padding:0;
    background:#f0f2f5;
  }

  body.whatsapp-view .fest-left{
    border-right:0;
    border-bottom:1px solid rgba(17,27,33,.10);
    background:#fff;
  }

  body.whatsapp-view .fest-head{
    padding:9px 12px;
    background:#fff;
  }

  body.whatsapp-view .fest-list{
    display:flex;
    flex-direction:row;
    gap:8px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:8px 10px 10px;
    scrollbar-width:none;
  }

  body.whatsapp-view .fest-list::-webkit-scrollbar{
    display:none;
  }

  body.whatsapp-view .fest-item{
    width:auto;
    min-width:max-content;
    white-space:nowrap;
    border-radius:999px;
    padding:8px 11px;
  }

  body.whatsapp-view .fest-main{
    flex:1;
    min-height:0;
    overflow:visible;
    padding:10px;
    background:#f0f2f5;
  }

  body.whatsapp-view .fest-title-card{
    align-items:flex-start;
    margin-bottom:10px;
  }

  body.whatsapp-view .fest-big-dot{
    width:34px;
    height:34px;
  }

  body.whatsapp-view .fest-grid{
    padding:0;
  }

  body.whatsapp-view #festivalMessage{
    min-height:190px;
  }
}

@media(max-width:480px){
  body.whatsapp-view .wa-topbar{
    min-height:76px;
  }

  body.whatsapp-view .wa-brand-icon{
    width:40px !important;
    height:40px !important;
  }

  body.whatsapp-view .wa-brand-title{
    font-size:16px;
  }

  body.whatsapp-view .wa-tabs-row .wa-tab{
    min-height:44px;
    padding:0 10px;
    font-size:12px;
  }

  body.whatsapp-view .wa-contacts{
    max-height:198px;
  }

  body.whatsapp-view .wa-contact-item{
    width:100%;
    min-width:unset;
  }
}

/* Task + Meeting mobile polish */
@media(max-width:768px){
  .tm-grid{
    display:flex;
    flex-direction:column;
    gap:10px;
    height:auto;
    min-height:0;
  }

  .tm-grid .auto-panel,
  .auto-panel:has(#meeting-list){
    max-height:none;
    min-height:0;
    display:flex;
    flex-direction:column;
    border-radius:12px;
    overflow:hidden;
  }

  .tm-grid .auto-header,
  .auto-panel:has(#meeting-list) .auto-header{
    min-height:54px;
    padding:12px 13px;
    gap:10px;
  }

  .tm-grid .auto-title,
  .auto-panel:has(#meeting-list) .auto-title{
    font-size:15px;
    gap:8px;
  }

  .tm-grid .auto-header .btn-primary,
  .auto-panel .auto-header .btn-primary{
    min-height:38px;
    padding:0 14px;
    border-radius:10px;
  }

  #task-list,
  #meeting-list{
    padding:10px;
    gap:8px;
    max-height:none;
    flex:1;
    overflow:auto;
  }

  .tm-card{
    padding:12px;
    border-radius:12px;
  }

  .tm-card-top{
    gap:10px;
    margin-bottom:8px;
  }

  .tm-card-actions{
    gap:5px;
    flex-wrap:wrap;
  }

  .tm-icon-btn{
    width:30px;
    height:30px;
    border-radius:8px;
  }

  .tm-card .auto-name{
    font-size:13.5px;
  }

  .tm-card .auto-desc{
    font-size:12px;
    line-height:1.5;
  }

  .tm-lead-chip{
    margin-top:8px;
    padding:6px 8px;
    border-radius:9px;
  }

  .tm-lead-chip small{
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .tm-pill-row{
    margin-top:9px;
    gap:6px;
  }

  .tm-meta{
    margin-top:8px;
    font-size:11px;
  }

  .task-meeting-modal{
    width:100% !important;
    max-width:100% !important;
    max-height:94dvh !important;
    border-radius:18px 18px 0 0;
    overflow:auto;
  }

  .task-meeting-modal .modal-title-card,
  #whatsappModal .settings-modal > h2{
    padding:16px 16px 14px;
    padding-right:54px;
    margin-bottom:12px;
  }

  .task-meeting-modal .modal-title-card p{
    display:block;
    font-size:11.5px;
    line-height:1.45;
  }

  .task-meeting-modal > .fr,
  .task-meeting-modal > .mbtns{
    padding-left:16px;
    padding-right:16px;
  }

  .task-meeting-modal > .mbtns{
    padding-top:12px;
    padding-bottom:14px;
    margin-top:12px;
    gap:8px;
  }

  .task-meeting-modal .fr{
    gap:10px;
  }

  .task-meeting-modal .fr .fg{
    width:100%;
  }

  .task-meeting-modal .fr .fg input,
  .task-meeting-modal .fr .fg select,
  .task-meeting-modal .fr .fg textarea{
    min-height:44px;
  }

  .task-meeting-modal .fr .fg textarea{
    min-height:120px;
  }

  .task-meeting-modal .mbtns{
    flex-direction:column;
    align-items:stretch;
  }

  .task-meeting-modal .mbtns button{
    width:100%;
  }
}

@media(max-width:480px){
  .tm-grid{
    gap:8px;
  }

  .tm-grid .auto-header,
  .auto-panel:has(#meeting-list) .auto-header{
    padding:11px 12px;
  }

  .tm-grid .auto-header .btn-primary,
  .auto-panel .auto-header .btn-primary{
    width:40px;
    min-width:40px;
    padding:0;
    justify-content:center;
  }

  .tm-grid .auto-header .btn-primary .btn-lbl,
  .auto-panel .auto-header .btn-primary .btn-lbl{
    display:none;
  }

  .tm-card{
    padding:11px;
  }

  .tm-card-top{
    align-items:flex-start;
  }

  .tm-card-actions{
    justify-content:flex-end;
  }

  .tm-lead-chip{
    flex-wrap:wrap;
  }

  .tm-lead-chip small{
    display:block;
    width:100%;
  }

  .task-meeting-modal{
    max-height:96dvh !important;
    border-radius:16px 16px 0 0;
  }

  .task-meeting-modal .modal-title-card{
    padding:14px 14px 12px;
  }

  .task-meeting-modal .modal-title-card h2{
    font-size:16px;
  }

  .task-meeting-modal .modal-title-card p{
    display:none;
  }

  .task-meeting-modal > .fr,
  .task-meeting-modal > .mbtns{
    padding-left:14px;
    padding-right:14px;
  }
}

@media(max-width:768px){
  body.task-meeting-view .con{
    padding:8px;
    padding-bottom:calc(76px + env(safe-area-inset-bottom));
  }

  body.task-meeting-view .sr{
    display:none;
  }

  body.task-meeting-view #viewArea{
    overflow:auto !important;
    -webkit-overflow-scrolling:touch;
    padding-bottom:0;
  }

  body.task-meeting-view .mob-fab{
    display:none !important;
  }

  body.task-meeting-view .tm-grid .auto-panel,
  body.task-meeting-view .auto-panel:has(#meeting-list){
    box-shadow:0 1px 4px rgba(0,0,0,.05);
    border-radius:14px;
  }

  body.task-meeting-view .tm-grid .auto-header,
  body.task-meeting-view .auto-panel:has(#meeting-list) .auto-header{
    align-items:center;
  }

  body.task-meeting-view .tm-grid .auto-header .btn-primary,
  body.task-meeting-view .auto-panel .auto-header .btn-primary{
    font-size:0;
    width:40px;
    min-width:40px;
    height:40px;
    padding:0;
    flex-shrink:0;
    box-shadow:none;
  }

  body.task-meeting-view .tm-grid .auto-header .btn-primary i,
  body.task-meeting-view .auto-panel .auto-header .btn-primary i{
    font-size:16px;
    margin:0;
  }

  body.task-meeting-view .tm-card{
    min-height:96px;
    padding:13px;
    overflow:visible;
  }

  body.task-meeting-view .tm-card-main{
    display:grid;
    grid-template-columns:42px minmax(0,1fr) auto;
    grid-template-areas:
      "icon title actions"
      "icon desc actions"
      "lead lead lead"
      "pills pills pills"
      "meta meta meta"
      "link link link";
    align-items:start;
    column-gap:10px;
  }

  body.task-meeting-view .tm-card-top{
    display:contents;
  }

  body.task-meeting-view .tm-card-icon{
    grid-area:icon;
    width:38px;
    height:38px;
    border-radius:11px;
  }

  body.task-meeting-view .tm-card-actions{
    grid-area:actions;
    align-self:start;
    flex-wrap:nowrap;
  }

  body.task-meeting-view .tm-card .auto-name{
    grid-area:title;
    font-size:14px;
    line-height:1.35;
    min-height:19px;
    padding-top:1px;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  body.task-meeting-view .tm-card .auto-desc{
    grid-area:desc;
    font-size:12px;
    line-height:1.5;
    min-height:18px;
    max-height:38px;
    overflow:hidden;
  }

  body.task-meeting-view .tm-lead-chip{
    grid-area:lead;
    max-width:100%;
  }

  body.task-meeting-view .tm-pill-row{
    grid-area:pills;
  }

  body.task-meeting-view .tm-meta{
    grid-area:meta;
  }

  body.task-meeting-view .tm-link-row{
    grid-area:link;
  }
}

@media(max-width:480px){
  body.task-meeting-view .tm-grid .auto-header,
  body.task-meeting-view .auto-panel:has(#meeting-list) .auto-header{
    padding:11px 12px;
  }

  body.task-meeting-view .tm-grid .auto-title,
  body.task-meeting-view .auto-panel:has(#meeting-list) .auto-title{
    font-size:14px;
  }

  body.task-meeting-view .tm-grid .auto-header .btn-primary,
  body.task-meeting-view .auto-panel .auto-header .btn-primary{
    width:38px;
    min-width:38px;
    height:38px;
  }

  body.task-meeting-view .tm-card{
    padding:12px;
    border-radius:12px;
  }

  body.task-meeting-view .tm-card-main{
    grid-template-columns:38px minmax(0,1fr) auto;
    column-gap:9px;
  }

  body.task-meeting-view .tm-card-actions{
    gap:4px;
  }

  body.task-meeting-view .tm-icon-btn{
    width:28px;
    height:28px;
  }
}


/* =========================================
   USERS MODAL  — Team Management
   Replaces all inline styles in users-modal.php
========================================= */

/* ── Overlay (shared) ── */
.um-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(17,24,39,.55);
    z-index:9999;
    overflow-y:auto;
    padding:24px 12px;
    -webkit-overflow-scrolling:touch;
}

.um-overlay-center{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(17,24,39,.55);
    z-index:10000;
    align-items:center;
    justify-content:center;
    padding:20px;
}

.um-overlay-top{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(17,24,39,.55);
    z-index:10001;
    overflow-y:auto;
    padding:24px 12px;
    -webkit-overflow-scrolling:touch;
}

/* ── Modal cards ── */
.um-card{
    width:960px;
    max-width:100%;
    background:var(--surface);
    margin:0 auto;
    border-radius:var(--radius);
    box-shadow:var(--shadow3);
    overflow:hidden;
}

.um-card-sm{
    width:480px;
    max-width:100%;
    background:var(--surface);
    border-radius:var(--radius);
    box-shadow:var(--shadow3);
    overflow:hidden;
    margin:auto;
}

.um-card-md{
    width:800px;
    max-width:100%;
    background:var(--surface);
    margin:0 auto;
    border-radius:var(--radius);
    box-shadow:var(--shadow3);
    overflow:hidden;
}

/* ── Modal header ── */
.um-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 22px;
    border-bottom:1px solid var(--border);
    background:var(--surface2);
    gap:12px;
    flex-wrap:wrap;
}

.um-header-left{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}

.um-header-icon{
    width:38px;
    height:38px;
    min-width:38px;
    border-radius:12px;
    background:var(--sidebar);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:18px;
}

.um-header-title{
    font-weight:700;
    font-size:15px;
    color:var(--text);
}

.um-header-sub{
    font-size:12px;
    color:var(--text3);
    margin-top:1px;
}

.um-header-actions{
    display:flex;
    gap:8px;
    align-items:center;
    flex-shrink:0;
}

/* ── Close button ── */
.um-close-btn{
    width:32px;
    height:32px;
    border:none;
    background:var(--surface3);
    border-radius:10px;
    cursor:pointer;
    font-size:16px;
    color:var(--text2);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.15s;
}
.um-close-btn:hover{
    background:var(--border2);
    color:var(--text);
}

/* ── Header buttons ── */
.um-btn-outline{
    display:flex;
    align-items:center;
    gap:6px;
    padding:8px 14px;
    border:1.5px solid var(--border2);
    background:var(--surface);
    border-radius:10px;
    font-size:13px;
    font-weight:500;
    cursor:pointer;
    color:var(--text2);
    transition:.15s;
    white-space:nowrap;
}
.um-btn-outline:hover{
    border-color:var(--accent);
    color:var(--accent);
}

.um-btn-primary{
    display:flex;
    align-items:center;
    gap:6px;
    padding:8px 16px;
    background:var(--accent);
    color:#fff;
    border:none;
    border-radius:10px;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    transition:.15s;
    white-space:nowrap;
}
.um-btn-primary:hover{
    background:var(--accent2);
}

/* ── Table section ── */
.um-table-wrap{
    padding:20px 22px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

.um-table{
    width:100%;
    border-collapse:collapse;
    font-size:13.5px;
    min-width:600px;
}

.um-table th{
    text-align:left;
    padding:10px 14px;
    color:var(--text3);
    font-weight:600;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.4px;
    border-bottom:1px solid var(--border);
    background:var(--surface2);
}

.um-table td{
    padding:12px 14px;
    border-bottom:1px solid var(--border);
    color:var(--text2);
    vertical-align:middle;
}

.um-table tr:last-child td{
    border-bottom:none;
}

.um-table tr:hover td{
    background:var(--surface2);
}

/* ── Avatar ── */
.um-avatar{
    display:flex;
    align-items:center;
    gap:10px;
}

.um-avatar-dot{
    width:34px;
    height:34px;
    min-width:34px;
    border-radius:50%;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    font-weight:700;
}

.um-avatar-dot.is-admin{
    background:var(--accent);
}

.um-avatar-dot.is-emp{
    background:var(--blue);
}

.um-avatar-name{
    font-weight:500;
    color:var(--text);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:140px;
}

.um-avatar-email{
    font-size:11.5px;
    color:var(--text3);
    margin-top:1px;
    display:none;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:200px;
}

/* ── Badges ── */
.um-badge{
    display:inline-block;
    padding:3px 10px;
    border-radius:999px;
    font-size:11.5px;
    font-weight:600;
    white-space:nowrap;
}

.um-badge.admin{
    background:var(--accent-bg);
    color:var(--accent);
    border:1px solid var(--accent-border);
}

.um-badge.emp{
    background:#dceeff;
    color:var(--blue);
    border:1px solid #b8d8ff;
}

.um-badge.active{
    background:#d8f5e8;
    color:var(--green);
    border:1px solid #b8e8d0;
}

.um-badge.inactive{
    background:#ffe8e8;
    color:var(--red);
    border:1px solid #ffc8c8;
}

/* ── Action buttons in table ── */
.um-action-row{
    display:flex;
    gap:6px;
    flex-wrap:nowrap;
}

.um-act-btn{
    padding:5px 12px;
    border:none;
    border-radius:8px;
    font-size:12px;
    cursor:pointer;
    font-weight:500;
    display:flex;
    align-items:center;
    gap:4px;
    transition:.15s;
    white-space:nowrap;
}

.um-act-btn.edit{
    background:var(--surface3);
    color:var(--text);
}
.um-act-btn.edit:hover{
    background:var(--border2);
}

.um-act-btn.disable{
    background:#fff0f0;
    color:var(--red);
}
.um-act-btn.disable:hover{
    background:#ffe0e0;
}

/* ── Form body ── */
.um-form-body{
    padding:22px;
}

.um-field{
    margin-bottom:14px;
}

.um-label{
    font-size:12px;
    font-weight:600;
    color:var(--text2);
    display:block;
    margin-bottom:5px;
}

.um-input{
    width:100%;
    padding:10px 12px;
    border:1.5px solid var(--border2);
    border-radius:10px;
    font-size:13.5px;
    box-sizing:border-box;
    outline:none;
    background:var(--surface);
    color:var(--text);
    transition:.15s;
    font-family:inherit;
}
.um-input:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(232,93,4,.08);
}

.um-row2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-bottom:14px;
}

.um-note{
    font-size:12px;
    color:var(--text3);
    background:var(--surface2);
    border:1px solid var(--border);
    padding:10px 12px;
    border-radius:10px;
    line-height:1.6;
    margin-bottom:16px;
    display:flex;
    align-items:flex-start;
    gap:7px;
}

.um-note i{
    color:var(--blue);
    font-size:14px;
    margin-top:1px;
    flex-shrink:0;
}

.um-form-actions{
    display:flex;
    gap:10px;
}

.um-save-btn{
    flex:1;
    padding:11px;
    background:var(--accent);
    color:#fff;
    border:none;
    border-radius:10px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:.15s;
    font-family:inherit;
}
.um-save-btn:hover{
    background:var(--accent2);
}
.um-save-btn:disabled{
    opacity:.6;
    cursor:not-allowed;
}

.um-cancel-btn{
    padding:11px 18px;
    background:var(--surface2);
    color:var(--text2);
    border:1.5px solid var(--border2);
    border-radius:10px;
    font-size:14px;
    cursor:pointer;
    font-family:inherit;
    transition:.15s;
}
.um-cancel-btn:hover{
    background:var(--surface3);
}

/* ── Empty / loading states ── */
.um-empty{
    text-align:center;
    padding:40px 20px;
    color:var(--text3);
    font-size:14px;
}

/* ── Mobile responsive ── */
@media(max-width:768px){

    .um-overlay,
    .um-overlay-top{
        padding:0;
        align-items:flex-end;
    }

    /* Slide up from bottom on mobile */
    .um-card,
    .um-card-md{
        width:100%;
        max-width:100%;
        border-radius:20px 20px 0 0;
        max-height:92dvh;
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
    }

    .um-card-sm{
        width:100%;
        max-width:100%;
        border-radius:20px 20px 0 0;
        max-height:94dvh;
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
    }

    .um-overlay-center{
        padding:0;
        align-items:flex-end;
    }

    .um-header{
        padding:14px 16px;
        flex-wrap:nowrap;
    }

    .um-header-sub{
        display:none;
    }

    /* Stack action buttons on small screens */
    .um-header-actions{
        gap:6px;
    }

    /* Hide label text in outline button, keep icon */
    .um-btn-outline .um-btn-lbl{
        display:none;
    }

    .um-btn-outline{
        padding:8px 10px;
    }

    .um-table-wrap{
        padding:0;
        overflow-x:hidden;
    }

    /* Mobile: table → card rows */
    .um-table{
        font-size:12.5px;
        width:100%;
        table-layout:fixed;
    }

    .um-table th,
    .um-table td{
        padding:10px 10px;
    }

    /* Hide less-important columns on mobile */
    .um-col-mobile-hide{
        display:none;
    }

    /* Mobile card-style rows */
    .um-table tbody tr{
        display:block;
        padding:12px 16px;
        border-bottom:1px solid var(--border);
        position:relative;
    }
    .um-table thead{
        display:none;
    }
    .um-table td{
        display:inline-block;
        padding:0;
        border:none;
        vertical-align:middle;
    }
    /* Name row — full width */
    .um-table td:nth-child(1){
        display:block;
        width:100%;
        margin-bottom:6px;
    }
    /* Email — hide on mobile, show in avatar subtitle instead */
    .um-table td:nth-child(2){
        display:none;
    }
    /* Mobile hide */
    .um-table td.um-col-mobile-hide{
        display:none;
    }
    /* Role badge */
    .um-table td:nth-child(4){
        margin-right:6px;
    }
    /* Status badge */
    .um-table td:nth-child(5){
        margin-right:6px;
    }
    /* Actions — right side */
    .um-table td:last-child{
        display:block;
        width:100%;
        margin-top:8px;
    }

    /* Action buttons: icon only on mobile */
    .um-act-lbl{
        display:none;
    }
    .um-act-btn{
        padding:7px 9px;
        border-radius:8px;
    }
    .um-action-row{
        gap:7px;
    }

    /* Avatar name truncate */
    .um-avatar-name{
        max-width:180px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    /* Email visible on mobile (below name) */
    .um-avatar-email{
        display:block;
    }

    .um-form-body{
        padding:16px;
    }

    .um-row2{
        grid-template-columns:1fr;
        gap:0;
    }

    .um-form-actions{
        flex-direction:column;
    }

    .um-cancel-btn{
        width:100%;
        text-align:center;
    }
}

@media(max-width:480px){

    .um-header{
        padding:12px 14px;
    }

    .um-header-icon{
        width:34px;
        height:34px;
        min-width:34px;
        font-size:16px;
    }

    .um-header-title{
        font-size:14px;
    }

    .um-table td,
    .um-table th{
        padding:9px 8px;
    }

    .um-avatar-name{
        max-width:90px;
    }

    .um-act-btn .um-act-lbl{
        display:none;
    }

    .um-act-btn{
        padding:6px 8px;
    }
}

/* Dark mode overrides */
[data-theme="dark"] .um-badge.emp{
    background:rgba(37,99,235,.2);
    border-color:rgba(37,99,235,.35);
}

[data-theme="dark"] .um-badge.active{
    background:rgba(31,169,113,.15);
    border-color:rgba(31,169,113,.3);
}

[data-theme="dark"] .um-badge.inactive{
    background:rgba(217,48,37,.15);
    border-color:rgba(217,48,37,.3);
}

[data-theme="dark"] .um-act-btn.disable{
    background:rgba(217,48,37,.12);
}

[data-theme="dark"] .um-act-btn.disable:hover{
    background:rgba(217,48,37,.22);
}
/* ── Assign Leads Modal styles ── */
.al-row:hover { background: var(--surface2); }
.al-checked   { background: rgba(254,105,9,.05) !important; }
.al-other     { background: var(--surface) !important; cursor: not-allowed !important; }

/* ═══════════════════════════════════════════════
   PATCH v2 — Pipeline + Stats Ticker + Tasks Fix
═══════════════════════════════════════════════ */

/* ── Pipeline: premium column cards ── */
.pipe{
  display:grid;
  grid-template-columns:repeat(6,230px);
  gap:12px;
  min-width:max-content;
  align-items:start;
}
.pcol{
  border-radius:16px;
  overflow:hidden;
  min-width:0;
}
.pc-hdr{
  padding:12px 13px;
}
.pc-c{
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:calc(100dvh - 200px);
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}
.pc-c::-webkit-scrollbar{width:3px}
.pc-c::-webkit-scrollbar-thumb{background:var(--border2);border-radius:99px}

/* Pipeline card */
.pk{
  background:var(--surface);
  border-radius:12px;
  padding:11px 12px;
  cursor:pointer;
  transition:transform .18s,box-shadow .18s;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
  border:1px solid var(--border);
}
.pk:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 14px rgba(0,0,0,.1);
}

/* ── Stats row: MOBILE TICKER ── */
@media(max-width:768px){
  .sr{
    display:flex !important;
    grid-template-columns:none !important;
    flex-direction:row;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    height:36px;
    flex-shrink:0;
    border-bottom:1px solid var(--border2);
    background:var(--surface);
  }
  .sr::-webkit-scrollbar{display:none}
  .sc{
    display:flex !important;
    flex-direction:row;
    align-items:center;
    gap:7px;
    padding:0 14px !important;
    border-right:1px solid var(--border);
    border-bottom:none;
    flex-shrink:0;
    height:36px;
    white-space:nowrap;
    min-width:max-content;
    grid-column:auto !important;
  }
  /* Show all cards as ticker items */
  .sc:nth-child(3),
  .sc:nth-child(4),
  .sc:nth-child(5){display:flex !important}
  .sc-icon{display:none !important}
  .sn{font-size:13px !important;font-weight:700;letter-spacing:-.3px}
  .sl{font-size:10.5px !important;color:var(--text3);margin:0 !important}
  .pos,.neg{font-size:10px;margin:0 !important;display:inline !important}
  .sc::after{display:none}
  /* Separator dot between value and label */
  .sc .sn::after{content:'';display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--border2);margin:0 5px;vertical-align:middle}
}

/* ── Tasks & Meetings: height fix ── */
body.task-meeting-view .sr{display:none !important} /* stats hide in task view */

@media(min-width:769px){
  .tm-grid{
    height:calc(100dvh - 145px) !important;
  }
  .tm-grid .auto-panel,
  .auto-panel:has(#meeting-list){
    max-height:calc(100dvh - 145px) !important;
  }
}

@media(max-width:960px){
  .tm-grid{
    grid-template-columns:1fr !important;
    height:auto !important;
    overflow-y:auto;
    max-height:calc(100dvh - 110px);
  }
  .tm-grid .auto-panel,
  .auto-panel:has(#meeting-list){
    max-height:52dvh !important;
  }
  #task-list,#meeting-list{
    max-height:calc(52dvh - 80px) !important;
  }
}

@media(max-width:768px){
  .tm-card{
    padding:11px;
    border-radius:12px;
  }
  .tm-card-icon{
    width:28px;height:28px;font-size:13px;border-radius:9px;
  }
}

/* ── Drawer: fix duplicate + mobile polish ── */
.drawer{
  position:fixed;right:-420px;top:0;bottom:0;
  width:420px;
  background:var(--surface);
  border-left:1px solid var(--border);
  box-shadow:-8px 0 32px rgba(0,0,0,.12);
  z-index:1200;
  transition:right .28s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;overflow:hidden;
}
.drawer.open{right:0}

@media(max-width:900px){
  .drawer{width:360px;right:-360px}
}
@media(max-width:768px){
  .drawer{width:100vw;right:-100vw;border-radius:0;border-left:none}
  .drawer.open{right:0}
}

/* ═══════════════════════════════════════════════
   PATCH v3 — Tasks Compact + WA Mobile + Unread
═══════════════════════════════════════════════ */

/* badge pop animation */
@keyframes badge-pop{from{transform:scale(0)}to{transform:scale(1)}}

/* ── Tasks compact cards ── */
.tm-card{
  padding:12px 14px !important;
  border-radius:13px !important;
}
.tm-card::before{
  height:3px;
  border-radius:0;
}
.tm-meta{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:11px;
  color:var(--text3);
}
.auto-panel{min-height:0}
#task-list,#meeting-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px;
  flex:1;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

/* ── WA: mobile back button ── */
.wa-back-btn{
  display:none;
  width:34px;height:34px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--surface2);
  color:var(--text2);
  cursor:pointer;
  align-items:center;justify-content:center;
  font-size:16px;
  flex-shrink:0;
  transition:all .15s;
}
.wa-back-btn:hover{background:var(--surface3)}

/* ── WA unread badge ── */
.wci-unread{
  background:#1da851 !important;
  animation:badge-pop .3s cubic-bezier(.34,1.56,.64,1);
}

/* ── WA Mobile: full-screen chat ── */
@media(max-width:768px){
  /* Contacts full width by default */
  .wa-wrap{
    position:relative;
    overflow:hidden;
    height:100%;
    min-height:0;
    flex:1;
  }
  .wa-contacts{
    width:100% !important;
    border-right:none !important;
    position:absolute;
    left:0;top:0;bottom:0;right:0;
    z-index:2;
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  .wa-chat-pane,
  .wa-chat{
    position:absolute;
    left:0;top:0;right:0;bottom:0;
    transform:translateX(100%);
    z-index:3;
    transition:transform .28s cubic-bezier(.4,0,.2,1);
  }

  /* Chat open: contacts slide left, chat slides in */
  body.wa-chat-open .wa-contacts{
    transform:translateX(-100%);
  }
  body.wa-chat-open .wa-chat-pane,
  body.wa-chat-open .wa-chat{
    transform:translateX(0);
  }

  /* Full screen chat — hide header & tabs like real WhatsApp */
  body.wa-chat-open .wa-topbar,
  body.wa-chat-open .wa-tabs-row{
    display:none !important;
  }
  body.wa-chat-open .wa-shell{
    height:100dvh !important;
    border-radius:0 !important;
    border:none !important;
  }
  body.wa-chat-open .wa-content{
    padding:0 !important;
  }
  body.wa-chat-open .wa-chat-stage,
  body.wa-chat-open .wa-wrap{
    border-radius:0 !important;
  }

  /* Show back button on mobile */
  .wa-back-btn{
    display:flex !important;
  }

  /* Contacts list fills remaining space after header+search */
  .wa-contact-list{
    flex:1;
    min-height:0;
    max-height:none;
    overflow-y:auto;
  }
}

/* ═══════════════════════════════════════════════
   PATCH v4 — Drawer Redesign + Sidebar Mobile
═══════════════════════════════════════════════ */

/* ── Drawer layout ── */
.drawer{
  position:fixed;right:-440px;top:0;bottom:0;
  width:440px;max-width:100%;
  background:var(--surface);
  border-left:1px solid var(--border);
  box-shadow:-8px 0 40px rgba(0,0,0,.14);
  z-index:1200;
  transition:right .3s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;overflow:hidden;
}
.drawer.open{right:0}

.dbody-inner{
  padding:16px 18px;
  overflow-y:auto;
  flex:1;
  -webkit-overflow-scrolling:touch;
}
.dbody-inner::-webkit-scrollbar{width:4px}
.dbody-inner::-webkit-scrollbar-thumb{background:var(--border2);border-radius:99px}

/* Drawer sections */
.dr-section{margin-bottom:2px}
.dr-sec-title{
  font-size:9.5px;font-weight:700;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--text3);
  margin-bottom:10px;
}
.dr-divider{height:1px;background:var(--border);margin:16px 0}

/* Drawer editable fields */
.dr-grid2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.dr-field{display:flex;flex-direction:column;gap:4px}
.dr-field label{
  font-size:10px;font-weight:700;color:var(--text3);
  letter-spacing:.6px;text-transform:uppercase;
}
.dr-field input,
.dr-field select,
.dr-field textarea{
  padding:8px 10px;
  border:1.5px solid var(--border);
  border-radius:9px;
  background:var(--surface2);
  color:var(--text);
  font-size:13px;
  font-family:'Inter',sans-serif;
  outline:none;
  transition:border-color .15s,background .15s;
  width:100%;
  box-sizing:border-box;
}
.dr-field input:focus,
.dr-field select:focus,
.dr-field textarea:focus{
  border-color:var(--accent-border);
  background:var(--surface);
  box-shadow:0 0 0 3px rgba(254,105,9,.07);
}
.dr-field textarea{resize:vertical;min-height:80px;line-height:1.6}

/* Quick Actions */
.qa-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:7px;
  margin-bottom:4px;
}
.qa{
  display:flex;flex-direction:column;align-items:center;
  gap:5px;padding:10px 6px;
  border-radius:11px;
  border:1px solid var(--border);
  background:var(--surface2);
  cursor:pointer;text-decoration:none;color:var(--text2);
  font-size:11px;font-weight:500;
  transition:all .15s;
}
.qa:hover{background:var(--surface3);border-color:var(--border2);color:var(--text)}
.qa i{font-size:19px}
.qa.wa:hover{background:rgba(37,211,102,.1);border-color:rgba(37,211,102,.25);color:#1da851}
.qa.inv:hover{background:var(--amber-bg,rgba(154,90,0,.07));border-color:var(--amber-border,rgba(154,90,0,.22));color:var(--amber)}

/* Notes */
.notes-f{
  width:100%;background:var(--surface2);
  border:1.5px solid var(--border);
  border-radius:10px;padding:10px 12px;
  color:var(--text);font-size:13px;
  font-family:'Inter',sans-serif;
  outline:none;resize:vertical;min-height:90px;
  line-height:1.6;transition:all .15s;
  box-sizing:border-box;
}
.notes-f:focus{border-color:var(--accent-border);box-shadow:0 0 0 3px rgba(254,105,9,.07);background:var(--surface)}

/* Tags */
.tag-input-wrap{display:flex;gap:7px;margin-bottom:8px}
.tag-input-wrap input{
  flex:1;background:var(--surface2);border:1.5px solid var(--border);
  border-radius:9px;padding:7px 10px;color:var(--text);
  font-size:12.5px;font-family:'Inter',sans-serif;outline:none;
  transition:border-color .15s;
}
.tag-input-wrap input:focus{border-color:var(--accent-border)}
.tags-list{display:flex;flex-wrap:wrap;gap:6px;min-height:16px}
.tag-chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:99px;
  font-size:12px;font-weight:500;
  background:var(--accent-bg);border:1px solid var(--accent-border);
  color:var(--accent);
}
.tag-chip button{background:none;border:none;cursor:pointer;color:var(--accent);font-size:14px;line-height:1;padding:0;opacity:.7}
.tag-chip button:hover{opacity:1}

/* Drawer mobile */
@media(max-width:768px){
  .drawer{width:100vw;right:-100vw;border-left:none;border-radius:0}
  .drawer.open{right:0}
  .dr-grid2{grid-template-columns:1fr}
  .qa-grid{grid-template-columns:repeat(4,1fr)}
}

/* -----------------------------------------------
   FIX: qa-grid inside drawer must always stay as
   a horizontal grid — responsive breakpoints set
   .qa-grid to grid-template-columns:1fr !important
   which stacks buttons vertically inside the drawer.
   Drawer has fixed width so 4-col always fits.
----------------------------------------------- */
.drawer .qa-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 7px !important;
}

.drawer .qa {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 10px 6px !important;
  border-radius: 11px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface2) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  color: var(--text2) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.drawer .qa i {
  font-size: 19px !important;
}

.drawer .qa span {
  display: block !important;
}

.drawer .qa.wa:hover {
  background: rgba(37,211,102,.1) !important;
  border-color: rgba(37,211,102,.25) !important;
  color: #1da851 !important;
}

.drawer .qa.inv:hover {
  background: var(--warning-bg, rgba(217,119,6,.12)) !important;
  border-color: var(--warning-border, rgba(217,119,6,.24)) !important;
  color: var(--yellow) !important;
}

/* ── Save button spin animation ── */
@keyframes spin{to{transform:rotate(360deg)}}

/* ══════════════════════════════════
   SIDEBAR MOBILE — Clean fixes only
══════════════════════════════════ */

/* Overlay blur upgrade */
.sb-overlay{
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  background:rgba(0,0,0,.45);
}

@media(max-width:768px){
  /* Bottom nav: glassmorphism */
  .mob-nav{
    background:rgba(255,255,255,.97) !important;
    backdrop-filter:blur(20px) !important;
    -webkit-backdrop-filter:blur(20px) !important;
    border-top:1px solid rgba(0,0,0,.07) !important;
    box-shadow:0 -4px 24px rgba(0,0,0,.08) !important;
    padding:4px 8px !important;
    padding-bottom:max(6px,env(safe-area-inset-bottom)) !important;
  }
  [data-theme="dark"] .mob-nav{
    background:rgba(17,24,39,.97) !important;
  }
  .mn-item{
    padding:5px 8px !important;
    border-radius:10px !important;
    min-width:48px !important;
    gap:2px !important;
  }
  .mn-item.active{
    background:rgba(254,105,9,.08);
  }
  .mn-item i{font-size:21px !important}
}

@media(max-width:480px){
  .dr-grid2{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════
   TASKS — Mobile Tab Switcher
═══════════════════════════════════════ */

/* Tab bar: hidden on desktop, flex on mobile */
.tm-tab-bar{ display:none }

/* Hide inactive panel on mobile */
@media(max-width:768px){
  .tm-mob-hidden{ display:none !important }

  .tm-tab-bar{
    display:flex;
    gap:8px;
    padding:10px 10px 4px;
    flex-shrink:0;
  }
  .tm-tab{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:10px 12px;
    border-radius:12px;
    border:1.5px solid var(--border);
    background:var(--surface2);
    color:var(--text3);
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    font-family:'Inter',sans-serif;
    transition:all .18s;
  }
  .tm-tab i{ font-size:15px }
  .tm-tab-count{
    background:var(--border2);
    color:var(--text3);
    font-size:10px;font-weight:700;
    padding:1px 6px;border-radius:99px;
    min-width:18px;text-align:center;
  }
  .tm-tab-active{
    background:var(--accent);
    border-color:var(--accent);
    color:#fff;
    box-shadow:0 4px 14px rgba(254,105,9,.3);
  }
  .tm-tab-active .tm-tab-count{ background:rgba(255,255,255,.25);color:#fff }
  .tm-tab-active i{ color:#fff }

  /* Grid: single column, full height on mobile */
  .tm-grid{
    grid-template-columns:1fr !important;
    gap:0 !important;
    padding:0 10px 10px !important;
    height:calc(100dvh - 160px) !important;
    min-height:0;
  }
  #tm-tasks-panel,
  #tm-meetings-panel{
    height:100% !important;
    max-height:100% !important;
    flex:1;
    min-height:0;
  }
  #task-list,
  #meeting-list{
    flex:1;
    min-height:0;
    max-height:none !important;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
}

/* ═══════════════════════════════════════════
   TASKS & MEETINGS — Clean Full-Screen Layout
═══════════════════════════════════════════ */

/* Main wrapper — fills the content area */
.tm-view{
  display:flex;
  flex-direction:column;
  height:calc(100dvh - 130px);
  min-height:0;
  gap:0;
}

/* ── Tab bar (always visible) ── */
.tm-tabs{
  display:flex;
  gap:10px;
  padding:12px 16px 10px;
  flex-shrink:0;
}
.tm-tab{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:10px 14px;
  border-radius:12px;
  border:1.5px solid var(--border);
  background:var(--surface2);
  color:var(--text3);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  font-family:'Inter',sans-serif;
  transition:all .18s;
}
.tm-tab i{ font-size:15px }
.tm-tab.active{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
  box-shadow:0 4px 16px rgba(254,105,9,.28);
}
.tm-cnt{
  font-size:10px;font-weight:700;
  padding:1px 7px;border-radius:99px;
  background:rgba(0,0,0,.1);color:inherit;
  min-width:20px;text-align:center;
}
.tm-tab.active .tm-cnt{ background:rgba(255,255,255,.25) }

/* ── Panel ── */
.tm-panel{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
  background:var(--surface);
  border-radius:16px;
  margin:0 12px 12px;
  border:1px solid var(--border);
  box-shadow:0 2px 12px rgba(0,0,0,.06);
  overflow:hidden;
}
.tm-hidden{ display:none !important }

/* Panel header */
.tm-panel-hdr{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  background:var(--surface2);
  flex-shrink:0;
}
.tm-panel-title{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:'Syne',sans-serif;
  font-size:16px;
  font-weight:800;
  color:var(--text);
}
.tm-panel-title i{ font-size:17px;color:var(--accent) }

/* Scrollable list */
.tm-list{
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.tm-list::-webkit-scrollbar{ width:4px }
.tm-list::-webkit-scrollbar-thumb{ background:var(--border2);border-radius:99px }

/* ── Card ── */
.tmc{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:13px;
  padding:13px 14px;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
  transition:transform .18s,box-shadow .18s;
}
.tmc:hover{ transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.09) }
.tmc-task{ border-top:3px solid #e85d04 }
.tmc-meeting{ border-top:3px solid #1255a8 }

.tmc-top{
  display:flex;
  align-items:flex-start;
  gap:11px;
}
.tmc-icon{
  width:34px;height:34px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;flex-shrink:0;
}
.tmc-task .tmc-icon{
  background:rgba(232,93,4,.09);
  border:1px solid rgba(232,93,4,.2);
  color:#e85d04;
}
.tmc-meeting .tmc-icon{
  background:rgba(18,85,168,.09);
  border:1px solid rgba(18,85,168,.2);
  color:#1255a8;
}
.tmc-body{ flex:1;min-width:0 }
.tmc-row{
  display:flex;align-items:flex-start;
  justify-content:space-between;gap:8px;
  margin-bottom:4px;
}
.tmc-title{
  font-size:13.5px;font-weight:700;
  color:var(--text);line-height:1.35;
}
.tmc-acts{
  display:flex;gap:5px;flex-shrink:0;
}
.tmc-desc{
  font-size:12px;color:var(--text2);
  margin-top:3px;line-height:1.5;
}
.tmc-footer{
  display:flex;align-items:center;
  flex-wrap:wrap;gap:5px;
  margin-top:9px;padding-top:8px;
  border-top:1px solid var(--border);
}
.tmc-date{
  display:flex;align-items:center;gap:4px;
  font-size:11px;color:var(--text3);
  margin-left:auto;
}
.tmc-date i{ font-size:11px }
.tmc-link{
  display:inline-flex;align-items:center;gap:5px;
  margin-top:8px;font-size:12px;
  padding:5px 12px;
  background:rgba(18,85,168,.07);
  border:1px solid rgba(18,85,168,.22);
  border-radius:99px;color:var(--blue);
  font-weight:600;text-decoration:none;
  transition:all .15s;
}
.tmc-link:hover{
  background:rgba(18,85,168,.14);
}

/* Empty state */
.tm-empty{
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:10px;padding:48px 20px;
  color:var(--text3);
}
.tm-empty i{ font-size:40px;opacity:.25 }
.tm-empty span{ font-size:13px }

/* Desktop: side by side */
@media(min-width:769px){
  .tm-view{
    flex-direction:row;
    flex-wrap:nowrap;
    height:calc(100dvh - 130px);
    padding:0;
    gap:0;
  }
  .tm-tabs{ display:none }  /* hide mobile tabs on desktop */
  .tm-panel{
    flex:1;
    display:flex !important; /* always show both on desktop */
    margin:0 0 0 0;
    border-radius:16px;
    height:100%;
  }
  .tm-hidden{ display:flex !important } /* override hidden on desktop */
  .tm-view .tm-panel:first-of-type{ margin-right:8px }
  .tm-view .tm-panel:last-of-type{ margin-left:8px }
  /* Desktop: show "Tasks" and "Meetings" labels in panel header */
}

@media(max-width:768px){
  .tm-view{
    height:calc(100dvh - 115px);
  }
}

/* ═══════════════════════════════════════════
   TASKS v60 STYLE — Clean Reference Design
═══════════════════════════════════════════ */

/* Outer wrapper */
.tasks-view-wrap{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* Mobile tab bar */
.tm-tab-bar2{
  display:none;
  gap:10px;
  padding:10px 12px 8px;
  flex-shrink:0;
}
.tm-tab2{
  flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 14px;border-radius:12px;
  border:1.5px solid var(--border);background:var(--surface2);
  color:var(--text3);font-size:13px;font-weight:600;
  cursor:pointer;font-family:'Inter',sans-serif;transition:all .18s;
}
.tm-tab2 i{font-size:14px}
.tm-tab2.active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 4px 14px rgba(254,105,9,.28)}
.tm-cnt2{font-size:10px;font-weight:700;padding:1px 7px;border-radius:99px;background:rgba(0,0,0,.1);min-width:20px;text-align:center}
.tm-tab2.active .tm-cnt2{background:rgba(255,255,255,.25)}

/* Panel grid */
.tasks-wrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  padding:0 14px 14px;
  flex:1;
  min-height:0;
  overflow-y:auto;
  align-items:start;
  -webkit-overflow-scrolling:touch;
}

/* Panel card */
.task-panel{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 1px 6px rgba(0,0,0,.06);
  overflow:hidden;
}

/* Panel header */
.panel-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 15px;border-bottom:1px solid var(--border);
  background:var(--surface2);gap:8px;min-height:52px;
}
.panel-title{
  font-size:13.5px;font-weight:700;display:flex;align-items:center;
  gap:7px;color:var(--text);flex:1;min-width:0;
}
.task-add-btn{display:flex;align-items:center;gap:5px;padding:7px 14px;font-size:12.5px;flex-shrink:0;white-space:nowrap}

/* Task list */
.task-list{
  padding:10px;display:flex;flex-direction:column;gap:7px;
  max-height:calc(100dvh - 260px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.task-list::-webkit-scrollbar{width:3px}
.task-list::-webkit-scrollbar-thumb{background:var(--border2);border-radius:99px}

/* Task item */
.task-item{
  display:flex;align-items:flex-start;gap:10px;
  padding:12px;border-radius:10px;
  background:var(--surface2);border:1px solid var(--border);
  transition:all .15s;min-height:44px;
}
.task-item:hover{background:var(--surface3);border-color:var(--border2)}
.task-item.done{opacity:.55}

/* Checkbox */
.task-cb{
  width:20px;height:20px;border-radius:6px;
  border:2px solid var(--border2);background:var(--surface);
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:11px;cursor:pointer;transition:all .15s;margin-top:1px;
}
.task-cb.chk{background:var(--green);border-color:var(--green);color:#fff}

.task-txt{flex:1;min-width:0}
.task-name{font-size:13px;font-weight:600;color:var(--text);line-height:1.3}
.task-meta{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-top:5px;font-size:11px;color:var(--text3)}
.task-meta span{display:flex;align-items:center;gap:3px}

/* Priority badges */
.task-pri{padding:2px 7px;border-radius:99px;font-size:10.5px;font-weight:600;border:1px solid}
.pri-high{color:var(--red);background:rgba(184,50,40,.07);border-color:rgba(184,50,40,.22)}
.pri-med{color:var(--amber);background:rgba(154,90,0,.07);border-color:rgba(154,90,0,.22)}
.pri-low{color:var(--green);background:rgba(26,122,66,.07);border-color:rgba(26,122,66,.22)}

/* Delete/edit buttons */
.task-del{
  width:30px;height:30px;border-radius:8px;
  border:1px solid var(--border);background:transparent;
  color:var(--text3);cursor:pointer;display:flex;align-items:center;
  justify-content:center;font-size:13px;flex-shrink:0;
  transition:all .15s;-webkit-tap-highlight-color:transparent;
}
.task-del:hover{background:rgba(184,50,40,.07);border-color:rgba(184,50,40,.22);color:var(--red)}

/* Meeting item */
.meet-item{
  display:flex;align-items:flex-start;gap:12px;
  padding:12px;border-radius:10px;
  background:var(--surface2);border:1px solid var(--border);
  transition:all .15s;
}
.meet-item:hover{background:var(--surface3);border-color:var(--border2)}
.meet-item.done{opacity:.55}
.meet-time{text-align:center;flex-shrink:0;min-width:44px}
.mt-time{font-family:'Syne',sans-serif;font-size:15px;font-weight:700;color:#6b2280}
.mt-date{font-size:10px;color:var(--text3);margin-top:2px}
.meet-info{flex:1;min-width:0}
.meet-title{font-size:13px;font-weight:600;color:var(--text);line-height:1.3}
.meet-type{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:99px;font-size:10.5px;font-weight:500;border:1px solid}
.mt-call{color:var(--blue);background:rgba(18,85,168,.07);border-color:rgba(18,85,168,.22)}
.mt-zoom{color:#6b2280;background:rgba(107,34,128,.07);border-color:rgba(107,34,128,.22)}
.meet-join{
  display:inline-flex;align-items:center;gap:5px;margin-top:7px;
  font-size:12px;padding:4px 11px;
  background:rgba(18,85,168,.07);border:1px solid rgba(18,85,168,.22);
  border-radius:99px;color:var(--blue);font-weight:600;text-decoration:none;
  transition:all .15s;
}
.meet-join:hover{background:rgba(18,85,168,.14)}

/* ── MOBILE ── */
@media(max-width:768px){
  .tm-tab-bar2{ display:flex }
  .tm-mob-hide{ display:none !important }

  .tasks-wrap{
    grid-template-columns:1fr !important;
    gap:0;
    padding:0 10px 80px;
    overflow-y:visible;
  }
  .task-panel{
    height:auto;
    border-radius:14px;
  }
  .task-list{
    max-height:none;
    overflow-y:visible;
  }
  .tasks-view-wrap{
    height:calc(100dvh - 110px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .task-add-btn .btn-lbl{ display:none }
  .task-add-btn{padding:8px;width:34px;height:34px;border-radius:9px;justify-content:center}
}

@media(min-width:769px){
  .tm-tab-bar2{ display:none }
  .tm-mob-hide{ display:block !important }
  .task-list{ max-height:calc(100dvh - 240px) }
}


/* ── Mobile Tab Switcher for Tasks & Meetings ── */
.mob-tab-row {
    display: none;
}

@media (max-width: 768px) {

    .mob-tab-row {
        display: flex;
        gap: 10px;
        padding: 10px 12px 8px;
        flex-shrink: 0;
    }

    .mob-tab {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 10px 12px;
        border-radius: 12px;
        border: 1.5px solid var(--border);
        background: var(--surface2);
        color: var(--text3);
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        font-family: 'Inter', sans-serif;
        transition: all .18s;
    }

    .mob-tab i { font-size: 15px; }

    .mob-tab-on {
        background: var(--accent);
        border-color: var(--accent);
        color: #fff;
        box-shadow: 0 4px 14px rgba(254, 105, 9, .28);
    }

    .mob-tab-badge {
        font-size: 10px;
        font-weight: 700;
        padding: 1px 7px;
        border-radius: 99px;
        background: rgba(0,0,0,.1);
        min-width: 20px;
        text-align: center;
    }

    .mob-tab-on .mob-tab-badge {
        background: rgba(255,255,255,.3);
        color: #fff;
    }

    .mob-panel-hide {
        display: none !important;
    }

    .tm-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =============================================
   BUG FIXES v3: Payments, Capture Leads, Call Recording
   ============================================= */

/* -----------------------------------------------
   FIX 1: SCROLL
   .con has overflow:hidden which clips everything.
   For capture/calls/payment views, we need the
   .con container itself to scroll.
----------------------------------------------- */
.con:has(.capture-wrap),
.con:has(.calls-wrap),
.con:has(#viewArea > .auto-panel) {
  overflow-y: auto !important;
}

/* viewArea must not clip its children in these views */
#viewArea:has(.capture-wrap),
#viewArea:has(.calls-wrap),
#viewArea:has(> .auto-panel) {
  overflow: visible !important;
  flex: unset !important;
  min-height: unset !important;
}

/* -----------------------------------------------
   FIX 2: CAPTURE LAYOUT
   Structure:
     .capture-wrap (flex col)
       ├── .auto-panel  (source cards grid) ← MUST NOT collapse
       └── .capture-panels (2-col: form | recent)

   Root cause: capture-wrap had flex:1 + min-height:0
   causing .auto-panel to shrink to 0 height and disappear.
----------------------------------------------- */
.capture-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  flex: unset !important;
  height: auto !important;
  min-height: unset !important;
  overflow-y: visible !important;
  padding-bottom: 24px;
}

/* First child = source cards panel — must not shrink */
.capture-wrap > .auto-panel:first-child {
  flex-shrink: 0;
}

.capture-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 4px;
}

.capture-source {
  display: flex;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface2);
}

.capture-source .btn-secondary {
  margin-top: 8px;
}

/* capture-panels: side-by-side, neither collapses */
.capture-panels {
  display: grid !important;
  grid-template-columns: 1.2fr 0.8fr !important;
  gap: 18px;
  align-items: start;
}

/* capture-log: stack name / source / date vertically */
.capture-log {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 2px;
}

.capture-log > strong {
  display: block;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 2px;
}

.capture-log > span,
.capture-log > small {
  display: block;
  font-size: 12px;
  color: var(--text3);
}

/* -----------------------------------------------
   FIX 3: CALLS LAYOUT
----------------------------------------------- */
.calls-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  flex: unset !important;
  height: auto !important;
  min-height: unset !important;
  overflow-y: visible !important;
  padding-bottom: 24px;
}

.call-grid > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.call-grid label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.call-grid input,
.call-grid select,
.call-grid textarea {
  width: 100%;
}

.call-grid textarea {
  min-height: 90px;
  resize: vertical;
}

.call-item > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.call-item strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

/* -----------------------------------------------
   FIX 4: PAYMENTS
----------------------------------------------- */
.stat-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-card > div:first-child {
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.stat-card h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  font-family: 'Syne', sans-serif;
  margin: 0;
}

/* Payment auto-panel: allow natural height, no collapse */
#viewArea > .auto-panel {
  flex: unset !important;
  min-height: unset !important;
  height: auto !important;
}

/* Gateway cards: fix hardcoded light-mode inline colors */
.auto-panel [style*="background:#fff"],
.card [style*="background:#fff"] {
  background: var(--surface) !important;
}
.auto-panel [style*="border:1px solid #ddd"],
.card [style*="border:1px solid #ddd"] {
  border-color: var(--border) !important;
}
.auto-panel [style*="color:#666"],
.card [style*="color:#666"] {
  color: var(--text3) !important;
}

/* -----------------------------------------------
   FIX 5: RESPONSIVE
----------------------------------------------- */
@media(max-width: 900px) {
  .capture-grid {
    grid-template-columns: 1fr;
  }
  .capture-panels {
    grid-template-columns: 1fr !important;
  }
}

@media(max-width: 640px) {
  .stat-card h2 {
    font-size: 20px;
  }
}


/* =============================================
   DRAWER v2 — Tab + Timeline Notes
   ============================================= */

/* Hero section */
.dr-hero {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px 18px 14px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.dr-av {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}

.dr-hero-info {
  flex: 1;
  min-width: 0;
}

.dr-hero-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dr-hero-sub {
  font-size: 11.5px;
  color: var(--text3);
  margin-top: 2px;
}

/* Quick Actions wrap */
.dr-qa-wrap {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

/* Tab Bar */
.dr-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}

.dr-tab {
  flex: 1;
  padding: 10px 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text3);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all .15s;
  white-space: nowrap;
}

.dr-tab:hover {
  color: var(--text2);
  background: var(--surface2);
}

.dr-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: var(--surface);
}

.dr-tab i {
  font-size: 14px;
}

.dr-tab-count {
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
}

.dr-tab-count:empty {
  display: none;
}

/* Tab bodies */
.dr-tab-body {
  flex: 1;
  overflow-y: auto;
}

/* Notes compose */
.note-compose {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.note-compose textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface2);
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
  transition: border-color .15s;
}

.note-compose textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.note-submit-btn {
  align-self: flex-end;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}

.note-submit-btn:hover { opacity: .88; }
.note-submit-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Timeline */
.notes-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tl-item {
  display: flex;
  gap: 12px;
  padding-bottom: 16px;
}

.tl-last {
  padding-bottom: 4px;
}

.tl-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 14px;
}

.tl-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 2px var(--accent);
  flex-shrink: 0;
  margin-top: 3px;
}

.tl-line {
  flex: 1;
  width: 2px;
  background: var(--border);
  margin-top: 4px;
  border-radius: 2px;
}

.tl-content {
  flex: 1;
  min-width: 0;
  padding-top: 1px;
}

.tl-text {
  font-size: 13px;
  color: var(--text);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
}

.tl-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  font-size: 11px;
  color: var(--text3);
}

.tl-meta i {
  font-size: 11px;
}

.tl-del {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text3);
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 5px;
  font-size: 12px;
  opacity: 0;
  transition: opacity .15s, color .15s;
}

.tl-item:hover .tl-del {
  opacity: 1;
}

.tl-del:hover {
  color: var(--red);
  background: var(--surface2);
}

/* Empty / loading states */
.notes-empty,
.notes-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px 16px;
  color: var(--text3);
  font-size: 13px;
  text-align: center;
}

.notes-empty i,
.notes-loading i {
  font-size: 28px;
  opacity: .4;
}

.spin-icon {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* =============================================
   DRAWER v2 — Mobile & Desktop Responsive Fixes
   ============================================= */

/* Desktop: drawer 380px, tab bar compact */
@media(min-width:769px) {
  .dr-tabs {
    gap: 0;
  }
  .dr-tab {
    font-size: 11.5px;
    padding: 10px 4px;
  }
  .dr-grid2 {
    grid-template-columns: 1fr 1fr;
  }
}

/* Tablet: 769px–1100px */
@media(max-width:1100px) and (min-width:769px) {
  .dr-hero-name {
    font-size: 14px;
  }
  .tl-text {
    font-size: 12.5px;
  }
}

/* Mobile: full width drawer */
@media(max-width:768px) {
  /* Hero */
  .dr-hero {
    padding: 14px 14px 12px;
  }
  .dr-av {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }
  .dr-hero-name {
    font-size: 14px;
  }

  /* Quick actions */
  .dr-qa-wrap {
    padding: 10px 12px;
  }

  /* Tabs */
  .dr-tab {
    font-size: 11px;
    padding: 9px 4px;
    gap: 3px;
  }
  .dr-tab i {
    font-size: 13px;
  }
  .dr-tab-count {
    font-size: 9px;
    min-width: 14px;
    height: 14px;
  }

  /* Tab body */
  .dr-tab-body .dr-section {
    padding: 12px 14px;
  }

  /* Lead info grid: single column on mobile */
  .dr-tab-body .dr-grid2 {
    grid-template-columns: 1fr !important;
  }

  /* Notes compose */
  .note-compose textarea {
    font-size: 14px; /* prevent iOS zoom */
    min-height: 70px;
  }
  .note-submit-btn {
    width: 100%;
    justify-content: center;
    padding: 10px 16px;
    font-size: 13px;
  }

  /* Timeline */
  .tl-item {
    gap: 10px;
    padding-bottom: 14px;
  }
  .tl-text {
    font-size: 13px;
    padding: 8px 10px;
  }
  .tl-meta {
    font-size: 10.5px;
  }
  /* Always show delete on mobile (no hover) */
  .tl-del {
    opacity: 1 !important;
  }

  /* Empty/loading */
  .notes-empty,
  .notes-loading {
    padding: 24px 12px;
    font-size: 12.5px;
  }

  /* Tags */
  .tag-input-wrap {
    gap: 6px;
  }
  .tag-input-wrap input {
    font-size: 14px; /* prevent iOS zoom */
  }

  /* Color opts wrap */
  .color-opts {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Safe area bottom padding (iPhone notch) */
  .drawer .df,
  .drawer [class*="footer"],
  .drawer .drawer-footer {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
}

/* Very small screens */
@media(max-width:380px) {
  .dr-tab {
    font-size: 10px;
    padding: 8px 2px;
  }
  .dr-tab span {
    display: none; /* sirf icon dikhao */
  }
  .dr-tab i {
    font-size: 16px;
  }
}


/* WhatsApp bubble styles moved to main section above */
/* ============================================================
   WhatsApp V2 UI — matches modern chat app style (Image 2)
   ============================================================ */

/* Shell: remove old topbar padding, keep shell */
.wa-shell-v2 { }

/* Mode Banner — replaces big topbar */
.wa-modebanner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.wa-modebanner--link {
  background: #f0fdf4;
  color: #166534;
}
.wa-modebanner--api {
  background: #eff6ff;
  color: #1d4ed8;
}
.wa-modebanner i {
  font-size: 18px;
  flex-shrink: 0;
}
.wa-modebanner-sub {
  font-size: 11.5px;
  font-weight: 400;
  opacity: .75;
  margin-left: 2px;
}
.wa-modebanner-actions {
  margin-left: auto;
}
.wa-modebanner-actions button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 99px;
  font-size: 12px;
  cursor: pointer;
  color: inherit;
  font-weight: 600;
  transition: all .15s;
}
.wa-modebanner-actions button:hover {
  background: rgba(255,255,255,.9);
}

/* Tabs V2 — cleaner, text-only */
.wa-tabs-v2 {
  padding: 0 6px;
  gap: 0;
}
.wa-tabs-v2 .wa-tab {
  font-size: 13px;
  font-weight: 500;
  padding: 11px 15px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
}
.wa-tab-badge {
  background: #1da851;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 99px;
  min-width: 16px;
  text-align: center;
  line-height: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
}

/* Content V2 */
.wa-content-v2 {
  padding: 0;
  background: var(--surface);
}
.wa-content-v2 .wa-wrap,
.wa-content-v2 .wa-chat-stage {
  border-radius: 0;
  border: none;
  box-shadow: none;
}

/* Contacts panel V2 */
.wa-contacts-v2 {
  width: 320px;
  border-right: 1px solid var(--border);
  background: var(--surface);
}
.wa-contacts-hdr-v2 {
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--border);
}
.wa-allchats-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.wa-allchats-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  font-family: 'Syne', sans-serif;
}
.wa-allchats-badge {
  background: var(--green, #1da851);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  min-width: 20px;
  text-align: center;
}
.wa-search-v2 {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
}

/* Contact item V2 */
.wa-contact-item-v2 {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  gap: 11px;
  cursor: pointer;
  transition: background .12s;
}
.wa-contact-item-v2:hover {
  background: var(--surface2);
}
.wa-contact-item-v2.active {
  background: rgba(37,211,102,.06);
  border-right: 2.5px solid #1da851;
}
.wci-av-v2 {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.wci-body {
  flex: 1;
  min-width: 0;
}
.wci-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 3px;
}
.wci-name-v2 {
  font-size: 13.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.wci-time-v2 {
  font-size: 10.5px;
  color: var(--text3);
  flex-shrink: 0;
  white-space: nowrap;
}
.wci-time--unread {
  color: #1da851;
  font-weight: 600;
}
.wci-preview-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}
.wci-preview {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--text3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wci-unread-v2 {
  background: #1da851;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 99px;
  min-width: 18px;
  text-align: center;
  flex-shrink: 0;
}
.wci-read-tick {
  font-size: 12px;
  color: var(--text3);
  opacity: .45;
  flex-shrink: 0;
}
.wci-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.wci-tag {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text3);
  font-weight: 500;
  white-space: nowrap;
}
.wci-tag--status {
  background: rgba(29,168,81,.1);
  color: #1a7a42;
  border-color: rgba(29,168,81,.2);
}

/* Chat panel V2 */
.wa-chat-v2 {
  background: #f0f2f5;
}

/* Empty state V2 — centered WhatsApp icon */
.wa-empty-state-v2 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px;
  height: 100%;
}
.wa-empty-icon-v2 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #d9fbe4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  color: #1da851;
  margin-bottom: 6px;
}
.wa-empty-title-v2 {
  font-family: 'Syne', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}
.wa-empty-sub-v2 {
  font-size: 13px;
  color: var(--text3);
  text-align: center;
  max-width: 200px;
  line-height: 1.6;
}

/* Hide old topbar elements when v2 shell is present */
.wa-shell-v2 .wa-topbar { display: none; }

/* ============================================================
   WhatsApp V2 — Mobile Responsive Rules
   ============================================================ */

/* Tablet (960px tak) — sidebar thoda chota */
@media(max-width:1200px){
  .wa-contacts-v2 { width: 280px; }
}

@media(max-width:960px){
  .wa-contacts-v2 { width: 240px; }
}

/* Mobile (768px se neeche) — full screen chat/contacts toggle */
@media(max-width:768px){
  /* Contacts full width ho jaata hai */
  .wa-contacts-v2 {
    width: 100%;
    border-right: none;
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--surface);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
  }

  /* Chat panel bhi full width */
  .wa-chat-v2 {
    width: 100%;
    position: absolute;
    inset: 0;
    z-index: 1;
    transform: translateX(100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
  }

  /* Jab chat open ho: contacts slide left, chat slide in */
  body.wa-chat-open .wa-contacts-v2 {
    transform: translateX(-100%);
  }
  body.wa-chat-open .wa-chat-v2 {
    transform: translateX(0);
    z-index: 3;
  }

  /* Chat stage relative banana zaroori hai absolute children ke liye */
  .wa-chat-stage {
    position: relative;
    overflow: hidden;
  }

  /* Banner aur tabs mobile pe thoda compact */
  .wa-modebanner {
    padding: 7px 12px;
    font-size: 12px;
  }
  .wa-modebanner-sub { display: none; }

  .wa-tabs-v2 .wa-tab {
    font-size: 12px;
    padding: 10px 12px;
  }

  /* Contacts header V2 mobile */
  .wa-contacts-hdr-v2 {
    padding: 12px 12px 8px;
  }
  .wa-allchats-label {
    font-size: 14px;
  }

  /* Contact item thoda compact */
  .wa-contact-item-v2 {
    padding: 11px 12px;
  }
  .wci-av-v2 {
    width: 38px;
    height: 38px;
    font-size: 12px;
  }

  /* ── CHAT OPEN: full screen, no banner, no tabs, no bottom space ── */
  body.wa-chat-open .wa-modebanner,
  body.wa-chat-open .wa-tabs-v2 {
    display: none !important;
  }

  /* Shell stretches to full viewport */
  body.wa-chat-open .wa-shell-v2 {
    height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Content fills remaining shell space */
  body.wa-chat-open .wa-content-v2 {
    padding: 0 !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /* Stage and wrap fill content */
  body.wa-chat-open .wa-chat-stage,
  body.wa-chat-open .wa-wrap {
    border-radius: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  /* Chat v2 panel fills stage */
  body.wa-chat-open .wa-chat-v2 {
    height: 100% !important;
    min-height: 0 !important;
  }

  /* Chat pane is flex column — fills 100% of parent, NOT 100dvh */
  body.wa-chat-open .wa-chat-pane {
    height: 100% !important;
    min-height: 0 !important;
  }

  /* Chat body (messages area) takes remaining space between header and composer */
  body.wa-chat-open .wa-chat-pane .wa-chat-body {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }

  /* Composer always sticks to bottom */
  body.wa-chat-open .wa-composer {
    flex-shrink: 0 !important;
  }
}

/* Small phones (480px) */
@media(max-width:480px){
  .wa-modebanner {
    padding: 6px 10px;
    font-size: 11.5px;
  }
  .wa-tabs-v2 .wa-tab {
    font-size: 11px;
    padding: 9px 10px;
  }
  .wci-tags-row { display: none; }
  .wa-allchats-label { font-size: 13px; }
}

/* ============================================================
   WhatsApp V2 — Tag Panel Styles
   ============================================================ */

/* Tag icon button on contact item */
.wci-tag-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text3);
  font-size: 14px;
  padding: 2px 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  transition: all .15s;
  flex-shrink: 0;
}
.wci-tag-btn:hover,
.wci-tag-btn.active {
  color: #1da851;
  background: rgba(29,168,81,.1);
}

/* Inline tag panel */
.wci-tag-panel {
  margin-top: 8px;
  background: #f0fdf4;
  border: 1px solid rgba(29,168,81,.2);
  border-radius: 12px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Active tags row (removable) */
.wci-tag-active-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.wci-tag--active {
  background: rgba(29,168,81,.12) !important;
  color: #166534 !important;
  border-color: rgba(29,168,81,.3) !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.wci-tag-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: #166534;
  font-size: 13px;
  line-height: 1;
  padding: 0;
  opacity: .6;
  transition: opacity .12s;
}
.wci-tag-remove:hover { opacity: 1; }

/* Preset tags grid */
.wci-preset-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.wci-preset-tag {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 99px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text2);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all .15s;
  white-space: nowrap;
}
.wci-preset-tag:hover {
  background: rgba(29,168,81,.1);
  border-color: rgba(29,168,81,.3);
  color: #166534;
}

/* Custom tag input row */
.wci-custom-tag-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.wci-custom-tag-input {
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  background: var(--surface);
  color: var(--text);
  outline: none;
  font-family: 'Inter', sans-serif;
  transition: border-color .15s;
}
.wci-custom-tag-input:focus {
  border-color: rgba(29,168,81,.4);
}
.wci-custom-tag-add {
  padding: 6px 14px;
  border-radius: 8px;
  background: #1da851;
  color: #fff;
  border: none;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: background .15s;
  flex-shrink: 0;
}
.wci-custom-tag-add:hover { background: #166636; }

/* On 480px hide preset tags emoji, keep text only */
@media(max-width:480px){
  .wci-tag-panel { padding: 8px; gap: 6px; }
  .wci-preset-tag { font-size: 10.5px; padding: 3px 8px; }
}