/* ================================================================
   ВЕЧЕ 3 — оформление, стикеры, каналы, галерея, боты, анимации.
   Подключается после style.css и переопределяет его точечно.
   ================================================================ */

/* ---------- токены из «Оформления» ---------- */
:root { --bubble-r: 18px; --bubble-tail: 6px; --fs: 1; --accent-soft: rgba(124,95,245,.16); --accent-ring: rgba(124,95,245,.45); --out-shadow: rgba(74,111,245,.28); --spring2: cubic-bezier(.34,1.56,.64,1); --glass-bg: rgba(20,24,38,.62); --glass-line: rgba(255,255,255,.14); --glass-hi: rgba(255,255,255,.22); }
[data-theme="light"] { --glass-bg: rgba(255,255,255,.66); --glass-line: rgba(15,23,42,.10); --glass-hi: rgba(255,255,255,.9); }
[data-amoled="1"] { --bg:#000; --surface:#050608; --surface-2:#0a0b0f; --surface-3:#121419; --chat-bg:#000; --in-bg:#16181f; --pop-bg:#0e1015; --field-bg:rgba(255,255,255,.06); --glass-bg: rgba(8,9,12,.62); }

.bubble { font-size: calc(15px * var(--fs)); border-radius: var(--bubble-r); }
.msg-row.in .bubble { border-bottom-left-radius: var(--bubble-tail); }
.msg-row.out .bubble { border-bottom-right-radius: var(--bubble-tail); box-shadow: 0 2px 10px var(--out-shadow); }
.msg-row.in.cont .bubble { border-top-left-radius: var(--bubble-tail); }
.msg-row.out.cont .bubble { border-top-right-radius: var(--bubble-tail); }
.chat-item-name { font-size: calc(15px * var(--fs)); }
.chat-item-preview { font-size: calc(13.5px * var(--fs)); }
#msg-input { font-size: calc(15px * var(--fs)); }
.post-text, .cmt-bubble .msg-text { font-size: calc(14.5px * var(--fs)); }
.chat-item.active { background: var(--accent-soft); border-color: var(--accent-ring); }
#msg-input:focus { border-color: var(--accent-ring); box-shadow: 0 0 0 3px var(--accent-soft); }
#search:focus { border-color: var(--a1); box-shadow: 0 0 0 3px var(--accent-soft); }
.reaction.mine { border-color: var(--a1); background: var(--accent-soft); }
.unread-badge:not(.muted) { background: var(--a1); }

/* форма аватаров */
[data-avatar="squircle"] .chat-avatar, [data-avatar="squircle"] .me-avatar, [data-avatar="squircle"] .msg-avatar,
[data-avatar="squircle"] .chat-header-avatar, [data-avatar="squircle"] .profile-avatar, [data-avatar="squircle"] .call-avatar,
[data-avatar="squircle"] .bs-av, [data-avatar="squircle"] .be-av, [data-avatar="squircle"] .fs-av, [data-avatar="squircle"] .lk-av { border-radius: 30% !important; }

/* ---------- обои ---------- */
#chat-pane { background: var(--chat-bg); background-image: none; }
.wall-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background-color: var(--chat-bg); transition: background .35s ease, filter .3s ease; }
.wall-layer::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,var(--wall-dim, 0)); pointer-events: none; }
.wall-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#chat-empty, #chat-view { position: relative; z-index: 1; }
#sidebar { position: relative; }
#sidebar > *:not(.wall-layer) { position: relative; z-index: 1; }
[data-list-wall="1"] #sidebar { background: transparent; }
[data-list-wall="1"] .chat-item { background: color-mix(in srgb, var(--surface) 78%, transparent); margin-bottom: 4px; }
[data-list-wall="1"] .chat-item:hover { background: color-mix(in srgb, var(--surface) 90%, transparent); }
.day-sep, .sys-msg { background: color-mix(in srgb, var(--surface-2) 86%, transparent); }

/* ---------- жидкое стекло ---------- */
[data-glass="on"] #chat-header, [data-glass="on"] #composer, [data-glass="on"] #pinned-bar, [data-glass="on"] #reply-bar,
[data-glass="on"] .channel-bar, [data-glass="on"] .bot-kb, [data-glass="on"] .cmt-head, [data-glass="on"] .cmt-composer {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(22px) saturate(185%); backdrop-filter: blur(22px) saturate(185%);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 8px 30px rgba(0,0,0,.12) !important;
}
[data-glass="on"] #chat-header { border-bottom-color: var(--glass-line); }
[data-glass="on"] #composer { border-top-color: var(--glass-line); }
[data-glass="on"] .popup, [data-glass="on"] #emoji-panel, [data-glass="on"] .ctx-menu, [data-glass="on"] .chat-menu-pop {
  background: var(--glass-bg) !important; -webkit-backdrop-filter: blur(28px) saturate(190%); backdrop-filter: blur(28px) saturate(190%);
  border: 1px solid var(--glass-line); box-shadow: 0 24px 60px rgba(0,0,0,.35), inset 0 1px 0 var(--glass-hi) !important;
}
[data-glass="on"] .modal { background: color-mix(in srgb, var(--surface) 82%, transparent); -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%); box-shadow: 0 40px 100px rgba(0,0,0,.45), inset 0 1px 0 var(--glass-hi); }
[data-glass="on"] .scroll-down { background: var(--glass-bg); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
/* «линза»: мягкий блик по верхнему краю стеклянных кнопок */
[data-glass="on"] #composer .comp-btn.send, [data-glass="on"] .btn-primary { position: relative; overflow: hidden; }
[data-glass="on"] #composer .comp-btn.send::after, [data-glass="on"] .btn-primary::after { content: ''; position: absolute; left: 8%; right: 8%; top: 1px; height: 45%; border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0)); pointer-events: none; }
.btn-primary { background: var(--grad); }

/* ---------- анимации ---------- */
.msg-row.pop-in { animation: v3-pop .36s var(--spring2) both; }
.msg-row.out.pop-in { transform-origin: bottom right; }
.msg-row.in.pop-in { transform-origin: bottom left; }
@keyframes v3-pop { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }
.pop-out { animation: v3-out .22s ease both; }
@keyframes v3-out { to { opacity: 0; transform: scale(.9); height: 0; margin: 0; } }
.reaction { transition: transform .18s var(--spring2), background .15s; }
.reaction.bump { animation: v3-bump .42s var(--spring2); }
@keyframes v3-bump { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: none; } }
.reaction:active { transform: scale(.9); }
.heart-burst { position: absolute; left: 50%; top: 50%; font-size: 42px; pointer-events: none; animation: v3-heart .8s ease-out forwards; z-index: 5; }
@keyframes v3-heart { 0% { transform: translate(-50%,-50%) scale(.2); opacity: 0; } 30% { transform: translate(-50%,-50%) scale(1.25); opacity: 1; } 100% { transform: translate(-50%,-120%) scale(.9); opacity: 0; } }
.chat-item { transition: background .18s ease, transform .18s var(--spring2); }
.chat-item:active { transform: scale(.985); }
.comp-btn, .icon-btn, .btn-primary, .btn-ghost, .new-opt, .lk-chip, .lk-sw, .st-btn { transition: transform .16s var(--spring2), background .15s, color .15s, border-color .15s; }
.comp-btn:active, .icon-btn:active, .btn-primary:active, .btn-ghost:active, .lk-chip:active, .st-btn:active { transform: scale(.92); }
#btn-send:not(.hidden), #btn-mic:not(.hidden), #btn-circle:not(.hidden) { animation: v3-swap .26s var(--spring2); }
@keyframes v3-swap { from { opacity: 0; transform: scale(.4) rotate(-20deg); } to { opacity: 1; transform: none; } }
#emoji-panel:not(.hidden), #attach-menu:not(.hidden), .throw-pop:not(.hidden), .cmds-pop:not(.hidden), .chat-menu-pop:not(.hidden) { animation: v3-sheet .26s var(--spring2); }
@keyframes v3-sheet { from { opacity: 0; transform: translateY(14px) scale(.95); } to { opacity: 1; transform: none; } }
.modal-overlay:not(.hidden) .modal { animation: v3-modal .34s var(--spring2); }
@keyframes v3-modal { from { opacity: 0; transform: translateY(30px) scale(.96); } to { opacity: 1; transform: none; } }
#reply-bar:not(.hidden) { animation: v3-slide-up .24s ease; }
@keyframes v3-slide-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
  body.chat-open #chat-pane { animation: v3-push .3s cubic-bezier(.2,.8,.2,1); }
  @keyframes v3-push { from { transform: translateX(28%); opacity: .4; } to { transform: none; opacity: 1; } }
}
[data-anim="calm"] * { animation-duration: .45s !important; animation-timing-function: ease-out !important; }
[data-anim="off"] *, [data-anim="off"] *::before, [data-anim="off"] *::after { animation: none !important; transition: none !important; }

/* ---------- стикеры ---------- */
.bubble.sticker-bubble { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; }
.bubble.sticker-bubble .meta { position: static; display: inline-flex; margin: 2px 0 0 auto; padding: 1px 8px; border-radius: 10px; background: rgba(0,0,0,.42); color: #fff !important; float: right; }
.sticker-bubble .reply-quote { background: var(--surface-2); border-radius: 10px; margin-bottom: 4px; }
img.sticker { width: 168px; height: 168px; object-fit: contain; display: block; filter: drop-shadow(0 4px 10px rgba(0,0,0,.18)); animation: v3-sticker .5s var(--spring2); }
@keyframes v3-sticker { from { transform: scale(.4) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
#emoji-panel { height: 340px; max-width: 420px; }
#emoji-tabs .st-tab { opacity: .7; padding: 3px 5px; }
#emoji-tabs .st-tab img { width: 26px; height: 26px; object-fit: contain; display: block; }
#emoji-tabs .st-tab .tab-ic { font-size: 19px; }
#emoji-tabs button.active { background: var(--accent-soft); opacity: 1; }
#emoji-grid.stickers { grid-template-columns: repeat(4, 1fr); gap: 6px; align-content: start; }
.st-btn { border: none; background: transparent; padding: 4px; border-radius: 14px; cursor: pointer; aspect-ratio: 1; }
.st-btn:hover { background: var(--hover); transform: scale(1.06); }
.st-btn img { width: 100%; height: 100%; object-fit: contain; }
.st-empty { grid-column: 1 / -1; text-align: center; color: var(--text-faint); padding: 36px 14px; font-size: 13.5px; line-height: 1.5; }
.st-add { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px; border-radius: 14px; border: 1px dashed var(--accent-ring); color: var(--accent-text); font-weight: 600; font-size: 14px; cursor: pointer; }
.st-add small { color: var(--text-faint); font-weight: 400; font-size: 11.5px; }

/* ---------- броски ---------- */
.bubble.throw-bubble { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; }
.throw { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 6px; }
.throw-big { font-size: 78px; line-height: 1.05; filter: drop-shadow(0 6px 14px rgba(0,0,0,.25)); }
.throw-big.rolling { animation: v3-roll 1.1s cubic-bezier(.2,.7,.3,1); }
.throw-darts .throw-big.rolling, .throw-basket .throw-big.rolling, .throw-football .throw-big.rolling, .throw-bowling .throw-big.rolling { animation: v3-fly 1.1s cubic-bezier(.2,.7,.3,1); }
@keyframes v3-roll { 0% { transform: rotate(0) scale(.5); } 50% { transform: rotate(540deg) scale(1.15); } 100% { transform: rotate(720deg) scale(1); } }
@keyframes v3-fly { 0% { transform: translate(-40px, 60px) scale(.4); } 55% { transform: translate(10px, -30px) scale(1.15); } 100% { transform: none; } }
.throw-slots .throw-big { display: flex; gap: 6px; font-size: 40px; }
.throw-slots .reel { width: 64px; height: 72px; border-radius: 14px; background: var(--surface-2); border: 2px solid var(--gold); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.throw-slots .reel b { font-size: 34px; }
.throw-slots .throw-big.rolling .reel:not(.stop) b { animation: v3-reel .12s linear infinite; }
@keyframes v3-reel { from { transform: translateY(-40%); } to { transform: translateY(40%); } }
.throw-slots .reel.stop { animation: v3-bump .35s var(--spring2); }
.throw-res { font-weight: 700; font-size: 14px; padding: 3px 12px; border-radius: 12px; background: color-mix(in srgb, var(--surface-2) 90%, transparent); transition: opacity .3s; }
.throw-pop { position: absolute; bottom: 74px; left: 14px; display: flex; gap: 4px; padding: 8px; }
.throw-pop button { width: 52px !important; min-width: 0 !important; height: 52px; font-size: 30px !important; justify-content: center; padding: 0 !important; }
.throw-pop button:hover { transform: scale(1.15); }

/* ---------- каналы: посты ---------- */
.msg-row.post-row { align-self: center; width: min(560px, 96%); max-width: none; flex-direction: column; align-items: stretch; gap: 0; }
.bubble.post-bubble { background: var(--in-bg) !important; color: var(--in-text) !important; border: 1px solid var(--line) !important; border-radius: calc(var(--bubble-r) + 2px) !important; padding: 12px 16px 10px; box-shadow: 0 2px 12px rgba(0,0,0,.12) !important; }
.bubble.post-bubble.media-bubble { padding: 0 0 10px; overflow: hidden; }
.bubble.post-bubble.media-bubble .caption, .bubble.post-bubble.media-bubble .meta { padding: 0 14px; }
.bubble.post-bubble .photo { width: 100%; max-height: 520px; border-radius: 0; }
.bubble.post-bubble .meta { color: var(--in-meta) !important; }
.post-views-meta { opacity: .9; }
.post-row .reactions { margin: 6px 4px 0; }
.post-comments { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 6px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--in-bg) 92%, transparent); color: var(--accent-text); font: 600 13.5px/1 inherit; font-family: inherit; cursor: pointer; transition: background .15s; }
.post-comments:hover { background: var(--hover); }
.pc-avs { display: flex; }
.pc-avs i { width: 22px; height: 22px; border-radius: 50%; margin-right: -6px; border: 2px solid var(--in-bg); display: flex; align-items: center; justify-content: center; color: #fff; font-style: normal; font-size: 9px; background-size: cover; }
.pc-avs:empty { display: none; }
.pc-txt { flex: 1; text-align: left; }
.pc-go { font-size: 20px; opacity: .6; }
.channel-bar { display: flex; justify-content: center; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--surface-2); border-top: 1px solid var(--line); }
.channel-bar button { width: min(420px, 100%); padding: 12px; border: none; border-radius: 16px; font: 700 15px inherit; font-family: inherit; cursor: pointer; background: var(--field-bg); color: var(--accent-text); }
.channel-bar .cb-join { background: var(--grad); color: #fff; box-shadow: 0 6px 18px var(--out-shadow); }
.ci-link { margin: 10px 0 4px; padding: 10px 12px; border-radius: 12px; background: var(--field-bg); color: var(--accent-text); font-size: 13px; cursor: pointer; word-break: break-all; }
.pub-badge { font-size: 11px; font-weight: 700; color: var(--accent-text); background: var(--accent-soft); padding: 3px 8px; border-radius: 9px; flex-shrink: 0; }
.new-grid { flex-wrap: wrap; }
.new-grid .new-opt { flex: 1 1 40%; }

/* ---------- комментарии ---------- */
.comments-view { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; background: var(--chat-bg); transform: translateX(100%); transition: transform .28s cubic-bezier(.2,.8,.2,1); }
.comments-view.open { transform: none; }
.cmt-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; padding-top: calc(10px + env(safe-area-inset-top, 0px) * 0); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.cmt-title { font-weight: 700; font-size: 15.5px; }
.cmt-sub { font-size: 12px; color: var(--text-dim); }
.cmt-scroll { flex: 1; overflow-y: auto; padding: 14px 14px 10px; display: flex; flex-direction: column; }
.cmt-post-card { background: var(--in-bg); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; margin-bottom: 14px; }
.cmt-post-card img { width: 100%; max-height: 260px; object-fit: cover; border-radius: 12px; margin-top: 8px; cursor: zoom-in; }
.cmt-list { display: flex; flex-direction: column; gap: 8px; }
.cmt-row { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.cmt-row .msg-avatar { cursor: pointer; }
.cmt-bubble { max-width: 82%; background: var(--in-bg); border: 1px solid var(--line); border-radius: var(--bubble-r); border-bottom-left-radius: var(--bubble-tail); padding: 7px 12px 6px; position: relative; }
.cmt-row.mine .cmt-bubble { background: var(--out-bg); color: #fff; border: none; }
.cmt-row.mine .cmt-name { color: #fff !important; opacity: .85; }
.cmt-bubble.st { background: transparent !important; border: none; padding: 0; }
.cmt-bubble img.sticker { width: 130px; height: 130px; }
.cmt-bubble img.photo { max-width: 240px; border-radius: 12px; display: block; margin-top: 4px; }
.cmt-name { font-size: 12.5px; font-weight: 700; margin-bottom: 1px; }
.cmt-meta { font-size: 10.5px; opacity: .6; text-align: right; margin-top: 2px; }
.cmt-row .reactions { flex-basis: 100%; margin-left: 38px; }
.cmt-composer { display: flex; align-items: flex-end; gap: 6px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: var(--surface-2); border-top: 1px solid var(--line); }
.cmt-composer textarea { flex: 1; resize: none; border: 1px solid transparent; background: var(--field-bg); color: var(--text); border-radius: 20px; padding: 10px 14px; font: inherit; font-size: calc(15px * var(--fs)); max-height: 120px; outline: none; }
.cmt-composer textarea:focus { border-color: var(--accent-ring); }
.cmt-composer .comp-btn.send { background: var(--out-bg); color: #fff; }
.cmt-stickers { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; max-height: 190px; overflow-y: auto; padding: 8px; background: var(--surface-2); border-top: 1px solid var(--line); }
.cmt-stickers button { border: none; background: transparent; padding: 2px; border-radius: 10px; cursor: pointer; aspect-ratio: 1; }
.cmt-stickers button img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- реакции ---------- */
.reactions { gap: 5px; }
.reaction { font-family: inherit; font-size: 13px; padding: 3px 9px 3px 7px; gap: 4px; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface-2) 88%, transparent); color: var(--text); }
.reaction .re { font-size: 15px; line-height: 1; }
.reaction .rc { font-weight: 700; font-size: 12px; }
.reaction .rav { width: 18px; height: 18px; border-radius: 50%; margin-left: -3px; border: 1.5px solid var(--surface-2); display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 8px; color: #fff; background-size: cover; }
.msg-row.out .reactions { justify-content: flex-end; }
.ctx-reactions { flex-wrap: wrap; max-width: 330px; }
.ctx-reactions button.on { background: var(--accent-soft); }
.ctx-reactions button.more { font-size: 18px; width: 34px; height: 34px; border-radius: 50%; background: var(--field-bg); color: var(--text-dim); }
.ctx-reactions.expanded { max-height: 200px; overflow-y: auto; display: grid; grid-template-columns: repeat(8, 1fr); }

/* ---------- галерея ---------- */
.gallery { position: fixed; inset: 0; z-index: 500; background: rgba(0,0,0,var(--gal-bg, .96)); display: flex; flex-direction: column; outline: none; animation: v3-fade .2s ease; user-select: none; touch-action: none; }
.gallery.closing { animation: v3-fade-out .2s ease forwards; }
@keyframes v3-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes v3-fade-out { to { opacity: 0; } }
.gal-top { display: flex; align-items: center; gap: 12px; padding: calc(12px + env(safe-area-inset-top)) 16px 10px; color: #fff; z-index: 2; background: linear-gradient(180deg, rgba(0,0,0,.55), transparent); }
.gal-count { font-weight: 700; font-size: 15px; }
.gal-caption { flex: 1; font-size: 13px; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gal-btn { border: none; background: rgba(255,255,255,.12); color: #fff; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.gal-btn:hover { background: rgba(255,255,255,.22); }
.gal-stage { flex: 1; position: relative; overflow: hidden; }
.gal-track { position: absolute; inset: 0; }
.gal-slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 8px; }
.gal-slide img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.5); transform-origin: center; will-change: transform; }
.gal-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; border: none; width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.gal-nav:hover { background: rgba(255,255,255,.24); }
.gal-nav.prev { left: 16px; } .gal-nav.next { right: 16px; }
.gal-nav.hidden { display: none; }
.gal-thumbs { display: flex; gap: 6px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); overflow-x: auto; justify-content: safe center; background: linear-gradient(0deg, rgba(0,0,0,.55), transparent); }
.gal-thumbs:empty { display: none; }
.gal-thumbs img { width: 52px; height: 52px; object-fit: cover; border-radius: 10px; opacity: .45; cursor: pointer; flex-shrink: 0; transition: opacity .15s, transform .15s; }
.gal-thumbs img.on { opacity: 1; transform: scale(1.08); outline: 2px solid #fff; }
@media (max-width: 760px) { .gal-nav { display: none; } }

/* ---------- боты ---------- */
.bot-inline { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.bi-row { display: flex; gap: 4px; }
.bi-btn { flex: 1; min-width: 0; padding: 9px 8px; border: none; border-radius: 12px; font: 600 13.5px inherit; font-family: inherit; cursor: pointer; background: rgba(255,255,255,.14); color: inherit; transition: background .15s, transform .15s var(--spring2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-row.in .bi-btn { background: var(--accent-soft); color: var(--accent-text); }
.bi-btn:hover { filter: brightness(1.1); }
.bi-btn:active { transform: scale(.95); }
.bi-btn.url::after { content: ' ↗'; opacity: .7; }
.bi-btn.busy { opacity: .6; pointer-events: none; }
.bot-kb { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; background: var(--surface-2); border-top: 1px solid var(--line); max-height: 40vh; overflow-y: auto; }
.kb-row { display: flex; gap: 6px; }
.kb-row button { flex: 1; min-width: 0; padding: 12px 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--field-bg); color: var(--text); font: 600 14px inherit; font-family: inherit; cursor: pointer; transition: transform .15s var(--spring2), background .15s; }
.kb-row button:hover { background: var(--hover); }
.kb-row button:active { transform: scale(.95); }
#btn-cmds { font-weight: 800; font-size: 19px; color: var(--accent-text); }
.cmds-pop { position: absolute; bottom: 74px; left: 14px; max-height: 50vh; overflow-y: auto; }
.cmds-pop button { flex-direction: column; align-items: flex-start !important; gap: 1px !important; }
.cmds-pop button b { color: var(--accent-text); }
.cmds-pop button span { font-size: 12.5px; color: var(--text-dim); }
.bot-start { position: absolute; left: 0; right: 0; bottom: 84px; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 20px; z-index: 3; pointer-events: none; }
.bot-start > * { pointer-events: auto; }
.bs-card { text-align: center; background: color-mix(in srgb, var(--surface) 88%, transparent); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid var(--line); border-radius: 22px; padding: 22px 26px; max-width: 360px; box-shadow: var(--shadow-pop); animation: v3-modal .4s var(--spring2); }
.bs-av { width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; }
.bs-name { font-weight: 800; font-size: 18px; }
.bs-user { font-size: 13px; color: var(--text-dim); margin-top: 2px; }
.bs-bio { margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--text); white-space: pre-wrap; }
.bs-go { width: min(360px, 90%); animation: v3-modal .5s var(--spring2); }
.set-entry { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 16px; background: var(--field-bg); color: var(--text); cursor: pointer; font-family: inherit; text-align: left; }
.set-entry:hover { background: var(--hover); }
.set-entry .se-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--grad); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.set-entry b { display: block; font-size: 15px; }
.set-entry small { display: block; font-size: 12px; color: var(--text-faint); margin-top: 2px; }
.set-entry > span:nth-child(2) { flex: 1; }
.se-go { font-size: 22px; color: var(--text-faint); }
.be-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.be-head > div:nth-child(2) { flex: 1; min-width: 0; }
.be-av { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; cursor: pointer; flex-shrink: 0; }
.be-name { font-weight: 800; font-size: 17px; }
.be-user { font-size: 12.5px; color: var(--text-dim); }
.be-head .btn-ghost { width: auto; margin: 0; padding: 9px 12px; font-size: 13px; }
.be-token code { display: block; padding: 10px 12px; border-radius: 12px; background: var(--field-bg); font-size: 12px; word-break: break-all; user-select: all; }
.be-tok-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.be-tok-acts .btn-ghost { flex: 1; min-width: 120px; text-align: center; text-decoration: none; font-size: 13px; }
.be-cmds, .rule-card textarea, .rule-card input, .rule-card select { width: 100%; border: 1px solid var(--line); background: var(--field-bg); color: var(--text); border-radius: 12px; padding: 9px 11px; font: inherit; font-size: 13.5px; margin-top: 6px; resize: vertical; box-sizing: border-box; }
.rule-card { border: 1px solid var(--line); border-radius: 16px; padding: 12px; margin-top: 10px; background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.rule-title { font-weight: 700; font-size: 14px; }
.rule-when { display: flex; gap: 6px; }
.rule-when select { width: 46%; }
.rule-card .btn-ghost { padding: 8px; font-size: 13px; }
.bots-docs { display: block; text-align: center; text-decoration: none; }

/* ---------- очко ---------- */
.bj-hand { margin: 6px 0; }
.bj-label { font-size: 12.5px; font-weight: 700; opacity: .8; margin-bottom: 4px; }
.bj-cards { display: flex; gap: 5px; flex-wrap: wrap; }
.bj-card { width: 38px; height: 52px; border-radius: 8px; background: #fff; color: #111; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; box-shadow: 0 3px 8px rgba(0,0,0,.25); animation: v3-card .35s var(--spring2); }
.bj-card small { font-size: 14px; line-height: 1; }
.bj-card.red { color: #e11d48; }
.bj-card.back { background: linear-gradient(135deg, #5b48e0, #22d3ee); color: rgba(255,255,255,.7); font-size: 26px; }
@keyframes v3-card { from { transform: translateY(-14px) rotate(-10deg); opacity: 0; } to { transform: none; opacity: 1; } }
.bj-acts { display: flex; gap: 6px; margin-top: 8px; }
.bj-acts .dice-roll-btn { flex: 1; margin: 0; }
.dice-roll-btn.ghost { background: rgba(255,255,255,.14); }

/* ---------- лента ---------- */
.feed-modal { max-width: 560px; }
.feed-tabs { display: flex; gap: 6px; padding: 10px 18px 0; }
.feed-tabs button { flex: 1; padding: 9px; border: none; border-radius: 12px; background: var(--field-bg); color: var(--text-dim); font: 600 13.5px inherit; font-family: inherit; cursor: pointer; }
.feed-tabs button.active { background: var(--accent-soft); color: var(--accent-text); }
.feed-suggest { margin-bottom: 14px; }
.fs-title { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; }
.fs-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.fs-card { flex: 0 0 150px; border: 1px solid var(--line); border-radius: 18px; padding: 14px 10px; text-align: center; background: var(--field-bg); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fs-av { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; background-size: cover; }
.fs-name { font-weight: 700; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.fs-sub { font-size: 11.5px; color: var(--text-faint); }
.fs-join { margin-top: 4px; border: none; padding: 7px 12px; border-radius: 12px; background: var(--grad); color: #fff; font: 700 12.5px inherit; font-family: inherit; cursor: pointer; }
.fs-join.small { margin: 0; padding: 6px 10px; }
.fs-join:disabled { background: var(--field-bg); color: var(--text-dim); }
.chan-post .ph-name { cursor: pointer; }
.chan-body .chan-photo { width: 100%; max-height: 460px; object-fit: cover; border-radius: 14px; margin-bottom: 8px; cursor: zoom-in; }
.chan-reacts { flex: 1; font-size: 13.5px; }
.post .post-comments { margin-top: 10px; }
.post { background: var(--surface-2); border-color: var(--line); }
.cmt-btn { gap: 4px; }
.feed-more { margin: 4px 0 10px; }

/* ---------- меню чата ---------- */
.chat-menu-pop { position: fixed; bottom: auto; left: auto; z-index: 200; padding: 6px; min-width: 230px; }
.chat-menu-pop button.danger { color: var(--danger); }

/* ---------- автожалобы ---------- */
.rep.auto { border-color: rgba(255,202,87,.4); }
.rep-auto { margin-top: 8px; padding: 8px 10px; border-radius: 12px; background: rgba(255,202,87,.08); }
.rep-auto-head { font-weight: 700; font-size: 12.5px; color: var(--gold); margin-bottom: 4px; }
.rep-auto-item { font-size: 13px; padding: 5px 0; border-top: 1px dashed var(--line); word-break: break-word; }
.rep-auto-item span { display: block; font-size: 11px; color: var(--text-faint); }
.rep-auto-item em { display: inline-block; margin-left: 6px; font-style: normal; font-size: 11px; padding: 1px 6px; border-radius: 6px; background: rgba(240,65,92,.15); color: var(--danger); }

/* ---------- экран «Оформление» ---------- */
.lk-preview { position: relative; height: 210px; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); margin-bottom: 6px; }
.lk-preview.small { height: 150px; }
.lk-preview-wall { position: absolute; inset: 0; }
.lk-preview-wall::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,var(--wall-dim, 0)); }
.lk-preview-msgs { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 14px; }
.lk-pm { display: flex; align-items: flex-end; gap: 6px; }
.lk-pm.out { justify-content: flex-end; }
.lk-av { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg,#7a5cff,#00d4ff); color: #fff; font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.lk-bub { max-width: 75%; padding: 8px 12px; font-size: calc(14.5px * var(--fs)); border-radius: var(--bubble-r); }
.lk-bub.in { background: var(--in-bg); color: var(--in-text); border-bottom-left-radius: var(--bubble-tail); }
.lk-bub.out { background: var(--out-bg); color: #fff; border-bottom-right-radius: var(--bubble-tail); }
.lk-bub small { display: block; text-align: right; font-size: 11px; opacity: .75; }
.lk-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.lk-chip { flex: 1; min-width: 100px; padding: 10px 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--field-bg); color: var(--text); font: 600 13.5px inherit; font-family: inherit; cursor: pointer; }
.lk-chip.sel { border-color: var(--a1); background: var(--accent-soft); }
.lk-swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.lk-sw { width: 38px; height: 38px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; box-shadow: inset 0 0 0 2px rgba(255,255,255,.15); position: relative; }
.lk-sw.sel { border-color: var(--text); }
.lk-sw-custom { background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; text-shadow: 0 1px 3px rgba(0,0,0,.6); overflow: hidden; }
.lk-sw-custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.lk-bubbles { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.lk-bubset { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; border: none; background: transparent; color: var(--text-faint); font: 500 11.5px inherit; font-family: inherit; cursor: pointer; }
.lk-bubset i { width: 62px; height: 38px; border-radius: 16px 16px 5px 16px; border: 2.5px solid transparent; }
.lk-bubset.sel i { border-color: var(--text); }
.lk-bubset.sel { color: var(--text); }
.lk-own { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--text-dim); }
.lk-own input[type=color] { width: 44px; height: 32px; border: none; border-radius: 10px; background: transparent; cursor: pointer; }
.lk-slider { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-faint); }
.lk-slider span { width: 52px; } .lk-slider span:last-child { text-align: right; }
.lk-slider input { flex: 1; accent-color: var(--a1); }
.lk-sub { font-size: 12.5px; color: var(--text-dim); margin: 10px 0 2px; }
.lk-hint { font-size: 12px; color: var(--text-faint); margin: 4px 2px 8px; line-height: 1.45; }
.lk-walls { display: flex; gap: 10px; overflow-x: auto; padding: 4px 0 6px; }
.lk-wall { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; border: none; background: transparent; color: var(--text-faint); font: 500 11.5px inherit; font-family: inherit; cursor: pointer; }
.lk-wall-pv { position: relative; width: 78px; height: 124px; border-radius: 16px; overflow: hidden; border: 2px solid var(--line); background: var(--chat-bg); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lk-wall.sel .lk-wall-pv { border-color: var(--a1); box-shadow: 0 0 0 3px var(--accent-soft); }
.lk-wall.sel { color: var(--text); }
.lk-wall-pv .lk-b { position: absolute; height: 12px; border-radius: 6px; z-index: 1; }
.lk-wall-pv .lk-b.in { left: 8px; top: 48px; width: 38px; background: var(--in-bg); }
.lk-wall-pv .lk-b.out { right: 8px; bottom: 14px; width: 32px; background: var(--out-bg); }
.lk-upload .lk-wall-pv { border-style: dashed; color: var(--accent-text); }
.lk-upload b { font-size: 26px; } .lk-upload small { font-size: 11px; }

@media (max-width: 760px) {
  .msg-row.post-row { width: 100%; }
  #emoji-panel { max-width: none; }
  .bot-start { bottom: 72px; }
}

/* правки после проверки */
.bubble.post-bubble.media-bubble img.photo { width: 100% !important; max-width: none !important; height: auto; max-height: 560px; object-fit: cover; display: block; border-radius: 0; margin: 0 0 8px; }
.bubble:has(.bot-inline) { min-width: min(260px, 70vw); }