/* 
 * Chat Input - Stili unificati per l'area di input della chat
 * @copyright [2024] [chat-ida/saintchannel]
 * @author [Dario Santocanale]
 * @version 1.2.0
 *
 * Questo file consolida tutte le regole CSS relative all'area di input della chat
 * per garantire una visualizzazione coerente su tutti i dispositivi, inclusi i dispositivi mobili.
 */

/* ======================================
   1. STRUTTURA BASE DELL'INPUT
   ====================================== */

/* Container principale per l'input della chat */
.chat-container .chat-input-wrapper {
    position: sticky;
    bottom: 0;
    z-index: var(--chat-zindex-fixed);
    width: 100%;
    background-color: var(--chat-bg);
    border-top: 1px solid var(--chat-border);
    box-shadow: var(--chat-box-shadow-top);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    flex: 0 0 auto;
    transform: translateZ(0); /* Previene il flicker durante lo scroll */
    -webkit-transform: translateZ(0);
    will-change: transform; /* Ottimizzazione per browser mobili */
    backface-visibility: hidden;
}

/* Container flex per organizzare gli elementi dell'input */
.chat-container .chat-input-flex-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    padding: var(--chat-input-padding-y) var(--chat-input-padding-x);
    background-color: var(--chat-bg);
    gap: var(--chat-spacing-md);
    border-top: none !important;
    box-sizing: border-box;
    margin: 0;
    position: relative; /* Aggiungiamo position relative per posizionare meglio i figli */
}

/* Container per il textarea dell'input */
.chat-container .sct-chat-input-container {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

/* Textarea dell'input */
.chat-container .sct-chat-input {
    width: 100%;
    min-height: 40px;
    max-height: 100px;
    padding: var(--chat-input-padding-y) var(--chat-input-padding-x);
    padding-right: 50px; /* Aggiungiamo spazio a destra per evitare che il testo finisca sotto i pulsanti */
    border: 1px solid var(--chat-border);
    border-radius: var(--chat-border-radius-xl);
    background-color: var(--chat-bg-light);
    color: var(--chat-text);
    font-family: var(--chat-font-family);
    font-size: var(--chat-font-size);
    line-height: 1.5;
    resize: none;
    overflow-y: auto;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-shadow: var(--chat-box-shadow-inset);
}

.chat-container .sct-chat-input:focus {
    outline: none;
    border-color: var(--chat-primary);
    box-shadow: 0 0 0 1px var(--chat-primary-light), var(--chat-box-shadow-inset);
}

.chat-container .sct-chat-input::placeholder {
    color: var(--chat-text-muted);
}

/* Contatore caratteri */
.chat-container .sct-chat-char-counter {
    position: absolute;
    bottom: 8px;
    right: 16px;
    font-size: var(--chat-font-size-xs);
    color: var(--chat-text-muted);
    background-color: transparent;
    padding: 2px 5px;
    border-radius: 10px;
    pointer-events: none;
}

/* ======================================
   2. PULSANTI DELL'INPUT
   ====================================== */

/* Container dei pulsanti di azione */
.chat-container .sct-chat-input-actions {
    display: flex;
    flex: 0 0 auto;
    gap: var(--chat-spacing-sm);
    align-items: center;
    justify-content: flex-end;
    min-width: 88px; /* Riduciamo lo spazio minimo */
    margin-left: auto; /* Forza lo spostamento all'estrema destra */
    position: relative; /* Per il posizionamento del dropdown */
}

/* Stile base dei pulsanti */
.chat-container .sct-chat-input-button {
    width: var(--chat-button-size);
    height: var(--chat-button-size);
    min-width: var(--chat-button-size); /* Previene il rimpicciolimento */
    min-height: var(--chat-button-size); /* Previene il rimpicciolimento */
    border-radius: var(--chat-button-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--chat-bg-light);
    color: var(--chat-text);
    border: 1px solid var(--chat-border);
    cursor: pointer;
    transition: var(--chat-transition);
    padding: 0;
    margin: 0;
    flex: 0 0 auto;
    box-shadow: var(--chat-box-shadow-input);
    position: relative; /* Importante per il posizionamento delle icone */
    overflow: visible; /* Assicura che l'icona non venga tagliata */
}

/* Hover effect sui pulsanti */
.chat-container .sct-chat-input-button:hover {
    background-color: var(--chat-bg-hover);
    color: var(--chat-primary);
    transform: translateY(-2px);
    box-shadow: var(--chat-box-shadow-hover);
}

/* Animazione pressione pulsanti */
.chat-container .sct-chat-input-button:active {
    transform: translateY(0);
}

/* Stile specifico per il pulsante invia */
.chat-container .sct-chat-send-button {
    background-color: var(--chat-primary);
    color: var(--chat-bg-dark);
    border: none;
}

.chat-container .sct-chat-send-button:hover {
    background-color: var(--chat-primary);
    opacity: 0.9;
    color: var(--chat-bg-dark);
}

/* Input file nascosto */
.chat-container .sct-chat-attachment-button input[type="file"] {
    display: none;
}

/* ======================================
   3. ICONE NEI PULSANTI
   ====================================== */

/* Stile base delle icone - REVISIONE COMPLETA */
.chat-container .sct-chat-input-button svg,
.chat-container .sct-chat-input-button [data-chat-icon] {
    width: var(--chat-button-icon-size);
    height: var(--chat-button-icon-size);
    display: block;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Posizionamento assoluto al centro */
}

/* Fallback per icone vecchie */
.chat-container .sct-chat-input-button i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
}

/* Icone SVG direttamente nel background per garantire la visibilità */
.chat-container .sct-chat-attachment-button:after,
.chat-container .sct-chat-emoji-button:after,
.chat-container .sct-chat-send-button:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--chat-button-icon-size);
    height: var(--chat-button-icon-size);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Icona allegato - versione chiara */
.chat-container .sct-chat-attachment-button:after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-paperclip' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 3a2.5 2.5 0 0 1 5 0v9a1.5 1.5 0 0 1-3 0V5a.5.5 0 0 1 1 0v7a.5.5 0 0 0 1 0V3a1.5 1.5 0 1 0-3 0v9a2.5 2.5 0 0 0 5 0V5a.5.5 0 0 1 1 0v7a3.5 3.5 0 1 1-7 0z'/%3E%3C/svg%3E");
}

/* Icona emoji - versione chiara */
.chat-container .sct-chat-emoji-button:after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-emoji-smile' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683M7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5m4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5'/%3E%3C/svg%3E");
}

/* Icona invia - versione scura */
.chat-container .sct-chat-send-button:after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23001a1a' class='bi bi-send-fill' viewBox='0 0 16 16'%3E%3Cpath d='M15.964.686a.5.5 0 0 0-.65-.65L.767 5.855H.766l-.452.18a.5.5 0 0 0-.082.887l.41.26.001.002 4.995 3.178 3.178 4.995.002.002.26.41a.5.5 0 0 0 .886-.083zm-1.833 1.89L6.637 10.07l-.215-.338a.5.5 0 0 0-.154-.154l-.338-.215 7.494-7.494 1.178-.471z'/%3E%3C/svg%3E");
}

/* ======================================
   4. LAYOUT GENERALE DELLA CHAT PER L'INPUT
   ====================================== */

/* Struttura principale della chat */
.chat-container .chat-main {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

/* Container dei messaggi */
.chat-container .chat-messages-wrapper {
    flex: 1 1 auto;
    overflow: hidden;
    position: relative;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* Area dei messaggi */
.chat-container .chat-messages {
    height: calc(100% - var(--chat-input-height));
    overflow-y: auto !important;
    box-sizing: content-box;
    margin-right: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    scrollbar-gutter: stable both-edges !important;
    padding-right: var(--chat-message-spacing) !important;
    padding-left: var(--chat-message-spacing) !important;
    padding-top: var(--chat-message-spacing) !important;
    padding-bottom: var(--chat-message-spacing) !important;
    overscroll-behavior: contain !important;
    margin-bottom: 0 !important;
    display: flex;
    flex-direction: column;
}

/* Questo assicura che l'ultimo messaggio abbia sempre spazio sotto */
.chat-container .chat-messages:after {
    content: '';
    display: block;
    height: var(--chat-spacing-md);
    flex-shrink: 0;
}

/* ======================================
   5. VISIBILITÀ DELLA SCROLLBAR
   ====================================== */

/* Stile scrollbar per WebKit (Chrome, Safari, Edge) */
.chat-container .chat-main .chat-messages-wrapper .chat-messages::-webkit-scrollbar {
    width: 10px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.chat-container .chat-main .chat-messages-wrapper .chat-messages::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1) !important;
    border-radius: 10px !important;
    margin: 5px !important;
}

.chat-container .chat-main .chat-messages-wrapper .chat-messages::-webkit-scrollbar-thumb {
    background: var(--chat-primary) !important;
    border-radius: 10px !important;
    border: 2px solid transparent !important;
    background-clip: content-box !important;
    min-height: 30px !important;
}

.chat-container .chat-main .chat-messages-wrapper .chat-messages::-webkit-scrollbar-thumb:hover {
    background: var(--chat-primary-hover) !important;
}

/* Supporto per Firefox */
.chat-container .chat-main .chat-messages-wrapper .chat-messages {
    scrollbar-width: auto !important;
    scrollbar-color: var(--chat-primary) rgba(0, 0, 0, 0.1) !important;
}

/* Supporto per Internet Explorer */
.chat-container .chat-main .chat-messages-wrapper .chat-messages {
    -ms-overflow-style: auto !important;
}

/* ======================================
   6. DROPDOWN MENU NELL'AREA INPUT
   ====================================== */

/* Menu toggle button */
.chat-container .sct-chat-menu-toggle {
    position: relative;
    z-index: 50;
    background-color: var(--chat-bg-light);
    transition: background-color 0.2s ease;
}

.chat-container .sct-chat-menu-toggle:hover {
    background-color: var(--chat-bg-hover);
}

.chat-container .sct-chat-menu-toggle.active {
    background-color: var(--chat-primary);
    color: #fff;
}

/* Menu dropdown container */
.chat-container .sct-chat-input-dropdown-menu {
    position: absolute;
    bottom: calc(100% + 5px);
    right: 8px;
    width: var(--chat-dropdown-width);
    background-color: var(--chat-bg);
    border: 1px solid var(--chat-border);
    border-radius: var(--chat-border-radius);
    box-shadow: var(--chat-box-shadow-light);
    z-index: var(--chat-zindex-dropdown);
    overflow: hidden;
    display: none; /* Nascosto di default */
    flex-direction: column;
    padding: 4px 0;
    transform-origin: bottom right;
    transform: scale(0.95);
    opacity: 0;
    transition: var(--chat-transition-fast);
}

.chat-container .sct-chat-input-dropdown-menu.open {
    display: flex;
    opacity: 1;
    transform: scale(1);
}

/* Elementi del menu */
.chat-container .sct-chat-input-dropdown-item {
    display: flex;
    align-items: center;
    padding: var(--chat-spacing-sm) var(--chat-spacing-md);
    cursor: pointer;
    color: var(--chat-text);
    text-decoration: none;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-size: var(--chat-font-size);
    transition: background-color 0.2s;
}

.chat-container .sct-chat-input-dropdown-item:hover {
    background-color: var(--chat-bg-hover);
}

.chat-container .sct-chat-input-dropdown-item:active {
    background-color: var(--chat-bg-active);
}

/* Icone negli elementi del menu */
.chat-container .sct-chat-input-dropdown-item [data-chat-icon],
.chat-container .sct-chat-input-dropdown-item svg {
    width: 18px;
    height: 18px;
    margin-right: var(--chat-spacing-md);
    flex-shrink: 0;
}

.chat-container .sct-chat-input-dropdown-item-text {
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ======================================
   7. MODALITÀ FULLSCREEN
   ====================================== */

/* Fix per l'input in modalità fullscreen */
.chat-container .chat-fullscreen .chat-input-wrapper {
    position: fixed !important; /* Forza fixed in modalità fullscreen */
    bottom: 0;
    background-color: var(--chat-bg);
    width: 100%;
    box-sizing: border-box;
    z-index: var(--chat-zindex-fullscreen);
    border-top: 1px solid var(--chat-border); /* Aggiunge separazione visiva */
    left: 0;
    right: 0;
    padding-bottom: env(safe-area-inset-bottom, var(--chat-spacing-md));
}

/* ======================================
   8. NUOVA STRUTTURA INPUT (SOLUZIONE FIX SPAZIO VUOTO)
   ====================================== */

/* Stile principale per il container di input - SOLUZIONE SPAZIO VUOTO */
.chat-container .chat-input-container {
    display: flex;
    align-items: center;
    padding: var(--chat-input-padding-y) var(--chat-input-padding-x);
    background-color: var(--chat-bg);
    border-top: 1px solid var(--chat-border);
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: var(--chat-zindex-fixed);
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
    margin-top: 0; /* Elimina qualsiasi margine superiore */
    margin-bottom: 0; /* Elimina qualsiasi margine inferiore */
}

/* Area di input principale */
.chat-container .chat-input-area {
    position: relative;
    flex: 1;
    min-width: 0;
    margin-right: var(--chat-spacing-md);
}

/* Pulsanti di azione */
.chat-container .chat-action-button {
    width: var(--chat-button-size);
    height: var(--chat-button-size);
    min-width: var(--chat-button-size);
    min-height: var(--chat-button-size);
    border-radius: var(--chat-button-radius);
    background-color: var(--chat-bg-light);
    color: var(--chat-text);
    border: 1px solid var(--chat-border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--chat-transition);
    position: relative;
    padding: 0;
    margin: 0;
    flex: 0 0 auto;
}

/* Contenitore dei pulsanti di azione */
.chat-container .chat-buttons-container {
    display: flex;
    gap: var(--chat-spacing-sm);
    align-items: center;
    flex-shrink: 0;
    z-index: 2;
}

/* Menu dropdown nella nuova struttura */
.chat-container .chat-dropdown-menu {
    position: absolute;
    bottom: 55px; /* Posizionato sopra i pulsanti */
    right: 10px;
    width: var(--chat-dropdown-width);
    background-color: var(--chat-bg);
    border: 1px solid var(--chat-border);
    border-radius: var(--chat-border-radius-lg);
    box-shadow: var(--chat-box-shadow-light);
    z-index: var(--chat-zindex-popover);
    overflow: hidden;
    display: none;
    transform-origin: bottom right;
    transform: scale(0.95);
    opacity: 0;
    transition: var(--chat-transition-fast);
}

.chat-container .chat-dropdown-menu.visible {
    display: block;
    opacity: 1;
    transform: scale(1);
}

/* Elementi del menu dropdown */
.chat-container .chat-dropdown-item {
    display: flex;
    align-items: center;
    padding: var(--chat-spacing-md) var(--chat-spacing-lg);
    cursor: pointer;
    transition: background-color 0.2s;
    color: var(--chat-text);
    text-decoration: none;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-size: var(--chat-font-size);
}

/* ======================================
   9. MEDIA QUERIES PER DISPOSITIVI MOBILI
   ====================================== */

@media (max-width: 767px) {
    .chat-container .chat-input-flex-container {
        padding: var(--chat-input-mobile-padding-y) var(--chat-input-mobile-padding-x);
        gap: var(--chat-spacing-sm);
    }
    
    .chat-container .sct-chat-input {
        padding: var(--chat-input-mobile-padding-y) var(--chat-input-mobile-padding-x);
        min-height: 36px;
        font-size: 16px; /* Previene lo zoom automatico su iOS */
    }
    
    .chat-container .sct-chat-input-button {
        width: var(--chat-button-mobile-size);
        height: var(--chat-button-mobile-size);
        min-width: var(--chat-button-mobile-size);
        min-height: var(--chat-button-mobile-size);
    }

    .chat-container .sct-chat-input-button svg,
    .chat-container .sct-chat-input-button [data-chat-icon] {
        width: var(--chat-button-icon-mobile-size);
        height: var(--chat-button-icon-mobile-size);
    }
    
    .chat-container .sct-chat-input-dropdown-menu {
        width: var(--chat-dropdown-mobile-width);
    }
    
    /* Nasconde il contatore di caratteri */
    .chat-container .sct-chat-char-counter {
        display: none;
    }
    
    /* CORREZIONE: L'input rimane all'interno del container della chat quando non è in fullscreen */
    .chat-container .chat-input-wrapper {
        position: sticky; /* Non fisso di default */
        bottom: 0;
        transform: translateZ(0); /* Previene il flicker durante lo scroll */
        -webkit-transform: translateZ(0);
        will-change: transform; /* Ottimizzazione per browser mobili */
        z-index: var(--chat-zindex-fixed); /* Sopra gli altri elementi ma sotto il fullscreen */
    }
    
    /* Chat input container per mobile */
    .chat-container .chat-input-container {
        padding: var(--chat-input-mobile-padding-y) var(--chat-input-mobile-padding-x);
    }
    
    .chat-container .chat-action-button {
        width: var(--chat-button-mobile-size);
        height: var(--chat-button-mobile-size);
        min-width: var(--chat-button-mobile-size);
        min-height: var(--chat-button-mobile-size);
    }
    
    /* Garantisce che l'input sia sempre visibile anche su mobile in modalità fullscreen */
    .chat-container .chat-fullscreen .chat-input-container {
        position: fixed !important;
        padding-bottom: calc(var(--chat-input-mobile-padding-y) + env(safe-area-inset-bottom, 0px));
        box-shadow: var(--chat-box-shadow-top);
    }
    
    /* Aggiunge spazio extra sotto i messaggi in fullscreen su mobile */
    .chat-container .chat-fullscreen .chat-messages {
        padding-bottom: calc(var(--chat-message-spacing) + 60px) !important;
    }
    
    /* Correzione specifica per la modalità fullscreen su mobile */
    .chat-container.chat-fullscreen .chat-input-wrapper {
        position: fixed !important;
        bottom: env(safe-area-inset-bottom, 0);
        left: 0;
        right: 0;
        z-index: calc(var(--chat-zindex-fixed) + 1);
    }

    .chat-container.chat-fullscreen .chat-messages-wrapper {
        padding-bottom: calc(70px + env(safe-area-inset-bottom, 0));
    }
}

/* Stile specifico per iPhone e dispositivi iOS */
@media screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 0) {
    /* Safari e Chrome su iOS */
    .chat-container .chat-input-wrapper {
        bottom: 0;
        margin-bottom: 0; /* Supporto per notch degli iPhone */
    }
    
    /* Assicura che l'input rimanga visibile quando appare la tastiera */
    .chat-container .chat-input-wrapper.keyboard-active {
        position: absolute;
    }
}

/* Aggiungere questa classe quando la tastiera è attiva su mobile (potrebbe richiedere JS per il toggle) */
.chat-container.keyboard-active .chat-input-wrapper {
    position: absolute !important;
    bottom: 0 !important;
}