/* Telegram-style multi-select for messages. Module-scoped: .kc-selecting-main / .kc-selecting-thread land on while a scope is active. Per-scope CSS scopes effects to the chat area or the thread side-panel so the other scope keeps working as normal. - .selecting on the scroller container suppresses hover-actions / reactions / right-click + adds a selection-circle to each row. - .message-group.selected gets the accent fill. - .kc-select-bar replaces the composer in its scope. */ /* ── Hide composer per active scope, show the bar ─────────────────── */ body.kc-selecting-main .composer { display: none; } body.kc-selecting-thread .thread-panel-composer { display: none; } .kc-select-bar { display: none; } .kc-select-bar.visible { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md) var(--space-lg); background: var(--surface); border-top: 1px solid var(--border-mid); } .kc-select-bar-count { flex: 1; text-align: center; font-size: var(--font-md); color: var(--ink); } .kc-select-bar-btn { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-md); background: transparent; border: 0; border-radius: var(--radius-s); cursor: pointer; font: inherit; font-size: var(--font-md); color: var(--ink); transition: background var(--transition); } .kc-select-bar-btn:hover { background: var(--deep); } .kc-select-bar-btn--danger { color: var(--coral); } .kc-select-bar-btn--accent { color: var(--accent); } .kc-select-bar-btn[disabled] { opacity: 0.5; cursor: not-allowed; } /* Placeholder keeps the three-column grid stable when one of the actions is hidden (Удалить when not all mine, Переслать when scope is not DM). Same width as the smallest button. */ .kc-select-bar-btn-placeholder { display: inline-block; width: 92px; } .kc-select-bar-close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: transparent; border: 0; border-radius: var(--radius-s); cursor: pointer; color: var(--ink-secondary); transition: background var(--transition), color var(--transition); } .kc-select-bar-close:hover { background: var(--deep); color: var(--ink); } /* ── Per-row selection state ──────────────────────────────────────── */ /* Hide hover-actions, reactions stay visible but non-clickable — user is in selection mode, the click on a message-group should toggle, not bubble into a reaction toggle. */ .selecting .message-actions { display: none !important; } .selecting .reaction { pointer-events: none; } .selecting .msg-thread-preview { pointer-events: none; } /* Selection circle: empty by default, filled-with-check when .message-group.selected. Sits in the right gutter, vertically centered against the avatar. */ .selecting .message-group { cursor: pointer; position: relative; } .selecting .message-group::after { content: ""; position: absolute; top: 50%; right: var(--space-md); transform: translateY(-50%); width: 22px; height: 22px; border-radius: var(--radius-full); border: 2px solid var(--ink-ghost); background: transparent; pointer-events: none; transition: background var(--transition), border-color var(--transition); } .selecting .message-group.selected::after { /* SVG background instead of a `✓` glyph — the Unicode check character renders off-centre in most system fonts (the visual mass sits below the em-box midline) which is what made the tick look low and right of centre against the circle. */ content: ""; background: var(--accent) url('data:image/svg+xml;utf8,') center/12px 12px no-repeat; border-color: var(--accent); } /* Selected row gets the accent-soft fill so it pops without conflicting with .context-active (which uses --deep). */ .selecting .message-group.selected { background: var(--accent-soft); } /* Suppress system rows (we don't allow them in the selection set; _isSelectable() in select-mode.js ignores them on click — but visual cues should also stay off). */ .selecting .system-message, .selecting .invite-card { cursor: default; } .selecting .system-message::after, .selecting .invite-card::after { display: none; }