/* ═══ MVQ Alpha-2 — современный интерфейс соцсети ════════════════════════════
 *
 * Отдельный файл, а не правки внутри app.css: приёмка Alpha-2 должна читаться
 * одним куском, а откат — быть снятием одной строки из index.html.
 * Всё ниже перекрывает app.css по месту, ничего в нём не переписывая.
 *
 * Характер: свой. Никакого размытого стекла, тяжёлых теней и неона —
 * чистый вектор, спокойный сине-зелёный акцент, честный контраст. */

:root {
  /* Фирменный сине-зелёный. Замерено: 6,69:1 к --bg и 7,30:1 к --surface —
   * это акцент, которым можно писать текст, а не только красить плашки. */
  --a2-accent: #3056C9;
  --a2-accent-ink: #FFFFFF;
  --a2-capsule: #DBE9E4;      /* мягкая капсула активного пункта */
  --a2-capsule-ink: #233E96;
  --a2-nav-bg: #FFFFFF;
  --a2-nav-line: #DDD7CC;
  --a2-nav-shadow: 0 2px 10px rgba(23, 32, 42, .10);
  --a2-focus: #3056C9;

  /* Подпись активного пункта: 11–12sp и растёт вместе с --scale, а не стоит
   * на месте. В app.css здесь был жёсткий 11px, который при увеличении текста
   * до 200 % оставался 11px — то есть переставал быть 11sp. */
  --a2-nav-label: calc(11.5px * var(--scale));
}

:root[data-look-theme="dark"] {
  --a2-accent: #8AA8FF;       /* 8,87:1 к тёмному фону */
  --a2-accent-ink: #07131B;
  --a2-capsule: #16332F;
  --a2-capsule-ink: #8FE0D6;
  --a2-nav-bg: #151F25;
  --a2-nav-line: #2B3940;
  --a2-nav-shadow: 0 2px 12px rgba(0, 0, 0, .38);
  --a2-focus: #8AA8FF;

  --accent: #8AA8FF;          /* 8,87:1 к фону, текст на кнопке 9,20:1 */
  --accent-hover: #7AD6CC;
  --accentText: #07131B;
  --accent-soft: #16332F;
  --accent-soft-ink: #8FE0D6;
}

/* ── Видимый фокус ──────────────────────────────────────────────────────────
 * Одно правило на весь продукт: клавиатурный обход обязан быть видимым. */
.a2 :focus-visible,
.a2-nav :focus-visible,
.a2-studio :focus-visible {
  outline: 2px solid var(--a2-focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ── Плавающая нижняя капсула ───────────────────────────────────────────────
 * Четыре пункта: Главная, Обзор, Сообщения, Профиль. «Создать» и «События»
 * из постоянной навигации убраны — у создания две видимые двери (плюс в шапке
 * и строка «Что нового?»), а события живут разделом внутри Обзора. */
.a2-nav { display: none; }

@media (max-width: 900px) {
  /* Старая пятипунктовая полка выключается целиком. */
  .social-tabs { display: none !important; }

  .a2-nav {
    display: flex;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    /* Плавает над лентой и всегда выше системной полосы жестов. */
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    z-index: 40;
    width: min(calc(100vw - 24px), 420px);
    justify-content: space-around;
    align-items: center;
    gap: 4px;
    padding: 8px;
    background: var(--a2-nav-bg);
    border: 1px solid var(--a2-nav-line);
    border-radius: 999px;
    box-shadow: var(--a2-nav-shadow);
  }

  .a2-nav button {
    position: relative;
    /* 48×48 — минимальная зона нажатия, а не пожелание. */
    min-width: 48px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font-size: var(--a2-nav-label);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background var(--fast) ease, color var(--fast) ease;
  }

  /* У неактивного — только чистая векторная иконка. Подписи нет: четыре
   * подписи подряд на 320 точках либо жмутся до нечитаемого кегля, либо
   * режутся, и оба исхода запрещены. */
  .a2-nav button .a2-label { display: none; }

  .a2-nav button.active {
    background: var(--a2-capsule);
    color: var(--a2-capsule-ink);
  }
  .a2-nav button.active .a2-label {
    display: inline;
    white-space: nowrap;
  }

  .a2-nav .a2-ava {
    width: 24px; height: 24px; border-radius: 50%;
    object-fit: cover; display: block;
  }

  .a2-nav .dot {
    position: absolute; top: 4px; right: 6px;
    min-width: 16px; height: 16px; padding: 0 4px;
    display: grid; place-items: center;
    border-radius: 999px;
    background: var(--bad); color: #fff;
    font-size: 10px; font-weight: 700;
  }

  /* Лента не должна заканчиваться под капсулой. */
  .social-page { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

  /* Плюс в шапке виден всегда: это первая из двух видимых дверей создания.
   * В app.css он прятался на ≤360, и на телефоне двери в шапке не было. */
  .social-head .head-compose { display: inline-flex !important; }
}

/* На самой узкой ширине с крупным текстом подпись остаётся только у активного
 * пункта — это уже так по умолчанию, но зафиксируем и запретим перенос. */
@media (max-width: 360px) {
  .a2-nav { width: calc(100vw - 16px); gap: 2px; padding: 4px; }
  .a2-nav button { padding: 0 8px; }
  .a2-nav button.active .a2-label {
    max-width: 46vw;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ── Обзор: разделы вместо пустого экрана ───────────────────────────────── */
.a2-explore-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 4px 0 16px;
}
.a2-section-card {
  display: flex; align-items: center; gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--fast) ease, background var(--fast) ease;
}
.a2-section-card:hover { border-color: var(--a2-accent); }
.a2-section-card b { display: block; font-size: var(--fs); }
.a2-section-card small { color: var(--muted); }
.a2-section-card .a2-ic {
  flex: none; width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--a2-capsule); color: var(--a2-capsule-ink);
}

/* ── Студия создания ───────────────────────────────────────────────────────
 * Телефон: лист снизу по высоте содержимого, не «новый экран поверх чатов».
 * Стол: редактор раскрывается в самой ленте, без тяжёлого модального окна. */
.a2-studio-scrim {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(15, 23, 28, .42);
  animation: a2-fade var(--fast) ease;
}
.a2-studio {
  position: fixed; z-index: 61;
  left: 0; right: 0; bottom: 0;
  max-height: 90vh;
  display: flex; flex-direction: column;
  background: var(--surface);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  animation: a2-rise var(--mid) ease;
}
@keyframes a2-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes a2-rise { from { transform: translateY(14px); opacity: .6 } to { transform: none; opacity: 1 } }
@media (prefers-reduced-motion: reduce) {
  .a2-studio-scrim, .a2-studio { animation: none; }
}

.a2-studio-grab {
  width: 40px; height: 4px; border-radius: 999px;
  background: var(--line-strong);
  margin: 8px auto 4px;
}
.a2-studio-head {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 16px 12px;
}
.a2-studio-head b { font-size: var(--fs-md); }
.a2-studio-body { overflow: auto; padding: 0 16px 16px; }

/* Порядок инструментов задан решением: сначала камера/фото, затем пост,
 * история, видео, опрос. */
.a2-tools { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.a2-tool {
  display: flex; align-items: center; gap: 12px;
  padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); color: var(--text); cursor: pointer; text-align: left;
}
.a2-tool:hover { border-color: var(--a2-accent); }
.a2-tool.primary { grid-column: 1 / -1; background: var(--a2-capsule); border-color: transparent; }
.a2-tool.primary .a2-ic { background: var(--a2-accent); color: var(--a2-accent-ink); }
.a2-tool .a2-ic {
  flex: none; width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: var(--r-md); background: var(--surface2); color: var(--a2-accent);
}
.a2-draft-note { margin-top: 12px; color: var(--muted); font-size: var(--fs-sm); }

/* ── Стол: редактор внутри ленты ──────────────────────────────────────────── */
.a2-inline-editor {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 16px;
  margin-bottom: 12px;
}
.a2-inline-editor .a2-inline-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 12px;
}
.a2-inline-editor .grow { flex: 1 1 auto; }
.a2-audience {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--text); font-size: var(--fs-sm);
  cursor: pointer;
}
.a2-publish {
  padding: 8px 20px; border: 0; border-radius: 999px;
  background: var(--a2-accent); color: var(--a2-accent-ink);
  font-weight: 650; cursor: pointer;
}
.a2-publish[disabled] { opacity: .5; cursor: not-allowed; }


/* ── Узко и крупно: 320 точек при двукратном тексте ─────────────────────────
 * Здесь всё, что на обычном экране помещается, перестаёт помещаться. Правило
 * одно: переносить по словам и прокручивать полками, но не резать буквы и не
 * складывать горизонтальные ряды в столбик. */
@media (max-width: 380px) {
  /* Отборы «Для вас · Подписки · Рядом» — это полка, а не список. При
   * двукратном шрифте она складывалась в три строки во весь экран. */
  .social-head .chips,
  .social-page > .chips {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 8px;
  }
  .social-head .chips::-webkit-scrollbar,
  .social-page > .chips::-webkit-scrollbar { display: none; }
  .social-head .chips > *,
  .social-page > .chips > * { flex: 0 0 auto; }

  /* Подпись плитки истории резалась посреди слова («Созда / истор»).
   * Переносим по словам, разрешаем две строки и обрываем многоточием. */
  .story-add small,
  .stories small {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
    text-overflow: ellipsis;
    line-height: 1.25;
  }
}

/* ── Акцент продукта: сине-зелёный ────────────────────────────────────────────
 * Блок стоит в конце файла и повторяет селекторы tokens.css один в один.
 * Так надёжнее: у светлой темы там :root[data-look-theme="light"], у системной
 * — :root[data-look-theme="system"] внутри @media. Переопределение на голом
 * :root проигрывало им по специфичности, и светлая тема молча оставалась
 * тёмно-синей, пока тёмная уже позеленела.
 *
 * Замеры: белый текст на кнопке 7,30:1 (светлая) и 9,20:1 (тёмная);
 * ink мягкой плашки 5,97:1 и 8,91:1. */
:root,
:root[data-look-theme="light"] {
  --accent: #3056C9;
  --accent-hover: #137370;
  --accentText: #FFFFFF;
  --accent-soft: #DBE9E4;
  --accent-soft-ink: #233E96;
}
:root[data-look-theme="dark"] {
  --accent: #8AA8FF;
  --accent-hover: #7AD6CC;
  --accentText: #07131B;
  --accent-soft: #16332F;
  --accent-soft-ink: #8FE0D6;
}
@media (prefers-color-scheme: light) {
  :root[data-look-theme="system"] {
    --accent: #3056C9;
    --accent-hover: #137370;
    --accentText: #FFFFFF;
    --accent-soft: #DBE9E4;
    --accent-soft-ink: #233E96;
  }
}
@media (prefers-color-scheme: dark) {
  :root[data-look-theme="system"] {
    --accent: #8AA8FF;
    --accent-hover: #7AD6CC;
    --accentText: #07131B;
    --accent-soft: #16332F;
    --accent-soft-ink: #8FE0D6;
  }
}

/* ── Узко и крупно: полка отборов и подпись истории ─────────────────────────
 * Полка отборов лежит в .chips без обёртки .social-head — прежний селектор
 * по ней не попадал, и при двукратном тексте три отбора складывались в
 * столбик во весь экран. */
@media (max-width: 380px) {
  .chips {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 8px;
  }
  .chips::-webkit-scrollbar { display: none; }
  .chips > * { flex: 0 0 auto; }

  /* Плитка истории при крупном тексте шире: подпись «Создать историю»
   * перестаёт резаться посреди слова. */
  .story-add, .stories > * { min-width: 112px; }
  .story-add small, .stories small {
    font-size: calc(11px * var(--scale));
    line-height: 1.2;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
  }
}

/* ── Точечная причина обрезки на 320 × 200 % ────────────────────────────────
 * Замер в браузере: подпись плитки истории (<small> внутри .story-add) имеет
 * вычисленный max-width: 74px при кегле 22px, а слово «Создать» требует ~85px.
 * Вместе с overflow-wrap: break-word это давало разрыв посреди слова:
 * «Созда / ть…». Лечим ровно это: снимаем потолок ширины, запрещаем рвать
 * слово и разрешаем плитке быть чуть шире. Обрыв — многоточием по словам. */
@media (max-width: 380px) {
  .story-add { min-width: 120px; width: 120px; }
  .story-add small,
  .stories small {
    max-width: 100%;
    overflow-wrap: normal;
    word-break: keep-all;
    hyphens: none;
    white-space: normal;
  }
}

/* ── Место под inline-редактор в ленте ──────────────────────────────────────
 * Пока свёрнут — не занимает ни пикселя. Раскрытый редактор встаёт на место
 * строки «Что нового?», а не поверх ленты. */
.a2-inline-slot { display: none; }
.a2-inline-slot.open { display: block; margin-top: 8px; }
.a2-composer-host .a2-inline-slot.open + * { margin-top: 0; }
/* Раскрытый редактор — единственная форма на экране: свёрнутая строка под ним
 * только сбивала бы с толку. */
.a2-composer-host:has(.a2-inline-slot.open) > .social-compose { display: none; }
.a2-inline-editor .compose-tools { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Сводная полоса очереди отправки ────────────────────────────────────────
 * Появляется над перепиской, когда неушедших сообщений больше одного. */
.queue-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 16px;
  background: var(--surface2);
  border-bottom: 1px solid var(--line);
  color: var(--text);
}
.queue-bar b { display: block; font-size: var(--fs-sm); font-weight: 650; }
.queue-bar small { color: var(--muted); }
.queue-bar .grow { flex: 1 1 auto; }