/* --- INPAINT STYLES --- */

/* Контейнер режима Inpaint (на весь центр) */
#inpaint-view {
    display: flex;
    flex-direction: row;
    background: #000;
    overflow: hidden;
}

/* Сайдбар истории внутри Inpaint */
.inpaint-history-scroll {
    width: 90px;
    min-width: 90px;
    background: #111;
    border-right: 1px solid #333;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
}

.inpaint-history-item {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid transparent;
    transition: 0.2s;
}
.inpaint-history-item:hover {
    border-color: var(--primary);
    opacity: 0.8;
}
.inpaint-history-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Область холста */
.canvas-wrapper {
    flex-grow: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #050505;
    overflow: hidden;
}

/* Фон сеткой */
.canvas-grid-bg {
    position: absolute;
    inset: 0;
    /* Точки вместо линий - выглядит чище */
    background-image: radial-gradient(#333 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.3;
    pointer-events: none;
}

/* Зона, занимающая весь центр */
#inpDropZone {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 10;
}

/* Красивая кнопка загрузки по центру */
#inpPlaceholder {
    border: 2px dashed #333;
    border-radius: 16px;
    padding: 60px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: rgba(255,255,255,0.02);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#inpPlaceholder:hover {
    border-color: #ff9800;
    background: rgba(255, 152, 0, 0.05);
    transform: scale(1.02);
}

/* Канвас */
#inpCanvas {
    box-shadow: 0 0 30px rgba(0,0,0,0.8);
    /* Размеры задаются JS, но max-width нужен */
    max-width: 95%;
    max-height: 95%;
}

/* Оверлей загрузки */
#inpLoading {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.9);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Кнопки управления (Очистить/Закрыть) */
#inpControls {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 50;
    display: flex;
    gap: 10px;
    background: rgba(0,0,0,0.5);
    padding: 8px;
    border-radius: 8px;
    backdrop-filter: blur(5px);
}

/* Кастомный курсор кисти */
#brushCursor {
    position: fixed;
    pointer-events: none;
    border: 2px solid rgba(255, 255, 255, 0.9);
    background: rgba(255, 152, 0, 0.4); /* Полупрозрачный оранжевый */
    box-shadow: 0 0 10px rgba(255, 152, 0, 0.5);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    display: none;
}

/* Активные кнопки инструментов в левой панели */
#btn-brush.active, #btn-eraser.active {
    background-color: var(--primary);
    color: #000;
    border-color: var(--primary);
}

#brushSize::-webkit-slider-thumb {
    background-color: #fabf3c !important; /* Желтый цвет */
    box-shadow: 0 0 10px rgba(250, 191, 60, 0.5); /* Легкое свечение */
    border: 1px solid white;
}

#brushSize::-moz-range-thumb {
    background-color: #fabf3c !important;
    border: 1px solid white;
}

/* Цвет при нажатии */
#brushSize:active::-webkit-slider-thumb {
    background-color: #fff !important;
    transform: scale(1.1);
}

/* Анимация для логотипа загрузки */
@keyframes spin-logo {
    100% { transform: rotate(360deg); }
}
@keyframes spin-logo-reverse {
    100% { transform: rotate(-360deg); }
}

.custom-loader-wrapper {
    position: relative;
    width: 100px;
    height: 100px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinner-w1 {
    position: absolute;
    width: 60%;
    height: 60%;
    object-fit: contain;
    animation: spin-logo 4s linear infinite;
    opacity: 0.8;
}

.spinner-w2 {
    position: absolute;
    width: 60%; /* Размер внутренней части */
    height: 60%;
    object-fit: contain;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    opacity: 1;
    /* Неоновое свечение оставляем для красоты */
    filter: drop-shadow(0 0 10px var(--neon-main));
}

.loader-text {
    font-family: 'Rajdhani', sans-serif; /* Или ваш шрифт var(--font-tech) */
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--neon-main);
    text-transform: uppercase;
    font-size: 1.1rem;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { opacity: 0.6; }
    50% { opacity: 1; text-shadow: 0 0 10px var(--neon-main); }
    100% { opacity: 0.6; }
}