/* ============================================================
   SwiftAnswer brand layer - loaded AFTER dashlite.css to reskin
   the default DashLite theme to the SwiftAnswer palette.
   Font = Inter (placeholder). Swap the @import + --sa-font when
   the brand Google font is supplied.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --sa-primary:#3D1F48;     /* aubergine - wordmark */
  --sa-primary-d:#2b1434;   /* darker (hover/active) */
  --sa-primary-l:#5a3a68;
  --sa-cyan:#26CFEA;
  --sa-magenta:#FE00B6;
  --sa-yellow:#FED601;
  --sa-ink:#1f2433;
  --sa-font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

body,.nk-body{ font-family:var(--sa-font); color:var(--sa-ink); }
h1,h2,h3,h4,h5,h6,.nk-block-title{ font-family:var(--sa-font); color:var(--sa-primary); font-weight:700; }

/* ---- Buttons ---- */
.btn-primary{ background:var(--sa-primary); border-color:var(--sa-primary); }
.btn-primary:hover,.btn-primary:focus,.btn-primary:active{ background:var(--sa-primary-d)!important; border-color:var(--sa-primary-d)!important; box-shadow:none; }
.btn-lg{ border-radius:8px; font-weight:600; letter-spacing:.01em; }
.btn-block{ display:flex; align-items:center; justify-content:center; width:100%; }

/* ---- Links ---- */
a{ color:var(--sa-primary); }
.link-primary,a.link-primary,.link-primary:hover{ color:var(--sa-primary)!important; }
.text-primary{ color:var(--sa-primary)!important; }
.bg-primary{ background:var(--sa-primary)!important; }

/* ---- Forms ---- */
.form-control{ border-radius:8px; }
.form-control:focus{ border-color:var(--sa-primary); box-shadow:0 0 0 3px rgba(61,31,72,.10); }
.form-control-lg{ height:calc(2.25rem + 1rem + 2px); }
/* centre input icons (globe, eye) vertically regardless of input height */
.form-control-wrap .form-icon{ top:0; bottom:0; height:auto; display:inline-flex; align-items:center; }

/* ---- Official Google button ---- */
.btn-google{ background:#fff; border:1px solid #dadce0; color:#3c4043; font-weight:500; gap:.65rem; }
.btn-google:hover,.btn-google:focus{ background:#f7f8f8; border-color:#d2d3d4; color:#3c4043; box-shadow:0 1px 2px rgba(60,64,67,.18); }
.btn-google svg{ width:18px; height:18px; flex:0 0 18px; }

/* ---- Secondary "email" button (de-emphasised vs Google) ---- */
.btn-email{ background:#fff; border:1px solid #e3e7ee; color:var(--sa-primary); font-weight:600; gap:.5rem; }
.btn-email:hover,.btn-email:focus{ background:#faf7fb; border-color:var(--sa-primary-l); color:var(--sa-primary); }

/* Reveal the email form */
.sa-reveal{ animation:saFade .25s ease; }
@keyframes saFade{ from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:none;} }

/* OR divider */
.sa-or{ display:flex; align-items:center; gap:1rem; color:#9aa1b1; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; margin:1.25rem 0; }
.sa-or::before,.sa-or::after{ content:""; flex:1; height:1px; background:#e7eaf0; }

/* ============================================================
   Auth split layout
   ============================================================ */
.sa-auth-logo{ height:58px; width:auto; }
.sa-auth-form-wrap{ width:100%; max-width:420px; margin:auto; padding:2rem 1.25rem; }
.sa-auth-head .sa-title{ font-size:1.6rem; margin-bottom:.35rem; }
.sa-auth-head .sa-desc{ color:#6b7280; margin-bottom:1.75rem; }
.sa-foot-note{ color:#6b7280; }

/* Right brand panel */
.sa-auth-brand{
  background:
    radial-gradient(900px 500px at 85% -10%, #5e3270 0%, rgba(94,50,112,0) 55%),
    radial-gradient(700px 500px at 10% 110%, #1c0f24 0%, rgba(28,15,36,0) 55%),
    var(--sa-primary);
  color:#fff; position:relative; overflow:hidden;
}
.sa-auth-brand .sa-brand-inner{ max-width:460px; margin:auto; padding:3rem; position:relative; z-index:2; }
.sa-brand-logo{ height:50px; margin-bottom:2.5rem; }
.sa-tagline{ color:#fff; font-size:2rem; line-height:1.2; font-weight:800; margin-bottom:1rem; }
.sa-tagline .sa-accent{ color:var(--sa-cyan); }
.sa-sub{ color:rgba(255,255,255,.72); font-size:1.02rem; margin-bottom:2.25rem; }

/* Trust chips */
.sa-chips{ display:flex; flex-wrap:wrap; gap:.6rem 1.25rem; margin-top:2rem; }
.sa-chip{ display:inline-flex; align-items:center; gap:.5rem; font-size:.86rem; color:rgba(255,255,255,.9); }
.sa-chip .fa-solid,.sa-chip .fa-regular{ color:var(--sa-cyan); }

/* Decorative signal arcs (echo the logo mark) */
.sa-arcs{ position:absolute; right:-90px; top:-70px; width:360px; height:360px; opacity:.9; z-index:1; }

/* Captured-lead mock card (shows the product value) */
.sa-leadcard{
  background:#fff; color:var(--sa-ink); border-radius:14px; padding:1rem 1.1rem;
  box-shadow:0 24px 60px rgba(0,0,0,.35); max-width:340px;
}
.sa-lc-top{ display:flex; align-items:center; gap:.7rem; margin-bottom:.85rem; }
.sa-avatar{ width:40px; height:40px; border-radius:50%; background:var(--sa-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; }
.sa-lc-name{ font-weight:700; color:var(--sa-primary); line-height:1.1; }
.sa-lc-meta{ font-size:.74rem; color:#8b93a3; }
.sa-badge-urgent{ margin-left:auto; background:var(--sa-magenta); color:#fff; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:.2rem .5rem; border-radius:20px; }
.sa-lc-rows{ display:grid; gap:.5rem; font-size:.85rem; color:#444b5a; }
.sa-lc-rows .fa-solid{ width:16px; color:var(--sa-primary); margin-right:.5rem; }

@media (max-width:991.98px){
  .sa-auth-form-wrap{ padding:1.5rem 1.25rem; }
}
/* desktop: clean 50/50 split, form centred in its half, promo fills the right half */
@media (min-width:992px){
  .nk-split.nk-split-page{ min-height:100vh; display:flex; flex-wrap:nowrap; }
  .nk-split-page > .nk-split-content{ flex:1 1 50%; max-width:50%; min-width:0; }
  .nk-split-page > .nk-auth-container{ display:flex; align-items:center; justify-content:center; }
}

/* ============================================================
   Plan selection
   ============================================================ */
.sa-plan-page{ max-width:1040px; margin:0 auto; padding:3rem 1.25rem 4rem; }
.sa-plan-head{ text-align:center; margin-bottom:2.5rem; }
.sa-plan-head .sa-plan-logo{ height:54px; margin-bottom:1.75rem; }
.sa-plan-head h2{ font-size:1.9rem; margin-bottom:.5rem; }
.sa-plan-head p{ color:#6b7280; font-size:1.05rem; margin:0; }

.sa-plan-card{
  position:relative; background:#fff; border:1px solid #e7eaf0; border-radius:16px;
  padding:2rem 1.6rem; height:100%; display:flex; flex-direction:column;
  transition:transform .15s ease, box-shadow .15s ease;
}
.sa-plan-card:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(61,31,72,.10); }
.sa-plan-card.is-popular{ border:2px solid var(--sa-primary); box-shadow:0 24px 60px rgba(61,31,72,.16); }
.sa-plan-badge{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--sa-primary); color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; padding:.35rem .85rem; border-radius:20px; white-space:nowrap;
}
.sa-plan-name{ font-weight:700; color:var(--sa-primary); font-size:1.15rem; }
.sa-plan-price{ font-size:2.4rem; font-weight:800; color:var(--sa-ink); line-height:1.1; margin:.4rem 0 .1rem; }
.sa-plan-price span{ font-size:.95rem; font-weight:500; color:#8b93a3; }
.sa-plan-calls{ color:var(--sa-primary); font-weight:600; margin-bottom:1.25rem; }
.sa-plan-feats{ list-style:none; padding:0; margin:0 0 1.6rem; display:grid; gap:.7rem; }
.sa-plan-feats li{ display:flex; align-items:flex-start; gap:.6rem; font-size:.92rem; color:#444b5a; }
.sa-plan-feats li .fa-check{ color:#1ec98b; margin-top:.18rem; }
.sa-plan-feats li.is-off{ color:#aeb4c0; }
.sa-plan-feats li.is-off .fa-xmark{ color:#cdd2db; margin-top:.18rem; }
.sa-plan-card .btn{ margin-top:auto; }
.sa-plan-card.is-popular .btn-outline-primary{ background:var(--sa-primary); border-color:var(--sa-primary); color:#fff; }
.btn-outline-primary{ border:1px solid var(--sa-primary); color:var(--sa-primary); background:#fff; }
.btn-outline-primary:hover{ background:var(--sa-primary); border-color:var(--sa-primary); color:#fff; }
.sa-plan-foot{ text-align:center; color:#8b93a3; margin-top:2.25rem; font-size:.92rem; }

/* ============================================================
   Setup wizard (focused stepper, no sidebar)
   ============================================================ */
.sa-wiz{ min-height:100vh; display:flex; flex-direction:column; background:#fff; }
.sa-wiz-top{ display:flex; align-items:center; justify-content:space-between; padding:1rem 1.5rem; }
.sa-wiz-top .sa-wiz-logo{ height:34px; }
.sa-wiz-top .sa-wiz-exit{ color:#8b93a3; font-size:.9rem; }
.sa-wiz-top .sa-wiz-exit:hover{ color:var(--sa-primary); }
.sa-wiz-progress{ height:4px; background:#eef0f4; }
.sa-wiz-progress-bar{ height:100%; width:0; border-radius:0 4px 4px 0; transition:width .45s ease;
  background:linear-gradient(90deg,var(--sa-primary),var(--sa-magenta)); }

.sa-wiz-body{ flex:1; }
.sa-wiz-inner{ width:100%; max-width:600px; margin:0 auto; padding:2.75rem 1.25rem 2rem; }
.sa-wiz-count{ color:var(--sa-magenta); font-weight:700; font-size:.78rem; letter-spacing:.07em; text-transform:uppercase; margin-bottom:.7rem; }
.sa-wiz-step{ display:none; }
.sa-wiz-step.is-active{ display:block; animation:saFade .3s ease; }
.sa-wiz-step h2{ font-size:1.55rem; margin-bottom:.4rem; }
.sa-wiz-step .sa-wiz-desc{ color:#6b7280; margin-bottom:1.75rem; }

.sa-wiz-foot{ border-top:1px solid #eef0f4; padding:1rem 1.25rem; position:sticky; bottom:0; background:#fff; }
.sa-wiz-foot-inner{ width:100%; max-width:600px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; }
.sa-btn-back{ background:transparent; border:1px solid #e3e7ee; color:#6b7280; font-weight:600; }
.sa-btn-back:hover{ border-color:var(--sa-primary-l); color:var(--sa-primary); }

/* website step */
.sa-nolink{ display:inline-flex; align-items:center; gap:.45rem; color:var(--sa-primary); font-weight:600; cursor:pointer; margin-top:1.1rem; }
.sa-nolink:hover{ color:var(--sa-magenta); }
.sa-hint{ display:flex; align-items:center; gap:.45rem; margin-top:.7rem; font-size:.85rem; color:#8b93a3; }
.sa-hint .fa-wand-magic-sparkles{ color:var(--sa-magenta); }

/* services step */
.sa-svc{ display:grid; gap:.8rem; margin-bottom:1rem; }
.sa-svc-card{ position:relative; border:1px solid #e7eaf0; border-radius:12px; padding:.85rem 2.6rem .85rem 1rem; }
.sa-svc-hint{ font-size:.84rem; color:#8b93a3; margin-bottom:.75rem; display:flex; align-items:center; gap:.45rem; }
.sa-svc-hint .fa-pen{ color:var(--sa-magenta); }
.sa-svc-field{ width:100%; border:none; border-bottom:1px solid #eef0f4; background:transparent; padding:.32rem .15rem; border-radius:0; font-family:inherit; }
.sa-svc-field::placeholder{ color:#b8bec9; }
.sa-svc-field:hover{ border-bottom-color:#cdd2db; }
.sa-svc-field:focus{ outline:none; border-bottom-color:var(--sa-primary); box-shadow:0 1px 0 0 var(--sa-primary); }
.sa-svc-title{ font-weight:700; color:var(--sa-primary); font-size:.98rem; }
.sa-svc-desc{ color:#6b7280; font-size:.88rem; resize:none; margin-top:.15rem; line-height:1.45; display:block; }
.sa-svc-del{ position:absolute; top:.65rem; right:.65rem; width:28px; height:28px; border-radius:50%; border:none; background:#f4f1f6; color:var(--sa-primary); cursor:pointer; line-height:1; }
.sa-svc-del:hover{ background:var(--sa-magenta); color:#fff; }
.sa-svc-add{ border:1px dashed #cdd2db; border-radius:12px; padding:.9rem; width:100%; background:#fafbfc; color:var(--sa-primary); font-weight:600; cursor:pointer; }
.sa-svc-add:hover{ border-color:var(--sa-primary); background:#faf7fb; }

/* crawl loading overlay */
.sa-wiz-loading{ position:fixed; inset:0; background:rgba(255,255,255,.95); display:none; align-items:center; justify-content:center; flex-direction:column; z-index:60; text-align:center; padding:1.5rem; }
.sa-wiz-loading.is-on{ display:flex; }
.sa-spinner{ width:46px; height:46px; border:4px solid #eef0f4; border-top-color:var(--sa-primary); border-radius:50%; animation:saSpin .8s linear infinite; margin-bottom:1.25rem; }
.sa-wiz-loading p{ color:var(--sa-primary); font-weight:600; margin:0; }
.sa-wiz-loading small{ color:#8b93a3; }
@keyframes saSpin{ to{ transform:rotate(360deg); } }

/* ============================================================
   App shell (sidebar + topbar) + dashboard
   ============================================================ */
.nk-sidebar-logo .sa-side-logo, .sa-side-logo{ height:76px; width:auto; }
.nk-sidebar-head{ height:auto; min-height:106px; }
/* push the trial widget to the bottom of the sidebar */
.nk-sidebar-content{ display:flex; flex-direction:column; min-height:calc(100vh - 98px); }
.nk-sidebar-content .sa-trial{ margin-top:auto; }
/* header: sticky (in-flow + stays visible) so it never overlaps content */
.nk-header.nk-header-fixed{ position:sticky; top:0; z-index:800; }
.nk-menu-link{ border-radius:8px; padding-top:.55rem; padding-bottom:.55rem; }
.nk-menu-link:hover{ background:rgba(61,31,72,.045); }
.nk-menu-item.active > .nk-menu-link{ background:rgba(61,31,72,.08); box-shadow:inset 3px 0 0 var(--sa-magenta); }
.nk-menu-item.active > .nk-menu-link,
.nk-menu-item.active > .nk-menu-link .nk-menu-icon{ color:var(--sa-primary); }
.nk-menu-item.active > .nk-menu-link .nk-menu-icon{ color:var(--sa-magenta); }
.nk-menu-icon{ width:1.5rem; margin-right:.85rem; text-align:center; }
.nk-menu-icon em{ font-size:1.05rem; }

/* number chip + status pill */
.sa-num-chip{ display:inline-flex; align-items:center; gap:.55rem; background:#f6f4f8; border:1px solid #ece8f0; border-radius:20px; padding:.32rem .8rem; font-weight:700; color:var(--sa-primary); font-size:.9rem; white-space:nowrap; }
.sa-num-chip .fa-phone-volume{ color:var(--sa-cyan); }
.sa-num-chip .sa-copy{ cursor:pointer; color:#aeb4c0; }
.sa-num-chip .sa-copy:hover{ color:var(--sa-primary); }
.sa-status{ display:inline-flex; align-items:center; gap:.45rem; font-weight:600; font-size:.85rem; color:#1ec98b; white-space:nowrap; }
.sa-status .dot{ width:8px; height:8px; border-radius:50%; background:#1ec98b; box-shadow:0 0 0 3px rgba(30,201,139,.15); }
.sa-status.is-off{ color:#d99a00; } .sa-status.is-off .dot{ background:#d99a00; box-shadow:0 0 0 3px rgba(217,154,0,.15); }
.user-avatar.sa-av{ background:var(--sa-primary); color:#fff; }

/* trial widget (sidebar footer) */
.sa-trial{ margin:1rem .75rem 1.25rem; padding:1.05rem; border-radius:14px; background:linear-gradient(160deg,#4a2659 0%,var(--sa-primary) 100%); color:#fff; }
.sa-trial-top{ display:flex; justify-content:space-between; align-items:center; font-size:.82rem; }
.sa-trial-top b{ font-weight:700; }
.sa-trial-top span{ color:rgba(255,255,255,.8); }
.sa-trial-bar{ height:6px; border-radius:6px; background:rgba(255,255,255,.2); margin:.6rem 0 .5rem; overflow:hidden; }
.sa-trial-bar i{ display:block; height:100%; background:var(--sa-cyan); border-radius:6px; }
.sa-trial-sub{ font-size:.74rem; color:rgba(255,255,255,.7); margin-bottom:.85rem; }
.sa-trial .btn-light{ background:#fff; color:var(--sa-primary); font-weight:700; border:none; }

/* page heading */
.sa-page-title{ font-size:1.5rem; margin-bottom:.15rem; }
.sa-page-sub{ color:#8b93a3; margin:0; }

/* stat tiles */
.sa-stat{ background:#fff; border:1px solid #e7eaf0; border-radius:14px; padding:1.1rem 1.25rem; height:100%; }
.sa-stat-head{ display:flex; justify-content:space-between; align-items:flex-start; }
.sa-stat-label{ color:#8b93a3; font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.sa-stat-val{ font-size:1.9rem; font-weight:800; color:var(--sa-primary); line-height:1.1; margin-top:.3rem; }
.sa-stat-val small{ font-size:.95rem; font-weight:600; color:#aeb4c0; }
.sa-stat-ic{ width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.05rem; flex:0 0 40px; }
.sa-stat-bar{ height:6px; border-radius:6px; background:#eef0f4; margin-top:.7rem; overflow:hidden; }
.sa-stat-bar i{ display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,var(--sa-primary),var(--sa-magenta) 70%,var(--sa-cyan)); }

/* user dropdown: caret + proper menu padding */
.sa-caret{ color:#aeb4c0; font-size:.7rem; margin-left:.55rem; }
.user-dropdown .dropdown-toggle::after{ display:none; }
.user-dropdown .dropdown-menu{ padding:.4rem; min-width:215px; border:1px solid #eef0f4; border-radius:12px; box-shadow:0 12px 32px rgba(61,31,72,.12); }
.user-dropdown .dropdown-menu .link-list li a{ display:flex; align-items:center; gap:.65rem; padding:.6rem .7rem; border-radius:8px; color:#444b5a; font-weight:500; }
.user-dropdown .dropdown-menu .link-list li a:hover{ background:rgba(61,31,72,.06); color:var(--sa-primary); }
.user-dropdown .dropdown-menu .link-list li a em{ color:var(--sa-primary); width:1.1rem; text-align:center; }

/* a little more brand colour around the page */
.sa-card-head h6 .fa-solid{ color:var(--sa-cyan); }
.sa-play:hover{ background:var(--sa-cyan); border-color:var(--sa-cyan); color:#fff; }
.link-primary:hover{ color:var(--sa-magenta)!important; }
.bg-cyan-soft{ background:rgba(38,207,234,.14); color:#0fa6c2; }
.bg-magenta-soft{ background:rgba(254,0,182,.1); color:var(--sa-magenta); }
.bg-primary-soft{ background:rgba(61,31,72,.08); color:var(--sa-primary); }
.bg-yellow-soft{ background:rgba(254,214,1,.2); color:#a98700; }

/* cards */
.sa-card{ background:#fff; border:1px solid #e7eaf0; border-radius:14px; }
.sa-card-head{ display:flex; align-items:center; justify-content:space-between; padding:1.1rem 1.25rem; border-bottom:1px solid #f1f3f6; }
.sa-card-head h6{ margin:0; font-weight:700; color:var(--sa-primary); }
.sa-card-body{ padding:.4rem 1.25rem 1rem; }

/* recent leads list */
.sa-lead-row{ display:flex; align-items:center; gap:.25rem; border-bottom:1px solid #f1f3f6; position:relative; padding-left:11px; }
.sa-lead-row:last-child{ border-bottom:none; }
.sa-lead-row:hover{ background:rgba(61,31,72,.015); }
.sa-lead-link{ display:flex; align-items:flex-start; gap:.85rem; flex:1 1 auto; min-width:0; padding:.9rem 0; color:inherit; text-decoration:none; }
.sa-lead-av{ width:40px; height:40px; border-radius:50%; background:rgba(61,31,72,.08); color:var(--sa-primary); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.78rem; flex:0 0 40px; margin-top:.1rem; }
.sa-lead-main{ flex:1 1 auto; min-width:0; }
.sa-lead-top{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.sa-lead-name{ font-weight:700; color:var(--sa-primary); }
.sa-lead-job{ color:#6b7280; font-size:.88rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:.12rem; }
.sa-lead-meta{ display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; margin-top:.3rem; }
.sa-lead-num{ font-size:.82rem; color:#8b93a3; }
.sa-lead-num em{ color:var(--sa-cyan); margin-right:.35rem; }
.sa-lead-time{ color:#aeb4c0; font-size:.78rem; white-space:nowrap; }
.sa-lead-chev{ flex:0 0 auto; align-self:center; color:#cfd4dd; font-size:.85rem; }
.sa-badge{ font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:.2rem .5rem; border-radius:20px; white-space:nowrap; }
.sa-badge.hot{ background:rgba(254,0,182,.12); color:var(--sa-magenta); }
.sa-badge.warm{ background:rgba(254,214,1,.22); color:#a98700; }
.sa-badge.cold{ background:#eef0f4; color:#8b93a3; }
.sa-badge.urgent{ background:var(--sa-magenta); color:#fff; }
.sa-act{ width:34px; height:34px; border-radius:50%; border:1px solid #e7eaf0; background:#fff; color:var(--sa-primary); cursor:pointer; flex:0 0 34px; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
.sa-act:hover{ background:var(--sa-primary); color:#fff; border-color:var(--sa-primary); }
.sa-act.sa-callback:hover{ background:var(--sa-cyan); border-color:var(--sa-cyan); }

/* receptionist mini card */
.sa-recep-num{ font-size:1.35rem; font-weight:800; color:var(--sa-primary); letter-spacing:.01em; }

/* ============================================================
   Lead / call detail page
   ============================================================ */
.sa-back{ display:inline-flex; align-items:center; gap:.4rem; color:#8b93a3; font-weight:600; margin-bottom:1rem; }
.sa-back:hover{ color:var(--sa-primary); }
.sa-detail-head{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.sa-detail-av{ width:54px; height:54px; border-radius:50%; background:var(--sa-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.05rem; flex:0 0 54px; }
.sa-detail-name{ font-size:1.4rem; font-weight:800; color:var(--sa-primary); line-height:1.1; }
.sa-detail-meta{ color:#8b93a3; font-size:.9rem; }
.sa-detail-actions{ margin-left:auto; display:flex; gap:.5rem; flex-wrap:wrap; }

/* waveform player */
.sa-player{ display:flex; align-items:center; gap:1rem; }
.sa-player-btn{ width:48px; height:48px; border-radius:50%; background:var(--sa-primary); color:#fff; border:none; flex:0 0 48px; cursor:pointer; font-size:1rem; }
.sa-player-btn:hover{ background:var(--sa-primary-d); }
.sa-wave{ flex:1; display:flex; align-items:center; gap:2px; height:46px; }
.sa-wave-bar{ flex:1; min-width:2px; background:#e3e7ee; border-radius:2px; transition:background .05s; }
.sa-wave-bar.played{ background:linear-gradient(180deg,var(--sa-primary),var(--sa-magenta)); }
.sa-player-time{ font-variant-numeric:tabular-nums; color:#8b93a3; font-size:.85rem; white-space:nowrap; }

/* transcript */
.sa-tx{ display:flex; flex-direction:column; gap:.85rem; max-height:420px; overflow:auto; }
.sa-tx-row{ display:flex; gap:.75rem; }
.sa-tx-who{ flex:0 0 58px; font-weight:700; font-size:.76rem; text-transform:uppercase; letter-spacing:.03em; padding-top:.55rem; }
.sa-tx-row.ai .sa-tx-who{ color:var(--sa-primary); }
.sa-tx-row.caller .sa-tx-who{ color:#0fa6c2; }
.sa-tx-msg{ background:#f6f7f9; border-radius:10px; padding:.55rem .8rem; color:#444b5a; font-size:.9rem; }
.sa-tx-row.ai .sa-tx-msg{ background:rgba(61,31,72,.06); }

/* answers (structured Q&A) */
.sa-ans{ display:grid; gap:1rem; }
.sa-ans-q{ font-size:.74rem; color:#8b93a3; text-transform:uppercase; letter-spacing:.04em; font-weight:700; display:flex; align-items:center; gap:.4rem; }
.sa-ans-tag{ font-size:.6rem; background:rgba(38,207,234,.16); color:#0fa6c2; padding:.05rem .35rem; border-radius:10px; letter-spacing:.02em; }
.sa-ans-a{ color:var(--sa-ink); font-weight:600; margin-top:.1rem; }
.sa-ans-a.muted{ color:#aeb4c0; font-weight:500; font-style:italic; }

/* key/value call info */
.sa-kv{ display:grid; gap:.6rem; }
.sa-kv-row{ display:flex; justify-content:space-between; gap:1rem; font-size:.9rem; }
.sa-kv-row .k{ color:#8b93a3; }
.sa-kv-row .v{ color:var(--sa-ink); font-weight:600; text-align:right; }

/* caller history */
.sa-hist{ display:flex; flex-direction:column; }
.sa-hist-row{ display:flex; align-items:center; gap:.75rem; padding:.7rem 0; border-bottom:1px solid #f1f3f6; text-decoration:none; }
.sa-hist-row:last-child{ border-bottom:none; }
.sa-hist-row:hover .sa-hist-en{ color:var(--sa-primary); }
.sa-hist-date{ font-size:.78rem; color:#aeb4c0; flex:0 0 72px; }
.sa-hist-en{ flex:1; color:#444b5a; font-size:.88rem; }

/* ============================================================
   Feedback round: consistency + polish
   ============================================================ */
/* Force Inter everywhere (icons on <em> keep their own font) */
.nk-body p,.nk-body a,.nk-body span,.nk-body div,.nk-body li,.nk-body button,
.nk-body input,.nk-body select,.nk-body textarea,.nk-body label,.nk-body small,
.nk-body b,.nk-body strong,.nk-body h1,.nk-body h2,.nk-body h3,.nk-body h4,
.nk-body h5,.nk-body h6{ font-family:var(--sa-font); }

/* tighten the gap under the sticky header */
.nk-content{ padding-top:1.5rem; }

/* trial widget: don't sit flush to the bottom */
.nk-sidebar-content{ min-height:calc(100vh - 112px); padding-bottom:1rem; }
.sa-trial{ margin:1rem .75rem 1.5rem; }

/* transcript as chat bubbles: AI left, caller right */
.sa-tx{ gap:.8rem; }
.sa-tx-row{ display:flex; flex-direction:column; max-width:82%; }
.sa-tx-row.ai{ align-self:flex-start; align-items:flex-start; }
.sa-tx-row.caller{ align-self:flex-end; align-items:flex-end; }
.sa-tx-who{ flex:none; padding:0 .6rem .2rem; font-size:.68rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; color:#aeb4c0; }
.sa-tx-msg{ border-radius:16px; }
.sa-tx-row.ai .sa-tx-msg{ background:#f3f1f6; color:#3a3f4d; border-bottom-left-radius:4px; }
.sa-tx-row.caller .sa-tx-msg{ background:var(--sa-primary); color:#fff; border-bottom-right-radius:4px; }

/* inputs with a left icon: pad the text so it never overlaps the icon */
.form-control-wrap .form-icon-left ~ .form-control{ padding-left:2.5rem; }

/* leads: coloured avatars for a bit more life */
.sa-lead-row:nth-child(4n+1) .sa-lead-av{ background:rgba(61,31,72,.10); color:var(--sa-primary); }
.sa-lead-row:nth-child(4n+2) .sa-lead-av{ background:rgba(38,207,234,.16); color:#0fa6c2; }
.sa-lead-row:nth-child(4n+3) .sa-lead-av{ background:rgba(254,0,182,.10); color:var(--sa-magenta); }
.sa-lead-row:nth-child(4n+4) .sa-lead-av{ background:rgba(254,214,1,.22); color:#a98700; }

/* header is sticky (in flow), so drop DashLite's fixed-header 65px offset that left a big gap */
.nk-header-fixed + .nk-content{ margin-top:0; }

/* narrower sidebar on desktop (DashLite default 290px was too wide for short labels) */
@media (min-width:1200px){
  .nk-sidebar, .nk-sidebar-head{ width:264px; }
  .nk-sidebar + .nk-wrap{ padding-left:264px; }
}

.nk-menu-text{ white-space:nowrap; }

/* call categories (type badges) + taller transcript */
.sa-badge.opportunity{ background:rgba(18,166,115,.14); color:#12a673; }
.sa-badge.existing{ background:rgba(61,31,72,.10); color:var(--sa-primary); }
.sa-badge.enquiry{ background:rgba(38,207,234,.16); color:#0fa6c2; }
.sa-badge.spam{ background:#eef0f4; color:#9aa1b1; }
.sa-tx{ max-height:620px; }

/* ============================================================
   Usage + Billing
   ============================================================ */
.sa-usage-bar{ height:14px; border-radius:8px; background:#eef0f4; overflow:hidden; }
.sa-usage-bar i{ display:block; height:100%; border-radius:8px; background:linear-gradient(90deg,var(--sa-primary),var(--sa-magenta) 70%,var(--sa-cyan)); }
.sa-usage-legend{ display:flex; gap:1.5rem; flex-wrap:wrap; margin-top:1rem; font-size:.85rem; color:#6b7280; }
.sa-usage-legend b{ color:var(--sa-ink); }

/* simple table */
.sa-tbl{ width:100%; border-collapse:collapse; }
.sa-tbl th{ text-align:left; font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; color:#8b93a3; font-weight:700; padding:.55rem .75rem; border-bottom:1px solid #eef0f4; }
.sa-tbl td{ padding:.7rem .75rem; border-bottom:1px solid #f4f6f8; font-size:.9rem; color:#444b5a; }
.sa-tbl tr:last-child td{ border-bottom:none; }
.sa-tbl .num{ font-weight:700; color:var(--sa-primary); }
.sa-tbl td.right,.sa-tbl th.right{ text-align:right; }

/* payment method */
.sa-pm{ display:flex; align-items:center; gap:1rem; padding:1rem; border:1px solid #e7eaf0; border-radius:12px; }
.sa-pm-brand{ width:48px; height:32px; border-radius:6px; background:#f4f1f6; display:flex; align-items:center; justify-content:center; color:var(--sa-primary); font-size:1.3rem; flex:0 0 48px; }
.sa-pm-main{ flex:1; min-width:0; }
.sa-pm-num{ font-weight:700; color:var(--sa-ink); }
.sa-pm-exp{ font-size:.82rem; color:#8b93a3; }

/* credit banner */
.sa-credit{ display:flex; align-items:center; gap:.9rem; padding:1rem 1.1rem; border-radius:12px; background:rgba(18,166,115,.09); border:1px solid rgba(18,166,115,.22); }
.sa-credit .fa-wallet{ color:#12a673; font-size:1.4rem; }
.sa-credit-amt{ font-weight:800; color:#12a673; }

/* invoices */
.sa-inv-row{ display:flex; align-items:center; gap:1rem; padding:.85rem 0; border-bottom:1px solid #f1f3f6; }
.sa-inv-row:last-of-type{ border-bottom:none; }
.sa-inv-main{ flex:1; min-width:0; }
.sa-inv-no{ font-weight:700; color:var(--sa-primary); }
.sa-inv-meta{ font-size:.84rem; color:#8b93a3; }
.sa-inv-amt{ font-weight:700; color:var(--sa-ink); white-space:nowrap; }
.sa-paylog{ background:#fafbfc; border:1px solid #f1f3f6; border-radius:10px; padding:.7rem .9rem; margin:0 0 .6rem; font-size:.86rem; display:none; }
.sa-paylog.show{ display:block; }
.sa-paylog-row{ display:flex; justify-content:space-between; color:#6b7280; padding:.18rem 0; }
.sa-paylog-row .pos{ color:#12a673; }
.sa-paylog-row.total{ color:var(--sa-ink); font-weight:700; border-top:1px solid #eef0f4; margin-top:.35rem; padding-top:.4rem; }

/* invoice + plan status badges */
.sa-badge.paid{ background:rgba(18,166,115,.14); color:#12a673; }
.sa-badge.failed{ background:rgba(254,0,182,.12); color:var(--sa-magenta); }
.sa-badge.draft{ background:#eef0f4; color:#8b93a3; }
.sa-badge.active{ background:rgba(18,166,115,.14); color:#12a673; }
.sa-badge.trial{ background:rgba(38,207,234,.16); color:#0fa6c2; }

/* polish: spacing for card-head icons, invoice/detail badges, waveform gradient */
.sa-card-head h6 em{ margin-right:.6rem; }
.sa-inv-no .sa-badge{ margin-left:.6rem; }
.sa-detail-name .sa-badge{ margin-left:.45rem; }
.sa-wave-bar.played{ background:var(--c, var(--sa-primary)); }

/* waveform shows the brand gradient at rest (faded), fills to full as it plays */
.sa-wave-bar{ background:var(--c,#e3e7ee); opacity:.32; }
.sa-wave-bar.played{ opacity:1; }

/* ============================================================
   Settings (sub-nav + sections)
   ============================================================ */
.sa-subnav{ display:flex; flex-direction:column; gap:.2rem; position:sticky; top:88px; }
.sa-subnav a{ display:flex; align-items:center; gap:.75rem; padding:.65rem .85rem; border-radius:10px; color:#6b7280; font-weight:600; font-size:.92rem; }
.sa-subnav a em{ width:1.2rem; text-align:center; color:#aeb4c0; }
.sa-subnav a:hover{ background:rgba(61,31,72,.045); color:var(--sa-primary); }
.sa-subnav a.active{ background:rgba(61,31,72,.08); color:var(--sa-primary); }
.sa-subnav a.active em{ color:var(--sa-magenta); }

.sa-set-sec{ display:none; }
.sa-set-sec.active{ display:block; animation:saFade .25s ease; }
.sa-set-foot{ display:flex; justify-content:flex-end; border-top:1px solid #f1f3f6; padding-top:1.1rem; margin-top:1.25rem; }
.sa-set-lbl{ font-weight:600; color:var(--sa-ink); margin-bottom:.15rem; }
.sa-set-hint{ font-size:.84rem; color:#8b93a3; margin-bottom:.6rem; }

/* toggle switch */
.sa-switch{ position:relative; display:inline-block; width:44px; height:25px; flex:0 0 44px; }
.sa-switch input{ opacity:0; width:0; height:0; }
.sa-switch .sl{ position:absolute; inset:0; background:#d4d8e0; border-radius:24px; transition:.2s; cursor:pointer; }
.sa-switch .sl:before{ content:""; position:absolute; height:19px; width:19px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; }
.sa-switch input:checked + .sl{ background:var(--sa-primary); }
.sa-switch input:checked + .sl:before{ transform:translateX(19px); }

/* question rows */
.sa-q-row{ display:flex; align-items:center; gap:1rem; padding:.85rem 0; border-bottom:1px solid #f1f3f6; }
.sa-q-row:last-of-type{ border-bottom:none; }
.sa-q-main{ flex:1; min-width:0; }
.sa-q-key{ font-size:.7rem; color:#8b93a3; text-transform:uppercase; letter-spacing:.03em; }
.sa-q-text{ font-weight:600; color:var(--sa-ink); }

/* mode cards */
.sa-mode{ display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; }
.sa-mode-card{ border:1.5px solid #e7eaf0; border-radius:12px; padding:1.1rem; cursor:pointer; transition:.15s; position:relative; }
.sa-mode-card:hover:not(.disabled){ border-color:var(--sa-primary-l); }
.sa-mode-card.active{ border-color:var(--sa-primary); background:rgba(61,31,72,.04); }
.sa-mode-card.disabled{ opacity:.55; cursor:not-allowed; }
.sa-mode-card .ic{ font-size:1.35rem; color:var(--sa-primary); }
.sa-mode-card h6{ margin:.55rem 0 .25rem; }
.sa-mode-card p{ font-size:.82rem; color:#8b93a3; margin:0; }
.sa-mode-soon{ position:absolute; top:.7rem; right:.7rem; font-size:.62rem; background:#eef0f4; color:#8b93a3; padding:.12rem .45rem; border-radius:10px; text-transform:uppercase; font-weight:700; }
@media (max-width:767.98px){ .sa-mode{ grid-template-columns:1fr; } }

/* divert code */
.sa-code{ display:flex; align-items:center; gap:.75rem; background:#f6f4f8; border:1px solid #ece8f0; border-radius:10px; padding:.55rem .85rem; }
.sa-code code{ flex:1; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--sa-primary); font-size:.95rem; font-weight:600; }
.sa-code-copy{ cursor:pointer; color:#8b93a3; flex:0 0 auto; }
.sa-code-copy:hover{ color:var(--sa-magenta); }

/* settings: tidy toggle rows + opening hours + coming-soon chip */
.sa-toggle-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.sa-toggle-row .sa-tr-main{ flex:1; min-width:0; }
.sa-soon{ font-size:.6rem; background:#eef0f4; color:#8b93a3; padding:.12rem .45rem; border-radius:10px; text-transform:uppercase; font-weight:700; margin-left:.4rem; vertical-align:middle; }
.sa-switch input:disabled + .sl{ opacity:.5; cursor:not-allowed; }
.sa-hours-row{ display:flex; align-items:center; gap:1rem; padding:.8rem 0; border-bottom:1px solid #f1f3f6; }
.sa-hours-row:last-child{ border-bottom:none; }
.sa-hours-day{ width:108px; font-weight:600; }
.sa-hours-time{ max-width:128px; }
.sa-hours-to{ color:#8b93a3; }
.sa-hours-closed{ color:#aeb4c0; }

/* Train your AI (knowledge sources) */
.sa-ks-row{ display:flex; align-items:center; gap:1rem; padding:.85rem 0; border-bottom:1px solid #f1f3f6; }
.sa-ks-row:last-of-type{ border-bottom:none; }
.sa-ks-ic{ width:38px; height:38px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex:0 0 38px; font-size:1rem; }
.sa-ks-main{ flex:1; min-width:0; }
.sa-ks-title{ font-weight:600; color:var(--sa-ink); }
.sa-ks-meta{ font-size:.8rem; color:#8b93a3; }
.sa-ks-del{ width:30px; height:30px; border-radius:50%; border:none; background:#f4f1f6; color:var(--sa-primary); cursor:pointer; flex:0 0 30px; }
.sa-ks-del:hover{ background:var(--sa-magenta); color:#fff; }
.ic-web{ background:rgba(38,207,234,.16); color:#0fa6c2; }
.ic-text{ background:rgba(61,31,72,.08); color:var(--sa-primary); }
.ic-file{ background:rgba(254,0,182,.10); color:var(--sa-magenta); }
.sa-ks-group{ font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:#8b93a3; font-weight:700; margin:1.1rem 0 .25rem; }
.sa-ks-group:first-child{ margin-top:0; }

/* DashLite ships a second .gap-N rule that sets height (a vertical spacer in
   its own spacing system), which collapses any flex row we give gap-N to.
   Keep the flex gap, kill the stray height. */
.gap-1,.gap-2,.gap-3,.gap-4,.gap-5{ height:auto !important; }

.sa-soon-badge{ display:inline-block; font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; background:#eef0f4; color:#8b93a3; padding:.12rem .45rem; border-radius:10px; margin-left:.4rem; vertical-align:middle; }

/* Wizard payment */
.sa-pay-summary{ display:flex; justify-content:space-between; align-items:center; padding:.9rem 1.1rem; border:1px solid #e7eaf0; border-radius:12px; background:#fbfbfd; margin-bottom:1.1rem; }
.sa-pay-summary strong{ font-size:1.4rem; color:var(--sa-primary); }
.sa-pay-err{ color:#e5484d; font-size:.9rem; margin-top:.6rem; min-height:1.1rem; }
.sa-pay-done{ text-align:center; padding:1rem 0 .5rem; }
.sa-pay-done-icon{ width:64px; height:64px; border-radius:50%; background:rgba(30,201,139,.14); color:#1ec98b; display:flex; align-items:center; justify-content:center; font-size:1.7rem; margin:0 auto 1.25rem; }
.sa-card-input{ border:1px solid #e3e7ee; border-radius:8px; padding:.85rem 1rem; background:#fff; }
.sa-card-input.StripeElement--focus{ border-color:var(--sa-primary); box-shadow:0 0 0 3px rgba(61,31,72,.10); }

/* Wizard plan picker */
.sa-wiz-inner.sa-wiz-wide, .sa-wiz-foot-inner.sa-wiz-wide{ max-width:940px; }
.sa-plan-pick{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; align-items:stretch; }
.sa-plan-pick-card{ cursor:pointer; margin:0; }
.sa-plan-pick-card.is-selected{ border:2px solid var(--sa-primary); box-shadow:0 16px 40px rgba(61,31,72,.12); }
.sa-plan-pick-card.is-selected .sa-plan-choose{ background:var(--sa-primary); border-color:var(--sa-primary); color:#fff; }
.sa-plan-pick-card.is-disabled{ opacity:.6; cursor:not-allowed; }
.sa-plan-pick-card.is-disabled:hover{ transform:none; box-shadow:none; }
.sa-plan-unavailable{ background:#eef0f4; color:#8b93a3; border:1px solid #e3e7ee; cursor:not-allowed; margin-top:auto; }
.sa-plan-reason{ font-size:.78rem; color:#aeb4c0; text-align:center; margin-top:.5rem; }
@media (max-width:767.98px){ .sa-plan-pick{ grid-template-columns:1fr; } }

/* Wizard opening hours */
.sa-hours{ display:flex; flex-direction:column; gap:.5rem; }
.sa-hours-row{ display:flex; align-items:center; gap:.85rem; }
.sa-hours-times{ display:flex; align-items:center; gap:.5rem; }
.sa-hours-times .form-control{ max-width:120px; }
.sa-hours-to{ color:#8b93a3; }
.sa-hours-closed-label{ display:none; color:#aeb4c0; font-style:italic; }
.sa-hours-row.is-closed .sa-hours-times{ display:none; }
.sa-hours-row.is-closed .sa-hours-closed-label{ display:inline; }
.sa-set-row{ display:flex; align-items:center; }
@media (max-width:575.98px){
  .sa-hours-row{ flex-wrap:wrap; row-gap:.45rem; padding-bottom:.7rem; border-bottom:1px solid #f1f3f6; }
  .sa-hours-day{ flex:1 1 auto; width:auto; font-size:.95rem; }
  .sa-hours-times{ flex:1 1 100%; }
  .sa-hours-times .form-control{ flex:1; max-width:none; }
  .sa-hours-closed-label{ flex:1 1 100%; }
}

/* Wizard caller questions */
.sa-q-fixed{ border:1px solid #e7eaf0; border-radius:12px; background:#fbfbfd; padding:1rem 1.1rem; margin-bottom:1.1rem; }
.sa-q-fixed-head{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#8b93a3; margin-bottom:.6rem; }
.sa-q-fixed-row{ display:flex; align-items:center; gap:.6rem; padding:.3rem 0; font-weight:600; color:var(--sa-ink); }
.sa-q-fixed-row em{ color:var(--sa-primary); font-size:.85rem; }
.sa-q-emailrow{ display:flex; align-items:center; gap:.85rem; padding:.85rem 1.1rem; border:1px solid #e7eaf0; border-radius:12px; margin-bottom:1.5rem; }
.sa-q-emailrow-title{ font-weight:600; color:var(--sa-ink); }
.sa-q-emailrow-sub{ font-size:.84rem; color:#8b93a3; }
.sa-q-customhead{ font-weight:600; color:var(--sa-ink); margin-bottom:.6rem; }


.sa-q-list{ display:flex; flex-direction:column; gap:.6rem; margin-bottom:1rem; }
.sa-q-row{ display:flex; align-items:center; gap:.75rem; }
.sa-q-row .sa-q-text{ flex:1; }
.sa-q-row.is-off .sa-q-text{ opacity:.45; }
.sa-q-del{ width:30px; height:30px; flex:0 0 30px; border-radius:50%; border:none; background:#f4f1f6; color:var(--sa-primary); cursor:pointer; }
.sa-q-del:hover{ background:var(--sa-magenta); color:#fff; }
.sa-q-required{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:#8b93a3; background:#eef0f4; padding:.2rem .55rem; border-radius:10px; white-space:nowrap; }
.sa-q-tag{ font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:.18rem .5rem; border-radius:10px; white-space:nowrap; }
.sa-q-tag.is-required{ color:var(--sa-primary); background:rgba(61,31,72,.09); }
.sa-q-tag.is-optional{ color:#8b93a3; background:#eef0f4; }
.sa-q-indicator{ margin-top:1rem; font-size:.9rem; color:#1ec98b; font-weight:600; }
.sa-q-indicator.is-note{ color:var(--sa-primary); }
.sa-q-indicator.is-warn{ color:#e5484d; }

/* Wizard live website crawl (chat-style feed) */
.sa-kx{ border:1px solid #e7eaf0; border-radius:14px; background:#fbfbfd; padding:.85rem 1.1rem; max-height:300px; overflow:auto; margin-bottom:1rem; }
.sa-kx-msg{ display:flex; gap:.6rem; align-items:flex-start; padding:.4rem 0; font-size:.95rem; color:var(--sa-ink); line-height:1.4; }
.sa-kx-msg em{ width:18px; height:18px; flex:0 0 18px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; margin-top:.12rem; font-size:.62rem; }
.sa-kx-msg.done em{ background:rgba(30,201,139,.16); color:#1ec98b; }
.sa-kx-msg.skip{ color:#8b93a3; }
.sa-kx-msg.skip em{ background:#eef0f4; color:#9aa1ad; }
.sa-kx-spin{ border:2px solid #eef0f4; border-top-color:var(--sa-primary); animation:saSpin .8s linear infinite; }
.sa-kx-more-head{ font-weight:600; color:var(--sa-ink); margin:.25rem 0 .6rem; }
.sa-kx-pick{ display:flex; gap:.6rem; align-items:center; padding:.5rem .25rem; border-bottom:1px solid #f1f3f6; cursor:pointer; font-size:.92rem; }
.sa-kx-pick:last-of-type{ border-bottom:none; }
.sa-kx-pick input{ width:18px; height:18px; accent-color:var(--sa-primary); flex:0 0 18px; }

/* Wizard greeting presets (pick-then-edit) */
.sa-greet-options{ display:flex; flex-direction:column; gap:.6rem; }
.sa-greet-option{ display:flex; gap:.7rem; align-items:flex-start; text-align:left; padding:.85rem 1rem; border:1.5px solid #e7eaf0; border-radius:12px; background:#fff; cursor:pointer; font-size:.95rem; line-height:1.45; color:var(--sa-ink); width:100%; }
.sa-greet-option em{ color:var(--sa-cyan); margin-top:.2rem; flex:0 0 auto; }
.sa-greet-option:hover{ border-color:#cfd4dd; }
.sa-greet-option.active{ border-color:var(--sa-primary); background:rgba(61,31,72,.03); }
.sa-greet-option.active em{ color:var(--sa-magenta); }

/* Add-knowledge: choose method, then show only the matching input */
.sa-addk-tabs{ display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin-bottom:1.35rem; }
.sa-addk-tab{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; padding:.85rem 1rem; border:1.5px solid #e7eaf0; border-radius:12px; background:#fff; cursor:pointer; transition:border-color .15s, background .15s; }
.sa-addk-tab em{ font-size:1.1rem; color:#9aa1ad; margin-bottom:.35rem; transition:color .15s; }
.sa-addk-tab-t{ font-weight:700; color:var(--sa-ink); font-size:.95rem; line-height:1.2; }
.sa-addk-tab-s{ font-size:.8rem; color:#8b93a3; margin-top:.1rem; }
.sa-addk-tab:hover{ border-color:#cfd4dd; }
.sa-addk-tab.is-active{ border-color:var(--sa-primary); background:rgba(61,31,72,.03); }
.sa-addk-tab.is-active em{ color:var(--sa-magenta); }
.sa-addk-panel{ display:none; }
.sa-addk-panel.is-active{ display:block; }
.sa-addk-drop{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem; width:100%; padding:2rem 1rem; border:2px dashed #d6dae2; border-radius:12px; cursor:pointer; transition:border-color .15s, background .15s; margin:0; }
.sa-addk-drop:hover{ border-color:var(--sa-primary); background:rgba(61,31,72,.02); }
.sa-addk-drop em{ font-size:1.7rem; color:var(--sa-primary); }
.sa-addk-drop-t{ font-weight:600; color:var(--sa-ink); }
.sa-addk-drop-s{ font-size:.8rem; color:#8b93a3; }
@media (max-width:600px){ .sa-addk-tabs{ grid-template-columns:1fr; } }

/* Settings: divert contact-card link, flash banners, custom-question remove */
.sa-vcard-link{ display:inline-block; margin:.1rem 0 1rem; font-size:.85rem; font-weight:600; color:var(--sa-primary); text-decoration:none; }
.sa-vcard-link:hover{ text-decoration:underline; }
.sa-flash{ border-radius:12px; font-size:.9rem; padding:.7rem 1rem; margin-bottom:1.25rem; }
.sa-q-remove{ flex:0 0 auto; color:#b23; }

/* Wizard: divider between sections on the review step */
.sa-wiz-rule{ border:0; border-top:1px solid #e7eaf0; margin:1.6rem 0 1.2rem; }

/* Wizard billing step: the "invoiced as" name chip */
.sa-bill-name{ display:flex; flex-direction:column; gap:.15rem; background:#f7f5f9; border:1px solid #e7eaf0; border-radius:12px; padding:.7rem 1rem; margin-bottom:1.25rem; }
.sa-bill-name span{ font-size:.75rem; color:#8b93a3; text-transform:uppercase; letter-spacing:.03em; }
.sa-bill-name strong{ font-size:1rem; color:var(--sa-ink); }

/* Greeting picker: tone categories + example messages (wizard + settings) */
.sa-greet-cats{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:.85rem; }
.sa-greet-cat{ display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .85rem; border:1.5px solid #e7eaf0; border-radius:999px; background:#fff; cursor:pointer; font-size:.85rem; font-weight:600; color:var(--sa-ink); }
.sa-greet-cat em{ color:#8b93a3; font-size:.85rem; }
.sa-greet-cat:hover{ border-color:#cfd4dd; }
.sa-greet-cat.active{ border-color:var(--sa-primary); background:var(--sa-primary); color:#fff; }
.sa-greet-cat.active em{ color:#fff; }
.sa-greet-grp{ display:flex; flex-direction:column; gap:.6rem; }
.sa-greet-blurb{ font-size:.82rem; color:#8b93a3; margin-bottom:.1rem; }
/* Settings: the "Browse example greetings" toggle */
.sa-greet-browse{ display:inline-flex; align-items:center; gap:.45rem; margin-top:.7rem; padding:0; border:0; background:none; cursor:pointer; font-size:.88rem; font-weight:600; color:var(--sa-primary); }
.sa-greet-browse:hover{ text-decoration:underline; }
.sa-greet-browse.active{ color:var(--sa-magenta); }
.sa-greet-panel{ margin-top:.9rem; padding:1rem; border:1px solid #e7eaf0; border-radius:12px; background:#faf9fb; }

/* Wizard final step: number reveal */
.sa-num-reveal{ text-align:center; padding:1rem 0; }
.sa-num-reveal-ic{ font-size:2.6rem; color:#2bb673; margin-bottom:.5rem; }
.sa-num-reveal-number{ font-size:2.1rem; font-weight:800; letter-spacing:.02em; color:var(--sa-primary); margin:1rem 0 1.1rem; }

/* Wizard final step: divert setup block under the number reveal */
.sa-num-divert{ margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid #e7eaf0; }
.sa-num-divert-h{ font-size:1rem; font-weight:700; color:var(--sa-ink); margin-bottom:.4rem; }

/* Train-your-AI: inline add-knowledge status messages */
.sa-addk-msg{ font-size:.85rem; color:#6b7280; }
.sa-addk-msg.is-error{ color:#b23; }

/* Empty states (dashboard / leads with no data yet) */
.sa-empty{ text-align:center; padding:2.4rem 1rem; }
.sa-empty-ic{ font-size:2rem; color:#cfd4dd; margin-bottom:.6rem; }
.sa-empty-t{ font-weight:700; color:var(--sa-ink); margin-bottom:.25rem; }
.sa-empty-s{ font-size:.9rem; color:#8b93a3; max-width:380px; margin:0 auto; }

/* Train-your-AI: view extracted text used on calls */
.sa-ks-item{ border-bottom:1px solid #f1f3f6; }
.sa-ks-item:last-child{ border-bottom:0; }
.sa-ks-item .sa-ks-row{ border-bottom:0; }
.sa-ks-view{ flex:0 0 auto; background:none; border:0; cursor:pointer; color:#8b93a3; padding:.3rem .45rem; }
.sa-ks-view:hover, .sa-ks-view.active{ color:var(--sa-primary); }
.sa-ks-text{ background:#faf9fb; border:1px solid #eee7f1; border-radius:10px; padding:.85rem 1rem; margin:0 0 .85rem 3.1rem; font-size:.88rem; line-height:1.55; color:#4a4f5e; }
.sa-ks-text-lbl{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#9aa1ad; margin-bottom:.35rem; }

/* ============ MOBILE POLISH ============ */
/* Settings sub-nav: a horizontal, scrollable pill bar instead of a tall list */
@media (max-width:991.98px){
  .sa-subnav{ flex-direction:row; flex-wrap:nowrap; overflow-x:auto; gap:.4rem; position:static; top:auto;
    padding-bottom:.4rem; margin-bottom:.75rem; -webkit-overflow-scrolling:touch; }
  .sa-subnav::-webkit-scrollbar{ height:0; }
  .sa-subnav a{ flex:0 0 auto; white-space:nowrap; padding:.5rem .85rem; font-size:.85rem; border:1px solid #eceaf1; }
  .sa-subnav a em{ display:none; }
}
/* Lead rows (dashboard + calls list): declutter on small screens */
@media (max-width:575.98px){
  .sa-lead-row{ gap:.6rem; align-items:flex-start; }
  .sa-lead-av{ width:34px; height:34px; flex:0 0 34px; font-size:.7rem; margin-top:.1rem; }
  .sa-lead-name{ font-size:.95rem; }
  .sa-lead-job{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .sa-lead-time{ font-size:.7rem; }
  .sa-badge{ font-size:.56rem; padding:.16rem .38rem; }
  .sa-lead-row .sa-callback{ display:none; } /* call back from the detail page */
  /* Lead detail header: stack the action button full width */
  .sa-detail-av{ width:46px; height:46px; flex:0 0 46px; font-size:.95rem; }
  .sa-detail-name{ font-size:1.15rem; }
  .sa-detail-actions{ margin-left:0; width:100%; }
  .sa-detail-actions .btn{ flex:1 1 auto; justify-content:center; }
}

/* Mobile: the sidebar is a slide-out overlay, so don't pin the trial widget to the
   viewport bottom (it ends up behind the phone's nav bar / browser chrome). Let it flow
   right under the menu with clearance at the bottom. */
@media (max-width:1199.98px){
  .nk-sidebar-content{ min-height:0; padding-bottom:2.5rem; }
  .nk-sidebar-content .sa-trial{ margin-top:1.25rem; margin-bottom:2rem; }
}

/* Lead detail layout: summary top-left, transcript under it (left), side panel spanning
   the right on desktop; stacked summary -> side -> transcript on mobile. */
.sa-detail-grid{ display:grid; grid-template-columns:2fr 1fr; gap:1rem; align-items:start;
  grid-template-areas:"summary side" "transcript side"; }
.sa-detail-summary{ grid-area:summary; }
.sa-detail-side{ grid-area:side; }
.sa-detail-transcript{ grid-area:transcript; }
@media (max-width:991.98px){
  .sa-detail-grid{ grid-template-columns:1fr; grid-template-areas:"summary" "side" "transcript"; }
}

/* Conditional question groups (wizard + settings). A group is a bordered card holding a
   plain-English condition and its own follow-up questions, asked only when relevant. */
.sa-q-condhead{ margin-top:1.75rem; }
.sa-q-hint{ font-weight:400; color:var(--sa-muted,#8094ae); font-size:.78rem; margin-left:.4rem; }
.sa-q-condintro{ margin-bottom:1rem; }
.sa-q-group{ border:1px solid var(--sa-border,#e5e9f2); border-radius:.6rem; padding:.85rem .85rem .65rem; margin-bottom:.85rem; background:var(--sa-soft,#fbfcfe); }
.sa-q-group-label{ display:block; font-size:.78rem; font-weight:600; color:var(--sa-muted,#8094ae); margin-bottom:.3rem; }
.sa-q-group-condrow{ display:flex; gap:.5rem; align-items:center; }
.sa-q-group-condrow .form-control{ flex:1 1 auto; min-width:0; }
.sa-q-group-qs{ margin-top:.7rem; display:flex; flex-direction:column; gap:.5rem; padding-left:.9rem; border-left:2px solid var(--sa-border,#e5e9f2); }
.sa-q-group-qs:empty{ display:none; }
.sa-q-group-addq{ margin-top:.65rem; }
.sa-q-group-del,.sa-q-group-qdel{ flex:0 0 auto; }
@media (max-width:575.98px){
  .sa-q-group-qs{ padding-left:.6rem; }
  .sa-q-group-condrow .form-control{ max-width:none !important; }
  .sa-q-group-qs .form-control{ max-width:none !important; }
}

/* Call recording player (waveform) */
.sa-rec{ display:flex; align-items:center; gap:.75rem; }
.sa-rec-play{ flex:0 0 auto; width:44px; height:44px; border-radius:50%; border:none; background:var(--sa-primary,#3D1F48); color:#fff; font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s; }
.sa-rec-play:hover{ background:var(--sa-primary-d,#2b1434); }
.sa-rec-play em{ margin-left:1px; }
.sa-rec-wave{ flex:1 1 auto; min-width:0; height:44px; }
.sa-rec-time{ flex:0 0 auto; font-size:.78rem; color:var(--sa-muted,#8094ae); font-variant-numeric:tabular-nums; white-space:nowrap; }
.sa-rec-sep{ margin:0 .15rem; opacity:.6; }
.sa-rec-fallback{ width:100%; }
.sa-rec-fail .sa-rec-play,.sa-rec-fail .sa-rec-wave,.sa-rec-fail .sa-rec-time{ display:none; }
@media (max-width:575.98px){
  .sa-rec{ flex-wrap:wrap; }
  .sa-rec-wave{ order:3; flex-basis:100%; height:40px; }
}

/* Usage page: billed vs accruing breakdown */
.sa-bill-split{ display:flex; flex-direction:column; gap:.55rem; margin-top:.25rem; }
.sa-bill-line{ display:flex; justify-content:space-between; align-items:center; gap:1rem; font-size:.9rem; }
.sa-bill-line > span:last-child{ text-align:right; white-space:nowrap; }
@media (max-width:575.98px){
  .sa-bill-line{ flex-direction:column; align-items:flex-start; gap:.1rem; }
  .sa-bill-line > span:last-child{ text-align:left; }
}

/* Plan-select (change plan) states */
.sa-plan-card.is-current{ border:2px solid #12a673; }
.sa-plan-flash{ max-width:560px; margin:0 auto 26px; padding:12px 16px; border-radius:10px; font-size:14px; text-align:center; }
.sa-plan-flash.is-ok{ background:#e6f7f0; color:#0c7a52; }
.sa-plan-flash.is-error{ background:#fde7ea; color:#b0182c; }
.sa-plan-flash.is-info{ background:#eef0f4; color:#444b5a; }

/* Billing: scheduled plan change notice */
.sa-pending-plan{ display:inline-block; background:#eef0f4; color:#444b5a; font-size:.82rem; padding:6px 12px; border-radius:8px; }
.sa-pending-plan em{ margin-right:5px; color:var(--sa-primary,#3D1F48); }

/* Plan change: review / confirm step */
.sa-review{ max-width:480px; margin:0 auto; background:#fff; border:1px solid #e7eaf0; border-radius:16px; padding:28px; box-shadow:0 12px 40px rgba(61,31,72,.08); }
.sa-review-head{ font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:#8b93a3; font-weight:700; margin-bottom:10px; }
.sa-review-plan{ font-size:22px; font-weight:700; color:var(--sa-primary,#3D1F48); margin-bottom:20px; }
.sa-review-plan span{ font-size:15px; font-weight:600; color:#6b7280; }
.sa-review-rows{ border-top:1px solid #edf0f5; padding-top:16px; }
.sa-review-row{ display:flex; justify-content:space-between; align-items:center; font-size:15px; margin-bottom:6px; }
.sa-review-row strong{ color:var(--sa-primary,#3D1F48); }
.sa-review-note{ font-size:13px; color:#8b93a3; line-height:1.5; margin-bottom:14px; }
.sa-review-actions{ display:flex; gap:10px; margin-top:22px; }
.sa-review-actions .btn{ flex:1; }
@media (max-width:480px){ .sa-review-actions{ flex-direction:column; } }

/* Cancel / retention page */
.sa-cancel-wrap{ max-width:600px; }
.sa-cancel-offer{ border:2px solid #12a673; background:rgba(18,166,115,.05); }
.sa-cancel-offer .sa-card-body{ padding:1.6rem; }
.sa-cancel-offer-badge{ width:46px; height:46px; border-radius:50%; background:#12a673; color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.2rem; margin-bottom:12px; }
.sa-cancel-offer h5{ font-size:1.25rem; margin-bottom:8px; }
.sa-cancel-offer h5 span{ color:#12a673; }
.sa-cancel-reasons-label{ font-weight:600; font-size:.9rem; margin-bottom:8px; }
.sa-cancel-reason{ display:flex; align-items:center; gap:.6rem; padding:.45rem 0; cursor:pointer; font-size:.95rem; }
.sa-cancel-reason input{ width:18px; height:18px; flex:0 0 auto; }

/* Referrals page */
.sa-ref-link{ display:flex; gap:.6rem; margin-bottom:1.2rem; }
.sa-ref-link .form-control{ font-family:monospace; font-size:.9rem; }
.sa-ref-link .btn{ flex:0 0 auto; white-space:nowrap; }
.sa-ref-steps{ margin:0 0 1rem; padding-left:1.1rem; color:#444b5a; font-size:.95rem; line-height:1.9; }
@media (max-width:575.98px){ .sa-ref-link{ flex-direction:column; } }

/* Admin panel */
.sa-admin-badge{ display:inline-block; background:#3D1F48; color:#fff; font-size:10px; font-weight:700; letter-spacing:.6px; padding:3px 9px; border-radius:5px; margin:0 0 14px 22px; }
.sa-impersonate-banner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem; background:#3D1F48; color:#fff; padding:9px 16px; border-radius:10px; font-size:13px; margin-bottom:18px; }
.sa-impersonate-banner a{ color:#fff; font-weight:700; text-decoration:underline; white-space:nowrap; }

/* Leads: read/unread state + remove control */
.sa-lead-row.is-unread::before{ content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--sa-magenta); }
.sa-lead-row:not(.is-unread) .sa-lead-name{ color:#6b7280; font-weight:600; }
.sa-lead-row:not(.is-unread){ opacity:.82; }
.sa-lead-new{ display:inline-block; background:var(--sa-magenta); color:#fff; font-size:10px; font-weight:700; letter-spacing:.3px; padding:2px 7px; border-radius:999px; line-height:1.4; }
.sa-lead-del{ flex:0 0 auto; border:none; background:transparent; color:#cfd4dd; font-size:1rem; width:30px; height:30px; border-radius:8px; cursor:pointer; }
.sa-lead-del:hover{ background:#fde7ea; color:#b0182c; }