/* Основные переменные темы */
:root {
  --bg-primary: #f6f6f6;
  --bg-secondary: #f0f2f5;
  --bg-tertiary: #e5e7eb;
  --bg-card: #ffffff;
  --bg-input: #f0f2f5;
  --text-primary: #000000;
  --text-secondary: #65676b;
  --text-muted: #a8a9ab;
  --accent-primary: #0088cc; /* Telegram blue */
  --accent-hover: #0077b3; /* Telegram blue hover */
  --success: #00ba5d; /* Telegram green */
  --danger: #e25a4b; /* Telegram red */
  --border: #e4e6ea;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
  --transition: all 0.2s ease;
  --border-radius: 12px;
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --post-border-radius: 16px;
  --post-padding: 16px;
  --post-margin-bottom: 16px;
  --post-bg: var(--bg-card);
  --post-header-padding: 8px 0;
  --post-content-padding: 12px 0;
  --post-actions-padding: 12px 0 0 0;
  --post-border: 1px solid var(--border);
  --post-shadow: var(--shadow);
  --post-hover-bg: var(--bg-secondary);
  --message-radius: 18px;
  --message-spacing: 8px;
  --message-own-bg: #e3f2fd;
  --message-other-bg: #f0f2f5;
  --message-own-text: #000000;
  --message-other-text: #000000;
  --chat-header-bg: var(--bg-card);
  --chat-header-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  --message-form-bg: var(--bg-card);
  --message-form-shadow: 0 -1px 2px rgba(0, 0, 0, 0.1);
  --message-form-border-top: 1px solid var(--border);
  --message-input-radius: 20px;
  --message-input-bg: var(--bg-input);
  --message-send-btn-bg: var(--accent-primary);
  --message-send-btn-hover-bg: var(--accent-hover);
  --message-send-btn-color: white;
  --message-btn-radius: 50%;
  --message-btn-size: 36px;
  --message-btn-bg: transparent;
  --message-btn-hover-bg: var(--bg-tertiary);
  --message-btn-color: var(--text-secondary);
  --message-btn-hover-color: var(--accent-primary);
  --conversation-radius: var(--border-radius);
  --conversation-padding: 12px 16px;
  --conversation-hover-bg: var(--bg-tertiary);
  --message-form-actions-gap: 8px;
  --message-form-actions-padding: 8px;
  --message-form-actions-bg: transparent;
  --message-form-action-btn-size: var(--message-btn-size);
  --message-form-action-btn-radius: var(--message-btn-radius);
  --message-form-action-btn-bg: var(--message-btn-bg);
  --message-form-action-btn-hover-bg: var(--message-btn-hover-bg);
  --message-form-action-btn-color: var(--message-btn-color);
  --message-form-action-btn-hover-color: var(--message-btn-hover-color);
  --message-form-send-btn-padding: 12px 20px;
  --message-form-send-btn-radius: var(--border-radius);
  --message-form-send-btn-bg: var(--message-send-btn-bg);
  --message-form-send-btn-hover-bg: var(--message-send-btn-hover-bg);
  --message-form-send-btn-color: var(--message-send-btn-color);
  --message-form-send-btn-font-weight: 600;
  --message-form-send-btn-transition: var(--transition);
  --message-form-send-btn-align: flex-end;
  --message-form-input-flex: 1;
  --message-form-input-min-height: 44px;
  --message-form-input-max-height: 120px;
  --message-form-input-padding: 12px 16px;
  --message-form-input-radius: var(--message-input-radius);
  --message-form-input-bg: var(--message-input-bg);
  --message-form-input-border: 1px solid var(--border);
  --message-form-input-color: var(--text-primary);
  --message-form-input-font-size: 16px;
  --message-form-input-transition: var(--transition);
  --message-form-input-overflow-y: auto;
  --message-form-input-focus-outline: none;
  --message-form-input-focus-border-color: var(--accent-primary);
  --message-form-input-focus-box-shadow: 0 0 0 2px rgba(29, 155, 240, 0.3);
  --bg-primary-rgb: 255, 255, 255; /* RGB для светлой темы */
  --bg-secondary-rgb: 240, 240, 240; /* RGB для светлой темы */
  --bg-tertiary-rgb: 220, 220, 220; /* RGB для светлой темы */
  --bg-input-rgb: 250, 250, 250; /* RGB для светлой темы */
  --text-primary-rgb: 0, 0, 0; /* RGB для светлой темы */
  --text-secondary-rgb: 100, 100, 100; /* RGB для свой темы */
  --text-muted-rgb: 150, 150, 150; /* RGB для светлой темы */
  --border-rgb: 200, 200, 200; /* RGB для светлой темы */
  --accent-primary-rgb: 29, 155, 240; /* RGB для светлой темы */
  --accent-hover-rgb: 26, 140, 216; /* RGB для светлой темы */
  --success-rgb: 0, 180, 0; /* RGB для светлой темы */
  --danger-rgb: 220, 0, 0; /* RGB для светлой темы */
  --warning-rgb: 255, 193, 7; /* RGB для светлой темы */
  --info-rgb: 21, 156, 228; /* RGB для светлой темы */
  --bg-card-rgb: 255, 255, 255; /* RGB для светлой темы */
}

/* Сброс стилей и базовые стили */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-family);
  line-height: 1.5;
  transition: var(--transition);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.content-and-sidebars {
  display: flex;
  gap: 20px;
  max-width: var(--content-and-sidebars-max-width);
  margin: 0 auto;
  padding: 0 10px;
  box-sizing: border-box;
  width: 100%;
}

.main-content-area {
  flex: 1; /* Занимает оставшееся пространство */
  max-width: 600px; /* Ограничиваем ширину основного контента, как и было */
  /* margin: 0 auto; /* Убираем центровку, так как теперь flex управляет позиционированием */
}

.sidebar-fixed {
  width: 250px; /* Фиксированная ширина боковой панели */
  display: flex;
  flex-direction: column;
  gap: 20px; /* Отступ между "Кого читать" и "Тренды" */
  /* position: sticky; /* Фиксируем при прокрутке */
  /* top: 60px; /* Отступ сверху, чтобы не перекрывалась верхняя навигация (предполагаем её высоту) */
  /* height: calc(100vh - 60px); /* Занимает высоту экрана минус высота навигации */
  /* overflow-y: auto; /* Прокрутка, если содержимое не помещается */
  /* padding: 10px 0; /* Отступ внутри */
  /* box-sizing: border-box; */
  /* align-self: flex-start; /* Прижимаем к верху */
}

/* --- Стили для блоков "Кого читать" и "Тренды" внутри боковой панели --- */
#recommendations,
#trends {
  background-color: var(--bg-card);
  border-radius: var(--border-radius);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  /* width: 100%; /* Убедимся, что ширина 100% от родителя .sidebar-fixed */
}

#recommendations h3,
#trends h3 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 16px;
  color: var(--text-secondary);
}

.rec-user,
.trend-post {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.rec-user:last-child,
.trend-post:last-child {
  border-bottom: none;
}

.rec-user img,
.trend-post img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-right: 12px;
  object-fit: cover;
}

.rec-user > div,
.trend-post > div {
  flex: 1;
  cursor: pointer;
}

.rec-user strong,
.trend-post strong {
  font-size: 14px;
}

.rec-user small,
.trend-post small {
  font-size: 12px;
  color: var(--text-muted);
}

.rec-user button,
.trend-post button {
  background-color: var(--accent-primary);
  color: white;
  border: none;
  border-radius: var(--border-radius);
  padding: 4px 8px;
  cursor: pointer;
  font-size: 12px;
  margin-left: 8px;
}

.rec-user button:hover,
.trend-post button:hover {
  background-color: var(--accent-hover);
}

.trend-post small {
  color: var(--text-muted);
  font-size: 12px;
  margin-left: 8px;
}


.top-nav {
  display: none; /* Сначала скрыта */
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: rgba(var(--bg-primary-rgb), 0.8);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  padding: 0.5rem 1rem;
  box-sizing: border-box;
}

.top-nav-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.logo-image {
  height: 40px; /* Установите желаемую высоту */
  width: auto;  /* Сохраняем пропорции */
}

.nav-buttons {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.nav-buttons a {
  text-decoration: none;
  color: var(--text-primary);
  font-weight: bold;
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius);
  transition: background-color 0.2s;
}

.nav-buttons a:hover {
  background-color: var(--background-secondary);
}

.profile-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.profile-nav img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
}

.logout-btn-top {
  background-color: var(--danger);
  color: white;
  border: none;
  padding: 0.25rem 0.5rem;
  border-radius: var(--border-radius);
  cursor: pointer;
  font-size: 0.85em;
}

.top-notifications {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
}

.top-notifications span {
  background-color: var(--danger);
  color: white;
  border-radius: 50%;
  padding: 0.2rem 0.4rem;
  font-size: 0.8em;
  min-width: 1.2rem;
  text-align: center;
}

.mobile-nav {
  display: none; /* Скрыто по умолчанию */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px; /* Высота меню */
  background-color: var(--bg); /* Используем переменную темы */
  border-top: 1px solid var(--border); /* Граница сверху */
  z-index: 1000; /* Поверх других элементов */
  justify-content: space-around; /* Равномерно распределить элементы */
  align-items: center; /* Выровнять по центру по вертикали */
  box-sizing: border-box; /* Включаем border в расчёт высоты */
}

.nav-item i, .nav-item span {
    display: none; /* Скрываем иконки Feather и текст */
}

#nav-home { background-image: url('assets/img/site/h.png'); }
#nav-search { background-image: url('assets/img/site/s.png'); }
#nav-messages { background-image: url('assets/img/site/m.png'); }
#nav-profile { background-image: url('assets/img/site/p.png'); }

.mobile-nav .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--text-secondary);
  padding: 0.5rem;
  transition: color 0.2s;
}

.mobile-nav .nav-item:hover,
.mobile-nav .nav-item.active { /* Добавлен класс active для подсветки */
  color: var(--accent-primary);
}

.mobile-nav .nav-item i {
  width: 24px; /* Feather Icons размер */
  height: 24px;
  margin-bottom: 0.25rem;
}

.mobile-nav .nav-item span {
  font-size: 0.75rem;
}

.mobile-nav {
    /* ... существующие стили ... */
    backdrop-filter: blur(10px);
    background-color: rgba(var(--bg-primary-rgb), 0.8);
    border-top: 1px solid rgba(var(--border-rgb), 0.5); /* Более прозрачная граница для стекла */
}

.nav-item {
  display: auto;
  flex-direction: column; /* Иконка над текстом */
  align-items: center; /* Центрируем содержимое (иконку и текст) по горизонтали */
  justify-content: center; /* Центрируем содержимое по вертикали */
  height: 100%; /* Занимает всю высоту родителя (.mobile-nav) */
  flex: 1; /* Равномерно распределяет доступное пространство */
  text-decoration: none; /* Убираем подчеркивание ссылок */
  color: var(--text-secondary); /* Цвет текста иконки по умолчанию */
  transition: color 0.2s ease; /* Плавный переход цвета */
  position: relative; /* Для потенциального позиционирования badge */
  min-height: 50px; /* Минимальная высота для удобства нажатия */
  /* Убираем предыдущие стили для фона и отступов под иконку */
  background-image: none;
  padding-top: 0;
  background-repeat: no-repeat;
  background-position: center top 10%;
  background-size: 24px 24px;
}

.nav-item i {
  display: none;
  width: 24px;
  height: 24px;
  margin-bottom: 0.55rem;
  /* Убираем flex-grow и flex-shrink, если они были */
  flex-grow: 0;
  flex-shrink: 0;
}

.nav-item span {
  display: none;
  font-size: 0.75rem;
  /* Убираем flex-grow и flex-shrink, если они были */
  flex-grow: 0;
  flex-shrink: 0;
}

#app {
  display: flex;
  flex: 1;
  min-height: 100vh;
  position: relative;
}

/* Сайдбар (навигация слева) */
.sidebar {
  position: fixed;
  top: 0;
  left: -250px; /* Скрыто за левым краем */
  width: 250px;
  height: 100vh;
  background-color: var(--background-primary);
  box-shadow: 2px 0 5px rgba(0,0,0,0.1);
  z-index: 1001;
  overflow-y: auto;
  transition: left 0.3s ease;
  padding-top: 60px; /* Учитываем высоту гамбургера */
  display: block; /* По умолчанию показано на мобильных */
}

.sidebar.open {
  left: 0; /* Открытое состояние */
}


.sidebar .logo {
  font-size: 24px;
  font-weight: 800;
  color: var(--accent-primary);
  margin-bottom: 24px;
  text-align: center;
}

.sidebar ul {
  list-style: none;
  padding: 0;
  flex: 1;
}

.sidebar li {
  margin-bottom: 4px;
}

.sidebar a,
.sidebar #notifications {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-radius: var(--border-radius);
  text-decoration: none;
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

.sidebar a:hover,
.sidebar #notifications:hover {
  background-color: var(--bg-tertiary);
}

.sidebar #notifications {
  font-size: 16px;
  padding-left: 16px;
  padding-right: 16px;
  margin-top: auto;
  width: calc(100% - 32px);
}

#notif-count {
  background-color: var(--danger);
  color: white;
  border-radius: 50%;
  padding: 2px 6px;
  font-size: 12px;
  margin-left: auto;
  min-width: 18px;
  text-align: center;
}

#profile-link {
  display: flex;
  align-items: center;
  padding: 12px;
  border-radius: var(--border-radius);
  margin-top: 16px;
  transition: var(--transition);
}

#profile-link:hover {
  background-color: var(--bg-tertiary);
}

#profile-link img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 12px;
  object-fit: cover;
}

#theme-toggle {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: var(--border-radius);
  padding: 8px 16px;
  margin-top: 16px;
  cursor: pointer;
  transition: var(--transition);
  width: 100%;
  font-size: 16px;
}

#theme-toggle:hover {
  background-color: var(--bg-tertiary);
}

/* Блоки "Кого читать" и "Тренды" внутри сайдбара */
#recommendations,
#trends {
  background-color: var(--bg-card);
  border-radius: var(--border-radius);
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}

#recommendations h3,
#trends h3 {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 16px;
  color: var(--text-primary);
}

.rec-user,
.trend-post {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.rec-user:last-child,
.trend-post:last-child {
  border-bottom: none;
}

.rec-user img,
.trend-post img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 12px;
  object-fit: cover;
}

.rec-user div,
.trend-post div {
  flex: 1;
}

.rec-user strong,
.trend-post strong {
  font-weight: 600;
  cursor: pointer;
}

.rec-user span,
.trend-post span {
  color: var(--text-secondary);
  font-size: 14px;
  display: block;
}

.rec-user button,
.trend-post button {
  margin-left: 8px;
  padding: 6px 12px;
  border-radius: var(--border-radius);
  border: 1px solid var(--border);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  cursor: pointer;
  transition: var(--transition);
  font-size: 14px;
  font-weight: 600;
}

.rec-user button:hover,
.trend-post button:hover {
  background-color: var(--bg-tertiary);
}

.rec-user button:last-child {
  background-color: var(--accent-primary);
  color: white;
  border: none;
}

.rec-user button:last-child:hover {
  background-color: var(--accent-hover);
}

.trend-post small {
  color: var(--text-muted);
  font-size: 12px;
  margin-left: 8px;
}

/* Хамбургер (для мобильных) */
.hamburger {
  display: none;
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 1001;
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 20px;
  cursor: pointer;
  transition: var(--transition);
  align-items: center;
  justify-content: center;
}

.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  transition: var(--transition);
}

.sidebar-overlay.show {
  display: block;
}

/* Основной контент */
main {
  flex: 1;
  margin-left: 260px;
  padding: 20px;
  max-width: 600px; /* Telegram-like max width */
  margin: 0 auto;
  transition: var(--transition);
}

/* Формы аутентификации */
.auth-form {
  background-color: var(--bg-card);
  border-radius: var(--border-radius);
  padding: 32px;
  box-shadow: var(--shadow);
  max-width: 400px;
  margin: 60px auto;
  text-align: center;
}

.auth-form h2 {
  margin-bottom: 24px;
  font-size: 24px;
  font-weight: 800;
}

.auth-form input {
  width: 100%;
  padding: 14px 16px;
  margin-bottom: 16px;
  border-radius: var(--border-radius);
  border: 1px solid var(--border);
  background-color: var(--bg-input);
  color: var(--text-primary);
  font-size: 16px;
  transition: var(--transition);
}

.auth-form input:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(29, 155, 240, 0.3);
}

.auth-form button {
  width: 100%;
  padding: 14px;
  background-color: var(--accent-primary);
  color: white;
  border: none;
  border-radius: var(--border-radius);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  margin-top: 16px;
}

.auth-form button:hover {
  background-color: var(--accent-hover);
}

.auth-form p {
  margin-top: 16px;
  color: var(--text-secondary);
  font-size: 14px;
}

.auth-form a {
  color: var(--accent-primary);
  text-decoration: none;
  font-weight: 600;
}

.auth-form a:hover {
  text-decoration: underline;
}

/* Форма создания поста */
/* Стили для формы поста */
.post-form {
  background-color: var(--background-secondary);
  padding: 16px;
  border-radius: var(--border-radius);
  margin-bottom: 16px;
}

#post-text {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  resize: vertical;
  min-height: 100px;
  background-color: var(--background-primary);
  color: var(--text-primary);
  box-sizing: border-box; /* Убедимся, что padding включается в ширину */
}

.post-form-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

#char-count {
  color: var(--text-secondary);
  font-size: 0.85em;
}

#attach-file-btn, .attach-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  padding: 4px 8px;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
}

#attach-file-btn:hover, .attach-btn:hover {
  background-color: var(--background-primary);
  color: var(--accent-primary);
  border-color: var(--accent-primary);
}

#post-image {
  /* Уже скрыт через style="display: none;" в HTML */
}

/* Стили для контейнера предварительного просмотра */
#image-preview-container {
  position: relative;
  display: inline-block;
  margin-top: 8px;
}

#image-preview {
  max-width: 200px; /* Ограничиваем ширину */
  max-height: 200px; /* Ограничиваем высоту */
  object-fit: contain; /* Сохраняем пропорции */
  border-radius: var(--border-radius);
  border: 1px solid var(--border);
}

/* Стили для кнопки удаления */
.remove-image-btn {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: var(--danger);
  color: white;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  padding: 0;
}

.remove-image-btn:hover {
  background-color: #c01e4d; /* Темнее при наведении */
}

#create-post-btn {
  width: 100%;
  padding: 12px;
  background-color: var(--accent-primary);
  color: white;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  margin-top: 8px;
  font-weight: bold;
}

#create-post-btn:hover {
  background-color: #1a91da;
}

.post-form textarea {
  width: 100%;
  min-height: 100px;
  resize: vertical;
  border-radius: var(--border-radius);
  border: 1px solid var(--border);
  background-color: var(--bg-input);
  color: var(--text-primary);
  padding: 12px;
  font-size: 16px;
  transition: var(--transition);
}

.post-form textarea:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(29, 155, 240, 0.3);
}

.post-form input[type="file"] {
  width: 100%;
  padding: 8px;
  border-radius: var(--border-radius);
  border: 1px solid var(--border);
  background-color: var(--bg-input);
  color: var(--text-primary);
  font-size: 14px;
  transition: var(--transition);
}

.post-form input[type="file"]:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(29, 155, 240, 0.3);
}

.post-form button {
  align-self: flex-end;
  padding: 10px 16px;
  background-color: var(--accent-primary);
  color: white;
  border: none;
  border-radius: var(--border-radius);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

#attach-file-btn:hover, .attach-btn:hover {
  background-color: var(--background-primary);
  color: var(--accent-primary);
  border-color: var(--accent-primary);
}

#post-image {
  /* Уже скрыт через style="display: none;" в HTML */
}

#create-post-btn {
  width: 100%;
  padding: 12px;
  background-color: var(--accent-primary);
  color: white;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  margin-top: 8px;
  font-weight: bold;
}

#create-post-btn:hover {
  background-color: #1a91da;
}

.post-form button:hover {
  background-color: var(--accent-hover);
}

/* Пост */
.post {
  background-color: var(--post-bg);
  border-radius: var(--post-border-radius);
  padding: var(--post-padding);
  margin-bottom: var(--post-margin-bottom);
  box-shadow: var(--post-shadow);
  transition: var(--transition);
  border: var(--post-border); /* Added border */
  position: relative; /* For pseudo-element */
}

.post:hover {
  background-color: var(--post-hover-bg);
  box-shadow: var(--shadow-lg); /* Enhanced shadow on hover */
}

.post::before { /* Accessory bar on the left */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 4px; /* Width of the bar */
  border-radius: var(--post-border-radius) 0 0 var(--post-border-radius);
  background: linear-gradient(to bottom, var(--accent-primary), var(--success)); /* Gradient color */
}

.post-header {
  display: flex;
  align-items: center;
  margin-bottom: var(--post-header-padding);
  padding-left: 8px; /* Add space for the accessory bar */
}

.post-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin-right: 12px;
  object-fit: cover;
  cursor: pointer;
}

.post-user-info {
  flex: 1;
}

.post-user-info strong {
  font-weight: 600;
  cursor: pointer;
}

.post-user-info span {
  color: var(--text-secondary);
  margin-left: 8px;
  cursor: pointer;
}

.post-user-info small {
  color: var(--text-muted);
  font-size: 12px;
}

.post-content p {
  margin: var(--post-content-padding);
  line-height: 1.6;
  cursor: pointer; /* Для полного экрана */
  padding-left: 8px; /* Add space for the accessory bar */
}

.post-image {
  max-width: 100%;
  border-radius: var(--border-radius);
  margin-top: 8px;
  cursor: pointer; /* Для полного экрана */
  margin-left: 8px; /* Add space for the accessory bar */
}

.post-actions {
  display: flex;
  justify-content: space-between;
  padding: var(--post-actions-padding);
  border-top: 1px solid var(--border);
  margin-left: 8px; /* Add space for the accessory bar */
  margin-right: 8px; /* Add space for the accessory bar */
}

.post-actions button {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  font-size: 16px;
}

.post-actions button:hover {
  background-color: var(--bg-tertiary);
  color: var(--accent-primary);
}

.post-actions button.liked,
.post-actions button.liked:hover {
  color: var(--danger);
}

.post-actions button.reposted,
.post-actions button.reposted:hover {
  color: var(--success);
}

/* Профиль */
.profile-header {
  background-color: var(--bg-card);
  border-radius: var(--border-radius);
  padding: 24px;
  margin-bottom: 20px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  box-shadow: var(--shadow);
}

.profile-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
}

.profile-info {
  flex: 1;
}

.profile-info h1 {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 4px;
}

.profile-info p {
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.profile-stats {
  display: flex;
  gap: 24px;
  margin: 16px 0;
  color: var(--text-secondary);
  font-size: 14px;
}

.profile-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Табы профиля */
.profile-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

.profile-tabs .tab {
  flex: 1;
  padding: 12px;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
  font-size: 16px;
  font-weight: 600;
  border-bottom: 2px solid transparent;
}

.profile-tabs .tab.active {
  color: var(--accent-primary);
  border-bottom: 2px solid var(--accent-primary);
}

/* Списки (подписчики, подписки, результаты поиска) */
.list-section {
  background-color: var(--bg-card);
  border-radius: var(--border-radius);
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}

.user-item,
.user-result {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.user-item:last-child,
.user-result:last-child {
  border-bottom: none;
}

.user-item img,
.user-result img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin-right: 12px;
  object-fit: cover;
}

.user-item div,
.user-result div {
  flex: 1;
}

.user-item strong,
.user-result strong {
  font-weight: 600;
  cursor: pointer;
}

.user-item span,
.user-result span {
  color: var(--text-secondary);
  display: block;
}

.user-item p,
.user-result p {
  color: var(--text-muted);
  font-size: 14px;
  margin-top: 4px;
}

.user-item button,
.user-result button {
  margin-left: 12px;
  padding: 8px 16px;
  border-radius: var(--border-radius);
  border: 1px solid var(--border);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  cursor: pointer;
  transition: var(--transition);
  font-weight: 600;
}

.user-item button:hover,
.user-result button:hover {
  background-color: var(--bg-tertiary);
}

.user-item button:hover {
  background-color: var(--bg-tertiary);
}

.user-result button:last-child {
  background-color: var(--accent-primary);
  color: white;
  border: none;
}

.user-result button:last-child:hover {
  background-color: var(--accent-hover);
}

/* Сообщения */
#conversations-list .conversation {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: var(--transition);
  margin-bottom: 8px;
}

#conversations-list .conversation:hover {
  background-color: var(--bg-tertiary);
}

.conversation img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin-right: 12px;
  object-fit: cover;
}

.conversation strong {
  font-weight: 600;
}

.conversation span {
  color: var(--text-secondary);
  font-size: 14px;
  margin-left: 8px;
}

.conversation p {
  color: var(--text-muted);
  font-size: 14px;
  flex: 1;
  margin-left: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.unread {
  background-color: var(--danger);
  color: white;
  border-radius: 50%;
  padding: 2px 6px;
  font-size: 12px;
  min-width: 18px;
  text-align: center;
}

#chat-window {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 140px);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

#chat-header {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  background-color: var(--chat-header-bg);
  box-shadow: var(--chat-header-shadow);
}

#chat-header h3 {
  font-size: 18px;
  font-weight: 600;
}

#messages-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: var(--message-spacing);
  background-color: var(--bg-secondary);
}

.message:not(.own) {
  align-self: flex-start;
  background-color: var(--message-other-bg);
  color: var(--message-other-text);
  border-bottom-left-radius: 4px;
}

.message strong {
  display: block;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
}

.message p {
  margin: 0;
  line-height: 1.4;
}

.message small {
  position: absolute;
  bottom: 4px;
  right: 8px;
  font-size: 11px;
  color: var(--text-muted);
}

.message.own small {
  color: var(--text-muted);
}

.message-form {
  display: flex;
  gap: 8px;
  padding: 16px;
  background-color: var(--message-form-bg);
  border-top: 1px solid var(--border);
  box-shadow: var(--message-form-shadow);
  position: sticky;
  bottom: 0;
  z-index: 10;
}

.message-form textarea {
  flex: 1;
  resize: none;
  min-height: 44px;
  max-height: 120px;
  padding: 12px 16px;
  border-radius: var(--border-radius);
  border: 1px solid var(--border);
  background-color: var(--bg-input);
  color: var(--text-primary);
  font-size: 16px;
  transition: var(--transition);
  overflow-y: auto;
}

.message-form textarea:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(29, 155, 240, 0.3);
}

.message-form button {
  padding: 12px 20px;
  background-color: var(--accent-primary);
  color: white;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: var(--transition);
  font-weight: 600;
  align-self: flex-end;
}

.message-form button:hover {
  background-color: var(--accent-hover);
}

/* Поиск */
.search-form {
  margin-bottom: 20px;
}

.search-form input {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--border-radius);
  border: 1px solid var(--border);
  background-color: var(--bg-input);
  color: var(--text-primary);
  font-size: 16px;
  transition: var(--transition);
}

.search-form input:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(29, 155, 240, 0.3);
}

/* Настройки */
.settings-section {
  background-color: var(--bg-card);
  border-radius: var(--border-radius);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}

.settings-section h2 {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 16px;
}

.settings-section input,
.settings-section textarea,
.settings-section label {
  display: block;
  width: 100%;
  margin-bottom: 12px;
  font-size: 16px;
}

.settings-section input,
.settings-section textarea {
  padding: 12px 16px;
  border-radius: var(--border-radius);
  border: 1px solid var(--border);
  background-color: var(--bg-input);
  color: var(--text-primary);
  transition: var(--transition);
}

.settings-section input:focus,
.settings-section textarea:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(29, 155, 240, 0.3);
}

.settings-section button {
  padding: 10px 16px;
  background-color: var(--accent-primary);
  color: white;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: var(--transition);
  font-weight: 600;
}

.settings-section button:hover {
  background-color: var(--accent-hover);
}

.settings-section.danger-section button {
  background-color: var(--danger);
}

.settings-section.danger-section button:hover {
  background-color: #d91a72;
}

.settings-section p {
  color: var(--text-secondary);
  font-size: 14px;
  margin-top: 8px;
}

#blocked-list div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

#blocked-list button {
  padding: 4px 12px;
  background-color: var(--danger);
  color: white;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  font-size: 14px;
}

/* Уведомления (всплывающее окно) */
#notifications-popup {
  position: fixed;
  top: 60px;
  right: 20px;
  width: 350px;
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-lg);
  z-index: 2000;
  display: none;
  overflow-y: auto;
  max-height: 70vh;
}

#notifications-popup h4 {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  font-size: 18px;
  font-weight: 800;
}

#notifications-popup .notif {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 14px;
}

#notifications-popup .notif:last-child {
  border-bottom: none;
}

/* Плавающая кнопка создания поста (для мобильных) */
.floating-post {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 56px;
  height: 56px;
  background-color: var(--accent-primary);
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  z-index: 100;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.floating-post:hover {
  background-color: var(--accent-hover);
  transform: scale(1.05);
}

/* Системное уведомление */
.system-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  padding: 12px 16px;
  box-shadow: var(--shadow);
  z-index: 3000;
  animation: fadeInOut 3s ease-in-out forwards;
}

@keyframes fadeInOut {
  0% { opacity: 0; transform: translateY(-20px); }
  10% { opacity: 1; transform: translateY(0); }
  90% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-20px); }
}

/* Опции репоста */
.repost-options-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2001;
  display: flex;
  align-items: center;
  justify-content: center;
}

.repost-options {
  background-color: var(--bg-card);
  border-radius: var(--border-radius);
  padding: 16px;
  box-shadow: var(--shadow-lg);
  min-width: 250px;
}

#main-content {
  flex: 1;
  padding: 16px;
  box-sizing: border-box;
  /* Центрируем основной контент на всех страницах, кроме profile */
  max-width: var(--main-content-max-width);
  margin: 0 auto;
  width: 100%;
}

@media (min-width: 768px) {
  .sidebar-fixed {
    width: 400px; /* Фиксированная ширина */
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky; /* Фиксируем при прокрутке */
    top: 60px; /* Отступ сверху, чтобы не перекрывалась верхняя навигация */
    height: calc(100vh - 60px); /* Занимает высоту экрана минус высота навигации */
    overflow-y: auto; /* Прокрутка внутри, если содержимое не помещается */
    padding: 50px 0; /* Отступ внутри */
    box-sizing: border-box;
    align-self: flex-start; /* Прижимаем к верху контейнера */
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .top-nav {
    display: block;
  }

  /* Скрываем боковое меню на ПК по умолчанию */
  .sidebar {
    display: none;
  }

  /* Скрываем гамбургер на ПК */
  .hamburger {
    display: none;
  }

  /* Скрываем оверлей на ПК */
  .sidebar-overlay {
    display: none;
  }

  /* Убираем отступ слева у main-content, если sidebar скрыт */
  #main-content {
    margin-left: 0;
  }

  /* Скрываем мобильную навигацию на ПК */
  .mobile-nav {
    display: none;
  }

  /* Убедимся, что main-content не сжат и центрирован (если это было проблемой) */
  #main-content {
    /* Добавим padding, если нужно компенсировать ширину скрытого sidebar */
    /* padding-left: 0; */
    /* padding-right: 0; */
    /* max-width: 1200px; /* или другой нужный размер */
    /* margin: 0 auto; /* для центровки */
  }

  /* Стили для формы поста на ПК */
  .post-form {
    max-width: 600px; /* Ограничим ширину формы */
    margin: 1rem auto; /* Центрируем */
  }

  /* Стили для списка постов на ПК */
  #posts-list {
    max-width: 600px; /* Ограничим ширину списка */
    margin: 0 auto; /* Центрируем */
  }
}

@media (max-width: 767.98px) {
    .sidebar { display: none; }
    .hamburger { display: none; }
    .sidebar-overlay { display: none; }
    main { margin-left: 0; padding: 16px; max-width: 100%; } /* Центрирование и отступы */
    .top-nav { display: none; } /* Скрытие верхней навигации на мобиле */
    .mobile-nav { display: flex; } /* Показываем нижнюю навигацию */
}

@media (max-width: 767.98px) {
  /* Скрываем боковое меню на мобильных */
  .sidebar {
    display: none;
  }

  /* Скрываем гамбургер на мобильных */
  .hamburger {
    display: none;
  }

  /* Скрываем оверлей на мобильных */
  .sidebar-overlay {
    display: none;
  }

  /* Убираем отступ слева у main-content, если sidebar скрыт */
  #main-content {
    margin-left: 0;
  }

  /* Показываем мобильную навигацию */
  .mobile-nav {
    display: flex;
  }

  /* Стили для формы поста на мобильных */
  .post-form {
    padding: 0.5rem;
  }

  /* Стили для списка постов на мобильных */
  #posts-list {
    padding: 0 0.5rem;
  }
}

.repost-options button {
  display: block;
  width: 100%;
  padding: 10px;
  margin-bottom: 8px;
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  cursor: pointer;
  text-align: left;
  transition: var(--transition);
}

.repost-options button:hover {
  background-color: var(--bg-tertiary);
  color: var(--accent-primary);
}

.conversation-item {
  display: flex;
  align-items: center;
  padding: 8px;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: var(--transition);
}

.conversation-item:hover {
  background-color: var(--bg-tertiary);
}

.conversation-item img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 8px;
  object-fit: cover;
}

.conversation-item div {
  flex: 1;
}

.conversation-item strong {
  font-weight: 600;
  display: block;
}

.conversation-item span {
  color: var(--text-secondary);
  font-size: 12px;
}

/* Полный экран поста */
.post-fullscreen-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 2002;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.post-fullscreen {
  background-color: var(--bg-card);
  border-radius: var(--border-radius);
  padding: 20px;
  box-shadow: var(--shadow);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}

.post-fullscreen-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.post-fullscreen-header img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 12px;
  object-fit: cover;
}

.post-fullscreen-header div {
  flex: 1;
}

.post-fullscreen-header strong {
  font-weight: 600;
}

.post-fullscreen-header span {
  color: var(--text-secondary);
  font-size: 14px;
}

.close-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
}

.close-btn:hover {
  color: var(--text-primary);
}

.post-fullscreen-content p {
  margin: 12px 0;
  line-height: 1.6;
}

.post-fullscreen-image {
  max-width: 100%;
  border-radius: var(--border-radius);
  margin-top: 8px;
}

.post-fullscreen-actions {
  display: flex;
  justify-content: flex-start;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  margin-top: 16px;
}

.post-fullscreen-actions button {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  font-size: 16px;
}

.post-fullscreen-actions button:hover {
  background-color: var(--bg-tertiary);
  color: var(--accent-primary);
}

.post-fullscreen-actions button.liked,
.post-fullscreen-actions button.liked:hover {
  color: var(--danger);
}

/* Адаптивность для мобильных */
@media (max-width: 1200px) {
  /* .right-sidebar { */
  /*   display: none; */
  /* } */

  main {
    max-width: 100%;
    margin: 0 16px;
  }
}

@media (max-width: 768px) {
  body {
    padding-bottom: 60px; /* Высота мобильного меню */
    box-sizing: border-box; /* Включаем padding в расчёт высоты */
  }
  .mobile-nav {
    display: flex; /* Показываем как flex */
  }
  .content-and-sidebars {
    flex-direction: column; /* Располагаем вертикально */
    gap: 10px;
    padding: 0 16px; /* Стандартный отступ на мобильных */
  }

  .main-content-area {
    max-width: 100%; /* Убираем ограничение ширины */
  }

  .sidebar-fixed {
    width: 100%; /* Растягиваем на всю ширину */
    /* position: static; /* Отменяем sticky */
    /* height: auto; /* Отменяем фиксированную высоту */
    /* overflow-y: visible; /* Отменяем прокрутку */
    /* padding: 0; /* Отменяем внутренние отступы */
  }
  .sidebar {
    transform: translateX(-100%);
    width: 280px;
    z-index: 1001;
  }

 .sidebar.open {
   left: 0; /* Открытое состояние */
  }

  main {
    margin-left: 0;
    padding: 16px;
  }

  .hamburger {
    display: flex;
  }

  .post-actions {
    justify-content: flex-start;
    gap: 16px;
  }

  .profile-header {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .profile-stats {
    justify-content: center;
  }

  .profile-actions {
    justify-content: center;
  }

  .auth-form {
    margin: 20px 16px;
    padding: 24px;
  }

  .message-form {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px;
  }

  .message-form textarea {
    flex: 1;
  }

  #chat-window {
    height: calc(100vh - 100px);
  }

  #notifications-popup {
    width: calc(100vw - 40px);
    right: 20px;
    left: 20px;
    top: 50px;
  }

  .floating-post {
    display: flex;
  }
}

/* Адаптивность для очень маленьких экранов */
@media (max-width: 480px) {
  .post-form,
  .list-section,
  .settings-section,
  .post {
    padding: 12px;
  }

  .post-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .post-avatar {
    margin-right: 0;
  }

  .profile-header {
    padding: 16px;
  }

  .profile-avatar {
    width: 80px;
    height: 80px;
  }

  .auth-form {
    margin: 16px;
    padding: 20px;
  }
}

.logout-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 8px 12px;
    margin-top: 10px;
    border-radius: var(--border-radius);
    cursor: pointer;
    width: 100%;
    text-align: center;
}
.logout-btn:hover {
    background-color: var(--bg-secondary);
}

/* Кнопки в профиле (follow-btn, block-btn, message-btn, edit-btn) */
#follow-btn,
#block-btn,
#message-btn,
#edit-btn {
  padding: 8px 16px;
  border-radius: var(--border-radius);
  border: 1px solid var(--border);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  cursor: pointer;
  transition: var(--transition);
  font-weight: 600;
  font-size: 14px; /* Уменьшаем размер шрифта */
}

#follow-btn:hover,
#block-btn:hover,
#message-btn:hover,
#edit-btn:hover {
  background-color: var(--bg-tertiary);
}

/* Кнопка "Заблокировать" */
#block-btn {
  background-color: var(--danger);
  color: white;
  border: none;
}

#block-btn:hover {
  background-color: #d91a72; /* Темнее при наведении */
}

/* Кнопка "Написать" */
#message-btn {
  background-color: var(--accent-primary);
  color: white;
  border: none;
}

#message-btn:hover {
  background-color: var(--accent-hover);
}

/* Кнопка "Редактировать" */
#edit-btn {
  background-color: var(--accent-primary);
  color: white;
  border: none;
}

#edit-btn:hover {
  background-color: var(--accent-hover);
}

/* Кнопка "Отписаться" (для кнопки follow-btn, когда пользователь подписан) */
#follow-btn {
  background-color: var(--accent-primary);
  color: white;
  border: none;
}

#follow-btn:hover {
  background-color: var(--accent-hover);
}

/* Стили для кнопки выбора файла (input[type="file"]) */
/* Сброс стилей для скрытия стандартного вида */
.post-form input[type="file"] {
  border: 1px solid var(--border);
  background-color: var(--bg-input);
  color: var(--text-primary);
  font-size: 14px;
  transition: var(--transition);
  cursor: pointer;
  position: relative;
  padding: 8px 16px; /* Добавим внутренний отступ */
  border-radius: var(--border-radius); /* Скругление */
  width: 100%; /* Займет всю ширину контейнера */
}

/* Стилизация текста "Choose file" */
.post-form input[type="file"]::before {
  content: "Choose file"; /* Текст кнопки */
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--accent-primary);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  pointer-events: none; /* Текст не мешает клику */
  font-weight: 600;
}

/* Стили для кнопок в списках пользователей (user-item, user-result) */
.user-item button,
.user-result button {
  margin-left: 12px;
  padding: 6px 12px; /* Уменьшаем внутренний отступ */
  border-radius: var(--border-radius);
  border: 1px solid var(--border);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  cursor: pointer;
  transition: var(--transition);
  font-weight: 600;
  font-size: 14px; /* Уменьшаем размер шрифта */
}

.user-item button:hover,
.user-result button:hover {
  background-color: var(--bg-tertiary);
}

.user-result button:last-child {
  background-color: var(--accent-primary);
  color: white;
  border: none;
}

.user-result button:last-child:hover {
  background-color: var(--accent-hover);
}

/* Стили для кнопок в рекомендациях (rec-user) */
.rec-user button,
.trend-post button {
  margin-left: 8px;
  padding: 6px 12px; /* Уменьшаем внутренний отступ */
  border-radius: var(--border-radius);
  border: 1px solid var(--border);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  cursor: pointer;
  transition: var(--transition);
  font-size: 14px; /* Уменьшаем размер шрифта */
  font-weight: 600;
}

.rec-user button:hover,
.trend-post button:hover {
  background-color: var(--bg-tertiary);
}

.rec-user button:last-child {
  background-color: var(--accent-primary);
  color: white;
  border: none;
}

.rec-user button:last-child:hover {
  background-color: var(--accent-hover);
}

/* Стили для логотипа */
.header {
  /* Если у вас уже есть стили для .header, оставьте их */
  /* padding: 10px 0; */
}

.header-content {
  /* Если у вас уже есть стили для .header-content, оставьте их */
  /* display: flex; */
  /* align-items: center; */
  /* justify-content: space-between; */
}

.logo-link {
  display: flex;
  align-items: center;
  text-decoration: none; /* Убираем подчеркивание */
  /* Убираем или изменяем стили, которые были для текстового .logo */
  /* font-size: 1.5em; */
  /* font-weight: bold; */
  /* color: inherit; */
}

.logo-image {
  height: 40px; /* Установите желаемую высоту */
  width: auto;  /* Сохраняем пропорции */
  /* object-fit: contain; /* Обеспечивает, что изображение помещается внутрь указанных размеров */ */
  /* Дополнительные стили, если нужно */
  /* margin-right: 10px; /* Отступ справа от логотипа, если текст рядом */ */
  /* border-radius: 5px; /* Например, если хочется скругления */ */
}

/* Опционально: стили для скрытого текста доступности */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}