/* GLOBAL STYLES & DARK THEME */
:root {
    --bg-primary: var(--tg-theme-bg-color, #18181B);
    --bg-secondary: var(--tg-theme-secondary-bg-color, #27272A);
    --bg-tertiary: #3F3F46;

    --text-primary: var(--tg-theme-text-color, #F4F4F5);
    --text-secondary: var(--tg-theme-hint-color, #A1A1AA);
    --text-accent: var(--tg-theme-button-color, #3B82F6);
    --text-on-accent: var(--tg-theme-button-text-color, #FFFFFF);
    --text-destructive: var(--tg-theme-destructive-text-color, #EF4444);

    --border-color: #3F3F46;
    --border-radius-sm: 6px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);

    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --header-height: 56px;
    --tabbar-height: 60px;
    
    .material-symbols-outlined {
        font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
    }
}

html {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden; 
    scrollbar-gutter: auto; 
}
*, *:before, *:after {
    box-sizing: inherit;
}

body {
    font-family: var(--font-family);
    margin: 0;
    padding: 0;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    overscroll-behavior-y: none; 
    display: flex;
    flex-direction: column;
    min-height: var(--tg-viewport-stable-height, 100vh);
    width: 100%; 
    overflow-x: hidden;
    font-size: 16px;
    line-height: 1.5;
    min-width: 0; 
}

.app-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 16px;
    padding-top: var(--header-height);
    padding-bottom: var(--tabbar-height);
    width: 100%;
    overflow-x: hidden;
    min-width: 0;
}

/* HEADER */
header {
    background-color: var(--bg-primary);
    padding: 0 16px;
    height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    border-bottom: 1px solid var(--border-color);
}

header h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}

/* ICON BUTTON */
.icon-button {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 24px;
    cursor: pointer;
    padding: 8px;
    border-radius: var(--border-radius-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, color 0.2s;
    line-height: 1;
}
.icon-button .material-symbols-outlined {
    font-size: 24px;
}
.icon-button:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}
.icon-button.primary {
    background-color: var(--text-accent);
    color: var(--text-on-accent);
}
.icon-button.primary:hover {
    background-color: color-mix(in srgb, var(--text-accent) 85%, black);
}
.icon-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--bg-secondary) !important;
    color: var(--text-secondary) !important;
}

/* SEGMENTED CONTROL */
.segmented-control-container {
    margin-bottom: 16px;
    display: flex;
    justify-content: center;
    margin-top: 16px; 
}
.segmented-control {
    display: flex;
    background-color: var(--bg-secondary);
    padding: 4px;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    width: 100%;
    max-width: 400px;
}
.segmented-control-button {
    flex: 1;
    padding: 8px 12px;
    border: none;
    background-color: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}
.segmented-control-button .material-symbols-outlined {
    font-size: 20px;
}
.segmented-control-button.active {
    background-color: var(--text-accent); 
    color: var(--text-on-accent); 
    box-shadow: var(--shadow-md);
}
.segmented-control-button:not(.active):hover {
    color: var(--text-primary);
}

/* SEARCH INPUT & CONTAINER */
.search-container {
    display: flex;
    margin-bottom: 16px;
    gap: 8px;
}
#searchInput {
    flex-grow: 1;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 16px;
    font-family: var(--font-family);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
#searchInput:focus {
    border-color: var(--text-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--text-accent) 30%, transparent);
}
#searchInput::placeholder {
    color: var(--text-secondary);
    opacity: 0.8;
}
#searchInput:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* QUERY INFO & GEMINI INFO */
.query-info-container,
.gemini-info-container {
    font-size: 13px;
    color: var(--text-secondary);
    background-color: var(--bg-secondary);
    padding: 10px 12px;
    border-radius: var(--border-radius-md);
    margin-bottom: 12px;
    line-height: 1.4;
}
.query-info-container p,
.gemini-info-container p {
    margin: 5px 0;
}
.query-info-container strong,
.gemini-info-container strong {
    color: var(--text-primary);
    font-weight: 500;
}
.gemini-info-container .error {
    color: var(--text-destructive);
    font-weight: 500;
}

/* MAIN CONTENT AREA */
main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* GALLERY */
.gallery-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
    margin-top: 16px; 
}
.gallery-placeholder { 
    text-align: center; 
    width: 100%; 
    color: var(--text-secondary); 
    padding: 40px 20px; 
    font-size: 15px; 
    margin: 0; 
    display: block; 
    grid-column: 1 / -1; 
}

.meme-card {
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: transform 0.15s ease-in-out, box-shadow 0.2s ease-out, border-color 0.2s ease-out;
    position: relative;
}
.meme-card:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: var(--shadow-md);
    border-color: var(--bg-tertiary);
}
.meme-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    background-color: var(--bg-tertiary);
}

.meme-actions {
    display: flex;
    justify-content: space-between; /* Распределяет кнопки по краям */
    padding: 4px 6px; /* Небольшие отступы внутри блока кнопок */
    
    position: absolute; /* Позиционируем абсолютно относительно .meme-card */
    bottom: 0;      /* Прижимаем к низу .meme-card */
    left: 0;        /* Растягиваем по всей ширине .meme-card */
    right: 0;
    
    opacity: 1; /* Делаем видимыми по умолчанию (раньше было 0) */
    
    /* Скругление углов только снизу, если сама карточка скруглена */
    border-bottom-left-radius: var(--border-radius-md); 
    border-bottom-right-radius: var(--border-radius-md);
    
    z-index: 2; /* Чтобы кнопки были поверх изображения */
    
    /* transition для opacity можно убрать, так как видимость не меняется */
    /* transition: opacity 0.2s ease-in-out; */
}

.meme-actions .icon-button {
    padding: 4px; /* Размер кликабельной области кнопки */
    color: #FFFFFF; /* Белый цвет для иконок */
    background-color: transparent; /* Фон самих кнопок прозрачный */
    /* border: none; - уже должно быть от общих стилей .icon-button */
}

.meme-actions .icon-button .material-symbols-outlined {
    font-size: 20px; /* Размер самих иконок */
    font-variation-settings: 'FILL' 0; /* По умолчанию иконки не заполнены */
    /* Добавляем небольшую тень для лучшей читаемости на любом фоне картинки */
    filter: drop-shadow(0px 1px 1px rgba(0,0,0,0.6)); 
}
.meme-actions .icon-button:hover {
    background-color: rgba(255, 255, 255, 0.15); /* Легкая подсветка при наведении на кнопку */
    /* color: #FFFFFF; - цвет иконки не меняем при наведении, если он уже белый */
}




.meme-actions .like-button.liked .material-symbols-outlined {
    font-variation-settings: 'FILL' 1; /* Заполненная иконка */
    color: var(--text-destructive);   /* Красный цвет для "лайкнуто" */
    /* Можно добавить тень другого цвета для "лайкнутого" состояния, если стандартная не подходит */
    /* filter: drop-shadow(0px 1px 1px rgba(var(--text-destructive-rgb),0.8)); */
}


.meme-actions .like-button.liked:hover .material-symbols-outlined {
    color: var(--text-destructive);
}
.meme-actions .copy-button .material-symbols-outlined {
    color: var(--text-secondary);
}
.meme-actions .copy-button:hover .material-symbols-outlined {
    color: var(--text-primary);
}

.meme-card.gemini-reranked {
    border: 2px solid var(--text-accent);
    box-shadow: 0 0 10px 0px color-mix(in srgb, var(--text-accent) 50%, transparent);
}

/* LOADER & ERROR */
.loader-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    text-align: center;
    color: var(--text-secondary);
    margin: 10px 0;
}
.loader-spinner {
    border: 4px solid var(--bg-tertiary);
    border-top: 4px solid var(--text-accent);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    animation: spin 0.8s linear infinite;
    margin-bottom: 12px;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.error-display {
    background-color: color-mix(in srgb, var(--text-destructive) 15%, transparent);
    color: var(--text-destructive);
    padding: 12px 15px;
    border-radius: var(--border-radius-md);
    margin: 15px 0;
    text-align: center;
    border: 1px solid var(--text-destructive);
    font-weight: 500;
}

/* HISTORY TAB */
#historyContainer { 
    display: none; 
    margin-top: 16px; /* Отступ от хедера */
}
.history-list-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.history-placeholder { 
    text-align:center; 
    width:100%; 
    color: var(--text-secondary);
    padding: 40px 20px;
    font-size: 15px;
    margin: 0; /* Убираем стандартные отступы параграфа */
    display: block; 
    grid-column: 1 / -1; /* Для плейсхолдера в гриде (если история станет гридом) */
}
.history-placeholder.error { color: var(--text-destructive); }

.history-item {
    background-color: var(--bg-secondary);
    padding: 10px 15px; 
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    border: 1px solid var(--border-color);
}
.history-item:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--text-accent);
}
.history-query {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
    word-break: break-word;
    margin-bottom: 4px; 
    margin-top: 0; 
}
.history-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--text-secondary);
}
.history-mode-badge {
    padding: 3px 8px;
    border-radius: var(--border-radius-sm);
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.history-mode-badge.situation {
    background-color: color-mix(in srgb, var(--text-accent) 80%, black);
    color: var(--text-on-accent);
}
.history-mode-badge.text {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}
.history-mode-badge .material-symbols-outlined {
    font-size: 14px;
}

/* APP STATS */
.app-stats-container {
    padding: 10px 12px;
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius-md);
    margin-top: auto; 
    margin-bottom: 10px;
    text-align: center;
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.stats-divider {
    width: 1px;
    height: 14px;
    background-color: var(--border-color);
}

/* MODAL STYLES */
.modal {
    display: none; 
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%; /* Занимает весь viewport */
    background-color: rgba(0,0,0,0.7);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    /* Убираем padding у .modal, чтобы .modal-content мог занять больше места */
    /* padding: 20px; */ 
    box-sizing: border-box;
    display: flex; 
    align-items: center;
    justify-content: center;
    /* Добавим внутренние отступы, чтобы контент не прилипал к краям экрана, 
       если он станет очень большим. Эти отступы будут внутри .modal, 
       но снаружи .modal-content, если .modal-content не займет всё место. */
    padding: 10px; /* Например, небольшие отступы по краям */
}

.modal-content {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    padding: 20px; /* Внутренние отступы самого контента */
    border-radius: var(--border-radius-lg);
    width: 100%; /* Занимает всю доступную ширину внутри .modal с учетом его padding */
    
    /* Увеличиваем максимальную ширину. 
       Подберите значение, которое хорошо смотрится на большинстве устройств.
       Например, 600px или даже больше, если дизайн позволяет.
       Можно использовать vw для относительной ширины, например, 90vw.
       Давайте попробуем комбинацию: */
    max-width: min(640px, 95vw); /* Не более 640px, но и не более 95% ширины вьюпорта */
    
    position: relative;
    box-shadow: var(--shadow-md);
    animation: fadeInModal 0.25s ease-out;
    display: flex;
    flex-direction: column;
    gap: 16px;

    /* Увеличиваем максимальную высоту.
       calc(100vh - 2 * 10px) означает "вся высота вьюпорта минус верхний и нижний padding родителя .modal" */
    max-height: calc(100vh - 20px); /* (10px сверху + 10px снизу от .modal padding) */
    
    /* Для предотвращения выхода за пределы экрана, если контент очень высокий */
    overflow: hidden; /* Сам .modal-content не должен скроллиться, скроллится .modal-info-scrollable */
}
@keyframes fadeInModal {
    from { opacity: 0; transform: scale(0.95) translateY(-10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-close-button {
    position: absolute;
    top: 10px; /* Отступ от верха */
    right: 10px; /* Отступ справа */
    z-index: 10; /* Чтобы был поверх другого контента */
    
    /* Можно увеличить padding самой кнопки, чтобы кликабельная область была больше */
    padding: 10px; /* Было 8px, увеличим немного */
    
    /* Если хотите другой цвет для крестика, например, более контрастный */
    /* color: var(--text-primary); */ 
}
.modal-close-button .material-symbols-outlined {
    font-size: 28px; /* Увеличиваем размер самой иконки (было 24px) */
    
    /* Увеличиваем жирность иконки */
    /* Стандартный 'wght' 400. Можно попробовать 500, 600 или даже 700. */
    font-variation-settings:
        'FILL' 0,
        'wght' 600,  /* <<< Увеличиваем жирность */
        'GRAD' 0,
        'opsz' 28;   /* <<< opsz (оптический размер) лучше синхронизировать с font-size */
}
/* Можно добавить ховер-эффект, если его нет или он недостаточен от .icon-button:hover */
.modal-close-button:hover {
    background-color: var(--bg-tertiary); /* Стандартный ховер от .icon-button */
    /* color: var(--text-primary); /* Если меняли цвет кнопки выше, здесь тоже */
}


.modal-image-container {
    width: 100%;
    background-color: var(--bg-tertiary);
    border-radius: var(--border-radius-md);
    overflow: hidden; 
    display: flex; 
    align-items: center;
    justify-content: center;
    max-height: 40vh; 
    flex-shrink: 0; /* <<< ДОБАВИТЬ ЭТУ СТРОКУ */
}

.modal-image-container img {
    display: block; 
    
    /* Главные изменения здесь: */
    max-width: 100%;  /* Не шире контейнера */
    max-height: 40vh; /* Явно ограничиваем высоту картинки высотой вьюпорта (или чуть меньше) */
                      /* Это должно быть такое же значение, как max-height у родителя, 
                         или рассчитанное на основе него. */
                      /* Это более надежно, чем max-height: 100% в данном контексте. */

    object-fit: contain; 
    
    /* Для отладки можно добавить рамку, чтобы видеть границы картинки */
    /* border: 2px solid red; */ 
}
.modal-actions {
    display: flex;
    gap: 12px; /* Расстояние между кнопками */
    margin-bottom: 16px;
    /* width: 100%; /* Растягиваем контейнер, если кнопки должны занимать всю ширину */
}
.modal-action-button {
    /* flex-grow: 1; /* Можно оставить, если flex-basis не сработает как ожидается, или убрать */
    flex-basis: 50%; /* Каждая кнопка стремится занять 50% ширины родителя .modal-actions */
    /* Примечание: если gap в .modal-actions большой, то 50% + 50% + gap может превысить 100%.
       В этом случае можно использовать calc(50% - (gap / 2)), но это усложняет.
       Часто flex-basis: 50% с flex-grow: 1 работает хорошо, позволяя кнопкам растянуться.
       Давайте попробуем сначала просто flex-basis: 50% и оставим flex-grow: 1 */
    flex-grow: 1; 

    /* Добавим, чтобы текст внутри кнопки не переносился слишком агрессивно, если что */
    text-align: center; /* Центрируем содержимое, если оно не занимает всю ширину flex-контейнера кнопки */
}

.modal-action-button.like-button .material-symbols-outlined {
    /* Цвет иконки по умолчанию (не лайкнуто) */
    color: currentColor; /* Будет наследовать цвет текста кнопки */
    font-variation-settings: 'FILL' 0, 'wght' 400;
    /* filter: none; /* Убираем тень, если она была для иконок на карточках */
}


.modal-action-button.like-button.liked {
    /* Стили для "лайкнутой" кнопки */
    background-color: var(--text-destructive); /* Красный фон для кнопки */
    color: var(--text-on-accent); /* Белый текст на красном фоне */
    border-color: var(--text-destructive); /* Красная рамка */
}

.modal-action-button.like-button.liked .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 400; 
    color: currentColor; /* Иконка будет того же цвета, что и текст кнопки (белый) */
}

/* Стили для кнопки "Копировать" в модальном окне */
.modal-action-button#modalCopyButton .material-symbols-outlined {
    color: currentColor; /* Наследует цвет текста кнопки */
    /* filter: none; */
}
.modal-actions .icon-button {
    padding: 10px;
}
.modal-actions .like-button .material-symbols-outlined {
    color: var(--text-secondary); 
    font-variation-settings: 'FILL' 0, 'wght' 400;
}
.modal-actions .like-button:hover .material-symbols-outlined {
    color: var(--text-destructive);
}
.modal-actions .like-button.liked .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 400; 
    color: var(--text-destructive);
}
.modal-actions .like-button.liked:hover .material-symbols-outlined {
    color: var(--text-destructive);
}
.modal-actions .copy-button .material-symbols-outlined {
    color: var(--text-secondary);
}
.modal-actions .copy-button:hover .material-symbols-outlined {
    color: var(--text-primary);
}

.modal-info-scrollable {
    overflow-y: auto;
    flex-grow: 1; 
    min-height: 0; 
    
    /* padding-top: 20px; */ /* <<< ПОПРОБУЙТЕ ДОБАВИТЬ ЭТО И ПОИГРАТЬ СО ЗНАЧЕНИЕМ (например, 10px, 20px) */
                            /* Это создаст отступ сверху ВНУТРИ блока с текстом, 
                               отодвигая его содержимое от верхнего края этого блока. */
                            /* Если это поможет, значит, проблема в том, что сам блок начинается нормально,
                               но его контент прилипает к верху. */

    padding-right: 8px; 
    display: flex;
    flex-direction: column;
    gap: 16px; /* Этот gap между элементами внутри scrollable, включая modal-actions */
}
.modal-info-section h2 {
    font-size: 16px;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 8px;
    color: var(--text-primary);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-color);
}
.modal-info-section p, .modal-info-section ul {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 0;
    color: var(--text-secondary);
}
.modal-info-section p#modalMemeExplanation {
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
}
.modal-info-section ul {
    padding-left: 20px;
    list-style-type: disc;
}
.modal-info-section ul li {
    margin-bottom: 5px;
}
.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.tags-container .tag {
    display: inline-block;
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    padding: 4px 10px;
    border-radius: var(--border-radius-sm);
    font-size: 12px;
    font-weight: 500;
}
.modal-details-spoiler {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    background-color: var(--bg-secondary); 
}
.modal-details-spoiler summary {
    font-weight: 500;
    cursor: pointer;
    padding: 10px 12px;
    color: var(--text-accent);
    list-style-position: inside;
    display: flex; 
    align-items: center;
    gap: 6px;
    transition: background-color 0.2s;
}
.modal-details-spoiler summary::-webkit-details-marker {
    display: none;
}
.modal-details-spoiler summary .material-symbols-outlined {
    font-size: 24px;
    transition: transform 0.2s ease-in-out;
    transform: rotate(270deg);
}
.modal-details-spoiler[open] summary .material-symbols-outlined {
    transform: rotate(360deg);
}
.modal-details-spoiler summary:hover {
    background-color: var(--bg-tertiary);
}
.modal-details-spoiler[open] summary {
    border-bottom: 1px solid var(--border-color);
}
.modal-details-spoiler .spoiler-content {
    padding: 10px 12px;
    font-size: 13px;
    color: var(--text-secondary);
}
.modal-details-spoiler .spoiler-content p {
    margin-bottom: 8px;
    word-break: break-all;
}
.modal-details-spoiler .spoiler-content p strong {
    color: var(--text-primary);
}
.modal-details-spoiler .spoiler-content pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    background-color: var(--bg-primary); 
    padding: 8px 10px;
    border-radius: var(--border-radius-sm);
    font-size: 12px;
    color: var(--text-secondary);
    max-height: 150px;
    overflow-y: auto;
}

/* SETTINGS PANEL */
.settings-panel {
    display: none;
    position: fixed;
    z-index: 1050;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}
.settings-panel-content {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-radius: var(--border-radius-lg);
    width: 100%;
    max-width: 400px;
    box-shadow: var(--shadow-md);
    animation: slideInSettings 0.3s ease-out;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 40px);
}
@keyframes slideInSettings {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}
.settings-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
}
.settings-panel-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}
.settings-panel-body {
    padding: 16px;
    overflow-y: auto;
}
.settings-placeholder {
    color: var(--text-secondary);
    font-style: italic;
    text-align: center;
    padding: 20px 0;
}
#adminActions h3 {
    font-size: 16px;
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--text-primary);
    font-weight: 600;
}
#searchSettingsDisplay h4 {
    font-size: 16px;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 10px;
}
#searchSettingsDisplay p {
    font-size: 14px;
    margin-bottom: 6px;
    color: var(--text-secondary);
}
#searchSettingsDisplay strong {
    color: var(--text-primary);
}
#searchSettingsDisplay small {
    font-size: 12px;
    color: var(--text-secondary);
    opacity: 0.8;
    display: block;
    margin-top: 10px;
}

/* GENERAL BUTTON STYLES */
.button {
    display: inline-flex; 
    align-items: center;  /* Ключ к вертикальному выравниванию */
    justify-content: center; 
    gap: 8px;
    padding: 10px 16px; /* Это определяет общую высоту кнопки */
    font-size: 14px;   
    font-weight: 500;
    border-radius: var(--border-radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    text-decoration: none;
    line-height: 1; /* Устанавливаем line-height в 1, чтобы текст не добавлял лишней высоты */
                    /* Это важно для предсказуемого выравнивания с align-items */
}

.button .material-symbols-outlined {
    font-size: 20px; /* Размер иконки */
    line-height: 1;  /* Иконка также с line-height 1 */
    /* display: flex; align-items: center; /* Обычно не нужно для самого span иконки, если он просто содержит текст иконки */
}

/* Если вы выбрали Вариант Б для HTML (с .button-text): */
.button .button-text {
    line-height: 1; /* Убедимся, что у текста тоже line-height 1 */
    /* vertical-align: middle; /* Можно попробовать, но с flex align-items должно быть не нужно */
}

.button.full-width {
    width: 100%;
    margin-bottom: 10px; 
}
.button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.button { /* Стили для "серой" кнопки по умолчанию, если не destructive */
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--bg-tertiary); /* или var(--border-color) */
}
.button:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--bg-tertiary) 85%, white);
}
.button.destructive {
    background-color: var(--text-destructive);
    color: var(--text-on-accent); 
    border-color: var(--text-destructive);
}
.button.destructive:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--text-destructive) 85%, black);
}

/* TABBAR */
.tabbar {
    display: flex;
    justify-content: space-around;
    align-items: stretch; 
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    padding: 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 900;
    height: var(--tabbar-height);
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}
.tabbar-button {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-secondary);
    padding: 6px 4px;
    font-size: 10px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s ease;
    gap: 2px; 
}
.tabbar-button:hover {
    color: var(--text-primary);
}
.tabbar-button.active {
    color: var(--text-accent);
}
.tabbar-button.active .material-symbols-outlined {
    font-variation-settings: 'FILL' 1; 
}
.tabbar-button .material-symbols-outlined {
    font-size: 24px; 
}
.tabbar-label {
    display: block;
    line-height: 1.2;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 6px; /* Может быть слишком узким для некоторых, можно 8px */
    height: 6px;
}
::-webkit-scrollbar-track {
    background: var(--bg-primary);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--bg-tertiary) 80%, white);
}

/* Responsive adjustments */
@media (max-width: 360px) {
    .segmented-control-button {
        font-size: 13px;
        padding: 7px 8px;
    }
    .segmented-control-button .material-symbols-outlined {
        font-size: 18px;
    }
    .tabbar-button .material-symbols-outlined {
        font-size: 22px;
    }
    .tabbar-label {
        font-size: 9px;
    }
    header h1 {
        font-size: 18px;
    }
    .app-container {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* === СТИЛИ ДЛЯ КАСТОМНОЙ КНОПКИ "НРАВИТСЯ" В МОДАЛЬНОМ ОКНЕ === */

/* Общий контейнер кастомной кнопки */
.modal-action-button.custom-like-button {
    padding: 0; /* Убираем стандартный padding от .button, т.к. части будут иметь свой */
    overflow: hidden; /* Для корректного скругления углов дочерних частей */
    /* border: 1px solid var(--border-color); /* Если нужна общая рамка для всей кнопки */
    /* flex-grow: 1; /* Уже должно быть у .modal-action-button, если кнопки должны растягиваться */
}

/* Общие стили для обеих частей кастомной кнопки */
.custom-like-button-icon-part,
.custom-like-button-text-part {
    display: flex;
    align-items: center;
    justify-content: center;
    /* padding от .button (10px 16px) теперь здесь, но разделенный */
    padding-top: 10px;
    padding-bottom: 10px;
    transition: background-color 0.2s, color 0.2s;
    height: 100%; /* Чтобы части занимали всю высоту родительской кнопки */
}

/* Часть с иконкой */
.custom-like-button-icon-part {
    background-color: var(--bg-tertiary); /* Серый фон по умолчанию */
    padding-left: 16px;  /* Такой же горизонтальный padding как у .button */
    padding-right: 12px; /* Чуть меньше справа, чтобы освободить место для разделителя */
    position: relative; /* Для позиционирования псевдоэлемента-разделителя */
}

/* Иконка внутри иконочной части */
.custom-like-button-icon-part .material-symbols-outlined {
    color: var(--text-secondary); /* Серая иконка по умолчанию */
    font-variation-settings: 'FILL' 0, 'wght' 400; /* Незаполненная */
    font-size: 20px; /* Размер как у .button .material-symbols-outlined */
    line-height: 1;  /* Как у .button .material-symbols-outlined */
    transition: color 0.2s;
}

/* Часть с текстом */
.custom-like-button-text-part {
    background-color: var(--bg-tertiary); /* Серый фон по умолчанию */
    flex-grow: 1; /* Текстовая часть занимает оставшееся место */
    padding-left: 12px;  /* Отступ слева от разделителя */
    padding-right: 16px; /* Такой же горизонтальный padding как у .button */
    justify-content: flex-start; /* Выравниваем текст по левому краю, если он не по центру */
}

/* Текст кнопки */
.custom-like-button-text-part .button-text {
    color: var(--text-primary); /* Цвет текста по умолчанию */
    font-size: 14px;   /* Как у .button */
    font-weight: 500;  /* Как у .button */
    line-height: 1;    /* Как у .button */
}

/* --- Стили для состояния .liked --- */

/* Иконочная часть в состоянии "лайкнуто" */
.modal-action-button.custom-like-button.liked .custom-like-button-icon-part {
    background-color: var(--bg-tertiary); /* Фон иконки остается серым */
    /* Разделитель также остается без изменений */
}

/* Иконка в состоянии "лайкнуто" */
.modal-action-button.custom-like-button.liked .custom-like-button-icon-part .material-symbols-outlined {
    color: var(--text-destructive); /* Иконка становится красной */
    font-variation-settings: 'FILL' 1, 'wght' 400; /* Заполненная */
}

/* Текстовая часть в состоянии "лайкнуто" */
.modal-action-button.custom-like-button.liked .custom-like-button-text-part {
    background-color: var(--text-destructive); /* Фон текстовой части становится красным */
}

/* Текст в состоянии "лайкнуто" */
.modal-action-button.custom-like-button.liked .custom-like-button-text-part .button-text {
    color: var(--text-on-accent); /* Текст на красном фоне становится контрастным (обычно белым) */
}

/* --- Ховер-эффекты (для не "лайкнутой" кнопки) --- */
.modal-action-button.custom-like-button:not(.liked):hover .custom-like-button-icon-part,
.modal-action-button.custom-like-button:not(.liked):hover .custom-like-button-text-part {
    /* Используем осветление фона, как у обычных .button:hover */
    background-color: color-mix(in srgb, var(--bg-tertiary) 85%, white);
}

.modal-action-button.custom-like-button.liked:hover .custom-like-button-text-part {
    /* Аналогично для текстовой части - затемнение красного фона */
    background-color: color-mix(in srgb, var(--text-destructive) 85%, black);
}

/* Если loader-spinner-small еще не в CSS-файле, добавьте его */
.loader-spinner-small { 
    display: inline-block; 
    width: 1em; /* Или фиксированный размер, например, 16px */
    height: 1em; /* Или фиксированный размер, например, 16px */
    border: 2px solid currentColor; 
    border-top-color: transparent; 
    border-radius: 50%; 
    animation: spin 0.6s linear infinite; 
    /* margin-right: 0.5em; /* Если рядом будет текст */
    vertical-align: middle; 
}
/* spin animation уже должен быть определен ранее */

/* Обновляем стили для кнопки Копировать и её состояний */
.modal-action-button#modalCopyButton {
    position: relative; /* Остается для позиционирования внутренних span */
    /* display: flex; justify-content: center; align-items: center; /* Это уже от .button */
    /* padding: 10px 16px; /* Это уже от .button и определяет изначальный размер */
    overflow: hidden; /* Чтобы абсолютно спозиционированные элементы не вылезали, если что */
}

/* Общие стили для всех трех состояний контента кнопки Копировать */
.modal-action-button#modalCopyButton .button-content-normal,
.modal-action-button#modalCopyButton .button-content-loading,
.modal-action-button#modalCopyButton .button-content-success {
    /* Абсолютное позиционирование, чтобы они накладывались друг на друга 
       и не влияли на размер родительской кнопки, который определен её padding и 
       содержимым .button-content-normal (когда он не display:none) */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    display: flex; /* Для выравнивания содержимого внутри каждого span */
    align-items: center;
    justify-content: center;
    gap: 8px; /* Если внутри есть иконка и текст */
    
    /* Плавное появление/исчезновение (опционально) */
    /* opacity: 0; */
    /* visibility: hidden; */
    /* transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out; */
}

/* Галочка внутри success состояния */
.modal-action-button#modalCopyButton .button-content-success .material-symbols-outlined {
    font-size: 20px; /* Размер галочки, как у обычной иконки */
}

/* Стили для .loader-spinner-small (если еще не определены глобально) */
.loader-spinner-small { 
    display: inline-block; 
    width: 1.2em; /* Немного увеличим для наглядности внутри кнопки */
    height: 1.2em;
    border: 2px solid currentColor; 
    border-top-color: transparent; 
    border-radius: 50%; 
    animation: spin 0.6s linear infinite; 
    vertical-align: middle; 
}
/* @keyframes spin уже должен быть */

.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0; /* Вертикальные отступы */
    /* border-bottom: 1px solid var(--border-color); /* Если нужны разделители между настройками */
}
.setting-item:last-child {
    border-bottom: none;
}

.setting-label span {
    font-weight: 500;
    display: block;
    color: var(--text-primary);
}
.setting-label small {
    font-size: 12px;
    color: var(--text-secondary);
    display: block;
    margin-top: 2px;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 48px;  /* Ширина переключателя */
    height: 26px; /* Высота переключателя */
}

.toggle-switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-tertiary); /* Цвет неактивного состояния */
    transition: .3s;
    border-radius: 26px; /* Для полного скругления */
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px; /* Размер кружка */
    width: 20px;
    left: 3px;   /* Отступ кружка слева */
    bottom: 3px; /* Отступ кружка снизу */
    background-color: white;
    transition: .3s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: var(--text-accent); /* Цвет активного состояния */
}

input:checked + .slider:before {
    transform: translateX(22px); /* Смещение кружка вправо */
}

/* Стили для контейнера Lottie-анимации */
/* Лучше перенести инлайн-стили из HTML сюда для единообразия */
#lottieAnimationContainer {
    width: 150px; /* Оставьте ваши размеры */
    height: 150px;/* Оставьте ваши размеры */
    margin-bottom: 5px; /* <<< Уменьшаем отступ под анимацией (было 10px) */
    /* margin-top: 0; /* Убедимся, что нет верхнего отступа, если он не нужен */
}

#loaderText {
    margin-top: 0; /* Убираем или уменьшаем верхний отступ у текста, если он есть */
    /* margin-bottom: 0; /* Если нужен отступ под текстом, можно добавить */
    font-size: 14px; /* Можно немного настроить размер текста, если нужно */
    line-height: 1.4;
}