@omniloy/sofia-sdk 1.0.8 → 1.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/legacy/webcomponents.d.ts +50 -2
- package/dist/legacy/webcomponents.es.js +3301 -1854
- package/dist/legacy/webcomponents.umd.js +3301 -1854
- package/dist/react/index.css +1855 -1536
- package/dist/react/index.d.ts +50 -2
- package/dist/react/index.es.js +8442 -6500
- package/dist/webcomponents.d.ts +50 -2
- package/dist/webcomponents.es.js +3281 -1672
- package/dist/webcomponents.umd.js +3281 -1672
- package/package.json +1 -1
package/dist/react/index.css
CHANGED
|
@@ -392,6 +392,121 @@
|
|
|
392
392
|
border-top-left-radius: 0px;
|
|
393
393
|
border-bottom-left-radius: 0px;
|
|
394
394
|
}
|
|
395
|
+
/* Granola-style animated audio bars: 3 rounded bars (short / tall / medium).
|
|
396
|
+
Accent-colored and "dancing" while recording, muted and static otherwise. */
|
|
397
|
+
.omniscribe_audio-bars {
|
|
398
|
+
display: flex;
|
|
399
|
+
align-items: center;
|
|
400
|
+
justify-content: center;
|
|
401
|
+
gap: 3px;
|
|
402
|
+
}
|
|
403
|
+
|
|
404
|
+
.omniscribe_audio-bar {
|
|
405
|
+
width: 3.5px;
|
|
406
|
+
background-color: var(--omniscribe-primary, #1a73e8);
|
|
407
|
+
border-radius: 9999px;
|
|
408
|
+
transition:
|
|
409
|
+
height 0.15s ease,
|
|
410
|
+
background-color 0.2s ease;
|
|
411
|
+
}
|
|
412
|
+
|
|
413
|
+
/* Muted gray when not recording */
|
|
414
|
+
.omniscribe_audio-bar--inactive {
|
|
415
|
+
background-color: var(--grey-700, #9ca3af);
|
|
416
|
+
}
|
|
417
|
+
|
|
418
|
+
/* Live mode — heights are driven per-frame from the mic level, so use a
|
|
419
|
+
short linear transition that dampens the movement without lagging it */
|
|
420
|
+
.omniscribe_audio-bar--live {
|
|
421
|
+
transition:
|
|
422
|
+
height 0.08s linear,
|
|
423
|
+
background-color 0.2s ease;
|
|
424
|
+
}
|
|
425
|
+
|
|
426
|
+
/* Static heights: short / tall / medium (Granola pattern) */
|
|
427
|
+
.omniscribe_audio-bar--1 {
|
|
428
|
+
height: 50%;
|
|
429
|
+
}
|
|
430
|
+
|
|
431
|
+
.omniscribe_audio-bar--2 {
|
|
432
|
+
height: 100%;
|
|
433
|
+
}
|
|
434
|
+
|
|
435
|
+
.omniscribe_audio-bar--3 {
|
|
436
|
+
height: 65%;
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
/* Dancing equalizer animation while recording */
|
|
440
|
+
.omniscribe_audio-bar--animating.omniscribe_audio-bar--1 {
|
|
441
|
+
animation: omniscribe-audio-dance-1 0.9s ease-in-out infinite;
|
|
442
|
+
}
|
|
443
|
+
|
|
444
|
+
.omniscribe_audio-bar--animating.omniscribe_audio-bar--2 {
|
|
445
|
+
animation: omniscribe-audio-dance-2 1.1s ease-in-out infinite;
|
|
446
|
+
}
|
|
447
|
+
|
|
448
|
+
.omniscribe_audio-bar--animating.omniscribe_audio-bar--3 {
|
|
449
|
+
animation: omniscribe-audio-dance-3 1s ease-in-out infinite;
|
|
450
|
+
}
|
|
451
|
+
|
|
452
|
+
/* The dance is decorative — it runs while connecting, when there is no stream
|
|
453
|
+
to visualise yet. The --live bars are deliberately left out: those track
|
|
454
|
+
real microphone input, so they are information, not decoration. */
|
|
455
|
+
@media (prefers-reduced-motion: reduce) {
|
|
456
|
+
.omniscribe_audio-bar--animating.omniscribe_audio-bar--1,
|
|
457
|
+
.omniscribe_audio-bar--animating.omniscribe_audio-bar--2,
|
|
458
|
+
.omniscribe_audio-bar--animating.omniscribe_audio-bar--3 {
|
|
459
|
+
animation: none;
|
|
460
|
+
}
|
|
461
|
+
}
|
|
462
|
+
|
|
463
|
+
@keyframes omniscribe-audio-dance-1 {
|
|
464
|
+
0%,
|
|
465
|
+
100% {
|
|
466
|
+
height: 50%;
|
|
467
|
+
}
|
|
468
|
+
25% {
|
|
469
|
+
height: 85%;
|
|
470
|
+
}
|
|
471
|
+
50% {
|
|
472
|
+
height: 35%;
|
|
473
|
+
}
|
|
474
|
+
75% {
|
|
475
|
+
height: 70%;
|
|
476
|
+
}
|
|
477
|
+
}
|
|
478
|
+
|
|
479
|
+
@keyframes omniscribe-audio-dance-2 {
|
|
480
|
+
0%,
|
|
481
|
+
100% {
|
|
482
|
+
height: 100%;
|
|
483
|
+
}
|
|
484
|
+
30% {
|
|
485
|
+
height: 55%;
|
|
486
|
+
}
|
|
487
|
+
60% {
|
|
488
|
+
height: 90%;
|
|
489
|
+
}
|
|
490
|
+
80% {
|
|
491
|
+
height: 65%;
|
|
492
|
+
}
|
|
493
|
+
}
|
|
494
|
+
|
|
495
|
+
@keyframes omniscribe-audio-dance-3 {
|
|
496
|
+
0%,
|
|
497
|
+
100% {
|
|
498
|
+
height: 65%;
|
|
499
|
+
}
|
|
500
|
+
20% {
|
|
501
|
+
height: 95%;
|
|
502
|
+
}
|
|
503
|
+
55% {
|
|
504
|
+
height: 45%;
|
|
505
|
+
}
|
|
506
|
+
85% {
|
|
507
|
+
height: 80%;
|
|
508
|
+
}
|
|
509
|
+
}
|
|
395
510
|
.tooltip-base {
|
|
396
511
|
position: fixed;
|
|
397
512
|
z-index: 9999;
|
|
@@ -566,148 +681,143 @@
|
|
|
566
681
|
flex-shrink: 0;
|
|
567
682
|
}
|
|
568
683
|
|
|
684
|
+
/* Granola-style transcribe pill: [bars chevron] ··· [stop square | text]
|
|
685
|
+
A single flat capsule — no nested containers, no shadow, and its chrome
|
|
686
|
+
stays constant across idle/recording/paused (only the bars change). */
|
|
569
687
|
.omniscribe_transcribe-dropdown {
|
|
570
688
|
display: flex;
|
|
571
689
|
align-items: center;
|
|
690
|
+
gap: 18px;
|
|
572
691
|
border: 1px solid var(--border, #e5e7eb);
|
|
573
692
|
border-radius: 9999px;
|
|
574
693
|
background-color: var(--omniscribe-surface, white);
|
|
575
|
-
transition:
|
|
576
|
-
|
|
694
|
+
transition:
|
|
695
|
+
background-color 0.15s ease,
|
|
696
|
+
border-color 0.15s ease;
|
|
697
|
+
font-size: var(--font-size-100, 13px);
|
|
577
698
|
font-weight: 500;
|
|
578
|
-
color: var(--omniscribe-text
|
|
699
|
+
color: var(--omniscribe-text, #1f2937);
|
|
579
700
|
white-space: nowrap;
|
|
580
701
|
overflow: hidden;
|
|
581
702
|
flex-shrink: 0;
|
|
582
|
-
|
|
583
|
-
margin-bottom: 7px;
|
|
584
|
-
margin-left: 1px;
|
|
585
|
-
padding-inline: 12px;
|
|
586
|
-
}
|
|
587
|
-
|
|
588
|
-
/* Expanded state - no pill style */
|
|
589
|
-
.omniscribe_transcribe-dropdown--expanded {
|
|
590
|
-
border: none;
|
|
591
|
-
background-color: transparent;
|
|
592
|
-
box-shadow: none;
|
|
593
|
-
}
|
|
594
|
-
|
|
595
|
-
.omniscribe_transcribe-dropdown--expanded
|
|
596
|
-
.omniscribe_transcribe-dropdown--recording {
|
|
597
|
-
background-color: transparent;
|
|
598
|
-
border: none;
|
|
703
|
+
padding: 10px 18px;
|
|
599
704
|
}
|
|
600
705
|
|
|
601
706
|
.omniscribe_transcribe-dropdown:hover:not(
|
|
602
707
|
.omniscribe_transcribe-dropdown--disabled
|
|
603
708
|
) {
|
|
604
|
-
background-color: var(--omniscribe-surface-alt, #
|
|
709
|
+
background-color: var(--omniscribe-surface-alt, #fafafa);
|
|
605
710
|
border-color: var(--color-gray-300, #d1d5db);
|
|
606
711
|
}
|
|
607
712
|
|
|
608
|
-
|
|
713
|
+
/* Left group: bars + chevron sit flat inside the capsule (no inner pill) */
|
|
714
|
+
.omniscribe_transcribe-controls-group {
|
|
609
715
|
display: flex;
|
|
610
716
|
align-items: center;
|
|
611
|
-
gap:
|
|
612
|
-
|
|
717
|
+
gap: 8px;
|
|
718
|
+
flex-shrink: 0;
|
|
719
|
+
}
|
|
720
|
+
|
|
721
|
+
/* Bars & chevron buttons — chromeless icon buttons */
|
|
722
|
+
.omniscribe_transcribe-bars-button,
|
|
723
|
+
.omniscribe_transcribe-chevron-button {
|
|
724
|
+
display: flex;
|
|
725
|
+
align-items: center;
|
|
726
|
+
justify-content: center;
|
|
727
|
+
padding: 0;
|
|
613
728
|
border: none;
|
|
614
729
|
background: transparent;
|
|
615
730
|
cursor: pointer;
|
|
616
|
-
font-size: inherit;
|
|
617
|
-
font-weight: inherit;
|
|
618
|
-
color: inherit;
|
|
619
731
|
}
|
|
620
732
|
|
|
621
|
-
.omniscribe_transcribe-
|
|
622
|
-
|
|
623
|
-
}
|
|
624
|
-
|
|
625
|
-
.omniscribe_transcribe-dropdown-main:disabled {
|
|
733
|
+
.omniscribe_transcribe-bars-button:disabled,
|
|
734
|
+
.omniscribe_transcribe-chevron-button:disabled {
|
|
626
735
|
cursor: not-allowed;
|
|
736
|
+
opacity: 0.5;
|
|
627
737
|
}
|
|
628
738
|
|
|
629
|
-
|
|
739
|
+
/* Right: plain accent text control (Granola's "Resume") — no chrome */
|
|
740
|
+
.omniscribe_transcribe-text-button {
|
|
630
741
|
display: flex;
|
|
631
742
|
align-items: center;
|
|
632
|
-
|
|
633
|
-
padding: 8px 12px 8px 4px;
|
|
743
|
+
padding: 0;
|
|
634
744
|
border: none;
|
|
635
|
-
background:
|
|
745
|
+
background: none;
|
|
636
746
|
cursor: pointer;
|
|
747
|
+
font-size: inherit;
|
|
748
|
+
font-weight: 500;
|
|
749
|
+
color: var(--omniscribe-primary, #1a73e8);
|
|
750
|
+
}
|
|
751
|
+
|
|
752
|
+
.omniscribe_transcribe-text-button:hover:not(:disabled) {
|
|
753
|
+
color: var(--blue-700, #1558d6);
|
|
637
754
|
}
|
|
638
755
|
|
|
639
|
-
.omniscribe_transcribe-
|
|
756
|
+
.omniscribe_transcribe-text-button:disabled {
|
|
640
757
|
cursor: not-allowed;
|
|
758
|
+
opacity: 0.5;
|
|
641
759
|
}
|
|
642
760
|
|
|
643
|
-
/*
|
|
644
|
-
.omniscribe_transcribe-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
761
|
+
/* Right: play triangle shown when idle/paused — no chrome, accent color */
|
|
762
|
+
.omniscribe_transcribe-play-button {
|
|
763
|
+
display: flex;
|
|
764
|
+
align-items: center;
|
|
765
|
+
justify-content: center;
|
|
766
|
+
padding: 0;
|
|
767
|
+
border: none;
|
|
768
|
+
background: transparent;
|
|
769
|
+
cursor: pointer;
|
|
770
|
+
color: var(--omniscribe-primary, #1a73e8);
|
|
771
|
+
transition: color 0.15s ease;
|
|
648
772
|
}
|
|
649
773
|
|
|
650
|
-
.omniscribe_transcribe-
|
|
651
|
-
|
|
652
|
-
) {
|
|
653
|
-
background-color: var(--omniscribe-surface-alt, #f3f4f6);
|
|
774
|
+
.omniscribe_transcribe-play-button:hover:not(:disabled) {
|
|
775
|
+
color: var(--blue-700, #1558d6);
|
|
654
776
|
}
|
|
655
777
|
|
|
656
|
-
.omniscribe_transcribe-
|
|
657
|
-
opacity: 0.5;
|
|
778
|
+
.omniscribe_transcribe-play-button:disabled {
|
|
658
779
|
cursor: not-allowed;
|
|
780
|
+
opacity: 0.5;
|
|
659
781
|
}
|
|
660
782
|
|
|
661
|
-
/*
|
|
662
|
-
.omniscribe_transcribe-
|
|
783
|
+
/* Right: filled rounded stop square shown while recording — no chrome */
|
|
784
|
+
.omniscribe_transcribe-stop-button {
|
|
663
785
|
display: flex;
|
|
664
786
|
align-items: center;
|
|
665
787
|
justify-content: center;
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
.omniscribe_transcribe-dropdown-icon svg {
|
|
673
|
-
color: var(--omniscribe-primary, #2563eb);
|
|
788
|
+
padding: 0;
|
|
789
|
+
border: none;
|
|
790
|
+
background: transparent;
|
|
791
|
+
cursor: pointer;
|
|
792
|
+
color: var(--omniscribe-text-muted, #5f6368);
|
|
793
|
+
transition: color 0.15s ease;
|
|
674
794
|
}
|
|
675
795
|
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
.omniscribe_transcribe-dropdown-icon {
|
|
679
|
-
background-color: var(--omniscribe-primary-soft, #e7effd);
|
|
680
|
-
animation: transcribe-pulse 1.5s ease-in-out infinite;
|
|
796
|
+
.omniscribe_transcribe-stop-button:hover:not(:disabled) {
|
|
797
|
+
color: var(--omniscribe-text, #1f2937);
|
|
681
798
|
}
|
|
682
799
|
|
|
683
|
-
.omniscribe_transcribe-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
color: var(--omniscribe-primary, #2563eb);
|
|
800
|
+
.omniscribe_transcribe-stop-button:disabled {
|
|
801
|
+
cursor: not-allowed;
|
|
802
|
+
opacity: 0.5;
|
|
687
803
|
}
|
|
688
804
|
|
|
689
|
-
|
|
690
|
-
0
|
|
691
|
-
|
|
692
|
-
opacity: 1;
|
|
693
|
-
box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4);
|
|
694
|
-
}
|
|
695
|
-
50% {
|
|
696
|
-
opacity: 0.6;
|
|
697
|
-
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0);
|
|
698
|
-
}
|
|
805
|
+
.omniscribe_transcribe-dropdown--disabled {
|
|
806
|
+
opacity: 0.5;
|
|
807
|
+
cursor: not-allowed;
|
|
699
808
|
}
|
|
700
809
|
|
|
701
810
|
.omniscribe_transcribe-dropdown-label {
|
|
702
|
-
flex: 1;
|
|
703
811
|
text-align: left;
|
|
812
|
+
white-space: nowrap;
|
|
704
813
|
}
|
|
705
814
|
|
|
815
|
+
/* Chevron points up (panel closed) and rotates to down when expanded */
|
|
706
816
|
.omniscribe_transcribe-dropdown-chevron {
|
|
707
817
|
display: flex;
|
|
708
818
|
align-items: center;
|
|
709
819
|
justify-content: center;
|
|
710
|
-
color: var(--omniscribe-text-muted, #
|
|
820
|
+
color: var(--omniscribe-text-muted, #6b7280);
|
|
711
821
|
transition:
|
|
712
822
|
transform 0.2s ease,
|
|
713
823
|
color 0.2s ease;
|
|
@@ -718,7 +828,7 @@
|
|
|
718
828
|
}
|
|
719
829
|
|
|
720
830
|
.omniscribe_transcribe-dropdown:hover .omniscribe_transcribe-dropdown-chevron {
|
|
721
|
-
color: var(--omniscribe-text
|
|
831
|
+
color: var(--omniscribe-text, #374151);
|
|
722
832
|
}
|
|
723
833
|
|
|
724
834
|
/* Connection status pill - inline banner replacing toasts.
|
|
@@ -789,25 +899,36 @@
|
|
|
789
899
|
background-color: #b42318 !important;
|
|
790
900
|
}
|
|
791
901
|
|
|
792
|
-
/*
|
|
793
|
-
.
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
902
|
+
/* Action buttons - unified style for Generate, Petitions, Extras */
|
|
903
|
+
.omniscribe_action-btn {
|
|
904
|
+
/* Fixed-label actions keep their size; only the extras pills, whose labels
|
|
905
|
+
are host-defined and can be arbitrarily long, give up space. */
|
|
906
|
+
flex-shrink: 0;
|
|
907
|
+
border-radius: 9999px !important;
|
|
908
|
+
gap: 6px;
|
|
909
|
+
padding-block: 6px !important;
|
|
910
|
+
padding-inline: 12px !important;
|
|
911
|
+
/* Match height of controls-group (border + padding + content) */
|
|
912
|
+
min-height: 32px !important;
|
|
913
|
+
font-size: var(--font-size-100, 13px) !important;
|
|
914
|
+
font-weight: 500 !important;
|
|
915
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
|
|
916
|
+
transition: all 0.15s ease !important;
|
|
917
|
+
display: inline-flex !important;
|
|
918
|
+
align-items: center !important;
|
|
799
919
|
}
|
|
800
920
|
|
|
801
|
-
.
|
|
802
|
-
background-color: var(--blue-700, #
|
|
921
|
+
.omniscribe_action-btn:hover:not(:disabled) {
|
|
922
|
+
background-color: var(--blue-700, #1558d6) !important;
|
|
923
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12) !important;
|
|
803
924
|
}
|
|
804
925
|
|
|
805
|
-
.
|
|
926
|
+
.omniscribe_action-btn:disabled {
|
|
806
927
|
opacity: 0.5;
|
|
807
928
|
cursor: not-allowed;
|
|
808
929
|
}
|
|
809
930
|
|
|
810
|
-
/* Collapsed state - vertical pill */
|
|
931
|
+
/* Collapsed state - vertical pill with light theme */
|
|
811
932
|
.omniscribe_transcribe-collapsed {
|
|
812
933
|
display: flex;
|
|
813
934
|
flex-direction: column;
|
|
@@ -817,7 +938,16 @@
|
|
|
817
938
|
background-color: var(--omniscribe-surface, white);
|
|
818
939
|
border: 1px solid var(--border, #e5e7eb);
|
|
819
940
|
border-radius: 9999px;
|
|
820
|
-
box-shadow: 0
|
|
941
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
942
|
+
}
|
|
943
|
+
|
|
944
|
+
/* Passive activity indicator — live bars while recording */
|
|
945
|
+
.omniscribe_transcribe-collapsed-bars {
|
|
946
|
+
display: flex;
|
|
947
|
+
align-items: center;
|
|
948
|
+
justify-content: center;
|
|
949
|
+
width: 32px;
|
|
950
|
+
height: 32px;
|
|
821
951
|
}
|
|
822
952
|
|
|
823
953
|
.omniscribe_transcribe-collapsed-play {
|
|
@@ -828,14 +958,14 @@
|
|
|
828
958
|
height: 32px;
|
|
829
959
|
border: none;
|
|
830
960
|
border-radius: 50%;
|
|
831
|
-
background-color:
|
|
832
|
-
color: var(--omniscribe-primary, #
|
|
961
|
+
background-color: transparent;
|
|
962
|
+
color: var(--omniscribe-primary, #1a73e8);
|
|
833
963
|
cursor: pointer;
|
|
834
964
|
transition: all 0.2s ease;
|
|
835
965
|
}
|
|
836
966
|
|
|
837
967
|
.omniscribe_transcribe-collapsed-play:hover:not(:disabled) {
|
|
838
|
-
background-color: #
|
|
968
|
+
background-color: var(--omniscribe-surface-alt, #f3f4f6);
|
|
839
969
|
transform: scale(1.05);
|
|
840
970
|
}
|
|
841
971
|
|
|
@@ -845,7 +975,7 @@
|
|
|
845
975
|
}
|
|
846
976
|
|
|
847
977
|
.omniscribe_transcribe-collapsed-play--recording {
|
|
848
|
-
|
|
978
|
+
box-shadow: 0 0 8px rgba(26, 115, 232, 0.2);
|
|
849
979
|
}
|
|
850
980
|
|
|
851
981
|
.omniscribe_transcribe-collapsed-expand {
|
|
@@ -864,7 +994,7 @@
|
|
|
864
994
|
|
|
865
995
|
.omniscribe_transcribe-collapsed-expand:hover:not(:disabled) {
|
|
866
996
|
background-color: var(--omniscribe-surface-alt, #f3f4f6);
|
|
867
|
-
color: var(--omniscribe-text
|
|
997
|
+
color: var(--omniscribe-text, #374151);
|
|
868
998
|
}
|
|
869
999
|
.omniscribe_button {
|
|
870
1000
|
border: none;
|
|
@@ -3344,11 +3474,82 @@
|
|
|
3344
3474
|
border-bottom-right-radius: 12px;
|
|
3345
3475
|
}
|
|
3346
3476
|
|
|
3477
|
+
/*
|
|
3478
|
+
* The footer is sticky inside the scroll container, so mid-scroll the
|
|
3479
|
+
* conversation passes behind it and was cut off mid-line — text simply ended
|
|
3480
|
+
* where the buttons began. This is not a spacing problem: at rest the content
|
|
3481
|
+
* clears the footer. What was missing is a boundary, so the last visible line
|
|
3482
|
+
* dissolves into the footer's surface instead of being guillotined by it.
|
|
3483
|
+
*/
|
|
3484
|
+
.omniscribe_chat-view-footer-container::before {
|
|
3485
|
+
content: '';
|
|
3486
|
+
position: absolute;
|
|
3487
|
+
left: 0;
|
|
3488
|
+
right: 0;
|
|
3489
|
+
bottom: 100%;
|
|
3490
|
+
/*
|
|
3491
|
+
* Tall enough to dissolve two or three lines. A short band is worse than no
|
|
3492
|
+
* band at all: at one line-height it ghosts a single row of text and reads as
|
|
3493
|
+
* a rendering fault rather than a transition.
|
|
3494
|
+
*/
|
|
3495
|
+
height: 64px;
|
|
3496
|
+
pointer-events: none;
|
|
3497
|
+
/* Fallback first: browsers without color-mix keep this. */
|
|
3498
|
+
background: linear-gradient(
|
|
3499
|
+
to bottom,
|
|
3500
|
+
transparent,
|
|
3501
|
+
var(--omniscribe-surface, #fff)
|
|
3502
|
+
);
|
|
3503
|
+
/*
|
|
3504
|
+
* Fading to `transparent` interpolates through transparent BLACK, which
|
|
3505
|
+
* greys the middle of the band. Fading from the surface colour at zero alpha
|
|
3506
|
+
* keeps it clean and still themable.
|
|
3507
|
+
*/
|
|
3508
|
+
background: linear-gradient(
|
|
3509
|
+
to bottom,
|
|
3510
|
+
color-mix(in srgb, var(--omniscribe-surface, #fff) 0%, transparent) 0%,
|
|
3511
|
+
var(--omniscribe-surface, #fff) 100%
|
|
3512
|
+
);
|
|
3513
|
+
}
|
|
3514
|
+
|
|
3515
|
+
/*
|
|
3516
|
+
* Floats over the conversation, so it needs to be opaque. It inherited the
|
|
3517
|
+
* outline button's translucent fill, which let the text underneath read
|
|
3518
|
+
* straight through it — the label and the message competing in the same
|
|
3519
|
+
* pixels. A solid fill plus a shadow is what makes it read as a control
|
|
3520
|
+
* sitting above the content rather than printed onto it.
|
|
3521
|
+
*/
|
|
3522
|
+
/*
|
|
3523
|
+
* Pinned to the footer's top edge, not to the viewport.
|
|
3524
|
+
*
|
|
3525
|
+
* It used to be `position: fixed; bottom: 17%`, i.e. anchored to the browser
|
|
3526
|
+
* window: its distance from the composer depended on the window height, and at
|
|
3527
|
+
* common sizes it landed ON the action buttons — measured 3px below the
|
|
3528
|
+
* footer's top edge. Anchoring to the footer instead means it tracks whatever
|
|
3529
|
+
* the footer currently is: with or without the action row, with the
|
|
3530
|
+
* transcription panel expanded, with files attached.
|
|
3531
|
+
*/
|
|
3347
3532
|
.omniscribe_chat-view-footer-scroll-to-bottom {
|
|
3348
|
-
position:
|
|
3349
|
-
bottom:
|
|
3533
|
+
position: absolute;
|
|
3534
|
+
bottom: calc(100% + 12px);
|
|
3350
3535
|
left: 50%;
|
|
3351
3536
|
transform: translateX(-50%);
|
|
3537
|
+
z-index: 2;
|
|
3538
|
+
}
|
|
3539
|
+
|
|
3540
|
+
/*
|
|
3541
|
+
* Qualified with `.omniscribe_button` on purpose. The outline variant sets the
|
|
3542
|
+
* same properties at equal specificity and `button.css` is concatenated after
|
|
3543
|
+
* this file, so a single-class selector here loses on source order alone.
|
|
3544
|
+
*/
|
|
3545
|
+
.omniscribe_button.omniscribe_chat-view-footer-scroll-to-bottom {
|
|
3546
|
+
background-color: var(--omniscribe-surface, #fff);
|
|
3547
|
+
border: 1px solid var(--omniscribe-border, #e5e7ec);
|
|
3548
|
+
box-shadow: 0 2px 10px rgba(16, 23, 37, 0.16);
|
|
3549
|
+
}
|
|
3550
|
+
|
|
3551
|
+
.omniscribe_button.omniscribe_chat-view-footer-scroll-to-bottom:hover {
|
|
3552
|
+
background-color: var(--omniscribe-surface-alt, #f3f4f6);
|
|
3352
3553
|
}
|
|
3353
3554
|
|
|
3354
3555
|
.omniscribe_chat-view-down-btn {
|
|
@@ -3364,30 +3565,29 @@
|
|
|
3364
3565
|
display: flex;
|
|
3365
3566
|
flex-direction: column;
|
|
3366
3567
|
flex-shrink: 0;
|
|
3367
|
-
}
|
|
3368
|
-
|
|
3369
|
-
/* Footer swap - crossfade between expanded/collapsed rows */
|
|
3370
|
-
.omniscribe_chat-view-footer-swap {
|
|
3371
3568
|
position: relative;
|
|
3372
3569
|
}
|
|
3373
3570
|
|
|
3374
|
-
|
|
3375
|
-
|
|
3376
|
-
|
|
3377
|
-
|
|
3378
|
-
|
|
3379
|
-
|
|
3380
|
-
|
|
3381
|
-
|
|
3382
|
-
|
|
3571
|
+
/* Action row — no background of its own; only the pills carry a border */
|
|
3572
|
+
.omniscribe_chat-footer-actions-row {
|
|
3573
|
+
display: flex;
|
|
3574
|
+
flex-direction: row;
|
|
3575
|
+
align-items: center;
|
|
3576
|
+
gap: 8px;
|
|
3577
|
+
padding-inline: calc(var(--spacing) * 4);
|
|
3578
|
+
padding-bottom: 8px;
|
|
3579
|
+
flex-shrink: 0;
|
|
3580
|
+
min-width: 0;
|
|
3581
|
+
width: 100%;
|
|
3582
|
+
box-sizing: border-box;
|
|
3583
|
+
transition: padding-top 0.5s ease;
|
|
3383
3584
|
}
|
|
3384
3585
|
|
|
3385
|
-
/*
|
|
3386
|
-
.
|
|
3387
|
-
|
|
3388
|
-
|
|
3389
|
-
|
|
3390
|
-
inset: 0;
|
|
3586
|
+
/* With the transcription expanded, keeps the buttons off the panel's bottom
|
|
3587
|
+
line (the expanded wrapper's border-bottom). */
|
|
3588
|
+
.omniscribe_transcription-panel-wrapper--expanded
|
|
3589
|
+
+ .omniscribe_chat-footer-actions-row {
|
|
3590
|
+
padding-top: 10px;
|
|
3391
3591
|
}
|
|
3392
3592
|
|
|
3393
3593
|
.omniscribe_chat-view-combined-footer-row {
|
|
@@ -3425,12 +3625,18 @@
|
|
|
3425
3625
|
}
|
|
3426
3626
|
|
|
3427
3627
|
/* When files are attached, change border-radius to rounded rectangle */
|
|
3628
|
+
/*
|
|
3629
|
+
* Attaching a file must not resize the composer. There is deliberately no
|
|
3630
|
+
* max-width here: the base rule is `flex: 1`, and capping it made the composer
|
|
3631
|
+
* jump from the full footer width down to a fixed size the moment a file was
|
|
3632
|
+
* added — a leftover from a narrower Figma frame, and the only place that
|
|
3633
|
+
* number appeared. Several files scroll horizontally inside
|
|
3634
|
+
* `.omniscribe_chat-view-combined-files-row`, which owns `overflow-x: auto`.
|
|
3635
|
+
*/
|
|
3428
3636
|
.omniscribe_chat-view-combined-input-container--with-files {
|
|
3429
|
-
border-radius: 20px;
|
|
3430
3637
|
gap: 12px;
|
|
3431
3638
|
align-items: flex-start;
|
|
3432
3639
|
min-width: 0;
|
|
3433
|
-
max-width: 462px;
|
|
3434
3640
|
overflow: hidden;
|
|
3435
3641
|
}
|
|
3436
3642
|
|
|
@@ -3980,19 +4186,28 @@
|
|
|
3980
4186
|
width: 20px;
|
|
3981
4187
|
height: 20px;
|
|
3982
4188
|
}
|
|
3983
|
-
/*
|
|
4189
|
+
/* Expand/collapse wrapper — absolutely positioned upwards so it does NOT
|
|
4190
|
+
push the actions row or the form. Being out of the flow, animating the
|
|
4191
|
+
height causes no footer reflow: the panel unfolds upwards (same
|
|
4192
|
+
animation as the previous version). */
|
|
3984
4193
|
.omniscribe_transcription-panel-wrapper {
|
|
4194
|
+
position: absolute;
|
|
4195
|
+
bottom: 100%;
|
|
4196
|
+
left: 0;
|
|
4197
|
+
right: 0;
|
|
3985
4198
|
height: 0;
|
|
3986
|
-
opacity: 0;
|
|
3987
4199
|
overflow: hidden;
|
|
4200
|
+
opacity: 0;
|
|
4201
|
+
pointer-events: none;
|
|
3988
4202
|
transition:
|
|
3989
4203
|
height 0.5s ease,
|
|
3990
4204
|
opacity 0.5s ease;
|
|
3991
4205
|
}
|
|
3992
4206
|
|
|
3993
4207
|
.omniscribe_transcription-panel-wrapper--expanded {
|
|
3994
|
-
height: calc(var(--content-height) * 0.
|
|
4208
|
+
height: calc(var(--content-height) * 0.55);
|
|
3995
4209
|
opacity: 1;
|
|
4210
|
+
pointer-events: auto;
|
|
3996
4211
|
border-bottom: 1px solid var(--border, #e5e7eb);
|
|
3997
4212
|
}
|
|
3998
4213
|
|
|
@@ -4328,1790 +4543,1894 @@
|
|
|
4328
4543
|
cursor: pointer;
|
|
4329
4544
|
display: inline-block;
|
|
4330
4545
|
}
|
|
4331
|
-
|
|
4332
|
-
|
|
4333
|
-
|
|
4334
|
-
|
|
4335
|
-
|
|
4336
|
-
|
|
4337
|
-
|
|
4338
|
-
|
|
4339
|
-
|
|
4546
|
+
/*
|
|
4547
|
+
* Category names come from the host's templateExtras schema, so their length is
|
|
4548
|
+
* not ours to control. Left unbounded, one long name grew its pill until it
|
|
4549
|
+
* pushed the overflow trigger — and with it every remaining category — off the
|
|
4550
|
+
* right edge of the widget, with no way to reach them.
|
|
4551
|
+
*
|
|
4552
|
+
* The row cannot simply clip: the overflow menu is absolutely positioned and
|
|
4553
|
+
* opens upwards, so `overflow: hidden` on the row would cut the menu instead.
|
|
4554
|
+
* The pills give up the space themselves: they are the only shrinkable items in
|
|
4555
|
+
* the row, capped, and their label truncates.
|
|
4556
|
+
*/
|
|
4557
|
+
/* Qualified: `.omniscribe_action-btn` is shared with the generate button and
|
|
4558
|
+
lives in another file, so an unqualified rule here would depend on which
|
|
4559
|
+
stylesheet the bundler concatenates last. */
|
|
4560
|
+
.omniscribe_action-btn.omniscribe_extras-btn {
|
|
4561
|
+
min-width: 0;
|
|
4562
|
+
max-width: 180px;
|
|
4563
|
+
flex-shrink: 1;
|
|
4340
4564
|
}
|
|
4341
4565
|
|
|
4342
|
-
.
|
|
4343
|
-
|
|
4344
|
-
|
|
4345
|
-
|
|
4346
|
-
|
|
4347
|
-
align-items: flex-start;
|
|
4348
|
-
transition:
|
|
4349
|
-
transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
|
|
4350
|
-
opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
4351
|
-
pointer-events: auto;
|
|
4566
|
+
.omniscribe_extras-btn-label {
|
|
4567
|
+
min-width: 0;
|
|
4568
|
+
overflow: hidden;
|
|
4569
|
+
text-overflow: ellipsis;
|
|
4570
|
+
white-space: nowrap;
|
|
4352
4571
|
}
|
|
4353
4572
|
|
|
4354
|
-
.
|
|
4355
|
-
|
|
4573
|
+
/* Overflow container for extras categories beyond the first two. */
|
|
4574
|
+
.omniscribe_extras-overflow {
|
|
4575
|
+
position: relative;
|
|
4576
|
+
display: inline-flex;
|
|
4577
|
+
/* Never squeezed out: it is the only route to the remaining categories. */
|
|
4578
|
+
flex-shrink: 0;
|
|
4356
4579
|
}
|
|
4357
|
-
|
|
4358
|
-
|
|
4580
|
+
|
|
4581
|
+
/* Three-dots trigger — mirrors the neutral pill styling of the action row. */
|
|
4582
|
+
.omniscribe_extras-overflow-trigger {
|
|
4583
|
+
flex-shrink: 0;
|
|
4584
|
+
display: inline-flex;
|
|
4585
|
+
align-items: center;
|
|
4586
|
+
justify-content: center;
|
|
4587
|
+
width: 30px;
|
|
4588
|
+
height: 30px;
|
|
4589
|
+
padding: 0;
|
|
4590
|
+
border: 1px solid var(--border, #e5e7eb);
|
|
4591
|
+
border-radius: 9999px;
|
|
4592
|
+
background-color: var(--omniscribe-surface, #ffffff);
|
|
4593
|
+
color: var(--grey-700, #6f7d95);
|
|
4594
|
+
cursor: pointer;
|
|
4595
|
+
transition:
|
|
4596
|
+
background-color 0.2s ease,
|
|
4597
|
+
color 0.2s ease,
|
|
4598
|
+
border-color 0.2s ease;
|
|
4359
4599
|
}
|
|
4360
|
-
|
|
4361
|
-
|
|
4362
|
-
|
|
4363
|
-
|
|
4364
|
-
|
|
4365
|
-
transform: translateX(120%);
|
|
4366
|
-
opacity: 0;
|
|
4600
|
+
|
|
4601
|
+
.omniscribe_extras-overflow-trigger:hover,
|
|
4602
|
+
.omniscribe_extras-overflow-trigger--open {
|
|
4603
|
+
background-color: var(--omniscribe-surface-alt, #f3f4f6);
|
|
4604
|
+
color: var(--omniscribe-text, #13161a);
|
|
4367
4605
|
}
|
|
4368
|
-
|
|
4369
|
-
|
|
4370
|
-
|
|
4371
|
-
|
|
4606
|
+
|
|
4607
|
+
/* Dropdown floats UP above the trigger (footer sits at the bottom), with a
|
|
4608
|
+
gap so it doesn't sit flush against the action buttons row. */
|
|
4609
|
+
.omniscribe_extras-overflow-menu {
|
|
4610
|
+
position: absolute;
|
|
4611
|
+
bottom: calc(100% + 12px);
|
|
4612
|
+
right: 0;
|
|
4613
|
+
z-index: 20;
|
|
4614
|
+
min-width: 160px;
|
|
4615
|
+
padding: 4px;
|
|
4372
4616
|
display: flex;
|
|
4373
4617
|
flex-direction: column;
|
|
4374
|
-
|
|
4375
|
-
|
|
4376
|
-
|
|
4377
|
-
|
|
4378
|
-
|
|
4379
|
-
font-weight: var(--font-weight-bold);
|
|
4380
|
-
}
|
|
4381
|
-
.omniscribe_toast-msg {
|
|
4382
|
-
font-size: 16px;
|
|
4383
|
-
}
|
|
4384
|
-
.omniscribe_toast-close {
|
|
4385
|
-
background: none;
|
|
4386
|
-
border: none;
|
|
4387
|
-
color: var(--white);
|
|
4388
|
-
font-size: 18px;
|
|
4389
|
-
cursor: pointer;
|
|
4390
|
-
padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
|
|
4391
|
-
align-self: flex-start;
|
|
4392
|
-
opacity: 0.8;
|
|
4393
|
-
}
|
|
4394
|
-
.omniscribe_toast-close:hover {
|
|
4395
|
-
opacity: 1;
|
|
4396
|
-
}
|
|
4397
|
-
.omniscribe_select-container {
|
|
4398
|
-
position: relative;
|
|
4399
|
-
width: 100%;
|
|
4400
|
-
padding-block: calc(var(--spacing) * 3);
|
|
4618
|
+
gap: 2px;
|
|
4619
|
+
background-color: var(--omniscribe-surface, #ffffff);
|
|
4620
|
+
border: 1px solid var(--border, #e5e7eb);
|
|
4621
|
+
border-radius: var(--radius-lg, 12px);
|
|
4622
|
+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
|
4401
4623
|
}
|
|
4402
|
-
|
|
4624
|
+
|
|
4625
|
+
.omniscribe_extras-overflow-item {
|
|
4403
4626
|
display: flex;
|
|
4404
4627
|
align-items: center;
|
|
4405
|
-
|
|
4628
|
+
gap: 8px;
|
|
4406
4629
|
width: 100%;
|
|
4407
|
-
padding:
|
|
4408
|
-
|
|
4409
|
-
border-radius:
|
|
4410
|
-
|
|
4630
|
+
padding: 8px 10px;
|
|
4631
|
+
border: none;
|
|
4632
|
+
border-radius: 8px;
|
|
4633
|
+
background-color: transparent;
|
|
4634
|
+
color: var(--omniscribe-text, #13161a);
|
|
4635
|
+
text-align: left;
|
|
4636
|
+
white-space: nowrap;
|
|
4411
4637
|
cursor: pointer;
|
|
4638
|
+
transition: background-color 0.15s ease;
|
|
4412
4639
|
}
|
|
4413
|
-
|
|
4414
|
-
|
|
4640
|
+
|
|
4641
|
+
.omniscribe_extras-overflow-item:hover:not(:disabled) {
|
|
4642
|
+
background-color: var(--omniscribe-primary-soft, #e8f0fe);
|
|
4643
|
+
color: var(--omniscribe-primary, #1a73e8);
|
|
4644
|
+
}
|
|
4645
|
+
|
|
4646
|
+
.omniscribe_extras-overflow-item:disabled {
|
|
4415
4647
|
opacity: 0.6;
|
|
4648
|
+
cursor: default;
|
|
4416
4649
|
}
|
|
4417
|
-
.
|
|
4418
|
-
|
|
4419
|
-
|
|
4420
|
-
|
|
4650
|
+
/* Insertion Preview Modal — ported from the demo's .sugg-* styles
|
|
4651
|
+
(dev-tools/demo/src/style.css:715-891). Uses BEM-style naming under
|
|
4652
|
+
omniscribe_insertion-preview to stay scoped inside the SDK shadow DOM.
|
|
4653
|
+
|
|
4654
|
+
Theming hooks (set on the `<sofia-sdk>` element, they cross the shadow
|
|
4655
|
+
boundary; classes don't):
|
|
4656
|
+
|
|
4657
|
+
--omniscribe-insertion-preview-reserve px reserved for chat widget on the right
|
|
4658
|
+
--omniscribe-insertion-preview-primary brand color (selection / apply button)
|
|
4659
|
+
--omniscribe-insertion-preview-primary-soft soft pill background using primary
|
|
4660
|
+
--omniscribe-insertion-preview-primary-text text color sitting on primary-soft
|
|
4661
|
+
--omniscribe-insertion-preview-accent attention color (gaps)
|
|
4662
|
+
--omniscribe-insertion-preview-accent-soft soft pill background using accent
|
|
4663
|
+
--omniscribe-insertion-preview-accent-bg gap-section background
|
|
4664
|
+
--omniscribe-insertion-preview-text primary text
|
|
4665
|
+
--omniscribe-insertion-preview-text-muted secondary text / chrome
|
|
4666
|
+
--omniscribe-insertion-preview-border panel + group border
|
|
4667
|
+
--omniscribe-insertion-preview-border-soft in-panel separators
|
|
4668
|
+
--omniscribe-insertion-preview-input-border form-control border
|
|
4669
|
+
--omniscribe-insertion-preview-checkbox-border unchecked checkbox stroke
|
|
4670
|
+
--omniscribe-insertion-preview-surface panel background
|
|
4671
|
+
--omniscribe-insertion-preview-surface-alt header / footer / hover background
|
|
4672
|
+
|
|
4673
|
+
Defaults cascade THROUGH the main SDK tokens (`--omniscribe-*`) before
|
|
4674
|
+
falling back to a hard-coded literal. So:
|
|
4675
|
+
|
|
4676
|
+
1. If the host sets `--omniscribe-insertion-preview-primary` →
|
|
4677
|
+
only the modal picks it up (per-surface theming).
|
|
4678
|
+
2. Else if the host sets `--omniscribe-primary` (the chat-widget
|
|
4679
|
+
token) → BOTH chat and modal share it (unified theme — the
|
|
4680
|
+
out-of-the-box experience).
|
|
4681
|
+
3. Else → falls back to the hard-coded SDK default (Sofia blue),
|
|
4682
|
+
matching the chat widget's stock look.
|
|
4683
|
+
|
|
4684
|
+
Tokens without a chat-widget counterpart (accent / text-muted /
|
|
4685
|
+
border-soft / surface-alt etc.) keep their own defaults. */
|
|
4686
|
+
|
|
4687
|
+
.omniscribe_insertion-preview__backdrop,
|
|
4688
|
+
.omniscribe_insertion-preview__panel {
|
|
4689
|
+
--_primary: var(
|
|
4690
|
+
--omniscribe-insertion-preview-primary,
|
|
4691
|
+
var(--omniscribe-primary, #105bdb)
|
|
4692
|
+
);
|
|
4693
|
+
--_primary-soft: var(
|
|
4694
|
+
--omniscribe-insertion-preview-primary-soft,
|
|
4695
|
+
var(--omniscribe-primary-soft, #e7effd)
|
|
4696
|
+
);
|
|
4697
|
+
--_primary-text: var(
|
|
4698
|
+
--omniscribe-insertion-preview-primary-text,
|
|
4699
|
+
var(--omniscribe-primary, #105bdb)
|
|
4700
|
+
);
|
|
4701
|
+
--_accent: var(--omniscribe-insertion-preview-accent, #c77700);
|
|
4702
|
+
--_accent-soft: var(--omniscribe-insertion-preview-accent-soft, #fdebc6);
|
|
4703
|
+
--_accent-bg: var(--omniscribe-insertion-preview-accent-bg, #fffbf1);
|
|
4704
|
+
--_text: var(
|
|
4705
|
+
--omniscribe-insertion-preview-text,
|
|
4706
|
+
var(--omniscribe-text, #1f2733)
|
|
4707
|
+
);
|
|
4708
|
+
--_text-muted: var(
|
|
4709
|
+
--omniscribe-insertion-preview-text-muted,
|
|
4710
|
+
var(--omniscribe-text-muted, #6a7385)
|
|
4711
|
+
);
|
|
4712
|
+
--_border: var(
|
|
4713
|
+
--omniscribe-insertion-preview-border,
|
|
4714
|
+
var(--omniscribe-border, #e5e7ec)
|
|
4715
|
+
);
|
|
4716
|
+
--_border-soft: var(
|
|
4717
|
+
--omniscribe-insertion-preview-border-soft,
|
|
4718
|
+
var(--omniscribe-border, #eef1f6)
|
|
4719
|
+
);
|
|
4720
|
+
--_input-border: var(
|
|
4721
|
+
--omniscribe-insertion-preview-input-border,
|
|
4722
|
+
var(--omniscribe-border, #d6dbe5)
|
|
4723
|
+
);
|
|
4724
|
+
--_checkbox-border: var(
|
|
4725
|
+
--omniscribe-insertion-preview-checkbox-border,
|
|
4726
|
+
#b7bfcc
|
|
4727
|
+
);
|
|
4728
|
+
--_surface: var(
|
|
4729
|
+
--omniscribe-insertion-preview-surface,
|
|
4730
|
+
var(--omniscribe-surface, #fff)
|
|
4731
|
+
);
|
|
4732
|
+
--_surface-alt: var(
|
|
4733
|
+
--omniscribe-insertion-preview-surface-alt,
|
|
4734
|
+
var(--omniscribe-surface-alt, #f6f8fb)
|
|
4735
|
+
);
|
|
4421
4736
|
}
|
|
4422
|
-
|
|
4423
|
-
|
|
4424
|
-
|
|
4425
|
-
|
|
4426
|
-
|
|
4427
|
-
|
|
4428
|
-
|
|
4429
|
-
|
|
4430
|
-
|
|
4431
|
-
|
|
4432
|
-
|
|
4433
|
-
|
|
4434
|
-
padding-block: calc(var(--spacing) * 0.5);
|
|
4435
|
-
z-index: 9999;
|
|
4737
|
+
|
|
4738
|
+
/* The modal must sit above every other surface in the SDK shadow DOM
|
|
4739
|
+
(chat panel, toasts, tooltips). 2147483640+ ensures that even with a
|
|
4740
|
+
max-int z-index race, the modal wins. */
|
|
4741
|
+
.omniscribe_insertion-preview__backdrop {
|
|
4742
|
+
position: fixed;
|
|
4743
|
+
inset: 0;
|
|
4744
|
+
background: rgba(15, 27, 45, 0.42);
|
|
4745
|
+
backdrop-filter: blur(2px);
|
|
4746
|
+
-webkit-backdrop-filter: blur(2px);
|
|
4747
|
+
z-index: 2147483640;
|
|
4748
|
+
animation: omniscribe_insertion-preview__fade 0.18s ease-out;
|
|
4436
4749
|
}
|
|
4437
|
-
|
|
4438
|
-
|
|
4439
|
-
|
|
4440
|
-
|
|
4750
|
+
@keyframes omniscribe_insertion-preview__fade {
|
|
4751
|
+
from {
|
|
4752
|
+
opacity: 0;
|
|
4753
|
+
}
|
|
4754
|
+
to {
|
|
4755
|
+
opacity: 1;
|
|
4756
|
+
}
|
|
4441
4757
|
}
|
|
4442
|
-
|
|
4758
|
+
|
|
4759
|
+
/* `--omniscribe-insertion-preview-reserve` lets the host budget space
|
|
4760
|
+
for a floating chat widget so the panel centers in the area NOT
|
|
4761
|
+
covered by it. Default: 0px → centered in the full viewport. */
|
|
4762
|
+
.omniscribe_insertion-preview__panel {
|
|
4763
|
+
position: fixed;
|
|
4764
|
+
top: 50%;
|
|
4765
|
+
left: calc((100vw - var(--omniscribe-insertion-preview-reserve, 0px)) / 2);
|
|
4766
|
+
transform: translate(-50%, -50%);
|
|
4767
|
+
z-index: 2147483641;
|
|
4768
|
+
width: 680px;
|
|
4769
|
+
max-width: calc(
|
|
4770
|
+
100vw - var(--omniscribe-insertion-preview-reserve, 0px) - 32px
|
|
4771
|
+
);
|
|
4772
|
+
max-height: 84vh;
|
|
4773
|
+
background: var(--_surface);
|
|
4774
|
+
border: 1px solid var(--_border);
|
|
4775
|
+
border-radius: 14px;
|
|
4776
|
+
box-shadow: 0 24px 64px rgba(15, 27, 45, 0.18);
|
|
4443
4777
|
display: flex;
|
|
4444
|
-
|
|
4445
|
-
|
|
4446
|
-
|
|
4447
|
-
|
|
4448
|
-
|
|
4449
|
-
|
|
4450
|
-
|
|
4451
|
-
|
|
4778
|
+
flex-direction: column;
|
|
4779
|
+
overflow: hidden;
|
|
4780
|
+
animation: omniscribe_insertion-preview__in 0.22s ease-out;
|
|
4781
|
+
font-family: 'Lato', sans-serif;
|
|
4782
|
+
color: var(--_text);
|
|
4783
|
+
}
|
|
4784
|
+
|
|
4785
|
+
/* Below 1100px there isn't room to sit beside the widget; centered
|
|
4786
|
+
fallback (will overlap the widget — same trade-off as the demo). */
|
|
4787
|
+
@media (max-width: 1100px) {
|
|
4788
|
+
.omniscribe_insertion-preview__panel {
|
|
4789
|
+
left: 50%;
|
|
4790
|
+
width: 92vw;
|
|
4791
|
+
max-width: 720px;
|
|
4452
4792
|
}
|
|
4453
4793
|
}
|
|
4454
|
-
|
|
4455
|
-
|
|
4456
|
-
|
|
4457
|
-
|
|
4794
|
+
@keyframes omniscribe_insertion-preview__in {
|
|
4795
|
+
from {
|
|
4796
|
+
opacity: 0;
|
|
4797
|
+
transform: translate(-50%, calc(-50% + 8px)) scale(0.985);
|
|
4798
|
+
}
|
|
4799
|
+
to {
|
|
4800
|
+
opacity: 1;
|
|
4801
|
+
transform: translate(-50%, -50%) scale(1);
|
|
4802
|
+
}
|
|
4458
4803
|
}
|
|
4459
|
-
|
|
4804
|
+
|
|
4805
|
+
.omniscribe_insertion-preview__header {
|
|
4460
4806
|
display: flex;
|
|
4461
4807
|
align-items: center;
|
|
4462
|
-
gap: calc(0.25rem /* 4px */ * 2);
|
|
4463
|
-
}
|
|
4464
|
-
.omniscribe_toggle-container {
|
|
4465
|
-
display: flex;
|
|
4466
|
-
align-items: flex-start;
|
|
4467
4808
|
justify-content: space-between;
|
|
4468
|
-
|
|
4469
|
-
|
|
4809
|
+
padding: 12px 14px;
|
|
4810
|
+
border-bottom: 1px solid var(--_border);
|
|
4811
|
+
background: var(--_surface-alt);
|
|
4470
4812
|
}
|
|
4471
|
-
|
|
4472
|
-
|
|
4473
|
-
font-size:
|
|
4474
|
-
font-weight:
|
|
4475
|
-
|
|
4476
|
-
|
|
4813
|
+
.omniscribe_insertion-preview__title {
|
|
4814
|
+
margin: 0;
|
|
4815
|
+
font-size: 13px;
|
|
4816
|
+
font-weight: 600;
|
|
4817
|
+
}
|
|
4818
|
+
.omniscribe_insertion-preview__close {
|
|
4819
|
+
background: transparent;
|
|
4820
|
+
border: 0;
|
|
4821
|
+
color: var(--_text-muted);
|
|
4822
|
+
font-size: 18px;
|
|
4823
|
+
line-height: 1;
|
|
4824
|
+
padding: 2px 6px;
|
|
4825
|
+
border-radius: 4px;
|
|
4826
|
+
cursor: pointer;
|
|
4477
4827
|
}
|
|
4478
|
-
|
|
4479
|
-
|
|
4480
|
-
|
|
4481
|
-
align-items: center;
|
|
4482
|
-
gap: 8px;
|
|
4828
|
+
.omniscribe_insertion-preview__close:hover {
|
|
4829
|
+
background: var(--_border-soft);
|
|
4830
|
+
color: var(--_text);
|
|
4483
4831
|
}
|
|
4484
4832
|
|
|
4485
|
-
.
|
|
4486
|
-
|
|
4487
|
-
|
|
4488
|
-
|
|
4489
|
-
|
|
4490
|
-
border-
|
|
4491
|
-
border: none;
|
|
4492
|
-
cursor: pointer;
|
|
4493
|
-
transition: background-color 0.2s ease;
|
|
4494
|
-
outline: none;
|
|
4833
|
+
.omniscribe_insertion-preview__sub {
|
|
4834
|
+
margin: 0;
|
|
4835
|
+
padding: 8px 14px;
|
|
4836
|
+
font-size: 11.5px;
|
|
4837
|
+
color: var(--_text-muted);
|
|
4838
|
+
border-bottom: 1px solid var(--_border-soft);
|
|
4495
4839
|
}
|
|
4496
4840
|
|
|
4497
|
-
.
|
|
4498
|
-
|
|
4841
|
+
.omniscribe_insertion-preview__body {
|
|
4842
|
+
flex: 1;
|
|
4843
|
+
overflow-y: auto;
|
|
4844
|
+
padding: 4px 0;
|
|
4499
4845
|
}
|
|
4500
4846
|
|
|
4501
|
-
.
|
|
4502
|
-
|
|
4847
|
+
.omniscribe_insertion-preview__group {
|
|
4848
|
+
border-bottom: 1px solid var(--_border-soft);
|
|
4503
4849
|
}
|
|
4504
|
-
|
|
4505
|
-
|
|
4506
|
-
opacity: 0.5;
|
|
4507
|
-
cursor: not-allowed;
|
|
4850
|
+
.omniscribe_insertion-preview__group:last-child {
|
|
4851
|
+
border-bottom: 0;
|
|
4508
4852
|
}
|
|
4509
|
-
|
|
4510
|
-
|
|
4511
|
-
|
|
4512
|
-
|
|
4513
|
-
|
|
4514
|
-
width: 12px;
|
|
4515
|
-
height: 12px;
|
|
4516
|
-
/* High-contrast fill that sits on top of the track — must contrast the */
|
|
4517
|
-
/* track color, not inherit the panel surface (which would vanish in a */
|
|
4518
|
-
/* dark theme). Hosts theming dark set --omniscribe-on-accent to a dark */
|
|
4519
|
-
/* ink; light hosts fall back to white (unchanged). */
|
|
4520
|
-
background-color: var(--omniscribe-on-accent, white);
|
|
4521
|
-
border-radius: 50%;
|
|
4522
|
-
transition: transform 0.2s ease;
|
|
4523
|
-
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
4853
|
+
.omniscribe_insertion-preview__group-head {
|
|
4854
|
+
display: flex;
|
|
4855
|
+
align-items: center;
|
|
4856
|
+
justify-content: space-between;
|
|
4857
|
+
padding: 10px 14px 4px;
|
|
4524
4858
|
}
|
|
4525
|
-
|
|
4526
|
-
|
|
4527
|
-
|
|
4859
|
+
/* The parent label of an array-of-objects group lives inside .group-head
|
|
4860
|
+
which already supplies 14px left padding. Without zeroing the inner
|
|
4861
|
+
.row padding here, the parent ends up doubly indented (28px) while
|
|
4862
|
+
children directly under the section have a single 14px — making the
|
|
4863
|
+
parent appear LEFT-shifted relative to its own children. */
|
|
4864
|
+
.omniscribe_insertion-preview__group-head .omniscribe_insertion-preview__row {
|
|
4865
|
+
padding: 0;
|
|
4528
4866
|
}
|
|
4529
|
-
|
|
4530
|
-
|
|
4531
|
-
font-
|
|
4532
|
-
|
|
4533
|
-
|
|
4534
|
-
|
|
4867
|
+
.omniscribe_insertion-preview__group-name {
|
|
4868
|
+
font-size: 10.5px;
|
|
4869
|
+
font-weight: 700;
|
|
4870
|
+
letter-spacing: 0.06em;
|
|
4871
|
+
text-transform: uppercase;
|
|
4872
|
+
color: var(--_text-muted);
|
|
4873
|
+
}
|
|
4874
|
+
.omniscribe_insertion-preview__group-count {
|
|
4875
|
+
background: var(--_primary-soft);
|
|
4876
|
+
color: var(--_primary-text);
|
|
4877
|
+
font-size: 10.5px;
|
|
4878
|
+
font-weight: 600;
|
|
4879
|
+
border-radius: 999px;
|
|
4880
|
+
padding: 1px 7px;
|
|
4535
4881
|
}
|
|
4536
4882
|
|
|
4537
|
-
.
|
|
4538
|
-
|
|
4883
|
+
.omniscribe_insertion-preview__row {
|
|
4884
|
+
display: grid;
|
|
4885
|
+
grid-template-columns: 16px 1fr;
|
|
4886
|
+
gap: 10px;
|
|
4887
|
+
padding: 8px 14px;
|
|
4888
|
+
align-items: flex-start;
|
|
4889
|
+
cursor: pointer;
|
|
4890
|
+
border-radius: 6px;
|
|
4539
4891
|
}
|
|
4540
|
-
|
|
4541
|
-
|
|
4542
|
-
border: 1px solid var(--omniscribe-border, #e5e7ec);
|
|
4543
|
-
flex-shrink: 0;
|
|
4892
|
+
.omniscribe_insertion-preview__row:hover {
|
|
4893
|
+
background: var(--_surface-alt);
|
|
4544
4894
|
}
|
|
4545
|
-
|
|
4546
|
-
|
|
4547
|
-
|
|
4548
|
-
|
|
4549
|
-
border
|
|
4550
|
-
border-
|
|
4551
|
-
|
|
4552
|
-
|
|
4895
|
+
.omniscribe_insertion-preview__row-checkbox {
|
|
4896
|
+
appearance: none;
|
|
4897
|
+
width: 14px;
|
|
4898
|
+
height: 14px;
|
|
4899
|
+
border: 1px solid var(--_checkbox-border);
|
|
4900
|
+
border-radius: 3px;
|
|
4901
|
+
background: var(--_surface);
|
|
4902
|
+
margin-top: 2px;
|
|
4903
|
+
cursor: pointer;
|
|
4553
4904
|
}
|
|
4554
|
-
|
|
4555
|
-
|
|
4556
|
-
|
|
4557
|
-
|
|
4558
|
-
|
|
4559
|
-
|
|
4560
|
-
border-right: none;
|
|
4561
|
-
border-bottom: none;
|
|
4905
|
+
.omniscribe_insertion-preview__row-checkbox:checked {
|
|
4906
|
+
background: var(--_primary);
|
|
4907
|
+
border-color: var(--_primary);
|
|
4908
|
+
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
|
|
4909
|
+
background-repeat: no-repeat;
|
|
4910
|
+
background-position: center;
|
|
4562
4911
|
}
|
|
4563
|
-
.
|
|
4912
|
+
.omniscribe_insertion-preview__row-body {
|
|
4913
|
+
min-width: 0;
|
|
4564
4914
|
display: flex;
|
|
4565
4915
|
flex-direction: column;
|
|
4566
|
-
gap:
|
|
4567
|
-
margin-bottom: 24px;
|
|
4568
|
-
min-height: 0;
|
|
4569
|
-
flex: 1;
|
|
4570
|
-
max-width: 100%;
|
|
4571
|
-
box-sizing: border-box;
|
|
4916
|
+
gap: 4px;
|
|
4572
4917
|
}
|
|
4573
|
-
|
|
4574
|
-
|
|
4575
|
-
font-
|
|
4576
|
-
|
|
4577
|
-
|
|
4578
|
-
margin: 0;
|
|
4918
|
+
.omniscribe_insertion-preview__row-label {
|
|
4919
|
+
font-size: 12.5px;
|
|
4920
|
+
font-weight: 600;
|
|
4921
|
+
color: var(--_text);
|
|
4922
|
+
margin-bottom: 8px;
|
|
4579
4923
|
}
|
|
4580
|
-
|
|
4581
|
-
|
|
4582
|
-
|
|
4583
|
-
|
|
4584
|
-
line-height: 1.5;
|
|
4585
|
-
margin: 0;
|
|
4924
|
+
.omniscribe_insertion-preview__row-preview {
|
|
4925
|
+
font-size: 11.5px;
|
|
4926
|
+
color: var(--_text-muted);
|
|
4927
|
+
word-break: break-word;
|
|
4586
4928
|
}
|
|
4587
|
-
|
|
4588
|
-
.omniscribe_source-list {
|
|
4589
|
-
width: 100%;
|
|
4590
|
-
max-width: 100%;
|
|
4591
|
-
min-height: 105px;
|
|
4592
|
-
max-height: 285px;
|
|
4593
|
-
border-radius: 12px;
|
|
4594
|
-
border: 1px solid var(--omniscribe-border, #e5e7ec);
|
|
4595
|
-
background: var(--omniscribe-surface, #ffffff);
|
|
4596
|
-
padding: 16px;
|
|
4929
|
+
.omniscribe_insertion-preview__row-line {
|
|
4597
4930
|
display: flex;
|
|
4598
|
-
|
|
4931
|
+
align-items: center;
|
|
4599
4932
|
gap: 8px;
|
|
4600
|
-
|
|
4933
|
+
padding: 2px 0;
|
|
4934
|
+
}
|
|
4935
|
+
.omniscribe_insertion-preview__row-line-text {
|
|
4601
4936
|
flex: 1;
|
|
4602
|
-
box-sizing: border-box;
|
|
4603
4937
|
}
|
|
4604
4938
|
|
|
4605
|
-
.
|
|
4606
|
-
|
|
4939
|
+
.omniscribe_insertion-preview__row-edit {
|
|
4940
|
+
margin-top: 4px;
|
|
4941
|
+
display: flex;
|
|
4942
|
+
flex-direction: column;
|
|
4943
|
+
gap: 6px;
|
|
4607
4944
|
}
|
|
4608
|
-
.
|
|
4609
|
-
|
|
4610
|
-
|
|
4611
|
-
|
|
4612
|
-
|
|
4613
|
-
margin: 0 0 12px 0;
|
|
4945
|
+
.omniscribe_insertion-preview__row-edit-grid {
|
|
4946
|
+
display: grid;
|
|
4947
|
+
grid-template-columns: 140px 1fr;
|
|
4948
|
+
gap: 6px 12px;
|
|
4949
|
+
align-items: center;
|
|
4614
4950
|
}
|
|
4615
|
-
|
|
4616
|
-
|
|
4617
|
-
|
|
4951
|
+
.omniscribe_insertion-preview__row-edit-label {
|
|
4952
|
+
font-size: 11px;
|
|
4953
|
+
color: var(--_text-muted);
|
|
4618
4954
|
}
|
|
4619
4955
|
|
|
4620
|
-
.
|
|
4956
|
+
.omniscribe_insertion-preview__edit {
|
|
4957
|
+
font: inherit;
|
|
4958
|
+
font-size: 12px;
|
|
4959
|
+
color: var(--_text);
|
|
4960
|
+
border: 1px solid var(--_input-border);
|
|
4961
|
+
border-radius: 4px;
|
|
4962
|
+
padding: 4px 8px;
|
|
4963
|
+
background: var(--_surface);
|
|
4621
4964
|
width: 100%;
|
|
4622
|
-
|
|
4623
|
-
padding: 12px;
|
|
4624
|
-
border: 1px solid var(--border-color, #ddd);
|
|
4625
|
-
border-radius: 8px;
|
|
4626
|
-
font-family: inherit;
|
|
4627
|
-
font-size: 14px;
|
|
4628
|
-
line-height: 1.4;
|
|
4629
|
-
resize: none;
|
|
4630
|
-
transition: border-color 0.2s ease;
|
|
4631
|
-
}
|
|
4632
|
-
|
|
4633
|
-
.omniscribe_chat-prompt-textarea:focus {
|
|
4634
|
-
outline: none;
|
|
4635
|
-
border-color: var(--omniscribe-primary, #007bff);
|
|
4636
|
-
box-shadow: 0 0 0 2px var(--primary-color-alpha, rgba(0, 123, 255, 0.1));
|
|
4965
|
+
box-sizing: border-box;
|
|
4637
4966
|
}
|
|
4638
|
-
|
|
4639
|
-
|
|
4640
|
-
|
|
4641
|
-
color: var(--text-secondary, #666);
|
|
4642
|
-
margin-top: 6px;
|
|
4643
|
-
text-align: right;
|
|
4967
|
+
.omniscribe_insertion-preview__edit--prose {
|
|
4968
|
+
min-height: 60px;
|
|
4969
|
+
resize: vertical;
|
|
4644
4970
|
}
|
|
4645
|
-
.
|
|
4646
|
-
|
|
4647
|
-
|
|
4648
|
-
|
|
4649
|
-
|
|
4650
|
-
|
|
4651
|
-
|
|
4652
|
-
box-sizing: border-box;
|
|
4971
|
+
.omniscribe_insertion-preview__edit--toggle {
|
|
4972
|
+
display: inline-flex;
|
|
4973
|
+
align-items: center;
|
|
4974
|
+
gap: 6px;
|
|
4975
|
+
border: 0;
|
|
4976
|
+
padding: 0;
|
|
4977
|
+
background: transparent;
|
|
4653
4978
|
}
|
|
4654
|
-
|
|
4655
|
-
.omniscribe_config-list {
|
|
4979
|
+
.omniscribe_insertion-preview__edit--multi-enum {
|
|
4656
4980
|
display: flex;
|
|
4657
|
-
flex-
|
|
4658
|
-
|
|
4659
|
-
|
|
4660
|
-
|
|
4981
|
+
flex-wrap: wrap;
|
|
4982
|
+
gap: 4px;
|
|
4983
|
+
border: 0;
|
|
4984
|
+
padding: 0;
|
|
4985
|
+
background: transparent;
|
|
4661
4986
|
}
|
|
4662
|
-
|
|
4663
|
-
|
|
4664
|
-
width: 100%;
|
|
4665
|
-
height: 75px;
|
|
4666
|
-
display: flex;
|
|
4667
|
-
justify-content: space-between;
|
|
4987
|
+
.omniscribe_insertion-preview__edit__chip {
|
|
4988
|
+
display: inline-flex;
|
|
4668
4989
|
align-items: center;
|
|
4669
|
-
|
|
4670
|
-
|
|
4990
|
+
gap: 4px;
|
|
4991
|
+
font-size: 11px;
|
|
4992
|
+
border: 1px solid var(--_input-border);
|
|
4993
|
+
border-radius: 999px;
|
|
4994
|
+
padding: 2px 8px;
|
|
4671
4995
|
cursor: pointer;
|
|
4672
|
-
transition: background-color 0.2s ease;
|
|
4673
|
-
box-sizing: border-box;
|
|
4674
|
-
flex-shrink: 0;
|
|
4675
4996
|
}
|
|
4676
|
-
|
|
4677
|
-
|
|
4678
|
-
|
|
4997
|
+
.omniscribe_insertion-preview__edit__chip--on {
|
|
4998
|
+
background: var(--_primary);
|
|
4999
|
+
color: #fff;
|
|
5000
|
+
border-color: var(--_primary);
|
|
4679
5001
|
}
|
|
4680
|
-
|
|
4681
|
-
|
|
4682
|
-
outline: none;
|
|
4683
|
-
background-color: var(--omniscribe-surface-alt, #f3f4f6);
|
|
5002
|
+
.omniscribe_insertion-preview__edit__chip input {
|
|
5003
|
+
display: none;
|
|
4684
5004
|
}
|
|
4685
5005
|
|
|
4686
|
-
|
|
4687
|
-
|
|
5006
|
+
/* Searchable enum select */
|
|
5007
|
+
.omniscribe_insertion-preview__searchable-select {
|
|
5008
|
+
position: relative;
|
|
5009
|
+
width: 100%;
|
|
4688
5010
|
}
|
|
4689
|
-
|
|
4690
|
-
.omniscribe_config-item-icon {
|
|
5011
|
+
.omniscribe_insertion-preview__searchable-select__trigger {
|
|
4691
5012
|
display: flex;
|
|
4692
5013
|
align-items: center;
|
|
4693
|
-
justify-content:
|
|
4694
|
-
width:
|
|
4695
|
-
|
|
5014
|
+
justify-content: space-between;
|
|
5015
|
+
width: 100%;
|
|
5016
|
+
font: inherit;
|
|
5017
|
+
font-size: 12px;
|
|
5018
|
+
border: 1px solid var(--_input-border);
|
|
5019
|
+
border-radius: 4px;
|
|
5020
|
+
padding: 4px 8px;
|
|
5021
|
+
background: var(--_surface);
|
|
5022
|
+
cursor: pointer;
|
|
5023
|
+
text-align: left;
|
|
4696
5024
|
}
|
|
4697
|
-
|
|
4698
|
-
|
|
4699
|
-
color: var(--omniscribe-text-muted, #4a5364);
|
|
5025
|
+
.omniscribe_insertion-preview__searchable-select__chevron {
|
|
5026
|
+
color: var(--_text-muted);
|
|
4700
5027
|
}
|
|
4701
|
-
|
|
4702
|
-
|
|
4703
|
-
|
|
4704
|
-
|
|
4705
|
-
|
|
5028
|
+
.omniscribe_insertion-preview__searchable-select__dropdown {
|
|
5029
|
+
position: absolute;
|
|
5030
|
+
top: 0;
|
|
5031
|
+
left: 0;
|
|
5032
|
+
right: 0;
|
|
5033
|
+
z-index: 5;
|
|
5034
|
+
background: var(--_surface);
|
|
5035
|
+
border: 1px solid var(--_input-border);
|
|
5036
|
+
border-radius: 4px;
|
|
5037
|
+
box-shadow: 0 8px 24px rgba(15, 27, 45, 0.12);
|
|
5038
|
+
max-height: 200px;
|
|
4706
5039
|
display: flex;
|
|
4707
5040
|
flex-direction: column;
|
|
4708
|
-
justify-content: center;
|
|
4709
|
-
gap: 4px;
|
|
4710
5041
|
}
|
|
4711
|
-
|
|
4712
|
-
|
|
4713
|
-
|
|
4714
|
-
|
|
4715
|
-
|
|
4716
|
-
|
|
4717
|
-
|
|
4718
|
-
color: var(--omniscribe-text, #252a32);
|
|
5042
|
+
.omniscribe_insertion-preview__searchable-select__search {
|
|
5043
|
+
font: inherit;
|
|
5044
|
+
font-size: 12px;
|
|
5045
|
+
border: 0;
|
|
5046
|
+
border-bottom: 1px solid var(--_border-soft);
|
|
5047
|
+
padding: 6px 8px;
|
|
5048
|
+
outline: none;
|
|
4719
5049
|
}
|
|
4720
|
-
|
|
4721
|
-
|
|
5050
|
+
.omniscribe_insertion-preview__searchable-select__list {
|
|
5051
|
+
list-style: none;
|
|
4722
5052
|
margin: 0;
|
|
4723
|
-
|
|
4724
|
-
|
|
4725
|
-
line-height: 16.8px;
|
|
4726
|
-
letter-spacing: 0.05px;
|
|
4727
|
-
color: var(--omniscribe-text-muted, #4a5364);
|
|
5053
|
+
padding: 4px 0;
|
|
5054
|
+
overflow-y: auto;
|
|
4728
5055
|
}
|
|
4729
|
-
|
|
4730
|
-
|
|
4731
|
-
|
|
4732
|
-
|
|
4733
|
-
justify-content: center;
|
|
4734
|
-
color: var(--omniscribe-text-muted, #9ca3af);
|
|
4735
|
-
flex-shrink: 0;
|
|
5056
|
+
.omniscribe_insertion-preview__searchable-select__option {
|
|
5057
|
+
padding: 4px 10px;
|
|
5058
|
+
font-size: 12px;
|
|
5059
|
+
cursor: pointer;
|
|
4736
5060
|
}
|
|
4737
|
-
|
|
4738
|
-
|
|
4739
|
-
|
|
4740
|
-
display: flex;
|
|
4741
|
-
align-items: center;
|
|
4742
|
-
padding: 16px 16px 8px 16px;
|
|
5061
|
+
.omniscribe_insertion-preview__searchable-select__option:hover,
|
|
5062
|
+
.omniscribe_insertion-preview__searchable-select__option--selected {
|
|
5063
|
+
background: var(--_surface-alt);
|
|
4743
5064
|
}
|
|
4744
|
-
|
|
4745
|
-
|
|
4746
|
-
|
|
4747
|
-
border: none;
|
|
4748
|
-
cursor: pointer;
|
|
4749
|
-
padding: 4px;
|
|
4750
|
-
border-radius: 4px;
|
|
4751
|
-
display: flex;
|
|
4752
|
-
align-items: center;
|
|
4753
|
-
justify-content: center;
|
|
4754
|
-
transition: background-color 0.2s ease;
|
|
5065
|
+
.omniscribe_insertion-preview__searchable-select__option--custom {
|
|
5066
|
+
color: var(--_text-muted);
|
|
5067
|
+
font-style: italic;
|
|
4755
5068
|
}
|
|
4756
5069
|
|
|
4757
|
-
.
|
|
4758
|
-
|
|
4759
|
-
font-size: 18px;
|
|
4760
|
-
font-weight: 500;
|
|
4761
|
-
color: var(--omniscribe-text, #252a32);
|
|
4762
|
-
line-height: 21.6px;
|
|
5070
|
+
.omniscribe_insertion-preview__row--will-replace {
|
|
5071
|
+
background: rgba(199, 119, 0, 0.06);
|
|
4763
5072
|
}
|
|
4764
|
-
|
|
4765
|
-
|
|
4766
|
-
|
|
4767
|
-
|
|
4768
|
-
|
|
4769
|
-
padding:
|
|
4770
|
-
|
|
4771
|
-
|
|
5073
|
+
.omniscribe_insertion-preview__row-tag {
|
|
5074
|
+
font-size: 10px;
|
|
5075
|
+
font-weight: 600;
|
|
5076
|
+
background: var(--_accent-soft);
|
|
5077
|
+
color: var(--_accent);
|
|
5078
|
+
padding: 2px 6px;
|
|
5079
|
+
border-radius: 999px;
|
|
5080
|
+
align-self: flex-start;
|
|
5081
|
+
margin-top: 1px;
|
|
4772
5082
|
}
|
|
4773
5083
|
|
|
4774
|
-
|
|
4775
|
-
|
|
5084
|
+
/* Gaps group */
|
|
5085
|
+
.omniscribe_insertion-preview__group--gaps {
|
|
5086
|
+
background: var(--_accent-bg);
|
|
5087
|
+
border-top: 1px solid var(--_border);
|
|
4776
5088
|
}
|
|
4777
|
-
|
|
4778
|
-
|
|
4779
|
-
flex: 1;
|
|
4780
|
-
overflow-y: auto;
|
|
4781
|
-
padding-bottom: 50px;
|
|
5089
|
+
.omniscribe_insertion-preview__group-name--gap {
|
|
5090
|
+
color: var(--_accent);
|
|
4782
5091
|
}
|
|
4783
|
-
|
|
4784
|
-
|
|
4785
|
-
|
|
4786
|
-
font-size: 14px;
|
|
4787
|
-
font-weight: 600;
|
|
4788
|
-
color: var(--omniscribe-text, #374151);
|
|
4789
|
-
line-height: 1.4;
|
|
5092
|
+
.omniscribe_insertion-preview__group-count--gap {
|
|
5093
|
+
background: var(--_accent-soft);
|
|
5094
|
+
color: var(--_accent);
|
|
4790
5095
|
}
|
|
4791
|
-
|
|
4792
|
-
|
|
4793
|
-
|
|
4794
|
-
|
|
5096
|
+
.omniscribe_insertion-preview__row--gap {
|
|
5097
|
+
grid-template-columns: 18px 1fr;
|
|
5098
|
+
cursor: default;
|
|
5099
|
+
}
|
|
5100
|
+
.omniscribe_insertion-preview__row--gap:hover {
|
|
5101
|
+
background: rgba(199, 119, 0, 0.06);
|
|
5102
|
+
}
|
|
5103
|
+
.omniscribe_insertion-preview__gap-icon {
|
|
5104
|
+
color: var(--_accent);
|
|
5105
|
+
margin-top: 1px;
|
|
5106
|
+
}
|
|
5107
|
+
.omniscribe_insertion-preview__row-preview--gap {
|
|
5108
|
+
color: var(--_accent);
|
|
4795
5109
|
}
|
|
4796
5110
|
|
|
4797
|
-
|
|
4798
|
-
.omniscribe_config-audio-env {
|
|
5111
|
+
.omniscribe_insertion-preview__footer {
|
|
4799
5112
|
display: flex;
|
|
4800
|
-
|
|
5113
|
+
justify-content: flex-end;
|
|
4801
5114
|
gap: 8px;
|
|
4802
|
-
|
|
5115
|
+
padding: 10px 14px;
|
|
5116
|
+
border-top: 1px solid var(--_border);
|
|
5117
|
+
background: var(--_surface-alt);
|
|
4803
5118
|
}
|
|
4804
|
-
|
|
4805
|
-
|
|
4806
|
-
font-size:
|
|
5119
|
+
.omniscribe_insertion-preview__btn {
|
|
5120
|
+
font: inherit;
|
|
5121
|
+
font-size: 12px;
|
|
4807
5122
|
font-weight: 600;
|
|
4808
|
-
|
|
4809
|
-
|
|
5123
|
+
border: 1px solid var(--_input-border);
|
|
5124
|
+
background: var(--_surface);
|
|
5125
|
+
border-radius: 6px;
|
|
5126
|
+
padding: 6px 14px;
|
|
5127
|
+
cursor: pointer;
|
|
5128
|
+
color: var(--_text);
|
|
4810
5129
|
}
|
|
4811
|
-
|
|
4812
|
-
|
|
4813
|
-
|
|
4814
|
-
|
|
4815
|
-
|
|
4816
|
-
|
|
4817
|
-
|
|
4818
|
-
|
|
5130
|
+
.omniscribe_insertion-preview__btn--primary {
|
|
5131
|
+
background: var(--_primary);
|
|
5132
|
+
color: #fff;
|
|
5133
|
+
border-color: var(--_primary);
|
|
5134
|
+
}
|
|
5135
|
+
.omniscribe_insertion-preview__btn--primary:disabled {
|
|
5136
|
+
background: #a3b1ad;
|
|
5137
|
+
border-color: #a3b1ad;
|
|
5138
|
+
cursor: not-allowed;
|
|
4819
5139
|
}
|
|
4820
5140
|
|
|
4821
|
-
.
|
|
4822
|
-
|
|
5141
|
+
/* "Edit with voice" — secondary action style. Picks up the host's
|
|
5142
|
+
--omniscribe-secondary token (falls back to a neutral teal). */
|
|
5143
|
+
.omniscribe_insertion-preview__btn--voice {
|
|
5144
|
+
display: inline-flex;
|
|
5145
|
+
align-items: center;
|
|
5146
|
+
gap: 6px;
|
|
5147
|
+
background: var(--_surface);
|
|
5148
|
+
color: var(--_primary);
|
|
5149
|
+
border-color: var(--_primary);
|
|
4823
5150
|
}
|
|
4824
|
-
|
|
4825
|
-
|
|
4826
|
-
|
|
4827
|
-
|
|
4828
|
-
|
|
5151
|
+
.omniscribe_insertion-preview__btn--voice:hover {
|
|
5152
|
+
background: var(--_primary-soft);
|
|
5153
|
+
}
|
|
5154
|
+
.omniscribe_insertion-preview__btn-icon {
|
|
5155
|
+
display: inline-block;
|
|
5156
|
+
vertical-align: middle;
|
|
5157
|
+
flex-shrink: 0;
|
|
5158
|
+
}
|
|
5159
|
+
.omniscribe_insertion-preview__btn-icon--stop {
|
|
5160
|
+
width: 10px;
|
|
5161
|
+
height: 10px;
|
|
5162
|
+
background: currentColor;
|
|
5163
|
+
border-radius: 1px;
|
|
4829
5164
|
}
|
|
4830
5165
|
|
|
4831
|
-
|
|
4832
|
-
|
|
4833
|
-
|
|
4834
|
-
|
|
5166
|
+
/* While recording the voice button morphs into a destructive-styled
|
|
5167
|
+
"Stop" button so the action reads as final. */
|
|
5168
|
+
.omniscribe_insertion-preview__btn--voice-stop {
|
|
5169
|
+
background: #dc3545;
|
|
5170
|
+
color: #fff;
|
|
5171
|
+
border-color: #dc3545;
|
|
5172
|
+
}
|
|
5173
|
+
.omniscribe_insertion-preview__btn--voice-stop:hover {
|
|
5174
|
+
background: #c82333;
|
|
5175
|
+
border-color: #c82333;
|
|
4835
5176
|
}
|
|
4836
5177
|
|
|
4837
|
-
|
|
5178
|
+
/* Voice status banner — rendered just under the modal header while the
|
|
5179
|
+
chat surface is recording / starting / generating. */
|
|
5180
|
+
.omniscribe_insertion-preview__voice-banner {
|
|
4838
5181
|
display: flex;
|
|
4839
|
-
|
|
4840
|
-
|
|
5182
|
+
align-items: center;
|
|
5183
|
+
gap: 10px;
|
|
5184
|
+
padding: 8px 14px;
|
|
5185
|
+
font-size: 12px;
|
|
5186
|
+
border-bottom: 1px solid var(--_border-soft);
|
|
5187
|
+
background: var(--_surface-alt);
|
|
5188
|
+
color: var(--_text);
|
|
4841
5189
|
}
|
|
4842
|
-
|
|
4843
|
-
.
|
|
4844
|
-
|
|
4845
|
-
border: 1px solid var(--omniscribe-border, #e5e8eb) !important;
|
|
4846
|
-
border-radius: 8px !important;
|
|
4847
|
-
padding: 0 12px !important;
|
|
4848
|
-
font-size: 14px !important;
|
|
4849
|
-
line-height: 1.4 !important;
|
|
4850
|
-
background-color: var(--omniscribe-surface, #ffffff) !important;
|
|
4851
|
-
transition:
|
|
4852
|
-
border-color 0.2s ease,
|
|
4853
|
-
box-shadow 0.2s ease !important;
|
|
5190
|
+
.omniscribe_insertion-preview__voice-banner--recording {
|
|
5191
|
+
background: rgba(220, 53, 69, 0.08);
|
|
5192
|
+
color: #b21f2c;
|
|
4854
5193
|
}
|
|
4855
|
-
|
|
4856
|
-
|
|
4857
|
-
|
|
4858
|
-
border-color: #4f46e5 !important;
|
|
4859
|
-
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1) !important;
|
|
5194
|
+
.omniscribe_insertion-preview__voice-banner--generating {
|
|
5195
|
+
background: var(--_primary-soft);
|
|
5196
|
+
color: var(--_primary-text);
|
|
4860
5197
|
}
|
|
4861
|
-
|
|
4862
|
-
|
|
4863
|
-
|
|
4864
|
-
|
|
5198
|
+
.omniscribe_insertion-preview__voice-pulse {
|
|
5199
|
+
width: 10px;
|
|
5200
|
+
height: 10px;
|
|
5201
|
+
border-radius: 999px;
|
|
5202
|
+
background: #dc3545;
|
|
5203
|
+
animation: omniscribe_insertion-preview__pulse 1s ease-in-out infinite;
|
|
5204
|
+
flex-shrink: 0;
|
|
4865
5205
|
}
|
|
4866
|
-
|
|
4867
|
-
|
|
4868
|
-
|
|
4869
|
-
|
|
5206
|
+
@keyframes omniscribe_insertion-preview__pulse {
|
|
5207
|
+
0%,
|
|
5208
|
+
100% {
|
|
5209
|
+
opacity: 0.4;
|
|
5210
|
+
transform: scale(0.85);
|
|
5211
|
+
}
|
|
5212
|
+
50% {
|
|
5213
|
+
opacity: 1;
|
|
5214
|
+
transform: scale(1.15);
|
|
5215
|
+
}
|
|
4870
5216
|
}
|
|
4871
|
-
|
|
4872
|
-
|
|
4873
|
-
|
|
4874
|
-
|
|
5217
|
+
.omniscribe_insertion-preview__voice-spinner {
|
|
5218
|
+
width: 12px;
|
|
5219
|
+
height: 12px;
|
|
5220
|
+
border: 2px solid currentColor;
|
|
5221
|
+
border-top-color: transparent;
|
|
5222
|
+
border-radius: 999px;
|
|
5223
|
+
animation: omniscribe_insertion-preview__spin 0.8s linear infinite;
|
|
5224
|
+
flex-shrink: 0;
|
|
5225
|
+
display: inline-block;
|
|
4875
5226
|
}
|
|
4876
|
-
|
|
4877
|
-
|
|
4878
|
-
|
|
4879
|
-
|
|
4880
|
-
padding: 0;
|
|
4881
|
-
display: flex;
|
|
4882
|
-
align-items: center;
|
|
4883
|
-
justify-content: center;
|
|
4884
|
-
background-color: var(--primary);
|
|
4885
|
-
border: 1px solid var(--primary);
|
|
4886
|
-
border-radius: 8px;
|
|
4887
|
-
color: var(--primary-foreground);
|
|
4888
|
-
cursor: pointer;
|
|
4889
|
-
transition: all 0.2s ease;
|
|
4890
|
-
margin-top: 0;
|
|
4891
|
-
font-size: 0;
|
|
5227
|
+
@keyframes omniscribe_insertion-preview__spin {
|
|
5228
|
+
to {
|
|
5229
|
+
transform: rotate(360deg);
|
|
5230
|
+
}
|
|
4892
5231
|
}
|
|
4893
5232
|
|
|
4894
|
-
.
|
|
4895
|
-
|
|
4896
|
-
border-color:
|
|
5233
|
+
/* Tiny visual cue on the panel itself while recording. */
|
|
5234
|
+
.omniscribe_insertion-preview__panel--voice {
|
|
5235
|
+
border-color: rgba(220, 53, 69, 0.4);
|
|
4897
5236
|
}
|
|
4898
|
-
|
|
4899
|
-
|
|
4900
|
-
background-color: #e5e8eb;
|
|
4901
|
-
border-color: var(--omniscribe-border, #e5e8eb);
|
|
4902
|
-
color: var(--omniscribe-text-muted, #9ca3af);
|
|
5237
|
+
.omniscribe_insertion-preview__close:disabled {
|
|
5238
|
+
opacity: 0.4;
|
|
4903
5239
|
cursor: not-allowed;
|
|
4904
|
-
transform: none;
|
|
4905
|
-
box-shadow: none;
|
|
4906
5240
|
}
|
|
4907
|
-
|
|
4908
|
-
|
|
4909
|
-
display: flex;
|
|
4910
|
-
padding-top: 16px;
|
|
4911
|
-
flex-direction: column;
|
|
4912
|
-
gap: 8px;
|
|
4913
|
-
max-height: 410px;
|
|
4914
|
-
overflow-y: auto;
|
|
4915
|
-
margin-top: 4px;
|
|
5241
|
+
.omniscribe_insertion-preview__footer-spacer {
|
|
5242
|
+
flex: 1;
|
|
4916
5243
|
}
|
|
4917
5244
|
|
|
4918
|
-
|
|
4919
|
-
|
|
4920
|
-
|
|
4921
|
-
|
|
4922
|
-
|
|
4923
|
-
background-color: var(--omniscribe-surface-alt, #f9fafb);
|
|
4924
|
-
border: 1px solid var(--omniscribe-border, #e5e8eb);
|
|
4925
|
-
border-radius: 8px;
|
|
4926
|
-
transition: all 0.2s ease;
|
|
5245
|
+
/* Mandatory styling — distinct from the soft amber gap treatment so the
|
|
5246
|
+
doctor immediately sees what's blocking. Red border + red pill. */
|
|
5247
|
+
.omniscribe_insertion-preview__row--mandatory {
|
|
5248
|
+
background: rgba(220, 53, 69, 0.06);
|
|
5249
|
+
border-left: 3px solid #dc3545;
|
|
4927
5250
|
}
|
|
4928
|
-
|
|
4929
|
-
.
|
|
4930
|
-
|
|
4931
|
-
|
|
5251
|
+
.omniscribe_insertion-preview__row--mandatory
|
|
5252
|
+
.omniscribe_insertion-preview__row-preview--gap,
|
|
5253
|
+
.omniscribe_insertion-preview__row--mandatory
|
|
5254
|
+
.omniscribe_insertion-preview__row-label {
|
|
5255
|
+
color: var(--omniscribe-text, #1f2733);
|
|
4932
5256
|
}
|
|
4933
|
-
|
|
4934
|
-
|
|
4935
|
-
flex: 1;
|
|
4936
|
-
font-size: 14px;
|
|
4937
|
-
line-height: 20px;
|
|
4938
|
-
color: var(--omniscribe-text, #374151);
|
|
4939
|
-
word-break: break-word;
|
|
4940
|
-
font-weight: 500;
|
|
5257
|
+
.omniscribe_insertion-preview__gap-icon--mandatory {
|
|
5258
|
+
color: #dc3545;
|
|
4941
5259
|
}
|
|
4942
|
-
|
|
4943
|
-
.
|
|
4944
|
-
|
|
4945
|
-
|
|
5260
|
+
.omniscribe_insertion-preview__row-edit-grid--mandatory {
|
|
5261
|
+
background: rgba(220, 53, 69, 0.04);
|
|
5262
|
+
border-radius: 4px;
|
|
5263
|
+
padding: 4px 6px;
|
|
5264
|
+
}
|
|
5265
|
+
.omniscribe_insertion-preview__mandatory-pill {
|
|
5266
|
+
display: inline-block;
|
|
5267
|
+
margin-left: 8px;
|
|
5268
|
+
padding: 1px 6px;
|
|
5269
|
+
font-size: 9.5px;
|
|
5270
|
+
font-weight: 700;
|
|
5271
|
+
letter-spacing: 0.04em;
|
|
5272
|
+
text-transform: uppercase;
|
|
5273
|
+
background: #dc3545;
|
|
5274
|
+
color: #fff;
|
|
5275
|
+
border-radius: 999px;
|
|
5276
|
+
}
|
|
5277
|
+
.omniscribe_insertion-preview__sub--blocking {
|
|
5278
|
+
color: #dc3545;
|
|
4946
5279
|
font-weight: 600;
|
|
4947
|
-
flex-shrink: 0;
|
|
4948
|
-
margin: 0 4px;
|
|
4949
5280
|
}
|
|
4950
5281
|
|
|
4951
|
-
|
|
4952
|
-
|
|
4953
|
-
|
|
4954
|
-
|
|
4955
|
-
|
|
4956
|
-
|
|
4957
|
-
|
|
4958
|
-
|
|
4959
|
-
|
|
4960
|
-
|
|
4961
|
-
|
|
4962
|
-
|
|
5282
|
+
/* AI-suggested field: the agent inferred this from context rather
|
|
5283
|
+
than from an explicit doctor statement. We tint the editor
|
|
5284
|
+
background so the doctor visually distinguishes it from
|
|
5285
|
+
confirmed-from-dictation fields, and a small ✨ pill on the
|
|
5286
|
+
label tells them what it means. Less alarming than the
|
|
5287
|
+
mandatory-red treatment because the field IS filled — we just
|
|
5288
|
+
want the doctor to double-check it. */
|
|
5289
|
+
.omniscribe_insertion-preview__row-edit-grid--suggested {
|
|
5290
|
+
background: rgba(176, 122, 255, 0.06);
|
|
5291
|
+
border-left: 2px solid #b07aff;
|
|
5292
|
+
border-radius: 4px;
|
|
5293
|
+
padding: 4px 6px;
|
|
4963
5294
|
}
|
|
4964
|
-
|
|
4965
|
-
|
|
4966
|
-
|
|
4967
|
-
|
|
4968
|
-
|
|
5295
|
+
.omniscribe_insertion-preview__suggested-pill {
|
|
5296
|
+
display: inline-block;
|
|
5297
|
+
margin-left: 8px;
|
|
5298
|
+
padding: 1px 7px;
|
|
5299
|
+
font-size: 9.5px;
|
|
5300
|
+
font-weight: 600;
|
|
5301
|
+
letter-spacing: 0.03em;
|
|
5302
|
+
background: rgba(176, 122, 255, 0.12);
|
|
5303
|
+
color: #6f48b8;
|
|
5304
|
+
border: 1px solid rgba(176, 122, 255, 0.5);
|
|
5305
|
+
border-radius: 999px;
|
|
4969
5306
|
}
|
|
4970
5307
|
|
|
4971
|
-
|
|
4972
|
-
|
|
4973
|
-
|
|
4974
|
-
|
|
4975
|
-
|
|
4976
|
-
|
|
4977
|
-
line-height: 20px;
|
|
4978
|
-
background-color: var(--omniscribe-surface-alt, #f9fafb);
|
|
4979
|
-
border: 2px dashed var(--omniscribe-border, #e5e8eb);
|
|
4980
|
-
border-radius: 12px;
|
|
4981
|
-
font-style: italic;
|
|
5308
|
+
/* SOF-659 — read-only "Attachments" section (file previews by type). */
|
|
5309
|
+
.omniscribe_insertion-preview__attachments {
|
|
5310
|
+
display: flex;
|
|
5311
|
+
flex-direction: column;
|
|
5312
|
+
gap: 8px;
|
|
5313
|
+
margin-bottom: 12px;
|
|
4982
5314
|
}
|
|
4983
5315
|
|
|
4984
|
-
|
|
4985
|
-
|
|
4986
|
-
/* General prompt section */
|
|
4987
|
-
.omniscribe_template-general-prompt-section {
|
|
5316
|
+
.omniscribe_insertion-preview__attachments__list {
|
|
4988
5317
|
display: flex;
|
|
4989
5318
|
flex-direction: column;
|
|
4990
|
-
gap:
|
|
4991
|
-
padding-bottom: 8px;
|
|
5319
|
+
gap: 10px;
|
|
4992
5320
|
}
|
|
4993
5321
|
|
|
4994
|
-
.
|
|
4995
|
-
|
|
4996
|
-
|
|
4997
|
-
|
|
4998
|
-
|
|
4999
|
-
line-height: 1.4;
|
|
5322
|
+
.omniscribe_insertion-preview__attachment {
|
|
5323
|
+
border: 1px solid rgba(0, 0, 0, 0.08);
|
|
5324
|
+
border-radius: 8px;
|
|
5325
|
+
overflow: hidden;
|
|
5326
|
+
background: rgba(0, 0, 0, 0.02);
|
|
5000
5327
|
}
|
|
5001
5328
|
|
|
5002
|
-
.
|
|
5003
|
-
|
|
5004
|
-
|
|
5005
|
-
|
|
5006
|
-
|
|
5007
|
-
line-height: 1.4;
|
|
5329
|
+
.omniscribe_insertion-preview__attachment--image {
|
|
5330
|
+
display: block;
|
|
5331
|
+
max-width: 100%;
|
|
5332
|
+
max-height: 240px;
|
|
5333
|
+
object-fit: contain;
|
|
5008
5334
|
}
|
|
5009
5335
|
|
|
5010
|
-
.
|
|
5336
|
+
.omniscribe_insertion-preview__attachment--audio {
|
|
5011
5337
|
width: 100%;
|
|
5012
|
-
|
|
5013
|
-
max-height: 200px;
|
|
5014
|
-
padding: 12px;
|
|
5015
|
-
border: 1px solid var(--omniscribe-border, #e5e7ec);
|
|
5016
|
-
border-radius: 8px;
|
|
5017
|
-
font-size: 14px;
|
|
5018
|
-
font-family: inherit;
|
|
5019
|
-
line-height: 1.5;
|
|
5020
|
-
color: var(--omniscribe-text, #374151);
|
|
5021
|
-
background-color: var(--omniscribe-surface, white);
|
|
5022
|
-
resize: vertical;
|
|
5023
|
-
box-sizing: border-box;
|
|
5024
|
-
outline: none;
|
|
5025
|
-
transition: border-color 0.15s ease;
|
|
5338
|
+
padding: 8px;
|
|
5026
5339
|
}
|
|
5027
5340
|
|
|
5028
|
-
.
|
|
5029
|
-
|
|
5030
|
-
|
|
5341
|
+
.omniscribe_insertion-preview__attachment--pdf {
|
|
5342
|
+
width: 100%;
|
|
5343
|
+
height: 360px;
|
|
5344
|
+
border: none;
|
|
5031
5345
|
}
|
|
5032
5346
|
|
|
5033
|
-
.
|
|
5034
|
-
|
|
5035
|
-
|
|
5347
|
+
.omniscribe_insertion-preview__attachment--text {
|
|
5348
|
+
margin: 0;
|
|
5349
|
+
padding: 10px 12px;
|
|
5350
|
+
max-height: 200px;
|
|
5351
|
+
overflow: auto;
|
|
5352
|
+
font-size: 12px;
|
|
5353
|
+
white-space: pre-wrap;
|
|
5354
|
+
word-break: break-word;
|
|
5036
5355
|
}
|
|
5037
5356
|
|
|
5038
|
-
|
|
5039
|
-
.omniscribe_template-fields-section {
|
|
5357
|
+
.omniscribe_insertion-preview__attachment--file {
|
|
5040
5358
|
display: flex;
|
|
5041
|
-
|
|
5359
|
+
align-items: center;
|
|
5042
5360
|
gap: 8px;
|
|
5043
|
-
padding
|
|
5044
|
-
}
|
|
5045
|
-
|
|
5046
|
-
.omniscribe_template-field {
|
|
5047
|
-
background: var(--omniscribe-surface, white);
|
|
5048
|
-
border-bottom: 1px solid var(--omniscribe-border, #e1e8ed);
|
|
5049
|
-
margin-bottom: 0;
|
|
5361
|
+
padding: 10px 12px;
|
|
5050
5362
|
}
|
|
5051
5363
|
|
|
5052
|
-
.
|
|
5053
|
-
|
|
5364
|
+
.omniscribe_insertion-preview__attachment__name {
|
|
5365
|
+
font-size: 13px;
|
|
5366
|
+
color: #333;
|
|
5367
|
+
overflow: hidden;
|
|
5368
|
+
text-overflow: ellipsis;
|
|
5369
|
+
white-space: nowrap;
|
|
5054
5370
|
}
|
|
5055
|
-
|
|
5056
|
-
|
|
5371
|
+
.omniscribe_toast-stack {
|
|
5372
|
+
position: fixed;
|
|
5373
|
+
top: calc(var(--spacing) * 4);
|
|
5374
|
+
right: calc(var(--spacing) * 4);
|
|
5057
5375
|
display: flex;
|
|
5058
|
-
|
|
5059
|
-
|
|
5060
|
-
|
|
5376
|
+
flex-direction: column;
|
|
5377
|
+
gap: calc(var(--spacing) * 2);
|
|
5378
|
+
z-index: 9999;
|
|
5379
|
+
pointer-events: none;
|
|
5061
5380
|
}
|
|
5062
5381
|
|
|
5063
|
-
.
|
|
5064
|
-
|
|
5065
|
-
|
|
5066
|
-
|
|
5067
|
-
margin-right: 12px;
|
|
5068
|
-
cursor: pointer;
|
|
5382
|
+
.omniscribe_toast-item {
|
|
5383
|
+
border-radius: var(--radius);
|
|
5384
|
+
padding: calc(var(--spacing) * 4);
|
|
5385
|
+
width: calc(var(--spacing) * 120);
|
|
5069
5386
|
display: flex;
|
|
5070
|
-
align-items:
|
|
5071
|
-
|
|
5072
|
-
|
|
5387
|
+
align-items: flex-start;
|
|
5388
|
+
transition:
|
|
5389
|
+
transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
|
|
5390
|
+
opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
5391
|
+
pointer-events: auto;
|
|
5073
5392
|
}
|
|
5074
5393
|
|
|
5075
|
-
.
|
|
5394
|
+
.omniscribe_toast-item-danger {
|
|
5395
|
+
background-color: var(--color-red-500);
|
|
5396
|
+
}
|
|
5397
|
+
.omniscribe_toast-item-black {
|
|
5398
|
+
background-color: var(--black);
|
|
5399
|
+
}
|
|
5400
|
+
.omniscribe_toast-item-show {
|
|
5401
|
+
transform: translateX(0);
|
|
5402
|
+
opacity: 1;
|
|
5403
|
+
}
|
|
5404
|
+
.omniscribe_toast-item-hide {
|
|
5405
|
+
transform: translateX(120%);
|
|
5406
|
+
opacity: 0;
|
|
5407
|
+
}
|
|
5408
|
+
.omniscribe_toast-subcontainer {
|
|
5409
|
+
transition-property: opacity;
|
|
5410
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
5411
|
+
transition-duration: 100ms;
|
|
5412
|
+
display: flex;
|
|
5413
|
+
flex-direction: column;
|
|
5414
|
+
color: var(--white);
|
|
5076
5415
|
flex: 1;
|
|
5077
|
-
font-size: 14px;
|
|
5078
|
-
font-weight: 500;
|
|
5079
|
-
color: var(--omniscribe-text, #2c3e50);
|
|
5080
5416
|
}
|
|
5081
|
-
|
|
5082
|
-
|
|
5417
|
+
.omniscribe_toast-title {
|
|
5418
|
+
font-size: 18px;
|
|
5419
|
+
font-weight: var(--font-weight-bold);
|
|
5420
|
+
}
|
|
5421
|
+
.omniscribe_toast-msg {
|
|
5422
|
+
font-size: 16px;
|
|
5423
|
+
}
|
|
5424
|
+
.omniscribe_toast-close {
|
|
5083
5425
|
background: none;
|
|
5084
5426
|
border: none;
|
|
5085
|
-
|
|
5427
|
+
color: var(--white);
|
|
5428
|
+
font-size: 18px;
|
|
5086
5429
|
cursor: pointer;
|
|
5430
|
+
padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
|
|
5431
|
+
align-self: flex-start;
|
|
5432
|
+
opacity: 0.8;
|
|
5433
|
+
}
|
|
5434
|
+
.omniscribe_toast-close:hover {
|
|
5435
|
+
opacity: 1;
|
|
5436
|
+
}
|
|
5437
|
+
.omniscribe_select-container {
|
|
5438
|
+
position: relative;
|
|
5439
|
+
width: 100%;
|
|
5440
|
+
padding-block: calc(var(--spacing) * 3);
|
|
5441
|
+
}
|
|
5442
|
+
.omniscribe_select-button {
|
|
5087
5443
|
display: flex;
|
|
5088
5444
|
align-items: center;
|
|
5089
|
-
justify-content:
|
|
5090
|
-
|
|
5091
|
-
|
|
5092
|
-
|
|
5445
|
+
justify-content: space-between;
|
|
5446
|
+
width: 100%;
|
|
5447
|
+
padding: calc(var(--spacing) * 3);
|
|
5448
|
+
background-color: var(--white);
|
|
5449
|
+
border-radius: var(--Radius-radius-medium, 8px);
|
|
5450
|
+
border: solid 1px var(--omniscribe-border, var(--light-border));
|
|
5451
|
+
cursor: pointer;
|
|
5093
5452
|
}
|
|
5094
|
-
|
|
5095
|
-
|
|
5096
|
-
|
|
5453
|
+
.omniscribe_select-button:disabled {
|
|
5454
|
+
cursor: not-allowed;
|
|
5455
|
+
opacity: 0.6;
|
|
5097
5456
|
}
|
|
5098
|
-
|
|
5099
|
-
|
|
5100
|
-
|
|
5101
|
-
|
|
5457
|
+
.omniscribe_select-text {
|
|
5458
|
+
display: flex;
|
|
5459
|
+
align-items: center;
|
|
5460
|
+
gap: calc(var(--spacing) * 2);
|
|
5102
5461
|
}
|
|
5103
|
-
|
|
5104
|
-
|
|
5462
|
+
.omniscribe_select-content-container {
|
|
5463
|
+
position: absolute;
|
|
5105
5464
|
width: 100%;
|
|
5106
|
-
|
|
5107
|
-
|
|
5108
|
-
|
|
5109
|
-
border:
|
|
5110
|
-
|
|
5111
|
-
|
|
5112
|
-
|
|
5113
|
-
|
|
5114
|
-
|
|
5115
|
-
|
|
5116
|
-
|
|
5465
|
+
margin-top: calc(var(--spacing) * 2);
|
|
5466
|
+
border: solid 1px var(--omniscribe-border, var(--light-border));
|
|
5467
|
+
background-color: var(--white);
|
|
5468
|
+
border-radius: var(--radius);
|
|
5469
|
+
box-shadow:
|
|
5470
|
+
0 10px 15px -3px rgb(0 0 0 / 0.1),
|
|
5471
|
+
0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
5472
|
+
bottom: calc(var(--spacing) * 15);
|
|
5473
|
+
padding-inline: calc(var(--spacing) * 1);
|
|
5474
|
+
padding-block: calc(var(--spacing) * 0.5);
|
|
5475
|
+
z-index: 9999;
|
|
5476
|
+
}
|
|
5477
|
+
.omniscribe_select-content-ul {
|
|
5478
|
+
overflow-y: scroll;
|
|
5479
|
+
max-height: calc(var(--spacing) * 44);
|
|
5480
|
+
padding-inline: 5px;
|
|
5481
|
+
}
|
|
5482
|
+
.omniscribe_select-content-li {
|
|
5483
|
+
display: flex;
|
|
5484
|
+
align-items: center;
|
|
5485
|
+
justify-content: space-between;
|
|
5486
|
+
padding: calc(var(--spacing) * 3);
|
|
5487
|
+
cursor: pointer;
|
|
5488
|
+
&:hover {
|
|
5489
|
+
@media (hover: hover) {
|
|
5490
|
+
background-color: var(--omniscribe-surface-alt, var(--color-gray-100));
|
|
5491
|
+
}
|
|
5492
|
+
}
|
|
5117
5493
|
}
|
|
5118
|
-
|
|
5119
|
-
|
|
5120
|
-
|
|
5121
|
-
|
|
5122
|
-
box-shadow: 0 0 0 3px rgba(59, 94, 219, 0.1);
|
|
5494
|
+
.omniscribe_select-check-icon {
|
|
5495
|
+
width: calc(var(--spacing) * 5);
|
|
5496
|
+
height: calc(var(--spacing) * 5);
|
|
5497
|
+
color: var(--color-slate-500) /* oklch(55.4% 0.046 257.417) = #62748e */;
|
|
5123
5498
|
}
|
|
5124
|
-
|
|
5125
|
-
.omniscribe_template-character-count {
|
|
5126
|
-
margin-top: 8px;
|
|
5127
|
-
font-size: 12px;
|
|
5128
|
-
color: var(--omniscribe-text-muted, #95a5a6);
|
|
5499
|
+
.omniscribe_select-content-li-span {
|
|
5129
5500
|
display: flex;
|
|
5501
|
+
align-items: center;
|
|
5502
|
+
gap: calc(0.25rem /* 4px */ * 2);
|
|
5130
5503
|
}
|
|
5131
|
-
|
|
5132
|
-
/* Template fields container */
|
|
5133
|
-
.omniscribe_template-fields {
|
|
5504
|
+
.omniscribe_toggle-container {
|
|
5134
5505
|
display: flex;
|
|
5506
|
+
align-items: flex-start;
|
|
5507
|
+
justify-content: space-between;
|
|
5508
|
+
gap: 8px;
|
|
5135
5509
|
flex-direction: column;
|
|
5136
|
-
background: var(--omniscribe-surface, white);
|
|
5137
5510
|
}
|
|
5138
5511
|
|
|
5139
|
-
|
|
5140
|
-
|
|
5141
|
-
|
|
5512
|
+
.omniscribe_toggle-label {
|
|
5513
|
+
font-size: 14px;
|
|
5514
|
+
font-weight: 400;
|
|
5515
|
+
color: var(--omniscribe-text, #374151);
|
|
5516
|
+
flex: 1;
|
|
5142
5517
|
}
|
|
5143
5518
|
|
|
5144
|
-
.
|
|
5145
|
-
|
|
5146
|
-
|
|
5519
|
+
.omniscribe_toggle-wrapper {
|
|
5520
|
+
display: flex;
|
|
5521
|
+
align-items: center;
|
|
5522
|
+
gap: 8px;
|
|
5147
5523
|
}
|
|
5148
5524
|
|
|
5149
|
-
.
|
|
5150
|
-
|
|
5151
|
-
|
|
5525
|
+
.omniscribe_toggle-switch {
|
|
5526
|
+
position: relative;
|
|
5527
|
+
width: 29px;
|
|
5528
|
+
height: 16px;
|
|
5529
|
+
background-color: #d1d5db;
|
|
5530
|
+
border-radius: 8px;
|
|
5531
|
+
border: none;
|
|
5532
|
+
cursor: pointer;
|
|
5533
|
+
transition: background-color 0.2s ease;
|
|
5534
|
+
outline: none;
|
|
5152
5535
|
}
|
|
5153
5536
|
|
|
5154
|
-
.
|
|
5155
|
-
|
|
5537
|
+
.omniscribe_toggle-switch:focus-visible {
|
|
5538
|
+
box-shadow: 0 0 0 2px var(--secondary, #132caa);
|
|
5156
5539
|
}
|
|
5157
5540
|
|
|
5158
|
-
.
|
|
5159
|
-
background: var(--
|
|
5160
|
-
color: var(--omniscribe-text-muted, #4a5364);
|
|
5161
|
-
padding: 8px 24px;
|
|
5162
|
-
font-weight: 700;
|
|
5163
|
-
line-height: 16.8px;
|
|
5164
|
-
font-size: 14px;
|
|
5165
|
-
position: absolute;
|
|
5166
|
-
bottom: 0;
|
|
5167
|
-
left: 0;
|
|
5168
|
-
right: 0;
|
|
5169
|
-
border-bottom-left-radius: 12px;
|
|
5170
|
-
border-bottom-right-radius: 12px;
|
|
5171
|
-
}
|
|
5172
|
-
.omniscribe_chat-config {
|
|
5173
|
-
display: flex;
|
|
5174
|
-
flex-direction: column;
|
|
5175
|
-
gap: 24px;
|
|
5176
|
-
min-height: 0; /* Permite que los hijos controlen su altura */
|
|
5177
|
-
flex: 1; /* Toma el espacio disponible */
|
|
5541
|
+
.omniscribe_toggle-switch-checked {
|
|
5542
|
+
background-color: var(--secondary, #132caa);
|
|
5178
5543
|
}
|
|
5179
5544
|
|
|
5180
|
-
|
|
5181
|
-
|
|
5182
|
-
|
|
5545
|
+
.omniscribe_toggle-switch-disabled {
|
|
5546
|
+
opacity: 0.5;
|
|
5547
|
+
cursor: not-allowed;
|
|
5183
5548
|
}
|
|
5184
5549
|
|
|
5185
|
-
.
|
|
5186
|
-
|
|
5187
|
-
|
|
5188
|
-
|
|
5189
|
-
|
|
5550
|
+
.omniscribe_toggle-thumb {
|
|
5551
|
+
position: absolute;
|
|
5552
|
+
top: 2px;
|
|
5553
|
+
left: 2px;
|
|
5554
|
+
width: 12px;
|
|
5555
|
+
height: 12px;
|
|
5556
|
+
/* High-contrast fill that sits on top of the track — must contrast the */
|
|
5557
|
+
/* track color, not inherit the panel surface (which would vanish in a */
|
|
5558
|
+
/* dark theme). Hosts theming dark set --omniscribe-on-accent to a dark */
|
|
5559
|
+
/* ink; light hosts fall back to white (unchanged). */
|
|
5560
|
+
background-color: var(--omniscribe-on-accent, white);
|
|
5561
|
+
border-radius: 50%;
|
|
5562
|
+
transition: transform 0.2s ease;
|
|
5563
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
5190
5564
|
}
|
|
5191
5565
|
|
|
5192
|
-
.
|
|
5193
|
-
|
|
5194
|
-
height: 74px;
|
|
5195
|
-
padding: 8px;
|
|
5196
|
-
border: 1px solid var(--omniscribe-border, #e5e7ec);
|
|
5197
|
-
border-radius: 8px;
|
|
5198
|
-
font-size: 14px;
|
|
5199
|
-
font-family: inherit;
|
|
5200
|
-
line-height: 1.5;
|
|
5201
|
-
color: var(--omniscribe-text, #374151);
|
|
5202
|
-
background-color: var(--omniscribe-surface, white);
|
|
5203
|
-
resize: none;
|
|
5204
|
-
outline: none;
|
|
5205
|
-
transition: border-color 0.15s ease;
|
|
5566
|
+
.omniscribe_toggle-switch-checked .omniscribe_toggle-thumb {
|
|
5567
|
+
transform: translateX(13px);
|
|
5206
5568
|
}
|
|
5207
5569
|
|
|
5208
|
-
.
|
|
5209
|
-
|
|
5210
|
-
font-
|
|
5570
|
+
.omniscribe_toggle-status {
|
|
5571
|
+
font-size: 14px;
|
|
5572
|
+
font-weight: 500;
|
|
5573
|
+
color: var(--omniscribe-text-muted, #6b7280);
|
|
5574
|
+
min-width: 70px;
|
|
5211
5575
|
}
|
|
5212
5576
|
|
|
5213
|
-
.
|
|
5214
|
-
|
|
5215
|
-
color: var(--omniscribe-text-muted, #6b7280);
|
|
5216
|
-
align-self: flex-start;
|
|
5577
|
+
.omniscribe_toggle-switch-checked + .omniscribe_toggle-status {
|
|
5578
|
+
color: var(--omniscribe-text-muted, #4a5364);
|
|
5217
5579
|
}
|
|
5218
|
-
|
|
5219
|
-
|
|
5220
|
-
|
|
5221
|
-
|
|
5222
|
-
border-radius: calc(var(--radius));
|
|
5223
|
-
border: solid 1px var(--input);
|
|
5224
|
-
background-color: transparent;
|
|
5225
|
-
padding-inline: calc(var(--spacing) * 3);
|
|
5226
|
-
padding-block: calc(var(--spacing) * 1);
|
|
5227
|
-
font-size: var(--text-base) /* 1rem = 16px */;
|
|
5228
|
-
line-height: var(--text-base--line-height);
|
|
5229
|
-
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
5230
|
-
transition-property: color, box-shadow;
|
|
5231
|
-
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
5232
|
-
transition-duration: 150ms;
|
|
5233
|
-
outline-style: none;
|
|
5234
|
-
&::file-selector-button {
|
|
5235
|
-
color: var(--foreground);
|
|
5236
|
-
display: inline-flex;
|
|
5237
|
-
height: calc(var(--spacing) * 7);
|
|
5238
|
-
border: none;
|
|
5239
|
-
background-color: transparent;
|
|
5240
|
-
font-size: var(--text-sm) /* 0.875rem = 14px */;
|
|
5241
|
-
line-height: var(--text-sm--line-height);
|
|
5242
|
-
font-weight: var(--font-weight-medium);
|
|
5243
|
-
}
|
|
5244
|
-
&::placeholder {
|
|
5245
|
-
color: var(--muted-foreground);
|
|
5246
|
-
}
|
|
5247
|
-
&::selection {
|
|
5248
|
-
background-color: var(--primary);
|
|
5249
|
-
color: var(--primary-foreground);
|
|
5250
|
-
}
|
|
5251
|
-
&:disabled {
|
|
5252
|
-
pointer-events: none;
|
|
5253
|
-
cursor: not-allowed;
|
|
5254
|
-
opacity: 50%;
|
|
5255
|
-
}
|
|
5256
|
-
&[aria-invalid='true'] {
|
|
5257
|
-
--tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
|
|
5258
|
-
border-color: var(--destructive);
|
|
5259
|
-
}
|
|
5260
|
-
@media (width >= 48rem /* 768px */) {
|
|
5261
|
-
font-size: var(--text-sm) /* 0.875rem = 14px */;
|
|
5262
|
-
line-height: var(--text-sm--line-height) /* calc(1.25 / 0.875) ≈ 1.4286 */;
|
|
5263
|
-
}
|
|
5580
|
+
/* Separator Component Styles */
|
|
5581
|
+
.omniscribe_separator {
|
|
5582
|
+
border: 1px solid var(--omniscribe-border, #e5e7ec);
|
|
5583
|
+
flex-shrink: 0;
|
|
5264
5584
|
}
|
|
5265
5585
|
|
|
5266
|
-
.
|
|
5267
|
-
|
|
5268
|
-
flex-direction: column;
|
|
5586
|
+
.omniscribe_separator--horizontal {
|
|
5587
|
+
height: 0;
|
|
5269
5588
|
width: 100%;
|
|
5270
|
-
|
|
5271
|
-
|
|
5272
|
-
|
|
5273
|
-
|
|
5274
|
-
border-color: #dc3545;
|
|
5275
|
-
background-color: #fff5f5;
|
|
5276
|
-
box-shadow: 0 0 0 0.125rem rgba(220, 53, 69, 0.25);
|
|
5589
|
+
border-top: 1px solid var(--omniscribe-border, #e5e7ec);
|
|
5590
|
+
border-right: none;
|
|
5591
|
+
border-bottom: none;
|
|
5592
|
+
border-left: none;
|
|
5277
5593
|
}
|
|
5278
5594
|
|
|
5279
|
-
.
|
|
5280
|
-
|
|
5281
|
-
|
|
5282
|
-
|
|
5283
|
-
|
|
5284
|
-
|
|
5595
|
+
.omniscribe_separator--vertical {
|
|
5596
|
+
width: 0;
|
|
5597
|
+
height: 100%;
|
|
5598
|
+
border-left: 1px solid var(--omniscribe-border, #e5e7ec);
|
|
5599
|
+
border-top: none;
|
|
5600
|
+
border-right: none;
|
|
5601
|
+
border-bottom: none;
|
|
5285
5602
|
}
|
|
5286
|
-
.
|
|
5603
|
+
.omniscribe_source-selector {
|
|
5287
5604
|
display: flex;
|
|
5288
5605
|
flex-direction: column;
|
|
5289
|
-
|
|
5290
|
-
|
|
5291
|
-
|
|
5606
|
+
gap: 8px;
|
|
5607
|
+
margin-bottom: 24px;
|
|
5608
|
+
min-height: 0;
|
|
5609
|
+
flex: 1;
|
|
5610
|
+
max-width: 100%;
|
|
5611
|
+
box-sizing: border-box;
|
|
5292
5612
|
}
|
|
5293
5613
|
|
|
5294
|
-
|
|
5295
|
-
|
|
5296
|
-
|
|
5297
|
-
|
|
5298
|
-
|
|
5299
|
-
padding: 10px 16px;
|
|
5300
|
-
border-bottom: 1px solid var(--omniscribe-border, #e5e7ec);
|
|
5614
|
+
.omniscribe_source-selector-title {
|
|
5615
|
+
font-size: 16px;
|
|
5616
|
+
font-weight: 500;
|
|
5617
|
+
color: var(--omniscribe-text, #252a32);
|
|
5618
|
+
margin: 0;
|
|
5301
5619
|
}
|
|
5302
5620
|
|
|
5303
|
-
.
|
|
5304
|
-
|
|
5621
|
+
.omniscribe_source-selector-description {
|
|
5622
|
+
font-size: 14px;
|
|
5623
|
+
color: var(--omniscribe-text-muted, #6b7280);
|
|
5624
|
+
line-height: 1.5;
|
|
5625
|
+
margin: 0;
|
|
5626
|
+
}
|
|
5627
|
+
|
|
5628
|
+
.omniscribe_source-list {
|
|
5629
|
+
width: 100%;
|
|
5630
|
+
max-width: 100%;
|
|
5631
|
+
min-height: 105px;
|
|
5632
|
+
max-height: 285px;
|
|
5633
|
+
border-radius: 12px;
|
|
5634
|
+
border: 1px solid var(--omniscribe-border, #e5e7ec);
|
|
5635
|
+
background: var(--omniscribe-surface, #ffffff);
|
|
5636
|
+
padding: 16px;
|
|
5305
5637
|
display: flex;
|
|
5306
|
-
|
|
5638
|
+
flex-direction: column;
|
|
5307
5639
|
gap: 8px;
|
|
5640
|
+
overflow-y: auto;
|
|
5641
|
+
flex: 1;
|
|
5642
|
+
box-sizing: border-box;
|
|
5308
5643
|
}
|
|
5309
5644
|
|
|
5310
|
-
.
|
|
5311
|
-
|
|
5312
|
-
height: 32px;
|
|
5313
|
-
border-radius: 8px;
|
|
5314
|
-
}
|
|
5315
|
-
|
|
5316
|
-
.omniscribe_app-skeleton-title {
|
|
5317
|
-
width: 48px;
|
|
5318
|
-
height: 20px;
|
|
5319
|
-
border-radius: 4px;
|
|
5645
|
+
.omniscribe_source-list--compact {
|
|
5646
|
+
max-height: 105px;
|
|
5320
5647
|
}
|
|
5321
|
-
|
|
5322
|
-
|
|
5323
|
-
|
|
5324
|
-
|
|
5325
|
-
|
|
5648
|
+
.omniscribe_chat-prompt-title {
|
|
5649
|
+
font-size: 14px;
|
|
5650
|
+
font-weight: 400;
|
|
5651
|
+
color: var(--omniscribe-text, #252a32);
|
|
5652
|
+
line-height: 14.4px;
|
|
5653
|
+
margin: 0 0 12px 0;
|
|
5326
5654
|
}
|
|
5327
5655
|
|
|
5328
|
-
|
|
5329
|
-
|
|
5330
|
-
padding: 6px 16px;
|
|
5331
|
-
border-bottom: 1px solid var(--omniscribe-border, #e5e7ec);
|
|
5656
|
+
.omniscribe_chat-prompt-container {
|
|
5657
|
+
position: relative;
|
|
5332
5658
|
}
|
|
5333
5659
|
|
|
5334
|
-
.
|
|
5660
|
+
.omniscribe_chat-prompt-textarea {
|
|
5335
5661
|
width: 100%;
|
|
5336
|
-
height:
|
|
5337
|
-
|
|
5662
|
+
min-height: 80px;
|
|
5663
|
+
padding: 12px;
|
|
5664
|
+
border: 1px solid var(--border-color, #ddd);
|
|
5665
|
+
border-radius: 8px;
|
|
5666
|
+
font-family: inherit;
|
|
5667
|
+
font-size: 14px;
|
|
5668
|
+
line-height: 1.4;
|
|
5669
|
+
resize: none;
|
|
5670
|
+
transition: border-color 0.2s ease;
|
|
5338
5671
|
}
|
|
5339
5672
|
|
|
5340
|
-
|
|
5341
|
-
|
|
5342
|
-
|
|
5343
|
-
|
|
5673
|
+
.omniscribe_chat-prompt-textarea:focus {
|
|
5674
|
+
outline: none;
|
|
5675
|
+
border-color: var(--omniscribe-primary, #007bff);
|
|
5676
|
+
box-shadow: 0 0 0 2px var(--primary-color-alpha, rgba(0, 123, 255, 0.1));
|
|
5344
5677
|
}
|
|
5345
5678
|
|
|
5346
|
-
.
|
|
5347
|
-
|
|
5348
|
-
|
|
5349
|
-
|
|
5350
|
-
|
|
5679
|
+
.omniscribe_chat-character-count {
|
|
5680
|
+
font-size: 12px;
|
|
5681
|
+
color: var(--text-secondary, #666);
|
|
5682
|
+
margin-top: 6px;
|
|
5683
|
+
text-align: right;
|
|
5351
5684
|
}
|
|
5352
|
-
|
|
5353
|
-
|
|
5685
|
+
.omniscribe_config-content {
|
|
5686
|
+
width: 650px;
|
|
5687
|
+
max-height: 590px;
|
|
5688
|
+
opacity: 1;
|
|
5689
|
+
background-color: var(--omniscribe-surface, #ffffff);
|
|
5354
5690
|
display: flex;
|
|
5355
5691
|
flex-direction: column;
|
|
5356
|
-
|
|
5357
|
-
}
|
|
5358
|
-
|
|
5359
|
-
.omniscribe_app-skeleton-suggestion {
|
|
5360
|
-
height: 25px;
|
|
5361
|
-
border-radius: 99999px;
|
|
5362
|
-
}
|
|
5363
|
-
|
|
5364
|
-
.omniscribe_app-skeleton-suggestion--long {
|
|
5365
|
-
width: 320px;
|
|
5366
|
-
}
|
|
5367
|
-
|
|
5368
|
-
.omniscribe_app-skeleton-suggestion--longer {
|
|
5369
|
-
width: 380px;
|
|
5692
|
+
box-sizing: border-box;
|
|
5370
5693
|
}
|
|
5371
5694
|
|
|
5372
|
-
.
|
|
5373
|
-
|
|
5695
|
+
.omniscribe_config-list {
|
|
5696
|
+
display: flex;
|
|
5697
|
+
flex-direction: column;
|
|
5698
|
+
width: 100%;
|
|
5699
|
+
height: 100%;
|
|
5700
|
+
flex: 1;
|
|
5374
5701
|
}
|
|
5375
5702
|
|
|
5376
|
-
|
|
5377
|
-
|
|
5703
|
+
.omniscribe_config-item {
|
|
5704
|
+
width: 100%;
|
|
5705
|
+
height: 75px;
|
|
5378
5706
|
display: flex;
|
|
5707
|
+
justify-content: space-between;
|
|
5379
5708
|
align-items: center;
|
|
5380
|
-
|
|
5381
|
-
padding: 10px 16px;
|
|
5382
|
-
|
|
5383
|
-
|
|
5384
|
-
|
|
5385
|
-
.omniscribe_app-skeleton-transcribe-btn {
|
|
5386
|
-
width: 140px;
|
|
5387
|
-
height: 40px;
|
|
5388
|
-
border-radius: 99999px;
|
|
5709
|
+
opacity: 1;
|
|
5710
|
+
padding: 10px 22px 10px 16px;
|
|
5711
|
+
cursor: pointer;
|
|
5712
|
+
transition: background-color 0.2s ease;
|
|
5713
|
+
box-sizing: border-box;
|
|
5389
5714
|
flex-shrink: 0;
|
|
5390
5715
|
}
|
|
5391
5716
|
|
|
5392
|
-
.
|
|
5393
|
-
|
|
5394
|
-
height: 40px;
|
|
5395
|
-
border-radius: 99999px;
|
|
5717
|
+
.omniscribe_config-item:hover {
|
|
5718
|
+
background-color: var(--omniscribe-surface-alt, #f9fafb);
|
|
5396
5719
|
}
|
|
5397
|
-
/* Insertion Preview Modal — ported from the demo's .sugg-* styles
|
|
5398
|
-
(dev-tools/demo/src/style.css:715-891). Uses BEM-style naming under
|
|
5399
|
-
omniscribe_insertion-preview to stay scoped inside the SDK shadow DOM.
|
|
5400
|
-
|
|
5401
|
-
Theming hooks (set on the `<sofia-sdk>` element, they cross the shadow
|
|
5402
|
-
boundary; classes don't):
|
|
5403
5720
|
|
|
5404
|
-
|
|
5405
|
-
|
|
5406
|
-
|
|
5407
|
-
--omniscribe-insertion-preview-primary-text text color sitting on primary-soft
|
|
5408
|
-
--omniscribe-insertion-preview-accent attention color (gaps)
|
|
5409
|
-
--omniscribe-insertion-preview-accent-soft soft pill background using accent
|
|
5410
|
-
--omniscribe-insertion-preview-accent-bg gap-section background
|
|
5411
|
-
--omniscribe-insertion-preview-text primary text
|
|
5412
|
-
--omniscribe-insertion-preview-text-muted secondary text / chrome
|
|
5413
|
-
--omniscribe-insertion-preview-border panel + group border
|
|
5414
|
-
--omniscribe-insertion-preview-border-soft in-panel separators
|
|
5415
|
-
--omniscribe-insertion-preview-input-border form-control border
|
|
5416
|
-
--omniscribe-insertion-preview-checkbox-border unchecked checkbox stroke
|
|
5417
|
-
--omniscribe-insertion-preview-surface panel background
|
|
5418
|
-
--omniscribe-insertion-preview-surface-alt header / footer / hover background
|
|
5419
|
-
|
|
5420
|
-
Defaults cascade THROUGH the main SDK tokens (`--omniscribe-*`) before
|
|
5421
|
-
falling back to a hard-coded literal. So:
|
|
5422
|
-
|
|
5423
|
-
1. If the host sets `--omniscribe-insertion-preview-primary` →
|
|
5424
|
-
only the modal picks it up (per-surface theming).
|
|
5425
|
-
2. Else if the host sets `--omniscribe-primary` (the chat-widget
|
|
5426
|
-
token) → BOTH chat and modal share it (unified theme — the
|
|
5427
|
-
out-of-the-box experience).
|
|
5428
|
-
3. Else → falls back to the hard-coded SDK default (Sofia blue),
|
|
5429
|
-
matching the chat widget's stock look.
|
|
5430
|
-
|
|
5431
|
-
Tokens without a chat-widget counterpart (accent / text-muted /
|
|
5432
|
-
border-soft / surface-alt etc.) keep their own defaults. */
|
|
5433
|
-
|
|
5434
|
-
.omniscribe_insertion-preview__backdrop,
|
|
5435
|
-
.omniscribe_insertion-preview__panel {
|
|
5436
|
-
--_primary: var(
|
|
5437
|
-
--omniscribe-insertion-preview-primary,
|
|
5438
|
-
var(--omniscribe-primary, #105bdb)
|
|
5439
|
-
);
|
|
5440
|
-
--_primary-soft: var(
|
|
5441
|
-
--omniscribe-insertion-preview-primary-soft,
|
|
5442
|
-
var(--omniscribe-primary-soft, #e7effd)
|
|
5443
|
-
);
|
|
5444
|
-
--_primary-text: var(
|
|
5445
|
-
--omniscribe-insertion-preview-primary-text,
|
|
5446
|
-
var(--omniscribe-primary, #105bdb)
|
|
5447
|
-
);
|
|
5448
|
-
--_accent: var(--omniscribe-insertion-preview-accent, #c77700);
|
|
5449
|
-
--_accent-soft: var(--omniscribe-insertion-preview-accent-soft, #fdebc6);
|
|
5450
|
-
--_accent-bg: var(--omniscribe-insertion-preview-accent-bg, #fffbf1);
|
|
5451
|
-
--_text: var(
|
|
5452
|
-
--omniscribe-insertion-preview-text,
|
|
5453
|
-
var(--omniscribe-text, #1f2733)
|
|
5454
|
-
);
|
|
5455
|
-
--_text-muted: var(
|
|
5456
|
-
--omniscribe-insertion-preview-text-muted,
|
|
5457
|
-
var(--omniscribe-text-muted, #6a7385)
|
|
5458
|
-
);
|
|
5459
|
-
--_border: var(
|
|
5460
|
-
--omniscribe-insertion-preview-border,
|
|
5461
|
-
var(--omniscribe-border, #e5e7ec)
|
|
5462
|
-
);
|
|
5463
|
-
--_border-soft: var(
|
|
5464
|
-
--omniscribe-insertion-preview-border-soft,
|
|
5465
|
-
var(--omniscribe-border, #eef1f6)
|
|
5466
|
-
);
|
|
5467
|
-
--_input-border: var(
|
|
5468
|
-
--omniscribe-insertion-preview-input-border,
|
|
5469
|
-
var(--omniscribe-border, #d6dbe5)
|
|
5470
|
-
);
|
|
5471
|
-
--_checkbox-border: var(
|
|
5472
|
-
--omniscribe-insertion-preview-checkbox-border,
|
|
5473
|
-
#b7bfcc
|
|
5474
|
-
);
|
|
5475
|
-
--_surface: var(
|
|
5476
|
-
--omniscribe-insertion-preview-surface,
|
|
5477
|
-
var(--omniscribe-surface, #fff)
|
|
5478
|
-
);
|
|
5479
|
-
--_surface-alt: var(
|
|
5480
|
-
--omniscribe-insertion-preview-surface-alt,
|
|
5481
|
-
var(--omniscribe-surface-alt, #f6f8fb)
|
|
5482
|
-
);
|
|
5721
|
+
.omniscribe_config-item:focus {
|
|
5722
|
+
outline: none;
|
|
5723
|
+
background-color: var(--omniscribe-surface-alt, #f3f4f6);
|
|
5483
5724
|
}
|
|
5484
5725
|
|
|
5485
|
-
|
|
5486
|
-
|
|
5487
|
-
max-int z-index race, the modal wins. */
|
|
5488
|
-
.omniscribe_insertion-preview__backdrop {
|
|
5489
|
-
position: fixed;
|
|
5490
|
-
inset: 0;
|
|
5491
|
-
background: rgba(15, 27, 45, 0.42);
|
|
5492
|
-
backdrop-filter: blur(2px);
|
|
5493
|
-
-webkit-backdrop-filter: blur(2px);
|
|
5494
|
-
z-index: 2147483640;
|
|
5495
|
-
animation: omniscribe_insertion-preview__fade 0.18s ease-out;
|
|
5726
|
+
.omniscribe_config-item:last-child {
|
|
5727
|
+
border-bottom: none;
|
|
5496
5728
|
}
|
|
5497
|
-
|
|
5498
|
-
|
|
5499
|
-
|
|
5500
|
-
|
|
5501
|
-
|
|
5502
|
-
|
|
5503
|
-
|
|
5729
|
+
|
|
5730
|
+
.omniscribe_config-item-icon {
|
|
5731
|
+
display: flex;
|
|
5732
|
+
align-items: center;
|
|
5733
|
+
justify-content: center;
|
|
5734
|
+
width: 40px;
|
|
5735
|
+
height: 40px;
|
|
5504
5736
|
}
|
|
5505
5737
|
|
|
5506
|
-
|
|
5507
|
-
|
|
5508
|
-
|
|
5509
|
-
|
|
5510
|
-
|
|
5511
|
-
|
|
5512
|
-
left:
|
|
5513
|
-
|
|
5514
|
-
z-index: 2147483641;
|
|
5515
|
-
width: 680px;
|
|
5516
|
-
max-width: calc(
|
|
5517
|
-
100vw - var(--omniscribe-insertion-preview-reserve, 0px) - 32px
|
|
5518
|
-
);
|
|
5519
|
-
max-height: 84vh;
|
|
5520
|
-
background: var(--_surface);
|
|
5521
|
-
border: 1px solid var(--_border);
|
|
5522
|
-
border-radius: 14px;
|
|
5523
|
-
box-shadow: 0 24px 64px rgba(15, 27, 45, 0.18);
|
|
5738
|
+
.omniscribe_config-icon {
|
|
5739
|
+
color: var(--omniscribe-text-muted, #4a5364);
|
|
5740
|
+
}
|
|
5741
|
+
|
|
5742
|
+
.omniscribe_config-item-content {
|
|
5743
|
+
flex: 1;
|
|
5744
|
+
margin-left: 16px;
|
|
5745
|
+
margin-right: 16px;
|
|
5524
5746
|
display: flex;
|
|
5525
5747
|
flex-direction: column;
|
|
5526
|
-
|
|
5527
|
-
|
|
5528
|
-
font-family: 'Lato', sans-serif;
|
|
5529
|
-
color: var(--_text);
|
|
5748
|
+
justify-content: center;
|
|
5749
|
+
gap: 4px;
|
|
5530
5750
|
}
|
|
5531
5751
|
|
|
5532
|
-
|
|
5533
|
-
|
|
5534
|
-
|
|
5535
|
-
|
|
5536
|
-
|
|
5537
|
-
|
|
5538
|
-
|
|
5539
|
-
}
|
|
5752
|
+
.omniscribe_config-item-title {
|
|
5753
|
+
margin: 0;
|
|
5754
|
+
font-weight: 700;
|
|
5755
|
+
font-size: 14px;
|
|
5756
|
+
line-height: 16.8px;
|
|
5757
|
+
letter-spacing: 0.05px;
|
|
5758
|
+
color: var(--omniscribe-text, #252a32);
|
|
5540
5759
|
}
|
|
5541
|
-
|
|
5542
|
-
|
|
5543
|
-
|
|
5544
|
-
|
|
5545
|
-
|
|
5546
|
-
|
|
5547
|
-
|
|
5548
|
-
|
|
5549
|
-
}
|
|
5760
|
+
|
|
5761
|
+
.omniscribe_config-item-description {
|
|
5762
|
+
margin: 0;
|
|
5763
|
+
font-weight: 500;
|
|
5764
|
+
font-size: 14px;
|
|
5765
|
+
line-height: 16.8px;
|
|
5766
|
+
letter-spacing: 0.05px;
|
|
5767
|
+
color: var(--omniscribe-text-muted, #4a5364);
|
|
5550
5768
|
}
|
|
5551
5769
|
|
|
5552
|
-
.
|
|
5770
|
+
.omniscribe_config-item-arrow {
|
|
5553
5771
|
display: flex;
|
|
5554
5772
|
align-items: center;
|
|
5555
|
-
justify-content:
|
|
5556
|
-
|
|
5557
|
-
|
|
5558
|
-
background: var(--_surface-alt);
|
|
5773
|
+
justify-content: center;
|
|
5774
|
+
color: var(--omniscribe-text-muted, #9ca3af);
|
|
5775
|
+
flex-shrink: 0;
|
|
5559
5776
|
}
|
|
5560
|
-
|
|
5561
|
-
|
|
5562
|
-
|
|
5563
|
-
|
|
5777
|
+
|
|
5778
|
+
/* Sub-screen styles */
|
|
5779
|
+
.omniscribe_config-subscreen-header {
|
|
5780
|
+
display: flex;
|
|
5781
|
+
align-items: center;
|
|
5782
|
+
padding: 16px 16px 8px 16px;
|
|
5564
5783
|
}
|
|
5565
|
-
|
|
5566
|
-
|
|
5567
|
-
|
|
5568
|
-
|
|
5569
|
-
font-size: 18px;
|
|
5570
|
-
line-height: 1;
|
|
5571
|
-
padding: 2px 6px;
|
|
5572
|
-
border-radius: 4px;
|
|
5784
|
+
|
|
5785
|
+
.omniscribe_config-back-btn {
|
|
5786
|
+
background: none;
|
|
5787
|
+
border: none;
|
|
5573
5788
|
cursor: pointer;
|
|
5574
|
-
|
|
5575
|
-
|
|
5576
|
-
|
|
5577
|
-
|
|
5789
|
+
padding: 4px;
|
|
5790
|
+
border-radius: 4px;
|
|
5791
|
+
display: flex;
|
|
5792
|
+
align-items: center;
|
|
5793
|
+
justify-content: center;
|
|
5794
|
+
transition: background-color 0.2s ease;
|
|
5578
5795
|
}
|
|
5579
5796
|
|
|
5580
|
-
.
|
|
5797
|
+
.omniscribe_config-subscreen-title {
|
|
5581
5798
|
margin: 0;
|
|
5582
|
-
|
|
5583
|
-
font-
|
|
5584
|
-
color: var(--
|
|
5585
|
-
|
|
5799
|
+
font-size: 18px;
|
|
5800
|
+
font-weight: 500;
|
|
5801
|
+
color: var(--omniscribe-text, #252a32);
|
|
5802
|
+
line-height: 21.6px;
|
|
5586
5803
|
}
|
|
5587
5804
|
|
|
5588
|
-
.
|
|
5805
|
+
.omniscribe_config-subscreen-content {
|
|
5806
|
+
flex: 1;
|
|
5807
|
+
display: flex;
|
|
5808
|
+
flex-direction: column;
|
|
5809
|
+
padding: 16px;
|
|
5810
|
+
min-height: 0; /* Permite que los hijos se compriman */
|
|
5811
|
+
box-sizing: border-box; /* Incluye padding en el cálculo */
|
|
5812
|
+
}
|
|
5813
|
+
|
|
5814
|
+
.omniscribe_config-subscreen-content.no-border {
|
|
5815
|
+
/* no-border variant */
|
|
5816
|
+
}
|
|
5817
|
+
|
|
5818
|
+
.omniscribe_config-subscreen-content-template {
|
|
5589
5819
|
flex: 1;
|
|
5590
5820
|
overflow-y: auto;
|
|
5591
|
-
padding:
|
|
5821
|
+
padding-bottom: 50px;
|
|
5592
5822
|
}
|
|
5593
5823
|
|
|
5594
|
-
.
|
|
5595
|
-
|
|
5824
|
+
.omniscribe_config-section-label {
|
|
5825
|
+
margin: 0;
|
|
5826
|
+
font-size: 14px;
|
|
5827
|
+
font-weight: 600;
|
|
5828
|
+
color: var(--omniscribe-text, #374151);
|
|
5829
|
+
line-height: 1.4;
|
|
5596
5830
|
}
|
|
5597
|
-
|
|
5598
|
-
|
|
5831
|
+
|
|
5832
|
+
.omniscribe_config-language-section {
|
|
5833
|
+
display: flex;
|
|
5834
|
+
flex-direction: column;
|
|
5599
5835
|
}
|
|
5600
|
-
|
|
5836
|
+
|
|
5837
|
+
/* Audio-environment (VAD) section: titled control with helper text below. */
|
|
5838
|
+
.omniscribe_config-audio-env {
|
|
5601
5839
|
display: flex;
|
|
5602
|
-
|
|
5603
|
-
|
|
5604
|
-
|
|
5840
|
+
flex-direction: column;
|
|
5841
|
+
gap: 8px;
|
|
5842
|
+
margin-top: 16px;
|
|
5605
5843
|
}
|
|
5606
|
-
|
|
5607
|
-
|
|
5608
|
-
|
|
5609
|
-
|
|
5610
|
-
|
|
5611
|
-
|
|
5612
|
-
padding: 0;
|
|
5844
|
+
|
|
5845
|
+
.omniscribe_config-language-section-title {
|
|
5846
|
+
font-size: 16px;
|
|
5847
|
+
font-weight: 600;
|
|
5848
|
+
color: var(--omniscribe-text, #374151);
|
|
5849
|
+
margin-bottom: 8px;
|
|
5613
5850
|
}
|
|
5614
|
-
|
|
5615
|
-
|
|
5616
|
-
|
|
5617
|
-
|
|
5618
|
-
|
|
5619
|
-
|
|
5851
|
+
|
|
5852
|
+
.omniscribe_config-subscreen-description,
|
|
5853
|
+
.omniscribe_config-subscreen-subdescription {
|
|
5854
|
+
margin: 0 0 0 0;
|
|
5855
|
+
font-size: 14px;
|
|
5856
|
+
line-height: 18px;
|
|
5857
|
+
color: var(--omniscribe-text, #13161a);
|
|
5858
|
+
font-weight: 400;
|
|
5620
5859
|
}
|
|
5621
|
-
|
|
5622
|
-
|
|
5623
|
-
|
|
5624
|
-
|
|
5625
|
-
|
|
5626
|
-
|
|
5627
|
-
|
|
5860
|
+
|
|
5861
|
+
.omniscribe_config-subscreen-subdescription {
|
|
5862
|
+
font-style: italic;
|
|
5863
|
+
}
|
|
5864
|
+
/* Dictionary Options View Styles */
|
|
5865
|
+
.omniscribe_config-dictionary-section {
|
|
5866
|
+
display: flex;
|
|
5867
|
+
flex-direction: column;
|
|
5868
|
+
gap: 24px;
|
|
5628
5869
|
}
|
|
5629
5870
|
|
|
5630
|
-
.
|
|
5631
|
-
display:
|
|
5632
|
-
|
|
5633
|
-
gap:
|
|
5634
|
-
|
|
5871
|
+
.omniscribe_config-dictionary-add-section {
|
|
5872
|
+
display: flex;
|
|
5873
|
+
flex-direction: column;
|
|
5874
|
+
gap: 16px;
|
|
5875
|
+
}
|
|
5876
|
+
|
|
5877
|
+
.omniscribe_config-dictionary-input-row {
|
|
5878
|
+
display: flex;
|
|
5879
|
+
gap: 12px;
|
|
5635
5880
|
align-items: flex-start;
|
|
5636
|
-
cursor: pointer;
|
|
5637
|
-
border-radius: 6px;
|
|
5638
5881
|
}
|
|
5639
|
-
|
|
5640
|
-
|
|
5882
|
+
|
|
5883
|
+
.omniscribe_config-dictionary-input {
|
|
5884
|
+
height: 32px;
|
|
5885
|
+
border: 1px solid var(--omniscribe-border, #e5e8eb) !important;
|
|
5886
|
+
border-radius: 8px !important;
|
|
5887
|
+
padding: 0 12px !important;
|
|
5888
|
+
font-size: 14px !important;
|
|
5889
|
+
line-height: 1.4 !important;
|
|
5890
|
+
background-color: var(--omniscribe-surface, #ffffff) !important;
|
|
5891
|
+
transition:
|
|
5892
|
+
border-color 0.2s ease,
|
|
5893
|
+
box-shadow 0.2s ease !important;
|
|
5641
5894
|
}
|
|
5642
|
-
|
|
5643
|
-
|
|
5644
|
-
|
|
5645
|
-
|
|
5646
|
-
|
|
5647
|
-
|
|
5648
|
-
|
|
5649
|
-
|
|
5895
|
+
|
|
5896
|
+
.omniscribe_config-dictionary-input:focus {
|
|
5897
|
+
outline: none !important;
|
|
5898
|
+
border-color: #4f46e5 !important;
|
|
5899
|
+
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1) !important;
|
|
5900
|
+
}
|
|
5901
|
+
|
|
5902
|
+
.omniscribe_config-dictionary-input::placeholder {
|
|
5903
|
+
color: var(--omniscribe-text-muted, #9ca3af) !important;
|
|
5904
|
+
font-size: 14px !important;
|
|
5905
|
+
}
|
|
5906
|
+
|
|
5907
|
+
.omniscribe_config-dictionary-input.error {
|
|
5908
|
+
border-color: #dc3545 !important;
|
|
5909
|
+
background-color: #fff5f5 !important;
|
|
5910
|
+
}
|
|
5911
|
+
|
|
5912
|
+
.omniscribe_config-dictionary-input.error:focus {
|
|
5913
|
+
border-color: #dc3545 !important;
|
|
5914
|
+
box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1) !important;
|
|
5915
|
+
}
|
|
5916
|
+
|
|
5917
|
+
.omniscribe_config-dictionary-add-btn {
|
|
5918
|
+
width: 32px;
|
|
5919
|
+
height: 32px;
|
|
5920
|
+
padding: 0;
|
|
5921
|
+
display: flex;
|
|
5922
|
+
align-items: center;
|
|
5923
|
+
justify-content: center;
|
|
5924
|
+
background-color: var(--primary);
|
|
5925
|
+
border: 1px solid var(--primary);
|
|
5926
|
+
border-radius: 8px;
|
|
5927
|
+
color: var(--primary-foreground);
|
|
5650
5928
|
cursor: pointer;
|
|
5929
|
+
transition: all 0.2s ease;
|
|
5930
|
+
margin-top: 0;
|
|
5931
|
+
font-size: 0;
|
|
5932
|
+
}
|
|
5933
|
+
|
|
5934
|
+
.omniscribe_config-dictionary-add-btn:hover:not(:disabled) {
|
|
5935
|
+
background-color: color-mix(in oklab, var(--primary) 90%, transparent);
|
|
5936
|
+
border-color: color-mix(in oklab, var(--primary) 90%, transparent);
|
|
5651
5937
|
}
|
|
5652
|
-
|
|
5653
|
-
|
|
5654
|
-
|
|
5655
|
-
|
|
5656
|
-
|
|
5657
|
-
|
|
5938
|
+
|
|
5939
|
+
.omniscribe_config-dictionary-add-btn:disabled {
|
|
5940
|
+
background-color: #e5e8eb;
|
|
5941
|
+
border-color: var(--omniscribe-border, #e5e8eb);
|
|
5942
|
+
color: var(--omniscribe-text-muted, #9ca3af);
|
|
5943
|
+
cursor: not-allowed;
|
|
5944
|
+
transform: none;
|
|
5945
|
+
box-shadow: none;
|
|
5658
5946
|
}
|
|
5659
|
-
|
|
5660
|
-
|
|
5947
|
+
|
|
5948
|
+
.omniscribe_config-dictionary-list {
|
|
5661
5949
|
display: flex;
|
|
5950
|
+
padding-top: 16px;
|
|
5662
5951
|
flex-direction: column;
|
|
5663
|
-
gap:
|
|
5952
|
+
gap: 8px;
|
|
5953
|
+
max-height: 410px;
|
|
5954
|
+
overflow-y: auto;
|
|
5955
|
+
margin-top: 4px;
|
|
5664
5956
|
}
|
|
5665
|
-
|
|
5666
|
-
|
|
5667
|
-
|
|
5668
|
-
|
|
5669
|
-
|
|
5957
|
+
|
|
5958
|
+
.omniscribe_config-dictionary-row {
|
|
5959
|
+
display: flex;
|
|
5960
|
+
align-items: center;
|
|
5961
|
+
gap: 12px;
|
|
5962
|
+
padding: 12px;
|
|
5963
|
+
background-color: var(--omniscribe-surface-alt, #f9fafb);
|
|
5964
|
+
border: 1px solid var(--omniscribe-border, #e5e8eb);
|
|
5965
|
+
border-radius: 8px;
|
|
5966
|
+
transition: all 0.2s ease;
|
|
5670
5967
|
}
|
|
5671
|
-
|
|
5672
|
-
|
|
5673
|
-
color: var(--
|
|
5968
|
+
|
|
5969
|
+
.omniscribe_config-dictionary-row:hover {
|
|
5970
|
+
background-color: var(--omniscribe-surface-alt, #f3f4f6);
|
|
5971
|
+
border-color: var(--omniscribe-border, #d1d5db);
|
|
5972
|
+
}
|
|
5973
|
+
|
|
5974
|
+
.omniscribe_config-dictionary-cell {
|
|
5975
|
+
flex: 1;
|
|
5976
|
+
font-size: 14px;
|
|
5977
|
+
line-height: 20px;
|
|
5978
|
+
color: var(--omniscribe-text, #374151);
|
|
5674
5979
|
word-break: break-word;
|
|
5980
|
+
font-weight: 500;
|
|
5675
5981
|
}
|
|
5676
|
-
|
|
5982
|
+
|
|
5983
|
+
.omniscribe_config-dictionary-arrow {
|
|
5984
|
+
color: var(--omniscribe-text-muted, #9ca3af);
|
|
5985
|
+
font-size: 16px;
|
|
5986
|
+
font-weight: 600;
|
|
5987
|
+
flex-shrink: 0;
|
|
5988
|
+
margin: 0 4px;
|
|
5989
|
+
}
|
|
5990
|
+
|
|
5991
|
+
.omniscribe_config-dictionary-delete-btn {
|
|
5992
|
+
background: none;
|
|
5993
|
+
border: none;
|
|
5994
|
+
cursor: pointer;
|
|
5995
|
+
padding: 6px;
|
|
5996
|
+
border-radius: 6px;
|
|
5677
5997
|
display: flex;
|
|
5678
5998
|
align-items: center;
|
|
5679
|
-
|
|
5680
|
-
|
|
5999
|
+
justify-content: center;
|
|
6000
|
+
color: var(--omniscribe-text-muted, #6b7280);
|
|
6001
|
+
transition: all 0.2s ease;
|
|
6002
|
+
flex-shrink: 0;
|
|
5681
6003
|
}
|
|
5682
|
-
|
|
5683
|
-
|
|
6004
|
+
|
|
6005
|
+
.omniscribe_config-dictionary-delete-btn:hover {
|
|
6006
|
+
background-color: #fee2e2;
|
|
6007
|
+
color: #dc2626;
|
|
6008
|
+
transform: scale(1.05);
|
|
5684
6009
|
}
|
|
5685
6010
|
|
|
5686
|
-
.
|
|
5687
|
-
|
|
6011
|
+
.omniscribe_config-dictionary-empty {
|
|
6012
|
+
padding: 40px 16px;
|
|
6013
|
+
margin-top: 16px;
|
|
6014
|
+
text-align: center;
|
|
6015
|
+
color: var(--omniscribe-text-muted, #6b7280);
|
|
6016
|
+
font-size: 14px;
|
|
6017
|
+
line-height: 20px;
|
|
6018
|
+
background-color: var(--omniscribe-surface-alt, #f9fafb);
|
|
6019
|
+
border: 2px dashed var(--omniscribe-border, #e5e8eb);
|
|
6020
|
+
border-radius: 12px;
|
|
6021
|
+
font-style: italic;
|
|
6022
|
+
}
|
|
6023
|
+
|
|
6024
|
+
/* Template specific styles */
|
|
6025
|
+
|
|
6026
|
+
/* General prompt section */
|
|
6027
|
+
.omniscribe_template-general-prompt-section {
|
|
5688
6028
|
display: flex;
|
|
5689
6029
|
flex-direction: column;
|
|
5690
|
-
gap:
|
|
6030
|
+
gap: 8px;
|
|
6031
|
+
padding-bottom: 8px;
|
|
5691
6032
|
}
|
|
5692
|
-
|
|
5693
|
-
|
|
5694
|
-
|
|
5695
|
-
|
|
5696
|
-
|
|
6033
|
+
|
|
6034
|
+
.omniscribe_template-section-title {
|
|
6035
|
+
margin: 0;
|
|
6036
|
+
font-size: 14px;
|
|
6037
|
+
font-weight: 600;
|
|
6038
|
+
color: var(--omniscribe-text, #374151);
|
|
6039
|
+
line-height: 1.4;
|
|
5697
6040
|
}
|
|
5698
|
-
|
|
5699
|
-
|
|
5700
|
-
|
|
6041
|
+
|
|
6042
|
+
.omniscribe_template-section-subtitle {
|
|
6043
|
+
margin: 0;
|
|
6044
|
+
font-size: 13px;
|
|
6045
|
+
font-weight: 400;
|
|
6046
|
+
color: var(--omniscribe-text-muted, #6b7280);
|
|
6047
|
+
line-height: 1.4;
|
|
5701
6048
|
}
|
|
5702
6049
|
|
|
5703
|
-
.
|
|
5704
|
-
font: inherit;
|
|
5705
|
-
font-size: 12px;
|
|
5706
|
-
color: var(--_text);
|
|
5707
|
-
border: 1px solid var(--_input-border);
|
|
5708
|
-
border-radius: 4px;
|
|
5709
|
-
padding: 4px 8px;
|
|
5710
|
-
background: var(--_surface);
|
|
6050
|
+
.omniscribe_template-general-prompt-textarea {
|
|
5711
6051
|
width: 100%;
|
|
6052
|
+
min-height: 80px;
|
|
6053
|
+
max-height: 200px;
|
|
6054
|
+
padding: 12px;
|
|
6055
|
+
border: 1px solid var(--omniscribe-border, #e5e7ec);
|
|
6056
|
+
border-radius: 8px;
|
|
6057
|
+
font-size: 14px;
|
|
6058
|
+
font-family: inherit;
|
|
6059
|
+
line-height: 1.5;
|
|
6060
|
+
color: var(--omniscribe-text, #374151);
|
|
6061
|
+
background-color: var(--omniscribe-surface, white);
|
|
6062
|
+
resize: vertical;
|
|
5712
6063
|
box-sizing: border-box;
|
|
6064
|
+
outline: none;
|
|
6065
|
+
transition: border-color 0.15s ease;
|
|
5713
6066
|
}
|
|
5714
|
-
|
|
5715
|
-
|
|
5716
|
-
|
|
6067
|
+
|
|
6068
|
+
.omniscribe_template-general-prompt-textarea::placeholder {
|
|
6069
|
+
color: var(--omniscribe-text-muted, #9ca3af);
|
|
6070
|
+
font-style: italic;
|
|
5717
6071
|
}
|
|
5718
|
-
|
|
5719
|
-
|
|
5720
|
-
|
|
5721
|
-
|
|
5722
|
-
border: 0;
|
|
5723
|
-
padding: 0;
|
|
5724
|
-
background: transparent;
|
|
6072
|
+
|
|
6073
|
+
.omniscribe_template-general-prompt-textarea:focus {
|
|
6074
|
+
border-color: #3b5edb;
|
|
6075
|
+
box-shadow: 0 0 0 3px rgba(59, 94, 219, 0.1);
|
|
5725
6076
|
}
|
|
5726
|
-
|
|
6077
|
+
|
|
6078
|
+
/* Fields section */
|
|
6079
|
+
.omniscribe_template-fields-section {
|
|
5727
6080
|
display: flex;
|
|
5728
|
-
flex-
|
|
5729
|
-
gap:
|
|
5730
|
-
|
|
5731
|
-
padding: 0;
|
|
5732
|
-
background: transparent;
|
|
5733
|
-
}
|
|
5734
|
-
.omniscribe_insertion-preview__edit__chip {
|
|
5735
|
-
display: inline-flex;
|
|
5736
|
-
align-items: center;
|
|
5737
|
-
gap: 4px;
|
|
5738
|
-
font-size: 11px;
|
|
5739
|
-
border: 1px solid var(--_input-border);
|
|
5740
|
-
border-radius: 999px;
|
|
5741
|
-
padding: 2px 8px;
|
|
5742
|
-
cursor: pointer;
|
|
5743
|
-
}
|
|
5744
|
-
.omniscribe_insertion-preview__edit__chip--on {
|
|
5745
|
-
background: var(--_primary);
|
|
5746
|
-
color: #fff;
|
|
5747
|
-
border-color: var(--_primary);
|
|
6081
|
+
flex-direction: column;
|
|
6082
|
+
gap: 8px;
|
|
6083
|
+
padding-top: 8px;
|
|
5748
6084
|
}
|
|
5749
|
-
|
|
5750
|
-
|
|
6085
|
+
|
|
6086
|
+
.omniscribe_template-field {
|
|
6087
|
+
background: var(--omniscribe-surface, white);
|
|
6088
|
+
border-bottom: 1px solid var(--omniscribe-border, #e1e8ed);
|
|
6089
|
+
margin-bottom: 0;
|
|
5751
6090
|
}
|
|
5752
6091
|
|
|
5753
|
-
|
|
5754
|
-
|
|
5755
|
-
position: relative;
|
|
5756
|
-
width: 100%;
|
|
6092
|
+
.omniscribe_template-field:last-child {
|
|
6093
|
+
border-bottom: none;
|
|
5757
6094
|
}
|
|
5758
|
-
|
|
6095
|
+
|
|
6096
|
+
.omniscribe_template-field-header {
|
|
5759
6097
|
display: flex;
|
|
5760
6098
|
align-items: center;
|
|
5761
|
-
|
|
5762
|
-
|
|
5763
|
-
font: inherit;
|
|
5764
|
-
font-size: 12px;
|
|
5765
|
-
border: 1px solid var(--_input-border);
|
|
5766
|
-
border-radius: 4px;
|
|
5767
|
-
padding: 4px 8px;
|
|
5768
|
-
background: var(--_surface);
|
|
5769
|
-
cursor: pointer;
|
|
5770
|
-
text-align: left;
|
|
5771
|
-
}
|
|
5772
|
-
.omniscribe_insertion-preview__searchable-select__chevron {
|
|
5773
|
-
color: var(--_text-muted);
|
|
6099
|
+
padding: 12px 0;
|
|
6100
|
+
background: var(--omniscribe-surface, #ffffff);
|
|
5774
6101
|
}
|
|
5775
|
-
|
|
5776
|
-
|
|
5777
|
-
|
|
5778
|
-
|
|
5779
|
-
|
|
5780
|
-
|
|
5781
|
-
|
|
5782
|
-
border: 1px solid var(--_input-border);
|
|
5783
|
-
border-radius: 4px;
|
|
5784
|
-
box-shadow: 0 8px 24px rgba(15, 27, 45, 0.12);
|
|
5785
|
-
max-height: 200px;
|
|
6102
|
+
|
|
6103
|
+
.omniscribe_template-field-checkbox {
|
|
6104
|
+
background: none;
|
|
6105
|
+
border: none;
|
|
6106
|
+
padding: 0;
|
|
6107
|
+
margin-right: 12px;
|
|
6108
|
+
cursor: pointer;
|
|
5786
6109
|
display: flex;
|
|
5787
|
-
|
|
5788
|
-
|
|
5789
|
-
|
|
5790
|
-
font: inherit;
|
|
5791
|
-
font-size: 12px;
|
|
5792
|
-
border: 0;
|
|
5793
|
-
border-bottom: 1px solid var(--_border-soft);
|
|
5794
|
-
padding: 6px 8px;
|
|
5795
|
-
outline: none;
|
|
6110
|
+
align-items: center;
|
|
6111
|
+
justify-content: center;
|
|
6112
|
+
flex-shrink: 0;
|
|
5796
6113
|
}
|
|
5797
|
-
|
|
5798
|
-
|
|
5799
|
-
|
|
5800
|
-
|
|
5801
|
-
|
|
6114
|
+
|
|
6115
|
+
.omniscribe_template-field-label {
|
|
6116
|
+
flex: 1;
|
|
6117
|
+
font-size: 14px;
|
|
6118
|
+
font-weight: 500;
|
|
6119
|
+
color: var(--omniscribe-text, #2c3e50);
|
|
5802
6120
|
}
|
|
5803
|
-
|
|
5804
|
-
|
|
5805
|
-
|
|
6121
|
+
|
|
6122
|
+
.omniscribe_template-field-prompt-btn {
|
|
6123
|
+
background: none;
|
|
6124
|
+
border: none;
|
|
6125
|
+
padding: 4px;
|
|
5806
6126
|
cursor: pointer;
|
|
6127
|
+
display: flex;
|
|
6128
|
+
align-items: center;
|
|
6129
|
+
justify-content: center;
|
|
6130
|
+
border-radius: 4px;
|
|
6131
|
+
transition: background-color 0.2s ease;
|
|
6132
|
+
flex-shrink: 0;
|
|
5807
6133
|
}
|
|
5808
|
-
|
|
5809
|
-
.
|
|
5810
|
-
background: var(--
|
|
5811
|
-
}
|
|
5812
|
-
.omniscribe_insertion-preview__searchable-select__option--custom {
|
|
5813
|
-
color: var(--_text-muted);
|
|
5814
|
-
font-style: italic;
|
|
6134
|
+
|
|
6135
|
+
.omniscribe_template-field-prompt-btn:hover {
|
|
6136
|
+
background-color: var(--omniscribe-surface-alt, #f3f4f6);
|
|
5815
6137
|
}
|
|
5816
6138
|
|
|
5817
|
-
.
|
|
5818
|
-
|
|
6139
|
+
.omniscribe_template-field-content {
|
|
6140
|
+
padding: 0 0 12px 34px;
|
|
6141
|
+
background: var(--omniscribe-surface, white);
|
|
5819
6142
|
}
|
|
5820
|
-
|
|
5821
|
-
|
|
5822
|
-
|
|
5823
|
-
|
|
5824
|
-
|
|
5825
|
-
padding:
|
|
5826
|
-
border
|
|
5827
|
-
|
|
5828
|
-
|
|
6143
|
+
|
|
6144
|
+
.omniscribe_template-textarea {
|
|
6145
|
+
width: 100%;
|
|
6146
|
+
min-height: 80px;
|
|
6147
|
+
max-height: 300px;
|
|
6148
|
+
padding: 12px;
|
|
6149
|
+
border: 1px solid var(--omniscribe-border, #e1e8ed);
|
|
6150
|
+
border-radius: 6px;
|
|
6151
|
+
font-size: 14px;
|
|
6152
|
+
font-family: inherit;
|
|
6153
|
+
resize: vertical;
|
|
6154
|
+
background: var(--omniscribe-surface, white);
|
|
6155
|
+
box-sizing: border-box;
|
|
6156
|
+
overflow-y: auto;
|
|
5829
6157
|
}
|
|
5830
6158
|
|
|
5831
|
-
|
|
5832
|
-
|
|
5833
|
-
|
|
5834
|
-
|
|
6159
|
+
.omniscribe_template-textarea:focus {
|
|
6160
|
+
outline: none;
|
|
6161
|
+
border-color: #3b5edb;
|
|
6162
|
+
box-shadow: 0 0 0 3px rgba(59, 94, 219, 0.1);
|
|
5835
6163
|
}
|
|
5836
|
-
|
|
5837
|
-
|
|
6164
|
+
|
|
6165
|
+
.omniscribe_template-character-count {
|
|
6166
|
+
margin-top: 8px;
|
|
6167
|
+
font-size: 12px;
|
|
6168
|
+
color: var(--omniscribe-text-muted, #95a5a6);
|
|
6169
|
+
display: flex;
|
|
5838
6170
|
}
|
|
5839
|
-
|
|
5840
|
-
|
|
5841
|
-
|
|
6171
|
+
|
|
6172
|
+
/* Template fields container */
|
|
6173
|
+
.omniscribe_template-fields {
|
|
6174
|
+
display: flex;
|
|
6175
|
+
flex-direction: column;
|
|
6176
|
+
background: var(--omniscribe-surface, white);
|
|
5842
6177
|
}
|
|
5843
|
-
|
|
5844
|
-
|
|
5845
|
-
|
|
6178
|
+
|
|
6179
|
+
/* Improved scrollbar for template fields */
|
|
6180
|
+
.omniscribe_template-fields::-webkit-scrollbar {
|
|
6181
|
+
width: 6px;
|
|
5846
6182
|
}
|
|
5847
|
-
|
|
5848
|
-
|
|
6183
|
+
|
|
6184
|
+
.omniscribe_template-fields::-webkit-scrollbar-track {
|
|
6185
|
+
background: #f1f1f1;
|
|
6186
|
+
border-radius: 3px;
|
|
5849
6187
|
}
|
|
5850
|
-
|
|
5851
|
-
|
|
5852
|
-
|
|
6188
|
+
|
|
6189
|
+
.omniscribe_template-fields::-webkit-scrollbar-thumb {
|
|
6190
|
+
background: #c1c1c1;
|
|
6191
|
+
border-radius: 3px;
|
|
5853
6192
|
}
|
|
5854
|
-
|
|
5855
|
-
|
|
6193
|
+
|
|
6194
|
+
.omniscribe_template-fields::-webkit-scrollbar-thumb:hover {
|
|
6195
|
+
background: #a8a8a8;
|
|
5856
6196
|
}
|
|
5857
6197
|
|
|
5858
|
-
.
|
|
5859
|
-
|
|
5860
|
-
|
|
5861
|
-
|
|
5862
|
-
|
|
5863
|
-
|
|
5864
|
-
|
|
6198
|
+
.omniscribe_config-version-section {
|
|
6199
|
+
background: var(--omniscribe-surface-alt, #f6f7f9);
|
|
6200
|
+
color: var(--omniscribe-text-muted, #4a5364);
|
|
6201
|
+
padding: 8px 24px;
|
|
6202
|
+
font-weight: 700;
|
|
6203
|
+
line-height: 16.8px;
|
|
6204
|
+
font-size: 14px;
|
|
6205
|
+
position: absolute;
|
|
6206
|
+
bottom: 0;
|
|
6207
|
+
left: 0;
|
|
6208
|
+
right: 0;
|
|
6209
|
+
border-bottom-left-radius: 12px;
|
|
6210
|
+
border-bottom-right-radius: 12px;
|
|
5865
6211
|
}
|
|
5866
|
-
.
|
|
5867
|
-
|
|
5868
|
-
|
|
5869
|
-
|
|
5870
|
-
|
|
5871
|
-
|
|
5872
|
-
border-radius: 6px;
|
|
5873
|
-
padding: 6px 14px;
|
|
5874
|
-
cursor: pointer;
|
|
5875
|
-
color: var(--_text);
|
|
6212
|
+
.omniscribe_chat-config {
|
|
6213
|
+
display: flex;
|
|
6214
|
+
flex-direction: column;
|
|
6215
|
+
gap: 24px;
|
|
6216
|
+
min-height: 0; /* Permite que los hijos controlen su altura */
|
|
6217
|
+
flex: 1; /* Toma el espacio disponible */
|
|
5876
6218
|
}
|
|
5877
|
-
|
|
5878
|
-
|
|
5879
|
-
|
|
5880
|
-
|
|
6219
|
+
|
|
6220
|
+
/* Espaciado específico para el separador en el contexto de chat */
|
|
6221
|
+
.omniscribe_chat-config .omniscribe_separator {
|
|
6222
|
+
margin: 8px 0; /* Margen vertical consistente */
|
|
5881
6223
|
}
|
|
5882
|
-
|
|
5883
|
-
|
|
5884
|
-
|
|
5885
|
-
|
|
6224
|
+
|
|
6225
|
+
.omniscribe_chat-prompt-container {
|
|
6226
|
+
display: flex;
|
|
6227
|
+
flex-direction: column;
|
|
6228
|
+
gap: 8px;
|
|
6229
|
+
margin-right: 16px;
|
|
5886
6230
|
}
|
|
5887
6231
|
|
|
5888
|
-
|
|
5889
|
-
|
|
5890
|
-
|
|
5891
|
-
|
|
5892
|
-
|
|
5893
|
-
|
|
5894
|
-
|
|
5895
|
-
|
|
5896
|
-
|
|
6232
|
+
.omniscribe_chat-prompt-textarea {
|
|
6233
|
+
width: 100%;
|
|
6234
|
+
height: 74px;
|
|
6235
|
+
padding: 8px;
|
|
6236
|
+
border: 1px solid var(--omniscribe-border, #e5e7ec);
|
|
6237
|
+
border-radius: 8px;
|
|
6238
|
+
font-size: 14px;
|
|
6239
|
+
font-family: inherit;
|
|
6240
|
+
line-height: 1.5;
|
|
6241
|
+
color: var(--omniscribe-text, #374151);
|
|
6242
|
+
background-color: var(--omniscribe-surface, white);
|
|
6243
|
+
resize: none;
|
|
6244
|
+
outline: none;
|
|
6245
|
+
transition: border-color 0.15s ease;
|
|
5897
6246
|
}
|
|
5898
|
-
|
|
5899
|
-
|
|
6247
|
+
|
|
6248
|
+
.omniscribe_chat-prompt-textarea::placeholder {
|
|
6249
|
+
color: var(--omniscribe-text-muted, #9ca3af);
|
|
6250
|
+
font-style: italic;
|
|
5900
6251
|
}
|
|
5901
|
-
|
|
5902
|
-
|
|
5903
|
-
|
|
5904
|
-
|
|
6252
|
+
|
|
6253
|
+
.omniscribe_chat-character-count {
|
|
6254
|
+
font-size: 12px;
|
|
6255
|
+
color: var(--omniscribe-text-muted, #6b7280);
|
|
6256
|
+
align-self: flex-start;
|
|
5905
6257
|
}
|
|
5906
|
-
.
|
|
5907
|
-
|
|
5908
|
-
|
|
5909
|
-
|
|
5910
|
-
border-radius:
|
|
6258
|
+
.omniscribe_input {
|
|
6259
|
+
height: calc(var(--spacing) * 9);
|
|
6260
|
+
width: 100%;
|
|
6261
|
+
display: flex;
|
|
6262
|
+
border-radius: calc(var(--radius));
|
|
6263
|
+
border: solid 1px var(--input);
|
|
6264
|
+
background-color: transparent;
|
|
6265
|
+
padding-inline: calc(var(--spacing) * 3);
|
|
6266
|
+
padding-block: calc(var(--spacing) * 1);
|
|
6267
|
+
font-size: var(--text-base) /* 1rem = 16px */;
|
|
6268
|
+
line-height: var(--text-base--line-height);
|
|
6269
|
+
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
6270
|
+
transition-property: color, box-shadow;
|
|
6271
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
6272
|
+
transition-duration: 150ms;
|
|
6273
|
+
outline-style: none;
|
|
6274
|
+
&::file-selector-button {
|
|
6275
|
+
color: var(--foreground);
|
|
6276
|
+
display: inline-flex;
|
|
6277
|
+
height: calc(var(--spacing) * 7);
|
|
6278
|
+
border: none;
|
|
6279
|
+
background-color: transparent;
|
|
6280
|
+
font-size: var(--text-sm) /* 0.875rem = 14px */;
|
|
6281
|
+
line-height: var(--text-sm--line-height);
|
|
6282
|
+
font-weight: var(--font-weight-medium);
|
|
6283
|
+
}
|
|
6284
|
+
&::placeholder {
|
|
6285
|
+
color: var(--muted-foreground);
|
|
6286
|
+
}
|
|
6287
|
+
&::selection {
|
|
6288
|
+
background-color: var(--primary);
|
|
6289
|
+
color: var(--primary-foreground);
|
|
6290
|
+
}
|
|
6291
|
+
&:disabled {
|
|
6292
|
+
pointer-events: none;
|
|
6293
|
+
cursor: not-allowed;
|
|
6294
|
+
opacity: 50%;
|
|
6295
|
+
}
|
|
6296
|
+
&[aria-invalid='true'] {
|
|
6297
|
+
--tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
|
|
6298
|
+
border-color: var(--destructive);
|
|
6299
|
+
}
|
|
6300
|
+
@media (width >= 48rem /* 768px */) {
|
|
6301
|
+
font-size: var(--text-sm) /* 0.875rem = 14px */;
|
|
6302
|
+
line-height: var(--text-sm--line-height) /* calc(1.25 / 0.875) ≈ 1.4286 */;
|
|
6303
|
+
}
|
|
5911
6304
|
}
|
|
5912
6305
|
|
|
5913
|
-
|
|
5914
|
-
|
|
5915
|
-
|
|
5916
|
-
|
|
5917
|
-
|
|
6306
|
+
.omniscribe_input-container {
|
|
6307
|
+
display: flex;
|
|
6308
|
+
flex-direction: column;
|
|
6309
|
+
width: 100%;
|
|
6310
|
+
height: 100%;
|
|
6311
|
+
}
|
|
6312
|
+
|
|
6313
|
+
.omniscribe_input.invalid {
|
|
5918
6314
|
border-color: #dc3545;
|
|
6315
|
+
background-color: #fff5f5;
|
|
6316
|
+
box-shadow: 0 0 0 0.125rem rgba(220, 53, 69, 0.25);
|
|
5919
6317
|
}
|
|
5920
|
-
|
|
5921
|
-
|
|
5922
|
-
|
|
6318
|
+
|
|
6319
|
+
.omniscribe_input-error {
|
|
6320
|
+
color: #dc3545;
|
|
6321
|
+
font-size: 10px;
|
|
6322
|
+
margin-block: 0.25rem;
|
|
6323
|
+
display: block;
|
|
6324
|
+
line-height: 1;
|
|
6325
|
+
}
|
|
6326
|
+
.omniscribe_app-skeleton {
|
|
6327
|
+
display: flex;
|
|
6328
|
+
flex-direction: column;
|
|
6329
|
+
height: 100%;
|
|
6330
|
+
background-color: var(--white);
|
|
6331
|
+
border-radius: 12px;
|
|
5923
6332
|
}
|
|
5924
6333
|
|
|
5925
|
-
/*
|
|
5926
|
-
|
|
5927
|
-
.omniscribe_insertion-preview__voice-banner {
|
|
6334
|
+
/* Header */
|
|
6335
|
+
.omniscribe_app-skeleton-header {
|
|
5928
6336
|
display: flex;
|
|
6337
|
+
justify-content: space-between;
|
|
5929
6338
|
align-items: center;
|
|
5930
|
-
|
|
5931
|
-
|
|
5932
|
-
font-size: 12px;
|
|
5933
|
-
border-bottom: 1px solid var(--_border-soft);
|
|
5934
|
-
background: var(--_surface-alt);
|
|
5935
|
-
color: var(--_text);
|
|
5936
|
-
}
|
|
5937
|
-
.omniscribe_insertion-preview__voice-banner--recording {
|
|
5938
|
-
background: rgba(220, 53, 69, 0.08);
|
|
5939
|
-
color: #b21f2c;
|
|
5940
|
-
}
|
|
5941
|
-
.omniscribe_insertion-preview__voice-banner--generating {
|
|
5942
|
-
background: var(--_primary-soft);
|
|
5943
|
-
color: var(--_primary-text);
|
|
5944
|
-
}
|
|
5945
|
-
.omniscribe_insertion-preview__voice-pulse {
|
|
5946
|
-
width: 10px;
|
|
5947
|
-
height: 10px;
|
|
5948
|
-
border-radius: 999px;
|
|
5949
|
-
background: #dc3545;
|
|
5950
|
-
animation: omniscribe_insertion-preview__pulse 1s ease-in-out infinite;
|
|
5951
|
-
flex-shrink: 0;
|
|
5952
|
-
}
|
|
5953
|
-
@keyframes omniscribe_insertion-preview__pulse {
|
|
5954
|
-
0%,
|
|
5955
|
-
100% {
|
|
5956
|
-
opacity: 0.4;
|
|
5957
|
-
transform: scale(0.85);
|
|
5958
|
-
}
|
|
5959
|
-
50% {
|
|
5960
|
-
opacity: 1;
|
|
5961
|
-
transform: scale(1.15);
|
|
5962
|
-
}
|
|
5963
|
-
}
|
|
5964
|
-
.omniscribe_insertion-preview__voice-spinner {
|
|
5965
|
-
width: 12px;
|
|
5966
|
-
height: 12px;
|
|
5967
|
-
border: 2px solid currentColor;
|
|
5968
|
-
border-top-color: transparent;
|
|
5969
|
-
border-radius: 999px;
|
|
5970
|
-
animation: omniscribe_insertion-preview__spin 0.8s linear infinite;
|
|
5971
|
-
flex-shrink: 0;
|
|
5972
|
-
display: inline-block;
|
|
5973
|
-
}
|
|
5974
|
-
@keyframes omniscribe_insertion-preview__spin {
|
|
5975
|
-
to {
|
|
5976
|
-
transform: rotate(360deg);
|
|
5977
|
-
}
|
|
6339
|
+
padding: 10px 16px;
|
|
6340
|
+
border-bottom: 1px solid var(--omniscribe-border, #e5e7ec);
|
|
5978
6341
|
}
|
|
5979
6342
|
|
|
5980
|
-
|
|
5981
|
-
.
|
|
5982
|
-
|
|
5983
|
-
|
|
5984
|
-
|
|
5985
|
-
opacity: 0.4;
|
|
5986
|
-
cursor: not-allowed;
|
|
5987
|
-
}
|
|
5988
|
-
.omniscribe_insertion-preview__footer-spacer {
|
|
5989
|
-
flex: 1;
|
|
6343
|
+
.omniscribe_app-skeleton-header-left,
|
|
6344
|
+
.omniscribe_app-skeleton-header-right {
|
|
6345
|
+
display: flex;
|
|
6346
|
+
align-items: center;
|
|
6347
|
+
gap: 8px;
|
|
5990
6348
|
}
|
|
5991
6349
|
|
|
5992
|
-
|
|
5993
|
-
|
|
5994
|
-
|
|
5995
|
-
|
|
5996
|
-
border-left: 3px solid #dc3545;
|
|
5997
|
-
}
|
|
5998
|
-
.omniscribe_insertion-preview__row--mandatory
|
|
5999
|
-
.omniscribe_insertion-preview__row-preview--gap,
|
|
6000
|
-
.omniscribe_insertion-preview__row--mandatory
|
|
6001
|
-
.omniscribe_insertion-preview__row-label {
|
|
6002
|
-
color: var(--omniscribe-text, #1f2733);
|
|
6003
|
-
}
|
|
6004
|
-
.omniscribe_insertion-preview__gap-icon--mandatory {
|
|
6005
|
-
color: #dc3545;
|
|
6350
|
+
.omniscribe_app-skeleton-icon {
|
|
6351
|
+
width: 32px;
|
|
6352
|
+
height: 32px;
|
|
6353
|
+
border-radius: 8px;
|
|
6006
6354
|
}
|
|
6007
|
-
|
|
6008
|
-
|
|
6355
|
+
|
|
6356
|
+
.omniscribe_app-skeleton-title {
|
|
6357
|
+
width: 48px;
|
|
6358
|
+
height: 20px;
|
|
6009
6359
|
border-radius: 4px;
|
|
6010
|
-
padding: 4px 6px;
|
|
6011
6360
|
}
|
|
6012
|
-
|
|
6013
|
-
|
|
6014
|
-
|
|
6015
|
-
|
|
6016
|
-
|
|
6017
|
-
font-weight: 700;
|
|
6018
|
-
letter-spacing: 0.04em;
|
|
6019
|
-
text-transform: uppercase;
|
|
6020
|
-
background: #dc3545;
|
|
6021
|
-
color: #fff;
|
|
6022
|
-
border-radius: 999px;
|
|
6361
|
+
|
|
6362
|
+
.omniscribe_app-skeleton-badge {
|
|
6363
|
+
width: 150px;
|
|
6364
|
+
height: 32px;
|
|
6365
|
+
border-radius: 99999px;
|
|
6023
6366
|
}
|
|
6024
|
-
|
|
6025
|
-
|
|
6026
|
-
|
|
6367
|
+
|
|
6368
|
+
/* Disclaimer banner */
|
|
6369
|
+
.omniscribe_app-skeleton-banner {
|
|
6370
|
+
padding: 6px 16px;
|
|
6371
|
+
border-bottom: 1px solid var(--omniscribe-border, #e5e7ec);
|
|
6027
6372
|
}
|
|
6028
6373
|
|
|
6029
|
-
|
|
6030
|
-
|
|
6031
|
-
|
|
6032
|
-
confirmed-from-dictation fields, and a small ✨ pill on the
|
|
6033
|
-
label tells them what it means. Less alarming than the
|
|
6034
|
-
mandatory-red treatment because the field IS filled — we just
|
|
6035
|
-
want the doctor to double-check it. */
|
|
6036
|
-
.omniscribe_insertion-preview__row-edit-grid--suggested {
|
|
6037
|
-
background: rgba(176, 122, 255, 0.06);
|
|
6038
|
-
border-left: 2px solid #b07aff;
|
|
6374
|
+
.omniscribe_app-skeleton-banner-text {
|
|
6375
|
+
width: 100%;
|
|
6376
|
+
height: 16px;
|
|
6039
6377
|
border-radius: 4px;
|
|
6040
|
-
padding: 4px 6px;
|
|
6041
6378
|
}
|
|
6042
|
-
|
|
6043
|
-
|
|
6044
|
-
|
|
6045
|
-
|
|
6046
|
-
|
|
6047
|
-
font-weight: 600;
|
|
6048
|
-
letter-spacing: 0.03em;
|
|
6049
|
-
background: rgba(176, 122, 255, 0.12);
|
|
6050
|
-
color: #6f48b8;
|
|
6051
|
-
border: 1px solid rgba(176, 122, 255, 0.5);
|
|
6052
|
-
border-radius: 999px;
|
|
6379
|
+
|
|
6380
|
+
/* Content */
|
|
6381
|
+
.omniscribe_app-skeleton-content {
|
|
6382
|
+
flex: 1;
|
|
6383
|
+
padding: 20px;
|
|
6053
6384
|
}
|
|
6054
6385
|
|
|
6055
|
-
|
|
6056
|
-
|
|
6057
|
-
|
|
6058
|
-
|
|
6059
|
-
|
|
6060
|
-
margin-bottom: 12px;
|
|
6386
|
+
.omniscribe_app-skeleton-welcome {
|
|
6387
|
+
width: 240px;
|
|
6388
|
+
height: 28px;
|
|
6389
|
+
border-radius: 4px;
|
|
6390
|
+
margin-bottom: 10px;
|
|
6061
6391
|
}
|
|
6062
6392
|
|
|
6063
|
-
.
|
|
6393
|
+
.omniscribe_app-skeleton-suggestions {
|
|
6064
6394
|
display: flex;
|
|
6065
6395
|
flex-direction: column;
|
|
6066
6396
|
gap: 10px;
|
|
6067
6397
|
}
|
|
6068
6398
|
|
|
6069
|
-
.
|
|
6070
|
-
|
|
6071
|
-
border-radius:
|
|
6072
|
-
overflow: hidden;
|
|
6073
|
-
background: rgba(0, 0, 0, 0.02);
|
|
6074
|
-
}
|
|
6075
|
-
|
|
6076
|
-
.omniscribe_insertion-preview__attachment--image {
|
|
6077
|
-
display: block;
|
|
6078
|
-
max-width: 100%;
|
|
6079
|
-
max-height: 240px;
|
|
6080
|
-
object-fit: contain;
|
|
6399
|
+
.omniscribe_app-skeleton-suggestion {
|
|
6400
|
+
height: 25px;
|
|
6401
|
+
border-radius: 99999px;
|
|
6081
6402
|
}
|
|
6082
6403
|
|
|
6083
|
-
.
|
|
6084
|
-
width:
|
|
6085
|
-
padding: 8px;
|
|
6404
|
+
.omniscribe_app-skeleton-suggestion--long {
|
|
6405
|
+
width: 320px;
|
|
6086
6406
|
}
|
|
6087
6407
|
|
|
6088
|
-
.
|
|
6089
|
-
width:
|
|
6090
|
-
height: 360px;
|
|
6091
|
-
border: none;
|
|
6408
|
+
.omniscribe_app-skeleton-suggestion--longer {
|
|
6409
|
+
width: 380px;
|
|
6092
6410
|
}
|
|
6093
6411
|
|
|
6094
|
-
.
|
|
6095
|
-
|
|
6096
|
-
padding: 10px 12px;
|
|
6097
|
-
max-height: 200px;
|
|
6098
|
-
overflow: auto;
|
|
6099
|
-
font-size: 12px;
|
|
6100
|
-
white-space: pre-wrap;
|
|
6101
|
-
word-break: break-word;
|
|
6412
|
+
.omniscribe_app-skeleton-suggestion--medium {
|
|
6413
|
+
width: 280px;
|
|
6102
6414
|
}
|
|
6103
6415
|
|
|
6104
|
-
|
|
6416
|
+
/* Bottom bar */
|
|
6417
|
+
.omniscribe_app-skeleton-bottom {
|
|
6105
6418
|
display: flex;
|
|
6106
6419
|
align-items: center;
|
|
6107
6420
|
gap: 8px;
|
|
6108
|
-
padding: 10px
|
|
6421
|
+
padding: 10px 16px;
|
|
6422
|
+
border-top: 1px solid var(--omniscribe-border, #e5e7ec);
|
|
6109
6423
|
}
|
|
6110
6424
|
|
|
6111
|
-
.
|
|
6112
|
-
|
|
6113
|
-
|
|
6114
|
-
|
|
6115
|
-
|
|
6116
|
-
|
|
6425
|
+
.omniscribe_app-skeleton-transcribe-btn {
|
|
6426
|
+
width: 140px;
|
|
6427
|
+
height: 40px;
|
|
6428
|
+
border-radius: 99999px;
|
|
6429
|
+
flex-shrink: 0;
|
|
6430
|
+
}
|
|
6431
|
+
|
|
6432
|
+
.omniscribe_app-skeleton-input {
|
|
6433
|
+
flex: 1;
|
|
6434
|
+
height: 40px;
|
|
6435
|
+
border-radius: 99999px;
|
|
6117
6436
|
}
|