/* ============================================================
MAX Comments · Redesign v7 · production CSS (handoff)
Mobile-first 360–414. Light + dark. Soft mesh background only.
Source: Claude Design handoff bundle 2026-05-14.
See REDESIGN_PLAN.md for migration phases.
============================================================ */
/* Phase 4 cleanup: kill the legacy doodle bg-light.png/bg-dark.png from
when redesign is active. On wide viewports, body bg was visible
outside #app's 600px max-width — now matches the mesh tone. */
body:has(.ma-bg-mesh.ma-light) {
background-image: none !important;
background-color: #F3F1FA;
}
body:has(.ma-bg-mesh.ma-dark) {
background-image: none !important;
background-color: #0A0918;
}
/* Hotfix v9 (15.05.2026): Save button accent + iOS long-press selection
------------------------------------------------------------------- */
/* Save button was rendering as plain button on iOS. Force accent purple
with !important so legacy .btn-primary doesn't take over. */
.ma-btn-primary {
background: var(--accent) !important;
color: #fff !important;
border: none !important;
}
.ma-btn-primary:active { background: var(--accent-press) !important; }
/* iOS WebView long-press triggers text selection + callout menu even
when user-select:none is set. Add -webkit-touch-callout:none on the
whole .ma scope and explicitly on ctx-overlay clones (where name +
reply-quote were getting highlighted blue with selection handles). */
.ma { -webkit-touch-callout: none; }
.ma .ma-msg-name, .ma .ma-reply-quote-name, .ma .ma-badge,
.ma .comment-time, .ma .ma-msg-meta, .ma .ma-msg-head {
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
.ctx-bubble, .ctx-bubble *, .ma-ctx-bubble-wrap, .ma-ctx-bubble-wrap * {
-webkit-touch-callout: none !important;
-webkit-user-select: none !important;
user-select: none !important;
}
/* Hotfix v8 (15.05.2026): sheet padding + visible secondary buttons
------------------------------------------------------------------- */
/* Settings sheet sticking to left edge — .ma-sheet was overriding
.bottom-sheet horizontal padding to 0. Restore inner padding while
keeping the new vertical paddings + safe-area-inset. */
.bottom-sheet.ma-sheet {
padding: 8px 16px calc(env(safe-area-inset-bottom, 0) + 12px);
}
.bottom-sheet.ma-sheet .ma-post-actions {
margin: 0 -8px; /* compensate so post-action buttons keep full-width feel */
}
/* Secondary buttons (Cancel, etc.) were almost invisible — bg was
var(--bg-pressed) = rgba(11,13,26,0.05) ≈ 5% black on white. Strengthen
with a visible border AND darker bg. */
.ma-btn-secondary {
background: var(--bubble) !important;
color: var(--text) !important;
border: 1px solid var(--line-strong) !important;
}
.ma-btn-secondary:active {
background: var(--bg-pressed) !important;
}
/* Hotfix v7 (15.05.2026): visible close buttons + edit overlay safety
------------------------------------------------------------------- */
/* Profile card — add close × in top-right of card */
.profile-card { position: relative; }
.profile-card-close {
position: absolute;
top: 8px; right: 8px;
width: 32px; height: 32px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--bg-pressed, rgba(0,0,0,0.05));
color: var(--text);
border: none;
cursor: pointer;
z-index: 2;
}
.profile-card-close svg { width: 16px; height: 16px; }
.profile-card-close:active { background: var(--line-strong, rgba(0,0,0,0.1)); }
/* Profile card action buttons with SVG icons */
.profile-card-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.profile-card-actions .ma-btn { display: flex; align-items: center; justify-content: center; gap: 8px; flex: 1; }
.profile-card-actions .ma-btn svg { width: 16px; height: 16px; }
/* Bottom-sheet close × — top-right of sheet */
.ma-sheet-close {
position: absolute;
top: 6px; right: 6px;
width: 32px; height: 32px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--bg-pressed);
color: var(--text);
border: none;
cursor: pointer;
z-index: 2;
}
.ma-sheet-close svg { width: 16px; height: 16px; }
.ma-sheet-close:active { background: var(--line-strong); }
.bottom-sheet, .ma-sheet { position: relative; }
/* Edit-overlay: ensure Save/Cancel sticky at bottom, ABOVE keyboard.
On mobile WebView, when keyboard opens, the overlay's bottom area can be
covered. Solution: put Save/Cancel as ABSOLUTE bottom-fixed inside overlay
and make textarea scrollable above them. */
.ma-edit-overlay {
padding: 0 !important;
}
.ma-edit-overlay .ma-edit-head {
padding: 12px 14px;
border-bottom: 1px solid var(--line);
}
.ma-edit-overlay .ma-edit-area {
margin: 8px 12px;
min-height: 120px;
max-height: calc(100vh - 280px);
}
.ma-edit-overlay .ma-edit-actions {
padding: 10px 14px calc(env(safe-area-inset-bottom, 0) + 10px);
background: var(--bg-elev);
border-top: 1px solid var(--line);
flex-shrink: 0;
}
/* Hotfix v5 (post-deploy 15.05.2026):
Safety max-widths so floating overlays don't escape the viewport. */
.ctx-reactions, .ma-ctx-rx {
max-width: 320px;
box-sizing: border-box;
overflow-x: auto;
scrollbar-width: none;
}
.ctx-reactions::-webkit-scrollbar, .ma-ctx-rx::-webkit-scrollbar { display: none; }
/* Header SVG icon size */
.ma-header { min-height: 48px; }
.ma-header .header-icon svg { display: block; }
.ma-header .header-icon { display: inline-flex; align-items: center; flex-shrink: 0; color: var(--accent); }
/* Phase 6 header: .ma-header-text column оборачивает title + count, header-icons
переключён с position:absolute (legacy style.css) на flex-item чтобы не
оверлапать count. */
.ma-header .ma-header-text {
flex: 1; min-width: 0;
display: flex; flex-direction: column;
justify-content: center;
gap: 1px;
}
.ma-header .header-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ma-header #channel-name {
font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ma-header #comments-count {
font-size: 11.5px; color: var(--text-2); line-height: 1.2;
font-variant-numeric: tabular-nums;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ma-header .header-icons {
position: static; transform: none;
display: flex; align-items: center; gap: 4px;
flex-shrink: 0;
}
.ma-header .header-icons .ma-icon-btn { width: 32px; height: 32px; }
/* Channel-mode toggle hint — облачко над кнопкой 📢, выезжает наверх-вправо.
Префикс .ma поднимает специфичность до (0,2,0) > .ma > * (0,1,1) чтобы
position: fixed не был перекрыт на position: relative. */
.ma .channel-toggle-hint {
position: fixed;
z-index: 200;
background: var(--bubble);
border: 1px solid var(--bubble-border);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
border-radius: 10px;
padding: 6px 11px;
font-size: 12.5px;
line-height: 1.25;
color: var(--text);
white-space: nowrap;
pointer-events: none;
opacity: 0;
transform: translateY(4px) scale(0.96);
transform-origin: 14px 100%;
transition: opacity 180ms ease, transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ma .channel-toggle-hint.show {
opacity: 1;
transform: translateY(0) scale(1);
}
.ma .channel-toggle-hint::after {
content: "";
position: absolute;
bottom: -5px;
left: 10px;
width: 9px;
height: 9px;
background: var(--bubble);
border-right: 1px solid var(--bubble-border);
border-bottom: 1px solid var(--bubble-border);
transform: rotate(45deg);
}
.ma-icon-btn { width: 32px; height: 32px; }
.ma-icon-btn svg { width: 20px; height: 20px; }
/* Send button — make new SVG sit centered */
.ma-send svg { width: 16px; height: 16px; display: block; }
/* Post-action icon should render SVG, not big emoji */
.ma-post-action-icon svg { width: 17px; height: 17px; }
/* Edit toolbar fmt buttons — SVG inside (link, quote) sized */
.ma-edit-fmt svg { width: 18px; height: 18px; }
/* Close × button now uses SVG icon */
.ma-edit-close svg { width: 18px; height: 18px; }
/* Pinned icon tile contains SVG */
.ma-pinned-icon svg { width: 15px; height: 15px; }
/* Hotfix v3.1 (post-deploy 14.05.2026):
1. Edit-overlay close × invisible in dark — bump font-size + contrast.
2. Edit-overlay covers viewport (position: fixed) since it's appended
to #app which has overflow:hidden — fixed lifts above clip.
3. Bottom-sheet scrim should match. */
.ma-edit-overlay {
position: fixed !important;
}
.ma-edit-close {
font-size: 22px;
line-height: 1;
font-weight: 300;
color: var(--text);
}
.ma-edit-close:active { background: var(--bg-pressed); }
.ma-dark .ma-edit-close { color: var(--text); }
.ma-edit-overlay-loading {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
color: var(--text-2);
font-size: 14px;
}
/* Post-actions sheet should also escape #app's overflow:hidden */
#post-actions-overlay { position: fixed !important; inset: 0; z-index: 70; }
#post-actions-overlay .ma-sheet { position: fixed; }
#post-actions-overlay .ma-sheet-scrim { position: fixed; }
/* Phase 13: delete sheet — те же overlay-fixed правила.
Phase 13c: animation: none + transform: none с !important — на iOS WebView
inline style.animation='none' shorthand не отменяет CSS animation; sheet
застревал at translateY(100%) (start frame of ma-slide-up). CSS-rule с
!important — bulletproof override. */
#delete-actions-overlay { position: fixed !important; inset: 0; z-index: 70; }
#delete-actions-overlay .ma-sheet {
position: fixed;
animation: none !important;
transform: none !important;
}
#delete-actions-overlay .ma-sheet-scrim {
position: fixed;
animation: none !important;
opacity: 1 !important;
}
/* ctx-overlay legacy fixed positioning is preserved (its old style.css rule
uses position: fixed). Keep z-index high so ctx-menu floats above content. */
/* ── Variant root ────────────────────────────────────────────
…
theme: ma-light / ma-dark
(Paper/Grid/Doodle bg variants intentionally dropped after
user picked Soft mesh in iteration 3.)
──────────────────────────────────────────────────────────── */
.ma {
/* Base tokens (light defaults) — overridden by .ma-dark below */
--accent: #6C63FF;
--accent-2: #4682FF;
--accent-soft: rgba(108, 99, 255, 0.12);
--accent-press: #5A4BFF;
--danger: #ff3b30;
--warn: #FF9500;
--bg: #f4f4f9;
--bg-elev: #ffffff;
--bg-pressed: rgba(11, 13, 26, 0.05);
--text: #0E1023;
--text-2: #6B6E85;
--text-3: #9CA1B8;
--line: rgba(11, 13, 26, 0.06);
--line-strong: rgba(11, 13, 26, 0.10);
--bubble: #ffffff;
--bubble-border: rgba(11, 13, 26, 0.05);
--bubble-shadow: 0 1px 2px rgba(11, 13, 26, 0.05), 0 1px 1px rgba(11, 13, 26, 0.03);
--bubble-own-bg: rgba(108, 99, 255, 0.14);
--bubble-own-border: rgba(108, 99, 255, 0.22);
--bubble-own-text: var(--text);
--reaction-bg: rgba(11, 13, 26, 0.05);
--reaction-active-bg: rgba(108, 99, 255, 0.14);
--reaction-active-fg: #5A4BFF;
--glass-bg: rgba(255, 255, 255, 0.74);
--glass-border: rgba(11, 13, 26, 0.06);
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", system-ui, sans-serif;
font-size: 15px;
line-height: 1.4;
color: var(--text);
background: var(--bg);
-webkit-font-smoothing: antialiased;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
isolation: isolate;
}
/* Universal reset — box-sizing inheritance + tap-highlight only.
Margin/padding are NOT reset universally (each .ma-* element sets its
own explicit padding in the design system below). The previous reset
`.ma [class^="ma-"] { padding: 0 }` had specificity 0,2,0 which beats
individual .ma-header / .ma-list rules (0,1,0) — it was eating all
their paddings. Removed in v6. */
.ma { box-sizing: border-box; -webkit-user-select: none; user-select: none; }
.ma * { box-sizing: inherit; -webkit-tap-highlight-color: transparent; }
.ma button { background: none; border: none; color: inherit; font: inherit; cursor: pointer; }
/* Selectable text ONLY in actual message content + inputs. Author names,
badges, time, reactions, header — all non-selectable (prevents the
"whole bubble highlighted blue on long-press" iOS WebView behaviour). */
.ma .comment-text, .ma .ma-reply-quote-text,
.ma textarea, .ma input[type="text"], .ma input[type="search"], .ma .ma-edit-area {
-webkit-user-select: text;
user-select: text;
}
.ma.ma-dark {
--accent: #8B7CF7;
--accent-2: #6D8AFF;
--accent-soft: rgba(139, 124, 247, 0.18);
--accent-press: #7B6BF0;
--danger: #ff453a;
--warn: #FFB340;
--bg: #0D0F1A;
--bg-elev: #181B2A;
--bg-pressed: rgba(255, 255, 255, 0.05);
--text: #ECECF4;
--text-2: #8A8DA6;
--text-3: #5F6280;
--line: rgba(255, 255, 255, 0.07);
--line-strong: rgba(255, 255, 255, 0.12);
--bubble: #1B1E2E;
--bubble-border: rgba(255, 255, 255, 0.06);
--bubble-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
--bubble-own-bg: rgba(139, 124, 247, 0.22);
--bubble-own-border: rgba(139, 124, 247, 0.30);
--bubble-own-text: #F4F2FF;
--reaction-bg: rgba(255, 255, 255, 0.06);
--reaction-active-bg: rgba(139, 124, 247, 0.24);
--reaction-active-fg: #C7BCFF;
--glass-bg: rgba(13, 15, 26, 0.78);
--glass-border: rgba(255, 255, 255, 0.06);
}
/* ─────────────────────────────────────────────────────────────
BACKGROUND · SOFT MESH (only variant)
Two diffuse blobs (violet + cool blue) blur 80px. Subtle, brand-forward.
───────────────────────────────────────────────────────────── */
.ma-bg-mesh.ma-light { --bg: #F3F1FA; }
.ma-bg-mesh.ma-dark { --bg: #0A0918; }
.ma-bg-mesh::before {
content: "";
position: absolute; inset: -60px;
pointer-events: none; z-index: 0;
filter: blur(40px);
background:
radial-gradient(50% 35% at 20% 15%, rgba(108, 99, 255, 0.55), transparent 70%),
radial-gradient(45% 35% at 85% 88%, rgba(70, 130, 255, 0.45), transparent 70%);
opacity: 0.45;
}
.ma-bg-mesh.ma-dark::before {
background:
radial-gradient(50% 35% at 20% 15%, rgba(139, 124, 247, 0.55), transparent 70%),
radial-gradient(45% 35% at 85% 88%, rgba(58, 100, 200, 0.55), transparent 70%);
opacity: 0.75;
}
/* keep ma children above ::before backdrop */
.ma > * { position: relative; z-index: 1; }
/* ═════════════════════════════════════════════════════════════
HEADER
═════════════════════════════════════════════════════════════ */
/* Phase 12: solid header (FINAL). Phase 8-9 пытались glass 80%+blur 12px и
will-change — шапка периодически невидима. Solid var(--bg-elev) гарантирует
visible на любом iOS WebView. Trade-off: нет glass-эффекта. */
.ma-header {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: var(--bg-elev);
border-bottom: 1px solid var(--line-strong);
}
.ma-header-avatar {
width: 32px; height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--accent-2));
color: #fff;
font-weight: 700;
font-size: 13px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
letter-spacing: -0.02em;
}
.ma-header-text { flex: 1; min-width: 0; }
.ma-header-title {
font-size: 15px;
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.2;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ma-header-sub {
font-size: 11.5px;
color: var(--text-2);
margin-top: 1px;
line-height: 1.2;
font-variant-numeric: tabular-nums;
}
.ma-header-actions { display: flex; gap: 2px; }
.ma-icon-btn {
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
border-radius: 10px;
color: var(--text);
transition: background 120ms ease;
}
.ma-icon-btn:active { background: var(--bg-pressed); }
.ma-icon-btn svg { width: 20px; height: 20px; }
/* ═════════════════════════════════════════════════════════════
PINNED CARD · full card, accent bar, label
═════════════════════════════════════════════════════════════ */
.ma-pinned {
flex-shrink: 0;
margin: 8px 12px 4px;
display: flex;
gap: 10px;
align-items: stretch;
padding: 9px 11px 9px 10px;
background: var(--bubble);
border: 1px solid var(--bubble-border);
border-radius: 12px;
box-shadow: var(--bubble-shadow);
position: relative;
}
.ma-pinned::before {
content: "";
position: absolute;
left: 6px; top: 9px; bottom: 9px;
width: 3px;
border-radius: 999px;
background: linear-gradient(180deg, var(--accent), var(--accent-2));
}
.ma-pinned-icon {
width: 28px; height: 28px;
flex-shrink: 0;
border-radius: 8px;
background: var(--accent-soft);
color: var(--accent);
display: flex; align-items: center; justify-content: center;
margin-left: 6px;
}
.ma-pinned-icon svg { width: 15px; height: 15px; }
.ma-pinned-body { flex: 1; min-width: 0; }
.ma-pinned-label {
font-size: 11px;
font-weight: 700;
color: var(--accent);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.ma-pinned-text {
font-size: 13px;
color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
margin-top: 2px;
line-height: 1.3;
}
/* ═════════════════════════════════════════════════════════════
LIST · messages
═════════════════════════════════════════════════════════════ */
.ma-list {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: contain;
padding: 4px 0 12px;
scrollbar-width: none;
}
.ma-list::-webkit-scrollbar { display: none; }
.ma-date {
text-align: center;
margin: 10px 0 6px;
}
.ma-date span {
display: inline-block;
font-size: 11px;
font-weight: 600;
color: var(--text-2);
padding: 3px 10px;
background: var(--reaction-bg);
border-radius: 999px;
letter-spacing: 0.02em;
}
/* ── Message row ──────────────────────────────────────────── */
.ma-msg {
display: flex;
gap: 8px;
padding: 2px 12px;
align-items: flex-end;
position: relative;
}
.ma-msg + .ma-msg { margin-top: 2px; }
.ma-msg.new-author { margin-top: 10px; }
.ma-avatar {
width: 28px; height: 28px;
border-radius: 50%;
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
color: #fff;
font-size: 11.5px;
font-weight: 700;
letter-spacing: -0.01em;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
}
.ma-avatar-spacer { width: 28px; flex-shrink: 0; }
.ma-msg-body {
display: flex;
flex-direction: column;
max-width: 78%;
min-width: 0;
}
.ma-msg-head {
display: flex;
align-items: center;
gap: 6px;
margin: 0 0 2px 10px;
font-size: 12px;
line-height: 1.2;
}
.ma-msg-name {
font-weight: 600;
color: var(--accent);
letter-spacing: -0.005em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: 180px;
}
.ma-badge {
font-size: 9px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 1px 5px;
border-radius: 4px;
color: #fff;
background: var(--accent);
flex-shrink: 0;
}
.ma-badge.admin { background: #8A8DA6; }
.ma-badge.channel { background: linear-gradient(135deg, #2AABEE, var(--accent)); }
.ma-badge.mod { background: #4682FF; }
.ma-bubble {
background: var(--bubble);
color: var(--text);
font-size: 14.5px;
line-height: 1.36;
padding: 6px 11px 6px;
border-radius: 4px 16px 16px 16px;
border: 1px solid var(--bubble-border);
box-shadow: var(--bubble-shadow);
word-wrap: break-word;
overflow-wrap: anywhere;
-webkit-user-select: text;
user-select: text;
position: relative;
min-width: 80px;
}
/* Phase 10: head + meta inside bubble — переопределяем legacy .ma-msg-head
(line 567), у которого margin-left:10px от внешнего layout (Phase 5). */
.ma-bubble > .ma-msg-head {
margin: 0 0 2px 0;
display: flex;
align-items: baseline;
gap: 4px;
font-size: 12px;
line-height: 1.2;
}
.ma-bubble > .bubble-meta {
display: flex;
align-items: center;
gap: 6px;
margin-top: 3px;
flex-wrap: wrap;
justify-content: space-between;
}
.ma-bubble > .bubble-meta .ma-reactions {
display: flex;
gap: 4px;
flex-wrap: wrap;
margin: 0;
}
.ma-bubble > .bubble-meta .comment-time {
font-size: 10.5px;
color: var(--text-3);
font-variant-numeric: tabular-nums;
line-height: 1;
white-space: nowrap;
margin-left: auto;
align-self: flex-end;
flex-shrink: 0;
}
/* Own bubble (accent-soft fill): time в accent цвете с opacity */
.ma-msg.own .ma-bubble > .bubble-meta .comment-time {
color: var(--accent);
opacity: 0.7;
}
/* Continues — без head + meta-row, без аватарки, плотнее, унифицированный
border-radius. */
.ma-msg.continues { margin-top: 2px; }
.ma-msg.new-author { margin-top: 8px; }
.ma-msg.continues .ma-bubble { border-radius: 16px; }
.ma-msg.continues .ma-bubble { border-radius: 16px; }
.ma-msg-meta {
display: flex;
align-items: center;
gap: 6px;
margin: 3px 10px 0;
font-size: 11px;
color: var(--text-3);
line-height: 1.2;
}
/* OWN — right-aligned, translucent accent fill, no avatar */
.ma-msg.own { flex-direction: row-reverse; }
.ma-msg.own .ma-msg-body { align-items: flex-end; }
.ma-msg.own .ma-bubble {
background: var(--bubble-own-bg);
border-color: var(--bubble-own-border);
color: var(--bubble-own-text);
border-radius: 16px 4px 16px 16px;
box-shadow: 0 1px 2px rgba(108, 99, 255, 0.10);
}
.ma-msg.own.continues .ma-bubble { border-radius: 16px; }
.ma-msg.own .ma-msg-head { display: none; }
/* ── Reply quote · TG style: thin accent bar, no frame ─────── */
.ma-reply-quote {
display: block;
margin: 1px 0 5px;
padding: 1px 0 1px 9px;
border-left: 3px solid var(--accent);
border-radius: 1px;
font-size: 12.5px;
line-height: 1.25;
}
.ma-msg.own .ma-reply-quote { border-left-color: var(--accent); }
.ma-reply-quote-name {
display: block;
font-weight: 600;
color: var(--accent);
font-size: 12px;
}
.ma-reply-quote-text {
display: block;
color: var(--text-2);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ── Reactions · pill-chips ────────────────────────────────── */
.ma-reactions {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin: 4px 10px 0;
}
.ma-msg.own .ma-reactions { justify-content: flex-end; }
.ma-rx {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 7px 2px 5px;
background: var(--reaction-bg);
border-radius: 999px;
font-size: 12.5px;
line-height: 1.2;
font-weight: 500;
cursor: pointer;
border: 1px solid transparent;
transition: transform 100ms, background 120ms;
}
.ma-rx.active {
background: var(--reaction-active-bg);
border-color: var(--bubble-own-border);
color: var(--reaction-active-fg);
}
.ma-rx:active { transform: scale(0.95); }
.ma-rx .ma-rx-count {
font-size: 11.5px;
color: var(--text-2);
font-variant-numeric: tabular-nums;
}
.ma-rx.active .ma-rx-count { color: var(--reaction-active-fg); }
/* ── Reply hint icon · always visible, low opacity ────────── */
.ma-msg-actions {
align-self: center;
display: flex;
align-items: center;
margin-bottom: 2px;
opacity: 0.32;
transition: opacity 150ms;
}
.ma-msg:hover .ma-msg-actions { opacity: 0.7; }
.ma-msg-actions button {
width: 26px; height: 26px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: var(--text-2);
transition: background 120ms, color 120ms;
}
.ma-msg-actions button:active,
.ma-msg-actions button:hover {
background: var(--accent-soft);
color: var(--accent);
}
.ma-msg-actions svg { width: 14px; height: 14px; }
/* ── Typing indicator ──────────────────────────────────────── */
.ma-typing {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 14px 8px;
font-size: 12px;
color: var(--text-2);
}
/* Phase 8: убрано облачко-bubble — точки висят свободно после "X печатает" */
.ma-typing-dots {
display: inline-flex;
gap: 4px;
padding: 0;
}
/* HTML emits 3 inner (index.html); legacy selector was `i` — не матчил.
`> span` targets the dots inside the bubble. */
.ma-typing-dots > span {
width: 5px; height: 5px;
border-radius: 50%;
background: var(--text-3);
animation: ma-bounce 1.2s infinite ease;
display: inline-block;
}
.ma-typing-dots > span:nth-child(2) { animation-delay: 0.15s; }
.ma-typing-dots > span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ma-bounce {
0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
30% { opacity: 1; transform: translateY(-4px); }
}
/* ═════════════════════════════════════════════════════════════
INPUT · with reply-bar above
═════════════════════════════════════════════════════════════ */
/* Solid bg (was glass + backdrop-filter blur 20px) → устраняет paint-lag
"новый комментарий за input area" на iOS WebView. Trade-off: меньше
воздушности, больше plot solid look. */
.ma-input {
flex-shrink: 0;
background: var(--bubble);
border-top: 1px solid var(--line-strong);
padding-bottom: env(safe-area-inset-bottom, 0);
}
.ma-reply-bar {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 14px;
border-bottom: 1px solid var(--glass-border);
font-size: 13px;
position: relative;
}
.ma-reply-bar::before {
content: "";
position: absolute;
left: 14px; top: 8px; bottom: 8px;
width: 3px;
border-radius: 999px;
background: var(--accent);
}
.ma-reply-bar-body {
flex: 1; min-width: 0;
padding-left: 8px;
display: flex;
align-items: center;
gap: 6px;
overflow: hidden;
}
.ma-reply-bar-body .reply-bar-icon {
display: inline-flex;
align-items: center;
color: var(--accent);
flex-shrink: 0;
}
.ma-reply-bar-body .reply-bar-icon svg { width: 14px; height: 14px; display: block; }
.ma-reply-bar-name { color: var(--accent); font-weight: 600; font-size: 12px; line-height: 1.2; flex-shrink: 0; }
.ma-reply-bar-text {
color: var(--text-2);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
font-size: 12.5px;
line-height: 1.2;
}
.ma-reply-bar-close {
width: 24px; height: 24px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: var(--text-2);
font-size: 16px;
flex-shrink: 0;
}
.ma-input-row {
display: flex;
align-items: flex-end;
gap: 6px;
padding: 8px 10px 8px 12px;
}
.ma-input-row textarea {
flex: 1;
resize: none;
max-height: 120px;
min-height: 36px;
padding: 8px 14px;
border-radius: 18px;
border: 1px solid var(--line);
background: var(--bubble);
color: var(--text);
font: inherit;
font-size: 14.5px;
line-height: 1.35;
outline: none;
transition: border-color 120ms;
}
.ma-input-row textarea:focus { border-color: var(--accent); }
.ma-input-row textarea::placeholder { color: var(--text-3); }
.ma-input-row .ma-channel-toggle {
width: 36px; height: 36px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: var(--text-2);
flex-shrink: 0;
transition: background 120ms, color 120ms;
}
.ma-input-row .ma-channel-toggle.active {
background: var(--accent-soft);
color: var(--accent);
}
.ma-input-row .ma-channel-toggle svg { width: 18px; height: 18px; }
.ma-input-row .ma-send {
width: 36px; height: 36px;
border-radius: 50%;
background: var(--accent);
color: #fff;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
transition: transform 120ms, background 120ms, opacity 120ms;
}
.ma-input-row .ma-send:active { transform: scale(0.92); background: var(--accent-press); }
.ma-input-row .ma-send.disabled { opacity: 0.4; pointer-events: none; }
.ma-input-row .ma-send svg { width: 16px; height: 16px; }
.ma-input-meta {
padding: 0 16px 4px;
font-size: 11px;
color: var(--text-3);
text-align: right;
font-variant-numeric: tabular-nums;
}
.ma-input-meta.warn { color: var(--warn); font-weight: 600; }
.ma-input-meta.danger { color: var(--danger); font-weight: 600; }
/* ═════════════════════════════════════════════════════════════
FOOTER · branding (always shown, all channels)
═════════════════════════════════════════════════════════════ */
.ma-foot {
flex-shrink: 0;
text-align: center;
padding: 6px 12px env(safe-area-inset-bottom, 6px);
font-size: 11px;
color: var(--text-2);
background: rgba(255, 255, 255, 0.85);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border-top: 1px solid var(--line-strong);
}
.ma-dark .ma-foot { background: rgba(20, 22, 36, 0.85); }
.ma-foot a { color: var(--accent); text-decoration: none; font-weight: 500; }
.ma-foot strong { color: var(--text); font-weight: 700; }
.ma-foot .ma-foot-sep { margin: 0 6px; opacity: 0.5; }
/* ═════════════════════════════════════════════════════════════
STATE · empty / loading / disabled
═════════════════════════════════════════════════════════════ */
.ma-state {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 24px;
text-align: center;
}
.ma-state-icon {
width: 56px; height: 56px;
border-radius: 50%;
background: var(--bubble);
box-shadow: var(--bubble-shadow);
border: 1px solid var(--bubble-border);
display: flex; align-items: center; justify-content: center;
color: var(--accent);
}
.ma-state-icon svg { width: 26px; height: 26px; }
.ma-state-title { font-size: 16px; font-weight: 600; }
.ma-state-text { font-size: 13.5px; color: var(--text-2); max-width: 260px; }
.ma-spinner {
width: 28px; height: 28px;
border: 2.5px solid var(--line-strong);
border-top-color: var(--accent);
border-radius: 50%;
animation: ma-spin 0.8s linear infinite;
}
@keyframes ma-spin { to { transform: rotate(360deg); } }
/* ═════════════════════════════════════════════════════════════
CONTEXT MENU · Telegram-style overlay
═════════════════════════════════════════════════════════════ */
/* Phase 11: overlay = flex column [rxWrap (top, pinned), stage (middle, scroll),
sheet (bottom, pinned)]. На длинных комментариях bubble внутри stage
скроллится, а rx и menu остаются видимы. */
.ma-ctx {
position: absolute; inset: 0;
background: rgba(0, 0, 0, 0.42);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
z-index: 50;
display: flex;
flex-direction: column;
pointer-events: auto;
animation: ma-fade 200ms ease;
}
.ma-dark .ma-ctx { background: rgba(0, 0, 0, 0.62); }
@keyframes ma-fade { from { opacity: 0; } to { opacity: 1; } }
/* Stage — scroll middle. min-height:0 необходим чтобы flex item с
overflow:auto корректно сжимался (без него iOS WebView расширяет до
content height и overflow не активируется). */
.ma-ctx > .ma-ctx-stage {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
padding: 8px 14px;
scrollbar-width: none;
min-height: 0;
}
.ma-ctx > .ma-ctx-stage::-webkit-scrollbar { display: none; }
.ma-ctx.own > .ma-ctx-stage { align-items: flex-end; }
.ma-ctx:not(.own) > .ma-ctx-stage { align-items: flex-start; }
/* Reactions wrap — pinned at top of overlay */
.ma-ctx > .ma-ctx-rx-wrap {
flex-shrink: 0;
align-self: flex-start;
margin: 16px 14px 0;
max-width: calc(100% - 28px);
display: flex;
flex-direction: column;
gap: 6px;
}
.ma-ctx.own > .ma-ctx-rx-wrap { align-self: flex-end; }
.ma-ctx-rx {
display: flex;
gap: 2px;
background: var(--bubble);
border: 1px solid var(--bubble-border);
border-radius: 999px;
padding: 6px 8px;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
animation: ma-pop 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.ma-ctx-rx button {
width: 36px; height: 36px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 22px;
transition: transform 120ms, background 120ms, color 120ms;
}
.ma-ctx-rx button:active { transform: scale(1.3); }
.ma-ctx-rx .ma-ctx-rx-more {
font-size: 20px;
color: var(--text-2);
font-weight: 600;
line-height: 1;
}
.ma-ctx-rx .ma-ctx-rx-more.active {
background: var(--accent-soft);
color: var(--accent);
}
/* Extra (expanded) reaction grid — 7×2 */
.ma-ctx-rx-extra {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
padding: 8px;
background: var(--bubble);
border: 1px solid var(--bubble-border);
border-radius: 18px;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
animation: ma-ext 200ms cubic-bezier(0.22, 1, 0.36, 1) both;
transform-origin: top center;
}
.ma-ctx.own .ma-ctx-rx-extra { transform-origin: top right; }
.ma-ctx-rx-extra button {
width: 36px; height: 36px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 22px;
transition: transform 120ms, background 120ms;
}
.ma-ctx-rx-extra button:active {
transform: scale(1.3);
background: var(--bg-pressed);
}
@keyframes ma-ext {
from { opacity: 0; transform: translateY(-6px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ma-pop {
0% { transform: scale(0.6) translateY(8px); opacity: 0; }
60% { transform: scale(1.04); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
.ma-ctx-bubble-wrap {
max-width: 78%;
filter: drop-shadow(0 16px 36px rgba(0, 0, 0, 0.35));
animation: ma-pop 320ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
/* In overlay state the message-head (name + badges) sits ON the
dimmed backdrop — not on the bubble. Accent purple on dark backdrop
is unreadable, so swap to high-contrast white with a soft shadow.
The bubble itself keeps its original colours (option B). */
.ma-ctx .ma-msg-name {
color: rgba(255, 255, 255, 0.96);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.ma-ctx .ma-reply-quote-name {
/* stays accent — lives INSIDE the bubble on light bg */
}
/* Menu — pinned at bottom of overlay */
.ma-ctx > .ma-ctx-menu {
flex-shrink: 0;
align-self: flex-start;
margin: 8px 14px 16px;
width: 220px;
background: var(--bubble);
border: 1px solid var(--bubble-border);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
animation: ma-pop 320ms cubic-bezier(0.34, 1.56, 0.64, 1) 80ms both;
opacity: 0;
animation-fill-mode: forwards;
}
.ma-ctx.own > .ma-ctx-menu { align-self: flex-end; }
.ma-ctx-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
padding: 11px 14px;
font-size: 15px;
color: var(--text);
transition: background 120ms;
text-align: left;
}
.ma-ctx-item + .ma-ctx-item { border-top: 1px solid var(--line); }
.ma-ctx-item:active { background: var(--bg-pressed); }
.ma-ctx-item svg { width: 18px; height: 18px; opacity: 0.7; }
.ma-ctx-item.danger { color: var(--danger); }
.ma-ctx-item.danger svg { opacity: 1; }
.ma-ctx-item-title {
display: block;
line-height: 1.25;
}
.ma-ctx-item-sub {
display: block;
font-size: 11.5px;
font-weight: 400;
color: var(--text-2);
margin-top: 2px;
line-height: 1.2;
}
.ma-ctx-item.danger .ma-ctx-item-sub { color: var(--text-2); opacity: 0.85; }
/* Delete sub-menu — wider, with back-header */
/* Phase 13: .ma-ctx-submenu removed — in-place sub-menu заменён на отдельный
bottom-sheet (#delete-actions-overlay). Старые .ma-ctx-submenu-head стили
ниже оставлены на случай legacy callers, не используются Phase 13 flow. */
.ma-ctx-submenu-head {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 10px 14px;
border-bottom: 1px solid var(--line);
font-size: 13px;
font-weight: 600;
color: var(--text-2);
text-align: left;
transition: background 120ms;
}
.ma-ctx-submenu-head:active { background: var(--bg-pressed); }
.ma-ctx-submenu-head svg { width: 16px; height: 16px; }
/* ═════════════════════════════════════════════════════════════
BOTTOM SHEET
═════════════════════════════════════════════════════════════ */
.ma-sheet-scrim {
position: absolute; inset: 0;
background: rgba(0, 0, 0, 0.42);
z-index: 60;
animation: ma-fade 200ms ease;
}
.ma-sheet {
position: absolute; left: 0; right: 0; bottom: 0;
z-index: 61;
background: var(--bg-elev);
border-radius: 18px 18px 0 0;
padding: 8px 0 calc(env(safe-area-inset-bottom, 0) + 12px);
box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.24);
animation: ma-slide-up 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes ma-slide-up {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
.ma-sheet-grab {
width: 36px; height: 4px;
background: var(--line-strong);
border-radius: 999px;
margin: 4px auto 12px;
}
.ma-sheet-title {
font-size: 16px;
font-weight: 600;
padding: 2px 16px 10px;
}
.ma-sheet-row {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 16px;
font-size: 14.5px;
}
.ma-sheet-row-icon {
width: 32px; height: 32px;
border-radius: 8px;
background: var(--accent-soft);
color: var(--accent);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.ma-sheet-row-icon svg { width: 18px; height: 18px; }
.ma-sheet-row-text { flex: 1; min-width: 0; }
.ma-sheet-row-title { line-height: 1.2; }
.ma-sheet-row-sub { font-size: 12px; color: var(--text-2); margin-top: 2px; }
/* ── Load-more button ─────────────────────────────────────── */
.ma-load-more {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: calc(100% - 24px);
height: 38px;
margin: 10px 12px 4px;
padding: 0 14px;
border-radius: 12px;
border: 1px solid var(--bubble-border);
background: var(--bubble);
color: var(--accent);
font: inherit;
font-size: 13px;
font-weight: 600;
letter-spacing: -0.005em;
box-shadow: var(--bubble-shadow);
transition: transform 120ms, background 120ms, opacity 120ms;
}
.ma-load-more:active:not(:disabled) { transform: scale(0.98); background: var(--bg-pressed); }
.ma-load-more:disabled, .ma-load-more.loading {
color: var(--text-2);
cursor: default;
}
.ma-load-more-spinner {
width: 13px; height: 13px;
border: 2px solid var(--line-strong);
border-top-color: var(--accent);
border-radius: 50%;
animation: ma-spin 0.8s linear infinite;
}
/* ── Post-actions sheet ───────────────────────────────────── */
.ma-post-actions { padding: 0 8px; }
.ma-post-action {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 11px 12px;
border-radius: 12px;
font: inherit;
font-size: 14.5px;
color: var(--text);
text-align: left;
transition: background 120ms, opacity 120ms;
}
.ma-post-action:active:not(:disabled) { background: var(--bg-pressed); }
.ma-post-action.disabled { opacity: 0.48; cursor: not-allowed; }
.ma-post-action.danger { color: var(--danger); }
.ma-post-action-icon {
width: 32px; height: 32px;
border-radius: 9px;
background: var(--accent-soft);
color: var(--accent);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.ma-post-action-icon svg { width: 17px; height: 17px; }
.ma-post-action.danger .ma-post-action-icon {
background: rgba(255, 59, 48, 0.12);
color: var(--danger);
}
.ma-dark .ma-post-action.danger .ma-post-action-icon { background: rgba(255, 69, 58, 0.18); }
.ma-post-action-body { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.ma-post-action-label { line-height: 1.2; font-weight: 500; }
.ma-post-action-hint {
font-size: 11.5px;
color: var(--text-2);
line-height: 1.2;
font-weight: 400;
}
.ma-post-actions-sep {
height: 1px;
margin: 4px 12px;
background: var(--line);
}
.ma-post-actions-cancel {
display: block;
width: calc(100% - 16px);
margin: 8px 8px 0;
padding: 12px;
text-align: center;
background: var(--bg-pressed);
border-radius: 12px;
font: inherit;
font-size: 14.5px;
font-weight: 600;
color: var(--text);
transition: background 120ms;
}
.ma-post-actions-cancel:active { background: var(--line-strong); }
/* ── Edit post overlay (fullscreen) ────────────────────────── */
.ma-edit-overlay {
position: absolute;
inset: 0;
z-index: 80;
background: var(--bg);
display: flex;
flex-direction: column;
padding: 40px 0 calc(env(safe-area-inset-bottom, 0) + 4px);
animation: ma-slide-up 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
overflow: hidden;
}
.ma-edit-head {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 10px 14px;
border-bottom: 1px solid var(--line);
flex-shrink: 0;
}
.ma-edit-title {
font-size: 15px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--text);
}
.ma-edit-close {
position: absolute;
right: 8px; top: 50%;
transform: translateY(-50%);
width: 32px; height: 32px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: var(--text-2);
transition: background 120ms;
}
.ma-edit-close:active { background: var(--bg-pressed); }
.ma-edit-close svg { width: 18px; height: 18px; }
.ma-edit-toolbar {
display: flex;
gap: 2px;
padding: 8px 10px;
border-bottom: 1px solid var(--line);
flex-shrink: 0;
}
.ma-edit-fmt {
width: 36px; height: 36px;
border-radius: 9px;
display: flex; align-items: center; justify-content: center;
font-size: 15px;
color: var(--text);
transition: background 120ms, color 120ms;
}
.ma-edit-fmt b { font-weight: 800; }
.ma-edit-fmt i { font-style: italic; font-weight: 600; }
.ma-edit-fmt s { font-weight: 600; text-decoration: line-through; }
.ma-edit-fmt:active,
.ma-edit-fmt.active {
background: var(--accent-soft);
color: var(--accent);
}
.ma-edit-fmt svg { width: 18px; height: 18px; }
.ma-edit-link {
display: flex;
flex-direction: column;
gap: 8px;
padding: 10px 14px 12px;
border-bottom: 1px solid var(--line);
background: var(--bg-pressed);
flex-shrink: 0;
}
.ma-edit-input {
width: 100%;
padding: 9px 12px;
border-radius: 10px;
border: 1px solid var(--line);
background: var(--bubble);
color: var(--text);
font: inherit;
font-size: 13.5px;
outline: none;
transition: border-color 120ms;
}
.ma-edit-input:focus { border-color: var(--accent); }
.ma-edit-input::placeholder { color: var(--text-3); }
.ma-edit-link-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
}
.ma-edit-link-actions .ma-btn { flex: 0 0 auto; padding: 8px 14px; font-size: 13px; }
.ma-edit-area {
flex: 1;
width: calc(100% - 24px);
margin: 12px 12px 0;
padding: 12px 14px;
border-radius: 14px;
border: 1px solid var(--line);
background: var(--bubble);
color: var(--text);
font: inherit;
font-size: 14.5px;
line-height: 1.5;
resize: none;
outline: none;
min-height: 0;
transition: border-color 120ms;
}
.ma-edit-area:focus { border-color: var(--accent); }
.ma-edit-area::placeholder { color: var(--text-3); }
.ma-edit-counter {
font-size: 11.5px;
color: var(--text-3);
text-align: right;
padding: 6px 14px 0;
font-variant-numeric: tabular-nums;
}
.ma-edit-counter.warn { color: var(--warn); font-weight: 600; }
.ma-edit-counter.danger { color: var(--danger); font-weight: 600; }
.ma-edit-actions {
display: flex;
gap: 10px;
padding: 12px 14px 4px;
flex-shrink: 0;
}
.ma-btn {
flex: 1;
padding: 12px;
border-radius: 12px;
font: inherit;
font-size: 14.5px;
font-weight: 600;
letter-spacing: -0.005em;
transition: opacity 120ms, background 120ms, transform 120ms;
}
.ma-btn:active { transform: scale(0.985); }
.ma-btn-primary {
background: var(--accent);
color: #fff;
box-shadow: 0 1px 2px rgba(108, 99, 255, 0.20);
}
.ma-btn-primary:active { background: var(--accent-press); }
.ma-btn-secondary {
background: var(--bg-pressed);
color: var(--text);
}
.ma-btn-secondary:active { background: var(--line-strong); }
.ma-btn-ghost {
background: transparent;
color: var(--text-2);
}
.ma-btn-ghost:active { background: var(--bg-pressed); }
/* iOS-style toggle */
.ma-tog {
position: relative;
width: 44px; height: 26px;
flex-shrink: 0;
background: var(--line-strong);
border-radius: 999px;
transition: background 200ms;
}
.ma-tog::after {
content: "";
position: absolute;
top: 2px; left: 2px;
width: 22px; height: 22px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ma-tog.on { background: var(--accent); }
.ma-tog.on::after { transform: translateX(18px); }
/* ═════════════════════════════════════════════════════════════
Avatar palette · 8 muted brand colors (deterministic by hash)
═════════════════════════════════════════════════════════════ */
.av-1 { background: linear-gradient(135deg, #7C5CFF, #5A3AE6); } /* violet */
.av-2 { background: linear-gradient(135deg, #4682FF, #2A5FE0); } /* blue */
.av-3 { background: linear-gradient(135deg, #2AABEE, #0E7FB8); } /* teal */
.av-4 { background: linear-gradient(135deg, #1FB574, #0E8A55); } /* green */
.av-5 { background: linear-gradient(135deg, #E5A82B, #C28818); } /* yellow */
.av-6 { background: linear-gradient(135deg, #F08A3E, #D86A1F); } /* orange */
.av-7 { background: linear-gradient(135deg, #E0596B, #BA3949); } /* red */
.av-8 { background: linear-gradient(135deg, #E468A8, #BC4A87); } /* pink */
/* ═════════════════════════════════════════════════════════════
Phase 6 — ctx-menu close + .ctx-hidden + admin-bar SVG
═════════════════════════════════════════════════════════════ */
/* Closing fade-out (reverse of .ma-ctx open animation) */
.ma-ctx.closing { animation: ma-fade 200ms ease reverse forwards; }
/* Hide original comment while ctx-overlay open. opacity:0 keeps layout (no jump),
pointer-events:none предотвращает touch на скрытом оригинале (race vs overlay). */
.ctx-hidden {
opacity: 0 !important;
pointer-events: none !important;
transition: none !important;
}
/* Admin-bar button — SVG icon inline with text */
#admin-bar button {
display: inline-flex; align-items: center; justify-content: center;
gap: 8px;
}
#admin-bar button svg { width: 16px; height: 16px; flex-shrink: 0; }
/* ═════════════════════════════════════════════════════════════
Phase 7 — entry/exit анимации сообщений + profile-card override
═════════════════════════════════════════════════════════════ */
/* Slide-in для нового комментария через WS */
@keyframes ma-msg-enter {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.ma-msg.ma-msg-entering {
animation: ma-msg-enter 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Collapse для удалённого комментария */
@keyframes ma-msg-exit {
to {
opacity: 0;
transform: translateY(-8px);
max-height: 0;
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
}
}
.ma-msg.ma-msg-exiting {
animation: ma-msg-exit 200ms cubic-bezier(0.4, 0, 1, 1) both;
overflow: hidden;
}
/* Profile-card overlay — viewport-overlay через bump специфичности
.ma .profile-card-overlay (0,2,0) > .ma > * (0,1,1).
Без этого карточка падает в flex-flow .ma и оказывается ВНИЗУ
под admin-bar/branding. */
.ma .profile-card-overlay {
position: fixed;
inset: 0;
z-index: 200;
}
/* ═════════════════════════════════════════════════════════════
Phase 8 — secondary metadata + dark typing dots
═════════════════════════════════════════════════════════════ */
/* Secondary metadata (uid/time/edited) — мягкий серый, мельче имени.
Имя остаётся accent 12px primary identity. */
.ma .ma-msg-head .comment-time,
.ma .ma-msg-head .comment-uid,
.ma .ma-msg-head .comment-edited {
color: var(--text-3);
font-size: 11px;
font-weight: 400;
}
.ma .ma-msg-head .comment-uid { cursor: pointer; }
.ma .ma-msg-head .comment-time {
margin-left: auto;
font-variant-numeric: tabular-nums;
}
/* Dark mode: точки typing-индикатора чуть ярче, чтоб не сливались с mesh */
.ma-dark .ma-typing-dots > span { background: var(--text-2); }