.lwh-open-cbot,
.lwh-open-cbot :root {
    --chatbot-width: 350px;
    --chatbot-image-position-bottom: 10px;
    --chatbot-image-position-right: 10px;
    --chatbot-position-bottom: 0;
    --chatbot-position-right: 11px;
    --chatbot-border-color: #E4E3E3;
    --chatbot-primary-color: #2B2A66;
    --chatbot-secondary-color: #2c2b8e;
    --chatbot-hover-color: #1e8ece;
    --chatbot-bg-color: #F1F1F1;
    --chatbot-scrollbar-track-color: #f1f1f1;
    --chatbot-scrollbar-thumb-color: #d7d7d7;
    --chatbot-scrollbar-thumb-hover-color: #949494;
    --chatbot-button-disabled-color: grey;
    --chatbot-popup-bg-color: #fff;
    --chatbot-dot-color: grey;
    --chatbot-dictation-recording-color: red;
}

.lwh-open-cbot {
    position: fixed;
    z-index: 3;
}

.lwh-open-cbot *,
.lwh-open-cbot *::after,
.lwh-open-cbot *::before,
.lwh-open-cbot *:focus {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.lwh-open-cbot *:focus {
    box-shadow: none;
}

.lwh-open-cbot .custom-chatbot {
    width: var(--chatbot-width);
    position: fixed;
    bottom: var(--chatbot-position-bottom);
    right: var(--chatbot-position-right);
    overflow: hidden;
    height: 100%;
    /* Setting "z-index" here avoids you to select the menus items at upper right */
    /* z-index: 9998; */
}

.lwh-open-cbot .custom-chatbot .chat__messages__ai a {
    color: var(--chatbot-primary-color);
    text-decoration: none;
}

.lwh-open-cbot .chat.preparing {
    visibility: hidden;
}

.lwh-open-cbot .chat {
    background-color: white;
    position: absolute;
    bottom: 10px;
    opacity: 0;
    z-index: 9999;
    border: 1.5px solid var(--chatbot-border-color);
    border-radius: 12px;
    transition: opacity 0.5s ease-in-out, display 0s linear 0.5s;
    width: 100%;
    height: 50vh;
}

.lwh-open-cbot .chat.show {
    opacity: 1;
    transition-delay: 0s;
}

.lwh-open-cbot .chat__conversation-view {
    height: 100%;
}

.lwh-open-cbot [hidden] {
    display: none !important;
}

.lwh-open-cbot .custom-chatbot__image {
    position: fixed;
    right: var(--chatbot-image-position-right);
    bottom: var(--chatbot-image-position-bottom);
    z-index: 9999;
    cursor: pointer;
    background: transparent;
    border: none;
}

.lwh-open-cbot .custom-chatbot button {
    border: none;
    background: none;
}

body.chat-window-opened .custom-chatbot__image {
    display: none;
}

.lwh-open-cbot .custom-chatbot button>i {
    color: var(--chatbot-primary-color);
    border-radius: 20px;
    width: 100%;
    padding: 6px 8px;
    font-size: 18px;
}

.lwh-open-cbot .custom-chatbot button:hover i {
    /*
    Note:
    Disabled the set the color when hovering here because the browser somehow doesn't clear the hover state of this button
    when permission dialog is displayed and the CSS for hover state keeps being applied
    */
    /* color: var(--chatbot-hover-color); */
    cursor: pointer;
}

.lwh-open-cbot .custom-chatbot input[type='text'] {
    border: none;
    outline: none;
    padding: 0;
    box-shadow: none !important;
}

.lwh-open-cbot .chat__header {
    display: flex;
    justify-content: space-between;
    border-bottom: 1.5px solid var(--chatbot-border-color);
    padding: 12px 10px;
    align-items: flex-start;
    position: relative;
    z-index: 1;
}

.lwh-open-cbot .chat__header>div:nth-child(1)>div:nth-child(2) {
    display: flex;
    align-items: end;
    gap: 1rem;
    margin-top: 4px;
}

.lwh-open-cbot .chat__header .chat__new {
    font-size: 11px;
    font-weight: 500;
    padding: 3px 6px 4px 6px;
    background-color: var(--chatbot-primary-color);
    color: white;
    cursor: pointer;
    border-radius: 4px;
}

.lwh-open-cbot .chat__header .chat__new:hover {
    background-color: var(--chatbot-hover-color);
}

.lwh-open-cbot .chat__header>div:nth-child(2) {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.lwh-open-cbot .chat__export i,
.lwh-open-cbot .chat__close-icon i {
    display: block;
}

.lwh-open-cbot .chat__export i:hover,
.lwh-open-cbot .chat__close-icon i:hover,
.lwh-open-cbot .copy-text i:hover {
    color: var(--chatbot-hover-color);
    cursor: pointer;
}

.lwh-open-cbot .chat__export {
    font-size: 12px;
    cursor: pointer;
    width: -moz-fit-content;
    width: fit-content;
    margin-left: -1px;
}

.lwh-open-cbot .chat__title {
    font-weight: 500;
    font-size: 18px;
}

.lwh-open-cbot .chat__title span {
    font-size: 12px;
}

.lwh-open-cbot .chat__status_etc {
    display: flex;
    gap: 0.5rem;
}

.lwh-open-cbot .chat__status {
    font-size: 14px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.6);
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 4px;
}

.lwh-open-cbot .chat__status span {
    background-color: #68D391;
    background-color: #acacac;
    width: 8px;
    height: 8px;
    display: block;
    border-radius: 100px;
}

.lwh-open-cbot .custom-chatbot button.chat__send-transcript {
    background: var(--chatbot-primary-color);
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    margin-top: 4px;
    padding: 5px 9px;
}

.lwh-open-cbot .custom-chatbot button.chat__send-transcript:hover {
    background: var(--chatbot-hover-color);
    color: #fff;
}

.lwh-open-cbot .custom-chatbot button.chat__send-transcript:disabled {
    background: var(--chatbot-button-disabled-color);
    color: #fff;
    cursor: not-allowed;
    opacity: 0.65;
}

.lwh-open-cbot .custom-chatbot button.chat__send-transcript:focus-visible,
.lwh-open-cbot .chat__transcript-view button:focus-visible,
.lwh-open-cbot .chat__transcript-view input:focus-visible {
    outline: 2px solid var(--chatbot-hover-color);
    outline-offset: 2px;
}

.lwh-open-cbot .chat__close-icon {
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.lwh-open-cbot .chat__messages {
    padding: 12px 10px 0 10px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: calc(100% - 180px);
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}

.lwh-open-cbot .chat__messages::-webkit-scrollbar,
.lwh-open-cbot .chat__messages__ai code::-webkit-scrollbar {
    width: 12px;
    height: 5px;
}

.lwh-open-cbot .chat__messages::-webkit-scrollbar-track,
.lwh-open-cbot .chat__messages__ai code::-webkit-scrollbar-track {
    background: var(--chatbot-scrollbar-track-color);
}

.lwh-open-cbot .chat__messages::-webkit-scrollbar-thumb,
.lwh-open-cbot .chat__messages__ai code::-webkit-scrollbar-thumb {
    background: var(--chatbot-scrollbar-thumb-color);
    /* border-radius: 100px; */
}

.lwh-open-cbot .chat__messages::-webkit-scrollbar-thumb:hover,
.lwh-open-cbot .chat__messages__ai code::-webkit-scrollbar-thumb:hover {
    background: var(--chatbot-scrollbar-thumb-hover-color);
}

.lwh-open-cbot .chat__messages__user,
.lwh-open-cbot .chat__messages__ai {
    display: flex;
    gap: 6px;
    flex-direction: column;
    width: calc(100% - 38px);
    min-width: 0;
    max-width: 100%;
}

.lwh-open-cbot .chat__messages__user {
    align-self: flex-end;
}

.lwh-open-cbot .chat__messages__user>div {
    align-items: end;
    align-self: flex-end;
}

.lwh-open-cbot .chat__messages__ai>div,
.lwh-open-cbot .chat__messages__user>div {
    display: flex;
    gap: 0.5rem;
    min-width: 0;
    max-width: 100%;
}

.lwh-open-cbot .chat__messages__ai p {
    /*
    align-self: flex-start;
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    */
    display: inline-block;
    background-color: var(--chatbot-bg-color);
    padding: 6px 12px;
    border-radius: 0px 8px 8px 8px;
    width: -moz-fit-content;
    width: fit-content;
    min-width: 0;
    max-width: calc(100% - 38px);
    overflow-wrap: anywhere;
    position: relative;
    padding-right: 20px;
    a {
        text-decoration: underline !important;
        &:hover {
            text-decoration: none !important;
        }
    }
}

.lwh-open-cbot .chat__messages__ai p .switch {
    --switch-label-width: calc(100% - var(--switch-label-position-left));
    margin-top: 4px;
    /*
    input:checked + .slider {
        background-color: var(--chatbot-primary-color);
    }
    */
}

.lwh-open-cbot .chat__messages__ai .code-snippet {
    background-color: rgb(27, 27, 27);
    border-radius: 8px;
}

.lwh-open-cbot .chat__messages__ai pre {
    display: flex;
    overflow: hidden;
}

.lwh-open-cbot .chat__messages__ai code {
    display: block;
    padding: 10px;
    /* font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; */
    color: #f8f8f8;
    overflow-x: auto;
    word-break: normal;
    word-spacing: normal;
    white-space: pre;
    align-self: flex-start;
    text-align: left;
}

.lwh-open-cbot .startup-btns-container {
    height: 42px;
    padding: 6px 10px;
}

.lwh-open-cbot .snippet-header {
    background: rgb(164, 164, 164);
    border-radius: 8px 8px 0 0;
    padding: 0 12px;
}

.lwh-open-cbot .snippet-header button {
    cursor: pointer;
    color: rgb(55 55 55);
    font-weight: 600;
}

.lwh-open-cbot .chat__messages__ai img:not(.bot-image) {
    padding: 6px 12px;
    border-radius: 0px 8px 8px 8px;
    align-self: flex-start;
    border: 1.5px solid var(--chatbot-bg-color);
    max-width: 160px;
}

.lwh-open-cbot .chat__messages__user p {
    background-color: var(--chatbot-primary-color);
    padding: 6px 12px;
    border-radius: 8px 8px 0px 8px;
    color: white;
    width: -moz-fit-content;
    width: fit-content;
    min-width: 0;
    max-width: calc(100% - 38px);
    overflow-wrap: anywhere;
    align-self: flex-end;
}

.lwh-open-cbot .chat__messages__user img:not(.avatar-image) {
    padding: 6px 12px;
    border-radius: 8px 8px 0px 8px;
    align-self: flex-end;
    border: 1.5px solid var(--chatbot-primary-color);
    max-width: 160px;
}

.lwh-open-cbot .chat__input-area {
    padding: 12px 10px;
    position: relative;
    z-index: 1;
}

.lwh-open-cbot .chat__input-area>form {
    display: flex;
    gap: 6px;
    align-items: center;
}

.lwh-open-cbot .chat__input-area>form button {
    width: 36px;
    margin-top: 4px;
}

.lwh-open-cbot .chat__input-area>form .input {
    width: 100%;
}

.lwh-open-cbot .chat__input-area .input label {
    font-size: 12px;
    opacity: 0.7;
}

.lwh-open-cbot .chat__input-area .input input {
    border: 2px solid var(--chatbot-border-color);
    border-radius: 10px;
    padding: 4px 12px;
}

.lwh-open-cbot .chat__input-area .input label:hover {
    color: var(--chatbot-secondary-color);
    cursor: pointer;
    opacity: 1;
}

.lwh-open-cbot .chat__input-area .input>div:nth-child(1),
.lwh-open-cbot .chat__input-area .input input {
    width: 100%;
    font-size: 16px;
}

.lwh-open-cbot .chat__input-area #voice-btn {
    display: none;
}

body.can-record .lwh-open-cbot .chat__input-area #voice-btn {
    display: inline-block;
}

.lwh-open-cbot .chat__transcript-view:not([hidden]) {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 32px 24px 24px;
}

.lwh-open-cbot .chat__transcript-intro h2,
.lwh-open-cbot .chat__transcript-success h2 {
    color: #222;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 12px;
}

.lwh-open-cbot .chat__transcript-intro p,
.lwh-open-cbot .chat__transcript-success p {
    color: rgba(0, 0, 0, 0.72);
    font-size: 15px;
    line-height: 1.5;
}

.lwh-open-cbot #chatbot-transcript-form {
    display: flex;
    flex: 1;
    flex-direction: column;
    margin-top: 28px;
}

.lwh-open-cbot .chat__transcript-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lwh-open-cbot .chat__transcript-field label {
    color: #222;
    font-size: 14px;
    font-weight: 600;
}

.lwh-open-cbot .chat__transcript-field input[type='email'] {
    background: #fff;
    border: 2px solid var(--chatbot-border-color);
    border-radius: 10px;
    color: #222;
    font-size: 16px;
    line-height: 1.4;
    padding: 9px 12px;
    width: 100%;
}

.lwh-open-cbot .chat__transcript-message {
    color: rgba(0, 0, 0, 0.65);
    font-size: 13px;
    line-height: 1.4;
    min-height: 20px;
    padding-top: 8px;
}

.lwh-open-cbot .chat__transcript-message.is-error {
    color: #991a1a;
}

.lwh-open-cbot .chat__transcript-actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
}

.lwh-open-cbot .custom-chatbot .chat__transcript-actions button,
.lwh-open-cbot .custom-chatbot button.chat__transcript-return {
    border: 2px solid var(--chatbot-primary-color);
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    padding: 10px 14px;
}

.lwh-open-cbot .custom-chatbot .chat__transcript-actions button {
    flex: 1;
}

.lwh-open-cbot .custom-chatbot button.chat__transcript-cancel {
    background: #fff;
    color: var(--chatbot-primary-color);
}

.lwh-open-cbot .custom-chatbot button.chat__transcript-submit,
.lwh-open-cbot .custom-chatbot button.chat__transcript-return {
    background: var(--chatbot-primary-color);
    color: #fff;
}

.lwh-open-cbot .custom-chatbot .chat__transcript-actions button:hover,
.lwh-open-cbot .custom-chatbot button.chat__transcript-return:hover {
    border-color: var(--chatbot-hover-color);
}

.lwh-open-cbot .custom-chatbot button.chat__transcript-submit:hover,
.lwh-open-cbot .custom-chatbot button.chat__transcript-return:hover {
    background: var(--chatbot-hover-color);
}

.lwh-open-cbot .custom-chatbot .chat__transcript-actions button:disabled {
    cursor: wait;
    opacity: 0.65;
}

.lwh-open-cbot .chat__transcript-success:not([hidden]) {
    align-items: flex-start;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
}

.lwh-open-cbot .custom-chatbot button.chat__transcript-return {
    margin-top: 24px;
}

.lwh-open-cbot .custom-chatbot button[disabled] i {
    cursor: not-allowed;
    color: var(--chatbot-button-disabled-color);
}

.lwh-open-cbot .popup {
    display: none;
    width: 100%;
    position: absolute;
    background-color: var(--chatbot-popup-bg-color);
    padding: 12px;
    border-radius: 4px;
    top: 1%;
    opacity: 0;
    font-weight: 500;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

.lwh-open-cbot .popup-animation {
    animation: slideInRight 0.5s ease forwards, fadeOut 2s ease forwards 3s;
}

.lwh-open-cbot .popup p {
    color: var(--chatbot-popup-text-color);
}

.lwh-open-cbot .popup .close-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
}

/*
@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
*/
@keyframes recording {
    from {
        color: black;
        background-color: transparent;
    }

    to {
        color: white;
        background-color: var(--chatbot-dictation-recording-color);
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes blink {
    50% {
        fill: transparent;
    }
}

.lwh-open-cbot .dot {
    animation: 1s blink infinite;
    fill: var(--chatbot-dot-color);
}

.lwh-open-cbot .dot:nth-child(2) {
    animation-delay: 250ms;
}

.lwh-open-cbot .dot:nth-child(3) {
    animation-delay: 500ms;
}

.lwh-open-cbot .loading {
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 20px;
}

.lwh-open-cbot .copy-text {
    cursor: pointer;
    font-size: 12px;
    position: absolute;
    top: 4px;
    right: 4px;
}

.lwh-open-cbot .copy-text span {
    display: none;
    position: absolute;
    background-color: white;
    border-radius: 4px;
    padding: 0px 6px 1px 6px;
    color: black;
    border: 1px solid var(--chatbot-border-color);
}

.lwh-open-cbot .avatar-image {
    display: block;
}

.lwh-open-cbot .startup-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.lwh-open-cbot .startup-btns p {
    padding: 6px 10px;
    border: 1px solid var(--chatbot-border-color);
    border-radius: 4px;
    width: -moz-fit-content;
    width: fit-content;
    cursor: pointer;
}

.lwh-open-cbot .startup-btns p:hover {
    background-color: var(--chatbot-hover-color);
    color: white;
}

.lwh-open-cbot .footer-area {
    padding: 0 10px 10px 10px;
    font-size: 11px;
    display: none;
}

.lwh-open-cbot .footer-area a {
    text-decoration: none;
}

.lwh-open-cbot .no-record-buttons {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
}
.lwh-open-cbot .no-record-buttons.selected {
    display: none;
}

.lwh-open-cbot .no-record-buttons button {
    padding: 2px 10px;
    border: 1px solid var(--chatbot-border-color);
    border-radius: 4px;
    background: #fff;
    color: #222;
    cursor: pointer;
    font-size: 16px;
}
.lwh-open-cbot .no-record-buttons #no-record-cancel {
    margin-left:8px;
}
.lwh-open-cbot .no-record-buttons #no-record-agree {
    margin-left: 4px;
}
.lwh-open-cbot .no-record-buttons button.selected,
.lwh-open-cbot .no-record-buttons button:active {
    background: var(--chatbot-primary-color);
    color: #fff;
    border-color: var(--chatbot-primary-color);
}

@media (max-width: 1024px) {
    .lwh-open-cbot .custom-chatbot {
        left: 50%;
        transform: translateX(-50%);
        right: auto;
        width: calc(100% - 2rem) !important;
    }

    .lwh-open-cbot .chat {
        bottom: 20px;
    }
}

@media (max-width: 430px) and (max-height: 932px) {
    .lwh-open-cbot .chat {
        height: calc(100% - 120px);
        max-height: 80vh;
    }
}

@media (max-height: 800px) {
    .lwh-open-cbot .chat {
        height: 70vh;
    }
}

@media (max-width: 375px) and (max-height: 667px) {
    .lwh-open-cbot .chat__messages {
        height: auto;
    }

    .lwh-open-cbot .chat {
        height: calc(100% - 120px);
        max-height: 80vh;
    }
}

@media (max-height: 430px) {
    .lwh-open-cbot .chat__messages__ai p {
        font-size: 0.9rem !important;
        line-height: 1.2em;
    }
}

body.recording .lwh-open-cbot #messageForm input {
    background-color: var(--chatbot-dictation-recording-color);
}

body.processing-speech .lwh-open-cbot #messageForm input {
    background-color: orange;
}

body.finishing-up .lwh-open-cbot #messageForm input {
    background-color: green;
}

body.recording .lwh-open-cbot .chat__input-area .input input::placeholder {
    color: white;
}

body.recording:not(.processing-speech, .finishing-up) .lwh-open-cbot .chat__input-area #voice-btn i {
    color: white;
}

body.processing-speech .lwh-open-cbot .chat__input-area #voice-btn i {
    color: var(--chatbot-button-disabled-color);
}

body.recording:not(.processing-speech) .lwh-open-cbot .chat__input-area #voice-btn i {
    animation: recording 0.75s infinite alternate;
}

.chatbot-container:not(:has(.chat.show)) .custom-chatbot {
    z-index: -1;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
}

/*

Start a call
https://ifactoryau.teamwork.com/app/tasks/39937429

*/
elevenlabs-convai {
    bottom: 9px;
    right: 10px;
    z-index: 1;
    /*

    This does not work because this bit is used Shadow DOM, a web standard
    that allows encapsulation of a component's internal DOM and CSS, so its internals are hidden
    from the main document's CSS and JavaScript, meaning the elements inside the shadow DOM are not accessible
    via normal CSS selectors or "document.querySelector" from the main page context.

    See: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM

    Taken care by JS file "js/chatbot.js"

    div[class*="_poweredBy_"] {
        display: none;
    }
    */
}
/* Hide Chatbot if this widget is displayed */
body.has-ai-sales-agent {
    .chatbot-container {
        display: none !important;
    }
}
@media (max-width: 480px) {
    elevenlabs-convai {
        bottom: 70px;
        right: 10px;
    }
}