/* ========================================================================= */
/* ===         04_PAGES.CSS - СТИЛИ ДЛЯ КОНКРЕТНЫХ ЭКРАНОВ             ===   */
/* ========================================================================= */

/* --- БЛОК ПОЛЬЗОВАТЕЛЯ И КНОПКИ РЕЖИМОВ (USER BLOCK & MODES) --- */

/* 1. Блок пользователя (левая панель) */
.user-block {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background-color: var(--bg-input); 
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    /* ЗАМЕНА: Синяя рамка вместо оранжевой */
    border: 1px solid var(--primary); 
    padding: 0.75rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
}

.user-block .user-details { 
    flex-grow: 1;
    line-height: 1.2;
    transform: translate(-15px, 2px);
}

.user-block .user-name { 
    font-weight: 700;
    /* --- Обрезка длинного имени --- */
    display: inline-block;
    max-width: 140px; /* Ограничиваем ширину, чтобы кнопка не уезжала */
    white-space: nowrap; /* Запрещаем перенос на новую строку */
    overflow: hidden; /* Прячем всё, что не влезло */
    text-overflow: ellipsis; /* Добавляем троеточие "..." */
    vertical-align: middle; /* Чтобы текст не съезжал вверх/вниз */
}

.user-block .user-credits { 
    font-size: 0.9rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.4rem; /* Расстояние между иконкой и текстом */
}

/*----------- Иконка алмаза возле баланса ----------------*/

/* 2. Иконка кредитов (алмаз/монета) */
.user-credits .credit-icon {
    width: 1em; height: 1em;
    color: #38BDF8; /* Голубой */
    filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.7));
    margin-top: -2px;
}
.user-block .btn-icon {
    flex-shrink: 0;
    background-color: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    width: 38px; height: 38px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s ease;
}

.user-block .btn-icon:hover { 
    color: var(--text-main);
    border-color: var(--primary);
    transform: scale(1.1);
}

/* Кнопки выбора режима */
.mode-button {
    background-color: var(--bg-input);
    border: var(--primary);
    color: var(--text-main);
    text-align: left;
    padding: 1rem;
    width: 100%;
    margin-bottom: 0.75rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    display: flex; align-items: center;
    gap: 0.75rem;
}

.mode-button svg {
    flex-shrink: 0; /* Запрещаем иконке сжиматься */
    color: var(--text-main); /* Делаем иконку серой по умолчанию */
    transition: color 0.3s ease;
}

.mode-button:hover svg {
    color: var(--primary); /* При наведении на кнопку, иконка становится оранжевой */
}

.mode-button.active svg {
    color: var(--bg-input);
}

/* Отдельные стили для подменю */
.studio-submenu .mode-button:hover svg {
    color: var(--primary);
}
.studio-submenu .mode-button.active svg {
    color: var(--bg-input); /* В активном под-пункте иконка тоже оранжевая */
}

.mode-button:hover { 
    background-color: var(--bg-panel);
    border-color: var(--primary);
    color: var(--primary);
}
.mode-button.active {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--bg-input);
    font-weight: 700;
}

.mode-button.active svg {
    color: var(--bg-input);
}

/* --- ЭКРАН ПРОФИЛЯ ПОЛЬЗОВАТЕЛЯ (PROFILE PAGE) --- */

#profile-stats-view {
    margin-top: 1rem;
    border-top: 1px solid var(--border-color);
    padding-top: 1.5rem;
}

.user-avatar {
    width: 52px; height: 52px; border-radius: 50%;
    border: 2px solid var(--border-color);
    object-fit: cover;
    margin-right: 1rem;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.balance-value { 
    font-size: 1.4rem;
    font-weight: 700;
    color: #FFD700;
}

.stats-list-compact {
    list-style: none;
    padding: 0; margin: 0;
    display: flex; flex-direction: column;
    gap: 0.85rem;
}

.stat-item-compact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.95rem;
}

.stat-label-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.stat-icon {
    color: var(--text-secondary);
    width: 18px; height: 18px;
}

.stat-label-compact { 
    color: var(--text-primary);
}

.stat-value-compact { 
    font-weight: 500;
    color: var(--text-secondary);
}

.profile-divider {
    height: 30px;
    background-image: url('data:image/svg+xml,...'); /* SVG-код для волнистой линии оставлен для краткости */
    background-repeat: repeat-x;
    background-position: center;
    margin: 1rem 0 0.5rem 0;
    display: flex; align-items: center; justify-content: center;
}

.awards-header-text {
    color: var(--accent-color);
    background-color: var(--background-secondary);
    padding: 0 1rem;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
}


/* ====================================================================== */
/* ===         ✔️ НОВЫЕ СТИЛИ ДЛЯ РЕЖИМА "ПЕРСОНАЖ" (v4-fix) ✔️        === */
/* ====================================================================== */

/* Стили для блока ВЫБРАННОГО персонажа (под шапкой профиля) */
#selected-character-view {
    border: 1px solid var(--accent-color);
    background-color: rgba(56, 189, 248, 0.15);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 0 10px -2px var(--accent-glow);
}
#selected-character-view .list-group-item {
    padding: 0;
    background: transparent;
    border: none;
    flex-grow: 1;
    margin: 0;
}
#selected-character-view .list-group-item small {
    color: var(--accent-color);
    font-weight: 700;
}
#selected-character-view .character-avatar-wrapper {
    border-color: var(--accent-color);
}
#back-to-list-btn {
    flex-shrink: 0;
    font-size: 0.8rem;
    padding: 0.3rem 0.8rem;
    border-radius: 2rem;
}

/* --- Стили для списка персонажей --- */
#character-list {
    padding: 5px; 
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
}
#character-list::-webkit-scrollbar { display: none; }

#character-list .list-group-item {
    background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
}
#character-list .list-group-item:last-child {
    margin-bottom: 0;
}
#character-list .list-group-item:hover {
    background-color: var(--background-tertiary);
    border-color: #555;
    transform: translateX(5px);
}

/* Аватар персонажа */
.character-avatar-wrapper {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    overflow: hidden; 
    transition: border-color 0.3s ease;
}
.character-avatar-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
}

/* Имя персонажа */
#character-list .list-group-item small {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
    transition: color 0.3s ease;
}

/* Кнопка удаления персонажа (крестик) */
.character-delete-btn {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    transition: all 0.2s ease-in-out;
}
.character-delete-btn:hover {
    background-color: #dc3545; 
    transform: scale(1.1) rotate(90deg);
}
/* --- Стилизация формы создания нового персонажа --- */
#character-create-form hr {
    border-color: var(--border-color);
}
#character-create-form h6 {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1px;
}
#character-create-form .btn-outline-warning {
    color: var(--text-secondary);
    border-color: var(--border-color);
    transition: all 0.3s ease;
}
#character-create-form .btn-outline-warning:hover {
    color: #000;
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    transform: scale(1.02);
}

/* --- Стили для анимаций появления/исчезновения --- */
#character-list .list-group-item.is-deleting {
    opacity: 0;
    transform: scale(0.8) translateX(-50px);
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    border-width: 0;
}
#character-list .list-group-item.is-entering {
    opacity: 0;
    transform: scale(0.8) translateX(50px);
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
}

#character-prompt-input {
    min-height: 160px; /* Задайте желаемую высоту. Стандартно около 80px. */
    resize: vertical;  /* Позволяет пользователю изменять размер по вертикали */
}

/* Стили для разделителя на странице входа */
.auth-divider {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    line-height: 0.1em;
    margin: 2rem 0;
} 

.auth-divider span {
    background: var(--background-primary); 
    padding: 0 10px;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

/* 
   ===============================================================
   ===     FIX: Убираем артефактную полосу на экране входа     ===
   ===============================================================
*/
/* Это правило сработает ТОЛЬКО когда на body есть класс not-logged-in */
.not-logged-in #profile-stats-view {
    border-top: none !important;
}

/* ========================================================================= */
/* ===         ✔️ МУЗЫКА: Финальная стилизация интерфейса                === */
/* ========================================================================= */

/* 1. Применяем шрифт 'Bowler' к заголовку режима "Музыка" */
#music-form-title {
    font-family: 'Bowler', sans-serif;
    transform: translateY(-3px); /* Небольшая коррекция для идеального выравнивания */
    font-size: 1.2rem;
}

/* 2. Стилизуем контейнер для кнопок-переключателей */
.custom-toggle-group {
    display: flex;
    background-color: var(--background-tertiary);
    border-radius: 0.5rem;
    padding: 4px;
    border: 1px solid var(--border-color);
}

/* 3. Стили для самих кнопок "Обычный" / "Профессиональный" */
.custom-toggle-btn {
    flex: 1; /* Кнопки занимают равное пространство */
    padding: 0.5rem 1rem;
    border: none;
    background-color: transparent;
    color: var(--text-secondary);
    font-weight: 500;
    border-radius: 0.375rem; /* Скругление углов */
    transition: all 0.3s ease;
    cursor: pointer;
}

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

/* 4. Стиль для активной (выбранной) кнопки */
.custom-toggle-btn.active {
    background-color: var(--accent-color);
    color: #000;
    font-weight: 700;
    box-shadow: 0 0 10px var(--accent-glow);
}

#profile-view {
    display: flex;          /* Включаем Flexbox для управления внутренними элементами (заголовком и списком) */
    flex-direction: column; /* Располагаем заголовок и список друг под другом */
    flex-grow: 1;           /* ГЛАВНОЕ: Заставляем этот блок занять все доступное ему вертикальное пространство */
    min-height: 0;          /* Техническое свойство для корректной работы flex-grow и overflow */
    overflow-y: auto;       /* Включаем вертикальную прокрутку, если контент не помещается */
    padding-right: 10px;    /* Добавляем небольшой отступ справа, чтобы скроллбар не "прилипал" к контенту */
}

#profile-view::-webkit-scrollbar {
    width: 8px;
}
#profile-view::-webkit-scrollbar-track {
    background: transparent;
}
#profile-view::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 4px;
}
#profile-view::-webkit-scrollbar-thumb:hover {
    background-color: var(--accent-color);
}

/* ========================================================================= */
/* ===         ✔️ ФИНАЛЬНЫЕ СТИЛИ для выпадающего меню "Студия"        ✔️ === */
/* ========================================================================= */
/* Этот код создает невидимую "подушку" вокруг кнопки, 
   которая ловит клики, не меняя внешний вид. */

.studio-toggle-arrow::before {
  content: '';
  position: absolute;

  /* Увеличиваем область на 15px в каждую сторону. Можете поменять это значение. */
  top: -15px;
  left: -25px;
  right: -15px;
  bottom: -15px;

  /* Делаем подушку полностью прозрачной */
  background-color: transparent; 

  /* Раскомментируйте эту строку, чтобы увидеть увеличенную область (она будет полупрозрачной оранжевой) */
  /* background-color: rgba(255, 153, 0, 0.3); */
}
.mode-group {
    position: relative;
}

/* --- Стили для кнопки-стрелки --- */
/* Этот стиль применяется ко всем стрелкам с классом .studio-toggle-arrow */
.studio-toggle-arrow {
    position: absolute;
    right: 1rem;
    top: 0.75rem;
    height: 32px;
    width: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Состояние 1: Меню закрыто -> Стрелка всегда оранжевая */
.studio-toggle-arrow {
    background: transparent;
    color: var(--text-main);
    border: 1px solid var(--text-main);
}

/* Состояние 2: Меню ОТКРЫТО -> Стрелка оранжевая на черном фоне */
.mode-group.is-open .studio-toggle-arrow {
    background-color: transparent;
    border-color: var(--text-main);
}


/* --- Поворот стрелки --- */
.studio-toggle-arrow .arrow {
    transition: transform 0.3s ease-in-out;
}
.mode-group.is-open .studio-toggle-arrow .arrow {
    transform: rotate(-180deg);
}


/* --- Стили для подменю --- */
.studio-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, margin-top 0.4s ease-out;
    padding-left: 1rem;
    margin-top: 0;
}
.mode-group.is-open .studio-submenu {
    max-height: 500px;
    margin-top: 0.75rem;
}
.studio-submenu {
    font-size: 0.9rem;
    padding-left: 1.5rem;
}
.studio-submenu .mode-button:hover {
    border-color: var(--primary-hover);
}

/* ====================================================================== */
/* ===    СТИЛЬ ДЛЯ ЗАГОЛОВКА В ГЕНЕРАТОРЕ ТЕКСТА (ШРИФТ BOWLER)    === */
/* ====================================================================== */

#lyrics-generator-title {
    font-family: 'Bowler', sans-serif;
    font-size: 1.2rem; /* Можно настроить размер, чтобы он выглядел гармонично */
    color: var(--text-primary);
    margin-bottom: 1.5rem !important; /* Увеличим отступ снизу для красоты */
}

.character-actions-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.character-actions-container .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

#character-generate-form {
    width: 100%;
}

#character-prompt-input {
    min-height: 150px;
    resize: vertical;
}

#character-list .list-group-item.active {
    background-color: rgba(56, 189, 248, 0.15);
    border-color: var(--accent-color);
    transform: translateX(5px);
    box-shadow: 0 0 10px -2px var(--accent-glow);
}

#character-list .list-group-item.active small {
    color: var(--accent-color);
    font-weight: 700;
}

/* Стиль для PRO транзакций в истории */
.transaction-item.is-pro-transaction {
    background: linear-gradient(to right, rgba(255, 215, 0, 0.05), transparent);
    border-left-color: #FFD700 !important; /* Золотая полоска слева */
}

/* Бейдж PRO внутри истории */
.transaction-description .badge {
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.4);
    font-weight: 800;
    padding: 0.25em 0.5em;
}

/* --- Стили для PRO статуса в боковой панели --- */

/* 1. Бейдж PRO */
.user-panel-pro-badge {
    display: inline-block;
    background: linear-gradient(45deg, #FFD700, #FFA500); /* Золотой градиент */
    color: #000;
    font-size: 0.6rem;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.4);
    letter-spacing: 0.5px;
    transform: translateY(-1px); /* Чуть поднять, чтобы ровно с текстом */
}

/* Базовый стиль для тега PRO (когда кнопка НЕ активна) */
.pro-tag {
    color: #FABF3C;             /* Оранжево-золотой текст */
    border: 1px solid #FABF3C;  /* Оранжевая рамка */
    padding: 1px 6px;           /* Отступы внутри рамки */
    border-radius: 4px;         /* Скругленные углы */
    font-weight: 800;
    font-size: 0.7rem;
    margin-left: 8px;
    letter-spacing: 0.5px;
    display: inline-block;
    line-height: 1.2;
    transition: all 0.3s ease;  /* Плавный переход при нажатии */
}

/* 2. СОСТОЯНИЕ АКТИВНОСТИ (Кнопка нажата, фон оранжевый) */
.mode-button.active .pro-tag {
    background-color: #000000;  /* Черный фон плашки */
    color: #FABF3C;             /* Золотой текст */
    border-color: #000000;      /* Рамка становится черной (под цвет фона) */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
/* 2. Золотая рамка для аватарки в панели */
.user-block .user-avatar.vip-glow {
    border: 2px solid #FFD700;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
    /* Если у вас уже есть анимация gold-pulse в другом файле, она подхватится. 
       Если нет - раскомментируйте код ниже: */
    animation: gold-pulse 3s infinite ease-in-out;
}

/* На всякий случай дублируем анимацию, если она не видна из другого файла */
@keyframes gold-pulse {
    0% { box-shadow: 0 0 5px rgba(255, 215, 0, 0.3); border-color: #FFD700; }
    50% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.6); border-color: #ffed4a; }
    100% { box-shadow: 0 0 5px rgba(255, 215, 0, 0.3); border-color: #FFD700; }
}

/* Кнопка удаления в галерее сообщества */
.community-delete-btn {
    position: absolute;
    top: 5px; 
    right: 5px;
    z-index: 5;
    width: 28px; 
    height: 28px;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex; 
    align-items: center; 
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s ease-in-out;
    transform: scale(0.8);
}

.community-card:hover .community-delete-btn {
    opacity: 1;
    transform: scale(1);
}

.community-delete-btn:hover {
    background-color: #dc3545;
    border-color: #dc3545;
    transform: scale(1.1);
}