/* CSS переменные для легкой настройки */
:root {
    --bg-color: #f9f9f9;
    --card-bg-color: #ffffff;
    --text-color: #1d1d1f;
    --subtle-text-color: #6e6e73;
    --accent-color: #007aff;
    --accent-color-rgb: 0, 122, 255; /* Added for rgba() usage */
    --favorite-color: #ffcc00;
    --border-color: #e5e5e5;
    --shadow: 0 4px 12px rgba(0,0,0,0.08);
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --border-radius: 16px; /* Увеличено для большего закругления */

    /* New variables for better theming */
    --tab-container-bg: #e9e9eb;
    --icon-button-bg: rgba(255, 255, 255, 0.8);
    --internal-prompt-bg: rgba(29, 29, 31, 0.85);
    --internal-prompt-text-color: #f5f5f7;
    --internal-close-button-bg: rgba(0, 0, 0, 0.5);
    --internal-close-button-color: #ffffff;
    --modal-close-button-bg: #e0e0e0;
    --loading-indicator-bg: rgba(255, 255, 255, 0.85);
}

/* Dark Theme */
body[data-theme="dark"] {
    --bg-color: #161617;
    --card-bg-color: #2c2c2e;
    --text-color: #f5f5f7;
    --subtle-text-color: #8e8e93;
    --accent-color: #0a84ff;
    --accent-color-rgb: 10, 132, 255;
    --border-color: #3a3a3c;
    --shadow: 0 6px 18px rgba(0,0,0,0.25);

    --tab-container-bg: #3a3a3c;
    --icon-button-bg: rgba(58, 58, 60, 0.8);
    --internal-prompt-bg: rgba(20, 20, 20, 0.9);
    --modal-close-button-bg: #4a4a4c;
    --loading-indicator-bg: rgba(30, 30, 30, 0.85);
}

body {
    font-family: var(--font-family);
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    padding: 20px;
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth theme transition */
}

header {
    text-align: center;
    margin-bottom: 40px;
}

h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
}

/* Styles for the prompt count display */
.prompt-count-container {
    font-size: 1rem; /* Немного меньше основного текста */
    font-weight: 500;
    color: var(--subtle-text-color); /* Менее заметный цвет */
    margin-top: -15px; /* Подтянем ближе к заголовку h1 */
    margin-bottom: 25px; /* Отступ перед поиском */
    text-align: center; /* Убедимся, что текст по центру */
}

/* Theme Switcher */
.theme-switcher-container {
    position: absolute;
    top: 28px; /* Align with author */
    left: 20px;
    z-index: 10;
}

.theme-switcher {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
    transform: scale(0.70);
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #787880; /* iOS-like grey */
    transition: .4s;
    border-radius: 28px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Author Attribution */
.author-attribution {
    position: absolute; /* Позиционируем абсолютно относительно header */
    top: 28px; /* Отступ сверху, выровнен с переключателем темы */
    right: 20px; /* Отступ справа */
    font-size: 0.9rem;
    color: var(--subtle-text-color);
    z-index: 1; /* Убедимся, что она поверх других элементов, если нужно */
}

/* Adjust header padding to make space for attribution */
header {
    margin-bottom: 40px;
    position: relative; /* Нужен для абсолютного позиционирования .author-attribution */
    padding-top: 40px; /* Добавляем отступ сверху для метки */
    /* Делаем header flex-контейнером для идеального центрирования дочерних элементов */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Adjust h1 margin to compensate for new header padding */
header h1 {
    margin-top: -20px; /* Сдвигаем заголовок вверх */
}

/* New style for the upload button */
.upload-button {
    display: inline-block; /* Ведет себя как строчно-блочный элемент */
    font-family: var(--font-family);
    font-size: 0.95rem; /* Размер шрифта как у поиска */
    font-weight: 500;
    padding: 10px 20px; /* Внутренние отступы */
    margin-top: 20px; /* Отступ сверху от навигации */
    border: none; /* Убираем стандартную рамку */
    background-color: var(--accent-color); /* Используем акцентный цвет */
    color: white; /* Белый текст */
    border-radius: 50px; /* Сильное закругление */
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Легкая тень */
}

.upload-button:hover {
    background-color: rgba(0, 122, 255, 0.9); /* Чуть темнее акцентный цвет при наведении */
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}

.upload-button:active {
     background-color: rgba(0, 122, 255, 0.8); /* Еще темнее при нажатии */
}

/* Search Bar Styles */
.search-container {
    margin-bottom: 25px; /* Убираем auto-margin, так как центрирование теперь на header */
    max-width: 500px; /* Увеличиваем максимальную ширину для более длинного бара */
    width: 100%; /* Заставляем контейнер пытаться занять всю доступную ширину */
    padding: 0 15px;
    display: flex; /* Используем flexbox для выравнивания кнопки и поля ввода */
    align-items: center; /* Выравнивание по центру по вертикали */
    gap: 10px; /* Отступ между кнопкой и полем ввода */
}

/* Style the blacklist button inside search-container */
#blacklist-toggle-button {
    background: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    width: 46px; /* Немного больше для удобства нажатия */
    height: 46px; /* Немного больше */
    cursor: pointer;
    font-size: 20px; /* Увеличиваем размер иконки */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    flex-shrink: 0; /* Предотвращаем сжатие кнопки */
}

#blacklist-toggle-button:hover {
    background-color: var(--modal-close-button-bg);
}

#search-input {
    flex-grow: 1; /* Позволяем полю ввода занимать все доступное пространство */
    padding: 12px 20px;
    font-family: var(--font-family);
    font-size: 0.95rem;
    color: var(--text-color);
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 50px; /* Сильно закругленные края для "пилюли" */
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none; /* Убираем стандартный контур */
}

#search-input::placeholder {
    color: var(--subtle-text-color);
    opacity: 0.8;
}

#search-input:focus {
    border-color: var(--accent-color); /* Тень при фокусе в стиле Apple */
    box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb), 0.2), 0 2px 8px rgba(0,0,0,0.08);
}

/* Theme switcher logic */
input:checked + .slider {
    background-color: var(--accent-color);
}

input:checked + .slider:before {
    transform: translateX(22px);
}

/* Tabs / Segmented Control */
header nav { /* Центрируем сам контрол */
    display: flex;
    justify-content: center;
}

header nav > div[role="tablist"] {
    display: inline-flex; /* Чтобы кнопки были в ряд и контейнер облегал их */
    background-color: var(--tab-container-bg);
    border-radius: 12px; /* Увеличено */
    padding: 3px; /* Небольшой внутренний отступ вокруг кнопок */
    /* box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); */ /* Очень тонкая внутренняя тень */
}

nav .tab { /* Стили для отдельных кнопок-вкладок */
    font-family: var(--font-family);
    font-size: 0.9rem; /* Чуть меньше для компактности */
    font-weight: 500;
    padding: 7px 15px; /* Оптимизированные отступы */
    margin: 0; /* Убираем внешние отступы, т.к. они теперь в контейнере */
    border: none;
    background-color: transparent;
    color: var(--text-color); /* Стандартный цвет текста для неактивных */
    cursor: pointer;
    border-radius: 10px; /* Увеличено */
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    line-height: 1.5; /* Для консистентной высоты */
}

nav .tab.active {
    color: var(--accent-color); /* Акцентный цвет для текста активной вкладки */
    background-color: var(--card-bg-color);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 1px 1px rgba(0,0,0,0.05); /* Тень для выделения */
    font-weight: 600; /* Более жирный шрифт для активной */
}

nav .tab:not(.active):hover {
    background-color: rgba(0,0,0,0.04); /* Легкий фон при наведении на неактивную */
}

nav .tab:not(.active):active { /* Состояние нажатия для неактивной */
    background-color: rgba(0,0,0,0.08);
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 25px;
}

.card {
    position: relative;
    background-color: var(--card-bg-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.card .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Kept for context */
    opacity: 0; /* Default: hidden */
    visibility: hidden; /* Default: hidden and non-interactive */
    transition: opacity 0.3s ease, visibility 0s linear 0.3s; /* Visibility changes after opacity fades */
    display: flex;
    justify-content: center;
    z-index: 10; /* Убедимся, что оверлей выше внутреннего текста подсказки */
    align-items: center;
    pointer-events: none; /* Initially not interactive */
}

/* Show overlay on hover, ONLY if .prompt-active is NOT on .card */
.card:not(.prompt-active):hover .overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* Make interactive when visible */
    transition-delay: 0s; /* Apply opacity/visibility transitions immediately */
}

/* Explicitly hide overlay and make non-interactive when prompt is active */
.card.prompt-active .overlay {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition-delay: 0s; /* Apply opacity/visibility transitions immediately */
}

.card .icon-button {
    background: var(--icon-button-bg);
    backdrop-filter: blur(5px);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: var(--text-color);
    transition: transform 0.2s ease;
    margin: 0 10px;
}

.card .icon-button:hover {
    transform: scale(1.1);
}

.favorite-button.favorited {
    color: var(--favorite-color);
}

/* Скрытые элементы */
.hidden {
    display: none;
}

/* Уведомление о копировании */
.toast {
    position: fixed;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--text-color);
    color: var(--bg-color);
    padding: 12px 24px;
    border-radius: 12px; /* Увеличено */
    font-weight: 500;
    transition: bottom 0.5s ease-in-out;
    z-index: 1000;
}

.toast.show {
    bottom: 30px;
}

 .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap; /* added to prevent line breaks */
    border: 0;
}

/* Styles for Internal Card Prompt Display */
.card-internal-prompt {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--internal-prompt-bg); /* Темный фон с прозрачностью */
    backdrop-filter: blur(10px); /* Эффект матового стекла */
    color: var(--internal-prompt-text-color); /* Светлый текст для контраста */
    padding: 15px;
    box-sizing: border-box;
    font-size: 0.85rem;
    line-height: 1.5;
    max-height: 75%; /* Ограничение высоты, чтобы часть изображения оставалась видна */
    overflow-y: auto;
    user-select: text; /* Позволяет выделять текст */ /* Already present */
    z-index: 5; /* Ниже оверлея с кнопками */
    border-top-left-radius: var(--border-radius); /* Скругление верхних углов */
    border-top-right-radius: var(--border-radius);
    /* Default state: hidden */
    opacity: 0;
    visibility: hidden; /* Default: hidden */
    transform: translateY(15px); /* Начальное состояние для анимации "выезда" снизу */
    /* When hiding: opacity/transform animate, then visibility/z-index change. */
    transition: opacity 0.25s ease-out, transform 0.25s ease-out, visibility 0s linear 0.25s, z-index 0s linear 0.25s;
} /* <<< ВОТ ЭТА СКОБКА БЫЛА ПРОПУЩЕНА */
/* Show internal prompt and elevate z-index when .card has .prompt-active */
.card.prompt-active .card-internal-prompt {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    z-index: 11; /* Ensure it's above overlay space if any race condition */
    /* When showing: visibility/z-index change instantly, then opacity/transform animate. */
    transition: opacity 0.25s ease-out, transform 0.25s ease-out, visibility 0s linear 0s, z-index 0s linear 0s;
}

/* Custom Scrollbar for internal prompt (Apple style) */
.card-internal-prompt::-webkit-scrollbar { width: 12px; }
.card-internal-prompt::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.3); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
.card-internal-prompt::-webkit-scrollbar-track { background: transparent; }

/* Close button for the internal prompt display */
.prompt-internal-close-button {
    position: absolute;
    top: 8px; /* Немного скорректируем позицию */
    right: 8px; /* Немного скорректируем позицию */
    background-color: var(--internal-close-button-bg); /* Сделаем фон менее прозрачным */
    color: var(--internal-close-button-color); /* Сделаем крестик белым для лучшего контраста */
    border: none;
    border-radius: 50%;
    width: 30px; /* Увеличим размер */
    height: 30px; /* Увеличим размер */
    font-size: 20px; /* Увеличим размер символа крестика */
    line-height: 30px; /* Выровняем крестик по центру вертикально */
    text-align: center;
    cursor: pointer;
    /* z-index: 7; /* Выше текста подсказки */ /* Needs to be higher than the active prompt's z-index (11) */
    z-index: 12; /* Ensure it's above the active prompt text */
    /* Обновляем transition для opacity и visibility, чтобы он не конфликтовал с основным transition */
    opacity: 0; /* Hide by default */
    visibility: hidden; /* Hide by default */
    pointer-events: none; /* Not interactive when hidden */
    transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, visibility 0s linear 0.2s;
}
.prompt-internal-close-button:hover {
    background-color: rgba(0, 0, 0, 0.7); /* Сделаем фон еще темнее при наведении */
}

/* Modal Styles */
/* Show the close button when the card has .prompt-active */
.card.prompt-active .prompt-internal-close-button {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* Make interactive when visible */
    transition-delay: 0s; /* Show immediately */
}
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* Мягкий полупрозрачный фон */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000; /* Поверх других элементов */
    opacity: 0; /* Начальное состояние - невидимо */
    visibility: hidden; /* Начальное состояние - скрыто */
    /* Плавный переход для появления/исчезновения оверлея */
    transition: opacity 0.25s ease-out, visibility 0s linear 0.25s;
}

.modal-overlay:not(.hidden) { /* Когда класс .hidden отсутствует */
    opacity: 1;
    visibility: visible;
    transition-delay: 0s; /* Убираем задержку для transition visibility при показе */
}

.modal-content {
    background-color: var(--card-bg-color);
    padding: 24px;
    border-radius: 20px; /* Увеличено для более выраженного скругления */
    box-shadow: 0 12px 28px rgba(0,0,0,0.15), 0 0 0 0.5px rgba(0,0,0,0.05); /* Типичная тень Apple */
    width: 90%;
    max-width: 480px; /* Ограничение максимальной ширины */
    position: relative; /* Для позиционирования кнопки закрытия */
    box-sizing: border-box;
    opacity: 0; /* Начальное состояние - невидимо */
    transform: scale(0.92) translateY(10px); /* Начальное состояние для анимации "всплытия" */
    /* Плавный переход для появления/исчезновения контента модального окна */
    transition: opacity 0.25s cubic-bezier(0.1,0,0.25,1), transform 0.25s cubic-bezier(0.1,0,0.25,1);
}

.modal-overlay:not(.hidden) .modal-content { /* Когда класс .hidden отсутствует */
    opacity: 1;
    transform: scale(1) translateY(0); /* Конечное состояние для анимации */
}

.modal-close-button {
    position: absolute;
    top: 12px;
    right: 12px;
    background-color: var(--modal-close-button-bg);
    color: var(--subtle-text-color);
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: 16px;
    font-weight: bold;
    line-height: 28px; /* Вертикальное выравнивание крестика */
    text-align: center; /* Горизонтальное выравнивание крестика */
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.modal-close-button:hover {
    background-color: #d0d0d0;
    color: var(--text-color);
}

#modal-prompt-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-color);
    word-break: break-word; /* Перенос длинных слов */
    max-height: 60vh; /* Ограничение высоты, чтобы модальное окно не было слишком большим */
    overflow-y: auto; /* Добавление прокрутки, если текст не помещается */
    margin-top: 10px; /* Отступ от заголовка/кнопки закрытия */
    padding-right: 10px; /* Небольшой отступ справа для полосы прокрутки, если появится */
}

/* Адаптивность */
@media (max-width: 768px) {
    body {
        padding: 15px;
    }
    h1 {
        font-size: 2rem;
    }
    .grid-container {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 15px;
    }
    .modal-content {
        padding: 20px;
        max-width: calc(100% - 30px); /* Чтобы не прилипало к краям на мобильных */
    }
    #modal-prompt-text {
        font-size: 0.9rem;
    }
    /* Adjust attribution position on smaller screens */
    .author-attribution {
        top: 15px;
        right: 10px;
        font-size: 0.8rem;
    }
    .theme-switcher-container {
        top: 15px;
        left: 10px;
    }
    .search-container {
        padding: 0; /* Убираем отступы, так как кнопка теперь внутри */
        width: 100%; /* Обеспечиваем полную ширину */
        box-sizing: border-box;
    }
    #blacklist-input {
        width: 100%;
        box-sizing: border-box;
    }
    header {
    }
}

/* Loading Indicator */
.loading-indicator {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 25px; /* Фон с прозрачностью */
    background-color: var(--loading-indicator-bg);
    backdrop-filter: blur(8px); /* Эффект матового стекла */
    border-radius: var(--border-radius);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    z-index: 1001;
    color: var(--text-color);
    display: none !important; /* Убираем индикатор загрузки */
}

.spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border-left-color: var(--accent-color); /* Используем акцентный цвет */
    animation: spin 1s linear infinite; /* Изменено на linear для более плавной анимации */
    margin-bottom: 12px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Empty Favorites Message */
#empty-favorites-message {
    text-align: center;
    padding: 30px 20px;
    font-size: 1.05rem;
    color: var(--subtle-text-color);
    background-color: var(--card-bg-color); /* Фон как у карточек */
    border-radius: var(--border-radius); /* Скругление как у карточек */
    margin: 25px auto; /* Центрирование и отступы */
    max-width: 550px;
    box-shadow: var(--shadow); /* Тень как у карточек */
}

/* Empty Search Message */
.empty-search-message {
    text-align: center;
    padding: 30px 20px;
    font-size: 1.05rem;
    color: var(--subtle-text-color);
    width: 100%; /* Чтобы занимало всю ширину grid-container */
    grid-column: 1 / -1; /* Растянуть на все колонки грида, если он еще активен */
}

/* --- Favorites Folders Styles --- */
.favorites-view-container {
    display: flex;
    gap: 25px;
    align-items: flex-start;
}

#folders-panel {
    flex: 0 0 330px; /* Don't grow, don't shrink, base width 330px (50% larger) */
    display: flex;
    flex-direction: column;
    gap: 15px;
    position: sticky; /* Makes the panel stick on scroll */
    top: 20px; /* Default sticky position, e.g., when no title is shown */
}

.favorites-view-container.has-active-title #folders-panel {
    /* When the title is visible, we push the panel down to align with the grid */
    margin-top: 60px;
    /* We also adjust the sticky position to match, preventing a layout jump on scroll */
    top: 60px;
}

/* NEW: Grid for user-created folders */
.user-folders-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px; /* A smaller gap for the items inside the grid */
}

/* NEW: Wrapper for the title and grid in favorites view */
.favorites-content-wrapper {
    flex-grow: 1; /* The grid of items takes the rest of the space */
    min-width: 0; /* Fix for flexbox overflow issue */
}

/* NEW: Style for the active folder title */
#active-folder-title {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 25px 0; /* Top, Right, Bottom, Left */
}

.folder-card {
    background-color: var(--card-bg-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    padding: 15px;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
    border: 2px solid white;
    position: relative;
    user-select: none;
    display: flex; /* Use flexbox to align content */
    flex-direction: column;
    justify-content: flex-end; /* Align name to the bottom */
    background-size: cover;
    background-position: center;
    overflow: hidden; /* To contain the overlay */
}
.user-folders-grid .folder-card {
    aspect-ratio: 2 / 3; /* Set aspect ratio for user folders */
}

/* Overlay for readability on thumbnail cards */
.folder-card--with-thumbnail::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.1) 100%);
    z-index: 1;
    transition: background 0.2s ease;
}

.folder-card--with-thumbnail:hover::before {
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.2) 100%);
}

/* Style for empty folders */
.folder-card--empty {
    background-color: var(--tab-container-bg); /* Use a subtle background */
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
}

.folder-card--empty::after {
    content: '📁'; /* Folder emoji as a placeholder */
    font-size: 2.5rem;
    opacity: 0.3;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

/* Style for special "All" and "Uncategorized" folders */
.folder-card--special {
    justify-content: center;
    align-items: flex-start; /* Align text to the left */
    background-color: transparent;
    border: 2px solid var(--border-color);
    min-height: auto; /* Override default height to be more compact */
    padding: 10px 15px; /* Reduce padding for a more compact look */
}

.folder-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}

.folder-card.active {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb), 0.2), 0 6px 16px rgba(0,0,0,0.1);
}

.folder-card.drag-over {
    border-color: var(--accent-color);
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 8px 20px rgba(var(--accent-color-rgb), 0.3);
}

.folder-name {
    font-weight: 500;
    word-break: break-word;
    position: relative; /* To be on top of the overlay */
    z-index: 2;
    color: var(--text-color); /* Default color */
}

/* Text color for thumbnail cards */
.folder-card--with-thumbnail .folder-name {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.folder-name-input {
    width: 100%;
    padding: 4px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    box-sizing: border-box;
}

.folder-controls {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 5px;
    opacity: 0;
    z-index: 3; /* Must be on top of everything */
    transition: opacity 0.2s ease;
}

.folder-card:hover .folder-controls,
.folder-card.editing .folder-controls {
    opacity: 1;
}

.folder-control-button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: var(--subtle-text-color);
    padding: 4px;
    border-radius: 50%;
    line-height: 1;
    width: 24px;
    height: 24px;
}

.folder-control-button:hover {
    background-color: var(--modal-close-button-bg);
    color: var(--text-color);
}

/* Controls color for thumbnail cards */
.folder-card--with-thumbnail .folder-control-button {
    color: rgba(255, 255, 255, 0.8);
}
.folder-card--with-thumbnail .folder-control-button:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}


#add-folder-button {
    background-color: transparent;
    border: 2px dashed var(--border-color);
    justify-content: center;
    align-items: center;
    color: var(--subtle-text-color);
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

#add-folder-button::before {
    content: '+';
    font-size: 3rem;
    font-weight: 300;
    line-height: 1;
}

#add-folder-button:hover {
    background-color: var(--tab-container-bg);
    color: var(--text-color);
    border-color: var(--accent-color);
}

@media (max-width: 768px) {
    .favorites-view-container {
        flex-direction: column;
    }
    #folders-panel {
        position: relative; /* Un-stick for mobile */
        top: 0;
        flex-basis: auto; /* Reset basis */
        width: 100%;
        flex-direction: row; /* Make folders scroll horizontally */
        overflow-x: auto;
        padding-bottom: 10px; /* For scrollbar */
    }
    .favorites-content-wrapper {
        /* On mobile, the wrapper is part of the column layout */
        width: 100%;
    }

    /* On mobile, we want all folders in a single row.
       The .user-folders-grid should "disappear" and its children become direct children of the parent flex container */
    .user-folders-grid {
        display: contents;
    }

    .folder-card--special {
        width: auto;
        height: auto;
        padding: 10px 15px;
    }

    .folder-card {
        flex-shrink: 0; /* Prevent folders from shrinking */
        width: 150px;
        height: 100px; /* Give a fixed height on mobile for consistency */
    }
}