@scope (.dl-scope) {
/* THE PAGE IS THE WINDOW, NO TALLER (9/23 11:12 PM: the columns grew to the length of the list and the page scrolled):
   the shell's frame is pinned to the viewport here, so the three columns fill it and scroll inside themselves. */
.jf-app{height:100vh; min-height:0}
.jf-main{min-height:0; overflow:hidden}
/* ── /dialer — the redesign Jacob approved 9/23 10:45 PM: one slim bar, the deal's facts under the name, the thread
   grouped into runs, To and From with the composer, the right column only for what you act on ── */
.dl{--p:#0B7A5A; --p-soft:#EAF6F1; --p-100:#CDEAE0; --ink:#171A1D; --body:#25292E; --muted:#687078; --muted2:#7D858C;
  --div:#EEF0F2; --hair:#DDE1E5; --soft:#FAFBFB; --chip:#E8EBED; --warn:#8A5A00; --warnsoft:#FFF5DF; --bad:#B44747; --badsoft:#FCEDED;
  max-width:1600px; margin:0 auto; padding:0 18px 12px; min-width:0; width:100%; box-sizing:border-box; font-variant-numeric:tabular-nums;
  flex:1; display:flex; flex-direction:column; min-height:0}   /* fills the window to the bottom: no band of nothing under the columns (Jacob, 9/23 11:08 PM) */
.dl-head{display:flex; align-items:center; gap:14px; padding:14px 0 12px; flex-wrap:wrap; min-height:40px}
.dl-head h1{font-size:22px; font-weight:600; letter-spacing:-.3px; line-height:1.2; color:var(--ink); margin:0}
.dl-head .right{margin-left:auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
/* POP OUT (Jacob 10/7: the agents keep the Kixie dialer beside the dashboard in split screen; "I want to make it so that our dialer can also be open like that") */
.dl-pop{height:36px; padding:0 12px; border:1px solid var(--hair); border-radius:999px; background:#fff; font:600 13px Inter,sans-serif; color:var(--body); display:inline-flex; align-items:center; gap:6px; cursor:pointer; white-space:nowrap}
.dl-pop:hover{border-color:#C5CBD1}
.dl-pop:focus-visible{outline:2px solid #9AA1A8; outline-offset:2px}
.seg{display:flex; border:1px solid var(--hair); border-radius:999px; background:#fff; padding:3px; max-width:100%; min-width:0; overflow-x:auto; scrollbar-width:none; box-sizing:border-box}   /* five tabs (9/27): on a phone they scroll inside the bar, never the page */
.seg::-webkit-scrollbar{display:none}
.seg button{border:0; background:transparent; color:#363B40; font:600 13px/1 Inter,sans-serif; padding:0 14px; border-radius:999px; cursor:pointer; height:30px; display:inline-flex; align-items:center; gap:8px; white-space:nowrap; flex:none}
.seg button.on{background:var(--p-soft); color:var(--p); box-shadow:inset 0 0 0 1px var(--p)}
.seg .n{display:inline-block; min-width:18px; padding:0 5px; border-radius:999px; background:var(--p); color:#fff; font-size:11px; line-height:18px; text-align:center}
/* "Showing": the dashboard's own menu, not the system list (Jacob 10/2: "Appearance-wise, this doesn't look good"), the same
   as the Emails page: a pill that opens a card of names, each in its colour, a check on the one showing. The select stays
   underneath (hidden) and the rest of the page reads it as before. */
.dl-who{position:relative; flex:none}
.dl-who[hidden],.dl-who select{display:none}
.dl-whob{display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 12px 0 14px; border:1px solid var(--hair); border-radius:999px; background:#fff; font:500 13px Inter,sans-serif; color:var(--muted); cursor:pointer}
.dl-whob:hover{border-color:#C5CBD1}
.dl-whob:focus-visible{outline:2px solid #9AA1A8; outline-offset:2px}
.dl-whob b{font-weight:600; color:var(--ink); max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dl-whom{position:absolute; right:0; top:42px; z-index:80; width:240px; max-height:min(440px, 70vh); overflow:auto; background:#fff; border:1px solid #E3E6EA; border-radius:14px; box-shadow:0 12px 32px rgba(23,26,29,.12); padding:6px; box-sizing:border-box}
.dl-whom[hidden]{display:none}
.dl-whoi{display:flex; align-items:center; gap:10px; width:100%; height:40px; padding:0 10px; border:0; border-radius:10px; background:transparent; font:500 14px Inter,sans-serif; color:var(--ink); text-align:left; cursor:pointer}
.dl-whoi:hover,.dl-whoi:focus-visible{background:#F1F3F4; outline:none}
.dl-whoi.on{font-weight:600}
.dl-whoi .av{width:26px; height:26px; border-radius:999px; flex:none; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700}
.dl-whoi .nm{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dl-whoi .ck{margin-left:auto; color:#0B7A5A; display:inline-flex}
.dl-whog{font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); padding:10px 10px 4px}
.dl-whod{height:1px; background:#E8EAED; margin:6px 4px}
/* THE STAGE FILTER (Jacob 10/14): the same pill as Showing, the chosen stage's colour as a small square, an x beside it to see every stage again */
.dl-stage{display:inline-flex; align-items:center; gap:4px}
.dl-whob .sq{width:10px; height:10px; border-radius:2px; flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.dl-whob .sq[hidden]{display:none}
.dl-whob.on{border-color:var(--p); color:var(--p)}
.dl-whox{width:28px; height:28px; border:0; border-radius:999px; background:#F0F2F5; color:var(--muted); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; flex:none}
.dl-whox:hover{background:#E3E6EA; color:var(--ink)}
.dl-whox[hidden]{display:none}
.dl-search{display:flex; align-items:center; gap:8px; height:34px; padding:0 12px; border:1px solid var(--hair); border-radius:999px; background:#fff; flex:1; min-width:0; box-sizing:border-box; color:var(--muted)}
.dl-search:focus-within{border-color:#9AA1A7}
.dl-search input{border:0; outline:0; font:inherit; font-size:13px; flex:1; background:transparent; color:var(--ink); min-width:0}
.dl-search input::-webkit-search-cancel-button{display:none; -webkit-appearance:none}   /* one X, ours: the browser's own is a different one on every phone */
/* CLEAR THE SEARCH (David 9/28, on his phone: "I need an X button to erase the name") */
.dl-qx{flex:none; width:22px; height:22px; margin-right:-4px; border:0; border-radius:999px; padding:0; background:#C9CED3; color:#fff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer}
.dl-qx[hidden]{display:none} .dl-qx:hover{background:#9AA1A7}
.dl-grid{display:grid; grid-template-columns:clamp(318px, 22vw, 420px) minmax(0,1fr) clamp(300px, 22vw, 420px); gap:12px; flex:1; min-height:0}   /* the merchant list and the deal grow with the screen, the conversation takes what is left (Jacob 10/15: "the middle part is a little thin, thin it out") */
.dl-col{background:#fff; border:1px solid var(--div); border-radius:14px; display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden}
.dl-col > .h{padding:8px 10px 8px 10px; border-bottom:1px solid var(--div); display:flex; align-items:center; gap:8px; height:48px; box-sizing:border-box}
.ctxcol > .h{padding-left:16px}
.dl-col > .h b{font-size:14px; font-weight:600; color:var(--ink); white-space:nowrap}
.dl-col > .h .n{font-size:12px; color:var(--muted2); white-space:nowrap}
.dl-list{overflow:auto; flex:1; min-height:0}
/* a merchant row: who (initial), the name with a dot when they wrote and nobody answered, the time, the last words */
.conv{display:grid; grid-template-columns:34px minmax(0,1fr) auto; column-gap:10px; align-items:center; width:100%; text-align:left; padding:11px 14px 11px 11px; border:0; border-bottom:1px solid var(--div); border-left:3px solid transparent; background:#fff; cursor:pointer; font:inherit; color:var(--ink)}
.conv:hover{background:var(--soft)}
.conv.on{background:var(--p-soft); border-left-color:var(--p)}
.conv .av{width:34px; height:34px; border-radius:999px; font-weight:700; font-size:13px; display:inline-flex; align-items:center; justify-content:center; grid-row:span 2}
.conv .nm{font-size:14px; font-weight:500; color:#5F666D; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:7px; min-width:0}
.conv.hot .nm{font-weight:700; color:var(--ink)}
.conv .dot{width:8px; height:8px; border-radius:999px; background:var(--p); flex:0 0 auto}
.conv .sq{width:9px; height:9px; border-radius:2px; flex:0 0 auto; box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.conv .nt{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}   /* the name carries its own "…" (9/27: cut mid-word) */
.conv .dot.bad{background:var(--bad)} .conv .dot.due{background:var(--warn)}
.conv .t{font-size:12px; color:var(--muted2); white-space:nowrap}
.conv .sn{grid-column:2 / span 2; font-size:13px; color:#8A9199; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px}
.conv.hot .sn{color:var(--body)} .conv.hot .t{color:var(--p); font-weight:600}
.conv .sn.bad{color:var(--bad); font-weight:600}
.av.c0{background:#E3EEF8; color:#3E6E91} .av.c1{background:#FBE9D9; color:#A45A1E} .av.c2{background:#EFE7F7; color:#6B4C9A} .av.c3{background:#E7F5EE; color:#14865F} .av.c4{background:#FDEFD2; color:#8A5A00} .av.c5{background:#FCEDED; color:#B44747} .av.c6{background:var(--chip); color:var(--body)}
.dl-empty{padding:40px 20px; text-align:center; color:var(--muted); font-size:14px}
.dl-more{display:block; padding:16px 12px 20px; text-align:center; color:var(--muted); font:500 13px Inter,system-ui,sans-serif}   /* the end of the list: more load on their own as it comes near (9/28) */
.dl-retry{margin-top:12px;height:34px;padding:0 16px;border:1px solid var(--hair);border-radius:999px;background:#fff;color:var(--ink);font:500 13px Inter,system-ui,sans-serif;cursor:pointer}
.dl-retry:hover{background:#F6F7F8}
.th-head{display:flex; align-items:flex-start; flex-wrap:wrap; gap:8px 10px; padding:10px 16px; border-bottom:1px solid var(--div); min-height:56px; box-sizing:border-box}
/* ONE LINE (Jacob 10/14: "The pin button and the copy button are not aligned with Follow up and Log a call ... different heights"):
   the buttons on the right sit on the name's line, not the middle of the name, stage and facts together; Copy and Pin are as tall as they are */
.th-head .who{min-width:min(200px, 100%); flex:1 1 200px; display:flex; flex-direction:column; gap:3px}   /* the name keeps 200px at least: the buttons go under it first (9/25: at 1280 wide it was squeezed to 30px) */
.th-head .l1{display:flex; align-items:center; gap:10px; min-width:0}
.th-head .name{font-size:17px; font-weight:700; color:var(--ink); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.th-head .l2{display:flex; align-items:center; min-width:0}
.th-head .tagent{display:none; margin-left:10px; font-size:12.5px; color:var(--muted); white-space:nowrap; flex:none}   /* a phone's header only (the computer has The deal panel); never squeezed away: a long stage name gives way */
/* ON A TOUCH SCREEN the stage pill keeps its small look (9/29) */
@media (pointer: coarse){
  .th-head .stagewrap{min-width:0; overflow:hidden}
  .th-head .stagewrap .stl{font-size:10.5px; padding:3px 22px 3px 8px}
}
.th-head .tagent b{color:var(--body); font-weight:600}
/* THE STAGE IS A MENU (Jacob 9/27): the chip in the stage's own colours and a caret; it opens the one stage picker the whole
   dashboard uses (lib/stagepick.js, Jacob 10/6: "the same way in the dialer ... color-coded") */
.th-head .stagewrap{position:relative; display:inline-flex; align-items:center; border:0; padding:0; border-radius:999px; background:var(--warnsoft); color:var(--warn); max-width:100%; min-width:0; cursor:pointer; font:inherit}
.th-head .stagewrap[hidden]{display:none}
.th-head .stagewrap .stl{display:block; font:700 11px Inter,sans-serif; letter-spacing:.3px; text-transform:uppercase; padding:4px 24px 4px 10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.th-head .stagewrap:focus-visible{outline:0; box-shadow:0 0 0 2px #9AA1A7}
.th-head .stagewrap:disabled{cursor:progress; opacity:.75}
.th-head .stagewrap svg{position:absolute; right:9px; pointer-events:none}
.th-head .stage{font-size:11px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; background:var(--warnsoft); color:var(--warn); border-radius:999px; padding:3px 9px; white-space:nowrap}
.th-head .stage[hidden]{display:none}
.th-head .facts{font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-height:16px}
.callbtn{height:36px; padding:0 14px; border:0; border-radius:999px; background:var(--p); color:#fff; font:600 13px Inter,sans-serif; cursor:pointer; display:inline-flex; align-items:center; gap:7px}
.callbtn:hover{filter:brightness(.95)} .callbtn:disabled{opacity:.5; cursor:default} .callbtn[hidden]{display:none}
.openDeal{height:36px; padding:0 14px; border:1px solid var(--p); border-radius:999px; background:#fff; color:var(--p); font:600 13px Inter,sans-serif; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:7px; white-space:nowrap}
.openDeal:hover{background:var(--p-soft)} .openDeal[hidden]{display:none}
/* FOLLOW UP (Jacob 9/27): one button, one-click times, and the deal can move to Follow ups at the same time */
.fuBtn{height:36px; padding:0 14px; border:1px solid var(--hair); border-radius:999px; background:#fff; color:var(--body); font:600 13px Inter,sans-serif; cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; gap:6px}
.fuBtn:hover{background:var(--soft)} .fuBtn[hidden]{display:none} .fuBtn.set{color:var(--ink); border-color:#B8C4CE}
.dl-col.threadcol{position:relative}
.fupop{position:absolute; top:60px; right:16px; z-index:30; width:320px; max-width:calc(100% - 32px); box-sizing:border-box; background:#fff; border:1px solid var(--hair); border-radius:14px; box-shadow:0 8px 28px rgba(20,27,31,.14); padding:12px 14px 14px; display:flex; flex-direction:column; gap:10px}
.fupop[hidden]{display:none}
.fp-h{display:flex; align-items:center; justify-content:space-between} .fp-h b{font-size:15px; color:var(--ink)}
.fp-x{border:0; background:transparent; font-size:20px; line-height:1; color:var(--muted); cursor:pointer; padding:2px 6px; border-radius:6px} .fp-x:hover{background:var(--soft)}
.fp-cur{font-size:12.5px; color:var(--muted); line-height:1.4; display:flex; flex-direction:column; gap:6px} .fp-cur[hidden]{display:none}
.fp-row{display:flex; align-items:center; gap:6px; padding:6px 0; border-bottom:1px solid var(--hair)}
.fp-when{flex:1; min-width:0; font:600 13px Inter,sans-serif; color:var(--ink); overflow-wrap:anywhere} .fp-when.due{color:var(--bad)}
.fp-when i{display:block; font-style:normal; font-weight:400; font-size:12px; color:var(--muted)}
.fp-row button{height:30px; padding:0 12px; border:1px solid var(--hair); border-radius:999px; background:#fff; color:var(--ink); font:600 12.5px Inter,sans-serif; cursor:pointer; flex:none}
.fp-row button:hover{background:var(--soft)} .fp-row .fp-del{color:var(--bad)}
.fp-tip{font-size:12px; color:var(--muted)}
.fupop input[type=text]{height:36px; border:1px solid var(--hair); border-radius:10px; padding:0 10px; font:14px Inter,sans-serif; color:var(--ink); outline:0}
.fupop input[type=text]:focus,.fupop input[type=datetime-local]:focus{border-color:#9AA1A7}
.fp-mv{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--body); cursor:pointer} .fp-mv[hidden]{display:none} .fp-mv input{width:16px; height:16px; margin:0; accent-color:#25292E}
.fp-q{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.fp-q button{height:34px; border:1px solid var(--hair); border-radius:999px; background:#fff; color:var(--ink); font:500 13px Inter,sans-serif; cursor:pointer} .fp-q button:hover{background:var(--soft); border-color:#B8C4CE}
.fp-c{display:flex; gap:6px} .fp-c input{flex:1; min-width:0; height:34px; border:1px solid var(--hair); border-radius:10px; padding:0 8px; font:13px Inter,sans-serif; color:var(--ink); outline:0}
.fp-c button{height:34px; padding:0 14px; border:0; border-radius:999px; background:#25292E; color:#fff; font:600 13px Inter,sans-serif; cursor:pointer}
.fupop button:focus-visible{outline:2px solid #9AA1A7; outline-offset:2px}
.tabn{display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; margin-left:6px; border-radius:999px; background:var(--bad); color:#fff; font-size:11px; font-weight:700; line-height:1; vertical-align:1px}
.tabn[hidden]{display:none}
.fuBtn.due{background:var(--bad); border-color:var(--bad); color:#fff; font-weight:600}
.fuBtn.due[hidden]{display:none}
.sn .fu{display:inline-flex; align-items:center; gap:3px; margin-right:6px; color:var(--body); font-weight:600} .sn .fu.due{color:var(--bad)} .sn .fu svg{width:12px; height:12px}
.fuv{display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px} .fuv .fut{color:var(--ink)} .fuv .fut.due{color:var(--bad); font-weight:600} .fuv .fux{color:var(--muted)}
.tcopy{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; box-sizing:border-box; flex:none; margin-left:6px; border:1px solid var(--hair); border-radius:999px; background:#fff; color:var(--muted); cursor:pointer; padding:0; vertical-align:middle}   /* 36px round, as Follow up and Log a call (10/14) */
.tcopy.tpin{margin-left:0}   /* Copy and Pin a pair, 10px apart, so the name keeps its room (10/14) */
/* SHARE THE DEAL FROM THE DIALER (Jacob 10/20): the same list as the deal card's arrow, under the arrow, owners first */
.tcopy[aria-expanded=true]{color:var(--p); border-color:var(--p-100)}
.dl-share{position:fixed; z-index:70; width:290px; max-width:calc(100vw - 24px); background:#fff; border-radius:8px; padding:0 0 6px; box-shadow:0 2px 6px rgba(60,64,67,.2),0 6px 20px rgba(60,64,67,.18); font:14px Inter,system-ui,sans-serif}
.dl-share[hidden]{display:none}
.dl-share .sh-h{padding:10px 12px 6px; font-weight:500; font-size:12px; letter-spacing:.3px; color:var(--muted)}
.dl-share .sh-q{display:block; width:calc(100% - 24px); margin:0 12px 6px; height:30px; border:0; border-bottom:1px solid var(--hair); padding:0; font:inherit; outline:0; background:transparent}
.dl-share .sh-list{max-height:300px; overflow:auto; overscroll-behavior:contain}
.dl-share .sh-it{display:flex; align-items:center; gap:10px; width:100%; min-height:42px; padding:4px 12px; border:0; background:transparent; text-align:left; cursor:pointer; font:inherit; color:var(--ink)}
.dl-share .sh-it:hover{background:var(--soft)}
.dl-share .sh-it:disabled{cursor:default; background:transparent}
.dl-share .sh-it .av{width:26px; height:26px; border-radius:999px; flex:none; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700}
.dl-share .sh-q[hidden]{display:none}
.dl-share .sh-nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dl-share .sh-role,.dl-share .sh-st{flex:none; font-size:12px; color:var(--muted); white-space:nowrap}
.dl-share .sh-it.sent .sh-st{color:var(--p); font-weight:500}
.dl-share .sh-it.sh-bad .sh-st{color:#B42318; white-space:normal; max-width:130px; text-align:right}
.dl-share .sh-msg{padding:8px 12px; color:var(--muted); font-size:13px}
.dl-share .sh-foot{padding:6px 12px 2px; color:var(--muted); font-size:12px}
.dl-share .av.dsh-on{background:var(--p) !important; color:#fff}
.dl-share .sh-send{display:flex; flex-direction:column; align-items:stretch; gap:8px; margin:6px 12px 0; padding-top:8px; border-top:1px solid var(--hair)}
.dl-share .sh-send textarea{width:100%; box-sizing:border-box; min-height:56px; max-height:120px; resize:none; border:1px solid var(--hair); border-radius:8px; padding:8px 10px; font:inherit; color:var(--ink); outline:0}
.dl-share .sh-go{align-self:flex-end; min-width:178px; height:36px; padding:0 16px; border:0; border-radius:18px; background:var(--p); color:#fff; font:inherit; font-weight:500; font-size:13px; cursor:pointer; white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis}
.dl-share .sh-go:disabled{background:var(--soft); color:var(--muted); cursor:default}
@media (pointer: coarse){ .dl-share .sh-send textarea{font-size:16px} }
@media (pointer: coarse){ .dl-share .sh-it{min-height:48px} .dl-share .sh-q{font-size:16px; height:34px} }
.tcopy:hover{color:var(--ink); background:var(--soft)} .tcopy[hidden]{display:none} .tcopy.done{color:var(--p); border-color:var(--p-100)}
/* pinned (Jacob 10/2): the header's pin, filled when this conversation is pinned; a small pin on the row in the list */
.tpin.on{color:var(--p); border-color:var(--p-100); background:var(--p-soft)} .tpin.on svg path:first-child{fill:currentColor}
.conv .pin{display:inline-flex; vertical-align:-2px; margin-right:4px; color:var(--muted)} .conv .pin svg{width:12px; height:12px}
.ghost{height:36px; padding:0 14px; border:1px solid var(--hair); border-radius:999px; background:#fff; color:var(--body); font:600 13px Inter,sans-serif; cursor:pointer; white-space:nowrap}
.ghost:hover{background:var(--soft)} .ghost[hidden]{display:none}
.threadcol{position:relative}
.newpill{position:absolute; left:50%; transform:translateX(-50%); bottom:124px; z-index:3; height:30px; padding:0 14px; border:0; border-radius:999px; background:var(--ink); color:#fff; font:600 12px Inter,sans-serif; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.18)}
.newpill[hidden]{display:none}
.thread{overflow:auto; flex:1; min-height:0; padding:14px 18px; display:flex; flex-direction:column; gap:4px}
.day{align-self:center; font-size:11px; font-weight:600; letter-spacing:.4px; color:var(--muted2); text-transform:uppercase; margin:2px 0 10px}
/* a bubble; a run of bubbles from the same side shares its corners and shows the name and time once, under the last */
.bub{max-width:72%; padding:9px 13px; border-radius:15px; font-size:14px; line-height:1.42; white-space:pre-wrap; word-break:break-word; color:var(--ink); margin-top:6px}
.bub.in{align-self:flex-start; background:var(--div); border-bottom-left-radius:4px}
.bub.out{align-self:flex-end; background:var(--p-soft); border-bottom-right-radius:4px}
.bub .pics{display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 6px; white-space:normal}
.bub .pic{display:block; line-height:0; border-radius:10px; overflow:hidden}
.bub .pic img{display:block; max-width:min(240px,100%); max-height:280px; object-fit:cover; background:rgba(0,0,0,.05)}
.bub .att{color:inherit; font-weight:600; text-decoration:underline}
.bub.cont{margin-top:0}
.bub.in.cont{border-top-left-radius:4px} .bub.out.cont{border-top-right-radius:4px}
.bub.more{border-bottom-left-radius:16px; border-bottom-right-radius:16px}
.bub.in.more{border-bottom-left-radius:4px; border-bottom-right-radius:16px} .bub.out.more{border-bottom-right-radius:4px}
.bub.auto{background:#fff; border:1px dashed var(--hair); color:var(--body)}
.bub.failed{background:var(--badsoft); border:2px solid var(--bad); color:var(--bad)}
.bub.pending{opacity:.6}
.bub.failed .m{color:var(--bad)}
.bub .m{display:block; font-size:11px; color:var(--muted2); margin-top:5px; white-space:normal}
.bub.more .m{display:none}
.bub.fresh .m{color:var(--p); font-weight:600}
.call{align-self:center; display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--body); background:var(--soft); border:1px solid var(--div); border-radius:999px; padding:5px 12px; margin-top:8px}
.call.missed{color:var(--bad); background:var(--badsoft); border-color:transparent}
.call.noans{color:var(--warn); background:var(--warnsoft); border-color:transparent}
.call a{color:var(--p); font-weight:600; text-decoration:none}
.wrap{border-top:1px solid var(--div); padding:12px 16px; background:var(--soft); display:none; gap:10px; flex-wrap:wrap; align-items:end}
.wrap.show{display:flex}
.wrap label{display:flex; flex-direction:column; gap:4px; font-size:11px; font-weight:600; color:var(--muted); letter-spacing:.2px}
.wrap select, .wrap input{height:36px; border:1px solid var(--hair); border-radius:10px; background:#fff; font:inherit; font-size:13px; padding:0 10px; color:var(--ink)}
.wrap .note{flex:1; min-width:180px}
.wrap .quick{display:flex; gap:6px; flex-wrap:wrap}
.wrap .quick button{height:36px; padding:0 10px; border:1px solid var(--hair); border-radius:999px; background:#fff; font:500 12px Inter,sans-serif; cursor:pointer; color:var(--body)}
.wrap .quick button.on{background:var(--p-soft); color:var(--p); border-color:var(--p)}
/* WRONG NUMBER (Jacob 10/14): a line under the outcome pointing to Mark bad; the Dialer cannot know which number was dialed, so nothing is marked on its own */
.wrap .whint{flex-basis:100%; margin-top:-2px; font-size:12px; font-weight:500; color:var(--body)} .wrap .whint[hidden]{display:none}
/* the composer: To, from whose line, Template and Done on one quiet row; the words and Send on the next */
.compose{border-top:1px solid var(--div); padding:10px 16px; background:#fff; display:flex; flex-direction:column; gap:8px}
/* the AI's suggested reply (9/28): its own strip above the box, no box inside a box */
.sugg{border-top:1px solid var(--div); padding:10px 16px 8px; background:#fff; display:flex; flex-direction:column; gap:4px}
.sugg[hidden]{display:none}
.sugg .sg-h{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.sugg .sg-l{font:600 11px Inter,sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--p)}
.sugg .sg-m{font-size:12px; color:var(--muted)}
.sugg .sg-m.warn{color:var(--warn)}
.sugg .sg-t{font-size:14px; line-height:1.45; color:var(--ink); white-space:pre-wrap; word-break:break-word}
.sugg .sg-t.wait{color:var(--muted)}
.sugg .sg-a{display:flex; align-items:center; gap:4px; margin-top:2px}
.sugg .sg-a[hidden]{display:none}
.sugg .sg-use{height:28px; padding:0 14px; border:0; border-radius:999px; background:var(--p); color:#fff; font:600 12.5px Inter,sans-serif; cursor:pointer}
.sugg .sg-more{height:28px; padding:0 10px; border:0; border-radius:999px; background:none; color:var(--body); font:600 12.5px Inter,sans-serif; cursor:pointer}
.sugg .sg-more:hover{background:var(--div)}
.compose[hidden]{display:none}
/* WHY THERE IS NO TEXT BOX (10/14 sweep): the sentence sits where the box would be, never a blank bottom */
.cantact{border-top:1px solid var(--div); padding:12px 16px; background:#fff; color:var(--muted); font-size:13px; line-height:1.45; overflow-wrap:anywhere}
.cantact[hidden]{display:none}
/* THE DEAL WAS HANDED ON (judge 10/14): the sentence and Next merchant replace the box; no border, no tint, it wraps */
.compose.moved .row1,.compose.moved .row2,.compose.moved .kx-msglbl,.compose.moved .note{display:none !important}
.dl-moved{display:flex; align-items:center; gap:6px 12px; flex-wrap:wrap; min-width:0; grid-column:1 / -1; padding:4px 0; font-size:13.5px; line-height:1.45; color:var(--ink)}
.dl-moved[hidden]{display:none}
.dl-moved span{flex:1 1 220px; min-width:0; overflow-wrap:anywhere}
.compose .dl-moved .done{display:inline-flex; align-items:center; flex:none}
.compose .row1{display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--muted); flex-wrap:wrap}
.compose .row1 .tofrom{display:flex; align-items:center; gap:10px}
.compose .row1 .tofrom[hidden]{display:none}
.compose .tpl{margin-left:6px}
.compose .row2{display:flex; align-items:flex-end; gap:10px}
.pill{height:28px; padding:0 10px; border:1px solid var(--hair); border-radius:999px; background:#fff; color:var(--ink); font:600 12.5px Inter,sans-serif; cursor:pointer; max-width:240px}
.pill[hidden]{display:none}
#fromSel{height:28px; padding:0 10px; border:1px solid var(--hair); border-radius:999px; background:#fff; color:var(--ink); font:600 12.5px Inter,sans-serif; cursor:pointer; margin-left:4px}
#fromSel[hidden]{display:none}
.compose .tpl{height:28px; padding:0 10px; border:1px solid var(--hair); border-radius:999px; background:#fff; font:600 12.5px Inter,sans-serif; color:var(--body); max-width:170px}
.compose textarea{flex:1; min-height:44px; max-height:160px; resize:none; overflow:auto; font:inherit; font-size:14px; line-height:1.45; padding:11px 14px; border:1px solid var(--hair); border-radius:12px; color:var(--ink); box-sizing:border-box}
.compose .send{height:44px; padding:0 20px; border:0; border-radius:999px; background:var(--p); color:#fff; font:600 14px Inter,sans-serif; cursor:pointer}
.compose .done{height:28px; padding:0 10px; border:0; border-radius:999px; background:transparent; color:var(--p); font:600 12.5px Inter,sans-serif; cursor:pointer; margin-left:auto}
.compose button:disabled{opacity:.5; cursor:default}
.compose .note{font-size:12px; color:var(--muted)}
.compose .note:empty{display:none}
.compose .note.bad{color:var(--bad); font-weight:700}
.compose .note.ok{color:var(--p)}
/* THE EMOJI BUTTON (Jacob 10/19; window.jfEmoji in lib/shell.js): a quiet smiley, placed per layout below; DIALER_EMOJI=off hides it */
.compose .emobtn{flex:none; width:44px; height:44px; margin:0; padding:0; border:0; border-radius:999px; background:transparent; color:var(--muted); display:inline-flex; align-items:center; justify-content:center; cursor:pointer}
.emobtn[hidden]{display:none}
.compose .emobtn[hidden]{display:none !important}   /* the switch off: no layout below brings it back */
.compose .emobtn:hover{background:#F1F3F4; color:var(--ink)}
.compose .emobtn[aria-expanded="true"]{color:var(--p)}
.compose .emobtn:focus-visible{outline:2px solid #9AA1A8; outline-offset:1px}
/* THE TRANSLATOR (Jacob 10/15): English or Spanish per number beside To and from; the Spanish that will go out under the box */
.lgsw{display:inline-flex; align-items:center; gap:2px; padding:2px; border:1px solid var(--hair); border-radius:999px; background:#fff; flex:none}
.lgsw button{height:24px; padding:0 10px; border:0; border-radius:999px; background:transparent; font:600 12px Inter,sans-serif; color:var(--body); cursor:pointer; white-space:nowrap}
.lgsw button[aria-pressed=true]{background:var(--p); color:#fff}
.lgsw button:focus-visible{outline:2px solid #9AA1A7; outline-offset:1px}
.lgsw.na button[data-lang=es]{color:var(--muted2)}
.trbox{display:flex; align-items:baseline; gap:4px 10px; flex-wrap:wrap; font-size:13px; line-height:1.45; color:var(--body); padding:0 2px}
.trbox[hidden]{display:none}
.trbox .trl{font:600 11px Inter,sans-serif; letter-spacing:.4px; text-transform:uppercase; color:var(--muted); flex:none}
.trbox .trl:empty{display:none}
.trbox .trt{flex:1 1 220px; min-width:0; color:var(--ink); white-space:pre-wrap; word-break:break-word}
.trbox.idle .trt,.trbox.wait .trt{color:var(--muted)}
.trbox.bad .trt{color:var(--bad); font-weight:600}
.trbox .trbtn{border:0; background:none; padding:0; font:600 12.5px Inter,sans-serif; color:var(--p); cursor:pointer; flex:none; text-decoration:underline; text-underline-offset:2px}
.trbox .trbtn[hidden]{display:none}
.trbox .jf-busy-orb,.bub .trx .jf-busy-orb{width:10px; height:10px; margin:0 6px 0 0; vertical-align:-1px}
.bub .trx{display:block; font-size:11.5px; color:var(--muted); margin-top:4px; white-space:normal}
.bub .trx button{border:0; background:none; padding:0; font:inherit; font-weight:600; color:var(--p); cursor:pointer; text-decoration:underline; text-underline-offset:2px}
.bub .tro{display:block; margin-top:5px; padding-top:5px; border-top:1px solid rgba(0,0,0,.08); color:var(--body); font-size:13px}
.bub .tro[hidden]{display:none}
.newnum{width:32px; height:32px; flex:0 0 auto; border:1px solid var(--hair); border-radius:999px; background:#fff; color:var(--p); display:inline-flex; align-items:center; justify-content:center; cursor:pointer}
.reloadBtn{color:var(--body); margin-right:6px}
.reloadBtn.spin svg{animation:dlspin .8s linear infinite}
@keyframes dlspin{to{transform:rotate(360deg)}}
/* PULL TO REFRESH on a phone (David via Jacob 9/29): the pill that follows the finger down from the top */
.ptr{position:fixed; left:50%; top:calc(env(safe-area-inset-top) + 8px); z-index:60; transform:translate(-50%,-60px); display:flex; align-items:center; gap:8px; height:34px; padding:0 14px; border-radius:999px; background:#fff; color:var(--body); font:600 13px Inter,sans-serif; box-shadow:0 2px 10px rgba(0,0,0,.14); pointer-events:none; opacity:0}
.ptr svg{flex:none}
.ptr.go svg,.ptr.busy svg{color:var(--p)}
.ptr.busy svg{animation:dlspin .8s linear infinite}
.newnum:hover{border-color:var(--p)}
.numpanel{margin:12px 16px 0; padding:12px 14px; border:1px solid var(--p); border-radius:12px; background:var(--p-soft); display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center}
.numpanel[hidden]{display:none}   /* display:flex above would otherwise beat the hidden attribute: Cancel did nothing (Jacob, 8:19 PM) */
.numpanel b{font-size:14px; color:var(--ink)}
.numpanel span{font-size:12px; color:var(--muted); flex-basis:100%}
.numpanel form{display:flex; gap:8px; align-items:center}
.numpanel input{height:36px; width:170px; padding:0 10px; border:1px solid var(--hair); border-radius:8px; font:500 14px Inter,sans-serif; color:var(--ink); background:#fff; font-variant-numeric:tabular-nums}
.numpanel button{height:36px; padding:0 14px; border:0; border-radius:8px; background:var(--p); color:#fff; font:600 13px Inter,sans-serif; cursor:pointer}
.numpanel button.ghost{background:#fff; color:var(--body); border:1px solid var(--hair)}
.numpanel .err{color:var(--bad); font-size:12px; font-weight:600; flex-basis:100%}
/* the right column: numbers to text, the follow-up, the files, the offers */
.ctx{overflow:auto; flex:1; min-height:0; padding:14px 16px 84px; display:flex; flex-direction:column; gap:18px}   /* room at the end to scroll the last file clear of the Messages button */
.ctx h2{font-size:16px; font-weight:600; letter-spacing:-.2px; color:var(--ink); line-height:1.25; margin:0}
.ctx h2 a{color:inherit; text-decoration:none} .ctx h2 a:hover{color:var(--p)}
.ctx .deallink{display:inline-flex; align-items:center; gap:4px; margin-top:6px; color:var(--p); font:600 13px Inter,sans-serif; text-decoration:none}
.ctx .deallink:hover{text-decoration:underline}
.kv{display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 12px; font-size:13px; margin-top:10px}
.kv .k{color:var(--muted)} .kv .v{color:var(--ink); font-weight:500; min-width:0; overflow:hidden; text-overflow:ellipsis}
.cap{font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--muted2); margin-bottom:8px; display:flex; align-items:center}
.cap .vall{margin-left:auto; height:26px; padding:0 10px; border:1px solid var(--hair, #DDE1E5); border-radius:999px; background:#fff; color:var(--p); font:600 12px Inter,system-ui,sans-serif; letter-spacing:0; text-transform:none; cursor:pointer}
.cap .vall:hover{border-color:var(--p)}
.cap .vall + .vall{margin-left:6px}
/* Name the statements (10/15): its own line under Files, so the heading's buttons still fit the 300px column */
.fnamerow{margin:0 0 4px} .fname{height:26px; padding:0 10px; border:1px solid var(--hair, #DDE1E5); border-radius:999px; background:#fff; color:var(--p); font:600 12px Inter,system-ui,sans-serif; cursor:pointer; white-space:nowrap}
.fname:hover{border-color:var(--p)} .fname:disabled{color:var(--muted2); cursor:default} .fname.jf-busy:disabled,.cap .vall.jf-busy:disabled{color:var(--p)} .fname:focus-visible{outline:2px solid #9AA1A8; outline-offset:2px}
.cap .morebtn{margin-left:auto; text-transform:none; letter-spacing:0; font-weight:500}
.morebtn{border:0; background:transparent; color:var(--p); font:600 12px Inter,sans-serif; cursor:pointer; padding:0}
.num{display:flex; flex-direction:column; gap:6px; padding:10px 12px; border:1px solid var(--div); border-radius:12px; margin-bottom:6px; cursor:pointer; background:#fff; font-size:13px; min-width:0; overflow:hidden}   /* nothing ever leaves the card (Jacob 10/7: Marked STOP ran past the border) */
.num:hover .d{color:var(--p)}
.num .l1{display:flex; align-items:center; justify-content:space-between; gap:4px 8px; min-width:0; flex-wrap:wrap}   /* a label that does not fit beside the number drops under it (10/7) */
.num .l2{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; color:var(--muted); min-height:0}
.num .l2:empty{display:none}
.num .sel{font-size:10px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--p); background:#fff; border:1px solid var(--p); border-radius:999px; padding:2px 7px}
.num.bad{opacity:.55}
.num .d{font-size:14px; font-weight:600; color:var(--body); display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font-variant-numeric:tabular-nums}
.num.on .d{font-weight:700; color:var(--ink)}
.num .l2 button{height:24px; padding:0 9px; border:1px solid var(--hair); border-radius:999px; background:#fff; font:600 11px Inter,sans-serif; cursor:pointer; color:var(--body); white-space:nowrap}
.num .tag{font-size:11px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; border-radius:999px; padding:3px 8px}
.num .tag.good{background:var(--p-soft); color:var(--p)} .num .tag.bad{background:var(--badsoft); color:var(--bad)}
.num.stop{opacity:1}
.num .stoptxt{font-size:12px; font-weight:700; color:var(--bad); white-space:nowrap}
/* The number(s) whose messages are on screen carry the green border (Jacob, 4:50 PM): the one clicked, or every number while all messages show. A STOP number is a plain box with its label in red. */
.num.showing{border:2px solid var(--p); padding:9px 11px; opacity:1}
.num .when{font-size:11px; color:var(--muted2)}
.num .dot{width:8px; height:8px; border-radius:50%; background:var(--p); display:inline-block}
.fu{display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px dashed var(--hair); border-radius:12px; font-size:13px; color:var(--muted)}
.fu.set{border-style:solid; color:var(--ink)}
.fu span{flex:1; min-width:0}
.fu button{height:30px; padding:0 12px; border:1px solid var(--p); border-radius:999px; background:#fff; color:var(--p); font:600 12.5px Inter,sans-serif; cursor:pointer; white-space:nowrap}
.file{display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:8px; align-items:center; padding:7px 10px; border:1px solid var(--div); border-radius:10px; margin-top:4px; text-decoration:none; color:var(--ink); font-size:12.5px}
.file:hover{background:var(--soft)}
.file .fn{min-width:0; font-weight:500; line-height:1.35; overflow-wrap:anywhere; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden}
.file .fs{color:var(--muted2); font-size:11px}
.file .fw{grid-column:1 / -1; font-size:11px; line-height:1.35; color:var(--muted2); margin-top:1px; min-width:0; overflow-wrap:anywhere}   /* wraps: the time is never cut off */ .file .fw.new{color:var(--p); font-weight:600}
.fgh{font-size:11px; font-weight:600; color:var(--muted2); margin:8px 0 2px}
.frow{display:flex; align-items:center; gap:6px; margin-top:4px} .frow .file{flex:1; min-width:0; margin-top:0}
.frm,.fpb{flex:none; height:28px; padding:0 10px; border:1px solid var(--div); border-radius:999px; background:#fff; color:var(--muted); font:600 11.5px Inter,sans-serif; cursor:pointer; white-space:nowrap}
.frm:hover{color:#B44747; border-color:#E7C6C6} .fpb{color:var(--p)} .frow.gone .file{opacity:.6}
.fed{flex:none; height:28px; padding:0 10px; border:1px solid var(--p); border-radius:999px; background:#EAF6F1; color:#095F46; font:600 11.5px Inter,sans-serif; cursor:pointer; white-space:nowrap}
.fed:focus-visible{outline:2px solid #9AA1A8; outline-offset:2px}
.shop{border:1px solid var(--div); border-radius:12px; padding:10px 12px; font-size:13px; color:var(--body)}
.shop b{font-size:18px; color:var(--ink); display:block; margin-bottom:2px}
.shop.none{color:var(--muted)}
.dl-back{display:none}
@media (max-width:1180px){ .dl-grid{grid-template-columns:300px minmax(0,1fr)} .dl-col.ctxcol{display:none} }
.moreDl,.dlmenu,.send .si,.conv .ub{display:none}
/* ── THE DEAL COLUMN WHEN THE SCREEN HAS NO ROOM FOR IT (10/14 sweep): under 1180 wide (an iPad, or a browser window beside
   Kixie) the third column is hidden above, and until now nothing opened it: the numbers to text, Mark good and Mark STOP,
   the files, the offers and the follow-up were out of reach. Now, exactly as on a phone, a tap on the name at the top or on
   More opens the deal as a screen of its own over the conversation; the arrow brings the conversation back. ── */
@media (max-width:1180px){
  .th-head .who{cursor:pointer}
  .moreDl{display:inline-flex; align-items:center; justify-content:center; flex:none; width:44px; height:44px; border:0; padding:0; background:transparent; color:var(--body); border-radius:999px; cursor:pointer}
  .moreDl[hidden]{display:none} .moreDl:active{background:#F0F2F5}
  .dlmenu{display:flex; flex-direction:column; position:absolute; top:calc(52px + env(safe-area-inset-top)); right:8px; z-index:40; min-width:230px; padding:6px; background:#fff; border-radius:14px; box-shadow:0 10px 32px rgba(20,27,31,.22)}
  .dlmenu[hidden]{display:none} .dlmenu button[hidden]{display:none}
  .dlmenu button{height:46px; padding:0 14px; border:0; border-radius:9px; background:transparent; text-align:left; font:500 15px Inter,sans-serif; color:var(--ink); cursor:pointer}
  .dlmenu button:active{background:#F0F2F5}
  .dl-col.ctxcol.show{display:flex; position:fixed; inset:0; z-index:160; border:0; border-radius:0; animation:dlIn .24s cubic-bezier(.2,.8,.2,1)}
  .ctxcol .dl-back{display:inline-flex; align-items:center; justify-content:center; flex:none; width:44px; height:44px; border:0; padding:0; background:transparent; color:var(--ink); border-radius:999px; cursor:pointer}
  .ctxcol .dl-back:active{background:#F0F2F5}
  .ctxcol > .h{height:auto; min-height:56px; padding:calc(6px + env(safe-area-inset-top)) 16px 6px 0; gap:4px}
  .ctxcol > .h b{font-size:17px}
  .ctx{padding:14px 16px calc(28px + env(safe-area-inset-bottom))}
}
/* between a phone and a wide screen the top bar still shows Open the deal, Copy, Pin, Log a call and Done: More keeps only the deal */
@media (min-width:761px) and (max-width:1180px){ .dlmenu button:not([data-m="info"]){display:none} }
@media (min-width:761px) and (max-width:1180px){ .th-head > .moreDl{margin-top:-4px} }   /* the 44px More centred on the 36px name line (10/14) */
/* ── A PHONE, LIKE WHATSAPP (Jacob 9/27: "the guys can open their dialer from their phone and communicate with their
   merchants ... extremely smooth, like WhatsApp"). The list is the page. A merchant opens over it, the whole screen,
   sliding in, and slides away again with the list still where it was (the phone's own back does the same). The
   conversation: an arrow back, the name and its stage (a tap shows the deal, its numbers and files), follow up and More;
   the messages; the box to type in pinned above the keyboard. No calls here: agents call from Kixie (Jacob, 9/23). ── */
@media (max-width:760px){
  .jf-app{height:auto; min-height:100vh} .jf-main{overflow:visible}
  .dl{padding:0 0 24px}
  .dl-head{padding:12px 16px 4px; gap:8px 10px}
  .dl-head h1{font-size:24px; font-weight:700}
  .dl-head .right{order:1; margin-left:auto}
  .dl-pop{display:none}   /* a phone has no second window */
  .dl-whob{height:34px; padding:0 10px; border:0; background:#F0F2F5}
  .dl-whob > span{display:none}
  .dl-whom{right:0}
  .seg{order:2; flex-basis:calc(100% + 32px); max-width:none; margin:0 -16px; border:0; border-radius:0; padding:4px 16px 2px; gap:8px; background:transparent; scroll-padding:0 16px}
  .seg button{height:34px; padding:0 14px; background:#F0F2F5; color:#3B4148; font-size:14px}
  .seg button.on{background:var(--p-soft); color:var(--p); box-shadow:none}
  .dl-grid{display:block; flex:none; height:auto; min-height:0}
  .dl-col.listcol{border:0; border-radius:0; overflow:visible; min-height:0}
  .listcol > .h{height:auto; padding:6px 16px 8px; border-bottom:0}
  .dl-search{height:40px; border:0; background:#F0F2F5; padding:0 14px}
  .dl-search input{font-size:16px}
  .newnum{width:40px; height:40px}
  .dl-list{overflow:visible}
  /* a row: the agent's initial, the merchant, when, the last words; unread is bold with a green dot on the right */
  .conv{grid-template-columns:48px minmax(0,1fr) auto; column-gap:12px; min-height:72px; padding:10px 16px; border:0;
    background-color:#fff; background-image:linear-gradient(var(--div),var(--div)); background-repeat:no-repeat; background-position:right bottom; background-size:calc(100% - 76px) 1px}
  .conv:hover,.conv.on{background-color:#fff} .conv:active{background-color:#F2F3F4}
  .conv .av{width:48px; height:48px; font-size:17px}
  .conv .nm{font-size:16px; color:var(--ink)} .conv .nm .dot{display:none}
  .conv .t{font-size:12px}
  .conv .sn{font-size:14px; margin-top:3px}
  .conv.hot .sn{grid-column:2}
  .conv .ub{display:block; grid-column:3; grid-row:2; justify-self:end; align-self:center; width:12px; height:12px; border-radius:50%; background:var(--p); margin-top:3px}
  .conv .ub.bad{background:var(--bad)}
  /* the conversation, over everything (under the deal card and the file viewer, which open on top of it) */
  .dl-col.threadcol{display:none}
  .dl-col.threadcol.show{display:flex; position:fixed; left:0; right:0; top:0; height:100vh; height:100dvh; z-index:150; border:0; border-radius:0; background:#EFF1F2; animation:dlIn .24s cubic-bezier(.2,.8,.2,1)}
  html.dl-open,html.dl-open body{overflow:hidden}
  html.dl-open #jfgChat .jc-launch{display:none}   /* the team chat scopes its rules under #jfgChat */
  .th-head{align-items:center; flex-wrap:nowrap; gap:0; padding:calc(6px + env(safe-area-inset-top)) 4px 6px 0; min-height:56px; background:#fff; border-bottom:1px solid var(--div); position:relative; z-index:2}
  .dl-back{display:inline-flex; align-items:center; justify-content:center; flex:none; width:44px; height:44px; border:0; padding:0; background:transparent; color:var(--ink); border-radius:999px; cursor:pointer}
  .dl-back:active{background:#F0F2F5}
  .th-head .who{flex:1 1 auto; min-width:0; gap:3px; padding:2px 6px 2px 2px; cursor:pointer}
  .th-head .name{font-size:17px}
  .th-head .tcopy,.th-head .facts,.th-head .openDeal,.th-head .ghost{display:none}
  .th-head .stagewrap select{font-size:10.5px; padding:3px 22px 3px 8px}
  .th-head .tagent:not([hidden]){display:inline}
  .fuBtn{flex:none; width:44px; height:44px; padding:0; justify-content:center; border:0; background:transparent; color:var(--body)}
  .fuBtn.due{width:auto; padding:0 12px; border-radius:999px; background:var(--bad); color:#fff; font-size:12.5px}
  .fuBtn svg{width:21px; height:21px} .fuBtn span{display:none} .fuBtn.set{color:var(--p)} .fuBtn:active{background:#F0F2F5}
  /* More and its menu: the 1180 rules above */
  .thread{padding:8px 10px 12px; gap:2px; background:#EFF1F2; overscroll-behavior:contain}
  .day{background:#fff; color:var(--muted); border-radius:8px; padding:5px 10px; margin:10px 0 6px; box-shadow:0 1px .5px rgba(11,20,26,.1); letter-spacing:.3px}
  .bub{max-width:84%; padding:7px 10px 6px; border-radius:12px; font-size:15px; line-height:1.4; box-shadow:0 1px .5px rgba(11,20,26,.13); margin-top:6px}
  .bub.in{background:#fff} .bub.out{background:#D9F2E6} .bub.auto{background:#fff; box-shadow:none}
  .bub .m{text-align:right; margin-top:3px}
  .newpill{bottom:calc(128px + env(safe-area-inset-bottom))}
  /* the box to type in, pinned over the keyboard: To and whose line on a quiet row; under it Templates (a round button,
     like WhatsApp's attach), the words, and a round Send. Done, next merchant is in More. */
  .compose{display:grid; grid-template-columns:46px minmax(0,1fr) 46px; gap:6px; border-top:0; background:#EFF1F2; padding:2px 8px calc(8px + env(safe-area-inset-bottom))}
  .sugg{border-top:0; background:#EFF1F2; padding:8px 12px 2px}
  .sugg .sg-t{background:#fff; border-radius:12px; padding:8px 12px; font-size:15px; box-shadow:0 1px .5px rgba(11,20,26,.13)}
  .sugg .sg-use,.sugg .sg-more{height:34px}
  .compose .row1,.compose .row2{display:contents}
  .compose .row1 .tofrom{grid-column:1 / -1; grid-row:1; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding:2px 4px; gap:8px; font-size:12.5px; color:var(--muted)}
  .compose .row1 .tofrom::-webkit-scrollbar{display:none}
  .compose .row1 .tofrom > *{flex:none}
  .pill,#fromSel{height:30px; border-color:transparent; background:#fff; font-size:13px}
  .compose .tpl{grid-column:1; grid-row:2; align-self:end; width:46px; max-width:none; height:46px; margin:0; padding:0; border:0; border-radius:50%; color:transparent; cursor:pointer; -webkit-appearance:none; appearance:none;
    background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23556068' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E") center / 22px no-repeat; box-shadow:0 1px .5px rgba(11,20,26,.13)}
  .compose .tpl option{color:#25292E}
  .compose .done{display:none}
  .compose textarea{grid-column:2; grid-row:2; font-size:16px; min-height:46px; max-height:140px; border:0; border-radius:23px; padding:12px 16px; background:#fff; box-shadow:0 1px .5px rgba(11,20,26,.13)}
  .compose .send{grid-column:3; grid-row:2; align-self:end; width:46px; height:46px; padding:0; border-radius:50%; display:inline-flex; align-items:center; justify-content:center}
  .compose .send .st{display:none} .compose .send .si{display:block; margin-left:3px}
  .compose .trbox{grid-column:1 / -1; grid-row:3; padding:0 8px}
  .compose .row1 .tofrom{flex-wrap:wrap; row-gap:6px; overflow-x:visible}   /* the language switch takes its own line rather than scrolling out of sight (10/15) */
  .compose .note{grid-column:1 / -1; grid-row:4; padding:0 8px}
  .cantact{padding:12px 12px calc(12px + env(safe-area-inset-bottom))}   /* clears the home bar (10/14 sweep) */
  .wrap{padding:12px; background:#fff} .wrap label,.wrap .note{flex:1 1 100%; min-width:0}
  .wrap select,.wrap input{height:44px; font-size:16px} .wrap .quick button{height:40px}
  .numpanel{margin:10px 12px 0} .numpanel form{flex:1 1 100%} .numpanel input{flex:1; width:auto; min-width:0; height:44px; font-size:16px} .numpanel button{height:44px}
  .numpanel > b,#numCancel{display:none}   /* the top bar names it, and its arrow is the way out */
  /* follow up: a sheet from the bottom, the page dimmed behind it */
  .fupop{position:fixed; left:0; right:0; bottom:0; top:auto !important; width:auto; max-width:none; z-index:60; border:0; border-radius:18px 18px 0 0; padding:16px 16px calc(18px + env(safe-area-inset-bottom)); gap:12px; box-shadow:0 0 0 100vmax rgba(15,20,25,.38); animation:dlUp .22s ease-out}
  .fupop input[type=text],.fp-c input{height:44px; font-size:16px}
  .fp-q button,.fp-c button{height:44px; font-size:14px}
  .fp-row button{height:40px; padding:0 14px; font-size:14px}
  /* the deal, its numbers, files and offers: its own screen over the conversation (the 1180 rules above) */
  .dl-col.ctxcol{display:none}
}
@keyframes dlIn{from{transform:translateX(100%)} to{transform:none}}
@keyframes dlUp{from{transform:translateY(100%)} to{transform:none}}
@media (prefers-reduced-motion:reduce){ .dl-col.threadcol.show,.dl-col.ctxcol.show,.fupop{animation:none} }
/* ── OVER ANOTHER PAGE (Jacob 9/28: "when I open up a deal, open up that deal in the dialer"): /dialer?embed=1#key inside
   the Deals page shows only the conversation, a panel from the right over a light scrim (the whole screen on a phone);
   the arrow, the scrim or Escape closes it and tells the page under it. Nothing here moves the Dialer's own place. ── */
.dl-scrim{display:none}
/* ── A WINDOW OF ITS OWN (Jacob 10/7): /dialer?pop=1 in a small window beside the dashboard, like the Kixie one the agents keep
   open: no rail, no top bar, no chat button; under 760px wide it is the phone layout (the list, then the conversation over it). */
html.pop .rail, html.pop .jf-mobilebar, html.pop #jfgChat, html.pop .dl-pop{display:none !important}
html.pop .jf-main{width:100%}

/* ── THE LITTLE WINDOW, LAID OUT LIKE KIXIE, DRAWN LIKE US (Jacob 10/7: "I would like for it to look a little more like Kixie,
   so guys are more familiar with it" and then "Didn't want it to be exactly like Kixie ... I wanted it to be the same as our
   design, but just similar to theirs"): Kixie's shape (a bar with the person on top, a round avatar with the name and the
   number over the conversation, a Send block with To, the message and a counter, tabs along the bottom) in our own
   colours, type, corners and spacing. Only in the popped-out window (html.pop). */
html.pop body{background:var(--canvas,#F6F7F8)}
html.pop .dl{padding-bottom:66px}
html.pop .dl-head{display:none}
html.pop .kx-top[hidden]{display:none}
html.pop .kx-tabs[hidden]{display:none}
html.pop .kx-top{display:flex; position:sticky; top:0; z-index:5; align-items:center; gap:10px; height:56px; padding:0 10px 0 12px; background:#fff; border-bottom:1px solid var(--div); color:var(--ink)}
html.pop .kx-top .kx-logo{width:32px; height:32px; border-radius:9px; background:var(--p); color:#fff; font:800 17px Inter,sans-serif; display:inline-flex; align-items:center; justify-content:center; flex:none}
html.pop .kx-top .kx-logo img{width:32px; height:32px; border-radius:9px; object-fit:cover}
html.pop .kx-top .kx-me{display:flex; flex-direction:column; min-width:0; line-height:1.2}
html.pop .kx-top .kx-me b{font-size:15px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
html.pop .kx-top .kx-me span{font-size:12px; color:var(--muted); display:inline-flex; align-items:center; gap:6px}
html.pop .kx-top .kx-me span i{width:7px; height:7px; border-radius:50%; background:var(--p); display:inline-block}
html.pop .kx-top .dl-who{margin-left:auto}
html.pop .kx-top .dl-whob{height:34px; padding:0 10px; border:1px solid var(--hair); background:#fff}
html.pop .kx-top .dl-whob > span{display:none}
html.pop .kx-top .dl-whom{right:0; top:40px}
html.pop .kx-tabs{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:170; height:60px; background:#fff; border-top:1px solid var(--div); padding:0 4px calc(env(safe-area-inset-bottom)); justify-content:space-around; align-items:center}
html.pop .kx-tabs button{position:relative; width:64px; height:52px; border:0; background:transparent; color:var(--muted); display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font:500 10.5px Inter,sans-serif; cursor:pointer; border-radius:12px}
html.pop .kx-tabs button.on{color:var(--p)}
html.pop .kx-tabs button[disabled]{opacity:.4; cursor:default}   /* Deal with no merchant open (10/14 sweep) */
html.pop .kx-tabs button.on svg{background:var(--p-soft); border-radius:999px; padding:3px; width:28px; height:28px; margin:-3px 0}
html.pop .kx-tabs button .kx-badge{position:absolute; top:4px; right:10px; min-width:17px; height:17px; padding:0 5px; border-radius:999px; background:var(--p); color:#fff; font:700 10.5px Inter,sans-serif; display:inline-flex; align-items:center; justify-content:center}
html.pop .kx-tabs button .kx-badge[hidden]{display:none}
/* the conversation, over the list, between the two bars */
html.pop .dl-col.threadcol.show{top:56px; height:calc(100vh - 116px); height:calc(100dvh - 116px); background:#EFF1F2}
/* the deal screen stops above the tab bar (10/14 sweep: its last 30px, the Offers box or the last file, sat under the tabs and could not be scrolled into view) */
html.pop .dl-col.ctxcol.show{bottom:calc(61px + env(safe-area-inset-bottom))}   /* the bar: 60px, its 1px top border and its safe-area padding */
html.pop .th-head{align-items:center; background:#fff; border-bottom:1px solid var(--div); padding:8px 10px 10px 2px; gap:0 8px; min-height:72px}
html.pop .dl-back{color:var(--ink); width:40px; height:44px}
html.pop .kx-av{display:inline-flex; width:44px; height:44px; border-radius:50%; align-items:center; justify-content:center; font:700 15px Inter,sans-serif; flex:none; margin-right:4px}
html.pop .kx-av[hidden]{display:none}
html.pop .th-head .name{font-size:17px}
html.pop .th-head .kx-num{font-size:13.5px; color:var(--muted); font-variant-numeric:tabular-nums}
html.pop .th-head .kx-num[hidden]{display:none}
html.pop .th-head .l2{gap:8px}
html.pop .thread{padding:10px 12px 14px}
html.pop .bub.in + .bub.out,html.pop .bub.out + .bub.in{margin-top:16px}   /* a change of speaker gets a breath (Jacob 10/7) */
html.pop .thread[data-name]::before{content:'The start of your conversation with ' attr(data-name); display:block; text-align:center; font:500 12.5px/1.45 Inter,sans-serif; color:var(--muted2,#8A9099); margin:28px 24px 10px; padding:0 8px}
/* the Send block: Kixie's pieces in our dress */
html.pop .compose{display:flex; flex-direction:column; gap:8px; background:#fff; border-top:1px solid var(--div); padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
html.pop .compose.moved::before{display:none}
html.pop .compose::before{content:'Send a text'; font:700 11px Inter,sans-serif; letter-spacing:.5px; text-transform:uppercase; color:var(--muted)}
html.pop .compose .row1,html.pop .compose .row2{display:flex; flex-direction:column; align-items:stretch; gap:8px}
html.pop .compose .row1 .tofrom{display:flex; align-items:center; gap:8px; padding:0; overflow:visible; font-size:13.5px; color:var(--muted)}
html.pop .compose .row1 .tofrom > span:first-child{font-weight:600; color:var(--body)}
html.pop .compose .row1 .tofrom .pill{flex:1; min-width:0; height:38px; border:1px solid var(--hair); border-radius:10px; background:#fff; font-size:14px; color:var(--ink)}
html.pop .compose .tpl{order:3; width:100%; height:38px; border:1px solid var(--hair); border-radius:10px; background:#fff; color:var(--body); font:500 13.5px Inter,sans-serif; padding:0 12px; -webkit-appearance:menulist; appearance:menulist}
html.pop .compose .done{display:none}
html.pop .kx-msglbl{display:flex; justify-content:space-between; align-items:center; font:600 13px Inter,sans-serif; color:var(--body)}
html.pop .kx-msglbl[hidden]{display:none}
html.pop .kx-msglbl span:last-child{font-weight:500; font-size:12px; color:var(--muted)}
html.pop .compose textarea{width:100%; min-height:96px; max-height:200px; border:1px solid var(--hair); border-radius:12px; background:#fff; box-shadow:none; font-size:15px; padding:10px 12px}
html.pop .compose .send{width:auto; height:40px; align-self:flex-end; padding:0 22px; border-radius:999px; background:var(--p); color:#fff; font:600 14px Inter,sans-serif; display:inline-flex; align-items:center; justify-content:center}
html.pop .compose .send .st{display:inline} html.pop .compose .send .si{display:none}
html.pop .compose:has(#msg:placeholder-shown) .send{background:#E3E6EA; color:var(--muted)}
html.pop .compose .note{padding:0}
/* the pop-out: the smiley on the left of the line under the words, Send on its right */
html.pop .compose.emo .row2{flex-direction:row; flex-wrap:wrap; align-items:center}
html.pop .compose.emo .row2 textarea{flex:1 1 100%}
html.pop .compose .emobtn{width:40px; height:40px; margin-left:-4px}
html.pop .compose.emo .send{margin-left:auto}
html.embed,html.embed body{background:transparent !important; overflow:hidden}
html.embed body{visibility:hidden}
html.embed .dl-scrim{display:block; position:fixed; inset:0; background:rgba(20,27,31,.16); visibility:visible}
html.embed .dl-col.threadcol{display:flex !important; position:fixed; top:0; right:0; bottom:0; width:min(560px,100vw); height:auto; z-index:10; border:0; border-radius:0; box-shadow:-10px 0 34px rgba(20,27,31,.18); visibility:visible; animation:dlIn .24s cubic-bezier(.2,.8,.2,1)}
html.embed .dl-col.ctxcol.show{visibility:visible}
/* THE NUMBERS OVER A DEAL (Jacob 10/8: "the same way I have in the dialer, to just browse between numbers and mark numbers as
   good and bad"): the Dialer's own number cards in a row under the name, scrolled sideways when there are many */
.embnums{display:none}
html.embed .embnums:not([hidden]){display:flex; gap:8px; overflow-x:auto; padding:8px 16px 10px; border-bottom:1px solid var(--div); flex:none; scrollbar-width:thin}
html.embed .embnums .num{flex:none; width:210px; margin:0}
html.embed .dl-back{display:inline-flex; align-items:center; justify-content:center; flex:none; width:40px; height:40px; border:0; padding:0; background:transparent; color:var(--ink); border-radius:999px; cursor:pointer}
html.embed #jfgChat,html.embed #openDeal,html.embed #openBoard,html.embed .dlmenu [data-m="board"],html.embed .compose .done,html.embed .dlmenu [data-m="deal"],html.embed .dlmenu [data-m="next"]{display:none !important}
@media (max-width:760px){ html.embed .dl-col.threadcol{width:auto; left:0; box-shadow:none} }
@media (min-width:761px){ html.embed .th-head > .dl-back{margin-top:-2px} }
/* Open in the Dialer comes last: Follow up and Log a call keep the name's line, and it takes the right of the next line when the panel has no room (10/14) */
html.embed #openFull{margin-left:auto}   /* the 40px arrow centred on the 36px name line (10/14) */
/* ── THE BLEND (Jacob 10/15, the Design canvas "Blend: Focus buttons on today's Dialer", approved piece by piece that night).
   Computer only: everything here sits under min-width 761px and never in the pop-out window, so the phone and the
   Kixie-skinned pop window are exactly as they were. ── */
@media (min-width:761px){
  /* THE TOP BAR: Dialer and Stage on the left, the tabs in the middle, Showing (owners and leads) and Pop out on the right */
  html:not(.pop) .dl-head .right{display:contents}
  html:not(.pop) .dl-head h1{order:0}
  html:not(.pop) .dl-head .dl-stage{order:1}
  html:not(.pop) .dl-head .seg{order:2}
  html:not(.pop) .dl-head #whoWrap{order:3; margin-left:auto}
  html:not(.pop) .dl-head .dl-pop{order:4}
  html:not(.pop) .dl-head:has(#whoWrap[hidden]) .dl-pop{margin-left:auto}   /* an agent has no Showing: Pop out alone on the right */
  /* the tabs: a grey track, the chosen one a white pill that sits up on it (the Liquid tabs) */
  html:not(.pop) .seg{border:0; background:#E9ECEE; padding:4px; gap:2px}
  html:not(.pop) .seg button{height:30px; padding:0 15px; color:#363B40; font-weight:500}
  html:not(.pop) .seg button.on{background:#fff; color:var(--p); font-weight:600; box-shadow:0 1px 2px rgba(23,26,29,.08),0 4px 12px -4px rgba(23,26,29,.12)}
  /* the list's two small buttons: Reload grey, a new number light jade */
  html:not(.pop) .listcol .newnum{width:34px; height:34px; border:0; border-radius:10px; background:var(--p-soft); color:var(--p)}
  html:not(.pop) .listcol .newnum.reloadBtn{background:#F1F3F4; color:var(--body); margin-right:0}
  html:not(.pop) .listcol .newnum:hover{filter:brightness(.97)}

  /* THE NAME LINE: the name, Copy and Pin as one small pair, then the stage; under it the owner, the number, whose deal */
  html:not(.pop) .th-head{align-items:center; padding:14px 16px 12px 18px}
  /* one grid: a long name gives way with "…" and the stage never drops to a line of its own */
  html:not(.pop) .th-head .who{display:grid; grid-template-columns:minmax(0,max-content) auto auto auto; justify-content:start; align-items:center; column-gap:6px; row-gap:4px; flex:1 1 340px; min-width:min(340px,100%)}   /* the name keeps real room: the buttons go under it first (as 9/25) */
  html:not(.pop) .th-head .who .l1,html:not(.pop) .th-head .who .l2{display:contents}
  html:not(.pop) .th-head .name{min-width:0; font-size:18px; line-height:28px}
  html:not(.pop) .th-head .tcopy{width:28px; height:28px; margin:0; border:0; border-radius:8px; background:transparent; color:var(--muted)}
  html:not(.pop) .th-head .tcopy:hover{background:#F1F3F4; color:var(--ink)}
  html:not(.pop) .th-head .tcopy.done,html:not(.pop) .th-head .tpin.on{background:var(--p-soft); color:var(--p); border:0}
  html:not(.pop) .th-head .stagewrap,html:not(.pop) .th-head .stage{margin-left:2px}
  html:not(.pop) .th-head .facts:not([hidden]){display:block; grid-column:1 / -1; grid-row:2; font-size:13px; min-height:0}
  html:not(.pop) .th-head .stagewrap,html:not(.pop) .th-head .stage{justify-self:start; max-width:220px}
  /* Follow up (it shows its time once one is set) and Log a call: soft grey, no outline */
  html:not(.pop) .th-head #fuDl,html:not(.pop) .th-head #logBtn{height:36px; padding:0 12px; border:0; border-radius:10px; background:#F1F3F4; color:var(--ink); font-weight:500; display:inline-flex; align-items:center; gap:7px}
  html:not(.pop) .th-head #fuDl[hidden],html:not(.pop) .th-head #logBtn[hidden]{display:none}
  html:not(.pop) .th-head #fuDl:hover,html:not(.pop) .th-head #logBtn:hover{background:#E8EBED}
  html:not(.pop) .th-head #fuDl.set .ful{display:none}
  html:not(.pop) .th-head #fuDl.set .fuw{display:inline}

  /* THE TEXT BOX: one box. To, from and the language on top; the words; Templates and the suggestion's buttons under them;
     Send a round button on the right, halfway down, beside the words. Done, next merchant is gone from here (Jacob 10/15). */
  html:not(.pop) .compose{margin:0 14px 14px; padding:0; border:1px solid var(--hair); border-radius:16px; background:#fff; box-shadow:0 8px 24px -16px rgba(23,26,29,.25); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0}
  html:not(.pop) .compose[hidden]{display:none}
  html:not(.pop) .compose::before{content:''; grid-column:2; grid-row:1 / 4; border-left:1px solid var(--div); margin:10px 0}
  html:not(.pop) .compose .row1{grid-column:1; grid-row:1; padding:10px 14px 0; gap:8px}
  html:not(.pop) .compose .row1 .done{display:none}
  html:not(.pop) .compose .row1 .tofrom > span{white-space:nowrap}   /* "from Jordan" stays one line (demo, 10/16) */
  html:not(.pop) .compose .row2{display:contents}
  html:not(.pop) .compose textarea{grid-column:1; grid-row:2; border:0; border-radius:0; padding:10px 14px 4px; min-height:48px; background:transparent; position:relative; z-index:1}
  html:not(.pop) .compose textarea:focus{outline:0}
  html:not(.pop) .compose .sgghost{display:block; grid-column:1; grid-row:2; padding:10px 14px 4px; font-size:14px; line-height:1.45; color:#A2A9AF; white-space:pre-wrap; word-break:break-word; pointer-events:none}
  html:not(.pop) .compose .sgghost[hidden]{display:none}
  html:not(.pop) .compose .send{grid-column:2; grid-row:1 / 4; align-self:center; justify-self:center; width:46px; height:46px; margin:0 14px; padding:0 0 0 3px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 6px 14px -6px rgba(11,122,90,.55)}
  html:not(.pop) .compose .send .st{display:none}
  html:not(.pop) .compose .send .si{display:block; width:20px; height:20px}
  html:not(.pop) .compose .sgbar{display:flex; grid-column:1; grid-row:3; align-items:center; gap:4px; flex-wrap:wrap; padding:4px 8px 8px 10px; min-height:28px}
  html:not(.pop) .compose.moved .sgbar,html:not(.pop) .compose.moved::before{display:none}
  html:not(.pop) .compose .sgbar .tpl{margin:0; height:28px; padding:0 8px; border:0; border-radius:8px; background:transparent; color:var(--body); font:500 12px Inter,sans-serif; cursor:pointer; max-width:170px}
  html:not(.pop) .compose .sgbar .tpl:hover{background:#F1F3F4}
  html:not(.pop) .compose .sgbar .sgsep{width:1px; height:18px; background:#E6E9EC; margin:0 4px}
  html:not(.pop) .compose .sgbar .sgsep[hidden]{display:none}
  html:not(.pop) .compose .sgbar button{height:28px; padding:0 8px; border:0; border-radius:8px; background:transparent; color:var(--body); font:500 12px Inter,sans-serif; cursor:pointer}
  html:not(.pop) .compose .sgbar button[hidden]{display:none}
  html:not(.pop) .compose .sgbar button:hover{background:#F1F3F4}
  html:not(.pop) .compose .sgbar .sguse{padding:0 12px; background:var(--p-soft); color:var(--p); font-weight:600}
  html:not(.pop) .compose .sgbar .sguse:hover{background:#DDF0E7}
  html:not(.pop) .compose .sgbar .sgmeta{font-size:12px; color:var(--warn); margin-left:4px}
  /* on a computer the smiley sits under the words, after Templates, the size of the buttons beside it */
  html:not(.pop) .compose .sgbar .emobtn{width:28px; height:28px; padding:0; border-radius:8px; color:var(--muted)}
  html:not(.pop) .compose .sgbar .emobtn:hover{background:#F1F3F4; color:var(--ink)}
  html:not(.pop) .compose .sgbar .emobtn[aria-expanded="true"]{background:var(--p-soft); color:var(--p)}
  html:not(.pop) .compose .sgbar .emobtn svg{width:18px; height:18px}
  html:not(.pop) .compose .sgbar .sgmeta:empty{display:none}
  html:not(.pop) .compose .trbox,html:not(.pop) .compose .note,html:not(.pop) .compose .kx-msglbl{grid-column:1 / -1; padding:0 14px 8px}
  html:not(.pop) .compose .dl-moved{padding:12px 14px}
}
.sgghost,.sgbar{display:none}
/* THE SUGGESTION, SMALL, EVERYWHERE (Jacob 10/15: on a phone and in the pop-out "the suggestion is way too big"): the strip
   above the box (#sugg) still does the work out of sight; what shows is the suggested reply in grey inside the text box
   (two lines on a phone, four in the pop-out, all of it on a computer) and one slim row of Use it, Another and Hide. */
.sugg{display:none !important}
.compose.moved .sgbar,.compose.moved .sgghost{display:none !important}
@media (max-width:760px){
  html:not(.pop) .compose .sgbar{display:flex; grid-column:1 / -1; grid-row:2; align-items:center; gap:6px; flex-wrap:wrap; padding:2px 4px 0}
  html:not(.pop) .compose .sgbar:not(:has(button:not([hidden]))){display:none}
  html:not(.pop) .compose .tpl,html:not(.pop) .compose textarea,html:not(.pop) .compose .send{grid-row:3}
  html:not(.pop) .compose .trbox{grid-row:4} html:not(.pop) .compose .note{grid-row:5}
  html:not(.pop) .compose .sgghost{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; grid-column:2; grid-row:3; align-self:start; position:relative; z-index:2; pointer-events:none; padding:12px 16px 0; margin-bottom:12px; font-size:16px; line-height:1.35; color:#9AA1A7; white-space:normal; word-break:break-word}   /* no bottom padding: a clamped third line would peek through it */
  html:not(.pop) .compose .sgghost[hidden]{display:none}
  /* on a phone the smiley sits inside the text pill on its right, as WhatsApp; the words keep clear of it */
  html:not(.pop) .compose .emobtn{grid-column:2; grid-row:3; justify-self:end; align-self:end; position:relative; z-index:3; width:42px; height:46px; border-radius:0 23px 23px 0; background:transparent}
  html:not(.pop) .compose .emobtn:hover{background:transparent}
  html:not(.pop) .compose.emo textarea,html:not(.pop) .compose.emo .sgghost{padding-right:44px}
  html:not(.pop) .compose .sgbar button{height:30px; padding:0 12px; border:0; border-radius:999px; background:#fff; color:var(--body); font:600 13px Inter,sans-serif; box-shadow:0 1px .5px rgba(11,20,26,.13); cursor:pointer}
  html:not(.pop) .compose .sgbar button[hidden],html:not(.pop) .compose .sgbar .sgsep{display:none}
  html:not(.pop) .compose .sgbar .sguse{background:var(--p); color:#fff}
  html:not(.pop) .compose .sgbar .sgmeta{font-size:12px; color:var(--warn)} html:not(.pop) .compose .sgbar .sgmeta:empty{display:none}
}
html.pop .compose .sgbar{display:flex; order:1; align-items:center; gap:6px; flex-wrap:wrap}
html.pop .compose .sgbar:not(:has(button:not([hidden]))){display:none}
html.pop .compose .sgbar button{height:30px; padding:0 12px; border:1px solid var(--hair); border-radius:999px; background:#fff; color:var(--body); font:600 12.5px Inter,sans-serif; cursor:pointer}
html.pop .compose .sgbar button[hidden],html.pop .compose .sgbar .sgsep{display:none}
html.pop .compose .sgbar .sguse{background:var(--p); border-color:var(--p); color:#fff}
html.pop .compose .sgbar .sgmeta{font-size:12px; color:var(--warn)} html.pop .compose .sgbar .sgmeta:empty{display:none}
html.pop .compose .row2{order:2; position:relative}
html.pop .compose .trbox,html.pop .compose .note,html.pop .compose .dl-moved{order:3}
html.pop .compose .sgghost{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden; position:absolute; top:1px; left:1px; right:1px; z-index:2; pointer-events:none; padding:10px 12px 0; font-size:15px; line-height:1.45; color:#9AA1A7; word-break:break-word}
html.pop .compose .sgghost[hidden]{display:none}
.fuBtn .fuw{display:none}
html.pop .th-head .facts{display:none}

/* THE DEAL, as cards on the page (computer, three columns): the deal with Open the deal and Deal Board, the numbers in
   two groups, the files, the offers */
@media (min-width:1181px){
  /* the tabs in the exact middle of the bar (Jacob 10/15) */
  html:not(.pop) .dl-head{position:relative}
  html:not(.pop) .dl-head .seg{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%)}
  html:not(.embed):not(.pop) #openDeal,html:not(.embed):not(.pop) #openBoard{display:none}
  html:not(.embed):not(.pop) .dl-col.ctxcol{background:transparent; border:0; border-radius:0; overflow:visible}
  html:not(.embed):not(.pop) .ctxcol > .h{display:none}
  html:not(.embed):not(.pop) .ctx{padding:0 0 84px; gap:10px}
}
.dcard{background:#fff; border:1px solid #E6E9EC; border-radius:14px; padding:14px 16px; min-width:0}
/* the deal card stays put while the numbers and files scroll under it (Jacob 10/16); its offers, short, one line a funder */
.ctx > .dhead{position:sticky; top:0; z-index:3; box-shadow:0 6px 12px -10px rgba(16,24,40,.25)}
.offm{display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:12px; margin-top:10px; padding-top:10px; border-top:1px solid #EEF0F2; font-size:13px; align-items:start}
.offm .k{color:var(--muted)}
.offm .none{color:var(--muted2)}
.offm .ol{display:flex; flex-direction:column; gap:6px; max-height:160px; overflow:auto}
.offm .or{display:flex; justify-content:space-between; align-items:baseline; gap:10px; min-width:0}
.offm .on{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink)}
.offm .or b{flex:none; font-weight:600; color:var(--p); font-variant-numeric:tabular-nums}
.offm .ot{color:var(--muted); font-size:12px; line-height:1.35; white-space:normal; overflow-wrap:anywhere}
.dcard .dch{display:flex; align-items:baseline; gap:6px; margin-bottom:8px}
.dcard .dch b{font-size:14px; font-weight:600; color:var(--ink)}
.dcard .dch .dcn{font-size:12px; color:var(--muted)}
.dcard .dch .dchr{margin-left:auto; font-size:12px; color:var(--muted); font-weight:500}
.dcard .dch .dlink{margin-left:auto; border:0; background:transparent; padding:0; color:var(--p); font:600 12px Inter,sans-serif; cursor:pointer}
.dcard .dch .dlink:hover{text-decoration:underline}
/* the deal: labels over Open the deal, answers starting where Deal Board starts (Jacob 10/15) */
.dcard h2{font-size:15px}
.kv2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 8px; font-size:13px; margin-top:10px}
.kv2 .k{color:var(--muted)} .kv2 .v{color:var(--ink); font-weight:500; min-width:0; overflow-wrap:anywhere}
.dgo{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:14px}
.dgo a{height:36px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; font:600 13px Inter,sans-serif; text-decoration:none; white-space:nowrap}
.dgo a:only-child{grid-column:1 / -1}
.dgo .godeal{background:var(--p); color:#fff} .dgo .godeal:hover{filter:brightness(.95)}
.dgo .goboard{background:#F1F3F4; color:var(--ink)} .dgo .goboard:hover{background:#E8EBED}
/* the numbers: one line each, all the same height; the one being viewed lit up (only its colour changes, nothing moves),
   the marks in one fixed row under the list for that number; the numbers we no longer text at the bottom (Jacob 10/15) */
.dcard.dnums{padding:12px 8px 8px}
.dnums .dch{padding:0 8px}
.dnums .dsub{padding:0 8px 4px; font-size:11.5px; font-weight:600; color:var(--muted)}
.dnums .dsub.off{margin:8px 8px 0; padding:8px 0 2px; border-top:1px solid var(--div)}
.nrow{display:flex; align-items:center; gap:8px; width:100%; height:40px; padding:0 10px; border:0; border-radius:10px; background:transparent; text-align:left; cursor:pointer; font:inherit; color:var(--body); box-sizing:border-box; min-width:0}
.nrow:hover{background:#F6F7F8}
.nrow .rd{width:14px; height:14px; flex:none; border-radius:999px; background:#fff; box-shadow:inset 0 0 0 1.5px #B9C0C6}
.nrow .nn{font-size:14px; font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums}
.nrow .ntag{font-size:11px; font-weight:600; padding:2px 7px; border-radius:999px; background:#EEF0F2; color:var(--body); white-space:nowrap}
.nrow .ntag.good{background:var(--p-soft); color:#14865F} .nrow .ntag.bad{background:var(--badsoft); color:var(--bad)}
.nrow .ndot{width:7px; height:7px; flex:none; border-radius:999px; background:var(--p)}
.nrow .nr{margin-left:auto; font-size:12px; color:var(--muted); white-space:nowrap}
.nrow .nr.bad{color:var(--bad); font-weight:600}
.nrow.on{background:var(--p-soft); box-shadow:inset 0 0 0 1.5px var(--p)}
.nrow.on .rd{box-shadow:inset 0 0 0 4px var(--p)}
.nrow.on .nn{color:#08624A; font-weight:700}
.nrow.on .ntag{background:#fff}
.nrow.on .nr{color:var(--p); font-weight:700}
.nrow.off{height:32px}
.nrow.off .nn{color:var(--muted); font-weight:500; text-decoration:line-through}
.nrow.off.on .nn{text-decoration:none}
.nact{display:flex; align-items:center; gap:6px; margin:6px 0 0; padding:8px 8px 2px 10px; border-top:1px solid var(--div); font-size:12px; color:var(--muted); min-height:30px}
.nact .nat{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums}
.nact button{height:28px; padding:0 10px; border:0; border-radius:8px; background:#F1F3F4; color:var(--body); font:500 12px Inter,sans-serif; cursor:pointer; white-space:nowrap}
.nact button:hover{background:#E8EBED}
.nact button[data-markstop]{background:var(--badsoft); color:#A33E3E}
.nact button[data-markgood]{background:var(--p-soft); color:var(--p)}
/* the files: View all in the heading; Clean up and Name statements one row of two the same size; one short line a file,
   how and when it came on hover (Jacob 10/15: "a lot of text") */
.dcard .ftools{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:10px}
.dcard .ftools button:only-child{grid-column:1 / -1}
.dcard .ftools button{height:34px; border:1px solid var(--hair); border-radius:10px; background:#fff; color:var(--body); font:600 12.5px Inter,sans-serif; display:inline-flex; align-items:center; justify-content:center; gap:7px; cursor:pointer; white-space:nowrap; min-width:0}
.dcard .ftools button:hover{background:#F6F7F8}
.dcard .ftools button svg{flex:none; color:var(--muted)}
.dcard .fsub{font-size:12px; color:var(--muted); padding:12px 0 6px}
.dcard .fsub:first-of-type{padding-top:2px}
.dcard .frow{display:flex; align-items:center; gap:10px; margin:0; border-top:1px solid var(--div); min-height:40px}
.dcard .frow .file{flex:1; min-width:0; margin:0; padding:9px 0; border:0; border-radius:0; display:flex; align-items:center; gap:10px; min-height:40px; box-sizing:border-box; font-size:13px; line-height:1.35; background:transparent}
.dcard .frow .file:hover .fn{color:var(--p)}
.dcard .file .fdot{width:7px; height:7px; flex:none; border-radius:999px}
.dcard .file .fdot.new{background:#14865F}
.dcard .file .fn{flex:1; min-width:0; font-weight:500; overflow-wrap:anywhere; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden}
.dcard .file .fd{flex:none; font-size:12px; color:var(--muted); padding-left:6px}
.dcard .file .fd.new{color:#14865F}
.dcard .frow .fed{height:26px; border:0; background:#F1F3F4; color:var(--ink); font-weight:500; border-radius:8px}
.dcard .frow.gone .file{opacity:.6}
.dcard .shop{border:0; padding:0}
.dcard.doffers .dch{margin-bottom:0}
.dcard.doffers .shop{margin-top:8px}

}