/* === АРЕНА brand overrides === */
.mx_AuthPage_modalBlur {
    background-color: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(2px) !important;
}

/* Logo — object-fit only, each page controls its own size */
img.mx_Logo {
    display: block !important;
    object-fit: contain !important;
}

/* Theme-aware logo variants. Default stays dark for auth pages before the
   client theme class is available. */
.mx_AuthHeaderLogo img,
.mx_HomePage_default_wrapper > img,
img.mx_Logo {
    content: url("logo_dark_slogan.svg") !important;
    display: block !important;
    object-fit: contain !important;
}

.cpd-theme-light .mx_AuthHeaderLogo img,
.cpd-theme-light .mx_HomePage_default_wrapper > img,
.cpd-theme-light img.mx_Logo,
.cpd-theme-light-custom .mx_AuthHeaderLogo img,
.cpd-theme-light-custom .mx_HomePage_default_wrapper > img,
.cpd-theme-light-custom img.mx_Logo {
    content: url("logo_light_slogan.svg") !important;
}

.cpd-theme-dark .mx_AuthHeaderLogo img,
.cpd-theme-dark .mx_HomePage_default_wrapper > img,
.cpd-theme-dark img.mx_Logo,
.cpd-theme-dark-custom .mx_AuthHeaderLogo img,
.cpd-theme-dark-custom .mx_HomePage_default_wrapper > img,
.cpd-theme-dark-custom img.mx_Logo {
    content: url("logo_dark_slogan.svg") !important;
}

.mx_HomePage_default_wrapper {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Home page logo layout */
.mx_HomePage_default_wrapper > img {
    width: clamp(180px, 20vw, 230px) !important;
    height: auto !important;
    margin: 0 0 36px !important;
}

/* OIDC auth page logo sizing */
.mx_AuthHeaderLogo img {
    height: 52px !important;
    width: auto !important;
    max-width: 170px !important;
}
/* Auth page logo container */
.mx_AuthHeaderLogo {
    overflow: visible !important;
    max-width: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding: 8px 32px 40px !important;
}

/* Primary buttons — gray accent */
[class*="cpd-button"][data-kind="primary"],
.mx_Login_submit,
.mx_AccessibleButton_kind_primary,
button.cpd-button[data-kind="primary"] {
    background: #808080 !important;
    border-color: #808080 !important;
}
[class*="cpd-button"][data-kind="primary"]:hover,
.mx_AccessibleButton_kind_primary:hover {
    background: #707070 !important;
    border-color: #707070 !important;
}

/* Compound semantic token overrides (full list from theme-semantics.json) */
:root, [class*="cpd-theme"] {
    /* Accent text */
    --cpd-color-text-action-accent: var(--cpd-color-gray-900) !important;
    --cpd-color-text-badge-accent: var(--cpd-color-gray-1100) !important;
    /* External web links keep their stock blue (--cpd-color-blue-1100) — only
       brand accent UI stays grey. */

    /* Accent backgrounds */
    --cpd-color-bg-accent-rest: var(--cpd-color-gray-900) !important;
    --cpd-color-bg-accent-hovered: var(--cpd-color-gray-1000) !important;
    --cpd-color-bg-accent-pressed: var(--cpd-color-gray-1100) !important;
    --cpd-color-bg-accent-selected: var(--cpd-color-alpha-gray-300) !important;
    --cpd-color-bg-badge-accent: var(--cpd-color-gray-400) !important;
    --cpd-color-bg-action-primary-rest: var(--cpd-color-gray-900) !important;
    --cpd-color-bg-action-primary-hovered: var(--cpd-color-gray-1000) !important;
    --cpd-color-bg-action-primary-pressed: var(--cpd-color-gray-1100) !important;

    /* Accent borders */
    --cpd-color-border-accent-subtle: var(--cpd-color-gray-700) !important;
    --cpd-color-border-accent-primary: var(--cpd-color-gray-900) !important;

    /* Accent icons */
    --cpd-color-icon-accent-tertiary: var(--cpd-color-gray-800) !important;
    --cpd-color-icon-accent-primary: var(--cpd-color-gray-900) !important;

    /* Success tokens stay untouched: they carry status meaning. */
}

/* OIDC sign-in button */
.mx_ButtonSignIn {
    background-color: #808080 !important;
    border-color: #808080 !important;
}
.mx_ButtonSignIn:hover {
    background-color: #707070 !important;
    border-color: #707070 !important;
}

/* OIDC/SSO continue buttons */
.mx_SSOButton,
.mx_SSOButton_default,
.mx_AuthBody .mx_AccessibleButton_kind_primary,
.mx_Login_sso_link,
button[data-testid="continue-button"],
.mx_ContinueButton {
    background-color: #808080 !important;
    border-color: #808080 !important;
}
.mx_SSOButton:hover,
.mx_SSOButton_default:hover,
.mx_AuthBody .mx_AccessibleButton_kind_primary:hover,
.mx_Login_sso_link:hover,
button[data-testid="continue-button"]:hover,
.mx_ContinueButton:hover {
    background-color: #707070 !important;
    border-color: #707070 !important;
}

/* Hide broken "download desktop app" banner (Element bug #15856) */
.mx_SearchWarning {
    display: none !important;
}

/* Rounded corners for app icon in banners */
.mx_SearchWarning img[src*="vector-icons"],
img[src*="element-shiny"],
img[src*="element-desktop-logo"] {
    border-radius: 20% !important;
}

/* FilePanel media grid (Telegram-style thumbnails) */
.mx_FilePanel .mx_RoomView_MessageList {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2px !important;
    padding: 4px !important;
    list-style: none !important;
}
.mx_FilePanel .mx_EventTile:has(.mx_MImageBody) {
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    border-radius: 2px !important;
    list-style: none !important;
    grid-row: span 1 !important;
}
.mx_FilePanel .mx_EventTile:has(.mx_MImageBody) .mx_EventTile_line {
    padding: 0 !important; margin: 0 !important;
    height: 100% !important; width: 100% !important;
}
.mx_FilePanel .mx_EventTile:has(.mx_MImageBody) .mx_EventTile_line > *:not(.mx_MImageBody) {
    display: none !important;
}
.mx_FilePanel .mx_EventTile:has(.mx_MImageBody) .mx_DisambiguatedProfile,
.mx_FilePanel .mx_EventTile:has(.mx_MImageBody) .mx_MessageTimestamp,
.mx_FilePanel .mx_EventTile:has(.mx_MImageBody) .mx_EventTile_avatar,
.mx_FilePanel .mx_EventTile:has(.mx_MImageBody) .mx_ReactionsRow,
.mx_FilePanel .mx_EventTile:has(.mx_MImageBody) .mx_EventTile_msgOption,
.mx_FilePanel .mx_EventTile:has(.mx_MImageBody) .mx_EventTile_e2eIcon,
.mx_FilePanel .mx_EventTile:has(.mx_MImageBody) .mx_EventTile_details {
    display: none !important;
}
.mx_FilePanel .mx_EventTile:has(.mx_MImageBody) .mx_MImageBody,
.mx_FilePanel .mx_EventTile:has(.mx_MImageBody) .mx_MImageBody_thumbnail_container {
    width: 100% !important; height: 100% !important;
    max-width: none !important; max-height: none !important;
    min-width: 0 !important; min-height: 0 !important;
    margin: 0 !important;
}
.mx_FilePanel .mx_EventTile:has(.mx_MImageBody) .mx_MImageBody_thumbnail {
    width: 100% !important; height: 100% !important;
    object-fit: cover !important;
    max-width: none !important; max-height: none !important;
}
/* File-only items — full row */
.mx_FilePanel .mx_EventTile:has(.mx_MFileBody):not(:has(.mx_MImageBody)) {
    grid-column: 1 / -1 !important;
    list-style: none !important;
}
/* Date separators — full row, compact */
.mx_FilePanel .mx_RoomView_MessageList > li:not(.mx_EventTile) {
    grid-column: 1 / -1 !important;
    list-style: none !important;
    max-height: 28px !important;
    overflow: hidden !important;
    padding: 4px 0 !important;
}

/* Home page cards — compound tokens, all themes */
.mx_HomePage_button_sendDm,
.mx_HomePage_button_explore,
.mx_HomePage_button_createGroup {
    background-color: var(--cpd-color-bg-subtle-secondary) !important;
    border: 1px solid var(--cpd-color-border-interactive-secondary) !important;
    color: var(--cpd-color-text-primary) !important;
}
.mx_HomePage_button_sendDm:hover,
.mx_HomePage_button_explore:hover,
.mx_HomePage_button_createGroup:hover {
    background-color: var(--cpd-color-bg-subtle-primary) !important;
}
.mx_HomePage_button_sendDm svg,
.mx_HomePage_button_explore svg,
.mx_HomePage_button_createGroup svg {
    color: var(--cpd-color-icon-secondary) !important;
}

/* Green/success stays semantic. Brand gray is applied through accent/action
   tokens only; status colors are handled by their own selectors/tokens. */

/* Fix room list avatars — prevent flex shrink to 0 in new room list layout */
.mx_RoomAvatarView {
    flex-shrink: 0 !important;
}

/* Fix avatar mask — SVG hash mismatch causes 404, making avatars invisible.
   Covers both _presence variant (rooms with user presence) and _icon variant
   (public rooms with globe indicator). */
.mx_BaseAvatar.mx_RoomAvatarView_RoomAvatar_presence,
.mx_BaseAvatar.mx_RoomAvatarView_RoomAvatar_icon {
    -webkit-mask-image: none !important;
    mask-image: none !important;
    mask: none !important;
    -webkit-mask: none !important;
}

/* Telegram-style deletion: fully hide redacted messages (no "deleted" tombstone).
   Element Web on this version does NOT add .mx_EventTile_redacted class; it
   just swaps the body to .mx_RedactedBody. Use :has() to match any tile whose
   body is redacted — covers both self-deletions and admin-deletions of others. */
.mx_EventTile:has(.mx_RedactedBody) {
    display: none !important;
}

/* Hide all system events: grouped summaries AND single state events.
   - .mx_GenericEventListSummary = "N users joined", "admin deleted N msgs"
   - .mx_EventTile_info = single events like "X joined", "admin changed power
     levels", "history is now visible", "room made invite-only", etc.
   Matches Telegram UX where system noise is not shown in the timeline.
   Regular m.room.message tiles don't have the _info class, so they stay. */
li.mx_GenericEventListSummary,
.mx_EventTile.mx_EventTile_info {
    display: none !important;
}

/* ═══ Presence indicators ═══
   Presence is a status signal, not a brand accent:
   online/away/busy/offline stay green/yellow/red/gray.
   Покрываем три семейства компонентов:
   1. .mx_WithPresenceIndicator_icon_*  (avatars в DM, mentions)
   2. .mx_DecoratedRoomAvatar_icon_*    (legacy room list)
   3. .mx_RoomAvatarView_PresenceDecoration[aria-label="..."] (new room list, SVG color) */

/* Online → зелёный */
.mx_WithPresenceIndicator_icon_online::before,
.mx_DecoratedRoomAvatar_icon_online::before {
    background-color: #0dbd8b !important;
}
.mx_RoomAvatarView_PresenceDecoration[aria-label="Онлайн"],
.mx_RoomAvatarView_PresenceDecoration[aria-label="Online"] {
    color: #0dbd8b !important;
}

/* Away → жёлтый */
.mx_WithPresenceIndicator_icon_away::before,
.mx_DecoratedRoomAvatar_icon_away::before {
    background-color: #f5a623 !important;
}
.mx_RoomAvatarView_PresenceDecoration[aria-label="Отошёл(ла)"],
.mx_RoomAvatarView_PresenceDecoration[aria-label="Неактивен"],
.mx_RoomAvatarView_PresenceDecoration[aria-label="Away"],
.mx_RoomAvatarView_PresenceDecoration[aria-label="Idle"] {
    color: #f5a623 !important;
}

/* Busy / DND → красный */
.mx_WithPresenceIndicator_icon_busy::before,
.mx_DecoratedRoomAvatar_icon_busy::before {
    background-color: #d64545 !important;
}
.mx_RoomAvatarView_PresenceDecoration[aria-label="Занят(а)"],
.mx_RoomAvatarView_PresenceDecoration[aria-label="Не беспокоить"],
.mx_RoomAvatarView_PresenceDecoration[aria-label="Busy"],
.mx_RoomAvatarView_PresenceDecoration[aria-label="Do not disturb"] {
    color: #d64545 !important;
}

/* Offline → нейтральный серый (явно, чтобы не зависеть от sed) */
.mx_WithPresenceIndicator_icon_offline::before,
.mx_DecoratedRoomAvatar_icon_offline::before {
    background-color: #8d99a5 !important;
}
.mx_RoomAvatarView_PresenceDecoration[aria-label="Не в сети"],
.mx_RoomAvatarView_PresenceDecoration[aria-label="Offline"] {
    color: #8d99a5 !important;
}

/* Member list (panel участников комнаты) — отдельный компонент
   PresenceIconView со внутренними классами _online / _offline / _dnd /
   _unavailable. SVG получает цвет через color → currentColor. */
.mx_PresenceIconView_online   { color: #0dbd8b !important; }
.mx_PresenceIconView_unavailable { color: #f5a623 !important; }
.mx_PresenceIconView_dnd      { color: #d64545 !important; }
.mx_PresenceIconView_offline  { color: #8d99a5 !important; }

/* Unread activity dots в новом room/space-листе.
   Compound `<Unread />` рендерит внешний div с CSS Modules класса
   `_unread_<hash>_8` и пустой внутренний div с background-color
   --cpd-color-icon-secondary. Хэш нестабилен при ребилде — таргетим
   по префиксу `_unread_`. */
[data-testid="notification-decoration"] [class^="_unread_"] > div,
[data-testid="notification-decoration"] [class*=" _unread_"] > div {
    background-color: #0dbd8b !important;
}

/* Disable the full-row hover background tint on bubble messages.
   The IRC-style hover stripe looks ugly with chat wallpapers and adds
   no value when the action menu floats on hover anyway. */
.mx_EventBubbleTile:hover::before,
.mx_EventBubbleTile.mx_EventTile_selected::before {
    background: transparent !important;
}
.mx_EventBubbleTile:hover .mx_EventTile_avatar img,
.mx_EventBubbleTile.mx_EventTile_selected .mx_EventTile_avatar img {
    box-shadow: none !important;
}

/* АРЕНА — kill hover/selected message background across ALL layouts.
   Real selector is .mx_EventTile[data-layout="..."] — Element's
   .mx_EventBubbleTile class is dead CSS (not applied to any element).

   For bubble layout we LOCK .mx_EventTile_line at its normal
   --backgroundColor instead of clearing, so the bubble stays visible. */

/* Bubble layout — keep bubble bg on hover/selected, kill any pseudo
   and box-shadow side stroke. */
.mx_EventTile[data-layout="bubble"]:hover .mx_EventTile_line,
.mx_EventTile[data-layout="bubble"]:focus-within .mx_EventTile_line,
.mx_EventTile[data-layout="bubble"].mx_EventTile_selected .mx_EventTile_line,
.mx_EventTile[data-layout="bubble"].mx_EventTile_actionBarFocused .mx_EventTile_line {
    background-color: var(--backgroundColor) !important;
    box-shadow: none !important;
}
.mx_EventTile[data-layout="bubble"]:hover::before,
.mx_EventTile[data-layout="bubble"]:focus-within::before,
.mx_EventTile[data-layout="bubble"].mx_EventTile_selected::before {
    background: transparent !important;
    background-color: transparent !important;
}

/* Group/modern + IRC layouts: clear the line bg on hover/selected */
.mx_EventTile[data-layout="group"]:hover .mx_EventTile_line,
.mx_EventTile[data-layout="group"]:focus-within .mx_EventTile_line,
.mx_EventTile[data-layout="group"].mx_EventTile_selected .mx_EventTile_line,
.mx_EventTile[data-layout="group"].mx_EventTile_actionBarFocused .mx_EventTile_line,
.mx_EventTile[data-layout="irc"]:hover .mx_EventTile_line,
.mx_EventTile[data-layout="irc"]:focus-within .mx_EventTile_line,
.mx_EventTile[data-layout="irc"].mx_EventTile_selected .mx_EventTile_line,
.mx_EventTile[data-layout="irc"].mx_EventTile_actionBarFocused .mx_EventTile_line {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Avatar shadow halo on hover — kill in all layouts */
.mx_EventTile:hover .mx_EventTile_avatar img,
.mx_EventTile.mx_EventTile_selected .mx_EventTile_avatar img {
    box-shadow: none !important;
}

/* Keep the composer as a solid rounded pill in every room. The pill lives on
   the WRAPPER, not .row: wrapper already encompasses the lock icon zone
   and the right gutter, so it wraps the input and buttons without changing
   Element's composer internals. */
.mx_MessageComposer_wrapper {
    background-color: var(--cpd-color-bg-canvas-default) !important;
    border: 1px solid var(--cpd-color-border-interactive-secondary) !important;
    border-radius: 9999px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35) !important;
    margin: 8px 0 14px 0 !important;
}

/* Re-center the lock icon since pill height is slightly different from
   default composer height (same idea as before, but now relative to wrapper). */
.mx_MessageComposer_wrapper .mx_MessageComposer_e2eIconWrapper {
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
}

/* Reply mode keeps the original composer pill on the wrapper. The reply
   preview is taken out of normal flow and rendered above that pill. */
.mx_MessageComposer_wrapper:has(.mx_ReplyPreview) {
    background-color: var(--cpd-color-bg-canvas-default) !important;
    border: 1px solid var(--cpd-color-border-interactive-secondary) !important;
    border-radius: 9999px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35) !important;
    margin-top: 60px !important;
    overflow: visible !important;
}

.mx_MessageComposer_wrapper:has(.mx_ReplyPreview) .mx_ReplyPreview {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(100% + 2px) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    max-height: 58px !important;
    overflow: hidden !important;
    z-index: 1 !important;
}

.mx_MessageComposer_wrapper:has(.mx_ReplyPreview .mx_AlbumBody),
.mx_MessageComposer_wrapper:has(.mx_ReplyPreview .mx_MImageReplyBody) {
    margin-top: 78px !important;
}

.mx_MessageComposer_wrapper:has(.mx_ReplyPreview .mx_AlbumBody) .mx_ReplyPreview,
.mx_MessageComposer_wrapper:has(.mx_ReplyPreview .mx_MImageReplyBody) .mx_ReplyPreview {
    max-height: 76px !important;
    overflow: visible !important;
}

.mx_MessageComposer_wrapper:has(.mx_ReplyPreview) .mx_ReplyPreview_section {
    border-bottom: 0 !important;
    padding: 4px 36px 4px 42px !important;
    position: relative !important;
    row-gap: 2px !important;
}

.mx_MessageComposer_wrapper:has(.mx_ReplyPreview) .mx_ReplyPreview_section::before {
    content: "" !important;
    position: absolute !important;
    left: 8px !important;
    top: 8px !important;
    width: 24px !important;
    height: 24px !important;
    background-color: #6eb8ff !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 6.5V3L3 10l7 7v-3.7c5.2 0 8.3 1.7 11 5.7-.7-5.4-3.8-11.7-11-12.5Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 6.5V3L3 10l7 7v-3.7c5.2 0 8.3 1.7 11 5.7-.7-5.4-3.8-11.7-11-12.5Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.mx_MessageComposer_wrapper:has(.mx_ReplyPreview) .mx_ReplyPreview_header {
    opacity: 1 !important;
    position: absolute !important;
    top: 2px !important;
    right: 0 !important;
}

.mx_MessageComposer_wrapper:has(.mx_ReplyPreview) .mx_ReplyPreview_header > span {
    display: none !important;
}

.mx_MessageComposer_wrapper:has(.mx_ReplyPreview) .mx_ReplyPreview_header_cancel {
    opacity: 1 !important;
}

.mx_MessageComposer_wrapper:has(.mx_ReplyPreview) .mx_ReplyPreview_header_cancel svg {
    color: #ffffff !important;
    opacity: 1 !important;
}

.mx_MessageComposer_wrapper:has(.mx_ReplyPreview) .mx_ReplyPreview_header_cancel:hover svg,
.mx_MessageComposer_wrapper:has(.mx_ReplyPreview) .mx_ReplyPreview_header_cancel:focus-visible svg {
    color: #ffffff !important;
}

.mx_MessageComposer_wrapper:has(.mx_ReplyPreview) .mx_ReplyTile,
.mx_MessageComposer_wrapper:has(.mx_ReplyPreview) .mx_ReplyTile > a,
.mx_MessageComposer_wrapper:has(.mx_ReplyPreview) .mx_ReplyTile_sender {
    min-width: 0 !important;
}

.mx_MessageComposer_wrapper:has(.mx_ReplyPreview) .mx_ReplyTile .mx_EventTile_content {
    -webkit-line-clamp: 1 !important;
    overflow: hidden !important;
}

/* Albums in reply previews render as full timeline media by default.
   Keep only the first thumbnail compact so media replies do not cover the
   lifted composer area. Timeline album rendering is not affected. */
.mx_MessageComposer_wrapper:has(.mx_ReplyPreview) .mx_ReplyPreview .mx_AlbumBody {
    width: 64px !important;
    max-width: 64px !important;
    height: 38px !important;
    max-height: 38px !important;
    overflow: hidden !important;
    border-radius: 4px !important;
}

.mx_MessageComposer_wrapper:has(.mx_ReplyPreview) .mx_ReplyPreview .mx_AlbumBody_grid {
    display: block !important;
    width: 64px !important;
    max-width: 64px !important;
    height: 38px !important;
    max-height: 38px !important;
    overflow: hidden !important;
    border-radius: 4px !important;
}

.mx_MessageComposer_wrapper:has(.mx_ReplyPreview) .mx_ReplyPreview .mx_AlbumBody_cellPos {
    display: none !important;
}

.mx_MessageComposer_wrapper:has(.mx_ReplyPreview) .mx_ReplyPreview .mx_AlbumBody_cellPos:first-child {
    display: block !important;
    position: static !important;
    width: 64px !important;
    height: 38px !important;
}

.mx_MessageComposer_wrapper:has(.mx_ReplyPreview) .mx_ReplyPreview .mx_AlbumBody_cell {
    width: 64px !important;
    height: 38px !important;
    border-radius: 4px !important;
}

.mx_MessageComposer_wrapper:has(.mx_ReplyPreview) .mx_ReplyPreview .mx_AlbumBody_cell_img {
    width: 64px !important;
    height: 38px !important;
    object-fit: cover !important;
}

.mx_MessageComposer_wrapper:has(.mx_ReplyPreview) .mx_ReplyPreview .mx_AlbumBody_caption {
    display: none !important;
}

.mx_MessageComposer_wrapper:has(.mx_ReplyPreview) .mx_MessageComposer_e2eIconWrapper {
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
}

/* Mention highlight — Element's default is an olive full-row tint that
   fights with chat wallpaper. We drop the visual entirely: bold
   nickname in the message body and the unread counter in the sidebar
   are a sufficient signal (iMessage pattern). */
.mx_EventTile.mx_EventTile_highlight::before {
    background-color: transparent !important;
}
.mx_EventTile.mx_EventTile_highlight .mx_EventTile_avatar {
    border-color: transparent !important;
}

/* Hide the hover-activated MessageActionBar entirely.
   Its actions are already available via right-click → Element's built-in
   contextual menu (Отреагировать / Ответить / Обсудить / Редактировать /
   Закрепить / Переслать / Поделиться / Исходный код / Удалить).
   Right-click works on desktop AND as long-press on touch devices —
   no hover flicker, no extra UI, no duplicated surface. */
.mx_MessageActionBar {
    display: none !important;
}

/* Hide Element's avatar-stack read receipts — replaced by achat-read-receipts-module (✓/✓✓) */
.mx_ReadReceiptGroup,
.mx_ReadReceiptMarker {
    display: none !important;
}

/* Telegram-style meta container — time + ✓/✓✓ rendered by
   achat-read-receipts-module. Default is inline at bottom-right of the
   bubble without a background (matches text bubbles). On media bubbles
   the container is promoted to a translucent pill overlaid on the media. */
.mx_EventTile_line { position: relative; }
.achat_Meta {
    position: absolute;
    right: 8px;
    bottom: 5px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    line-height: 1;
    color: currentColor;
    opacity: 0.7;
    user-select: none;
    pointer-events: auto;
}
.achat_Time { opacity: 1; }
.achat_ReadCheck {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    color: currentColor;
}
.achat_ReadCheck svg { display: block; }
.achat_ReadCheck:hover { opacity: 1; }
.achat_ReadCheck[aria-label="прочитано"] { color: #0dbd8b; opacity: 1; }

/* Own media bubbles (images, video, albums): reserve a strip at the bottom
   before read checks mount, so changing delivery/read state cannot resize
   the bubble. */
.mx_EventTile[data-layout="bubble"][data-self="true"]
    .mx_EventTile_line:has(.mx_MImageBody, .mx_MVideoBody, [class*="AlbumBody"i]) {
    padding-bottom: 26px !important;
    box-sizing: content-box;
}
.mx_EventTile[data-layout="bubble"].achat_OwnMeta
    .mx_EventTile_line:has(.mx_MImageBody, .mx_MVideoBody, [class*="AlbumBody"i])
    .achat_Meta {
    right: 10px;
    bottom: 5px;
    opacity: 1;
}

/* Hide Element's native timestamp only on tiles we took over */
.mx_EventTile.achat_OwnMeta .mx_MessageTimestamp {
    display: none !important;
}

/* Reserve inline space at the end of the text body so the absolute-positioned
   meta pill (time + checkmarks) doesn't overlap with the last line of text.
   Telegram uses the same trick — the meta sits in the shortened last line. */
.mx_EventTile[data-layout="bubble"].achat_OwnMeta .mx_MTextBody::after {
    content: "";
    display: inline-block;
    width: 54px;
    height: 12px;
    vertical-align: text-bottom;
}

/* Image/media caption: don't let it sit flush against the picture. Add a gap
   above the caption and a little more bottom room so the time pill isn't
   cramped against it. Scoped to caption tiles so captionless media is untouched. */
.mx_EventTile_content:has(.mx_EventTile_caption) .mx_EventTile_caption {
    margin-top: 8px;
}
.mx_EventTile[data-layout="bubble"][data-self="true"]
    .mx_EventTile_line:has(.mx_EventTile_caption) {
    padding-bottom: 34px !important;
}
.mx_EventTile[data-layout="bubble"].achat_OwnMeta
    .mx_EventTile_line:has(.mx_EventTile_caption) .achat_Meta {
    right: 12px !important;
    bottom: 9px !important;
}

/* Popup with list of readers (who read + when) */
.achat_ReadersPopup {
    position: absolute;
    z-index: 9999;
    min-width: 200px;
    max-width: 320px;
    padding: 8px 12px;
    background: var(--cpd-color-bg-canvas-default);
    border: 1px solid var(--cpd-color-border-interactive-secondary);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    font-size: 13px;
    color: var(--cpd-color-text-primary);
}
.achat_ReadersPopup_title {
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--cpd-color-text-secondary);
    margin-bottom: 6px;
}
.achat_ReadersPopup_list {
    max-height: 320px;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0 -4px;
    padding: 0 4px;
}
.achat_ReadersPopup_item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}
.achat_ReadersPopup_avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cpd-color-bg-subtle-primary);
    color: var(--cpd-color-text-primary);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
}
.achat_ReadersPopup_avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.achat_ReadersPopup_meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.achat_ReadersPopup_name {
    font-weight: 500;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.achat_ReadersPopup_time {
    color: var(--cpd-color-text-secondary);
    font-size: 11px;
}
.achat_ReadersPopup_more {
    padding: 6px 0 2px;
    color: var(--cpd-color-text-secondary);
    font-size: 12px;
    border-top: 1px solid var(--cpd-color-border-interactive-secondary);
    margin-top: 4px;
}
.achat_ReadersPopup_empty { color: var(--cpd-color-text-secondary); font-style: italic; }

/* ARENA controls space structure centrally on the server. */
.mx_SpaceItem_new:has([data-testid="create-space-button"]),
[data-testid="create-space-button"],
.mx_SpaceButton_new[aria-label="Создать пространство"],
.mx_SpaceItem_new .mx_SpaceButton_new {
    display: none !important;
}

/* Dark theme: the stock external-link blue (--cpd-color-blue-1100, #064ab1) is
   too dark on dark backgrounds and reads as grey. Use a lighter blue so links
   stay legible in incoming and outgoing messages. Light theme keeps #064ab1. */
body.cpd-theme-dark,
.cpd-theme-dark {
    --cpd-color-text-link-external: #6ea8fe !important;
}

/* Full-width scroll/wheel area with centred content. The chat column is capped
   at 1200px and centred on wide screens, but the cap sat on the timeline/scroll
   container itself, so the empty side margins were a dead zone where the mouse
   wheel did not scroll the chat ("слева не крутит"). Make the scroll container
   span the full width so the wheel works everywhere, and centre the message
   content inside it instead — the chat stays visually centred and aligned with
   the composer. */
.mx_RoomView_timeline {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.mx_RoomView_messageListWrapper {
    max-width: 1200px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}