/* =====================================================================
   АРЕНДА САМУИ — Telegram Night UI
   Лендинг оформлен как лента Telegram-канала в тёмной теме приложения.
   ===================================================================== */

:root {
  --bg: #0E1621;            /* фон приложения */
  --bg-deep: #0A111A;
  --surface: #17212B;       /* входящие сообщения, карточки */
  --surface-2: #1F2B38;     /* приподнятые элементы, ховеры */
  --out-1: #2B5278;         /* исходящие сообщения (градиент) */
  --out-2: #38699C;
  --ink: #F2F6FA;
  --muted: #8DA1B4;
  --faint: #5F7285;
  --line: rgba(255, 255, 255, .07);
  --accent: #5EB5F7;        /* ссылки, inline-кнопки */
  --tg-1: #2AABEE;          /* фирменный градиент CTA */
  --tg-2: #1E96D1;
  --ok: #4FCE5D;            /* «online» */
  --amber: #F7B84B;         /* ценовые акценты */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --r-bubble: 18px;
  --r-card: 20px;
  --r-btn: 12px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-2: 0 8px 28px rgba(0, 0, 0, .38);
  --glow: 0 6px 22px rgba(42, 171, 238, .38);
  --composer-h: 74px;
  /* Читабельная колонка ленты (чат, тексты) и широкий контейнер лендинга */
  --col: 840px;
  --wide: 1160px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  /* Фирменный «телеграмный» фон чата: дудлы, скроллятся вместе с лентой */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='rgba(140,190,235,0.045)' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 45 L74 28 L58 72 L46 56 Z M46 56 L74 28'/%3E%3Cpath d='M186 96 C180 78 180 62 188 48 M188 48 C172 40 160 44 152 54 M188 48 C184 32 174 24 162 22 M188 48 C200 34 214 32 224 38 M188 48 C204 44 214 52 218 64'/%3E%3Ccircle cx='196' cy='56' r='3'/%3E%3Ccircle cx='60' cy='150' r='13'/%3E%3Cpath d='M60 128 L60 122 M60 178 L60 172 M82 150 L88 150 M32 150 L38 150 M76 134 L80 130 M40 170 L44 166 M76 166 L80 170 M40 130 L44 134'/%3E%3Cpath d='M118 182 q10 -12 20 0 q10 12 20 0 q10 -12 20 0 q10 12 20 0'/%3E%3Cpath d='M212 122 L248 122 L230 146 Z M230 146 L230 164 M220 164 L240 164 M236 116 L244 104'/%3E%3Cpath d='M22 226 c0 -9 7 -15 15 -15 c8 0 15 6 15 15 c0 9 -15 23 -15 23 c0 0 -15 -14 -15 -23 Z'/%3E%3Ccircle cx='37' cy='226' r='4'/%3E%3C/g%3E%3C/svg%3E") repeat,
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 700px) no-repeat;
  background-color: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
  padding-bottom: calc(var(--composer-h) + env(safe-area-inset-bottom, 0px) + 14px);
}

img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: none; }
b, strong { font-weight: 700; }

.feed { max-width: var(--col); margin: 0 auto; padding: 0 14px; }
.wide { max-width: var(--wide); margin: 0 auto; padding: 0 14px; }

h1, h2, h3 { line-height: 1.22; letter-spacing: -.015em; }

/* =====================  ШАПКА ЧАТА  ===================== */

.chat-top {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #101824;
  border-bottom: 1px solid var(--line);
}

.chat-top__in {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Логотип: знак-пальма + домен */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: inherit;
}
.brand__mark {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 12px;
  box-shadow: var(--shadow-1);
}
.brand__name {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.01em;
  display: block;
  white-space: nowrap;
}
.brand__name i, .tld { font-style: normal; color: var(--amber); }

.chat-top__names { min-width: 0; line-height: 1.25; }
.status { font-size: 13px; color: var(--accent); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.status::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(79, 206, 93, .16);
}

.chat-top__cta {
  margin-left: auto;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--tg-1), var(--tg-2));
  box-shadow: var(--glow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.chat-top__cta:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(42, 171, 238, .5); }
.chat-top__cta svg { width: 16px; height: 16px; }
.chat-top__cta span { display: none; }
@media (min-width: 480px) { .chat-top__cta span { display: inline; } }

/* Закреплённое сообщение — кликабельное, ведёт в бота */
.pin-bar {
  display: block;
  border-bottom: 1px solid var(--line);
  background: rgba(23, 33, 43, .6);
  transition: background .15s;
}
.pin-bar:hover { background: rgba(31, 43, 56, .8); }
.pin-bar__in {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 7px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--muted);
  overflow: hidden;
  white-space: nowrap;
}
.pin-bar__in > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.pin-bar__go { color: var(--accent); font-weight: 700; }
.pin-bar__in b { color: var(--amber); font-weight: 600; }
.pin-bar__flag { color: var(--accent); flex: none; }

/* Навигация-чипы */
.nav-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 14px;
  max-width: var(--wide);
  margin: 0 auto;
  scrollbar-width: none;
}
.nav-chips::-webkit-scrollbar { display: none; }
@media (min-width: 760px) { .nav-chips { flex-wrap: wrap; overflow: visible; } }
.nav-chips a {
  flex: none;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  transition: color .15s, background .15s;
}
.nav-chips a:hover { color: var(--ink); background: var(--surface-2); }
.nav-chips a.on { color: #fff; background: var(--out-1); border-color: transparent; }

/* =====================  СИСТЕМНЫЕ СООБЩЕНИЯ / ЛЕНТА  ===================== */

.sysmsg {
  display: flex;
  justify-content: center;
  margin: 26px 0 14px;
}
.sysmsg span {
  font-size: 13.5px;
  font-weight: 600;
  color: #CFE3F5;
  background: rgba(23, 33, 43, .78);
  border: 1px solid var(--line);
  padding: 6px 16px;
  border-radius: 999px;
  box-shadow: var(--shadow-1);
}

/* Пузыри сообщений */
.msg {
  position: relative;
  max-width: 92%;
  border-radius: var(--r-bubble);
  padding: 14px 16px;
  margin: 10px 0;
  box-shadow: var(--shadow-1);
  font-size: 15.5px;
}
.msg--in {
  background: var(--surface);
  border-bottom-left-radius: 6px;
  margin-right: auto;
}
.msg--out {
  background: linear-gradient(135deg, var(--out-1), var(--out-2));
  border-bottom-right-radius: 6px;
  margin-left: auto;
}
.msg-meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--faint);
  margin-top: 6px;
}
.msg--out .msg-meta { color: rgba(210, 235, 255, .75); }
.check { color: #6FC2F5; font-weight: 700; letter-spacing: -.18em; padding-right: .18em; }

.msg-name { font-size: 13.5px; font-weight: 700; color: var(--accent); margin-bottom: 4px; }

/* Реакции */
.reactions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.reactions span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: #BFD8EE;
  background: rgba(94, 181, 247, .13);
  border: 1px solid rgba(94, 181, 247, .18);
  padding: 5px 12px;
  border-radius: 999px;
}

/* Inline-клавиатура бота */
.kb { display: grid; gap: 6px; margin-top: 10px; }
.kb-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  padding: 13px 18px;
  border-radius: var(--r-btn);
  font-size: 15.5px;
  font-weight: 700;
  text-align: center;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.kb-btn:active { transform: scale(.985); }
.kb-btn--primary {
  color: #fff;
  background: linear-gradient(135deg, var(--tg-1), var(--tg-2));
  box-shadow: var(--glow);
  position: relative;
  overflow: hidden;
}
.kb-btn--primary::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 42%;
  left: -60%;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent);
  animation: sheen 3.6s ease-in-out infinite;
}
@keyframes sheen {
  0%, 55% { left: -60%; }
  80%, 100% { left: 130%; }
}
.kb-btn--primary:hover { box-shadow: 0 10px 28px rgba(42, 171, 238, .52); transform: translateY(-1px); }
.kb-btn--ghost {
  color: var(--accent);
  background: rgba(94, 181, 247, .1);
  border: 1px solid rgba(94, 181, 247, .22);
}
.kb-btn--ghost:hover { background: rgba(94, 181, 247, .17); }
.kb-btn svg { width: 18px; height: 18px; flex: none; }

/* =====================  ХИРО  ===================== */

/* Хиро-лендинг: на мобильных — лента (текст, фото, кнопки),
   на десктопе — две колонки: слева текст и CTA, справа фото */
.hero {
  display: grid;
  gap: 0 28px;
  grid-template-areas: "htext" "hmedia" "hactions";
}
.hero__text { grid-area: htext; }
.hero .hero-media { grid-area: hmedia; }
.hero__actions { grid-area: hactions; }
@media (min-width: 1000px) {
  .hero {
    grid-template-columns: 1.06fr 1fr;
    grid-template-areas: "htext hmedia" "hactions hmedia";
    align-items: start;
  }
  .hero .msg { max-width: 100%; }
  .hero .hero-media {
    height: calc(100% - 20px);
    display: flex;
    flex-direction: column;
  }
  .hero .hero-media__wrap { flex: 1; min-height: 0; display: flex; }
  .hero .hero-media img {
    flex: 1;
    min-height: 0;
    height: 100%;
    max-height: none;
    object-fit: cover;
  }
  .hero__actions .kb { max-width: 540px; }
}

.hero-msg h1 {
  font-size: clamp(26px, 3.4vw, 44px);
  font-weight: 800;
  margin: 2px 0 10px;
}
.hero-msg h1 em { font-style: normal; color: var(--amber); }
.hero-msg p.lead { color: #C6D6E4; font-size: clamp(15.5px, 2.5vw, 17.5px); }

.hero-media {
  padding: 0;
  overflow: hidden;
  max-width: 100%;
}
.hero-media__wrap { position: relative; }
.hero-media img { width: 100%; height: auto; }
@media (min-width: 760px) {
  /* На больших экранах фото-сообщение не выше «экрана чата»,
     а отдельные CTA-кнопки — компактные, по центру колонки */
  .hero-media img { max-height: 470px; object-fit: cover; }
  .feed > .kb { max-width: 540px; margin-left: auto; margin-right: auto; }
}
.hero-media figcaption { padding: 12px 16px 14px; font-size: 15px; color: #C6D6E4; }
.hero-media figcaption b { color: var(--ink); }

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 2px;
}
.trust-row span {
  font-size: 13.5px;
  font-weight: 600;
  color: #CFE3F5;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 13px;
}

/* =====================  КАТАЛОГ  ===================== */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
  margin: 18px 0 6px;
}

.card {
  background: var(--surface);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }

.card__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.card:hover .card__media img { transform: scale(1.05); }

.price-chip {
  position: absolute;
  left: 10px;
  top: 10px;
  display: flex;
  align-items: baseline;
  gap: 7px;
  background: rgba(8, 14, 22, .8);
  border-radius: 10px;
  padding: 7px 11px;
  color: #FFC46B;
  font-weight: 800;
  font-size: 15.5px;
  border: 1px solid rgba(255, 255, 255, .1);
}
.price-chip small { font-weight: 500; font-size: 12px; color: #BFD8EE; }

.views-chip {
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-size: 12px;
  color: #DCEBF7;
  background: rgba(8, 14, 22, .6);
  border-radius: 999px;
  padding: 4px 10px;
}

.card__body { padding: 14px 15px 15px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.card__body h3 { font-size: 16.5px; font-weight: 700; }
.card__geo { font-size: 13.5px; color: var(--muted); }
.card__geo b { color: #CFE3F5; font-weight: 600; }
.card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.card__tags span {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface-2);
  border-radius: 7px;
  padding: 4px 9px;
}
.card .kb { margin-top: auto; }
.card .kb-btn { min-height: 46px; font-size: 14.5px; }

/* =====================  ПРЕИМУЩЕСТВА  ===================== */

.benefits {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 18px 0 6px;
}
@media (min-width: 640px) { .benefits { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) {
  .benefits { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .benefit { flex-direction: column; gap: 12px; padding: 20px 18px; }
}

.benefit {
  display: flex;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 16px;
  box-shadow: var(--shadow-1);
}
.benefit__ic {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 23px;
  background: linear-gradient(135deg, rgba(42, 171, 238, .2), rgba(42, 171, 238, .06));
  border: 1px solid rgba(94, 181, 247, .18);
}
.benefit b { display: block; font-size: 15.5px; margin-bottom: 3px; }
.benefit p { font-size: 14px; color: var(--muted); }

/* =====================  РАЙОНЫ  ===================== */

.areas {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(215px, 1fr);
  gap: 12px;
  overflow-x: auto;
  padding: 4px 2px 10px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.areas::-webkit-scrollbar { display: none; }
@media (min-width: 760px) { .areas { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); overflow: visible; } }
@media (min-width: 1000px) { .areas { grid-template-columns: repeat(4, 1fr); } }

.area {
  scroll-snap-align: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 16px;
  box-shadow: var(--shadow-1);
  color: var(--ink);
  transition: transform .18s ease, background .18s ease;
}
.area:hover { transform: translateY(-3px); background: var(--surface-2); }
.area__emoji { font-size: 26px; }
.area b { display: block; font-size: 16px; margin: 8px 0 3px; }
.area p { font-size: 13.5px; color: var(--muted); min-height: 42px; }
.area span { font-size: 13.5px; font-weight: 700; color: var(--amber); }

/* =====================  ОТЗЫВЫ  ===================== */

.review { display: flex; gap: 10px; margin: 14px 0; }
@media (min-width: 1000px) {
  .reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
  .reviews .review { margin: 0; }
  .reviews .msg { max-width: 100%; }
}
.review .ava {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.ava--1 { background: linear-gradient(135deg, #F7936F, #E05A5A); }
.ava--2 { background: linear-gradient(135deg, #7BC862, #47A04B); }
.ava--3 { background: linear-gradient(135deg, #E5A2D1, #B65AA6); }
.review .msg { margin: 0; }
.review p { font-size: 15px; }

/* =====================  FAQ  ===================== */

.faq-item { margin: 10px 0; }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(135deg, var(--out-1), var(--out-2));
  border-radius: var(--r-bubble);
  border-bottom-right-radius: 6px;
  padding: 13px 16px;
  font-weight: 600;
  font-size: 15px;
  box-shadow: var(--shadow-1);
  max-width: 92%;
  margin-left: auto;
  transition: filter .15s;
}
.faq-item summary:hover { filter: brightness(1.08); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  flex: none;
  width: 9px; height: 9px;
  border-right: 2px solid #CFE3F5;
  border-bottom: 2px solid #CFE3F5;
  transform: rotate(45deg);
  transition: transform .2s;
  margin-top: -3px;
}
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.faq-item .msg--in { font-size: 15px; color: #D5E2EE; }

/* =====================  SEO-ТЕКСТ («длинный пост»)  ===================== */

.post {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 20px 18px;
  box-shadow: var(--shadow-1);
  margin: 14px 0;
}
.post h2 { font-size: clamp(20px, 3.6vw, 26px); margin-bottom: 12px; }
.post h2:not(:first-child), .post h3:not(:first-child) { margin-top: 22px; }
.post h3 { font-size: 17.5px; margin-bottom: 8px; }
.post p, .post li { font-size: 15.5px; color: #C6D6E4; margin-bottom: 10px; }
.post ul, .post ol { padding-left: 22px; margin-bottom: 12px; }
.post a { border-bottom: 1px solid rgba(94, 181, 247, .35); }

/* Таблица цен */
.tbl-wrap { overflow-x: auto; margin: 14px 0; border-radius: 14px; border: 1px solid var(--line); }
table.tbl { width: 100%; border-collapse: collapse; min-width: 560px; background: var(--surface); }
.tbl th, .tbl td { padding: 12px 14px; text-align: left; font-size: 14.5px; border-bottom: 1px solid var(--line); }
.tbl th { background: var(--surface-2); color: #CFE3F5; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.tbl td b { color: var(--amber); }
.tbl tr:last-child td { border-bottom: none; }

/* Хлебные крошки */
.crumbs { font-size: 13px; color: var(--faint); margin: 16px auto 0; }
.crumbs a { color: var(--muted); }

/* =====================  ФУТЕР  ===================== */

footer {
  margin-top: 40px;
  border-top: 1px solid var(--line);
  background: rgba(10, 17, 26, .65);
  padding: 30px 0 26px;
}
.foot {
  max-width: var(--col);
  margin: 0 auto;
  padding: 0 14px;
}
.foot__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (min-width: 760px) { .foot__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.foot b { display: block; font-size: 14px; margin-bottom: 10px; color: #CFE3F5; }
.foot ul { list-style: none; }
.foot li { margin: 7px 0; }
.foot a { color: var(--muted); font-size: 14px; }
.foot a:hover { color: var(--accent); }
.foot__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.foot__brand span { font-weight: 800; font-size: 16px; }
.foot p.small { font-size: 12.5px; color: var(--faint); margin-top: 8px; line-height: 1.55; }
.foot__legal { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }

/* =====================  НИЖНЯЯ ПАНЕЛЬ («поле ввода»)  ===================== */

.composer {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 60;
  background: #101824;
  border-top: 1px solid var(--line);
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
}
.composer__in {
  max-width: var(--col);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.composer__field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 12px 20px;
  color: var(--muted);
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  transition: border-color .15s;
}
.composer:hover .composer__field { border-color: rgba(94, 181, 247, .4); }
@media (max-width: 430px) { .composer__tail { display: none; } }
.composer__field b { color: #CFE3F5; font-weight: 600; }
.composer__send {
  flex: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--tg-1), var(--tg-2));
  box-shadow: var(--glow);
  transition: transform .15s;
  animation: send-pulse 2.4s ease-in-out infinite;
}
@keyframes send-pulse {
  0%, 100% { box-shadow: 0 6px 22px rgba(42, 171, 238, .38); }
  50% { box-shadow: 0 6px 30px rgba(42, 171, 238, .65), 0 0 0 7px rgba(42, 171, 238, .12); }
}
.composer:active .composer__send { transform: scale(.94); }
.composer__send svg { width: 22px; height: 22px; margin-left: -2px; }

/* Печатает… в поле ввода */
.dots { display: inline-flex; gap: 3px; }
.dots i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
  animation: blink 1.2s infinite;
}
.dots i:nth-child(2) { animation-delay: .2s; }
.dots i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

/* =====================  ПРОЧЕЕ  ===================== */

.section-note { text-align: center; font-size: 13.5px; color: var(--faint); margin: 8px 0 0; }
.kb-note { text-align: center; font-size: 12.5px; color: var(--faint); margin-top: 8px; }

.appear { animation: appear .5s ease both; }
@keyframes appear {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

::selection { background: rgba(42, 171, 238, .35); }