/**
 * CockpitOS Light - Chatbot Buttons
 * 
 * Verantwortlichkeit: Button Styling (Toggle, Icon Buttons)
 * 
 * @package CockpitOS_Light_Theme
 * @version 1.0.0
 */

/* Toggle Button (Floating) */
.cockpit-os-chatbot-toggle {
    position: fixed;
    bottom: 2rem; /* Einheitlich mit anderen Buttons */
    right: 2rem; /* Einheitlich */
    width: 56px; /* Einheitlich */
    height: 56px;
    background: var(--chatbot-primary);
    color: var(--color-white);
    border: none;
    border-radius: var(--chatbot-radius-full);
    box-shadow: var(--chatbot-shadow-lg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--chatbot-z-index-modal);
    transition: background var(--chatbot-transition-fast),
                transform var(--chatbot-transition-fast),
                opacity var(--chatbot-transition-fast),
                visibility var(--chatbot-transition-fast);
}

/* Toggle Button ausblenden wenn Bot geöffnet */
.cockpit-os-chatbot-modal--open ~ .cockpit-os-chatbot-toggle {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: scale(0);
    transition: opacity var(--chatbot-transition-fast),
                visibility var(--chatbot-transition-fast),
                transform var(--chatbot-transition-fast);
}

.cockpit-os-chatbot-toggle:hover {
    background: var(--chatbot-primary-dark);
    transform: translateY(-3px) scale(1.05); /* Einheitlicher Hover */
}

.cockpit-os-chatbot-toggle:active {
    transform: translateY(-2px) scale(0.95); /* Einheitlicher Active */
}

.cockpit-os-chatbot-toggle svg {
    width: 24px; /* Einheitlich */
    height: 24px;
}

/* Icon Buttons (Header) */
.cockpit-os-chatbot-button {
    background: transparent;
    border: none;
    color: var(--chatbot-text-secondary);
    cursor: pointer;
    padding: var(--chatbot-spacing-xs);
    border-radius: var(--chatbot-radius-sm);
    transition: background var(--chatbot-transition-fast),
                color var(--chatbot-transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cockpit-os-chatbot-button:hover {
    background: var(--color-gray-200);
    color: var(--chatbot-text);
}

.cockpit-os-chatbot-button svg {
    width: 20px;
    height: 20px;
}

/* Responsive */
@media (max-width: 768px) {
    .cockpit-os-chatbot-toggle {
        bottom: 1rem; /* Einheitlich */
        right: 1rem;
        width: 48px; /* Einheitlich */
        height: 48px;
    }
    
    .cockpit-os-chatbot-toggle svg {
        width: 20px; /* Einheitlich */
        height: 20px;
    }
}