/* Экран WhatsApp на iPhone (render-wa.js). Корень — .tg-screen.wa: каркас ленты общий с Telegram, вид свой.
   Размеры — со скринов настоящего айфона (08.10.2026, iPhone 390×844, светлая тема), в pt. */
.tg-screen.wa { background: var(--wa-wall); color: var(--wa-fg); }

/* шапка: полоса чуть светлее фона (на светлой теме почти сливается, на тёмной видна), под ней лента размыта;
   плашки — стекло 44 pt в 16 pt от краёв */
.tg-screen.wa .wa-hdr { position: absolute; top: 0; left: 0; right: 0; z-index: 4; pointer-events: none; background: rgba(var(--wa-bar),.93);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); }
.tg-screen.wa .sb { z-index: 6; }
.tg-screen.wa .wa-nav { position: absolute; left: 0; right: 0; z-index: 6; height: 44px; display: flex; align-items: center; padding: 0 16px; color: var(--wa-ic); }
.tg-screen.wa .wa-pill { flex: none; height: 44px; border-radius: 22px; background: var(--wa-pill); box-shadow: var(--wa-pill-sh); display: flex; align-items: center;
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); }
.tg-screen.wa .wa-back { min-width: 44px; justify-content: center; font-size: 17px; letter-spacing: -.2px; }
.tg-screen.wa .wa-back svg { display: block; flex: none; margin-left: -2px; }
.tg-screen.wa .wa-back.has-n { justify-content: flex-start; padding: 0 9px 0 12px; gap: 7px; }
.tg-screen.wa .wa-back.has-n svg { margin-left: 0; }
.tg-screen.wa .wa-acts { width: 102px; }
.tg-screen.wa .wa-acts span { flex: 1; display: flex; justify-content: center; }
.tg-screen.wa .wa-acts svg { display: block; }
.tg-screen.wa .wa-ava { flex: none; border-radius: 50%; overflow: hidden; background: var(--wa-ava); }
.tg-screen.wa .wa-ava img, .tg-screen.wa .wa-ava svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.tg-screen.wa .wa-nav > .wa-ava { margin-left: 9px; }
.tg-screen.wa .wa-ttl { flex: 1; min-width: 0; margin: 0 8px 0 9px; display: flex; flex-direction: column; justify-content: center; }
.tg-screen.wa .wa-name { font-size: 16px; font-weight: 600; line-height: 20px; letter-spacing: -.25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-screen.wa .wa-st { font-size: 12.5px; line-height: 16px; letter-spacing: 0; color: var(--wa-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* лента: пузыри в 16.5 pt от краёв; одна строка — 38.6 pt, каждая следующая +22 */
.tg-screen.wa .msgs { padding: 0 16.5px; }
.tg-screen.wa .bw { filter: none; }
.tg-screen.wa .bub { padding: 6.5px 11.5px 10.1px 12.2px; border-radius: 19px; font-size: 17px; line-height: 22px; letter-spacing: -.4px; color: var(--wa-fg); }
.tg-screen.wa .in .bub { background: var(--wa-in); color: var(--wa-fg); }
.tg-screen.wa .out .bub { background: var(--wa-out); color: var(--wa-fg); }
.tg-screen.wa .wa-tail { position: absolute; bottom: 0; display: block; }
.tg-screen.wa .out .wa-tail { right: -5.5px; color: var(--wa-out); }
.tg-screen.wa .in .wa-tail { left: -5.5px; color: var(--wa-in); transform: scaleX(-1); }
.tg-screen.wa .txt a, .tg-screen.wa .out .txt a { color: var(--wa-link); }

/* время: 12 pt, в 11.5 pt от правого края и на 8.3 pt (по базовой линии) выше низа пузыря; до текста — 14.6 pt.
   Строка, где оказалось одно время, ниже текстовой: 14.7 pt — поэтому высота строки задана тексту (.wt), а не блоку */
.tg-screen.wa .txt { line-height: 14.7px; }
.tg-screen.wa .txt .wt { line-height: 22px; }
.tg-screen.wa .meta, .tg-screen.wa .ghost { gap: 3.6px; font-size: 12px; line-height: 14px; letter-spacing: 0; }
.tg-screen.wa .ghost { margin-inline-start: 14.6px; height: 0; line-height: 0; vertical-align: baseline; }   /* только ширина: на высоту строки не влияет */
.tg-screen.wa .in .meta, .tg-screen.wa .out .meta { color: var(--wa-meta); bottom: 5.2px; inset-inline-end: 11.5px; }
.tg-screen.wa .meta .chk { display: block; color: var(--wa-meta) !important; }   /* !important — перебить правило галочек Telegram */
.tg-screen.wa .meta .chk.rd { color: var(--wa-read) !important; }
.tg-screen.wa .meta .ed { margin-inline-end: 2px; }

/* цитата: плашка в 3.5 pt от краёв пузыря, слева полоса 4 pt цвета имени */
.tg-screen.wa .wa-q { position: relative; margin: -2.5px -8px 6px -8.7px; padding: 9px 10px 11px 16px; border-radius: 12px; overflow: hidden; background: var(--wa-quote);
  font-size: 14px; line-height: 18px; letter-spacing: -.1px; min-width: 150px; }
.tg-screen.wa .wa-q::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--q); }
.tg-screen.wa .wa-q .rn { font-size: 15px; line-height: 19px; font-weight: 600; letter-spacing: -.2px; color: var(--q); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-screen.wa .wa-q .rt { color: var(--wa-quote-fg); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tg-screen.wa .wa-fwd { font-size: 13px; line-height: 17px; font-style: italic; color: var(--wa-sub); margin-bottom: 1px; }

/* реакция: плашка на нижнем крае пузыря */
.tg-screen.wa .bw.has-react { margin-bottom: 18px; }
.tg-screen.wa .wa-react { position: absolute; bottom: -19px; height: 26px; min-width: 32px; padding: 0 7px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1; background: var(--wa-in); box-shadow: 0 0 0 1.5px var(--wa-wall); }
.tg-screen.wa .in .wa-react { left: 8px; }
.tg-screen.wa .out .wa-react { right: 8px; }

/* фото и видео: без пузыря, 248.5 pt, углы 17; подпись — уже в пузыре. Рядом с полученным — кнопка «переслать» */
.tg-screen.wa .bub.media { padding: 3px; }
.tg-screen.wa .bub.media.bare, .tg-screen.wa .in .bub.media.bare, .tg-screen.wa .out .bub.media.bare { padding: 0; background: none; }
.tg-screen.wa .wa-pic { position: relative; width: 248.5px; max-width: 100%; border-radius: 17px; overflow: hidden; line-height: 0; }
.tg-screen.wa .bub.media.has-cap .wa-pic { border-radius: 16px; width: 262px; }
.tg-screen.wa .wa-pic img { display: block; width: 100%; max-height: 292px; object-fit: cover; }
.tg-screen.wa .wa-pic-0 { height: 190px; background: color-mix(in srgb, var(--wa-fg) 10%, transparent); }
.tg-screen.wa .bub.media.has-cap .txt { padding: 4px 8.5px 7px 9.2px; }
.tg-screen.wa .meta.over, .tg-screen.wa .in .meta.over, .tg-screen.wa .out .meta.over { color: #fff !important; background: none; padding: 0; height: auto; bottom: 6.5px; inset-inline-end: 12px; text-shadow: 0 0 4px rgba(0,0,0,.55); }
.tg-screen.wa .meta.over .chk:not(.rd) { color: #fff !important; }
.tg-screen.wa .meta.over .chk { filter: drop-shadow(0 0 2px rgba(0,0,0,.5)); }
.tg-screen.wa .wa-vdur { position: absolute; left: 9px; bottom: 6.5px; display: flex; align-items: center; gap: 4.5px; font-size: 12px; line-height: 14px; color: #fff; text-shadow: 0 0 4px rgba(0,0,0,.55); }
.tg-screen.wa .wa-vdur svg { display: block; filter: drop-shadow(0 0 2px rgba(0,0,0,.45)); }
.tg-screen.wa .wa-vplay { position: absolute; left: 50%; top: 50%; width: 50.5px; height: 50.5px; margin: -25.25px 0 0 -25.25px; border-radius: 50%; background: var(--wa-vplay); color: var(--wa-vplay-fg);
  display: flex; align-items: center; justify-content: center; }
.tg-screen.wa .wa-vplay svg { margin-left: 3px; }
.tg-screen.wa .wa-fbtn { position: absolute; left: calc(100% + 9px); top: 50%; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%; background: var(--wa-fwd); display: flex; align-items: center; justify-content: center; }
.tg-screen.wa .wa-fbtn svg { display: block; }
/* альбом: сетка в две колонки, просветы 1.3 pt цвета пузыря, время на каждом кадре */
.tg-screen.wa .bub.media.alb { padding: 1.3px; }
.tg-screen.wa .wa-alb { width: 283px; max-width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 1.3px; border-radius: 17.5px; overflow: hidden; }
.tg-screen.wa .wa-cell { position: relative; aspect-ratio: 1; overflow: hidden; }
.tg-screen.wa .wa-cell.wide { grid-column: 1 / 3; aspect-ratio: 2; }
.tg-screen.wa .wa-cell img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tg-screen.wa .wa-more { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.45); color: #fff; font-size: 26px; letter-spacing: 0; }

/* голосовое: пузырь 285.5 pt; треугольник, дорожка с точкой, под ней длительность, справа аватар 44 pt со значком микрофона */
.tg-screen.wa .bub.vbub { width: 285.5px; max-width: 100%; height: 66px; padding: 0; }
.tg-screen.wa .bub.vbub.has-hint { height: auto; padding-bottom: 28.5px; }
.tg-screen.wa .wa-voice { position: relative; height: 60px; }
.tg-screen.wa .wa-play { position: absolute; left: 26.5px; top: 26.5px; display: flex; color: var(--wa-play); }
.tg-screen.wa .wa-play svg { display: block; }
.tg-screen.wa .wa-wave { position: absolute; left: 62px; top: 21px; height: 28px; display: flex; align-items: center; gap: 2px; padding-left: 5px; }
.tg-screen.wa .wa-wave b { position: absolute; left: -6px; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: var(--wa-dot); }
.tg-screen.wa .wa-wave i { flex: none; display: block; width: 2.3px; border-radius: 1.2px; background: var(--wa-wave); }
.tg-screen.wa .wa-vava { position: absolute; right: 11px; top: 12.5px; width: 44px; height: 44px; }
.tg-screen.wa .wa-vmic { position: absolute; left: -7px; bottom: 1px; color: var(--wa-dot); display: flex; }
.tg-screen.wa .wa-dur { position: absolute; left: 56.5px; top: 54px; font-size: 12px; line-height: 14px; color: var(--wa-meta); }
.tg-screen.wa .wa-hint { margin: 12px 16px 0 15.8px; font-size: 14px; line-height: 18px; letter-spacing: -.1px; color: var(--wa-quote-fg); }
.tg-screen.wa .wa-hint b { font-weight: 400; color: var(--wa-link); }

/* стикер и крупные эмодзи: без пузыря, время — в плашке под ними */
.tg-screen.wa .wa-stk { display: block; width: 150px; height: 150px; object-fit: contain; }
.tg-screen.wa .wa-stk-0 { border-radius: 16px; background: color-mix(in srgb, var(--wa-fg) 8%, transparent); }
.tg-screen.wa .meta.pill { position: static; display: inline-flex; height: 22.4px; margin-top: 6px; padding: 0 12px; border-radius: 11.2px; color: var(--wa-meta) !important; background: var(--wa-in);
  -webkit-backdrop-filter: none; backdrop-filter: none; }
.tg-screen.wa .out .meta.pill { background: var(--wa-out); }
.tg-screen.wa .wa-emo { display: flex; flex-direction: column; }
.tg-screen.wa .in .wa-emo { align-items: flex-start; }
.tg-screen.wa .out .wa-emo { align-items: flex-end; }
.tg-screen.wa .wa-emo .txt { font-size: 56px; line-height: 62px; letter-spacing: 2px; padding: 4px 1px 0; }
.tg-screen.wa .wa-emo.e2 .txt { font-size: 46px; line-height: 52px; }
.tg-screen.wa .wa-emo.e3 .txt { font-size: 38px; line-height: 44px; }

/* дата: белая плашка 18.5 pt; «непрочитанные» — полупрозрачная полоса во всю ширину */
.tg-screen.wa .svc { margin: 37px 0 14px; }
.tg-screen.wa .svc:first-child { margin-top: 45px; }   /* первая дата — в 36 pt под полосой шапки */
.tg-screen.wa .msgs > .gap:first-child + .row { margin-top: 23px; }
.tg-screen.wa .svc span { background: var(--wa-chip); color: var(--wa-chip-fg); font-size: 13px; font-weight: 600; line-height: 18.5px; letter-spacing: -.1px;
  padding: 0 10.5px; border-radius: 9px; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.tg-screen.wa .svc.wa-unread { margin: 14.5px -16.5px 14px; height: 29px; display: flex; align-items: center; justify-content: center; background: var(--wa-unread);
  box-shadow: inset 0 .5px 0 rgba(0,0,0,.06), inset 0 -.5px 0 rgba(0,0,0,.06); }
.tg-screen.wa .svc.wa-unread span { background: none; color: var(--wa-unread-fg); font-size: 13.5px; font-weight: 600; line-height: 18px; padding: 0; border-radius: 0; }

/* закреп под шапкой (замер со скринов iPhone, 09.10.2026): квадрат 32×30.5 pt с булавкой, текст 16 pt в одну строку */
.tg-screen.wa .wa-pin { position: absolute; left: 0; right: 0; z-index: 6; height: 53px; display: flex; align-items: center; padding: 0 16px; gap: 12.5px; color: var(--wa-fg); }
.tg-screen.wa .wa-pin-i { flex: none; width: 32px; height: 30.5px; border-radius: 7px; background: rgba(120,120,128,.16); color: #807e81; display: flex; align-items: center; justify-content: center; }
.tg-screen.wa.theme-dark .wa-pin-i { background: #2c2b29; color: #9d9ca0; }
.tg-screen.wa .wa-pin-i svg { display: block; width: 13.5px; height: 18px; }
.tg-screen.wa .wa-pin-t { flex: 1; min-width: 0; font-size: 16px; line-height: 21px; letter-spacing: -.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-screen.wa .wa-mpin { display: block; margin-inline-end: -1px; }
/* системная плашка («Вы закрепили сообщение»): 30.4 pt, текст 13.5 pt, по 14 pt сверху и снизу */
.tg-screen.wa .svc.wa-sys, .tg-screen.wa .svc.wa-sys:first-child { margin: 14px 0 14.4px; }
.tg-screen.wa .svc.wa-sys span { font-size: 13.5px; font-weight: 500; line-height: 30.4px; padding: 0 12.5px; border-radius: 9.5px; letter-spacing: -.1px; }
/* моё голосовое: аватар слева, за ним треугольник и дорожка (у полученного аватар справа) */
.tg-screen.wa:not(.and) .out .wa-vava { left: 11.8px; right: auto; }
.tg-screen.wa:not(.and) .out .wa-vmic { left: auto; right: -7px; }
.tg-screen.wa:not(.and) .out .wa-play { left: 83.2px; }
.tg-screen.wa:not(.and) .out .wa-wave { left: 119px; }
.tg-screen.wa:not(.and) .out .wa-dur { left: 109px; }
.tg-screen.wa:not(.and) .out .vbub:not(.has-hint) .meta { inset-inline-end: 11.5px; }
/* кнопка «переслать» у моих фото и файлов — слева от пузыря */
.tg-screen.wa:not(.and) .out .wa-fbtn { left: auto; right: calc(100% + 9.3px); }
/* файл: пузырь 264 pt; плашка в 3.4 pt от краёв, значок 20×26, имя 16.5/20 до двух строк, «размер • тип» 13 pt */
.tg-screen.wa .bub.wa-file { width: 264px; max-width: 100%; padding: 3.4px 3.4px 23.2px; }
.tg-screen.wa .bub.wa-file.has-cap { padding-bottom: 10.1px; }
.tg-screen.wa .bub.wa-file.has-cap .txt { padding: 5px 8.5px 0; }
.tg-screen.wa .wa-doc { display: flex; align-items: flex-start; gap: 8px; padding: 9.2px 12px 9.5px 13px; border-radius: 15.5px; background: rgba(0,0,0,.055); }
.tg-screen.wa.theme-dark .wa-doc { background: rgba(0,0,0,.2); }
.tg-screen.wa .wa-doc-i { flex: none; display: flex; }
.tg-screen.wa .wa-doc-b { flex: 1; min-width: 0; }
.tg-screen.wa .wa-doc-n { font-size: 16.5px; line-height: 20px; letter-spacing: -.3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.tg-screen.wa .wa-doc-m { margin-top: 2.5px; font-size: 13px; line-height: 16px; letter-spacing: -.1px; color: var(--wa-meta); }
/* геопозиция: карта 285.5 × 159.5 pt, углы 18; булавка — остриём в центр */
.tg-screen.wa .wa-map { position: relative; width: 285.5px; max-width: 100%; height: 159.5px; border-radius: 18px; overflow: hidden; line-height: 0; }
.tg-screen.wa .bub.wa-loc.has-cap .wa-map { width: 279.5px; border-radius: 15px; }
.tg-screen.wa .wa-map img, .tg-screen.wa .wa-map-0 { display: block; width: 100%; height: 100%; object-fit: cover; }
.tg-screen.wa .wa-mappin { position: absolute; left: 50%; top: 50%; margin: -33px 0 0 -8.3px; }
.tg-screen.wa .bub.wa-loc.bare .wa-map::after { content: ""; position: absolute; right: 0; bottom: 0; width: 120px; height: 40px; background: linear-gradient(to top left, rgba(0,0,0,.42), rgba(0,0,0,0) 62%); }   /* тень под временем — на светлой карте белые цифры иначе не видны */
.tg-screen.wa .bub.wa-loc .meta.over { z-index: 1; }
.tg-screen.wa .wa-loc-t { padding: 6px 8.5px 12px; font-size: 16px; line-height: 20px; letter-spacing: -.3px; display: flex; flex-direction: column; }
.tg-screen.wa .wa-loc-t b { font-weight: 600; }
.tg-screen.wa .wa-loc-t span { font-size: 13.5px; line-height: 17px; color: var(--wa-meta); }

/* кнопка «вниз»: кружок 30.4 pt над микрофоном */
.tg-screen.wa .wa-down { position: absolute; right: 9.9px; z-index: 5; width: 30.4px; height: 30.4px; border-radius: 50%; background: var(--wa-field); color: var(--wa-ic);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.14), 0 0 0 .5px rgba(0,0,0,.05); }
.tg-screen.wa .wa-down svg { display: block; margin-top: 1.5px; }

/* поле ввода: ряд 46 pt на фоне цвета шапки, верхний край мягкий */
.tg-screen.wa .wa-inp { position: absolute; left: 0; right: 0; z-index: 5; background: rgba(var(--wa-bar),.97); box-shadow: 0 -6px 8px -2px rgba(var(--wa-bar),.9);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.tg-screen.wa .wa-row { display: flex; align-items: center; height: 46px; padding: 0 9.2px 0 13px; color: var(--wa-ic); }
.tg-screen.wa .wa-i { flex: none; display: flex; align-items: center; justify-content: center; }
.tg-screen.wa .wa-i svg, .tg-screen.wa .wa-send svg { display: block; }
.tg-screen.wa .wa-field { flex: 1; min-width: 0; height: 30px; margin: 0 18px 0 13.5px; border-radius: 15px; background: var(--wa-field); box-shadow: 0 0 0 .5px var(--wa-field-line);
  display: flex; align-items: center; padding: 0 11.5px 0 12px; }
.tg-screen.wa .wa-typed { flex: 1; min-width: 0; font-size: 17px; line-height: 22px; letter-spacing: -.4px; white-space: nowrap; overflow: hidden; display: flex; align-items: center; }
.tg-screen.wa .wa-caret { display: inline-block; width: 2px; height: 20px; margin-left: 1px; border-radius: 1px; background: var(--wa-acc); }
.tg-screen.wa .wa-cam { margin-right: 12.5px; }
.tg-screen.wa .wa-send { flex: none; display: flex; }

/* голосовое без строки про расшифровку — компактное, 66 pt: аватар по центру высоты, дорожка выше, под ней одна строка —
   длительность слева и время справа, до значка микрофона у аватара */
.tg-screen.wa .vbub:not(.has-hint) .wa-play { top: 17px; }
.tg-screen.wa .vbub:not(.has-hint) .wa-wave { top: 11.5px; }
.tg-screen.wa .vbub:not(.has-hint) .wa-vava { top: 11px; }
.tg-screen.wa .vbub:not(.has-hint) .wa-dur { top: 46.8px; }
.tg-screen.wa .in .vbub:not(.has-hint) .meta, .tg-screen.wa .out .vbub:not(.has-hint) .meta { inset-inline-end: 68px; bottom: 5.2px; }
/* у фото и видео без подписи хвоста нет */
.tg-screen.wa .bub.media.bare ~ .wa-tail { display: none; }

/* ================== WhatsApp на Android (Pixel 9) — .tg-screen.wa.and. Размеры — с экрана эмулятора (09.10.2026), в dp ================== */
.tg-screen.wa.and { letter-spacing: 0; }
/* шапка: белая полоса 57.3 dp под строкой состояния; стрелка, аватар 36, имя, справа видео, звонок, меню */
.tg-screen.wa.and .wa-hdr { background: var(--wa-hdr); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 .5px 0 rgba(0,0,0,.06); }
.tg-screen.wa.and .wa-nav { height: 57.3px; padding: 0; }
.tg-screen.wa.and .wa-aback { position: absolute; left: 16.4px; top: 21.6px; display: flex; }
.tg-screen.wa.and .wa-nav > .wa-ava { position: absolute; left: 52.6px; top: 11.8px; margin: 0; }
.tg-screen.wa.and .wa-ava-l { display: flex; align-items: center; justify-content: center; background: var(--wa-ava); color: var(--wa-ava-fg); font-size: 17px; font-weight: 500; line-height: 1; }
.tg-screen.wa.and .wa-ava-l.me { background: #fbd8dc; color: #911435; }
.tg-screen.wa.and.theme-dark .wa-ava-l.me { background: #321622; color: #fa99a4; }
.tg-screen.wa.and .wa-ttl { position: absolute; left: 101.3px; right: 134px; top: 0; height: 59px; margin: 0; }
.tg-screen.wa.and .wa-name { font-size: 17px; font-weight: 400; line-height: 23px; letter-spacing: 0; }
.tg-screen.wa.and .wa-st { font-size: 13px; line-height: 16px; }
.tg-screen.wa.and .wa-ai { position: absolute; top: 0; height: 59px; display: flex; align-items: center; }
.tg-screen.wa.and .wa-ai.v { left: 288.4px; } .tg-screen.wa.and .wa-ai.p { left: 337.8px; } .tg-screen.wa.and .wa-ai.d { left: 387px; }
.tg-screen.wa.and .wa-nav svg { display: block; }

/* лента: пузыри в 16.7 dp от краёв, скругление 13; одна строка — 32.4 dp, каждая следующая +18; подряд — через 3 dp */
.tg-screen.wa.and .msgs { padding: 0 16.7px; }
.tg-screen.wa.and .bub { padding: 6.2px 9.5px 8.2px 10.6px; border-radius: 13px; font-size: 15.9px; line-height: 18px; letter-spacing: 0; box-shadow: var(--wa-shadow); }
.tg-screen.wa.and .txt { line-height: 12.2px; }
.tg-screen.wa.and .txt .wt { line-height: 18px; }
.tg-screen.wa.and .meta, .tg-screen.wa.and .ghost { gap: 1.5px; font-size: 12.4px; line-height: 13px; }
.tg-screen.wa.and .ghost { margin-inline-start: 10px; }
.tg-screen.wa.and .in .meta, .tg-screen.wa.and .out .meta { bottom: 4.6px; inset-inline-end: 9.5px; color: var(--wa-meta); }
.tg-screen.wa.and .out .meta { color: var(--wa-meta-out); }
.tg-screen.wa.and .meta .chk { color: currentColor !important; }
.tg-screen.wa.and .meta .chk.rd { color: var(--wa-read) !important; }
/* хвост — вверху первого пузыря серии: угол со стороны отправителя не скруглён */
.tg-screen.wa.and .wa-tail { bottom: auto; top: 0; }
.tg-screen.wa.and .out .wa-tail { right: -6.8px; left: auto; transform: none; }
.tg-screen.wa.and .in .wa-tail { left: -6.8px; transform: scaleX(-1); }
.tg-screen.wa.and .out.has-tail .bub { border-top-right-radius: 0; }
.tg-screen.wa.and .in.has-tail .bub { border-top-left-radius: 0; }

/* цитата */
.tg-screen.wa.and .wa-q { margin: -2.7px -6px 5px -7.1px; padding: 6px 10px 7px 12px; border-radius: 9px; font-size: 14px; line-height: 17px; }
.tg-screen.wa.and .wa-q .rn { font-size: 14px; line-height: 17px; font-weight: 500; }

/* фото и видео — в пузыре с полем 3.2 dp; кнопка «переслать» — кружок 32 dp сбоку */
.tg-screen.wa.and .bub.media { padding: 3.2px; }
.tg-screen.wa.and .wa-pic { width: 261px; border-radius: 10px; }
.tg-screen.wa.and .wa-pic img { max-height: 261.5px; }
.tg-screen.wa.and .wa-pic-0 { height: 261.5px; }
.tg-screen.wa.and .bub.media.has-cap .wa-pic { width: 261px; border-radius: 10px; }
.tg-screen.wa.and .meta.over, .tg-screen.wa.and .in .meta.over, .tg-screen.wa.and .out .meta.over { bottom: 5px; inset-inline-end: 8px; }
.tg-screen.wa.and .wa-fbtn { width: 32px; height: 32px; }
.tg-screen.wa.and .out .wa-fbtn { left: auto; right: calc(100% + 10px); }
.tg-screen.wa.and .wa-alb { width: 261px; border-radius: 10px; }
.tg-screen.wa.and .bub.media.alb { padding: 3.2px; }

/* голосовое: 317 × 61.3 dp; аватар 47.6 dp — у моих слева, у собеседника справа; точка 12.2, дорожка из точек 2.3 dp */
.tg-screen.wa.and .bub.vbub { width: 317px; height: 61.3px; padding: 0; }
.tg-screen.wa.and .bub.vbub.has-hint { height: auto; padding-bottom: 24px; }
.tg-screen.wa.and .wa-voice { height: 61.3px; }
.tg-screen.wa.and .wa-vava, .tg-screen.wa.and .vbub:not(.has-hint) .wa-vava { top: 6.8px; width: 47.6px; height: 47.6px; }
.tg-screen.wa.and .wa-vava .wa-ava { width: 47.6px !important; height: 47.6px !important; }
.tg-screen.wa.and .out .wa-vava { left: 8.4px; right: auto; }
.tg-screen.wa.and .in .wa-vava { right: 8.4px; left: auto; }
.tg-screen.wa.and .wa-vmic { left: auto; right: -5px; bottom: -3px; color: var(--wa-play); }
.tg-screen.wa.and .in .wa-vmic { right: auto; left: -5px; color: var(--wa-acc); }
.tg-screen.wa.and .wa-play, .tg-screen.wa.and .vbub:not(.has-hint) .wa-play { top: 17.8px; color: var(--wa-play); }
.tg-screen.wa.and .wa-play svg { width: 18.3px; height: 21.3px; }
.tg-screen.wa.and .out .wa-play { left: 78.5px; }
.tg-screen.wa.and .in .wa-play { left: 14px; }
.tg-screen.wa.and .wa-wave, .tg-screen.wa.and .vbub:not(.has-hint) .wa-wave { top: 14.5px; gap: 2.27px; padding-left: 4.5px; }
.tg-screen.wa.and .out .wa-wave { left: 116.6px; }
.tg-screen.wa.and .in .wa-wave { left: 52px; }
.tg-screen.wa.and .wa-wave b { left: -8px; top: 7.9px; width: 12.2px; height: 12.2px; }
.tg-screen.wa.and .wa-wave i { width: 2.3px; border-radius: 1.15px; background: var(--wa-wave); }
.tg-screen.wa.and .in .wa-wave i { background: var(--wa-wave-in); }
.tg-screen.wa.and .wa-dur, .tg-screen.wa.and .vbub:not(.has-hint) .wa-dur { top: 44px; font-size: 12.4px; line-height: 13px; color: var(--wa-meta); }
.tg-screen.wa.and .out .wa-dur { left: 115.4px; color: var(--wa-meta-out); }
.tg-screen.wa.and .in .wa-dur { left: 51px; }
.tg-screen.wa.and .in .vbub:not(.has-hint) .meta, .tg-screen.wa.and .out .vbub:not(.has-hint) .meta { inset-inline-end: 9.5px; bottom: 4.6px; }
.tg-screen.wa.and .in .vbub .meta, .tg-screen.wa.and .in .vbub:not(.has-hint) .meta { inset-inline-end: 64px; }

/* дата — плашка 25.9 dp; «непрочитанные» — такая же плашка по центру */
.tg-screen.wa.and .svc { margin: 10.5px 0 10.7px; }
.tg-screen.wa.and .svc:first-child { margin-top: 10.5px; }
.tg-screen.wa.and .msgs > .gap:first-child + .row { margin-top: 10.5px; }
.tg-screen.wa.and .svc span { font-size: 12.6px; font-weight: 500; line-height: 25.9px; padding: 0 11.5px; border-radius: 8px; box-shadow: var(--wa-shadow); letter-spacing: 0; }
.tg-screen.wa.and .svc.wa-unread { margin: 10.5px 0 10.7px; height: auto; display: flex; justify-content: center; background: none; box-shadow: none; }   /* плашка по центру, как дата */
.tg-screen.wa.and .svc.wa-unread span { background: var(--wa-chip); color: var(--wa-chip-fg); font-size: 12.6px; font-weight: 500; line-height: 25.9px; padding: 0 11.5px; border-radius: 8px; }
.tg-screen.wa.and .meta.pill { height: 20px; border-radius: 10px; padding: 0 8px; }

/* поле ввода: капсула 48.4 dp от 8 dp слева, справа кружок 48 dp; под ними — полоса жестов 24 dp цвета шапки */
.tg-screen.wa.and .wa-inp { left: 0; right: 0; height: 48.4px; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.tg-screen.wa.and .wa-field { position: absolute; left: 8px; right: 65.9px; top: 0; height: 48.4px; margin: 0; border-radius: 24.2px; padding: 0 0 0 14.6px; box-shadow: var(--wa-shadow); color: var(--wa-field-ic); }
.tg-screen.wa.and .wa-typed { margin-left: 12.4px; font-size: 18px; line-height: 24px; letter-spacing: 0; color: var(--wa-fg); }
.tg-screen.wa.and .wa-typed.ph { color: var(--wa-field-ic); }
.tg-screen.wa.and .wa-caret { height: 22px; margin: 0 1px 0 0; }
.tg-screen.wa.and .wa-typed:not(.ph) .wa-caret { margin: 0 0 0 1px; }
.tg-screen.wa.and .wa-i.clip { margin-right: 26px; }
.tg-screen.wa.and .wa-i.cam { margin-right: 12.4px; }
.tg-screen.wa.and .wa-field > .wa-i.clip:last-child { margin-right: 16px; }
.tg-screen.wa.and .wa-send { position: absolute; right: 9.5px; top: -.4px; }
.tg-screen.wa.and .wa-navbar { position: absolute; left: 0; right: 0; bottom: 0; height: 24px; z-index: 5; background: var(--wa-nav); }
.tg-screen.wa.and .wa-down { right: 18px; width: 36px; height: 36px; }