/* 
 * Chatbot Frontend CSS
 * Stili per il widget chatbot frontend
 */

/* Reset base per il widget */
.chatbot-widget * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Stili per Auto-Embedded */
@media (min-width: 768px) {
    body.chatbot-auto-embedded {
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden;
    }
    
    .chatbot-auto-embedded-container {
        display: grid;
        min-height: 100vh;
        width: 100vw;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99999;
        background: #fff;
    }
    
    .chatbot-auto-embedded-content {
        overflow-y: auto;
        height: 100vh;
        background: #fff;
        position: relative;
    }
    
    .chatbot-auto-embedded-chat {
        background: #f8f9fa;
        height: 100vh;
        overflow: hidden;
        position: relative;
    }
    
    /* Nascondi il chatbot normale quando auto-embedded è attivo */
    .chatbot-auto-embedded .chatbot-widget:not(.auto-embedded-widget) {
        display: none !important;
    }
}

/* Su mobile, disabilita auto-embedded completamente */
@media (max-width: 767px) {
    .chatbot-auto-embedded-container {
        display: none !important;
    }
    
    body.chatbot-auto-embedded {
        position: static !important;
        margin: revert !important;
        padding: revert !important;
        overflow-x: auto !important;
    }
    
    /* Assicurati che il chatbot normale sia visibile su mobile */
    .chatbot-auto-embedded .chatbot-widget {
        display: block !important;
        position: fixed !important;
        z-index: 99999 !important;
    }
    
    /* Rimuovi la classe auto-embedded sul body per mobile */
    body.chatbot-auto-embedded {
        all: revert;
    }
}

/* Animazioni per typing indicator */
@keyframes typing {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-8px);
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
    }
}

/* Stili per messaggi formattati */
.chatbot-message .message-bubble ul {
    margin: 8px 0;
    padding-left: 0;
    list-style-position: inside;
}

.chatbot-message .message-bubble li {
    margin-bottom: 6px;
    line-height: 1.5;
}

.chatbot-message .message-bubble h1,
.chatbot-message .message-bubble h2,
.chatbot-message .message-bubble h3 {
    margin-top: 16px;
    margin-bottom: 8px;
    line-height: 1.3;
}

.chatbot-message .message-bubble h1:first-child,
.chatbot-message .message-bubble h2:first-child,
.chatbot-message .message-bubble h3:first-child {
    margin-top: 0;
}

.chatbot-message .message-bubble code {
    font-family: 'Monaco', 'Courier New', monospace;
    font-size: 0.9em;
}

.chatbot-message .message-bubble pre {
    overflow-x: auto;
    max-width: 100%;
}

.chatbot-message .message-bubble .code-block {
    margin: 12px 0;
    border-radius: 8px;
}

.chatbot-message .message-bubble strong {
    font-weight: 600;
}

.chatbot-message .message-bubble em {
    font-style: italic;
}

/* Stili per le card prodotti/pagine */
.chatbot-product-card {
    cursor: default;
    user-select: none;
}

.chatbot-product-card img {
    transition: transform 0.3s ease;
}

.chatbot-product-card:hover img {
    transform: scale(1.05);
}

.chatbot-cards-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Responsive per card */
@media (max-width: 768px) {
    .chatbot-product-card {
        margin: 6px 0 !important;
    }
    
    .chatbot-cards-container {
        gap: 8px;
    }
}

/* Dark mode per card e formattazione */
.chatbot-widget.dark .chatbot-product-card {
    background: #2d3748 !important;
    border-color: #4a5568 !important;
}

.chatbot-widget.dark .chatbot-product-card h4 {
    color: #e2e8f0 !important;
}

.chatbot-widget.dark .chatbot-product-card p {
    color: #a0aec0 !important;
}

.chatbot-widget.dark .message-bubble .code-block {
    background: #2d3748 !important;
    border-color: #4a5568 !important;
}

.chatbot-widget.dark .message-bubble code {
    background: rgba(102, 126, 234, 0.2) !important;
}

.chatbot-widget.dark .message-bubble h1,
.chatbot-widget.dark .message-bubble h2,
.chatbot-widget.dark .message-bubble h3 {
    color: #e2e8f0 !important;
}

/* Responsive utilities */
.chatbot-hide-mobile {
    display: block;
}

@media (max-width: 767px) {
    .chatbot-hide-mobile {
        display: none !important;
    }
}

.chatbot-show-mobile {
    display: none;
}

@media (max-width: 767px) {
    .chatbot-show-mobile {
        display: block !important;
    }
}

/* Fix per temi che potrebbero interferire */
.chatbot-auto-embedded-container * {
    box-sizing: border-box;
}

.chatbot-auto-embedded-content > * {
    position: relative;
    z-index: 1;
}

/* Mobile: Gestione tastiera virtuale */
@media (max-width: 767px) {
    /* Assicura che l'input sia sempre visibile */
    .chatbot-widget .input-container {
        position: relative !important;
        bottom: 0 !important;
        z-index: 10 !important;
    }
    
    /* Quando l'input ha il focus, assicurati che sia visibile */
    .chatbot-widget .input-container:focus-within {
        position: relative !important;
        bottom: 0 !important;
    }
    
    /* Container messaggi più flessibile su mobile */
    .chatbot-widget .chatbot-messages {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Assicura che il chatbot window sia scrollabile correttamente */
    .chatbot-widget .chatbot-window {
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    
    /* Previeni lo zoom su iOS quando si fa focus sull'input */
    .chatbot-widget input,
    .chatbot-widget textarea {
        font-size: 16px !important; /* iOS non zooma se il font è >= 16px */
    }
}

/* Quando la chat è chiusa, non deve catturare eventi */
.chatbot-window[style*="display: none"],
.chatbot-window[style*="opacity: 0"] {
    pointer-events: none !important;
}

/* iOS specific fixes */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 767px) {
        /* Fix per iOS Safari quando la tastiera è aperta */
        .chatbot-widget .chatbot-window {
            position: fixed !important;
            height: 100vh !important;
            height: -webkit-fill-available !important;
        }
        
        /* Assicura scroll smooth su iOS */
        .chatbot-widget .chatbot-messages {
            -webkit-overflow-scrolling: touch !important;
            scroll-behavior: smooth !important;
        }
    }
}