/* v2 Sprint 5 — App-Feature #11–#20 (feat2.js) */
/* #11 edit inline + tone chips · #14 the mic on the reply */
.bub small .bt2{display:flex;gap:10px;align-items:center}
.bub small .bt2 button{background:none;border:0;padding:0;color:inherit;display:grid;place-items:center}
.bub.editing{padding-bottom:8px}
.bub .edt{width:100%;box-sizing:border-box;border:1px dashed rgba(37,163,90,.45);border-radius:12px;background:var(--solid);color:var(--ink);font:500 14px/1.65 inherit;padding:8px 10px;resize:none;white-space:pre-wrap;overflow-wrap:anywhere;outline:0}
.tone{display:flex;gap:6px;overflow-x:auto;margin:8px 0 0;padding-bottom:2px;scrollbar-width:none}
.tone::-webkit-scrollbar{display:none}
.tone button{flex:0 0 auto;border:1px solid rgba(37,163,90,.25);background:rgba(37,163,90,.07);color:var(--ink);border-radius:999px;padding:6px 11px;font:700 12px/1.2 inherit;white-space:nowrap}
.tone button:disabled{opacity:.5}
.dictnew{display:flex;gap:10px;align-items:center;width:100%;margin-top:12px;padding:12px;text-align:start;border:1px dashed rgba(37,163,90,.35)}
.dictnew>.ic{color:var(--wa);flex:0 0 auto}.dictnew b{display:block;font-size:14px}.dictnew small{display:block;color:var(--mut);font-size:12px}
.dmic{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 0 16px;text-align:center}
.dmic small{color:var(--mut);font-size:12.5px}
.dring{--lv:0;position:relative;width:96px;height:96px;border-radius:50%;border:0;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#FF4B3E,#FF8A4C);box-shadow:0 10px 26px rgba(255,75,62,.35)}
.dring i{position:absolute;inset:-10px;border-radius:50%;border:3px solid rgba(255,138,76,.55);transform:scale(calc(1 + var(--lv) * .35));transition:transform .08s linear;animation:dPulse 1.6s ease-out infinite}
@keyframes dPulse{0%{opacity:.9}100%{opacity:.25}}
.dt{font:800 22px/1 Manrope,system-ui,sans-serif;direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.heard{display:block;color:var(--mut);font-size:12px;line-height:1.6;margin:0 4px 8px;overflow-wrap:anywhere}
.a.qte .de{font-size:20px;line-height:1}

/* #12 the customer's journey */
.jrw{padding:10px 8px 10px;margin-top:6px}
.jrl{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;position:relative;padding-top:2px}
.jrl::-webkit-scrollbar{display:none}
.jst{position:relative;flex:0 0 88px;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;gap:3px;padding:0 4px;background:none;border:0;color:inherit;font:inherit;text-align:center}
.jst::before{content:"";position:absolute;top:19px;inset-inline-start:-50%;width:100%;height:2px;background:linear-gradient(90deg,#FF8A4C,#FF4B3E);opacity:.35;z-index:0}
.jst:first-child::before{display:none}
.jst .jd{position:relative;z-index:1;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:17px;background:var(--solid);border:2px solid rgba(255,138,76,.45)}
.jst.me .jd{border-color:rgba(37,163,90,.55)} .jst.won .jd{border-color:var(--ok);background:rgba(16,185,129,.12)}
.jst.on .jd{background:linear-gradient(135deg,#FF4B3E,#FF8A4C);border-color:transparent;box-shadow:0 6px 14px rgba(255,75,62,.3)}
.jst b{font-size:11.5px;line-height:1.3}
.jst small{font-size:10.5px;color:var(--mut)}
.jtx{margin:8px 6px 0;font-size:13px;line-height:1.6;overflow-wrap:anywhere}
.jtx small{display:block;color:var(--mut);font-size:11.5px}
.jtx:empty{display:none}

/* #18 WhatsApp bubbles */
.wachat{display:flex;flex-direction:column;gap:5px;padding:10px;border-radius:16px;background:#EFE7DD;max-height:420px;overflow-y:auto;margin-top:6px}
.wb{max-width:82%;padding:6px 9px 4px;border-radius:10px;font-size:13.5px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;box-shadow:0 1px 1px rgba(0,0,0,.08);color:#111B21}
.wb.in{align-self:flex-start;background:#fff;border-start-start-radius:3px}
.wb.out{align-self:flex-end;background:#D9FDD3;border-start-end-radius:3px}
.wb time{display:block;text-align:end;font-size:10px;color:#667781;margin-top:1px;direction:ltr}
.wb time em{font-style:normal;color:#53BDEB}
.wb .wvn{font-style:normal;margin-inline-end:4px}
.wday{align-self:center;margin:4px 0}.wday span{display:inline-block;background:#fff;color:#54656F;font-size:11px;padding:3px 10px;border-radius:8px;box-shadow:0 1px 1px rgba(0,0,0,.06)}
[data-theme="dark"] .wachat{background:#0B141A}
[data-theme="dark"] .wb{color:#E9EDEF}[data-theme="dark"] .wb.in{background:#202C33}[data-theme="dark"] .wb.out{background:#005C4B}
[data-theme="dark"] .wb time{color:#8696A0}[data-theme="dark"] .wday span{background:#182229;color:#8696A0}

/* #19 template variables */
.vtok{display:inline-block;direction:ltr;unicode-bidi:isolate;font:700 12px/1.3 Manrope,system-ui,monospace;color:var(--teal2);background:rgba(15,163,163,.1);border-radius:6px;padding:1px 5px}
.vlist{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;align-items:center;margin:8px 4px 4px}
.vlist small{font-size:12px;color:var(--mut)}
.locset{margin-top:10px}.locset b{font-size:13.5px}
.vins{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.vins small{width:100%;font-size:11.5px;color:var(--mut)}
.vins .chip{font-size:12px;padding:5px 9px}
.vins .chip span{direction:ltr;unicode-bidi:isolate;font-weight:800;color:var(--teal2)}

/* #15 the price quote */
.qitems{margin:2px 0 4px}
.qdays{align-items:center;margin:4px 0 8px}.qdays small{font-size:12px;color:var(--mut);margin-inline-end:4px;white-space:nowrap}
.qcv{display:block;width:min(100%,300px);height:auto;aspect-ratio:4/5;margin:6px auto 0;border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.12);background:#FCF9F8}

/* #13 the money Ramsly saved */
.svd{display:block;width:100%;margin-top:12px;padding:14px;text-align:start;position:relative;overflow:hidden;border:1px solid rgba(16,185,129,.25)}
.svd::after{content:"";position:absolute;inset-inline-end:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,rgba(16,185,129,.18),transparent 70%)}
.svh{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:800}
.svh small{color:var(--mut);font-weight:600;font-size:11.5px}
.svn{display:block;font:800 28px/1.15 Manrope,"Plex",system-ui,sans-serif;color:#0E9F6E;margin-top:6px;direction:ltr;unicode-bidi:isolate;text-align:start}
[dir=rtl] .svn{text-align:right}
.svs{display:block;color:var(--mut);font-size:12px;margin-top:3px}
.svp{margin-top:8px;font-size:12px;font-weight:700;color:var(--warm)}
.svl{margin-top:4px}

/* #16 level */
.lvl{padding:14px;margin-top:12px;position:relative;overflow:hidden}
.lvh{display:flex;justify-content:space-between;align-items:center}
.lvh b{font-size:17px}.lvh em{font:800 13px/1 Manrope,system-ui,sans-serif;font-style:normal;color:var(--mut);direction:ltr}
.lvs{display:inline-block;margin-top:6px;font-size:12.5px;font-weight:800;color:#E2512E;background:rgba(255,75,62,.09);border-radius:999px;padding:3px 10px}
.lvl .bar{height:8px;border-radius:8px;background:var(--track);margin-top:10px;overflow:hidden}
.lvl .bar i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,#FF8A4C,#FF4B3E)}
.lvn{display:block;color:var(--mut);font-size:12px;margin-top:5px}
.lvms{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin-top:10px}
.lvm{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:2px 6px}
.lvm span{grid-row:span 2;font-size:15px}.lvm i{display:block;height:5px;border-radius:5px;background:var(--track);overflow:hidden}
.lvm i b{display:block;height:100%;background:var(--teal)}.lvm small{font-size:11px;color:var(--mut)}
.lvt{display:block;margin-top:10px;font-size:12px;line-height:1.55}
.lv-g{border:1px solid rgba(245,197,66,.55);box-shadow:0 8px 22px rgba(245,197,66,.15)}
.lv-d{border:1px solid rgba(91,141,239,.5);box-shadow:0 8px 22px rgba(91,141,239,.18)}
.lvpill{display:inline-block;margin-top:6px;margin-inline-start:4px;border:0;border-radius:999px;padding:3px 10px;font:800 11.5px/1.3 inherit;background:rgba(205,127,50,.14);color:#9A5B22}
.lvpill.lv-s{background:rgba(150,160,170,.18);color:#5E6770}.lvpill.lv-g{background:rgba(245,197,66,.22);color:#946B00}.lvpill.lv-d{background:rgba(91,141,239,.16);color:#2F5FC4}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:90;overflow:hidden}
.confetti i{position:absolute;top:-14px;width:9px;height:14px;border-radius:2px;opacity:.95;animation:cfFall 2.9s cubic-bezier(.25,.6,.4,1) var(--d) forwards;transform:rotate(var(--r))}
@keyframes cfFall{to{transform:translate(var(--x),105vh) rotate(calc(var(--r) + 540deg));opacity:.9}}

/* #17 search highlight */
#clist mark,#deep mark{background:rgba(255,186,73,.45);color:inherit;border-radius:3px;padding:0 1px}
#deep .s{-webkit-line-clamp:2}

/* #20 compact view */
.screen.dense #clist .cust{padding:7px 10px;margin-bottom:4px;border-radius:12px;gap:8px}
.screen.dense #clist .avt{width:30px;height:30px;border-radius:10px;font-size:12.5px}
.screen.dense #clist .cust b{font-size:13.5px}
.screen.dense #clist .cust small{font-size:11px}
.screen.dense #clist .cust .s{display:none}
.screen.dense #clist .heat{font-size:10.5px;padding:2px 7px}
.screen.dense #clist .cool{bottom:2px;height:2px}.screen.dense #clist .cool em{display:none}
@media (prefers-reduced-motion:reduce){.dring i,.confetti i{animation:none}}