@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans',system-ui,-apple-system,sans-serif;font-size:14px;color:#18233a;background:#f7f9fc;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100vh}button,input,select,textarea{font:inherit}button{cursor:pointer}a{color:#345dd8;text-decoration:none}.shell{min-height:100vh;display:flex}.sidebar{width:252px;background:#0d1629;color:#d6dff2;position:fixed;top:0;bottom:0;left:0;display:flex;flex-direction:column;padding:26px 15px 19px;z-index:10}.brand{display:flex;align-items:center;gap:11px;margin:0 9px 34px}.brand-icon{background:#627cf5;color:#fff;border-radius:12px;display:grid;place-items:center;width:37px;height:37px;font-size:25px}.brand strong{font:800 18px 'Manrope',sans-serif;letter-spacing:-.8px;color:white}.brand small{display:block;color:#7887a4;font-size:10px;letter-spacing:.3px}.workspace{border:1px solid #283752;background:#16233a;padding:11px 10px;display:flex;gap:10px;align-items:center;border-radius:12px;margin-bottom:30px}.workspace-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:#354b7b;color:white;font-weight:800}.workspace strong{font-size:12px;color:white;display:block}.workspace small{color:#94a3bd;font-size:10px}.workspace-chev{margin-left:auto;color:#8da0c3}.nav-title{color:#677996;font-size:10px;letter-spacing:1.2px;margin:0 14px 9px;font-weight:800}.nav-item{width:100%;border:0;background:transparent;color:#a4b1ca;display:flex;align-items:center;gap:14px;padding:12px 15px;border-radius:9px;text-align:left;margin:2px 0;font-weight:600}.nav-item span{font-size:18px;width:19px;text-align:center}.nav-item:hover,.nav-item.active{background:#233557;color:#fff}.nav-item.active{box-shadow:inset 3px 0 #8098ff}.nav-item i{margin-left:auto;font:600 11px 'DM Sans';border-radius:30px;background:#405278;padding:3px 7px}.side-bottom{margin-top:auto;padding:0 10px}.trial-pill{border:1px solid #334566;padding:10px 12px;border-radius:9px;font-size:11px;display:flex;gap:9px;align-items:center}.live-dot{width:7px;height:7px;border-radius:50%;background:#4ce1ab;box-shadow:0 0 10px #4ce1ab}.side-bottom p{color:#6b7b95;font-size:11px;line-height:1.6}.main-col{margin-left:252px;width:calc(100% - 252px);min-width:0}.topbar{height:70px;background:white;border-bottom:1px solid #e8edf4;display:flex;align-items:center;justify-content:space-between;padding:0 36px}.crumb{font-size:11px;letter-spacing:.65px;color:#8d98ae;font-weight:700}.crumb span{padding:0 12px;color:#b3bfd1}.crumb strong{color:#34415b;font-weight:800}.top-right{display:flex;align-items:center;gap:19px}.demo-chip{border:1px solid #d6e2ff;background:#eff4ff;color:#5575c6;padding:7px 10px;border-radius:20px;font-size:10px;font-weight:800;letter-spacing:.45px}.icon-btn{background:transparent;border:0;color:#697892;font-size:18px}.avatar{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:#dde5ff;color:#5269ad;font-size:10px;font-weight:800}.main-content{padding:37px 38px 50px;max-width:1440px;margin:0 auto}.eyebrow{font-size:10px;letter-spacing:1.5px;color:#7c89a3;font-weight:800;text-transform:uppercase}.pagehead{display:flex;justify-content:space-between;gap:18px;align-items:flex-end;margin-bottom:28px}.pagehead h1{font-family:'Manrope';font-size:27px;letter-spacing:-1px;line-height:1.2;margin:5px 0 8px;font-weight:800}.muted{color:#8793aa}.pagehead p{font-size:13px;color:#8390a7;margin:0}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid #e1e7f0;background:white;color:#33415c;padding:11px 14px;border-radius:9px;font-weight:700;font-size:12px;white-space:nowrap}.btn-primary{background:#4567ed;color:white;border-color:#4567ed;box-shadow:0 5px 13px #4567ed20}.btn:hover{filter:brightness(.975)}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.card{background:white;border:1px solid #e6ebf3;border-radius:14px;box-shadow:0 4px 18px #12234205}.metric{padding:20px 21px;min-height:139px}.metric-top{display:flex;align-items:center;justify-content:space-between;color:#7b899f;font-size:12px;font-weight:700}.metric-icon{background:#edf2ff;color:#617ce4;padding:8px;border-radius:9px;display:grid;place-items:center;font-size:18px}.metric-number{font:800 32px 'Manrope';margin:10px 0 4px;letter-spacing:-1.5px}.metric-bottom{font-size:11px;color:#95a1b4}.up{color:#20a77e;font-weight:800}.down{color:#ef817b;font-weight:800}.two-col{display:grid;grid-template-columns:1.6fr 1fr;gap:18px;margin-top:19px}.card-h{padding:21px 23px 0;display:flex;align-items:center;justify-content:space-between;gap:14px}.card-h h2{font:800 14px 'Manrope';margin:0}.card-h p{font-size:11px;color:#94a0b2;margin:6px 0 0}.link-btn{border:0;background:none;color:#5674de;font-weight:800;font-size:11px}.activity-row{display:flex;align-items:center;gap:12px;padding:16px 23px;border-top:1px solid #f0f3f7}.activity-row:first-of-type{border-top:0}.circle{flex:none;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-size:18px;background:#eef2fc;color:#6375be}.activity-main{min-width:0;flex:1}.activity-main strong{font-size:12px;display:block}.activity-main small{font-size:11px;color:#94a0b2;display:block;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tag{border-radius:20px;font-size:10px;font-weight:800;padding:6px 9px;display:inline-flex;align-items:center;white-space:nowrap}.tag.urgent{background:#fff0ef;color:#e16e6a}.tag.new{background:#ecf1ff;color:#5a78ce}.tag.contacted{background:#eef9f2;color:#2b9a6c}.tag.booked{background:#eaf8f3;color:#249774}.tag.closed{background:#f0f2f5;color:#8190a2}.tag.missed{background:#fff3e8;color:#dc9755}.tag.answered{background:#eaf8f3;color:#269b7d}.mini-table{width:100%;border-collapse:collapse}.mini-table th{font-size:10px;text-align:left;letter-spacing:.8px;color:#8996ac;background:#f8fafd;padding:14px 18px}.mini-table td{padding:15px 18px;border-top:1px solid #f0f3f8;font-size:12px}.mini-table tbody tr:hover{background:#fcfdff}.table-wrap{overflow:auto}.analytics{padding:22px 24px 24px}.bars{display:flex;align-items:end;justify-content:space-between;height:148px;padding:15px 3px 0;border-bottom:1px solid #e8edf6;gap:8px}.bar-wrap{flex:1;max-width:40px;height:100%;display:flex;align-items:center;justify-content:end;flex-direction:column;gap:8px}.bar{width:80%;min-height:3px;border-radius:4px 4px 0 0;background:linear-gradient(#7990f5,#4e70e8)}.bar-label{color:#9aa7b9;font-size:10px;position:relative;top:18px}.bar-legend{display:flex;gap:10px;align-items:center;color:#8592aa;font-size:11px;margin-top:37px}.bullet{background:#5476e9;width:8px;height:8px;border-radius:3px;display:inline-block}.insight{padding:15px 17px;border-radius:11px;margin-top:19px;background:#f1f5ff;color:#455d97;font-size:12px;line-height:1.6}.actions{display:flex;gap:12px;flex-wrap:wrap}.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}.filter{padding:9px 14px;border-radius:9px;border:1px solid #e1e8f0;color:#8290a5;background:#fff;font-size:12px;font-weight:700}.filter.active{background:#eaf0ff;border-color:#d0ddff;color:#4566cc}.section-card{padding:20px}.inbox-layout{display:grid;grid-template-columns:330px 1fr;min-height:570px;overflow:hidden}.thread-list{border-right:1px solid #edf1f7}.thread{padding:17px;border:0;border-bottom:1px solid #f1f3f7;background:white;width:100%;text-align:left;display:flex;gap:11px}.thread.active{background:#f0f4ff}.thread .circle{width:38px;height:38px;font-size:13px;font-weight:800}.thread strong{font-size:12px}.thread small{font-size:11px;color:#8390a6;display:block;margin-top:5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:200px}.thread-time{margin-left:auto;font-size:10px;color:#a2afbf}.conversation{display:flex;flex-direction:column;min-width:0}.conversation-head{border-bottom:1px solid #ecf0f5;padding:18px 22px;display:flex;justify-content:space-between;align-items:center}.bubble-area{flex:1;padding:28px;display:flex;flex-direction:column;gap:13px;background:#fcfdff}.bubble{max-width:79%;line-height:1.6;padding:12px 15px;font-size:12px;border-radius:12px}.bubble.out{align-self:flex-end;background:#486be9;color:white;border-bottom-right-radius:3px}.bubble.in{align-self:flex-start;background:#eaf0f8;color:#3c4c69;border-bottom-left-radius:3px}.conversation-foot{border-top:1px solid #edf1f7;padding:16px}.foot-note{color:#9aa7b9;font-size:11px;text-align:center}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{display:flex;flex-direction:column;gap:7px;margin-bottom:12px}.field label{font-size:11px;font-weight:800;color:#61708c}.field input,.field select,.field textarea{width:100%;border:1px solid #dae3ee;padding:12px;border-radius:9px;background:white;color:#32405c;outline:none;min-height:43px}.field textarea{min-height:90px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{border-color:#6c8bf2;box-shadow:0 0 0 3px #eaf0ff}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.settings-card{padding:22px}.settings-card h2{font:800 14px 'Manrope';margin:0 0 7px}.settings-card p{font-size:11px;color:#8391a7;line-height:1.6;margin:0 0 19px}.switch-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid #f2f3f6;gap:10px}.switch-row strong{font-size:12px}.switch-row small{display:block;font-size:11px;color:#99a5b7;margin-top:4px}.switch{appearance:none;background:#cad5e7;border-radius:30px;width:38px;height:22px;position:relative;flex:none;cursor:pointer}.switch:checked{background:#5578eb}.switch:before{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;background:white;border-radius:50%;transition:.16s}.switch:checked:before{transform:translateX(16px)}.industry-tags{display:flex;gap:7px;flex-wrap:wrap}.industry-tag{background:#f0f4fb;color:#637497;border-radius:7px;padding:7px 10px;font-size:11px}.notice{padding:13px 15px;border:1px solid #f1dfbd;background:#fff9ed;border-radius:10px;color:#977139;font-size:11px;line-height:1.6;margin:15px 0}.empty{padding:60px 20px;text-align:center;color:#8a98ad;font-size:13px}dialog{max-width:460px;width:calc(100% - 28px);padding:26px;border:1px solid #dce4ef;border-radius:16px;box-shadow:0 24px 100px #13214130;color:#243351}dialog::backdrop{background:#111b30aa}.modal-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:22px}.modal-head h2{font:800 22px 'Manrope';margin:5px 0}.modal-buttons{display:flex;gap:9px;justify-content:flex-end;margin-top:14px}#toast{position:fixed;bottom:22px;right:22px;background:#1a2943;color:white;border-radius:9px;padding:13px 17px;box-shadow:0 15px 30px #14274933;font-size:12px;display:none;z-index:20;max-width:330px}.mobile-nav{display:none}.callout{font-size:11px;line-height:1.65;background:#f5f8fd;color:#8190a4;border:1px solid #e6edf6;padding:13px;border-radius:9px}.code-like{font:11px ui-monospace,monospace;background:#eef3fa;padding:4px 6px;border-radius:5px;overflow-wrap:anywhere}.kbd{border:1px solid #dfe4ef;border-radius:5px;padding:3px 6px;font-size:10px}.mini-label{font-size:11px;font-weight:800;color:#7687a5;text-transform:uppercase;letter-spacing:1px}.steps{display:grid;gap:10px}.step{display:flex;align-items:center;gap:13px;padding:15px;border:1px solid #edf0f5;border-radius:10px}.step-num{height:30px;width:30px;background:#ecf2ff;color:#5671c2;border-radius:50%;display:grid;place-items:center;font-weight:800}.step strong{display:block;font-size:12px}.step small{display:block;font-size:11px;color:#9da9b7;margin-top:4px}@media(max-width:1100px){.sidebar{width:210px}.main-col{margin-left:210px;width:calc(100% - 210px)}.main-content{padding:29px 22px}.metrics{grid-template-columns:repeat(2,1fr)}.two-col{grid-template-columns:1fr}}@media(max-width:700px){.sidebar{display:none}.main-col{margin-left:0;width:100%}.topbar{height:57px;padding:0 17px}.top-right{gap:11px}.main-content{padding:25px 15px 95px}.pagehead{align-items:flex-start}.pagehead h1{font-size:23px}.pagehead p{font-size:12px;line-height:1.5}.pagehead .btn{padding:9px}.metrics{gap:10px}.metric{min-height:125px;padding:14px}.metric-number{font-size:28px}.metric-top{font-size:11px}.metric-icon{padding:6px}.metric-bottom{font-size:10px}.two-col{gap:13px}.settings-grid,.form-grid{grid-template-columns:1fr}.card-h{padding:18px 16px 0}.activity-row{padding:14px 16px}.inbox-layout{display:block}.thread-list{border-right:0}.conversation{min-height:410px}.bubble-area{min-height:300px}.thread small{max-width:210px}.mobile-nav{position:fixed;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-around;background:#fff;border-top:1px solid #e6ebf5;padding:7px 8px max(8px,env(safe-area-inset-bottom));z-index:9;box-shadow:0 -2px 14px #12213d0a}.mobile-nav button{background:transparent;border:0;color:#99a5b8;font-size:9px;font-weight:700;display:grid;justify-items:center;gap:4px;padding:5px 9px}.mobile-nav button span{font-size:20px}.mobile-nav button.active{color:#4f70e7}.demo-chip{font-size:9px}.crumb{font-size:10px}#toast{left:15px;right:15px;bottom:84px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* Supabase v0.2 real workspace & authentication — separate from local demo */
body[data-mode="auth"]>.shell,body[data-mode="auth"] #liveRoot,body[data-mode="live"]>.shell,body[data-mode="live"] #authGate,body[data-mode="demo"] #authGate,body[data-mode="demo"] #liveRoot{display:none!important}
body[data-mode="auth"] #authGate,body[data-mode="live"] #liveRoot,body[data-mode="demo"]>.shell{display:block}
.auth-gate{min-height:100dvh;background:#f6f8fd;padding:28px 16px;display:grid;align-content:center;justify-items:center}
.auth-layout{width:min(100%,450px)}.auth-brand{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:26px;color:#152341;font-family:Manrope,sans-serif}.auth-brand strong{font-size:24px;font-weight:800}.auth-brand small{color:#91a0ba;align-self:end;font-size:10px}.auth-panel{background:white;border:1px solid #e4eaf4;border-radius:18px;box-shadow:0 14px 55px #1c315a0a;padding:28px}.auth-panel h1{font:800 25px Manrope,sans-serif;margin:10px 0}.auth-panel>.muted{line-height:1.5;font-size:13px;margin-bottom:22px}.auth-tabs{display:flex;gap:8px;border-bottom:1px solid #eaf0f8;margin:0 0 22px}.auth-tabs button{background:none;border:0;color:#8391ad;font-weight:800;padding:11px 16px}.auth-tabs button.active{color:#4567ed;border-bottom:3px solid #4567ed}.auth-submit,.auth-demo{width:100%;margin-top:10px}.auth-demo{border:0;background:#f0f4fc;color:#4567dc}.auth-fine{font-size:11px;color:#94a2b8;text-align:center;line-height:1.55;margin:17px 0 0}.auth-message{background:#eaf4ff;padding:13px;border-radius:9px;color:#345c90;line-height:1.5;font-size:12px}.auth-message.error,#liveMessage.error{background:#fff1ef;color:#b33838}.auth-panel input{font-size:16px}.demo-login{padding:7px 10px;font-size:11px}.live-chip{background:#ebf8f2;border-color:#c5e8d4;color:#258662}.live-logout{padding:8px 11px}.live-empty{margin-top:15px;padding:35px;text-align:center}.live-empty strong{font-size:16px}.live-empty p{font-size:12px;color:#8291a9;max-width:520px;margin:13px auto 0;line-height:1.7}.live-form-wrap{max-width:550px;margin:24px auto;padding:26px}.live-form-wrap h1{font:800 25px Manrope,sans-serif}.live-form-wrap p{line-height:1.6}.live-section{margin-top:18px}.live-section h2{font:800 16px Manrope,sans-serif}.loading-account{min-height:100dvh;display:grid;place-items:center;font:700 16px Manrope,sans-serif;color:#6578a3}.business-select{display:flex;gap:10px;align-items:center;margin:0 0 20px;font-size:12px}.business-select select{max-width:300px;padding:10px;border-radius:8px;border:1px solid #dfe8f1}.live-section .live-empty{border:0;box-shadow:none}#liveMessage:not([hidden]){margin:0 0 18px}
@media(max-width:700px){.auth-gate{padding:18px 13px}.auth-panel{padding:22px 20px}.auth-brand small{display:none}.live-logout{font-size:10px}.live-chip{font-size:8px}.live-empty{padding:27px 14px}.live-form-wrap{padding:21px}.business-select{margin-bottom:14px}}