.medialab_chat {
--medialab-chat-glass-bg: #f5fafc;
--medialab-chat-glass-border: #ffffff;
--medialab-chat-shadow: 0 18px 45px rgba(31, 54, 73, 0.24);
--medialab-chat-accent: #1a6f8e;
--medialab-chat-accent-hover: #155870;
--medialab-chat-user-bg: #1a6f8e;
--medialab-chat-user-text: #f2fbff;
--medialab-chat-bot-bg: #eef4f7;
--medialab-chat-bot-text: #1f3b4d;
--medialab-chat-meta-color: rgba(31, 59, 77, 0.72);
--medialab-chat-day-bg: rgba(255, 255, 255, 0.58);
--medialab-chat-day-border: rgba(255, 255, 255, 0.7);
--medialab-chat-day-text: rgba(31, 59, 77, 0.68);
--medialab-chat-close-bg: rgba(255, 255, 255, 0.55);
--medialab-chat-close-border: rgba(255, 255, 255, 0.65);
--medialab-chat-close-text: #22485c;
--medialab-chat-input-bg: rgba(255, 255, 255, 0.73);
--medialab-chat-overlay-tint:
linear-gradient(135deg, rgba(176, 220, 233, 0.35), rgba(255, 222, 180, 0.28));
--medialab-chat-conversation-bg: transparent;
--medialab-chat-overlay-blur: 15px;
--medialab-chat-composer-blur: 14px;
--medialab-chat-conversation-bottom-space: 200px;
--medialab-chat-composer-width: 900px;
--medialab-chat-composer-padding: 14px;
--medialab-chat-composer-bottom: 16px;
--medialab-chat-composer-radius: 21px;
--medialab-chat-input-radius: 15px;
--medialab-chat-bubble-radius: 18px;
--medialab-chat-send-radius: 11px;
--medialab-chat-send-pad-y: 10px;
--medialab-chat-send-pad-x: 15px;
--medialab-chat-composer-border-width: 1px;
--medialab-chat-avatar-size: 30px;
--medialab-chat-quick-gap: 7px;
--medialab-chat-quick-pad-y: 7px;
--medialab-chat-quick-pad-x: 13px;
--medialab-chat-row-gap: 9px;
--medialab-chat-font: "Avenir Next", "Trebuchet MS", "Segoe UI", sans-serif;
--medialab-chat-message-font-family: "Avenir Next", "Trebuchet MS", "Segoe UI", sans-serif;
--medialab-chat-message-font-size: 15px;
--medialab-chat-message-line-height: 1.45;
--medialab-chat-message-weight: 400;
--medialab-chat-meta-font-family: "Avenir Next", "Trebuchet MS", "Segoe UI", sans-serif;
--medialab-chat-meta-font-size: 11px;
--medialab-chat-meta-line-height: 1.2;
--medialab-chat-meta-weight: 500;
--medialab-chat-input-font-family: "Avenir Next", "Trebuchet MS", "Segoe UI", sans-serif;
--medialab-chat-input-font-size: 16px;
--medialab-chat-input-line-height: 1.4;
--medialab-chat-input-weight: 400;
--medialab-chat-entry-duration: 420ms;
--medialab-chat-top-offset: 0px;
font-family: var(--medialab-chat-font);
}
.medialab_chat,
.medialab_chat *,
.medialab_chat *::before,
.medialab_chat *::after {
box-sizing: border-box !important;
}
.medialab_chat button,
.medialab_chat textarea {
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
letter-spacing: normal !important;
text-transform: none !important;
}
.medialab_chat .medialab_chat__send,
.medialab_chat .medialab_chat__quick-reply,
.medialab_chat .medialab_chat__close {
appearance: none !important;
-webkit-appearance: none !important;
outline: none !important;
box-shadow: none !important;
text-shadow: none !important;
background-image: none !important;
background-clip: padding-box !important;
text-decoration: none !important;
cursor: pointer !important;
-webkit-tap-highlight-color: transparent;
}
.medialab_chat .medialab_chat__send::before,
.medialab_chat .medialab_chat__send::after,
.medialab_chat .medialab_chat__quick-reply::before,
.medialab_chat .medialab_chat__quick-reply::after,
.medialab_chat .medialab_chat__close::after {
content: none !important;
display: none !important;
}
.medialab_chat__overlay {
position: fixed;
inset: var(--medialab-chat-top-offset) 0 0 0;
z-index: 2147483000;
opacity: 0;
pointer-events: none;
transition: opacity 220ms ease;
background: var(--medialab-chat-overlay-tint);
backdrop-filter: blur(var(--medialab-chat-overlay-blur)) saturate(130%);
-webkit-backdrop-filter: blur(var(--medialab-chat-overlay-blur)) saturate(130%);
}
.medialab_chat--open .medialab_chat__overlay {
opacity: 1;
pointer-events: auto;
}
.medialab_chat__conversation {
width: min(900px, calc(100vw - 2rem));
height: calc(100vh - 3rem - var(--medialab-chat-top-offset));
height: calc(100dvh - 3rem - var(--medialab-chat-top-offset));
max-height: calc(100vh - 3rem - var(--medialab-chat-top-offset));
max-height: calc(100dvh - 3rem - var(--medialab-chat-top-offset));
margin: 3rem auto 0;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 0.75rem;
padding: 1rem 0.35rem var(--medialab-chat-conversation-bottom-space);
background: var(--medialab-chat-conversation-bg);
border-radius: calc(var(--medialab-chat-composer-radius) * 0.75);
-ms-overflow-style: none;
scrollbar-width: none;
}
.medialab_chat__conversation::-webkit-scrollbar {
width: 0;
height: 0;
display: none;
}
.medialab_chat .medialab_chat__close {
position: fixed;
top: calc(var(--medialab-chat-top-offset) + 0.9rem);
right: 0.9rem;
z-index: 2;
width: 2.2rem !important;
height: 2.2rem !important;
border-radius: 999px !important;
border: 0 !important;
background: var(--medialab-chat-close-bg) !important;
font-size: 1.45rem !important;
line-height: 1 !important;
margin: 0 !important;
padding: 0 !important;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: none;
}
.medialab_chat .medialab_chat__close::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: var(--medialab-chat-close-border);
pointer-events: none;
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
.medialab_chat .medialab_chat__close-label {
color: var(--medialab-chat-close-text) !important;
}
.medialab_chat .medialab_chat__close:active {
transform: none;
filter: none;
}
.medialab_chat .medialab_chat__close:hover,
.medialab_chat .medialab_chat__close:focus,
.medialab_chat .medialab_chat__close:focus-visible {
background: var(--medialab-chat-close-bg) !important;
filter: none !important;
transform: none !important;
outline: none !important;
box-shadow: none !important;
}
.medialab_chat__bubble {
max-width: 100%;
border-radius: var(--medialab-chat-bubble-radius);
padding: 0.85rem 1rem;
line-height: 1.45;
box-shadow: none;
background-clip: padding-box;
animation: medialab-chat-slide-in 180ms ease;
}
.medialab_chat__item {
max-width: min(74ch, 92%);
display: flex;
flex-direction: column;
gap: 0.3rem;
background: transparent;
}
.medialab_chat__item--assistant {
align-self: flex-start;
}
.medialab_chat__item--user {
align-self: flex-end;
}
.medialab_chat__row {
display: flex;
align-items: flex-end;
gap: var(--medialab-chat-row-gap);
background: transparent;
}
.medialab_chat__row--assistant {
align-self: flex-start;
}
.medialab_chat__row--user {
align-self: flex-end;
justify-content: flex-end;
}
.medialab_chat__avatar {
width: var(--medialab-chat-avatar-size);
height: var(--medialab-chat-avatar-size);
border-radius: 999px;
object-fit: cover;
border: 1px solid rgba(255, 255, 255, 0.7);
background: rgba(255, 255, 255, 0.72);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}
.medialab_chat__meta {
font-family: var(--medialab-chat-meta-font-family, var(--medialab-chat-font));
font-size: var(--medialab-chat-meta-font-size);
font-weight: var(--medialab-chat-meta-weight);
line-height: var(--medialab-chat-meta-line-height);
color: var(--medialab-chat-meta-color);
}
.medialab_chat__meta--assistant {
padding-left: 2.15rem;
}
.medialab_chat__meta--user {
text-align: right;
padding-right: 0.25rem;
}
.medialab_chat__day-separator {
display: flex;
align-items: center;
justify-content: center;
margin: 0.2rem 0 0.45rem;
}
.medialab_chat__day-separator > span {
position: relative;
font-size: 0.72rem;
background: var(--medialab-chat-day-bg);
border: 0;
padding: 0.18rem 0.6rem;
border-radius: 999px;
overflow: hidden;
}
.medialab_chat__day-separator > span::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: var(--medialab-chat-day-border);
pointer-events: none;
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
.medialab_chat__day-label {
display: inline;
position: relative;
z-index: 1;
color: var(--medialab-chat-day-text);
}
.medialab_chat__bubble--user {
background: var(--medialab-chat-user-bg);
border-bottom-right-radius: 0.4rem;
}
.medialab_chat__bubble--assistant {
background: var(--medialab-chat-bot-bg);
border-bottom-left-radius: 0.4rem;
}
.medialab_chat__bubble-content {
display: inline;
font-family: var(--medialab-chat-message-font-family, var(--medialab-chat-font));
font-size: var(--medialab-chat-message-font-size);
font-weight: var(--medialab-chat-message-weight);
line-height: var(--medialab-chat-message-line-height);
}
.medialab_chat__bubble--user .medialab_chat__bubble-content {
color: var(--medialab-chat-user-text);
}
.medialab_chat__bubble--assistant .medialab_chat__bubble-content {
color: var(--medialab-chat-bot-text);
}
@supports ((-webkit-background-clip: text) and (-webkit-text-fill-color: transparent)) {
.medialab_chat__meta {
background: var(--medialab-chat-meta-color);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.medialab_chat__bubble--user .medialab_chat__bubble-content {
background: var(--medialab-chat-user-text);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.medialab_chat__bubble--assistant .medialab_chat__bubble-content {
background: var(--medialab-chat-bot-text);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.medialab_chat__close-label {
background: var(--medialab-chat-close-text);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.medialab_chat__day-label {
background: var(--medialab-chat-day-text);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
}
.medialab_chat__empty {
align-self: center;
color: rgba(31, 59, 77, 0.75);
background: rgba(255, 255, 255, 0.45);
border-radius: 999px;
padding: 0.6rem 1rem;
font-size: 0.9rem;
}
.medialab_chat__composer {
position: fixed;
left: 50%;
bottom: var(--medialab-chat-composer-bottom);
transform: translateX(-50%);
width: min(var(--medialab-chat-composer-width), calc(100vw - 1.25rem));
z-index: 2147483600;
padding: var(--medialab-chat-composer-padding);
border-radius: var(--medialab-chat-composer-radius);
border: 0;
background: var(--medialab-chat-glass-bg);
backdrop-filter: blur(var(--medialab-chat-composer-blur)) saturate(140%);
-webkit-backdrop-filter: blur(var(--medialab-chat-composer-blur)) saturate(140%);
box-shadow: var(--medialab-chat-shadow);
transition: opacity 240ms ease, translate 260ms ease;
}
.medialab_chat[data-entry-animation="fade-up"] .medialab_chat__composer {
animation: medialab-chat-composer-fade-up var(--medialab-chat-entry-duration) cubic-bezier(0.17, 0.89, 0.32, 1.08) both;
}
.medialab_chat[data-entry-animation="slide-up"] .medialab_chat__composer {
animation: medialab-chat-composer-slide-up var(--medialab-chat-entry-duration) cubic-bezier(0.16, 0.84, 0.34, 1) both;
}
.medialab_chat[data-entry-animation="pop"] .medialab_chat__composer {
animation: medialab-chat-composer-pop var(--medialab-chat-entry-duration) cubic-bezier(0.17, 0.9, 0.32, 1.2) both;
}
.medialab_chat--composer-hidden .medialab_chat__composer {
opacity: 0;
pointer-events: none;
translate: 0 125%;
}
.medialab_chat__composer::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: var(--medialab-chat-composer-border-width);
background: var(--medialab-chat-glass-border);
pointer-events: none;
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
.medialab_chat__form {
display: block;
}
.medialab_chat__field {
position: relative;
display: block;
}
.medialab_chat__field textarea {
display: block;
width: 100%;
min-height: 56px;
max-height: 140px;
resize: none;
border-radius: var(--medialab-chat-input-radius);
border: 1px solid rgba(24, 89, 111, 0.15);
background: var(--medialab-chat-input-bg);
color: #203644;
padding: 0.9rem 8rem 0.9rem 1rem;
font-family: var(--medialab-chat-input-font-family, var(--medialab-chat-font));
font-size: var(--medialab-chat-input-font-size);
font-weight: var(--medialab-chat-input-weight);
line-height: var(--medialab-chat-input-line-height);
overflow-y: hidden;
outline: none;
}
.medialab_chat__field textarea::placeholder {
font-family: var(--medialab-chat-input-font-family, var(--medialab-chat-font));
font-size: var(--medialab-chat-input-font-size);
font-weight: var(--medialab-chat-input-weight);
line-height: var(--medialab-chat-input-line-height);
}
.medialab_chat__field textarea:focus {
border-color: rgba(26, 111, 142, 0.6);
box-shadow: 0 0 0 3px rgba(26, 111, 142, 0.14);
}
.medialab_chat .medialab_chat__send {
position: absolute;
right: 0.5rem;
top: 50%;
transform: translateY(-50%);
border: 0 !important;
border-radius: var(--medialab-chat-send-radius) !important;
background: var(--medialab-chat-accent) !important;
color: #ecfbff !important;
margin: 0 !important;
padding: var(--medialab-chat-send-pad-y) var(--medialab-chat-send-pad-x) !important;
font-weight: 600 !important;
font-size: 0.92rem !important;
transition: none;
}
.medialab_chat .medialab_chat__send:active {
transform: translateY(-50%);
}
.medialab_chat .medialab_chat__send:disabled {
opacity: 0.7;
cursor: not-allowed;
}
.medialab_chat__quick-replies {
margin-top: 0.7rem;
display: flex;
flex-wrap: wrap;
gap: var(--medialab-chat-quick-gap);
}
.medialab_chat .medialab_chat__quick-reply {
border: 1px solid rgba(26, 111, 142, 0.22) !important;
border-radius: 999px !important;
background: rgba(255, 255, 255, 0.62) !important;
color: #245067 !important;
margin: 0 !important;
padding: var(--medialab-chat-quick-pad-y) var(--medialab-chat-quick-pad-x) !important;
font-size: 0.84rem !important;
line-height: 1.15 !important;
transition: none;
}
.medialab_chat .medialab_chat__send:hover,
.medialab_chat .medialab_chat__send:focus,
.medialab_chat .medialab_chat__send:focus-visible {
background: var(--medialab-chat-accent) !important;
color: #ecfbff !important;
transform: translateY(-50%) !important;
outline: none !important;
box-shadow: none !important;
}
.medialab_chat .medialab_chat__quick-reply:hover,
.medialab_chat .medialab_chat__quick-reply:focus,
.medialab_chat .medialab_chat__quick-reply:focus-visible {
background: rgba(255, 255, 255, 0.62) !important;
border-color: rgba(26, 111, 142, 0.22) !important;
color: #245067 !important;
outline: none !important;
box-shadow: none !important;
}
.medialab_chat__status {
margin: 0.5rem 0 0;
color: #7f2732;
font-size: 0.8rem;
}
.medialab_chat__status:empty {
display: none;
}
@keyframes medialab-chat-slide-in {
from {
transform: translateY(6px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes medialab-chat-composer-fade-up {
from {
opacity: 0;
translate: 0 18px;
}
to {
opacity: 1;
translate: 0 0;
}
}
@keyframes medialab-chat-composer-slide-up {
from {
opacity: 0;
translate: 0 56px;
}
to {
opacity: 1;
translate: 0 0;
}
}
@keyframes medialab-chat-composer-pop {
from {
opacity: 0;
scale: 0.93;
}
to {
opacity: 1;
scale: 1;
}
}
@media (max-width: 768px) {
.medialab_chat__conversation {
margin-top: 1.15rem;
margin-bottom: 0;
width: calc(100vw - 0.95rem);
height: calc(100vh - 1.15rem - var(--medialab-chat-top-offset));
height: calc(100dvh - 1.15rem - var(--medialab-chat-top-offset));
max-height: calc(100vh - 1.15rem - var(--medialab-chat-top-offset));
max-height: calc(100dvh - 1.15rem - var(--medialab-chat-top-offset));
}
.medialab_chat__close {
top: calc(var(--medialab-chat-top-offset) + 0.55rem);
right: 0.55rem;
}
.medialab_chat__composer {
width: calc(100vw - 0.75rem);
bottom: 0.35rem;
border-radius: 1rem;
padding: 0.65rem;
}
.medialab_chat__field textarea {
min-height: 52px;
padding-right: 7rem;
}
.medialab_chat .medialab_chat__send {
padding: var(--medialab-chat-send-pad-y) var(--medialab-chat-send-pad-x) !important;
}
}
body.admin-bar .medialab_chat {
--medialab-chat-top-offset: 32px;
}
@media (max-width: 782px) {
body.admin-bar .medialab_chat {
--medialab-chat-top-offset: 46px;
}
}