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.animated-working {
2077 display: inline;
2078}
2079
2080.animated-working .bold-letter {
2081 font-weight: 700;
2082}
2083
2084.status-button {
2085 padding: 0.375rem 0.875rem;
2086 border-radius: 0.375rem;
2087 font-size: 0.875rem;
2088 font-weight: 500;
2089 transition: all 0.2s;
2090 display: flex;
2091 align-items: center;
2092 gap: 0.375rem;
2093 white-space: nowrap;
2094 border: none;
2095 cursor: pointer;
2096}
2097
2098.status-button svg {
2099 width: 0.875rem;
2100 height: 0.875rem;
2101}
2102
2103.status-button-primary {
2104 background: var(--primary);
2105 color: white;
2106}
2107
2108.status-button-primary:hover {
2109 background: var(--primary-dark);
2110}
2111
2112.status-button-cancel {
2113 background: var(--error-bg);
2114 color: var(--error-text);
2115 border: 1px solid var(--error-border);
2116}
2117
2118.status-button-cancel:hover:not(:disabled) {
2119 background: var(--error-text);
2120 color: white;
2121}
2122
2123.status-button-cancel:disabled {
2124 opacity: 0.6;
2125 cursor: not-allowed;
2126}
2127
2128.status-button-text {
2129 background: transparent;
2130 color: var(--text-secondary);
2131 padding: 0.25rem;
2132}
2133
2134.status-button-text:hover {
2135 background: var(--bg-tertiary);
2136 color: var(--text-primary);
2137}
2138
2139/* Legacy disconnect/error banner classes (kept for compatibility but unused) */
2140.disconnect-banner {
2141 background: var(--gray-100);
2142 border-top: 1px solid var(--border);
2143 padding: 0.5rem 1rem;
2144}
2145
2146.dark .disconnect-banner {
2147 background: var(--gray-800);
2148}
2149
2150.disconnect-banner-content {
2151 display: flex;
2152 align-items: center;
2153 justify-content: center;
2154 gap: 0.75rem;
2155}
2156
2157.disconnect-message {
2158 color: var(--text-secondary);
2159 font-size: 0.875rem;
2160 margin: 0;
2161}
2162
2163.btn-reconnect {
2164 padding: 0.25rem 0.75rem;
2165 background: var(--primary);
2166 color: white;
2167 border-radius: 0.375rem;
2168 font-size: 0.875rem;
2169 font-weight: 500;
2170 transition: background-color 0.2s;
2171}
2172
2173.btn-reconnect:hover {
2174 background: var(--primary-dark);
2175}
2176
2177.error-banner {
2178 background: var(--error-bg);
2179 border-top: 1px solid var(--error-border);
2180 padding: 0.75rem 1rem;
2181}
2182
2183.error-banner-content {
2184 display: flex;
2185 align-items: center;
2186 justify-content: space-between;
2187}
2188
2189.error-message {
2190 color: var(--error-text);
2191 font-size: 0.875rem;
2192}
2193
2194/* Empty State */
2195.empty-state {
2196 display: flex;
2197 align-items: center;
2198 justify-content: center;
2199 height: 100%;
2200 color: var(--text-secondary);
2201}
2202
2203.empty-state-content {
2204 text-align: center;
2205}
2206
2207/* Scrollbar */
2208.scrollable {
2209 scrollbar-width: thin;
2210 scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
2211}
2212
2213.scrollable::-webkit-scrollbar {
2214 width: 6px;
2215}
2216
2217.scrollable::-webkit-scrollbar-track {
2218 background: transparent;
2219}
2220
2221.scrollable::-webkit-scrollbar-thumb {
2222 background-color: rgba(156, 163, 175, 0.5);
2223 border-radius: 3px;
2224}
2225
2226.scrollable::-webkit-scrollbar-thumb:hover {
2227 background-color: rgba(156, 163, 175, 0.8);
2228}
2229
2230/* SVG Icons */
2231svg {
2232 width: 1.25rem;
2233 height: 1.25rem;
2234 display: block;
2235}
2236
2237.icon-sm svg {
2238 width: 1rem;
2239 height: 1rem;
2240}
2241
2242/* Utility Classes */
2243.relative {
2244 position: relative;
2245}
2246
2247.overflow-auto {
2248 overflow: auto;
2249}
2250
2251.overflow-hidden {
2252 overflow: hidden;
2253}
2254
2255.rounded {
2256 border-radius: 0.25rem;
2257}
2258
2259.rounded-lg {
2260 border-radius: 0.5rem;
2261}
2262
2263.border {
2264 border: 1px solid var(--border);
2265}
2266
2267.min-h-0 {
2268 min-height: 0;
2269}
2270
2271/* Overflow Menu */
2272.overflow-menu {
2273 position: absolute;
2274 top: calc(100% + 0.5rem);
2275 right: 0;
2276 background: var(--bg-secondary);
2277 border: 1px solid var(--border);
2278 border-radius: 0.5rem;
2279 box-shadow:
2280 0 4px 6px -1px rgba(0, 0, 0, 0.1),
2281 0 2px 4px -1px rgba(0, 0, 0, 0.06);
2282 min-width: 10rem;
2283 z-index: 50;
2284}
2285
2286.overflow-menu-item {
2287 display: flex;
2288 align-items: center;
2289 width: 100%;
2290 padding: 0.75rem 1rem;
2291 text-align: left;
2292 background: transparent;
2293 border: none;
2294 color: var(--text-primary);
2295 font-size: 0.875rem;
2296 cursor: pointer;
2297 transition: background-color 0.2s;
2298}
2299
2300.overflow-menu-item:hover {
2301 background: var(--bg-hover);
2302}
2303
2304.overflow-menu-item:first-child {
2305 border-top-left-radius: 0.5rem;
2306 border-top-right-radius: 0.5rem;
2307}
2308
2309.overflow-menu-item:last-child {
2310 border-bottom-left-radius: 0.5rem;
2311 border-bottom-right-radius: 0.5rem;
2312}
2313
2314.overflow-menu-divider {
2315 height: 1px;
2316 background: var(--border);
2317 margin: 0.5rem 0;
2318}
2319
2320.theme-toggle-row {
2321 display: flex;
2322 gap: 0.25rem;
2323 padding: 0.5rem;
2324}
2325
2326.theme-toggle-btn {
2327 flex: 1;
2328 display: flex;
2329 align-items: center;
2330 justify-content: center;
2331 padding: 0.5rem;
2332 background: transparent;
2333 border: 1px solid var(--border);
2334 border-radius: 0.375rem;
2335 color: var(--text-secondary);
2336 cursor: pointer;
2337 transition: all 0.15s;
2338}
2339
2340.theme-toggle-btn svg {
2341 width: 1.125rem;
2342 height: 1.125rem;
2343}
2344
2345.theme-toggle-btn:hover {
2346 background: var(--bg-tertiary);
2347 color: var(--text-primary);
2348}
2349
2350.theme-toggle-btn-selected {
2351 background: var(--primary);
2352 border-color: var(--primary);
2353 color: white;
2354}
2355
2356.theme-toggle-btn-selected:hover {
2357 background: var(--primary-dark);
2358 border-color: var(--primary-dark);
2359 color: white;
2360}
2361
2362/* Diff display styling */
2363.diff-display {
2364 font-family: var(--font-mono);
2365 font-size: 0.875rem;
2366 line-height: 1.5;
2367 background: var(--bg-base);
2368 padding: 1rem;
2369 border-radius: 0.25rem;
2370 overflow-x: auto;
2371 white-space: pre;
2372 color: var(--text-primary);
2373}
2374
2375/* Responsive adjustments */
2376@media (min-width: 768px) {
2377 .drawer {
2378 position: static;
2379 transform: translateX(0) !important;
2380 }
2381
2382 .drawer.collapsed {
2383 display: none;
2384 }
2385
2386 .hide-on-desktop {
2387 display: none !important;
2388 }
2389
2390 .show-on-desktop-only {
2391 display: flex !important;
2392 }
2393
2394 .backdrop {
2395 display: none !important;
2396 }
2397}
2398
2399/* Hide desktop-only elements on mobile */
2400@media (max-width: 767px) {
2401 .show-on-desktop-only {
2402 display: none !important;
2403 }
2404}
2405
2406/* Scroll to bottom button */
2407.scroll-to-bottom-button {
2408 position: absolute;
2409 bottom: 1rem;
2410 left: 50%;
2411 transform: translateX(-50%);
2412 background: var(--bg-elevated);
2413 border: 1px solid var(--border);
2414 border-radius: 2rem;
2415 padding: 0.5rem 1rem;
2416 display: flex;
2417 align-items: center;
2418 gap: 0.5rem;
2419 cursor: pointer;
2420 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
2421 transition: all 0.2s ease;
2422 color: var(--text-primary);
2423 font-size: 0.875rem;
2424 z-index: 10;
2425}
2426
2427.scroll-to-bottom-button:hover {
2428 background: var(--bg-hover);
2429 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
2430}
2431
2432.scroll-to-bottom-button:active {
2433 transform: translateX(-50%) scale(0.95);
2434}
2435
2436/* Wrapper for messages area to position scroll-to-bottom button */
2437.messages-area-wrapper {
2438 position: relative;
2439 flex: 1 1 auto;
2440 min-height: 0; /* Important for flex children to shrink properly */
2441 overflow: hidden;
2442}
2443
2444.messages-container {
2445 height: 100%;
2446}
2447
2448/* Status bar configuration controls for empty conversations */
2449.status-bar-config {
2450 display: flex;
2451 align-items: center;
2452 gap: 0.75rem;
2453 width: 100%;
2454}
2455
2456.status-bar-new-conversation {
2457 display: flex;
2458 align-items: center;
2459 justify-content: space-between;
2460 width: 100%;
2461 flex-wrap: wrap;
2462 gap: 0.5rem;
2463}
2464
2465/* On smaller screens, allow the fields to stack vertically */
2466@media (max-width: 600px) {
2467 .status-bar-new-conversation {
2468 flex-direction: column;
2469 align-items: stretch;
2470 }
2471
2472 .status-field {
2473 width: 100%;
2474 }
2475}
2476
2477.status-bar-controls {
2478 display: flex;
2479 align-items: center;
2480 gap: 0.5rem;
2481}
2482
2483/* Flexible containers for status fields that adapt to content */
2484.status-field {
2485 display: flex;
2486 align-items: center;
2487 gap: 0.25rem;
2488 min-width: 0; /* Allow flex items to shrink below content size */
2489}
2490
2491.status-field-label {
2492 font-size: 0.7rem;
2493 color: var(--text-secondary);
2494 flex-shrink: 0;
2495}
2496
2497.status-field-model {
2498 flex: 1 1 auto;
2499 min-width: 150px;
2500 max-width: 300px;
2501}
2502
2503.status-field-cwd {
2504 flex: 1 1 auto;
2505 min-width: 180px;
2506 max-width: 400px;
2507}
2508
2509/* Compact clickable chips for model and cwd */
2510.status-chip {
2511 padding: 0.25rem 0.5rem;
2512 border: 1px solid var(--border);
2513 border-radius: 0.25rem;
2514 background: var(--bg-tertiary);
2515 color: var(--text-primary);
2516 font-size: 0.75rem;
2517 font-family: var(--font-mono);
2518 cursor: pointer;
2519 transition: all 0.2s;
2520 white-space: normal; /* Allow text to wrap */
2521 word-break: break-word; /* Break long words if needed */
2522 overflow-wrap: break-word;
2523 width: 100%;
2524 text-align: left;
2525 box-sizing: border-box;
2526 line-height: 1.3; /* Better line height for multi-line text */
2527 min-height: 1.75rem; /* Minimum height to accommodate wrapped text */
2528}
2529
2530.status-chip:hover:not(:disabled) {
2531 background: var(--bg-secondary);
2532 border-color: var(--blue-text);
2533}
2534
2535.status-chip:disabled {
2536 opacity: 0.5;
2537 cursor: not-allowed;
2538}
2539
2540.status-chip-error {
2541 border-color: var(--red-text, #dc2626);
2542 background: rgba(220, 38, 38, 0.1);
2543}
2544
2545.status-field-error {
2546 position: relative;
2547}
2548
2549.status-input-error {
2550 border-color: var(--red-text, #dc2626);
2551}
2552
2553.status-select {
2554 padding: 0.25rem 0.5rem;
2555 border: 1px solid var(--blue-text);
2556 border-radius: 0.25rem;
2557 background: var(--bg-base);
2558 color: var(--text-primary);
2559 font-size: 0.75rem;
2560 font-family: var(--font-mono);
2561 cursor: pointer;
2562 transition: border-color 0.2s;
2563 width: 100%;
2564 box-sizing: border-box;
2565}
2566
2567.status-select:hover:not(:disabled) {
2568 border-color: var(--blue-text);
2569}
2570
2571.status-select:focus {
2572 outline: none;
2573 border-color: var(--blue-text);
2574 box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
2575}
2576
2577.status-select:disabled {
2578 opacity: 0.5;
2579 cursor: not-allowed;
2580}
2581
2582/* Model Picker Custom Dropdown */
2583.model-picker {
2584 position: relative;
2585 display: inline-block;
2586 width: 100%;
2587}
2588
2589.model-picker-trigger {
2590 display: flex;
2591 align-items: center;
2592 justify-content: space-between;
2593 gap: 0.5rem;
2594 padding: 0.25rem 0.5rem;
2595 border: 1px solid var(--border);
2596 border-radius: 0.25rem;
2597 background: var(--bg-tertiary);
2598 color: var(--text-primary);
2599 font-size: 0.75rem;
2600 font-family: var(--font-mono);
2601 cursor: pointer;
2602 transition: all 0.2s;
2603 width: 100%;
2604 text-align: left;
2605 box-sizing: border-box;
2606 min-height: 1.75rem;
2607}
2608
2609.model-picker-trigger:hover:not(:disabled) {
2610 background: var(--bg-secondary);
2611 border-color: var(--blue-text);
2612}
2613
2614.model-picker-trigger:disabled {
2615 opacity: 0.5;
2616 cursor: not-allowed;
2617}
2618
2619.model-picker-value {
2620 flex: 1;
2621 overflow: hidden;
2622 text-overflow: ellipsis;
2623 white-space: nowrap;
2624}
2625
2626.model-picker-chevron {
2627 flex-shrink: 0;
2628 transition: transform 0.2s;
2629 opacity: 0.6;
2630}
2631
2632.model-picker-chevron.open {
2633 transform: rotate(180deg);
2634}
2635
2636.model-picker-dropdown {
2637 position: absolute;
2638 top: 100%;
2639 left: 0;
2640 right: 0;
2641 margin-top: 2px;
2642 background: var(--bg-secondary);
2643 border: 1px solid var(--border);
2644 border-radius: 0.375rem;
2645 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
2646 z-index: 1000;
2647 max-height: 300px;
2648 overflow: hidden;
2649 display: flex;
2650 flex-direction: column;
2651}
2652
2653.model-picker-dropdown.open-upward {
2654 top: auto;
2655 bottom: 100%;
2656 margin-top: 0;
2657 margin-bottom: 2px;
2658}
2659
2660.model-picker-options {
2661 overflow-y: auto;
2662 max-height: 220px;
2663}
2664
2665.model-picker-option {
2666 display: flex;
2667 align-items: center;
2668 gap: 0.5rem;
2669 width: 100%;
2670 padding: 0.5rem 0.75rem;
2671 border: none;
2672 background: transparent;
2673 color: var(--text-primary);
2674 font-size: 0.8rem;
2675 font-family: var(--font-mono);
2676 cursor: pointer;
2677 text-align: left;
2678 transition: background 0.15s;
2679}
2680
2681.model-picker-option:hover:not(:disabled) {
2682 background: var(--bg-tertiary);
2683}
2684
2685.model-picker-option.selected {
2686 background: var(--bg-tertiary);
2687}
2688
2689.model-picker-option.disabled {
2690 opacity: 0.5;
2691 cursor: not-allowed;
2692}
2693
2694.model-picker-option-content {
2695 flex: 1;
2696 display: flex;
2697 flex-direction: column;
2698 gap: 0.125rem;
2699 min-width: 0;
2700}
2701
2702.model-picker-option-name {
2703 overflow: hidden;
2704 text-overflow: ellipsis;
2705 white-space: nowrap;
2706}
2707
2708.model-picker-option-source {
2709 font-size: 0.65rem;
2710 color: var(--text-secondary);
2711 overflow: hidden;
2712 text-overflow: ellipsis;
2713 white-space: nowrap;
2714}
2715
2716.model-picker-option-badge {
2717 font-size: 0.65rem;
2718 color: var(--text-secondary);
2719 background: var(--bg-base);
2720 padding: 0.125rem 0.375rem;
2721 border-radius: 0.25rem;
2722}
2723
2724.model-picker-option-check {
2725 flex-shrink: 0;
2726 color: var(--green-text);
2727}
2728
2729.model-picker-divider {
2730 height: 1px;
2731 background: var(--border);
2732 margin: 0.25rem 0;
2733}
2734
2735.model-picker-manage {
2736 color: var(--blue-text);
2737}
2738
2739.model-picker-manage:hover {
2740 background: var(--bg-tertiary);
2741}
2742
2743.model-picker-manage svg {
2744 flex-shrink: 0;
2745}
2746
2747.status-input {
2748 padding: 0.25rem 0.5rem;
2749 border: 1px solid var(--blue-text);
2750 border-radius: 0.25rem;
2751 background: var(--bg-base);
2752 color: var(--text-primary);
2753 font-size: 0.75rem;
2754 font-family: var(--font-mono);
2755 transition: border-color 0.2s;
2756 width: 100%;
2757 box-sizing: border-box;
2758}
2759
2760.status-input::placeholder {
2761 color: var(--text-secondary);
2762 opacity: 0.6;
2763}
2764
2765.status-input:hover:not(:disabled) {
2766 border-color: var(--blue-text);
2767}
2768
2769.status-input:focus {
2770 outline: none;
2771 border-color: var(--blue-text);
2772 box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
2773}
2774
2775.status-input:disabled {
2776 opacity: 0.5;
2777 cursor: not-allowed;
2778}
2779
2780/* Responsive adjustments for status bar controls */
2781@media (max-width: 768px) {
2782 .status-bar-config {
2783 flex-wrap: wrap;
2784 gap: 0.5rem;
2785 }
2786
2787 .status-bar-controls {
2788 flex-wrap: wrap;
2789 gap: 0.5rem;
2790 }
2791
2792 .status-field-model {
2793 min-width: 120px;
2794 max-width: 200px;
2795 }
2796
2797 .status-field-cwd {
2798 min-width: 140px;
2799 max-width: 250px;
2800 }
2801}
2802
2803/* Directory Picker Modal */
2804.directory-picker-modal {
2805 max-width: 32rem;
2806 max-height: 70vh;
2807 display: flex;
2808 flex-direction: column;
2809}
2810
2811.directory-picker-body {
2812 flex: 1;
2813 display: flex;
2814 flex-direction: column;
2815 min-height: 0;
2816 overflow: hidden;
2817}
2818
2819.directory-picker-input-container {
2820 margin-bottom: 0.75rem;
2821}
2822
2823.directory-picker-input {
2824 width: 100%;
2825 padding: 0.5rem 0.75rem;
2826 border: 1px solid var(--border);
2827 border-radius: 0.25rem;
2828 background: var(--bg-base);
2829 color: var(--text-primary);
2830 font-family: var(--font-mono);
2831 font-size: 0.875rem;
2832}
2833
2834.directory-picker-input:focus {
2835 outline: none;
2836 border-color: var(--primary);
2837 box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
2838}
2839
2840.directory-picker-current {
2841 display: flex;
2842 align-items: center;
2843 gap: 0.5rem;
2844 font-size: 0.75rem;
2845 color: var(--text-secondary);
2846 font-family: var(--font-mono);
2847 margin-bottom: 0.5rem;
2848 padding: 0.25rem 0;
2849}
2850
2851.directory-picker-current-path {
2852 flex-shrink: 0;
2853}
2854
2855.directory-picker-current-git .directory-picker-current-path {
2856 color: var(--accent-color, #f97316);
2857}
2858
2859.directory-picker-current-subject {
2860 flex: 1;
2861 min-width: 0;
2862 color: var(--text-tertiary);
2863 white-space: nowrap;
2864 overflow: hidden;
2865 text-overflow: ellipsis;
2866 text-align: right;
2867}
2868
2869.directory-picker-filter {
2870 color: var(--primary);
2871 font-weight: 500;
2872}
2873
2874.directory-picker-error {
2875 padding: 0.5rem 0.75rem;
2876 background: var(--error-bg);
2877 border: 1px solid var(--error-border);
2878 border-radius: 0.25rem;
2879 color: var(--error-text);
2880 font-size: 0.875rem;
2881 margin-bottom: 0.75rem;
2882}
2883
2884.directory-picker-loading {
2885 display: flex;
2886 align-items: center;
2887 gap: 0.5rem;
2888 padding: 1rem;
2889 color: var(--text-secondary);
2890 font-size: 0.875rem;
2891}
2892
2893.directory-picker-list {
2894 flex: 1;
2895 overflow-y: auto;
2896 border: 1px solid var(--border);
2897 border-radius: 0.25rem;
2898 min-height: 200px;
2899 max-height: 300px;
2900}
2901
2902.directory-picker-entry {
2903 display: flex;
2904 align-items: center;
2905 gap: 0.5rem;
2906 width: 100%;
2907 padding: 0.5rem 0.75rem;
2908 text-align: left;
2909 background: transparent;
2910 border: none;
2911 border-bottom: 1px solid var(--border);
2912 color: var(--text-primary);
2913 font-size: 0.875rem;
2914 font-family: var(--font-mono);
2915 cursor: pointer;
2916 transition: background-color 0.15s;
2917}
2918
2919.directory-picker-entry:last-child {
2920 border-bottom: none;
2921}
2922
2923.directory-picker-entry:hover {
2924 background: var(--bg-tertiary);
2925}
2926
2927.directory-picker-entry-parent {
2928 color: var(--text-secondary);
2929 font-weight: 500;
2930}
2931
2932.directory-picker-icon {
2933 width: 1rem;
2934 height: 1rem;
2935 flex-shrink: 0;
2936 color: var(--text-secondary);
2937}
2938
2939.directory-picker-entry-name {
2940 flex-shrink: 0;
2941}
2942
2943.directory-picker-entry-git .directory-picker-icon {
2944 color: var(--accent-color, #f97316);
2945}
2946
2947.directory-picker-git-subject {
2948 flex: 1;
2949 min-width: 0;
2950 color: var(--text-tertiary);
2951 font-size: 0.75rem;
2952 white-space: nowrap;
2953 overflow: hidden;
2954 text-overflow: ellipsis;
2955 text-align: right;
2956}
2957
2958.directory-picker-empty {
2959 padding: 2rem;
2960 text-align: center;
2961 color: var(--text-tertiary);
2962 font-size: 0.875rem;
2963}
2964
2965.directory-picker-footer {
2966 display: flex;
2967 align-items: center;
2968 gap: 0.5rem;
2969 padding: 1rem;
2970 border-top: 1px solid var(--border);
2971}
2972
2973.directory-picker-footer-spacer {
2974 flex: 1;
2975}
2976
2977.directory-picker-new-btn {
2978 display: flex;
2979 align-items: center;
2980 gap: 0.375rem;
2981}
2982
2983.directory-picker-new-icon {
2984 width: 1rem;
2985 height: 1rem;
2986}
2987
2988/* Create directory form inside the list */
2989.directory-picker-create-form {
2990 display: flex;
2991 align-items: center;
2992 gap: 0.5rem;
2993 padding: 0.5rem 0.75rem;
2994 background: var(--bg-tertiary);
2995 border-bottom: 1px solid var(--border);
2996}
2997
2998.directory-picker-create-input {
2999 flex: 1;
3000 padding: 0.375rem 0.5rem;
3001 border: 1px solid var(--border);
3002 border-radius: 0.25rem;
3003 background: var(--bg-base);
3004 color: var(--text-primary);
3005 font-family: var(--font-mono);
3006 font-size: 0.875rem;
3007}
3008
3009.directory-picker-create-input:focus {
3010 outline: none;
3011 border-color: var(--primary);
3012}
3013
3014.directory-picker-create-btn {
3015 display: flex;
3016 align-items: center;
3017 justify-content: center;
3018 width: 1.75rem;
3019 height: 1.75rem;
3020 padding: 0;
3021 border: none;
3022 border-radius: 0.25rem;
3023 background: var(--primary);
3024 color: white;
3025 cursor: pointer;
3026 transition: background-color 0.15s;
3027}
3028
3029.directory-picker-create-btn:hover:not(:disabled) {
3030 background: var(--primary-hover);
3031}
3032
3033.directory-picker-create-btn:disabled {
3034 opacity: 0.5;
3035 cursor: not-allowed;
3036}
3037
3038.directory-picker-create-btn svg {
3039 width: 1rem;
3040 height: 1rem;
3041}
3042
3043.directory-picker-cancel-btn {
3044 background: var(--bg-secondary);
3045 color: var(--text-secondary);
3046}
3047
3048.directory-picker-cancel-btn:hover:not(:disabled) {
3049 background: var(--bg-tertiary);
3050}
3051
3052.directory-picker-create-error {
3053 padding: 0.375rem 0.75rem;
3054 background: var(--error-bg);
3055 color: var(--error-text);
3056 font-size: 0.75rem;
3057 border-bottom: 1px solid var(--error-border);
3058}
3059
3060/* Screen reader only */
3061.sr-only {
3062 position: absolute;
3063 width: 1px;
3064 height: 1px;
3065 padding: 0;
3066 margin: -1px;
3067 overflow: hidden;
3068 clip: rect(0, 0, 0, 0);
3069 white-space: nowrap;
3070 border: 0;
3071}
3072
3073/* Context Usage Bar */
3074/* Status bar for active conversation */
3075.status-bar-active {
3076 display: flex;
3077 align-items: center;
3078 justify-content: space-between;
3079 width: 100%;
3080}
3081
3082.status-working-group {
3083 display: flex;
3084 align-items: center;
3085 gap: 0.5rem;
3086}
3087
3088.status-stop-button {
3089 display: flex;
3090 align-items: center;
3091 gap: 0.25rem;
3092 padding: 0.25rem 0.5rem;
3093 border: none;
3094 border-radius: 0.25rem;
3095 background: var(--error-bg);
3096 color: var(--error-text);
3097 cursor: pointer;
3098 transition: all 0.15s ease;
3099 font-size: 0.75rem;
3100 font-weight: 500;
3101}
3102
3103.status-stop-button:hover:not(:disabled) {
3104 background: var(--error-text);
3105 color: white;
3106}
3107
3108.status-stop-button:disabled {
3109 opacity: 0.5;
3110 cursor: not-allowed;
3111}
3112
3113.status-stop-button svg {
3114 width: 0.75rem;
3115 height: 0.75rem;
3116 flex-shrink: 0;
3117}
3118
3119.status-stop-label {
3120 white-space: nowrap;
3121}
3122
3123/* Hide stop label on small screens */
3124@media (max-width: 500px) {
3125 .status-stop-label {
3126 display: none;
3127 }
3128 .status-stop-button {
3129 padding: 0.25rem;
3130 }
3131}
3132
3133.context-usage-bar-container {
3134 display: flex;
3135 align-items: center;
3136 gap: 4px;
3137}
3138
3139.context-warning-icon {
3140 font-size: 14px;
3141 line-height: 1;
3142 cursor: help;
3143}
3144
3145.context-usage-bar {
3146 width: 60px;
3147 height: 6px;
3148 background: var(--bg-tertiary);
3149 border-radius: 3px;
3150 overflow: hidden;
3151 cursor: pointer;
3152}
3153
3154.context-usage-fill {
3155 height: 100%;
3156 border-radius: 3px;
3157 transition:
3158 width 0.3s ease,
3159 background-color 0.3s ease;
3160}
3161
3162/* Mobile optimizations for tighter spacing */
3163@media (max-width: 767px) {
3164 .header {
3165 padding: 0.375rem 0.75rem;
3166 padding-top: calc(0.375rem + env(safe-area-inset-top, 0px));
3167 }
3168
3169 .status-bar {
3170 padding: 0.375rem 0.75rem;
3171 min-height: 2rem;
3172 }
3173
3174 .message-input-container {
3175 padding: 0.5rem 0.75rem;
3176 padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
3177 }
3178}
3179
3180/* Print styles - looks like the chat window, just without chrome */
3181@media print {
3182 /* Reset page layout */
3183 html,
3184 body {
3185 height: auto !important;
3186 overflow: visible !important;
3187 background: white !important;
3188 }
3189
3190 /* Hide interactive chrome but keep the header title */
3191 .status-bar,
3192 .message-input-container,
3193 .drawer,
3194 .backdrop,
3195 .scroll-to-bottom-button,
3196 .overflow-menu,
3197 .context-menu,
3198 .modal-overlay {
3199 display: none !important;
3200 }
3201
3202 /* Hide header buttons but keep the title */
3203 .header-actions,
3204 .header .btn-icon {
3205 display: none !important;
3206 }
3207
3208 /* Simplify header for print */
3209 .header {
3210 background: white !important;
3211 border-bottom: 1px solid #e5e7eb !important;
3212 padding: 0.75rem 1rem !important;
3213 }
3214
3215 .header-title {
3216 font-size: 1rem !important;
3217 }
3218
3219 /* Reset app container for print */
3220 .app-container {
3221 display: block !important;
3222 height: auto !important;
3223 background: white !important;
3224 }
3225
3226 .main-content {
3227 display: block !important;
3228 height: auto !important;
3229 }
3230
3231 /* Reset messages area to flow naturally */
3232 .messages-area-wrapper {
3233 height: auto !important;
3234 overflow: visible !important;
3235 position: static !important;
3236 background: white !important;
3237 }
3238
3239 .messages-container {
3240 height: auto !important;
3241 overflow: visible !important;
3242 position: static !important;
3243 background: white !important;
3244 }
3245
3246 .messages-list {
3247 background: white !important;
3248 }
3249
3250 /* Hide empty state in print */
3251 .empty-state {
3252 display: none !important;
3253 }
3254
3255 /* Keep message styling, just add page break hints */
3256 .message {
3257 page-break-inside: avoid;
3258 }
3259
3260 /* Tool results */
3261 .tool-result-details {
3262 page-break-inside: avoid;
3263 }
3264
3265 /* Code blocks */
3266 pre,
3267 code {
3268 page-break-inside: avoid;
3269 }
3270
3271 /* Screenshots and images - ensure they fit */
3272 .screenshot-preview,
3273 .screenshot-image,
3274 .read-image-preview {
3275 max-width: 100% !important;
3276 height: auto !important;
3277 page-break-inside: avoid;
3278 }
3279}
3280/* Diff Viewer Overlay */
3281.diff-viewer-overlay {
3282 position: fixed;
3283 top: 0;
3284 left: 0;
3285 right: 0;
3286 bottom: 0;
3287 background: rgba(0, 0, 0, 0.5);
3288 z-index: 1000;
3289 display: flex;
3290 align-items: center;
3291 justify-content: center;
3292 padding: 1rem;
3293 padding-top: max(1rem, env(safe-area-inset-top));
3294 padding-bottom: max(1rem, env(safe-area-inset-bottom));
3295}
3296
3297.diff-viewer-container {
3298 background: var(--bg-base);
3299 border-radius: 0.5rem;
3300 width: calc(100% - 2rem);
3301 max-width: none;
3302 height: calc(100% - 2rem);
3303 max-height: none;
3304 display: flex;
3305 flex-direction: column;
3306 overflow: hidden;
3307 box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
3308}
3309
3310.diff-viewer-header {
3311 display: flex;
3312 flex-direction: column;
3313 gap: 0.5rem;
3314 padding: 0.5rem 0.75rem;
3315 background: var(--bg-secondary);
3316 border-bottom: 1px solid var(--border-color);
3317}
3318
3319.diff-viewer-header-row {
3320 display: flex;
3321 align-items: center;
3322 gap: 0.5rem;
3323 width: 100%;
3324}
3325
3326.diff-viewer-selectors-row {
3327 display: flex;
3328 flex: 1;
3329 gap: 0.5rem;
3330 min-width: 0;
3331}
3332
3333.diff-viewer-selectors-row .diff-viewer-select {
3334 flex: 1;
3335 min-width: 0;
3336 max-width: none;
3337}
3338
3339.diff-viewer-file-selector-wrapper {
3340 display: flex;
3341 align-items: center;
3342 gap: 0.5rem;
3343 flex: 1;
3344 min-width: 0;
3345}
3346
3347.diff-viewer-file-selector-wrapper .diff-viewer-select {
3348 flex: 1;
3349 min-width: 0;
3350}
3351
3352.diff-viewer-file-index {
3353 font-size: 0.75rem;
3354 color: var(--text-secondary);
3355 white-space: nowrap;
3356 flex-shrink: 0;
3357}
3358
3359.diff-viewer-controls-row {
3360 display: flex;
3361 align-items: center;
3362 gap: 0.5rem;
3363 flex-shrink: 0;
3364}
3365
3366.diff-viewer-header-mobile {
3367 flex-direction: row;
3368 align-items: center;
3369 gap: 0.5rem;
3370 padding: 0.375rem 0.5rem;
3371}
3372
3373.diff-viewer-mobile-selectors {
3374 display: flex;
3375 flex: 1;
3376 gap: 0.375rem;
3377 min-width: 0;
3378}
3379
3380.diff-viewer-mobile-selectors .diff-viewer-select {
3381 flex: 1;
3382 min-width: 0;
3383 font-size: 0.75rem;
3384 padding: 0.375rem;
3385}
3386
3387.diff-viewer-mode-toggle {
3388 display: flex;
3389 border: 1px solid var(--border-color);
3390 border-radius: 0.25rem;
3391 overflow: hidden;
3392}
3393
3394.diff-viewer-mode-btn {
3395 padding: 0.25rem 0.5rem;
3396 border: none;
3397 background: var(--bg-base);
3398 color: var(--text-secondary);
3399 cursor: pointer;
3400 font-size: 0.875rem;
3401}
3402
3403.diff-viewer-mode-btn:first-child {
3404 border-right: 1px solid var(--border-color);
3405}
3406
3407.diff-viewer-mode-btn.active {
3408 background: var(--blue-bg);
3409 color: var(--blue-text);
3410}
3411
3412.diff-viewer-mode-btn:hover:not(.active) {
3413 background: var(--bg-tertiary);
3414}
3415
3416.diff-viewer-nav-buttons {
3417 display: flex;
3418 gap: 0.125rem;
3419}
3420
3421.diff-viewer-nav-btn {
3422 padding: 0.25rem 0.5rem;
3423 border: 1px solid var(--border-color);
3424 background: var(--bg-base);
3425 color: var(--text-primary);
3426 cursor: pointer;
3427 border-radius: 0.25rem;
3428 font-size: 0.875rem;
3429}
3430
3431.diff-viewer-nav-btn:disabled {
3432 opacity: 0.4;
3433 cursor: not-allowed;
3434}
3435
3436.diff-viewer-nav-btn:hover:not(:disabled) {
3437 background: var(--bg-tertiary);
3438}
3439
3440.diff-viewer-select {
3441 flex: 1;
3442 min-width: 120px;
3443 max-width: 300px;
3444 padding: 0.5rem;
3445 border: 1px solid var(--border-color);
3446 border-radius: 0.25rem;
3447 background: var(--bg-base);
3448 color: var(--text-primary);
3449 font-size: 0.875rem;
3450}
3451
3452.diff-viewer-close {
3453 width: 2rem;
3454 height: 2rem;
3455 border: none;
3456 background: transparent;
3457 color: var(--text-secondary);
3458 font-size: 1.5rem;
3459 cursor: pointer;
3460 border-radius: 0.25rem;
3461 display: flex;
3462 align-items: center;
3463 justify-content: center;
3464 flex-shrink: 0;
3465}
3466
3467.diff-viewer-close:hover {
3468 background: var(--bg-tertiary);
3469 color: var(--text-primary);
3470}
3471
3472.diff-viewer-error {
3473 padding: 0.5rem 1rem;
3474 background: var(--error-bg);
3475 color: var(--error-text);
3476 font-size: 0.875rem;
3477}
3478
3479.diff-viewer-toast {
3480 position: fixed;
3481 bottom: 24px;
3482 right: 24px;
3483 padding: 12px 16px;
3484 border-radius: 8px;
3485 font-size: 14px;
3486 font-weight: 500;
3487 z-index: 9999;
3488 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
3489 animation: toast-fade-in 0.2s ease;
3490 color: #ffffff;
3491}
3492
3493.diff-viewer-toast-saving {
3494 background: #1976d2;
3495}
3496
3497.diff-viewer-toast-saved {
3498 background: #2e7d32;
3499}
3500
3501.diff-viewer-toast-error {
3502 background: #d32f2f;
3503}
3504
3505.diff-viewer-toast-hint {
3506 background: var(--bg-tertiary);
3507 color: var(--text-primary);
3508 border: 1px solid var(--border-color);
3509}
3510
3511@keyframes toast-fade-in {
3512 from {
3513 opacity: 0;
3514 transform: translateY(10px);
3515 }
3516 to {
3517 opacity: 1;
3518 transform: translateY(0);
3519 }
3520}
3521
3522.diff-viewer-content {
3523 flex: 1;
3524 overflow: hidden;
3525 position: relative;
3526}
3527
3528.diff-viewer-loading,
3529.diff-viewer-empty {
3530 display: flex;
3531 flex-direction: column;
3532 align-items: center;
3533 justify-content: center;
3534 height: 100%;
3535 color: var(--text-secondary);
3536 gap: 0.5rem;
3537}
3538
3539.diff-viewer-hint {
3540 font-size: 0.875rem;
3541 opacity: 0.7;
3542}
3543
3544.diff-viewer-editor {
3545 height: 100%;
3546 width: 100%;
3547}
3548
3549/* Diff viewer line hover highlighting (via decoration API) */
3550.diff-viewer-editor .monaco-editor .diff-viewer-line-hover {
3551 background-color: rgba(37, 99, 235, 0.08) !important;
3552}
3553
3554.dark .diff-viewer-editor .monaco-editor .diff-viewer-line-hover {
3555 background-color: rgba(96, 165, 250, 0.12) !important;
3556}
3557
3558/* Comment indicator glyph in margin for diff viewer */
3559.diff-viewer-editor .monaco-editor .diff-viewer-comment-glyph {
3560 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");
3561 background-size: 14px 14px;
3562 background-repeat: no-repeat;
3563 background-position: center;
3564 opacity: 0.6;
3565 cursor: pointer;
3566}
3567
3568.diff-viewer-editor .monaco-editor .diff-viewer-comment-glyph:hover {
3569 opacity: 1;
3570}
3571
3572.dark .diff-viewer-editor .monaco-editor .diff-viewer-comment-glyph {
3573 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");
3574}
3575
3576/* Make diff viewer Monaco lines clickable with pointer cursor */
3577.diff-viewer-editor .monaco-editor .view-lines {
3578 cursor: pointer;
3579}
3580
3581.diff-viewer-comment-badge {
3582 position: absolute;
3583 bottom: 1rem;
3584 left: 1rem;
3585 padding: 0.5rem 1rem;
3586 background: var(--blue-bg);
3587 color: var(--blue-text);
3588 border-radius: 1rem;
3589 font-size: 0.875rem;
3590 font-weight: 500;
3591}
3592
3593/* Comment dialog */
3594.diff-viewer-comment-dialog {
3595 position: absolute;
3596 top: 50%;
3597 left: 50%;
3598 transform: translate(-50%, -50%);
3599 width: 90%;
3600 max-width: 500px;
3601 background: var(--bg-base);
3602 border: 1px solid var(--border-color);
3603 border-radius: 0.5rem;
3604 padding: 1rem;
3605 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
3606 z-index: 1001;
3607}
3608
3609.diff-viewer-comment-dialog h4 {
3610 margin: 0 0 0.75rem 0;
3611 color: var(--text-primary);
3612}
3613
3614.diff-viewer-selected-text {
3615 margin: 0 0 0.75rem 0;
3616 padding: 0.5rem;
3617 background: var(--bg-tertiary);
3618 border: 1px solid var(--border-color);
3619 border-radius: 0.25rem;
3620 font-size: 0.75rem;
3621 font-family: monospace;
3622 max-height: 150px;
3623 overflow: auto;
3624 white-space: pre;
3625}
3626
3627.diff-viewer-comment-input {
3628 width: 100%;
3629 min-height: 100px;
3630 padding: 0.5rem;
3631 border: 1px solid var(--border-color);
3632 border-radius: 0.25rem;
3633 background: var(--bg-base);
3634 color: var(--text-primary);
3635 font-size: 0.875rem;
3636 resize: vertical;
3637}
3638
3639.diff-viewer-comment-actions {
3640 display: flex;
3641 justify-content: flex-end;
3642 gap: 0.5rem;
3643 margin-top: 0.75rem;
3644}
3645
3646.diff-viewer-btn {
3647 padding: 0.5rem 1rem;
3648 border: none;
3649 border-radius: 0.25rem;
3650 font-size: 0.875rem;
3651 cursor: pointer;
3652}
3653
3654.diff-viewer-btn:disabled {
3655 opacity: 0.5;
3656 cursor: not-allowed;
3657}
3658
3659.diff-viewer-btn-primary {
3660 background: var(--blue-bg);
3661 color: var(--blue-text);
3662}
3663
3664.diff-viewer-btn-primary:hover:not(:disabled) {
3665 filter: brightness(0.95);
3666}
3667
3668.diff-viewer-btn-secondary {
3669 background: var(--bg-tertiary);
3670 color: var(--text-primary);
3671}
3672
3673.diff-viewer-btn-secondary:hover:not(:disabled) {
3674 background: var(--bg-secondary);
3675}
3676
3677/* Mobile floating nav buttons */
3678.diff-viewer-mobile-nav {
3679 position: absolute;
3680 bottom: 1.5rem;
3681 left: 50%;
3682 transform: translateX(-50%);
3683 display: flex;
3684 gap: 0.5rem;
3685 z-index: 100;
3686}
3687
3688.diff-viewer-mobile-nav-btn {
3689 width: 3rem;
3690 height: 3rem;
3691 border: none;
3692 border-radius: 50%;
3693 background: var(--bg-base);
3694 color: var(--text-primary);
3695 cursor: pointer;
3696 display: flex;
3697 align-items: center;
3698 justify-content: center;
3699 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
3700}
3701
3702.diff-viewer-mobile-nav-btn svg {
3703 width: 24px;
3704 height: 24px;
3705}
3706
3707.diff-viewer-mobile-nav-btn:disabled {
3708 opacity: 0.4;
3709 cursor: not-allowed;
3710}
3711
3712.diff-viewer-mobile-nav-btn:active:not(:disabled) {
3713 background: var(--bg-tertiary);
3714 transform: scale(0.95);
3715}
3716
3717.diff-viewer-mobile-mode-btn {
3718 font-size: 1.25rem;
3719}
3720
3721.diff-viewer-mobile-mode-btn.active {
3722 background: var(--blue-bg);
3723 color: var(--blue-text);
3724}
3725
3726/* Monaco comment glyph decoration */
3727/* Mobile optimizations for diff viewer */
3728@media (max-width: 767px) {
3729 .diff-viewer-overlay {
3730 padding: 0;
3731 }
3732
3733 .diff-viewer-container {
3734 border-radius: 0;
3735 width: 100%;
3736 max-width: 100%;
3737 height: 100%;
3738 max-height: 100%;
3739 }
3740
3741 .diff-viewer-close {
3742 width: 1.75rem;
3743 height: 1.75rem;
3744 font-size: 1.25rem;
3745 flex-shrink: 0;
3746 }
3747
3748 /* Monaco editor mobile styles - hide gutters completely */
3749 .diff-viewer-editor .monaco-editor .margin {
3750 display: none !important;
3751 width: 0 !important;
3752 }
3753
3754 .diff-viewer-editor .monaco-editor .margin-view-overlays {
3755 display: none !important;
3756 width: 0 !important;
3757 }
3758
3759 .diff-viewer-editor .monaco-editor .editor-scrollable {
3760 left: 0 !important;
3761 }
3762
3763 .diff-viewer-editor .monaco-editor .lines-content {
3764 margin-left: 0 !important;
3765 }
3766
3767 /* Ensure diff editor uses full width */
3768 .diff-viewer-editor .monaco-diff-editor {
3769 width: 100% !important;
3770 }
3771
3772 .diff-viewer-editor .monaco-diff-editor .editor.modified {
3773 width: 100% !important;
3774 left: 0 !important;
3775 }
3776
3777 /* Comment dialog on top half of screen for mobile (keyboard space) */
3778 .diff-viewer-comment-dialog {
3779 top: 10%;
3780 transform: translate(-50%, 0);
3781 max-height: 40vh;
3782 overflow-y: auto;
3783 }
3784
3785 .diff-viewer-comment-input {
3786 min-height: 60px;
3787 }
3788}
3789
3790/* Injected text indicator (for diff comments) */
3791.injected-text-indicator {
3792 display: flex;
3793 align-items: center;
3794 justify-content: space-between;
3795 padding: 0.5rem 0.75rem;
3796 background: var(--blue-bg);
3797 border-bottom: 1px solid var(--border-color);
3798 gap: 0.5rem;
3799}
3800
3801.injected-text-label {
3802 font-size: 0.875rem;
3803 color: var(--blue-text);
3804 flex: 1;
3805 min-width: 0;
3806 overflow: hidden;
3807 text-overflow: ellipsis;
3808 white-space: nowrap;
3809}
3810
3811.injected-text-insert-btn {
3812 padding: 0.375rem 0.75rem;
3813 background: var(--blue-text);
3814 color: white;
3815 border: none;
3816 border-radius: 0.25rem;
3817 font-size: 0.75rem;
3818 font-weight: 500;
3819 cursor: pointer;
3820 white-space: nowrap;
3821 flex-shrink: 0;
3822}
3823
3824.injected-text-insert-btn:hover {
3825 filter: brightness(1.1);
3826}
3827
3828/* Links in message text */
3829.text-link {
3830 color: var(--blue-text);
3831 text-decoration: underline;
3832 text-underline-offset: 2px;
3833 text-decoration-color: var(--blue-border);
3834}
3835
3836.text-link:hover {
3837 text-decoration-color: var(--blue-text);
3838}
3839
3840/* Command Palette */
3841.command-palette-overlay {
3842 position: fixed;
3843 inset: 0;
3844 background: rgba(0, 0, 0, 0.5);
3845 z-index: 100;
3846 display: flex;
3847 align-items: flex-start;
3848 justify-content: center;
3849 padding-top: 15vh;
3850}
3851
3852.command-palette {
3853 background: var(--bg-base);
3854 border: 1px solid var(--border-color);
3855 border-radius: 0.75rem;
3856 box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
3857 width: 100%;
3858 max-width: 32rem;
3859 max-height: 60vh;
3860 display: flex;
3861 flex-direction: column;
3862 overflow: hidden;
3863}
3864
3865.command-palette-input-wrapper {
3866 display: flex;
3867 align-items: center;
3868 padding: 0.75rem 1rem;
3869 border-bottom: 1px solid var(--border-color);
3870 gap: 0.75rem;
3871}
3872
3873.command-palette-search-icon {
3874 color: var(--text-secondary);
3875 flex-shrink: 0;
3876}
3877
3878.command-palette-input {
3879 flex: 1;
3880 border: none;
3881 background: transparent;
3882 font-size: 1rem;
3883 color: var(--text-primary);
3884 outline: none;
3885}
3886
3887.command-palette-input::placeholder {
3888 color: var(--text-secondary);
3889}
3890
3891.command-palette-shortcut {
3892 flex-shrink: 0;
3893}
3894
3895.command-palette-spinner {
3896 width: 16px;
3897 height: 16px;
3898 border: 2px solid var(--border-color);
3899 border-top-color: var(--primary);
3900 border-radius: 50%;
3901 animation: spin 0.6s linear infinite;
3902 flex-shrink: 0;
3903}
3904
3905.command-palette-list {
3906 flex: 1;
3907 overflow-y: auto;
3908 padding: 0.5rem;
3909}
3910
3911.command-palette-empty {
3912 padding: 2rem 1rem;
3913 text-align: center;
3914 color: var(--text-secondary);
3915}
3916
3917.command-palette-item {
3918 display: flex;
3919 align-items: center;
3920 padding: 0.625rem 0.75rem;
3921 border-radius: 0.5rem;
3922 cursor: pointer;
3923 gap: 0.75rem;
3924}
3925
3926.command-palette-item:hover,
3927.command-palette-item.selected {
3928 background: var(--bg-secondary);
3929}
3930
3931.command-palette-item-icon {
3932 flex-shrink: 0;
3933 color: var(--text-secondary);
3934 display: flex;
3935 align-items: center;
3936 justify-content: center;
3937}
3938
3939.command-palette-item.selected .command-palette-item-icon {
3940 color: var(--primary);
3941}
3942
3943.command-palette-item-content {
3944 flex: 1;
3945 min-width: 0;
3946}
3947
3948.command-palette-item-title {
3949 font-size: 0.875rem;
3950 color: var(--text-primary);
3951 white-space: nowrap;
3952 overflow: hidden;
3953 text-overflow: ellipsis;
3954}
3955
3956.command-palette-item-subtitle {
3957 font-size: 0.75rem;
3958 color: var(--text-secondary);
3959 white-space: nowrap;
3960 overflow: hidden;
3961 text-overflow: ellipsis;
3962 margin-top: 0.125rem;
3963}
3964
3965.command-palette-item-badge {
3966 flex-shrink: 0;
3967 font-size: 0.625rem;
3968 text-transform: uppercase;
3969 letter-spacing: 0.05em;
3970 padding: 0.125rem 0.375rem;
3971 background: var(--bg-tertiary);
3972 border-radius: 0.25rem;
3973 color: var(--text-secondary);
3974}
3975
3976.command-palette-footer {
3977 display: flex;
3978 gap: 1rem;
3979 padding: 0.5rem 1rem;
3980 border-top: 1px solid var(--border-color);
3981 font-size: 0.75rem;
3982 color: var(--text-secondary);
3983}
3984
3985.command-palette-footer span {
3986 display: flex;
3987 align-items: center;
3988 gap: 0.25rem;
3989}
3990
3991@media (max-width: 640px) {
3992 .command-palette-overlay {
3993 padding: 1rem;
3994 padding-top: 5vh;
3995 }
3996
3997 .command-palette {
3998 max-height: 80vh;
3999 }
4000
4001 .command-palette-footer {
4002 display: none;
4003 }
4004}
4005
4006/* Models Modal Styles */
4007.models-modal {
4008 padding: 0.5rem;
4009}
4010
4011.models-loading {
4012 display: flex;
4013 align-items: center;
4014 justify-content: center;
4015 gap: 0.5rem;
4016 padding: 2rem;
4017 color: var(--text-secondary);
4018}
4019
4020.models-error {
4021 display: flex;
4022 align-items: center;
4023 justify-content: space-between;
4024 padding: 0.75rem 1rem;
4025 background: var(--error-bg);
4026 border: 1px solid var(--error-border);
4027 border-radius: 0.375rem;
4028 color: var(--error-text);
4029 margin-bottom: 1rem;
4030}
4031
4032.models-error-dismiss {
4033 background: none;
4034 border: none;
4035 font-size: 1.25rem;
4036 cursor: pointer;
4037 color: inherit;
4038 padding: 0;
4039 line-height: 1;
4040}
4041
4042.models-info {
4043 padding: 0.75rem 1rem;
4044 background: var(--bg-tertiary);
4045 border-radius: 0.375rem;
4046 margin-bottom: 1rem;
4047}
4048
4049.models-info p {
4050 margin: 0 0 0.5rem 0;
4051 color: var(--text-secondary);
4052}
4053
4054.builtin-list {
4055 margin: 0;
4056 padding-left: 1.25rem;
4057 color: var(--text-primary);
4058}
4059
4060.builtin-list li {
4061 margin: 0.25rem 0;
4062}
4063
4064.models-list {
4065 display: flex;
4066 flex-direction: column;
4067 gap: 0.75rem;
4068 margin-bottom: 1rem;
4069}
4070
4071.model-card {
4072 padding: 0.75rem 1rem;
4073 background: var(--bg-base);
4074 border: 1px solid var(--border);
4075 border-radius: 0.375rem;
4076}
4077
4078.model-header {
4079 display: flex;
4080 justify-content: space-between;
4081 align-items: flex-start;
4082 gap: 0.5rem;
4083}
4084
4085.model-info {
4086 display: flex;
4087 flex-wrap: wrap;
4088 align-items: center;
4089 gap: 0.5rem;
4090}
4091
4092.model-name {
4093 font-weight: 500;
4094 color: var(--text-primary);
4095}
4096
4097.model-provider {
4098 font-size: 0.75rem;
4099 padding: 0.125rem 0.5rem;
4100 background: var(--bg-tertiary);
4101 border-radius: 0.25rem;
4102 color: var(--text-secondary);
4103}
4104
4105.model-source {
4106 font-size: 0.75rem;
4107 padding: 0.125rem 0.5rem;
4108 background: var(--bg-tertiary);
4109 border-radius: 0.25rem;
4110 color: var(--text-secondary);
4111}
4112
4113.model-card-builtin {
4114 opacity: 0.8;
4115 background: var(--bg-secondary);
4116}
4117
4118.models-empty {
4119 padding: 2rem;
4120 text-align: center;
4121 color: var(--text-secondary);
4122}
4123
4124.models-empty-hint {
4125 font-size: 0.875rem;
4126 margin-top: 0.5rem;
4127 color: var(--text-tertiary);
4128}
4129
4130.model-badge {
4131 font-size: 0.625rem;
4132 text-transform: uppercase;
4133 letter-spacing: 0.05em;
4134 padding: 0.125rem 0.375rem;
4135 background: var(--blue-bg);
4136 border: 1px solid var(--blue-border);
4137 border-radius: 0.25rem;
4138 color: var(--blue-text);
4139}
4140
4141.model-actions {
4142 display: flex;
4143 gap: 0.25rem;
4144 flex-shrink: 0;
4145}
4146
4147.model-details {
4148 margin-top: 0.5rem;
4149 display: flex;
4150 flex-direction: column;
4151 gap: 0.25rem;
4152}
4153
4154.model-api-name {
4155 font-size: 0.75rem;
4156 font-family: var(--font-mono);
4157 color: var(--text-secondary);
4158}
4159
4160.model-endpoint {
4161 font-size: 0.75rem;
4162 color: var(--text-tertiary);
4163 word-break: break-all;
4164}
4165
4166.btn-icon {
4167 padding: 0.25rem;
4168 border-radius: 0.25rem;
4169 color: var(--text-secondary);
4170 background: transparent;
4171 border: none;
4172 cursor: pointer;
4173 display: flex;
4174 align-items: center;
4175 justify-content: center;
4176}
4177
4178.btn-icon:hover {
4179 background: var(--bg-tertiary);
4180 color: var(--text-primary);
4181}
4182
4183/* Version Checker Styles */
4184.version-update-dot {
4185 position: absolute;
4186 top: 2px;
4187 right: 2px;
4188 width: 8px;
4189 height: 8px;
4190 background: #ef4444;
4191 border-radius: 50%;
4192 border: 2px solid var(--bg-base);
4193}
4194
4195.version-menu-dot {
4196 width: 8px;
4197 height: 8px;
4198 background: #ef4444;
4199 border-radius: 50%;
4200 margin-left: auto;
4201 flex-shrink: 0;
4202}
4203
4204.version-modal-overlay {
4205 position: fixed;
4206 inset: 0;
4207 background: rgba(0, 0, 0, 0.5);
4208 display: flex;
4209 align-items: center;
4210 justify-content: center;
4211 z-index: 1000;
4212 padding: 1rem;
4213}
4214
4215.version-modal {
4216 background: var(--bg-base);
4217 border-radius: 0.5rem;
4218 box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
4219 max-width: 500px;
4220 width: 100%;
4221 max-height: 80vh;
4222 display: flex;
4223 flex-direction: column;
4224 overflow: hidden;
4225}
4226
4227.version-modal-header {
4228 display: flex;
4229 align-items: center;
4230 justify-content: space-between;
4231 padding: 1rem 1.25rem;
4232 border-bottom: 1px solid var(--border-color);
4233}
4234
4235.version-modal-header h2 {
4236 margin: 0;
4237 font-size: 1.125rem;
4238 font-weight: 600;
4239 color: var(--text-primary);
4240}
4241
4242.version-modal-close {
4243 background: none;
4244 border: none;
4245 padding: 0.25rem;
4246 cursor: pointer;
4247 color: var(--text-secondary);
4248 border-radius: 0.25rem;
4249}
4250
4251.version-modal-close:hover {
4252 background: var(--bg-tertiary);
4253 color: var(--text-primary);
4254}
4255
4256.version-modal-close svg {
4257 width: 1.25rem;
4258 height: 1.25rem;
4259}
4260
4261.version-modal-content {
4262 padding: 1.25rem;
4263 overflow-y: auto;
4264 display: flex;
4265 flex-direction: column;
4266 gap: 1rem;
4267}
4268
4269.version-info-row {
4270 display: flex;
4271 align-items: center;
4272 gap: 0.5rem;
4273 font-size: 0.875rem;
4274}
4275
4276.version-label {
4277 color: var(--text-secondary);
4278}
4279
4280.version-value {
4281 font-weight: 500;
4282 color: var(--text-primary);
4283 font-family: var(--font-mono);
4284}
4285
4286.version-date {
4287 color: var(--text-tertiary);
4288 font-size: 0.75rem;
4289}
4290
4291.version-error {
4292 padding: 0.75rem;
4293 background: var(--error-bg);
4294 border: 1px solid var(--error-border);
4295 border-radius: 0.375rem;
4296 font-size: 0.875rem;
4297 color: var(--error-text);
4298}
4299
4300.version-success {
4301 padding: 0.75rem;
4302 background: var(--success-bg);
4303 border: 1px solid var(--success-border);
4304 border-radius: 0.375rem;
4305 font-size: 0.875rem;
4306 color: var(--success-text);
4307}
4308
4309.version-changelog {
4310 border-top: 1px solid var(--border-color);
4311 padding-top: 1rem;
4312}
4313
4314.version-changelog h3 {
4315 margin: 0 0 0.75rem 0;
4316 font-size: 0.875rem;
4317 font-weight: 600;
4318}
4319
4320.changelog-link {
4321 color: var(--link-color);
4322 text-decoration: none;
4323}
4324
4325.changelog-link:hover {
4326 text-decoration: underline;
4327}
4328
4329.commit-list {
4330 margin: 0;
4331 padding: 0;
4332 list-style: none;
4333 max-height: 250px;
4334 overflow-y: auto;
4335 font-size: 0.8125rem;
4336}
4337
4338.commit-item {
4339 display: flex;
4340 gap: 0.5rem;
4341 padding: 0.5rem 0;
4342 border-bottom: 1px solid var(--border-color);
4343 align-items: flex-start;
4344}
4345
4346.commit-item:last-child {
4347 border-bottom: none;
4348}
4349
4350.commit-sha {
4351 font-family: var(--font-mono);
4352 color: var(--link-color);
4353 font-size: 0.75rem;
4354 flex-shrink: 0;
4355 text-decoration: none;
4356}
4357
4358.commit-sha:hover {
4359 text-decoration: underline;
4360}
4361
4362.commit-message {
4363 color: var(--text-primary);
4364 word-break: break-word;
4365 line-height: 1.4;
4366}
4367
4368.version-loading,
4369.version-no-commits {
4370 color: var(--text-secondary);
4371 font-size: 0.875rem;
4372 padding: 0.5rem 0;
4373}
4374
4375.version-actions {
4376 display: flex;
4377 flex-direction: column;
4378 gap: 0.75rem;
4379 border-top: 1px solid var(--border-color);
4380 padding-top: 1rem;
4381}
4382
4383.version-btn {
4384 padding: 0.5rem 1rem;
4385 border-radius: 0.375rem;
4386 font-size: 0.875rem;
4387 font-weight: 500;
4388 cursor: pointer;
4389 transition: background-color 0.15s;
4390}
4391
4392.version-btn:disabled {
4393 opacity: 0.6;
4394 cursor: not-allowed;
4395}
4396
4397.version-btn-primary {
4398 background: var(--primary);
4399 color: white;
4400 border: none;
4401}
4402
4403.version-btn-primary:hover:not(:disabled) {
4404 background: var(--primary-dark);
4405}
4406
4407.btn-icon.btn-danger:hover {
4408 background: var(--error-bg);
4409 color: var(--error-text);
4410}
4411
4412.add-model-btn {
4413 width: 100%;
4414}
4415
4416/* Model Form */
4417.model-form h3 {
4418 margin: 0 0 0.75rem 0;
4419 font-size: 1rem;
4420 font-weight: 600;
4421}
4422
4423.form-group {
4424 margin-bottom: 0.75rem;
4425}
4426
4427.form-group label {
4428 display: block;
4429 font-size: 0.875rem;
4430 font-weight: 500;
4431 margin-bottom: 0.25rem;
4432 color: var(--text-primary);
4433}
4434
4435.form-group label .optional {
4436 font-weight: 400;
4437 color: var(--text-secondary);
4438}
4439
4440.form-input {
4441 width: 100%;
4442 padding: 0.5rem 0.75rem;
4443 background: var(--bg-base);
4444 border: 1px solid var(--border);
4445 border-radius: 0.375rem;
4446 color: var(--text-primary);
4447 font-family: inherit;
4448 font-size: 0.875rem;
4449}
4450
4451.form-input:focus {
4452 outline: none;
4453 border-color: var(--primary);
4454 box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
4455}
4456
4457.form-checkbox {
4458 display: flex;
4459 align-items: center;
4460}
4461
4462.form-checkbox label {
4463 display: flex;
4464 align-items: center;
4465 gap: 0.5rem;
4466 cursor: pointer;
4467 margin: 0;
4468}
4469
4470.form-checkbox input[type="checkbox"] {
4471 width: 1rem;
4472 height: 1rem;
4473 cursor: pointer;
4474}
4475
4476.info-icon-wrapper {
4477 position: relative;
4478 display: inline-flex;
4479 align-items: center;
4480 margin-left: 0.25rem;
4481}
4482
4483.info-icon {
4484 display: inline-flex;
4485 align-items: center;
4486 justify-content: center;
4487 color: var(--text-tertiary);
4488 cursor: pointer;
4489}
4490
4491.info-icon:hover {
4492 color: var(--text-secondary);
4493}
4494
4495.info-tooltip {
4496 position: absolute;
4497 top: 50%;
4498 left: 100%;
4499 transform: translateY(-50%);
4500 background: var(--bg-tertiary);
4501 border: 1px solid var(--border);
4502 border-radius: 0.375rem;
4503 padding: 0.5rem 0.75rem;
4504 font-size: 0.75rem;
4505 font-weight: 400;
4506 color: var(--text-primary);
4507 white-space: normal;
4508 width: 220px;
4509 margin-left: 0.375rem;
4510 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
4511 z-index: 100;
4512}
4513
4514.info-tooltip::after {
4515 content: "";
4516 position: absolute;
4517 top: 50%;
4518 right: 100%;
4519 transform: translateY(-50%);
4520 border: 6px solid transparent;
4521 border-right-color: var(--border);
4522}
4523
4524.provider-buttons {
4525 display: flex;
4526 gap: 0.5rem;
4527}
4528
4529.provider-btn {
4530 flex: 1;
4531 padding: 0.5rem;
4532 background: var(--bg-base);
4533 border: 1px solid var(--border);
4534 border-radius: 0.375rem;
4535 color: var(--text-primary);
4536 font-size: 0.875rem;
4537 cursor: pointer;
4538 transition: all 0.15s;
4539}
4540
4541.provider-btn:hover {
4542 background: var(--bg-tertiary);
4543}
4544
4545.provider-btn.selected {
4546 background: var(--primary);
4547 border-color: var(--primary);
4548 color: white;
4549}
4550
4551.endpoint-toggle {
4552 display: flex;
4553 gap: 0;
4554 margin-bottom: 0.5rem;
4555}
4556
4557.toggle-btn {
4558 flex: 1;
4559 padding: 0.375rem 0.75rem;
4560 background: var(--bg-base);
4561 border: 1px solid var(--border);
4562 color: var(--text-secondary);
4563 font-size: 0.75rem;
4564 cursor: pointer;
4565 transition: all 0.15s;
4566}
4567
4568.toggle-btn:first-child {
4569 border-radius: 0.375rem 0 0 0.375rem;
4570}
4571
4572.toggle-btn:last-child {
4573 border-radius: 0 0.375rem 0.375rem 0;
4574 border-left: none;
4575}
4576
4577.toggle-btn.selected {
4578 background: var(--bg-tertiary);
4579 color: var(--text-primary);
4580}
4581
4582.endpoint-display {
4583 padding: 0.5rem 0.75rem;
4584 background: var(--bg-tertiary);
4585 border-radius: 0.375rem;
4586 font-size: 0.75rem;
4587 color: var(--text-secondary);
4588 word-break: break-all;
4589}
4590
4591.model-presets {
4592 display: flex;
4593 flex-wrap: wrap;
4594 gap: 0.375rem;
4595 margin-bottom: 0.5rem;
4596}
4597
4598.preset-btn {
4599 padding: 0.25rem 0.625rem;
4600 background: var(--bg-base);
4601 border: 1px solid var(--border);
4602 border-radius: 0.25rem;
4603 color: var(--text-secondary);
4604 font-size: 0.75rem;
4605 cursor: pointer;
4606 transition: all 0.15s;
4607}
4608
4609.preset-btn:hover {
4610 background: var(--bg-tertiary);
4611 color: var(--text-primary);
4612}
4613
4614.preset-btn.selected {
4615 background: var(--blue-bg);
4616 border-color: var(--blue-border);
4617 color: var(--blue-text);
4618}
4619
4620.test-result {
4621 padding: 0.75rem 1rem;
4622 border-radius: 0.375rem;
4623 margin-bottom: 1rem;
4624 font-size: 0.875rem;
4625}
4626
4627.test-result.success {
4628 background: var(--success-bg);
4629 border: 1px solid var(--success-border);
4630 color: var(--success-text);
4631}
4632
4633.test-result.error {
4634 background: var(--error-bg);
4635 border: 1px solid var(--error-border);
4636 color: var(--error-text);
4637}
4638
4639.form-actions {
4640 display: flex;
4641 gap: 0.5rem;
4642 justify-content: flex-end;
4643 margin-top: 1rem;
4644 padding-bottom: 0.5rem;
4645}
4646
4647kbd {
4648 display: inline-block;
4649 padding: 0.125rem 0.375rem;
4650 font-size: 0.75rem;
4651 font-family: inherit;
4652 background: var(--bg-tertiary);
4653 border: 1px solid var(--border-color);
4654 border-radius: 0.25rem;
4655 color: var(--text-secondary);
4656}
4657
4658/* System Prompt View */
4659.system-prompt-view {
4660 background: var(--gray-100);
4661 border-radius: 0.5rem;
4662 margin: 0.5rem 0;
4663 width: 100%;
4664 border: 1px dashed var(--border);
4665}
4666
4667.dark .system-prompt-view {
4668 background: var(--gray-800);
4669}
4670
4671.system-prompt-header {
4672 display: flex;
4673 align-items: center;
4674 justify-content: space-between;
4675 padding: 0.75rem 1rem;
4676 cursor: pointer;
4677 user-select: none;
4678}
4679
4680.system-prompt-header:hover {
4681 background: rgba(0, 0, 0, 0.02);
4682 border-radius: 0.5rem;
4683}
4684
4685.dark .system-prompt-header:hover {
4686 background: rgba(255, 255, 255, 0.02);
4687}
4688
4689.system-prompt-summary {
4690 display: flex;
4691 align-items: center;
4692 gap: 0.5rem;
4693 flex: 1;
4694 min-width: 0;
4695}
4696
4697.system-prompt-icon {
4698 font-size: 1rem;
4699 flex-shrink: 0;
4700}
4701
4702.system-prompt-label {
4703 font-family: var(--font-mono);
4704 font-size: 0.875rem;
4705 color: var(--text-primary);
4706 font-weight: 500;
4707}
4708
4709.system-prompt-meta {
4710 font-size: 0.75rem;
4711 color: var(--text-secondary);
4712 flex-shrink: 0;
4713}
4714
4715.system-prompt-content {
4716 padding: 0 1rem 1rem 1rem;
4717}
4718
4719.system-prompt-text {
4720 font-family: var(--font-mono);
4721 font-size: 0.75rem;
4722 line-height: 1.5;
4723 color: var(--text-secondary);
4724 background: var(--bg-base);
4725 border: 1px solid var(--border);
4726 border-radius: 0.375rem;
4727 padding: 1rem;
4728 margin: 0;
4729 max-height: 400px;
4730 overflow: auto;
4731 white-space: pre-wrap;
4732 word-wrap: break-word;
4733}
4734
4735.dark .system-prompt-text {
4736 background: var(--gray-900);
4737}