solpbc.org
personal memory agent
1/**
2 * App System Styles
3 * Styles for the app.html template system (facet bar, menu bar, app bar, etc.)
4 */
5
6/* ========================================
7 * Cross-Document View Transitions
8 * Enables smooth page transitions in supporting browsers
9 * ======================================== */
10@view-transition {
11 navigation: auto;
12}
13
14/* Assign transition names to persistent structural elements */
15.facet-bar {
16 view-transition-name: facet-bar;
17}
18
19.menu-bar {
20 view-transition-name: menu-bar;
21}
22
23.app-bar {
24 view-transition-name: app-bar;
25}
26
27.workspace {
28 view-transition-name: workspace;
29}
30
31/* Customize transition animations */
32::view-transition-old(workspace),
33::view-transition-new(workspace) {
34 animation-duration: 150ms;
35 animation-timing-function: ease-in-out;
36}
37
38/* Other fixed elements that should persist */
39.corner-tags {
40 view-transition-name: corner-tags;
41}
42
43.notification-center {
44 view-transition-name: notification-center;
45}
46
47.status-pane {
48 view-transition-name: status-pane;
49}
50
51/* Keep structural elements stable (no animation) */
52::view-transition-old(facet-bar),
53::view-transition-new(facet-bar),
54::view-transition-old(menu-bar),
55::view-transition-new(menu-bar),
56::view-transition-old(app-bar),
57::view-transition-new(app-bar),
58::view-transition-old(corner-tags),
59::view-transition-new(corner-tags),
60::view-transition-old(notification-center),
61::view-transition-new(notification-center),
62::view-transition-old(status-pane),
63::view-transition-new(status-pane) {
64 animation: none;
65}
66
67/* Universal box-sizing */
68* {
69 box-sizing: border-box;
70}
71
72/* Reserve scrollbar space to prevent layout shift on navigation */
73html {
74 scrollbar-gutter: stable;
75}
76
77/* Default theme (when no facet is selected) */
78:root {
79 --facet-color: #b06a1a;
80 --facet-bg: transparent;
81 --facet-border: #e0e0e0;
82
83 /* Layout dimensions */
84 --facet-bar-height: 60px;
85 --menu-bar-width-minimal: 60px;
86 --menu-bar-width-full: 200px;
87 --app-bar-height: 60px;
88 --date-nav-height: 40px;
89 --date-nav-width: 300px;
90 --status-pane-width: 280px;
91
92 /* Z-index hierarchy (increasing order) */
93 --z-bars: 100; /* Facet bar, menu bar, app bar */
94 --z-modals: 200; /* Modal overlays */
95 --z-notifications: 300; /* Notifications, status pane, error log */
96 --z-tags: 400; /* Corner tags - topmost layer */
97}
98
99body {
100 margin: 0;
101 padding: 0;
102 overflow-x: hidden;
103 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
104}
105
106.workspace {
107 margin-top: var(--facet-bar-height);
108 margin-left: var(--menu-bar-width-minimal);
109 margin-bottom: calc(var(--app-bar-height) + 40px);
110}
111
112/* Add extra top margin when date-nav is present */
113body.has-date-nav .workspace {
114 margin-top: calc(var(--facet-bar-height) + var(--date-nav-height));
115}
116
117/* Standard workspace containers */
118.workspace-content {
119 max-width: 1200px;
120 margin: 0 auto;
121 padding: 1.5rem 2rem 2rem;
122}
123
124.workspace-content-wide {
125 padding: 1.5rem 2rem 2rem;
126}
127
128.workspace-prose {
129 max-width: 72ch;
130 margin-inline: auto;
131}
132
133/* Responsive */
134@media (max-width: 768px) {
135 .workspace-content,
136 .workspace-content-wide {
137 padding: 1rem;
138 }
139}
140
141@media (max-width: 768px) {
142 .menu-bar {
143 width: 0;
144 overflow: hidden;
145 }
146
147 body.menu-full .menu-bar {
148 width: var(--menu-bar-width-full);
149 box-shadow: 4px 0 16px rgba(0, 0, 0, 0.2);
150 z-index: calc(var(--z-bars) + 2);
151 }
152
153 .workspace {
154 margin-left: 0 !important;
155 }
156
157 .facet-bar .facet-pills-container {
158 overflow-x: auto;
159 -webkit-overflow-scrolling: touch;
160 }
161
162 .app-bar {
163 width: calc(100% - 16px) !important;
164 }
165
166 .menu-backdrop {
167 position: fixed;
168 inset: 0;
169 z-index: calc(var(--z-bars) + 1);
170 background: rgba(0, 0, 0, 0.3);
171 opacity: 0;
172 pointer-events: none;
173 transition: opacity 0.3s ease;
174 }
175
176 .menu-backdrop.visible {
177 opacity: 1;
178 pointer-events: auto;
179 }
180}
181
182/* Facet Bar (top) */
183.facet-bar {
184 position: fixed;
185 top: 0;
186 left: 0;
187 right: 0;
188 background: white;
189 z-index: var(--z-bars);
190 height: var(--facet-bar-height);
191 padding: 12px 16px;
192 overflow: visible;
193 white-space: nowrap;
194 display: flex;
195 align-items: center;
196 gap: 12px;
197}
198
199.facet-bar::before {
200 content: '';
201 position: absolute;
202 top: 0;
203 left: 0;
204 right: 0;
205 bottom: 0;
206 background: var(--facet-bg, transparent);
207 transition: background-color 0.3s ease;
208 pointer-events: none;
209 z-index: -1;
210}
211
212/* Border as pseudo-element for selective positioning */
213.facet-bar::after {
214 content: '';
215 position: absolute;
216 bottom: 0;
217 left: var(--menu-bar-width-minimal);
218 right: 0;
219 height: 1px;
220 background: var(--facet-border, #e0e0e0);
221 transition: left 0.3s ease, background-color 0.3s ease; /* right is instant */
222 pointer-events: none;
223}
224
225/* When sidebar open, border only where workspace is visible */
226body.menu-full .facet-bar::after {
227 left: var(--menu-bar-width-full);
228}
229
230/* When status pane open, stop border before it */
231body:has(.status-pane.visible) .facet-bar::after {
232 right: var(--status-pane-width);
233}
234
235.facet-bar #hamburger {
236 display: none;
237 font-size: 24px;
238 cursor: pointer;
239 padding: 8px;
240 border-radius: 4px;
241 transition: background 0.2s;
242 user-select: none;
243 flex-shrink: 0;
244}
245
246.facet-bar #hamburger:hover {
247 background: rgba(0,0,0,0.05);
248}
249
250@media (max-width: 768px) {
251 .facet-bar #hamburger {
252 display: flex;
253 }
254}
255
256.facet-bar .status-icon {
257 font-size: 20px;
258 padding: 4px;
259 flex-shrink: 0;
260 cursor: pointer;
261 border-radius: 4px;
262 transition: background 0.2s;
263 margin-left: auto;
264 position: relative;
265}
266
267.facet-bar .status-icon:hover {
268 background: rgba(0,0,0,0.05);
269}
270
271.facet-bar .status-icon.error {
272 box-shadow: 0 0 4px 2px red;
273 border-radius: 4px;
274}
275
276/* Status indicator shapes (SVG inside .status-icon button) */
277.status-indicator {
278 display: block;
279}
280
281.status-indicator--connecting {
282 animation: status-spin 1.2s linear infinite;
283}
284
285@keyframes status-spin {
286 to { transform: rotate(360deg); }
287}
288
289/* Date Nav - hangs below facet bar */
290.date-nav {
291 position: fixed;
292 top: var(--facet-bar-height); /* Sits directly below facet bar */
293 left: 50%;
294 transform: translateX(-50%);
295 width: var(--date-nav-width);
296 height: var(--date-nav-height);
297 box-sizing: border-box;
298
299 /* Grid layout: [left buttons] [centered label] [right buttons] */
300 display: grid;
301 grid-template-columns: 1fr auto 1fr;
302 align-items: center;
303 padding: 0 8px;
304
305 /* Match facet bar styling */
306 background: white;
307 border: 1px solid var(--facet-border, #e0e0e0);
308 border-top: none; /* Seamless connection to facet bar */
309 border-radius: 0 0 12px 12px; /* Rounded bottom only */
310 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
311 z-index: var(--z-bars);
312
313 font-size: 15px;
314 font-weight: 500;
315 color: #374151;
316 user-select: none;
317 view-transition-name: date-nav;
318}
319
320/* Facet-colored background tint (like facet bar) */
321.date-nav::before {
322 content: '';
323 position: absolute;
324 inset: 0;
325 background: var(--facet-bg, transparent);
326 border-radius: 0 0 12px 12px;
327 pointer-events: none;
328 z-index: -1;
329}
330
331/* Cover the facet bar's bottom border where date nav attaches */
332.date-nav::after {
333 content: '';
334 position: absolute;
335 top: -1px;
336 left: 1px;
337 right: 1px;
338 height: 2px;
339 background: white;
340 /* Layer the facet tint on top */
341 background: linear-gradient(var(--facet-bg, transparent), var(--facet-bg, transparent)), white;
342}
343
344.date-nav-arrow {
345 background: none;
346 border: none;
347 min-width: 44px;
348 min-height: 44px;
349 display: inline-flex;
350 align-items: center;
351 justify-content: center;
352 cursor: pointer;
353 font-size: 18px;
354 font-weight: 600;
355 color: #6b7280;
356 border-radius: 4px;
357 transition: background 0.15s, color 0.15s;
358}
359
360.date-nav-arrow:hover {
361 background: rgba(0, 0, 0, 0.05);
362 color: #111827;
363}
364
365/* Button groups for grid layout symmetry */
366.date-nav-left {
367 display: flex;
368 justify-content: flex-start;
369}
370
371.date-nav-right {
372 display: flex;
373 justify-content: flex-end;
374}
375
376/* Today button - always visible, de-emphasized when viewing today */
377.date-nav-today {
378 background: none;
379 border: none;
380 padding: 4px 12px;
381 cursor: pointer;
382 font-size: 14px;
383 font-weight: 500;
384 color: #9ca3af;
385 border-radius: 4px;
386 transition: background 0.15s, color 0.15s, font-weight 0.15s;
387}
388
389.date-nav-today:hover {
390 background: rgba(0, 0, 0, 0.05);
391 color: #111827;
392}
393
394.date-nav-today:focus-visible {
395 outline: 2px solid #b06a1a;
396 outline-offset: 2px;
397 background: rgba(0, 0, 0, 0.05);
398 color: #111827;
399}
400
401/* Prominent state when viewing a different day */
402.date-nav-today.is-other-day {
403 color: #111827;
404 background: rgba(0, 0, 0, 0.05);
405 font-weight: 600;
406}
407
408.date-nav-today.is-other-day:hover {
409 background: rgba(0, 0, 0, 0.08);
410}
411
412.date-nav-label {
413 text-align: center;
414 color: inherit;
415 text-decoration: none;
416 padding: 6px 8px;
417 border-radius: 4px;
418 cursor: pointer;
419 transition: background 0.15s;
420}
421
422.date-nav-label:hover {
423 background: rgba(0, 0, 0, 0.05);
424}
425
426/* Keep date-nav stable during view transitions */
427::view-transition-old(date-nav),
428::view-transition-new(date-nav) {
429 animation: none;
430}
431
432/* When picker is open, remove bottom border radius for seamless connection */
433.date-nav.picker-open {
434 border-radius: 0;
435 box-shadow: none;
436}
437
438.date-nav.picker-open::before {
439 border-radius: 0;
440}
441
442/* Date nav mobile */
443@media (max-width: 480px) {
444 :root {
445 --date-nav-width: 100%;
446 }
447 .date-nav {
448 left: 0;
449 transform: none;
450 border-radius: 0;
451 border-left: none;
452 border-right: none;
453 }
454}
455
456/* Month Picker Dropdown */
457.month-picker {
458 position: absolute;
459 top: 100%;
460 left: -1px; /* Align with parent's outer border */
461 right: -1px; /* Align with parent's outer border */
462 background: white;
463 border: 1px solid var(--facet-border, #e0e0e0);
464 border-top: none;
465 border-radius: 0 0 12px 12px;
466 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
467 overflow: hidden;
468 z-index: 1;
469
470 /* Closed state */
471 max-height: 0;
472 opacity: 0;
473 pointer-events: none;
474 transition: max-height 0.2s ease, opacity 0.15s ease;
475}
476
477/* Facet tint background */
478.month-picker::before {
479 content: '';
480 position: absolute;
481 inset: 0;
482 background: var(--facet-bg, transparent);
483 border-radius: 0 0 12px 12px;
484 pointer-events: none;
485 z-index: -1;
486}
487
488.month-picker.open {
489 max-height: 280px;
490 opacity: 1;
491 pointer-events: auto;
492}
493
494.mp-weekdays {
495 display: grid;
496 grid-template-columns: repeat(7, 1fr);
497 padding: 8px 8px 4px;
498 font-size: 11px;
499 font-weight: 600;
500 color: #9ca3af;
501 text-align: center;
502}
503
504.mp-grid {
505 display: grid;
506 grid-template-columns: repeat(7, 1fr);
507 gap: 3px;
508 padding: 4px 8px 8px;
509}
510
511.mp-day {
512 aspect-ratio: 1;
513 display: flex;
514 align-items: center;
515 justify-content: center;
516 font-size: 13px;
517 border-radius: 6px;
518 cursor: pointer;
519 transition: background 0.1s;
520
521 /* Heat map: intensity controls facet color opacity */
522 background: color-mix(in srgb, var(--facet-color) calc(var(--intensity, 0) * 30%), transparent);
523}
524
525.mp-day:hover:not(.mp-other):not(.mp-empty):not(.mp-future) {
526 background: color-mix(in srgb, var(--facet-color) 40%, transparent);
527}
528
529/* Empty days - striped pattern, not clickable */
530.mp-day.mp-empty {
531 background:
532 repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(0,0,0,0.07) 3px, rgba(0,0,0,0.07) 6px),
533 color-mix(in srgb, var(--facet-color) calc(var(--intensity, 0) * 30%), transparent);
534 color: #999;
535 cursor: default;
536}
537
538/* Future days without data - clickable but muted appearance */
539.mp-day.mp-future {
540 color: #999;
541}
542
543.mp-day.mp-future:hover {
544 background: color-mix(in srgb, var(--facet-color) 20%, transparent);
545}
546
547/* Other month days (leading/trailing) - same striped pattern */
548.mp-day.mp-other {
549 background: repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(0,0,0,0.07) 3px, rgba(0,0,0,0.07) 6px);
550 cursor: default;
551}
552
553/* Today indicator */
554.mp-day.mp-today {
555 box-shadow: inset 0 0 0 2px #b06a1a;
556}
557
558/* Selected day */
559.mp-day.mp-selected {
560 background: var(--facet-color, #b06a1a);
561 color: white;
562 font-weight: 600;
563}
564
565.mp-day.mp-selected:hover {
566 background: var(--facet-color, #b06a1a);
567}
568
569/* ARIA row wrappers - invisible to CSS grid */
570.mp-grid [role="row"] { display: contents; }
571
572/* Focus indicator for keyboard navigation */
573.mp-day:focus-visible {
574 outline: 2px solid var(--facet-color, #b06a1a);
575 outline-offset: -2px;
576}
577
578/* Month picker responsive */
579@media (max-width: 768px) {
580 .month-picker.open {
581 width: 100%;
582 max-width: 350px;
583 }
584}
585
586@media (max-width: 480px) {
587 .month-picker.open {
588 width: 100%;
589 max-width: none;
590 left: 0;
591 right: 0;
592 }
593 .mp-day {
594 min-height: 44px;
595 min-width: 44px;
596 font-size: 14px;
597 }
598 .mp-grid {
599 gap: 2px;
600 padding: 4px;
601 }
602}
603
604/* Status Pane - slides down from facet bar on right (mirrors menu bar on left) */
605.status-pane {
606 position: fixed;
607 top: var(--facet-bar-height);
608 right: 0;
609 width: var(--status-pane-width);
610 background: white;
611 border-left: 1px solid var(--facet-border, #e0e0e0);
612 border-bottom: 1px solid var(--facet-border, #e0e0e0);
613 border-radius: 0 0 0 12px; /* Only bottom-left rounded */
614 /* Shadow only on left and bottom - offset down to avoid top bleed */
615 box-shadow: -4px 4px 8px -2px rgba(0, 0, 0, 0.1);
616 z-index: var(--z-bars);
617 overflow: hidden; /* Clip content during animation */
618
619 /* Slide animation */
620 max-height: 0;
621 opacity: 0;
622 transition: max-height 0.3s ease, opacity 0.2s ease;
623}
624
625.status-pane.visible {
626 max-height: 400px;
627 opacity: 1;
628}
629
630/* Facet-colored background tint */
631.status-pane::before {
632 content: '';
633 position: absolute;
634 inset: 0;
635 background: var(--facet-bg, transparent);
636 border-radius: 0 0 0 12px;
637 pointer-events: none;
638 z-index: -1;
639}
640
641.status-pane-content {
642 padding: 16px;
643 max-height: 380px;
644 overflow-y: auto;
645}
646
647.status-pane-content h3 {
648 margin: 0 0 12px 0;
649 font-size: 16px;
650 font-weight: 600;
651 color: #333;
652}
653
654.status-pane-content p {
655 margin: 0;
656 font-size: 14px;
657 color: #666;
658}
659
660.facet-bar .facet-pills-container {
661 flex: 1;
662 display: flex;
663 align-items: center;
664 justify-content: center;
665 overflow: hidden;
666 padding-top: 4px;
667 padding-bottom: 4px;
668 min-width: 0; /* Allow container to shrink below content size */
669}
670
671/* Menu Bar (left sidebar) */
672.menu-bar {
673 position: fixed;
674 top: var(--facet-bar-height);
675 left: 0;
676 width: var(--menu-bar-width-minimal);
677 max-height: calc(100vh - var(--facet-bar-height));
678 background: white;
679 border-right: none; /* No border on container - items have their own borders */
680 z-index: calc(var(--z-bars) + 1); /* Above app bar */
681 transition: width 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, border-radius 0.3s ease;
682 overflow: hidden; /* Clip all content to rounded corner */
683 border-bottom-right-radius: 12px;
684 display: flex;
685 flex-direction: column;
686}
687
688/* Scrollable container for menu items */
689.menu-bar .menu-items {
690 overflow-y: auto;
691 overflow-x: hidden;
692 scrollbar-width: none; /* Firefox */
693}
694
695ul.menu-items {
696 list-style: none;
697 margin: 0;
698 padding: 0;
699}
700
701.menu-bar .menu-items::-webkit-scrollbar {
702 display: none; /* Chrome, Safari, Edge */
703}
704
705/* Scroll overflow shadows on .menu-items */
706.menu-bar .menu-items::before,
707.menu-bar .menu-items::after {
708 content: '';
709 display: block;
710 position: sticky;
711 left: 0;
712 right: 0;
713 height: 28px;
714 pointer-events: none;
715 z-index: 1;
716 opacity: 0;
717 transition: opacity 0.2s ease;
718}
719
720.menu-bar .menu-items::before {
721 top: 0;
722 margin-bottom: -28px;
723 background: linear-gradient(to bottom, rgba(0,0,0,0.06), transparent);
724}
725
726.menu-bar .menu-items::after {
727 bottom: 0;
728 margin-top: -28px;
729 background: linear-gradient(to top, rgba(0,0,0,0.06), transparent);
730}
731
732.menu-bar .menu-items.scroll-shadow-top::before {
733 opacity: 1;
734}
735
736.menu-bar .menu-items.scroll-shadow-bottom::after {
737 opacity: 1;
738}
739
740body.menu-full .menu-bar {
741 width: var(--menu-bar-width-full);
742 background: linear-gradient(var(--facet-bg, transparent), var(--facet-bg, transparent)), white;
743 border-right: 1px solid var(--facet-border, #e0e0e0);
744 box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
745 border-bottom-right-radius: 0; /* Remove rounded corner when expanded */
746}
747
748.menu-bar .menu-item {
749 padding: 8px 0;
750 display: flex;
751 align-items: center;
752 cursor: pointer;
753 transition: background 0.2s, transform 0.3s ease, max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease, border-radius 0.3s ease;
754 border-bottom: none;
755 border-left: 3px solid transparent;
756 border-right: 1px solid var(--facet-border, #e0e0e0); /* Always present - extends naturally with item animation */
757 color: inherit;
758 white-space: nowrap;
759 position: relative;
760 overflow: hidden;
761 flex-shrink: 0; /* Don't compress - let container scroll instead */
762}
763
764.menu-bar .menu-item-link {
765 display: flex;
766 align-items: center;
767 text-decoration: none;
768 color: inherit;
769 flex: 1;
770 min-width: 0;
771}
772
773
774/* Hide unstarred apps in menu-minimal state */
775.menu-bar .menu-item[data-starred="false"] {
776 max-height: 0;
777 opacity: 0;
778 padding-top: 0;
779 padding-bottom: 0;
780 pointer-events: none;
781}
782
783/* Always show current app, even if unstarred in menu-minimal state */
784.menu-bar .menu-item[data-starred="false"].current {
785 max-height: 50px;
786 opacity: 1;
787 padding-top: 8px;
788 padding-bottom: 8px;
789 pointer-events: auto;
790}
791
792/* Show all apps when menu-full */
793body.menu-full .menu-bar .menu-item[data-starred="false"] {
794 max-height: 50px;
795 opacity: 1;
796 padding-top: 8px;
797 padding-bottom: 8px;
798 pointer-events: auto;
799}
800
801body.menu-full .menu-bar .menu-item.dragging {
802 opacity: 0.5;
803 cursor: grabbing;
804}
805
806.menu-bar .menu-item.drag-over {
807 border-top: 2px solid var(--facet-color);
808}
809
810/* Keyboard reorder visual feedback */
811body.menu-full .menu-bar .menu-item.reordering {
812 outline: 2px dashed var(--facet-color, #b06a1a);
813 outline-offset: -2px;
814 background: color-mix(in srgb, var(--facet-color, #b06a1a) 8%, transparent);
815}
816
817/* Apply facet background to menu items in menu-minimal state */
818body:not(.menu-full) .menu-bar .menu-item {
819 background: var(--facet-bg, white);
820}
821
822/* Hover state for menu items */
823.menu-bar .menu-item:hover {
824 background: rgba(0, 0, 0, 0.05);
825}
826
827/* Active app state - stronger background + accent bar */
828.menu-bar .menu-item.current {
829 background: rgba(0, 0, 0, 0.08);
830 border-left-color: var(--facet-color);
831}
832
833/* In menu-minimal state, layer hover tint over facet background */
834body:not(.menu-full) .menu-bar .menu-item:hover {
835 background:
836 linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),
837 var(--facet-bg, white);
838}
839
840/* In menu-minimal state, active app with stronger tint + accent bar */
841body:not(.menu-full) .menu-bar .menu-item.current {
842 background:
843 linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08)),
844 var(--facet-bg, white);
845 border-left-color: var(--facet-color);
846}
847
848.menu-bar .menu-item .icon {
849 font-size: 20px;
850 width: var(--menu-bar-width-minimal);
851 text-align: center;
852 flex-shrink: 0;
853}
854
855.menu-bar .menu-item .label {
856 font-size: 14px;
857 padding-right: 4px;
858 flex: 1;
859}
860
861.menu-bar .menu-item .star-toggle {
862 display: none;
863 background: none;
864 border: none;
865 font: inherit;
866 font-size: 16px;
867 min-width: 44px;
868 min-height: 44px;
869 align-items: center;
870 justify-content: center;
871 padding: 0;
872 color: inherit;
873 cursor: pointer;
874 opacity: 0;
875 transition: opacity 0.2s;
876 flex-shrink: 0;
877 user-select: none;
878}
879
880body.menu-full .menu-bar .menu-item .star-toggle {
881 display: inline-flex;
882}
883
884/* Show star on hover or when starred */
885body.menu-full .menu-bar .menu-item:hover .star-toggle,
886.menu-bar .menu-item[data-starred="true"] .star-toggle {
887 opacity: 1;
888}
889
890.menu-bar .menu-item .star-toggle:focus-visible {
891 opacity: 1;
892}
893
894.menu-bar .menu-item[data-starred="true"] .star-toggle {
895 color: #f59e0b;
896}
897
898/* Drag handle */
899.menu-bar .menu-item .drag-handle {
900 display: none;
901 background: none;
902 border: none;
903 font: inherit;
904 font-size: 20px;
905 min-width: 44px;
906 min-height: 44px;
907 align-items: center;
908 justify-content: center;
909 padding: 0;
910 cursor: grab;
911 opacity: 0;
912 transition: opacity 0.2s;
913 flex-shrink: 0;
914 user-select: none;
915 color: #999;
916}
917
918body.menu-full .menu-bar .menu-item .drag-handle {
919 display: inline-flex;
920}
921
922body.menu-full .menu-bar .menu-item:hover .drag-handle {
923 opacity: 1;
924}
925
926body.menu-full .menu-bar .menu-item .drag-handle:active {
927 cursor: grabbing;
928}
929
930/* Visual separator after last starred app */
931.menu-bar .menu-item.last-starred {
932 border-bottom: 1px solid var(--facet-border, #e0e0e0);
933 padding-bottom: 12px;
934 margin-bottom: 8px;
935}
936
937/* Menu Submenus - hover pop-outs for app quick-links */
938.menu-submenu {
939 position: fixed;
940 min-width: 160px;
941 background: white;
942 border: 1px solid var(--facet-border, #e0e0e0);
943 border-radius: 8px;
944 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
945 padding: 4px 0;
946 opacity: 0;
947 pointer-events: none;
948 transform: translateX(-8px);
949 transition: opacity 0.15s ease, transform 0.15s ease;
950 z-index: calc(var(--z-bars) + 10);
951}
952
953/* Show when visible class is added via JS */
954.menu-submenu.visible {
955 opacity: 1;
956 pointer-events: auto;
957 transform: translateX(0);
958}
959
960.menu-submenu-item {
961 display: flex;
962 align-items: center;
963 padding: 8px 12px;
964 text-decoration: none;
965 color: inherit;
966 font-size: 13px;
967 transition: background 0.15s ease;
968 gap: 8px;
969 white-space: nowrap;
970}
971
972.menu-submenu-item:hover {
973 background: rgba(0, 0, 0, 0.05);
974}
975
976.menu-submenu-item:first-child {
977 border-radius: 7px 7px 0 0;
978}
979
980.menu-submenu-item:last-child {
981 border-radius: 0 0 7px 7px;
982}
983
984.menu-submenu-item:only-child {
985 border-radius: 7px;
986}
987
988.submenu-icon {
989 font-size: 14px;
990 width: 20px;
991 text-align: center;
992 flex-shrink: 0;
993}
994
995.submenu-label {
996 flex: 1;
997}
998
999.submenu-badge {
1000 background: var(--facet-color, #b06a1a);
1001 color: white;
1002 font-size: 10px;
1003 font-weight: 600;
1004 padding: 2px 6px;
1005 border-radius: 8px;
1006 min-width: 18px;
1007 text-align: center;
1008 line-height: 1.2;
1009}
1010
1011/* Menu bar icon badges */
1012.menu-bar .menu-item .icon {
1013 position: relative;
1014}
1015
1016.menu-badge {
1017 position: absolute;
1018 bottom: -2px;
1019 right: 4px;
1020 min-width: 15px;
1021 height: 15px;
1022 font-size: 9px;
1023 font-weight: 600;
1024 background: #ef4444;
1025 color: white;
1026 border-radius: 7px;
1027 display: flex;
1028 align-items: center;
1029 justify-content: center;
1030 padding: 0 3px;
1031 line-height: 1;
1032}
1033
1034/* Menu expander (down arrow below last visible app icon) */
1035.menu-bar .menu-expander {
1036 min-width: 44px;
1037 min-height: 44px;
1038 display: flex;
1039 align-items: center;
1040 justify-content: center;
1041 font: inherit;
1042 font-size: 16px;
1043 cursor: pointer;
1044 color: inherit;
1045 border: none;
1046 border-bottom: 1px solid var(--facet-border, #e0e0e0);
1047 border-right: 1px solid var(--facet-border, #e0e0e0);
1048 background: var(--facet-bg, white);
1049 transition: background 0.2s;
1050 user-select: none;
1051 position: relative;
1052 border-bottom-right-radius: 12px;
1053 flex-shrink: 0; /* Never shrink - always visible at bottom */
1054}
1055
1056
1057.menu-bar .menu-expander:hover {
1058 background: rgba(0,0,0,0.05);
1059}
1060
1061/* Hide only when sidebar is menu-full (keep visible during menu-all) */
1062body.menu-full .menu-bar .menu-expander {
1063 display: none;
1064}
1065
1066/* Show all apps in menu-all state (icons only, narrow width) */
1067body.menu-all .menu-bar .menu-item[data-starred="false"] {
1068 max-height: 50px;
1069 opacity: 1;
1070 padding-top: 8px;
1071 padding-bottom: 8px;
1072 pointer-events: auto;
1073}
1074
1075/* Keep sidebar narrow in menu-all state (icons only) */
1076body.menu-all .menu-bar {
1077 width: var(--menu-bar-width-minimal);
1078}
1079
1080.facet-pill {
1081 appearance: none;
1082 font-family: inherit;
1083 color: inherit;
1084 line-height: inherit;
1085 display: flex;
1086 align-items: center;
1087 padding: 8px 16px;
1088 margin-right: 8px;
1089 border-radius: 20px;
1090 background: #f5f5f5;
1091 border: 1px solid #ddd;
1092 cursor: grab;
1093 font-size: 14px;
1094 transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
1095 user-select: none;
1096 position: relative;
1097 min-width: 0; /* Allow pill to shrink below content size */
1098 flex-shrink: 1; /* Allow shrinking when space is tight */
1099}
1100
1101.facet-pill .label {
1102 overflow: hidden;
1103 text-overflow: ellipsis;
1104 white-space: nowrap;
1105 min-width: 0; /* Can shrink to zero width */
1106 flex-shrink: 1;
1107 user-select: none;
1108 pointer-events: none;
1109}
1110
1111/* Dim unselected pills when a facet is selected */
1112.facet-pill:not(.selected) {
1113 opacity: 0.85;
1114}
1115
1116.facet-pills-container:not(:has(.selected)) .facet-pill {
1117 opacity: 1;
1118}
1119
1120/* "all" label - muted caption before first pill in all-mode */
1121.facet-all-label {
1122 font-size: 12px;
1123 color: #999;
1124 padding: 0 8px 0 4px;
1125 pointer-events: none;
1126 user-select: none;
1127 white-space: nowrap;
1128}
1129
1130/* Hide "all" label when a facet is selected (CSS backup for JS toggle) */
1131.facet-pills-container:has(.selected) .facet-all-label {
1132 display: none;
1133}
1134
1135/* Empty state: no facets configured */
1136.facet-empty-state {
1137 font-size: 12px;
1138 color: #999;
1139 white-space: nowrap;
1140 user-select: none;
1141 padding: 0 4px;
1142}
1143
1144.facet-empty-create {
1145 background: none;
1146 border: none;
1147 color: #777;
1148 cursor: pointer;
1149 text-decoration: underline;
1150 font-size: inherit;
1151 font-family: inherit;
1152 padding: 0;
1153}
1154
1155.facet-empty-create:hover {
1156 color: #555;
1157}
1158
1159.facet-pill:hover {
1160 opacity: 1;
1161 border-color: var(--pill-color, #999);
1162 transform: translateY(-1px);
1163 box-shadow: 0 2px 4px rgba(0,0,0,0.1);
1164 background: var(--pill-bg, #f5f5f5);
1165}
1166
1167.facet-pill.selected {
1168 opacity: 1;
1169 background: var(--pill-color);
1170 color: white;
1171 border-color: var(--pill-color);
1172 font-weight: 600;
1173}
1174
1175.facet-pill .emoji-container {
1176 position: relative;
1177 font-size: 24px;
1178 line-height: 1;
1179 margin-right: 8px;
1180 display: flex;
1181 align-items: center;
1182 user-select: none;
1183 pointer-events: none;
1184 flex-shrink: 0; /* Never shrink the emoji */
1185}
1186
1187.facet-pill .emoji {
1188 display: block;
1189 user-select: none;
1190 pointer-events: none;
1191}
1192
1193.facet-pill .facet-badge {
1194 position: absolute;
1195 bottom: -2px;
1196 right: -2px;
1197 min-width: 15px;
1198 height: 15px;
1199 font-size: 9px;
1200 font-weight: 600;
1201 background: #ef4444;
1202 color: white;
1203 border-radius: 7px;
1204 display: flex;
1205 align-items: center;
1206 justify-content: center;
1207 padding: 0 3px;
1208 line-height: 1;
1209 user-select: none;
1210 pointer-events: none;
1211}
1212
1213.status-icon .quiet-notif-badge {
1214 position: absolute;
1215 bottom: 0;
1216 right: 0;
1217 min-width: 16px;
1218 height: 16px;
1219 border-radius: 8px;
1220 padding: 0 3px;
1221 font-size: 10px;
1222 font-weight: 700;
1223 background: #ef4444;
1224 color: white;
1225 display: flex;
1226 align-items: center;
1227 justify-content: center;
1228 pointer-events: none;
1229 user-select: none;
1230}
1231
1232/* Drag-and-drop states */
1233.facet-pill:active {
1234 cursor: grabbing;
1235}
1236
1237.facet-pill.dragging {
1238 opacity: 0.5;
1239 cursor: grabbing;
1240 transform: scale(1.05) rotate(2deg);
1241 box-shadow: 0 6px 16px rgba(0,0,0,0.2);
1242 z-index: calc(var(--z-bars) + 1); /* Above bars, below modals */
1243 transition: none; /* Disable transitions while dragging */
1244}
1245
1246.facet-pill.drag-over {
1247 /* Subtle indicator only - actual reordering happens via DOM manipulation */
1248 transform: scale(0.95);
1249}
1250
1251/* Apps without facet support - all pills identical, no selection */
1252.facet-bar.facets-disabled .facet-pill {
1253 pointer-events: none;
1254 cursor: default;
1255 opacity: 0.5;
1256}
1257
1258/* App Bar (bottom) */
1259.app-bar {
1260 position: fixed;
1261 bottom: 12px;
1262 left: 50%;
1263 transform: translateX(-50%);
1264 width: 80%;
1265 z-index: var(--z-bars);
1266 min-height: var(--app-bar-height);
1267 padding: 0;
1268 display: flex;
1269 flex-direction: column;
1270 border-radius: 12px;
1271 border: 1px solid var(--facet-border, #e0e0e0);
1272 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 -2px 8px rgba(0, 0, 0, 0.06);
1273}
1274
1275.app-bar::before {
1276 content: '';
1277 position: absolute;
1278 top: 0;
1279 left: 0;
1280 right: 0;
1281 bottom: 0;
1282 background: white;
1283 pointer-events: none;
1284 z-index: -2;
1285 border-radius: 12px;
1286}
1287
1288.app-bar::after {
1289 content: '';
1290 position: absolute;
1291 top: 0;
1292 left: 0;
1293 right: 0;
1294 bottom: 0;
1295 background: var(--facet-bg, transparent);
1296 transition: background-color 0.3s ease;
1297 pointer-events: none;
1298 z-index: -1;
1299 border-radius: 12px;
1300}
1301
1302/* Response panel (above input row) */
1303.chat-bar-response-panel {
1304 max-height: 0;
1305 overflow: hidden;
1306 padding: 0 16px;
1307 position: relative;
1308 z-index: 1;
1309 transition: max-height 0.2s ease, padding 0.2s ease;
1310}
1311
1312.app-bar--glance .chat-bar-response-panel {
1313 max-height: 200px;
1314 padding: 12px 16px 0;
1315}
1316
1317.chat-bar-separator {
1318 height: 1px;
1319 background: var(--facet-border, #e0e0e0);
1320 margin: 12px -16px 0;
1321}
1322
1323.chat-bar-dismiss {
1324 position: absolute;
1325 top: 8px;
1326 right: 8px;
1327 min-width: 44px;
1328 min-height: 44px;
1329 border: none;
1330 background: transparent;
1331 color: #999;
1332 font-size: 14px;
1333 cursor: pointer;
1334 border-radius: 4px;
1335 display: flex;
1336 align-items: center;
1337 justify-content: center;
1338 z-index: 2;
1339}
1340
1341.chat-bar-dismiss:hover {
1342 background: rgba(0, 0, 0, 0.06);
1343 color: #666;
1344}
1345
1346/* Input row */
1347.chat-bar-input-row {
1348 display: flex;
1349 flex-direction: row;
1350 align-items: center;
1351 gap: 12px;
1352 padding: 0 16px;
1353 min-height: var(--app-bar-height);
1354}
1355
1356/* Chat Bar Elements */
1357.chat-bar-input {
1358 flex: 1;
1359 resize: none;
1360 border: 1px solid #ddd;
1361 border-radius: 20px;
1362 padding: 0.75em 1em;
1363 font-family: inherit;
1364 font-size: 14px;
1365 line-height: 1.5;
1366 max-height: 120px;
1367 min-height: 42px;
1368 background: transparent;
1369 position: relative;
1370 z-index: 1;
1371}
1372
1373.chat-bar-input:focus {
1374 outline: none;
1375 border-color: var(--facet-color, #b06a1a);
1376}
1377
1378.chat-bar-input::placeholder {
1379 color: #999;
1380}
1381
1382.chat-bar-send {
1383 width: 44px;
1384 height: 44px;
1385 border-radius: 50%;
1386 border: none;
1387 background: var(--facet-color, #b06a1a);
1388 color: white;
1389 cursor: pointer;
1390 display: flex;
1391 align-items: center;
1392 justify-content: center;
1393 position: relative;
1394 z-index: 1;
1395 flex-shrink: 0;
1396}
1397
1398.chat-bar-send:hover {
1399 opacity: 0.85;
1400}
1401
1402@media (max-width: 768px) {
1403 .chat-bar-send {
1404 width: 48px;
1405 height: 48px;
1406 }
1407}
1408
1409.chat-bar-thinking {
1410 display: flex;
1411 align-items: center;
1412 gap: 0.5em;
1413 color: #999;
1414 font-size: 13px;
1415 position: relative;
1416 z-index: 1;
1417 overflow: hidden;
1418 text-overflow: ellipsis;
1419 white-space: nowrap;
1420 min-width: 0;
1421}
1422
1423.chat-bar-thinking > [aria-hidden="true"] {
1424 overflow: hidden;
1425 text-overflow: ellipsis;
1426 min-width: 0;
1427}
1428
1429.chat-bar-thinking-dot {
1430 width: 8px;
1431 height: 8px;
1432 background: var(--facet-color, #b06a1a);
1433 border-radius: 50%;
1434 animation: chat-bar-pulse 1s ease-in-out infinite;
1435}
1436
1437@keyframes chat-bar-pulse {
1438 0%, 100% { opacity: 0.3; }
1439 50% { opacity: 1; }
1440}
1441
1442.thinking-elapsed {
1443 opacity: 0.5;
1444 font-variant-numeric: tabular-nums;
1445}
1446
1447.chat-bar-response {
1448 font-size: 13px;
1449 line-height: 1.5;
1450 color: #666;
1451 max-height: 5em;
1452 overflow: hidden;
1453 padding-right: 28px;
1454 position: relative;
1455 z-index: 1;
1456}
1457
1458.chat-bar-response--error {
1459 color: #d97706;
1460}
1461
1462/* ========================================
1463 * Conversation Panel
1464 * Expandable focus-mode conversation surface.
1465 * The chat bar expands upward to 80% viewport.
1466 * Backdrop blur excludes aruco corner-tags via z-index layering:
1467 * backdrop at z-bars+49 < corner-tags at z-tags (400).
1468 * ======================================== */
1469
1470/* Backdrop — blurs convey content when panel is open */
1471.conversation-backdrop {
1472 position: fixed;
1473 inset: 0;
1474 z-index: calc(var(--z-bars) + 49);
1475 backdrop-filter: blur(8px);
1476 -webkit-backdrop-filter: blur(8px);
1477 background: rgba(0, 0, 0, 0.08);
1478 opacity: 0;
1479 pointer-events: none;
1480 transition: opacity 0.3s ease;
1481}
1482
1483.conversation-backdrop.visible {
1484 opacity: 1;
1485 pointer-events: auto;
1486}
1487
1488/* Panel expanded state */
1489.app-bar.app-bar--focused {
1490 height: 80vh; /* fallback for browsers without dvh */
1491 height: 80dvh;
1492 bottom: 0;
1493 border-radius: 12px 12px 0 0;
1494 z-index: calc(var(--z-bars) + 50);
1495 animation: panel-expand 0.3s cubic-bezier(0.4, 0, 0.2, 1);
1496}
1497
1498/* Panel closing animation */
1499.app-bar.app-bar--dismissing {
1500 z-index: calc(var(--z-bars) + 50);
1501 animation: panel-collapse 0.25s ease forwards;
1502}
1503
1504@keyframes panel-expand {
1505 from {
1506 height: var(--app-bar-height);
1507 bottom: 12px;
1508 border-radius: 12px;
1509 }
1510}
1511
1512@keyframes panel-collapse {
1513 from {
1514 height: 80vh;
1515 height: 80dvh;
1516 bottom: 0;
1517 border-radius: 12px 12px 0 0;
1518 }
1519 to {
1520 height: var(--app-bar-height);
1521 bottom: 12px;
1522 border-radius: 12px;
1523 }
1524}
1525
1526@media (max-width: 768px) {
1527 .app-bar.app-bar--focused {
1528 width: calc(100% - 16px);
1529 }
1530}
1531
1532/* Conversation messages area */
1533.conversation-messages {
1534 display: none;
1535 flex-direction: column;
1536 gap: 16px;
1537 overflow-y: auto;
1538 padding: 16px;
1539 flex: 1;
1540 min-height: 0;
1541 background: #fffcf9;
1542 scrollbar-width: thin;
1543 scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
1544}
1545
1546.conversation-messages::-webkit-scrollbar {
1547 width: 6px;
1548}
1549
1550.conversation-messages::-webkit-scrollbar-thumb {
1551 background: rgba(0, 0, 0, 0.15);
1552 border-radius: 3px;
1553}
1554
1555.app-bar.app-bar--focused .conversation-messages {
1556 display: flex;
1557}
1558
1559/* Hide inline response panel in panel mode */
1560.app-bar.app-bar--focused .chat-bar-response-panel {
1561 display: none;
1562}
1563
1564/* Separator between messages and input (panel mode only) */
1565.conversation-separator {
1566 display: none;
1567}
1568
1569.app-bar.app-bar--focused .conversation-separator {
1570 display: block;
1571 height: 1px;
1572 background: var(--facet-border, #e0e0e0);
1573 flex-shrink: 0;
1574}
1575
1576/* Message bubbles */
1577.conversation-message {
1578 max-width: 85%;
1579 padding: 10px 14px;
1580 border-radius: 16px;
1581 font-size: 14px;
1582 line-height: 1.5;
1583 word-wrap: break-word;
1584 white-space: pre-wrap;
1585}
1586
1587.conversation-message.user {
1588 align-self: flex-end;
1589 background: var(--facet-color, #b06a1a);
1590 color: white;
1591 border-bottom-right-radius: 4px;
1592}
1593
1594.conversation-message.agent {
1595 align-self: flex-start;
1596 background: #f5f0eb;
1597 color: #1f2937;
1598 border-bottom-left-radius: 4px;
1599 white-space: normal;
1600 word-break: break-word;
1601 overflow-wrap: break-word;
1602}
1603
1604.conversation-message.agent p {
1605 margin: 0 0 0.5em 0;
1606}
1607
1608.conversation-message.agent p:last-child {
1609 margin-bottom: 0;
1610}
1611
1612.conversation-message.agent ul,
1613.conversation-message.agent ol {
1614 margin: 0.25em 0 0.5em 0;
1615 padding-left: 1.5em;
1616}
1617
1618.conversation-message.agent li {
1619 margin-bottom: 0.2em;
1620}
1621
1622.conversation-message.agent code {
1623 background: rgba(0, 0, 0, 0.06);
1624 padding: 0.15em 0.35em;
1625 border-radius: 4px;
1626 font-size: 0.9em;
1627 font-family: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;
1628}
1629
1630.conversation-message.agent pre {
1631 background: rgba(0, 0, 0, 0.06);
1632 padding: 0.6em 0.8em;
1633 border-radius: 6px;
1634 overflow-x: auto;
1635 margin: 0.4em 0;
1636}
1637
1638.conversation-message.agent pre code {
1639 background: none;
1640 padding: 0;
1641 border-radius: 0;
1642 font-size: 0.85em;
1643 white-space: pre;
1644}
1645
1646.conversation-message.agent blockquote {
1647 border-left: 3px solid rgba(0, 0, 0, 0.15);
1648 margin: 0.4em 0;
1649 padding: 0.2em 0 0.2em 0.8em;
1650 color: #4b5563;
1651}
1652
1653.conversation-message.agent h1,
1654.conversation-message.agent h2,
1655.conversation-message.agent h3,
1656.conversation-message.agent h4,
1657.conversation-message.agent h5,
1658.conversation-message.agent h6 {
1659 margin: 0.6em 0 0.3em 0;
1660 font-weight: 600;
1661 line-height: 1.3;
1662}
1663
1664.conversation-message.agent h1 { font-size: 1.2em; }
1665.conversation-message.agent h2 { font-size: 1.1em; }
1666.conversation-message.agent h3 { font-size: 1.05em; }
1667
1668.conversation-message.agent a {
1669 color: #b06a1a;
1670 text-decoration: underline;
1671 text-decoration-color: rgba(176, 106, 26, 0.3);
1672}
1673
1674.conversation-message.agent a:hover {
1675 text-decoration-color: rgba(176, 106, 26, 0.7);
1676}
1677
1678.conversation-message.agent hr {
1679 border: none;
1680 border-top: 1px solid rgba(0, 0, 0, 0.1);
1681 margin: 0.5em 0;
1682}
1683
1684.conversation-message.agent.thinking {
1685 display: flex;
1686 align-items: center;
1687 gap: 0.5em;
1688 color: #999;
1689 font-size: 13px;
1690 background: #f5f0eb;
1691}
1692
1693.conversation-message.error {
1694 align-self: flex-start;
1695 background: rgba(217, 119, 6, 0.06);
1696 color: #1f2937;
1697 border-left: 4px solid #d97706;
1698 border-bottom-left-radius: 4px;
1699}
1700
1701.conversation-message.error::before {
1702 content: '\26A0\FE0F ';
1703 color: #d97706;
1704}
1705
1706/* Error log display */
1707#error-log {
1708 display: none;
1709 position: fixed;
1710 bottom: 0;
1711 left: 0;
1712 right: 0;
1713 background: #111;
1714 color: #eee;
1715 padding: 1em;
1716 font: 12px monospace;
1717 max-height: 30vh;
1718 overflow-y: auto;
1719 border-top: 2px solid #ff3b30;
1720 z-index: var(--z-notifications);
1721 box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
1722}
1723
1724#error-log-dismiss {
1725 position: sticky;
1726 top: 0;
1727 float: right;
1728 background: #222;
1729 color: #eee;
1730 border: 1px solid #444;
1731 padding: 2px 8px;
1732 font: 12px monospace;
1733 cursor: pointer;
1734}
1735
1736/* Notification Center */
1737.notification-center {
1738 position: fixed;
1739 top: calc(var(--facet-bar-height) + 4px);
1740 right: 20px;
1741 width: 280px;
1742 z-index: var(--z-notifications);
1743 pointer-events: none;
1744 display: flex;
1745 flex-direction: column;
1746 gap: 8px;
1747}
1748
1749/* Notification Card */
1750.notification-card {
1751 background: white;
1752 border: 1px solid #e5e7eb;
1753 border-radius: 8px;
1754 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
1755 padding: 12px;
1756 position: relative;
1757 overflow: hidden;
1758 pointer-events: all;
1759 animation: slideIn 0.3s ease;
1760 transition: transform 0.2s ease, box-shadow 0.2s ease;
1761 cursor: default;
1762 display: block;
1763}
1764
1765/* Reset anchor tag styles when used as notification card */
1766a.notification-card {
1767 color: inherit;
1768 text-decoration: none;
1769}
1770
1771.notification-card[data-action]:not([data-action=""]) {
1772 cursor: pointer;
1773}
1774
1775.notification-card:hover {
1776 transform: translateX(-4px);
1777 box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
1778}
1779
1780@keyframes slideIn {
1781 from {
1782 opacity: 0;
1783 transform: translateX(100%);
1784 }
1785 to {
1786 opacity: 1;
1787 transform: translateX(0);
1788 }
1789}
1790
1791@keyframes countdownShrink {
1792 from {
1793 transform: scaleX(1);
1794 }
1795 to {
1796 transform: scaleX(0);
1797 }
1798}
1799
1800.notification-countdown {
1801 position: absolute;
1802 bottom: 0;
1803 left: 0;
1804 right: 0;
1805 height: 3px;
1806 background: #3b82f6;
1807 transform-origin: left;
1808 animation: countdownShrink linear forwards;
1809 border-radius: 0 0 8px 8px;
1810}
1811
1812.notification-card:hover .notification-countdown,
1813.notification-card:focus-within .notification-countdown {
1814 animation-play-state: paused;
1815}
1816
1817/* Notification Header */
1818.notification-header {
1819 display: flex;
1820 align-items: center;
1821 gap: 8px;
1822 margin-bottom: 8px;
1823}
1824
1825.notification-app-icon {
1826 font-size: 16px;
1827 line-height: 1;
1828}
1829
1830.notification-app-name {
1831 font-size: 11px;
1832 color: #9ca3af;
1833 text-transform: capitalize;
1834 flex: 1;
1835}
1836
1837.notification-close {
1838 background: none;
1839 border: none;
1840 font-size: 20px;
1841 line-height: 1;
1842 color: #9ca3af;
1843 cursor: pointer;
1844 min-width: 44px;
1845 min-height: 44px;
1846 display: flex;
1847 align-items: center;
1848 justify-content: center;
1849 border-radius: 4px;
1850 transition: background 0.2s, color 0.2s;
1851}
1852
1853.notification-close:hover {
1854 background: #f3f4f6;
1855 color: #374151;
1856}
1857
1858/* Notification Body */
1859.notification-body {
1860 position: relative;
1861}
1862
1863.notification-title {
1864 font-weight: 600;
1865 font-size: 14px;
1866 color: #1f2937;
1867 margin-bottom: 4px;
1868 line-height: 1.3;
1869}
1870
1871.notification-message {
1872 font-size: 13px;
1873 color: #6b7280;
1874 line-height: 1.4;
1875 display: -webkit-box;
1876 -webkit-line-clamp: 2;
1877 -webkit-box-orient: vertical;
1878 overflow: hidden;
1879}
1880
1881.notification-badge {
1882 position: absolute;
1883 top: 0;
1884 right: 0;
1885 background: #ef4444;
1886 color: white;
1887 font-size: 11px;
1888 font-weight: 600;
1889 padding: 2px 6px;
1890 border-radius: 10px;
1891 min-width: 20px;
1892 text-align: center;
1893 line-height: 1.2;
1894}
1895
1896/* Notification Footer */
1897.notification-footer {
1898 margin-top: 8px;
1899 padding-top: 8px;
1900 border-top: 1px solid #f3f4f6;
1901}
1902
1903.notification-time {
1904 font-size: 11px;
1905 color: #9ca3af;
1906}
1907
1908/* Responsive */
1909@media (max-width: 768px) {
1910 .notification-center {
1911 top: calc(var(--facet-bar-height) + 4px);
1912 right: 8px;
1913 left: 8px;
1914 width: auto;
1915 }
1916
1917 .notification-card {
1918 width: 100%;
1919 }
1920}
1921
1922/* Modal styling */
1923.modal {
1924 display: none;
1925 position: fixed;
1926 z-index: var(--z-modals);
1927 left: 0;
1928 top: 0;
1929 width: 100%;
1930 height: 100%;
1931 background: rgba(0,0,0,0.5);
1932}
1933
1934.modal-content {
1935 background: white;
1936 margin: 5% auto;
1937 padding: 1em;
1938 border-radius: 8px;
1939 max-width: 500px;
1940 max-height: 80vh;
1941 overflow: auto;
1942 position: relative;
1943}
1944
1945.close {
1946 position: absolute;
1947 top: 10px;
1948 right: 15px;
1949 cursor: pointer;
1950 font-size: 24px;
1951}
1952
1953/* Corner Tags - fixed markers for screen region detection */
1954.corner-tags {
1955 position: fixed;
1956 inset: 0;
1957 pointer-events: none;
1958 z-index: var(--z-tags);
1959}
1960
1961.corner-tag {
1962 position: absolute;
1963 width: 16px;
1964 height: 16px;
1965 background: var(--facet-color);
1966 mask-size: contain;
1967 -webkit-mask-size: contain;
1968 image-rendering: pixelated;
1969 image-rendering: crisp-edges; /* Firefox fallback */
1970}
1971
1972.corner-tag-tl { top: 0; left: 0; mask-image: url('tags/tag-6.png'); -webkit-mask-image: url('tags/tag-6.png'); }
1973.corner-tag-tr { top: 0; right: 0; mask-image: url('tags/tag-7.png'); -webkit-mask-image: url('tags/tag-7.png'); }
1974.corner-tag-bl { bottom: 32px; left: 0; mask-image: url('tags/tag-4.png'); -webkit-mask-image: url('tags/tag-4.png'); }
1975.corner-tag-br { bottom: 32px; right: 0; mask-image: url('tags/tag-2.png'); -webkit-mask-image: url('tags/tag-2.png'); }
1976
1977/* ========================================
1978 * Facet Add Button
1979 * Plus button to create new facets
1980 * ======================================== */
1981.facet-add-pill {
1982 appearance: none;
1983 font-family: inherit;
1984 color: inherit;
1985 line-height: inherit;
1986 display: flex;
1987 align-items: center;
1988 justify-content: center;
1989 width: 36px;
1990 height: 36px;
1991 border-radius: 50%;
1992 background: transparent;
1993 border: 2px dashed #ccc;
1994 cursor: pointer;
1995 font-size: 20px;
1996 color: #999;
1997 transition: all 0.2s ease;
1998 flex-shrink: 0;
1999}
2000
2001.facet-add-pill:hover {
2002 border-color: var(--facet-color, #b06a1a);
2003 color: var(--facet-color, #b06a1a);
2004 background: var(--facet-bg, rgba(176, 106, 26, 0.1));
2005 transform: scale(1.1);
2006}
2007
2008/* ========================================
2009 * Facet Create Modal
2010 * Simple modal for creating new facets
2011 * ======================================== */
2012.facet-create-modal {
2013 display: none;
2014 position: fixed;
2015 z-index: var(--z-modals);
2016 left: 0;
2017 top: 0;
2018 width: 100%;
2019 height: 100%;
2020 background: rgba(0, 0, 0, 0.5);
2021}
2022
2023.facet-create-modal.visible {
2024 display: flex;
2025 align-items: center;
2026 justify-content: center;
2027}
2028
2029.facet-create-content {
2030 background: white;
2031 padding: 24px;
2032 border-radius: 12px;
2033 width: 90%;
2034 max-width: 400px;
2035 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
2036}
2037
2038.facet-create-content h3 {
2039 margin: 0 0 20px 0;
2040 font-size: 18px;
2041 font-weight: 600;
2042 color: #333;
2043}
2044
2045.facet-create-field {
2046 margin-bottom: 16px;
2047}
2048
2049.facet-create-field label {
2050 display: block;
2051 font-size: 14px;
2052 font-weight: 500;
2053 color: #555;
2054 margin-bottom: 6px;
2055}
2056
2057.facet-create-field input {
2058 width: 100%;
2059 padding: 10px 12px;
2060 border: 2px solid #ddd;
2061 border-radius: 8px;
2062 font-size: 16px;
2063 transition: border-color 0.2s;
2064}
2065
2066.facet-create-field input:focus {
2067 outline: none;
2068 border-color: var(--facet-color, #b06a1a);
2069}
2070
2071.facet-create-slug {
2072 font-size: 13px;
2073 color: #888;
2074 margin-top: 6px;
2075 font-family: monospace;
2076}
2077
2078.facet-create-slug.has-slug::before {
2079 content: "→ ";
2080}
2081
2082.facet-create-buttons {
2083 display: flex;
2084 justify-content: flex-end;
2085 gap: 12px;
2086 margin-top: 24px;
2087}
2088
2089.facet-create-buttons button {
2090 padding: 10px 20px;
2091 border-radius: 8px;
2092 font-size: 14px;
2093 font-weight: 500;
2094 cursor: pointer;
2095 transition: all 0.2s;
2096}
2097
2098.facet-create-cancel {
2099 background: #f5f5f5;
2100 border: 1px solid #ddd;
2101 color: #666;
2102}
2103
2104.facet-create-cancel:hover {
2105 background: #e5e5e5;
2106}
2107
2108.facet-create-submit {
2109 background: var(--facet-color, #b06a1a);
2110 border: none;
2111 color: white;
2112}
2113
2114.facet-create-submit:hover {
2115 opacity: 0.9;
2116}
2117
2118.facet-create-submit:disabled {
2119 background: #ccc;
2120 cursor: not-allowed;
2121}
2122
2123.facet-create-error {
2124 color: #dc2626;
2125 font-size: 13px;
2126 margin-top: 8px;
2127 display: none;
2128}
2129
2130.facet-create-error.visible {
2131 display: block;
2132}
2133
2134/* Button reset for a11y-converted controls */
2135button#hamburger,
2136button.status-icon,
2137button.close {
2138 appearance: none;
2139 background: none;
2140 border: none;
2141 padding: 0;
2142 margin: 0;
2143 font: inherit;
2144 color: inherit;
2145 cursor: pointer;
2146}
2147
2148/* Visually-hidden expand/collapse button - focusable but invisible */
2149.chat-bar-expand {
2150 position: absolute;
2151 width: 1px;
2152 height: 1px;
2153 padding: 0;
2154 margin: -1px;
2155 overflow: hidden;
2156 clip: rect(0, 0, 0, 0);
2157 white-space: nowrap;
2158 border: 0;
2159 background: none;
2160 font: inherit;
2161 color: inherit;
2162}
2163
2164.chat-bar-expand:focus-visible {
2165 position: static;
2166 width: auto;
2167 height: auto;
2168 margin: 0;
2169 overflow: visible;
2170 clip: auto;
2171 white-space: normal;
2172 font-size: 14px;
2173}
2174
2175/* ========================================
2176 * Reduced Motion
2177 * Respects prefers-reduced-motion user preference
2178 * ======================================== */
2179@media (prefers-reduced-motion: reduce) {
2180 @view-transition {
2181 navigation: none;
2182 }
2183
2184 *,
2185 *::before,
2186 *::after {
2187 transition-duration: 0.01ms !important;
2188 animation-duration: 0.01ms !important;
2189 animation-iteration-count: 1 !important;
2190 }
2191
2192 .chat-bar-thinking-dot {
2193 animation: none;
2194 opacity: 1;
2195 }
2196
2197 .status-indicator--connecting {
2198 animation: none;
2199 }
2200
2201 .facet-pill:hover {
2202 transform: none;
2203 }
2204
2205 .facet-pill.dragging {
2206 transform: none;
2207 }
2208
2209 .facet-pill.drag-over {
2210 transform: none;
2211 }
2212
2213 .facet-add-pill:hover {
2214 transform: none;
2215 }
2216
2217 .menu-submenu {
2218 transform: none;
2219 }
2220
2221 .notification-card:hover {
2222 transform: none;
2223 }
2224}
2225
2226/* Focus-visible states for keyboard navigation */
2227.menu-bar .menu-item-link:focus-visible,
2228.menu-submenu-item:focus-visible,
2229.facet-pill:focus-visible,
2230.facet-add-pill:focus-visible,
2231#hamburger:focus-visible,
2232.facet-bar .status-icon:focus-visible,
2233.chat-bar-send:focus-visible,
2234.chat-bar-dismiss:focus-visible,
2235.date-nav-arrow:focus-visible,
2236.facet-create-submit:focus-visible,
2237.facet-create-cancel:focus-visible,
2238button:focus-visible,
2239a:focus-visible {
2240 outline: 2px solid var(--facet-color, #b06a1a);
2241 outline-offset: 2px;
2242}
2243
2244/* Visually hidden — accessible to screen readers */
2245.visually-hidden {
2246 position: absolute;
2247 width: 1px;
2248 height: 1px;
2249 padding: 0;
2250 margin: -1px;
2251 overflow: hidden;
2252 clip: rect(0, 0, 0, 0);
2253 white-space: nowrap;
2254 border: 0;
2255}
2256
2257/* Skip-to-content link — visible on focus */
2258.skip-link {
2259 position: absolute;
2260 top: -100%;
2261 left: 0;
2262 z-index: 9999;
2263 padding: 8px 16px;
2264 background: var(--facet-color, #b06a1a);
2265 color: #fff;
2266 text-decoration: none;
2267 font-size: 14px;
2268 border-radius: 0 0 4px 0;
2269}
2270
2271.skip-link:focus {
2272 top: 0;
2273}