/* Roboto (OFL, fonts.google.com/specimen/Roboto) — шрифт Android. Лицензия: fonts/Roboto-LICENSE.txt */
@font-face { font-family: 'RobotoTG'; font-style: normal; font-display: block; font-weight: 100 900;
  src: url(fonts/roboto-cyrillic-ext-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: 'RobotoTG'; font-style: normal; font-display: block; font-weight: 100 900;
  src: url(fonts/roboto-cyrillic-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'RobotoTG'; font-style: normal; font-display: block; font-weight: 100 900;
  src: url(fonts/roboto-greek-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; }
@font-face { font-family: 'RobotoTG'; font-style: normal; font-display: block; font-weight: 100 900;
  src: url(fonts/roboto-vietnamese-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'RobotoTG'; font-style: normal; font-display: block; font-weight: 100 900;
  src: url(fonts/roboto-latin-ext-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'RobotoTG'; font-style: normal; font-display: block; font-weight: 100 900;
  src: url(fonts/roboto-latin-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* Экран Telegram для Android (render-tga.js): Pixel 9, Android 16, Telegram 12.10. Корень — .tg-screen.tga: лента та же,
   что у Telegram на iPhone (messagesHtml из render.js), вид — Android. Все размеры в dp.
   Сверено: шапка, поле ввода и пузыри — со скрином эмулятора (08.10.2026); шрифт 16, радиус пузыря 17, время 12 и цвета
   светлой темы — из исходников (SharedConfig, Theme, ThemeColors). «≈» — пока без сверки: тёмная тема, хвост пузыря. */
/* .and — экраны WhatsApp и Instagram на Android (render-wa.js, render-ig.js): тот же шрифт и системные части */
.tg-screen.tga, .tg-screen.and { font-family: "TGArabic", "RobotoTG", Roboto, system-ui, sans-serif, "Apple Color Emoji"; }

/* строка состояния Android 16: часы слева, справа Wi-Fi, сеть, батарея */
.tg-screen:is(.tga, .and) .a-sb { position: absolute; top: 0; left: 0; right: 0; z-index: 7; color: var(--a-sb); }
.tg-screen:is(.tga, .and) .a-clock { position: absolute; left: 16.4px; top: 17.5px; font-size: 14px; font-weight: 500; line-height: 19px; letter-spacing: .1px; }
.tg-screen:is(.tga, .and) .a-sbi { position: absolute; right: 28.6px; top: 19.5px; height: 15px; display: flex; align-items: center; gap: 4.6px; }
.tg-screen:is(.tga, .and) .a-sbi svg { display: block; }

/* шапка: три «пилюли» 46 dp — назад, собеседник, звонок с меню */
.tg-screen.tga .a-nav { position: absolute; left: 6px; right: 6.5px; z-index: 6; height: 46px; display: flex; gap: 6.2px; color: var(--a-ic); }
.tg-screen.tga .a-pill { height: 46px; border-radius: 23px; background: var(--a-pill); box-shadow: 0 .5px 2.5px rgba(0,0,0,.16), 0 0 0 .33px rgba(0,0,0,.05); display: flex; align-items: center; }
.tg-screen.tga .a-back { flex: none; width: 46px; justify-content: center; }
.tg-screen.tga .a-who { flex: 1; min-width: 0; padding: 0 14px 0 2.4px; }
.tg-screen.tga .a-who .ava { flex: none; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 500; }
.tg-screen.tga .a-who .ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tg-screen.tga .a-ttl { flex: 1; min-width: 0; margin-left: 8.6px; }
.tg-screen.tga .a-name { display: flex; align-items: center; gap: 4px; font-size: 18px; font-weight: 500; line-height: 22px; letter-spacing: -.1px; color: var(--a-fg); white-space: nowrap; overflow: hidden; }
.tg-screen.tga .a-name > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tg-screen.tga .a-st { margin-top: -1px; font-size: 14px; line-height: 17px; color: var(--a-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-screen.tga .a-st.acc { color: var(--a-acc); }
.tg-screen.tga .a-acts { flex: none; padding: 0 2px; }
.tg-screen.tga .a-acts span { width: 39.3px; height: 46px; display: flex; align-items: center; justify-content: center; }
.tg-screen.tga .a-nav svg { display: block; }

/* лента: пузыри в 11.4 dp от краёв, текст 16/18.75, время 12 */
.tg-screen.tga .msgs { padding: 0 11.4px; }
.tg-screen.tga .bub { padding: 6px 9.5px 6.4px 11.5px; font-size: 16px; line-height: 18.75px; letter-spacing: 0; }
.tg-screen.tga .meta, .tg-screen.tga .ghost { font-size: 12px; line-height: 14px; letter-spacing: 0; gap: 3.5px; }
.tg-screen.tga .meta { bottom: 5px; inset-inline-end: 9.5px; }
.tg-screen.tga .out .meta { inset-inline-end: 8px; }
.tg-screen.tga .txt b { font-weight: 500; }
.tg-screen.tga .reply .rn, .tg-screen.tga .fwd, .tg-screen.tga .fwd b { font-weight: 500; }
/* «Переслано от» — две строки обычным начертанием, без кружка-аватара; время отделено от текста на 8 dp */
.tg-screen.tga .fwd, .tg-screen.tga .fwd b, .tg-screen.tga .fwd-n, .tg-screen.tga .fwd-n span { font-weight: 400; font-size: 14.6px; line-height: 19.5px; }
.tg-screen.tga .fwd .mini-ava { display: none; }
.tg-screen.tga .ghost { margin-inline-start: 8px; }
.tg-screen.tga .svc span { font-size: 14px; font-weight: 500; line-height: 18px; letter-spacing: 0; padding: 2.5px 9px; border-radius: 12px; }

/* поле ввода: одна белая «пилюля» 44 dp во всю ширину, справа в ней синий круг 37.3 dp */
.tg-screen.tga .a-inp { position: absolute; left: 7.2px; right: 7.2px; z-index: 6; min-height: 44px; border-radius: 22px; background: var(--a-pill); box-shadow: 0 .5px 2.5px rgba(0,0,0,.16), 0 0 0 .33px rgba(0,0,0,.05);
  display: flex; align-items: flex-end; color: var(--a-ico); }
.tg-screen.tga .a-inp > span { flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.tg-screen.tga .a-inp > .a-emo { margin-left: 3px; }
.tg-screen.tga .a-txt { flex: 1; min-width: 0; align-self: center; margin-left: 3.2px; padding: 11px 0; font-size: 18px; line-height: 22px; color: var(--a-fg); white-space: pre-wrap; overflow-wrap: anywhere; }
.tg-screen.tga .a-txt.ph { color: var(--a-hint); white-space: nowrap; overflow: hidden; }
.tg-screen.tga .a-caret { display: inline-block; width: 2px; height: 22px; margin: 0 0 -4px 1px; border-radius: 1px; background: var(--a-acc); }
.tg-screen.tga .a-inp > .a-mic { width: 37.3px; height: 37.3px; margin: 0 3.35px 3.35px 3px; border-radius: 50%; background: var(--a-send); color: #fff; }
.tg-screen.tga .a-inp svg { display: block; }

/* хвост пузыря Android: выступает на 6 dp, высота 8.5 dp */
.tg-screen.tga .in .tail { left: -6px; }
.tg-screen.tga .out .tail { right: -6px; }

/* Gboard */
.tg-screen:is(.tga, .and) .a-kb { position: absolute; left: 0; right: 0; bottom: 0; z-index: 7; background: var(--k-bg); color: var(--k-fg); font-family: "RobotoTG", Roboto, sans-serif; }
.tg-screen:is(.tga, .and) .a-kb .k { position: absolute; height: 46.5px; border-radius: 6px; background: var(--k-key); display: flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1; }
.tg-screen:is(.tga, .and) .a-kb .k.fn { background: var(--k-fn); }
.tg-screen:is(.tga, .and) .a-kb .k.pill { height: 46.9px; border-radius: 23.45px; font-size: 16px; font-weight: 500; letter-spacing: .1px; }   /* овал во всю высоту клавиши — замер Gboard */
.tg-screen:is(.tga, .and) .a-kb .k.ce { flex-direction: column; justify-content: flex-end; padding-bottom: 6px; box-sizing: border-box; line-height: .8; }
.tg-screen:is(.tga, .and) .a-kb .k-ce { display: block; margin-bottom: 5px; opacity: .85; }
.tg-screen:is(.tga, .and) .a-kb .k-lang { font-size: 14.5px; font-weight: 400; letter-spacing: .1px; color: var(--k-fg); }
.tg-screen:is(.tga, .and) .a-kb .k i { position: absolute; top: 3.2px; right: 4.6px; font-style: normal; font-size: 10px; line-height: 12px; color: var(--k-hint); }
.tg-screen:is(.tga, .and) .a-kb svg { display: block; }
.tg-screen:is(.tga, .and) .k-ti { position: absolute; top: 5px; width: 33.5px; height: 33.5px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.tg-screen:is(.tga, .and) .k-ti b { font-size: 13px; font-weight: 800; letter-spacing: .2px; }
.tg-screen:is(.tga, .and) .k-ti.mic { background: var(--k-key); }
.tg-screen:is(.tga, .and) .k-sugg { position: absolute; left: 45px; right: 45px; top: 5px; height: 33.5px; display: flex; align-items: center; font-size: 17px; }
.tg-screen:is(.tga, .and) .k-sugg span { flex: 1; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-screen:is(.tga, .and) .k-sugg i { flex: none; width: 1px; height: 20px; background: color-mix(in srgb, var(--k-fg) 28%, transparent); }
.tg-screen:is(.tga, .and) .k-down { position: absolute; left: 35.7px; color: var(--k-fg); }

/* баннер-уведомление Android 16 */
.tg-screen:is(.tga, .and) .a-app { display: flex; align-items: center; gap: 7px; left: 9px; font-weight: 400; }
.tg-screen:is(.tga, .and) .a-nt { position: absolute; left: 16px; right: 16.4px; top: 62.5px; z-index: 9; height: 122.7px; border-radius: 28px; background: var(--n-bg); color: var(--n-fg);
  box-shadow: 0 2px 8px rgba(0,0,0,.18); font-family: "RobotoTG", Roboto, sans-serif; }
.tg-screen:is(.tga, .and) .nt-ava { position: absolute; left: 16px; top: 24px; width: 40px; height: 40px; }
.tg-screen:is(.tga, .and) .nt-ava .ava { border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 500; }
.tg-screen:is(.tga, .and) .nt-ava .ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tg-screen:is(.tga, .and) .nt-bdg { position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; border-radius: 50%; background: var(--n-bg); color: var(--n-app, #1e96e0); display: flex; align-items: center; justify-content: center; }
.tg-screen:is(.tga, .and) .nt-bdg svg { width: 10.5px; height: 9.5px; }
.tg-screen:is(.tga, .and) .nt-app { width: 40px; height: 40px; border-radius: 50%; background: var(--n-app, #1e96e0); color: #fff; display: flex; align-items: center; justify-content: center; }
.tg-screen:is(.tga, .and) .nt-app svg { width: 21px; height: 19px; margin-left: -2px; }
/* значки WhatsApp и Instagram — квадратные, без сдвига под самолётик */
.tg-screen:is(.tga, .and) .nt-bdg.sq svg { width: 11.5px; height: 11.5px; }
.tg-screen:is(.tga, .and) .nt-app.sq svg { width: 23px; height: 23px; margin-left: 0; }
.tg-screen:is(.tga, .and) .nt-h { position: absolute; left: 81px; right: 56px; top: 24.6px; display: flex; align-items: center; gap: 4.5px; font-size: 12.5px; line-height: 16px; white-space: nowrap; overflow: hidden; }
.tg-screen:is(.tga, .and) .nt-h b { font-weight: 400; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tg-screen:is(.tga, .and) .nt-h svg { flex: none; margin-left: 1px; }
.tg-screen:is(.tga, .and) .nt-t { position: absolute; left: 81px; right: 56px; top: 44.5px; font-size: 14px; line-height: 19px; color: var(--n-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-screen:is(.tga, .and) .nt-x { position: absolute; right: 16px; top: 31.6px; width: 23.6px; height: 23.6px; border-radius: 50%; background: var(--n-chev); color: var(--n-strong); display: flex; align-items: center; justify-content: center; }
.tg-screen:is(.tga, .and) .nt-a { position: absolute; left: 81px; right: 18px; top: 84px; height: 20px; display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 450; letter-spacing: .1px; color: var(--n-act); }
.tg-screen:is(.tga, .and) .nt-a svg { margin-left: auto; }
.tg-screen:is(.tga, .and) .nt-a span { white-space: nowrap; flex: none; }   /* длинные подписи («Als gelesen markieren») — в одну строку */
.tg-screen:is(.tga, .and) .a-nt svg { display: block; }

/* полоса жестов */
.tg-screen:is(.tga, .and) .a-home { position: absolute; left: 50%; bottom: 10.1px; z-index: 8; width: 108px; height: 3.8px; margin-left: -54px; border-radius: 2px; background: var(--a-home); }

/* карточка «Не в контактах» — по UserInfoCell из исходников Telegram для Android: скругление 16 dp, поля 14 / 16 dp,
   имя и подпись 14 sp, строки 12 sp высотой 14 dp через 7 dp, между ключом и значением 7.66 dp, сноска 12 sp */
.tg-screen.tga .nc-card-w { margin: 8px 0; }
.tg-screen.tga .nc-card { max-width: 95%; padding: 14px 16px 14px; border-radius: 16px; }
.tg-screen.tga .nc-name { font-size: 14px; font-weight: 500; line-height: 16.4px; letter-spacing: 0; }
.tg-screen.tga .nc-sub { font-size: 14px; line-height: 16.4px; margin-top: 3px; opacity: .7; }
.tg-screen.tga .nc-rows { margin-top: 11px; gap: 7px 7.66px; }
.tg-screen.tga .nc-kv span { font-size: 12px; line-height: 14px; opacity: .7; }
.tg-screen.tga .nc-kv b { font-size: 12px; line-height: 14px; font-weight: 500; }
.tg-screen.tga .nc-warn { margin: 12px 0 1.33px; gap: 5px; font-size: 12px; line-height: 14px; opacity: .7; }
.tg-screen.tga .nc-i { width: 13.2px; height: 13.2px; font-size: 9.5px; }
.tg-screen.tga .nc-warn { contain: none; white-space: nowrap; }
.tg-screen.tga .nc-card-w { transform: none !important; }   /* на Android карточка — обычная строка ленты, над первой датой; вверх, как в iOS, не поднимается */

/* полоса нового чата «Добавить · Заблокировать» (topChatPanelView): плашка 44 dp под шапкой */
.tg-screen.tga .a-nc { position: absolute; left: 6.9px; right: 6.9px; z-index: 6; height: 44px; border-radius: 22px; background: var(--a-pill); display: flex; align-items: center;
  box-shadow: 0 .5px 2.5px rgba(0,0,0,.16), 0 0 0 .33px rgba(0,0,0,.05); padding: 0 31px 0 0; box-sizing: border-box; }
.tg-screen.tga .a-nc-b { flex: 1; min-width: 0; height: 36px; margin: 0 4px; border-radius: 18px; display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-screen.tga .a-nc-b.add { color: var(--a-acc); background: color-mix(in srgb, var(--a-acc) 10%, transparent); }
.tg-screen.tga .a-nc-b.blk { color: #cc4747; background: rgba(204,71,71,.1); margin-left: 0; }
.tg-screen.tga.theme-dark .a-nc-b.blk { color: #e86a6a; background: rgba(232,106,106,.12); }
.tg-screen.tga .a-nc-x { position: absolute; right: 11px; top: 50%; margin-top: -7px; color: var(--a-ico, var(--a-sub)); display: flex; }
/* закреп (pinnedMessageView): плашка 48 dp, как полоса нового чата; размеры и цвета — из исходников и darkblue.attheme */
.tg-screen.tga .a-pin { position: absolute; left: 6.9px; right: 6.9px; z-index: 6; height: 48px; border-radius: 24px; background: var(--a-pill);
  box-shadow: 0 .5px 2.5px rgba(0,0,0,.16), 0 0 0 .33px rgba(0,0,0,.05); overflow: hidden; }
.tg-screen.tga .a-pin-l { position: absolute; left: 13.5px; top: 8px; bottom: 8px; width: 2px; border-radius: 1px; background: #3fa8ef; }
.tg-screen.tga .a-pin-t, .tg-screen.tga .a-pin-s { position: absolute; left: 23px; right: 44px; height: 18px; font-size: 14px; line-height: 18px; letter-spacing: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-screen.tga .a-pin-t { top: 7.3px; font-weight: 500; color: var(--a-acc); }
.tg-screen.tga .a-pin-s { top: 25.3px; color: #767e7c; }
.tg-screen.tga .a-pin-x { position: absolute; right: 2px; top: 0; width: 36px; height: 48px; display: flex; align-items: center; justify-content: center; color: #818786; }
.tg-screen.tga.theme-dark .a-pin-l { background: #5e9dd4; }
.tg-screen.tga.theme-dark .a-pin-s, .tg-screen.tga.theme-dark .a-pin-x { color: rgba(220,234,255,.43); }
/* кнопка «вниз»: кружок 44 dp того же стекла, что плашки шапки; счётчик — на его верхнем крае */
.tg-screen.tga .down-btn.a-down { right: 7px; width: 44px; height: 44px; background: var(--a-pill); color: var(--a-ico); -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 .5px 2.5px rgba(0,0,0,.16), 0 0 0 .33px rgba(0,0,0,.05); }
.tg-screen.tga .down-btn.a-down svg { margin-top: 2px; }
.tg-screen.tga .a-down-n { position: absolute; left: 50%; top: -11.5px; transform: translateX(-50%); min-width: 23px; height: 23px; padding: 0 5.5px; box-sizing: border-box; border-radius: 11.5px;
  background: #229af0; color: #fff; font-size: 13px; font-weight: 500; line-height: 23px; text-align: center; white-space: nowrap; }
.tg-screen.tga.theme-dark .a-down-n { background: #51aaee; }