/* Telegram-style UI kit in the avatar's neon palette: window, header, chat bubbles with tails, ticks, typing dots, inline keyboard,
   sticker, pinned bar, link-preview card, chat-list rows, pills. Used by the hero chat, the service list and the Mini App. */
.tgw{position:relative;border-radius:26px;overflow:hidden;border:1px solid var(--line-2);background:rgba(10,4,26,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 40px 90px -30px rgba(158,30,176,.7),0 0 0 1px rgba(255,255,255,.04),inset 0 1px 0 rgba(255,255,255,.08);display:flex;flex-direction:column}
.tgh{display:flex;align-items:center;gap:12px;padding:12px 16px;background:linear-gradient(180deg,rgba(41,48,126,.55),rgba(23,7,50,.55));border-bottom:1px solid var(--line)}
.tgh .back{width:22px;height:22px;opacity:.8}
.ava{position:relative;flex:none;width:42px;height:42px;border-radius:50%;overflow:hidden;background:#29307e;box-shadow:0 0 0 2px rgba(255,95,210,.65),0 0 18px rgba(255,95,210,.45)}
.ava img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.ava.sm{width:34px;height:34px}.ava.lg{width:56px;height:56px}
.ava .on{position:absolute;right:0;bottom:0;width:11px;height:11px;border-radius:50%;background:#52e58b;border:2px solid #170732}
.tgh .who{min-width:0;line-height:1.25}.tgh .who b{display:block;font:700 15.5px/1.25 var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tgh .who small{font-size:12.5px;color:var(--cyan-soft)}
.tgh .ic{margin-left:auto;display:flex;gap:14px;opacity:.75}.tgh .ic svg{width:20px;height:20px}
.pin{display:flex;align-items:center;gap:10px;padding:8px 16px;font-size:13px;background:rgba(41,48,126,.28);border-bottom:1px solid var(--line)}
.pin::before{content:"";width:3px;align-self:stretch;border-radius:2px;background:var(--grad)}
.pin b{display:block;color:var(--cyan);font-size:12px;letter-spacing:.05em}.pin span{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.chat{flex:1;display:flex;flex-direction:column;gap:7px;padding:18px 14px;overflow:hidden;position:relative;
  background:radial-gradient(circle at 20% 10%,rgba(158,30,176,.16),transparent 45%),radial-gradient(circle at 85% 80%,rgba(77,214,234,.12),transparent 45%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' fill='none' stroke='%23eabcda' stroke-opacity='.05'%3E%3Ccircle cx='15' cy='18' r='5'/%3E%3Cpath d='M55 14l6 6m0-6l-6 6M70 60q6-9 12 0M20 66h14M24 58v16'/%3E%3C/svg%3E")}
.msg{display:flex;gap:8px;max-width:88%;opacity:0;transform:translateY(14px) scale(.94);transform-origin:var(--o,0 100%)}
.msg.show{opacity:1;transform:none;transition:opacity .35s var(--ease),transform .45s var(--spring)}
.msg.in{align-self:flex-start}.msg.out{align-self:flex-end;--o:100% 100%;flex-direction:row-reverse}
.bub{position:relative;padding:8px 12px 6px;border-radius:var(--r-bubble);font-size:15px;line-height:1.55;min-width:0;overflow-wrap:anywhere}
.in .bub{background:linear-gradient(160deg,rgba(54,62,150,.78),rgba(35,22,92,.82));border-bottom-left-radius:5px}
.out .bub{background:linear-gradient(135deg,#9e1eb0,#d34cc4 60%,#ff5fd2);border-bottom-right-radius:5px;box-shadow:0 8px 24px -10px rgba(255,95,210,.7)}
.bub::after{content:"";position:absolute;bottom:0;width:12px;height:14px}
.in .bub::after{left:-7px;background:rgba(35,22,92,.82);clip-path:polygon(100% 0,100% 100%,40% 100%,0 100%,45% 62%)}
.out .bub::after{right:-7px;background:#d34cc4;clip-path:polygon(0 0,0 100%,60% 100%,100% 100%,55% 62%)}
.bub .nm{display:block;font:700 13px/1.3 var(--font);color:var(--cyan);margin-bottom:2px}
.bub .tm{float:right;margin:6px 0 -2px 12px;font-size:11px;opacity:.66;display:inline-flex;align-items:center;gap:3px;user-select:none}
.tick{width:16px;height:10px;stroke:var(--cyan);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.out .tick{stroke:#fff}
.bub b{font-weight:700}.bub code{font:13px ui-monospace,Menlo,Consolas,monospace;background:rgba(0,0,0,.28);padding:1px 6px;border-radius:6px}
.bub a.l{color:var(--cyan);text-decoration:underline;text-decoration-color:rgba(77,214,234,.4)}
.typing{display:inline-flex;gap:4px;align-items:center;padding:13px 14px}.typing i{width:7px;height:7px;border-radius:50%;background:var(--pink-pale);opacity:.5;animation:ty 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes ty{0%,60%,100%{transform:none;opacity:.4}30%{transform:translateY(-5px);opacity:1}}
/* inline keyboard (under a bot message) */
.kb{display:grid;gap:5px;margin-top:6px;width:100%}
.kb .row{display:flex;gap:5px}
.kb button,.kb a{flex:1;position:relative;padding:10px 8px;border-radius:10px;font:600 14px/1.25 var(--font);text-align:center;color:#fff;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(6px);transition:background .2s,transform .2s var(--spring),box-shadow .25s}
.kb button:hover,.kb a:hover{background:rgba(255,95,210,.28);transform:translateY(-2px);box-shadow:0 8px 20px -8px rgba(255,95,210,.7)}
.kb .u::after{content:"";position:absolute;top:5px;right:6px;width:8px;height:8px;border:1.5px solid rgba(255,255,255,.55);border-left:0;border-bottom:0;transform:rotate(0)}
/* sticker: no bubble */
.msg.stk{max-width:none}.stk .bub{background:none;box-shadow:none;padding:0}.stk .bub::after{display:none}
.stk .sticker{width:168px;height:168px;image-rendering:auto;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}
@keyframes float{50%{transform:translateY(-6px) rotate(1.5deg)}}
.stk .tm{position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,.4);padding:1px 7px;border-radius:10px;margin:0}
/* link preview card */
.lp{display:block;margin:4px 0 2px;padding:6px 10px;border-left:3px solid var(--pink);border-radius:2px 8px 8px 2px;background:rgba(0,0,0,.18);font-size:13.5px}
.lp b{display:block;color:var(--pink-pale)}.lp small{display:block;color:var(--muted);line-height:1.45}
.lp img{margin-top:6px;border-radius:8px;width:100%;aspect-ratio:16/9;object-fit:cover}
/* input bar */
.tgf{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--line);background:rgba(23,7,50,.7);color:var(--muted);font-size:14px}
.tgf svg{width:22px;height:22px;flex:none;opacity:.7}.tgf .in{flex:1;padding:9px 14px;border-radius:20px;background:rgba(255,255,255,.07)}
.tgf .send{width:36px;height:36px;border-radius:50%;background:var(--grad);display:grid;place-items:center;opacity:1}.tgf .send svg{opacity:1;width:18px;height:18px}
/* chat-list rows */
.rows{display:grid}
.crow{display:flex;gap:14px;align-items:center;padding:14px 16px;border-radius:16px;transition:background .25s,transform .3s var(--ease)}
.crow:hover{background:rgba(255,95,210,.1);transform:translateX(4px)}
.crow .ico{flex:none;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--violet),var(--pink));box-shadow:0 8px 22px -8px rgba(255,95,210,.8)}
.crow .ico svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.crow .tx{min-width:0;flex:1}.crow h3{font:700 17px/1.3 var(--font)}.crow p{color:var(--muted);font-size:14.5px;line-height:1.5}
.crow .mt{display:flex;flex-direction:column;align-items:flex-end;gap:6px;font-size:12px;color:var(--muted)}
.badge{min-width:22px;padding:2px 7px;border-radius:12px;background:var(--pink);color:#2a0630;font:800 12px/1.5 var(--font);text-align:center}
.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:rgba(77,214,234,.12);border:1px solid var(--line-2);color:var(--cyan-soft);font:600 13px/1 var(--font)}