/* ==========================================================================
   LSchat — стили экранов приложения
   ========================================================================== */
:root { --msg-fs: 17px; --bubble-r: 18px; --wallpaper: none; }
:root[data-accent="green"] { --tint: var(--sys-green); --bubble-out: var(--sys-green); }
:root[data-accent="red"] { --tint: var(--sys-red); --bubble-out: var(--sys-red); }
:root[data-accent="orange"] { --tint: var(--sys-orange); --bubble-out: var(--sys-orange); }
:root[data-accent="purple"] { --tint: var(--sys-purple); --bubble-out: var(--sys-purple); }
:root[data-accent="pink"] { --tint: var(--sys-pink); --bubble-out: var(--sys-pink); }
:root[data-accent="teal"] { --tint: #32ADE6; --bubble-out: #32ADE6; }
:root[data-accent="indigo"] { --tint: var(--sys-indigo); --bubble-out: var(--sys-indigo); }
.msg { font-size: var(--msg-fs); border-radius: var(--bubble-r); }

/* ---------- Список чатов ---------- */
.folders { display: flex; gap: 0; padding: 0 8px; overflow-x: auto; scrollbar-width: none; border-bottom: .5px solid var(--separator); background: var(--bg); }
.folders::-webkit-scrollbar { display: none; }
.folder-tab { padding: 8px 10px 10px; font-size: var(--fs-subhead); font-weight: 500; color: var(--label-secondary); white-space: nowrap; position: relative; display: flex; gap: 6px; align-items: center; }
.folder-tab.is-active { color: var(--tint); }
.folder-tab.is-active::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--tint); }
.folder-tab .badge { height: 18px; min-width: 18px; font-size: 11px; }
.folder-tab.is-active .badge { background: var(--tint); }

.stories { display: flex; gap: 14px; padding: 6px 16px 10px; overflow-x: auto; scrollbar-width: none; }
.stories::-webkit-scrollbar { display: none; }
.story { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 64px; flex: none; }
.story .ring { padding: 2.5px; border-radius: 50%; background: linear-gradient(135deg, #34C759, #007AFF); }
.story .ring.seen { background: var(--sys-gray4); }
.story .ring.mine { background: transparent; position: relative; }
.story .ring .avatar { border: 2px solid var(--bg); }
.story .add { position: absolute; right: 0; bottom: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--tint); color: #fff; border: 2px solid var(--bg); font-size: 14px; line-height: 16px; text-align: center; font-weight: 700; }
.story span { font-size: 11px; color: var(--label); max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.swipe-row { position: relative; overflow: hidden; background: var(--bg); }
.swipe-content { position: relative; z-index: 1; background: var(--bg); }
.swipe-actions { position: absolute; top: 0; bottom: 0; display: flex; z-index: 0; visibility: hidden; }
.swipe-row.swiped .swipe-actions, .swipe-row.dragging .swipe-actions { visibility: visible; }
.swipe-actions.right { right: 0; } .swipe-actions.left { left: 0; }
.swipe-btn { width: 74px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; font-size: 12px; }
.swipe-btn .swipe-ico svg { width: 24px; height: 24px; fill: #fff; }

.chat-row { display: flex; align-items: center; gap: 12px; padding: 8px 16px 8px 12px; min-height: 76px; position: relative; background: var(--bg); width: 100%; text-align: left; }
.chat-row:active { background: var(--cell-highlight); }
.chat-row.pinned-row { background: var(--bg-secondary); }
.chat-row::after { content: ""; position: absolute; left: 82px; right: 0; bottom: 0; height: .5px; background: var(--separator); }
.chat-row .avatar { width: 58px; height: 58px; font-size: 22px; }
.chat-row .avatar.icon-avatar svg { width: 30px; height: 30px; fill: #fff; }
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.chat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.chat-top { display: flex; align-items: center; gap: 4px; }
.chat-name { font-weight: 600; font-size: var(--fs-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 4px; min-width: 0; }
.chat-name .verified { width: 16px; height: 16px; fill: var(--tint); flex: none; }
.chat-name .mutedico { width: 14px; height: 14px; fill: var(--sys-gray); flex: none; }
.chat-name .lockico { width: 14px; height: 14px; fill: var(--sys-green); flex: none; }
.chat-time { margin-left: auto; font-size: var(--fs-subhead); color: var(--label-secondary); flex: none; display: flex; align-items: center; gap: 3px; }
.chat-time svg { width: 16px; height: 16px; color: var(--tint); }
.chat-bottom { display: flex; align-items: center; gap: 8px; }
.chat-preview { flex: 1; min-width: 0; font-size: var(--fs-subhead); color: var(--label-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; line-height: 1.25; max-height: 38px; }
.chat-preview .sender { color: var(--label); }
.chat-preview .draft { color: var(--sys-red); }
.chat-preview .typing-txt { color: var(--tint); }
.chat-meta { display: flex; align-items: center; gap: 6px; flex: none; }
.chat-meta .pinico { width: 16px; height: 16px; fill: var(--sys-gray3); }
.chat-meta .check-circle { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--sys-gray3); display: flex; align-items: center; justify-content: center; color: #fff; }
.chat-meta .check-circle.on { background: var(--tint); border-color: var(--tint); }
.chat-meta .check-circle svg { width: 12px; height: 12px; }
.edit-mode .chat-row { padding-left: 12px; }
.select-box { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--sys-gray3); display: flex; align-items: center; justify-content: center; color: #fff; flex: none; transition: all .15s; }
.select-box.on { background: var(--tint); border-color: var(--tint); }
.select-box svg { width: 12px; height: 12px; }

.archive-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 12px; background: var(--bg-secondary); width: 100%; position: relative; text-align: left; }
.archive-row .avatar { width: 58px; height: 58px; background: var(--sys-gray); }
.archive-row .avatar svg { width: 28px; height: 28px; fill: #fff; }
.archive-row::after { content: ""; position: absolute; left: 82px; right: 0; bottom: 0; height: .5px; background: var(--separator); }

.edit-toolbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 35; height: calc(var(--tab-h) + var(--sai-bottom)); padding-bottom: var(--sai-bottom); display: flex; align-items: center; justify-content: space-between; padding-left: 16px; padding-right: 16px; background: var(--bar-bg); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 -0.33px 0 var(--bar-border); color: var(--tint); font-size: var(--fs-body); }
.edit-toolbar button { color: var(--tint); } .edit-toolbar button:disabled { color: var(--label-tertiary); }
.edit-toolbar .destructive { color: var(--sys-red); }

/* Поиск */
.search-results .section-hdr { padding: 8px 16px; font-size: var(--fs-footnote); font-weight: 600; color: var(--label-secondary); background: var(--bg-secondary); text-transform: uppercase; }
.recent-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 16px; background: var(--fill-tertiary); font-size: var(--fs-subhead); margin: 4px 8px 4px 0; }
mark { background: none; color: var(--tint); font-weight: 600; }

/* ---------- Экран чата ---------- */
.chat-screen .content { padding-top: calc(var(--nav-h) + var(--sai-top)); background: var(--bg-secondary); position: relative; }

.nav-chat-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nav-chat-title .tav { display: none; }
.nav-chat-title .avatar { width: 36px; height: 36px; font-size: 14px; }
.nav-chat-title .t { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.nav-chat-title .t b { font-size: var(--fs-headline); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45vw; display: flex; gap: 4px; align-items: center; }
.nav-chat-title .t b svg { width: 14px; height: 14px; fill: var(--tint); }
.nav-chat-title .t small { font-size: var(--fs-caption1); color: var(--label-secondary); white-space: nowrap; }
.nav-chat-title .t small.online { color: var(--tint); }
.nav-chat-title .t small.typing-txt { color: var(--tint); }
.nav-btn.back .count { background: var(--sys-gray); color: #fff; border-radius: 10px; font-size: 12px; padding: 1px 6px; margin-left: -2px; font-weight: 600; }
.nav-right .avatar { width: 36px; height: 36px; font-size: 14px; margin-right: 6px; }

.pinned-bar { display: flex; align-items: center; gap: 10px; padding: 6px 12px; background: var(--bar-bg); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-bottom: .5px solid var(--separator); font-size: var(--fs-subhead); cursor: pointer; }
.pinned-bar .bar { width: 2px; height: 34px; border-radius: 2px; background: var(--tint); flex: none; }
.pinned-bar .txt { flex: 1; min-width: 0; } .pinned-bar .txt b { color: var(--tint); font-weight: 600; display: block; font-size: var(--fs-footnote); }
.pinned-bar .txt span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pinned-bar .x { color: var(--tint); } .pinned-bar .x svg { width: 20px; height: 20px; fill: currentColor; }
.chat-topbars { position: absolute; left: 0; right: 0; top: calc(var(--nav-h) + var(--sai-top)); z-index: 15; }

.messages { min-height: 100%; justify-content: flex-end; padding-bottom: 12px; }
.msg-wrap { display: flex; align-items: flex-end; gap: 6px; max-width: 100%; position: relative; }
.msg-wrap.out { justify-content: flex-end; }
.msg-wrap .avatar { width: 30px; height: 30px; font-size: 12px; visibility: hidden; margin-bottom: 2px; }
.msg-wrap.tail .avatar { visibility: visible; }
.msg-wrap.selecting { padding-left: 34px; }
.msg-wrap .select-box { position: absolute; left: 2px; bottom: 6px; }
.msg-wrap.selected .msg { box-shadow: 0 0 0 2px var(--tint); }
.msg { max-width: min(78%, 420px); }
.msg .sender { display: block; font-size: var(--fs-footnote); font-weight: 600; margin-bottom: 2px; }
.msg .fwd { display: block; font-size: var(--fs-footnote); color: inherit; opacity: .8; margin-bottom: 2px; font-style: italic; }
.msg.out .sender, .msg.out .fwd { color: rgba(255,255,255,.9); }
.msg .quote { display: flex; gap: 8px; padding: 4px 8px 4px 0; margin-bottom: 4px; border-left: 2px solid currentColor; padding-left: 8px; font-size: var(--fs-subhead); opacity: .9; border-radius: 3px; background: rgba(0,0,0,.05); cursor: pointer; }
.msg.out .quote { background: rgba(255,255,255,.15); }
.msg .quote b { display: block; font-size: var(--fs-footnote); font-weight: 600; }
.msg .quote span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.msg .meta { float: right; margin: 6px -4px -4px 8px; display: inline-flex; align-items: center; gap: 3px; font-size: 11px; line-height: 1; opacity: .75; white-space: nowrap; position: relative; top: 2px; }
.msg .meta svg { width: 15px; height: 12px; }
.msg.in .meta { color: var(--label-secondary); }
.msg.out .meta .read { color: #fff; }
.msg .meta .edited { font-style: italic; }
.msg.highlight { animation: hl 1.6s; }
@keyframes hl { 0%, 40% { box-shadow: 0 0 0 4px rgba(0,122,255,.45); } 100% { box-shadow: none; } }
.msg .ttl { display: inline-flex; align-items: center; gap: 2px; }
.msg .ttl svg { width: 12px; height: 12px; fill: currentColor; }

.msg a { color: inherit; text-decoration: underline; }
.msg.in a { color: var(--tint); text-decoration: none; }
.msg .mention { color: var(--tint); font-weight: 500; }
.msg.out .mention { color: #fff; text-decoration: underline; }

/* Реакции */
.reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.reaction { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px 0 6px; border-radius: 13px; font-size: 13px; font-weight: 600; background: rgba(0,122,255,.12); color: var(--tint); transition: transform .15s; }
.reaction:active { transform: scale(.9); }
.reaction.mine { background: var(--tint); color: #fff; }
.msg.out .reaction { background: rgba(255,255,255,.25); color: #fff; }
.msg.out .reaction.mine { background: #fff; color: var(--tint); }
.reaction-bar { display: flex; gap: 2px; padding: 6px 8px; border-radius: 26px; background: var(--bar-bg); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); box-shadow: 0 6px 24px rgba(0,0,0,.18); margin-bottom: 8px; animation: ctx-in .2s var(--ease-ios); }
.reaction-bar button { width: 40px; height: 40px; font-size: 26px; border-radius: 50%; transition: transform .15s var(--ease-ios); }
.reaction-bar button:active { transform: scale(1.35); }
.ctx-header { padding: 0; background: transparent; }

/* Пузыри без фона: стикер, крупные эмодзи */
.msg.sticker { background: transparent !important; padding: 0; font-size: 84px; line-height: 1; box-shadow: none; }
.msg.sticker::after { display: none; }
.msg.sticker .sticker-img { width: 168px; height: 168px; display: block; border-radius: 18px; }
.emoji-grid.stickers button.st { height: auto; padding: 4px; }
.emoji-grid.stickers button.st img { width: 100%; aspect-ratio: 1; border-radius: 14px; display: block; }
.msg.sticker .meta { position: absolute; bottom: 4px; right: 4px; margin: 0; padding: 3px 6px; border-radius: 10px; background: rgba(0,0,0,.35); color: #fff; float: none; top: auto; }
.msg.big-emoji { background: transparent !important; padding: 4px 0; font-size: 48px; line-height: 1.1; }
.msg.big-emoji::after { display: none; }

/* Медиа */
.msg.media { padding: 3px; overflow: hidden; }
.msg.media .photo { width: min(70vw, 300px); border-radius: calc(var(--bubble-r) - 3px); background: linear-gradient(135deg, var(--a1), var(--a2)); position: relative; overflow: hidden; }
.msg.media .photo img { width: 100%; height: 100%; object-fit: cover; }
.msg.media .photo::before { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M0 80 L30 45 L50 65 L70 40 L100 75 L100 100 L0 100Z' fill='rgba(255,255,255,.18)'/%3E%3Ccircle cx='75' cy='25' r='9' fill='rgba(255,255,255,.35)'/%3E%3C/svg%3E") center/cover; }
.msg.media .photo.real::before { display: none; }
.msg.media .caption { padding: 4px 9px 6px; }
.msg.media .meta.overlay { position: absolute; right: 8px; bottom: 8px; margin: 0; padding: 3px 6px; border-radius: 10px; background: rgba(0,0,0,.4); color: #fff; opacity: 1; float: none; top: auto; }
.msg.media .meta.overlay .read { color: #fff; }
.msg .doc { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.msg .doc .doc-ico { width: 44px; height: 44px; border-radius: 10px; background: var(--tint); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; text-transform: uppercase; flex: none; }
.msg.out .doc .doc-ico { background: #fff; color: var(--tint); }
.msg .doc .doc-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.msg .doc .doc-size { font-size: var(--fs-footnote); opacity: .7; }
.msg .voice { display: flex; align-items: center; gap: 10px; min-width: 200px; }
.msg .voice > span:not(.vplay) { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.msg .voice .vdur { display: inline-flex; align-items: center; gap: 6px; }
.msg .voice .vplay { width: 36px; height: 36px; border-radius: 50%; background: var(--tint); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.msg.out .voice .vplay { background: #fff; color: var(--tint); }
.msg .voice .vplay svg { width: 18px; height: 18px; fill: currentColor; }
.msg .voice .wave { display: flex; align-items: center; gap: 2px; height: 22px; }
.msg .voice .wave i { width: 2px; border-radius: 2px; background: currentColor; opacity: .4; }
.msg .voice .wave i.played { opacity: 1; }
.msg .voice .vdur { font-size: var(--fs-footnote); opacity: .75; }
.msg .voice .unread-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tint); display: inline-block; }
.msg .loc { width: min(65vw, 260px); }
.msg .loc .map { height: 130px; border-radius: 12px; background: linear-gradient(135deg, #cfe9d4, #a9d6b4); position: relative; overflow: hidden; }
.msg .loc .map::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 22px, rgba(255,255,255,.5) 22px 26px), repeating-linear-gradient(90deg, transparent 0 34px, rgba(255,255,255,.5) 34px 38px); }
.msg .loc .map .pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%); width: 28px; height: 28px; fill: var(--sys-red); filter: drop-shadow(0 2px 2px rgba(0,0,0,.3)); }
.msg .loc .lt { font-weight: 600; margin-top: 6px; } .msg .loc .la { font-size: var(--fs-footnote); opacity: .75; }
.msg .ccard { display: flex; align-items: center; gap: 10px; min-width: 200px; }
.msg .ccard .cname { font-weight: 600; } .msg .ccard .cphone { font-size: var(--fs-footnote); opacity: .75; }
.msg .ccard .cbtn { margin-top: 8px; width: 100%; text-align: center; padding: 8px 0 4px; border-top: .5px solid rgba(0,0,0,.1); color: var(--tint); font-weight: 600; }
.msg.out .ccard .cbtn { color: #fff; border-color: rgba(255,255,255,.3); }
.msg .pollq { font-weight: 600; margin-bottom: 2px; min-width: 240px; }
.msg .polls { font-size: var(--fs-footnote); opacity: .7; margin-bottom: 8px; }
.msg .popt { display: flex; align-items: center; gap: 10px; padding: 6px 0; position: relative; }
.msg .popt .radio { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid currentColor; opacity: .5; flex: none; display: flex; align-items: center; justify-content: center; }
.msg .popt .radio.on { opacity: 1; background: currentColor; }
.msg .popt .radio.on svg { width: 12px; height: 12px; color: var(--bubble-out); }
.msg.in .popt .radio.on svg { color: var(--bubble-in); }
.msg .popt .pct { width: 36px; font-size: var(--fs-footnote); font-weight: 600; text-align: right; flex: none; }
.msg .popt .pbar { position: absolute; left: 30px; right: 0; bottom: 0; height: 3px; border-radius: 2px; background: currentColor; opacity: .25; }
.msg .popt .pbar i { display: block; height: 100%; border-radius: 2px; background: currentColor; }
.msg .popt .ptxt { flex: 1; }
.msg .pfoot { text-align: center; font-size: var(--fs-footnote); opacity: .75; padding-top: 6px; }
.service { align-self: center; margin: 6px 0; padding: 4px 10px; border-radius: 10px; font-size: var(--fs-footnote); color: var(--label-secondary); text-align: center; max-width: 85%; }
.bot-kb { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 6px 36px; max-width: 78%; }
.bot-kb .row { display: flex; gap: 4px; }
.bot-kb button { flex: 1; height: 40px; border-radius: 12px; background: rgba(255,255,255,.88); color: var(--tint); font-size: var(--fs-subhead); font-weight: 500; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bot-kb button { background: rgba(33,33,33,.88); } }
:root[data-theme="dark"] .bot-kb button { background: rgba(33,33,33,.88); }
.bot-kb button:active { opacity: .7; }
.msg .views { display: inline-flex; align-items: center; gap: 3px; } .msg .views svg { width: 14px; height: 10px; fill: currentColor; }

.scroll-down { position: absolute; right: 12px; bottom: 12px; width: 40px; height: 40px; border-radius: 50%; background: var(--bar-bg); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 2px 8px rgba(0,0,0,.2); display: flex; align-items: center; justify-content: center; color: var(--label-secondary); transform: scale(0); transition: transform .2s var(--ease-ios); z-index: 5; }
.scroll-down.show { transform: none; }
.scroll-down svg { width: 22px; height: 22px; fill: currentColor; }
.scroll-down .badge { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); background: var(--tint); }
.chat-body { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0; }
.chat-body .content { flex: 1; }

/* Композер: доп. панели */
.composer-wrap { flex: none; }
.reply-bar { display: flex; align-items: center; gap: 10px; padding: 6px 12px; background: var(--bar-bg); border-top: .5px solid var(--separator); font-size: var(--fs-subhead); }
.reply-bar svg.ico { width: 22px; height: 22px; fill: var(--tint); flex: none; }
.reply-bar .bar { width: 2px; height: 34px; background: var(--tint); border-radius: 2px; flex: none; }
.reply-bar .txt { flex: 1; min-width: 0; } .reply-bar .txt b { color: var(--tint); display: block; font-size: var(--fs-footnote); }
.reply-bar .txt span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reply-bar .x svg { width: 22px; height: 22px; fill: var(--sys-gray); }
.composer.recording .composer-field, .composer.recording .attach-btn, .composer.recording .emoji-btn { display: none; }
.rec-ui { flex: 1; display: flex; align-items: center; gap: 10px; height: 36px; }
.rec-ui .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--sys-red); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .2 } }
.rec-ui .rt { font-variant-numeric: tabular-nums; }
.rec-ui .slide { flex: 1; text-align: center; color: var(--label-secondary); font-size: var(--fs-subhead); }
.composer .round-btn.mic.rec { background: var(--sys-red); color: #fff; transform: scale(1.35); box-shadow: 0 0 0 12px rgba(255,59,48,.25); }
.composer .round-btn.mic { transition: transform .2s var(--ease-ios), box-shadow .2s; }
.composer .ttl-btn { font-size: 12px; font-weight: 700; color: var(--tint); width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; }
.composer .ttl-btn svg { width: 22px; height: 22px; fill: currentColor; }
.composer .bot-menu { height: 34px; padding: 0 12px; border-radius: 17px; background: var(--tint); color: #fff; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 4px; flex: none; }
.channel-bar { flex: none; display: flex; align-items: center; justify-content: center; height: calc(50px + var(--sai-bottom)); padding-bottom: var(--sai-bottom); background: var(--bar-bg); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 -0.33px 0 var(--bar-border); color: var(--tint); font-weight: 600; font-size: var(--fs-body); }
.kb-open .composer, .kb-open .channel-bar, .kb-open .edit-toolbar, .kb-open .sel-toolbar { padding-bottom: 6px; height: auto; }

.panel { flex: none; height: 0; overflow: hidden; background: var(--bg-secondary); transition: height .25s var(--ease-ios); }
.panel.open { height: 280px; }
.panel-tabs { display: flex; justify-content: center; gap: 6px; padding: 6px; }
.panel-tabs button { padding: 5px 12px; border-radius: 14px; font-size: var(--fs-footnote); font-weight: 600; color: var(--label-secondary); }
.panel-tabs button.is-active { background: var(--fill-secondary); color: var(--label); }
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); padding: 0 8px 8px; height: 240px; overflow-y: auto; align-content: start; }
.emoji-grid button { font-size: 30px; height: 44px; border-radius: 8px; }
.emoji-grid button:active { background: var(--fill-secondary); }
.emoji-grid.stickers { grid-template-columns: repeat(4, 1fr); }
.emoji-grid.stickers button { font-size: 56px; height: 84px; }
.emoji-grid .hdr { grid-column: 1 / -1; font-size: var(--fs-footnote); color: var(--label-secondary); padding: 8px 4px 2px; text-transform: uppercase; }

.attach-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 8px; padding: 20px 12px 12px; }
.attach-grid button { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: var(--fs-footnote); color: var(--label); }
.attach-grid .ab { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.attach-grid .ab svg { width: 28px; height: 28px; fill: #fff; }
.sheet-content { background: var(--bar-bg); border-radius: 13px; margin-bottom: 8px; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }

.sel-toolbar { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 8px 16px calc(8px + var(--sai-bottom)); background: var(--bar-bg); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 -0.33px 0 var(--bar-border); }
.sel-toolbar button { color: var(--tint); display: flex; align-items: center; gap: 4px; } .sel-toolbar button svg { width: 24px; height: 24px; fill: currentColor; }
.sel-toolbar button.destructive { color: var(--sys-red); } .sel-toolbar button:disabled { opacity: .35; }

.date-chip { position: absolute; top: calc(var(--nav-h) + var(--sai-top) + 8px); left: 50%; transform: translateX(-50%); padding: 3px 10px; border-radius: 10px; background: rgba(0,0,0,.3); color: #fff; font-size: var(--fs-caption1); font-weight: 600; z-index: 6; opacity: 0; transition: opacity .2s; pointer-events: none; }
.date-chip.show { opacity: 1; }

.search-in-chat { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--bar-bg); border-bottom: .5px solid var(--separator); }
.search-in-chat .search-field { flex: 1; }
.search-in-chat .cnt { font-size: var(--fs-footnote); color: var(--label-secondary); white-space: nowrap; }
.search-in-chat button.nb { color: var(--tint); } .search-in-chat button.nb svg { width: 22px; height: 22px; fill: currentColor; }

/* ---------- Профиль / инфо о чате ---------- */
.profile-hdr { display: flex; flex-direction: column; align-items: center; padding: 8px 16px 16px; gap: 6px; }
.profile-hdr .avatar.lg { margin-bottom: 4px; }
.profile-hdr h2 { margin: 0; font-size: var(--fs-title1); font-weight: 700; text-align: center; display: flex; align-items: center; gap: 6px; }
.profile-hdr h2 svg { width: 20px; height: 20px; fill: var(--tint); }
.profile-hdr .st { color: var(--label-secondary); font-size: var(--fs-subhead); }
.profile-hdr .st.online { color: var(--tint); }
.action-row { display: flex; gap: 8px; padding: 4px 16px 20px; }
.action-row button { flex: 1; height: 58px; border-radius: 10px; background: var(--bg-grouped-cell); color: var(--tint); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 11px; font-weight: 500; }
.action-row button svg { width: 22px; height: 22px; fill: currentColor; }
.action-row button:active { background: var(--cell-highlight); }
.info-cell { display: block; padding: 8px 16px; background: var(--bg-grouped-cell); position: relative; }
.info-cell .k { font-size: var(--fs-footnote); color: var(--label-secondary); } .info-cell .v { font-size: var(--fs-body); word-break: break-word; user-select: text; -webkit-user-select: text; }
.info-cell .v.tint { color: var(--tint); }
.info-cell::after { content: ""; position: absolute; left: 16px; right: 0; bottom: 0; height: .5px; background: var(--separator); }
.info-cell:last-child::after { display: none; }
.media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 0 16px 24px; }
.media-grid .tile { aspect-ratio: 1; border-radius: 4px; background: linear-gradient(135deg, var(--a1), var(--a2)); overflow: hidden; }
.media-grid .tile img { width: 100%; height: 100%; object-fit: cover; }
.member-role { font-size: var(--fs-footnote); color: var(--label-secondary); }

/* ---------- Контакты ---------- */
.section-letter { padding: 6px 16px; font-size: var(--fs-subhead); font-weight: 600; color: var(--label-secondary); background: var(--bg-secondary); position: sticky; top: 0; z-index: 2; }
.index-bar { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; z-index: 5; }
.index-bar span { font-size: 11px; font-weight: 600; color: var(--tint); padding: 0 6px; line-height: 14px; }
.contact-row .cell-subtitle.online { color: var(--tint); }

/* ---------- Звонки ---------- */
.call-row .cell-title.missed { color: var(--sys-red); }
.call-row .dir { width: 14px; height: 14px; fill: var(--label-tertiary); margin-right: 2px; }
.call-row .cell-subtitle { display: flex; align-items: center; gap: 4px; }
.call-info-btn { color: var(--tint); } .call-info-btn svg { width: 24px; height: 24px; fill: currentColor; }
.call-screen { position: absolute; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: calc(var(--sai-top) + 60px) 24px calc(var(--sai-bottom) + 40px); color: #fff; background: linear-gradient(160deg, #1d3557, #0b1a2b); transform: translateY(100%); transition: transform .4s var(--ease-ios); }
.call-screen.open { transform: none; }
.call-screen .cs-top { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.call-screen h2 { margin: 0; font-size: 30px; font-weight: 500; }
.call-screen .cst { opacity: .8; font-variant-numeric: tabular-nums; font-size: var(--fs-body); }
.call-screen .avatar.lg { width: 130px; height: 130px; font-size: 52px; box-shadow: 0 0 0 0 rgba(255,255,255,.3); }
.call-screen.ringing .avatar.lg { animation: ring 1.5s infinite; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.35) } 100% { box-shadow: 0 0 0 30px rgba(255,255,255,0) } }
.call-screen .enc { font-size: var(--fs-footnote); opacity: .7; display: flex; gap: 4px; align-items: center; } .call-screen .enc svg { width: 14px; height: 14px; fill: currentColor; }
.call-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 36px; }
.call-btns button { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: var(--fs-footnote); color: #fff; }
.call-btns .cb { width: 68px; height: 68px; border-radius: 50%; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; transition: background .15s; }
.call-btns .cb svg { width: 30px; height: 30px; fill: #fff; }
.call-btns .cb.on { background: #fff; } .call-btns .cb.on svg { fill: #000; }
.call-btns .cb.end { background: var(--sys-red); }
.call-btns .cb.accept { background: var(--sys-green); }

/* ---------- Экран блокировки ---------- */
.lock-screen { position: absolute; inset: 0; z-index: 300; background: var(--bg-grouped); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 24px; }
.lock-screen .dots { display: flex; gap: 18px; } .lock-screen .dots i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--label); }
.lock-screen .dots i.on { background: var(--label); }
.lock-screen.shake .dots { animation: shake .4s; }
@keyframes shake { 0%, 100% { transform: none } 25% { transform: translateX(-10px) } 75% { transform: translateX(10px) } }
.numpad { display: grid; grid-template-columns: repeat(3, 78px); gap: 16px; }
.numpad button { width: 78px; height: 78px; border-radius: 50%; background: var(--fill-secondary); font-size: 32px; font-weight: 300; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.numpad button small { font-size: 10px; letter-spacing: 2px; font-weight: 600; }
.numpad button:active { background: var(--fill); }
.numpad button.txt { background: transparent; font-size: var(--fs-body); font-weight: 400; }

/* ---------- Истории ---------- */
.story-viewer { position: absolute; inset: 0; z-index: 250; background: #000; color: #fff; display: flex; flex-direction: column; transform: scale(.6); opacity: 0; transition: transform .3s var(--ease-ios), opacity .25s; }
.story-viewer.open { transform: none; opacity: 1; }
.story-viewer .progress { display: flex; gap: 4px; padding: calc(var(--sai-top) + 8px) 8px 0; }
.story-viewer .progress i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.35); overflow: hidden; }
.story-viewer .progress i b { display: block; height: 100%; width: 0; background: #fff; }
.story-viewer .sv-hdr { display: flex; align-items: center; gap: 10px; padding: 12px 12px 0; }
.story-viewer .sv-hdr .avatar { width: 36px; height: 36px; font-size: 14px; }
.story-viewer .sv-hdr .who { flex: 1; min-width: 0; }
.story-viewer .sv-hdr b { font-size: var(--fs-subhead); } .story-viewer .sv-hdr small { opacity: .7; margin-left: 6px; }
.story-viewer .sv-hdr .x svg, .story-viewer .sv-hdr .more svg { width: 26px; height: 26px; fill: #fff; }
.story-viewer .sv-hdr .more { margin-right: 4px; }
.story-viewer .sv-body { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 30px; font-weight: 700; padding: 40px 28px; background: linear-gradient(160deg, var(--a1), var(--a2)); margin: 12px; border-radius: 16px; position: relative; overflow: hidden; text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.story-viewer .sv-body .txt { white-space: pre-wrap; word-break: break-word; }
.story-viewer .sv-body .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 16px; font-size: var(--fs-body); font-weight: 400; text-align: left; background: linear-gradient(transparent, rgba(0,0,0,.55)); white-space: pre-wrap; }
.story-viewer .sv-body .cap:empty { display: none; }
.story-viewer .sv-body .zone { position: absolute; top: 0; bottom: 0; width: 35%; z-index: 2; } .story-viewer .sv-body .zone.l { left: 0 } .story-viewer .sv-body .zone.r { right: 0 }
.story-viewer .sv-foot { min-height: 56px; padding: 0 0 var(--sai-bottom); }
.story-viewer .sv-reply { display: flex; gap: 8px; padding: 8px 12px 12px; }
.story-viewer .sv-reply input { flex: 1; height: 40px; border-radius: 20px; padding: 0 16px; background: rgba(255,255,255,.15); color: #fff; }
.story-viewer .sv-reply .like { font-size: 24px; }
.story-viewer .views { display: flex; align-items: center; gap: 6px; margin: 8px auto 12px; padding: 8px 16px; border-radius: 20px; background: rgba(255,255,255,.15); color: #fff; font-size: var(--fs-subhead); font-weight: 600; }
.story-viewer .views svg { width: 20px; height: 20px; fill: #fff; }

/* Редактор истории */
.story-editor { position: absolute; inset: 0; z-index: 255; background: #000; color: #fff; display: flex; flex-direction: column; transform: translateY(100%); transition: transform .35s var(--ease-ios); }
.story-editor.open { transform: none; }
.story-editor .se-hdr { display: flex; align-items: center; gap: 8px; padding: calc(var(--sai-top) + 8px) 12px 8px; }
.story-editor .se-hdr .ttl { flex: 1; text-align: center; font-weight: 600; }
.story-editor .se-hdr .x svg { width: 26px; height: 26px; fill: #fff; }
.story-editor .se-hdr .done { color: #fff; font-weight: 600; padding: 6px 14px; border-radius: 16px; background: var(--tint); font-size: var(--fs-subhead); }
.story-editor .se-body { flex: 1; margin: 4px 12px; border-radius: 16px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; background: linear-gradient(160deg, var(--a1), var(--a2)); }
.story-editor .se-text { width: 100%; max-height: 60%; background: transparent; border: 0; outline: 0; color: #fff; text-align: center; font-size: 30px; font-weight: 700; padding: 24px; resize: none; text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.story-editor .se-text::placeholder { color: rgba(255,255,255,.7); }
.story-editor .se-cap-wrap { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 12px 12px; background: linear-gradient(transparent, rgba(0,0,0,.55)); }
.story-editor .se-cap { width: 100%; height: 40px; border-radius: 20px; padding: 0 16px; background: rgba(255,255,255,.2); color: #fff; border: 0; outline: 0; }
.story-editor .se-cap::placeholder { color: rgba(255,255,255,.8); }
.story-editor .se-tools { padding: 8px 12px calc(12px + var(--sai-bottom)); }
.story-editor .se-colors { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; } .story-editor .se-colors::-webkit-scrollbar { display: none; }
.story-editor .se-colors .sw { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 2px solid transparent; }
.story-editor .se-colors .sw.on { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.4); }
.story-editor .se-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.story-editor .se-priv { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 18px; background: rgba(255,255,255,.15); color: #fff; font-size: var(--fs-subhead); }
.story-editor .se-priv svg { width: 18px; height: 18px; fill: #fff; }
.story-editor .se-del { color: #FF453A; font-weight: 600; padding: 8px 12px; }
.kb-open .story-editor .se-tools { padding-bottom: 8px; }
.story-viewer .sv-reply input::placeholder { color: rgba(255,255,255,.6); }
.story-viewer .sv-reply button { font-size: 24px; }

/* ---------- Просмотр фото ---------- */
.photo-viewer { position: absolute; inset: 0; z-index: 240; background: #000; display: flex; flex-direction: column; opacity: 0; transition: opacity .25s; }
.photo-viewer.open { opacity: 1; }
.photo-viewer .pv-hdr { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--sai-top) + 8px) 16px 8px; color: #fff; }
.photo-viewer .pv-hdr button { color: #fff; font-size: var(--fs-body); }
.photo-viewer .pv-img { flex: 1; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--a1), var(--a2)); margin: 0; overflow: hidden; }
.photo-viewer .pv-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.photo-viewer .pv-cap { padding: 12px 16px calc(16px + var(--sai-bottom)); color: #fff; text-align: center; }
.photo-viewer .pv-actions { display: flex; justify-content: space-around; padding: 8px 0; } .photo-viewer .pv-actions button { color: #fff; } .photo-viewer .pv-actions svg { width: 26px; height: 26px; fill: #fff; }

/* ---------- Баннер уведомления ---------- */
.notif { position: absolute; left: 8px; right: 8px; top: calc(var(--sai-top) + 6px); z-index: 220; display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 18px; background: var(--bar-bg); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); box-shadow: 0 8px 30px rgba(0,0,0,.2); transform: translateY(-150%); transition: transform .4s var(--ease-ios); }
.notif.show { transform: none; }
.notif .avatar { width: 38px; height: 38px; font-size: 15px; }
.notif .nt { flex: 1; min-width: 0; } .notif .nt b { display: block; font-size: var(--fs-subhead); } .notif .nt span { display: block; font-size: var(--fs-subhead); color: var(--label-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif small { font-size: 11px; color: var(--label-secondary); align-self: flex-start; }

/* ---------- Модалка ---------- */
.modal-wrap { position: absolute; inset: 0; z-index: 80; background: rgba(0,0,0,0); transition: background .3s; pointer-events: none; }
.modal-wrap.open { background: rgba(0,0,0,.35); pointer-events: auto; }
.modal-screen { transform: translateY(100%); transition: transform .4s var(--ease-ios); border-radius: 12px 12px 0 0; top: calc(var(--sai-top) + 10px); }
.modal-wrap.open .modal-screen { transform: none; }
.modal-screen .nav-bar { padding-top: 0; border-radius: 12px 12px 0 0; } .modal-screen .content { padding-top: var(--nav-h); }
.modal-screen .nav-bar::before { content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 36px; height: 5px; border-radius: 3px; background: var(--sys-gray3); }

/* ---------- Онбординг ---------- */
.onboard { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 32px; gap: 16px; min-height: 100%; }
.onboard .logo { width: 120px; height: 120px; border-radius: 27px; box-shadow: 0 10px 30px rgba(0,122,255,.3); }
.onboard h1 { margin: 16px 0 0; font-size: var(--fs-title1); font-weight: 700; }
.onboard p { margin: 0; color: var(--label-secondary); max-width: 300px; }
.onboard .btn { margin-top: 24px; width: 100%; max-width: 320px; }
.code-boxes { display: flex; gap: 10px; justify-content: center; margin: 16px 0; }
.code-boxes i { width: 44px; height: 54px; border-radius: 10px; background: var(--bg-grouped-cell); border: 1px solid var(--separator); display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 600; font-style: normal; }
.code-boxes i.on { border-color: var(--tint); }
.phone-input { display: flex; align-items: center; gap: 8px; height: 50px; margin: 16px 0; border-radius: 12px; background: var(--bg-grouped-cell); padding: 0 16px; font-size: 20px; }
.phone-input input { flex: 1; font-size: 20px; height: 100%; }

/* ---------- Настройки ---------- */
.settings-profile { display: flex; align-items: center; gap: 14px; padding: 10px 16px; background: var(--bg-grouped-cell); }
.settings-profile .avatar { width: 68px; height: 68px; font-size: 26px; }
.settings-profile .sp-body { flex: 1; min-width: 0; }
.settings-profile .sp-body b { font-size: var(--fs-title3); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-profile .sp-body span { color: var(--label-secondary); font-size: var(--fs-subhead); display: block; }
.slider { -webkit-appearance: none; width: 100%; height: 4px; border-radius: 2px; background: var(--fill); outline: none; }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.2); }
.accent-row { display: flex; justify-content: space-between; padding: 12px 20px; background: var(--bg-grouped-cell); }
.accent-row button { width: 32px; height: 32px; border-radius: 50%; position: relative; }
.accent-row button.is-active::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid currentColor; }
.wp-row { display: flex; gap: 10px; padding: 12px 16px; background: var(--bg-grouped-cell); overflow-x: auto; scrollbar-width: none; }
.wp-row button { width: 70px; height: 110px; border-radius: 10px; flex: none; position: relative; overflow: hidden; }
.wp-row button.is-active::after { content: "✓"; position: absolute; right: 6px; bottom: 6px; width: 22px; height: 22px; border-radius: 50%; background: var(--tint); color: #fff; font-size: 13px; line-height: 22px; }
.preview-bubbles { padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; background: var(--bg-grouped-cell); }
.preview-bubbles .msg { animation: none; }
.storage-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; margin: 0 16px 8px; }
.storage-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 0 16px 16px; font-size: var(--fs-footnote); color: var(--label-secondary); }
.storage-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.qr-box { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px; }
.qr-box canvas { width: 240px; height: 240px; border-radius: 16px; background: #fff; padding: 12px; }
.premium-hero { padding: 30px 16px 10px; text-align: center; }
.premium-hero .star { font-size: 64px; }
.premium-hero h2 { margin: 6px 0; font-size: var(--fs-title1); background: linear-gradient(90deg, #6C5CE7, #E84393); -webkit-background-clip: text; background-clip: text; color: transparent; }
.destructive-text { color: var(--sys-red) !important; }
.tint-text { color: var(--tint) !important; }
.cell.centered .cell-title { text-align: center; color: var(--tint); }
.chip-check { color: var(--tint); } .chip-check svg { width: 20px; height: 20px; }

/* A2HS баннер */
.tab-bar.hidden-bar ~ .a2hs { display: none; }
.a2hs { position: absolute; left: 12px; right: 12px; bottom: calc(var(--tab-h) + var(--sai-bottom) + 12px); z-index: 60; animation: msg-in .4s var(--ease-ios); }
.a2hs-card { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: var(--bg-grouped-cell); box-shadow: 0 8px 30px rgba(0,0,0,.2); }
.a2hs-icon { width: 48px; height: 48px; border-radius: 11px; }
.a2hs-text { flex: 1; font-size: var(--fs-footnote); line-height: 1.35; } .a2hs-text b { display: block; font-size: var(--fs-subhead); }
.a2hs-share { width: 14px; height: 16px; fill: var(--tint); vertical-align: -2px; display: inline; }
.a2hs-close { color: var(--sys-gray); font-size: 16px; padding: 8px; }

/* ---------- Обои чата: градиент + doodle-узор как в Telegram ---------- */
:root { --wp-pattern-light: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='480'%20height='480'%20viewBox='0%200%20480%20480'%20fill='none'%20stroke='rgba(0,0,0,0.14)'%20stroke-width='1.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cg%20transform='translate(32.9%2032.4)%20rotate(-10)%20scale(1.28)%20translate(-12%20-12)'%3E%3Cpath%20d='M9%2018V6l10-2v12%20M9%2018a2.5%202.5%200%201%201-5%200%202.5%202.5%200%200%201%205%200z%20M19%2016a2.5%202.5%200%201%201-5%200%202.5%202.5%200%200%201%205%200z'/%3E%3C/g%3E%3Cg%20transform='translate(113.6%2041.6)%20rotate(7)%20scale(1.10)%20translate(-12%20-12)'%3E%3Cpath%20d='M4%2011h16v9H4z%20M2%207h20v4H2z%20M12%207v13%20M12%207c-2-4-6-3-5-1s5%201%205%201z%20M12%207c2-4%206-3%205-1s-5%201-5%201z'/%3E%3C/g%3E%3Cg%20transform='translate(201.0%2031.3)%20rotate(-22)%20scale(1.03)%20translate(-12%20-12)'%3E%3Cpath%20d='M7%2018a4%204%200%200%201-.5-8A6%206%200%200%201%2018%209a4%204%200%200%201%200%209z'/%3E%3C/g%3E%3Cg%20transform='translate(283.6%2038.6)%20rotate(-9)%20scale(1.18)%20translate(-12%20-12)'%3E%3Cpath%20d='M4%208h3l2-3h6l2%203h3v11H4z%20M12%2017a3.5%203.5%200%201%200%200-7%203.5%203.5%200%200%200%200%207z'/%3E%3C/g%3E%3Cg%20transform='translate(359.1%2036.0)%20rotate(15)%20scale(1.23)%20translate(-12%20-12)'%3E%3Cpath%20d='M4%2020l4-1L19%208l-3-3L5%2016z%20M14%207l3%203'/%3E%3C/g%3E%3Cg%20transform='translate(434.9%2041.5)%20rotate(1)%20scale(1.30)%20translate(-12%20-12)'%3E%3Cpath%20d='M13%202L4%2014h7l-1%208%209-12h-7z'/%3E%3C/g%3E%3Cg%20transform='translate(84.6%20115.8)%20rotate(24)%20scale(1.00)%20translate(-12%20-12)'%3E%3Cpath%20d='M3%206h18v12H3z%20M3%207l9%206%209-6'/%3E%3C/g%3E%3Cg%20transform='translate(158.4%20125.1)%20rotate(-17)%20scale(1.15)%20translate(-12%20-12)'%3E%3Cpath%20d='M12%2012c-3-5-8-3-6%200s5%202%206%200z%20M12%2012c5-3%203-8%200-6s-2%205%200%206z%20M12%2012c3%205%208%203%206%200s-5-2-6%200z%20M12%2012c-5%203-3%208%200%206s2-5%200-6z%20M12%2012l-1%209'/%3E%3C/g%3E%3Cg%20transform='translate(230.8%20123.4)%20rotate(13)%20scale(1.18)%20translate(-12%20-12)'%3E%3Cpath%20d='M12%203l9%2016H3z%20M12%203c-3%204-3%208%200%2016%20M9%2014h.01%20M14%2012h.01%20M12%2017h.01'/%3E%3C/g%3E%3Cg%20transform='translate(327.5%20116.3)%20rotate(10)%20scale(1.19)%20translate(-12%20-12)'%3E%3Cpath%20d='M8%2011h8l-4%2010z%20M12%203a5%205%200%200%201%205%205v3H7V8a5%205%200%200%201%205-5z'/%3E%3C/g%3E%3Cg%20transform='translate(401.6%20119.1)%20rotate(17)%20scale(1.33)%20translate(-12%20-12)'%3E%3Cpath%20d='M6%2017V11a6%206%200%200%201%2012%200v6l2%202H4z%20M10%2021h4'/%3E%3C/g%3E%3Cg%20transform='translate(479.5%20123.3)%20rotate(-22)%20scale(1.23)%20translate(-12%20-12)'%3E%3Cpath%20d='M12%203a9%209%200%201%200%209%209%203%203%200%200%201-3-3%203%203%200%200%201-3-3%203%203%200%200%201-3-3z%20M9%2010h.01M14%2014h.01M9%2015h.01M13%209h.01'/%3E%3C/g%3E%3Cg%20transform='translate(42.9%20209.9)%20rotate(16)%20scale(1.06)%20translate(-12%20-12)'%3E%3Cpath%20d='M12%203l2.6%205.6%206.1.7-4.5%204.2%201.2%206L12%2016.6%206.6%2019.5l1.2-6L3.3%209.3l6.1-.7z'/%3E%3C/g%3E%3Cg%20transform='translate(117.7%20203.4)%20rotate(-24)%20scale(1.13)%20translate(-12%20-12)'%3E%3Cpath%20d='M4%2020c0-9%206-15%2016-15%200%2010-6%2015-16%2015z%20M4%2020c4-6%208-9%2012-11'/%3E%3C/g%3E%3Cg%20transform='translate(193.4%20192.3)%20rotate(-22)%20scale(1.26)%20translate(-12%20-12)'%3E%3Cpath%20d='M12%2015a6%207%200%201%200%200-14%206%207%200%200%200%200%2014z%20M12%2015l-1%202h2l-1%203'/%3E%3C/g%3E%3Cg%20transform='translate(272.6%20195.0)%20rotate(-5)%20scale(1.30)%20translate(-12%20-12)'%3E%3Cpath%20d='M3%2012c3-4%207-6%2011-6%203%203%203%209%200%2012-4%200-8-2-11-6z%20M14%206l6%206-6%206%20M8%2011h.01'/%3E%3C/g%3E%3Cg%20transform='translate(351.6%20199.0)%20rotate(2)%20scale(1.30)%20translate(-12%20-12)'%3E%3Cpath%20d='M4%2020l1-13%204%203h6l4-3%201%2013z%20M9%2014h.01%20M15%2014h.01%20M11%2017l1%201%201-1'/%3E%3C/g%3E%3Cg%20transform='translate(446.4%20207.3)%20rotate(-11)%20scale(1.12)%20translate(-12%20-12)'%3E%3Cpath%20d='M14%2013a5%205%200%201%200-4-4l-7%207v3h3v-2h2v-2h2l2-2z%20M15%208h.01'/%3E%3C/g%3E%3Cg%20transform='translate(77.2%20287.7)%20rotate(23)%20scale(1.01)%20translate(-12%20-12)'%3E%3Cpath%20d='M3%209l4-5h10l4%205-9%2012z%20M3%209h18%20M7%204l5%2017%205-17'/%3E%3C/g%3E%3Cg%20transform='translate(153.5%20274.6)%20rotate(-13)%20scale(1.14)%20translate(-12%20-12)'%3E%3Cpath%20d='M12%2021a9%209%200%201%200%200-18%209%209%200%200%200%200%2018z%20M9%2010h.01%20M15%2010h.01%20M8.5%2014a4.5%204.5%200%200%200%207%200'/%3E%3C/g%3E%3Cg%20transform='translate(241.8%20275.3)%20rotate(-25)%20scale(1.12)%20translate(-12%20-12)'%3E%3Cpath%20d='M12%2021c-3%200-6-2-6-4%200-3%203-4%206-4s6%201%206%204c0%202-3%204-6%204z%20M6%2011a2%202%200%201%200%200-4%202%202%200%200%200%200%204z%20M18%2011a2%202%200%201%200%200-4%202%202%200%200%200%200%204z%20M9%207a2%202%200%201%200%200-4%202%202%200%200%200%200%204z%20M15%207a2%202%200%201%200%200-4%202%202%200%200%200%200%204z'/%3E%3C/g%3E%3Cg%20transform='translate(317.4%20281.3)%20rotate(23)%20scale(1.23)%20translate(-12%20-12)'%3E%3Cpath%20d='M6%208h12a4%204%200%200%201%204%204v3a3%203%200%200%201-5%202l-2-2H9l-2%202a3%203%200%200%201-5-2v-3a4%204%200%200%201%204-4z%20M8%2011v4M6%2013h4%20M16%2012h.01M18%2014h.01'/%3E%3C/g%3E%3Cg%20transform='translate(400.3%20282.4)%20rotate(9)%20scale(0.97)%20translate(-12%20-12)'%3E%3Cpath%20d='M5%2021V11a7%207%200%200%201%2014%200v10l-2.3-2-2.3%202-2.4-2-2.4%202-2.3-2z%20M9.5%2010.5h.01%20M14.5%2010.5h.01'/%3E%3C/g%3E%3Cg%20transform='translate(8.0%20285.6)%20rotate(19)%20scale(1.27)%20translate(-12%20-12)'%3E%3Cpath%20d='M12%202c3%203%204%207%203%2012l-3%203-3-3c-1-5%200-9%203-12z%20M9%2014l-4%202%201-4%20M15%2014l4%202-1-4%20M12%2017v4'/%3E%3C/g%3E%3Cg%20transform='translate(37.8%20358.0)%20rotate(-20)%20scale(1.20)%20translate(-12%20-12)'%3E%3Cpath%20d='M12%2020c-5-4-9-7-9-11a4.5%204.5%200%200%201%209-1%204.5%204.5%200%200%201%209%201c0%204-4%207-9%2011z'/%3E%3C/g%3E%3Cg%20transform='translate(111.2%20351.3)%20rotate(-15)%20scale(1.01)%20translate(-12%20-12)'%3E%3Cpath%20d='M12%2016a4%204%200%201%200%200-8%204%204%200%200%200%200%208z%20M12%202v2M12%2020v2M2%2012h2M20%2012h2M4.9%204.9l1.4%201.4M17.7%2017.7l1.4%201.4M4.9%2019.1l1.4-1.4M17.7%206.3l1.4-1.4'/%3E%3C/g%3E%3Cg%20transform='translate(196.8%20351.1)%20rotate(-25)%20scale(1.01)%20translate(-12%20-12)'%3E%3Cpath%20d='M5%208h12v7a4%204%200%200%201-4%204H9a4%204%200%200%201-4-4z%20M17%2010h2a2%202%200%200%201%200%204h-2%20M8%204c0%201%201%201%201%202M12%204c0%201%201%201%201%202'/%3E%3C/g%3E%3Cg%20transform='translate(272.0%20357.3)%20rotate(-24)%20scale(1.30)%20translate(-12%20-12)'%3E%3Cpath%20d='M4%204h16v11H4z%20M9%2019h6%20M12%2015v4'/%3E%3C/g%3E%3Cg%20transform='translate(362.3%20353.0)%20rotate(-12)%20scale(1.09)%20translate(-12%20-12)'%3E%3Cpath%20d='M3%2012a9%209%200%200%201%2018%200z%20M12%2012v7a2%202%200%200%201-4%200'/%3E%3C/g%3E%3Cg%20transform='translate(437.3%20352.5)%20rotate(17)%20scale(1.35)%20translate(-12%20-12)'%3E%3Cpath%20d='M12%2013a3%203%200%201%200%200-6%203%203%200%200%200%200%206z%20M12%207V3M12%2021v-8M6.8%208.6l-3-2M17.2%208.6l3-2M6.8%2012.4l-3%202M17.2%2012.4l3%202'/%3E%3C/g%3E%3Cg%20transform='translate(79.3%20439.7)%20rotate(-21)%20scale(0.99)%20translate(-12%20-12)'%3E%3Cpath%20d='M20%2014.5A8%208%200%200%201%209.5%204a8%208%200%201%200%2010.5%2010.5z'/%3E%3C/g%3E%3Cg%20transform='translate(156.9%20435.3)%20rotate(16)%20scale(1.01)%20translate(-12%20-12)'%3E%3Cpath%20d='M21%203L3%2010.5l7%202.5%202.5%207z%20M10%2013l11-10'/%3E%3C/g%3E%3Cg%20transform='translate(230.5%20449.0)%20rotate(1)%20scale(1.01)%20translate(-12%20-12)'%3E%3Cpath%20d='M4%2014v-2a8%208%200%200%201%2016%200v2%20M4%2014h3v5H4z%20M17%2014h3v5h-3z'/%3E%3C/g%3E%3Cg%20transform='translate(320.9%20430.5)%20rotate(1)%20scale(1.34)%20translate(-12%20-12)'%3E%3Cpath%20d='M12%2017a5%205%200%201%200%200-10%205%205%200%200%200%200%2010z%20M3%2015c4%202%2014-2%2018-6%20M2%2012c2-3%208-5%2010-5'/%3E%3C/g%3E%3Cg%20transform='translate(407.3%20443.9)%20rotate(-12)%20scale(1.10)%20translate(-12%20-12)'%3E%3Cpath%20d='M3%2018h18l1-11-5%204-5-7-5%207-5-4z'/%3E%3C/g%3E%3Cg%20transform='translate(472.0%20439.4)%20rotate(-8)%20scale(1.14)%20translate(-12%20-12)'%3E%3Cpath%20d='M4%2011h16v9H4z%20M2%207h20v4H2z%20M12%207v13%20M12%207c-2-4-6-3-5-1s5%201%205%201z%20M12%207c2-4%206-3%205-1s-5%201-5%201z'/%3E%3C/g%3E%3C/svg%3E"); --wp-pattern-dark: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='480'%20height='480'%20viewBox='0%200%20480%20480'%20fill='none'%20stroke='rgba(255,255,255,0.11)'%20stroke-width='1.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cg%20transform='translate(33.1%2041.0)%20rotate(-24)%20scale(1.27)%20translate(-12%20-12)'%3E%3Cpath%20d='M12%2015a6%207%200%201%200%200-14%206%207%200%200%200%200%2014z%20M12%2015l-1%202h2l-1%203'/%3E%3C/g%3E%3Cg%20transform='translate(124.5%2032.1)%20rotate(12)%20scale(1.01)%20translate(-12%20-12)'%3E%3Cpath%20d='M4%2020l4-1L19%208l-3-3L5%2016z%20M14%207l3%203'/%3E%3C/g%3E%3Cg%20transform='translate(209.7%2033.9)%20rotate(19)%20scale(0.96)%20translate(-12%20-12)'%3E%3Cpath%20d='M4%2020l1-13%204%203h6l4-3%201%2013z%20M9%2014h.01%20M15%2014h.01%20M11%2017l1%201%201-1'/%3E%3C/g%3E%3Cg%20transform='translate(274.3%2040.0)%20rotate(13)%20scale(1.08)%20translate(-12%20-12)'%3E%3Cpath%20d='M7%2018a4%204%200%200%201-.5-8A6%206%200%200%201%2018%209a4%204%200%200%201%200%209z'/%3E%3C/g%3E%3Cg%20transform='translate(360.9%2046.7)%20rotate(-22)%20scale(1.25)%20translate(-12%20-12)'%3E%3Cpath%20d='M3%2018h18l1-11-5%204-5-7-5%207-5-4z'/%3E%3C/g%3E%3Cg%20transform='translate(448.0%2043.2)%20rotate(16)%20scale(1.16)%20translate(-12%20-12)'%3E%3Cpath%20d='M3%2012c3-4%207-6%2011-6%203%203%203%209%200%2012-4%200-8-2-11-6z%20M14%206l6%206-6%206%20M8%2011h.01'/%3E%3C/g%3E%3Cg%20transform='translate(86.5%20127.6)%20rotate(-18)%20scale(1.01)%20translate(-12%20-12)'%3E%3Cpath%20d='M9%2018V6l10-2v12%20M9%2018a2.5%202.5%200%201%201-5%200%202.5%202.5%200%200%201%205%200z%20M19%2016a2.5%202.5%200%201%201-5%200%202.5%202.5%200%200%201%205%200z'/%3E%3C/g%3E%3Cg%20transform='translate(160.2%20127.5)%20rotate(14)%20scale(1.19)%20translate(-12%20-12)'%3E%3Cpath%20d='M12%2017a5%205%200%201%200%200-10%205%205%200%200%200%200%2010z%20M3%2015c4%202%2014-2%2018-6%20M2%2012c2-3%208-5%2010-5'/%3E%3C/g%3E%3Cg%20transform='translate(245.5%20113.0)%20rotate(-18)%20scale(1.20)%20translate(-12%20-12)'%3E%3Cpath%20d='M14%2013a5%205%200%201%200-4-4l-7%207v3h3v-2h2v-2h2l2-2z%20M15%208h.01'/%3E%3C/g%3E%3Cg%20transform='translate(312.4%20111.2)%20rotate(9)%20scale(1.16)%20translate(-12%20-12)'%3E%3Cpath%20d='M3%209l4-5h10l4%205-9%2012z%20M3%209h18%20M7%204l5%2017%205-17'/%3E%3C/g%3E%3Cg%20transform='translate(399.6%20125.5)%20rotate(19)%20scale(0.97)%20translate(-12%20-12)'%3E%3Cpath%20d='M12%203a9%209%200%201%200%209%209%203%203%200%200%201-3-3%203%203%200%200%201-3-3%203%203%200%200%201-3-3z%20M9%2010h.01M14%2014h.01M9%2015h.01M13%209h.01'/%3E%3C/g%3E%3Cg%20transform='translate(473.8%20110.8)%20rotate(-20)%20scale(1.13)%20translate(-12%20-12)'%3E%3Cpath%20d='M12%2016a4%204%200%201%200%200-8%204%204%200%200%200%200%208z%20M12%202v2M12%2020v2M2%2012h2M20%2012h2M4.9%204.9l1.4%201.4M17.7%2017.7l1.4%201.4M4.9%2019.1l1.4-1.4M17.7%206.3l1.4-1.4'/%3E%3C/g%3E%3Cg%20transform='translate(30.6%20207.9)%20rotate(-22)%20scale(1.08)%20translate(-12%20-12)'%3E%3Cpath%20d='M12%202c3%203%204%207%203%2012l-3%203-3-3c-1-5%200-9%203-12z%20M9%2014l-4%202%201-4%20M15%2014l4%202-1-4%20M12%2017v4'/%3E%3C/g%3E%3Cg%20transform='translate(129.5%20202.1)%20rotate(-15)%20scale(1.06)%20translate(-12%20-12)'%3E%3Cpath%20d='M12%2020c-5-4-9-7-9-11a4.5%204.5%200%200%201%209-1%204.5%204.5%200%200%201%209%201c0%204-4%207-9%2011z'/%3E%3C/g%3E%3Cg%20transform='translate(200.2%20206.1)%20rotate(0)%20scale(1.05)%20translate(-12%20-12)'%3E%3Cpath%20d='M5%208h12v7a4%204%200%200%201-4%204H9a4%204%200%200%201-4-4z%20M17%2010h2a2%202%200%200%201%200%204h-2%20M8%204c0%201%201%201%201%202M12%204c0%201%201%201%201%202'/%3E%3C/g%3E%3Cg%20transform='translate(280.5%20207.5)%20rotate(21)%20scale(1.32)%20translate(-12%20-12)'%3E%3Cpath%20d='M3%2012a9%209%200%200%201%2018%200z%20M12%2012v7a2%202%200%200%201-4%200'/%3E%3C/g%3E%3Cg%20transform='translate(367.9%20194.1)%20rotate(-3)%20scale(1.12)%20translate(-12%20-12)'%3E%3Cpath%20d='M3%206h18v12H3z%20M3%207l9%206%209-6'/%3E%3C/g%3E%3Cg%20transform='translate(437.8%20196.3)%20rotate(9)%20scale(1.12)%20translate(-12%20-12)'%3E%3Cpath%20d='M8%2011h8l-4%2010z%20M12%203a5%205%200%200%201%205%205v3H7V8a5%205%200%200%201%205-5z'/%3E%3C/g%3E%3Cg%20transform='translate(74.3%20276.1)%20rotate(-19)%20scale(1.26)%20translate(-12%20-12)'%3E%3Cpath%20d='M20%2014.5A8%208%200%200%201%209.5%204a8%208%200%201%200%2010.5%2010.5z'/%3E%3C/g%3E%3Cg%20transform='translate(168.8%20282.9)%20rotate(-7)%20scale(1.05)%20translate(-12%20-12)'%3E%3Cpath%20d='M13%202L4%2014h7l-1%208%209-12h-7z'/%3E%3C/g%3E%3Cg%20transform='translate(232.7%20279.4)%20rotate(12)%20scale(0.99)%20translate(-12%20-12)'%3E%3Cpath%20d='M12%2021a9%209%200%201%200%200-18%209%209%200%200%200%200%2018z%20M9%2010h.01%20M15%2010h.01%20M8.5%2014a4.5%204.5%200%200%200%207%200'/%3E%3C/g%3E%3Cg%20transform='translate(327.7%20273.3)%20rotate(8)%20scale(1.04)%20translate(-12%20-12)'%3E%3Cpath%20d='M4%204h16v11H4z%20M9%2019h6%20M12%2015v4'/%3E%3C/g%3E%3Cg%20transform='translate(404.1%20289.9)%20rotate(-5)%20scale(1.12)%20translate(-12%20-12)'%3E%3Cpath%20d='M4%2011h16v9H4z%20M2%207h20v4H2z%20M12%207v13%20M12%207c-2-4-6-3-5-1s5%201%205%201z%20M12%207c2-4%206-3%205-1s-5%201-5%201z'/%3E%3C/g%3E%3Cg%20transform='translate(477.1%20271.8)%20rotate(-7)%20scale(1.09)%20translate(-12%20-12)'%3E%3Cpath%20d='M5%2021V11a7%207%200%200%201%2014%200v10l-2.3-2-2.3%202-2.4-2-2.4%202-2.3-2z%20M9.5%2010.5h.01%20M14.5%2010.5h.01'/%3E%3C/g%3E%3Cg%20transform='translate(39.2%20364.1)%20rotate(-6)%20scale(1.16)%20translate(-12%20-12)'%3E%3Cpath%20d='M6%208h12a4%204%200%200%201%204%204v3a3%203%200%200%201-5%202l-2-2H9l-2%202a3%203%200%200%201-5-2v-3a4%204%200%200%201%204-4z%20M8%2011v4M6%2013h4%20M16%2012h.01M18%2014h.01'/%3E%3C/g%3E%3Cg%20transform='translate(115.9%20369.2)%20rotate(-19)%20scale(1.32)%20translate(-12%20-12)'%3E%3Cpath%20d='M12%2012c-3-5-8-3-6%200s5%202%206%200z%20M12%2012c5-3%203-8%200-6s-2%205%200%206z%20M12%2012c3%205%208%203%206%200s-5-2-6%200z%20M12%2012c-5%203-3%208%200%206s2-5%200-6z%20M12%2012l-1%209'/%3E%3C/g%3E%3Cg%20transform='translate(194.6%20367.5)%20rotate(-21)%20scale(1.06)%20translate(-12%20-12)'%3E%3Cpath%20d='M4%2014v-2a8%208%200%200%201%2016%200v2%20M4%2014h3v5H4z%20M17%2014h3v5h-3z'/%3E%3C/g%3E%3Cg%20transform='translate(288.1%20353.6)%20rotate(13)%20scale(1.28)%20translate(-12%20-12)'%3E%3Cpath%20d='M12%203l9%2016H3z%20M12%203c-3%204-3%208%200%2016%20M9%2014h.01%20M14%2012h.01%20M12%2017h.01'/%3E%3C/g%3E%3Cg%20transform='translate(367.0%20363.5)%20rotate(22)%20scale(1.11)%20translate(-12%20-12)'%3E%3Cpath%20d='M21%203L3%2010.5l7%202.5%202.5%207z%20M10%2013l11-10'/%3E%3C/g%3E%3Cg%20transform='translate(440.7%20360.3)%20rotate(-0)%20scale(1.08)%20translate(-12%20-12)'%3E%3Cpath%20d='M6%2017V11a6%206%200%200%201%2012%200v6l2%202H4z%20M10%2021h4'/%3E%3C/g%3E%3Cg%20transform='translate(75.6%20446.0)%20rotate(-16)%20scale(1.31)%20translate(-12%20-12)'%3E%3Cpath%20d='M12%2013a3%203%200%201%200%200-6%203%203%200%200%200%200%206z%20M12%207V3M12%2021v-8M6.8%208.6l-3-2M17.2%208.6l3-2M6.8%2012.4l-3%202M17.2%2012.4l3%202'/%3E%3C/g%3E%3Cg%20transform='translate(155.4%20430.3)%20rotate(-21)%20scale(1.05)%20translate(-12%20-12)'%3E%3Cpath%20d='M4%208h3l2-3h6l2%203h3v11H4z%20M12%2017a3.5%203.5%200%201%200%200-7%203.5%203.5%200%200%200%200%207z'/%3E%3C/g%3E%3Cg%20transform='translate(242.2%20434.4)%20rotate(-12)%20scale(1.00)%20translate(-12%20-12)'%3E%3Cpath%20d='M4%2020c0-9%206-15%2016-15%200%2010-6%2015-16%2015z%20M4%2020c4-6%208-9%2012-11'/%3E%3C/g%3E%3Cg%20transform='translate(310.2%20449.9)%20rotate(-4)%20scale(1.32)%20translate(-12%20-12)'%3E%3Cpath%20d='M12%2021c-3%200-6-2-6-4%200-3%203-4%206-4s6%201%206%204c0%202-3%204-6%204z%20M6%2011a2%202%200%201%200%200-4%202%202%200%200%200%200%204z%20M18%2011a2%202%200%201%200%200-4%202%202%200%200%200%200%204z%20M9%207a2%202%200%201%200%200-4%202%202%200%200%200%200%204z%20M15%207a2%202%200%201%200%200-4%202%202%200%200%200%200%204z'/%3E%3C/g%3E%3Cg%20transform='translate(402.4%20430.9)%20rotate(10)%20scale(1.33)%20translate(-12%20-12)'%3E%3Cpath%20d='M12%203l2.6%205.6%206.1.7-4.5%204.2%201.2%206L12%2016.6%206.6%2019.5l1.2-6L3.3%209.3l6.1-.7z'/%3E%3C/g%3E%3Cg%20transform='translate(0.9%20447.8)%20rotate(24)%20scale(1.07)%20translate(-12%20-12)'%3E%3Cpath%20d='M3%2018h18l1-11-5%204-5-7-5%207-5-4z'/%3E%3C/g%3E%3C/svg%3E"); }
.chat-screen .content[class*="wp-"]:not(.wp-plain) { background-size: 360px 360px, cover, cover, cover, cover, cover !important; background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; }
.chat-screen .content.wp-default, .wp-row .wp-default { background: var(--wp-pattern-light), radial-gradient(90% 70% at 0% 0%, #DBDDBB 0%, transparent 70%), radial-gradient(90% 70% at 100% 0%, #6BA587 0%, transparent 70%), radial-gradient(90% 70% at 100% 100%, #D5D88D 0%, transparent 70%), radial-gradient(90% 70% at 0% 100%, #88B884 0%, transparent 70%), #A9C8A0; }
.chat-screen .content.wp-blue, .wp-row .wp-blue { background: var(--wp-pattern-light), radial-gradient(90% 70% at 0% 0%, #C9E2F5 0%, transparent 70%), radial-gradient(90% 70% at 100% 100%, #BFE6D6 0%, transparent 70%), #A4CFEA; }
.chat-screen .content.wp-green, .wp-row .wp-green { background: var(--wp-pattern-light), linear-gradient(160deg, #C9EBC4 0%, #A9DBB0 50%, #D5F0DC 100%); }
.chat-screen .content.wp-sunset, .wp-row .wp-sunset { background: var(--wp-pattern-dark), linear-gradient(160deg, #F6A57B 0%, #E9748D 55%, #B45FA6 100%); }
.chat-screen .content.wp-night, .wp-row .wp-night { background: var(--wp-pattern-dark), linear-gradient(160deg, #1B2A3A 0%, #223B52 55%, #1A2C40 100%); }
.chat-screen .content.wp-lavender, .wp-row .wp-lavender { background: var(--wp-pattern-light), linear-gradient(160deg, #DCCBF7 0%, #C3CFF7 55%, #D9E3FB 100%); }
.chat-screen .content.wp-peach, .wp-row .wp-peach { background: var(--wp-pattern-light), linear-gradient(160deg, #FFD9C2 0%, #FFC2CC 55%, #FFE2D1 100%); }
.chat-screen .content.wp-graphite, .wp-row .wp-graphite { background: var(--wp-pattern-dark), linear-gradient(160deg, #2B2B30 0%, #1E1E22 60%, #2A2A2E 100%); }
.chat-screen .content.wp-plain, .wp-row .wp-plain { background: var(--bg-secondary) !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chat-screen .content.wp-default, :root:not([data-theme="light"]) .wp-row .wp-default { background: var(--wp-pattern-dark), radial-gradient(90% 70% at 0% 0%, #1F2E3A 0%, transparent 70%), radial-gradient(90% 70% at 100% 0%, #22403A 0%, transparent 70%), radial-gradient(90% 70% at 100% 100%, #2E3A2A 0%, transparent 70%), radial-gradient(90% 70% at 0% 100%, #1C3327 0%, transparent 70%), #16211C; }
  :root:not([data-theme="light"]) .chat-screen .content.wp-green, :root:not([data-theme="light"]) .wp-row .wp-green { background: var(--wp-pattern-dark), linear-gradient(160deg, #1F3A2A 0%, #183021 60%, #22402E 100%); }
  :root:not([data-theme="light"]) .chat-screen .content.wp-lavender, :root:not([data-theme="light"]) .wp-row .wp-lavender { background: var(--wp-pattern-dark), linear-gradient(160deg, #2E2748 0%, #262C4D 60%, #2C3357 100%); }
  :root:not([data-theme="light"]) .chat-screen .content.wp-peach, :root:not([data-theme="light"]) .wp-row .wp-peach { background: var(--wp-pattern-dark), linear-gradient(160deg, #4A2E24 0%, #40262B 60%, #4A3128 100%); }
}
:root[data-theme="dark"] .chat-screen .content.wp-default, :root[data-theme="dark"] .wp-row .wp-default { background: var(--wp-pattern-dark), radial-gradient(90% 70% at 0% 0%, #1F2E3A 0%, transparent 70%), radial-gradient(90% 70% at 100% 0%, #22403A 0%, transparent 70%), radial-gradient(90% 70% at 100% 100%, #2E3A2A 0%, transparent 70%), radial-gradient(90% 70% at 0% 100%, #1C3327 0%, transparent 70%), #16211C; }
:root[data-theme="dark"] .chat-screen .content.wp-green, :root[data-theme="dark"] .wp-row .wp-green { background: var(--wp-pattern-dark), linear-gradient(160deg, #1F3A2A 0%, #183021 60%, #22402E 100%); }
:root[data-theme="dark"] .chat-screen .content.wp-lavender, :root[data-theme="dark"] .wp-row .wp-lavender { background: var(--wp-pattern-dark), linear-gradient(160deg, #2E2748 0%, #262C4D 60%, #2C3357 100%); }
:root[data-theme="dark"] .chat-screen .content.wp-peach, :root[data-theme="dark"] .wp-row .wp-peach { background: var(--wp-pattern-dark), linear-gradient(160deg, #4A2E24 0%, #40262B 60%, #4A3128 100%); }
.wp-row button { background-size: 110px 110px, cover, cover, cover, cover, cover !important; background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; }

/* Плашки дат и сервисных сообщений: тёмные полупрозрачные на обоях */
.chat-screen .content:not(.wp-plain) .msg-date, .chat-screen .content:not(.wp-plain) .service { background: rgba(0, 0, 0, 0.28); color: #fff; padding: 4px 11px; border-radius: 11px; font-weight: 500; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* Пузыри: входящие всегда непрозрачные, время внутри с наследуемым цветом */
.chat-screen .content:not(.wp-plain) { --bubble-in: #FFFFFF; --bubble-in-text: #000; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chat-screen .content:not(.wp-plain) { --bubble-in: #212121; --bubble-in-text: #fff; } }
:root[data-theme="dark"] .chat-screen .content:not(.wp-plain) { --bubble-in: #212121; --bubble-in-text: #fff; }
.chat-screen .msg.in { background: var(--bubble-in); color: var(--bubble-in-text); }
.msg:has(> .voice), .msg:has(> .doc), .msg:has(> .loc), .msg:has(> .ccard) { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 10px; }
.msg:has(> .voice) > .meta, .msg:has(> .doc) > .meta, .msg:has(> .loc) > .meta, .msg:has(> .ccard) > .meta { float: none; margin: 0 -4px -2px auto; top: 0; }
.msg:has(> .voice) > .sender, .msg:has(> .doc) > .sender { width: 100%; }
.messages { gap: 3px; }
.msg.in .meta { color: inherit; opacity: .55; }
.msg.out .meta { color: rgba(255, 255, 255, .85); opacity: 1; }
.msg.sticker .meta, .msg.media .meta.overlay { opacity: 1; color: #fff; }

/* ---------- Кружочки (видеосообщения) ---------- */
.msg.round { background: transparent !important; padding: 0; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; max-width: none; }
.msg.round::after { display: none; }
.round-msg { position: relative; display: block; width: 220px; height: 220px; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, var(--a1), var(--a2)); box-shadow: 0 4px 16px rgba(0,0,0,.18); cursor: pointer; }
.round-msg video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.round-msg .ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.round-msg .ring circle { fill: none; stroke: rgba(255,255,255,.95); stroke-width: 3; stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linecap: round; transition: stroke-dashoffset .1s linear; }
.round-msg .rplay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.round-msg .rplay svg { width: 48px; height: 48px; fill: #fff; filter: drop-shadow(0 2px 8px rgba(0,0,0,.45)); }
.round-msg.playing .rplay { display: none; }
.round-msg .rdur { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); padding: 2px 8px; border-radius: 10px; background: rgba(0,0,0,.45); color: #fff; font-size: 12px; font-variant-numeric: tabular-nums; }
.msg.round .meta { float: none; display: flex; justify-content: flex-end; margin: 6px 4px 0; padding: 2px 7px; border-radius: 10px; background: rgba(0,0,0,.28); color: #fff !important; opacity: 1; width: max-content; margin-left: auto; top: 0; }
.msg-wrap.in .msg.round .meta { margin-left: 4px; margin-right: auto; }
.round-rec { position: absolute; inset: 0; z-index: 150; background: rgba(0,0,0,.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: #fff; pointer-events: none; }
.round-rec .rr-circle { width: 280px; height: 280px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 4px rgba(255,255,255,.35), 0 10px 40px rgba(0,0,0,.5); background: #111; animation: rr-pulse 1.2s infinite; }
@keyframes rr-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(255,255,255,.35), 0 10px 40px rgba(0,0,0,.5) } 50% { box-shadow: 0 0 0 10px rgba(255,59,48,.45), 0 10px 40px rgba(0,0,0,.5) } }
.round-rec video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.round-rec .rr-timer { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.round-rec .rr-hint { font-size: var(--fs-footnote); opacity: .8; }

/* ---------- Авторизация ---------- */
.onboard .hint { color: var(--label-secondary); font-size: var(--fs-subhead); text-align: center; margin: 0 8px; max-width: 320px; }
.auth-welcome { justify-content: center; }
.auth-welcome .logo { width: 128px; height: 128px; border-radius: 29px; box-shadow: 0 14px 34px rgba(0,122,255,.28); margin-bottom: 4px; }
.auth-welcome h1 { font-size: 30px; }
.auth-welcome .btn.block { margin-top: 40px; }
.auth-welcome .btn.plain.login { margin-top: 4px; font-weight: 600; }
.auth-welcome .btn.plain.lang { margin-top: 0; }
.auth-phone, .auth-code, .auth-name { justify-content: flex-start; padding-top: 16px; gap: 14px; }
.auth-group { width: 100%; margin: 0; }
.auth-group .field { min-height: 50px; }
.auth-group .field input { font-size: 20px; }
.auth-group .country { width: 100%; text-align: left; gap: 10px; }
.auth-group .country .flag { font-size: 22px; }
.auth-group .country .cname { flex: 1; font-size: var(--fs-body); }
.auth-group .code { font-size: 20px; color: var(--label); padding-right: 10px; border-right: .5px solid var(--separator); margin-right: 10px; }
.auth-phone .btn.block { margin-top: 4px; }
.auth-phone .btn.plain { display: inline-flex; gap: 6px; align-items: center; }
.auth-phone .btn.plain svg { width: 20px; height: 20px; fill: currentColor; }
.legal { font-size: var(--fs-caption1); color: var(--label-secondary); max-width: 300px; }
.auth-ico { font-size: 64px; line-height: 1; margin-top: 12px; }
.auth-ico svg { width: 64px; height: 64px; fill: var(--tint); }
.auth-code .code-boxes { margin: 8px 0 0; }
.code-boxes.shake { animation: shake .4s; }
.code-wrap { position: relative; }
/* Настоящий <input>, спрятанный под красивыми квадратиками (.code-boxes) — раньше
   стоял на -9999px за пределами экрана: iOS Safari по инерции ещё показывает для
   такого клавиатуру, Android WebView в этом строже и focus() без видимого элемента
   в пределах экрана часто игнорирует. Теперь input лежит поверх .code-boxes (тот же
   прямоугольник), просто невидим — фокус и клавиатура работают предсказуемо везде. */
.code-input { position: absolute; inset: 0; opacity: 0; border: 0; background: transparent; font-size: 16px; caret-color: transparent; }
.auth-name .av-btn { position: relative; margin-top: 8px; }
.auth-name .av-add { position: absolute; right: -2px; bottom: 2px; width: 32px; height: 32px; border-radius: 50%; background: var(--tint); border: 3px solid var(--bg-grouped); display: flex; align-items: center; justify-content: center; }
.auth-name .av-add svg { width: 16px; height: 16px; fill: #fff; }
.qr-demo { padding: 10px; border-radius: 22px; background: #fff; box-shadow: 0 8px 30px rgba(0,0,0,.12); }

/* ---------- Онбординг: установка и оформление ---------- */
.auth-install, .auth-appearance { justify-content: flex-start; padding-top: 12px; gap: 14px; }
.auth-install h2 { margin: 0; font-size: var(--fs-title2); font-weight: 700; text-align: center; }
.install-hero { position: relative; margin-top: 8px; }
.install-hero img { width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 10px 28px rgba(0,122,255,.25); }
.install-hero .ok { position: absolute; right: -8px; bottom: -6px; width: 34px; height: 34px; border-radius: 50%; background: var(--sys-green); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 3px solid var(--bg-grouped); }
.install-steps { align-self: stretch; display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.istep { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-cell); background: var(--bg-grouped-cell); text-align: left; font-size: var(--fs-subhead); box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.istep .n { width: 26px; height: 26px; border-radius: 50%; background: var(--tint); color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; flex: none; }
.istep .ico { width: 40px; height: 40px; border-radius: 10px; background: var(--fill-tertiary); display: flex; align-items: center; justify-content: center; flex: none; }
.istep .ico svg { width: 22px; height: 22px; fill: var(--tint); }
.design-cards { display: flex; gap: 12px; align-self: stretch; }
.dcard { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px 12px; border-radius: var(--radius-cell); background: var(--bg-grouped-cell); border: 2px solid transparent; box-shadow: 0 1px 3px rgba(0,0,0,.04); transition: transform .3s var(--ease-ios); }
.dcard:active { transform: scale(.96); }
.dcard.is-active { border-color: var(--tint); }
.dcard b { font-size: var(--fs-subhead); margin-top: 6px; } .dcard small { color: var(--label-secondary); font-size: var(--fs-caption1); }
.dprev { position: relative; width: 100%; height: 120px; border-radius: 14px; overflow: hidden; background: linear-gradient(160deg, #cfe3f6, #d8efe2); }
.dprev .b { position: absolute; height: 18px; border-radius: 9px; }
.dprev .b.in { left: 10px; top: 22px; width: 58%; background: #fff; }
.dprev .b.out { right: 10px; top: 48px; width: 50%; background: var(--tint); }
.dprev .tab { position: absolute; left: 10px; right: 10px; bottom: 8px; height: 22px; }
.dprev.glass .tab { border-radius: 11px; background: rgba(255,255,255,.65); box-shadow: 0 4px 12px rgba(0,0,0,.12), inset 0 1px 0 #fff; left: 14px; right: 34px; }
.dprev.glass::after { content: ""; position: absolute; right: 8px; bottom: 8px; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.65); box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.dprev.classic .tab { left: 0; right: 0; bottom: 0; height: 26px; border-radius: 0; background: rgba(249,249,249,.95); border-top: .5px solid rgba(0,0,0,.2); }
.dprev.classic .b.in, .dprev.classic .b.out { border-radius: 9px 9px 9px 3px; }
.dprev.classic .b.out { border-radius: 9px 9px 3px 9px; }
.auth-accents { justify-content: space-between; }
.auth-appearance .btn.block { margin-top: 8px; }
.avatar.icon-avatar svg { width: 55%; height: 55%; fill: #fff; }

/* Клавиатура открыта: убрать нижние safe-area отступы, композер вплотную к клавиатуре */
.kb-open .composer { padding-bottom: 6px !important; }
.kb-open .composer-wrap .panel.open { height: 0; }
.kb-open .tab-bar, .kb-open .tab-search, .kb-open .a2hs { display: none !important; }
.kb-open .screen.with-tab-bar .content { padding-bottom: 12px; }
.kb-open .sheet { margin-bottom: 8px; }

/* ---------- Живой сканер QR (камера) ---------- */
.qr-scan { position: absolute; inset: 0; z-index: 240; background: #000; display: flex; flex-direction: column; color: #fff; opacity: 0; transition: opacity .25s; }
.qr-scan.open { opacity: 1; }
.qr-scan .qs-hdr { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--sai-top) + 8px) 16px 8px; }
.qr-scan .qs-hdr b { font-size: var(--fs-body); }
.qr-scan .qs-hdr button { color: #fff; font-size: var(--fs-body); background: none; border: 0; padding: 6px 0; }
.qr-scan .qs-view { flex: 1; position: relative; overflow: hidden; }
.qr-scan video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qr-scan .qs-frame { position: absolute; left: 50%; top: 50%; width: 240px; height: 240px; transform: translate(-50%, -50%); border-radius: 22px; box-shadow: 0 0 0 200vmax rgba(0,0,0,.45); border: 3px solid rgba(255,255,255,.9); }
.qr-scan .qs-hint { padding: 14px 24px calc(20px + var(--sai-bottom)); text-align: center; font-size: var(--fs-subhead); color: rgba(255,255,255,.85); }

/* ---------- GIF-панель и GIF-сообщения ---------- */
.emoji-grid.gifs { display: block; padding: 8px; }
.emoji-grid.gifs .hdr { padding: 2px 4px 6px; }
.gif-search input { width: 100%; box-sizing: border-box; border: 0; border-radius: 10px; padding: 8px 12px; font-size: var(--fs-body); background: var(--fill-secondary); color: inherit; margin-bottom: 6px; -webkit-appearance: none; }
.gif-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.gif-grid .gif { padding: 0; border: 0; height: auto; border-radius: 10px; overflow: hidden; background: var(--fill-secondary); font-size: 0; }
.gif-grid .gif img { width: 100%; height: 100%; object-fit: cover; display: block; }
.msg.media .photo.gifbox video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Звонок: видео WebRTC ---------- */
.call-screen > * { position: relative; z-index: 1; }
.call-screen .cs-video { position: absolute; inset: 0; z-index: 0; display: none; background: #000; }
.call-screen.has-video .cs-video { display: block; }
.call-screen video.remote { width: 100%; height: 100%; object-fit: cover; display: block; }
.call-screen video.local { position: absolute; right: 16px; top: calc(var(--sai-top) + 16px); width: 108px; height: 150px; object-fit: cover; border-radius: 14px; background: #222; box-shadow: 0 4px 14px rgba(0,0,0,.4); z-index: 2; }
.call-screen.has-video .cs-av { display: none; }
.call-screen.has-video .cs-top { text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.call-screen .ra { display: none; }

/* ---------- Публичный просмотр канала ---------- */
.pub-channel .pub-hdr { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 16px 10px; text-align: center; }
.pub-channel .pub-hdr h2 { margin: 0; font-size: var(--fs-title2); display: flex; align-items: center; gap: 6px; }
.pub-channel .pub-hdr .verified { width: 18px; height: 18px; fill: var(--tint); }
.pub-channel .pub-av .avatar { width: 84px; height: 84px; font-size: 34px; }
.pub-channel .pub-post { padding: 12px 14px; word-break: break-word; }
.pub-channel .pub-text { white-space: pre-wrap; font-size: var(--fs-body); }

/* ---------- Редактор историй (как в Telegram) ---------- */
.story-editor.se2 .se-hdr .se-tb { display: flex; gap: 6px; flex: 1; justify-content: center; }
.story-editor.se2 .se-tb button { width: 40px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.15); color: #fff; font-weight: 700; font-size: 15px; }
.story-editor.se2 .se-tb button.on { background: #fff; color: #000; }
.story-editor.se2 .se-hdr .undo { font-size: 20px; }
.story-editor.se2 .se-stagewrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 4px 12px; min-height: 0; }
.story-editor.se2 .se-stage { position: relative; aspect-ratio: 9 / 16; height: 100%; max-width: 100%; border-radius: 16px; overflow: hidden; background: #000; touch-action: none; }
.story-editor.se2 .se-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-editor.se2 .se-draw { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.story-editor.se2 .se-stage.drawing .se-draw { pointer-events: auto; }
.story-editor.se2 .se-stage.drawing .se-layers { pointer-events: none; }
.story-editor.se2 .se-layers { position: absolute; inset: 0; z-index: 3; }
.story-editor.se2 .se-layer { position: absolute; transform: translate(-50%, -50%); white-space: pre-wrap; text-align: center; font-weight: 700; text-shadow: 0 1px 6px rgba(0,0,0,.45); padding: 4px 8px; border-radius: 8px; outline: 0; min-width: 24px; line-height: 1.15; max-width: 90%; }
.story-editor.se2 .se-layer.emoji { text-shadow: none; }
.story-editor.se2 .se-layer.sel { box-shadow: 0 0 0 1.5px rgba(255,255,255,.8); }
.story-editor.se2 .se-layer.text:empty::before { content: 'Текст'; opacity: .6; }
.story-editor.se2 .se-emojis { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 8px; font-size: 28px; scrollbar-width: none; } .story-editor.se2 .se-emojis::-webkit-scrollbar { display: none; } .story-editor.se2 .se-emojis button { flex: none; }
.story-editor.se2 .se-cap-row { padding: 2px 0 8px; }
.story-editor.se2 .se-cap-row .se-cap { width: 100%; box-sizing: border-box; }
.story-editor.se2 .se-size { display: flex; gap: 6px; } .story-editor.se2 .se-size button { padding: 8px 12px; border-radius: 16px; background: rgba(255,255,255,.15); color: #fff; font-weight: 700; }
.story-editor.se2 .se-hdr .done:disabled { opacity: .6; }


/* ---------- Экран звонка v2 ---------- */
.call-screen.v2 { padding: calc(var(--sai-top) + 44px) 0 0; background: #0b1a2b; justify-content: flex-start; overflow: hidden; }
.call-screen.v2 .cs-bg { position: absolute; inset: -40px; z-index: 0; background-size: cover; background-position: center; filter: blur(48px) saturate(1.3) brightness(.55); transform: scale(1.15); }
.call-screen.v2 .cs-bg:after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55)); }
.call-screen.v2 .cs-top { gap: 8px; padding: 0 24px; width: 100%; box-sizing: border-box; flex: 1; justify-content: center; margin-bottom: 8vh; }
.call-screen.v2 .enc { background: rgba(255,255,255,.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 6px 12px; border-radius: 14px; opacity: 1; margin-bottom: 18px; font-weight: 500; }
.call-screen.v2 .cs-av { position: relative; width: 140px; height: 140px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.call-screen.v2 .cs-av .avatar.lg { width: 124px; height: 124px; font-size: 50px; box-shadow: 0 10px 40px rgba(0,0,0,.45); animation: none; }
.call-screen.v2 .cs-av .pulse { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.55); opacity: 0; }
.call-screen.v2.ringing .cs-av .pulse { animation: csPulse 2.2s ease-out infinite; }
.call-screen.v2.ringing .cs-av .pulse.p2 { animation-delay: 1.1s; }
@keyframes csPulse { 0% { transform: scale(.9); opacity: .9 } 100% { transform: scale(1.9); opacity: 0 } }
.call-screen.v2 h2 { font-size: 32px; font-weight: 600; letter-spacing: -.02em; text-shadow: 0 2px 12px rgba(0,0,0,.4); text-align: center; }
.call-screen.v2 .cst { font-size: 17px; opacity: .85; }
.call-screen.v2 .cs-dots { display: none; gap: 5px; margin-top: 2px; }
.call-screen.v2.ringing .cs-dots { display: flex; }
.call-screen.v2 .cs-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.8); animation: csDot 1.2s infinite; }
.call-screen.v2 .cs-dots i:nth-child(2) { animation-delay: .2s } .call-screen.v2 .cs-dots i:nth-child(3) { animation-delay: .4s }
@keyframes csDot { 0%, 80%, 100% { opacity: .25; transform: translateY(0) } 40% { opacity: 1; transform: translateY(-3px) } }
.call-screen.v2 .cs-ctrl { width: 100%; box-sizing: border-box; padding: 18px 20px calc(var(--sai-bottom) + 28px); background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.45)); transition: transform .3s var(--ease-ios), opacity .3s; }
.call-screen.v2 .call-btns { grid-template-columns: repeat(3, 1fr); gap: 18px 12px; max-width: 360px; margin: 0 auto; }
.call-screen.v2 .call-btns .cb { width: 64px; height: 64px; background: rgba(255,255,255,.18); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 4px 16px rgba(0,0,0,.25); }
.call-screen.v2 .call-btns .cb svg { width: 28px; height: 28px; }
.call-screen.v2 .call-btns button:active .cb { transform: scale(.92); }
.call-screen.v2 .call-btns .cb.end { background: #ff453a; } .call-screen.v2 .call-btns .cb.accept { background: #30d158; animation: csAccept 1.4s infinite; }
@keyframes csAccept { 0%, 100% { box-shadow: 0 0 0 0 rgba(48,209,88,.6) } 70% { box-shadow: 0 0 0 18px rgba(48,209,88,0) } }
.call-screen.v2 .call-btns.incoming { grid-template-columns: 1fr 1fr 1fr; align-items: end; }
.call-screen.v2 .call-btns.incoming .cb.end, .call-screen.v2 .call-btns.incoming .cb.accept { width: 76px; height: 76px; } .call-screen.v2 .call-btns.incoming .cb.end svg, .call-screen.v2 .call-btns.incoming .cb.accept svg { width: 34px; height: 34px; }
.call-screen.v2 .call-btns.incoming .cb.small { width: 52px; height: 52px; } .call-screen.v2 .call-btns.incoming .cb.small svg { width: 22px; height: 22px; }
.call-screen.v2 .call-btns button { font-size: 12px; font-weight: 500; opacity: .95; }
.call-screen.v2.has-video .cs-bg { display: none; }
.call-screen.v2.has-video .cs-top { justify-content: flex-start; margin-bottom: 0; padding-top: 6px; }
.call-screen.v2.has-video .enc { display: none; }
.call-screen.v2.has-video h2 { font-size: 20px; } .call-screen.v2.has-video .cst { font-size: 14px; }
.call-screen.v2.has-video video.local { top: auto; bottom: calc(var(--sai-bottom) + 150px); right: 14px; width: 104px; height: 148px; border: 2px solid rgba(255,255,255,.5); }
.call-screen.v2.ctrl-hidden .cs-ctrl { transform: translateY(110%); opacity: 0; }
.call-screen.v2.ctrl-hidden.has-video .cs-top { opacity: 0; transition: opacity .3s; }
.call-screen.v2.ended .cs-av .avatar.lg { filter: grayscale(1); }
.prem-star { display: inline-block; margin-left: 3px; font-size: .85em; vertical-align: -1px; }

/* ---------- Обои в духе Telegram: 4-цветные mesh-градиенты + дудл-паттерн ---------- */
.chat-screen .content.wp-tg, .wp-row .wp-tg { background: var(--wp-pattern-light), radial-gradient(90% 70% at 0% 0%, #dbddbb 0%, transparent 70%), radial-gradient(90% 70% at 100% 0%, #6ba587 0%, transparent 70%), radial-gradient(90% 70% at 100% 100%, #d5d88d 0%, transparent 70%), radial-gradient(90% 70% at 0% 100%, #88b884 0%, transparent 70%), #a9c8a0; }
.chat-screen .content.wp-aqua, .wp-row .wp-aqua { background: var(--wp-pattern-light), radial-gradient(90% 70% at 0% 0%, #b7e7f5 0%, transparent 70%), radial-gradient(90% 70% at 100% 0%, #9fd8e8 0%, transparent 70%), radial-gradient(90% 70% at 100% 100%, #cdefe0 0%, transparent 70%), radial-gradient(90% 70% at 0% 100%, #a7e0d1 0%, transparent 70%), #b4dfe6; }
.chat-screen .content.wp-rose, .wp-row .wp-rose { background: var(--wp-pattern-light), radial-gradient(90% 70% at 0% 0%, #ffd1dc 0%, transparent 70%), radial-gradient(90% 70% at 100% 0%, #f7b7c8 0%, transparent 70%), radial-gradient(90% 70% at 100% 100%, #ffe3d6 0%, transparent 70%), radial-gradient(90% 70% at 0% 100%, #f6c6d9 0%, transparent 70%), #f8c9d4; }
.chat-screen .content.wp-lime, .wp-row .wp-lime { background: var(--wp-pattern-light), radial-gradient(90% 70% at 0% 0%, #e2f0a8 0%, transparent 70%), radial-gradient(90% 70% at 100% 0%, #bfe08f 0%, transparent 70%), radial-gradient(90% 70% at 100% 100%, #f2f5b5 0%, transparent 70%), radial-gradient(90% 70% at 0% 100%, #a9d47e 0%, transparent 70%), #cfe69c; }
.chat-screen .content.wp-violet, .wp-row .wp-violet { background: var(--wp-pattern-dark), radial-gradient(90% 70% at 0% 0%, #5b3fa8 0%, transparent 70%), radial-gradient(90% 70% at 100% 0%, #8a4fd6 0%, transparent 70%), radial-gradient(90% 70% at 100% 100%, #3c2a7a 0%, transparent 70%), radial-gradient(90% 70% at 0% 100%, #6b4bc0 0%, transparent 70%), #5a3fae; }
.chat-screen .content.wp-ocean, .wp-row .wp-ocean { background: var(--wp-pattern-dark), radial-gradient(90% 70% at 0% 0%, #0f4c75 0%, transparent 70%), radial-gradient(90% 70% at 100% 0%, #1b6ca8 0%, transparent 70%), radial-gradient(90% 70% at 100% 100%, #0b2e4f 0%, transparent 70%), radial-gradient(90% 70% at 0% 100%, #16537e 0%, transparent 70%), #12507d; }
.chat-screen .content.wp-ember, .wp-row .wp-ember { background: var(--wp-pattern-dark), radial-gradient(90% 70% at 0% 0%, #b5451b 0%, transparent 70%), radial-gradient(90% 70% at 100% 0%, #e07b2a 0%, transparent 70%), radial-gradient(90% 70% at 100% 100%, #7a2a12 0%, transparent 70%), radial-gradient(90% 70% at 0% 100%, #c8571f 0%, transparent 70%), #b64f1f; }
.chat-screen .content.wp-forest, .wp-row .wp-forest { background: var(--wp-pattern-dark), radial-gradient(90% 70% at 0% 0%, #1f4d3a 0%, transparent 70%), radial-gradient(90% 70% at 100% 0%, #2f6b4f 0%, transparent 70%), radial-gradient(90% 70% at 100% 100%, #143526 0%, transparent 70%), radial-gradient(90% 70% at 0% 100%, #27593f 0%, transparent 70%), #21503b; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chat-screen .content.wp-tg, :root:not([data-theme="light"]) .wp-row .wp-tg { background: var(--wp-pattern-dark), radial-gradient(90% 70% at 0% 0%, #1f2e3a 0%, transparent 70%), radial-gradient(90% 70% at 100% 0%, #22403a 0%, transparent 70%), radial-gradient(90% 70% at 100% 100%, #2b3a2a 0%, transparent 70%), radial-gradient(90% 70% at 0% 100%, #1e3a2f 0%, transparent 70%), #1d2f2a; }
  :root:not([data-theme="light"]) .chat-screen .content.wp-aqua, :root:not([data-theme="light"]) .wp-row .wp-aqua { background: var(--wp-pattern-dark), radial-gradient(90% 70% at 0% 0%, #163c4a 0%, transparent 70%), radial-gradient(90% 70% at 100% 100%, #1a4a44 0%, transparent 70%), #17414a; }
  :root:not([data-theme="light"]) .chat-screen .content.wp-rose, :root:not([data-theme="light"]) .wp-row .wp-rose { background: var(--wp-pattern-dark), radial-gradient(90% 70% at 0% 0%, #4a2634 0%, transparent 70%), radial-gradient(90% 70% at 100% 100%, #52303a 0%, transparent 70%), #472a33; }
  :root:not([data-theme="light"]) .chat-screen .content.wp-lime, :root:not([data-theme="light"]) .wp-row .wp-lime { background: var(--wp-pattern-dark), radial-gradient(90% 70% at 0% 0%, #2f3f1e 0%, transparent 70%), radial-gradient(90% 70% at 100% 100%, #3a4a26 0%, transparent 70%), #33421f; }
}
:root[data-theme="dark"] .chat-screen .content.wp-tg, :root[data-theme="dark"] .wp-row .wp-tg { background: var(--wp-pattern-dark), radial-gradient(90% 70% at 0% 0%, #1f2e3a 0%, transparent 70%), radial-gradient(90% 70% at 100% 0%, #22403a 0%, transparent 70%), radial-gradient(90% 70% at 100% 100%, #2b3a2a 0%, transparent 70%), radial-gradient(90% 70% at 0% 100%, #1e3a2f 0%, transparent 70%), #1d2f2a; }
:root[data-theme="dark"] .chat-screen .content.wp-aqua, :root[data-theme="dark"] .wp-row .wp-aqua { background: var(--wp-pattern-dark), radial-gradient(90% 70% at 0% 0%, #163c4a 0%, transparent 70%), radial-gradient(90% 70% at 100% 100%, #1a4a44 0%, transparent 70%), #17414a; }
:root[data-theme="dark"] .chat-screen .content.wp-rose, :root[data-theme="dark"] .wp-row .wp-rose { background: var(--wp-pattern-dark), radial-gradient(90% 70% at 0% 0%, #4a2634 0%, transparent 70%), radial-gradient(90% 70% at 100% 100%, #52303a 0%, transparent 70%), #472a33; }
:root[data-theme="dark"] .chat-screen .content.wp-lime, :root[data-theme="dark"] .wp-row .wp-lime { background: var(--wp-pattern-dark), radial-gradient(90% 70% at 0% 0%, #2f3f1e 0%, transparent 70%), radial-gradient(90% 70% at 100% 100%, #3a4a26 0%, transparent 70%), #33421f; }

/* видеозвонок до соединения: своя камера на весь экран (как FaceTime), после завершения — снова фон с аватаром */
.call-screen.v2.has-video.ringing video.local { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; border: none; bottom: auto; right: auto; transform: scaleX(-1); }
.call-screen.v2.has-video.ringing .cs-video:after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,.5)); }
.call-screen.v2.ended .cs-video { display: none; } .call-screen.v2.ended .cs-bg { display: block; } .call-screen.v2.ended .cs-av { display: flex; }

/* Видео в сообщении: превью с кнопкой, по тапу подставляется плеер */
.msg .vidbox { position: relative; display: block; overflow: hidden; border-radius: 14px; background: #000; }
.msg .vidbox img { width: 100%; height: 100%; object-fit: cover; display: block; }
.msg .vplay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%;
  background: rgba(0,0,0,.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; }
.msg .vplay svg { width: 26px; height: 26px; fill: #fff; margin-left: 3px; }
.msg .vdur { position: absolute; left: 8px; top: 8px; padding: 2px 7px; border-radius: 10px; background: rgba(0,0,0,.45); color: #fff; font-size: 12px; }