/**
 * Общий слой интерфейса: то, что должно вести себя одинаково на всех страницах.
 *
 * Подключается после base.css и до постраничных стилей. Здесь нет вёрстки
 * конкретных экранов — только доступность, состояния и мелкая полировка,
 * которой не хватало во всех 19 файлах сразу.
 */

/* Браузерное [hidden]{display:none} — правило типа элемента, его перебивает
   любой class с display. Панель «Ещё» задаёт display:flex и оставалась на
   экране, хотя JS выставил hidden. !important возвращает атрибуту силу. */
[hidden] {
  display: none !important;
}

/* ==========================================
   ДОСТУПНОСТЬ
   ========================================== */

/* Раньше фокус нигде не было видно: пройти форму с клавиатуры было невозможно.
   :focus-visible показывает кольцо только при навигации с клавиатуры и не мешает
   тем, кто пользуется мышью. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Браузеры без :focus-visible всё равно должны показывать фокус. */
:where(a, button, input, select, textarea):focus:not(:focus-visible) {
  outline: none;
}

/* Ссылка «перейти к содержимому» для тех, кто ходит табом. */
.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -100px;
  z-index: var(--z-skip-link);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  transition: top var(--duration) var(--ease);
}

.skip-link:focus {
  top: var(--space-3);
}

/* Экранным дикторам — да, глазам — нет. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================
   БАЗОВОЕ ПОВЕДЕНИЕ
   ========================================== */

::selection {
  background: var(--brand-200);
  color: var(--ink-900);
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* Длинные имена файлов и ссылки больше не рвут вёрстку. */
body {
  overflow-wrap: break-word;
}

img,
video {
  max-width: 100%;
  height: auto;
}

/* Полосы прокрутки в тон теме, а не системные светлые поверх тёмного. */
* {
  scrollbar-color: var(--border-strong) transparent;
  scrollbar-width: thin;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: var(--radius-full);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--text-faint);
  background-clip: content-box;
}

/* ==========================================
   СОСТОЯНИЯ
   ========================================== */

/* Единое поведение для всего, что нельзя нажать: раньше каждая страница
   гасила элементы по-своему, и часть неактивных кнопок выглядела активной. */
:where(button, .btn, [role='button'], input, select, textarea)[disabled],
:where(button, .btn, [role='button'])[aria-disabled='true'],
.is-disabled {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}

:where(button, .btn, [role='button'], a.btn):not([disabled]) {
  cursor: pointer;
  transition: var(--transition);
}

/* Нажатие даёт отклик — без него интерфейс кажется зависшим. */
:where(button, .btn, [role='button']):not([disabled]):active {
  transform: translateY(1px);
}

/* Загрузка: элемент занят, но не «умер». */
.is-loading {
  cursor: progress;
  opacity: .7;
}

/* ==========================================
   МОБИЛЬНЫЙ ИНТЕРФЕЙС
   ========================================== */

@media (max-width: 768px) {
  /* Палец — это ~9 мм. Всё, что меньше 44px, промахивается. */
  .mobile-bottom-panel .nav-item,
  header .nav-item,
  .chat-item,
  .btn,
  button {
    min-height: var(--tap-target);
  }

  /* Ширина — такая же цель нажатия, как высота: кнопка «+» в корзине была
     24px шириной, лупа — 20px. min-width только расширяет узкие кнопки.
     align-items нужен там же: растянув кнопку до 44px, нельзя оставлять
     иконку прижатой к верхней кромке — так уехала вверх лупа в поиске.
     Оба свойства не трогают кнопки, которым и так хватает размера. */
  button {
    min-width: var(--tap-target);
    align-items: center;
  }

  /* Исключение из цели нажатия: сердечко лежит поверх фотографии товара,
     и круг в 44px занимал заметную часть карточки. 34px с запасом
     попадается пальцем, а карточку не загораживает. */
  .favourite_btn {
    min-width: 34px;
    min-height: 34px;
  }

  .mobile-bottom-panel .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
  }

  /* iOS увеличивает страницу, если шрифт поля меньше 16px. */
  input,
  select,
  textarea {
    font-size: max(16px, var(--text-base));
  }
}

/* ==========================================
   ПОЛИРОВКА ОБЩЕЙ ОБВЯЗКИ
   ========================================== */

header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.mobile-bottom-panel {
  background: var(--surface);
  border-top: 1px solid var(--border);
}

/* Активный пункт читался только по цвету иконки — добавляем явный акцент. */
header .nav-item.active,
.mobile-bottom-panel .nav-item.active {
  color: var(--accent);
  font-weight: 600;
}

/* Счётчик непрочитанных: раньше пустой ноль занимал место и мигал при загрузке. */
.message-badge:not(.has-messages) {
  display: none;
}

/* ==========================================
   ФОРМЫ
   ========================================== */

:where(input, select, textarea) {
  font-family: inherit;
  color: var(--text);
}

:where(input, select, textarea)::placeholder {
  color: var(--text-faint);
  opacity: 1;
}

/* Ошибку видно не только по цвету — это важно при дальтонизме. */
.field-error,
[aria-invalid='true'] {
  border-color: var(--danger) !important;
}

.field-error-text {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--danger-text);
  font-size: var(--text-sm);
  margin-top: var(--space-2);
}

.field-error-text::before {
  content: '!';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

/* ==========================================
   ПУСТЫЕ СОСТОЯНИЯ И ЗАГРУЗКА
   ========================================== */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-5);
  text-align: center;
  color: var(--text-muted);
}

/* Скелет вместо крутилки: страница не прыгает, когда данные приезжают. */
.skeleton {
  background: linear-gradient(90deg,
      var(--surface-hover) 25%,
      var(--surface-sunken) 37%,
      var(--surface-hover) 63%);
  background-size: 400% 100%;
  animation: skeleton-sweep 1.4s ease infinite;
  border-radius: var(--radius-sm);
  color: transparent !important;
  user-select: none;
}

@keyframes skeleton-sweep {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ==========================================
   ПЕЧАТЬ
   Юридические страницы и счета иногда печатают.
   ========================================== */

@media print {
  header,
  footer,
  .mobile-bottom-panel,
  .cookie-consent-banner,
  #loader {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}

/* ==========================================
   ВЫБОР ТЕМЫ (в настройках профиля)
   ========================================== */

.theme-choice {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  flex-wrap: wrap;
}

.theme-choice-option {
  /* 1 1 0, а не 1 1 auto: иначе ширина зависит от длины подписи и три
     кнопки выходят разной величины. */
  flex: 1 1 0;
  min-height: var(--tap-target);
  /* Без flex подпись прижималась к верху 44-пиксельной коробки, и блок
     выглядел перекошенным. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-1);
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--text-sm);
  white-space: nowrap;
}

/* Подсветка по наведению — только там, где есть курсор: на телефоне
   состояние hover залипает после касания и сбивает с толку. */
@media (hover: hover) {
  .theme-choice-option:hover {
    color: var(--text);
  }
}

/* Выбранный вариант виден не только цветом текста, но и подложкой */
.theme-choice-option.active {
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  box-shadow: var(--shadow-xs);
}

/* ==========================================
   ПАНЕЛЬ ДОПОЛНИТЕЛЬНЫХ РАЗДЕЛОВ
   Пять кнопок — предел для нижней панели, а разделов больше.
   ========================================== */

.nav-more {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
}

.nav-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-backdrop);
  background: var(--overlay);
  animation: nav-sheet-fade var(--duration) var(--ease);
}

.nav-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3)
           calc(var(--space-4) + var(--safe-bottom));
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-lg);
  animation: nav-sheet-rise var(--duration) var(--ease);
}

/* Полоска-захват: подсказывает, что панель выдвижная */
.nav-sheet-handle {
  width: 36px;
  height: 4px;
  margin: var(--space-2) auto var(--space-3);
  border-radius: var(--radius-full);
  background: var(--border-strong);
}

.nav-sheet-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text);
  text-decoration: none;
  min-height: var(--tap-target);
}

.nav-sheet-item:hover,
.nav-sheet-item:focus-visible {
  background: var(--surface-hover);
}

.nav-sheet-item.active {
  background: var(--accent-soft);
  color: var(--accent-hover);
}

.nav-sheet-item svg {
  flex-shrink: 0;
}

.nav-sheet-item span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.nav-sheet-item b {
  font-weight: 600;
  font-size: var(--text-base);
}

/* Подпись объясняет, что за разделом — по одному названию не всегда ясно */
.nav-sheet-item small {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

/* Фон под открытой панелью не прокручивается */
body.nav-sheet-open {
  overflow: hidden;
}

@keyframes nav-sheet-rise {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@keyframes nav-sheet-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Панель разделов нужна и на десктопе: в шапке помещается не всё, и
   держать половину пунктов только на телефоне странно. Раньше здесь
   стояло display: none — от времён, когда все разделы были в шапке. */

/* ==========================================
   ПОИСК ПО СТРАНИЦЕ
   ========================================== */

/* Скрытая поиском карточка. !important нужен потому, что многие списки
   задают своим элементам display в собственных правилах. */
.page-search-hidden {
  display: none !important;
}

.page-search-empty {
  margin: var(--space-2) 0;
  padding: var(--space-2);
  text-align: center;
  color: var(--text-muted);
  font-size: .9rem;
}

/* Подсветка совпадения в запасном режиме — там, где список не объявлен. */
mark.page-search-hit {
  background: color-mix(in srgb, var(--accent, #2f6bf0) 30%, transparent);
  color: inherit;
  border-radius: var(--radius-xs);
  padding: 0 2px;
}

/* ==========================================
   КНОПКА «НАЗАД»
   Одна на весь фронт: раньше в каждом шаблоне была своя, и они
   отличались размером, формой и наличием подписи рядом.
   Матовый круг поверх содержимого — так кнопка читается на любом
   фоне, включая фотографию товара.
   ========================================== */

.nd-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid var(--nd-back-border);
  border-radius: 50%;
  background: var(--nd-back-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  color: var(--text-color);
  cursor: pointer;
  transition: background var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.nd-back svg {
  width: 18px;
  height: 18px;
  /* Стрелка оптически смещена влево от центра круга. */
  margin-right: 2px;
}

/* Подпись рядом с кнопкой убрана: значок понятен без слов, а надпись
   «На главную» занимала место и ломала выравнивание шапки. */
.nd-back span,
.nd-back .back-text {
  display: none;
}

@media (hover: hover) {
  .nd-back:hover {
    background: var(--nd-back-bg-hover);
  }
}

.nd-back:active {
  transform: scale(.94);
}

/* Существующие кнопки «назад» приводим к общему виду, не переписывая
   разметку двух десятков шаблонов. */
.back-to-main,
.back_button,
.back-button-image,
.icon_phones.back_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  border: 1px solid var(--nd-back-border);
  border-radius: 50%;
  background: var(--nd-back-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  color: var(--text-color);
  overflow: hidden;
  font-size: 0;          /* подпись рядом со значком убираем */
  text-decoration: none;
}

.back-to-main img,
.back_button img,
.back-button-image img,
.back-to-main svg,
.back_button svg,
.back-button-image svg {
  width: 18px;
  height: 18px;
  margin: 0;
}

/* Кнопка лежит поверх фотографии товара — цель нажатия ей не наращиваем,
   иначе круг закрывает снимок. 36px попадается пальцем. */
@media (max-width: 768px) {
  .back-to-main,
  .back_button,
  .back-button-image {
    min-width: 36px;
    min-height: 36px;
  }
}

/* Стрелка в строке поиска: меньше значка кнопки и ближе к краю, чем
   логотип, — она появляется вместо него и не должна казаться крупнее. */
@media (max-width: 1001px) {
  .back-search-btn {
    left: calc(26px - var(--tap-target) / 2);
  }

  .back-search-btn img,
  .back-search-btn svg {
    width: 18px;
    height: 18px;
  }
}

/* ==========================================
   ШАПКА С ПОИСКОМ
   ========================================== */

/* Шапка сливается с телом страницы: отдельная полоса другого цвета
   с тенью резала экран надвое, а строка поиска и так очерчена рамкой. */
header {
  background: var(--bg);
  box-shadow: none;
  border-bottom: 1px solid var(--border);
}

/* Строка держится по центру и не растягивается на всю ширину монитора.
   Оба селектора нужны специально: в base.css у сфокусированного состояния
   margin: 0, а у обычного margin: 10px 0 0 — из-за этого строка прыгала
   по вертикали при фокусе и казалась отцентрованной только в фокусе. */
.header_center,
.mobile-search-focused .header_center {
  max-width: 720px;
  margin-inline: auto;
  margin-block: 0;
}

/* Шапки без строки поиска смысла не имеют: там остаётся пустая полоса
   с тенью. Страницы рисуют свою навигацию сами. */
header:not(:has(#search-form)) {
  background: transparent;
  border-bottom: none;
  box-shadow: none;
  height: auto;
  min-height: 0;
  padding: 0;
}

/* ==========================================
   РАЗДЕЛЫ НА ДЕСКТОПЕ
   ========================================== */

/* На телефоне «Ещё» живёт в нижней панели, на десктопе — в шапке. */
.nav-more--desktop {
  display: none;
}

@media (min-width: 1002px) {
  .nav-more--desktop {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
  }

  /* Пункты, которые переехали в панель разделов: держать их и в шапке,
     и в панели — значит дублировать навигацию. */
  .header_right2 .nav-item[href*="fast-responses"],
  .header_right2 .nav-item[href*="/bots/"],
  .header_right2 .nav-item[href*="api-list"] {
    display: none;
  }

  /* На широком экране панель разделов — не «шторка снизу», а окно по центру. */
  .nav-sheet {
    left: 50%;
    right: auto;
    bottom: auto;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(460px, 92vw);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    animation: none;
  }

  .nav-sheet-handle {
    display: none;
  }
}

/* Нижняя панель — того же цвета, что и страница, как шапка.
   Полоса другого оттенка с тенью отрезала низ экрана; тонкой границы
   сверху достаточно, чтобы панель читалась отдельно от содержимого. */
.mobile-bottom-panel {
  background: var(--bg);
  box-shadow: none;
  border-top: 1px solid var(--border);
  /* Под полоску жеста — не весь системный отступ, см. --bottom-nav-inset.
     Правило вне медиа-запроса: панель видна до 1001px, а отступ раньше
     действовал только до 768px — на планшете панель садилась на полоску. */
  padding-bottom: var(--bottom-nav-inset);
}

/* Место под панелью у тела страницы — только там, где панель есть.
   Раньше 70px стояли до 780px, а панель видна до 1001px: на планшете
   низ страницы уходил под неё. А страницы без панели (мастера API)
   получали пустые 70px снизу. */
@media (max-width: 1001px) {
  body:has(> .mobile-bottom-panel) {
    padding-bottom: calc(var(--bottom-nav-height) + var(--space-3));
  }
}

/* Высота панели по ширинам, замерена: 52px до 576px, 58px до 780px и
   60px до 1001px — плюс отступ под полоску жеста. По ней отступают тело
   страницы и прижатые к низу блоки. Одно значение 56px на все ширины
   занижало высоту на планшете на 8px: нижняя панель быстрых ответов
   наезжала на навигацию. */
@media (max-width: 1001px) {
  :root { --bottom-nav-height: calc(60px + var(--bottom-nav-inset)); }
}

@media (max-width: 780px) {
  :root { --bottom-nav-height: calc(58px + var(--bottom-nav-inset)); }
}

@media (max-width: 576px) {
  :root { --bottom-nav-height: calc(52px + var(--bottom-nav-inset)); }
}

/* ==========================================
   ПОДГРУЗКА ДЛИННЫХ СПИСКОВ
   Маркер «ещё» в конце списка — includes/lazy_more.html.
   ========================================== */

.lazy-more {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  padding: var(--space-4) 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

tr.lazy-more {
  display: table-row;
}

tr.lazy-more td {
  padding: var(--space-3);
  text-align: center;
  color: var(--text-muted);
}

.lazy-more-text::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  vertical-align: -2px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: lazy-spin .8s linear infinite;
}

.lazy-more.is-failed {
  cursor: pointer;
  color: var(--danger-text);
}

.lazy-more.is-failed .lazy-more-text::before {
  display: none;
}

@keyframes lazy-spin {
  to { transform: rotate(360deg); }
}

/* Пустой каталог или поиск без результатов — на всю ширину сетки. */
.catalog-empty {
  grid-column: 1 / -1;
  padding: var(--space-6) 0;
  text-align: center;
  color: var(--text-muted);
}

/* ==========================================
   ПРИЛОЖЕНИЕ «НА ЭКРАНЕ ДОМОЙ»
   ========================================== */

/* Строка состояния прозрачная (black-translucent, viewport-fit=cover):
   страница начиналась под шторкой и вырезом камеры, и строка поиска
   пряталась за ними. Полоса под шторкой — рамка самой шапки цвета
   страницы. Отступ у body не годится: липкая шапка в прокручиваемом body
   отсчитывает top от этого отступа, и зазор выходил двойным. Прокручиваемое
   содержимое под шторкой закрывает полоса body::before.
   В обычном браузере отступ равен нулю, и ничего не меняется. */
header {
  border-top: var(--safe-top) solid var(--bg);
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--safe-top);
  background: var(--bg);
  z-index: calc(var(--z-sticky) + 1);
  pointer-events: none;
}

/* ==========================================
   УВЕДОМЛЕНИЯ НА СТРАНИЦЕ (notifications.js)
   ========================================== */

.nd-toasts {
  position: fixed;
  top: calc(var(--safe-top) + var(--space-3));
  right: var(--space-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: min(360px, calc(100vw - 2 * var(--space-4)));
  pointer-events: none;
}

.nd-toast {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) 40px var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  color: inherit;
  text-decoration: none;
  pointer-events: auto;
  animation: nd-toast-in var(--duration) var(--ease);
}

.nd-toast strong,
.nd-toast span {
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.nd-toast span {
  color: var(--text-muted);
}

.nd-toast--error {
  border-left-color: var(--danger);
}

.nd-toast.is-leaving {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.nd-toast__close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.nd-toast__close:hover {
  background: var(--bg);
}

@keyframes nd-toast-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

@media (max-width: 576px) {
  .nd-toasts {
    left: var(--space-3);
    right: var(--space-3);
    width: auto;
  }
}

/* Кнопка «Разрешить»: над нижней панелью на телефоне, в углу на компьютере. */
.nd-push-prompt {
  position: fixed;
  right: var(--space-4);
  bottom: calc(var(--bottom-nav-height) + var(--space-4));
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: min(380px, calc(100vw - 2 * var(--space-4)));
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  animation: nd-toast-in var(--duration) var(--ease);
}

.nd-push-prompt__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nd-push-prompt__text span {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.nd-push-prompt__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.nd-push-prompt__btn {
  min-height: 40px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.nd-push-prompt__btn--primary {
  border: 0;
  background: var(--accent);
  color: #fff;
}

.nd-push-prompt__btn--ghost {
  border: 1px solid var(--border);
  background: transparent;
  color: inherit;
}

@media (max-width: 576px) {
  .nd-push-prompt {
    left: var(--space-3);
    right: var(--space-3);
    bottom: calc(var(--bottom-nav-height) + var(--space-3));
    width: auto;
  }
}

/* Управление push в настройках профиля и в списке чатов администратора. */
.push-control-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.push-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-sm);
}