/* WhatsApp community UI inside the /temp phone — the wa-animation look (style.css,
   WA-ANIMATION section) scoped to .tmp-wa, with the phone chrome provided by .tmp-phone. */
.tmp-wa {
  --wa-bg: #0b141a; --wa-panel: #111b21; --wa-head: #1f2c34; --wa-bub: #202c33; --wa-text: #e9edef; --wa-muted: #8696a0;
  --wa-green: #25d366; --wa-link: #53bdeb; --wa-line: #222d34;
  background: var(--wa-panel); color: var(--wa-text);
}
.tmp-wa, .tmp-wa * { font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.tmp-wa .tmp-scr { background: var(--wa-panel); color: var(--wa-text); font-size: 14.5px; line-height: 1.45; }
.tmp-wa .tmp-status, .tmp-screen .tmp-status { transition: color .45s ease; }
.tmp-wa .tmp-status { color: var(--wa-text); }
.tmp-wa .tmp-sig { background: linear-gradient(90deg, #e9edef 20%, transparent 20% 27%, #e9edef 27% 47%, transparent 47% 54%, #e9edef 54% 74%, transparent 74% 81%, #e9edef 81%); }
.tmp-wa .tmp-bat { border-color: #e9edef; }
.tmp-wa .tmp-bat::after { background: #e9edef; }
.tmp-wa .tmp-off { box-shadow: -12px 0 24px rgba(0, 0, 0, .45); }
.tmp-wa svg:not(.tmp-ic) { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; display: block; }

/* home */
.an-screen { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.an-screen::-webkit-scrollbar { display: none; }
.an-empty { padding: 40px 24px; text-align: center; color: var(--wa-muted); }
.an-comm-top { text-align: center; padding: 22px 16px 16px; border-bottom: 6px solid var(--wa-bg); }
.an-comm-av { width: 76px; height: 76px; border-radius: 20px; background: #2a3942; color: var(--wa-text); display: inline-grid; place-items: center; }
.an-comm-av svg { width: 40px; height: 40px; }
.an-comm-name { font-size: 20px; font-weight: 600; margin-top: 10px; white-space: pre-line; line-height: 1.25; }
.an-comm-sub { color: var(--wa-muted); font-size: 13.5px; margin-top: 2px; }
.an-sec { padding: 14px 16px 6px; color: var(--wa-muted); font-size: 13.5px; }
.an-row { position: relative; overflow: hidden; width: 100%; display: flex; gap: 12px; align-items: center; padding: 10px 16px; background: none; border: 0; text-align: left; color: inherit; font-size: inherit; cursor: pointer; transition: background .2s ease; }
.an-row:hover { background: #182229; }
.an-row.bump { animation: an-bump .6s ease; }
@keyframes an-bump { 0% { background: #1d3b2f; } 100% { background: transparent; } }
.an-row.tmp-hinted { background: #182229; box-shadow: inset 0 0 0 1.5px var(--wa-green); }
.an-row .tmp-tap-ring { left: 41px; }
.an-row-main { flex: 1; min-width: 0; border-bottom: 1px solid var(--wa-line); padding-bottom: 10px; }
.an-row-top, .an-row-bot { display: flex; align-items: center; gap: 8px; }
.an-row-name { flex: 1; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-row-time { font-size: 12px; color: var(--wa-muted); }
.an-row.has-unread .an-row-time { color: var(--wa-green); }
.an-row-prev { flex: 1; color: var(--wa-muted); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.an-unread { background: var(--wa-green); color: #0b141a; font-size: 12px; font-weight: 700; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; animation: an-pop .3s ease; }
.an-row-badge:empty, .an-back-badge:empty { display: none; }
.an-typing-txt { color: var(--wa-green); }
.an-av { --h: 200; flex: none; width: 50px; height: 50px; border-radius: 50%; background: #fff; display: grid; place-content: center; text-align: center; line-height: 1; border: 2px solid hsl(var(--h) 60% 55%); }
.an-av b { font-size: 13px; font-weight: 800; color: hsl(var(--h) 65% 42%); letter-spacing: -.3px; }
.an-av small { font-size: 7.5px; font-weight: 700; color: #c0392b; margin-top: 2px; }
.an-av.small { width: 40px; height: 40px; }
.an-av.small b { font-size: 11px; }
.an-av.small small { font-size: 6px; }
.an-av-ann { background: #2a3942; border-color: #2a3942; color: var(--wa-text); border-radius: 12px; }
.an-av.small.an-av-ann { border-radius: 10px; }
.an-av, .an-comm-av { position: relative; overflow: hidden; }
.an-dp { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .2s; }
.has-dp .an-dp { opacity: 1; }
.an-av.has-dp { border-color: transparent; background: #2a3942; }
.an-foot-note { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--wa-muted); font-size: 11.5px; padding: 14px 16px 18px; }

/* chat */
.tmp-wa .tmp-scr-chat { background: var(--wa-bg); }
.an-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--wa-head); }
.an-back { position: relative; background: none; border: 0; color: inherit; padding: 4px; display: flex; align-items: center; gap: 2px; cursor: pointer; }
.an-back .an-unread { font-size: 11px; min-width: 18px; height: 18px; }
.an-head-main { flex: 1; min-width: 0; }
.an-head-name { font-size: 16.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-head-sub { font-size: 12.5px; color: var(--wa-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-head-icons { display: flex; gap: 14px; padding-right: 4px; }
.an-msgs {
  flex: 1; min-height: 0; overflow-y: auto; padding: 8px 12px 120px; scrollbar-width: none;
  background-color: var(--wa-bg);
  background-image: radial-gradient(rgba(255, 255, 255, .025) 1.2px, transparent 1.3px), radial-gradient(rgba(255, 255, 255, .02) 1px, transparent 1.1px);
  background-size: 22px 22px, 34px 34px; background-position: 0 0, 11px 17px;
}
.an-msgs::-webkit-scrollbar { display: none; }
.an-enc { margin: 6px auto 10px; max-width: 300px; background: #182229; color: #ffd279; font-size: 12px; text-align: center; padding: 6px 10px; border-radius: 8px; }
.an-day { text-align: center; margin: 10px 0; }
.an-day span { display: inline-block; background: #182229; color: var(--wa-muted); font-size: 12px; padding: 5px 12px; border-radius: 8px; }
.an-msg { display: flow-root; position: relative; max-width: 86%; width: fit-content; background: var(--wa-bub); border-radius: 8px; border-top-left-radius: 0; padding: 6px 8px 8px; margin: 10px 0 2px; box-shadow: 0 1px .5px rgba(0, 0, 0, .13); word-wrap: break-word; }
.an-msg.cont { border-top-left-radius: 8px; margin-top: 3px; }
.an-msg.has-media { padding: 3px 3px 8px; width: 86%; }
.an-msg.has-media .an-sender, .an-msg.has-media .an-txt { padding: 0 5px; }
.an-msg.pop { animation: an-pop .38s cubic-bezier(.2, .9, .3, 1.2); transform-origin: left bottom; }
@keyframes an-pop { from { opacity: 0; transform: translateY(12px) scale(.94); } to { opacity: 1; transform: none; } }
.an-sender { display: block; font-size: 13px; font-weight: 600; color: var(--sc, #f78a6b); margin-bottom: 2px; }
.an-txt { display: block; white-space: pre-wrap; line-height: 1.38; }
.an-txt a, .an-link { color: var(--wa-link); text-decoration: underline; }
.an-meta { float: right; font-size: 11px; color: var(--wa-muted); margin: 4px 0 -4px 12px; position: relative; top: 2px; }
.an-msg.has-media .an-meta { margin-right: 6px; }
.an-img { width: 100%; border-radius: 6px; background: #111 center / cover no-repeat; overflow: hidden; position: relative; margin-bottom: 4px; }
.an-img img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .3s; }
.an-img img.ok { opacity: 1; }
.an-slot { background: #f4f5f7; }
.an-slot img { object-fit: contain; }
.an-play { position: absolute; inset: 0; display: grid; place-items: center; }
.an-play svg { width: 48px; height: 48px; fill: rgba(0, 0, 0, .55); stroke: #fff; }

/* join bar on the dark chat */
.tmp-wa .tmp-joinbar { background: var(--wa-head); border-top-color: var(--wa-line); box-shadow: 0 -6px 18px rgba(0, 0, 0, .35); }
.tmp-wa .tmp-cta { font-family: inherit; }

@media (max-width: 768px) {
  .tmp-wa .tmp-scr { padding-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .an-msg.pop, .an-row.bump, .an-unread { animation: none; }
}

/* Public / Premium tag: Biometrics groups are public, Interview groups are premium */
.an-tag { flex: none; display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; line-height: 1; padding: 4px 7px; border-radius: 999px; }
.an-tag-public { background: #15302a; color: var(--wa-green); }
.an-tag-premium { background: #3a2d10; color: #f0b84a; }
.an-tag-head { margin-left: 8px; vertical-align: 2px; font-size: 9px; padding: 3px 6px; }

/* Mobile: the same bezelled phone as on desktop, scaled to the screen (not a bottom sheet) */
@media (max-width: 768px) {
  .tmp-half {
    top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100%;
    background: transparent; display: flex; align-items: center; justify-content: center;
    animation: tmp-fade .4s ease both;
  }
  .tmp-leaving .tmp-half { animation: tmp-fade-out .4s ease both; }
  .tmp-half::before { display: none; }
  .tmp-phone {
    width: min(92vw, calc((100vh - 72px) * 9 / 16.5), 400px); height: auto; aspect-ratio: 9 / 16.5;
    border-radius: 44px; padding: 10px; background: #0f1012;
    box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .6), 0 0 0 1.5px #3a3b40, inset 0 0 0 2px #26272b;
  }
  .tmp-phone::before, .tmp-phone::after { display: block; }
  .tmp-phone::before { top: 120px; height: 56px; }
  .tmp-phone::after { top: 190px; height: 36px; }
  .tmp-island { display: block; width: 86px; height: 24px; top: 18px; }
  .tmp-status { display: flex; height: 42px; padding: 0 24px; font-size: 12.5px; }
  .tmp-screen { border-radius: 36px; }
  .tmp-scr, .tmp-wa .tmp-scr { padding-top: 42px; }
  .tmp-grab { display: none; }
  .tmp-close { position: fixed; top: 14px; right: 14px; width: 36px; height: 36px; font-size: 20px; border-color: rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .92); }
  .tmp-appbar { padding-right: 14px; }
}

/* ===== Reference phone (wa-animation .an-phone) replaces the iPhone-style mock ===== */
.tmp-phone {
  width: 390px; max-width: 100%; height: min(820px, calc(100vh - 120px)); min-height: 560px; aspect-ratio: auto;
  border-radius: 38px; border: 10px solid #000; padding: 0; background: #111b21;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}
.tmp-phone::before, .tmp-phone::after, .tmp-island { display: none; }
.tmp-screen { border-radius: 28px; background: #111b21; }
.tmp-status.an-status {
  height: 30px; padding: 0 22px; font-size: 13px; font-weight: 600; z-index: 15;
  background: #1f2c34; color: #e9edef; display: flex; align-items: center; justify-content: space-between;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.an-status-icons { display: flex; gap: 4px; }
.an-status-icons svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tmp-scr, .tmp-wa .tmp-scr { padding-top: 30px; }
/* dark splash under the dark status bar, like WhatsApp's dark theme */
.tmp-splash { background: #111b21; top: 30px; }
.tmp-splash-from { color: #8696a0; }
.tmp-splash-from b { color: #e9edef; }
.tmp-grab { display: none; }

@media (max-width: 768px) {
  .tmp-phone { width: 390px; height: min(820px, calc(100vh - 120px)); aspect-ratio: auto; border-radius: 38px; border: 10px solid #000; padding: 0; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
  .tmp-status { display: flex; height: 30px; padding: 0 22px; font-size: 13px; }
  .tmp-screen { border-radius: 28px; }
  .tmp-scr, .tmp-wa .tmp-scr { padding-top: 30px; }
}
@media (max-width: 520px) {
  /* the reference's small-screen phone: full width, no border, 16px corners */
  .tmp-phone { width: calc(100vw - 24px); height: calc(100vh - 140px); min-height: 480px; border-width: 0; border-radius: 16px; }
  .tmp-screen { border-radius: 16px; }
  .tmp-close { top: 12px; right: 12px; }
}

/* ===== tweaks: no green outline on the hinted row, smaller group text, smaller Join button ===== */
.an-row.tmp-hinted { background: transparent; box-shadow: none; }
.an-row-name { font-size: 14.5px; }
.an-row-prev { font-size: 12.5px; }
.an-row-time { font-size: 11px; }
.an-tag { font-size: 9px; padding: 3px 6px; }
.an-head-name { font-size: 15.5px; }
.tmp-wa .tmp-joinbar { padding: 8px 14px 12px; }
.tmp-wa .tmp-cta { width: auto; min-width: 190px; margin: 0 auto; padding: 9px 22px; font-size: 13.5px; font-weight: 600; box-shadow: 0 4px 12px rgba(37, 211, 102, .3); }
.tmp-wa .tmp-cta svg { font-size: 15px; }
.tmp-wa .an-msgs { padding-bottom: 90px; }

/* smaller Join group button */
.tmp-wa .tmp-cta { min-width: 150px; padding: 7px 18px; font-size: 12.5px; gap: 6px; }
.tmp-wa .tmp-cta svg { font-size: 13px; }
.tmp-wa .tmp-joinbar { padding: 7px 14px 10px; }
.tmp-wa .an-msgs { padding-bottom: 80px; }

/* even smaller Join group button */
.tmp-wa .tmp-cta { min-width: 120px; padding: 6px 14px; font-size: 11.5px; gap: 5px; box-shadow: 0 3px 8px rgba(37, 211, 102, .25); }
.tmp-wa .tmp-cta svg { font-size: 12px; }
.tmp-wa .tmp-joinbar { padding: 6px 14px 8px; }
.tmp-wa .an-msgs { padding-bottom: 70px; }

/* Join group button: a touch bigger again */
.tmp-wa .tmp-cta { min-width: 136px; padding: 7px 16px; font-size: 12.5px; gap: 6px; }
.tmp-wa .tmp-cta svg { font-size: 13px; }
.tmp-wa .tmp-joinbar { padding: 7px 14px 9px; }
.tmp-wa .an-msgs { padding-bottom: 76px; }

/* slightly smaller phone */
.tmp-phone { width: 350px; height: min(740px, calc(100vh - 140px)); min-height: 520px; }
@media (max-width: 768px) {
  .tmp-phone { width: 350px; height: min(740px, calc(100vh - 140px)); min-height: 520px; }
}
@media (max-width: 520px) {
  .tmp-phone { width: calc(100vw - 40px); height: calc(100vh - 170px); min-height: 460px; }
}

/* ===== fixed-proportion phone, scaled to fit the viewport by temp.js (fitPhone) ===== */
.tmp-phone, .tmp-phone.tmp-phone { width: 350px; height: 700px; min-height: 0; max-width: none; transform-origin: center center; }
@media (max-width: 768px) { .tmp-phone { width: 350px; height: 700px; min-height: 0; border-width: 10px; border-radius: 38px; } .tmp-screen { border-radius: 28px; } }
@media (max-width: 520px) { .tmp-phone { width: 350px; height: 700px; min-height: 0; border-width: 10px; border-radius: 38px; } .tmp-screen { border-radius: 28px; } }

/* ===== all groups, by tier; compact community header ===== */
.an-comm-top { padding: 14px 16px 12px; }
.an-comm-av { width: 56px; height: 56px; border-radius: 16px; }
.an-comm-av svg { width: 30px; height: 30px; }
.an-comm-name { font-size: 16px; margin-top: 8px; }
.an-comm-sub { font-size: 12.5px; }
.an-sec { padding: 12px 16px 4px; font-size: 11px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--wa-muted); }
.an-row { padding: 8px 16px; }
.an-row-main { padding-bottom: 8px; }
.an-av { width: 46px; height: 46px; }
.an-row-quiet { color: var(--wa-muted); font-style: italic; }

/* ===== smaller type inside the phone so nothing gets clipped ===== */
.tmp-wa .tmp-scr { font-size: 12.5px; line-height: 1.4; }
.an-comm-name { font-size: 15px; }
.an-comm-sub { font-size: 11.5px; }
.an-sec { font-size: 10px; }
.an-row { gap: 10px; padding: 7px 14px; }
.an-row-top { gap: 6px; }
.an-row-name { font-size: 13px; }
.an-row-prev { font-size: 11.5px; }
.an-row-time { font-size: 10px; }
.an-tag { font-size: 8px; padding: 2px 5px; }
.an-av { width: 42px; height: 42px; }
.an-av b { font-size: 11px; }
.an-unread { font-size: 10.5px; min-width: 18px; height: 18px; }
.an-foot-note { font-size: 10.5px; }
.an-head { padding: 7px 8px; gap: 6px; }
.an-head-name { font-size: 14px; }
.an-head-sub { font-size: 11px; }
.an-av.small { width: 34px; height: 34px; }
.an-head-icons svg, .an-back svg { width: 19px; height: 19px; }
.an-msgs { padding: 6px 10px 76px; }
.an-enc { font-size: 10.5px; max-width: 270px; padding: 5px 8px; }
.an-day span { font-size: 10.5px; padding: 4px 10px; }
.an-msg { font-size: 12.5px; max-width: 88%; padding: 5px 7px 7px; margin: 8px 0 2px; }
.an-msg.has-media { width: 88%; }
.an-sender { font-size: 11.5px; }
.an-txt { line-height: 1.35; }
.an-meta { font-size: 10px; margin: 3px 0 -4px 10px; }
.tmp-status.an-status { font-size: 12px; }