1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
|
@import "tailwindcss";
/* Syntax-highlight theme for fenced code blocks in rendered Markdown. */
@import "highlight.js/styles/atom-one-dark.min.css";
/* Custom monokai theme — must be imported BEFORE the @plugin block. */
@import "./themes/monokai.css";
/* DaisyUI v5 — enable the plugin AND bundle the monokai theme (set as default,
applied via <html data-theme="monokai">). Themes not listed here are NOT
bundled, so monokai must be named explicitly, not merely referenced. */
@plugin "daisyui" {
themes: monokai --default;
}
/* Rendered-Markdown (assistant messages) typography — scoped to .markdown-body
so it never leaks into the rest of the app. */
.markdown-body {
& p {
margin-block: 0.5em;
&:first-child {
margin-block-start: 0;
}
&:last-child {
margin-block-end: 0;
}
}
& h1,
& h2,
& h3,
& h4,
& h5,
& h6 {
font-weight: 600;
line-height: 1.25;
margin-block: 0.75em 0.25em;
&:first-child {
margin-block-start: 0;
}
}
& h1 {
font-size: 1.4em;
}
& h2 {
font-size: 1.2em;
}
& h3 {
font-size: 1.1em;
}
& ul,
& ol {
padding-inline-start: 1.5em;
margin-block: 0.5em;
}
& ul {
list-style-type: disc;
}
& ol {
list-style-type: decimal;
}
& li {
margin-block: 0.15em;
}
& pre {
overflow-x: auto;
border-radius: var(--radius-box);
margin-block: 0.5em;
}
& pre code {
display: block;
padding: 0.75em 1em;
font-size: 0.8125em;
line-height: 1.5;
}
& :not(pre) > code {
font-size: 0.875em;
padding: 0.15em 0.4em;
border-radius: var(--radius-selector);
background-color: oklch(var(--color-base-content) / 0.1);
}
& blockquote {
border-inline-start: 3px solid oklch(var(--color-base-content) / 0.2);
padding-inline-start: 0.75em;
margin-block: 0.5em;
opacity: 0.8;
}
& a {
color: oklch(var(--color-primary));
text-decoration: underline;
&:hover {
opacity: 0.8;
}
}
& strong {
font-weight: 600;
}
& table {
width: 100%;
border-collapse: collapse;
margin-block: 0.5em;
font-size: 0.875em;
}
& th,
& td {
border: 1px solid oklch(var(--color-base-content) / 0.15);
padding: 0.4em 0.75em;
text-align: start;
}
& th {
font-weight: 600;
background-color: oklch(var(--color-base-200));
}
& hr {
border: none;
border-top: 1px solid oklch(var(--color-base-content) / 0.2);
margin-block: 0.75em;
}
}
/* App shell fills the viewport and never scrolls/overflows at the page level —
the inner regions (tab strip, chat transcript) own their own scrolling. */
html,
body,
#app {
height: 100%;
}
body {
overflow: hidden;
}
/* Transcript rows: skip layout + paint for rows scrolled out of view. A long
turn has hundreds of rows; without this every one is laid out on first
paint (and on every resize). `contain-intrinsic-size: auto <h>` makes the
browser remember each row's last rendered height, so scrolling back up
doesn't jump; the 64px is only the estimate for never-rendered rows. */
.chat-row {
content-visibility: auto;
contain-intrinsic-size: auto 64px;
}
|
