1@import 'tailwindcss';
2@import 'tw-animate-css';
3
4@custom-variant dark (&:is(.dark *));
5
6:root {
7 --background: hsl(0 0% 100%);
8 --foreground: hsl(240 10% 3.9%);
9 --muted: hsl(240 4.8% 95.9%);
10 --muted-foreground: hsl(240 3.8% 46.1%);
11 --popover: hsl(0 0% 100%);
12 --popover-foreground: hsl(240 10% 3.9%);
13 --card: hsl(0 0% 100%);
14 --card-foreground: hsl(240 10% 3.9%);
15 --border: hsl(240 5.9% 90%);
16 --input: hsl(240 5.9% 90%);
17 --primary: hsl(240 5.9% 10%);
18 --primary-foreground: hsl(0 0% 98%);
19 --secondary: hsl(240 4.8% 95.9%);
20 --secondary-foreground: hsl(240 5.9% 10%);
21 --accent: hsl(240 4.8% 95.9%);
22 --accent-foreground: hsl(240 5.9% 10%);
23 --destructive: hsl(0 72.2% 50.6%);
24 --destructive-foreground: hsl(0 0% 98%);
25 --warning: hsl(25 95% 53%);
26 --warning-foreground: hsl(0 0% 98%);
27 --ring: hsl(240 10% 3.9%);
28 --sidebar: hsl(0 0% 98%);
29 --sidebar-foreground: hsl(240 5.3% 26.1%);
30 --sidebar-primary: hsl(240 5.9% 10%);
31 --sidebar-primary-foreground: hsl(0 0% 98%);
32 --sidebar-accent: hsl(240 4.8% 95.9%);
33 --sidebar-accent-foreground: hsl(240 5.9% 10%);
34 --sidebar-border: hsl(220 13% 91%);
35 --sidebar-ring: hsl(217.2 91.2% 59.8%);
36
37 --radius: 0.5rem;
38}
39
40.dark {
41 --background: hsl(240 10% 3.9%);
42 --foreground: hsl(0 0% 98%);
43 --muted: hsl(240 3.7% 15.9%);
44 --muted-foreground: hsl(240 5% 64.9%);
45 --popover: hsl(240 10% 3.9%);
46 --popover-foreground: hsl(0 0% 98%);
47 --card: hsl(240 10% 3.9%);
48 --card-foreground: hsl(0 0% 98%);
49 --border: hsl(240 3.7% 15.9%);
50 --input: hsl(240 3.7% 15.9%);
51 --primary: hsl(0 0% 98%);
52 --primary-foreground: hsl(240 5.9% 10%);
53 --secondary: hsl(240 3.7% 15.9%);
54 --secondary-foreground: hsl(0 0% 98%);
55 --accent: hsl(240 3.7% 15.9%);
56 --accent-foreground: hsl(0 0% 98%);
57 --destructive: hsl(0 62.8% 30.6%);
58 --destructive-foreground: hsl(0 0% 98%);
59 --warning: hsl(25 95% 63%);
60 --warning-foreground: hsl(0 0% 98%);
61 --ring: hsl(240 4.9% 83.9%);
62 --sidebar: hsl(240 5.9% 10%);
63 --sidebar-foreground: hsl(240 4.8% 95.9%);
64 --sidebar-primary: hsl(224.3 76.3% 48%);
65 --sidebar-primary-foreground: hsl(0 0% 100%);
66 --sidebar-accent: hsl(240 3.7% 15.9%);
67 --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
68 --sidebar-border: hsl(240 3.7% 15.9%);
69 --sidebar-ring: hsl(217.2 91.2% 59.8%);
70}
71
72@theme inline {
73 /* Radius (for rounded-*) */
74 --radius-sm: calc(var(--radius) - 4px);
75 --radius-md: calc(var(--radius) - 2px);
76 --radius-lg: var(--radius);
77 --radius-xl: calc(var(--radius) + 4px);
78
79 /* Colors */
80 --color-background: var(--background);
81 --color-foreground: var(--foreground);
82 --color-muted: var(--muted);
83 --color-muted-foreground: var(--muted-foreground);
84 --color-popover: var(--popover);
85 --color-popover-foreground: var(--popover-foreground);
86 --color-card: var(--card);
87 --color-card-foreground: var(--card-foreground);
88 --color-border: var(--border);
89 --color-input: var(--input);
90 --color-primary: var(--primary);
91 --color-primary-foreground: var(--primary-foreground);
92 --color-secondary: var(--secondary);
93 --color-secondary-foreground: var(--secondary-foreground);
94 --color-accent: var(--accent);
95 --color-accent-foreground: var(--accent-foreground);
96 --color-destructive: var(--destructive);
97 --color-destructive-foreground: var(--destructive-foreground);
98 --color-warning: var(--warning);
99 --color-warning-foreground: var(--warning-foreground);
100 --color-ring: var(--ring);
101 --color-radius: var(--radius);
102 --color-sidebar: var(--sidebar);
103 --color-sidebar-foreground: var(--sidebar-foreground);
104 --color-sidebar-primary: var(--sidebar-primary);
105 --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
106 --color-sidebar-accent: var(--sidebar-accent);
107 --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
108 --color-sidebar-border: var(--sidebar-border);
109 --color-sidebar-ring: var(--sidebar-ring);
110}
111
112@layer base {
113 * {
114 @apply border-border;
115 }
116
117 body {
118 @apply bg-background text-foreground;
119 }
120}
121
122@import 'xp.css/dist/XP.css';
123@import './lib/styles/fonts.css';
124
125/* Local font faces with 30-day cache */
126@font-face {
127 font-family: 'Arial';
128 src: url('/fonts/Arial.TTF') format('truetype');
129 font-display: swap;
130 font-weight: normal;
131 font-style: normal;
132}
133
134@font-face {
135 font-family: 'Arial';
136 src: url('/fonts/Arialbd.TTF') format('truetype');
137 font-display: swap;
138 font-weight: bold;
139 font-style: normal;
140}
141
142@font-face {
143 font-family: 'Arial';
144 src: url('/fonts/Ariali.TTF') format('truetype');
145 font-display: swap;
146 font-weight: normal;
147 font-style: italic;
148}
149
150@font-face {
151 font-family: 'Arial';
152 src: url('/fonts/Arialbi.TTF') format('truetype');
153 font-display: swap;
154 font-weight: bold;
155 font-style: italic;
156}
157
158@font-face {
159 font-family: 'Tahoma';
160 src: url('/fonts/tahoma.ttf') format('truetype');
161 font-display: swap;
162 font-weight: 80;
163 font-style: normal;
164}
165
166@font-face {
167 font-family: 'Tahoma';
168 src: url('/fonts/tahomabd.ttf') format('truetype');
169 font-display: swap;
170 font-weight: 200;
171 font-style: normal;
172}
173
174@font-face {
175 font-family: 'Verdana';
176 src: url('/fonts/Verdana.TTF') format('truetype');
177 font-display: swap;
178 font-weight: normal;
179 font-style: normal;
180}
181
182@font-face {
183 font-family: 'Verdana';
184 src: url('/fonts/Verdanab.TTF') format('truetype');
185 font-display: swap;
186 font-weight: bold;
187 font-style: normal;
188}
189
190@font-face {
191 font-family: 'Verdana';
192 src: url('/fonts/Verdanai.TTF') format('truetype');
193 font-display: swap;
194 font-weight: normal;
195 font-style: italic;
196}
197
198@font-face {
199 font-family: 'Verdana';
200 src: url('/fonts/Verdanaz.TTF') format('truetype');
201 font-display: swap;
202 font-weight: bold;
203 font-style: italic;
204}
205
206@font-face {
207 font-family: 'Comic Sans MS';
208 src: url('/fonts/Comic.TTF') format('truetype');
209 font-display: swap;
210 font-weight: normal;
211 font-style: normal;
212}
213
214@font-face {
215 font-family: 'Comic Sans MS';
216 src: url('/fonts/Comicbd.TTF') format('truetype');
217 font-display: swap;
218 font-weight: bold;
219 font-style: normal;
220}
221
222@font-face {
223 font-family: 'Times New Roman';
224 src: url('/fonts/Times.TTF') format('truetype');
225 font-display: swap;
226 font-weight: normal;
227 font-style: normal;
228}
229
230@font-face {
231 font-family: 'Times New Roman';
232 src: url('/fonts/Timesbd.TTF') format('truetype');
233 font-display: swap;
234 font-weight: bold;
235 font-style: normal;
236}
237
238@font-face {
239 font-family: 'Times New Roman';
240 src: url('/fonts/Timesi.TTF') format('truetype');
241 font-display: swap;
242 font-weight: normal;
243 font-style: italic;
244}
245
246@font-face {
247 font-family: 'Times New Roman';
248 src: url('/fonts/Timesbi.TTF') format('truetype');
249 font-display: swap;
250 font-weight: bold;
251 font-style: italic;
252}
253
254@font-face {
255 font-family: 'Courier New';
256 src: url('/fonts/LiberationMono-Regular.ttf') format('truetype');
257 font-display: swap;
258 font-weight: normal;
259 font-style: normal;
260}
261
262@font-face {
263 font-family: 'Courier New';
264 src: url('/fonts/LiberationMono-Bold.ttf') format('truetype');
265 font-display: swap;
266 font-weight: bold;
267 font-style: normal;
268}
269
270@font-face {
271 font-family: 'Courier New';
272 src: url('/fonts/LiberationMono-Italic.ttf') format('truetype');
273 font-display: swap;
274 font-weight: normal;
275 font-style: italic;
276}
277
278@font-face {
279 font-family: 'Courier New';
280 src: url('/fonts/LiberationMono-BoldItalic.ttf') format('truetype');
281 font-display: swap;
282 font-weight: bold;
283 font-style: italic;
284}
285
286/* ===== RETRO FONT STYLING ===== */
287/* Retro Windows fonts with proper fallbacks */
288.retro-font-pixelated {
289 font-family: 'Pixelated MS Sans Serif', 'Tahoma', Geneva, sans-serif;
290}
291
292.retro-font-tahoma {
293 font-family: Tahoma, 'Pixelated MS Sans Serif', Geneva, sans-serif;
294}
295
296.retro-font-verdana {
297 font-family: Verdana, 'Pixelated MS Sans Serif', Geneva, sans-serif;
298}
299
300.retro-font-comicSans {
301 font-family: 'Comic Sans MS', 'Pixelated MS Sans Serif', cursive, sans-serif;
302}
303
304.retro-font-timesNewRoman {
305 font-family: 'Times New Roman', Times, serif;
306}
307
308.retro-font-arial {
309 font-family: Arial, 'Pixelated MS Sans Serif', Helvetica, sans-serif;
310}
311
312.retro-font-courierNew {
313 font-family: 'Courier New', 'Perfect DOS VGA 437 Win', Courier, monospace;
314}
315
316.retro-font-dos {
317 font-family: 'Perfect DOS VGA 437 Win', 'Courier New', Courier, monospace;
318}
319
320/* ===== GRADIENT TEXT EFFECTS ===== */
321.gradient-text {
322 background-size: 200% 200%;
323 -webkit-background-clip: text;
324 -webkit-text-fill-color: transparent;
325 background-clip: text;
326 animation: gradientShift 3s ease infinite;
327}
328
329.gradient-text-static {
330 /* Remove text-fill-color to allow inline color styles to work */
331 /* Individual spans will have their own colors set inline */
332 letter-spacing: normal;
333 word-spacing: normal;
334}
335
336/* Gradient text container uses inline display for proper text alignment */
337.gradient-text-static {
338 display: inline !important;
339 vertical-align: baseline !important;
340 line-height: inherit !important;
341}
342
343/* Ensure gradient character spans don't add spacing */
344.gradient-text-static > span,
345.gradient-text-static .gradient-char {
346 display: inline !important;
347 margin: 0 !important;
348 padding: 0 !important;
349 letter-spacing: 0 !important;
350 line-height: inherit !important;
351 font-size: inherit !important;
352 vertical-align: baseline !important;
353}
354
355/* Ensure gradient character colors from inline styles are respected */
356.gradient-text-static .gradient-char {
357 -webkit-text-fill-color: initial !important;
358}
359
360/* Gradient text in input fields - preserve normal input background */
361input[style*='background-clip: text'] {
362 /* Keep default input background while allowing gradient text */
363}
364
365/* Gradient animation for AOL-style effects */
366@keyframes gradientShift {
367 0% {
368 background-position: 0% 50%;
369 }
370 50% {
371 background-position: 100% 50%;
372 }
373 100% {
374 background-position: 0% 50%;
375 }
376}
377
378/* Specific gradient presets */
379.gradient-rainbow {
380 background: linear-gradient(
381 45deg,
382 #ff0000,
383 #ff8000,
384 #ffff00,
385 #80ff00,
386 #00ff00,
387 #00ff80,
388 #00ffff,
389 #0080ff,
390 #0000ff,
391 #8000ff,
392 #ff00ff,
393 #ff0080
394 );
395}
396
397.gradient-fire {
398 background: linear-gradient(45deg, #ff0000, #ff4000, #ff8000, #ffbf00, #ffff00);
399}
400
401.gradient-ocean {
402 background: linear-gradient(45deg, #000080, #0040ff, #0080ff, #00bfff, #00ffff);
403}
404
405.gradient-sunset {
406 background: linear-gradient(45deg, #ff4500, #ff6347, #ffd700, #ffff00);
407}
408
409.gradient-neon {
410 background: linear-gradient(45deg, #ff00ff, #8000ff, #0080ff, #00ffff);
411}
412
413.gradient-forest {
414 background: linear-gradient(45deg, #006400, #228b22, #32cd32, #90ee90);
415}
416
417.gradient-royal {
418 background: linear-gradient(45deg, #4b0082, #6a5acd, #9370db, #dda0dd);
419}
420
421/* ===== CHAT MESSAGE FORMATTING ===== */
422.formatted-message {
423 word-break: break-word;
424 line-height: 1.4;
425 max-width: 100%;
426}
427
428.formatted-message strong {
429 font-weight: bold;
430}
431
432.formatted-message em {
433 font-style: italic;
434}
435
436.formatted-message u {
437 text-decoration: underline;
438}
439
440.formatted-message s {
441 text-decoration: line-through;
442}
443
444.formatted-message code {
445 background: #f0f0f0;
446 padding: 1px 3px;
447 border-radius: 2px;
448 font-family: 'Courier New', Courier, monospace;
449 font-size: 0.9em;
450}
451
452/* ===== INPUT STYLING FIXES ===== */
453/* Fix letter spacing issues with gradient text in inputs */
454input[style*='background-clip: text'] {
455 letter-spacing: normal !important;
456 word-spacing: normal !important;
457}
458
459/* Ensure gradient inputs don't have extra padding */
460input.styled-input {
461 letter-spacing: 0;
462 word-spacing: 0;
463}
464
465/* Ensure proper font weights are used */
466.retro-font-tahoma {
467 font-weight: 80;
468}
469
470/* ===== TEXT STYLE SELECTOR STYLING ===== */
471.text-formatting-toolbar {
472 background: #f0f0f0;
473 border: 2px inset #dfdfdf;
474 padding: 4px;
475 margin-bottom: 8px;
476 display: flex;
477 flex-wrap: wrap;
478 gap: 4px;
479 align-items: center;
480}
481
482.formatting-button {
483 width: 24px;
484 height: 24px;
485 border: 1px outset #dfdfdf;
486 background: #f0f0f0;
487 cursor: pointer;
488 display: flex;
489 align-items: center;
490 justify-content: center;
491 font-size: 12px;
492 font-weight: bold;
493 transition: all 0.1s ease;
494}
495
496.formatting-button:hover {
497 background: #e0e0e0;
498}
499
500.formatting-button:active,
501.formatting-button.active {
502 border: 1px inset #dfdfdf;
503 background: #d0d0d0;
504}
505
506.font-selector {
507 padding: 2px 4px;
508 border: 1px inset #dfdfdf;
509 background: white;
510 font-size: 11px;
511 min-width: 80px;
512}
513
514.size-slider {
515 width: 60px;
516}
517
518.color-indicator {
519 width: 16px;
520 height: 16px;
521 border: 1px solid #000;
522 cursor: pointer;
523 display: inline-block;
524}
525
526/* ===== ACCESSIBILITY IMPROVEMENTS ===== */
527@media (prefers-reduced-motion: reduce) {
528 .gradient-text {
529 animation: none;
530 }
531}
532
533/* High contrast mode support */
534@media (prefers-contrast: high) {
535 .gradient-text {
536 -webkit-text-fill-color: unset;
537 background: none;
538 color: inherit;
539 }
540
541 .gradient-text-static {
542 -webkit-text-fill-color: unset;
543 background: none;
544 color: inherit;
545 }
546}
547
548/* ===== RETRO STYLING ENHANCEMENTS ===== */
549.retro-message {
550 font-family: inherit;
551 line-height: 1.3;
552 word-wrap: break-word;
553}
554
555.retro-message.style-bold {
556 font-weight: bold;
557}
558
559.retro-message.style-italic {
560 font-style: italic;
561}
562
563.retro-message.style-underline {
564 text-decoration: underline;
565}
566
567.retro-message.style-strikethrough {
568 text-decoration: line-through;
569}
570
571.retro-message.style-underline.style-strikethrough {
572 text-decoration: underline line-through;
573}
574
575/* ===== PERFORMANCE OPTIMIZATIONS ===== */
576.gradient-text,
577.gradient-text-static {
578 will-change: background-position;
579 contain: layout style paint;
580}
581
582/* Limit gradient text length for performance */
583.gradient-text-long {
584 max-width: 500px;
585 overflow: hidden;
586 text-overflow: ellipsis;
587}