/* =============================================================================
   AI Multi-Chat — Полные стили
   ============================================================================= */

.aiimg-wrap {
    --ai-bg:      #0d0d12;
    --ai-card:    #16161f;
    --ai-input:   #1e1e2a;
    --ai-border:  #2a2a38;
    --ai-text:    #f0f0f5;
    --ai-muted:   #8888a0;
    --ai-accent:  #a855f7;
    --ai-accent2: #ec4899;
    font-family: 'Inter', sans-serif;
}

.aiimg-wrap { 
    background: var(--ai-bg); 
    border-radius: 24px; 
    max-width: 800px; 
    margin: 32px auto; 
    color: var(--ai-text); 
    box-shadow: 0 0 0 1px var(--ai-border), 0 32px 80px rgba(0,0,0,0.6); 
    overflow: hidden; 
    position: relative; 
}

.aiimg-wrap::before { 
    content: ''; 
    position: absolute; 
    top: -100px; right: -100px; 
    width: 300px; height: 300px; 
    background: radial-gradient(circle, rgba(168,85,247,0.1) 0%, transparent 70%); 
    pointer-events: none; 
}

.aiimg-header { 
    display: flex; align-items: center; gap: 16px; padding: 24px 30px; 
    border-bottom: 1px solid var(--ai-border); background: var(--ai-card); 
    position: relative; 
}

.aiimg-icon { 
    width: 48px; height: 48px; 
    background: linear-gradient(135deg, var(--ai-accent), var(--ai-accent2)); 
    border-radius: 12px; display: flex; align-items: center; justify-content: center; 
    font-size: 22px; flex-shrink: 0; box-shadow: 0 4px 16px rgba(168,85,247,0.35); color: #fff; 
}

.aiimg-title { font-size: 18px; font-weight: 800; margin: 0 0 4px; }
.aiimg-subtitle { font-size: 13px; color: var(--ai-muted); margin: 0; }

.aiimg-body { padding: 30px; }

/* =============================================================================
   АНИМИРОВАННЫЕ ВКЛАДКИ И ПОЛЗУНОК
   ============================================================================= */
.ai-chat-header-actions { 
    display: flex; gap: 12px; margin-bottom: 20px; align-items: stretch; 
}

.ai-models-tabs { 
    position: relative; 
    display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; 
    background: var(--ai-input); padding: 6px; 
    border-radius: 16px; border: 1px solid var(--ai-border); flex: 1; 
    z-index: 1;
}

.ai-models-slider {
    position: absolute;
    top: 6px; 
    left: 6px;
    height: calc(100% - 12px);
    width: 0; 
    background: linear-gradient(135deg, var(--ai-accent), var(--ai-accent2));
    border-radius: 12px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease; 
    z-index: -1; 
    box-shadow: 0 4px 12px rgba(168,85,247,0.3);
    opacity: 0; 
}

.ai-model-tab { 
    flex: 1; min-width: 90px; padding: 10px 8px; background: transparent; border: none; 
    color: var(--ai-muted); font-weight: 700; cursor: pointer; 
    border-radius: 12px; transition: color 0.3s ease; 
    display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; 
}
.ai-model-tab:hover { color: var(--ai-text); }
.ai-model-tab.active { color: #fff; }

.chat-clear-btn { 
    background: rgba(239,68,68,0.1); color: #ef4444; border: 1px solid rgba(239,68,68,0.3); 
    border-radius: 16px; width: 48px; height: 48px; flex-shrink: 0; cursor: pointer; 
    transition: 0.2s; display: flex; align-items: center; justify-content: center; font-size: 16px; 
}
.chat-clear-btn:hover { background: #ef4444; color: #fff; }

/* =============================================================================
   ОБЛАСТЬ ЧАТА
   ============================================================================= */
.ai-chat-messages { 
    height: 500px; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; 
    gap: 16px; background: #111118; border: 1px solid var(--ai-border); 
    border-radius: 16px; margin-bottom: 20px; 
}
.ai-chat-messages::-webkit-scrollbar { width: 6px; }
.ai-chat-messages::-webkit-scrollbar-thumb { background: var(--ai-border); border-radius: 4px; }

.ai-msg { max-width: 85%; padding: 14px 18px; border-radius: 16px; font-size: 15px; line-height: 1.6; word-wrap: break-word; }
.ai-msg.bot { background: var(--ai-input); border: 1px solid var(--ai-border); align-self: flex-start; border-bottom-left-radius: 4px; color: var(--ai-text); }
.ai-msg.user { background: linear-gradient(135deg, var(--ai-accent), var(--ai-accent2)); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.ai-msg.loading { align-self: flex-start; background: transparent; color: var(--ai-muted); padding: 0 10px; font-size: 14px; }
.ai-msg-model-badge { display: block; font-size: 11px; font-weight: 700; color: var(--ai-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }

/* =============================================================================
   ПОЛЕ ВВОДА
   ============================================================================= */
.ai-chat-input-row { display: flex; gap: 12px; align-items: flex-end; }
.ai-chat-input-row textarea { 
    flex: 1; background: var(--ai-input); border: 1px solid var(--ai-border); 
    border-radius: 14px; padding: 16px 20px; color: #fff; outline: none; 
    font-size: 15px; transition: 0.2s; resize: none; min-height: 56px; 
    max-height: 150px; font-family: inherit; line-height: 1.4; box-sizing: border-box; 
}
.ai-chat-input-row textarea:focus { border-color: var(--ai-accent); box-shadow: 0 0 0 3px rgba(168,85,247,0.15); }

.ai-chat-input-row button { 
    background: linear-gradient(135deg, var(--ai-accent), var(--ai-accent2)); 
    border: none; border-radius: 14px; width: 56px; height: 56px; flex-shrink: 0; 
    color: #fff; cursor: pointer; transition: 0.2s; font-size: 18px; 
    display: flex; align-items: center; justify-content: center; 
    box-shadow: 0 4px 12px rgba(168,85,247,0.3); 
}
.ai-chat-input-row button:hover { opacity: 0.85; transform: translateY(-2px); }
.ai-chat-input-row button:disabled { opacity: 0.5; cursor: wait; transform: none; }

/* =============================================================================
   АДАПТИВНОСТЬ
   ============================================================================= */
@media (max-width: 600px) {
    .aiimg-header { flex-direction: column; text-align: center; gap: 12px; padding: 20px; }
    .aiimg-body  { padding: 20px; }
    .ai-chat-header-actions { flex-direction: column; align-items: stretch; }
    .chat-clear-btn { width: 100%; height: 40px; }
    .ai-chat-messages { height: 400px; }
    /* При адаптиве, когда кнопки могут стать друг под друга, слайдер будет подстраиваться автоматически */
    .ai-models-tabs { flex-direction: column; } 
}

/* =============================================================================
   ПЛАШКА "В РАЗРАБОТКЕ"
   ============================================================================= */
.ai-dev-banner {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #fbbf24;
    padding: 14px 20px;
    border-radius: 16px;
    margin-bottom: 20px;
    font-size: 13px;
    line-height: 1.5;
    display: flex;
    align-items: center;
    gap: 14px;
    animation: aiimg-fadein 0.4s ease;
}
.ai-dev-banner i { 
    font-size: 20px; 
    flex-shrink: 0; 
    color: #f59e0b;
}

/* =============================================================================
   ОТКЛЮЧЕННЫЕ МОДЕЛИ (ЗАМОРОЗКА)
   ============================================================================= */
.ai-model-tab:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none; /* Запрещает кликать и наводить мышку */
    filter: grayscale(100%);
}