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