/**
 * Chatbot Layout - Window Mode
 * 
 * Verantwortlichkeit: Small Window Modal Layout
 * Kompaktes Fenster unten rechts
 * 
 * @package CockpitOS_Light_Theme
 * @version 1.0.0
 */

/* ========================================
   Window Modal
   ======================================== */

.cockpit-os-chatbot-modal[data-layout="window"] {
    position: fixed;
    bottom: 100px;
    right: 24px;
    width: 680px;
    height: 780px;
    max-height: calc(100vh - 120px);
    min-height: 500px;
    z-index: var(--chatbot-z-index-modal);
    display: none;
    opacity: 0;
    transition: all 0.3s ease;
    border-radius: var(--chatbot-radius-lg);
    box-shadow: var(--chatbot-shadow-xl);
    overflow: hidden;
}

.cockpit-os-chatbot-modal[data-layout="window"].cockpit-os-chatbot-modal--open {
    display: flex;
    animation: slideInFromRight 0.3s ease forwards;
}

@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(20px) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0) translateY(0);
    }
}

/* ========================================
   No Overlay in Window Mode
   ======================================== */

.cockpit-os-chatbot-modal[data-layout="window"] .cockpit-os-chatbot-modal__overlay {
    display: none;
}

/* ========================================
   Container
   ======================================== */

.cockpit-os-chatbot-modal[data-layout="window"] .cockpit-os-chatbot-modal__container {
    width: 100%;
    height: 100%;
    background: var(--chatbot-bg);
    display: flex;
    flex-direction: column;
    border-radius: var(--chatbot-radius-lg);
    overflow: hidden;
}

/* ========================================
   Header - Static (Window Mode)
   ======================================== */

.cockpit-os-chatbot-modal[data-layout="window"] .cockpit-os-chatbot-modal__header {
    position: relative;
    padding: 16px 20px;
    border-bottom: 1px solid var(--chatbot-border);
    background: var(--chatbot-bg);
}

/* ========================================
   Messages - Scrollable (Window Mode)
   ======================================== */

.cockpit-os-chatbot-modal[data-layout="window"] .cockpit-os-chatbot-modal__body {
    padding: 16px;
    background: var(--chatbot-bg);
}

/* ========================================
   Footer - Static (Window Mode)
   ======================================== */

.cockpit-os-chatbot-modal[data-layout="window"] .cockpit-os-chatbot-modal__footer {
    position: relative;
    padding: 16px;
    border-top: 1px solid var(--chatbot-border);
    background: var(--chatbot-bg);
}

/* ========================================
   Responsive - Mobile always Fullscreen
   ======================================== */

@media (max-width: 768px) {
    .cockpit-os-chatbot-modal[data-layout="window"] {
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }
}