/* ===== AI Panel States ===== */

/* Disabled State ("Turn On" Screen) */
.ai-panel-disabled {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
    text-align: center;
    background: var(--bg-base);
    /* Match base background */
    color: var(--text-secondary);
    height: 100%;
    animation: fadeIn var(--duration-base) var(--ease-out);
}

.ai-panel-disabled.hidden {
    display: none;
}

.disabled-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    max-width: 280px;
}

.disabled-icon {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    background: var(--bg-sunken);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    margin-bottom: var(--space-sm);
    border: 1px solid var(--border);
}

.disabled-icon i {
    width: 40px;
    height: 40px;
}

.ai-panel-disabled h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: -0.5rem;
}

.ai-panel-disabled p {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.disabled-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    width: 100%;
    margin-top: var(--space-lg);
}

.btn-block {
    width: 100%;
    justify-content: center;
}

/* Enabled State */
.ai-panel-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    flex: 1;
    min-height: 0; /* Critical for nested flex scroll */
    overflow: hidden;
    animation: fadeIn var(--duration-base) var(--ease-out);
}

.ai-panel-content.hidden {
    display: none;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}