/* ================= Токены ================= */
:root {
  --bg: #0b1220;
  --surface: #0f1829;
  --surface-2: #16213a;
  --surface-3: #1c2945;
  --elev: #141f36;
  --border: rgb(148 163 184 / .10);
  --border-strong: rgb(148 163 184 / .18);
  --text: #e7eef9;
  --muted: #8796b3;
  --faint: #5d6c88;
  --accent: #4f8cff;
  --accent-2: #22c1ee;
  --accent-soft: rgb(79 140 255 / .16);
  --grad: linear-gradient(135deg, #4f8cff 0%, #22c1ee 100%);
  --bubble-in: #16213a;
  --bubble-in-text: var(--text);
  --bubble-out-text: #fff;
  --danger: #f2555a;
  --ok: #2ecc8f;
  --warn: #f5b544;
  /* цвета кнопок под постами — как в Telegram (style у кнопок бота) */
  --kb-primary: #3e8bf6;
  --kb-success: #2fb35a;
  --kb-danger: #e5484d;
  --kb-on: #fff;
  --shadow: 0 16px 48px rgb(0 0 0 / .45), 0 2px 6px rgb(0 0 0 / .25);
  --shadow-sm: 0 2px 10px rgb(0 0 0 / .25);
  --glow: 0 8px 24px rgb(79 140 255 / .35);
  --ring: rgb(79 140 255 / .5);
  /* стекло: полупрозрачные поверхности под размытие (без color-mix — его не знает Chromium 83 в Windows-программе) */
  --surface-glass: rgb(15 24 41 / .74);
  --bubble-glass: rgb(22 33 58 / .82);
  --edge: rgb(255 255 255 / .05);         /* блик по верхней кромке панелей */
  --wall-a: rgb(79 140 255 / .14);
  --wall-b: rgb(34 193 238 / .10);
  --wall-dot: rgb(148 163 184 / .07);
  --r-lg: 18px;
  --r-md: 14px;
  --r-sm: 10px;
  --ease: cubic-bezier(.2, .8, .2, 1);     /* быстрый старт, мягкая остановка */
  --spring: cubic-bezier(.34, 1.45, .64, 1); /* с лёгким «перелётом» — для появления окон */
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #eef2f8;
  --surface: #ffffff;
  --surface-2: #f1f5fb;
  --surface-3: #e6ecf5;
  --elev: #ffffff;
  --border: rgb(15 23 42 / .07);
  --border-strong: rgb(15 23 42 / .13);
  --text: #0f172a;
  --muted: #64748b;
  --faint: #94a3b8;
  --accent-soft: rgb(79 140 255 / .12);
  --bubble-in: #ffffff;
  --shadow: 0 16px 48px rgb(15 23 42 / .16), 0 2px 6px rgb(15 23 42 / .06);
  --shadow-sm: 0 2px 8px rgb(15 23 42 / .08);
  --glow: 0 8px 24px rgb(79 140 255 / .28);
  --surface-glass: rgb(255 255 255 / .74);
  --bubble-glass: rgb(255 255 255 / .82);
  --edge: rgb(255 255 255 / .9);
  --kb-primary: #2f80ed;
  --kb-success: #23a24d;
  --kb-danger: #e03e43;
  --wall-a: rgb(79 140 255 / .14);
  --wall-b: rgb(34 193 238 / .12);
  --wall-dot: rgb(15 23 42 / .05);
  color-scheme: light;
}

/* ================= База ================= */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 14px/1.45 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "calt";
}
/* смена темы: цвета перетекают (класс ставит applyTheme на время перехода) */
html.theming, html.theming * { transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease) !important; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 9px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--faint); background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }
[hidden] { display: none !important; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; letter-spacing: -.01em; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.error { color: var(--danger); min-height: 1.2em; font-size: 13px; }
::selection { background: rgb(79 140 255 / .35); }
* { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }

svg.i { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
svg.i.fill { fill: currentColor; stroke: none; }
[data-icon] { display: inline-grid; place-items: center; }

input, textarea, select {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 10px 12px; outline: none; width: 100%; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:hover, textarea:hover, select:hover { border-color: var(--border-strong); }
input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); background: var(--surface); }

.btn {
  border: 1px solid var(--border); border-radius: var(--r-sm); padding: 9px 16px; cursor: pointer;
  background: var(--surface-2); font-weight: 600; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; transition: transform .18s var(--spring), filter .2s, background .2s var(--ease), box-shadow .25s var(--ease), border-color .2s;
}
.btn:hover { background: var(--surface-3); border-color: var(--border-strong); transform: translateY(-1px); }
.btn:active { transform: scale(.97); transition-duration: .08s; }
/* градиент шире кнопки: при наведении он «переливается», а не просто светлеет */
.btn.primary {
  background: linear-gradient(135deg, #4f8cff 0%, #22c1ee 50%, #4f8cff 100%); background-size: 220% 100%; background-position: 0 0;
  color: #fff; border-color: transparent; box-shadow: 0 6px 18px rgb(79 140 255 / .3), inset 0 1px 0 rgb(255 255 255 / .2);
  transition: transform .18s var(--spring), background-position .5s var(--ease), box-shadow .25s var(--ease);
}
.btn.primary:hover { background-position: 100% 0; box-shadow: 0 10px 26px rgb(79 140 255 / .42), inset 0 1px 0 rgb(255 255 255 / .25); }
.btn.danger { background: rgb(242 85 90 / .14); color: var(--danger); border-color: rgb(242 85 90 / .25); }
.btn.danger:hover { background: rgb(242 85 90 / .22); }
.btn.block { width: 100%; }
.btn.sm { padding: 7px 13px; font-size: 13px; border-radius: 9px; gap: 6px; }
.btn.sm svg.i { width: 16px; height: 16px; }
.btn:disabled { opacity: .55; cursor: default; transform: none; }

.icon-btn {
  border: 0; background: transparent; cursor: pointer; border-radius: 12px; color: var(--muted);
  width: 38px; height: 38px; display: inline-grid; place-items: center; flex: none;
  transition: background .2s var(--ease), color .2s, transform .18s var(--spring);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); transform: scale(1.06); }
.icon-btn:active { transform: scale(.92); transition-duration: .08s; }
#modal-close svg.i { transition: transform .25s var(--ease); }
#modal-close:hover svg.i { transform: rotate(90deg); }
.icon-btn.sm { width: 32px; height: 32px; border-radius: 10px; }
.icon-btn.sm svg.i { width: 18px; height: 18px; }

.badge {
  background: var(--accent); color: #fff; border-radius: 999px; min-width: 20px; height: 20px; padding: 0 6px;
  font-size: 11.5px; display: inline-grid; place-items: center; font-weight: 700; font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 8px rgb(79 140 255 / .35);
}
.badge.dim { background: var(--surface-3); color: var(--muted); }
.chip {
  font-size: 11px; padding: 2px 7px; border-radius: 999px; white-space: nowrap; flex: none; font-weight: 600;
  background: var(--accent-soft); background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c); color: color-mix(in srgb, var(--c) 85%, var(--text));
}

.brand-mark {
  width: 40px; height: 40px; border-radius: 13px; background: var(--grad); color: #fff;
  box-shadow: 0 6px 20px rgb(79 140 255 / .35), inset 0 1px 0 rgb(255 255 255 / .25); flex: none;
  transition: transform .25s var(--spring), box-shadow .25s var(--ease);
}
.rail .brand-mark:hover { transform: scale(1.06) rotate(-4deg); box-shadow: 0 10px 28px rgb(79 140 255 / .5), inset 0 1px 0 rgb(255 255 255 / .25); }
.brand-mark svg.i { width: 22px; height: 22px; fill: #fff; stroke: none; }
.brand-mark.lg { width: 64px; height: 64px; border-radius: 20px; margin: 0 auto 6px; }
.brand-mark.lg svg.i { width: 34px; height: 34px; }

/* ================= Вход ================= */
.login {
  min-height: 100%; display: grid; place-items: center; padding: 16px; position: relative; overflow: hidden;
  background: radial-gradient(var(--wall-dot) 1px, transparent 1.2px) 0 0 / 22px 22px, var(--bg);
}
/* два медленно плывущих пятна света за карточкой */
.login::before, .login::after {
  content: ""; position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; pointer-events: none; opacity: .5;
}
.login::before { left: -30vmax; top: -35vmax; background: radial-gradient(circle, rgb(79 140 255 / .55) 0%, transparent 62%); animation: drift 16s ease-in-out infinite alternate; }
.login::after { right: -30vmax; bottom: -35vmax; background: radial-gradient(circle, rgb(34 193 238 / .45) 0%, transparent 62%); animation: drift 20s ease-in-out infinite alternate-reverse; }
:root[data-theme="light"] .login::before, :root[data-theme="light"] .login::after { opacity: .35; }
.login-card {
  position: relative; z-index: 1; width: min(380px, 100%); padding: 34px 28px 30px; border-radius: 26px;
  background: var(--surface-glass); backdrop-filter: blur(24px); border: 1px solid var(--border-strong);
  display: grid; gap: 12px; text-align: center; box-shadow: var(--shadow), inset 0 1px 0 var(--edge);
  animation: rise .55s var(--ease) both;
}
.login-card > * { animation: rise .55s var(--ease) both; }
.login-card > :nth-child(2) { animation-delay: .06s; }
.login-card > :nth-child(3) { animation-delay: .1s; }
.login-card > :nth-child(4) { animation-delay: .14s; }
.login-card > :nth-child(5) { animation-delay: .18s; }
.login-card h1 { font-size: 24px; letter-spacing: -.02em; }
.login-card .brand-mark.lg { animation: float 5s ease-in-out infinite; box-shadow: 0 14px 36px rgb(79 140 255 / .45), inset 0 1px 0 rgb(255 255 255 / .25); }
.login-card input { padding: 12px 14px; border-radius: 13px; text-align: center; font-size: 15px; }
.login-card .btn { padding: 12px 16px; border-radius: 13px; font-size: 15px; }

/* ================= Раскладка ================= */
.app {
  height: 100%; display: grid; overflow: hidden;
  background: radial-gradient(50% 40% at 0% 0%, var(--wall-a), transparent 70%), radial-gradient(40% 40% at 100% 100%, var(--wall-b), transparent 70%), var(--bg);
  grid-template-columns: 76px 360px minmax(0, 1fr);
  /* minmax(0, 1fr) не даёт строке грида растянуться по высоте ленты сообщений */
  grid-template-rows: minmax(0, 1fr);
}
.rail, .sidebar, .chat, .messages, .dialog-list, .chat-body { min-height: 0; }

/* ---------- рейка аккаунтов ---------- */
.rail {
  background: transparent; display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 14px 0; overflow-y: auto; overflow-x: visible; scrollbar-width: none;
}
.rail-sep { width: 28px; height: 1px; background: var(--border-strong); margin: 2px 0; flex: none; }
.rail-accounts { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.rail-spacer { flex: 1; }
.rail-item {
  width: 48px; height: 48px; border-radius: 16px; border: 0; cursor: pointer; padding: 0; flex: none;
  background: var(--surface-2); position: relative; display: grid; place-items: center; color: var(--muted);
  transition: border-radius .25s var(--ease), background .2s var(--ease), color .2s, transform .2s var(--spring), box-shadow .25s var(--ease);
}
.rail-item:hover { border-radius: 14px; color: var(--text); background: var(--surface-3); transform: translateY(-1px); }
.rail-item:active { transform: scale(.94); transition-duration: .08s; }
.rail-item.active { color: #fff; background: var(--grad); box-shadow: var(--glow); }
.rail-item::before {
  content: ""; position: absolute; left: -14px; width: 4px; height: 0; border-radius: 0 4px 4px 0;
  background: var(--grad); transition: height .25s var(--spring);
}
.rail-item:hover::before { height: 16px; }
.rail-item.active::before { height: 32px; }
.rail-item.add { background: transparent; border: 1.5px dashed var(--border-strong); color: var(--accent); }
.rail-item.add:hover { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 4px var(--accent-soft); }
.rail-item.add svg.i { transition: transform .3s var(--spring); }
.rail-item.add:hover svg.i { transform: rotate(90deg); }
.rail-item .avatar { width: 48px; height: 48px; border-radius: inherit; font-size: 15px; transition: transform .2s var(--spring); }
.rail-item.acc { background: transparent; }
.rail-item.acc .avatar { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--c); transition: box-shadow .25s var(--ease); }
.rail-item.acc:hover .avatar { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--c), 0 8px 20px rgb(0 0 0 / .3); }
.rail-item.acc.active { background: transparent; box-shadow: none; }
.rail-item.acc.active .avatar { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--c), 0 0 22px var(--c); }
.rail-item .dot {
  position: absolute; right: -2px; bottom: -2px; width: 14px; height: 14px; border-radius: 50%;
  border: 3px solid var(--bg); background: var(--faint);
}
.dot.online { background: var(--ok); box-shadow: 0 0 8px rgb(46 204 143 / .7); }
.dot.error { background: var(--danger); box-shadow: 0 0 8px rgb(242 85 90 / .6); }
.dot.connecting { background: var(--warn); animation: blink 1.2s ease-in-out infinite; }
.rail-item .badge { position: absolute; top: -6px; right: -8px; box-shadow: 0 0 0 3px var(--bg); }
.rail-tool {
  width: 42px; height: 42px; border-radius: 12px; border: 0; background: transparent; color: var(--muted);
  cursor: pointer; display: grid; place-items: center; position: relative; flex: none;
  transition: background .2s var(--ease), color .2s, transform .2s var(--spring);
}
.rail-tool:hover { background: var(--surface-2); color: var(--text); transform: translateY(-1px); }
.rail-tool:active { transform: scale(.92); transition-duration: .08s; }
.rail-tool svg.i { transition: transform .25s var(--spring); }
#toggle-theme:hover svg.i { transform: rotate(25deg); }
.rail-tool.on { color: var(--accent); background: var(--accent-soft); }

/* подсказки рейки */
[data-tip] { position: relative; }
.tip {
  position: fixed; z-index: 80; pointer-events: none; background: var(--elev); color: var(--text);
  border: 1px solid var(--border-strong); padding: 6px 10px; border-radius: 10px; font-size: 12.5px; font-weight: 500;
  box-shadow: var(--shadow); white-space: pre-line; max-width: 260px; transform: translateY(-50%);
  animation: tip-in .18s var(--ease);
}

/* ---------- список диалогов ---------- */
.sidebar {
  background: var(--surface); border-radius: 22px 0 0 0; border: 1px solid var(--border); border-right: 0; border-bottom: 0;
  display: flex; flex-direction: column; min-width: 0; margin-top: 8px; box-shadow: inset 0 1px 0 var(--edge);
}
.sidebar-head { padding: 14px 14px 10px; display: grid; gap: 12px; }
.scope { display: flex; align-items: center; gap: 4px; min-height: 40px; }
.scope-text { flex: 1; min-width: 0; padding-left: 4px; }
.scope-title { font-weight: 700; font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.02em; }
.scope-sub { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scope-sub:empty { display: none; }
.search { position: relative; display: block; }
.search > [data-icon] { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.search > [data-icon] svg.i { width: 18px; height: 18px; }
.search input { padding-left: 38px; border-radius: 12px; background: var(--surface-2); }
.search > [data-icon] { transition: color .2s; }
.search:focus-within > [data-icon] { color: var(--accent); }
/* вкладки папок: прокручиваются по горизонтали, если не влезают */
.folder-tabs {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 0 14px 2px;
  mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
.folder-tabs::-webkit-scrollbar { display: none; }
.ftab {
  flex: none; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--muted); padding: 6px 12px; border-radius: 999px; cursor: pointer;
  font-weight: 600; font-size: 13px; white-space: nowrap; transition: background .2s var(--ease), color .2s, border-color .2s, transform .18s var(--spring), box-shadow .2s;
}
.ftab:hover { color: var(--text); background: var(--surface-3); transform: translateY(-1px); }
.ftab:active { transform: scale(.96); }
.ftab.active { background: var(--accent-soft); color: var(--accent); border-color: rgb(79 140 255 / .35); box-shadow: 0 2px 10px rgb(79 140 255 / .15); }
.ftab svg.i { width: 15px; height: 15px; }
.ftab-n { font-size: 11px; font-weight: 700; background: var(--surface-3); color: var(--muted); border-radius: 999px; padding: 0 6px; min-width: 18px; text-align: center; }
.ftab.active .ftab-n { background: var(--accent); color: #fff; }
.ftab.add { padding: 6px 9px; border-style: dashed; color: var(--accent); background: transparent; }

/* контекстное меню чата и папок */
.ctx-menu {
  position: fixed; z-index: 70; min-width: 230px; max-width: 300px; padding: 6px; border-radius: 14px;
  background: var(--elev); border: 1px solid var(--border-strong); box-shadow: var(--shadow), inset 0 1px 0 var(--edge);
  animation: pop .22s var(--spring); max-height: min(70vh, 520px); overflow-y: auto; transform-origin: top left;
}
.ctx-title {
  padding: 6px 10px 8px; font-size: 12px; font-weight: 600; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.ctx-item {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 9px;
  background: transparent; cursor: pointer; text-align: left; font-size: 13.5px; font-weight: 500; transition: background .15s, transform .15s var(--ease);
}
/* отдельными правилами: Chromium 83 не знает :focus-visible и выбросил бы список целиком */
.ctx-item:hover { background: var(--surface-2); outline: none; transform: translateX(2px); }
.ctx-item:focus-visible { background: var(--surface-2); outline: none; }
.ctx-item.danger { color: var(--danger); }
.ctx-ic { color: var(--muted); display: inline-grid; }
.ctx-item.danger .ctx-ic { color: var(--danger); }
.ctx-ic svg.i { width: 17px; height: 17px; }
.ctx-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctx-check { color: var(--accent); display: inline-grid; }
.ctx-more { color: var(--faint); display: inline-grid; }
.ctx-check svg.i, .ctx-more svg.i { width: 16px; height: 16px; }
.ctx-sep { height: 1px; background: var(--border); margin: 4px 6px; }

.segmented { display: flex; position: relative; background: var(--surface-2); border-radius: 12px; padding: 3px; gap: 2px; }
.seg {
  flex: 1; border: 0; background: transparent; padding: 7px 6px; border-radius: 9px; cursor: pointer;
  color: var(--muted); font-weight: 600; font-size: 13px; transition: background .15s, color .2s var(--ease), transform .15s var(--ease);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; outline: none;
  position: relative; z-index: 1;
}
.seg svg.i { width: 15px; height: 15px; flex: none; transition: transform .3s var(--spring); }
.seg:hover { color: var(--text); }
.seg:active { transform: scale(.96); }
.seg:focus-visible { box-shadow: 0 0 0 3px var(--accent-soft); }
.seg.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.seg.active svg.i { transform: translateY(-1px) scale(1.08); }
:root[data-theme="dark"] .seg.active { background: var(--surface-3); }
/* «бегунок»: при включённой анимации (segmentedPill) фон активного сегмента рисует он, а не сама кнопка */
.segmented.has-pill .seg.active { background: transparent; box-shadow: none; }
.seg-pill {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: 0; border-radius: 9px; pointer-events: none;
  background: var(--surface); box-shadow: var(--shadow-sm), inset 0 1px 0 var(--edge);
  transition: transform .42s var(--spring), width .42s var(--spring), opacity .2s;
}
:root[data-theme="dark"] .seg-pill { background: var(--surface-3); }
.seg-pill.still { transition: none; }

.dialog-list { overflow-y: auto; flex: 1; padding: 2px 8px 12px; }
.dialog {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 9px 10px; border-radius: 14px;
  cursor: pointer; align-items: center; position: relative; transition: background .18s var(--ease), transform .18s var(--ease);
}
.dialog.in { animation: rise .4s var(--ease) both; animation-delay: calc(var(--i, 0) * 30ms); }
.dialog:hover { background: var(--surface-2); }
.dialog:active { transform: scale(.985); }
.dialog .avatar { transition: transform .25s var(--spring); }
.dialog:hover .avatar { transform: scale(1.04); }
.dialog.active { background: var(--accent-soft); }
.dialog.active::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--grad); }
.dialog.active::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(79 140 255 / .35); pointer-events: none; }
.dialog .acc-mark { position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--c); }
.dialog .avatar { width: 52px; height: 52px; font-size: 17px; }
.d-row { display: flex; gap: 6px; align-items: center; min-width: 0; }
.d-row + .d-row { margin-top: 2px; }
.d-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; display: flex; align-items: center; gap: 5px; }
.d-name .t { overflow: hidden; text-overflow: ellipsis; }
.d-name svg.i { width: 15px; height: 15px; color: var(--muted); }
.d-time { font-size: 12px; color: var(--faint); flex: none; font-variant-numeric: tabular-nums; }
.dialog.has-unread .d-time { color: var(--accent); }
.d-text { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; flex: 1; min-width: 0; }
.d-text .you { color: var(--text); opacity: .75; }
.d-text .media-label { color: var(--accent); }
.d-flags { display: flex; gap: 4px; align-items: center; color: var(--faint); flex: none; }
.d-flags svg.i { width: 15px; height: 15px; }

.avatar {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-weight: 600;
  color: #fff; overflow: hidden; flex: none; font-size: 16px; letter-spacing: .02em;
  background: var(--c, #4f8cff); background: linear-gradient(145deg, color-mix(in srgb, var(--c, #4f8cff) 80%, #fff), var(--c, #4f8cff));
}
.avatar { box-shadow: inset 0 1px 0 rgb(255 255 255 / .18); }
.avatar img { width: 100%; height: 100%; object-fit: cover; animation: fade .3s ease-out; }
.avatar.sm { width: 40px; height: 40px; font-size: 14px; }
.avatar.xs { width: 34px; height: 34px; font-size: 13px; }
.avatar.lg { width: 84px; height: 84px; font-size: 28px; }

.empty-list { padding: 48px 20px; text-align: center; color: var(--muted); display: grid; gap: 12px; justify-items: center; animation: rise .4s var(--ease); }
.empty-list svg.i { width: 36px; height: 36px; color: var(--faint); }

/* скелетоны */
.skel { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite var(--ease); border-radius: 8px; }
.skel-dialog { display: grid; grid-template-columns: 52px 1fr; gap: 12px; padding: 9px 10px; align-items: center; }
.skel-dialog .c { width: 52px; height: 52px; border-radius: 50%; }
.skel-dialog .l1 { height: 12px; width: 55%; margin-bottom: 9px; }
.skel-dialog .l2 { height: 10px; width: 80%; }
.skel-msg { height: 44px; border-radius: 16px; margin: 4px 0; }

/* ================= Чат ================= */
.chat {
  display: flex; flex-direction: column; min-width: 0; position: relative; margin-top: 8px;
  border-top: 1px solid var(--border); border-left: 1px solid var(--border); box-shadow: inset 0 1px 0 var(--edge);
  background:
    radial-gradient(55% 45% at 15% 0%, var(--wall-a), transparent 70%),
    radial-gradient(45% 45% at 100% 100%, var(--wall-b), transparent 70%),
    radial-gradient(var(--wall-dot) 1px, transparent 1.2px) 0 0 / 22px 22px,
    var(--bg);
}
.chat-placeholder { margin: auto; text-align: center; display: grid; gap: 10px; justify-items: center; padding: 24px; animation: rise .5s var(--ease); }
.chat-placeholder h2 { font-size: 22px; letter-spacing: -.02em; }
.placeholder-art {
  width: 96px; height: 96px; border-radius: 30px; background: var(--grad); color: #fff; display: grid; place-items: center;
  box-shadow: 0 16px 40px rgb(79 140 255 / .35), inset 0 1px 0 rgb(255 255 255 / .25); margin-bottom: 6px; position: relative;
  animation: float 6s ease-in-out infinite;
}
/* мягкое свечение позади */
.placeholder-art::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 180px; height: 180px; margin: -90px 0 0 -90px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgb(79 140 255 / .35) 0%, transparent 65%); animation: breathe 6s ease-in-out infinite;
}
.placeholder-art svg.i { width: 44px; height: 44px; }
.chat.empty > :not(.chat-placeholder) { display: none !important; }
.chat:not(.empty) .chat-placeholder { display: none; }

.chat-head {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px; min-height: 64px; z-index: 3;
  background: var(--surface-glass); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
.chat-meta { flex: 1; min-width: 0; }
.chat-title { font-weight: 700; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; }
.chat-sub { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; }
.back { display: none; }

.chat-body { flex: 1; position: relative; display: flex; flex-direction: column; }
.messages { flex: 1; overflow-y: auto; padding: 18px max(16px, calc((100% - 760px) / 2)) 12px; display: flex; flex-direction: column; }
.day-sep {
  align-self: center; position: sticky; top: 4px; z-index: 2; margin: 12px 0 8px;
  background: var(--surface-glass); backdrop-filter: blur(10px); box-shadow: var(--shadow-sm);
  color: var(--muted); padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--border);
}
.service {
  align-self: center; color: var(--muted); font-size: 12.5px; margin: 6px 0; text-align: center;
  background: var(--surface-glass); padding: 4px 12px; border-radius: 999px;
}

.msg { max-width: min(540px, 80%); align-self: flex-start; position: relative; margin-top: 2px; }
.msg.out { align-self: flex-end; }
.msg.grp-first { margin-top: 10px; }
.msg.new { animation: msg-in .38s var(--spring); }
.msg.out.new { transform-origin: bottom right; }
.msg:not(.out).new { transform-origin: bottom left; }
.bubble {
  background: var(--bubble-in); color: var(--bubble-in-text); padding: 7px 11px 7px; border-radius: 18px;
  white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; box-shadow: var(--shadow-sm), inset 0 1px 0 var(--edge);
  border: 1px solid var(--border); transition: box-shadow .2s var(--ease);
}
.msg:hover .bubble { box-shadow: 0 6px 18px rgb(0 0 0 / .22), inset 0 1px 0 var(--edge); }
.msg:not(.out).grp-last .bubble { border-bottom-left-radius: 6px; }
.msg:not(.out):not(.grp-first) .bubble { border-top-left-radius: 6px; }
.msg.out .bubble { background: linear-gradient(135deg, #5593ff 0%, #22c1ee 100%); color: var(--bubble-out-text); border-color: transparent; box-shadow: 0 4px 14px rgb(79 140 255 / .22), inset 0 1px 0 rgb(255 255 255 / .22); }
.msg.out:hover .bubble { box-shadow: 0 8px 22px rgb(79 140 255 / .35), inset 0 1px 0 rgb(255 255 255 / .22); }
.msg.out.grp-last .bubble { border-bottom-right-radius: 6px; }
.msg.out:not(.grp-first) .bubble { border-top-right-radius: 6px; }
.msg.out a { color: #fff; text-decoration: underline; }
.msg .sender { font-weight: 600; font-size: 13px; margin-bottom: 2px; color: var(--sc, var(--accent)); }
.msg .meta { float: right; margin: 8px 0 -4px 12px; font-size: 11px; color: var(--faint); white-space: nowrap; display: inline-flex; gap: 4px; align-items: center; user-select: none; }
.msg .meta svg.i { width: 13px; height: 13px; }
.msg.out .meta { color: rgb(255 255 255 / .75); }
.msg .quote {
  border-left: 3px solid var(--accent); padding: 4px 9px; margin: 1px 0 5px; font-size: 13px; cursor: pointer; border-radius: 6px;
  background: var(--accent-soft); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.msg.out .quote { border-left-color: #fff; background: rgb(255 255 255 / .16); color: rgb(255 255 255 / .9); }
.msg .media:empty { display: none; }
.msg .media { margin: -2px -6px 5px; }
.msg .media img, .msg .media video { max-width: 100%; max-height: 380px; height: auto; border-radius: 13px; display: block; background: var(--surface-3); object-fit: cover; }
.msg .media img.sticker { max-width: 170px; background: none; }
.msg .media audio { width: 280px; max-width: 100%; display: block; }
.msg.media-only .bubble { padding: 4px; }
.msg.media-only .media { margin: 0; }
.msg.media-only .meta {
  position: absolute; right: 10px; bottom: 10px; float: none; margin: 0; padding: 2px 8px; border-radius: 999px;
  background: rgb(0 0 0 / .45); color: #fff;
}
.msg .file { display: flex; gap: 10px; align-items: center; color: inherit; padding: 4px 6px; text-decoration: none; }
.msg .file .ico { width: 42px; height: 42px; border-radius: 12px; background: var(--grad); display: grid; place-items: center; color: #fff; flex: none; }
.msg.out .file .ico { background: rgb(255 255 255 / .2); }
.msg .file b { display: block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg .webpage {
  display: grid; gap: 2px; border-left: 3px solid var(--accent); padding: 6px 10px; margin-top: 6px; font-size: 13px;
  border-radius: 8px; background: var(--accent-soft); color: inherit; text-decoration: none; white-space: normal;
}
.msg .webpage:hover { text-decoration: none; filter: brightness(1.08); }
.msg .webpage .wp-site { color: var(--accent); font-weight: 600; font-size: 12.5px; }
.msg .webpage .wp-desc { color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.msg.out .webpage { border-left-color: #fff; background: rgb(255 255 255 / .14); color: #fff; text-decoration: none; }
.msg.out .webpage .wp-site, .msg.out .webpage .wp-desc { color: rgb(255 255 255 / .85); }

/* форматирование текста */
.bubble code { font: 13px/1.4 ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace; background: rgb(127 127 127 / .16); padding: 1px 5px; border-radius: 5px; }
.bubble pre { margin: 4px 0; padding: 8px 10px; border-radius: 10px; background: rgb(0 0 0 / .22); overflow-x: auto; white-space: pre; }
.bubble pre code { background: none; padding: 0; }
.bubble blockquote { margin: 4px 0; padding: 4px 10px; border-left: 3px solid var(--accent); border-radius: 6px; background: var(--accent-soft); }
.msg.out .bubble blockquote { border-left-color: #fff; background: rgb(255 255 255 / .14); }
.bubble .tag { color: var(--accent); }
.msg.out .bubble .tag { color: #fff; font-weight: 600; }
.spoiler {
  border-radius: 4px; cursor: pointer; color: transparent; transition: color .2s, background .2s;
  background: repeating-linear-gradient(135deg, rgb(127 127 127 / .45) 0 2px, rgb(127 127 127 / .25) 2px 4px);
}
.spoiler * { color: transparent !important; }
.spoiler.revealed { color: inherit; background: rgb(127 127 127 / .12); cursor: text; }
.spoiler.revealed * { color: inherit !important; }

/* фото/видео под спойлером */
.msg .media.spoiler-media { position: relative; overflow: hidden; border-radius: 13px; cursor: pointer; }
.spoiler-media:not(.revealed) img, .spoiler-media:not(.revealed) video { filter: blur(28px) saturate(1.2); transform: scale(1.12); }
.spoiler-cover {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: grid; place-content: center; justify-items: center; gap: 6px;
  color: #fff; font-weight: 600; font-size: 13px; background: rgb(0 0 0 / .25); text-shadow: 0 1px 4px rgb(0 0 0 / .5);
}
.spoiler-cover svg.i { width: 26px; height: 26px; }
.spoiler-media.revealed .spoiler-cover { display: none; }
.spoiler-media img, .spoiler-media video { transition: filter .35s ease, transform .35s ease; }

/* inline-кнопки под постом */
.kb { display: grid; gap: 4px; margin-top: 4px; }
.kb-row { display: flex; gap: 4px; }
.kb-btn {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; position: relative;
  padding: 9px 12px; border-radius: 12px; border: 1px solid var(--border); cursor: pointer;
  background: var(--bubble-glass); backdrop-filter: blur(10px);
  color: var(--text); font-weight: 600; font-size: 13.5px; text-decoration: none; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .2s var(--ease), transform .18s var(--spring), box-shadow .2s;
}
.kb-btn:hover { background: var(--surface-3); text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.msg.out a.kb-btn { color: var(--text); text-decoration: none; }   /* кнопки под своими постами — не как ссылки в тексте */
.kb-btn:active { transform: scale(.98); }
.kb-btn:disabled { opacity: .55; cursor: default; }
.kb-btn.loading { color: transparent; }
.kb-btn.loading::after {
  content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--muted); border-top-color: transparent; animation: spin .7s linear infinite;
}
.kb-ic { color: var(--muted); display: inline-grid; }
.kb-ic svg.i { width: 14px; height: 14px; }
.msg:not(.out) .kb-row:last-child .kb-btn:first-child { border-bottom-left-radius: 12px; }
/* цветные кнопки: синяя — главное действие, зелёная — согласие, красная — важное */
.kb-btn.st, .msg.out a.kb-btn.st { color: var(--kb-on); border-color: transparent; backdrop-filter: none; text-shadow: 0 1px 1px rgb(0 0 0 / .12); }
.kb-btn.st-primary { background: var(--kb-primary); box-shadow: 0 3px 10px color-mix(in srgb, var(--kb-primary) 30%, transparent); }
.kb-btn.st-success { background: var(--kb-success); box-shadow: 0 3px 10px color-mix(in srgb, var(--kb-success) 30%, transparent); }
.kb-btn.st-danger { background: var(--kb-danger); box-shadow: 0 3px 10px color-mix(in srgb, var(--kb-danger) 30%, transparent); }
.kb-btn.st-primary:hover { background: var(--kb-primary); filter: brightness(1.08); }
.kb-btn.st-success:hover { background: var(--kb-success); filter: brightness(1.08); }
.kb-btn.st-danger:hover { background: var(--kb-danger); filter: brightness(1.08); }
.kb-btn.st .kb-ic { color: var(--kb-on); color: color-mix(in srgb, var(--kb-on) 80%, transparent); }
.kb-btn.st.loading::after { border-color: var(--kb-on); border-top-color: transparent; }
.msg .misc { display: flex; gap: 8px; align-items: center; padding: 2px 4px; }

.msg .actions {
  position: absolute; top: -16px; right: 6px; display: flex; gap: 1px; padding: 3px; z-index: 4;
  background: var(--elev); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: var(--shadow-sm);
  opacity: 0; pointer-events: none; transform: translateY(6px) scale(.96); transition: opacity .18s var(--ease), transform .22s var(--spring);
}
.msg.out .actions { right: auto; left: 6px; }
.msg:hover .actions { opacity: 1; pointer-events: auto; transform: none; }
.msg .actions button { border: 0; background: none; cursor: pointer; width: 30px; height: 28px; border-radius: 8px; color: var(--muted); display: grid; place-items: center; transition: background .15s, color .15s, transform .15s var(--spring); }
.msg .actions button:active { transform: scale(.88); }
.msg .actions button:hover { color: var(--text); background: var(--surface-2); }
.msg .actions button.danger:hover { color: var(--danger); }
.msg .actions svg.i { width: 16px; height: 16px; }
.msg.flash .bubble { animation: flash 1.2s ease-out; }
.load-more { align-self: center; margin: 4px 0 8px; font-size: 13px; padding: 6px 14px; border-radius: 999px; }

.to-bottom {
  position: absolute; right: 22px; bottom: 14px; width: 46px; height: 46px; border-radius: 50%; z-index: 3;
  border: 1px solid var(--border-strong); background: var(--elev); color: var(--text); cursor: pointer;
  display: grid; place-items: center; box-shadow: var(--shadow); animation: pop .3s var(--spring); transition: transform .2s var(--spring), box-shadow .2s;
}
.to-bottom:hover { transform: translateY(-2px); box-shadow: var(--shadow), 0 0 0 4px var(--accent-soft); }
.to-bottom .badge { position: absolute; top: -6px; right: -4px; }

/* композер */
.composer-wrap { padding: 0 max(16px, calc((100% - 760px) / 2)) 16px; display: grid; gap: 6px; }
.reply-bar {
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border-radius: 14px;
  background: var(--surface-glass); backdrop-filter: blur(14px); border: 1px solid var(--border);
  animation: pop .25s var(--spring);
}
.reply-icon { color: var(--accent); }
.reply-body { flex: 1; min-width: 0; font-size: 13px; border-left: 2px solid var(--accent); padding-left: 10px; }
.reply-body b { color: var(--accent); }
.reply-body #reply-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.composer {
  display: flex; gap: 6px; align-items: flex-end; padding: 6px; border-radius: 22px;
  background: var(--surface-glass); backdrop-filter: blur(16px);
  border: 1px solid var(--border-strong); box-shadow: var(--shadow-sm), inset 0 1px 0 var(--edge);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.composer:focus-within { border-color: var(--ring); box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow), inset 0 1px 0 var(--edge); }
.composer > label.icon-btn { cursor: pointer; height: 42px; width: 42px; border-radius: 16px; }
.composer textarea {
  resize: none; max-height: 200px; border: 0; background: transparent; padding: 10px 4px; box-shadow: none; line-height: 1.4;
}
.composer textarea:focus { box-shadow: none; }
.composer .send {
  width: 42px; height: 42px; border-radius: 16px; border: 0; cursor: pointer; flex: none; color: #fff;
  background: var(--grad); display: grid; place-items: center; box-shadow: 0 6px 16px rgb(79 140 255 / .35), inset 0 1px 0 rgb(255 255 255 / .22);
  transition: transform .2s var(--spring), filter .15s, box-shadow .2s;
}
.composer .send svg.i { transition: transform .25s var(--spring); }
.composer .send:hover { filter: brightness(1.08); transform: scale(1.06); box-shadow: 0 8px 22px rgb(79 140 255 / .5), inset 0 1px 0 rgb(255 255 255 / .22); }
.composer .send:hover svg.i { transform: translateX(1px) rotate(-12deg); }
.composer .send:active { transform: scale(.92); transition-duration: .08s; }
.composer .send:disabled { opacity: .5; }
.composer .post-btn { height: 42px; width: 42px; border-radius: 16px; color: var(--accent); }
.composer .post-btn:hover { background: var(--accent-soft); color: var(--accent); }
.readonly-bar {
  padding: 13px; text-align: center; border-radius: 16px; color: var(--muted); display: flex; gap: 8px; justify-content: center; align-items: center;
  background: var(--surface-glass); border: 1px solid var(--border);
}
.readonly-bar svg.i { width: 16px; height: 16px; }
.readonly-bar { flex-wrap: wrap; }
.readonly-bar .btn { margin-left: 6px; }

/* кнопка мини-приложения бота слева в поле ввода */
.composer .bot-app {
  display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 14px 0 10px; border-radius: 16px; border: 0;
  background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: 13.5px; cursor: pointer; flex: none;
  max-width: 180px; transition: filter .15s;
}
.composer .bot-app[hidden] { display: none; }
.composer .bot-app:hover { filter: brightness(1.15); }
.composer .bot-app svg.i { width: 18px; height: 18px; flex: none; }
.composer .bot-app .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* карточка канала/бота по ссылке */
.lp-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.lp-actions .btn { flex: 1; justify-content: center; }
.verified { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); color: #fff; vertical-align: -2px; }
.verified svg.i { width: 11px; height: 11px; stroke-width: 3; }

/* ================= Мини-приложения ================= */
.webapp-overlay {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 55; display: grid; place-items: center; padding: 16px;
  background: rgb(3 7 18 / .6); backdrop-filter: blur(6px); animation: fade .15s ease-out;
}
.webapp {
  width: min(430px, 100%); height: min(780px, 100%); display: flex; flex-direction: column; overflow: hidden;
  background: var(--elev); border: 1px solid var(--border-strong); border-radius: 22px; box-shadow: var(--shadow); animation: modal-in .35s var(--spring);
}
.webapp-overlay.full { padding: 0; }
.webapp-overlay.full .webapp { width: 100%; height: 100%; border-radius: 0; border: 0; }
.webapp > header { display: flex; align-items: center; gap: 4px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--border); }
.webapp .wa-back:not([hidden]) + .wa-title { padding-left: 2px; }
.webapp .wa-back { margin-left: -6px; }
.webapp .wa-title { flex: 1; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-body { position: relative; flex: 1; min-height: 0; background: var(--elev); }
.wa-body iframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; background: var(--elev); }
.wa-loading {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 14px;
  padding: 24px; text-align: center; background: var(--elev);
}
.wa-loading[hidden] { display: none; }
.wa-loading svg.i { width: 14px; height: 14px; vertical-align: -2px; }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--accent-soft); border-top-color: var(--accent); animation: spin .7s linear infinite; }
.wa-buttons { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border); }
.wa-buttons[hidden] { display: none; }
.wa-btn {
  flex: 1; height: 46px; border: 0; border-radius: 13px; cursor: pointer; font-weight: 600; font-size: 15px;
  background: var(--accent); color: #fff; position: relative; transition: filter .15s;
}
.wa-btn[hidden] { display: none; }
.wa-btn.secondary { background: var(--surface-2); color: var(--accent); }
.wa-btn:hover { filter: brightness(1.08); }
.wa-btn:disabled { opacity: .55; cursor: default; filter: none; }
.wa-btn.loading { color: transparent !important; }
.wa-btn.loading::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border-radius: 50%; border: 2.5px solid #fff; border-top-color: transparent; animation: spin .7s linear infinite;
}
@media (max-width: 860px) {
  .webapp-overlay { padding: 0; }
  .webapp { width: 100%; height: 100%; border-radius: 0; border: 0; }
}

/* ================= Модальные окна ================= */
.modal {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgb(3 7 18 / .55); backdrop-filter: blur(8px);
  display: grid; place-items: center; padding: 16px; z-index: 50; animation: fade .2s ease-out;
}
.modal-card {
  background: var(--elev); border-radius: 24px; width: min(500px, 100%); max-height: min(88vh, 900px); overflow-y: auto;
  padding: 20px 22px 22px; border: 1px solid var(--border-strong); box-shadow: var(--shadow), inset 0 1px 0 var(--edge);
  animation: modal-in .38s var(--spring);
}
.modal.closing { animation: fade-out .17s ease-in forwards; pointer-events: none; }   /* уходящее окно не перехватывает клики */
.modal.closing .modal-card { animation: modal-out .17s ease-in forwards; }
.modal-card > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 10px; }
.modal-card h3 { font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.02em; }
.form { display: grid; gap: 14px; }
.form label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 500; }
.form .check {
  display: flex; gap: 12px; align-items: flex-start; color: var(--text); padding: 12px; border-radius: 14px;
  background: var(--surface-2); border: 1px solid var(--border); cursor: pointer; transition: border-color .2s, background .2s var(--ease);
}
.form .check:hover { border-color: var(--border-strong); background: var(--surface-3); }
.form .check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); flex: none; }
.form .check .small { display: block; margin-top: 3px; color: var(--muted); font-weight: 400; }
.form .row { display: flex; gap: 8px; flex-wrap: wrap; }
.form .row > * { flex: 1; }
.form .row.compact > * { flex: none; }
/* label-кнопка (выбор файла) не должна наследовать сетку обычных подписей формы */
.form label.btn { display: inline-flex; color: var(--text); font-size: 14px; font-weight: 600; }

/* аватар с карандашом: нажатие меняет фото */
.ava-edit { position: relative; display: block; cursor: pointer; border-radius: 50%; flex: none; }
.ava-edit::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%; background: rgb(0 0 0 / .35);
  opacity: 0; transition: opacity .15s;
}
.ava-edit:hover::after { opacity: 1; }
.ava-edit .pen {
  position: absolute; right: -2px; bottom: -2px; z-index: 1; width: 30px; height: 30px; border-radius: 50%;
  background: var(--grad); color: #fff; display: grid; place-items: center; border: 3px solid var(--elev);
  box-shadow: var(--shadow-sm); transition: transform .15s;
}
.ava-edit:hover .pen { transform: scale(1.08); }
.ava-edit .pen svg.i { width: 14px; height: 14px; }
.ava-edit.loading { pointer-events: none; }
.ava-edit.loading::after { opacity: 1; }
.ava-edit.loading::before {
  content: ""; position: absolute; z-index: 2; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px;
  border-radius: 50%; border: 3px solid #fff; border-top-color: transparent; animation: spin .7s linear infinite;
}
.hint { font-size: 12px; color: var(--muted); margin: -6px 0 0; }
.drop {
  border: 1.5px dashed var(--border-strong); border-radius: 16px; padding: 22px 16px; text-align: center; color: var(--muted);
  cursor: pointer; display: grid; gap: 6px; justify-items: center; transition: border-color .2s, background .2s var(--ease), transform .2s var(--spring);
}
.drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-soft); }
.drop.over { transform: scale(1.01); box-shadow: 0 0 0 4px var(--accent-soft); }
.drop .drop-ico { transition: transform .25s var(--spring); }
.drop:hover .drop-ico, .drop.over .drop-ico { transform: translateY(-2px) scale(1.06); }
.drop.has { border-style: solid; border-color: var(--ok); background: rgb(46 204 143 / .08); color: var(--text); }
.drop .drop-ico { width: 48px; height: 48px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.drop.has .drop-ico { background: rgb(46 204 143 / .15); color: var(--ok); }
.drop b { color: var(--text); }

.acc-head { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.acc-head .info { min-width: 0; }
.acc-head .name { font-weight: 700; font-size: 16px; }
.status-line { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; }
.status-line .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.tile {
  border: 1px solid var(--border); background: var(--surface-2); border-radius: 14px; padding: 12px; cursor: pointer;
  display: grid; gap: 8px; text-align: left; font-weight: 600; font-size: 13px; transition: background .2s var(--ease), transform .2s var(--spring), border-color .2s, box-shadow .2s;
}
.tile:hover { background: var(--surface-3); border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.tile:active { transform: scale(.98); transition-duration: .08s; }
.tile .ti { transition: transform .25s var(--spring); }
.tile:hover .ti { transform: scale(1.08); }
.tile .ti { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.tile .ti svg.i { width: 18px; height: 18px; }
.tile.danger .ti { background: rgb(242 85 90 / .14); color: var(--danger); }
.tile.danger { color: var(--danger); }
.menu-list { display: grid; gap: 6px; }
.menu-list button {
  text-align: left; border: 1px solid var(--border); background: var(--surface-2); padding: 11px 14px; border-radius: 12px; cursor: pointer;
  display: flex; gap: 10px; align-items: center; font-weight: 500;
}
.menu-list button { transition: background .2s var(--ease), transform .18s var(--ease), border-color .2s; }
.menu-list button:hover { background: var(--surface-3); border-color: var(--border-strong); transform: translateX(2px); }
.menu-list button.danger { color: var(--danger); }
.list-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; cursor: pointer; transition: background .18s var(--ease); }
.list-item:hover { background: var(--surface-2); }
.session-item { padding: 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); display: flex; gap: 12px; align-items: center; }
.session-item .si { width: 38px; height: 38px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none; }
.session-item > div { flex: 1; min-width: 0; }
.colors { display: flex; gap: 8px; flex-wrap: wrap; }
.colors button { width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer; background: var(--c); box-shadow: 0 0 0 2px var(--elev), 0 0 0 2px transparent; transition: box-shadow .15s; }
.colors button.on { box-shadow: 0 0 0 2px var(--elev), 0 0 0 4px var(--c); }
.section-title { font-weight: 700; margin: 18px 0 8px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.info-list { display: grid; gap: 2px; }
.info-row { display: flex; gap: 12px; align-items: flex-start; padding: 9px 4px; }
.info-row > [data-icon] { color: var(--muted); margin-top: 1px; }
.info-row .val { white-space: pre-wrap; min-width: 0; overflow-wrap: anywhere; }

/* окно «Поддержка» */
.rail-tool.support { color: var(--ok); }
.rail-tool.support:hover { color: var(--ok); background: rgb(46 204 143 / .14); }
.support-head { display: flex; gap: 14px; align-items: center; }
.support-head .brand-mark { width: 48px; height: 48px; border-radius: 15px; flex: none; }
.support-head .name { font-weight: 700; font-size: 16px; }
.support-head a { color: var(--accent); }
.section-title svg.i { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; color: var(--danger); fill: currentColor; }
.support-text { margin: 0 0 10px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.donate { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin-bottom: 12px; }
.donate-card {
  display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 14px; color: var(--text);
  background: var(--accent-soft); border: 1px solid var(--border); transition: border-color .15s, transform .1s;
}
.donate-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.donate-card:hover, .support-link:hover, a.btn:hover { text-decoration: none; }
.donate-card:active { transform: scale(.98); }
.donate-card .ti { width: 40px; height: 40px; border-radius: 12px; background: var(--grad); color: #fff; display: grid; place-items: center; flex: none; }
.donate-card b { display: block; }
.donate-card .small { display: block; color: var(--muted); margin-top: 2px; }
.support-links { display: grid; gap: 2px; }
.support-link { display: flex; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 12px; color: var(--text); }
.support-link { transition: background .18s var(--ease), transform .18s var(--ease); }
.support-link:hover { background: var(--surface-2); transform: translateX(2px); }
.support-link > span:nth-child(2) { flex: 1; min-width: 0; }
.support-link b { display: block; font-weight: 600; }
.support-link .small { display: block; }
.support-link > svg.i { width: 16px; height: 16px; color: var(--faint); }
.support-link .si {
  width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none;
  color: var(--c); background: var(--accent-soft); background: color-mix(in srgb, var(--c) 16%, transparent);
}

/* управление каналом: приглашение, админы, права */
.invite-row { display: flex; gap: 8px; flex-wrap: wrap; }
.invite-row input { flex: 1 1 200px; min-width: 0; font-size: 13px; }
.back-btn { margin-bottom: 12px; }
.admin-list { display: grid; gap: 2px; margin-bottom: 12px; }
.list-item .grow { flex: 1; min-width: 0; }
.list-item .grow b { overflow-wrap: anywhere; }
.list-item.static { cursor: default; }
.list-item.static:hover { background: none; }
.checks { display: grid; gap: 2px; padding: 4px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.form .checks label.opt {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px;
  color: var(--text); font-size: 14px; font-weight: 500; cursor: pointer;
}
.form .checks label.opt:hover { background: var(--surface-3); }
.checks .opt input { width: 18px; height: 18px; margin: 0; padding: 0; accent-color: var(--accent); flex: none; }
.form .checks label.opt.off { color: var(--faint); cursor: default; }
.form .checks label.opt.off:hover { background: none; }

/* ================= Редактор поста ================= */
.modal-card.wide { width: min(1080px, 100%); max-height: min(94vh, 980px); padding: 18px 20px 0; display: flex; flex-direction: column; overflow: hidden; }
.modal-card.wide > header { margin-bottom: 12px; }
.modal-card.wide #modal-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.post-ed { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 18px; }
.pe-main, .pe-side { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 2px 4px 16px 2px; }
.pe-main > *, .pe-side > * { flex-shrink: 0; }
.pe-box { border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface-2); transition: border-color .15s, box-shadow .15s; }
.pe-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pe-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px; border-bottom: 1px solid var(--border); }
.pe-tool { border: 0; background: none; color: var(--muted); width: 34px; height: 32px; border-radius: 9px; cursor: pointer; display: grid; place-items: center; }
.pe-tool { transition: background .15s, color .15s, transform .15s var(--spring); }
.pe-tool:hover { background: var(--surface-3); color: var(--text); }
.pe-tool:active { transform: scale(.9); }
.pe-tool svg.i { width: 18px; height: 18px; }
.pe-sep { width: 1px; height: 20px; background: var(--border-strong); margin: 0 4px; }
.pe-link { display: flex; gap: 6px; padding: 8px; border-bottom: 1px solid var(--border); }
.pe-link input { padding: 7px 10px; }
.pe-emoji { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.pe-emoji button { border: 0; background: none; font-size: 20px; width: 36px; height: 36px; border-radius: 9px; cursor: pointer; }
.pe-emoji button:hover { background: var(--surface-3); }
.pe-text {
  min-height: 190px; max-height: 46vh; overflow-y: auto; padding: 12px 14px; outline: none; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.pe-text.is-empty::before { content: attr(data-placeholder); color: var(--faint); pointer-events: none; position: absolute; white-space: pre-wrap; }
.pe-text code { font: 13px/1.4 ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace; background: rgb(127 127 127 / .18); padding: 1px 5px; border-radius: 5px; color: var(--accent); }
.pe-text blockquote { margin: 4px 0; padding: 4px 10px; border-left: 3px solid var(--accent); border-radius: 6px; background: var(--accent-soft); }
.pe-text .spoiler, .pe-text .spoiler * { color: inherit !important; cursor: text; }
.pe-text .spoiler { background: repeating-linear-gradient(135deg, rgb(127 127 127 / .28) 0 2px, rgb(127 127 127 / .14) 2px 4px); border-radius: 4px; }
.pe-text a { text-decoration: underline; }
.pe-count { text-align: right; padding: 0 12px 8px; color: var(--faint); font-variant-numeric: tabular-nums; }
.pe-count.over { color: var(--danger); font-weight: 600; }
.pe-sec { display: grid; gap: 10px; padding: 14px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface-2); background: color-mix(in srgb, var(--surface-2) 50%, transparent); }
.pe-sec-head { display: flex; align-items: baseline; gap: 8px; }
.pe-attach { justify-self: start; cursor: pointer; }
.pe-file { display: flex; align-items: center; gap: 10px; }
.pe-file img, .pe-file .ico { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; flex: none; }
.pe-file .ico { display: grid; place-items: center; background: var(--grad); color: #fff; }
.pe-file .grow { flex: 1; min-width: 0; display: grid; }
.pe-file .grow b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-rows { display: grid; gap: 6px; }
.pe-rows:empty { display: none; }
.pe-row { display: flex; gap: 6px; }
.pe-row .kb-btn { min-height: 38px; }
.pe-row .kb-btn.sel { outline: 2px solid var(--accent); outline-offset: 2px; }
.pe-add-btn { flex: none; width: 38px; border-radius: 12px; border: 1px dashed var(--border-strong); background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.pe-add-btn:hover { color: var(--accent); border-color: var(--accent); }
.pe-add-btn svg.i { width: 16px; height: 16px; }
.pe-add-row { justify-self: start; }
.pe-btn-form { padding: 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border-strong); gap: 12px; animation: pop .15s ease-out; }
.pe-btn-form .segmented { justify-self: start; }
.pe-btn-form .seg { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; cursor: pointer; padding: 6px 12px; border-radius: 9px; color: var(--muted); font-weight: 600; font-size: 13px; }
.pe-btn-form .seg svg.i { width: 15px; height: 15px; }
.pe-styles { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pe-styles > span { margin-right: 4px; }
.pe-style { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--surface-2); border-radius: 999px; padding: 5px 11px 5px 6px; cursor: pointer; font-size: 13px; font-weight: 500; }
.pe-style i { width: 16px; height: 16px; border-radius: 50%; background: var(--surface-3); border: 1px solid var(--border-strong); }
.pe-style.st-primary i { background: var(--kb-primary); border-color: transparent; }
.pe-style.st-success i { background: var(--kb-success); border-color: transparent; }
.pe-style.st-danger i { background: var(--kb-danger); border-color: transparent; }
.pe-style.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.pe-btn-actions { display: flex; align-items: center; gap: 6px; }
.pe-btn-actions .grow { flex: 1; }
.pe-note { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); font-size: 13px; line-height: 1.5; }
.pe-note > svg.i { color: var(--accent); margin-top: 1px; }
.pe-note > span { flex: 1; }
.pe-note.ok { background: rgb(46 204 143 / .12); }
.pe-note.ok > svg.i { color: var(--ok); }
.pe-note.warn { background: rgb(245 181 68 / .13); }
.pe-note.warn > svg.i { color: var(--warn); }
.pe-note .btn { flex: none; }
.pe-note code { font-size: 12.5px; background: rgb(127 127 127 / .18); padding: 1px 5px; border-radius: 5px; }
.pe-bot { display: grid; gap: 8px; }
.pe-token { display: flex; gap: 6px; }
.pe-token input { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; padding: 8px 10px; }
.pe-opts input[type=datetime-local] { margin: 4px 6px 6px; width: auto; }
.pe-opts label.opt[hidden] { display: none; }
.pe-opts label.opt:has(input:disabled) { color: var(--faint); cursor: default; }
.pe-side-label { text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.pe-preview {
  display: flex; flex-direction: column; padding: 18px 14px; border-radius: var(--r-md); border: 1px solid var(--border); min-height: 160px;
  background: radial-gradient(circle at 20% 10%, var(--wall-a), transparent 55%), radial-gradient(circle at 90% 90%, var(--wall-b), transparent 50%), var(--bg);
}
.pe-preview .msg { max-width: 100%; width: 100%; margin: 0; }
.pe-preview .msg .actions { display: none; }
.pe-preview .kb-btn { pointer-events: none; }
.pe-hints { border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface-2); padding: 0 14px; font-size: 13px; line-height: 1.5; }
.pe-hints summary { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 12px 0; font-weight: 600; list-style: none; }
.pe-hints summary::-webkit-details-marker { display: none; }
.pe-hints summary svg.i { width: 18px; height: 18px; color: var(--accent); }
.pe-hints[open] summary { border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.pe-hints h4 { margin: 12px 0 4px; font-size: 13px; }
.pe-hints ul { margin: 0 0 8px; padding-left: 18px; color: var(--muted); }
.pe-hints li { margin: 3px 0; }
kbd { font: 11.5px ui-monospace, Menlo, Consolas, monospace; padding: 1px 5px; border-radius: 5px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); white-space: nowrap; }
.pe-foot { display: flex; align-items: center; gap: 12px; padding: 12px 0 16px; border-top: 1px solid var(--border); }
.pe-via { flex: 1; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-send { min-width: 160px; position: relative; }
.pe-send.loading { color: transparent; }
.pe-send.loading::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff; border-top-color: transparent; animation: spin .7s linear infinite; }
@media (max-width: 860px) {
  .modal:has(.modal-card.wide) { padding: 0; }
  .modal-card.wide { width: 100%; height: 100%; max-height: none; border-radius: 0; border: 0; padding: 12px 12px 0; }
  .post-ed { display: block; overflow-y: auto; }
  .pe-main, .pe-side { overflow: visible; padding-bottom: 12px; }
  .pe-text { max-height: none; min-height: 150px; }
  .pe-via { display: none; }
  .pe-send { flex: 1; }
}

/* ================= Обновление ================= */
/* значок справа внизу; пока он виден, справа от поля ввода оставляем ему место */
.update-badge {
  position: fixed; right: 16px; bottom: 22px; z-index: 20; height: 42px; min-width: 42px; padding: 0 10px;
  display: flex; align-items: center; border: 0; border-radius: 999px; cursor: pointer; color: #fff;
  background: var(--grad); box-shadow: 0 6px 18px rgb(79 140 255 / .4); font: inherit; font-weight: 600; font-size: 13.5px;
  animation: pop .4s var(--spring); transition: transform .2s var(--spring), box-shadow .2s, filter .15s;
}
.update-badge:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgb(79 140 255 / .5); }
.update-badge[hidden] { display: none; }
.update-badge::after {
  content: ""; position: absolute; top: 1px; right: 1px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--warn); box-shadow: 0 0 0 2px var(--bg); animation: upd-pulse 2s ease-in-out infinite;
}
.update-badge svg.i { width: 22px; height: 22px; flex: none; }
.update-badge .t { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .3s ease, margin .3s ease; }
.update-badge:hover .t, .update-badge.open .t { max-width: 180px; margin: 0 4px 0 7px; }
.update-badge:hover { filter: brightness(1.08); }
.app.has-update .composer-wrap { padding-right: max(70px, calc((100% - 760px) / 2)); }
.upd-head { display: flex; gap: 14px; align-items: center; }
.upd-ico { width: 48px; height: 48px; border-radius: 15px; flex: none; display: grid; place-items: center; color: #fff; background: var(--grad); }
.upd-ico svg.i { width: 26px; height: 26px; }
.upd-head .name { font-weight: 700; font-size: 16px; }
.upd-vers { display: grid; gap: 6px; margin-top: 14px; }
.upd-ver { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; background: var(--surface-2); font-size: 13.5px; }
.upd-ver > span { flex: 1; }
.upd-ver svg.i { width: 16px; height: 16px; color: var(--muted); }
.upd-ver .new { color: var(--accent); }
.upd-notes { max-height: 240px; overflow-y: auto; padding: 4px 14px; border-radius: 12px; border: 1px solid var(--border); font-size: 13.5px; line-height: 1.5; }
.upd-notes p { margin: 8px 0; }
.upd-notes ul { margin: 6px 0; padding-left: 18px; }
.upd-notes li { margin: 4px 0; }
.upd-notes code, .upd-cmd code, .support-text code { font: 12.5px/1.4 ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace; background: rgb(127 127 127 / .16); padding: 1px 5px; border-radius: 5px; }
.upd-cmd { display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; border-radius: 12px; background: var(--surface-2); margin-bottom: 8px; }
.upd-cmd code { flex: 1; min-width: 0; background: none; padding: 0; overflow-wrap: anywhere; user-select: all; }
.upd-cmd .icon-btn svg.i { width: 16px; height: 16px; }
.upd-hint { margin: 6px 0 0; text-align: center; }
.upd-foot { display: flex; justify-content: center; margin-top: 16px; }
.upd-line { margin-top: 2px; }
.upd-line svg.i { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; }
@keyframes upd-pulse { 50% { transform: scale(.7); opacity: .6; } }

/* ================= Тосты ================= */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 60; max-width: min(92vw, 520px);
  background: var(--elev); border: 1px solid var(--border-strong); padding: 11px 16px 11px 12px; border-radius: 14px;
  box-shadow: var(--shadow), inset 0 1px 0 var(--edge); display: flex; gap: 10px; align-items: center; animation: toast-in .4s var(--spring);
}
.toast.out { animation: toast-out .22s ease-in forwards; }
.toast .ti { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: rgb(46 204 143 / .15); color: var(--ok); flex: none; }
.toast.err .ti { background: rgb(242 85 90 / .15); color: var(--danger); }
.toast .ti svg.i { width: 16px; height: 16px; }

/* ================= Анимации ================= */
@keyframes fade { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(.96); } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes modal-in { from { opacity: 0; transform: translateY(22px) scale(.95); } }
@keyframes modal-out { to { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes msg-in { from { opacity: 0; transform: translateY(12px) scale(.94); } }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 18px) scale(.95); } }
@keyframes toast-out { to { opacity: 0; transform: translate(-50%, 12px) scale(.97); } }
@keyframes tip-in { from { opacity: 0; transform: translate(-6px, -50%); } }
@keyframes float { 50% { transform: translateY(-7px); } }
@keyframes breathe { 50% { transform: scale(1.18); opacity: .7; } }
@keyframes blink { 50% { opacity: .35; } }
@keyframes drift { to { transform: translate(10vmax, 8vmax) scale(1.18); } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes flash { 0%, 40% { box-shadow: 0 0 0 3px var(--accent); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ================= Телефон ================= */
@media (max-width: 860px) {
  .app { grid-template-columns: 64px minmax(0, 1fr); }
  .rail { gap: 8px; padding: 10px 0; }
  .rail-item, .rail-item .avatar { width: 44px; height: 44px; }
  .rail-item::before { display: none; }
  .brand-mark { width: 36px; height: 36px; }
  .sidebar { border-radius: 18px 0 0 0; }
  .chat { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; margin: 0; border: 0; }
  .chat.empty { display: none; }
  .back { display: inline-grid; }
  .chat-head { padding: 8px 10px; }
  .messages { padding: 12px 10px 8px; }
  .composer-wrap { padding: 0 8px 10px; }
  .app.has-update .composer-wrap { padding-right: 62px; }
  .update-badge { right: 10px; bottom: 16px; z-index: 11; }
  .msg { max-width: 88%; }
  .dialog .d-row .chip { display: none; }  /* на узком экране аккаунт видно по цветной полосе слева */
  .msg .actions { opacity: 1; pointer-events: auto; transform: none; display: none; }
  .msg.show-actions .actions { display: flex; }
  .tip { display: none; }
}

/* ================= Встроенные боты (бот постинга, бот рекламы) ================= */
.rail-tool.bot-tool .dot {
  position: absolute; right: 5px; bottom: 5px; width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--bg); display: none;
}
.rail-tool.bot-tool .dot.online, .rail-tool.bot-tool .dot.error, .rail-tool.bot-tool .dot.connecting { display: block; }
.app.bot-mode .sidebar, .app.bot-mode .chat { display: none; }
.bot-view {
  grid-column: 2 / -1; display: flex; flex-direction: column; min-width: 0; min-height: 0; margin-top: 8px;
  background: var(--surface); border-radius: 22px 0 0 0; border: 1px solid var(--border); border-right: 0; border-bottom: 0;
  overflow: hidden; box-shadow: inset 0 1px 0 var(--edge);
}
.bot-view[hidden] { display: none; }
.bot-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 18px; border-bottom: 1px solid var(--border); }
.bot-head .bot-ico { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: var(--grad); flex: none; }
.bot-meta { flex: 1; min-width: 0; }
.bot-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bot-sub { font-size: 12.5px; }
.icon-btn.on { color: var(--accent); background: var(--accent-soft); }
.bot-body { flex: 1; min-height: 0; position: relative; overflow: auto; }
.bot-frame { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; background: var(--bg); }
.bot-setup { min-height: 100%; display: grid; place-items: center; padding: 28px 16px; }
.bot-card { width: min(520px, 100%); }
.bot-card h2 { margin: 14px 0 6px; }
.bot-card > p { margin: 0 0 20px; line-height: 1.5; }
.bot-card { animation: rise .5s var(--ease); }
.bot-hero { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; color: #fff; background: var(--grad); box-shadow: 0 12px 32px rgb(79 140 255 / .4), inset 0 1px 0 rgb(255 255 255 / .25); animation: float 5s ease-in-out infinite; }
.bot-hero svg.i { width: 32px; height: 32px; }
.bot-card .checks .opt .small { margin-left: auto; }
.bot-state { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 28px 16px; text-align: center; animation: rise .4s var(--ease); }
.bot-state h3 { margin: 6px 0 0; }
.bot-state p { margin: 0; max-width: 460px; line-height: 1.5; }
.bot-state-ico { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.bot-state-ico.err { color: var(--danger); }
.bot-state-ico svg.i { width: 28px; height: 28px; }
.bot-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.bot-error, .bot-log {
  max-width: min(720px, 100%); white-space: pre-wrap; overflow-wrap: anywhere; text-align: left; margin: 0;
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 12px;
}
.bot-log { width: min(720px, 100%); max-height: 320px; overflow: auto; }
@media (max-width: 860px) {
  .bot-view { border-radius: 18px 0 0 0; }
}