rather than
nesting real lists, so each depth needs its own counter and marker
style. The decimal → lower-alpha → lower-roman cycle matches the editor. */
/* ── Code blocks ──
Quill 2 emits a container div holding one div per line, where 1.x emitted
a single . Both shapes are allowed by the
sanitizer, so both are styled. */
/* Long URLs shouldn't push a bubble past its max-width. */
/* ── Inline code ──
Quill has no inline-code format, so this only shows up in markdown, but it
belongs with the other body styles. `pre > code` is excluded: the
already carries the background, and doubling it looks like a nested box. */
/* ── Tables ──
A wide table must scroll rather than stretch its container: these sit in
chat bubbles that are already capped at min(90%, 48rem). */
/* Quill's alignment / indentation formats. */
}
.fz-rich-text p, .fz-rich-text h1, .fz-rich-text h2, .fz-rich-text h3, .fz-rich-text h4, .fz-rich-text h5, .fz-rich-text h6, .fz-rich-text ul, .fz-rich-text ol, .fz-rich-text blockquote, .fz-rich-text pre {
margin: var(--spacing-xxs) 0;
}
.fz-rich-text > :first-child {
margin-top: 0;
}
.fz-rich-text > :last-child {
margin-bottom: 0;
}
.fz-rich-text ul, .fz-rich-text ol {
padding-left: var(--spacing-m);
}
.fz-rich-text .ql-ui {
display: none;
}
.fz-rich-text ol {
counter-reset: fz-list-0 fz-list-1 fz-list-2 fz-list-3 fz-list-4 fz-list-5 fz-list-6 fz-list-7 fz-list-8;
}
.fz-rich-text li[data-list] {
list-style-type: none;
position: relative;
padding-left: 1.4em;
}
.fz-rich-text li[data-list]::before {
position: absolute;
left: 0;
width: 1.2em;
text-align: right;
white-space: nowrap;
color: var(--color-on-surface-variant);
}
.fz-rich-text li[data-list=bullet]::before {
content: "•";
}
.fz-rich-text li[data-list=ordered] {
counter-increment: fz-list-0;
}
.fz-rich-text li[data-list=ordered]::before {
content: counter(fz-list-0, decimal) ". ";
}
.fz-rich-text li[data-list]:not([class*=ql-indent-]) {
counter-reset: fz-list-1 fz-list-2 fz-list-3 fz-list-4 fz-list-5 fz-list-6 fz-list-7 fz-list-8;
}
.fz-rich-text li[data-list].ql-indent-1 {
padding-left: 2.9em;
/* Reset every counter deeper than this level. */
counter-reset: fz-list-2 fz-list-3 fz-list-4 fz-list-5 fz-list-6 fz-list-7 fz-list-8;
}
.fz-rich-text li[data-list].ql-indent-1::before {
left: 1.5em;
}
.fz-rich-text li[data-list=ordered].ql-indent-1 {
counter-increment: fz-list-1;
}
.fz-rich-text li[data-list=ordered].ql-indent-1::before {
content: counter(fz-list-1, lower-alpha) ". ";
}
.fz-rich-text li[data-list].ql-indent-2 {
padding-left: 4.4em;
/* Reset every counter deeper than this level. */
counter-reset: fz-list-3 fz-list-4 fz-list-5 fz-list-6 fz-list-7 fz-list-8;
}
.fz-rich-text li[data-list].ql-indent-2::before {
left: 3em;
}
.fz-rich-text li[data-list=ordered].ql-indent-2 {
counter-increment: fz-list-2;
}
.fz-rich-text li[data-list=ordered].ql-indent-2::before {
content: counter(fz-list-2, lower-roman) ". ";
}
.fz-rich-text li[data-list].ql-indent-3 {
padding-left: 5.9em;
/* Reset every counter deeper than this level. */
counter-reset: fz-list-4 fz-list-5 fz-list-6 fz-list-7 fz-list-8;
}
.fz-rich-text li[data-list].ql-indent-3::before {
left: 4.5em;
}
.fz-rich-text li[data-list=ordered].ql-indent-3 {
counter-increment: fz-list-3;
}
.fz-rich-text li[data-list=ordered].ql-indent-3::before {
content: counter(fz-list-3, decimal) ". ";
}
.fz-rich-text li[data-list].ql-indent-4 {
padding-left: 7.4em;
/* Reset every counter deeper than this level. */
counter-reset: fz-list-5 fz-list-6 fz-list-7 fz-list-8;
}
.fz-rich-text li[data-list].ql-indent-4::before {
left: 6em;
}
.fz-rich-text li[data-list=ordered].ql-indent-4 {
counter-increment: fz-list-4;
}
.fz-rich-text li[data-list=ordered].ql-indent-4::before {
content: counter(fz-list-4, lower-alpha) ". ";
}
.fz-rich-text li[data-list].ql-indent-5 {
padding-left: 8.9em;
/* Reset every counter deeper than this level. */
counter-reset: fz-list-6 fz-list-7 fz-list-8;
}
.fz-rich-text li[data-list].ql-indent-5::before {
left: 7.5em;
}
.fz-rich-text li[data-list=ordered].ql-indent-5 {
counter-increment: fz-list-5;
}
.fz-rich-text li[data-list=ordered].ql-indent-5::before {
content: counter(fz-list-5, lower-roman) ". ";
}
.fz-rich-text li[data-list].ql-indent-6 {
padding-left: 10.4em;
/* Reset every counter deeper than this level. */
counter-reset: fz-list-7 fz-list-8;
}
.fz-rich-text li[data-list].ql-indent-6::before {
left: 9em;
}
.fz-rich-text li[data-list=ordered].ql-indent-6 {
counter-increment: fz-list-6;
}
.fz-rich-text li[data-list=ordered].ql-indent-6::before {
content: counter(fz-list-6, decimal) ". ";
}
.fz-rich-text li[data-list].ql-indent-7 {
padding-left: 11.9em;
/* Reset every counter deeper than this level. */
counter-reset: fz-list-8;
}
.fz-rich-text li[data-list].ql-indent-7::before {
left: 10.5em;
}
.fz-rich-text li[data-list=ordered].ql-indent-7 {
counter-increment: fz-list-7;
}
.fz-rich-text li[data-list=ordered].ql-indent-7::before {
content: counter(fz-list-7, lower-alpha) ". ";
}
.fz-rich-text li[data-list].ql-indent-8 {
padding-left: 13.4em;
/* Reset every counter deeper than this level. */
counter-reset: fz-list-9 fz-list-8;
}
.fz-rich-text li[data-list].ql-indent-8::before {
left: 12em;
}
.fz-rich-text li[data-list=ordered].ql-indent-8 {
counter-increment: fz-list-8;
}
.fz-rich-text li[data-list=ordered].ql-indent-8::before {
content: counter(fz-list-8, lower-roman) ". ";
}
.fz-rich-text .ql-code-block-container {
background: var(--color-surface-container-highest);
border-radius: var(--border-radius-xs);
padding: var(--spacing-xxs) var(--spacing-xs);
font-family: monospace;
white-space: pre-wrap;
word-break: break-word;
tab-size: 4;
}
.fz-rich-text blockquote {
border-left: var(--border-width-xs) solid var(--color-outline-variant);
padding-left: var(--spacing-xs);
color: var(--color-on-surface-variant);
}
.fz-rich-text pre {
background: var(--color-surface-container-highest);
border-radius: var(--border-radius-xs);
padding: var(--spacing-xxs) var(--spacing-xs);
white-space: pre-wrap;
word-break: break-word;
}
.fz-rich-text a {
word-break: break-word;
}
.fz-rich-text :not(pre) > code {
background: var(--color-surface-container-highest);
border-radius: var(--border-radius-xs);
padding: 0 0.25em;
font-family: monospace;
word-break: break-word;
}
.fz-rich-text hr {
border: 0;
border-top: var(--border-width-xs) solid var(--color-outline-variant);
margin: var(--spacing-xs) 0;
}
.fz-rich-text table {
display: block;
overflow-x: auto;
max-width: 100%;
border-collapse: collapse;
margin: var(--spacing-xxs) 0;
}
.fz-rich-text th, .fz-rich-text td {
border: var(--border-width-xs) solid var(--color-outline-variant);
padding: var(--spacing-xxs) var(--spacing-xs);
text-align: left;
}
.fz-rich-text th {
background: var(--color-surface-container-highest);
font-weight: bold;
}
.fz-rich-text .ql-align-center {
text-align: center;
}
.fz-rich-text .ql-align-right {
text-align: right;
}
.fz-rich-text .ql-align-justify {
text-align: justify;
}
.fz-rich-text .ql-direction-rtl {
direction: rtl;
}
.fz-rich-text .ql-indent-1 {
padding-left: 1.5em;
}
.fz-rich-text .ql-indent-2 {
padding-left: 3em;
}
.fz-rich-text .ql-indent-3 {
padding-left: 4.5em;
}
.fz-rich-text .ql-indent-4 {
padding-left: 6em;
}
.fz-rich-text .ql-indent-5 {
padding-left: 7.5em;
}
.fz-rich-text .ql-indent-6 {
padding-left: 9em;
}
.fz-rich-text .ql-indent-7 {
padding-left: 10.5em;
}
.fz-rich-text .ql-indent-8 {
padding-left: 12em;
}
/* ====================================================== */
/* Rendered markdown (the assistant's turns on the Messages page). Layered on
top of .fz-rich-text, which does the block spacing, lists, code and tables.
The one thing markdown needs that Quill does not: headings have to be
reined in. A model writes "## Last week" freely, and h1/h2/h3 are xxl/xl/l
globally — sizes meant for a page title, not for a line inside a chat
bubble that is itself capped at 48rem. Scale them down and let weight,
rather than size, carry the hierarchy. */
.fz-md {
/* Deeper headings are already at body size, so they need something else to
set them apart from the paragraph under them. */
}
.fz-md h1, .fz-md h2, .fz-md h3, .fz-md h4, .fz-md h5, .fz-md h6 {
font-weight: bold;
line-height: 1.3;
}
.fz-md h4, .fz-md h5, .fz-md h6 {
color: var(--color-on-surface-variant);
}
/* ====================================================== */
/* Chat bubbles — the message thread, and the discussion on an activity.
* Built with `ui_bubble::bubble`; see that module for what goes in one.
*
* The alignment carries the authorship. The reader's own words sit right in
* the primary container, everyone else's sit left in a neutral one, and that
* is why a bubble of your own wears no name: the side already said it. The
* asymmetric corner points back at whoever is speaking, which is what keeps
* two adjacent bubbles from the same person from reading as one long one.
*
* Deliberately not a `.fz-card`: a card is a region of the page, and a
* conversation is a column of utterances. Giving each comment the same border
* and radius as the panel around it made the discussion read as a stack of
* little documents rather than as people talking. */
.fz-bubble-row {
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 0;
}
.fz-bubble-row-mine {
align-items: flex-end;
}
.fz-bubble {
padding: var(--spacing-xs) var(--spacing-s);
/* Hugs its content up to a comfortable measure, and never wider than the
column — the activity page puts these in 3fr of a two-column grid. */
max-width: min(480px, 100%);
background: var(--color-surface-container);
color: var(--color-on-surface);
border-radius: 0 var(--border-radius-l) var(--border-radius-l) var(--border-radius-l);
}
.fz-bubble-row-mine > .fz-bubble {
background: var(--color-primary-container);
color: var(--color-on-primary-container);
border-radius: var(--border-radius-l) var(--border-radius-l) 0 var(--border-radius-l);
}
/* `Width::Wide` — a turn that is a document rather than a sentence, which is
what an assistant's markdown answer is. Still capped: prose run to the full
width of a desktop window is unreadable. */
.fz-bubble-wide > .fz-bubble {
max-width: min(90%, 48rem);
}
/* `Width::Full` — an editor opened inside a bubble needs the room a sentence
does not. */
.fz-bubble-full > .fz-bubble {
max-width: none;
width: 100%;
}
/* The line over a bubble: who said it, when, and what you can do about it.
*
* All on one row, above. The name and the timestamp belong together — split
* across two lines they are two rows of grey chrome around a bubble that might
* only say "ok" — and a name *under* the thing it labels reads as a signature
* on whatever comes next.
*
* Flush with the bubble's outer edge rather than inset to meet the text inside
* it: the header and the bubble then share one left rule (one right rule, on
* your own side). An inset lines up with nothing — the bubble's own padding is
* a step larger — so a header nudged in by less than that just looks nudged.
*
* Outside the bubble, not in it, so the action glyphs never sit on the primary
* container, where an icon-sized stroke has no contrast to spare. */
.fz-bubble-header {
margin-bottom: 2px;
/* A long name plus a timestamp must not stretch the row past the bubble's
own cap and drag the alignment with it. */
max-width: 100%;
}
/* Who is speaking. A shade stronger than the timestamp beside it, so the two
do not read as one run of grey. */
.fz-bubble-author {
color: var(--color-on-surface);
}
/* ====================================================== */
/* Pulse animation (decorative blobs etc.) */
@keyframes fz-pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.fz-pulse {
animation: fz-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
/* ====================================================== */
/* HTMX spinner */
.on-htmx-request {
opacity: 0;
}
.htmx-request .on-htmx-request {
opacity: 100%;
animation: rotation 2s infinite linear;
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
/*# sourceMappingURL=components.css.map */