/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
body.ai-companion-chat-page {
    margin: 0;
    padding: 0;
}
body.ai-companion-chat-page, .scrollable {
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
}
body.ai-companion-chat-page::-webkit-scrollbar, .scrollable::-webkit-scrollbar {
    display: none; /* Chrome Safari */
}

.ai-companion-chat-page .site-header {
    padding: 0;
    background-color: #23282d;
}
.ai-companion-chat-page .site-branding {
    color: #767676;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    position: relative;
    word-wrap: break-word;
    padding: 0;
}
.ai-companion-chat-page .container{
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-right: auto;
    margin-left: auto;
}
@media only screen and (min-width: 576px) {
    .ai-companion-chat-page .container {
        max-width: 540px;
    }
}
@media only screen and (min-width: 768px) {
    .ai-companion-chat-page .container {
        max-width: 720px;
    }
}
@media only screen and (min-width: 992px) {
    .ai-companion-chat-page .container {
        max-width: 960px;
    }
}
@media only screen and (min-width: 1200px) {
    .ai-companion-chat-page .container {
        max-width: 1140px;
    }
}
@media only screen and (min-width: 1400px) {
    .ai-companion-chat-page .container {
        max-width: 1320px;
    }
}
.ai-companion-chat-page .navbar-dark {
    --bs-navbar-color: rgba(255, 255, 255, 0.55);
    --bs-navbar-hover-color: rgba(255, 255, 255, 0.75);
    --bs-navbar-disabled-color: rgba(255, 255, 255, 0.25);
    --bs-navbar-active-color: #fff;
    --bs-navbar-brand-color: #fff;
    --bs-navbar-brand-hover-color: #fff;
    --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.1);
    --bs-navbar-toggler-icon-bg: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e);
}
.ai-companion-chat-page .navbar {
    --bs-navbar-padding-x: 0;
    --bs-navbar-padding-y: 0.5rem;
    --bs-navbar-color: rgba(0, 0, 0, 0.55);
    --bs-navbar-hover-color: rgba(0, 0, 0, 0.7);
    --bs-navbar-disabled-color: rgba(0, 0, 0, 0.3);
    --bs-navbar-active-color: rgba(0, 0, 0, 0.9);
    --bs-navbar-brand-padding-y: 0.3125rem;
    --bs-navbar-brand-margin-end: 1rem;
    --bs-navbar-brand-font-size: 1.25rem;
    --bs-navbar-brand-color: rgba(0, 0, 0, 0.9);
    --bs-navbar-brand-hover-color: rgba(0, 0, 0, 0.9);
    --bs-navbar-nav-link-padding-x: 0.5rem;
    --bs-navbar-toggler-padding-y: 0.25rem;
    --bs-navbar-toggler-padding-x: 0.75rem;
    --bs-navbar-toggler-font-size: 1.25rem;
    --bs-navbar-toggler-icon-bg: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e);
    --bs-navbar-toggler-border-color: rgba(0, 0, 0, 0.1);
    --bs-navbar-toggler-border-radius: 0.375rem;
    --bs-navbar-toggler-focus-width: 0.25rem;
    --bs-navbar-toggler-transition: box-shadow 0.15s ease-in-out;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: var(--bs-navbar-padding-y) var(--bs-navbar-padding-x);
}
.ai-companion-chat-page .navbar-expand {
    flex-wrap: nowrap;
    justify-content: flex-start;
}
.ai-companion-chat-page .site-logo {
    position: relative;
    z-index: 999;
    margin-bottom: 0;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}
.ai-companion-chat-page .site-title {
    margin: auto 0;
    display: inline;
    color: #111;
    font-size: 1rem;
}
.ai-companion-chat-page .site-title .navbar-brand {
    font-size: 1rem;
}
.ai-companion-chat-page .site-title, .page-title {
    font-weight: normal;
}
.align-self-end {
    align-self: flex-end!important;
}
.ai-companion-chat-page .site-description {
    font-weight: lighter;
    font-size: .8125rem;
    margin: 0 .5rem;
    display: inline;
    color: #767676 !important;
    opacity: 1 !important;
    letter-spacing: -0.01em;
}
.ai-companion-chat-page .site-logo .custom-logo-link {
    border-radius: 100%;
    box-sizing: content-box;
    box-shadow: 0 0 0 0 rgb(0 0 0 / 0%);
    display: block;
    width: 42px;
    height: 42px;
    overflow: hidden;
    transition: box-shadow 200ms ease-in-out;
    padding: 0;
}
.ai-companion-chat-page .site-title:not(:empty) + .site-description:not(:empty):before {
    content: "\2013";
}
.ai-companion-chat-page .site .site-content#content {
    padding: 0;
}
.ai-companion-chat-page .content-area {
    margin: 0;
}

.aic.chat-page {
    --primary-color: #3390ec;
    --surface-color: #ffffff;
    --secondary-text-color: #707579;
    --line-height: 1.3125;
    --right-column-width: 0;
    --chat-input-size: 2.875rem;
    --chat-input-padding: 0.8125rem;
    --messages-line-height: var(--line-height);
    --messages-text-size: 16px;
    --message-in-background-color: #ffffff;
    --message-out-background-color: #e9f5e9;
    --message-time-color: var(--secondary-text-color);
    --message-out-time-color: #4fae4e;
    --messages-time-text-size: calc(var(--messages-text-size) - 4px);
}

@media only screen and (min-width: 768px) {
    .aic.chat-page {
        --primary-color: #3390ec;
        --surface-color: #ffffff;
        --secondary-text-color: #707579;
        --line-height: 1.3125;
        --right-column-width: 25vw;
        --chat-input-size: 3.375rem;
        --chat-input-padding: 0.8125rem;
        --messages-line-height: var(--line-height);
        --messages-text-size: 16px;
        --message-in-background-color: #ffffff;
        --message-out-background-color: #e9f5e9;
        --message-time-color: var(--secondary-text-color);
        --message-out-time-color: #4fae4e;
        --messages-time-text-size: calc(var(--messages-text-size) - 4px);
    }
}

.aic.chat-page {
    height: calc(100vh);
}
 
.chats-container {
    position: relative;
    height: 100%;
    min-width: 100%;
    width: 100%;
}

.chat {
    align-items: center;
    display: flex!important;
    flex-direction: column;
    transition: transform var(--tabs-transition),filter var(--tabs-transition);
    width: 100%;
    height: 100%;
}

.chat-background, .chat-background-item {
    bottom: 0;
    left: 0;
    position: absolute!important;
    right: 0;
    top: 0;
    background-color: #ccc;
    z-index: -1;
}
.chat-background {
    background-image: url("/wp-content/plugins/ai-companion/public/img/pattern.png");
    background-size: contain;
}
.chat-background-item {
    background-image:
        /* linear-gradient(#dbddbb, #6ba587, #d5d88d, #88b884),  */
        linear-gradient(30deg, #6ba587BF, #6ba58700 50%), 
        linear-gradient(135deg, #d5d88dD9, #d5d88d00 75%),
        linear-gradient(200deg, #88b884BF, #88b88400 50%), 
        linear-gradient(270deg, #dbddbbD9, #dbddbb00 75%);
    background-color: #00000000;
}

.bubbles {
    --translateY: 0;
    flex: 1 1 auto;
    position: relative;
    transform: translate3d(0,var(--translateY),0);
    transition: transform var(--transition-standard-out);
    width: 100%;
}

.bubbles-inner {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin: 0 auto;
    max-width: var(--messages-container-width);
    min-height: 100%;
    padding: .25rem var(--chat-input-padding) 0;
    transform: translateY(0);
    transition: transform var(--transition-standard-out);
    width: calc(100% - var(--right-column-width));
    box-sizing: border-box;
}

.scrollable {
    -webkit-overflow-scrolling: touch;
    bottom: 0;
    height: 100%;
    left: 0;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}

.scrollable.scrollable-y {
    -ms-overflow-style: none;
    overflow-y: auto;
    overflow-y: overlay;
    scrollbar-color: transparent transparent;
    scrollbar-width: thin;
    transform: translateZ(0);
}

.bubble {
    --line-height: var(--messages-line-height);
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto .125rem;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    z-index: 1;
}

.bubble.is-group-last {
    margin-bottom: 0.5rem;
}

.bubble.is-out {
    --message-background-color: var(--message-out-background-color);
    --light-message-background-color: var(--light-message-out-background-color);
    --dark-message-background-color: var(--dark-message-out-background-color);
    --link-color: var(--message-out-link-color);
    --message-primary-color: var(--message-out-primary-color);
    --light-filled-message-primary-color: var(--light-filled-message-out-primary-color);
    --selection-background-color: var(--message-out-selection-background-color);
    --message-time-color: var(--message-out-time-color);
    --message-status-color: var(--message-out-status-color);
    flex-direction: row-reverse;
}

.bubble.is-in {
    --message-background-color: var(--message-in-background-color);
}

.bubble:not(.service) .bubble-content-wrapper {
    max-width: 85%;
}

.bubble-content {
    background-color: var(--message-background-color);
    border-radius: 12px;
    box-shadow: 0 1px 2px 0 rgb(16 35 47 / 15%);
    display: flex;
    flex-direction: column-reverse;
    max-width: 100%;
    min-width: 56px;
    position: relative;
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
    z-index: 2;
}

.bubble .message {
    color: var(--primary-text-color);
    font-size: 16px;
    line-height: var(--line-height);
    max-width: 100%;
    padding: 0 .5rem .375rem .625rem;
    position: relative;
    white-space: pre-wrap;
    word-break: break-word;
}

.bubble.hide-name:not(.is-reply):not(.is-message-empty) .message {
    padding-top: 6px;
}
.bubble.hide-name:not(.is-reply):not(.is-message-empty) .message {
    padding-top: 6px;
}
.bubble:not(.forwarded):not(.must-have-name):not(.is-group-first):not(.is-message-empty):not(.is-reply) .message {
    padding-top: 6px;
}
.bubble:not(.forwarded):not(.must-have-name):not(.is-group-first):not(.is-message-empty):not(.is-reply) .message {
    padding-top: 6px;
}

.bubble .time {
    cursor: pointer;
    direction: ltr;
    display: inline-flex;
    float: right;
    font-size: var(--messages-time-text-size);
    height: var(--messages-time-text-size);
    line-height: 1;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    vertical-align: middle;
    visibility: hidden;
    z-index: 1;
}

.bubble.is-in .time {
    margin-left: -3px;
    padding-right: 8px;
}
.bubble.is-out .time {
    margin-left: -4px;
    padding-right: 5px;
}

.bubble .time .inner {
    align-items: center;
    bottom: 0;
    color: var(--message-time-color);
    display: flex;
    height: var(--messages-time-text-size);
    line-height: 1;
    padding: inherit;
    pointer-events: all;
    position: absolute;
    right: 0;
    visibility: visible;
    white-space: nowrap;
}

.bubble.is-in .time .inner {
    margin-bottom: 4px;
}
.bubble.is-out .time .inner {
    bottom: 4px;
}

.bubble.can-have-tail.is-group-last .bubble-tail {
    fill: var(--message-background-color);
    display: block;
    height: 20px;
    position: absolute;
    transform: translateY(1px);
    width: 11px;
    z-index: -2;
}

.bubble.is-in.is-group-last.can-have-tail .bubble-tail {
    margin-left: -8.4px;
}

.bubble.is-out.is-group-last.can-have-tail .bubble-tail {
    right: -8.4px;
    transform: translateY(1px) scaleX(-1);
}

.bubble.is-in.is-group-last.can-have-tail .bubble-content, .bubble.is-in.is-group-last.can-have-tail .poll-footer-button {
    border-bottom-left-radius: 0!important;
}

.bubble.is-out.is-group-last.can-have-tail .bubble-content, .bubble.is-out.is-group-last.can-have-tail .poll-footer-button {
    border-bottom-right-radius: 0!important;
}

@-webkit-keyframes loading-bounce {
    0%, 80%, 100% { -webkit-transform: scale(0) }
    40% { -webkit-transform: scale(1) }
}
@keyframes loading-bounce {
    0%, 80%, 100% { transform: scale(0); } 
    40% { transform: scale(1); }
}

.bubble .bubble-content .loading-bounce {
    display: none;
}

.bubble.is-loading .bubble-content .loading-bounce {
    display: inline-block;
}

.bubble.is-loading .bubble-content .loading-bounce .bounce {
    width: .5rem;
    height: .5rem;
    display: inline-block;
    border-radius: 100%;
    background-color: var(--message-time-color);
    margin: 0 .125rem .125rem;
    -webkit-animation: loading-bounce 1.4s infinite ease-in-out both;
    animation: loading-bounce 1.4s infinite ease-in-out both;
}

.bubble.is-loading .bubble-content .loading-bounce .bounce:nth-child(1) {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.bubble.is-loading .bubble-content .loading-bounce .bounce:nth-child(2) {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

.bubble.is-loading .bubble-content .time {
    display: none;
}

.bubble.is-error .bubble-content .message {
    color: #dc3545;
}

.chat-input {
    --translateY: 0;
    --padding-bottom: 0.5rem;
    --bottom: var(--padding-bottom);
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    max-width: 100%;
    padding-top: .25rem;
    position: relative;
    transform: translate3d(0,var(--translateY),0);
    transition: transform var(--transition-standard-out);
    width: 100%;
}

.chat-input-container {
    --padding-horizontal: var(--chat-input-padding);
    align-items: flex-end;
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
    margin: 0 auto;
    max-width: var(--messages-container-width);
    padding: 0 var(--padding-horizontal);
    padding-bottom: var(--bottom);
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.chat-input-wrapper {
    --padding-vertical: 1px;
    --padding-horizontal: 0.25rem;
    --padding: var(--padding-vertical) var(--padding-horizontal);
    --button-size: 2.125rem;
    --button-horizontal-margin: .125rem;
    align-items: center;
    border-radius: 1rem;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: center;
    max-height: 30rem;
    max-width: calc(100% - var(--chat-input-size) - .5rem);
    min-height: var(--chat-input-size);
    position: relative;
    width: calc(100% - var(--chat-input-size) - .5rem);
    z-index: 3;
    background-color: #fff;
}

.rows-wrapper {
    border-bottom-right-radius: 0;
}

.rows-wrapper-wrapper {
    display: flex;
    width: 100%;
}

.rows-wrapper>div {
    align-items: center;
    background-color: #fff;
    border-radius: 1rem;
    display: flex;
    justify-content: space-between;
    padding: var(--padding);
    position: relative;
    width: 100%;
}

.rows-wrapper .new-message-wrapper {
    --send-as-size: 1.875rem;
    --send-as-margin-left: .25rem;
    --send-as-margin-right: .375rem;
    --send-as-total-size: calc(var(--send-as-size) + var(--send-as-margin-left) + var(--send-as-margin-right));
    --commands-size: 2.375rem;
    --commands-margin-left: .25rem;
    --commands-margin-right: .375rem;
    --commands-total-size: calc(var(--commands-size) + var(--commands-margin-left) + var(--commands-margin-right));
    --offset-translateX: 0px;
    align-items: flex-end;
    min-height: var(--chat-input-size);
    box-sizing: border-box;
}

.chat-input .rows-wrapper button:hover, .chat-input .rows-wrapper button:focus {
    background: none;
}

.chat-input .toggle-emoticons:before {
    content: "\263a";
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei New", STHeiti Light, sans-serif;
}
.chat-input .btn-clean:before {
    content: "\1F4A8";
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei New", STHeiti Light, sans-serif;
}

.btn-icon {
    align-items: center;
    background-color: transparent;
    border: none;
    border-radius: 50%!important;
    color: var(--secondary-text-color);
    display: flex;
    font-size: 1.5rem;
    justify-content: center;
    line-height: 1;
    padding: 0.5rem;
    position: relative;
    text-align: center;
    transition: color .15s ease-in-out,opacity .15s ease-in-out;
}

.btn-icon:hover {
    background: none;
}

.rows-wrapper .btn-icon {
    color: var(--secondary-text-color);
    flex: 0 0 auto;
    font-size: 1.5rem;
    height: var(--button-size);
    margin-bottom: 5px;
    margin-left: var(--button-horizontal-margin);
    margin-right: var(--button-horizontal-margin);
    margin-top: 0;
    padding: 0;
    width: var(--button-size);
}

.rows-wrapper .bubble-tail {
    fill: var(--surface-color);
    bottom: -1px;
    height: 20px;
    position: absolute;
    transform: scaleX(-1);
    width: 11px;
}

.rows-wrapper .bubble-tail {
    right: -8.4px;
}

.input-message-container {
    align-items: center;
    align-self: center;
    display: flex;
    flex: 1 1 auto;
    max-height: inherit;
    min-height: calc(3.375rem - .3125rem*2);
    overflow: hidden;
    position: relative;
    width: 1%;
}

.input-message-container .scrollable {
    position: relative;
}

.input-field-input-fake {
    bottom: auto!important;
    height: auto!important;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute!important;
    right: auto!important;
    top: 0;
    z-index: -3;
}

.input-message-input {
    --custom-emoji-size: var(--messages-custom-emoji-size);
    background: none;
    border: none;
    font-size: var(--messages-text-size);
    line-height: var(--line-height);
    outline: none;
    overflow-y: none;
    padding: .5rem .5625rem;
    resize: none;
    width: 100%;
}

.rows-wrapper .input-message-input {
    margin-top: -1px;
    max-height: 27.5rem!important;
    box-sizing: border-box;
}

[contenteditable][data-placeholder]:before {
    color: #a2acb4;
    content: attr(data-placeholder);
    display: block;
    opacity: 1;
    pointer-events: none;
    position: absolute;
}

[contenteditable=true] {
    cursor: text;
    outline: none;
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
    white-space: pre-wrap;
}

[contenteditable=true], input {
    background-color: transparent;
    caret-color: var(--primary-color);
    color: var(--primary-text-color);
}

.chat-input .btn-send-container {
    align-items: center;
    bottom: 0;
    display: flex;
    justify-content: center;
    padding-bottom: inherit;
    position: absolute;
    right: var(--padding-horizontal);
}

.chat-input .btn-send {
    background-color: var(--primary-color)!important;
    color: #fff!important;
    z-index: 3;
}

.chat-input-container .btn-circle {
    height: var(--chat-input-size);
    width: var(--chat-input-size);
    outline: 0;
}

.chat .bubble .bubble-content .message pre {
    margin: 0;
    padding: 0;
}

.bubble .bubble-content .btn-copy {
    position: absolute;
    color: #fff;
    background-color: rgba(17, 17, 17, 0.5);
    left: 5px;
    bottom: 4px;
    font-size: var(--messages-time-text-size);
    border-radius: 999em;
    padding: 0 .5rem;
    cursor: pointer;
    display: none;
}
.bubble .bubble-content .btn-copy:hover {
    background-color: rgba(17, 17, 17, 0.9);
}
.bubble .bubble-content:hover .btn-copy {
    display: inline-block;
}

@media only screen and (min-width: 768px) {
    .ai-companion-chat-page .site-logo {
        position: absolute;
        right: calc(100%);
        top: 4px;
        z-index: 999;
    }
    .ai-companion-chat-page .site-logo .custom-logo-link {
        width: 64px;
        height: 64px;
    }
    .ai-companion-chat-page .site-title .navbar-brand {
        font-size: 1.25rem;
    }
    .ai-companion-chat-page .site-description {
        font-size: 1rem;
    }
    .chat-input {
        width: calc(100% - var(--right-column-width));
    }
    .bubble.is-out .bubble-content-wrapper {
        transform: scale(1) translateX(calc((var(--chat-input-size) + 0.5rem)*-1));
    }
    .chat-input-wrapper {
        --padding-vertical: .3125rem;
        --padding-horizontal: 0.5rem;
    }
}