/* assets/style.css */
body, html { margin: 0; padding: 0; font-family: 'Poiret One', cursive; background-color: #f0f2f5; height: 100%; font-size: 19px; /* Poiret One немного меньше, поэтому чуть увеличим базовый размер */}

.sidebar h1 {
    font-family: 'Dancing Script', cursive;
    margin: -30px 0 0 0; /* Убираем верхний отступ, оставляем нижний */
    font-size: 2.0em;
    text-align: center;
}

/* Возвращаем более стандартный шрифт для полей ввода, т.к. рукописный там неудобен */
/* Возвращаем более стандартный шрифт для полей ввода, т.к. рукописный там неудобен */
textarea, input {
    font-family: sans-serif;
    font-size: 14px;
}
button {
    font-size: 18px; /* Увеличим для лучшей читаемости */
    font-family: 'Poiret One', cursive;
    /* font-weight убран, т.к. Poiret One имеет только одно начертание (400) */
}
.app-container { display: flex; height: 100vh; }
.sidebar { width: 350px; background: #fff; padding: 20px; box-shadow: 2px 0 5px rgba(0,0,0,0.1); display: flex; flex-direction: column; gap: 15px; overflow-y: auto; }
.preview-container { flex-grow: 1; padding: 10px; display: flex; flex-direction: column; }
#preview-frame { width: 100%; height: 100%; border: 1px solid #ccc; background: #fff; flex-grow: 1; }
.control-group { display: flex; flex-direction: column; }
label { font-weight: bold; margin-bottom: 5px; font-size: 0.9em; }
textarea, input[type="text"], input[type="file"], input[type="password"] { width: 100%; padding: 8px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; }
textarea { resize: vertical; }
.btn-main { width: 100%; padding: 12px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 1em; }

.refine-wrapper { display: flex; }
#project-password {
    border-radius: 4px 0 0 4px;
}
#load-project-btn {
    border: 1px solid #007bff;
    background: #007bff;
    color: white;
    padding: 0 15px;
    cursor: pointer;
    border-radius: 0 4px 4px 0;
}
.actions-group { display: flex; gap: 10px;  }
.actions-group button { flex-grow: 1; padding: 10px; border-radius: 4px; cursor: pointer; font-size: 0.9em; border: 1px solid #ccc; }
.actions-group .btn-main { background: #007bff; color: white; border-color: #007bff; font-weight: bold; }
.actions-group button:not(.btn-main) { background: #f0f0f0; color: #333; }

/* --- НОВЫЕ СТИЛИ --- */
.loader { text-align: center; padding: 20px; color: #666; }
.loader svg { width: 130px; height: auto; margin-bottom: -20px; }
#feedback { text-align: center; color: #666; }
#feedback.error { color: #dc3545; font-weight: 600;}
#feedback.success { color: #28a745; font-weight: 600;}
.btn-secondary { width: 100%; margin-top: 5px; padding: 8px; background: #6c757d; color: white; border: 1px solid #5a6268; border-radius: 4px; cursor: pointer; }
.preview-controls { display: flex; align-items: center; gap: 10px; padding: 5px 10px; background: #e9ecef; border-bottom: 1px solid #ccc; font-size: 0.9em; }
.preview-controls label { margin-left: 5px; font-weight: normal; }
#refresh-frame-btn { background: #fff; border: 1px solid #ccc; border-radius: 50%; width: 24px; height: 24px; cursor: pointer; font-size: 16px; line-height: 22px; padding: 0; }
#refresh-frame-btn:hover { background: #f0f0f0; }
.file-input-wrapper { display: flex; }
.btn-clear { background: #e9ecef; border: 1px solid #ccc; border-left: none; border-radius: 0 4px 4px 0; padding: 0 10px; cursor: pointer; color: #666; }
.btn-clear:hover { background: #dc3545; color: white; }
details summary { cursor: pointer; font-weight: bold; padding: 5px 0; }
.details-content { padding-top: 10px; display: flex; flex-direction: column; gap: 15px; }
details[data-disabled="true"] { opacity: 0.6; pointer-events: none; }
details[data-disabled="true"] summary { cursor: default; }
/* --- Стили от 2-го этапа правок --- */

/* Логотип */
.logo-img {
    height: 85px;
    width: auto;
    object-fit: contain;
    align-self: center; /* Выравниваем по центру */
    margin-bottom: 5px;
}

/* Контейнер для поля с кнопкой (пароль + загрузить) */
.input-with-button {
    display: flex;
}
.input-with-button input {
    border-radius: 4px 0 0 4px;
}
.input-with-button button {
    border-radius: 0 4px 4px 0;
    border: 1px solid #ccc;
    border-left: none;
    padding: 0 15px;
    cursor: pointer;
    background: #f0f0f0;
}

/* Блок настроек API */
.api-settings {
    margin-top: auto; /* Прижимает блок к низу */
    padding-top: 15px;
    border-top: 1px solid #eee;
    font-size: 0.9em;
}
.api-settings summary {
    color: #666;
}
.api-settings .details-content {
    margin-top: 10px;
}
#save-api-settings-btn {
    width: 100%;
    padding: 8px;
    margin-top: 10px;
    border-radius: 4px;
    cursor: pointer;
}

/* --- Новые стили для кнопок (Градиенты) --- */
.btn-main, #refine-btn, #create-inner-btn, #save-api-settings-btn, .actions-group .btn-main, #download-btn, #load-project-btn, .generate-btn {
    background-image: linear-gradient(to right, #2e26cb 0%, #b250c0 51%, #2e26cb 100%);
    background-size: 200% auto;
    color: white;
    border: none;
    transition: 0.5s;

}
.btn-main:hover, #refine-btn:hover, #create-inner-btn:hover, #save-api-settings-btn:hover, .actions-group .btn-main:hover, #download-btn:hover, #load-project-btn:hover, .generate-btn {
    background-position: right center; /* change the direction of the change here */
}
.btn-cancel {
    margin-top: 15px;
    background: #6c757d;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
}
.btn-cancel:hover {
    background: #5a6268;
}
/* --- Стили для счетчика онлайн-пользователей --- */
.online-counter {
    margin-left: auto; /* Главное правило, которое прижимает счетчик вправо */
    display: flex;
    align-items: center;
    gap: 6px;
    color: #333;
    font-size: 16px;
    font-weight: bold;
}

.live-dot {
    color: #28a745; /* Зеленый цвет "в сети" */
    font-size: 1.2em;
    line-height: 1;
}
/* --- Стили для тултипа (подсказки) --- */
.tooltip-container {
    position: relative;
}

.tooltip-container::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%; /* Показываем над элементом */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-family: sans-serif; /* Читаемый шрифт для подсказки */
    white-space: normal;
    width: max-content;
    max-width: 280px;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none; /* Чтобы мышка не цеплялась за тултип */
    z-index: 100;
    margin-bottom: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Маленький треугольник (стрелочка) вниз */
.tooltip-container::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
    z-index: 100;
    margin-bottom: -4px;
}

.tooltip-container:hover::after,
.tooltip-container:hover::before {
    opacity: 1;
    visibility: visible;
}