/* Палитра — дизайн-токены MAX (тема «space», web.max.ru). Схема берётся из Telegram:
   html[data-scheme="dark|light"], без Telegram — из системы. */
:root {
  --bg: #ffffff;              /* background-primary */
  --bg2: #f5f7fa;             /* background-secondary: поиск, поле ввода */
  --surface: #edeef2;         /* background-surface */
  --text: #060708;            /* text-primary */
  --hint: #06070885;          /* text-tertiary */
  --hint2: #060708ad;         /* text-secondary */
  --link: #007aff;
  --accent: #007aff;          /* button-primary / text-themed */
  --accent-text: #ffffff;
  --sep: #0c0d0e0f;           /* divider-secondary */
  --icon: #060708a3;          /* icon-secondary */
  --mute: #06070847;          /* icon-mute */
  --in: #ffffff;              /* bubbles incoming */
  --in-text: #060708;
  --in-time: #06070885;
  --out: #e9fdff;             /* bubbles outgoing */
  --out-bg: #e9fdff;
  --out-text: #011c29;
  --out-time: #0784b8;
  --out-link: #0784b8;
  --out-author: #0784b8;
  --out-action: #0f8ec2; --out-action-icon: #e9fdff;   /* bubbles-background-action / icon-action */
  --out-reply: #0f8ec2; --out-reply-name: #011c29ad; --out-reply-bg: #0f8ec214;
  --chat-bg: linear-gradient(160deg, #99d5d7, #80bcff);
  --pattern: #20509d2e;
  --system: #ffffffe0;        /* плашки дат и служебные */
  --system-text: #060708;
  --max-a: #007aff;
  --max-b: #526eff;
  --danger: #ff303c;
  --positive: #1abe43;
  --radius: 18px;
  --safe-top: var(--tg-content-safe-area-inset-top, 0px);
  --safe-bottom: max(env(safe-area-inset-bottom), var(--tg-safe-area-inset-bottom, 0px));
}
:root[data-scheme="dark"] {
  --bg: #17181c; --bg2: #25262d; --surface: #0f0f12;
  --text: #ffffff; --hint: #ffffffa3; --hint2: #ffffffcc;
  --sep: #ffffff1f; --icon: #ffffffad; --mute: #ffffff5c;
  --in: #232e3a; --in-text: #ffffff; --in-time: #ffffffa3;
  --out: #6965e5; --out-bg: linear-gradient(160deg, #8849b4, #735acd 50%, #5d6ae5);
  --out-text: #ffffff; --out-time: #ffffffa3; --out-link: #ffffff; --out-author: #ffffff;
    --out-action: #ffffffe0; --out-action-icon: #6965e5; --out-reply: #ffffff85; --out-reply-name: #ffffffcc; --out-reply-bg: #ffffff1f;
  --chat-bg: #141414; --pattern: #7a95c038;
  --system: #373a4ee0; --system-text: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-scheme]) {
    --bg: #17181c; --bg2: #25262d; --surface: #0f0f12;
    --text: #ffffff; --hint: #ffffffa3; --hint2: #ffffffcc;
    --sep: #ffffff1f; --icon: #ffffffad; --mute: #ffffff5c;
    --in: #232e3a; --in-text: #ffffff; --in-time: #ffffffa3;
    --out: #6965e5; --out-bg: linear-gradient(160deg, #8849b4, #735acd 50%, #5d6ae5);
    --out-text: #ffffff; --out-time: #ffffffa3; --out-link: #ffffff; --out-author: #ffffff;
    --out-action: #ffffffe0; --out-action-icon: #6965e5; --out-reply: #ffffff85; --out-reply-name: #ffffffcc; --out-reply-bg: #ffffff1f;
    --chat-bg: #141414; --pattern: #7a95c038;
    --system: #373a4ee0; --system-text: #ffffff;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--text);
  font: 16px/1.35 -apple-system, BlinkMacSystemFont, "Roboto", system-ui, Avenir, Helvetica, Arial, sans-serif;
  overflow: hidden; overscroll-behavior: none;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
svg { width: 24px; height: 24px; fill: currentColor; }
.hidden { display: none !important; }

#app { position: fixed; inset: 0; overflow: clip; }
.view {
  position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--bg);
  transform: translateX(100%); transition: transform .28s cubic-bezier(.2,.8,.2,1); overflow: clip;
}
#list-view { transform: translateX(0); }
#list-view.behind { transform: translateX(-28%); }
#chat-view.active { transform: translateX(0); }

/* ---------- список ---------- */
.list-head { padding: calc(10px + var(--safe-top)) 14px 0; background: var(--bg); position: relative; z-index: 2; }
.brand { display: flex; align-items: center; gap: 10px; margin: 2px 2px 12px; }
.brand-logo {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--max-a), var(--max-b));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--max-b) 40%, transparent);
}
.brand-name { font-weight: 700; font-size: 20px; letter-spacing: .3px; }
.conn { width: 8px; height: 8px; border-radius: 50%; background: var(--hint); margin-left: auto; transition: background .3s; }
.conn.ok { background: #2ecc71; }
.conn.bad { background: var(--danger); }
.search {
  display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px;
  border-radius: 12px; background: var(--bg2); color: var(--hint);
}
.search svg { width: 18px; height: 18px; }
.search input { flex: 1; border: 0; outline: 0; background: none; color: var(--text); font: inherit; font-size: 16px; }
.tabs { display: flex; gap: 6px; overflow-x: auto; padding: 10px 0 8px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  flex: none; padding: 6px 12px; border-radius: 20px; font-size: 14px; color: var(--hint);
  background: var(--bg2); transition: background .2s, color .2s;
}
.tabs button.on { background: var(--accent); color: var(--accent-text); }

.chats { list-style: none; margin: 0; padding: 0 0 var(--safe-bottom); overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; }
.chat-item { display: flex; gap: 12px; align-items: center; padding: 9px 14px; position: relative; cursor: pointer; }
.chat-item:active { background: var(--bg2); }
.chat-item .body { flex: 1; min-width: 0; padding-bottom: 9px; margin-bottom: -9px; border-bottom: .5px solid var(--sep); }
.chat-item:last-child .body { border-bottom: 0; }
.row1, .row2 { display: flex; align-items: center; gap: 6px; }
.row1 .name { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row1 .time { font-size: 13px; color: var(--hint); flex: none; }
.row2 { margin-top: 2px; }
.row2 .preview { flex: 1; color: var(--hint); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preview .who { color: var(--text); }
.preview.typing { color: var(--accent); }
.badge {
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; font-size: 13px; font-weight: 600;
  display: inline-grid; place-items: center; background: var(--accent); color: var(--accent-text); flex: none;
}
.badge.muted { background: color-mix(in srgb, var(--hint) 55%, transparent); }
.mute-ico { width: 15px; height: 15px; color: var(--hint); flex: none; }
.kind-ico { width: 16px; height: 16px; color: var(--hint); flex: none; }

.avatar {
  width: 54px; height: 54px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-weight: 600; font-size: 19px; color: #fff; overflow: hidden; background: #6c8fb8;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.sm { width: 40px; height: 40px; font-size: 15px; }
.avatar.xs { width: 32px; height: 32px; font-size: 13px; }
.avatar.fav { background: linear-gradient(135deg, var(--max-a), var(--max-b)); }

.empty { padding: 40px 20px; text-align: center; color: var(--hint); }

/* ---------- чат ---------- */
.chat-head {
  display: flex; align-items: center; gap: 10px; padding: calc(8px + var(--safe-top)) 10px 8px 6px;
  background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(18px);
  border-bottom: .5px solid var(--sep); position: relative; z-index: 3;
}
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--hint); flex: none; }
.icon-btn:active { background: var(--bg2); }
.back { color: var(--accent); }
.tg .back { display: none; }
.chat-info { min-width: 0; flex: 1; }
.chat-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-sub { font-size: 13px; color: var(--hint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-sub.typing { color: var(--accent); }

.messages {
  flex: 1; overflow-y: auto; padding: 8px 10px 10px; background: var(--chat-bg); background-attachment: fixed;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.loader-top { display: flex; justify-content: center; padding: 10px; }
.spin { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--sep); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.day { text-align: center; margin: 12px 0 8px; position: sticky; top: 4px; z-index: 1; }
.day span {
  font-size: 13px; padding: 3px 10px; border-radius: 12px; color: var(--text);
  background: var(--system); color: var(--system-text); backdrop-filter: blur(10px);
}
.service { text-align: center; margin: 8px 20px; }
.service span { display: inline-block; font-size: 13px; padding: 3px 10px; border-radius: 12px; background: var(--system); color: var(--system-text); }

.msg { display: flex; margin: 2px 0; align-items: flex-end; gap: 6px; }
.msg.out { justify-content: flex-end; }
.msg .avatar.xs { visibility: hidden; }
.msg.tail .avatar.xs { visibility: visible; }
.bubble {
  max-width: min(78%, 520px); padding: 6px 10px 6px; border-radius: var(--radius); position: relative;
  background: var(--in); color: var(--in-text); word-wrap: break-word; overflow-wrap: anywhere;
  animation: pop .18s ease-out;
}
@keyframes pop { from { transform: scale(.96); opacity: .4; } }
.msg.out .bubble { background: var(--out-bg); color: var(--out-text); }
.msg.out .bubble .text a, .msg.out .share b { color: var(--out-link); }
.msg.out .meta { color: var(--out-time); }
.msg.in .meta { color: var(--in-time); }
.msg.in.tail .bubble { border-bottom-left-radius: 6px; }
.msg.out.tail .bubble { border-bottom-right-radius: 6px; }
.msg.flash .bubble { animation: flash 1.2s; }
@keyframes flash { 30% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); } }
.sender { font-size: 14px; font-weight: 600; margin-bottom: 2px; color: var(--c, var(--accent)); }
.text { white-space: pre-wrap; }
.text a { color: var(--link); }
.meta {
  float: right; margin: 6px 0 -4px 10px; font-size: 12px; color: var(--hint); display: inline-flex; gap: 3px; align-items: center;
  user-select: none;
}
.meta svg { width: 16px; height: 16px; }
.msg.out .meta .read { color: var(--out-time); }
.media-only { padding: 3px; }
.media-only .meta {
  position: absolute; right: 10px; bottom: 9px; margin: 0; padding: 2px 7px; border-radius: 10px;
  background: rgba(0,0,0,.45); color: #fff; float: none;
}
.media-only .meta .read { color: #fff !important; }
.photo { display: block; border-radius: 14px; overflow: hidden; background: var(--bg2); max-width: 100%; cursor: zoom-in; }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bubble:not(.media-only) .photo { margin: 2px -6px 4px; }
.video { position: relative; }
.video .play {
  position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; border-radius: 50%;
  background: rgba(0,0,0,.5); display: grid; place-items: center; color: #fff;
}
.video .dur { position: absolute; left: 8px; top: 8px; font-size: 12px; color: #fff; background: rgba(0,0,0,.45); padding: 1px 6px; border-radius: 8px; }
.video video { display: block; width: 100%; border-radius: 14px; }
.video.round, .video.round video, .video.round .photo { border-radius: 50%; }

.file, .audio { display: flex; align-items: center; gap: 10px; min-width: 200px; margin: 2px 0; }
.file-ico, .audio-btn {
  width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-text);
}
.file-ico svg, .audio-btn svg { width: 22px; height: 22px; }
.file-info { min-width: 0; }
.file-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.file-size { font-size: 13px; color: var(--hint); }
.wave { display: flex; align-items: center; gap: 2px; height: 26px; flex: 1; }
.wave i { width: 3px; border-radius: 2px; background: color-mix(in srgb, var(--accent) 35%, transparent); }
.wave i.on { background: var(--accent); }
.audio .dur { font-size: 12px; color: var(--hint); }
.sticker img { width: 160px; height: auto; display: block; }
.share {
  display: block; border-left: 3px solid var(--accent); padding: 4px 8px; margin: 6px 0 2px; border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 8%, transparent); color: inherit; text-decoration: none;
}
.share b { display: block; color: var(--accent); font-size: 14px; }
.share span { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.share img { width: 100%; border-radius: 8px; margin-top: 4px; display: block; }
.call { display: flex; align-items: center; gap: 8px; }
.call .missed { color: var(--danger); }

.quote {
  border-left: 3px solid var(--c, var(--accent)); padding: 2px 8px; margin: 2px 0 4px; border-radius: 4px; cursor: pointer;
  background: color-mix(in srgb, var(--c, var(--accent)) 10%, transparent); font-size: 14px;
}
.quote b { display: block; color: var(--c, var(--accent)); font-size: 13px; }
.quote span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.fwd { font-size: 13px; color: var(--accent); margin-bottom: 2px; }
.reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.reactions button {
  font-size: 14px; padding: 2px 8px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.reactions button.mine { background: var(--accent); color: var(--accent-text); }

.to-bottom {
  position: absolute; right: 12px; bottom: calc(76px + var(--safe-bottom)); width: 44px; height: 44px; border-radius: 50%;
  background: var(--bg); color: var(--hint); box-shadow: 0 2px 10px rgba(0,0,0,.15); display: grid; place-items: center; z-index: 4;
}
.to-bottom .badge { position: absolute; top: -6px; right: -2px; }

/* ---------- ввод ---------- */
.composer { background: var(--bg); border-top: .5px solid var(--sep); padding-bottom: var(--safe-bottom); }
.compose-row, .rec-row { display: flex; align-items: flex-end; gap: 4px; padding: 6px 6px; }
#input {
  flex: 1; resize: none; border: 0; outline: 0; font: inherit; font-size: 16px; color: var(--text);
  background: var(--bg2); border-radius: 20px; padding: 9px 14px; max-height: 140px; line-height: 1.3;
}
.send {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: linear-gradient(135deg, var(--max-a), var(--max-b)); color: #fff;
  animation: pop .15s ease-out;
}
.send svg { width: 20px; height: 20px; margin-left: 2px; }
.rec-row { align-items: center; padding: 6px 6px 6px 16px; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .2; } }
#rec-time { font-variant-numeric: tabular-nums; margin-left: 8px; flex: 1; }
.link-btn { color: var(--accent); padding: 8px 12px; }
.ctx-bar { display: flex; align-items: center; gap: 10px; padding: 6px 6px 0 14px; }
.ctx-ico { color: var(--accent); width: 22px; height: 22px; flex: none; }
.ctx-text { flex: 1; min-width: 0; border-left: 2px solid var(--accent); padding-left: 8px; font-size: 14px; }
.ctx-text b { display: block; color: var(--accent); font-size: 13px; }
.ctx-text span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--hint); }
.read-only { padding: 14px; text-align: center; color: var(--hint); font-size: 14px; }

/* ---------- листы, просмотр ---------- */
.sheet-bg { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 20; animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.sheet {
  position: fixed; left: 8px; right: 8px; bottom: calc(8px + var(--safe-bottom)); z-index: 21;
  background: var(--bg); border-radius: 18px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,.25);
  animation: up .22s cubic-bezier(.2,.8,.2,1);
}
@keyframes up { from { transform: translateY(30px); opacity: 0; } }
.reacts { display: flex; justify-content: space-around; padding: 10px 6px; border-bottom: .5px solid var(--sep); }
.reacts button { font-size: 28px; width: 44px; height: 44px; border-radius: 50%; transition: transform .1s; }
.reacts button:active { transform: scale(1.3); }
.reacts button.mine { background: var(--bg2); }
.actions button { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 18px; text-align: left; font-size: 16px; }
.actions button + button { border-top: .5px solid var(--sep); }
.actions button:active { background: var(--bg2); }
.actions .danger { color: var(--danger); }
.a-ico { width: 24px; text-align: center; }
.picker { position: fixed; inset: 0; z-index: 30; background: var(--bg); display: flex; flex-direction: column; animation: up .2s; }
.picker-head { display: flex; align-items: center; justify-content: space-between; padding: calc(12px + var(--safe-top)) 10px 12px 16px; border-bottom: .5px solid var(--sep); }
.viewer { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.92); display: grid; place-items: center; animation: fade .2s; }
.viewer img { max-width: 100%; max-height: 100%; object-fit: contain; }
.toast {
  position: fixed; left: 50%; bottom: calc(90px + var(--safe-bottom)); transform: translateX(-50%); z-index: 50;
  background: rgba(20,20,24,.9); color: #fff; padding: 10px 16px; border-radius: 14px; font-size: 14px; max-width: 90%;
  animation: up .2s;
}

/* альбомы */
.album { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; border-radius: 14px; overflow: hidden; max-width: 100%; }
.album .wide { grid-column: 1 / -1; }
.album .photo, .album .video .photo { border-radius: 0; }
.album .photo, .album > .video { margin: 0 !important; }
.bubble.has-media:not(.media-only) .album, .bubble.has-media:not(.media-only) > .photo { margin: 2px -6px 6px; }
.bubble.has-media:not(.media-only) { padding-top: 4px; }

/* кнопки под сообщением */
.kb { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 2px; }
.kb-row { display: flex; gap: 4px; }
.kb-btn {
  flex: 1; padding: 8px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* долгое нажатие: без выделения текста и системного меню */
.chat-item, .bubble { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* элементы внутри исходящих — цвета MAX для «своих» пузырей */
.msg.out .audio-btn, .msg.out .file-ico { background: var(--out-action); color: var(--out-action-icon); }
.msg.out .wave i { background: color-mix(in srgb, var(--out-action) 40%, transparent); }
.msg.out .wave i.on { background: var(--out-action); }
.msg.out .audio .dur, .msg.out .file-size { color: var(--out-time); }
.msg.out .quote, .msg.out .share { --c: var(--out-reply); background: var(--out-reply-bg); border-left-color: var(--out-reply); }
.msg.out .quote b { color: var(--out-reply-name); }
.msg.out .quote span, .msg.out .share span { color: var(--out-text); opacity: .75; }
.msg.out .fwd { color: var(--out-reply-name); }
.msg.out .reactions button { background: var(--out-reply-bg); }
.msg.out .reactions button.mine { background: var(--out-action); color: var(--out-action-icon); }
.msg.in .reactions button.mine { background: var(--accent); color: #fff; }


/* ====================== раскладка как в MAX (по скриншотам iOS) ====================== */
:root {
  --btn2: #e9ebf1; --head-bg: #ffffff; --compose-bg: #ffffff; --field-bg: #f0f1f5; --tabbar-bg: #f9f9fb;
  --cnt-bg: #0607082e; --card: #f5f7fa; --chat-bg: linear-gradient(160deg, #99d5d7, #80bcff);
  --pattern-img: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='250'%20height='250'%20viewBox='0%200%20250%20250'%3E%3Cg%20fill='none'%20stroke='%2320509d'%20stroke-opacity='0.2'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M40%2025%20L43.769999999999996%2032.8%20L52.35%2033.97%20L46.11%2039.95%20L47.67%2048.53%20L40%2044.5%20L32.33%2048.53%20L33.89%2039.95%20L27.65%2033.97%20L36.230000000000004%2032.8%20Z'/%3E%3Cpath%20d='M205%20140%20L207.9%20146.0%20L214.5%20146.9%20L209.7%20151.5%20L210.9%20158.1%20L205%20155.0%20L199.1%20158.1%20L200.3%20151.5%20L195.5%20146.9%20L202.1%20146.0%20Z'/%3E%3Cpath%20d='M120%20205%20L122.61%20210.4%20L128.55%20211.21%20L124.23%20215.35%20L125.31%20221.29%20L120%20218.5%20L114.69%20221.29%20L115.77%20215.35%20L111.45%20211.21%20L117.39%20210.4%20Z'/%3E%3Cpath%20d='M170%2031%20Q170%2040%20179%2040%20Q170%2040%20170%2049%20Q170%2040%20161%2040%20Q170%2040%20170%2031%20Z'/%3E%3Cpath%20d='M30%20143%20Q30%20150%2037%20150%20Q30%20150%2030%20157%20Q30%20150%2023%20150%20Q30%20150%2030%20143%20Z'/%3E%3Cpath%20d='M232%20226%20Q232%20232%20238%20232%20Q232%20232%20232%20238%20Q232%20232%20226%20232%20Q232%20232%20232%20226%20Z'/%3E%3Ccircle%20cx='120'%20cy='105'%20r='20'/%3E%3Cellipse%20cx='120'%20cy='105'%20rx='36'%20ry='10'%20transform='rotate%28-20%20120%20105%29'/%3E%3Cpath%20d='M220%2070%20a18%2018%200%201%201%20-14%20-26%20a14%2014%200%201%200%2014%2026%20Z'/%3E%3Cpath%20d='M50%20205%20L78%20185%20L104%20196%20L92%20166'/%3E%3Ccircle%20cx='50'%20cy='205'%20r='2.5'/%3E%3Ccircle%20cx='78'%20cy='185'%20r='2.5'/%3E%3Ccircle%20cx='104'%20cy='196'%20r='2.5'/%3E%3Ccircle%20cx='92'%20cy='166'%20r='2.5'/%3E%3Ccircle%20cx='176'%20cy='204'%20r='6'/%3E%3Cpath%20d='M171%20199%20L148%20176%20M174%20196%20L156%20170%20M179%20198%20L166%20172'/%3E%3Ccircle%20cx='84'%20cy='60'%20r='3'/%3E%3Ccircle%20cx='240'%20cy='110'%20r='3'/%3E%3Ccircle%20cx='12'%20cy='96'%20r='2.5'/%3E%3C/g%3E%3C/svg%3E");
  --out-bg: #e9fdff;
}
:root[data-scheme="dark"] {
  --btn2: #434455; --head-bg: #1a1c1e; --compose-bg: #1b1a1d; --field-bg: #17181c; --tabbar-bg: #1f1f1f;
  --cnt-bg: #5b5b5b; --card: #25262d; --chat-bg: #151515; --in: #34374a; --system: #2d3240;
  --out-bg: linear-gradient(to top right, #5d6ae5, #735acd 55%, #8849b4);
  --pattern-img: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='250'%20height='250'%20viewBox='0%200%20250%20250'%3E%3Cg%20fill='none'%20stroke='%237a95c0'%20stroke-opacity='0.24'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M40%2025%20L43.769999999999996%2032.8%20L52.35%2033.97%20L46.11%2039.95%20L47.67%2048.53%20L40%2044.5%20L32.33%2048.53%20L33.89%2039.95%20L27.65%2033.97%20L36.230000000000004%2032.8%20Z'/%3E%3Cpath%20d='M205%20140%20L207.9%20146.0%20L214.5%20146.9%20L209.7%20151.5%20L210.9%20158.1%20L205%20155.0%20L199.1%20158.1%20L200.3%20151.5%20L195.5%20146.9%20L202.1%20146.0%20Z'/%3E%3Cpath%20d='M120%20205%20L122.61%20210.4%20L128.55%20211.21%20L124.23%20215.35%20L125.31%20221.29%20L120%20218.5%20L114.69%20221.29%20L115.77%20215.35%20L111.45%20211.21%20L117.39%20210.4%20Z'/%3E%3Cpath%20d='M170%2031%20Q170%2040%20179%2040%20Q170%2040%20170%2049%20Q170%2040%20161%2040%20Q170%2040%20170%2031%20Z'/%3E%3Cpath%20d='M30%20143%20Q30%20150%2037%20150%20Q30%20150%2030%20157%20Q30%20150%2023%20150%20Q30%20150%2030%20143%20Z'/%3E%3Cpath%20d='M232%20226%20Q232%20232%20238%20232%20Q232%20232%20232%20238%20Q232%20232%20226%20232%20Q232%20232%20232%20226%20Z'/%3E%3Ccircle%20cx='120'%20cy='105'%20r='20'/%3E%3Cellipse%20cx='120'%20cy='105'%20rx='36'%20ry='10'%20transform='rotate%28-20%20120%20105%29'/%3E%3Cpath%20d='M220%2070%20a18%2018%200%201%201%20-14%20-26%20a14%2014%200%201%200%2014%2026%20Z'/%3E%3Cpath%20d='M50%20205%20L78%20185%20L104%20196%20L92%20166'/%3E%3Ccircle%20cx='50'%20cy='205'%20r='2.5'/%3E%3Ccircle%20cx='78'%20cy='185'%20r='2.5'/%3E%3Ccircle%20cx='104'%20cy='196'%20r='2.5'/%3E%3Ccircle%20cx='92'%20cy='166'%20r='2.5'/%3E%3Ccircle%20cx='176'%20cy='204'%20r='6'/%3E%3Cpath%20d='M171%20199%20L148%20176%20M174%20196%20L156%20170%20M179%20198%20L166%20172'/%3E%3Ccircle%20cx='84'%20cy='60'%20r='3'/%3E%3Ccircle%20cx='240'%20cy='110'%20r='3'/%3E%3Ccircle%20cx='12'%20cy='96'%20r='2.5'/%3E%3C/g%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-scheme]) {
    --btn2: #434455; --head-bg: #1a1c1e; --compose-bg: #1b1a1d; --field-bg: #17181c; --tabbar-bg: #1f1f1f;
    --cnt-bg: #5b5b5b; --card: #25262d; --chat-bg: #151515; --in: #34374a; --system: #2d3240;
    --out-bg: linear-gradient(to top right, #5d6ae5, #735acd 55%, #8849b4);
    --pattern-img: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='250'%20height='250'%20viewBox='0%200%20250%20250'%3E%3Cg%20fill='none'%20stroke='%237a95c0'%20stroke-opacity='0.24'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M40%2025%20L43.769999999999996%2032.8%20L52.35%2033.97%20L46.11%2039.95%20L47.67%2048.53%20L40%2044.5%20L32.33%2048.53%20L33.89%2039.95%20L27.65%2033.97%20L36.230000000000004%2032.8%20Z'/%3E%3Cpath%20d='M205%20140%20L207.9%20146.0%20L214.5%20146.9%20L209.7%20151.5%20L210.9%20158.1%20L205%20155.0%20L199.1%20158.1%20L200.3%20151.5%20L195.5%20146.9%20L202.1%20146.0%20Z'/%3E%3Cpath%20d='M120%20205%20L122.61%20210.4%20L128.55%20211.21%20L124.23%20215.35%20L125.31%20221.29%20L120%20218.5%20L114.69%20221.29%20L115.77%20215.35%20L111.45%20211.21%20L117.39%20210.4%20Z'/%3E%3Cpath%20d='M170%2031%20Q170%2040%20179%2040%20Q170%2040%20170%2049%20Q170%2040%20161%2040%20Q170%2040%20170%2031%20Z'/%3E%3Cpath%20d='M30%20143%20Q30%20150%2037%20150%20Q30%20150%2030%20157%20Q30%20150%2023%20150%20Q30%20150%2030%20143%20Z'/%3E%3Cpath%20d='M232%20226%20Q232%20232%20238%20232%20Q232%20232%20232%20238%20Q232%20232%20226%20232%20Q232%20232%20232%20226%20Z'/%3E%3Ccircle%20cx='120'%20cy='105'%20r='20'/%3E%3Cellipse%20cx='120'%20cy='105'%20rx='36'%20ry='10'%20transform='rotate%28-20%20120%20105%29'/%3E%3Cpath%20d='M220%2070%20a18%2018%200%201%201%20-14%20-26%20a14%2014%200%201%200%2014%2026%20Z'/%3E%3Cpath%20d='M50%20205%20L78%20185%20L104%20196%20L92%20166'/%3E%3Ccircle%20cx='50'%20cy='205'%20r='2.5'/%3E%3Ccircle%20cx='78'%20cy='185'%20r='2.5'/%3E%3Ccircle%20cx='104'%20cy='196'%20r='2.5'/%3E%3Ccircle%20cx='92'%20cy='166'%20r='2.5'/%3E%3Ccircle%20cx='176'%20cy='204'%20r='6'/%3E%3Cpath%20d='M171%20199%20L148%20176%20M174%20196%20L156%20170%20M179%20198%20L166%20172'/%3E%3Ccircle%20cx='84'%20cy='60'%20r='3'/%3E%3Ccircle%20cx='240'%20cy='110'%20r='3'/%3E%3Ccircle%20cx='12'%20cy='96'%20r='2.5'/%3E%3C/g%3E%3C/svg%3E");
  }
}

/* список и страницы */
#list-view { display: flex; flex-direction: column; }
.page { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.list-head { padding: calc(8px + var(--safe-top)) 16px 0; }
.title-row { display: flex; align-items: center; gap: 10px; margin: 4px 0 8px; min-height: 48px; }
.title-row h1 { margin: 0; flex: 1; font-size: 30px; font-weight: 700; letter-spacing: .2px; }
.title-row .conn { margin: 0 4px 0 0; }
.round-btn { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--btn2); color: var(--text); flex: none; }
.round-btn.accent { background: var(--accent); color: #fff; }
.round-btn svg { width: 26px; height: 26px; }
.search { margin-bottom: 6px; border-radius: 12px; background: var(--field-bg); }
.tabs { gap: 30px; padding: 6px 2px 0; margin: 0 -16px; padding-left: 18px; border-bottom: .5px solid var(--sep); }
.tabs button {
  background: none !important; color: var(--hint2) !important; padding: 8px 0 12px; border-radius: 0;
  font-size: 17px; font-weight: 500; position: relative; display: inline-flex; align-items: center; gap: 8px;
}
.tabs button.on { color: var(--text) !important; }
.tabs button.on::after {
  content: ""; position: absolute; left: -4px; right: -4px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent);
}
.tabs .cnt { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; display: inline-grid; place-items: center;
  font-size: 14px; font-weight: 600; background: var(--cnt-bg); color: #fff; }
.tabs .cnt.hidden { display: none; }

.chat-item { padding: 10px 16px; gap: 14px; align-items: flex-start; }
.chat-item .avatar { width: 58px; height: 58px; font-size: 21px; }
.chat-item .body { border-bottom: 0; padding: 2px 0 0; margin: 0; }
.row1 .name { font-size: 17px; font-weight: 600; flex: 0 1 auto; }
.row1 .mute-ico { margin-right: auto; width: 18px; height: 18px; }
.row1 .name + .list-check, .row1 .name + .time { margin-left: auto; }
.row1 .time { font-size: 15px; }
.list-check { width: 18px; height: 18px; color: var(--accent); flex: none; }
.row2 { align-items: flex-start; margin-top: 3px; }
.row2 .preview {
  white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  font-size: 16px; line-height: 1.3; color: var(--hint);
}
.preview .who { color: var(--hint2); }
.row2 .badge { margin-top: 10px; min-width: 26px; height: 26px; border-radius: 13px; font-size: 14px; }
.badge.muted { background: var(--cnt-bg); }
.contact .row2 .preview { -webkit-line-clamp: 1; font-size: 15px; }
.contact { align-items: center; }
.contact .avatar { width: 48px; height: 48px; font-size: 18px; }

.tabbar { display: flex; background: var(--tabbar-bg); border-top: .5px solid var(--sep); padding: 6px 0 calc(4px + var(--safe-bottom)); flex: none; }
.tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 12px; color: var(--hint); }
.tabbar button svg { width: 30px; height: 30px; }
.tabbar button.on { color: var(--accent); }
.tb-ico { position: relative; display: block; height: 30px; }
.tb-badge { position: absolute; top: -5px; right: -12px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  background: var(--danger); color: #fff; font-size: 13px; font-weight: 600; display: grid; place-items: center; border: 2px solid var(--tabbar-bg); }
.chats { padding-bottom: 8px; }

.empty.big { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 80px 32px; }
.empty.big svg { width: 56px; height: 56px; color: var(--accent); }
.empty.big b { color: var(--text); font-size: 18px; }

.settings { padding: 8px 16px; overflow-y: auto; flex: 1; }
.profile-card { display: flex; align-items: center; gap: 16px; padding: 12px 4px 20px; }
.avatar.lg { width: 76px; height: 76px; font-size: 28px; }
.pc-info b { display: block; font-size: 22px; }
.pc-info span { color: var(--hint); }
.set-group { background: var(--card); border-radius: 16px; overflow: hidden; }
.set-row { display: flex; justify-content: space-between; padding: 15px 16px; font-size: 16px; }
.set-row + .set-row { border-top: .5px solid var(--sep); }
.set-val { color: var(--hint); }
.set-note { color: var(--hint); font-size: 14px; margin: 12px 6px; }

/* шапка чата */
.chat-head { background: var(--head-bg); backdrop-filter: none; border-bottom: 0; padding: calc(8px + var(--safe-top)) 12px 10px 4px; gap: 12px; }
.back { color: var(--text); }
.chat-head .avatar.sm { width: 46px; height: 46px; font-size: 17px; }
.chat-title { font-size: 18px; display: flex; align-items: center; gap: 4px; }
.chat-title .mute-ico { width: 18px; height: 18px; flex: none; }
.chat-sub { font-size: 15px; }
.chat-sub.online { color: var(--accent); }
#mute-btn { width: 34px; height: 34px; background: none; border: 2px solid var(--text); color: var(--text); }
#mute-btn svg { width: 20px; height: 20px; }

/* фон чата с узором */
.messages { background: var(--pattern-img) repeat, var(--chat-bg); background-size: 190px 190px, cover; background-attachment: local, fixed; }

/* пузыри */
.bubble { border-radius: 22px; padding: 8px 14px; font-size: 17px; box-shadow: none; }
.msg.in.tail .bubble, .msg.out.tail .bubble { border-radius: 22px; }
.msg { margin: 3px 0; }
.msg + .msg.in:not(.tail), .msg.tail + .msg { margin-top: 6px; }
.meta { font-size: 13px; margin-top: 7px; }
.day span, .service span { font-size: 15px; padding: 4px 14px; border-radius: 14px; }
.media-only { padding: 0; overflow: hidden; }
.media-only .photo, .media-only .album { border-radius: 22px; }
.media-only .meta { background: rgba(0,0,0,.35); backdrop-filter: blur(6px); padding: 3px 9px; border-radius: 12px; }
.msg.out .media-only { padding: 3px; }

/* поле ввода */
.composer { background: var(--compose-bg); border-top: 0; }
.compose-row { align-items: center; padding: 8px 8px 8px 6px; gap: 6px; }
.compose-row .icon-btn { color: var(--icon); width: 42px; height: 42px; }
.compose-row .icon-btn svg { width: 28px; height: 28px; }
.field { flex: 1; display: flex; align-items: flex-end; background: var(--field-bg); border: 1px solid var(--sep); border-radius: 22px; min-width: 0; }
.field #input { background: none; border-radius: 22px; padding: 10px 4px 10px 16px; font-size: 17px; }
.field .in-field { width: 40px; height: 42px; }
.field .in-field svg { width: 26px; height: 26px; }
.emoji-panel { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 6px 10px 10px; max-height: 220px; overflow-y: auto; }
.emoji-panel button { font-size: 26px; height: 42px; border-radius: 10px; }
.emoji-panel button:active { background: var(--bg2); }