/* WhatsApp group maker: chat-app look, green header, bubbles and doodle wallpaper. Loaded only on the WhatsApp page. */
.wat{--gr:#25D366;--gr2:#128C7E;--teal:#0B4F44;--wb:#0B141A;--wb2:#111B21;--in:#202C33;--out:#005C4B;--ln:#22313A;--okc:#6FE3A1;--bdc:#FF7B7B;--wn:#F3C45A;margin:0 0 28px;color:var(--ink)}
.wat__grid{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;padding:24px;border-radius:20px;background:linear-gradient(180deg,var(--wb2),var(--wb));border:1px solid var(--ln);box-shadow:0 24px 50px -28px #000}
.wat__eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;font:700 .82rem/1 var(--body);letter-spacing:.16em;color:var(--gr)}
.wat__eyebrow::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--gr);box-shadow:0 0 0 4px rgba(37,211,102,.18)}
.wat__f{margin:0 0 16px}
.wat__f label,.wat__lbl{display:block;margin:0 0 7px;font:600 .95rem/1.2 var(--body);color:#D5E3DE}
.wat__f label span{color:var(--dim);font-weight:500}
.wat__f input{width:100%;height:52px;padding:0 16px;border-radius:26px;border:1.5px solid var(--ln);background:#0A1216;color:#E9F5F0;font:500 1.15rem/1 var(--name);outline:none;transition:border-color .2s,box-shadow .2s}
.wat__f input:focus{border-color:var(--gr);box-shadow:0 0 0 4px rgba(37,211,102,.15)}
.wat__cats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.wat__c{min-height:42px;padding:8px 6px;border:1px solid var(--ln);border-radius:12px;background:#0D171C;color:#B8C9C3;font:600 .9rem/1.15 var(--body);cursor:pointer;transition:all .15s}
.wat__c:hover{border-color:#2F4A45;color:#fff}
.wat__c.is-on{background:var(--teal);border-color:var(--gr2);color:#fff;box-shadow:inset 0 0 0 1px var(--gr2)}

/* chat mock */
.wat__mock{display:flex;flex-direction:column;align-items:center}
.wat__chat{width:100%;max-width:360px;border-radius:24px;overflow:hidden;border:6px solid #17232A;background:var(--wb);box-shadow:0 22px 44px -22px #000}
.wat__bar{display:flex;align-items:center;gap:10px;padding:12px;background:#1F2C34}
.wat__gav{flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--gr),var(--gr2));color:#05291F;font:700 1.2rem/1 var(--display)}
.wat__bt{flex:1;min-width:0}
.wat__gname{display:block;font:600 1rem/1.25 var(--name);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wat__mem{display:block;font-size:.76rem;color:#8FA39C;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wat__mono{flex:0 0 auto;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--gr);color:#05291F;font:700 .7rem/1 var(--body)}
.wat__msgs{display:flex;flex-direction:column;gap:8px;padding:14px 12px;min-height:230px;
  background-color:#0B141A;background-image:radial-gradient(circle at 10px 10px,rgba(255,255,255,.035) 2px,transparent 2.5px),radial-gradient(circle at 30px 34px,rgba(255,255,255,.03) 3px,transparent 3.5px);background-size:44px 44px}
.wat__sys{align-self:center;margin:0;max-width:92%;padding:6px 10px;border-radius:8px;background:#182229;color:#AFC1BA;font-size:.76rem;text-align:center;word-break:break-word}
.wat__in,.wat__out{position:relative;max-width:86%;padding:7px 10px 18px;border-radius:10px;font:400 .92rem/1.35 var(--name);color:#E9EDEF;word-break:break-word}
.wat__in{align-self:flex-start;background:var(--in);border-top-left-radius:2px}
.wat__in b{display:block;font:600 .78rem/1.3 var(--body);color:#F7A35C}
.wat__out{align-self:flex-end;background:var(--out);border-top-right-radius:2px}
.wat__in time,.wat__out time{position:absolute;right:8px;bottom:4px;font-size:.66rem;color:#9FB9B1}
.wat__tk{display:inline-block;width:14px;height:8px;margin-left:2px;border-right:2px solid #53BDEB;border-bottom:2px solid #53BDEB;transform:rotate(45deg) scale(.6);transform-origin:center}
.wat__type{display:flex;gap:8px;align-items:center;padding:8px 10px;background:#0B141A}
.wat__type i{flex:1;height:36px;border-radius:18px;background:#1F2C34}
.wat__type b{width:36px;height:36px;border-radius:50%;background:var(--gr2)}
.wat__label{margin:10px 0 0;font-size:.82rem;color:var(--dim)}
.wat__count{margin:6px 0 0;font:600 .9rem/1 var(--body);color:var(--muted)}
.wat__count .is-bad{color:var(--bdc)}
.wat__acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:360px;margin:12px 0 0}
.wat__btn{height:48px;border-radius:24px;border:1.5px solid var(--gr2);background:transparent;color:#BFF0D6;font:700 .95rem/1 var(--body);cursor:pointer;transition:background .2s}
.wat__btn:hover{background:rgba(37,211,102,.1)}
.wat__btn--hot{background:var(--gr);border-color:var(--gr);color:#05291F}.wat__btn--hot:hover{background:#3BE07A}

/* results */
.wat__res{margin:18px 0 0;padding:18px;border-radius:20px;border:1px solid var(--ln);background:#091013}
.wat__tabs{display:flex;gap:6px;margin:0 0 12px;padding:4px;border-radius:14px;background:#111B21;width:max-content;max-width:100%}
.wat__tab{border:0;border-radius:10px;background:transparent;color:#9FB2AB;padding:11px 16px;font:700 .95rem/1 var(--body);cursor:pointer}
.wat__tab.is-on{background:var(--teal);color:#fff}
.wat__note{margin:0 0 12px;color:var(--dim);font-size:.98rem}
.wat__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.wat__it{position:relative;display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;padding:11px 12px 11px 14px;border-radius:4px 14px 14px 14px;background:var(--in);transition:transform .15s,background .15s}
.wat__it:nth-child(even){border-radius:14px 4px 14px 14px;background:#0F3B33}
.wat__it:hover{transform:translateY(-2px);background:#26363F}.wat__it:nth-child(even):hover{background:#12483E}
.wat__it--wide{grid-column:1/-1}
.wat__nm{grid-column:1;font:500 1.08rem/1.35 var(--name);color:#F1F7F4;word-break:break-word;cursor:pointer}
.wat__meta{grid-column:1;font:500 .8rem/1.3 var(--body);color:#90A59E}
.wat__meta i{font-style:normal;font-weight:700;margin-left:4px}
.wat__meta .is-ok{color:var(--okc)}.wat__meta .is-warn{color:var(--wn)}.wat__meta .is-bad{color:var(--bdc)}
.wat__b{grid-column:2;grid-row:1/3;display:flex;flex-direction:column;gap:6px}
.wat__b button{min-width:62px;height:32px;border-radius:16px;border:0;background:rgba(0,0,0,.28);color:#D8F5E6;font:700 .85rem/1 var(--body);cursor:pointer}
.wat__b button:hover{background:var(--gr);color:#05291F}

@keyframes watIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes watDots{0%,80%,100%{opacity:.3}40%{opacity:1}}
@media (prefers-reduced-motion:no-preference){
  .wat__sys{animation:watIn .4s both}
  .wat__in{animation:watIn .45s .15s both}
  .wat__out{animation:watIn .45s .35s both}
  .wat__eyebrow::before{animation:watDots 1.6s ease-in-out infinite}
}
@media (max-width:860px){.wat__grid{grid-template-columns:1fr;padding:18px 14px}.wat__msgs{min-height:0}}
@media (max-width:480px){.wat__cats{grid-template-columns:repeat(2,1fr)}.wat__list{grid-template-columns:1fr}.wat__tabs{width:100%;display:grid;grid-template-columns:repeat(2,1fr)}.wat__tab{padding:10px 4px;font-size:.84rem;line-height:1.15}}
