/* ============================================================
   Phone. The shell was responsive from the start; these are the
   things that only show up once you actually render it at 390.
   ============================================================ */
@media(max-width:640px){
  /* Chip rows were wrapping to five lines and pushing the content off
     screen. One scrolling row is the right shape on a phone. */
  .filters{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px;margin:0 -18px;
    padding-left:18px;padding-right:18px}
  .filters::-webkit-scrollbar{display:none}
  .filt{flex-shrink:0;padding:11px 16px;min-height:44px;display:inline-flex;align-items:center}
  .vrow{gap:10px}

  /* iOS zooms any input under 16px on focus, which throws the layout out. */
  .vsearch input,.rtedit,.nbedit{font-size:16px}
  .vsearch{padding:12px 15px}

  /* Touch targets. 44 is the floor. */
  .tabb{padding:13px 14px;min-height:44px}
  .navi{padding:12px 10px;min-height:46px}
  .mission{padding:11px 9px 11px 22px;min-height:46px}
  .chatrow,.qhead{min-height:46px}
  .tlink{min-height:44px;align-items:center}
  /* The full size button was drawn for a laptop: a 26px side pad and a 27px
     icon chip either side of the label. 44 is still the floor, the label and
     the padding around it are what were reading as oversized on a phone. */
  .cta{min-height:48px;padding:13px 20px;font-size:14px;gap:10px}
  .cta .chip{width:24px;height:24px}
  .cta .chip svg{width:15px;height:15px}
  .cta.sm{min-height:44px;padding:11px 18px}
  .nbtools button{width:40px;height:40px}
  .tagchip,.notetab{min-height:40px}
  .gatebox h1{font-size:25px}
  .gatebox p{font-size:14px}

  /* Rows with several children get room to breathe rather than crushing */
  .frow,.buyer,.acct,.hist{flex-wrap:wrap;row-gap:10px}
  .frow .ft,.buyer .bi,.acct .ai,.hist .hi{flex-basis:calc(100% - 48px)}
  .frow .scope{order:3}
  .vsech{flex-direction:column;align-items:flex-start;gap:3px}
  .vsech p{min-width:0}
  .vhead p,.pane .sub{font-size:15px}
  .split{gap:14px}
  .pane{padding:17px}
  .vsec{margin-top:26px}
}

/* a note is a record, not a running scroll */
.notetab{border:1.5px solid var(--hair);background:var(--raise);border-radius:11px;padding:9px 13px;
  text-align:left;transition:.14s;flex-shrink:0;max-width:230px}
.notetab:hover{border-color:var(--muted)}
.notetab.on{border-color:var(--red);background:var(--sel)}
.notetab b{display:block;font-size:13px;font-weight:700;color:var(--head);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notetab span{display:block;font-size:11px;color:var(--muted);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* the sign in gate, and the standing demo notice */
.gate{position:fixed;inset:0;z-index:400;background:var(--bg);display:flex;align-items:center;
  justify-content:center;padding:24px}
.gatebox{width:min(420px,100%)}
.gatebox .mark{width:44px;height:44px;border-radius:12px;background:var(--grad);display:grid;
  place-items:center;font-weight:800;font-size:21px;color:#000;margin-bottom:20px}
.gatebox h1{font-size:30px;font-weight:600;color:var(--head);letter-spacing:-.025em;margin-bottom:8px}
.gatebox p{font-size:15px;color:var(--sub);line-height:1.6;margin-bottom:22px}
.gatebox input{width:100%;border:1.5px solid var(--hair);border-radius:14px;padding:14px 16px;
  font-size:16px;background:var(--card);color:var(--head);margin-bottom:10px;outline:none}
.gatebox input:focus{border-color:var(--muted)}
.gatebox .err{color:var(--red);font-size:13.5px;font-weight:700;margin-bottom:10px;min-height:18px}
.gatebox .cta{width:100%;justify-content:center}
.demobar{background:#5B0E06;color:#fff;font-size:13px;font-weight:600;padding:10px 18px;
  display:flex;align-items:center;gap:12px;line-height:1.45}
.demobar b{font-weight:800}
.demobar .sp{flex:1}
.demobar button{color:rgba(255,255,255,.75);font-size:12px;font-weight:700;white-space:nowrap}
.demobar button:hover{color:#fff}
.thinking{display:inline-flex;gap:5px;align-items:center;padding:4px 0}
.thinking i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:tk 1.1s infinite}
.thinking i:nth-child(2){animation-delay:.15s} .thinking i:nth-child(3){animation-delay:.3s}
@keyframes tk{0%,60%,100%{opacity:.25}30%{opacity:1}}
.meta{font-size:11.5px;color:var(--muted);margin-top:10px}

/* ============================================================
   Phone density. On a 390 wide screen the demo bar, the app bar and
   the progress strip were taking roughly 40 percent of the viewport
   before a single word of the conversation. And 18px body text at
   1.62 line height is about thirty characters a line, which is a lot
   of scrolling for very few words.
   ============================================================ */
@media(max-width:640px){
  .demobar{padding:8px 14px;font-size:12px;gap:8px;align-items:flex-start}
  .demobar .full{display:none}
  .demobar .short{display:inline}
  .demobar #leftCount{white-space:nowrap;font-weight:800}
  .bar{padding:9px 14px;gap:8px}
  .crumb{font-size:12.5px}
  .prog{padding:8px 14px;gap:10px}
  .prog .pt{font-size:12px}
  .prog .px{font-size:12px}

  /* the conversation itself */
  .col{padding:14px 16px 18px}
  .say{font-size:16px;line-height:1.55;margin-bottom:11px}
  .turn{margin-bottom:22px}
  .agent{gap:11px}
  .adot{width:24px;height:24px}
  .you p{font-size:14.5px;padding:9px 14px}
  .small,.panel p,.cannot p{font-size:14px}
  .cannot{padding:13px 15px;margin-top:14px}
  .can{gap:12px}
  .panel{padding:16px;border-radius:14px}
  .panel h3{font-size:17px}
  .meta{font-size:11px;margin-top:8px}
  .dockin{padding:10px 14px 12px}
  .dockhint{font-size:11.5px;margin-top:7px}
  .composer{padding:8px 8px 8px 16px;border-radius:18px}
  .composer textarea{font-size:16px;min-height:26px;padding:6px 0}
  .talkb,.sendb{width:40px;height:40px}
}
.demobar .short{display:none}

/* CRM and AI coaching get a bottom bar on a phone, the way HubSpot's app keeps
   Deals and Contacts one thumb away instead of a scrolling row at the top you
   have to reach back up for. It is a second copy of the same section switch,
   wired to the same data attribute, so above 640px it stays hidden and the
   top control is the only one. */
.bnav{display:none}
.bnavspace{display:none}
.fabask{position:fixed;right:22px;bottom:26px;z-index:85;display:inline-flex;align-items:center;gap:9px;
  background:var(--grad);color:#000;font-weight:700;font-size:13.5px;border:none;border-radius:999px;
  padding:13px 20px 13px 16px;box-shadow:0 10px 28px rgba(238,47,76,.35);transition:filter .15s,transform .15s}
.fabask:hover{filter:brightness(1.06);transform:translateY(-1px)}
.fabask svg{width:17px;height:17px;stroke:#000;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

@media(max-width:640px){
  .crmtoptabs,.practicetopseg{display:none}
  .bnavspace{display:block;height:66px}
  .bnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--bg);
    border-top:1px solid var(--hair);padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    justify-content:space-around}
  .bnavi{display:flex;flex-direction:column;align-items:center;gap:3px;flex:1;min-width:0;
    padding:6px 2px;border-radius:10px;color:var(--muted);font-size:10.5px;font-weight:700;min-height:44px}
  .bnavi svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .bnavi span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .bnavi.on{color:var(--red)}
  .fabask{right:14px;bottom:calc(74px + env(safe-area-inset-bottom));padding:11px 16px 11px 13px;font-size:12.5px}
}

/* how to keep it on your home screen */
.pwa{background:var(--card);border-radius:14px;padding:16px 18px;margin-bottom:18px}
.pwa h3{font-size:15px;font-weight:800;color:var(--head);margin-bottom:4px}
.pwa p{font-size:13.5px;color:var(--sub);line-height:1.55;margin-bottom:10px}
.pwa ol{margin:0 0 0 18px;padding:0}
.pwa li{font-size:13.5px;color:var(--sub);line-height:1.6;margin-bottom:4px}
.pwa li b{color:var(--head)}
.pwa .tabs2{display:flex;gap:6px;margin-bottom:10px}
.pwa .tabs2 button{font-size:12px;font-weight:700;border:1.5px solid var(--hair);border-radius:999px;
  padding:6px 12px;color:var(--muted)}
.pwa .tabs2 button.on{background:var(--head);border-color:var(--head);color:var(--bg)}
.pwabar{display:flex;align-items:center;gap:8px;background:var(--card);
  padding:7px 14px;font-size:12px;color:var(--sub);line-height:1.35;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.pwabar span{overflow:hidden;text-overflow:ellipsis}
.pwabar b{color:var(--head)}
.pwabar .x{margin-left:auto;color:var(--muted);font-size:16px;font-weight:700;padding:0 4px}