.lecremy-ai-chat {
--lecremy-ai-gradient-start: #4f46e5;
--lecremy-ai-gradient-end: #7c3aed;
--lecremy-ai-accent: #4f46e5;
display: flex;
box-sizing: border-box;
flex-direction: column;
max-width: 480px;
overflow: hidden;
background: #fff;
border: 1px solid #e2e4e9;
border-radius: 14px;
font-family: inherit;
}
.lecremy-ai-chat *,
.lecremy-ai-chat *::before,
.lecremy-ai-chat *::after {
box-sizing: inherit;
}
.lecremy-ai-chat__visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect( 0, 0, 0, 0 );
white-space: nowrap;
border: 0;
} .lecremy-ai-chat__header {
display: flex;
flex-shrink: 0;
align-items: center;
gap: 10px;
padding: 14px 16px;
background: linear-gradient( 135deg, var( --lecremy-ai-gradient-start, #4f46e5 ), var( --lecremy-ai-gradient-end, #7c3aed ) );
color: #fff;
}
.lecremy-ai-chat__header-icon {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba( 255, 255, 255, 0.18 );
}
.lecremy-ai-chat__header-icon svg {
width: 18px;
height: 18px;
fill: #fff;
} .lecremy-ai-chat__logo {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.lecremy-ai-chat__header-title {
overflow: hidden;
flex: 1;
font-size: 1em;
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
} .lecremy-ai-chat__close {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
border: none;
border-radius: 50%;
background: transparent;
color: #fff;
cursor: pointer;
transition: background 0.15s ease, transform 0.2s ease;
}
.lecremy-ai-chat__close:hover {
background: rgba( 255, 255, 255, 0.22 );
}
.lecremy-ai-chat__close:focus-visible {
outline: none;
box-shadow: 0 0 0 2px rgba( 255, 255, 255, 0.85 );
}
.lecremy-ai-chat__close svg {
width: 18px;
height: 18px;
} .lecremy-ai-chat--collapsed .lecremy-ai-chat__messages,
.lecremy-ai-chat--collapsed .lecremy-ai-chat__status,
.lecremy-ai-chat--collapsed .lecremy-ai-chat__form,
.lecremy-ai-chat--collapsed .lecremy-ai-chat__footer {
display: none;
}
.lecremy-ai-chat--collapsed .lecremy-ai-chat__close {
transform: rotate( 180deg );
} .lecremy-ai-chat__messages {
display: flex;
flex: 1;
flex-direction: column;
gap: 10px;
max-height: 320px;
padding: 16px;
overflow-y: auto;
}
.lecremy-ai-chat__row {
display: flex;
align-items: flex-end;
gap: 8px;
max-width: 100%;
}
.lecremy-ai-chat__row--user {
justify-content: flex-end;
}
.lecremy-ai-chat__row--assistant {
justify-content: flex-start;
}
.lecremy-ai-chat__avatar {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
background: linear-gradient( 135deg, var( --lecremy-ai-gradient-start, #4f46e5 ), var( --lecremy-ai-gradient-end, #7c3aed ) );
}
.lecremy-ai-chat__avatar svg {
width: 14px;
height: 14px;
fill: #fff;
}
.lecremy-ai-chat__message {
max-width: 78%;
padding: 10px 14px;
border-radius: 16px;
line-height: 1.45;
white-space: pre-wrap;
word-wrap: break-word;
animation: lecremy-ai-message-in 0.2s ease;
}
.lecremy-ai-chat__message--user {
background: linear-gradient( 135deg, var( --lecremy-ai-gradient-start, #4f46e5 ), var( --lecremy-ai-gradient-end, #7c3aed ) );
color: #fff;
border-bottom-right-radius: 4px;
}
.lecremy-ai-chat__message--assistant {
background: #f1f2f6;
color: #1f2430;
border-bottom-left-radius: 4px;
}
@keyframes lecremy-ai-message-in {
from {
opacity: 0;
transform: translateY( 6px );
}
to {
opacity: 1;
transform: translateY( 0 );
}
} .lecremy-ai-chat__message--typing {
display: flex;
align-items: center;
gap: 8px;
}
.lecremy-ai-chat__typing-label {
font-size: 0.85em;
color: #6b7280;
}
.lecremy-ai-chat__typing-dots {
display: inline-flex;
gap: 3px;
}
.lecremy-ai-chat__typing-dots i {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: #9aa0ab;
font-style: normal;
animation: lecremy-ai-typing-bounce 1.2s ease-in-out infinite;
}
.lecremy-ai-chat__typing-dots i:nth-child( 2 ) {
animation-delay: 0.15s;
}
.lecremy-ai-chat__typing-dots i:nth-child( 3 ) {
animation-delay: 0.3s;
}
@keyframes lecremy-ai-typing-bounce {
0%,
60%,
100% {
opacity: 0.5;
transform: translateY( 0 );
}
30% {
opacity: 1;
transform: translateY( -4px );
}
} .lecremy-ai-chat__status {
flex-shrink: 0;
margin: 0;
padding: 0 16px 8px;
color: #c0392b;
font-size: 0.85em;
} .lecremy-ai-chat__form {
display: flex;
flex-shrink: 0;
flex-direction: column;
gap: 8px;
padding: 12px 16px;
border-top: 1px solid #eceef2;
}
.lecremy-ai-chat__form-row {
display: flex;
align-items: flex-end;
gap: 6px;
}
.lecremy-ai-chat__attachment-preview {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
background: #f7f7f9;
border: 1px solid #e2e4e9;
border-radius: 10px;
}
.lecremy-ai-chat__attachment-preview[hidden] {
display: none;
}
.lecremy-ai-chat__attachment-thumb {
width: 32px;
height: 32px;
object-fit: cover;
border-radius: 6px;
}
.lecremy-ai-chat__attachment-file-icon {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
color: #6b7280;
}
.lecremy-ai-chat__attachment-file-icon svg {
width: 20px;
height: 20px;
}
.lecremy-ai-chat__attachment-name {
overflow: hidden;
flex: 1;
color: #4b5160;
font-size: 0.82em;
text-overflow: ellipsis;
white-space: nowrap;
}
.lecremy-ai-chat__attachment-remove {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: none;
border-radius: 50%;
background: transparent;
color: #6b7280;
font-size: 16px;
line-height: 1;
cursor: pointer;
}
.lecremy-ai-chat__attachment-remove:hover {
background: #e2e4e9;
}
.lecremy-ai-chat__attachment-wrap {
flex-shrink: 0;
}
.lecremy-ai-chat__icon-btn {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
border: none;
border-radius: 8px;
background: transparent;
color: #6b7280;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.lecremy-ai-chat__icon-btn:hover {
background: #f1f2f6;
color: var( --lecremy-ai-accent, #4f46e5 );
}
.lecremy-ai-chat__icon-btn:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba( 0, 0, 0, 0.15 );
box-shadow: 0 0 0 3px color-mix( in srgb, var( --lecremy-ai-accent, #4f46e5 ) 20%, transparent );
}
.lecremy-ai-chat__icon-btn svg {
width: 20px;
height: 20px;
fill: currentColor;
}
.lecremy-ai-chat__input {
flex: 1;
padding: 10px 12px;
border: 1px solid #d7dade;
border-radius: 10px;
font-family: inherit;
font-size: 0.95em;
resize: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lecremy-ai-chat__input:focus-visible {
border-color: var( --lecremy-ai-accent, #4f46e5 );
outline: none;
box-shadow: 0 0 0 3px rgba( 0, 0, 0, 0.15 );
box-shadow: 0 0 0 3px color-mix( in srgb, var( --lecremy-ai-accent, #4f46e5 ) 15%, transparent );
}
.lecremy-ai-chat__input:disabled {
background: #f7f7f8;
cursor: not-allowed;
}
.lecremy-ai-chat__submit {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
border: none;
border-radius: 10px;
background: linear-gradient( 135deg, var( --lecremy-ai-gradient-start, #4f46e5 ), var( --lecremy-ai-gradient-end, #7c3aed ) );
color: #fff;
cursor: pointer;
transition: transform 0.15s ease, opacity 0.15s ease;
}
.lecremy-ai-chat__submit svg {
width: 18px;
height: 18px;
fill: currentColor;
}
.lecremy-ai-chat__submit:hover:not( :disabled ) {
transform: scale( 1.05 );
}
.lecremy-ai-chat__submit:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba( 0, 0, 0, 0.15 );
box-shadow: 0 0 0 3px color-mix( in srgb, var( --lecremy-ai-accent, #4f46e5 ) 35%, transparent );
}
.lecremy-ai-chat__submit:disabled {
cursor: not-allowed;
opacity: 0.6;
} .lecremy-ai-chat__footer {
flex-shrink: 0;
padding: 8px 16px;
color: #9aa0ab;
font-size: 0.72em;
text-align: center;
border-top: 1px solid #eceef2;
} .lecremy-ai-chat__footer-link {
color: inherit;
text-decoration: none;
transition: color 0.15s ease;
}
.lecremy-ai-chat__footer-link:hover,
.lecremy-ai-chat__footer-link:focus-visible {
color: var( --lecremy-ai-accent, #4f46e5 );
text-decoration: underline;
}
.lecremy-ai-chat__footer strong {
color: #6b7280;
}  .lecremy-ai-bubble {
--lecremy-ai-gradient-start: #4f46e5;
--lecremy-ai-gradient-end: #7c3aed;
--lecremy-ai-accent: #4f46e5;
position: fixed;
z-index: 999999;
bottom: 20px;
font-family: inherit;
}
.lecremy-ai-bubble--bottom-right {
right: 20px;
}
.lecremy-ai-bubble--bottom-left {
left: 20px;
}
.lecremy-ai-bubble .lecremy-ai-bubble__toggle {
display: flex;
box-sizing: border-box;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
padding: 14px;
border: none;
border-radius: 50%;
background: linear-gradient( 135deg, var( --lecremy-ai-gradient-start, #4f46e5 ), var( --lecremy-ai-gradient-end, #7c3aed ) );
color: #fff;
cursor: pointer; box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.25 );
box-shadow: 0 4px 16px color-mix( in srgb, var( --lecremy-ai-gradient-start, #4f46e5 ) 35%, transparent );
transition: transform 0.15s ease, filter 0.15s ease;
} .lecremy-ai-bubble .lecremy-ai-bubble__toggle:hover,
.lecremy-ai-bubble .lecremy-ai-bubble__toggle:focus-visible {
background: linear-gradient( 135deg, var( --lecremy-ai-gradient-start, #4f46e5 ), var( --lecremy-ai-gradient-end, #7c3aed ) );
color: #fff;
transform: scale( 1.05 );
filter: brightness( 0.9 );
}
.lecremy-ai-bubble .lecremy-ai-bubble__toggle:active {
background: linear-gradient( 135deg, var( --lecremy-ai-gradient-start, #4f46e5 ), var( --lecremy-ai-gradient-end, #7c3aed ) );
color: #fff;
transform: scale( 0.98 );
filter: brightness( 0.82 );
}
.lecremy-ai-bubble .lecremy-ai-bubble__toggle:focus-visible {
outline: none;
box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.25 ), 0 0 0 3px rgba( 255, 255, 255, 0.9 );
box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.25 ), 0 0 0 3px color-mix( in srgb, var( --lecremy-ai-gradient-start, #4f46e5 ) 45%, #fff );
}
.lecremy-ai-bubble__toggle svg {
width: 100%;
height: 100%;
fill: currentColor;
}
.lecremy-ai-bubble__panel {
position: absolute;
bottom: 68px;
box-sizing: border-box;
width: 360px;
height: 500px;
max-height: 70vh;
overflow: hidden;
background: #fff;
border-radius: 16px;
box-shadow: 0 12px 40px rgba( 0, 0, 0, 0.2 );
opacity: 0;
transform: scale( 0.92 ) translateY( 12px );
transform-origin: bottom;
transition: opacity 0.18s ease, transform 0.18s ease;
pointer-events: none;
}
.lecremy-ai-bubble--bottom-right .lecremy-ai-bubble__panel {
right: 0;
transform-origin: bottom right;
}
.lecremy-ai-bubble--bottom-left .lecremy-ai-bubble__panel {
left: 0;
transform-origin: bottom left;
}
.lecremy-ai-bubble--open .lecremy-ai-bubble__panel {
pointer-events: auto;
opacity: 1;
transform: scale( 1 ) translateY( 0 );
} .lecremy-ai-bubble__frame {
display: block;
width: 100%;
height: 100%;
border: 0;
}
@media ( max-width: 480px ) { .lecremy-ai-bubble__panel {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: auto;
height: 100vh; height: 100dvh;
max-height: none;
border-radius: 0;
transform-origin: center;
}
.lecremy-ai-bubble--bottom-right .lecremy-ai-bubble__panel,
.lecremy-ai-bubble--bottom-left .lecremy-ai-bubble__panel {
right: 0;
left: 0;
transform-origin: center;
}
} @media ( pointer: coarse ) {
.lecremy-ai-chat__icon-btn,
.lecremy-ai-chat__submit {
width: 44px;
height: 44px;
}
.lecremy-ai-chat__close {
width: 40px;
height: 40px;
}
.lecremy-ai-chat__attachment-remove {
width: 32px;
height: 32px;
}
}
@media ( prefers-reduced-motion: reduce ) {
.lecremy-ai-chat__message,
.lecremy-ai-bubble__toggle,
.lecremy-ai-bubble__panel,
.lecremy-ai-chat__submit,
.lecremy-ai-chat__typing-dots i {
animation-duration: 0.001ms !important;
transition-duration: 0.001ms !important;
}
} body .emoji-picker {
--blue-color: #4f46e5;
--focus-indicator-color: #4f46e5;
--border-color: #e2e4e9;
--hover-color: #eef0ff;
--popup-background-color: #fff;
font-family: inherit;
border-radius: 14px;
box-shadow: 0 12px 40px rgba( 0, 0, 0, 0.18 );
} @media ( max-width: 420px ) {
body .emoji-picker {
--emoji-per-row: 6;
}
}
body .emoji-picker__search {
border-radius: 8px;
}
body .emoji-picker__variant-popup {
border-radius: 10px;
} body.lecremy-ai-frame {
height: 100%;
margin: 0;
background: transparent;
}
html.lecremy-ai-frame {
height: 100%;
}
body.lecremy-ai-frame .lecremy-ai-chat {
height: 100%;
max-width: none;
border: none;
border-radius: 0;
}
body.lecremy-ai-frame .lecremy-ai-chat__messages {
max-height: none;
} html.lecremy-ai-frame--inline,
body.lecremy-ai-frame--inline {
height: auto;
} body.lecremy-ai-frame--inline .lecremy-ai-chat {
height: auto;
min-height: 100vh;
border: 1px solid #e2e4e9;
border-radius: 14px;
}
body.lecremy-ai-frame--inline .lecremy-ai-chat__messages {
max-height: none;
overflow-y: visible;
} .lecremy-ai-chat-embed {
width: 100%;
max-width: 480px;
}
.lecremy-ai-chat-embed__frame {
display: block;
width: 100%;
height: 500px;
border: 0;
}