@font-face { font-family: "Roboto"; font-weight: 400; font-display: swap; src: url(fonts/roboto-latin-400.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto"; font-weight: 500; font-display: swap; src: url(fonts/roboto-latin-500.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto"; font-weight: 700; font-display: swap; src: url(fonts/roboto-latin-700.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto"; font-weight: 400; font-display: swap; src: url(fonts/roboto-cyrillic-400.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Roboto"; font-weight: 500; font-display: swap; src: url(fonts/roboto-cyrillic-500.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Roboto"; font-weight: 700; font-display: swap; src: url(fonts/roboto-cyrillic-700.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

:root {
  --primary: #3390ec;
  --primary-tint: rgba(51,144,236,.1);
  --primary-hover: #4a95d6;
  --bg: #ffffff;
  --bg-secondary: #f4f4f5;
  --bg-sidebar: #ffffff;
  --bg-hover: #f4f4f5;
  --bg-active: #ededed;
  --bg-own: #eeffde;
  --bg-in: #ffffff;
  --bg-menu: rgba(255,255,255,.73);
  --text: #000000;
  --text-secondary: #707579;
  --text-meta: #686c72;
  --meta-own: #4fae4e;
  --accent-own: #45af54;
  --accent-in: var(--primary);
  --borders: #dadce0;
  --dividers: #c8c6cc;
  --sep: #f4f4f5;
  --chat-active: #3390ec;
  --badge: #00c73e;
  --badge-muted: #c4c9cc;
  --online: #00c73e;
  --danger: #e53935;
  --placeholder: #a2acb4;
  --rx: #ebf3fd;
  --rx-own: #c6eab2;
  --rx-chosen: var(--primary);
  --rx-chosen-own: #45af54;
  --reply-bg: rgba(51,144,236,.08);
  --reply-own-bg: rgba(79,174,78,.12);
  --pill: rgba(74,142,58,.55);
  --shadow: 0 1px 2px rgba(16,35,47,.15);
  --shadow-menu: 0 .25rem .5rem .125rem rgba(114,114,114,.25);
  --scrollbar: rgba(90,90,90,.3);
  --wp-a: #dbddbb; --wp-b: #6ba587; --wp-c: #d5d88d; --wp-d: #88b884;
  --wp-pattern-opacity: .4;
  --composer: #ffffff;
  --send-icon: var(--primary);
  --icon: #707579;
  --peer0: #cc5049; --peer1: #d67722; --peer2: #955cdb; --peer3: #40a920; --peer4: #309eba; --peer5: #368ad1; --peer6: #c7508b;
  --font: "Roboto", -apple-system, BlinkMacSystemFont, "Apple Color Emoji", "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --fs: 16px;
  --radius-msg: 15px;
  --radius-msg-sm: 6px;
  --mw: 728px;
  --left-w: 420px;
  --right-w: 400px;
  --ease: cubic-bezier(.25,1,.5,1);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --primary: #8774e1;
  --primary-tint: rgba(135,116,225,.1);
  --primary-hover: #7b71c6;
  --bg: #212121;
  --bg-secondary: #0f0f0f;
  --bg-sidebar: #212121;
  --bg-hover: #2c2c2c;
  --bg-active: #292929;
  --bg-own: #766ac8;
  --bg-in: #212121;
  --bg-menu: rgba(33,33,33,.87);
  --text: #ffffff;
  --text-secondary: #aaaaaa;
  --text-meta: #aaaaaa;
  --meta-own: rgba(255,255,255,.53);
  --accent-own: #ffffff;
  --borders: #303030;
  --dividers: #3b3b3d;
  --sep: #0f0f0f;
  --chat-active: #766ac8;
  --badge: #8774e1;
  --badge-muted: #717579;
  --online: #00c73e;
  --danger: #ff595a;
  --placeholder: #707579;
  --rx: #2b2a35;
  --rx-own: #675caf;
  --rx-chosen-own: #ffffff;
  --reply-bg: rgba(135,116,225,.12);
  --reply-own-bg: rgba(255,255,255,.12);
  --pill: rgba(0,0,0,.35);
  --shadow: 0 1px 2px rgba(0,0,0,.4);
  --shadow-menu: 0 .25rem .5rem .125rem rgba(16,16,16,.6);
  --scrollbar: rgba(255,255,255,.18);
  --wp-a: #fec496; --wp-b: #dd6cb9; --wp-c: #962fbf; --wp-d: #4f5bd5;
  --wp-pattern-opacity: 1;
  --composer: #212121;
  --icon: #aaaaaa;
  --peer0: #ff8e86; --peer1: #ffa357; --peer2: #b18fff; --peer3: #4dd6a2; --peer4: #45e8d1; --peer5: #7ac8ff; --peer6: #ff7ab6;
  color-scheme: dark;
}
:root[data-theme="anime"] {
  --primary: #f0569b;
  --primary-tint: rgba(240,86,155,.12);
  --primary-hover: #e04489;
  --bg: rgba(255,255,255,.82);
  --bg-secondary: rgba(255,228,240,.7);
  --bg-sidebar: transparent;
  --bg-hover: rgba(255,214,232,.55);
  --bg-active: rgba(255,200,225,.7);
  --bg-own: linear-gradient(135deg, #ffd3e6 0%, #ffc0dd 100%);
  --bg-own-solid: #ffc0dd;
  --bg-in: rgba(255,255,255,.9);
  --bg-menu: rgba(255,243,249,.82);
  --text: #3b1d2e;
  --text-secondary: #9a6b84;
  --text-meta: #a07890;
  --meta-own: #c94d86;
  --accent-own: #d1307a;
  --borders: #f5c6dc;
  --dividers: #f3cde0;
  --sep: rgba(255,224,238,.6);
  --chat-active: linear-gradient(90deg, #f0569b, #ff8ec0);
  --badge: #f0569b;
  --online: #ff6fae;
  --danger: #e0245e;
  --placeholder: #c597ae;
  --rx: rgba(255,214,232,.8);
  --rx-own: rgba(255,255,255,.6);
  --rx-chosen-own: #f0569b;
  --reply-bg: rgba(240,86,155,.1);
  --reply-own-bg: rgba(255,255,255,.45);
  --pill: rgba(214,72,139,.55);
  --shadow: 0 2px 6px rgba(214,72,139,.14);
  --shadow-menu: 0 .5rem 1.5rem rgba(214,72,139,.25);
  --scrollbar: rgba(240,86,155,.35);
  --composer: rgba(255,255,255,.88);
  --icon: #c86a98;
  --peer0: #e0457b; --peer1: #e27a3a; --peer2: #a35be0; --peer3: #3fa46a; --peer4: #2f9fb8; --peer5: #4f86e0; --peer6: #d6489a;
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body { font-family: var(--font); font-size: 16px; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
svg { display: block; flex: none; }
[data-ic] { display: inline-flex; align-items: center; justify-content: center; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 3px; }
::-webkit-scrollbar-track { background: transparent; }
[hidden] { display: none !important; }

/* ---------- Кнопки ---------- */
.icon-btn { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--icon); flex: none; transition: background-color .15s; position: relative; overflow: hidden; text-decoration: none; }
.icon-btn:hover { background: var(--bg-hover); }
.icon-btn:active { background: var(--bg-active); }
.icon-btn.sm { width: 32px; height: 32px; }
.icon-btn input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.btn-primary { display: flex; align-items: center; justify-content: center; width: 100%; height: 54px; border-radius: 12px; background: var(--primary); color: #fff; font-weight: 500; font-size: 16px; text-transform: uppercase; letter-spacing: .3px; transition: background-color .15s, opacity .15s; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-primary:disabled { opacity: .6; cursor: default; }
.btn-text { height: 40px; padding: 0 16px; border-radius: 8px; color: var(--primary); font-weight: 500; text-transform: uppercase; font-size: 15px; transition: background-color .15s; }
.btn-text:hover { background: var(--primary-tint); }
.btn-text.danger { color: var(--danger); }
.btn-text.danger:hover { background: rgba(229,57,53,.08); }
.fab { position: absolute; right: 20px; bottom: 20px; width: 54px; height: 54px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 6px rgba(0,0,0,.18); transition: transform .25s var(--ease), background-color .15s; z-index: 3; }
.fab:hover { background: var(--primary-hover); }
.view:not(.on) .fab { transform: scale(0); }

/* ---------- Поля (как в Telegram) ---------- */
.field { position: relative; margin-bottom: 20px; }
.field input, .field textarea { display: block; width: 100%; height: 54px; padding: 0 16px; border: 1px solid var(--borders); border-radius: 12px; background: transparent; font-size: 16px; outline: none; transition: border-color .15s, box-shadow .15s; resize: none; }
.field textarea { height: auto; min-height: 54px; padding: 16px; line-height: 1.3; }
.field label { position: absolute; left: 12px; top: 16px; padding: 0 4px; color: var(--placeholder); background: var(--bg); pointer-events: none; transform-origin: left center; transition: transform .15s ease-out, color .15s; white-space: nowrap; border-radius: 4px; }
.field input:focus, .field textarea:focus { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.field input:focus + label, .field textarea:focus + label { color: var(--primary); }
.field input:not(:placeholder-shown) + label, .field input:focus + label,
.field textarea:not(:placeholder-shown) + label, .field textarea:focus + label { transform: scale(.75) translate(4px, -38px); }
.field.error input, .field.error textarea { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.field.error label { color: var(--danger) !important; }
.field.ok label { color: var(--online) !important; }
.field-eye { position: absolute; right: 8px; top: 7px; width: 40px; height: 40px; border-radius: 50%; color: var(--icon); display: flex; align-items: center; justify-content: center; }
.field-eye:hover { background: var(--bg-hover); }
.field:has(.field-eye) input { padding-right: 52px; }

/* ---------- Авторизация ---------- */
#auth { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; background: var(--bg); }
body.authed #auth { display: none; }
.auth-box { width: 100%; max-width: 360px; padding: 64px 16px 32px; display: flex; flex-direction: column; align-items: stretch; position: relative; z-index: 1; }
.auth-logo { width: 160px; height: 160px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 26px; }
.auth-logo svg { width: 84px; height: 84px; }
.auth-box h1 { margin: 0 0 8px; font-size: 32px; font-weight: 500; text-align: center; }
.auth-sub { margin: 0 0 40px; color: var(--text-secondary); text-align: center; line-height: 1.35; font-size: 16px; }
.auth-box .btn-primary { margin-top: 8px; }
.auth-box .btn-text { margin: 16px auto 0; }
#fName { display: none; }
#auth.reg #fName { display: block; }
.auth-art { display: none; }

/* ---------- Каркас ---------- */
#app { display: flex; height: 100%; height: 100dvh; visibility: hidden; position: relative; }
body.authed #app { visibility: visible; }
#left { width: var(--left-w); flex: none; position: relative; overflow: hidden; background: var(--bg-sidebar); border-right: 1px solid var(--borders); }
#middle { flex: 1; min-width: 0; position: relative; display: flex; flex-direction: column; overflow: hidden; }
#right { width: var(--right-w); flex: none; background: var(--bg); border-left: 1px solid var(--borders); display: none; flex-direction: column; position: relative; z-index: 6; }
#app.right-open #right { display: flex; }

.view { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--bg); transform: translateX(100%); transition: transform .3s var(--ease); visibility: hidden; }
.view.on { transform: none; visibility: visible; }
.view.under { transform: translateX(-20%); visibility: visible; }
#vChats { transform: none; visibility: visible; }
#vChats.under { transform: translateX(-20%); }
.scroll { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; }
.lhead { height: 56px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 12px; position: relative; z-index: 4; }
.lhead h3 { flex: 1; margin: 0 0 0 14px; font-size: 20px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search { flex: 1; height: 42px; display: flex; align-items: center; gap: 8px; padding: 0 14px 0 12px; border-radius: 22px; background: var(--bg-secondary); border: 2px solid transparent; color: var(--icon); transition: border-color .15s, background-color .15s; cursor: text; }
.search:focus-within { border-color: var(--primary); background: var(--bg); color: var(--primary); }
.search input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font-size: 16px; color: var(--text); }
.search input::placeholder { color: var(--placeholder); }

/* ---------- Меню ---------- */
.dropdown { position: absolute; top: 52px; left: 12px; z-index: 20; min-width: 260px; padding: 4px 0; border-radius: 12px; background: var(--bg-menu); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--shadow-menu); transform-origin: top left; transform: scale(.85); opacity: 0; pointer-events: none; transition: transform .15s ease-out, opacity .15s ease-out; }
.dropdown.on { transform: none; opacity: 1; pointer-events: auto; }
.mi { display: flex; align-items: center; gap: 20px; width: calc(100% - 8px); margin: 0 4px; padding: 0 12px; height: 40px; border-radius: 6px; font-size: 14px; font-weight: 500; text-align: left; color: var(--text); }
.mi:hover { background: rgba(0,0,0,.06); }
:root[data-theme="dark"] .mi:hover { background: rgba(255,255,255,.08); }
.mi > span:first-child { color: var(--icon); width: 24px; }
.mi .switch { margin-left: auto; }
.mi.danger, .mi.danger > span:first-child { color: var(--danger); }
.menu-sep { height: 1px; background: var(--dividers); opacity: .5; margin: 4px 0; }

/* ---------- Список чатов ---------- */
.chatlist { flex: 1; overflow-y: auto; padding: 0 8px 80px; }
.chat { display: flex; align-items: center; gap: 10px; height: 72px; padding: 0 9px; border-radius: 12px; cursor: pointer; position: relative; }
.chat:hover { background: var(--bg-hover); }
.chat.on { background: var(--chat-active); color: #fff; }
.chat .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat .row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.chat .nm { flex: 1; min-width: 0; font-weight: 500; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; }
.chat .tm { font-size: 12px; color: var(--text-meta); flex: none; display: flex; align-items: center; gap: 2px; }
.chat .tm svg { color: var(--meta-own); }
.chat .sub { flex: 1; min-width: 0; font-size: 15px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 22px; }
.chat .sub .who { color: var(--text); }
.chat .sub.ty { color: var(--primary); }
.chat.on .tm, .chat.on .sub, .chat.on .sub .who, .chat.on .tm svg, .chat.on .sub.ty { color: rgba(255,255,255,.92); }
.badge { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--badge); color: #fff; font-size: 14px; font-weight: 500; line-height: 22px; text-align: center; flex: none; }
.chat.on .badge { background: #fff; color: var(--primary); }
.empty-list { color: var(--text-secondary); text-align: center; padding: 40px 20px; font-size: 15px; line-height: 1.4; }

/* ---------- Аватары ---------- */
.av { width: 54px; height: 54px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 500; font-size: 20px; position: relative; text-transform: uppercase; user-select: none; }
.av > .av-in { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--av-bg); }
.av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av.md { width: 42px; height: 42px; font-size: 16px; }
.av.sm { width: 34px; height: 34px; font-size: 14px; }
.av.xl { width: 120px; height: 120px; font-size: 44px; }
.av.on-dot::after { content: ""; position: absolute; right: 1px; bottom: 1px; width: 14px; height: 14px; border-radius: 50%; background: var(--online); border: 3px solid var(--bg); box-sizing: border-box; }
.chat:hover .av.on-dot::after { border-color: var(--bg-hover); }
.chat.on .av.on-dot::after { border-color: var(--primary); }
.av.c0 { --av-bg: linear-gradient(#ff845e, #d45246); } .av.c1 { --av-bg: linear-gradient(#febb5b, #f68136); }
.av.c2 { --av-bg: linear-gradient(#b694f9, #6c61df); } .av.c3 { --av-bg: linear-gradient(#9ad164, #46ba43); }
.av.c4 { --av-bg: linear-gradient(#53edd6, #28c9b7); } .av.c5 { --av-bg: linear-gradient(#5caffa, #408acf); }
.av.c6 { --av-bg: linear-gradient(#ff8aac, #d95574); }
.av.saved { --av-bg: linear-gradient(#72d5fd, #2a9ef1); }
.peer0 { color: var(--peer0); } .peer1 { color: var(--peer1); } .peer2 { color: var(--peer2); } .peer3 { color: var(--peer3); }
.peer4 { color: var(--peer4); } .peer5 { color: var(--peer5); } .peer6 { color: var(--peer6); }

/* ---------- Шапка чата ---------- */
.wallpaper { position: absolute; inset: 0; z-index: 0; background: radial-gradient(circle at 20% 20%, var(--wp-a), transparent 55%), radial-gradient(circle at 85% 15%, var(--wp-c), transparent 50%), radial-gradient(circle at 80% 85%, var(--wp-b), transparent 55%), radial-gradient(circle at 15% 85%, var(--wp-d), transparent 55%), var(--wp-a); }
.wp-pattern { position: absolute; inset: 0; background: url(pattern.webp) center / 420px auto repeat; mix-blend-mode: overlay; opacity: var(--wp-pattern-opacity); }
:root[data-theme="dark"] .wallpaper { background: #0f0f0f; }
:root[data-theme="dark"] .wp-pattern { background: radial-gradient(circle at 20% 20%, var(--wp-a), transparent 55%), radial-gradient(circle at 85% 15%, var(--wp-c), transparent 50%), radial-gradient(circle at 80% 85%, var(--wp-b), transparent 55%), radial-gradient(circle at 15% 85%, var(--wp-d), transparent 55%), var(--wp-c); -webkit-mask: url(pattern.webp) center / 420px auto repeat; mask: url(pattern.webp) center / 420px auto repeat; mix-blend-mode: normal; opacity: .55; }
:root[data-wall="plain"] .wp-pattern { display: none; }
:root[data-wall="plain"] .wallpaper { background: var(--wp-plain, #c7d5c2); }
:root[data-theme="dark"][data-wall="plain"] .wallpaper { background: #0f0f0f; }

#mhead { height: 56px; flex: none; display: flex; align-items: center; gap: 4px; padding: 0 8px 0 16px; background: var(--bg); position: relative; z-index: 5; box-shadow: 0 1px 0 var(--borders); }
#backBtn { display: none; margin-left: -8px; }
.mh-peer { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; cursor: pointer; height: 100%; }
.mh-info { min-width: 0; display: flex; flex-direction: column; }
.mh-info b { font-weight: 500; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.375; }
.mh-info small { font-size: 14px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.mh-info small.on { color: var(--primary); }

/* ---------- Закреп ---------- */
#pinbar { display: none; height: 52px; flex: none; align-items: center; gap: 10px; padding: 0 8px 0 14px; background: var(--bg); position: relative; z-index: 4; cursor: pointer; box-shadow: 0 1px 0 var(--borders); }
#pinbar.on { display: flex; }
.pin-lines { width: 2px; height: 36px; display: flex; flex-direction: column; gap: 2px; flex: none; }
.pin-lines i { flex: 1; border-radius: 1px; background: var(--primary); opacity: .35; }
.pin-lines i.on { opacity: 1; }
.pin-body { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; line-height: 1.3; }
.pin-body b { color: var(--primary); font-weight: 500; }
.pin-body span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pin-thumb { width: 36px; height: 36px; border-radius: 6px; overflow: hidden; flex: none; display: none; }
.pin-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pin-thumb.on { display: block; }
#pinbar:hover { background: var(--bg-hover); }

/* ---------- Сообщения ---------- */
#msgs { flex: 1; overflow-y: auto; overflow-x: hidden; position: relative; z-index: 1; overscroll-behavior: contain; }
#msgsInner { max-width: var(--mw); margin: 0 auto; padding: 8px 16px 8px; display: flex; flex-direction: column; min-height: 100%; justify-content: flex-end; }
.date-sep { position: sticky; top: 6px; z-index: 3; align-self: center; margin: 8px 0; padding: 0 10px; height: 26px; line-height: 26px; border-radius: 13px; background: var(--pill); color: #fff; font-size: 15px; font-weight: 500; pointer-events: none; }
.more-load { align-self: center; color: #fff; background: var(--pill); font-size: 14px; padding: 0 10px; height: 24px; line-height: 24px; border-radius: 12px; margin: 4px 0; }
.chat-empty { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 16px 18px; border-radius: 22px; background: var(--pill); color: #fff; max-width: 260px; }
.chat-empty b { font-size: 16px; font-weight: 500; }
.chat-empty span { font-size: 14px; opacity: .9; line-height: 1.35; }
.chat-empty .ce-art { display: none; }

.msg { display: flex; align-items: flex-end; gap: 8px; margin-top: 2px; position: relative; }
.msg.first { margin-top: 8px; }
.msg.own { justify-content: flex-end; }
.msg .av-slot { width: 34px; flex: none; align-self: flex-end; }
.msg.flash .bubble { animation: flash 1.2s ease-out; }
@keyframes flash { 0%, 40% { filter: brightness(.82); } 100% { filter: none; } }
.bubble { --b: var(--bg-in); --bs: var(--bg-in); --acc: var(--accent-in); --meta: var(--text-meta); --rxbg: var(--rx); --rxch: var(--rx-chosen); --rpl: var(--reply-bg);
  position: relative; max-width: min(480px, calc(100% - 50px)); min-width: 56px; padding: 6px 8px 6px 9px; background: var(--b); color: var(--text);
  border-radius: var(--radius-msg); box-shadow: var(--shadow); font-size: var(--fs); line-height: 1.3125; overflow-wrap: anywhere; }
.msg.own .bubble { --b: var(--bg-own); --bs: var(--bg-own-solid, var(--bg-own)); --acc: var(--accent-own); --meta: var(--meta-own); --rxbg: var(--rx-own); --rxch: var(--rx-chosen-own); --rpl: var(--reply-own-bg); }
.msg:not(.own):not(.first) .bubble { border-top-left-radius: var(--radius-msg-sm); }
.msg:not(.own):not(.last) .bubble { border-bottom-left-radius: var(--radius-msg-sm); }
.msg.own:not(.first) .bubble { border-top-right-radius: var(--radius-msg-sm); }
.msg.own:not(.last) .bubble { border-bottom-right-radius: var(--radius-msg-sm); }
.msg.last:not(.own) .bubble { border-bottom-left-radius: 0; }
.msg.last.own .bubble { border-bottom-right-radius: 0; }
.appendix { position: absolute; bottom: -3px; display: none; fill: var(--bg-in); filter: drop-shadow(0 1px 1px rgba(16,35,47,.15)); }
.msg.last .bubble > .appendix { display: block; }
.msg:not(.own) .bubble > .appendix { left: -8.4px; transform: scaleX(-1); }
.msg.own .bubble > .appendix { right: -8.4px; fill: var(--bg-own); }
.bubble.media > .appendix { display: none !important; }
.bubble .name { font-weight: 500; font-size: 15px; line-height: 1.25; margin-bottom: 2px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bubble .text { white-space: pre-wrap; }
.bubble .text a { color: var(--primary); text-decoration: none; }
.bubble .text a:hover { text-decoration: underline; }
.msg.own .bubble .text a { color: var(--acc); }
.bubble.del .text { font-style: italic; color: var(--text-secondary); }
.meta { float: right; position: relative; top: 7px; margin: -2px -4px 0 10px; height: 18px; display: flex; align-items: center; gap: 2px; font-size: 12px; color: var(--meta); white-space: nowrap; user-select: none; line-height: 1; }
.meta .ed { margin-right: 3px; }
.meta .pinned { margin-right: 2px; }
.text-row::after { content: ""; display: block; clear: both; }

.embed { display: flex; flex-direction: column; border-radius: 4px; background: var(--rpl); border-left: 3px solid var(--acc); padding: 3px 8px 3px 7px; margin: 0 0 5px; font-size: 14px; line-height: 1.3; cursor: pointer; min-width: 0; overflow: hidden; position: relative; }
.embed b { color: var(--acc); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.embed span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .9; }
.embed.p0 { --acc: var(--peer0); } .embed.p1 { --acc: var(--peer1); } .embed.p2 { --acc: var(--peer2); } .embed.p3 { --acc: var(--peer3); }
.embed.p4 { --acc: var(--peer4); } .embed.p5 { --acc: var(--peer5); } .embed.p6 { --acc: var(--peer6); }
.msg.own .embed { --acc: var(--accent-own); }

.bubble.media { padding: 0; background: transparent; box-shadow: none; }
.bubble.media .name, .bubble.media .embed { display: none; }
.bubble.cap { padding: 0; }
.bubble.cap > .name { padding: 6px 9px 0; }
.bubble.cap > .embed { margin: 6px 6px 5px; }
.bubble.cap .text-row { padding: 5px 9px 6px; }
.bubble.cap .rxs { padding: 0 8px 6px; }
.bubble.cap .att.vis { border-radius: 0; }
.bubble.cap > .att.vis:first-child { border-top-left-radius: var(--radius-msg); border-top-right-radius: var(--radius-msg); }
.bubble.media .meta { position: absolute; right: 6px; bottom: 6px; top: auto; margin: 0; padding: 0 6px; height: 20px; border-radius: 10px; background: rgba(0,0,0,.35); color: #fff; }

.att.vis { position: relative; overflow: hidden; border-radius: var(--radius-msg); cursor: pointer; background: rgba(0,0,0,.08); max-width: 100%; display: block; }
.att.vis img, .att.vis video { display: block; width: 100%; height: 100%; object-fit: cover; }
.att .play-ov { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; display: flex; align-items: center; justify-content: center; }
.att .dur-ov { position: absolute; left: 6px; top: 6px; padding: 0 6px; height: 20px; line-height: 20px; border-radius: 10px; background: rgba(0,0,0,.35); color: #fff; font-size: 12px; }

.voice { display: flex; align-items: center; gap: 12px; padding: 2px 0 0; }
.vplay { width: 54px; height: 54px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--acc); color: var(--bs); transition: transform .1s; }
.vplay:active { transform: scale(.95); }
.vbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-bottom: 6px; }
.vname { font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vwave { position: relative; height: 23px; cursor: pointer; touch-action: none; }
.vwave .bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 2px; }
.vwave .bars i { width: 2px; flex: none; border-radius: 1px; background: var(--acc); opacity: .4; min-height: 2px; }
.vwave .bars.fill { clip-path: inset(0 calc(100% - var(--p, 0%)) 0 0); }
.vwave .bars.fill i { opacity: 1; }
.vfoot { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--meta); }
.vrate { font-size: 11px; font-weight: 700; padding: 1px 5px; border-radius: 6px; background: var(--rxbg); color: var(--acc); }

.file { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; min-width: 220px; padding: 2px 0 0; }
.file .fi { width: 54px; height: 54px; border-radius: 10px; flex: none; display: flex; align-items: flex-end; justify-content: flex-start; padding: 0 0 8px 8px; color: #fff; font-size: 13px; font-weight: 500; text-transform: lowercase; background: var(--acc); position: relative; overflow: hidden; }
.file .fi::after { content: ""; position: absolute; right: 0; top: 0; border-style: solid; border-width: 0 14px 14px 0; border-color: transparent var(--bs) rgba(0,0,0,.18) transparent; }
.file .fi.e-pdf { background: #e15354; } .file .fi.e-zip { background: #f0a14a; } .file .fi.e-doc { background: #4f8ee2; } .file .fi.e-xls { background: #48a96a; }
.file .fb { min-width: 0; flex: 1; padding-bottom: 6px; }
.file .fn { font-weight: 500; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file .fs { font-size: 14px; color: var(--meta); margin-top: 3px; }
.file:hover .fn { text-decoration: underline; }

.rxs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; clear: both; }
.rx { height: 30px; display: inline-flex; align-items: center; gap: 4px; padding: 0 9px 0 7px; border-radius: 15px; background: var(--rxbg); color: var(--acc); font-size: 15px; font-weight: 500; transition: background-color .15s, transform .1s; }
.rx .e { font-size: 18px; line-height: 1; }
.rx.mine { background: var(--rxch); color: var(--bs); }
.meta.abs { position: absolute; float: none; top: auto; right: 10px; bottom: 6px; margin: 0; }
.meta.in-rx { float: none; top: 0; margin: 0 -4px 0 auto; align-self: flex-end; }
.rx:active { transform: scale(.95); }

.scroll-down { position: absolute; right: 20px; bottom: 90px; width: 54px; height: 54px; border-radius: 50%; background: var(--bg); color: var(--icon); box-shadow: 0 1px 6px rgba(0,0,0,.15); z-index: 6; display: flex; align-items: center; justify-content: center; transform: translateY(150%); opacity: 0; transition: transform .25s var(--ease), opacity .2s; pointer-events: none; }
.scroll-down.on { transform: none; opacity: 1; pointer-events: auto; }
.scroll-down .badge { position: absolute; top: -6px; right: -2px; display: none; }
.scroll-down .badge.on { display: block; }

/* ---------- Композер ---------- */
#footer { position: relative; z-index: 5; flex: none; padding: 0 16px 20px; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
.composer-row { max-width: calc(var(--mw) - 32px); margin: 0 auto; display: flex; align-items: flex-end; gap: 8px; }
.composer { flex: 1; min-width: 0; position: relative; background: var(--composer); border-radius: var(--radius-msg); border-bottom-right-radius: 0; box-shadow: 0 1px 2px rgba(16,35,47,.15); }
.composer .appendix { display: block; right: -8.4px; bottom: -3px; fill: var(--composer); }
.c-row { display: flex; align-items: flex-end; gap: 2px; padding: 0 6px 0 4px; min-height: 56px; }
.c-row .icon-btn { margin-bottom: 8px; }
.c-row.rec { display: none; align-items: center; gap: 10px; padding: 0 14px; }
.composer.recording .c-row:not(.rec) { display: none; }
.composer.recording .c-row.rec { display: flex; }
#text { flex: 1; min-width: 0; border: 0; outline: none; background: none; resize: none; font-size: var(--fs); line-height: 1.3125; padding: 17px 6px 16px; max-height: 260px; overflow-y: auto; display: block; }
#text::placeholder { color: var(--placeholder); }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); flex: none; animation: blink 1.2s infinite; }
#recTime { font-variant-numeric: tabular-nums; flex: none; min-width: 58px; }
#recWave { flex: 1; min-width: 0; height: 32px; color: var(--primary); }
@keyframes blink { 50% { opacity: .2; } }
.round-btn { width: 56px; height: 56px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--composer); color: var(--icon); box-shadow: 0 1px 2px rgba(16,35,47,.15); transition: background-color .15s, color .15s, transform .15s; }
.round-btn:hover { background: var(--primary); color: #fff; }
#sendbtn[data-mode="send"], #sendbtn[data-mode="check"] { color: var(--primary); }
#sendbtn[data-mode="send"]:hover, #sendbtn[data-mode="check"]:hover { color: #fff; }
#sendbtn.recording { background: var(--primary); color: #fff; }
#sendbtn.busy { opacity: .55; }
#recCancel { display: none; color: var(--danger); }
#recCancel:hover { background: var(--danger); color: #fff; }
.composer.recording ~ #recCancel { display: flex; }

.c-embed { display: none; align-items: center; gap: 10px; padding: 8px 6px 0 12px; }
.c-embed.on { display: flex; }
.ce-ic { color: var(--primary); flex: none; }
.ce-body { flex: 1; min-width: 0; display: flex; flex-direction: column; border-left: 2px solid var(--primary); padding: 2px 8px; background: var(--primary-tint); border-radius: 4px; font-size: 14px; line-height: 1.3; }
.ce-body b { color: var(--primary); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ce-body span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.c-atts { display: none; gap: 8px; padding: 8px 8px 0; overflow-x: auto; }
.c-atts.on { display: flex; }
.ai { flex: none; width: 210px; display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 10px; background: var(--bg-secondary); }
.ai .th { width: 44px; height: 44px; border-radius: 8px; flex: none; overflow: hidden; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; text-transform: lowercase; }
.ai .th img { width: 100%; height: 100%; object-fit: cover; }
.ai .ib { min-width: 0; flex: 1; }
.ai .in { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai .is { font-size: 13px; color: var(--text-secondary); }
.ai .is.err { color: var(--danger); }
.ai .pb { height: 3px; border-radius: 2px; background: var(--borders); margin-top: 4px; overflow: hidden; }
.ai .pb i { display: block; height: 100%; background: var(--primary); transition: width .15s; }

.emo-panel { position: absolute; bottom: calc(100% - 12px); left: 16px; width: 352px; max-width: calc(100% - 32px); max-height: 300px; overflow-y: auto; padding: 8px; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; border-radius: 12px; background: var(--bg-menu); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--shadow-menu); transform-origin: bottom left; transform: scale(.85); opacity: 0; pointer-events: none; transition: transform .15s ease-out, opacity .15s; }
.emo-panel.on { transform: none; opacity: 1; pointer-events: auto; }
.emo-panel button { height: 40px; border-radius: 8px; font-size: 26px; line-height: 1; }
.emo-panel button:hover { background: var(--bg-hover); }

#drop { position: absolute; inset: 64px 16px 96px; z-index: 8; display: none; align-items: center; justify-content: center; border-radius: 16px; border: 2px dashed var(--primary); background: var(--bg); color: var(--primary); pointer-events: none; }
#drop > div { display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 20px; }
#middle.drag #drop { display: flex; }

/* ---------- Правая колонка / настройки ---------- */
.profile-hero { display: flex; flex-direction: column; align-items: center; padding: 8px 16px 20px; text-align: center; }
.profile-hero .av { margin-bottom: 14px; }
.ph-name { font-size: 20px; font-weight: 500; overflow-wrap: anywhere; }
.ph-status { font-size: 14px; color: var(--text-secondary); margin-top: 4px; }
.ph-status.on { color: var(--primary); }
.list { padding: 0 8px; }
.li { display: flex; align-items: center; gap: 28px; width: 100%; min-height: 56px; padding: 8px 16px; border-radius: 12px; text-align: left; color: var(--text); font-size: 16px; }
button.li:hover, label.li:hover { background: var(--bg-hover); cursor: pointer; }
.li > span:first-child { color: var(--icon); width: 24px; }
.li > div:not(.av) { flex: 1; min-width: 0; }
.li.info > div { display: flex; flex-direction: column; }
.li.info b { font-weight: 400; overflow-wrap: anywhere; white-space: pre-wrap; }
.li.info small { color: var(--text-secondary); font-size: 14px; margin-top: 2px; }
.li .li-right { color: var(--primary); font-size: 15px; }
.li.danger, .li.danger > span:first-child { color: var(--danger); }
.li.sel > span:first-child { color: var(--primary); }
.sep { height: 10px; background: var(--sep); margin: 8px 0; box-shadow: inset 0 1px 0 var(--borders), inset 0 -1px 0 var(--borders); }
.pad { padding: 12px 24px 4px; }
.sec-title { margin: 0 0 16px; color: var(--text-secondary); font-size: 16px; font-weight: 500; }
.hint { color: var(--text-secondary); font-size: 14px; margin: -8px 0 12px 4px; line-height: 1.35; }
.hint.error { color: var(--danger); }
.hint.ok { color: var(--online); }
.credits { color: var(--text-secondary); font-size: 12px; text-align: center; padding: 16px 24px 32px; margin: 0; line-height: 1.5; display: none; }
.edit-av { display: flex; justify-content: center; padding: 8px 0 20px; }
.edit-av .av { cursor: pointer; overflow: hidden; }
.edit-av input { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 2; font-size: 0; }
.av-cam { position: absolute; inset: 0; z-index: 1; border-radius: 50%; background: rgba(0,0,0,.3); color: #fff; display: flex; align-items: center; justify-content: center; transition: background-color .15s; }
.edit-av .av:hover .av-cam { background: rgba(0,0,0,.45); }
.presets { display: flex; gap: 10px; justify-content: center; margin-bottom: 24px; flex-wrap: wrap; }
.presets button { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; border: 2px solid transparent; padding: 2px; }
.presets button.on { border-color: var(--primary); }
.presets img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.presets .none { background: var(--bg-secondary); color: var(--icon); display: flex; align-items: center; justify-content: center; }
.swatches { display: flex; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; }
.swatches button { width: 40px; height: 40px; border-radius: 50%; position: relative; color: #fff; display: flex; align-items: center; justify-content: center; }
.swatches button.on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--sw); }
.swatches .reset { background: var(--bg-secondary); color: var(--icon); --sw: var(--primary); }
.range-row { display: flex; align-items: center; gap: 16px; padding-bottom: 12px; }
.range-row input { flex: 1; accent-color: var(--primary); }
.range-row span { color: var(--primary); font-weight: 500; min-width: 32px; text-align: right; }
.walls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-bottom: 12px; }
.walls button { aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; position: relative; border: 2px solid transparent; background-size: cover; background-position: center; }
.walls button.on { border-color: var(--primary); }
.walls .w-pattern { background: url(pattern.webp) center / 200px auto, linear-gradient(135deg, #dbddbb, #6ba587, #d5d88d, #88b884); }
.walls .w-plain { background: #c7d5c2; }
.walls .w-anime { background-image: linear-gradient(rgba(255,182,216,.25), rgba(255,182,216,.25)), url(anime/wall.webp); }
.walls span { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px; font-size: 12px; color: #fff; background: rgba(0,0,0,.35); }
.radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--icon); flex: none; position: relative; }
.li.sel .radio { border-color: var(--primary); }
.li.sel .radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--primary); }
.switch { position: relative; width: 34px; height: 14px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch i { position: absolute; inset: 0; border-radius: 7px; background: var(--badge-muted); transition: background-color .2s; }
.switch i::after { content: ""; position: absolute; left: -2px; top: -3px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); border: 2px solid var(--badge-muted); box-sizing: border-box; transition: transform .2s, border-color .2s; }
.switch input:checked + i { background: var(--primary); }
.switch input:checked + i::after { transform: translateX(18px); border-color: var(--primary); }
:root[data-theme="anime"] .switch i::after { background: #fff; }

.r-members .li { gap: 14px; min-height: 64px; }
.r-members .li .av { margin-left: -6px; }
.r-members .pname { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-members small { display: block; }
.r-members small { color: var(--text-secondary); font-size: 14px; }
.r-members small.on { color: var(--primary); }
.r-actions { display: flex; gap: 8px; padding: 0 24px 12px; }
.r-actions .btn-primary { height: 44px; font-size: 14px; }
.r-actions .btn-primary.ghost { background: var(--primary-tint); color: var(--primary); }

/* ---------- Контекстное меню ---------- */
.ctx { position: fixed; z-index: 40; display: none; flex-direction: column; align-items: flex-start; gap: 8px; }
.ctx.on { display: flex; animation: pop .15s ease-out; }
@keyframes pop { from { opacity: 0; transform: scale(.9); } }
.ctx-rx { display: flex; gap: 2px; padding: 4px; border-radius: 24px; background: var(--bg-menu); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--shadow-menu); }
.ctx-rx button { width: 36px; height: 36px; border-radius: 50%; font-size: 22px; line-height: 1; transition: transform .1s, background-color .1s; }
.ctx-rx button:hover { transform: scale(1.18); }
.ctx-rx button.on { background: var(--primary-tint); }
.ctx-menu { min-width: 200px; padding: 4px 0; border-radius: 12px; background: var(--bg-menu); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--shadow-menu); }

/* ---------- Модалка / тосты / просмотр ---------- */
.modal { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.25); }
.modal.on { display: flex; }
.modal-box { width: 100%; max-width: 360px; border-radius: 16px; background: var(--bg); padding: 20px 20px 8px; box-shadow: 0 4px 24px rgba(0,0,0,.2); animation: pop .15s ease-out; }
:root[data-theme="anime"] .modal-box { background: #fff7fb; }
.modal-box h3 { margin: 0 0 10px; font-size: 20px; font-weight: 500; }
.modal-box p { margin: 0 0 12px; line-height: 1.4; }
.modal-btns { display: flex; justify-content: flex-end; gap: 4px; margin: 0 -12px; }
#toasts { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 70; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: max-content; max-width: calc(100% - 32px); }
.toast { padding: 12px 18px; border-radius: 12px; background: rgba(32,32,32,.82); color: #fff; font-size: 15px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: pop .2s ease-out; }
#viewer { position: fixed; inset: 0; z-index: 55; display: none; flex-direction: column; background: rgba(0,0,0,.9); }
#viewer.on { display: flex; }
.vbar { height: 56px; flex: none; display: flex; align-items: center; gap: 4px; padding: 0 8px 0 20px; color: #fff; }
.vbar .icon-btn { color: rgba(255,255,255,.8); }
.vbar .icon-btn:hover { background: rgba(255,255,255,.1); }
.v-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.v-info b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-info small { color: rgba(255,255,255,.6); font-size: 14px; }
#vBody { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 16px 16px; }
#vBody img, #vBody video { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ---------- Аниме-тема ---------- */
:root[data-theme="anime"] body { background: #ffeef6; }
:root[data-theme="anime"] #left { background: linear-gradient(180deg, rgba(255,245,250,.9), rgba(255,236,246,.78) 55%, rgba(255,220,236,.55)), url(anime/side.webp) center bottom / cover no-repeat; border-right-color: var(--borders); }
:root[data-theme="anime"] .view { background: transparent; }
:root[data-theme="anime"] .view:not(#vChats) { background: linear-gradient(rgba(255,247,251,.95), rgba(255,240,247,.93)), url(anime/side.webp) center / cover; }
:root[data-theme="anime"] .chat.on { box-shadow: 0 4px 14px rgba(240,86,155,.3); }
:root[data-theme="anime"] .chat:not(.on) .badge { box-shadow: 0 2px 6px rgba(240,86,155,.35); }
:root[data-theme="anime"] .search { background: rgba(255,255,255,.7); }
:root[data-theme="anime"] .field label { background: #fff6fa; }
:root[data-theme="anime"] .wallpaper { background: linear-gradient(180deg, rgba(255,214,234,.25), rgba(255,182,216,.35)), url(anime/wall.webp) center 20% / cover no-repeat, #ffd9ea; }
:root[data-theme="anime"] .wp-pattern { background: url(pattern.webp) center / 420px auto repeat; mix-blend-mode: soft-light; opacity: .35; }
:root[data-theme="anime"][data-wall="plain"] .wallpaper { background: linear-gradient(160deg, #ffe3f0, #ffd0e6); }
:root[data-theme="anime"] #mhead, :root[data-theme="anime"] #pinbar { background: linear-gradient(90deg, rgba(255,255,255,.86) 40%, rgba(255,240,247,.7)), url(anime/banner.webp) right 30% / 420px auto no-repeat; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
:root[data-theme="anime"] #pinbar { background: linear-gradient(90deg, rgba(255,250,253,.9), rgba(255,240,247,.8)); }
:root[data-theme="anime"] .msg.own .bubble::before { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 64px; background: url(anime/f1.webp) right center / 64px auto no-repeat; opacity: .14; border-radius: inherit; pointer-events: none; -webkit-mask: linear-gradient(90deg, transparent, #000); mask: linear-gradient(90deg, transparent, #000); }
:root[data-theme="anime"] .msg:not(.own) .bubble::before { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 64px; background: url(anime/f0.webp) right center / 64px auto no-repeat; opacity: .1; border-radius: inherit; pointer-events: none; -webkit-mask: linear-gradient(90deg, transparent, #000); mask: linear-gradient(90deg, transparent, #000); }
:root[data-theme="anime"] .bubble.media::before, :root[data-theme="anime"] .bubble.cap::before { display: none; }
:root[data-theme="anime"] .bubble > * { position: relative; }
:root[data-theme="anime"] .bubble > .appendix { position: absolute; }
:root[data-theme="anime"] .msg.own .bubble > .appendix { fill: #ffc0dd; }
:root[data-theme="anime"] .msg:not(.own) .bubble > .appendix { fill: rgba(255,255,255,.9); }
:root[data-theme="anime"] .embed { padding-left: 34px; min-height: 36px; justify-content: center; }
:root[data-theme="anime"] .embed::before { content: ""; position: absolute; left: 4px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; background: var(--embed-face, url(anime/f2.webp)) center / cover; box-shadow: 0 0 0 1.5px rgba(255,255,255,.8); }
:root[data-theme="anime"] .ce-body { padding-left: 38px; position: relative; min-height: 36px; justify-content: center; }
:root[data-theme="anime"] .ce-body::before { content: ""; position: absolute; left: 6px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: url(anime/f4.webp) center / cover; }
:root[data-theme="anime"] .pin-thumb { display: block; }
:root[data-theme="anime"] .pin-thumb:not(.on) { background: url(anime/pin.webp) center / cover; }
:root[data-theme="anime"] .date-sep, :root[data-theme="anime"] .more-load { background: linear-gradient(90deg, rgba(240,86,155,.75), rgba(255,142,192,.75)); box-shadow: 0 2px 8px rgba(240,86,155,.3); }
:root[data-theme="anime"] .chat-empty { background: rgba(255,255,255,.85); color: var(--text); box-shadow: var(--shadow-menu); }
:root[data-theme="anime"] .chat-empty .ce-art { display: block; width: 120px; height: 120px; border-radius: 50%; background: url(anime/empty.webp) center / cover; box-shadow: 0 0 0 4px #fff, 0 4px 14px rgba(240,86,155,.35); }
:root[data-theme="anime"] .composer, :root[data-theme="anime"] .round-btn, :root[data-theme="anime"] .scroll-down { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 2px 10px rgba(214,72,139,.2); }
:root[data-theme="anime"] .composer .appendix { fill: rgba(255,255,255,.88); }
:root[data-theme="anime"] .fab, :root[data-theme="anime"] .btn-primary { background: linear-gradient(135deg, #ff7eb6, #f0569b); box-shadow: 0 4px 14px rgba(240,86,155,.4); }
:root[data-theme="anime"] .mi > span:first-child, :root[data-theme="anime"] .li > span[data-ic]:first-child { width: 32px; height: 32px; border-radius: 50%; color: #fff; background: linear-gradient(rgba(240,86,155,.55), rgba(240,86,155,.55)), var(--ic-face) center / cover; box-shadow: 0 0 0 2px rgba(255,255,255,.85); margin-left: -4px; }
:root[data-theme="anime"] .mi > span:first-child svg, :root[data-theme="anime"] .li > span[data-ic]:first-child svg { width: 18px; height: 18px; }
:root[data-theme="anime"] .profile-hero { background: linear-gradient(rgba(255,255,255,0) 40%, rgba(255,246,250,.95)), url(anime/banner.webp) center top / cover no-repeat; padding-top: 24px; margin-top: -4px; }
:root[data-theme="anime"] .profile-hero .av { box-shadow: 0 0 0 4px #fff, 0 6px 18px rgba(240,86,155,.35); }
:root[data-theme="anime"] .credits { display: block; }
:root[data-theme="anime"] .dropdown::before { content: ""; display: block; height: 70px; margin: -4px 0 4px; border-radius: 12px 12px 0 0; background: linear-gradient(rgba(255,255,255,0) 30%, rgba(255,243,249,.9)), url(anime/banner.webp) center 30% / cover; }
:root[data-theme="anime"] .ctx-menu::before { content: ""; display: block; height: 48px; margin: -4px 0 4px; border-radius: 12px 12px 0 0; background: linear-gradient(rgba(255,255,255,0) 20%, rgba(255,243,249,.9)), url(anime/banner.webp) center 25% / cover; }
:root[data-theme="anime"] #right { background: linear-gradient(rgba(255,247,251,.94), rgba(255,240,247,.92)), url(anime/side.webp) center / cover; }
:root[data-theme="anime"] .modal-box { background: linear-gradient(rgba(255,247,251,.96), rgba(255,240,247,.96)), url(anime/pin.webp) right bottom / 160px auto no-repeat; }
:root[data-theme="anime"] .toast { background: rgba(214,72,139,.88); }
:root[data-theme="anime"] .vplay { box-shadow: 0 3px 10px rgba(240,86,155,.35); }
:root[data-theme="anime"] #auth { background: linear-gradient(90deg, #fff4f9 0%, #fff4f9 45%, rgba(255,244,249,0) 70%), url(anime/hero.webp) right center / auto 100% no-repeat, #fff4f9; }
:root[data-theme="anime"] .auth-logo { background: url(anime/f0.webp) center / cover; box-shadow: 0 0 0 6px #fff, 0 8px 24px rgba(240,86,155,.35); }
:root[data-theme="anime"] .auth-logo svg { display: none; }
:root[data-theme="anime"] .auth-box { background: rgba(255,255,255,.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 24px; margin-top: 40px; padding-top: 40px; box-shadow: 0 8px 32px rgba(240,86,155,.18); }
:root[data-theme="anime"] .walls .w-pattern { background: url(pattern.webp) center / 200px auto, linear-gradient(135deg, #ffe3f0, #ffc0dd); }

/* ---------- Мобильная раскладка ---------- */
@media (max-width: 1150px) {
  #right { position: absolute; right: 0; top: 0; bottom: 0; box-shadow: -4px 0 16px rgba(0,0,0,.12); }
}
@media (max-width: 900px) {
  :root { --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px); }
  html, body { overscroll-behavior: none; }
  #left { width: 100%; border-right: 0; position: absolute; inset: 0; z-index: 2; transition: transform .3s var(--ease), filter .3s var(--ease); }
  #middle { position: absolute; inset: 0; z-index: 3; transform: translateX(100%); transition: transform .3s var(--ease); box-shadow: -8px 0 24px rgba(0,0,0,.18); }
  #app.chat-open #middle { transform: none; }
  #app.chat-open #left { transform: translateX(-25%); filter: brightness(.7); }
  #app.swiping #middle, #app.swiping #left { transition: none; }
  #backBtn { display: inline-flex; margin-left: 0; }
  #right { display: flex; width: 100%; z-index: 7; transform: translateX(100%); visibility: hidden; transition: transform .3s var(--ease), visibility 0s .3s; box-shadow: none; }
  #app.right-open #right { transform: none; visibility: visible; transition: transform .3s var(--ease); }
  .lhead, #mhead, .vbar { height: calc(56px + var(--sat)); padding-top: var(--sat); padding-left: calc(8px + var(--sal)); padding-right: calc(8px + var(--sar)); }
  #mhead { gap: 2px; }
  .mh-peer { gap: 10px; }
  .dropdown { top: calc(52px + var(--sat)); left: calc(8px + var(--sal)); }
  .chatlist { padding: 0 calc(6px + var(--sar)) calc(88px + var(--sab)) calc(6px + var(--sal)); overscroll-behavior: contain; }
  .chat { height: 68px; gap: 12px; }
  .scroll { padding-bottom: var(--sab); overscroll-behavior: contain; }
  .fab { right: calc(16px + var(--sar)); bottom: calc(16px + var(--sab)); }
  #msgsInner { padding: 6px calc(8px + var(--sar)) 6px calc(8px + var(--sal)); }
  #footer { padding: 0 calc(8px + var(--sar)) calc(8px + var(--sab)) calc(8px + var(--sal)); }
  .composer-row { gap: 6px; }
  .c-row { min-height: 48px; padding: 0 4px 0 2px; }
  .c-row .icon-btn { margin-bottom: 4px; }
  #text { padding: 13px 4px 12px; max-height: 140px; font-size: max(16px, var(--fs)); }
  .round-btn { width: 48px; height: 48px; }
  .round-btn svg { width: 24px; height: 24px; }
  .scroll-down { right: calc(12px + var(--sar)); bottom: calc(72px + var(--sab)); width: 46px; height: 46px; }
  #toasts { bottom: calc(80px + var(--sab)); }
  .bubble { max-width: calc(100% - 42px); }
  .msg.own .bubble { max-width: calc(100% - 36px); }
  .emo-panel { left: 0; width: 100%; max-width: none; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); max-height: 40vh; }
  .ctx-menu { min-width: 220px; }
  .mi { height: 44px; font-size: 15px; }
  .modal { align-items: flex-end; padding: 0 0 calc(8px + var(--sab)); }
  .modal-box { max-width: none; margin: 0 8px; border-radius: 20px; animation: sheet .25s var(--ease); }
  #vBody { padding: 0 0 var(--sab); }
  .auth-box { padding-top: calc(48px + var(--sat)); padding-bottom: calc(32px + var(--sab)); }
  .auth-logo { width: 128px; height: 128px; margin-bottom: 22px; }
  .auth-logo svg { width: 68px; height: 68px; }
  .auth-sub { margin-bottom: 32px; }
  :root[data-theme="anime"] #auth { background: linear-gradient(rgba(255,244,249,.55), rgba(255,244,249,.92) 55%), url(anime/hero.webp) center top / cover no-repeat, #fff4f9; }
}
@keyframes sheet { from { transform: translateY(100%); } }
@media (hover: none) {
  .bubble { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  .icon-btn:hover, #pinbar:hover, .emo-panel button:hover, .field-eye:hover, .btn-text:hover { background: none; }
  .chat:hover:not(.on), button.li:hover, label.li:hover, .mi:hover { background: none; }
  .fab:hover, .btn-primary:hover { background: var(--primary); }
  .round-btn:hover { background: var(--composer); color: var(--icon); }
  #sendbtn[data-mode="send"]:hover, #sendbtn[data-mode="check"]:hover { color: var(--primary); }
  #sendbtn.recording:hover { background: var(--primary); color: #fff; }
  #recCancel:hover { background: var(--composer); color: var(--danger); }
  .ctx-rx button:hover { transform: none; }
  .icon-btn:active, .emo-panel button:active, #pinbar:active, .field-eye:active { background: var(--bg-active); }
  .btn-text:active { background: var(--primary-tint); }
  .chat:active:not(.on), button.li:active, label.li:active, .mi:active { background: var(--bg-hover); }
  .round-btn:active, .fab:active { transform: scale(.92); }
  .ctx-rx button:active { transform: scale(1.18); }
  :root[data-theme="anime"] .fab:hover, :root[data-theme="anime"] .btn-primary:hover { background: linear-gradient(135deg, #ff7eb6, #f0569b); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}