/*
 * Общая шапка клиента — одна для всех страниц, кроме лендинга (у него шапка внутри кораллового hero)
 * и экранов входа (у них брендовая панель). Разметку собирает js/header.js в <header class="app-header">.
 * Состав — Cabinet.dc.html и лист «Шапки» в «Путь клиента - карта»:
 *   гость — СЛОТ, «Записаться», «Войти», «Регистрация»;
 *   клиент — СЛОТ, «Записаться», «Мои записи», колокольчик со счётчиком, аватар с меню «Профиль / Выйти».
 * Шапка закреплена сверху и лежит над содержимым (--layer-header), меню — над шапкой (--layer-popover).
 */
:root {
  /* Высота закреплённой шапки: отступ сверху + плашка (кнопка M, поля плашки, рамка). Нужна тому,
     что закрепляется под шапкой (меню кабинета). */
  --app-header-offset: calc(var(--space-6) + var(--control-height-m) + 2 * var(--space-2) + 2 * var(--border-width-field));
}

.app-header {
  position: sticky; top: 0; z-index: var(--layer-header);
  min-height: var(--app-header-offset); /* место под шапку занято ещё до того, как её соберёт скрипт */
  padding-top: var(--space-6);
  background: var(--color-bg-page); /* содержимое при прокрутке уходит под шапку, а не просвечивает */
}
.app-header__bar {
  min-height: calc(var(--control-height-m) + 2 * var(--space-2) + 2 * var(--border-width-field));
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-2); background: var(--color-bg-surface);
  border: var(--border-width-field) solid var(--color-border); border-radius: var(--radius-modal);
}
.app-header__actions { display: flex; align-items: center; gap: var(--space-2); }
.app-header__actions:empty { display: none; }

/* «Мои записи» и кнопки гостя: тихие «пилюли» */
.nav-pill {
  display: inline-flex; align-items: center; height: var(--control-height-m); padding: 0 var(--space-4);
  border-radius: var(--radius-pill); background: var(--color-bg-muted); color: var(--color-text); text-decoration: none; white-space: nowrap;
  font-size: var(--font-size-nav); line-height: var(--line-height-nav); font-weight: var(--font-weight-nav);
  letter-spacing: var(--letter-spacing-nav); text-transform: uppercase;
  transition: background-color var(--duration-instant) var(--ease-standard);
}
.nav-pill:hover { background: var(--color-border); color: var(--color-text); }
.nav-pill[aria-current="page"] { background: var(--color-border-ink); color: var(--color-text-on-brand); }
.nav-pill--quiet { background: transparent; }
.nav-pill--quiet:hover { background: var(--color-bg-muted); }

/* Колокольчик → выпадающий список Л7; счётчик непрочитанных — me.unreadNotifications.client */
.bell {
  position: relative; width: var(--control-height-m); height: var(--control-height-m); flex: none;
  display: grid; place-items: center; border-radius: var(--radius-pill);
  border: var(--border-width-field) solid var(--color-border-dashed); background: var(--color-bg-surface); color: var(--color-text);
  transition: background-color var(--duration-instant) var(--ease-standard);
}
.bell { cursor: pointer; padding: 0; font: inherit; }
.bell:hover { background: var(--color-bg-muted); color: var(--color-text); }
/* Открыт список — как в прототипе: тёмный круг с жёлтым кольцом */
.bell[aria-expanded="true"] {
  background: var(--color-border-ink); border: var(--border-width-button) solid var(--color-border-ink); color: var(--color-text-on-brand);
  box-shadow: 0 0 0 var(--focus-ring-offset-button) var(--color-accent); /* жёлтое кольцо прототипа, 3px */
}
.bell__count[hidden] { display: none; }
.bell__count {
  position: absolute; top: calc(-1 * var(--space-1)); right: calc(-1 * var(--space-1-5));
  min-width: var(--icon-size-l); height: var(--icon-size-l); padding: 0 var(--space-1); /* кружок размером с иконку */
  display: grid; place-items: center; border-radius: var(--radius-pill);
  background: var(--color-button-primary-bg); color: var(--color-button-primary-text);
  border: var(--border-width-button) solid var(--color-bg-surface);
  font-size: var(--font-size-caption); line-height: var(--line-height-single); font-weight: var(--font-weight-button);
}

/* ---------- Л7 · Уведомления — выпадающий список ---------- */
.bell-wrap { position: relative; }
.bell-panel {
  position: absolute; right: calc(-1 * var(--space-14)); top: calc(100% + var(--space-3)); z-index: var(--layer-popover);
  width: min(420px, calc(100vw - 2 * var(--space-4))); /* 420 — ширина панели прототипа */
  background: var(--color-bg-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-popover); overflow: hidden;
}
.bell-panel__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-3) var(--space-3) var(--space-4); }
.bell-panel__title { font-size: var(--font-size-h4); line-height: var(--line-height-single); font-weight: var(--font-weight-h4); }
.bell-panel__read-all {
  height: var(--control-height-s); padding: 0 var(--space-2-5); border: 0; border-radius: var(--radius-cell); background: transparent; cursor: pointer;
  color: var(--color-text-link); font-family: var(--font-text); font-size: var(--font-size-helper); font-weight: var(--font-weight-label);
}
.bell-panel__read-all:hover { background: var(--color-button-ghost-bg-hover); }
.bell-panel__list { list-style: none; padding: 0; display: flex; flex-direction: column; max-height: 60vh; overflow-y: auto; }
.bell-panel__empty {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-6) var(--space-4);
  border-top: var(--border-width-field) solid var(--color-bg-muted); color: var(--color-text-secondary); font-size: var(--font-size-body-s);
}
.bell-panel__empty--error { color: var(--color-error-text); }
.bell-panel__error { padding: var(--space-3); border-top: var(--border-width-field) solid var(--color-bg-muted); }
.bell-panel__all {
  display: flex; align-items: center; justify-content: center; gap: var(--space-1-5); min-height: var(--control-height-field);
  border-top: var(--border-width-field) solid var(--color-bg-muted); text-decoration: none; text-transform: uppercase; color: var(--color-text-link);
  font-size: var(--font-size-helper); line-height: var(--line-height-single); font-weight: var(--font-weight-button); letter-spacing: var(--letter-spacing-button);
}
.bell-panel__all:hover { background: var(--color-button-ghost-bg-hover); }

/* Уведомление — общее для списка в шапке (note--compact) и ленты Л7 (pages/cabinet.css дополняет) */
.note { display: flex; gap: var(--space-3-5); align-items: flex-start; }
.note__icon {
  width: var(--size-icon-tile); height: var(--size-icon-tile); flex: none; border-radius: var(--radius-pill); display: grid; place-items: center;
  background: var(--color-bg-muted); color: var(--color-text-description);
}
.note--ok .note__icon { background: var(--color-success-bg); color: var(--color-success-text); }
.note--moved .note__icon { background: var(--color-own-bg); color: var(--color-own-border); }
.note--studio .note__icon { background: var(--color-warning-bg); color: var(--color-warning-text); }
.note__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1-5); }
.note__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.note__title { font-size: var(--font-size-body-m); line-height: var(--line-height-label); font-weight: var(--font-weight-h4); }
.note--unread .note__title { font-weight: var(--font-weight-overline); }
.note__time { flex: none; font-size: var(--font-size-helper); line-height: var(--line-height-single); font-weight: var(--font-weight-helper); color: var(--color-text-secondary); white-space: nowrap; }
.note__text { font-size: var(--font-size-title-s); line-height: var(--line-height-body-s); color: var(--color-text-description); overflow-wrap: anywhere; }
.note__error:empty { display: none; }
.note__error { font-size: var(--font-size-helper); line-height: var(--line-height-helper); color: var(--color-error-text); }
.note--compact { gap: var(--space-3); padding: var(--space-3-5) var(--space-4); border-top: var(--border-width-field) solid var(--color-bg-muted); background: var(--color-bg-surface); cursor: pointer; }
.note--compact:hover { background: var(--color-bg-page); }
.note--compact.note--unread { background: var(--color-button-ghost-bg-hover); }
.note--compact .note__icon { width: var(--size-avatar); height: var(--size-avatar); }
.note--compact .note__title { font-size: var(--font-size-title-s); }
.note--compact .note__text { font-size: var(--font-size-helper); line-height: var(--line-height-helper); }
.note--compact .note__body { gap: var(--space-1); }
.note__dot { width: var(--space-2-5); height: var(--space-2-5); flex: none; margin-top: var(--space-1); border-radius: var(--radius-pill); background: var(--color-button-primary-bg); }
.note--loading { cursor: default; }
.note--loading .note__icon.skeleton { background: none; }
.note__sk-short { width: 60%; }

/* Аватар с меню профиля */
.profile { position: relative; }
.profile__toggle {
  display: flex; align-items: center; gap: var(--space-2); height: var(--control-height-m);
  padding: var(--space-1) var(--space-2-5) var(--space-1) var(--space-1);
  border: 0; border-radius: var(--radius-pill); background: var(--color-bg-muted); color: var(--color-text); cursor: pointer;
  font-family: var(--font-text); font-size: var(--font-size-label); line-height: var(--line-height-single); font-weight: var(--font-weight-label);
  transition: background-color var(--duration-instant) var(--ease-standard);
}
.profile__toggle:hover { background: var(--color-border); }
.profile__toggle .avatar { width: var(--size-avatar-s); height: var(--size-avatar-s); font-size: var(--font-size-helper); } /* размер шрифта — и на лендинге, где своя .avatar */
.profile__toggle .icon--chevron-up { display: none; }
.profile__toggle[aria-expanded="true"] .icon--chevron-up { display: block; }
.profile__toggle[aria-expanded="true"] .icon--chevron-down { display: none; }
.profile__menu {
  position: absolute; right: 0; top: calc(100% + var(--space-2)); z-index: var(--layer-popover);
  width: 200px; /* как в прототипе */
  display: flex; flex-direction: column; padding: var(--space-1-5);
  background: var(--color-bg-surface); border-radius: var(--radius-block); box-shadow: var(--shadow-popover);
}
.profile__item {
  display: flex; align-items: center; gap: var(--space-2-5); min-height: var(--control-height-m); padding: 0 var(--space-3);
  border: 0; border-radius: var(--radius-cell); background: transparent; color: var(--color-text); text-decoration: none; text-align: left;
  font-family: var(--font-text); font-size: var(--font-size-label); line-height: var(--line-height-single); font-weight: var(--font-weight-label);
  cursor: pointer;
}
.profile__item:hover, .profile__item:focus-visible { background: var(--color-bg-muted); color: var(--color-text); }

/* Пока не известно, вошёл ли клиент, — заглушка на месте аватара */
.app-header__pending { width: 120px; height: var(--control-height-m); border-radius: var(--radius-pill); }

/* «Мои записи» в меню аватара — только на телефоне, где этой кнопки нет в шапке */
.profile__item--phone { display: none; }

/* ---------- Телефон ---------- */
/* В шапке одна строка: логотип ↔ колокольчик и аватар (гостю — «Войти»). «Записаться», «Мои записи» и «Регистрация» —
   на странице, в меню аватара и на экране входа (решение 2026-10-21) */
@media (max-width: 767px) {
  .header-action--wide { display: none; }
  .profile__item--phone { display: flex; }
  /* Аватар — круг без стрелки, как колокольчик рядом: так строка умещается и на главной с кнопкой «Меню» */
  .profile__toggle { padding: var(--space-1); }
  .profile__toggle .icon, .profile__toggle[aria-expanded] .icon { display: none; }
  .app-header { padding-top: var(--space-2); }
  .app-header__bar { flex-wrap: wrap; }
  .app-header__actions { flex-wrap: wrap; }
  .profile__name { display: none; }
  /* Список уведомлений — под шапкой на всю ширину: от колокольчика он ушёл бы за край экрана */
  .bell-wrap { position: static; }
  .bell-panel { left: 0; right: 0; top: calc(100% + var(--space-2)); width: auto; }
  /* Меню профиля — так же: аватар после переноса строки встаёт слева, и меню, прижатое к нему справа, уходило за край */
  .profile { position: static; }
  .profile__menu { left: 0; right: 0; width: auto; }
}