/**
 * Chatbot Layout - Responsive
 * 
 * Verantwortlichkeit: Mobile und Tablet Optimierungen
 * Mobile: Immer Fullscreen
 * 
 * @package CockpitOS_Light_Theme
 * @version 1.0.0
 */

/* ========================================
   Tablet (max-width: 768px)
   ======================================== */

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

    /* Header */
    .cockpit-os-chatbot-modal__header {
        height: 72px;
        padding: 0 20px;
    }

    .cockpit-os-chatbot-modal__header-title h3 {
        font-size: 18px;
    }

    /* Messages */
    .cockpit-os-chatbot-modal[data-layout="fullscreen"] .cockpit-os-chatbot-modal__body {
        padding: 96px 12px 136px 12px;
    }

    /* Footer */
    .cockpit-os-chatbot-modal__footer {
        padding: 10px 12px;
    }
}

/* ========================================
   Mobile (max-width: 640px)
   ======================================== */

@media (max-width: 640px) {
    /* Floating Button */
    .cockpit-os-chatbot-toggle {
        width: 56px;
        height: 56px;
        bottom: 20px;
        right: 20px;
    }

    /* Header */
    .cockpit-os-chatbot-modal__header {
        height: 64px;
        padding: 0 16px;
    }

    .cockpit-os-chatbot-modal__header-title h3 {
        font-size: 16px;
    }

    /* Messages */
    .cockpit-os-chatbot-modal[data-layout="fullscreen"] .cockpit-os-chatbot-modal__body {
        padding: 88px 12px 128px 12px;
    }

    /* Footer */
    .cockpit-os-chatbot-modal__footer {
        padding: 12px;
    }

    /* Input */
    .cockpit-os-chatbot-input {
        font-size: 16px; /* Prevent zoom on iOS */
    }
}

/* ========================================
   Mobile Keyboard Handling
   ======================================== */

/* iOS Safari */
@supports (-webkit-touch-callout: none) {
    .cockpit-os-chatbot-modal__footer {
        position: fixed;
        bottom: env(safe-area-inset-bottom, 0);
    }
}

/* Android Chrome - Dynamic Viewport Height */
@media screen and (max-width: 768px) {
    @supports (height: 100dvh) {
        .cockpit-os-chatbot-modal[data-layout="fullscreen"] .cockpit-os-chatbot-modal__body {
            height: calc(100dvh - 200px);
        }
    }
}

/* ========================================
   Landscape Mobile
   ======================================== */

@media (max-width: 768px) and (orientation: landscape) {
    .cockpit-os-chatbot-modal__header {
        height: 56px;
        padding: 0 16px;
    }

    .cockpit-os-chatbot-modal[data-layout="fullscreen"] .cockpit-os-chatbot-modal__body {
        padding: 72px 12px 120px 12px;
    }
}

/* ========================================
   Small Desktop (max-width: 1024px)
   ======================================== */

@media (max-width: 1024px) {
    /* Window Mode: Smaller */
    .cockpit-os-chatbot-modal[data-layout="window"] {
        width: 580px;
        height: 720px;
        right: 16px;
        bottom: 90px;
    }
}

/* ========================================
   Large Desktop (min-width: 1920px)
   ======================================== */

@media (min-width: 1920px) {
    /* Window Mode: Larger */
    .cockpit-os-chatbot-modal[data-layout="window"] {
        width: 720px;
        height: 820px;
    }

    /* Fullscreen: Max Width for Messages */
    .cockpit-os-chatbot-modal[data-layout="fullscreen"] .cockpit-os-chatbot-modal__body-inner {
        max-width: 1920px;
    }
}