A browser extension that lets you summarize any webpage and ask questions using AI.
1* {
2 margin: 0;
3 padding: 0;
4 box-sizing: border-box;
5}
6
7/* ── CSS variables – Light (default) ── */
8:root {
9 --bg: #f5f0e8;
10 --bg-subtle: #ede8de;
11 --border: #e0d8cc;
12 --border-hover: #c8c0b4;
13 --text: #1a1a1a;
14 --text-secondary: #2a2a2a;
15 --text-muted: #aaa;
16 --text-faint: #ccc;
17 --text-em: #666;
18 --icon-btn: #aaa;
19 --icon-btn-hover: #555;
20 --primary-bg: #1a1a1a;
21 --primary-bg-hover: #333;
22 --primary-bg-active: #000;
23 --primary-text: #f5f0e8;
24 --secondary-color: #aaa;
25 --scrollbar: #d8d0c4;
26 --spinner-track: #e0d8cc;
27 --spinner-head: #888;
28 --error-bg: #fdf0f0;
29 --error-border: #f0d8d8;
30 --error-text: #c05050;
31 --toast-bg: #1a1a1a;
32 --toast-text: #f5f0e8;
33 --code-bg: #ede8de;
34 --code-text: #555;
35 --pre-text: #444;
36 --table-th: #ede8de;
37 --link: #555;
38 --link-hover: #111;
39 --heading: #111;
40 --strong: #111;
41 --blockquote: #888;
42 --brand: #f15b2f;
43 --brand-hover: #d94e27;
44 --brand-active: #bf4522;
45}
46
47/* ── Dark theme ── */
48[data-theme="dark"] {
49 --bg: #1a1a1a;
50 --bg-subtle: #252525;
51 --border: #2e2e2e;
52 --border-hover: #444;
53 --text: #e8e3db;
54 --text-secondary: #d0cbc3;
55 --text-muted: #666;
56 --text-faint: #444;
57 --text-em: #999;
58 --icon-btn: #555;
59 --icon-btn-hover: #bbb;
60 --primary-bg: #e8e3db;
61 --primary-bg-hover: #ccc8c0;
62 --primary-bg-active: #fff;
63 --primary-text: #1a1a1a;
64 --secondary-color: #555;
65 --scrollbar: #333;
66 --spinner-track: #2e2e2e;
67 --spinner-head: #888;
68 --error-bg: #2a1a1a;
69 --error-border: #4a2a2a;
70 --error-text: #e08080;
71 --toast-bg: #e8e3db;
72 --toast-text: #1a1a1a;
73 --code-bg: #252525;
74 --code-text: #aaa;
75 --pre-text: #bbb;
76 --table-th: #252525;
77 --link: #aaa;
78 --link-hover: #e8e3db;
79 --heading: #e8e3db;
80 --strong: #e8e3db;
81 --blockquote: #666;
82 --brand: #f15b2f;
83 --brand-hover: #d94e27;
84 --brand-active: #bf4522;
85}
86
87body {
88 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
89 width: 400px;
90 height: 560px;
91 background: var(--bg);
92 color: var(--text);
93 overflow: hidden;
94 transition:
95 background 0.15s,
96 color 0.15s;
97}
98
99.app {
100 display: flex;
101 flex-direction: column;
102 height: 100%;
103}
104
105/* ── Header ── */
106.header {
107 display: flex;
108 justify-content: space-between;
109 align-items: center;
110 padding: 13px 18px;
111 border-bottom: 1px solid var(--border);
112 flex-shrink: 0;
113}
114
115.header-left {
116 display: flex;
117 align-items: center;
118 gap: 7px;
119}
120
121.header-right {
122 display: flex;
123 align-items: center;
124 gap: 2px;
125}
126
127.logo-mark {
128 width: 13px;
129 height: 13px;
130 display: inline-flex;
131 align-items: center;
132 justify-content: center;
133}
134
135.logo-mark .brand-icon {
136 width: 100%;
137 height: 100%;
138 display: block;
139 background: var(--brand);
140 -webkit-mask: url("../lightning.svg") center / contain no-repeat;
141 mask: url("../lightning.svg") center / contain no-repeat;
142}
143
144.brand-stack {
145 display: flex;
146 flex-direction: column;
147 gap: 1px;
148 line-height: 1.2;
149}
150
151.logo-text {
152 font-size: 13px;
153 font-weight: 600;
154 color: var(--text);
155 letter-spacing: 0.01em;
156}
157
158.brand-tagline {
159 font-size: 10px;
160 font-weight: 500;
161 color: var(--text-muted);
162 letter-spacing: 0.02em;
163}
164
165.icon-btn {
166 background: transparent;
167 border: none;
168 cursor: pointer;
169 color: var(--icon-btn);
170 width: 28px;
171 height: 28px;
172 display: flex;
173 align-items: center;
174 justify-content: center;
175 border-radius: 6px;
176 transition: color 0.1s;
177 flex-shrink: 0;
178}
179
180.icon-btn:hover {
181 color: var(--icon-btn-hover);
182}
183
184/* ── Content area ── */
185.content-container {
186 flex: 1;
187 overflow-y: auto;
188 padding: 18px;
189 scrollbar-width: thin;
190 scrollbar-color: var(--scrollbar) transparent;
191}
192
193.content-container::-webkit-scrollbar {
194 width: 3px;
195}
196.content-container::-webkit-scrollbar-track {
197 background: transparent;
198}
199.content-container::-webkit-scrollbar-thumb {
200 background: var(--scrollbar);
201 border-radius: 3px;
202}
203
204/* ── Initial state ── */
205.initial-state {
206 display: flex;
207 flex-direction: column;
208 align-items: flex-start;
209 justify-content: flex-end;
210 height: 100%;
211 padding-bottom: 4px;
212 gap: 5px;
213}
214
215.initial-state.hidden {
216 display: none;
217}
218
219.initial-icon {
220 width: 18px;
221 height: 18px;
222 margin-bottom: 4px;
223}
224
225.initial-icon .brand-icon {
226 width: 100%;
227 height: 100%;
228 display: block;
229 background: var(--brand);
230 -webkit-mask: url("../lightning.svg") center / contain no-repeat;
231 mask: url("../lightning.svg") center / contain no-repeat;
232}
233
234.initial-title {
235 font-size: 15px;
236 font-weight: 600;
237 color: var(--text);
238}
239
240.initial-sub {
241 font-size: 12px;
242 color: var(--text-muted);
243 line-height: 1.5;
244}
245
246/* ── Loading ── */
247.loading-wrap {
248 display: flex;
249 flex-direction: column;
250 align-items: center;
251 justify-content: center;
252 height: 100%;
253 gap: 12px;
254}
255
256.spinner {
257 width: 18px;
258 height: 18px;
259 border: 1.5px solid var(--spinner-track);
260 border-top-color: var(--spinner-head);
261 border-radius: 50%;
262 animation: spin 0.75s linear infinite;
263}
264
265@keyframes spin {
266 to {
267 transform: rotate(360deg);
268 }
269}
270
271.loading-label {
272 font-size: 11px;
273 color: var(--text-muted);
274 letter-spacing: 0.05em;
275 text-transform: uppercase;
276}
277
278/* ── Result ── */
279.result {
280 font-size: 14px;
281 line-height: 1.7;
282 color: var(--text-secondary);
283 animation: fadeUp 0.2s ease;
284}
285
286.result.hidden {
287 display: none;
288}
289
290/* ── Truncation Warning ── */
291.truncation-warning {
292 display: flex;
293 align-items: center;
294 gap: 8px;
295 padding: 10px 12px;
296 margin-bottom: 16px;
297 background: var(--bg-subtle);
298 border: 1px solid var(--border);
299 border-radius: 6px;
300 font-size: 12px;
301 color: var(--text-muted);
302}
303
304.truncation-warning svg {
305 flex-shrink: 0;
306 color: var(--text-muted);
307}
308
309@keyframes fadeUp {
310 from {
311 opacity: 0;
312 transform: translateY(3px);
313 }
314 to {
315 opacity: 1;
316 transform: translateY(0);
317 }
318}
319
320/* ── Markdown ── */
321.result > * + * {
322 margin-top: 10px;
323}
324
325.result > *:first-child {
326 margin-top: 0;
327}
328
329.result h1,
330.result h2,
331.result h3,
332.result h4,
333.result h5,
334.result h6 {
335 font-weight: 600;
336 color: var(--heading);
337 line-height: 1.3;
338}
339
340.result h1 {
341 font-size: 16px;
342 margin-top: 16px;
343}
344.result h2 {
345 font-size: 14px;
346 margin-top: 14px;
347}
348.result h3 {
349 font-size: 13px;
350 margin-top: 12px;
351}
352.result h4,
353.result h5,
354.result h6 {
355 font-size: 13px;
356 color: var(--text-muted);
357 margin-top: 10px;
358}
359
360.result p {
361 line-height: 1.65;
362}
363.result p + p {
364 margin-top: 6px;
365}
366
367.result ul,
368.result ol {
369 padding-left: 18px;
370}
371
372.result li {
373 line-height: 1.6;
374}
375.result li + li {
376 margin-top: 2px;
377}
378.result li::marker {
379 color: var(--text-faint);
380}
381
382.result strong {
383 font-weight: 600;
384 color: var(--strong);
385}
386.result em {
387 font-style: italic;
388 color: var(--text-em);
389}
390
391.result code {
392 font-family: "SF Mono", "Cascadia Code", monospace;
393 font-size: 11.5px;
394 background: var(--code-bg);
395 padding: 1px 5px;
396 border-radius: 3px;
397 color: var(--code-text);
398}
399
400.result pre {
401 background: var(--code-bg);
402 padding: 10px 12px;
403 border-radius: 5px;
404 overflow-x: auto;
405}
406
407.result pre code {
408 background: transparent;
409 padding: 0;
410 color: var(--pre-text);
411}
412
413.result blockquote {
414 border-left: 2px solid var(--border);
415 padding: 2px 12px;
416 color: var(--blockquote);
417 font-style: italic;
418}
419
420.result blockquote + blockquote {
421 margin-top: 6px;
422}
423
424.result a {
425 color: var(--link);
426 text-decoration: underline;
427}
428.result a:hover {
429 color: var(--brand);
430}
431
432.result hr {
433 border: none;
434 border-top: 1px solid var(--border);
435}
436
437.result table {
438 border-collapse: collapse;
439 width: 100%;
440 font-size: 12.5px;
441}
442
443.result th,
444.result td {
445 border: 1px solid var(--border);
446 padding: 5px 9px;
447 text-align: left;
448}
449
450.result th {
451 background: var(--table-th);
452 font-weight: 600;
453}
454
455/* Streaming content - match .result styling for consistency */
456.streaming-content {
457 font-size: 14px;
458 line-height: 1.7;
459 color: var(--text-secondary);
460}
461
462.streaming-content > * + * {
463 margin-top: 10px;
464}
465
466.streaming-content > *:first-child {
467 margin-top: 0;
468}
469
470/* Loading placeholder before first token */
471.streaming-placeholder {
472 display: flex;
473 align-items: center;
474 gap: 4px;
475 padding: 4px 0;
476}
477
478.streaming-placeholder .pulse-dot {
479 width: 6px;
480 height: 6px;
481 background: var(--text-muted);
482 border-radius: 50%;
483 animation: pulse-dot 1.4s ease-in-out infinite;
484}
485
486.streaming-placeholder .pulse-dot:nth-child(2) {
487 animation-delay: 0.2s;
488}
489
490.streaming-placeholder .pulse-dot:nth-child(3) {
491 animation-delay: 0.4s;
492}
493
494@keyframes pulse-dot {
495 0%,
496 80%,
497 100% {
498 transform: scale(0.6);
499 opacity: 0.4;
500 }
501 40% {
502 transform: scale(1);
503 opacity: 1;
504 }
505}
506
507/* ── Footer ── */
508.footer {
509 display: flex;
510 padding: 11px 18px;
511 border-top: 1px solid var(--border);
512 flex-shrink: 0;
513 align-items: center;
514}
515
516.footer-btn {
517 display: flex;
518 align-items: center;
519 justify-content: center;
520 padding: 8px 16px;
521 border-radius: 6px;
522 font-family: inherit;
523 font-size: 12.5px;
524 font-weight: 500;
525 cursor: pointer;
526 transition: all 0.1s ease;
527 border: none;
528 flex: 1;
529 background: var(--primary-bg);
530 color: var(--primary-text);
531}
532
533.footer-btn:hover {
534 background: var(--primary-bg-hover);
535}
536.footer-btn:active {
537 background: var(--primary-bg-active);
538}
539.footer-btn:disabled {
540 opacity: 0.35;
541 cursor: not-allowed;
542}
543
544.footer-btn.primary {
545 background: var(--brand);
546 color: #fff;
547}
548
549.footer-btn.primary:hover {
550 background: var(--brand-hover);
551}
552
553.footer-btn.primary:active {
554 background: var(--brand-active);
555}
556
557.hidden {
558 display: none !important;
559}
560
561/* ── Error ── */
562.error-message {
563 background: var(--error-bg);
564 border: 1px solid var(--error-border);
565 color: var(--error-text);
566 padding: 11px 14px;
567 border-radius: 6px;
568 font-size: 12px;
569 line-height: 1.5;
570 white-space: pre-wrap;
571}
572
573/* ── PDF Error ── */
574.pdf-error {
575 display: flex;
576 flex-direction: column;
577 align-items: center;
578 justify-content: center;
579 height: 100%;
580 text-align: center;
581 padding: 40px 20px;
582 gap: 12px;
583}
584
585.pdf-error-icon {
586 font-size: 48px;
587 font-weight: 300;
588 color: var(--text-muted);
589 margin-bottom: 8px;
590 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
591}
592
593.pdf-error-title {
594 font-size: 16px;
595 font-weight: 600;
596 color: var(--text);
597}
598
599.pdf-error-message {
600 font-size: 13px;
601 color: var(--text-muted);
602 line-height: 1.6;
603 max-width: 280px;
604}
605
606/* ── Unsupported extraction (YouTube, streaming, Bluesky, email UIs, etc.) ── */
607.youtube-error {
608 display: flex;
609 flex-direction: column;
610 align-items: center;
611 justify-content: center;
612 height: 100%;
613 text-align: center;
614 padding: 40px 20px;
615 gap: 12px;
616}
617
618.youtube-error-icon {
619 font-size: 48px;
620 font-weight: 300;
621 color: var(--text-muted);
622 margin-bottom: 8px;
623 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
624}
625
626.youtube-error-title {
627 font-size: 16px;
628 font-weight: 600;
629 color: var(--text);
630}
631
632.youtube-error-message {
633 font-size: 13px;
634 color: var(--text-muted);
635 line-height: 1.6;
636 max-width: 280px;
637}
638
639/* ── Toast ── */
640.toast {
641 position: fixed;
642 bottom: 68px;
643 left: 50%;
644 transform: translateX(-50%);
645 background: var(--toast-bg);
646 color: var(--toast-text);
647 padding: 6px 14px;
648 border-radius: 20px;
649 font-size: 11px;
650 z-index: 100;
651 white-space: nowrap;
652 animation: toast-in 0.15s ease;
653}
654
655@keyframes toast-in {
656 from {
657 opacity: 0;
658 transform: translateX(-50%) translateY(4px);
659 }
660 to {
661 opacity: 1;
662 transform: translateX(-50%) translateY(0);
663 }
664}
665
666/* ── Chat ── */
667.chat-container {
668 padding: 12px 18px;
669 border-top: 1px solid var(--border);
670 flex-shrink: 0;
671}
672
673.chat-container.hidden {
674 display: none;
675}
676
677/* Chat suggestions */
678.chat-suggestions {
679 display: flex;
680 flex-wrap: wrap;
681 gap: 6px;
682 margin-bottom: 10px;
683}
684
685.suggestion-btn {
686 padding: 5px 10px;
687 border-radius: 14px;
688 border: 1px solid var(--border);
689 background: var(--bg-subtle);
690 color: var(--text-muted);
691 font-family: inherit;
692 font-size: 11px;
693 cursor: pointer;
694 transition: all 0.1s;
695 white-space: nowrap;
696}
697
698.suggestion-btn:hover {
699 border-color: var(--brand);
700 color: var(--brand);
701 background: var(--bg);
702}
703
704/* Suggestion skeleton placeholder */
705.suggestion-skeleton {
706 padding: 5px 10px;
707 border-radius: 14px;
708 border: 1px solid var(--border);
709 background: var(--bg-subtle);
710 width: 120px;
711 height: 24px;
712 animation: skeleton-pulse 1.5s ease-in-out infinite;
713}
714
715@keyframes skeleton-pulse {
716 0%,
717 100% {
718 opacity: 0.4;
719 }
720 50% {
721 opacity: 0.7;
722 }
723}
724
725/* Chat messages are rendered inside .result, sharing the same scroll */
726.chat-divider {
727 margin: 20px 0 16px 0;
728 border: none;
729 border-top: 1px solid var(--border);
730}
731
732.chat-message {
733 animation: fadeUp 0.2s ease;
734}
735
736.chat-message + .chat-message {
737 margin-top: 14px;
738}
739
740/* User messages as bubbles */
741.chat-message.user {
742 background: var(--primary-bg);
743 color: var(--primary-text);
744 padding: 10px 14px;
745 border-radius: 12px;
746 border-bottom-right-radius: 4px;
747 font-size: 13px;
748 line-height: 1.5;
749 max-width: 85%;
750 margin-left: auto;
751}
752
753/* Assistant messages styled like summary content */
754.chat-message.assistant {
755 font-size: 14px;
756 line-height: 1.7;
757 color: var(--text-secondary);
758}
759
760.chat-message.assistant.loading {
761 display: flex;
762 align-items: center;
763 justify-content: center;
764 padding: 20px 0;
765}
766
767.chat-message.assistant.error {
768 background: var(--error-bg);
769 border: 1px solid var(--error-border);
770 color: var(--error-text);
771 padding: 10px 14px;
772 border-radius: 6px;
773 white-space: pre-wrap;
774}
775
776.chat-spinner {
777 width: 18px;
778 height: 18px;
779 border: 1.5px solid var(--spinner-track);
780 border-top-color: var(--spinner-head);
781 border-radius: 50%;
782 animation: spin 0.75s linear infinite;
783}
784
785/* Chat message markdown (assistant uses same styles as .result) */
786.chat-message.assistant > * + * {
787 margin-top: 10px;
788}
789
790.chat-message.assistant h1,
791.chat-message.assistant h2,
792.chat-message.assistant h3,
793.chat-message.assistant h4,
794.chat-message.assistant h5,
795.chat-message.assistant h6 {
796 font-weight: 600;
797 color: var(--heading);
798 line-height: 1.3;
799}
800
801.chat-message.assistant h1 {
802 font-size: 16px;
803 margin-top: 16px;
804}
805.chat-message.assistant h2 {
806 font-size: 14px;
807 margin-top: 14px;
808}
809.chat-message.assistant h3 {
810 font-size: 13px;
811 margin-top: 12px;
812}
813
814.chat-message.assistant p {
815 line-height: 1.65;
816}
817
818.chat-message.assistant p + p {
819 margin-top: 6px;
820}
821
822.chat-message.assistant ul,
823.chat-message.assistant ol {
824 padding-left: 18px;
825}
826
827.chat-message.assistant li {
828 line-height: 1.6;
829}
830
831.chat-message.assistant li + li {
832 margin-top: 2px;
833}
834
835.chat-message.assistant strong {
836 font-weight: 600;
837 color: var(--strong);
838}
839
840.chat-message.assistant code {
841 font-family: "SF Mono", "Cascadia Code", monospace;
842 font-size: 11.5px;
843 background: var(--code-bg);
844 padding: 1px 5px;
845 border-radius: 3px;
846 color: var(--code-text);
847}
848
849.chat-message.assistant pre {
850 background: var(--code-bg);
851 padding: 10px 12px;
852 border-radius: 5px;
853 overflow-x: auto;
854}
855
856.chat-message.assistant pre code {
857 background: transparent;
858 padding: 0;
859 color: var(--pre-text);
860}
861
862.chat-message.assistant blockquote {
863 border-left: 2px solid var(--border);
864 padding: 2px 12px;
865 color: var(--blockquote);
866 font-style: italic;
867}
868
869.chat-message.assistant a {
870 color: var(--link);
871 text-decoration: underline;
872}
873
874.chat-message.assistant a:hover {
875 color: var(--brand);
876}
877
878/* User message markdown */
879.chat-message.user p {
880 margin: 0;
881}
882
883.chat-message.user p + p {
884 margin-top: 4px;
885}
886
887.chat-message.user strong {
888 font-weight: 600;
889}
890
891.chat-input-wrap {
892 display: flex;
893 gap: 8px;
894 align-items: center;
895}
896
897.chat-input {
898 flex: 1;
899 padding: 8px 12px;
900 border: 1px solid var(--border);
901 border-radius: 6px;
902 background: var(--bg);
903 color: var(--text);
904 font-family: inherit;
905 font-size: 13px;
906 outline: none;
907 transition: border-color 0.1s;
908}
909
910.chat-input:focus {
911 border-color: var(--brand);
912}
913
914.chat-input::placeholder {
915 color: var(--text-muted);
916}
917
918.chat-send-btn {
919 width: 32px;
920 height: 32px;
921 border-radius: 6px;
922 border: none;
923 background: var(--brand);
924 color: #fff;
925 cursor: pointer;
926 display: flex;
927 align-items: center;
928 justify-content: center;
929 transition: all 0.1s;
930 flex-shrink: 0;
931}
932
933.chat-send-btn:hover {
934 background: var(--brand-hover);
935}
936
937.chat-send-btn:disabled {
938 opacity: 0.35;
939 cursor: not-allowed;
940}
941
942.chat-send-btn.stop-streaming {
943 background: var(--icon-btn-hover);
944}
945
946.chat-send-btn.stop-streaming:hover {
947 background: var(--text-em);
948}
949
950/* Summary action buttons container */
951.summary-actions {
952 display: flex;
953 gap: 8px;
954 margin-top: 16px;
955}
956
957/* Copy/regenerate button under summary */
958.copy-summary-btn {
959 display: inline-flex;
960 align-items: center;
961 gap: 6px;
962 padding: 6px 12px;
963 border-radius: 6px;
964 border: 1px solid var(--border);
965 background: transparent;
966 color: var(--text-muted);
967 font-family: inherit;
968 font-size: 12px;
969 font-weight: 500;
970 cursor: pointer;
971 transition: all 0.1s;
972}
973
974.copy-summary-btn:hover {
975 border-color: var(--border-hover);
976 color: var(--text);
977}
978
979.copy-summary-btn.copied {
980 color: var(--text);
981 border-color: var(--border-hover);
982}