/**
 * CockpitOS Light - Chatbot Card Slider
 * 
 * Verantwortlichkeit: Slider-Modus für 3+ Cards
 * Besser als Suma Center: Auto-Detection, Snap-Points, Navigation Dots
 * 
 * @package CockpitOS_Light_Theme
 * @version 1.0.0
 */

/* ========================================
   Card Container - Base
   ======================================== */

.chatbot-cards__container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--chatbot-spacing-md);
    margin-top: var(--chatbot-spacing-md);
}

/* ========================================
   Grid Mode (1-2 Cards)
   ======================================== */

.chatbot-cards__container--grid {
    max-width: 100%;
}

/* Single Card: Max 400px */
.chatbot-cards__container--grid:has(.cockpit-os-chatbot-card:only-child) {
    grid-template-columns: minmax(280px, 400px);
}

/* 2 Cards: Max 400px each */
.chatbot-cards__container--grid:has(.cockpit-os-chatbot-card:nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(280px, 400px));
}

/* ========================================
   Slider Mode (3+ Cards)
   ======================================== */

.chatbot-cards__container--slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    gap: var(--chatbot-spacing-md);
    padding-bottom: var(--chatbot-spacing-sm);
    cursor: grab;
}

.chatbot-cards__container--slider:active {
    cursor: grabbing;
}

/* Card in Slider: Fixed Width */
.chatbot-cards__container--slider .cockpit-os-chatbot-card {
    flex: 0 0 min(320px, 85vw);
    scroll-snap-align: start;
}

/* Hide Scrollbar (but keep functionality) */
.chatbot-cards__container--slider::-webkit-scrollbar {
    height: 6px;
}

.chatbot-cards__container--slider::-webkit-scrollbar-track {
    background: var(--color-gray-100);
    border-radius: 3px;
}

.chatbot-cards__container--slider::-webkit-scrollbar-thumb {
    background: var(--color-gray-300);
    border-radius: 3px;
    transition: background var(--chatbot-transition-fast);
}

.chatbot-cards__container--slider::-webkit-scrollbar-thumb:hover {
    background: var(--color-gray-400);
}

/* ========================================
   Navigation Dots
   ======================================== */
/* Navigation Styles sind jetzt in chatbot-cards-navigation.css */

/* ========================================
   Slider Wrapper (für Navigation Dots)
   ======================================== */

.chatbot-cards__slider-wrapper {
    position: relative;
}

/* ========================================
   Fade Edges (zeigt dass mehr Cards da sind)
   ======================================== */

.chatbot-cards__container--slider::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(to left, var(--chatbot-bg), transparent);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--chatbot-transition-fast);
}

.chatbot-cards__container--slider:not(:hover)::after {
    opacity: 1;
}

/* ========================================
   Responsive (Legacy - wird durch chatbot-cards-mobile.css ersetzt)
   ======================================== */

@media (max-width: 640px) {
    .chatbot-cards__container--slider .cockpit-os-chatbot-card {
        flex: 0 0 min(280px, 90vw);
    }
    
    /* Navigation Dots Styles sind jetzt in chatbot-cards-navigation.css */
}