/**
 * Styles pour le widget de chat Frennly Chat Bot
 */

/* Variables CSS basées sur les maquettes CTICM */
:root {
   --frennly-chat-primary: #6B46C1;
   /* Violet CTICM */
   --frennly-chat-primary-dark: #553C9A;
   --frennly-chat-secondary: #F8FAFC;
   --frennly-chat-accent: #FF6B35;
   /* Orange du bouton flottant */
   --frennly-chat-blue: #3B82F6;
   /* Bleu de l'interface */
   --frennly-chat-blue-dark: #1E40AF;
   --frennly-chat-teal: #A7F3D0;
   /* Teal/Vert menthe du widget de prévisualisation */
   --frennly-chat-teal-dark: #6EE7B7;
   --frennly-chat-hexagon-blue: #2563EB;
   /* Bleu de l'hexagone */
   --frennly-chat-success: #10B981;
   --frennly-chat-warning: #F59E0B;
   --frennly-chat-error: #EF4444;
   --frennly-chat-text: #1F2937;
   --frennly-chat-text-light: #6B7280;
   --frennly-chat-border: #E5E7EB;
   --frennly-chat-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
   --frennly-chat-shadow-preview: 0 4px 12px rgba(0, 0, 0, 0.1);
   --frennly-chat-radius: 12px;
   --frennly-chat-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}


/* Widget principal */
.frennly-chat-widget {
   position: fixed;
   bottom: 20px;
   right: 20px;
   z-index: 999999;
   font-size: 14px;
   line-height: 1.4;
}

/* Bouton flottant (affiché uniquement quand l'interface est ouverte) */
.frennly-chat-toggle {
   position: fixed;
   bottom: 20px;
   right: 20px;
   width: 60px;
   height: 60px;
   background: var(--frennly-chat-accent);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   box-shadow: var(--frennly-chat-shadow);
   transition: var(--frennly-chat-transition);
   border: 3px solid white;
   z-index: 1000000;
}

.frennly-chat-toggle:hover {
   background: #E55A2B;
   transform: scale(1.05);
}

.frennly-chat-icon {
   font-size: 24px;
   color: white;
   font-weight: bold;
   line-height: 1;
   display: flex;
   align-items: center;
   justify-content: center;
}

.frennly-chat-badge {
   position: absolute;
   top: -5px;
   right: -5px;
   background: var(--frennly-chat-error);
   color: white;
   border-radius: 50%;
   width: 20px;
   height: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 12px;
   font-weight: bold;
}

/* Widget de prévisualisation (affiché par défaut) */
.frennly-chat-preview {
   cursor: pointer;
   position: fixed;
   right: 0;
   bottom: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   background-color: var(--color-secondary);
   color: var(--white);
   box-shadow: -12px 12px 24px rgba(0, 0, 0, .3);
   padding: 0 25px 30px;
}

    @media (max-width: 991px) {
        .frennly-chat-preview {
            bottom: 150px;
        }
    }

/* Contenu du preview (masqué par défaut, affiché au hover) */
.frennly-chat-preview-content {
   display: flex;
   flex-direction: column;
   align-items: center;
   font-size: 1.1rem;
   font-weight: 600;
   text-align: center;
   opacity: 0;
   max-height: 0;
   overflow: hidden;
   transition: opacity 0.4s ease, max-height 0.4s ease, margin-top 0.4s ease;
}

/* Hover */
.frennly-chat-preview:hover .frennly-chat-preview-content {
   pointer-events: auto;
   max-height: 500px;
   opacity: 1;
}

.frennly-chat-preview .frennly-chat-preview-content p {
   margin: 0;
}

/* Hexagone avec photo (toujours visible) */
.frennly-chat-preview-hexagon {
   margin-top: -20px;
   margin-bottom: 10px;
}

.frennly-chat-hexagon-image {
   position: relative;
   clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
   width: 70px;
   height: 80px;
}

.frennly-chat-hexagon-image img {
   object-fit: cover;
   object-position: center;
   width: 100%;
   height: 100%;
}

.frennly-chat-hexagon-fallback {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
}

/* Icône poignée de main */
.frennly-chat-preview-handshake {
   margin-top: 12px;
}

.frennly-chat-handshake-icon {
   font-size: 14px;
   position: relative;
   z-index: 2;
   line-height: 1;
}

.frennly-chat-stars {
   font-size: 9px;
   position: absolute;
   animation: frennly-chat-star-twinkle 2s ease-in-out infinite;
   line-height: 1;
}

.frennly-chat-stars::before {
   content: '✨';
   position: absolute;
   top: -6px;
   left: -6px;
   animation: frennly-chat-star-rotate 3s linear infinite;
   font-size: 7px;
}

.frennly-chat-stars::after {
   content: '✨';
   position: absolute;
   bottom: -6px;
   right: -6px;
   animation: frennly-chat-star-rotate 3s linear infinite reverse;
   font-size: 7px;
}

@keyframes frennly-chat-star-twinkle {

   0%,
   100% {
      opacity: 1;
      transform: scale(1);
   }

   50% {
      opacity: 0.7;
      transform: scale(1.1);
   }
}

@keyframes frennly-chat-star-rotate {
   0% {
      transform: rotate(0deg) scale(0.8);
      opacity: 0.8;
   }

   50% {
      transform: rotate(180deg) scale(1.2);
      opacity: 1;
   }

   100% {
      transform: rotate(360deg) scale(0.8);
      opacity: 0.8;
   }
}

/* Bouton Commencer dans le widget de prévisualisation */
.frennly-chat-preview-start {
   cursor: pointer;
   background-color: var(--color-primary);
   color: var(--white);
   border: 0;
   font-weight: 600;
   margin-top: 20px;
   padding: 8px 16px;
   transition: background-color .4s;
}

/* Hover */
.frennly-chat-preview-start:hover {
   background-color: var(--color-primary--light);
}

.frennly-chat-preview-start:active {
   transform: translateY(0);
}

/* Interface de chat hexagonale selon les maquettes */
.frennly-chat-interface {
   position: fixed;
   bottom: 80px;
   right: 20px;
   width: 900px;
   height: 700px;
   background: white;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   border: 1px solid var(--frennly-chat-border);
}

/* En-tête avec design CTICM */
.frennly-chat-header {
   background: var(--frennly-chat-primary);
   color: white;
   padding: 20px 25px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-bottom: 3px solid var(--frennly-chat-primary-dark);
}

.frennly-chat-title h3 {
   margin: 0;
   font-size: 16px;
   font-weight: 600;
}

.frennly-chat-user {
   font-size: 12px;
   opacity: 0.8;
}

.frennly-chat-controls {
   display: flex;
   gap: 10px;
}

.frennly-chat-btn-minimize,
.frennly-chat-btn-close {
   background: none;
   border: none;
   color: white;
   font-size: 18px;
   cursor: pointer;
   padding: 5px;
   border-radius: 3px;
   transition: var(--frennly-chat-transition);
}

.frennly-chat-btn-minimize:hover,
.frennly-chat-btn-close:hover {
   background: rgba(255, 255, 255, 0.2);
}

/* Contenu principal */
.frennly-chat-content {
   flex: 1;
   display: flex;
   flex-direction: column;
   overflow: hidden;
}

/* Interface de connexion */
.frennly-chat-login {
   padding: 40px 20px;
   text-align: center;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   height: 100%;
}

.frennly-chat-login-message {
   margin-bottom: 30px;
}

.frennly-chat-login-message p {
   font-size: 16px;
   color: var(--frennly-chat-text-light);
   margin: 0;
}

.frennly-chat-login-actions {
   display: flex;
   gap: 15px;
}

.frennly-chat-btn-primary,
.frennly-chat-btn-secondary {
   padding: 12px 24px;
   border-radius: var(--frennly-chat-radius);
   text-decoration: none;
   font-weight: 500;
   transition: var(--frennly-chat-transition);
   border: none;
   cursor: pointer;
   font-size: 14px;
}

.frennly-chat-btn-primary {
   background: var(--frennly-chat-primary);
   color: white;
}

.frennly-chat-btn-primary:hover {
   background: var(--frennly-chat-primary-dark);
}

.frennly-chat-btn-secondary {
   background: var(--frennly-chat-secondary);
   color: var(--frennly-chat-text);
}

.frennly-chat-btn-secondary:hover {
   background: #e0e0e0;
}

/* Interface de chat principale */
.frennly-chat-main {
   display: flex;
   height: 100%;
}

/* Barre latérale gauche */
.frennly-chat-sidebar-left {
   display: flex;
   flex-direction: column;
   width: 280px;
   background: white;

   /*border-right: 1px solid var(--gray-400);*/
}

/*Zone de lancement nouvelle conversation*/
.frennly-chat-sidebar-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   /*border-bottom: 1px solid var(--frennly-chat-border);*/
}

/*Bouton de lancement*/
.frennly-chat-btn-new {
   display: flex;
   align-items: center;
   justify-content: center;
   border-top: 1px solid var(--gray-400);
   border-bottom: 1px solid var(--gray-400);
   border-left: 0;
   border-right: 0;
   background: white;
   padding: 1.5rem 2rem;
   gap: 0.75rem;
   cursor: pointer;
   font-size: 16px;
   width: 100%;
   color: var(--color-primary);
   font-family: var(--font-primary);
}

.frennly-chat-btn-new .icon-plus {
   background: var(--color-primary);
   color: white;
   border: none;
   border-radius: 50%;
   width: 24px;
   height: 24px;
   min-width: 24px;
   min-height: 24px;
   font-size: 14px;
   display: inline-flex;
   justify-content: center;
   align-items: center;
   scale: 1;
   transition: scale 0.3s ease-in-out
}

.frennly-chat-btn-new:hover .icon-plus,
.frennly-chat-btn-new:focus .icon-plus {
   scale: 1.1;
}


/*Zone des conversations*/
.frennly-chat-conversations-container {
   flex: 1;
   overflow-y: auto;
   /*max-height: 200px;*/
   max-height: calc(100vh - 28rem);
   padding: 2rem 1rem;
   min-height: 0;
   scrollbar-width: thin;
   scrollbar-color: var(--color-primary) transparent;
   position: relative
}

.frennly-chat-daily-limit-info {
    background-color: #D3ECF6;
    color: var(--color-primary);
    font-size: 1.2rem;
    text-wrap: balance;
    margin: 0 16px;
    padding: 8px 16px;
}

.frennly-chat-daily-limit-info strong {
    color: var(--color-primary);
}



.frennly-chat-conversations-container::-webkit-scrollbar {
   width: 6px;
}

.frennly-chat-conversations-container::-webkit-scrollbar-track {
   background: transparent;
}

.frennly-chat-conversations-container::-webkit-scrollbar-thumb {
   background: var(--color-primary);
   border-radius: 3px;
}

.frennly-chat-conversations::-webkit-scrollbar-thumb:hover {
   background: var(--color-primary);
}

.frennly-chat-conversations-container h4 {
   padding: 0 1rem;
   margin-bottom: 1.5rem;
   font-weight: 400;
   font-size: 1.6rem;
   color: var(--color-secondary);
}

/*Bloc de conversation barre latérale gauche - individuelle*/
.frennly-chat-conversation {
   padding: 1rem;
   margin-bottom: 1.25rem;
   background: white;
   border-radius: 5px;
   cursor: pointer;
   transition: all 0.3s ease-in-out;
   position: relative;
}

.frennly-chat-conversation:hover {
   /*background: #f8f8f8;*/
}

.frennly-chat-conversation.active .frennly-chat-conversation-title {
   /*background: var(--frennly-chat-primary);
   color: white;*/
   font-weight: 600;
}

.frennly-chat-conversation-title {
   font-weight: 400;
   color: var(--color-primary);
   font-size: 1.4rem;
   line-height: 1.3;
   text-wrap: pretty;
   transition: all 0.3s ease-in-out;
}

.frennly-chat-conversation:hover {
   /*font-weight: 500;*/
   background: var(--gray-100);
}

.frennly-chat-conversation-time {
   display: none;
}

/*Actions de conversations*/
.frennly-chat-conversation-actions {
   position: absolute;
   top: -0.5rem;
   right: 2.5px;
   display: none;
   gap: 4px;
}

.frennly-chat-conversation:hover .frennly-chat-conversation-actions {
   display: flex;
}

.frennly-chat-btn-delete {
   border: none;
   cursor: pointer;
   font-size: 12px;
   padding: 0;
   border-radius: 50%;
   aspect-ratio: 1 / 1;
   width: 24px;
   display: flex;
   justify-content: center;
   align-items: center;
   transition: all 0.3s ease-in-out;
   background: var(--color-primary);
   color: white;
}



.frennly-chat-btn-delete:hover {
   background: white;
   color: var(--color-primary);
}

/* Questions rapides */
/*.frennly-chat-quick-questions {
   padding: 15px;
   border-top: 1px solid var(--frennly-chat-border);
   display: flex;
   flex-direction: column;
   overflow: hidden;
   max-height: 300px;
}

.frennly-chat-quick-questions-header {
   flex-shrink: 0;
}

.frennly-chat-quick-questions-header h5 {
   margin: 0 0 10px 0;
   font-size: 13px;
   font-weight: 600;
   color: var(--frennly-chat-text);
}

.frennly-chat-quick-questions-list {
   display: flex;
   flex-direction: column;
   gap: 8px;
   overflow-y: auto;
   flex: 1;
   min-height: 0;
   scrollbar-width: thin;
   scrollbar-color: var(--frennly-chat-border) transparent;
}

.frennly-chat-quick-questions-list::-webkit-scrollbar {
   width: 6px;
}

.frennly-chat-quick-questions-list::-webkit-scrollbar-track {
   background: transparent;
}

.frennly-chat-quick-questions-list::-webkit-scrollbar-thumb {
   background: var(--frennly-chat-border);
   border-radius: 3px;
}

.frennly-chat-quick-questions-list::-webkit-scrollbar-thumb:hover {
   background: var(--frennly-chat-text-light);
}

.frennly-chat-quick-question {
   background: white;
   border: 1px solid var(--frennly-chat-border);
   border-radius: 6px;
   padding: 8px 12px;
   font-size: 12px;
   text-align: left;
   cursor: pointer;
   transition: var(--frennly-chat-transition);
   color: var(--frennly-chat-text);
}

.frennly-chat-quick-question:hover {
   background: var(--frennly-chat-primary);
   color: white;
   border-color: var(--frennly-chat-primary);
}*/



/* Zone de chat principale - Centre */
.frennly-chat-main-area {
   position: relative;
   flex: 1;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   /* S'assurer que le conteneur a une hauteur définie pour que le scroll fonctionne */
   min-height: 0;
}

/* Messages */
.frennly-chat-messages {
   flex: 1;
   overflow-y: auto;
   overflow-x: hidden;
   padding: 20px;
   background: white;
   /* Améliorer l'expérience de scroll */
   scroll-behavior: smooth;
   -webkit-overflow-scrolling: touch;
   /* S'assurer que le conteneur a une hauteur minimale pour que le scroll fonctionne */
   min-height: 0;
   /* S'assurer que le conteneur peut scroller indépendamment */
   position: relative;
}

/* Messages en mode page - hauteur fixe pour le scroll */
.frennly-chat-messages-page {
   flex: none !important;
   height: calc(100vh - 250px);
   min-height: 400px;
   max-height: 800px;
   overflow-y: auto !important;
   overflow-x: hidden !important;
   padding-bottom: 10rem;
   scrollbar-width: thin;
   scrollbar-color: var(--color-primary) transparent;
}

.frennly-chat-messages-page::-webkit-scrollbar {
   width: 6px;
}

.frennly-chat-messages-page::-webkit-scrollbar-track {
   background: transparent;
}

.frennly-chat-messages-page::-webkit-scrollbar-thumb {
   background: var(--color-primary);
   border-radius: 3px;
}

.frennly-chat-messages-page::-webkit-scrollbar-thumb:hover {
   background: var(--color-primary);
}

/*Message accueil par defaut*/
.frennly-chat-welcome {
   padding: 30px 25px;
   color: var(--gray-800);

}

.frennly-chat-welcome-header {
   display: flex;
   align-items: flex-start;
   gap: 20px;
   margin-bottom: 25px;
}

.frennly-chat-avatar {
   flex-shrink: 0;
}

.frennly-chat-avatar-image {
   width: 60px;
   height: 60px;
   background: var(--frennly-chat-blue);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 24px;
   color: white;
   border: 3px solid white;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.frennly-chat-welcome-text {
   flex: 1;
}

.frennly-chat-welcome-text:after {
   content: "";
   display: block;
   margin-top: 2rem;
   height: 1px;
   background: var(--gray-400);
   width: calc(100% - 5.5rem);
}

.frennly-chat-welcome-text h4 {
   margin: 0 0 12px 0;
   color: var(--gray-400) font-size: 18px;
   font-weight: 600;
}

.frennly-chat-welcome-text p {
   margin: 0;
   font-size: 14px;
   line-height: 1.5;
}

/*.frennly-chat-welcome-actions {
   text-align: center;
}

.frennly-chat-btn-start {
   background: var(--frennly-chat-success);
   color: white;
   border: none;
   border-radius: var(--frennly-chat-radius);
   padding: 12px 24px;
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
   transition: var(--frennly-chat-transition);
}

.frennly-chat-btn-start:hover {
   background: #059669;
   transform: translateY(-1px);
}*/


/*MESSAGE*/
.frennly-chat-message {
   margin-bottom: 20px;
   display: flex;
   align-items: flex-start;
   flex-wrap: wrap;
   padding: 0 25px 10px;
   gap: 5px;
}

/*avatar*/
.frennly-chat-message-user:after,
.frennly-chat-message-assistant:before {
   content: "";
   display: block;
   flex-shrink: 0;
   width: 45px;
   height: 80px;
   background-color: transparent;
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain
}

/*Message user*/
.frennly-chat-message-user {
   justify-content: flex-end;
}

.frennly-chat-message-user:after {
   background-image: url(../images/user.svg);
   margin-left: 1rem;
}

/*Message assistant*/
.frennly-chat-message-assistant {
   justify-content: flex-start;
}

.frennly-chat-message-assistant:before {
   background-image: url(../images/octave-avatar.png);
}

.frennly-chat-message-assistant:after {
   /*separateur*/
   content: "";
   display: block;
   margin-top: 2rem;
   height: 1px;
   background: var(--gray-400);
   width: calc(100% - 5.5rem);
   margin-left: 4.5rem
}

/*Zone de contenu message*/
.frennly-chat-message-content {
   flex: 1;
   min-width: 90%;
   max-width: 90%;
   padding: 1rem 1.5rem;
   position: relative;
}

.frennly-chat-message-user .frennly-chat-message-content {
   background: var(--gray-100);
   border-radius: 2rem;
   padding: 2.5rem 3rem;
}

.frennly-chat-message-assistant .frennly-chat-message-content {}

.frennly-chat-message-text {
   margin-bottom: 8px;
   word-wrap: break-word;
   line-height: 1.5;
}

/* Styles pour le contenu HTML formaté */
.frennly-chat-message-text h1,
.frennly-chat-message-text h2,
.frennly-chat-message-text h3 {
   margin: 0 0 10px 0;
   font-weight: 600;
   color: var(--frennly-chat-text);
}

.frennly-chat-message-text h1 {
   font-size: 18px;
}

.frennly-chat-message-text h2 {
   font-size: 16px;
}

.frennly-chat-message-text h3 {
   font-size: 14px;
}

.frennly-chat-message-text p {
   margin: 0 0 10px 0;
}

.frennly-chat-message-text p:last-child {
   margin-bottom: 0;
}

.frennly-chat-message-text strong {
   font-weight: 600;
   color: var(--frennly-chat-text);
}

.frennly-chat-message-text em {
   font-style: italic;
}

.frennly-chat-message-text code {
   background: var(--frennly-chat-secondary);
   border: 1px solid var(--frennly-chat-border);
   border-radius: 3px;
   padding: 2px 6px;
   font-family: 'Courier New', monospace;
   font-size: 13px;
   color: var(--frennly-chat-primary);
}

.frennly-chat-message-text pre {
   background: var(--frennly-chat-secondary);
   border: 1px solid var(--frennly-chat-border);
   border-radius: var(--frennly-chat-radius);
   padding: 12px;
   margin: 10px 0;
   overflow-x: auto;
}

.frennly-chat-message-text pre code {
   background: none;
   border: none;
   padding: 0;
   font-size: 12px;
   line-height: 1.4;
}

.frennly-chat-message-text ul,
.frennly-chat-message-text ol {
   margin: 10px 0;
   padding-left: 20px;
}

.frennly-chat-message-text li {
   margin: 5px 0;
   line-height: 1.4;
}

.frennly-chat-message-text a {
   color: var(--frennly-chat-primary);
   text-decoration: none;
   border-bottom: 1px solid transparent;
   transition: var(--frennly-chat-transition);
}

.frennly-chat-message-text a:hover {
   border-bottom-color: var(--frennly-chat-primary);
}

.frennly-chat-message-text blockquote {
   border-left: 3px solid var(--frennly-chat-primary);
   padding-left: 15px;
   margin: 10px 0;
   font-style: italic;
   color: var(--frennly-chat-text-light);
}

.frennly-chat-message-text table {
   width: 100%;
   border-collapse: collapse;
   margin: 10px 0;
   font-size: 13px;
}

.frennly-chat-message-text th,
.frennly-chat-message-text td {
   border: 1px solid var(--frennly-chat-border);
   padding: 8px 12px;
   text-align: left;
}

.frennly-chat-message-text th {
   background: var(--frennly-chat-secondary);
   font-weight: 600;
}

.frennly-chat-message-text hr {
   border: none;
   border-top: 1px solid var(--frennly-chat-border);
   margin: 15px 0;
}

.frennly-chat-message-time {
   font-size: 11px;
   opacity: 0.7;
   text-align: right;
}

/* Zone de saisie */
.frennly-chat-input-area {
   position: absolute;
   bottom: 0rem;
   padding: 20px 20px 50px;
   width: 100%;
   background: transparent;
}

.frennly-chat-input-area:after {
   content: "";
   position: absolute;
   display: block;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 15rem;
   background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
   z-index: 0;
}

[id="frennly-chat-input-loading"] {
   position: relative;
   z-index: 1;
}

.frennly-chat-input-container {
   position: relative;
   z-index: 1;
   display: flex;
   gap: 10px;
   align-items: center;
}

.frennly-chat-input-container textarea {
   flex: 1;
   border: 4px solid var(--color-primary);
   background: white;
   border-radius: 0;
   padding: 12px;
   resize: none;
   font-family: inherit;
   font-size: 14px;
   line-height: 1.4;
   min-height: 20px;
   max-height: 120px;
   height: auto !important;
   box-shadow: 0 0 0 5px rgba(0, 115, 170, 0);
   transition: all 0.3s ease-in-out;
}

   /* Limite d'échanges atteinte */
   .frennly-chat-input-container textarea:disabled {
      font-size: 1.6rem;
      min-height: 52px;
   }

      @media (min-width: 576px) {
         .frennly-chat-input-container textarea:disabled {
               min-height: 40px;
         }
      }


.frennly-chat-input-container textarea::placeholder {
   color: var(--color-primary);
   /* font-style: italic; */
   /* opacity: 0.9; */
}

    .frennly-chat-input-container textarea:disabled::placeholder {
        font-size: 1rem;
    }

.frennly-chat-input-container textarea:focus {
   outline: none;
   border: 4px solid var(--color-secondary);
   box-shadow: 0 0 0 5px rgba(0, 115, 170, 0.1);
}

.frennly-chat-btn-send {
   background: var(--color-primary);
   color: white;
   border: none;
   border-radius: 3rem;
   width: 30px;
   height: 45px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.3s ease-in-out;
}

.frennly-chat-btn-send .icon-chevron {
   transform: rotate(90deg);
   line-height: inherit;
}

.frennly-chat-btn-send:hover:not(:disabled) {
   background: var(--color-secondary);
}

.frennly-chat-btn-send:disabled {
   background: var(--gray-400);
   cursor: not-allowed;
}

.frennly-chat-send-icon {
   font-size: 16px;
}

.frennly-chat-input-footer {
   margin-top: 10px;
}

.frennly-chat-token-info {
   font-size: 12px;
   color: var(--frennly-chat-text-light);
}

.frennly-chat-token-progress {
   width: 100%;
   height: 4px;
   background: var(--frennly-chat-border);
   border-radius: 2px;
   margin-top: 4px;
   overflow: hidden;
}

.frennly-chat-token-bar {
   height: 100%;
   background: var(--frennly-chat-primary);
   transition: width 0.3s ease;
   width: 0%;
}

.frennly-chat-token-bar.warning {
   background: var(--frennly-chat-warning);
}

.frennly-chat-token-bar.error {
   background: var(--frennly-chat-error);
}

/* Barre latérale droite */
.frennly-chat-sidebar-right {
   position: relative;
   display: flex;
   flex-direction: column;
   width: 28%;
   height: 100vh;
   min-height: 400px;
   max-height: 960px;
   overflow-y: auto !important;
   overflow-x: hidden !important;
   padding: 5rem 2.5rem 1.5rem;
   background: var(--gray-200);
   scrollbar-width: thin;
   scrollbar-color: var(--color-primary) transparent;
}


.frennly-chat-sidebar-right::-webkit-scrollbar {
   width: 6px;
}

.frennly-chat-sidebar-right::-webkit-scrollbar-track {
   background: transparent;
}

.frennly-chat-sidebar-right ::-webkit-scrollbar-thumb {
   background: var(--color-primary);
   border-radius: 3px;
}

.frennly-chat-sidebar-right::-webkit-scrollbar-thumb:hover {
   background: var(--color-primary);
}


.frennly-chat-sidebar-right>div+div {}



/* Section Référent Technique */
.frennly-chat-referent-technique {
   padding: 0;
   margin-bottom: 3.5rem;
}

.frennly-chat-referent-content {
   margin-top: 1rem;
   display: flex;
   flex-direction: row;
   gap: 15px;
   overflow-x: auto;
   overflow-y: hidden;
   padding: 10px 0;
   scrollbar-width: thin;
   scrollbar-color: var(--frennly-chat-border) transparent;
}

.frennly-chat-referent-content::-webkit-scrollbar {
   width: 6px;
}

.frennly-chat-referent-content::-webkit-scrollbar-track {
   background: transparent;
}

.frennly-chat-referent-content::-webkit-scrollbar-thumb {
   background: var(--frennly-chat-border);
   border-radius: 3px;
}

.frennly-chat-referent-content::-webkit-scrollbar-thumb:hover {
   background: var(--frennly-chat-text-light);
}

.frennly-chat-referent-card {
   background: white;
   border-radius: 0;
   padding: 2rem;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   position: relative;
}

.frennly-chat-referent-badge {
   display: inline-block;
   background: var(--frennly-chat-primary);
   color: white;
   padding: 0.65rem 2.5rem;
   border-radius: 0.5rem;
   font-size: 1.1rem;
   font-weight: 700;
   letter-spacing: 0.5px;
   margin-bottom: 1.1rem;
}

.frennly-chat-referent-name {
   font-size: 1.8rem;
   font-weight: 700;
   color: var(--gray-800);
   margin-bottom: 1.1rem;
   line-height: 1.3;
}

.frennly-chat-referent-poste {
   display: none;
}

.frennly-chat-referent-phone,
.frennly-chat-referent-email {
   display: flex;
   align-items: center;
   gap: 1rem;
   font-size: 1.4rem;
   color: var(--gray-800);
   margin-bottom: 1rem;
   line-height: 1.4;
}

.frennly-chat-referent-phone:last-child,
.frennly-chat-referent-email:last-child {
   margin-bottom: 0;
}

.frennly-chat-referent-icon {
   background: var(--color-primary);
   width: 2.5rem;
   display: inline-flex;
   justify-content: center;
   align-items: center;
   aspect-ratio: 1;
   border-radius: 50%;
}

.frennly-chat-referent-phone-number {
   color: var(--gray-800);
   word-break: break-word;
}

.frennly-chat-referent-email-link {
   color: var(--color-primary);
   text-decoration: underline;
   text-underline-offset: 0.25rem;
   word-break: break-word;
   transition: color 0.2s;
}

.frennly-chat-referent-email-link:hover {
   color: var(--color-primary);
}

/* SOURCES */
.frennly-chat-sources-section {
   padding: 0;
   margin-bottom: 3.5rem;
}

.frennly-chat-sources {
   flex: 1;
}

.frennly-chat-sources-label {
   font-size: 1.6rem;
   font-weight: 600;
   color: var(--color-primary);
   margin: 2rem 0 1.5rem;
}

.frennly-chat-sources-label:first-child {}

.frennly-chat-source-doc {
   margin-bottom: 2rem;
}

.frennly-chat-source-doc-description {
   font-size: 1.4rem;
   font-weight: 400;
   color: var(--gray-800);
   line-height: 1.2;
   margin-bottom: 0.75rem;
}

.frennly-DLbloc {
   padding: 0.55rem 1rem;
   background: var(--color-quaternary);
   color: white;
}

.frennly-DLbloc>span {
   margin-right: auto;
   font-size: 1.5rem;
   font-weight: 300;
}

/* Contenu lié */
.frennly-chat-related-content {
   padding: 0;
}

.frennly-chat-related-sections {
   display: flex;
   flex-direction: column;
}

.frennly-chat-related-section {
   margin-bottom: 1rem;
}

.frennly-chat-related-label {
   font-size: 1.6rem;
   font-weight: 600;
   color: var(--color-primary);
   margin: 2rem 0 1.5rem;
}

.frennly-chat-related-content-list {
   padding: 8px 0;
   font-size: 11px;
   color: var(--frennly-chat-text-light);
}

/*fallback pour chip*/
#formations-content .molecule_card-border-shadow .atom_chip {
   max-width: 14ch;
   padding: 5px 7px;
}

#formations-content .molecule_card-border-shadow .atom_button--xsmall {
   display: inline-block;
   margin-top: 0.75rem;
}

#formations-content .molecule_card-border-shadow .molecule_notation {
   margin-top: 0.75rem;
}

#prestations-section .molecule_card-border-shadow .atom_chip {
   max-width: 45ch;
   padding: 5px 7px;
}

/* Contenu lié */


.frennly-chat-sources-empty {
   text-align: center;
   color: var(--frennly-chat-text-light);
   font-size: 13px;
   padding: 20px;
}

.frennly-chat-source {
   background: white;
   border-radius: var(--frennly-chat-radius);
   padding: 12px;
   margin-bottom: 10px;
   border-left: 3px solid var(--frennly-chat-primary);
}

.frennly-chat-source-header {
   margin-bottom: 8px;
}

.frennly-chat-source-type {
   background: var(--frennly-chat-primary);
   color: white;
   padding: 2px 8px;
   border-radius: 12px;
   font-size: 11px;
   font-weight: 500;
   text-transform: uppercase;
}

.frennly-chat-source-title {
   margin: 0 0 6px 0;
   font-size: 13px;
   font-weight: 500;
}

.frennly-chat-source-title a {
   color: var(--frennly-chat-primary);
   text-decoration: none;
}

.frennly-chat-source-title a:hover {
   text-decoration: underline;
}

.frennly-chat-source-description {
   margin: 0;
   font-size: 12px;
   color: var(--frennly-chat-text-light);
   line-height: 1.3;
}

/* Types de sources */
.frennly-chat-source-cmi {
   border-left-color: #e74c3c;
}

.frennly-chat-source-cmi .frennly-chat-source-type {
   background: #e74c3c;
}

.frennly-chat-source-ouvrage {
   border-left-color: #3498db;
}

.frennly-chat-source-ouvrage .frennly-chat-source-type {
   background: #3498db;
}

.frennly-chat-source-article {
   border-left-color: #2ecc71;
}

.frennly-chat-source-article .frennly-chat-source-type {
   background: #2ecc71;
}

.frennly-chat-source-metaletech {
   border-left-color: #f39c12;
}

.frennly-chat-source-metaletech .frennly-chat-source-type {
   background: #f39c12;
}

.frennly-chat-source-formation {
   border-left-color: #9b59b6;
}

.frennly-chat-source-formation .frennly-chat-source-type {
   background: #9b59b6;
}

.frennly-chat-source-prestation {
   border-left-color: #1abc9c;
}

.frennly-chat-source-prestation .frennly-chat-source-type {
   background: #1abc9c;
}

/* Modales */
.frennly-chat-modal-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
   z-index: 1000000;
   display: flex;
   align-items: center;
   justify-content: center;
}

.frennly-chat-modal {
   background: white;
   border-radius: var(--frennly-chat-radius);
   box-shadow: var(--frennly-chat-shadow);
   max-width: 500px;
   width: 90%;
   max-height: 80vh;
   overflow: hidden;
}

.frennly-chat-modal-header {
   background: var(--frennly-chat-primary);
   color: white;
   padding: 15px 20px;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.frennly-chat-modal-header h3 {
   margin: 0;
   font-size: 16px;
}

.frennly-chat-modal-close {
   background: none;
   border: none;
   color: white;
   font-size: 20px;
   cursor: pointer;
   padding: 5px;
   border-radius: 3px;
   transition: var(--frennly-chat-transition);
}

.frennly-chat-modal-close:hover {
   background: rgba(255, 255, 255, 0.2);
}

.frennly-chat-modal-content {
   padding: 20px;
   max-height: 60vh;
   overflow-y: auto;
}

/* États de chargement */
.frennly-chat-loading {
   text-align: center;
   padding: 20px;
   color: var(--frennly-chat-text-light);
   font-size: 13px;
}

.frennly-chat-loading::after {
   content: '';
   display: inline-block;
   width: 16px;
   height: 16px;
   border: 2px solid var(--gray-300);
   border-top: 2px solid var(--color-primary);
   border-radius: 50%;
   animation: frennly-chat-spin 1s linear infinite;
   margin-left: 8px;
}

@keyframes frennly-chat-spin {
   0% {
      transform: rotate(0deg);
   }

   100% {
      transform: rotate(360deg);
   }
}

/* Responsive */
@media (max-width: 991px) {
   .frennly-chat-interface {
      width: 90vw;
      height: 80vh;
      right: 5vw;
   }
}

@media (max-width: 991px) {
   .frennly-chat-widget {
      bottom: 10px;
      right: 10px;
   }

   .frennly-chat-interface {
      width: 95vw;
      height: 85vh;
      right: 2.5vw;
      bottom: 80px;
   }

   .frennly-chat-main {
      flex-direction: column;
   }

   .frennly-chat-sidebar-left,
   .frennly-chat-sidebar-right {
      width: 100%;
      height: 200px;
      border-right: none;
      border-left: none;
      border-bottom: 1px solid var(--frennly-chat-border);
   }

   .frennly-chat-sidebar-right {
      display: none;
      border-bottom: none;
      border-top: 1px solid var(--frennly-chat-border);
      order: -1;
   }
}

@media (max-width: 480px) {
   .frennly-chat-toggle {
      width: 50px;
      height: 50px;
   }

   .frennly-chat-icon {
      font-size: 20px;
   }

   .frennly-chat-interface {
      width: 100vw;
      height: 100vh;
      right: 0;
      bottom: 0;
      border-radius: 0;
   }
}

/* ============================================
   Mode Page - Interface intégrée dans une page WordPress
   ============================================ */
.frennly-chat-page {
   position: relative;
   width: 100%;
   margin: 0;
}

.frennly-chat-interface-page {
   position: relative !important;
   bottom: auto !important;
   right: auto !important;
   height: auto !important;
   min-height: 600px;
   margin: 0 auto;
   width: 100%;
   border: none;
}


/* Ajustements pour le mode page */
.frennly-chat-interface-page .frennly-chat-content {
   flex: 1;
   overflow: hidden;
   /*display: unset;*/
   flex-direction: column;
}

.frennly-chat-interface-page .frennly-chat-main {
   display: flex;
   flex: 1;
   min-height: 500px;
}

/*Override hero banner*/
.frennly-chat-main .page-hero__text {
   padding-left: 4.5rem;
   background: var(--gray-200);
}

    @media (max-width: 991px) {
        .frennly-chat-main .page-hero__text {
            padding-left: 0;
        }
    }

/* Responsive pour le mode page */
@media (max-width: 991px) {
   .frennly-chat-interface-page {
      min-height: 500px;
      max-height: 70vh;
   }
}

@media (max-width: 991px) {
   .frennly-chat-interface-page {
      min-height: 400px;
      max-height: 100vh;
      border-radius: 0;
      /* margin: 0 -15px; */
   }
}

/* ============================================
   Popup de connexion pour le chat
   ============================================ */
.frennly-chat-login-popup {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 1000001;
   display: flex;
   align-items: center;
   justify-content: center;
}

.frennly-chat-login-popup-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.7);
   backdrop-filter: blur(4px);
}

.frennly-chat-login-popup-content {
   position: relative;
   background-color: var(--color-senary);
   color: var(--white);
   padding: 60px 160px;
   max-width: 825px;
   height: 100vh;
   overflow-y: auto;
   z-index: 1;
}

.frennly-chat-login-popup-close {
   cursor: pointer;
   position: absolute;
   top: 40px;
   right: 40px;
   background: none;
   color: var(--white);
   border: none;
   font-size: 23px;
   line-height: 0;
   padding: 0;
}

.frennly-chat-login-popup-header {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   margin-bottom: 30px;
}

.frennly-chat-login-icon {
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: var(--white);
   color: var(--color-senary);
   border-radius: 50%;
   font-size: 1.8rem;
   padding: 8px;
}

.frennly-chat-login-popup-title {
   color: var(--white);
   font-size: 2rem;
   font-weight: 700;
   margin-top: 20px;
   text-transform: none;
   text-wrap: balance;
}

.frennly-chat-login-form {
   margin-top: 60px;
}

.frennly-chat-login-form-field {
   margin-bottom: 20px;
}

.frennly-chat-login-input {
   width: 100%;
   padding: 12px 20px;
   border: none;
   background: white;
   color: #1F2937;
   font-size: 16px;
   box-sizing: border-box;
}

.frennly-chat-login-input::placeholder {
   color: #9CA3AF;
}

.frennly-chat-login-input:focus {
   outline: none;
   box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.frennly-chat-login-form-links {
   margin-bottom: 20px;
   text-align: center;
}

.frennly-chat-login-link {
   color: white;
   text-decoration: underline;
   font-size: 14px;
   cursor: pointer;
   transition: opacity 0.2s;
}

.frennly-chat-login-link:hover {
   opacity: 0.8;
}

.frennly-chat-login-form-remember {
   margin-bottom: 25px;
}

.frennly-chat-remember-me {
   display: flex;
   align-items: center;
   cursor: pointer;
   color: white;
   font-size: 14px;
}

.frennly-chat-remember-me input[type="checkbox"] {
   width: 18px;
   height: 18px;
   margin-right: 10px;
   cursor: pointer;
   accent-color: white;
}

.frennly-chat-login-form-submit {
   margin-bottom: 20px;
}

.frennly-chat-login-submit-btn {
   width: 100%;
   padding: 14px;
   background: var(--color-tertiary);
   color: white;
   border: none;
   font-size: 16px;
   font-weight: 600;
   cursor: pointer;
   transition: background 0.2s;
}

.frennly-chat-login-submit-btn:hover:not(:disabled) {
   background: var(--color-tertiary--light);
}

.frennly-chat-login-submit-btn:disabled {
   opacity: 0.6;
   cursor: not-allowed;
}

.frennly-chat-login-form-register {
   text-align: center;
   margin-top: 20px;
}

.frennly-chat-login-form-error {
   background: rgba(239, 68, 68, 0.2);
   color: white;
   padding: 12px;
   border-radius: 8px;
   margin-top: 15px;
   font-size: 14px;
   text-align: center;
   border: 1px solid rgba(239, 68, 68, 0.5);
}

/* ============================================
   Popup des conditions d'utilisation
   ============================================ */
.frennly-chat-terms-popup {
   position: fixed;
   top: 0;
   left: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
   z-index: 1000002;
}

.frennly-chat-terms-popup-overlay {
   position: absolute;
   top: 0;
   left: 0;
   background: rgba(255, 255, 255, 0.8);
   width: 100%;
   height: 100%;
}

.frennly-chat-terms-popup-content {
   position: relative;
   background-color: var(--color-senary);
   color: var(--white);
   text-align: center;
   padding: 40px 120px;
   max-width: 825px;
   height: 100vh;
   overflow-y: auto;
   z-index: 1;
}

.frennly-chat-terms-popup-close {
   cursor: pointer;
   position: absolute;
   top: 40px;
   right: 40px;
   background: none;
   color: var(--white);
   border: none;
   font-size: 23px;
   line-height: 0;
   padding: 0;
}

.frennly-chat-terms-popup-header span[class*="icon"] {
   font-size: 4.5rem;
}

.frennly-chat-terms-popup-title {
   color: var(--white);
   font-size: 24px;
   font-weight: 700;
   margin-top: 18px;
   text-transform: none;
}

.frennly-chat-terms-popup-body {
   line-height: 1.7;
   margin-top: 30px;
}

.frennly-chat-terms-content p {
   margin-bottom: 15px;
}

.frennly-chat-terms-popup-actions {
   display: flex;
   justify-content: center;
   gap: 15px;
   margin-top: 50px;
}

.frennly-chat-terms-btn-cancel,
.frennly-chat-terms-btn-accept {
   cursor: pointer;
   border: none;
   font-size: 14px;
   font-weight: 600;
   padding: 10px 60px;
   transition: background-color .4s, color .4s;
}

/* Annuler */
.frennly-chat-terms-btn-cancel {
   background-color: var(--white);
   color: var(--gray-800);
}

/* Hover */
.frennly-chat-terms-btn-cancel:hover {
   background-color: var(--gray-800);
   color: var(--white);
}

/* J'accepte */
.frennly-chat-terms-btn-accept {
   background-color: var(--color-secondary);
   color: var(--white);
}

/* Hover */
.frennly-chat-terms-btn-accept:hover {
   background-color: var(--color-secondary--light);
}

/* Responsive */
@media (max-width: 991px) {

   .frennly-chat-login-popup-content,
   .frennly-chat-terms-popup-content {
      padding: 30px 20px;
      max-width: 95%;
   }

   .frennly-chat-login-popup-title,
   .frennly-chat-terms-popup-title {
      font-size: 18px;
   }

   .frennly-chat-terms-popup-actions {
      flex-direction: column;
   }

   .frennly-chat-terms-btn-cancel,
   .frennly-chat-terms-btn-accept {
      width: 100%;
   }
}

/* Logo sur mobile */
@media (max-width: 991px) {
    body.frennly-chat-page-active .header__logo img {
        width: 167px;
    }
}

/* Menu latéral personnalisé pour la page de chat */
body.frennly-chat-page-active .header-aside {
   position: relative;
   display: flex;
   flex-direction: row;
   overflow: hidden;
}

body.frennly-chat-page-active .header__nav {
   display: none;
   flex-shrink: 0;
   width: auto;
   position: relative;
   z-index: 100;
}

body.frennly-chat-page-active .header__nav.active {
   display: block;
}

/*GESTION MENU BURGER*/
.frennly-chat-sidebar-menu {
   position: relative;
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
}

.frennly-chat-toggle-original-menu {
   position: absolute;
   top: 20px;
   right: 20px;
   width: 32px;
   height: 32px;
   background: var(--color-primary);
   color: white;
   border: none;
   border-radius: 50%;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 10;
   transition: var(--frennly-chat-transition);
   box-shadow: var(--frennly-chat-shadow-preview);
}

.frennly-chat-toggle-original-menu:hover {
   transform: scale(1.1);
}

.frennly-chat-toggle-original-menu.active {
   background: var(--color-primary);
}

.frennly-chat-toggle-original-menu .icon-menu {
   width: 14px;
   height: 14px;
   display: block;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: flex-start;
}

.frennly-chat-toggle-original-menu .icon-menu::before,
.frennly-chat-toggle-original-menu .icon-menu::after {
   content: '';
   position: absolute;
   width: 100%;
   height: 2px;
   background: currentColor;
   transition: var(--frennly-chat-transition);
}

.frennly-chat-toggle-original-menu .icon-menu::before {
   top: 4px;
}

.frennly-chat-toggle-original-menu .icon-menu::after {
   bottom: 2px;
   width: 85%
}

.frennly-chat-toggle-original-menu.active .icon-menu::before {
   transform: rotate(45deg);
   top: 6px;
}

.frennly-chat-toggle-original-menu.active .icon-menu::after {
   transform: rotate(-45deg);
   bottom: 6px;
   width: 100%
}

/* Styles pour le menu chat dans le header-aside */
body.frennly-chat-page-active .header-aside .frennly-chat-sidebar-menu {
   flex: 1;
   min-width: 0;
}

body.frennly-chat-page-active .header-aside .frennly-chat-sidebar-left {
   width: 100%;
   height: calc(100vh - 192px);
   overflow: hidden;
   padding: 0 0 4rem;
   margin-top: 60px;
   display: flex;
   flex-direction: column;
}

    @media (min-width: 768px) {
        body.frennly-chat-page-active .header-aside .frennly-chat-sidebar-left {
            height: calc(100vh - 210px);
        }
    }


/**/
body.frennly-chat-page-active .header-aside .frennly-chat-sidebar-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 0;
   padding-bottom: 0;
   flex-shrink: 0;
}

body.frennly-chat-page-active .header-aside .frennly-chat-sidebar-header h4 {
   margin: 0;
   font-size: 18px;
   font-weight: 600;
   color: var(--frennly-chat-text);
}

body.frennly-chat-page-active .header-aside .frennly-chat-conversations {
   flex: 1;
   overflow-y: auto;
   overflow-x: hidden;
   margin-bottom: 20px;
   padding-top: 1.5rem;
   min-height: 0;
   scrollbar-width: thin;
   scrollbar-color: var(--frennly-chat-border) transparent;
}

body.frennly-chat-page-active .header-aside .frennly-chat-conversations::-webkit-scrollbar {
   width: 6px;
}

body.frennly-chat-page-active .header-aside .frennly-chat-conversations::-webkit-scrollbar-track {
   background: transparent;
}

body.frennly-chat-page-active .header-aside .frennly-chat-conversations::-webkit-scrollbar-thumb {
   background: var(--frennly-chat-border);
   border-radius: 3px;
}

body.frennly-chat-page-active .header-aside .frennly-chat-conversations::-webkit-scrollbar-thumb:hover {
   background: var(--frennly-chat-text-light);
}

body.frennly-chat-page-active .header-aside .frennly-chat-quick-questions {
   padding-top: 20px;
   border-top: 1px solid var(--frennly-chat-border);
   display: flex;
   flex-direction: column;
   overflow: hidden;
}

body.frennly-chat-page-active .header-aside .frennly-chat-quick-questions-header {
   flex-shrink: 0;
}

body.frennly-chat-page-active .header-aside .frennly-chat-quick-questions-header h5 {
   margin: 0 0 15px 0;
   font-size: 14px;
   font-weight: 600;
   color: var(--frennly-chat-text-light);
   text-transform: uppercase;
   letter-spacing: 0.5px;
}

body.frennly-chat-page-active .header-aside .frennly-chat-quick-questions-list {
   display: flex;
   flex-direction: column;
   gap: 10px;
   overflow-y: auto;
   flex: 1;
   min-height: 0;
   scrollbar-width: thin;
   scrollbar-color: var(--frennly-chat-border) transparent;
}

body.frennly-chat-page-active .header-aside .frennly-chat-quick-questions-list::-webkit-scrollbar {
   width: 6px;
}

body.frennly-chat-page-active .header-aside .frennly-chat-quick-questions-list::-webkit-scrollbar-track {
   background: transparent;
}

body.frennly-chat-page-active .header-aside .frennly-chat-quick-questions-list::-webkit-scrollbar-thumb {
   background: var(--frennly-chat-border);
   border-radius: 3px;
}

body.frennly-chat-page-active .header-aside .frennly-chat-quick-questions-list::-webkit-scrollbar-thumb:hover {
   background: var(--frennly-chat-text-light);
}

body.frennly-chat-page-active .header-aside .frennly-chat-quick-question {
   width: 100%;
   padding: 12px 15px;
   background: var(--frennly-chat-secondary);
   border: 1px solid var(--frennly-chat-border);
   border-radius: var(--frennly-chat-radius);
   cursor: pointer;
   text-align: left;
   font-size: 14px;
   color: var(--frennly-chat-text);
   transition: var(--frennly-chat-transition);
}

body.frennly-chat-page-active .header-aside .frennly-chat-quick-question:hover {
   background: var(--frennly-chat-primary);
   color: white;
   border-color: var(--frennly-chat-primary);
   transform: translateX(5px);
}

/* Styles pour afficher les deux menus côte à côte */
body.frennly-chat-page-active .header-aside .header__nav.active {
   display: block;
   flex-shrink: 0;
   width: auto;
   min-width: 250px;
   border-right: 1px solid var(--gray-400);
   border-left: 1px solid var(--gray-400);
   background: white;
   position: absolute;
   left: 100%;
   top: 40px;
   height: 100vh;
   box-shadow: 10px 0px 10px 0px var(--gray-800);
}

body.frennly-chat-page-active .header-aside .frennly-chat-sidebar-menu {
   flex: 1;
   min-width: 0;
   overflow: hidden;
}

body.frennly-chat-page-active .header-aside .header__nav ul.secondLevel {
   top: 0;
}


/* Responsive pour le menu chat */
@media (max-width: 991px) {
   body.frennly-chat-page-active .header-aside {
      position: fixed;
      top: 0;
      left: 0;
      flex-direction: column;
      padding: 0;
      z-index: 2;
      transition: left .4s;
   }

        body.frennly-chat-page-active .header-aside:not(.active) {
            left: -100%;
        }

   body.frennly-chat-page-active .header-aside .header__nav.active {
      position: fixed;
      top: 0;
      left: 0;
      width: 75vw;
      height: 100vh;
      z-index: 1000;
      border-right: none;
   }

   body.frennly-chat-page-active .header-aside .frennly-chat-sidebar-left {
      padding: 15px;
      margin-top: 50px;
   }

   .frennly-chat-toggle-original-menu {
      top: 15px;
      right: 15px;
      width: 28px;
      height: 28px;
   }

   .frennly-chat-toggle-original-menu .icon-menu {
      width: 12px;
      height: 12px;
   }
}