frutjam/dist/components/chat.css

A utility-first CSS UI Library for Tailwind CSS

/*! frutjam v2.2.1 (c) 2026 Nezanuha | Released under the MIT License | https://frutjam.com */
/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */.chat-bubble{--chat-bubble-bg:var(--color-base-soft);--chat-bubble-color:var(--color-on-base);--chat-bubble-radius:0.25rem 1rem 1rem 1rem;--chat-bubble-padding-inline:1rem;--chat-bubble-padding-block:0.625rem;grid-column:2;position:relative;display:block;width:-moz-fit-content;width:fit-content;max-width:min(20rem,80%);padding-inline:var(--chat-bubble-padding-inline);padding-block:var(--chat-bubble-padding-block);background-color:var(--chat-bubble-bg);color:var(--chat-bubble-color);border-radius:var(--chat-bubble-radius);font-size:var(--chat-bubble-font-size,.9375rem);line-height:1.5;word-break:break-word;:where(&) :where(p,li){color:inherit}}.chat-footer,.chat-header{grid-column:2;font-size:.6875rem;opacity:.5;display:flex;align-items:center;gap:.375rem}.chat-avatar{grid-row:1/4;align-self:end}.chat{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;-moz-column-gap:.75rem;column-gap:.75rem;row-gap:.125rem;padding-block:.25rem;:where(&.chat-end) :where(.chat-footer){direction:ltr;text-align:end}}.chat-end{grid-template-columns:1fr auto;direction:rtl;--chat-bubble-bg:var(--color-primary);--chat-bubble-color:var(--color-on-primary);--chat-bubble-radius:1rem 0.25rem 1rem 1rem;:where(&) :where(.chat-bubble){direction:ltr}}.chat-start{grid-template-columns:auto 1fr;direction:ltr}.chat-lg{--chat-bubble-font-size:1rem;--chat-bubble-padding-inline:1.25rem;--chat-bubble-padding-block:0.75rem}.chat-sm{--chat-bubble-font-size:0.875rem;--chat-bubble-padding-inline:0.75rem;--chat-bubble-padding-block:0.5rem}.chat-xl{--chat-bubble-font-size:1.125rem;--chat-bubble-padding-inline:1.5rem;--chat-bubble-padding-block:1rem}.chat-xs{--chat-bubble-font-size:0.75rem;--chat-bubble-padding-inline:0.625rem;--chat-bubble-padding-block:0.375rem}.chat-bubble-accent{--chat-bubble-bg:var(--color-accent);--chat-bubble-color:var(--color-on-accent)}.chat-bubble-error{--chat-bubble-bg:var(--color-error);--chat-bubble-color:var(--color-on-error)}.chat-bubble-info{--chat-bubble-bg:var(--color-info);--chat-bubble-color:var(--color-on-info)}.chat-bubble-neutral{--chat-bubble-bg:var(--color-neutral);--chat-bubble-color:var(--color-on-neutral)}.chat-bubble-primary{--chat-bubble-bg:var(--color-primary);--chat-bubble-color:var(--color-on-primary)}.chat-bubble-secondary{--chat-bubble-bg:var(--color-secondary);--chat-bubble-color:var(--color-on-secondary)}.chat-bubble-success{--chat-bubble-bg:var(--color-success);--chat-bubble-color:var(--color-on-success)}.chat-bubble-warning{--chat-bubble-bg:var(--color-warning);--chat-bubble-color:var(--color-on-warning)}.chat-md{--chat-bubble-font-size:0.9375rem}