/* assets/css/generator/base.css */

:root {
    --color-bg-primary: #0a0a0e;
    --color-bg-secondary: #13141a;
    --color-bg-tertiary: #0f0f14;
    --color-bg-hover: #1a1b23;

    --color-text-primary: #ffffff;
    --color-text-muted: #6b6b6b;
    --color-text-menu-muted: #4a4a52;

    --color-blue-bright: #3b9cff;
    --color-blue-muted: #5b7d9f;
    --color-error: #ff4a4a;
    --color-neuro: #ff6b3b;

    --color-border-default: rgba(255, 255, 255, 0.08);
    --color-border-hover: rgba(255, 255, 255, 0.15);

    --radius-lg: 12px;
    --radius-md: 8px;
    --radius-sm: 4px;

    --drum-item-height: 64px;
    --drum-item-width: 120px;

    --transition-fast: 0.2s ease;
    --transition-bounce: 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Динамическая переменная для отступа ленты (обновляется через JS) */
    --generator-total-height: 320px;
}

@keyframes icon-pulse {
    0% { stroke: var(--color-blue-bright); filter: drop-shadow(0 0 8px rgba(59,156,255,0.3)); }
    100% { stroke: currentColor; filter: drop-shadow(0 0 0px transparent); }
}

@keyframes send-btn-pulse {
    0% { background-color: var(--color-blue-bright); box-shadow: 0 0 12px rgba(59,156,255,0.3); }
    100% { background-color: var(--color-blue-muted); box-shadow: none; }
}

@keyframes neuro-btn-pulse {
    0% { background-color: var(--color-neuro); box-shadow: 0 0 16px rgba(255, 107, 59, 0.4); border-color: var(--color-neuro); }
    100% { background-color: rgba(255, 107, 59, 0.8); box-shadow: none; border-color: transparent; }
}

@keyframes float-icon {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

.tool-btn .active-val { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
#ai-model-tool .active-val { display: none !important; }
#aspect-ratio-tool .active-val { width: 34px; }
#resolution-tool .active-val {
    width: auto;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
}
#format-tool .active-val { width: 26px; }