/* =====================================================================
   Orbita — классический мессенджер-дизайн
   ===================================================================== */
:root {
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  --font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif;
  --accent: #3a8ef2;
  --on-accent: #ffffff;
  --bg: #ffffff;
  --bg-2: #f4f4f5;
  --bg-3: #e9e9ec;
  --hover: #f4f4f5;
  --text: #0f0f0f;
  --muted: #707579;
  --border: #e6e6e9;
  --chat-grad: linear-gradient(160deg, #d0e4ae 0%, #aed4a8 35%, #c9e1b2 65%, #e2e6b3 100%);
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%232b4a1f' stroke-opacity='.16' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14l3 7 7 .5-5.5 4.5 2 7-6.5-4-6.5 4 2-7-5.5-4.5 7-.5z'/%3E%3Ccircle cx='82' cy='28' r='7'/%3E%3Cellipse cx='82' cy='28' rx='14' ry='4.5' transform='rotate(-20 82 28)'/%3E%3Cpath d='M135 50c-7-5-11-8-11-12a5 5 0 0 1 11-2 5 5 0 0 1 11 2c0 4-4 7-11 12z'/%3E%3Cpath d='M28 86h24a4 4 0 0 1 4 4v12a4 4 0 0 1-4 4H38l-7 6v-6h-3a4 4 0 0 1-4-4V90a4 4 0 0 1 4-4z'/%3E%3Ccircle cx='112' cy='108' r='10'/%3E%3Cpath d='M107 111a6 6 0 0 0 10 0M108 104h.01M116 104h.01'/%3E%3Cpath d='M140 126l-8 12h6l-4 10 10-14h-6l4-8z'/%3E%3Cpath d='M70 136v-13l10-2v11'/%3E%3Ccircle cx='67' cy='136' r='3'/%3E%3Ccircle cx='77' cy='132' r='3'/%3E%3Ccircle cx='58' cy='60' r='2'/%3E%3Ccircle cx='150' cy='88' r='2.5'/%3E%3Ccircle cx='10' cy='62' r='1.6'/%3E%3Ccircle cx='100' cy='70' r='1.6'/%3E%3Cpath d='M8 118l4 4M12 118l-4 4'/%3E%3C/g%3E%3C/svg%3E");
  --bubble-in: #ffffff;
  --bubble-out: #e4fbd2;
  --out-meta: #4fae4e;
  --pill: rgba(60, 90, 40, .38);
  --danger: #e53935;
  --online: #3ec44a;
  --shadow: 0 6px 24px rgba(0, 0, 0, .16);
  --radius: 16px;
  --font-size: 15px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #1c242f;
  --bg-2: #242f3d;
  --bg-3: #2e3a49;
  --hover: #26313e;
  --text: #f1f3f5;
  --muted: #8b98a6;
  --border: #111820;
  --chat-grad: linear-gradient(160deg, #0f1a24 0%, #132231 50%, #0e1822 100%);
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.06' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14l3 7 7 .5-5.5 4.5 2 7-6.5-4-6.5 4 2-7-5.5-4.5 7-.5z'/%3E%3Ccircle cx='82' cy='28' r='7'/%3E%3Cellipse cx='82' cy='28' rx='14' ry='4.5' transform='rotate(-20 82 28)'/%3E%3Cpath d='M135 50c-7-5-11-8-11-12a5 5 0 0 1 11-2 5 5 0 0 1 11 2c0 4-4 7-11 12z'/%3E%3Cpath d='M28 86h24a4 4 0 0 1 4 4v12a4 4 0 0 1-4 4H38l-7 6v-6h-3a4 4 0 0 1-4-4V90a4 4 0 0 1 4-4z'/%3E%3Ccircle cx='112' cy='108' r='10'/%3E%3Cpath d='M107 111a6 6 0 0 0 10 0M108 104h.01M116 104h.01'/%3E%3Cpath d='M140 126l-8 12h6l-4 10 10-14h-6l4-8z'/%3E%3Cpath d='M70 136v-13l10-2v11'/%3E%3Ccircle cx='67' cy='136' r='3'/%3E%3Ccircle cx='77' cy='132' r='3'/%3E%3Ccircle cx='58' cy='60' r='2'/%3E%3Ccircle cx='150' cy='88' r='2.5'/%3E%3Ccircle cx='10' cy='62' r='1.6'/%3E%3Ccircle cx='100' cy='70' r='1.6'/%3E%3Cpath d='M8 118l4 4M12 118l-4 4'/%3E%3C/g%3E%3C/svg%3E");
  --bubble-in: #222e3b;
  --bubble-out: #2b5b8a;
  --out-meta: #8fc3f5;
  --pill: rgba(0, 0, 0, .35);
  --shadow: 0 6px 24px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body, #root { height: 100%; }
body {
  font-family: var(--font-text);
  font-size: var(--font-size); color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; overflow: hidden;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: var(--text); }
a { color: var(--accent); }
.hidden { display: none !important; }
svg.i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 40%, transparent); border-radius: 6px; }
code { background: var(--bg-2); padding: 1px 6px; border-radius: 6px; font-size: 13px; }

/* ---------- Экран входа ---------- */
.auth { min-height: 100%; display: grid; place-items: center; padding: 24px 16px; background: var(--bg); overflow-y: auto; }
.auth-card { width: 100%; max-width: 360px; text-align: center; }
.auth-logo img { width: 150px; height: 150px; margin-bottom: 24px; filter: drop-shadow(0 8px 24px color-mix(in srgb, var(--accent) 35%, transparent)); }
.auth-card h2 { font-size: 30px; font-weight: 500; margin-bottom: 8px; }
.auth-card .sub { color: var(--muted); margin-bottom: 28px; line-height: 1.4; }
.seg { display: flex; background: var(--bg-2); border-radius: 12px; padding: 4px; margin-bottom: 16px; }
.seg button { flex: 1; padding: 9px; border-radius: 9px; color: var(--muted); font-weight: 500; transition: all .15s; }
.seg button.active { background: var(--bg); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
:root[data-theme="dark"] .seg button.active { background: var(--bg-3); }
.form { display: flex; flex-direction: column; gap: 14px; text-align: left; }
.field, .form input {
  width: 100%; padding: 15px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); outline: none; transition: border-color .15s, box-shadow .15s;
}
:root[data-theme="dark"] .field, :root[data-theme="dark"] .form input { border-color: var(--bg-3); }
.field:focus, .form input:focus { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
textarea.field { resize: vertical; min-height: 70px; }
.label { font-size: 13px; color: var(--muted); font-weight: 500; margin: 4px 2px -6px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 20px; border-radius: 12px; font-weight: 500; background: var(--accent); color: var(--on-accent); text-transform: uppercase; letter-spacing: .02em; font-size: 14px; transition: filter .15s; }
.btn:hover { filter: brightness(1.07); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.ghost { background: transparent; color: var(--accent); }
.btn.ghost:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.btn.danger { background: transparent; color: var(--danger); }
.btn.danger:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); }
.btn.block { width: 100%; padding: 15px; }
.error { color: var(--danger); font-size: 14px; min-height: 18px; }

/* ---------- Каркас ---------- */
.app { display: flex; height: 100vh; height: 100dvh; }
.sidebar { width: 380px; min-width: 300px; background: var(--bg); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: relative; }
.side-top { display: flex; align-items: center; gap: 10px; padding: 8px 14px; }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); flex-shrink: 0; position: relative; transition: background .15s; }
.icon-btn:hover { background: var(--hover); }
.search { flex: 1; display: flex; align-items: center; gap: 10px; background: var(--bg-2); border-radius: 22px; padding: 0 14px; height: 42px; border: 2px solid transparent; transition: all .15s; }
.search:focus-within { border-color: var(--accent); background: var(--bg); }
.search svg { width: 20px; height: 20px; color: var(--muted); }
.search:focus-within svg { color: var(--accent); }
.search input { flex: 1; border: 0; background: none; outline: none; min-width: 0; }
.folders { display: flex; gap: 2px; padding: 0 10px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; flex-shrink: 0; }
.folders button { position: relative; padding: 10px 12px 12px; color: var(--muted); font-weight: 500; font-size: 14.5px; display: flex; align-items: center; gap: 6px; white-space: nowrap; border-radius: 10px 10px 0 0; }
.folders button:hover { background: var(--hover); }
.folders button.active { color: var(--accent); }
.folders button.active::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent); }
.fbadge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--muted); color: #fff; font-size: 12px; font-weight: 500; display: grid; place-items: center; }
.folders button.active .fbadge { background: var(--accent); }
.chat-list { flex: 1; overflow-y: auto; padding: 6px 8px 90px; }
.section-title { color: var(--muted); font-size: 14px; font-weight: 500; padding: 12px 10px 6px; }
.empty { color: var(--muted); text-align: center; padding: 40px 20px; line-height: 1.5; }

.chat-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; cursor: pointer; }
.chat-item:hover { background: var(--hover); }
.chat-item.active { background: var(--accent); color: #fff; }
.chat-item.active .ci-text, .chat-item.active .ci-time, .chat-item.active .ci-title svg, .chat-item.active .ci-time svg, .chat-item.active .ci-text b, .chat-item.active .ci-text .typing { color: #fff !important; }
.chat-item.active .badge { background: #fff; color: var(--accent); }
.chat-item.active .avatar.online::after { border-color: var(--accent); }
.ci-body { flex: 1; min-width: 0; }
.ci-row { display: flex; align-items: center; gap: 6px; }
.ci-title { font-weight: 500; font-size: 16px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 5px; }
.ci-title svg { width: 16px; height: 16px; color: var(--text); }
.ci-time { color: var(--muted); font-size: 12.5px; display: flex; align-items: center; gap: 2px; }
.ci-time svg { width: 18px; height: 18px; color: var(--out-meta); }
.ci-text { color: var(--muted); font-size: 15px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
.ci-text b { color: var(--text); font-weight: 400; }
.ci-text .typing { color: var(--accent); }
.badge { background: var(--out-meta); color: #fff; border-radius: 12px; min-width: 24px; height: 24px; padding: 0 7px; font-size: 13px; font-weight: 500; display: grid; place-items: center; margin-top: 3px; }
.badge.muted { background: #c4c9cc; }
:root[data-theme="dark"] .badge { background: var(--accent); }
:root[data-theme="dark"] .badge.muted { background: #4a5663; }

.avatar { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 500; font-size: 19px; flex-shrink: 0; position: relative; background-size: cover; background-position: center; }
.avatar.xs { width: 34px; height: 34px; font-size: 13px; }
.avatar.sm { width: 42px; height: 42px; font-size: 16px; }
.avatar.lg { width: 120px; height: 120px; font-size: 44px; margin: 0 auto; }
.avatar.online::after { content: ''; position: absolute; right: 1px; bottom: 1px; width: 13px; height: 13px; border-radius: 50%; background: var(--online); border: 2.5px solid var(--bg); }
.avatar.xs.online::after, .avatar.sm.online::after { width: 11px; height: 11px; border-width: 2px; right: 0; bottom: 0; }
.avatar.saved { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 70%, #fff), var(--accent)); }
.avatar.saved svg { color: #fff; }

.fab { position: absolute; right: 20px; bottom: 20px; width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 45%, transparent); transition: transform .15s; z-index: 2; }
.fab:hover { transform: scale(1.05); }
.fab svg { width: 24px; height: 24px; }

/* ---------- Чат ---------- */
.chat { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; background: var(--chat-grad); }
.chat.pattern::before { content: ''; position: absolute; inset: 0; background-image: var(--pattern); background-size: 180px 180px; pointer-events: none; }
.chat > * { position: relative; }
.chat-empty { margin: auto; }
.pill { background: var(--pill); color: #fff; padding: 5px 12px; border-radius: 16px; font-size: 14.5px; font-weight: 500; }
.chat-inner { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.chat-head { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 20px; background: var(--bg); border-bottom: 1px solid var(--border); min-height: 58px; z-index: 3; }
.chat-head .back { display: none; }
.chat-head-info { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; cursor: pointer; }
.chat-head-info .avatar { width: 42px; height: 42px; font-size: 16px; }
.chat-title { font-weight: 500; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-status { color: var(--muted); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-status.on { color: var(--accent); }
.head-actions { display: flex; gap: 2px; }

.pinned-bar { display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 20px; background: var(--bg); border-bottom: 1px solid var(--border); cursor: pointer; z-index: 2; }
.pinned-bar .pb-line { width: 2px; align-self: stretch; border-radius: 2px; background: var(--accent); }
.pinned-bar .pb-body { flex: 1; min-width: 0; }
.pinned-bar .pb-title { color: var(--accent); font-weight: 500; font-size: 14px; }
.pinned-bar .pb-text { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.search-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bg); border-bottom: 1px solid var(--border); z-index: 2; }
.search-bar input { flex: 1; padding: 10px 14px; }
.search-results { max-height: 45%; overflow-y: auto; background: var(--bg); border-bottom: 1px solid var(--border); z-index: 2; }
.sr-item { padding: 8px 16px; cursor: pointer; display: flex; gap: 10px; align-items: center; }
.sr-item:hover { background: var(--hover); }
.sr-item .grow { flex: 1; min-width: 0; }
.sr-item .t { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.messages { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px max(16px, calc((100% - 760px) / 2)) 6px; display: flex; flex-direction: column; }
.day { align-self: center; background: var(--pill); color: #fff; font-size: 14px; font-weight: 500; padding: 4px 11px; border-radius: 14px; margin: 10px 0 6px; position: sticky; top: 6px; z-index: 2; }
.service { align-self: center; background: var(--pill); color: #fff; font-size: 14px; padding: 4px 11px; border-radius: 14px; margin: 5px 0; text-align: center; max-width: 90%; }
.service b { font-weight: 500; }
.unread-sep { align-self: stretch; text-align: center; font-size: 14px; font-weight: 500; color: var(--muted); background: color-mix(in srgb, var(--bg) 80%, transparent); padding: 4px; margin: 8px calc(-1 * max(16px, calc((100% - 760px) / 2))); }

.row { display: flex; align-items: flex-end; gap: 8px; margin-top: 2px; }
.row.first { margin-top: 8px; }
.row.out { flex-direction: row-reverse; }
.row.appear { animation: msgIn .2s ease-out; }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } }
.row .avatar { width: 34px; height: 34px; font-size: 13px; position: sticky; bottom: 2px; }
.row .av-space { width: 34px; flex-shrink: 0; }

.bubble { max-width: min(480px, 75%); background: var(--bubble-in); border-radius: var(--radius); padding: 6px 10px 6px 11px; position: relative; box-shadow: 0 1px 1px rgba(0,0,0,.13); overflow-wrap: anywhere; line-height: 1.35; min-width: 60px; }
.row.out .bubble { background: var(--bubble-out); }
.row.in.last .bubble { border-bottom-left-radius: 0; }
.row.out.last .bubble { border-bottom-right-radius: 0; }
.row.last .bubble:not(.clear):not(.only-media)::before {
  content: ''; position: absolute; bottom: 0; width: 9px; height: 17px; background: inherit;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 17'%3E%3Cpath d='M9 0v17H0c3.5-.6 6.5-2.8 8-6.2C8.8 8.8 9 5 9 0z'/%3E%3C/svg%3E") no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 17'%3E%3Cpath d='M9 0v17H0c3.5-.6 6.5-2.8 8-6.2C8.8 8.8 9 5 9 0z'/%3E%3C/svg%3E") no-repeat;
}
.row.in.last .bubble::before { left: -8.5px; }
.row.out.last .bubble::before { right: -8.5px; transform: scaleX(-1); }
.bubble .author { font-weight: 500; font-size: 14px; margin-bottom: 1px; cursor: pointer; }
.bubble .fwd { font-size: 14px; color: var(--accent); margin-bottom: 2px; display: flex; gap: 4px; align-items: center; }
.row.out .bubble .fwd { color: var(--out-meta); }
.bubble .fwd svg { width: 14px; height: 14px; }
.bubble .text { white-space: pre-wrap; }
.bubble .text.jumbo { font-size: 46px; line-height: 1.15; }
.bubble.clear { background: none !important; box-shadow: none; padding: 0; }
.bubble.clear .meta { background: var(--pill); color: #fff !important; padding: 2px 7px; border-radius: 10px; }
.bubble.clear .meta svg { color: #fff; }
.bubble.deleted .text { font-style: italic; color: var(--muted); }
.bubble .reply { border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); border-radius: 5px; padding: 2px 8px; margin: 3px 0 5px; font-size: 14px; cursor: pointer; display: flex; gap: 8px; align-items: center; }
.row.out .bubble .reply { border-color: var(--out-meta); background: color-mix(in srgb, var(--out-meta) 12%, transparent); }
.bubble .reply .rthumb { width: 34px; height: 34px; border-radius: 4px; object-fit: cover; }
.bubble .reply b { display: block; color: var(--accent); font-size: 14px; font-weight: 500; }
.row.out .bubble .reply b { color: var(--out-meta); }
.bubble .reply span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px; }
.meta { float: right; display: inline-flex; align-items: center; gap: 2px; margin: 8px -4px -4px 12px; font-size: 12px; color: var(--muted); user-select: none; position: relative; }
.row.out .meta { color: var(--out-meta); }
.meta svg { width: 18px; height: 18px; stroke-width: 2; }
.bubble.flash { animation: flash 1.4s ease; }
@keyframes flash { 30% { filter: brightness(.85); } }

.media { margin: -2px -6px 4px -7px; border-radius: 12px; overflow: hidden; display: block; max-width: 380px; cursor: zoom-in; background: var(--bg-3); }
.media img, .media video { display: block; width: 100%; height: auto; max-height: 440px; object-fit: cover; }
.bubble.only-media { padding: 0; background: none !important; box-shadow: none; }
.bubble.only-media .media { margin: 0; border-radius: var(--radius); }
.bubble.only-media .meta { position: absolute; right: 8px; bottom: 8px; margin: 0; background: rgba(0,0,0,.4); color: #fff; padding: 2px 7px; border-radius: 10px; }
.bubble.only-media .meta svg { color: #fff; }
video.media { cursor: default; }

.file { display: flex; align-items: center; gap: 12px; min-width: 220px; padding: 3px 0; text-decoration: none !important; color: inherit !important; }
.file .ext { width: 54px; height: 54px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 500; text-transform: uppercase; flex-shrink: 0; }
.row.out .file .ext { background: var(--out-meta); }
.file .fname { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.file .fsize { font-size: 13px; color: var(--muted); }
.row.out .file .fsize { color: var(--out-meta); }

.voice { display: flex; align-items: center; gap: 10px; width: 280px; max-width: 100%; padding: 2px 0; }
.voice .play { width: 48px; height: 48px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.row.out .voice .play { background: var(--out-meta); }
.voice .play svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.voice .wave { display: flex; align-items: center; gap: 2px; height: 26px; flex: 1; min-width: 0; overflow: hidden; cursor: pointer; }
.voice .wave i { flex: 0 1 3px; width: 3px; border-radius: 2px; background: color-mix(in srgb, var(--accent) 35%, transparent); min-height: 3px; }
.voice .wave i.on { background: var(--accent); }
.row.out .voice .wave i { background: color-mix(in srgb, var(--out-meta) 40%, transparent); }
.row.out .voice .wave i.on { background: var(--out-meta); }
.voice .vdur { font-size: 12.5px; color: var(--muted); min-width: 34px; }
.row.out .voice .vdur { color: var(--out-meta); }

.call-msg { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 2px 0; }
.call-msg .ci { width: 42px; height: 42px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); display: grid; place-items: center; }
.row.out .call-msg .ci { background: color-mix(in srgb, var(--out-meta) 18%, transparent); color: var(--out-meta); }
.call-msg .ci.missed { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.call-msg b { display: block; font-weight: 500; }
.call-msg span { font-size: 13px; color: var(--muted); }

.reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; clear: both; }
.react { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border-radius: 14px; font-size: 15px; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.row.out .react { background: color-mix(in srgb, var(--out-meta) 16%, transparent); }
.react.mine { background: var(--accent); }
.row.out .react.mine { background: var(--out-meta); }
.react small { font-size: 13px; font-weight: 500; color: var(--accent); }
.row.out .react small { color: var(--out-meta); }
.react.mine small { color: #fff !important; }

.scroll-down { position: absolute; right: 20px; bottom: 84px; width: 48px; height: 48px; border-radius: 50%; background: var(--bg); color: var(--muted); box-shadow: var(--shadow); display: grid; place-items: center; z-index: 3; }
.scroll-down .badge { position: absolute; top: -8px; right: -4px; margin: 0; background: var(--accent); }

/* ---------- Поле ввода ---------- */
.composer-wrap { padding: 4px max(16px, calc((100% - 760px) / 2)) 16px; position: relative; }
.compose-extra { display: flex; align-items: center; gap: 10px; background: var(--bg); border-radius: 16px 16px 0 0; padding: 8px 8px 2px 14px; margin-right: 62px; }
.compose-extra .ce-ico { color: var(--accent); }
.compose-extra .ce-body { flex: 1; min-width: 0; border-left: 2px solid var(--accent); padding-left: 10px; }
.compose-extra .ce-title { color: var(--accent); font-weight: 500; font-size: 14px; }
.compose-extra .ce-text { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.composer { display: flex; align-items: flex-end; gap: 8px; }
.input-box { flex: 1; min-width: 0; display: flex; align-items: flex-end; background: var(--bg); border-radius: 16px; padding: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.12); min-height: 54px; }
.compose-extra:not(.hidden) + .composer .input-box { border-top-left-radius: 0; border-top-right-radius: 0; }
.input-box .icon-btn { width: 46px; height: 46px; }
.composer textarea { flex: 1; border: 0; outline: none; resize: none; background: none; padding: 13px 4px; max-height: 200px; line-height: 1.35; min-width: 0; }
.send { width: 54px; height: 54px; border-radius: 50%; background: var(--bg); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; box-shadow: 0 1px 2px rgba(0,0,0,.12); transition: background .15s, color .15s, transform .1s; }
.send:hover { background: var(--accent); color: #fff; }
.send:active { transform: scale(.94); }
.send svg { width: 24px; height: 24px; }
.recording { display: flex; align-items: center; gap: 12px; flex: 1; padding: 0 8px; min-height: 46px; }
.recording .rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .25; } }
.recording .rec-time { font-variant-numeric: tabular-nums; }
.recording .rec-wave { flex: 1; display: flex; align-items: center; gap: 2px; height: 26px; overflow: hidden; justify-content: flex-end; }
.recording .rec-wave i { width: 3px; border-radius: 2px; background: var(--accent); min-height: 3px; flex-shrink: 0; }
#recSend { background: var(--accent); color: #fff; }
.readonly-bar { display: flex; justify-content: center; }
.readonly-bar .btn { min-width: 280px; background: var(--bg); color: var(--accent); box-shadow: 0 1px 2px rgba(0,0,0,.12); }

.emoji-panel { position: absolute; bottom: 78px; left: max(16px, calc((100% - 760px) / 2)); width: 340px; height: 370px; background: var(--bg); border-radius: 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; z-index: 20; overflow: hidden; animation: pop .15s ease-out; transform-origin: bottom left; }
.emoji-tabs { display: flex; border-bottom: 1px solid var(--border); padding: 4px; gap: 2px; }
.emoji-tabs button { flex: 1; padding: 6px 0; border-radius: 8px; font-size: 19px; opacity: .5; }
.emoji-tabs button.active { opacity: 1; background: var(--bg-2); }
.emoji-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(8, 1fr); padding: 6px; align-content: start; }
.emoji-grid button { font-size: 25px; padding: 4px 0; border-radius: 8px; }
.emoji-grid button:hover { background: var(--bg-2); }

.drop-zone { position: absolute; inset: 12px; border: 2px dashed var(--accent); border-radius: 18px; background: color-mix(in srgb, var(--bg) 90%, transparent); display: grid; place-items: center; font-size: 20px; font-weight: 500; color: var(--accent); z-index: 30; pointer-events: none; }

/* ---------- Панель информации ---------- */
.info { width: 380px; background: var(--bg); border-left: 1px solid var(--border); display: flex; flex-direction: column; overflow-y: auto; flex-shrink: 0; }
.info-head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg); z-index: 1; min-height: 58px; }
.info-head b { flex: 1; font-size: 18px; font-weight: 500; }
.info-top { text-align: center; padding: 24px 16px 12px; }
.info-top h2 { font-size: 21px; font-weight: 500; margin-top: 14px; }
.info-top .muted { margin-top: 2px; }
.info-actions { display: flex; justify-content: center; gap: 8px; padding: 4px 16px 12px; }
.info-actions button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 12px; border-radius: 12px; font-size: 13px; min-width: 82px; color: var(--accent); }
.info-actions button:hover { background: var(--hover); }
.info-actions button span { color: var(--accent); }
.info-list { padding: 4px 8px; }
.info-row { display: flex; gap: 22px; align-items: center; padding: 10px 14px; border-radius: 12px; }
.info-row.click { cursor: pointer; }
.info-row.click:hover { background: var(--hover); }
.info-row svg { color: var(--muted); }
.info-row .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.info-row small { display: block; color: var(--muted); font-size: 13.5px; }
.tabs { display: flex; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border); padding: 0 8px; margin-top: 8px; position: sticky; top: 58px; background: var(--bg); z-index: 1; }
.tabs button { flex-shrink: 0; padding: 12px 12px; font-weight: 500; color: var(--muted); border-bottom: 3px solid transparent; font-size: 14.5px; }
.tabs button.active { color: var(--accent); border-color: var(--accent); }
.media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 2px; }
.media-grid > * { aspect-ratio: 1; overflow: hidden; background: var(--bg-3); cursor: pointer; position: relative; }
.media-grid img, .media-grid video { width: 100%; height: 100%; object-fit: cover; }
.media-grid .play-badge { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.member { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; cursor: pointer; }
.member:hover { background: var(--hover); }
.member .grow { flex: 1; min-width: 0; }
.member .grow b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.role-tag { font-size: 13px; color: var(--muted); }
.muted { color: var(--muted); font-size: 14px; }
.switch { position: relative; width: 36px; height: 16px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: var(--bg-3); border-radius: 8px; transition: .2s; cursor: pointer; }
.switch span::before { content: ''; position: absolute; width: 20px; height: 20px; left: -2px; top: -2px; background: var(--bg); border: 2px solid var(--muted); border-radius: 50%; transition: .2s; box-sizing: border-box; }
.switch input:checked + span { background: color-mix(in srgb, var(--accent) 45%, var(--bg)); }
.switch input:checked + span::before { transform: translateX(20px); border-color: var(--accent); background: var(--accent); }

/* ---------- Меню, модалки, тосты ---------- */
.pop { position: fixed; z-index: 60; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(12px); border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,.2); padding: 6px 0; min-width: 220px; animation: pop .15s ease-out; }
@keyframes pop { from { opacity: 0; transform: scale(.95); } }
.pop button { display: flex; align-items: center; gap: 18px; width: calc(100% - 8px); margin: 0 4px; text-align: left; padding: 8px 14px; border-radius: 8px; font-size: 14.5px; font-weight: 500; }
.pop button:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
.pop button svg { width: 20px; height: 20px; color: var(--muted); }
.pop .danger, .pop .danger svg { color: var(--danger); }
.pop .quick { display: flex; gap: 2px; padding: 0 6px 6px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.pop .quick button { width: 38px; height: 38px; padding: 0; margin: 0; justify-content: center; font-size: 22px; border-radius: 50%; transition: transform .12s; }
.pop .quick button:hover { transform: scale(1.2); background: none; }

.modal { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 50; display: grid; place-items: center; padding: 16px; animation: fade .15s; }
@keyframes fade { from { opacity: 0; } }
.modal-card { width: 100%; max-width: 440px; max-height: 88vh; overflow-y: auto; background: var(--bg); border-radius: 16px; padding: 20px; box-shadow: var(--shadow); animation: modalIn .18s ease-out; }
@keyframes modalIn { from { opacity: 0; transform: scale(.96); } }
.modal-card h2 { font-size: 20px; font-weight: 500; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.modal-card h2 > .icon-btn:last-child { margin-left: auto; }
.modal-card h2 > svg { color: var(--accent); }
.modal-card .form { gap: 12px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 16px; }
.modal-actions .btn:not(.ghost):not(.danger) { background: transparent; color: var(--accent); }
.modal-actions .btn:not(.ghost):not(.danger):hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.pick { display: flex; align-items: center; gap: 12px; padding: 7px 8px; border-radius: 10px; cursor: pointer; }
.pick:hover { background: var(--hover); }
.pick .grow { flex: 1; min-width: 0; }
.pick .grow b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.pick input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--accent); }
.pick-list { max-height: 340px; overflow-y: auto; margin: 6px -8px 0; padding: 0 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); border-radius: 14px; padding: 4px 12px; font-size: 14px; }
.avatar-edit { position: relative; width: 120px; margin: 0 auto 10px; cursor: pointer; }
.avatar-edit .cam { position: absolute; inset: 0; border-radius: 50%; background: rgba(0,0,0,.35); color: #fff; display: grid; place-items: center; opacity: 0; transition: opacity .15s; }
.avatar-edit:hover .cam { opacity: 1; }
.avatar-edit .cam svg { width: 34px; height: 34px; }
.settings-sec { border-top: 8px solid var(--bg-2); padding-top: 14px; margin: 16px -20px 0; padding-left: 20px; padding-right: 20px; }
.settings-sec h3 { font-size: 15px; font-weight: 500; color: var(--accent); margin-bottom: 8px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; }
.set-row > span:first-child { flex-shrink: 0; }
.swatches { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--bg); box-shadow: 0 0 0 2px transparent; }
.swatch.active { box-shadow: 0 0 0 2px var(--text); }
.upload-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; margin-bottom: 12px; }
.upload-list .up { aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--bg-2); display: grid; place-items: center; text-align: center; font-size: 12px; padding: 6px; overflow-wrap: anywhere; }
.upload-list .up img, .upload-list .up video { width: 100%; height: 100%; object-fit: cover; }
.progress { height: 4px; background: var(--bg-3); border-radius: 2px; overflow: hidden; margin-top: 10px; }
.progress i { display: block; height: 100%; background: var(--accent); width: 0; transition: width .2s; }

.toast-wrap { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: rgba(0, 0, 0, .78); color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 14.5px; animation: fade .2s; }

.lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, .9); z-index: 70; display: flex; flex-direction: column; animation: fade .15s; }
.lightbox .lb-top { display: flex; align-items: center; gap: 10px; padding: 10px 16px; color: #fff; }
.lightbox .lb-top .grow { flex: 1; min-width: 0; }
.lightbox .lb-top .icon-btn { color: #fff; }
.lightbox .lb-top .icon-btn:hover { background: rgba(255,255,255,.12); }
.lightbox .lb-body { flex: 1; display: grid; place-items: center; min-height: 0; padding: 0 16px 16px; }
.lightbox img, .lightbox video { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ---------- Звонки ---------- */
.call { position: fixed; inset: 0; z-index: 80; color: #fff; display: flex; flex-direction: column; align-items: center; background: linear-gradient(180deg, #2b5f9e, #203e66 60%, #172c47); }
.call video.remote { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.call video.local { position: absolute; right: 20px; top: 20px; width: 180px; max-width: 32vw; aspect-ratio: 3/4; object-fit: cover; border-radius: 14px; box-shadow: var(--shadow); z-index: 2; transform: scaleX(-1); background: #111; }
.call .call-info { position: relative; z-index: 2; margin-top: 14vh; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; text-shadow: 0 1px 6px rgba(0,0,0,.4); }
.call .call-info .avatar { width: 150px; height: 150px; font-size: 54px; }
.call .call-info .avatar.pulse { animation: pulse 1.8s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.35); } 100% { box-shadow: 0 0 0 40px rgba(255,255,255,0); } }
.call .call-info h2 { font-size: 28px; font-weight: 500; }
.call .call-info .cs { opacity: .8; }
.call.has-video .call-info { margin-top: 24px; }
.call.has-video .call-info .avatar { display: none; }
.call .call-controls { position: absolute; bottom: 52px; left: 0; right: 0; display: flex; justify-content: center; gap: 22px; z-index: 2; flex-wrap: wrap; }
.call .cbtn { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; }
.call .cbtn i { width: 62px; height: 62px; border-radius: 50%; background: rgba(255,255,255,.18); display: grid; place-items: center; transition: background .15s; }
.call .cbtn:hover i { background: rgba(255,255,255,.28); }
.call .cbtn.off i { background: #fff; color: #203e66; }
.call .cbtn.red i { background: #ff4d4d; }
.call .cbtn.green i { background: #3ec44a; }
.call .cbtn svg { width: 28px; height: 28px; }

/* ---------- Админ-панель ---------- */
.modal-card.wide { max-width: 840px; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.stat { background: var(--bg-2); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.stat span { color: var(--muted); font-size: 13.5px; }
.stat b { font-size: 30px; font-weight: 500; color: var(--accent); }
.stat small { color: var(--muted); font-size: 12.5px; }
.adm-list { margin-top: 10px; max-height: 56vh; overflow-y: auto; }
.adm-row { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; cursor: pointer; }
.adm-row:hover { background: var(--hover); }
.adm-row .grow { flex: 1; min-width: 0; }
.adm-row .grow b { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 500; }
.adm-row .grow b svg { width: 16px; height: 16px; color: var(--muted); }
.adm-row .muted { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-row.banned { opacity: .55; }
.tag { font-size: 11.5px; font-weight: 500; padding: 1px 7px; border-radius: 6px; background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.tag.red { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }
#admTabs { overflow-x: auto; }
#admTabs button { white-space: nowrap; }


/* ---------- Опросы ---------- */
.bubble.poll-bubble { min-width: min(320px, 75vw); }
.poll { padding: 2px 0 4px; }
.poll-q { font-weight: 500; font-size: 15.5px; margin-bottom: 2px; }
.poll-kind { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.row.out .poll-kind, .row.out .poll-foot { color: var(--out-meta); }
.poll-opt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 7px 4px; border-radius: 8px; }
.poll-opt:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.po-mark { width: 20px; height: 20px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--muted) 70%, transparent); flex-shrink: 0; }
.po-mark.sq { border-radius: 6px; }
.poll-opt.selected .po-mark { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--bubble-in); }
.row.out .poll-opt.selected .po-mark { box-shadow: inset 0 0 0 3px var(--bubble-out); }
.poll-res { padding: 5px 0; }
.pr-top { display: flex; align-items: center; gap: 8px; font-size: 14.5px; }
.pr-top b { min-width: 38px; font-weight: 500; }
.pr-top span { flex: 1; }
.pr-top svg { width: 18px; height: 18px; color: var(--accent); }
.pr-bar { height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--accent) 12%, transparent); margin: 4px 0 0 46px; overflow: hidden; }
.pr-bar i { display: block; height: 100%; background: var(--accent); border-radius: 2px; transition: width .4s; }
.row.out .pr-bar i, .row.out .pr-top svg { background: var(--out-meta); color: var(--out-meta); }
.row.out .pr-top svg { background: none; }
.poll-res.mine .pr-top span { font-weight: 500; }
.poll-submit { margin-top: 6px; }
.poll-foot { font-size: 13px; color: var(--muted); margin-top: 6px; }
.poll-foot a { color: var(--accent); text-decoration: none; }

/* ---------- Кружочки ---------- */
.round { width: 240px; height: 240px; border-radius: 50%; overflow: hidden; position: relative; cursor: pointer; background: #000; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.round video { width: 100%; height: 100%; object-fit: cover; }
.round-dur { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); background: rgba(0,0,0,.45); color: #fff; font-size: 12px; padding: 2px 8px; border-radius: 10px; }
.round-sound { position: absolute; right: 18%; bottom: 10px; background: rgba(0,0,0,.45); color: #fff; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; }
.round-sound svg { width: 13px; height: 13px; }
.round.playing .round-sound { display: none; }
.round.playing { box-shadow: 0 0 0 3px var(--accent); }
.round-rec { position: fixed; inset: 0; z-index: 85; background: rgba(0,0,0,.75); backdrop-filter: blur(6px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; color: #fff; }
.rr-circle { position: relative; width: min(320px, 80vw); aspect-ratio: 1; }
.rr-circle video { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); border-radius: 50%; object-fit: cover; transform: scaleX(-1); background: #111; }
.rr-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.rr-ring circle { fill: none; stroke: var(--accent); stroke-width: 3; stroke-dasharray: 301.6; stroke-dashoffset: 301.6; stroke-linecap: round; transition: stroke-dashoffset .1s linear; }
.rr-time { display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.rr-time .rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #ff4d4d; animation: blink 1s infinite; }
.rr-actions { display: flex; gap: 40px; }
.round-rec .cbtn, .gcall .cbtn { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; color: #fff; }
.round-rec .cbtn i, .gcall .cbtn i { width: 62px; height: 62px; border-radius: 50%; background: rgba(255,255,255,.18); display: grid; place-items: center; }
.round-rec .cbtn.red i, .gcall .cbtn.red i { background: #ff4d4d; }
.round-rec .cbtn.green i { background: var(--accent); }
.gcall .cbtn.off i { background: #fff; color: #203e66; }
.round-rec .cbtn svg, .gcall .cbtn svg { width: 26px; height: 26px; }
/* 6.73 — кружки: превью через canvas + кнопки камеры (смена камеры, фонарик) */
.rr-circle .rr-cv { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); border-radius: 50%; object-fit: cover; background: #111; }
.rr-cam { position: absolute; bottom: 4px; left: 0; right: 0; display: flex; justify-content: center; gap: 16px; z-index: 4; }
.rr-cbtn { width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; display: grid; place-items: center; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.rr-cbtn svg { width: 22px; height: 22px; }
.rr-cbtn.on { background: var(--accent); }
.rr-cbtn.hidden { display: none; }
/* 6.74 — подсветка экраном для фронтальной камеры (фонарика нет): заливаем экран белым, лицо подсвечивается */
.round-rec.flash-screen { background: #fff; color: #111; }
.round-rec.flash-screen .rr-time { color: #111; }
.round-rec.flash-screen .cbtn i svg { color: #fff; }

/* ---------- Стикеры и GIF ---------- */
.sticker { width: 180px; height: 180px; display: grid; place-items: center; }
.sticker img, .sticker video { max-width: 100%; max-height: 100%; object-fit: contain; }
.media.gif { position: relative; cursor: default; }
.media.gif video, .media.gif img { width: 100%; }
.gif-badge { position: absolute; left: 8px; top: 8px; background: rgba(0,0,0,.45); color: #fff; font-size: 11px; font-weight: 500; padding: 1px 6px; border-radius: 6px; }
.mp-tabs { display: flex; gap: 2px; padding: 6px 6px 0; }
.mp-tabs button { flex: 1; padding: 7px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--muted); }
.mp-tabs button.active { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.sticker-grid { flex: 1; overflow-y: auto; padding: 4px 8px 8px; }
.sg-title { font-size: 13px; font-weight: 500; color: var(--muted); padding: 8px 2px 4px; }
.sg-items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.sg-items.gif { grid-template-columns: repeat(2, 1fr); }
.sg-items button { aspect-ratio: 1; border-radius: 10px; padding: 4px; display: grid; place-items: center; overflow: hidden; }
.sg-items.gif button { aspect-ratio: 16/10; padding: 0; }
.sg-items button:hover { background: var(--bg-2); }
.sg-items img, .sg-items video { max-width: 100%; max-height: 100%; object-fit: contain; }
.sg-items.gif img, .sg-items.gif video { width: 100%; height: 100%; object-fit: cover; }
.sg-items.admin { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); margin-top: 6px; }
.sg-admin { position: relative; aspect-ratio: 1; background: var(--bg-2); border-radius: 10px; display: grid; place-items: center; overflow: hidden; }
.sg-admin img, .sg-admin video { max-width: 90%; max-height: 90%; object-fit: contain; }
.sg-del { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: grid; place-items: center; }
.sg-del svg { width: 13px; height: 13px; }

/* ---------- Каналы: просмотры и комментарии ---------- */
.views { display: inline-flex; align-items: center; gap: 2px; margin-right: 6px; }
.views svg { width: 15px !important; height: 15px !important; }
.silent-ico { width: 13px !important; height: 13px !important; margin-right: 2px; }
.comments-btn { display: flex; align-items: center; gap: 10px; width: calc(100% + 21px); margin: 8px -10px -6px -11px; padding: 9px 12px; border-top: 1px solid color-mix(in srgb, var(--muted) 20%, transparent); color: var(--accent); font-size: 14.5px; font-weight: 500; clear: both; border-radius: 0 0 var(--radius) var(--radius); }
.comments-btn:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.comments-btn span { flex: 1; text-align: left; }
.comments-btn svg { width: 20px; height: 20px; }
.row.last.in .comments-btn { border-bottom-left-radius: 0; }
svg.rot { transform: rotate(180deg); width: 18px; height: 18px; }
.comments-panel { position: absolute; inset: 0; z-index: 15; display: flex; flex-direction: column; background: var(--chat-grad); }
.comments-panel::before { content: ''; position: absolute; inset: 0; background-image: var(--pattern); background-size: 180px 180px; pointer-events: none; }
.comments-panel > * { position: relative; }
.cm-post { padding-bottom: 6px; }

/* ---------- Групповые звонки ---------- */
.gcall-bar { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 20px; background: var(--bg); border-bottom: 1px solid var(--border); z-index: 2; }
.gcall-bar .grow { flex: 1; display: flex; flex-direction: column; }
.gcall-bar b { font-weight: 500; color: var(--accent); }
.gcall-bar span { font-size: 13px; color: var(--muted); }
.gcall-bar .btn { padding: 8px 14px; font-size: 13px; }
.gc-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--online); animation: blink 1.4s infinite; }
.gcall { position: fixed; inset: 0; z-index: 80; background: #0f1722; color: #fff; display: flex; flex-direction: column; }
.gc-head { padding: 14px 20px; }
.gc-head b { font-size: 18px; font-weight: 500; }
.gc-sub { font-size: 13.5px; opacity: .7; }
.gc-grid { flex: 1; min-height: 0; display: grid; gap: 8px; padding: 0 12px; grid-template-columns: repeat(auto-fit, minmax(min(280px, 45vw), 1fr)); grid-auto-rows: minmax(140px, 1fr); overflow-y: auto; }
.gc-grid[data-count="1"] { grid-template-columns: 1fr; }
.gc-grid[data-count="2"] { grid-template-columns: repeat(auto-fit, minmax(min(360px, 90vw), 1fr)); }
.gc-tile { position: relative; background: #1c2a3a; border-radius: 14px; overflow: hidden; display: grid; place-items: center; }
.gc-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.gc-tile[data-tile="me"] video { transform: scaleX(-1); }
.gc-tile.has-video video { opacity: 1; }
.gc-tile.has-video .gc-ava { display: none; }
.gc-ava .avatar.lg { width: 96px; height: 96px; font-size: 36px; }
.gc-tile.connecting .gc-ava { opacity: .5; }
.gc-name { position: absolute; left: 10px; bottom: 8px; background: rgba(0,0,0,.45); padding: 3px 10px; border-radius: 10px; font-size: 13.5px; display: flex; gap: 6px; align-items: center; }
.gc-mic svg { width: 15px; height: 15px; color: #ff6b6b; }
.gc-controls { display: flex; justify-content: center; gap: 22px; padding: 18px 12px calc(22px + env(safe-area-inset-bottom)); }

/* ---------- Разное ---------- */
.qr-box { display: grid; place-items: center; padding: 8px 0; }
.qr-box canvas { width: min(280px, 70vw); height: auto; border-radius: 12px; image-rendering: pixelated; }
.qr-link { text-align: center; color: var(--accent); word-break: break-all; font-size: 14px; }
.sched-item { display: flex; align-items: center; gap: 8px; padding: 8px 4px; border-bottom: 1px solid var(--border); }
.sched-item .grow { flex: 1; min-width: 0; }
.sched-item .muted svg { width: 14px; height: 14px; vertical-align: -2px; }
.sched-text { white-space: pre-wrap; overflow: hidden; text-overflow: ellipsis; max-height: 60px; }
.report { border: 1px solid var(--border); border-radius: 14px; padding: 12px; margin-bottom: 10px; }
.rp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.rp-body { display: flex; gap: 10px; }
.rp-body .grow { flex: 1; min-width: 0; }
.rp-text { background: var(--bg-2); border-radius: 10px; padding: 8px 10px; margin: 6px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.rp-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.rp-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; margin-top: 8px; }
.rp-actions .btn { padding: 9px 12px; font-size: 13px; }
.radio-list input { width: 18px; height: 18px; accent-color: var(--accent); }
select.field.sel { width: auto; min-width: 150px; padding: 9px 12px; }
.pin-ico { color: var(--muted); display: flex; }
.pin-ico svg { width: 17px; height: 17px; transform: rotate(45deg); }
.chat-item.active .pin-ico { color: #fff; }
.set-row small { font-size: 12.5px; }


/* =====================================================================
   v4.2 — улучшения внешнего вида и мобильной версии
   ===================================================================== */
html { -webkit-tap-highlight-color: transparent; }
button, a, .chat-item, .row { touch-action: manipulation; }
.chat-list, .messages, .info, .modal-card, .pick-list, .adm-list, .emoji-grid, .sticker-grid { overscroll-behavior: contain; }

/* Фоны чата */
:root[data-wall="blue"] { --chat-grad: linear-gradient(160deg, #cfe3f7 0%, #a9cdef 40%, #c3d9f3 70%, #e1ebf8 100%); }
:root[data-wall="violet"] { --chat-grad: linear-gradient(160deg, #e3d9f8 0%, #c9b8ef 40%, #dccff4 70%, #f1e8fb 100%); }
:root[data-wall="sunset"] { --chat-grad: linear-gradient(160deg, #fde3c9 0%, #f8c3b3 40%, #f4d0da 70%, #fdebd3 100%); }
:root[data-wall="mint"] { --chat-grad: linear-gradient(160deg, #d3f1ea 0%, #ade2d4 40%, #cbede4 70%, #e9f8f3 100%); }
:root[data-wall="plain"] { --chat-grad: #e7ebee; }
:root[data-theme="dark"][data-wall="blue"] { --chat-grad: linear-gradient(160deg, #0e1a2b 0%, #13263e 50%, #0d1827 100%); }
:root[data-theme="dark"][data-wall="violet"] { --chat-grad: linear-gradient(160deg, #19132c 0%, #241a3f 50%, #161127 100%); }
:root[data-theme="dark"][data-wall="sunset"] { --chat-grad: linear-gradient(160deg, #2a1718 0%, #35201e 50%, #241414 100%); }
:root[data-theme="dark"][data-wall="mint"] { --chat-grad: linear-gradient(160deg, #0e2320 0%, #133029 50%, #0c1d1a 100%); }
:root[data-theme="dark"][data-wall="plain"] { --chat-grad: #10161d; }
.walls { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 6px; }
.wall-opt { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); }
.wall-opt span { width: 100%; aspect-ratio: 1; max-height: 64px; border-radius: 10px; border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.wall-opt.active span { border-color: var(--accent); }
.wall-opt.active { color: var(--accent); }
[data-wall-prev="green"] span { background: linear-gradient(160deg, #d0e4ae, #aed4a8 40%, #e2e6b3); }
[data-wall-prev="blue"] span { background: linear-gradient(160deg, #cfe3f7, #a9cdef 40%, #e1ebf8); }
[data-wall-prev="violet"] span { background: linear-gradient(160deg, #e3d9f8, #c9b8ef 40%, #f1e8fb); }
[data-wall-prev="sunset"] span { background: linear-gradient(160deg, #fde3c9, #f8c3b3 40%, #fdebd3); }
[data-wall-prev="mint"] span { background: linear-gradient(160deg, #d3f1ea, #ade2d4 40%, #e9f8f3); }
[data-wall-prev="plain"] span { background: #e7ebee; }

/* Пузыри — чуть мягче и аккуратнее */
.bubble { box-shadow: 0 1px 1.5px rgba(16, 35, 60, .13); }
.row.out .bubble { box-shadow: 0 1px 1.5px rgba(40, 90, 30, .15); }
:root[data-theme="dark"] .bubble, :root[data-theme="dark"] .row.out .bubble { box-shadow: 0 1px 2px rgba(0,0,0,.35); }
.bubble .text a { word-break: break-all; }
.row.appear.out { animation: msgOut .22s cubic-bezier(.2, .9, .3, 1.2); transform-origin: bottom right; }
@keyframes msgOut { from { opacity: 0; transform: translateY(10px) scale(.96); } }
.day { backdrop-filter: blur(4px); }

/* Свайп для ответа */
.row { position: relative; will-change: transform; }
.row::after {
  content: ''; position: absolute; right: -46px; top: 50%; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%;
  background: var(--pill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 8 4 13l6 5'/%3E%3Cpath d='M4 13h10a6 6 0 0 1 6 6'/%3E%3C/svg%3E") center / 20px no-repeat;
  opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; pointer-events: none;
}
.row.swipe-ready::after { opacity: 1; transform: scale(1); }

/* Индикатор «печатает» */
.tdots { display: inline-flex; gap: 2.5px; margin-right: 5px; vertical-align: middle; }
.tdots b { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: tdot 1.2s infinite ease-in-out; }
.tdots b:nth-child(2) { animation-delay: .15s; }
.tdots b:nth-child(3) { animation-delay: .3s; }
@keyframes tdot { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2.5px); } }

/* Пустые экраны */
.welcome-card { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(10px); padding: 28px 32px; border-radius: 24px; box-shadow: 0 8px 30px rgba(0,0,0,.08); max-width: 340px; }
.welcome-card img { width: 84px; height: 84px; margin-bottom: 6px; }
.welcome-card b { font-size: 19px; font-weight: 500; }
.welcome-card span { color: var(--muted); line-height: 1.4; }
.welcome-card .btn { margin-top: 10px; }
.hello-card { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(10px); padding: 24px 28px; border-radius: 22px; max-width: 300px; box-shadow: 0 6px 24px rgba(0,0,0,.08); }
.hello-card b { font-size: 17px; font-weight: 500; }
.hello-card span { color: var(--muted); font-size: 14.5px; line-height: 1.4; }
.hello-card .btn { margin-top: 10px; text-transform: none; font-size: 15px; letter-spacing: 0; border-radius: 20px; padding: 10px 20px; }
.hello-emoji { font-size: 64px; line-height: 1; margin-bottom: 4px; animation: wave 2.4s ease-in-out infinite; transform-origin: 70% 70%; }
@keyframes wave { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(14deg); } 20% { transform: rotate(-8deg); } 40% { transform: rotate(-4deg); } 50% { transform: rotate(10deg); } }
.avatar.md { width: 72px; height: 72px; font-size: 26px; }

/* Боковое меню */
#drawer { position: fixed; inset: 0; z-index: 70; }
.drawer-bd { position: absolute; inset: 0; background: rgba(0,0,0,.4); animation: fade .2s; }
.drawer { position: absolute; left: 0; top: 0; bottom: 0; width: min(310px, 84vw); background: var(--bg); display: flex; flex-direction: column; box-shadow: 4px 0 24px rgba(0,0,0,.2); animation: drawerIn .24s cubic-bezier(.2, .9, .3, 1); transition: transform .2s; }
@keyframes drawerIn { from { transform: translateX(-100%); } }
#drawer.closing .drawer { transform: translateX(-100%); }
#drawer.closing .drawer-bd { opacity: 0; transition: opacity .2s; }
.drawer-head { position: relative; padding: calc(22px + env(safe-area-inset-top)) 20px 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 85%, #fff), color-mix(in srgb, var(--accent) 80%, #000)); color: #fff; }
.drawer-head .avatar { box-shadow: 0 0 0 3px rgba(255,255,255,.35); margin-bottom: 12px; }
.dh-name { font-size: 17px; font-weight: 500; }
.dh-user { font-size: 14px; opacity: .85; margin-top: 2px; }
.dh-theme { position: absolute; right: 12px; top: calc(14px + env(safe-area-inset-top)); color: #fff !important; }
.dh-theme:hover { background: rgba(255,255,255,.15) !important; }
.drawer-list { flex: 1; overflow-y: auto; padding: 8px 0; }
.drawer-list button { display: flex; align-items: center; gap: 26px; width: 100%; padding: 13px 22px; font-size: 15.5px; font-weight: 500; text-align: left; }
.drawer-list button:hover, .drawer-list button:active { background: var(--hover); }
.drawer-list button svg { color: var(--muted); }
.drawer-list button.danger, .drawer-list button.danger svg { color: var(--danger); }
.drawer-list hr { border: 0; border-top: 1px solid var(--border); margin: 6px 0; }
.drawer-foot { padding: 12px 22px calc(14px + env(safe-area-inset-bottom)); color: var(--muted); font-size: 13px; }

/* Шторки снизу на телефоне */
.sheet-backdrop { position: fixed; inset: 0; z-index: 59; background: rgba(0,0,0,.35); animation: fade .18s; }
.pop.sheet { left: 8px !important; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); top: auto !important; min-width: 0; max-height: 80vh; overflow-y: auto; border-radius: 18px; padding: 6px; background: var(--bg); backdrop-filter: none; animation: sheetUp .24s cubic-bezier(.2, .9, .3, 1); }
@keyframes sheetUp { from { transform: translateY(110%); } }
.pop.sheet button { width: 100%; margin: 0; padding: 14px 16px; font-size: 16px; border-radius: 12px; gap: 20px; }
.pop.sheet button svg { width: 22px; height: 22px; }
.pop.sheet .quick { justify-content: space-around; padding: 6px 4px 10px; }
.pop.sheet .quick button { width: 44px; height: 44px; font-size: 27px; padding: 0; }
.sheet-title { padding: 10px 16px 8px; color: var(--muted); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.pop.sheet .sheet-cancel { justify-content: center; color: var(--accent); font-weight: 500; margin-top: 4px; border-top: 1px solid var(--border); border-radius: 0 0 12px 12px; }

/* Шапки и списки — аккуратнее */
.chat-item { transition: background .12s; }
.chat-item:active { background: var(--bg-3); }
.ci-title { font-size: 16px; }
.folders button .fbadge { transform: scale(.92); }


/* Профиль в панели информации */
.info-top { margin: 10px 10px 4px; border-radius: 20px; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 14%, var(--bg)), var(--bg) 85%); padding: 26px 16px 18px; }
.info-top .avatar.lg { box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 25%, transparent); }
.info-actions { gap: 8px; padding: 6px 12px 10px; }
.info-actions button { flex: 1; max-width: 120px; background: var(--bg-2); border-radius: 14px; padding: 12px 6px; gap: 6px; }
.info-actions button:hover { background: color-mix(in srgb, var(--accent) 12%, var(--bg-2)); }
.info-list { padding: 4px 10px; }

/* ---------- Адаптив ---------- */
@media (max-width: 1180px) {
  .info { position: fixed; right: 0; top: 0; bottom: 0; z-index: 40; box-shadow: var(--shadow); }
}
@media (max-width: 800px) {
  .sidebar { width: 100%; min-width: 0; border-right: 0; }
  .chat { position: fixed; inset: 0; z-index: 20; transform: translateX(100%); transition: transform .25s ease; }
  .app.chat-open .chat { transform: none; }
  .chat-head { padding: 4px 6px 4px 2px; }
  .chat-head .back { display: grid; }
  .messages { padding: 8px 10px 4px; }
  .unread-sep { margin: 8px -10px; }
  .composer-wrap { padding: 4px 8px calc(8px + env(safe-area-inset-bottom)); }
  .composer { gap: 6px; }
  .input-box { min-height: 48px; padding: 2px; }
  .input-box .icon-btn { width: 42px; height: 42px; }
  .composer textarea { padding: 11px 2px; }
  .send { width: 48px; height: 48px; }
  .compose-extra { margin-right: 54px; }
  .bubble { max-width: 85%; }
  .info { width: 100%; }
  .emoji-panel { left: 8px; right: 8px; width: auto; }
  .head-actions .hide-m { display: none; }
  .call video.local { width: 110px; top: 12px; right: 12px; }
  .round { width: 200px; height: 200px; }
  .gc-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .gc-grid[data-count="1"], .gc-grid[data-count="2"] { grid-template-columns: 1fr !important; }
  .fab { bottom: calc(20px + env(safe-area-inset-bottom)); }
  /* --- мобильная полировка --- */
  input, textarea, select, .field { font-size: 16px !important; } /* iOS не приближает экран при вводе */
  .side-top { padding: calc(8px + env(safe-area-inset-top)) 10px 6px; }
  .chat-head { min-height: calc(56px + env(safe-area-inset-top)); padding-top: calc(4px + env(safe-area-inset-top)); }
  .chat-title { font-size: 17px; }
  .chat-status { font-size: 13.5px; }
  .chat-head-info .avatar { width: 40px; height: 40px; }
  .info-head { padding-top: calc(9px + env(safe-area-inset-top)); }
  .info { animation: infoIn .25s cubic-bezier(.2, .9, .3, 1); }
  @keyframes infoIn { from { transform: translateX(100%); } }
  .chat-list { padding: 4px 4px 96px; }
  .chat-item { border-radius: 0; padding: 9px 12px; }
  .chat-item.active { background: transparent; color: inherit; }
  .chat-item.active .ci-text, .chat-item.active .ci-time, .chat-item.active .ci-title svg, .chat-item.active .ci-text b { color: inherit !important; }
  .chat-item.active .ci-text { color: var(--muted) !important; }
  .chat-item.active .badge { background: var(--out-meta); color: #fff; }
  .avatar { width: 56px; height: 56px; }
  .ci-body { border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: -10px; }
  .chat-item:last-child .ci-body { border-bottom: 0; }
  .bubble { font-size: calc(var(--font-size) + 1px); max-width: 84%; }
  .messages { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  .messages .poll, .messages a { -webkit-user-select: none; }
  .search { height: 40px; }
  .folders { padding: 0 6px; }
  .folders button { padding: 9px 11px 11px; font-size: 14.5px; }
  .emoji-panel { bottom: calc(66px + env(safe-area-inset-bottom)); height: min(46vh, 380px); border-radius: 18px; }
  .scroll-down { bottom: calc(80px + env(safe-area-inset-bottom)); right: 12px; }
  .welcome-card { display: none; }
  .modal-card::before { content: ''; display: block; width: 38px; height: 4px; border-radius: 2px; background: var(--bg-3); margin: -10px auto 12px; }
  .walls { grid-template-columns: repeat(3, 1fr); }
  .gc-head { padding-top: calc(14px + env(safe-area-inset-top)); }
  .fab { width: 58px; height: 58px; }

  .modal { align-items: end; padding: 0; }
  .modal-card { border-radius: 16px 16px 0 0; max-height: 92vh; padding-bottom: calc(20px + env(safe-area-inset-bottom)); animation: sheetIn .25s ease-out; }
  @keyframes sheetIn { from { transform: translateY(100%); } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
.info > * { flex-shrink: 0; }

/* ===================== v4.3 ===================== */
/* Галочка «подтверждено» */
.vbadge { width: 17px; height: 17px; flex-shrink: 0; margin-left: 4px; vertical-align: -3px; display: inline-block; }
.vbadge path:first-child { fill: var(--accent); }
.vbadge .vb-check { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.chat-title .vbadge, h2 .vbadge { width: 19px; height: 19px; }
.ci-title .ttl-ico { width: 15px; height: 15px; color: var(--muted); margin-left: 3px; }
.ttl-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 400; color: var(--muted); background: var(--bg-2); border-radius: 10px; padding: 1px 7px 1px 5px; margin-left: 8px; vertical-align: 2px; }
.ttl-chip svg { width: 13px; height: 13px; }
.meta .ttl-m svg { width: 13px; height: 13px; margin-right: 2px; }

/* Форматирование */
.bubble .text b { font-weight: 600; }
.bubble .text code { background: color-mix(in srgb, var(--text) 8%, transparent); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; padding: 1px 5px; border-radius: 5px; }
.bubble pre.code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; background: color-mix(in srgb, var(--text) 7%, transparent); border-left: 3px solid var(--accent); border-radius: 6px; padding: 6px 10px; margin: 4px 0; white-space: pre-wrap; overflow-x: auto; }
.spoiler { background: color-mix(in srgb, var(--text) 55%, transparent); color: transparent; border-radius: 4px; cursor: pointer; transition: all .25s; user-select: none; }
.spoiler * { color: transparent !important; }
.spoiler.shown { background: color-mix(in srgb, var(--text) 8%, transparent); color: inherit; user-select: text; cursor: text; }
.spoiler.shown * { color: inherit !important; }
.fmt-bar { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); display: flex; gap: 2px; background: var(--bg); border-radius: 12px; padding: 4px; box-shadow: 0 4px 18px rgba(0,0,0,.18); z-index: 6; animation: fade .12s; }
.fmt-bar button { width: 38px; height: 34px; border-radius: 8px; display: grid; place-items: center; color: var(--text); }
.fmt-bar button:hover { background: var(--hover); }
.fmt-bar svg { width: 20px; height: 20px; }
#composerWrap { position: relative; }

/* @упоминания */
.mention-list { position: absolute; left: 12px; right: 12px; bottom: calc(100% + 4px); max-width: 420px; background: var(--bg); border-radius: 12px; box-shadow: 0 4px 22px rgba(0,0,0,.18); padding: 6px; z-index: 6; animation: fade .12s; }
.ml-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; cursor: pointer; }
.ml-item.active, .ml-item:hover { background: var(--hover); }
.ml-item .avatar { width: 30px; height: 30px; font-size: 12px; }
.ml-item .muted { font-size: 13px; }

/* Превью ссылок */
.lp { display: flex; gap: 10px; margin: 6px 0 2px; padding: 6px 8px 6px 10px; border-left: 3px solid var(--accent); border-radius: 6px; background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--text); text-decoration: none; max-width: 100%; overflow: hidden; }
.row.out .lp { border-color: var(--out-meta); background: color-mix(in srgb, var(--out-meta) 12%, transparent); }
.lp:hover { filter: brightness(.98); }
.lp-body { flex: 1; min-width: 0; font-size: .93em; line-height: 1.35; }
.lp-site { color: var(--accent); font-weight: 500; display: block; }
.row.out .lp-site { color: var(--out-meta); }
.lp-title { font-weight: 600; margin-top: 1px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lp-desc { color: color-mix(in srgb, var(--text) 80%, transparent); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; }
.lp-img { width: 64px; height: 64px; flex-shrink: 0; border-radius: 6px; overflow: hidden; background: var(--bg-3); }
.lp-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp.big { flex-direction: column; }
.lp.big .lp-img { width: 100%; height: auto; aspect-ratio: 16/9; order: 2; }

/* Альбомы */
.album { display: grid; gap: 2px; width: min(360px, 100%); border-radius: 12px; overflow: hidden; margin: 2px 0; }
.bubble:not(.only-media) .album { width: min(360px, calc(100vw - 120px)); margin: -3px -6px 4px -7px; border-radius: 12px 12px 4px 4px; }
.album { width: min(360px, calc(100vw - 110px)); }
.album.n2 { grid-template-columns: 1fr 1fr; }
.album.n3 { grid-template-columns: 1fr 1fr; } .album.n3 .al-item:first-child { grid-column: span 2; aspect-ratio: 2; }
.album.n4 { grid-template-columns: 1fr 1fr; }
.album.n5, .album.n6, .album.n7, .album.n8, .album.n9, .album.n10 { grid-template-columns: repeat(6, 1fr); }
.album.n5 .al-item, .album.n6 .al-item, .album.n7 .al-item, .album.n8 .al-item, .album.n9 .al-item, .album.n10 .al-item { grid-column: span 2; }
.album.n5 .al-item:nth-child(-n+2), .album.n7 .al-item:nth-child(-n+3), .album.n8 .al-item:nth-child(-n+2), .album.n10 .al-item:nth-child(-n+4) { grid-column: span 3; }
.al-item { aspect-ratio: 1; position: relative; overflow: hidden; background: var(--bg-3); cursor: pointer; display: block; }
.al-item img, .al-item video { width: 100%; height: 100%; object-fit: cover; display: block; }
.al-item .play-badge { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.bubble.only-media.album-b .album { margin: 0; }

/* Выделение сообщений */
.sel-bar { position: absolute; top: 0; left: 0; right: 0; height: 56px; z-index: 5; display: flex; align-items: center; gap: 6px; padding: 0 10px; background: var(--bg); border-bottom: 1px solid var(--border); animation: fade .12s; }
.sel-bar b { font-weight: 500; font-size: 16px; }
.sel-bar .grow { flex: 1; }
.sel-bar .danger { color: var(--danger); }
.chat-inner { position: relative; }
.messages.selecting .row { cursor: pointer; position: relative; padding-left: 36px; }
.messages.selecting .row::before { content: ''; position: absolute; left: 6px; bottom: 6px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--muted) 70%, transparent); background: var(--bg); }
.messages.selecting .row.selected::before { background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat; border-color: var(--accent); }
.messages.selecting .row.selected { background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 8px; }
.messages.selecting .bubble { pointer-events: none; }
.row.vanish { animation: vanish .25s forwards; }
@keyframes vanish { to { opacity: 0; transform: scale(.9); } }

/* Лайтбокс: листание */
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; z-index: 2; }
.lb-nav:hover { background: rgba(255,255,255,.22); }
.lb-nav[disabled] { opacity: .25; pointer-events: none; }
.lb-nav svg, .lb-nav svg.rot { width: 26px; height: 26px; }
.lb-nav.prev { left: 14px; } .lb-nav.next { right: 14px; }
.lb-count { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); color: #fff; opacity: .8; font-size: 14px; }
.lightbox { outline: none; }
@media (max-width: 800px) { .lb-nav { display: none; } }

/* Поиск по сообщениям */
.ci-text mark { background: color-mix(in srgb, var(--accent) 25%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }

/* Вход: доп. ссылки */
.auth-links { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin-top: 18px; }
.linkish { color: var(--accent); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; }
.linkish svg { width: 18px; height: 18px; }
.auth-foot { text-align: center; margin-top: 22px; font-size: 13px; color: var(--muted); }
.auth-foot a { color: var(--muted); text-decoration: none; }
.auth-foot a:hover { color: var(--accent); }
.auth .auth-logo > svg { width: 84px; height: 84px; color: var(--accent); stroke-width: 1.4; margin-bottom: 14px; }
.otp { text-align: center; letter-spacing: 6px; font-size: 22px !important; font-variant-numeric: tabular-nums; }
.otp::placeholder { letter-spacing: normal; font-size: 16px; }
.ql-steps { padding-left: 20px; line-height: 1.55; margin: 6px 0 12px; }
.ql-steps li { margin: 3px 0; }
.qr-box canvas { max-width: 100%; height: auto; }
.qr-video { width: 100%; border-radius: 12px; background: #000; aspect-ratio: 1; object-fit: cover; }
.qa-card { display: flex; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--bg-2); }
.qa-card svg { width: 30px; height: 30px; color: var(--accent); }
.qa-card div { display: flex; flex-direction: column; }
.secret-key { text-align: center; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; letter-spacing: 1px; background: var(--bg-2); border-radius: 10px; padding: 8px; margin: 8px 0 12px; cursor: pointer; word-break: break-all; }
.backup-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.backup-codes code { text-align: center; font-size: 15px; padding: 8px; letter-spacing: 1px; }

/* Устройства */
.sess-row { display: flex; align-items: center; gap: 14px; padding: 10px 4px; border-bottom: 1px solid var(--border); }
.sess-row .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sess-row .muted { font-size: 13px; }
.sess-row .on { color: var(--accent); }
.sess-ico { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); flex-shrink: 0; }
.sess-ico.m { background: color-mix(in srgb, var(--online) 16%, transparent); color: var(--online); }
.btn.sm { padding: 7px 12px; font-size: 12.5px; }
.set-row.click { cursor: pointer; gap: 14px; border-radius: 10px; }
.set-row.click:hover { background: var(--hover); }
.set-row.click > svg:first-child { color: var(--muted); }
.set-row .grow { flex: 1; }
.settings-sec .set-row.click { padding: 10px 6px; margin: 0 -6px; }
.radio-list input[type=radio] { width: 20px; height: 20px; accent-color: var(--accent); }
.readonly-bar.muted { gap: 8px; align-items: center; color: var(--muted); padding: 14px; font-size: 14px; }
.readonly-bar.muted svg { width: 18px; height: 18px; }

/* Онбординг */
.ob { text-align: center; }
.ob-hero { font-size: 56px; margin: 6px 0 4px; }
.ob-t { justify-content: center; margin-bottom: 8px; }
.ob-p { color: var(--muted); line-height: 1.5; margin-bottom: 16px; }
.ob .avatar-edit { margin-bottom: 14px; }
.ob-dots { display: flex; gap: 6px; justify-content: center; margin: 18px 0 4px; }
.ob-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--bg-3); transition: all .2s; }
.ob-dots i.on { background: var(--accent); width: 22px; border-radius: 4px; }

/* Админка: графики */
.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 14px; }
.chart-card { background: var(--bg-2); border-radius: 14px; padding: 12px 14px 8px; }
.chart-card h4 { font-size: 14px; font-weight: 500; display: flex; justify-content: space-between; margin-bottom: 6px; }
.chart-card h4 span { color: var(--muted); font-weight: 400; }
.chart-card svg { width: 100%; height: 110px; display: block; overflow: visible; }
.chart-card .bar { fill: var(--accent); opacity: .85; }
.chart-card .bar:hover { opacity: 1; }
.chart-card .axis { font-size: 10px; fill: var(--muted); }
.chart-card .grid { stroke: var(--border); stroke-width: 1; }
.page-edit { width: 100%; min-height: 240px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.5; }
.al-item { min-height: 0; min-width: 0; }
.al-item img, .al-item video { position: absolute; inset: 0; }

/* =====================================================================
   4.4 — чаты красивее: время в строке, стикеры, эмодзи, панель
   ===================================================================== */
:root { --radius: 18px; }
.bubble { padding: 6px 11px 7px 12px; line-height: 1.38; }
/* время в конце последней строки */
.bubble.tm .text::after { content: ''; display: inline-block; width: var(--mw, 44px); height: 1px; }
.bubble.tm .meta { position: absolute; right: 9px; bottom: 5px; margin: 0; float: none; }
.row.out .bubble.tm .meta { right: 8px; }
.meta { font-size: 12px; letter-spacing: .1px; }
.meta svg { width: 17px; height: 17px; }
/* плавные группы сообщений */
.row.in:not(.first) .bubble { border-top-left-radius: 6px; }
.row.in:not(.last) .bubble { border-bottom-left-radius: 6px; }
.row.out:not(.first) .bubble { border-top-right-radius: 6px; }
.row.out:not(.last) .bubble { border-bottom-right-radius: 6px; }
.bubble.clear, .bubble.only-media { border-radius: var(--radius) !important; }
.row.out .bubble:not(.clear):not(.only-media) { background: var(--bubble-out); }
:root:not([data-theme="dark"]) .row.out .bubble:not(.clear):not(.only-media) { background: linear-gradient(180deg, color-mix(in srgb, var(--bubble-out) 70%, #fff) 0%, var(--bubble-out) 100%); background-attachment: local; }
.row.out.last .bubble:not(.clear):not(.only-media)::before { background: var(--bubble-out); }
/* большие эмодзи */
.bubble.jumbo-1 .text.jumbo { font-size: 72px; line-height: 1.05; }
.bubble.jumbo-2 .text.jumbo { font-size: 56px; line-height: 1.1; }
.bubble.jumbo-3 .text.jumbo { font-size: 42px; }
.bubble.clear .text.jumbo { filter: drop-shadow(0 3px 6px rgba(0,0,0,.14)); }
.row.appear .bubble.clear .text.jumbo, .row.appear .sticker { animation: stickerIn .45s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes stickerIn { from { transform: scale(.4) rotate(-8deg); opacity: 0; } 60% { opacity: 1; } }
/* стикеры в чате */
.sticker { width: 190px; height: 190px; transition: transform .2s; }
.bubble.sticker-b { position: relative; }
.bubble.sticker-b .meta { position: absolute; right: 2px; bottom: 4px; margin: 0; float: none; }
.bubble.sticker-b .reply { background: var(--bubble-in); box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.sticker:hover { transform: scale(1.04); }
.sticker img { filter: drop-shadow(0 2px 3px rgba(0,0,0,.08)); }
.bubble .reply .rthumb.st { object-fit: contain; background: none; }
/* панель эмодзи/стикеров */
.emoji-panel { width: 372px; height: 420px; border-radius: 18px; box-shadow: 0 10px 40px rgba(0,0,0,.18), 0 0 0 1px color-mix(in srgb, var(--text) 6%, transparent); }
:root[data-theme="dark"] .emoji-panel { box-shadow: 0 10px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06); }
.mp-tabs { padding: 8px 8px 2px; gap: 4px; }
.mp-tabs button { border-radius: 10px; transition: background .15s, color .15s; }
.mp-tabs button:hover:not(.active) { background: var(--bg-2); }
.emoji-tabs { padding: 4px 6px; border-bottom: 0; }
.emoji-tabs button { font-size: 20px; transition: opacity .15s, background .15s; }
.emoji-grid { grid-template-columns: repeat(8, 1fr); padding: 2px 8px 8px; }
.emoji-grid button { font-size: 28px; line-height: 1.2; transition: transform .12s, background .12s; }
.emoji-grid button:hover { transform: scale(1.18); background: var(--bg-2); }
.emoji-grid button:active { transform: scale(.9); }
.sticker-grid { padding: 0 10px 10px; scroll-behavior: smooth; }
.sg-sec + .sg-sec { margin-top: 4px; }
.sg-title { position: sticky; top: 0; z-index: 1; background: var(--bg); padding: 10px 4px 6px; font-size: 13px; font-weight: 500; color: var(--muted); }
.sg-items { gap: 6px; }
.sg-items button { border-radius: 14px; padding: 6px; transition: transform .15s, background .15s; }
.sg-items:not(.gif) button:hover { transform: scale(1.1); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.sg-items button.tapped { animation: tap .3s ease; }
@keyframes tap { 50% { transform: scale(.85); } }
.sg-nav { display: flex; gap: 4px; padding: 6px 8px; border-top: 1px solid var(--border); overflow-x: auto; flex-shrink: 0; }
.sg-nav button { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; padding: 4px; opacity: .6; transition: opacity .15s, background .15s; color: var(--muted); }
.sg-nav button.active, .sg-nav button:hover { opacity: 1; background: var(--bg-2); }
.sg-nav img, .sg-nav video { width: 30px; height: 30px; object-fit: contain; }
.sg-nav svg { width: 22px; height: 22px; }
.sticker-grid .empty { padding: 40px 20px; text-align: center; color: var(--muted); line-height: 1.5; }
/* поле ввода и дата */
.day { font-size: 13.5px; padding: 3px 12px; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.service { box-shadow: 0 1px 2px rgba(0,0,0,.06); }
@media (max-width: 800px) {
  .sticker { width: 160px; height: 160px; }
  .emoji-panel { width: auto; left: 8px; right: 8px; }
  .bubble.jumbo-1 .text.jumbo { font-size: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .row.appear .sticker, .row.appear .bubble.clear .text.jumbo { animation: none; }
}

/* цветные эмодзи везде одинаковые (там, где только эмодзи) */
.bubble .text.jumbo, .emoji-grid button, .emoji-tabs button, .react, .hello-emoji, .pop .quick button { font-family: var(--font-emoji); }
.react small { font-family: var(--font-text); }
.sg-items:not(.gif) img, .sg-items:not(.gif) video { width: 100%; height: 100%; object-fit: contain; }
.sticker img, .sticker video { width: 100%; height: 100%; }
.bubble.clear, .bubble.only-media { box-shadow: none !important; }

/* =====================================================================
   4.5 — Kuvo+: живой фон, новый дизайн и свои фишки
   ===================================================================== */
::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }
:root { --accent-2: color-mix(in srgb, var(--accent) 62%, #8a5cff); --accent-grad: linear-gradient(135deg, var(--accent), var(--accent-2)); --radius: 18px; }

/* ---------- Живой фон ---------- */
.chat { isolation: isolate; }
.chat > .chat-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.chat.pattern::before { z-index: 1; }
.chat > :not(.chat-bg) { z-index: 2; }
.chat-bg .blobs { position: absolute; inset: -30%; transform: rotate(calc(var(--turn, 0) * 45deg)); transition: transform 1.4s cubic-bezier(.3, .9, .25, 1); }
.chat-bg i { position: absolute; width: 70%; height: 70%; border-radius: 50%; animation: drift 22s ease-in-out infinite alternate; will-change: transform; }
.chat-bg i:nth-child(1) { left: 0; top: 0; background: radial-gradient(closest-side, var(--b1), transparent); }
.chat-bg i:nth-child(2) { right: 0; top: 4%; background: radial-gradient(closest-side, var(--b2), transparent); animation-delay: -6s; animation-duration: 26s; }
.chat-bg i:nth-child(3) { left: 6%; bottom: 0; background: radial-gradient(closest-side, var(--b3), transparent); animation-delay: -12s; animation-duration: 30s; }
.chat-bg i:nth-child(4) { right: 2%; bottom: 4%; background: radial-gradient(closest-side, var(--b4), transparent); animation-delay: -3s; animation-duration: 24s; }
@keyframes drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(9%, -7%) scale(1.12); } 100% { transform: translate(-7%, 8%) scale(.95); } }
:root[data-live="off"] .chat-bg i { animation: none; }
:root[data-wall="plain"] .chat-bg { display: none; }
/* цвета обоев: база + 4 переливающихся пятна */
:root { --b1: #b7e4a0; --b2: #e6ecb0; --b3: #8fd0a4; --b4: #f1e6a8; }
:root[data-wall="aurora"] { --chat-grad: #cfe9dc; --b1: #9ee6c2; --b2: #e3f2b5; --b3: #7cc9e0; --b4: #ffd3b0; }
:root[data-wall="ocean"] { --chat-grad: #cfe0f6; --b1: #8ec5fc; --b2: #e0c3fc; --b3: #9fb8ff; --b4: #b9f1f5; }
:root[data-wall="peach"] { --chat-grad: #fde4d6; --b1: #ffb199; --b2: #ffe9c7; --b3: #ff9aa9; --b4: #ffd0e0; }
:root[data-wall="cosmos"] { --chat-grad: #221f47; --b1: #5b3fd6; --b2: #1b7fe0; --b3: #d9459c; --b4: #2d1a66; --pill: rgba(255,255,255,.18);
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='12' cy='18' r='1.2' opacity='.7'/%3E%3Ccircle cx='70' cy='40' r='.9' opacity='.5'/%3E%3Ccircle cx='100' cy='90' r='1.4' opacity='.8'/%3E%3Ccircle cx='40' cy='100' r='.8' opacity='.5'/%3E%3Ccircle cx='90' cy='10' r='.7' opacity='.6'/%3E%3Cpath d='M52 70l1.2 3 3 1.2-3 1.2-1.2 3-1.2-3-3-1.2 3-1.2z' opacity='.55'/%3E%3C/g%3E%3C/svg%3E"); }
:root[data-wall="green"] { --b1: #b9e39a; --b2: #e8ebb0; --b3: #93d3a0; --b4: #d8e7a2; }
:root[data-wall="blue"] { --b1: #a9cdef; --b2: #d6e6fa; --b3: #8fbbee; --b4: #c7dcf6; }
:root[data-wall="violet"] { --b1: #c9b8ef; --b2: #efe5fb; --b3: #b39ce8; --b4: #e0d1f7; }
:root[data-wall="sunset"] { --b1: #f8c3b3; --b2: #fde3c9; --b3: #f1a7b5; --b4: #fbd9c0; }
:root[data-wall="mint"] { --b1: #ade2d4; --b2: #dff5ee; --b3: #8fd6c4; --b4: #c9eee4; }
:root[data-theme="dark"][data-wall="aurora"] { --chat-grad: #0c1a1c; --b1: #0f4a3e; --b2: #1c3d57; --b3: #123f52; --b4: #3b2b4a; }
:root[data-theme="dark"][data-wall="ocean"] { --chat-grad: #0c1424; --b1: #173a6b; --b2: #3a2465; --b3: #12305e; --b4: #0f4757; }
:root[data-theme="dark"][data-wall="peach"] { --chat-grad: #1f1216; --b1: #5a2433; --b2: #4d321f; --b3: #57203f; --b4: #3d1e2c; }
:root[data-theme="dark"][data-wall="cosmos"] { --chat-grad: #0b0a1f; --b1: #3a2799; --b2: #0f4d8f; --b3: #7a1d5c; --b4: #1a0f44; }
:root[data-theme="dark"][data-wall="green"] { --b1: #173c2a; --b2: #22341f; --b3: #133a30; --b4: #2a3a1a; }
:root[data-theme="dark"][data-wall="blue"] { --b1: #13305a; --b2: #1b2a4a; --b3: #102948; --b4: #1d3654; }
:root[data-theme="dark"][data-wall="violet"] { --b1: #34245e; --b2: #251a45; --b3: #3d2468; --b4: #221842; }
:root[data-theme="dark"][data-wall="sunset"] { --b1: #4a2320; --b2: #3b2418; --b3: #4d1f2c; --b4: #33201a; }
:root[data-theme="dark"][data-wall="mint"] { --b1: #134038; --b2: #173029; --b3: #0f3a33; --b4: #1a3a30; }
[data-wall-prev="aurora"] span { background: radial-gradient(circle at 20% 20%, #9ee6c2, transparent 60%), radial-gradient(circle at 80% 30%, #ffd3b0, transparent 60%), radial-gradient(circle at 40% 90%, #7cc9e0, transparent 60%), #cfe9dc; }
[data-wall-prev="ocean"] span { background: radial-gradient(circle at 20% 20%, #8ec5fc, transparent 60%), radial-gradient(circle at 80% 30%, #e0c3fc, transparent 60%), radial-gradient(circle at 40% 90%, #b9f1f5, transparent 60%), #cfe0f6; }
[data-wall-prev="peach"] span { background: radial-gradient(circle at 20% 20%, #ffb199, transparent 60%), radial-gradient(circle at 80% 30%, #ffe9c7, transparent 60%), radial-gradient(circle at 40% 90%, #ff9aa9, transparent 60%), #fde4d6; }
[data-wall-prev="cosmos"] span { background: radial-gradient(circle at 20% 20%, #5b3fd6, transparent 60%), radial-gradient(circle at 80% 30%, #1b7fe0, transparent 60%), radial-gradient(circle at 40% 90%, #d9459c, transparent 60%), #221f47; }
.walls { grid-template-columns: repeat(5, 1fr); }

/* ---------- Боковая панель ---------- */
.sidebar { background: var(--bg); }
.side-top { padding: 10px 14px 8px; }
.search { height: 42px; border-radius: 14px; }
.folders { border-bottom: 0; padding: 2px 10px 8px; gap: 6px; }
.folders button { padding: 7px 14px; border-radius: 20px; font-size: 14px; background: var(--bg-2); transition: background .2s, color .2s, transform .1s; }
.folders button:hover { background: var(--bg-3); }
.folders button:active { transform: scale(.96); }
.folders button.active { background: var(--accent-grad); color: #fff; box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 35%, transparent); }
.folders button.active::after { display: none; }
.folders button.active .fbadge { background: rgba(255,255,255,.28); color: #fff; }
.chat-list { padding: 0 8px 90px; }
.chat-item { padding: 9px 10px; border-radius: 16px; transition: background .15s, transform .12s; }
.chat-item:active { transform: scale(.985); }
.chat-item.active { background: var(--accent-grad); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 30%, transparent); }
.chat-item.has-unread .ci-title > span { font-weight: 600; }
.chat-item .avatar { box-shadow: inset 0 -8px 16px rgba(0,0,0,.08), inset 0 2px 0 rgba(255,255,255,.25); }
.chat-item .avatar[style*="background-image"] { box-shadow: none; }
.badge { background: var(--accent-grad); box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 35%, transparent); }
.badge.muted { background: #b5bcc2; box-shadow: none; }
:root[data-theme="dark"] .badge.muted { background: #4a5663; }
.avatar.online::after { background: var(--online); box-shadow: 0 0 0 0 color-mix(in srgb, var(--online) 60%, transparent); animation: onl 2.6s ease-out infinite; }
@keyframes onl { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--online) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
.fab { background: var(--accent-grad); border-radius: 18px; box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 45%, transparent); }
.fab:hover { transform: translateY(-2px) scale(1.03); }
/* архив */
.arch-ava { background: linear-gradient(160deg, #9aa7b4, #6f7d8b); }
.arch-ava svg { color: #fff; }
.arch-head { display: flex; align-items: center; gap: 8px; padding: 4px 6px 8px; font-size: 16px; }
.arch-head b { font-weight: 600; flex: 1; }
/* статусы, огонёк, дни рождения */
.estatus { font-family: var(--font-emoji); font-size: .95em; line-height: 1; margin-left: 2px; flex-shrink: 0; }
.bday { font-family: var(--font-emoji); font-size: .95em; margin-left: 2px; animation: bday 2s ease-in-out infinite; display: inline-block; }
@keyframes bday { 50% { transform: rotate(-12deg) scale(1.15); } }
.streak { display: inline-flex; align-items: center; gap: 1px; font-size: 12.5px; font-weight: 600; color: #ff7a1a; background: color-mix(in srgb, #ff8a00 14%, transparent); padding: 1px 6px 1px 4px; border-radius: 10px; margin-left: 4px; flex-shrink: 0; font-family: var(--font-emoji); }
.streak b { font-family: var(--font-text); font-weight: 600; }
.streak.warm { color: #ff5a1f; background: color-mix(in srgb, #ff5a1f 16%, transparent); }
.streak.hot { color: #fff; background: linear-gradient(135deg, #ff9a1f, #ff3d6e); box-shadow: 0 2px 8px rgba(255,80,60,.35); }
.chat-item.active .streak { background: rgba(255,255,255,.22); color: #fff; }

/* ---------- Шапка чата и поле ввода ---------- */
.chat-head { background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.chat-title { display: flex; align-items: center; gap: 4px; }
.input-box { border-radius: 22px; box-shadow: 0 2px 10px rgba(0,0,0,.08), 0 0 0 1px color-mix(in srgb, var(--text) 5%, transparent); transition: box-shadow .2s; }
.input-box:focus-within { box-shadow: 0 4px 16px rgba(0,0,0,.1), 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.compose-extra { border-radius: 20px 20px 0 0; }
.send { box-shadow: 0 2px 10px rgba(0,0,0,.1); }
.send:hover, .send.ready { background: var(--accent-grad); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 40%, transparent); }
.chat-inner:not(.hidden) { animation: chatIn .22s ease-out; }
@keyframes chatIn { from { opacity: 0; transform: translateX(10px); } }

/* ---------- Пузыри ---------- */
:root[data-theme="dark"] .row.out .bubble:not(.clear):not(.only-media) { background: linear-gradient(180deg, color-mix(in srgb, var(--bubble-out) 82%, #6aa8ff), var(--bubble-out)); background-attachment: local; }
.bubble { box-shadow: 0 1px 2px rgba(16, 35, 60, .12); }
.day, .service { background: color-mix(in srgb, var(--pill) 100%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.bubble.has-effect .meta { gap: 3px; }
.eff-btn { font-family: var(--font-emoji); font-size: 12px; line-height: 1; margin-right: 2px; filter: saturate(1.2); transition: transform .15s; }
.eff-btn:hover { transform: scale(1.35); }
.remind-h { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--accent); margin: 1px 0 5px; cursor: pointer; padding: 5px 8px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 10%, transparent); }
.remind-h svg { width: 16px; height: 16px; }
.remind-h svg.rot { margin-left: auto; transform: rotate(180deg); }
.remind-h span { color: var(--muted); }
.vspeed { margin-left: 4px; font-size: 11.5px; font-weight: 600; padding: 2px 6px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); flex-shrink: 0; }
.row.out .vspeed { background: color-mix(in srgb, var(--out-meta) 16%, transparent); color: var(--out-meta); }
.vspeed.fast { background: var(--accent); color: #fff; }
.react-pop { position: fixed; z-index: 90; pointer-events: none; font-size: 44px; font-family: var(--font-emoji); transform: translate(-50%, -50%); animation: rpop .8s ease-out forwards; }
@keyframes rpop { 0% { transform: translate(-50%, -50%) scale(.2); opacity: 0; } 30% { transform: translate(-50%, -60%) scale(1.25); opacity: 1; } 100% { transform: translate(-50%, -140%) scale(.9); opacity: 0; } }
.fx-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 95; }

/* ---------- Список дел ---------- */
.todo { min-width: min(300px, 70vw); }
.todo-kind { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.todo-kind svg { width: 16px; height: 16px; }
.row.out .todo-kind { color: var(--out-meta); }
.todo-title { font-weight: 600; font-size: 1.02em; margin: 3px 0 6px; }
.todo-it { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; padding: 6px 4px; border-radius: 10px; transition: background .15s; }
.todo-it:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.todo-it .tb { width: 22px; height: 22px; border-radius: 7px; border: 2px solid color-mix(in srgb, var(--muted) 70%, transparent); display: grid; place-items: center; flex-shrink: 0; transition: all .2s cubic-bezier(.3, 1.5, .5, 1); }
.todo-it .tb svg { width: 15px; height: 15px; color: #fff; opacity: 0; transform: scale(.4); transition: all .2s; stroke-width: 3; }
.todo-it.done .tb { background: var(--accent-grad); border-color: transparent; }
.row.out .todo-it.done .tb { background: var(--out-meta); }
.todo-it.done .tb svg { opacity: 1; transform: none; }
.todo-it .tt { flex: 1; min-width: 0; padding-top: 1px; }
.todo-it.done .tx { text-decoration: line-through; color: var(--muted); }
.todo-it .tt small { display: block; font-size: 11.5px; text-decoration: none; color: var(--muted); }
.todo-bar { height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--muted) 20%, transparent); margin: 8px 2px 4px; overflow: hidden; }
.todo-bar i { display: block; height: 100%; background: var(--accent-grad); border-radius: 4px; transition: width .4s ease; }
.row.out .todo-bar i { background: var(--out-meta); }
.todo-add { display: flex; align-items: center; gap: 6px; color: var(--accent); font-size: 14px; padding: 6px 4px 2px; }
.row.out .todo-add { color: var(--out-meta); }
.todo-add svg { width: 18px; height: 18px; }
.todo-done { text-align: center; font-size: 13.5px; font-weight: 500; margin-top: 4px; }

/* ---------- Профиль ---------- */
.profile-cover { text-align: center; color: #fff; border-radius: 22px; padding: 24px 16px 18px; margin: 0 0 14px; position: relative; overflow: hidden; }
.profile-cover::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 0%, rgba(255,255,255,.35), transparent 50%), radial-gradient(circle at 100% 100%, rgba(0,0,0,.18), transparent 55%); pointer-events: none; }
.profile-cover > * { position: relative; z-index: 1; }
.profile-cover .avatar.lg { box-shadow: 0 10px 30px rgba(0,0,0,.25), 0 0 0 4px rgba(255,255,255,.35); }
.profile-cover .avatar-edit { margin-bottom: 0; }
.pc-name { font-size: 21px; font-weight: 600; margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 5px; text-shadow: 0 1px 8px rgba(0,0,0,.2); }
.pc-sub { opacity: .85; font-size: 14px; margin-top: 2px; }
.info-top.profile-cover { margin: 10px 10px 8px; }
.info-top.profile-cover .muted { color: #fff; }
.bday-card, .streak-card { margin: 0 10px 10px; padding: 10px 14px; border-radius: 14px; font-size: 14px; background: linear-gradient(135deg, color-mix(in srgb, #ffb347 22%, var(--bg)), color-mix(in srgb, #ff5e8a 18%, var(--bg))); }
.modal-card .bday-card { margin: 0 0 12px; }
.status-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 4px; max-height: 128px; overflow-y: auto; padding: 2px; }
.status-pick button { height: 38px; border-radius: 10px; font-size: 21px; font-family: var(--font-emoji); display: grid; place-items: center; transition: transform .12s, background .12s; }
.status-pick button svg { width: 18px; height: 18px; color: var(--muted); }
.status-pick button:hover { background: var(--bg-2); transform: scale(1.12); }
.status-pick button.active { background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 0 0 0 2px var(--accent); }
.pcolors { display: flex; flex-wrap: wrap; gap: 8px; }
.pcolors button { width: 34px; height: 34px; border-radius: 50%; transition: transform .15s; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.pcolors button:hover { transform: scale(1.1); }
.pcolors button.active { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.dbl-pick { display: flex; gap: 2px; }
.dbl-pick button { width: 34px; height: 34px; border-radius: 10px; font-size: 19px; font-family: var(--font-emoji); }
.dbl-pick button.active { background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 0 0 0 2px var(--accent); }

/* ---------- Меню и окна ---------- */
.pop { border-radius: 16px; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); box-shadow: 0 12px 40px rgba(0,0,0,.18), 0 0 0 1px color-mix(in srgb, var(--text) 6%, transparent); }
.pop button { border-radius: 10px; transition: background .12s; }
.modal { background: rgba(10, 16, 28, .38); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal-card { border-radius: 24px; box-shadow: 0 24px 60px rgba(0,0,0,.25); }
.btn { border-radius: 14px; text-transform: none; letter-spacing: 0; font-size: 15px; }
.btn:not(.ghost):not(.danger) { background: var(--accent-grad); box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 30%, transparent); }
.toast { border-radius: 14px !important; backdrop-filter: blur(16px); }
@media (prefers-reduced-motion: reduce) {
  .chat-bg i, .avatar.online::after, .bday { animation: none !important; }
  .chat-bg .blobs { transition: none; }
}

/* мобильный: отступ под «чёлку» и надёжная кнопка «назад» */
@media (max-width: 800px) {
  .side-top { padding: calc(10px + env(safe-area-inset-top)) 12px 8px; }
  .chat-head { padding-top: calc(4px + env(safe-area-inset-top)); }
  .chat-head .back { width: 44px; height: 44px; position: relative; z-index: 5; touch-action: manipulation; }
  .chat.pattern::before, .chat > .chat-bg { pointer-events: none; }
}

/* =====================================================================
   4.6 — интерфейс: вкладки, звонки, контакты, свайпы, вход, приветствие
   ===================================================================== */
/* нижние вкладки (телефон) */
.tabbar { display: none; }
@media (max-width: 800px) {
  .sidebar { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .tabbar { display: flex; position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(22px) saturate(1.7); -webkit-backdrop-filter: blur(22px) saturate(1.7); border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent); }
  .tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; font-weight: 500; color: var(--muted); padding: 4px 0; position: relative; transition: color .15s; }
  .tabbar button svg { width: 25px; height: 25px; transition: transform .2s cubic-bezier(.3, 1.6, .5, 1); }
  .tabbar button.active { color: var(--accent); }
  .tabbar button.active svg { transform: translateY(-1px) scale(1.08); stroke-width: 2.2; }
  .tabbar button:active svg { transform: scale(.88); }
  .tb-badge { position: absolute; top: 0; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: #fff; font-style: normal; font-size: 11px; font-weight: 600; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg); }
  .fab { bottom: calc(78px + env(safe-area-inset-bottom)); }
  .chat-list { padding-bottom: 20px; }
  #drawer [data-act="calls"], #drawer [data-act="contacts"] { display: none; }
}
/* боковые страницы: звонки и контакты */
.side-page { flex: 1; overflow-y: auto; padding: 0 8px 16px; animation: chatIn .2s ease-out; }
.sp-head { display: flex; align-items: center; gap: 6px; padding: 4px 4px 8px; font-size: 18px; }
.sp-head b { font-weight: 600; }
@media (max-width: 800px) { .sp-back { display: none; } .sp-head { padding: 6px 10px 10px; font-size: 22px; } .sp-head b { font-weight: 700; } }
.sp-search { margin: 0 4px 10px; }
.sp-actions { display: flex; flex-direction: column; margin-bottom: 6px; }
.sp-actions button { display: flex; align-items: center; gap: 14px; padding: 11px 12px; border-radius: 14px; color: var(--accent); font-weight: 500; }
.sp-actions button:hover { background: var(--hover); }
.sp-actions svg { width: 22px; height: 22px; }
.call-item, .contact { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 16px; cursor: pointer; transition: background .15s; }
.call-item:hover, .contact:hover { background: var(--hover); }
.call-item .avatar { width: 48px; height: 48px; font-size: 17px; }
.call-item .ci-title.missed { color: var(--danger); }
.call-sub, .ct-sub { color: var(--muted); font-size: 13.5px; display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.ct-sub.on { color: var(--accent); }
.call-sub svg { width: 16px; height: 16px; stroke-width: 2.4; }
.call-sub svg.green { color: #2fb36b; }
.call-sub svg.red { color: var(--danger); }
.call-again { color: var(--accent); }
.sp-empty { text-align: center; padding: 48px 24px; display: flex; flex-direction: column; gap: 6px; color: var(--muted); }
.sp-empty b { color: var(--text); font-size: 17px; font-weight: 600; }
.sp-emoji { font-size: 56px; font-family: var(--font-emoji); margin-bottom: 6px; animation: wave 2.4s ease-in-out infinite; }
/* заставки загрузки */
.skel { display: block; background: linear-gradient(90deg, color-mix(in srgb, var(--text) 7%, transparent) 0%, color-mix(in srgb, var(--text) 13%, transparent) 50%, color-mix(in srgb, var(--text) 7%, transparent) 100%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; border-radius: 10px; }
@keyframes shimmer { to { background-position: -200% 0; } }
.skel-row { display: flex; align-items: center; gap: 12px; padding: 10px; }
.skel-row > div { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.skel.av { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; }
.skel.l1 { height: 13px; } .skel.l2 { height: 11px; opacity: .7; }
.skel-msgs { display: flex; flex-direction: column; gap: 10px; padding: 16px 0; margin-top: auto; }
.skel.bub { height: 38px; border-radius: 18px; max-width: 420px; background-color: color-mix(in srgb, var(--bubble-in) 70%, transparent); }
.skel.bub.out { align-self: flex-end; background-color: color-mix(in srgb, var(--bubble-out) 70%, transparent); }
/* свайпы в списке */
.chat-item { position: relative; }
.chat-item[data-swipe]::before { content: ''; position: absolute; top: 0; bottom: 0; width: 140px; border-radius: 16px; z-index: -1; display: grid; place-items: center; font-size: 13px; color: #fff; }
.chat-item[data-swipe="left"]::before { left: 100%; margin-left: -16px; background: linear-gradient(90deg, #8a97a5, #6f7d8b); content: 'В архив'; }
.chat-item[data-swipe="right"]::before { right: 100%; margin-right: -16px; background: var(--accent-grad); content: 'Прочитано / закрепить'; font-size: 11.5px; text-align: center; padding: 0 12px; }
.chat-item.swipe-armed::before { filter: brightness(1.1); }
/* фокус на сообщении при открытом меню (компьютер) */
.messages.menu-focus .row:not(.focused) { opacity: .35; filter: blur(1.2px); transition: opacity .15s, filter .15s; }
.messages .row.focused .bubble { transform: scale(1.02); box-shadow: 0 10px 30px rgba(0,0,0,.18); transition: transform .15s; }
.pop .quick { background: color-mix(in srgb, var(--text) 4%, transparent); border-radius: 26px; margin: 2px 6px 8px; padding: 4px; border-bottom: 0; justify-content: space-between; }
.pop .quick button { width: 40px; height: 40px; font-size: 24px; }
.pop .quick button:hover { transform: scale(1.3) translateY(-2px); }
/* экран входа */
.auth { position: relative; overflow: hidden; isolation: isolate; background: color-mix(in srgb, var(--accent) 8%, var(--bg)); }
.auth-bg { position: absolute; inset: -20%; z-index: -1; pointer-events: none; }
.auth-bg i { position: absolute; width: 60%; height: 60%; border-radius: 50%; animation: drift 20s ease-in-out infinite alternate; }
.auth-bg i:nth-child(1) { left: 0; top: 0; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 45%, transparent), transparent); }
.auth-bg i:nth-child(2) { right: 0; top: 10%; background: radial-gradient(closest-side, rgba(170, 120, 255, .38), transparent); animation-delay: -5s; }
.auth-bg i:nth-child(3) { left: 10%; bottom: 0; background: radial-gradient(closest-side, rgba(80, 220, 180, .35), transparent); animation-delay: -10s; }
.auth-bg i:nth-child(4) { right: 5%; bottom: 5%; background: radial-gradient(closest-side, rgba(255, 170, 120, .35), transparent); animation-delay: -15s; }
.auth-card { background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); padding: 28px 26px 22px; border-radius: 28px; box-shadow: 0 20px 60px rgba(20, 40, 80, .15), 0 0 0 1px color-mix(in srgb, var(--text) 6%, transparent); max-width: 400px; }
.auth-logo img.auth-mascot { width: 150px; height: 150px; margin: -10px 0 4px; filter: none; }
.auth-card h2 { font-weight: 700; letter-spacing: -.5px; }
.auth-perks { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 18px; }
.auth-perks span { font-size: 12.5px; padding: 5px 10px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--text); }
.auth .seg { border-radius: 14px; }
.auth .form input { border-radius: 14px; }
/* приветствие вместо пустого чата */
.welcome-card { padding: 26px 30px 22px !important; border-radius: 28px !important; max-width: 400px; background: color-mix(in srgb, var(--bg) 78%, transparent) !important; backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); box-shadow: 0 20px 50px rgba(0,0,0,.12) !important; }
.wc-mascot { width: 130px; height: 130px; margin: -8px auto 2px; display: block; }
.welcome-card > b { font-size: 21px; font-weight: 700; }
.wc-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; width: 100%; }
.wc-actions button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: 16px; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); font-size: 13px; font-weight: 600; transition: transform .15s, background .15s; }
.wc-actions button:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.wc-tip { margin-top: 14px; font-size: 13px; color: var(--muted); line-height: 1.4; }
/* меню слева */
.drawer { border-radius: 0 24px 24px 0; overflow: hidden; }
.drawer-head { padding-bottom: 20px; }
.drawer-head::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 15% 0%, rgba(255,255,255,.3), transparent 55%); pointer-events: none; }
.dh-name { font-weight: 600; font-size: 17px; display: flex; align-items: center; gap: 4px; }
.drawer-list { padding: 8px; }
.drawer-list button { border-radius: 14px; gap: 16px; padding: 10px 12px; }
.drawer-list button svg { width: 32px; height: 32px; padding: 6px; border-radius: 10px; color: #fff; stroke-width: 2; background: #8e99a6; }
.drawer-list [data-act="profile"] svg { background: linear-gradient(135deg, #4facfe, #3a7bd5); }
.drawer-list [data-act="admin"] svg { background: linear-gradient(135deg, #ff5f6d, #c2185b); }
.drawer-list [data-act="saved"] svg { background: linear-gradient(135deg, #4facfe, #6a5cff); }
.drawer-list [data-act="calls"] svg { background: linear-gradient(135deg, #43e97b, #1fa2a8); }
.drawer-list [data-act="contacts"] svg { background: linear-gradient(135deg, #f6a560, #f0703a); }
.drawer-list [data-act="group"] svg { background: linear-gradient(135deg, #a18cd1, #7c5cf0); }
.drawer-list [data-act="channel"] svg { background: linear-gradient(135deg, #30cfd0, #1e88c8); }
.drawer-list [data-act="folders"] svg { background: linear-gradient(135deg, #f6d365, #f0a030); }
.drawer-list [data-act="settings"] svg { background: linear-gradient(135deg, #9aa7b4, #6f7d8b); }
.drawer-list [data-act="logout"] svg { background: linear-gradient(135deg, #ff7a7a, #e53935); }
.drawer-list hr { margin: 6px 12px; }
/* секции настроек как в iOS */
.modal-card .settings-sec { background: color-mix(in srgb, var(--text) 3%, transparent); border-radius: 18px; padding: 14px 16px; margin: 12px 0 0; border: 0; }
.modal-card .settings-sec h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; margin-bottom: 8px; }
@media (prefers-reduced-motion: reduce) { .auth-bg i, .skel, .sp-emoji { animation: none !important; } }

.welcome-card img.wc-mascot { width: 130px !important; height: 130px !important; margin: -8px auto 2px; }
.welcome-card .wc-actions button { color: var(--accent) !important; background: color-mix(in srgb, var(--accent) 10%, transparent) !important; border-radius: 16px !important; padding: 12px 6px !important; font-size: 13px !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; }
.auth-logo img.auth-mascot { width: 170px; height: 170px; }
.welcome-card .wc-actions span { color: inherit; line-height: 1.2; } .welcome-card .wc-tip { color: var(--muted); }


/* =====================================================================
   4.7 — максимально как Telegram (Web K / Desktop): плоские цвета, привычные формы
   ===================================================================== */
:root { --accent-grad: var(--accent); --accent-2: var(--accent); --radius: 15px; --text: #000; --muted: #707579; --hover: #f4f4f5; --bubble-out: #eeffde; --out-meta: #4fae4e; }
:root[data-theme="dark"] { --text: #fff; --muted: #aaaaaa; --bg: #212121; --bg-2: #2c2c2c; --bg-3: #383838; --hover: #2c2c2c; --border: #0f0f0f; --bubble-in: #212121; --bubble-out: #2b5278; --out-meta: #7ab4f5; }
/* классические обои Telegram: переливающийся зелёный градиент */
:root[data-wall="green"] { --chat-grad: #b8d49c; --b1: #dbddbb; --b2: #6ba587; --b3: #d5d88d; --b4: #88b884; }
:root[data-theme="dark"][data-wall="green"] { --chat-grad: #0e1511; --b1: #203022; --b2: #122a21; --b3: #2a3020; --b4: #15261c; }
[data-wall-prev="green"] span { background: radial-gradient(circle at 20% 20%, #dbddbb, transparent 60%), radial-gradient(circle at 80% 30%, #6ba587, transparent 60%), radial-gradient(circle at 30% 90%, #d5d88d, transparent 60%), #88b884; }
.chat-bg i { opacity: .95; }
/* список чатов */
.sidebar { border-right: 1px solid var(--border); }
.side-top { padding: 6px 14px; min-height: 56px; }
.search { height: 42px; border-radius: 22px; }
.folders { padding: 0 10px; gap: 2px; border-bottom: 1px solid var(--border); }
.folders button { background: none !important; box-shadow: none !important; border-radius: 10px 10px 0 0; padding: 10px 12px 11px; color: var(--muted); font-size: 14.5px; font-weight: 500; }
.folders button:hover { background: var(--hover) !important; }
.folders button.active { color: var(--accent); }
.folders button.active::after { display: block !important; content: ''; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent); }
.folders button .fbadge { background: #a2abb2; color: #fff; }
.folders button.active .fbadge { background: var(--accent); color: #fff; }
.chat-list { padding: 6px 8px 90px; }
.chat-item { border-radius: 12px; padding: 9px 9px; box-shadow: none !important; }
.chat-item:active { transform: none; }
.chat-item.active { background: var(--accent) !important; box-shadow: none !important; }
.chat-item .avatar { box-shadow: none; }
.chat-item.has-unread .ci-title > span { font-weight: 500; }
.badge { background: #4fae4e; box-shadow: none; font-weight: 500; }
:root[data-theme="dark"] .badge { background: var(--accent); }
.badge.muted { background: #c4c9cc; }
.chat-item.active .badge { background: #fff; color: var(--accent); }
.avatar.online::after { animation: none; box-shadow: none; background: #0ac630; }
.fab { border-radius: 50%; background: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.fab:hover { transform: none; filter: brightness(1.06); }
.lock-ico { color: #0ac630 !important; width: 15px !important; height: 15px !important; stroke-width: 2.4 !important; }
.chat-item.active .lock-ico { color: #fff !important; }
.chat-title.secret { color: #0ac630; }
:root[data-theme="dark"] .chat-title.secret { color: #4fd466; }
/* шапка и поле ввода */
.chat-head { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--border); min-height: 56px; }
.chat-title { font-weight: 500; }
.chat-status.on { color: var(--accent); }
.input-box { border-radius: 16px; box-shadow: 0 1px 2px rgba(16,35,47,.15); }
.input-box:focus-within { box-shadow: 0 1px 2px rgba(16,35,47,.15); }
.send, .send.ready, .send:hover { background: var(--bg); color: var(--accent); box-shadow: 0 1px 2px rgba(16,35,47,.15); }
.send:hover { filter: brightness(.97); }
.composer.secret-mode #attachBtn { display: none; }
/* пузыри */
.row.out .bubble:not(.clear):not(.only-media), :root:not([data-theme="dark"]) .row.out .bubble:not(.clear):not(.only-media), :root[data-theme="dark"] .row.out .bubble:not(.clear):not(.only-media) { background: var(--bubble-out); }
.bubble { box-shadow: 0 1px 2px rgba(16,35,47,.15); }
:root[data-theme="dark"] .bubble { box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.day, .service { background: rgba(0,0,0,.22); backdrop-filter: blur(6px); box-shadow: none; }
:root[data-wall="green"] .day, :root[data-wall="green"] .service { background: rgba(78, 105, 58, .5); }
.e2e-wait, .e2e-fail { color: var(--muted); font-style: italic; display: flex; align-items: center; gap: 5px; }
.e2e-wait svg, .e2e-fail svg { width: 15px; height: 15px; }
/* кнопки, меню, окна — как в Telegram */
.btn { border-radius: 10px; text-transform: uppercase; letter-spacing: .02em; font-size: 14px; }
.btn:not(.ghost):not(.danger) { background: var(--accent); box-shadow: none; }
.pop { border-radius: 12px; background: color-mix(in srgb, var(--bg) 88%, transparent); box-shadow: 0 4px 16px rgba(0,0,0,.18); padding: 4px 0; }
.pop button { font-size: 14px; }
.modal { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(0,0,0,.35); }
.modal-card { border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,.2); }
/* меню слева — как Telegram Desktop: простые серые значки */
.drawer { border-radius: 0; }
.drawer-list { padding: 6px 0; }
.drawer-list button { border-radius: 0; gap: 26px; padding: 11px 22px; }
.drawer-list button svg { width: 22px; height: 22px; padding: 0; border-radius: 0; background: none !important; color: var(--muted); stroke-width: 1.9; }
.drawer-list button.danger svg { color: var(--danger); }
.drawer-list hr { margin: 6px 0; }
/* вход — как у Telegram: белый экран, логотип, поля и кнопка */
.auth { background: var(--bg); }
.auth-bg { display: none; }
.auth-card { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; padding: 0; max-width: 360px; }
.auth-card h2 { font-weight: 500; letter-spacing: 0; font-size: 32px; }
.auth-perks span { background: var(--bg-2); color: var(--muted); }
/* приветствие */
.welcome-card { background: rgba(0,0,0,.22) !important; color: #fff; box-shadow: none !important; backdrop-filter: blur(8px); }
:root[data-wall="green"] .welcome-card { background: rgba(78, 105, 58, .45) !important; }
.welcome-card > b, .welcome-card > span, .welcome-card .wc-tip { color: #fff !important; }
.welcome-card .wc-actions button { background: rgba(255,255,255,.18) !important; color: #fff !important; }
/* нижние вкладки как в Telegram для iPhone */
@media (max-width: 800px) {
  .tabbar { background: color-mix(in srgb, var(--bg) 92%, transparent); }
  .tabbar button.active svg { transform: none; }
  .tb-badge { background: #ff3b30; }
}
/* секретный чат: плашка и отпечаток ключа */
.secret-bar { flex-direction: column; gap: 10px; text-align: center; padding: 12px 16px; background: var(--bg); border-radius: 16px; box-shadow: 0 1px 2px rgba(16,35,47,.15); }
.secret-bar.muted { flex-direction: row; justify-content: center; }
.sb-text { display: flex; gap: 10px; align-items: flex-start; text-align: left; font-size: 14px; line-height: 1.4; }
.sb-text svg { color: #0ac630; flex-shrink: 0; margin-top: 2px; }
.fp-emoji { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; font-size: 34px; text-align: center; font-family: var(--font-emoji); margin: 4px 0 10px; }
.fp-emoji span { background: var(--bg-2); border-radius: 14px; padding: 6px 0; }
.fp-hex { font-family: ui-monospace, Menlo, Consolas, monospace; text-align: center; font-size: 14px; letter-spacing: 1px; color: var(--muted); }
.sec-list { display: flex; flex-direction: column; gap: 12px; }
.sec-list > div { display: flex; gap: 12px; align-items: flex-start; }
.sec-list svg { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.sec-list span { font-size: 14px; color: var(--muted); line-height: 1.4; }
.sec-list b { display: block; color: var(--text); font-weight: 500; font-size: 15px; }
/* код-пароль */
#lockScreen { position: fixed; inset: 0; z-index: 200; background: var(--bg); display: grid; place-items: center; outline: none; animation: fade .2s; }
#lockScreen.unlock { opacity: 0; transition: opacity .25s; }
.lock-box { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.lock-box .lock-badge { width: 84px; height: 84px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; margin-bottom: 8px; }
.lock-box .lock-badge svg { width: 40px; height: 40px; color: #fff; }
.lock-box b { font-size: 20px; font-weight: 500; }
.lock-box > span { color: var(--muted); }
.lock-dots { display: flex; gap: 16px; margin: 14px 0 20px; }
.lock-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--muted); transition: all .15s; }
.lock-dots i.on { background: var(--accent); border-color: var(--accent); transform: scale(1.1); }
.lock-dots.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }
.lock-pad { display: grid; grid-template-columns: repeat(3, 76px); gap: 14px; }
.lock-pad button { width: 76px; height: 76px; border-radius: 50%; background: var(--bg-2); font-size: 28px; font-weight: 400; transition: background .12s; }
.lock-pad button:active { background: var(--bg-3); }
.lock-pad button:disabled { visibility: hidden; }
#lockOut { margin-top: 18px; color: var(--accent); font-size: 14px; }
/* «О Kuvo» */
.about-card { max-width: 560px; }
.about-tabs { margin: 0; }
.about-hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 14px; }
.about-hero img { width: 110px; height: 110px; }
.about-hero b { font-size: 22px; font-weight: 600; }
.about-hero span { color: var(--muted); font-size: 14px; }
.shield-big { width: 84px; height: 84px; border-radius: 50%; background: #0ac630; display: grid; place-items: center; margin-bottom: 6px; }
.shield-big svg { width: 42px; height: 42px; color: #fff; }
.about-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 14px; }
.about-grid > div { background: var(--bg-2); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 3px; }
.about-grid i { font-style: normal; font-size: 26px; font-family: var(--font-emoji); }
.about-grid b { font-weight: 500; font-size: 14.5px; }
.about-grid span { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.cmp { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cmp th { font-weight: 500; padding: 8px 4px; font-size: 13px; color: var(--muted); }
.cmp th:nth-child(2) { color: var(--accent); }
.cmp td { padding: 8px 4px; border-top: 1px solid var(--border); text-align: center; }
.cmp td:first-child { text-align: left; }
.cmp td:nth-child(2) { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.cmp .yes { color: #0ac630; font-weight: 700; font-size: 16px; }
.cmp .no { color: var(--muted); }
.cmp .part { color: #f0a030; font-weight: 700; }
.sec-list.big > div { background: var(--bg-2); border-radius: 14px; padding: 12px; }

.secret-bar .btn { background: var(--accent) !important; color: #fff !important; min-width: 0; width: 100%; box-shadow: none; }

.day.under { visibility: hidden; }

.del-all { justify-content: flex-start; gap: 12px; cursor: pointer; padding: 6px 0; }
.chk { position: relative; width: 22px; height: 22px; flex-shrink: 0; }
.chk input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chk i { position: absolute; inset: 0; border: 2px solid var(--muted); border-radius: 6px; transition: all .15s; }
.chk input:checked + i { background: var(--accent); border-color: var(--accent); }
.chk input:checked + i::after { content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.chk input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }

.tf-opt { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 14px; cursor: pointer; background: var(--bg-2); margin-bottom: 8px; }
.tf-opt:hover { background: var(--bg-3); }
.tf-opt svg { color: var(--accent); flex-shrink: 0; }
.tf-opt b { display: block; font-weight: 500; }
.tf-opt small { color: var(--muted); font-size: 13px; line-height: 1.35; display: block; }
.tf-state { font-size: 13px; color: var(--muted); font-weight: 500; }
.tf-state.on { color: #0ac630; }

/* Доступность: видимый фокус с клавиатуры */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.chat-item:focus-visible { outline-offset: -2px; border-radius: 12px; }
button:focus:not(:focus-visible) { outline: none; }
@media (prefers-contrast: more) { :root { --muted: #4a4f55; --border: #9aa0a6; } :root[data-theme="dark"] { --muted: #d0d0d0; } }

.ci-text .draft { color: #e53935; }
.chat-item.active .ci-text .draft { color: #fff; }
.chk i { pointer-events: none; }

.req-ava { background: linear-gradient(160deg, #6fb1fc, #3390ec); }
.req-ava svg { color: #fff; }
.badge.req-badge { background: var(--accent); }
.req-hint { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--muted); padding: 2px 10px 10px; line-height: 1.4; }
.req-hint svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.req-actions { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 8px; width: 100%; }
.req-actions .btn { min-width: 0 !important; width: auto !important; padding: 11px 8px; font-size: 13px; }
.req-bar .btn.ghost { background: var(--bg-2) !important; color: var(--text) !important; }
.req-bar .btn.ghost.danger { color: var(--danger) !important; }
.closed-card { display: flex; gap: 10px; align-items: flex-start; background: var(--bg-2); border-radius: 14px; padding: 10px 12px; margin: 0 0 12px; font-size: 13.5px; color: var(--muted); line-height: 1.4; }
.closed-card svg { color: var(--accent); flex-shrink: 0; }
.closed-card b { display: block; color: var(--text); font-weight: 500; }
@media (max-width: 800px) { .req-actions { grid-template-columns: 1fr 1fr; } .req-actions #rqAccept { grid-column: 1 / -1; grid-row: 1; } }

/* ---------- 5.0: истории ---------- */
.stories-bar { display: flex; gap: 4px; overflow-x: auto; padding: 8px 10px 6px; scrollbar-width: none; flex-shrink: 0; border-bottom: 1px solid var(--border); }
.stories-bar::-webkit-scrollbar { display: none; }
.st-item { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 68px; flex-shrink: 0; font-size: 12px; color: var(--text); }
.st-item small { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-ring { position: relative; padding: 2.5px; border-radius: 50%; display: block; }
.st-ring.unseen { background: conic-gradient(from 200deg, #3390ec, #45d0ff, #7bd88f, #3390ec); }
.st-ring.seen { background: #c4c9cc; }
:root[data-theme="dark"] .st-ring.seen { background: #4a5663; }
.st-ring.none { background: transparent; }
.st-ring .avatar.st-ava { width: 56px; height: 56px; font-size: 20px; border: 2.5px solid var(--bg); box-sizing: content-box; box-shadow: none; }
.st-ring.none .avatar.st-ava { border-color: transparent; }
.st-plus { position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 2.5px solid var(--bg); display: grid; place-items: center; }
.st-plus svg { width: 13px; height: 13px; color: #fff; stroke-width: 3; }
.st-preview { border-radius: 14px; overflow: hidden; background: #000; margin-bottom: 10px; max-height: 50vh; display: grid; place-items: center; }
.st-preview img, .st-preview video { max-width: 100%; max-height: 50vh; display: block; }
.st-viewer { position: fixed; inset: 0; z-index: 120; background: rgba(0,0,0,.94); display: grid; place-items: center; animation: fade .2s; }
.st-stage { position: relative; width: min(420px, 100vw); height: min(92vh, 100dvh); background: #111; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
@media (max-width: 800px) { .st-stage { border-radius: 0; height: 100dvh; } }
.st-bars { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; gap: 4px; z-index: 3; padding-top: env(safe-area-inset-top); }
.st-bars i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.35); overflow: hidden; position: relative; }
.st-bars i::after { content: ''; position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(var(--p, 0)); }
.st-head { position: absolute; top: calc(18px + env(safe-area-inset-top)); left: 10px; right: 6px; display: flex; align-items: center; gap: 10px; z-index: 3; color: #fff; }
.st-head b { display: block; font-weight: 500; font-size: 15px; }
.st-head small { opacity: .75; font-size: 12.5px; }
.st-head .icon-btn { color: #fff; }
.st-media { flex: 1; display: grid; place-items: center; background: #000; }
.st-media img, .st-media video { max-width: 100%; max-height: 100%; object-fit: contain; }
.st-tap { position: absolute; top: 70px; bottom: 90px; width: 35%; z-index: 2; cursor: pointer; }
.st-tap.l { left: 0; } .st-tap.r { right: 0; width: 65%; }
.st-cap { position: absolute; left: 0; right: 0; bottom: 80px; text-align: center; color: #fff; padding: 10px 16px; font-size: 15px; background: linear-gradient(transparent, rgba(0,0,0,.55)); z-index: 2; }
.st-foot { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 10px calc(12px + env(safe-area-inset-bottom)); display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; z-index: 3; }
.st-reply { flex: 1 1 auto; min-width: 40px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); color: #fff; border-radius: 22px; padding: 11px 16px; outline: none; font: inherit; }
.st-reply::placeholder { color: rgba(255,255,255,.7); }
.st-reacts { display: flex; gap: 0; flex: none; }
.st-reacts button { font-size: 22px; width: 33px; height: 38px; font-family: var(--font-emoji); transition: transform .15s; }
.st-reacts button:hover, .st-reacts button.pop { transform: scale(1.3); }
.st-views { color: #fff; display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.15); padding: 9px 16px; border-radius: 20px; font-size: 14px; }
.st-views svg { width: 18px; height: 18px; }
/* 6.73 — сторис: гасим выделение текста и вызов «сохранить картинку» (ломали паузу-удержание и мешали нажимать кнопки) */
.st-viewer, .st-viewer * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.st-viewer .st-reply { -webkit-user-select: text; user-select: text; }
.st-viewer .st-media img, .st-viewer .st-media video { pointer-events: none; -webkit-user-drag: none; }
.st-viewer { touch-action: manipulation; }
.badge.dot { min-width: 12px; width: 12px; height: 12px; padding: 0; }
/* баннер установки приложения */
.install-banner { display: flex; align-items: center; gap: 10px; margin: 8px 10px 0; padding: 10px 10px 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 10%, var(--bg)); }
.install-banner img { width: 40px; height: 40px; border-radius: 10px; }
.install-banner b { display: block; font-weight: 500; font-size: 14.5px; }
.install-banner span { font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.install-banner .btn { padding: 8px 12px; font-size: 12.5px; }
.st-head .grow { flex: 1; min-width: 0; }

/* ---------- звонок: свернуть, картинка в картинке, поворот камеры ---------- */
.call video.local { transform: none; }
.call video.local.mirror { transform: scaleX(-1); }
.call-top { position: absolute; top: calc(10px + env(safe-area-inset-top)); left: 10px; right: 10px; display: flex; align-items: center; justify-content: space-between; z-index: 3; }
.call-top .icon-btn { color: #fff; background: rgba(0,0,0,.25); }
.call-e2e { display: flex; align-items: center; gap: 5px; font-size: 12.5px; opacity: .8; }
.call-e2e svg { width: 14px; height: 14px; }
.call.has-video .call-top ~ video.local, .call video.local { top: calc(64px + env(safe-area-inset-top)); }
.call.mini { inset: auto 16px 16px auto; width: 220px; height: 300px; border-radius: 18px; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,.4); cursor: grab; touch-action: none; animation: fade .2s; z-index: 85; }
.call.mini .call-top, .call.mini video.local, .call.mini .cs { display: none; }
.call.mini .call-info { margin-top: 36px; gap: 4px; }
.call.mini .call-info .avatar { width: 84px; height: 84px; font-size: 30px; }
.call.mini .call-info h2 { font-size: 16px; }
.call.mini.has-video .call-info { display: none; }
.call.mini .call-controls { bottom: 12px; gap: 10px; }
.call.mini .cbtn { font-size: 0; gap: 0; }
.call.mini .cbtn i { width: 42px; height: 42px; }
.call.mini .cbtn:not([data-act="mute"]):not([data-act="hangup"]) { display: none; }
@media (max-width: 800px) { .call.mini { width: 150px; height: 210px; right: 10px; bottom: calc(80px + env(safe-area-inset-bottom)); } }

/* поддержка в админке */
.sup-item { cursor: pointer; border-radius: 12px; }
.sup-item:hover { background: var(--hover); }
.sup-item b small { font-weight: 400; }
.sup-thread { display: flex; flex-direction: column; height: min(60vh, 560px); }
.sup-head { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.sup-head b { display: block; font-weight: 500; }
.sup-msgs { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 10px 2px; }
.sup-m { max-width: 80%; padding: 7px 11px; border-radius: 14px; background: var(--bg-2); align-self: flex-start; font-size: 14.5px; line-height: 1.4; white-space: pre-wrap; }
.sup-m.out { align-self: flex-end; background: color-mix(in srgb, var(--accent) 14%, var(--bg)); }
.sup-m small { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; text-align: right; }
.sup-m img { max-width: 240px; border-radius: 10px; display: block; margin-bottom: 4px; }
.sup-reply { display: flex; gap: 8px; align-items: flex-end; padding-top: 8px; border-top: 1px solid var(--border); }
.sup-reply textarea { flex: 1; resize: none; }
.sup-reply .btn { padding: 12px 14px; }

.call.has-video .call-info { margin-top: calc(58px + env(safe-area-inset-top)); }
.call .call-info { margin-top: max(14vh, 70px); }

/* карточка пользователя в админке */
.adm-card .ac-top { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.adm-card .ac-top b { display: block; font-size: 18px; font-weight: 600; }
.ac-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.tag.green { background: color-mix(in srgb, #0ac630 16%, transparent); color: #0a9a28; }
.ac-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.ac-sec { background: var(--bg-2); border-radius: 14px; padding: 12px 14px; }
.ac-sec h4 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 6px; font-weight: 600; }
.ac-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 14px; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.ac-row:last-child { border-bottom: 0; }
.ac-row span { color: var(--muted); flex-shrink: 0; }
.ac-row b { font-weight: 500; text-align: right; overflow-wrap: anywhere; }
.ac-row b .muted { font-weight: 400; font-size: 12.5px; }
.ac-sess { padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); font-size: 13.5px; }
.ac-sess:last-child { border-bottom: 0; }
.ac-sess b { display: block; font-weight: 500; }
.ac-sess span { color: var(--muted); font-size: 12.5px; }
.ac-sess.off { opacity: .55; }
.ac-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ac-actions .btn { font-size: 12.5px; padding: 10px 12px; }
.ac-actions .btn.ghost { background: var(--bg-2); }
.btn.danger-fill { background: var(--danger) !important; color: #fff !important; box-shadow: none !important; }

/* ---------- 5.3: без бокового меню — всё в «Настройках», вкладки внизу везде ---------- */
.tabbar { display: flex; position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(22px) saturate(1.7); -webkit-backdrop-filter: blur(22px) saturate(1.7); border-top: 1px solid var(--border); }
.tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; font-weight: 500; color: var(--muted); padding: 4px 0; position: relative; border-radius: 10px; }
.tabbar button:hover { background: var(--hover); }
.tabbar button svg { width: 24px; height: 24px; }
.tabbar button.active { color: var(--accent); }
.tb-badge { position: absolute; top: 0; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #ff3b30; color: #fff; font-style: normal; font-size: 11px; font-weight: 600; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg); }
.sidebar { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
.fab { bottom: calc(76px + env(safe-area-inset-bottom)); }
.side-top { padding-left: 14px; }
/* карточка аккаунта */
.acc-chip { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: var(--bg-2); cursor: pointer; margin-bottom: 12px; position: relative; overflow: hidden; }
.acc-chip::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--pc); }
.acc-chip:hover { background: var(--bg-3); }
.acc-ava .avatar.md { width: 64px; height: 64px; font-size: 24px; }
.acc-body { flex: 1; min-width: 0; }
.acc-name { font-size: 18px; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.acc-login { display: inline-flex; align-items: center; gap: 5px; color: var(--accent); font-weight: 500; font-size: 15px; margin-top: 2px; padding: 2px 8px 2px 0; border-radius: 8px; }
.acc-login svg { width: 15px; height: 15px; }
.acc-mail { color: var(--muted); font-size: 13px; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-edit { flex-shrink: 0; font-size: 12.5px; padding: 9px 12px; }
.sm-group { background: var(--bg-2); border-radius: 16px; overflow: hidden; margin-bottom: 10px; }
.sm-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; text-align: left; font-size: 15px; transition: background .12s; }
.sm-item + .sm-item { border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.sm-item:hover { background: var(--bg-3); }
.sm-item i { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
.sm-item i svg { width: 18px; height: 18px; color: #fff; stroke-width: 2.1; }
.sm-item span { flex: 1; }
.sm-item > svg.rot { width: 18px; height: 18px; color: var(--muted); transform: rotate(180deg); }
.login-box { display: flex; align-items: center; justify-content: space-between; background: var(--bg-2); border-radius: 12px; padding: 4px 4px 4px 14px; font-weight: 500; color: var(--accent); }
.modal-card h2 > #pfBack { margin-left: -8px; }
.fg-ways { display: flex; flex-direction: column; gap: 10px; }
.fg-way { display: flex; gap: 12px; align-items: flex-start; background: var(--bg-2); border-radius: 14px; padding: 12px; }
.fg-way > svg { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.fg-way b { display: block; font-weight: 500; margin-bottom: 2px; }
.fg-way span { display: block; font-size: 13.5px; color: var(--muted); line-height: 1.4; }
.fg-way .btn { margin-top: 8px; padding: 9px 14px; font-size: 13px; }
.about-manifest { background: var(--bg-2); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.about-manifest b { font-weight: 600; font-size: 15.5px; }
.about-manifest span { color: var(--muted); font-size: 14px; line-height: 1.45; }
.about-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.about-pills span { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-size: 12.5px; font-weight: 500; padding: 4px 10px; border-radius: 12px; }

.search-form { flex: 1; display: flex; min-width: 0; }
.search-form .search { flex: 1; }
#searchInput::-webkit-search-cancel-button { display: none; }

/* ===================== 5.4 ===================== */
.auth-switch { text-align: center; margin-top: 12px; color: var(--muted); font-size: 14px; }
.auth-switch .linkish { font-weight: 600; color: var(--accent); }
.seg button.closed { opacity: .6; }
.reg-closed { display: block; color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); padding: 10px 12px; border-radius: 12px; line-height: 1.4; }
.reg-ref { display: block; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); padding: 8px 12px; border-radius: 12px; }
.notice { background: var(--bg-2); border-radius: 12px; padding: 10px 12px; line-height: 1.45; font-size: 14px; margin: 8px 0; }
.notice.warn { background: color-mix(in srgb, #f5a524 15%, transparent); }
.pstar { color: #f5a524; margin-left: 3px; font-size: .95em; line-height: 1; flex-shrink: 0; }
.sm-badge { margin-left: auto; margin-right: 6px; font-style: normal; font-size: 12px; color: var(--muted); }

/* Игры */
.games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.games-grid button { background: var(--bg-2); border: 0; border-radius: 16px; padding: 14px 6px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; color: var(--text); font: inherit; transition: transform .15s; }
.games-grid button:hover { transform: translateY(-2px); background: var(--hover); }
.games-grid span { font-size: 32px; font-family: var(--font-emoji); }
.games-grid b { font-size: 13px; font-weight: 500; }
.dice-msg { display: flex; flex-direction: column; align-items: center; padding: 6px 14px 2px; min-width: 130px; }
.dice-msg .dm-e { font-family: var(--font-emoji); font-size: 20px; opacity: .7; }
.dice-msg .dm-face { font-size: 64px; line-height: 1.1; font-family: var(--font-emoji); }
.dice-msg b { font-size: 14px; margin-top: 2px; }
.dice-msg.rolling .dm-face { animation: diceRoll .9s cubic-bezier(.3,1.6,.5,1); }
.dice-msg.rolling b { animation: fadeIn .3s .8s both; }
@keyframes diceRoll { 0% { transform: rotate(-540deg) scale(.3); opacity: 0; } 70% { transform: rotate(20deg) scale(1.15); opacity: 1; } 100% { transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.ttt { padding: 4px 2px; min-width: 220px; }
.ttt-h { font-weight: 500; text-align: center; margin-bottom: 8px; font-size: 14px; }
.ttt-h span { color: var(--muted); margin: 0 6px; font-size: 12px; }
.ttt-grid { display: grid; grid-template-columns: repeat(3, 64px); gap: 6px; justify-content: center; }
.ttt-grid button { width: 64px; height: 64px; border: 0; border-radius: 14px; background: color-mix(in srgb, var(--text) 7%, transparent); font-size: 30px; font-family: var(--font-emoji); cursor: pointer; transition: transform .12s, background .15s; }
.ttt-grid button:not(:disabled):hover { background: color-mix(in srgb, var(--accent) 22%, transparent); transform: scale(1.05); }
.ttt-grid button:disabled { cursor: default; }
.ttt-grid button.f { animation: pop .25s; }
.ttt-grid button.win { background: color-mix(in srgb, #2fbf71 35%, transparent); }
.ttt-s { text-align: center; margin: 8px 0 4px; font-size: 14px; }
.ttt .btn { margin-top: 6px; }
@keyframes pop { from { transform: scale(.4); } to { transform: none; } }
.poll.quiz .poll-res.right .pr-bar i { background: #2fbf71; }
.poll.quiz .poll-res.wrong .pr-bar i { background: var(--danger); }
.poll.quiz .poll-res.right .pr-top svg { color: #2fbf71; }
.poll.quiz .poll-res.wrong .pr-top svg { color: var(--danger); }
.q-ok { color: #2fbf71; } .q-bad { color: var(--danger); }
.quiz-explain { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 10%, transparent); font-size: 14px; line-height: 1.4; }

/* Геопозиция и контакт */
.loc-card { display: block; text-decoration: none; color: inherit; border-radius: 12px; overflow: hidden; max-width: 100%; }
.loc-map { position: relative; max-width: 100%; background-color: #e5e3df; background-repeat: no-repeat; border-radius: 12px; }
.loc-pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%); color: #e53935; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.loc-pin svg { width: 36px; height: 36px; fill: #e53935; stroke: #fff; stroke-width: 1.5; }
.loc-foot { display: flex; gap: 8px; align-items: center; padding: 8px 4px 2px; }
.loc-foot > svg { width: 22px; height: 22px; color: var(--accent); flex-shrink: 0; }
.loc-foot b { display: block; font-weight: 500; }
.loc-foot span { font-size: 12px; color: var(--muted); }
.contact-card { display: flex; align-items: center; gap: 10px; min-width: 240px; padding: 4px 2px; }
.contact-card b { display: block; font-weight: 500; }
.contact-card span { font-size: 13px; color: var(--muted); }
.contact-card .btn { padding: 6px 12px; font-size: 13px; }

/* Смотрим вместе */
.watch { width: 320px; max-width: 100%; }
.w-frame { position: relative; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; background: #000; }
.w-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.w-cover { position: absolute; inset: 0; border: 0; background: #000 center/cover; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.w-cover span { width: 60px; height: 60px; border-radius: 50%; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; color: #fff; backdrop-filter: blur(6px); transition: transform .15s; }
.w-cover:hover span { transform: scale(1.1); background: #e53935; }
.w-foot { display: flex; align-items: center; gap: 6px; padding: 8px 2px 0; font-size: 14px; }
.w-foot svg { width: 18px; height: 18px; color: var(--accent); }
.w-state { margin-left: auto; color: var(--muted); font-size: 12px; }

/* Секретные медиа */
.sec-media { position: relative; }
.sec-media::after { content: '🔒'; position: absolute; top: 6px; left: 6px; font-size: 11px; background: rgba(0,0,0,.45); border-radius: 8px; padding: 1px 5px; pointer-events: none; }
div.sec-media::after { display: none; }
a.sec-media { display: block; border-radius: 12px; overflow: hidden; cursor: zoom-in; }
a.sec-media img { width: 100%; object-fit: cover; display: block; }
.modal-card.bare { background: transparent; box-shadow: none; padding: 0; max-width: 96vw; }
.sec-view { position: relative; display: flex; justify-content: center; }
.sec-view img { max-width: 94vw; max-height: 86vh; border-radius: 12px; }
.sec-view .icon-btn { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,.5); color: #fff; }

/* ИИ */
.ai-box { display: flex; gap: 6px; align-items: flex-start; margin-top: 6px; padding: 7px 9px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 10%, transparent); font-size: 14px; line-height: 1.4; }
.ai-box > svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--accent); }
.ai-box span { white-space: pre-wrap; word-break: break-word; }
.ai-box .linkish { margin-left: auto; font-size: 11px; flex-shrink: 0; }
.ai-box.loading span { animation: blink 1s infinite alternate; color: var(--muted); }
@keyframes blink { to { opacity: .4; } }
.stt-btn { border: 0; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); border-radius: 8px; font-size: 11px; font-weight: 700; padding: 3px 6px; cursor: pointer; margin: 0 4px; flex-shrink: 0; }

/* Импорт */
.bubble.imp { }
.imp-steps { display: flex; flex-direction: column; gap: 8px; }
.imp-steps > div { background: var(--bg-2); border-radius: 12px; padding: 10px 12px; font-size: 14px; line-height: 1.45; }
.imp-steps b { display: block; margin-bottom: 2px; }
.imp-steps code { background: var(--bg-3); padding: 1px 5px; border-radius: 5px; font-size: 12px; }

/* Права группы */
.slow-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.slow-seg button { border: 1px solid var(--border); background: transparent; color: var(--text); border-radius: 99px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.slow-seg button.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* Premium, донаты, приглашения */
.prem-hero, .ref-hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; margin: -6px 0 14px; }
.prem-star { width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 46px; color: #fff; background: linear-gradient(135deg, #f7b733, #fc4a1a); box-shadow: 0 10px 30px rgba(252,74,26,.35); animation: premGlow 3s ease-in-out infinite; }
@keyframes premGlow { 50% { transform: rotate(8deg) scale(1.05); } }
.prem-hero b, .ref-hero b { font-size: 20px; margin-top: 6px; }
.prem-hero span, .ref-hero span { color: var(--muted); font-size: 14px; line-height: 1.4; }
.prem-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.prem-list > div { display: flex; gap: 12px; align-items: flex-start; }
.prem-list svg { width: 22px; height: 22px; color: #f5a524; flex-shrink: 0; }
.prem-list b { display: block; font-weight: 500; }
.prem-list span span, .prem-list span { font-size: 13px; color: var(--muted); }
.prem-list b { color: var(--text); font-size: 15px; }
.prem-buy { display: flex; flex-direction: column; gap: 8px; }
.prem-buy .btn:first-child { background: linear-gradient(135deg, #f7b733, #fc4a1a); border: 0; }
.don-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.don-grid button { border: 1px solid var(--border); background: var(--bg-2); color: var(--text); border-radius: 12px; padding: 12px 0; font: inherit; font-weight: 500; cursor: pointer; }
.don-grid button.active { border-color: var(--accent); color: var(--accent); }
.ref-prog { display: flex; gap: 10px; margin: 12px 0 4px; }
.ref-prog i { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 600; background: var(--bg-2); color: var(--muted); border: 2px dashed var(--border); }
.ref-prog i.on { background: linear-gradient(135deg, #ff758c, #ff7eb3); color: #fff; border: 0; }
@media (max-width: 420px) { .ttt-grid { grid-template-columns: repeat(3, 56px); } .ttt-grid button { width: 56px; height: 56px; } .watch { width: 260px; } }
.dice-msg.slot .dm-face { font-size: 40px; letter-spacing: 2px; margin: 4px 0; }
.dice-msg.cube .dm-face { font-size: 72px; line-height: 1; }

/* ===================== 5.5: эмодзи, пароль, собственный стиль (без «андроидности») ===================== */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; letter-spacing: -.005em; }
img.emo { width: 1.25em; height: 1.25em; vertical-align: -.26em; margin: 0 .04em; object-fit: contain; display: inline-block; pointer-events: none; user-select: text; }
.bubble .text.jumbo img.emo { width: 1.15em; height: 1.15em; vertical-align: -.12em; margin: 0 .02em; filter: drop-shadow(0 3px 6px rgba(0,0,0,.12)); }
.bubble.clear .text.jumbo img.emo { animation: emoIn .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes emoIn { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.emoji-grid img.emo, .pop .quick img.emo, .react img.emo, .dbl-pick img.emo, .status-pick img.emo, .st-reacts img.emo { width: 1.15em; height: 1.15em; vertical-align: middle; margin: 0; }
.emoji-grid button:hover img.emo { transform: scale(1.18); transition: transform .12s; }
.react img.emo { width: 18px; height: 18px; }
.dice-msg .dm-face img.emo { width: 1em; height: 1em; }
.ttt-grid img.emo { width: 30px; height: 30px; }
.chat-item img.emo, .ci-text img.emo { width: 1.15em; height: 1.15em; vertical-align: -.22em; }
.react-pop img.emo { width: 48px; height: 48px; }
.fp-emoji img.emo { width: 36px; height: 36px; }
.emo-styles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.emo-styles button { border: 1.5px solid var(--border); border-radius: 14px; padding: 10px 4px 8px; background: var(--bg-2); display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; color: var(--text); font: inherit; transition: border-color .15s, transform .15s; }
.emo-styles button.active { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.emo-styles button:hover { transform: translateY(-1px); }
.es-prev { font-size: 18px; white-space: nowrap; display: flex; gap: 1px; }
.es-prev img.emo { width: 20px; height: 20px; margin: 0; }
.es-sys { font-family: var(--font-emoji); letter-spacing: 1px; }
.emo-styles small { font-size: 12px; color: var(--muted); }
/* 3D-стикеры слегка «дышат», как живые */
.sticker img[src*="/emoji/3d/"] { animation: stkIn .5s cubic-bezier(.3,1.5,.5,1), stkFloat 3.2s ease-in-out .5s infinite; filter: drop-shadow(0 8px 14px rgba(0,0,0,.18)); }
@keyframes stkIn { from { transform: scale(.3) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes stkFloat { 50% { transform: translateY(-4px) rotate(2deg) scale(1.02); } }

/* Поле пароля с глазком */
.pw-wrap { position: relative; display: block; width: 100%; }
.pw-wrap > input { width: 100%; padding-right: 46px !important; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; border-radius: 10px; }
.pw-eye svg { width: 21px; height: 21px; }
.pw-eye:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
.pw-eye.on { color: var(--accent); }

/* Кнопки: без капса, мягкие, «стеклянные» */
.btn { text-transform: none !important; letter-spacing: -.01em !important; font-size: 15px !important; font-weight: 600; border-radius: 12px !important; transition: filter .15s, transform .12s, box-shadow .15s; }
.btn:not(.ghost):not(.danger):not(.danger-fill) { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent)); box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 32%, transparent); }
.btn:active { transform: scale(.97); }
.btn.ghost { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.btn.ghost:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.seg button { text-transform: none; }

/* Переключатели в виде «таблетки» */
.switch { width: 46px; height: 28px; }
.switch span { border-radius: 14px; background: color-mix(in srgb, var(--text) 16%, transparent); }
.switch span::before { width: 24px; height: 24px; left: 2px; top: 2px; border: 0; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.22); }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::before { transform: translateX(18px); background: #fff; }

/* Поля ввода */
.field, .form input { border-radius: 12px; }
.field:focus, .form input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }

/* Кнопка «новое сообщение» в шапке вместо круглой плавающей */
.side-top { gap: 6px; }
.side-top .search-form { flex: 1; min-width: 0; }
.compose-top { flex-shrink: 0; color: var(--accent); width: 40px; height: 40px; border-radius: 12px; }
.compose-top:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.compose-top svg { width: 22px; height: 22px; }

/* Меню действий снизу — карточки с отдельной кнопкой «Отмена» */
.pop.sheet { background: transparent; box-shadow: none; padding: 0; overflow: visible; }
.pop.sheet > *:not(.sheet-cancel) { background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); }
.pop.sheet > .sheet-title, .pop.sheet > .quick { border-radius: 16px 16px 0 0; }
.pop.sheet > button:not(.sheet-cancel) { border-radius: 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.pop.sheet > button:not(.sheet-cancel):first-child, .pop.sheet > .sheet-title + button, .pop.sheet > .quick:first-child + button { border-top-left-radius: 16px; border-top-right-radius: 16px; }
.pop.sheet > button:not(.sheet-cancel):nth-last-child(2) { border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; border-bottom: 0; }
.pop.sheet > .sheet-title + button, .pop.sheet > .quick + button { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; }
.pop.sheet .sheet-cancel { margin-top: 8px; border: 0 !important; border-radius: 16px !important; background: var(--bg); font-weight: 600; font-size: 17px; }
.pop.sheet button svg { color: var(--accent); }
.pop.sheet .danger svg { color: var(--danger); }

/* Окна: больше воздуха */
.modal-card { border-radius: 20px; }
.modal-card h2 { letter-spacing: -.02em; }

/* Почта в админке */
.mail-status { padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, #f5a524 14%, transparent); line-height: 1.45; font-size: 14px; }
.mail-status.ok { background: color-mix(in srgb, #2fbf71 14%, transparent); }
.sm-adv { display: grid; grid-template-columns: 1fr 110px; gap: 8px; }

/* Память */
.mem-hero { text-align: center; display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.mem-hero b { font-size: 30px; letter-spacing: -.02em; }
.mem-hero span { color: var(--muted); font-size: 14px; }
.mem-bar { height: 8px; border-radius: 4px; background: var(--bg-2); overflow: hidden; margin-top: 8px; }
.mem-bar i { display: block; height: 100%; background: linear-gradient(90deg, #2fbf71, var(--accent)); border-radius: 4px; }
.pop.sheet > .sheet-title { margin: 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.pop.sheet > .quick { margin: 0 !important; padding: 10px 8px !important; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.pop.sheet > .sheet-title + .quick { border-radius: 0; }
/* Кнопки в окнах: основная — заливкой, второстепенная — мягкая */
.modal-actions { gap: 8px; }
.modal-actions .btn { padding: 11px 18px; }
.modal-actions .btn:not(.ghost):not(.danger):not(.danger-fill) { color: var(--on-accent, #fff); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent)); }
.modal-actions .btn:not(.ghost):not(.danger):not(.danger-fill):hover { filter: brightness(1.06); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent)); }
.modal-actions .btn.ghost { box-shadow: none; }
.about-lic { font-size: 12px; text-align: center; margin-top: 12px; line-height: 1.4; }
.mail-steps { margin: 10px 0 12px 18px; padding: 0; display: flex; flex-direction: column; gap: 8px; line-height: 1.45; font-size: 14px; }
.mail-steps .btn { padding: 6px 12px; font-size: 13px !important; margin-top: 4px; }
.gas-code { background: var(--bg-2); border-radius: 10px; padding: 10px; font: 11.5px/1.45 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-all; margin-top: 6px; max-height: 180px; overflow: auto; user-select: all; }

/* ===================== 5.6: разделы настроек, Premium ===================== */
.set-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 4px; }
.set-cats button { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 14px 6px 12px; border-radius: 16px; background: var(--bg-2); border: 0; color: var(--text); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: transform .15s, background .15s; text-align: center; line-height: 1.2; }
.set-cats button:hover { background: var(--hover); transform: translateY(-2px); }
.set-cats button:active { transform: scale(.96); }
.set-cats i { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.14); }
.set-cats i svg { width: 22px; height: 22px; }
.sp-head { display: flex; align-items: center; gap: 8px; position: sticky; top: -20px; z-index: 2; margin: -20px -20px 10px; padding: 14px 12px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); }
.sp-head b { font-size: 18px; letter-spacing: -.01em; }
.set-page { animation: pageIn .22s cubic-bezier(.2,.9,.3,1); }
.set-main:not(.hidden) { animation: pageBack .2s ease-out; }
@keyframes pageIn { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pageBack { from { transform: translateX(-16px); opacity: .4; } to { transform: none; opacity: 1; } }
.set-page .settings-sec { margin-top: 6px; }
.pbadge { font-size: 11px; font-weight: 600; color: #fff; background: linear-gradient(135deg,#f7b733,#fc4a1a); padding: 1px 7px; border-radius: 99px; margin-left: 4px; vertical-align: 1px; }
.kbd-list { display: flex; flex-direction: column; gap: 8px; }
.kbd-list > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; }
kbd { font: 12px ui-monospace, Menlo, Consolas, monospace; background: var(--bg-2); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 6px; padding: 2px 7px; white-space: nowrap; }
.status-pick.prem button { position: relative; }
.status-pick.locked button { opacity: .55; }
.status-pick.locked::after { content: '★ Premium'; }
.status-pick.locked { position: relative; }
.status-pick.locked::after { position: absolute; right: 6px; top: -22px; font-size: 11px; font-weight: 600; color: #f5a524; }
.pcolors button.pc-prem { position: relative; background-size: 200% 200% !important; animation: pcShift 4s ease-in-out infinite; }
.pcolors button.plock::after { content: '★'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 13px; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.profile-cover, .acc-chip, .drawer-head, .info-top { background-size: 220% 220% !important; animation: pcShift 12s ease-in-out infinite; }
@keyframes pcShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
:root[data-wall="custom"] .chat::before { opacity: .35; }
.set-card .set-row > span:first-child, .set-card .set-row > .grow { flex: 1; min-width: 0; }
.set-card .set-row > .switch, .set-card .set-row > svg { flex-shrink: 0; }
.set-card .set-row select.sel, .set-card .set-row select.field { max-width: 46%; flex-shrink: 0; }
.set-card .settings-sec, .set-card .set-page { overflow-wrap: anywhere; }
.emo-styles button { min-width: 0; overflow: hidden; }
.es-prev { font-size: 15px; }
.es-prev img.emo { width: 17px; height: 17px; }
@media (max-width: 420px) { .emo-styles small { font-size: 11px; } .es-prev img.emo:nth-child(n+4) { display: none; } }
.set-row:has(#stDbl) { flex-direction: column; align-items: flex-start; gap: 8px; }
.set-row:has(#stDbl) > span:first-child { flex: none; }
#stDbl { display: flex; flex-wrap: wrap; gap: 4px; }
/* 5.6.1: без filter на наведении — в некоторых браузерах (Chrome, Яндекс) он заставлял мерцать всё окно */
.btn { transition: background-color .15s, box-shadow .15s, transform .12s !important; }
.btn:hover, .modal-actions .btn:not(.ghost):not(.danger):not(.danger-fill):hover, .fab:hover, .send:hover, .lp:hover { filter: none !important; }
.btn:not(.ghost):not(.danger):not(.danger-fill):hover { box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 40%, transparent); }
.btn.danger-fill:hover { background: color-mix(in srgb, var(--danger) 88%, #000); }
.ac-actions .btn { font-size: 13px !important; padding: 10px 14px; }
.ac-actions .btn.ghost:hover { background: color-mix(in srgb, var(--accent) 12%, var(--bg-2)); }
.modal-card { transform: translateZ(0); }

/* ===================== 5.7: подарки, Business, статистика, боты, аккаунты ===================== */
.gift-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.gift-tile { position: relative; border: 0; border-radius: 18px; padding: 14px 6px 10px; background: var(--gbg); color: #fff; display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; font: inherit; text-shadow: 0 1px 3px rgba(0,0,0,.25); box-shadow: 0 6px 16px rgba(0,0,0,.12); transition: transform .15s; overflow: hidden; }
.gift-tile::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.45), transparent 55%); pointer-events: none; }
.gift-tile:hover { transform: translateY(-3px) rotate(-1deg); }
.gift-tile.off { opacity: .45; cursor: default; transform: none; }
.gift-tile.hidden-g { opacity: .5; filter: grayscale(.6); }
.gift-tile .gt-e { font-size: 40px; line-height: 1.1; filter: drop-shadow(0 6px 8px rgba(0,0,0,.2)); }
.gift-tile .gt-e img.emo { width: 48px; height: 48px; }
.gift-tile b { font-size: 12.5px; font-weight: 600; line-height: 1.2; text-align: center; }
.gift-tile small { font-size: 12px; font-weight: 600; background: rgba(0,0,0,.2); padding: 1px 8px; border-radius: 99px; }
.gift-tile .gt-lim { position: absolute; top: 5px; left: 0; right: 0; text-align: center; font-size: 9.5px; font-style: normal; font-weight: 600; opacity: .95; }
.gift-tile.lim { box-shadow: 0 0 0 2px rgba(255,215,0,.7), 0 6px 16px rgba(0,0,0,.14); }
.gift-tile .gt-eye { position: absolute; top: 4px; right: 6px; font-style: normal; font-size: 12px; }
.gift-card { position: relative; width: 250px; max-width: 100%; border-radius: 18px; padding: 18px 14px 14px; background: var(--gbg); color: #fff; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; overflow: hidden; text-shadow: 0 1px 3px rgba(0,0,0,.25); margin: 2px 0; }
.gift-card::before { content: ''; position: absolute; inset: -40%; background: conic-gradient(from 0deg, transparent, rgba(255,255,255,.25), transparent 30%); animation: giftShine 6s linear infinite; pointer-events: none; }
@keyframes giftShine { to { transform: rotate(360deg); } }
.gift-card > * { position: relative; }
.gift-card .gc-e { font-size: 72px; line-height: 1.05; animation: giftFloat 3s ease-in-out infinite; filter: drop-shadow(0 10px 14px rgba(0,0,0,.25)); }
.gift-card .gc-e img.emo { width: 88px; height: 88px; }
.gift-card.fresh .gc-e { animation: giftOpen .9s cubic-bezier(.3,1.6,.5,1), giftFloat 3s ease-in-out .9s infinite; }
@keyframes giftFloat { 50% { transform: translateY(-6px) rotate(3deg); } }
@keyframes giftOpen { 0% { transform: scale(.2) rotate(-30deg); opacity: 0; } 70% { transform: scale(1.15) rotate(6deg); opacity: 1; } 100% { transform: none; } }
.gift-card b { font-size: 17px; }
.gift-card small { font-size: 12.5px; opacity: .95; }
.gift-card .gc-ser { background: rgba(0,0,0,.22); padding: 2px 10px; border-radius: 99px; font-weight: 700; letter-spacing: .03em; }
.gift-card .gc-note { font-style: italic; font-size: 14px; background: rgba(255,255,255,.18); border-radius: 12px; padding: 6px 10px; margin-top: 4px; word-break: break-word; }
.gift-card .gc-from { font-size: 12px; opacity: .9; margin-top: 2px; }
.gift-card .gc-acts { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
.gift-card .gc-acts .btn { background: rgba(255,255,255,.22) !important; color: #fff !important; padding: 7px 12px; font-size: 13px !important; box-shadow: none !important; text-shadow: none; }
.gift-card.big { width: 100%; margin-bottom: 12px; }
.bubble:has(.gift-card) { padding: 4px; }
.trial-btn { margin: -4px 0 14px; background: linear-gradient(135deg,#43e97b,#1fa2a8) !important; }
.prem-star.biz { background: linear-gradient(135deg,#434343,#9a9a9a); box-shadow: 0 10px 30px rgba(0,0,0,.25); font-size: 40px; }
.biz-hours { font-size: 13px; color: var(--muted); margin-top: 2px; }
.biz-hours .open { color: #2fbf71; font-weight: 600; } .biz-hours .closed { color: var(--danger); font-weight: 600; }
.bz-days { display: flex; gap: 6px; flex-wrap: wrap; }
.bz-days button { width: 40px; height: 36px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-2); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.bz-days button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.bz-reply { display: grid; grid-template-columns: 110px 1fr 36px; gap: 6px; align-items: start; margin-bottom: 6px; }
.qr-pop { position: absolute; left: 12px; right: 12px; bottom: calc(100% - 6px); z-index: 20; background: var(--bg); border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.18); overflow: hidden; max-height: 260px; overflow-y: auto; }
.qr-pop button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 9px 14px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; border-bottom: 1px solid var(--border); }
.qr-pop button:hover { background: var(--hover); }
.qr-pop b { color: var(--accent); font-size: 13px; } .qr-pop span { font-size: 13px; color: var(--muted); }
#composerWrap { position: relative; }
.st-chart { width: 100%; height: 90px; background: var(--bg-2); border-radius: 12px; padding: 4px; }
.st-top { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--bg-2); margin-bottom: 6px; cursor: pointer; font-size: 14px; }
.st-top span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .st-top small { color: var(--muted); flex-shrink: 0; }
.bot-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.bot-row .grow { display: flex; flex-direction: column; min-width: 0; } .bot-row .btn { padding: 7px 10px; font-size: 13px !important; }
.bot-docs { margin-top: 14px; font-size: 14px; } .bot-docs summary { cursor: pointer; color: var(--accent); font-weight: 500; }
.bot-docs pre { background: var(--bg-2); border-radius: 10px; padding: 10px; font: 12px/1.5 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; margin-top: 8px; }
.acc-list { display: flex; flex-direction: column; gap: 2px; margin: 8px 0 0; }
.acc-other { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 12px; border: 0; background: none; color: var(--text); font: inherit; cursor: pointer; text-align: left; }
.acc-other:hover { background: var(--hover); }
.acc-other span { display: flex; flex-direction: column; } .acc-other small { color: var(--muted); font-size: 12px; } .acc-other b { font-weight: 500; font-size: 14.5px; }
.acc-other.add i { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.acc-other.add b { color: var(--accent); }

/* ===================== 5.8: семья, защита, вместе, капсулы ===================== */
.newacc-chip { display: inline-block; font-size: 11px; font-weight: 600; color: #b26a00; background: color-mix(in srgb, #f5a524 18%, transparent); padding: 0 7px; border-radius: 99px; margin-left: 4px; }
.info-row.newacc svg { color: #f5a524; }
.scam-warn { display: flex; gap: 8px; background: color-mix(in srgb, var(--danger) 12%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); color: var(--text); border-radius: 12px; padding: 8px 10px; margin-bottom: 6px; font-size: 13.5px; max-width: 320px; }
.scam-warn > svg { width: 20px; height: 20px; color: var(--danger); flex-shrink: 0; }
.scam-warn b { color: var(--danger); display: block; }
.scam-warn ul { margin: 4px 0 0 16px; padding: 0; }
.scam-warn .sw-acts { display: flex; gap: 14px; margin-top: 6px; }
.scam-warn .linkish { color: var(--danger); font-weight: 600; font-size: 13px; }
.verify-card { display: flex; flex-direction: column; gap: 4px; padding: 6px 4px; min-width: 240px; }
.verify-card b { font-size: 15px; } .verify-card span { font-size: 13px; color: var(--muted); line-height: 1.4; }
.verify-card.ok b { color: #2fbf71; } .verify-card.bad b { color: var(--danger); }
.vc-row { display: flex; gap: 6px; margin-top: 4px; } .vc-row .field { flex: 1; padding: 8px 10px; } .vc-row .btn { padding: 8px 14px; }
.call-risk { margin-top: 10px; background: rgba(255,170,0,.22); color: #fff; padding: 8px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.4; text-align: center; }
.prem-star.fam { background: linear-gradient(135deg,#ff9966,#ff5e62); font-size: 40px; }
.fam-invite { background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 14px; padding: 10px 12px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 2px; }
.fam-invite span { color: var(--muted); font-size: 13px; }
.sos-btn { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; border-radius: 16px; padding: 12px 16px; margin-bottom: 12px; background: linear-gradient(135deg,#ff416c,#ff4b2b); color: #fff; cursor: pointer; font: inherit; text-align: left; box-shadow: 0 8px 20px rgba(255,65,108,.35); }
.sos-btn svg { width: 30px; height: 30px; } .sos-btn b { display: block; font-size: 18px; letter-spacing: .05em; } .sos-btn small { opacity: .9; }
.fam-map { position: relative; overflow: hidden; border-radius: 16px; background: #e5e3df; margin: 0 auto 8px; max-width: 100%; }
.fam-map.empty { padding: 26px 16px; text-align: center; color: var(--muted); font-size: 13.5px; background: var(--bg-2); width: auto !important; height: auto !important; }
.fam-map img { position: absolute; width: 256px; height: 256px; }
.fm-pin { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; font-style: normal; z-index: 2; }
.fm-pin .avatar { box-shadow: 0 0 0 3px #fff, 0 4px 10px rgba(0,0,0,.3); }
.fm-pin b { font-size: 11px; background: #fff; color: #222; padding: 0 6px; border-radius: 99px; margin-top: 3px; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.fm-place { position: absolute; transform: translate(-50%, -100%); font-style: normal; font-size: 18px; display: flex; flex-direction: column; align-items: center; z-index: 1; }
.fm-place b { font-size: 10px; background: rgba(255,255,255,.85); color: #333; padding: 0 5px; border-radius: 6px; }
.fm-attr { position: absolute; right: 4px; bottom: 2px; font-size: 9px; color: #555; background: rgba(255,255,255,.7); padding: 0 4px; border-radius: 4px; }
.fam-members { display: flex; flex-direction: column; gap: 2px; }
.fam-m { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.fam-m .grow { display: flex; flex-direction: column; min-width: 0; } .fam-m .grow span { font-size: 12.5px; }
.fam-allow { font-size: 12px; color: var(--accent); }
.fam-inv { display: flex; gap: 6px; } .fam-inv .field { flex: 1; min-width: 0; }
.fam-places { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.fp-chip { background: var(--bg-2); border-radius: 99px; padding: 4px 10px; font-size: 13px; } .fp-chip small { color: var(--muted); }
.modal-card.wide-s { max-width: 480px; }
.sos-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(20,0,0,.72); display: grid; place-items: center; padding: 20px; backdrop-filter: blur(6px); }
.sos-box { background: var(--bg); border-radius: 24px; padding: 24px 20px; max-width: 360px; width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sos-box small { color: var(--muted); }
.sos-pulse { width: 96px; height: 96px; border-radius: 50%; background: #ff2d55; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 26px; letter-spacing: .05em; animation: sosPulse 1s ease-in-out infinite; margin-bottom: 6px; }
@keyframes sosPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,45,85,.6); } 50% { box-shadow: 0 0 0 22px rgba(255,45,85,0); } }
.simple-sos { position: fixed; right: 14px; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 40; width: 64px; height: 64px; border-radius: 50%; border: 0; background: #ff2d55; color: #fff; font-weight: 800; font-size: 17px; box-shadow: 0 8px 20px rgba(255,45,85,.45); }
html.simple-mode { --font-size: 19px; }
html.simple-mode body { font-size: 19px; }
html.simple-mode .stories-bar, html.simple-mode .folders, html.simple-mode #smartBtn { display: none !important; }
html.simple-mode .chat-item { padding-top: 12px; padding-bottom: 12px; }
html.simple-mode .chat-item .avatar { width: 62px; height: 62px; font-size: 24px; }
html.simple-mode .ci-title { font-size: 19px; } html.simple-mode .ci-text { font-size: 16px; }
html.simple-mode .send, html.simple-mode #sendBtn { width: 64px; height: 64px; }
html.simple-mode .send svg { width: 30px; height: 30px; }
html.simple-mode .bubble { font-size: 19px; }
html.simple-mode .icon-btn svg { width: 28px; height: 28px; }
.ai-sum { line-height: 1.55; white-space: pre-wrap; font-size: 15px; }
.sum-pill { position: sticky; top: 8px; z-index: 5; margin: 8px auto; display: flex; align-items: center; gap: 6px; border: 0; border-radius: 99px; padding: 8px 14px; background: color-mix(in srgb, var(--bg) 90%, transparent); color: var(--accent); font: inherit; font-weight: 600; font-size: 14px; box-shadow: 0 6px 18px rgba(0,0,0,.15); cursor: pointer; backdrop-filter: blur(10px); }
.sum-pill svg { width: 18px; height: 18px; }
.ai-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 6px 4px; }
.ai-chips button:not(.icon-btn) { border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 8%, var(--bg)); color: var(--accent); border-radius: 99px; padding: 6px 12px; font: inherit; font-size: 14px; cursor: pointer; }
.ev-card { display: flex; gap: 12px; align-items: center; min-width: 250px; }
.ev-date { width: 52px; height: 56px; border-radius: 12px; background: linear-gradient(180deg,#ff5f6d 0 18px, var(--bg) 18px); box-shadow: 0 2px 8px rgba(0,0,0,.12); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 4px; flex-shrink: 0; overflow: hidden; }
.ev-date b { font-size: 22px; line-height: 1; color: var(--text); } .ev-date span { font-size: 11px; color: var(--muted); }
.ev-body b { display: block; font-size: 16px; } .ev-body span { font-size: 13px; color: var(--muted); }
.ev-rsvp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.ev-rsvp button { border: 1px solid var(--border); background: var(--bg-2); color: var(--text); border-radius: 10px; padding: 7px 4px; font: inherit; font-size: 13px; cursor: pointer; }
.ev-rsvp button.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--bg)); color: var(--accent); font-weight: 600; }
.ev-rsvp small { opacity: .7; }
.ev-who { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.ev-bring { margin-top: 8px; } .ev-bring .label { margin: 4px 0; }
.ev-item { display: block; width: 100%; text-align: left; border: 0; background: none; color: var(--text); font: inherit; font-size: 14px; padding: 3px 0; cursor: pointer; }
.ev-item.taken { color: var(--muted); } .ev-item.mine { color: var(--accent); }
.ev-add input { width: 100%; border: 0; border-bottom: 1px dashed var(--border); background: none; color: var(--text); font: inherit; font-size: 14px; padding: 5px 0; outline: none; }
.split-card { min-width: 250px; }
.sp-h { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; } .sp-h b { flex: 1; font-size: 15px; } .sp-h span { font-weight: 700; }
.sp-it { display: flex; align-items: center; gap: 6px; font-size: 14px; padding: 3px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.sp-it span { flex: 1; min-width: 0; } .sp-it small { display: block; color: var(--muted); font-size: 12px; }
.sp-debts { margin: 8px 0; font-size: 14px; background: var(--bg-2); border-radius: 10px; padding: 8px 10px; } .sp-debts .label { margin: 0 0 4px; }
.sp-debts .me { color: var(--danger); } .sp-debts.ok { color: #2fbf71; font-weight: 600; }
.sa-who { display: flex; flex-direction: column; gap: 2px; }
.listen-card { min-width: 260px; } .listen-card audio { width: 100%; margin-top: 8px; height: 36px; }
.ls-top { display: flex; gap: 10px; align-items: center; } .ls-top b { display: block; font-size: 15px; } .ls-top small { color: var(--muted); font-size: 12.5px; }
.ls-cover { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg,#ff6ec4,#7873f5); color: #fff; flex-shrink: 0; }
.board-card canvas { width: 300px; max-width: 100%; aspect-ratio: 3/2; background: #fff; border-radius: 12px; display: block; box-shadow: inset 0 0 0 1px var(--border); }
.bd-foot { display: flex; align-items: center; gap: 6px; margin-top: 6px; } .bd-foot b { flex: 1; } .bd-foot .btn { padding: 6px 12px; font-size: 13px !important; }
.board-big { width: 100%; aspect-ratio: 3/2; background: #fff; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--border); cursor: crosshair; display: block; }
.bd-tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.bd-c { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; } .bd-c.on { box-shadow: 0 0 0 3px var(--accent); }
.bd-tools .field { width: auto; padding: 6px 8px; }
.capsule-card { min-width: 240px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; }
.capsule-card .cp-e { font-size: 48px; line-height: 1.1; }
.capsule-card.sealed .cp-e { animation: capTilt 3s ease-in-out infinite; }
@keyframes capTilt { 50% { transform: rotate(180deg); } }
.capsule-card span { font-size: 14px; } .capsule-card small { color: var(--muted); font-size: 12.5px; }
.capsule-card .cp-text { text-align: left; margin-top: 8px; background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: 12px; padding: 8px 10px; white-space: pre-wrap; align-self: stretch; }
.cap-pres { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.cap-pres button { border: 1px solid var(--border); background: var(--bg-2); color: var(--text); border-radius: 99px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.cap-pres button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
body:has(#app.chat-open) .simple-sos { display: none; }
#admTabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: thin; }
#admTabs button { flex-shrink: 0; }
.ac-subs { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; background: var(--bg-2); border-radius: 14px; padding: 8px 12px; }
.acs-item { display: flex; align-items: center; gap: 10px; }
.acs-item span { width: 110px; font-weight: 500; } .acs-item b { flex: 1; font-weight: 500; color: var(--muted); }
.acs-item .btn { padding: 6px 14px; font-size: 13px !important; }
.grant-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.grant-grid .btn:last-child { grid-column: 1 / -1; background: linear-gradient(135deg,#f7b733,#fc4a1a) !important; }

/* =====================================================================
   5.9 — современный вид: мягкие поверхности, «стекло», градиентные
   исходящие сообщения, плавающие панели
   ===================================================================== */
:root { --accent-base: var(--accent); --out-grad: linear-gradient(135deg, color-mix(in srgb, var(--accent) 88%, #fff) 0%, var(--accent) 45%, color-mix(in srgb, var(--accent) 72%, #7b5cff) 100%);
  --surface: color-mix(in srgb, var(--bg) 80%, transparent); --soft-shadow: 0 10px 30px rgba(20, 32, 56, .10), 0 2px 8px rgba(20, 32, 56, .06); --hair: color-mix(in srgb, var(--text) 7%, transparent); }
::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text) 16%, transparent); border-radius: 8px; } ::-webkit-scrollbar-track { background: transparent; }
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text) 16%, transparent) transparent; }

/* Боковая панель и список чатов */
.sidebar { border-right: 0; box-shadow: 1px 0 0 var(--hair); }
.side-top { padding: 12px 12px 6px; }
.search { height: 44px; border-radius: 14px; background: var(--bg-2); border: 1px solid transparent; }
.search:focus-within { background: var(--bg); border-color: color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent); }
.folders { padding: 4px 12px 8px !important; gap: 6px !important; border-bottom: 0 !important; }
.folders button { padding: 7px 14px !important; border-radius: 99px !important; background: transparent !important; color: var(--muted) !important; font-weight: 600 !important; font-size: 14px !important; box-shadow: none !important; }
.folders button:hover { background: var(--bg-2) !important; }
.folders button.active { background: color-mix(in srgb, var(--accent) 14%, transparent) !important; color: var(--accent) !important; }
.folders button.active::after { display: none !important; }
.folders button .fbadge { background: color-mix(in srgb, var(--text) 18%, transparent) !important; color: var(--bg) !important; }
.folders button.active .fbadge { background: var(--accent) !important; color: #fff !important; }
.chat-list { padding-bottom: 104px; }
.chat-item { margin: 1px 8px; padding: 9px 12px; border-radius: 18px; gap: 13px; transition: background .15s, transform .12s; }
.chat-item .avatar { width: 54px; height: 54px; font-size: 21px; }
.chat-item:active { transform: scale(.985); }
.chat-item.active { background: var(--out-grad) !important; box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 32%, transparent) !important; }
.ci-title { font-weight: 600; font-size: 15.5px; letter-spacing: -.01em; }
.ci-text { font-size: 14.5px; }
.badge { background: var(--out-grad); min-width: 22px; height: 22px; padding: 0 7px; font-size: 12px; font-weight: 700; box-shadow: 0 3px 8px color-mix(in srgb, var(--accent) 30%, transparent); }
.badge.muted { background: color-mix(in srgb, var(--text) 28%, transparent); box-shadow: none; }

/* Нижняя панель вкладок — плавающая «капсула» */
.tabbar { left: 12px !important; right: 12px !important; bottom: calc(10px + env(safe-area-inset-bottom)) !important; padding: 6px !important; border-radius: 26px; background: var(--surface) !important;
  backdrop-filter: blur(22px) saturate(1.7); -webkit-backdrop-filter: blur(22px) saturate(1.7); box-shadow: var(--soft-shadow); border: 1px solid var(--hair) !important; }
.tabbar button { border-radius: 20px !important; padding: 6px 0 5px !important; font-weight: 600 !important; transition: color .2s, background .2s; }
.tabbar button.active { background: color-mix(in srgb, var(--accent) 13%, transparent) !important; color: var(--accent) !important; }
.tabbar button:hover { background: var(--bg-2); }

/* Шапка чата */
.chat-head { background: var(--surface) !important; backdrop-filter: blur(22px) saturate(1.7) !important; -webkit-backdrop-filter: blur(22px) saturate(1.7) !important; border-bottom: 1px solid var(--hair) !important; }
.chat-head .chat-title { font-weight: 600; letter-spacing: -.01em; }
.icon-btn { border-radius: 50%; transition: background .15s, transform .1s; }
.icon-btn:active { transform: scale(.92); }
.day { background: color-mix(in srgb, #000 22%, transparent) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 13px; font-weight: 600; padding: 4px 12px; }
.service { border-radius: 14px !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* Сообщения: без «хвостиков», мягкие формы, градиент у исходящих */
.bubble { border-radius: 20px; box-shadow: 0 1px 2px rgba(16, 35, 60, .10), 0 2px 10px rgba(16, 35, 60, .05); }
.bubble::before { display: none !important; }
.row.in.last .bubble { border-bottom-left-radius: 6px; }
.row.out.last .bubble { border-bottom-right-radius: 6px; }
.row.in:not(.first) .bubble { border-top-left-radius: 8px; }
.row.out:not(.first) .bubble { border-top-right-radius: 8px; }
.row.in:not(.last) .bubble { border-bottom-left-radius: 8px; }
.row.out:not(.last) .bubble { border-bottom-right-radius: 8px; }
html:not(.bubbles-classic) .row.out .bubble:not(.clear):not(.sticker-b) {
  background: var(--out-grad) !important; color: #fff; box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 28%, transparent);
  --text: #fff; --muted: rgba(255,255,255,.78); --out-meta: rgba(255,255,255,.88); --accent: #fff; --bg-2: rgba(255,255,255,.16); --bg-3: rgba(255,255,255,.22);
  --border: rgba(255,255,255,.28); --hover: rgba(255,255,255,.12); --danger: #ffd2d2; }
html:not(.bubbles-classic) .row.out .bubble:not(.clear) a:not(.btn):not(.media):not(.file):not(.loc-card) { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
html:not(.bubbles-classic) .row.out .bubble:not(.clear) .meta, html:not(.bubbles-classic) .row.out .bubble:not(.clear) .meta svg { color: rgba(255,255,255,.85) !important; }
html:not(.bubbles-classic) .row.out .bubble:not(.clear) .btn:not(.ghost) { background: #fff !important; color: var(--accent-base) !important; box-shadow: none !important; }
html:not(.bubbles-classic) .row.out .bubble:not(.clear) .file .ext { background: rgba(255,255,255,.25); }
html:not(.bubbles-classic) .row.out .bubble:not(.clear) .voice .play { background: #fff; color: var(--accent-base); }
html:not(.bubbles-classic) .row.out .bubble:not(.clear) .voice .wave i { background: rgba(255,255,255,.55); }
html:not(.bubbles-classic) .row.out .bubble:not(.clear) .reply { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.8); }
html:not(.bubbles-classic) .row.out .bubble:not(.clear) .poll-res .pr-bar i { background: rgba(255,255,255,.85); }
html:not(.bubbles-classic) .row.out .bubble:not(.clear) .poll-opt .po-mark { border-color: rgba(255,255,255,.8); }
html:not(.bubbles-classic) .row.out .bubble:not(.clear) code { background: rgba(0,0,0,.14); }
html:not(.bubbles-classic) .row.out .bubble.only-media { background: transparent !important; box-shadow: none; }
.row.selected .bubble { outline: 2px solid var(--accent-base); outline-offset: 2px; }
.reacts .react { border-radius: 99px; }

/* Поле ввода — «плавающая таблетка» */
.input-box { border-radius: 26px; min-height: 50px; box-shadow: var(--soft-shadow); border: 1px solid var(--hair); padding: 3px 4px; }
.input-box textarea { font-size: 15.5px; }
.send { width: 50px; height: 50px; background: var(--out-grad) !important; color: #fff !important; box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 38%, transparent) !important; }
.send:hover { transform: scale(1.04); }
.send:active { transform: scale(.94); }
.send svg { color: #fff; }

/* Окна и меню */
.modal { background: rgba(8, 14, 26, .42) !important; }
.modal-card { border-radius: 26px !important; box-shadow: 0 30px 80px rgba(0,0,0,.28); }
.pop { border-radius: 18px !important; box-shadow: 0 18px 50px rgba(0,0,0,.2), 0 0 0 1px var(--hair) !important; padding: 6px !important; }
.pop:not(.sheet) button { border-radius: 12px !important; margin: 0 !important; width: 100% !important; }
.settings-sec, .sm-group { border-radius: 20px !important; }
.set-cats button, .acc-chip { border-radius: 20px !important; }
.field, .form input { background: var(--bg-2); border-color: transparent; }
.field:focus, .form input:focus { background: var(--bg); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }

/* Тёмная тема: глубже и контрастнее */
:root[data-theme="dark"] { --soft-shadow: 0 10px 30px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25); --hair: rgba(255,255,255,.07); }
:root[data-theme="dark"] .bubble { box-shadow: 0 1px 2px rgba(0,0,0,.3); }
:root[data-theme="dark"] .folders button .fbadge { color: #fff !important; }

@media (max-width: 800px) {
  .chat-item { margin: 1px 6px; }
  .input-box { min-height: 48px; }
  .send { width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
.bub-styles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.bub-styles button { border: 1.5px solid var(--border); border-radius: 16px; background: var(--bg-2); padding: 10px 8px 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; color: var(--text); font: inherit; }
.bub-styles button.active { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.bub-styles small { font-size: 12px; color: var(--muted); }
.bs-demo { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 0 6px; }
.bs-demo i { display: block; height: 14px; border-radius: 10px; width: 62%; }
.bs-demo i:first-child { background: var(--bubble-in); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.bs-demo i:last-child { align-self: flex-end; }
.bs-demo.modern i:last-child { background: var(--out-grad); }
.bs-demo.classic i:last-child { background: var(--bubble-out); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.ci-body { border-bottom: 0 !important; padding-bottom: 0 !important; margin-bottom: 0 !important; }
html:not(.bubbles-classic) .row.out .bubble:not(.clear):not(.sticker-b) { box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-base) 18%, transparent) !important; }

/* Меню «скрепки» — плитки с цветными иконками */
.att-back { position: fixed; inset: 0; z-index: 70; background: rgba(8,14,26,.35); animation: fade .15s; }
.att-sheet { position: fixed; z-index: 71; background: var(--surface); backdrop-filter: blur(24px) saturate(1.7); -webkit-backdrop-filter: blur(24px) saturate(1.7); border: 1px solid var(--hair); box-shadow: 0 24px 60px rgba(0,0,0,.25);
  border-radius: 26px; padding: 14px 10px 10px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 2px; width: 360px; animation: sheetUp .25s cubic-bezier(.2,.9,.3,1); }
.att-sheet button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 2px; border: 0; background: none; color: var(--text); font: inherit; font-size: 11.5px; font-weight: 500; line-height: 1.15; text-align: center; cursor: pointer; border-radius: 16px; transition: background .15s, transform .1s; }
.att-sheet button:hover { background: var(--bg-2); } .att-sheet button:active { transform: scale(.94); }
.att-sheet i { width: 52px; height: 52px; border-radius: 18px; display: grid; place-items: center; color: #fff; box-shadow: 0 6px 14px rgba(0,0,0,.15); }
.att-sheet i svg { width: 24px; height: 24px; }
@media (max-width: 800px) { .att-sheet { left: 8px !important; right: 8px !important; bottom: calc(8px + env(safe-area-inset-bottom)) !important; top: auto !important; width: auto; } }

/* ===== 5.10: платформа ботов 2.0 ===== */
.bubble.has-kb { min-width: min(260px, 100%); }
.bot-kb { display: flex; flex-direction: column; gap: 4px; margin: 8px -4px -2px; clear: both; }
.bk-row { display: flex; gap: 4px; }
.bot-kb button { flex: 1; min-width: 0; padding: 9px 10px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, transparent); display: flex; align-items: center; justify-content: center; gap: 5px; transition: background .12s, transform .08s; position: relative; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bot-kb button:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.bot-kb button:active { transform: scale(.97); }
.bot-kb .bk-ext { width: 13px; height: 13px; opacity: .7; flex-shrink: 0; }
.bot-kb button.busy { color: transparent; pointer-events: none; }
.bot-kb button.busy::after { content: ''; position: absolute; width: 16px; height: 16px; border: 2px solid var(--accent); border-right-color: transparent; border-radius: 50%; animation: bkspin .7s linear infinite; }
@keyframes bkspin { to { transform: rotate(360deg); } }
.row.out .bot-kb button { color: inherit; background: rgba(255,255,255,.18); }
.bot-rkb { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px 10px; border-radius: 16px 16px 0 0; margin-top: 6px; max-height: 38vh; overflow-y: auto; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--border); animation: modalIn .15s ease-out; }
.rk-row { display: flex; gap: 6px; }
.bot-rkb button { flex: 1; min-width: 0; padding: 12px 8px; border-radius: 12px; background: var(--bg-2); font-size: 15px; font-weight: 500; box-shadow: 0 1px 0 rgba(0,0,0,.06); transition: background .12s, transform .08s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bot-rkb button:hover { background: color-mix(in srgb, var(--accent) 12%, var(--bg-2)); }
.bot-rkb button:active { transform: scale(.97); }
#rkbToggle.on { color: var(--accent); }
.bot-cmd-btn { color: var(--accent) !important; }
.bot-cmds { position: absolute; left: 10px; right: 10px; bottom: calc(100% + 6px); max-height: 300px; overflow-y: auto; background: var(--bg); border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,.18); padding: 6px; z-index: 30; animation: modalIn .14s ease-out; }
.bot-cmds button { display: flex; gap: 10px; align-items: baseline; width: 100%; padding: 10px 12px; border-radius: 10px; text-align: left; }
.bot-cmds button:hover { background: var(--bg-2); }
.bot-cmds b { color: var(--accent); font-weight: 600; } .bot-cmds span { color: var(--muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#composerWrap { position: relative; }
.bot-intro { max-width: 340px; gap: 8px; }
.bot-intro .bi-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 13px !important; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent) !important; padding: 3px 10px; border-radius: 12px; }
.bot-intro .bi-tag svg { width: 14px; height: 14px; }
.bot-intro p { font-size: 14.5px; line-height: 1.45; color: var(--text); margin: 4px 0; }
.bi-cmds { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.bi-cmds button { text-align: left; font-size: 14px; padding: 8px 10px; border-radius: 10px; background: var(--bg-2); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bi-cmds button b { color: var(--accent); font-weight: 600; }
.bot-intro .btn { margin-top: 6px; min-width: 160px; justify-content: center; }
.bot-intro small { font-size: 12px; }
.bc-list { display: flex; flex-direction: column; gap: 2px; font-size: 14px; } .bc-list b { color: var(--accent); font-weight: 600; }
.bot-alert p { font-size: 16px; line-height: 1.45; white-space: pre-wrap; margin: 4px 0 8px; }
/* Список ботов */
.bots-hero { background: linear-gradient(135deg, color-mix(in srgb, #36d1dc 18%, transparent), color-mix(in srgb, #5b86e5 22%, transparent)); border-radius: 16px; padding: 14px 16px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 4px; }
.bots-hero b { font-size: 15.5px; } .bots-hero span { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.bot-row2 { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 8px; border-radius: 12px; text-align: left; }
.bot-row2:hover { background: var(--bg-2); }
.bot-row2 .grow { display: flex; flex-direction: column; min-width: 0; } .bot-row2 .grow b { font-weight: 500; }
/* Менеджер бота */
.bm-card { position: relative; padding-bottom: 0 !important; }
.bm-h { gap: 10px !important; } .bm-h .grow { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; } .bm-h .grow b { font-size: 17px; font-weight: 600; } .bm-h small { font-size: 13px; font-weight: 400; }
.bm-token { background: color-mix(in srgb, #34c759 12%, transparent); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; line-height: 1.5; margin-bottom: 10px; word-break: break-all; }
.bm-token code { background: var(--bg-2); padding: 2px 6px; border-radius: 6px; font-size: 12px; }
.bm-quick { display: flex; gap: 8px; flex-wrap: wrap; }
.bm-quick .btn, .btn.sm { padding: 7px 12px; font-size: 13.5px !important; }
.bm-tabs { position: sticky; top: -20px; margin: 10px -20px 0; padding: 0 12px; z-index: 5; }
.bm-tabs button { display: inline-flex; align-items: center; gap: 6px; } .bm-tabs svg { width: 16px; height: 16px; }
.bm-body { padding: 14px 0 16px; display: flex; flex-direction: column; gap: 8px; }
.bm-body .label { margin-top: 6px; }
.bm-main { background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: 14px; padding: 12px 14px !important; }
.bm-sec { margin: 6px 0; }
.bm-st { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; margin-bottom: 8px; } .bm-st svg { width: 17px; height: 17px; color: var(--accent); }
.bm-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.bm-tpls button { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px; border-radius: 14px; background: var(--bg-2); text-align: left; border: 2px solid transparent; transition: border-color .12s, transform .1s; }
.bm-tpls button:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.bm-tpls button.active { border-color: var(--accent); }
.bm-tpls i { font-style: normal; font-size: 24px; } .bm-tpls b { font-size: 14px; font-weight: 600; } .bm-tpls span { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.bm-d { background: color-mix(in srgb, var(--text) 3%, transparent); border-radius: 14px; padding: 0 14px; }
.bm-d > summary { cursor: pointer; padding: 13px 0; font-weight: 600; font-size: 14.5px; list-style: none; display: flex; align-items: center; gap: 8px; }
.bm-d > summary::-webkit-details-marker { display: none; }
.bm-d > summary::after { content: '›'; margin-left: auto; font-size: 20px; color: var(--muted); transition: transform .15s; }
.bm-d[open] > summary::after { transform: rotate(90deg); }
.bm-d > summary em { font-style: normal; font-size: 12px; background: var(--bg-3); color: var(--muted); padding: 1px 8px; border-radius: 10px; font-weight: 500; }
.bm-d[open] { padding-bottom: 14px; }
.bm-d .field { width: 100%; }
.bm-d textarea.field { resize: vertical; min-height: 40px; }
.bm-hint { font-size: 13px; line-height: 1.45; margin: 0 0 8px; }
.bm-2 { display: flex; gap: 8px; } .bm-2 > * { flex: 1; min-width: 0; }
.le-item { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; border-radius: 12px; background: var(--bg); margin-bottom: 8px; position: relative; padding-right: 44px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.le-f.w1 { flex: 1 1 110px; } .le-f.w2 { flex: 2 1 160px; } .le-f.full { flex: 1 1 100%; }
.le-item .field { padding: 8px 10px; font-size: 14px; }
.le-del { position: absolute; top: 8px; right: 6px; color: var(--muted); }
.le-del:hover { color: #e5484d; }
.le-days { display: flex; gap: 4px; flex-wrap: wrap; }
.le-days button { padding: 5px 9px; border-radius: 8px; background: var(--bg-2); font-size: 13px; color: var(--muted); }
.le-days button.on { background: var(--accent); color: #fff; }
.fe-form { border: 1px dashed var(--border); border-radius: 14px; padding: 10px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 8px; }
.fe-id { font-size: 12px; } .fe-id code { background: var(--bg-2); padding: 1px 6px; border-radius: 6px; }
.fe-del { align-self: flex-start; color: #e5484d !important; }
.bm-save { position: sticky; bottom: 0; display: flex; gap: 8px; justify-content: flex-end; padding: 12px 0 16px; background: linear-gradient(transparent, var(--bg) 30%); margin-top: 6px; z-index: 4; }
.bm-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.bm-kpi { background: var(--bg-2); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.bm-kpi b { font-size: 24px; font-weight: 700; letter-spacing: -.02em; } .bm-kpi span { font-size: 12.5px; color: var(--muted); }
.bm-kpi.acc { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #7b2ff7)); color: #fff; } .bm-kpi.acc span { color: rgba(255,255,255,.85); }
.bm-chart-t { font-weight: 600; font-size: 14px; margin-top: 10px; }
.bm-chart { background: var(--bg-2); border-radius: 14px; padding: 10px 10px 8px; }
.bm-chart svg { width: 100%; height: 150px; display: block; }
.bm-axis { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); padding: 2px 8px 0; }
.bm-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); padding: 6px 8px 0; }
.bm-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.bm-bars > div { display: grid; grid-template-columns: 110px 1fr 40px; align-items: center; gap: 8px; font-size: 13.5px; padding: 3px 0; }
.bm-bars i { display: block; height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 50%, #34c759)); }
.bm-bars b { text-align: right; font-weight: 600; }
.bm-preview { background: var(--chat-bg, var(--bg-2)); border-radius: 14px; padding: 14px; }
.bm-preview .bubble { position: static; max-width: 320px; background: var(--in-bubble, var(--bg)); border-radius: 16px; padding: 8px 12px 10px; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.bm-fbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .bm-fbar > span { margin-right: auto; }
.bm-form { background: var(--bg-2); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.bmf-h { display: flex; justify-content: space-between; font-size: 13.5px; } .bmf-who { font-weight: 500; cursor: pointer; }
.bmf-row { display: flex; gap: 10px; font-size: 14px; padding: 3px 0; border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.bmf-row span { color: var(--muted); flex: 0 0 40%; } .bmf-row b { font-weight: 500; word-break: break-word; }
.bm-form .btn { align-self: flex-start; margin-top: 6px; }
.bm-status { font-size: 14px; background: var(--bg-2); border-radius: 12px; padding: 10px 12px; }
.bm-status .ok { color: #34c759; } .bm-status .off { color: var(--muted); }
.bm-pre { background: #0f1720; color: #d6e2ee; border-radius: 12px; padding: 12px; font: 12px/1.55 ui-monospace, Menlo, Consolas, monospace; white-space: pre; overflow-x: auto; margin: 0; }
.bm-methods { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.bm-methods > div { display: flex; flex-direction: column; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); font-size: 13px; }
.bm-methods code { font: 600 12.5px ui-monospace, Menlo, Consolas, monospace; color: var(--accent); } .bm-methods span { color: var(--muted); }
.bm-log { background: #0f1720; color: #c9d6e2; border-radius: 12px; padding: 8px 10px; font: 12px/1.5 ui-monospace, Menlo, Consolas, monospace; max-height: 260px; overflow-y: auto; }
.bm-log > div { display: flex; gap: 8px; } .bm-log time { color: #6b7d8f; flex-shrink: 0; } .bm-log i { font-style: normal; width: 12px; flex-shrink: 0; }
.bm-log .lg-in i { color: #5ac8fa; } .bm-log .lg-out i { color: #34c759; } .bm-log .lg-err { color: #ff8a80; } .bm-log span { word-break: break-all; }
.bm-log .muted { color: #6b7d8f; }
.bm-confirm { position: fixed; inset: 0; background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 20; }
.bm-confirm > div { background: var(--bg); border-radius: 18px; padding: 18px; max-width: 340px; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.bm-confirm p { font-size: 15px; line-height: 1.45; margin-bottom: 8px; white-space: pre-wrap; }
.bm-card .empty svg { width: 40px; height: 40px; color: var(--muted); }
@media (max-width: 600px) { .bm-2 { flex-direction: column; } .bm-tabs { margin: 10px -16px 0; } .bm-bars > div { grid-template-columns: 80px 1fr 34px; } }
.bm-dlist { display: flex; flex-direction: column; }
.bm-dl { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 12px; text-align: left; width: 100%; }
.bm-dl:hover { background: var(--bg-2); }
.bm-dl .grow { display: flex; flex-direction: column; min-width: 0; } .bm-dl .grow b { font-weight: 500; } .bm-dl small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.bm-dl time { font-size: 12px; flex-shrink: 0; }
.bm-hbadge { font-style: normal; font-size: 11px; background: #ff9500; color: #fff; padding: 1px 7px; border-radius: 8px; margin-left: 4px; vertical-align: 1px; }
.bm-dh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bm-dh small { font-weight: 400; }
.bm-htgl { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); cursor: pointer; }
.bm-thread { background: var(--bg-2); border-radius: 14px; padding: 12px; height: min(420px, 50vh); overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.bm-msg { max-width: 78%; padding: 7px 11px; border-radius: 14px; font-size: 14.5px; line-height: 1.4; display: flex; flex-direction: column; }
.bm-msg time { font-size: 11px; color: var(--muted); align-self: flex-end; }
.bm-msg.user { align-self: flex-start; background: var(--bg); }
.bm-msg.bot { align-self: flex-end; background: color-mix(in srgb, var(--accent) 16%, var(--bg)); }
.bm-dsend { display: flex; gap: 8px; position: sticky; bottom: 0; background: var(--bg); padding: 8px 0 14px; }
.bm-dsend .field { flex: 1; } .bm-dsend .btn { padding: 0 16px; }

/* =====================================================================
   5.11 — вид в духе iOS: заголовок «Чаты», плоский список с разделителями,
   панель вкладок во всю ширину, шапка чата по центру, «хвостики»
   ===================================================================== */
:root.k11 { --fill: rgba(118,118,128,.12); --bar: rgba(250,250,252,.86); --hair: rgba(60,60,67,.18);
  --bg: #ffffff; --bg-2: #f2f3f7; --bg-3: #e6e8ee; --hover: #f2f3f7; --text: #0c0d10; --muted: #8a8f98; --border: #e3e5ea;
  --bubble-in: #ffffff; --bubble-out: #d7efff; --out-meta: #2f8de4; --radius: 18px; }
:root.k11[data-theme="dark"] { --fill: rgba(118,118,128,.24); --bar: rgba(22,25,31,.86); --hair: rgba(255,255,255,.09);
  --bg: #16191e; --bg-2: #20242b; --bg-3: #2b3038; --hover: #20242b; --text: #f2f4f7; --muted: #8e97a4; --border: #0c0e11;
  --bubble-in: #252a32; --bubble-out: #33567e; --out-meta: #92c4ff; }
html.k11 body { letter-spacing: -.005em; }
html.k11 .side-title { display: none; }

/* Сообщения: форма и «хвостики» (стиль по умолчанию) */
html.k11 .bubble { border-radius: 18px; }
html.k11 .row.in:not(.first) .bubble { border-top-left-radius: 6px; }
html.k11 .row.in:not(.last) .bubble { border-bottom-left-radius: 6px; }
html.k11 .row.out:not(.first) .bubble { border-top-right-radius: 6px; }
html.k11 .row.out:not(.last) .bubble { border-bottom-right-radius: 6px; }
html.k11.bubbles-classic .bubble:not(.clear):not(.only-media) { box-shadow: 0 1px 1.5px rgba(16, 24, 40, .13) !important; }
html.k11.bubbles-classic .row.out .bubble:not(.clear):not(.only-media):not(.sticker-b) { background: var(--bubble-out) !important; }
html.k11.bubbles-classic .row.out .bubble:not(.clear) .meta, html.k11.bubbles-classic .row.out .bubble:not(.clear) .meta svg { color: var(--out-meta) !important; }
html.k11.bubbles-classic .row.last .bubble:not(.clear):not(.only-media):not(.sticker-b)::after { content: ''; position: absolute; bottom: 0; width: 12px; height: 16px; pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath d='M12 0v16H.6c-.5 0-.7-.6-.3-.9C3.6 12.8 7 9.4 7.6 3.6 7.8 2.4 8 1.2 8 0z'/%3E%3C/svg%3E") no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath d='M12 0v16H.6c-.5 0-.7-.6-.3-.9C3.6 12.8 7 9.4 7.6 3.6 7.8 2.4 8 1.2 8 0z'/%3E%3C/svg%3E") no-repeat; }
html.k11.bubbles-classic .row.in.last .bubble:not(.clear):not(.only-media):not(.sticker-b) { border-bottom-left-radius: 4px; }
html.k11.bubbles-classic .row.out.last .bubble:not(.clear):not(.only-media):not(.sticker-b) { border-bottom-right-radius: 4px; }
html.k11.bubbles-classic .row.in.last .bubble:not(.clear):not(.only-media):not(.sticker-b)::after { left: -7px; background: var(--bubble-in); }
html.k11.bubbles-classic .row.out.last .bubble:not(.clear):not(.only-media):not(.sticker-b)::after { right: -7px; background: var(--bubble-out); transform: scaleX(-1); }
html.k11.bubbles-classic .row.last .bubble.has-effect::after { display: block; }
html.k11 .bubble .text { font-size: calc(var(--font-size) + 1px); line-height: 1.34; }

/* Ответ на историю */
.story-rep { display: flex; align-items: flex-end; gap: 10px; margin: 2px -2px 6px; cursor: pointer; }
.story-rep .sr-media { width: 92px; height: 150px; border-radius: 12px; overflow: hidden; position: relative; flex-shrink: 0; background: var(--bg-3); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 70%, transparent); }
.story-rep img, .story-rep video { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-rep .sr-play { position: absolute; inset: 0; margin: auto; width: 34px; height: 34px; border-radius: 50%; background: rgba(0,0,0,.45); display: grid; place-items: center; color: #fff; }
.story-rep .sr-play svg { width: 16px; height: 16px; margin-left: 2px; }
.story-rep .sr-gone { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); background: repeating-linear-gradient(135deg, var(--bg-2) 0 8px, var(--bg-3) 8px 16px); }
.story-rep.is-gone .sr-media { box-shadow: none; height: 72px; width: 56px; }
.story-rep .sr-info { display: flex; flex-direction: column; min-width: 0; padding-bottom: 2px; }
.story-rep .sr-info b { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--accent); }
.story-rep .sr-ico { width: 15px; height: 15px; }
.story-rep .sr-info span { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; max-width: 150px; }
.bubble.clear .story-rep .sr-info { background: color-mix(in srgb, var(--bg) 85%, transparent); padding: 4px 8px; border-radius: 10px; }
html:not(.bubbles-classic) .row.out .bubble .story-rep .sr-info b { color: #fff; }

@media (max-width: 800px) {
  /* Экран чатов */
  html.k11 .side-top { display: grid !important; grid-template-columns: 44px 1fr 44px; grid-template-areas: "l t r" "s s s"; align-items: center; row-gap: 6px; column-gap: 0;
    padding: calc(2px + env(safe-area-inset-top)) 8px 8px !important; min-height: 0; }
  html.k11 .side-title { display: flex; align-items: center; justify-content: center; gap: 7px; grid-area: t; font-size: 17px; font-weight: 600; letter-spacing: -.02em; height: 44px; }
  html.k11 .side-top #smartBtn { grid-area: l; color: var(--accent); }
  html.k11 .side-top #composeBtn { grid-area: r; color: var(--accent); }
  html.k11 .side-top .search-form { grid-area: s; }
  html.k11 .search { height: 36px !important; border-radius: 10px !important; background: var(--fill) !important; border: 0 !important; box-shadow: none !important; padding: 0 10px !important; gap: 6px !important; }
  html.k11 .search svg { width: 18px; height: 18px; color: var(--muted); }
  html.k11 .search input { font-size: 16px !important; }
  html.k11 .search input::placeholder { color: var(--muted); }
  .st-spin { width: 14px; height: 14px; border: 2px solid var(--muted); border-right-color: transparent; border-radius: 50%; animation: bkspin .8s linear infinite; display: inline-block; }

  html.k11 .folders { padding: 0 6px !important; gap: 0 !important; border-bottom: .5px solid var(--hair) !important; }
  html.k11 .folders button { background: none !important; border-radius: 0 !important; padding: 10px 11px 11px !important; color: var(--muted) !important; position: relative; font-weight: 600 !important; font-size: 15px !important; }
  html.k11 .folders button:hover { background: none !important; }
  html.k11 .folders button.active { color: var(--accent) !important; background: none !important; }
  html.k11 .folders button.active::after { display: block !important; content: '' !important; position: absolute; left: 9px; right: 9px; bottom: 0; top: auto; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent) !important; opacity: 1 !important; transform: none !important; }
  html.k11 .folders button .fbadge { background: var(--muted) !important; color: var(--bg) !important; }
  html.k11 .folders button.active .fbadge { background: var(--accent) !important; color: #fff !important; }

  html.k11 .chat-list { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  html.k11 .chat-item { margin: 0 !important; border-radius: 0 !important; padding: 0 0 0 10px !important; gap: 10px !important; min-height: 76px; box-shadow: none !important; align-items: center; }
  html.k11 .chat-item .avatar { width: 58px; height: 58px; font-size: 22px; flex-shrink: 0; }
  html.k11 .chat-item .ci-body { align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 8px 12px 8px 0 !important; border-bottom: .5px solid var(--hair) !important; min-width: 0; }
  html.k11 .chat-item:last-child .ci-body { border-bottom-color: transparent !important; }
  html.k11 .ci-title { font-size: 16px; font-weight: 600; letter-spacing: -.015em; }
  html.k11 .ci-time { font-size: 14px; color: var(--muted); }
  html.k11 .chat-item .ci-row:last-child { align-items: flex-start; }
  html.k11 .chat-item .ci-text { font-size: 15px; line-height: 1.3; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-top: 1px; min-height: 2.6em; }
  html.k11 .chat-item .badge { background: var(--accent) !important; box-shadow: none !important; min-width: 21px; height: 21px; font-size: 13px; font-weight: 600; margin-top: 3px; }
  html.k11 .chat-item .badge.muted { background: color-mix(in srgb, var(--muted) 70%, transparent) !important; }
  html.k11 .chat-item:active { background: var(--fill) !important; }
  html.k11 .chat-item.active { background: transparent !important; color: inherit !important; box-shadow: none !important; }
  html.k11 .chat-item.active .ci-title, html.k11 .chat-item.active .ci-title svg, html.k11 .chat-item.active .ci-time, html.k11 .chat-item.active .ci-time svg, html.k11 .chat-item.active .ci-text b, html.k11 .chat-item.active .pin-ico, html.k11 .chat-item.active .lock-ico, html.k11 .chat-item.active .ci-text .draft { color: inherit !important; }
  html.k11 .chat-item.active .ci-text, html.k11 .chat-item.active .ci-time { color: var(--muted) !important; }
  html.k11 .chat-item.active .ci-time svg { color: var(--accent) !important; }
  html.k11 .chat-item.active .badge { background: var(--accent) !important; color: #fff !important; }
  html.k11 .arch-row, html.k11 .req-row { min-height: 64px; }
  html.k11 .arch-row .avatar, html.k11 .req-row .avatar { width: 58px; height: 58px; }

  /* Панель вкладок во всю ширину */
  html.k11 .tabbar { left: 0 !important; right: 0 !important; bottom: 0 !important; border-radius: 0 !important; padding: 5px 0 calc(3px + env(safe-area-inset-bottom)) !important; border: 0 !important;
    border-top: .5px solid var(--hair) !important; box-shadow: none !important; background: var(--bar) !important; backdrop-filter: blur(20px) saturate(1.8); -webkit-backdrop-filter: blur(20px) saturate(1.8); }
  html.k11 .tabbar button { background: none !important; border-radius: 0 !important; padding: 2px 0 !important; font-size: 10.5px !important; font-weight: 500 !important; gap: 2px !important; color: var(--muted); }
  html.k11 .tabbar button svg { width: 27px; height: 27px; }
  html.k11 .tabbar button.active { color: var(--accent) !important; }
  html.k11 .tabbar button.active svg { transform: none; stroke-width: 2.1; }
  html.k11 .tabbar .tb-badge { top: 0 !important; }
  html.k11 .sidebar { padding-bottom: 0 !important; }

  /* Переход «список → чат»: список уезжает влево, чат выезжает справа */
  html.k11 .sidebar { transition: transform .3s cubic-bezier(.2,.8,.25,1); will-change: transform; }
  html.k11 .app.chat-open .sidebar { transform: translateX(-28%); }
  html.k11 .chat { transition: transform .3s cubic-bezier(.2,.8,.25,1); }
  html.k11 .app.chat-open .chat, body.swiping-back .chat { box-shadow: -4px 0 18px rgba(0,0,0,.14); }
  body.swiping-back .sidebar::after { content: ''; position: absolute; inset: 0; background: #000; opacity: calc((1 - var(--swp, 0)) * .14); pointer-events: none; z-index: 60; }
  body.swiping-back .chat .composer-wrap textarea { pointer-events: none; }

  /* Шапка чата: «назад» слева, имя по центру, аватар справа */
  html.k11 .chat-head { position: relative; min-height: calc(50px + env(safe-area-inset-top)) !important; padding: env(safe-area-inset-top) 6px 0 2px !important; gap: 0; background: var(--bar) !important;
    backdrop-filter: blur(20px) saturate(1.8) !important; -webkit-backdrop-filter: blur(20px) saturate(1.8) !important; border-bottom: .5px solid var(--hair) !important; }
  html.k11 .chat-head .back { display: flex !important; align-items: center; width: auto !important; min-width: 40px; height: 44px; padding: 0 4px 0 2px; border-radius: 22px; color: var(--accent); gap: 0; z-index: 6; }
  html.k11 .chat-head .back svg { width: 26px; height: 26px; stroke-width: 2.3; }
  html.k11 .back-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 600; display: grid; place-items: center; margin-left: -2px; }
  html.k11 .chat-head-info { position: absolute; left: 64px; right: 8px; top: env(safe-area-inset-top); bottom: 0; flex-direction: row-reverse; gap: 10px; }
  html.k11 .chat-head-info > div:last-child { flex: 1; text-align: center; min-width: 0; padding-left: 0; }
  html.k11 .chat-head-info .avatar { width: 38px; height: 38px; font-size: 15px; flex-shrink: 0; }
  html.k11 .chat-head .chat-title { font-size: 16.5px; font-weight: 600; justify-content: center; }
  html.k11 .chat-head .chat-status { font-size: 13px; justify-content: center; }
  html.k11 .chat-head .chat-status.on { color: var(--accent); }
  html.k11 .chat-head .head-actions { display: none !important; }

  /* Поле ввода: скрепка слева, поле-«капсула», микрофон справа */
  html.k11 .composer-wrap { background: var(--bar); backdrop-filter: blur(20px) saturate(1.8); -webkit-backdrop-filter: blur(20px) saturate(1.8); border-top: .5px solid var(--hair);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom)) !important; }
  html.k11 .composer { align-items: flex-end; gap: 2px !important; }
  html.k11 .composer > #attachBtn { width: 40px; height: 40px; color: var(--muted); flex-shrink: 0; }
  html.k11 .composer > #attachBtn svg { width: 25px; height: 25px; }
  html.k11 .input-box { min-height: 38px !important; border-radius: 19px !important; background: var(--bg) !important; border: .5px solid var(--hair) !important; box-shadow: none !important; padding: 0 2px 0 12px !important; align-items: flex-end; }
  html.k11[data-theme="dark"] .input-box { background: var(--bg-2) !important; }
  html.k11 .input-box textarea { order: 1; font-size: 16px !important; padding: 8px 0 !important; line-height: 21px; }
  html.k11 .input-box #emojiBtn { order: 2; }
  html.k11 .input-box #rkbToggle { order: 3; }
  html.k11 .input-box .icon-btn { width: 36px !important; height: 36px !important; color: var(--muted); }
  html.k11 .input-box .bot-cmd-btn { margin-left: -8px; color: var(--accent) !important; }
  html.k11 .send { width: 40px !important; height: 40px !important; background: none !important; box-shadow: none !important; color: var(--muted) !important; flex-shrink: 0; }
  html.k11 .send svg { color: inherit !important; width: 25px; height: 25px; }
  html.k11 .send.ready { background: var(--accent) !important; color: #fff !important; width: 34px !important; height: 34px !important; margin: 2px 3px; }
  html.k11 .send.ready svg { width: 19px; height: 19px; }
  html.k11 .compose-extra { margin-right: 0 !important; }
  html.k11 .messages { padding-bottom: 8px; }
  html.k11 .bot-rkb { border-radius: 0; margin: 6px -6px calc(-6px - env(safe-area-inset-bottom)); padding-bottom: calc(10px + env(safe-area-inset-bottom)); background: transparent; border-top: .5px solid var(--hair); }

  /* Профиль: быстрые действия */
  html.k11 .info-quick { display: flex; justify-content: center; gap: 8px; padding: 6px 12px 12px; }
  html.k11 .info-quick button { flex: 1; max-width: 86px; background: var(--bg-2); border-radius: 12px; padding: 10px 4px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; color: var(--accent); }
  html.k11 .info-quick button svg { width: 22px; height: 22px; }
}
@media (min-width: 801px) {
  html.k11 .info-quick { display: flex; justify-content: center; gap: 8px; padding: 6px 12px 12px; }
  html.k11 .info-quick button { flex: 1; max-width: 90px; background: var(--bg-2); border-radius: 12px; padding: 10px 4px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; color: var(--accent); }
  html.k11 .info-quick button svg { width: 22px; height: 22px; }
}
.row.out .bubble.clear .story-rep { flex-direction: row-reverse; }
.row.out .bubble.clear .story-rep .sr-info { align-items: flex-end; }
@media (hover: none) { html.k11 .chat-item:hover:not(.active) { background: transparent !important; } }
html.k11 .info-quick { gap: 6px !important; padding: 6px 10px 12px !important; }
html.k11 .info-quick button { flex: 1 1 0 !important; min-width: 0 !important; max-width: 84px !important; padding: 9px 2px 7px !important; font-size: 11.5px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* =====================================================================
   5.12 — «Kuvo Glow»: фирменный стиль. Сине-фиолетовый градиент,
   светящиеся обои, стекло, живые анимации, «скруглённые квадраты» у групп
   ===================================================================== */
:root { --grad: linear-gradient(135deg, color-mix(in srgb, var(--accent) 70%, #22c1ff) 0%, var(--accent) 48%, color-mix(in srgb, var(--accent) 55%, #b04dff) 100%);
  --glow: 0 6px 20px color-mix(in srgb, var(--accent) 38%, transparent); }
/* Фирменные обои */
:root[data-wall="kuvo"] { --chat-grad: #e6ebfb; --b1: #a9b9ff; --b2: #f3c9ff; --b3: #9fe0ff; --b4: #ffd8c6; --pill: rgba(40, 52, 120, .34); --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23303f8f' stroke-opacity='.11' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14l3 7 7 .5-5.5 4.5 2 7-6.5-4-6.5 4 2-7-5.5-4.5 7-.5z'/%3E%3Ccircle cx='82' cy='28' r='7'/%3E%3Cellipse cx='82' cy='28' rx='14' ry='4.5' transform='rotate(-20 82 28)'/%3E%3Cpath d='M135 50c-7-5-11-8-11-12a5 5 0 0 1 11-2 5 5 0 0 1 11 2c0 4-4 7-11 12z'/%3E%3Cpath d='M28 86h24a4 4 0 0 1 4 4v12a4 4 0 0 1-4 4H38l-7 6v-6h-3a4 4 0 0 1-4-4V90a4 4 0 0 1 4-4z'/%3E%3Ccircle cx='112' cy='108' r='10'/%3E%3Cpath d='M107 111a6 6 0 0 0 10 0M108 104h.01M116 104h.01'/%3E%3Cpath d='M140 126l-8 12h6l-4 10 10-14h-6l4-8z'/%3E%3Cpath d='M70 136v-13l10-2v11'/%3E%3Ccircle cx='67' cy='136' r='3'/%3E%3Ccircle cx='77' cy='132' r='3'/%3E%3Ccircle cx='58' cy='60' r='2'/%3E%3Ccircle cx='150' cy='88' r='2.5'/%3E%3Ccircle cx='10' cy='62' r='1.6'/%3E%3Ccircle cx='100' cy='70' r='1.6'/%3E%3Cpath d='M8 118l4 4M12 118l-4 4'/%3E%3C/g%3E%3C/svg%3E"); }
:root[data-theme="dark"][data-wall="kuvo"] { --chat-grad: #0a0d1a; --b1: #2b33a8; --b2: #5a1f86; --b3: #0b5a86; --b4: #221459; --pill: rgba(255,255,255,.14); --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.05' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14l3 7 7 .5-5.5 4.5 2 7-6.5-4-6.5 4 2-7-5.5-4.5 7-.5z'/%3E%3Ccircle cx='82' cy='28' r='7'/%3E%3Cellipse cx='82' cy='28' rx='14' ry='4.5' transform='rotate(-20 82 28)'/%3E%3Cpath d='M135 50c-7-5-11-8-11-12a5 5 0 0 1 11-2 5 5 0 0 1 11 2c0 4-4 7-11 12z'/%3E%3Cpath d='M28 86h24a4 4 0 0 1 4 4v12a4 4 0 0 1-4 4H38l-7 6v-6h-3a4 4 0 0 1-4-4V90a4 4 0 0 1 4-4z'/%3E%3Ccircle cx='112' cy='108' r='10'/%3E%3Cpath d='M107 111a6 6 0 0 0 10 0M108 104h.01M116 104h.01'/%3E%3Cpath d='M140 126l-8 12h6l-4 10 10-14h-6l4-8z'/%3E%3Cpath d='M70 136v-13l10-2v11'/%3E%3Ccircle cx='67' cy='136' r='3'/%3E%3Ccircle cx='77' cy='132' r='3'/%3E%3Ccircle cx='58' cy='60' r='2'/%3E%3Ccircle cx='150' cy='88' r='2.5'/%3E%3Ccircle cx='10' cy='62' r='1.6'/%3E%3Ccircle cx='100' cy='70' r='1.6'/%3E%3Cpath d='M8 118l4 4M12 118l-4 4'/%3E%3C/g%3E%3C/svg%3E"); }
[data-wall-prev="kuvo"] span { background: radial-gradient(circle at 20% 20%, #a9b9ff, transparent 60%), radial-gradient(circle at 80% 30%, #f3c9ff, transparent 60%), radial-gradient(circle at 40% 90%, #9fe0ff, transparent 60%), #e6ebfb; }
:root[data-theme="dark"] [data-wall-prev="kuvo"] span { background: radial-gradient(circle at 20% 20%, #2b33a8, transparent 60%), radial-gradient(circle at 80% 30%, #5a1f86, transparent 60%), radial-gradient(circle at 40% 90%, #0b5a86, transparent 60%), #0a0d1a; }
:root[data-wall="kuvo"] .chat-bg i { opacity: .95; filter: saturate(1.15); }

/* Палитра */
:root.k12 { --bg: #ffffff; --bg-2: #f1f3fa; --bg-3: #e4e8f3; --hover: #f1f3fa; --text: #0b0d17; --muted: #858b9c; --border: #e2e5ee; --fill: rgba(112, 120, 150, .12); --hair: rgba(50, 60, 100, .14); --bar: rgba(252, 252, 255, .78);
  --bubble-in: #ffffff; --bubble-out: color-mix(in srgb, var(--accent) 19%, #ffffff); --bubble-out-top: color-mix(in srgb, var(--accent) 11%, #ffffff); --out-meta: color-mix(in srgb, var(--accent) 85%, #000); }
:root.k12[data-theme="dark"] { --bg: #0e111a; --bg-2: #171b27; --bg-3: #222838; --hover: #171b27; --text: #f3f5fb; --muted: #8990a5; --border: #07080d; --fill: rgba(140, 150, 190, .16); --hair: rgba(255,255,255,.08); --bar: rgba(14, 17, 26, .72);
  --bubble-in: #1b2030; --bubble-out: color-mix(in srgb, var(--accent) 62%, #121628); --bubble-out-top: color-mix(in srgb, var(--accent) 78%, #1a2040); --out-meta: rgba(255,255,255,.72); }
:root.k12[data-theme="dark"] .row.out .bubble:not(.clear) { --text: #fff; color: #fff; }
:root.k12[data-theme="dark"] .row.out .bubble:not(.clear) a:not(.btn):not(.media):not(.file) { color: #fff; }

/* Кнопки, значки, счётчики — фирменный градиент */
html.k12 .btn:not(.ghost):not(.danger) { background: var(--grad); box-shadow: var(--glow); text-transform: none; letter-spacing: 0; font-weight: 600; border-radius: 14px; }
html.k12 .btn.ghost { text-transform: none; letter-spacing: 0; font-weight: 600; border-radius: 14px; }
html.k12 .badge:not(.muted), html.k12 .chat-item .badge:not(.muted), html.k12 .back-count, html.k12 .tb-badge { background: var(--grad) !important; }
html.k12 .chat-item.has-unread .badge:not(.muted) { box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 40%, transparent) !important; animation: badgePop .35s cubic-bezier(.3,1.6,.5,1); }
@keyframes badgePop { from { transform: scale(.4); } }
html.k12 .st-ring.unseen { background: conic-gradient(from 210deg, #22c1ff, var(--accent), #b04dff, #ff5fa2, #22c1ff) !important; }
html.k12 .switch input:checked + span { background: var(--grad) !important; }

/* Аватары групп и каналов — «скруглённый квадрат» */
html.k12 .avatar.sq { border-radius: 32% !important; }
html.k12 .avatar.sq::after { border-radius: 50%; }
html.k12 .avatar { box-shadow: inset 0 0 0 .5px rgba(0,0,0,.06); }
html.k12 .avatar.online::after { box-shadow: 0 0 8px color-mix(in srgb, var(--online) 70%, transparent); }

/* Сообщения */
html.k12.bubbles-classic .row.out .bubble:not(.clear):not(.only-media):not(.sticker-b) { background: linear-gradient(180deg, var(--bubble-out-top), var(--bubble-out)) !important; background-attachment: scroll !important; }
html.k12.bubbles-classic .row.out .bubble:not(.clear) .meta, html.k12.bubbles-classic .row.out .bubble:not(.clear) .meta svg { color: var(--out-meta) !important; }
html.k12 .bubble:not(.clear):not(.only-media) { box-shadow: 0 1px 2px rgba(20, 28, 60, .10), 0 4px 14px rgba(20, 28, 60, .05) !important; }
html.k12[data-theme="dark"] .bubble:not(.clear):not(.only-media) { box-shadow: 0 1px 2px rgba(0,0,0,.35) !important; }
html.k12[data-theme="dark"] .row.out .bubble:not(.clear):not(.only-media) { box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 22%, transparent) !important; }
html.k12 .row.appear.in { animation: k12in .38s cubic-bezier(.2, 1.1, .3, 1) both; transform-origin: bottom left; }
html.k12 .row.appear.out { animation: k12out .38s cubic-bezier(.2, 1.1, .3, 1) both; transform-origin: bottom right; }
@keyframes k12in { from { opacity: 0; transform: translate(-6px, 14px) scale(.94); } }
@keyframes k12out { from { opacity: 0; transform: translate(6px, 14px) scale(.94); } }
html.k12 .bubble { transition: transform .15s ease; }
html.k12 .row:active .bubble { transform: scale(.985); }
html.k12 .reacts .react { background: color-mix(in srgb, var(--accent) 12%, var(--bubble-in)); }
html.k12 .reacts .react.mine { background: var(--grad); color: #fff; }
html.k12 .reacts .react.mine small { color: #fff; }
html.k12 .day, html.k12 .service { background: var(--pill) !important; backdrop-filter: blur(14px) saturate(1.6); -webkit-backdrop-filter: blur(14px) saturate(1.6); color: #fff !important; box-shadow: 0 2px 10px rgba(0,0,0,.08); }
html.k12 .scroll-down { background: var(--bar); backdrop-filter: blur(18px) saturate(1.8); -webkit-backdrop-filter: blur(18px) saturate(1.8); color: var(--accent); box-shadow: 0 6px 20px rgba(20,28,60,.16); border: .5px solid var(--hair); }
html.k12 .scroll-down .badge { background: var(--grad) !important; }

/* Стекло: верхние и нижние панели — с тонким бликом */
html.k12 .chat-head, html.k12 .composer-wrap, html.k12 .tabbar { box-shadow: inset 0 .5px 0 rgba(255,255,255,.55) !important; }
html.k12[data-theme="dark"] .chat-head, html.k12[data-theme="dark"] .composer-wrap, html.k12[data-theme="dark"] .tabbar { box-shadow: inset 0 .5px 0 rgba(255,255,255,.07) !important; }
html.k12 .send.ready { background: var(--grad) !important; box-shadow: var(--glow) !important; animation: sendPop .3s cubic-bezier(.3,1.6,.5,1); }
@keyframes sendPop { from { transform: scale(.6); } }
html.k12 .input-box:focus-within { border-color: color-mix(in srgb, var(--accent) 45%, transparent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent) !important; }
html.k12 .tabbar button.active svg { filter: drop-shadow(0 3px 8px color-mix(in srgb, var(--accent) 45%, transparent)); animation: tabPop .35s cubic-bezier(.3,1.6,.5,1); }
@keyframes tabPop { 40% { transform: translateY(-3px) scale(1.12); } }

/* Список чатов */
html.k12 .chat-item.has-unread .ci-title { font-weight: 700; }
html.k12 .chat-item .ci-text .typing, html.k12 .chat-item .ci-text .draft { color: var(--accent); }
html.k12 .folders button.active::after { background: var(--grad) !important; height: 3px; }
html.k12 .st-item small { font-weight: 500; }

@media (max-width: 800px) {
  /* Большой заголовок слева, круглые кнопки справа */
  html.k12 .side-top { grid-template-columns: 1fr 40px 40px !important; grid-template-areas: "t l r" "s s s" !important; column-gap: 8px !important; padding: calc(6px + env(safe-area-inset-top)) 16px 10px !important; }
  html.k12 .side-title { justify-content: flex-start !important; font-size: 32px !important; font-weight: 800 !important; letter-spacing: -.035em !important; height: 46px !important; }
  html.k12 .side-title .st-spin { width: 18px; height: 18px; }
  html.k12 .side-top #smartBtn, html.k12 .side-top #composeBtn { width: 38px; height: 38px; background: var(--fill); border-radius: 50%; }
  html.k12 .side-top #composeBtn { background: var(--grad); color: #fff !important; box-shadow: var(--glow); }
  html.k12 .side-top #smartBtn svg, html.k12 .side-top #composeBtn svg { width: 20px; height: 20px; }
  html.k12 .search { height: 38px !important; border-radius: 12px !important; }
  html.k12 .chat-item { padding-left: 14px !important; }
  html.k12 .chat-item .ci-body { padding-right: 16px !important; }
  html.k12 .folders { padding: 0 10px !important; }
  html.k12 .chat-head-info .avatar { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px color-mix(in srgb, var(--accent) 40%, transparent); }
}
@media (min-width: 801px) {
  html.k12 .chat-item.active { background: var(--grad) !important; box-shadow: var(--glow) !important; }
  html.k12 .side-top #composeBtn { color: var(--accent); }
}
@media (prefers-reduced-motion: reduce) { html.k12 .row.appear.in, html.k12 .row.appear.out { animation: none; } }
:root.k12:not([data-theme="dark"]) { --bubble-out: var(--accent); --bubble-out-top: color-mix(in srgb, var(--accent) 78%, #3fd0ff); --out-meta: rgba(255,255,255,.82); }
:root.k12 .row.out .bubble:not(.clear) { --text: #fff; --muted: rgba(255,255,255,.75); color: #fff; }
:root.k12 .row.out .bubble:not(.clear) a:not(.btn):not(.media):not(.file) { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
:root.k12 .row.out .bubble:not(.clear) .story-rep .sr-info b { color: #fff; }
:root.k12 .row.out .bubble:not(.clear) .story-rep .sr-info span { color: rgba(255,255,255,.78); }
:root.k12 .row.out .bubble:not(.clear) .story-rep .sr-media { box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
:root.k12 .row.out .bubble:not(.clear) .btn:not(.ghost) { background: #fff !important; color: var(--accent) !important; box-shadow: none !important; }
:root.k12 .row.out .bubble:not(.clear) .reply { background: rgba(255,255,255,.16); border-color: #fff; }
:root.k12 .row.out .bubble:not(.clear) .reply b, :root.k12 .row.out .bubble:not(.clear) .reply span { color: #fff; }
:root.k12 .row.out .bubble:not(.clear) .file .ext { background: rgba(255,255,255,.24); }
:root.k12 .row.out .bubble:not(.clear) .fsize, :root.k12 .row.out .bubble:not(.clear) .fwd { color: rgba(255,255,255,.8); }
:root.k12 .row.out .bubble:not(.clear) .voice .play { background: #fff; color: var(--accent); }
:root.k12 .row.out .bubble:not(.clear) .voice .wave i { background: rgba(255,255,255,.6); }
:root.k12 .row.out .bubble:not(.clear) .poll-res .pr-bar i { background: rgba(255,255,255,.85); }
:root.k12 .row.out .bubble:not(.clear) code { background: rgba(0,0,0,.16); }
:root.k12 .row.out .bubble:not(.clear) .bot-kb button { background: rgba(255,255,255,.2); color: #fff; }
:root.k12:not([data-theme="dark"]) .row.out .bubble:not(.clear):not(.only-media) { box-shadow: 0 3px 12px color-mix(in srgb, var(--accent) 28%, transparent) !important; }

/* =====================================================================
   5.13 — удобство: меню сообщения «в фокусе», настройки на весь экран,
   аккуратные тосты, шторки как в iOS
   ===================================================================== */
/* Меню сообщения */
.ctx-ov { position: fixed; inset: 0; z-index: 95; }
.ctx-bd { position: absolute; inset: 0; background: rgba(10, 14, 30, .28); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); opacity: 0; transition: opacity .2s ease; }
.ctx-ov.on .ctx-bd { opacity: 1; }
.ctx-ov.off .ctx-bd { opacity: 0; transition-duration: .16s; }
.ctx-row { position: fixed; margin: 0 !important; padding: 0 !important; display: block !important; overflow: hidden; border-radius: 20px; transform: translateY(var(--from, 0)); transition: transform .32s cubic-bezier(.2, 1.15, .3, 1); pointer-events: none; }
.ctx-ov.on .ctx-row { transform: translateY(0) scale(1.02); }
.ctx-ov.off .ctx-row { opacity: 0; transition: opacity .15s; }
.ctx-row .bubble { max-width: 100% !important; width: 100%; margin: 0 !important; box-shadow: 0 12px 34px rgba(0,0,0,.22) !important; }
.ctx-row .bubble::after { display: none !important; }
.ctx-row .bot-kb, .ctx-row .reacts { pointer-events: none; }
.ctx-react { position: fixed; display: flex; gap: 2px; padding: 5px 6px; max-width: calc(100vw - 16px); overflow-x: auto; scrollbar-width: none; border-radius: 26px; background: var(--bar, var(--bg)); backdrop-filter: blur(24px) saturate(1.8); -webkit-backdrop-filter: blur(24px) saturate(1.8);
  box-shadow: 0 10px 30px rgba(0,0,0,.18), inset 0 0 0 .5px var(--hair); opacity: 0; transform: translateY(8px) scale(.9); transform-origin: bottom center; transition: opacity .2s, transform .3s cubic-bezier(.2, 1.3, .3, 1); }
.ctx-react::-webkit-scrollbar { display: none; }
.ctx-ov.on .ctx-react { opacity: 1; transform: none; transition-delay: .04s; }
.ctx-react button { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; font-size: 26px; display: grid; place-items: center; font-family: var(--font-emoji); transition: transform .15s cubic-bezier(.3, 1.6, .5, 1); }
.ctx-react button:active, .ctx-react button.picked { transform: scale(1.35); }
.ctx-react img.emo { width: 28px; height: 28px; }
.ctx-menu { position: fixed; width: min(250px, calc(100vw - 16px)); overflow-y: auto; border-radius: 16px; background: var(--bar, var(--bg)); backdrop-filter: blur(28px) saturate(1.8); -webkit-backdrop-filter: blur(28px) saturate(1.8);
  box-shadow: 0 14px 40px rgba(0,0,0,.22), inset 0 0 0 .5px var(--hair); opacity: 0; transform: scale(.85); transition: opacity .18s, transform .28s cubic-bezier(.2, 1.2, .3, 1); }
.ctx-row.out ~ .ctx-menu, .ctx-ov .ctx-row.out ~ .ctx-menu { transform-origin: top right; }
.ctx-row.in ~ .ctx-menu { transform-origin: top left; }
.ctx-ov.on .ctx-menu { opacity: 1; transform: none; }
.ctx-ov.off .ctx-menu, .ctx-ov.off .ctx-react { opacity: 0; transform: scale(.92); transition-duration: .14s; }
.ctx-menu button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 11px 16px; font-size: 16px; text-align: left; color: var(--text); }
.ctx-menu button + button { border-top: .5px solid var(--hair); }
.ctx-menu button svg { width: 21px; height: 21px; color: var(--text); opacity: .85; }
.ctx-menu button:active { background: var(--fill); }
.ctx-menu button.danger, .ctx-menu button.danger svg { color: var(--danger); }

/* Тосты */
.toast-wrap { bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
@media (min-width: 801px) { .toast-wrap { bottom: 28px !important; } }
html.k13 .toast { display: flex; align-items: center; gap: 9px; background: rgba(22, 26, 40, .82) !important; color: #fff; padding: 11px 18px !important; border-radius: 22px !important; font-size: 14.5px; font-weight: 500; backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: 0 10px 30px rgba(0,0,0,.25); animation: toastIn .35s cubic-bezier(.2, 1.3, .3, 1) !important; max-width: calc(100vw - 32px); }
html.k13 .toast.out { opacity: 0; transform: translateY(8px) scale(.96); transition: opacity .2s, transform .2s; }
@keyframes toastIn { from { opacity: 0; transform: translateY(16px) scale(.9); } }
.t-ic { width: 22px; height: 22px; border-radius: 50%; background: #34c759; display: grid; place-items: center; flex-shrink: 0; font-style: normal; }
.t-ic.err { background: #ff453a; }
.t-ic svg { width: 14px; height: 14px; stroke-width: 2.6; color: #fff; }

/* Шторки (меню снизу) как в iOS */
html.k13 .pop.sheet { padding: 0 !important; }
html.k13 .pop.sheet > *:not(.sheet-cancel) { border-radius: 0; }
html.k13 .pop.sheet > :first-child { border-top-left-radius: 16px; border-top-right-radius: 16px; }
html.k13 .pop.sheet > :nth-last-child(2) { border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; }
html.k13 .pop.sheet button:not(.sheet-cancel) { justify-content: flex-start; padding: 14px 18px !important; font-size: 16.5px !important; border-radius: 0 !important; }
html.k13 .pop.sheet button:not(.sheet-cancel) + button:not(.sheet-cancel) { box-shadow: inset 0 .5px 0 var(--hair); }
html.k13 .pop.sheet .sheet-cancel { margin-top: 8px !important; border-radius: 16px !important; background: var(--bg) !important; font-weight: 600 !important; font-size: 17px !important; padding: 15px !important; border: 0 !important; }
html.k13 .sheet-backdrop { background: rgba(10, 14, 30, .32) !important; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

@media (max-width: 800px) {
  /* Настройки на весь экран */
  html.k13 .modal-card.settings-card { max-width: none !important; width: 100%; height: calc(100% - 10px - env(safe-area-inset-top)); max-height: none !important; margin-top: auto; border-radius: 22px 22px 0 0 !important;
    padding: 12px 16px calc(24px + env(safe-area-inset-bottom)) !important; background: var(--bg-2); }
  html.k13 .modal:has(.settings-card) { align-items: flex-end; padding: 0 !important; }
  html.k13 .settings-card > h2 { font-size: 30px !important; font-weight: 800 !important; letter-spacing: -.03em; margin: 6px 0 14px !important; }
  html.k13 .settings-card > h2 [data-close] { width: 34px; height: 34px; background: var(--fill); }
  html.k13 .settings-card > h2 [data-close] svg { width: 18px; height: 18px; }
  html.k13 .settings-card .sm-group, html.k13 .settings-card .settings-sec { background: var(--bg) !important; }
  html.k13 .settings-card .set-cats button { background: var(--bg) !important; }

  /* Профиль: обложка во всю ширину */
  html.k13 .info-head { border-bottom: 0 !important; position: absolute; top: 0; left: 0; right: 0; z-index: 3; background: transparent !important; padding-top: env(safe-area-inset-top); }
  html.k13 .info-head b { color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.25); }
  html.k13 .info-head .icon-btn { color: #fff; background: rgba(0,0,0,.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  html.k13 .info .profile-cover { margin: 0 !important; border-radius: 0 0 28px 28px !important; padding: calc(64px + env(safe-area-inset-top)) 16px 22px !important; }
  html.k13 .info .profile-cover .avatar.lg { width: 108px; height: 108px; font-size: 42px; box-shadow: 0 10px 30px rgba(0,0,0,.2), 0 0 0 4px rgba(255,255,255,.35); }
  html.k13 .info .pc-name { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
  html.k13 .info-quick { margin-top: -26px; position: relative; z-index: 2; }
  html.k13 .info-quick button { background: var(--bar) !important; backdrop-filter: blur(20px) saturate(1.8); -webkit-backdrop-filter: blur(20px) saturate(1.8); box-shadow: 0 6px 18px rgba(20,28,60,.12); }

  /* Заголовок сворачивается при прокрутке */
  html.k13 .side-title { transition: font-size .22s ease, height .22s ease; }
  html.k13 .sidebar.list-scrolled .side-title { font-size: 22px !important; height: 40px !important; }
  html.k13 .sidebar.list-scrolled .side-top { box-shadow: 0 .5px 0 var(--hair); }
  html.k13 .install-banner { margin: 8px 14px 4px; }
}
.ctx-menu button { padding: 10px 16px; font-size: 15.5px; }
.ctx-react button { width: 38px; height: 38px; font-size: 25px; }
@media (max-width: 800px) {
  html.k13 .info .profile-cover { padding-bottom: 40px !important; }
  html.k13 .info-quick { margin-top: -22px; }
}

/* =====================================================================
   5.14 — скорость: меньше тяжёлых эффектов при прокрутке
   ===================================================================== */
:root[data-wall="kuvo"] .chat-bg i { filter: none; }
html.k12 .day, html.k12 .service { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: color-mix(in srgb, var(--pill) 100%, transparent) !important; box-shadow: none; }
html.k12 .bubble:not(.clear):not(.only-media) { box-shadow: 0 1px 2px rgba(20, 28, 60, .12) !important; }
html.k12[data-theme="dark"] .row.out .bubble:not(.clear):not(.only-media), html.k12:not([data-theme="dark"]) .row.out .bubble:not(.clear):not(.only-media) { box-shadow: 0 1px 3px color-mix(in srgb, var(--accent) 30%, transparent) !important; }
html.k11 .sidebar { will-change: auto; }
html.k12 .row.appear.in, html.k12 .row.appear.out { animation-duration: .28s; }
.adm-health { margin-top: 14px; background: var(--bg-2); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.hb-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .hb-head b { font-size: 15.5px; }
.hb-t { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; margin-bottom: 5px; } .hb-t span { color: var(--muted); text-align: right; }
.hb-bar { height: 8px; border-radius: 4px; background: var(--bg-3); overflow: hidden; } .hb-bar i { display: block; height: 100%; border-radius: 4px; background: #34c759; transition: width .4s; }
.hb.warn .hb-bar i { background: #ff9f0a; } .hb.bad .hb-bar i { background: #ff453a; }
.hb-note { font-size: 13px; color: var(--muted); }

/* Свайп-действия в списке чатов */
.chat-list { position: relative; }
@media (max-width: 800px) {
  html.k11 .chat-item { position: relative; z-index: 1; background: var(--bg) !important; }
  html.k11 .chat-item:active { background: var(--bg-2) !important; }
  .chat-item[data-swipe]::before { display: none !important; }
}
.sw-under { position: absolute; left: 0; right: 0; z-index: 0; display: flex; overflow: hidden; }
.sw-under.left { justify-content: flex-end; }
.sw-under.right { justify-content: flex-start; }
.sw-under button { width: 76px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; font-size: 12px; font-weight: 500; transition: width .2s cubic-bezier(.2,.9,.25,1); }
.sw-under button svg { width: 24px; height: 24px; color: #fff; }
.sw-under.left.full button:last-child, .sw-under.right.full button:first-child { width: 100%; }
.sw-under.left.full button:not(:last-child), .sw-under.right.full button:not(:first-child) { width: 0; overflow: hidden; padding: 0; }
.sw-under.left.full { justify-content: flex-start; } .sw-under.right.full { justify-content: flex-end; }
/* Карточка чата по долгому нажатию */
.chat-ctx .cc-card { position: fixed; left: 10px; right: 10px; border-radius: 18px; overflow: hidden; background: var(--bg); box-shadow: 0 14px 40px rgba(0,0,0,.25); transform: translateY(var(--from, 0)); transition: transform .32s cubic-bezier(.2,1.15,.3,1); }
.chat-ctx.on .cc-card { transform: translateY(0) scale(1.02); }
.chat-ctx.off .cc-card { opacity: 0; transition: opacity .15s; }
.chat-ctx .cc-card .chat-item { margin: 0 !important; padding-left: 12px !important; border-radius: 0 !important; background: transparent !important; }
.chat-ctx .cc-card .ci-body { border-bottom: 0 !important; }
.chat-ctx .ctx-menu { transform-origin: top left; }

/* =====================================================================
   5.14 — настройки: закруглённые группы, мелкие отступы, шапка по центру
   ===================================================================== */
.profile-cover, .acc-chip, .drawer-head, .info-top { animation: none !important; }
html.k14 .set-card { background: var(--bg-2) !important; }
html.k14[data-theme="dark"] .set-card { background: #0b0d14 !important; }
html.k14 .set-card .set-main { display: flex; flex-direction: column; gap: 0; }
/* Шапка профиля */
html.k14 .set-card .acc-chip { order: 0; flex-direction: column; text-align: center; gap: 6px; padding: 6px 12px 14px; margin: 0 0 12px; background: transparent !important; border-radius: 0 !important; }
html.k14 .set-card .acc-chip::before { display: none; }
html.k14 .set-card .acc-chip .avatar.md { width: 92px; height: 92px; font-size: 36px; box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 25%, transparent); }
html.k14 .set-card .acc-body { align-items: center; display: flex; flex-direction: column; gap: 2px; }
html.k14 .set-card .acc-name { font-size: 23px; font-weight: 700; letter-spacing: -.02em; justify-content: center; }
html.k14 .set-card .acc-login, html.k14 .set-card .acc-mail { font-size: 14.5px; justify-content: center; }
html.k14 .set-card .acc-edit { position: absolute; top: 0; right: 0; padding: 6px 12px !important; font-size: 14px !important; min-height: 0; background: var(--fill) !important; border-radius: 16px !important; box-shadow: none !important; }
html.k14 .set-card .acc-edit svg { width: 16px; height: 16px; }
/* Группы строк */
html.k14 .set-card .sm-group, html.k14 .set-card .set-cats, html.k14 .set-card .acc-list { background: var(--bg) !important; border-radius: 14px !important; overflow: hidden; margin: 0 0 16px !important; box-shadow: none; }
html.k14[data-theme="dark"] .set-card .sm-group, html.k14[data-theme="dark"] .set-card .set-cats, html.k14[data-theme="dark"] .set-card .acc-list { background: #171a24 !important; }
html.k14 .set-card .sm-item, html.k14 .set-card .set-cats button, html.k14 .set-card .acc-other { display: flex !important; flex-direction: row !important; align-items: center; gap: 14px; width: 100%; padding: 0 14px !important; min-height: 46px; border-radius: 0 !important; background: transparent !important; text-align: left !important; font-size: 16px !important; font-weight: 400 !important; transform: none !important; position: relative; color: var(--text); }
html.k14 .set-card .sm-item + .sm-item, html.k14 .set-card .set-cats button + button { border-top: 0 !important; }
html.k14 .set-card .sm-item + .sm-item::before, html.k14 .set-card .set-cats button + button::before { content: ''; position: absolute; top: 0; left: 58px; right: 0; height: .5px; background: var(--hair); }
html.k14 .set-card .sm-item:active, html.k14 .set-card .set-cats button:active, html.k14 .set-card .acc-other:active { background: var(--fill) !important; }
html.k14 .set-card .sm-item i, html.k14 .set-card .set-cats i { width: 30px !important; height: 30px !important; border-radius: 8px !important; box-shadow: none !important; flex-shrink: 0; }
html.k14 .set-card .sm-item i svg, html.k14 .set-card .set-cats i svg { width: 18px !important; height: 18px !important; }
html.k14 .set-card .set-cats { display: flex !important; flex-direction: column; gap: 0 !important; padding: 0 !important; }
html.k14 .set-card .set-cats span { flex: 1; }
html.k14 .set-card .set-cats button::after { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-top: 2px solid var(--muted); transform: rotate(45deg); opacity: .6; margin-right: 4px; }
html.k14 .set-card .sm-item > svg.rot { width: 16px; height: 16px; opacity: .7; }
html.k14 .set-card .acc-list { gap: 0 !important; }
html.k14 .set-card .acc-other.add i { width: 30px; height: 30px; border-radius: 8px; }
html.k14 .set-card .acc-other.add b { font-weight: 400; font-size: 16px; }
html.k14 .set-card .sm-badge { font-style: normal; font-size: 13px; color: var(--muted); background: none !important; }
/* Порядок групп как в привычных мессенджерах */
html.k14 .set-card .acc-list { order: 1; }
html.k14 .set-card .sm-group:has([data-sm="profile"]) { order: 2; }
html.k14 .set-card .set-cats { order: 3; }
html.k14 .set-card .sm-group:has([data-sm="premium"]) { order: 4; }
html.k14 .set-card .sm-group:has([data-sm2="gifts"]) { order: 5; }
html.k14 .set-card .sm-group:has([data-sm3="family"]) { order: 6; }
html.k14 .set-card .sm-group:has([data-sm="group"]) { order: 7; }
html.k14 .set-card .sm-group:has([data-sm="admin"]) { order: 8; }
html.k14 .set-card .set-main > .settings-sec { order: 9; background: transparent !important; text-align: center; }
html.k14 .set-card .set-main > .settings-sec .btn.danger { width: 100%; background: var(--bg) !important; color: var(--danger) !important; box-shadow: none !important; border-radius: 14px; font-weight: 500; }
html.k14 .set-card .set-page .settings-sec { background: var(--bg) !important; border-radius: 14px !important; }
html.k14[data-theme="dark"] .set-card .set-page .settings-sec { background: #171a24 !important; }

/* ===== 5.14: Маркет ===== */
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .02em; }
.mk-modal { padding-bottom: 12px !important; }
.mk-h svg { color: #fc8a1a !important; }
.mk-hero { border-radius: 18px; padding: 16px; margin-bottom: 12px; color: #fff; background: radial-gradient(circle at 15% 20%, rgba(255,255,255,.25), transparent 45%), linear-gradient(135deg, #f7b733, #fc4a1a 45%, #8e2de2); display: flex; flex-direction: column; gap: 4px; box-shadow: 0 10px 28px rgba(252, 74, 26, .25); }
.mk-hero b { font-size: 18px; font-weight: 800; letter-spacing: -.02em; } .mk-hero span { font-size: 13.5px; opacity: .92; line-height: 1.45; }
.mk-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 10px; }
.mk-tabs button { flex-shrink: 0; display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 20px; background: var(--bg-2); font-weight: 600; font-size: 14px; color: var(--muted); }
.mk-tabs button svg { width: 17px; height: 17px; }
.mk-tabs button.active { background: var(--grad, var(--accent)); color: #fff; box-shadow: var(--glow); }
.mk-bar { display: flex; gap: 8px; margin-bottom: 12px; } .mk-search { flex: 1; height: 40px !important; } .mk-sort { width: auto; max-width: 170px; }
.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.mk-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px 12px; border-radius: 18px; background: var(--bg-2); text-align: center; transition: transform .15s cubic-bezier(.3,1.5,.5,1), box-shadow .15s; position: relative; overflow: hidden; }
.mk-card:active { transform: scale(.96); }
.mk-card:hover { box-shadow: 0 8px 22px rgba(20,28,60,.12); }
.mk-ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: #fff; }
.mk-ico svg { width: 26px; height: 26px; }
.mk-ico.lg { width: 84px; height: 84px; border-radius: 26px; } .mk-ico.lg svg { width: 40px; height: 40px; }
.mk-number { background: linear-gradient(135deg, #22c1ff, #4f7cff); } .mk-username { background: linear-gradient(135deg, #8e2de2, #ff5fa2); } .mk-kid { background: linear-gradient(135deg, #f7b733, #fc4a1a); }
.mk-val { font-size: 16px; font-weight: 700; letter-spacing: -.01em; word-break: break-all; }
.mk-val.mono { font-size: 14.5px; }
.mk-own { font-size: 12px; color: var(--muted); }
.mk-price { margin-top: 2px; padding: 5px 12px; border-radius: 12px; background: var(--grad, var(--accent)); color: #fff; font-weight: 700; font-size: 13.5px; }
.mk-price.off { background: var(--bg-3); color: var(--muted); font-weight: 500; }
.mk-gift { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; font-size: 36px; box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.mk-gift.sm { width: 44px; height: 44px; border-radius: 14px; font-size: 24px; flex-shrink: 0; } .mk-gift.lg { width: 110px; height: 110px; border-radius: 32px; font-size: 64px; }
.mk-serial { font-size: 12px; color: var(--muted); }
.mk-skel { display: block; height: 170px; border-radius: 18px; background: linear-gradient(90deg, var(--bg-2), var(--bg-3), var(--bg-2)); background-size: 200% 100%; animation: mkShimmer 1.2s linear infinite; }
@keyframes mkShimmer { to { background-position: -200% 0; } }
.mk-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 36px 16px; color: var(--muted); }
.mk-empty svg { width: 44px; height: 44px; opacity: .6; } .mk-empty b { color: var(--text); font-size: 16px; }
.mk-sub { font-weight: 700; font-size: 14px; margin: 14px 0 8px; }
.mk-list { display: flex; flex-direction: column; gap: 6px; }
.mk-gr { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 14px; background: var(--bg-2); }
.mk-gr .grow { display: flex; flex-direction: column; min-width: 0; }
.mk-earn { margin-top: 14px; display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: 14px; background: color-mix(in srgb, #34c759 12%, transparent); font-size: 14px; }
.mk-earn svg { color: #34c759; }
.mk-sheet-wrap { align-items: flex-end !important; }
@media (min-width: 801px) { .mk-sheet-wrap { align-items: center !important; } }
.mk-sheet { background: var(--bg); width: min(440px, 100%); border-radius: 26px 26px 0 0; padding: 22px 18px calc(18px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; animation: sheetUp .3s cubic-bezier(.2,.9,.3,1); box-shadow: 0 -10px 40px rgba(0,0,0,.2); }
@media (min-width: 801px) { .mk-sheet { border-radius: 26px; } }
.mk-show { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.mk-show b { font-size: 24px; font-weight: 800; letter-spacing: -.02em; word-break: break-all; } .mk-show b.mono { font-size: 21px; } .mk-show > span { color: var(--muted); font-size: 14px; }
.mk-hint { font-size: 14px; color: var(--muted); line-height: 1.45; text-align: center; margin: 0; }
.mk-rows { background: var(--bg-2); border-radius: 14px; overflow: hidden; }
.mk-rows > div { display: flex; justify-content: space-between; padding: 12px 14px; font-size: 15px; } .mk-rows > div + div { box-shadow: inset 0 .5px 0 var(--hair); } .mk-rows span { color: var(--muted); }
.mk-acts { display: flex; flex-direction: column; gap: 8px; } .mk-acts .btn { width: 100%; justify-content: center; }
.mk-buy { font-size: 16px !important; padding: 15px !important; }
.mk-adm-form { display: flex; flex-direction: column; gap: 8px; }
.mk-adm-row { display: flex; gap: 8px; } .mk-adm-row > * { flex: 1; min-width: 0; }
.mk-adm-gifts { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 10px; }
.mk-ag { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 6px; border-radius: 14px; background: var(--bg-2); text-align: center; }
.mk-ag span { font-size: 30px; } .mk-ag b { font-size: 13px; } .mk-ag small { font-size: 11.5px; color: var(--muted); }
.mk-ag:disabled { opacity: .45; }
.mk-adm-list { display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow-y: auto; }
.mk-adm-it { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: 12px; background: var(--bg-2); }
.mk-adm-it > span { flex: 1; font-size: 13px; min-width: 120px; }
.mk-adm-btns { display: flex; gap: 4px; flex-wrap: wrap; }
.mk-sale { display: flex; gap: 10px; justify-content: space-between; font-size: 13.5px; padding: 6px 0; border-bottom: .5px solid var(--hair); }
@media (max-width: 600px) { .mk-sort { max-width: 118px; font-size: 13px; padding: 0 8px; } .mk-bar .mk-search input { font-size: 15px; } }
@media (max-width: 800px) { html.k14 .chat-item:active { transform: none; } }

/* =====================================================================
   5.15 — рамки аватаров, профиль 2.0, магазин
   ===================================================================== */
@keyframes frSpin { to { transform: rotate(360deg); } }
@keyframes frPulse { 50% { opacity: .55; transform: scale(1.04); } }
.avatar.fr { overflow: visible; }
.avatar.fr::before { content: ''; position: absolute; inset: -9%; border-radius: 50%; pointer-events: none; z-index: 1; }
.avatar.fr-halo::before { border: 2px solid var(--fc); box-shadow: 0 0 10px color-mix(in srgb, var(--fc) 70%, transparent); }
.avatar.fr-neon::before { border: 2.5px solid var(--fc); box-shadow: 0 0 10px var(--fc), inset 0 0 6px var(--fc); animation: frPulse 2.6s ease-in-out infinite; }
.avatar.fr-flame::before { inset: -12%; background: conic-gradient(from 0deg, var(--fc), #ffd000 12%, transparent 26%, var(--fc) 42%, #ff9500 56%, transparent 72%, #ffd000 86%, var(--fc));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px)); animation: frSpin 2.8s linear infinite; filter: drop-shadow(0 0 4px var(--fc)); }
.avatar.fr-ocean::before { inset: -11%; background: conic-gradient(var(--fc), #7fe9ff 20%, var(--fc) 40%, #0a3d7a 60%, #7fe9ff 80%, var(--fc));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px)); animation: frSpin 7s linear infinite; }
.avatar.fr-galaxy::before { inset: -11%; background: conic-gradient(#ff5fa2, #b04dff, #4f7cff, #22c1ff, #34c759, #ffd000, #ff5fa2);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px)); animation: frSpin 4s linear infinite; box-shadow: 0 0 12px color-mix(in srgb, var(--fc) 60%, transparent); }
.avatar.fr-rose::before { inset: -12%; border: 3.5px dotted var(--fc); animation: frSpin 16s linear infinite; filter: drop-shadow(0 0 3px var(--fc)); }
.avatar.fr-laurel::before { inset: -13%; background: repeating-conic-gradient(from 20deg, var(--fc) 0 7deg, transparent 7deg 16deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px)), conic-gradient(transparent 0 25deg, #000 25deg 335deg, transparent 335deg); -webkit-mask-composite: source-in;
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px)) intersect, conic-gradient(transparent 0 25deg, #000 25deg 335deg, transparent 335deg); }
.avatar.fr-night::before { inset: -12%; border: 2px solid color-mix(in srgb, var(--fc) 80%, transparent);
  background: radial-gradient(circle at 12% 78%, #fff 0 11%, transparent 12%), radial-gradient(circle at 24% 90%, #fff 0 9%, transparent 10%), radial-gradient(circle at 86% 18%, #fff 0 10%, transparent 11%), radial-gradient(circle at 94% 32%, #fff 0 7%, transparent 8%), radial-gradient(circle at 90% 80%, #fff 0 6%, transparent 7%);
  box-shadow: 0 0 14px color-mix(in srgb, var(--fc) 55%, transparent); }
.avatar.fr-crown { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--fc), 0 0 14px color-mix(in srgb, var(--fc) 60%, transparent); }
.avatar.fr-crown::before { content: '👑'; inset: auto; top: -0.95em; left: 50%; transform: translateX(-50%) rotate(-12deg); font-size: .78em; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); font-family: var(--font-emoji); }
.avatar.lg.fr-crown::before { font-size: .7em; top: -.9em; }
.avatar.fr-ghost { box-shadow: 0 0 0 2px var(--fc), 0 0 18px 4px color-mix(in srgb, var(--fc) 55%, transparent); }
.avatar.fr-ghost::before { inset: -14%; background: radial-gradient(closest-side, transparent 70%, color-mix(in srgb, var(--fc) 45%, transparent)); animation: frPulse 3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .avatar.fr::before { animation: none !important; } }

/* Профиль 2.0 */
.modal-card.p2-card { padding: 0 !important; overflow-x: hidden; max-width: 460px; background: var(--bg) !important; }
html.k12[data-theme="dark"] .modal-card.p2-card { background: #0f121b !important; }
.p2 { position: relative; padding-bottom: 14px; }
.p2-cover { height: 150px; background-size: cover; background-position: center; position: relative; }
.p2-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.1), transparent 45%, var(--bg)); }
html.k12[data-theme="dark"] .p2-cover::after { background: linear-gradient(180deg, rgba(0,0,0,.15), transparent 45%, #0f121b); }
.p2-top { position: absolute; top: calc(10px + env(safe-area-inset-top)); left: 12px; right: 12px; display: flex; justify-content: flex-end; align-items: center; gap: 8px; z-index: 3; }
.p2-top .icon-btn { background: rgba(0,0,0,.3); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.p2-self { margin-right: auto; font-size: 12.5px; color: #fff; background: rgba(0,0,0,.3); padding: 5px 10px; border-radius: 12px; }
.p2-ava { position: relative; width: 120px; height: 120px; margin: -70px auto 0; z-index: 2; }
.p2-ava .avatar.lg { width: 120px; height: 120px; box-shadow: 0 0 0 4px var(--bg); }
html.k12[data-theme="dark"] .p2-ava .avatar.lg:not(.fr-crown):not(.fr-ghost) { box-shadow: 0 0 0 4px #0f121b; }
@keyframes orbFloat { 50% { transform: translate(-50%, -50%) translateY(-6px) rotate(6deg); } }
.p2-orb { position: absolute; left: 50%; top: 50%; font-size: 30px; font-family: var(--font-emoji); filter: drop-shadow(0 4px 8px rgba(0,0,0,.35)); animation: orbFloat 3.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.6s); z-index: 3;
  --r: 96px; transform: translate(-50%, -50%); }
.p2-orb.o0 { margin: calc(var(--r) * -.62) 0 0 calc(var(--r) * -.95); } .p2-orb.o1 { margin: calc(var(--r) * -.62) 0 0 calc(var(--r) * .95); }
.p2-orb.o2 { margin: calc(var(--r) * .22) 0 0 calc(var(--r) * -1.12); } .p2-orb.o3 { margin: calc(var(--r) * .22) 0 0 calc(var(--r) * 1.12); }
.p2-orb.o4 { margin: calc(var(--r) * .88) 0 0 calc(var(--r) * -.72); } .p2-orb.o5 { margin: calc(var(--r) * .88) 0 0 calc(var(--r) * .72); }
.p2-orb img.emo { width: 32px; height: 32px; }
.p2-name { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 14px; font-size: 24px; font-weight: 800; letter-spacing: -.02em; padding: 0 16px; text-align: center; }
.p2-es { font-size: 22px; font-family: var(--font-emoji); }
.p2-status { display: table; margin: 8px auto 0; padding: 4px 12px; border-radius: 14px; background: var(--fill); font-size: 13.5px; color: var(--muted); }
.p2-status.on { color: var(--accent); }
.p2-acts { display: flex; gap: 8px; padding: 14px 16px 4px; }
.p2-acts button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 11px 4px 9px; border-radius: 16px; background: var(--bg-2); font-size: 12.5px; font-weight: 500; color: var(--text); transition: transform .12s; }
.p2-acts button:active { transform: scale(.95); }
.p2-acts svg { width: 22px; height: 22px; color: var(--accent); }
html.k12[data-theme="dark"] .p2-acts button { background: #1a1f2c; }
.p2-song, .p2-chan { margin: 10px 16px 0; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 18px; cursor: pointer; }
.p2-song { background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 22%, var(--bg-2)), var(--bg-2)); }
.p2-disc { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: linear-gradient(135deg, #ff5fa2, #b04dff); flex-shrink: 0; }
.p2-song.playing .p2-disc { animation: frSpin 3s linear infinite; border-radius: 50%; }
.p2-song .grow, .p2-chan .grow { display: flex; flex-direction: column; min-width: 0; }
.p2-song b, .p2-chan b { font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p2-song .grow span, .p2-chan .grow span { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p2-dur { font-size: 13px; color: var(--muted); font-weight: 600; }
.p2-play { width: 38px; height: 38px; border-radius: 50%; background: var(--grad, var(--accent)); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.p2-play svg { width: 18px; height: 18px; margin-left: 2px; }
.p2-chan { background: var(--bg-2); }
html.k12[data-theme="dark"] .p2-chan, html.k12[data-theme="dark"] .p2-song { background: #1a1f2c; }
.p2-chan em { font-style: normal; font-size: 12px; padding: 4px 9px; border-radius: 10px; background: var(--fill); color: var(--muted); white-space: nowrap; }
.p2-info { margin: 12px 16px 0 !important; padding: 2px 0 !important; background: var(--bg-2); border-radius: 18px; }
html.k12[data-theme="dark"] .p2-info { background: #1a1f2c; }
.p2-info .info-row { padding: 10px 14px !important; }
.p2-info .info-row + .info-row { box-shadow: inset 0 .5px 0 var(--hair); }
.p2-info .info-row > svg { display: none; }
.p2-big { font-size: 16.5px; font-weight: 600; }
.p2-also { font-size: 13.5px; color: var(--muted); margin-top: 2px; line-height: 1.4; } .p2-also b { color: var(--accent); font-weight: 500; }
.p2-badges { display: flex; gap: 6px; flex-wrap: wrap; font-size: 22px; font-family: var(--font-emoji); }
.p2-meta .grow { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 13.5px; color: var(--muted); }
.p2-meta span { display: inline-flex; align-items: center; gap: 5px; } .p2-meta svg { width: 15px; height: 15px; } .p2-meta b { color: var(--text); font-weight: 600; }
.p2 #ucGifts { display: none !important; }
.p2-tabs { display: flex; margin: 14px 16px 8px; border-bottom: .5px solid var(--hair); }
.p2-tabs button { padding: 8px 4px 10px; font-weight: 700; font-size: 15px; position: relative; }
.p2-tabs button.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 3px; background: var(--grad, var(--accent)); }
.p2-tabs em { font-style: normal; font-size: 12px; color: var(--muted); font-weight: 500; margin-left: 4px; }
.p2-gifts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 16px; }
.p2-gift { position: relative; aspect-ratio: 1; border-radius: 18px; display: grid; place-items: center; background: color-mix(in srgb, var(--bg-2) 70%, transparent); overflow: hidden; }
.p2-gift::before { content: ''; position: absolute; inset: 0; background: var(--gbg); opacity: .22; }
.p2-gift.lux { box-shadow: inset 0 0 0 1.5px #ffc400, 0 0 16px rgba(255,196,0,.18); }
.p2-gift span { position: relative; font-size: 44px; font-family: var(--font-emoji); filter: drop-shadow(0 4px 8px rgba(0,0,0,.25)); }
.p2-gift span img.emo { width: 48px; height: 48px; }
.p2-gift small { position: absolute; top: 6px; right: 8px; font-size: 11px; font-weight: 700; color: var(--muted); }
.p2-pin { position: absolute; top: 6px; left: 6px; width: 20px; height: 20px; border-radius: 50%; background: rgba(0,0,0,.35); display: grid; place-items: center; }
.p2-pin svg { width: 11px; height: 11px; color: #fff; }
.p2-empty { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 22px 8px; font-size: 14px; }
.p2-extra { padding: 12px 16px 0; justify-content: center; } .p2-extra:empty { display: none; }
.p2 .bday-card, .p2 .closed-card { margin: 10px 16px 0; }
.p2 .info-list:not(.p2-info) { margin: 8px 16px 0 !important; }

/* Магазин */
.shop-h svg { color: #22c1ff !important; }
.shop-top { display: flex; align-items: center; gap: 8px; padding: 14px; border-radius: 18px; margin-bottom: 12px; color: #fff; background: radial-gradient(circle at 85% 20%, rgba(255,255,255,.28), transparent 40%), linear-gradient(135deg, #22c1ff, #4f7cff 50%, #b04dff); box-shadow: 0 10px 28px rgba(79,124,255,.3); }
.shop-top .shop-bal { display: flex; flex-direction: column; margin-right: auto; } .shop-top .shop-bal span { font-size: 12.5px; opacity: .85; } .shop-top .shop-bal b { font-size: 24px; font-weight: 800; }
.shop-top .btn { background: #fff !important; color: #4f7cff !important; box-shadow: none !important; }
.shop-top .btn.ghost { background: rgba(255,255,255,.2) !important; color: #fff !important; }
.shop-tabs { display: flex; gap: 6px; background: var(--bg-2); padding: 4px; border-radius: 14px; margin-bottom: 8px; }
.shop-tabs button { flex: 1; padding: 9px; border-radius: 11px; font-weight: 700; color: var(--muted); }
.shop-tabs button.active { background: var(--bg); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.shop-hint { font-size: 13px; color: var(--muted); margin: 4px 2px 12px; line-height: 1.4; }
.fr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.fr-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 10px 12px; border-radius: 20px; background: var(--bg-2); border: 2px solid transparent; }
.fr-card.on { border-color: var(--accent); }
.fr-prev { height: 78px; display: grid; place-items: center; }
.fr-prev .avatar.md { width: 58px; height: 58px; font-size: 22px; }
.fr-card b { font-size: 15px; }
.fr-colors { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
.fr-c { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); cursor: pointer; position: relative; overflow: hidden; }
.fr-c.sel { box-shadow: 0 0 0 2px var(--bg-2), 0 0 0 4px var(--text); }
.fr-any { background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); }
.fr-any input { opacity: 0; position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.fr-card .btn { width: 100%; justify-content: center; }
.shg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.shg { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 8px 10px; border-radius: 20px; background: var(--bg-2); transition: transform .15s; }
.shg:active { transform: scale(.95); }
.shg.ltd { box-shadow: inset 0 0 0 1.5px #ff9f0a; } .shg.lux { box-shadow: inset 0 0 0 1.5px #ffc400, 0 0 18px rgba(255,196,0,.16); }
.shg:disabled { opacity: .45; }
.shg em { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 10.5px; font-weight: 700; color: #ff9f0a; white-space: nowrap; }
.shg-e { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; font-size: 32px; font-family: var(--font-emoji); }
.shg b { font-size: 13px; text-align: center; line-height: 1.2; }
.shg-p { font-size: 12.5px; font-weight: 700; padding: 3px 9px; border-radius: 10px; background: var(--fill); }
.shop-gem { font-size: 56px; font-family: var(--font-emoji); }
.cr-packs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cr-packs button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 8px; border-radius: 16px; background: var(--bg-2); }
.cr-packs b { font-size: 17px; font-weight: 800; } .cr-packs span { font-size: 13px; color: var(--muted); }
.cr-packs em { position: absolute; top: 6px; right: 8px; font-style: normal; font-size: 11px; font-weight: 700; color: #fff; background: #34c759; padding: 1px 6px; border-radius: 8px; }
/* Оформление профиля */
.ps-sec { background: var(--bg-2); border-radius: 18px; padding: 12px 14px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 8px; }
.ps-sec.ps-row { flex-direction: row; background: transparent; padding: 0; }
.ps-sec.ps-row .btn { flex: 1; justify-content: center; }
.ps-t { font-weight: 700; font-size: 14.5px; }
.ps-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ps-hint { font-size: 13px; margin: 0; }
.ps-cover { height: 96px; border-radius: 14px; background: var(--bg-3) center / cover; display: grid; place-items: center; color: var(--muted); font-size: 13px; }
.ps-song { font-size: 14.5px; }
.ps-gifts { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 8px; }
.ps-g { position: relative; aspect-ratio: 1; border-radius: 16px; display: grid; place-items: center; background: var(--bg); border: 2px solid transparent; overflow: hidden; }
.ps-g::before { content: ''; position: absolute; inset: 0; background: var(--gbg); opacity: .2; }
.ps-g span { position: relative; font-size: 30px; font-family: var(--font-emoji); }
.ps-g small { position: absolute; bottom: 3px; right: 5px; font-size: 10px; color: var(--muted); font-weight: 700; }
.ps-g.on { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.shop-top .shop-bal b { white-space: nowrap; font-size: 21px; } .shop-top { flex-wrap: wrap; } .shop-top .btn.sm { font-size: 12.5px !important; }
/* 5.16: конструктор Маркета */
.mk-maker h3 { margin-bottom: 10px; }
.mk-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; }
.mk-seg button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 4px; border-radius: 14px; background: var(--bg-2); font-weight: 600; font-size: 13px; color: var(--muted); }
.mk-seg button i { font-style: normal; font-size: 18px; font-weight: 800; color: var(--text); }
.mk-seg button.on { background: var(--grad, var(--accent)); color: #fff; box-shadow: var(--glow); } .mk-seg button.on i { color: #fff; }
.mk-live { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px; border-radius: 18px; background: var(--bg-2); margin-bottom: 10px; text-align: center; }
.mk-live b { font-size: 24px; font-weight: 800; word-break: break-all; } .mk-live b.mono { font-size: 22px; } .mk-live span { font-size: 12.5px; color: var(--muted); }
.mk-gift.luxb { box-shadow: 0 0 0 3px #ffc400, 0 0 24px rgba(255,196,0,.4); }
.mk-pref, .mk-sugg { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.mk-pref button, .mk-sugg button { padding: 6px 12px; border-radius: 14px; background: var(--bg-2); font-weight: 600; font-size: 14px; }
.mk-pref button.on { background: var(--accent); color: #fff; }
.mk-sugg button { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-size: 13px; }
.mk-in { display: flex; gap: 8px; margin-bottom: 8px; } .mk-in .field { flex: 1; min-width: 0; font-size: 16px; }
.mk-in #mkRnd { font-size: 22px; padding: 0 16px; }
.mk-maker > .field { width: 100%; margin-bottom: 8px; }
.mk-go { display: flex; gap: 8px; margin: 4px 0 8px; } .mk-go .btn { flex: 1; justify-content: center; }
.mk-bulk { margin-top: 6px; } .mk-bulk summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 14px; padding: 4px 0; } .mk-bulk textarea { width: 100%; margin: 6px 0; }
.mk-emo { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 4px; margin-bottom: 8px; }
.mk-emo button { height: 40px; border-radius: 12px; font-size: 22px; font-family: var(--font-emoji); background: var(--bg-2); }
.mk-emo button.on { box-shadow: 0 0 0 2px var(--accent); }
.mk-bgs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.mk-bgs button { width: 34px; height: 34px; border-radius: 10px; } .mk-bgs button.on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text); }
.mk-mygifts { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.mk-gift img.emo, .shg-e img.emo, .p2-gift img.emo, .ps-g img.emo, .mk-ag img.emo { width: .92em !important; height: .92em !important; }
.mk-auto { font-style: normal; font-size: 13.5px; font-weight: 700; color: #34c759; min-height: 1em; } .mk-auto.bad { color: var(--danger); }
.mk-sugg button { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.15; } .mk-sugg button small { font-size: 11px; font-weight: 600; opacity: .75; font-family: var(--font-text); }

/* ===== 5.20: маскот Куви на экране входа ===== */
.auth-logo.kv-host { position: relative; display: flex; justify-content: center; margin-bottom: 6px; }
svg.kuvi { width: 180px; height: 190px; overflow: visible; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.kuvi * { transform-box: view-box; }
.kuvi .kv-all { transform-origin: 100px 190px; animation: kvBob 2.8s ease-in-out infinite; }
@keyframes kvBob { 50% { transform: translateY(-6px); } }
.kuvi .kv-shadow { transform-origin: 100px 198px; animation: kvShadow 2.8s ease-in-out infinite; }
@keyframes kvShadow { 50% { transform: scaleX(.86); opacity: .12; } }
.kuvi .kv-tuft { transform-origin: 104px 60px; animation: kvTuft 3.2s ease-in-out infinite; }
@keyframes kvTuft { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(7deg); } }
.kuvi .kv-lid { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); animation: kvBlink 4.6s infinite; }
@keyframes kvBlink { 0%, 91%, 100% { transform: scaleY(0); } 94%, 96% { transform: scaleY(1); } }
.kuvi .kv-pupils { transition: transform .25s cubic-bezier(.3, 1.4, .5, 1); }
.kuvi .kv-wl { transform-origin: 46px 120px; animation: kvFlapL 2.8s ease-in-out infinite; transition: transform .45s cubic-bezier(.3, 1.3, .5, 1); }
.kuvi .kv-wr { transform-origin: 154px 120px; animation: kvFlapR 2.8s ease-in-out infinite; transition: transform .45s cubic-bezier(.3, 1.3, .5, 1); }
@keyframes kvFlapL { 50% { transform: rotate(8deg); } }
@keyframes kvFlapR { 50% { transform: rotate(-8deg); } }
.kuvi.wave .kv-wr { animation: kvWave .5s ease-in-out infinite alternate; }
@keyframes kvWave { from { transform: rotate(-20deg); } to { transform: rotate(-75deg); } }
.kuvi .kv-spark { animation: kvSpark 1.6s ease-in-out infinite; transform-origin: 170px 50px; }
@keyframes kvSpark { 50% { opacity: .2; transform: scale(.85); } }
.kuvi .kv-m-sad, .kuvi .kv-m-o, .kuvi .kv-sweat, .kuvi .kv-happy-eyes, .kuvi .kv-key, .kuvi .kv-hearts { opacity: 0; transition: opacity .2s; }
.kuvi .kv-happy-eyes { opacity: 0; }
/* Закрывает глаза крыльями, пока вводится пароль */
.kuvi.cover .kv-wl { animation: none; transform: rotate(-172deg) scale(1.45); }
.kuvi.cover .kv-wr { animation: none; transform: rotate(172deg) scale(1.45); }
.kuvi.cover .kv-m-happy { opacity: 0; } .kuvi.cover .kv-m-o { opacity: 1; }
.kuvi.cover .kv-blush ellipse { opacity: .85; }
.kuvi.cover.peek .kv-wl { transform: rotate(-110deg) scale(1.2); }
.kuvi.cover.peek .kv-pupils { transform: translate(-3px, 5px) !important; }
/* Ошибка: грустит, качает головой, капелька */
.kuvi.sad .kv-body { animation: kvShake .5s ease-in-out 2; transform-origin: 100px 180px; }
@keyframes kvShake { 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
.kuvi.sad .kv-m-happy { opacity: 0; } .kuvi.sad .kv-m-sad, .kuvi.sad .kv-sweat { opacity: 1; }
.kuvi.sad .kv-pupils { transform: translate(0, 5px) !important; }
.kuvi.sad .kv-tuft { animation: none; transform: rotate(-18deg); }
/* Радость: регистрация, поглаживание */
.kuvi.happy .kv-all { animation: kvHop 1.1s ease-in-out infinite; }
@keyframes kvHop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-12px) scaleY(1.03); } 60% { transform: translateY(0) scaleY(.96); } }
.kuvi.love .kv-pupils, .kuvi.love .kv-lids { opacity: 0; } .kuvi.love .kv-happy-eyes { opacity: 1; }
.kuvi.love .kv-eyes > ellipse { opacity: 0; }
.kuvi.love .kv-hearts { opacity: 1; animation: kvHearts 1.4s ease-out; }
@keyframes kvHearts { from { transform: translateY(20px) scale(.6); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(-26px) scale(1.1); opacity: 0; } }
.kuvi.love .kv-all, .kuvi.jump .kv-all { animation: kvJump .7s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes kvJump { 40% { transform: translateY(-22px) rotate(-4deg); } }
/* По приглашению: держит табличку с ключом */
.kuvi.key .kv-key { opacity: 1; transform-origin: 160px 110px; animation: kvSign 2s ease-in-out infinite; }
@keyframes kvSign { 50% { transform: rotate(-6deg); } }
.kuvi.key .kv-wr { animation: none; transform: rotate(-58deg); }
.kv-say { position: absolute; left: 50%; top: -6px; transform: translate(-50%, -100%) scale(.8); background: var(--bg); color: var(--text); padding: 8px 14px; border-radius: 16px; font-size: 14px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 8px 24px rgba(20, 30, 70, .18), 0 0 0 1px var(--hair, rgba(0,0,0,.06)); opacity: 0; pointer-events: none; transition: opacity .2s, transform .3s cubic-bezier(.3, 1.5, .5, 1); z-index: 2; }
.kv-say::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.kv-say.on { opacity: 1; transform: translate(-50%, -100%) scale(1); }
@media (max-width: 400px) { .kv-say { white-space: normal; width: max-content; max-width: 250px; text-align: center; } }
@media (prefers-reduced-motion: reduce) { .kuvi * { animation: none !important; } }
svg.kuvi { width: 196px; height: 206px; } .kv-say { max-width: 280px; }

/* ---------- 5.21: подарки за кристаллы, категории, коллекционные предметы в настройках ---------- */
.gd-bal { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin: 0 0 10px; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, #6a5cff 16%, var(--bg-2)), color-mix(in srgb, #4facfe 12%, var(--bg-2))); }
.gd-bal span { color: var(--text-2, var(--muted)); font-size: 13px; }
.gd-bal b { flex: 1; font-size: 17px; }
.gd-cats { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 10px; margin-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.gd-cats::-webkit-scrollbar { display: none; }
.gd-cats button { flex: none; border: 0; font: inherit; font-size: 13.5px; font-weight: 600; padding: 7px 13px; border-radius: 99px; background: var(--bg-2); color: var(--text); cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; }
.gd-cats button em { font-style: normal; font-weight: 500; opacity: .55; margin-left: 2px; font-size: 12px; }
.gd-cats button.on { background: var(--accent); color: #fff; }
.gd-cats button.on em { opacity: .85; }
.gift-tile.luxt { box-shadow: 0 0 0 2px #ffd76a, 0 8px 22px rgba(255,190,60,.35); }
.gift-tile.luxt::after { content: ''; position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%); animation: luxShine 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes luxShine { 0% { transform: translateX(-60%); } 60%, 100% { transform: translateX(60%); } }
.acc-coll { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.acc-coll:empty { display: none; }
.acc-tag { border: 0; font: inherit; font-size: 12.5px; font-weight: 600; padding: 3px 9px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); cursor: pointer; }
.acc-tag .mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .02em; }
html.k14 .set-card .acc-chip .acc-coll { justify-content: center; }
.mk-auto { margin-top: 14px; padding: 12px 14px; border-radius: 16px; background: var(--bg-2); }
.mk-auto .mk-sub { margin-top: 0; }
.mk-auto .mk-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.mk-auto select { font: inherit; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--border, rgba(127,127,127,.25)); background: var(--bg); color: var(--text); }
@media (prefers-reduced-motion: reduce) { .gift-tile.luxt::after { animation: none; display: none; } }
.mk-auto .mk-sub, .mk-auto .set-row > span { color: var(--text) !important; } .mk-auto .set-row small { color: var(--muted, #888) !important; font-weight: 400; }
.mk-in #mkNice { font-size: 20px; padding: 0 14px; }
.mk-seed { display: flex; align-items: center; gap: 6px; margin: 8px 0 4px; padding: 8px 12px; border-radius: 14px; background: var(--bg-2); font-size: 13px; }
.mk-seed span { flex: 1; color: var(--text); }
.mk-pref { flex-wrap: wrap; }

/* ---------- 5.23: панель профиля в чате — коллекция, значки, подарки ---------- */
.pc-num { font-size: 17px; font-weight: 700; letter-spacing: .03em; }
.pc-kid { font-size: 16px; }
.pc-tag { font-size: 18px; opacity: .9; }
.pc-names { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 2px; }
.pc-names button { border: 0; font: inherit; font-weight: 600; font-size: 14px; padding: 3px 10px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent); cursor: pointer; }
.pc-coll { position: relative; }
.pc-coll:first-child { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%); }
.pc-extra { margin: 10px 12px 4px; padding: 12px; border-radius: 18px; background: var(--bg-2); }
.pc-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.pc-badges span { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; padding: 4px 10px 4px 6px; border-radius: 99px; background: var(--bg); box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.pc-badges i { font-style: normal; font-size: 14px; }
.pc-gifts-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.pc-gifts-h b { font-size: 15px; } .pc-gifts-h em { font-style: normal; color: var(--muted, #888); font-weight: 500; margin-left: 3px; }
.pc-gifts { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; }
.pc-gifts .p2-gift { cursor: pointer; }
.pc-empty { grid-column: 1 / -1; text-align: center; color: var(--muted, #888); font-size: 13px; padding: 12px 0; }
.pc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 12px; font-size: 12.5px; color: var(--muted, #888); }
.pc-meta span { display: inline-flex; align-items: center; gap: 4px; } .pc-meta .icon { width: 14px; height: 14px; }
.pc-meta .click { cursor: pointer; font-weight: 600; }
.pc-full { margin-left: auto; border: 0; background: none; font: inherit; font-weight: 600; color: var(--accent); cursor: pointer; display: inline-flex; align-items: center; gap: 2px; padding: 0; }
.pc-full .icon { width: 14px; height: 14px; }
.pc-gifts .p2-gift { border-radius: 14px; } .pc-gifts .p2-gift span { font-size: 30px; } .pc-gifts .p2-gift span img.emo { width: 32px; height: 32px; } .pc-gifts .p2-gift small { font-size: 9px; }
.mk-chips { display: flex; align-items: center; gap: 6px; margin: -4px 0 12px; overflow-x: auto; scrollbar-width: none; }
.mk-chips::-webkit-scrollbar { display: none; }
.mk-chips button { flex: none; border: 0; font: inherit; font-size: 13.5px; font-weight: 600; padding: 6px 12px; border-radius: 99px; background: var(--bg-2); color: var(--text); cursor: pointer; }
.mk-chips button.on { background: var(--text); color: var(--bg); }
.mk-count { margin-left: auto; flex: none; font-size: 12.5px; color: var(--muted, #888); padding-left: 8px; }
.mk-card { position: relative; }
.mk-card.nice { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #ffb800 70%, transparent), 0 6px 18px rgba(255,184,0,.12); }
.mk-nice { position: absolute; top: 8px; right: 10px; font-style: normal; font-size: 16px; }
@media (max-width: 600px) { .mk-hero { padding: 14px 16px !important; } .mk-hero b { font-size: 17px !important; } .mk-hero span { font-size: 13px !important; line-height: 1.4 !important; } }

/* ---------- 5.24: ежедневная награда ---------- */
.dl-card { max-width: 420px !important; overflow: hidden; }
.dl { position: relative; text-align: center; padding: 8px 4px 4px; }
.dl-x { position: absolute; top: 0; right: 0; }
.dl-flame { font-size: 54px; line-height: 1; margin: 6px 0 4px; filter: drop-shadow(0 8px 18px rgba(255,94,58,.45)); animation: dlFlame 1.6s ease-in-out infinite; }
@keyframes dlFlame { 50% { transform: scale(1.08) rotate(-4deg); } }
.dl h2 { justify-content: center; margin: 4px 0 6px; }
.dl > p { margin: 0 auto 14px; max-width: 320px; line-height: 1.45; font-size: 14px; }
.dl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.dl-tile { position: relative; border-radius: 16px; padding: 10px 4px 8px; background: var(--bg-2); display: flex; flex-direction: column; align-items: center; gap: 2px; transition: transform .2s; }
.dl-tile small { font-size: 11px; color: var(--muted, #888); font-weight: 600; }
.dl-tile b { font-size: 24px; line-height: 1.2; }
.dl-tile span { font-size: 13px; font-weight: 700; }
.dl-tile.big { grid-column: span 2; background: linear-gradient(135deg, color-mix(in srgb, #ff9966 22%, var(--bg-2)), color-mix(in srgb, #ff5e62 18%, var(--bg-2))); }
.dl-tile.got { opacity: .55; }
.dl-tile.got i { position: absolute; top: 6px; right: 8px; font-style: normal; font-size: 12px; font-weight: 800; color: #1fb860; }
.dl-tile.today { background: linear-gradient(135deg, #ff9966, #ff5e62); color: #fff; transform: scale(1.05); box-shadow: 0 8px 22px rgba(255,94,98,.35); }
.dl-tile.today small { color: rgba(255,255,255,.85); }
.dl-go { width: 100%; height: 48px; font-size: 16px; }
.dl-won { font-size: 20px; font-weight: 800; padding: 10px 0; animation: dlPop .5s cubic-bezier(.2,1.6,.4,1); }
.dl-won span { display: block; font-size: 13px; font-weight: 500; color: var(--muted, #888); margin-top: 2px; }
@keyframes dlPop { from { transform: scale(.6); opacity: 0; } }
.dl-note { display: block; margin-top: 8px; font-size: 12px; }
.ref-bonus { margin: 10px 0; padding: 12px 14px; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, #56ccf2 16%, var(--bg-2)), color-mix(in srgb, #2f80ed 14%, var(--bg-2))); display: flex; flex-direction: column; gap: 3px; }
.ref-bonus span { font-size: 13px; color: var(--muted, #888); line-height: 1.4; }
.ref-bonus em { font-style: normal; font-weight: 700; font-size: 13px; color: var(--accent); }

/* ---------- 5.24: быстрые ответы ---------- */
.qr-pop { position: fixed; z-index: 400; background: var(--bg); border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,.18), 0 0 0 1px rgba(127,127,127,.12); padding: 6px; max-height: 300px; overflow-y: auto; animation: dlPop .18s ease-out; }
.qr-pop button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; border: 0; background: none; font: inherit; text-align: left; padding: 8px 10px; border-radius: 10px; cursor: pointer; color: var(--text); }
.qr-pop button:hover, .qr-pop button:first-child { background: var(--bg-2); }
.qr-pop button b { color: var(--accent); font-size: 14px; }
.qr-pop button span { font-size: 13px; color: var(--muted, #888); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.qr-pop .qr-manage { color: var(--accent); font-size: 13px; font-weight: 600; background: none !important; }
.qr-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.qr-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--bg-2); cursor: pointer; }
.qr-row b { color: var(--accent); } .qr-row span { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted, #888); }
.qr-form { display: flex; flex-direction: column; gap: 8px; }
.chip-online { display: inline-flex; align-items: center; gap: 5px; } .chip-online .icon { width: 15px; height: 15px; }

/* ---------- 5.24: папки ---------- */
#folders .f-add { flex: none; border: 0; background: none; color: var(--muted, #888); cursor: pointer; padding: 6px 10px; display: inline-grid; place-items: center; border-radius: 99px; }
#folders .f-add:hover { background: var(--bg-2); color: var(--accent); }
#folders .f-add .icon { width: 16px; height: 16px; }
#folders button.dragging { opacity: .4; }

/* ---------- 5.24: аукционы ---------- */
.mk-card.auc { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #ff6b35 65%, transparent); }
.mk-card.auc.lead { box-shadow: inset 0 0 0 2px #1fb860; }
.mk-price.auc { display: inline-flex; align-items: center; gap: 5px; background: linear-gradient(135deg, #ff9a44, #ff5e62) !important; }
.mk-price.auc .icon { width: 14px; height: 14px; }
.mk-left { font-size: 12px; color: var(--muted, #888); margin-top: 4px; font-variant-numeric: tabular-nums; }
.mk-aucbtn { background: linear-gradient(135deg, #ff9a44, #ff5e62) !important; }
.mk-aucbtn .icon, .auc-start .icon { width: 16px; height: 16px; vertical-align: -3px; }
.auc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0; }
.auc-stats div { background: var(--bg-2); border-radius: 14px; padding: 10px 6px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.auc-stats span { font-size: 11.5px; color: var(--muted, #888); } .auc-stats b { font-size: 15px; font-variant-numeric: tabular-nums; }
.auc-lead { text-align: center; font-weight: 700; color: #1fb860; background: color-mix(in srgb, #1fb860 12%, transparent); border-radius: 12px; padding: 8px; margin-bottom: 8px; }
.auc-bid { display: flex; gap: 8px; } .auc-bid .field { flex: 1; min-width: 0; font-size: 16px; }
.auc-quick { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 2px; }
.auc-hist { margin: 10px 0; border-radius: 14px; background: var(--bg-2); padding: 4px 12px; }
.auc-hist div { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; padding: 7px 0; font-size: 13.5px; border-bottom: 1px solid color-mix(in srgb, var(--muted, #888) 15%, transparent); }
.auc-hist div:last-child { border-bottom: 0; } .auc-hist .top b { color: #ff5e62; } .auc-hist small { color: var(--muted, #888); }
.auc-start .chips { margin: 10px 0; flex-wrap: wrap; }
.auc-sheet .mk-show span .icon { width: 14px; height: 14px; vertical-align: -2px; }

/* =====================================================================
   5.25 — плавность
   ===================================================================== */
/* Для всех: убираем вечные перерисовки */
.avatar.online::after { animation: none !important; box-shadow: none !important; }
.profile-cover, .acc-chip, .drawer-head, .info-top, .pcolors button.pc-prem { animation: none !important; }
/* Список чатов: строки за пределами экрана не отрисовываются */
.chat-item { content-visibility: auto; contain-intrinsic-size: auto 72px; }
.chat-item.active, .chat-item[style*="transform"] { content-visibility: visible; }
@media (max-width: 800px) {
  .chat { will-change: transform; backface-visibility: hidden; }
  html.k11 .chat, html.k11 .sidebar { transition-duration: .28s !important; transition-timing-function: cubic-bezier(.22, .9, .28, 1) !important; }
}
.messages { overscroll-behavior-y: contain; }
#chatList, .modal-card, .mk-body { overscroll-behavior: contain; }
/* Кнопки: мгновенный отклик на нажатие */
button, .chat-item, .sm-item, .info-row.click { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.sm-item:active, .info-row.click:active, .chat-item:active { transition: background-color 0s; }
.seg-sm button { padding: 6px 10px; font-size: 13px; }
.perf-row { flex-direction: column; align-items: stretch !important; gap: 8px; }
#stPerf { width: 100%; }

/* Окна: мягкое появление и закрытие */
.modal.closing { animation: kvFadeOut .19s ease forwards !important; pointer-events: none; }
.modal.closing .modal-card { animation: kvCardOut .19s ease forwards !important; }
@keyframes kvFadeOut { to { opacity: 0; } }
@keyframes kvCardOut { to { opacity: 0; transform: scale(.97); } }
@media (max-width: 800px) {
  .modal-card { animation: kvSheetIn .32s cubic-bezier(.2, .9, .25, 1) !important; will-change: transform; }
  .modal.closing .modal-card { animation: kvSheetOut .2s cubic-bezier(.4, 0, 1, 1) forwards !important; }
  @keyframes kvSheetIn { from { transform: translateY(100%); } }
  @keyframes kvSheetOut { to { transform: translateY(100%); } }
}

/* Облегчённый режим (слабые телефоны или «Плавно» в настройках) */
html.lite *, html.lite *::before, html.lite *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html.lite .chat-head, html.lite .composer-wrap, html.lite .tabbar, html.lite .pop, html.lite .ctx-menu, html.lite .att-sheet,
html.lite .scroll-down, html.lite .info-quick button, html.lite .pop.sheet > * { background: var(--bg) !important; }
html.lite .toast { background: rgba(22, 26, 40, .96) !important; color: #fff !important; }
html.lite .day, html.lite .service { background: color-mix(in srgb, #000 30%, transparent) !important; }
html.lite .modal { background: rgba(0, 0, 0, .45) !important; }
html.lite .bm-confirm { background: color-mix(in srgb, var(--bg) 88%, transparent) !important; }
html.lite .chat-bg i, html.lite .sticker img, html.lite .p2-orb, html.lite .avatar.fr::before, html.lite .bday, html.lite .hello-emoji, html.lite .sp-emoji, html.lite .capsule-card .cp-e, html.lite .dl-flame, html.lite .auth-bg i, html.lite .p2-song.playing .p2-disc { animation: none !important; }
html.lite .chat-bg i { will-change: auto !important; }
html.lite .bubble, html.lite .chat-item, html.lite .sm-group, html.lite .fab { box-shadow: none !important; }
html.lite .sticker img { filter: none !important; }
html.lite .row.appear.in, html.lite .row.appear.out { animation-duration: .12s !important; }

/* =====================================================================
   5.27 — знак Kuvo вместо персонажа, телефон, поиск, коллекции, админка
   ===================================================================== */
svg.kuvi.kv2 { width: 170px; height: 170px; }
.kv2 .k2-body { transform-origin: 100px 100px; animation: k2Breath 3.6s ease-in-out infinite; }
@keyframes k2Breath { 50% { transform: translateY(-4px) scale(1.02); } }
.kv2 .k2-orbit { transform-origin: 100px 100px; animation: k2Orbit 14s linear infinite; }
@keyframes k2Orbit { to { transform: rotate(360deg); } }
.kv2 .k2-face { transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); }
.kv2 .kv-pupils circle { transform-box: fill-box; transform-origin: center; animation: k2Dot 1.4s ease-in-out infinite; }
.kv2 .kv-pupils circle:nth-child(2) { animation-delay: .15s; } .kv2 .kv-pupils circle:nth-child(3) { animation-delay: .3s; }
@keyframes k2Dot { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-5px); } }
.kv2 .k2-lock, .kv2 .k2-key, .kv2 .kv-hearts { opacity: 0; transition: opacity .2s; }
.kv2.cover .kv-pupils, .kv2.key .kv-pupils { opacity: 0; }
.kv2.cover .k2-lock { opacity: 1; animation: k2Pop .35s cubic-bezier(.3, 1.6, .5, 1); }
.kv2.cover.peek .k2-lock { opacity: .35; } .kv2.cover.peek .kv-pupils { opacity: 1; }
.kv2.key .k2-key { opacity: 1; }
@keyframes k2Pop { from { transform: scale(.6); } }
.kv2 .k2-lock, .kv2 .k2-key { transform-box: fill-box; transform-origin: center; }
.kv2.sad .k2-body { animation: k2Shake .45s ease-in-out 2; }
@keyframes k2Shake { 25% { transform: translateX(-7px) rotate(-3deg); } 75% { transform: translateX(7px) rotate(3deg); } }
.kv2.happy .k2-body, .kv2.jump .k2-body, .kv2.love .k2-body { animation: k2Jump .7s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes k2Jump { 40% { transform: translateY(-16px) scale(1.04); } }
.kv2.happy .k2-orbit { animation-duration: 4s; }
.kv2.love .kv-hearts { opacity: 1; animation: kvHearts 1.4s ease-out; }
.kv2 .k2-spark { animation: kvSpark 2s ease-in-out infinite; transform-origin: 160px 46px; }
.wc-logo, .about-logo { width: 96px !important; height: 96px !important; border-radius: 30px; filter: drop-shadow(0 12px 28px rgba(14, 120, 255, .35)) !important; }
html.lite .kv2 * { animation: none !important; }

/* Телефон */
.ph-step { display: flex; flex-direction: column; gap: 10px; }
.ph-code { text-align: center; font-size: 26px !important; letter-spacing: .5em; font-variant-numeric: tabular-nums; }
.auth-phone { display: flex; align-items: center; gap: 10px; width: 100%; border: 1.5px dashed color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 6%, transparent); color: var(--accent); font: inherit; font-weight: 600; padding: 11px 14px; border-radius: 14px; cursor: pointer; text-align: left; }
.auth-phone span { flex: 1; } .auth-phone em { font-style: normal; font-size: 12px; font-weight: 500; opacity: .75; }
.auth-phone.done { border-style: solid; color: #16a34a; border-color: color-mix(in srgb, #16a34a 45%, transparent); background: color-mix(in srgb, #16a34a 7%, transparent); }
.auth-phone .icon, .auth-links .icon { width: 18px; height: 18px; }
.call-num { margin-top: 2px; font-size: 15px; opacity: .85; font-weight: 500; }
.call-num .mono { letter-spacing: .04em; font-weight: 700; }
.fx-btn.on { background: rgba(255,255,255,.28) !important; box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); }
.p2-cl { display: flex; flex-wrap: wrap; gap: 6px; }
.p2-cl span { font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 99px; background: color-mix(in srgb, #ffb800 16%, var(--bg-2)); }

/* Поиск с фильтрами */
.sd-open { display: flex; align-items: center; gap: 10px; width: calc(100% - 16px); margin: 6px 8px; padding: 11px 14px; border: 0; border-radius: 14px; background: color-mix(in srgb, var(--accent) 9%, var(--bg-2)); color: var(--accent); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; text-align: left; }
.sd-open span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sd-open .icon { width: 18px; height: 18px; flex: none; }
.sd-chips { display: flex; gap: 6px; overflow-x: auto; margin: 10px 0; scrollbar-width: none; }
.sd-chips button { flex: none; border: 0; font: inherit; font-size: 13.5px; font-weight: 600; padding: 7px 13px; border-radius: 99px; background: var(--bg-2); color: var(--text); cursor: pointer; }
.sd-chips button.on { background: var(--accent); color: #fff; }
.sd-row { display: flex; gap: 8px; margin-bottom: 10px; } .sd-row .field { flex: 1; min-width: 0; }
.sd-list { display: flex; flex-direction: column; gap: 2px; max-height: 56vh; overflow-y: auto; }
.sd-it { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; cursor: pointer; }
.sd-it:hover { background: var(--bg-2); }
.sd-top { display: flex; gap: 8px; align-items: baseline; font-size: 14px; } .sd-top span { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-tx { font-size: 13.5px; color: var(--muted, #888); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 52vw; }
.sd-th { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex: none; }

/* Подарок недели и коллекции */
.gd-extra { display: flex; gap: 8px; align-items: stretch; margin: 0 0 10px; flex-wrap: wrap; }
.gd-week { flex: 1 1 260px; display: flex; align-items: center; gap: 10px; border: 0; font: inherit; text-align: left; color: #fff; padding: 10px 12px; border-radius: 16px; background: var(--gbg); cursor: pointer; position: relative; overflow: hidden; box-shadow: 0 0 0 2px #ffd34d inset; }
.gd-week::after { content: ''; position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.45) 50%, transparent 60%); animation: luxShine 3.2s ease-in-out infinite; pointer-events: none; }
.gd-week .gw-e { font-size: 34px; line-height: 1; } .gd-week b { display: block; font-size: 14px; } .gd-week small { font-size: 12.5px; opacity: .95; } .gd-week s { opacity: .75; }
.gd-week em { font-style: normal; font-weight: 800; background: #ffd34d; color: #3a2a00; padding: 3px 8px; border-radius: 99px; font-size: 13px; }
.gd-coll { align-self: center; } .gd-coll .icon { width: 16px; height: 16px; }
.gift-tile.weekg { box-shadow: 0 0 0 2px #ffd34d, 0 8px 20px rgba(255, 190, 0, .3); }
.gift-tile.weekg::after { content: '−20%'; position: absolute; top: 6px; right: 6px; background: #ffd34d; color: #3a2a00; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 99px; text-shadow: none; }
.cl-list { display: flex; flex-direction: column; gap: 10px; }
.cl-set { background: var(--bg-2); border-radius: 16px; padding: 12px; }
.cl-set.done { box-shadow: inset 0 0 0 2px #ffd34d; }
.cl-h { display: flex; justify-content: space-between; font-size: 15px; } .cl-h span { color: var(--muted, #888); font-weight: 600; font-size: 13px; }
.cl-bar { height: 6px; border-radius: 99px; background: var(--bg-3); margin: 8px 0 10px; overflow: hidden; } .cl-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ffb800, #ff6b35); }
.cl-items { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.cl-it { position: relative; aspect-ratio: 1; border: 0; border-radius: 14px; background: var(--gbg); display: grid; place-items: center; cursor: pointer; filter: grayscale(.85) opacity(.55); font: inherit; }
.cl-it.own { filter: none; cursor: default; } .cl-it span { font-size: 26px; } .cl-it i { position: absolute; top: 3px; right: 5px; font-style: normal; font-size: 11px; font-weight: 800; color: #fff; }
.cl-it small { position: absolute; bottom: 3px; left: 0; right: 0; font-size: 9.5px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.sh-row2 { display: flex; justify-content: space-between; gap: 10px; margin: -4px 2px 10px; font-size: 14px; }

/* Плавное закрытие меню */
.pop.pop-out { animation: popOut .16s ease forwards !important; }
.pop.sheet.pop-out { animation: sheetOut .17s cubic-bezier(.4, 0, 1, 1) forwards !important; }
.sheet-backdrop.pop-out { animation: kvFadeOut .17s ease forwards !important; }
@keyframes popOut { to { opacity: 0; transform: scale(.96); } }
@keyframes sheetOut { to { transform: translateY(105%); } }
.pop:not(.sheet) { transform-origin: top left; animation: popIn2 .16s cubic-bezier(.2, .9, .3, 1.2) !important; }
@keyframes popIn2 { from { opacity: 0; transform: scale(.94); } }

/* Админка 5.26 */
.mn-range { max-width: 300px; margin-bottom: 12px; }
.mn-card { position: relative; background: var(--bg-2); border-radius: 16px; padding: 14px; margin-top: 12px; }
.mn-title { font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted, #888); font-weight: 700; margin-bottom: 10px; }
.mn-chart { display: flex; align-items: flex-end; gap: 2px; height: 150px; padding-bottom: 1px; border-bottom: 1px solid color-mix(in srgb, var(--muted, #888) 30%, transparent); }
.mn-bar { flex: 1; height: 100%; display: flex; align-items: flex-end; cursor: pointer; }
.mn-bar i { display: block; width: 100%; border-radius: 4px 4px 0 0; background: var(--accent); min-height: 0; transition: opacity .15s; }
.mn-bar:hover i { opacity: .75; }
.mn-axis { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted, #888); margin-top: 6px; }
.mn-tip { position: absolute; top: 34px; left: 0; background: var(--text); color: var(--bg); font-size: 12.5px; padding: 6px 10px; border-radius: 10px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s; z-index: 2; }
.mn-tip.on { opacity: 1; }
.mn-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 12px; }
.mn-h { display: grid; grid-template-columns: 130px 1fr auto; gap: 8px; align-items: center; font-size: 13.5px; padding: 4px 0; }
.mn-h span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mn-h div { height: 8px; background: var(--bg-3); border-radius: 99px; overflow: hidden; }
.mn-h div i { display: block; height: 100%; background: var(--accent); border-radius: 99px; } .mn-h b { font-size: 13px; }
.mn-top { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; padding: 6px 0; font-size: 14px; cursor: pointer; border-bottom: 1px solid color-mix(in srgb, var(--muted, #888) 12%, transparent); }
.mn-top em { font-style: normal; color: var(--muted, #888); font-weight: 700; }
.pr-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.pr-list { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.pr-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--bg-2); font-size: 14px; }
.pr-row.off { opacity: .5; } .pr-row b { font-size: 15px; } .pr-row .muted { flex: 1; font-size: 13px; }
.lg-list { display: flex; flex-direction: column; } .lg-row { display: grid; grid-template-columns: 120px 120px 1fr; gap: 10px; padding: 8px 4px; font-size: 13.5px; border-bottom: 1px solid color-mix(in srgb, var(--muted, #888) 12%, transparent); }
.lg-t { color: var(--muted, #888); font-size: 12.5px; }
@media (max-width: 600px) { .lg-row { grid-template-columns: 1fr; gap: 2px; } }
.fr-g { padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--muted, #888) 12%, transparent); } .fr-g > b { display: block; font-size: 14px; margin-bottom: 4px; }
.fr-u { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 14px; } .fr-u span { flex: 1; } .fr-u .icon-btn { width: 30px; height: 30px; }
.bc-seg { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin-bottom: 10px; }
.bc-seg button { border: 0; font: inherit; text-align: left; padding: 9px 12px; border-radius: 12px; background: var(--bg-2); cursor: pointer; color: var(--text); display: flex; flex-direction: column; }
.bc-seg button span { font-size: 12.5px; color: var(--muted, #888); } .bc-seg button.on { background: color-mix(in srgb, var(--accent) 14%, var(--bg-2)); box-shadow: inset 0 0 0 2px var(--accent); }
.bc-h { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--muted, #888) 12%, transparent); }
.bc-h .grow b { display: block; font-size: 14px; font-weight: 600; } .bc-h .grow span { font-size: 12.5px; }
.bc-stat { text-align: right; } .bc-stat b { font-size: 18px; display: block; } .bc-stat span { font-size: 12px; color: var(--muted, #888); }
.ac-grid2 { margin-top: 12px; }
.ac-bal { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .ac-bal b { font-size: 20px; } .ac-bal .btn { margin-left: 4px; }
.ac-log { max-height: 240px; overflow-y: auto; } .ac-log > div { display: grid; grid-template-columns: 1fr auto 70px; gap: 8px; align-items: center; font-size: 13px; padding: 4px 0; border-bottom: 1px solid color-mix(in srgb, var(--muted, #888) 10%, transparent); }
.ac-log > div.off { opacity: .5; } .ac-log b { color: var(--danger, #e53935); } .ac-log b.plus { color: #16a34a; } .ac-log small { color: var(--muted, #888); text-align: right; }
.ac-log .linkish { font-size: 12.5px; text-align: right; }
.ac-mod { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pay-row { display: flex !important; align-items: center; gap: 10px; flex-direction: row !important; }

/* =====================================================================
   5.28 — новый облик Kuvo: «волна» синий → бирюзовый, без фиолетовых градиентов
   ===================================================================== */
:root.k15 {
  --k-teal: #00c2a8;
  --accent-2: color-mix(in srgb, var(--accent) 55%, var(--k-teal));
  --accent-grad: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 50%, var(--k-teal)) 100%);
  --out-grad: linear-gradient(150deg, color-mix(in srgb, var(--accent) 80%, #5ec8ff) 0%, var(--accent) 50%, color-mix(in srgb, var(--accent) 62%, var(--k-teal)) 100%);
  --grad: var(--out-grad);
  --glow: 0 8px 22px color-mix(in srgb, var(--accent) 30%, transparent);
  --radius: 20px;
}
:root.k15:not([data-theme="dark"]) { --bg: #ffffff; --bg-2: #f1f5f9; --bg-3: #e5ebf2; --hover: #f1f5f9; --text: #0d1622; --muted: #7a8696; --border: #e6ebf1; --hair: rgba(15, 30, 60, .09); --bar: rgba(255,255,255,.94); --bubble-in: #ffffff; }
:root.k15[data-theme="dark"] { --bg: #0f1620; --bg-2: #18212d; --bg-3: #222d3b; --hover: #18212d; --text: #eef3f8; --muted: #8b98a8; --border: #070b11; --hair: rgba(255,255,255,.07); --bar: rgba(15, 22, 32, .94); --bubble-in: #1b2532; }
/* Обои по умолчанию — небо и мята вместо розово-фиолетового */
:root.k15[data-wall="kuvo"] { --chat-grad: #e8f1f8; --b1: #a6d3ff; --b2: #b8f0e4; --b3: #cbdcff; --b4: #d7f6ff; --pill: rgba(18, 54, 90, .34); }
:root.k15[data-theme="dark"][data-wall="kuvo"] { --chat-grad: #070d16; --b1: #0d3768; --b2: #05494a; --b3: #0f2c58; --b4: #0a4558; --pill: rgba(255,255,255,.13); }

/* Типографика */
html.k15 body { -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01"; }
html.k15 .side-title, html.k15 h2 { letter-spacing: -.02em; }
html.k15 .side-title { font-weight: 800 !important; }

/* Кнопки — без фиолетового */
html.k15 .btn:not(.ghost):not(.danger):not(.danger-fill) { background: var(--accent-grad) !important; color: #fff !important; box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 26%, transparent); border-radius: 14px; }
html.k15 .btn.ghost { background: color-mix(in srgb, var(--accent) 9%, var(--bg-2)) !important; color: var(--accent) !important; border-radius: 14px; }
html.k15 .btn:active { transform: scale(.97); }
html.k15 .switch input:checked + span { background: var(--accent-grad) !important; }

/* Поиск */
html.k15 .search { background: var(--bg-2) !important; border-radius: 16px !important; border: 0 !important; }
html.k15 .search:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent); background: var(--bg) !important; }

/* Папки — «таблетки» вместо подчёркнутых вкладок */
html.k15 .folders { gap: 6px; padding: 6px 12px 8px !important; border-bottom: 0 !important; }
html.k15 .folders button { padding: 7px 13px !important; border-radius: 99px !important; background: var(--bg-2); color: var(--text) !important; font-weight: 600; font-size: 14px !important; transition: background .2s, color .2s, transform .15s; }
html.k15 .folders button:active { transform: scale(.95); }
html.k15 .folders button.active { background: var(--accent-grad) !important; color: #fff !important; box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 28%, transparent); }
html.k15 .folders button.active::after { display: none !important; }
html.k15 .folders button .fbadge { background: color-mix(in srgb, var(--text) 14%, transparent) !important; color: inherit !important; }
html.k15 .folders button.active .fbadge { background: rgba(255,255,255,.28) !important; color: #fff !important; }
html.k15 .folders .f-add { background: transparent !important; }

/* Список чатов: мягкие карточки */
html.k15 .chat-item { margin: 1px 8px; border-radius: 18px; padding: 9px 10px !important; transition: background .15s, transform .15s; }
html.k15 .chat-item:hover { background: var(--hover); }
html.k15 .chat-item.active { background: color-mix(in srgb, var(--accent) 12%, var(--bg)) !important; color: inherit !important; box-shadow: inset 3px 0 0 var(--accent) !important; }
html.k15 .chat-item.active .ci-text, html.k15 .chat-item.active .ci-time { color: var(--muted) !important; }
html.k15 .chat-item .avatar { width: 54px; height: 54px; font-size: 21px; }
html.k15 .ci-title { font-weight: 650; font-size: 16px; letter-spacing: -.01em; }
html.k15 .ci-text { font-size: 14.5px; }
html.k15 .badge { background: var(--accent-grad) !important; box-shadow: none !important; font-weight: 700; }
html.k15 .badge.muted { background: color-mix(in srgb, var(--muted) 55%, transparent) !important; }
html.k15 .st-ring:not(.none) { background: conic-gradient(from 200deg, var(--accent), var(--k-teal), #5ec8ff, var(--accent)) !important; }

/* Нижняя панель: плавающая, активная вкладка — цветная капсула */
@media (max-width: 800px) {
  html.k15 .tabbar { left: 12px !important; right: 12px !important; bottom: calc(10px + env(safe-area-inset-bottom)) !important; border-radius: 26px !important; padding: 6px !important; background: var(--bar) !important; box-shadow: 0 10px 30px rgba(10, 30, 60, .16), 0 0 0 1px var(--hair) !important; border: 0 !important; }
  html.k15 .tabbar button { border-radius: 20px; transition: background .25s, color .25s; padding: 6px 0 5px !important; }
  html.k15 .tabbar button.active { background: var(--accent-grad) !important; color: #fff !important; box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 30%, transparent); }
  html.k15 .tabbar button.active svg { transform: none !important; }
  html.k15 .tabbar .tb-badge { background: #ff4d4f !important; }
  html.k15 #chatList { padding-bottom: 96px; }
}

/* Чат: шапка, пузыри, поле ввода */
html.k15 .chat-head { background: var(--bar) !important; border-bottom: 1px solid var(--hair) !important; box-shadow: none !important; }
html.k15:not(.bubbles-classic) .row.out .bubble:not(.clear):not(.sticker-b) { background: var(--out-grad) !important; box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 22%, transparent) !important; }
html.k15 .row.in .bubble:not(.clear):not(.sticker-b) { background: var(--bubble-in) !important; box-shadow: 0 1px 2px rgba(10, 30, 60, .08), 0 2px 8px rgba(10, 30, 60, .04) !important; }
html.k15 .bubble { border-radius: 20px !important; }
html.k15 .row.out.last .bubble:not(.clear) { border-bottom-right-radius: 6px !important; }
html.k15 .row.in.last .bubble:not(.clear) { border-bottom-left-radius: 6px !important; }
html.k15 .input-box { background: var(--bg) !important; border-radius: 24px !important; box-shadow: 0 2px 10px rgba(10, 30, 60, .07), 0 0 0 1px var(--hair) !important; }
html.k15 .composer-wrap { background: transparent !important; border-top: 0 !important; }
html.k15 .send { background: var(--accent-grad) !important; box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 34%, transparent) !important; }
html.k15 .day, html.k15 .service { background: var(--pill) !important; border-radius: 99px !important; font-weight: 600; }
html.k15 .scroll-down { box-shadow: 0 6px 18px rgba(10, 30, 60, .14) !important; }

/* Окна и меню */
html.k15 .modal-card { border-radius: 28px !important; }
@media (max-width: 800px) { html.k15 .modal-card { border-radius: 28px 28px 0 0 !important; } }
html.k15 .pop { border-radius: 18px !important; }
html.k15 .sm-group { border-radius: 20px !important; }
html.k15 .sm-item i { border-radius: 10px !important; }

/* Быстрые фильтры: «Непрочитанные» */
.unread-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 14px 6px; font-size: 13.5px; color: var(--muted); }
.unread-bar button { border: 0; font: inherit; font-weight: 600; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); padding: 6px 12px; border-radius: 99px; cursor: pointer; }
.unread-empty { text-align: center; padding: 40px 20px; color: var(--muted); } .unread-empty b { display: block; font-size: 40px; margin-bottom: 6px; }
/* 5.28 fixes */
html.k15.k11 .tabbar button { border-radius: 20px !important; }
html.k15.k11 .tabbar button.active { background: var(--accent-grad) !important; color: #fff !important; }
html.k15 .row.last .bubble:not(.clear):not(.only-media)::before { display: none !important; }
html.k15 .chat-item .ci-body, html.k15.k11 .chat-item .ci-body { border-bottom: 0 !important; }
html.k15 .chat-item.active .ci-text b, html.k15 .chat-item.active .ci-text strong, html.k15 .chat-item.active .ci-text span { color: var(--text) !important; }

/* =====================================================================
   5.29 — оформление «под себя» (html.k16): форма и стиль сообщений, плотность,
   аватарки, шрифт, чёрная тема, затемнение фона, предпросмотр и готовые темы
   ===================================================================== */
:root.k16 { --kt: var(--text); --km: var(--muted); --br: 20px; --brc: 6px; --brg: 20px; }
:root.k16[data-brad="sharp"] { --br: 12px; --brc: 4px; }
:root.k16[data-brad="round"] { --br: 26px; --brc: 8px; }

/* Чёрная тема для OLED */
:root.k16[data-theme="dark"][data-darkstyle="oled"] { --bg: #000; --bg-2: #0d1014; --bg-3: #171b21; --hover: #0d1014; --border: #000; --hair: rgba(255,255,255,.08); --bar: rgba(0,0,0,.92); --bubble-in: #14181e; --kt: #eef3f8; }
:root.k16[data-theme="dark"][data-darkstyle="oled"][data-wall="kuvo"] { --chat-grad: #000; --b1: #08254a; --b2: #03302f; --b3: #0a1d3d; --b4: #062d3a; }
:root.k16[data-theme="dark"][data-darkstyle="oled"][data-wall="plain"] { --chat-grad: #000; --pill: rgba(255,255,255,.12); }
:root.k16[data-theme="dark"][data-darkstyle="oled"][data-wall="kuvo"] { --pill: rgba(255,255,255,.12); }

/* Форма пузырей */
html.k16 .bubble { border-radius: var(--br) !important; }
html.k16 .row.out:not(.last) .bubble:not(.clear) { border-bottom-right-radius: calc(var(--br) * .45) !important; }
html.k16 .row.in:not(.last) .bubble:not(.clear) { border-bottom-left-radius: calc(var(--br) * .45) !important; }
html.k16[data-corner="on"] .row.out.last .bubble:not(.clear) { border-bottom-right-radius: var(--brc) !important; }
html.k16[data-corner="on"] .row.in.last .bubble:not(.clear) { border-bottom-left-radius: var(--brc) !important; }
html.k16[data-corner="off"] .row.out.last .bubble:not(.clear), html.k16[data-corner="off"] .row.in.last .bubble:not(.clear) { border-bottom-right-radius: var(--br) !important; border-bottom-left-radius: var(--br) !important; }

/* Стиль моих сообщений */
html.k16 .row.out .bubble:not(.clear):not(.sticker-b) { background: var(--out-grad) !important; color: #fff;
  --text: #fff; --muted: rgba(255,255,255,.78); --out-meta: rgba(255,255,255,.88); --accent: #fff; --bg-2: rgba(255,255,255,.16); --bg-3: rgba(255,255,255,.22); --border: rgba(255,255,255,.28); --hover: rgba(255,255,255,.12); }
html.k16[data-bstyle="solid"] .row.out .bubble:not(.clear):not(.sticker-b) { background: var(--ka) !important; box-shadow: 0 2px 8px color-mix(in srgb, var(--ka) 22%, transparent) !important; }
html.k16[data-bstyle="soft"] .row.out .bubble:not(.clear):not(.sticker-b) {
  background: color-mix(in srgb, var(--ka) 17%, var(--bubble-in)) !important; color: var(--kt) !important;
  box-shadow: 0 1px 2px rgba(10, 30, 60, .08) !important;
  --text: var(--kt); --muted: var(--km); --out-meta: color-mix(in srgb, var(--ka) 70%, var(--kt)); --accent: var(--ka);
  --bg-2: color-mix(in srgb, var(--ka) 10%, transparent); --bg-3: color-mix(in srgb, var(--ka) 16%, transparent); --border: color-mix(in srgb, var(--ka) 30%, transparent); --hover: color-mix(in srgb, var(--ka) 8%, transparent); }
html.k16[data-bstyle="soft"] .row.out .bubble:not(.clear) .meta, html.k16[data-bstyle="soft"] .row.out .bubble:not(.clear) .meta svg { color: var(--out-meta) !important; }
html.k16[data-bstyle="soft"] .row.out .bubble:not(.clear) a:not(.btn):not(.media):not(.file):not(.loc-card) { color: var(--ka) !important; }
html.k16[data-bstyle="soft"] .row.out .bubble:not(.clear) .btn:not(.ghost) { background: var(--ka) !important; color: #fff !important; }
html.k16[data-bstyle="soft"] .row.out .bubble:not(.clear) .voice .play { background: var(--ka) !important; color: #fff !important; }
html.k16[data-bstyle="soft"] .row.out .bubble:not(.clear) .voice .wave i { background: color-mix(in srgb, var(--ka) 55%, transparent) !important; }
html.k16[data-bstyle="soft"] .row.out .bubble:not(.clear) .reply { background: color-mix(in srgb, var(--ka) 12%, transparent) !important; border-color: var(--ka) !important; }
html.k16[data-bstyle="soft"] .row.out .bubble:not(.clear) .file .ext { background: var(--ka) !important; }
html.k16[data-bstyle="soft"] .row.out .bubble:not(.clear) .poll-res .pr-bar i { background: var(--ka) !important; }
html.k16[data-bstyle="soft"] .row.out .bubble:not(.clear) .poll-opt .po-mark { border-color: var(--ka) !important; }

/* Затемнение фона чата */
html.k16 .chat > .chat-bg::after { content: ''; position: absolute; inset: 0; background: #000; opacity: var(--wdim, 0); pointer-events: none; }
:root.k16[data-wall="plain"] .chat-bg { display: block !important; }
:root.k16[data-wall="plain"] .chat-bg .blobs { display: none; }

/* Плотность списка чатов */
html.k16[data-density="compact"] .chat-item { padding: 5px 10px !important; margin: 0 8px; }
html.k16[data-density="compact"] .chat-item .avatar { width: 44px; height: 44px; font-size: 17px; }
html.k16[data-density="compact"] .ci-title { font-size: 15px; }
html.k16[data-density="compact"] .ci-text { font-size: 13.5px; -webkit-line-clamp: 1 !important; line-clamp: 1; white-space: nowrap; }
html.k16[data-density="large"] .chat-item { padding: 11px 12px !important; }
html.k16[data-density="large"] .chat-item .avatar { width: 62px; height: 62px; font-size: 24px; }
html.k16[data-density="large"] .ci-title { font-size: 17px; }
html.k16[data-density="large"] .ci-text { font-size: 15.5px; }

/* Аватарки-плитки */
html.k16[data-av="squircle"] .avatar, html.k16[data-av="squircle"] .avatar img { border-radius: 32% !important; }
html.k16[data-av="squircle"] .st-ring, html.k16[data-av="squircle"] .st-ring > * { border-radius: 34% !important; }
html.k16 .avatar:not([style*="url("]) { box-shadow: inset 0 -12px 20px rgba(0, 0, 0, .07), inset 0 10px 16px rgba(255, 255, 255, .16); }

/* Шрифты (только встроенные в систему — ничего не скачивается) */
html.k16[data-font="rounded"] body { font-family: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, sans-serif !important; }
html.k16[data-font="serif"] body { font-family: Georgia, "Noto Serif", "Droid Serif", "Times New Roman", serif !important; }
html.k16[data-font="serif"] .ci-title, html.k16[data-font="serif"] h2, html.k16[data-font="serif"] .side-title { letter-spacing: 0; }

/* Нижняя панель без подписей */
@media (max-width: 800px) {
  html.k16[data-tbl="off"] .tabbar button > span { display: none; }
  html.k16[data-tbl="off"] .tabbar button { padding: 9px 0 !important; }
  html.k16[data-tbl="off"] .tabbar button svg { width: 27px; height: 27px; }
}
@media (min-width: 801px) { .k16-mob { display: none !important; } }

/* Чуть красивее: отклик на нажатия, фокус поля, дата-плашки */
html.k16 .chat-item:active { transform: scale(.985); }
html.k16 .input-box { transition: box-shadow .2s; }
html.k16 .input-box:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--ka) 35%, transparent), 0 4px 14px rgba(10, 30, 60, .08) !important; }
html.k16:not(.lite) .day, html.k16:not(.lite) .service { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html.k16 ::selection { background: color-mix(in srgb, var(--ka) 30%, transparent); }
html.k16 .chat-item.unread .ci-text, html.k16 .chat-item:has(.badge:not(.muted)) .ci-text { color: color-mix(in srgb, var(--text) 78%, var(--muted)); }
html.k16 .settings-sec h3 { letter-spacing: .02em; }

/* Страница «Оформление»: предпросмотр */
.k16-prev { position: relative; margin: 6px 14px 4px; height: 214px; border-radius: 24px; overflow: hidden; background: var(--chat-grad); box-shadow: 0 0 0 1px var(--hair), 0 8px 24px rgba(10, 30, 60, .08); isolation: isolate; }
.k16-prev .kp-wall { position: absolute; inset: 0; z-index: 0; }
.k16-prev .kp-wall::after { content: ''; position: absolute; inset: 0; background: #000; opacity: var(--wdim, 0); }
.k16-prev .kp-wall i { position: absolute; width: 70%; height: 80%; border-radius: 50%; }
.k16-prev .kp-wall i:nth-child(1) { left: -10%; top: -20%; background: radial-gradient(closest-side, var(--b1), transparent); }
.k16-prev .kp-wall i:nth-child(2) { right: -15%; top: 10%; background: radial-gradient(closest-side, var(--b2), transparent); }
.k16-prev .kp-wall i:nth-child(3) { left: 10%; bottom: -30%; background: radial-gradient(closest-side, var(--b3), transparent); }
:root[data-wall="plain"] .k16-prev .kp-wall i { display: none; }
.k16-prev .kp-head { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: var(--bar); border-bottom: 1px solid var(--hair); }
.k16-prev .kp-head .avatar { width: 34px; height: 34px; font-size: 14px; }
.k16-prev .kp-head b { display: block; font-size: 14.5px; } .k16-prev .kp-head small { color: var(--accent); font-size: 12px; }
.k16-prev .kp-msgs { position: relative; z-index: 1; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; font-size: calc(var(--font-size, 15px) - 1px); }
.k16-prev .kp-row { display: flex; } .k16-prev .kp-row.out { justify-content: flex-end; margin-top: 6px; }
.k16-prev .kp-b { max-width: 78%; padding: 7px 12px; border-radius: var(--br); background: var(--bubble-in); color: var(--text); box-shadow: 0 1px 2px rgba(10, 30, 60, .08); line-height: 1.3; }
.k16-prev .kp-row.in:not(.last) .kp-b { border-bottom-left-radius: calc(var(--br) * .45); }
:root[data-corner="on"] .k16-prev .kp-row.in.last .kp-b { border-bottom-left-radius: var(--brc); }
:root[data-corner="on"] .k16-prev .kp-row.out.last .kp-b { border-bottom-right-radius: var(--brc); }
.k16-prev .kp-row.out .kp-b { background: var(--out-grad); color: #fff; }
.k16-prev .kp-b em { font-style: normal; font-size: 11px; opacity: .8; margin-left: 8px; white-space: nowrap; }
:root[data-bstyle="solid"] .k16-prev .kp-row.out .kp-b { background: var(--ka); }
:root[data-bstyle="soft"] .k16-prev .kp-row.out .kp-b { background: color-mix(in srgb, var(--ka) 17%, var(--bubble-in)); color: var(--kt); }
:root[data-bstyle="soft"] .k16-prev .kp-row.out .kp-b em { color: var(--ka); opacity: 1; }

/* Готовые темы */
.k16-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.k16-presets button { border: 0; background: none; padding: 0; font: inherit; color: var(--text); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.k16-presets .kpp { position: relative; width: 100%; aspect-ratio: 1 / .78; border-radius: 16px; box-shadow: 0 0 0 1px var(--hair); transition: transform .15s, box-shadow .2s; overflow: hidden; }
.k16-presets .kpp i { position: absolute; height: 12px; border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.k16-presets .kpp i:nth-child(1) { left: 10%; top: 24%; width: 52%; }
.k16-presets .kpp i:nth-child(2) { right: 10%; bottom: 22%; width: 46%; }
.k16-presets button.active .kpp { box-shadow: 0 0 0 2.5px var(--ka), 0 6px 14px color-mix(in srgb, var(--ka) 25%, transparent); }
.k16-presets button:active .kpp { transform: scale(.94); }
.k16-presets small { font-size: 12.5px; font-weight: 600; }
.k16-presets button.active small { color: var(--ka); }

/* Цвета, переключатели, обмен темой */
html.k16 .set-row:has(#stAccent) { flex-direction: column; align-items: stretch; gap: 10px; }
.k16-swatches { display: flex !important; flex-wrap: wrap; gap: 10px; }
.k16-custom { position: relative; display: grid !important; place-items: center; cursor: pointer; font-weight: 700; font-size: 18px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.k16-custom:not([style*="background"]) { background: conic-gradient(#ff5e5e, #ffd54a, #4ade80, #38bdf8, #a78bfa, #ff5e5e) !important; }
.k16-custom input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; border: 0; padding: 0; }
html.k16 .set-row:has(.k16-seg) { flex-direction: column; align-items: stretch; gap: 8px; }
.k16-seg { width: 100%; } .k16-seg button { white-space: nowrap; flex: 1; }
.k16-sec h3 { margin-bottom: 10px; }
.k16-note { font-size: 13px; margin: 0 0 10px; }
.k16-share, .k16-import { display: flex; gap: 8px; } .k16-share { margin-bottom: 8px; } .k16-share .btn { flex: 1; justify-content: center; }
.k16-import .field { flex: 1; min-width: 0; font-size: 14px; }
.k16-share .btn, .k16-import .btn { white-space: nowrap; }

/* =====================================================================
   6.0 — новый облик (html.k20): «Премиум» (спокойный, чистый) и «Неон» (тёмный со свечением).
   Один акцентный цвет, нейтральные поверхности, стекло, тонкие линии, без пёстрых градиентов.
   ===================================================================== */
:root.k20 { --e-out: cubic-bezier(.22, 1, .36, 1); --e-spring: cubic-bezier(.34, 1.4, .64, 1);
  --accent-grad: var(--accent); --grad: var(--accent); --glow: none; --radius: 18px;
  --out-grad: linear-gradient(180deg, color-mix(in srgb, var(--accent) 86%, #fff), var(--accent)); }
:root.k20:not([data-theme="dark"]) { --bg: #ffffff; --bg-2: #f3f4f6; --bg-3: #e8e9ed; --hover: #f5f6f8; --text: #0b0c10; --muted: #858a95; --border: #ececf0; --hair: rgba(12, 14, 22, .075); --bar: rgba(255, 255, 255, .8); --bubble-in: #ffffff; --kt: #0b0c10; --km: #858a95; --shadow-lg: 0 18px 50px rgba(15, 18, 30, .14); }
:root.k20[data-theme="dark"] { --bg: #0c0c10; --bg-2: #16161b; --bg-3: #202027; --hover: #141419; --text: #f2f2f5; --muted: #8b8d98; --border: #000; --hair: rgba(255, 255, 255, .075); --bar: rgba(14, 14, 18, .78); --bubble-in: #1b1b21; --kt: #f2f2f5; --km: #8b8d98; --shadow-lg: 0 18px 50px rgba(0, 0, 0, .55); }
:root.k20[data-theme="dark"][data-darkstyle="oled"] { --bg: #000; --bg-2: #0f0f12; --bg-3: #19191e; --hover: #0c0c0f; --bar: rgba(0, 0, 0, .8); --bubble-in: #141418; }
:root.k20[data-style="neon"][data-theme="dark"] { --bg: #06060a; --bg-2: #0f0f15; --bg-3: #17171f; --hover: #0d0d13; --text: #eef0f6; --muted: #7f8394; --bar: rgba(8, 8, 13, .74); --bubble-in: #111117; --hair: rgba(255, 255, 255, .07); --neon: var(--accent);
  --nglow: 0 0 18px color-mix(in srgb, var(--accent) 45%, transparent); }

/* Фон чата по умолчанию: светлый — дымчатый, тёмный — графит, неон — глубокий с цветными отсветами */
:root.k20[data-wall="kuvo"] { --chat-grad: #eef0f3; --b1: color-mix(in srgb, var(--accent) 12%, #eef0f3); --b2: #e7ebf2; --b3: color-mix(in srgb, var(--accent) 7%, #eef0f3); --b4: #f4f5f7; --pill: rgba(255, 255, 255, .72); }
:root.k20[data-theme="dark"][data-wall="kuvo"] { --chat-grad: #08080b; --b1: color-mix(in srgb, var(--accent) 13%, #08080b); --b2: #0e0f14; --b3: color-mix(in srgb, var(--accent) 7%, #08080b); --b4: #0b0b0e; --pill: rgba(30, 30, 38, .7); }
:root.k20[data-style="neon"][data-wall="kuvo"] { --chat-grad: #040407; --b1: color-mix(in srgb, var(--accent) 26%, #040407); --b2: color-mix(in srgb, #ff2bd6 10%, #040407); --b3: color-mix(in srgb, var(--accent) 14%, #040407); --b4: #07070b; --pill: rgba(20, 20, 28, .72); }

/* Типографика */
html.k20 body { font-family: var(--font-text); letter-spacing: -.003em; }
html.k20[data-font="rounded"] body { font-family: ui-rounded, "SF Pro Rounded", system-ui, sans-serif !important; }
html.k20[data-font="serif"] body { font-family: Georgia, "Noto Serif", "Times New Roman", serif !important; }
html.k20.k15.k16 .side-title { font-size: 30px !important; font-weight: 750 !important; letter-spacing: -.035em !important; }
html.k20.k15.k16 h2 { letter-spacing: -.025em; font-weight: 700; }

/* Кнопки и поля */
html.k20.k15.k16 .btn:not(.ghost):not(.danger):not(.danger-fill) { background: var(--accent) !important; color: #fff !important; box-shadow: none !important; border-radius: 13px; font-weight: 600; transition: transform .15s var(--e-out), filter .15s; }
html.k20.k15.k16 .btn:not(.ghost):not(.danger):not(.danger-fill):hover { filter: brightness(1.06); }
html.k20.k15.k16 .btn.ghost { background: color-mix(in srgb, var(--accent) 10%, transparent) !important; color: var(--accent) !important; border-radius: 13px; box-shadow: none !important; font-weight: 600; }
html.k20.k15.k16 .btn:active { transform: scale(.97); }
html.k20.k15.k16 .field { background: var(--bg-2) !important; border: 1px solid transparent !important; border-radius: 13px !important; transition: border-color .15s, background .15s; }
html.k20.k15.k16 .field:focus { border-color: color-mix(in srgb, var(--accent) 55%, transparent) !important; background: var(--bg) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent) !important; }
html.k20.k15.k16 .switch input:checked + span { background: var(--accent) !important; }
html.k20.k15.k16 .seg { background: var(--bg-2) !important; border-radius: 12px !important; padding: 3px !important; border: 0 !important; }
html.k20.k15.k16 .seg button { border-radius: 9px !important; color: var(--muted) !important; font-weight: 600; transition: background .2s, color .2s; }
html.k20.k15.k16 .seg button.active { background: var(--bg) !important; color: var(--text) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 0 .5px var(--hair) !important; }
html.k20.k15.k16[data-theme="dark"] .seg button.active { background: var(--bg-3) !important; }

/* Шапка списка, поиск, кнопки */
html.k20.k15.k16 .search { background: var(--bg-2) !important; border-radius: 12px !important; border: 0 !important; height: 38px; }
html.k20.k15.k16 .search:focus-within { background: var(--bg) !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent) !important; }
html.k20.k15.k16 .compose-top { background: var(--bg-2) !important; color: var(--text) !important; box-shadow: none !important; }
html.k20.k15.k16 #composeBtn { background: var(--accent) !important; color: #fff !important; }

/* Папки: чёрная «таблетка» у активной, остальные — текстом */
html.k20.k15.k16 .folders { gap: 4px; padding: 4px 12px 8px !important; border-bottom: 0 !important; }
html.k20.k15.k16 .folders button { background: transparent !important; color: var(--muted) !important; font-weight: 600; font-size: 14px !important; padding: 7px 12px !important; border-radius: 99px !important; box-shadow: none !important; transition: background .2s var(--e-out), color .2s; }
html.k20.k15.k16 .folders button:hover { color: var(--text) !important; background: var(--bg-2) !important; }
html.k20.k15.k16 .folders button.active { background: var(--text) !important; color: var(--bg) !important; box-shadow: none !important; }
html.k20.k15.k16 .folders button .fbadge { background: transparent !important; color: inherit !important; opacity: .7; font-weight: 600; padding: 0 0 0 2px !important; min-width: 0 !important; }
html.k20.k15.k16 .folders button.active .fbadge { background: transparent !important; color: inherit !important; opacity: .75; }

/* Истории */
html.k20.k15.k16 .st-ring:not(.none) { background: var(--accent) !important; }
html.k20.k15.k16 .stories-bar { border-bottom: 0 !important; }

/* Список чатов: чистые строки, одна строка превью, без карточек и линий */
html.k20.k15.k16 .chat-item { margin: 0 8px; padding: 8px 10px !important; border-radius: 16px; box-shadow: none !important; transition: background .18s var(--e-out), transform .18s var(--e-out); }
html.k20.k15.k16 .chat-item:hover { background: var(--hover) !important; }
html.k20.k15.k16 .chat-item.active { background: var(--bg-2) !important; box-shadow: none !important; }
html.k20.k15.k16[data-theme="dark"] .chat-item.active { background: var(--bg-3) !important; }
html.k20.k15.k16 .chat-item .avatar { width: 52px; height: 52px; font-size: 19px; }
html.k20.k15.k16 .chat-item .ci-body { border-bottom: 0 !important; gap: 2px; }
html.k20.k15.k16 .ci-title { font-size: 15.5px !important; font-weight: 600 !important; letter-spacing: -.012em; }
html.k20.k15.k16 .ci-text { font-size: 14.5px !important; color: var(--muted) !important; display: block !important; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: unset !important; }
html.k20.k15.k16 .ci-text b { color: var(--text) !important; font-weight: 500; }
html.k20.k15.k16 .ci-time { font-size: 12.5px !important; color: var(--muted) !important; }
html.k20.k15.k16 .chat-item.has-unread .ci-title { font-weight: 700 !important; }
html.k20.k15.k16 .chat-item.has-unread .ci-time { color: var(--accent) !important; font-weight: 600; }
html.k20.k15.k16 .badge { background: var(--accent) !important; color: #fff !important; box-shadow: none !important; font-weight: 700; font-size: 12px; min-width: 20px; height: 20px; line-height: 20px; border-radius: 99px; }
html.k20.k15.k16 .badge.muted { background: color-mix(in srgb, var(--muted) 45%, transparent) !important; }
html.k20.k15.k16[data-density="compact"] .chat-item { padding: 5px 10px !important; } html.k20.k15.k16[data-density="compact"] .chat-item .avatar { width: 42px; height: 42px; font-size: 16px; }
html.k20.k15.k16[data-density="large"] .chat-item { padding: 11px 12px !important; } html.k20.k15.k16[data-density="large"] .chat-item .avatar { width: 62px; height: 62px; font-size: 23px; } html.k20.k15.k16[data-density="large"] .ci-title { font-size: 17px !important; } html.k20.k15.k16[data-density="large"] .ci-text { font-size: 15.5px !important; }

/* Аватарки-буквы: мягкий фон в тон, цветная буква */
html.k20.k15.k16 .avatar[style*="--av"] { background: color-mix(in srgb, var(--av) 20%, var(--bg)) !important; color: color-mix(in srgb, var(--av) 72%, #000) !important; font-weight: 650; box-shadow: none !important; }
html.k20.k15.k16[data-theme="dark"] .avatar[style*="--av"] { background: color-mix(in srgb, var(--av) 22%, var(--bg)) !important; color: color-mix(in srgb, var(--av) 80%, #fff) !important; }
html.k20.k15.k16 .avatar.saved { background: var(--accent) !important; color: #fff; box-shadow: none !important; }

/* Нижняя панель: стеклянная, активная вкладка — мягкая подложка под иконкой */
  html.k20.k15.k16.k11 .tabbar { left: 14px !important; right: 14px !important; bottom: calc(10px + env(safe-area-inset-bottom)) !important; border-radius: 26px !important; padding: 6px 4px !important; background: var(--bar) !important; -webkit-backdrop-filter: saturate(1.8) blur(22px); backdrop-filter: saturate(1.8) blur(22px); box-shadow: 0 10px 34px rgba(10, 12, 24, .14), 0 0 0 .5px var(--hair) !important; border: 0 !important; }
  html.k20.k15.k16.k11 .tabbar button { background: none !important; box-shadow: none !important; color: var(--muted) !important; border-radius: 18px !important; font-size: 10.5px !important; font-weight: 600 !important; gap: 3px !important; padding: 5px 0 4px !important; }
  html.k20.k15.k16.k11 .tabbar button svg { position: relative; z-index: 1; width: 24px; height: 24px; transform: none !important; }
  html.k20.k15.k16.k11 .tabbar button > span { position: relative; z-index: 1; }
  html.k20.k15.k16.k11 .tabbar button::before { content: ''; position: absolute; top: 2px; left: 50%; width: 56px; height: 32px; margin-left: -28px; border-radius: 16px; background: color-mix(in srgb, var(--accent) 14%, transparent); opacity: 0; transform: scale(.6); transition: opacity .25s var(--e-out), transform .35s var(--e-spring); }
  html.k20.k15.k16.k11 .tabbar button.active { background: none !important; color: var(--accent) !important; box-shadow: none !important; }
  html.k20.k15.k16.k11 .tabbar button.active::before { opacity: 1; transform: none; }
  html.k20.k15.k16.k11 .tabbar button.active svg { stroke-width: 2.2; }
  html.k20.k15.k16.k11 .tabbar .tb-badge { background: #ff3b30 !important; box-shadow: 0 0 0 2px var(--bg) !important; z-index: 2; }
  html.k20.k15.k16[data-tbl="off"].k11 .tabbar button::before { top: 50%; margin-top: -18px; height: 36px; }

/* Чат: шапка-стекло, пузыри, поле ввода */
html.k20.k15.k16 .chat-head { background: var(--bar) !important; -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px); border-bottom: .5px solid var(--hair) !important; box-shadow: none !important; }
html.k20.k15.k16 .chat-title { font-weight: 650; letter-spacing: -.015em; }
html.k20.k15.k16 .chat-status { color: var(--muted); }
html.k20.k15.k16 .row.in .bubble:not(.clear):not(.sticker-b) { background: var(--bubble-in) !important; box-shadow: 0 1px 1.5px rgba(12, 14, 22, .06), 0 0 0 .5px var(--hair) !important; }
html.k20.k15.k16[data-theme="dark"] .row.in .bubble:not(.clear):not(.sticker-b) { box-shadow: 0 0 0 .5px var(--hair) !important; }
html.k20.k15.k16[data-bstyle="solid"] .row.out .bubble:not(.clear):not(.sticker-b), html.k20.k15.k16[data-bstyle="grad"] .row.out .bubble:not(.clear):not(.sticker-b) { box-shadow: 0 1px 2px color-mix(in srgb, var(--ka) 25%, transparent) !important; }
html.k20.k15.k16 .bubble { padding: 7px 11px 6px 12px; line-height: 1.38; }
html.k20.k15.k16 .meta { font-size: 11.5px; letter-spacing: .01em; }
html.k20.k15.k16 .day, html.k20.k15.k16 .service { background: var(--pill) !important; color: var(--text) !important; border-radius: 99px !important; font-size: 12.5px !important; font-weight: 600 !important; box-shadow: 0 0 0 .5px var(--hair); }
html.k20:not(.lite) .day, html.k20:not(.lite) .service { -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6); }
html.k20.k15.k16 .chat.pattern::before { background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--text) 10%, transparent) 1px, transparent 0) !important; background-size: 22px 22px !important; opacity: 1 !important; -webkit-mask: linear-gradient(180deg, #000, rgba(0,0,0,.35)); mask: linear-gradient(180deg, #000, rgba(0,0,0,.35)); }
html.k20.k15.k16 .composer-wrap { background: transparent !important; border-top: 0 !important; }
html.k20.k15.k16 .input-box { background: var(--bg) !important; border-radius: 22px !important; box-shadow: 0 2px 12px rgba(12, 14, 22, .06), 0 0 0 .5px var(--hair) !important; border: 0 !important; }
html.k20.k15.k16[data-theme="dark"] .input-box { background: var(--bg-2) !important; box-shadow: 0 0 0 .5px var(--hair) !important; }
html.k20.k15.k16 .input-box:focus-within { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 4px 16px rgba(12, 14, 22, .08) !important; }
html.k20.k15.k16 .send { background: var(--accent) !important; color: #fff !important; box-shadow: none !important; transition: transform .2s var(--e-spring); }
html.k20.k15.k16 .send:active { transform: scale(.9); }
html.k20.k15.k16 #attachBtn { color: var(--muted) !important; }
html.k20.k15.k16 .scroll-down { background: var(--bg) !important; box-shadow: 0 4px 16px rgba(12, 14, 22, .12), 0 0 0 .5px var(--hair) !important; }

/* Окна, меню, настройки — как в системных приложениях */
html.k20.k15.k16 .modal { background: rgba(8, 10, 16, .32) !important; }
html.k20:not(.lite) .modal { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html.k20.k15.k16 .modal-card { background: var(--bg) !important; box-shadow: var(--shadow-lg) !important; border: 0 !important; }
html.k20.k15.k16 .set-card, html.k20.k15.k16 .set-card .set-page { background: var(--bg-2) !important; }
html.k20.k15.k16[data-theme="dark"] .set-card, html.k20.k15.k16[data-theme="dark"] .set-card .set-page { background: var(--bg) !important; }
html.k20.k15.k16 .set-card .settings-sec, html.k20.k15.k16 .set-card .sm-group, html.k20.k15.k16 .set-card .acc-chip { background: var(--bg) !important; border: 0 !important; box-shadow: 0 0 0 .5px var(--hair) !important; border-radius: 18px !important; }
html.k20.k15.k16[data-theme="dark"] .set-card .settings-sec, html.k20.k15.k16[data-theme="dark"] .set-card .sm-group, html.k20.k15.k16[data-theme="dark"] .set-card .acc-chip { background: var(--bg-2) !important; }
html.k20.k15.k16 .settings-sec h3 { color: var(--muted) !important; font-size: 12.5px !important; font-weight: 650 !important; letter-spacing: .04em !important; text-transform: uppercase; }
html.k20.k15.k16 .sm-item i, html.k20.k15.k16 .set-cats i { background: color-mix(in srgb, var(--accent) 12%, transparent) !important; color: var(--accent) !important; box-shadow: none !important; border-radius: 10px !important; }
html.k20.k15.k16 .sm-item i svg, html.k20.k15.k16 .set-cats i svg { stroke: currentColor !important; color: var(--accent) !important; }
html.k20.k15.k16 .set-cats button { background: var(--bg) !important; box-shadow: 0 0 0 .5px var(--hair) !important; border-radius: 16px !important; }
html.k20.k15.k16[data-theme="dark"] .set-cats button { background: var(--bg-2) !important; }
html.k20.k15.k16 .sp-head { background: color-mix(in srgb, var(--bg-2) 85%, transparent) !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 0 !important; }
html.k20.k15.k16[data-theme="dark"] .sp-head { background: color-mix(in srgb, var(--bg) 85%, transparent) !important; }
html.k20.k15.k16 .pop { background: var(--bar) !important; -webkit-backdrop-filter: saturate(1.8) blur(24px); backdrop-filter: saturate(1.8) blur(24px); border-radius: 16px !important; box-shadow: var(--shadow-lg), 0 0 0 .5px var(--hair) !important; border: 0 !important; }
html.k20.k15.k16 .toast { background: color-mix(in srgb, #15161c 92%, transparent) !important; color: #fff !important; border-radius: 14px !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 8px 28px rgba(0, 0, 0, .22) !important; }

/* Плавность */
html.k20.k15.k16 .chat-item:active { transform: scale(.985); }
html.k20:not(.lite) .row.fresh .bubble, html.k20:not(.lite) .row.new .bubble { animation: k20In .32s var(--e-out) both; }
@keyframes k20In { from { opacity: 0; transform: translateY(6px) scale(.98); } }
html.k20 ::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }

/* ===================== НЕОН ===================== */
html.k20.k15.k16[data-style="neon"] .side-title { background: linear-gradient(90deg, var(--text) 30%, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
html.k20.k15.k16[data-style="neon"] .btn:not(.ghost):not(.danger):not(.danger-fill) { color: #031015 !important; box-shadow: var(--nglow) !important; }
html.k20.k15.k16[data-style="neon"] #composeBtn, html.k20.k15.k16[data-style="neon"] .send, html.k20.k15.k16[data-style="neon"] .avatar.saved { color: #031015 !important; box-shadow: var(--nglow) !important; }
html.k20.k15.k16[data-style="neon"] .badge:not(.muted) { color: #031015 !important; box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent) !important; }
html.k20.k15.k16[data-style="neon"] .folders button.active { background: color-mix(in srgb, var(--accent) 14%, transparent) !important; color: var(--accent) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 14px color-mix(in srgb, var(--accent) 22%, transparent) !important; }
html.k20.k15.k16[data-style="neon"] .chat-item.active { background: color-mix(in srgb, var(--accent) 9%, var(--bg)) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent) !important; }
html.k20.k15.k16[data-style="neon"] .st-ring:not(.none) { box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 55%, transparent); }
html.k20.k15.k16[data-style="neon"] .avatar[style*="--av"] { background: color-mix(in srgb, var(--av) 12%, #07070b) !important; color: var(--av) !important; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--av) 55%, transparent) !important; }
html.k20.k15.k16[data-style="neon"] .switch input:checked + span { box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 55%, transparent); }
html.k20.k15.k16[data-style="neon"] .row.out .bubble:not(.clear):not(.sticker-b) { background: color-mix(in srgb, var(--ka) 15%, #08080d) !important; color: #f3fbff !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ka) 55%, transparent), 0 0 22px -6px color-mix(in srgb, var(--ka) 70%, transparent) !important;
  --text: #f3fbff; --muted: rgba(255, 255, 255, .6); --out-meta: color-mix(in srgb, var(--ka) 75%, #fff); --accent: var(--ka); --bg-2: color-mix(in srgb, var(--ka) 12%, transparent); --bg-3: color-mix(in srgb, var(--ka) 18%, transparent); --border: color-mix(in srgb, var(--ka) 35%, transparent); --hover: color-mix(in srgb, var(--ka) 10%, transparent); }
html.k20.k15.k16[data-style="neon"] .row.out .bubble:not(.clear) .meta, html.k20.k15.k16[data-style="neon"] .row.out .bubble:not(.clear) .meta svg { color: var(--out-meta) !important; }
html.k20.k15.k16[data-style="neon"] .row.out .bubble:not(.clear) a:not(.btn):not(.media):not(.file):not(.loc-card) { color: var(--ka) !important; }
html.k20.k15.k16[data-style="neon"] .row.out .bubble:not(.clear) .voice .play { background: var(--ka) !important; color: #031015 !important; }
html.k20.k15.k16[data-style="neon"] .row.out .bubble:not(.clear) .voice .wave i { background: color-mix(in srgb, var(--ka) 60%, transparent) !important; }
html.k20.k15.k16[data-style="neon"] .row.out .bubble:not(.clear) .reply { background: color-mix(in srgb, var(--ka) 12%, transparent) !important; border-color: var(--ka) !important; }
html.k20.k15.k16[data-style="neon"] .row.in .bubble:not(.clear):not(.sticker-b) { background: var(--bubble-in) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06) !important; }
html.k20.k15.k16[data-style="neon"] .input-box { background: var(--bg-2) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06) !important; }
html.k20.k15.k16[data-style="neon"] .input-box:focus-within { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 18px -4px color-mix(in srgb, var(--accent) 50%, transparent) !important; }
html.k20.k15.k16[data-style="neon"] .tabbar button.active svg { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 80%, transparent)); }
html.k20.k15.k16[data-style="neon"] .sm-item i, html.k20.k15.k16[data-style="neon"] .set-cats i { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent) !important; }
html.k20.k15.k16[data-style="neon"] .chat-head, html.k20.k15.k16[data-style="neon"] .tabbar { box-shadow: 0 0 0 .5px rgba(255, 255, 255, .06), 0 10px 30px rgba(0, 0, 0, .5) !important; }

/* ===================== Страница «Оформление» ===================== */
.k20-lbl { font-size: 13px; font-weight: 650; color: var(--muted); margin: 16px 0 8px; }
.k20-styles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.k20-style { border: 0; font: inherit; color: var(--text); background: var(--bg-2); border-radius: 18px; padding: 8px 8px 10px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 2px; box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow .2s, transform .15s var(--e-out); }
.k20-style:active { transform: scale(.97); }
.k20-style.active { box-shadow: inset 0 0 0 2px var(--accent); }
.k20-style b { font-size: 15px; margin: 6px 4px 0; } .k20-style small { font-size: 12px; color: var(--muted); margin: 0 4px; }
.k20-sp { position: relative; display: block; height: 78px; border-radius: 12px; overflow: hidden; }
.k20-sp i { position: absolute; height: 14px; border-radius: 8px; }
.k20-sp i:nth-child(1) { left: 10px; top: 14px; width: 55%; } .k20-sp i:nth-child(2) { left: 10px; top: 33px; width: 38%; } .k20-sp i:nth-child(3) { right: 10px; bottom: 12px; width: 50%; }
.k20-sp-premium { background: #eef0f3; } .k20-sp-premium i:nth-child(-n+2) { background: #fff; box-shadow: 0 0 0 .5px rgba(0,0,0,.08); } .k20-sp-premium i:nth-child(3) { background: #168cff; }
.k20-sp-neon { background: radial-gradient(80% 90% at 20% 10%, rgba(31, 213, 255, .28), transparent 60%), radial-gradient(70% 80% at 90% 100%, rgba(255, 43, 214, .16), transparent 60%), #05050a; }
.k20-sp-neon i:nth-child(-n+2) { background: #15151c; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); } .k20-sp-neon i:nth-child(3) { background: rgba(31, 213, 255, .16); box-shadow: inset 0 0 0 1px rgba(31, 213, 255, .7), 0 0 14px rgba(31, 213, 255, .55); }
.k20-neon-note { display: none; margin: 6px 0 0 !important; }
html[data-style="neon"] .k20-neon-note { display: block; }
html[data-style="neon"] #lkThemeSlot { opacity: .4; pointer-events: none; }
html[data-style="neon"] .k20-prem-only { display: none !important; }
#lkWallSlot .set-row { margin-top: 6px; }
.k20-more { margin: 10px 0 0; }
.k20-more summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 14px 16px; margin: 0 14px; border-radius: 18px; background: var(--bg); box-shadow: 0 0 0 .5px var(--hair); }
html[data-theme="dark"] .k20-more summary { background: var(--bg-2); }
.k20-more summary::-webkit-details-marker { display: none; }
.k20-more summary span { font-weight: 600; } .k20-more summary small { grid-column: 1; color: var(--muted); font-size: 12.5px; }
.k20-more summary svg { grid-row: 1 / span 2; grid-column: 2; transform: rotate(-90deg); transition: transform .25s var(--e-out); color: var(--muted); }
.k20-more[open] summary svg { transform: rotate(90deg); }
.k20-more[open] .k20-more-body { animation: k20Fold .3s var(--e-out); }
@keyframes k20Fold { from { opacity: 0; transform: translateY(-6px); } }
html.k20 .k16-prev { border-radius: 20px; box-shadow: 0 0 0 .5px var(--hair), 0 10px 30px rgba(12, 14, 22, .08); }
html.k20 .k16-prev .kp-head .avatar { background: color-mix(in srgb, var(--av) 20%, var(--bg)) !important; color: color-mix(in srgb, var(--av) 72%, #000) !important; }
html.k20 .k16-prev .kp-row.in .kp-b { box-shadow: 0 0 0 .5px var(--hair); }
html.k20 .k16-prev .kp-row.out .kp-b { background: var(--ka); color: #fff; }
html.k20[data-bstyle="grad"] .k16-prev .kp-row.out .kp-b { background: var(--out-grad); }
html.k20[data-style="neon"] .k16-prev .kp-row.out .kp-b { background: color-mix(in srgb, var(--ka) 15%, #08080d); color: #f3fbff; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ka) 55%, transparent), 0 0 18px -5px var(--ka); }
html.k20[data-style="neon"] .k16-prev .kp-row.out .kp-b em { color: var(--ka); opacity: 1; }
html.k20 .k16-swatches .swatch.active { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text) !important; }
html.k20.k15.k16[data-style="neon"] #composeBtn svg, html.k20.k15.k16[data-style="neon"] .send svg, html.k20.k15.k16[data-style="neon"] .avatar.saved svg { color: #031015 !important; stroke: #031015 !important; }
html.k20.k15.k16[data-style="neon"] .chat-item .badge:not(.muted) { color: #031015 !important; }

/* 6.1 — Заработок */
.ern-hero { text-align: center; padding: 18px 14px 16px; border-radius: 20px; background: var(--bg-2); margin-bottom: 12px; position: relative; overflow: hidden; }
.ern-hero::before { content: ''; position: absolute; inset: -40% -20% auto; height: 120%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 16%, transparent), transparent); pointer-events: none; }
.ern-hero > * { position: relative; }
.ern-hero small { display: block; color: var(--muted); font-size: 13px; font-weight: 600; }
.ern-hero b { display: block; font-size: 34px; font-weight: 750; letter-spacing: -.03em; margin: 2px 0 2px; }
.ern-hero span { color: var(--muted); font-size: 13px; }
.ern-hold { margin-top: 10px; font-size: 12.5px; color: var(--text); background: var(--bg); border-radius: 12px; padding: 7px 10px; display: inline-block; box-shadow: 0 0 0 .5px var(--hair); }
.ern-ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.ern-ways button { border: 0; font: inherit; color: var(--text); background: var(--bg-2); border-radius: 16px; padding: 12px 10px; text-align: left; display: flex; flex-direction: column; gap: 3px; cursor: pointer; transition: transform .15s; }
.ern-ways button:active { transform: scale(.97); }
.ern-ways i { font-style: normal; font-size: 22px; } .ern-ways b { font-size: 13.5px; } .ern-ways small { font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.ern-box { background: var(--bg-2); border-radius: 16px; padding: 4px 14px; margin-bottom: 12px; }
.ern-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; font-size: 14px; }
.ern-row + .ern-row { border-top: .5px solid var(--hair); }
.ern-row b { white-space: nowrap; text-align: right; } .ern-row b small { color: var(--muted); font-weight: 500; }
.ern-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.ern-amt { position: relative; } .ern-amt .field { font-size: 20px; font-weight: 700; padding-right: 110px; }
.ern-amt span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 600; font-size: 14px; }
.ern-phone { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 10px 12px; background: var(--bg-2); border-radius: 13px; } .ern-phone svg { width: 18px; height: 18px; color: var(--accent); }
.ern-agree { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--muted); line-height: 1.4; cursor: pointer; }
.ern-agree input { margin-top: 2px; accent-color: var(--accent); width: 18px; height: 18px; flex-shrink: 0; }
.ern-foot { font-size: 12px; line-height: 1.45; margin-top: 4px; }
.ern-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ern-presets button { border: 0; font: inherit; font-weight: 600; font-size: 13.5px; padding: 8px 12px; border-radius: 99px; background: var(--bg-2); color: var(--text); cursor: pointer; }
.ern-presets button.active { background: var(--accent); color: #fff; }
html[data-style="neon"] .ern-presets button.active { color: #031015; }
.paid-chip { display: inline-block; margin-top: 8px; padding: 6px 12px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-weight: 600; font-size: 13px; }
@media (max-width: 420px) { .ern-ways { grid-template-columns: 1fr; } .ern-ways button { flex-direction: row; align-items: center; gap: 10px; } .ern-ways small { flex: 1; } .ern-ways b { min-width: 92px; } }
.ern-card .label { display: block; margin: 16px 4px 8px !important; font-size: 13px; font-weight: 650; color: var(--muted); line-height: 1.3; }
.ern-phone span { display: flex; flex-direction: column; } .ern-phone small { font-size: 12px; }
#prEarn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; padding: 0; } #prEarn svg { width: 16px; height: 16px; }
html.k20 .modal-card .label { line-height: 1.35; margin-bottom: 8px !important; overflow: visible; }
/* 6.2 — подарки из магазина в Маркете */
.mk-shop-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 4px !important; }
.mk-shop-h small { font-weight: 500; color: var(--muted); font-size: 12.5px; }
.mk-shopbar { display: block; width: 80%; height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; }
.mk-shopbar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
html.k20 .toast { display: block !important; max-width: min(92vw, 440px); text-align: center; line-height: 1.4; }
html.k20 .toast img.emo, html.k20 .toast svg { vertical-align: -3px; margin: 0 2px; }

/* 6.3 — живые подарки: появление, отклик на нажатие, «открытие» подарка с лучами и искрами */
@keyframes gIn { from { opacity: 0; transform: translateY(16px) scale(.9); } }
@keyframes gJump { 0% { transform: none; } 30% { transform: translateY(-10px) scale(1.14) rotate(-8deg); } 55% { transform: translateY(0) scale(.94) rotate(5deg); } 75% { transform: translateY(-3px) scale(1.04) rotate(-2deg); } 100% { transform: none; } }
@keyframes gPop { 0% { transform: scale(.2) rotate(-25deg); opacity: 0; filter: blur(4px); } 55% { transform: scale(1.18) rotate(6deg); opacity: 1; filter: none; } 75% { transform: scale(.95) rotate(-3deg); } 100% { transform: none; } }
@keyframes gFloat { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-7px) rotate(2.5deg); } }
@keyframes gGlow { 0%, 100% { box-shadow: 0 10px 30px rgba(0,0,0,.18), 0 0 0 0 rgba(255,255,255,.0); } 50% { box-shadow: 0 14px 40px rgba(0,0,0,.22), 0 0 34px 4px rgba(255,255,255,.28); } }
@keyframes gRays { to { transform: rotate(360deg); } }
@keyframes gTwinkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(90deg); } }
@keyframes gSweep { 0% { transform: translateX(-130%) skewX(-18deg); } 100% { transform: translateX(230%) skewX(-18deg); } }

/* Плитки: появляются волной, эмодзи подпрыгивает при наведении и нажатии */
.gift-tile.gin, .mk-card.gin { animation: gIn .5s cubic-bezier(.34, 1.4, .64, 1) backwards; animation-delay: calc(var(--i, 0) * 30ms); }
.gift-tile .gt-e, .mk-card .mk-gift > span { display: inline-block; transition: transform .2s; will-change: transform; }
.gift-tile:hover .gt-e, .gift-tile:active .gt-e, .gift-tile.tap .gt-e, .mk-card:hover .mk-gift > span, .mk-card.tap .mk-gift > span { animation: gJump .75s cubic-bezier(.34, 1.4, .64, 1); }
.gift-tile:active { transform: scale(.95) !important; }
.gift-tile .gt-sweep { position: absolute; top: 0; bottom: 0; left: 0; width: 45%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); transform: translateX(-130%) skewX(-18deg); pointer-events: none; }
.gift-tile:hover .gt-sweep, .gift-tile.tap .gt-sweep { animation: gSweep .8s ease-out; }

/* Большой подарок (открытка, карточка в Маркете): выпрыгивает, парит, вокруг лучи и искры */
.gift-card.big { overflow: hidden; isolation: isolate; }
.gift-card.big .gc-e { animation: gPop .9s cubic-bezier(.34, 1.5, .64, 1) both, gFloat 3.2s ease-in-out .9s infinite !important; }
.gift-card.big .gc-e img.emo { width: 110px; height: 110px; }
.gift-card.big::before { inset: -60%; background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.22) 0 8deg, transparent 8deg 24deg) !important; animation: gRays 14s linear infinite !important; -webkit-mask: radial-gradient(circle, #000 0, transparent 62%); mask: radial-gradient(circle, #000 0, transparent 62%); z-index: -1; }
.mk-show { position: relative; }
.mk-gift.lg { position: relative; animation: gPop .9s cubic-bezier(.34, 1.5, .64, 1) both, gGlow 2.6s ease-in-out .9s infinite; }
.mk-gift.lg > span { display: inline-block; animation: gFloat 3.2s ease-in-out .9s infinite; }
.mk-gift.lg > span img.emo { width: 72px; height: 72px; }
.gfx-spark { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.gfx-spark i { position: absolute; width: 14px; height: 14px; opacity: 0; animation: gTwinkle 2.2s ease-in-out infinite; background: radial-gradient(circle, #fff 0 18%, transparent 20%), conic-gradient(from 45deg, transparent 0 20%, rgba(255,255,255,.95) 25%, transparent 30% 45%, rgba(255,255,255,.95) 50%, transparent 55% 70%, rgba(255,255,255,.95) 75%, transparent 80%); border-radius: 50%; filter: drop-shadow(0 0 4px rgba(255,255,255,.9)); }
.gfx-spark i:nth-child(1) { left: 12%; top: 18%; animation-delay: .9s; }
.gfx-spark i:nth-child(2) { right: 14%; top: 12%; animation-delay: 1.3s; width: 10px; height: 10px; }
.gfx-spark i:nth-child(3) { left: 20%; bottom: 22%; animation-delay: 1.7s; width: 9px; height: 9px; }
.gfx-spark i:nth-child(4) { right: 18%; bottom: 30%; animation-delay: 2.1s; }
.gfx-spark i:nth-child(5) { left: 48%; top: 6%; animation-delay: 2.5s; width: 8px; height: 8px; }
.gfx-spark i:nth-child(6) { right: 40%; bottom: 8%; animation-delay: 2.9s; width: 11px; height: 11px; }
.mk-show .gfx-spark i { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 80%, #fff)); background: radial-gradient(circle, var(--accent) 0 18%, transparent 20%), conic-gradient(from 45deg, transparent 0 20%, var(--accent) 25%, transparent 30% 45%, var(--accent) 50%, transparent 55% 70%, var(--accent) 75%, transparent 80%); }
.mk-gift.lg.luxb { box-shadow: 0 0 0 3px #ffc400, 0 0 40px rgba(255, 196, 0, .55); }
/* Подарок в чате: при наведении — подпрыгивает */
.gift-card:not(.big):hover .gc-e { animation: gJump .75s cubic-bezier(.34, 1.4, .64, 1); }

/* 6.17: подарки НЕ упрощаем в «Плавном» режиме — всегда вид как в 6.12 */
@media (prefers-reduced-motion: reduce) { .gift-tile.gin, .mk-card.gin, .gift-card.big .gc-e, .mk-gift.lg, .mk-gift.lg > span, .gift-card.big::before, .gift-tile .gt-e, .mk-card .mk-gift > span { animation: none !important; } .gfx-spark { display: none; } }

/* 6.4 — проверка ссылок */
.bubble a.lnk-warn { text-decoration: underline wavy color-mix(in srgb, #f5a524 80%, transparent) !important; text-underline-offset: 3px; }
.bubble a.lnk-danger { text-decoration: underline wavy #ef4444 !important; text-underline-offset: 3px; }
.bubble a.lnk-warn::before, .bubble a.lnk-danger::before { content: '⚠️'; display: inline-block; font-size: .85em; margin-right: 3px; text-decoration: none; }
.bubble a.lnk-danger::before { content: '⛔'; }
.lg-wrap { z-index: 120 !important; background: rgba(8, 10, 16, .45) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 16px; }
.lg-wrap > .lg-sheet { width: 100%; max-width: 380px !important; border-radius: 26px !important; padding: 22px 20px 16px !important; text-align: center; animation: lgIn .35s cubic-bezier(.34, 1.4, .64, 1); box-shadow: 0 24px 60px rgba(0,0,0,.35) !important; }
@keyframes lgIn { from { opacity: 0; transform: translateY(20px) scale(.94); } }
.lg-ico { width: 64px; height: 64px; margin: 0 auto 8px; border-radius: 22px; display: grid; place-items: center; font-size: 34px; }
.lg-danger .lg-ico { background: color-mix(in srgb, #ef4444 14%, transparent); animation: lgShake .5s .25s; }
.lg-warn .lg-ico { background: color-mix(in srgb, #f5a524 16%, transparent); }
@keyframes lgShake { 20%, 60% { transform: rotate(-8deg); } 40%, 80% { transform: rotate(8deg); } }
.lg-sheet h3 { font-size: 19px; font-weight: 750; letter-spacing: -.02em; margin-bottom: 8px; }
.lg-danger h3 { color: #ef4444; }
.lg-host { font-size: 14.5px; color: var(--muted); background: var(--bg-2); border-radius: 12px; padding: 8px 12px; word-break: break-all; margin-bottom: 12px; }
.lg-host b { color: var(--text); }
.lg-why { list-style: none; text-align: left; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lg-why li { font-size: 14px; line-height: 1.35; padding-left: 22px; position: relative; }
.lg-why li::before { content: '•'; position: absolute; left: 8px; color: #ef4444; font-weight: 900; }
.lg-warn .lg-why li::before { color: #f5a524; }
.lg-tip { font-size: 12.5px !important; color: var(--muted); line-height: 1.45; text-align: left; margin-bottom: 14px !important; }
.lg-acts { display: flex; flex-direction: column; gap: 8px; }
.lg-acts .btn { width: 100%; justify-content: center; }
.lg-danger .lg-acts .btn.ghost { color: #ef4444 !important; background: color-mix(in srgb, #ef4444 9%, transparent) !important; }
.lg-rep { border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; padding: 4px; }
.lg-adm { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } @media (max-width: 600px) { .lg-adm { grid-template-columns: 1fr; } }
.lg-adm textarea { font-family: ui-monospace, monospace; font-size: 13px; }
html.k20.k15.k16 .lg-danger .lg-acts .btn.ghost { color: #ef4444 !important; background: color-mix(in srgb, #ef4444 9%, transparent) !important; }
.lg-rep { align-self: center; }
/* 6.5 — звонок: кнопка включения звука и видео, если телефон заблокировал автозапуск */
.call-unmute { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6; border: 0; font: inherit; font-weight: 650; font-size: 15px; color: #fff; background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); padding: 14px 20px; border-radius: 18px; cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,.35); animation: lgIn .35s cubic-bezier(.34, 1.4, .64, 1); }
#callUI.mini .call-unmute { font-size: 11px; padding: 6px 10px; }
/* 6.6 — видео в звонке без «приближения» */
.call video.remote-bg { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; filter: blur(28px) brightness(.55) saturate(1.2); opacity: 0; transition: opacity .3s; pointer-events: none; }
.call.has-video.fit-contain video.remote-bg { opacity: 1; }
.call.fit-contain video.remote { object-fit: contain !important; background: transparent !important; }
.call video.local { aspect-ratio: 3 / 4; object-fit: cover; height: auto; max-height: 34vh; }
html.lite .call video.remote-bg { display: none; }
.call.mini video.remote-bg { display: none; }


/* 6.9 — «Ещё раз» в играх, капсула, умный поиск в строке поиска */
@keyframes dmAgain { 0% { opacity: 0; transform: translateY(6px) scale(.9); visibility: hidden; } 8%, 88% { opacity: 1; transform: none; visibility: visible; } 100% { opacity: 0; transform: scale(.9); visibility: hidden; } }
.dm-again { margin: 8px 0 4px; border: 0; font: inherit; font-weight: 700; font-size: 13.5px; padding: 7px 14px; border-radius: 99px; cursor: pointer; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); opacity: 0; visibility: hidden; animation: dmAgain 5s ease both; position: relative; overflow: hidden; }
.dm-again::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: currentColor; opacity: .5; transform-origin: left; animation: dmBar 5s linear both; animation-delay: inherit; }
@keyframes dmBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.row.out .dm-again { color: #fff; background: rgba(255,255,255,.2); }
html[data-style="neon"] .row.out .dm-again { color: var(--ka); background: color-mix(in srgb, var(--ka) 16%, transparent); }
.cap-date { width: 100% !important; box-sizing: border-box; min-height: 48px; }
.smart-row { display: flex; align-items: center; gap: 12px; width: calc(100% - 16px); margin: 4px 8px 6px; padding: 10px 12px; border: 0; border-radius: 16px; font: inherit; color: var(--text); text-align: left; cursor: pointer; background: color-mix(in srgb, var(--accent) 9%, var(--bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent); animation: lgIn .3s ease; }
.smart-row i { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--accent); color: #fff; flex-shrink: 0; }
html[data-style="neon"] .smart-row i { color: #031015; box-shadow: var(--nglow); }
.smart-row i svg { width: 20px; height: 20px; }
.smart-row span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.smart-row b { font-size: 14.5px; } .smart-row small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smart-row > svg { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; }

/* =====================================================================
   6.10 — Premium-статусы Kuvo, кнопка оформления в профиле, предпросмотр рамки,
   новая светлая тема: фон «Волна», сообщения с цветной гранью
   ===================================================================== */
.kvs { display: inline-flex; width: 1.08em; height: 1.08em; margin-left: 4px; vertical-align: -0.16em; flex-shrink: 0; }
.kvs svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.18)); }
@keyframes kvFlick { 0%, 100% { transform: scale(1) rotate(0); } 30% { transform: scale(1.06, .96) rotate(-2deg); } 60% { transform: scale(.97, 1.05) rotate(2deg); } }
@keyframes kvBeat { 0%, 60%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } 30% { transform: scale(.96); } }
@keyframes kvTwinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(.82) rotate(45deg); opacity: .8; } }
@keyframes kvFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
.kvs-flame svg { animation: kvFlick 1.6s ease-in-out infinite; transform-origin: 50% 90%; }
.kvs-heart svg { animation: kvBeat 1.8s ease-in-out infinite; }
.kvs-spark svg, .kvs-star svg { animation: kvTwinkle 2.6s ease-in-out infinite; }
.kvs-ghost svg, .kvs-rocket svg, .kvs-planet svg { animation: kvFloat 2.4s ease-in-out infinite; }
.p2-es.kvs, .pc-name .kvs { width: 1.15em; height: 1.15em; }
html.lite .kvs svg { animation: none !important; }
.kv-pick { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; }
.kv-pick button { height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--bg-2); border: 0; cursor: pointer; }
.kv-pick button .kvs { width: 26px; height: 26px; margin: 0; }
.kv-pick button.active { box-shadow: inset 0 0 0 2px var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--bg-2)); }
.kv-pick.locked button:not(:first-child) { opacity: .55; }

.pf-style { display: flex; align-items: center; gap: 12px; width: 100%; margin: 12px 0 4px; padding: 12px 14px; border: 0; border-radius: 16px; font: inherit; color: var(--text); text-align: left; cursor: pointer; background: color-mix(in srgb, var(--accent) 8%, var(--bg-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent); }
.pf-style i { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--accent); color: #fff; flex-shrink: 0; }
html[data-style="neon"] .pf-style i { color: #031015; }
.pf-style i svg { width: 20px; height: 20px; }
.pf-style span { flex: 1; display: flex; flex-direction: column; } .pf-style small { color: var(--muted); font-size: 12.5px; }
.pf-style > svg { width: 18px; height: 18px; color: var(--muted); }

.fr-card { cursor: pointer; }
.fp-sheet { max-width: 400px !important; width: 100%; }
.fp-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 0 16px; margin: -4px -4px 12px; border-radius: 22px; background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%), var(--bg-2); overflow: hidden; }
.fp-big { padding: 10px; animation: gPop .7s cubic-bezier(.34, 1.5, .64, 1) both; }
.fp-stage b { font-size: 18px; font-weight: 750; margin-top: 6px; } .fp-stage span { color: var(--muted); font-size: 13px; }
.fp-label { font-size: 12.5px; font-weight: 650; color: var(--muted); margin: 6px 4px 8px; text-align: left; }
.fp-demo { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.fp-row, .fp-head { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: var(--bg-2); text-align: left; }
.fp-row > div, .fp-head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fp-row small, .fp-head small { color: var(--muted); font-size: 13px; } .fp-head small { color: var(--accent); }
.fp-row em { font-style: normal; font-size: 12px; color: var(--muted); align-self: flex-start; }
.fp-row .avatar.md { width: 52px; height: 52px; font-size: 20px; } .fp-head .avatar.sm { width: 38px; height: 38px; font-size: 15px; }
.fp-colors { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 14px; }
.fp-colors .fr-c { width: 32px; height: 32px; }

/* ---------- Светлая тема: фон «Волна» и сообщения с цветной гранью ---------- */
:root.k20:not([data-theme="dark"])[data-wall="kuvo"] {
  --chat-grad: linear-gradient(170deg, #f4f7ff 0%, #eef7f6 52%, #fdf6ef 100%);
  --b1: color-mix(in srgb, var(--accent) 22%, #f4f7ff); --b2: #c8f1e6; --b3: #ffe2cf; --b4: #dce8ff; --pill: rgba(255,255,255,.78);
}
html.k20.k15.k16:not([data-theme="dark"])[data-wall="kuvo"] .chat.pattern::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='56'%3E%3Cpath d='M0 28 C 22 12, 68 12, 90 28 S 158 44, 180 28' fill='none' stroke='%231c4e8a' stroke-opacity='.075' stroke-width='1.4'/%3E%3Cpath d='M0 46 C 22 30, 68 30, 90 46 S 158 62, 180 46' fill='none' stroke='%2300a896' stroke-opacity='.05' stroke-width='1.2'/%3E%3C/svg%3E") !important;
  background-size: 180px 56px !important; -webkit-mask: linear-gradient(180deg, #000, rgba(0,0,0,.45)); mask: linear-gradient(180deg, #000, rgba(0,0,0,.45));
}
/* входящие — белые с тонкой цветной гранью и мягкой цветной тенью */
html.k20.k15.k16:not([data-theme="dark"]):not([data-style="neon"]) .row.in .bubble:not(.clear):not(.sticker-b):not(.only-media) {
  border: 1px solid transparent !important;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, color-mix(in srgb, var(--ka) 55%, transparent), color-mix(in srgb, #00c2a8 40%, transparent) 55%, rgba(255,255,255,.4)) border-box !important;
  box-shadow: 0 3px 12px -4px color-mix(in srgb, var(--ka) 30%, transparent), 0 1px 2px rgba(15, 25, 50, .05) !important;
}
/* исходящие — объёмные: блик сверху и цветная тень */
html.k20.k15.k16:not([data-theme="dark"]):not([data-style="neon"])[data-bstyle="solid"] .row.out .bubble:not(.clear):not(.sticker-b) {
  background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0) 55%), var(--ka) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 6px 16px -6px color-mix(in srgb, var(--ka) 70%, transparent) !important;
}
html.k20.k15.k16:not([data-theme="dark"]):not([data-style="neon"])[data-bstyle="grad"] .row.out .bubble:not(.clear):not(.sticker-b) {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 6px 16px -6px color-mix(in srgb, var(--ka) 70%, transparent) !important;
}
html.k20.k15.k16:not([data-theme="dark"]):not([data-style="neon"])[data-bstyle="soft"] .row.out .bubble:not(.clear):not(.sticker-b) {
  border: 1px solid color-mix(in srgb, var(--ka) 35%, transparent) !important;
}
html.k20.k15.k16:not([data-theme="dark"]) .day, html.k20.k15.k16:not([data-theme="dark"]) .service { color: color-mix(in srgb, var(--ka) 60%, #1b2a40) !important; box-shadow: 0 2px 8px -2px rgba(20, 40, 80, .12), 0 0 0 .5px var(--hair) !important; }
html.k20.k15.k16:not([data-theme="dark"]) .input-box { box-shadow: 0 4px 16px -4px color-mix(in srgb, var(--ka) 22%, transparent), 0 0 0 1px color-mix(in srgb, var(--ka) 14%, var(--hair)) !important; }
/* предпросмотр в «Оформлении» — так же */
html.k20:not([data-theme="dark"]):not([data-style="neon"]) .k16-prev .kp-row.in .kp-b { border: 1px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, color-mix(in srgb, var(--ka) 55%, transparent), color-mix(in srgb, #00c2a8 40%, transparent) 55%, rgba(255,255,255,.4)) border-box; box-shadow: 0 3px 12px -4px color-mix(in srgb, var(--ka) 30%, transparent); }
html.k20:not([data-theme="dark"]):not([data-style="neon"])[data-bstyle="solid"] .k16-prev .kp-row.out .kp-b { background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0) 55%), var(--ka); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 6px 16px -6px color-mix(in srgb, var(--ka) 70%, transparent); }
:root.k20:not([data-theme="dark"])[data-wall="kuvo"] .k16-prev .kp-wall::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='56'%3E%3Cpath d='M0 28 C 22 12, 68 12, 90 28 S 158 44, 180 28' fill='none' stroke='%231c4e8a' stroke-opacity='.08' stroke-width='1.4'/%3E%3C/svg%3E"); background-size: 180px 56px; }
/* миниатюра обоев «Kuvo» в светлой теме */
:root.k20:not([data-theme="dark"]) .wall-opt[data-v="kuvo"] span { background: radial-gradient(circle at 25% 25%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 55%), radial-gradient(circle at 80% 75%, #c8f1e6, transparent 55%), linear-gradient(170deg, #f4f7ff, #fdf6ef) !important; }
.kv-pick button .kvs { width: 28px !important; height: 28px !important; margin: 0 !important; font-size: 28px; }
.kv-pick button .kvs svg { width: 28px !important; height: 28px !important; }
.fp-row .avatar, .fp-head .avatar { flex: 0 0 auto !important; }
.fp-row .avatar.md { width: 52px !important; height: 52px !important; min-width: 52px; }
.fp-head .avatar.sm { width: 38px !important; height: 38px !important; min-width: 38px; }
.kv-pick { max-height: none !important; overflow: visible !important; }

/* 6.11 — удаление у обоих, папка «Секретные», чистые вкладки Контакты и Звонки */
.del-wrap { z-index: 120 !important; background: rgba(8, 10, 16, .45) !important; padding: 16px; }
.del-sheet { width: 100%; max-width: 360px !important; border-radius: 22px !important; padding: 20px !important; animation: lgIn .3s cubic-bezier(.34, 1.4, .64, 1); }
.del-sheet > b { display: block; font-size: 17px; margin-bottom: 14px; }
.del-both { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; background: var(--bg-2); cursor: pointer; font-weight: 600; }
.del-both input { width: 20px; height: 20px; accent-color: #ef4444; }
.del-sheet p { font-size: 13px; margin: 10px 2px 14px; line-height: 1.4; }
.del-sheet .danger-fill { background: #ef4444 !important; color: #fff !important; }
.secret-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 14px 8px; padding: 10px 12px; border-radius: 14px; font-size: 13px; color: var(--muted); background: color-mix(in srgb, #2fb36b 10%, var(--bg-2)); }
.secret-bar button { border: 0; font: inherit; font-weight: 650; color: #2fb36b; background: color-mix(in srgb, #2fb36b 14%, transparent); padding: 6px 12px; border-radius: 99px; cursor: pointer; }
#folders [data-filter="secret"].active { background: #2fb36b !important; color: #fff !important; }
/* на вкладках «Контакты» и «Звонки» — без поиска чатов и без второго заголовка */
.sidebar:has(#sidePage:not(.hidden)) .search-form, .sidebar:has(#sidePage:not(.hidden)) #smartBtn, .sidebar:has(#sidePage:not(.hidden)) .install-banner { display: none !important; }
#sidePage .sp-head { display: none !important; }
#sidePage .sp-search { margin-top: 4px; }
.secret-bar { flex-direction: row !important; text-align: left; } .secret-bar span { flex: 1; }

/* =====================================================================
   6.13 — Контакты (одна строка поиска, «+», QR), сканер, Звонки как в современных звонилках
   ===================================================================== */
#peopleAdd { display: none !important; }
.sidebar[data-tab="contacts"] #peopleAdd, .sidebar[data-tab="calls"] #peopleAdd { display: grid !important; background: var(--accent) !important; color: #fff !important; }
html[data-style="neon"] .sidebar[data-tab="contacts"] #peopleAdd, html[data-style="neon"] .sidebar[data-tab="calls"] #peopleAdd { color: #031015 !important; box-shadow: var(--nglow) !important; }
.sidebar[data-tab="contacts"] .search-form, .sidebar[data-tab="calls"] .search-form,
.sidebar[data-tab="contacts"] #smartBtn, .sidebar[data-tab="calls"] #smartBtn { display: none !important; }
#sidePage .sp-search { margin: 4px 12px 8px !important; }
#sidePage .sp-actions button { font-weight: 600; }

.ac-search { margin-bottom: 10px; }
.ac-found { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.ac-found button, .cp-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 0; border-radius: 14px; background: var(--bg-2); font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.ac-found span, .cp-row > span { flex: 1; min-width: 0; display: flex; flex-direction: column; } .ac-found small, .cp-row small { color: var(--muted); font-size: 12.5px; }
.ac-found em { font-style: normal; color: var(--accent); font-weight: 650; font-size: 13px; }
.ac-none { color: var(--muted); font-size: 13.5px; text-align: center; padding: 14px 6px; line-height: 1.45; }
.ac-menu { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--bg-2); }
.ac-menu button { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 0; background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.ac-menu button + button { border-top: .5px solid var(--hair); }
.ac-menu i { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); flex-shrink: 0; }
.ac-menu i svg { width: 20px; height: 20px; } .ac-menu span { flex: 1; display: flex; flex-direction: column; } .ac-menu small { color: var(--muted); font-size: 12.5px; }
.ac-menu > button > svg { width: 18px; height: 18px; color: var(--muted); }
.ac-myqr { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 16px; text-align: center; }
.ac-qrbox canvas, .myqr-code canvas { width: 190px !important; height: 190px !important; border-radius: 16px; display: block; image-rendering: pixelated; }
.ac-qrbox { padding: 10px; background: #fff; border-radius: 22px; box-shadow: 0 8px 24px rgba(0,0,0,.12); margin-bottom: 8px; }
.ac-myqr span { color: var(--muted); font-size: 12.5px; }
.myqr-card { position: relative; border-radius: 26px; padding: 18px 18px 14px; text-align: center; color: #0b0c10; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 22%, #fff), #fff 55%); box-shadow: 0 12px 32px -10px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 0 1px rgba(0,0,0,.05); }
.myqr-head { display: flex; align-items: center; gap: 12px; text-align: left; margin-bottom: 12px; }
.myqr-head b { display: block; font-size: 17px; } .myqr-head span { color: #5b6270; font-size: 13px; }
.myqr-code { display: flex; justify-content: center; padding: 12px; background: #fff; border-radius: 20px; margin: 0 auto 10px; width: max-content; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.myqr-code canvas { width: 230px !important; height: 230px !important; }
.myqr-card p { font-size: 12.5px; color: #5b6270; }
.myqr-acts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 12px; } .myqr-acts .btn { justify-content: center; padding-left: 6px; padding-right: 6px; font-size: 13px; }

/* сканер */
.kscan { position: fixed; inset: 0; z-index: 200; background: #000; overflow: hidden; }
.kscan video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ks-shade { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(closest-side, transparent 0, transparent 1px, rgba(0,0,0,.55) 1px); -webkit-mask: none; }
.ks-frame { position: absolute; left: 50%; top: 46%; width: min(72vw, 300px); aspect-ratio: 1; transform: translate(-50%, -50%); box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .55); border-radius: 26px; }
.ks-frame i { position: absolute; width: 34px; height: 34px; border: 4px solid #fff; }
.ks-frame i:nth-child(1) { left: -2px; top: -2px; border-right: 0; border-bottom: 0; border-top-left-radius: 26px; }
.ks-frame i:nth-child(2) { right: -2px; top: -2px; border-left: 0; border-bottom: 0; border-top-right-radius: 26px; }
.ks-frame i:nth-child(3) { left: -2px; bottom: -2px; border-right: 0; border-top: 0; border-bottom-left-radius: 26px; }
.ks-frame i:nth-child(4) { right: -2px; bottom: -2px; border-left: 0; border-top: 0; border-bottom-right-radius: 26px; }
.ks-line { position: absolute; left: 8%; right: 8%; height: 2px; top: 10%; background: linear-gradient(90deg, transparent, var(--accent), transparent); box-shadow: 0 0 14px var(--accent); animation: ksLine 2.2s ease-in-out infinite alternate; border-radius: 2px; }
@keyframes ksLine { to { top: 88%; } }
.ks-top { position: absolute; left: 0; right: 0; top: 0; padding: calc(12px + env(safe-area-inset-top)) 14px 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #fff; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.ks-btn { width: 42px; height: 42px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(255,255,255,.18); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: pointer; }
.ks-btn.on { background: #ffd60a; color: #000; } .ks-btn svg { width: 22px; height: 22px; } .ks-btn.hidden { visibility: hidden; display: grid; }
.ks-bottom { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 20px calc(24px + env(safe-area-inset-bottom)); display: flex; justify-content: center; gap: 40px; }
.ks-bottom button { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; background: none; color: #fff; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.ks-bottom button svg { width: 26px; height: 26px; padding: 14px; box-sizing: content-box; border-radius: 50%; background: rgba(255,255,255,.18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ks-result { word-break: break-all; background: var(--bg-2); border-radius: 14px; padding: 12px; font-size: 14px; margin-bottom: 8px; }

/* звонки */
.cl-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 4px 12px 14px; }
.cl-quick button { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--text); cursor: pointer; }
.cl-quick i { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-2); color: var(--accent); transition: transform .15s; }
.cl-quick button:active i { transform: scale(.92); }
.cl-quick i svg { width: 24px; height: 24px; }
.cl-title { font-size: 20px; font-weight: 750; letter-spacing: -.02em; margin: 2px 16px 6px; }
.cl-row { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; cursor: pointer; }
.cl-row:active { background: var(--hover); }
.cl-row > .avatar { width: 46px; height: 46px; font-size: 17px; flex-shrink: 0; }
.cl-body { flex: 1; min-width: 0; padding: 4px 0; border-bottom: .5px solid var(--hair); }
.cl-name { font-weight: 600; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-name.miss { color: #ff453a; } .cl-name em { font-style: normal; font-weight: 500; }
.cl-sub { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.cl-sub svg { width: 15px; height: 15px; }
.cl-sub svg.red, .cd-row svg.red { color: #ff453a; } .cd-row svg.green { color: #30d158; }
.cl-when { color: var(--muted); font-size: 13px; white-space: nowrap; }
.cl-info { color: var(--accent) !important; } .cl-info svg { width: 22px; height: 22px; }
.cd-head { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 14px; }
.cd-head b { font-size: 19px; margin-top: 8px; } .cd-head span { color: var(--muted); font-size: 13px; }
.cd-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 8px; margin-bottom: 14px; }
.cd-acts button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border: 0; border-radius: 16px; background: var(--bg-2); color: var(--accent); font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; }
.cd-acts button.on { background: color-mix(in srgb, #ffcc00 18%, var(--bg-2)); color: #e0a800; }
.cd-acts svg { width: 22px; height: 22px; }
.cd-list { background: var(--bg-2); border-radius: 16px; padding: 2px 14px; }
.cd-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; font-size: 14px; }
.cd-row + .cd-row { border-top: .5px solid var(--hair); }
.cd-row span { display: flex; align-items: center; gap: 6px; } .cd-row span.miss { color: #ff453a; } .cd-row svg { width: 16px; height: 16px; } .cd-row small { color: var(--muted); }
.cp-list { display: flex; flex-direction: column; gap: 4px; max-height: 60vh; overflow: auto; }
.cp-row .icon-btn { color: var(--accent); }
.dp-num { text-align: center; font-size: 30px; font-weight: 650; letter-spacing: .04em; min-height: 44px; margin: 4px 0 6px; } .dp-num .muted { font-size: 14px; font-weight: 500; letter-spacing: 0; }
.dp-found { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; margin-bottom: 8px; font-size: 14px; } .dp-found small { color: var(--muted); }
.dp-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 280px; margin: 0 auto 16px; }
.dp-keys button { aspect-ratio: 1; max-width: 76px; width: 100%; margin: 0 auto; border-radius: 50%; border: 0; background: var(--bg-2); color: var(--text); font: inherit; font-size: 28px; font-weight: 500; cursor: pointer; }
.dp-keys button:active { background: color-mix(in srgb, var(--accent) 20%, var(--bg-2)); }
.dp-acts { display: flex; justify-content: center; gap: 24px; }
.dp-call { width: 68px; height: 68px; border-radius: 50%; border: 0; display: grid; place-items: center; background: #30d158; color: #fff; cursor: pointer; } .dp-call.v { background: var(--accent); }
.dp-call svg { width: 28px; height: 28px; }
.ks-shade { display: none; }
.myqr-acts .btn { flex-direction: column !important; gap: 3px !important; font-size: 12px !important; min-width: 0; white-space: nowrap; padding: 8px 4px !important; } .myqr-acts .btn svg { width: 20px; height: 20px; margin: 0 !important; }

/* =====================================================================
   6.14 — звонок: своё окошко двигается и меняется местами, касание прячет кнопки,
   эффекты, плавающее окошко при свайпе вниз
   ===================================================================== */
.call video.local { width: min(30vw, 132px) !important; max-width: none !important; max-height: 30vh !important; height: auto !important; border-radius: 16px !important; box-shadow: 0 8px 24px rgba(0,0,0,.35) !important; transition: left .3s cubic-bezier(.22,1,.36,1), top .3s cubic-bezier(.22,1,.36,1), opacity .25s; touch-action: none; cursor: grab; }
@media (min-width: 801px) { .call video.local { width: 240px !important; } }
.call.pip-free video.local:not(.dragging), .call.pip-free video.local.dragging, .call.swapped.pip-free video.remote { left: var(--pip-l) !important; top: var(--pip-t) !important; right: auto !important; bottom: auto !important; }
.call video.dragging { transition: none !important; cursor: grabbing; }
/* поменять местами: своё видео — на весь экран, собеседник — в окошке */
.call.swapped video.local { inset: 0 !important; left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; max-height: none !important; aspect-ratio: auto !important; border-radius: 0 !important; z-index: 1 !important; object-fit: cover; box-shadow: none !important; }
.call.swapped video.remote { position: absolute; inset: auto; right: 12px; top: calc(64px + env(safe-area-inset-top)); left: auto; width: min(30vw, 132px) !important; height: auto !important; aspect-ratio: 3 / 4; object-fit: cover !important; border-radius: 16px; z-index: 3; box-shadow: 0 8px 24px rgba(0,0,0,.35); touch-action: none; cursor: grab; }
@media (min-width: 801px) { .call.swapped video.remote { width: 240px !important; aspect-ratio: 16 / 9; } }
.call.swapped video.remote-bg { opacity: 0 !important; }
/* касание по экрану — убрать всё лишнее */
.call .call-top, .call .call-info, .call .call-controls { transition: opacity .3s ease, transform .3s ease; }
.call.ui-off .call-top { opacity: 0; transform: translateY(-12px); pointer-events: none; }
.call.ui-off .call-info { opacity: 0; pointer-events: none; }
.call.ui-off .call-controls { opacity: 0; transform: translateY(16px); pointer-events: none; }
.call.ui-off .call-unmute { opacity: 1; }
.call-top [data-top="fx"] { font-size: 19px; line-height: 1; }
.call-top [data-top="fx"].on, .call-top .fx-btn.on { background: rgba(255,255,255,.9) !important; color: #000 !important; }
/* эффекты */
.cfx-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; padding: 14px 16px calc(18px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0; background: rgba(18, 18, 24, .82); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6); animation: sheetUp .35s cubic-bezier(.22,1,.36,1); max-height: 62vh; overflow-y: auto; }
@media (min-width: 801px) { .cfx-sheet { left: 50%; right: auto; width: 420px; transform: translateX(-50%); bottom: 16px; border-radius: 22px; } }
.cfx-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .cfx-head b { font-size: 17px; }
.cfx-x { width: 34px; height: 34px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(255,255,255,.14); color: #fff; } .cfx-x svg { width: 18px; height: 18px; }
.cfx-lbl { font-size: 12.5px; font-weight: 650; opacity: .65; margin: 10px 2px 6px; }
.cfx-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.cfx-row button { aspect-ratio: 1; border: 0; border-radius: 14px; background: rgba(255,255,255,.1); font-size: 26px; cursor: pointer; transition: transform .15s, background .15s; }
.cfx-row button:active { transform: scale(.9); }
.cfx-row button.on, .cfx-none.on { background: var(--accent) !important; box-shadow: 0 0 0 2px #fff inset; }
.cfx-none { border: 0; width: 100%; padding: 10px; border-radius: 14px; background: rgba(255,255,255,.1); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.cfx-blur { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.08); font-weight: 600; }
.cfx-tip { font-size: 12px; opacity: .6; margin-top: 10px; line-height: 1.4; }
/* плавающее окошко звонка (свайп вниз или «свернуть») — как демонстрация поверх чатов */
.call.mini { border-radius: 22px !important; box-shadow: 0 16px 44px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.12) !important; }
@media (max-width: 800px) { .call.mini { width: 124px !important; height: 176px !important; top: calc(52px + env(safe-area-inset-top)) !important; right: 10px !important; bottom: auto !important; left: auto !important; } }
.call.mini video.remote { object-fit: cover !important; }
.call.mini .call-controls { bottom: 8px !important; }
.call.mini .cbtn i { width: 36px !important; height: 36px !important; } .call.mini .cbtn svg { width: 18px !important; height: 18px !important; }
.call.mini .cfx-sheet, .call.mini .call-unmute { display: none !important; }
.call.to-mini { animation: toMini .38s cubic-bezier(.22,1,.36,1); }
.call.to-full { animation: toFull .38s cubic-bezier(.22,1,.36,1); }
@keyframes toMini { from { transform: scale(2.4); opacity: .6; } }
@keyframes toFull { from { transform: scale(.4); opacity: .4; border-radius: 22px; } }
.call { transition: transform .2s ease; }
/* 6.14 — плюсик истории над рамкой аватарки, имя в настройках, предпросмотр статуса */
.st-plus { z-index: 4 !important; box-shadow: 0 2px 6px rgba(0,0,0,.35); width: 24px !important; height: 24px !important; right: -3px !important; bottom: -3px !important; }
.st-me .avatar.fr::before { inset: -6% !important; }
html.k14 .set-card .acc-name, .acc-name { display: block !important; text-align: center; line-height: 1.3; word-break: break-word; }
.acc-name .kvs, .acc-name .pstar, .acc-name .vbadge, .acc-name .bday { display: inline-flex; vertical-align: -0.12em; margin-left: 4px; }
.pc-flash .kvs-preview { animation: kvPop .5s cubic-bezier(.34, 1.6, .64, 1); }
@keyframes kvPop { from { transform: scale(.2); opacity: 0; } }
.pc-name .kvs { width: 1.2em; height: 1.2em; }
.pc-name { display: block !important; text-align: center; line-height: 1.3; word-break: break-word; padding: 0 10px; } .pc-name .kvs, .pc-name .pstar, .pc-name .vbadge, .pc-name .bday { display: inline-flex; vertical-align: -0.12em; margin-left: 4px; }

/* ===== 6.15: офлайн, очередь, уведомления, напоминания, бэкапы ===== */
.off-bar { position: fixed; left: 50%; width: max-content; bottom: calc(env(safe-area-inset-bottom, 0px) + 86px); transform: translateX(-50%); z-index: 9000; display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 32px); padding: 7px 14px; border-radius: 999px; background: rgba(30, 30, 34, .9); color: #fff; font-size: 13px; line-height: 1.25; box-shadow: 0 6px 24px rgba(0,0,0,.25); backdrop-filter: blur(12px); animation: offIn .25s ease; transition: opacity .3s, transform .3s; }
.off-bar i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #f5a524; box-shadow: 0 0 0 3px rgba(245,165,36,.25); animation: offPulse 1.6s infinite; }
.off-bar.off-hide { opacity: 0; transform: translate(-50%, 12px); }
@keyframes offIn { from { opacity: 0; transform: translate(-50%, 12px); } }
@keyframes offPulse { 50% { opacity: .35; } }
.ob-row { display: flex; justify-content: flex-end; padding: 2px 12px; }
.ob-msg { max-width: min(78%, 520px); padding: 7px 11px 6px; border-radius: 16px 16px 5px 16px; background: var(--bubble-out, var(--accent)); color: var(--text); opacity: .72; border: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent); }
.ob-text { white-space: pre-wrap; word-break: break-word; display: block; }
.ob-meta { display: flex; align-items: center; justify-content: flex-end; gap: 4px; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.ob-meta svg { width: 13px; height: 13px; }
.ob-x { background: none; border: 0; padding: 0 0 0 4px; color: inherit; cursor: pointer; display: inline-flex; }
.push-nudge { display: flex; align-items: center; gap: 10px; margin: 6px 10px; padding: 10px 10px 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 10%, var(--bg-2, #f4f4f5)); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); }
.push-nudge .pn-ic { font-size: 20px; }
.push-nudge .pn-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.push-nudge .pn-t b { font-size: 14px; }
.push-nudge .pn-t small { font-size: 12px; color: var(--muted); line-height: 1.3; }
.push-nudge .btn.sm { padding: 6px 12px; min-height: 0; font-size: 13px; }
.push-nudge .pn-x { width: 28px; height: 28px; }
.pc-list { display: flex; flex-direction: column; gap: 8px; }
.pc-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--bg-2, #f4f4f5); }
.pc-row i { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 13px; font-weight: 700; color: #fff; background: #f5a524; }
.pc-row.ok i { background: #31b545; } .pc-row.bad i { background: #e5484d; }
.pc-row b { display: block; font-size: 14px; } .pc-row small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.35; margin-top: 2px; }
button.set-row.pc-open { width: 100%; background: none; border: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.rm-chips { margin: 10px 0; flex-wrap: wrap; }
.rm-chips .chip.active { background: var(--accent); color: #fff; }
.rm-tip { font-size: 12.5px; margin-top: 8px; }
.bk-wrap { display: flex; flex-direction: column; gap: 10px; }
.bk-card { padding: 12px 14px; border-radius: 14px; background: var(--bg-2, #f4f4f5); border-left: 4px solid #f5a524; display: flex; flex-direction: column; gap: 3px; }
.bk-card.ok { border-left-color: #31b545; } .bk-card.bad { border-left-color: #e5484d; }
.bk-card small { color: var(--muted); line-height: 1.35; }
.bk-wrap h3 { margin: 8px 0 0; font-size: 15px; }
.bk-dl { display: flex; gap: 8px; } .bk-dl .field { flex: 1; margin: 0; }
.bk-how { background: var(--bg-2, #f4f4f5); border-radius: 12px; padding: 10px 14px; }
.bk-how summary { cursor: pointer; font-weight: 600; }
.bk-how ol { padding-left: 18px; margin: 8px 0; line-height: 1.5; font-size: 13.5px; }
.bk-how code { font-size: 12px; background: rgba(127,127,127,.15); padding: 1px 5px; border-radius: 5px; word-break: break-all; }

/* ===== 6.18: звонок в чате — подпись с новой строки; кнопка «голосовое ↔ кружок» ===== */
.call-msg .cm-t b, .call-msg .cm-t span { display: block; }
#sendBtn { touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#sendBtn.rec-flip svg { animation: recFlip .32s cubic-bezier(.34, 1.4, .64, 1); }
@keyframes recFlip { 0% { transform: scale(.4) rotate(-90deg); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* ===== 6.20: номер в звонках и «Мой профиль», «+» у края ===== */
.sidebar[data-tab="contacts"] #peopleAdd, .sidebar[data-tab="calls"] #peopleAdd { grid-area: r !important; justify-self: end; margin-left: auto !important; }
.cd-head.cd-link { cursor: pointer; }
.cd-head .cd-prof { font-style: normal; font-size: 13px; color: var(--accent); margin-top: 4px; font-weight: 600; }
.pi-list, .pf-mine { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: var(--bg-2); margin: 10px 0 4px; }
.pi-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 14px; border: 0; background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.pi-row + .pi-row { border-top: 1px solid color-mix(in srgb, var(--muted) 16%, transparent); }
.pi-row > svg { width: 20px; height: 20px; color: var(--accent); flex: none; }
.pi-row > div { display: flex; flex-direction: column; min-width: 0; }
.pi-row b { font-size: 15.5px; font-weight: 600; word-break: break-word; }
.pi-row b.mono { letter-spacing: .5px; }
.pi-row small { font-size: 12.5px; color: var(--muted); }
.profile-cover .pc-bio { margin-top: 6px; padding: 0 16px; font-size: 14px; line-height: 1.35; opacity: .9; text-align: center; word-break: break-word; }

/* =====================================================================
   6.22 — живые подарки: у каждого своя анимация + искры / огонь / сердечки / снег / магия.
   Вид плиток — как в 6.12 (не трогать). Работают и в «Плавном» режиме.
   ===================================================================== */
.gift-tile .gt-e .ga { display: inline-block; line-height: 1; transform-origin: 50% 70%; will-change: transform; animation: 3.2s ease-in-out infinite both; }
.gift-tile[data-ga="float"] .ga { animation-name: gaFloat; }
.gift-tile[data-ga="sway"] .ga { animation-name: gaSway; transform-origin: 50% 95%; }
.gift-tile[data-ga="pulse"] .ga { animation-name: gaPulse; animation-duration: 1.6s; }
.gift-tile[data-ga="bounce"] .ga { animation-name: gaBounce; animation-duration: 2.2s; transform-origin: 50% 100%; }
.gift-tile[data-ga="wobble"] .ga { animation-name: gaWobble; animation-duration: 2.6s; }
.gift-tile[data-ga="tilt"] .ga { animation-name: gaTilt; animation-duration: 3s; }
.gift-tile[data-ga="glow"] .ga { animation-name: gaGlow; animation-duration: 2.8s; }
.gift-tile[data-ga="spin"] .ga { animation-name: gaSpin; animation-duration: 3.6s; }
.gift-tile[data-ga="spinslow"] .ga { animation-name: gaSpinSlow; animation-duration: 9s; animation-timing-function: linear; transform-origin: 50% 50%; }
.gift-tile[data-ga="flap"] .ga { animation-name: gaFlap; animation-duration: 1.4s; }
.gift-tile[data-ga="howl"] .ga { animation-name: gaHowl; animation-duration: 4s; transform-origin: 40% 90%; }
.gift-tile[data-ga="swing"] .ga { animation-name: gaSwing; animation-duration: 2s; transform-origin: 50% 0; }
.gift-tile[data-ga="flicker"] .ga { animation-name: gaFlicker; animation-duration: 1.1s; transform-origin: 50% 100%; }
.gift-tile[data-ga="pop"] .ga { animation-name: gaPop; animation-duration: 2.4s; }
.gift-tile[data-ga="rise"] .ga { animation-name: gaRise; animation-duration: 2.6s; }
.gift-tile[data-ga="steam"] .ga { animation-name: gaFloat; animation-duration: 3.6s; }
.gift-tile[data-ga="shake"] .ga { animation-name: gaShake; animation-duration: 2.4s; }
.gift-tile[data-ga="drive"] .ga { animation-name: gaDrive; animation-duration: 1.8s; }
.gift-tile[data-ga="wave"] .ga { animation-name: gaWave; animation-duration: 3.4s; }
@keyframes gaFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7%); } }
@keyframes gaSway { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes gaPulse { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.14); } 30% { transform: scale(.98); } 45% { transform: scale(1.08); } 60% { transform: scale(1); } }
@keyframes gaBounce { 0%, 60%, 100% { transform: translateY(0) scale(1, 1); } 10% { transform: translateY(0) scale(1.1, .9); } 30% { transform: translateY(-16%) scale(.95, 1.06); } 50% { transform: translateY(0) scale(1.06, .94); } }
@keyframes gaWobble { 0%, 100% { transform: rotate(0) scale(1); } 20% { transform: rotate(-6deg) scale(1.04); } 40% { transform: rotate(5deg); } 60% { transform: rotate(-3deg); } 80% { transform: rotate(2deg); } }
@keyframes gaTilt { 0%, 100% { transform: rotate(-5deg) translateY(0); } 50% { transform: rotate(5deg) translateY(-5%); } }
@keyframes gaGlow { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255,255,255,0)); } 50% { transform: scale(1.06); filter: drop-shadow(0 0 10px rgba(255,255,255,.75)); } }
@keyframes gaSpin { 0%, 55% { transform: perspective(300px) rotateY(0); } 85%, 100% { transform: perspective(300px) rotateY(360deg); } }
@keyframes gaSpinSlow { to { transform: rotate(360deg); } }
@keyframes gaFlap { 0%, 100% { transform: scaleX(1) translateY(0); } 50% { transform: scaleX(.82) translateY(-6%); } }
@keyframes gaHowl { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-16deg) translateY(-4%); } 85% { transform: rotate(-16deg) translateY(-4%); } }
@keyframes gaSwing { 0%, 100% { transform: rotate(10deg); } 50% { transform: rotate(-10deg); } }
@keyframes gaFlicker { 0%, 100% { transform: scale(1, 1) skewX(0); filter: brightness(1); } 25% { transform: scale(1.04, 1.08) skewX(-3deg); filter: brightness(1.15); } 50% { transform: scale(.98, 1.02) skewX(2deg); } 75% { transform: scale(1.03, 1.06) skewX(-1deg); filter: brightness(1.25); } }
@keyframes gaPop { 0%, 70%, 100% { transform: rotate(0) translateY(0); } 76% { transform: rotate(-12deg) translateY(-6%); } 84% { transform: rotate(10deg) translateY(-10%); } 92% { transform: rotate(-4deg); } }
@keyframes gaRise { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(4%, -12%) rotate(-4deg); } }
@keyframes gaShake { 0%, 80%, 100% { transform: rotate(0); } 84% { transform: rotate(-8deg); } 88% { transform: rotate(8deg); } 92% { transform: rotate(-5deg); } 96% { transform: rotate(4deg); } }
@keyframes gaDrive { 0%, 100% { transform: translateX(-4%) rotate(0); } 50% { transform: translateX(5%) rotate(-2deg); } }
@keyframes gaWave { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-6%) rotate(4deg); } }

/* Эффекты поверх плитки */
.gift-tile .ga-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; z-index: 1; }
.gift-tile .ga-fx i { position: absolute; display: block; border-radius: 50%; opacity: 0; }
.gift-tile .ga-fx i:nth-child(1) { left: 18%; top: 22%; animation-delay: 0s; }
.gift-tile .ga-fx i:nth-child(2) { left: 74%; top: 18%; animation-delay: .7s; }
.gift-tile .ga-fx i:nth-child(3) { left: 82%; top: 52%; animation-delay: 1.4s; }
.gift-tile .ga-fx i:nth-child(4) { left: 12%; top: 58%; animation-delay: 2.1s; }
.gift-tile .ga-fx i:nth-child(5) { left: 50%; top: 10%; animation-delay: 1.05s; }
/* искры — четырёхлучевые звёздочки */
.ga-fx.fx-spark i { width: 9px; height: 9px; border-radius: 0; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 0 4px #fff6c2); animation: gaTwinkle 2.8s ease-in-out infinite; }
@keyframes gaTwinkle { 0%, 100% { opacity: 0; transform: scale(.2) rotate(0); } 40% { opacity: 1; transform: scale(1.15) rotate(45deg); } 70% { opacity: 0; transform: scale(.5) rotate(90deg); } }
/* огонь — поднимающиеся язычки */
.ga-fx.fx-fire i { top: auto !important; bottom: 18%; width: 8px; height: 12px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 50% 70%, #fff3a0, #ffb300 45%, #ff3d00 80%, transparent 82%); animation: gaEmber 1.9s ease-in infinite; }
.ga-fx.fx-fire i:nth-child(1) { left: 26%; } .ga-fx.fx-fire i:nth-child(2) { left: 64%; } .ga-fx.fx-fire i:nth-child(3) { left: 46%; } .ga-fx.fx-fire i:nth-child(4) { left: 36%; } .ga-fx.fx-fire i:nth-child(5) { left: 56%; }
@keyframes gaEmber { 0% { opacity: 0; transform: translateY(0) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-70px) scale(.2); } }
/* сердечки */
.ga-fx.fx-hearts i { top: auto !important; bottom: 22%; width: 10px; height: 10px; border-radius: 0; background: #ff4f7b; clip-path: path('M5 9 L1 5 A2.4 2.4 0 0 1 5 2 A2.4 2.4 0 0 1 9 5 Z'); animation: gaHeart 3s ease-out infinite; }
@keyframes gaHeart { 0% { opacity: 0; transform: translateY(0) scale(.5); } 25% { opacity: .95; } 100% { opacity: 0; transform: translateY(-64px) scale(1.2) rotate(15deg); } }
/* снег */
.ga-fx.fx-snow i { top: -8px !important; width: 6px; height: 6px; background: #fff; box-shadow: 0 0 6px #d8f3ff; animation: gaSnow 3.4s linear infinite; }
@keyframes gaSnow { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(10px, 130px); } }
/* магия — светящиеся шарики по кругу */
.ga-fx.fx-magic i { width: 6px; height: 6px; background: #e4c8ff; box-shadow: 0 0 10px 2px #b47bff; animation: gaMagic 3.6s ease-in-out infinite; }
@keyframes gaMagic { 0%, 100% { opacity: 0; transform: translate(0, 0) scale(.4); } 50% { opacity: 1; transform: translate(6px, -14px) scale(1); } }

/* Магазин → Подарки: та же сетка, что в «Подарок для…» */
.shop-gifts { margin-top: 4px; }
.shop-gifts .gift-tile { padding-top: 22px; min-height: 128px; justify-content: center; }
.shop-gifts .gift-tile .gt-lim { top: 5px; }
@media (prefers-reduced-motion: reduce) { .gift-tile .gt-e .ga, .gift-tile .ga-fx i { animation-duration: 0s !important; animation-iteration-count: 1 !important; } }

/* ===== 6.23: окно покупки подарка, анимация нажатия, объёмные картинки ===== */
.gift-tile .gt-e img.g3d { width: 1em; height: 1em; display: block; }
.gb-sheet { align-items: stretch; gap: 10px; max-height: 92vh; overflow: auto; }
.gb-hero { width: 150px; height: 150px; margin: 4px auto 2px; padding: 0 !important; justify-content: center; border-radius: 34px !important; cursor: pointer; transform: scale(.4) rotate(-12deg); opacity: 0; transition: transform .55s cubic-bezier(.34, 1.56, .64, 1), opacity .3s; box-shadow: 0 18px 50px color-mix(in srgb, #000 35%, transparent), inset 0 0 0 2px rgba(255, 210, 90, .75) !important; }
.gb-hero.gb-in { transform: none; opacity: 1; }
.gb-hero .gt-e { font-size: 84px !important; }
.gb-hero.gb-tap .gt-e { animation: gbTap .6s cubic-bezier(.34, 1.56, .64, 1); }
.gb-hero.gb-done { animation: gbDone .9s cubic-bezier(.34, 1.56, .64, 1) forwards; }
@keyframes gbTap { 0% { transform: scale(1); } 30% { transform: scale(1.25) rotate(-8deg); } 60% { transform: scale(.92) rotate(6deg); } 100% { transform: scale(1); } }
@keyframes gbDone { 0% { transform: scale(1); } 35% { transform: scale(1.18) rotate(-6deg); } 100% { transform: translateY(-40px) scale(.3) rotate(18deg); opacity: 0; } }
.gb-burst { position: absolute; inset: 0; pointer-events: none; }
.gb-burst i { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: #fff3b0; box-shadow: 0 0 8px #ffd34d; opacity: 0; }
.gb-hero.gb-in .gb-burst i, .gb-hero.gb-tap .gb-burst i, .gb-hero.gb-done .gb-burst i { animation: gbBurst .8s ease-out both; }
.gb-burst i:nth-child(n) { --a: calc(var(--n, 0) * 30deg); }
.gb-burst i:nth-child(1) { --n: 0; } .gb-burst i:nth-child(2) { --n: 1; } .gb-burst i:nth-child(3) { --n: 2; } .gb-burst i:nth-child(4) { --n: 3; } .gb-burst i:nth-child(5) { --n: 4; } .gb-burst i:nth-child(6) { --n: 5; }
.gb-burst i:nth-child(7) { --n: 6; } .gb-burst i:nth-child(8) { --n: 7; } .gb-burst i:nth-child(9) { --n: 8; } .gb-burst i:nth-child(10) { --n: 9; } .gb-burst i:nth-child(11) { --n: 10; } .gb-burst i:nth-child(12) { --n: 11; }
@keyframes gbBurst { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-95px) scale(.3); } }
.gb-title { text-align: center; display: flex; flex-direction: column; gap: 2px; }
.gb-title b { font-size: 21px; } .gb-title span { font-weight: 600; color: var(--muted); } .gb-title small { color: #e0a100; font-weight: 600; font-size: 12.5px; }
.gb-label { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin-top: 4px; }
.gb-q { margin: 0 !important; }
.gb-people { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
.gb-people::-webkit-scrollbar { display: none; }
.gb-p { flex: none; width: 74px; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 4px; border: 0; border-radius: 16px; background: var(--bg-2); color: var(--text); font: inherit; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.gb-p span { font-size: 12px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gb-p.on { box-shadow: inset 0 0 0 2px var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--bg-2)); transform: translateY(-2px); }
.gb-acts { display: flex; gap: 8px; margin-top: 4px; } .gb-acts .btn { flex: 1; } .gb-acts .gb-buy { flex: 2; }
.gb-wrap.gb-out { opacity: 0; transition: opacity .18s; }
/* Нажатие по плитке: прыжок + вспышка */
.gift-tile.g-press .gt-e { animation: gbTap .6s cubic-bezier(.34, 1.56, .64, 1); }
.gift-tile.g-press::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.55), transparent 60%); animation: gPressFlash .6s ease-out forwards; pointer-events: none; z-index: 2; }
@keyframes gPressFlash { from { opacity: 1; } to { opacity: 0; } }
@media (hover: hover) { .shop-gifts .gift-tile:hover { transform: translateY(-3px) scale(1.03); } .shop-gifts .gift-tile:hover .ga { animation-duration: 1.2s; } }
.gb-q { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border-radius: 14px; background: var(--bg-2); border: 1.5px solid transparent; }
.gb-q:focus-within { border-color: var(--accent); }
.gb-q svg { width: 20px; height: 20px; color: var(--muted); flex: none; }
.gb-q input { flex: 1; min-width: 0; border: 0 !important; outline: 0; background: none !important; font: inherit; font-size: 16px; color: var(--text); box-shadow: none !important; padding: 0 !important; height: auto !important; }

/* ===== 6.24: Магазин → Подарки — вид как на телефоне (карточка + цветной квадрат), у каждого своя анимация ===== */
.shg .shg-e { position: relative; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -10px 18px rgba(0,0,0,.18), 0 6px 16px rgba(0,0,0,.25); }
.shg .shg-e::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%); transform: translateX(-120%); animation: shgShine 5s ease-in-out infinite; pointer-events: none; }
@keyframes shgShine { 0%, 70% { transform: translateX(-120%); } 90%, 100% { transform: translateX(120%); } }
.shg .shg-e .ga { display: inline-block; line-height: 1; transform-origin: 50% 70%; will-change: transform; animation: 3.2s ease-in-out infinite both; position: relative; z-index: 1; }
.shg .shg-e .ga img.g3d { width: 1em; height: 1em; display: block; }
.shg .shg-e .ga-fx { border-radius: inherit; }
.shg .ga-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.shg .ga-fx i { position: absolute; display: block; border-radius: 50%; opacity: 0; }
.shg .ga-fx i:nth-child(1) { left: 12%; top: 16%; } .shg .ga-fx i:nth-child(2) { left: 74%; top: 14%; animation-delay: .7s; } .shg .ga-fx i:nth-child(3) { left: 80%; top: 62%; animation-delay: 1.4s; } .shg .ga-fx i:nth-child(4) { left: 10%; top: 66%; animation-delay: 2.1s; } .shg .ga-fx i:nth-child(5) { left: 48%; top: 6%; animation-delay: 1.05s; }
.shg .ga-fx.fx-spark i { width: 7px; height: 7px; border-radius: 0; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: gaTwinkle 2.8s ease-in-out infinite; }
.shg .ga-fx.fx-fire i { top: auto !important; bottom: 8%; width: 6px; height: 9px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 50% 70%, #fff3a0, #ffb300 45%, #ff3d00 80%, transparent 82%); animation: shgEmber 1.9s ease-in infinite; }
@keyframes shgEmber { 0% { opacity: 0; transform: translateY(0) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-40px) scale(.2); } }
.shg .ga-fx.fx-hearts i { top: auto !important; bottom: 10%; width: 8px; height: 8px; border-radius: 0; background: #ff4f7b; clip-path: path('M4 7.5 L.8 4.2 A2 2 0 0 1 4 1.6 A2 2 0 0 1 7.2 4.2 Z'); animation: shgHeart 3s ease-out infinite; }
@keyframes shgHeart { 0% { opacity: 0; transform: translateY(0) scale(.5); } 25% { opacity: .95; } 100% { opacity: 0; transform: translateY(-40px) scale(1.1); } }
.shg .ga-fx.fx-snow i { top: -6px !important; width: 4px; height: 4px; background: #fff; animation: shgSnow 3.4s linear infinite; }
@keyframes shgSnow { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(6px, 64px); } }
.shg .ga-fx.fx-magic i { width: 5px; height: 5px; background: #e4c8ff; box-shadow: 0 0 8px 2px #b47bff; animation: gaMagic 3.6s ease-in-out infinite; }
.shg.ltd { box-shadow: inset 0 0 0 1.5px #ff9f0a, 0 0 0 0 rgba(255,159,10,0); transition: transform .18s, box-shadow .25s; }
@media (hover: hover) { .shop-gifts2 .shg:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px #ffb340, 0 10px 26px rgba(255,159,10,.18); } .shop-gifts2 .shg:hover .ga { animation-duration: 1.2s; } }
.shg.g-press .shg-e { animation: gbTap .6s cubic-bezier(.34, 1.56, .64, 1); }
.shg.g-press::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 50% 35%, rgba(255,190,80,.35), transparent 60%); animation: gPressFlash .6s ease-out forwards; pointer-events: none; }
.shg[data-ga="float"] .ga { animation-name: gaFloat; }
.shg[data-ga="sway"] .ga { animation-name: gaSway; transform-origin: 50% 100%; }
.shg[data-ga="pulse"] .ga { animation-name: gaPulse; animation-duration: 1.6s; }
.shg[data-ga="bounce"] .ga { animation-name: gaBounce; animation-duration: 2.2s; transform-origin: 50% 100%; }
.shg[data-ga="wobble"] .ga { animation-name: gaWobble; animation-duration: 2.6s; }
.shg[data-ga="tilt"] .ga { animation-name: gaTilt; animation-duration: 3s; }
.shg[data-ga="glow"] .ga { animation-name: gaGlow; animation-duration: 2.8s; }
.shg[data-ga="spin"] .ga { animation-name: gaSpin; animation-duration: 3.6s; }
.shg[data-ga="spinslow"] .ga { animation-name: gaSpinSlow; animation-duration: 9s; animation-timing-function: linear; transform-origin: 50% 50%; }
.shg[data-ga="flap"] .ga { animation-name: gaFlap; animation-duration: 1.4s; }
.shg[data-ga="howl"] .ga { animation-name: gaHowl; animation-duration: 4s; }
.shg[data-ga="swing"] .ga { animation-name: gaSwing; animation-duration: 2s; transform-origin: 50% 0; }
.shg[data-ga="flicker"] .ga { animation-name: gaFlicker; animation-duration: 1.1s; transform-origin: 50% 100%; }
.shg[data-ga="pop"] .ga { animation-name: gaPop; animation-duration: 2.4s; }
.shg[data-ga="rise"] .ga { animation-name: gaRise; animation-duration: 2.6s; }
.shg[data-ga="steam"] .ga { animation-name: gaFloat; animation-duration: 3.6s; }
.shg[data-ga="shake"] .ga { animation-name: gaShake; animation-duration: 2.4s; }
.shg[data-ga="drive"] .ga { animation-name: gaDrive; animation-duration: 1.8s; }
.shg[data-ga="wave"] .ga { animation-name: gaWave; animation-duration: 3.4s; }
@media (prefers-reduced-motion: reduce) { .shg .ga, .shg .ga-fx i, .shg .shg-e::after { animation: none !important; } }

/* =====================================================================
   6.25 — ВСЕ плитки подарков в одном стиле, как в Магазине на телефоне:
   тёмная карточка, оранжевая рамка у лимитированных, «Осталось N» сверху,
   цветной квадрат с иконкой и бликом, название, цена в капсуле.
   ===================================================================== */
.gift-grid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)) !important; gap: 10px !important; }
.gift-grid .gift-tile:not(.gb-hero) { background: var(--bg-2) !important; color: var(--text) !important; text-shadow: none !important; padding: 24px 8px 10px !important; border-radius: 20px !important; gap: 6px !important; box-shadow: none !important; justify-content: flex-start; }
.gift-grid .gift-tile:not(.gb-hero)::before, .gift-grid .gift-tile:not(.gb-hero)::after, .gift-grid .gift-tile:not(.gb-hero) .gt-sweep { display: none !important; }
.gift-grid .gift-tile.lim:not(.gb-hero) { box-shadow: inset 0 0 0 1.5px #ff9f0a !important; }
.gift-grid .gift-tile.luxt:not(.gb-hero), .gift-grid .gift-tile.weekg:not(.gb-hero) { box-shadow: inset 0 0 0 1.5px #ffc400, 0 0 18px rgba(255, 196, 0, .16) !important; }
.gift-grid .gift-tile:not(.gb-hero):not(.lim):not(.luxt) { padding-top: 12px !important; }
.gift-grid .gift-tile:not(.gb-hero) .gt-e { width: 56px; height: 56px; border-radius: 18px; display: grid !important; place-items: center; background: var(--gbg); font-size: 32px !important; line-height: 1 !important; filter: none !important; position: relative; overflow: hidden; flex: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -10px 18px rgba(0,0,0,.18), 0 6px 16px rgba(0,0,0,.25); }
.gift-grid .gift-tile:not(.gb-hero) .gt-e img.emo, .gift-grid .gift-tile:not(.gb-hero) .gt-e img.g3d { width: 34px !important; height: 34px !important; }
.gift-grid .gift-tile:not(.gb-hero) .gt-e::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%); transform: translateX(-120%); animation: shgShine 5s ease-in-out infinite; pointer-events: none; }
.gift-grid .gift-tile:not(.gb-hero) b { font-size: 13px !important; font-weight: 700 !important; color: var(--text); }
.gift-grid .gift-tile:not(.gb-hero) small { white-space: nowrap; font-size: 12.5px !important; font-weight: 700 !important; padding: 3px 9px !important; border-radius: 10px !important; background: var(--fill, rgba(127,127,127,.16)) !important; color: var(--text); }
.gift-grid .gift-tile:not(.gb-hero) .gt-lim { top: 6px !important; font-size: 10.5px !important; font-weight: 700 !important; color: #ff9f0a; opacity: 1 !important; text-transform: none; }
.gift-grid .gift-tile:not(.gb-hero) .gt-lim::first-letter { text-transform: uppercase; }
.gift-grid .gift-tile:not(.gb-hero) .gt-eye { color: var(--muted); }
.gift-grid .gift-tile:not(.gb-hero):hover { transform: translateY(-3px) !important; }
@media (hover: hover) { .gift-grid .gift-tile.lim:not(.gb-hero):hover { box-shadow: inset 0 0 0 1.5px #ffb340, 0 10px 26px rgba(255,159,10,.18) !important; } }
.gift-grid .gift-tile.g-press:not(.gb-hero)::before { display: block !important; background: radial-gradient(circle at 50% 35%, rgba(255,190,80,.35), transparent 60%) !important; }
/* эффекты — внутри квадрата, как в Магазине */
.gift-grid .gift-tile:not(.gb-hero) .gt-e .ga { position: relative; z-index: 1; }
.gift-grid .gift-tile:not(.gb-hero) .gt-e .ga-fx { z-index: 2; }
.gift-grid .gift-tile:not(.gb-hero) .gt-e .ga-fx.fx-fire i { width: 6px; height: 9px; bottom: 8%; animation-name: shgEmber; }
.gift-grid .gift-tile:not(.gb-hero) .gt-e .ga-fx.fx-spark i { width: 7px; height: 7px; }
.gift-grid .gift-tile:not(.gb-hero) .gt-e .ga-fx.fx-hearts i { width: 8px; height: 8px; bottom: 10%; animation-name: shgHeart; clip-path: path('M4 7.5 L.8 4.2 A2 2 0 0 1 4 1.6 A2 2 0 0 1 7.2 4.2 Z'); }
.gift-grid .gift-tile:not(.gb-hero) .gt-e .ga-fx.fx-snow i { width: 4px; height: 4px; animation-name: shgSnow; }

/* =====================================================================
   6.26 — один в один как в Магазине на телефоне (6.21): без бликов, искр и теней на квадрате.
   Только плавное движение иконки и прыжок при нажатии.
   ===================================================================== */
.shg .shg-e, .gift-grid .gift-tile:not(.gb-hero) .gt-e { box-shadow: none !important; }
.shg .shg-e::after, .gift-grid .gift-tile:not(.gb-hero) .gt-e::after { display: none !important; animation: none !important; }
.shg .ga-fx, .gift-grid .gift-tile:not(.gb-hero) .ga-fx { display: none !important; }
.shg.g-press::before, .gift-grid .gift-tile.g-press:not(.gb-hero)::before { display: none !important; }
.shg.ltd, .gift-grid .gift-tile.lim:not(.gb-hero) { box-shadow: inset 0 0 0 1.5px #ff9f0a !important; }
.shg.lux, .gift-grid .gift-tile.luxt:not(.gb-hero) { box-shadow: inset 0 0 0 1.5px #ffc400, 0 0 18px rgba(255,196,0,.16) !important; }
@media (hover: hover) { .shop-gifts2 .shg:hover, .gift-grid .gift-tile:not(.gb-hero):hover { transform: translateY(-2px) !important; } .shop-gifts2 .shg.ltd:hover, .gift-grid .gift-tile.lim:not(.gb-hero):hover { box-shadow: inset 0 0 0 1.5px #ff9f0a !important; } }
/* те же размеры, что у .shg */
.gift-grid .gift-tile:not(.gb-hero) { padding: 22px 8px 10px !important; gap: 6px !important; }
.gift-grid .gift-tile:not(.gb-hero):not(.lim):not(.luxt) { padding-top: 22px !important; }
.gift-grid .gift-tile:not(.gb-hero) .gt-lim { top: 6px !important; font-size: 10.5px !important; font-weight: 700 !important; color: #ff9f0a !important; }
.gift-grid .gift-tile:not(.gb-hero) b { font-size: 13px !important; line-height: 1.2 !important; }
.shg b, .gift-grid .gift-tile:not(.gb-hero) b { font-weight: 600 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; letter-spacing: -.1px; }

/* ===== 6.28: на ПК/Android объёмные картинки подарков — с мягкой тенью, ближе к Apple ===== */
.gift-tile .gt-e img.g3d, .shg .shg-e img.g3d, .gift-card .gc-e img.g3d, .mk-gift img.g3d { filter: drop-shadow(0 3px 4px rgba(0,0,0,.32)) saturate(1.08) contrast(1.04); }
.g-native { font-family: "Apple Color Emoji", var(--font-emoji, sans-serif); }

/* ===== 6.29: окно покупки — без белой полоски; картинки подарков не «текстом» ===== */
.gb-hero::before, .gb-hero::after, .gb-hero .gt-sweep, .gb-hero .ga-fx { display: none !important; }
.gb-hero .gt-e img.emo, .gb-hero .gt-e img.g3d { width: 96px !important; height: 96px !important; display: block; filter: drop-shadow(0 8px 12px rgba(0,0,0,.35)); }
.gb-hero .gt-e { width: auto; height: auto; display: grid; place-items: center; }
img.g3d.g-flat { padding: 4%; box-sizing: border-box; }

/* ===== 6.30: прайс-лист кристаллов ===== */
.crp-list { display: flex; flex-direction: column; gap: 8px; }
.crp { position: relative; display: grid; grid-template-columns: 44px 1fr auto auto; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; border-radius: 16px; background: var(--bg-2); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.crp:active { transform: scale(.98); }
@media (hover: hover) { .crp:hover { box-shadow: inset 0 0 0 1.5px var(--accent); } }
.crp.tagged { box-shadow: inset 0 0 0 1.5px #ff9f0a; }
.crp-gem { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; background: linear-gradient(135deg, #5ad1ff, #6a5bff); }
.crp-n { display: flex; flex-direction: column; min-width: 0; }
.crp-n b { font-size: 18px; font-weight: 800; letter-spacing: -.2px; }
.crp-n small { font-size: 12px; color: var(--muted); }
.crp-bonus { font-style: normal; font-size: 12px; font-weight: 800; color: #31b545; background: color-mix(in srgb, #31b545 14%, transparent); padding: 3px 8px; border-radius: 99px; }
.crp-bonus.none { background: none; padding: 0; }
.crp-rub { font-weight: 800; font-size: 15px; padding: 8px 12px; border-radius: 12px; background: var(--accent); color: #fff; white-space: nowrap; }
.crp-tag { position: absolute; top: -7px; left: 14px; font-style: normal; font-size: 10.5px; font-weight: 800; color: #3a2400; background: #ff9f0a; padding: 2px 8px; border-radius: 99px; }
.cr-off { text-align: center; margin-top: 10px; }

/* ===== 6.31: Настройки — рамка вокруг аватарки не обрезается сверху ===== */
html.k14 .set-card .acc-chip { padding-top: 34px !important; overflow: visible !important; }
html.k14 .set-card .acc-chip .acc-ava { overflow: visible; }
html.k14 .set-card .acc-chip .acc-edit { top: 8px !important; right: 8px !important; }

/* ===== 6.33: экран входа прокручивается, если окно низкое (полноэкранный режим, большой масштаб) ===== */
.auth { height: 100% !important; min-height: 0 !important; display: flex !important; flex-direction: column; align-items: center; overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
.auth > .auth-card { margin: auto 0; flex: none; }
.auth > :not(.auth-card) { flex: none; }

/* ===== 6.35: логины на входе, удаление аккаунта, «один раз» ===== */
.login-recent { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -2px 0 10px; font-size: 12.5px; color: var(--muted); text-align: left; }
.login-recent button { border: 0; border-radius: 99px; padding: 5px 10px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; }
.sm-danger .sm-item span { color: #e5484d; font-weight: 600; }
.once-card { display: flex; align-items: center; gap: 10px; padding: 6px 4px; min-width: 210px; }
.once-card .once-ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #ff9a3c, #ff3d55); color: #fff; flex: none; }
.once-card .once-ic svg { width: 22px; height: 22px; }
.once-card b { display: block; font-size: 15px; } .once-card small { display: block; font-size: 12.5px; opacity: .75; }
.once-card.can { cursor: pointer; } .once-card.can .once-ic { animation: gaPulse 1.6s ease-in-out infinite; }
.once-card.opened .once-ic { background: var(--muted); }
.once-view { position: fixed; inset: 0; z-index: 9500; background: rgba(0,0,0,.94); display: grid; place-items: center; -webkit-user-select: none; user-select: none; }
.once-view img, .once-view video { max-width: 100vw; max-height: 86vh; object-fit: contain; pointer-events: auto; -webkit-touch-callout: none; }
.once-view .once-tip { position: absolute; bottom: calc(18px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); color: #fff; font-size: 13px; background: rgba(255,255,255,.12); padding: 7px 14px; border-radius: 99px; display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.once-view .once-tip svg { width: 16px; height: 16px; color: #ff7a45; }
.once-view .once-x { position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 14px; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; display: grid; place-items: center; cursor: pointer; }
/* 6.36: место сверху под рамку/корону аватарки в Настройках — для всех стилей */
.set-card .acc-chip, #accChip { overflow: visible !important; }
html .set-card #accChip { padding-top: 38px !important; }

/* ===== 6.37: по нажатию на подарок не появляется «курсор для текста» (мигающая полоска) ===== */
.gb-hero, .gb-hero *, .gift-tile, .gift-tile *, .shg, .shg *, .gb-title, .gb-title * { -webkit-user-select: none; user-select: none; caret-color: transparent; -webkit-tap-highlight-color: transparent; }
.gb-hero:focus, .gift-tile:focus, .shg:focus { outline: none; }
.gb-hero { cursor: pointer; }

/* ===== 6.38: статус «чем занят» ===== */
.act-mini { margin-left: 4px; font-size: 14px; line-height: 1; flex: none; }
.act-set { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; border: 0; border-radius: 99px; padding: 5px 12px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.act-row { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px 0 8px; }
.act-row small { color: var(--muted); font-size: 12px; }
.act-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 14%, transparent); font-size: 13px; }
.act-chip b { font-weight: 600; } .act-chip.big { font-size: 14px; padding: 5px 12px; }
.act-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; margin-bottom: 10px; }
.act-grid button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border: 0; border-radius: 14px; background: var(--bg-2); color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer; }
.act-grid button span { font-size: 24px; }
.act-grid button.on { box-shadow: inset 0 0 0 2px var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--bg-2)); }
.act-times { flex-wrap: wrap; }
.act-times .chip.active { background: var(--accent); color: #fff; }
.info-q { margin: 8px 12px !important; }
.links-list .lk-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.lk-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-weight: 800; text-decoration: none; }
.lk-url { color: var(--accent); font-weight: 600; text-decoration: none; font-size: 14.5px; }
.lk-t { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.links-list small { color: var(--muted); font-size: 11.5px; }
.links-list .grow { min-width: 0; flex: 1; }
.st-best { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 6px; } .st-best b { font-size: 22px; } .st-best span { color: var(--muted); font-size: 13px; }
.st-hours { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 2px; }
.stt-under { display: inline-flex; align-items: center; gap: 4px; margin: 6px 0 2px; border: 0; border-radius: 99px; padding: 4px 10px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.row.out .stt-under { background: color-mix(in srgb, var(--out-meta, #4fae4e) 18%, transparent); color: var(--out-meta, #4fae4e); }
img.kr { width: 1.25em; height: 1.25em; vertical-align: -0.28em; display: inline-block; }
.react img.kr { width: 18px; height: 18px; margin-right: 2px; }
.pop .quick img.kr { width: 30px; height: 30px; }

/* ===== 6.39: стрелки и колесо для горизонтальных рядов на ПК ===== */
.hs-arrow { display: none; }
@media (pointer: fine) {
  [data-hs] { scroll-behavior: smooth; }
  [data-hs].hs-can .hs-arrow { display: grid; place-items: center; position: sticky; z-index: 3; flex: none; align-self: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: var(--bg-2); color: var(--text); font-size: 20px; line-height: 1; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .15s; }
  [data-hs] .hs-al { left: 0; margin-right: -30px; }
  [data-hs] .hs-ar { right: 0; margin-left: -30px; }
  [data-hs].hs-l .hs-al, [data-hs].hs-r .hs-ar { opacity: 1; pointer-events: auto; }
  [data-hs] .hs-arrow:hover { background: var(--accent); color: #fff; }
  /* тонкая полоса прокрутки при наведении */
  [data-hs].hs-can { scrollbar-width: thin; scrollbar-color: transparent transparent; }
  [data-hs].hs-can:hover { scrollbar-color: color-mix(in srgb, var(--muted) 50%, transparent) transparent; }
  [data-hs].hs-can::-webkit-scrollbar { display: block; height: 6px; }
  [data-hs].hs-can::-webkit-scrollbar-thumb { background: transparent; border-radius: 6px; }
  [data-hs].hs-can:hover::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 50%, transparent); }
}

@media (min-width: 801px) { .off-bar { bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); } }

/* =====================================================================
   6.42 — интерфейс под каждое устройство. Общее не трогаем, правим привычки платформ.
   ===================================================================== */

/* ---- iPhone/iPad: шрифт Apple, safe-area, упругая прокрутка, без синей подсветки ---- */
.plat-ios { --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Apple Color Emoji", sans-serif; }
.plat-ios * { -webkit-tap-highlight-color: transparent; }
.plat-ios .messages, .plat-ios .sidebar, .plat-ios .modal-card, .plat-ios #infoTabBody { -webkit-overflow-scrolling: touch; }
.plat-ios input, .plat-ios textarea { font-size: 16px; } /* iOS не зумит поле при фокусе, если ≥16px */

/* ---- Android (и Samsung): шрифт Roboto, материальная волна по касанию ---- */
.plat-droid { --font-text: "Roboto", "Noto Sans", "Helvetica Neue", Arial, "Noto Color Emoji", sans-serif; }
.plat-droid * { -webkit-tap-highlight-color: transparent; }
.plat-droid input, .plat-droid textarea { font-size: 16px; }
.mdripple { position: absolute; border-radius: 50%; background: currentColor; opacity: .16; transform: scale(0); animation: mdrip .5s ease-out; pointer-events: none; z-index: 0; }
@keyframes mdrip { to { transform: scale(1); opacity: 0; } }
.plat-droid button, .plat-droid .chat-item, .plat-droid .sm-item, .plat-droid .set-row, .plat-droid .gift-tile, .plat-droid .shg, .plat-droid .contact, .plat-droid .member { overflow: hidden; }
.plat-droid .bubble { overflow: visible; } /* у пузырей волну не делаем */

/* ---- Samsung One UI: чуть крупнее отступы и скругления, выше кнопки (удобно большим пальцем) ---- */
.plat-samsung { --radius: 20px; }
.plat-samsung .tabbar button { padding-top: 8px; padding-bottom: 8px; }
.plat-samsung .composer-wrap { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
.plat-samsung .side-top { padding-top: calc(10px + env(safe-area-inset-top)); }

/* ---- Телефоны в целом: крупнее области нажатия ---- */
.plat-touch .icon-btn { min-width: 42px; min-height: 42px; }
.plat-touch .tabbar button { min-height: 52px; }

/* ---- ПК: наведение, аккуратные полосы прокрутки, кольца фокуса, не растягивать на весь экран ---- */
.plat-desktop ::-webkit-scrollbar { width: 10px; height: 10px; }
.plat-desktop ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 40%, transparent); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.plat-desktop ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--muted) 60%, transparent); background-clip: padding-box; }
.plat-desktop ::-webkit-scrollbar-track { background: transparent; }
.plat-desktop .chat-item, .plat-desktop .sm-item, .plat-desktop .set-row, .plat-desktop .contact, .plat-desktop .pop-item, .plat-desktop .member { transition: background .12s; }
.plat-desktop .chat-item:hover, .plat-desktop .contact:hover, .plat-desktop .member:hover { background: var(--hover); }
.plat-desktop button:not(:disabled), .plat-desktop .chat-item, .plat-desktop [data-cat], .plat-desktop [data-gc] { cursor: pointer; }
.plat-desktop.kbd-nav :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.plat-desktop :focus { outline: none; }
/* на больших экранах контент не на всю ширину, а колонками, читать удобнее */
@media (min-width: 1100px) {
  .plat-desktop .chat-frame .messages { max-width: 1000px; margin-left: auto; margin-right: auto; }
}

/* 6.47 — приватный экран и замок приложения */
#priv-screen, #app-lock {
  position: fixed; inset: 0; z-index: 99998;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; background: var(--bg, #0f1620); color: var(--text, #fff);
  -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px);
}
#priv-screen.on, #app-lock.on { display: flex; }
#app-lock { z-index: 99999; background: rgba(12,18,26,.98); }
#priv-screen .ps-logo, #app-lock .al-logo { width: 54px; height: 54px; opacity: .85; }
#priv-screen .ps-logo .i, #app-lock .al-logo .i { width: 54px; height: 54px; stroke: currentColor; fill: none; stroke-width: 1.6; }
#priv-screen .ps-name { font-weight: 700; font-size: 22px; letter-spacing: .5px; }
#priv-screen .ps-hint { color: var(--muted, #8a97a6); font-size: 14px; }
#app-lock .al-box { width: min(320px, 86vw); display: flex; flex-direction: column; align-items: center; gap: 14px; }
#app-lock .al-title { font-weight: 600; font-size: 18px; text-align: center; }
#app-lock #al-pin {
  width: 180px; text-align: center; font-size: 26px; letter-spacing: 10px;
  padding: 12px; border-radius: 14px; border: 1px solid var(--line, #2a3542);
  background: var(--card, #182230); color: var(--text, #fff);
}
#app-lock .al-err { color: #ff6b6b; font-size: 13px; min-height: 16px; }
#app-lock .al-btns { display: flex; gap: 10px; }

/* 6.50 — Кошелёк в стиле Walt */
.wch-pin { cursor: pointer; }
.wch-pin-av { width: 48px; height: 48px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 24px; background: linear-gradient(135deg, #f0a93a, #e0567a); }
.wch-pin .vb { width: 15px; height: 15px; vertical-align: -2px; }

#wallet-chat.wchat { position: fixed; inset: 0; z-index: 2600; display: flex; flex-direction: column;
  background: var(--bg, #0e151d); transform: translateX(100%); transition: transform .25s ease; }
#wallet-chat.wchat.on { transform: none; }
.wchat-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; padding-top: calc(10px + env(safe-area-inset-top));
  border-bottom: 1px solid var(--line, #243041); }
.wch-title { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 16px; }
.wch-logo .i { width: 20px; height: 20px; color: var(--accent, #4f7cff); }
.wchat-body { flex: 1; overflow-y: auto; padding: 8px 14px 20px; }
.wch-load { text-align: center; color: var(--muted, #8a97a6); margin: 50px 0; }

.wch-top { text-align: center; padding: 20px 0 16px; }
.wch-bal-label { color: var(--muted, #8a97a6); font-size: 14px; }
.wch-bal-main { font-size: 42px; font-weight: 800; line-height: 1.1; margin: 4px 0; display: flex; align-items: center; justify-content: center; gap: 8px; }
.wch-gem { font-size: 30px; }
.wch-bal-sub { color: var(--muted, #8a97a6); font-size: 15px; }
.wch-rate-chip { display: inline-block; margin-top: 10px; font-size: 12px; color: var(--muted, #8a97a6); background: var(--card, #182230); padding: 4px 12px; border-radius: 20px; }

.wch-acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 6px 0 18px; }
.wch-act { display: flex; flex-direction: column; align-items: center; gap: 7px; background: none; border: 0; color: var(--text, #fff); cursor: pointer; font-size: 12px; }
.wch-act-ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--card, #1b2735); transition: background .15s; }
.wch-act:hover .wch-act-ic { background: color-mix(in srgb, var(--accent, #4f7cff) 22%, var(--card, #1b2735)); }
.wch-act-ic .i { width: 22px; height: 22px; color: var(--accent, #4f7cff); }

.wch-banner { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; margin-bottom: 16px;
  background: linear-gradient(120deg, #3b82f6, #6366f1); color: #fff; }
.wch-banner b { display: block; font-size: 15px; } .wch-banner span { font-size: 13px; opacity: .9; }
.wch-banner-ic { margin-left: auto; font-size: 30px; }

.wch-assets { display: flex; flex-direction: column; gap: 8px; }
.wch-asset { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--card, #182230); }
.wch-asset-ic { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 20px; font-weight: 800; color: #fff; }
.wch-asset-main { flex: 1; } .wch-asset-main b { display: block; font-size: 15px; } .wch-asset-main small { color: var(--muted, #8a97a6); font-size: 12px; }
.wch-asset-val { text-align: right; } .wch-asset-val b { display: block; font-size: 15px; } .wch-asset-val small { color: var(--muted, #8a97a6); font-size: 12px; }

.wch-hist-sec { margin-top: 18px; }
.wch-htitle { font-weight: 600; margin-bottom: 8px; font-size: 14px; color: var(--muted, #cbd5e1); }
.wch-hrow { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: 12px; background: var(--card, #182230); margin-bottom: 6px; font-size: 14px; }
.wl-st { font-size: 12px; padding: 2px 8px; border-radius: 20px; }
.wl-paid { background: rgba(47,179,107,.2); color: #35c47b; }
.wl-pending { background: rgba(240,169,58,.2); color: #f0a93a; }
.wl-expired { background: rgba(138,151,166,.2); color: #8a97a6; }

.wch-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line, #243041);
  padding-bottom: env(safe-area-inset-bottom); background: var(--panel, #141c26); }
.wch-tabs button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 0; background: none; border: 0; cursor: pointer;
  color: var(--muted, #8a97a6); font-size: 11px; }
.wch-tabs button.on { color: var(--accent, #4f7cff); }
.wch-tabs .i { width: 22px; height: 22px; }

/* нижние листы (sheet) */
.wch-sheet { position: absolute; inset: 0; z-index: 10; display: flex; align-items: flex-end; background: rgba(0,0,0,.5); opacity: 0; transition: opacity .2s; }
.wch-sheet.on { opacity: 1; }
.wch-sheet-box { width: 100%; background: var(--panel, #141c26); border-radius: 20px 20px 0 0; padding: 8px 18px calc(22px + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform .22s ease; }
.wch-sheet.on .wch-sheet-box { transform: none; }
.wch-sheet-grip { width: 40px; height: 4px; border-radius: 3px; background: var(--line, #2a3542); margin: 6px auto 12px; }
.wch-sheet-box h3 { margin: 0 0 12px; font-size: 17px; }
.wch-kb { display: flex; flex-direction: column; gap: 7px; margin: 4px 0 10px; }
.wch-key { text-align: center; padding: 11px; border-radius: 11px; border: 1.5px solid var(--line, #2a3542); background: var(--card, #121b26); color: var(--text, #fff); font-size: 14px; font-weight: 600; cursor: pointer; }
.wch-key.on { border-color: var(--accent, #4f7cff); background: color-mix(in srgb, var(--accent, #4f7cff) 16%, transparent); }
.wl-lbl { display: block; font-size: 13px; color: var(--muted, #8a97a6); margin: 10px 0 5px; }
.wch-lock { display: flex; gap: 10px; align-items: flex-start; background: var(--card, #121b26); padding: 14px; border-radius: 12px; }
.wch-lock .i { width: 22px; height: 22px; flex: none; opacity: .7; }
.wch-lock b { font-size: 15px; } .wch-lock span { font-size: 13px; color: var(--muted, #8a97a6); }
.wch-swap-rate { background: var(--card, #121b26); border-radius: 12px; padding: 14px; text-align: center; font-size: 16px; line-height: 1.6; }
@media (min-width: 801px) { #wallet-chat.wchat { left: auto; width: min(440px, 100%); border-left: 1px solid var(--line, #243041); } }

/* =====================================================================
   6.55 — «Премиум / Обсидиан» (только по подписке). Всегда тёмный, свой цвет
   (по умолчанию золото), фон-обсидиан при ЛЮБЫХ обоях (кроме своей фотографии).
   ===================================================================== */
.k20-style { position: relative; }
.k20-style .k20-lock { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; font-weight: 700; padding: 3px 7px; border-radius: 20px; color: #2a1c00;
  background: linear-gradient(135deg, #ffd977, #f6a823); box-shadow: 0 2px 8px rgba(246,168,35,.5); }
.k20-style .k20-lock .i { width: 11px; height: 11px; }

/* Поверхности и фон — обсидиан */
:root.k20.k16[data-style="premium"][data-theme="dark"] {
  --bg: #09090b; --bg-2: #131317; --bg-3: #1c1c21; --hover: #111114; --bar: rgba(10, 10, 12, .78);
  --bubble-in: #16161a; --hair: rgba(255, 255, 255, .07); --text: #f1f1f4; --muted: #8b8b95;
}
:root.k20.k16[data-style="premium"][data-theme="dark"]:not([data-wall="custom"]) {
  --chat-grad:
    radial-gradient(120% 80% at 12% 0%, color-mix(in srgb, var(--ka) 16%, transparent), transparent 58%),
    radial-gradient(130% 90% at 100% 100%, color-mix(in srgb, var(--ka) 9%, transparent), transparent 60%),
    linear-gradient(160deg, #0b0b0e, #070708 60%, #0a0a0c);
  --b1: color-mix(in srgb, var(--ka) 16%, #08080a); --b2: #0c0c0f;
  --b3: color-mix(in srgb, var(--ka) 9%, #08080a); --b4: #0a0a0c;
  --pill: rgba(22, 22, 27, .72);
}
/* без узора «волны/точки» — чистый глубокий фон */
html.k20.k15.k16[data-style="premium"]:not([data-wall="custom"]) .chat.pattern::before { opacity: 0 !important; }

/* Исходящие — глянцевый градиент цвета с бликом и мягкой тенью */
html.k20.k15.k16[data-style="premium"] .row.out .bubble:not(.clear):not(.sticker-b) {
  background: linear-gradient(162deg, color-mix(in srgb, var(--ka) 86%, #fff), var(--ka) 48%, var(--pa2, color-mix(in srgb, var(--ka) 70%, #000))) !important;
  color: #1d1400 !important; position: relative; overflow: hidden; border: 0 !important;
  box-shadow: 0 8px calc(4px + var(--pglow, .6) * 32px) calc(-10px + var(--pglow, .6) * 4px) color-mix(in srgb, var(--ka) 70%, transparent), inset 0 1px 0 rgba(255,255,255,.45) !important;
}
html.k20.k15.k16[data-style="premium"] .row.out .bubble:not(.clear):not(.sticker-b)::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 44%;
  background: linear-gradient(180deg, rgba(255,255,255,.24), transparent); pointer-events: none;
}
/* на тёмных/насыщенных цветах текст белый, на золоте и светлых — тёмный */
html.k20.k15.k16[data-style="premium"][data-pdark="1"] .row.out .bubble:not(.clear):not(.sticker-b) { color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.2); }
html.k20.k15.k16[data-style="premium"] .row.out .bubble:not(.clear) .meta,
html.k20.k15.k16[data-style="premium"] .row.out .bubble:not(.clear) .meta svg { color: currentColor !important; opacity: .7; }
html.k20.k15.k16[data-style="premium"] .row.out .bubble:not(.clear) .reply { background: rgba(0,0,0,.12) !important; border-color: currentColor !important; }

/* Входящие — тёмное матовое стекло с тонкой каймой цвета */
html.k20.k15.k16[data-style="premium"] .row.in .bubble:not(.clear):not(.sticker-b) {
  background: rgba(22, 22, 26, .86) !important; color: #ececf1 !important; border: 0 !important;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ka) 16%, rgba(255,255,255,.05)), 0 4px 16px -8px rgba(0,0,0,.6) !important;
}

/* Шапка чата, нижняя панель и поле ввода — стекло; имя в шапке с цветным переливом */
html.k20.k15.k16[data-style="premium"] .chat-head,
html.k20.k15.k16[data-style="premium"] .tabbar {
  background: rgba(10, 10, 12, .72) !important; -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: 0 .5px 0 color-mix(in srgb, var(--ka) 22%, transparent), 0 10px 30px rgba(0,0,0,.5) !important;
}
html.k20.k15.k16[data-style="premium"] .chat-head .chat-title {
  background: linear-gradient(90deg, #fff, var(--ka)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
html.k20.k15.k16[data-style="premium"] .input-box {
  background: rgba(20, 20, 24, .8) !important; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ka) 20%, transparent) !important;
}
html.k20.k15.k16[data-style="premium"] .input-box:focus-within {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ka) 55%, transparent), 0 10px 30px -12px color-mix(in srgb, var(--ka) 45%, transparent) !important;
}

/* Кнопки отправки/записи и бейджи — цвет с глянцем */
html.k20.k15.k16[data-style="premium"] #composeBtn,
html.k20.k15.k16[data-style="premium"] .send,
html.k20.k15.k16[data-style="premium"] .badge:not(.muted) {
  background: linear-gradient(135deg, color-mix(in srgb, var(--ka) 82%, #fff), var(--ka)) !important;
  color: #1d1400 !important; box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--ka) 60%, transparent) !important;
}
html.k20.k15.k16[data-style="premium"][data-pdark="1"] #composeBtn,
html.k20.k15.k16[data-style="premium"][data-pdark="1"] .send,
html.k20.k15.k16[data-style="premium"][data-pdark="1"] .badge:not(.muted) { color: #fff !important; }
html.k20.k15.k16[data-style="premium"] #composeBtn svg, html.k20.k15.k16[data-style="premium"] .send svg { color: inherit !important; stroke: currentColor !important; }

/* Даты/плашки в ленте */
html.k20.k15.k16[data-style="premium"] .day {
  background: color-mix(in srgb, var(--ka) 12%, rgba(16,16,20,.8)) !important; color: var(--ka) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ka) 25%, transparent) !important;
}
html.k20.k15.k16[data-style="premium"] .chat-item.active { background: color-mix(in srgb, var(--ka) 9%, var(--bg)) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ka) 24%, transparent) !important; }

/* Превью в настройках */
html.k20[data-style="premium"] .k16-prev .kp-row.out .kp-b {
  background: linear-gradient(162deg, color-mix(in srgb, var(--ka) 86%, #fff), var(--ka) 48%, color-mix(in srgb, var(--ka) 70%, #000)) !important; color: #1d1400;
  box-shadow: 0 6px 18px -7px color-mix(in srgb, var(--ka) 55%, transparent), inset 0 1px 0 rgba(255,255,255,.4);
}
html.k20[data-style="premium"][data-pdark="1"] .k16-prev .kp-row.out .kp-b { color: #fff; }
html.k20[data-style="premium"] .k16-prev .kp-row.in .kp-b { background: rgba(22,22,26,.9); color: #ececf1; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ka) 16%, transparent); }
/* в премиуме, как в неоне, тема всегда тёмная */
html[data-style="premium"] .k20-neon-note { display: block; }
html[data-style="premium"] #lkThemeSlot { opacity: .4; pointer-events: none; }
html[data-style="premium"] .k20-prem-only { display: none !important; }

/* 6.52 — вкладки кошелька: Доход, Бонусы, Магазин */
.wch-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wch-stat { background: var(--card, #182230); border-radius: 14px; padding: 14px; }
.wch-stat small { color: var(--muted, #8a97a6); font-size: 12px; display: block; margin-bottom: 4px; }
.wch-stat b { font-size: 18px; }
.wch-chart { display: flex; align-items: flex-end; gap: 6px; height: 120px; padding: 10px 4px 0; background: var(--card, #182230); border-radius: 14px; }
.wch-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
.wch-bar-v { width: 60%; min-height: 3px; border-radius: 5px; background: linear-gradient(180deg, var(--accent, #4f7cff), color-mix(in srgb, var(--accent, #4f7cff) 55%, transparent)); transition: height .4s var(--e-out, ease); }
.wch-bar small { font-size: 10px; color: var(--muted, #8a97a6); }

.wch-bonus-head { text-align: center; padding: 10px 0 14px; }
.wch-fire { font-size: 40px; }
.wch-bonus-head b { display: block; font-size: 18px; margin-top: 4px; }
.wch-bonus-head small { color: var(--muted, #8a97a6); font-size: 13px; }
.wch-days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.wch-day { background: var(--card, #182230); border-radius: 12px; padding: 10px 4px; text-align: center; opacity: .6; }
.wch-day small { font-size: 10px; color: var(--muted, #8a97a6); display: block; }
.wch-day span { font-size: 20px; display: block; margin: 2px 0; }
.wch-day b { font-size: 13px; }
.wch-day.got { opacity: 1; box-shadow: inset 0 0 0 1px color-mix(in srgb, #35c47b 45%, transparent); }
.wch-day.today { opacity: 1; box-shadow: inset 0 0 0 1.5px var(--accent, #4f7cff); }
.wch-day.big { background: linear-gradient(135deg, rgba(240,169,58,.2), rgba(224,86,122,.2)); grid-column: span 1; }

.wch-packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wch-pack { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 4px 10px;
  border-radius: 14px; border: 1.5px solid var(--line, #2a3542); background: var(--card, #182230); color: var(--text, #fff); cursor: pointer; }
.wch-pack:hover { border-color: var(--accent, #4f7cff); }
.wch-pack-gem { font-size: 22px; }
.wch-pack b { font-size: 15px; } .wch-pack small { font-size: 12px; color: var(--muted, #8a97a6); }
.wch-pack-tag { position: absolute; top: 6px; right: 6px; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 10px; background: var(--accent, #4f7cff); color: #fff; font-style: normal; }

/* 6.54 — три оформления: Стандарт (бесплатно) · Неон (за кристаллы) · Премиум (подписка) */
.k20-styles-3 { grid-template-columns: 1fr 1fr 1fr; }
.k20-styles-3 .k20-style b { font-size: 14px; }
.k20-styles-3 .k20-style small { font-size: 11px; }
.k20-styles-3 .k20-sp { height: 66px; }
/* Стандарт — чистый светлый */
.k20-sp-standard { background: #eef0f3; }
.k20-sp-standard i:nth-child(-n+2) { background: #fff; box-shadow: 0 0 0 .5px rgba(0,0,0,.08); }
.k20-sp-standard i:nth-child(3) { background: #168cff; }
/* Премиум — обсидиан с золотым (глянцевым) пузырём */
.k20-sp-premium { background: radial-gradient(90% 90% at 20% 0%, rgba(233,196,106,.18), transparent 60%), linear-gradient(160deg, #0c0c0f, #09090b) !important; }
.k20-sp-premium i:nth-child(-n+2) { background: rgba(30,30,34,.9) !important; box-shadow: inset 0 0 0 1px rgba(233,196,106,.14) !important; }
.k20-sp-premium i:nth-child(3) { background: linear-gradient(135deg, #f0d488, #c99a3a) !important; box-shadow: 0 2px 8px rgba(233,196,106,.5) !important; }
/* бейдж цены в кристаллах на карточке «Неон» */
.k20-style .k20-lock-cr { background: linear-gradient(135deg, #5ad1ff, #3b82f6); color: #04121f; box-shadow: 0 2px 8px rgba(59,130,246,.5); }

/* 6.56 — Конструктор премиума: отделка, фон-градиент, панель настроек, замки на палитре */
html.k20.k15.k16[data-style="premium"][data-pfinish="matte"] .row.out .bubble:not(.clear):not(.sticker-b) {
  background: linear-gradient(162deg, var(--ka), var(--pa2, color-mix(in srgb, var(--ka) 70%, #000))) !important;
  box-shadow: 0 8px calc(4px + var(--pglow, .6) * 32px) calc(-10px + var(--pglow, .6) * 4px) color-mix(in srgb, var(--ka) 70%, transparent) !important;
}
html.k20.k15.k16[data-style="premium"][data-pfinish="matte"] .row.out .bubble:not(.clear):not(.sticker-b)::after { display: none; }
html.k20.k15.k16[data-style="premium"][data-pfinish="metal"] .row.out .bubble:not(.clear):not(.sticker-b) {
  background: linear-gradient(115deg, color-mix(in srgb, var(--ka) 75%, #fff) 0%, var(--ka) 28%, color-mix(in srgb, var(--ka) 55%, #fff) 46%, var(--pa2, color-mix(in srgb, var(--ka) 70%, #000)) 72%, color-mix(in srgb, var(--ka) 80%, #fff) 100%) !important;
}
html.k20.k15.k16[data-style="premium"][data-pfinish="metal"] .row.out .bubble:not(.clear):not(.sticker-b)::after { height: 30%; background: linear-gradient(180deg, rgba(255,255,255,.4), transparent); }
/* фон-градиент из выбранных цветов */
:root.k20.k16[data-style="premium"][data-theme="dark"][data-pbg="grad"]:not([data-wall="custom"]) {
  --chat-grad:
    radial-gradient(110% 80% at 8% 0%, color-mix(in srgb, var(--ka) 42%, transparent), transparent 60%),
    radial-gradient(120% 90% at 100% 100%, color-mix(in srgb, var(--pa2, var(--ka)) 40%, transparent), transparent 62%),
    linear-gradient(160deg, #0d0d11, #08080a);
  --b1: color-mix(in srgb, var(--ka) 30%, #08080a); --b3: color-mix(in srgb, var(--pa2, var(--ka)) 26%, #08080a);
}

/* панель конструктора */
.k20-pro { position: relative; }
.k20-pro h3 { display: flex; align-items: center; gap: 8px; }
.k20-pro-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 20px; color: #2a1c00; background: linear-gradient(135deg, #ffd977, #f6a823); }
.k20-pro-badge .i { width: 11px; height: 11px; }
.k20-pro-locked .k20-pro-body { pointer-events: none; opacity: .5; filter: saturate(.7); }
.k20-pro-locked { cursor: pointer; }
.k20-pro-buy { margin-top: 12px; background: linear-gradient(135deg, #f0d488, #c99a3a) !important; color: #231700 !important; }
.k20-mats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.k20-mats button { border: 0; background: var(--bg-2); border-radius: 14px; padding: 8px 4px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--text); font: inherit; font-size: 11.5px; box-shadow: inset 0 0 0 1.5px transparent; }
.k20-mats button i { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(150deg, color-mix(in srgb, var(--m1) 80%, #fff), var(--m1) 45%, var(--m2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 3px 8px -2px var(--m2); }
.k20-mats button.active { box-shadow: inset 0 0 0 2px var(--m1); }
.k20-pcols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.k20-pcols label { display: flex; align-items: center; gap: 8px; background: var(--bg-2); border-radius: 12px; padding: 8px 10px; font-size: 13px; cursor: pointer; }
.k20-pcols input[type=color] { width: 30px; height: 30px; border: 0; padding: 0; background: none; border-radius: 50%; cursor: pointer; flex: none; }
.k20-pcols input[type=color]::-webkit-color-swatch-wrapper { padding: 0; } .k20-pcols input[type=color]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.k20-pseg { display: flex; }
.k20-range { width: 100%; accent-color: var(--accent); }
/* замок на премиум-цветах палитры */
.swatch.k20-sw-lock { position: relative; opacity: .55; display: grid; place-items: center; }
.swatch.k20-sw-lock .i { width: 13px; height: 13px; color: #fff; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.swatch.k16-custom.k20-sw-lock { background: conic-gradient(#f43f5e, #f59e0b, #22c55e, #3b82f6, #a855f7, #f43f5e) !important; }

/* =====================================================================
   6.58 — NEON VOID: эксклюзивное оформление администратора (виден только ему).
   Тёмный премиум: почти чёрный фон с фиолетовым свечением, графитовые входящие,
   фиолетово-синий градиент на исходящих, мягкое свечение. Цвет — var(--ka).
   ===================================================================== */
.k20-sp-titan { background: radial-gradient(90% 90% at 25% 0%, rgba(124,58,237,.4), transparent 60%), linear-gradient(160deg,#0b0c12,#090a0f) !important; }
.k20-sp-titan i:nth-child(-n+2) { background: #191b25 !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important; }
.k20-sp-titan i:nth-child(3) { background: linear-gradient(135deg,#7C3AED,#4169FF) !important; box-shadow: 0 2px 10px rgba(124,58,237,.6) !important; }
.k20-style .k20-lock-titan { background: linear-gradient(135deg,#7C3AED,#4169FF); color: #fff; box-shadow: 0 2px 10px rgba(124,58,237,.55); }
.k20-style .k20-lock-titan .i { width: 11px; height: 11px; color: #fff; }

/* Поверхности */
:root.k20.k16[data-style="titan"][data-theme="dark"] {
  --bg: #090a0f; --bg-2: #14151d; --bg-3: #1d1f29; --hover: #101117; --bar: rgba(9,10,15,.8);
  --bubble-in: #191b25; --hair: rgba(255,255,255,.06); --text: #f1f2f7; --muted: #8a90a4;
}
/* Фон — обсидиан с фиолетовым свечением; при своей фотографии — фото (с лёгким затемнением) */
:root.k20.k16[data-style="titan"][data-theme="dark"]:not([data-wall="custom"]) {
  --chat-grad:
    radial-gradient(95% 50% at 50% -6%, rgba(124,58,237,.42), transparent 60%),
    radial-gradient(70% 40% at 92% 16%, rgba(65,105,255,.26), transparent 60%),
    radial-gradient(70% 45% at 8% 92%, rgba(124,58,237,.2), transparent 60%),
    linear-gradient(160deg,#0a0b11,#08080d 60%,#0a0a10);
  --b1: color-mix(in srgb, var(--ka) 24%, #08090d); --b2: #0b0c12;
  --b3: color-mix(in srgb, #4169FF 18%, #08090d); --b4: #0a0a0f; --pill: rgba(20,21,30,.72);
}
html.k20.k15.k16[data-style="titan"]:not([data-wall="custom"]) .chat.pattern::before { opacity: 0 !important; }

/* Входящие — графит с тонкой каймой */
html.k20.k15.k16[data-style="titan"] .row.in .bubble:not(.clear):not(.sticker-b) {
  background: #191b25 !important; color: #e9ebf2 !important; border: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 6px 18px -10px #000 !important;
}
/* Исходящие — фиолетово-синий градиент со свечением */
html.k20.k15.k16[data-style="titan"] .row.out .bubble:not(.clear):not(.sticker-b) {
  background: linear-gradient(135deg, var(--ka), #4169FF) !important; color: #fff !important; border: 0 !important;
  box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--ka) 65%, transparent), inset 0 1px 0 rgba(255,255,255,.22) !important;
}
html.k20.k15.k16[data-style="titan"] .row.out .bubble:not(.clear) .meta,
html.k20.k15.k16[data-style="titan"] .row.out .bubble:not(.clear) .meta svg { color: rgba(255,255,255,.8) !important; }
html.k20.k15.k16[data-style="titan"] .row.out .bubble:not(.clear) .voice .play { background: rgba(255,255,255,.22) !important; color: #fff !important; }
html.k20.k15.k16[data-style="titan"] .row.out .bubble:not(.clear) .voice .wave i { background: rgba(255,255,255,.75) !important; }

/* Шапка/панель/ввод — стекло; имя с градиентом; метка ADMIN */
html.k20.k15.k16[data-style="titan"] .chat-head, html.k20.k15.k16[data-style="titan"] .tabbar {
  background: rgba(10,11,16,.76) !important; -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3);
  box-shadow: 0 .5px 0 color-mix(in srgb, var(--ka) 30%, transparent), 0 10px 30px rgba(0,0,0,.55) !important;
}
html.k20.k15.k16[data-style="titan"] .chat-head .chat-title {
  background: linear-gradient(90deg,#fff,var(--ka) 70%,#4169FF); -webkit-background-clip: text; background-clip: text; color: transparent !important;
}
html.k20.k15.k16[data-style="titan"] .side-title::after {
  content: 'ADMIN'; margin-left: 8px; font-size: 10px; font-weight: 800; letter-spacing: 1px; vertical-align: 3px;
  padding: 2px 7px; border-radius: 20px; color: #fff; background: linear-gradient(135deg,#7C3AED,#4169FF); box-shadow: 0 0 14px rgba(124,58,237,.6);
}
html.k20.k15.k16[data-style="titan"] .input-box {
  background: #12131b !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important;
}
html.k20.k15.k16[data-style="titan"] .input-box:focus-within {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ka) 55%, transparent), 0 10px 30px -12px color-mix(in srgb, var(--ka) 50%, transparent) !important;
}

/* Кнопки/бейджи/дата — фиолетово-синие со свечением */
html.k20.k15.k16[data-style="titan"] #composeBtn, html.k20.k15.k16[data-style="titan"] .send, html.k20.k15.k16[data-style="titan"] .badge:not(.muted),
html.k20.k15.k16[data-style="titan"] .btn:not(.ghost):not(.danger):not(.danger-fill) {
  background: linear-gradient(135deg, var(--ka), #4169FF) !important; color: #fff !important;
  box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--ka) 60%, transparent) !important;
}
html.k20.k15.k16[data-style="titan"] #composeBtn svg, html.k20.k15.k16[data-style="titan"] .send svg { stroke: #fff !important; }
html.k20.k15.k16[data-style="titan"] .day { background: color-mix(in srgb, var(--ka) 14%, rgba(16,18,24,.85)) !important; color: #c9c3ff !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ka) 28%, transparent) !important; }
html.k20.k15.k16[data-style="titan"] .chat-item.active { background: color-mix(in srgb, var(--ka) 10%, var(--bg)) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ka) 30%, transparent) !important; }

/* Превью в настройках */
html.k20[data-style="titan"] .k16-prev .kp-row.out .kp-b { background: linear-gradient(135deg, var(--ka), #4169FF) !important; color: #fff; box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--ka) 60%, transparent), inset 0 1px 0 rgba(255,255,255,.22); }
html.k20[data-style="titan"] .k16-prev .kp-row.in .kp-b { background: #191b25; color: #e9ebf2; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
html[data-style="titan"] .k20-neon-note { display: block; }
html[data-style="titan"] #lkThemeSlot { opacity: .4; pointer-events: none; }

/* 6.58 — NEON VOID: живой лоск (отключается в режиме «Плавно») */
@keyframes voidPulse { 0%,100% { opacity:.75 } 50% { opacity:1 } }
html.k20.k15.k16[data-style="titan"]:not([data-wall="custom"]) .chat::after {
  content:''; position:absolute; left:50%; top:-12%; width:80%; height:46%; transform:translateX(-50%); z-index:0; pointer-events:none;
  background: radial-gradient(60% 100% at 50% 0%, rgba(124,58,237,.3), transparent 70%);
  filter: blur(26px); animation: voidPulse 7s ease-in-out infinite;
}
html.k20.k15.k16[data-style="titan"] .chat > * { position:relative; z-index:1; }
html.lite.k20[data-style="titan"] .chat::after { animation:none; }
/* подсветка аватара собеседника в шапке */
html.k20.k15.k16[data-style="titan"] .chat-head .avatar { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--ka) 55%, transparent), 0 0 16px -2px color-mix(in srgb, var(--ka) 60%, transparent) !important; }
/* исходящие — срезанный «умный» уголок, как в референсе */
html.k20.k15.k16[data-style="titan"] .row.out .bubble:not(.clear):not(.sticker-b) { border-radius: 20px 20px 7px 20px !important; }
html.k20.k15.k16[data-style="titan"] .row.in .bubble:not(.clear):not(.sticker-b) { border-radius: 20px 20px 20px 7px !important; }

/* 6.59 — NEON VOID: усиленный вид чата (живой градиент пузырей, второе свечение, детали) */
@keyframes voidShift { 0%{background-position:0% 50%} 100%{background-position:100% 50%} }
@keyframes voidFloat { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(6%,4%) scale(1.15)} }
/* исходящие — переливающийся градиент с чуть большей глубиной */
html.k20.k15.k16[data-style="titan"] .row.out .bubble:not(.clear):not(.sticker-b) {
  background: linear-gradient(120deg, color-mix(in srgb, var(--ka) 88%, #fff), var(--ka) 40%, #4169FF 78%, #5b8cff) !important;
  background-size: 220% 220% !important; animation: voidShift 8s ease-in-out infinite alternate;
  box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--ka) 70%, transparent), 0 0 0 1px color-mix(in srgb, var(--ka) 30%, transparent), inset 0 1px 0 rgba(255,255,255,.28) !important;
}
html.lite.k20[data-style="titan"] .row.out .bubble:not(.clear):not(.sticker-b) { animation: none; }
/* второе, плавающее свечение фона */
html.k20.k15.k16[data-style="titan"]:not([data-wall="custom"]) .chat::before {
  content:''; position:absolute; right:-10%; top:34%; width:55%; height:48%; z-index:0; pointer-events:none;
  background: radial-gradient(closest-side, rgba(65,105,255,.3), transparent 72%); filter: blur(34px);
  animation: voidFloat 13s ease-in-out infinite;
}
html.lite.k20[data-style="titan"] .chat::before { animation:none; }
/* тонкая акцентная линия под шапкой */
html.k20.k15.k16[data-style="titan"] .chat-head { border-bottom: 0 !important; position: relative; }
html.k20.k15.k16[data-style="titan"] .chat-head::after {
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ka) 70%, transparent), #4169FF, transparent);
}
/* входящие — чуть больше объёма и мягкий верхний блик */
html.k20.k15.k16[data-style="titan"] .row.in .bubble:not(.clear):not(.sticker-b) {
  background: linear-gradient(180deg, #1c1e29, #171822) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 0 1px rgba(255,255,255,.05), 0 8px 20px -12px #000 !important;
}
/* стеклянная панель ввода с мягким свечением рамки */
html.k20.k15.k16[data-style="titan"] .input-box {
  background: rgba(18,19,27,.72) !important; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ka) 20%, rgba(255,255,255,.06)) !important;
}

/* 6.62 — список чатов: цельный вид, тонкие разделители, аккуратная отметка непрочитанных.
   Плоские строки с непрозрачным фоном — чтобы при свайпе не просвечивали кнопки снизу. */
:root.k20 .chat-list { background: transparent; padding: 4px 8px calc(96px + env(safe-area-inset-bottom)); }
:root.k20 .chat-list .chat-item {
  position: relative; z-index: 1;
  margin: 0; border-radius: 14px;
  background: var(--bg);
  box-shadow: none !important;
  transition: background .16s var(--e-out, ease);
}
/* единый тонкий разделитель, выровненный под текст (не заходит под аватар) */
:root.k20 .chat-list .chat-item .ci-body { border-bottom: 0 !important; padding-bottom: 0 !important; }
:root.k20 .chat-list .chat-item::after {
  content: ''; position: absolute; left: 76px; right: 6px; bottom: 0;
  height: 1px; background: var(--hair); transform: scaleY(.5); transform-origin: bottom;
  pointer-events: none;
}
:root.k20 .chat-list .chat-item:last-child::after { opacity: 0; }
/* нажатие — мягкая округлая подсветка (без масштабирования, чтобы не мешать свайпу) */
:root.k20 .chat-list .chat-item:active { background: color-mix(in srgb, var(--accent) 8%, var(--bg)); }
:root.k20 .chat-list .chat-item:active::after,
:root.k20 .chat-list .chat-item:hover::after { opacity: 0; }
@media (hover: hover) { :root.k20 .chat-list .chat-item:hover { background: color-mix(in srgb, var(--accent) 5%, var(--bg)); } }

/* непрочитанные — лёгкая заливка во всю строку + короткая скруглённая акцентная метка слева */
:root.k20 .chat-list .chat-item.has-unread { background: color-mix(in srgb, var(--accent) 6%, var(--bg)); }
:root.k20 .chat-list .chat-item.has-unread::after { opacity: 0; }
:root.k20 .chat-list .chat-item.has-unread::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 52%; border-radius: 0 3px 3px 0;
  background: var(--accent); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent);
  z-index: 2; pointer-events: none;
}
:root.k20 .chat-list .chat-item.has-unread .ci-title > span { font-weight: 700; }

/* открытая строка свайпа — поверх соседей, с мягкой тенью по краю для глубины */
:root.k20 .chat-list .chat-item.sw-open { z-index: 3; box-shadow: -10px 0 18px -12px rgba(0,0,0,.4), 10px 0 18px -12px rgba(0,0,0,.4) !important; }
/* подложка с кнопками — строго под строкой */
:root.k20 .chat-list .sw-under { z-index: 0; }

/* активный чат: ПК — акцентная заливка; моб. — мягкая акцентная подсветка */
@media (min-width: 801px) {
  :root.k20 .chat-list .chat-item.active { background: var(--accent-grad, var(--accent)) !important; box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--accent) 45%, transparent) !important; }
  :root.k20 .chat-list .chat-item.active::after,
  :root.k20 .chat-list .chat-item.active + .chat-item::after { opacity: 0; }
}
@media (max-width: 800px) {
  :root.k20 .chat-list .chat-item.active { background: color-mix(in srgb, var(--accent) 12%, var(--bg)) !important; }
  :root.k20 .chat-list .chat-item.active::after { opacity: 0; }
  :root.k20 .chat-list .chat-item.active .ci-title > span, :root.k20 .chat-list .chat-item.active .ci-text, :root.k20 .chat-list .chat-item.active .ci-time { color: inherit !important; }
}

/* 6.61 — требования к выводу (возраст/ИП), комиссия */
.wch-reqs { display: flex; flex-direction: column; gap: 8px; }
.wch-req { display: flex; gap: 10px; align-items: center; padding: 11px 13px; border-radius: 12px; background: var(--card, #182230); opacity: .7; }
.wch-req.ok { opacity: 1; box-shadow: inset 0 0 0 1px color-mix(in srgb, #35c47b 40%, transparent); }
.wch-req-ic { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 800; background: var(--bg-3, #23303e); color: var(--muted, #8a97a6); }
.wch-req.ok .wch-req-ic { background: #35c47b; color: #052e1a; }
.wch-req-ic .i { width: 13px; height: 13px; }
.wch-req b { display: block; font-size: 14px; } .wch-req small { font-size: 12px; color: var(--muted, #8a97a6); }
.wch-fee { margin: 12px 0 2px; font-size: 14px; color: var(--muted, #8a97a6); }
.wch-fee b { color: var(--text, #fff); }

/* =====================================================================
   6.63 — ИИ-ассистент: чат с нейросетью + закреплённая строка
   ===================================================================== */
#ai-chat.wchat { position: fixed; inset: 0; z-index: 2600; display: flex; flex-direction: column;
  background: var(--bg); transform: translateX(100%); transition: transform .25s ease; }
#ai-chat.wchat.on { transform: none; }
#ai-chat .wchat-head { border-bottom: 1px solid var(--hair); }
#ai-chat .wch-logo .i { color: var(--accent); }
.aichat-body { flex: 1; overflow-y: auto; padding: 14px 12px 18px; display: flex; flex-direction: column; gap: 10px; -webkit-overflow-scrolling: touch; }
.ai-msg { display: flex; gap: 8px; max-width: 100%; }
.ai-msg.user { justify-content: flex-end; }
.ai-ava { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; align-self: flex-end;
  background: linear-gradient(135deg, #7c3aed, #4169ff); }
.ai-ava .i { width: 17px; height: 17px; color: #fff; }
.ai-bub { max-width: 80%; padding: 9px 13px; border-radius: 17px; font-size: 15px; line-height: 1.45; word-wrap: break-word; overflow-wrap: anywhere; }
.ai-msg.user .ai-bub { background: var(--accent); color: #fff; border-bottom-right-radius: 5px; }
.ai-msg.assistant .ai-bub { background: var(--bg-2); color: var(--text); border-bottom-left-radius: 5px; box-shadow: inset 0 0 0 1px var(--hair); }
.ai-bub a { color: inherit; text-decoration: underline; }
.ai-bub pre, .ai-bub code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.ai-bub pre { background: color-mix(in srgb, var(--text) 8%, transparent); padding: 8px 10px; border-radius: 8px; overflow-x: auto; }
/* индикатор «печатает» */
.ai-think { display: flex; gap: 4px; align-items: center; min-height: 20px; }
.ai-think span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted, #8a97a6); opacity: .5; animation: aiBlink 1.2s infinite; }
.ai-think span:nth-child(2) { animation-delay: .2s; } .ai-think span:nth-child(3) { animation-delay: .4s; }
@keyframes aiBlink { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
/* пустой экран */
.ai-empty { margin: auto; text-align: center; padding: 20px; max-width: 420px; }
.ai-empty-ic { width: 64px; height: 64px; border-radius: 20px; margin: 0 auto 14px; display: grid; place-items: center;
  background: linear-gradient(135deg, #7c3aed, #4169ff); }
.ai-empty-ic .i { width: 32px; height: 32px; color: #fff; }
.ai-empty b { font-size: 19px; } .ai-empty p { color: var(--muted, #8a97a6); font-size: 14px; margin: 6px 0 16px; line-height: 1.5; }
.ai-chips { display: flex; flex-direction: column; gap: 8px; }
.ai-chip { padding: 11px 14px; border-radius: 13px; border: 1px solid var(--hair); background: var(--bg-2); color: var(--text);
  font-size: 14px; text-align: left; cursor: pointer; transition: background .14s; }
.ai-chip:hover { background: color-mix(in srgb, var(--accent) 10%, var(--bg-2)); }
/* строка ввода */
.aichat-input { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--hair); background: var(--panel, var(--bg)); }
.aichat-input textarea { flex: 1; resize: none; max-height: 140px; padding: 10px 15px; border-radius: 21px;
  border: 1px solid var(--hair); background: var(--bg-2); color: var(--text); font: inherit; font-size: 15px; line-height: 1.35; }
.aichat-input textarea:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 55%, var(--hair)); }
.aichat-send { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 0; background: var(--accent); color: #fff;
  display: grid; place-items: center; cursor: pointer; transition: filter .14s; }
.aichat-send:hover { filter: brightness(1.08); }
.aichat-send .i { width: 20px; height: 20px; color: #fff; }
@media (min-width: 801px) { #ai-chat.wchat { left: auto; width: min(460px, 100%); border-left: 1px solid var(--hair); } }
/* закреплённая строка «ИИ-ассистент» */
.ai-pin { cursor: pointer; }
.ai-pin-av { width: 48px; height: 48px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: linear-gradient(135deg, #7c3aed, #4169ff); }
.ai-pin-av .i { width: 24px; height: 24px; color: #fff; }
.ai-pin .vb { width: 15px; height: 15px; vertical-align: -2px; }

/* =====================================================================
   6.64 — Поддержка: шит «Частые вопросы» (ЧАВО)
   ===================================================================== */
.sup-faq { position: fixed; inset: 0; z-index: 2700; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0,0,0,.5); opacity: 0; transition: opacity .22s; }
.sup-faq.on { opacity: 1; }
.sup-faq-box { width: 100%; max-width: 560px; max-height: 86vh; overflow-y: auto; background: var(--panel, var(--bg));
  border-radius: 20px 20px 0 0; padding: 8px 18px calc(20px + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform .24s cubic-bezier(.2,.9,.25,1); }
.sup-faq.on .sup-faq-box { transform: none; }
.sup-faq-grip { width: 42px; height: 4px; border-radius: 3px; background: var(--hair); margin: 6px auto 12px; }
.sup-faq-box h3 { margin: 0 0 12px; font-size: 18px; display: flex; align-items: center; gap: 8px; }
.sup-faq-box h3 .i { width: 20px; height: 20px; color: var(--accent); }
.sup-faq-list { display: flex; flex-direction: column; gap: 8px; }
.sup-faq-item { border: 1px solid var(--hair); border-radius: 13px; background: var(--bg-2); overflow: hidden; }
.sup-faq-item summary { list-style: none; cursor: pointer; padding: 13px 14px; font-size: 15px; font-weight: 600;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sup-faq-item summary::-webkit-details-marker { display: none; }
.sup-faq-item summary .i { width: 18px; height: 18px; color: var(--muted, #8a97a6); transform: rotate(-90deg); transition: transform .2s; flex: none; }
.sup-faq-item[open] summary .i { transform: rotate(90deg); }
.sup-faq-item[open] summary { border-bottom: 1px solid var(--hair); }
.sup-faq-a { padding: 12px 14px; font-size: 14.5px; line-height: 1.5; color: var(--text); }
.sup-faq-foot { margin: 14px 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--muted, #8a97a6); text-align: center; }

/* =====================================================================
   6.66 — лайк истории (кнопка-сердце + кто лайкнул у автора)
   ===================================================================== */
.st-like { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); cursor: pointer; transition: transform .15s, background .15s, border-color .15s; }
.st-like svg { width: 24px; height: 24px; color: #fff; }
.st-like.on { background: rgba(255,45,111,.22); border-color: rgba(255,45,111,.65); }
.st-like.on svg { fill: #ff2d6f; stroke: #ff2d6f; color: #ff2d6f; }
.st-like.pop { animation: stLikePop .45s cubic-bezier(.2,1.7,.3,1); }
@keyframes stLikePop { 0% { transform: scale(1); } 40% { transform: scale(1.38); } 100% { transform: scale(1); } }
/* счётчик лайков у автора + отметка «лайкнул» в списке */
.st-v-like svg { color: #ff2d6f; fill: #ff2d6f; stroke: #ff2d6f; vertical-align: -3px; }
.st-vh { display: flex; align-items: center; gap: 4px; }
.st-vh svg { width: 19px; height: 19px; vertical-align: -4px; }
.st-vh-like svg { color: #ff2d6f; fill: #ff2d6f; stroke: #ff2d6f; }
.st-liked-mark { margin-left: auto; display: grid; place-items: center; flex: none; }
.st-liked-mark svg { width: 21px; height: 21px; color: #ff2d6f; fill: #ff2d6f; stroke: #ff2d6f; }

/* =====================================================================
   6.67 — поддержка: быстрые кнопки вопросов прямо в чате (над полем ввода)
   ===================================================================== */
.sup-qr { padding: 8px 10px 0; }
.sup-qr-row { display: flex; gap: 7px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scrollbar-width: none; }
.sup-qr-row::-webkit-scrollbar { display: none; }
.sup-qr-chip { flex: 0 0 auto; white-space: nowrap; padding: 9px 14px; border-radius: 18px; font-size: 13.5px;
  background: var(--bg-2); color: var(--text); border: 1px solid var(--hair); cursor: pointer;
  transition: background .14s, transform .1s; display: inline-flex; align-items: center; gap: 5px; }
.sup-qr-chip:hover { background: color-mix(in srgb, var(--accent) 10%, var(--bg-2)); }
.sup-qr-chip:active, .sup-qr-chip.sent { transform: scale(.95); background: color-mix(in srgb, var(--accent) 18%, var(--bg-2)); }
.sup-qr-chip svg { width: 15px; height: 15px; }
.sup-qr-op { background: color-mix(in srgb, var(--accent) 12%, var(--bg-2)); border-color: color-mix(in srgb, var(--accent) 35%, var(--hair)); color: var(--accent); font-weight: 600; }

/* =====================================================================
   6.68 — верификация вывода (заявка + админ-проверка)
   ===================================================================== */
.wd-verify { margin-top: 4px; }
.wd-file { font-size: 13px; margin: 6px 0 0; min-height: 18px; }
.wd-rej { background: color-mix(in srgb, #ff3b30 14%, transparent); color: #ff6b6b; border-radius: 10px; padding: 9px 12px; font-size: 13px; margin-bottom: 8px; }
/* админ-карточки заявок */
.verif-card { display: flex; gap: 12px; padding: 12px; border-radius: 14px; background: var(--bg-2, var(--card, #182230)); margin-bottom: 10px; }
.verif-img { flex: none; width: 92px; height: 92px; border-radius: 10px; overflow: hidden; background: var(--bg-3, #0e151d); display: grid; place-items: center; }
.verif-img img { width: 100%; height: 100%; object-fit: cover; }
.verif-img.none { font-size: 11px; color: var(--muted, #8a97a6); text-align: center; }
.verif-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.verif-ai { font-size: 12.5px; line-height: 1.4; color: var(--muted, #8a97a6); display: flex; gap: 6px; align-items: flex-start; background: color-mix(in srgb, var(--accent) 7%, transparent); padding: 7px 9px; border-radius: 9px; }
.verif-ai svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.verif-ai.ok { color: #35c47b; background: color-mix(in srgb, #35c47b 12%, transparent); }
.verif-ai.bad { color: #ff6b6b; background: color-mix(in srgb, #ff3b30 12%, transparent); }
.verif-acts { display: flex; gap: 8px; margin-top: 4px; }
.verif-acts .btn { flex: 1; padding: 8px; }

/* =====================================================================
   6.69 — инлайн-кнопки вопросов в сообщениях поддержки (меню + «в меню»)
   ===================================================================== */
.sup-kb { display: flex; flex-direction: column; gap: 5px; margin: 8px -2px -2px; clear: both; }
.sk-row { display: flex; gap: 5px; }
.sup-kb button { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 11px; font-size: 14px; font-weight: 500;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, transparent); text-align: center;
  transition: background .12s, transform .08s; white-space: normal; line-height: 1.25; }
.sup-kb button:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.sup-kb button:active { transform: scale(.98); }
.sup-kb button:disabled { opacity: .5; pointer-events: none; }

/* 6.70 — результат проверки ИИ в админке */
.ai-test-res { font-size: 13.5px; line-height: 1.45; margin-top: 8px; min-height: 1px; }
.ai-test-res.ok { color: #35c47b; }
.ai-test-res.bad { color: #ff6b6b; }