/* Premium palette. Light/dark auto-selected from tg.colorScheme + manual toggle (data-theme on ). Same var names as before, so all existing CSS reskins automatically. */ :root { --bg:#0e1621; --bg2:#141e29; --panel:#141e29; --surface:#1b2735; --surface-2:#22303f; --text:#eaf1f8; --hint:#8a98a8; --faint:#5d6b7a; --accent:#3d9bff; --link:#3d9bff; --btn:#3d9bff; --green:#54d18c; --red:#ff6b6b; --orange:#f0a84a; --bubble-in:#1b2735; --bubble-out:#2f6bb0; --line:color-mix(in srgb,var(--text) 8%,transparent); --line-2:color-mix(in srgb,var(--text) 15%,transparent); --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow:0 2px 6px rgba(0,0,0,.3),0 12px 34px rgba(0,0,0,.4); --r:14px; --rs:10px; color-scheme:dark; } html[data-theme="light"] { --bg:#eef2f6; --bg2:#ffffff; --panel:#ffffff; --surface:#ffffff; --surface-2:#f3f6f9; --text:#0f1b27; --hint:#64727f; --faint:#9aa7b3; --accent:#2f86e0; --link:#2f86e0; --btn:#2f86e0; --green:#1faf6d; --red:#e0484b; --orange:#d98a2b; --bubble-in:#ffffff; --bubble-out:#d2ebff; --line:rgba(15,27,39,.08); --line-2:rgba(15,27,39,.15); --shadow-sm:0 1px 2px rgba(16,32,48,.06); --shadow:0 2px 6px rgba(16,32,48,.08),0 12px 34px rgba(16,32,48,.14); color-scheme:light; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system,'SF Pro Text',Roboto,sans-serif; background:var(--bg); color:var(--text); min-height:100dvh; font-size:14px; transition:background .25s,color .25s; } .app { display:flex; flex-direction:column; height:100dvh; } /* ── Header ── */ .hdr { background:var(--bg2); padding:10px 14px; border-bottom:1px solid color-mix(in srgb,var(--text) 6%,transparent); flex-shrink:0; } .hdr-top { display:flex; align-items:center; justify-content:space-between; } .hdr h1 { font-size:16px; font-weight:700; } .hdr-actions { display:flex; gap:8px; align-items:center; } .icon-btn { background:none; border:none; cursor:pointer; font-size:18px; padding:2px 4px; color:var(--hint); display:inline-flex; align-items:center; } .icon-btn svg { display:block; } .icon-btn:hover { color:var(--text); } .status { display:flex; align-items:center; gap:5px; font-size:12px; color:var(--hint); } .dot { width:7px; height:7px; border-radius:50%; background:var(--green); } .dot.off { background:var(--red); } /* ── Session switcher ── */ .sess-bar { display:flex; gap:6px; overflow-x:auto; padding:8px 14px 0; scrollbar-width:none; } .sess-bar::-webkit-scrollbar { display:none; } .sess-chip { flex-shrink:0; padding:4px 10px; border-radius:20px; font-size:12px; border:1px solid color-mix(in srgb,var(--text) 15%,transparent); cursor:pointer; color:var(--hint); white-space:nowrap; transition:all .15s; } .sess-chip.active { background:var(--accent); border-color:var(--accent); color:#fff; } .sess-chip .sdot { display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:4px; } /* ── Stats ── */ .stats { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding:10px 14px; background:var(--bg2); border-bottom:1px solid color-mix(in srgb,var(--text) 6%,transparent); flex-shrink:0; } .stat { text-align:center; } .stat-num { font-size:17px; font-weight:700; color:var(--accent); } .stat-lbl { font-size:10px; color:var(--hint); margin-top:1px; } /* ── Search & filters ── */ .srch-bar { padding:8px 14px; background:var(--bg2); border-bottom:1px solid color-mix(in srgb,var(--text) 6%,transparent); flex-shrink:0; } .srch-row { display:flex; gap:6px; align-items:center; } .srch-inp { flex:1; min-width:0; background:var(--bg); border:1px solid color-mix(in srgb,var(--text) 10%,transparent); border-radius:var(--rs); color:var(--text); padding:7px 11px; font-size:14px; outline:none; } .srch-inp:focus { border-color:var(--accent); } .srch-clr { background:none; border:none; color:var(--hint); cursor:pointer; font-size:15px; padding:4px 6px; border-radius:var(--rs); flex-shrink:0; } .srch-clr:hover { color:var(--text); } .chips { display:flex; gap:5px; margin-top:7px; flex-wrap:wrap; } .chip { padding:3px 9px; border-radius:20px; font-size:12px; border:1px solid color-mix(in srgb,var(--text) 15%,transparent); cursor:pointer; color:var(--hint); user-select:none; } .chip.active { background:var(--accent); border-color:var(--accent); color:#fff; } /* Secondary chips row (media sub-types), visually subordinate to main chips */ .subchips { display:flex; gap:5px; margin-top:6px; flex-wrap:wrap; padding-left:12px; } .subchip { display:inline-flex; align-items:center; gap:4px; padding:4px 9px; border-radius:16px; font-size:11px; border:1px solid color-mix(in srgb,var(--text) 12%,transparent); cursor:pointer; color:var(--hint); user-select:none; } .subchip .chip-ic { width:13px; height:13px; } .subchip.active { background:color-mix(in srgb,var(--accent) 16%,transparent); border-color:var(--accent); color:var(--accent); } /* settings / add-dialog type filter chips: icon + label inline */ #settingsTypeChips .chip, #addDialogTypeChips .chip { display:inline-flex; align-items:center; gap:5px; } #settingsTypeChips .chip .chip-ic, #addDialogTypeChips .chip .chip-ic { width:14px; height:14px; } .srch-info { font-size:11px; color:var(--hint); margin-top:5px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .srch-info b { color:var(--text); font-weight:600; } .srch-scope-btn { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; font-size:11px; font-weight:700; border:1px solid var(--accent); color:var(--accent); background:rgba(106,179,243,.10); border-radius:999px; cursor:pointer; white-space:nowrap; } .srch-scope-btn:hover { background:rgba(106,179,243,.22); } .srch-empty-scope { margin-top:14px; font-size:13px; color:var(--hint); display:flex; flex-direction:column; align-items:center; gap:10px; } .srch-empty-scope .srch-scope-btn { font-size:13.5px; padding:9px 18px; } /* ── Filter chip-row with a leading label (e.g. "Тип:", "Скрыть:") ── */ .fchips-row { display:flex; gap:5px; margin-top:6px; flex-wrap:wrap; align-items:center; } .fchips-lbl { font-size:11px; color:var(--hint); text-transform:uppercase; letter-spacing:.04em; margin-right:2px; flex-shrink:0; } /* Toggle-style chips (for hide_bots / hide_channels — look "off" until active) */ .chip.tgl-chip { background:color-mix(in srgb,var(--text) 4%,transparent); } .chip.tgl-chip.active { background:var(--red); border-color:var(--red); color:#fff; } /* Compact inline date inputs for period filter */ .fdates { display:flex; gap:5px; align-items:center; flex-wrap:wrap; } .fdate { background:color-mix(in srgb,var(--text) 4%,transparent); border:1px solid color-mix(in srgb,var(--text) 12%,transparent); border-radius:20px; color:var(--text); padding:2px 9px; font-size:12px; outline:none; color-scheme:dark; min-width:120px; } .fdate:focus { border-color:var(--accent); } .fdate.has { background:rgba(106,179,243,.12); border-color:var(--accent); color:var(--accent); } .fdate-sep { font-size:11px; color:var(--hint); } .fclr-chip { cursor:pointer; color:var(--hint); padding:2px 7px; border-radius:20px; font-size:11px; border:1px dashed color-mix(in srgb,var(--text) 15%,transparent); } .fclr-chip:hover { color:var(--text); border-color:var(--hint); } /* Quick-period chips (1h / 24h / week / month) — between label and date inputs */ .qp-chip { padding:2px 8px; border-radius:14px; font-size:11px; border:1px solid color-mix(in srgb,var(--text) 12%,transparent); color:var(--hint); cursor:pointer; user-select:none; transition:all .12s; white-space:nowrap; } .qp-chip:hover { color:var(--text); border-color:var(--hint); } .qp-chip.active { background:var(--accent); border-color:var(--accent); color:#fff; } /* ── Inline hide-bar (lives inside the filter-row, pinned to the far right; visually separated from filter chips — it's a viewing toggle, not a filter) ── */ .msgs-wrap { position:relative; flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; } .hide-bar { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; background:color-mix(in srgb,var(--text) 4%,transparent); border:1px solid color-mix(in srgb,var(--text) 10%,transparent); border-radius:16px; margin-left:auto; } .hb-lbl { font-size:10px; color:var(--hint); text-transform:uppercase; letter-spacing:.04em; user-select:none; } .hb-chip { padding:2px 8px; font-size:12px; } .hb-help { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:linear-gradient(135deg, rgba(106,179,243,.18), rgba(106,179,243,.08)); color:var(--accent); font-size:12px; font-weight:700; font-family:Georgia,'Times New Roman',serif; cursor:pointer; user-select:none; border:1.5px solid rgba(106,179,243,.45); transition:transform .18s, background .18s, box-shadow .18s, color .18s; } .hb-help:hover { background:var(--accent); color:#fff; border-color:var(--accent); transform:scale(1.12); box-shadow:0 2px 10px rgba(106,179,243,.45); } .hb-help:active { transform:scale(.96); } /* ── Language picker dropdown (opens under the flag button in header) ── */ .lang-drop { position:fixed; z-index:250; background:var(--bg2); border:1px solid color-mix(in srgb,var(--text) 14%,transparent); border-radius:12px; padding:5px; min-width:180px; box-shadow:0 10px 32px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.3); opacity:0; transform:translateY(-4px); pointer-events:none; transition:opacity .15s ease, transform .15s ease; } .lang-drop.open { opacity:1; transform:translateY(0); pointer-events:auto; } .lang-opt { display:flex; align-items:center; gap:10px; padding:10px 12px; cursor:pointer; font-size:13px; border-radius:8px; user-select:none; color:var(--text); transition:background .12s; } .lang-opt:hover { background:color-mix(in srgb,var(--text) 7%,transparent); } .lang-opt.active { color:var(--accent); font-weight:600; background:rgba(106,179,243,.08); } .lang-opt .flag { font-size:18px; line-height:1; } .lang-opt .check { margin-left:auto; color:var(--accent); font-weight:700; } /* ── Forum topics strip (appears when current chat is a forum) ── */ .topics-strip { display:flex; gap:6px; padding:7px 12px; overflow-x:auto; background:var(--bg2); border-bottom:1px solid color-mix(in srgb,var(--text) 6%,transparent); flex-shrink:0; scrollbar-width:none; } .topics-strip::-webkit-scrollbar { display:none; } .topic-chip { flex-shrink:0; padding:4px 11px; border-radius:16px; font-size:12px; border:1px solid color-mix(in srgb,var(--text) 12%,transparent); color:var(--hint); cursor:pointer; white-space:nowrap; user-select:none; transition:all .15s; } .topic-chip:hover { border-color:var(--accent); color:var(--text); } .topic-chip.active { background:var(--accent); border-color:var(--accent); color:#fff; } /* ── Backfill period picker ── */ .bf-meta { background:color-mix(in srgb,var(--text) 4%,transparent); border-radius:var(--rs); padding:10px 12px; font-size:12px; color:var(--hint); line-height:1.55; margin-bottom:14px; } .bf-meta b { color:var(--text); } .bf-section { font-size:12px; color:var(--hint); text-transform:uppercase; letter-spacing:.04em; font-weight:600; margin:6px 0 8px; } .bf-opts { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; } .bf-opt { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 13px; background:var(--bg2); border:1px solid color-mix(in srgb,var(--text) 8%,transparent); border-radius:var(--rs); cursor:pointer; transition:border-color .15s, background .15s; } .bf-opt:hover { border-color:rgba(106,179,243,.4); } .bf-opt.selected { border-color:var(--accent); background:rgba(106,179,243,.1); } .bf-opt-left { display:flex; flex-direction:column; gap:2px; min-width:0; } .bf-opt-name { font-size:14px; font-weight:600; color:var(--text); } .bf-opt-eta { font-size:11px; color:var(--hint); } .bf-opt-rdo { width:18px; height:18px; border-radius:50%; border:2px solid color-mix(in srgb,var(--text) 25%,transparent); flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:border-color .15s; } .bf-opt.selected .bf-opt-rdo { border-color:var(--accent); } .bf-opt.selected .bf-opt-rdo::after { content:''; width:9px; height:9px; border-radius:50%; background:var(--accent); } .bf-warn { background:color-mix(in srgb,var(--orange) 12%,transparent); border:1px solid color-mix(in srgb,var(--orange) 35%,transparent); padding:9px 12px; border-radius:var(--rs); font-size:12px; color:var(--text); line-height:1.5; margin-bottom:16px; } .bf-actions { display:flex; gap:10px; } .bf-actions .btn { flex:1; } /* ── Search result card ── */ .sr-card { background:var(--bg2); border-radius:var(--r); padding:10px 12px; margin-bottom:7px; border:1px solid color-mix(in srgb,var(--text) 6%,transparent); cursor:pointer; transition:border-color .15s; } .sr-card:hover { border-color:rgba(106,179,243,.35); } .sr-meta { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--hint); margin-bottom:4px; flex-wrap:wrap; } .sr-meta .sr-chat { color:var(--accent); font-weight:600; } .sr-meta .sr-sep { opacity:.4; } .sr-sender { font-size:12px; color:var(--text); opacity:.85; margin-bottom:3px; font-weight:500; } .sr-ctx { font-size:11.5px; color:var(--hint); margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sr-ctx .q { opacity:.85; font-style:italic; } .sr-text { font-size:14px; line-height:1.45; color:var(--text); word-break:break-word; white-space:pre-wrap; } .sr-text mark { background:rgba(255,210,80,.32); color:var(--text); padding:0 2px; border-radius:3px; font-weight:600; } .sr-empty { padding:30px 20px; text-align:center; color:var(--hint); font-size:13px; } .sr-hint { padding:10px 12px; font-size:11px; color:var(--hint); text-align:center; opacity:.75; } /* ── Layout ── */ .content { display:flex; flex:1; overflow:hidden; } .sidebar { width:208px; background:var(--panel); border-right:1px solid var(--line); overflow-y:auto; flex-shrink:0; } @media (max-width:560px){ .sidebar { width:122px; } .sidebar .s-item { flex-direction:column; align-items:center; text-align:center; gap:5px; padding:9px 5px; } .sidebar .s-item .tg-avatar { width:42px; height:42px; font-size:16px; } .sidebar .s-item > div:last-child { width:100%; min-width:0; } .sidebar .s-name { white-space:normal; line-height:1.2; font-size:11.5px; max-height:2.4em; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } .sidebar .s-meta, .sidebar .s-owner { display:none; } } .s-item { display:flex; align-items:center; gap:10px; padding:10px 12px; cursor:pointer; border-bottom:1px solid var(--line); transition:background .15s; position:relative; will-change:transform; } .s-item .tg-avatar { width:38px; height:38px; font-size:15px; flex-shrink:0; } .s-item:hover { background:var(--surface); } .s-item.active { background:color-mix(in srgb,var(--accent) 14%,transparent); } .s-item.active .s-name { color:var(--accent); } .s-item.pinned { background:color-mix(in srgb,var(--orange) 9%,transparent); } .s-item.pinned::before { content:'📌'; position:absolute; top:3px; right:4px; font-size:9px; opacity:.85; pointer-events:none; } /* FLIP animation — elements translate from old → new position on reorder */ .s-item.flip-animate { transition:transform .42s cubic-bezier(.4,0,.2,1); } /* Context menu for chat (pin/unpin) */ .ctx-menu { position:fixed; z-index:300; background:var(--bg2); border:1px solid color-mix(in srgb,var(--text) 12%,transparent); border-radius:10px; padding:4px; min-width:160px; box-shadow:0 8px 28px rgba(0,0,0,.55); } .ctx-item { padding:9px 12px; cursor:pointer; font-size:13px; border-radius:6px; display:flex; align-items:center; gap:8px; user-select:none; } .ctx-item:hover { background:color-mix(in srgb,var(--text) 8%,transparent); } .ctx-item .ctx-ico { font-size:15px; } .s-name { font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .s-meta { font-size:11px; color:var(--hint); margin-top:1px; } .s-owner { font-size:10px; background:color-mix(in srgb,var(--accent) 15%,transparent); color:var(--accent); padding:1px 5px; border-radius:5px; margin-top:2px; display:inline-block; } .msgs-list { flex:1; overflow-y:auto; padding:7px; } /* ── Message card ── */ .msg-card { background:var(--bg2); border-radius:var(--r); margin-bottom:7px; border:1px solid color-mix(in srgb,var(--text) 6%,transparent); overflow:hidden; } .msg-card.del { border-color:rgba(224,92,92,.3); } .msg-card.edit { border-color:rgba(224,149,74,.3); } .msg-card.med { border-color:rgba(106,179,243,.2); } .msg-hdr { display:flex; align-items:center; justify-content:space-between; padding:7px 11px; background:color-mix(in srgb,var(--text) 3%,transparent); font-size:11px; color:var(--hint); } .msg-chat { font-weight:600; color:var(--text); max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .msg-sess { font-size:9px; background:rgba(106,179,243,.12); color:var(--accent); padding:1px 5px; border-radius:3px; margin-left:4px; } .badges { display:flex; gap:3px; flex-wrap:wrap; } .badge { padding:1px 5px; border-radius:3px; font-size:10px; font-weight:600; } .bdel { background:rgba(224,92,92,.2); color:var(--red); } .bedit{ background:rgba(224,149,74,.2); color:var(--orange); } .bmed { background:rgba(106,179,243,.15); color:var(--accent); } .msg-body { padding:8px 11px; } .msg-text { font-size:13px; line-height:1.45; word-break:break-word; white-space:pre-wrap; } .msg-text.strike { text-decoration:line-through; color:var(--hint); } .msg-time { font-size:10px; color:var(--hint); margin-top:4px; } .msg-sender { font-size:10px; color:var(--accent); margin-top:2px; cursor:pointer; display:inline-block; background:rgba(106,179,243,.1); padding:1px 6px; border-radius:3px; } .msg-sender:hover { background:rgba(106,179,243,.2); } .media-pend { cursor:pointer; user-select:none; } .media-pend:hover { opacity:.8; } /* ── Sender popup ── */ .sender-popup { position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:1000; } .sender-box { background:var(--bg2); border-radius:var(--r); min-width:240px; max-width:300px; overflow:hidden; border:1px solid color-mix(in srgb,var(--text) 8%,transparent); } .sender-hdr { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid color-mix(in srgb,var(--text) 6%,transparent); } .sender-row { padding:5px 14px; font-size:13px; display:flex; gap:8px; } .sender-lbl { color:var(--hint); min-width:80px; font-size:11px; } .sender-val { color:var(--text); word-break:break-all; } /* ── «Открыть в Telegram»: инструкция + действия (search-hit) ── */ .tgjump-popup { position:fixed; inset:0; background:rgba(0,0,0,.65); display:flex; align-items:center; justify-content:center; z-index:1100; } .tgjump-box { position:relative; background:var(--bg2); border:1px solid color-mix(in srgb,var(--text) 10%,transparent); border-radius:16px; width:min(360px, 90vw); max-height:88vh; overflow-y:auto; padding:22px 20px 18px; text-align:center; box-shadow:0 12px 40px rgba(0,0,0,.5); animation:tgjumpIn .22s cubic-bezier(.22,1,.36,1); } @keyframes tgjumpIn { from { transform:scale(.85); opacity:0; } to { transform:scale(1); opacity:1; } } .tgjump-x { position:absolute; top:8px; right:10px; width:30px; height:30px; border:none; background:transparent; color:var(--text); opacity:.55; font-size:18px; cursor:pointer; border-radius:8px; } .tgjump-x:hover { opacity:1; background:color-mix(in srgb,var(--text) 8%,transparent); } .tgjump-title { font-size:17px; font-weight:700; margin:0 18px 12px; } .tgjump-text { font-size:13.5px; line-height:1.5; opacity:.93; margin-bottom:14px; text-align:left; } .tgjump-text .tgj-warn { display:block; background:rgba(255,170,0,.12); border:1px solid rgba(255,170,0,.35); border-radius:10px; padding:9px 11px; margin:0 0 10px; } .tgjump-text b { color:var(--text); } .tgjump-text ol { margin:8px 0 0; padding-left:20px; } .tgjump-text ol li { margin:3px 0; } .tgjump-text .tgj-calm { display:block; opacity:.7; font-size:12.5px; margin-top:10px; } .tgjump-actions { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; } .tgjump-actions button { width:100%; border:none; border-radius:10px; padding:12px 12px; font-size:14px; font-weight:600; cursor:pointer; text-align:center; } .tgjump-act-primary { background:var(--btn); color:#fff; } .tgjump-act-sec { background:color-mix(in srgb,var(--text) 10%,transparent); color:var(--text); } .tgjump-btns { display:flex; gap:10px; } .tgjump-btns button { flex:1; border:none; border-radius:10px; padding:12px 10px; font-size:14px; font-weight:600; cursor:pointer; } .tgjump-go { background:var(--btn); color:#fff; } .tgjump-go[disabled] { opacity:.5; cursor:default; } .tgjump-cancel { background:color-mix(in srgb,var(--text) 8%,transparent); color:var(--text); } /* ── Media ── */ .media-preview { margin-bottom:7px; border-radius:var(--rs); overflow:hidden; } .media-photo { width:100%; max-height:240px; object-fit:cover; display:block; cursor:pointer; border-radius:var(--rs); background:color-mix(in srgb,var(--text) 5%,transparent); } .album-grid { display:grid; grid-template-columns:1fr 1fr; gap:3px; margin-bottom:7px; border-radius:var(--rs); overflow:hidden; } .album-grid .media-photo { max-height:160px; border-radius:0; margin-bottom:0; } .album-grid.single-row { grid-template-columns:1fr 1fr 1fr; } .album-grid.one-item { grid-template-columns:1fr; } .sticker-wrap { display:flex; align-items:center; gap:9px; padding:5px 0; } .sticker-img { width:72px; height:72px; object-fit:contain; border-radius:7px; } .sticker-emoji { font-size:26px; } .sticker-set { font-size:10px; color:var(--hint); margin-top:2px; } .audio-player { display:flex; align-items:center; gap:9px; padding:8px 0; } .play-btn { width:36px; height:36px; border-radius:50%; background:var(--accent); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .play-btn svg { width:14px; height:14px; fill:#fff; } .audio-info { flex:1; min-width:0; } .audio-wfm { height:26px; background:rgba(106,179,243,.15); border-radius:4px; position:relative; overflow:hidden; } .audio-prog { height:100%; background:var(--accent); width:0%; border-radius:4px; opacity:.5; transition:width .1s; } .audio-time { font-size:10px; color:var(--hint); margin-top:3px; } .audio-fname { font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .vnote-wrap { display:inline-block; position:relative; width:90px; height:90px; } .vnote-img { width:90px; height:90px; border-radius:50%; object-fit:cover; cursor:pointer; border:2px solid rgba(106,179,243,.4); } .vnote-icon { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:20px; pointer-events:none; } .vid-wrap { position:relative; cursor:pointer; } .vid-thumb { width:100%; max-height:180px; object-fit:cover; border-radius:var(--rs); display:block; } .vid-play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; font-size:18px; } .vid-dur { position:absolute; bottom:5px; right:7px; font-size:10px; background:rgba(0,0,0,.7); padding:1px 4px; border-radius:3px; color:#fff; } .gif-wrap { border-radius:var(--rs); overflow:hidden; } .gif-img { width:100%; max-height:180px; object-fit:cover; display:block; } .doc-card { display:flex; align-items:center; gap:9px; padding:9px; background:color-mix(in srgb,var(--text) 4%,transparent); border-radius:var(--rs); text-decoration:none; cursor:pointer; } .doc-icon { font-size:26px; flex-shrink:0; } .doc-info { flex:1; min-width:0; } .doc-name { font-size:12px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .doc-size { font-size:10px; color:var(--hint); margin-top:1px; } .media-pend { display:flex; align-items:center; gap:7px; padding:9px; background:color-mix(in srgb,var(--text) 4%,transparent); border-radius:var(--rs); color:var(--hint); font-size:12px; } .msg-caption { font-size:12px; color:var(--hint); margin-top:3px; font-style:italic; } /* ── Events ── */ .msg-evts { border-top:1px solid color-mix(in srgb,var(--text) 6%,transparent); } .evts-toggle { padding:5px 11px; font-size:11px; color:var(--accent); cursor:pointer; } .evts-list { padding:0 11px 7px; } .ev-item { padding:5px 0; border-bottom:1px solid color-mix(in srgb,var(--text) 4%,transparent); font-size:11px; } .ev-item:last-child { border:none; } .ev-type { display:inline-block; padding:1px 5px; border-radius:3px; font-size:9px; font-weight:700; margin-right:3px; } .ev-sent { background:rgba(76,175,119,.2); color:var(--green); } .ev-edited { background:rgba(224,149,74,.2); color:var(--orange); } .ev-deleted { background:rgba(224,92,92,.2); color:var(--red); } .ev-reaction { background:rgba(120,160,240,.2); color:#7ab0f0; } .ev-call { background:rgba(150,120,240,.2); color:#a07af0; } .ev-text { color:var(--hint); margin-top:2px; white-space:pre-wrap; word-break:break-word; } .ev-time { color:var(--hint); font-size:9px; } .rx-wrap { display:flex; flex-wrap:wrap; gap:4px; align-items:center; } .rx-state { font-size:13px; } .rx-empty { color:var(--hint); font-style:italic; font-size:11px; } .rx-added { color:#6fcf97; font-size:12px; font-weight:600; } .rx-removed { color:#eb5757; font-size:12px; font-weight:600; } .rx-who { color:var(--hint); font-size:11px; } /* ── History event layout ── */ .ev-hdr-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:3px; } .ev-mini-media { margin:4px 0 2px; } .mini-thumb { width:90px; height:68px; object-fit:cover; border-radius:5px; cursor:pointer; display:block; } .mini-vid { position:relative; display:inline-block; } .mini-play-ic { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:22px; height:22px; border-radius:50%; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; font-size:11px; } .mini-vnote { display:inline-block; position:relative; width:52px; height:52px; cursor:pointer; } .mini-vnote img { width:52px; height:52px; border-radius:50%; object-fit:cover; border:1.5px solid rgba(106,179,243,.4); } .mini-vnote span { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:12px; pointer-events:none; } .mini-sticker { width:48px; height:48px; object-fit:contain; } .mini-file { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--hint); } .mini-alb-grid { display:flex; gap:2px; flex-wrap:wrap; } .mini-alb-cell { width:56px; height:56px; overflow:hidden; border-radius:4px; background:color-mix(in srgb,var(--text) 8%,transparent); display:flex; align-items:center; justify-content:center; font-size:16px; } .mini-alb-cell img { width:100%; height:100%; object-fit:cover; cursor:pointer; } /* ── Telegram-style bubbles ── */ .tg-row { display:flex; align-items:flex-end; margin-bottom:5px; padding:0 13px; gap:7px; } .tg-row.in { justify-content:flex-start; } .tg-row.out { justify-content:flex-end; } .tg-col { display:flex; flex-direction:column; max-width:78%; min-width:0; } .tg-row.out .tg-col { align-items:flex-end; } .tg-chat-lbl { font-size:10px; color:var(--hint); padding:0 5px; margin-bottom:2px; } .tg-topic-lbl { color:var(--accent); font-weight:600; } /* Prominent topic row above the bubble for forum-chat messages */ .tg-topic-row { display:inline-block; font-size:11px; color:var(--accent); font-weight:600; background:rgba(106,179,243,.12); border:1px solid rgba(106,179,243,.3); border-radius:10px; padding:2px 9px; margin:0 5px 4px; cursor:pointer; user-select:none; transition:background .15s; } .tg-topic-row:hover { background:rgba(106,179,243,.22); } .tg-sender-nm { font-size:12px; font-weight:600; color:var(--accent); padding:0 5px; margin-bottom:2px; cursor:pointer; } .tg-sender-nm:hover { text-decoration:underline; } /* ── Avatars ── */ .tg-avatar { width:34px; height:34px; border-radius:50%; flex-shrink:0; overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:#fff; user-select:none; } .tg-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; } .tg-avatar-ph { width:34px; flex-shrink:0; } /* spacer for own messages so bubbles align */ .tg-bubble { border-radius:20px; overflow:hidden; position:relative; box-shadow:var(--shadow-sm); } .tg-row.in .tg-bubble { background:var(--bubble-in); } .tg-row.out .tg-bubble { background:var(--bubble-out); color:#fff; } html[data-theme="light"] .tg-row.out .tg-bubble { color:#0f1b27; } .tg-bubble.tg-stk { background:transparent !important; overflow:visible; box-shadow:none; } .tg-bubble.del .tg-txt { text-decoration:line-through; opacity:.6; } .tg-txt { padding:9px 14px 3px; font-size:14.5px; line-height:1.46; white-space:pre-wrap; word-break:break-word; } .tg-footer { display:flex; align-items:center; justify-content:flex-end; gap:5px; padding:2px 10px 6px; } .tg-time-lbl { font-size:11px; opacity:.55; white-space:nowrap; } .tg-edit-btn { font-size:12px; opacity:.65; cursor:pointer; user-select:none; } .tg-edit-btn:hover { opacity:1; } .tg-del-lbl { font-size:11px; color:var(--red); opacity:.85; white-space:nowrap; font-weight:500; } /* call card inside bubble */ .tg-call-card { display:flex; align-items:center; gap:10px; padding:8px 12px 6px; } .tg-call-ico { width:36px; height:36px; border-radius:50%; background:rgba(106,179,243,.2); display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; } .tg-call-card.missed .tg-call-ico { background:rgba(224,92,92,.2); } .tg-call-type { font-size:13px; font-weight:500; } .tg-call-dur { font-size:11px; color:var(--hint); margin-top:1px; } /* bubble media */ .tg-photo { width:100%; max-height:320px; object-fit:cover; display:block; cursor:pointer; } .tg-vid-wrap { position:relative; cursor:pointer; } .tg-vid-thumb { width:100%; max-height:260px; object-fit:cover; display:block; } .tg-vid-play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:46px; height:46px; border-radius:50%; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; font-size:20px; } .tg-vnote-row { padding:8px 12px 0; } .tg-vnote-bub { position:relative; width:88px; height:88px; cursor:pointer; display:inline-block; } .tg-vnote-bub img { width:88px; height:88px; border-radius:50%; object-fit:cover; border:2px solid color-mix(in srgb,var(--text) 15%,transparent); display:block; } .tg-vnote-ic { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:22px; pointer-events:none; } .tg-audio-row { display:flex; align-items:center; gap:10px; padding:8px 12px 0; min-width:190px; } .tg-play-btn { width:40px; height:40px; border-radius:50%; background:color-mix(in srgb,var(--text) 15%,transparent); border:none; cursor:pointer; color:#fff; font-size:18px; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .15s; } .tg-play-btn:hover { background:color-mix(in srgb,var(--text) 25%,transparent); } .tg-audio-body { flex:1; min-width:0; } .tg-audio-wfm { height:24px; background:color-mix(in srgb,var(--text) 10%,transparent); border-radius:4px; overflow:hidden; } .tg-audio-prog { height:100%; background:color-mix(in srgb,var(--text) 45%,transparent); width:0%; border-radius:4px; transition:width .1s; } .tg-audio-name { font-size:11px; opacity:.6; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tg-stk-el { font-size:56px; padding:6px 8px; display:block; } .tg-stk-img { width:120px; height:120px; object-fit:contain; display:block; } .tg-gif-el { max-width:100%; max-height:200px; display:block; } .tg-doc-row { display:flex; align-items:center; gap:10px; padding:8px 12px; text-decoration:none; } .tg-doc-ic { font-size:30px; flex-shrink:0; } .tg-doc-info { flex:1; min-width:0; } .tg-doc-nm { font-size:13px; font-weight:500; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tg-doc-sz { font-size:11px; opacity:.6; margin-top:1px; } .tg-pend-bub { display:flex; align-items:center; gap:8px; padding:9px 12px; opacity:.7; cursor:pointer; font-size:13px; } /* Offloaded large file card ("open in bot chat") */ .tg-bigfile { display:flex; flex-direction:column; gap:6px; padding:12px 14px; background:color-mix(in srgb,var(--accent) 8%,transparent); border:1px solid color-mix(in srgb,var(--accent) 30%,transparent); border-radius:12px; } .tg-bigfile-hdr { display:flex; align-items:center; gap:8px; font-weight:600; font-size:14px; } .tg-bigfile-sub { font-size:12px; opacity:.72; } .tg-bigfile-exp { font-size:12px; line-height:1.4; opacity:.82; margin:4px 0 2px; } .tg-bigfile-btn { display:inline-flex; align-items:center; gap:6px; background:var(--tg-blue, #0088cc); color:#fff; padding:8px 12px; border:none; border-radius:8px; font-size:13px; font-weight:500; cursor:pointer; text-decoration:none; align-self:flex-start; margin-top:2px; } .tg-bigfile-btn:active { opacity:.85; } .tg-bigfile-btn[disabled] { background:#888; cursor:not-allowed; } .tg-bigfile-hint { font-size:11px; opacity:.6; } .tg-bigfile-hint code { background:rgba(0,0,0,0.06); padding:1px 5px; border-radius:4px; font-size:11px; } /* TTL / view-once */ .tg-ttl-wrap { position:relative; display:block; } .tg-ttl-badge { position:absolute; bottom:6px; right:6px; background:rgba(0,0,0,.58); color:#fff; font-size:11px; padding:2px 7px; border-radius:10px; pointer-events:none; } .tg-ttl-expired { display:flex; align-items:center; gap:7px; padding:9px 12px; font-size:13px; opacity:.65; } /* bubble album */ .tg-album { display:grid; gap:2px; overflow:hidden; } .tg-album.a1 { grid-template-columns:1fr; } .tg-album.a2 { grid-template-columns:1fr 1fr; } .tg-album.a3 { grid-template-columns:1fr 1fr 1fr; } .tg-album.a4, .tg-album.many { grid-template-columns:1fr 1fr; } .tg-album img { width:100%; height:130px; object-fit:cover; display:block; cursor:pointer; } .tg-album.a1 img { height:280px; } .tg-album.a2 img { height:150px; } .tg-alb-vid { position:relative; overflow:hidden; } .tg-alb-vid img { width:100%; height:130px; object-fit:cover; display:block; cursor:pointer; } .tg-alb-vp { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:20px; background:rgba(0,0,0,.5); border-radius:50%; width:36px; height:36px; display:flex; align-items:center; justify-content:center; } .tg-alb-pend { height:130px; background:color-mix(in srgb,var(--text) 5%,transparent); display:flex; align-items:center; justify-content:center; font-size:26px; } /* reactions below bubble */ .tg-reactions { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; cursor:pointer; } .tg-rxn-pill { display:flex; align-items:center; gap:3px; background:rgba(106,179,243,.12); border:1px solid rgba(106,179,243,.25); border-radius:12px; padding:3px 8px; font-size:14px; } .tg-rxn-cnt { font-size:11px; color:var(--accent); font-weight:600; } /* reply quote + forward header (Telegram-style) */ .tg-fwd-hdr { font-size:12px; color:var(--accent); padding:7px 11px 0; cursor:pointer; } .tg-fwd-hdr.noclick { cursor:default; } .tg-fwd-hdr .fwd-nm { font-weight:700; } .tg-reply { margin:7px 11px 0; padding:5px 10px; border-radius:10px; background:color-mix(in srgb,var(--accent) 11%,transparent); border:1px solid color-mix(in srgb,var(--accent) 22%,transparent); cursor:pointer; overflow:hidden; } .tg-reply-name{ font-size:12px; font-weight:600; color:var(--accent); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tg-reply-txt { font-size:12px; color:var(--hint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tg-reply.missing { border-color:color-mix(in srgb,var(--text) 12%,transparent); background:color-mix(in srgb,var(--text) 4%,transparent); cursor:default; display:flex; align-items:center; gap:8px; justify-content:space-between; } .tg-reply-load{ background:rgba(106,179,243,.15); color:var(--accent); border:none; border-radius:8px; padding:3px 9px; font-size:11px; cursor:pointer; flex-shrink:0; } .tg-reply-load:disabled { opacity:.5; } @keyframes jumpFlash { 0% { background:rgba(106,179,243,.40); } 40% { background:rgba(106,179,243,.12); } 60% { background:rgba(106,179,243,.32); } 100% { background:transparent; } } .jump-flash { animation:jumpFlash 2.4s ease-out; border-radius:14px; } /* keep jump targets clear of the sticky header when scrolled into view */ .tg-row { scroll-margin:90px 0 60px; } .jump-back-btn{ position:fixed; bottom:18px; right:14px; z-index:60; background:var(--accent); color:#fff; border:none; border-radius:18px; padding:9px 14px; font-size:13px; box-shadow:0 2px 10px rgba(0,0,0,.4); cursor:pointer; display:none; } .ev-hdr-row { display:flex; justify-content:space-between; align-items:center; gap:6px; } /* history modal mini bubbles */ .hist-version { margin-bottom:16px; } .hist-ver-lbl { font-size:11px; color:var(--hint); margin-bottom:5px; padding:0 2px; } .tg-bubble-mini { border-radius:14px; overflow:hidden; } .tg-bubble-mini.in { background:var(--bubble-in); } .tg-bubble-mini.out { background:var(--bubble-out); margin-left:auto; } .tg-bubble-mini .tg-txt { font-size:13px; } .tg-bubble-mini .tg-footer { padding:1px 8px 6px; } /* ── Own message ── */ .msg-card.own { border-color:color-mix(in srgb,var(--accent) 40%,transparent); } .own-badge { font-size:9px; color:#64b4ff; background:rgba(100,180,255,.15); padding:1px 5px; border-radius:3px; margin-left:4px; } /* ── Checkbox toggle (label wrapper) ── */ .tgl { position:relative; display:inline-block; width:40px; height:22px; flex-shrink:0; } .tgl input { opacity:0; width:0; height:0; } .tgl-sl { position:absolute; cursor:pointer; inset:0; border-radius:11px; background:color-mix(in srgb,var(--text) 10%,transparent); transition:background .2s; } .tgl-sl::after{ content:''; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform .2s; } .tgl input:checked + .tgl-sl { background:var(--green); } .tgl input:checked + .tgl-sl::after{ transform:translateX(18px); } /* ── States ── */ .state-view { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 20px; text-align:center; color:var(--hint); } .state-icon { font-size:36px; margin-bottom:10px; } .spin { width:22px; height:22px; border:2px solid color-mix(in srgb,var(--text) 10%,transparent); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } } .load-more { text-align:center; padding:10px; color:var(--accent); cursor:pointer; font-size:12px; } /* ── Tab bar ── */ .tab-bar { display:flex; flex-shrink:0; background:var(--bg2); border-bottom:2px solid color-mix(in srgb,var(--text) 6%,transparent); } .tab { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:9px 0 8px; text-align:center; font-size:13px; font-weight:500; cursor:pointer; color:var(--hint); border-bottom:2px solid transparent; margin-bottom:-2px; transition:color .15s, border-color .15s; } .tab.active { color:var(--text); border-bottom-color:var(--accent); } .tab-ic { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; } /* ── Stories container ── */ #storiesView { flex:1; display:flex; flex-direction:column; overflow:hidden; } /* ── Person ring strip ── */ .s-strip { display:flex; overflow-x:auto; padding:10px 10px 8px; gap:2px; background:var(--bg2); border-bottom:1px solid color-mix(in srgb,var(--text) 6%,transparent); flex-shrink:0; scrollbar-width:none; } .s-strip::-webkit-scrollbar { display:none; } .s-strip-item { display:flex; flex-direction:column; align-items:center; gap:5px; padding:0 5px; cursor:pointer; flex-shrink:0; min-width:0; } .s-ring { width:54px; height:54px; border-radius:50%; padding:2.5px; background:linear-gradient(135deg,#405de6 0%,#833ab4 33%,#e1306c 66%,#fd1d1d 100%); position:relative; transition:transform .15s; } .s-ring:active { transform:scale(.92); } .s-ring.s-ring-all { background:color-mix(in srgb,var(--text) 12%,transparent); } .s-ring.s-ring-del { background:linear-gradient(135deg,rgba(224,92,92,.7),rgba(180,30,30,.8)); } .s-ring.s-ring-sel { box-shadow:0 0 0 2.5px var(--bg2), 0 0 0 4.5px var(--accent); } .s-ring-in { width:100%; height:100%; border-radius:50%; border:2.5px solid var(--bg2); overflow:hidden; background:var(--bg2); display:flex; align-items:center; justify-content:center; } .s-ring .tg-avatar { width:100%; height:100%; border-radius:50%; font-size:17px; } .s-cnt { position:absolute; bottom:-1px; right:-1px; background:var(--accent); color:#fff; font-size:9px; font-weight:700; min-width:16px; height:16px; border-radius:8px; padding:0 3px; display:flex; align-items:center; justify-content:center; border:2px solid var(--bg2); } .s-strip-nm { font-size:10px; color:var(--hint); max-width:58px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center; } .s-strip-item.s-sel .s-strip-nm { color:var(--text); font-weight:600; } /* ── Stories list ── */ .stories-list { flex:1; overflow-y:auto; padding:10px 14px; } /* ── Story card ── */ .story-card { background:var(--bg2); border-radius:16px; margin:0 0 12px; overflow:hidden; position:relative; box-shadow:0 2px 10px rgba(0,0,0,.3); } .story-card.s-is-del { opacity:.62; } /* media area */ .s-media-wrap { position:relative; background:#111; } .s-media-wrap img { width:100%; display:block; max-height:58vh; object-fit:cover; cursor:pointer; } .s-media-wrap video { width:100%; display:block; max-height:58vh; object-fit:cover; background:#000; } .s-media-grad { position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,transparent 30%,transparent 55%,rgba(0,0,0,.55) 100%); } /* overlay header on media */ .s-ov-hdr { position:absolute; top:0; left:0; right:0; padding:11px 12px; display:flex; align-items:center; gap:8px; z-index:2; } .s-ov-hdr .tg-avatar { width:32px; height:32px; font-size:13px; flex-shrink:0; border:1.5px solid color-mix(in srgb,var(--text) 30%,transparent); } .s-ov-nm { font-size:13px; font-weight:600; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.7); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .s-ov-dt { font-size:11px; color:color-mix(in srgb,var(--text) 78%,transparent); text-shadow:0 1px 3px rgba(0,0,0,.6); flex-shrink:0; } /* badges — top right of media */ .s-ov-bdgs { position:absolute; top:10px; right:11px; display:flex; flex-direction:column; align-items:flex-end; gap:4px; z-index:2; } .s-bdg { font-size:11px; font-weight:600; padding:3px 9px; border-radius:20px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } .s-bdg-del { background:rgba(224,92,92,.85); color:#fff; } .s-bdg-frnd { background:rgba(52,199,89,.82); color:#fff; } .s-bdg-pin { background:rgba(106,179,243,.82); color:#fff; } /* flat header (when no media) */ .s-flat { display:flex; align-items:center; gap:11px; padding:12px 14px 10px; } .s-flat .tg-avatar { width:40px; height:40px; font-size:16px; flex-shrink:0; } .s-flat-info { flex:1; min-width:0; } .s-flat-nm { font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .s-flat-dt { font-size:11px; color:var(--hint); margin-top:2px; } .s-flat-bdgs { display:flex; gap:4px; flex-wrap:wrap; margin-top:7px; } .s-flat-bdg { font-size:11px; padding:2px 8px; border-radius:10px; } .s-flat-bdg-del { background:rgba(224,92,92,.18); color:var(--red); } .s-flat-bdg-frnd { background:rgba(52,199,89,.15); color:var(--green); } .s-flat-bdg-pin { background:rgba(106,179,243,.15); color:var(--accent); } /* no-file placeholder */ .s-no-file { display:flex; align-items:center; justify-content:center; gap:8px; min-height:80px; color:var(--hint); font-size:13px; background:color-mix(in srgb,var(--text) 3%,transparent); margin:0 12px 12px; border-radius:10px; } /* caption */ .s-caption { padding:9px 14px 13px; font-size:13px; line-height:1.55; white-space:pre-wrap; color:var(--text); border-top:1px solid color-mix(in srgb,var(--text) 5%,transparent); } /* ── Lightbox ── */ .lb { display:none; position:fixed; inset:0; background:rgba(0,0,0,.93); z-index:1000; align-items:center; justify-content:center; flex-direction:column; } .lb.open { display:flex; } .lb img, .lb video { max-width:95vw; max-height:85vh; border-radius:7px; } .lb-close { position:absolute; top:14px; right:14px; font-size:26px; cursor:pointer; color:#fff; } .lb-dl { margin-top:10px; color:var(--accent); font-size:12px; cursor:pointer; text-decoration:underline; } /* ── Modal overlay ── */ .modal-bg { display:none; position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:200; align-items:flex-end; justify-content:center; } .modal-bg.open { display:flex; } .modal { background:var(--bg); border-radius:20px 20px 0 0; width:100%; max-width:600px; max-height:90vh; overflow-y:auto; padding:20px 16px 32px; } .modal-title { font-size:17px; font-weight:700; margin-bottom:16px; } .modal-close { float:right; font-size:20px; cursor:pointer; color:var(--hint); } /* ── Settings panel ── */ .panel { display:none; position:fixed; inset:0; background:var(--bg); z-index:100; flex-direction:column; } .panel.open { display:flex; } .panel-hdr { background:var(--bg2); padding:12px 14px; border-bottom:1px solid color-mix(in srgb,var(--text) 6%,transparent); display:flex; align-items:center; gap:12px; flex-shrink:0; } .panel-hdr h2 { font-size:16px; font-weight:700; flex:1; } .panel-body { flex:1; overflow-y:auto; padding:12px 14px; } /* ── Buttons ── */ .btn { display:block; width:100%; padding:12px; border-radius:var(--rs); border:none; font-size:14px; font-weight:600; cursor:pointer; text-align:center; transition:opacity .15s; } .btn:active { opacity:.8; } .btn-primary { background:var(--accent); color:#fff; } .btn-outline { background:transparent; border:1px solid color-mix(in srgb,var(--text) 20%,transparent); color:var(--text); } .btn-danger { background:rgba(224,92,92,.2); color:var(--red); border:1px solid rgba(224,92,92,.3); } .btn-sm { padding:7px 14px; font-size:12px; display:inline-block; width:auto; } /* ── Form ── */ .form-group { margin-bottom:14px; } .form-label { font-size:12px; color:var(--hint); margin-bottom:5px; display:block; } .form-input { width:100%; background:var(--bg2); border:1px solid color-mix(in srgb,var(--text) 10%,transparent); border-radius:var(--rs); color:var(--text); padding:11px 12px; font-size:15px; outline:none; } .form-input:focus { border-color:var(--accent); } .form-hint { font-size:11px; color:var(--hint); margin-top:5px; } /* ── Method picker ── */ .method-cards { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px; } .method-card { padding:16px 12px; border-radius:var(--r); border:2px solid color-mix(in srgb,var(--text) 10%,transparent); cursor:pointer; text-align:center; transition:all .15s; } .method-card.sel { border-color:var(--accent); background:rgba(106,179,243,.08); } .method-card .mc-icon { font-size:28px; margin-bottom:6px; } .method-card .mc-name { font-size:13px; font-weight:600; } .method-card .mc-hint { font-size:11px; color:var(--hint); margin-top:3px; } /* ── QR box ── */ .qr-box { display:flex; flex-direction:column; align-items:center; gap:14px; padding:10px 0; } .qr-canvas { border-radius:12px; background:#fff; padding:10px; } .qr-hint { font-size:12px; color:var(--hint); text-align:center; max-width:260px; line-height:1.5; } /* QR stage — fixed-size frame that holds either the loading skeleton or the rendered QR. Same footprint in both states so the layout never jumps. */ .qr-stage { position:relative; width:220px; height:220px; border-radius:14px; overflow:hidden; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 18px rgba(0,0,0,.18); } .qr-stage canvas, .qr-stage img { display:block; border-radius:8px; } /* shimmering skeleton — the "we're fetching your QR" placeholder */ .qr-skel { position:absolute; inset:0; background:linear-gradient(110deg,#e9edf2 8%,#f6f8fb 22%,#e9edf2 36%); background-size:200% 100%; animation:qrShimmer 1.25s linear infinite; } .qr-spin { position:absolute; width:48px; height:48px; border:4px solid rgba(0,0,0,.10); border-top-color:var(--accent); border-radius:50%; animation:qrSpin .8s linear infinite; } /* a soft scan line sweeping the frame — reads as "loading / linking" */ .qr-scan { position:absolute; left:0; right:0; height:42px; pointer-events:none; background:linear-gradient(180deg,rgba(36,129,204,0) 0%,rgba(36,129,204,.22) 50%,rgba(36,129,204,0) 100%); animation:qrScan 1.6s ease-in-out infinite; } @keyframes qrShimmer { to { background-position:-200% 0; } } @keyframes qrSpin { to { transform:rotate(360deg); } } @keyframes qrScan { 0%{transform:translateY(-46px)} 50%{transform:translateY(176px)} 100%{transform:translateY(-46px)} } /* the real QR fades + scales in once it arrives */ .qr-appear { animation:qrAppear .45s cubic-bezier(.2,.75,.3,1); } @keyframes qrAppear { from{opacity:0;transform:scale(.82)} to{opacity:1;transform:scale(1)} } /* error / expired overlay inside the stage */ .qr-veil { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; padding:14px; background:rgba(20,22,26,.78); color:#fff; font-size:13px; line-height:1.4; backdrop-filter:blur(2px); } .qr-veil .qr-veil-ico { font-size:30px; } /* inline note under the QR (last-code warning, daily-limit hint) */ .qr-note { font-size:12.5px; line-height:1.5; border-radius:10px; padding:10px 12px; margin-top:12px; text-align:center; } .qr-note-warn { background:rgba(240,170,40,.13); color:#e8a838; border:1px solid rgba(240,170,40,.30); } /* ── Steps ── */ .steps { display:flex; gap:6px; margin-bottom:20px; } .step { flex:1; height:3px; border-radius:2px; background:color-mix(in srgb,var(--text) 10%,transparent); } .step.done { background:var(--accent); } /* ── Chat picker (for connect) ── */ .dial-list { max-height:300px; overflow-y:auto; border:1px solid color-mix(in srgb,var(--text) 8%,transparent); border-radius:var(--rs); } .dial-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid color-mix(in srgb,var(--text) 5%,transparent); cursor:pointer; } .dial-item:last-child { border:none; } .dial-item:hover { background:color-mix(in srgb,var(--text) 4%,transparent); } .dial-check { width:18px; height:18px; border-radius:4px; border:2px solid color-mix(in srgb,var(--text) 30%,transparent); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:11px; } .dial-check.checked { background:var(--accent); border-color:var(--accent); } .dial-name { flex:1; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .dial-type { font-size:10px; color:var(--hint); } /* ── Manage chats ── */ .chat-item { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid color-mix(in srgb,var(--text) 5%,transparent); } .chat-item:last-child { border:none; } .chat-info { flex:1; min-width:0; } .chat-title { font-size:13px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .chat-meta { font-size:11px; color:var(--hint); margin-top:2px; } .bf-bar { height:4px; background:color-mix(in srgb,var(--text) 8%,transparent); border-radius:2px; margin-top:5px; overflow:hidden; } .bf-bar-fill{ height:100%; background:var(--green); border-radius:2px; transition:width .4s ease; } .bf-bar-fill.idx { background:linear-gradient(90deg, var(--green) 30%, #5cd68f 70%); animation:bfPulse 1.6s linear infinite; } @keyframes bfPulse { 0%{opacity:.6} 50%{opacity:1} 100%{opacity:.6} } .bf-label { font-size:10px; color:var(--hint); margin-top:3px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .bf-btn { font-size:10px; padding:3px 8px; border-radius:6px; border:none; cursor:pointer; background:color-mix(in srgb,var(--text) 10%,transparent); color:var(--text); } .bf-btn.start { background:var(--green); color:#fff; } .bf-btn.stop { background:rgba(255,90,90,.8); color:#fff; } .bf-btn:disabled { opacity:.4; cursor:not-allowed; } .toggle { width:40px; height:22px; border-radius:11px; background:color-mix(in srgb,var(--text) 10%,transparent); border:none; cursor:pointer; position:relative; transition:background .2s; flex-shrink:0; } .toggle.on { background:var(--green); } .toggle::after { content:''; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform .2s; } .toggle.on::after { transform:translateX(18px); } /* Automation settings card */ .auto-card { background:var(--bg2); border-bottom:1px solid color-mix(in srgb,var(--text) 6%,transparent); } .auto-hdr { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:10px 14px; cursor:pointer; font-weight:600; font-size:14px; user-select:none; } .auto-acc { font-weight:400; font-size:11px; color:var(--hint); } .auto-body { padding:0 14px 8px; } .auto-sec { padding:10px 0; border-top:1px solid color-mix(in srgb,var(--text) 5%,transparent); } .auto-row { display:flex; justify-content:space-between; align-items:center; gap:10px; } .auto-t { font-size:13px; font-weight:600; } .auto-h { font-size:11px; color:var(--hint); margin-top:2px; } .auto-sub { margin-top:8px; } .auto-lbl { font-size:11px; color:var(--hint); margin:8px 0 4px; } .auto-chips { display:flex; flex-wrap:wrap; gap:6px; } .auto-chip { display:inline-flex; align-items:center; gap:5px; font-size:12px; padding:4px 9px; border:1px solid color-mix(in srgb,var(--text) 15%,transparent); border-radius:14px; cursor:pointer; } .auto-chip input { margin:0; } .auto-chk { display:flex; align-items:center; gap:7px; font-size:12px; margin-top:10px; cursor:pointer; } .auto-delay { display:flex; align-items:center; gap:6px; font-size:12px; flex-wrap:wrap; } .auto-delay input, .auto-kw { background:color-mix(in srgb,var(--text) 6%,transparent); color:inherit; border:1px solid color-mix(in srgb,var(--text) 15%,transparent); border-radius:7px; } .auto-delay input { width:62px; padding:4px 6px; } .auto-kw { width:100%; padding:7px 10px; font-size:13px; box-sizing:border-box; margin-top:4px; } .auto-warn { font-size:11px; color:#e9b44c; margin-top:9px; line-height:1.4; } .auto-lock { font-size:11px; color:var(--hint); margin-top:6px; } .ctl-tgl { display:inline-flex; align-items:center; gap:3px; margin-right:6px; font-size:12px; } .ctl-ic { width:15px; height:15px; fill:none; stroke:var(--hint); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; } .ct-tic { width:14px; height:14px; vertical-align:-2.5px; margin-right:5px; fill:none; stroke:var(--hint); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; } /* ── Live indicator ── */ .live-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--green); margin-right:4px; animation:pulse 2s infinite; } @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} } /* ── Error toast ── */ .toast { position:fixed; bottom:34px; left:50%; transform:translateX(-50%) translateY(8px); background:rgba(224,92,92,.95); color:#fff; padding:14px 22px; border-radius:14px; font-size:15px; line-height:1.35; font-weight:500; z-index:9999; pointer-events:none; max-width:86vw; text-align:center; box-shadow:0 6px 24px rgba(0,0,0,.45); opacity:0; transition:opacity .3s, transform .3s; } .toast.show { opacity:1; transform:translateX(-50%) translateY(0); } @media (max-width:400px) { .sidebar { width:60px; } .s-meta, .s-owner { display:none; } } /* ── Health tab ── */ .h-card { background:var(--bg2); border-radius:var(--r); padding:14px; margin-bottom:12px; } .h-card-hdr { display:flex; align-items:center; gap:8px; margin-bottom:12px; } .h-card-hdr .name { font-size:15px; font-weight:700; flex:1; } .h-card-hdr .badge { font-size:11px; padding:2px 8px; border-radius:20px; font-weight:600; } .badge-ok { background:rgba(76,175,119,.18); color:var(--green); } .badge-err { background:rgba(224,92, 92,.18); color:var(--red); } .h-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; } .h-metric { background:var(--bg); border-radius:var(--rs); padding:10px 12px; } .h-metric .val { font-size:20px; font-weight:700; line-height:1.1; } .h-metric .lbl { font-size:11px; color:var(--hint); margin-top:2px; } .h-metric .val.warn { color:var(--orange); } .h-metric .val.err { color:var(--red); } .h-metric .val.ok { color:var(--green); } .h-events-hdr { font-size:12px; font-weight:600; color:var(--hint); text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px; cursor:pointer; user-select:none; } .h-events-hdr:hover { color:var(--text); } .h-event { display:flex; gap:8px; padding:6px 0; border-bottom:1px solid color-mix(in srgb,var(--text) 5%,transparent); font-size:12px; } .h-event:last-child { border-bottom:none; } .h-event .ev-icon { font-size:14px; flex-shrink:0; width:20px; text-align:center; } .h-event .ev-body { flex:1; } .h-event .ev-time { color:var(--hint); font-size:11px; } .h-event .ev-detail { color:var(--hint); margin-top:1px; } .h-refresh { display:flex; justify-content:flex-end; margin-bottom:8px; } .h-refresh button { background:none; border:1px solid color-mix(in srgb,var(--text) 12%,transparent); border-radius:6px; padding:4px 12px; font-size:12px; color:var(--hint); cursor:pointer; } .h-refresh button:hover { color:var(--text); border-color:color-mix(in srgb,var(--text) 25%,transparent); } /* ── Stage 2: slim stats + feed grouping ── */ .stats { display:flex; flex-wrap:wrap; gap:3px 14px; padding:7px 14px; align-items:baseline; font-size:12px; } .stat { text-align:left; color:var(--hint); white-space:nowrap; } .stat-num { font-size:13px; font-weight:700; color:var(--accent); margin-right:3px; } .stat-lbl { font-size:12px; color:var(--hint); margin-top:0; } .tg-row.grouped .tg-chat-lbl { display:none; } .tg-row.name-grouped .tg-sender-nm { display:none; } .day-sep { display:flex; justify-content:center; margin:12px 0 8px; } .day-sep > span { font-size:11.5px; font-weight:600; color:var(--hint); background:var(--panel); border:1px solid var(--line); padding:4px 13px; border-radius:999px; box-shadow:var(--shadow-sm); } /* ── active-filters summary + «Больше фильтров» badge ── */ .filt-badge { min-width:18px; height:18px; padding:0 5px; border-radius:99px; background:var(--accent); color:#fff; font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; } .active-f { display:flex; align-items:center; gap:8px; padding:7px 4px 2px; font-size:12.5px; color:var(--hint); flex-wrap:wrap; } .af-reset { font-size:12.5px; font-weight:600; color:var(--accent); background:none; border:none; cursor:pointer; } /* «Больше фильтров» — compact pill (left) + hide bots/channels right next to it */ /* «Больше фильтров» (left) + hide bots/channels (pinned right) on one line */ .filt-actions { display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:nowrap; } .morefilt-btn { display:inline-flex; align-items:center; gap:7px; flex-shrink:0; white-space:nowrap; padding:7px 12px; border-radius:11px; font-size:13px; font-weight:600; border:1px solid var(--line); background:var(--surface); color:var(--text); cursor:pointer; transition:background .18s, border-color .18s, color .18s; } .morefilt-btn:active { transform:scale(.98); } .morefilt-btn .mf-funnel { color:var(--hint); flex-shrink:0; } .morefilt-btn.active { color:var(--accent); border-color:color-mix(in srgb,var(--accent) 45%,transparent); background:color-mix(in srgb,var(--accent) 8%,transparent); } .morefilt-btn.active .mf-funnel { color:var(--accent); } .morefilt-btn.open { color:var(--accent); border-color:color-mix(in srgb,var(--accent) 45%,transparent); } .mf-chev { flex-shrink:0; color:var(--hint); transition:transform .28s cubic-bezier(.22,1,.36,1); } .morefilt-btn.open .mf-chev { transform:rotate(180deg); color:var(--accent); } /* inline accordion reveal (grid 0fr→1fr, same idea as the media subchips) */ .fsheet { display:grid; grid-template-rows:0fr; transition:grid-template-rows .28s cubic-bezier(.22,1,.36,1); } .fsheet.open { grid-template-rows:1fr; } .fsheet-body { overflow:hidden; min-height:0; } .fsheet-body .fchips-row { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:8px; } .fsheet-body .fchips-row:first-child .fchips-lbl { margin-top:6px; } .fsheet-body .fchips-row:last-child { margin-bottom:6px; } .fsheet-body .fchips-lbl { width:100%; margin:10px 0 4px; text-transform:none; letter-spacing:0; font-size:12.5px; font-weight:650; color:var(--hint); } .fsheet-body .fdate { color-scheme:inherit; } .fsheet-body .chips, .fsheet-body .subchips { margin-bottom:6px; } /* uniform chat-row type icons (same size as avatars) */ .s-typeicon { background:color-mix(in srgb, var(--accent) 20%, var(--panel)); overflow:hidden; } .s-typeicon svg { width:54%; height:54%; fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .s-typeicon.ti-channel { background:color-mix(in srgb, var(--orange) 20%, var(--panel)); } .s-typeicon.ti-channel svg { stroke:var(--orange); } .s-typeicon.ti-bot { background:color-mix(in srgb, var(--green) 22%, var(--panel)); } .s-typeicon.ti-bot svg { stroke:var(--green); } .s-typeicon.ti-all { background:color-mix(in srgb, var(--text) 10%, transparent); } .s-typeicon.ti-all svg { stroke:var(--hint); } /* sheet: uniform period grid + modern date fields; reset lives under search */ .fsheet-body #fClearAll { display:none !important; } /* Тип + Период: small pills matching the main chips — no bulky grid buttons */ .fsheet-body .qp-chip { display:inline-flex; align-items:center; justify-content:center; padding:5px 11px; border-radius:20px; font-size:12px; font-weight:600; border:1px solid var(--line); background:var(--surface); color:var(--hint); cursor:pointer; } .fsheet-body .qp-chip.active { background:var(--accent); border-color:var(--accent); color:#fff; } .fsheet-body .fdate { background:var(--surface); border:1px solid var(--line); border-radius:20px; color:var(--text); padding:5px 10px; font-size:12px; color-scheme:inherit; } .fsheet-body .fdate-sep { color:var(--faint); align-self:center; } .fsheet-body .chip { display:inline-flex; align-items:center; gap:5px; padding:5px 9px; border-radius:20px; font-size:12px; font-weight:600; border:1px solid var(--line); background:var(--surface); color:var(--hint); } .fsheet-body .chip.active { background:var(--accent); border-color:var(--accent); color:#fff; } .fsheet-body .chip .chip-ic { width:13px; height:13px; } .chip-ic { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; } /* modern toggle switches (hide section) */ .ftgl { width:100%; display:flex; align-items:center; justify-content:space-between; padding:9px 2px; } .ftgl-tx { font-size:14px; } .sw { position:relative; width:44px; height:26px; flex-shrink:0; } .sw input { opacity:0; width:0; height:0; position:absolute; } .sw-tr { position:absolute; inset:0; border-radius:99px; background:var(--line-2); transition:background .2s; cursor:pointer; } .sw-tr::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:transform .22s cubic-bezier(.22,1,.36,1); box-shadow:0 1px 3px rgba(0,0,0,.3); } .sw input:checked + .sw-tr { background:var(--accent); } .sw input:checked + .sw-tr::after { transform:translateX(18px); } /* hide bots/channels — compact icon toggles, right next to «Больше фильтров» */ #hideBar.hide-bar { display:flex; align-items:center; gap:6px; margin-left:auto; padding:0; background:none; border:none; flex-wrap:nowrap; flex-shrink:0; } #hideBar .hb-lbl { font-size:11.5px; font-weight:600; color:var(--hint); text-transform:none; letter-spacing:0; white-space:nowrap; } #hideBar .chip { display:inline-flex; align-items:center; justify-content:center; gap:0; } #hideBar .hb-chip { padding:6px 8px; border-radius:9px; } #hideBar .hb-chip .chip-ic { width:16px; height:16px; } #hideBar .hb-help { width:24px; height:24px; padding:0; border:none; background:none; color:var(--faint); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; border-radius:50%; transition:color .18s, background .18s; } #hideBar .hb-help svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; } #hideBar .hb-help:hover { color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); } /* folders strip — distinct «folder tabs» identity (accent-tinted), not generic filter chips */ .folders-strip { display:flex; align-items:center; gap:7px; overflow-x:auto; scrollbar-width:none; padding:9px 0 3px; } .folders-strip::-webkit-scrollbar { display:none; } .folders-lbl { display:inline-flex; align-items:center; gap:5px; flex-shrink:0; font-size:10.5px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.04em; padding-right:1px; opacity:.85; } .folders-lbl svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .folders-strip .chip { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; flex-shrink:0; padding:6px 11px; border-radius:9px; background:color-mix(in srgb,var(--accent) 10%,transparent); border:1px solid color-mix(in srgb,var(--accent) 22%,transparent); color:var(--text); font-size:12.5px; } .folders-strip .chip .chip-ic { stroke:var(--accent); } .folders-strip .chip.active { background:var(--accent); border-color:var(--accent); color:#fff; } .folders-strip .chip.active .chip-ic { stroke:#fff; } /* state filter — content-sized chips with icons (different widths, like prod, new style) */ #stateSeg { display:flex; align-items:center; flex-wrap:wrap; gap:5px; margin-top:8px; } #stateSeg .chip { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; padding:5px 9px; border-radius:20px; border:1px solid var(--line); background:var(--surface); color:var(--hint); font-size:11.5px; font-weight:600; } #stateSeg .chip .chip-ic { display:inline-block; width:13px; height:13px; flex-shrink:0; } #stateSeg .chip.active { background:var(--accent); border-color:var(--accent); color:#fff; } #stateSeg .chip.active .chip-ic { stroke:#fff; } /* a touch more room on slightly wider phones */ @media (min-width:412px){ #stateSeg .chip { padding:5px 11px; gap:5px; font-size:12px; } }