:root {
  --bg-page: #0e1621;
  --bg: #0e1621;
  --bg-2: #17212b;
  --bg-3: #232e3c;
  --bg-hover: #2b5278;
  --accent: #5288c1;
  --accent-2: #6ab2f2;
  --text: #f5f5f5;
  --text-dim: #708499;
  --bubble-me: #2b5278;
  --bubble-them: #182533;
  --danger: #e53935;
  --ok: #4caf50;
  --badge: #4dbcfa;
  --warning: #f0a020;
  --btn-accent: #16a085;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: #0a121b; color: var(--text); overflow: hidden; -webkit-tap-highlight-color: transparent; }
input, button, textarea { font-family: inherit; font-size: inherit; }
button { cursor: pointer; }

/* ---- Page wrapper (TG-Web style: centered 2/3 on desktop) ---- */
.page { height: 100vh; height: 100dvh; height: var(--app-h, 100dvh); display: flex; justify-content: center; align-items: stretch; background: #0a121b; }
.shell { display: flex; width: 100%; max-width: 1280px; height: 100%; background: var(--bg-page); box-shadow: 0 0 60px rgba(0,0,0,0.6); }

/* ---- Login ---- */
.login-screen { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--bg); }
.login-card { width: 340px; max-width: 92vw; background: var(--bg-2); padding: 32px 28px; border-radius: 12px; }
.login-card h1 { font-size: 22px; margin-bottom: 4px; text-align: center; }
.login-card .sub { color: var(--text-dim); font-size: 13px; text-align: center; margin-bottom: 22px; }
.login-card label { display: block; color: var(--text-dim); font-size: 12px; margin-bottom: 6px; }
.login-card input { width: 100%; padding: 11px 14px; border-radius: 8px; border: 1px solid var(--bg-3); background: var(--bg); color: var(--text); margin-bottom: 14px; outline: none; }
.login-card input:focus { border-color: var(--accent); }
.login-card button { width: 100%; padding: 12px; border: 0; border-radius: 8px; background: var(--accent); color: white; font-weight: 600; }
.login-card button:hover { background: var(--accent-2); }
.login-card .err { color: var(--danger); font-size: 13px; margin-bottom: 10px; min-height: 18px; }

/* ---- Layout ---- */
.sidebar-wrap { width: 340px; min-width: 340px; display: flex; flex-direction: row; }
.sidebar { flex: 1; min-width: 0; background: var(--bg-2); border-right: 1px solid var(--bg-3); display: flex; flex-direction: column; }

.sidebar-header { padding: 14px 16px; border-bottom: 1px solid var(--bg-3); display: flex; align-items: center; gap: 12px; }
.notify-banner { margin: 8px 12px; padding: 10px 12px; background: linear-gradient(135deg, #2a4a6b, #1e3450); border-radius: 10px; display: flex; align-items: center; gap: 10px; }
.notify-banner .nb-icon { font-size: 22px; }
.notify-banner .nb-text { flex: 1; min-width: 0; }
.notify-banner .nb-title { font-size: 13px; font-weight: 600; }
.notify-banner .nb-sub { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.notify-banner .nb-close { background: transparent; border: 0; color: var(--text-dim); cursor: pointer; font-size: 14px; padding: 4px 6px; }
.net-banner{padding:4px 12px;font-size:13px;text-align:center;color:#fff}
.net-banner.net-off{background:#b00020}
.net-banner.net-rec{background:#8a6d00}
.sidebar-header .me { flex: 1; min-width: 0; }
.sidebar-header .me .name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-header .me .role { color: var(--text-dim); font-size: 12px; }
.icon-btn { background: transparent; border: 0; color: var(--text-dim); padding: 8px; border-radius: 50%; font-size: 18px; }
.icon-btn:hover { background: var(--bg-3); color: var(--text); }

.search-box { padding: 8px 12px; border-bottom: 1px solid var(--bg-3); }
.search-box input { width: 100%; padding: 9px 14px 9px 36px; border-radius: 20px; border: 0; background: var(--bg-3); color: var(--text); outline: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23708499' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>"); background-repeat: no-repeat; background-position: 12px center; font-size: 14px; }
.search-box input::placeholder { color: var(--text-dim); }

.avatar { width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 16px; flex-shrink: 0; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.avatar img.av-clickable { cursor: zoom-in; }
.avatar.sm { width: 34px; height: 34px; font-size: 13px; }
.avatar.lg { width: 72px; height: 72px; font-size: 26px; }
.avatar.tiny { width: 28px; height: 28px; font-size: 11px; }
.avatar.bot::after { content: "🤖"; position: absolute; }

.tabs { display: flex; border-bottom: 1px solid var(--bg-3); }
.tabs button { position: relative; flex: 1; background: transparent; border: 0; color: var(--text-dim); padding: 10px 6px; font-size: 12.5px; border-bottom: 2px solid transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px; }
.tabs button:hover { color: var(--text); }
.tabs button.active { color: var(--accent-2); border-color: var(--accent); }
.tab-icon { font-size: 16px; line-height: 1; }
.tab-label { white-space: nowrap; }
.tab-badge { position: absolute; top: 3px; right: 6px; background: var(--badge); color: white; font-size: 10px; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; line-height: 1; }
/* Section divider inside the sidebar list (e.g. "Начать чат" above the catalog) */
.list-divider { padding: 12px 14px 5px; color: var(--text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; }

.list { flex: 1; min-width: 0; overflow-y: auto; }
.list-item { padding: 10px 14px; display: flex; align-items: center; gap: 12px; cursor: pointer; border-bottom: 1px solid transparent; }
.list-item:hover { background: var(--bg-3); }
.list-item.active { background: var(--bg-hover); }
.list-item .meta { flex: 1; min-width: 0; }
.list-item .meta .row1 { display: flex; align-items: baseline; gap: 6px; }
.list-item .meta .title { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.list-item .meta .preview { color: var(--text-dim); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.list-item .stamp { color: var(--text-dim); font-size: 11px; flex-shrink: 0; }
.read-tick { color: var(--text-dim); margin-right: 3px; display: inline-block; line-height: 0; vertical-align: middle; }
.read-tick.read { color: var(--accent-2); }
.list-item .right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.badge { background: var(--badge); color: white; font-size: 11px; min-width: 20px; height: 20px; border-radius: 10px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; }
.badge.muted { background: var(--text-dim); }
.badge.dot { min-width: 12px; width: 12px; height: 12px; padding: 0; border-radius: 50%; }
.list-item.active .badge { background: white; color: var(--accent); }

.empty-list { padding: 24px; color: var(--text-dim); text-align: center; font-size: 13px; }

/* ---- Chat pane ---- */
.chat { flex: 1; display: flex; flex-direction: column; background: var(--bg); min-width: 0; }
.chat-header { padding: 12px 16px; background: var(--bg-2); border-bottom: 1px solid var(--bg-3); display: flex; align-items: center; gap: 12px; }
.chat-header .chat-back { font-size: 28px; line-height: 1; color: var(--accent-2); padding: 6px 12px; margin: -2px 2px -2px -6px; font-weight: 700; }
.chat-header .chat-back:hover { background: var(--bg-3); color: var(--accent); }
.chat-header .title { font-weight: 600; }
.chat-header .sub { color: var(--text-dim); font-size: 12px; }
.chat-header .sub.online { color: var(--accent-2); }
.chat-header .sub.typing { color: var(--accent-2); font-style: italic; }
/* online presence dot (green) overlaid on the bottom-right of an avatar */
.hdr-av-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.online-dot { width: 11px; height: 11px; border-radius: 50%; background: #4cd964; border: 2px solid var(--bg-2); position: absolute; bottom: 0; right: 0; box-sizing: border-box; }
.list-item .av-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.chat-messages { flex: 1; overflow-y: auto; padding: 16px 24px; display: flex; flex-direction: column; gap: 2px; }
.empty-chat { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 14px; padding: 20px; }

.msg-row { display: flex; gap: 8px; align-items: flex-end; margin-top: 2px; }
.msg-row.me { justify-content: flex-end; }
.msg-row.first-of-group { margin-top: 12px; }
.msg-row .av-slot { width: 32px; flex-shrink: 0; }
/* ---- Multi-select (Telegram-style bulk forward) ---- */
.msg-row.selectable { position: relative; padding-left: 34px; cursor: pointer; transition: background .12s; border-radius: 8px; }
.msg-row.selectable.me { padding-left: 0; padding-right: 34px; }
.msg-row.selected { background: rgba(82,136,193,.18); }
.sel-check { position: absolute; left: 8px; bottom: 8px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--text-dim); display: flex; align-items: center; justify-content: center; font-size: 13px; color: #fff; background: transparent; z-index: 3; pointer-events: none; }
.msg-row.me .sel-check { left: auto; right: 8px; }
.sel-check.on { background: var(--accent); border-color: var(--accent); }
.sel-overlay { position: absolute; inset: 0; z-index: 2; cursor: pointer; }
.selection-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--bg); border-top: 1px solid var(--bg-3); }
.selection-bar .sel-count { flex: 1; color: var(--text); font-weight: 600; }
.selection-bar .sel-fwd-btn { background: var(--accent); border: 0; border-radius: 18px; padding: 9px 18px; color: #fff; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; font-size: 14px; }
.selection-bar .sel-fwd-btn:hover { background: var(--accent-2); }
.selection-bar .sel-fwd-btn:disabled { background: var(--bg-3); color: var(--text-dim); cursor: not-allowed; }
.selection-bar .sel-del-btn { background: transparent; border: 1px solid #7a2222; border-radius: 18px; padding: 9px 18px; color: #e26d6d; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; font-size: 14px; }
.selection-bar .sel-del-btn:hover { background: #7a2222; color: #fff; }
.selection-bar .sel-del-btn:disabled { border-color: var(--bg-3); color: var(--text-dim); cursor: not-allowed; background: transparent; }
/* PWA update banner (плашка «Приложение обновлено — Обновить») */
.update-banner { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 9998; display: flex; align-items: center; gap: 10px; padding: 10px 14px; max-width: calc(100vw - 24px); background: var(--bg-2, var(--bg)); color: var(--text); border: 1px solid var(--accent); border-radius: 999px; box-shadow: 0 4px 20px rgba(0,0,0,.35); font-size: 14px; animation: update-slide-up .3s ease; }
.update-banner.hidden { display: none; }
.update-banner .ub-icon { font-size: 18px; }
.update-banner .ub-text { font-weight: 600; white-space: nowrap; }
.update-banner .ub-apply { border: 0; background: var(--accent); color: #fff; font-weight: 600; font-size: 13px; padding: 6px 14px; border-radius: 999px; cursor: pointer; }
.update-banner .ub-apply:hover { background: var(--accent-2); }
.update-banner .ub-close { border: 0; background: transparent; color: var(--text-dim); cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 4px; }
@keyframes update-slide-up { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
/* forward modal — multi-recipient picker */
.fwd-row { display: flex; align-items: center; gap: 10px; padding: 8px; cursor: pointer; border-bottom: 1px solid var(--bg-3); transition: background .12s; }
.fwd-row:hover { background: var(--bg-3); }
.fwd-row.picked { background: rgba(82,136,193,.18); }
.fwd-check { width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--text-dim); display: flex; align-items: center; justify-content: center; font-size: 13px; color: #fff; }
.fwd-check.on { background: var(--accent); border-color: var(--accent); }
.modal-actions .btn-primary:disabled { background: var(--bg-3); color: var(--text-dim); cursor: not-allowed; }
.bubble { padding: 7px 12px 6px; max-width: 65%; border-radius: 14px; word-wrap: break-word; position: relative; cursor: default; }
.bubble .sender { font-size: 12px; color: var(--accent-2); margin-bottom: 2px; font-weight: 600; }
.bubble.me { background: var(--bubble-me); border-bottom-right-radius: 4px; }
.bubble.them { background: var(--bubble-them); border-bottom-left-radius: 4px; }
.bubble.tail-me { border-bottom-right-radius: 14px; }
.bubble.tail-them { border-bottom-left-radius: 14px; }
.bubble .time { font-size: 10px; color: var(--text-dim); margin-top: 2px; text-align: right; user-select: none; }
.bubble .time .read-mark { margin-left: 4px; font-size: 11px; letter-spacing: -2px; }
.bubble.me .time .read-mark.read { color: #4fc3f7; }
.bubble.me .time .read-mark.unread { color: rgba(255,255,255,0.55); }
.msg-edited { color: var(--text-dim); font-size: 11px; margin-left: 4px; }
.bubble .text { white-space: pre-wrap; }

/* context menu */
.ctx-menu { position: fixed; background: var(--bg-2); border-radius: 10px; padding: 6px; box-shadow: 0 12px 32px rgba(0,0,0,0.7); z-index: 1000; min-width: 220px; border: 1px solid var(--bg-3); }
.ctx-menu .ctx-header { padding: 6px 12px 8px; border-bottom: 1px solid var(--bg-3); margin-bottom: 4px; color: var(--text-dim); font-size: 12px; font-weight: 600; }
.ctx-menu button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 12px; background: transparent; border: 0; color: var(--text); border-radius: 6px; font-size: 14px; cursor: pointer; }
.ctx-menu button .ic { width: 18px; display: inline-block; text-align: center; }
.ctx-menu button .ctx-desc { color: var(--text-dim); font-size: 12px; margin-left: 6px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctx-menu button:hover { background: var(--bg-3); }
.ctx-menu button.danger { color: var(--danger); }
/* "Who reacted" popup: reuses .ctx-menu shell, rows are plain (non-button) names */
.react-users-menu { min-width: 180px; max-height: 280px; overflow-y: auto; }
.react-users-menu .react-user { padding: 7px 12px; font-size: 14px; color: var(--text); border-radius: 6px; }
.react-users-menu .react-user .ru-you { color: var(--text-dim); font-size: 12px; }
.ctx-react-row { display: flex; gap: 4px; padding: 4px 6px 6px; border-bottom: 1px solid var(--bg-3); margin-bottom: 4px; }
.ctx-menu .ctx-react-btn { flex: 1; width: auto; justify-content: center; padding: 6px 0; font-size: 18px; background: transparent; border: 0; border-radius: 6px; cursor: pointer; }
.ctx-menu .ctx-react-btn:hover { background: var(--bg-3); transform: scale(1.15); }
/* Emoji picker panel (😊) — reuses .ctx-menu shell, overrides button rules for the grid */
.emoji-picker { padding: 8px; }
.emoji-picker .emoji-section-label { color: var(--text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; padding: 8px 4px 4px; }
.emoji-picker .emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.emoji-picker .emoji-cell { width: 100%; aspect-ratio: 1; min-width: 0; padding: 0; gap: 0; background: transparent; border: 0; border-radius: 6px; font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.emoji-picker .emoji-cell:hover { background: var(--bg-3); transform: scale(1.15); }
.reactions-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.msg-row.me .reactions-row { justify-content: flex-end; }
.reaction-chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 11px; border: 1px solid var(--bg-3); background: var(--bg-2); color: var(--text); font-size: 12px; cursor: pointer; }
.reaction-chip:hover { border-color: var(--accent-2); }
.reaction-chip.mine { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.reaction-chip .re-emoji { font-size: 13px; }
.reaction-chip .re-count { font-weight: 600; }
.reply-quote { border-left: 3px solid var(--accent-2); padding: 4px 8px; margin-bottom: 6px; background: rgba(255,255,255,0.05); border-radius: 4px; font-size: 12px; cursor: pointer; max-width: 100%; }
.reply-quote .rq-name { color: var(--accent-2); font-weight: 600; }
.reply-quote .rq-text { color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bubble.me .reply-quote { background: rgba(255,255,255,0.15); border-left-color: white; }
.bubble.me .reply-quote .rq-name { color: white; }
.bubble.me .reply-quote .rq-text { color: rgba(255,255,255,0.85); }
.fwd-label { font-size: 12px; font-style: italic; color: var(--accent-2); margin-bottom: 4px; }
.bubble.me .fwd-label { color: rgba(255,255,255,0.9); }
.reply-preview-bar { display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: var(--bg-2); border-top: 1px solid var(--bg-3); }
.reply-preview-bar .rpb-icon { color: var(--accent-2); font-size: 18px; }
.reply-preview-bar .rpb-body { flex: 1; min-width: 0; border-left: 3px solid var(--accent-2); padding-left: 8px; }
.reply-preview-bar .rpb-name { color: var(--accent-2); font-weight: 600; font-size: 12px; }
.reply-preview-bar .rpb-text { color: var(--text-dim); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reply-preview-bar .rpb-cancel { background: transparent; border: 0; color: var(--text-dim); font-size: 20px; cursor: pointer; padding: 4px 8px; }
.reply-flash { animation: replyFlash 1s; }
@keyframes replyFlash { 0%,100% { background: inherit; } 50% { background: rgba(120,180,255,0.18); } }
.chat-search-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bg-2); border-bottom: 1px solid var(--bg-3); }
.chat-search-bar input { flex: 1; background: var(--bg); border: 0; border-radius: 8px; padding: 8px 12px; color: var(--text); outline: none; }
.chat-search-bar .search-count { color: var(--text-dim); font-size: 12px; min-width: 24px; text-align: right; }
.pinned-bar { display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: var(--bg-2); border-bottom: 1px solid var(--bg-3); cursor: pointer; }
.pinned-bar .pb-icon { font-size: 16px; }
.pinned-bar .pb-body { flex: 1; min-width: 0; border-left: 3px solid var(--accent-2); padding-left: 8px; }
.pinned-bar .pb-label { color: var(--accent-2); font-weight: 600; font-size: 12px; }
.pinned-bar .pb-text { color: var(--text-dim); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pinned-bar .pb-unpin { background: transparent; border: 0; color: var(--text-dim); font-size: 18px; cursor: pointer; padding: 4px 8px; }
.chat-search-empty { padding: 16px; color: var(--text-dim); text-align: center; background: var(--bg); }
.chat-search-results { max-height: 40vh; overflow-y: auto; background: var(--bg); border-bottom: 1px solid var(--bg-3); }
.search-result { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--bg-3); }
.search-result:hover { background: var(--bg-2); }
.search-result .sr-head { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; }
.search-result .sr-from { color: var(--accent-2); font-weight: 600; }
.search-result .sr-time { color: var(--text-dim); }
.search-result .sr-text { color: var(--text); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.composer-wrap { display: flex; flex-direction: column; background: var(--bg); position: relative; }
/* @mention highlight inside message bubbles */
.bubble .text .mention { color: var(--accent-2); font-weight: 600; }
.bubble .text .mention-me { background: rgba(101,170,221,0.22); border-radius: 4px; padding: 0 2px; }
/* clickable links / emails inside message bubbles */
.bubble .text a { color: var(--accent-2); text-decoration: underline; word-break: break-word; }
.bubble.mine .text a { color: inherit; text-decoration: underline; }
/* @mention autocomplete popup above the composer */
.mention-box { position: absolute; left: 16px; right: 16px; bottom: 100%; margin-bottom: 4px; background: var(--bg-2); border: 1px solid var(--bg-3); border-radius: 10px; box-shadow: 0 4px 18px rgba(0,0,0,0.4); overflow: hidden; z-index: 30; max-height: 260px; overflow-y: auto; }
.mention-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; }
.mention-item:hover { background: var(--bg-3); }
.mention-item .mi-name { font-size: 14px; }
.mention-item .mi-login { color: var(--text-dim); font-size: 12px; margin-left: auto; }
.composer { padding: 10px 16px 14px; background: var(--bg); display: flex; gap: 8px; align-items: flex-end; }
.composer textarea { flex: 1; background: var(--bg-2); border: 0; border-radius: 14px; padding: 10px 16px; color: var(--text); resize: none; outline: none; max-height: 120px; min-height: 42px; line-height: 1.4; }
.composer .attach-btn, .composer .send-btn, .composer .cmd-btn { background: var(--accent); border: 0; border-radius: 50%; width: 42px; height: 42px; color: white; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; cursor: pointer; }
.composer .attach-btn, .composer .cmd-btn { background: transparent; color: var(--text-dim); }
.composer .attach-btn:hover, .composer .cmd-btn:hover { background: var(--bg-3); color: var(--text); }
.composer .emoji-btn { background: transparent; border: 0; border-radius: 50%; width: 42px; height: 42px; color: var(--text-dim); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; cursor: pointer; }
.composer .emoji-btn:hover { background: var(--bg-3); }
.composer .emoji-btn:disabled { opacity: .5; cursor: not-allowed; }
.composer .cmd-btn { font-size: 22px; font-weight: 600; line-height: 1; }
.composer .send-btn:hover { background: var(--accent-2); }
.composer .send-btn:disabled { background: var(--bg-3); color: var(--text-dim); cursor: not-allowed; }
.attach-preview { padding: 8px 16px; background: var(--bg-2); border-top: 1px solid var(--bg-3); display: flex; align-items: center; gap: 10px; }
.attach-preview .icon { font-size: 22px; }
.attach-preview .info { flex: 1; min-width: 0; }
.attach-preview .name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attach-preview .size { font-size: 11px; color: var(--text-dim); }
.attach-preview button { background: transparent; border: 0; color: var(--text-dim); cursor: pointer; padding: 4px 8px; }
.attach-preview button:hover { color: var(--danger); }
.attach-preview.uploading .info::after { content: " · загрузка..."; color: var(--accent-2); }

/* Drag overlay */
.drag-overlay { position: absolute; inset: 0; background: rgba(82,136,193,0.18); border: 3px dashed var(--accent-2); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--accent-2); pointer-events: none; z-index: 50; font-weight: 600; }
.chat { position: relative; }

/* Attachment in bubble */
.attach { margin-bottom: 4px; }
.attach img { max-width: 100%; max-height: 60vh; height: auto; width: auto; border-radius: 10px; display: block; cursor: pointer; background: var(--bg-3); }
@media (min-width: 901px) { .attach img { max-width: 320px; max-height: 320px; } }
.attach .file-card { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,0.18); border-radius: 8px; padding: 10px 12px; min-width: 200px; max-width: 320px; cursor: pointer; text-decoration: none; color: var(--text); }
.attach .file-card:hover { background: rgba(0,0,0,0.28); }
.attach .file-card .icon { font-size: 28px; flex-shrink: 0; }
.attach .file-card .meta { flex: 1; min-width: 0; }
.attach .file-card .name { font-weight: 500; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attach .file-card .size { font-size: 12px; color: var(--text-dim); }
.bubble.has-img { padding: 4px 4px 6px; }
.bubble.has-img .text { padding: 4px 8px 0; }
.bubble.has-img .time { padding: 0 8px; }

/* TG-style START button for empty bot chat */
.start-row { padding: 8px 12px 14px; display: flex; }
.start-btn { flex: 1; padding: 14px 20px; background: var(--accent); color: white; border: 0; border-radius: 10px; font-size: 16px; font-weight: 600; letter-spacing: 0.5px; cursor: pointer; transition: background 0.15s; }
.start-btn:hover { background: var(--accent-2); }
.start-btn:active { transform: scale(0.99); }

/* Inline keyboard (bot buttons) */
.inline-kb { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.inline-kb-row { display: flex; gap: 4px; }
.inline-btn { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 8px; border: 0; background: var(--bg); color: var(--accent-2); font-size: 14px; font-weight: 500; cursor: pointer; transition: background 0.15s; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inline-btn:hover:not(:disabled) { background: var(--bg-3); }
.inline-btn:active:not(:disabled) { transform: scale(0.97); }
.inline-btn:disabled { opacity: 0.5; cursor: wait; }
.inline-btn--primary { background: var(--accent); color: #fff; }
.inline-btn--primary:hover:not(:disabled) { background: var(--accent-2); }
.inline-btn--warning { background: var(--warning); color: #1a1a1a; }
.inline-btn--warning:hover:not(:disabled) { filter: brightness(1.08); }
.inline-btn--danger { background: var(--danger); color: #fff; }
.inline-btn--danger:hover:not(:disabled) { filter: brightness(1.1); }
.inline-btn--accent { background: var(--btn-accent); color: #fff; }
.inline-btn--accent:hover:not(:disabled) { filter: brightness(1.1); }
.bubble.has-img .inline-kb { padding: 0 4px; }
.bubble.me .inline-btn { background: rgba(255,255,255,0.18); color: white; }
.bubble.me .inline-btn:hover:not(:disabled) { background: rgba(255,255,255,0.28); }

/* Image lightbox */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: center; z-index: 300; cursor: zoom-out; }
.lightbox img, .lightbox video { max-width: 92vw; max-height: 92vh; border-radius: 4px; background: #000; }
.video-attach { position: relative; }
.video-attach video { display: block; max-width: 100%; max-height: 360px; border-radius: 10px; background: #000; }
.video-attach .video-fullscreen { position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,0.5); color: white; border: 0; border-radius: 4px; padding: 2px 6px; cursor: pointer; font-size: 14px; }
.lightbox .close { position: absolute; top: 14px; right: 18px; background: transparent; border: 0; color: white; font-size: 28px; cursor: pointer; z-index: 2; }
/* Листание медиа чата (как в Telegram) */
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 64px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.35); color: #fff; border: 0; border-radius: 8px; font-size: 40px; line-height: 1; cursor: pointer; z-index: 2; transition: background 0.15s; }
.lb-nav:hover { background: rgba(0,0,0,0.6); }
.lb-nav:disabled { opacity: 0.25; cursor: default; }
.lb-prev { left: 10px; }
.lb-next { right: 10px; }
.lb-counter { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.85); font-size: 14px; font-variant-numeric: tabular-nums; z-index: 2; pointer-events: none; }
@media (max-width: 900px) { .lb-nav { width: 40px; height: 56px; font-size: 32px; background: rgba(0,0,0,0.25); } }
/* Doc viewer inside lightbox (iOS: возврат в чат через ✕, без подмены PWA) */
.lb-doc-wrap { display: flex; flex-direction: column; width: 96vw; height: 92vh; cursor: auto; }
.lb-doc { flex: 1; width: 100%; border: 0; border-radius: 6px; background: #fff; }
.lb-download { display: block; margin-top: 10px; padding: 12px; text-align: center; background: rgba(255,255,255,0.95); color: #1b6ef3; border-radius: 8px; font-weight: 600; text-decoration: none; }

/* Avatar cropper */
.av-crop-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; z-index: 500; }
.av-crop-box { background: var(--bg-2); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 92vw; }
.av-crop-title { font-size: 13px; color: var(--text-dim); }
.av-crop-stage { position: relative; overflow: hidden; border-radius: 8px; background: #000; touch-action: none; cursor: grab; }
.av-crop-stage:active { cursor: grabbing; }
.av-crop-img { position: absolute; max-width: none; user-select: none; -webkit-user-drag: none; }
.av-crop-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2000px rgba(0,0,0,0.55); pointer-events: none; }
.av-crop-ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,0.85); }
.av-crop-zoom { width: 100%; }
.av-crop-actions { display: flex; gap: 10px; align-self: stretch; }
.av-crop-actions button { flex: 1; padding: 9px; border-radius: 8px; border: 0; cursor: pointer; }

/* ---- Modal ---- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal { background: var(--bg-2); padding: 24px; border-radius: 12px; width: 420px; max-width: 92vw; max-height: 90vh; overflow-y: auto; }
.modal h2 { font-size: 18px; margin-bottom: 16px; }
.modal label { display: block; color: var(--text-dim); font-size: 12px; margin-bottom: 6px; margin-top: 12px; }
.modal label:first-of-type { margin-top: 0; }
.modal input, .modal select { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--bg-3); background: var(--bg); color: var(--text); outline: none; }
.modal input:focus { border-color: var(--accent); }
.modal-actions { display: flex; gap: 10px; margin-top: 20px; justify-content: flex-end; }
.modal-actions button { padding: 9px 18px; border-radius: 8px; border: 0; font-weight: 500; }
.btn-primary { background: var(--accent); color: white; }
.btn-primary:hover { background: var(--accent-2); }
.btn-ghost { background: transparent; color: var(--text-dim); }
.btn-ghost:hover { color: var(--text); }
.btn-danger { background: var(--danger); color: white; }
.link-btn { background: none; border: 0; color: var(--accent-2); font-size: 13px; cursor: pointer; padding: 8px 4px; margin-top: 6px; }
.link-btn:hover { text-decoration: underline; }
.token-box { background: var(--bg); padding: 12px; border-radius: 8px; font-family: monospace; font-size: 12px; word-break: break-all; margin-top: 10px; color: var(--accent-2); border: 1px dashed var(--bg-3); }
.token-note { font-size: 12px; color: var(--text-dim); margin-top: 8px; }
.bot-card { background: var(--bg-3); padding: 12px; border-radius: 8px; margin-bottom: 8px; display: flex; align-items: center; gap: 12px; }
.bot-card .info { flex: 1; min-width: 0; }
.bot-card .info .name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bot-card .info .login { color: var(--text-dim); font-size: 12px; }
.bot-card button { background: transparent; border: 0; color: var(--danger); cursor: pointer; }
.bot-card .write-btn { background: var(--accent); color: white; padding: 6px 12px; border-radius: 6px; font-size: 13px; }

/* ---- Mobile ---- */
@media (max-width: 900px) {
  /* Pin the app to the layout-viewport top so iOS can't focus-scroll / rubber-band
     the whole UI around (the "floating composer" bug). With the body holding only
     a fixed .page there is nothing to scroll, so the composer stays glued to the
     bottom of the visual viewport (height driven by --app-h from
     setupKeyboardViewportFit). No transform → fixed modals/lightbox (siblings of
     .page) keep their viewport-relative positioning. */
  .page { position: fixed; top: 0; left: 0; right: 0; }
  .shell { max-width: 100%; box-shadow: none; }
  .sidebar-wrap { width: 100%; min-width: 0; }
  .sidebar { width: 100%; min-width: 0; }
  .shell.has-chat .sidebar-wrap { display: none; }
  .shell.has-chat .chat { display: flex; }
  .shell:not(.has-chat) .chat { display: none; }
  .modal { width: 92vw; }
  .chat-messages { padding: 12px; }
  .bubble { max-width: 80%; }
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 3px; }

.outbox-mark { margin-left: 4px; font-size: 0.85em; opacity: 0.7; }
.outbox-mark.failed { color: #e74c3c; opacity: 1; cursor: pointer; }
.outbox-mark.pending { color: inherit; }

/* Pull-to-refresh: гасим нативный bounce/PTR, своя реализация в init.js */
html, body { overscroll-behavior-y: contain; }
#ptr-indicator {
  position: fixed; top: 8px; left: 50%; margin-left: -20px;
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  z-index: 1000; transform: translateY(-60px); transition: transform .15s ease; pointer-events: none;
}
#ptr-indicator .ptr-spinner {
  width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid rgba(127,127,127,.35); border-top-color: var(--accent, #3b82f6); opacity: .75;
}
#ptr-indicator.ready .ptr-spinner { opacity: 1; }
#ptr-indicator.spin .ptr-spinner { animation: ptr-rot .7s linear infinite; }
@keyframes ptr-rot { to { transform: rotate(360deg); } }