1/* CSS Reset and Base Styles */
2* {
3 box-sizing: border-box;
4}
5
6html {
7 height: 100%;
8 height: 100dvh;
9 overflow: hidden;
10}
11
12body {
13 margin: 0;
14 height: 100%;
15 overflow: hidden;
16 font-family:
17 "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
18 line-height: 1.6;
19 -webkit-font-smoothing: antialiased;
20 letter-spacing: -0.01em;
21 color: var(--text-primary);
22 background: var(--bg-secondary);
23}
24
25/* CSS Variables */
26:root {
27 --font-mono:
28 "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
29 --primary: #2563eb;
30 --primary-dark: #1d4ed8;
31 --bg-base: #ffffff;
32 --bg-secondary: #f9fafb;
33 --bg-tertiary: #f3f4f6;
34 --border: #e5e7eb;
35 --text-primary: #111827;
36 --text-secondary: #6b7280;
37 --text-tertiary: #9ca3af;
38 --success-bg: #f0fdf4;
39 --success-border: #bbf7d0;
40 --success-text: #166534;
41 --error-bg: #fef2f2;
42 --error-border: #fecaca;
43 --error-text: #991b1b;
44 --warning-bg: #fffbeb;
45 --warning-border: #fcd34d;
46 --warning-text: #92400e;
47 --blue-bg: #eff6ff;
48 --blue-border: #bfdbfe;
49 --blue-text: #1e40af;
50 --user-message-text: #2563eb;
51 --link-color: #2563eb;
52 --green-600: #16a34a;
53 --green-700: #15803d;
54 --gray-50: #f9fafb;
55 --gray-100: #f3f4f6;
56 --gray-200: #e5e7eb;
57 --gray-300: #d1d5db;
58 --gray-400: #9ca3af;
59 --gray-500: #6b7280;
60 --gray-600: #4b5563;
61 --gray-700: #374151;
62 --gray-800: #1f2937;
63 --gray-900: #111827;
64}
65
66.dark {
67 --bg-base: #1f2937;
68 --bg-secondary: #111827;
69 --bg-tertiary: #374151;
70 --border: #374151;
71 --text-primary: #f9fafb;
72 --text-secondary: #9ca3af;
73 --text-tertiary: #6b7280;
74 --success-bg: rgba(34, 197, 94, 0.1);
75 --success-border: rgba(34, 197, 94, 0.3);
76 --success-text: #86efac;
77 --error-bg: rgba(239, 68, 68, 0.1);
78 --error-border: rgba(239, 68, 68, 0.3);
79 --error-text: #fca5a5;
80 --warning-bg: rgba(251, 191, 36, 0.15);
81 --warning-border: #fbbf24;
82 --warning-text: #fcd34d;
83 --blue-bg: rgba(59, 130, 246, 0.1);
84 --blue-border: rgba(59, 130, 246, 0.3);
85 --blue-text: #93c5fd;
86 --user-message-text: #60a5fa;
87 --link-color: #60a5fa;
88}
89
90/* Layout */
91.app-container {
92 display: flex;
93 height: 100vh; /* Fallback for older browsers */
94 height: 100dvh; /* Dynamic viewport height - adjusts when mobile browser chrome appears/hides */
95 background: var(--bg-secondary);
96 position: relative;
97 overflow: hidden;
98}
99
100.main-content {
101 flex: 1;
102 display: flex;
103 flex-direction: column;
104 min-width: 0;
105}
106
107.screen-height {
108 height: 100vh; /* Fallback for older browsers */
109 height: 100dvh;
110}
111
112.full-height {
113 height: 100%;
114}
115
116/* Flexbox utilities */
117.flex {
118 display: flex;
119}
120
121.flex-col {
122 flex-direction: column;
123}
124
125.flex-1 {
126 flex: 1;
127}
128
129.items-center {
130 align-items: center;
131}
132
133.justify-center {
134 justify-content: center;
135}
136
137.justify-between {
138 justify-content: space-between;
139}
140
141.space-x-2 > * + * {
142 margin-left: 0.5rem;
143}
144
145.space-x-3 > * + * {
146 margin-left: 0.75rem;
147}
148
149.space-y-2 > * + * {
150 margin-top: 0.5rem;
151}
152
153.space-y-3 > * + * {
154 margin-top: 0.75rem;
155}
156
157.space-y-4 > * + * {
158 margin-top: 1rem;
159}
160
161/* Text */
162.text-center {
163 text-align: center;
164}
165
166.text-sm {
167 font-size: 0.875rem;
168 line-height: 1.5;
169}
170
171.text-xs {
172 font-size: 0.75rem;
173 line-height: 1.4;
174}
175
176.text-lg {
177 font-size: 1.125rem;
178 line-height: 1.6;
179}
180
181.font-medium {
182 font-weight: 500;
183}
184
185.font-semibold {
186 font-weight: 600;
187}
188
189.italic {
190 font-style: italic;
191}
192
193.truncate {
194 overflow: hidden;
195 text-overflow: ellipsis;
196 white-space: nowrap;
197}
198
199.break-words {
200 word-break: break-word;
201}
202
203.break-all {
204 word-break: break-all;
205}
206
207.whitespace-pre-wrap {
208 white-space: pre-wrap;
209}
210
211/* Colors */
212.text-primary {
213 color: var(--text-primary);
214}
215
216.text-secondary {
217 color: var(--text-secondary);
218}
219
220.text-tertiary {
221 color: var(--text-tertiary);
222}
223
224.text-white {
225 color: white;
226}
227
228.text-error {
229 color: var(--error-text);
230}
231
232.text-success {
233 color: var(--success-text);
234}
235
236.text-blue {
237 color: var(--blue-text);
238}
239
240.bg-primary {
241 background: var(--primary);
242}
243
244.bg-base {
245 background: var(--bg-base);
246}
247
248.bg-secondary {
249 background: var(--bg-secondary);
250}
251
252/* Buttons */
253button {
254 font-family: inherit;
255 cursor: pointer;
256 border: none;
257 background: none;
258 padding: 0;
259 color: inherit;
260}
261
262.btn {
263 padding: 0.5rem 0.75rem;
264 border-radius: 0.25rem;
265 transition: background-color 0.2s;
266}
267
268.btn:hover {
269 background: var(--bg-tertiary);
270}
271
272.btn:disabled {
273 opacity: 0.5;
274 cursor: not-allowed;
275}
276
277.btn-primary {
278 padding: 0.5rem 1rem;
279 background: var(--primary);
280 color: white;
281 border-radius: 0.25rem;
282 font-weight: 500;
283 transition: background-color 0.2s;
284 letter-spacing: -0.01em;
285}
286
287.btn-primary:hover:not(:disabled) {
288 background: var(--primary-dark);
289}
290
291.btn-primary:disabled {
292 background: var(--gray-300);
293 cursor: not-allowed;
294}
295
296.dark .btn-primary:disabled {
297 background: var(--gray-600);
298}
299
300.btn-secondary {
301 padding: 0.5rem 1rem;
302 background: var(--bg-secondary);
303 color: var(--text-primary);
304 border: 1px solid var(--border);
305 border-radius: 0.25rem;
306 font-weight: 500;
307 transition: background-color 0.2s;
308 letter-spacing: -0.01em;
309}
310
311.btn-secondary:hover {
312 background: var(--bg-tertiary);
313}
314
315.btn-sm {
316 padding: 0.375rem 0.75rem;
317 font-size: 0.8125rem;
318}
319
320.btn-icon {
321 padding: 0.5rem;
322 border-radius: 0.375rem;
323 display: flex;
324 align-items: center;
325 justify-content: center;
326 transition: background-color 0.2s;
327}
328
329.btn-icon:hover {
330 background: var(--bg-tertiary);
331}
332
333.btn-icon-sm {
334 padding: 0.25rem;
335 border-radius: 0.25rem;
336 display: flex;
337 align-items: center;
338 justify-content: center;
339 transition:
340 background-color 0.2s,
341 opacity 0.2s;
342 opacity: 0.4;
343 color: var(--text-secondary);
344}
345
346.btn-icon-sm:hover {
347 background: var(--gray-200);
348 opacity: 1;
349}
350
351.dark .btn-icon-sm:hover {
352 background: var(--gray-600);
353}
354
355.conversation-item:hover .btn-icon-sm {
356 opacity: 0.7;
357}
358
359.conversation-item.active .btn-icon-sm {
360 color: rgba(255, 255, 255, 0.8);
361 opacity: 0.7;
362}
363
364.conversation-item.active .btn-icon-sm:hover {
365 background: rgba(255, 255, 255, 0.2);
366 color: white;
367 opacity: 1;
368}
369
370.btn-icon-sm.btn-danger:hover {
371 background: var(--red-600);
372 color: white;
373 opacity: 1;
374}
375
376.btn-new {
377 width: 2rem;
378 height: 2rem;
379 background: var(--text-primary);
380 color: var(--bg-base);
381 border-radius: 50%;
382 display: flex;
383 align-items: center;
384 justify-content: center;
385 transition: background-color 0.2s;
386}
387
388.btn-new:hover {
389 background: var(--text-secondary);
390}
391
392/* Header */
393.header {
394 flex: 0 0 auto;
395 background: var(--bg-base);
396 border-bottom: 1px solid var(--border);
397 padding: 0.5rem 1rem;
398 padding-top: calc(0.5rem + env(safe-area-inset-top, 0px));
399 padding-left: max(1rem, env(safe-area-inset-left));
400 padding-right: max(1rem, env(safe-area-inset-right));
401 display: flex;
402 align-items: center;
403 justify-content: space-between;
404 gap: 0.5rem;
405}
406
407.header-left {
408 display: flex;
409 align-items: center;
410 gap: 0.75rem;
411 min-width: 0; /* Allow shrinking below content size */
412 flex: 1 1 auto;
413 overflow: hidden;
414}
415
416.header-title {
417 font-size: 1rem;
418 font-weight: 600;
419 overflow: hidden;
420 text-overflow: ellipsis;
421 white-space: nowrap;
422 letter-spacing: -0.02em;
423 min-width: 0; /* Allow shrinking */
424}
425
426.header-actions {
427 display: flex;
428 align-items: center;
429 gap: 0.5rem;
430 flex-shrink: 0; /* Never shrink the actions */
431}
432
433/* Drawer/Sidebar */
434.drawer {
435 position: fixed;
436 inset: 0 auto 0 0;
437 z-index: 50;
438 width: 20rem;
439 max-width: calc(100vw - 3rem); /* Ensure drawer doesn't fill entire screen on mobile */
440 background: var(--bg-base);
441 border-right: 1px solid var(--border);
442 color: var(--text-primary);
443 display: flex;
444 flex-direction: column;
445 height: 100%;
446 height: 100dvh;
447 transform: translateX(-100%);
448 transition: transform 0.3s ease;
449 padding-top: env(safe-area-inset-top);
450 padding-left: env(safe-area-inset-left);
451 padding-bottom: env(safe-area-inset-bottom);
452}
453
454.drawer.open {
455 transform: translateX(0);
456}
457
458.drawer-header {
459 display: flex;
460 align-items: center;
461 justify-content: space-between;
462 padding: 1rem;
463}
464
465.drawer-header-actions {
466 display: flex;
467 align-items: center;
468 gap: 0.25rem;
469}
470
471.drawer-title {
472 font-size: 1.125rem;
473 font-weight: 600;
474}
475
476.drawer-body {
477 flex: 1;
478 overflow-y: auto;
479 min-height: 0;
480}
481
482.drawer-section {
483 padding: 1rem;
484 border-bottom: 1px solid var(--border);
485}
486
487.drawer-footer {
488 padding: 1rem;
489}
490
491/* Backdrop */
492.backdrop {
493 position: fixed;
494 inset: 0;
495 background: rgba(0, 0, 0, 0.5);
496 z-index: 40;
497}
498
499/* Conversation List */
500.conversation-list {
501 padding: 0.5rem;
502}
503
504.conversation-item {
505 width: 100%;
506 text-align: left;
507 padding: 0.75rem;
508 border-radius: 0.5rem;
509 margin-bottom: 0.25rem;
510 transition: background-color 0.2s;
511 display: flex;
512 flex-direction: row;
513 align-items: center;
514 gap: 0.25rem;
515}
516
517.conversation-item:hover {
518 background: var(--bg-tertiary);
519}
520
521.conversation-item.active {
522 background: var(--primary);
523 color: white;
524}
525
526.conversation-item .conversation-title {
527 font-weight: 500;
528 font-size: 0.875rem;
529 word-break: break-all;
530}
531
532.conversation-item .conversation-meta {
533 display: flex;
534 align-items: center;
535 gap: 0.5rem;
536 font-size: 0.75rem;
537 color: var(--text-tertiary);
538 min-width: 0;
539}
540
541.conversation-item .conversation-date {
542 flex-shrink: 0;
543}
544
545.conversation-item.active .conversation-meta {
546 color: rgba(255, 255, 255, 0.8);
547}
548
549.conversation-item .conversation-cwd {
550 font-family: var(--font-mono);
551 font-size: 0.7rem;
552 opacity: 0.8;
553 overflow: hidden;
554 text-overflow: ellipsis;
555 white-space: nowrap;
556 text-align: left;
557 min-width: 0;
558}
559
560/* Messages */
561.messages-container {
562 flex: 1 1 auto;
563 overflow-y: auto;
564 overflow-x: hidden;
565 -webkit-overflow-scrolling: touch;
566 overscroll-behavior: contain;
567 padding: 1rem;
568 padding-left: max(1rem, env(safe-area-inset-left));
569 padding-right: max(1rem, env(safe-area-inset-right));
570}
571
572.messages-list {
573 display: flex;
574 flex-direction: column;
575 gap: 0.5rem;
576}
577
578.message {
579 display: flex;
580 flex-direction: column;
581}
582
583.message-content {
584 padding: 1rem;
585 border-radius: 0.5rem;
586 overflow-wrap: break-word;
587 word-wrap: break-word;
588 min-width: 0;
589}
590
591.message-user .message-content {
592 margin-left: auto;
593 max-width: 80%;
594 color: var(--user-message-text);
595}
596
597.message-agent .message-content,
598.message-tool .message-content {
599 margin-right: auto;
600 max-width: 100%;
601 color: var(--text-primary);
602}
603
604.thinking-indicator {
605 display: inline-flex;
606 align-items: center;
607 gap: 0.25rem;
608 color: var(--text-secondary);
609 font-size: 0.875rem;
610 margin: 0.25rem 0 0.75rem 0;
611 padding-left: 0.5rem;
612}
613
614.thinking-dots {
615 display: inline-flex;
616 gap: 0.2rem;
617 font-size: 1.25rem;
618 letter-spacing: 0.15rem;
619 color: var(--blue-text);
620}
621
622.thinking-dots span {
623 animation: thinking-dot 1.2s infinite ease-in-out;
624 opacity: 0.25;
625}
626
627.thinking-dots span:nth-child(2) {
628 animation-delay: 0.2s;
629}
630
631.thinking-dots span:nth-child(3) {
632 animation-delay: 0.4s;
633}
634
635@keyframes thinking-dot {
636 0%,
637 80%,
638 100% {
639 opacity: 0.25;
640 transform: translateY(0);
641 }
642 40% {
643 opacity: 1;
644 transform: translateY(-0.2rem);
645 }
646}
647
648.message-error .message-content {
649 margin-right: auto;
650 max-width: 100%;
651 background: var(--error-bg);
652 border: 2px solid var(--error-border);
653 color: var(--error-text);
654}
655
656/* Tool Display */
657.tool-use {
658 background: var(--blue-bg);
659 border: 1px solid var(--blue-border);
660 border-radius: 0.5rem;
661 padding: 0.75rem;
662 margin: 0.5rem 0;
663}
664
665.tool-header {
666 display: flex;
667 align-items: center;
668 gap: 0.5rem;
669 margin-bottom: 0.5rem;
670}
671
672.tool-name {
673 font-weight: 500;
674 color: var(--blue-text);
675}
676
677.tool-input {
678 font-size: 0.875rem;
679 font-family: monospace;
680 background: var(--gray-100);
681 border-radius: 0.25rem;
682 padding: 0.5rem;
683 overflow-wrap: break-word;
684 word-break: break-all;
685 white-space: pre-wrap;
686}
687
688.dark .tool-input {
689 background: var(--gray-800);
690}
691
692.tool-result-details {
693 border: 1px solid var(--border);
694 border-radius: 0.5rem;
695 margin: 0.5rem 0;
696}
697
698.tool-result-details.error {
699 border-color: var(--error-border);
700}
701
702.tool-result-summary {
703 cursor: pointer;
704 padding: 0.5rem 0.75rem;
705 border-radius: 0.5rem;
706 transition: background-color 0.2s;
707 background: var(--bg-tertiary);
708}
709
710.tool-result-summary:hover {
711 background: var(--bg-secondary);
712}
713
714.tool-result-details.error .tool-result-summary {
715 background: var(--error-bg);
716 color: var(--error-text);
717}
718
719.tool-result-content {
720 padding: 0.75rem;
721 padding-top: 0;
722}
723
724.tool-result-section {
725 background: var(--blue-bg);
726 border: 1px solid var(--blue-border);
727 border-radius: 0.25rem;
728 padding: 0.5rem;
729 margin-top: 0.75rem;
730}
731
732.tool-result-section.output {
733 background: var(--success-bg);
734 border-color: var(--success-border);
735}
736
737.tool-result-section.error.output {
738 background: var(--error-bg);
739 border-color: var(--error-border);
740}
741
742.tool-result-label {
743 font-size: 0.75rem;
744 font-weight: 500;
745 margin-bottom: 0.25rem;
746 color: var(--blue-text);
747}
748
749.tool-result-section.output .tool-result-label {
750 color: var(--success-text);
751}
752
753.tool-result-section.error.output .tool-result-label {
754 color: var(--error-text);
755}
756
757.tool-result-data {
758 font-size: 0.875rem;
759 font-family: monospace;
760 overflow-wrap: break-word;
761 word-break: break-all;
762 white-space: pre-wrap;
763}
764
765.tool-result-meta {
766 display: flex;
767 align-items: center;
768 justify-content: space-between;
769}
770
771.tool-result-status {
772 font-size: 0.75rem;
773}
774
775.tool-result-status.success {
776 color: var(--success-text);
777}
778
779.tool-result-status.error {
780 color: var(--error-text);
781}
782
783.tool-result-time {
784 font-size: 0.75rem;
785 color: var(--text-tertiary);
786}
787
788/* Tool running state */
789.tool-running {
790 background: var(--blue-bg);
791 border: 1px solid var(--blue-border);
792 border-radius: 0.5rem;
793 padding: 0.75rem;
794 margin: 0.5rem 0;
795}
796
797.tool-running-header {
798 display: flex;
799 align-items: center;
800 gap: 0.5rem;
801 margin-bottom: 0.5rem;
802}
803
804.tool-status-running {
805 font-size: 0.875rem;
806 color: var(--text-secondary);
807 font-style: italic;
808 animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
809}
810
811@keyframes pulse {
812 0%,
813 100% {
814 opacity: 1;
815 }
816 50% {
817 opacity: 0.5;
818 }
819}
820
821/* Tool Component (shared styles for all tools) */
822.tool {
823 background: var(--gray-100);
824 border-radius: 0.5rem;
825 margin: 0.5rem 0;
826 width: 100%;
827}
828
829.dark .tool {
830 background: var(--gray-800);
831}
832
833.tool-header {
834 display: flex;
835 align-items: center;
836 justify-content: space-between;
837 padding: 0.75rem 1rem;
838 cursor: pointer;
839 user-select: none;
840}
841
842.tool-header:hover {
843 background: rgba(0, 0, 0, 0.02);
844 border-radius: 0.5rem;
845}
846
847.dark .tool-header:hover {
848 background: rgba(255, 255, 255, 0.02);
849}
850
851.tool-summary {
852 display: flex;
853 align-items: center;
854 gap: 0.5rem;
855 flex: 1;
856 min-width: 0;
857}
858
859.tool-emoji {
860 font-size: 1rem;
861 flex-shrink: 0;
862}
863
864.tool-emoji.running {
865}
866
867.tool-command {
868 font-family: var(--font-mono);
869 font-size: 0.875rem;
870 color: var(--text-primary);
871 overflow: hidden;
872 text-overflow: ellipsis;
873 white-space: nowrap;
874}
875
876.tool-running {
877 font-size: 0.75rem;
878 color: var(--text-secondary);
879 font-style: italic;
880 flex-shrink: 0;
881 animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
882}
883
884.tool-success {
885 color: var(--success-text);
886 font-size: 0.875rem;
887 flex-shrink: 0;
888}
889
890.tool-error {
891 color: var(--error-text);
892 font-size: 0.875rem;
893 flex-shrink: 0;
894}
895
896.tool-toggle {
897 background: none;
898 border: none;
899 cursor: pointer;
900 padding: 0.25rem;
901 display: flex;
902 align-items: center;
903 justify-content: center;
904 color: var(--text-secondary);
905 flex-shrink: 0;
906}
907
908.tool-toggle:hover {
909 color: var(--text-primary);
910}
911
912.tool-details {
913 padding: 0 1rem 0.75rem 1rem;
914 display: flex;
915 flex-direction: column;
916 gap: 0.75rem;
917}
918
919.tool-section {
920 display: flex;
921 flex-direction: column;
922 gap: 0.5rem;
923}
924
925.tool-label {
926 font-size: 0.75rem;
927 font-weight: 500;
928 color: var(--text-secondary);
929 display: flex;
930 align-items: center;
931 gap: 0.5rem;
932}
933
934.tool-time {
935 font-size: 0.75rem;
936 color: var(--text-tertiary);
937 font-weight: normal;
938}
939
940.tool-code {
941 font-family: var(--font-mono);
942 font-size: 0.875rem;
943 background: var(--bg-base);
944 border: 1px solid var(--border);
945 border-radius: 0.25rem;
946 padding: 0.75rem;
947 margin: 0;
948 overflow-x: auto;
949 white-space: pre-wrap;
950 word-break: break-word;
951 color: var(--text-primary);
952}
953
954.tool-code.error {
955 background: var(--error-bg);
956 border-color: var(--error-border);
957 color: var(--error-text);
958}
959
960/* Bash Tool Component - uses shared tool styles */
961.bash-tool {
962 /* Alias for backwards compatibility */
963 background: var(--gray-100);
964 border-radius: 0.5rem;
965 margin: 0.5rem 0;
966 width: 100%;
967}
968
969.dark .bash-tool {
970 background: var(--gray-800);
971}
972
973.bash-tool-header {
974 display: flex;
975 align-items: center;
976 justify-content: space-between;
977 padding: 0.75rem 1rem;
978 cursor: pointer;
979 user-select: none;
980}
981
982.bash-tool-header:hover {
983 background: rgba(0, 0, 0, 0.02);
984 border-radius: 0.5rem;
985}
986
987.dark .bash-tool-header:hover {
988 background: rgba(255, 255, 255, 0.02);
989}
990
991.bash-tool-summary {
992 display: flex;
993 align-items: center;
994 gap: 0.5rem;
995 flex: 1;
996 min-width: 0;
997}
998
999.bash-tool-emoji {
1000 font-size: 1rem;
1001 flex-shrink: 0;
1002}
1003
1004.bash-tool-emoji.running {
1005}
1006
1007.bash-tool-command {
1008 font-family: var(--font-mono);
1009 font-size: 0.875rem;
1010 color: var(--text-primary);
1011 overflow: hidden;
1012 text-overflow: ellipsis;
1013 white-space: nowrap;
1014 flex-shrink: 1;
1015 min-width: 0;
1016}
1017
1018.bash-tool-cwd {
1019 font-family: var(--font-mono);
1020 font-size: 0.75rem;
1021 color: var(--text-tertiary);
1022 white-space: nowrap;
1023 overflow: hidden;
1024 text-overflow: ellipsis;
1025 flex-shrink: 0;
1026 max-width: 30%;
1027}
1028
1029.bash-tool-running {
1030 font-size: 0.75rem;
1031 color: var(--text-secondary);
1032 font-style: italic;
1033 flex-shrink: 0;
1034 animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
1035}
1036
1037.bash-tool-success {
1038 color: var(--success-text);
1039 font-size: 0.875rem;
1040 flex-shrink: 0;
1041}
1042
1043.bash-tool-error {
1044 color: var(--error-text);
1045 font-size: 0.875rem;
1046 flex-shrink: 0;
1047}
1048
1049.bash-tool-cancelled {
1050 color: var(--error-text);
1051 font-size: 0.875rem;
1052 flex-shrink: 0;
1053}
1054
1055.bash-tool-toggle {
1056 background: none;
1057 border: none;
1058 cursor: pointer;
1059 padding: 0.25rem;
1060 display: flex;
1061 align-items: center;
1062 justify-content: center;
1063 color: var(--text-secondary);
1064 flex-shrink: 0;
1065}
1066
1067.bash-tool-toggle:hover {
1068 color: var(--text-primary);
1069}
1070
1071.bash-tool-details {
1072 padding: 0 1rem 0.75rem 1rem;
1073 display: flex;
1074 flex-direction: column;
1075 gap: 0.75rem;
1076}
1077
1078.bash-tool-section {
1079 display: flex;
1080 flex-direction: column;
1081 gap: 0.5rem;
1082}
1083
1084.bash-tool-label {
1085 font-size: 0.75rem;
1086 font-weight: 500;
1087 color: var(--text-secondary);
1088 display: flex;
1089 align-items: center;
1090 gap: 0.5rem;
1091}
1092
1093.bash-tool-time {
1094 font-size: 0.75rem;
1095 color: var(--text-tertiary);
1096 font-weight: normal;
1097}
1098
1099.bash-tool-code {
1100 font-family: var(--font-mono);
1101 font-size: 0.875rem;
1102 background: var(--bg-base);
1103 border: 1px solid var(--border);
1104 border-radius: 0.25rem;
1105 padding: 0.75rem;
1106 margin: 0;
1107 overflow-x: auto;
1108 white-space: pre-wrap;
1109 word-break: break-word;
1110 color: var(--text-primary);
1111}
1112
1113.bash-tool-code.error {
1114 background: var(--error-bg);
1115 border-color: var(--error-border);
1116 color: var(--error-text);
1117}
1118
1119/* Patch Tool */
1120.patch-tool {
1121 background: var(--gray-100);
1122 border-radius: 0.5rem;
1123 margin: 0.5rem 0;
1124 width: 100%;
1125 /* Performance: isolate layout/paint for each patch tool */
1126 contain: layout style;
1127}
1128
1129.dark .patch-tool {
1130 background: var(--gray-800);
1131}
1132
1133.patch-tool-header {
1134 display: flex;
1135 align-items: center;
1136 justify-content: space-between;
1137 padding: 0.75rem 1rem;
1138 cursor: pointer;
1139 user-select: none;
1140}
1141
1142.patch-tool-header:hover {
1143 background: rgba(0, 0, 0, 0.02);
1144 border-radius: 0.5rem;
1145}
1146
1147.dark .patch-tool-header:hover {
1148 background: rgba(255, 255, 255, 0.02);
1149}
1150
1151.patch-tool-summary {
1152 display: flex;
1153 align-items: center;
1154 gap: 0.5rem;
1155 flex: 1;
1156 min-width: 0;
1157}
1158
1159.patch-tool-emoji {
1160 font-size: 1rem;
1161 flex-shrink: 0;
1162}
1163
1164.patch-tool-emoji.running {
1165}
1166
1167.patch-tool-filename {
1168 font-family: var(--font-mono);
1169 font-size: 0.875rem;
1170 color: var(--text-primary);
1171 overflow: hidden;
1172 text-overflow: ellipsis;
1173 white-space: nowrap;
1174 font-weight: 500;
1175}
1176
1177.patch-tool-running {
1178 font-size: 0.75rem;
1179 color: var(--text-secondary);
1180 font-style: italic;
1181 flex-shrink: 0;
1182 animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
1183}
1184
1185.patch-tool-success {
1186 color: var(--success-text);
1187 font-size: 0.875rem;
1188 flex-shrink: 0;
1189}
1190
1191.patch-tool-error {
1192 color: var(--text-secondary);
1193 font-size: 0.875rem;
1194 flex-shrink: 0;
1195}
1196
1197.patch-tool-header-controls {
1198 display: flex;
1199 align-items: center;
1200 gap: 0.25rem;
1201 flex-shrink: 0;
1202}
1203
1204.patch-tool-toggle {
1205 background: none;
1206 border: none;
1207 cursor: pointer;
1208 padding: 0.25rem;
1209 display: flex;
1210 align-items: center;
1211 justify-content: center;
1212 color: var(--text-secondary);
1213 flex-shrink: 0;
1214}
1215
1216.patch-tool-toggle:hover {
1217 color: var(--text-primary);
1218}
1219
1220.patch-tool-diff-mode-toggle {
1221 background: none;
1222 border: 1px solid var(--border);
1223 border-radius: 0.25rem;
1224 cursor: pointer;
1225 padding: 0.25rem;
1226 display: flex;
1227 align-items: center;
1228 justify-content: center;
1229 color: var(--text-secondary);
1230 flex-shrink: 0;
1231 transition: all 0.15s ease;
1232}
1233
1234.patch-tool-diff-mode-toggle:hover {
1235 color: var(--text-primary);
1236 background: var(--bg-secondary);
1237 border-color: var(--text-tertiary);
1238}
1239
1240.patch-tool-details {
1241 padding: 0 1rem 0.75rem 1rem;
1242 display: flex;
1243 flex-direction: column;
1244 gap: 0.75rem;
1245}
1246
1247.patch-tool-section {
1248 display: flex;
1249 flex-direction: column;
1250 gap: 0.5rem;
1251}
1252
1253.patch-tool-label {
1254 font-size: 0.75rem;
1255 font-weight: 500;
1256 color: var(--text-secondary);
1257 display: flex;
1258 align-items: center;
1259 justify-content: space-between;
1260}
1261
1262.patch-tool-time {
1263 font-size: 0.75rem;
1264 color: var(--text-tertiary);
1265 font-weight: normal;
1266}
1267
1268.patch-tool-error-message {
1269 font-family: var(--font-mono);
1270 font-size: 0.875rem;
1271 background: var(--bg-tertiary);
1272 border: 1px solid var(--border);
1273 border-radius: 0.25rem;
1274 padding: 0.75rem;
1275 margin: 0;
1276 overflow-x: auto;
1277 white-space: pre-wrap;
1278 word-break: break-word;
1279 color: var(--text-secondary);
1280}
1281
1282/* Patch Tool Simple Diff View */
1283.patch-tool-diff {
1284 font-family: var(--font-mono);
1285 font-size: 0.875rem;
1286 background: var(--bg-base);
1287 border: 1px solid var(--border);
1288 border-radius: 0.25rem;
1289 padding: 0.75rem;
1290 margin: 0;
1291 overflow-x: auto;
1292 line-height: 1.4;
1293}
1294
1295.patch-diff-line {
1296 white-space: pre;
1297 display: block;
1298}
1299
1300.patch-diff-addition {
1301 background: rgba(34, 197, 94, 0.1);
1302 color: #16a34a;
1303}
1304
1305.dark .patch-diff-addition {
1306 background: rgba(34, 197, 94, 0.15);
1307 color: #86efac;
1308}
1309
1310.patch-diff-deletion {
1311 background: rgba(239, 68, 68, 0.1);
1312 color: #dc2626;
1313}
1314
1315.dark .patch-diff-deletion {
1316 background: rgba(239, 68, 68, 0.15);
1317 color: #fca5a5;
1318}
1319
1320.patch-diff-hunk {
1321 color: var(--text-secondary);
1322 background: var(--bg-tertiary);
1323 font-weight: 500;
1324}
1325
1326.patch-diff-header {
1327 color: var(--text-tertiary);
1328 font-style: italic;
1329}
1330
1331/* Patch Tool Diffs Container */
1332.patch-tool-diffs-container {
1333 border-radius: 0.25rem;
1334 overflow: hidden;
1335 font-size: 0.8125rem;
1336 /* Performance: allow browser to skip rendering off-screen diffs */
1337 content-visibility: auto;
1338 contain-intrinsic-size: auto 200px;
1339}
1340
1341/* Target the diffs-container custom element from @pierre/diffs */
1342.patch-tool-diffs-container diffs-container {
1343 display: block;
1344 contain: content;
1345}
1346
1347/* Screenshot Tool */
1348.screenshot-tool {
1349 background: var(--gray-100);
1350 border-radius: 0.5rem;
1351 margin: 0.5rem 0;
1352 width: 100%;
1353}
1354
1355.dark .screenshot-tool {
1356 background: var(--gray-800);
1357}
1358
1359.screenshot-tool-header {
1360 display: flex;
1361 align-items: center;
1362 justify-content: space-between;
1363 padding: 0.75rem 1rem;
1364 cursor: pointer;
1365 user-select: none;
1366}
1367
1368.screenshot-tool-header:hover {
1369 background: rgba(0, 0, 0, 0.02);
1370 border-radius: 0.5rem;
1371}
1372
1373.dark .screenshot-tool-header:hover {
1374 background: rgba(255, 255, 255, 0.02);
1375}
1376
1377.screenshot-tool-summary {
1378 display: flex;
1379 align-items: center;
1380 gap: 0.5rem;
1381 flex: 1;
1382 min-width: 0;
1383}
1384
1385.screenshot-tool-emoji {
1386 font-size: 1rem;
1387 flex-shrink: 0;
1388}
1389
1390.screenshot-tool-emoji.running {
1391}
1392
1393.screenshot-tool-filename {
1394 font-family: var(--font-mono);
1395 font-size: 0.875rem;
1396 color: var(--text-primary);
1397 overflow: hidden;
1398 text-overflow: ellipsis;
1399 white-space: nowrap;
1400 font-weight: 500;
1401}
1402
1403.screenshot-tool-running {
1404 font-size: 0.75rem;
1405 color: var(--text-secondary);
1406 font-style: italic;
1407 flex-shrink: 0;
1408 animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
1409}
1410
1411.screenshot-tool-success {
1412 color: var(--success-text);
1413 font-size: 0.875rem;
1414 flex-shrink: 0;
1415}
1416
1417.screenshot-tool-error {
1418 color: var(--error-text);
1419 font-size: 0.875rem;
1420 flex-shrink: 0;
1421}
1422
1423.screenshot-tool-toggle {
1424 background: none;
1425 border: none;
1426 cursor: pointer;
1427 padding: 0.25rem;
1428 display: flex;
1429 align-items: center;
1430 justify-content: center;
1431 color: var(--text-secondary);
1432 flex-shrink: 0;
1433}
1434
1435.screenshot-tool-toggle:hover {
1436 color: var(--text-primary);
1437}
1438
1439.screenshot-tool-details {
1440 padding: 0 1rem 0.75rem 1rem;
1441 display: flex;
1442 flex-direction: column;
1443 gap: 0.75rem;
1444}
1445
1446.screenshot-tool-section {
1447 display: flex;
1448 flex-direction: column;
1449 gap: 0.5rem;
1450}
1451
1452.screenshot-tool-label {
1453 font-size: 0.75rem;
1454 font-weight: 500;
1455 color: var(--text-secondary);
1456 display: flex;
1457 align-items: center;
1458 justify-content: space-between;
1459}
1460
1461.screenshot-tool-time {
1462 font-size: 0.75rem;
1463 color: var(--text-tertiary);
1464 font-weight: normal;
1465}
1466
1467.screenshot-tool-image-container {
1468 border: 1px solid var(--border);
1469 border-radius: 0.25rem;
1470 overflow: hidden;
1471 background: var(--bg-base);
1472 width: fit-content;
1473 max-width: 100%;
1474}
1475
1476.screenshot-tool-image-container a {
1477 display: block;
1478}
1479
1480.screenshot-tool-image-container img {
1481 display: block;
1482 border-radius: 0.25rem;
1483}
1484
1485.screenshot-tool-error-message {
1486 font-family: var(--font-mono);
1487 font-size: 0.875rem;
1488 background: var(--error-bg);
1489 border: 1px solid var(--error-border);
1490 border-radius: 0.25rem;
1491 padding: 0.75rem;
1492 margin: 0;
1493 overflow-x: auto;
1494 white-space: pre-wrap;
1495 word-break: break-word;
1496 color: var(--error-text);
1497}
1498
1499/* Output Iframe Tool */
1500.output-iframe-tool {
1501 background: var(--gray-100);
1502 border-radius: 0.5rem;
1503 margin: 0.5rem 0;
1504 width: 100%;
1505}
1506
1507.dark .output-iframe-tool {
1508 background: var(--gray-800);
1509}
1510
1511.output-iframe-tool-header {
1512 display: flex;
1513 align-items: center;
1514 justify-content: space-between;
1515 padding: 0.75rem 1rem;
1516 cursor: pointer;
1517 user-select: none;
1518}
1519
1520.output-iframe-tool-header:hover {
1521 background: rgba(0, 0, 0, 0.02);
1522 border-radius: 0.5rem;
1523}
1524
1525.dark .output-iframe-tool-header:hover {
1526 background: rgba(255, 255, 255, 0.02);
1527}
1528
1529.output-iframe-tool-summary {
1530 display: flex;
1531 align-items: center;
1532 gap: 0.5rem;
1533 flex: 1;
1534 min-width: 0;
1535}
1536
1537.output-iframe-tool-emoji {
1538 font-size: 1rem;
1539 flex-shrink: 0;
1540}
1541
1542.output-iframe-tool-emoji.running {
1543}
1544
1545.output-iframe-tool-title {
1546 font-family: var(--font-mono);
1547 font-size: 0.875rem;
1548 color: var(--text-primary);
1549 overflow: hidden;
1550 text-overflow: ellipsis;
1551 white-space: nowrap;
1552 font-weight: 500;
1553}
1554
1555.output-iframe-tool-success {
1556 color: var(--success-text);
1557 font-weight: 600;
1558 margin-left: 0.5rem;
1559}
1560
1561.output-iframe-tool-error {
1562 color: var(--error-text);
1563 font-weight: 600;
1564 margin-left: 0.5rem;
1565}
1566
1567.output-iframe-tool-actions {
1568 display: flex;
1569 align-items: center;
1570 gap: 0.25rem;
1571 flex-shrink: 0;
1572}
1573
1574.output-iframe-tool-open-btn,
1575.output-iframe-tool-download-btn {
1576 background: none;
1577 border: none;
1578 padding: 0.25rem;
1579 cursor: pointer;
1580 color: var(--text-secondary);
1581 display: flex;
1582 align-items: center;
1583 justify-content: center;
1584 border-radius: 4px;
1585}
1586
1587.output-iframe-tool-open-btn:hover,
1588.output-iframe-tool-download-btn:hover {
1589 color: var(--text-primary);
1590 background: var(--gray-200);
1591}
1592
1593.dark .output-iframe-tool-open-btn:hover,
1594.dark .output-iframe-tool-download-btn:hover {
1595 background: var(--gray-700);
1596}
1597
1598.output-iframe-tool-toggle {
1599 background: none;
1600 border: none;
1601 padding: 0.25rem;
1602 cursor: pointer;
1603 color: var(--text-secondary);
1604 display: flex;
1605 align-items: center;
1606 justify-content: center;
1607 flex-shrink: 0;
1608}
1609
1610.output-iframe-tool-toggle:hover {
1611 color: var(--text-primary);
1612}
1613
1614.output-iframe-tool-details {
1615 padding: 0 1rem 1rem 1rem;
1616}
1617
1618.output-iframe-tool-section {
1619 margin-top: 0.5rem;
1620}
1621
1622.output-iframe-tool-label {
1623 font-size: 0.75rem;
1624 font-weight: 500;
1625 color: var(--text-secondary);
1626 margin-bottom: 0.5rem;
1627 display: flex;
1628 justify-content: space-between;
1629 align-items: center;
1630}
1631
1632.output-iframe-tool-time {
1633 font-family: var(--font-mono);
1634 font-size: 0.75rem;
1635 color: var(--text-tertiary);
1636}
1637
1638.output-iframe-container {
1639 width: 100%;
1640 overflow: hidden;
1641 border-radius: 0.25rem;
1642}
1643
1644.output-iframe-container iframe {
1645 display: block;
1646}
1647
1648.output-iframe-tool-error-message {
1649 font-family: var(--font-mono);
1650 font-size: 0.875rem;
1651 background: var(--error-bg);
1652 border: 1px solid var(--error-border);
1653 border-radius: 0.25rem;
1654 padding: 0.75rem;
1655 margin: 0;
1656 overflow-x: auto;
1657 white-space: pre-wrap;
1658 word-break: break-word;
1659 color: var(--error-text);
1660}
1661
1662/* Message Input */
1663.message-input-container {
1664 flex: 0 0 auto;
1665 background: var(--bg-base);
1666 border-top: 1px solid var(--border);
1667 padding: 1rem;
1668 padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
1669 padding-left: max(1rem, env(safe-area-inset-left));
1670 padding-right: max(1rem, env(safe-area-inset-right));
1671}
1672
1673.message-input-form {
1674 display: flex;
1675 align-items: flex-end;
1676 gap: 0.5rem;
1677 max-width: 800px;
1678 margin: 0 auto;
1679}
1680
1681.message-textarea {
1682 flex: 1;
1683 min-height: 46px;
1684 max-height: 200px;
1685 padding: 0.625rem 1rem;
1686 border: 1.5px solid var(--border);
1687 border-radius: 4px;
1688 resize: none;
1689 background: var(--bg-base);
1690 color: var(--text-primary);
1691 font-family: inherit;
1692 font-size: 16px; /* Must be 16px+ to prevent iOS zoom on focus */
1693 line-height: 1.5;
1694 transition:
1695 border-color 0.2s,
1696 box-shadow 0.2s;
1697}
1698
1699.message-textarea:focus {
1700 outline: none;
1701 border-color: var(--primary);
1702 box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
1703}
1704
1705.message-textarea:disabled {
1706 opacity: 0.5;
1707 cursor: not-allowed;
1708}
1709
1710.message-send-btn svg {
1711 transform: rotate(-90deg);
1712}
1713
1714.message-textarea::placeholder {
1715 color: var(--text-tertiary);
1716}
1717
1718.message-send-btn {
1719 flex-shrink: 0;
1720 width: 36px;
1721 height: 36px;
1722 margin-bottom: 0.25rem;
1723 padding: 0;
1724 background: var(--primary);
1725 color: white;
1726 border: none;
1727 border-radius: 50%;
1728 display: flex;
1729 align-items: center;
1730 justify-content: center;
1731 transition:
1732 background-color 0.2s,
1733 transform 0.1s;
1734 cursor: pointer;
1735}
1736
1737.message-send-btn:hover:not(:disabled) {
1738 background: var(--primary-dark);
1739 transform: scale(1.05);
1740}
1741
1742.message-send-btn:active:not(:disabled) {
1743 transform: scale(0.95);
1744}
1745
1746.message-send-btn:disabled {
1747 background: var(--gray-300);
1748 cursor: not-allowed;
1749 opacity: 0.6;
1750}
1751
1752.dark .message-send-btn:disabled {
1753 background: var(--gray-600);
1754}
1755
1756/* Attach file button */
1757.message-attach-btn {
1758 flex-shrink: 0;
1759 width: 36px;
1760 height: 36px;
1761 margin-bottom: 0.25rem;
1762 padding: 0;
1763 background: transparent;
1764 color: var(--text-secondary);
1765 border: none;
1766 border-radius: 50%;
1767 display: flex;
1768 align-items: center;
1769 justify-content: center;
1770 transition:
1771 background-color 0.2s,
1772 color 0.2s,
1773 transform 0.1s;
1774 cursor: pointer;
1775}
1776
1777.message-attach-btn:hover:not(:disabled) {
1778 background: var(--gray-100);
1779 color: var(--text-primary);
1780}
1781
1782.dark .message-attach-btn:hover:not(:disabled) {
1783 background: var(--gray-700);
1784}
1785
1786.message-attach-btn:active:not(:disabled) {
1787 transform: scale(0.95);
1788}
1789
1790.message-attach-btn:disabled {
1791 cursor: not-allowed;
1792 opacity: 0.4;
1793}
1794
1795/* Voice input button */
1796.message-voice-btn {
1797 flex-shrink: 0;
1798 width: 36px;
1799 height: 36px;
1800 margin-bottom: 0.25rem;
1801 padding: 0;
1802 background: transparent;
1803 color: var(--text-secondary);
1804 border: none;
1805 border-radius: 50%;
1806 display: flex;
1807 align-items: center;
1808 justify-content: center;
1809 transition:
1810 background-color 0.2s,
1811 color 0.2s,
1812 transform 0.1s;
1813 cursor: pointer;
1814}
1815
1816.message-voice-btn:hover:not(:disabled):not(.listening) {
1817 background: var(--gray-100);
1818 color: var(--text-primary);
1819}
1820
1821.dark .message-voice-btn:hover:not(:disabled):not(.listening) {
1822 background: var(--gray-700);
1823}
1824
1825.message-voice-btn:active:not(:disabled):not(.listening) {
1826 transform: scale(0.95);
1827}
1828
1829.message-voice-btn:disabled {
1830 cursor: not-allowed;
1831 opacity: 0.4;
1832}
1833
1834.message-voice-btn.listening,
1835.message-voice-btn.listening:hover {
1836 background: #dc2626;
1837 color: white;
1838 animation: pulse-voice 1.5s ease-in-out infinite;
1839}
1840
1841.dark .message-voice-btn.listening,
1842.dark .message-voice-btn.listening:hover {
1843 background: #ef4444;
1844 color: white;
1845}
1846
1847@keyframes pulse-voice {
1848 0%,
1849 100% {
1850 transform: scale(1);
1851 }
1852 50% {
1853 transform: scale(1.1);
1854 }
1855}
1856
1857/* Drag and drop styles */
1858.message-input-container {
1859 position: relative;
1860}
1861
1862.message-input-container.drag-over {
1863 border-color: var(--primary);
1864}
1865
1866.message-input-container.shell-mode .message-input-form {
1867 border-color: var(--warning-border);
1868 background: var(--warning-bg);
1869}
1870
1871.message-input-container.shell-mode .message-textarea {
1872 font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
1873 background: transparent;
1874 padding-left: 36px;
1875}
1876
1877.message-input-container.shell-mode .message-textarea::placeholder {
1878 font-family: inherit;
1879}
1880
1881.shell-mode-indicator {
1882 position: absolute;
1883 left: 12px;
1884 top: 50%;
1885 transform: translateY(-50%);
1886 display: flex;
1887 align-items: center;
1888 justify-content: center;
1889 color: var(--warning-text);
1890 pointer-events: none;
1891 z-index: 1;
1892}
1893
1894.drag-overlay {
1895 position: absolute;
1896 inset: 0;
1897 background: rgba(37, 99, 235, 0.1);
1898 border: 2px dashed var(--primary);
1899 border-radius: 4px;
1900 display: flex;
1901 align-items: center;
1902 justify-content: center;
1903 z-index: 10;
1904 pointer-events: none;
1905}
1906
1907.drag-overlay-content {
1908 background: var(--primary);
1909 color: white;
1910 padding: 0.5rem 1rem;
1911 border-radius: 4px;
1912 font-size: 0.875rem;
1913 font-weight: 500;
1914}
1915
1916/* Modal */
1917.modal-overlay {
1918 position: fixed;
1919 inset: 0;
1920 background: rgba(0, 0, 0, 0.5);
1921 z-index: 50;
1922 display: flex;
1923 align-items: center;
1924 justify-content: center;
1925 padding: 1rem;
1926}
1927
1928.modal {
1929 background: var(--bg-base);
1930 border-radius: 0.5rem;
1931 box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
1932 max-width: 28rem;
1933 width: 100%;
1934 max-height: 80vh;
1935 overflow: hidden;
1936}
1937
1938.modal.modal-wide {
1939 max-width: 40rem;
1940}
1941
1942.modal-header {
1943 display: flex;
1944 align-items: center;
1945 justify-content: space-between;
1946 padding: 1rem;
1947 border-bottom: 1px solid var(--border);
1948}
1949
1950.modal-title {
1951 font-size: 1.125rem;
1952 font-weight: 600;
1953}
1954
1955.modal-title-right {
1956 margin-left: auto;
1957 margin-right: 1rem;
1958}
1959
1960.modal-body {
1961 padding: 1rem;
1962 overflow-y: auto;
1963 max-height: calc(80vh - 60px);
1964}
1965
1966/* Form Elements */
1967label {
1968 display: block;
1969 font-size: 0.875rem;
1970 font-weight: 500;
1971 margin-bottom: 0.5rem;
1972}
1973
1974select {
1975 width: 100%;
1976 background: var(--bg-tertiary);
1977 border: 1px solid var(--border);
1978 border-radius: 0.375rem;
1979 padding: 0.5rem 0.75rem;
1980 font-family: inherit;
1981 font-size: 1rem;
1982 color: var(--text-primary);
1983}
1984
1985select:focus {
1986 outline: none;
1987 border-color: var(--primary);
1988 box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
1989}
1990
1991select:disabled {
1992 opacity: 0.5;
1993 cursor: not-allowed;
1994}
1995
1996/* Loading Spinner */
1997.spinner {
1998 width: 2rem;
1999 height: 2rem;
2000 border: 2px solid transparent;
2001 border-top-color: var(--primary);
2002 border-radius: 50%;
2003 animation: spin 0.8s linear infinite;
2004}
2005
2006.spinner-small {
2007 width: 1rem;
2008 height: 1rem;
2009 border-width: 2px;
2010 border-top-color: currentColor;
2011}
2012
2013@keyframes spin {
2014 to {
2015 transform: rotate(360deg);
2016 }
2017}
2018
2019/* Loading/Error States */
2020.loading-container,
2021.error-container {
2022 height: 100vh; /* Fallback for older browsers */
2023 height: 100dvh;
2024 display: flex;
2025 align-items: center;
2026 justify-content: center;
2027}
2028
2029.loading-content,
2030.error-content {
2031 text-align: center;
2032}
2033
2034/* Unified Status Bar */
2035.status-bar {
2036 flex: 0 0 auto;
2037 background: var(--bg-base);
2038 border-top: 1px solid var(--border);
2039 padding: 0.5rem 1rem;
2040 padding-left: max(1rem, env(safe-area-inset-left));
2041 padding-right: max(1rem, env(safe-area-inset-right));
2042 min-height: 2.5rem;
2043 display: flex;
2044 align-items: center;
2045}
2046
2047.status-bar-content {
2048 display: flex;
2049 align-items: center;
2050 justify-content: space-between;
2051 width: 100%;
2052 gap: 0.75rem;
2053}
2054
2055.status-message {
2056 color: var(--text-secondary);
2057 font-size: 0.875rem;
2058 flex: 1;
2059 min-width: 0;
2060}
2061
2062.status-message.status-ready {
2063 color: var(--text-tertiary);
2064}
2065
2066.status-message.status-warning {
2067 color: var(--blue-text);
2068 font-weight: 500;
2069}
2070
2071.status-message.status-error {
2072 color: var(--error-text);
2073 font-weight: 500;
2074}
2075
2076.status-message.status-reconnecting {
2077 color: var(--blue-text);
2078 font-weight: 500;
2079}
2080
2081.reconnecting-dots {
2082 display: inline-block;
2083 animation: reconnecting-pulse 1.5s ease-in-out infinite;
2084}
2085
2086@keyframes reconnecting-pulse {
2087 0%,
2088 100% {
2089 opacity: 0.3;
2090 }
2091 50% {
2092 opacity: 1;
2093 }
2094}
2095
2096.animated-working {
2097 display: inline;
2098}
2099
2100.animated-working .bold-letter {
2101 font-weight: 700;
2102}
2103
2104.status-button {
2105 padding: 0.375rem 0.875rem;
2106 border-radius: 0.375rem;
2107 font-size: 0.875rem;
2108 font-weight: 500;
2109 transition: all 0.2s;
2110 display: flex;
2111 align-items: center;
2112 gap: 0.375rem;
2113 white-space: nowrap;
2114 border: none;
2115 cursor: pointer;
2116}
2117
2118.status-button svg {
2119 width: 0.875rem;
2120 height: 0.875rem;
2121}
2122
2123.status-button-primary {
2124 background: var(--primary);
2125 color: white;
2126}
2127
2128.status-button-primary:hover {
2129 background: var(--primary-dark);
2130}
2131
2132.status-button-cancel {
2133 background: var(--error-bg);
2134 color: var(--error-text);
2135 border: 1px solid var(--error-border);
2136}
2137
2138.status-button-cancel:hover:not(:disabled) {
2139 background: var(--error-text);
2140 color: white;
2141}
2142
2143.status-button-cancel:disabled {
2144 opacity: 0.6;
2145 cursor: not-allowed;
2146}
2147
2148.status-button-text {
2149 background: transparent;
2150 color: var(--text-secondary);
2151 padding: 0.25rem;
2152}
2153
2154.status-button-text:hover {
2155 background: var(--bg-tertiary);
2156 color: var(--text-primary);
2157}
2158
2159/* Legacy disconnect/error banner classes (kept for compatibility but unused) */
2160.disconnect-banner {
2161 background: var(--gray-100);
2162 border-top: 1px solid var(--border);
2163 padding: 0.5rem 1rem;
2164}
2165
2166.dark .disconnect-banner {
2167 background: var(--gray-800);
2168}
2169
2170.disconnect-banner-content {
2171 display: flex;
2172 align-items: center;
2173 justify-content: center;
2174 gap: 0.75rem;
2175}
2176
2177.disconnect-message {
2178 color: var(--text-secondary);
2179 font-size: 0.875rem;
2180 margin: 0;
2181}
2182
2183.btn-reconnect {
2184 padding: 0.25rem 0.75rem;
2185 background: var(--primary);
2186 color: white;
2187 border-radius: 0.375rem;
2188 font-size: 0.875rem;
2189 font-weight: 500;
2190 transition: background-color 0.2s;
2191}
2192
2193.btn-reconnect:hover {
2194 background: var(--primary-dark);
2195}
2196
2197.error-banner {
2198 background: var(--error-bg);
2199 border-top: 1px solid var(--error-border);
2200 padding: 0.75rem 1rem;
2201}
2202
2203.error-banner-content {
2204 display: flex;
2205 align-items: center;
2206 justify-content: space-between;
2207}
2208
2209.error-message {
2210 color: var(--error-text);
2211 font-size: 0.875rem;
2212}
2213
2214/* Empty State */
2215.empty-state {
2216 display: flex;
2217 align-items: center;
2218 justify-content: center;
2219 height: 100%;
2220 color: var(--text-secondary);
2221}
2222
2223.empty-state-content {
2224 text-align: center;
2225}
2226
2227/* Scrollbar */
2228.scrollable {
2229 scrollbar-width: thin;
2230 scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
2231}
2232
2233.scrollable::-webkit-scrollbar {
2234 width: 6px;
2235}
2236
2237.scrollable::-webkit-scrollbar-track {
2238 background: transparent;
2239}
2240
2241.scrollable::-webkit-scrollbar-thumb {
2242 background-color: rgba(156, 163, 175, 0.5);
2243 border-radius: 3px;
2244}
2245
2246.scrollable::-webkit-scrollbar-thumb:hover {
2247 background-color: rgba(156, 163, 175, 0.8);
2248}
2249
2250/* SVG Icons */
2251svg {
2252 width: 1.25rem;
2253 height: 1.25rem;
2254 display: block;
2255}
2256
2257.icon-sm svg {
2258 width: 1rem;
2259 height: 1rem;
2260}
2261
2262/* Utility Classes */
2263.relative {
2264 position: relative;
2265}
2266
2267.overflow-auto {
2268 overflow: auto;
2269}
2270
2271.overflow-hidden {
2272 overflow: hidden;
2273}
2274
2275.rounded {
2276 border-radius: 0.25rem;
2277}
2278
2279.rounded-lg {
2280 border-radius: 0.5rem;
2281}
2282
2283.border {
2284 border: 1px solid var(--border);
2285}
2286
2287.min-h-0 {
2288 min-height: 0;
2289}
2290
2291/* Overflow Menu */
2292.overflow-menu {
2293 position: absolute;
2294 top: calc(100% + 0.5rem);
2295 right: 0;
2296 background: var(--bg-secondary);
2297 border: 1px solid var(--border);
2298 border-radius: 0.5rem;
2299 box-shadow:
2300 0 4px 6px -1px rgba(0, 0, 0, 0.1),
2301 0 2px 4px -1px rgba(0, 0, 0, 0.06);
2302 min-width: 10rem;
2303 z-index: 50;
2304}
2305
2306.overflow-menu-item {
2307 display: flex;
2308 align-items: center;
2309 width: 100%;
2310 padding: 0.75rem 1rem;
2311 text-align: left;
2312 background: transparent;
2313 border: none;
2314 color: var(--text-primary);
2315 font-size: 0.875rem;
2316 cursor: pointer;
2317 transition: background-color 0.2s;
2318}
2319
2320.overflow-menu-item:hover {
2321 background: var(--bg-hover);
2322}
2323
2324.overflow-menu-item:first-child {
2325 border-top-left-radius: 0.5rem;
2326 border-top-right-radius: 0.5rem;
2327}
2328
2329.overflow-menu-item:last-child {
2330 border-bottom-left-radius: 0.5rem;
2331 border-bottom-right-radius: 0.5rem;
2332}
2333
2334.overflow-menu-divider {
2335 height: 1px;
2336 background: var(--border);
2337 margin: 0.5rem 0;
2338}
2339
2340.theme-toggle-row {
2341 display: flex;
2342 gap: 0.25rem;
2343 padding: 0.5rem;
2344}
2345
2346.theme-toggle-btn {
2347 flex: 1;
2348 display: flex;
2349 align-items: center;
2350 justify-content: center;
2351 padding: 0.5rem;
2352 background: transparent;
2353 border: 1px solid var(--border);
2354 border-radius: 0.375rem;
2355 color: var(--text-secondary);
2356 cursor: pointer;
2357 transition: all 0.15s;
2358}
2359
2360.theme-toggle-btn svg {
2361 width: 1.125rem;
2362 height: 1.125rem;
2363}
2364
2365.theme-toggle-btn:hover {
2366 background: var(--bg-tertiary);
2367 color: var(--text-primary);
2368}
2369
2370.theme-toggle-btn-selected {
2371 background: var(--primary);
2372 border-color: var(--primary);
2373 color: white;
2374}
2375
2376.theme-toggle-btn-selected:hover {
2377 background: var(--primary-dark);
2378 border-color: var(--primary-dark);
2379 color: white;
2380}
2381
2382/* Diff display styling */
2383.diff-display {
2384 font-family: var(--font-mono);
2385 font-size: 0.875rem;
2386 line-height: 1.5;
2387 background: var(--bg-base);
2388 padding: 1rem;
2389 border-radius: 0.25rem;
2390 overflow-x: auto;
2391 white-space: pre;
2392 color: var(--text-primary);
2393}
2394
2395/* Responsive adjustments */
2396@media (min-width: 768px) {
2397 .drawer {
2398 position: static;
2399 transform: translateX(0) !important;
2400 }
2401
2402 .drawer.collapsed {
2403 display: none;
2404 }
2405
2406 .hide-on-desktop {
2407 display: none !important;
2408 }
2409
2410 .show-on-desktop-only {
2411 display: flex !important;
2412 }
2413
2414 .backdrop {
2415 display: none !important;
2416 }
2417}
2418
2419/* Hide desktop-only elements on mobile */
2420@media (max-width: 767px) {
2421 .show-on-desktop-only {
2422 display: none !important;
2423 }
2424}
2425
2426/* Scroll to bottom button */
2427.scroll-to-bottom-button {
2428 position: absolute;
2429 bottom: 1rem;
2430 left: 50%;
2431 transform: translateX(-50%);
2432 background: var(--bg-elevated);
2433 border: 1px solid var(--border);
2434 border-radius: 2rem;
2435 padding: 0.5rem 1rem;
2436 display: flex;
2437 align-items: center;
2438 gap: 0.5rem;
2439 cursor: pointer;
2440 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
2441 transition: all 0.2s ease;
2442 color: var(--text-primary);
2443 font-size: 0.875rem;
2444 z-index: 10;
2445}
2446
2447.scroll-to-bottom-button:hover {
2448 background: var(--bg-hover);
2449 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
2450}
2451
2452.scroll-to-bottom-button:active {
2453 transform: translateX(-50%) scale(0.95);
2454}
2455
2456/* Wrapper for messages area to position scroll-to-bottom button */
2457.messages-area-wrapper {
2458 position: relative;
2459 flex: 1 1 auto;
2460 min-height: 0; /* Important for flex children to shrink properly */
2461 overflow: hidden;
2462}
2463
2464.messages-container {
2465 height: 100%;
2466}
2467
2468/* Status bar configuration controls for empty conversations */
2469.status-bar-config {
2470 display: flex;
2471 align-items: center;
2472 gap: 0.75rem;
2473 width: 100%;
2474}
2475
2476.status-bar-new-conversation {
2477 display: flex;
2478 align-items: center;
2479 justify-content: space-between;
2480 width: 100%;
2481 flex-wrap: wrap;
2482 gap: 0.5rem;
2483}
2484
2485/* On smaller screens, allow the fields to stack vertically */
2486@media (max-width: 600px) {
2487 .status-bar-new-conversation {
2488 flex-direction: column;
2489 align-items: stretch;
2490 }
2491
2492 .status-field {
2493 width: 100%;
2494 }
2495}
2496
2497.status-bar-controls {
2498 display: flex;
2499 align-items: center;
2500 gap: 0.5rem;
2501}
2502
2503/* Flexible containers for status fields that adapt to content */
2504.status-field {
2505 display: flex;
2506 align-items: center;
2507 gap: 0.25rem;
2508 min-width: 0; /* Allow flex items to shrink below content size */
2509}
2510
2511.status-field-label {
2512 font-size: 0.7rem;
2513 color: var(--text-secondary);
2514 flex-shrink: 0;
2515}
2516
2517.status-field-model {
2518 flex: 1 1 auto;
2519 min-width: 150px;
2520 max-width: 300px;
2521}
2522
2523.status-field-cwd {
2524 flex: 1 1 auto;
2525 min-width: 180px;
2526 max-width: 400px;
2527}
2528
2529/* Compact clickable chips for model and cwd */
2530.status-chip {
2531 padding: 0.25rem 0.5rem;
2532 border: 1px solid var(--border);
2533 border-radius: 0.25rem;
2534 background: var(--bg-tertiary);
2535 color: var(--text-primary);
2536 font-size: 0.75rem;
2537 font-family: var(--font-mono);
2538 cursor: pointer;
2539 transition: all 0.2s;
2540 white-space: normal; /* Allow text to wrap */
2541 word-break: break-word; /* Break long words if needed */
2542 overflow-wrap: break-word;
2543 width: 100%;
2544 text-align: left;
2545 box-sizing: border-box;
2546 line-height: 1.3; /* Better line height for multi-line text */
2547 min-height: 1.75rem; /* Minimum height to accommodate wrapped text */
2548}
2549
2550.status-chip:hover:not(:disabled) {
2551 background: var(--bg-secondary);
2552 border-color: var(--blue-text);
2553}
2554
2555.status-chip:disabled {
2556 opacity: 0.5;
2557 cursor: not-allowed;
2558}
2559
2560.status-chip-error {
2561 border-color: var(--red-text, #dc2626);
2562 background: rgba(220, 38, 38, 0.1);
2563}
2564
2565.status-field-error {
2566 position: relative;
2567}
2568
2569.status-input-error {
2570 border-color: var(--red-text, #dc2626);
2571}
2572
2573.status-select {
2574 padding: 0.25rem 0.5rem;
2575 border: 1px solid var(--blue-text);
2576 border-radius: 0.25rem;
2577 background: var(--bg-base);
2578 color: var(--text-primary);
2579 font-size: 0.75rem;
2580 font-family: var(--font-mono);
2581 cursor: pointer;
2582 transition: border-color 0.2s;
2583 width: 100%;
2584 box-sizing: border-box;
2585}
2586
2587.status-select:hover:not(:disabled) {
2588 border-color: var(--blue-text);
2589}
2590
2591.status-select:focus {
2592 outline: none;
2593 border-color: var(--blue-text);
2594 box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
2595}
2596
2597.status-select:disabled {
2598 opacity: 0.5;
2599 cursor: not-allowed;
2600}
2601
2602/* Model Picker Custom Dropdown */
2603.model-picker {
2604 position: relative;
2605 display: inline-block;
2606 width: 100%;
2607}
2608
2609.model-picker-trigger {
2610 display: flex;
2611 align-items: center;
2612 justify-content: space-between;
2613 gap: 0.5rem;
2614 padding: 0.25rem 0.5rem;
2615 border: 1px solid var(--border);
2616 border-radius: 0.25rem;
2617 background: var(--bg-tertiary);
2618 color: var(--text-primary);
2619 font-size: 0.75rem;
2620 font-family: var(--font-mono);
2621 cursor: pointer;
2622 transition: all 0.2s;
2623 width: 100%;
2624 text-align: left;
2625 box-sizing: border-box;
2626 min-height: 1.75rem;
2627}
2628
2629.model-picker-trigger:hover:not(:disabled) {
2630 background: var(--bg-secondary);
2631 border-color: var(--blue-text);
2632}
2633
2634.model-picker-trigger:disabled {
2635 opacity: 0.5;
2636 cursor: not-allowed;
2637}
2638
2639.model-picker-value {
2640 flex: 1;
2641 overflow: hidden;
2642 text-overflow: ellipsis;
2643 white-space: nowrap;
2644}
2645
2646.model-picker-chevron {
2647 flex-shrink: 0;
2648 transition: transform 0.2s;
2649 opacity: 0.6;
2650}
2651
2652.model-picker-chevron.open {
2653 transform: rotate(180deg);
2654}
2655
2656.model-picker-dropdown {
2657 position: absolute;
2658 top: 100%;
2659 left: 0;
2660 right: 0;
2661 margin-top: 2px;
2662 background: var(--bg-secondary);
2663 border: 1px solid var(--border);
2664 border-radius: 0.375rem;
2665 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
2666 z-index: 1000;
2667 max-height: 300px;
2668 overflow: hidden;
2669 display: flex;
2670 flex-direction: column;
2671}
2672
2673.model-picker-dropdown.open-upward {
2674 top: auto;
2675 bottom: 100%;
2676 margin-top: 0;
2677 margin-bottom: 2px;
2678}
2679
2680.model-picker-options {
2681 overflow-y: auto;
2682 max-height: 220px;
2683}
2684
2685.model-picker-option {
2686 display: flex;
2687 align-items: center;
2688 gap: 0.5rem;
2689 width: 100%;
2690 padding: 0.5rem 0.75rem;
2691 border: none;
2692 background: transparent;
2693 color: var(--text-primary);
2694 font-size: 0.8rem;
2695 font-family: var(--font-mono);
2696 cursor: pointer;
2697 text-align: left;
2698 transition: background 0.15s;
2699}
2700
2701.model-picker-option:hover:not(:disabled) {
2702 background: var(--bg-tertiary);
2703}
2704
2705.model-picker-option.selected {
2706 background: var(--bg-tertiary);
2707}
2708
2709.model-picker-option.disabled {
2710 opacity: 0.5;
2711 cursor: not-allowed;
2712}
2713
2714.model-picker-option-content {
2715 flex: 1;
2716 display: flex;
2717 flex-direction: column;
2718 gap: 0.125rem;
2719 min-width: 0;
2720}
2721
2722.model-picker-option-name {
2723 overflow: hidden;
2724 text-overflow: ellipsis;
2725 white-space: nowrap;
2726}
2727
2728.model-picker-option-source {
2729 font-size: 0.65rem;
2730 color: var(--text-secondary);
2731 overflow: hidden;
2732 text-overflow: ellipsis;
2733 white-space: nowrap;
2734}
2735
2736.model-picker-option-badge {
2737 font-size: 0.65rem;
2738 color: var(--text-secondary);
2739 background: var(--bg-base);
2740 padding: 0.125rem 0.375rem;
2741 border-radius: 0.25rem;
2742}
2743
2744.model-picker-option-check {
2745 flex-shrink: 0;
2746 color: var(--green-text);
2747}
2748
2749.model-picker-divider {
2750 height: 1px;
2751 background: var(--border);
2752 margin: 0.25rem 0;
2753}
2754
2755.model-picker-manage {
2756 color: var(--blue-text);
2757}
2758
2759.model-picker-manage:hover {
2760 background: var(--bg-tertiary);
2761}
2762
2763.model-picker-manage svg {
2764 flex-shrink: 0;
2765}
2766
2767.status-input {
2768 padding: 0.25rem 0.5rem;
2769 border: 1px solid var(--blue-text);
2770 border-radius: 0.25rem;
2771 background: var(--bg-base);
2772 color: var(--text-primary);
2773 font-size: 0.75rem;
2774 font-family: var(--font-mono);
2775 transition: border-color 0.2s;
2776 width: 100%;
2777 box-sizing: border-box;
2778}
2779
2780.status-input::placeholder {
2781 color: var(--text-secondary);
2782 opacity: 0.6;
2783}
2784
2785.status-input:hover:not(:disabled) {
2786 border-color: var(--blue-text);
2787}
2788
2789.status-input:focus {
2790 outline: none;
2791 border-color: var(--blue-text);
2792 box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
2793}
2794
2795.status-input:disabled {
2796 opacity: 0.5;
2797 cursor: not-allowed;
2798}
2799
2800/* Responsive adjustments for status bar controls */
2801@media (max-width: 768px) {
2802 .status-bar-config {
2803 flex-wrap: wrap;
2804 gap: 0.5rem;
2805 }
2806
2807 .status-bar-controls {
2808 flex-wrap: wrap;
2809 gap: 0.5rem;
2810 }
2811
2812 .status-field-model {
2813 min-width: 120px;
2814 max-width: 200px;
2815 }
2816
2817 .status-field-cwd {
2818 min-width: 140px;
2819 max-width: 250px;
2820 }
2821}
2822
2823/* Directory Picker Modal */
2824.directory-picker-modal {
2825 max-width: 32rem;
2826 max-height: 70vh;
2827 display: flex;
2828 flex-direction: column;
2829}
2830
2831.directory-picker-body {
2832 flex: 1;
2833 display: flex;
2834 flex-direction: column;
2835 min-height: 0;
2836 overflow: hidden;
2837}
2838
2839.directory-picker-input-container {
2840 margin-bottom: 0.75rem;
2841}
2842
2843.directory-picker-input {
2844 width: 100%;
2845 padding: 0.5rem 0.75rem;
2846 border: 1px solid var(--border);
2847 border-radius: 0.25rem;
2848 background: var(--bg-base);
2849 color: var(--text-primary);
2850 font-family: var(--font-mono);
2851 font-size: 0.875rem;
2852}
2853
2854.directory-picker-input:focus {
2855 outline: none;
2856 border-color: var(--primary);
2857 box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
2858}
2859
2860.directory-picker-current {
2861 display: flex;
2862 align-items: center;
2863 gap: 0.5rem;
2864 font-size: 0.75rem;
2865 color: var(--text-secondary);
2866 font-family: var(--font-mono);
2867 margin-bottom: 0.5rem;
2868 padding: 0.25rem 0;
2869}
2870
2871.directory-picker-current-path {
2872 flex-shrink: 0;
2873}
2874
2875.directory-picker-current-git .directory-picker-current-path {
2876 color: var(--accent-color, #f97316);
2877}
2878
2879.directory-picker-current-subject {
2880 flex: 1;
2881 min-width: 0;
2882 color: var(--text-tertiary);
2883 white-space: nowrap;
2884 overflow: hidden;
2885 text-overflow: ellipsis;
2886 text-align: right;
2887}
2888
2889.directory-picker-filter {
2890 color: var(--primary);
2891 font-weight: 500;
2892}
2893
2894.directory-picker-git-root-btn {
2895 display: flex;
2896 align-items: center;
2897 gap: 0.5rem;
2898 width: 100%;
2899 padding: 0.375rem 0.75rem;
2900 margin-bottom: 0.5rem;
2901 background: var(--bg-secondary);
2902 border: 1px solid var(--border-color);
2903 border-radius: 0.375rem;
2904 color: var(--accent-color, #f97316);
2905 font-size: 0.8125rem;
2906 cursor: pointer;
2907 text-align: left;
2908}
2909
2910.directory-picker-git-root-btn:hover {
2911 background: var(--bg-tertiary);
2912 border-color: var(--accent-color, #f97316);
2913}
2914
2915.directory-picker-git-root-btn .directory-picker-icon {
2916 flex-shrink: 0;
2917}
2918
2919.directory-picker-git-root-path {
2920 color: var(--text-tertiary);
2921 overflow: hidden;
2922 text-overflow: ellipsis;
2923 white-space: nowrap;
2924 margin-left: auto;
2925}
2926
2927.directory-picker-error {
2928 padding: 0.5rem 0.75rem;
2929 background: var(--error-bg);
2930 border: 1px solid var(--error-border);
2931 border-radius: 0.25rem;
2932 color: var(--error-text);
2933 font-size: 0.875rem;
2934 margin-bottom: 0.75rem;
2935}
2936
2937.directory-picker-loading {
2938 display: flex;
2939 align-items: center;
2940 gap: 0.5rem;
2941 padding: 1rem;
2942 color: var(--text-secondary);
2943 font-size: 0.875rem;
2944}
2945
2946.directory-picker-list {
2947 flex: 1;
2948 overflow-y: auto;
2949 border: 1px solid var(--border);
2950 border-radius: 0.25rem;
2951 min-height: 200px;
2952 max-height: 300px;
2953}
2954
2955.directory-picker-entry {
2956 display: flex;
2957 align-items: center;
2958 gap: 0.5rem;
2959 width: 100%;
2960 padding: 0.5rem 0.75rem;
2961 text-align: left;
2962 background: transparent;
2963 border: none;
2964 border-bottom: 1px solid var(--border);
2965 color: var(--text-primary);
2966 font-size: 0.875rem;
2967 font-family: var(--font-mono);
2968 cursor: pointer;
2969 transition: background-color 0.15s;
2970}
2971
2972.directory-picker-entry:last-child {
2973 border-bottom: none;
2974}
2975
2976.directory-picker-entry:hover {
2977 background: var(--bg-tertiary);
2978}
2979
2980.directory-picker-entry-parent {
2981 color: var(--text-secondary);
2982 font-weight: 500;
2983}
2984
2985.directory-picker-icon {
2986 width: 1rem;
2987 height: 1rem;
2988 flex-shrink: 0;
2989 color: var(--text-secondary);
2990}
2991
2992.directory-picker-entry-name {
2993 flex-shrink: 0;
2994}
2995
2996.directory-picker-entry-git .directory-picker-icon {
2997 color: var(--accent-color, #f97316);
2998}
2999
3000.directory-picker-git-subject {
3001 flex: 1;
3002 min-width: 0;
3003 color: var(--text-tertiary);
3004 font-size: 0.75rem;
3005 white-space: nowrap;
3006 overflow: hidden;
3007 text-overflow: ellipsis;
3008 text-align: right;
3009}
3010
3011.directory-picker-empty {
3012 padding: 2rem;
3013 text-align: center;
3014 color: var(--text-tertiary);
3015 font-size: 0.875rem;
3016}
3017
3018.directory-picker-footer {
3019 display: flex;
3020 align-items: center;
3021 gap: 0.5rem;
3022 padding: 1rem;
3023 border-top: 1px solid var(--border);
3024}
3025
3026.directory-picker-footer-spacer {
3027 flex: 1;
3028}
3029
3030.directory-picker-new-btn {
3031 display: flex;
3032 align-items: center;
3033 gap: 0.375rem;
3034}
3035
3036.directory-picker-new-icon {
3037 width: 1rem;
3038 height: 1rem;
3039}
3040
3041/* Create directory form inside the list */
3042.directory-picker-create-form {
3043 display: flex;
3044 align-items: center;
3045 gap: 0.5rem;
3046 padding: 0.5rem 0.75rem;
3047 background: var(--bg-tertiary);
3048 border-bottom: 1px solid var(--border);
3049}
3050
3051.directory-picker-create-input {
3052 flex: 1;
3053 padding: 0.375rem 0.5rem;
3054 border: 1px solid var(--border);
3055 border-radius: 0.25rem;
3056 background: var(--bg-base);
3057 color: var(--text-primary);
3058 font-family: var(--font-mono);
3059 font-size: 0.875rem;
3060}
3061
3062.directory-picker-create-input:focus {
3063 outline: none;
3064 border-color: var(--primary);
3065}
3066
3067.directory-picker-create-btn {
3068 display: flex;
3069 align-items: center;
3070 justify-content: center;
3071 width: 1.75rem;
3072 height: 1.75rem;
3073 padding: 0;
3074 border: none;
3075 border-radius: 0.25rem;
3076 background: var(--primary);
3077 color: white;
3078 cursor: pointer;
3079 transition: background-color 0.15s;
3080}
3081
3082.directory-picker-create-btn:hover:not(:disabled) {
3083 background: var(--primary-hover);
3084}
3085
3086.directory-picker-create-btn:disabled {
3087 opacity: 0.5;
3088 cursor: not-allowed;
3089}
3090
3091.directory-picker-create-btn svg {
3092 width: 1rem;
3093 height: 1rem;
3094}
3095
3096.directory-picker-cancel-btn {
3097 background: var(--bg-secondary);
3098 color: var(--text-secondary);
3099}
3100
3101.directory-picker-cancel-btn:hover:not(:disabled) {
3102 background: var(--bg-tertiary);
3103}
3104
3105.directory-picker-create-error {
3106 padding: 0.375rem 0.75rem;
3107 background: var(--error-bg);
3108 color: var(--error-text);
3109 font-size: 0.75rem;
3110 border-bottom: 1px solid var(--error-border);
3111}
3112
3113/* Screen reader only */
3114.sr-only {
3115 position: absolute;
3116 width: 1px;
3117 height: 1px;
3118 padding: 0;
3119 margin: -1px;
3120 overflow: hidden;
3121 clip: rect(0, 0, 0, 0);
3122 white-space: nowrap;
3123 border: 0;
3124}
3125
3126/* Context Usage Bar */
3127/* Status bar for active conversation */
3128.status-bar-active {
3129 display: flex;
3130 align-items: center;
3131 justify-content: space-between;
3132 width: 100%;
3133}
3134
3135.status-working-group {
3136 display: flex;
3137 align-items: center;
3138 gap: 0.5rem;
3139}
3140
3141.status-stop-button {
3142 display: flex;
3143 align-items: center;
3144 gap: 0.25rem;
3145 padding: 0.25rem 0.5rem;
3146 border: none;
3147 border-radius: 0.25rem;
3148 background: var(--error-bg);
3149 color: var(--error-text);
3150 cursor: pointer;
3151 transition: all 0.15s ease;
3152 font-size: 0.75rem;
3153 font-weight: 500;
3154}
3155
3156.status-stop-button:hover:not(:disabled) {
3157 background: var(--error-text);
3158 color: white;
3159}
3160
3161.status-stop-button:disabled {
3162 opacity: 0.5;
3163 cursor: not-allowed;
3164}
3165
3166.status-stop-button svg {
3167 width: 0.75rem;
3168 height: 0.75rem;
3169 flex-shrink: 0;
3170}
3171
3172.status-stop-label {
3173 white-space: nowrap;
3174}
3175
3176/* Hide stop label on small screens */
3177@media (max-width: 500px) {
3178 .status-stop-label {
3179 display: none;
3180 }
3181 .status-stop-button {
3182 padding: 0.25rem;
3183 }
3184}
3185
3186.context-usage-bar-container {
3187 display: flex;
3188 align-items: center;
3189 gap: 4px;
3190}
3191
3192.context-warning-icon {
3193 font-size: 14px;
3194 line-height: 1;
3195 cursor: help;
3196}
3197
3198.context-usage-bar {
3199 width: 60px;
3200 height: 6px;
3201 background: var(--bg-tertiary);
3202 border-radius: 3px;
3203 overflow: hidden;
3204 cursor: pointer;
3205}
3206
3207.context-usage-fill {
3208 height: 100%;
3209 border-radius: 3px;
3210 transition:
3211 width 0.3s ease,
3212 background-color 0.3s ease;
3213}
3214
3215/* Mobile optimizations for tighter spacing */
3216@media (max-width: 767px) {
3217 .header {
3218 padding: 0.375rem 0.75rem;
3219 padding-top: calc(0.375rem + env(safe-area-inset-top, 0px));
3220 }
3221
3222 .status-bar {
3223 padding: 0.375rem 0.75rem;
3224 min-height: 2rem;
3225 }
3226
3227 .message-input-container {
3228 padding: 0.5rem 0.75rem;
3229 padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
3230 }
3231}
3232
3233/* Print styles - looks like the chat window, just without chrome */
3234@media print {
3235 /* Reset page layout */
3236 html,
3237 body {
3238 height: auto !important;
3239 overflow: visible !important;
3240 background: white !important;
3241 }
3242
3243 /* Hide interactive chrome but keep the header title */
3244 .status-bar,
3245 .message-input-container,
3246 .drawer,
3247 .backdrop,
3248 .scroll-to-bottom-button,
3249 .overflow-menu,
3250 .context-menu,
3251 .modal-overlay {
3252 display: none !important;
3253 }
3254
3255 /* Hide header buttons but keep the title */
3256 .header-actions,
3257 .header .btn-icon {
3258 display: none !important;
3259 }
3260
3261 /* Simplify header for print */
3262 .header {
3263 background: white !important;
3264 border-bottom: 1px solid #e5e7eb !important;
3265 padding: 0.75rem 1rem !important;
3266 }
3267
3268 .header-title {
3269 font-size: 1rem !important;
3270 }
3271
3272 /* Reset app container for print */
3273 .app-container {
3274 display: block !important;
3275 height: auto !important;
3276 background: white !important;
3277 }
3278
3279 .main-content {
3280 display: block !important;
3281 height: auto !important;
3282 }
3283
3284 /* Reset messages area to flow naturally */
3285 .messages-area-wrapper {
3286 height: auto !important;
3287 overflow: visible !important;
3288 position: static !important;
3289 background: white !important;
3290 }
3291
3292 .messages-container {
3293 height: auto !important;
3294 overflow: visible !important;
3295 position: static !important;
3296 background: white !important;
3297 }
3298
3299 .messages-list {
3300 background: white !important;
3301 }
3302
3303 /* Hide empty state in print */
3304 .empty-state {
3305 display: none !important;
3306 }
3307
3308 /* Keep message styling, just add page break hints */
3309 .message {
3310 page-break-inside: avoid;
3311 }
3312
3313 /* Tool results */
3314 .tool-result-details {
3315 page-break-inside: avoid;
3316 }
3317
3318 /* Code blocks */
3319 pre,
3320 code {
3321 page-break-inside: avoid;
3322 }
3323
3324 /* Screenshots and images - ensure they fit */
3325 .screenshot-preview,
3326 .screenshot-image,
3327 .read-image-preview {
3328 max-width: 100% !important;
3329 height: auto !important;
3330 page-break-inside: avoid;
3331 }
3332}
3333/* Diff Viewer Overlay */
3334.diff-viewer-overlay {
3335 position: fixed;
3336 top: 0;
3337 left: 0;
3338 right: 0;
3339 bottom: 0;
3340 background: rgba(0, 0, 0, 0.5);
3341 z-index: 1000;
3342 display: flex;
3343 align-items: center;
3344 justify-content: center;
3345 padding: 1rem;
3346 padding-top: max(1rem, env(safe-area-inset-top));
3347 padding-bottom: max(1rem, env(safe-area-inset-bottom));
3348}
3349
3350.diff-viewer-container {
3351 background: var(--bg-base);
3352 border-radius: 0.5rem;
3353 width: calc(100% - 2rem);
3354 max-width: none;
3355 height: calc(100% - 2rem);
3356 max-height: none;
3357 display: flex;
3358 flex-direction: column;
3359 overflow: hidden;
3360 box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
3361}
3362
3363.diff-viewer-header {
3364 display: flex;
3365 flex-direction: column;
3366 gap: 0.5rem;
3367 padding: 0.5rem 0.75rem;
3368 background: var(--bg-secondary);
3369 border-bottom: 1px solid var(--border-color);
3370}
3371
3372.diff-viewer-header-row {
3373 display: flex;
3374 align-items: center;
3375 gap: 0.5rem;
3376 width: 100%;
3377}
3378
3379.diff-viewer-selectors-row {
3380 display: flex;
3381 flex: 1;
3382 gap: 0.5rem;
3383 min-width: 0;
3384}
3385
3386.diff-viewer-selectors-row .diff-viewer-select {
3387 flex: 1;
3388 min-width: 0;
3389 max-width: none;
3390}
3391
3392.diff-viewer-file-selector-wrapper {
3393 display: flex;
3394 align-items: center;
3395 gap: 0.5rem;
3396 flex: 1;
3397 min-width: 0;
3398}
3399
3400.diff-viewer-file-selector-wrapper .diff-viewer-select {
3401 flex: 1;
3402 min-width: 0;
3403}
3404
3405.diff-viewer-file-index {
3406 font-size: 0.75rem;
3407 color: var(--text-secondary);
3408 white-space: nowrap;
3409 flex-shrink: 0;
3410}
3411
3412.diff-viewer-controls-row {
3413 display: flex;
3414 align-items: center;
3415 gap: 0.5rem;
3416 flex-shrink: 0;
3417}
3418
3419.diff-viewer-header-mobile {
3420 flex-direction: row;
3421 align-items: center;
3422 gap: 0.5rem;
3423 padding: 0.375rem 0.5rem;
3424}
3425
3426.diff-viewer-mobile-selectors {
3427 display: flex;
3428 flex: 1;
3429 gap: 0.375rem;
3430 min-width: 0;
3431}
3432
3433.diff-viewer-mobile-selectors .diff-viewer-select {
3434 flex: 1;
3435 min-width: 0;
3436 font-size: 0.75rem;
3437 padding: 0.375rem;
3438}
3439
3440.diff-viewer-mode-toggle {
3441 display: flex;
3442 border: 1px solid var(--border-color);
3443 border-radius: 0.25rem;
3444 overflow: hidden;
3445}
3446
3447.diff-viewer-mode-btn {
3448 padding: 0.25rem 0.5rem;
3449 border: none;
3450 background: var(--bg-base);
3451 color: var(--text-secondary);
3452 cursor: pointer;
3453 font-size: 0.875rem;
3454}
3455
3456.diff-viewer-mode-btn:first-child {
3457 border-right: 1px solid var(--border-color);
3458}
3459
3460.diff-viewer-mode-btn.active {
3461 background: var(--blue-bg);
3462 color: var(--blue-text);
3463}
3464
3465.diff-viewer-mode-btn:hover:not(.active) {
3466 background: var(--bg-tertiary);
3467}
3468
3469.diff-viewer-nav-buttons {
3470 display: flex;
3471 gap: 0.125rem;
3472}
3473
3474.diff-viewer-nav-btn {
3475 padding: 0.25rem 0.5rem;
3476 border: 1px solid var(--border-color);
3477 background: var(--bg-base);
3478 color: var(--text-primary);
3479 cursor: pointer;
3480 border-radius: 0.25rem;
3481 font-size: 0.875rem;
3482}
3483
3484.diff-viewer-nav-btn:disabled {
3485 opacity: 0.4;
3486 cursor: not-allowed;
3487}
3488
3489.diff-viewer-nav-btn:hover:not(:disabled) {
3490 background: var(--bg-tertiary);
3491}
3492
3493.diff-viewer-select {
3494 flex: 1;
3495 min-width: 120px;
3496 max-width: 300px;
3497 padding: 0.5rem;
3498 border: 1px solid var(--border-color);
3499 border-radius: 0.25rem;
3500 background: var(--bg-base);
3501 color: var(--text-primary);
3502 font-size: 0.875rem;
3503}
3504
3505.diff-viewer-close {
3506 width: 2rem;
3507 height: 2rem;
3508 border: none;
3509 background: transparent;
3510 color: var(--text-secondary);
3511 font-size: 1.5rem;
3512 cursor: pointer;
3513 border-radius: 0.25rem;
3514 display: flex;
3515 align-items: center;
3516 justify-content: center;
3517 flex-shrink: 0;
3518}
3519
3520.diff-viewer-close:hover {
3521 background: var(--bg-tertiary);
3522 color: var(--text-primary);
3523}
3524
3525.diff-viewer-error {
3526 padding: 0.5rem 1rem;
3527 background: var(--error-bg);
3528 color: var(--error-text);
3529 font-size: 0.875rem;
3530}
3531
3532.diff-viewer-toast {
3533 position: fixed;
3534 bottom: 24px;
3535 right: 24px;
3536 padding: 12px 16px;
3537 border-radius: 8px;
3538 font-size: 14px;
3539 font-weight: 500;
3540 z-index: 9999;
3541 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
3542 animation: toast-fade-in 0.2s ease;
3543 color: #ffffff;
3544}
3545
3546.diff-viewer-toast-saving {
3547 background: #1976d2;
3548}
3549
3550.diff-viewer-toast-saved {
3551 background: #2e7d32;
3552}
3553
3554.diff-viewer-toast-error {
3555 background: #d32f2f;
3556}
3557
3558.diff-viewer-toast-hint {
3559 background: var(--bg-tertiary);
3560 color: var(--text-primary);
3561 border: 1px solid var(--border-color);
3562}
3563
3564@keyframes toast-fade-in {
3565 from {
3566 opacity: 0;
3567 transform: translateY(10px);
3568 }
3569 to {
3570 opacity: 1;
3571 transform: translateY(0);
3572 }
3573}
3574
3575.diff-viewer-content {
3576 flex: 1;
3577 overflow: hidden;
3578 position: relative;
3579}
3580
3581.diff-viewer-loading,
3582.diff-viewer-empty {
3583 display: flex;
3584 flex-direction: column;
3585 align-items: center;
3586 justify-content: center;
3587 height: 100%;
3588 color: var(--text-secondary);
3589 gap: 0.5rem;
3590}
3591
3592.diff-viewer-hint {
3593 font-size: 0.875rem;
3594 opacity: 0.7;
3595}
3596
3597.diff-viewer-editor {
3598 height: 100%;
3599 width: 100%;
3600}
3601
3602/* Diff viewer line hover highlighting (via decoration API) */
3603.diff-viewer-editor .monaco-editor .diff-viewer-line-hover {
3604 background-color: rgba(37, 99, 235, 0.08) !important;
3605}
3606
3607.dark .diff-viewer-editor .monaco-editor .diff-viewer-line-hover {
3608 background-color: rgba(96, 165, 250, 0.12) !important;
3609}
3610
3611/* Comment indicator glyph in margin for diff viewer */
3612.diff-viewer-editor .monaco-editor .diff-viewer-comment-glyph {
3613 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'%3E%3C/path%3E%3Cline x1='9' y1='10' x2='15' y2='10'%3E%3C/line%3E%3C/svg%3E");
3614 background-size: 14px 14px;
3615 background-repeat: no-repeat;
3616 background-position: center;
3617 opacity: 0.6;
3618 cursor: pointer;
3619}
3620
3621.diff-viewer-editor .monaco-editor .diff-viewer-comment-glyph:hover {
3622 opacity: 1;
3623}
3624
3625.dark .diff-viewer-editor .monaco-editor .diff-viewer-comment-glyph {
3626 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'%3E%3C/path%3E%3Cline x1='9' y1='10' x2='15' y2='10'%3E%3C/line%3E%3C/svg%3E");
3627}
3628
3629/* Make diff viewer Monaco lines clickable with pointer cursor */
3630.diff-viewer-editor .monaco-editor .view-lines {
3631 cursor: pointer;
3632}
3633
3634.diff-viewer-comment-badge {
3635 position: absolute;
3636 bottom: 1rem;
3637 left: 1rem;
3638 padding: 0.5rem 1rem;
3639 background: var(--blue-bg);
3640 color: var(--blue-text);
3641 border-radius: 1rem;
3642 font-size: 0.875rem;
3643 font-weight: 500;
3644}
3645
3646/* Comment dialog */
3647.diff-viewer-comment-dialog {
3648 position: absolute;
3649 top: 50%;
3650 left: 50%;
3651 transform: translate(-50%, -50%);
3652 width: 90%;
3653 max-width: 500px;
3654 background: var(--bg-base);
3655 border: 1px solid var(--border-color);
3656 border-radius: 0.5rem;
3657 padding: 1rem;
3658 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
3659 z-index: 1001;
3660}
3661
3662.diff-viewer-comment-dialog h4 {
3663 margin: 0 0 0.75rem 0;
3664 color: var(--text-primary);
3665}
3666
3667.diff-viewer-selected-text {
3668 margin: 0 0 0.75rem 0;
3669 padding: 0.5rem;
3670 background: var(--bg-tertiary);
3671 border: 1px solid var(--border-color);
3672 border-radius: 0.25rem;
3673 font-size: 0.75rem;
3674 font-family: monospace;
3675 max-height: 150px;
3676 overflow: auto;
3677 white-space: pre;
3678}
3679
3680.diff-viewer-comment-input {
3681 width: 100%;
3682 min-height: 100px;
3683 padding: 0.5rem;
3684 border: 1px solid var(--border-color);
3685 border-radius: 0.25rem;
3686 background: var(--bg-base);
3687 color: var(--text-primary);
3688 font-size: 0.875rem;
3689 resize: vertical;
3690}
3691
3692.diff-viewer-comment-actions {
3693 display: flex;
3694 justify-content: flex-end;
3695 gap: 0.5rem;
3696 margin-top: 0.75rem;
3697}
3698
3699.diff-viewer-btn {
3700 padding: 0.5rem 1rem;
3701 border: none;
3702 border-radius: 0.25rem;
3703 font-size: 0.875rem;
3704 cursor: pointer;
3705}
3706
3707.diff-viewer-btn:disabled {
3708 opacity: 0.5;
3709 cursor: not-allowed;
3710}
3711
3712.diff-viewer-btn-primary {
3713 background: var(--blue-bg);
3714 color: var(--blue-text);
3715}
3716
3717.diff-viewer-btn-primary:hover:not(:disabled) {
3718 filter: brightness(0.95);
3719}
3720
3721.diff-viewer-btn-secondary {
3722 background: var(--bg-tertiary);
3723 color: var(--text-primary);
3724}
3725
3726.diff-viewer-btn-secondary:hover:not(:disabled) {
3727 background: var(--bg-secondary);
3728}
3729
3730/* Mobile floating nav buttons */
3731.diff-viewer-mobile-nav {
3732 position: absolute;
3733 bottom: 1.5rem;
3734 left: 50%;
3735 transform: translateX(-50%);
3736 display: flex;
3737 gap: 0.5rem;
3738 z-index: 100;
3739}
3740
3741.diff-viewer-mobile-nav-btn {
3742 width: 3rem;
3743 height: 3rem;
3744 border: none;
3745 border-radius: 50%;
3746 background: var(--bg-base);
3747 color: var(--text-primary);
3748 cursor: pointer;
3749 display: flex;
3750 align-items: center;
3751 justify-content: center;
3752 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
3753}
3754
3755.diff-viewer-mobile-nav-btn svg {
3756 width: 24px;
3757 height: 24px;
3758}
3759
3760.diff-viewer-mobile-nav-btn:disabled {
3761 opacity: 0.4;
3762 cursor: not-allowed;
3763}
3764
3765.diff-viewer-mobile-nav-btn:active:not(:disabled) {
3766 background: var(--bg-tertiary);
3767 transform: scale(0.95);
3768}
3769
3770.diff-viewer-mobile-mode-btn {
3771 font-size: 1.25rem;
3772}
3773
3774.diff-viewer-mobile-mode-btn.active {
3775 background: var(--blue-bg);
3776 color: var(--blue-text);
3777}
3778
3779/* Monaco comment glyph decoration */
3780/* Mobile optimizations for diff viewer */
3781@media (max-width: 767px) {
3782 .diff-viewer-overlay {
3783 padding: 0;
3784 }
3785
3786 .diff-viewer-container {
3787 border-radius: 0;
3788 width: 100%;
3789 max-width: 100%;
3790 height: 100%;
3791 max-height: 100%;
3792 }
3793
3794 .diff-viewer-close {
3795 width: 1.75rem;
3796 height: 1.75rem;
3797 font-size: 1.25rem;
3798 flex-shrink: 0;
3799 }
3800
3801 /* Monaco editor mobile styles - hide gutters completely */
3802 .diff-viewer-editor .monaco-editor .margin {
3803 display: none !important;
3804 width: 0 !important;
3805 }
3806
3807 .diff-viewer-editor .monaco-editor .margin-view-overlays {
3808 display: none !important;
3809 width: 0 !important;
3810 }
3811
3812 .diff-viewer-editor .monaco-editor .editor-scrollable {
3813 left: 0 !important;
3814 }
3815
3816 .diff-viewer-editor .monaco-editor .lines-content {
3817 margin-left: 0 !important;
3818 }
3819
3820 /* Ensure diff editor uses full width */
3821 .diff-viewer-editor .monaco-diff-editor {
3822 width: 100% !important;
3823 }
3824
3825 .diff-viewer-editor .monaco-diff-editor .editor.modified {
3826 width: 100% !important;
3827 left: 0 !important;
3828 }
3829
3830 /* Comment dialog on top half of screen for mobile (keyboard space) */
3831 .diff-viewer-comment-dialog {
3832 top: 10%;
3833 transform: translate(-50%, 0);
3834 max-height: 40vh;
3835 overflow-y: auto;
3836 }
3837
3838 .diff-viewer-comment-input {
3839 min-height: 60px;
3840 }
3841}
3842
3843/* Injected text indicator (for diff comments) */
3844.injected-text-indicator {
3845 display: flex;
3846 align-items: center;
3847 justify-content: space-between;
3848 padding: 0.5rem 0.75rem;
3849 background: var(--blue-bg);
3850 border-bottom: 1px solid var(--border-color);
3851 gap: 0.5rem;
3852}
3853
3854.injected-text-label {
3855 font-size: 0.875rem;
3856 color: var(--blue-text);
3857 flex: 1;
3858 min-width: 0;
3859 overflow: hidden;
3860 text-overflow: ellipsis;
3861 white-space: nowrap;
3862}
3863
3864.injected-text-insert-btn {
3865 padding: 0.375rem 0.75rem;
3866 background: var(--blue-text);
3867 color: white;
3868 border: none;
3869 border-radius: 0.25rem;
3870 font-size: 0.75rem;
3871 font-weight: 500;
3872 cursor: pointer;
3873 white-space: nowrap;
3874 flex-shrink: 0;
3875}
3876
3877.injected-text-insert-btn:hover {
3878 filter: brightness(1.1);
3879}
3880
3881/* Links in message text */
3882.text-link {
3883 color: var(--blue-text);
3884 text-decoration: underline;
3885 text-underline-offset: 2px;
3886 text-decoration-color: var(--blue-border);
3887}
3888
3889.text-link:hover {
3890 text-decoration-color: var(--blue-text);
3891}
3892
3893/* Command Palette */
3894.command-palette-overlay {
3895 position: fixed;
3896 inset: 0;
3897 background: rgba(0, 0, 0, 0.5);
3898 z-index: 100;
3899 display: flex;
3900 align-items: flex-start;
3901 justify-content: center;
3902 padding-top: 15vh;
3903}
3904
3905.command-palette {
3906 background: var(--bg-base);
3907 border: 1px solid var(--border-color);
3908 border-radius: 0.75rem;
3909 box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
3910 width: 100%;
3911 max-width: 32rem;
3912 max-height: 60vh;
3913 display: flex;
3914 flex-direction: column;
3915 overflow: hidden;
3916}
3917
3918.command-palette-input-wrapper {
3919 display: flex;
3920 align-items: center;
3921 padding: 0.75rem 1rem;
3922 border-bottom: 1px solid var(--border-color);
3923 gap: 0.75rem;
3924}
3925
3926.command-palette-search-icon {
3927 color: var(--text-secondary);
3928 flex-shrink: 0;
3929}
3930
3931.command-palette-input {
3932 flex: 1;
3933 border: none;
3934 background: transparent;
3935 font-size: 1rem;
3936 color: var(--text-primary);
3937 outline: none;
3938}
3939
3940.command-palette-input::placeholder {
3941 color: var(--text-secondary);
3942}
3943
3944.command-palette-shortcut {
3945 flex-shrink: 0;
3946}
3947
3948.command-palette-spinner {
3949 width: 16px;
3950 height: 16px;
3951 border: 2px solid var(--border-color);
3952 border-top-color: var(--primary);
3953 border-radius: 50%;
3954 animation: spin 0.6s linear infinite;
3955 flex-shrink: 0;
3956}
3957
3958.command-palette-list {
3959 flex: 1;
3960 overflow-y: auto;
3961 padding: 0.5rem;
3962}
3963
3964.command-palette-empty {
3965 padding: 2rem 1rem;
3966 text-align: center;
3967 color: var(--text-secondary);
3968}
3969
3970.command-palette-item {
3971 display: flex;
3972 align-items: center;
3973 padding: 0.625rem 0.75rem;
3974 border-radius: 0.5rem;
3975 cursor: pointer;
3976 gap: 0.75rem;
3977}
3978
3979.command-palette-item:hover,
3980.command-palette-item.selected {
3981 background: var(--bg-secondary);
3982}
3983
3984.command-palette-item-icon {
3985 flex-shrink: 0;
3986 color: var(--text-secondary);
3987 display: flex;
3988 align-items: center;
3989 justify-content: center;
3990}
3991
3992.command-palette-item.selected .command-palette-item-icon {
3993 color: var(--primary);
3994}
3995
3996.command-palette-item-content {
3997 flex: 1;
3998 min-width: 0;
3999}
4000
4001.command-palette-item-title {
4002 font-size: 0.875rem;
4003 color: var(--text-primary);
4004 white-space: nowrap;
4005 overflow: hidden;
4006 text-overflow: ellipsis;
4007}
4008
4009.command-palette-item-subtitle {
4010 font-size: 0.75rem;
4011 color: var(--text-secondary);
4012 white-space: nowrap;
4013 overflow: hidden;
4014 text-overflow: ellipsis;
4015 margin-top: 0.125rem;
4016}
4017
4018.command-palette-item-badge {
4019 flex-shrink: 0;
4020 font-size: 0.625rem;
4021 text-transform: uppercase;
4022 letter-spacing: 0.05em;
4023 padding: 0.125rem 0.375rem;
4024 background: var(--bg-tertiary);
4025 border-radius: 0.25rem;
4026 color: var(--text-secondary);
4027}
4028
4029.command-palette-footer {
4030 display: flex;
4031 gap: 1rem;
4032 padding: 0.5rem 1rem;
4033 border-top: 1px solid var(--border-color);
4034 font-size: 0.75rem;
4035 color: var(--text-secondary);
4036}
4037
4038.command-palette-footer span {
4039 display: flex;
4040 align-items: center;
4041 gap: 0.25rem;
4042}
4043
4044@media (max-width: 640px) {
4045 .command-palette-overlay {
4046 padding: 1rem;
4047 padding-top: 5vh;
4048 }
4049
4050 .command-palette {
4051 max-height: 80vh;
4052 }
4053
4054 .command-palette-footer {
4055 display: none;
4056 }
4057}
4058
4059/* Models Modal Styles */
4060.models-modal {
4061 padding: 0.5rem;
4062}
4063
4064.models-loading {
4065 display: flex;
4066 align-items: center;
4067 justify-content: center;
4068 gap: 0.5rem;
4069 padding: 2rem;
4070 color: var(--text-secondary);
4071}
4072
4073.models-error {
4074 display: flex;
4075 align-items: center;
4076 justify-content: space-between;
4077 padding: 0.75rem 1rem;
4078 background: var(--error-bg);
4079 border: 1px solid var(--error-border);
4080 border-radius: 0.375rem;
4081 color: var(--error-text);
4082 margin-bottom: 1rem;
4083}
4084
4085.models-error-dismiss {
4086 background: none;
4087 border: none;
4088 font-size: 1.25rem;
4089 cursor: pointer;
4090 color: inherit;
4091 padding: 0;
4092 line-height: 1;
4093}
4094
4095.models-info {
4096 padding: 0.75rem 1rem;
4097 background: var(--bg-tertiary);
4098 border-radius: 0.375rem;
4099 margin-bottom: 1rem;
4100}
4101
4102.models-info p {
4103 margin: 0 0 0.5rem 0;
4104 color: var(--text-secondary);
4105}
4106
4107.builtin-list {
4108 margin: 0;
4109 padding-left: 1.25rem;
4110 color: var(--text-primary);
4111}
4112
4113.builtin-list li {
4114 margin: 0.25rem 0;
4115}
4116
4117.models-list {
4118 display: flex;
4119 flex-direction: column;
4120 gap: 0.75rem;
4121 margin-bottom: 1rem;
4122}
4123
4124.model-card {
4125 padding: 0.75rem 1rem;
4126 background: var(--bg-base);
4127 border: 1px solid var(--border);
4128 border-radius: 0.375rem;
4129}
4130
4131.model-header {
4132 display: flex;
4133 justify-content: space-between;
4134 align-items: flex-start;
4135 gap: 0.5rem;
4136}
4137
4138.model-info {
4139 display: flex;
4140 flex-wrap: wrap;
4141 align-items: center;
4142 gap: 0.5rem;
4143}
4144
4145.model-name {
4146 font-weight: 500;
4147 color: var(--text-primary);
4148}
4149
4150.model-provider {
4151 font-size: 0.75rem;
4152 padding: 0.125rem 0.5rem;
4153 background: var(--bg-tertiary);
4154 border-radius: 0.25rem;
4155 color: var(--text-secondary);
4156}
4157
4158.model-source {
4159 font-size: 0.75rem;
4160 padding: 0.125rem 0.5rem;
4161 background: var(--bg-tertiary);
4162 border-radius: 0.25rem;
4163 color: var(--text-secondary);
4164}
4165
4166.model-card-builtin {
4167 opacity: 0.8;
4168 background: var(--bg-secondary);
4169}
4170
4171.models-empty {
4172 padding: 2rem;
4173 text-align: center;
4174 color: var(--text-secondary);
4175}
4176
4177.models-empty-hint {
4178 font-size: 0.875rem;
4179 margin-top: 0.5rem;
4180 color: var(--text-tertiary);
4181}
4182
4183.model-badge {
4184 font-size: 0.625rem;
4185 text-transform: uppercase;
4186 letter-spacing: 0.05em;
4187 padding: 0.125rem 0.375rem;
4188 background: var(--blue-bg);
4189 border: 1px solid var(--blue-border);
4190 border-radius: 0.25rem;
4191 color: var(--blue-text);
4192}
4193
4194.model-actions {
4195 display: flex;
4196 gap: 0.25rem;
4197 flex-shrink: 0;
4198}
4199
4200.model-details {
4201 margin-top: 0.5rem;
4202 display: flex;
4203 flex-direction: column;
4204 gap: 0.25rem;
4205}
4206
4207.model-api-name {
4208 font-size: 0.75rem;
4209 font-family: var(--font-mono);
4210 color: var(--text-secondary);
4211}
4212
4213.model-endpoint {
4214 font-size: 0.75rem;
4215 color: var(--text-tertiary);
4216 word-break: break-all;
4217}
4218
4219.btn-icon {
4220 padding: 0.25rem;
4221 border-radius: 0.25rem;
4222 color: var(--text-secondary);
4223 background: transparent;
4224 border: none;
4225 cursor: pointer;
4226 display: flex;
4227 align-items: center;
4228 justify-content: center;
4229}
4230
4231.btn-icon:hover {
4232 background: var(--bg-tertiary);
4233 color: var(--text-primary);
4234}
4235
4236/* Version Checker Styles */
4237.version-update-dot {
4238 position: absolute;
4239 top: 2px;
4240 right: 2px;
4241 width: 8px;
4242 height: 8px;
4243 background: #ef4444;
4244 border-radius: 50%;
4245 border: 2px solid var(--bg-base);
4246}
4247
4248.version-menu-dot {
4249 width: 8px;
4250 height: 8px;
4251 background: #ef4444;
4252 border-radius: 50%;
4253 margin-left: auto;
4254 flex-shrink: 0;
4255}
4256
4257.version-modal-overlay {
4258 position: fixed;
4259 inset: 0;
4260 background: rgba(0, 0, 0, 0.5);
4261 display: flex;
4262 align-items: center;
4263 justify-content: center;
4264 z-index: 1000;
4265 padding: 1rem;
4266}
4267
4268.version-modal {
4269 background: var(--bg-base);
4270 border-radius: 0.5rem;
4271 box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
4272 max-width: 500px;
4273 width: 100%;
4274 max-height: 80vh;
4275 display: flex;
4276 flex-direction: column;
4277 overflow: hidden;
4278}
4279
4280.version-modal-header {
4281 display: flex;
4282 align-items: center;
4283 justify-content: space-between;
4284 padding: 1rem 1.25rem;
4285 border-bottom: 1px solid var(--border-color);
4286}
4287
4288.version-modal-header h2 {
4289 margin: 0;
4290 font-size: 1.125rem;
4291 font-weight: 600;
4292 color: var(--text-primary);
4293}
4294
4295.version-modal-close {
4296 background: none;
4297 border: none;
4298 padding: 0.25rem;
4299 cursor: pointer;
4300 color: var(--text-secondary);
4301 border-radius: 0.25rem;
4302}
4303
4304.version-modal-close:hover {
4305 background: var(--bg-tertiary);
4306 color: var(--text-primary);
4307}
4308
4309.version-modal-close svg {
4310 width: 1.25rem;
4311 height: 1.25rem;
4312}
4313
4314.version-modal-content {
4315 padding: 1.25rem;
4316 overflow-y: auto;
4317 display: flex;
4318 flex-direction: column;
4319 gap: 1rem;
4320}
4321
4322.version-info-row {
4323 display: flex;
4324 align-items: center;
4325 gap: 0.5rem;
4326 font-size: 0.875rem;
4327}
4328
4329.version-label {
4330 color: var(--text-secondary);
4331}
4332
4333.version-value {
4334 font-weight: 500;
4335 color: var(--text-primary);
4336 font-family: var(--font-mono);
4337}
4338
4339.version-date {
4340 color: var(--text-tertiary);
4341 font-size: 0.75rem;
4342}
4343
4344.version-error {
4345 padding: 0.75rem;
4346 background: var(--error-bg);
4347 border: 1px solid var(--error-border);
4348 border-radius: 0.375rem;
4349 font-size: 0.875rem;
4350 color: var(--error-text);
4351}
4352
4353.version-success {
4354 padding: 0.75rem;
4355 background: var(--success-bg);
4356 border: 1px solid var(--success-border);
4357 border-radius: 0.375rem;
4358 font-size: 0.875rem;
4359 color: var(--success-text);
4360}
4361
4362.version-changelog {
4363 border-top: 1px solid var(--border-color);
4364 padding-top: 1rem;
4365}
4366
4367.version-changelog h3 {
4368 margin: 0 0 0.75rem 0;
4369 font-size: 0.875rem;
4370 font-weight: 600;
4371}
4372
4373.changelog-link {
4374 color: var(--link-color);
4375 text-decoration: none;
4376}
4377
4378.changelog-link:hover {
4379 text-decoration: underline;
4380}
4381
4382.commit-list {
4383 margin: 0;
4384 padding: 0;
4385 list-style: none;
4386 max-height: 250px;
4387 overflow-y: auto;
4388 font-size: 0.8125rem;
4389}
4390
4391.commit-item {
4392 display: flex;
4393 gap: 0.5rem;
4394 padding: 0.5rem 0;
4395 border-bottom: 1px solid var(--border-color);
4396 align-items: flex-start;
4397}
4398
4399.commit-item:last-child {
4400 border-bottom: none;
4401}
4402
4403.commit-sha {
4404 font-family: var(--font-mono);
4405 color: var(--link-color);
4406 font-size: 0.75rem;
4407 flex-shrink: 0;
4408 text-decoration: none;
4409}
4410
4411.commit-sha:hover {
4412 text-decoration: underline;
4413}
4414
4415.commit-message {
4416 color: var(--text-primary);
4417 word-break: break-word;
4418 line-height: 1.4;
4419}
4420
4421.version-loading,
4422.version-no-commits {
4423 color: var(--text-secondary);
4424 font-size: 0.875rem;
4425 padding: 0.5rem 0;
4426}
4427
4428.version-actions {
4429 display: flex;
4430 flex-direction: column;
4431 gap: 0.75rem;
4432 border-top: 1px solid var(--border-color);
4433 padding-top: 1rem;
4434}
4435
4436.version-btn {
4437 padding: 0.5rem 1rem;
4438 border-radius: 0.375rem;
4439 font-size: 0.875rem;
4440 font-weight: 500;
4441 cursor: pointer;
4442 transition: background-color 0.15s;
4443}
4444
4445.version-btn:disabled {
4446 opacity: 0.6;
4447 cursor: not-allowed;
4448}
4449
4450.version-btn-primary {
4451 background: var(--primary);
4452 color: white;
4453 border: none;
4454}
4455
4456.version-btn-primary:hover:not(:disabled) {
4457 background: var(--primary-dark);
4458}
4459
4460.btn-icon.btn-danger:hover {
4461 background: var(--error-bg);
4462 color: var(--error-text);
4463}
4464
4465.add-model-btn {
4466 width: 100%;
4467}
4468
4469/* Model Form */
4470.model-form h3 {
4471 margin: 0 0 0.75rem 0;
4472 font-size: 1rem;
4473 font-weight: 600;
4474}
4475
4476.form-group {
4477 margin-bottom: 0.75rem;
4478}
4479
4480.form-group label {
4481 display: block;
4482 font-size: 0.875rem;
4483 font-weight: 500;
4484 margin-bottom: 0.25rem;
4485 color: var(--text-primary);
4486}
4487
4488.form-group label .optional {
4489 font-weight: 400;
4490 color: var(--text-secondary);
4491}
4492
4493.form-input {
4494 width: 100%;
4495 padding: 0.5rem 0.75rem;
4496 background: var(--bg-base);
4497 border: 1px solid var(--border);
4498 border-radius: 0.375rem;
4499 color: var(--text-primary);
4500 font-family: inherit;
4501 font-size: 0.875rem;
4502}
4503
4504.form-input:focus {
4505 outline: none;
4506 border-color: var(--primary);
4507 box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
4508}
4509
4510.form-checkbox {
4511 display: flex;
4512 align-items: center;
4513}
4514
4515.form-checkbox label {
4516 display: flex;
4517 align-items: center;
4518 gap: 0.5rem;
4519 cursor: pointer;
4520 margin: 0;
4521}
4522
4523.form-checkbox input[type="checkbox"] {
4524 width: 1rem;
4525 height: 1rem;
4526 cursor: pointer;
4527}
4528
4529.info-icon-wrapper {
4530 position: relative;
4531 display: inline-flex;
4532 align-items: center;
4533 margin-left: 0.25rem;
4534}
4535
4536.info-icon {
4537 display: inline-flex;
4538 align-items: center;
4539 justify-content: center;
4540 color: var(--text-tertiary);
4541 cursor: pointer;
4542}
4543
4544.info-icon:hover {
4545 color: var(--text-secondary);
4546}
4547
4548.info-tooltip {
4549 position: absolute;
4550 top: 50%;
4551 left: 100%;
4552 transform: translateY(-50%);
4553 background: var(--bg-tertiary);
4554 border: 1px solid var(--border);
4555 border-radius: 0.375rem;
4556 padding: 0.5rem 0.75rem;
4557 font-size: 0.75rem;
4558 font-weight: 400;
4559 color: var(--text-primary);
4560 white-space: normal;
4561 width: 220px;
4562 margin-left: 0.375rem;
4563 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
4564 z-index: 100;
4565}
4566
4567.info-tooltip::after {
4568 content: "";
4569 position: absolute;
4570 top: 50%;
4571 right: 100%;
4572 transform: translateY(-50%);
4573 border: 6px solid transparent;
4574 border-right-color: var(--border);
4575}
4576
4577.provider-buttons {
4578 display: flex;
4579 gap: 0.5rem;
4580}
4581
4582.provider-btn {
4583 flex: 1;
4584 padding: 0.5rem;
4585 background: var(--bg-base);
4586 border: 1px solid var(--border);
4587 border-radius: 0.375rem;
4588 color: var(--text-primary);
4589 font-size: 0.875rem;
4590 cursor: pointer;
4591 transition: all 0.15s;
4592}
4593
4594.provider-btn:hover {
4595 background: var(--bg-tertiary);
4596}
4597
4598.provider-btn.selected {
4599 background: var(--primary);
4600 border-color: var(--primary);
4601 color: white;
4602}
4603
4604.endpoint-toggle {
4605 display: flex;
4606 gap: 0;
4607 margin-bottom: 0.5rem;
4608}
4609
4610.toggle-btn {
4611 flex: 1;
4612 padding: 0.375rem 0.75rem;
4613 background: var(--bg-base);
4614 border: 1px solid var(--border);
4615 color: var(--text-secondary);
4616 font-size: 0.75rem;
4617 cursor: pointer;
4618 transition: all 0.15s;
4619}
4620
4621.toggle-btn:first-child {
4622 border-radius: 0.375rem 0 0 0.375rem;
4623}
4624
4625.toggle-btn:last-child {
4626 border-radius: 0 0.375rem 0.375rem 0;
4627 border-left: none;
4628}
4629
4630.toggle-btn.selected {
4631 background: var(--bg-tertiary);
4632 color: var(--text-primary);
4633}
4634
4635.endpoint-display {
4636 padding: 0.5rem 0.75rem;
4637 background: var(--bg-tertiary);
4638 border-radius: 0.375rem;
4639 font-size: 0.75rem;
4640 color: var(--text-secondary);
4641 word-break: break-all;
4642}
4643
4644.model-presets {
4645 display: flex;
4646 flex-wrap: wrap;
4647 gap: 0.375rem;
4648 margin-bottom: 0.5rem;
4649}
4650
4651.preset-btn {
4652 padding: 0.25rem 0.625rem;
4653 background: var(--bg-base);
4654 border: 1px solid var(--border);
4655 border-radius: 0.25rem;
4656 color: var(--text-secondary);
4657 font-size: 0.75rem;
4658 cursor: pointer;
4659 transition: all 0.15s;
4660}
4661
4662.preset-btn:hover {
4663 background: var(--bg-tertiary);
4664 color: var(--text-primary);
4665}
4666
4667.preset-btn.selected {
4668 background: var(--blue-bg);
4669 border-color: var(--blue-border);
4670 color: var(--blue-text);
4671}
4672
4673.test-result {
4674 padding: 0.75rem 1rem;
4675 border-radius: 0.375rem;
4676 margin-bottom: 1rem;
4677 font-size: 0.875rem;
4678}
4679
4680.test-result.success {
4681 background: var(--success-bg);
4682 border: 1px solid var(--success-border);
4683 color: var(--success-text);
4684}
4685
4686.test-result.error {
4687 background: var(--error-bg);
4688 border: 1px solid var(--error-border);
4689 color: var(--error-text);
4690}
4691
4692.form-actions {
4693 display: flex;
4694 gap: 0.5rem;
4695 justify-content: flex-end;
4696 margin-top: 1rem;
4697 padding-bottom: 0.5rem;
4698}
4699
4700kbd {
4701 display: inline-block;
4702 padding: 0.125rem 0.375rem;
4703 font-size: 0.75rem;
4704 font-family: inherit;
4705 background: var(--bg-tertiary);
4706 border: 1px solid var(--border-color);
4707 border-radius: 0.25rem;
4708 color: var(--text-secondary);
4709}
4710
4711/* System Prompt View */
4712.system-prompt-view {
4713 background: var(--gray-100);
4714 border-radius: 0.5rem;
4715 margin: 0.5rem 0;
4716 width: 100%;
4717 border: 1px dashed var(--border);
4718}
4719
4720.dark .system-prompt-view {
4721 background: var(--gray-800);
4722}
4723
4724.system-prompt-header {
4725 display: flex;
4726 align-items: center;
4727 justify-content: space-between;
4728 padding: 0.75rem 1rem;
4729 cursor: pointer;
4730 user-select: none;
4731}
4732
4733.system-prompt-header:hover {
4734 background: rgba(0, 0, 0, 0.02);
4735 border-radius: 0.5rem;
4736}
4737
4738.dark .system-prompt-header:hover {
4739 background: rgba(255, 255, 255, 0.02);
4740}
4741
4742.system-prompt-summary {
4743 display: flex;
4744 align-items: center;
4745 gap: 0.5rem;
4746 flex: 1;
4747 min-width: 0;
4748}
4749
4750.system-prompt-icon {
4751 font-size: 1rem;
4752 flex-shrink: 0;
4753}
4754
4755.system-prompt-label {
4756 font-family: var(--font-mono);
4757 font-size: 0.875rem;
4758 color: var(--text-primary);
4759 font-weight: 500;
4760}
4761
4762.system-prompt-meta {
4763 font-size: 0.75rem;
4764 color: var(--text-secondary);
4765 flex-shrink: 0;
4766}
4767
4768.system-prompt-content {
4769 padding: 0 1rem 1rem 1rem;
4770}
4771
4772.system-prompt-text {
4773 font-family: var(--font-mono);
4774 font-size: 0.75rem;
4775 line-height: 1.5;
4776 color: var(--text-secondary);
4777 background: var(--bg-base);
4778 border: 1px solid var(--border);
4779 border-radius: 0.375rem;
4780 padding: 1rem;
4781 margin: 0;
4782 max-height: 400px;
4783 overflow: auto;
4784 white-space: pre-wrap;
4785 word-wrap: break-word;
4786}
4787
4788.dark .system-prompt-text {
4789 background: var(--gray-900);
4790}