#meowbot-root {
--mb-accent: #14b8a6;
--mb-bg: #0b1625;
--mb-surface: #142236;
--mb-text: #f8fafc;
--mb-muted: #aab8cc;
--mb-link: #67e8f9;
--mb-header-end: #3730a3;
--mb-right-gap: 26px;
--mb-mobile-right-gap: 20px;
--mb-launcher-size: 54px;
--mb-image-size: 44px;
--mb-fallback-icon-size: 25px;
--mb-launcher-opacity: .8;
--mb-panel-width: 286px;
--mb-panel-max-height: 356px;
--mb-messages-height: 220px;
--mb-panel-radius: 15px;
--mb-border-width: 2px; --mb-panel-launcher-gap: -3px;
--mb-base-font-size: 13px;
--mb-agent-font-size: 14px;
--mb-subtitle-font-size: 10px;
--mb-message-font-size: 13px;
--mb-result-font-size: 12px;
--mb-icon-neon-speed: 1.35s;
--mb-panel-neon-speed: 2.5s;
--mb-ripple-speed: 2.25s;
--mb-ripple-scale: 1.62;
--mb-label-size: 11px;
--mb-label-color: #fff;
--mb-label-bg: #142236;
--mb-greeting-size: 12px;
--mb-greeting-color: #fff;
--mb-greeting-bg: #142236;
position: fixed !important;
top: 50% !important;
right: var(--mb-right-gap) !important;
bottom: auto !important;
left: auto !important;
z-index: 2147483646 !important;
display: block !important;
width: var(--mb-launcher-size) !important;
height: var(--mb-launcher-size) !important;
max-width: none !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
border: 0;
color: var(--mb-text);
background: transparent;
font:
var(--mb-base-font-size)/1.4 system-ui,
-apple-system, BlinkMacSystemFont,
"Segoe UI", sans-serif;
opacity: 1 !important;
visibility: visible !important;
transform: translate3d(0, -50%, 0) !important;
pointer-events: none;
isolation: isolate;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
#meowbot-root,
#meowbot-root *,
#meowbot-root *::before,
#meowbot-root *::after {
box-sizing: border-box;
}
#meowbot-root button,
#meowbot-root input {
font-family: inherit;
} #meowbot-root .screen-reader-text {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
border: 0 !important;
} #meowbot-root .mb-launcher-wrap,
#meowbot-root.mb-open .mb-launcher-wrap {
position: relative !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
z-index: 10;
display: grid !important;
place-items: center;
width: var(--mb-launcher-size) !important;
height: var(--mb-launcher-size) !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
pointer-events: auto !important;
}
#meowbot-root.mb-open .mb-launcher-label,
#meowbot-root.mb-open .mb-greeting {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
} #meowbot-root .mb-launcher,
#meowbot-root.mb-open .mb-launcher {
position: relative !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
z-index: 2;
display: grid !important;
place-items: center;
width: var(--mb-launcher-size) !important;
height: var(--mb-launcher-size) !important;
min-width: var(--mb-launcher-size) !important;
min-height: var(--mb-launcher-size) !important;
max-width: var(--mb-launcher-size) !important;
max-height: var(--mb-launcher-size) !important;
margin: 0 !important;
padding: 3px !important;
overflow: visible !important;
border: var(--mb-border-width) solid transparent;
border-radius: 50%;
color: #fff;
background:
linear-gradient(
rgba(9, 20, 35, .94),
rgba(9, 20, 35, .94)
) padding-box,
linear-gradient(
90deg,
#22d3ee,
#8b5cf6,
#ec4899,
#f59e0b,
#34d399,
#22d3ee
) border-box;
background-size: 100% 100%, 300% 100%;
background-position: 0 0, 0 50%;
box-shadow:
0 0 7px rgba(34, 211, 238, .58),
0 0 15px rgba(139, 92, 246, .28);
opacity: var(--mb-launcher-opacity);
visibility: visible !important;
transform: none !important;
cursor: pointer;
pointer-events: auto !important;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
-webkit-appearance: none;
appearance: none;
animation:
mb-icon-neon
var(--mb-icon-neon-speed)
linear infinite;
transition:
opacity .15s ease,
box-shadow .15s ease;
}
#meowbot-root .mb-launcher::before,
#meowbot-root .mb-launcher::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: var(--mb-launcher-size);
height: var(--mb-launcher-size);
border:
var(--mb-border-width)
solid rgba(34, 211, 238, .72);
border-radius: 50%;
pointer-events: none;
opacity: 0;
transform: translate(-50%, -50%) scale(.9);
transform-origin: center;
animation:
mb-ripple
var(--mb-ripple-speed)
cubic-bezier(.16, .72, .34, 1)
infinite;
}
#meowbot-root .mb-launcher::after {
border-color: rgba(167, 139, 250, .66);
animation-delay:
calc(var(--mb-ripple-speed) / 2);
}
#meowbot-root .mb-launcher:hover,
#meowbot-root .mb-launcher:focus-visible,
#meowbot-root.mb-open .mb-launcher {
opacity: 1;
box-shadow:
0 0 10px rgba(34, 211, 238, .9),
0 0 22px rgba(139, 92, 246, .5);
}
#meowbot-root .mb-launcher img {
position: relative;
z-index: 2;
display: block;
width: var(--mb-image-size);
height: var(--mb-image-size);
max-width: calc(var(--mb-launcher-size) - 8px);
max-height: calc(var(--mb-launcher-size) - 8px);
margin: 0;
border: 1px solid rgba(255, 255, 255, .78);
border-radius: 50%;
object-fit: cover;
}
#meowbot-root .mb-launcher svg {
position: relative;
z-index: 2;
display: block;
width: var(--mb-fallback-icon-size);
height: var(--mb-fallback-icon-size);
max-width: calc(var(--mb-launcher-size) - 12px);
max-height: calc(var(--mb-launcher-size) - 12px);
fill: currentColor;
} #meowbot-root .mb-launcher-label {
position: absolute;
top: calc(100% + 8px);
left: 50%;
z-index: 4;
display: block;
width: max-content;
max-width: min(180px, calc(100vw - 24px));
margin: 0;
padding: 4px 9px;
overflow: hidden;
border: 1px solid rgba(103, 232, 249, .32);
border-radius: 999px;
color: var(--mb-label-color);
background: var(--mb-label-bg);
box-shadow:
0 4px 12px rgba(0, 0, 0, .25),
0 0 8px rgba(34, 211, 238, .2);
font-size: var(--mb-label-size);
font-weight: 700;
line-height: 1.2;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
pointer-events: none;
opacity: var(--mb-launcher-opacity);
visibility: visible;
transform: translateX(-50%);
animation:
mb-label-attract
2.8s ease-in-out infinite;
}
#meowbot-root .mb-curved-label {
display: none !important;
}
#meowbot-root.mb-no-label-animation
.mb-launcher-label {
animation: none;
} #meowbot-root .mb-greeting {
position: absolute;
top: 50%;
right: calc(var(--mb-launcher-size) + 10px);
z-index: 6;
width: max-content;
max-width: min(220px, calc(100vw - 110px));
margin: 0;
padding: 8px 11px;
border: 1px solid rgba(103, 232, 249, .32);
border-radius: 12px 12px 4px 12px;
color: var(--mb-greeting-color);
background: var(--mb-greeting-bg);
box-shadow:
0 8px 24px rgba(0, 0, 0, .28),
0 0 10px rgba(34, 211, 238, .18);
font:
600 var(--mb-greeting-size)/1.35
system-ui, -apple-system,
BlinkMacSystemFont, "Segoe UI", sans-serif;
text-align: left;
cursor: pointer;
pointer-events: none;
touch-action: manipulation;
-webkit-appearance: none;
appearance: none;
opacity: 0;
visibility: hidden;
transform: translate(8px, -50%);
transition:
opacity .18s ease,
transform .18s ease,
visibility .18s;
}
#meowbot-root .mb-greeting::after {
content: "";
position: absolute;
top: 50%;
right: -6px;
width: 11px;
height: 11px;
border-top:
1px solid rgba(103, 232, 249, .32);
border-right:
1px solid rgba(103, 232, 249, .32);
background: var(--mb-greeting-bg);
transform:
translateY(-50%)
rotate(45deg);
}
#meowbot-root .mb-greeting-visible {
opacity: var(--mb-launcher-opacity);
visibility: visible;
pointer-events: auto;
transform: translate(0, -50%);
}
#meowbot-root .mb-greeting:hover,
#meowbot-root .mb-greeting:focus-visible {
opacity: 1;
} #meowbot-root.mb-no-neon .mb-launcher,
#meowbot-root.mb-no-neon .mb-panel {
animation: none;
}
#meowbot-root.mb-no-ripple
.mb-launcher::before,
#meowbot-root.mb-no-ripple
.mb-launcher::after {
display: none;
} #meowbot-root .mb-panel,
#meowbot-root.mb-open .mb-panel {
position: absolute !important;
top: 50% !important; right:
calc(
100% +
var(--mb-panel-launcher-gap)
) !important;
bottom: auto !important;
left: auto !important;
z-index: 5;
display: block;
width: min(
var(--mb-panel-width),
calc(
100vw -
var(--mb-right-gap) -
var(--mb-launcher-size) -
8px
)
) !important;
max-width: calc(
100vw -
var(--mb-right-gap) -
var(--mb-launcher-size) -
8px
) !important;
height: auto !important;
max-height: min(
var(--mb-panel-max-height),
calc(100dvh - 24px)
) !important;
margin: 0 !important;
padding: var(--mb-border-width);
overflow: hidden;
border: var(--mb-border-width) solid transparent;
border-radius: var(--mb-panel-radius);
color: var(--mb-text);
background:
linear-gradient(
var(--mb-bg),
var(--mb-bg)
) padding-box,
linear-gradient(
90deg,
#22d3ee,
#8b5cf6,
#ec4899,
#f59e0b,
#34d399,
#22d3ee
) border-box;
background-size: 100% 100%, 300% 100%;
background-position: 0 0, 0 50%;
box-shadow:
0 12px 34px rgba(0, 0, 0, .42),
0 0 12px rgba(34, 211, 238, .2);
transform-origin: right center !important;
animation:
mb-panel-neon
var(--mb-panel-neon-speed)
linear infinite;
}
#meowbot-root .mb-panel {
opacity: 0;
visibility: hidden;
pointer-events: none;
transform:
translate3d(6px, -50%, 0) !important;
transition:
opacity .14s ease,
visibility .14s ease,
transform .14s ease;
}
#meowbot-root.mb-open .mb-panel {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform:
translate3d(0, -50%, 0) !important;
} #meowbot-root .mb-header {
display: flex;
align-items: center;
gap: 8px;
height: 50px;
min-height: 50px;
margin: 0;
padding: 7px 9px;
border-radius:
max(
0px,
calc(
var(--mb-panel-radius) -
var(--mb-border-width)
)
)
max(
0px,
calc(
var(--mb-panel-radius) -
var(--mb-border-width)
)
)
0 0;
color: #fff;
background:
linear-gradient(
115deg,
var(--mb-accent),
#0e7490,
var(--mb-header-end)
);
}
#meowbot-root .mb-avatar {
display: grid;
flex: 0 0 32px;
place-items: center;
width: 32px;
height: 32px;
overflow: hidden;
border:
1px solid rgba(255, 255, 255, .82);
border-radius: 50%;
background: rgba(255, 255, 255, .14);
font-size: 15px;
}
#meowbot-root .mb-avatar img {
display: block;
width: 100%;
height: 100%;
margin: 0;
border: 0;
border-radius: 50%;
object-fit: cover;
}
#meowbot-root .mb-title {
flex: 1;
min-width: 0;
}
#meowbot-root .mb-title strong,
#meowbot-root .mb-title small {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
#meowbot-root .mb-title strong {
font-size: var(--mb-agent-font-size);
line-height: 1.15;
}
#meowbot-root .mb-title small {
margin-top: 1px;
color: inherit;
font-size: var(--mb-subtitle-font-size);
line-height: 1.2;
opacity: .9;
}
#meowbot-root .mb-close {
display: grid;
flex: 0 0 28px;
place-items: center;
width: 28px;
height: 28px;
min-width: 28px;
min-height: 28px;
margin: 0;
padding: 0;
border:
1px solid rgba(255, 255, 255, .15);
border-radius: 50%;
color: #fff;
background: rgba(0, 0, 0, .18);
font: 18px/1 system-ui, sans-serif;
cursor: pointer;
touch-action: manipulation;
-webkit-appearance: none;
appearance: none;
transition: background .15s ease;
}
#meowbot-root .mb-close:hover {
color: #fff;
background: rgba(0, 0, 0, .34);
} #meowbot-root .mb-messages {
height: min(
var(--mb-messages-height),
calc(100dvh - 120px)
) !important;
min-height: 0;
max-height: min(
var(--mb-messages-height),
calc(100dvh - 120px)
) !important;
margin: 0;
padding: 8px;
overflow-x: hidden;
overflow-y: auto;
color: var(--mb-text);
background: var(--mb-bg);
scrollbar-width: thin;
scrollbar-color:
rgba(103, 232, 249, .46)
transparent;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
#meowbot-root .mb-messages::-webkit-scrollbar {
width: 5px;
}
#meowbot-root .mb-messages::-webkit-scrollbar-track {
background: transparent;
}
#meowbot-root .mb-messages::-webkit-scrollbar-thumb {
border-radius: 5px;
background: rgba(103, 232, 249, .46);
}
#meowbot-root .mb-message {
width: fit-content;
max-width: 92%;
margin: 0 0 7px;
padding: 7px 9px;
overflow-wrap: anywhere;
border:
1px solid rgba(148, 163, 184, .16);
border-radius: 10px;
color: var(--mb-text);
background: var(--mb-surface);
box-shadow:
0 2px 8px rgba(0, 0, 0, .15);
font-size: var(--mb-message-font-size);
line-height: 1.38;
}
#meowbot-root .mb-message:last-child {
margin-bottom: 0;
}
#meowbot-root .mb-message-user {
margin-left: auto;
border-color: transparent;
border-bottom-right-radius: 3px;
color: #fff;
background: var(--mb-accent);
}
#meowbot-root .mb-message-bot {
border-bottom-left-radius: 3px;
} #meowbot-root .mb-results {
margin: 6px 0 0;
padding: 0;
list-style: none;
}
#meowbot-root .mb-results li {
margin: 0;
padding: 0;
}
#meowbot-root .mb-results li + li {
margin-top: 6px;
padding-top: 6px;
border-top:
1px solid rgba(148, 163, 184, .18);
}
#meowbot-root .mb-results a,
#meowbot-root .mb-results a:link,
#meowbot-root .mb-results a:visited {
display: inline;
margin: 0 -3px;
padding: 1px 3px;
border-radius: 4px;
color: var(--mb-link) !important;
background: transparent !important;
-webkit-text-fill-color: var(--mb-link);
font-size: var(--mb-result-font-size);
font-weight: 700;
text-decoration: none !important;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition:
color .14s ease,
background-color .14s ease,
text-shadow .14s ease;
}
#meowbot-root .mb-results a:hover,
#meowbot-root .mb-results a:focus,
#meowbot-root .mb-results a:focus-visible,
#meowbot-root .mb-results a:active {
color: #fff !important;
background-color:
rgba(34, 211, 238, .16) !important;
-webkit-text-fill-color: #fff;
text-decoration: underline !important;
text-decoration-color:
var(--mb-link) !important;
text-shadow:
0 0 5px rgba(34, 211, 238, .9),
0 0 10px rgba(139, 92, 246, .5);
}
#meowbot-root .mb-results a:focus-visible {
outline: 2px solid var(--mb-link);
outline-offset: 2px;
}
#meowbot-root .mb-results small {
display: block;
margin-top: 2px;
color: var(--mb-muted);
font-size:
calc(var(--mb-result-font-size) - 1.5px);
line-height: 1.35;
} #meowbot-root .mb-form {
display: flex;
gap: 6px;
margin: 0;
padding: 7px;
border-top:
1px solid rgba(148, 163, 184, .15);
border-radius:
0 0
max(
0px,
calc(
var(--mb-panel-radius) -
var(--mb-border-width)
)
)
max(
0px,
calc(
var(--mb-panel-radius) -
var(--mb-border-width)
)
);
background: var(--mb-bg);
}
#meowbot-root .mb-form input {
flex: 1;
min-width: 0;
width: auto;
height: 34px;
min-height: 34px;
margin: 0;
padding: 0 9px;
border:
1px solid rgba(103, 232, 249, .38);
border-radius: 9px;
outline: 0;
color: var(--mb-text);
background: rgba(255, 255, 255, .07);
font:
calc(var(--mb-base-font-size) - 1px)/1
system-ui, -apple-system,
BlinkMacSystemFont, "Segoe UI", sans-serif;
-webkit-appearance: none;
appearance: none;
}
#meowbot-root .mb-form input::placeholder {
color: var(--mb-muted);
opacity: 1;
}
#meowbot-root .mb-form input:focus {
border-color: var(--mb-link);
box-shadow:
0 0 0 2px rgba(34, 211, 238, .13);
}
#meowbot-root .mb-send {
display: grid;
flex: 0 0 35px;
place-items: center;
width: 35px;
height: 34px;
min-width: 35px;
min-height: 34px;
margin: 0;
padding: 0;
border: 0;
border-radius: 9px;
color: #fff;
background: var(--mb-accent);
font-size: 15px;
cursor: pointer;
touch-action: manipulation;
-webkit-appearance: none;
appearance: none;
transition: filter .15s ease;
}
#meowbot-root .mb-send:hover {
color: #fff;
background: var(--mb-accent);
filter: brightness(1.12);
}
#meowbot-root .mb-send:disabled {
opacity: .55;
cursor: wait;
} #meowbot-root .mb-launcher:focus-visible,
#meowbot-root .mb-greeting:focus-visible,
#meowbot-root .mb-close:focus-visible,
#meowbot-root .mb-send:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
} @keyframes mb-icon-neon {
from {
background-position: 0 0, 0% 50%;
}
to {
background-position: 0 0, 100% 50%;
}
}
@keyframes mb-ripple {
0% {
transform:
translate(-50%, -50%) scale(.88);
opacity: 0;
}
12% {
opacity: .72;
}
75%,
100% {
transform:
translate(-50%, -50%)
scale(var(--mb-ripple-scale));
opacity: 0;
}
}
@keyframes mb-panel-neon {
from {
background-position: 0 0, 0% 50%;
}
to {
background-position: 0 0, 100% 50%;
}
}
@keyframes mb-label-attract {
0%,
100% {
opacity:
calc(var(--mb-launcher-opacity) * .8);
text-shadow: none;
}
50% {
opacity: 1;
text-shadow:
0 0 6px rgba(103, 232, 249, .65);
}
} @media screen and (min-width: 601px) {
#meowbot-root.mb-hide-label-desktop
.mb-launcher-label,
#meowbot-root.mb-hide-greeting-desktop
.mb-greeting {
display: none !important;
}
} @media screen and (max-width: 600px) {
html body #meowbot-root {
--mb-panel-width: 250px;
--mb-panel-max-height: 330px;
--mb-messages-height: 190px;
--mb-panel-launcher-gap: -3px;
position: fixed !important;
top: 50% !important;
right:
var(--mb-mobile-right-gap) !important;
bottom: auto !important;
left: auto !important;
transform:
translate3d(0, -50%, 0) !important;
}
#meowbot-root.mb-hide-label-mobile
.mb-launcher-label,
#meowbot-root.mb-hide-greeting-mobile
.mb-greeting {
display: none !important;
}
#meowbot-root .mb-launcher-label {
top: calc(100% + 6px);
max-width:
min(145px, calc(100vw - 20px));
padding: 3px 7px;
}
#meowbot-root .mb-greeting {
right:
calc(var(--mb-launcher-size) + 8px);
max-width:
min(180px, calc(100vw - 94px));
padding: 7px 9px;
}
html body #meowbot-root .mb-panel,
html body #meowbot-root.mb-open .mb-panel {
position: absolute !important;
top: 50% !important;
right:
calc(
100% +
var(--mb-panel-launcher-gap)
) !important;
bottom: auto !important;
left: auto !important;
width: min(
var(--mb-panel-width),
calc(
100vw -
var(--mb-mobile-right-gap) -
var(--mb-launcher-size) -
6px
)
) !important;
max-width: calc(
100vw -
var(--mb-mobile-right-gap) -
var(--mb-launcher-size) -
6px
) !important;
max-height: min(
var(--mb-panel-max-height),
calc(100dvh - 16px)
) !important;
transform-origin:
right center !important;
}
html body #meowbot-root .mb-panel {
transform:
translate3d(6px, -50%, 0) !important;
}
html body #meowbot-root.mb-open .mb-panel {
transform:
translate3d(0, -50%, 0) !important;
}
html body #meowbot-root .mb-messages {
height: min(
var(--mb-messages-height),
calc(100dvh - 120px)
) !important;
max-height: min(
var(--mb-messages-height),
calc(100dvh - 120px)
) !important;
}
} @media screen and (max-width: 380px) {
html body #meowbot-root {
--mb-mobile-right-gap: 10px;
--mb-launcher-size: 48px;
--mb-image-size: 39px;
--mb-panel-width: 224px;
--mb-panel-max-height: 310px;
--mb-messages-height: 175px;
--mb-panel-launcher-gap: -3px;
}
#meowbot-root .mb-greeting,
#meowbot-root .mb-launcher-label {
display: none !important;
}
} @supports not (height: 100dvh) {
#meowbot-root .mb-panel {
max-height: min(
var(--mb-panel-max-height),
calc(100vh - 24px)
) !important;
}
#meowbot-root .mb-messages {
height: min(
var(--mb-messages-height),
calc(100vh - 120px)
) !important;
max-height: min(
var(--mb-messages-height),
calc(100vh - 120px)
) !important;
}
@media screen and (max-width: 600px) {
html body #meowbot-root .mb-panel {
max-height: min(
var(--mb-panel-max-height),
calc(100vh - 16px)
) !important;
}
html body #meowbot-root .mb-messages {
height: min(
var(--mb-messages-height),
calc(100vh - 120px)
) !important;
max-height: min(
var(--mb-messages-height),
calc(100vh - 120px)
) !important;
}
}
} @media (prefers-reduced-motion: reduce) {
#meowbot-root .mb-launcher,
#meowbot-root .mb-launcher::before,
#meowbot-root .mb-launcher::after,
#meowbot-root .mb-launcher-label,
#meowbot-root .mb-panel {
animation: none !important;
}
#meowbot-root .mb-launcher,
#meowbot-root .mb-greeting,
#meowbot-root .mb-panel,
#meowbot-root .mb-close,
#meowbot-root .mb-send,
#meowbot-root .mb-results a {
transition: none !important;
}
} html body #meowbot-root {
position: fixed !important;
top: 50% !important;
right: var(--mb-right-gap, 26px) !important;
bottom: auto !important;
left: auto !important;
transform: translate3d(0, -50%, 0) !important;
}
html body #meowbot-root .mb-panel,
html body #meowbot-root.mb-open .mb-panel {
position: absolute !important;
top: 50% !important;
right: calc(
100% +
var(--mb-panel-launcher-gap, -3px)
) !important;
bottom: auto !important;
left: auto !important;
}
html body #meowbot-root .mb-panel {
transform:
translate3d(6px, -50%, 0) !important;
}
html body #meowbot-root.mb-open .mb-panel {
transform:
translate3d(0, -50%, 0) !important;
}
@media screen and (max-width: 600px) {
html body #meowbot-root {
right:
var(--mb-mobile-right-gap, 20px) !important;
}
html body #meowbot-root .mb-panel,
html body #meowbot-root.mb-open .mb-panel {
right: calc(
100% +
var(--mb-panel-launcher-gap, -3px)
) !important;
left: auto !important;
}
} @media screen and (max-width: 600px) { html body #meowbot-root,
html body aside#meowbot-root,
html body div#meowbot-root {
position: fixed !important;
top: 50% !important;
right: 20px !important;
bottom: auto !important;
left: auto !important;
width: 54px !important;
height: 54px !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
transform: translate3d(0, -50%, 0) !important;
z-index: 2147483646 !important;
} html body #meowbot-root .mb-panel,
html body #meowbot-root.mb-open .mb-panel {
position: fixed !important;
top: 50% !important;
right: 71px !important;
bottom: auto !important;
left: auto !important;
width: min(
250px,
calc(100vw - 77px)
) !important;
max-width: calc(100vw - 77px) !important;
height: auto !important;
max-height: min(
330px,
calc(100dvh - 16px)
) !important;
margin: 0 !important;
transform-origin: right center !important;
}
html body #meowbot-root .mb-panel {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform:
translate3d(5px, -50%, 0) !important;
}
html body #meowbot-root.mb-open .mb-panel {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform:
translate3d(0, -50%, 0) !important;
}
html body #meowbot-root .mb-messages {
height: min(
190px,
calc(100dvh - 120px)
) !important;
max-height: min(
190px,
calc(100dvh - 120px)
) !important;
}
} @media screen and (max-width: 380px) {
html body #meowbot-root,
html body aside#meowbot-root,
html body div#meowbot-root {
right: 10px !important;
width: 48px !important;
height: 48px !important;
} html body #meowbot-root .mb-panel,
html body #meowbot-root.mb-open .mb-panel {
right: 55px !important;
left: auto !important;
width: min(
224px,
calc(100vw - 61px)
) !important;
max-width: calc(100vw - 61px) !important;
max-height: min(
310px,
calc(100dvh - 12px)
) !important;
}
html body #meowbot-root .mb-messages {
height: min(
175px,
calc(100dvh - 116px)
) !important;
max-height: min(
175px,
calc(100dvh - 116px)
) !important;
}
} @supports not (height: 100dvh) {
@media screen and (max-width: 600px) {
html body #meowbot-root .mb-panel,
html body #meowbot-root.mb-open .mb-panel {
max-height: min(
330px,
calc(100vh - 16px)
) !important;
}
html body #meowbot-root .mb-messages {
height: min(
190px,
calc(100vh - 120px)
) !important;
max-height: min(
190px,
calc(100vh - 120px)
) !important;
}
}
}