/* assets/css/generator.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;
}

/* === ИЗМЕНЕНИЕ #1: Перенос кнопок-язычков сайдбаров выше === */
.sidebar-tab {
    position: absolute;
    top: 15%; /* Подняли еще выше */
    width: 18px; /* Сделали тоньше, чтобы меньше торчали */
    height: 60px; /* Уменьшили общую высоту */
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-default);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-text-muted);
    transition: all 0.2s ease;
    z-index: 5;
}

.sidebar-tab:hover {
    color: var(--color-text-primary);
    background: var(--color-bg-hover);
    border-color: var(--color-border-hover);
}

.sidebar-tab.left-tab {
    left: 100%;
    border-left: none;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.sidebar-tab.right-tab {
    right: 100%;
    border-right: none;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

@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 { width: 120px; }
#aspect-ratio-tool .active-val { width: 34px; }
#resolution-tool .active-val { width: 18px; }
#format-tool .active-val { width: 26px; }

/* === БАЗОВАЯ РАЗМЕТКА === */
.chat-layout {
    position: relative;
    width: 100%;
    /* Жестко высчитываем высоту для десктопа (100vh - 70px header - 20px padding = 90px) */
    height: calc(100vh - 90px);
    height: calc(100dvh - 90px);
    max-height: calc(100vh - 90px);
    max-height: calc(100dvh - 90px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Защитный градиент (шторка), скрывающий скроллящиеся карточки перед панелью генерации */
.chat-layout::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: calc(var(--generator-total-height) + 60px);
    background: linear-gradient(to bottom, transparent 0%, rgba(10, 10, 14, 0.8) 40%, var(--color-bg-primary) 80%, var(--color-bg-primary) 100%);
    pointer-events: none;
    z-index: 50; /* Выше ленты (1), но ниже панели генерации (100) */
}

/* Лента чата */
.chat-feed {
    position: relative; flex: 1; overflow-y: auto; overflow-x: hidden;
    padding: 20px 40px 0 40px;
    display: flex; flex-direction: column; align-items: center;
    gap: 16px; z-index: 1; scroll-behavior: smooth;
}

.chat-feed::before { content: ''; flex: 1 1 auto; width: 100%; min-height: 0; }

/* Использование динамической высоты для распорки ленты */
.chat-feed::after { 
    content: ''; 
    display: block; 
    height: var(--generator-total-height); 
    min-height: var(--generator-total-height); 
    width: 100%; 
    flex-shrink: 0; 
}

.chat-feed::-webkit-scrollbar { width: 6px; }
.chat-feed::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.02); border-radius: 10px; }
.chat-feed::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 10px; }
.chat-feed::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); }

/* === EMPTY STATE === */
.empty-state-wrapper {
    position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%);
    display: flex; flex-direction: column; align-items: center; gap: 20px;
    pointer-events: none; transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 10;
}
.empty-state-wrapper.hidden { opacity: 0; transform: translate(-50%, -65%); }
.empty-state-icon {
    width: 64px; height: 64px; color: var(--color-text-menu-muted);
    opacity: 0.8; filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.05));
    animation: float-icon 5s ease-in-out infinite;
}
.chat-welcome-message { color: var(--color-text-muted); text-align: center; font-size: 16px; font-weight: 500; opacity: 0.8; }

/* === НИЖНЯЯ ОБЕРТКА === */
.generator-bottom-wrapper {
    position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
    width: calc(100% - 64px); max-width: 1024px; z-index: 100;
    display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
}

/* === ВЕРХНЯЯ ПАНЕЛЬ === */
.technical-tray {
    display: flex; flex-direction: row; align-items: center; justify-content: space-between;
    padding: 6px 20px; background: rgba(15, 15, 20, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 20px;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    width: max-content; min-width: 400px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.8), 0 -4px 20px rgba(0, 0, 0, 0.5);
}
.technical-tray .tool-wrapper { flex: 1; justify-content: center; }

/* === ИНПУТ (ПРЕМИАЛЬНЫЙ ГЛАССМОРФИЗМ) === */
.floating-input-island {
    width: 100%; 
    background-color: rgba(15, 15, 20, 0.75); 
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.15); 
    display: flex; flex-direction: column;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.9), 0 -8px 32px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

.floating-input-island:focus-within {
    border-color: rgba(59, 156, 255, 0.4); 
    background-color: rgba(15, 15, 20, 0.9);
    transform: translateY(-2px);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.95), 0 -12px 36px rgba(0, 0, 0, 0.7), 0 0 20px rgba(59, 156, 255, 0.2), inset 0 0 0 1px rgba(59, 156, 255, 0.3);
}

.input-core { display: flex; align-items: flex-end; padding: 16px; gap: 16px; transition: opacity var(--transition-fast); }
.input-main-col { flex: 1; display: flex; flex-direction: column; gap: 8px; position: relative; min-width: 0; }

.attach-btn {
    position: absolute; left: 4px; top: 6px; z-index: 10;
    background: transparent; border: none; color: var(--color-text-muted); cursor: pointer;
    padding: 0; border-radius: 0; display: flex; transition: color var(--transition-fast);
}
.attach-btn:hover:not(:disabled) { color: var(--color-text-primary); }
.attach-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* === УНИФИЦИРОВАННЫЙ РЯД ТЕГОВ И РЕФЕРЕНСОВ === */
.unified-top-tray { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 0 36px; align-items: center; }
.unified-top-tray:has(> .reference-thumbnails:empty):has(> .active-modifiers-tray:empty) { display: none; }

/* === РЕФЕРЕНСЫ === */
.reference-thumbnails { display: flex; gap: 8px; flex-wrap: wrap; }
.reference-thumbnails:empty { display: none; }
.ref-thumb-wrapper { position: relative; width: 28px; height: 28px; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,0.5); animation: tag-pop 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease; }
.ref-thumb-wrapper.anim-pop-out { transform: scale(0) !important; opacity: 0 !important; }
.ref-thumb { width: 100%; height: 100%; background-size: cover; background-position: center; border-radius: inherit; cursor: pointer; border: 1px solid rgba(255,255,255,0.1); transition: all 0.2s ease; }
.ref-thumb:hover { border-color: var(--color-blue-bright); transform: scale(1.15) translateY(-2px); z-index: 10; }
.ref-thumb-delete { position: absolute; top: -4px; right: -4px; width: 14px; height: 14px; background: var(--color-error); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transform: scale(0.5); transition: all 0.2s; z-index: 11; border: 1px solid rgba(0,0,0,0.5); box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.ref-thumb-wrapper:hover .ref-thumb-delete { opacity: 1; transform: scale(1); }
.ref-thumb-delete svg { width: 8px; height: 8px; stroke-width: 3; }

/* === ПРЕВЬЮ ИЗОБРАЖЕНИЙ === */
.hover-image-preview { position: fixed; z-index: 9999; pointer-events: none; border-radius: var(--radius-md); background-color: var(--color-bg-primary); padding: 4px; box-shadow: 0 10px 40px rgba(0,0,0,0.8), 0 0 0 1px var(--color-border-hover); opacity: 0; transform: scale(0.8) translate(10px, 10px); transition: opacity 0.2s, transform 0.2s; will-change: left, top; display: flex; align-items: center; justify-content: center; }
.hover-image-preview.visible { opacity: 1; transform: scale(1) translate(0, 0); }
.hover-image-preview img { max-width: 300px; max-height: 300px; width: auto; height: auto; object-fit: contain; border-radius: calc(var(--radius-md) - 2px); }

/* === УЛУЧШЕНИЕ ПРОМПТА === */
.prompt-input-wrapper { position: relative; display: flex; flex-direction: column; width: 100%; }

/* Увеличен padding-left для десктопа (было 36px, стало 56px), чтобы текст не лип к иконкам */
.prompt-area { color: var(--color-text-primary); font-size: 15px; line-height: 1.5; outline: none; min-height: 96px; max-height: 240px; overflow-y: auto; white-space: pre-wrap; padding-left: 56px; padding-right: 12px; padding-top: 12px; transition: max-height 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease; }
.prompt-area:empty:before { content: attr(data-placeholder); color: var(--color-text-muted); pointer-events: none; }

.prompt-enhance-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(15, 15, 20, 0.85); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 20; display: none; flex-direction: row; align-items: center; justify-content: center; gap: 12px; color: var(--color-blue-bright); font-size: 13px; font-weight: 600; text-transform: uppercase; }
.prompt-enhance-overlay::before { content: ''; display: block; width: 150px; flex-shrink: 10; }

.enhance-prompt-btn { position: absolute; left: 6px; top: 38px; background: transparent; border: none; color: var(--color-text-muted); cursor: pointer; padding: 4px; border-radius: var(--radius-sm); transition: all var(--transition-fast); z-index: 10; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.enhance-prompt-btn:hover { color: var(--color-blue-bright); background: rgba(59, 156, 255, 0.1); transform: scale(1.1); }
.enhance-prompt-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: scale(1); }

.prompt-meta-icons { position: absolute; top: 72px; left: 14px; display: none; flex-direction: column; gap: 3px; z-index: 10; }
.meta-icon { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; color: var(--color-blue-muted); cursor: help; transition: color var(--transition-fast); position: relative; }
.meta-icon svg { width: 14px; height: 14px; }
.meta-icon:hover { color: var(--color-blue-bright); }
.meta-icon::after { content: attr(data-tooltip); position: absolute; top: 50%; left: 100%; bottom: auto; transform: translateY(-50%) translateX(-5px); margin-left: 12px; background: var(--color-bg-primary); color: var(--color-text-primary); padding: 8px 12px; border-radius: var(--radius-sm); font-size: 12px; line-height: 1.4; white-space: pre-wrap; width: max-content; max-width: 250px; pointer-events: none; opacity: 0; visibility: hidden; border: 1px solid var(--color-border-hover); box-shadow: 0 4px 16px rgba(0,0,0,0.6); transition: all var(--transition-fast); z-index: 100; }
.meta-icon:hover::after { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); }

@keyframes text-flash-color { 0% { color: var(--color-blue-bright); text-shadow: 0 0 8px rgba(59,156,255,0.5); opacity: 0; transform: translateY(-4px); } 100% { color: var(--color-text-primary); text-shadow: none; opacity: 1; transform: translateY(0); } }
.prompt-area.anim-text-flash { animation: text-flash-color 0.6s ease-out forwards; }

.creative-tray { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    flex-wrap: wrap; 
    position: relative; 
    z-index: 20; /* Поднимаем весь трей выше инпута, чтобы попапы и мостики были поверх искры ✨ */
}

.send-col { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; }
.send-row { display: flex; align-items: flex-end; gap: 12px; } /* Изменено на flex-end для идеального выравнивания по низу */

/* === КНОПКА ПАКЕТНОЙ ГЕНЕРАЦИИ === */
button.batch-display {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--color-text-primary);
    border-radius: var(--radius-md);
    height: 38px; /* Выравнивание по высоте кнопки старта */
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    transition: all var(--transition-fast);
    min-width: 70px;
    box-sizing: border-box;
}

button.batch-display:hover {
    background: rgba(59, 156, 255, 0.1);
    border-color: rgba(59, 156, 255, 0.4);
    color: var(--color-blue-bright);
    box-shadow: 0 0 12px rgba(59, 156, 255, 0.2);
}

button.batch-display svg {
    color: var(--color-text-muted);
    transition: color var(--transition-fast);
}

button.batch-display:hover svg {
    color: var(--color-blue-bright);
}


/* === КНОПКИ ОТПРАВКИ И НЕЙРОКОНТРОЛЯ (МЕХАНИЧЕСКИЙ ТУМБЛЕР) === */
.send-action-wrapper {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    position: relative;
    width: 156px; 
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    transition: all var(--transition-fast);
}

/* Панель тумблера (Левая часть) */
.neuro-toggle-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-right: none;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    z-index: 2;
}

/* Тултип (Подсказка) */
.neuro-toggle-label::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid var(--color-border-hover);
    box-shadow: 0 4px 16px rgba(0,0,0,0.6);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all var(--transition-fast);
    z-index: 100;
}

.neuro-toggle-label:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-4px);
}

/* Трек (канавка тумблера) */
.neuro-toggle-track {
    width: 14px;
    height: 24px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
    position: relative;
    transition: all var(--transition-fast);
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* По умолчанию ползунок внизу */
    padding: 2px;
    box-sizing: border-box;
}

/* Сам ползунок */
.neuro-toggle-thumb {
    width: 10px;
    height: 10px;
    background: #6b6b6b;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
    transition: all var(--transition-bounce);
    display: flex;
    align-items: center;
    justify-content: center;
}

.neuro-toggle-thumb svg {
    width: 6px;
    height: 6px;
    color: var(--color-bg-primary);
    opacity: 0.5;
    transition: all var(--transition-fast);
}

/* Ховер на тумблер (выключенный) */
.neuro-toggle-label:hover { background: rgba(255, 255, 255, 0.1); }
.neuro-toggle-label:hover .neuro-toggle-track { box-shadow: inset 0 2px 4px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.2); }

/* === СОСТОЯНИЕ "ВКЛЮЧЕНО" (НЕЙРОКОНТРОЛЬ) === */
#neuro-toggle-input:checked + .neuro-toggle-track {
    background: rgba(255, 107, 59, 0.2);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5), 0 0 0 1px rgba(255, 107, 59, 0.4);
    justify-content: flex-start; /* Ползунок едет наверх */
}

#neuro-toggle-input:checked + .neuro-toggle-track .neuro-toggle-thumb {
    background: var(--color-neuro);
    box-shadow: 0 0 8px rgba(255, 107, 59, 0.6);
}

#neuro-toggle-input:checked + .neuro-toggle-track .neuro-toggle-thumb svg {
    opacity: 1;
    color: #fff;
}

/* Основная кнопка отправки (Правая часть) */
.send-btn {
    flex: 1;
    color: var(--color-text-primary); 
    background-color: var(--color-blue-muted); 
    border: 1px solid transparent;
    border-left: 1px solid rgba(0, 0, 0, 0.3); /* Визуальный разделитель */
    border-radius: 0 var(--radius-md) var(--radius-md) 0; 
    padding: 8px 16px; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    gap: 12px;
    cursor: pointer; 
    transition: all var(--transition-fast); 
    font-family: inherit;
    height: 38px;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.send-btn:disabled, .neuro-toggle-label:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }

/* ОБЫЧНЫЙ ХОВЕР ОСНОВНОЙ КНОПКИ */
.send-btn:hover:not(:disabled) {
    background-color: var(--color-blue-bright);
    box-shadow: 0 0 16px rgba(59,156,255,0.5);
    z-index: 3;
}

/* === СИНХРОНИЗАЦИЯ КНОПКИ С ТУМБЛЕРОМ === */
.send-action-wrapper:has(#neuro-toggle-input:checked) {
    box-shadow: 0 4px 20px rgba(255, 107, 59, 0.2);
}

.send-action-wrapper:has(#neuro-toggle-input:checked) .neuro-toggle-label {
    background: rgba(255, 107, 59, 0.1);
    border-color: rgba(255, 107, 59, 0.4);
}

.send-action-wrapper:has(#neuro-toggle-input:checked) .send-btn:not(:disabled) {
    background-color: rgba(255, 107, 59, 0.85);
    border-left-color: rgba(255, 107, 59, 0.9);
}

.send-action-wrapper:has(#neuro-toggle-input:checked) .send-btn:hover:not(:disabled) {
    background-color: var(--color-neuro);
    box-shadow: 0 0 20px rgba(255, 107, 59, 0.5);
}

/* ПОДМЕНА ИКОНОК */
.icon-stars { display: none; }
.send-action-wrapper:has(#neuro-toggle-input:checked) .icon-plane { display: none; }
.send-action-wrapper:has(#neuro-toggle-input:checked) .icon-stars { display: block; }

/* Анимации клика */
.send-btn.anim-click:not(:disabled) { animation: send-btn-pulse 0.8s ease-out forwards; }
.send-action-wrapper:has(#neuro-toggle-input:checked) .send-btn.anim-click:not(:disabled) {
    animation: neuro-btn-pulse 0.8s ease-out forwards;
}

.token-counter { font-size: 14px; font-weight: 700; color: inherit; display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.token-counter::after { content: ''; display: block; width: 1px; height: 16px; background-color: currentColor; opacity: 0.3; }

.tool-btn { background: transparent; border: none; color: var(--color-text-menu-muted); cursor: pointer; padding: 6px 10px; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; transition: all var(--transition-fast); }
.tool-btn:hover { color: var(--color-text-primary); }
.tool-btn.active-display { color: var(--color-text-primary); }

.creative-btn { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--color-text-muted); cursor: pointer; padding: 6px 12px; border-radius: 20px; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; transition: all var(--transition-fast); }
.creative-btn:hover { background: rgba(255, 255, 255, 0.08); color: var(--color-text-primary); border-color: var(--color-border-hover); }

/* === НОВЫЕ СТИЛИ: ICON PANELS & DROPDOWNS === */
body::after { 
    content: ''; position: fixed; top: 0; left: 0; width: 100vw; 
    height: 100vh; height: 100dvh; 
    background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(2px); pointer-events: none; z-index: 90; opacity: 0; transition: opacity 0.2s ease; 
}
body:has(.tool-wrapper.show-popup)::after { opacity: 1; pointer-events: auto; }

        .floating-input-island:has(.tool-wrapper.show-popup) .input-core > *:not(.tool-wrapper.show-popup):not(:has(.tool-wrapper.show-popup)),
        .floating-input-island:has(.tool-wrapper.show-popup) .input-main-col > *:not(.tool-wrapper.show-popup):not(:has(.tool-wrapper.show-popup)),
        .floating-input-island:has(.tool-wrapper.show-popup) .creative-tray > *:not(.tool-wrapper.show-popup):not(:has(.tool-wrapper.show-popup)) {
            opacity: 0.15; pointer-events: none; transition: opacity 0.2s ease;
        }

.tool-wrapper.show-popup { opacity: 1 !important; pointer-events: auto !important; }

.tool-wrapper { position: relative; display: inline-flex; align-items: center; margin: 0; padding: 0; z-index: 1; }
.tool-wrapper.show-popup { z-index: 100; }

/* Класс-предохранитель для принудительного закрытия панелей при ховере на десктопе */
.tool-wrapper.hide-hover .icon-panel-popup,
.tool-wrapper.hide-hover .dropdown-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* === POPUPS & PANELS (FIXED VISIBILITY & POSITION & HOVER DELAYS) === */

/* === КЛАССИЧЕСКИЕ ПАНЕЛИ: СЕТКА И ГЕОМЕТРИЯ (С ПРЕМИУМ-АНИМАЦИЕЙ) === */
.icon-panel-popup, .dropdown-menu {
    position: absolute !important;
    bottom: calc(100% + 12px);
    left: 50%;
    
    background: #1a1a1f !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: var(--radius-md);
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
    padding: 16px !important;
    
    display: flex !important;
    flex-direction: column !important;
    z-index: 20000 !important;

    /* Анимация: начальное состояние (без задержки, чтобы мгновенно закрывалось при уходе мыши) */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(10px) scale(0.95);
    transform-origin: bottom center; /* Точка трансформации для красивого масштабирования */
    transition: opacity 0.25s var(--transition-bounce), transform 0.25s var(--transition-bounce), visibility 0.25s;
    transition-delay: 0s;
}



/* Состояние открытия ПО КЛИКУ (.show-popup) - БЕЗ ЗАДЕРЖКИ */
.tool-wrapper.show-popup .icon-panel-popup,
.tool-wrapper.show-popup .dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) scale(1);
    transition-delay: 0s; /* Мгновенное открытие */
}

/* МОСТИК: Работает только на десктопе */
.tool-wrapper::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 120%;
    height: 16px;
    background: transparent;
    pointer-events: none;
    z-index: 19999;
}

.tool-wrapper:hover::after,
.tool-wrapper.show-popup::after {
    pointer-events: auto;
}

/* === МОБИЛЬНЫЙ ФИКС (ТОЛЬКО ДЛЯ ЭКРАНОВ < 768px) === */
@media (max-width: 768px) {
    /* Тотальное уничтожение всех CSS-ловушек (Containing Blocks) навсегда, а не только по клику */
    .chat-layout,
    .generator-bottom-wrapper,
    .floating-input-island,
    .input-core,
    .input-main-col,
    .creative-tray,
    .faces-group,
    .tool-wrapper,
    .technical-tray {
        transform: none !important;
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        will-change: auto !important;
    }

    /* Единое жесткое позиционирование для ВСЕХ панелей и дропдаунов на мобилках */
    .icon-panel-popup, 
    .dropdown-menu,
    #composition-aesthetics-tool .icon-panel-popup,
    #ai-model-tool .icon-panel-popup,
    #faces-tool .icon-panel-popup,
    #aspect-ratio-tool .dropdown-menu {
        position: fixed !important;
        bottom: 120px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        box-sizing: border-box !important;
        transform: translateY(15px) scale(0.95) !important;
        transform-origin: bottom center !important;
        z-index: 999999 !important;
    }

    /* Состояние открытой панели */
    .tool-wrapper.show-popup .icon-panel-popup,
    .tool-wrapper.show-popup .dropdown-menu,
    #composition-aesthetics-tool.show-popup .icon-panel-popup,
    #ai-model-tool.show-popup .icon-panel-popup,
    #faces-tool.show-popup .icon-panel-popup { 
        transform: translateY(0) scale(1) !important; 
    }

    /* Отключаем мостик на мобилках, он там не нужен */
    .tool-wrapper::after {
        display: none !important;
    }

    /* Жестко снимаем любые транформы-ловушки с инпута при клике */
    .floating-input-island:focus-within {
        transform: none !important;
        box-shadow: none !important;
    }
}

/* СЕТКА (Аккуратные плитки) */
.icon-panel-popup {
    width: 480px !important;
    flex-direction: column !important;
    gap: 16px !important;
    max-height: 60vh;
    overflow-y: auto;
}

.icon-panel-group { display: flex; flex-direction: column; gap: 8px; }
.icon-panel-group-title { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--color-text-muted); padding-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,0.05); }

.icon-panel-buttons {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
}

.icon-panel-btn {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 72px !important;
    padding: 6px !important;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--color-text-muted);
}

.icon-panel-btn:hover { background: rgba(59, 156, 255, 0.1); border-color: rgba(59, 156, 255, 0.3); color: var(--color-text-primary); }
.icon-panel-btn.selected { background: rgba(59, 156, 255, 0.15); border-color: var(--color-blue-bright); color: var(--color-blue-bright); }
.icon-panel-btn.selected[data-category="model"] { border: 2px solid var(--color-blue-bright) !important; background-color: rgba(59, 156, 255, 0.1) !important; color: var(--color-text-primary); }

.icon-panel-btn-icon { 
    width: 32px !important; 
    height: 32px !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0; 
}
.icon-panel-btn-icon svg { 
    width: 24px !important; 
    height: 24px !important; 
    stroke: currentColor !important; 
    stroke-width: 1.5; 
    fill: none; 
}
.icon-panel-btn-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }

.icon-panel-btn-text { font-size: 9px !important; font-weight: 500; text-align: center; line-height: 1.1; color: var(--color-text-primary); }

/* Стили вкладок */
.icon-panel-tabs { display: flex; gap: 4px; padding: 0 4px 8px 4px; border-bottom: 1px solid rgba(255,255,255,0.05); margin-bottom: 8px; overflow-x: auto; }
.icon-panel-tab { font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 4px 8px; cursor: pointer; color: var(--color-text-muted); border-radius: var(--radius-sm); transition: all 0.2s; white-space: nowrap; }
.icon-panel-tab:hover { color: var(--color-text-primary); }
.icon-panel-tab.active { background: rgba(59, 156, 255, 0.15); color: var(--color-blue-bright); }
.icon-panel-tab-content { display: none; }
.icon-panel-tab-content.active { display: block; }

/* === ЖЕСТКОЕ ПОЗИЦИОНИРОВАНИЕ (ЗАЩИТА ОТ ВЫЛЕТА) С ЕДИНЫМИ АНИМАЦИЯМИ И ЗАДЕРЖКОЙ === */

/* Композиция и эстетика (самая левая) — прижимаем к левому краю */
#composition-aesthetics-tool .icon-panel-popup { 
    left: 0 !important; 
    transform: translateY(10px) scale(0.95); 
    transform-origin: bottom left;
}

#composition-aesthetics-tool.show-popup .icon-panel-popup { 
    transform: translateY(0) scale(1); 
    transition-delay: 0s;
}

/* Модели (самая левая в верхнем ряду) — прижимаем к левому краю */
#ai-model-tool .icon-panel-popup { 
    left: 0 !important; 
    right: auto !important; 
    transform: translateY(10px) scale(0.95); 
    transform-origin: bottom left;
    width: 400px !important;
}
#ai-model-tool .icon-panel-buttons { grid-template-columns: repeat(3, 1fr) !important; }

#ai-model-tool.show-popup .icon-panel-popup { 
    transform: translateY(0) scale(1); 
    transition-delay: 0s;
}

/* Пропорции (соотношение сторон) — делаем сетку компактнее, центрируем по умолчанию */
#aspect-ratio-tool .icon-panel-popup { 
    width: 380px !important; 
}

/* ВЫПАДАЮЩИЕ СПИСКИ (Ratio, Res, Format) */
.dropdown-menu {
    width: auto !important;
    min-width: 150px;
    padding: 8px;
}
.dropdown-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius-sm); cursor: pointer; color: #fff; font-size: 13px; }
.dropdown-item:hover { background: var(--color-bg-hover); }
.dropdown-item.selected { color: var(--color-blue-bright); background: rgba(59, 156, 255, 0.1); }


/* === LEGACY DRUM STYLES === */
.drum-popup { position: absolute; bottom: calc(100% + 16px); left: 50%; transform: translateX(-50%) translateY(15px) scale(0.9); background: linear-gradient(180deg, #1a1a1f 0%, #0f0f14 100%); border-radius: var(--radius-md); box-shadow: 0 24px 64px rgba(0,0,0,0.9), 0 0 0 1px var(--color-border-default); padding: 10px; display: none; /* Скрыто по умолчанию, управляется JS */ flex-direction: column; opacity: 0; pointer-events: none; z-index: 300; transition: opacity 0.15s ease, transform var(--transition-bounce); }
.tool-wrapper.show-drum-popup .drum-popup { display: flex; opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0) scale(1); }
.drum-popup.multi-popup { width: max-content; padding: 16px; white-space: nowrap; }
.multi-columns-container { display: flex; gap: 16px; }
.drum-column { display: flex; flex-direction: column; align-items: center; border-right: 1px solid rgba(255,255,255,0.05); padding-right: 16px; flex-shrink: 0; }
.drum-column:last-child { border-right: none; padding-right: 0; }
.drum-popup-title, .col-title { font-size: 10px; font-weight: 600; text-transform: uppercase; color: var(--color-text-muted); text-align: center; opacity: 0.8; margin-bottom: 8px; }
.drum-arrow { background: transparent; border: none; color: var(--color-text-muted); cursor: pointer; padding: 2px; transition: color var(--transition-fast); }
.drum-arrow:hover { color: var(--color-text-primary); }
.drum-viewport { --item-h: var(--drum-item-height); position: relative; width: var(--drum-item-width); height: calc(var(--item-h) * 3); overflow: hidden !important; margin: 6px 0; mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent); -webkit-mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent); }
.drum-loupe-glass { position: absolute; top: var(--item-h); left: 0; width: 100%; height: var(--item-h); background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); border-radius: 8px; z-index: 1; pointer-events: none; box-shadow: inset 0 0 0 1px var(--color-border-default); }
.drum-track { position: relative; z-index: 2; width: 100%; transform: translateY(calc(var(--item-h) - (var(--drum-index, 0) * var(--item-h)))); transition: transform var(--transition-bounce); will-change: transform; }
.drum-item { height: var(--item-h); width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; opacity: 0.3; transform: scale(0.85); transition: all var(--transition-fast); cursor: pointer; color: rgba(255,255,255,0.4); }
.drum-item.active { opacity: 1; transform: scale(1); color: var(--color-text-primary); }
.placeholder-box { width: 56px; height: 32px; display: flex; align-items: center; justify-content: center; }
.drum-item img { max-width: 56px; height: 32px; object-fit: contain; border-radius: var(--radius-sm); }
.drum-item svg { max-width: 56px; height: 32px; stroke: currentColor; stroke-width: 1.5; }
.drum-item span { font-size: 10px; font-weight: 600; text-transform: uppercase; text-align: center; padding: 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.face-thumb { width: 44px; height: 44px; background-size: auto 100%; background-position: 0% center; background-repeat: no-repeat; border-radius: var(--radius-md); box-shadow: 0 4px 12px rgba(0,0,0,0.4); transition: filter 0.3s ease; }
.drum-item:not(.active) .face-thumb { filter: brightness(0.4) grayscale(50%); }
@keyframes pan-face-strip { 0% { background-position: 0% center; } 50% { background-position: 100% center; } 100% { background-position: 0% center; } }
.drum-item.active .face-thumb { animation: pan-face-strip 6s infinite ease-in-out; }

/* === ТЕГИ === */
.active-modifiers-tray { display: flex; flex-wrap: wrap; gap: 6px; min-height: 0; }
.active-modifiers-tray:empty { display: none; }
.modifier-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: rgba(59, 156, 255, 0.15); border: 1px solid rgba(59, 156, 255, 0.3); border-radius: 8px; font-size: 10px; line-height: 1.2; font-weight: 600; color: var(--color-blue-bright); animation: tag-pop 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes tag-pop { 0% { transform: scale(0.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.tag-close { cursor: pointer; opacity: 0.6; display: flex; align-items: center; transition: all var(--transition-fast); }
.tag-close:hover { opacity: 1; color: #ffffff; }
.tag-close svg { width: 10px; height: 10px; stroke-width: 2.5; }

/* --- СТАТИЧНЫЙ КЛАСС ДЛЯ КОММЕНТАРИ ИИ --- */
.neuro-comment-box {
    display: inline-block;
    max-width: 100%;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    margin-top: 8px;
    margin-bottom: 8px;
    line-height: 1.4;
    cursor: pointer;
    transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.neuro-comment-box.expanded {
    max-height: 800px;
    -webkit-mask-image: none;
    mask-image: none;
}

.neuro-comment-box.desktop-only { display: inline-block; }
.neuro-comment-box.mobile-only { display: none; }

.selected-faces-preview { display: flex; gap: -6px; align-items: center; margin-left: 2px; }
.selected-face-circle { width: 28px; height: 28px; border-radius: 50%; background-size: cover; background-position: left center; background-repeat: no-repeat; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 2px 6px rgba(0,0,0,0.5); cursor: pointer; transition: all 0.2s ease; animation: tag-pop 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); }					
.selected-face-circle:hover { border-color: var(--color-blue-bright); transform: scale(1.15) translateY(-2px); z-index: 10; }

/* === КНОПКА СКРОЛЛА ВНИЗ (УНИВЕРСАЛЬНАЯ) === */
.return-anchor-btn {
    position: absolute; top: -56px; right: 0; width: 44px; height: 44px; border-radius: 50%;
    background: rgba(59, 156, 255, 0.2); 
    border: 1px solid rgba(59, 156, 255, 0.4); 
    color: var(--color-blue-bright); 
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.6); opacity: 0; transform: translateY(10px) scale(0.9);
    pointer-events: none; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 101;
}
.return-anchor-btn.visible { opacity: 0.8; transform: translateY(0) scale(1); pointer-events: auto; } 
.return-anchor-btn.visible:hover {
    opacity: 1;
    background: var(--color-blue-bright); 
    border-color: var(--color-blue-bright); 
    color: var(--color-text-primary); 
    box-shadow: 0 12px 32px rgba(0,0,0,0.8), 0 0 15px rgba(59,156,255,0.4);
}
.return-anchor-btn svg { width: 20px; height: 20px; stroke-width: 2.5; }

/* =====================================================================
=== ДИЗАЙН КАРТОЧЕК ЛЕНТЫ ===
===================================================================== */

.task-card {
    position: relative;
    width: 100%; max-width: 1024px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    display: flex; flex-direction: row;
    padding: 16px; gap: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    transition: background-color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease, transform 0.4s ease;
}

/* === ВЫНЕСЕННАЯ ПЛАШКА МЕТА-ДАННЫХ === */
.task-meta-top {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 20;
    display: flex; 
    gap: 12px; 
    font-size: 11px; 
    color: var(--color-text-muted); 
    align-items: center; 
    font-weight: 500; 
    text-transform: uppercase;
}

/* === ВКЛАДКИ ИТЕРАЦИЙ (НЕЙРОКОНТРОЛЬ) === */
.task-iterations-tabs {
    position: absolute !important;
    top: -12px;
    right: 16px;
    display: flex;
    gap: 4px;
    z-index: 50 !important;
}

.iteration-tab {
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-default);
    color: var(--color-text-muted);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.iteration-tab:hover {
    color: var(--color-text-primary);
    border-color: var(--color-border-hover);
    transform: translateY(-2px);
}

/* 1. Критическая ошибка (Оранжевый) */
.iteration-tab.tab-critical {
    background: rgba(255, 152, 0, 0.1) !important;
    border: 1px solid rgba(255, 152, 0, 0.4) !important;
    color: #ff9800 !important;
}

/* 2. Мелкие недочеты / Обычный фейл (Нейтрально-серый) */
.iteration-tab.tab-minor {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: var(--color-text-muted) !important;
}

/* 3. Успех (Голубой) */
.iteration-tab.tab-success {
    background: rgba(33, 150, 243, 0.1) !important;
    border: 1px solid rgba(33, 150, 243, 0.4) !important;
    color: #2196f3 !important;
}

/* Вспышка успеха */
.iteration-tab.tab-success-flash {
    animation: success-flash 1.5s ease-out forwards !important;
}
@keyframes success-flash {
    0% { background: rgba(33, 150, 243, 0.8); border-color: #2196f3; color: #fff; box-shadow: 0 0 12px rgba(33, 150, 243, 0.8); }
    100% { background: rgba(33, 150, 243, 0.1); border-color: rgba(33, 150, 243, 0.4); color: #2196f3; box-shadow: 0 0 0 transparent; }
}

/* ВЫДЕЛЕННАЯ (АКТИВНАЯ) ВКЛАДКА */
.iteration-tab.active {
    transform: translateY(-2px) !important; 
    font-weight: bold !important;
    background: #2196f3 !important; 
    color: #fff !important;
    border-color: #2196f3 !important;
    box-shadow: 0 0 10px rgba(33, 150, 243, 0.5); 
}

.iteration-tab.tab-critical.active {
    background: #ff9800 !important; 
    color: #fff !important;
    border-color: #ff9800 !important;
    box-shadow: 0 0 10px rgba(255, 152, 0, 0.5);
}

.iteration-tab.tab-minor.active {
    background: #6b6b6b !important; 
    color: #fff !important;
    border-color: #6b6b6b !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.iteration-tab.tab-success.active,
.iteration-tab.tab-success-flash.active {
    background: #2196f3 !important; 
    color: #fff !important;
    border-color: #2196f3 !important;
    box-shadow: 0 0 10px rgba(33, 150, 243, 0.5);
}

/* 4. Генерация (Пульсация лоадера) */
.iteration-tab.neuro-generating-tab {
    background: rgba(255, 152, 0, 0.1) !important;
    border-color: transparent !important; 
    padding: 0 8px !important;
    animation: neuro-pulse 1.5s infinite !important;
}

.iteration-tab.neuro-generating-tab.active {
    background: rgba(255, 152, 0, 0.2) !important;
    border-color: transparent !important; 
    box-shadow: none !important; 
}

@keyframes neuro-pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.8), 0 0 10px rgba(255, 152, 0, 0.4); }
    70% { box-shadow: 0 0 0 8px rgba(255, 152, 0, 0), 0 0 20px rgba(255, 152, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0), 0 0 10px rgba(255, 152, 0, 0); }
}

@keyframes premium-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.neuro-spinner {
    width: 14px !important; 
    height: 14px !important;
    border-radius: 50%;
    border: none !important;
    outline: none !important;
    background: conic-gradient(from 0deg, transparent 0%, rgba(255,152,0,0.2) 30%, #ff9800 80%, #ffffff 100%) !important;
    -webkit-mask: radial-gradient(transparent 40%, black 45%) !important;
    mask: radial-gradient(transparent 40%, black 45%) !important;
    animation: premium-spin 1s linear infinite;
    flex-shrink: 0;
}

/* === ОВЕРЛЕЙ РАЗМЫТИЯ (ПРОЦЕСС НЕЙРОКОНТРОЛЯ) === */
.task-card.state-neuro-active .task-left-col,
.task-card.state-neuro-active .task-right-col {
    filter: blur(4px);
    opacity: 0.5;
    pointer-events: none;
    transition: all 0.5s ease;
}

/* КОМПАКТНЫЙ DASHBOARD ОВЕРЛЕЙ */
.neuro-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px; 
    padding: 12px;
    z-index: 40 !important;
    border-radius: var(--radius-lg);
    background: rgba(10, 10, 14, 0.75); 
}

.neuro-overlay-title {
    color: var(--color-neuro);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(255, 107, 59, 0.5);
}

.neuro-overlay-timer {
    font-size: 24px;
    font-weight: 800;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 16px rgba(59, 156, 255, 0.5);
    margin-top: -2px;
}

/* ГОРИЗОНТАЛЬНАЯ КАПСУЛА СТАТУСА */
.neuro-status-capsule {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 107, 59, 0.3);
    padding: 4px 12px;
    border-radius: 20px;
    margin-top: 4px;
    margin-bottom: 4px;
}

/* Уменьшенный спиннер для капсулы */
.neuro-status-capsule .loader-premium-spinner {
    width: 20px;
    height: 20px;
    border-width: 2px;
}

.neuro-overlay-status {
    font-size: 11px;
    color: var(--color-neuro);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin: 0;
}

.neuro-overlay-status.anim-fade-out {
    opacity: 0;
    transform: translateY(-4px);
    transition: all 0.3s ease;
}

.neuro-overlay-status.anim-fade-in {
    animation: status-fly-in 0.4s ease forwards;
}

@keyframes status-fly-in {
    0% { opacity: 0; transform: translateY(4px); }
    100% { opacity: 1; transform: translateY(0); }
}

.btn-cancel-neuro {
    background: rgba(255, 74, 74, 0.1);
    border: 1px solid rgba(255, 74, 74, 0.4);
    color: var(--color-error);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-cancel-neuro:hover {
    background: var(--color-error);
    color: #fff;
    box-shadow: 0 0 16px rgba(255, 74, 74, 0.4);
}

/* === АНИМАЦИИ РОЖДЕНИЯ И СМЕРТИ === */
.task-card.spawning { animation: spawn-flash 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards !important; }
@keyframes spawn-flash {
    0% { opacity: 0; transform: translateY(30px); box-shadow: 0 0 60px rgba(59, 156, 255, 0.6); background-color: rgba(59, 156, 255, 0.3); border-color: rgba(59, 156, 255, 0.8); }
    50% { opacity: 1; transform: translateY(0); box-shadow: 0 0 30px rgba(59, 156, 255, 0.3); background-color: rgba(59, 156, 255, 0.1); border-color: rgba(59, 156, 255, 0.4); }
    100% { box-shadow: 0 4px 20px rgba(0,0,0,0.2); background-color: var(--color-bg-secondary); border-color: var(--color-border-default); }
}

.task-card.dying { animation: death-flash 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards !important; overflow: hidden; pointer-events: none; }
@keyframes death-flash {
    0% { opacity: 1; transform: scale(1); margin-bottom: 16px; padding: 16px; border-width: 1px; }
    30% { opacity: 0.7; transform: scale(0.98); background-color: rgba(255, 74, 74, 0.2); border-color: rgba(255, 74, 74, 0.5); box-shadow: 0 0 40px rgba(255, 74, 74, 0.4); }
    100% { opacity: 0; transform: scale(0.9); max-height: 0 !important; margin-bottom: 0; padding: 0; border-width: 0; box-shadow: none; }
}

/* === ЦВЕТОВЫЕ СТЕЙТЫ КАРТОЧКИ === */
.task-card.state-active:not(.task-card-upscale) { border-color: rgba(59, 156, 255, 0.6); animation: card-pulse-blue 2s infinite alternate ease-in-out; }
@keyframes card-pulse-blue { 0% { background-color: var(--color-bg-secondary); box-shadow: 0 4px 20px rgba(0,0,0,0.2), 0 0 5px rgba(59,156,255,0.1) inset; } 100% { background-color: rgba(12, 28, 48, 0.95); box-shadow: 0 4px 30px rgba(59,156,255,0.2), 0 0 25px rgba(59,156,255,0.15) inset; } }
.task-card.state-active .task-prompt-text, .task-card.state-active .task-meta-top { color: #cce0ff; transition: color 0.5s ease; }
.task-card.state-error { border-color: rgba(255, 74, 74, 0.6); background-color: rgba(40, 12, 12, 0.95); box-shadow: 0 4px 30px rgba(255, 74, 74, 0.15), 0 0 25px rgba(255, 74, 74, 0.1) inset; }
.task-card.state-error .task-prompt-text, .task-card.state-error .task-meta-top { color: #ffcccc; transition: color 0.5s ease; }



/* === ЛЕВАЯ КОЛОНКА === */
.task-left-col { width: 120px; display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.task-media-box { width: 120px; height: 120px; border-radius: var(--radius-md); background: #000000; border: 1px solid rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.task-media-box img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s ease; border-radius: inherit; }
.task-media-box img.loaded { opacity: 1; }

.loader-premium-spinner { 
    width: 40px; 
    height: 40px; 
    border-radius: 50%; 
    background: conic-gradient(from 0deg, transparent 0%, rgba(59, 156, 255, 0.4) 30%, var(--color-blue-bright) 70%, #ffffff 100%); 
    -webkit-mask: radial-gradient(transparent 50%, black 52%); 
    mask: radial-gradient(transparent 50%, black 52%); 
    animation: premium-spin 1s linear infinite; 
}

.media-error { color: var(--color-error); display: flex; flex-direction: column; align-items: center; gap: 8px; }

.task-actions-square { display: flex; gap: 4px; width: 100%; height: 26px; }
.sq-action-btn { flex: 1; height: 100%; background: transparent; border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); color: var(--color-text-muted); display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; transition: all 0.2s ease; }
.sq-action-btn svg { width: 14px; height: 14px; stroke-width: 2; }
.sq-action-btn:hover:not(:disabled) { background: rgba(255,255,255,0.05); color: var(--color-text-primary); border-color: rgba(255,255,255,0.3); }
.sq-action-btn.primary:hover:not(:disabled) { color: var(--color-blue-bright); border-color: rgba(59, 156, 255, 0.5); background: rgba(59, 156, 255, 0.1); }
.sq-action-btn:disabled { opacity: 0.25; cursor: not-allowed; border-color: transparent; }

/* === ПРАВАЯ КОЛОНКА === */
.task-right-col { flex: 1; display: flex; flex-direction: column; min-width: 0; justify-content: space-between; }
.task-right-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.task-faces { display: flex; gap: 6px; }
.task-face-thumb { width: 26px; height: 26px; border-radius: 50%; background-size: cover; background-position: left center; background-repeat: no-repeat; border: 1px solid rgba(255,255,255,0.1); cursor: pointer; transition: all 0.2s ease; }
.task-face-thumb:hover { border-color: var(--color-blue-bright); transform: scale(1.15) translateY(-2px); z-index: 10; }

/* [FIX] Стили для заглушки на месте референса в карточке (с data-uri) */
.task-face-placeholder {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, 0.15);
    opacity: 0.5;
    cursor: help;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5 7h14'/%3e%3cpath d='M5 12h14'/%3e%3cpath d='M5 17h8'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
}

.task-timer { font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 4px; }
.task-timer.ticking { color: var(--color-blue-bright); }
.task-close-btn { background: none; border: none; color: inherit; cursor: pointer; padding: 2px; opacity: 0.6; transition: 0.2s; margin-left: 4px; display: flex; align-items: center; }
.task-close-btn:hover { opacity: 1; color: var(--color-error); }

.task-prompt-wrapper { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 12px; }
.task-prompt-actions { display: flex; flex-direction: row; gap: 6px; flex-shrink: 0; margin-top: 2px; }
.btn-copy-prompt, .btn-edit-prompt { background: none; border: none; color: var(--color-blue-muted); cursor: pointer; padding: 0; display: flex; align-items: center; transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); }
.btn-copy-prompt:hover, .btn-edit-prompt:hover { transform: scale(1.25); color: var(--color-blue-bright); filter: drop-shadow(0 0 8px rgba(59, 156, 255, 0.5)); }

/* Увеличена max-height для раскрытого промпта, чтобы гарантированно влезли все теги. Display block для маски */
.task-prompt-text { flex: 1; display: block; font-size: 13px; line-height: 1.4; color: var(--color-text-primary); cursor: pointer; overflow: hidden; opacity: 0.9; max-height: 54px; -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%); mask-image: linear-gradient(to bottom, black 60%, transparent 100%); transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1); }
.task-prompt-text.expanded { max-height: 800px; opacity: 1; -webkit-mask-image: none; mask-image: none; }

/* Стили для плашек-модификаторов с новой строки */
.task-prompt-text .modifier-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    width: 100%;
}
.task-prompt-text .modifier-tag {
    display: inline-flex;
    margin: 0;
    vertical-align: middle;
}

.task-right-footer { display: flex; justify-content: space-between; align-items: flex-end; margin-top: auto; }
.task-tags { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.task-tags .modifier-tag { animation: none; cursor: default; }
.task-meta-bottom { font-size: 11px; color: var(--color-text-muted); font-weight: 500; white-space: nowrap; margin-left: 16px; opacity: 0.7; padding-bottom: 2px; }

/* === АНИМАЦИИ ПЕРЕНОСА ПРОМПТА === */
@keyframes input-glow-pulse { 
    0% { box-shadow: 0 24px 64px rgba(0, 0, 0, 0.9), 0 -8px 32px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05); transform: translateY(0); } 
    50% { box-shadow: 0 24px 64px rgba(0, 0, 0, 0.95), 0 -12px 36px rgba(0, 0, 0, 0.7), 0 0 20px rgba(59, 156, 255, 0.4), inset 0 0 0 1px rgba(59, 156, 255, 0.5); transform: translateY(-4px); border-color: rgba(59, 156, 255, 0.7); } 
    100% { box-shadow: 0 24px 64px rgba(0, 0, 0, 0.9), 0 -8px 32px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05); transform: translateY(0); } 
}
.floating-input-island.anim-receive-prompt { animation: input-glow-pulse 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.flying-prompt-ghost { position: fixed; z-index: 9999; color: var(--color-blue-bright); font-size: 13px; line-height: 1.4; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; font-weight: 500; text-shadow: 0 4px 12px rgba(0,0,0,0.5); transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1); }


/* === АНИМАЦИЯ ПЕРЕКЛЮЧЕНИЯ ВКЛАДОК === */
.tab-switch-anim {
    animation: tabFadeSlideIn 0.5s ease-out forwards;
}
@keyframes tabFadeSlideIn {
    0% { opacity: 0; transform: translateX(10px); filter: blur(2px); }
    100% { opacity: 1; transform: translateX(0); filter: blur(0px); }
}

/* =====================================================================
=== АДАПТИВНОСТЬ (RESPONSIVE) ===
===================================================================== */
@media (max-width: 1400px) {
    .chat-feed { padding: 10px 20px 0 20px; }
    .generator-bottom-wrapper { width: calc(100% - 32px); bottom: 16px; }
    .technical-tray { padding: 3px 10px; min-width: 320px; }
    .input-core { padding: 8px; gap: 8px; }
    .task-card { padding: 8px; gap: 8px; }
    .task-left-col { width: 100px; }
    .task-media-box { width: 100px; height: 100px; }
    .send-action-wrapper { width: 120px; }

    .task-card.dying {
        animation: death-flash-1400 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
    }
}

@keyframes death-flash-1400 {
    0% { opacity: 1; transform: scale(1); margin-bottom: 16px; padding: 8px; border-width: 1px; }
    30% { opacity: 0.7; transform: scale(0.98); background-color: rgba(40, 12, 12, 0.2); border-color: rgba(255, 74, 74, 0.5); box-shadow: 0 0 40px rgba(255, 74, 74, 0.4); }
    100% { opacity: 0; transform: scale(0.9); max-height: 0 !important; margin-bottom: 0; padding: 0; border-width: 0; box-shadow: none; }
}


/* Контейнер для вертикального ряда кнопок */
.prompt-side-controls {
    position: absolute;
    left: 8px;
    top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px; /* Расстояние между скрепкой и искрой */
    z-index: 10;
}

/* Сбрасываем старые позиционирования, так как теперь они внутри контейнера */
.attach-btn, .enhance-prompt-btn {
    position: static !important;
    padding: 4px !important;
}

.enhance-prompt-btn {
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* === АДАПТАЦИЯ ДЛЯ СМАРТФОНОВ (MOBILE COMPACT MONOLITH) === */
    @media (max-width: 768px) {
        /* Оставляем 100% только для мобильных, так как там сброшены внешние отступы (padding) */
        .chat-layout {
            height: 100% !important;
            max-height: 100% !important;
        }

		.prompt-meta-icons { position: absolute; top: 72px; left: 11px; display: none; flex-direction: column; gap: 3px; z-index: 10; }
		
        /* [RESTORED] Адаптация хедера для мобильных */
        .app-header .header-right .notification-btn {
            display: none;
        }
        .app-header .header-right #lang-switcher {
            order: 2;
            margin-right: 0;
        }
        .app-header .header-right .balance-pill {
            order: 1;
        }
        .app-header .header-right .user-menu-wrapper {
            order: 3;
        }
        .app-header .header-right .auth-buttons {
            order: 1;
        }
        
        :root {
            --drum-item-height: 44px;
            --drum-item-width: 96px;
        }

        /* Блокировка превью */
        .hover-image-preview { display: none !important; }

        /* Панели и Дропдауны */
        /* --- ЗАМЕНИТЬ ВНУТРИ @media (max-width: 768px) --- */
		
		
		.tool-wrapper::after { display: none !important; }
    
		/* Дополнительно: сбрасываем z-index у родителя, чтобы он не создавал контекст наложения */
		.generator-bottom-wrapper {
			z-index: 10 !important; /* Снижаем, чтобы fixed-элементы были выше */
		}
        
		
        /* --- КОНЕЦ ЗАМЕНЫ --- */

/* Отвязываем якорь от кнопок, чтобы он привязался к родительским треям */
        body .tool-wrapper {
            position: static !important;
        }

        /* Панели всплывают НАД треями и занимают ровно 100% ширины родителя (который на мобилках 100vw) */
        body .icon-panel-popup, 
        body .dropdown-menu,
        body #composition-aesthetics-tool .icon-panel-popup,
        body #ai-model-tool .icon-panel-popup,
        body #faces-tool .icon-panel-popup,
        body #aspect-ratio-tool .dropdown-menu {
            position: absolute !important;
            bottom: calc(100% + 8px) !important;
            left: 0 !important;
            right: 0 !important;
            width: 100% !important;
            max-width: 100vw !important;
            margin: 0 !important;
            border-radius: 0 !important;
            border-left: none !important;
            border-right: none !important;
            box-sizing: border-box !important;
            transform: translateY(15px) scale(0.95) !important;
            transform-origin: bottom center !important;
            z-index: 999999 !important;
        }

        /* Жестко снимаем любые транформы-ловушки с инпута при клике, чтобы панели гарантированно выровнялись по краям экрана */
        .floating-input-island:focus-within {
            transform: none !important;
            box-shadow: none !important;
        }

        /* Состояние открытой панели (возвращаем правильную анимацию с учетом специфичности) */
        body .tool-wrapper.show-popup .icon-panel-popup,
        body .tool-wrapper.show-popup .dropdown-menu,
        body #composition-aesthetics-tool.show-popup .icon-panel-popup,
        body #ai-model-tool.show-popup .icon-panel-popup,
        body #faces-tool.show-popup .icon-panel-popup,
        body #aspect-ratio-tool.show-popup .dropdown-menu { 
            transform: translateY(0) scale(1) !important; 
        }
        
        .icon-panel-popup {
             flex-direction: column !important;
        }

        /* Edge-to-Edge */
        .chat-feed { padding: 10px 0 0 0 !important; gap: 8px !important; }

        /* ПРЕМИАЛЬНАЯ ПОДЛОЖКА-ГЛАССМОРФИЗМ ДЛЯ МОБИЛОК */
        .generator-bottom-wrapper {
            left: 0 !important; transform: none !important;
            padding-top: 0 !important; /* Убрали верхний отступ для слияния с треем */
            padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
            gap: 0 !important; width: 100% !important; max-width: none !important;
            bottom: 0 !important; z-index: 100 !important;
            
            background: rgba(15, 15, 20, 0.95) !important; /* Более плотный фон */
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            
            /* Яркая отделяющая линия и усиленная тень, чтобы оторвать блок от ленты */
            border-top: 1px solid rgba(59, 156, 255, 0.25) !important;
            box-shadow: 0 -15px 40px rgba(0,0,0,0.95), 0 -2px 15px rgba(59, 156, 255, 0.1) !important;
            border-radius: 0 !important;
        }

        /* Переносим блюр на псевдоэлемент (безопасный метод) */
        .generator-bottom-wrapper::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            z-index: -1;
            pointer-events: none;
        }

        /* Жестко поднимаем активную кнопку над всеми остальными соседями */
        .tool-wrapper.show-popup {
            z-index: 999999 !important;
        }
        
        .technical-tray {
            position: relative !important;
            z-index: 2 !important; 
            border: none !important;
            /* Выделяем технический трей собственным светлым фоном как шапку панели */
            background: rgba(255, 255, 255, 0.03) !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
            width: 100% !important; height: auto !important; min-height: 32px; 
            padding: 4px 8px !important; /* Вернули воздух по бокам */
            box-sizing: border-box !important; 
            border-radius: 0 !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            display: flex !important;
            justify-content: space-between !important;
            gap: 4px !important; 
            align-items: center !important;
        }

        .technical-tray .tool-wrapper {
            flex: 1 !important; /* Позволяем кнопкам равномерно распределиться по всей ширине */
        }

        /* Убираем жесткую ширину в 120px у названия модели на мобилках */
        #ai-model-tool .active-val {
            width: auto !important;
            max-width: 90px !important;
        }

        /* Дополнительно поджимаем внутренние поля самих кнопок для компактности */
        .technical-tray .tool-btn {
            padding: 4px 6px !important;
            gap: 4px !important;
        }

        .floating-input-island {
            position: relative !important;
            z-index: 1 !important;
            /* Добавляем темный фон и внутреннюю тень, чтобы инпут выглядел как поле ввода */
            border: none !important;
            border-top: 1px solid rgba(0, 0, 0, 0.5) !important;
            background-color: rgba(0, 0, 0, 0.25) !important;
            box-shadow: inset 0 4px 15px rgba(0, 0, 0, 0.3) !important;
            width: 100% !important;
            border-radius: 0 !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }

        /* FIX: Динамически поднимаем остров ввода, когда внутри него открыт попап */
        .floating-input-island:has(.show-popup) {
            z-index: 3 !important;
        }

        /* Гибрид: Схлопываем промпт до 1 строки при открытом попапе */
        .floating-input-island:has(.show-popup) .prompt-area {
            max-height: 64px !important; /* Высота 1 строки с учетом паддингов (равна min-height) */
            overflow-y: hidden !important;
        }

        .input-main-col {
            display: contents !important;
        }

        .input-core {
            display: grid !important;
            grid-template-areas: 
                "top-tray top-tray"
                "prompt prompt"
                "bottom-left bottom-right";
            grid-template-columns: 1fr auto !important;
            padding: 8px 12px !important;
            gap: 4px !important;
        }

        .unified-top-tray { grid-area: top-tray; margin-bottom: 4px; }
        .prompt-input-wrapper { grid-area: prompt; width: 100% !important; }
        
        .creative-tray { 
            grid-area: bottom-left; 
            display: flex !important; 
            align-items: center !important; 
            gap: 8px !important; 
            padding: 0 !important; 
            margin: 0 !important;
            z-index: auto !important;
            position: static !important; /* ВАЖНО: отключаем relative, чтобы панели тянулись на весь экран */
        }
        
        .send-col { grid-area: bottom-right; }

        .prompt-area {
            min-height: 44px !important; 
            padding-top: 8px !important;
            padding-bottom: 8px !important;
        }
        .attach-btn { top: 4px !important; }
        .enhance-prompt-btn { top: 4px !important; left: auto !important; right: 8px !important; }

        .creative-btn span { display: none !important; }
        .creative-btn { padding: 8px !important; background: rgba(255,255,255,0.05) !important; }
        
        .faces-group { 
            margin-left: 0 !important;
            gap: 8px !important; 
            position: static !important; /* ВАЖНО: отключаем relative */
        }
        
        .selected-faces-preview { margin-left: 0 !important; }
        .selected-face-circle { width: 24px; height: 24px; }

        .send-row { margin-top: 0 !important; gap: 8px !important; width: auto !important; }
        
        .send-action-wrapper { 
            width: 125px !important; /* Даем чуть больше места монолиту для тумблера */
            gap: 0 !important;
            flex-direction: row !important; /* Утверждаем горизонтальную верстку */
            border-radius: var(--radius-md) !important;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255,255,255,0.05) !important;
            height: 48px !important;
        }
        
        .neuro-toggle-label {
            width: 32px !important;
            height: 48px !important;
            border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
            background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%) !important;
            border: none !important; 
            border-right: 1px solid rgba(0,0,0,0.5) !important;
        }

        .neuro-toggle-label::after { content: none !important; display: none !important; }
        
        .send-btn { 
            height: 48px !important;
            padding: 4px 8px !important;
            border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
            border: none !important;
        }
        
        button.batch-display {
            height: 48px !important;
            border-radius: var(--radius-md) !important;
        }
        
        .send-btn:not(:disabled) {
            background: linear-gradient(180deg, var(--color-blue-muted) 0%, rgba(59, 156, 255, 0.4) 100%) !important;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.1) !important;
        }
        
        /* Состояние нейроконтроля для мобилок (перебиваем !important) */
        .send-action-wrapper:has(#neuro-toggle-input:checked) .neuro-toggle-label {
            background: linear-gradient(180deg, rgba(255, 107, 59, 0.15) 0%, rgba(255, 107, 59, 0.05) 100%) !important;
        }
        
        .send-action-wrapper:has(#neuro-toggle-input:checked) .send-btn:not(:disabled) {
            background: linear-gradient(180deg, rgba(255, 107, 59, 0.85) 0%, rgba(255, 107, 59, 0.5) 100%) !important;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.2) !important;
        }
        
        .token-counter { 
            font-size: 15px !important; 
            font-weight: 800 !important; 
        }
        
        .send-btn-icon-container { display: flex; align-items: center; justify-content: center; }
        .send-btn-icon-container svg { width: 22px !important; height: 22px !important; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }

        /* Карточки */
        .task-card {
            border-left: none !important; border-right: none !important;
            border-radius: 0 !important; /* [ИЗМЕНЕНИЕ #2] Убраны закругления у карточек */
            width: 100% !important; margin-top: 28px !important; margin-bottom: 4px !important;
            flex-wrap: wrap !important;
        }
		
		

        .task-meta-top {
            position: absolute !important; top: -22px !important; left: 8px !important; 
            right: auto !important; background: rgba(15, 15, 20, 0.85) !important;
            padding: 2px 8px !important; border-radius: 6px !important;
            border: 1px solid var(--color-border-default) !important;
        }

        .task-prompt-actions { flex-direction: column !important; gap: 8px !important; }

        .neuro-comment-box.mobile-only {
            display: block !important; width: 100% !important;
            padding: 8px 12px !important; background: rgba(255, 255, 255, 0.05) !important;
            border: none !important; border-left: 3px solid !important;
            font-size: 11px !important; max-height: 44px;
            mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
        }
        
        .neuro-comment-box.mobile-only.expanded {
            max-height: 800px !important;
            -webkit-mask-image: none !important;
            mask-image: none !important;
        }
        
        .neuro-comment-box.desktop-only {
            display: none !important;
        }
        
        .enhance-prompt-btn {
            top: 36px !important;
            left: 4px !important;
            right: auto !important;
            width: 24px;
            height: 24px;
            font-size: 16px !important;
        }

        .prompt-area {
            min-height: 44px !important;
            padding-left: 36px !important;
            padding-top: 8px !important;
            padding-bottom: 8px !important;
        }

        .selected-faces-preview {
            margin-left: 4px !important;
        }   
        
        .task-card .neuro-comment-box:not(.mobile-only) {
            display: none !important;
        }

        .prompt-area {
            min-height: 64px !important;
            max-height: 250px !important; /* Классический метод: ограничение роста поля до ~10 строк */
            padding-left: 40px !important;
            padding-top: 10px !important;
            transition: max-height 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
        }

        .prompt-side-controls {
            gap: 2px !important; 
            top: 6px !important;
            left: 6px !important;
        }
        
        .enhance-prompt-btn {
            font-size: 16px !important;
        }

        /* [UPD] Кнопка скролла вниз (Язычок) для мобильных */
        .return-anchor-btn {
            top: -28px !important;
            right: auto !important;
            left: 50% !important;
            transform: translateX(-50%) translateY(28px) scale(0.9) !important;
            width: 80px !important;
            height: 28px !important;
            border-radius: 16px 16px 0 0 !important;
            background: var(--color-blue-bright) !important; /* Сразу фирменно-голубой фон */
            backdrop-filter: blur(16px) !important;
            -webkit-backdrop-filter: blur(16px) !important;
            border: 1px solid rgba(59, 156, 255, 0.7) !important; /* Яркая рамка для отделения */
            border-bottom: none !important;
            color: var(--color-text-primary) !important; /* Белая иконка */
            box-shadow: 0 -4px 12px rgba(0,0,0,0.4) !important;
            z-index: -1 !important;
        }
        .return-anchor-btn.visible {
            transform: translateX(-50%) translateY(0) scale(1) !important;
            opacity: 1 !important; /* Сразу полностью непрозрачный */
        }
        .return-anchor-btn.visible:hover {
             /* Убираем лишние стили, так как кнопка уже яркая, добавляем тень для фидбека */
            box-shadow: 0 -4px 20px rgba(0,0,0,0.6), 0 0 15px rgba(59,156,255,0.4) !important;
        }
        .return-anchor-btn svg {
            width: 18px !important;
            height: 18px !important;
        }
		
		/* === ПЕРЕНОС КРЕСТИКА УДАЛЕНИЯ КАРТОЧКИ === */
        .desktop-close-btn { display: none !important; }
        
        .mobile-close-btn {
            display: flex !important;
            position: absolute !important;
            right: 8px !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            margin-left: 0 !important;
            padding: 10px !important; /* Удобная зона тапа */
            width: auto !important;
            height: auto !important;
            z-index: 50 !important;
            
            /* Премиальная подложка и рамка */
            background: var(--color-bg-secondary) !important; 
            border-radius: 50% !important;
            box-shadow: -8px 0 16px rgba(0,0,0,0.4) !important;
            color: var(--color-text-muted) !important;
            border: 1px solid var(--color-border-default) !important;
        }

        .mobile-close-btn svg {
            width: 16px !important;
            height: 16px !important;
        }

        /* Защита контента от перекрытия парящим крестиком */
        .task-right-col {
            padding-right: 36px !important;
        }
		
		/* [NEW] FIX: Центрирование оверлея улучшения промпта на мобильных */
        .prompt-enhance-overlay::before {
            display: none !important;
        }
		
    }
	
/* === ЖЕСТКОЕ СКРЫТИЕ МОБИЛЬНОГО КРЕСТИКА НА ДЕСКТОПЕ === */
@media (min-width: 769px) {
    button.task-close-btn.mobile-close-btn {
        display: none !important;
    }
}	
    
/* === УНИФИКАЦИЯ КНОПОК АВТОРИЗАЦИИ В ХЕДЕРЕ === */
.auth-buttons { display: flex; align-items: center; gap: 8px; }
.auth-buttons .icon-btn {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.auth-buttons .icon-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text-primary);
    border-color: var(--color-border-hover);
    transform: translateY(-1px);
}

.auth-buttons .icon-btn:active {
    transform: translateY(0);
}






/* === ЧАСТЬ 2 === */


/* === КНОПКА ИНФОГРАФИКИ ПОВЕРХ МИНИАТЮРЫ === */
.btn-infographics-overlay {
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 15;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.3); /* Жесткая тень для отбивки */
    transition: all 0.2s ease;
}

.btn-infographics-overlay:hover:not(:disabled) {
    background: var(--color-blue-bright);
    border-color: var(--color-blue-bright);
    color: #ffffff;
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.9), 0 0 15px rgba(59, 156, 255, 0.6);
}

.btn-infographics-overlay:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    border-color: transparent;
    box-shadow: none;
}

.btn-infographics-overlay svg {
    width: 14px;
    height: 14px;
    stroke-width: 2;
}

/* --- Стилизация контейнера для референсов и тегов над полем ввода --- */
.unified-top-tray {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px; /* Расстояние между элементами внутри (тегами, рефами) */
    width: 100%;
    box-sizing: border-box; /* Важно для корректного расчета ширины с padding */
    
    /* Сдвигаем вправо, чтобы не залезать на боковые иконки (скрепку). 52px = ширина иконки + отступы */
    padding-left: 52px; 
    
    /* Вертикальные отступы для точного позиционирования */
    padding-top: 4px; /* Опускаем контейнер чуть ниже от верха */
    margin-bottom: 0px; /* Уменьшаем расстояние до поля ввода текста */
}

/* Когда в контейнере нет элементов, он не должен занимать место */
.unified-top-tray:empty {
    display: none;
}

/* Контейнер для самих миниатюр референсов */
.reference-thumbnails {
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* Расстояние между самими миниатюрами */
}


/* === [NEW] СИСТЕМА АЛЕРТОВ (ИСПРАВЛЕНО) === */
#app-alerts-container {
    position: absolute;
    bottom: 100%; /* Располагаем нижнюю границу контейнера на уровне верхней границы родителя (.generator-bottom-wrapper) */
    margin-bottom: 8px; /* Добавляем отступ в 8px НАД родителем */
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    min-width: 300px;
    max-width: 500px;
    z-index: 10;
    display: flex;
    flex-direction: column-reverse; /* Новые алерты будут появляться сверху */
    align-items: center;
    gap: 12px;
    pointer-events: none;
}

@keyframes alert-slide-in {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes alert-fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.app-alert {
    display: inline-block;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    border: 1px solid;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7);
    animation: alert-slide-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    pointer-events: auto;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.app-alert.fade-out {
    animation: alert-fade-out 0.4s ease forwards;
}

/* Warning (Желтый) */
.app-alert.alert-warning {
    background-color: rgba(255, 152, 0, 0.2);
    border-color: rgba(255, 152, 0, 0.6);
    color: #ffc977;
}

/* Critical (Красный) */
.app-alert.alert-critical {
    background-color: rgba(255, 74, 74, 0.2);
    border-color: rgba(255, 74, 74, 0.6);
    color: #ffb3b3;
}

/* Success (Зеленый) */
.app-alert.alert-success {
    background-color: rgba(76, 175, 80, 0.2);
    border-color: rgba(76, 175, 80, 0.6);
    color: #c8e6c9;
}

/* Обернутый потерянный кусок анимации */
@keyframes upscale-text-breath {
    0% { background-position: 85% 50%, 0 0, 0 0; }
    50% { background-position: 84.5% 50%, 0 0, 0 0; } /* Легкое "дыхание" надписи */
    100% { background-position: 85% 50%, 0 0, 0 0; }
}

/* 1. ИЗМЕНЯЕМ СУЩЕСТВУЮЩИЙ СЕЛЕКТОР, ЧТОБЫ ИСКЛЮЧИТЬ 4К КАРТЫ */
.task-card.state-active:not(.task-card-upscale) { 
    border-color: rgba(59, 156, 255, 0.6); 
    animation: card-pulse-blue 2s infinite alternate ease-in-out; 
}

/* 2. ДОБАВЛЯЕМ ЧИСТЫЕ СТИЛИ ДЛЯ 4К КАРТ */
@keyframes upscale-4k-breath {
    0% {
        border-color: rgba(90, 80, 200, 0.4);
        box-shadow: 0 4px 20px rgba(0,0,0,0.3), 0 0 15px rgba(90, 80, 200, 0.1) inset;
    }
    50% {
        border-color: rgba(120, 100, 255, 0.8);
        box-shadow: 0 4px 30px rgba(90, 80, 200, 0.3), 0 0 25px rgba(120, 100, 255, 0.25) inset;
    }
    100% {
        border-color: rgba(90, 80, 200, 0.4);
        box-shadow: 0 4px 20px rgba(0,0,0,0.3), 0 0 15px rgba(90, 80, 200, 0.1) inset;
    }
}

.task-card.task-card-upscale {
    border-color: rgba(90, 80, 200, 0.3);
    background-color: #13141a; /* Базовый цвет */
    
    background-image: 
        url("data:image/svg+xml,%3csvg width='200' height='100' viewBox='0 0 200 100' xmlns='http://www.w3.org/2000/svg'%3e%3ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' font-family='-apple-system, BlinkMacSystemFont, sans-serif' font-size='110' font-weight='900' font-style='italic' fill='rgba(255,255,255,0.03)'%3e4K%3c/text%3e%3c/svg%3e"),
        repeating-radial-gradient(circle at 0 0, transparent 0, rgba(90, 80, 200, 0.08) 1px);

    background-repeat: no-repeat, repeat;
    background-size: 300px auto, 10px 10px;
    background-position: 85% 50%, 0 0;
}

.task-card.task-card-upscale.upscale-active {
    animation: upscale-4k-breath 2.5s ease-in-out infinite;
}

.icon-panel-popup {
    /* Фиксируем box-sizing */
    box-sizing: border-box !important;
    /* Убираем лишние отступы, которые могут влиять на расчет */
    margin: 0 !important;
}



.icon-panel-tab-content {
    /* Убираем margin, чтобы они не влияли на высоту */
    margin: 0 !important;
    padding: 0 !important;
}

/* === [NEW] Стили для унифицированной панели лиц === */

/* 1. Увеличиваем высоту кнопок только в панели лиц, чтобы вместить большие миниатюры */
#faces-tool .icon-panel-btn {
    height: 96px !important; /* Увеличиваем с 72px до 96px */
}

/* 2. Увеличиваем размер контейнера для изображения */
#faces-tool .icon-panel-btn-icon {
    width: 64px !important;   /* Увеличиваем с 32px до 64px */
    height: 64px !important;  /* Увеличиваем с 32px до 64px */
}

/* 3. Гарантируем, что само изображение занимает весь контейнер и показывает только первое лицо */
#faces-tool .icon-panel-btn-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
}

/* Анимация прокрутки ленты лиц при наведении */
@keyframes pan-model-strip {
    0% { object-position: left center; }
    45% { object-position: right center; }
    55% { object-position: right center; }
    100% { object-position: left center; }
}

#faces-tool .icon-panel-btn:hover .icon-panel-btn-icon img {
    animation: pan-model-strip 4s ease-in-out infinite;
}

/* 4. Для кнопок, у которых нет текста (только лицо), убираем лишний отступ и центрируем иконку */
#faces-tool .icon-panel-btn:not(:has(span.icon-panel-btn-text)) {
    justify-content: center;
    gap: 0;
}

/* === [NEW] Анимация для плавного переключения вкладок в панелях === */

@keyframes tabContentFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Применяем анимацию к активному контенту вкладки */
.icon-panel-tab-content.active {
    /* display: block; - уже устанавливается JS, мы лишь добавляем анимацию */
    animation: tabContentFadeIn 0.3s ease-out forwards;
}

/* === ПРЕВРАЩАЕМ DROPDOWN ASPECT RATIO В ПАНЕЛЬ-СЕТКУ (КАК У КОМПОЗИЦИИ) === */
#aspect-ratio-tool .dropdown-menu {
    width: 380px !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
    padding: 16px !important;
}

#aspect-ratio-tool .dropdown-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 72px !important;
    padding: 6px !important;
}

#aspect-ratio-tool .dropdown-item:hover {
    background: rgba(59, 156, 255, 0.1);
    border-color: rgba(59, 156, 255, 0.3);
    color: var(--color-text-primary);
}

#aspect-ratio-tool .dropdown-item.selected {
    background: rgba(59, 156, 255, 0.15) !important;
    border-color: var(--color-blue-bright);
    color: var(--color-blue-bright) !important;
}

#aspect-ratio-tool .dropdown-item-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#aspect-ratio-tool .dropdown-item-icon svg {
    max-width: 100%;
    height: auto;
}

#aspect-ratio-tool .dropdown-item span {
    font-size: 9px !important;
    font-weight: 500;
    text-align: center;
    line-height: 1.1;
}

/* === ДЕСКТОПНОЕ ОТКРЫТИЕ ПАНЕЛЕЙ (ПО КЛИКУ И ПО НАВЕДЕНИЮ) >= 769px === */

/* 1. РЕАКЦИЯ НА КЛИК/ТАП (ДЛЯ СЕНСОРНЫХ ЭКРАНОВ В РЕЖИМЕ ПК И ПЛАНШЕТОВ) - БЕЗ ЗАДЕРЖКИ */
@media (min-width: 769px) {
    .tool-wrapper.show-popup {
        z-index: 100;
    }

    .tool-wrapper.show-popup .icon-panel-popup,
    .tool-wrapper.show-popup .dropdown-menu {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateX(-50%) translateY(0) scale(1);
        transition-delay: 0s;
    }

    #composition-aesthetics-tool.show-popup .icon-panel-popup,
    #ai-model-tool.show-popup .icon-panel-popup { 
        transform: translateY(0) scale(1); 
        transition-delay: 0s;
    }
    
    body:has(.tool-wrapper.show-popup)::after { 
        opacity: 1; pointer-events: auto; 
        transition-delay: 0s;
    }

    .floating-input-island:has(.tool-wrapper.show-popup) .input-core > *:not(.tool-wrapper.show-popup):not(:has(.tool-wrapper.show-popup)),
    .floating-input-island:has(.tool-wrapper.show-popup) .input-main-col > *:not(.tool-wrapper.show-popup):not(:has(.tool-wrapper.show-popup)),
    .floating-input-island:has(.tool-wrapper.show-popup) .creative-tray > *:not(.tool-wrapper.show-popup):not(:has(.tool-wrapper.show-popup)) {
        opacity: 0.15; pointer-events: none; 
        transition: opacity 0.2s ease;
    }
}

/* 2. РЕАКЦИЯ НА НАВЕДЕНИЕ МЫШИ (ТОЛЬКО КУРСОР) - С ЗАДЕРЖКОЙ 0.2s */
@media (hover: hover) and (min-width: 769px) {
    .tool-wrapper:hover {
        z-index: 100;
        transition-delay: 0.2s;
    }

    .tool-wrapper:hover .icon-panel-popup,
    .tool-wrapper:hover .dropdown-menu {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateX(-50%) translateY(0) scale(1);
        transition-delay: 0.2s; /* Задержка от ложных срабатываний */
    }

    #composition-aesthetics-tool:hover .icon-panel-popup,
    #ai-model-tool:hover .icon-panel-popup { 
        transform: translateY(0) scale(1); 
        transition-delay: 0.2s;
    }
    
    /* Эталонная имитация поведения клика: затемнение фона приложения с задержкой */
    body:has(.tool-wrapper:hover)::after { 
        opacity: 1; pointer-events: auto; 
        transition-delay: 0.2s;
    }

    /* Эталонная имитация поведения клика: димминг соседних элементов с задержкой 0.2s */
    .floating-input-island:has(.tool-wrapper:hover) .input-core > *:not(.tool-wrapper:hover):not(:has(.tool-wrapper:hover)),
    .floating-input-island:has(.tool-wrapper:hover) .input-main-col > *:not(.tool-wrapper:hover):not(:has(.tool-wrapper:hover)),
    .floating-input-island:has(.tool-wrapper:hover) .creative-tray > *:not(.tool-wrapper:hover):not(:has(.tool-wrapper:hover)) {
        opacity: 0.15; pointer-events: none; 
        transition: opacity 0.2s ease 0.2s; /* Анимация 0.2s, старт через 0.2s */
    }
}