@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700&family=Instrument+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");
:root{
  --ground:#EDF0EC; --surface:#FFFFFF; --surface-2:#F6F8F5; --line:#D6DCD4; --line-strong:#B9C2B7;
  --ink:#152019; --ink-2:#48564C; --ink-3:#6F7C71;
  --accent:#0B7A55; --accent-ink:#FFFFFF; --accent-soft:#DDF0E7;
  --missed:#C9482A; --missed-soft:#FBE5DD; --warn:#A86A00; --warn-soft:#FBEFD6; --violet:#6C5FD4;
  --bubble-in:#E7EBE5; --bubble-out:#0B7A55; --shadow:0 1px 2px rgba(20,32,25,.06),0 8px 28px rgba(20,32,25,.08);
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --body:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  color-scheme:dark;
  --ground:#0D1210; --surface:#151C18; --surface-2:#1B241F; --line:#27322B; --line-strong:#3A473F;
  --ink:#E4EBE5; --ink-2:#AAB6AD; --ink-3:#86938A;
  --accent:#3CC58F; --accent-ink:#06140E; --accent-soft:#143427;
  --missed:#F0795A; --missed-soft:#3A1E16; --warn:#E8B04A; --warn-soft:#352812; --violet:#9C90F0;
  --bubble-in:#232D27; --bubble-out:#1F8F66; --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 28px rgba(0,0,0,.35);
}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--ground);color:var(--ink);font-family:var(--body);font-size:14px;line-height:1.5}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
.wrap{max-width:1240px;margin:0 auto;padding-inline:20px;padding-block:0 60px}
@media (max-width:480px){.wrap{padding-inline:16px}}
h1,h2,h3{font-family:var(--display);letter-spacing:-.015em;text-wrap:balance;margin:0}
h1{font-size:clamp(24px,3vw,30px);line-height:1.15}
h2{font-size:19px}
h3{font-size:15px}
p{margin:0}
.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);font-weight:600}
.muted{color:var(--ink-3)}
.small{font-size:12.5px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.stack{display:grid;gap:16px;align-content:start}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}

/* header */
.top{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-block:16px 14px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.brand b{font-family:var(--display);font-size:21px;letter-spacing:-.02em}
.brand small{display:block;color:var(--ink-3);font-size:12px;line-height:1.1}
.tabs{display:flex;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:4px;flex-wrap:wrap}
.tab{border:0;background:none;padding:7px 13px;border-radius:7px;font-weight:500;color:var(--ink-2);display:flex;gap:7px;align-items:center}
.tab[aria-selected="true"]{background:var(--ink);color:var(--ground)}
.tab .count{font-family:var(--mono);font-size:11px;background:var(--missed);color:#fff;border-radius:20px;padding:0 6px}
.who{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-2)}
.who strong{color:var(--ink)}
.banner{background:var(--warn-soft);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin-bottom:16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* controls */
.btn{border:1px solid var(--line-strong);background:var(--surface);padding:8px 14px;border-radius:8px;font-weight:600;display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);white-space:nowrap}
.btn:hover{border-color:var(--ink-3)}
.btn.go{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.danger{color:var(--missed)}
.btn.primary{background:var(--missed);border-color:var(--missed);color:#fff}
.btn.sm{padding:5px 10px;font-size:12.5px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.inp{border:1px solid var(--line-strong);background:var(--surface-2);border-radius:8px;padding:7px 10px;width:100%;min-width:0}
textarea.inp{resize:vertical;min-height:70px;line-height:1.45}
.field{display:grid;gap:4px;margin-bottom:12px}
.field>label,.lbl{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.hint{font-size:11.5px;color:var(--ink-3)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:560px){.grid2,.grid3{grid-template-columns:1fr}}
.check{display:flex;gap:8px;align-items:flex-start;margin-bottom:8px}
.check input{margin-top:3px}
.radio-card{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line-strong);border-radius:10px;padding:10px 12px;margin-bottom:8px;background:var(--surface-2);cursor:pointer}
.radio-card:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.radio-card input{margin-top:4px}
.radio-card b{display:block;font-size:13px}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;min-width:0}
.panel-h{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.panel-h .r{margin-left:auto}
.panel-b{padding:14px 16px}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;letter-spacing:.02em;padding:2px 9px;border-radius:20px;white-space:nowrap}
.pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.p-ok{background:var(--accent-soft);color:var(--accent)}
.p-miss{background:var(--missed-soft);color:var(--missed)}
.p-warn{background:var(--warn-soft);color:var(--warn)}
.p-mute{background:var(--surface-2);color:var(--ink-3);border:1px solid var(--line)}
.empty{color:var(--ink-3);font-size:13px;padding:18px 0}

.intro{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;margin-block:4px 16px}
.intro p{margin-top:6px;color:var(--ink-2);max-width:64ch}
.intro .actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

/* dashboard */
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:16px}
@media (max-width:1000px){.kpis{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{padding:14px 16px}
.kpi .v{font-family:var(--display);font-size:28px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1;margin-top:4px}
.kpi .s{font-size:12px;color:var(--ink-3)}
.kpi.alert .v{color:var(--missed)}
.dashgrid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;align-items:start}
@media (max-width:1000px){.dashgrid{grid-template-columns:minmax(0,1fr)}}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.fbtn{border:1px solid var(--line);background:var(--surface-2);border-radius:16px;padding:3px 11px;font-size:12.5px;font-weight:500;color:var(--ink-2)}
.fbtn[aria-pressed="true"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:640px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);font-weight:600;padding:8px 12px;border-bottom:1px solid var(--line)}
td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
tbody tr.click{cursor:pointer}
tbody tr.click:hover td{background:var(--surface-2)}
tbody tr[aria-selected="true"] td{background:var(--accent-soft)}
.when b{display:block;font-family:var(--mono);font-size:13px;font-weight:500}
.when span{font-size:12px;color:var(--ink-3)}
.issue{color:var(--ink-2);font-size:13px;max-width:340px}
.tag{font-size:10px;font-weight:700;letter-spacing:.06em;margin-left:6px;text-transform:uppercase;color:var(--ink-3)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0}
.kv dt{color:var(--ink-3);font-size:12.5px}
.kv dd{margin:0;font-weight:500;min-width:0;overflow-wrap:anywhere}
.details{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:4px}
.details li{font-size:12.5px;color:var(--ink-2);padding-left:12px;position:relative}
.details li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:1px;background:var(--accent)}
.tx{display:flex;flex-direction:column;gap:5px;max-height:420px;overflow-y:auto;padding:10px;background:var(--surface-2);border-radius:10px}
.b{max-width:82%;padding:8px 12px;border-radius:16px;font-size:13px;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere}
.b.them{align-self:flex-start;background:var(--bubble-in);border-bottom-left-radius:5px}
.b.us{align-self:flex-end;background:var(--bubble-out);color:#fff;border-bottom-right-radius:5px}
.b.owner{align-self:flex-end;background:var(--ink);color:var(--ground);border-bottom-right-radius:5px}
.b small{display:block;font-size:10.5px;opacity:.7;margin-top:2px}
.log{list-style:none;margin:0;padding:0;display:grid}
.log li{display:grid;grid-template-columns:auto 12px 1fr;gap:8px;font-size:12.5px;padding:5px 0;align-items:start}
.log .t{font-family:var(--mono);color:var(--ink-3);font-size:11.5px;padding-top:1px;white-space:nowrap}
.log .k{width:9px;height:9px;border-radius:50%;margin-top:5px;background:var(--line-strong)}
.k.call{background:var(--missed)}.k.sms{background:var(--ink-3)}.k.ai{background:var(--violet)}.k.cal{background:#2A7BD0}.k.book{background:var(--accent)}.k.alert{background:var(--warn)}

/* conversations */
.convgrid{display:grid;grid-template-columns:340px minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:900px){.convgrid{grid-template-columns:minmax(0,1fr)}}
.convlist{max-height:70vh;overflow-y:auto}
.citem{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);background:none;padding:10px 16px}
.citem:hover{background:var(--surface-2)}
.citem[aria-current="true"]{background:var(--accent-soft)}
.citem .l1{display:flex;gap:8px;align-items:center}
.citem .l1 b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.citem .l2{font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.convdetail{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:16px}
@media (max-width:1100px){.convdetail{grid-template-columns:minmax(0,1fr)}}
.replybox{display:flex;gap:8px;margin-top:10px}

/* test chat */
.testgrid{display:grid;grid-template-columns:minmax(280px,380px) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:860px){.testgrid{grid-template-columns:minmax(0,1fr)}}
.phone{background:#101713;border-radius:34px;padding:10px;box-shadow:var(--shadow);max-width:380px;width:100%}
.screen{background:var(--surface);border-radius:26px;overflow:hidden;height:600px;display:flex;flex-direction:column}
.thread-h{text-align:center;padding:14px 12px 10px;border-bottom:1px solid var(--line)}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-family:var(--display);font-weight:700;margin:0 auto 4px}
.msgs{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:6px}
.msgs .b.them{align-self:flex-start}
.msgs .b.us{align-self:flex-end}
.typing{align-self:flex-start;background:var(--bubble-in);border-radius:16px;padding:10px 14px;display:flex;gap:4px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-3);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}
.compose{display:flex;gap:8px;padding:8px 10px 12px;border-top:1px solid var(--line)}
.compose input{flex:1;border:1px solid var(--line-strong);border-radius:20px;padding:8px 14px;background:var(--surface-2);min-width:0}

/* setup */
.setup{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media (max-width:900px){.setup{grid-template-columns:minmax(0,1fr)}}
.svc{display:grid;grid-template-columns:1.6fr 74px 80px 1.4fr 30px;gap:6px;margin-bottom:6px;align-items:center}
.svc-h{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
@media (max-width:560px){.svc{grid-template-columns:1fr 1fr;padding-bottom:8px;border-bottom:1px dashed var(--line)}.svc-h{display:none}}
.x{border:0;background:none;color:var(--ink-3);font-size:18px;line-height:1}
.hrow{display:grid;grid-template-columns:90px 1fr 1fr;gap:8px;align-items:center;margin-bottom:6px}
.hrow label{display:flex;gap:6px;align-items:center;font-weight:500}
.savebar{position:sticky;bottom:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 14px;display:flex;gap:10px;align-items:center;margin-top:16px;box-shadow:var(--shadow);padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
.preview-sms{background:var(--bubble-in);border-radius:16px 16px 16px 5px;padding:8px 12px;font-size:13px;max-width:340px;white-space:pre-wrap}
.slotlist{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.slotlist span{font-family:var(--mono);font-size:11.5px;background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:2px 7px}
.note{font-size:12.5px;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.copy{font-family:var(--mono);font-size:12px;background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:4px 8px;overflow-wrap:anywhere;display:inline-block}

/* login */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.auth .panel{width:100%;max-width:400px}
.err{color:var(--missed);font-size:13px;min-height:18px}

.toast{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);background:var(--ink);color:var(--ground);padding:10px 16px;border-radius:10px;font-weight:500;z-index:60;box-shadow:var(--shadow);max-width:calc(100% - 32px)}
.modal-bg{position:fixed;inset:0;background:rgba(8,12,10,.55);display:grid;place-items:center;z-index:50;padding:16px}
.modal{background:var(--surface);border-radius:14px;max-width:460px;width:100%;box-shadow:var(--shadow)}
.modal .mb{padding:18px}
.modal .mf{display:flex;gap:8px;justify-content:flex-end;padding:12px 18px;border-top:1px solid var(--line)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}