/* ═════ Sentos · Настройки: раздел на телефоне, окно на компьютере ═════
   Перенесено из прототипа newfront/settings.css.
   Палитра и общие примитивы — в base.css и app.css. */

/* Настройки живут внутри боковой панели, рядом со списком чатов и меню.
   На телефоне это такой же раздел, как чаты и звонки: он ложится поверх
   списков внутри самой панели, поэтому нижняя навигация остаётся на
   месте и переключение ничем не отличается от остальных разделов.

   На компьютере нижней панели нет, и настройки открываются окном поверх
   приложения — с тем же размытием и той же анимацией, что у остальных
   окон: они не заслуживают отдельной страницы во всю ширину монитора, а
   окном читаются как «поверх переписки», куда и вернёшься по закрытию.

   Всё, что относится к самому приложению — тема, язык, обои, — живёт в
   отдельном разделе «Настройки приложения»: на первом экране остаются
   только крупные пункты. */

.settings-screen {
  position: absolute;
  inset: 0;
}

.settings-dim {
  position: absolute;
  inset: 0;
}

.settings-shell {
  display: flex;
  justify-content: center;
  height: 100%;
}

.settings {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--page);
}

/* Название слева, кнопки справа — как в заголовке списка чатов и в
   шапках остальных окон. По центру оно стояло на своей странице
   макета, где кнопок по бокам поровну; здесь их справа две, а слева на
   первом экране ни одной, и «по центру» читалось как сдвиг влево с
   пустым полем. Левое поле то же, что у заголовка списка, — иначе при
   переходе название переезжает. */
.settings-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: calc(10px + env(safe-area-inset-top)) 10px 8px 18px;
}

.settings-head .screen-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Со стрелкой назад название отодвигать нечем — она сама и есть поле. */
.settings.is-sub .settings-head { padding-left: 10px; }

.settings-back,
.settings-close {
  color: var(--text-soft);
}

.settings-close { display: none; }

/* На первом экране стрелке назад некуда вести: на телефоне разделы
   переключает нижняя навигация, на компьютере окно закрывает крестик.
   Она появляется только внутри вложенного раздела. */
.settings:not(.is-sub) .settings-back { display: none; }

.settings-edit {
  flex: none;
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--field);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  transition: background-color 160ms ease;
}

.settings-edit.is-pressed { background: var(--field-strong); }

/* Внутри раздела кнопки «Изм.» нет, вместо неё место под стрелку назад */
.settings.is-sub .settings-edit { visibility: hidden; }

/* Виды лежат друг над другом, поэтому переход между ними — не мигание,
   а одновременный разъезд: один уходит, другой приходит. */
.settings-views {
  position: relative;
  flex: 1;
  min-height: 0;
}

.settings-scroll {
  position: absolute;
  inset: 0;
  padding: 4px 14px calc(20px + env(safe-area-inset-bottom));
}

.settings-sub { padding-top: 12px; }

/* Переход между разделами — общее движение смены экранов (app.css):
   вглубь раздел приходит справа, назад — слева. */
.view-in-forward { animation: screen-in-forward 230ms cubic-bezier(0.22, 1, 0.36, 1) 70ms both; }
.view-in-back { animation: screen-in-back 230ms cubic-bezier(0.22, 1, 0.36, 1) 70ms both; }

.view-out-forward,
.view-out-back { pointer-events: none; }

.view-out-forward { animation: screen-out-forward 110ms cubic-bezier(0.4, 0, 1, 1) both; }
.view-out-back { animation: screen-out-back 110ms cubic-bezier(0.4, 0, 1, 1) both; }

/* Кто вошёл */
.settings-me {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 0 22px;
  text-align: center;
}

.settings-me strong {
  font-family: "SF Pro Display", "SF Pro Text", sans-serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.2px;
}

/* ─────────── Своя фотография ───────────
   Фотографию меняют нажатием на сам аватар: отдельная кнопка рядом
   была бы второй дверью в ту же комнату. Значок камеры показывает,
   что аватар нажимается. */

.settings-avatar {
  position: relative;
  display: block;
  padding: 0;
  border-radius: 50%;
  background: transparent;
}

.settings-avatar-mark {
  position: absolute;
  right: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-fill);
  color: var(--accent-fill-text);
}

/* ─────────────────────── Выбор темы ─────────────────────── */

.theme-choice {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.theme-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 8px 10px;
  border: 0;
  border-radius: 20px;
  background: var(--panel);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  transition:
    background-color 160ms ease,
    color 160ms ease,
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Карточка продавливается, как кнопка: без описанного перехода масштаб
   срабатывал рывком. */
.theme-card.is-pressed { transform: scale(0.97); }

.theme-card[aria-checked="true"] {
  color: var(--text);
  background: var(--field-strong);
}

.theme-card-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.theme-card-name .icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Крошечный макет темы вместо картинки: полоса шапки и два пузыря */
.theme-preview {
  position: relative;
  display: block;
  height: 74px;
  border-radius: 14px;
  overflow: hidden;
}

.theme-preview-light { background: #ededef; }
.theme-preview-dark { background: #111111; }

/* «Как в системе» — половина светлая, половина тёмная */
.theme-preview-auto {
  background: linear-gradient(100deg, #ededef 0 50%, #111111 50% 100%);
}

.theme-preview-bar {
  position: absolute;
  inset: 8px 10px auto;
  height: 8px;
  border-radius: 999px;
  background: rgba(120, 120, 128, 0.28);
}

.theme-preview-bubble {
  position: absolute;
  height: 12px;
  border-radius: 999px;
}

.theme-preview-bubble.in {
  left: 10px;
  top: 28px;
  width: 34px;
  background: #ffffff;
}

.theme-preview-bubble.out {
  right: 10px;
  bottom: 12px;
  width: 44px;
  background: #c4472f;
}

.theme-preview-dark .theme-preview-bubble.in { background: #1f1f1f; }
.theme-preview-dark .theme-preview-bubble.out { background: #a8412c; }
.theme-preview-auto .theme-preview-bubble.in { background: #ffffff; }

.theme-note {
  margin: 10px 4px 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

/* ─────────────────────── Группы строк ─────────────────────── */

/* Скругление крупнее общего: в настройках эти группы — главное, что
   есть на экране, и мягкая форма роднит их с окном и нижней панелью.
   Одиночная строка вроде «Выйти из аккаунта» становится при этом
   полной пилюлей — так и задумано. */
.settings-scroll .list-group {
  margin-bottom: 18px;
  border-radius: 28px;
}

.settings-scroll .list-row-icon {
  background: var(--field-strong);
  color: var(--text-soft);
}

/* На светлой теме серая плашка почти сливалась со строкой — делаем темнее */
.light .settings-scroll .list-row-icon {
  background: #e2e2e6;
  color: #4b4b52;
}

.list-row.is-danger {
  color: var(--accent);
}

.list-row.is-danger .list-row-icon {
  background: var(--brand-50);
  color: var(--brand-700);
}

.dark .list-row.is-danger .list-row-icon {
  background: #2a1a16;
  color: var(--accent);
}

.settings-version {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

/* ─────────────── Правка профиля ─────────────── */

.settings-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}

/* Поля профиля стоят в одном столбце со строками «Логин» и «Телефон» —
   значит и выглядят так же: то же скругление, та же высота, и текст
   ровно под своей подписью. У input есть собственный отступ от
   браузера (2px слева), из-за него значение съезжало вправо. */
.settings-form .nc-field {
  border-radius: 24px;
}

.settings-form .nc-field input {
  padding: 0;
  line-height: 1.4;
}

.settings-form .nc-field-label {
  margin-bottom: 2px;
}

.settings-hint {
  margin: 0 4px 16px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.settings-save { width: 100%; }

/* ─────────────── Строка-сведение ───────────────
   Выглядит как остальные строки, но не откликается: подсветка под
   указателем обещала бы действие, которого нет. */
.settings-scroll .list-row.is-static { cursor: default; }

/* У корзины рисунок в квадрате ровный — сдвиг, нужный значку «выйти»,
   её перекосил бы. */
.list-row.is-danger.is-plain-icon .list-row-icon .icon { transform: none; }

/* ─────────────── Выбор одного из нескольких ─────────────── */

.choice-row .choice-check {
  width: 20px;
  height: 20px;
  fill: currentColor;
  color: var(--accent);
  opacity: 0;
  transition: opacity 160ms ease;
}

.choice-row[aria-checked="true"] .choice-check { opacity: 1; }

/* ─────────────── Обои переписки ─────────────── */

.wallpaper-choice {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

/* Карточка устроена как карточка темы: те же заливки и тот же отклик. */
.wallpaper-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 6px 6px 8px;
  border: 0;
  border-radius: 18px;
  background: var(--panel);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  transition:
    background-color 160ms ease,
    color 160ms ease,
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.wallpaper-card.is-pressed { transform: scale(0.97); }

.wallpaper-card[aria-checked="true"] {
  color: var(--text);
  background: var(--field-strong);
}

.wallpaper-card-name {
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Миниатюра рисуется теми же переменными --wp-*, что и панель
   переписки в chat.css: что видно здесь, то и встанет за сообщениями. */
.wallpaper-swatch {
  position: relative;
  display: grid;
  place-items: center;
  height: 92px;
  border-radius: 12px;
  overflow: hidden;
  background-color: var(--wp-color, var(--page));
  background-image: var(--wp-image, none);
  background-size: var(--wp-size, auto);
  background-position: center;
  color: var(--muted);
}

.wallpaper-bubble {
  position: absolute;
  height: 10px;
  border-radius: 999px;
}

.wallpaper-bubble.in {
  left: 8px;
  top: 22px;
  width: 40%;
  background: var(--wallpaper-bubble);
}

.wallpaper-bubble.out {
  right: 8px;
  bottom: 18px;
  width: 50%;
  background: var(--bubble-out);
}

/* Фото уже выбрано — значок картинки поверх него лишний. */
.wallpaper-swatch[style*="--wallpaper-photo"] .wallpaper-photo-mark { display: none; }

/* ─────────────── Данные и память ─────────────── */

.storage-meter {
  display: block;
  height: 4px;
  margin-top: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--field-strong);
}

.storage-meter-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent-fill);
  transform: scaleX(var(--share, 0));
  transform-origin: left center;
  transition: transform 320ms var(--ease);
}

/* ─────────────── Помощь ─────────────── */

.help-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}

.help-item {
  border-radius: 22px;
  background: var(--panel);
  /* Меняется высота одного вопроса — пересчитывать из-за этого весь
     список и страницу под ним незачем. Ограничение держит работу
     внутри карточки. */
  contain: layout paint;
}

.help-item summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 16px;
  border-radius: 22px;
  list-style: none;
  cursor: pointer;
  font-size: 15px;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

.help-item summary::-webkit-details-marker { display: none; }

.help-item summary:focus-visible {
  outline: 0;
  background: var(--field-strong);
}

.help-chevron {
  width: 18px;
  height: 18px;
  flex: none;
  margin-left: auto;
  color: var(--muted);
  /* Той же кривой, что и высота: стрелка и карточка идут вместе, и
     разнобой в характере движения заметен сильнее, чем сам характер. */
  transition: transform 320ms ease;
}

/* Стрелка идёт за классом, а не за [open]: при закрытии атрибут снимается
   только после анимации, и стрелка опаздывала бы на её длину. */
.help-item.is-open .help-chevron { transform: rotate(180deg); }

/* Высоту ответа заранее не узнать, а переход по height: auto не идёт,
   поэтому её в пикселях ставит settings-pages.js — на время самого
   перехода, дальше высоту снова держит содержимое.

   Раньше здесь росла строка сетки от 0fr до 1fr. Выглядит красивее в
   коде, но каждый кадр браузер заново решает сетку и заново верстает
   текст ответа, а в WebKit доли fr — самый медленный путь из всех. На
   телефоне это и была та нехватка кадров. Обычная высота дешевле:
   решать нечего, меняется одно число. */
/* Кривая здесь своя, не общая. Общая --ease — это
   cubic-bezier(0.22, 1, 0.36, 1): почти весь путь она проходит в первую
   треть, дальше тянется длинный хвост. Для сдвига и прозрачности это
   красиво — там движение дробное и его сглаживает композитор. А высота
   считается целыми точками, и на хвосте кадр за кадром меняет её на
   ноль-один пиксель. Кадр, сдвинувший картинку на ноль, глазу
   неотличим от выпавшего — отсюда и «не хватает кадров».

   Замер (try-help-curve.mjs): с общей кривой из 23 кадров перехода
   двигали картинку 14, стояли 9, и всё видимое движение кончалось к
   167 мс из заявленных 320. С обычной ease — 18 двигают, 5 стоят,
   движение размазано по всей длительности. Длительность та же. */
.help-body {
  height: 0;
  overflow: hidden;
  transition: height 320ms ease;
}

/* Текст двигается сам, а не проявляется вместе с коробкой.

   Гасить саму .help-body бесполезно на вид: она обрезана по высоте, и
   глаз видит не проявление, а край обрезки, ползущий вниз. Текст при
   этом стоит на месте и оттого кажется возникшим разом. Поэтому
   прозрачность и короткий подъём — на самом тексте: он приезжает
   сверху вниз вместе с краем и уезжает обратно при закрытии.

   Восемь точек — ровно столько, чтобы движение читалось; больше, и
   текст начинает догонять край обрезки, а это уже видно как рывок. */
.help-body-in {
  min-height: 0;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 260ms ease 40ms,
    transform 300ms ease 40ms;
}

.help-item.is-open .help-body-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .help-body,
  .help-body-in,
  .help-chevron { transition: none; }
}

.help-item p {
  margin: 0;
  padding: 0 16px 14px;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.45;
}

/* В окне на компьютере группы залиты --field, а не --panel: окно само
   цвета панели. */
@media (min-width: 760px) {
  .wallpaper-card,
  .help-item { background: var(--field); }

  @media (hover: hover) {
    .settings-scroll .list-row.is-static:hover { background: transparent; }
    .help-item summary:hover { background: var(--field-strong); }
  }
}

/* ═════════════════════════ Телефон ═════════════════════════ */

@media (max-width: 759px) {
  /* Раздел ложится поверх списков внутри панели, но ниже переписки:
     она приходит своим кадром и должна перекрывать сайдбар целиком. */
  /* Настройки — крайний правый раздел нижней панели: приходят справа,
     уходят туда же. */
  .settings-screen {
    z-index: 5;
    animation: screen-in-forward 230ms cubic-bezier(0.22, 1, 0.36, 1) 70ms both;
  }

  .settings-screen.is-closing {
    pointer-events: none;
    animation: screen-out-back 110ms cubic-bezier(0.4, 0, 1, 1) both;
  }

  /* Затемнять нечего: раздел занимает панель целиком. */
  .settings-dim { display: none; }

  /* Стрелка назад на 8 точек выше кнопки «Изм.», и, появляясь в разделе,
     она раздвигала шапку с 52 до 60 точек — всё содержимое прыгало вниз
     в первом же кадре перехода. Размер под палец оставляем, а лишнюю
     высоту забирают поля шапки. На компьютере шапку и так держит
     крестик той же высоты. */
  .settings-back { margin-block: -4px; }

  /* Список уходит одним движением вместе со своим заголовком — влево,
     навстречу приходящим настройкам. Раньше заголовок пропадал отдельно
     и раньше всех — переход читался как два шага вместо одного. */
  .sidebar-body {
    transition:
      opacity 230ms ease 70ms,
      transform 230ms cubic-bezier(0.22, 1, 0.36, 1) 70ms;
  }

  .messenger.settings-open .sidebar-body {
    opacity: 0;
    transform: translateX(-28px);
    transition:
      opacity 110ms ease-in 0ms,
      transform 110ms cubic-bezier(0.4, 0, 1, 1) 0ms;
  }
}

/* ═════════════════════════ Компьютер ═════════════════════════ */

@media (min-width: 760px) {
  /* Окно лежит поверх всего приложения, а не внутри панели, из которой
     его открыли. */
  .settings-screen {
    position: fixed;
    z-index: 40;
  }

  /* Размытие и затемнение общие с остальными окнами — класс
     .ui-modal-dim из modals.css. Своё положение в стопке он там задаёт
     сам, а внутри нашего слоя оно перекрыло бы окно. */
  .settings-dim { z-index: 0; }

  /* Оболочка растянута на весь экран, чтобы держать окно по центру, и
     без этого она ловила бы нажатия мимо окна вместо затемнения — а
     мимо окна нажимают, чтобы его закрыть. */
  .settings-shell {
    position: relative;
    z-index: 1;
    align-items: center;
    padding: 24px;
    pointer-events: none;
  }

  .settings-screen .settings { pointer-events: auto; }

  /* Имя экрана в селекторе не для красоты: у панелей приложения своё
     скругление в 28 px, и без него оно перебило бы окно — оно должно
     быть скруглено как остальные окна, а не как панель. */
  .settings-screen .settings {
    width: min(440px, 100%);
    height: min(760px, 100%);
    border-radius: 30px;
    background: var(--panel);
    animation: settings-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .dark .settings { background: #1d1d1d; }

  .settings-screen.is-closing .settings {
    pointer-events: none;
    animation: settings-out 160ms ease-in both;
  }

  /* Ход и время те же, что у ui-modal-in в modals.css. Отдельные кадры
     нужны потому, что здесь окно стоит по центру раскладкой, а не
     сдвигом на половину: чужие кадры увезли бы его из центра. */
  @keyframes settings-in {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: none; }
  }

  @keyframes settings-out {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: scale(0.95); }
  }

  /* Затемнение уходит вслед за окном и той же длительностью, что у
     остальных окон. */
  .settings-screen.is-closing .settings-dim {
    pointer-events: none;
    animation: dim-out 200ms ease both;
  }

  .settings-close { display: grid; }

  /* Отступы шапки — как у остальных окон. */
  .settings-head {
    padding: 14px 14px 8px 22px;
  }

  .settings.is-sub .settings-head { padding-left: 14px; }

  .settings-head .screen-title { font-size: 17px; }

  .settings-scroll { padding: 4px 16px 20px; }

  .theme-card { background: var(--field); }
  .settings-scroll .list-group { background: var(--field); }

  @media (hover: hover) {
    .settings-scroll .list-row:hover { background: var(--field-strong); }
  }
}

/* ─────────────────────── Меньше движения ─────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .settings,
  .settings-screen,
  .view-in-forward,
  .view-in-back,
  .view-out-forward,
  .view-out-back {
    animation: none;
  }
}