.typewriter {
    display: inline-flex;
}

.typewriter span {
    word-break: break-all;
    height: 1.5rem;
    width: 0%;
    overflow: hidden;
    animation: t 2s linear infinite alternate;
    font-style: italic;
}

.typewriter span:before {
    content: " ";
    display: inline-block;
}

@keyframes t {

    90%,
    100% {
        width: 100%
    }
}

.aichat-input {
    min-width: 75%;
}

.aichat-input.thinking {
    animation: fadeInOut 2s infinite;
}

@keyframes fadeInOut {
    0% {
        opacity: 0.25;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.25;
    }
}

.aichat-container {
    border: 3px solid #ccc;
    padding: 0.5rem;
    width: 100%;

    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 0.5rem;
    /* match padding */
    column-gap: 0.5rem;
    /* match padding */
    box-sizing: border-box;
    background-color: white;
}

.aichat-container>.w-tabs {
    flex: 1 1 100%;
}

.aichat-container .w-tabs.accordion>div>.w-tabs-section {
    border-width: 0 !important;
}

.aichat-disclaimer,
.small-info {
    flex-basis: 100%;
    font-weight: 300;
    opacity: 0.75;
    font-size: smaller;
    text-align: right;
    margin-bottom: 3px;
    padding: 0 0.5rem;
}

.aichat-messages {
    height: 50vh;
    max-height: calc(100% - 140px);
    overflow-y: auto;
    flex-basis: 100%;
}

/*@media screen and (max-width:600px) {
    .aichat-messages {
        height: 50vh;
    }
}*/

.aichat-messages a {
    color: var(--color-content-link);
    text-decoration: underline;
}

.aichat-controls {
    flex: 1 1 140px;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 0.5rem;
    /* match padding */
    column-gap: 0.5rem;
    /* match padding */
    box-sizing: border-box;
    max-height: 155px;
    overflow-y: auto;
    align-self: flex-end;
}

.welcome-message {
    font-weight: 500;
    font-size: 1.1rem;
}

.voice-status>* {
    padding: 1rem;
}

.aichat-inputs {
    /* fix uneven heights between buttons and inputs */
    flex-basis: 100%;
    height: 44.8px;
    min-height: auto !important;
}

.aichat-container .w-btn-wrapper {
    flex-basis: 100%;
    max-height: 44.8px;

    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.aichat-container .w-btn-wrapper>* {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}


@media screen and (min-width:720px) {

    .aichat-inputs {
        flex: 1 1 calc(100% - 1rem - 300px);
    }

    .aichat-container .w-btn-wrapper {
        flex: 1 1 auto;
    }

    .aichat-container .w-btn-wrapper>* {
        width: 100%;
        max-width: 300px;
        height: 100%;
        /* match height of inputs */
    }



}

.user-message-container {
    text-align: right;
    padding-right: 1rem;
}

.user-message-container p {
    max-width: 400px;
    background-color: white;
    border-radius: 6px;
    padding: 1.5rem;
    margin: 1.5rem 0 1.5rem auto;
    border: 0.5px solid #999;
    filter: drop-shadow(-2px -2px 8px rgba(0, 0, 0, 0.2));
    color: #999;
    font-size: 0.9rem;
    display: inline-block;
    text-align: left;
    position: relative;
}

.user-message-container p:before,
.user-message-container p:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 16px 0px 0px 15px;
    border-color: #FFFFFF transparent;
    display: block;
    width: 0;
    z-index: 2;
    bottom: -15px;
    right: 8px;
    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
}

.user-message-container p:after {
    border-color: #999 transparent;
    bottom: -16.5px;
    right: 7.5px;
    z-index: 1;
}

.user-message {
    color: black;
    font-weight: 500;
    display: block;
    margin-top: 0.5rem;
    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
    word-break: break-word;
}

.bot-message {
    text-align: left;
    color: inherit;
    word-break: break-word;
}

.bot-message h2,
.bot-message h3,
.bot-message h4,
.bot-message h5,
.bot-message h6 {
    margin-top: 1rem;
    margin-bottom: 0.25rem;
}

.bot-message p {
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
}

.bot-message ul,
.bot-message ol {
    margin-bottom: 0.5rem;
}

.bot-message li {
    margin-bottom: 0.05rem;
}

.bot-message h2 {
    font-size: 1.5rem;
}

.bot-message h3 {
    font-size: 1.25rem;
}

.bot-message h4 {
    font-size: 1.175rem;
}

.bot-message h5 {
    font-size: 1.1rem;
}

.bot-message h6 {
    font-size: 1rem;
    font-weight: 500;
}

.aichat-transcript {
    flex: 1 1 100%;
}

.aichat-transcript>p {
    margin-bottom: 0.5rem;
    text-align: right;
}

.aichat-transcript-fields {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 0.5rem;
    column-gap: 0.5rem;
}

.aichat-transcript-fields>p {
    flex-basis: 100%;
    font-weight: 500;
    text-align: right;
}


.sideways_right_side_button {
    position: fixed;
    transition: .5s all ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;

    color: #fff;
    transform: rotate(270deg);
    top: calc(50% - 20px);
    right: -140px;
    height: 40px;
    width: 320px;
    z-index: 100;
}

.sideways_right_side_button .w-btn {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

.w-popup-box-content .l-section.height_medium {
    padding: 0 !important;
}

@media (max-width: 430px) {
    .w-popup-wrap[style*="--popup-padding"] .w-popup-box-content {
        padding: 10px 0.5rem;
    }
}

/* ai help button on tiny screen for header */
footer .message-bot-button:not(.sideways_right_side_button) {
    display: none;
}

@media screen and (max-width:430px) {
    header .message-bot-button {
        display: none !important;
    }

    footer .message-bot-button:not(.sideways_right_side_button) {
        display: block;
        position: fixed;
        bottom: 1px;
        left: 5px;
        filter: drop-shadow(0 0 10px rgba(0, 0, 0, .2));
        z-index: 100;
    }
}

/* message bot icon from FontAwesome6 pro which we own */
.message-bot-button i.fa-info-circle::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M160 0C124.7 0 96 28.7 96 64V176H59.7c-5.5-9.6-15.9-16-27.7-16c-17.7 0-32 14.3-32 32s14.3 32 32 32c11.8 0 22.2-6.4 27.7-16H96V352c0 35.3 28.7 64 64 64h64v80c0 6.1 3.4 11.6 8.8 14.3s11.9 2.1 16.8-1.5L373.3 416H480c35.3 0 64-28.7 64-64V208h36.3c5.5 9.6 15.9 16 27.7 16c17.7 0 32-14.3 32-32s-14.3-32-32-32c-11.8 0-22.2 6.4-27.7 16H544V64c0-35.3-28.7-64-64-64H160zm0 128c0-17.7 14.3-32 32-32H448c17.7 0 32 14.3 32 32V256c0 17.7-14.3 32-32 32H192c-17.7 0-32-14.3-32-32V128zm64 96a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm192 0a32 32 0 1 0 0-64 32 32 0 1 0 0 64z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M160 0C124.7 0 96 28.7 96 64V176H59.7c-5.5-9.6-15.9-16-27.7-16c-17.7 0-32 14.3-32 32s14.3 32 32 32c11.8 0 22.2-6.4 27.7-16H96V352c0 35.3 28.7 64 64 64h64v80c0 6.1 3.4 11.6 8.8 14.3s11.9 2.1 16.8-1.5L373.3 416H480c35.3 0 64-28.7 64-64V208h36.3c5.5 9.6 15.9 16 27.7 16c17.7 0 32-14.3 32-32s-14.3-32-32-32c-11.8 0-22.2 6.4-27.7 16H544V64c0-35.3-28.7-64-64-64H160zm0 128c0-17.7 14.3-32 32-32H448c17.7 0 32 14.3 32 32V256c0 17.7-14.3 32-32 32H192c-17.7 0-32-14.3-32-32V128zm64 96a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm192 0a32 32 0 1 0 0-64 32 32 0 1 0 0 64z'/%3E%3C/svg%3E");
    width: 1.5rem;
    line-height: 0;
    display: block;
    height: 1.5rem;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    margin-bottom: -0.5rem;
    content: '█';
    font-size: 3rem;
}

/*
.aichat-transcript-fields>* {
    flex: 1 1 auto;
}

.aichat-transcript .w-btn-wrapper.align_right {
    width: 100%;
    max-width: 300px;
}*/

.hyperai-modal-container {
    max-width: 100%;
    background: white;
    overflow: hidden;
    padding: 0px;
}

.hyperai-modal-container .aichat-container {
    height: 100%;
}

@media screen and (min-width: 431px) {
    .hyperai-modal-container {
        position: fixed;
        bottom: 22px;
        right: 65px;
        width: 324px;
        height: 500px;
        max-height: 90%;
        z-index: 5;
        transition: width 0.2s ease-in-out, height 0.2s ease-in-out;
        overflow: visible;
    }

    .hyperai-modal-container.is-minimised {
        width: 110px;
        height: 53px;
        background-color: transparent;
        transition: width 0.2s ease-in-out, height 0.2s ease-in-out;
        right: 75px;
        bottom: 30px;
    }



    .hyperai-modal-container.is-minimised>* {
        display: none;
    }

    .hyperai-modal-container>.hyperai-toggle-modal {
        position: absolute;
        top: -12.5px;
        right: -5px;

        z-index: 6;
    }

    .hyperai-modal-container .modal-button {
        width: 25px;
        height: 25px;
        display: block;
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path stroke="%23000" stroke-width="2" d="M3 12a9 9 0 1 1 18 0 9 9 0 0 1-18 0Z"/><path stroke="%23000" stroke-linecap="round" stroke-width="2" d="m9 9 6 6m0-6-6 6"/></svg>');
        background-position: center;
        background-color: white;
        background-size: 25px 25px;
        border-radius: 12.5px;
        background-repeat: no-repeat;

    }

    .hyperai-modal-container.is-minimised .hyperai-toggle-modal {
        animation: jiggle 7s infinite;
        animation-delay: 3s;
    }

    @keyframes jiggle {
        0% {
            transform: translateX(0);
        }

        1% {
            transform: translateX(-2px);
        }

        2% {
            transform: translateX(2px);
        }

        3% {
            transform: translateX(-2px);
        }

        4% {
            transform: translateX(2px);
        }

        5% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(0);
        }
    }

    .hyperai-modal-container.is-minimised>.hyperai-toggle-modal {
        display: block;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        filter: drop-shadow(-3px 3px 10px rgba(0, 0, 0, .5));
    }

    .hyperai-modal-container.is-minimised .modal-button {
        width: 100%;
        height: 100%;
        background-image: none;
        background-color: var(--color-alt-content-bg);
        color: var(--color-alt-content-text);
        border-radius: 6px;
        border-color: var(--color-alt-content-primary);
        border-width: 2px;
        border-style: solid;
        padding: 5px;
        transition: all 0.2s ease-in-out;
    }

    .hyperai-modal-container.is-minimised .modal-button:hover {
        background-color: var(--color-content-primary);
        color: white;
        border-color: white;
        transition: all 0.2s ease-in-out;
    }

    .hyperai-modal-container.is-minimised .modal-button::before {
        position: absolute;
        left: 7px;
        width: 40px;
        height: 40px;
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M160 0C124.7 0 96 28.7 96 64V176H59.7c-5.5-9.6-15.9-16-27.7-16c-17.7 0-32 14.3-32 32s14.3 32 32 32c11.8 0 22.2-6.4 27.7-16H96V352c0 35.3 28.7 64 64 64h64v80c0 6.1 3.4 11.6 8.8 14.3s11.9 2.1 16.8-1.5L373.3 416H480c35.3 0 64-28.7 64-64V208h36.3c5.5 9.6 15.9 16 27.7 16c17.7 0 32-14.3 32-32s-14.3-32-32-32c-11.8 0-22.2 6.4-27.7 16H544V64c0-35.3-28.7-64-64-64H160zm0 128c0-17.7 14.3-32 32-32H448c17.7 0 32 14.3 32 32V256c0 17.7-14.3 32-32 32H192c-17.7 0-32-14.3-32-32V128zm64 96a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm192 0a32 32 0 1 0 0-64 32 32 0 1 0 0 64z'/%3E%3C/svg%3E");
        mask-repeat: no-repeat;
        mask-size: 100%;
        mask-position: left;
        background-color: var(--color-alt-content-text);
        display: block;
        content: '';
    }

    .hyperai-modal-container.is-minimised .modal-button:hover::before {
        background-color: white;
    }

    .hyperai-modal-container.is-minimised .modal-button::after {
        content: 'need help?';
        display: flex;
        align-items: center;
        position: absolute;
        line-height: 20px;
        /* half height */
        font-size: 16px;
        width: 66px;
        right: 0;
        text-align: center;
        text-transform: uppercase;
        font-weight: bold;
    }




    .aichat-container.has-speech-input .aichat-messages {
        flex: 1 1 100%;
    }
}

/* fix old zephyr <8.x */
/*.aichat-container .w-btn-wrapper.align_right {
    margin-left: 0;
}*/

.overflow-hidden {
    overflow: hidden;
}