/* ===== polish-2: one calm design layer for the whole app (loaded after app.css) =====
   Spacing scale 4 8 12 16 20 24 32 40 48, type scale 12 13 14 15 17 20 24 28, one radius per size,
   hairline borders, almost no shadow. Look only: no behaviour lives here. */
:root{
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;--s-8:32px;--s-10:40px;--s-12:48px;
  --t-xs:12px;--t-sm:13px;--t-base:14px;--t-md:15px;--t-lg:17px;--t-xl:20px;--t-2xl:24px;--t-3xl:28px;
  --line:#ECE8E1;--line-2:#DDD7CC;--paper:#FAF9F6;--sunken:#F4F2EE;
  --sh-1:0 1px 2px rgba(20,26,36,.04);
  --sh-2:0 1px 2px rgba(20,26,36,.04),0 8px 24px -12px rgba(20,26,36,.12);
  --sh-3:0 24px 48px -16px rgba(20,26,36,.22),0 4px 12px -4px rgba(20,26,36,.08);
}
body{font-size:var(--t-md);letter-spacing:-.003em}
h1,h2,h3,h4{letter-spacing:-.02em;font-weight:700}

/* ---------- Buttons, inputs, badges: one size system ---------- */
.btn{height:40px;padding:0 16px;border-radius:10px;font-size:var(--t-base);font-weight:600;gap:7px;transition:background .15s,border-color .15s,box-shadow .15s,color .15s}
.btn .i{width:17px;height:17px}
.btn-sm{height:34px;padding:0 12px;font-size:var(--t-sm);border-radius:9px}
.btn-sm .i{width:15px;height:15px}
.btn-lg{height:48px;padding:0 22px;font-size:var(--t-md);border-radius:12px}
.btn-primary{background:var(--brand-700);box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 1px 2px rgba(6,42,32,.24)}
.btn-primary:hover{background:var(--brand-800)}
.btn-secondary{border-color:var(--line-2);box-shadow:0 1px 1px rgba(20,26,36,.03)}
.btn-secondary:hover{background:#FBFAF8;border-color:#CFC8BB}
.btn-ghost{color:var(--ink-2)}
.btn-danger{background:var(--surface);color:var(--err);border:1px solid #F0CFCF}
.btn-danger:hover{background:var(--err-bg)}
.input,select.input{height:42px;border-radius:10px;border-color:var(--line-2);font-size:var(--t-md);padding:0 13px;transition:border-color .15s,box-shadow .15s}
.input:hover{border-color:#CFC8BB}
textarea.input{padding:11px 13px}
.field{margin-bottom:var(--s-4)}
.field label{font-size:var(--t-sm);font-weight:600;color:var(--ink-2);margin-bottom:6px}
.badge{height:22px;padding:0 8px;font-size:var(--t-xs);font-weight:600;gap:4px}
.badge .i{width:12px;height:12px}
.badge-ai{background:var(--sunken);color:var(--ink-2)}
.badge-lead{border-color:transparent;background:var(--brand-50)}
.badge-team{border-color:transparent}
.badge-hot{border-color:transparent}
.badge-neutral{border-color:transparent}
.lockb{font-size:10.5px;font-weight:650;border-color:transparent;padding:2px 7px 2px 6px}
.iconbtn{width:34px;height:34px;border-radius:9px;border-color:var(--line);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.iconbtn:hover{background:var(--sunken);color:var(--ink)}
.linkbtn{font-weight:600}

/* ---------- Sidebar (desktop) ---------- */
.side{background:#F6F4EF;padding:20px 12px 16px;border-right-color:var(--line)}
.side .logo{padding:0 10px 20px;font-size:19px}
.side .logo svg{width:26px;height:26px}
.biz{background:transparent;border:1px solid var(--line);box-shadow:none;padding:8px 10px;border-radius:10px;margin-bottom:var(--s-4)}
.biz .bav{width:28px;height:28px;border-radius:7px;font-size:11.5px;background:var(--brand-800)}
.biz b{font-size:var(--t-sm);font-weight:650}
.biz small{font-size:var(--t-xs)}
.side nav{gap:1px}
.side .sec{font-size:11px;font-weight:650;letter-spacing:.06em;padding:var(--s-5) 10px 6px}
.nv{height:36px;padding:0 10px;gap:10px;border-radius:8px;font-size:var(--t-base);font-weight:500;color:var(--ink-2);transition:background .12s,color .12s}
.nv .i{width:17px;height:17px;color:#8A919E}
.nv:hover{background:rgba(20,26,36,.045);color:var(--ink)}
.nv.on{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(20,26,36,.06);border:1px solid var(--line)}
.nv.on .i{color:var(--brand-700)}
.nv .cnt{height:19px;min-width:20px;font-size:11px}
.plan-card{border-radius:12px;padding:12px 12px 10px;box-shadow:none;background:transparent}
.plan-card b{font-size:var(--t-sm)}
.plan-card b span{border-color:transparent;font-weight:650}
.plan-card p{font-size:var(--t-xs);margin:4px 0 6px}
.side-foot{padding-top:6px}
.help-nv{margin-top:var(--s-2)}

/* ---------- Inbox ---------- */
.list-head{padding:var(--s-5) var(--s-4) var(--s-3)}
.list-head h1{font-size:var(--t-xl);letter-spacing:-.025em}
.search{height:38px;margin-top:var(--s-3);border-radius:10px;background:var(--sunken);border:1px solid transparent;transition:background .15s,border-color .15s}
.search:focus-within{border-color:var(--brand-500);background:var(--surface)}
.tabs{gap:2px;padding:0 var(--s-3) var(--s-3);border-bottom-color:var(--line)}
.tab{height:30px;padding:0 10px;border-radius:8px;font-size:var(--t-sm);font-weight:600;color:var(--muted);transition:background .12s,color .12s}
.tab.on{background:var(--ink);color:#fff}
.tab small{font-weight:600;opacity:.7}
.cv{padding:var(--s-3) var(--s-4);gap:var(--s-3);border-bottom-color:#F2EFEA;transition:background .12s}
.cv .av{width:38px;height:38px;font-size:13px}
.cv .top b{font-size:var(--t-base);font-weight:650}
.cv .top time{font-size:var(--t-xs)}
.cv p{font-size:var(--t-sm);margin:2px 0 6px}
.cv .tags{gap:4px}
.cv .tags .badge{height:20px;font-size:11.5px;padding:0 7px}
.cv.on{background:var(--brand-50)}
.unread-dot{width:8px;height:8px;top:20px;right:16px}
.setup-card{margin:var(--s-3) var(--s-3) var(--s-1);padding:var(--s-3) var(--s-3) 10px;border-radius:12px;border-color:var(--line);box-shadow:none;background:var(--surface)}
.setup-top b{font-size:var(--t-base)}
.setup-top small{font-size:var(--t-xs)}
.setup-bar{height:4px;margin:var(--s-2) 0 6px}
.setup-list button{padding:6px;font-size:var(--t-sm);font-weight:500}
.setup-list .sc{width:18px;height:18px}
.setup-guide{font-size:var(--t-xs);margin:4px 6px 0}
.usage-note{margin:var(--s-3) var(--s-3) var(--s-1);border-radius:12px;font-size:var(--t-sm)}
.warn-strip{font-size:var(--t-sm)}
.list-empty{padding:var(--s-10) var(--s-6);font-size:var(--t-base)}

/* Conversation */
.chat{background:var(--paper)}
.chat-head{height:64px;padding:0 var(--s-6);gap:var(--s-3);border-bottom-color:var(--line)}
.chat-head .av{width:36px;height:36px;font-size:13px}
.chat-head .who b{font-size:var(--t-md);font-weight:650}
.chat-head .who small{font-size:var(--t-xs)}
.seg{padding:2px;border-radius:10px}
.seg span{height:30px;font-size:var(--t-sm);border-radius:8px;padding:0 12px}
.thread{padding:var(--s-6) var(--s-8) var(--s-3)}
.m .b{font-size:var(--t-base);padding:9px 13px;border-radius:14px}
.m .meta{font-size:11.5px}
.composer{margin:var(--s-2) var(--s-6) var(--s-5);border-width:1px;border-radius:14px;box-shadow:var(--sh-2)}
.composer textarea{font-size:var(--t-base)}
.empty-chat b{font-size:var(--t-lg)}
.empty-chat .ill{width:56px;height:56px;border-radius:16px;border-color:transparent}
.details{padding:var(--s-5)}
.lead-card{border-radius:14px;padding:var(--s-4);background:var(--surface)}
.lead-card h2{font-size:var(--t-lg)}
.panel-sec h3{font-size:11px;font-weight:650;letter-spacing:.06em}

/* ---------- Content pages: one header, one card style ---------- */
.pg-in{max-width:920px;padding:var(--s-8) var(--s-10) var(--s-12)}
.pg-head{margin-bottom:var(--s-6);gap:var(--s-4);align-items:center}
.pg-head h1{font-size:var(--t-2xl);letter-spacing:-.028em;margin:0 0 4px;line-height:1.2}
.pg-head p{font-size:var(--t-base);max-width:560px;color:var(--muted)}
.cardx{border-radius:14px;box-shadow:none;padding:var(--s-6);margin-bottom:var(--s-4);border-color:var(--line)}
.cardx h2{font-size:var(--t-md);font-weight:650;letter-spacing:-.015em;gap:8px}
.cardx h2 .i{width:17px;height:17px}
.cardx>p.desc{font-size:var(--t-sm);margin:2px 0 var(--s-4);line-height:1.5}
.grid2{gap:var(--s-4)}
.lead-tabs{gap:2px;margin:0 0 var(--s-3);padding:0;border:0}
.lead-item{padding:var(--s-4) 2px;gap:var(--s-3);border-top-color:#F0EDE7}
.lead-item .av{width:38px;height:38px;font-size:13px}
.lead-name{font-size:var(--t-md);font-weight:650}
.lead-msg{font-size:var(--t-sm)}
.lead-actions{gap:6px;align-items:center}
.lead-actions .btn{height:34px;font-size:var(--t-sm);padding:0 12px;border-radius:9px}
.lead-actions .danger-btn{width:34px;padding:0;color:var(--muted);border-color:var(--line);background:var(--surface)}
.lead-actions .danger-btn:hover{color:var(--err);border-color:#F0CFCF;background:var(--err-bg)}
.lead-actions .danger-btn .i{width:16px;height:16px}
.lead-status{height:34px;border-radius:9px;font-size:var(--t-sm)}
.head-btns .btn{height:36px}
.bplan{border-radius:14px;box-shadow:none;padding:var(--s-5)}
.bplan.pop{border-width:1.5px;box-shadow:var(--sh-2)}
.bplan .price b{font-size:28px}
.bplan ul{gap:7px;font-size:var(--t-sm)}
.more-list{gap:6px}
.more-list button{height:52px;border-radius:12px;font-size:var(--t-md);font-weight:550;transition:background .12s}
.more-list button:hover{background:#FBFAF8}
.modal{background:rgba(20,26,36,.38)}
.modal-card{border-radius:16px}
.modal-card h3{font-size:var(--t-lg)}
.modal-card p{font-size:var(--t-base)}
.toast{border-radius:10px;font-size:var(--t-base)}
.stat{border-radius:14px;box-shadow:none}
.stat b{font-size:28px}

/* ---------- Sign in / sign up ---------- */
.auth-card{border-radius:16px;box-shadow:var(--sh-2);padding:var(--s-8) var(--s-8) var(--s-6)}
.auth-card h1{font-size:var(--t-3xl);letter-spacing:-.03em;margin-bottom:4px}
.auth-card .muted{font-size:var(--t-md);margin-bottom:var(--s-6)}
.auth-brand h2{font-size:36px;letter-spacing:-.032em}
.gbtn{border-radius:12px}
.legal-links{font-size:var(--t-xs)}

/* ---------- Phone ---------- */
@media (max-width:900px){
  .auth-main{padding:var(--s-8) var(--s-4) var(--s-6)}
  .auth-logo-m{margin-bottom:var(--s-6)}
  .auth-card{padding:var(--s-6) var(--s-5) var(--s-5);border-radius:16px;box-shadow:var(--sh-1)}
  .auth-card h1{font-size:var(--t-2xl)}
  .auth-card .muted{margin-bottom:var(--s-5)}
  .auth-perks{gap:10px;margin-top:var(--s-6)}
  .auth-perks li{font-size:var(--t-base);color:var(--muted)}
}
@media (max-width:760px){
  .btn{height:44px}
  .btn-sm{height:38px}
  .input,select.input{height:46px;font-size:16px}
  .app{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .list{min-height:calc(100vh - 64px)}
  .list-head{padding:var(--s-5) var(--s-4) var(--s-3)}
  .list-head h1{font-size:var(--t-2xl)}
  .tabs{padding:0 var(--s-4) var(--s-3)}
  .cv{padding:var(--s-3) var(--s-4)}
  .pg-in{padding:var(--s-5) var(--s-4) calc(var(--s-12) + 64px)}
  .pg-head{margin-bottom:var(--s-5)}
  .pg-head h1{font-size:var(--t-2xl)}
  .pg-head p{font-size:var(--t-base)}
  .cardx{padding:var(--s-5) var(--s-4);border-radius:14px}
  .tabbar{height:calc(64px + env(safe-area-inset-bottom));padding:6px 4px env(safe-area-inset-bottom);background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(12px);border-top-color:var(--line)}
  .tabbar a,.tabbar button{gap:3px;font-size:11px;font-weight:550;color:#8A919E;justify-content:center}
  .tabbar a .i,.tabbar button .i{width:22px;height:22px}
  .tabbar a.on,.tabbar button.on{color:var(--brand-700);font-weight:650}
  .chat-head{padding:var(--s-2) var(--s-3)}
  .composer{margin:6px var(--s-2) var(--s-3);box-shadow:var(--sh-1)}
  .lead-actions .danger-btn{width:44px}
  .lead-actions .btn,.lead-status{height:40px}
  .more-list button{height:54px}
}

/* Leads on a phone: Call and Open chat first, status and a small delete under them */
@media (max-width:760px){
  .lead-item .lead-actions{grid-template-columns:1fr 1fr 44px;gap:8px}
  .lead-item .lead-actions:has(.call-btn){grid-template-columns:1fr 1fr 44px}
  .lead-item .lead-actions:has(.call-btn) .call-btn{grid-column:1;order:-3}
  .lead-item .lead-actions:has(.call-btn) .secondary-btn{grid-column:2 / 4;order:-2}
  .lead-item .lead-actions:has(.call-btn) .lead-status{grid-column:1 / 3;order:-1}
  .lead-item .lead-actions:has(.call-btn) .danger-btn{grid-column:3}
  .lead-item .lead-actions .btn,.lead-item .lead-status{height:40px}
  .lead-item .lead-actions .danger-btn{width:44px;padding:0}
  #leadsPage .cardx{padding:4px 16px!important}
  .head-btns{width:100%;gap:6px}
  .head-btns .btn{height:32px;font-size:12.5px;padding:0 10px;gap:5px}
  .head-btns .btn .i{width:14px;height:14px}
  .lead-tabs .tab{padding:0 9px}
  .head-btns .lockb{font-size:0;gap:0;padding:3px 4px}
  .head-btns .lockb .i{width:11px;height:11px}
}

/* display font needs a touch of word space */
.setup-top b,.empty-chat b,.lead-card h2,.up-card h3,.modal-card h3,.bplan h3,.uq-q,.list-head h1,.pg-head h1{word-spacing:.05em}
/* nothing to reply to yet: no empty reply box */
.composer.idle{display:none}

/* Plans page: an open Upgrade button looks like a real button (only "Your plan" and closed plans look muted) */
.bplan:not(.current) .plan-btn:not(:disabled){background:var(--surface);color:var(--ink);border-color:var(--line-2);box-shadow:0 1px 1px rgba(20,26,36,.03);cursor:pointer}
.bplan:not(.current) .plan-btn:not(:disabled):hover{background:#FBFAF8}
.bplan.pop:not(.current) .plan-btn:not(:disabled){background:var(--brand-700);color:#fff;border-color:var(--brand-700)}
.bplan.pop:not(.current) .plan-btn:not(:disabled):hover{background:var(--brand-800)}
.bplan.current .plan-btn{background:var(--brand-50);color:var(--brand-800);border-color:var(--brand-200);box-shadow:none}
.bplan.current{background:var(--surface);border-color:var(--brand-300)}
.bplan .for{min-height:0;margin-bottom:var(--s-3)}

/* inbox rows: "AI answering" is the normal state, so it is quiet text, not a pill; Lead and "Needs you" keep their color */
.cv .tags .badge-ai{background:none;border:0;padding:0 2px;color:var(--faint);font-weight:500}

/* booking-1: Booking in the chat (Settings card) */
.bk-body.off{opacity:.55}
.bk-chips{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 10px}
.bk-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 6px 6px 12px;border-radius:999px;background:var(--brand-50,#EEF8F3);color:var(--brand-800,#0C4A38);font-size:13.5px;font-weight:600;border:1px solid var(--brand-100,#CFE8DC)}
.bk-chip button{appearance:none;border:0;background:transparent;color:inherit;width:26px;height:26px;border-radius:50%;cursor:pointer;font-size:17px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.bk-chip button:hover,.bk-chip button:focus-visible{background:rgba(15,93,70,.12)}
.bk-add{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}
.bk-add .input{flex:1 1 180px;min-width:0}
.bk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 14px}
@media (max-width:720px){.bk-grid{grid-template-columns:1fr}}
/* booking-1: booking badge on a lead */
.bk-lead{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px;padding:6px 10px;border-radius:10px;background:#EEF8F3;color:#0C4A38;font-size:13px;font-weight:600}
.bk-lead .st{font-weight:700;padding:2px 8px;border-radius:999px;background:#fff;font-size:12px}
.bk-lead .st.requested{color:#9A5B07}.bk-lead .st.suggested{color:#3B3F9E}.bk-lead .st.accepted{color:#0C6B47}
.bk-lead a{color:#0F5D46;font-weight:700}

/* calendar-sync: Connect your calendar (inside Booking in the chat) */
.cal-box{margin-top:18px;padding:16px;border:1px solid var(--line,#EAECF0);border-radius:14px;background:var(--surface,#FCFCFD)}
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap}
.cal-head h3{margin:0;font-size:16px;line-height:1.3;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cal-opt{font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#667085;background:#F2F4F7;border-radius:999px;padding:3px 8px}
.cal-tag{display:inline-flex;align-items:center;font-size:12.5px;font-weight:700;color:#0C4A38;background:#E7F6EE;border:1px solid #CFE8DC;border-radius:999px;padding:4px 10px}
.cal-box .desc{margin:10px 0 0}
.cal-line{display:flex;align-items:center;gap:8px;margin:12px 0 0;font-weight:700;font-size:15px}
.cal-line .i{width:18px;height:18px;flex:0 0 auto}
.cal-line.ok{color:#0C6B47}.cal-line.warn{color:#9A5B07}
.cal-note{margin:12px 0 0;font-size:13.5px;line-height:1.5;color:#344054;background:#fff;border:1px solid var(--line,#EAECF0);border-radius:10px;padding:10px 12px}
.cal-note.extra{background:#FFF8EB;border-color:#F5D9A8;color:#6B4206}
.cal-guide{margin:12px 0 0}
.cal-how{margin-top:10px;font-size:13.5px;line-height:1.5}
.cal-how ol{margin:4px 0 0;padding-left:20px;display:grid;gap:4px}
#calUrl{font-size:16px}