/* Экран Telegram iOS. Все размеры в pt (CSS px), экспорт масштабирует через zoom. */
/* арабские буквы — системным SF Arabic, как на iPhone: в невидимом окне экспорта Chromium подставлял другой шрифт (мельче на ~15%).
   Файл берётся с самого мака (не вшит); на iPhone и Windows его нет — там остаётся системный шрифт */
@font-face { font-family: "TGArabic"; src: url("file:///System/Library/Fonts/SFArabic.ttf"); font-weight: 1 1000;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF; }
.tg-screen {
  position: relative; overflow: hidden; background: #000; color: var(--fg);
  /* экран — граница для размытия: стекло берёт пиксели только с экрана, а не тёмную рамку вокруг телефона
     (иначе в скруглённых углах превью появлялись тёмные пятна) */
  filter: brightness(1);
  font-family: "TGArabic", -apple-system, "SF Pro Text", "SF Pro", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; user-select: none; cursor: default;
}
.tg-screen * { box-sizing: border-box; }
.tg-screen img { max-width: none; }

/* фон */
.tg-screen .wall { position: absolute; inset: 0; overflow: hidden; }
.tg-screen .wall-bg, .tg-screen .wall-pat, .tg-screen .wall-dim { position: absolute; inset: 0; }
.tg-screen .wall-pat.tgp { mix-blend-mode: soft-light; }      /* узор поверх градиента — как в Telegram */
.tg-screen .wall-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* лента сообщений */
.tg-screen .msgs { position: absolute; left: 0; right: 0; padding: 0 10px; }   /* край пузыря в 10pt от экрана — замер TG */
.tg-screen .row { display: flex; position: relative; }
.tg-screen .row.out { justify-content: flex-end; }
.tg-screen .row.in { justify-content: flex-start; }
.tg-screen .col { display: inline-flex; flex-direction: column; min-width: 0; }
.tg-screen .out .col { align-items: flex-end; }
.tg-screen .in .col { align-items: flex-start; }
.tg-screen .bw { position: relative; filter: var(--bub-shadow); max-width: 100%; }

.tg-screen .bub {
  position: relative; padding: 5px 11px 5.67px; font-size: 17px; line-height: 22px; letter-spacing: -.02px;   /* ширина строк = Telegram (замер нашей сборки TG: было на 3.4% уже) */
  max-width: 100%; overflow-wrap: anywhere;
}
.tg-screen .in .bub { background: var(--in-bg); color: var(--in-fg); }
.tg-screen .out .bub { background: var(--out-fill, var(--out-bg)); color: var(--out-fg); }
.tg-screen .tail { position: absolute; bottom: 0; display: block; }
.tg-screen .in .tail { color: var(--in-bg); left: -5.8px; transform: scaleX(-1); }
.tg-screen .out .tail { color: var(--out-bg); right: -5.8px; }
/* арабский и другие письма справа налево: только текст пузыря идёт справа налево и прижат вправо,
   время и сам пузырь на обычных местах — как в Telegram (интерфейс он не зеркалит) */
.tg-screen .txt.rtl-t { text-align: right; }

.tg-screen .txt { white-space: pre-wrap; }
.tg-screen .txt b { font-weight: 600; }
.tg-screen .in .lnk { color: var(--in-link); }
.tg-screen .out .lnk { color: var(--out-link); }

.tg-screen .meta, .tg-screen .ghost {
  display: inline-flex; align-items: center; gap: 3px; font-size: 11px; line-height: 14px; letter-spacing: 0; white-space: nowrap;
}   /* время — 11pt, как в Telegram (ChatMessageDateAndStatusNode: base 17 × 11/17) */
.tg-screen .ghost { visibility: hidden; margin-inline-start: 1.5px; vertical-align: -1px; }   /* зазор текст→время 6.7pt, как в TG (с пробелом перед ним) */
.tg-screen .meta { position: absolute; bottom: 4px; inset-inline-end: 10px; }
.tg-screen .out .meta { inset-inline-end: 7px; }
.tg-screen .in .meta { color: var(--in-meta); }
.tg-screen .out .meta { color: var(--out-meta); }
.tg-screen .meta .ed, .tg-screen .ghost .ed { margin-inline-end: 1px; }
.tg-screen .chk { display: block; flex: none; margin-inline-start: -.5px; }
.tg-screen .pin-m { display: block; flex: none; margin-inline-end: 0; }
.tg-screen .out .meta:not(.pill) .pin-m { color: var(--out-check, inherit); }
.tg-screen .st .typ { display: inline-block; vertical-align: 1px; margin-inline-end: 4px; }
.tg-screen .out .lnk { text-decoration: var(--out-lnk-deco, none); text-underline-offset: 2px; text-decoration-skip-ink: none; }
.tg-screen .in .lnk { text-decoration: var(--in-lnk-deco, none); text-underline-offset: 2px; text-decoration-skip-ink: none; }
.tg-screen .out .meta:not(.pill):not(.over) .chk { color: var(--out-check, inherit); }   /* в «Классической» галочки ярче времени */

/* ответ-цитата */
.tg-screen .reply {
  position: relative; margin: 5px 0 5.3px; padding: 2.2px 8px 3.8px 10px; border-radius: 6px;   /* замер TG: над цитатой 10pt, высота 40, строки 17 */
  font-size: 14px; line-height: 17px; letter-spacing: -.1px; overflow: hidden;   /* наименьшей ширины нет: пузырь сжимается до своей строки или строки цитаты (tighten) */
}
.tg-screen .bub:has(> .reply) { padding-bottom: 7px; }   /* у пузыря с цитатой низ на 1.3pt больше — как в TG */
.tg-screen .reply::before { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 3px; background: currentColor; }
.tg-screen[dir="rtl"] .reply { padding: 2.2px 10px 3.8px 8px; }
.tg-screen .in .reply { color: var(--in-acc); background: color-mix(in srgb, var(--in-acc) 12%, transparent); }
.tg-screen .out .reply { color: var(--out-acc); background: color-mix(in srgb, var(--out-acc) 14%, transparent); }
.tg-screen .reply .rn { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-screen .reply .rt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.tg-screen .in .reply .rt { color: var(--in-fg); }
.tg-screen .out .reply .rt { color: var(--out-fg); }
.tg-screen .bub.media .reply { margin: 4px 5px 4px; }

/* фото */
.tg-screen .bub.media { padding: 2px; }
.tg-screen .photo { position: relative; }
.tg-screen .photo img, .tg-screen .photo .ph-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tg-screen .photo .ph-img { background: linear-gradient(135deg, #9fb7ca, #d3dde6); }
.tg-screen .meta.over { color: #fff !important; background: rgba(0, 0, 0, .38); padding: 0 6px; height: 19px; border-radius: 10px; bottom: 7px; inset-inline-end: 7px; }
.tg-screen .txt.cap { position: relative; padding: 5px 9px 6px; }
.tg-screen .txt.cap .meta { bottom: 5px; inset-inline-end: 9px; }

/* голосовое */
/* как в TG (ChatMessageInteractiveFileNode): кнопка ▶ в 11pt от верха и левого края пузыря, волна x+54, низ волны 33pt, длительность 38pt */
.tg-screen .vbub { padding: 11px 12px 8px 11px; }
.tg-screen[dir="rtl"] .vbub { padding: 11px 11px 8px 12px; }
.tg-screen .voice { display: flex; align-items: flex-start; gap: 10px; }
.tg-screen .play { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; }
.tg-screen .play svg { margin-inline-start: 3px; }
/* волна: 18pt на 4pt ниже верха кнопки ▶, длительность (11pt) — на 25pt ниже (scrubbingFrame y 1, descriptionFrame y 22, ▶ y −3) */
.tg-screen .vr { display: flex; flex-direction: column; gap: 3px; padding-top: 4px; }
.tg-screen .wave { display: flex; align-items: flex-end; gap: 2px; height: 18px; }
.tg-screen .wave i { display: block; flex: none; width: 2px; border-radius: 1px; background: currentColor; }
.tg-screen .vd { display: flex; align-items: center; gap: 4px; margin-inline-start: -1px; font-size: 11px; line-height: 13px; min-height: 13px; }
.tg-screen .in .vd { color: var(--in-meta); }
.tg-screen .out .vd { color: var(--out-meta); }
.tg-screen .vd .dot { width: 5px; height: 5px; border-radius: 50%; }
/* время — всегда отдельной строкой под длительностью (в TG статус голосового = trailingContent шириной 1000,
   на одной строке с длительностью не встаёт): пузырь 70pt вместо 60 */
.tg-screen .vbub:not(.has-tr) { padding-bottom: 15px; }
.tg-screen .vbub:not(.has-tr) .meta { bottom: 3px; }
.tg-screen .in .vbub:not(.has-tr) .meta { inset-inline-end: 8px; }

/* большой эмодзи и стикер */
.tg-screen .free-b { display: flex; flex-direction: column; align-items: flex-end; }
.tg-screen .bigemo { line-height: 1; }
.tg-screen .free-b .bigemo + .meta.pill { margin-top: -11px; }   /* как в Telegram: плашка времени заходит на низ эмодзи */
.tg-screen .bigemo.n1 { font-size: 118px; margin-inline-start: 4px; padding-top: 11.3px; }   /* по замеру в Telegram: ≈98pt по видимой части, сверху 17pt до пузыря выше */
.tg-screen .free-b .bigemo.n1 + .meta.pill { margin-top: -20px; }   /* плашка налезает на низ эмодзи на 7pt — замер нашей сборки TG */
.tg-screen .bigemo.n2 { font-size: 79px; margin-inline-start: 3px; }
.tg-screen .bigemo.n3 { font-size: 64px; margin-inline-start: 2px; }
.tg-screen .stk-img { display: block; width: 184px; height: 184px; object-fit: contain; }   /* стикер 184pt, как в Telegram (ChatMessageStickerItemNode) */
.tg-screen .in .free-b .stk-img { margin-inline-start: 9px; }
.tg-screen .free-b .stk-img + .meta.pill { margin-top: -14px; margin-inline-end: -4px; position: relative; }
.tg-screen .stk-empty { background: rgba(0, 0, 0, .1); border-radius: 18px; }
.tg-screen .meta.pill {
  position: static; margin-top: 2px; color: var(--svc-fg, #fff) !important; background: var(--svc-bg); padding: 0 7px; height: 20px; border-radius: 10px;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}

/* плашка даты */
.tg-screen .svc { display: flex; justify-content: center; margin: 9px 0 8px; }
.tg-screen .svc span {
  background: var(--svc-bg); color: var(--svc-fg); font-size: 14px; font-weight: 500; line-height: 18px; letter-spacing: -.15px;
  padding: 3px 9px; border-radius: 12px; -webkit-backdrop-filter: blur(12px) saturate(170%); backdrop-filter: blur(12px) saturate(170%);
}   /* как в Telegram: под плашкой фон с насыщенностью ×1.7 */

/* инлайн-кнопки */
.tg-screen .kb { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; align-self: stretch; }
.tg-screen .kbr { display: flex; gap: 4px; }
.tg-screen .kbb {
  flex: 1; min-width: 0; height: 38px; display: flex; align-items: center; justify-content: center; padding: 0 10px; border-radius: 9px;
  background: var(--svc-bg); color: #fff; font-size: 15px; font-weight: 600; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}

/* шапка */
.tg-screen .hdr {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5; background: var(--hdr-bg);
  -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
  box-shadow: 0 .5px 0 var(--hdr-line);
}
.tg-screen .sb { position: absolute; top: 0; left: 0; right: 0; }
.tg-screen .sb-time { position: absolute; text-align: center; font-size: 17px; font-weight: 600; line-height: 22px; letter-spacing: -.35px; }
.tg-screen .sb-icons { position: absolute; display: flex; align-items: center; justify-content: center; gap: 6px; height: 13px; direction: ltr; }
.tg-screen .sb-icons svg { display: block; }
.tg-screen .sb-i { position: absolute; line-height: 0; }
/* двоеточие часов в iOS 26/27 — по центру цифр, а не на линии строчных */
.tg-screen .sb-col { position: relative; top: -1.5px; }
.tg-screen .sb-i svg { display: block; }
.tg-screen .nav { position: absolute; left: 0; right: 0; height: 44px; }
.tg-screen .back {
  position: absolute; inset-inline-start: 8px; top: 0; height: 44px; display: flex; align-items: center; gap: 6px;
  color: var(--acc); font-size: 17px; letter-spacing: -.4px;
}
.tg-screen .back svg { display: block; flex: none; }
.tg-screen[dir="rtl"] .back svg { transform: scaleX(-1); }
.tg-screen .badge {
  display: flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px;
  background: var(--acc); color: #fff; font-size: 15px; font-weight: 500; letter-spacing: -.2px;
}
.tg-screen .ttl {
  position: absolute; left: 96px; right: 96px; top: 0; height: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.tg-screen .nm {
  display: flex; align-items: center; gap: 4px; max-width: 100%;
  font-size: 17px; font-weight: 600; line-height: 21px; letter-spacing: -.4px; white-space: nowrap;
}
.tg-screen .nm .vrf, .tg-screen .nm .mut { flex: none; }
.tg-screen .nm .emo-st { flex: none; margin-left: 0; font-size: 16px; line-height: 1; display: inline-block; vertical-align: -2px; }
.tg-screen .nm .emo-st.star { vertical-align: -3px; margin-left: 1px; }
.tg-screen .st { max-width: 100%; font-size: 13px; line-height: 16px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.05px; }
.tg-screen .st.acc { color: var(--acc); }
.tg-screen .nav-ava { position: absolute; inset-inline-end: 8px; top: 3.5px; }
.tg-screen .ava { border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; letter-spacing: 0; }
.tg-screen .ava img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* поле ввода */
.tg-screen .inp {
  position: absolute; left: 0; right: 0; bottom: 0; height: 84px; z-index: 5; background: var(--inp-bg);
  -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
  box-shadow: 0 -.5px 0 var(--hdr-line);
}
.tg-screen .inp.bare { height: 34px; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.tg-screen .inp-row { display: flex; align-items: center; height: 50px; padding: 0 5px; gap: 4px; }
.tg-screen .ic { width: 38px; height: 34px; display: flex; align-items: center; justify-content: center; color: var(--icon); flex: none; }
.tg-screen .ic svg { display: block; }
.tg-screen .field {
  flex: 1; height: 34px; border-radius: 17px; background: var(--field-bg); box-shadow: inset 0 0 0 .5px var(--field-bd);
  display: flex; align-items: center; padding-inline: 12px 5px;
}
.tg-screen .ph { flex: 1; color: var(--ph); font-size: 17px; letter-spacing: -.4px; white-space: nowrap; overflow: hidden; }
.tg-screen .ic-in { color: var(--icon); display: flex; }
.tg-screen .home { position: absolute; bottom: 8px; left: 50%; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: var(--home); }

/* пересланное */
/* по замеру нашей сборки TG: строки плотнее, имя обычным начертанием, до текста ближе */
.tg-screen .fwd { font-size: 15px; line-height: 18.1px; letter-spacing: -.2px; margin: -.6px 0 .6px; }
.tg-screen .in .fwd { color: var(--in-acc); }
.tg-screen .out .fwd { color: var(--out-acc); }
.tg-screen .fwd-n { display: flex; align-items: center; gap: 5px; font-weight: 400; }
.tg-screen .mini-ava { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-weight: 600; flex: none; }

/* реакции */
.tg-screen .reacts { display: flex; align-items: center; margin: 5px 0 -1px; }
.tg-screen .reacts .ghost { margin-inline-start: 12px; }
.tg-screen .rpill { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding-inline: 8px 3px; border-radius: 15px; flex: none; }
.tg-screen .in .rpill { background: var(--react-in0, color-mix(in srgb, var(--in-acc) 15%, transparent)); }
.tg-screen .in .rpill.mine { background: var(--react-in, var(--in-acc)); }
.tg-screen .out .rpill { background: var(--react-out0, color-mix(in srgb, var(--out-acc) 18%, transparent)); }
.tg-screen .out .rpill.mine { background: var(--react-out, var(--out-acc)); }
.tg-screen .remo { font-size: 20px; line-height: 1; }

/* ---------- стиль iOS 26 «Liquid Glass» ---------- */
.tg-screen.theme-light {
  --glass-bg: rgba(255,255,255,.46); --glass-fg: #111113; --glass-sub: #6e6e73; --glass-ph: rgba(0,0,0,.37); --glass-ic: rgba(0,0,0,.3); --glass-sat: 100%; --glass-br: 1.02;
  --glass-sh: inset 0 1px .5px rgba(255,255,255,.95), inset 0 -.5px .5px rgba(255,255,255,.5), inset 0 0 0 .5px rgba(255,255,255,.5), 0 8px 24px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.08);
  --cnt-bg: #000; --cnt-fg: #fff;
  --edge-tint: rgba(255,255,255,.22);   /* полоса под шапкой только подсвечивает, цвет обоев виден — как в Telegram */
}
.tg-screen.theme-dark {
  --glass-bg: rgba(255,255,255,.15); --glass-fg: #fff; --glass-sub: #98989e; --glass-ph: #8d8d93; --glass-sat: 140%; --glass-br: 1;
  --glass-sh: inset 0 1px .5px rgba(255,255,255,.22), inset 0 0 0 .5px rgba(255,255,255,.12), 0 8px 24px rgba(0,0,0,.35);
  --cnt-bg: #fff; --cnt-fg: #111113;
  --edge-tint: rgba(0,0,0,.4);
}
.tg-screen .glass {
  background: var(--glass-bg); box-shadow: var(--glass-sh);
  -webkit-backdrop-filter: blur(9px) saturate(var(--glass-sat, 185%)) brightness(var(--glass-br)); backdrop-filter: blur(9px) saturate(var(--glass-sat, 185%)) brightness(var(--glass-br));
}
.tg-screen .edge { position: absolute; left: 0; right: 0; z-index: 4; pointer-events: none; overflow: hidden; }   /* копия обоев с маской — см. edges() */
.tg-screen .edge.top { top: 0; }
.tg-screen .edge.eblur { -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); }   /* лёгкое размытие под верхним краем, как у Telegram */
.tg-screen .edge-w { position: absolute; left: 0; right: 0; }
.tg-screen .g-nav { position: absolute; left: 16px; right: 16px; height: 44px; z-index: 6; display: flex; align-items: center; justify-content: space-between; }
.tg-screen .g-back { height: 44px; min-width: 44px; border-radius: 22px; display: flex; align-items: center; justify-content: center; gap: 5px; color: var(--glass-fg); }
.tg-screen .g-back.wide { padding: 0 13px 0 12px; gap: 6px; }
.tg-screen .g-back svg { display: block; }
.tg-screen[dir="rtl"] .g-back svg { transform: scaleX(-1); }
.tg-screen .g-cnt {
  display: flex; align-items: center; justify-content: center; height: 26px; min-width: 26px; padding: 0 8px; border-radius: 13px;
  background: var(--cnt-bg); color: var(--cnt-fg); font-size: 17px; font-weight: 500; letter-spacing: -.3px;
}
.tg-screen .g-ttl {
  position: absolute; left: 50%; transform: translateX(-50%); height: 42px; border-radius: 21px; padding: 0 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.tg-screen .g-ttl .nm { color: var(--glass-fg); font-size: 17px; line-height: 20px; }
.tg-screen .g-ttl .st { color: var(--glass-sub); font-size: 13px; line-height: 16px; }
.tg-screen .g-ttl .st.acc { color: var(--acc); }
.tg-screen .g-ava { width: 44px; height: 44px; border-radius: 50%; padding: 3px; }
.tg-screen .pin { position: absolute; z-index: 6; display: flex; align-items: center; gap: 10px; }
.tg-screen .g-pin { left: 16px; right: 16px; height: 48px; border-radius: 24px; padding: 0 14px 0 16px; }
.tg-screen .c-pin {
  left: 0; right: 0; height: 48px; padding: 0 12px 0 14px; z-index: 5; background: var(--hdr-bg); box-shadow: 0 .5px 0 var(--hdr-line);
  -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
}
.tg-screen .pin-bar { width: 2.5px; height: 32px; border-radius: 2px; background: var(--acc); flex: none; }
.tg-screen .g-pin .pin-bar { background: var(--glass-fg); }
.tg-screen .pin-txt { flex: 1; min-width: 0; font-size: 15px; line-height: 19px; letter-spacing: -.25px; }
.tg-screen .pin-t { font-weight: 600; color: var(--acc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-screen .g-pin .pin-t { color: var(--glass-fg); }
.tg-screen .pin-s { color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-screen .g-pin .pin-s { color: var(--glass-fg); }
.tg-screen .pin-x { display: flex; flex: none; color: var(--sub); }
.tg-screen .g-pin .pin-x { color: var(--glass-fg); opacity: .8; }
.tg-screen .g-inp { position: absolute; left: 26px; right: 26px; bottom: 27px; height: 40px; z-index: 6; display: flex; align-items: center; gap: 7px; }
.tg-screen .g-btn { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--glass-fg); flex: none; }
.tg-screen .g-btn svg { display: block; width: 25px; height: 25px; }
.tg-screen .g-btn svg.ic-clip { width: 30px; height: 30px; }   /* значок Telegram — 30 pt, линии почти до краёв */
/* значки как в Telegram (замер): скрепка 20×23pt, микрофон 18×24pt */
.tg-screen .g-inp > .g-btn:first-child svg { width: 34px; height: 34px; }
.tg-screen .g-inp > .g-btn:last-child:not(.g-send) svg { width: 30px; height: 30px; }
.tg-screen .g-field { flex: 1; min-width: 0; height: 40px; border-radius: 20px; display: flex; align-items: center; padding-inline: 12px 9px; }
.tg-screen .g-field .ph { color: var(--glass-ph); }
.tg-screen .g-field .ic-in { color: var(--glass-ic, var(--glass-ph)); display: flex; }
.tg-screen > .home { z-index: 7; }
.tg-screen > .sb { z-index: 6; }

/* ---------- Windows: Inter вместо SF Pro ----------
   Интервалы подобраны замером: Inter на 5–8% шире SF на 15–17px, на 12–14px почти равен. */
.tg-screen.f-inter { font-family: "InterTG", "Segoe UI", Roboto, Arial, sans-serif, "Segoe UI Emoji", "Apple Color Emoji"; font-feature-settings: "calt" 1; }
.tg-screen.f-inter .bub, .tg-screen.f-inter .ph, .tg-screen.f-inter .back { letter-spacing: -.6px; }
.tg-screen.f-inter .nm, .tg-screen.f-inter .sb-time, .tg-screen.f-inter .g-cnt { letter-spacing: -.53px; }
.tg-screen.f-inter .pin-txt, .tg-screen.f-inter .fwd, .tg-screen.f-inter .kbb, .tg-screen.f-inter .badge { letter-spacing: -.4px; }
.tg-screen.f-inter .reply, .tg-screen.f-inter .svc span { letter-spacing: -.16px; }
.tg-screen.f-inter .st { letter-spacing: -.12px; }
.tg-screen.f-inter .meta, .tg-screen.f-inter .ghost, .tg-screen.f-inter .vd { letter-spacing: 0; }

/* плашка приложения в статус-баре */
.tg-screen .sb-pill {
  position: absolute; left: 50%; transform: translateX(-50%); height: 21px; padding: 0 8px 0 7px; border-radius: 11px;
  background: #0a84ff; color: #fff; display: flex; align-items: center; gap: 3.5px; white-space: nowrap;
  font-size: 11.5px; font-weight: 700; letter-spacing: .1px; line-height: 1;
}
.tg-screen .sb-pill svg { display: block; flex: none; }
.tg-screen.f-inter .sb-pill { letter-spacing: 0; }

/* ---------- поле ввода с текстом ---------- */
.tg-screen .typed { flex: 1; min-width: 0; color: var(--fg); font-size: 17px; letter-spacing: -.4px; line-height: 22px; white-space: pre-wrap; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; }
.tg-screen .caret { display: inline-block; width: 2px; height: 20px; margin: 0 1px -4px; background: #0a84ff; border-radius: 1px; }
.tg-screen .ph .caret { margin-right: 2px; }
.tg-screen .g-field.multi, .tg-screen .field { align-items: center; }
.tg-screen .g-field.multi { align-items: flex-end; padding-bottom: 9px; border-radius: 20px; }
.tg-screen .g-send { background: #0a84ff; box-shadow: 0 4px 14px rgba(10,132,255,.35); }
.tg-screen .c-send { width: 30px; height: 30px; border-radius: 50%; background: #0a84ff; display: flex; align-items: center; justify-content: center; }
.tg-screen .c-send svg { width: 13px; }
.tg-screen .inp.with-kb { box-shadow: 0 -.5px 0 var(--hdr-line); }

/* ---------- клавиатура iOS ---------- */
.tg-screen .kbd { position: absolute; left: 0; right: 0; bottom: 0; z-index: 7; background: var(--kb-bg); color: var(--kb-fg);
  -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); }
.tg-screen .kbd-glass { border-radius: 26px 26px 0 0; box-shadow: inset 0 .5px 0 rgba(255,255,255,.6), 0 -4px 20px rgba(0,0,0,.08); }
.tg-screen .kk { position: absolute; height: 42px; border-radius: var(--kb-r); background: var(--kb-key); box-shadow: 0 1px 0 var(--kb-shadow);
  display: flex; align-items: center; justify-content: center; font-size: 22.5px; font-weight: 400; letter-spacing: 0; line-height: 1; }
.tg-screen .kk.sp { background: var(--kb-key2); }
.tg-screen .kk.t { font-size: 16px; }
.tg-screen .kk svg { display: block; }
.tg-screen .kb-sugg { position: absolute; left: 0; right: 0; top: 0; height: 44px; display: flex; align-items: center; font-size: 16px; letter-spacing: -.3px; }
.tg-screen .kb-sugg span { flex: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 6px; }
.tg-screen .kb-sugg i { width: 1px; height: 24px; background: var(--kb-div); flex: none; }
.tg-screen .kb-acc { position: absolute; left: 28px; right: 28px; display: flex; justify-content: space-between; color: var(--kb-fg); opacity: .75; }
.tg-screen .kb-acc svg { display: block; }
.tg-screen.theme-light { --kb-bg: rgba(209,212,219,.94); --kb-fg: #000; --kb-key: #fff; --kb-key2: #acb1bb; --kb-shadow: rgba(0,0,0,.3); --kb-div: rgba(0,0,0,.18); --kb-r: 5.5px; }
.tg-screen.theme-dark { --kb-bg: rgba(38,38,40,.94); --kb-fg: #fff; --kb-key: #6b6b6f; --kb-key2: #464649; --kb-shadow: rgba(0,0,0,.55); --kb-div: rgba(255,255,255,.18); --kb-r: 5.5px; }
/* iOS 26/27 «Liquid Glass»: стеклянная панель, сквозь неё видны размытые обои; цвета сняты в симуляторе iOS 27
   (над белым панель 226,227,232, над чёрным — 32; клавиши все одного цвета, служебные тоже), без нижней тени */
.tg-screen.st-glass.theme-light { --kb-bg: rgba(222,228,230,.85);   /* по замеру клавиатуры iOS 27 в Telegram */ --kb-key: rgba(255,255,255,.92); --kb-key2: rgba(255,255,255,.92); --kb-shadow: rgba(0,0,0,.06); --kb-r: 8.5px; --kb-div: rgba(0,0,0,.14); }
.tg-screen.st-glass.theme-dark { --kb-bg: rgba(33,35,37,.9); --kb-key: rgba(255,255,255,.16); --kb-key2: rgba(255,255,255,.16); --kb-shadow: transparent; --kb-r: 8.5px; --kb-div: rgba(255,255,255,.16); }
.tg-screen.st-glass .kbd { -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); }
.tg-screen.st-glass .kbd-glass { box-shadow: inset 0 .5px 0 rgba(255,255,255,.35); }
.tg-screen.st-glass.theme-dark .kbd-glass { box-shadow: inset 0 .5px 0 rgba(255,255,255,.12); }
.tg-screen.st-glass .kk { font-size: 22px; font-weight: 400; }
.tg-screen.st-glass .kk.t { font-size: 17px; font-weight: 400; }
.tg-screen.st-glass .kk.sp { color: var(--kb-fg); }
.tg-screen.st-glass .kk.space { justify-content: flex-end; align-items: flex-end; padding: 0 8px 5px 0; box-sizing: border-box; }
.tg-screen .kb-mark { font-size: 12px; font-weight: 400; line-height: 1; opacity: .45; display: inline-block; transform: scaleX(.82); transform-origin: 100% 50%; }
.tg-screen.st-glass .kb-sugg { font-size: 17px; letter-spacing: -.2px; }
.tg-screen.st-glass .kb-sugg i { height: 22px; }

/* ---------- полоса «Непрочитанные» ---------- */
.tg-screen .unread-bar { margin: 8px -11px 8px; height: 28px; display: flex; align-items: center; justify-content: center;
  background: var(--unread-bg); color: var(--unread-fg); font-size: 14px; font-weight: 500; letter-spacing: -.15px;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.tg-screen.theme-light { --unread-bg: rgba(255,255,255,.72); --unread-fg: #6b7b8c; }
.tg-screen.theme-dark { --unread-bg: rgba(28,28,30,.72); --unread-fg: #a8adb4; }

/* ---------- кнопка ↓ ---------- */
.tg-screen .down-btn { position: absolute; right: 12px; z-index: 6; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--down-bg); color: var(--down-fg); box-shadow: 0 1px 6px rgba(0,0,0,.14), 0 0 0 .5px rgba(0,0,0,.06); }
.tg-screen .down-btn svg { margin-top: 2px; }
.tg-screen.st-glass .down-btn { right: 26px; }   /* iOS 26–27: ровно над кнопкой микрофона (замер в Telegram) */
.tg-screen .down-btn.glass { background: var(--glass-bg); color: var(--glass-fg); box-shadow: var(--glass-sh); }
.tg-screen .down-cnt { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--acc); color: #fff; font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; letter-spacing: -.2px; }
.tg-screen.theme-light { --down-bg: rgba(255,255,255,.95); --down-fg: #8e8e93; }
.tg-screen.theme-dark { --down-bg: rgba(40,40,42,.95); --down-fg: #9a9aa0; }

/* ---------- кружок ---------- */
.tg-screen .circle { position: relative; border-radius: 50%; overflow: hidden; }
.tg-screen .circle img, .tg-screen .circle .ph-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tg-screen .circle .ph-img { background: linear-gradient(135deg, #8fb0c9, #cad7e1); }
/* кружок как в Telegram: длительность слева у нижнего края, время справа, значок звука — кружок по центру внизу */
.tg-screen .free-b.cir { position: relative; padding-bottom: 4px; }
.tg-screen .circle .c-mute { position: absolute; left: 50%; bottom: 8px; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; }
.tg-screen .cir .c-dur, .tg-screen .cir .meta.pill { position: absolute; top: 226px; margin: 0; display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 10px;
  background: var(--svc-bg); color: #fff; font-size: 11px; -webkit-backdrop-filter: blur(12px) saturate(170%); backdrop-filter: blur(12px) saturate(170%); }
.tg-screen .cir .c-dur { left: 30px; }
.tg-screen .cir .meta.pill { right: 21px; }
/* кнопка расшифровки у кружка (ChatMessageInteractiveInstantVideoNode): 30×30 в нижнем углу кружка — у входящего
   справа (время — за ней через 7pt), у исходящего слева (длительность — перед ней) */
.tg-screen .cir .c-tr { position: absolute; top: 210px; left: 210px; width: 30px; height: 30px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: var(--svc-bg); color: var(--svc-fg); -webkit-backdrop-filter: blur(12px) saturate(170%); backdrop-filter: blur(12px) saturate(170%); }
.tg-screen .in .cir.tr .meta.pill { right: auto; left: 247px; }
.tg-screen .out .cir .c-tr { left: 0; }
.tg-screen .out .cir.tr .c-dur { left: auto; right: calc(100% + 6px); }

/* ---------- видео ---------- */
.tg-screen .v-play { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%; background: rgba(0,0,0,.42);
  display: flex; align-items: center; justify-content: center; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.tg-screen .v-play svg { margin-left: 3px; }
.tg-screen .v-dur { position: absolute; left: 7px; top: 7px; background: rgba(0,0,0,.42); color: #fff; font-size: 12px; height: 19px; padding: 0 6px; border-radius: 10px; display: flex; align-items: center; }

/* ---------- файл ---------- */
.tg-screen .fbub { padding: 8px 11px 7px 8px; min-width: 201px; }   /* в Telegram: по имени файла + 52pt, не уже ≈200pt с полями */
.tg-screen .file { display: flex; align-items: center; gap: 10px; }
.tg-screen .f-ic { width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; }
.tg-screen .f-dl { border-radius: 50%; }
.tg-screen .in .f-dl { background: var(--in-ctl, var(--in-acc)); color: var(--play-fg-in); }
.tg-screen .out .f-dl { background: var(--out-ctl, var(--out-acc)); color: var(--play-fg-out); }
.tg-screen .in .f-name { color: var(--in-file, inherit); }   /* имя файла — цветом темы (fileTitleColor), как в TG */
.tg-screen .out .f-name { color: var(--out-file, inherit); }
.tg-screen .f-ext { border-radius: 9px; font-size: 12px; font-weight: 700; letter-spacing: .2px; }
.tg-screen .f-info { min-width: 0; }
.tg-screen .f-name { font-size: 16px; line-height: 20px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 230px; letter-spacing: -.3px; }
.tg-screen .f-size { font-size: 13px; line-height: 17px; margin-top: 2px; }
.tg-screen .in .f-size { color: var(--in-meta); }
.tg-screen .out .f-size { color: var(--out-meta); }
.tg-screen .f-meta-row { text-align: right; height: 12px; }
.tg-screen .f-cap { margin-top: 6px; padding-left: 3px; }
.tg-screen .fbub .meta { bottom: 5px; }

/* ---------- звонок ---------- */
.tg-screen .cbub { padding: 8px 12px 8px 12px; min-width: 210px; }
.tg-screen .call { display: flex; align-items: center; gap: 16px; }
.tg-screen .c-info { flex: 1; min-width: 0; }
.tg-screen .c-title { font-size: 16px; line-height: 21px; font-weight: 500; letter-spacing: -.3px; white-space: nowrap; }
.tg-screen .c-sub { display: flex; align-items: center; gap: 4px; font-size: 13px; line-height: 17px; margin-top: 2px; }
.tg-screen .in .c-sub { color: var(--in-meta); }
.tg-screen .out .c-sub { color: var(--out-meta); }
.tg-screen .c-icon { flex: none; display: flex; }
.tg-screen .in .c-icon { color: var(--in-acc); }
.tg-screen .out .c-icon { color: var(--out-acc); }

/* ---------- геолокация ---------- */
.tg-screen .photo .map, .tg-screen .photo .map svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.tg-screen .loc .loc-t { font-weight: 600; font-size: 16px; line-height: 21px; letter-spacing: -.3px; }
.tg-screen .loc .loc-a { font-size: 14px; line-height: 18px; }
.tg-screen .in .loc .loc-a { color: var(--in-meta); }
.tg-screen .out .loc .loc-a { color: var(--out-meta); }

/* ---------- контакт (Telegram iOS 26: плашка цвета акцента с полосой 3pt, кнопки заглавными, время под плашкой) ---------- */
.tg-screen .ccbub { padding: 6px 8px 22px; min-width: 236px; }
.tg-screen .cc-box { position: relative; border-radius: 6px; padding: 9px 9px 0 12px; overflow: hidden; }
.tg-screen .cc-box::before { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 3px; background: currentColor; }
.tg-screen .in .cc-box { color: var(--in-acc); background: color-mix(in srgb, var(--in-acc) 11%, transparent); }
.tg-screen .out .cc-box { color: var(--out-acc); background: color-mix(in srgb, var(--out-acc) 13%, transparent); }
.tg-screen .cc-top { display: flex; align-items: center; gap: 7px; height: 40px; margin-bottom: 12px; }
.tg-screen .cc-txt { min-width: 0; }
.tg-screen .cc-name { font-size: 14px; line-height: 17px; font-weight: 600; letter-spacing: -.15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-screen .cc-phone { font-size: 14px; line-height: 17px; letter-spacing: -.15px; }
.tg-screen .in .cc-phone { color: var(--in-fg); }
.tg-screen .out .cc-phone { color: var(--out-fg); }
.tg-screen .cc-btns { display: flex; align-items: center; height: 33px; margin-inline-start: -9px; border-top: .5px solid color-mix(in srgb, currentColor 22%, transparent); font-size: 14px; font-weight: 600; letter-spacing: .1px; text-transform: uppercase; }
.tg-screen .cc-btns span { flex: 1; text-align: center; }
.tg-screen .ccbub .meta { bottom: 5px; }

/* ---------- превью ссылки ---------- */
.tg-screen .lprev { position: relative; margin: 3.7px 0 .7px; padding: 3.3px 9px 4.8px 11px; border-radius: 6px; font-size: 14px; line-height: 17.1px; letter-spacing: -.2px; overflow: hidden; }
.tg-screen .lprev::before { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 3px; background: currentColor; }
.tg-screen .in .lprev { color: var(--in-acc); background: color-mix(in srgb, var(--in-acc) 11%, transparent); }
.tg-screen .out .lprev { color: var(--out-acc); background: color-mix(in srgb, var(--out-acc) 13%, transparent); }
.tg-screen .lp-site { font-weight: 600; }
.tg-screen .lp-title { font-weight: 600; color: var(--fg-in-bubble, inherit); }
.tg-screen .in .lp-title, .tg-screen .in .lp-desc { color: var(--in-fg); }
.tg-screen .out .lp-title, .tg-screen .out .lp-desc { color: var(--out-fg); }
.tg-screen .lp-desc { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.tg-screen .lp-img { display: block; width: 100%; aspect-ratio: 1.9; object-fit: cover; border-radius: 5px; margin-top: 6px; }
.tg-screen .lp-meta-row { height: 14px; text-align: right; }

/* ---------- баннер-уведомление ---------- */
/* замер системного баннера iOS 27 (симулятор, Xcode 27): поля 8, высота 66 при одной строке текста,
   скругление ~24, значок 37 с отступом 14, заголовок и «сейчас» 15pt; светлый — белое стекло с тонкой
   серой кромкой, тёмный — #1f на чёрном, светлая волосяная кромка сверху */
.tg-screen .notif { position: absolute; left: 8px; right: 8px; z-index: 20; display: flex; gap: 13px; padding: 14px 18px 13px 14px; border-radius: 24px;
  background: var(--nt-bg); color: var(--fg); box-shadow: 0 10px 30px rgba(0,0,0,.14), 0 0 0 .34px var(--nt-line), inset 0 .5px 0 var(--nt-hi);
  -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%); }
.tg-screen .notif.nt-light { --nt-bg: rgba(255,255,255,.78); --nt-sub: rgba(60,60,67,.6); --nt-line: rgba(0,0,0,.32); --nt-hi: rgba(255,255,255,.9); color: #000; }
.tg-screen .notif.nt-dark { --nt-bg: rgba(40,40,42,.72); --nt-sub: rgba(235,235,245,.6); --nt-line: rgba(255,255,255,.1); --nt-hi: rgba(255,255,255,.22); color: #fff; }
.tg-screen .nt-ic { position: relative; flex: none; width: 37px; height: 37px; align-self: center; }
.tg-screen .nt-ic > svg, .tg-screen .nt-ic > .ava { width: 37px !important; height: 37px !important; }
.tg-screen .nt-ic svg { display: block; }
.tg-screen .nt-badge { position: absolute; right: -4px; bottom: -3px; width: 17px; height: 17px; border-radius: 5px; box-shadow: 0 0 0 1.5px rgba(0,0,0,.35); overflow: hidden; }
.tg-screen .nt-light .nt-badge { box-shadow: 0 0 0 1.5px rgba(255,255,255,.9); }
.tg-screen .nt-main { flex: 1; min-width: 0; }
.tg-screen .nt-row { display: flex; align-items: baseline; gap: 8px; }
.tg-screen .nt-row b { flex: 1; min-width: 0; font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -.25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-screen .nt-row span { font-size: 15px; letter-spacing: -.25px; color: var(--nt-sub); flex: none; }
.tg-screen .nt-body { font-size: 15px; line-height: 20px; letter-spacing: -.25px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; }
.tg-screen .g-inp { align-items: flex-end; }
.tg-screen .inp-row { align-items: flex-end; padding-bottom: 8px; }
.tg-screen .inp:not(.with-kb) .inp-row { align-items: center; padding-bottom: 0; }

/* «◀ Приложение» вместо часов */
.tg-screen .sb-back { position: absolute; height: 13px; display: flex; align-items: center; gap: 3.9px; font-size: 11.5px; font-weight: 600; line-height: 13px; letter-spacing: -.25px; white-space: nowrap; }
.tg-screen .sb-back.cl { height: 20px; justify-content: center; gap: 3px; font-size: 13px; line-height: 20px; letter-spacing: -.2px; }
.tg-screen[dir="rtl"] .sb-back svg { transform: scaleX(-1); }
.tg-screen.f-inter .sb-back { letter-spacing: -.35px; }
/* размытый отрезок текста: ||...|| */
.blur { filter: blur(.3em); -webkit-user-select: none; user-select: none; }

/* «Новый чат» — собеседник не в контактах */
.tg-screen .nc-bar { position: absolute; z-index: 6; display: flex; flex-direction: column; }
.tg-screen .g-nc { left: 12px; right: 12px; border-radius: 22px; }
.tg-screen .c-nc { left: 0; right: 0; background: var(--hdr-bg); box-shadow: 0 .5px 0 var(--hdr-line); }
.tg-screen .nc-row { position: relative; height: 50px; display: flex; align-items: center; justify-content: center; gap: 0; font-size: 17px; letter-spacing: -.3px; }
.tg-screen .c-nc .nc-row { height: 44px; }
.tg-screen .nc-block, .tg-screen .nc-add { flex: 1; text-align: center; }
.tg-screen .nc-block { color: #ff3b30; }
.tg-screen .nc-add { color: var(--acc); }
.tg-screen .nc-x { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--acc); display: flex; }
.tg-screen[dir="rtl"] .nc-x { right: auto; left: 14px; }
.tg-screen .nc-badge { height: 30px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; color: var(--glass-sub, #8e8e93);
  border-top: .5px solid rgba(127,127,127,.28); margin: 0 14px; }
.tg-screen .nc-badge b { font-weight: 400; color: var(--acc); }
.tg-screen .nc-emo { font-size: 15px; line-height: 1; }
.tg-screen .nc-card-w { display: flex; justify-content: center; margin: 14px 0 6px; }
/* размеры — ChatUserInfoItem (Telegram iOS): поля 17/16, имя 15 semibold, остальное 13, интервал 6 (+3 между абзацами),
   ширина — по строкам «подпись · значение» (16 + подпись + 10 + значение + 16), скругление как у пузырей (16) */
.tg-screen .nc-card { width: max-content; max-width: calc(100% - 52px); box-sizing: border-box; padding: 17px 16px; border-radius: 16px; background: var(--svc-bg); color: var(--svc-fg, #fff); text-align: center;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.tg-screen .nc-name { font-size: 15px; font-weight: 600; letter-spacing: -.2px; line-height: 18px; }
.tg-screen .nc-sub { font-size: 13px; line-height: 16px; opacity: .8; margin-top: 3px; }
.tg-screen.theme-dark .nc-sub, .tg-screen.theme-dark .nc-kv span, .tg-screen.theme-dark .nc-warn { opacity: .7; }
.tg-screen .nc-rows { margin-top: 15px; display: grid; grid-template-columns: auto auto; justify-content: center; gap: 6px 10px; }
.tg-screen .nc-kv { display: contents; }
.tg-screen .nc-kv span { text-align: right; font-size: 13px; line-height: 16px; opacity: .8; white-space: nowrap; }
.tg-screen .nc-kv b { text-align: left; font-size: 13px; line-height: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-screen .nc-name, .tg-screen .nc-sub, .tg-screen .nc-warn { contain: inline-size; }
.tg-screen .nc-warn { margin-top: 15px; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 13px; line-height: 16px; opacity: .8; }
.tg-screen .nc-i { width: 14px; height: 14px; border-radius: 50%; background: color-mix(in srgb, var(--svc-fg, #fff) 85%, transparent); color: color-mix(in srgb, rgb(from var(--svc-bg, #1c1c1e) r g b / 1) 88%, #1c1c1e); font-size: 10px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1; }

/* светлая тема: поле ввода и круглые кнопки — светлая «таблетка», как в Telegram.
   Полупрозрачное стекло на тёмной фотке в обоях серело, и подпись «Сообщение» сливалась с фоном */

/* расшифровка голосового */
/* как в Telegram (ChatMessageInteractiveFileNode): 30×30, скругление 10, у правого края пузыря
   (правый край в 7.5pt от края пузыря), по высоте — по центру волны, под ней остаётся место для времени */
.tg-screen .tr-btn { flex: none; align-self: flex-start; width: 30px; height: 30px; border-radius: 10px; margin-inline: auto -4.5px; margin-top: -3px;
  display: flex; align-items: center; justify-content: center; }
.tg-screen .vbub.has-tr { max-width: 100%; padding-bottom: 8.3px; }
/* раскрытая расшифровка: ширину задаёт текст, волна занимает всё до кнопки — не влезшие столбики переносятся на скрытую строку */
.tg-screen .has-tr .vr { flex: 1; min-width: 0; contain: inline-size; }
.tg-screen .has-tr .wave { flex-wrap: wrap; align-content: flex-start; overflow: hidden; }
.tg-screen .has-tr .wave::before { content: ''; height: 18px; margin-inline-end: -2px; }
.tg-screen .v-tr { margin-top: 7.7px; margin-inline-start: -1px; padding: 0; }   /* как в TG: текст на 1pt левее кнопки ▶ (textFrame x = text − file bubbleInsets) */

/* альбом фото */
.tg-screen .photo.album { position: relative; display: block; }   /* мозаика: кадры по абсолютным координатам (mosaicLayout) */
.tg-screen .al-c { position: absolute; display: block; object-fit: cover; }
.tg-screen .al-c.ph-img { position: absolute; }

/* адаптивное стекло: над тёмными обоями — тёмное, над светлыми — светлое (так делает iOS 26) */
.tg-screen.gt-dark .g-nav, .tg-screen.gt-dark .g-pin, .tg-screen.gt-dark .g-nc, .tg-screen.gt-dark .edge.top,
.tg-screen.gb-dark .g-inp, .tg-screen.gb-dark .edge.bot, .tg-screen.gb-dark .down-btn {
  --glass-bg: rgba(255,255,255,.15); --glass-fg: #fff; --glass-sub: #98989e; --glass-ph: #8d8d93; --glass-sat: 140%; --glass-br: 1;
  --glass-sh: inset 0 1px .5px rgba(255,255,255,.22), inset 0 0 0 .5px rgba(255,255,255,.12), 0 8px 24px rgba(0,0,0,.35);
  --edge-tint: rgba(0,0,0,.4); --cnt-bg: #fff; --cnt-fg: #111113;
}
.tg-screen.gt-light .g-nav, .tg-screen.gt-light .g-pin, .tg-screen.gt-light .g-nc, .tg-screen.gt-light .edge.top,
.tg-screen.gb-light .g-inp, .tg-screen.gb-light .edge.bot, .tg-screen.gb-light .down-btn {
  --glass-bg: rgba(255,255,255,.46); --glass-fg: #111113; --glass-sub: #6e6e73; --glass-ph: #8a8a8f; --glass-sat: 100%; --glass-br: 1.02;
  --glass-sh: inset 0 1px .5px rgba(255,255,255,.95), inset 0 -.5px .5px rgba(255,255,255,.5), inset 0 0 0 .5px rgba(255,255,255,.5), 0 8px 24px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.08);
  --edge-tint: rgba(255,255,255,.22); --cnt-bg: #000; --cnt-fg: #fff;
}
.tg-screen.gt-dark .g-nc .nc-badge { color: #98989e; }

/* цитаты: ответ с цитатой части сообщения и блок-цитата в тексте */
.tg-screen .reply .q-ico, .tg-screen .bq .q-ico { position: absolute; top: 5px; inset-inline-end: 6px; opacity: .9; }
.tg-screen .reply.rq { padding-inline-end: 20px; }
.tg-screen .reply.rq .rt { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; max-width: 250px; }
.tg-screen .bq { position: relative; display: block; margin: 3px 0 4px; padding: 2px 20px 3px 10px; border-radius: 6px; white-space: pre-wrap; }
.tg-screen .bq::before { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 3px; border-radius: 3px 0 0 3px; background: currentColor; }
.tg-screen .in .bq { color: var(--in-fg); background: color-mix(in srgb, var(--in-acc) 12%, transparent); }
.tg-screen .out .bq { color: var(--out-fg); background: color-mix(in srgb, var(--out-acc) 14%, transparent); }
.tg-screen .in .bq::before, .tg-screen .in .bq .q-ico { color: var(--in-acc); }
.tg-screen .out .bq::before, .tg-screen .out .bq .q-ico { color: var(--out-acc); }

/* эмодзи внутри текста — крупнее букв, как в Telegram (замер нашей сборки TG: ×1.2), строку не раздувают */
.tg-screen .emj { font-size: 1.2em; line-height: 0; vertical-align: -.04em; }
.tg-screen .bigemo .emj, .tg-screen .blur .emj { font-size: inherit; vertical-align: baseline; }
/* поле ввода и кнопки внизу — у Telegram сочнее шапки (замер нашей сборки TG): насыщенность обоев под ним 145% */
.tg-screen.theme-light .g-inp, .tg-screen.gb-light .g-inp { --glass-bg: rgba(255,255,255,.44); --glass-sat: 145%; }
.tg-screen.gb-dark .g-inp { --glass-bg: rgba(255,255,255,.15); --glass-sat: 140%; }

/* ---------- сверка с TG, страница демо 6: ответ на фото, видео, кнопки под сообщением ---------- */
/* ответ на фото: миниатюра 31pt слева в блоке цитаты (замер нашей сборки TG) */
.tg-screen .reply.has-img { padding-inline-start: 46.5px; min-height: 40px; }
.tg-screen .reply .r-img { position: absolute; top: 4.5px; inset-inline-start: 9.2px; width: 31px; height: 31px; border-radius: 4px; object-fit: cover; }
/* видео играет без звука: плашка «0:24 🔇» вверху слева */
.tg-screen .v-dur { left: 6px; top: 6px; height: 20px; padding: 0 6px 0 7px; gap: 4px; font-size: 12px; font-weight: 500; border-radius: 10px; background: rgba(0,0,0,.5); }
/* кнопки под сообщением: 42pt, зазор 2, Medium 16; заливка из темы TG поверх размытых обоев (блюр с насыщенностью) */
.tg-screen .kb { gap: 2px; margin-top: 2px; }
.tg-screen .kbr { gap: 2px; }
.tg-screen .kbb { position: relative; height: 42px; border-radius: 12px; font-size: 16px; font-weight: 500; letter-spacing: -.2px;
  background: var(--kb-in-bg, rgba(0,0,0,.2)); color: var(--kb-in-fg, #fff);
  -webkit-backdrop-filter: blur(20px) saturate(190%); backdrop-filter: blur(20px) saturate(190%); }
.tg-screen .out .kbb { background: var(--kb-out-bg, rgba(0,0,0,.2)); color: var(--kb-out-fg, #fff); }
.tg-screen .kbb .kb-arr { position: absolute; top: 6px; inset-inline-end: 6px; }

/* арабский интерфейс: межбуквенный интервал (подогнан под SF Pro) сжимает слитное арабское письмо — в Telegram его нет */
.tg-screen[lang="ar"], .tg-screen[lang="ar"] * { letter-spacing: 0 !important; }