/* ─────────────────────────────────────────────────────────────────────────────
   Макет экрана Telegram для КП · Нейрофактура
   Эталон: Telegram для iPhone, светлая тема по умолчанию («Классическая», dayClassic),
   обои по умолчанию, дизайн 2026 года (стеклянная шапка). Решение владельца — только iOS.
   Код свой, с нуля. Из исходников Telegram-iOS (GPL) взяты только значения — цвета и размеры.
   Префикс .tg- — чтобы не пересекаться с шаблоном КП. Подробности и таблица источников — README.md.

   Сокращения источников в комментариях:
     [iOS: файл]  — github.com/TelegramMessenger/Telegram-iOS, ветка master на 2026-09-21
     [ролик]      — официальный ролик core.telegram.org/bots/features, «Streaming Replies»
                    (reference/01-bot-chat-default.jpg), промер при 3 px = 1 pt
     [ролик-гр]   — официальные ролики с группой: reference/02-group-*.jpg
     [клав-2024]  — официальный кадр «Inline keyboard», reference/03-inline-keyboard-geometry.jpg
     [ролик-гс]   — официальный ролик блога telegram.org (ноябрь 2025) с входящим голосовым на теме
                    по умолчанию, reference/04-voice-incoming-default.jpg, 3 px = 1 pt
     оценка       — источника нет, значение подобрано на глаз по эталону
   Все размеры — в pt iPhone (1 pt = 1 CSS px при --tg-zoom: 1).
   ───────────────────────────────────────────────────────────────────────────── */

/* знак ✓ (подтверждения бота «✓ Сохранено.»): его нет ни в Inter, ни в эмодзи-шрифте, и браузер
   подставил бы системный шрифт — на Mac это SF (встраивать нельзя, см. README). Берём свободный
   Noto Sans Symbols 2 (OFL) — с Google Fonts отдаётся подмножество из одного знака */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Symbols+2&text=%E2%9C%93&display=swap');

.tg {
  /* ── масштаб: единственная ручка размера. Телефон при 1 — 426 × 898 px; при 0.72 — 307 × 647 px,
     при 0.62 — 264 × 557 px (рекомендации по размеру на слайде — README) */
  --tg-zoom: 0.72;

  /* ── шрифт. SF Pro во встраиваемый PDF не берём (лицензия Apple, см. README).
     Inter — ближайшая свободная замена, уже подключена в шаблоне КП (Google Fonts).
     Эмодзи: на Mac — Apple Color Emoji (как на iPhone; в PDF — растровые глифы 67 px), на Linux —
     Noto Color Emoji, если установлен (другой рисунок). Подробно — README, «Эмодзи в печати».
     system-ui в стеке нет намеренно: на Mac это SF, и любой знак, которого нет в Inter, ушёл бы в SF. */
  --tg-font: 'Inter', 'Apple Color Emoji', 'Noto Color Emoji', 'Noto Sans Symbols 2', sans-serif;

  /* ── экран и рамка */
  --tg-screen-w: 402px;          /* [ролик] экран 1206 px / 3; iPhone 16 Pro/17 Pro */
  --tg-screen-h: 874px;          /* iPhone 16 Pro, 402×874 pt — по памяти, не сверено; оценка */
  --tg-screen-r: 55px;           /* [ролик] радиус угла экрана ≈ 165 px / 3; оценка */
  --tg-bezel: 9px;               /* [ролик] чёрная рамка 25–27 px / 3 */
  --tg-bezel-color: #0b0b0c;     /* [ролик] #000100…#000300 */
  --tg-rim: 3px;                 /* металлический кант; на эталоне ≈ 9 pt с бликом — упрощено, оценка */
  --tg-rim-color: #c9c9cd;       /* [ролик] кант #888…#E9E9E9 — взят средний светлый, оценка */
  --tg-island-w: 124px;          /* [ролик] «островок» 372 px / 3 */
  --tg-island-h: 35px;           /* [ролик] 105 px / 3 */
  --tg-island-top: 15px;         /* [ролик] (174 − 129) px / 3 */

  /* ── обои по умолчанию: 4-цветный градиент (узор-дудлы Telegram не копируем, см. README) */
  --tg-wall-1: #dbddbb;          /* [iOS: DefaultDayPresentationTheme.swift] defaultBuiltinWallpaperGradientColors[0] */
  --tg-wall-2: #6ba587;          /* там же [1] */
  --tg-wall-3: #d5d88d;          /* там же [2] */
  --tg-wall-4: #88b884;          /* там же [3] */
  --tg-wall-base: #afc897;       /* среднее четырёх цветов, высветлено по [ролик]: там узор в режиме
                                    soft light поднимает светлоту; сетка 15 точек, см. README; оценка */

  /* ── пузыри */
  --tg-in-bg: #ffffff;           /* [iOS: DefaultDayPresentationTheme.swift] incoming bubble fill */
  --tg-out-bg: #e1ffc7;          /* там же, outgoing bubble fill; [ролик] #DFFDC4 после сжатия */
  --tg-text: #000000;            /* там же, primaryTextColor (in/out) */
  --tg-in-meta: #848484;         /* время входящего: в исходнике #525252 α0.6 (= #979797 на белом),
                                    на [ролик] темнее (#777 в сердцевине глифа; у ролика повышена резкость) — оценка */
  --tg-out-meta: rgba(0,140,9,.8);  /* [iOS] outgoing secondaryTextColor #008C09 α0.8 */
  --tg-check: rgba(0,140,9,.8);  /* [ролик] галочки того же цвета, что время; в исходнике
                                    outgoingCheckColor #19C700 — на ролике не подтверждается */
  --tg-link: #004bad;            /* [iOS] linkTextColor (in/out) */
  --tg-fs: 17px;                 /* [iOS: ComponentsThemes.swift] PresentationFontSize.regular = 17 */
  --tg-lh: 22px;                 /* [ролик] шаг строк 66 px / 3 */
  --tg-track: -0.4px;            /* трекинг Inter под ширину SF: без него строка на 5,5 % шире [ролик]
                                    (210 pt против 223 pt на одной и той же фразе); оценка */
  --tg-pad-y: 6px;               /* [iOS: ChatMessageItemCommon.swift] text bubbleInsets top 6+px, bottom 6−px */
  --tg-pad-x: 11px;              /* там же, left/right 11 */
  --tg-r: 16px;                  /* [iOS: PresentationThemeSettings.swift] chatBubbleSettings.mainRadius */
  --tg-r-small: 8px;             /* там же, auxiliaryRadius — стык с соседним пузырём и с кнопками */
  --tg-tail: 6px;                /* [iOS: ChatMessageBubbleImages.swift] innerSize.width = 33 + 6 */
  --tg-side: 6px;                /* [ролик] кончик хвостика в 6 pt от края экрана (тело — в 12,3 pt) */
  --tg-bubble-max: 318px;        /* [ролик]: строка 290 pt в пузырь помещается, 305 pt — уже нет, значит
                                    текст ≤ 296 + поля 22. По формуле [iOS: ChatMessageBubbleItemNode.swift]
                                    выходит 341–351 — с роликом не сходится, взят ролик; оценка */
  --tg-gap: 8px;                 /* [ролик] зазор между пузырями разных сторон 26 px / 3 ≈ 8,7 */
  --tg-gap-merged: 2px;          /* подряд от одного автора; [iOS] defaultSpacing 2 + px; оценка */

  /* ── время у пузыря */
  --tg-fs-meta: 11px;            /* [iOS: ChatMessageDateAndStatusNode.swift] floor(17 · 11 / 17) */
  --tg-meta-drop: 10px;          /* базовая линия времени на 3,3 pt ниже базовой текста — [ролик] */
  --tg-meta-gap: 10px;           /* минимальный зазор текст — время; оценка по [ролик] (13 pt при запасе) */

  /* ── группа: аватар и имя автора */
  --tg-ava: 34px;                /* [iOS: ChatMessageItemCommon.swift] avatarInset 34 + 4; [ролик-гр] 102 px / 3 */
  --tg-fs-name: 14px;            /* [iOS: ChatMessageBubbleItemNode.swift] floor(17 · 14 / 17), semibold */
  --tg-lh-name: 16px;            /* строка имени; верх заглавной имени в 9,0 pt от верха пузыря — как на [ролик-гр]
                                    (8,7–9,3 pt по четырём пузырям) */
  --tg-name-gap: 1px;            /* доп. отступ под именем: [ролик-гр] базовая линия имени → базовая линия текста
                                    21,3 pt, верх первой строки текста в 27,0–27,3 pt от верха пузыря (пузыри «Lena»
                                    reference/02-group-cinema-chat.jpg; «George», «Rachel», «Thomas» — ролик Member Tags,
                                    блог telegram.org, март 2026). Без него у нас было 20,3 pt — строка на 1 pt выше */

  /* ── кнопки под сообщением (inline keyboard) */
  --tg-btn-h: 42px;              /* [iOS: ChatMessageActionButtonsNode.swift] buttonHeight 42 */
  --tg-btn-gap: 4px;             /* [клав-2024] видимый зазор ≈ 4,4 pt (в коде spacing 2 + отступ фона) */
  --tg-kb-top: 4px;              /* [клав-2024] пузырь — первый ряд ≈ 4,6 pt; оценка */
  --tg-fs-btn: 16px;             /* [iOS] titleFont = Font.medium(16) */
  --tg-btn-text: #ffffff;        /* [iOS] actionButtonsTextColor */
  --tg-btn-bg: rgba(2,90,4,.3);  /* [iOS: WallpaperBackgroundNode.swift, SoftwareGradientBackground.swift]
                                    фон кнопки = тот же градиент обоев с насыщенностью ×1,7 и чёрным 20 %
                                    (dateFillStatic). Здесь — полупрозрачная заливка поверх обоев, подобрана
                                    по двум точкам формулы: на тёмных обоях совпадает, на светлых на ~20
                                    по сумме каналов темнее; сверено со служебной плашкой на [ролик-гр]
                                    (reference/02-group-travel-team-service.jpg), расхождение 19–24; оценка */

  /* ── шапка чата (дизайн 2026, «стекло») */
  --tg-head-top: 63px;           /* [ролик] верх кнопок шапки (318 − 129) px / 3 */
  --tg-head-h: 44px;             /* [ролик] кнопка «назад» и аватар 130–132 px / 3 */
  --tg-head-side: 16px;          /* [ролик] отступ кнопок от края экрана 48 px / 3 */
  --tg-title-min: 155px;         /* [ролик] ширина капсулы с коротким именем 466 px / 3 */
  --tg-title-pad: 16px;          /* [ролик-гр] капсула с длинной подписью: поля ≈ 16 pt */
  --tg-fs-title: 17px;           /* [ролик] высота «l» 38 px / 3 → 17 pt semibold */
  --tg-fs-sub: 12px;             /* [ролик] подпись «bot»: 12 pt — оценка по высоте «b» */
  --tg-title: #000000;           /* [iOS] rootNavigationBar.primaryTextColor */
  --tg-sub: #787878;             /* [iOS] rootNavigationBar.secondaryTextColor */
  --tg-glass: rgba(252,255,232,.72);      /* [ролик] капсула #EFF5D3–#F3F7D9 поверх обоев: стекло
                                    размывает и высветляет фон; без blur (он растрится в PDF) — плотная
                                    тёплая заливка под обои по умолчанию; оценка */
  --tg-glass-rim: rgba(255,255,255,.9);   /* [ролик] светлый ободок капсулы; оценка */
  --tg-chat-top: 124px;          /* [ролик] первый пузырь в (502 − 129) px / 3 от верха экрана */

  /* ── статус-бар */
  --tg-status-y: 39px;           /* [ролик] базовая линия времени (246 − 129) px / 3 */
  --tg-status-x: 53px;           /* [ролик] левый край времени (516 − 357) px / 3 */
  --tg-status-right: 31px;       /* [ролик] правый край батареи (1563 − 1470) px / 3 */
  --tg-fs-status: 17px;          /* [ролик] высота цифр 38 px / 3 → 17 pt semibold */

  /* ── поле ввода внизу (стеклянные капсулы) — оценка по кадрам [ролик], [ролик-гр] */
  --tg-input-h: 42px;
  --tg-input-bottom: 34px;       /* зона индикатора «домой»; оценка */
  --tg-input-side: 8px;
  --tg-placeholder: rgba(0,0,0,.4);  /* [iOS] inputPanel.inputPlaceholderColor */
  --tg-icon: #858e99;            /* [iOS] inputMediaPanel.panelIconColor */

  /* ── цвета имён и аватаров-букв (7 предустановок; какой у бота — зависит от его id) */
  --tg-name-red: #cc5049;    --tg-ava-red: #ff885e, #ff516a;       /* [iOS: PeerNameColors.swift], [iOS: AvatarNode.swift] */
  --tg-name-orange: #d67722; --tg-ava-orange: #ffcd6a, #ffa85c;
  --tg-name-violet: #955cdb; --tg-ava-violet: #82b1ff, #665fff;
  --tg-name-green: #40a920;  --tg-ava-green: #a0de7e, #54cb68;
  --tg-name-cyan: #309eba;   --tg-ava-cyan: #00fcfd, #4acccd;
  --tg-name-blue: #368ad1;   --tg-ava-blue: #72d5fd, #2a9ef1;
  --tg-name-pink: #c7508b;   --tg-ava-pink: #e0a2f3, #d669ed;

  /* ── голосовое сообщение (.tg-voice). [ролик-гс] — reference/04-voice-incoming-default.jpg, 3 px = 1 pt */
  --tg-voice-w: 228px;           /* пузырь записи ≥ 30 с без кнопки расшифровки. Ширина содержимого в iOS
                                    [ChatMessageInteractiveFileNode.swift]: 120 + (M − 120)·(d − 2)/28, d = 2…30 с,
                                    +38 с кнопкой расшифровки. [ролик-гс]: 0:21 с кнопкой → пузырь 237,7 pt; при полях
                                    10 + 10 pt выходит M ≈ 208 → 208 + 20 = 228; оценка */
  --tg-voice-h: 63px;            /* [ролик-гс] высота пузыря 190 px / 3 */
  --tg-voice-in: #0088ff;        /* [iOS] incoming mediaActiveControlColor (на [ролик-гс] #0078FE — ролик ноября
                                    2025; акцент 2026 года на [ролик] совпадает с исходником) */
  --tg-voice-out: #3fc33b;       /* [iOS] outgoing mediaActiveControlColor; кадра исходящего на теме по умолчанию нет */

  /* ── маркер «красного флага» — CSS-форма, не эмодзи */
  --tg-flag: #ff3b30;            /* [iOS] scamColor / системный красный iOS */

  /* подписи под экраном и фон слайда здесь не задаются: их верстают в деке (решение владельца) */

  zoom: var(--tg-zoom);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  font-family: var(--tg-font);
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0;
}
.tg *, .tg *::before, .tg *::after { box-sizing: border-box; }

/* ── рамка телефона: кант + чёрная рамка, без кнопок и логотипов ─────────────── */
.tg .tg-phone {
  position: relative;
  padding: var(--tg-bezel);
  border-radius: calc(var(--tg-screen-r) + var(--tg-bezel));
  background: var(--tg-bezel-color);
  border: var(--tg-rim) solid var(--tg-rim-color);
  flex: none;
}
.tg .tg-screen {
  position: relative;
  width: var(--tg-screen-w);
  height: var(--tg-screen-h);
  border-radius: var(--tg-screen-r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--tg-text);
  /* обои — картинка 3×, её делает render.py --wallpaper из четырёх цветовых пятен (формула там).
     Не градиентом в CSS: пятна уходят в прозрачность, Chromium печатает их заливкой с маской,
     и Preview на Mac рисует в ней чёрные клинья, а pdf.js (VS Code, Firefox) — розовое.
     Картинка без прозрачности во всех просмотрщиках одинакова (проверено 2026-09-22) */
  background: var(--tg-wall-base) url("wallpaper-default.jpg") center / 100% 100% no-repeat;
}
/* полоска «домой» внизу экрана — Apple HIG 134 × 5 pt, по памяти; оценка */
.tg .tg-screen::after {
  content: "";
  position: absolute;
  bottom: 8px;
  left: 50%;
  width: 134px;
  height: 5px;
  margin-left: -67px;
  border-radius: 3px;
  background: #000;
  z-index: 3;
}
/* «островок» вверху экрана */
.tg .tg-screen::before {
  content: "";
  position: absolute;
  top: var(--tg-island-top);
  left: 50%;
  width: var(--tg-island-w);
  height: var(--tg-island-h);
  margin-left: calc(var(--tg-island-w) / -2);
  border-radius: calc(var(--tg-island-h) / 2);
  background: #000;
  z-index: 3;
}

/* ── статус-бар ─────────────────────────────────────────────────────────────── */
.tg .tg-status {
  position: absolute;
  inset: 0 0 auto 0;
  height: 54px;
  z-index: 2;
}
.tg .tg-status-time {
  position: absolute;
  left: var(--tg-status-x);
  top: calc(var(--tg-status-y) - 16px);
  font-size: var(--tg-fs-status);
  font-weight: 600;
  line-height: 20px;
  letter-spacing: -0.2px;
}
/* сигнал, Wi-Fi, батарея — своя простая отрисовка */
.tg .tg-status-icons {
  position: absolute;
  right: var(--tg-status-right);
  top: calc(var(--tg-status-y) - 13px);
  width: 78px;
  height: 13px;
  /* своя отрисовка по промерам [ролик] (3 px = 1 pt): сеть — 4 столбика 3,2 pt, шаг 5,33, высоты
     4,67/7,33/10/12,33, скругление ≈ 0,9 pt; Wi-Fi 17,3 × 12,3 pt — две дуги по 2,67 pt с разрывом 1,33
     и клин 4,3 pt, сектора ±45° с общим центром в кончике клина; батарея 24,7 × 13 pt — контур 1 pt
     чёрный α.4, заливка 21 × 9 pt, «носик» 1,3 × 3,3 pt α.4 */
  background: no-repeat center / 78px 13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 234 39'%3E%3Cg fill='%23000'%3E%3Crect x='0.2' y='24' width='9.6' height='14' rx='3.2'/%3E%3Crect x='16.2' y='16' width='9.6' height='22' rx='3.2'/%3E%3Crect x='32.2' y='8' width='9.6' height='30' rx='3.2'/%3E%3Crect x='48.2' y='1' width='9.6' height='37' rx='3.2'/%3E%3Cpath d='M79.83 11.43A35.6 35.6 0 0 1 130.17 11.43L126.50 15.10A30.4 30.4 0 0 0 83.50 15.10Z M88.31 19.91A23.6 23.6 0 0 1 121.69 19.91L118.01 23.59A18.4 18.4 0 0 0 91.99 23.59Z M105 36.6L96.80 28.40A11.6 11.6 0 0 1 113.20 28.40Z' stroke='%23000' stroke-width='2.8' stroke-linejoin='round'/%3E%3Crect x='153.5' y='1.5' width='71' height='36' rx='11.5' fill='none' stroke='%23000' stroke-opacity='.4' stroke-width='3'/%3E%3Crect x='157.5' y='6' width='63' height='27' rx='7'/%3E%3Cpath d='M228.5 15h1.2a4 5 0 0 1 0 10h-1.2z' fill-opacity='.4'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── шапка чата: кнопка «назад», капсула с именем, аватар ─────────────────────── */
.tg .tg-head {
  position: absolute;
  top: var(--tg-head-top);
  left: var(--tg-head-side);
  right: var(--tg-head-side);
  height: var(--tg-head-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 2;
}
.tg .tg-back,
.tg .tg-head .tg-ava {
  width: var(--tg-head-h);
  height: var(--tg-head-h);
  border-radius: 50%;
  flex: none;
}
.tg .tg-back {
  position: relative;
  background: var(--tg-glass);
  border: 1px solid var(--tg-glass-rim);
}
/* шеврон «<» */
.tg .tg-back::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 14px;
  width: 13px;
  height: 13px;
  border-left: 3px solid #000;     /* [ролик] штрих ≈ 3 pt, шеврон 10 × 18 pt */
  border-bottom: 3px solid #000;
  border-radius: 1.5px;
  transform: rotate(45deg);
}
.tg .tg-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  min-width: var(--tg-title-min);
  max-width: 250px;
  height: var(--tg-head-h);
  padding: 0 var(--tg-title-pad);
  border-radius: calc(var(--tg-head-h) / 2);
  background: var(--tg-glass);
  border: 1px solid var(--tg-glass-rim);
  text-align: center;
  white-space: nowrap;
}
.tg .tg-title b {
  display: block;
  font-weight: 600;
  font-size: var(--tg-fs-title);
  line-height: 20px;
  margin-top: 5px;              /* базовая линия ≈ 20 pt от верха капсулы — [ролик] */
  letter-spacing: -0.45px;      /* ширина «TeleClaw» 70,7 pt как на [ролик] */
  color: var(--tg-title);
  overflow: hidden;
  text-overflow: ellipsis;
}
.tg .tg-title span {
  display: block;
  font-size: var(--tg-fs-sub);
  line-height: 14px;
  margin-top: 1px;              /* базовая линия ≈ 36 pt от верха капсулы — [ролик] */
  color: var(--tg-sub);
}
.tg .tg-head .tg-ava {
  font-size: 18px;
  border: 2px solid var(--tg-glass-rim);     /* [ролик] светлое кольцо вокруг аватара */
}

/* ── аватар-буква (в шапке и в группе) ──────────────────────────────────────── */
.tg .tg-ava {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-weight: 600;              /* в iOS — SF Pro Rounded Bold [iOS: AvatarNode.swift]; здесь Inter 600 —
                                    шаблон КП грузит Inter 400/500/600, 700 там нет */
  line-height: 1;
  background: linear-gradient(var(--tg-ava-violet)) no-repeat;
}
.tg .tg-ava--red { background: linear-gradient(var(--tg-ava-red)) no-repeat; }
.tg .tg-ava--orange { background: linear-gradient(var(--tg-ava-orange)) no-repeat; }
.tg .tg-ava--violet { background: linear-gradient(var(--tg-ava-violet)) no-repeat; }
.tg .tg-ava--green { background: linear-gradient(var(--tg-ava-green)) no-repeat; }
.tg .tg-ava--cyan { background: linear-gradient(var(--tg-ava-cyan)) no-repeat; }
.tg .tg-ava--blue { background: linear-gradient(var(--tg-ava-blue)) no-repeat; }
.tg .tg-ava--pink { background: linear-gradient(var(--tg-ava-pink)) no-repeat; }
/* аватар-картинка (логотип, фото): <span class="tg-ava tg-ava--img" style="--tg-ava-img:url(…)"></span>.
   SVG остаётся вектором в PDF; no-repeat обязателен (см. обои) */
.tg .tg-ava--img {
  background: var(--tg-ava-img) center / cover no-repeat;
  color: transparent;
}

/* ── лента сообщений: прижата к полю ввода, как в приложении ─────────────────── */
.tg .tg-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--tg-chat-top) 0 calc(var(--tg-input-bottom) + var(--tg-input-h) + 12px);
  font-size: var(--tg-fs);
  line-height: var(--tg-lh);
  letter-spacing: var(--tg-track);
}
/* .tg-chat--top — лента сверху, сразу под шапкой (если низ экрана пустой и его хочется обрезать) */
.tg .tg-chat--top { justify-content: flex-start; }

/* группа — подряд идущие сообщения одного автора */
.tg .tg-grp {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: var(--tg-bubble-max);
  margin-top: var(--tg-gap);
}
.tg .tg-grp:first-child { margin-top: 0; }
.tg .tg-in { align-self: flex-start; align-items: flex-start; margin-left: calc(var(--tg-side) + var(--tg-tail)); }
.tg .tg-out { align-self: flex-end;   align-items: flex-end;   margin-right: calc(var(--tg-side) + var(--tg-tail)); }
/* сообщение с кнопками в iOS всегда отдельная группа; кнопки — во всю ширину пузыря */
.tg .tg-grp:has(.tg-kb) { align-items: stretch; }

/* в группе входящие сдвинуты на аватар */
.tg .tg-screen--group .tg-in {
  margin-left: calc(var(--tg-side) + var(--tg-ava) + var(--tg-tail));
  max-width: calc(var(--tg-bubble-max) - var(--tg-ava) - 4px);
}
.tg .tg-grp > .tg-ava {
  position: absolute;
  left: calc(-1 * (var(--tg-ava) + var(--tg-tail)));
  bottom: 0;
  width: var(--tg-ava);
  height: var(--tg-ava);
  font-size: 15px;
}

/* ── пузырь ─────────────────────────────────────────────────────────────────── */
.tg .tg-msg {
  position: relative;
  display: flow-root;            /* держит плавающее время внутри */
  padding: var(--tg-pad-y) var(--tg-pad-x);
  border-radius: var(--tg-r);
  font-size: var(--tg-fs);
  line-height: var(--tg-lh);
  overflow-wrap: break-word;
  min-height: 35px;              /* [iOS] bubble.minimumSize.height 35 */
  min-width: 40px;               /* [iOS] bubble.minimumSize.width 40 */
}
.tg .tg-in  > .tg-msg { background: var(--tg-in-bg); }
.tg .tg-out > .tg-msg { background: var(--tg-out-bg); }
.tg .tg-grp > .tg-msg + .tg-msg { margin-top: var(--tg-gap-merged); }

/* стыки внутри группы: со стороны хвостика углы малые [iOS: ChatMessageBubbleImages.swift] */
.tg .tg-in  > .tg-msg:has(~ .tg-msg) { border-bottom-left-radius: var(--tg-r-small); }
.tg .tg-in  > .tg-msg + .tg-msg { border-top-left-radius: var(--tg-r-small); }
.tg .tg-out > .tg-msg:has(~ .tg-msg) { border-bottom-right-radius: var(--tg-r-small); }
.tg .tg-out > .tg-msg + .tg-msg { border-top-right-radius: var(--tg-r-small); }

/* хвостик — у последнего пузыря группы, если под ним нет кнопок.
   Форма из исходника: прямоугольник 6 × 8,5 pt у нижнего угла минус эллипс 11,5 × 10,5 pt
   с центром на продолжении края пузыря [iOS: ChatMessageBubbleImages.swift bottomEllipse/topEllipse].
   Рисуется SVG, а не radial-gradient к transparent: такой градиент pdf.js печатает розовым.
   Эллипс пересекает низ хвостика в 1,252 pt от края пузыря (6 − 1,252 = 4,748 у исходящего).
   Цвет зашит в SVG: #fff = --tg-in-bg, #e1ffc7 = --tg-out-bg — менять вместе */
.tg .tg-grp > .tg-msg:not(:has(~ .tg-msg, ~ .tg-kb))::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: var(--tg-tail);
  height: 8.5px;
}
.tg .tg-in > .tg-msg:not(:has(~ .tg-msg, ~ .tg-kb)) { border-bottom-left-radius: 0; }
.tg .tg-in > .tg-msg:not(:has(~ .tg-msg, ~ .tg-kb))::after {
  left: calc(-1 * var(--tg-tail));
  background: no-repeat center / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 8.5'%3E%3Cpath d='M6 0A11.5 10.5 0 0 1 1.252 8.5H6Z' fill='%23ffffff'/%3E%3C/svg%3E");
}
.tg .tg-out > .tg-msg:not(:has(~ .tg-msg, ~ .tg-kb)) { border-bottom-right-radius: 0; }
.tg .tg-out > .tg-msg:not(:has(~ .tg-msg, ~ .tg-kb))::after {
  right: calc(-1 * var(--tg-tail));
  background: no-repeat center / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 8.5'%3E%3Cpath d='M0 0A11.5 10.5 0 0 0 4.748 8.5H0Z' fill='%23e1ffc7'/%3E%3C/svg%3E");
}
/* пузырь над кнопками: без хвостика, нижние углы малые [iOS: ChatMessageBubbleItemNode.swift forceBackgroundSide] */
.tg .tg-grp > .tg-msg:has(+ .tg-kb) {
  border-bottom-left-radius: var(--tg-r-small);
  border-bottom-right-radius: var(--tg-r-small);
}

/* имя автора в группе — над текстом первого пузыря */
.tg .tg-name {
  display: block;
  font-size: var(--tg-fs-name);
  line-height: var(--tg-lh-name);
  margin-bottom: var(--tg-name-gap);
  font-weight: 600;
  letter-spacing: -0.1px;
  color: var(--tg-name-violet);
}
.tg .tg-name--red { color: var(--tg-name-red); }
.tg .tg-name--orange { color: var(--tg-name-orange); }
.tg .tg-name--violet { color: var(--tg-name-violet); }
.tg .tg-name--green { color: var(--tg-name-green); }
.tg .tg-name--cyan { color: var(--tg-name-cyan); }
.tg .tg-name--blue { color: var(--tg-name-blue); }
.tg .tg-name--pink { color: var(--tg-name-pink); }

/* ссылка в тексте */
.tg .tg-link { color: var(--tg-link); text-decoration: none; }
/* жирное в сообщении (<b>): в iOS Font.bold(17) [ChatPresentationData.swift]; Inter 600 — шаблон КП
   грузит 400/500/600, явный вес не даёт браузеру подставлять синтетический полужирный */
.tg .tg-msg b { font-weight: 600; }

/* маркер «красного флага»: кружок перед текстом */
.tg .tg-flag {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin: 0 5px 0 1px;
  border-radius: 50%;
  background: var(--tg-flag);
  vertical-align: 0;
}

/* ── время и галочки: справа внизу; не влезает в последнюю строку — уходит ниже ── */
.tg .tg-meta {
  float: right;
  position: relative;
  margin: var(--tg-meta-drop) -2px -4px var(--tg-meta-gap);
  font-size: var(--tg-fs-meta);
  line-height: 13px;
  letter-spacing: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tg .tg-in  .tg-meta { color: var(--tg-in-meta); }
.tg .tg-out .tg-meta { color: var(--tg-out-meta); }
/* двойная галочка «прочитано» — своя отрисовка, цвет из --tg-check через mask нельзя (растр в PDF),
   поэтому цвет зашит в SVG: #008C09 с прозрачностью .8 — поменять вместе с --tg-check */
.tg .tg-check {
  display: inline-block;
  width: 16px;
  height: 11px;
  margin-left: 3px;
  vertical-align: -1px;
  background: no-repeat center / 16px 11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Cg fill='none' stroke='%23008C09' stroke-opacity='.8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6.2l2.9 3.1L10 1.6'/%3E%3Cpath d='M7.6 8.6l.7.7L14.4 1.6'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── кнопки под сообщением бота (inline keyboard) ────────────────────────────── */
.tg .tg-kb {
  display: flex;
  flex-direction: column;
  gap: var(--tg-btn-gap);
  margin-top: var(--tg-kb-top);
}
.tg .tg-kb-row {
  display: flex;
  gap: var(--tg-btn-gap);
}
.tg .tg-btn {
  flex: 1 1 0;
  min-width: 0;
  height: var(--tg-btn-h);
  padding: 0 8px;                /* [iOS] sideInset 8 */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--tg-r-small);
  background: var(--tg-btn-bg);
  color: var(--tg-btn-text);
  font-size: var(--tg-fs-btn);
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* нижние внешние углы последнего ряда — большие [iOS: ChatMessageActionButtonsNode.swift bottomLeft/Right] */
.tg .tg-kb-row:last-child .tg-btn:first-child { border-bottom-left-radius: var(--tg-r); }
.tg .tg-kb-row:last-child .tg-btn:last-child { border-bottom-right-radius: var(--tg-r); }

/* ── голосовое сообщение ──────────────────────────────────────────────────────
   <div class="tg-msg tg-voice"> внутри .tg-grp.tg-in или .tg-out:
     .tg-voice-play · .tg-voice-wave · .tg-voice-dur (длительность) · .tg-meta (время, галочки)
   Модификаторы: .tg-voice--unread — не прослушано (точка у длительности; у входящего дорожка синяя),
   .tg-voice--tr — кнопка расшифровки «→A» (+ <span class="tg-voice-tr"></span>).
   Раскладка [iOS: ChatMessageInteractiveFileNode.swift] и [ролик-гс]: кнопка 44 pt в 10 pt от левого и
   верхнего края; дорожка с x 64 pt (10 pt после кнопки), полоса 18 pt, низ в 29 pt от верха; длительность
   11 pt с x 63 pt, базовая линия в 46,7 pt; время — справа внизу, как у текста. */
.tg .tg-msg.tg-voice {
  width: var(--tg-voice-w);
  height: var(--tg-voice-h);
  min-height: 0;
  padding: 0;
}
.tg .tg-voice-play {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 44px;
  height: 44px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Ccircle cx='22' cy='22' r='22' fill='%230088ff'/%3E%3Cpath d='M16.65 13.65L29.95 21.3L16.65 28.95Z' fill='%23ffffff' stroke='%23ffffff' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 44px 44px;
}
.tg .tg-out .tg-voice-play {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Ccircle cx='22' cy='22' r='22' fill='%233fc33b'/%3E%3Cpath d='M16.65 13.65L29.95 21.3L16.65 28.95Z' fill='%23e1ffc7' stroke='%23e1ffc7' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* дорожка: SVG-столбики 2 pt с шагом 4 pt, высоты заданы в wave.py; ширина полосы округляется вниз до
   целого числа столбиков, как в iOS (numSamples = floor(ширина / 4)) */
.tg .tg-voice-wave {
  position: absolute;
  left: 64px;
  top: 11px;
  height: 18px;
  width: round(down, calc(var(--tg-voice-w) - 74px), 4px);
  overflow: hidden;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 18'%3E%3Cg fill='%23cacaca'%3E%3Crect x='0' y='15' width='2' height='3' rx='1'/%3E%3Crect x='4' y='12' width='2' height='6' rx='1'/%3E%3Crect x='8' y='8' width='2' height='10' rx='1'/%3E%3Crect x='12' y='11' width='2' height='7' rx='1'/%3E%3Crect x='16' y='6' width='2' height='12' rx='1'/%3E%3Crect x='20' y='3' width='2' height='15' rx='1'/%3E%3Crect x='24' y='9' width='2' height='9' rx='1'/%3E%3Crect x='28' y='13' width='2' height='5' rx='1'/%3E%3Crect x='32' y='10' width='2' height='8' rx='1'/%3E%3Crect x='36' y='5' width='2' height='13' rx='1'/%3E%3Crect x='40' y='2' width='2' height='16' rx='1'/%3E%3Crect x='44' y='7' width='2' height='11' rx='1'/%3E%3Crect x='48' y='12' width='2' height='6' rx='1'/%3E%3Crect x='52' y='15' width='2' height='3' rx='1'/%3E%3Crect x='56' y='16' width='2' height='2' rx='1'/%3E%3Crect x='60' y='11' width='2' height='7' rx='1'/%3E%3Crect x='64' y='7' width='2' height='11' rx='1'/%3E%3Crect x='68' y='4' width='2' height='14' rx='1'/%3E%3Crect x='72' y='8' width='2' height='10' rx='1'/%3E%3Crect x='76' y='12' width='2' height='6' rx='1'/%3E%3Crect x='80' y='9' width='2' height='9' rx='1'/%3E%3Crect x='84' y='6' width='2' height='12' rx='1'/%3E%3Crect x='88' y='10' width='2' height='8' rx='1'/%3E%3Crect x='92' y='14' width='2' height='4' rx='1'/%3E%3Crect x='96' y='12' width='2' height='6' rx='1'/%3E%3Crect x='100' y='8' width='2' height='10' rx='1'/%3E%3Crect x='104' y='3' width='2' height='15' rx='1'/%3E%3Crect x='108' y='6' width='2' height='12' rx='1'/%3E%3Crect x='112' y='11' width='2' height='7' rx='1'/%3E%3Crect x='116' y='13' width='2' height='5' rx='1'/%3E%3Crect x='120' y='9' width='2' height='9' rx='1'/%3E%3Crect x='124' y='5' width='2' height='13' rx='1'/%3E%3Crect x='128' y='7' width='2' height='11' rx='1'/%3E%3Crect x='132' y='12' width='2' height='6' rx='1'/%3E%3Crect x='136' y='15' width='2' height='3' rx='1'/%3E%3Crect x='140' y='16' width='2' height='2' rx='1'/%3E%3Crect x='144' y='13' width='2' height='5' rx='1'/%3E%3Crect x='148' y='10' width='2' height='8' rx='1'/%3E%3Crect x='152' y='12' width='2' height='6' rx='1'/%3E%3Crect x='156' y='14' width='2' height='4' rx='1'/%3E%3C/g%3E%3C/svg%3E") no-repeat left bottom / auto 18px;
}
.tg .tg-in .tg-voice--unread .tg-voice-wave {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 18'%3E%3Cg fill='%230088ff'%3E%3Crect x='0' y='15' width='2' height='3' rx='1'/%3E%3Crect x='4' y='12' width='2' height='6' rx='1'/%3E%3Crect x='8' y='8' width='2' height='10' rx='1'/%3E%3Crect x='12' y='11' width='2' height='7' rx='1'/%3E%3Crect x='16' y='6' width='2' height='12' rx='1'/%3E%3Crect x='20' y='3' width='2' height='15' rx='1'/%3E%3Crect x='24' y='9' width='2' height='9' rx='1'/%3E%3Crect x='28' y='13' width='2' height='5' rx='1'/%3E%3Crect x='32' y='10' width='2' height='8' rx='1'/%3E%3Crect x='36' y='5' width='2' height='13' rx='1'/%3E%3Crect x='40' y='2' width='2' height='16' rx='1'/%3E%3Crect x='44' y='7' width='2' height='11' rx='1'/%3E%3Crect x='48' y='12' width='2' height='6' rx='1'/%3E%3Crect x='52' y='15' width='2' height='3' rx='1'/%3E%3Crect x='56' y='16' width='2' height='2' rx='1'/%3E%3Crect x='60' y='11' width='2' height='7' rx='1'/%3E%3Crect x='64' y='7' width='2' height='11' rx='1'/%3E%3Crect x='68' y='4' width='2' height='14' rx='1'/%3E%3Crect x='72' y='8' width='2' height='10' rx='1'/%3E%3Crect x='76' y='12' width='2' height='6' rx='1'/%3E%3Crect x='80' y='9' width='2' height='9' rx='1'/%3E%3Crect x='84' y='6' width='2' height='12' rx='1'/%3E%3Crect x='88' y='10' width='2' height='8' rx='1'/%3E%3Crect x='92' y='14' width='2' height='4' rx='1'/%3E%3Crect x='96' y='12' width='2' height='6' rx='1'/%3E%3Crect x='100' y='8' width='2' height='10' rx='1'/%3E%3Crect x='104' y='3' width='2' height='15' rx='1'/%3E%3Crect x='108' y='6' width='2' height='12' rx='1'/%3E%3Crect x='112' y='11' width='2' height='7' rx='1'/%3E%3Crect x='116' y='13' width='2' height='5' rx='1'/%3E%3Crect x='120' y='9' width='2' height='9' rx='1'/%3E%3Crect x='124' y='5' width='2' height='13' rx='1'/%3E%3Crect x='128' y='7' width='2' height='11' rx='1'/%3E%3Crect x='132' y='12' width='2' height='6' rx='1'/%3E%3Crect x='136' y='15' width='2' height='3' rx='1'/%3E%3Crect x='140' y='16' width='2' height='2' rx='1'/%3E%3Crect x='144' y='13' width='2' height='5' rx='1'/%3E%3Crect x='148' y='10' width='2' height='8' rx='1'/%3E%3Crect x='152' y='12' width='2' height='6' rx='1'/%3E%3Crect x='156' y='14' width='2' height='4' rx='1'/%3E%3C/g%3E%3C/svg%3E");
}
.tg .tg-out .tg-voice-wave {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 18'%3E%3Cg fill='%2393d987'%3E%3Crect x='0' y='15' width='2' height='3' rx='1'/%3E%3Crect x='4' y='12' width='2' height='6' rx='1'/%3E%3Crect x='8' y='8' width='2' height='10' rx='1'/%3E%3Crect x='12' y='11' width='2' height='7' rx='1'/%3E%3Crect x='16' y='6' width='2' height='12' rx='1'/%3E%3Crect x='20' y='3' width='2' height='15' rx='1'/%3E%3Crect x='24' y='9' width='2' height='9' rx='1'/%3E%3Crect x='28' y='13' width='2' height='5' rx='1'/%3E%3Crect x='32' y='10' width='2' height='8' rx='1'/%3E%3Crect x='36' y='5' width='2' height='13' rx='1'/%3E%3Crect x='40' y='2' width='2' height='16' rx='1'/%3E%3Crect x='44' y='7' width='2' height='11' rx='1'/%3E%3Crect x='48' y='12' width='2' height='6' rx='1'/%3E%3Crect x='52' y='15' width='2' height='3' rx='1'/%3E%3Crect x='56' y='16' width='2' height='2' rx='1'/%3E%3Crect x='60' y='11' width='2' height='7' rx='1'/%3E%3Crect x='64' y='7' width='2' height='11' rx='1'/%3E%3Crect x='68' y='4' width='2' height='14' rx='1'/%3E%3Crect x='72' y='8' width='2' height='10' rx='1'/%3E%3Crect x='76' y='12' width='2' height='6' rx='1'/%3E%3Crect x='80' y='9' width='2' height='9' rx='1'/%3E%3Crect x='84' y='6' width='2' height='12' rx='1'/%3E%3Crect x='88' y='10' width='2' height='8' rx='1'/%3E%3Crect x='92' y='14' width='2' height='4' rx='1'/%3E%3Crect x='96' y='12' width='2' height='6' rx='1'/%3E%3Crect x='100' y='8' width='2' height='10' rx='1'/%3E%3Crect x='104' y='3' width='2' height='15' rx='1'/%3E%3Crect x='108' y='6' width='2' height='12' rx='1'/%3E%3Crect x='112' y='11' width='2' height='7' rx='1'/%3E%3Crect x='116' y='13' width='2' height='5' rx='1'/%3E%3Crect x='120' y='9' width='2' height='9' rx='1'/%3E%3Crect x='124' y='5' width='2' height='13' rx='1'/%3E%3Crect x='128' y='7' width='2' height='11' rx='1'/%3E%3Crect x='132' y='12' width='2' height='6' rx='1'/%3E%3Crect x='136' y='15' width='2' height='3' rx='1'/%3E%3Crect x='140' y='16' width='2' height='2' rx='1'/%3E%3Crect x='144' y='13' width='2' height='5' rx='1'/%3E%3Crect x='148' y='10' width='2' height='8' rx='1'/%3E%3Crect x='152' y='12' width='2' height='6' rx='1'/%3E%3Crect x='156' y='14' width='2' height='4' rx='1'/%3E%3C/g%3E%3C/svg%3E");
}
.tg .tg-voice--tr .tg-voice-wave {
  width: round(down, calc(var(--tg-voice-w) - 108px), 4px);   /* минус кнопка 30 + 4 [iOS] */
}
.tg .tg-voice-dur {
  position: absolute;
  left: 63px;
  top: 36px;
  font-size: var(--tg-fs-meta);
  line-height: 13px;
  letter-spacing: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--tg-in-meta);        /* [iOS] fileDurationColor = цвет времени */
}
.tg .tg-out .tg-voice-dur { color: var(--tg-out-meta); }
/* точка «не прослушано»: +5 pt от длительности [iOS]; ⌀ ≈ 3,7 pt [ролик-гс] */
.tg .tg-voice--unread .tg-voice-dur::after {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-left: 5px;
  border-radius: 50%;
  vertical-align: 2px;
  background: var(--tg-voice-in);
}
.tg .tg-out .tg-voice--unread .tg-voice-dur::after { background: var(--tg-voice-out); }   /* оценка */
.tg .tg-voice .tg-meta {
  position: absolute;
  right: 9px;
  bottom: 5px;
  float: none;
  margin: 0;
}
/* кнопка расшифровки 30 × 30 pt в 8 pt от верха и правого края [ролик-гс]. Без Premium iOS показывает её
   только у входящих (пробные расшифровки) [iOS: ChatMessageInteractiveFileNode.swift displayTranscribe] */
.tg .tg-voice-tr {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 30px;
  height: 30px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Crect width='30' height='30' rx='8' fill='%230088ff' fill-opacity='.12'/%3E%3Cg fill='none' stroke='%230088ff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 15h7.5M11 12l3 3-3 3'/%3E%3Cpath d='M16.5 20l3.5-10 3.5 10M17.7 16.8h4.6'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / 30px 30px;
}

/* ── поле ввода: скрепка · капсула «Сообщение» · микрофон ─────────────────────── */
.tg .tg-input {
  position: absolute;
  left: var(--tg-input-side);
  right: var(--tg-input-side);
  bottom: var(--tg-input-bottom);
  height: var(--tg-input-h);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 2;
}
.tg .tg-input i {
  flex: none;
  width: var(--tg-input-h);
  height: var(--tg-input-h);
  border-radius: 50%;
  background-color: var(--tg-glass);
  border: 1px solid var(--tg-glass-rim);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
}
.tg .tg-input-field {
  position: relative;
  flex: 1;
  height: var(--tg-input-h);
  border-radius: calc(var(--tg-input-h) / 2);
  background: var(--tg-glass);
  border: 1px solid var(--tg-glass-rim);
  padding: 0 44px 0 16px;
  font-size: var(--tg-fs);
  line-height: calc(var(--tg-input-h) - 2px);
  letter-spacing: var(--tg-track);
  color: var(--tg-placeholder);
}
/* значок стикеров внутри капсулы */
.tg .tg-input-field::after {
  content: "";
  position: absolute;
  right: 11px;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  background: no-repeat center / 22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M20 11.5A8.5 8.5 0 1 1 10.5 2h3.2A6.3 6.3 0 0 0 20 8.3z' fill='none' stroke='%23858E99' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M13.7 2A6.3 6.3 0 0 0 20 8.3' fill='none' stroke='%23858E99' stroke-width='1.6'/%3E%3C/svg%3E");
}
.tg .tg-attach {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.5 11.2l-7.4 7.4a4.6 4.6 0 0 1-6.5-6.5l7.8-7.8a3.1 3.1 0 0 1 4.4 4.4l-7.6 7.6a1.5 1.5 0 0 1-2.2-2.2l6.9-6.9' fill='none' stroke='%23858E99' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.tg .tg-mic {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23858E99' stroke-width='1.7' stroke-linecap='round'%3E%3Crect x='8.6' y='2.6' width='6.8' height='12' rx='3.4'/%3E%3Cpath d='M5.2 11.4a6.8 6.8 0 0 0 13.6 0M12 18.2v3'/%3E%3C/g%3E%3C/svg%3E");
}