/* ==========================================================================
   AleksandraPhD — лендинг психолога.
   Разделы оформлены как лента постов в стиле Threads: размеры в px и цвета
   (oklch) взяты из макета misc/pixel-perfect-page, шрифт Roboto.
   ========================================================================== */

/* ---------- Цвета и радиусы из дизайн-системы макета --------------------- */

:root {
  --background:       oklch(1 0 0);
  --foreground:       oklch(0.15 0 0);
  --muted-foreground: oklch(0.554 0.046 257.417);
  --border:           oklch(0.929 0.013 255.508);
  --accent:           oklch(0.58 0.19 258);
  --danger:           oklch(0.55 0.21 27);

  --tabbar-height: 50px;                    /* высота нижней панели */

  --radius:    0.625rem;                    /* 10px  — rounded-lg  */
  --radius-2xl: calc(var(--radius) + 8px);  /* 18px  — rounded-2xl */

  --font-sans: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---------- База ---------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2 { margin: 0; font-size: inherit; font-weight: inherit; }
p  { margin: 0; }

dl, dd { margin: 0; }

ul { margin: 0; padding: 0; list-style: none; }

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* скрытое скриптом остаётся скрытым, даже если у блока свой display */
[hidden] { display: none !important; }

.icon { display: block; flex: none; }

/* колонка страницы — max-w-[576px] mx-auto min-h-screen */
.page {
  width: 100%;
  max-width: 576px;
  min-height: 100vh;
  min-height: 100svh;
  margin-inline: auto;
  /* +16px — чтобы последний пост не упирался в нижнюю панель */
  padding-bottom: calc(var(--tabbar-height) + 16px + env(safe-area-inset-bottom));
  background: var(--background);
}

/* тонкая линия-разделитель — h-px w-full bg-border */
.divider {
  width: 100%;
  height: 1px;
  background: var(--border);
}

/* ---------- Верхняя панель ----------------------------------------------- */
/* flex items-center gap-4 px-4 pb-3 pt-4 */

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 16px 12px;
}

.topbar__btn { display: flex; }

.topbar__title {
  flex: 1;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.topbar__back { width: 26px; height: 26px; }
.topbar__icon { width: 24px; height: 24px; }

/* колокольчик без уведомлений: нажимать не на что, и это видно */
.topbar__btn[disabled] {
  opacity: 0.35;
  cursor: default;
}

/* красная точка в углу колокольчика — «есть непрочитанное», как в приложениях.
   Обводка цветом фона отделяет её от самой иконки, иначе точка сливается
   с линией колокольчика. */
.bell { position: relative; }

.bell__dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--background);
  border-radius: 9999px;
  background: var(--danger);
}

/* ---------- Профиль ------------------------------------------------------- */
/* px-4 pt-2 */

.profile { padding: 8px 16px 0; }

/* flex items-start gap-4 */
.profile__top {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.profile__avatar {
  width: 94px;
  height: 94px;
  flex: none;
  border-radius: 9999px;
  object-fit: cover;
}

/* полноразмерное фото вместо круглой аватарки — включается на широких экранах */
.profile__cover {
  display: none;
}

/* min-w-0 flex-1 pt-1 */
.profile__info {
  min-width: 0;
  flex: 1;
  padding-top: 4px;
}

.profile__name {
  font-size: 17px;
  line-height: 1.32;
}

/* mt-3 grid grid-cols-3 gap-2 */
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.stats__value {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}

.stats__label {
  font-size: 15px;
  color: var(--muted-foreground);
}

/* mt-3 space-y-0.5 text-[16px] leading-[1.45] */
.profile__bio {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.45;
}
.profile__bio p + p { margin-top: 2px; }

/* mt-3 flex items-center gap-2 text-[16px] */
.profile__link {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 16px;
}

.profile__link-icon {
  width: 18px;
  height: 18px;
  color: var(--muted-foreground);
  transform: rotate(-45deg);
}

/* контекстное окошко с ссылками привязано к бейджу, поэтому обёртке нужен position */
.badge-wrap {
  position: relative;
  display: inline-block;
  margin-top: 16px;
}

/* inline-flex items-center gap-2 rounded-2xl border px-3 py-2 */
.profile__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
}

.profile__badge-glyph { width: 17px; height: 17px; }

.profile__badge-name {
  font-size: 15px;
  font-weight: 500;
}

.profile__badge-note {
  font-size: 15px;
  color: var(--muted-foreground);
}

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

.menu-wrap {
  position: relative;      /* точка отсчёта для окошка */
  display: flex;
}

.menu {
  position: absolute;
  top: calc(100% + 8px);
  z-index: 30;
  margin-top: 0;           /* перебивает .links, когда окошко — список ссылок */
  min-width: 220px;
  max-width: min(320px, calc(100vw - 32px));
  max-height: min(420px, 70vh);
  overflow-y: auto;
  padding: 4px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  background: var(--background);
  box-shadow: 0 8px 24px oklch(0 0 0 / 0.14);

  opacity: 0;
  transform: translateY(-4px) scale(0.97);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

/* прижато к левому краю кнопки — бейдж профиля стоит слева */
.menu--start {
  left: 0;
  transform-origin: top left;
}

/* прижато к правому краю — кнопки «...» стоят у правого края строки */
.menu--end {
  right: 0;
  transform-origin: top right;
}

.menu.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.menu li + li { border-top: 1px solid var(--border); }

/* пункт меню: 20px иконка + 12px сверху и снизу = 44px, попадают не целясь */
.menu__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 0;
  color: inherit;
  font: inherit;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
}

.menu__icon {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--muted-foreground);
}

/* удаление — единственное необратимое действие, поэтому выделено цветом */
.menu__item--danger,
.menu__item--danger .menu__icon { color: var(--danger); }

/* ---------- Окошко колокольчика -------------------------------------------- */
/* тот же .menu, что и у остальных выпадающих окошек, но внутри — не пункты
   меню, а карточки: текст уведомления от Александры и крестик рядом с ним
   у неё самой. Мягкий акцентный фон и иконка отличают уведомление от
   обычного меню и перекликаются с красной точкой на колокольчике. */

.notices {
  padding: 8px;
  min-width: 330px;
  max-width: min(480px, calc(100vw - 32px));
}

.notices__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border-radius: var(--radius);
  background: oklch(0.58 0.19 258 / 0.08);
}

/* карточки лежат отдельно друг от друга — общий разделитель .menu li + li
   здесь не нужен, он остаётся только у обычных меню-списков */
.notices .notices__item + .notices__item {
  margin-top: 6px;
  border-top: none;
}

.notices__icon {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 1px;
  color: var(--accent);
}

.notices__text {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* крестик нарочно скромный: он снимает уведомление сразу, без подтверждения,
   и не должен оказываться под пальцем раньше самого текста */
.notices__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: none;
  margin: -6px -6px 0 0;
  color: var(--muted-foreground);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

/* отступ перед первой линией — разделитель перед первым постом ленты */
.feed > .divider:first-child { margin-top: 16px; }

/* ---------- Раздел лендинга (пост) ---------------------------------------- */
/* px-4 py-4 */

.post {
  padding: 16px;
  scroll-margin-top: 8px;
}

/* flex gap-3 */
.post__row {
  display: flex;
  gap: 12px;
}

.post__avatar {
  width: 38px;
  height: 38px;
  flex: none;
  align-self: flex-start;   /* иначе аватар растянулся бы на высоту поста */
  border-radius: 9999px;
  object-fit: cover;
}

.post__main {
  min-width: 0;
  flex: 1;
}

/*
  Метка «Закреплено» — над заголовком, как в соцсетях. Видна всем, а не
  только вошедшей: она говорит посетителю, что раздел сейчас актуален.
  Стоит первой в текстовой колонке, поэтому выравнена с заголовком, а не
  с аватаром.
*/
.post__pinned {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
  color: var(--muted-foreground);
  font-size: 13px;
  font-weight: 500;
}

.post__pinned-icon { width: 14px; height: 14px; }

/* flex items-center gap-2 */
.post__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.post__author {
  font-size: 16px;
  font-weight: 500;
}

/* кнопку «...» отжимает вправо обёртка меню, а не сама кнопка */
.post__more-wrap { margin-left: auto; }

.post__more {
  display: flex;
  color: var(--muted-foreground);
}

.post__more-icon { width: 20px; height: 20px; }

.post__actions { margin-top: 14px; }

/* ---------- Содержимое раздела -------------------------------------------- */

.content {
  margin-top: 6px;
  font-size: 17px;
  line-height: 1.45;
}
.content p + p { margin-top: 10px; }

/* цифры раздела: «50 минут», «8500 ₽» и т.п. */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.facts__value {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}

.facts__label {
  font-size: 15px;
  color: var(--muted-foreground);
}

/* список запросов — теги-кружочки */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.tags__item {
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: 9999px;
  font-size: 14px;
  line-height: 1.3;
}

/* фотографии — лента с прокруткой вбок */
.photos {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  cursor: grab;
}
.photos::-webkit-scrollbar { display: none; }
.photos.is-dragging { cursor: grabbing; scroll-snap-type: none; }

.photos__img {
  width: 76%;
  max-width: 300px;
  flex: none;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-2xl);
  object-fit: cover;
  scroll-snap-align: start;
  -webkit-user-drag: none;
  user-select: none;
}

.photos--one .photos__img {
  width: 100%;
  max-width: none;
}

/* строки со ссылками: контакты, соцсети, карта */
.links { margin-top: 14px; }

.links li + li { border-top: 1px solid var(--border); }

.links__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
}

.links__icon {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--muted-foreground);
}

.links__text {
  min-width: 0;
  flex: 1;
}

.links__label { display: block; font-size: 16px; }

.links__note {
  display: block;
  font-size: 14px;
  color: var(--muted-foreground);
}

.links__chevron {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--muted-foreground);
}

/* ---------- Действия под постом -------------------------------------------- */
/* flex items-center gap-[22px] */

.actions {
  display: flex;
  align-items: center;
  gap: 22px;
}

.actions__btn {
  display: flex;
  align-items: center;
  gap: 6px;
}

.actions__icon { width: 22px; height: 22px; }

/* надпись «Смотреть ответы (3)» рядом со значком; число в ней —
   моноширинными цифрами, чтобы строка не дёргалась при смене надписи */
.actions__label {
  font-size: 15px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ---------- Ветка ответов -------------------------------------------------- */

.thread {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 14px;
  padding-left: 14px;

  /* высота треда тоже анимируется (JS выставляет px-значения), поэтому
     соседний пост не прыгает мгновенно, а сдвигается вместе с раскрытием */
  overflow: hidden;
  transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1),
              margin-top 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

/* к моменту, когда JS полностью скроет блок (hidden), здесь уже 0 высоты
   и 0 отступа — иначе в конце анимации схлопывался бы ещё и margin-top */
.thread.is-collapsed {
  margin-top: 0;
}

.reply {
  position: relative;
  isolation: isolate; /* чтобы линия-коннектор пряталась только за своей аватаркой, не за всей страницей */
  display: flex;
  gap: 10px;

  /* каскадное появление при раскрытии треда (см. .thread.is-collapsed ниже) */
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1), transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 60ms);
}

/* линия между аватарками ответов: идёт по их центру, с отступом от самих аватарок */
.reply:not(:last-child)::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 34px;     /* низ аватарки (28px) + отступ 6px */
  bottom: -10px; /* до аватарки следующего ответа — тоже с отступом 6px */
  left: 13px;    /* центр аватарки (28px) минус половина толщины линии */
  width: 2px;
  background: var(--border);
}

/* переходное состояние на время открытия/закрытия треда — задаёт JS */
.thread.is-collapsed .reply {
  opacity: 0;
  transform: translateY(8px);
}

.reply__avatar {
  width: 28px;
  height: 28px;
  flex: none;
  align-self: flex-start;
  border-radius: 9999px;
  object-fit: cover;
}

.reply__main {
  min-width: 0;
  flex: 1;
}

.reply__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.reply__author {
  font-size: 15px;
  font-weight: 500;
}

/* внутри ответа всё чуть мельче, чем в самом посте */
.reply .content {
  margin-top: 3px;
  font-size: 16px;
  line-height: 1.4;
}

.reply .facts,
.reply .tags,
.reply .links,
.reply .photos { margin-top: 10px; }

/* ---------- Нижняя навигация ------------------------------------------------ */
/* прижата к низу экрана и не уезжает при прокрутке — как в мобильном приложении */

.tabbar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: 100%;
  max-width: 576px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 12px 8px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--background);
}

.tabbar__btn { display: flex; }

.tabbar__icon { width: 26px; height: 26px; }

/* ---------- Сообщение «Ссылка скопирована» ---------------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar-height) + 16px + env(safe-area-inset-bottom));
  z-index: 20;
  transform: translateX(-50%);
  max-width: calc(100% - 32px);
  padding: 10px 16px;
  border-radius: 9999px;
  background: var(--foreground);
  color: var(--background);
  font-size: 14px;
}

/* ---------- Широкие экраны: профиль и навигация слева, лента справа -------- */
/* до 768px — верстка выше (одна колонка, .tabbar прибита к низу экрана) */

@media (min-width: 768px) {
  .page {
    max-width: none;
    padding-bottom: 32px;
  }

  /* верхняя панель растягивается над обеими колонками */
  .topbar {
    max-width: 1100px;
    margin-inline: auto;
    padding-left: 24px;
    padding-right: 24px;
  }

  .layout {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
    max-width: 1100px;
    margin-inline: auto;
    padding: 0 24px;
  }

  /* сайдбар держится на месте, пока лента справа скроллится */
  .sidebar {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    flex: none;
    width: 380px;
    max-height: 100vh;
    max-height: 100svh;
    overflow-y: auto;
  }

  .feed {
    width: 100%;
    max-width: 576px;
  }

  /* разделитель над первым постом нужен только в мобильной ленте — колонки и так разделены */
  .feed > .divider:first-child { display: none; }

  /* аватарку в шапке профиля заменяет полноценное фото */
  .profile__cover {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    margin-bottom: 16px;
    border-radius: var(--radius-2xl);
    object-fit: cover;
  }

  .profile__avatar { display: none; }

  /* запас снизу профиля — иначе бейдж соцсетей упирается в навигацию под ним */
  .profile { padding-bottom: 24px; }

  /* нижняя навигация больше не прибита к низу экрана — она внизу сайдбара,
     с гарантированным отступом от бейджа соцсетей (margin-top: auto его не даёт,
     если контент сайдбара и так длиннее экрана) */
  .sidebar .tabbar {
    position: static;
    left: auto;
    bottom: auto;
    transform: none;
    z-index: auto;
    width: 100%;
    max-width: none;
    margin-top: auto;
    padding: 24px 0 16px;
  }

  /* Окошко ссылок бейджа раскрывается вверх, а не вниз.

     Сайдбар прокручивается сам (overflow-y: auto выше), а бейдж стоит
     в самом его низу, над навигацией. Вниз окошко уезжало бы за нижний
     край сайдбара — то есть под его прокрутку: видна была бы одна строка,
     а остальные пришлось бы искать колесом. Вверх оно ложится поверх био,
     где место всегда есть, и видно целиком сразу.

     На узких экранах этого не нужно: там сайдбар — обычный поток страницы,
     ничего не обрезается, и окошко привычно падает вниз. */
  .badge-wrap .menu {
    top: auto;
    bottom: calc(100% + 8px);
    transform-origin: bottom left;
    transform: translateY(4px) scale(0.97);
  }

  .badge-wrap .menu.is-open { transform: translateY(0) scale(1); }

  .toast { bottom: 24px; }
}

/* ---------- Мелочи для реальных устройств ---------------------------------- */

@media (hover: hover) {
  .actions__btn:hover,
  .post__more:hover,
  .topbar__btn:not([disabled]):hover,
  .tabbar__btn:hover,
  .notices__remove:hover,
  .profile__badge:hover { opacity: 0.6; }

  .profile__link a:hover { text-decoration: underline; }

  .links__item:hover .links__label { text-decoration: underline; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .menu { transition: none; }
  .thread,
  .reply { transition: none; }
}