/* Стили ниже относятся только к разделу «Новое». */

/* Прячем общие элементы интерфейса, чтобы в разделе «Новое» остался только собственный список. */
body:has(.menu-btn.active[data-section="recent"]) .toolbar,
body:has(.menu-btn.active[data-section="recent"]) .alphabet-wrapper,
body:has(.menu-btn.active[data-section="recent"]) .view-toolbar,
body:has(.menu-btn.active[data-section="recent"]) .content-area > .media-scroll {
  display: none !important; /* Полностью убирает чужие панели, чтобы они не сдвигали recent-layout. */
}

/* Это рабочая область раздела «Новое» внутри основного контента страницы. */
body:has(.menu-btn.active[data-section="recent"]) .content-area {
  width: clamp(380px, calc(100vw - 436px), 1350px) !important; /* Сдвигает правую границу recent-only области ещё примерно на 50px вправо, не меняя внутреннюю лесенку контента. */
  max-width: clamp(380px, calc(100vw - 436px), 1350px) !important; /* Даёт scrollbar ещё немного пространства справа, но не выпускает его за viewport. */
  min-width: clamp(380px, calc(100vw - 436px), 1350px) !important; /* Сохраняет единое вычисление ширины recent-only области без скачков между min/max. */
  height: 100%; /* Даёт recent-блоку всю доступную высоту контейнера. */
  display: block; /* Оставляет область простым блочным контейнером без grid/flex-поведения. */
  overflow: hidden; /* Не даёт всей странице скроллиться из-за длинного списка recent. */
  justify-self: start; /* Прижимает область к левому краю своей ячейки. */
}

/* Главный контейнер всего раздела «Новое». Здесь настраиваются общий сдвиг, высота и внутренний скролл. */
.recent-view {
  --recent-shell-offset: 110px; /* Горизонтальный сдвиг всего блока «Новое» вправо от левого меню. */
  --recent-date-offset: 0px; /* Горизонтальный сдвиг даты внутри блока «Новое». */
  --recent-category-offset: 76px; /* Насколько заголовок категории правее даты. */
  --recent-folder-offset: 100px; /* Насколько папка правее заголовка категории. */
  --recent-item-offset: 144px; /* Насколько список файлов правее категории. */
  --recent-file-indent: calc(var(--recent-item-offset) - var(--recent-folder-offset)); /* Разница между уровнем папки и общей колонкой файлов. */
  width: calc(100% - var(--recent-shell-offset)); /* Оставляет правую границу scroll-контейнера внутри видимой области после горизонтального сдвига. */
  max-width: calc(100% - var(--recent-shell-offset)); /* Не даёт scrollbar уехать вправо за пределы content-area. */
  box-sizing: border-box; /* Включает padding в общую ширину блока. */
  margin-left: var(--recent-shell-offset); /* Сдвигает весь блок «Новое» вправо или влево. */
  margin-top: 28px; /* Опускает весь блок ниже верхнего C.S.I. header. */
  padding: 6px 10px 18px 0; /* Оставляет место под scrollbar и не даёт ему визуально упираться в правый край. */
  min-width: 0; /* Разрешает блоку ужиматься без переполнения по ширине. */
  height: auto; /* Высота recent определяется содержимым до достижения scroll-ограничения. */
  max-height: calc(100vh - 190px); /* Чуть уменьшает высоту scroll-контейнера, чтобы нижний край scrollbar полностью оставался внутри видимой области. */
  overflow-y: auto; /* Включает вертикальный скролл только внутри раздела «Новое». */
  overflow-x: hidden; /* Запрещает горизонтальный скролл внутри раздела «Новое». */
  scrollbar-gutter: stable; /* Резервирует место под scrollbar, чтобы он не прыгал и не уезжал за край. */
  scrollbar-width: thin; /* Делает скролл тонким в Firefox. */
  scrollbar-color: rgba(180, 200, 225, 0.28) transparent; /* Задаёт цвет ползунка и прозрачный фон скролла в Firefox. */

  font-family: "Inter", "Segoe UI", Arial, sans-serif; /* Основной шрифт всего раздела «Новое». */
  font-weight: 300; /* Базовая толщина шрифта для лёгкого аккуратного вида. */
  letter-spacing: 0.03em; /* Базовое расстояние между буквами для всего блока. */
  -webkit-font-smoothing: antialiased; /* Сглаживает текст в браузерах на WebKit. */
  -moz-osx-font-smoothing: grayscale; /* Сглаживает текст в Firefox на macOS. */
}

/* Ширина полосы вертикального скролла в Chrome/Edge/Safari. */
.recent-view::-webkit-scrollbar {
  width: 7px; /* Толщина вертикального скролла. */
}

/* Фон дорожки скролла. */
.recent-view::-webkit-scrollbar-track {
  background: transparent; /* Делает дорожку скролла невидимой. */
}

/* Внешний вид самого ползунка скролла. */
.recent-view::-webkit-scrollbar-thumb {
  background: rgba(180, 200, 225, 0.22); /* Основной цвет ползунка скролла. */
  border-radius: 999px; /* Делает ползунок полностью скруглённым. */
}

/* Цвет ползунка при наведении мыши. */
.recent-view::-webkit-scrollbar-thumb:hover {
  background: rgba(210, 225, 245, 0.34); /* Делает ползунок чуть ярче при hover. */
}

.recent-view[hidden] {
  display: none !important; /* Полностью скрывает блок, когда раздел «Новое» не активен. */
}

/* Текст состояния, когда в разделе пока нет элементов. */
.recent-empty-state {
  padding: 28px 0; /* Вертикальные отступы вокруг текста пустого состояния. */
  color: rgba(235, 240, 248, 0.7); /* Яркость текста пустого состояния. */
  font-size: 18px; /* Размер текста пустого состояния. */
  line-height: 1.5; /* Межстрочный интервал текста пустого состояния. */
}

/* Один день в разделе «Новое» со всеми его категориями и файлами. */
.recent-day {
  display: block; /* Оставляет день обычным блочным контейнером. */
  width: 100%; /* Растягивает группу дня на всю ширину блока. */
  max-width: 100%; /* Не даёт группе дня выйти за ширину блока. */
  min-width: 0; /* Разрешает корректное ужатие по ширине. */
  margin-bottom: 20px; /* Расстояние между соседними днями. */
}

.recent-day.is-not-first {
  padding-top: 4px; /* Добавляет небольшой зазор перед каждым днём, кроме первого. */
}

/* Заголовок даты. Здесь настраиваются размер, цвет и положение даты. */
.recent-day__date {
  display: block; /* Показывает дату отдельной строкой. */
  width: max-content; /* Ширина даты равна ширине её текста. */
  max-width: 100%; /* Не даёт строке даты выйти за пределы блока. */
  margin-left: var(--recent-date-offset); /* Сдвигает дату вправо внутри общего блока. */
  color: rgba(238, 244, 251, 0.94); /* Яркость и цвет даты. */
  font-size: clamp(18px, 1.85vw, 20px); /* Размер даты на разных ширинах экрана. */
  font-weight: 300; /* Толщина шрифта даты. */
  line-height: 1.22; /* Высота строки даты. */
  letter-spacing: 0.04em; /* Расстояние между буквами в дате. */
}

.recent-day__date.is-spacer {
  display: none; /* Скрывает техническую дату-пустышку между категориями одного дня. */
}

/* Заголовок категории внутри дня. */
.recent-day__category {
  display: block; /* Каждая категория занимает отдельную строку и не встаёт рядом с соседней. */
  width: max-content; /* Ширина кликабельного заголовка равна ширине его текста. */
  max-width: 100%; /* Не даёт названию категории выйти за пределы блока. */
  min-width: 0; /* Разрешает корректно ужимать длинные строки. */
  margin-top: 20px; /* Расстояние между датой и категорией или между соседними категориями. */
  margin-left: var(--recent-category-offset); /* Насколько категория правее даты. */
  padding: 2px 0; /* Делает кликабельную зону чуть удобнее по высоте. */
  border: none; /* Убирает стандартную рамку кнопки категории. */
  background: transparent; /* Оставляет фон категории прозрачным. */
  color: rgba(214, 222, 232, 0.76); /* Цвет и яркость названия категории. */
  font-size: clamp(15px, 1.55vw, 17px); /* Размер названия категории. */
  font-family: "Inter", "Segoe UI", Arial, sans-serif; /* Сохраняет тонкую типографику раздела «Новое». */
  font-weight: 300; /* Толщина шрифта категории. */
  line-height: 1.28; /* Высота строки категории. */
  letter-spacing: 0.032em; /* Расстояние между буквами в названии категории. */
  text-align: left; /* Прижимает содержимое кнопки категории к левому краю. */
  white-space: nowrap; /* Держит стрелку, название и счётчик в одной строке. */
  cursor: pointer; /* Показывает, что категорию можно нажимать. */
  appearance: none; /* Убирает системный вид кнопки категории. */
  -webkit-appearance: none; /* Убирает системный вид кнопки в WebKit. */
  font: inherit; /* Наследует размер и толщину шрифта от блока категории. */
}

.recent-day__category:hover {
  color: rgba(230, 236, 244, 0.92); /* Слегка усиливает цвет категории при наведении. */
}

.recent-day__category:focus-visible {
  outline: 1px solid rgba(210, 225, 245, 0.35); /* Показывает аккуратный фокус для клавиатурной навигации. */
  outline-offset: 3px; /* Немного отодвигает контур, чтобы он не налезал на текст. */
}

.recent-day__category-indicator {
  display: inline-block; /* Оставляет стрелку на одной линии с названием категории. */
  width: 12px; /* Фиксирует аккуратную ширину области под стрелку. */
  color: rgba(224, 232, 241, 0.72); /* Цвет индикатора раскрытия. */
  font-size: 12px; /* Размер стрелки раскрытия. */
  line-height: 1; /* Не даёт стрелке занимать лишнюю высоту. */
  text-align: center; /* Держит стрелку визуально по центру. */
  vertical-align: middle; /* Выравнивает стрелку по вертикали относительно текста категории. */
}

.recent-day__category-title {
  display: inline; /* Оставляет название категории на той же строке, что и стрелка. */
  min-width: 0; /* Позволяет названию категории корректно сжиматься. */
}

.recent-day__category-count {
  display: inline-block; /* Держит количество файлов на одной строке с названием категории. */
  margin-left: 8px; /* Добавляет расстояние между названием категории и счётчиком. */
  color: rgba(196, 205, 216, 0.58); /* Делает количество файлов тише названия категории. */
  font-size: 0.92em; /* Делает счётчик немного меньше названия категории. */
  vertical-align: middle; /* Выравнивает счётчик по вертикали относительно названия. */
}

/* Контейнер списка файлов внутри категории. */
.recent-day__items {
  display: block; /* Оставляет список файлов обычным блочным контейнером. */
  width: 100%; /* Список файлов использует всю доступную ширину своего уровня, чтобы названия не резались раньше scrollbar. */
  max-width: 100%; /* Убирает скрытый потолок ширины списка файлов внутри категории. */
  min-width: 0; /* Позволяет списку файлов сжиматься без overflow. */
  min-height: 1px; /* Не даёт контейнеру схлопнуться по высоте. */
  margin-top: 10px; /* Расстояние между категорией и первым файлом. */
  margin-left: var(--recent-folder-offset); /* Контейнер recent groups начинается на уровне папок. */
  overflow: visible; /* Не обрезает внутренние элементы списка. */
  visibility: visible; /* Явно оставляет список видимым. */
  opacity: 1; /* Полная непрозрачность списка файлов. */
  position: relative; /* Создаёт локальный контекст позиционирования для элементов списка. */
  z-index: 1; /* Поднимает список над возможными пересечениями соседних слоёв. */
}

.recent-day__items > .recent-item {
  margin-left: var(--recent-file-indent); /* Одиночные файлы всегда стоят в общей файловой колонке. */
}

.recent-day__items[hidden] {
  display: none; /* Полностью скрывает список файлов, когда категория свёрнута. */
}

.recent-day__category.is-collapsed + .recent-day__items {
  margin-top: 0; /* Убирает зазор под закрытой категорией, чтобы список был компактным. */
}

.recent-day__items + .recent-day__date.is-spacer + .recent-day__category {
  margin-top: 26px; /* Дополнительный отступ перед следующей категорией после списка файлов. */
}

/* Новая папка внутри категории «Новое». */
.recent-folder-group {
  display: block; /* Папка занимает отдельную строку внутри категории recent. */
  width: 100%; /* Папка растягивается на доступную ширину списка. */
  max-width: 100%; /* Не даёт папке выйти за пределы списка. */
  min-width: 0; /* Позволяет папке корректно сжиматься. */
  margin: 0 0 10px 0; /* Оставляет расстояние между соседними папками и файлами. */
}

.recent-folder-group:last-child {
  margin-bottom: 0; /* Убирает лишний нижний зазор у последней папки. */
}

.recent-folder-group__toggle {
  display: flex; /* Заголовок папки держит стрелку, иконку и текст в одной строке. */
  align-items: center; /* Центрует иконку и текст папки по высоте строки. */
  gap: 6px; /* Добавляет стабильный промежуток между стрелкой, иконкой и названием папки. */
  width: 100%; /* Заголовок папки использует всю доступную ширину. */
  min-width: 0; /* Даёт папке корректно ужиматься. */
  margin: 0; /* Не добавляет лишние внешние отступы. */
  padding: 4px 0; /* Сохраняет вертикальный ритм между строками recent. */
  border: none; /* Убирает системную рамку кнопки папки. */
  background: transparent; /* Оставляет фон папки прозрачным. */
  color: rgba(222, 229, 238, 0.8); /* Делает название папки чуть заметнее обычной мета-строки. */
  text-align: left; /* Прижимает текст папки к левому краю. */
  cursor: pointer; /* Показывает, что папку можно раскрыть. */
  appearance: none; /* Убирает системный вид кнопки папки. */
  -webkit-appearance: none; /* Убирает системный вид кнопки в WebKit. */
  font: inherit; /* Наследует типографику раздела recent. */
}

.recent-folder-group__toggle:hover {
  color: rgba(240, 245, 252, 0.96); /* Слегка усиливает цвет заголовка папки при наведении. */
}

.recent-folder-group__toggle:focus-visible {
  outline: 1px solid rgba(210, 225, 245, 0.32); /* Показывает фокус для клавиатурной навигации. */
  outline-offset: 3px; /* Немного отодвигает контур от текста папки. */
}

.recent-folder-group__indicator {
  display: inline-block; /* Стрелка остаётся на одной линии с названием папки. */
  width: 12px; /* Фиксирует ширину области под стрелку. */
  margin-right: 0; /* Gap у toggle управляет расстоянием до иконки и текста. */
  color: rgba(224, 232, 241, 0.72); /* Цвет стрелки согласован с палитрой recent. */
  font-size: 12px; /* Делает стрелку компактной. */
  line-height: 1; /* Не даёт стрелке создавать лишнюю высоту. */
  text-align: center; /* Визуально центрирует стрелку. */
  vertical-align: middle; /* Выравнивает стрелку по центру строки. */
}

.recent-folder-group__title {
  display: inline; /* Название папки остаётся на одной линии со стрелкой. */
  min-width: 0; /* Позволяет названию корректно ужиматься. */
}

.recent-item__icon,
.recent-folder-group__icon {
  width: 14px; /* Делает иконку компактной и соразмерной тексту строки. */
  height: 14px; /* Держит квадратный размер без увеличения высоты строки. */
  min-width: 14px; /* Не даёт иконке схлопнуться в плотных строках. */
  box-shadow: none; /* Убирает крупную карточную тень у file-icon-mask для компактного списка. */
  opacity: 0.92; /* Оставляет иконку читаемой, но не слишком яркой. */
  flex-shrink: 0; /* Не позволяет иконке сжиматься при длинных названиях. */
  vertical-align: middle; /* Выравнивает иконку относительно текста. */
}

/* Чуть опускает только иконки файлов в разделе «Новое», чтобы они были на уровне строки названия. */
.recent-item__icon {
  transform: translateY(3px);
}

.recent-item__icon.type-folder,
.recent-folder-group__icon.type-folder {
  background-color: #d9b35f; /* Цвет папки близок к обычным файловым разделам. */
}

.recent-item__content {
  display: flex; /* Держит иконку файла и текстовый блок в одной строке. */
  align-items: flex-start; /* Оставляет meta под title, а не сбоку. */
  gap: 7px; /* Даёт стабильный зазор между иконкой и текстом. */
  width: 100%; /* Позволяет текстовой колонке занимать остаток строки. */
  min-width: 0; /* Нужен для корректного ellipsis в тексте. */
}

.recent-item__text {
  display: flex; /* Строит текстовую часть файла отдельной колонкой. */
  flex-direction: column; /* Первая строка - title, вторая - meta. */
  min-width: 0; /* Даёт title/meta корректно ужиматься. */
  flex: 1 1 auto; /* Занимает доступную ширину после иконки. */
}

.recent-item__title {
  display: flex; /* Держит название файла в одну строку. */
  align-items: center; /* Центрует название относительно высоты первой строки. */
  width: 100%; /* Растягивает title по ширине текстовой колонки. */
  min-width: 0; /* Нужен для ellipsis длинных имён. */
}

.recent-item__title-text {
  display: block; /* Название файла занимает первую строку текстовой колонки. */
  flex: 1 1 auto; /* Даёт тексту занять весь остаток строки внутри flex-заголовка. */
  min-width: 0; /* Позволяет корректно работать ellipsis в flex-контейнере. */
  max-width: none; /* Не вводит дополнительный внутренний предел ширины поверх ширины строки. */
  overflow: hidden; /* Не даёт длинному названию вылезать за строку. */
  text-overflow: ellipsis; /* Сохраняет обрезку длинных имён. */
  white-space: nowrap; /* Не переносит название на следующую строку. */
}

.recent-folder-group__count {
  display: inline-block; /* Счётчик файлов отображается рядом с названием папки. */
  margin-left: 8px; /* Добавляет зазор между названием папки и счётчиком. */
  color: rgba(196, 205, 216, 0.58); /* Делает счётчик визуально тише названия. */
  font-size: 0.92em; /* Слегка уменьшает размер счётчика. */
  vertical-align: middle; /* Выравнивает счётчик по вертикали. */
}

.recent-folder-group__children {
  display: block; /* Контейнер содержимого папки остаётся блочным. */
  width: 100%; /* Содержимое папки занимает доступную ширину. */
  max-width: 100%; /* Не даёт содержимому выйти за пределы списка. */
  min-width: 0; /* Позволяет дочерним элементам корректно ужиматься. */
  margin-left: var(--recent-file-indent); /* Файлы внутри папки идут на том же file-level, что и одиночные. */
  padding-top: 6px; /* Оставляет воздух между заголовком папки и содержимым. */
}

.recent-folder-group__children > .recent-item,
.recent-folder-group__children > .recent-folder-group {
  margin-left: 0; /* Внутри folder children не добавляем второй отступ сверх file-level. */
}

.recent-folder-group__children[hidden] {
  display: none; /* Полностью скрывает содержимое свёрнутой папки. */
}

/* Один элемент файла или медиа внутри списка. */
.recent-item {
  display: block; /* Каждый файл рисуется отдельной строкой. */
  width: 100%; /* Файл занимает всю ширину контейнера списка. */
  max-width: 100%; /* Не даёт строке файла выйти за границы списка. */
  min-width: 0; /* Позволяет длинным названиям корректно сжиматься. */
  margin: 0 0 9px 0; /* Расстояние между файлами по вертикали. */
  padding: 4px 0; /* Внутренний вертикальный воздух вокруг строки файла. */
  border: none; /* Убирает стандартные границы кнопки/элемента. */
  border-radius: 0; /* Оставляет строку файла без скруглений. */
  background: transparent; /* Делает фон строки прозрачным. */
  color: rgba(228, 235, 244, 0.84); /* Базовый цвет текста элемента файла. */
  text-align: left; /* Выравнивает содержимое файла по левому краю. */
  box-sizing: border-box; /* Учитывает padding внутри итоговой ширины строки. */
  box-shadow: none; /* Убирает любые тени строки файла. */
  visibility: visible; /* Явно оставляет файл видимым. */
  opacity: 1; /* Полная непрозрачность строки файла. */
  overflow: visible; /* Не обрезает внутренние элементы строки файла. */
}

.recent-item:last-child {
  margin-bottom: 0; /* Убирает лишний нижний отступ у последнего файла в группе. */
}

/* Стили именно для кликабельной версии строки файла. */
button.recent-item {
  display: block; /* Кнопка-файл ведёт себя как блочный элемент. */
  width: 100%; /* Кнопка занимает всю ширину строки списка. */
  cursor: pointer; /* Показывает, что файл можно нажать. */
  padding: 4px 0; /* Совпадает с отступами обычной строки файла. */
  border: 0; /* Убирает стандартную рамку кнопки. */
  background: transparent; /* Убирает стандартный фон кнопки. */
  appearance: none; /* Отключает системный вид кнопки. */
  -webkit-appearance: none; /* Отключает системный вид кнопки в WebKit. */
  font: inherit; /* Наследует шрифт от .recent-item, чтобы текст не отличался. */
}

button.recent-item:hover {
  background: transparent; /* Не добавляет hover-фон. */
  color: rgba(255, 255, 255, 0.98); /* Делает строку чуть ярче при наведении. */
}

.recent-item.is-audio-item {
  cursor: pointer; /* Показывает, что музыкальный файл запускает существующий аудиоплеер. */
}

.recent-item.is-audio-item:hover .recent-item__title {
  color: rgba(240, 245, 252, 0.96); /* Слегка усиливает цвет названия музыкального файла при наведении. */
}

.recent-item.is-audio-item:hover .recent-item__meta {
  opacity: 0.62; /* Делает мета-строку музыкального файла чуть заметнее при наведении. */
}

/* Название файла. Здесь настраиваются размер, ширина строки и поведение длинных имён. */
.recent-item__title {
  display: flex; /* Название файла остаётся первой строкой внутри текстовой колонки. */
  align-items: center; /* Держит текст названия на одной линии без скачка по высоте. */
  width: 100%; /* Название занимает всю ширину строки файла. */
  max-width: 100%; /* Не даёт названию выйти за границы строки. */
  min-width: 0; /* Позволяет названию корректно сжиматься. */
  visibility: visible; /* Явно оставляет название видимым. */
  opacity: 1; /* Полная непрозрачность названия файла. */
  color: rgba(227, 234, 243, 0.84); /* Цвет и яркость названия файла. */
  font-size: clamp(13px, 1.35vw, 15px); /* Размер названия файла. */
  font-weight: 300; /* Толщина шрифта названия файла. */
  line-height: 1.36; /* Высота строки названия файла. */
  word-break: normal; /* Не разрешает ломать слово посередине. */
  overflow-wrap: normal; /* Не переносит длинные слова принудительно. */
}

/* Мелкая строка под названием файла: дата, путь или дополнительная информация. */
.recent-item__meta {
  display: block; /* Мета-информация выводится отдельной строкой. */
  width: 100%; /* Мета-строка занимает всю ширину файла. */
  max-width: 100%; /* Не даёт мета-строке выйти за границы. */
  min-width: 0; /* Позволяет мета-строке корректно сжиматься. */
  visibility: visible; /* Явно оставляет мета-строку видимой. */
  opacity: 0.45; /* Делает мета-информацию заметно светлее основного названия. */
  margin-top: 2px; /* Расстояние между названием файла и мета-строкой. */
  color: rgba(186, 195, 206, 0.92); /* Цвет мета-информации. */
  font-size: 11px; /* Размер мета-информации. */
  line-height: 1.25; /* Высота строки мета-информации. */
  white-space: nowrap; /* Не переносит мета-текст на вторую строку. */
  overflow: hidden; /* Обрезает слишком длинную мета-строку. */
  text-overflow: ellipsis; /* Добавляет многоточие для длинной мета-строки. */
}

.recent-item-time {
  color: rgba(210, 218, 230, 0.96);
}

.recent-item-meta-separator {
  color: rgba(255, 255, 255, 0.50);
}

.recent-item-path-inline {
  display: inline;
  color: rgba(205, 214, 226, 0.82);
}

/* Мобильная подстройка: уменьшаем горизонтальные сдвиги и держим список в узкой колонке. */
@media (max-width: 980px) {
  body:has(.menu-btn.active[data-section="recent"]) .content-area {
    width: 380px !important; /* Фиксированная ширина области «Новое» на узком экране. */
    max-width: 380px !important; /* Не даёт блоку стать шире на мобильной ширине. */
    min-width: 380px !important; /* Не даёт блоку стать уже на мобильной ширине. */
  }

  .recent-view {
    --recent-shell-offset: 0px; /* На мобильной ширине не сдвигаем весь блок дополнительно. */
    --recent-date-offset: 0px; /* Дата остаётся у левого края блока. */
    --recent-category-offset: 26px; /* Категория чуть правее даты на мобильной ширине. */
    --recent-folder-offset: 34px; /* Папка остаётся между категорией и общей файловой колонкой на мобильной ширине. */
    --recent-item-offset: 48px; /* Файлы чуть правее категории на мобильной ширине. */
    width: 100%; /* На мобильной ширине scroll-контейнер занимает всю доступную ширину. */
    max-width: 100%; /* Не выходит за границы мобильной колонки. */
    margin-left: 0; /* Убирает дополнительный сдвиг всего блока на мобильной ширине. */
    margin-top: 14px; /* Чуть уменьшает верхний отступ под header на мобильной ширине. */
    padding-right: 10px; /* Оставляет место справа, чтобы scrollbar и текст не упирались в край. */
    max-height: calc(100vh - 168px); /* Держит нижний край scrollbar внутри видимой мобильной области. */
  }

  .recent-day {
    margin-bottom: 16px; /* Уменьшает расстояние между днями на мобильной ширине. */
  }

  .recent-day__category,
  .recent-day__items {
    max-width: 100%; /* Не даёт категории и списку файлов выйти за ширину мобильной колонки. */
  }

  .recent-day__items {
    width: auto; /* Список файлов подстраивается под доступную мобильную ширину. */
    margin-top: 6px; /* Уменьшает расстояние между категорией и файлами на мобильной ширине. */
  }
}