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

/* верх: лента уходит под шапку в затемнение и размытие; кнопки — стеклянные кружки 44 pt */
.tg-screen.ig .ig-hdr { position: absolute; top: 0; left: 0; right: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(to bottom, rgba(1,3,6,.96) 0, rgba(1,3,6,.9) 34%, rgba(6,9,13,.62) 62%, rgba(12,16,20,0) 100%);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 58%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(to bottom, #000 0, #000 58%, rgba(0,0,0,0) 100%); }
.tg-screen.ig .sb { z-index: 6; }
.tg-screen.ig .ig-nav { position: absolute; left: 0; right: 0; z-index: 6; height: 44px; display: flex; align-items: center; padding: 0 12px 0 16px; }
.tg-screen.ig .ig-btn { flex: none; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ig-ink);
  background: rgba(255,255,255,.088); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 .8px 0 rgba(255,255,255,.14), inset 0 0 0 .5px rgba(255,255,255,.05); }
.tg-screen.ig .ig-btn svg { display: block; }
.tg-screen.ig .ig-btn + .ig-btn { margin-left: 12px; }
.tg-screen.ig .ig-btn:first-child svg { margin-left: -2px; }
.tg-screen.ig .ig-ava { flex: none; border-radius: 50%; overflow: hidden; background: var(--ig-ava); }
.tg-screen.ig .ig-ava img, .tg-screen.ig .ig-ava svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.tg-screen.ig .ig-ava svg circle, .tg-screen.ig .ig-ava svg path { fill: #8a909a; }
.tg-screen.ig .ig-nav > .ig-ava { margin-left: 12px; }
/* история: аватар 27 pt в кольце 39 pt — серое, если просмотрена, цветное, если новая; место то же, что у аватара 32 pt */
.tg-screen.ig .ig-ring { flex: none; width: 32px; height: 32px; margin-left: 12px; position: relative; display: flex; align-items: center; justify-content: center; }
.tg-screen.ig .ig-ring::before { content: ""; position: absolute; inset: -3.5px; border-radius: 50%; padding: 1.7px; background: #585c6a;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.tg-screen.ig .ig-ring.new::before { padding: 2px; background: conic-gradient(from 200deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75); }
.tg-screen.ig .ig-ttl { flex: 1; min-width: 0; margin: 0 8px 0 11px; }
.tg-screen.ig .ig-name { display: flex; align-items: center; font-size: 17px; font-weight: 700; line-height: 21px; letter-spacing: -.2px; color: var(--ig-ink); }
.tg-screen.ig .ig-name > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-screen.ig .ig-name .vrf { flex: none; margin-left: 4px; }
.tg-screen.ig .ig-name .vrf path:first-child { fill: #0095f6; }
.tg-screen.ig .ig-chev { flex: none; margin: 1px 0 0 8px; color: var(--ig-ink); }
.tg-screen.ig .ig-st { margin-top: -1px; font-size: 13px; line-height: 17px; letter-spacing: .05px; color: var(--ig-st); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* лента: аватар собеседника 28 pt в 16 pt от края, пузырь — с 56 pt; мои пузыри — в 8 pt от правого края */
.tg-screen.ig .msgs { padding: 0 8px 0 16px; }
.tg-screen.ig .row { align-items: flex-end; }
.tg-screen.ig .bw { filter: none; }
.tg-screen.ig .ig-mava { flex: none; width: 28px; height: 28px; margin-right: 12px; }
.tg-screen.ig .bub { padding: 9.5px 12.3px 9.6px; border-radius: 20px; font-size: 16px; line-height: 20.3px; letter-spacing: -.05px; }
.tg-screen.ig .in .bub { background: var(--ig-in); color: var(--ig-fg); }
.tg-screen.ig .out .bub { background: var(--out-fill, var(--ig-out)); color: #fff; }
/* серия подряд: углы со стороны отправителя срезаны у соседних пузырей */
.tg-screen.ig .out:not(.g-first) .bub { border-top-right-radius: 4.5px; }
.tg-screen.ig .out:not(.g-last) .bub { border-bottom-right-radius: 4.5px; }
.tg-screen.ig .in:not(.g-first) .bub { border-top-left-radius: 4.5px; }
.tg-screen.ig .in:not(.g-last) .bub { border-bottom-left-radius: 4.5px; }
.tg-screen.ig .txt a, .tg-screen.ig .out .txt a { color: inherit; text-decoration: underline; }
.tg-screen.ig .ig-emo { font-size: 50px; line-height: 64px; letter-spacing: 6px; padding: 0 2px; overflow-wrap: anywhere; }

/* ответ: подпись, приглушённый пузырь с цитатой и полоска 3.5 pt со стороны отправителя */
.tg-screen.ig .ig-rl { font-size: 13px; line-height: 16px; letter-spacing: .05px; color: var(--ig-sub); margin-bottom: 11px; }
.tg-screen.ig .out .ig-rl { margin-right: 16.5px; }
.tg-screen.ig .in .ig-rl { margin-left: 16px; }
.tg-screen.ig .ig-qw { display: flex; align-items: stretch; gap: 12.5px; max-width: 100%; margin-bottom: 8.4px; }
.tg-screen.ig .out .ig-qw { flex-direction: row-reverse; }
.tg-screen.ig .ig-qbar { flex: none; width: 3.5px; border-radius: 2px; background: var(--ig-in); }
.tg-screen.ig .ig-q { min-width: 0; padding: 9.5px 12.3px 9.6px; border-radius: 20px; background: var(--ig-quote); color: var(--ig-quote-fg); font-size: 16px; line-height: 20.3px; letter-spacing: -.05px; }
.tg-screen.ig .ig-q.mine { background: var(--ig-quote-mine); color: var(--ig-quote-mine-fg); }
.tg-screen.ig .ig-qt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }

/* реакция: плашка у левого края пузыря, наполовину под ним, с обводкой цвета фона */
.tg-screen.ig .bw.has-react { margin-bottom: 17px; }
.tg-screen.ig .ig-react { position: absolute; left: 5px; bottom: -17px; height: 24px; min-width: 29px; padding: 0 7px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1; background: var(--ig-in); box-shadow: 0 0 0 2px var(--ig-bg); }

/* фото, видео, стикер */
.tg-screen.ig .ig-pic { position: relative; width: 160px; max-width: 100%; border-radius: 20px; overflow: hidden; line-height: 0; }
.tg-screen.ig .ig-pic img { display: block; width: 100%; max-height: 300px; object-fit: cover; }
.tg-screen.ig .ig-pic-0 { height: 286px; background: var(--ig-in); }
.tg-screen.ig .ig-vplay { position: absolute; left: 50%; top: 50%; margin: -13px 0 0 -11px; color: #fff; filter: drop-shadow(0 1px 6px rgba(0,0,0,.35)); }
.tg-screen.ig .ig-vplay svg { width: 25px; height: 26px; }
.tg-screen.ig .ig-stk { display: block; width: 140px; height: 140px; object-fit: contain; }
.tg-screen.ig .ig-stk-0 { border-radius: 18px; background: var(--ig-in); }

/* голосовое (замер: пузырь 98 pt, ▶ 17×19 pt в 15 pt от края, сетка дорожки с 48 pt, шаг 6.06 pt; ниже — «текстовая версия») */
.tg-screen.ig .bub.vbub { box-sizing: border-box; padding: 11px 15.6px 16px 14.8px; border-radius: 22px; }
.tg-screen.ig .ig-v { display: flex; align-items: center; height: 42px; }
.tg-screen.ig .ig-play { flex: none; display: flex; width: 17.3px; }
.tg-screen.ig .ig-play svg { width: 17.3px; height: 18.6px; }
.tg-screen.ig .ig-wave { flex: 1; min-width: 0; display: flex; align-items: center; gap: 3.96px; height: 42px; margin-left: 16px; overflow: hidden; }
.tg-screen.ig .ig-wave i { flex: none; display: block; width: 2.1px; height: 2.1px; border-radius: 1.05px; background: #fff; }
.tg-screen.ig .ig-wave i.b { width: 2.6px; margin: 0 -.25px; border-radius: 1.3px; }
.tg-screen.ig .ig-dur { flex: none; width: 40.5px; text-align: right; font-size: 13px; line-height: 16px; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.92); }
.tg-screen.ig .ig-tr { margin: 11px 0 0 2.5px; font-size: 14.2px; line-height: 18px; letter-spacing: .05px; color: rgba(255,255,255,.8); }
.tg-screen.ig .in .ig-wave i, .tg-screen.ig .in .ig-dur, .tg-screen.ig .in .ig-tr { color: var(--ig-fg); }

/* карточка профиля в начале чата (замер: аватар 92 pt, имя 20/700, строки 15 pt серым, кнопка 181×31 pt) */
.tg-screen.ig .msgs.has-intro { display: flex; flex-direction: column; }
.tg-screen.ig .ig-intro { margin: 12.5px -8px auto -16px; padding-bottom: 9px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.tg-screen.ig .ig-intro .ig-ava { background: #eceff1; }
.tg-screen.ig .ig-in-name { display: flex; align-items: center; gap: 5px; margin: 10px 0 3px; font-size: 20px; font-weight: 700; line-height: 24px; letter-spacing: -.25px; color: var(--ig-ink); }
.tg-screen.ig .ig-in-name .vrf path:first-child { fill: #0095f6; }
.tg-screen.ig .ig-in-sub { max-width: 360px; font-size: 15px; line-height: 22px; letter-spacing: .05px; color: var(--ig-sub); }
.tg-screen.ig .ig-in-btn { margin-top: 20px; height: 31.2px; padding: 0 16.5px; border-radius: 8px; background: var(--ig-in); display: flex; align-items: center; font-size: 14.5px; font-weight: 600; letter-spacing: -.05px; color: var(--ig-ink); }

/* время группы и «Просмотрено» */
.tg-screen.ig .svc { margin: 22px 0 23px; }
.tg-screen.ig .svc span { background: none; color: var(--ig-sub); font-size: 12px; font-weight: 500; line-height: 16px; letter-spacing: .25px; text-transform: uppercase; padding: 0; border-radius: 0;
  box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.tg-screen.ig .ig-seen { margin: 5px 8px 0 0; text-align: right; font-size: 12px; line-height: 16px; color: var(--ig-sub); }

/* кнопка «вниз»: белый круг 44 pt */
.tg-screen.ig .ig-down { position: absolute; right: 16px; z-index: 5; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: #0c1014;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,.35); }

/* поле ввода: стеклянная капсула 44 pt в 8 pt от краёв, лента видна за ней */
.tg-screen.ig .ig-field { position: absolute; left: 8px; right: 8px; z-index: 5; height: 44px; border-radius: 22px; background: var(--ig-field); display: flex; align-items: center; padding: 0 19.5px 0 5px;
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); box-shadow: inset 0 .5px 0 rgba(255,255,255,.06); }
.tg-screen.ig .ig-cam { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--ig-link); display: flex; align-items: center; justify-content: center; }
.tg-screen.ig .ig-typed { flex: 1; min-width: 0; display: flex; align-items: center; margin-left: 9.5px; font-size: 13.7px; line-height: 20px; letter-spacing: .1px; white-space: nowrap; overflow: hidden; }   /* подсказка мельче текста пузырей: «Напишите сообщение…» = 152 pt */
.tg-screen.ig .ig-typed.ph { color: var(--ig-ph); }
.tg-screen.ig .ig-caret { flex: none; display: inline-block; width: 2px; height: 21px; margin-right: 1px; border-radius: 1px; background: #a23cf0; }
.tg-screen.ig .ig-typed:not(.ph) .ig-caret { order: 2; margin: 0 0 0 1px; }
.tg-screen.ig .ig-i { flex: none; display: flex; color: var(--ig-ink); margin-left: 15.5px; }
.tg-screen.ig .ig-i svg, .tg-screen.ig .ig-send svg, .tg-screen.ig .ig-cam svg { display: block; }
.tg-screen.ig .ig-send { flex: none; width: 44px; height: 32px; margin: 0 -13.5px 0 8px; border-radius: 16px; background: linear-gradient(135deg, #a832e0, #5a4bfb); display: flex; align-items: center; justify-content: center; }

/* светлая тема: те же размеры, свои цвета — белый фон, серо-голубые пузыри собеседника, белые кружки шапки с тонкой кромкой */
.tg-screen.ig.theme-light .ig-hdr { background: linear-gradient(to bottom, rgba(255,255,255,.97) 0, rgba(255,255,255,.92) 34%, rgba(255,255,255,.62) 62%, rgba(255,255,255,0) 100%); }
.tg-screen.ig.theme-light .ig-btn { background: rgba(255,255,255,.82); box-shadow: inset 0 0 0 .5px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.06); }
.tg-screen.ig.theme-light .ig-ring::before { background: #c9ccd2; }
.tg-screen.ig.theme-light .ig-ring.new::before { background: conic-gradient(from 200deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75); }
.tg-screen.ig.theme-light .ig-qbar { background: #e6e8ec; }
.tg-screen.ig.theme-light .ig-down { box-shadow: 0 2px 10px rgba(0,0,0,.16), 0 0 0 .5px rgba(0,0,0,.06); }
.tg-screen.ig.theme-light .ig-field { box-shadow: none; }
.tg-screen.ig.theme-light .ig-intro .ig-ava { background: #eceff1; }
.tg-screen.ig.theme-light .in .ig-wave i { background: #000; }
.tg-screen.ig.theme-light .in .ig-dur { color: #000; }
.tg-screen.ig.theme-light .in .ig-tr { color: rgba(0,0,0,.85); }

/* ================== Instagram на Android (Pixel 9) — .tg-screen.ig.and. Размеры — с экрана эмулятора (09.10.2026), в dp ================== */
.tg-screen.ig.and { letter-spacing: 0; }
/* шапка: без затемнения и стеклянных кружков — стрелка, аватар 28, имя полужирным и ник, справа три значка */
.tg-screen.ig.and .ig-hdr { background: var(--ig-bg); -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-mask-image: none; mask-image: none; }
.tg-screen.ig.and .ig-nav { height: 59px; padding: 0; display: block; color: var(--ig-ink); }
.tg-screen.ig.and .ig-aback { position: absolute; left: 17.1px; top: 22.8px; display: flex; }
.tg-screen.ig.and .ig-nav > .ig-ava { position: absolute; left: 65.9px; top: 15.6px; margin: 0; }
.tg-screen.ig.and .ig-nav > .ig-ring { position: absolute; left: 65.9px; top: 15.6px; margin: 0; width: 28.2px; height: 28.2px; }
.tg-screen.ig.and .ig-ttl { position: absolute; left: 110.9px; right: 152px; top: 14.5px; margin: 0; }
.tg-screen.ig.and .ig-ttl.one { top: 21px; }
.tg-screen.ig.and .ig-name { font-size: 13.8px; font-weight: 700; line-height: 18px; letter-spacing: 0; }
.tg-screen.ig.and .ig-st { margin-top: 1px; font-size: 12px; line-height: 16px; letter-spacing: 0; }
.tg-screen.ig.and .ig-ai { position: absolute; top: 0; height: 59.4px; width: 24px; display: flex; align-items: center; justify-content: center; }
.tg-screen.ig.and .ig-ai.f { left: 266.7px; opacity: .3; } .tg-screen.ig.and .ig-ai.p { left: 316.7px; } .tg-screen.ig.and .ig-ai.v { left: 367.2px; }
.tg-screen.ig.and.theme-dark .ig-ai.f { opacity: 1; }
.tg-screen.ig.and .ig-nav svg { display: block; }

/* лента: аватар 28.2 dp в 17.9 dp от края, пузырь — с 56 dp; мои — в 8 dp от правого края; пузырь 38.9 dp, подряд — через 1.5 dp */
.tg-screen.ig.and .msgs { padding: 0 8px 0 17.9px; }
.tg-screen.ig.and .ig-mava { width: 28.2px; height: 28.2px; margin-right: 9.9px; }
.tg-screen.ig.and .bub { padding: 9.6px 13.7px 9.3px; font-size: 16.6px; line-height: 20px; letter-spacing: 0; }
.tg-screen.ig.and .out .bub { background: var(--ig-out); }
.tg-screen.ig.and .ig-rl { font-size: 12.4px; line-height: 15px; margin-bottom: 8.8px; letter-spacing: 0; }
.tg-screen.ig.and .in .ig-rl { margin-left: 16.8px; }
.tg-screen.ig.and .out .ig-rl { margin-right: 16.7px; }
.tg-screen.ig.and .ig-qw { gap: 11.8px; margin-bottom: 8px; }
.tg-screen.ig.and .ig-qbar { width: 4.2px; background: var(--ig-quote); }
.tg-screen.ig.and .ig-q { padding: 9px 10px 8.7px; font-size: 16.6px; line-height: 20px; letter-spacing: 0; }
.tg-screen.ig.and .svc span { letter-spacing: .1px; }
/* голосовое: 280 × 95 dp; ▶ сиреневый, дорожка и подписи — цветом текста */
.tg-screen.ig.and .bub.vbub { width: 280px !important; padding: 9px 18.7px 14px 18.3px; border-radius: 22px; }
.tg-screen.ig.and .ig-v { height: 44px; }
.tg-screen.ig.and .ig-play { color: #b512d6; width: 13px; }
.tg-screen.ig.and .ig-play svg { width: 13px; height: 15.6px; }
.tg-screen.ig.and .ig-wave { margin-left: 12px; gap: 3.5px; }
.tg-screen.ig.and .in .ig-wave i { background: var(--ig-fg); }
.tg-screen.ig.and .in .ig-dur, .tg-screen.ig.and .in .ig-tr { color: var(--ig-fg); }
.tg-screen.ig.and .ig-dur { font-size: 12.4px; }
.tg-screen.ig.and .ig-tr { margin: 9px 0 0; font-size: 13.6px; line-height: 17px; letter-spacing: 0; }
.tg-screen.ig.and .ig-seen { font-size: 12.4px; }

/* поле ввода: капсула 49.9 dp в 8 dp от краёв, камера 38.1 dp, значки 24 dp через 16 dp */
.tg-screen.ig.and .ig-field { height: 49.9px; border-radius: 25px; padding: 0 15px 0 6.1px; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.tg-screen.ig.and .ig-cam { width: 38.1px; height: 38.1px; background: #4a5df9; }
.tg-screen.ig.and .ig-cam svg { width: 22px; height: 22px; }
.tg-screen.ig.and .ig-typed { margin-left: 9.1px; font-size: 16.4px; line-height: 22px; letter-spacing: 0; }
.tg-screen.ig.and .ig-i { margin-left: 16px; }
.tg-screen.ig.and .ig-caret { width: 1.2px; height: 22px; background: var(--ig-fg); border-radius: 0; }
.tg-screen.ig.and .ig-send { margin-right: -9px; }