:root{
    --primary:#1F3A56; --primary-deep:#132637; --accent:#1F3A56;
    --ink:#16212C; --muted:#5E6B78; --paper:#F5F6F8; --surface:#fff;
    --line:rgba(22,33,44,.11); --head-bg:#fff; --head-ink:#16212C; --head-line:rgba(22,33,44,.10);
    --display:Inter,system-ui,sans-serif; --good:#167a43; --good-bg:#e7f5ec; --bad:#b42318; --bad-bg:#fdecea;
    --warn:#8a5a00; --warn-bg:#fdf3dc; --bubble-ai:#eef2f6; --bubble-me:#e6f0f9;
  }
  html[data-brand=connecttps]{
    --primary:#0070BA; --primary-deep:#00558F; --accent:#0070BA;
    --ink:#0E2338; --muted:#5A6B7D; --paper:#F3F7FB; --line:rgba(14,35,56,.10);
    --head-bg:#fff; --head-ink:#0E2338; --head-line:rgba(0,112,186,.18); --bubble-me:#e3f0fa;
  }
  html[data-brand=casba]{
    --primary:#08182C; --primary-deep:#000a16; --accent:#D49A4E;
    --ink:#1B2836; --muted:#6D7B8A; --paper:#F7F5F1; --line:rgba(8,24,44,.12);
    --head-bg:#08182C; --head-ink:#F7F5F1; --head-line:transparent;
    --display:Fraunces,Georgia,serif; --bubble-me:#f6ecdd;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{background:var(--paper);color:var(--ink);font-family:Inter,system-ui,sans-serif;font-size:15.5px;line-height:1.55;-webkit-font-smoothing:antialiased}
  button{font:inherit;cursor:pointer}
  a{color:var(--primary)}
  .hide{display:none!important}
  .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

  header{background:var(--head-bg);color:var(--head-ink);border-bottom:1px solid var(--head-line)}
  .bar{max-width:980px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:16px;min-height:72px}
  .brandmark{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
  .brandmark img{height:64px;width:auto;display:block;margin:-6px 0}
  .wordmark{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:21px;line-height:1}
  .wordmark span{display:block;font-family:Inter,sans-serif;font-size:9px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:#D49A4E;margin-top:5px}
  .neutralmark{font-weight:600;font-size:16px;letter-spacing:-.01em}
  .bar .spacer{flex:1}
  .who{display:none!important}
  .who{font-size:14px;color:var(--head-ink);opacity:.85;text-align:right;line-height:1.3}
  .signout{background:transparent;border:1px solid var(--head-line);color:var(--head-ink);border-radius:8px;padding:7px 12px;font-size:13.5px}
  html[data-brand=casba] .signout{border-color:rgba(247,245,241,.3)}
  html[data-brand=neutral] .signout,html[data-brand=connecttps] .signout,html[data-brand=majx] .signout{border-color:var(--line)}

  main{max-width:980px;margin:0 auto;padding:30px 24px 72px}
  h1{font-family:var(--display);font-weight:600;font-size:27px;letter-spacing:-.015em;color:var(--primary)}
  html[data-brand=connecttps] h1{color:var(--ink)}
  .sub{color:var(--muted);font-size:14.5px;margin-top:4px}

  .gate{max-width:440px;margin:28px auto 0}
  .card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:24px;margin-top:20px}
  label{display:block;font-size:14px;font-weight:500;margin-bottom:8px}
  input[type=password],input[type=search]{width:100%;padding:11px 13px;font:inherit;color:var(--ink);border:1px solid var(--line);border-radius:9px;background:#fff}
  input:focus{outline:2px solid var(--primary);outline-offset:-1px;border-color:transparent}
  .btn{margin-top:14px;padding:11px 20px;font-weight:500;color:#fff;background:var(--primary);border:0;border-radius:9px;width:100%}
  .btn:hover{background:var(--primary-deep)}
  .btn:disabled{opacity:.55;cursor:default}
  .err{margin-top:12px;font-size:14px;color:var(--bad)}

  .tabs{display:flex;gap:4px;margin-top:22px;border-bottom:1px solid var(--line);overflow-x:auto}
  .tab{background:none;border:0;padding:11px 14px;font-size:14.5px;font-weight:500;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
  .tab[aria-selected=true]{color:var(--ink);border-bottom-color:var(--accent)}
  .tab .n{font-size:12px;color:var(--muted);margin-left:6px;font-weight:400}

  .tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px}
  .tools input[type=search]{flex:1;min-width:200px}
  .chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;font-size:13px;color:var(--muted)}
  .chip[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
  .count{font-size:13px;color:var(--muted);margin-left:auto}
  .note{font-size:13px;color:var(--muted);margin-top:10px}

  ul.list{list-style:none;margin-top:14px}
  .item{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:10px}
  .row{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
  .party{font-weight:600;font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums}
  .meta{font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums}
  .tag{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;border-radius:5px;background:var(--paper);color:var(--muted)}
  .pill{font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px}
  .pill.good{background:var(--good-bg);color:var(--good)}
  .pill.bad{background:var(--bad-bg);color:var(--bad)}
  .pill.warn{background:var(--warn-bg);color:var(--warn)}
  audio{width:100%;margin-top:10px;height:36px}
  .empty,.loading{padding:36px 16px;text-align:center;color:var(--muted);font-size:14.5px}

  .call{cursor:pointer}
  .call:hover{border-color:var(--primary)}
  .call .chev{margin-left:auto;color:var(--muted);font-size:13px}
  a.chev{margin-left:auto;font-size:13.5px;font-weight:500;text-decoration:none}
  .detail{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);cursor:default}
  .sumgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
  .sum{background:var(--paper);border-radius:9px;padding:10px 12px}
  .sum dt{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
  .sum dd{font-size:14.5px;font-weight:500;margin-top:2px;word-break:break-word}
  .sum.urgent{background:var(--bad-bg)} .sum.urgent dd{color:var(--bad)}
  h3{font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:16px 0 8px}
  .chat{display:flex;flex-direction:column;gap:6px}
  .bub{max-width:80%;padding:8px 12px;border-radius:12px;font-size:14.5px;line-height:1.45;white-space:pre-wrap}
  .bub.ai{background:var(--bubble-ai);align-self:flex-start;border-bottom-left-radius:4px}
  .bub.caller{background:var(--bubble-me);align-self:flex-end;border-bottom-right-radius:4px}
  .bub small{display:block;font-size:11px;color:var(--muted);margin-bottom:2px}

  footer{max-width:980px;margin:0 auto;padding:0 24px 40px;font-size:12.5px;color:var(--muted)}
  @media(max-width:620px){
    .bar{padding:10px 16px;min-height:62px}.brandmark img{height:50px;margin:-4px 0}
    main{padding:22px 16px 56px}h1{font-size:23px}footer{padding:0 16px 32px}
    .who{display:none}.bub{max-width:92%}
  }

  /* ---- messaging view ---- */
  .msgr{display:grid;grid-template-columns:300px 1fr;height:min(72vh,720px);min-height:420px;margin-top:18px;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
  .threads{border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0}
  .thsearch{padding:12px;border-bottom:1px solid var(--line)}
  .thsearch input[type=search]{padding:9px 12px;font-size:14px}
  .thlist{list-style:none;overflow-y:auto;flex:1}
  .th{display:flex;gap:11px;padding:12px 14px;cursor:pointer;border-bottom:1px solid var(--line)}
  .th:hover{background:var(--paper)}
  .th.on{background:var(--bubble-me)}
  .av{flex:none;width:40px;height:40px;border-radius:50%;background:var(--paper);color:var(--muted);font-size:12.5px;font-weight:600;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
  .th.on .av{background:var(--primary);color:#fff}
  .thbody{min-width:0;flex:1}
  .throw{display:flex;align-items:baseline;gap:8px;justify-content:space-between}
  .thname{font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
  .thtime{font-size:12px;color:var(--muted);flex:none}
  .thprev{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
  .convo{display:flex;flex-direction:column;min-width:0;background:var(--paper)}
  .cvhead{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--surface);border-bottom:1px solid var(--line)}
  .cvname{font-weight:600;font-size:15px;font-variant-numeric:tabular-nums}
  .cvsub{font-size:12.5px;color:var(--muted)}
  .back{display:none;background:none;border:0;font-size:26px;line-height:1;color:var(--primary);padding:0 6px 2px 0}
  .cvbody{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:6px}
  .cv-empty{margin:auto}
  .daysep{align-self:center;font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px 10px;margin:10px 0 6px}
  .msg{display:flex;flex-direction:column;max-width:72%}
  .msg.in{align-self:flex-start;align-items:flex-start}
  .msg.out{align-self:flex-end;align-items:flex-end}
  .bubble{padding:9px 13px;border-radius:16px;font-size:14.5px;line-height:1.45;white-space:pre-wrap;word-break:break-word}
  .msg.in .bubble{background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:5px}
  .msg.out .bubble{background:var(--primary);color:#fff;border-bottom-right-radius:5px}
  .msg.out.failed .bubble{background:var(--bad)}
  .bubble em{opacity:.7}
  .mmeta{font-size:11.5px;color:var(--muted);margin:3px 6px 0}
  .st.bad{color:var(--bad);font-weight:600}
  .pic img{display:block;max-width:260px;max-height:260px;border-radius:10px;margin-bottom:4px}
  .att{display:inline-block;font-size:12.5px;opacity:.8}
  @media(max-width:700px){
    .msgr{grid-template-columns:1fr;height:calc(100vh - 230px);min-height:460px}
    .convo{display:none}.msgr.has-open .convo{display:flex}.msgr.has-open .threads{display:none}
    .back{display:block}.msg{max-width:84%}
  }

  .thsearch{display:flex;gap:8px}
  .newmsg{flex:none;background:var(--primary);color:#fff;border:0;border-radius:9px;padding:0 12px;font-size:13px;font-weight:600;white-space:nowrap}
  .newmsg:hover{background:var(--primary-deep)}
  .newto{margin-top:6px;width:100%;padding:8px 11px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:14px}
  .compose{display:flex;gap:8px;align-items:flex-end;padding:10px 12px 4px;background:var(--surface);border-top:1px solid var(--line)}
  .compose textarea{flex:1;resize:none;border:1px solid var(--line);border-radius:18px;padding:9px 14px;font:inherit;font-size:14.5px;line-height:1.4;max-height:140px;color:var(--ink);background:#fff}
  .compose textarea:focus{outline:2px solid var(--primary);outline-offset:-1px;border-color:transparent}
  .sendbtn{flex:none;background:var(--primary);color:#fff;border:0;border-radius:18px;padding:9px 18px;font-weight:600;font-size:14px}
  .sendbtn:disabled{opacity:.55}
  .cnote{font-size:11.5px;color:var(--muted);padding:0 16px 9px;background:var(--surface)}
  .cnote.bad{color:var(--bad)}

/* ---- MajX brand ---- */
html[data-brand=majx]{
  --primary:#0875EE; --primary-deep:#061936; --accent:#D98400;
  --ink:#061936; --muted:#5B6B85; --paper:#F6F8FC; --line:rgba(6,25,54,.10);
  --head-bg:#fff; --head-ink:#061936; --head-line:rgba(8,117,238,.20); --bubble-me:#e6f0fe;
}
html[data-brand=majx] header{box-shadow:inset 0 3px 0 #0875EE}
html[data-brand=majx] h1{color:var(--ink)}
/* ---- header link to the public pricing page ---- */
.navlink{color:var(--head-ink);text-decoration:none;font-size:14px;font-weight:600;padding:7px 12px;border-radius:8px;white-space:nowrap}
.navlink:hover{background:rgba(127,127,127,.10)}
@media(max-width:640px){.navlink{font-size:13px;padding:6px 8px}}