/* Colibri */

/* .h-section > div {
  z-index: auto;
} */

/*******/


#popupWindow .mon-bouton-header::before,
#popupWindow .mon-bouton-header::after {
    content: none !important;
    display: none !important;
}
.chat-bubble {
    padding: 6px 10px;
    max-width: 85%;
    word-wrap: break-word;
    border-radius: 20px;
    text-align: left;
}
.chat-bubble p {
  color: #000 !important;
}

.chat-bubble.system {
    border-radius: 20px 20px 20px 0;
    background-color: #f1f1f1;
    color: #000;
    align-self: flex-start;
    text-align: left;
}

.chat-bubble.system a {
    color: var(--button-color-agent) !important;
}

.chat-bubble.user {
    border-radius: 20px 20px 0 20px;
    color: #fff;
    align-self: flex-end;
    text-align: right;
    background-color: var(--button-color-agent);

}

.chat-choice-btn, .chat-back-btn {
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 6px;
    background-color: #fff;
    font-size: 14px;
    font-family: Arial, sans-serif;
    border: 1px solid var(--button-color-agent);

}

.chat-choice-btn:hover, .chat-back-btn:hover, .chat-choice-btn-selected {
    color: #fff;
    transition: 0.3s ease-in-out;
    background-color: var(--button-color-agent);

}

.chat-choice-btn:disabled {
    pointer-events: none;
    cursor: default;
}

.chat-msg-wrapper {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}

.chat-time {
    font-size: 12px;
    color: #999;
    margin-bottom: 2px;
}
.chat-options-sheet {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

.chat-options-sheet.active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.chat-options-sheet.closing {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
}

.chat-options-sheet button {
    width: 100%;
    padding: 12px;
    font-size: 14px;
    border: none;
    background: none;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
}

.chat-options-sheet button.cancel {
    font-weight: bold;
}

.chat-options-sheet button:hover {
    background-color: #f5f5f5;
}

.chat-options-sheet button:first-child:hover {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}
/* Animation rotation + fondu */
@keyframes rotateFade {
    0% {
        /*transform: rotate(0deg);*/
        opacity: 1;
        transform: scale(1);
    }
    50% {
        /*transform: rotate(180deg);*/
        opacity: 0;
        transform: scale(0.3); /* réduit à 50% de la taille */
    }
    100% {
        /*transform: rotate(360deg);*/
        opacity: 1;
        transform: scale(0.6);
    }
}

.icon-switching {
    animation: rotateFade 0.4s ease forwards;
}

.hidden {
    display: none;
}

#chat-icon.chat-image {
    background-image: url('../img/agent_chat_monochrome.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    height: 42px;
    width: 40px;
}

#chat-icon.fa-comments:not(.chat-image) {
    font-size: 24px;
    height: auto;
    width: auto;
}
#chat-icon.xmark {
    display: inline-block;
    width: 34px;
    height: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='white' d='M183.1 137.4C170.6 124.9 150.3 124.9 137.8 137.4C125.3 149.9 125.3 170.2 137.8 182.7L275.2 320L137.9 457.4C125.4 469.9 125.4 490.2 137.9 502.7C150.4 515.2 170.7 515.2 183.2 502.7L320.5 365.3L457.9 502.6C470.4 515.1 490.7 515.1 503.2 502.6C515.7 490.1 515.7 469.8 503.2 457.3L365.8 320L503.1 182.6C515.6 170.1 515.6 149.8 503.1 137.3C490.6 124.8 470.3 124.8 457.8 137.3L320.5 274.7L183.1 137.4z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.ellipsis-vertical {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='white' d='M320 208C289.1 208 264 182.9 264 152C264 121.1 289.1 96 320 96C350.9 96 376 121.1 376 152C376 182.9 350.9 208 320 208zM320 432C350.9 432 376 457.1 376 488C376 518.9 350.9 544 320 544C289.1 544 264 518.9 264 488C264 457.1 289.1 432 320 432zM376 320C376 350.9 350.9 376 320 376C289.1 376 264 350.9 264 320C264 289.1 289.1 264 320 264C350.9 264 376 289.1 376 320z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    color: #fff !important;
}

.chat-bubble ul {
    list-style: disc !important;
    padding-left: 15px;
}

.chat-bubble ol {
    padding-left: 15px;
}
.chat-bubble a[href] {
    /* Add ellipsis at the end if text does not fit in given width */
    text-overflow: ellipsis;
    /* Have to add this line to make upper line work */
    overflow: hidden;
}

.chat-actu {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 6px;
    box-sizing: border-box;
    text-decoration: none;
    transition: 0.3s ease-in-out;
    border: 1px solid var(--button-color-agent);
    color: var(--button-color-agent);
}

/* Feedback */
    .feedback-btn {
    font-size: 18px;
    cursor: pointer;
    background: none;
    border: 1px solid #dfdfdf;
    padding: 4px;
    transition: transform 0.2s;
    border-radius: 30px;
    height: 40px;
    width: 40px;
    background-color: #fbfbfb;
        z-index: 999999999999;
}

.feedback-btn:hover {
    transform: scale(1.2);
}

.feedback-btn-step-2 {
    font-size: 12px !important;
    height: 30px !important;
    width: 30px !important;
    position: relative;
    top: -53px;
    left: -4px;
}

.comment-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    margin-left: -30px;
    width: 100%;
    max-width: 400px;
    font-family: Arial, sans-serif;
}

.comment-textarea {
    width: 100%;
    padding: 8px;
    border-radius: 4px;
    resize: vertical;
    font-size: 14px;
    line-height: 1.4;
    box-sizing: border-box;
    border: 1px solid var(--button-color-agent);
}

.comment-textarea::placeholder {
    color: #a29d9d !important;
    font-size: 1.03em;
}

.comment-btn {
    align-self: flex-end;
    color: #fff;
    padding: 6px 12px;
    font-size: 14px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    background-color: var(--button-color-agent);
}