/* ============================================================
   MVP Social — тема "тушевое дерево"
   Токены: белый + кремовый фон, тёмный текст, тонкие линии
   вместо карточек с тенями. Unbounded ExtraLight для заголовков
   (кириллица), моноширинный для служебных данных, гротеск
   для основного текста.
   ============================================================ */

/* Unbounded — самостоятельно захостен в assets/fonts/ (не через Google Fonts CDN):
   1) CSP style-src 'self' блокирует внешние @import — тут нечего блокировать;
   2) сайт для семьи, каждый визит не должен светить IP посетителя перед Google. */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('fonts/unbounded-200-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('fonts/unbounded-200-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/unbounded-300-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/unbounded-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/unbounded-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/unbounded-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/unbounded-600-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/unbounded-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Белая тема. Фон не идеально-белый (#FFF), а чуть притемнённый (#F7F7F7) —
       иначе мягкой тени карточек/кнопок было бы физически не за что "цепляться"
       (светлый край тени на чистом белом сливается с фоном в ничто). Тот же
       принцип, что раньше держал кремовый фон — просто нейтральный оттенок
       вместо тёплого. Светлую половину тени убрали вовсе (см. box-shadow ниже) —
       на таком светлом фоне она всё равно осталась бы почти незаметной,
       чище получить объём одной, чуть более плотной тёмной тенью. */
    --bg:          #F7F7F7;
    --bg-raised:   #EFEFEF;
    --text:        #141414;
    --text-dim:    #6E6E6E;
    --line:        #E2E2E2;
    --line-strong: #C7C7C7;
    --invert-bg:   #141414;
    --invert-text: #FAFAFA;

    --font-display: 'Unbounded', 'Helvetica Neue', Arial, sans-serif;
    --font-body:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-mono:    'SF Mono', Consolas, Monaco, 'Courier New', monospace;

    /* Палитра аватара-заглушки — выбирается по data-color="0".."5" (Layout::avatar),
       не через inline style="", которую блокирует CSP style-src 'self'. */
    --avatar-color-0: #8B6F4E;
    --avatar-color-1: #7C8B6C;
    --avatar-color-2: #9C7A4E;
    --avatar-color-3: #6E7F8B;
    --avatar-color-4: #A9765A;
    --avatar-color-5: #7A6E8B;

    --max-width: 620px;
    --radius: 14px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    overflow-x: hidden;
}

body {
    min-height: 100vh;
}

a {
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid var(--line-strong);
}
a:hover { border-bottom-color: var(--text); }

h1, h2 {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: 0.01em;
    margin: 0 0 1.2rem;
}
h1 { font-size: 1.5rem; }

/* --- Hero: логотип "MVP PROJECT" в стиле ар-деко (готовое изображение) --- */
.hero-logo {
    width: 180px;
    margin: 1rem auto 2rem;
}
.hero-logo img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(8px 8px 16px rgba(0,0,0,0.18));
}

/* --- Верхняя навигация (разметка — src/Layout.php) --- */
.nav {
    width: 100%;
    background: var(--bg-raised);
    box-shadow: 0 3px 10px rgba(0,0,0,0.09);
}
.nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0.9rem 1.25rem;
    gap: 1rem;
}
.nav__brand {
    display: block;
    flex-shrink: 0;
    line-height: 0;
    border-bottom: none;
    transition: transform 0.15s ease;
}
.nav__brand:hover { transform: translateY(-1px); }
.nav__brand img {
    width: 56px;
    height: 56px;
    display: block;
}
.nav__links {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
}
.nav__links a,
.nav__logout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.35rem;
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.02em;
    border-bottom: none;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.15s ease;
}
.nav__links a:hover, .nav__logout:hover { color: var(--text); }
.nav__links a.is-active { color: var(--text); }
.nav__logout-form { margin: 0; }
.nav__logout { font-weight: 400; line-height: inherit; }
.nav__links span { line-height: 1; }
/* Единый стиль для ВСЕХ кнопок шапки — раньше так рисовался только колокольчик
   уведомлений (голая векторная линия, без залитой плитки-фона), остальные были
   растровыми PNG-плитками. Теперь весь ряд — один визуальный набор. */
.nav__icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: var(--text-dim);
    transition: transform 0.15s ease, color 0.15s ease;
}
.nav__icon svg { width: 60%; height: 60%; }
.nav__links a:hover .nav__icon, .nav__logout:hover .nav__icon { transform: translateY(-1px); color: var(--text); }
/* Активный раздел: тёмное кольцо вокруг иконки — видно сразу, не только по тексту */
.nav__links a.is-active .nav__icon {
    box-shadow: 0 0 0 2px var(--text);
    color: var(--text);
}
.nav__icon--bell { position: relative; }
.nav__badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 999px;
    background: #8B4A3E;
    color: #fff;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    line-height: 16px;
    text-align: center;
}

/* Инлайн-иконка внутри текста (камера в композере, "отправить" на карточке
   поста) — векторная, currentColor, без плитки-фона: раньше тут была
   растровая PNG со своей залитой подложкой, поэтому и требовалась тень —
   теперь иконка просто часть строки, как эмодзи. */
.icon-inline {
    display: inline-block;
    width: 19px;
    height: 19px;
    vertical-align: -5px;
    margin-right: 0.3rem;
    color: var(--text-dim);
}
.icon-inline svg { width: 100%; height: 100%; }

/* --- Контейнер контента --- */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 2.2rem 1.25rem 4rem;
}

.container--narrow {
    max-width: 380px;
    padding-top: 4rem;
}

/* --- Формы --- */
.field { margin-bottom: 1.1rem; }
.field label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text-dim);
    margin-bottom: 0.4rem;
}
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
    width: 100%;
    background: var(--bg-raised);
    border: 1px solid transparent;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.95rem;
    padding: 0.65rem 0.75rem;
    border-radius: var(--radius);
    box-shadow: 5px 5px 10px rgba(0,0,0,0.10);
}
input:focus, textarea:focus {
    outline: none;
    border-color: var(--text-dim);
    box-shadow: 5px 5px 10px rgba(0,0,0,0.10), 0 0 0 2px var(--line-strong);
}
textarea { resize: vertical; }

input[type="file"] {
    width: 100%;
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    padding: 0.4rem 0;
}
/* Нативная кнопка выбора файла — та же светлая пилюля, что и .btn/.pill,
   а не отдельный тёмный стиль браузерного виджета. */
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
    background: var(--bg);
    color: var(--text);
    border: none;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
    margin-right: 0.7rem;
    cursor: pointer;
    box-shadow: 4px 4px 9px rgba(0,0,0,0.13);
    transition: box-shadow 0.15s ease;
}
input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover {
    box-shadow: 2px 2px 5px rgba(0,0,0,0.13);
}

/* .btn — та же светлая неоморфная пилюля, что и .pill (см. ниже), а не
   отдельный тёмный стиль: раньше на сайте сосуществовали два языка кнопок
   (тёмная прямоугольная .btn и светлая пилюля .pill) — теперь один.
   Затрагивает только внешний вид: разметка форм, CSRF-токены и обработчики
   отправки нигде не менялись. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    background: var(--bg);
    color: var(--text);
    border: none;
    border-radius: 999px;
    padding: 0.55rem 1.3rem;
    font-family: var(--font-body);
    font-size: 0.88rem;
    cursor: pointer;
    box-shadow: 4px 4px 9px rgba(0,0,0,0.13);
    transition: box-shadow 0.15s ease;
}
.btn:hover { box-shadow: 2px 2px 5px rgba(0,0,0,0.13); }

/* --- Сообщения об ошибке / статусе --- */
.notice {
    font-size: 0.88rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--line-strong);
    margin-bottom: 1.2rem;
}
.notice--error { border-color: #C99A92; color: #7A362B; }
.notice--ok    { border-color: #9CC494; color: #34592E; }

/* --- Разделитель --- */
.divider { border: none; border-top: 1px solid var(--line); margin: 1.6rem 0; }

/* --- Лента / посты --- */
.feed-tabs {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1.6rem;
    border-bottom: 1px solid var(--line);
}
.feed-tabs__item {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--text-dim);
    border-bottom: 2px solid transparent;
    padding: 0.4rem 0.2rem 0.6rem;
    margin-bottom: -1px;
}
.feed-tabs__item:hover { color: var(--text); }
.feed-tabs__item.is-active {
    color: var(--text);
    border-bottom-color: var(--text);
    font-weight: 600;
}
.composer {
    display: flex;
    gap: 0.85rem;
    margin-bottom: 1.8rem;
    padding: 1.1rem 1.2rem;
    border-radius: var(--radius);
    background: var(--bg);
    box-shadow: 6px 6px 14px rgba(0,0,0,0.09);
}
.composer .avatar { margin-top: 0.15rem; width: 40px; height: 40px; font-size: 17px; }
.composer__fields { flex: 1; min-width: 0; }
/* "Фишка" ленты: низ карточки сходится в точку, а не прямой угол. Реальный
   контент (текст/фото/кнопки/комментарии) целиком лежит в верхней прямоугольной
   зоне — низ просто ДОБАВЛЕННЫЙ отступ (padding-bottom), в который врезается
   остриё через clip-path. Поэтому скос ничего не обрезает — ни кнопку лайка,
   ни форму ответа под последним комментарием, сколько бы комментариев ни было:
   зона отреза фиксированной высоты (calc(100% - 42px)), не в процентах от
   ВСЕЙ карты, иначе на длинных постах отрезало бы четверть контента. */
.post {
    display: flex;
    gap: 0.85rem;
    padding: 1.1rem 1.2rem;
    margin-bottom: 1rem;
    border-radius: var(--radius);
    background: var(--bg);
    box-shadow: 6px 6px 14px rgba(0,0,0,0.09);
}
.post__avatar-link { flex-shrink: 0; border-bottom: none; }
.post__avatar-link .avatar { width: 44px; height: 44px; font-size: 18px; }
.post__body-col { min-width: 0; flex: 1; }

/* Базовый вид аватара; конкретный размер/font-size задаёт контекст-обёртка
   (.composer, .post__avatar-link, .board-header__avatar-wrap, ...) — см. ниже.
   Цвет заглушки — по data-color, не по inline style (см. Layout::avatar). */
.avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    color: var(--invert-text);
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1;
    flex-shrink: 0;
}
.avatar[data-color="0"] { background: var(--avatar-color-0); }
.avatar[data-color="1"] { background: var(--avatar-color-1); }
.avatar[data-color="2"] { background: var(--avatar-color-2); }
.avatar[data-color="3"] { background: var(--avatar-color-3); }
.avatar[data-color="4"] { background: var(--avatar-color-4); }
.avatar[data-color="5"] { background: var(--avatar-color-5); }
.avatar--photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.post__meta {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text-dim);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.post__meta strong {
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--text);
    font-size: 0.92rem;
}
.post__time { color: var(--text-dim); }
.post__author { border-bottom: none; }
.post__author:hover strong { border-bottom: 1px solid var(--text); }
.post__friend-badge {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    color: var(--text);
    background: var(--bg-raised);
    border-radius: 6px;
    padding: 0.1rem 0.4rem;
    letter-spacing: 0.02em;
}
.btn--link-danger {
    background: none;
    border: none;
    color: #8B4A3E;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    cursor: pointer;
    padding: 0;
}
.btn--link-danger:hover { color: #6B3428; text-decoration: underline; }
.btn--link {
    background: none;
    border: none;
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    cursor: pointer;
    padding: 0;
}
.btn--link:hover { color: var(--text); text-decoration: underline; }

.comments { margin-top: 0.8rem; padding-top: 0.6rem; border-top: 1px solid var(--bg-raised); }
.comment { display: flex; gap: 0.55rem; margin-bottom: 0.55rem; }
.comment__avatar-link { flex-shrink: 0; border-bottom: none; }
.comment__avatar-link .avatar { width: 30px; height: 30px; font-size: 13px; }
.comment__body-col { min-width: 0; }
.comment__text { font-size: 0.86rem; }
.comment__author { border-bottom: none; }
.comment__author strong { font-weight: 600; color: var(--text); }
.comment__delete-form { display: inline; margin: 0; }
.comment-form { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.5rem; }
.comment-form input[type="text"] { flex: 1; font-size: 0.86rem; padding: 0.4rem 0.6rem; }

.post__edited { color: var(--text-dim); font-size: 0.72rem; font-style: italic; }

/* Инлайн-редактирование поста/комментария — переключатель на чистом CSS
   (checkbox:checked ~ сосед), без JS, тот же приём, что и у "показать медиа
   профиля" на доске. Чекбокс должен идти РАНЬШЕ .inline-edit__view/__form
   как их сосед по DOM — тогда общий селектор ~ до них достаёт. */
.inline-edit__checkbox { position: absolute; }
.inline-edit__form { display: none; }
.inline-edit__checkbox:checked ~ .inline-edit__view { display: none; }
.inline-edit__checkbox:checked ~ .inline-edit__form { display: block; }
.inline-edit__checkbox:checked ~ .inline-edit__form.inline-edit__form--comment { display: flex; align-items: center; gap: 0.5rem; }
.inline-edit__form textarea { width: 100%; margin-bottom: 0.4rem; }
.inline-edit__actions { display: flex; gap: 0.8rem; }
.inline-edit__form--comment input[type="text"] { flex: 1; font-size: 0.86rem; padding: 0.35rem 0.55rem; }

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    padding: 0.3rem 0;
}
.group-members {
    color: var(--text-dim);
    font-size: 0.84rem;
    margin-bottom: 1rem;
}
.group-manage {
    margin-bottom: 1.2rem;
    background: var(--bg);
    border-radius: var(--radius);
    padding: 0.7rem 1rem;
    box-shadow: 4px 4px 10px rgba(0,0,0,0.09);
}
.group-manage summary { cursor: pointer; font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-dim); }
.group-manage__form { display: flex; gap: 0.5rem; margin: 0.7rem 0; }
.group-manage__form select { flex: 1; }
.group-manage form:last-child { margin-top: 0.5rem; }

.notifications-mark-form { margin-bottom: 1.2rem; }
.friend-request-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
.friend-request-actions form { margin: 0; }

.totp-secret {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    background: var(--bg-raised);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    word-break: break-all;
    display: inline-block;
}
.post__body { white-space: pre-line; }
/* Фото поста — в виде полароида: белая рамка (всегда чисто-белая бумага,
   независимо от --bg темы — в этом весь смысл приёма), толстая снизу, как
   место под подпись у настоящего снимка. Ширина ограничена — это должно
   читаться как маленькое фото, а не растянутый на всю ширину баннер. */
.post__photo-frame {
    display: inline-block;
    max-width: min(100%, 340px);
    background: #fff;
    padding: 10px 10px 32px 10px;
    border-radius: 2px;
    box-shadow: 3px 5px 12px rgba(0,0,0,0.16);
    margin-bottom: 0.8rem;
}
.post__image {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 1px;
}
.post__action {
    margin-top: 0.6rem;
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    gap: 0.9rem;
}
.post__action form { margin: 0; }
.reaction-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--bg-raised);
    color: var(--text-dim);
    border: none;
    border-radius: 999px;
    padding: 0.25rem 0.65rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    cursor: pointer;
    box-shadow: 3px 3px 7px rgba(0,0,0,0.09);
    transition: box-shadow 0.15s ease, color 0.15s ease;
}
.reaction-btn:hover { color: var(--text); }
.reaction-btn.is-active {
    color: #8B4A3E;
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.11);
}

.empty {
    color: var(--text-dim);
    font-style: italic;
    padding: 1.5rem 0;
}
.empty--center { text-align: center; }

.field__hint {
    color: var(--text-dim);
    font-size: 0.78rem;
    margin: 0.4rem 0 0;
}
.field__hint--inline { margin: 0; font-size: 0.82rem; }

/* --- Список диалогов ---
   Строка = две отдельные ссылки, не одна: аватар+ник ведут в профиль,
   а превью сообщения открывает саму переписку — это два разных действия,
   и вложенные <a> в HTML невалидны, поэтому строка не единая ссылка.
   Каждая строка — своя приподнятая карточка (как .post), а не строка
   таблицы на общем фоне — иначе диалоги визуально сливаются друг с другом. */
.conversation-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    margin-bottom: 0.65rem;
    border-radius: var(--radius);
    background: var(--bg);
    box-shadow: 5px 5px 11px rgba(0,0,0,0.09);
}
.conversation-row__identity {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    border-bottom: none;
    flex-shrink: 0;
    min-width: 0;
}
.conversation-row__identity .avatar { width: 46px; height: 46px; font-size: 19px; }
.conversation-row__identity:hover .conversation-row__name { border-bottom: 1px solid var(--text); }
.conversation-row__name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}
.conversation-row__open {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    border-bottom: none;
    min-width: 0;
    flex: 1;
}
.conversation-row__preview {
    color: var(--text-dim);
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.conversation-row__time {
    color: var(--text-dim);
    font-size: 0.72rem;
    font-family: var(--font-mono);
    margin-top: 0.15rem;
}
/* Вариант для поиска — вся строка одна ссылка на профиль, действие только одно */
.conversation-row--single .conversation-row__identity { border-bottom: none; }

.notification-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    margin-bottom: 0.5rem;
    border-radius: var(--radius);
    background: var(--bg);
    box-shadow: 4px 4px 10px rgba(0,0,0,0.08);
    border-bottom: none;
    color: var(--text);
}
a.notification-row:hover { box-shadow: 2px 2px 5px rgba(0,0,0,0.10); }
.notification-row .avatar { width: 40px; height: 40px; font-size: 16px; flex-shrink: 0; }
.notification-row.is-unseen { box-shadow: 0 0 0 2px #8B4A3E, 4px 4px 10px rgba(0,0,0,0.08); }
.notification-row__body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.notification-row__text { font-size: 0.9rem; }
.notification-row__time { color: var(--text-dim); font-size: 0.72rem; font-family: var(--font-mono); }
.new-dm { display: flex; gap: 0.6rem; margin-bottom: 1.5rem; }
.new-dm input { flex: 1; }
.new-dm .btn { flex-shrink: 0; }

/* --- Заголовок переписки: аватар + имя собеседника, кликабельно в профиль --- */
.thread-header {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 1.3rem;
    border-bottom: none;
}
.thread-header .avatar { width: 48px; height: 48px; font-size: 20px; }
.thread-header:hover .thread-header__name { border-bottom: 1px solid var(--text); }
.thread-header__name {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.25rem;
}

/* --- Тред переписки: каждое сообщение — своя карточка с тенью,
   разделены отступом, а не одной сплошной рамкой "все в кучу". Свои
   сообщения справа, чужие — слева с аватаром, как в любом живом мессенджере. */
/* Без своего max-height/overflow — раньше был скролл внутри скролла
   (у треда свой скролл-бар поверх скролла страницы), что выглядело как
   "окно в окне". Теперь лента сообщений просто течёт вместе со страницей. */
.thread {
    padding: 0.5rem 0.2rem;
    margin-bottom: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.msg {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    max-width: 82%;
}
.msg--theirs { align-self: flex-start; }
.msg--mine { align-self: flex-end; }
.msg__avatar-link { flex-shrink: 0; border-bottom: none; }
.msg__avatar-link .avatar { width: 32px; height: 32px; font-size: 13px; }
.msg__bubble {
    background: var(--bg);
    border-radius: var(--radius);
    padding: 0.6rem 0.85rem;
    box-shadow: 5px 5px 11px rgba(0,0,0,0.10);
}
.msg--mine .msg__bubble {
    background: var(--invert-bg);
    color: var(--invert-text);
    box-shadow: 4px 4px 10px rgba(0,0,0,0.18);
}
.msg__text { white-space: pre-line; font-size: 0.94rem; line-height: 1.45; }
.msg__sender-name {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-dim);
    margin-bottom: 0.25rem;
}
/* Подпись под вложением — визуально отдельный блок, а не слипшийся текст
   вплотную к фото/видео/голосовому: тонкая линия и отступ, только когда
   перед текстом реально есть вложение (CSS сам это определяет по :first-child). */
.msg__bubble > .msg__text:not(:first-child) {
    margin-top: 0.15rem;
    padding-top: 0.55rem;
    border-top: 1px solid rgba(0,0,0,0.11);
}
.msg--mine .msg__bubble > .msg__text:not(:first-child) {
    border-top-color: rgba(255,255,255,0.18);
}
.msg__time {
    display: block;
    margin-top: 0.3rem;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    opacity: 0.65;
}

/* --- Вложения в сообщении: фото/видео/голос --- */
.msg__photos {
    display: grid;
    gap: 3px;
    margin-bottom: 0.6rem;
    border-radius: calc(var(--radius) - 4px);
    overflow: hidden;
}
.msg__photos--one { grid-template-columns: 1fr; max-width: 240px; }
.msg__photos--many { grid-template-columns: repeat(2, 1fr); max-width: 240px; }
.msg__photo-link { display: block; border-bottom: none; aspect-ratio: 1 / 1; }
.msg__photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.msg__video {
    display: block;
    max-width: 260px;
    width: 100%;
    border-radius: calc(var(--radius) - 4px);
    margin-bottom: 0.6rem;
    background: #000;
}
.msg__voice {
    display: block;
    width: 230px;
    max-width: 100%;
    margin-bottom: 0.6rem;
}

/* --- Композер ЛС: текст + кнопки вложений --- */
.composer-dm__attach-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.2rem 0 0.8rem;
}
/* Три кнопки — фото/видео/голосовое — одной формы и размера: одинаковый
   min-width и центрирование текста, чтобы разная длина слова не делала
   пилюли визуально разными кнопками. */
.composer-dm__attach-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    gap: 0.3rem;
    background: var(--bg);
    color: var(--text);
    border: none;
    border-radius: 999px;
    padding: 0.5rem 1rem;
    font-family: var(--font-body);
    font-size: 0.82rem;
    text-align: center;
    cursor: pointer;
    box-shadow: 4px 4px 9px rgba(0,0,0,0.13);
    transition: box-shadow 0.15s ease;
}
.composer-dm__attach-btn:hover { box-shadow: 2px 2px 5px rgba(0,0,0,0.13); }
.composer-dm__attach-btn.is-recording {
    background: #8B4A3E;
    color: var(--invert-text);
    box-shadow: inset 3px 3px 6px rgba(0,0,0,0.2);
}
.voice-status {
    font-size: 0.8rem;
    color: var(--text-dim);
    margin: -0.4rem 0 0.8rem;
}

/* --- Профиль / настройки --- */
.profile-field { margin-bottom: 0.5rem; color: var(--text-dim); font-size: 0.92rem; }
.profile-field strong { color: var(--text); font-weight: 600; }
.field__static {
    margin: 0;
    padding: 0.65rem 0.75rem;
    background: var(--bg-raised);
    border-radius: var(--radius);
    font-size: 0.95rem;
}

/* --- Публичная доска профиля --- */
.board-header {
    text-align: center;
    padding: 1rem 0 1.6rem;
}
.board-header h1 { margin-bottom: 0.3rem; }
.board-header__avatar-wrap {
    position: relative;
    display: inline-block;
    margin-bottom: 0.9rem;
}
.board-header__avatar-wrap .avatar {
    width: 88px;
    height: 88px;
    font-size: 2.1rem;
}
/* Кнопка смены аватара — та же тёплая неоморфная пилюля, что и везде
   на сайте (см. .pill), не чёрный чужеродный кружок поверх фото. Сама
   отправка ("сменить фото") живёт как обычная pill-кнопка в общем ряду
   действий (board-header__actions) через form="avatar-form" — не
   наслаивается на аватар геометрически. */
.avatar-upload-form {
    position: absolute;
    bottom: -2px;
    right: -2px;
}
.avatar-upload-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg);
    box-shadow: 3px 3px 7px rgba(0,0,0,0.16);
    cursor: pointer;
}
.avatar-upload-btn svg { width: 17px; height: 17px; color: var(--text); }
.avatar-upload-form input[type="file"] { display: none; }
/* После выбора файла камера-кнопка прячется (см. avatar-picker.js) —
   иначе висит без дела поверх фото и загромождает конструкцию до отправки. */
.board-header__avatar-wrap.avatar-file-chosen .avatar-upload-btn { display: none; }
.board-header__nickname {
    font-family: var(--font-mono);
    color: var(--text-dim);
    font-size: 0.85rem;
    margin: 0 0 0.5rem;
}
.board-header__bio {
    max-width: 440px;
    margin: 0 auto 0.7rem;
    font-size: 0.92rem;
    color: var(--text);
}
.board-header__meta {
    color: var(--text-dim);
    font-size: 0.8rem;
    margin: 0 0 0.9rem;
}
.board-header__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin: 0;
}
.board-header__actions form { margin: 0; }
/* Мягкая неоморфная «таблетка» для второстепенных действий */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    background: var(--bg);
    color: var(--text);
    border: none;
    border-radius: 999px;
    padding: 0.45rem 0.95rem 0.45rem 0.6rem;
    font-family: var(--font-body);
    font-size: 0.84rem;
    cursor: pointer;
    box-shadow: 4px 4px 9px rgba(0,0,0,0.13);
    transition: box-shadow 0.15s ease;
}
.pill:hover { box-shadow: 2px 2px 5px rgba(0,0,0,0.13); }
.pill--on { box-shadow: inset 3px 3px 6px rgba(0,0,0,0.13); color: var(--text-dim); }

/* --- Квадрат-превью доски: 4 треугольника от углов к центру --- */
.board-quad {
    width: min(72%, 300px);
    margin: 0 auto 1.1rem;
}
.board-quad__square {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: var(--bg-raised);
    overflow: hidden;
    box-shadow: 6px 6px 14px rgba(0,0,0,0.11);
}
.board-quad__tri {
    position: absolute;
    inset: 0;
}
.board-quad__tri img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.board-quad__tri--top    { clip-path: polygon(50% 50%, 0 0, 100% 0); }
.board-quad__tri--right  { clip-path: polygon(50% 50%, 100% 0, 100% 100%); }
.board-quad__tri--bottom { clip-path: polygon(50% 50%, 100% 100%, 0 100%); }
.board-quad__tri--left   { clip-path: polygon(50% 50%, 0 100%, 0 0); }

/* Диагональные швы между треугольниками — пунктир вместо сплошной линии,
   цветом var(--line-strong), как везде на сайте (например подчёркивание
   ссылок), а не сплошная полоса цвета фона. */
.board-quad__seam {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 141.5%;
    height: 2px;
    background-image: repeating-linear-gradient(
        to right,
        var(--line-strong) 0, var(--line-strong) 6px,
        transparent 6px, transparent 12px
    );
    pointer-events: none;
}
.board-quad__seam--a { transform: translate(-50%, -50%) rotate(45deg); }
.board-quad__seam--b { transform: translate(-50%, -50%) rotate(-45deg); }

/* Переключатель "посмотреть медиа профиля" — без единой строчки JS */
.board-toggle-checkbox { display: none; }
.board-quad__toggle-wrap { text-align: center; margin: 0 0 1.6rem; }
.board-quad__toggle-label {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-dim);
    cursor: pointer;
    border-bottom: 1px solid var(--line-strong);
    padding-bottom: 2px;
}
.board-quad__toggle-label:hover { color: var(--text); }
.board-quad__toggle-label .hide-text { display: none; }
.board-toggle-checkbox:checked ~ .board-quad__toggle-wrap .show-text { display: none; }
.board-toggle-checkbox:checked ~ .board-quad__toggle-wrap .hide-text { display: inline; }
.board-grid-wrapper { display: none; }
.board-toggle-checkbox:checked ~ .board-grid-wrapper { display: block; }

/* --- Респонсивность --- */
@media (max-width: 480px) {
    .nav__inner { gap: 0.4rem; padding: 0.75rem; }
    .nav__links { gap: 0.1rem; }
    .nav__brand img { width: 48px; height: 48px; }
    .nav__icon { width: 42px; height: 42px; }
    .nav__links a, .nav__logout { font-size: 0.58rem; padding: 0.15rem 0.2rem; }
    .container { padding: 1.6rem 1rem 3rem; }
}

/* --- Уважение к reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}