/*
 * Единый визуальный язык кнопок основного приложения:
 * белое содержимое, без рамок и самостоятельной подложки.
 *
 * Исключения:
 * - фильтры групп на экране «Связи» (.fg-filter-chip) сохраняют прежний вид;
 * - нижний toolbar (.toolbar-btn) полностью сохраняет исходное оформление.
 */
:root button:not(.fg-filter-chip):not(.toolbar-btn),
:root a.primary-btn,
:root a.secondary-btn,
:root a.destructive-btn,
:root a.ghost-btn,
:root a.icon-btn,
:root a.text-btn {
  color: #ffffff !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition:
    transform 90ms ease,
    box-shadow 90ms ease,
    background-color 90ms ease,
    filter 120ms ease;
}

:root button:not(.fg-filter-chip):not(.toolbar-btn):hover,
:root a.primary-btn:hover,
:root a.secondary-btn:hover,
:root a.destructive-btn:hover,
:root a.ghost-btn:hover,
:root a.icon-btn:hover,
:root a.text-btn:hover {
  color: #ffffff !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: brightness(1.12);
}

/* Короткий press-feedback: кнопка визуально уходит внутрь поверхности.
 * Эффект существует только пока кнопка физически нажата.
 */
:root button:not(.fg-filter-chip):not(.toolbar-btn):active,
:root a.primary-btn:active,
:root a.secondary-btn:active,
:root a.destructive-btn:active,
:root a.ghost-btn:active,
:root a.icon-btn:active,
:root a.text-btn:active {
  color: #ffffff !important;
  background: rgba(0, 0, 0, 0.12) !important;
  border: 0 !important;
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.58),
    inset 0 -1px 2px rgba(255, 255, 255, 0.08) !important;
  transform: translateY(1px) scale(0.97);
  filter: brightness(0.9);
}


:root button:not(.fg-filter-chip):not(.toolbar-btn):disabled,
:root button:not(.fg-filter-chip):not(.toolbar-btn)[aria-disabled='true'],
:root a.primary-btn[aria-disabled='true'],
:root a.secondary-btn[aria-disabled='true'],
:root a.destructive-btn[aria-disabled='true'],
:root a.ghost-btn[aria-disabled='true'],
:root a.icon-btn[aria-disabled='true'],
:root a.text-btn[aria-disabled='true'] {
  color: rgba(255, 255, 255, 0.42) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}

/* Убираем декоративные стеклянные/неоновые подложки самих кнопок.
 * Переключатель канала исключён: его ::after является функциональным бегунком.
 * Toolbar исключён целиком: у него остаётся исходная графика приложения.
 */
:root button:not(.fg-filter-chip):not(.toolbar-btn):not(.channel-toggle-btn)::before,
:root button:not(.fg-filter-chip):not(.toolbar-btn):not(.channel-toggle-btn)::after {
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Toolbar возвращён к исходному оформлению. Добавляем только краткое вдавливание
 * на физическое нажатие; active-вкладка после отпускания остаётся такой, как была.
 */
:root .toolbar-btn {
  transition:
    transform 90ms ease,
    box-shadow 90ms ease,
    background-color 90ms ease,
    color 120ms ease;
}

:root .toolbar-btn:active {
  transform: translateY(1px) scale(0.96);
  background: rgba(0, 0, 0, 0.14) !important;
  box-shadow:
    inset 0 4px 10px rgba(0, 0, 0, 0.62),
    inset 0 -1px 2px rgba(255, 255, 255, 0.08) !important;
}

/* Клавиатурный фокус остаётся различимым без постоянной рамки кнопки. */
:root button:not(.fg-filter-chip):not(.toolbar-btn):focus-visible,
:root a.primary-btn:focus-visible,
:root a.secondary-btn:focus-visible,
:root a.destructive-btn:focus-visible,
:root a.ghost-btn:focus-visible,
:root a.icon-btn:focus-visible,
:root a.text-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.62);
  outline-offset: 2px;
}

/* Уведомления: «Ответы / События».
 * ВАЖНО: общий button:hover выше имеет большую специфичность, поэтому для выбранной
 * вкладки фиксируем отдельный data-selected и перечисляем hover/focus/active.
 * Так выбранная кнопка остаётся визуально вдавленной и после отпускания мыши.
 */
:root body .notifications-screen .tabs button.notification-tab-btn[data-selected='true'],
:root body .notifications-screen .tabs button.notification-tab-btn[data-selected='true']:hover,
:root body .notifications-screen .tabs button.notification-tab-btn[data-selected='true']:focus,
:root body .notifications-screen .tabs button.notification-tab-btn[data-selected='true']:focus-visible,
:root body .notifications-screen .tabs button.notification-tab-btn[data-selected='true']:active {
  color: #ffffff !important;
  background: rgba(0, 0, 0, 0.18) !important;
  border: 0 !important;
  box-shadow:
    inset 0 4px 11px rgba(0, 0, 0, 0.72),
    inset 0 -1px 2px rgba(255, 255, 255, 0.10) !important;
  transform: translateY(1px) scale(0.965) !important;
  filter: brightness(0.88) !important;
}

:root body .notifications-screen .tabs button.notification-tab-btn[data-selected='false'],
:root body .notifications-screen .tabs button.notification-tab-btn[data-selected='false']:hover {
  color: #ffffff !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}

/* Неактивная вкладка кратко вдавливается во время физического нажатия.
 * После click data-selected меняется и постоянный стиль остаётся уже на ней.
 */
:root body .notifications-screen .tabs button.notification-tab-btn[data-selected='false']:active {
  background: rgba(0, 0, 0, 0.12) !important;
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.58),
    inset 0 -1px 2px rgba(255, 255, 255, 0.08) !important;
  transform: translateY(1px) scale(0.97) !important;
  filter: brightness(0.9) !important;
}

/* Верхний toolbar — отдельная цветовая роль: золотой текст и иконки.
 * Это правило намеренно расположено после глобального белого button-rule. */
:root .topbar-slot button:not(.fg-filter-chip):not(.toolbar-btn),
:root .topbar-slot button:not(.fg-filter-chip):not(.toolbar-btn):hover,
:root .topbar-slot button:not(.fg-filter-chip):not(.toolbar-btn):focus,
:root .topbar-slot button:not(.fg-filter-chip):not(.toolbar-btn):focus-visible,
:root .topbar-slot button:not(.fg-filter-chip):not(.toolbar-btn):active,
:root .network-header-overlay button:not(.fg-filter-chip):not(.toolbar-btn),
:root .network-header-overlay button:not(.fg-filter-chip):not(.toolbar-btn):hover,
:root .network-header-overlay button:not(.fg-filter-chip):not(.toolbar-btn):focus,
:root .network-header-overlay button:not(.fg-filter-chip):not(.toolbar-btn):focus-visible,
:root .network-header-overlay button:not(.fg-filter-chip):not(.toolbar-btn):active {
  color: var(--app-topbar-gold) !important;
}

/* Верхний toolbar: вместо золотого акцента — белые глифы с голубым ореолом.
 * Правило стоит последним, чтобы перекрыть общий белый button-reset и старую золотую роль. */
:root .topbar-slot button:not(.fg-filter-chip):not(.toolbar-btn),
:root .topbar-slot button:not(.fg-filter-chip):not(.toolbar-btn):hover,
:root .topbar-slot button:not(.fg-filter-chip):not(.toolbar-btn):focus,
:root .topbar-slot button:not(.fg-filter-chip):not(.toolbar-btn):active,
:root .network-header-overlay button:not(.fg-filter-chip):not(.toolbar-btn),
:root .network-header-overlay button:not(.fg-filter-chip):not(.toolbar-btn):hover,
:root .network-header-overlay button:not(.fg-filter-chip):not(.toolbar-btn):focus,
:root .network-header-overlay button:not(.fg-filter-chip):not(.toolbar-btn):active {
  color: #F7FBFF !important;
  text-shadow:
    0 0 5px rgba(92, 190, 255, 0.72),
    0 0 12px rgba(72, 145, 255, 0.34) !important;
  filter: drop-shadow(0 0 4px rgba(92, 190, 255, 0.56)) !important;
}

:root .topbar-slot button:not(.fg-filter-chip):not(.toolbar-btn):focus-visible,
:root .network-header-overlay button:not(.fg-filter-chip):not(.toolbar-btn):focus-visible {
  color: #FFFFFF !important;
  outline: none !important;
  filter:
    drop-shadow(0 0 5px rgba(110, 205, 255, 0.82))
    drop-shadow(0 0 10px rgba(72, 145, 255, 0.42)) !important;
}

/* Личный чат: нижние иконки используют ту же бело-голубую роль, что и верхний toolbar. */
:root .dm-chat-input button.dm-emoji-btn,
:root .dm-chat-input button.dm-send-btn,
:root .dm-chat-input button.dm-edit-banner__close,
:root .dm-chat-input button.dm-emoji-btn:hover,
:root .dm-chat-input button.dm-send-btn:hover,
:root .dm-chat-input button.dm-edit-banner__close:hover,
:root .dm-chat-input button.dm-emoji-btn:focus,
:root .dm-chat-input button.dm-send-btn:focus,
:root .dm-chat-input button.dm-edit-banner__close:focus {
  color: #F7FBFF !important;
  text-shadow:
    0 0 5px rgba(92, 190, 255, 0.72),
    0 0 12px rgba(72, 145, 255, 0.34) !important;
  filter: drop-shadow(0 0 4px rgba(92, 190, 255, 0.46)) !important;
}

/* ===== Dropdown menu polish: persistent overflow press + text-only glowing rows ===== */
/* Menu rows stay visually transparent in every interaction state. The menu panel itself
 * remains translucent, while each action is represented only by its glowing label. */
:root .dm-head-menu-item,
:root .dm-head-menu-item:hover,
:root .dm-head-menu-item:focus,
:root .dm-head-menu-item:focus-visible,
:root .dm-head-menu-item:active,
:root .channel-menu-item,
:root .channel-menu-item:hover,
:root .channel-menu-item:focus,
:root .channel-menu-item:focus-visible,
:root .channel-menu-item:active,
:root .channel-menu-item.destructive,
:root .channel-menu-item.destructive:hover,
:root .channel-menu-item.destructive:focus-visible,
:root .channel-menu-item.destructive:active {
  color: #F7FBFF !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  transform: none !important;
  text-shadow:
    0 0 5px rgba(92, 190, 255, 0.72),
    0 0 12px rgba(72, 145, 255, 0.34) !important;
  filter: drop-shadow(0 0 4px rgba(92, 190, 255, 0.34)) !important;
}

/* Hover/focus is expressed only by a slightly stronger glyph glow, never a row plate. */
:root .dm-head-menu-item:hover,
:root .dm-head-menu-item:focus-visible,
:root .channel-menu-item:hover,
:root .channel-menu-item:focus-visible {
  color: #FFFFFF !important;
  text-shadow:
    0 0 6px rgba(110, 205, 255, 0.86),
    0 0 15px rgba(72, 145, 255, 0.46) !important;
  filter: drop-shadow(0 0 5px rgba(92, 190, 255, 0.46)) !important;
}

/* Keep the overflow trigger visibly pressed for exactly as long as its menu is open. */
:root .topbar-slot .dm-head-menu-btn[aria-expanded='true'],
:root .topbar-slot .channels-top-more-btn[aria-expanded='true'],
:root .topbar-slot .network-top-more-btn[aria-expanded='true'],
:root .network-header-overlay .network-top-more-btn[aria-expanded='true'] {
  color: #FFFFFF !important;
  background: rgba(0, 0, 0, 0.12) !important;
  border: 0 !important;
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.58),
    inset 0 -1px 2px rgba(255, 255, 255, 0.08) !important;
  transform: translateY(1px) scale(0.97) !important;
  text-shadow:
    0 0 5px rgba(92, 190, 255, 0.72),
    0 0 12px rgba(72, 145, 255, 0.34) !important;
  filter: brightness(0.9) drop-shadow(0 0 4px rgba(92, 190, 255, 0.56)) !important;
}


/* ===== Authoritative open-menu trigger state (2026-08-23) =====
 * A dedicated JS class, not :active/:focus, owns the pressed state while a menu is open.
 * Kept at the very end of the stylesheet so older compatibility rules cannot cancel it. */
:root .dm-head-menu-btn.menu-open-pressed,
:root .channels-top-more-btn.menu-open-pressed,
:root .network-top-more-btn.menu-open-pressed,
:root .topbar-slot .dm-head-menu-btn.menu-open-pressed,
:root .topbar-slot .channels-top-more-btn.menu-open-pressed,
:root .topbar-slot .network-top-more-btn.menu-open-pressed,
:root .network-header-overlay .network-top-more-btn.menu-open-pressed {
  color: #FFFFFF !important;
  background: rgba(0, 0, 0, 0.14) !important;
  border: 0 !important;
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.62),
    inset 0 -1px 2px rgba(255, 255, 255, 0.09) !important;
  transform: translateY(1px) scale(0.97) !important;
  text-shadow:
    0 0 5px rgba(92, 190, 255, 0.76),
    0 0 12px rgba(72, 145, 255, 0.38) !important;
  filter: brightness(0.9) drop-shadow(0 0 4px rgba(92, 190, 255, 0.58)) !important;
  animation: none !important;
}

/* ===== Final dropdown behavior: truly transparent menu + persistent pressed trigger =====
 * The dropdown itself has no visual surface. Only the global dim layer affects content
 * behind it. The overflow trigger gets its own inset pseudo-layer so the pressed state
 * cannot be cancelled by the generic button reset after pointer release. */
:root .dm-head-menu,
:root .dm-head-menu--portal,
:root .channel-menu-wrap,
:root .channel-menu-wrap--portal {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

:root .dm-head-menu::before,
:root .dm-head-menu::after,
:root .channel-menu-wrap::before,
:root .channel-menu-wrap::after,
:root .channel-menu-wrap--portal::before,
:root .channel-menu-wrap--portal::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* No separator or hover plate: the dropdown is literally labels over faded content. */
:root .channel-menu-divider {
  display: none !important;
}

:root .dm-head-menu-item,
:root .dm-head-menu-item:hover,
:root .dm-head-menu-item:focus,
:root .dm-head-menu-item:focus-visible,
:root .dm-head-menu-item:active,
:root .channel-menu-item,
:root .channel-menu-item:hover,
:root .channel-menu-item:focus,
:root .channel-menu-item:focus-visible,
:root .channel-menu-item:active,
:root .channel-menu-item.destructive,
:root .channel-menu-item.destructive:hover,
:root .channel-menu-item.destructive:focus-visible,
:root .channel-menu-item.destructive:active {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Keep the channels backdrop out of the toolbar itself, matching the other pages. */
:root .channels-menu-overlay {
  top: calc(var(--topbar-height, 64px) + var(--call-minimized-bar-height, 0px)) !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: rgba(0, 0, 0, 0.49) !important;
}

/* Authoritative pressed well. It is independent from :active/:focus and survives until
 * JS removes menu-open-pressed / aria-expanded=true on actual menu close. */
:root .dm-head-menu-btn,
:root .channels-top-more-btn,
:root .network-top-more-btn {
  position: relative !important;
  isolation: isolate;
}

:root .dm-head-menu-btn.menu-open-pressed::before,
:root .channels-top-more-btn.menu-open-pressed::before,
:root .network-top-more-btn.menu-open-pressed::before,
:root .dm-head-menu-btn[aria-expanded='true']::before,
:root .channels-top-more-btn[aria-expanded='true']::before,
:root .network-top-more-btn[aria-expanded='true']::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 2px !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: rgba(0, 0, 0, 0.18) !important;
  background-image: none !important;
  box-shadow:
    inset 0 4px 10px rgba(0, 0, 0, 0.72),
    inset 0 -1px 2px rgba(255, 255, 255, 0.10) !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

:root .dm-head-menu-btn.menu-open-pressed,
:root .channels-top-more-btn.menu-open-pressed,
:root .network-top-more-btn.menu-open-pressed,
:root .dm-head-menu-btn[aria-expanded='true'],
:root .channels-top-more-btn[aria-expanded='true'],
:root .network-top-more-btn[aria-expanded='true'] {
  background: transparent !important;
  box-shadow: none !important;
  transform: translateY(1px) scale(0.97) !important;
  filter: brightness(0.90) drop-shadow(0 0 4px rgba(92, 190, 255, 0.58)) !important;
  animation: none !important;
}

:root .dm-head-menu-btn.menu-open-pressed > *,
:root .channels-top-more-btn.menu-open-pressed > *,
:root .network-top-more-btn.menu-open-pressed > *,
:root .dm-head-menu-btn[aria-expanded='true'] > *,
:root .channels-top-more-btn[aria-expanded='true'] > *,
:root .network-top-more-btn[aria-expanded='true'] > * {
  position: relative;
  z-index: 1;
}

/* ===== Definitive open overflow state + lighter menu dim (2026-08-23) =====
 * The generic button reset above has specificity 0,4,1, so the persistent
 * menu state must beat it directly on the real button (not on ::before).
 * Keep this visually identical to the physical :active press until JS closes the menu. */
:root body .topbar-slot button.dm-head-menu-btn.menu-open-pressed,
:root body .topbar-slot button.dm-head-menu-btn[aria-expanded='true'],
:root body .topbar-slot button.channels-top-more-btn.menu-open-pressed,
:root body .topbar-slot button.channels-top-more-btn[aria-expanded='true'],
:root body .topbar-slot button.network-top-more-btn.menu-open-pressed,
:root body .topbar-slot button.network-top-more-btn[aria-expanded='true'],
:root body .network-header-overlay button.network-top-more-btn.menu-open-pressed,
:root body .network-header-overlay button.network-top-more-btn[aria-expanded='true'] {
  color: #ffffff !important;
  background: rgba(0, 0, 0, 0.12) !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.58),
    inset 0 -1px 2px rgba(255, 255, 255, 0.08) !important;
  transform: translateY(1px) scale(0.97) !important;
  filter: brightness(0.9) drop-shadow(0 0 4px rgba(92, 190, 255, 0.56)) !important;
  animation: none !important;
}

/* The menu itself is still fully transparent; only the content below is dimmed.
 * Previous alpha was ~0.49. Reduce it by about 20% relatively -> ~0.39. */
:root body .ui-menu-dim-layer,
:root body .dm-head-menu-backdrop,
:root body .channels-menu-overlay {
  background: rgba(0, 0, 0, 0.39) !important;
}

/* ===== Round persistent overflow press + subtle background depth (2026-08-23) =====
 * The open overflow control is a circular recessed well. While a topbar menu is
 * present, only the content plane below the toolbar recedes slightly; the toolbar
 * and the fully transparent menu stay at full size. */
:root body .topbar-slot button.dm-head-menu-btn.menu-open-pressed,
:root body .topbar-slot button.dm-head-menu-btn[aria-expanded='true'],
:root body .topbar-slot button.channels-top-more-btn.menu-open-pressed,
:root body .topbar-slot button.channels-top-more-btn[aria-expanded='true'],
:root body .topbar-slot button.network-top-more-btn.menu-open-pressed,
:root body .topbar-slot button.network-top-more-btn[aria-expanded='true'],
:root body .network-header-overlay button.network-top-more-btn.menu-open-pressed,
:root body .network-header-overlay button.network-top-more-btn[aria-expanded='true'] {
  border-radius: 50% !important;
}

:root body .topbar-slot button.dm-head-menu-btn.menu-open-pressed::before,
:root body .topbar-slot button.dm-head-menu-btn[aria-expanded='true']::before,
:root body .topbar-slot button.channels-top-more-btn.menu-open-pressed::before,
:root body .topbar-slot button.channels-top-more-btn[aria-expanded='true']::before,
:root body .topbar-slot button.network-top-more-btn.menu-open-pressed::before,
:root body .topbar-slot button.network-top-more-btn[aria-expanded='true']::before,
:root body .network-header-overlay button.network-top-more-btn.menu-open-pressed::before,
:root body .network-header-overlay button.network-top-more-btn[aria-expanded='true']::before {
  border-radius: 50% !important;
}

/* Depth cue: the feed/graph plane gently recedes while a topbar overflow menu is open.
 * Keep the scale small enough that opening the menu does not feel like a page jump. */
@supports selector(body:has(*)) {
  :root body .app-shell > .screen-content {
    transform-origin: 50% 50%;
    transition: transform 180ms cubic-bezier(0.22, 0.61, 0.36, 1), filter 180ms ease;
  }

  :root body:has(> .ui-menu-dim-layer) .app-shell > .screen-content,
  :root body:has(> #modal-root #channels-top-menu-overlay) .app-shell > .screen-content {
    transform: scale(0.975);
    filter: brightness(0.97) saturate(0.96);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root body .app-shell > .screen-content {
    transition: none !important;
  }
}