/* WhatsApp demo page. Builds on app.css (TeeOff app layer, APP.md) and demo.css (the shared .top header).
   Own class names only, so other pages are untouched. Inside the phone the colours and system font are WhatsApp's own:
   it is a picture of the customer's WhatsApp, not a TeeOff surface. */
:root{--top:60px}   /* set from the real header height by whatsapp.js */
.wa .screen,.wa .scr{min-height:calc(100dvh - var(--top))}
.wa .hd span.back{visibility:hidden}

/* step 1: customer cards carry a story and the account, so they run longer than the starter's */
.wa .cu{min-height:0;gap:2px}
.wa .cu .acct{margin-top:6px;padding-top:6px;border-top:1px solid var(--line);align-self:stretch}
.wa .cu[aria-pressed=true] .acct{border-top-color:var(--rule-d)}
.wa #s-customer .hd .prog,.wa #s-customer .hd .n{visibility:hidden}   /* one step only: no progress bar, but keep the back arrow home */
.wa #s-customer .body{padding-top:20px}
/* what is going on in the account: on the cards and in the tester panel */
.cu .evs{display:grid;gap:7px;margin:8px 0 2px;align-self:stretch}
.ev{display:block;padding-left:10px;box-shadow:inset 2px 0 0 var(--line);font-size:12.5px;line-height:1.3}
.ev b{display:block;font-weight:600;font-size:13px}
.ev small{display:block;color:var(--dim);font-size:12.5px;margin-top:1px}
.cu[aria-pressed=true] .ev{box-shadow:inset 2px 0 0 var(--yellow)}
.cu[aria-pressed=true] .ev small{color:var(--dim-d)}
.tester .evs{list-style:none;display:grid;gap:8px}
.tester .ev{box-shadow:inset 2px 0 0 var(--navy)}
.tester .tip b{color:var(--navy);font-weight:600}

/* ---------- live: phone = tabs; desktop = tester | WhatsApp | MTN's systems ---------- */
.live{height:calc(100dvh - var(--top));min-height:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr);row-gap:10px;overflow:hidden;padding-bottom:12px}
.live .ctop .btn{margin-left:auto;flex:none}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:0 16px;background:var(--panel);border-radius:var(--r);padding:4px}
.tabs button{min-height:40px;border-radius:var(--r);color:var(--dim-d);font-weight:600;font-size:14.5px;transition:background .18s,color .18s}
.tabs [aria-selected=true]{background:var(--cream);color:var(--navy)}
.tabs i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--yellow);margin-left:4px;vertical-align:1px}
.live[data-tab=phone] .sys,.live[data-tab=sys] .tester,.live[data-tab=sys] .wa-phone{display:none}
.live .sys{grid-row:3/5}
.live .wa-phone{grid-row:4}

/* tester panel (cream on navy) */
.tester{max-height:46dvh;overflow-y:auto}
.tester>:not(summary){margin-top:10px}   /* details content ignores the panel's grid gap */
.tester summary{font-size:13px;min-height:24px;align-items:center}
.tester .nm{font-weight:600;color:var(--dim)} .tester .nm b{color:var(--navy);font-weight:600}
.tester .chk{margin-top:4px}
.tester .chk b{font-size:19px;white-space:nowrap}
.tester .kicker{font-size:10px;margin-top:2px}
.tester .tip,.tester .subs{font-size:12.5px;color:var(--dim)}
.tester .subs{display:flex;gap:8px;align-items:center;cursor:pointer}
/* tester: profile and "what you can ask" (collapsible) */
.tester .sample{font:500 10.5px/1 "Geist Mono",monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.tester .ps{border-top:1px solid var(--line);padding-top:10px}
.tester .ps>summary{font:600 14px/1.2 Outfit,sans-serif;color:var(--navy);cursor:pointer}
.tester .ps>:not(summary){margin-top:10px}
.tester .pg{margin-top:10px}
.tester details:not([open])>summary::after{content:"+"}   /* app.css's [open] rule also hits nested summaries */
.tester .pg>summary{font-size:12.5px;font-weight:600;color:var(--dim);cursor:pointer}
.tester dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;margin-top:6px;font-size:12.5px;line-height:1.3}
.tester dt{color:var(--dim)} .tester dd{margin:0;min-width:0;overflow-wrap:anywhere}
.tester dd small{display:block;color:var(--dim);font-size:11.5px}
.tester .asks{display:grid;gap:6px}
.tester .ask{display:grid;gap:2px;text-align:left;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:transparent;font:inherit;color:inherit;cursor:pointer}
.tester .ask:hover{border-color:var(--navy)}
.tester .ask.hit{box-shadow:inset 3px 0 0 var(--yellow);border-color:var(--navy)}
.tester .ask span{font-size:11.5px;color:var(--dim);display:flex;justify-content:space-between;gap:6px}
.tester .ask em{font-style:normal;font-weight:600;color:var(--navy);white-space:nowrap}
.tester .ask b{font-size:13px;font-weight:600;color:var(--navy)}
.tester .ask small{font-size:12px;color:var(--dim)}

/* ---------- the customer's WhatsApp ---------- */
.wa-phone{--wa-head:#008069;--wa-bg:#efeae2;--wa-out:#d9fdd3;--wa-ink:#111b21;--wa-meta:#667781;--wa-blue:#53bdeb;--wa-green:#00a884;--wa-grey:#8696a0;
  margin:0 16px;display:flex;flex-direction:column;min-height:0;background:var(--wa-bg);color:var(--wa-ink);border-radius:14px;overflow:hidden;
  font:15px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.wa-head{display:flex;align-items:center;gap:8px;padding:9px 10px;background:var(--wa-head);color:#fff}
.wa-ic{display:grid;place-items:center;flex:none}
.wa-av{position:relative;flex:none;width:38px;height:38px;border-radius:50%;background:#ffcb05;color:#000;display:grid;place-items:center;font:800 11px/1 Arial,Helvetica,sans-serif}
.wa-av.lg{width:64px;height:64px;font-size:17px}
.wa-id{flex:1;min-width:0}
.wa-id b{display:flex;align-items:center;gap:4px;font-weight:600;font-size:16px}
.wa-id small{display:block;font-size:12.5px;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-ver{display:inline-grid;color:#1d9bf0}
.wa-chat{flex:1;min-height:0;overflow-y:auto;padding:10px 12px 8px;display:flex;flex-direction:column;gap:3px;overscroll-behavior:contain}
.wa-day{align-self:center;background:#fff;color:#54656f;font-size:12px;padding:5px 12px;border-radius:8px;box-shadow:0 1px .5px rgba(11,20,26,.13);margin:2px 0 6px}
.wa-note{align-self:center;max-width:92%;background:#ffeecd;color:#54656f;font-size:12.5px;line-height:1.4;text-align:center;padding:6px 10px;border-radius:8px;margin:4px 0}
.wa-card{align-self:center;background:#fff;border-radius:8px;padding:14px 18px;display:grid;justify-items:center;gap:3px;text-align:center;margin:6px 0 10px;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.wa-card b{display:flex;gap:4px;align-items:center;margin-top:4px}
.wa-card small{color:var(--wa-meta);font-size:12.5px}
.wa-m{position:relative;max-width:84%;padding:6px 8px 4px 9px;border-radius:8px;box-shadow:0 1px .5px rgba(11,20,26,.13);overflow-wrap:anywhere;margin-top:3px;animation:rise .22s var(--ease) both}
.wa-m.wa-sent{align-self:flex-end;background:var(--wa-out);border-top-right-radius:0}
.wa-m.wa-recv{align-self:flex-start;background:#fff;border-top-left-radius:0}
.wa-m p{font-size:14.5px;white-space:pre-wrap;display:inline}
.wa-meta{float:right;display:inline-flex;align-items:center;gap:3px;font-size:11px;color:var(--wa-meta);margin:7px 0 -3px 10px;line-height:1}
.wa-tick{color:var(--wa-grey)} .wa-tick.read{color:var(--wa-blue)}
.wa-tr{display:block;clear:both;font-size:12.5px;line-height:1.35;color:#54656f;font-style:italic;border-top:1px solid rgba(11,20,26,.08);margin-top:6px;padding-top:4px}
.wa-tr.lgtr{font-style:normal;color:var(--wa-ink)}
.nosubs .wa-tr:not(.lgtr){display:none}
/* voice notes */
.wa-vn{display:flex;align-items:center;gap:8px;width:250px;max-width:100%;padding:2px 0}
.wa-m.wa-sent .wa-vn .wa-av{order:3}
.wa-vn .wa-av{width:40px;height:40px}
.wa-micb{position:absolute;right:-4px;bottom:-3px;display:grid;color:var(--wa-grey)}
.wa-m.wa-recv .wa-micb{color:var(--wa-green)}
.wa-m.heard .wa-micb{color:var(--wa-blue)}
.wa-play{width:30px;height:30px;display:grid;place-items:center;color:#54656f;flex:none}
.wa-wave{flex:1;display:flex;align-items:center;gap:2px;height:28px;min-width:0}
.wa-wave i{flex:1;min-width:2px;border-radius:2px;background:#b3bcc2}
.wa-wave i.p{background:var(--wa-green)}
.wa-foot{display:flex;justify-content:space-between;align-items:center;padding:0 0 0 86px}
.wa-m.wa-sent .wa-foot{padding-left:38px}
.wa-dur{font-size:11px;color:var(--wa-meta)}
.wa-foot .wa-meta{float:none;margin:0}
/* typing and recording, in the header and at the bottom of the chat */
.wa-dots{display:inline-flex;gap:4px;padding:7px 4px}
.wa-dots i{width:7px;height:7px;border-radius:50%;background:var(--wa-grey);animation:wadot 1.2s infinite}
.wa-dots i:nth-child(2){animation-delay:.2s} .wa-dots i:nth-child(3){animation-delay:.4s}
@keyframes wadot{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.wa-recording{display:inline-flex;align-items:center;gap:6px;color:var(--wa-green);font-size:13.5px;padding:4px 2px}
.wa-recording svg{animation:blink 1.6s steps(1) infinite}
/* compose */
.wa-bar{display:flex;align-items:center;gap:6px;padding:6px 8px 8px}
.wa-in{flex:1;min-width:0;min-height:44px;display:flex;align-items:center;padding:0 16px;background:#fff;border-radius:99px;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.wa-in input{flex:1;min-width:0;height:44px;border:0;outline:0;background:none;font:inherit;color:var(--wa-ink)}
.wa-in input::placeholder{color:var(--wa-grey)}
.wa-rec{flex:1;display:flex;align-items:center;gap:8px;font-size:15px}
.wa-rec i{width:10px;height:10px;border-radius:50%;background:#ea0038;animation:blink 1.6s steps(1) infinite}
.wa-rect{flex:1;color:var(--wa-grey);font-size:14px}
.wa-rec button{color:#ea0038;font-size:14px;font-weight:600}
.wa-btn{flex:none;width:46px;height:46px;border-radius:50%;background:var(--wa-green);color:#fff;display:grid;place-items:center;transition:transform .12s var(--ease)}
.wa-btn:active{transform:scale(.94)}
.wa-btn:disabled{opacity:.45;pointer-events:none}

/* ---------- what happened in MTN's systems (navy) ---------- */
.live .sys{display:flex;flex-direction:column;min-height:0;overflow:hidden;background:var(--panel);border-radius:14px;padding:12px 14px}
.sys-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.live .sys .ph-l{display:block;flex:1;margin:0;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim-d)}
.techsw{display:flex;gap:6px;align-items:center;font-size:12.5px;color:var(--dim-d);cursor:pointer}
#trace{flex:1;min-height:0;overflow-y:auto;display:grid;gap:12px;align-content:start;overscroll-behavior:contain;scrollbar-width:thin}
#trace .empty{color:var(--dim-d);font-size:14px;max-width:46ch}
.tc{background:rgba(240,235,223,.06);border-radius:14px;padding:12px 14px;animation:rise .22s var(--ease) both}
.tc header{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px}
.tc header b{font:700 16px var(--display)}
.tc header span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim-d)}
.ts{list-style:none;display:grid;gap:9px}
.ts>li{font-size:14px;border-top:1px solid var(--rule-d);padding-top:9px}
.ts>li:first-child{border-top:0;padding-top:0}
.ts>li>b{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--yellow);margin-right:8px}
.ts>li.now{color:var(--dim-d)}
.ts p{margin-top:3px}
.ts .lg{font-size:15px}
.ts .en,.ts .dim{color:var(--dim-d);font-size:13.5px}
.ts ul{margin:4px 0 0 18px} .ts ul li{font-size:13.5px}
.ts em{font-style:normal;font-weight:600;color:var(--yellow)}
.ts .ok{color:var(--ok)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips span{font-size:12.5px;border-radius:99px;padding:3px 10px;box-shadow:inset 0 0 0 1px var(--rule-d)}
.ts .kb{margin-top:8px;padding-left:10px;border-left:2px solid var(--yellow)} .ts .kb.miss{border-left-color:var(--rule-d)}
.ts .kb-t{font-weight:600;font-size:13.5px} .ts .kb q{display:block;font-size:13.5px;margin-top:2px} .ts .kb-s{color:var(--dim-d);font-size:12px}
/* the case as MTN staff would see it (cream on navy) */
.case{background:var(--cream);color:var(--navy);border-radius:14px;padding:12px 14px;margin-top:6px}
.case.warn{box-shadow:inset 0 0 0 2px var(--red)}
.case-h{display:flex;justify-content:space-between;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.case .pill{background:var(--navy);color:var(--yellow)}
.ts .case-s{font-size:13.5px;color:var(--dim);margin:4px 0 8px}
.case dl.kv{font-size:13.5px;gap:4px 12px}
.ts .case-f{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-top:8px}
.tech{display:none;margin-top:10px;padding-top:8px;border-top:1px dashed var(--rule-d);font-family:var(--mono);font-size:11px;color:var(--dim-d);gap:4px}
.tech span{overflow-wrap:anywhere}
.tech-on .tech{display:grid}

/* ---------- result (cream) ---------- */
.result .card>.kicker{display:block;margin-bottom:10px}
.result .pill{background:var(--navy);color:var(--yellow);padding:6px 12px}
.result .pill.ok{background:#dcefe3;color:var(--ok-l)}
.result .convo li small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;opacity:.75;margin-bottom:2px}
.result .convo li .en{display:block;font-size:13px;opacity:.8;margin-top:4px}

/* ---------- desktop ---------- */
@media (min-width:1024px){
  .wstep{display:grid;grid-template-columns:minmax(340px,32%) minmax(0,1fr)}
  .wstep[hidden]{display:none!important}
  .wa .guide{height:calc(100dvh - var(--top))}
  .wstep .scr{width:100%;max-width:880px;padding:24px 40px 0;justify-self:center}
  .wstep .lead{font-size:38px}
  .wstep .dock{grid-auto-flow:row;grid-auto-columns:auto;justify-content:stretch;padding-bottom:32px;box-shadow:none}
  .live{grid-template-columns:minmax(250px,300px) minmax(340px,400px) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);column-gap:20px;row-gap:14px;padding:0 24px 20px}
  .tabs{display:none}
  .live .ctop{grid-column:1/-1;padding:16px 0 0}
  .live .tester{grid-column:1;grid-row:2;margin:0;align-self:start;max-height:100%}
  .live .wa-phone{grid-column:2;grid-row:2;margin:6px;box-shadow:0 0 0 6px var(--panel);border-radius:18px}
  .live .sys{grid-column:3;grid-row:2;margin:0}
  .live[data-tab] .sys{display:flex} .live[data-tab] .tester{display:grid} .live[data-tab] .wa-phone{display:flex}
}
@media (min-width:1024px) and (max-width:1279px){.live{grid-template-columns:230px 340px minmax(0,1fr)}.tester .chk b{font-size:15px}}

/* the one action on the customer screen: a full-width bar */
#start{min-height:64px;font-size:19px;gap:10px;border-radius:14px}
.wa .cu>b{font-size:24px;line-height:1.15}   /* who they are: the first thing to read */
.hd a.back{color:inherit}