/* JPRAXC WhatsApp desk — the shared conversation surface of the School ERP and
   the Sales Portal: the chats down the left, the conversation on the right, a
   paper behind the bubbles, a warm tint for what we said, white for what they
   said, ticks for sent / delivered / read. Everything here is JPRAXC's own —
   the colours are the company's maroon and gold (inheriting the host
   product's theme tokens where it has them), every icon is drawn in this
   file's companion script, the paper is a plain dot grid, the emoji are the
   user's own fonts — nothing of Meta's, whose "WhatsApp" is named only as the
   channel this connects to. Dark mode follows the product's theme flag
   (html[data-theme=dark]) or a .theme-dark ancestor. */
.wad{--wad-brand:var(--brand,var(--wine,#700817));--wad-brand-dark:var(--brand-strong,var(--wine-dark,#520a17));--wad-gold:var(--accent,var(--gold,#dba72f));
  --wad-side:#fff;--wad-side-line:#ecdfe1;--wad-side-hover:#faf5f6;--wad-side-active:#f5e9ec;--wad-head:#f7f1f2;--wad-ink:var(--ink,#1d1116);--wad-muted:#6f5b60;--wad-soft:#9a868c;
  --wad-wall:#f4efe9;--wad-wall-pattern:rgba(112,8,23,.07);--wad-in:#fff;--wad-out:#fff3da;--wad-quote:rgba(112,8,23,.06);--wad-quote-bar:var(--wad-brand);--wad-green:var(--wad-brand);--wad-green-dark:var(--wad-brand-dark);--wad-tick:#9a868c;--wad-tick-read:#c98a12;
  --wad-badge:var(--wad-brand);--wad-panel:#fff;--wad-field:#f5eef0;--wad-danger:#b0182f;--wad-star:#dba72f;--wad-tint:#fff1d6;--wad-tint-ink:#7a4b00;--wad-offset:210px;
  display:grid;grid-template-columns:minmax(280px,360px) minmax(0,1fr);height:calc(100vh - var(--wad-offset));min-height:520px;border:1px solid var(--wad-side-line);border-radius:16px;overflow:hidden;background:var(--wad-side);color:var(--wad-ink);font-size:14px;line-height:1.45;position:relative}
:where(html[data-theme=dark],.theme-dark) .wad{--wad-side:#1b1418;--wad-side-line:#3a2a30;--wad-side-hover:#241b1f;--wad-side-active:#2d2126;--wad-head:#241b1f;--wad-ink:#f3e9ec;--wad-muted:#a8969c;--wad-soft:#a8969c;--wad-wall:#14100f;--wad-wall-pattern:rgba(255,255,255,.045);--wad-in:#2a2126;--wad-out:#3a2b17;--wad-quote:rgba(0,0,0,.28);--wad-panel:#1b1418;--wad-field:#2d2126;--wad-tick:#a8969c;--wad-tick-read:#ffc35a;--wad-tint:#3a2b17;--wad-tint-ink:#ffc35a}
.wad *,.wad *::before,.wad *::after{box-sizing:border-box}
.wad button{font:inherit}
.wad [hidden]{display:none!important}
.wad-choices{display:grid;gap:4px;margin:8px 0 2px}
.wad-choices span{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:9px;background:rgba(0,0,0,.055);color:var(--wad-ink);font-size:13px;line-height:1.35}
.wad-choices span b{display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:6px;background:var(--wad-brand);color:#fff;font-size:11px;font-weight:800}
:where(html[data-theme=dark],.theme-dark) .wad-choices span{background:rgba(255,255,255,.08)}
/* The host's own form dress (Sales: partners-theme.css, communication-desk.css) restyles every control it can reach, at a specificity the desk's rules never had; the desk's controls reset it and restate their own. */
.wad :where(input,textarea,select):where(:not([type=checkbox]):not([type=radio]):not([type=file])){box-sizing:border-box!important;width:auto!important;min-height:0!important;height:auto!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:var(--wad-ink)!important;font:inherit!important;line-height:inherit!important}
.wad :where(input,textarea,select):focus{outline:0!important;box-shadow:none!important}
.wad-icon.is-sm{width:14px;height:14px}
.wad-text.is-muted{color:var(--wad-muted)}
.wad-actions.is-tight{margin:0 0 10px}
.wad-note.is-tight{margin:4px 0 0}
.wad-avatar.wad-hue-0{background:#6c8ebf}.wad-avatar.wad-hue-1{background:#c58a3e}.wad-avatar.wad-hue-2{background:#7f9c3d}.wad-avatar.wad-hue-3{background:#b5537a}.wad-avatar.wad-hue-4{background:#5b8f88}.wad-avatar.wad-hue-5{background:#8a6bb8}.wad-avatar.wad-hue-6{background:#c4643f}.wad-avatar.wad-hue-7{background:#4f8fc2}
.wad-icon{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.wad .wad-iconbtn{display:inline-grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:var(--wad-muted);cursor:pointer}
.wad .wad-iconbtn:hover{background:rgba(0,0,0,.06)}
:where(html[data-theme=dark],.theme-dark) .wad-iconbtn:hover{background:rgba(255,255,255,.08)}
.wad .wad-iconbtn.is-on{color:var(--wad-green-dark)}
/* ---- the side: chats ---- */
.wad-side{display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--wad-side-line);background:var(--wad-side)}
.wad-side-head{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--wad-head)}
.wad-me{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.wad-me strong{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wad-me small{display:block;color:var(--wad-muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wad-avatar{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:#dfe5e7;color:#fff;font-weight:700;font-size:16px;letter-spacing:.02em;overflow:hidden}
.wad-avatar img{width:100%;height:100%;object-fit:cover}
.wad-avatar.is-sm{width:36px;height:36px;font-size:14px}
.wad-avatar.is-lg{width:110px;height:110px;font-size:40px}
.wad-search{padding:8px 12px;border-bottom:1px solid var(--wad-side-line)}
.wad-search label{display:flex;align-items:center;gap:10px;height:36px;padding:0 12px;border-radius:9px;background:var(--wad-field);color:var(--wad-muted)}
.wad-search input{flex:1;min-width:0;border:0;background:transparent;color:var(--wad-ink);font:inherit;outline:0;font-size:14px!important}
.wad-filters{display:flex;gap:6px;padding:8px 12px;overflow-x:auto;border-bottom:1px solid var(--wad-side-line);scrollbar-width:none}
.wad .wad-chip{flex:none;padding:5px 12px;border:1px solid var(--wad-side-line);border-radius:999px;background:transparent;color:var(--wad-muted);font-size:13px;cursor:pointer}
.wad .wad-chip.is-on{border-color:transparent;background:var(--wad-tint);color:var(--wad-tint-ink);font-weight:600}
:where(html[data-theme=dark],.theme-dark) .wad-chip.is-on{background:var(--wad-tint);color:var(--wad-tint-ink)}
.wad-list{flex:1;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.wad .wad-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;width:100%;padding:10px 12px;border:0;border-bottom:1px solid var(--wad-side-line);background:transparent;text-align:left;cursor:pointer}
.wad .wad-row:hover{background:var(--wad-side-hover)}
.wad .wad-row.is-active{background:var(--wad-side-active)}
.wad-row-top,.wad-row-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.wad-row-top strong{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wad-row-top time{flex:none;color:var(--wad-muted);font-size:12px}
.wad-row.has-unread .wad-row-top time{color:var(--wad-badge);font-weight:600}
.wad-row-bottom span{display:flex;align-items:center;gap:4px;min-width:0;color:var(--wad-muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wad-row-bottom span .wad-tick{flex:none}
.wad-row-meta{display:flex;align-items:center;gap:6px;flex:none}
.wad-unread{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--wad-badge);color:#fff;font-size:12px;font-weight:700}
.wad-pin{color:var(--wad-soft)}
.wad-label-dot{width:8px;height:8px;border-radius:50%;background:var(--wad-green)}
.wad-empty{display:grid;place-items:center;gap:6px;padding:40px 24px;color:var(--wad-muted);text-align:center}
.wad-empty strong{color:var(--wad-ink);font-size:16px}
/* ---- the conversation ---- */
.wad-main{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--wad-wall);position:relative}
.wad-main-head{display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 16px;background:var(--wad-head);border-bottom:1px solid var(--wad-side-line);cursor:pointer}
.wad-main-head .wad-who{flex:1;min-width:0}
.wad-main-head strong{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wad-main-head small{display:block;color:var(--wad-muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wad-window{flex:none;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;background:var(--wad-tint);color:var(--wad-tint-ink)}
.wad-window.is-closed{background:#fdecea;color:#b0182f}
:where(html[data-theme=dark],.theme-dark) .wad-window{background:var(--wad-tint);color:var(--wad-tint-ink)}
:where(html[data-theme=dark],.theme-dark) .wad-window.is-closed{background:#3a1116;color:#ff6b6b}
.wad-messages{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px 8% 18px;scrollbar-width:thin;
  background-color:var(--wad-wall);background-image:radial-gradient(var(--wad-wall-pattern) 1px,transparent 1.2px);background-size:22px 22px}
.wad-day{display:flex;justify-content:center;margin:10px 0}
.wad-day span{padding:5px 12px;border-radius:8px;background:var(--wad-in);color:var(--wad-muted);font-size:12.5px;box-shadow:0 1px .5px rgba(0,0,0,.13)}
.wad-msg{display:flex;margin:2px 0;padding:0 40px 0 0;position:relative}
.wad-msg.is-out{justify-content:flex-end;padding:0 0 0 40px}
.wad-msg+.wad-msg.is-in.follows,.wad-msg+.wad-msg.is-out.follows{margin-top:2px}
.wad-bubble{position:relative;max-width:min(65%,560px);min-width:90px;padding:6px 8px 20px;border-radius:9px;background:var(--wad-in);box-shadow:0 1px .5px rgba(0,0,0,.13);word-wrap:break-word;overflow-wrap:anywhere}
.wad-msg.is-out .wad-bubble{background:var(--wad-out)}
.wad-msg.is-first .wad-bubble::before{content:"";position:absolute;top:0;width:12px;height:14px;background:inherit;clip-path:polygon(0 0,100% 0,100% 100%)}
.wad-msg.is-in.is-first .wad-bubble{border-top-left-radius:0}.wad-msg.is-in.is-first .wad-bubble::before{left:-9px;transform:scaleX(-1)}
.wad-msg.is-out.is-first .wad-bubble{border-top-right-radius:0}.wad-msg.is-out.is-first .wad-bubble::before{right:-9px}
.wad-bubble.is-media{padding:4px 4px 20px}
.wad-bubble.is-media .wad-text{padding:6px 6px 0}
.wad-bubble.is-sticker{background:transparent;box-shadow:none;padding:0 0 18px}
.wad-sender{display:block;margin:0 0 2px;color:var(--wad-green-dark);font-size:12.5px;font-weight:600}
.wad-text{margin:0;white-space:pre-wrap;font-size:14.2px;line-height:1.4}
.wad-text a{color:var(--wad-brand);text-decoration:underline}
.wad-text.is-big{font-size:38px;line-height:1.2}
.wad-quote{display:block;margin:0 0 6px;padding:6px 10px 6px 12px;border-left:4px solid var(--wad-quote-bar);border-radius:6px;background:var(--wad-quote);color:var(--wad-muted);font-size:13px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wad-quote b{display:block;color:var(--wad-green-dark);font-size:12px}
.wad-quote.is-me b{color:var(--wad-gold)}
.wad-img{display:block;max-width:330px;width:100%;max-height:340px;object-fit:cover;border-radius:6px;cursor:zoom-in;background:var(--wad-field)}
.wad-bubble.is-sticker .wad-img{width:160px;height:160px;object-fit:contain;background:transparent;cursor:default}
.wad-video{display:block;max-width:330px;width:100%;border-radius:6px;background:#000}
.wad-audio{display:flex;align-items:center;gap:8px;min-width:260px;padding:6px 6px 2px}
.wad-audio audio{flex:1;min-width:0;height:36px}
.wad-audio .wad-avatar{width:36px;height:36px;font-size:13px}
.wad-doc{display:flex;align-items:center;gap:10px;min-width:240px;padding:10px;border-radius:8px;background:rgba(0,0,0,.05);color:inherit;text-decoration:none}
:where(html[data-theme=dark],.theme-dark) .wad-doc{background:rgba(255,255,255,.06)}
.wad-doc .wad-doc-icon{display:grid;place-items:center;flex:none;width:34px;height:40px;border-radius:5px;background:#e94b35;color:#fff;font-size:10px;font-weight:800;letter-spacing:.04em}
.wad-doc strong{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.wad-doc small{display:block;color:var(--wad-muted);font-size:12px}
.wad-doc .wad-icon{color:var(--wad-muted)}
.wad-card{display:grid;gap:4px;min-width:240px;padding:10px;border-radius:8px;background:rgba(0,0,0,.05);font-size:13.5px}
:where(html[data-theme=dark],.theme-dark) .wad-card{background:rgba(255,255,255,.06)}
.wad-card strong{font-size:14px}
.wad-card a{color:var(--wad-brand)}
.wad-card small{color:var(--wad-muted)}
.wad-buttons{display:grid;gap:4px;margin:6px -8px -20px;padding:4px 0 0}
.wad-buttons span{display:block;padding:9px;border-top:1px solid rgba(0,0,0,.08);color:var(--wad-brand);text-align:center;font-weight:500}
.wad-template-tag{display:inline-block;margin:0 0 4px;padding:1px 7px;border-radius:5px;background:rgba(0,0,0,.06);color:var(--wad-muted);font-size:11.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase}
.wad-meta{position:absolute;right:8px;bottom:3px;display:flex;align-items:center;gap:3px;color:var(--wad-muted);font-size:11px;line-height:1}
.wad-tick{width:16px;height:12px;flex:none;color:var(--wad-tick)}
.wad-tick.is-read{color:var(--wad-tick-read)}
.wad-tick.is-fail{color:var(--wad-danger)}
.wad-meta .wad-star{width:12px;height:12px;color:var(--wad-star);fill:currentColor;stroke:none}
.wad-error{display:block;margin:6px 0 0;color:var(--wad-danger);font-size:12px}
.wad-reactions{position:absolute;bottom:-12px;right:8px;display:flex;gap:2px;padding:2px 6px;border-radius:999px;background:var(--wad-in);box-shadow:0 1px 2px rgba(0,0,0,.2);font-size:13px;line-height:1.2}
.wad-msg.is-in .wad-reactions{right:auto;left:8px}
.wad-msg.has-reactions{margin-bottom:14px}
.wad-tools{position:absolute;top:2px;right:6px;display:none;gap:2px}
.wad-msg:hover .wad-tools,.wad-msg:focus-within .wad-tools{display:flex}
.wad .wad-tools button{display:grid;place-items:center;width:26px;height:26px;border:0;border-radius:50%;background:rgba(255,255,255,.85);color:var(--wad-muted);cursor:pointer}
:where(html[data-theme=dark],.theme-dark) .wad-tools button{background:rgba(32,44,51,.9)}
.wad-tools .wad-icon{width:16px;height:16px}
.wad-react-bar{position:absolute;z-index:5;display:flex;gap:2px;padding:4px;border-radius:999px;background:var(--wad-panel);box-shadow:0 4px 18px rgba(0,0,0,.2)}
.wad .wad-react-bar button{width:36px;height:36px;border:0;border-radius:50%;background:transparent;font-size:22px;cursor:pointer}
.wad .wad-react-bar button:hover{background:var(--wad-field);transform:scale(1.15)}
.wad-menu{position:absolute;z-index:6;min-width:180px;padding:6px 0;border-radius:10px;background:var(--wad-panel);box-shadow:0 6px 24px rgba(0,0,0,.22)}
.wad .wad-menu button{display:block;width:100%;padding:9px 16px;border:0;background:transparent;text-align:left;cursor:pointer}
.wad .wad-menu button:hover{background:var(--wad-field)}
.wad .wad-menu button.is-danger{color:var(--wad-danger)}
/* ---- composer ---- */
.wad-compose{display:flex;flex-direction:column;background:var(--wad-head);border-top:1px solid var(--wad-side-line)}
.wad-replying{display:flex;align-items:center;gap:8px;margin:8px 12px 0;padding:6px 10px 6px 12px;border-left:4px solid var(--wad-quote-bar);border-radius:6px;background:var(--wad-in);font-size:13px;color:var(--wad-muted)}
.wad-replying div{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wad-replying b{display:block;color:var(--wad-green-dark);font-size:12px}
.wad-compose-row{display:flex;align-items:flex-end;gap:6px;padding:8px 12px}
.wad-compose textarea{flex:1;min-height:42px!important;max-height:140px;padding:11px 14px!important;border:0;border-radius:9px!important;background:var(--wad-in)!important;color:var(--wad-ink);font:inherit;font-size:14.5px!important;line-height:1.4!important;resize:none;outline:0}
.wad .wad-send{display:grid;place-items:center;flex:none;width:44px;height:44px;border:0;border-radius:50%;background:var(--wad-green);color:#fff;cursor:pointer}
.wad .wad-send:disabled{opacity:.5;cursor:default}
.wad-compose input[type=file]{display:none}
.wad-closed{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;background:var(--wad-head);border-top:1px solid var(--wad-side-line);color:var(--wad-muted);font-size:13.5px}
.wad-closed strong{color:var(--wad-ink)}
.wad .wad-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:0;border-radius:999px;background:var(--wad-green);color:#fff;font-weight:600;cursor:pointer}
.wad .wad-btn.is-ghost{background:transparent;color:var(--wad-green-dark);border:1px solid var(--wad-green-dark)}
.wad .wad-btn.is-danger{background:var(--wad-danger)}
.wad .wad-btn:disabled{opacity:.55;cursor:default}
.wad-emoji{position:absolute;z-index:7;left:12px;bottom:70px;width:340px;max-height:260px;overflow:auto;padding:8px;border-radius:12px;background:var(--wad-panel);box-shadow:0 8px 30px rgba(0,0,0,.25);display:grid;grid-template-columns:repeat(8,1fr);gap:2px}
.wad .wad-emoji button{height:38px;border:0;border-radius:8px;background:transparent;font-size:22px;cursor:pointer}
.wad .wad-emoji button:hover{background:var(--wad-field)}
.wad-recording{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--wad-head);border-top:1px solid var(--wad-side-line)}
.wad-recording .wad-rec-dot{width:12px;height:12px;border-radius:50%;background:var(--wad-danger);animation:wad-blink 1s infinite}
@keyframes wad-blink{50%{opacity:.2}}
.wad-recording time{font-variant-numeric:tabular-nums;font-weight:600}
.wad-recording .wad-spacer{flex:1}
/* ---- attachment preview / lightbox ---- */
.wad-overlay{position:absolute;inset:0;z-index:20;display:grid;place-items:center;background:rgba(17,27,33,.92);color:#fff}
.wad-overlay .wad-overlay-close{position:absolute;top:10px;right:10px;color:#fff}
.wad-overlay img,.wad-overlay video{max-width:92%;max-height:70%;border-radius:8px;object-fit:contain}
.wad-overlay .wad-caption{width:min(560px,90%);margin-top:14px;display:flex;gap:8px}
.wad-overlay .wad-caption input{flex:1;padding:11px 14px!important;border:0!important;border-radius:9px!important;background:#fff!important;color:#111;font:inherit}
.wad-overlay .wad-filecard{display:grid;place-items:center;gap:6px;padding:30px 40px;border-radius:12px;background:rgba(255,255,255,.08)}
.wad-overlay .wad-filecard strong{font-size:16px}
.wad-overlay .wad-filecard small{color:#cfd8dc}
/* ---- side panels (info, new chat, templates, profile) ---- */
.wad-panel{position:absolute;top:0;right:0;bottom:0;z-index:10;width:min(420px,100%);display:flex;flex-direction:column;background:var(--wad-panel);border-left:1px solid var(--wad-side-line);box-shadow:-8px 0 30px rgba(0,0,0,.12)}
.wad-panel-head{display:flex;align-items:center;gap:10px;min-height:60px;padding:8px 12px;background:var(--wad-head);font-weight:600;font-size:16px}
.wad-panel-body{flex:1;overflow-y:auto;padding:16px;scrollbar-width:thin}
.wad-panel-body h4{margin:18px 0 8px;color:var(--wad-muted);font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.wad-panel-body h4:first-child{margin-top:0}
.wad-identity{display:grid;place-items:center;gap:6px;padding:8px 0 16px;text-align:center}
.wad-identity strong{font-size:18px}
.wad-identity small{color:var(--wad-muted);font-size:13.5px}
.wad-field{display:grid;gap:5px;margin:0 0 10px;font-size:12.5px;color:var(--wad-muted)}
.wad-field input,.wad-field textarea,.wad-field select{width:100%!important;padding:9px 11px!important;border:1px solid var(--wad-side-line)!important;border-radius:8px!important;background:var(--wad-side)!important;color:var(--wad-ink);font:inherit;font-size:14px!important;line-height:1.4!important}
.wad-field textarea{min-height:70px!important;resize:vertical}
.wad-switches{display:grid;gap:4px}
.wad .wad-switch{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:10px 4px;border:0;border-bottom:1px solid var(--wad-side-line);background:transparent;text-align:left;cursor:pointer;font-size:14px}
.wad-switch i{width:36px;height:20px;border-radius:999px;background:#cfd8dc;position:relative;flex:none;transition:background .15s}
.wad-switch i::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s}
.wad-switch.is-on i{background:var(--wad-green)}.wad-switch.is-on i::after{left:18px}
.wad .wad-switch.is-danger{color:var(--wad-danger)}
.wad-labels{display:flex;flex-wrap:wrap;gap:6px}
.wad-labels span{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--wad-tint);color:var(--wad-tint-ink);font-size:13px}
:where(html[data-theme=dark],.theme-dark) .wad-labels span{background:var(--wad-tint);color:var(--wad-tint-ink)}
.wad .wad-labels span button{border:0;background:transparent;color:inherit;cursor:pointer;font-size:14px;line-height:1}
.wad-labels form{display:flex;gap:6px}
.wad-labels input{width:130px;padding:4px 8px;border:1px solid var(--wad-side-line);border-radius:999px;background:var(--wad-side);color:var(--wad-ink);font:inherit;font-size:13px}
.wad-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.wad-gallery img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;cursor:zoom-in}
.wad-files a{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--wad-side-line);color:inherit;text-decoration:none;font-size:13.5px}
.wad-starred .wad-starred-item{padding:8px 10px;margin:0 0 6px;border-radius:8px;background:var(--wad-field);font-size:13.5px;cursor:pointer}
.wad-starred-item small{display:block;color:var(--wad-muted);font-size:12px}
.wad .wad-contacts button{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;width:100%;padding:8px 6px;border:0;border-bottom:1px solid var(--wad-side-line);background:transparent;text-align:left;cursor:pointer}
.wad-contacts strong{display:block;font-weight:600}
.wad-contacts small{display:block;color:var(--wad-muted);font-size:12.5px}
.wad-tpl{padding:10px 12px;margin:0 0 8px;border:1px solid var(--wad-side-line);border-radius:10px;background:var(--wad-side);cursor:pointer}
.wad-tpl:hover{border-color:var(--wad-green)}
.wad-tpl-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.wad-tpl-top strong{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px}
.wad .wad-tpl-status{padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:600;background:var(--wad-tint);color:var(--wad-tint-ink)}
.wad-tpl-status.is-pending{background:#fff4d6;color:#8a5a00}.wad-tpl-status.is-rejected,.wad-tpl-status.is-disabled{background:#fdecea;color:#b0182f}
.wad-tpl p{margin:6px 0 0;color:var(--wad-muted);font-size:13px;white-space:pre-wrap}
.wad-tpl-preview{margin:10px 0;padding:10px 12px;border-radius:9px;background:var(--wad-out);color:#111b21;white-space:pre-wrap;font-size:14px}
.wad-note{margin:6px 0 12px;color:var(--wad-muted);font-size:12.5px;line-height:1.5}
.wad-note.is-error{color:var(--wad-danger)}
.wad-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.wad-toast{position:absolute;left:50%;bottom:90px;z-index:30;transform:translateX(-50%);padding:9px 16px;border-radius:999px;background:#111b21;color:#fff;font-size:13.5px;box-shadow:0 6px 24px rgba(0,0,0,.3)}
.wad-toast.is-error{background:var(--wad-danger)}
.wad-blocked{padding:12px 16px;text-align:center;background:var(--wad-head);color:var(--wad-muted);border-top:1px solid var(--wad-side-line)}
.wad-notready{display:grid;place-items:center;gap:8px;height:100%;padding:24px;text-align:center;color:var(--wad-muted)}
.wad-notready strong{color:var(--wad-ink);font-size:18px}
/* Narrow homes — a phone, or a product's side pane — show one column at a time:
   the chats, then the open chat with a back arrow, as WhatsApp does on a phone.
   Measured against the host container where the browser can, the viewport
   otherwise. */
[data-wa-desk],.wa-desk-mount,.wad-host{container-type:inline-size;container-name:wad}
.wad-back{display:none}
@container wad (max-width:860px){
  .wad{grid-template-columns:1fr}
  .wad-side{display:none;border-right:0}.wad.is-list .wad-side{display:flex}.wad.is-list .wad-main{display:none}
  .wad-main-head .wad-back{display:inline-grid}
  .wad-messages{padding:12px 12px 16px}
  .wad-bubble{max-width:86%}
  .wad-panel{width:100%}
  .wad-emoji{width:calc(100% - 24px)}
}
@media (max-width:900px){
  .wad{grid-template-columns:1fr;--wad-offset:150px}
  .wad-side{display:none;border-right:0}.wad.is-list .wad-side{display:flex}.wad.is-list .wad-main{display:none}
  .wad-main-head .wad-back{display:inline-grid}
  .wad-messages{padding:12px 12px 16px}
  .wad-bubble{max-width:86%}
  .wad-panel{width:100%}
}