body,html{background:#ececec;color:#202020;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:1pc;line-height:1.5;margin:0}@media(prefers-color-scheme:dark){body,html{background:transparent;color:#dfdfdf}}a{color:#2020e0}@media(prefers-color-scheme:dark){a{color:#2020e0}}button,input,optgroup,select,textarea{font:inherit}.cmp-helloworld__item-label{margin-bottom:0}.cmp-helloworld__item-output{margin-top:0}.cmp-navigation__item--level-0:hover>.cmp-navigation__group{background:#ececec}main.container{padding:.5em 1em}footer.experiencefragment{border-top:1px solid #202020;padding:.5em 1em}@media(prefers-color-scheme:dark){footer.experiencefragment{border-color:#dfdfdf}}footer.experiencefragment .cmp-separator__horizontal-rule{border:0;margin:0}header.experiencefragment{border-bottom:1px solid #202020;padding:.5em 1em}@media(prefers-color-scheme:dark){header.experiencefragment{border-bottom-color:#dfdfdf}}header.experiencefragment a{color:#202020;text-decoration:none}@media(prefers-color-scheme:dark){header.experiencefragment a{color:#dfdfdf}}header.experiencefragment a:focus,header.experiencefragment a:hover{color:#2020e0;text-decoration:underline}@media(prefers-color-scheme:dark){header.experiencefragment a:focus,header.experiencefragment a:hover{color:#2020e0}}header.experiencefragment .cmp-container{display:grid;grid-template-columns:4fr 1fr 1fr}header.experiencefragment .cmp-navigation__group{list-style:none;margin:0;padding:0}header.experiencefragment .cmp-navigation__item--level-0{display:grid;grid-template-columns:1fr 3fr}header.experiencefragment .cmp-navigation__item--level-0>.cmp-navigation__group{display:grid;grid-template-columns:repeat(3,1fr)}header.experiencefragment .cmp-navigation__item-link{display:block}header.experiencefragment .cmp-navigation__item--active>.cmp-navigation__item-link{font-weight:700}header.experiencefragment .cmp-languagenavigation{position:relative}header.experiencefragment .cmp-languagenavigation:before{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="rgb(32,32,32)" d="M12.1,0.2h-0.1c-3.1,0-6.1,1.3-8.3,3.5C1.4,6,0.2,8.9,0.2,12.1c0,3.1,1.3,6.1,3.5,8.3c2.2,2.2,5.1,3.4,8.3,3.4 c0,0,0,0,0.1,0c6.5,0,11.7-5.3,11.7-11.8C23.7,5.5,18.5,0.3,12.1,0.2z M18.3,11.5c-0.1-1.4-0.3-2.8-0.7-4.1C18.5,7,19.4,6.5,20.3,6 c1.1,1.6,1.9,3.5,2,5.5H18.3z M22.2,12.5c-0.1,2.1-0.8,4-2,5.5c-0.8-0.6-1.7-1-2.6-1.4c0.3-1.1,0.6-2.2,0.7-3.3c0-0.3,0-0.5,0-0.8 H22.2z M19.6,5.2c-0.8,0.5-1.6,0.9-2.4,1.3c-0.6-1.4-1.4-2.7-2.3-3.8c-0.2-0.2-0.4-0.4-0.6-0.6C16.4,2.5,18.3,3.7,19.6,5.2z M12.8,22.2c-0.1,0-0.2,0-0.3,0v-5.7c1.3,0,2.6,0.3,3.8,0.7C15.6,19.1,14.3,20.8,12.8,22.2z M9.9,20.8c-0.9-1.1-1.7-2.3-2.2-3.6 c1.2-0.4,2.5-0.6,3.8-0.7v5.7c-0.1,0-0.2,0-0.3,0C10.7,21.8,10.3,21.3,9.9,20.8z M11.4,1.8c0,0,0.1,0,0.1,0v5.7 c-1.3,0-2.6-0.3-3.8-0.7C8.5,4.9,9.7,3.2,11.4,1.8z M14.1,3.3c0.9,1.1,1.6,2.3,2.2,3.5c-1.2,0.4-2.5,0.6-3.8,0.7V1.8 c0.1,0,0.1,0,0.2,0C13.2,2.2,13.7,2.7,14.1,3.3z M16.7,7.7c0.4,1.2,0.6,2.5,0.7,3.8h-4.8V8.4C13.9,8.4,15.3,8.2,16.7,7.7z M11.5,8.4 v3.1H6.7C6.7,10.2,7,9,7.4,7.7C8.7,8.2,10.1,8.4,11.5,8.4z M11.5,12.5v3.1c-1.4,0-2.8,0.3-4.2,0.7c-0.4-1.2-0.6-2.5-0.7-3.8H11.5z M12.5,15.6v-3.1h4.8c0,0.2,0,0.5,0,0.7c-0.1,1.1-0.3,2.1-0.6,3.1C15.3,15.8,13.9,15.6,12.5,15.6z M9.6,2C8.4,3.3,7.4,4.8,6.8,6.5 C5.9,6.1,5.1,5.7,4.4,5.2c0.1-0.1,0.2-0.3,0.4-0.4C6.1,3.4,7.8,2.5,9.6,2z M5.7,11.5H1.8c0.1-2,0.8-3.9,1.9-5.5 C4.6,6.5,5.5,7,6.4,7.4C6,8.7,5.7,10.1,5.7,11.5z M6.4,16.6C5.5,17,4.6,17.5,3.7,18c-1.2-1.6-1.9-3.5-1.9-5.5h3.9 C5.7,13.9,5.9,15.3,6.4,16.6z M4.4,18.8c0.8-0.5,1.5-0.9,2.4-1.3c0.6,1.4,1.4,2.7,2.4,3.9c0.1,0.2,0.3,0.3,0.4,0.5 c-1.8-0.4-3.4-1.3-4.7-2.7C4.6,19.1,4.5,19,4.4,18.8z M14.5,21.9c1.2-1.3,2.1-2.8,2.8-4.4c0.8,0.3,1.6,0.8,2.4,1.2 C18.3,20.3,16.5,21.4,14.5,21.9z"/></svg>');background-repeat:no-repeat;content:" ";display:block;height:1.5em}@media(prefers-color-scheme:dark){header.experiencefragment .cmp-languagenavigation:before{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="rgb(223,223,223)" d="M12.1,0.2h-0.1c-3.1,0-6.1,1.3-8.3,3.5C1.4,6,0.2,8.9,0.2,12.1c0,3.1,1.3,6.1,3.5,8.3c2.2,2.2,5.1,3.4,8.3,3.4 c0,0,0,0,0.1,0c6.5,0,11.7-5.3,11.7-11.8C23.7,5.5,18.5,0.3,12.1,0.2z M18.3,11.5c-0.1-1.4-0.3-2.8-0.7-4.1C18.5,7,19.4,6.5,20.3,6 c1.1,1.6,1.9,3.5,2,5.5H18.3z M22.2,12.5c-0.1,2.1-0.8,4-2,5.5c-0.8-0.6-1.7-1-2.6-1.4c0.3-1.1,0.6-2.2,0.7-3.3c0-0.3,0-0.5,0-0.8 H22.2z M19.6,5.2c-0.8,0.5-1.6,0.9-2.4,1.3c-0.6-1.4-1.4-2.7-2.3-3.8c-0.2-0.2-0.4-0.4-0.6-0.6C16.4,2.5,18.3,3.7,19.6,5.2z M12.8,22.2c-0.1,0-0.2,0-0.3,0v-5.7c1.3,0,2.6,0.3,3.8,0.7C15.6,19.1,14.3,20.8,12.8,22.2z M9.9,20.8c-0.9-1.1-1.7-2.3-2.2-3.6 c1.2-0.4,2.5-0.6,3.8-0.7v5.7c-0.1,0-0.2,0-0.3,0C10.7,21.8,10.3,21.3,9.9,20.8z M11.4,1.8c0,0,0.1,0,0.1,0v5.7 c-1.3,0-2.6-0.3-3.8-0.7C8.5,4.9,9.7,3.2,11.4,1.8z M14.1,3.3c0.9,1.1,1.6,2.3,2.2,3.5c-1.2,0.4-2.5,0.6-3.8,0.7V1.8 c0.1,0,0.1,0,0.2,0C13.2,2.2,13.7,2.7,14.1,3.3z M16.7,7.7c0.4,1.2,0.6,2.5,0.7,3.8h-4.8V8.4C13.9,8.4,15.3,8.2,16.7,7.7z M11.5,8.4 v3.1H6.7C6.7,10.2,7,9,7.4,7.7C8.7,8.2,10.1,8.4,11.5,8.4z M11.5,12.5v3.1c-1.4,0-2.8,0.3-4.2,0.7c-0.4-1.2-0.6-2.5-0.7-3.8H11.5z M12.5,15.6v-3.1h4.8c0,0.2,0,0.5,0,0.7c-0.1,1.1-0.3,2.1-0.6,3.1C15.3,15.8,13.9,15.6,12.5,15.6z M9.6,2C8.4,3.3,7.4,4.8,6.8,6.5 C5.9,6.1,5.1,5.7,4.4,5.2c0.1-0.1,0.2-0.3,0.4-0.4C6.1,3.4,7.8,2.5,9.6,2z M5.7,11.5H1.8c0.1-2,0.8-3.9,1.9-5.5 C4.6,6.5,5.5,7,6.4,7.4C6,8.7,5.7,10.1,5.7,11.5z M6.4,16.6C5.5,17,4.6,17.5,3.7,18c-1.2-1.6-1.9-3.5-1.9-5.5h3.9 C5.7,13.9,5.9,15.3,6.4,16.6z M4.4,18.8c0.8-0.5,1.5-0.9,2.4-1.3c0.6,1.4,1.4,2.7,2.4,3.9c0.1,0.2,0.3,0.3,0.4,0.5 c-1.8-0.4-3.4-1.3-4.7-2.7C4.6,19.1,4.5,19,4.4,18.8z M14.5,21.9c1.2-1.3,2.1-2.8,2.8-4.4c0.8,0.3,1.6,0.8,2.4,1.2 C18.3,20.3,16.5,21.4,14.5,21.9z"/></svg>')}}header.experiencefragment .cmp-languagenavigation>.cmp-languagenavigation__group{background:#ececec;border:1px solid #202020;border-top:0;padding:0 8px;position:absolute;top:34px;-webkit-transition-delay:.5s;transition-delay:.5s;visibility:hidden;width:20em}@media(prefers-color-scheme:dark){header.experiencefragment .cmp-languagenavigation>.cmp-languagenavigation__group{background:#131313;border-color:#dfdfdf}}header.experiencefragment .cmp-languagenavigation:hover>.cmp-languagenavigation__group{-webkit-transition-delay:0s;transition-delay:0s;visibility:visible}header.experiencefragment .cmp-languagenavigation__group{list-style:none;margin:0;padding:0}header.experiencefragment .cmp-languagenavigation__item-title{font-size:x-small;text-transform:uppercase}header.experiencefragment .cmp-languagenavigation__item--level-0{margin-bottom:.5em}header.experiencefragment .cmp-languagenavigation__item--level-1{display:inline}header.experiencefragment .cmp-languagenavigation__item--level-1:not(:first-child):before{content:" | "}header.experiencefragment .cmp-languagenavigation__item--active>.cmp-languagenavigation__item-link{font-weight:700}header.experiencefragment .cmp-search__field{display:-webkit-box;display:-ms-flexbox;display:flex;margin:-3px 0}header.experiencefragment .cmp-search__input{height:26px}
body {
    display: flex;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    font-family: 'Avenir Next LT Pro', sans-serif;
    background: #bd3826;
    align-items: center;
}

.chat-wrapper {
    width: 1358px;
    height: 942px;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    margin: 20px auto;
    overflow: hidden;
}

.chat-banner {
    width: 100%;
    height: 80px;
    background: #FFFFFF;
    box-shadow: 0px 0px 10px 0px #33333340;
    display: flex;
    align-items: center;
    padding: 20px 115px;
    gap: 10px;
    box-sizing: border-box;
    margin-bottom: 20px;
}

.chat-banner img {
    height: 40px;
    object-fit: contain;
    max-width: 100%;
}

.chatbot-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-self: center;
    width: 100%;
    max-width: 1128px;
    overflow: hidden;
}

.chat-gap {
    width: auto;
    height: 41px;
    background: transparent;
    opacity: 1;
    margin: 0 auto;
}


.chatbot-messages-wrapper {
    flex: 1;
    overflow: hidden;
    display: flex;
}

.chatbot-messages {
    flex: 1;
    overflow-y: auto;
    padding-right: 20px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    min-height: 0;
}

.message.user {
    display: inline-block;
    max-width: 70%;
    padding: 16px;
    margin: 6px 0;
    background: #A8ADB11A;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border-right: 4px solid #BD3826;
    font-size: 16px;
    color: #000;
    text-align: left;
    align-self: flex-end;
}

.message.bot {
    display: inline-block;
    max-width: 80%;
    padding: 16px;
    margin: 6px 0;
    background: #f0f0f0;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-left: 4px solid #A8ADB1;
    font-size: 16px;
    color: #000;
    text-align: left;
    align-self: flex-start;
}

.chatbot-waiting-phrase {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 4px;
    font-style: italic;
    text-align: left;
    padding-left: 8px;
    align-self: flex-start;
    max-width: 80%;
    opacity: 0.9;
}

.chatbot-input {
    width: 100%;
    height: 64px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    margin: 20px 0;
}

.chatbot-left-group {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    height: 100%;
    min-width: 0;
}

.chatbot-input-box {
    flex: 1 1 auto;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: #A8ADB11A;
    box-sizing: border-box;
    min-width: 0;
}

.chatbot-input-box input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 16px;
    outline: none;
    height: 100%;
    min-width: 0;
}

.chatbot-voice-record {
    flex: 0 0 64px;
    height: 100%;
    background: #A8ADB11A;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin-left: 0;
}

.chatbot-voice-record img {
    width: 30%;
    height: auto;
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
}

.chatbot-send-button {
    flex: 0 0 64px;
    height: 100%;
    background: #BD3826;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: none;
    cursor: pointer;
}

.chatbot-send-button img {
    width: 30%;
    height: auto;
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
}

/* ----------------- */
/* Responsive Mobile */
/* ----------------- */
@media (max-width: 768px) {
    body {
        display: block;
        min-height: 100vh;
        margin: 0;
    }

    .chat-wrapper {
        width: 100%;
        height: 100vh;
        margin: 0;
        display: flex;
        flex-direction: column;
    }

    .chat-banner {
        width: 100%;
        height: 64px;
        padding: 12px 16px;
        margin-bottom: 20px;
    }

    .chatbot-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        width: 100%;
        overflow: hidden;
    }

    .chatbot-messages-wrapper {
        flex: 1;
        display: flex;
        overflow: hidden;
    }

    .chatbot-messages {
        flex: 1;
        padding: 0 16px;
        margin: 0;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }

    .chatbot-waiting-phrase {
        padding-left: 16px;
        max-width: 90%;
        font-size: 0.8rem;
    }

    .chatbot-input {
        width: 100%;
        height: 56px;
        padding: 0 8px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        gap: 8px;
        margin: 20px 0;
    }

    .chatbot-left-group {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        height: 100%;
        min-width: 0;
    }

    .chatbot-input-box {
        flex: 1 1 auto;
        height: 100%;
        display: flex;
        align-items: center;
        padding: 0 12px;
        background: #A8ADB11A;
        box-sizing: border-box;
        min-width: 0;
    }

    .chatbot-input-box input {
        flex: 1;
        border: none;
        background: transparent;
        outline: none;
        height: 100%;
        font-size: 14px;
        min-width: 0;
    }

    .chatbot-voice-record {
        flex: 0 0 48px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #A8ADB11A;
        box-sizing: border-box;
        margin-left: 0;
    }

    .chatbot-send-button {
        flex: 0 0 48px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #BD3826;
        border: none;
        cursor: pointer;
        box-sizing: border-box;
    }

    .chatbot-voice-record img,
    .chatbot-send-button img {
        width: 30%;
        height: auto;
        object-fit: contain;
        max-width: 100%;
        max-height: 100%;
    }

    .message.user,
    .message.bot {
        max-width: 90%;
    }

    .new.newpar.section.aem-Grid-newComponent {
        display: none !important;
    }
}

