/* NetWeb · bot/bot.css — симуляция чата с ботом в Telegram (iOS, тема по умолчанию; тёмная — как Telegram «Ночь»).
   Цвета чата — Telegram, а не NetWeb: свои обои и цветной текст бот задать не может (DESIGN §7). */
.bt {
  --bt-wall: radial-gradient(120% 70% at 10% 0%, #D8DDB8 0%, transparent 60%), radial-gradient(90% 60% at 100% 30%, #A9CFA0 0%, transparent 65%),
    radial-gradient(120% 70% at 0% 85%, #8DBB8A 0%, transparent 60%), radial-gradient(100% 80% at 100% 100%, #D4D79A 0%, transparent 60%), #B9D3A2;
  --bt-ink: #000; --bt-in: #fff; --bt-out: #DEF7C8; --bt-g: #5E5E63; --bt-tm: #6D6D72; --bt-tm-out: #2F7D32;
  --bt-fw: #1466B8; --bt-q: #2E8DE6; --bt-q-bg: rgba(46,141,230,.09); --bt-q-ink: #1C1C1E; --bt-line: #E5E5EA;
  --bt-ib: rgba(46,74,40,.40); --bt-ib-ink: #fff; --bt-pri: #2A7FD4; --bt-glass: rgba(255,255,255,.74); --bt-glass-ink: #000;
  --bt-fieldbg: rgba(255,255,255,.88); --bt-pill: rgba(46,74,40,.34); --bt-voice: #3E9D40; --bt-link: #1466B8;
  --bt-page: #E9EDE3; --bt-side-ink: #1C1C1E; --bt-side-2: #55555B; --bt-pill-stuck: rgba(46,74,40,.74); --bt-veil: rgba(205,222,175,.35);
  margin: 0; font-family: var(--nw-font); color: var(--bt-ink); background: var(--bt-page);
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent;
}
@media (prefers-color-scheme: dark) {
  .bt {
    --bt-wall: radial-gradient(120% 70% at 10% 0%, #1F3B33 0%, transparent 60%), radial-gradient(90% 60% at 100% 30%, #17303F 0%, transparent 65%),
      radial-gradient(120% 70% at 0% 85%, #1B3328 0%, transparent 60%), radial-gradient(100% 80% at 100% 100%, #243A2A 0%, transparent 60%), #10202A;
    --bt-ink: #F5F5F5; --bt-in: #182533; --bt-out: #2B5278; --bt-g: #A9B4BF; --bt-tm: #8E9BA8; --bt-tm-out: #B7D3F0;
    --bt-fw: #6AB3F3; --bt-q: #6AB3F3; --bt-q-bg: rgba(106,179,243,.12); --bt-q-ink: #EAF2FA; --bt-line: rgba(255,255,255,.10);
    --bt-ib: rgba(255,255,255,.14); --bt-ib-ink: #fff; --bt-pri: #3E88F7; --bt-glass: rgba(30,40,52,.78); --bt-glass-ink: #fff;
    --bt-fieldbg: rgba(24,37,51,.92); --bt-pill: rgba(0,0,0,.32); --bt-voice: #5FB0F6; --bt-link: #6AB3F3;
    --bt-page: #0B141C; --bt-side-ink: #E8EAED; --bt-side-2: #A9B0B8; --bt-pill-stuck: rgba(0,0,0,.55); --bt-veil: rgba(16,32,42,.40);
  }
}
.bt *, .bt *::before, .bt *::after { box-sizing: border-box; }
.bt [hidden] { display: none !important; }
.bt :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
.bt :focus-visible { outline: 2px solid var(--bt-pri); outline-offset: 2px; border-radius: 8px; }
.bt-noscript { padding: 24px; }

/* ---------- раскладка ---------- */
.bt-page { height: 100dvh; display: flex; justify-content: center; align-items: stretch; }
.bt-col { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden; background: var(--bt-wall); }
.bt-side { display: none; }
@media (min-width: 760px) {
  .bt-page { gap: 40px; padding: 20px; align-items: center; }
  .bt-col { width: 420px; height: min(900px, calc(100dvh - 40px)); border-radius: 28px; box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 18px 50px rgba(0,0,0,.14); flex: none; }
  .bt-side { display: block; width: 300px; flex: none; color: var(--bt-side-ink); font-size: 15px; line-height: 21px; }
  .bt-side__back { display: inline-flex; align-items: center; gap: 4px; color: var(--bt-link); text-decoration: none; font-weight: 600; font-size: 14px; }
  .bt-side__title { font-size: 26px; line-height: 31px; margin: 14px 0 8px; font-weight: 700; letter-spacing: -.01em; }
  .bt-side__lead, .bt-side__note { color: var(--bt-side-2); margin: 0 0 14px; }
  .bt-side__list { padding: 0 0 0 18px; margin: 0 0 14px; }
  .bt-side__list li { margin: 4px 0; }
}

/* ---------- сценарии ---------- */
.bt-scen { position: relative; z-index: 40; flex: none; display: flex; gap: 6px; align-items: center; overflow-x: auto; scrollbar-width: none;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 8px; background: var(--bt-glass); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 .5px 0 rgba(0,0,0,.12); }
.bt-scen::-webkit-scrollbar { display: none; }
.bt-scen__label { flex: none; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--bt-g); text-transform: uppercase; margin-right: 2px; }
.bt-chip { flex: none; height: 32px; padding: 0 12px; border-radius: 16px; background: var(--bt-pri); color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; }
.bt-chip--quiet { background: transparent; color: var(--bt-glass-ink); box-shadow: inset 0 0 0 1px rgba(127,127,127,.45); }
.bt-chip.is-armed { background: #5E6673; color: #fff; box-shadow: none; }
.bt-chip:active { transform: scale(.97); }

/* ---------- чат ---------- */
.bt-chat { position: relative; flex: 1; min-height: 0; color: var(--bt-ink); }
/* полоса под шапкой — как на доске (board.css .chat::after): размытие + лёгкая вуаль цвета обоев, к низу гаснет */
.bt-chat::after { content: ""; position: absolute; z-index: 25; left: 0; right: 0; top: 0; height: 64px; pointer-events: none; background: var(--bt-veil);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); -webkit-mask: linear-gradient(#000 62%, transparent); mask: linear-gradient(#000 62%, transparent); }
.chh { position: absolute; z-index: 30; top: 6px; left: 0; right: 0; height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; pointer-events: none; }
.chh > * { pointer-events: auto; }
.chh .glass { height: 44px; border-radius: 22px; background: var(--bt-glass); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: inset 0 0 0 .5px rgba(0,0,0,.07), 0 2px 10px rgba(0,0,0,.07); display: flex; align-items: center; color: var(--bt-glass-ink); text-decoration: none; }
.chh .bk { padding: 0 12px 0 8px; gap: 2px; font-size: 15px; font-weight: 600; }
.chh .bk em { font-style: normal; min-width: 22px; height: 22px; border-radius: 11px; background: #007AFF; color: #fff; font-size: 13px; display: grid; place-items: center; padding: 0 6px; }
.chh .ttl { padding: 0 18px; flex-direction: column; justify-content: center; text-align: center; line-height: 1.15; min-width: 96px; }
.chh .ttl b { font-size: 16px; font-weight: 600; }
.chh .ttl small { font-size: 12.5px; color: var(--bt-tm); }
.chh .ttl small.is-typing { color: var(--bt-pri); }
.chh .ava { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.1); }
.chh .ava img { display: block; width: 44px; height: 44px; }

.msgs { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding: 70px 8px 70px; scroll-behavior: smooth;
  /* сообщения уходят под плавающую шапку с затуханием (как в Telegram), а не лежат под «‹ 12» и «NetWeb» поверх текста;
     обои — на .bt-col, поэтому гаснет только переписка. Ниже 66px — полная видимость: там прилипает дата. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 38px, #000 66px); mask-image: linear-gradient(to bottom, transparent 38px, #000 66px); }
@media (prefers-reduced-motion: reduce) { .msgs { scroll-behavior: auto; } }
.msgs__in { min-height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }
.dpill { align-self: center; font-size: 13px; font-weight: 600; color: #fff; background: var(--bt-pill); padding: 2px 10px; border-radius: 11px; margin: 4px 0; text-align: center; max-width: 88%; line-height: 18px; }
.dpill--note { font-weight: 500; padding: 4px 12px; }
/* дата прилипает под шапкой: низ капсул шапки — 56px, дата — с 66px (кадры 7.1/7.2). Отступ sticky считается
   от верхнего поля .msgs (70px), поэтому −4px: 70 − 4 = 66px от верха чата (WebKit и Chromium одинаково). */
.dpill--date { position: sticky; top: -4px; z-index: 2; }
/* прилипла поверх сообщений — как плашка даты в Telegram: размытие и плотнее фон, белый текст читается и на белом пузыре (≈4.7:1) */
.dpill--date.is-stuck { background: var(--bt-pill-stuck); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

.bt-m { display: flex; flex-direction: column; gap: 4px; }
.bt-m--out { align-items: flex-end; }
.bt-m--in { align-items: flex-start; }
.bub { position: relative; max-width: min(322px, calc(100% - 44px)); background: var(--bt-in); color: var(--bt-ink); border-radius: 18px; padding: 7px 12px; font-size: 16px; line-height: 21px; overflow-wrap: anywhere; }
.bub.in { border-bottom-left-radius: 6px; margin-left: 4px; }
.bub.out { background: var(--bt-out); border-bottom-right-radius: 6px; margin-right: 4px; }
.bub.is-flash { animation: bt-flash .9s ease; }
@keyframes bt-flash { 30% { box-shadow: 0 0 0 3px var(--bt-pri); } }
.bub .tm { float: right; font-size: 12px; color: var(--bt-tm); margin: 8px 0 -4px 10px; line-height: 14px; white-space: nowrap; }
.bub.out .tm { color: var(--bt-tm-out); }
.bub h4 { margin: 0; font-size: 16px; line-height: 21px; font-weight: 600; }
.bub p { margin: 0; }
.bub .gap { height: 7px; }
.bub ol, .bub ul { margin: 2px 0 0; padding-left: 22px; }
.bub ul { padding-left: 18px; }
.bub .g { color: var(--bt-g); font-size: 14.5px; line-height: 20px; }
.bub .fw { color: var(--bt-fw); font-size: 14px; font-weight: 600; line-height: 19px; }
.bub .lnk { color: inherit; font-weight: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 16%, transparent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.bub .lnk:hover { text-decoration-color: currentColor; }
.bub .more { color: var(--bt-link); cursor: pointer; }
.bub.draft p { color: var(--bt-g); font-style: italic; }
.bub.draft p::after { content: "…"; display: inline-block; animation: bt-dots 1.2s steps(4) infinite; width: 1.2em; overflow: hidden; vertical-align: bottom; }
@keyframes bt-dots { from { width: 0; } to { width: 1.2em; } }
.bq { border-left: 3px solid var(--bt-q); background: var(--bt-q-bg); border-radius: 4px 8px 8px 4px; padding: 5px 26px 5px 9px; font-size: 15px; line-height: 20px; margin: 4px 0 6px; position: relative; color: var(--bt-q-ink); }
.bq .ex { position: absolute; right: 6px; bottom: 5px; color: var(--bt-q); }
.bq--fold { cursor: pointer; }
.bq--fold:not(.is-open) .bq__full { display: none; }
.bq--fold.is-open .bq__short { display: none; }
.bq--fold.is-open .ex { transform: rotate(180deg); }
.kvt { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; font-size: 15px; line-height: 21px; margin-top: 4px; }
.kvt .k { color: var(--bt-g); }
.bub:has(.rtab) { width: min(322px, calc(100% - 44px)); }
.rtab { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 14.5px; line-height: 19px; margin: 6px 0 2px; }
.rtab td { padding: 4px 6px; border-top: 1px solid var(--bt-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rtab td:first-child { padding-left: 0; font-weight: 600; width: 47%; }
.rtab td:last-child { text-align: right; color: var(--bt-g); padding-right: 0; width: 60px; }
.rtab tr.sub td { width: auto; text-align: left; padding-left: 0; }
.rtab tr.sub td { color: var(--bt-g); font-weight: 600; font-size: 13px; border-top: 0; padding-top: 8px; }
.rtab .lnk { color: var(--bt-ink); font-weight: 600; }

.ikb { display: flex; flex-direction: column; gap: 4px; margin: -2px 4px 2px; width: min(330px, calc(100% - 36px)); }
.ikr { display: flex; gap: 4px; }
.ikr--fit .ib { flex: 1 1 auto; }
.ib { flex: 1; min-width: 0; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 14.5px; font-weight: 600;
  color: var(--bt-ib-ink); background: var(--bt-ib); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.01em; padding: 0 6px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .12s ease, filter .12s ease; }
.ib > span { overflow: hidden; text-overflow: ellipsis; }
.ib.pri { background: var(--bt-pri); }
.ib:active { transform: scale(.98); filter: brightness(1.08); }
.ib.is-busy { opacity: .7; }
.ib .nw-ic { width: 15px; height: 15px; stroke-width: 2.2; flex: none; }

/* голосовое */
.voice { display: flex; align-items: center; gap: 10px; padding: 2px 0; }
.voice .pl { width: 40px; height: 40px; border-radius: 50%; background: var(--bt-voice); color: #fff; display: grid; place-items: center; flex: none; }
.voice .wv { display: flex; align-items: center; gap: 2px; height: 24px; }
.voice .wv i { width: 3px; border-radius: 2px; background: var(--bt-voice); display: block; }
.voice .du { font-size: 12.5px; color: var(--bt-tm-out); margin-top: 2px; }
/* контакт и визитка */
.vcard { display: flex; align-items: center; gap: 10px; padding: 2px 0; min-width: 210px; }
.vcard .av { width: 44px; height: 44px; border-radius: 50%; background: var(--bt-voice); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 16px; flex: none; }
.vcard b { display: block; }
.vcard small { color: var(--bt-tm-out); font-size: 14px; }
.bizcard { width: 230px; aspect-ratio: 1.75; border-radius: 10px; background: linear-gradient(135deg, #F7F4EE, #E7E1D6); color: #1C1C1E; padding: 14px 16px; display: flex; flex-direction: column; justify-content: space-between; margin: 2px 0 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,.2); transform: rotate(-1.5deg); }
.bizcard b { font-size: 17px; }
.bizcard span { font-size: 12px; line-height: 16px; color: #4A4A4F; }
.bizcard i { font-style: normal; font-weight: 700; color: #1E7B3A; font-size: 13px; letter-spacing: .04em; }

/* ---------- ввод ---------- */
.cinput { position: absolute; z-index: 30; left: 0; right: 0; bottom: 0; padding: 8px 10px max(10px, env(safe-area-inset-bottom, 0px)); display: flex; gap: 8px; align-items: center; }
.cinput .menu { height: 40px; border-radius: 20px; background: var(--bt-pri); color: #fff; display: flex; align-items: center; gap: 6px; padding: 0 14px 0 12px; font-size: 15px; font-weight: 600; flex: none; }
.cinput .fld { flex: 1; min-width: 0; height: 40px; border-radius: 20px; background: var(--bt-fieldbg); display: flex; align-items: center; gap: 6px; padding: 0 12px 0 8px; color: var(--bt-tm); box-shadow: inset 0 0 0 .5px rgba(0,0,0,.08); }
.cinput .clip { width: 30px; height: 36px; display: grid; place-items: center; color: var(--bt-tm); flex: none; }
.cinput input { flex: 1; min-width: 0; height: 38px; border: 0; outline: 0; background: transparent; font: 400 16px/1 var(--nw-font); color: var(--bt-ink); padding: 0; }
.cinput input:focus-visible { outline: none; }
.cinput .fld:focus-within { box-shadow: inset 0 0 0 1.5px var(--bt-pri); }
.cinput input::placeholder { color: var(--bt-tm); opacity: 1; }
.cinput .mc { width: 40px; height: 40px; border-radius: 50%; background: var(--bt-fieldbg); display: grid; place-items: center; color: var(--bt-tm); flex: none; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.cinput .mc--send { background: var(--bt-pri); color: #fff; }
.cinput .mc.is-rec { background: var(--bt-pri); color: #fff; transform: scale(1.5); box-shadow: 0 0 0 10px rgba(42,127,212,.22); transition: transform .16s var(--nw-ease-ios), box-shadow .16s ease; }
.bt-rec { position: absolute; z-index: 31; left: 10px; right: 64px; bottom: max(10px, env(safe-area-inset-bottom, 0px)); height: 40px; border-radius: 20px; background: var(--bt-in);
  display: flex; align-items: center; gap: 8px; padding: 0 14px; font-size: 15px; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.08); }
.bt-rec__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--bt-pri); animation: bt-pulse 1s ease-in-out infinite; }
@keyframes bt-pulse { 50% { opacity: .25; } }
.bt-rec__t { font-variant-numeric: tabular-nums; min-width: 34px; }
.bt-rec__hint { color: var(--bt-tm); margin-left: auto; white-space: nowrap; }
.bt-rec__send { color: var(--bt-pri); font-weight: 600; margin-left: 8px; }
.bt-cmds { position: absolute; z-index: 32; left: 10px; right: 10px; bottom: 62px; border-radius: 14px; background: var(--bt-in); box-shadow: 0 8px 28px rgba(0,0,0,.18); overflow: hidden; }
.bt-cmds button { display: flex; width: 100%; gap: 10px; padding: 10px 14px; text-align: left; font-size: 15px; align-items: baseline; }
.bt-cmds button + button { box-shadow: inset 0 .5px 0 var(--bt-line); }
.bt-cmds b { color: var(--bt-link); font-weight: 600; }
.bt-cmds span { color: var(--bt-g); font-size: 14px; }
.bt-attach { position: absolute; z-index: 32; left: 60px; bottom: 62px; border-radius: 14px; background: var(--bt-in); box-shadow: 0 8px 28px rgba(0,0,0,.18); overflow: hidden; min-width: 220px; }
.bt-attach button { display: flex; width: 100%; gap: 12px; padding: 12px 16px; align-items: center; font-size: 16px; text-align: left; }
.bt-attach button + button { box-shadow: inset 0 .5px 0 var(--bt-line); }
.bt-attach .nw-ic { color: var(--bt-pri); }
.bt-toast { position: absolute; z-index: 45; top: 72px; left: 50%; transform: translateX(-50%); background: rgba(28,28,30,.92); color: #fff; font-size: 14px; font-weight: 500; padding: 8px 14px; border-radius: 12px; max-width: 86%; text-align: center; }

/* ---------- мини-приложение поверх чата ---------- */
.bt-mini { position: absolute; z-index: 60; inset: 0; display: flex; flex-direction: column; background: #F2F2F7; animation: bt-up .32s cubic-bezier(.32,.72,0,1); }
@media (prefers-color-scheme: dark) { .bt-mini { background: #0E0F11; } }
@media (prefers-reduced-motion: reduce) { .bt-mini { animation: none; } }
@keyframes bt-up { from { transform: translateY(100%); } }
.bt-mini[hidden] { display: none; }
.bt-mini:focus { outline: none; }
.bt-mini__bar { flex: none; height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; background: var(--bt-glass); color: var(--bt-glass-ink); box-shadow: 0 .5px 0 rgba(0,0,0,.12); }
.bt-mini__close { color: var(--bt-pri); font-weight: 600; font-size: 16px; padding: 8px 6px; min-width: 76px; text-align: left; }
.bt-mini__title { text-align: center; line-height: 1.15; }
.bt-mini__title b { display: block; font-size: 16px; }
.bt-mini__title small { font-size: 12px; color: var(--bt-tm); }
.bt-mini__ext { min-width: 76px; display: flex; justify-content: flex-end; color: var(--bt-pri); padding: 8px 6px; }
.bt-mini__frame { flex: 1; width: 100%; border: 0; display: block; background: transparent; }