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

:root{
  --bg:#F7F5F0; --bg-grad-a:#FDF8EC; --bg-grad-b:#F3F1EE;
  --surface:rgba(255,255,255,.72); --surface-solid:#FFFFFF;
  --surface-2:rgba(255,255,255,.5);
  --border:rgba(43,44,46,.08); --border-strong:rgba(43,44,46,.14);
  --text:#1E1F21; --text-2:#5B5D61; --text-3:#96989C;
  --blue:#C9962E; --blue-dk:#96721E; --blue-lt:#FBF1DC;
  --emerald:#E8B84B; --emerald-dk:#B8892A; --emerald-lt:#FCE9C2;
  --amber:#F59E0B; --red:#EF4444; --purple:#2B2C2E;
  --shadow:0 8px 30px -8px rgba(30,31,33,.12);
  --shadow-lg:0 20px 60px -15px rgba(30,31,33,.25);
  --r:18px; --r-sm:12px; --r-lg:24px;
}
[data-theme="dark"]{
  --bg:#141312; --bg-grad-a:#181614; --bg-grad-b:#171512;
  --surface:rgba(30,28,25,.65); --surface-solid:#1D1B18;
  --surface-2:rgba(30,28,25,.4);
  --border:rgba(255,255,255,.08); --border-strong:rgba(255,255,255,.14);
  --text:#F5F2EA; --text-2:#B3ACA0; --text-3:#79736A;
  --blue-lt:rgba(201,150,46,.18); --emerald-lt:rgba(232,184,75,.16);
  --shadow:0 8px 30px -8px rgba(0,0,0,.4);
  --shadow-lg:0 20px 60px -15px rgba(0,0,0,.6);
}

*{ box-sizing:border-box; }
body{
  margin:0; font-family:'Inter',-apple-system,system-ui,sans-serif; color:var(--text);
  background:
    radial-gradient(1000px 600px at 10% -10%, var(--bg-grad-a), transparent 60%),
    radial-gradient(1000px 600px at 100% 0%, var(--bg-grad-b), transparent 60%),
    var(--bg);
  -webkit-font-smoothing:antialiased; overflow:hidden; height:100vh;
  transition:background .3s ease, color .3s ease;
}
*{ scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent; }
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:8px; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; }

.glass{
  background:var(--surface); backdrop-filter:blur(24px) saturate(160%);
  border:1px solid var(--border); border-radius:var(--r);
  box-shadow:var(--shadow);
}
.card{
  background:var(--surface-solid); border:1px solid var(--border); border-radius:var(--r);
  box-shadow:var(--shadow); transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, border-color .25s ease;
}
.card:hover{ box-shadow:var(--shadow-lg); }

/* `hidden` must win over the display rules below (.app is display:flex), so the
   app shell and the login screen can be toggled with el.hidden = true/false. */
[hidden]{ display:none !important; }

/* ---------- Login screen ---------- */
.login-screen{ height:100vh; width:100vw; display:flex; align-items:center; justify-content:center; padding:24px; }
.login-card{
  width:380px; max-width:100%; padding:28px; background:var(--surface-solid);
  border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
}
.login-brand{ display:flex; align-items:center; gap:10px; margin-bottom:22px; }
.login-brand .name{ font-size:15px; font-weight:800; letter-spacing:-.02em; }
.login-brand .sub{ font-size:10.5px; color:var(--text-3); }
.login-card h1{ font-size:20px; font-weight:700; letter-spacing:-.02em; margin:0 0 4px; }
.login-hint{ font-size:12.5px; color:var(--text-2); margin:0 0 18px; }
.login-card .form-field{ margin-bottom:12px; }

/* ---------- App shell ---------- */
.app{ display:flex; height:100vh; width:100vw; }

/* Sidebar */
.sidebar{
  width:248px; flex-shrink:0; padding:20px 14px; display:flex; flex-direction:column;
  border-right:1px solid var(--border); background:var(--surface-2); backdrop-filter:blur(20px);
}
.brand{ display:flex; align-items:center; gap:10px; padding:8px 10px 24px; }
.brand .mark{
  width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--blue),var(--emerald)); color:#fff; font-weight:800; font-size:15px;
}
.brand .name{ font-weight:700; font-size:15.5px; letter-spacing:-.01em; }
.brand .sub{ font-size:11px; color:var(--text-3); margin-top:1px; }

.nav-group{ margin-bottom:4px; }
.nav-label{ font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--text-3); padding:14px 12px 8px; }
.nav-item{
  display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:11px; margin-bottom:2px;
  font-size:13.5px; font-weight:500; color:var(--text-2); transition:all .2s ease; position:relative;
}
.nav-item .ic{ width:18px; height:18px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.nav-item:hover{ background:var(--border); color:var(--text); }
.nav-item.active{
  background:linear-gradient(135deg, rgba(201,150,46,.12), rgba(232,184,75,.1));
  color:var(--blue-dk); font-weight:600; border:1px solid rgba(201,150,46,.18);
}
[data-theme="dark"] .nav-item.active{ color:#7DB3FF; }
.nav-item .badge{
  margin-left:auto; font-size:10.5px; font-weight:700; padding:1px 7px; border-radius:100px;
  background:var(--emerald); color:#fff;
}
.sidebar-foot{ margin-top:auto; padding-top:14px; border-top:1px solid var(--border); }
.user-chip{ display:flex; align-items:center; gap:10px; padding:8px; border-radius:12px; }
.user-chip:hover{ background:var(--border); }
.avatar{
  width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; color:#fff; flex-shrink:0;
}
.user-chip .who b{ display:block; font-size:12.5px; }
.user-chip .who span{ font-size:10.5px; color:var(--text-3); }

/* Main column */
.main{ flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar{
  height:64px; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:0 24px; border-bottom:1px solid var(--border);
}
.search-box{
  flex:1; max-width:380px; display:flex; align-items:center; gap:8px; padding:9px 14px;
  background:var(--surface-solid); border:1px solid var(--border); border-radius:100px; color:var(--text-3); font-size:13px;
  position:relative;
}
.search-box input{ border:none; background:none; outline:none; color:var(--text); font-size:13px; width:100%; }
.search-results{
  position:absolute; top:calc(100% + 8px); left:0; right:0; max-height:360px; overflow-y:auto;
  background:var(--surface-solid); border:1px solid var(--border); border-radius:var(--r-sm);
  box-shadow:var(--shadow-lg); z-index:40; padding:6px;
}
.search-results .sr-group-label{
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-3);
  padding:8px 10px 4px;
}
.search-results .sr-item{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; cursor:pointer; color:var(--text);
}
.search-results .sr-item:hover{ background:var(--border); }
.search-results .sr-item .sr-main{ min-width:0; flex:1; }
.search-results .sr-item .sr-name{ font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.search-results .sr-item .sr-sub{ font-size:11px; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.search-results .sr-empty{ padding:14px 10px; font-size:12px; color:var(--text-3); text-align:center; }
.topbar-actions{ display:flex; align-items:center; gap:10px; }
.topbar-user{ padding:4px 8px; max-width:180px; }
.topbar-user .who{ min-width:0; }
.topbar-user .who b, .topbar-user .who span{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:1180px){ .topbar-user .who{ display:none; } }
.icon-btn{
  width:36px; height:36px; border-radius:11px; border:1px solid var(--border); background:var(--surface-solid);
  display:flex; align-items:center; justify-content:center; color:var(--text-2); position:relative; transition:all .2s ease;
}
.icon-btn:hover{ border-color:var(--border-strong); color:var(--text); }
.dot-alert{ position:absolute; top:7px; right:7px; width:7px; height:7px; border-radius:50%; background:var(--red); border:1.5px solid var(--surface-solid); }
.theme-toggle{ display:flex; background:var(--surface-solid); border:1px solid var(--border); border-radius:100px; padding:3px; gap:2px; }
.theme-toggle button{ border:none; background:none; width:28px; height:28px; border-radius:100px; display:flex; align-items:center; justify-content:center; color:var(--text-3); }
.theme-toggle button.active{ background:var(--text); color:var(--bg); }

.view{ flex:1; overflow-y:auto; padding:26px 28px 60px; }
.view-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; flex-wrap:wrap; gap:12px; }
.view-title{ font-size:22px; font-weight:700; letter-spacing:-.02em; }
.view-sub{ font-size:13px; color:var(--text-2); margin-top:2px; }

.btn{
  display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; padding:9px 16px;
  border-radius:11px; border:1px solid transparent; transition:all .2s ease;
}
.btn-primary{ background:linear-gradient(135deg,var(--blue),var(--emerald)); color:#fff; }
.btn-primary:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.btn-ghost{ background:var(--surface-solid); border-color:var(--border); color:var(--text-2); }
.btn-ghost:hover{ border-color:var(--border-strong); color:var(--text); }

/* ---------- Dashboard ---------- */
.stat-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-bottom:22px; }
.stat-card{ padding:20px; }
.stat-card .top{ display:flex; align-items:center; justify-content:space-between; }
.stat-card .ic{ width:36px; height:36px; border-radius:11px; display:flex; align-items:center; justify-content:center; }
.stat-card .delta{ font-size:11px; font-weight:700; padding:2px 7px; border-radius:100px; }
.delta.up{ color:var(--emerald-dk); background:var(--emerald-lt); }
.delta.down{ color:var(--red); background:rgba(239,68,68,.1); }
.stat-card .val{ font-size:26px; font-weight:800; letter-spacing:-.02em; margin-top:14px; }
.stat-card .lbl{ font-size:12px; color:var(--text-2); margin-top:2px; }

.dash-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:16px; margin-bottom:16px; }
.panel{ padding:22px; }
.panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.panel-head h3{ font-size:15px; font-weight:700; }
.panel-head .link{ font-size:12px; color:var(--blue-dk); font-weight:600; cursor:pointer; transition:opacity .15s ease, transform .15s ease; user-select:none; }
.panel-head .link:hover{ opacity:.8; text-decoration:underline; }

.funnel-row{ display:flex; flex-direction:column; gap:10px; }
.funnel-bar{ display:flex; align-items:center; gap:12px; cursor:pointer; transition:transform .15s ease, opacity .15s ease; }
.funnel-bar:hover{ transform:translateX(3px); }
.funnel-bar .lbl{ width:90px; font-size:12px; color:var(--text-2); flex-shrink:0; }
.funnel-bar .track{ flex:1; height:26px; border-radius:8px; background:var(--border); overflow:hidden; }
.funnel-bar .fill{ height:100%; border-radius:8px; background:linear-gradient(90deg,var(--blue),var(--emerald)); display:flex; align-items:center; justify-content:flex-end; padding-right:10px; transition:width .4s ease; min-width:28px; }
.funnel-bar .fill span{ font-size:11px; font-weight:700; color:#fff; }

.emp-row{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); }
.emp-row:last-child{ border-bottom:none; }
.emp-row .info{ flex:1; min-width:0; }
.emp-row .info b{ font-size:13px; display:block; }
.emp-row .info span{ font-size:11px; color:var(--text-3); }
.emp-row .bar{ width:70px; height:6px; border-radius:6px; background:var(--border); overflow:hidden; }
.emp-row .bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--blue),var(--emerald)); }
.emp-row .pct{ width:34px; text-align:right; font-size:12px; font-weight:700; }

/* ---------- Conversations ---------- */
.convo-shell{ display:flex; height:100%; border-radius:var(--r); overflow:hidden; border:1px solid var(--border); background:var(--surface-solid); box-shadow:var(--shadow); }
.convo-list{ width:320px; flex-shrink:0; border-right:1px solid var(--border); display:flex; flex-direction:column; }
.convo-list-head{ padding:16px; border-bottom:1px solid var(--border); }
.convo-filters{ display:flex; gap:6px; padding:10px 12px; overflow-x:auto; }
.chip{ font-size:11.5px; font-weight:600; padding:6px 12px; border-radius:100px; background:var(--border); color:var(--text-2); white-space:nowrap; flex-shrink:0; }
.chip.active{ background:var(--blue); color:#fff; }
.convo-items{ flex:1; overflow-y:auto; }
.convo-item{ display:flex; gap:11px; padding:12px 16px; border-bottom:1px solid var(--border); cursor:pointer; transition:background .15s ease; position:relative; }
.convo-item:hover{ background:var(--border); }
.convo-item.selected{ background:var(--blue-lt); }
.convo-item .pin{ position:absolute; top:10px; right:14px; color:var(--amber); font-size:11px; }
.convo-item .info{ flex:1; min-width:0; }
.convo-item .row1{ display:flex; justify-content:space-between; gap:6px; }
.convo-item .name{ font-size:13.5px; font-weight:600; }
.convo-item .time{ font-size:10.5px; color:var(--text-3); flex-shrink:0; }
.convo-item .preview{ font-size:12px; color:var(--text-2); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.convo-item .tags{ display:flex; gap:4px; margin-top:6px; }
.tag-pill{ font-size:9.5px; font-weight:700; padding:2px 7px; border-radius:100px; }
.unread-dot{ width:9px; height:9px; border-radius:50%; background:var(--emerald); flex-shrink:0; margin-top:5px; }

.chat-pane{ flex:1; display:flex; flex-direction:column; min-width:0; }
.chat-head{ padding:14px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:12px; }
.chat-head .info b{ display:block; font-size:14px; }
.chat-head .info span{ font-size:11.5px; color:var(--emerald-dk); display:flex; align-items:center; gap:5px; }
.chat-body{ flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:12px; background:
  repeating-linear-gradient(45deg, transparent, transparent 40px);
}
.bubble{ max-width:60%; padding:10px 14px; border-radius:16px; font-size:13.5px; line-height:1.5; }
.bubble.in{ align-self:flex-start; background:var(--border); border-bottom-left-radius:4px; }
.bubble.out{ align-self:flex-end; background:linear-gradient(135deg,var(--blue),var(--emerald)); color:#fff; border-bottom-right-radius:4px; }
.bubble .meta{ font-size:9.5px; opacity:.65; margin-top:5px; text-align:right; }
.chat-input{ padding:14px 20px; border-top:1px solid var(--border); display:flex; gap:10px; align-items:center; }
.chat-input input{ flex:1; padding:11px 16px; border-radius:100px; border:1px solid var(--border); background:var(--bg); outline:none; font-size:13px; color:var(--text); }
.send-btn{ width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--blue),var(--emerald)); border:none; color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

/* ---------- Leads table ---------- */
.table-wrap{ overflow-x:auto; width:100%; }
table.leads{ width:100%; border-collapse:collapse; font-size:13px; table-layout:auto; }
table.leads th{ text-align:left; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-3); padding:12px 14px; border-bottom:1px solid var(--border); white-space:nowrap; vertical-align:middle; }
table.leads td{ padding:13px 14px; border-bottom:1px solid var(--border); white-space:nowrap; vertical-align:middle; color:var(--text); }
table.leads tr:last-child td{ border-bottom:none; }
table.leads tbody tr{ cursor:pointer; transition:background .15s ease; }
table.leads tbody tr:hover{ background:var(--surface-hover, rgba(0,0,0,0.02)); }

/* Explicit column proportions for perfect alignment */
table.leads th:nth-child(1), table.leads td:nth-child(1){ width:18%; min-width:160px; } /* Name */
table.leads th:nth-child(2), table.leads td:nth-child(2){ width:14%; min-width:130px; } /* Phone */
table.leads th:nth-child(3), table.leads td:nth-child(3){ width:13%; min-width:120px; } /* Source */
table.leads th:nth-child(4), table.leads td:nth-child(4){ width:19%; min-width:160px; } /* Campaign */
table.leads th:nth-child(5), table.leads td:nth-child(5){ width:9%; min-width:85px; }  /* Tags */
table.leads th:nth-child(6), table.leads td:nth-child(6){ width:11%; min-width:105px; } /* Status */
table.leads th:nth-child(7), table.leads td:nth-child(7){ width:13%; min-width:120px; } /* Assigned */
table.leads th:nth-child(8), table.leads td:nth-child(8){ width:9%; min-width:85px; }  /* Priority */

.lead-name{ display:inline-flex; align-items:center; gap:10px; vertical-align:middle; }
.status-badge{ font-size:11px; font-weight:700; padding:4px 10px; border-radius:100px; display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; line-height:1.2; }
.priority-dot{ width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:6px; flex-shrink:0; vertical-align:middle; }
.tag-list{ display:inline-flex; gap:4px; flex-wrap:wrap; align-items:center; vertical-align:middle; min-height:22px; }
.tag-pill{ font-size:10px; font-weight:700; padding:2px 8px; border-radius:100px; display:inline-flex; align-items:center; line-height:1.3; }

/* ---------- Pipeline / Kanban ---------- */
.kanban{ display:flex; gap:14px; overflow-x:auto; height:100%; padding-bottom:8px; }
.kcol{ width:250px; flex-shrink:0; display:flex; flex-direction:column; background:var(--surface-2); border-radius:var(--r); border:1px solid var(--border); max-height:100%; }
.kcol-head{ padding:14px 14px 10px; display:flex; align-items:center; justify-content:space-between; }
.kcol-head .t{ font-size:12.5px; font-weight:700; display:flex; align-items:center; gap:8px; }
.kcol-head .dot{ width:8px; height:8px; border-radius:50%; }
.kcol-head .count{ font-size:11px; color:var(--text-3); background:var(--border); padding:1px 8px; border-radius:100px; }
.kcol-body{ flex:1; overflow-y:auto; padding:0 10px 10px; display:flex; flex-direction:column; gap:9px; min-height:60px; }
.kcard{
  background:var(--surface-solid); border:1px solid var(--border); border-radius:14px; padding:13px; cursor:grab;
  box-shadow:0 1px 2px rgba(0,0,0,.04); transition:box-shadow .2s ease, transform .2s ease;
}
.kcard:active{ cursor:grabbing; }
.kcard.dragging{ opacity:.4; }
.kcard:hover{ box-shadow:var(--shadow); transform:translateY(-1px); }
.kcard .name{ font-size:13px; font-weight:600; }
.kcard .co{ font-size:11px; color:var(--text-3); margin-top:2px; }
.kcard .foot{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; }
.kcard .val{ font-size:12px; font-weight:700; color:var(--emerald-dk); }
.kcol-body.dragover{ background:var(--blue-lt); border-radius:12px; }

/* ---------- Roles ---------- */
.role-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.role-card{ padding:18px; text-align:center; transition:all .25s ease; }
.role-card .ic{ width:44px; height:44px; border-radius:13px; margin:0 auto 12px; display:flex; align-items:center; justify-content:center; }
.role-card h4{ font-size:14px; font-weight:700; }
.role-card p{ font-size:11px; color:var(--text-3); margin-top:4px; }

.perm-table{ margin-top:22px; width:100%; border-collapse:collapse; font-size:12.5px; }
.perm-table th, .perm-table td{ padding:11px 14px; border-bottom:1px solid var(--border); text-align:center; transition:background .2s; }
.perm-table th:first-child, .perm-table td:first-child{ text-align:left; font-weight:600; }
.perm-table th{ color:var(--text-3); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
.perm-table th.active-role-col{ color:var(--primary, #0ea5e9); font-weight:700; background:rgba(14,165,233,.08); border-radius:6px 6px 0 0; }
.perm-table td.active-role-col{ background:rgba(14,165,233,.05); font-weight:700; }
.perm-table .perm-check{ color:var(--emerald-dk, #059669); font-weight:700; font-size:13.5px; }
.perm-table .perm-dash{ color:var(--text-3); font-size:13px; opacity:.7; }

/* ---------- Calendar ---------- */
.cal-grid{ display:grid; grid-template-columns:2fr 1fr; gap:16px; }
.mini-cal{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.mini-cal .dow{ font-size:10px; color:var(--text-3); text-align:center; padding:6px 0; font-weight:700; }
.mini-cal .day{ aspect-ratio:1; display:flex; align-items:center; justify-content:center; border-radius:10px; font-size:12.5px; position:relative; }
.mini-cal .day.today{ background:linear-gradient(135deg,var(--blue),var(--emerald)); color:#fff; font-weight:700; }
.mini-cal .day.has-event::after{ content:""; position:absolute; bottom:5px; width:4px; height:4px; border-radius:50%; background:var(--blue); }
.followup-item{ display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); }
.followup-item:last-child{ border-bottom:none; }
.followup-time{ width:56px; flex-shrink:0; font-size:11.5px; font-weight:700; color:var(--blue-dk); }

/* ---------- Settings ---------- */
.settings-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.setting-card{ padding:22px; }
.setting-card .head{ display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.setting-card .head .ic{ width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; }
.setting-card h4{ font-size:14.5px; font-weight:700; }
.setting-card p{ font-size:12px; color:var(--text-2); margin-top:8px; line-height:1.55; }
.status-line{ display:flex; align-items:center; gap:8px; margin-top:14px; font-size:12px; font-weight:600; flex-wrap:wrap; }
.status-live{ width:7px; height:7px; border-radius:50%; background:var(--emerald); flex-shrink:0; }
.status-live.off{ background:var(--text-3); }
.status-live.error{ background:var(--red); }
.status-live.spin{ background:var(--text-3); animation:status-pulse 1.1s ease-in-out infinite; }
@keyframes status-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }
.status-hint{ font-size:11px; font-weight:500; color:var(--text-3); width:100%; margin-top:-2px; }
.toggle.disabled{ opacity:.45; cursor:not-allowed; }
.switch{ position:relative; width:38px; height:22px; border-radius:100px; background:var(--border); transition:.25s; flex-shrink:0; }
.switch.on{ background:var(--emerald); }
.switch i{ position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; transition:.25s; }
.switch.on i{ transform:translateX(16px); }

/* ---------- AI features ---------- */
.ai-glow{ background:linear-gradient(135deg, rgba(201,150,46,.06), rgba(232,184,75,.06)); border:1px solid rgba(201,150,46,.15); }
.ai-tag{
  display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; padding:3px 9px;
  border-radius:100px; background:linear-gradient(135deg,var(--blue),var(--emerald)); color:#fff;
}
.score-badge{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:4px 10px; border-radius:100px; }
.score-badge.hot{ background:var(--emerald-lt); color:var(--emerald-dk); }
.score-badge.warm{ background:rgba(245,158,11,.14); color:var(--amber); }
.score-badge.cold{ background:var(--border); color:var(--text-2); }
.score-badge .ring{ width:7px; height:7px; border-radius:50%; }
.score-badge.hot .ring{ background:var(--emerald); }
.score-badge.warm .ring{ background:var(--amber); }
.score-badge.cold .ring{ background:var(--text-3); }

.copilot-card{ padding:22px; margin-bottom:16px; position:relative; overflow:hidden; }
.copilot-head{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.copilot-head .ic{
  width:36px; height:36px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--blue),var(--emerald)); color:#fff; font-size:16px; flex-shrink:0;
}
.copilot-head h3{ font-size:15px; font-weight:700; }
.copilot-head span{ font-size:11.5px; color:var(--text-3); }
.copilot-list{ display:flex; flex-direction:column; gap:2px; }
.copilot-item{ display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:12px; transition:background .2s ease; }
.copilot-item:hover{ background:var(--border); }
.copilot-item .dot{ width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.copilot-item .txt{ flex:1; font-size:13px; }
.copilot-item .txt b{ font-weight:600; }
.copilot-item .txt span{ display:block; font-size:11.5px; color:var(--text-3); margin-top:1px; }
.copilot-item .go{ font-size:11px; font-weight:700; color:var(--blue-dk); flex-shrink:0; }
.ask-ai-box{ display:flex; gap:8px; margin-top:16px; padding-top:16px; border-top:1px solid var(--border); }
.ask-ai-box input{ flex:1; padding:10px 14px; border-radius:100px; border:1px solid var(--border); background:var(--bg); outline:none; font-size:12.5px; color:var(--text); }
.ask-ai-box button{ padding:10px 16px; border-radius:100px; border:none; background:linear-gradient(135deg,var(--blue),var(--emerald)); color:#fff; font-size:12px; font-weight:700; flex-shrink:0; }

.ai-summary-box{ margin:14px 20px 0; padding:14px 16px; border-radius:14px; }
.ai-summary-box .h{ display:flex; align-items:center; justify-content:between; gap:8px; margin-bottom:8px; }
.ai-summary-box .h .t{ display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:var(--blue-dk); }
.ai-summary-box p{ font-size:12.5px; color:var(--text-2); line-height:1.6; margin:0; }
.ai-summary-box .signals{ display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; }
.signal-pill{ font-size:10.5px; font-weight:600; padding:3px 9px; border-radius:100px; background:var(--surface-solid); border:1px solid var(--border); color:var(--text-2); }
.ai-refresh{ margin-left:auto; font-size:10.5px; font-weight:700; color:var(--blue-dk); background:none; border:none; padding:2px 6px; }

.smart-replies{ padding:10px 20px 0; display:flex; gap:8px; overflow-x:auto; }
.smart-reply-chip{
  flex-shrink:0; font-size:12px; font-weight:500; padding:8px 14px; border-radius:100px;
  background:var(--surface-solid); border:1px solid var(--border-strong); color:var(--text); white-space:nowrap; transition:all .2s ease;
}
.smart-reply-chip:hover{ border-color:var(--blue); color:var(--blue-dk); background:var(--blue-lt); }

.insight-block{ margin-bottom:16px; }
.insight-block .k{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-3); margin-bottom:6px; }
.sentiment-bar{ display:flex; height:8px; border-radius:8px; overflow:hidden; background:var(--border); margin-top:6px; }
.sentiment-bar i{ display:block; height:100%; }
.next-action-box{ padding:13px; border-radius:13px; margin-top:6px; }
.next-action-box p{ font-size:12.5px; line-height:1.55; margin:0; }

.empty-state{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 20px; text-align:center; color:var(--text-3); }
.empty-state .ic{ width:56px; height:56px; border-radius:16px; background:var(--border); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.empty-state h4{ font-size:14px; color:var(--text); font-weight:600; }
.empty-state p{ font-size:12.5px; margin-top:4px; max-width:260px; }

/* ---------- Drawer ---------- */
.drawer-overlay{ position:fixed; inset:0; background:rgba(15,23,42,.4); backdrop-filter:blur(2px); z-index:50; opacity:0; pointer-events:none; transition:opacity .3s ease; }
.drawer-overlay.open{ opacity:1; pointer-events:all; }
.drawer{ position:fixed; top:0; right:0; bottom:0; width:420px; background:var(--surface-solid); border-left:1px solid var(--border); z-index:51; transform:translateX(100%); transition:transform .35s cubic-bezier(.2,.9,.2,1); overflow-y:auto; box-shadow:var(--shadow-lg); }
.drawer.open{ transform:translateX(0); }
.drawer-head{ padding:20px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.drawer-body{ padding:20px; }
.drawer-close{ width:30px; height:30px; border-radius:9px; background:var(--border); display:flex; align-items:center; justify-content:center; border:none; color:var(--text-2); }
.dtabs{ display:flex; gap:4px; margin:16px 0; background:var(--border); padding:3px; border-radius:11px; }
.dtab{ flex:1; text-align:center; padding:7px; font-size:12px; font-weight:600; border-radius:8px; color:var(--text-2); }
.dtab.active{ background:var(--surface-solid); color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,.08); }
.field-row{ margin-bottom:14px; }
.field-row label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-3); display:block; margin-bottom:5px; }
.field-row .v{ font-size:13.5px; }

/* ---------- Modal (centered overlay, e.g. Manage Team) ---------- */
.modal-overlay{ position:fixed; inset:0; background:rgba(15,23,42,.4); backdrop-filter:blur(2px); z-index:60; opacity:0; pointer-events:none; transition:opacity .3s ease; }
.modal-overlay.open{ opacity:1; pointer-events:all; }
.modal{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-48%); width:560px; max-width:92vw; max-height:86vh;
  overflow-y:auto; background:var(--surface-solid); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); z-index:61; opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s cubic-bezier(.2,.9,.2,1);
}
.modal.open{ opacity:1; pointer-events:all; transform:translate(-50%,-50%); }
.modal-head{ padding:20px 22px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background:var(--surface-solid); }
.modal-head h3{ font-size:16px; font-weight:700; margin:0; }
.modal-close{ width:30px; height:30px; border-radius:9px; background:var(--border); display:flex; align-items:center; justify-content:center; border:none; color:var(--text-2); flex-shrink:0; }
.modal-body{ padding:20px 22px; }

.team-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; max-height:290px; overflow-y:auto; }
.team-row{ display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:12px; }
.team-row.inactive{ opacity:.5; }
.team-row .who{ flex:1; min-width:0; }
.team-row .who b{ display:block; font-size:13px; }
.team-row .who span{ font-size:11.5px; color:var(--text-3); }
.team-row .role-pill{ font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:100px; background:var(--border); color:var(--text-2); white-space:nowrap; }
.team-row .row-actions{ display:flex; gap:6px; flex-shrink:0; }
.team-row .row-actions button{ width:28px; height:28px; border-radius:8px; border:1px solid var(--border); background:var(--surface-solid); color:var(--text-2); display:flex; align-items:center; justify-content:center; font-size:12px; }
.team-row .row-actions button:hover{ border-color:var(--border-strong); color:var(--text); }
.team-row .row-actions button:disabled{ opacity:.4; cursor:not-allowed; }

#view-users .card{ padding:22px 24px; }
.users-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.users-toolbar .search-box{ flex:1; min-width:240px; max-width:400px; padding:11px 18px; border-radius:100px; }
.users-toolbar .search-box input{ font-size:13.5px; padding:2px 0; }
#add-user-btn{ padding:11px 22px; font-size:13.5px; font-weight:600; border-radius:12px; }
.team-row.user-row{ cursor:pointer; }
.team-row.user-row .row-actions{ align-items:center; }

/* Same visual as .switch, but a distinct class: assets/app.js binds a
   generic "click -> classList.toggle('on')" handler to every .switch found
   at DOMContentLoaded (for the cosmetic Settings cards), which would
   double-toggle an active/inactive control actually wired to the API — see
   assets/users.js. */
.toggle{ position:relative; width:38px; height:22px; border-radius:100px; background:var(--border); transition:.25s; flex-shrink:0; cursor:pointer; }
.toggle.on{ background:var(--emerald); }
.toggle i{ position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; transition:.25s; }
.toggle.on i{ transform:translateX(16px); }

.team-form{ border-top:1px solid var(--border); padding-top:16px; }
.team-form h4{ font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-3); margin:0 0 12px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.form-field{ display:flex; flex-direction:column; gap:5px; }
.form-field label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-3); }
.form-field input, .form-field select{
  padding:9px 12px; border-radius:10px; border:1px solid var(--border); background:var(--surface-solid); color:var(--text); font-size:13px; outline:none; width:100%;
}
.form-field input:focus, .form-field select:focus{ border-color:var(--border-strong); }
.form-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:6px; }
.team-msg{ font-size:12px; margin-top:10px; min-height:16px; }
.team-msg.error{ color:var(--red); }
.team-msg.success{ color:var(--emerald-dk); }
.timeline-item{ display:flex; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); }
.timeline-item .tdot{ width:8px; height:8px; border-radius:50%; background:var(--blue); margin-top:5px; flex-shrink:0; }
.timeline-item b{ font-size:12.5px; display:block; }
.timeline-item span{ font-size:11px; color:var(--text-3); }

/* ---------- Profile View ---------- */
.profile-layout{ max-width:820px; margin:0 auto; width:100%; }
.profile-card{ padding:24px; }
.profile-sections{ display:flex; flex-direction:column; gap:20px; }
.sidebar-foot .user-chip{ cursor:pointer; padding:10px 12px; }

.view-panel{ display:none; height:100%; }
.view-panel.active{ display:block; animation:fadeIn .35s ease; }
.view-panel.flex-active{ display:flex; flex-direction:column; animation:fadeIn .35s ease; }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:translateY(0);} }

@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }

@media (max-width:1200px){
  .stat-grid{ grid-template-columns:repeat(3,1fr); }
  .dash-grid{ grid-template-columns:1fr; }
  .role-grid{ grid-template-columns:repeat(3,1fr); }
  .settings-grid{ grid-template-columns:1fr; }
}