/* Kisna Partner Desk — B2B WhatsApp AI agent · demo styles */
:root{
  --gold:#c9a227; --gold-d:#8f6f0c;
  --gold-grad:linear-gradient(135deg,#f9e7b0,#dfb457 55%,#a97c12);
  --sapphire:#12243f; --sapphire-2:#1a3357; --ice:#8fbde8;
  --wa-green:#075e54; --wa-teal:#128c7e; --wa-light:#25d366; --wa-bg:#e7ddd3;
  --bub-out:#d9fdd3; --bub-in:#ffffff; --ink:#1f2c33; --muted:#667781;
  --rail:#0c1626; --rail2:#122036;
  --ok:#0a7a4f; --ok-bg:#eafaf1; --warn:#b25c00; --warn-bg:#fff3e0; --bad:#b3261e; --bad-bg:#fdecea;
  --hermes:#4b3f96; --hermes-bg:#efecfb; --hermes-bd:#d8d1f3;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:radial-gradient(1200px 700px at 18% -12%,#1e3555,#0a121e 62%);
  color:#fff;display:flex;min-height:100vh;align-items:safe center;justify-content:center;padding:22px;overflow-y:auto;}
.stage{display:flex;gap:56px;align-items:stretch;max-width:1180px;width:100%}

/* ░░ Left rail ░░ */
.rail{width:340px;flex:0 0 340px;background:linear-gradient(180deg,var(--rail),var(--rail2));
  border:1px solid #22344f;border-radius:20px;padding:20px;display:flex;flex-direction:column;
  box-shadow:0 30px 60px rgba(0,0,0,.45)}
.rail-brand{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.logo,.wa-av{background:var(--gold-grad);color:#3a2a00;font-weight:800;display:grid;place-items:center;
  border-radius:12px;width:46px;height:46px;font-size:21px;font-family:Georgia,serif;letter-spacing:-.5px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.rb-title{font-weight:700;font-size:15px}
.rb-sub{font-size:12px;color:#9fb2c9}
.rb-sub b{color:var(--gold)}
.rail-note{font-size:12px;color:#8fa4bd;background:#0a1220;border:1px solid #1e2e46;border-radius:10px;padding:9px 11px;margin-bottom:12px;line-height:1.5}
.rail-note b{color:#c6d6ea;font-weight:600}
.scnlist{display:flex;flex-direction:column;gap:7px;overflow:auto;flex:1;margin:-4px -6px;padding:4px 6px}
.scn{display:flex;gap:11px;align-items:flex-start;text-align:left;background:#0b1524;border:1px solid #1d2d45;
  color:#e7eef6;border-radius:12px;padding:10px 11px;cursor:pointer;transition:.16s;font:inherit}
.scn:hover{background:#122238;border-color:#2c4a6b;transform:translateY(-1px)}
.scn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.scn.active{background:#10261f;border-color:var(--wa-light);box-shadow:0 0 0 1px var(--wa-light) inset}
.scn-emo{font-size:20px;line-height:1.25}
.scn-tx{display:flex;flex-direction:column}
.scn-tx b{font-size:13.5px}
.scn-tx i{font-style:normal;font-size:11px;color:#8ba0ba;margin-top:2px;line-height:1.35}
.rail-foot{display:flex;gap:8px;margin-top:14px}
.kpi{flex:1;background:#0a1220;border:1px solid #1e2e46;border-radius:10px;padding:8px 6px;text-align:center}
.kpi b{display:block;color:var(--gold);font-size:15px}
.kpi span{font-size:10px;color:#8ba0ba;line-height:1.3;display:block}
.disclaimer{font-size:10.5px;color:#5f7592;margin-top:12px;text-align:center;line-height:1.45}

/* ░░ Phone ░░ */
.phone-wrap{display:flex;flex-direction:column;align-items:center;gap:12px}
.phone{width:390px;height:min(780px,calc(100vh - 100px));max-height:780px;background:#000;border-radius:42px;padding:11px;position:relative;
  box-shadow:0 36px 70px rgba(0,0,0,.55),0 0 0 2px #2a2a2a;display:flex;flex-direction:column;overflow:hidden}
.notch{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:150px;height:26px;background:#000;
  border-radius:0 0 18px 18px;z-index:5}
.wa-head,.wa-thread,.wa-chips,.wa-input{width:100%}
.wa-head{flex:0 0 auto;z-index:2;border-radius:32px 32px 0 0}
.wa-thread{flex:1 1 auto;min-height:0}
.wa-chips,.wa-input{flex:0 0 auto}

.wa-head{background:var(--wa-green);display:flex;align-items:center;gap:9px;padding:30px 12px 10px;color:#fff}
.wa-back{font-size:24px;opacity:.9;margin-right:-3px}
.wa-head .wa-av{width:38px;height:38px;font-size:16px;border-radius:50%}
.wa-id{flex:1;min-width:0}
.wa-name{font-size:14.5px;font-weight:600;display:flex;align-items:center;gap:5px}
.verified{color:#34b7f1;font-size:11px;background:#fff;border-radius:50%;width:14px;height:14px;display:inline-grid;place-items:center}
.wa-status{font-size:11.5px;color:#cdeee6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-actions{display:flex;align-items:center;gap:6px}
#langsel{background:rgba(255,255,255,.14);color:#fff;border:none;border-radius:7px;font-size:11px;padding:4px}
#langsel option{color:#000}
.wa-reset{background:rgba(255,255,255,.14);border:none;color:#fff;border-radius:7px;width:26px;height:26px;cursor:pointer;font-size:15px}
.wa-reset:focus-visible,#langsel:focus-visible{outline:2px solid #fff;outline-offset:1px}

.wa-thread{overflow-y:auto;padding:12px 11px 6px;
  background-color:var(--wa-bg);
  background-image:linear-gradient(rgba(231,221,211,.92),rgba(231,221,211,.92)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 20h40M20 0v40' stroke='%23d8cfc4' stroke-width='.5'/%3E%3C/svg%3E");
}
.row{display:flex;margin:7px 0}
.row.out{justify-content:flex-end}
.row.in{justify-content:flex-start}
.row.sys{justify-content:center}
.bubble{max-width:80%;padding:7px 9px 5px;border-radius:9px;font-size:13.5px;line-height:1.42;color:var(--ink);
  box-shadow:0 1px .5px rgba(0,0,0,.13);position:relative;animation:pop .18s ease}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.b-in{background:var(--bub-in);border-top-left-radius:2px}
.b-out{background:var(--bub-out);border-top-right-radius:2px}
.bubble b{font-weight:700}
.meta{display:block;text-align:right;font-size:10px;color:var(--muted);margin-top:3px}
.ticks{color:#34b7f1}
.syschip{background:#fdf3d6;color:#7a5b12;font-size:11.5px;border-radius:8px;padding:6px 11px;text-align:center;
  box-shadow:0 1px .5px rgba(0,0,0,.12);max-width:90%;border:1px solid #f0e0b0;line-height:1.45}
.hermeschip{background:var(--hermes-bg);border:1px solid var(--hermes-bd);color:#332a70;font-size:11px;
  border-radius:8px;padding:6px 10px;max-width:92%;line-height:1.5;display:flex;gap:7px;align-items:baseline}
.hermeschip b{color:var(--hermes);font-weight:800;font-size:10px;letter-spacing:.06em;text-transform:uppercase;flex:0 0 auto}

/* typing */
.typing{display:flex;gap:4px;align-items:center;height:14px}
.typing span{width:7px;height:7px;background:#9aa6ac;border-radius:50%;animation:bln 1.2s infinite}
.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}
@keyframes bln{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.cite{margin-top:6px;font-size:10.5px;color:var(--wa-teal);border-top:1px dashed #cfe3dd;padding-top:4px}

/* ░░ SKU cards ░░ */
.carousel{display:flex;gap:9px;overflow-x:auto;padding:2px 1px 6px;max-width:300px}
.skucard{flex:0 0 168px;background:#fff;border:1px solid #ece5dc;border-radius:12px;overflow:hidden;
  box-shadow:0 2px 6px rgba(0,0,0,.07)}
.sk-img{position:relative;background:#f7f2e8;aspect-ratio:1/1}
.sk-img svg{width:100%;height:100%;display:block}
.sk-code{position:absolute;top:6px;left:6px;background:rgba(18,36,63,.86);color:#fff;font-size:8.5px;
  padding:2px 6px;border-radius:20px;letter-spacing:.3px;font-weight:600}
.sk-fast{position:absolute;top:6px;right:6px;background:var(--ok);color:#fff;font-size:8.5px;padding:2px 6px;border-radius:20px;font-weight:700}
.sk-body{padding:8px 9px 10px}
.sk-title{font-size:12px;font-weight:700;color:#1f2c33;line-height:1.25}
.sk-spec{font-size:9.5px;color:var(--muted);margin:3px 0 5px;line-height:1.35}
.sk-why{font-size:9.5px;color:var(--ok);background:var(--ok-bg);border-radius:6px;padding:3px 5px;margin-bottom:5px;line-height:1.35}
.sk-price{display:flex;justify-content:space-between;align-items:baseline;font-size:10px;color:var(--muted)}
.sk-price b{font-size:13px;font-weight:800;color:var(--gold-d)}
.sk-price.muted b{font-size:11px;font-weight:600;color:#55636b}
.sk-tags{display:flex;flex-wrap:wrap;gap:3px;margin:6px 0 0}
.sk-tags span{font-size:8.5px;background:#eef2f6;color:#3c4d5c;border-radius:20px;padding:2px 6px;font-weight:600}
.sk-acts{display:flex;gap:5px;margin-top:7px}
.sk-btn{flex:1;border:none;background:var(--wa-teal);color:#fff;font-size:10px;padding:6px 4px;border-radius:7px;cursor:pointer;font-weight:600}
.sk-btn.ghost{flex:0 0 52px;background:#fff;color:var(--wa-teal);border:1px solid var(--wa-teal)}
.sk-btn:hover{filter:brightness(1.08)}
.sk-btn:focus-visible{outline:2px solid var(--sapphire);outline-offset:1px}

/* ░░ shared card frames ░░ */
.ratecard,.cartcard,.orderlist,.pipecard,.ledgercard,.invcard,.paycard,.doccard,
.schemecard,.termscard,.dropcard,.ticketcard,.kyccard,.proposecard,.intentcard{min-width:252px}

.rc-h{font-weight:700;font-size:13px;margin-bottom:6px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.rc-tag{font-size:9.5px;font-weight:600;color:var(--ok);background:var(--ok-bg);border-radius:20px;padding:2px 7px}
.rc-row{display:flex;justify-content:space-between;gap:10px;padding:3px 0;border-bottom:1px dashed #eee;font-size:12px}
.rc-row b{color:var(--gold-d);text-align:right}
.rc-foot{font-size:9.5px;color:var(--muted);margin-top:5px}

/* order basket */
.ct-h{font-weight:800;font-size:12.5px;display:flex;justify-content:space-between;gap:8px;padding-bottom:5px;border-bottom:1px solid #eee}
.ct-h span{font-weight:600;color:var(--muted);font-size:11px}
.cartcard.done .ct-h{color:var(--ok)}
.ct-row{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px dashed #eee;font-size:11.5px}
.ct-row i{display:block;font-style:normal;font-size:9.5px;color:var(--muted);margin-top:1px}
.ct-row b{white-space:nowrap;font-weight:700}
.ct-tot{display:flex;justify-content:space-between;font-size:11.5px;padding:3px 0;color:var(--muted)}
.ct-tot b{color:#1f2c33;font-weight:700}
.ct-tot.grand{font-size:13px;color:#1f2c33;font-weight:800;border-top:1px solid #eee;margin-top:3px;padding-top:6px}
.ct-tot.grand b{color:var(--gold-d);font-size:14px;font-weight:800}
.ct-sell{margin-top:7px;font-size:10.5px;background:var(--ok-bg);color:var(--ok);border-radius:7px;padding:6px 8px;line-height:1.45}

/* order list + pipeline */
.ol-h,.iv-h,.tk-h,.ky-h,.pp-h,.lg-h,.in-h{font-weight:800;font-size:12.5px}
.ol-row{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed #eee;font-size:11.5px}
.ol-id{font-weight:700}
.ol-id i,.ol-right i{display:block;font-style:normal;font-size:9.5px;color:var(--muted);font-weight:400;margin-top:2px}
.ol-right{text-align:right;white-space:nowrap}
.ol-stage{font-size:9.5px;font-weight:700;color:var(--ok);background:var(--ok-bg);border-radius:20px;padding:2px 8px}
.ol-stage.flag{color:var(--warn);background:var(--warn-bg)}

.pp-h{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.pp-h span{font-size:10.5px;color:var(--muted);font-weight:600}
.pp-item{font-size:11.5px;color:#3a4a55;margin:2px 0 8px}
.pp-rail{display:flex;flex-direction:column;gap:0;margin-bottom:8px}
.pp-step{display:flex;align-items:center;gap:8px;font-size:10.5px;color:#9aa7b1;padding:2px 0;position:relative}
.pp-step::before{content:"";position:absolute;left:4.5px;top:0;bottom:0;width:1px;background:#e2e7ea}
.pp-step:first-child::before{top:50%}
.pp-step:last-child::before{bottom:50%}
.pp-dot{width:10px;height:10px;border-radius:50%;background:#e2e7ea;flex:0 0 auto;position:relative;z-index:1;box-shadow:0 0 0 2px #fff}
.pp-step.done{color:#4a5b66}
.pp-step.done .pp-dot{background:var(--ok)}
.pp-step.current{color:#1f2c33;font-weight:800}
.pp-step.current .pp-dot{background:var(--wa-teal);box-shadow:0 0 0 3px rgba(18,140,126,.22)}
.pp-awb{background:#eef4f8;border-radius:7px;padding:6px 8px;font-size:10.5px;margin-bottom:6px}
.pp-awb b{display:block;font-size:12px;letter-spacing:.5px}
.pp-awb i{font-style:normal;color:var(--muted);font-size:9.5px}
.pp-eta{font-size:11.5px;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.pp-flag{font-size:9.5px;font-weight:700;color:var(--warn);background:var(--warn-bg);border-radius:20px;padding:2px 8px}
.pp-note{font-size:10px;color:var(--muted);margin-top:5px;line-height:1.45}

/* ledger */
.lg-h{display:flex;justify-content:space-between;gap:8px}
.lg-h span{font-size:10px;color:var(--muted);font-weight:600}
.lg-big{font-size:21px;font-weight:800;color:#1f2c33;margin:6px 0 2px;letter-spacing:-.5px}
.lg-big i{display:block;font-style:normal;font-size:10px;color:var(--muted);font-weight:500;letter-spacing:0;margin-top:1px}
.lg-bar{height:6px;border-radius:6px;background:#e8edf1;overflow:hidden;margin:7px 0 5px}
.lg-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--wa-teal),var(--gold))}
.lg-free{font-size:10.5px;color:var(--ok);font-weight:700;margin-bottom:6px}
.lg-row{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;padding:3px 0;border-bottom:1px dashed #eee}
.lg-row b{font-weight:700}
.lg-row.overdue b{color:var(--warn)}
.lg-row.clear b{color:#9aa7b1}
.lg-foot{font-size:10px;color:var(--muted);margin-top:6px}
.lg-foot b{color:var(--warn)}

/* invoices + docs */
.iv-row{display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:6px 0;border-bottom:1px dashed #eee;font-size:11.5px}
.iv-row i{display:block;font-style:normal;font-size:9.5px;color:var(--muted);margin-top:2px}
.iv-row b{font-weight:700;text-align:right}
.iv-row em{grid-column:1/-1;font-style:normal;font-size:9.5px;color:var(--ok)}
.iv-row em.warn{color:var(--warn);font-weight:700}
.dc-row{display:flex;gap:8px;align-items:center;padding:6px 0;border-bottom:1px dashed #eee}
.dc-row:last-child{border-bottom:none}
.dc-ico{font-size:19px}
.dc-tx{font-size:11.5px;font-weight:600;line-height:1.3}
.dc-tx i{display:block;font-style:normal;font-size:9.5px;color:var(--muted);font-weight:400;margin-top:2px}

/* payment */
.paycard{text-align:center}
.py-h{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.py-amt{font-size:26px;font-weight:800;color:#1f2c33;margin:4px 0 2px;letter-spacing:-.5px}
.py-ref{font-size:10.5px;color:var(--muted)}
.py-modes{display:flex;gap:5px;justify-content:center;margin:8px 0}
.py-modes span{font-size:9.5px;background:#eef2f6;color:#3c4d5c;border-radius:20px;padding:3px 9px;font-weight:600}
.py-cta{width:100%;background:var(--wa-teal);color:#fff;border:none;border-radius:8px;padding:9px;font-weight:700;font-size:12.5px}
.py-cta:disabled{opacity:.75}
.py-note{font-size:9.5px;color:var(--muted);margin-top:6px}

/* scheme / terms / drop */
.schemecard{text-align:center}
.sc-banner{font-size:28px;background:var(--gold-grad);border-radius:10px;padding:9px}
.sc-title{font-weight:800;font-size:13px;margin:7px 0 3px;color:#1f2c33}
.sc-seg{font-size:9.5px;color:var(--hermes);background:var(--hermes-bg);border-radius:20px;padding:2px 9px;display:inline-block;font-weight:700}
.sc-body{font-size:11.5px;color:#3a5560;line-height:1.55;margin-top:7px;text-align:left}
.tm-h{font-weight:800;font-size:12.5px;margin-bottom:5px}
.tm-row{font-size:11.5px;color:#3a5560;line-height:1.5;padding:3px 0}
.dp-strip{display:flex;gap:4px;background:#f7f2e8;border-radius:9px;padding:5px}
.dp-strip svg{width:33%;border-radius:6px}
.dp-title{font-weight:800;font-size:13px;margin:8px 0 2px}
.dp-meta{font-size:9.5px;color:var(--gold-d);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.dp-body{font-size:11.5px;color:#3a5560;line-height:1.55;margin-top:6px}

/* ticket / kyc / proposed terms / intent */
.tk-h{display:flex;justify-content:space-between;gap:8px;align-items:center}
.tk-h span{font-size:9.5px;font-weight:700;color:var(--warn);background:var(--warn-bg);border-radius:20px;padding:2px 8px}
.tk-type{font-size:12px;font-weight:700;margin:4px 0 2px}
.tk-route{font-size:10.5px;color:var(--wa-teal);font-weight:600}
.tk-note{font-size:10.5px;color:var(--muted);margin-top:5px;line-height:1.5}

.ky-h{display:flex;justify-content:space-between;gap:8px;margin-bottom:4px}
.ky-h span{font-size:10px;color:var(--muted);font-weight:600}
.ky-row{display:flex;gap:8px;padding:5px 0;border-bottom:1px dashed #eee}
.ky-tick{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font-size:10px;flex:0 0 auto;margin-top:1px;font-weight:700}
.ky-row.done .ky-tick{background:var(--ok);color:#fff}
.ky-row.pending .ky-tick{background:#eef2f6;color:#9aa7b1}
.ky-tx{font-size:11.5px;font-weight:600;line-height:1.3}
.ky-tx i{display:block;font-style:normal;font-size:9.5px;color:var(--muted);font-weight:400;margin-top:2px}
.ky-row.pending .ky-tx{color:#8a97a1}

.proposecard{background:linear-gradient(180deg,#fffdf4,#fff)}
.pr-h{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.pr-big{font-size:24px;font-weight:800;color:var(--gold-d);margin:3px 0 6px;letter-spacing:-.5px}
.pr-big i{display:block;font-style:normal;font-size:10px;color:var(--muted);font-weight:500;letter-spacing:0}
.pr-row{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;padding:3px 0;border-bottom:1px dashed #eee}
.pr-row b{text-align:right;font-weight:700}
.pr-foot{font-size:9.5px;color:var(--muted);margin-top:6px}

.intentcard{background:linear-gradient(180deg,#f7fbff,#fff)}
.in-h{display:flex;align-items:center;gap:8px;margin-bottom:4px;color:var(--sapphire)}
.in-score{font-size:9.5px;background:var(--ok);color:#fff;border-radius:20px;padding:2px 8px;font-weight:700}
.in-row{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;padding:3px 0;border-bottom:1px dashed #eee}
.in-row b{font-weight:700;text-align:right}

/* voice */
.bubble.voice{max-width:84%}
.vc{display:flex;align-items:center;gap:8px}
.vc-play{width:30px;height:30px;border-radius:50%;border:none;background:var(--wa-teal);color:#fff;cursor:pointer;font-size:12px;flex:0 0 auto}
.vc-wave{display:flex;gap:2px;align-items:center;height:24px;flex:1}
.vc-wave i{width:2.5px;background:#9ab;border-radius:2px;height:7px}
.vc-wave i:nth-child(3n){height:16px}.vc-wave i:nth-child(4n){height:21px}.vc-wave i:nth-child(2n){height:11px}
.vc-wave.playing i{animation:wv .7s infinite ease-in-out}
.vc-wave.playing i:nth-child(odd){animation-delay:.15s}
@keyframes wv{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1.5)}}
.vc-dur{font-size:10.5px;color:var(--muted)}
.vc-lang{font-size:9px;background:#eef4f2;color:var(--wa-teal);border-radius:20px;padding:2px 6px;font-weight:700}
.vc-tx{font-size:11px;color:#33474f;margin-top:6px;line-height:1.45;border-top:1px dashed #e0e8e5;padding-top:5px}

/* chips + composer */
.wa-chips{display:flex;flex-wrap:wrap;gap:6px;padding:8px 11px;background:var(--wa-bg);border-top:1px solid #d9cfc4}
.wa-chips.empty{display:none}
.chip{background:#fff;border:1px solid var(--wa-teal);color:var(--wa-teal);border-radius:20px;padding:7px 12px;
  font-size:12px;font-weight:600;cursor:pointer;transition:.14s}
.chip:hover{background:var(--wa-teal);color:#fff}
.chip:focus-visible{outline:2px solid var(--sapphire);outline-offset:2px}
.wa-input{display:flex;align-items:center;gap:7px;background:#f0f0f0;padding:8px 10px;border-radius:0 0 32px 32px}
.wa-input .ic{font-size:18px;color:#54656f;cursor:default}
#msg{flex:1;border:none;border-radius:20px;padding:9px 13px;font-size:13.5px;outline:none;background:#fff;min-width:0}
#msg:focus{box-shadow:0 0 0 2px rgba(18,140,126,.35)}
.send{background:var(--wa-teal);border:none;color:#fff;width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:15px;flex:0 0 auto}
.send:disabled{opacity:.5}
.mic{background:var(--wa-teal);color:#fff;border-radius:50%;width:36px;height:36px;display:grid;place-items:center;font-size:16px}

.phone-cap{font-size:12px;color:#9fb2c9;max-width:360px;text-align:center;line-height:1.5}

/* scrollbars */
.wa-thread::-webkit-scrollbar,.scnlist::-webkit-scrollbar,.carousel::-webkit-scrollbar{height:6px;width:6px}
.wa-thread::-webkit-scrollbar-thumb,.carousel::-webkit-scrollbar-thumb{background:#c3b9ac;border-radius:6px}
.scnlist::-webkit-scrollbar-thumb{background:#2a3f5c;border-radius:6px}

/* responsive */
@media(min-width:1180px){
  .stage{justify-content:center;gap:0}
  .rail{position:fixed;left:clamp(20px,3vw,64px);top:50%;transform:translateY(-50%);
    width:340px;max-height:calc(100vh - 28px)}
}
@media(max-width:880px){
  .stage{flex-direction:column;align-items:center;gap:22px}
  /* order applies to .stage children — .phone-wrap, not .phone, or the caption
     jumps above the handset. */
  .phone-wrap{order:1}
  .rail{position:static;transform:none;max-height:none;width:min(390px,100%);flex:none;order:2}
  .phone{width:min(390px,100%)}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}