/* ==========================================================================
   Luxe contact card — styling only.
   Applies to the contact card (#modalBox.cv) and the dialer's contact card (#dStage).
   Loaded last so it sits on top of the older card styles; no behavior lives here.
   ========================================================================== */
:root{
  --lx-p:#5B2BB5; --lx-pd:#4A1F9A; --lx-tint:#F4F0FB; --lx-tint2:#ECE5F8;
  --lx-or:#F28C28; --lx-ord:#D9741A;
  --lx-line:#E7E3EE; --lx-bg:#F6F4F9; --lx-tx:#181326; --lx-mu:#6E6880; --lx-ok:#1F9D55;
  --lx-font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --lx-sh:0 1px 2px rgba(24,19,38,.04),0 4px 14px rgba(24,19,38,.04);
}

/* ---------- font + page ---------- */
#modalBox.cv,#dStage{font-family:var(--lx-font);color:var(--lx-tx);-webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01"}
#modalBox.cv :is(button,input,select,textarea,a,span,b,small,div,h3,h4,label),
#dStage :is(button,input,select,textarea,a,span,b,small,div,h3,h4,label){font-family:inherit}
#modalBox.cv{background:var(--lx-bg)}
#modalBox.cv>.body{background:var(--lx-bg)}
#modalBox.cv footer{background:#fff;border-top:1px solid var(--lx-line)}
#dStage,#dStage .ws{background:var(--lx-bg)}
#dStage .notes{background:#fff;border-left:1px solid var(--lx-line)}

/* ---------- buttons (slightly 3D: soft bottom shadow) ---------- */
:is(#modalBox.cv,#dStage) .b3{font-weight:600!important;letter-spacing:0!important;text-shadow:none!important;border-radius:10px!important}
:is(#modalBox.cv,#dStage) .b3 svg.i{stroke-width:1.8}
/* purple (solid) */
:is(#modalBox.cv,#dStage) .b3:not(.wh):not(.or):not(.gr):not(.rd):not(.lk-blue):not(.lk-yellow):not(.cnav),
:is(#modalBox.cv,#dStage) .b3[data-qa="appt"],
:is(#modalBox.cv,#dStage) .b3.vfu-btn:not(.on),
:is(#modalBox.cv,#dStage) #lxTxSend,
:is(#modalBox.cv,#dStage) .b3.gr[data-dialpi]{
  color:#fff!important;border:1px solid var(--lx-pd)!important;
  background:linear-gradient(180deg,#6936C9 0%,var(--lx-p) 100%)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 2px 0 var(--lx-pd),0 4px 10px rgba(74,31,154,.18)!important}
:is(#modalBox.cv,#dStage) .b3[data-qa="appt"] svg.i,:is(#modalBox.cv,#dStage) #lxTxSend svg.i{color:#fff}
/* white */
:is(#modalBox.cv,#dStage) .b3.wh:not(.vn-btn.on),
:is(#modalBox.cv,#dStage) .b3[data-qa="task"],
:is(#modalBox.cv,#dStage) .b3[data-qa="snooze"],
:is(#modalBox.cv,#dStage) .b3[data-netsheet],
:is(#modalBox.cv,#dStage) .b3[data-mcalc],
:is(#modalBox.cv,#dStage) .b3[data-prep]{
  color:var(--lx-tx)!important;border:1px solid var(--lx-line)!important;background:#fff!important;
  box-shadow:0 2px 0 #E2DCEB,0 3px 8px rgba(24,19,38,.05)!important}
:is(#modalBox.cv,#dStage) .b3.wh svg.i,
:is(#modalBox.cv,#dStage) .b3:is([data-qa="task"],[data-qa="snooze"],[data-netsheet],[data-mcalc],[data-prep]) svg.i{color:var(--lx-p);width:16px;height:16px}
/* purple outline */
:is(#modalBox.cv,#dStage) .b3[data-qa="fu"]{
  color:var(--lx-p)!important;border:1.5px solid var(--lx-p)!important;background:#fff!important;
  box-shadow:0 2px 0 #D9CCF0,0 3px 8px rgba(74,31,154,.08)!important}
:is(#modalBox.cv,#dStage) .b3[data-qa="fu"] svg.i{color:var(--lx-p)}
/* orange (call, save note) */
:is(#modalBox.cv,#dStage) .b3.or:not(.cnav),
:is(#modalBox.cv,#dStage) #cvSave,
:is(#modalBox.cv,#dStage) #saveNote{
  color:#fff!important;border:1px solid var(--lx-ord)!important;
  background:linear-gradient(180deg,#F59A3F 0%,var(--lx-or) 100%)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 2px 0 #C7661A,0 4px 10px rgba(242,140,40,.22)!important}
:is(#modalBox.cv,#dStage) .b3:active:not(:disabled){transform:translateY(2px)!important;box-shadow:0 0 0 rgba(0,0,0,0)!important}
:is(#modalBox.cv,#dStage) .b3:disabled{opacity:.45}

/* action row */
:is(#modalBox.cv,#dStage) :is(.cvmain,.lead)>.actions{gap:8px!important}
:is(#modalBox.cv,#dStage) :is(.cvmain,.lead)>.actions .b3{font-size:14px!important;padding:8px 14px!important;gap:7px!important}
:is(#modalBox.cv,#dStage) :is(.cvmain,.lead)>.actions .b3,
:is(#modalBox.cv,#dStage) :is(.cvmain,.lead)>.actions .b3 *{font-weight:600!important}

/* ---------- contact card body ---------- */
#modalBox.cv .cvgrid,#dStage .ccard .lcard{background:#fff!important;border:1px solid var(--lx-line)!important;border-radius:16px;box-shadow:var(--lx-sh)}
#dStage .ccard{border:1px solid var(--lx-line)!important;border-radius:16px;background:#fff;box-shadow:var(--lx-sh)}
#dStage .ccard.live{border-color:#2f9e52!important;box-shadow:0 0 0 3px #CDEBD7!important}
#dStage .ccard .lcard{border:0!important;border-radius:0;box-shadow:none}
@media (min-width:821px){
  #modalBox.cv .cvgrid>div+div,#dStage .lcard>div+div{border-left:1px solid #EEEAF3!important}
}
:is(#modalBox.cv,#dStage) .addr{color:var(--lx-tx)}
:is(#modalBox.cv,#dStage) .addr.big{font-weight:600;letter-spacing:-.01em}
:is(#modalBox.cv,#dStage) :is(.cvgrid,.lcard) .addr svg{color:var(--lx-p)!important}
:is(#modalBox.cv,#dStage) .o2line{color:var(--lx-p)}
:is(#modalBox.cv,#dStage) .lname{color:var(--lx-tx)}

/* section labels (Phones / Email) */
:is(#modalBox.cv,#dStage) :is(.cvgrid,.lcard) .kicker{background:none!important;box-shadow:none!important;color:var(--lx-mu)!important;
  padding:0!important;font-size:11px;font-weight:700;letter-spacing:.08em}
:is(#modalBox.cv,#dStage) .kicker{color:var(--lx-mu)}
:is(#modalBox.cv,#dStage) .plus{background:var(--lx-tint)!important;color:var(--lx-p)!important;border:1px solid #DCD0F2!important;
  box-shadow:0 1px 0 #D9CCF0!important;font-weight:700;width:20px;height:20px;font-size:14px}

/* avatar: purple gradient, orange ring */
:is(#modalBox.cv,#dStage) .avatar{background:linear-gradient(135deg,#7B4FD8 0%,var(--lx-p) 50%,var(--lx-pd) 100%)!important;
  border:3px solid #fff!important;text-shadow:none!important;font-weight:700;letter-spacing:.02em;
  box-shadow:0 0 0 2.5px var(--lx-or),0 6px 16px rgba(74,31,154,.25)!important}

/* phones: primary = solid purple pill, others = tint pill */
:is(#modalBox.cv,#dStage) :is(.cvgrid,.lcard) .num{background:var(--lx-tint)!important;color:var(--lx-p)!important;border:1px solid #E1D7F3!important;
  box-shadow:0 1px 0 #DDD2F0!important;font-weight:700!important;letter-spacing:.01em;padding:4px 14px!important}
:is(#modalBox.cv,#dStage) :is(.cvgrid,.lcard) .prow:has(.pstar.on) .num:not(.bad):not(.dnc){background:linear-gradient(180deg,#6936C9 0%,var(--lx-p) 100%)!important;
  color:#fff!important;border-color:var(--lx-pd)!important;box-shadow:0 2px 0 var(--lx-pd),0 4px 10px rgba(74,31,154,.18)!important}
:is(#modalBox.cv,#dStage) :is(.cvgrid,.lcard) .num.dial:hover{background:#E9E0F8!important}
:is(#modalBox.cv,#dStage) :is(.cvgrid,.lcard) .prow:has(.pstar.on) .num.dial:hover{background:var(--lx-pd)!important}
:is(#modalBox.cv,#dStage) :is(.cvgrid,.lcard) .num:is(.bad,.dnc){background:#fff!important;color:var(--lx-mu)!important;border-color:var(--lx-line)!important;box-shadow:none!important}
:is(#modalBox.cv,#dStage) .pstar{color:#D6D0E0}
:is(#modalBox.cv,#dStage) .pstar:hover,:is(#modalBox.cv,#dStage) .pstar.on{color:var(--lx-or)!important;text-shadow:none!important}
/* emails */
:is(#modalBox.cv,#dStage) :is(.cvgrid,.lcard) .prow a[href^=mailto]{background:var(--lx-tint)!important;color:var(--lx-p)!important;border:1px solid #E1D7F3!important;
  box-shadow:none!important;font-weight:600!important;padding:4px 14px!important}

/* Map / Zillow / Homes.com (property + listing agent) */
:is(#modalBox.cv,#dStage) .linkrow .b3.lk-blue,
:is(#modalBox.cv,#dStage) .linkrow .b3.lk-yellow,
:is(#modalBox.cv,#dStage) a.agentlink{
  background:#fff!important;color:var(--lx-tx)!important;border:1px solid var(--lx-line)!important;text-shadow:none!important;
  box-shadow:0 2px 0 #E2DCEB,0 3px 8px rgba(24,19,38,.05)!important;font-weight:600!important;border-radius:10px!important}
:is(#modalBox.cv,#dStage) .linkrow .b3 svg.i,:is(#modalBox.cv,#dStage) a.agentlink svg.i{color:var(--lx-p);width:16px;height:16px}
:is(#modalBox.cv,#dStage) .linkrow .b3 svg.i:last-child,:is(#modalBox.cv,#dStage) a.agentlink svg.i:last-child{width:13px;height:13px;color:var(--lx-mu)}
:is(#modalBox.cv,#dStage) a.agentlink{font-size:14px!important;padding:5px 12px!important;gap:6px!important}

/* ---------- stats strip (unchanged, Expired = green) ---------- */
:is(#modalBox.cv,#dStage) .facts>div:nth-child(1)>b{color:var(--lx-ok)!important}

/* Attempts / Last dial / Follow up / Appointment tiles: icon in a light purple square */
:is(#modalBox.cv,#dStage) .facts>div:nth-child(n+5){display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ic v" "ic l";
  align-items:center;column-gap:10px;text-align:left;padding:10px 12px!important;background:#fff!important;border-top:1px solid var(--lx-line)!important}
:is(#modalBox.cv,#dStage) .facts>div:nth-child(n+5)>b{grid-area:v;color:var(--lx-tx)!important;font-size:17px!important;font-weight:700!important;min-width:0;overflow:hidden;text-overflow:ellipsis}
:is(#modalBox.cv,#dStage) .facts>div:nth-child(n+5)>span{grid-area:l;color:var(--lx-mu)!important;font-size:11px!important;font-weight:600!important}
:is(#modalBox.cv,#dStage) .facts>div:nth-child(n+5)::before{content:"";grid-area:ic;width:36px;height:36px;border-radius:10px;
  background:var(--lx-tint) var(--ic) center/18px 18px no-repeat;border:1px solid #E6DDF5}
:is(#modalBox.cv,#dStage) .facts>div:nth-child(5){--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B2BB5' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E")}
:is(#modalBox.cv,#dStage) .facts>div:nth-child(6){--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B2BB5' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 8v4l3 2'/%3E%3C/svg%3E")}
:is(#modalBox.cv,#dStage) .facts>div:nth-child(7){--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B2BB5' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 1 0 2.3-5.7M4 4v4h4'/%3E%3C/svg%3E")}
:is(#modalBox.cv,#dStage) .facts>div:nth-child(8){--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B2BB5' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E")}
:is(#modalBox.cv,#dStage) .facts .setone{color:var(--lx-or);font-size:14px;font-weight:600;letter-spacing:0}
:is(#modalBox.cv,#dStage) .facts>div:hover .setone{text-decoration:underline}

/* ---------- group buttons ---------- */
:is(#modalBox.cv,#dStage) .groups .b3{--gd:#B9AED0;color:var(--lx-tx)!important;border:1px solid var(--lx-line)!important;background:#fff!important;
  box-shadow:0 2px 0 #E2DCEB,0 3px 8px rgba(24,19,38,.05)!important;font-weight:600!important}
:is(#modalBox.cv,#dStage) .groups .b3::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gd);flex:none;box-shadow:0 0 0 2px rgba(255,255,255,.9)}
:is(#modalBox.cv,#dStage) .groups .b3:is([data-g="Dead Lead"],[data-cvg="Dead Lead"]){--gd:#9A94A6}
:is(#modalBox.cv,#dStage) .groups .b3:is([data-g="Appointment Set"],[data-cvg="Appointment Set"]){--gd:#E5484D}
:is(#modalBox.cv,#dStage) .groups .b3:is([data-g="Daily Follow Up"],[data-cvg="Daily Follow Up"]){--gd:#D9A400}
:is(#modalBox.cv,#dStage) .groups .b3:is([data-g="Hot Leads"],[data-cvg="Hot Leads"]){--gd:var(--lx-or)}
:is(#modalBox.cv,#dStage) .groups .b3:is([data-g^="Hot Daily"],[data-cvg^="Hot Daily"]){--gd:#E5539E}
:is(#modalBox.cv,#dStage) .groups .b3.or{color:#fff!important;border-color:var(--lx-pd)!important;
  background:linear-gradient(180deg,#6936C9 0%,var(--lx-p) 100%)!important;box-shadow:0 2px 0 var(--lx-pd),0 4px 10px rgba(74,31,154,.2)!important}
:is(#modalBox.cv,#dStage) .groups .b3.was{border:1.5px solid var(--lx-p)!important}
#dStage .gpick .ok{color:var(--lx-ok)}

/* ---------- detail cards (Assigned agents, MLS ID, Listing agent, Listing broker…) ---------- */
:is(#modalBox.cv,#dStage) .fields{gap:10px!important}
:is(#modalBox.cv,#dStage) .fields>div{display:flex!important;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;
  background:#fff!important;border:1px solid var(--lx-line)!important;border-radius:12px!important;padding:12px 14px!important;box-shadow:var(--lx-sh)}
:is(#modalBox.cv,#dStage) .fields>div>span{color:var(--lx-mu)!important;font-size:11px!important;font-weight:600!important;letter-spacing:.08em!important;text-transform:uppercase}
:is(#modalBox.cv,#dStage) .fields>div>b{color:var(--lx-tx)!important;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;min-width:0}
:is(#modalBox.cv,#dStage) .fields>div>b a.agentlink{margin:0!important}
:is(#modalBox.cv,#dStage) .lx-agbtn{background:#fff!important;border:1px solid var(--lx-line)!important;color:var(--lx-tx)!important;border-radius:10px!important;box-shadow:0 2px 0 #E2DCEB!important}
:is(#modalBox.cv,#dStage) .recs,:is(#modalBox.cv,#dStage) .acts{border-color:var(--lx-line)}
#modalBox.cv .recs{border-radius:12px}
:is(#modalBox.cv,#dStage) .remarks{color:var(--lx-mu)}

/* ---------- notes side ---------- */
#modalBox.cv .cvside{background:#fff!important;border:1px solid var(--lx-line)!important;border-radius:16px!important;box-shadow:var(--lx-sh)}
:is(#modalBox.cv,#dStage) :is(.cvside,.notes) :is(h3,h4){color:var(--lx-tx)!important;font-weight:600!important;letter-spacing:-.01em}
:is(#modalBox.cv,#dStage) :is(.cvside,.notes) h4 small{color:var(--lx-mu)!important}
:is(#modalBox.cv,#dStage) textarea{border:1px solid var(--lx-line)!important;border-radius:12px!important;background:#fff}
:is(#modalBox.cv,#dStage) textarea:focus{outline:2px solid #CDBDF0;outline-offset:0;border-color:var(--lx-p)!important}
:is(#modalBox.cv,#dStage) .sidesep{border-top-color:var(--lx-line)!important}
:is(#modalBox.cv,#dStage) .lx-tx .thr{background:var(--lx-tint)!important}
:is(#modalBox.cv,#dStage) .lx-tx .b.out{background:var(--lx-p)!important}
:is(#modalBox.cv,#dStage) .lx-tx :is(select,textarea){border-color:var(--lx-line)!important}
/* previous notes: first in light purple tint, the rest white — no colored left borders */
:is(#modalBox.cv,#dStage) .hist>div{border:1px solid var(--lx-line)!important;border-radius:12px!important;background:#fff!important;padding:10px 12px!important}
:is(#modalBox.cv,#dStage) .hist>div.hnote:first-child{background:var(--lx-tint)!important;border-color:#E3D9F5!important}
:is(#modalBox.cv,#dStage) .hist .ntext{color:var(--lx-tx)}
:is(#modalBox.cv,#dStage) .hist small{color:var(--lx-mu)!important}
:is(#modalBox.cv,#dStage) .ne-btn{color:var(--lx-p)}

/* ---------- phones / small screens ---------- */
@media (max-width:600px){
  :is(#modalBox.cv,#dStage) :is(.cvmain,.lead)>.actions .b3{font-size:13px!important;padding:7px 11px!important}
  :is(#modalBox.cv,#dStage) .facts>div:nth-child(n+5){padding:8px!important;column-gap:8px}
  :is(#modalBox.cv,#dStage) .facts>div:nth-child(n+5)::before{width:30px;height:30px;background-size:16px 16px}
  :is(#modalBox.cv,#dStage) .facts>div:nth-child(n+5)>b{font-size:15px!important}
  :is(#modalBox.cv,#dStage) .groups .b3{font-size:13px!important}
}

/* header: keep the deep purple, set the name in Inter */
#modalBox.cv header h3 [data-edit="eFirst"]{font-weight:700!important;letter-spacing:-.01em!important;text-shadow:0 2px 10px rgba(0,0,0,.35)!important}
:is(#modalBox.cv,#dStage) .facts .setone{text-transform:none}
:is(#modalBox.cv,#dStage) :is(.cvgrid,.lcard) .num{white-space:nowrap}
:is(#modalBox.cv,#dStage) .fields>div>b .edt{color:var(--lx-tx)}

/* ==========================================================================
   Contact card — full-page layout (matches the "Sleek luxury" target)
   ========================================================================== */
#modal.modal-bg:has(> #modalBox.cv){padding:0!important;align-items:stretch;background:var(--lx-bg)}
#modalBox.modal.wide.cv{width:100%!important;max-width:none!important;min-height:100vh;margin:0!important;border-radius:0!important;box-shadow:none!important;display:flex;flex-direction:column}
#modalBox.cv>.body{flex:1;padding:22px clamp(16px,3vw,40px) 30px!important;display:block!important}
#modalBox.cv footer{position:sticky;bottom:0;z-index:4;flex-wrap:wrap}

/* header bar */
#modalBox.cv header{position:sticky;top:0;z-index:6;border-radius:0!important;padding:14px clamp(16px,3vw,40px)!important;border-bottom:2px solid var(--lx-or)!important;
  background:linear-gradient(180deg,#2E1263 0%,#24104F 100%)!important;box-shadow:0 2px 12px rgba(24,19,38,.18)!important}
#modalBox.cv header h3{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:16px!important;padding:0 44px 0 0!important;flex-wrap:nowrap!important;margin:0}
#modalBox.cv .b3.cnav{position:static!important;flex:none;width:38px;height:38px;padding:0!important;font-size:22px!important;font-weight:500!important;border-radius:10px!important;
  background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.18)!important;color:#fff!important;box-shadow:none!important}
#modalBox.cv .b3.cnav:disabled{opacity:.35}
#modalBox.cv .lux-hd{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;text-align:left}
#modalBox.cv .lux-hname{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#modalBox.cv header h3 .lux-hname [data-edit="eFirst"]{font-size:30px!important;font-weight:700!important;letter-spacing:-.02em!important;padding:0 4px!important;margin:0 -4px;text-shadow:none!important;line-height:1.15}
#modalBox.cv header h3 .chip{font-size:12px!important;font-weight:600;padding:3px 10px!important;border-radius:999px;box-shadow:none!important;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.28)}
#modalBox.cv header h3 .chip.Expired{background:rgba(31,157,85,.18);color:#8FE0B0;border-color:rgba(143,224,176,.4)}
#modalBox.cv .lux-gtag{font-size:13px;font-weight:600;color:#fff;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28)}
#modalBox.cv .lux-sub{font-size:13px;color:rgba(255,255,255,.72);font-weight:500}
#modalBox.cv .lux-sub .cvpos{position:static!important;color:inherit!important;font-size:inherit}
#modalBox.cv .b3.lux-call{flex:none;font-size:17px!important;padding:12px 22px!important;border-radius:12px!important}
#modalBox.cv .mclose{top:50%!important;right:12px!important;transform:translateY(-50%);width:30px;height:30px;font-size:14px;background:rgba(255,255,255,.1)!important;
  border:1px solid rgba(255,255,255,.22)!important;box-shadow:none!important;text-shadow:none;z-index:7;position:fixed}
#modalBox.cv .mclose{position:fixed!important;top:26px!important;transform:none!important}
#modalBox.cv>header{position:sticky}

/* two columns */
#modalBox.cv .cvwrap{grid-template-columns:minmax(0,1fr) 340px!important;gap:22px!important;max-width:1440px;margin:0 auto}
#modalBox.cv .cvmain{gap:14px!important}
#modalBox.cv .cvmain>.actions{justify-content:flex-start!important;margin:0!important}

/* tiles */
#modalBox.cv .lux-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
#modalBox.cv .lux-tile{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--lx-line);border-radius:14px;padding:16px 18px;box-shadow:var(--lx-sh);text-align:left;min-width:0}
#modalBox.cv .lux-tile[data-fedit]{cursor:pointer}
#modalBox.cv .lux-tile[data-fedit]:hover{border-color:#D5C8EE}
#modalBox.cv .lux-ico{flex:none;width:40px;height:40px;border-radius:11px;background:var(--lx-tint);border:1px solid #E6DDF5;display:grid;place-items:center;color:var(--lx-p)}
#modalBox.cv .lux-ico svg.i{width:19px;height:19px}
#modalBox.cv .lux-tt{display:flex;flex-direction:column;min-width:0}
#modalBox.cv .lux-lb{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--lx-mu)}
#modalBox.cv .lux-tt b{font-size:19px;font-weight:700;color:var(--lx-tx);letter-spacing:-.01em;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#modalBox.cv .lux-tt small{font-size:12.5px;color:var(--lx-mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#modalBox.cv .setone{color:var(--lx-or);font-weight:600}

/* property card */
#modalBox.cv .cvgrid.lux-prop{display:grid!important;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr)!important;gap:24px!important;padding:20px 22px!important;text-align:left!important;border-top:1px solid var(--lx-line)!important}
#modalBox.cv .cvgrid.lux-prop>div+div{border-left:0!important;padding-left:0!important}
#modalBox.cv .lux-prop .kicker{display:block!important;margin:0 0 10px!important;text-align:left!important}
#modalBox.cv .lux-who{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px}
#modalBox.cv .lux-av{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;flex:none}
#modalBox.cv .lux-av .avatar{margin:0!important;width:72px;height:72px;font-size:24px}
#modalBox.cv .lux-av .lead-star{position:absolute!important;top:-6px!important;left:-8px!important;font-size:22px!important;padding:0!important;z-index:3}
#modalBox.cv .lux-av .zst{position:static!important;max-width:110px!important;order:2;background:#fff!important;border:1px solid var(--lx-line)!important;border-radius:8px!important;font-weight:600!important;font-size:12px!important;padding:4px 6px!important}
#modalBox.cv .lux-own{padding-top:6px;min-width:0}
#modalBox.cv .lux-own .kicker{margin:0 0 2px!important}
#modalBox.cv .lux-prop .o2line{justify-content:flex-start!important;margin:0;font-weight:600;font-size:14px}
#modalBox.cv .lux-addr{display:flex!important;align-items:flex-start;gap:6px;justify-content:flex-start!important;margin:0 0 10px}
#modalBox.cv .lux-addr .edt{display:flex;flex-direction:column;font-size:21px;font-weight:700;line-height:1.25;color:var(--lx-tx);letter-spacing:-.015em}
#modalBox.cv .lux-addr .lx-copy2{margin-top:4px}
#modalBox.cv .lux-pa .addr:not(.lux-addr){justify-content:flex-start!important;font-size:14px;margin:0 0 4px;gap:0}
#modalBox.cv .lux-pa .addr:not(.lux-addr)>svg{display:none}
#modalBox.cv .lux-line{font-size:14px;color:#3B3550;margin:0 0 4px}
#modalBox.cv .lux-line b,#modalBox.cv .lux-pa .addr b{font-weight:600!important;color:var(--lx-tx)}
#modalBox.cv .lux-prop .linkrow{justify-content:flex-start!important;margin-top:14px;flex-wrap:wrap}
#modalBox.cv .lux-prop .prow{justify-content:flex-start!important;flex-wrap:wrap;gap:6px;margin-bottom:12px}
#modalBox.cv .lux-prop .prow .num{font-size:15px}
#modalBox.cv .lux-prop .lux-car{flex-basis:100%;padding-left:30px;font-size:12px;color:var(--lx-mu);margin-top:-2px}
#modalBox.cv .lux-prop .lx-copy,#modalBox.cv .lux-prop .lx-sms,#modalBox.cv .lux-prop .phdel{width:28px!important;height:28px!important;margin:0!important;border:1px solid var(--lx-line)!important;border-radius:8px!important;background:#fff!important;color:var(--lx-mu)!important;display:inline-grid;place-items:center;font-size:12px}
#modalBox.cv .lux-prop .phdel{color:#C0392B!important}
#modalBox.cv .lux-pc .prow{justify-content:flex-start!important;flex-wrap:nowrap!important;margin-bottom:8px}
#modalBox.cv .lux-add{border:0;background:none;padding:2px 0;color:var(--lx-p);font-weight:600;font-size:14px;cursor:pointer;display:block}
#modalBox.cv .lux-add:hover{text-decoration:underline}

/* stats strip: one row of 5 */
#modalBox.cv .lux-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:#fff;border:1px solid var(--lx-line);border-radius:14px;box-shadow:var(--lx-sh);overflow:hidden}
#modalBox.cv .lux-stats>div{padding:14px 10px;text-align:center;border-left:1px solid var(--lx-line);display:flex;flex-direction:column;gap:6px;min-width:0}
#modalBox.cv .lux-stats>div:first-child{border-left:0}
#modalBox.cv .lux-stats>div>span{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--lx-mu)}
#modalBox.cv .lux-stats b{font-size:21px;font-weight:700;color:var(--lx-tx);letter-spacing:-.01em;display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;overflow:hidden}
#modalBox.cv .lux-stats b .edt{color:var(--lx-tx);overflow:hidden;text-overflow:ellipsis}
#modalBox.cv .lux-stats b .lx-copy2{margin:0;flex:none}
#modalBox.cv .lux-green{color:var(--lx-ok)}

/* generic white card */
#modalBox.cv .lux-card{background:#fff;border:1px solid var(--lx-line);border-radius:14px;box-shadow:var(--lx-sh);padding:14px 18px}
#modalBox.cv .lux-grp .kicker{text-align:left!important;margin:0 0 10px!important}
#modalBox.cv .lux-grp .kicker small{font-weight:500;letter-spacing:0;text-transform:none;color:var(--lx-mu)}
#modalBox.cv .lux-grp .groups{justify-content:flex-start!important;margin:0!important}

/* three equal cards */
#modalBox.cv .fields.lux-trio{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important}
#modalBox.cv .fields.lux-trio>div{min-height:104px;border-radius:14px!important}

/* collapsed extras */
#modalBox.cv .lux-more{background:#fff;border:1px solid var(--lx-line);border-radius:14px;box-shadow:var(--lx-sh)}
#modalBox.cv .lux-more>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:16px 18px;font-weight:700;font-size:15px;color:var(--lx-tx)}
#modalBox.cv .lux-more>summary::-webkit-details-marker{display:none}
#modalBox.cv .lux-show{color:var(--lx-p);font-weight:600;font-size:14px;white-space:nowrap}
#modalBox.cv .lux-more[open] .lux-show{font-size:0}
#modalBox.cv .lux-more[open] .lux-show::after{content:"Hide ‹";font-size:14px}
#modalBox.cv .lux-morebody{padding:0 18px 18px;display:grid;gap:12px;text-align:left}
#modalBox.cv .lux-morebody>.kicker{margin:6px 0 0;text-align:left!important}
#modalBox.cv .lux-morebody .remarks{text-align:left!important}
#modalBox.cv .lux-details{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
#modalBox.cv .lux-details>div{border:1px solid var(--lx-line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:4px}
#modalBox.cv .lux-details span{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--lx-mu)}
#modalBox.cv .lux-details b{color:var(--lx-tx)}

/* sidebar */
#modalBox.cv .cvside{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;gap:14px!important;text-align:left!important;top:96px!important;max-height:calc(100vh - 170px)!important}
#modalBox.cv .cvside>.sidesep{display:none}
#modalBox.cv .lux-sc,#modalBox.cv .cvside>.lx-tx{background:#fff;border:1px solid var(--lx-line);border-radius:14px;box-shadow:var(--lx-sh);padding:16px 18px;display:grid;gap:10px}
#modalBox.cv .cvside h4{margin:0!important;font-size:16px!important;display:flex;align-items:center;gap:6px;justify-content:flex-start!important}
#modalBox.cv .cvside h4 .lx-sumb{margin-left:auto!important}
#modalBox.cv .vn-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0!important;justify-content:flex-start!important}
#modalBox.cv .vn-head h4{margin-right:auto!important}
#modalBox.cv .vn-head .b3{font-size:13px!important;padding:6px 10px!important}
#modalBox.cv .lux-save{display:flex;justify-content:flex-end}
#modalBox.cv .cvside>.lx-tx h4{justify-content:flex-start!important;margin:0!important}
#modalBox.cv .cvside>.lx-tx .row:last-child{justify-content:flex-end!important}
#modalBox.cv .cvside>.lx-tx .row:last-child>span:empty{display:none}
#modalBox.cv .lux-latest{background:#FFF6E0;border:1px solid #F5D78E;border-top:1px solid #F5D78E!important;border-radius:14px;padding:16px 18px;display:grid;gap:8px;box-shadow:var(--lx-sh)}
#modalBox.cv .lux-latest .lux-lb{color:#A0520D;font-size:11px;font-weight:800}
#modalBox.cv .lux-lt{font-size:18px;font-weight:700;line-height:1.35;color:#1E1530;white-space:pre-wrap;word-break:break-word}
#modalBox.cv .lux-latest small{font-size:12px;color:#8A6A45;font-weight:500}
#modalBox.cv .cvside .hist>div{font-size:14px}

/* tablet / phone */
@media (max-width:1100px){
  #modalBox.cv .cvwrap{grid-template-columns:minmax(0,1fr)!important}
  #modalBox.cv .cvside{position:static!important;max-height:none!important}


}
@media (max-width:820px){
  #modalBox.cv .lux-tiles{grid-template-columns:minmax(0,1fr)}
  #modalBox.cv .lux-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  #modalBox.cv .lux-stats>div{border-left:0;border-top:1px solid var(--lx-line)}
  #modalBox.cv .lux-stats>div:nth-child(-n+2){border-top:0}
  #modalBox.cv .lux-stats>div:nth-child(even){border-left:1px solid var(--lx-line)}
  #modalBox.cv .lux-stats>div:last-child{grid-column:1/-1;border-left:0}
  #modalBox.cv .fields.lux-trio{grid-template-columns:minmax(0,1fr)!important}
}
@media (max-width:600px){
  #modalBox.cv>.body{padding:14px 12px 20px!important}
  #modalBox.cv header{padding:10px 12px!important}
  #modalBox.cv header h3{flex-wrap:wrap!important;gap:10px!important;padding-right:36px!important}
  #modalBox.cv .lux-hd{flex:1 1 100%;order:0}
  #modalBox.cv .cnav.prev{order:1}
  #modalBox.cv header h3 .lux-hname [data-edit="eFirst"]{font-size:23px!important}
  #modalBox.cv .b3.lux-call{order:2;flex:1 1 0;min-width:0;font-size:16px!important;padding:10px 12px!important}
  #modalBox.cv .cnav.next{order:3}
  #modalBox.cv .mclose{top:14px!important}
  #modalBox.cv .cvgrid.lux-prop{grid-template-columns:minmax(0,1fr)!important;padding:16px!important;gap:18px!important}
  #modalBox.cv .lux-addr .edt{font-size:19px}
  #modalBox.cv .cvmain>.actions{justify-content:center!important}
}
@media (max-width:600px){ #modalBox.cv footer{position:static} }

/* ---------- sidebar always fits (no clipping at any width) ---------- */
#modalBox.cv .cvwrap{grid-template-columns:minmax(0,1fr) minmax(300px,360px)!important}
#modalBox.cv .cvwrap>*{min-width:0}
#modalBox.cv .cvside{grid-template-columns:minmax(0,1fr)!important;overflow-x:hidden!important;width:100%;box-sizing:border-box}
#modalBox.cv .cvside *{box-sizing:border-box}
#modalBox.cv .cvside>*,#modalBox.cv .lux-sc>*,#modalBox.cv .cvside>.lx-tx>*{min-width:0;max-width:100%}
#modalBox.cv .lux-sc,#modalBox.cv .cvside>.lx-tx{grid-template-columns:minmax(0,1fr)}
#modalBox.cv .cvside :is(.lux-lt,.ntext,.hist,.lx-tx .b,.lux-latest small){overflow-wrap:anywhere;word-break:normal}
#modalBox.cv .cvside textarea{width:100%!important;max-width:100%}
#modalBox.cv .vn-head{flex-wrap:wrap!important;row-gap:8px}
#modalBox.cv .vn-head .b3{white-space:nowrap;max-width:100%}
#modalBox.cv .cvside>.lx-tx .row{display:flex;flex-wrap:wrap!important;gap:6px;min-width:0}
#modalBox.cv .cvside>.lx-tx select{flex:1 1 130px!important;min-width:0!important;width:auto;max-width:100%;text-overflow:ellipsis}
#modalBox.cv .cvside>.lx-tx .row a{overflow-wrap:anywhere}
#modalBox.cv .cvside>.lx-tx .row>span{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;min-width:0}
#modalBox.cv .cvside h4{flex-wrap:wrap}
/* latest note: about 8 lines, then a more/less toggle */
#modalBox.cv .lux-lt{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:8;line-clamp:8;overflow:hidden}
#modalBox.cv .lux-latest.open .lux-lt{display:block;-webkit-line-clamp:unset;overflow:visible}
#modalBox.cv .lux-ltmore{justify-self:start;border:0;background:none;padding:0;color:#A0520D;font-weight:700;font-size:13px;cursor:pointer}
#modalBox.cv .lux-ltmore:hover{text-decoration:underline}
@media (max-width:1100px){
  #modalBox.cv .cvwrap{grid-template-columns:minmax(0,1fr)!important}
}
@media (max-width:1560px) and (min-width:601px){


}

/* ---------- fit fixes ---------- */
/* MLS ID is never truncated */
#modalBox.cv .lux-stats{grid-template-columns:repeat(4,minmax(0,1fr)) minmax(max-content,1.3fr)}
#modalBox.cv .lux-stats>div:last-child b{font-size:18px;overflow:visible;padding:0 6px}
#modalBox.cv .lux-stats>div:last-child b .edt{overflow:visible;text-overflow:clip;white-space:nowrap}
/* tile sublines wrap to 2 lines */
#modalBox.cv .lux-tt small{white-space:normal!important;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;text-overflow:clip;line-height:1.35}
/* all group buttons on one row at desktop widths */
/* sized by the main column's own width (container queries), so a side panel or narrow window never clips */
#modalBox.cv .cvmain{container-type:inline-size;container-name:cvmain}
@container cvmain (min-width:780px){
  #modalBox.cv .lux-grp .groups{flex-wrap:nowrap!important;gap:6px!important}
  #modalBox.cv .lux-grp .groups .b3{flex:0 0 auto;font-size:clamp(11px,1.36cqi,14px)!important;padding:6px clamp(6px,.95cqi,12px)!important;gap:6px!important;white-space:nowrap}
}
@container cvmain (max-width:779px){
  #modalBox.cv .lux-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #modalBox.cv .lux-stats>div{border-left:0!important;border-top:1px solid var(--lx-line)}
  #modalBox.cv .lux-stats>div:nth-child(-n+2){border-top:0}
  #modalBox.cv .lux-stats>div:nth-child(even){border-left:1px solid var(--lx-line)!important}
  #modalBox.cv .lux-stats>div:last-child{grid-column:1/-1}
  #modalBox.cv .lux-tiles{grid-template-columns:minmax(0,1fr)}
  #modalBox.cv .fields.lux-trio{grid-template-columns:minmax(0,1fr)!important}
}
/* listing remarks shown open for Expired / Withdrawn / Cancelled */
#modalBox.cv .lux-remarks .kicker{text-align:left!important;margin:0 0 8px!important}
#modalBox.cv .lux-remarks .remarks{text-align:left!important;font-size:14px;line-height:1.6;color:#3B3550;white-space:pre-wrap;overflow-wrap:anywhere}
#modalBox.cv .cvmain{grid-template-columns:minmax(0,1fr)!important}
#modalBox.cv .cvmain>*{min-width:0}
@media (max-width:1200px){
  #modalBox.cv .cvwrap{grid-template-columns:minmax(0,1fr)!important}
  #modalBox.cv .cvside{position:static!important;max-height:none!important}
}

/* property card: 3 columns (property · phones · email) all starting at the top; stack only on phones */
#modalBox.cv .cvgrid.lux-prop{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr)!important;gap:20px!important;align-items:start}
#modalBox.cv .lux-pa,#modalBox.cv .lux-pb,#modalBox.cv .lux-pc{grid-column:auto!important;min-width:0}
#modalBox.cv .lux-prop .prow{gap:5px}
#modalBox.cv .lux-prop :is(.lx-copy,.lx-sms,.phdel){width:26px!important;height:26px!important;flex:none}
#modalBox.cv .lux-pc .prow a[href^=mailto]{min-width:0;flex:0 1 auto}
@media (max-width:760px){
  #modalBox.cv .cvgrid.lux-prop{grid-template-columns:minmax(0,1fr)!important;padding:16px!important;gap:18px!important}
}
#modalBox.cv .lux-pb{container-type:inline-size;container-name:cvph}
@container cvph (max-width:270px){
  #modalBox.cv .lux-pb .prow{gap:3px!important}
  #modalBox.cv .lux-pb :is(.lx-copy,.lx-sms,.phdel){width:22px!important;height:22px!important}
  #modalBox.cv .lux-pb :is(.lx-copy,.lx-sms) svg{width:11px!important;height:11px!important}
  #modalBox.cv .lux-pb .num{padding:3px 9px!important;font-size:14px!important}
  #modalBox.cv .lux-pb .pstar{font-size:15px;padding:0}
  #modalBox.cv .lux-pb .lux-car{padding-left:20px}
}

/* tile colors: follow-up green, appointment red, attempts purple */
#modalBox.cv .lux-tiles>.lux-tile:nth-child(1){--tc:#1E7B3C;--tb:#E3F5E9;--tl:#C9EBD5}
#modalBox.cv .lux-tiles>.lux-tile:nth-child(2){--tc:#C4242B;--tb:#FCE3E3;--tl:#F7CACA}
#modalBox.cv .lux-tiles>.lux-tile:nth-child(3){--tc:#5B2BB5;--tb:#EEE8FB;--tl:#DDD2F5}
#modalBox.cv .lux-tile .lux-ico{background:var(--tb)!important;border-color:var(--tl)!important;color:var(--tc)!important}
#modalBox.cv .lux-tile .lux-lb{color:var(--tc)!important;font-weight:800!important}
#modalBox.cv .lux-tile .lux-tt b{color:#181326!important;font-size:20px!important;font-weight:800!important}
#modalBox.cv .lux-tile .setone{color:var(--tc)!important;text-decoration:underline;text-underline-offset:2px}
/* lead status under the avatar: bold */
#modalBox.cv .lux-av .zst{font-weight:800!important;color:#181326!important}
#modalBox.cv .lux-av .zst option{font-weight:700}

/* Task tile: 4 across (Next follow-up, Appointment, Task, Attempts) */
@media (min-width: 821px) { #modalBox.cv .lux-tiles, #dStage .lux-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
/* Appointment Set: a 5th box (Follow-up call) — Attempts moves to its own full-width row underneath */
.lux-tiles.lux-t5 > .lux-tile:last-child { grid-column: 1 / -1; min-height: 0 !important; padding-top: 10px !important; padding-bottom: 10px !important; }
@container cvmain (max-width: 779px) { #modalBox.cv .lux-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* dialer line cards (Line 1 / 2 / 3) a little taller */
#dLines .line .lb{padding:16px 14px 20px!important}
#dLines .line .lb .nm{font-size:17px}

/* dialer note box header = Contacts-page card: "Add a note" + Speak note on top, AI Assistant (left) + AI Replay (right) below */
html body #dStage .notes .vn-head{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:10px 8px!important}
html body #dStage .notes .vn-head > h3{grid-column:1!important;grid-row:1!important;order:0!important;margin:0!important;font-size:0!important;line-height:0!important;font-weight:600!important;color:rgb(24, 19, 38)!important}
html body #dStage .notes .vn-head > h3::after{font-size:16px!important;line-height:1.3!important;font-weight:600!important;color:rgb(24, 19, 38)!important;margin:0!important}
html body #dStage .notes .vn-head > .vn-btn{grid-column:2!important;grid-row:1!important;order:0!important;justify-self:end!important;margin:0!important}
html body #dStage .notes .vn-head > .vfu-btn{grid-column:1!important;grid-row:2!important;order:0!important;justify-self:start!important;margin:0!important}
html body #dStage .notes .vn-head > .ar-btn{grid-column:2!important;grid-row:2!important;order:0!important;justify-self:end!important;margin:0!important}

/* No pop-up banner for leads with no numbers: group leads (not Dead Lead) with no number just go to Need Look Ups */
#nnBar{display:none!important}

/* Text confirmation button inside the Appointment tile: fit the tile (wraps to 2 lines) instead of spilling out (Nov 9, 2026) */
.lux-tt .as-btn.as-tile{max-width:100%;box-sizing:border-box;white-space:normal;font-size:12.5px;line-height:1.15;padding:5px 10px;text-align:center}