:root{
  --bg:#15171a; --panel:#1d2024; --panel2:#23262b; --text:#ececec;
  --muted:#a8b0ba; --accent:#5fb3ff; --green:#7ee787; --line:#30353c; --bad:#ff7b72;
  --amber:#ffcc66; --purple:#c89bff; --orange:#ff9f45; --teal:#34d3c0;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--text);font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:18px;line-height:1.55}
.hidden{display:none !important}
.muted{color:var(--muted)}
.err{color:var(--bad);margin-top:10px;min-height:22px;font-size:15px}
button{cursor:pointer;font-size:16px}
.link{background:none;border:none;color:var(--accent);text-decoration:underline}

/* login */
.login-wrap{display:flex;align-items:center;justify-content:center;height:100%}
.login-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:32px 30px;width:360px}
.login-card h1{margin:0 0 4px;font-size:26px}
.login-card label{display:block;margin:16px 0 0;font-size:15px;color:var(--muted)}
.login-card input{width:100%;margin-top:6px;padding:11px 12px;border-radius:8px;border:1px solid var(--line);background:#0e1013;color:var(--text);font-size:17px}
.login-card button[type=submit]{width:100%;margin-top:22px;padding:12px;border-radius:8px;border:none;background:var(--accent);color:#04121f;font-weight:700}

/* app shell */
.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;border-bottom:1px solid var(--line);background:linear-gradient(135deg,#1b2733,#15171a)}
.brand{font-weight:700;font-size:20px}
.who{font-size:15px;color:var(--muted);display:flex;gap:14px;align-items:center}
.notif{position:relative;display:flex;gap:4px;align-items:center}
.iconbtn{background:none;border:none;color:var(--muted);font-size:18px;cursor:pointer;position:relative;padding:4px 6px;line-height:1}
.iconbtn:hover{color:var(--text)}
/* Reference doc links in the top bar , tab style (each opens its doc in a new tab, behind login) */
.docs-nav{display:flex;gap:2px;align-items:center;position:relative;overflow:visible}
/* grouped drop-down menus (Pricing / Directories / Competition) */
.docs-nav .dd{position:relative}
.docs-nav .top{font-size:13px;color:var(--muted);background:none;border:none;border-bottom:2px solid transparent;padding:7px 11px 8px;white-space:nowrap;cursor:pointer;font-family:inherit;transition:color .15s,border-color .15s;text-decoration:none}
.docs-nav .top:hover,.docs-nav .dd:hover .top,.docs-nav .dd:focus-within .top{color:var(--text);border-bottom-color:var(--accent)}
.docs-nav .top.caret::after{content:" \25BE";font-size:11px;color:var(--muted)}
.docs-nav .menu{position:absolute;top:38px;left:0;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:6px;z-index:40;min-width:248px;box-shadow:0 12px 34px rgba(0,0,0,.55);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .13s,transform .13s,visibility .13s}
.docs-nav .dd:hover .menu,.docs-nav .dd:focus-within .menu{opacity:1;visibility:visible;transform:translateY(0)}
.docs-nav .menu a{display:block;font-size:13.5px;color:var(--text);text-decoration:none;padding:9px 12px;border-radius:7px;border-bottom:none;white-space:nowrap;transition:background .12s}
.docs-nav .menu a:hover{background:rgba(95,179,255,.14);color:#fff}
.docs-nav .menu a .d{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}
.docs-nav .menu .sep{height:1px;background:var(--line);margin:5px 8px}
@media(max-width:640px){.docs-nav{gap:0}.docs-nav .top{padding:7px 8px 8px;font-size:12px}.docs-nav .menu{min-width:210px}}
.bell-count{position:absolute;top:-3px;right:-3px;background:var(--bad);color:#fff;border-radius:10px;font-size:10.5px;font-weight:700;padding:0 5px;min-width:16px;text-align:center;line-height:16px}
.settings-pop{position:absolute;top:40px;right:0;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:12px 14px;z-index:30;min-width:190px;box-shadow:0 10px 34px rgba(0,0,0,.55)}
.settings-pop .sp-title{font-weight:700;font-size:13px;margin-bottom:8px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.settings-pop label{display:flex;align-items:center;gap:9px;padding:7px 0;font-size:15px;color:var(--text);cursor:pointer}
.settings-pop input{width:17px;height:17px}
#app{display:flex;flex-direction:column;height:100vh;overflow:hidden}
.layout{display:flex;flex:1;min-height:0}

/* top dashboard cards (no right border, individual hover, click to filter) */
.cards{display:flex;gap:14px;padding:14px 16px;background:#101216;border-bottom:1px solid var(--line)}
.card{flex:1;min-width:0;--c:var(--line);background:linear-gradient(160deg,color-mix(in srgb,var(--c) 12%,var(--panel)),var(--panel) 72%);border:1.5px solid var(--c);border-radius:10px;padding:12px 15px;cursor:pointer;position:relative;overflow:hidden;transition:transform .12s,box-shadow .12s}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--c);transition:height .12s}
.card:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--c),0 8px 22px rgba(0,0,0,.4)}
.card:hover::before{height:5px}
.card.activef{box-shadow:0 0 0 2px var(--accent)}
.card.leads{--c:var(--amber)}
.card.msgs{--c:var(--accent)}
.card.vm{--c:var(--purple)}
.card.cl{--c:#46c884}
.card.cb{--c:#ff9f45}
.chead{display:flex;justify-content:space-between;align-items:center;gap:8px}
.clabel{font-size:14.5px;letter-spacing:.2px;color:var(--text);font-weight:800;display:flex;align-items:center;gap:9px}
.cic{display:inline-flex;width:24px;height:24px;border-radius:7px;align-items:center;justify-content:center;font-size:13px;background:color-mix(in srgb,var(--c) 18%,transparent);transition:transform .12s;flex:0 0 auto}
.card:hover .cic{transform:scale(1.14)}
.ccount{font-size:26px;font-weight:800;line-height:1}
.card.leads .ccount{color:var(--amber)}
.card.msgs .ccount{color:var(--accent)}
.card.vm .ccount{color:var(--purple)}
.card.cl .ccount{color:#46c884}
.card.cb .ccount{color:#ff9f45}
.vr-missed{border-left:3px solid #e0556b;padding-left:9px}
/* Customer 360 */
.cp-360{background:none;border:1px solid var(--line);color:var(--accent);border-radius:7px;font-size:12px;font-weight:700;padding:3px 9px;cursor:pointer;margin-left:auto;transition:border-color .12s,color .12s}
.cp-360:hover{border-color:var(--accent);color:#cfe6ff}
.c360-head{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.c360-id div{font-size:14px;margin:3px 0}
.c360-flags{display:flex;gap:6px;flex-wrap:wrap;align-items:flex-start;max-width:55%}
.c360-flag{background:#23303d;color:#9ec5ff;border-radius:20px;padding:2px 10px;font-size:11.5px;font-weight:700;height:fit-content}
.c360-flag.bad{background:#3a2024;color:#ff9aa2}
.c360-flag.cust{background:#0f3a24;color:#7ee0a2}
.c360-tag{background:#2a2f36;color:var(--muted);border-radius:20px;padding:2px 10px;font-size:11.5px}
.c360-sec{margin:14px 0}
.c360-sh{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:7px}
.c360-order{font-size:14px;padding:6px 0;border-top:1px solid var(--line)}
.c360-row{display:flex;gap:10px;font-size:13px;padding:6px 0;border-top:1px solid var(--line)}
.c360-when{flex:0 0 104px;color:var(--muted);font-size:12px}
.c360-ch{flex:0 0 36px}
.c360-body{flex:1;min-width:0;word-break:break-word}
.c360-seen{margin-top:12px;font-size:12px}
/* Segments */
.seg-filters{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end;margin:12px 0;padding:12px 14px;background:var(--panel);border:1px solid var(--line);border-radius:10px}
.seg-filters label{display:flex;flex-direction:column;gap:3px;font-size:11.5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.seg-filters input[type=text],.seg-filters input[type=number],.seg-filters select{font:inherit;font-size:13px;background:#23262b;color:var(--text);border:1px solid var(--line);border-radius:7px;padding:6px 8px}
.seg-filters input[type=number]{width:66px}
.seg-filters .seg-ck{flex-direction:row;align-items:center;gap:6px;font-size:13px;color:var(--text);font-weight:400;text-transform:none;letter-spacing:0}
.seg-days{display:flex;align-items:center;gap:6px;font-weight:400;color:var(--muted);text-transform:none;letter-spacing:0}
.seg-note{margin:6px 2px 10px;font-size:13px}
.seg-row{display:flex;align-items:center;gap:10px;padding:8px 6px;border-top:1px solid var(--line);cursor:pointer}
.seg-row:hover{background:#1b1f25}
.seg-nm{flex:0 0 180px;font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seg-meta{flex:1;min-width:0;color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seg-flags{flex:0 0 auto;display:flex;gap:5px}
.seg-seen{flex:0 0 112px;text-align:right;font-size:12px}
.citems{margin-top:8px;font-size:13.5px}
.citem{padding:4px 0;border-top:1px solid var(--line);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.citem:hover{color:var(--text)}
.citem.none{cursor:default;color:var(--muted);opacity:.7}
.citem b{color:var(--text);font-weight:600}
@media (max-width:768px){
  .cards{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .card{min-width:78%;flex:0 0 auto}
}
.list-pane{width:440px;border-right:1px solid var(--line);display:flex;flex-direction:column;background:var(--panel)}
/* Conversations heading + source selectors share ONE compact row. */
.list-head{display:flex;align-items:center;gap:9px;padding:8px 12px;border-bottom:1px solid var(--line);font-weight:600}
.lh-title{flex:0 0 auto;font-weight:800;font-size:13.5px;white-space:nowrap;color:var(--text)}
.list-head .tabs{flex:1;min-width:0;display:flex;justify-content:flex-end;gap:2px;background:none;border-bottom:none}
.list-head #refresh{flex:0 0 auto}
.tabs{display:flex;border-bottom:1px solid var(--line);background:var(--panel)}
.list-head .tab{flex:0 0 auto;padding:5px 8px;font-size:12.5px}
.tab{flex:1;background:none;border:none;color:var(--muted);padding:11px 6px;font-size:14.5px;border-bottom:2px solid transparent;white-space:nowrap}
.tab:hover{color:var(--text)}
.tab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:700}
.tab .tcount{font-size:12.5px;opacity:.8}
.unb{display:inline-block;background:var(--bad);color:#fff;border-radius:10px;padding:0 6px;font-size:11px;font-weight:700;margin-left:2px}
.conv.unread{background:rgba(95,179,255,.06);box-shadow:inset 3px 0 0 var(--accent)}
.conv.unread .cname{font-weight:800;color:#fff}
.conv.unread .preview{color:var(--text)}
.conv.needs-callback{box-shadow:inset 3px 0 0 #e8a13a}
.conv.needs-callback.unread{box-shadow:inset 3px 0 0 #e8a13a}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:7px;vertical-align:middle}
.chip{display:inline-block;font-size:11px;font-weight:800;border-radius:999px;padding:2px 9px;margin-right:6px;vertical-align:middle}
.chip-ghl{background:#163a2a;color:#7ee0a8}
/* status filter underline tabs (variant B). Redundant with the top cards on
   desktop, so hidden there; shown on mobile where the cards scroll sideways. */
/* Filter chips , pills that live on the Conversations heading row (providers removed). Scroll sideways. */
.ftabs{display:flex;gap:6px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;background:none;border-bottom:none}
.ftabs::-webkit-scrollbar{display:none}
.ftab{flex:0 0 auto;background:var(--panel2);border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:5px 11px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
.ftab:hover{color:var(--text)}
.ftab.active{background:#15324d;color:var(--accent);border-color:#244a6e}
.conv-list{overflow-y:auto;flex:1}
.conv{padding:12px 16px;border-bottom:1px solid var(--line);cursor:pointer;position:relative}
.hidebtn{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:none;width:26px;height:26px;border-radius:6px;border:1px solid var(--line);background:var(--panel2);color:var(--muted);font-size:14px;cursor:pointer;line-height:1}
.hidebtn:hover{color:var(--bad);border-color:var(--bad)}
.conv:hover .hidebtn{display:block}
.conv:hover{background:var(--panel2)}
.conv.active{background:#15324d}
.conv .row1{display:flex;justify-content:space-between;gap:8px}
.conv .cname{font-weight:600}
.conv .ctime{font-size:13px;color:var(--muted);white-space:nowrap}
.conv .preview{color:var(--muted);font-size:15px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv .biz{margin-top:6px;font-size:13px}
.badge{display:inline-block;background:#15324d;color:var(--accent);border-radius:20px;padding:2px 9px;font-size:12.5px;font-weight:700}
.badge.unmatched{background:#3a2f12;color:#ffcc66}
.badge.callback{background:#b45309;color:#fff;letter-spacing:.3px}
/* thread-header business pill colored by carrier (matches the list pills) */
.badge.biz-ghl{background:#163a2a;color:#7ee0a8}
.badge.biz-twilio{background:#3d1d33;color:#f597d1}
/* business-location colors in the conversation list (owner 2026-06-04) */
.badge.bn-sod{background:#163a2a;color:#7ee0a8}
.badge.bn-bayou{background:#3a2a18;color:#d6ad7e}
.badge.bn-calc{background:#4a3012;color:#ffa64d}
.badge.bn-tangi{background:#15324d;color:#7ec8ff}
.badge.bn-mat{background:#2c2547;color:#bdaaee}
.mct{display:inline-block;border-radius:20px;padding:1px 7px;font-size:11px;font-weight:700;margin-left:4px}
.mct-sent{background:#0f3a24;color:#7ee0a2}
.mct-skip{background:#3a2f12;color:#ffcc66}

/* thread */
.thread-pane{flex:1;display:flex;flex-direction:column;min-width:0}
.empty{display:flex;align-items:center;justify-content:center;height:100%;color:var(--muted)}
.thread{display:flex;flex-direction:column;height:100%;position:relative;min-width:0}
.thread-head{display:flex;justify-content:space-between;align-items:flex-start;padding:14px 20px;border-bottom:1px solid var(--line);background:var(--panel)}
.th-customer{flex:1;min-width:0}
.th-id{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.th-left{min-width:0}
.th-right{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right;max-width:50%}
.th-right .th-line{text-align:right}
.th-namerow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.th-name{font-weight:700;font-size:19px}
.th-line{font-size:13px}
.th-phone{font-size:14px;margin-top:2px}
.th-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:9px}
.call-btn{display:inline-block;background:#163a2a;color:var(--green);border:1px solid #2a5a3c;border-radius:20px;padding:5px 16px;font-size:14px;font-weight:700;cursor:pointer}
.call-btn:hover{background:#1c4a35}
.ai-toggle{display:inline-block;background:#163a2a;color:var(--green);border:1px solid #2a5a3c;border-radius:20px;padding:4px 14px;font-size:13px;font-weight:700;cursor:pointer}
.ai-toggle.off{background:#3a1a18;color:var(--bad);border-color:#5a2a28}
.ai-toggle:disabled{opacity:.5;cursor:default}
.messages{flex:1;overflow-y:auto;overflow-x:hidden;padding:18px 20px;display:flex;flex-direction:column;gap:13px;min-width:0}
.msg{max-width:min(64%,560px);min-width:0;padding:9px 13px;border-radius:12px;font-size:16px;line-height:1.42;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
.msg.in{align-self:flex-start;background:var(--panel2);border:1px solid var(--line)}
.msg.out{align-self:flex-end;background:#15324d;color:#eaf4ff}
.msg .meta{display:block;font-size:11.5px;color:var(--muted);margin-top:4px}
.reply{display:flex;gap:10px;padding:14px 20px;border-top:1px solid var(--line);background:var(--panel);min-width:0}
.reply textarea{flex:1;min-width:0;resize:vertical;padding:11px 12px;border-radius:8px;border:1px solid var(--line);background:#0e1013;color:var(--text);font-size:16px;font-family:inherit}
.reply button{padding:0 22px;border-radius:8px;border:none;background:var(--accent);color:#04121f;font-weight:700}
.reply button:disabled{opacity:.5;cursor:default}
.send-status{padding:0 20px 12px;font-size:14px;min-height:20px}
.send-status.ok{color:var(--green)}
.send-status.warn{color:#ffcf66}
.send-status.bad{color:var(--bad)}

/* mobile back button (hidden on desktop) */
.back-btn{display:none;background:none;border:none;color:var(--accent);font-size:32px;line-height:1;padding:0 14px 0 0;margin-top:-2px}

/* phones: stack to one pane, slide the thread over the list */
@media (max-width:768px){
  .layout{position:relative}
  .list-pane{width:100%;border-right:none}
  .thread-pane{position:absolute;inset:0;background:var(--bg);transform:translateX(100%);transition:transform .22s ease;z-index:5}
  body.thread-open .thread-pane{transform:translateX(0)}
  .back-btn{display:block}
  .msg{max-width:84%}
  .reply{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  .tab{font-size:14px}
  .cpanel{width:100%}
}

/* voicemail modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:50;padding:20px}
.modal-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;width:560px;max-width:100%;max-height:85vh;display:flex;flex-direction:column;overflow:hidden}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--panel2)}
.modal-head b{font-size:18px}
.modal-close{background:none;border:none;color:var(--muted);font-size:26px;cursor:pointer;line-height:1}
.modal-body{padding:16px 18px;overflow-y:auto}
.vm-meta .row,.vm-meta>div{display:flex;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:15px}
.vm-meta>div>span{flex:0 0 96px;color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:.3px;padding-top:2px}
.vm-transcript{margin-top:14px;background:#0e1013;border:1px solid var(--line);border-radius:8px;padding:14px;font-size:16px;line-height:1.6;white-space:pre-wrap}
.vm-actions{margin-top:14px}
.vm-actions a{display:inline-block;background:var(--accent);color:#04121f;font-weight:700;padding:9px 16px;border-radius:8px;text-decoration:none}
.vm-row{padding:11px 6px;border-bottom:1px solid var(--line);cursor:pointer}
.vm-row:hover{background:var(--panel2)}
.vr-top{display:flex;justify-content:space-between}
.vr-text{color:var(--muted);font-size:14.5px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* full-width top tab bar */
.topnav{display:flex;align-items:stretch;background:var(--panel);border-bottom:1px solid var(--line)}
.topnav .tab{flex:1;background:none;border:none;color:var(--muted);padding:14px 8px;font-size:16.5px;border-bottom:3px solid transparent;cursor:pointer;text-align:center}
.topnav .tab:hover{color:var(--text)}
.topnav .tab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:700;background:rgba(95,179,255,.05)}
.topnav .tcount{font-size:13px;opacity:.85}
.topnav .rfs{flex:0 0 auto;background:none;border:none;color:var(--accent);font-size:21px;padding:0 18px;cursor:pointer}

/* clickable name + contact details panel */
.th-name{cursor:pointer}
.th-name:hover{text-decoration:underline}
.cpanel{position:absolute;top:0;right:0;bottom:0;width:360px;max-width:100%;background:var(--panel);border-left:1px solid var(--line);transform:translateX(100%);transition:transform .22s ease;z-index:10;overflow-y:auto;padding:18px 20px}
.thread.show-contact .cpanel{transform:translateX(0)}
.cp-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.cp-close{background:none;border:none;color:var(--muted);font-size:28px;cursor:pointer;line-height:1}
.cp-name{font-size:21px;font-weight:800;margin-bottom:16px;color:#fff}
.cp-rows .row{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:15.5px}
.cp-rows .row span{flex:0 0 92px;color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:.3px;padding-top:2px}
.cp-rows .row div{flex:1}
.cp-actions-head{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.3px;font-weight:800;margin:14px 0 8px}
.cp-actions-head.hidden{display:none}
.cp-actions{display:flex;gap:7px;flex-wrap:wrap}
.cp-act{background:#11161a;border:1px solid var(--line);color:#cdd8e0;border-radius:7px;padding:7px 11px;font-size:12.5px;font-weight:700;cursor:pointer}
.cp-act:hover{color:#fff}
.cp-act.on{background:#163b5c;border-color:#2c6ea5;color:#e7f5ff}

/* call activity banner + inline call/mark timeline events */
.call-activity{padding:7px 14px;font-size:13px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02);white-space:normal;overflow:hidden;overflow-wrap:anywhere;line-height:1.42}
.call-activity.hidden{display:none}
.call-activity .ca-yes{color:#46c884;font-weight:700}
.call-activity .ca-no{color:var(--muted)}
.call-activity .ca-sum{color:var(--muted);font-weight:400;margin-left:6px;border-left:1px solid var(--line);padding-left:8px}
.call-activity .ca-sus{font-weight:800;border-radius:5px;padding:1px 8px;margin-right:4px}
.call-activity .ca-sus.t1{background:#4a3a12;color:#ffc24d;border:1px solid #7a5e18}
.call-activity .ca-sus.t2{background:#4a1212;color:#ff8f8f;border:1px solid #7a2020}
.call-activity .ca-soft{color:var(--muted);font-weight:600;margin-right:4px}
.tl-event{align-self:center;max-width:90%;min-width:0;margin:6px auto;padding:5px 12px;border-radius:14px;font-size:12.5px;display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;border:1px solid var(--line);overflow-wrap:anywhere}
.tl-event.call{background:rgba(70,200,132,.10);color:#9be7c0}
.tl-event.mark{background:rgba(120,160,255,.10);color:#b9caff}
.tl-event .meta{color:var(--muted);font-size:11px}

/* Desktop only, and ONLY while the contact/notes panel is open: shift the messages + reply left so the
   panel doesn't overlap the bubbles or push them off-screen. The default (panel closed) view is unchanged.
   The panel is position:absolute full-height, so it stays pinned while the conversation scrolls. */
@media (min-width:769px){
  .thread.show-contact .messages,.thread.show-contact .reply{padding-right:380px}
}
.vm-actions .open-hist{color:#7fb0ff}
/* call-log interaction notes (additive; changes no existing element) */
.vm-actions a.cl-note,.vm-actions a.cl-research{background:transparent;border:1px solid var(--line);color:var(--accent);font-weight:600}
.vm-actions a.cl-note:hover,.vm-actions a.cl-research:hover{border-color:var(--accent)}
.cl-flag{color:var(--bad);font-weight:700}
.cl-notes{margin-top:10px;display:none}
.vm-row.noteopen .cl-notes{display:block}
.cl-note-item{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin-bottom:7px;font-size:13.5px}
.cl-note-item.ai{border-left:3px solid var(--amber)}
.cl-note-item .m{color:var(--muted);font-size:11.5px;margin-top:3px}
.cl-notes textarea{width:100%;background:#0e1013;color:var(--text);border:1px solid var(--line);border-radius:8px;padding:10px 11px;font:inherit;font-size:15px;resize:vertical;min-height:48px}
.cl-save{margin-top:7px;display:inline-block;background:var(--accent);color:#04121f;font-weight:700;padding:8px 15px;border-radius:8px;border:none;cursor:pointer}
.call-btn.active{background:rgba(70,200,132,.18);color:#9be7c0;border-color:rgba(70,200,132,.4)}
.call-btn.danger-on{background:rgba(220,70,70,.20);color:#ffb4b4;border-color:rgba(220,70,70,.45)}
/* distinct color per thread action button (owner 2026-06-04): Call green, History blue, Mark Called amber, Flag Spam neutral -> red when flagged */
#history-btn{background:#152f4d;color:#8ec6ff;border-color:#2a4a6a}
#history-btn:hover{background:#1c3d63}
#mark-called-btn{background:#3a2f12;color:#ffcc66;border-color:#5a4520}
#mark-called-btn:hover{background:#4a3c18}
#mark-called-btn.active{background:rgba(240,195,93,.22);color:#ffd97a;border-color:rgba(240,195,93,.5)}
#flag-spam-btn{background:#262d34;color:#cbd9e4;border-color:#3a4650}
#flag-spam-btn:hover{background:#2f3741}
#flag-spam-btn.danger-on{background:rgba(220,70,70,.22);color:#ffb4b4;border-color:rgba(220,70,70,.5)}
.vr-top .open-contact{color:inherit;text-decoration:none;cursor:pointer}
.vr-top .open-contact:hover{text-decoration:underline}
/* SLA "unanswered" pill (element from CDX mockups) */
.sla-pill{display:inline-block;font-size:11px;font-weight:800;padding:1px 7px;border-radius:999px;margin-left:4px;vertical-align:middle}
.sla-pill.green{background:#173e2b;color:#7dde9a}
.sla-pill.amber{background:#493817;color:#f0c35d}
.sla-pill.red{background:#4e2528;color:#ff8d8d}

/* ===== Hot Leads (AI purchase-intent) , card B + chip C + refined Look 1 ===== */
.card.hot{flex:1.4;--c:#ff6a3d}
.card.hot .clabel{color:#ffb59c;font-weight:800}
.card.hot .ccount{color:#ff6a3d}
.card.hot .citem .hl-sc{color:var(--green);font-weight:900;margin-right:2px}
.card.hot .citem .hl-sc.warm{color:#f0c35d}
.ftab.fire{color:#ff9a78}
.ftab.fire.active{background:#3a2014;color:#ff8a66;border-color:#5a3420}
.hl-row{display:flex;gap:12px;align-items:flex-start;padding:12px 4px;border-bottom:1px solid var(--line)}
.hl-rank{font-size:14px;font-weight:900;color:#ff6a3d;min-width:18px;padding-top:2px}
.hl-main{flex:1;min-width:0}
.hl-line1{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.hl-nm{font-weight:800;font-size:16px}
.hl-score{font-weight:900;font-size:18px}
.hl-biz{color:var(--muted);font-size:13px;margin-top:3px}
.hl-age{color:var(--muted);font-size:12px;margin-top:3px;letter-spacing:.2px}
.hl-age b{color:#e7c14b;font-weight:700}
.hl-age-sm{color:var(--muted);font-size:11px;margin-left:4px}
.hl-why{font-size:14px;margin-top:5px;color:#d4dde4}
.hl-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}
.hl-tags .tg{font-size:12px;font-weight:700;padding:3px 9px;border-radius:6px;background:#22303c;color:#9ed5ff}
.hl-open{background:var(--accent);color:#06131d;border:none;border-radius:7px;padding:8px 15px;font-weight:800;font-size:13px;cursor:pointer;white-space:nowrap;align-self:center}
/* Richer HOT (red + orange glow) / WARM (amber glow) so they read distinct from the
   red SLA time pill. Score is a SEPARATE chip beside the pill, colored by value. */
.pill.hot{background:#e23217;color:#fff;font-size:11px;font-weight:900;padding:2px 9px;border-radius:999px;box-shadow:0 0 10px rgba(255,108,40,.85),0 0 3px rgba(255,150,80,.95);text-shadow:0 0 5px rgba(255,170,100,.6)}
.pill.warm{background:#e0911f;color:#3a2400;font-size:11px;font-weight:900;padding:2px 9px;border-radius:999px;box-shadow:0 0 10px rgba(245,180,70,.7)}

/* Hot/Warm pill + standalone score in the conversation list */
.row1 .conv-pill{font-size:10px;font-weight:900;padding:1px 7px;margin-left:7px;border-radius:999px;vertical-align:middle}
.row1 .conv-score{font-size:11.5px;font-weight:900;margin-left:5px;vertical-align:middle}
/* "what they want" text in the Hot Leads card preview */
.card.hot .citem .hl-want{color:#cfe0ec;font-weight:600}

/* ===================== WORKSPACE (pipeline / follow-up / calendar) ===================== */
.workspace{height:100%;display:flex;flex-direction:column;min-height:0}
.ws-tabs{display:flex;flex-wrap:wrap;gap:1px 4px;border-bottom:1px solid var(--line);padding:3px 12px 0;background:#121519;flex-shrink:0}
.ws-tab{padding:9px 13px;font-size:13px;font-weight:800;color:var(--muted);border:none;background:none;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap}
.ws-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.ws-tab.ws-hotx.active{color:#ff8a5c;border-bottom-color:#e23217}
.ws-view{display:none;flex:1;min-height:0;overflow:auto;padding:16px 18px}
.ws-view.active{display:block}
.ws-vs{color:var(--muted);font-size:13px;margin:0 0 14px}
/* pipeline kanban */
.kan{display:flex;gap:10px;min-height:380px;overflow-x:auto;padding-bottom:4px}
.kcol{flex:1 0 150px;background:var(--panel2);border-radius:9px;padding:9px;min-width:0;display:flex;flex-direction:column}
.kcol.drop{outline:2px dashed var(--accent);outline-offset:-3px}
.kh{font-size:12.5px;font-weight:800;color:#cfe0ec;padding:3px 4px 9px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);margin-bottom:4px}
.kh .kc{color:var(--muted);font-weight:700}
.kh .kadd{background:#2a2e34;border:none;color:var(--muted);border-radius:5px;width:22px;height:22px;font-size:15px;cursor:pointer;line-height:1}
.kh .kadd:hover{color:var(--green)}
.kcard{background:var(--panel);border-radius:7px;border-left:3px solid var(--accent);padding:8px 9px;margin-top:8px;cursor:grab}
.kcard:active{cursor:grabbing}.kcard.drag{opacity:.4}
.kcard.h{border-left-color:#e23217}.kcard.w{border-left-color:#e0911f}
.kcard .kn{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kcard .km{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.kcard .kv{font-size:12px;font-weight:800;color:var(--green);margin-top:3px}
.kcard .na{font-size:10.5px;color:#ff9a9a;margin-top:3px;font-weight:700}
.kcard .krow{display:flex;gap:5px;align-items:center;margin-top:7px}
.kcard .naBtn{font-size:12px;background:#2a2e34;border:none;color:var(--muted);border-radius:5px;padding:3px 8px;cursor:pointer;flex-shrink:0}
.kcard .naBtn:hover{color:#ff9a9a}
.kcard{position:relative}
.kcard .kn{padding-right:16px}
.kcard .kdel{position:absolute;top:3px;right:3px;width:18px;height:18px;line-height:1;text-align:center;border:none;background:transparent;color:var(--muted);border-radius:4px;cursor:pointer;font-size:16px;font-weight:700;opacity:.45;padding:0}
.kcard .kdel:hover{background:#4a1212;color:#ff8f8f;opacity:1}
.kcard .statusSel{flex:1;min-width:0;font-size:11px;background:#0f1113;border:1px solid var(--line);color:var(--text);border-radius:5px;padding:4px 5px;cursor:pointer}
.removez{margin-top:14px;border:2px dashed var(--line);border-radius:9px;padding:14px;text-align:center;color:var(--muted);font-size:13px}
.removez.on{border-color:#e23217;color:#ff8a5c;background:#241310}
.archtog{margin-top:12px;background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:7px;padding:9px 13px;font-weight:700;cursor:pointer}
.archlist{margin-top:8px;background:var(--panel2);border-radius:8px;padding:2px 10px}
.archlist.hidden{display:none}
.archrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--line);font-size:13px}
.archrow .restore{background:var(--accent);color:#06131d;border:none;border-radius:6px;padding:5px 12px;font-weight:800;cursor:pointer}
/* follow-up */
.frow{display:flex;align-items:center;gap:14px;padding:12px 8px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.fmain{flex:1;min-width:200px}.fmain .fn{font-weight:800}.fmain .fm{font-size:12.5px;color:var(--muted)}
.ftag{font-size:10.5px;font-weight:800;color:#e0c35d;background:#3a2f17;border-radius:999px;padding:1px 9px;margin-left:5px;vertical-align:middle}
.fnext{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:7px}
.fnext .ntdate{background:#0f1113;border:1px solid var(--line);color:var(--text);border-radius:6px;padding:5px 8px;font:inherit;font-size:13px;cursor:pointer}
.facts{display:flex;gap:7px}
.fbtn{background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:6px;padding:7px 11px;font-weight:700;font-size:12.5px;cursor:pointer}
.fbtn.try:hover{border-color:var(--green)}.fbtn.back:hover{border-color:var(--accent)}.fbtn.arch:hover{border-color:#e23217}
/* calendar */
.calbar{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.calbar button{background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:7px;padding:6px 13px;cursor:pointer;font-weight:700;font-size:16px}
.calbar .mlabel{font-size:17px;font-weight:800}
.cgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.dow{font-size:11.5px;color:var(--muted);font-weight:700;text-align:center;padding:2px 0}
.cell{background:var(--panel2);border-radius:7px;min-height:84px;padding:6px 7px;cursor:pointer;border:1px solid transparent}
.cell:hover{border-color:var(--line)}.cell.blank{background:transparent;cursor:default}
.cell.today{outline:2px solid var(--accent);outline-offset:-2px}
.cell.drop{border-color:var(--accent);background:#1c2630}
.cell .dn{font-size:12px;font-weight:800;color:var(--muted)}.cell.today .dn{color:var(--accent)}
.evt{background:var(--panel);border-left:3px solid var(--green);border-radius:4px;padding:3px 6px;margin-top:4px;font-size:10.5px;cursor:grab;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.evt.inst{border-left-color:#e0911f}.evt .ec{font-weight:800}
/* workspace modals */
.ws-ov{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:60}
.ws-ov.show{display:flex}
.ws-mod{background:var(--panel);border:1px solid var(--line);border-radius:12px;width:460px;max-width:94vw;padding:18px 20px;max-height:92vh;overflow:auto}
.ws-mod h3{margin:0 0 2px;font-size:18px}.ws-md{color:var(--muted);font-size:12.5px;margin:0 0 14px}
.ws-mod label{display:block;font-size:12px;color:var(--muted);margin:10px 0 3px;font-weight:600}
.ws-mod input,.ws-mod textarea,.ws-mod select{width:100%;background:#0f1113;border:1px solid var(--line);color:var(--text);border-radius:7px;padding:9px 10px;font:inherit}
.ws-mrow{display:flex;gap:10px}.ws-mrow>div{flex:1}
.ws-mact{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
.ws-mact button{border:none;border-radius:7px;padding:9px 16px;font-weight:800;cursor:pointer}
.ws-mact .ws-save{background:var(--accent);color:#06131d}.ws-mact .ws-cancel{background:var(--panel2);color:var(--text)}
.ws-rbtns{display:flex;flex-direction:column;gap:8px}
.ws-rbtns button{background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:7px;padding:10px 12px;font-weight:700;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:2px}
.ws-rbtns button:hover{border-color:var(--accent)}
.ws-rbtns button span{font-weight:500;font-size:11.5px;color:var(--muted)}

/* thread nav strip , back + workspace tab links (so you can return after opening a contact) */
.th-nav{display:flex;align-items:center;gap:6px;padding:8px 14px;border-bottom:1px solid var(--line);background:#121519;flex-wrap:wrap}
.th-nav .back-btn{background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:7px;padding:6px 12px;font-weight:800;font-size:13px;cursor:pointer;width:auto;height:auto}
.th-nav .back-btn:hover{border-color:var(--accent);color:var(--accent)}
.th-navsep{width:1px;height:20px;background:var(--line);margin:0 4px}
.th-navlink{background:none;border:none;color:var(--muted);border-radius:7px;padding:6px 11px;font-weight:700;font-size:13px;cursor:pointer}
.th-navlink:hover{color:var(--text);background:var(--panel2)}
.th-navlink.th-hotx{color:#ff9a78}.th-navlink.th-hotx:hover{color:#ff8a5c}
/* pipeline selector bar */
.ws-pipebar{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.ws-pipebar label{font-size:12.5px;color:var(--muted);font-weight:700}
.ws-pipebar select{background:#0f1113;border:1px solid var(--line);color:var(--text);border-radius:7px;padding:7px 10px;font:inherit;font-weight:700;font-size:13.5px;cursor:pointer}
.ws-pipebar .pnew{margin-left:auto;background:var(--panel2);border:1px solid var(--line);color:var(--muted);border-radius:7px;padding:6px 11px;font-weight:700;font-size:12.5px;cursor:pointer}

/* back arrow next to the contact in an open conversation */
.th-back{background:none;border:none;color:var(--muted);font-size:24px;font-weight:700;line-height:1;cursor:pointer;flex-shrink:0;width:auto;height:auto;padding:0;margin-right:8px}
.th-back:hover{color:var(--accent)}
/* hot-lead row: whole row clickable + inline location */
.hl-click{cursor:pointer;border-radius:8px}
.hl-click:hover{background:var(--panel2)}
.hl-loc{font-size:12px;color:var(--muted);white-space:nowrap}

/* conversation status dropdown (next to the action pills) */
.th-status{background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:7px;padding:7px 9px;font-size:13.5px;font-weight:600;cursor:pointer;max-width:200px}
.th-status:hover{border-color:var(--accent)}

/* ===== Opportunities & Bids ===== */
.card.bids{border-left-color:#e0a23b}
.card.bids .ccount{color:#e0a23b}
.bidbar{display:flex;align-items:center;gap:14px;margin:6px 0 12px;flex-wrap:wrap}
.bid-showpassed{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);cursor:pointer;margin-left:auto}
.bid-showpassed input{cursor:pointer}
.ws-tab.ws-bidsx.active{color:#e0a23b}
/* due-date urgency chip */
.bid-due{display:inline-block;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:20px;white-space:nowrap;text-transform:uppercase;letter-spacing:.3px}
.bd-urgent{background:#3a1414;color:#ff8a80;border:1px solid #6b1f1f}
.bd-soon{background:#3a2c12;color:#ffcc66;border:1px solid #6b541f}
.bd-ok{background:#13301c;color:#7ee787;border:1px solid #1f5a33}
.bd-closed{background:#26282c;color:#8a929c;border:1px solid #3a3f47}
.bd-none{background:#26282c;color:#8a929c;border:1px solid #3a3f47}
/* bid row */
.bid-row{display:flex;background:var(--panel2);border:1px solid var(--line);border-left:4px solid var(--line);border-radius:9px;padding:11px 14px;margin-bottom:9px;transition:border-color .12s,box-shadow .12s}
.bid-row:hover{box-shadow:0 4px 16px rgba(0,0,0,.35)}
.bid-row.bid-clickable{cursor:pointer}
.bid-detail{display:none;margin-top:9px;padding-top:9px;border-top:1px solid var(--line);font-size:13px}
.bid-row.bid-open .bid-detail{display:block}
.bid-detail .bd-d{margin:3px 0}
.bid-detail a{color:#4493f8;word-break:break-all}
.cb-actions{display:flex;gap:8px;align-items:center;margin-top:9px;flex-wrap:wrap}
.cb-actions button{background:var(--panel2);color:inherit;border:1px solid var(--line);border-radius:6px;padding:6px 12px;cursor:pointer;font-size:13px;transition:border-color .12s}
.cb-actions button:hover{border-color:#4493f8}
.cb-actions .cb-call{background:#2563eb;color:#fff;border-color:#2563eb}
.cb-actions .cb-status{font-size:12px;margin-left:4px}
.bid-row.bid-urgent{border-left-color:#ff7b72}
.bid-row.bid-soon{border-left-color:#ffcc66}
.bid-row.bid-ok{border-left-color:#7ee787}
.bid-row.bid-closed,.bid-row.bid-passed,.bid-row.bid-lost{opacity:.6}
.bid-main{flex:1;min-width:0}
.bid-l1{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:5px}
.bid-cat{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:#04121f;background:#e0a23b;border-radius:5px;padding:2px 7px}
.bid-score{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}
.bid-stpill{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;padding:2px 7px;border-radius:5px;background:var(--panel);border:1px solid var(--line);color:var(--muted)}
.st-interested{color:#7ee787;border-color:#1f5a33}
.st-bidding{color:#ffcc66;border-color:#6b541f}
.st-submitted,.st-won{color:#5fb3ff;border-color:#234a66}
.bid-title{font-size:15.5px;font-weight:600;color:var(--text);line-height:1.35;margin-bottom:3px}
.bid-meta{font-size:13px;color:var(--muted);margin-bottom:4px}
.bid-why{font-size:13.5px;color:var(--text);opacity:.92;margin-bottom:6px}
.bid-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.bid-tags .tg{font-size:11.5px;background:var(--panel);border:1px solid var(--line);color:var(--muted);border-radius:5px;padding:2px 8px}
.bid-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.bidStatus{background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:7px;padding:6px 9px;font-size:13px;font-weight:600;cursor:pointer}
.bidStatus:hover{border-color:var(--accent)}
.bid-link{font-size:13px;color:var(--accent);text-decoration:none;font-weight:600}
.bid-link:hover{text-decoration:underline}
.bid-loc{font-size:12.5px;font-weight:600;color:#cfe0ff;background:#1c2738;border:1px solid #2c3b52;border-radius:5px;padding:2px 8px;white-space:nowrap;max-width:240px;overflow:hidden;text-overflow:ellipsis}
/* Bids & Opportunities: topbar button badge + Matched/General sub-tabs */
.bids-btn{font-size:17px}
.bids-count{background:#e0a23b;color:#0e1013}
.bidsub{display:flex;gap:8px;margin:2px 0 14px}
.bidsub-t{background:var(--panel2);border:1px solid var(--line);color:var(--muted);font-size:13.5px;font-weight:700;padding:7px 14px;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:7px}
.bidsub-t:hover{color:var(--text)}
.bidsub-t.active{background:#2a2410;border-color:#e0a23b;color:#e0a23b}
.bidsub-t .tcount{font-size:12px;opacity:.85;background:rgba(255,255,255,.08);border-radius:10px;padding:0 7px;min-width:18px;text-align:center}
.bidsub-t.active .tcount{background:rgba(224,162,59,.2)}
/* Bids pipeline (Kanban projection) cards */
.kcard.bidk{border-left:3px solid var(--line)}
.kcard.bidk.bidk-urgent{border-left-color:#ff7b72}
.kcard.bidk.bidk-soon{border-left-color:#ffcc66}
.kcard.bidk.bidk-ok{border-left-color:#7ee787}
.bidk-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:5px}
.bidk-tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;padding:1px 6px;border-radius:4px;background:#2a2410;color:#e0a23b;border:1px solid #5a4a18}
.bidk-tag.gen{background:#1c2738;color:#cfe0ff;border-color:#2c3b52}
.bid-score.sm{font-size:14px;margin-left:auto}
.bid-link.sm{font-size:12px}
.kcard .bidkSel{flex:1;background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:6px;padding:5px 7px;font-size:12px;cursor:pointer}
.kcard .bidkSel:hover{border-color:var(--accent)}
/* Bids pipeline: Completed status + Lost/Not-interested drop zone */
.st-completed{color:#7ee787;border-color:#1f5a33}
.bidremovez{margin-top:12px;border:1.5px dashed #6b1f1f;color:#ff8a80;background:#2a1414;border-radius:9px;padding:12px;text-align:center;font-size:13px;font-weight:700}
.bidremovez.drop{background:#3a1414;outline:2px dashed #ff7b72;outline-offset:-4px}
/* Bid entries shown inside Hot Leads */
.pill.bidpill{background:#2a2410;color:#e0a23b;border:1px solid #5a4a18}

/* Per-contact notes (team + AI shared) */
.cp-notes{margin:12px 0 4px;border-top:1px solid var(--line);padding-top:11px}
.cpn-head{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:9px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.cpn-sum{background:none;border:1px solid var(--line);color:var(--accent);border-radius:6px;padding:3px 9px;font:inherit;font-size:11px;font-weight:800;text-transform:none;letter-spacing:0;cursor:pointer;white-space:nowrap;transition:border-color .12s,color .12s}
.cpn-sum:hover{border-color:var(--accent)}
.cpn-sum:disabled{opacity:.6;cursor:default}
.cpn-item.cpn-ai{background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 12%,var(--panel2)),var(--panel2) 72%);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.cpn-aihd{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--accent);margin-bottom:4px}
.cpn-oclabel{font-size:11px;color:var(--muted);margin:0 0 6px}
.cpn-outcomes{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:11px}
.cpn-oc{background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:999px;padding:5px 11px;font:inherit;font-size:11.5px;font-weight:700;cursor:pointer;transition:background .12s,border-color .12s,color .12s}
.cpn-oc:hover{border-color:var(--accent);color:var(--accent)}
.cpn-oc.saving{opacity:.55;cursor:default}
.cpn-item.cpn-tr{background:var(--panel)}
.cpn-trhd{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:4px}
.cpn-trbody{max-height:140px;overflow:auto;font-size:12.5px;line-height:1.5;color:#cdd3da}
.call-btn.cbtn-notes{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));color:var(--accent);font-weight:800}
.call-btn.cbtn-notes:hover{background:color-mix(in srgb,var(--accent) 14%,transparent)}
/* Repeat caller, no human callback -- surfaced loudest */
.pill.repeat-call{background:#4a1212;color:#ff8f8f;border:1px solid #7a2020;font-weight:800}
.hl-row.repeat-row{border-left:3px solid var(--bad);background:linear-gradient(90deg,rgba(255,123,114,.08),transparent 60%)}
.citem.repeat{color:var(--text)}
.ci-repeat{display:inline-block;background:#4a1212;color:#ff8f8f;border-radius:5px;padding:0 6px;font-size:11px;font-weight:800;margin-right:3px}
.cpn-sub{font-weight:600;text-transform:none;letter-spacing:0;opacity:.7;font-size:11px}
.cpn-list{display:flex;flex-direction:column;gap:6px;margin-bottom:9px;max-height:240px;overflow:auto}
.cpn-list.muted{font-size:12.5px;color:var(--muted)}
.cpn-item{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:7px 9px}
.cpn-body{font-size:13px;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.cpn-meta{font-size:10.5px;color:var(--muted);margin-top:4px}
.cpn-add{display:flex;flex-direction:column;gap:7px}
#cpn-input{background:#0f1113;color:var(--text);border:1px solid #2a2e34;border-radius:7px;padding:8px 9px;font:inherit;font-size:13px;resize:vertical}
#cpn-input:focus{outline:none;border-color:var(--accent)}
.cpn-save{align-self:flex-end;background:var(--accent);color:#06121b;border:none;border-radius:7px;padding:7px 15px;font:inherit;font-weight:800;font-size:12.5px;cursor:pointer;transition:filter .12s}
.cpn-save:hover{filter:brightness(1.08)}
.cpn-save:disabled{opacity:.6;cursor:default}

/* ===================== Mobile foundations (Phase 1, 2026-06-26) =====================
   Bottom tab bar + More sheet + workspace-reachable-on-mobile + bigger touch targets.
   All scoped to <=768px so desktop is unchanged (full parity). */
.botnav{display:none}
@media (max-width:768px){
  /* bottom tab bar , the primary mobile navigation */
  .botnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--panel);
    border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
  .bn{flex:1;background:none;border:none;color:var(--muted);display:flex;flex-direction:column;
    align-items:center;gap:3px;padding:7px 2px 6px;font-size:11px;font-weight:700;min-height:54px;cursor:pointer}
  .bn .bn-ic{font-size:21px;line-height:1}
  .bn.active{color:var(--accent)}
  /* the workspace pane (hot leads / pipeline / dashboard) slides in for workspace destinations,
     the same way the thread does , so the workspace is reachable on a phone at all */
  body.ws-open .thread-pane{transform:translateX(0)}
  /* inside an open conversation, hide the bottom bar (the thread is full-screen with its own back + composer) */
  body.thread-open .botnav{display:none}
  /* keep scrollable content clear of the fixed bottom bar */
  .conv-list{padding-bottom:64px}
  .ws-view{padding-bottom:66px}
  /* the 11 workspace tabs scroll sideways instead of overflowing the screen */
  .ws-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;white-space:nowrap}
  .ws-tab{flex:0 0 auto;white-space:nowrap}
  /* the desktop top-nav clutter moves to the bottom bar + More sheet */
  .topbar .docs-nav{display:none}
  #nav-quote-btn{display:none}
  /* bigger touch targets (>=44px) on the controls the team taps all day */
  .call-btn,.ai-toggle{padding:10px 16px;font-size:14px;margin-top:6px}
  .tab{padding:14px 6px;font-size:14px}
  .ftab{padding:12px 14px;font-size:13px}
  .iconbtn{min-width:42px;min-height:42px}
  .th-status{min-height:42px}

  /* "More" bottom sheet */
  .sheet-ov{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:60}
  .sheet-ov.hidden{display:none}
  .sheet{position:absolute;left:0;right:0;bottom:0;background:var(--panel);
    border-top-left-radius:18px;border-top-right-radius:18px;
    padding:8px 16px calc(20px + env(safe-area-inset-bottom));max-height:84vh;overflow-y:auto}
  .sheet-grip{width:42px;height:4px;border-radius:2px;background:var(--line);margin:6px auto 12px}
  .sheet-h{font-weight:800;font-size:16px;margin:0 2px 12px}
  .sheet-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
  .sh-item{background:var(--panel2);border:1px solid var(--line);border-radius:12px;color:var(--text);
    display:flex;flex-direction:column;align-items:center;gap:6px;padding:13px 4px;font-size:11px;
    font-weight:700;min-height:66px;cursor:pointer;text-align:center}
  .sh-item span{font-size:22px}
  .sheet-links{display:flex;flex-direction:column;border-top:1px solid var(--line);padding-top:8px;margin-bottom:10px}
  .sheet-links a{padding:13px 4px;color:var(--accent);font-weight:600;border-bottom:1px solid var(--line)}
  .sheet-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:12px}
  .sheet-signout{background:#3a1a18;color:var(--bad);border:1px solid #5a2a28;border-radius:9px;padding:11px 20px;font-weight:700}
}

/* ===================== Mobile reflow (Phase 2, 2026-06-26) =====================
   Same features, resized to fit a phone. No new functionality , each section just reflows. */
@media (max-width:768px){
  /* THREAD HEADER , the desktop row of ~10 buttons reflows: name + phone full-width, then the action
     buttons wrap into a tidy touch-sized row, then the business/AI-toggle row below a divider. */
  .thread-head{flex-direction:column;align-items:stretch;gap:8px;padding:12px 14px}
  .th-customer{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
  .th-namerow{flex:1 1 100%;flex-wrap:wrap}
  .th-phone{flex:1 1 100%;margin:0}
  .th-customer .call-btn,.th-customer .th-status,.th-customer #contact-toggle{margin-top:0}
  .th-status{flex:0 0 auto}
  .th-tag{text-align:left;display:flex;flex-wrap:wrap;align-items:center;gap:8px;border-top:1px solid var(--line);padding-top:8px}
  .th-tag .muted{display:inline-block;margin-top:0}
  .ai-toggle{margin-top:0;margin-left:auto}

  /* WORKSPACE MODAL rows reflow from 2-column to stacked on a phone */
  .ws-mrow{flex-direction:column;gap:0}
  .ws-mod{width:100% !important;max-width:94vw}
}
/* HIDE-CONVERSATION button: touch has no hover, so a hover-only control is invisible. Show it on any
   coarse-pointer device (this is the resize-equivalent for an interaction that desktop gated behind hover). */
@media (pointer:coarse){
  .conv .hidebtn{display:block}
}

/* ===================== Mobile reflow (Phase 3, 2026-06-26) =====================
   The last sections that did not resize cleanly. Same features, fit to the phone. */
@media (max-width:768px){
  /* login card gets margins instead of edge-to-edge */
  .login-card{width:100%;max-width:360px}
  /* CALENDAR: keep the 7-day month grid, resize the cells so it fits a phone */
  .cgrid{gap:3px}
  .cell{min-height:56px;padding:4px;font-size:11px;border-radius:5px}
  .calbar .muted{display:none}
  /* KANBAN already scrolls sideways and has a per-card status dropdown (no drag needed). Make each stage
     ~one screen wide so you see one stage at a time and swipe between , the resize way to do it. */
  .kcol{flex:0 0 80%}
  /* KEYBOARD-AWARE COMPOSER: when a thread is open, size the pane to the visual viewport (set by JS) so the
     reply box rides above the on-screen keyboard instead of being covered. Falls back to full height. */
  body.thread-open .thread-pane{height:var(--vvh,100%);bottom:auto}
}

/* ===================== Mobile fixes from owner phone feedback (2026-06-26) ===================== */
@media (max-width:768px){
  /* THREAD HEADER , compact: the action buttons become small TEXT LINKS in 1-2 tight rows so the
     conversation is actually visible (they were bulky pills eating the screen). */
  .thread-head{padding:7px 12px;gap:4px}
  .th-name{font-size:16px}
  .th-phone{font-size:12px;margin:0}
  .th-customer{gap:5px}
  .th-customer .call-btn{padding:3px 8px;font-size:12.5px;font-weight:600;border-radius:6px;background:transparent;border:1px solid var(--line);color:var(--accent);margin:0}
  .th-customer .call-btn:active{background:var(--panel2)}
  #contact-toggle.cbtn-notes{border-color:#2a5a3c;color:var(--green)}
  .th-status{padding:4px 7px;font-size:12px;min-height:0}
  .th-tag{padding-top:5px;gap:6px}
  .ai-toggle{padding:5px 12px;font-size:12.5px;margin:0}

  /* AI SUMMARY on the call-activity bar , wrap to a few lines (tap to expand) instead of one truncated line,
     so you can read it without opening Notes. */
  .call-activity{white-space:normal;line-height:1.42;padding:8px 14px}
  .ca-sum{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
  .ca-sum.expanded{-webkit-line-clamp:unset;display:block;overflow:visible}

  /* CONTACT / NOTES PANEL , full-screen, fully scrollable, with real room at the bottom. It was cut off so
     you could not scroll to the AI summary at the end. Fixed to the viewport (not the thread) + big bottom
     padding so the last content clears the safe area. */
  .cpanel{position:fixed;inset:0;width:100%;max-width:100%;height:var(--vvh,100dvh);border-left:none;z-index:80;
    padding:16px 16px calc(56px + env(safe-area-inset-bottom));overflow-y:auto;-webkit-overflow-scrolling:touch}
}

/* ===================== Mobile refinements , owner feedback round 2 (2026-06-26) ===================== */
@media (max-width:768px){
  /* TOPBAR , shrink the title + tighten spacing so it + the icons fit on one row */
  .topbar{padding:7px 12px}
  .brand{font-size:16px;line-height:1.15;white-space:nowrap}
  .topbar .who{gap:9px}
  #whoami{display:none}            /* "Owner" label , redundant on a phone */
  #logout{display:none}            /* Sign out lives in the More sheet */
  .iconbtn{font-size:18px;min-width:38px;min-height:38px}

  /* CARDS across the top , smaller so they don't eat the screen */
  .cards{padding:6px 9px;gap:7px}
  .card{min-width:55%;padding:7px 10px;border-radius:9px}
  .chead .clabel{font-size:12px}
  .chead .ccount{font-size:18px}
  .citem{font-size:11.5px;padding:2px 0;line-height:1.45}
  .citems{max-height:42px;overflow:hidden;margin-top:4px}

  /* FULL-SCREEN thread + notes: the thread pane covers the WHOLE viewport (not just the area under the
     cards), so the conversation uses the full screen AND the contact/notes panel inside it fills the screen
     and scrolls all the way to the bottom (this is the real fix for "cannot see all the notes"). */
  .thread-pane{position:fixed}
  .cpanel{position:absolute;inset:0;width:100%;max-width:100%;height:auto;border-left:none;z-index:30;
    padding:14px 14px calc(44px + env(safe-area-inset-bottom));overflow-y:auto;-webkit-overflow-scrolling:touch}

  /* NAMEROW , business name + line next to the contact name */
  .th-name{font-size:16px}
  .th-namerow{gap:6px}
  #th-business.badge{font-size:11.5px;padding:2px 8px}
  .th-line{font-size:11.5px;flex-basis:100%;margin-top:1px}
  .th-actions{gap:5px;margin-top:7px}
}

/* ===================== Conversation status cards (2026-06-27, owner-approved D+C design) ===================== */
#conv-list{padding-top:8px}
.conv{display:flex;gap:11px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:14px;margin:0 9px 9px;padding:11px 12px 11px 17px;position:relative;overflow:hidden;cursor:pointer}
.conv.muted{display:block;color:var(--muted);background:none;border:none;border-radius:0;padding:14px 16px;margin:0}
.conv::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;border-radius:5px 0 0 5px;background:transparent}
.conv.s-hot::before{background:#ff7a45}.conv.s-miss::before{background:#ff5a6a}
.conv.s-cb::before{background:#e8a13a}.conv.s-new::before{background:var(--accent)}.conv.s-warm::before{background:#e0911f}
.conv:hover{border-color:var(--line2)}
.conv.active{background:#15324d;border-color:#244a6e}
.cv-av{flex:0 0 auto;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15.5px;position:relative}
.cv-av.av-sod{background:#16352a;color:#7ee0a8}.cv-av.av-mat{background:#2c2547;color:#bdaaee}
.cv-av.av-land{background:#1d3a22;color:#8fdca0}.cv-av.av-num{background:#22303f;color:#8fb6dc}
.cv-av .cv-cb{position:absolute;right:-2px;bottom:-2px;width:18px;height:18px;border-radius:50%;background:var(--panel);border:2px solid var(--bg);display:flex;align-items:center;justify-content:center;font-size:9px}
.cv-mid{flex:1;min-width:0}
.cv-r1{display:flex;align-items:center;gap:7px;min-width:0}
.cv-nm{font-weight:700;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.conv.unread .cv-nm{font-weight:800;color:#fff}
.cv-timer{margin-left:auto;flex:0 0 auto;border-radius:999px;font-size:11px;font-weight:800;padding:2px 9px;white-space:nowrap}
.cv-timer.t-fresh{background:#15301f;color:#74d8a0}
.cv-timer.t-mid{background:#3a2f12;color:#ffcc66}
.cv-timer.t-old{background:#3a1418;color:#ff6b6b}
.cv-meta{font-size:12.5px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-line{font-size:11.5px;color:var(--muted);white-space:nowrap}
.cv-preview{color:var(--muted);font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:3px}
.conv.unread .cv-preview{color:var(--text)}
.cv-r2{display:flex;gap:6px;align-items:center;margin-top:5px;flex-wrap:wrap}
.cv-pill{flex:0 0 auto;display:inline-block;border-radius:999px;font-size:10px;font-weight:800;padding:2px 8px}
.cv-pill.hot{background:#3a2014;color:#ff7a45}.cv-pill.miss{background:#3a1418;color:#ff5a6a}
.cv-pill.cb{background:#3a2a10;color:#e8a13a}.cv-pill.new{background:#15324d;color:var(--accent)}.cv-pill.warm{background:#3a2f12;color:#ffcc66}
.cv-pill.unread{background:#15324d;color:#5fb3ff}.cv-pill.replied{background:#15301f;color:#74d8a0}
.cv-gps{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-2px}
.cv-brand{display:inline-block;border-radius:6px;font-size:10.5px;font-weight:700;padding:1px 8px;background:#22303f;color:#9fb6d4}
.cv-brand.bn-sod{background:#163a2a;color:#7ee0a8}.cv-brand.bn-mat{background:#2c2547;color:#bdaaee}
.cv-brand.bn-bayou{background:#3a2a18;color:#d6ad7e}.cv-brand.bn-calc{background:#4a3012;color:#ffa64d}.cv-brand.bn-tangi{background:#15324d;color:#7ec8ff}
.cv-brand.bn-land{background:#352a1a;color:#d6b079}
.cv-brand.unmatched{background:#3a2f12;color:#ffcc66}
.cv-un{margin-left:auto;background:var(--accent);color:#04121f;border-radius:11px;min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:800;padding:0 5px}
.conv .hidebtn{top:8px;transform:none}
/* Missed filter chip */
.ftab.miss{color:#ffb3bb;border-color:#5a2a30}
.ftab.miss.active{background:#3a1418;color:#ff5a6a;border-color:#7a2a34}
.ftc{font-size:11px;background:#3a1418;color:#ff5a6a;border-radius:9px;padding:0 5px;font-weight:800;margin-left:3px}
.ftc.hidden{display:none}

/* Enable-notifications banner (2026-06-27) */
.notif-banner{display:flex;align-items:center;gap:10px;background:#15324d;border-bottom:1px solid #244a6e;padding:9px 14px;font-size:13.5px;color:#cfe2ff}
.notif-banner.hidden{display:none}
.notif-banner .nb-text{flex:1;min-width:0}
.notif-banner .nb-enable{flex:0 0 auto;background:var(--accent);color:#04121f;border:none;border-radius:8px;padding:7px 16px;font-weight:800;font-size:13px;cursor:pointer}
.notif-banner .nb-x{flex:0 0 auto;background:none;border:none;color:#9bbde0;font-size:20px;cursor:pointer;line-height:1;padding:0 4px}
.shadow-banner{background:#2b2110;border-bottom:1px solid #6f5518;color:#ffd88a;padding:8px 16px;font-size:13px;font-weight:900;letter-spacing:.04em;text-align:center}
.shadow-banner.hidden{display:none}

/* ===================== Dialer (2026-06-27) ===================== */
.dial-fab{position:fixed;right:16px;bottom:80px;z-index:44;width:54px;height:54px;border-radius:50%;border:none;background:var(--green);color:#06140d;font-size:23px;box-shadow:0 8px 24px rgba(0,0,0,.5);cursor:pointer;display:flex;align-items:center;justify-content:center}
body.thread-open .dial-fab{display:none}
@media(min-width:769px){.dial-fab{bottom:24px}}
.dialer-card{width:420px;max-width:100%}
.dialer-body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:12px;overflow-y:auto}
.dl-from{display:flex;align-items:center;gap:10px}
.dl-from label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;flex:0 0 auto}
.dl-from select{flex:1;min-width:0;background:#0f1113;border:1px solid var(--line);color:var(--text);border-radius:8px;padding:9px 10px;font:inherit}
.dl-display{min-height:42px;font-size:28px;font-weight:700;letter-spacing:1px;text-align:center;padding:4px 0;color:var(--text);word-break:break-all}
.dl-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.dl-key{background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:12px;padding:14px 0;font-size:22px;font-weight:700;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:1px}
.dl-key .sub{font-size:9.5px;color:var(--muted);font-weight:700;letter-spacing:1px;min-height:10px}
.dl-key:active{background:#283442}
.dl-actions{display:flex;align-items:center;gap:12px;justify-content:center}
.dl-call{flex:1;background:var(--green);color:#06140d;border:none;border-radius:12px;padding:14px;font-size:16px;font-weight:800;cursor:pointer}
.dl-call:disabled{opacity:.45;cursor:default}
.dl-back{flex:0 0 auto;background:var(--panel2);border:1px solid var(--line);color:var(--muted);border-radius:12px;padding:14px 18px;font-size:18px;cursor:pointer}
.dl-status{font-size:13px;color:var(--green);min-height:18px;text-align:center}
.dl-status.bad{color:var(--bad)}
.dl-recent-h{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;border-top:1px solid var(--line);padding-top:12px}
.dl-recent{display:flex;flex-direction:column}
.dl-rrow{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px solid var(--line);cursor:pointer}
.dl-rrow:hover{background:var(--panel2)}
.dl-rdir{flex:0 0 auto;font-size:13px}
.dl-rn{flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-rt{flex:0 0 auto;font-size:11.5px;color:var(--muted)}

/* Contacts browser (searchable CRM directory, one-tap call/text/open-record) */
.contacts-card{width:420px;max-width:100%}
.ct-search{padding:12px 16px;border-bottom:1px solid var(--line);background:var(--panel)}
.ct-search input{width:100%;background:#0f1113;border:1px solid var(--line);color:var(--text);border-radius:10px;padding:11px 13px;font:inherit;font-size:16px}
.ct-search input::placeholder{color:var(--muted)}
.ct-note{font-size:12px;color:var(--muted);padding:8px 16px 2px}
.ct-list{overflow-y:auto;padding:0 8px 8px;flex:1}
.ct-row{display:flex;align-items:center;gap:10px;padding:11px 8px;border-bottom:1px solid var(--line);cursor:pointer}
.ct-row:hover{background:var(--panel2)}
.ct-av{flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;background:color-mix(in srgb,var(--accent) 16%,var(--panel2));color:var(--accent)}
.ct-main{flex:1;min-width:0}
.ct-nm{font-weight:700;font-size:15.5px;display:flex;align-items:center;gap:7px;min-width:0}
.ct-nm-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ct-meta{color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.ct-flag{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;border-radius:20px;padding:1px 8px;flex:0 0 auto}
.ct-flag.cust{background:color-mix(in srgb,var(--green) 18%,transparent);color:var(--green)}
.ct-flag.opt{background:color-mix(in srgb,var(--bad) 16%,transparent);color:var(--bad)}
.ct-acts{flex:0 0 auto;display:flex;gap:7px}
.ct-btn{border:1px solid var(--line);border-radius:10px;width:40px;height:38px;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;background:var(--panel2);color:var(--text)}
.ct-btn.call{background:var(--green);color:#06140d;border:none}
.ct-btn.text{background:color-mix(in srgb,var(--accent) 22%,var(--panel2));color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line))}
.ct-btn.rec{background:var(--panel2);color:var(--muted)}
.ct-btn.text.off{opacity:.4;cursor:default}
.ct-empty{padding:26px 16px;text-align:center;color:var(--muted);font-size:14px}

/* Quick Actions strip (top of the conversations screen) */
.qa-wrap{padding:11px 0 9px;border-bottom:1px solid var(--line);background:#101216}
.qa-h{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);padding:0 16px 8px}
.qa-strip{display:flex;gap:10px;overflow-x:auto;padding:0 14px 2px;scrollbar-width:none}
.qa-strip::-webkit-scrollbar{display:none}
.qa-tile{flex:0 0 auto;width:70px;background:none;border:none;color:var(--text);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;font:inherit}
.qa-ic{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;--c:var(--accent);color:var(--c);background:color-mix(in srgb,var(--c) 15%,var(--panel2));border:1px solid color-mix(in srgb,var(--c) 40%,var(--line));transition:transform .12s,background .12s}
.qa-ic svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.qa-tile:active .qa-ic{transform:scale(.94)}
.qa-tile:hover .qa-ic{background:color-mix(in srgb,var(--c) 24%,var(--panel2))}
.qa-lbl{font-size:11.5px;color:var(--muted);font-weight:600;text-align:center;line-height:1.2}
.qa-tile.text .qa-ic{--c:var(--accent)}
.qa-tile.call .qa-ic{--c:var(--green)}
.qa-tile.add .qa-ic{--c:var(--teal)}
.qa-tile.est .qa-ic{--c:var(--amber)}
.qa-tile.cb .qa-ic{--c:var(--orange)}

/* Add-contact / Log-callback forms */
.addc-card{width:400px;max-width:100%}
.addc-body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:12px}
.addc-body label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.addc-body input{background:#0f1113;border:1px solid var(--line);color:var(--text);border-radius:9px;padding:11px 12px;font:inherit;font-size:16px;text-transform:none;letter-spacing:0;font-weight:400}
.addc-body input::placeholder{color:var(--muted)}
.addc-save{background:var(--accent);color:#04121f;border:none;border-radius:11px;padding:13px;font-size:15px;font-weight:800;cursor:pointer;margin-top:4px}
.addc-save:disabled{opacity:.5;cursor:default}

/* Ask AI (Cortex) , free-form assistant modal */
.askai-card{width:440px;max-width:100%;height:88vh;max-height:680px}
.askai-sub{font-size:11.5px;color:var(--muted);font-weight:600;margin-left:4px}
.ai-body{padding:14px 16px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:12px}
.ai-chips{display:flex;gap:8px;flex-wrap:wrap}
.ai-chip{background:var(--panel2);border:1px solid var(--line);color:var(--accent);border-radius:18px;padding:7px 12px;font-size:12.5px;font-weight:600;cursor:pointer}
.ai-chip:hover{border-color:var(--accent)}
.ai-q{align-self:flex-end;background:#15324d;color:#dfeefb;border-radius:14px 14px 4px 14px;padding:9px 13px;font-size:14.5px;max-width:85%;white-space:pre-wrap}
.ai-a{align-self:flex-start;background:var(--panel2);border:1px solid var(--line);border-radius:14px 14px 14px 4px;padding:11px 13px;font-size:14.5px;max-width:92%;white-space:pre-wrap}
.ai-a.ai-err{border-color:#5a2a28}
.ai-a .who{font-size:11px;font-weight:800;color:var(--teal);text-transform:uppercase;letter-spacing:.4px;margin-bottom:5px;display:flex;align-items:center;gap:6px}
.ai-a .use{margin-top:9px;display:flex;gap:8px}
.ai-a .use button{background:transparent;border:1px solid var(--line);color:var(--accent);border-radius:8px;padding:6px 11px;font-size:12.5px;font-weight:700;cursor:pointer}
.ai-a .use button.fill{background:var(--accent);color:#04121f;border:none}
.ai-thinking{align-self:flex-start;color:var(--muted);font-size:13px;font-style:italic}
.ai-foot{border-top:1px solid var(--line);padding:11px 14px;display:flex;gap:9px;align-items:flex-end;background:var(--panel)}
.ai-foot textarea{flex:1;background:#0f1113;border:1px solid var(--line);color:var(--text);border-radius:11px;padding:11px 12px;font:inherit;font-size:15px;resize:none;max-height:120px}
.ai-send{background:var(--accent);color:#04121f;border:none;border-radius:11px;padding:0 18px;height:46px;font-size:15px;font-weight:800;cursor:pointer;flex:0 0 auto}
.ai-send:disabled{opacity:.5;cursor:default}

/* Thread header on mobile: 2-column identity (name+contact phone left, brand+line phone right) full
   width, and a uniform grid of action buttons in 2 tidy rows (AI sits on the top row next to Stop). */
@media (max-width:768px){
  .th-id{flex:1 1 100%}
  .th-right{max-width:52%}
  .th-name{font-size:17px}
  .th-actions{flex:1 1 100%;display:grid;grid-template-columns:repeat(10,1fr);gap:7px}
  .th-customer .call-btn,.th-customer .ai-toggle{grid-column:span 2;height:34px;min-height:34px;padding:0 4px;margin:0;display:flex;align-items:center;justify-content:center;font-size:12px;border-radius:8px}
  .th-customer .th-status{grid-column:span 3;height:34px;min-height:34px;max-width:none;padding:0 6px;font-size:12px;border-radius:8px}
}

/* ===== Top redesign (2026-06-27): fewer rows + scroll-away ===== */
/* Collapse the leads cards + quick actions once you scroll into the list; they slide back in at the top.
   #cards keeps overflow-x:auto so the cards still slide sideways (overflow:hidden would kill that). */
#cards{transition:max-height .24s ease,opacity .18s ease,padding .2s ease;overflow-x:auto;overflow-y:hidden;max-height:260px}
#qa-wrap{transition:max-height .24s ease,opacity .18s ease,padding .2s ease;overflow:hidden;max-height:260px}
body.cards-collapsed #cards,body.cards-collapsed #qa-wrap{max-height:0;opacity:0;padding-top:0;padding-bottom:0;border-bottom:none}
/* Location (GPS icon + city) gets a color so it stands out from the muted phone text. */
.cv-loc{color:#8fdca0}
.cv-loc .cv-gps{color:#f4b942;vertical-align:-2px}
/* Reserve room on the timer row for the hide (X) button on touch so it never covers the timer. */
@media (pointer:coarse){ .cv-r1{padding-right:32px} }
/* Conversations heading row holds the filter chips; keep it tidy on one line. */
.list-head{flex-wrap:nowrap}
@media (max-width:768px){
  /* compact leads cards: just the headline + count (tap to open the full list) */
  .cards{padding:7px 10px;gap:8px}
  .card{padding:7px 11px;min-width:148px}
  .card .citems{display:none}
  .clabel{font-size:13px}
  .ccount{font-size:17px}
  /* compact quick actions: drop the label row, smaller tiles */
  .qa-wrap{padding:8px 0 7px}
  .qa-h{display:none}
  .qa-tile{width:64px}
  .qa-ic{width:46px;height:46px}
  .qa-lbl{font-size:10.5px}
  /* heading row: title + scrolling filter chips + refresh, one line */
  .list-head{gap:8px;padding:8px 12px}
  .lh-title{font-size:14px}
}