/* Styles pour les icônes de toggle du chat */
.messages-container-wrapper .chat-core-wrapper .chat-core .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    -webkit-transform: translateZ(0);
}

.messages-container-wrapper .chat-core-wrapper .chat-core .header .chat-toggle-icons {
    display: flex;
    gap: 10px;
    margin-left: auto; /* Aligne les icônes à droite */
}

.messages-container-wrapper .chat-core-wrapper .chat-core .header .chat-toggle-icons {
    color: white;
    opacity: 1; /* Opacité par défaut de 0.8 */
    cursor: pointer;
    transition: opacity 0.3s ease;
    font-size: 1.6em; /* Taille de police de 1.5em */
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.7); /* Ombre pour rendre les icônes plus visibles */
}

.messages-container-wrapper .chat-core-wrapper .chat-core .header .chat-toggle-icons i:hover {
    opacity: 1;
}

/* Style spécifique pour l'icône collapse quand le chat est agrandi */
.messages-container-wrapper .chat-core-wrapper .chat-core .content-wrapper.expanded ~ .header .chat-toggle-icons .chat-collapse-icon {
    background-color: #000;
    padding: 5px 8px;
}

/* Style pour le texte 'OUVRIR LE CHAT' */
.messages-container-wrapper .chat-core-wrapper .chat-core .header .chat-toggle-icons .open-chat-text {
    color: white;
    font-weight: 600;
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.7);
    letter-spacing: 0px;
    margin-top: 7px;
    font-size: 0.5em;
    display: none; /* Masqué par défaut */
}

/* Afficher le texte uniquement quand il n'a pas la classe hidden */
.messages-container-wrapper .chat-core-wrapper .chat-core .header .chat-toggle-icons .open-chat-text:not(.hidden) {
    display: inline-block;
}

/* Style pour l'icône collapse quand le chat est agrandi */
.messages-container-wrapper .chat-core-wrapper .chat-core .header .chat-toggle-icons .chat-collapse-icon.styled {
    background-color: rgba(0,0,0,0.8);
    padding: 5px 8px;
}

/* Masquer les icônes selon l'état */
.messages-container-wrapper .chat-core-wrapper .chat-core .header .chat-toggle-icons i.hidden {
    display: none;
}

.chat-toggle-icons { display: none !important;}

@media screen and (max-width: 1024px) {
    .room-container-wrapper .actions-container-wrapper .header { z-index:3; }
    .message-form-wrapper .message-input { font-size: 16px;font-weight: 500;  }
    .message-form-wrapper .message-input::placeholder {
        font-weight: 500;
      }
    .actions-container-wrapper { border-radius:10px !important; }
}

@media screen and (max-width: 767px) {

    .room-container-wrapper .media-chat-wrapper { height: 100svh;position: relative;max-height: 100svh;overflow: hidden;; }
    
    .chat-toggle-icons { display: flex !important;}
    .chat-toggle-icons .icons {display: flex; gap: 10px; flex-direction: column; }

    .girl-details-container-wrapper { margin-top:18px; }
    
    
    .messages-container-wrapper .chat-core-wrapper .chat-core .content-wrapper { 
        padding: 0px; 
        position: relative;
        
        /* Masquer la scrollbar tout en conservant le défilement */
        -ms-overflow-style: none;  /* Pour Internet Explorer et Edge */
        scrollbar-width: none;     /* Pour Firefox */
    }
    
    /* Masquer la scrollbar pour Chrome, Safari et Opera */
    .messages-container-wrapper .chat-core-wrapper .chat-core .content-wrapper::-webkit-scrollbar { 
        display: none;
    }
    
    
    .messages-container-wrapper .chat-core-wrapper .chat-core .content .messages .message.bot { background: transparent;background-color:rgba(203,18,88,.8);color:#FFF;}
    .messages-container-wrapper .chat-core-wrapper .chat-core .content .messages .message.preset { background: transparent;background-color:rgba(32,40,66,.8);color:#FFF;}
    .messages-container-wrapper .chat-core-wrapper .chat-core .content .messages .message.user { background: transparent;background-color:rgba(32,40,66,.8);color:#FFF;}
    
    .room-container-wrapper {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 0;
        border-bottom: 0;
        min-height: auto;
        height: 100svh;
        max-height: 100svh;
    }
    
    .message-actions i { margin-right:3px; }
    
    /* Classe qui sera ajoutée par JavaScript quand il y a assez d'espace */
    .videos-container-wrapper .videos-container.has-gradient-effect { 
        -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent 100%);
        mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent 100%);
    }
    

    
    /* Suppression du mask-image quand le chat est agrandi */
    .messages-container-wrapper .chat-core-wrapper .chat-core .content-wrapper.expanded .content {
        -webkit-mask-image: none;
        mask-image: none;
    }
    
    /* Styles pour le chat étendu */
    .messages-container-wrapper .chat-core-wrapper .chat-core .content-wrapper.expanded {
        height: 66vh;
        background-size: 100%;
        background-repeat: repeat-y;
        background-position: left;
        background-color: rgba(0,0,0,.8);
    }
    
    .messages-container-wrapper .chat-core-wrapper .chat-core .content-wrapper.expanded .messages .message.bot {
        background-color: rgba(203,18,88,1);
    }

    
    
    /* Menu d'actions */
    
    .room-container-wrapper .actions-container-wrapper { max-height:50vh;bottom:60px;right:5px;border:1px solid #202842}
    .girl-preset-action { padding:12px 15px!important;}
    
    
    
    /* On affiche l'effet de fondu transparent, que si le chat fait au moins 160px de height */
    .messages-container-wrapper .chat-core-wrapper .chat-core .content {
        mask-image: linear-gradient(
            to bottom, 
            transparent 0%, 
            rgb(255,255,255,1) min(30px, calc(100% - 130px))
        );
        padding-bottom:7px; 
    }

    .message-form-wrapper { padding:3px;}
    

    
    
}