/* Макет чата Telegram (тёмная тема) для лендинга и плана семейства ботов.
   Цвета — как в Telegram Desktop/iOS dark, аватар бота — салатовый круг Рыбкин Тек. */
.phone { width: 320px; max-width: 100%; border-radius: 42px; background: #0b0c0e; padding: 9px; box-shadow: 0 40px 90px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.09); flex: none; }
.scr { border-radius: 33px; overflow: hidden; background: #0e1621; height: 620px; display: flex; flex-direction: column; position: relative; font-family: "Golos Text", system-ui, sans-serif; }
.scr::before { content: ""; position: absolute; top: 9px; left: 50%; width: 92px; height: 26px; margin-left: -46px; border-radius: 20px; background: #000; z-index: 3; }
.tg-hd { display: flex; align-items: center; gap: 10px; padding: 44px 14px 10px; background: #17212b; box-shadow: 0 1px 0 rgba(0,0,0,.35); position: relative; z-index: 2; }
.tg-back { color: #6ab3f3; font-size: 22px; line-height: 1; margin-right: 2px; }
.ava { width: 38px; height: 38px; border-radius: 50%; background: #c8ff2e; color: #151515; display: grid; place-items: center; font: 700 12px Unbounded, sans-serif; letter-spacing: -.02em; flex: none; }
.ava svg { width: 20px; height: 20px; }
.tg-hd > div:last-child { min-width: 0; }
.tg-name { font-weight: 600; font-size: 15px; color: #fff; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-sub { font-size: 12.5px; color: #7f91a4; }
.tg-body { flex: 1; padding: 12px 10px 8px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; overflow: hidden;
  background: radial-gradient(circle at 20% 30%, rgba(106,179,243,.05), transparent 40%), radial-gradient(circle at 80% 70%, rgba(200,255,46,.035), transparent 45%), #0e1621; }
.tg-in { display: flex; align-items: center; gap: 10px; padding: 9px 12px 20px; background: #17212b; color: #6d7f8f; font-size: 14px; }
.tg-in .f { flex: 1; }
.tg-in .i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #6d7f8f; opacity: .7; }

.msg { max-width: 88%; padding: 7px 10px 6px; border-radius: 15px; font-size: 13.4px; line-height: 1.4; color: #fff; position: relative; word-wrap: break-word; }
.msg.in { align-self: flex-start; background: #182533; border-bottom-left-radius: 5px; }
.msg.out { align-self: flex-end; background: #2b5278; border-bottom-right-radius: 5px; }
.msg b { font-weight: 600; }
.msg .t { font-size: 10.5px; color: rgba(255,255,255,.42); float: right; margin: 7px 0 -3px 10px; white-space: nowrap; }
.msg.out .t { color: rgba(255,255,255,.55); }
.msg .t.ok::after { content: " ✓✓"; color: #6ab3f3; }
.msg p + p { margin-top: 6px; }
.msg .q { border-left: 2px solid #c8ff2e; padding-left: 8px; color: rgba(255,255,255,.88); }
.msg .m { color: #7f91a4; font-size: 12px; }
.msg .lk { color: #6ab3f3; }
.msg .ts { color: #6ab3f3; }
.msg ol { padding-left: 18px; }
.msg ol li + li { margin-top: 3px; }
.msg .pv { margin-top: 5px; border-left: 2px solid #6ab3f3; padding: 2px 0 2px 8px; }
.msg .pv b { color: #6ab3f3; font-size: 12.5px; display: block; }
.msg .pv span { font-size: 12.5px; color: rgba(255,255,255,.8); }
.msg .thumb { margin-top: 6px; height: 92px; border-radius: 8px; background: linear-gradient(160deg, #3a3f49, #1d2026); position: relative; overflow: hidden; }
.msg .thumb::after { content: "▶"; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.85); font-size: 22px; }
.msg .thumb.yt { background: linear-gradient(160deg, #3b2b2b, #1e1a1a); }
.msg.photo { padding: 3px; overflow: hidden; }
.msg.photo .ph { height: 180px; border-radius: 12px 12px 4px 12px; background: radial-gradient(120% 90% at 50% 30%, #b49a78, #6d5843 60%, #3e3226); position: relative; filter: sepia(.4); }
.msg.photo .ph::before, .msg.photo .ph::after { content: ""; position: absolute; bottom: 0; width: 64px; height: 120px; border-radius: 34px 34px 0 0; background: rgba(40,30,22,.55); }
.msg.photo .ph::before { left: 46px; } .msg.photo .ph::after { left: 120px; height: 132px; }
.msg.photo .cap { padding: 5px 8px 3px; }
.msg .file { display: flex; gap: 10px; align-items: center; }
.msg .file i { width: 42px; height: 42px; border-radius: 50%; background: #6ab3f3; display: grid; place-items: center; font-style: normal; font-size: 18px; flex: none; }
.msg .file b { display: block; font-size: 13.5px; }
.msg .file span { font-size: 12px; color: #7f91a4; }
.grid4 { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin: 4px 0 5px; border-radius: 10px; overflow: hidden; }
.grid4 div { height: 108px; position: relative; background: radial-gradient(120% 90% at 50% 30%, #c7ab86, #7a6249 60%, #43362a); }
.grid4 div:nth-child(2) { background: radial-gradient(120% 90% at 40% 30%, #d2b38c, #8a6c4e 60%, #47382a); }
.grid4 div:nth-child(3) { background: radial-gradient(120% 90% at 60% 35%, #bda07c, #6f5843 60%, #3b2f24); }
.grid4 div:nth-child(4) { background: radial-gradient(120% 90% at 50% 25%, #cfb894, #806550 60%, #45372b); }
.grid4 div::after { content: "▶"; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.9); font-size: 18px; }
.grid4 span { position: absolute; left: 6px; top: 6px; background: rgba(0,0,0,.55); border-radius: 6px; font-size: 11px; padding: 1px 6px; z-index: 1; }
.grid4 em { position: absolute; right: 6px; bottom: 5px; font-style: normal; font-size: 10.5px; background: rgba(0,0,0,.5); border-radius: 5px; padding: 0 5px; z-index: 1; }

/* готовый вертикальный ролик из Контент-завода */
.msg.vmsg { padding: 3px; }
.v916 { width: 156px; aspect-ratio: 9 / 16; border-radius: 12px 12px 4px 12px; position: relative; overflow: hidden;
  background: radial-gradient(60% 34% at 50% 34%, #f3d9c4, transparent 70%), radial-gradient(90% 60% at 50% 100%, #3a4a5c, transparent 70%), linear-gradient(170deg, #e8cdb6, #b88d74 50%, #4a3a33); }
.v916 .dur { position: absolute; left: 7px; top: 7px; font-size: 10.5px; background: rgba(0,0,0,.5); border-radius: 6px; padding: 1px 6px; }
.v916 i { position: absolute; left: 50%; top: 42%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: rgba(0,0,0,.45); display: grid; place-items: center; font-style: normal; font-size: 15px; }
.v916 p { position: absolute; left: 8px; right: 8px; top: 64%; text-align: center; font: 700 12px/1.25 Unbounded, sans-serif; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); letter-spacing: -.01em; }
.v916 mark { background: #c8ff2e; color: #151515; padding: 0 3px; border-radius: 3px; text-shadow: none; }
.msg.vmsg .cap { padding: 5px 8px 3px; }

/* голосовое сообщение */
.voice { display: flex; align-items: center; gap: 9px; padding: 2px 0; }
.voice i { width: 36px; height: 36px; border-radius: 50%; background: #fff; color: #2b5278; display: grid; place-items: center; font-style: normal; font-size: 12px; flex: none; }
.voice .wave { display: flex; align-items: center; gap: 2px; height: 20px; }
.voice .wave u { display: block; width: 2.5px; border-radius: 2px; background: rgba(255,255,255,.85); text-decoration: none; }
.voice em { font-style: normal; font-size: 12px; color: rgba(255,255,255,.7); }

.kb { align-self: flex-start; width: 88%; display: grid; gap: 3px; margin-top: -3px; }
.kb .row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; }
.kb b { display: block; background: rgba(34,52,70,.92); color: #fff; font-weight: 500; font-size: 12.6px; text-align: center; padding: 8px 6px; border-radius: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb b.hot { background: rgba(200,255,46,.16); color: #e2ff9a; box-shadow: inset 0 0 0 1px rgba(200,255,46,.35); }
.sys { align-self: center; background: rgba(0,0,0,.32); color: rgba(255,255,255,.75); font-size: 11.5px; padding: 3px 10px; border-radius: 12px; }

/* появление сообщений на лендинге */
.tg-body > * { animation: pop .35s ease both; }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.typing { align-self: flex-start; background: #182533; border-radius: 15px; border-bottom-left-radius: 5px; padding: 9px 12px; display: flex; gap: 4px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: #7f91a4; animation: blink 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tg-body > *, .typing i { animation: none; } }