.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: 50%;
}

.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;
}

.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: 40vh;
    overflow-y: auto;
    flex-basis: 100%;
}

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

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

.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%;

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

.aichat-container .w-btn-wrapper>* {
    width: 100%;
}


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

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

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

    .aichat-inputs+.w-btn-wrapper {
        /*flex: 1 1 300px;*/
        /*width: 300px;*/
        max-width: 100%;
    }

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

    .aichat-input+.w-btn-wrapper+.w-btn-wrapper,
    .aichat-input+.w-btn-wrapper+.w-btn-wrapper+.w-btn-wrapper {
        flex-basis: calc(50% - 0.5rem);
    }

}

.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;
    border: 1px solid rgb(204, 204, 204);
    overflow: hidden;
    padding: 0px;
}

@media screen and (min-width: 431px) {
    .hyperai-modal-container {
        position: fixed;
        bottom: 22px;
        right: 25px;
        width: 400px;
        height: 500px;
        max-height: 60vh;

    }
}

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