30 lines
993 B
CSS
30 lines
993 B
CSS
|
@layer components {
|
||
|
|
.chat__scroll-down {
|
||
|
|
@apply z-feature fixed right-4 bottom-28 md:bottom-16;
|
||
|
|
padding-bottom: var(--saib);
|
||
|
|
}
|
||
|
|
|
||
|
|
.chat-bubble {
|
||
|
|
@apply bg-surface-less text-content mx-1 mb-2 flex min-w-[100px] cursor-auto flex-col gap-1 rounded-2xl p-2 text-left lg:max-w-2xl;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chat-bubble--user {
|
||
|
|
@apply bg-primary text-primary-content;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
[data-fl-theme="clay"] .chat-bubble {
|
||
|
|
@apply border-line border-solid;
|
||
|
|
border-width: var(--border-thin);
|
||
|
|
box-shadow: var(--shadow-sm), var(--shadow-inset);
|
||
|
|
}
|
||
|
|
|
||
|
|
[data-fl-theme="clay"] .chat-bubble--user {
|
||
|
|
/* background-image (not the `background` shorthand) so the opaque bg-primary
|
||
|
|
from the base layer stays as a fallback — matches the primary button's
|
||
|
|
clay fill: gradient, dark hairline border, stronger inset */
|
||
|
|
background-image: linear-gradient(135deg, var(--primary) 0%, var(--primary-soft) 100%);
|
||
|
|
border-color: rgba(0, 0, 0, 0.1);
|
||
|
|
box-shadow: var(--shadow-sm), var(--shadow-inset-strong);
|
||
|
|
}
|