1
@charset "UTF-8";
2

3
@import url(css/animations.css);
4
@import url(css/popup.css);
5
@import url(css/promptmanager.css);
6
@import url(css/loader.css);
7
@import url(css/character-group-overlay.css);
8
@import url(css/file-form.css);
9
@import url(css/logprobs.css);
10
@import url(css/accounts.css);
11
@import url(css/tags.css);
12
@import url(css/scrollable-button.css);
13
@import url(css/welcome.css);
14
@import url(css/data-maid.css);
15
@import url(css/secrets.css);
16
@import url(css/backgrounds.css);
17
@import url(css/chat-backups.css);
18
@import url(css/streaming-display.css);
19

20
:root {
21
    interpolate-size: allow-keywords;
22
    --doc-height: 100%;
23
    --transparent: rgba(0, 0, 0, 0);
24

25
    --black30a: rgba(0, 0, 0, 0.3);
26
    --black50a: rgba(0, 0, 0, 0.5);
27
    --black60a: rgba(0, 0, 0, 0.6);
28
    --black70a: rgba(0, 0, 0, 0.7);
29
    --black90a: rgba(0, 0, 0, 0.9);
30
    --black100: rgba(0, 0, 0, 1);
31

32
    --white20a: rgba(255, 255, 255, 0.2);
33
    --white30a: rgba(255, 255, 255, 0.3);
34
    --white50a: rgba(255, 255, 255, 0.5);
35
    --white60a: rgba(255, 255, 255, 0.6);
36
    --white70a: rgba(255, 255, 255, 0.7);
37
    --white100: rgba(255, 255, 255, 1);
38

39
    --grey10: rgb(25, 25, 25);
40
    --grey30: rgb(75, 75, 75);
41
    --grey50: rgb(125, 125, 125);
42
    --grey5020a: rgba(125, 125, 125, 0.2);
43
    --grey5050a: rgba(125, 125, 125, 0.5);
44
    --grey70: rgb(175, 175, 175);
45
    --grey75: rgb(190, 190, 190);
46

47
    --grey30a: rgba(50, 50, 50, 0.3);
48
    --grey7070a: rgba(175, 175, 175, 0.7);
49

50
    --fullred: rgba(255, 0, 0, 1);
51
    --crimson70a: rgba(100, 0, 0, 0.7);
52
    --crimson-hover: rgba(150, 50, 50, 0.5);
53
    --okGreen70a: rgba(0, 100, 0, 0.7);
54
    --cobalt30a: rgba(100, 100, 255, 0.3);
55
    --greyCAIbg: rgb(36, 36, 37);
56
    --ivory: rgb(220, 220, 210);
57
    --golden: rgb(248, 211, 0);
58
    --warning: rgba(255, 0, 0, 0.9);
59
    --active: rgb(88, 182, 0);
60
    --preferred: rgb(244, 67, 54);
61

62
    --interactable-outline-color: var(--white100);
63
    --interactable-outline-color-faint: var(--white20a);
64

65
    --reasoning-body-color: var(--SmartThemeEmColor);
66
    --reasoning-em-color: color-mix(in srgb, var(--SmartThemeEmColor) 67%, var(--SmartThemeBlurTintColor) 33%);
67
    --reasoning-saturation: 0.5;
68

69

70
    /*Default Theme, will be changed by ToolCool Color Picker*/
71
    --SmartThemeBodyColor: rgb(220, 220, 210);
72
    --SmartThemeEmColor: rgb(145, 145, 145);
73
    --SmartThemeUnderlineColor: rgb(188, 231, 207);
74
    --SmartThemeQuoteColor: rgb(225, 138, 36);
75
    /* --SmartThemeFastUIBGColor: rgba(0, 0, 0, 0.9); */
76
    --SmartThemeBlurTintColor: rgba(23, 23, 23, 1);
77
    --SmartThemeChatTintColor: rgba(23, 23, 23, 1);
78
    --SmartThemeUserMesBlurTintColor: rgba(0, 0, 0, 0.3);
79
    --SmartThemeBotMesBlurTintColor: rgba(60, 60, 60, 0.3);
80
    --SmartThemeBlurStrength: calc(var(--blurStrength) * 1px);
81
    --SmartThemeShadowColor: rgba(0, 0, 0, 0.5);
82
    --SmartThemeBorderColor: rgba(0, 0, 0, 0.5);
83
    --SmartThemeCheckboxBgColorR: 220;
84
    --SmartThemeCheckboxBgColorG: 220;
85
    --SmartThemeCheckboxBgColorB: 210;
86
    --SmartThemeCheckboxTickColorValue: calc(((((var(--SmartThemeCheckboxBgColorR) * 299) + (var(--SmartThemeCheckboxBgColorG) * 587) + (var(--SmartThemeCheckboxBgColorB) * 114)) / 1000) - 128) * -1000);
87
    --SmartThemeCheckboxTickColor: rgb(var(--SmartThemeCheckboxTickColorValue),
88
            var(--SmartThemeCheckboxTickColorValue),
89
            var(--SmartThemeCheckboxTickColorValue));
90

91

92
    --sheldWidth: 50vw;
93
    /* 800px; */
94
    /*base variable calculated in rems*/
95
    --fontScale: 1;
96
    --mainFontSize: calc(var(--fontScale) * 15px);
97
    --mainFontFamily: "Noto Sans", sans-serif;
98
    --monoFontFamily: 'Noto Sans Mono', 'Courier New', Consolas, monospace;
99

100
    /* base variable for blur strength slider calculations */
101
    --blurStrength: 10;
102

103
    /* base variable for shadow width slider calculations */
104
    --shadowWidth: 2;
105

106
    /* Send form variables */
107
    --bottomFormBlockPadding: calc(var(--mainFontSize) / 2.5);
108
    --bottomFormIconSize: calc(var(--mainFontSize) * 1.9);
109
    --bottomFormBlockSize: calc(var(--bottomFormIconSize) + var(--bottomFormBlockPadding));
110

111
    /*Top Bar Scaling Variables*/
112
    --topBarIconSize: calc(var(--mainFontSize) * 2);
113
    --topBarBlockSize: calc(var(--topBarIconSize) + var(--topBarBlockPadding));
114
    --topBarBlockPadding: calc(var(--mainFontSize) / 3);
115

116
    /*styles for the color picker*/
117
    --tool-cool-color-picker-btn-bg: transparent;
118
    --tool-cool-color-picker-btn-border-color: transparent;
119

120
    --mes-right-spacing: 30px;
121

122
    --avatar-base-height: 50px;
123
    --avatar-base-width: 50px;
124
    --avatar-base-border-radius: 2px;
125
    --avatar-base-border-radius-round: 50%;
126
    --avatar-base-border-radius-rounded: 10px;
127
    --inline-avatar-small-factor: 0.6;
128

129
    --animation-duration: 125ms;
130
    --animation-duration-2x: calc(var(--animation-duration) * 2);
131
    --animation-duration-3x: calc(var(--animation-duration) * 3);
132
    --animation-duration-slow: var(--animation-duration-3x);
133
}
134

135
* {
136
    box-sizing: border-box;
137
    -webkit-font-smoothing: antialiased;
138
    -webkit-tap-highlight-color: transparent;
139
    -moz-osx-font-smoothing: grayscale;
140
    text-shadow: 0px 0px calc(var(--shadowWidth) * 1px) var(--SmartThemeShadowColor);
141
}
142

143
html {
144
    /*fix for chrome flickering on blurred divs*/
145
    -webkit-transform: translateZ(0);
146
    -webkit-backface-visibility: hidden;
147
    -webkit-perspective: 1000;
148
}
149

150
body {
151
    margin: 0;
152
    padding: 0;
153
    width: 100%;
154
    /*fallback for JS load*/
155
    height: 100vh;
156
    height: 100dvh;
157
    /*defaults as 100%, then reassigned via JS as pixels, will work on PC and Android*/
158
    /*height: calc(var(--doc-height) - 1px);*/
159
    background-color: var(--SmartThemeBlurTintColor);
160
    background-repeat: no-repeat;
161
    background-attachment: fixed;
162
    background-size: cover;
163
    font-family: var(--mainFontFamily);
164
    font-size: var(--mainFontSize);
165
    color: var(--SmartThemeBodyColor);
166
    overflow: hidden;
167
    color-scheme: only light;
168
}
169

170
::-webkit-scrollbar {
171
    width: 0.7rem;
172
    scrollbar-gutter: stable;
173
}
174

175
::-webkit-scrollbar-track {
176
    cursor: default;
177
}
178

179
::-webkit-scrollbar-track:hover {
180
    /* Adaptive, but won't contrast with neutral-gray. */
181
    background-color: rgba(126, 126, 126, 0.2);
182
}
183

184
::-webkit-scrollbar-thumb {
185
    cursor: grab;
186
}
187

188
::-webkit-scrollbar-thumb:active {
189
    cursor: grabbing;
190
}
191

192
.scrollY {
193
    overflow-y: auto !important;
194
}
195

196
::-webkit-scrollbar-thumb:vertical {
197
    background-color: var(--grey7070a);
198
    box-shadow: inset 0 0 0 1px var(--black50a);
199
    border-radius: 10px;
200
    background-clip: content-box;
201
    border: 2px solid transparent;
202
    min-height: 40px;
203
}
204

205
body.movingUI ::-webkit-scrollbar-thumb:vertical {
206
    border-top: 20px solid transparent;
207
}
208

209
::-webkit-scrollbar-thumb:horizontal {
210
    background-color: var(--grey7070a);
211
    box-shadow: inset 0 0 0 1px var(--black50a);
212
    border-radius: 10px;
213
    background-clip: content-box;
214
    border: 2px solid transparent;
215
    min-width: 40px;
216
}
217

218
::-webkit-scrollbar-corner {
219
    background-color: transparent;
220
}
221

222
table.responsiveTable {
223
    width: 100%;
224
    margin: 10px 0;
225
}
226

227
.responsiveTable tr {
228
    display: flex;
229
}
230

231
.responsiveTable,
232
.responsiveTable th,
233
.responsiveTable td {
234
    flex: 1;
235
    border: 1px solid;
236
    border-collapse: collapse;
237
    word-break: break-all;
238
    padding: 5px;
239
}
240

241
.hidden,
242
.hiddenByScroll {
243
    visibility: hidden !important;
244
}
245

246
.animated {
247
    -webkit-animation-duration: var(--animation-duration, 3s) !important;
248
    animation-duration: var(--animation-duration, 3s) !important;
249
    -webkit-animation-fill-mode: both !important;
250
    animation-fill-mode: both !important;
251
    box-shadow: inset 0 0 5px var(--SmartThemeQuoteColor);
252
}
253

254
.flash {
255
    animation-name: flash;
256
}
257

258
.has_hover_label .label_icon {
259
    transition: opacity var(--animation-duration) ease, max-width var(--animation-duration) ease;
260
}
261

262
.has_hover_label .label {
263
    transition: opacity var(--animation-duration-slow) ease, max-width var(--animation-duration-slow) ease;
264
    /* Prevent double gap on hidden icon */
265
    margin-left: -5px;
266
}
267

268
.has_hover_label .label_icon,
269
.has_hover_label .label {
270
    transition-delay: var(--animation-duration-slow);
271
}
272

273
.has_hover_label.fast .label_icon,
274
.has_hover_label.fast .label {
275
    transition-delay: var(--animation-duration);
276
}
277

278
.has_hover_label .label_icon,
279
.has_hover_label:hover .label {
280
    opacity: 1;
281
    max-width: 100px;
282
}
283

284
.has_hover_label:hover .label_icon,
285
.has_hover_label .label {
286
    opacity: 0;
287
    max-width: 0;
288
    overflow: hidden;
289
}
290

291
/* Keyboard/focus navigation styling */
292
/* Mimic the outline of keyboard navigation for most most focusable controls */
293
.interactable {
294
    border-radius: 5px;
295
}
296

297
/* Outline for "normal" buttons should only be when actual keyboard navigation is used */
298
.interactable:focus-visible {
299
    outline: 1px solid var(--interactable-outline-color);
300
}
301

302
/* Prevent the outline from being cut off by hiding the overflow */
303
.tag.interactable:focus-visible {
304
    outline-offset: -1px;
305
}
306

307
/* The specific input controls can always have a faint outline, even on mouse interaction, to give a better hint */
308
select:focus-visible,
309
input:focus-visible,
310
textarea:focus-visible {
311
    outline: 1px solid var(--interactable-outline-color-faint);
312
}
313

314
input[type='checkbox']:focus-visible {
315
    outline: 1px solid var(--interactable-outline-color);
316
}
317

318
/* General dragover styling */
319
.dragover {
320
    filter: brightness(1.1) saturate(1.0);
321
    outline: 3px dashed var(--SmartThemeBorderColor);
322
    animation: pulse var(--animation-duration-3x) infinite alternate;
323
}
324

325
.dragover.no_animation {
326
    animation: none;
327
}
328

329
.tokenItemizingSubclass {
330
    font-size: calc(var(--mainFontSize) * 0.8);
331
    color: var(--SmartThemeEmColor);
332
}
333

334
.tokenItemizingMaintext {
335
    font-size: calc(var(--mainFontSize) * 0.8);
336
}
337

338
.tokenGraph {
339
    border-radius: 10px;
340
    border: 1px solid var(--SmartThemeBorderColor);
341
    max-height: 100%;
342
    overflow: hidden;
343
}
344

345
.fa-solid::before,
346
.fa-regular::before {
347
    vertical-align: middle;
348
    text-align: center;
349
}
350

351
.fa-lock.right_menu_button,
352
.fa-unlock.right_menu_button {
353
    padding: 2px 4px;
354
}
355

356
.text_muted {
357
    font-size: calc(var(--mainFontSize) - 0.2em);
358
    color: var(--SmartThemeBodyColor);
359
    opacity: 0.7;
360
}
361

362
.mes[is_system="true"][ch_name="SillyTavern System"] .mes_text br {
363
    display: none;
364
}
365

366
.mes[is_system="true"] .avatar {
367
    opacity: 0.9;
368
    filter: grayscale(25%);
369
}
370

371
.mes_text table,
372
.mes_reasoning table {
373
    border-spacing: 0;
374
    border-collapse: collapse;
375
    margin-bottom: 10px;
376
}
377

378
.mes_text td,
379
.mes_text th,
380
.mes_reasoning td,
381
.mes_reasoning th {
382
    border: 1px solid;
383
    border-collapse: collapse;
384
    padding: 0.25em;
385
}
386

387
.mes_text p,
388
.mes_reasoning p {
389
    margin-top: 0;
390
    margin-bottom: 10px;
391
}
392

393
.mes_text p:last-child,
394
.mes_reasoning p:last-child {
395
    margin-bottom: 0;
396
}
397

398
.mes_text li tt,
399
.mes_reasoning li tt {
400
    display: inline-block;
401
}
402

403
.mes_text ol,
404
.mes_text ul,
405
.mes_reasoning ol,
406
.mes_reasoning ul {
407
    margin-top: 5px;
408
    margin-bottom: 5px;
409
}
410

411
.mes_text br,
412
.mes_bias br,
413
.mes_reasoning br {
414
    content: ' ';
415
}
416

417
.mes_bias {
418
    display: block;
419
    font-size: calc(var(--mainFontSize) - 0.1rem);
420
    font-weight: 500;
421
    color: var(--SmartThemeQuoteColor);
422
}
423

424
.mes_reasoning {
425
    display: block;
426
    border-left: 2px solid var(--reasoning-body-color);
427
    border-radius: 2px;
428
    padding: 5px;
429
    padding-left: 14px;
430
    margin-bottom: 0.5em;
431
    overflow-y: auto;
432
    color: hsl(from var(--reasoning-body-color) h calc(s * var(--reasoning-saturation)) l);
433
}
434

435
.mes_reasoning_details {
436
    margin-right: var(--mes-right-spacing);
437
}
438

439
.mes_reasoning_details .mes_reasoning_summary {
440
    list-style: none;
441
    margin-right: calc(var(--mes-right-spacing) * -1);
442
}
443

444
.mes_reasoning_details summary::-webkit-details-marker {
445
    display: none;
446
}
447

448
.mes_reasoning *:last-child {
449
    margin-bottom: 0;
450
}
451

452
.mes_reasoning_header_block {
453
    flex-grow: 1;
454
}
455

456
.mes_reasoning_header {
457
    cursor: pointer;
458
    position: relative;
459
    user-select: none;
460
    margin: 0.5em 2px;
461
    padding: 7px 14px;
462
    padding-right: calc(0.7em + 14px);
463
    border-radius: 5px;
464
    background-color: var(--grey30);
465
    font-size: calc(var(--mainFontSize) * 0.9);
466
    align-items: baseline;
467
}
468

469
.mes:has(.mes_reasoning:empty) .mes_reasoning_header {
470
    cursor: default;
471
}
472

473
/* TWIMC: Remove with custom CSS to show the icon */
474
.mes_reasoning_header>.icon-svg {
475
    display: none;
476
}
477

478
@supports not selector(:has(*)) {
479
    .mes_reasoning_details {
480
        display: none !important;
481
    }
482
}
483

484
.mes_bias:empty,
485
.mes:not(.reasoning) .mes_reasoning_details,
486
.mes_reasoning_details:not([open]) .mes_reasoning_actions,
487
.mes_reasoning_details:has(.reasoning_edit_textarea) .mes_reasoning,
488
.mes_reasoning_details:has(.reasoning_edit_textarea) .mes_reasoning_header,
489
.mes_reasoning_details:has(.reasoning_edit_textarea) .mes_reasoning_actions .mes_button:not(.edit_button),
490
.mes_reasoning_details:not(:has(.reasoning_edit_textarea)) .mes_reasoning_actions .edit_button,
491
.mes_block:has(.edit_textarea):has(.reasoning_edit_textarea) .mes_reasoning_actions,
492
.mes.reasoning:not([data-reasoning-state="hidden"]) .mes_edit_add_reasoning,
493
.mes:has(.mes_reasoning:empty) .mes_reasoning_arrow,
494
.mes:has(.mes_reasoning:empty) .mes_reasoning,
495
.mes:has(.mes_reasoning:empty) .mes_reasoning_copy {
496
    display: none;
497
}
498

499
.mes[data-reasoning-state="hidden"] .mes_edit_add_reasoning {
500
    background-color: color-mix(in srgb, var(--SmartThemeQuoteColor) 33%, var(--SmartThemeBlurTintColor) 66%);
501
}
502

503
/** If hidden reasoning should not be shown, we hide all blocks that don't have content */
504
#chat:not([data-show-hidden-reasoning="true"]):not(:has(.reasoning_edit_textarea)) .mes:has(.mes_reasoning:empty) .mes_reasoning_details {
505
    display: none;
506
}
507

508
.mes_reasoning_details .mes_reasoning_arrow {
509
    position: absolute;
510
    top: 50%;
511
    right: 7px;
512
    transform: translateY(-50%);
513
    font-size: calc(var(--mainFontSize) * 0.7);
514
    width: calc(var(--mainFontSize) * 0.7);
515
    height: calc(var(--mainFontSize) * 0.7);
516
}
517

518
.mes_reasoning_details:not([open]) .mes_reasoning_arrow {
519
    transform: translateY(-50%) rotate(180deg);
520
}
521

522
.mes_reasoning_summary>span {
523
    margin-left: 0.5em;
524
}
525

526
.mes_text i,
527
.mes_text em {
528
    color: var(--SmartThemeEmColor);
529
}
530

531
.mes_reasoning i,
532
.mes_reasoning em {
533
    color: hsl(from var(--reasoning-em-color) h calc(s * var(--reasoning-saturation)) l);
534
}
535

536
.mes_text q i,
537
.mes_text q em {
538
    color: inherit;
539
}
540

541
.mes_reasoning q i,
542
.mes_reasoning q em {
543
    color: hsl(from var(--SmartThemeQuoteColor) h calc(s * var(--reasoning-saturation)) l);
544
}
545

546
.mes_text u {
547
    color: var(--SmartThemeUnderlineColor);
548
}
549

550
.mes_reasoning u {
551
    color: hsl(from var(--SmartThemeUnderlineColor) h calc(s * var(--reasoning-saturation)) l);
552
}
553

554
.mes_text q {
555
    color: var(--SmartThemeQuoteColor);
556
}
557

558
.mes_reasoning q {
559
    color: hsl(from var(--SmartThemeQuoteColor) h calc(s * var(--reasoning-saturation)) l);
560
}
561

562
.mes_text font[color] em,
563
.mes_text font[color] i,
564
.mes_text font[color] u,
565
.mes_text font[color] q,
566
.mes_reasoning font[color] em,
567
.mes_reasoning font[color] i,
568
.mes_reasoning font[color] u,
569
.mes_reasoning font[color] q {
570
    color: inherit;
571
}
572

573
.mes_text rp {
574
    display: block;
575
}
576

577
.mes_text blockquote,
578
.mes_reasoning blockquote {
579
    border-left: 3px solid var(--SmartThemeQuoteColor);
580
    padding-left: 10px;
581
    background-color: var(--black30a);
582
    margin: 0;
583
}
584

585
.mes_text strong em,
586
.mes_text strong,
587
.mes_text h2,
588
.mes_text h1,
589
.mes_reasoning strong em,
590
.mes_reasoning strong,
591
.mes_reasoning h2,
592
.mes_reasoning h1 {
593
    font-weight: bold;
594
}
595

596
.mes_text pre code,
597
.mes_reasoning pre code {
598
    position: relative;
599
    display: block;
600
    overflow-x: auto;
601
    padding: 1em;
602
}
603

604
.mes_text img:not(.mes_img),
605
.mes_reasoning img:not(.mes_img) {
606
    max-width: 100%;
607
    max-height: var(--doc-height);
608
}
609

610
.mes_reasoning_details[data-state="thinking"] .mes_reasoning .text_segment,
611
.mes_text .text_segment {
612
    animation-name: fade-in;
613
    animation-timing-function: ease-in-out;
614
    /* Not using variables for duration as they are zeroed when reduced motion is enabled */
615
    animation-duration: 300ms;
616
}
617

618
.mes .mes_timer,
619
.mes .mesIDDisplay,
620
.mes .tokenCounterDisplay {
621
    cursor: default;
622
    opacity: 0.7;
623
    font-size: calc(var(--mainFontSize) * 0.9);
624
    font-weight: 600;
625
    text-align: center;
626
}
627

628
.mes_translate,
629
.sd_message_gen,
630
.mes_ghost,
631
.mes_narrate {
632
    display: none;
633
}
634

635
.mes[is_system="true"] .mes_hide {
636
    display: none;
637
}
638

639
.mes[is_system="false"] .mes_unhide {
640
    display: none;
641
}
642

643
.mes[is_system="true"] .mes_ghost {
644
    display: flex;
645
}
646

647
.mes .mes_media_gallery,
648
.mes .mes_media_list {
649
    display: none;
650
}
651

652
.mes[data-media-display="gallery"] .mes_media_gallery,
653
.mes[data-media-display="list"] .mes_media_list {
654
    display: flex;
655
}
656

657
small {
658
    color: var(--SmartThemeBodyColor);
659
    opacity: 0.7;
660
}
661

662
.mes.smallSysMes {
663
    padding: 5px !important;
664
    font-size: calc(var(--mainFontSize)* 0.9);
665
    text-align: center;
666
}
667

668
.mes.smallSysMes pre {
669
    text-align: initial;
670
    word-break: break-all;
671
    margin-top: 5px;
672
}
673

674
.mes.smallSysMes summary {
675
    cursor: pointer;
676
}
677

678
.mes.smallSysMes .mes_text p:last-child {
679
    margin: 0;
680
}
681

682
.mes.smallSysMes .mes_text {
683
    padding: 0 !important;
684
    text-align: center;
685
}
686

687
.mes.smallSysMes .mes_block {
688
    margin-right: unset !important;
689
}
690

691
.mes.smallSysMes:not(:has(.edit_textarea)) .ch_name {
692
    display: none;
693
}
694

695
.mes.smallSysMes .mesAvatarWrapper {
696
    display: none;
697
    height: unset;
698
    min-height: unset;
699
}
700

701
code {
702
    font-family: var(--monoFontFamily);
703
    white-space: pre-wrap;
704
    /* word-wrap: break-word; */
705
    border: 1px solid var(--SmartThemeBorderColor);
706
    border-radius: 5px;
707
    background-color: var(--black70a);
708
    padding: 0 3px;
709
    /* max-width: calc(100dvw - 95px); */
710
    line-height: var(--mainFontSize);
711
    color: var(--white70a);
712
}
713

714
kbd {
715
    display: inline-block;
716
    padding: 2px 4px;
717
    font-family: var(--monoFontFamily);
718
    white-space: nowrap;
719
    /* background-color: #eeeeee; */
720
    background-color: rgba(255, 255, 255, 0.9);
721
    color: #333;
722
    border: 1px solid #b4b4b4;
723
    border-radius: 3px;
724
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
725
    font-size: 90%;
726
    line-height: 1;
727
}
728

729
samp {
730
    display: block;
731
    font-family: var(--monoFontFamily);
732
    white-space: pre-wrap;
733
    text-align: start;
734
    justify-content: left;
735
}
736

737
hr {
738
    background-image: linear-gradient(90deg, var(--transparent), var(--SmartThemeBodyColor), var(--transparent));
739
    margin: 5px 0;
740
    height: 1px;
741
    min-height: 1px;
742
    border: 0;
743
    opacity: 0.2;
744
}
745

746
#version_display {
747
    padding: 5px;
748
    opacity: 0.8;
749
}
750

751
/*TOPPER margin*/
752

753
#top-bar {
754
    width: var(--sheldWidth);
755
    margin: 0 auto;
756
    left: 0;
757
    right: 0;
758
    display: inline-block;
759
    height: var(--bottomFormBlockSize);
760
    position: absolute;
761
    /* border-bottom: 1px solid var(--SmartThemeBorderColor); */
762
    box-shadow: 0 2px 20px 0 var(--black70a);
763
    backdrop-filter: blur(var(--SmartThemeBlurStrength));
764
    background-color: var(--SmartThemeBlurTintColor);
765
    -webkit-backdrop-filter: blur(var(--SmartThemeBlurStrength));
766
    z-index: 3005;
767
}
768

769
#sheld {
770
    display: flex;
771
    flex-direction: column;
772
    /* -1px to give sheld some wiggle room to bounce off tobar when moving*/
773
    height: calc(100vh - var(--topBarBlockSize) - 1px);
774
    height: calc(100dvh - var(--topBarBlockSize) - 1px);
775
    max-height: calc(100dvh - var(--topBarBlockSize) - 1px);
776
    overflow-x: hidden;
777
    /* max-width: 50vw; */
778
    position: absolute;
779
    left: calc((100vw - var(--sheldWidth))/2);
780
    left: calc((100dvw - var(--sheldWidth))/2);
781
    top: var(--topBarBlockSize);
782
    margin: 0 auto;
783
    left: 0;
784
    right: 0;
785
    z-index: 30;
786
    min-height: 100px;
787
    min-width: 100px;
788
    width: var(--sheldWidth);
789
}
790

791
.drag-grabber {
792
    position: absolute;
793
    /*     width: 20px !important;
794
    height: 20px !important; */
795
    margin: 0px 5px;
796
    color: var(--SmartThemeBodyColor);
797
    z-index: 2000;
798
    text-align: center;
799
    /* border-radius: 5px; */
800
    vertical-align: middle;
801
    right: 0px;
802
    top: 0px;
803
    opacity: 0.5;
804
    cursor: grab;
805
    /* border: 1px solid var(--SmartThemeBorderColor); */
806
    cursor: -moz-grab;
807
    cursor: -webkit-grab;
808
    display: none;
809
    filter: drop-shadow(0px 0px 0px black);
810
    transition: all var(--animation-duration-2x);
811
    font-size: calc(var(--mainFontSize)*1.3);
812
}
813

814
.drag-grabber:hover {
815
    opacity: 1;
816
}
817

818
body .panelControlBar {
819
    position: absolute;
820
    right: 5px;
821
    top: 5px;
822
    z-index: 2000;
823
    min-width: 55px;
824
    justify-content: flex-end;
825
    gap: 0px;
826
    transition: all var(--animation-duration-2x);
827
}
828

829
.zoomed_avatar .panelControlBar {
830
    opacity: 0;
831
}
832

833
.zoomed_avatar:hover .panelControlBar {
834
    opacity: 1;
835
}
836

837
.panelControlBar .drag-grabber {
838
    position: unset;
839
}
840

841
#sheldheader:active {
842
    cursor: grabbing;
843
    cursor: -moz-grabbing;
844
    cursor: -webkit-grabbing;
845
}
846

847
.pull-tab {
848
    height: 10px;
849
    width: 10px;
850
    background-color: var(--SmartThemeEmColor);
851
    position: absolute;
852
    bottom: 0px;
853
    right: 0px;
854
    pointer-events: none;
855
    z-index: 2001;
856
}
857

858
#chat {
859
    max-height: calc(100vh - calc(var(--topBarBlockSize) + var(--bottomFormBlockSize)));
860
    overflow-x: hidden;
861
    padding-bottom: 0;
862
    overflow-y: scroll;
863
    display: flex;
864
    bottom: 10px;
865
    /*     border-bottom: 1px solid var(--SmartThemeBorderColor);
866
    border-left: 1px solid var(--SmartThemeBorderColor);
867
    border-right: 1px solid var(--SmartThemeBorderColor); */
868
    backdrop-filter: blur(var(--SmartThemeBlurStrength));
869
    background-color: var(--SmartThemeChatTintColor);
870
    -webkit-backdrop-filter: blur(var(--SmartThemeBlurStrength));
871
    text-shadow: 0px 0px calc(var(--shadowWidth) * 1px) var(--SmartThemeShadowColor);
872
    flex-direction: column;
873
    z-index: 30;
874
    flex-grow: 1;
875
}
876

877
#form_sheld {
878
    white-space: nowrap;
879
    width: 100%;
880
    margin: 1px auto 0 auto;
881
    z-index: 30;
882
}
883

884
/* special case for desktop Safari to allow #sheld resizing */
885
@media only screen and (min-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (pointer: fine) {
886
    #form_sheld {
887
        margin-bottom: 4px;
888
    }
889
}
890

891
#send_form {
892
    display: flex;
893
    flex-wrap: wrap;
894
    align-items: center;
895
    width: 100%;
896
    margin: 0 auto 0 auto;
897
    border: 1px solid var(--SmartThemeBorderColor);
898
    border-radius: 0 0 10px 10px;
899
    background-color: var(--SmartThemeBlurTintColor);
900
    backdrop-filter: blur(var(--SmartThemeBlurStrength));
901
}
902

903
/* #send_form.no-connection {
904
    background-color: var(--crimson70a) !important;
905
} */
906

907
#nonQRFormItems {
908
    padding: 0;
909
    border: 0;
910
    position: relative;
911
    background-position: center;
912
    display: flex;
913
    flex-direction: row;
914
    column-gap: 5px;
915
    font-size: var(--bottomFormIconSize);
916
    order: 25;
917
    width: 100%;
918
}
919

920
#leftSendForm,
921
#rightSendForm {
922
    display: flex;
923
    flex-wrap: wrap;
924
}
925

926
#leftSendForm {
927
    order: 1;
928
    padding-left: 2px;
929

930
}
931

932
#rightSendForm {
933
    order: 3;
934
    padding-right: 2px;
935
}
936

937
#rightSendForm>div:not(.mes_stop),
938
#leftSendForm>div {
939
    width: var(--bottomFormBlockSize);
940
    height: var(--bottomFormBlockSize);
941
    margin: 0;
942
    border: none;
943
    cursor: pointer;
944
    opacity: 0.7;
945
    display: flex;
946
    align-items: center;
947
    justify-content: center;
948
    transition: opacity var(--animation-duration-2x);
949
}
950

951
#rightSendForm>div:hover,
952
#leftSendForm>div:hover {
953
    opacity: 1;
954
    filter: brightness(1.2);
955
}
956

957
#send_but {
958
    order: 2;
959
}
960

961
#mes_continue {
962
    order: 1;
963
}
964

965
#mes_impersonate {
966
    order: 1;
967
}
968

969
#send_form .mes_stop {
970
    display: none;
971
    order: 2;
972
    padding-right: 2px;
973
    place-self: center;
974
    cursor: pointer;
975
    transition: var(--animation-duration-2x);
976
    opacity: 0.7;
977
}
978

979

980
#form_sheld.isExecutingCommandsFromChatInput {
981

982
    #send_but,
983
    #mes_continue {
984
        visibility: hidden;
985
        width: 0;
986
        height: 0;
987
        opacity: 0;
988
    }
989

990
    #rightSendForm>div:not(.mes_send).stscript_btn {
991

992
        &.stscript_pause,
993
        &.stscript_stop {
994
            display: flex;
995
        }
996
    }
997

998
    &.script_paused {
999
        #rightSendForm>div:not(.mes_send).stscript_btn {
1000
            &.stscript_pause {
1001
                display: none;
1002
            }
1003

1004
            &.stscript_continue {
1005
                display: flex;
1006
            }
1007
        }
1008
    }
1009
}
1010

1011
@supports not selector(&) {
1012
    .stscript_btn {
1013
        display: none;
1014
    }
1015
}
1016

1017
#rightSendForm>div:not(.mes_send) {
1018
    &.stscript_btn {
1019
        padding-right: 2px;
1020
        place-self: center;
1021
        cursor: pointer;
1022
        transition: var(--animation-duration-2x);
1023
        opacity: 1;
1024
        display: none;
1025

1026
        &.stscript_pause>.fa-solid {
1027
            background-color: rgb(146, 190, 252);
1028
        }
1029

1030
        &.stscript_continue>.fa-solid {
1031
            background-color: rgb(146, 190, 252);
1032
        }
1033

1034
        &.stscript_stop>.fa-solid {
1035
            background-color: rgb(215, 136, 114);
1036
        }
1037

1038
        >.fa-solid {
1039
            --toastInfoColor: #2F96B4;
1040
            --progColor: rgba(0, 128, 0, 0.839);
1041
            border-radius: 35%;
1042
            border: 0 solid var(--progColor);
1043
            aspect-ratio: 1 / 1;
1044
            display: flex;
1045
            color: rgb(24 24 24);
1046
            font-size: 0.5em;
1047
            height: var(--bottomFormIconSize);
1048
            justify-content: center;
1049
            align-items: center;
1050
            box-shadow:
1051
                0 0 0 var(--progColor),
1052
                0 0 0 var(--progColor);
1053
        }
1054
    }
1055
}
1056

1057
#options_button {
1058
    width: var(--bottomFormBlockSize);
1059
    height: var(--bottomFormBlockSize);
1060
    font-size: var(--bottomFormIconSize);
1061
    margin: 0;
1062
    border: none;
1063
    position: relative;
1064
    opacity: 0.7;
1065
    cursor: pointer;
1066
    z-index: 2001;
1067
    margin-left: 10px;
1068
    padding: 0;
1069
    transition: var(--animation-duration-2x);
1070
    display: flex;
1071
    align-items: center;
1072
    order: 2;
1073
}
1074

1075
.font-family-reset {
1076
    font-family: var(--mainFontFamily);
1077
    font-size: var(--mainFontSize);
1078
    font-weight: 400;
1079
}
1080

1081
#options,
1082
#extensionsMenu,
1083
.popup .popper-modal {
1084
    display: flex;
1085
    z-index: 29999;
1086
    background-color: var(--SmartThemeBlurTintColor);
1087
    -webkit-backdrop-filter: blur(var(--SmartThemeBlurStrength));
1088
    backdrop-filter: blur(var(--SmartThemeBlurStrength));
1089
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
1090
    flex-flow: column;
1091
    border-radius: 10px;
1092
    padding: 2px;
1093
}
1094

1095
#extensionsMenu,
1096
.options-content {
1097
    padding: 2px;
1098
}
1099

1100
.options-content,
1101
.list-group {
1102
    overflow: hidden;
1103
    display: block;
1104
    border: 1px solid var(--SmartThemeBorderColor);
1105
    border-radius: 10px;
1106
    z-index: 2000;
1107
    font-size: calc(var(--mainFontSize) * 1.1);
1108
}
1109

1110
#extensionsMenu,
1111
#options .options-content {
1112
    max-height: calc(100vh - calc(2 * var(--bottomFormBlockSize) + 10px));
1113
    max-height: calc(100dvh - calc(2 * var(--bottomFormBlockSize) + 10px));
1114
    overflow-y: auto;
1115
}
1116

1117
.options-content i,
1118
.extensionsMenuExtensionButton {
1119
    height: 20px;
1120
    width: 20px;
1121
    font-size: calc(var(--mainFontSize) * 1.1);
1122
    display: flex;
1123
    align-items: center;
1124
    justify-content: center;
1125
    pointer-events: none;
1126
}
1127

1128
.options-content hr {
1129
    margin: 0;
1130
    padding: 0;
1131
    border-top: 1px solid var(--SmartThemeBorderColor);
1132
    background: none;
1133
}
1134

1135
#extensionsMenuButton {
1136
    order: 4;
1137
    padding: 1px;
1138
}
1139

1140
.options-content a,
1141
#extensionsMenu>.extension_container>div,
1142
#extensionsMenu>div:not(.extension_container),
1143
.list-group>div,
1144
.list-group .list-group-item,
1145
#sd_dropdown .list-group span {
1146
    color: var(--SmartThemeBodyColor);
1147
    padding: 5px 5px;
1148
    padding-bottom: 5px;
1149
    text-decoration: none;
1150
    display: flex;
1151
    column-gap: 10px;
1152
    cursor: pointer;
1153
    align-items: baseline;
1154
}
1155

1156
#extensionsMenu>.extension_container>div,
1157
#extensionsMenu>div:not(.extension_container),
1158
.options-content a,
1159
.list-group-item {
1160
    opacity: 0.5;
1161
}
1162

1163
#extensionsMenu>.extension_container>div:hover,
1164
#extensionsMenu>div:not(.extension_container):hover,
1165
.options-content a:hover,
1166
.list-group-item:hover {
1167
    opacity: 1;
1168
}
1169

1170
.options-content a div:first-child {
1171
    min-width: 20px;
1172
}
1173

1174
.options-content span {
1175
    vertical-align: middle;
1176
}
1177

1178
.auto_hide {
1179
    content-visibility: auto;
1180
}
1181

1182
.mes {
1183
    display: flex;
1184
    align-items: flex-start;
1185
    padding: 10px 10px 0 10px;
1186
    margin-top: 0;
1187
    width: 100%;
1188
    color: var(--SmartThemeBodyColor);
1189
    position: relative;
1190
}
1191

1192
#chat .mes.selected {
1193
    /* background-color: rgb(from var(--SmartThemeQuoteColor) r g b / .5); */
1194
    background-color: rgb(102, 0, 0);
1195
}
1196

1197
#chat .style-pins {
1198
    visibility: hidden;
1199
    position: fixed;
1200
    left: -9999px;
1201
    top: -9999px;
1202
    width: 0;
1203
    height: 0;
1204
    opacity: 0;
1205
    pointer-events: none;
1206
}
1207

1208
.mes q:before,
1209
.mes q:after {
1210
    content: '';
1211

1212
}
1213

1214
.last_mes {
1215
    margin-bottom: 0 !important;
1216
    /*only affects bubblechat to make it sit nicely at the bottom*/
1217
}
1218

1219
.last_mes:has(.mes_text:empty):has(.mes_reasoning_details) .mes_reasoning:not(:empty) {
1220
    margin-bottom: var(--mes-right-spacing);
1221
}
1222

1223
/* SWIPE RELATED STYLES*/
1224

1225
.mes {
1226
    --swipeCounterHeight: 15px;
1227
    --swipeCounterMargin: 5px;
1228
}
1229

1230
/* https://stackoverflow.com/a/31819499 */
1231
/* This has much better performance than .transform on large chats*/
1232
.slide {
1233
    animation: slide calc(var(--slide-mes-x-duration, var(--animation-duration, 125ms))) ease-in-out forwards;
1234
    -webkit-animation: slide calc(var(--slide-mes-x-duration, var(--animation-duration, 125ms))) ease-in-out forwards;
1235
    will-change: transform;
1236
}
1237

1238
.swipe_right,
1239
.swipe_left {
1240
    width: 25px;
1241
    height: 25px;
1242
    opacity: 0.3;
1243
    align-items: center;
1244
    justify-content: center;
1245
    z-index: 9999;
1246
    grid-row-start: 2;
1247
    font-size: 20px;
1248
    cursor: pointer;
1249
    align-self: center;
1250
    pointer-events: auto;
1251
}
1252

1253
.swipe_left {
1254
    position: absolute;
1255
    bottom: calc(var(--swipeCounterHeight) + var(--swipeCounterMargin));
1256
    flex-flow: column;
1257
}
1258

1259
.swipeRightBlock {
1260
    position: absolute;
1261
    right: 0;
1262
    bottom: 0;
1263
    pointer-events: none;
1264
}
1265

1266
.swipes-counter {
1267
    opacity: 0.3;
1268
    color: var(--SmartThemeBodyColor);
1269
    font-size: 12px;
1270
    padding: 0 5px;
1271
    font-family: var(--mainFontFamily);
1272
    font-weight: 400;
1273
    align-self: center;
1274
    min-width: 40px;
1275
    display: flex;
1276
    justify-content: center;
1277
    margin-bottom: var(--swipeCounterMargin);
1278
    height: var(--swipeCounterHeight);
1279
    pointer-events: auto;
1280
}
1281

1282
.swipes-counter.swipe-picker-enabled {
1283
    cursor: pointer;
1284
}
1285

1286
.swipes-counter.swipe-picker-enabled:hover,
1287
.swipes-counter.swipe-picker-enabled:focus-visible {
1288
    opacity: 0.7;
1289
}
1290

1291
.swipe_picker_header {
1292
    position: sticky;
1293
    top: 0;
1294
    z-index: 1;
1295
}
1296

1297
.swipe_picker_popup .popup-body,
1298
.swipe_picker_popup .popup-content {
1299
    display: flex;
1300
    flex-direction: column;
1301
    min-height: 0;
1302
    overflow: hidden;
1303
}
1304

1305

1306
body.swipeAllMessages .mes:not(.last_mes) .swipes-counter {
1307
    /* Avoid expensive DOM queries */
1308
    opacity: 0.3;
1309
    display: flex;
1310
}
1311

1312
.swipe_left {
1313
    right: auto;
1314
    left: 20px;
1315
}
1316

1317
.swipe_right {
1318
    right: 5px;
1319
    align-self: center;
1320
    display: flex;
1321
}
1322

1323
/* The last swipe must be highlighted */
1324
.last_swipe :is(.swipes-counter, .swipe_right) {
1325
    opacity: 0.7;
1326
    /* Doubled opacity needs a longer transition to match a non active arrow. */
1327
    /* (Duration * Active Opacity / Inactive Opacity * 2) */
1328
    transition-duration: calc(var(--animation-duration-2x) * 0.7/0.3);
1329
}
1330

1331
.fade :is(.swipes-counter, .swipe_left, .swipe_right){
1332
    /* Fade in and out: */
1333
    /* https://nerdy.dev/using-starting-style-and-transition-behavior-for-enter-and-exit-stage-effects */
1334
    /* https://developer.mozilla.org/en-US/docs/Web/CSS/transition-behavior#description */
1335
    transition: opacity calc(var(--animation-duration) * 2) ease-in;
1336

1337
    /* Fade in. */
1338
    @supports (transition-behavior: allow-discrete) {
1339
        transition:
1340
            opacity var(--animation-duration-2x) ease-in,
1341
            display var(--animation-duration-2x) ease-in,
1342
            visibility var(--animation-duration-2x) ease-in;
1343
        transition-behavior: allow-discrete;
1344
    }
1345
}
1346

1347
/* Hide all but the last message. */
1348
body:not(.swipeAllMessages) .mes:not(.last_mes) :is(.swipe_left, .swipe_right, .swipes-counter),
1349
/* Hide non-visible swipe_left. */
1350
.mes:not(.swipes_visible) .swipe_left,
1351
/* Only hide swipe_right if it's not visible, and not the last swipe. */
1352
.mes:not(.swipes_visible, .last_swipe) :is(.swipe_right),
1353
/* Hide all swipe buttons if .hideAllSwipeButtons. */
1354
body.hideAllSwipeButtons :is(.swipe_left, .swipe_right),
1355
.swipes-counter[hidden],
1356
.swipe_right[hidden],
1357
.swipe_left[hidden] {
1358
    /* Fade out */
1359
    opacity: 0 !important;
1360
    /* With display:none, the swipes-counter div wil collapse, shifting the chevron. */
1361
    visibility: hidden;
1362
    /* Interactivity has limited availability https://caniuse.com/?search=interactivity */
1363
    interactivity: inert;
1364
    pointer-events: none;
1365
}
1366

1367
.ui-settings {
1368
    display: flex;
1369
    flex-direction: column;
1370
    flex-grow: 1;
1371
}
1372

1373
#avatars-style .range-block-range,
1374
#chat-display .range-block-range,
1375
#sheld-width .range-block-range {
1376
    display: flex;
1377
    flex-direction: column;
1378
}
1379

1380
.range-block-range-and-counter {
1381
    flex: 1;
1382
    flex-wrap: nowrap;
1383
    display: flex;
1384
}
1385

1386
.change_name {
1387
    display: flex;
1388
    flex-direction: row;
1389
    gap: 5px;
1390
}
1391

1392
.add_avatar {
1393
    border: var(--avatar-base-border-radius) solid var(--SmartThemeBodyColor);
1394
    margin: var(--avatar-base-border-radius);
1395
    cursor: pointer;
1396
    transition: filter var(--animation-duration) ease-in-out;
1397
}
1398

1399
.add_avatar:hover {
1400
    filter: drop-shadow(0px 0px 5px var(--SmartThemeQuoteColor));
1401
}
1402

1403
.avatar {
1404
    width: var(--avatar-base-width);
1405
    height: var(--avatar-base-height);
1406
    border-radius: var(--avatar-base-border-radius-round);
1407
    border-style: none;
1408
    flex: 1;
1409
    transition: var(--animation-duration-2x);
1410
}
1411

1412
.last_mes .mesAvatarWrapper {
1413
    padding-bottom: var(--avatar-base-height);
1414
}
1415

1416
.mes .avatar {
1417
    cursor: pointer;
1418
}
1419

1420
.hotswap {
1421
    margin: 5px;
1422
    justify-content: space-evenly;
1423
}
1424

1425
#HotSwapWrapper {
1426
    justify-content: space-evenly;
1427
}
1428

1429
.avatar.interactable {
1430
    opacity: 0.6;
1431
}
1432

1433
.avatar.interactable:hover {
1434
    opacity: 1;
1435
    background-color: transparent !important;
1436
    cursor: pointer;
1437
}
1438

1439
.avatar.avatar_collage img {
1440
    width: 100%;
1441
    height: 100%;
1442
    object-fit: cover;
1443
    object-position: center;
1444
    border: 1px solid var(--SmartThemeBorderColor);
1445
}
1446

1447
.avatar img {
1448
    width: var(--avatar-base-width);
1449
    height: var(--avatar-base-height);
1450
    object-fit: cover;
1451
    object-position: center center;
1452
    border-radius: var(--avatar-base-border-radius-round);
1453
    border: 1px solid var(--SmartThemeBorderColor);
1454
    /*--black30a*/
1455
    box-shadow: 0 0 5px var(--black50a);
1456
}
1457

1458
.bogus_folder_select .avatar,
1459
.character_select .avatar,
1460
.avatars_inline .avatar {
1461
    flex: unset;
1462
}
1463

1464
.avatars_inline {
1465
    display: flex;
1466
    gap: 5px;
1467
    flex-wrap: wrap;
1468
    overflow: hidden;
1469
    max-height: calc(var(--avatar-base-height) + 2 * var(--avatar-base-border-radius));
1470
}
1471

1472
.bogus_folder_select .avatar {
1473
    justify-content: center;
1474
    background-color: var(--SmartThemeBlurTintColor);
1475
    color: var(--SmartThemeBodyColor);
1476
    outline-style: solid;
1477
    outline-width: 1px;
1478
    outline-color: var(--SmartThemeBorderColor);
1479
}
1480

1481
.avatars_inline_small .avatar,
1482
.avatars_inline_small .avatar img {
1483
    width: calc(var(--avatar-base-width) * var(--inline-avatar-small-factor));
1484
    height: calc(var(--avatar-base-height) * var(--inline-avatar-small-factor));
1485
}
1486

1487
.avatars_inline_small {
1488
    height: calc(var(--avatar-base-height) * var(--inline-avatar-small-factor) + 2 * var(--avatar-base-border-radius));
1489
}
1490

1491
.bogus_folder_select:not(.folder_closed) .bogus_folder_avatars_block {
1492
    opacity: 1 !important;
1493
}
1494

1495
.avatars_inline .avatar {
1496
    margin: calc(var(--avatar-base-border-radius));
1497
}
1498

1499
.avatars_inline .avatar:last-of-type {
1500
    margin-right: calc(var(--avatar-base-border-radius));
1501
}
1502

1503
.avatars_multiline {
1504
    max-height: fit-content;
1505
    height: inherit;
1506
}
1507

1508
.mes_block {
1509
    padding-top: 0;
1510
    padding-left: 10px;
1511
    width: 100%;
1512
    overflow-x: hidden;
1513
    overflow-y: clip;
1514
}
1515

1516
.mes_text,
1517
.mes_reasoning {
1518
    font-weight: 500;
1519
    line-height: calc(var(--mainFontSize) + .5rem);
1520
    max-width: 100%;
1521
    overflow-wrap: anywhere;
1522
}
1523

1524
.mes_text {
1525
    padding-left: 0;
1526
    padding-top: 5px;
1527
    padding-bottom: 5px;
1528
    padding-right: var(--mes-right-spacing);
1529
}
1530

1531
.mes_text hr {
1532
    opacity: 0.4;
1533
}
1534

1535
.mes_text.inline_media:not(:has(.edit_textarea)) {
1536
    display: none;
1537
}
1538

1539
br {
1540
    display: block;
1541
    margin: 2px 0;
1542
}
1543

1544
textarea {
1545
    width: 100%;
1546
    resize: vertical;
1547
    display: block;
1548
    background-color: var(--black30a);
1549
    outline: none;
1550
    border: 1px solid var(--SmartThemeBorderColor);
1551
    border-radius: 5px;
1552
    color: var(--SmartThemeBodyColor);
1553
    font-size: var(--mainFontSize);
1554
    font-family: var(--mainFontFamily);
1555
    padding: 5px 10px;
1556
    max-height: 90vh;
1557
    max-height: 90dvh;
1558
}
1559

1560
textarea.autoSetHeight {
1561
    max-height: 50vh;
1562
    max-height: 50dvh;
1563
    field-sizing: content;
1564
}
1565

1566
input,
1567
select,
1568
button {
1569
    font-family: var(--mainFontFamily), sans-serif;
1570
    font-size: var(--mainFontSize);
1571
    color: var(--SmartThemeBodyColor);
1572
}
1573

1574
#send_textarea {
1575
    min-height: calc(var(--bottomFormBlockSize) + 2px);
1576
    height: calc(var(--bottomFormBlockSize) + 2px);
1577
    max-height: 50vh;
1578
    max-height: 50dvh;
1579
    word-wrap: break-word;
1580
    resize: vertical;
1581
    display: block;
1582
    background-color: rgba(255, 0, 0, 0);
1583
    border: 0;
1584
    box-shadow: none;
1585
    padding: 6px;
1586
    font-family: var(--mainFontFamily);
1587
    margin: 0;
1588
    text-shadow: 0px 0px calc(var(--shadowWidth) * 1px) var(--SmartThemeShadowColor);
1589
    flex: 1;
1590
    order: 3;
1591
    field-sizing: content;
1592

1593
    --progColor: rgb(146, 190, 252);
1594
    --progFlashColor: rgb(215, 136, 114);
1595
    --progSuccessColor: rgb(81, 163, 81);
1596
    --progErrorColor: rgb(189, 54, 47);
1597
    --progAbortedColor: rgb(215, 136, 114);
1598
    --progWidth: 3px;
1599
    --progWidthClip: calc(var(--progWidth) + 2px);
1600
    --prog: 0%;
1601
    --progDone: 0;
1602
    border-top: var(--progWidth) solid var(--progColor);
1603
    clip-path: polygon(0% calc(var(--progDone) * var(--progWidthClip)),
1604
            var(--prog) calc(var(--progDone) * var(--progWidthClip)),
1605
            var(--prog) var(--progWidthClip),
1606
            100% var(--progWidthClip),
1607
            100% 100%,
1608
            0% 100%);
1609
    transition: clip-path var(--animation-duration-2x);
1610
}
1611

1612
#send_textarea:placeholder-shown {
1613
    overflow: hidden;
1614
}
1615

1616
#send_textarea:focus-visible {
1617
    /* Disable outline for the chat bar itself, we add it to the outer div */
1618
    outline: none;
1619
}
1620

1621
#send_form:has(#send_textarea:focus-visible) {
1622
    border-color: var(--interactable-outline-color-faint);
1623
    outline: 1px solid var(--interactable-outline-color-faint);
1624
}
1625

1626
#form_sheld.isExecutingCommandsFromChatInput.script_paused #send_textarea {
1627
    animation-name: script_progress_pulse;
1628
    animation-duration: 1500ms;
1629
    animation-timing-function: ease-in-out;
1630
    animation-delay: 0s;
1631
    animation-iteration-count: infinite;
1632
}
1633

1634
#form_sheld.script_success #send_textarea {
1635
    border-top-color: var(--progSuccessColor);
1636
}
1637

1638
#form_sheld.script_error #send_textarea {
1639
    border-top-color: var(--progErrorColor);
1640
}
1641

1642
#form_sheld.script_aborted #send_textarea {
1643
    border-top-color: var(--progAbortedColor);
1644
}
1645

1646
.autoComplete-wrap {
1647
    --targetOffset: 0;
1648
    --direction: column;
1649
    --leftOffset: 1vw;
1650
    --rightOffset: 1vw;
1651
    display: flex;
1652
    flex-direction: var(--direction);
1653
    position: absolute;
1654
    left: var(--leftOffset);
1655
    right: var(--rightOffset);
1656
    z-index: 10000;
1657
    pointer-events: none;
1658

1659
    .autoComplete {
1660
        pointer-events: all;
1661
    }
1662

1663

1664
    &.isFloating {
1665
        --direction: row;
1666
        left: 0;
1667
        right: 0;
1668

1669
        &:before {
1670
            content: "";
1671
            flex: 0 1 calc(var(--targetOffset) * 1px);
1672
            display: block;
1673
            pointer-events: none;
1674
        }
1675

1676
        .autoComplete {
1677
            flex: 0 0 auto;
1678
            width: 50vw;
1679
        }
1680

1681
        /* Small style variant for macro autocomplete (33vw, max 700px) */
1682
        &[data-macros-autocomplete-style="small"] .autoComplete {
1683
            width: 33vw;
1684
            max-width: 700px;
1685
            min-width: 250px;
1686
        }
1687

1688
        &:after {
1689
            content: "";
1690
            flex: 1 1 0;
1691
            display: block;
1692
            pointer-events: none;
1693
        }
1694
    }
1695
}
1696

1697
.autoComplete-detailsWrap {
1698
    --targetOffset: 0;
1699
    --rightOffset: 1vw;
1700
    --bottomOffset: 0;
1701
    --leftOffset: 74vw;
1702
    display: flex;
1703
    flex-direction: column;
1704
    position: absolute;
1705
    top: 5vh;
1706
    right: var(--rightOffset);
1707
    bottom: var(--bottomOffset);
1708
    left: var(--leftOffset);
1709
    z-index: 10000;
1710
    pointer-events: none;
1711

1712
    &:before {
1713
        content: "";
1714
        flex: 0 1 calc(var(--targetOffset) * 1px - 5vh);
1715
        display: block;
1716
    }
1717

1718
    .autoComplete-details {
1719
        flex: 0 0 auto;
1720
        max-height: 80vh;
1721
        pointer-events: all;
1722
    }
1723

1724
    &:after {
1725
        content: "";
1726
        flex: 1 1 0;
1727
        display: block;
1728
    }
1729

1730
    &.isFloating {
1731
        flex-direction: row;
1732
        left: 0;
1733
        right: 0;
1734

1735
        .autoComplete-details {
1736
            max-height: unset;
1737
            width: 25vw;
1738
        }
1739

1740
        /* Small style variant for macro autocomplete (33vw, max 700px) */
1741
        &[data-macros-autocomplete-style="small"] .autoComplete-details {
1742
            width: 33vw;
1743
            max-width: 700px;
1744
            min-width: 250px;
1745
        }
1746

1747
        &[data-macros-autocomplete-style="small"] {
1748
            &.left {
1749
                &:before {
1750
                    flex: 0 1 calc(var(--targetOffset) * 1px - 33vw);
1751
                }
1752

1753
                &:after {
1754
                    flex: 1 0 auto;
1755
                    max-width: 33vw;
1756
                }
1757
            }
1758

1759
            &.right {
1760
                &:before {
1761
                    flex: 0 0 calc(var(--targetOffset) * 1px + 33vw);
1762
                }
1763
            }
1764

1765
            &.full {
1766
                .autoComplete-details {
1767
                    max-width: 33vw;
1768
                }
1769
            }
1770
        }
1771

1772
        &.left {
1773
            &:before {
1774
                flex: 0 1 calc(var(--targetOffset) * 1px - 25vw);
1775
            }
1776

1777
            &:after {
1778
                flex: 1 0 auto;
1779
                max-width: 50vw;
1780
            }
1781
        }
1782

1783
        &.right {
1784
            &:before {
1785
                flex: 0 0 calc(var(--targetOffset) * 1px + 50vw);
1786
            }
1787
        }
1788

1789
        &.full {
1790
            &:before {
1791
                content: "";
1792
                flex: 0 1 calc(var(--targetOffset) * 1px);
1793
                display: block;
1794
            }
1795

1796
            .autoComplete-details {
1797
                flex: 0 0 auto;
1798
                max-width: 50vw;
1799
                width: unset;
1800
            }
1801

1802
            &:after {
1803
                content: "";
1804
                flex: 1 1 0;
1805
                display: block;
1806
            }
1807
        }
1808
    }
1809
}
1810

1811

1812
body[data-stscript-style="dark"] {
1813
    --ac-style-color-border: rgba(69 69 69 / 1);
1814
    --ac-style-color-background: rgba(32 32 32 / 1);
1815
    --ac-style-color-text: rgba(204 204 204 / 1);
1816
    --ac-style-color-matchedBackground: rgba(0 0 0 / 0);
1817
    --ac-style-color-matchedText: rgba(108 171 251 / 1);
1818
    --ac-style-color-selectedBackground: rgba(32 57 92 / 1);
1819
    --ac-style-color-selectedText: rgba(255 255 255 / 1);
1820
    --ac-style-color-notSelectableBackground: rgb(65, 78, 95);
1821
    --ac-style-color-notSelectableText: rgba(255 255 255 / 1);
1822
    --ac-style-color-hoveredBackground: rgba(43 45 46 / 1);
1823
    --ac-style-color-hoveredText: rgba(204 204 204 / 1);
1824
    --ac-style-color-argName: rgba(171 209 239 / 1);
1825
    --ac-style-color-type: rgba(131 199 177 / 1);
1826
    --ac-style-color-cmd: rgba(219 219 173 / 1);
1827
    --ac-style-color-symbol: rgba(115 156 211 / 1);
1828
    --ac-style-color-string: rgba(190 146 122 / 1);
1829
    --ac-style-color-number: rgba(188 205 170 / 1);
1830
    --ac-style-color-variable: rgba(131 193 252 / 1);
1831
    --ac-style-color-variableLanguage: rgba(98 160 251 / 1);
1832
    --ac-style-color-punctuation: rgba(242 214 48 / 1);
1833
    --ac-style-color-punctuationL1: rgba(195 118 210 / 1);
1834
    --ac-style-color-punctuationL2: rgba(98 160 251 / 1);
1835
    --ac-style-color-currentParenthesis: rgba(195 118 210 / 1);
1836
    --ac-style-color-comment: rgba(122 151 90 / 1);
1837
    --ac-style-color-keyword: rgba(182 137 190 / 1);
1838
}
1839

1840
body[data-stscript-style="light"] {
1841
    --ac-style-color-border: rgba(200 200 200 / 1);
1842
    --ac-style-color-background: rgba(248 248 248 / 1);
1843
    --ac-style-color-text: rgba(59 59 59 / 1);
1844
    --ac-style-color-matchedBackground: rgba(0 0 0 / 0);
1845
    --ac-style-color-matchedText: rgba(61 104 188 / 1);
1846
    --ac-style-color-selectedBackground: rgba(232 232 232 / 1);
1847
    --ac-style-color-selectedText: rgba(0 0 0 / 1);
1848
    --ac-style-color-notSelectableBackground: rgba(232 232 232 / 1);
1849
    --ac-style-color-notSelectableText: rgb(83, 83, 83);
1850
    --ac-style-color-hoveredBackground: rgba(242 242 242 / 1);
1851
    --ac-style-color-hoveredText: rgba(59 59 59 / 1);
1852
    --ac-style-color-argName: rgba(16 24 125 / 1);
1853
    --ac-style-color-type: rgba(80 127 152 / 1);
1854
    --ac-style-color-cmd: rgba(113 94 43 / 1);
1855
    --ac-style-color-symbol: rgba(36 37 249 / 1);
1856
    --ac-style-color-string: rgba(139 31 24 / 1);
1857
    --ac-style-color-number: rgba(76 132 91 / 1);
1858
    --ac-style-color-variable: rgba(16 24 125 / 1);
1859
    --ac-style-color-currentParenthesis: rgba(195 118 210 / 1);
1860
    --ac-style-color-comment: rgba(70 126 26 / 1);
1861
    --ac-style-color-keyword: rgba(182 137 190 / 1);
1862
}
1863

1864
body[data-stscript-style="theme"] {
1865
    --ac-style-color-border: var(--SmartThemeBorderColor);
1866
    --ac-style-color-background: var(--SmartThemeBlurTintColor);
1867
    --ac-style-color-text: var(--SmartThemeEmColor);
1868
    --ac-style-color-matchedBackground: rgba(0 0 0 / 0);
1869
    --ac-style-color-matchedText: var(--SmartThemeQuoteColor);
1870
    --ac-style-color-selectedBackground: color-mix(in srgb, rgb(128 128 128) 75%, var(--SmartThemeChatTintColor));
1871
    --ac-style-color-selectedText: var(--SmartThemeBodyColor);
1872
    --ac-style-color-notSelectableBackground: color-mix(in srgb, rgb(128 128 128) 50%, var(--SmartThemeChatTintColor));
1873
    --ac-style-color-notSelectableText: var(--SmartThemeBodyColor);
1874
    --ac-style-color-hoveredBackground: color-mix(in srgb, rgb(128 128 128) 30%, var(--SmartThemeChatTintColor));
1875
    --ac-style-color-hoveredText: var(--SmartThemeEmColor);
1876
    --ac-style-color-argName: rgba(171 209 239 / 1);
1877
    --ac-style-color-type: rgba(131 199 177 / 1);
1878
    --ac-style-color-cmd: rgba(219 219 173 / 1);
1879
    --ac-style-color-symbol: rgba(115 156 211 / 1);
1880
    --ac-style-color-string: rgba(190 146 122 / 1);
1881
    --ac-style-color-variable: rgba(131 193 252 / 1);
1882
    --ac-style-color-currentParenthesis: rgba(195 118 210 / 1);
1883
    --ac-style-color-comment: rgba(122 151 90 / 1);
1884
    --ac-style-color-keyword: rgba(182 137 190 / 1);
1885
}
1886

1887
body {
1888
    --ac-font-scale: 0.8;
1889
}
1890

1891
.autoComplete,
1892
.autoComplete-details {
1893
    --ac-color-border: var(--ac-style-color-border, rgba(69 69 69 / 1));
1894
    --ac-color-background: var(--ac-style-color-background, rgba(32 32 32 / 1));
1895
    --ac-color-text: var(--ac-style-color-text, rgba(204 204 204 / 1));
1896
    --ac-color-matchedBackground: var(--ac-style-color-matchedBackground, rgba(0 0 0 / 0));
1897
    --ac-color-matchedText: var(--ac-style-color-matchedText, rgba(108 171 251 / 1));
1898
    --ac-color-selectedBackground: var(--ac-style-color-selectedBackground, rgba(32 57 92 / 1));
1899
    --ac-color-selectedText: var(--ac-style-color-selectedText, rgba(255 255 255 / 1));
1900
    --ac-color-notSelectableBackground: var(--ac-style-color-notSelectableBackground, rgb(60, 73, 92));
1901
    --ac-color-notSelectableText: var(--ac-style-color-notSelectableText, rgba(255 255 255 / 1));
1902
    --ac-color-hoveredBackground: var(--ac-style-color-hoveredBackground, rgba(43 45 46 / 1));
1903
    --ac-color-hoveredText: var(--ac-style-color-hoveredText, rgba(204 204 204 / 1));
1904
    --ac-color-argName: var(--ac-style-color-argName, rgba(171 209 239 / 1));
1905
    --ac-color-type: var(--ac-style-color-type, rgba(131 199 177 / 1));
1906
    --ac-color-cmd: var(--ac-style-color-cmd, rgba(219 219 173 / 1));
1907
    --ac-color-symbol: var(--ac-style-color-symbol, rgba(115 156 211 / 1));
1908
    --ac-color-string: var(--ac-style-color-string, rgba(190 146 122 / 1));
1909
    --ac-color-number: var(--ac-style-color-number, rgba(188 205 170 / 1));
1910
    --ac-color-variable: var(--ac-style-color-variable, rgba(131 193 252 / 1));
1911
    --ac-color-variableLanguage: var(--ac-style-color-variableLanguage, rgba(98 160 251 / 1));
1912
    --ac-color-punctuation: var(--ac-style-color-punctuation, rgba(242 214 48 / 1));
1913
    --ac-color-punctuationL1: var(--ac-style-color-punctuationL1, rgba(195 118 210 / 1));
1914
    --ac-color-punctuationL2: var(--ac-style-color-punctuationL2, rgba(98 160 251 / 1));
1915
    --ac-color-currentParenthesis: var(--ac-style-color-currentParenthesis, rgba(195 118 210 / 1));
1916
    --ac-color-comment: var(--ac-style-color-comment, rgba(122 151 90 / 1));
1917
    --ac-color-keyword: var(--ac-style-color-keyword, rgba(182 137 190 / 1));
1918

1919
    font-size: calc(var(--ac-font-scale) * 1em);
1920

1921
    --bottom: 50vh;
1922
    background: var(--ac-color-background);
1923
    backdrop-filter: blur(var(--SmartThemeBlurStrength));
1924
    border: 1px solid var(--ac-color-border);
1925
    border-radius: 3px;
1926
    color: var(--ac-color-text);
1927
    max-height: calc(95vh - var(--bottom));
1928
    list-style: none;
1929
    margin: 0px;
1930
    overflow: auto;
1931
    padding: 0px;
1932
    padding-bottom: 1px;
1933
    line-height: 1.2;
1934
    text-align: left;
1935
    z-index: 10000;
1936

1937
    * {
1938
        text-shadow: none;
1939
    }
1940
}
1941

1942
body[data-stscript-style] .autoComplete [data-option-type] {
1943
    &[data-option-type="enum"] .type {
1944
        color: var(--ac-color-string);
1945
    }
1946

1947
    &[data-option-type="command"] .type {
1948
        color: var(--ac-color-cmd);
1949
    }
1950

1951
    &[data-option-type="namedArgument"] .type {
1952
        color: var(--ac-color-argName);
1953
    }
1954

1955
    &[data-option-type="variable"] .type {
1956
        color: var(--ac-color-punctuationL1);
1957
    }
1958

1959
    &[data-option-type="qr"] .type {
1960
        color: var(--ac-color-variable);
1961
    }
1962

1963
    &[data-option-type="macro"] .type {
1964
        color: var(--ac-color-variableLanguage);
1965
    }
1966

1967
    &[data-option-type="number"] .type {
1968
        color: var(--ac-color-number);
1969
    }
1970

1971
    &[data-option-type="name"] .type {
1972
        color: var(--ac-color-type);
1973
    }
1974
}
1975

1976
body[data-stscript-style] .hljs.language-stscript {
1977
    * {
1978
        text-shadow: none !important;
1979
    }
1980

1981
    text-shadow: none !important;
1982

1983
    background-color: var(--ac-style-color-background);
1984
    color: var(--ac-style-color-text);
1985

1986
    .hljs-title.function_ {
1987
        color: var(--ac-style-color-cmd);
1988
    }
1989

1990
    .hljs-title.function_.invoke__ {
1991
        color: var(--ac-style-color-cmd);
1992
    }
1993

1994
    .hljs-string {
1995
        color: var(--ac-style-color-string);
1996
    }
1997

1998
    .hljs-number {
1999
        color: var(--ac-style-color-number);
2000
    }
2001

2002
    .hljs-variable {
2003
        color: var(--ac-style-color-variable);
2004
    }
2005

2006
    .hljs-variable.language_ {
2007
        color: var(--ac-style-color-variableLanguage);
2008
    }
2009

2010
    .hljs-property {
2011
        color: var(--ac-style-color-argName);
2012
    }
2013

2014
    .hljs-punctuation {
2015
        color: var(--ac-style-color-punctuation);
2016
    }
2017

2018
    .hljs-comment {
2019
        color: var(--ac-style-color-comment);
2020
    }
2021

2022
    .hljs-abort {
2023
        color: var(--ac-style-color-abort, #e38e23);
2024
        font-weight: bold;
2025
    }
2026

2027
    .hljs-keyword {
2028
        color: var(--ac-style-color-keyword);
2029
        font-weight: bold;
2030
    }
2031

2032
    .hljs-pipe {
2033
        color: var(--ac-style-color-punctuation);
2034
    }
2035

2036
    .hljs-pipebreak {
2037
        color: var(--ac-style-color-type);
2038
    }
2039

2040
    .hljs-closure {
2041
        >.hljs-punctuation {
2042
            color: var(--ac-style-color-punctuation);
2043
        }
2044

2045
        .hljs-closure {
2046
            >.hljs-punctuation {
2047
                color: var(--ac-style-color-punctuationL1);
2048
            }
2049

2050
            .hljs-closure {
2051
                >.hljs-punctuation {
2052
                    color: var(--ac-style-color-punctuationL2);
2053
                }
2054

2055
                .hljs-closure {
2056
                    >.hljs-punctuation {
2057
                        color: var(--ac-style-color-punctuation);
2058
                    }
2059

2060
                    .hljs-closure {
2061
                        >.hljs-punctuation {
2062
                            color: var(--ac-style-color-punctuationL1);
2063
                        }
2064

2065
                        .hljs-closure {
2066
                            >.hljs-punctuation {
2067
                                color: var(--ac-style-color-punctuationL2);
2068
                            }
2069
                        }
2070
                    }
2071
                }
2072
            }
2073
        }
2074
    }
2075
}
2076

2077
.autoComplete {
2078
    padding-bottom: 1px;
2079
    display: grid;
2080
    grid-template-columns: 0fr auto minmax(50%, 1fr);
2081
    align-items: center;
2082
    max-height: calc(95vh - var(--bottom));
2083
    container-type: inline-size;
2084

2085
    >.item {
2086
        cursor: pointer;
2087
        padding: 3px;
2088
        text-shadow: none;
2089
        display: flex;
2090
        gap: 0.5em;
2091
        display: contents;
2092

2093
        >.stopgap {
2094
            opacity: 0.75;
2095
            display: none;
2096
        }
2097

2098
        @container (max-width: 80em) {
2099
            .specs {
2100
                grid-column: 2 / 4;
2101
            }
2102

2103
            >.help {
2104
                grid-column: 2 / 4;
2105
                padding-left: 1em;
2106
                opacity: 0.75;
2107
                height: auto;
2108
            }
2109

2110
            >.stopgap {
2111
                display: inline-block;
2112
            }
2113
        }
2114

2115
        &.blank {
2116
            display: block;
2117
            grid-column: 1 / 4;
2118
        }
2119

2120
        &:hover>* {
2121
            background-color: var(--ac-color-hoveredBackground);
2122
            color: var(--ac-color-hoveredText);
2123
        }
2124

2125
        &.selected>* {
2126
            background-color: var(--ac-color-selectedBackground);
2127
            color: var(--ac-color-selectedText);
2128
        }
2129

2130
        &.selected.not-selectable>* {
2131
            background-color: var(--ac-color-notSelectableBackground);
2132
            color: var(--ac-color-notSelectableText);
2133
        }
2134

2135
        >* {
2136
            height: 100%;
2137
        }
2138

2139
        >*+* {
2140
            padding-left: 0.5em;
2141
        }
2142

2143
        >.type {
2144
            flex: 0 0 auto;
2145
            display: inline-flex;
2146
            justify-content: center;
2147
            width: 2.25em;
2148
            font-size: 0.8em;
2149
            text-align: center;
2150
            /* opacity: 0.6; */
2151
            white-space: nowrap;
2152
            font-family: var(--monoFontFamily);
2153
            line-height: calc(1.2em / 0.8);
2154
            /* &:before { content: "["; }
2155
            &:after { content: "]"; } */
2156
        }
2157

2158
        >.specs {
2159
            align-items: flex-start;
2160

2161
            >.name {
2162
                >.matched {
2163
                    background-color: var(--ac-color-matchedBackground);
2164
                    color: var(--ac-color-matchedText);
2165
                    font-weight: bold;
2166
                }
2167
            }
2168

2169
            >.body {
2170
                flex-wrap: wrap;
2171
                column-gap: 0.5em;
2172

2173
                >.arguments {
2174
                    display: contents;
2175
                    height: 100%;
2176
                }
2177
            }
2178
        }
2179

2180
        >.help {
2181
            height: 100%;
2182

2183
            >.helpContent {
2184
                text-overflow: ellipsis;
2185
                overflow: hidden;
2186
                font-size: 0.9em;
2187
                white-space: nowrap;
2188
                line-height: 1.2;
2189
                max-height: 1.2em;
2190
                display: block;
2191

2192
                >* {
2193
                    display: contents;
2194
                }
2195
            }
2196
        }
2197
    }
2198
}
2199

2200
.autoComplete-details {
2201
    display: flex;
2202
    flex-direction: column;
2203
    gap: 0.5em;
2204

2205
    >.specs {
2206
        cursor: default;
2207
        flex-direction: column;
2208
        padding: 0.25em 0.25em 0.5em 0.25em;
2209
        border-bottom: 1px solid var(--ac-color-border);
2210

2211
        >.head {
2212
            display: flex;
2213
            gap: 0.5em;
2214
        }
2215

2216
        >.head>.name,
2217
        >.name {
2218
            flex: 1 1 auto;
2219
            font-weight: bold;
2220
            color: var(--ac-color-text);
2221
            cursor: help;
2222

2223
            &:hover {
2224
                text-decoration: 1px dotted underline;
2225
            }
2226
        }
2227

2228
        >.head>.rawQuotes {
2229
            padding: 0 0.5em;
2230
            cursor: help;
2231

2232
            &:hover {
2233
                text-decoration: 1px dotted underline;
2234
            }
2235
        }
2236

2237
        >.head>.source {
2238
            padding: 0 0.5em;
2239
            cursor: help;
2240
            display: flex;
2241
            align-items: center;
2242
            gap: 0.5em;
2243

2244
            &.isThirdParty.isExtension {
2245
                color: #F89406;
2246
            }
2247

2248
            &.isCore {
2249
                color: transparent;
2250

2251
                &.isExtension {
2252
                    color: #51A351;
2253
                }
2254

2255
                &:after {
2256
                    content: '';
2257
                    order: -1;
2258
                    height: 14px;
2259
                    aspect-ratio: 1 / 1;
2260
                    background-image: url('/favicon.ico');
2261
                    background-size: contain;
2262
                    background-repeat: no-repeat;
2263
                }
2264
            }
2265

2266
            &:hover {
2267
                text-decoration: 1px dotted underline;
2268
            }
2269
        }
2270

2271
        >.body {
2272
            flex-direction: column;
2273
            gap: 0.5em;
2274

2275
            >.arguments {
2276
                margin: 0;
2277
                padding-left: 1.25em;
2278

2279
                >.argumentItem::marker {
2280
                    color: color-mix(in srgb, var(--ac-color-text), var(--ac-style-color-background));
2281
                }
2282

2283
                .argumentSpec {
2284
                    display: flex;
2285
                    gap: 0.5em;
2286

2287
                    .argument-default {
2288
                        &:before {
2289
                            content: " = ";
2290
                            color: var(--ac-color-text);
2291
                        }
2292

2293
                        color: var(--ac-color-string);
2294
                    }
2295
                }
2296

2297
                .argument {
2298
                    cursor: help;
2299

2300
                    &:hover:not(:has(.argument-name:hover, .argument-types:hover, .argument-enums:hover)) {
2301
                        text-decoration: 1px dotted underline;
2302
                    }
2303
                }
2304

2305
                .argument-name,
2306
                .argument-types,
2307
                .argument-enums,
2308
                .argument-default {
2309
                    cursor: help;
2310

2311
                    &:hover {
2312
                        text-decoration: 1px dotted underline;
2313
                    }
2314
                }
2315

2316
                .argument.optional+.argument-description:before,
2317
                .argumentSpec:has(.argument.optional)+.argument-description:before {
2318
                    content: "(optional) ";
2319
                    color: var(--ac-color-text);
2320
                    opacity: 0.5;
2321
                }
2322

2323
                .argument-description {
2324
                    margin-left: 0.5em;
2325
                    font-family: var(--mainFontFamily);
2326
                    font-size: 0.9em;
2327
                }
2328
            }
2329

2330
            .returns {
2331
                cursor: help;
2332

2333
                &:hover {
2334
                    text-decoration: 1px dotted underline;
2335
                }
2336
            }
2337
        }
2338
    }
2339

2340
    >.help {
2341
        padding: 0 0.5em 0.5em 0.5em;
2342

2343
        div {
2344
            margin-block-end: 1em;
2345
        }
2346

2347
        ul {
2348
            margin: 0;
2349
            padding-left: 1.5em;
2350
        }
2351

2352
        pre {
2353
            margin: 0;
2354

2355
            >code {
2356
                display: block;
2357
                padding: 1px;
2358
                tab-size: 4;
2359
            }
2360
        }
2361
    }
2362

2363
    >.aliases {
2364
        padding: 0 0.5em 0.5em 0.5em;
2365

2366
        &:before {
2367
            content: '(alias: ';
2368
        }
2369

2370
        >.alias {
2371
            font-family: var(--monoFontFamily);
2372

2373
            &+.alias:before {
2374
                content: ', ';
2375
            }
2376
        }
2377

2378
        &:after {
2379
            content: ')';
2380
        }
2381
    }
2382
}
2383

2384
.autoComplete>.item,
2385
.autoComplete-details {
2386
    >.specs {
2387
        display: flex;
2388
        gap: 0.5em;
2389

2390
        >.name {
2391
            font-family: var(--monoFontFamily);
2392
            white-space: nowrap;
2393
            /* color: var(--ac-color-text); */
2394
        }
2395

2396
        >.body {
2397
            display: flex;
2398

2399
            >.arguments {
2400
                font-family: var(--monoFontFamily);
2401

2402
                .argument {
2403
                    white-space: nowrap;
2404

2405
                    &.namedArgument {
2406
                        &:before {
2407
                            content: "[";
2408
                            color: var(--ac-color-text);
2409
                        }
2410

2411
                        &:after {
2412
                            content: "]";
2413
                            color: var(--ac-color-text);
2414
                        }
2415

2416
                        &.optional:after {
2417
                            content: "]?";
2418
                            color: var(--ac-color-text);
2419
                        }
2420

2421
                        >.argument-name {
2422
                            color: var(--ac-color-argName);
2423
                        }
2424
                    }
2425

2426
                    &.unnamedArgument {
2427
                        &:before {
2428
                            content: "(";
2429
                            color: var(--ac-color-text);
2430
                        }
2431

2432
                        &.multiple:before {
2433
                            content: "...(";
2434
                            color: var(--ac-color-text);
2435
                        }
2436

2437
                        &:after {
2438
                            content: ")";
2439
                            color: var(--ac-color-text);
2440
                        }
2441

2442
                        &.optional:after {
2443
                            content: ")?";
2444
                            color: var(--ac-color-text);
2445
                        }
2446
                    }
2447

2448
                    >.argument-name+.argument-types:before {
2449
                        content: "=";
2450
                        color: var(--ac-color-text);
2451
                    }
2452

2453
                    >.argument-types {
2454
                        color: var(--ac-color-type);
2455
                        word-break: break-all;
2456
                        white-space: break-spaces;
2457

2458
                        >.argument-type+.argument-type:before {
2459
                            content: "|";
2460
                            color: var(--ac-color-text);
2461
                        }
2462

2463
                        ;
2464
                    }
2465

2466
                    >.argument-types+.argument-enums,
2467
                    >.argument-name+.argument-enums {
2468
                        &:before {
2469
                            content: "=";
2470
                            color: var(--ac-color-text);
2471
                        }
2472
                    }
2473

2474
                    >.argument-enums {
2475
                        color: var(--ac-color-string);
2476
                        word-break: break-all;
2477
                        white-space: break-spaces;
2478

2479
                        >.argument-enum+.argument-enum:before {
2480
                            content: "|";
2481
                            color: var(--ac-color-text);
2482
                        }
2483

2484
                        ;
2485
                    }
2486
                }
2487
            }
2488

2489
            >.returns {
2490
                font-family: var(--monoFontFamily);
2491
                color: var(--ac-color-text);
2492

2493
                &:before {
2494
                    content: "=> ";
2495
                    color: var(--ac-color-symbol);
2496
                }
2497
            }
2498
        }
2499
    }
2500
}
2501

2502
@media screen and (max-width: 1000px) {
2503
    .autoComplete-wrap {
2504
        left: 1vw;
2505
        right: 1vw;
2506
    }
2507

2508
    .autoComplete-detailsWrap:not(.full) {
2509
        left: 50vw;
2510
    }
2511
}
2512

2513
.slashCommandBrowser {
2514
    >.search {
2515
        display: flex;
2516
        gap: 1em;
2517
        align-items: baseline;
2518
        white-space: nowrap;
2519

2520
        >.searchLabel {
2521
            flex: 1 1 auto;
2522
            display: flex;
2523
            gap: 0.5em;
2524
            align-items: baseline;
2525

2526
            >.searchInput {
2527
                flex: 1 1 auto;
2528
            }
2529
        }
2530

2531
        >.searchOptions {
2532
            display: flex;
2533
            gap: 1em;
2534
            align-items: baseline;
2535
        }
2536
    }
2537

2538
    >.commandContainer {
2539
        display: flex;
2540
        align-items: flex-start;
2541
        container-type: inline-size;
2542

2543
        >.autoComplete {
2544
            flex: 1 1 auto;
2545
            max-height: unset;
2546

2547
            >.isFiltered {
2548
                display: none;
2549
            }
2550

2551
            .specs {
2552
                grid-column: 2 / 4;
2553
            }
2554

2555
            .help {
2556
                grid-column: 2 / 4;
2557
                padding-left: 1em;
2558
                opacity: 0.75;
2559
            }
2560
        }
2561

2562
        >.autoComplete-detailsWrap {
2563
            flex: 0 0 auto;
2564
            align-self: stretch;
2565
            width: 30%;
2566
            position: static;
2567

2568
            &:before {
2569
                flex: 0 1 calc(var(--targetOffset) * 1px);
2570
            }
2571

2572
            >.autoComplete-details {
2573
                max-height: 50vh;
2574
            }
2575
        }
2576

2577
        @container (max-width: 1000px) {
2578
            >.autoComplete-detailsWrap {
2579
                width: 50%;
2580
                max-width: unset;
2581
                position: absolute;
2582
                left: unset;
2583
                right: 0;
2584
                top: 0;
2585
            }
2586
        }
2587
    }
2588
}
2589

2590
.editor_maximize {
2591
    padding: 2px;
2592
}
2593

2594
#character_popup .editor_maximize {
2595
    cursor: pointer;
2596
    margin: 3px;
2597
    opacity: 0.75;
2598
    filter: grayscale(1);
2599
    -webkit-transition: all var(--animation-duration-2x) ease-in-out;
2600
    transition: all var(--animation-duration-2x) ease-in-out;
2601
}
2602

2603
#character_popup .editor_maximize:hover {
2604
    opacity: 1;
2605
}
2606

2607
.text_pole::placeholder {
2608
    color: var(--SmartThemeEmColor) !important;
2609
    opacity: 0.7;
2610
}
2611

2612
textarea::placeholder {
2613
    color: var(--SmartThemeEmColor) !important;
2614
    opacity: 0.7;
2615
}
2616

2617
#send_textarea::placeholder {
2618
    color: var(--SmartThemeEmColor) !important;
2619
    text-align: center;
2620
    white-space: nowrap;
2621
}
2622

2623
#creator_notes_spoiler {
2624
    border: 0;
2625
    font-size: calc(var(--mainFontSize)*.8);
2626
    padding: 5px 0;
2627
}
2628

2629
#creator_notes_spoiler p:last-child {
2630
    margin-bottom: 0;
2631
}
2632

2633
@media screen and (max-width: 1000px) {
2634
    #form_create textarea {
2635
        flex-grow: 1;
2636
        min-height: 20dvh;
2637
    }
2638
}
2639

2640
@media screen and (min-width: 1001px) {
2641
    #description_textarea {
2642
        height: 29vh;
2643
        height: 29dvh;
2644
    }
2645

2646
    #firstmessage_textarea {
2647
        resize: none;
2648
        flex: 1;
2649
    }
2650
}
2651

2652
#character_name_pole {
2653
    margin-bottom: 0;
2654
}
2655

2656
#character_cross {
2657
    position: absolute;
2658
    right: 5px;
2659
    top: 5px;
2660
    /* width: 20px;
2661
    height: 20px; */
2662
    cursor: pointer;
2663
    opacity: 0.6;
2664
    font-size: 24px;
2665
}
2666

2667

2668

2669
.text_pole {
2670
    background-color: var(--black30a);
2671
    color: var(--SmartThemeBodyColor);
2672
    border: 1px solid var(--SmartThemeBorderColor);
2673
    border-radius: 5px;
2674
    font-family: var(--mainFontFamily);
2675
    padding: 3px 5px;
2676
    width: 100%;
2677
    margin: 5px 0;
2678
    height: fit-content;
2679
}
2680

2681
select.text_pole {
2682
    padding-right: 20px;
2683
}
2684

2685

2686
.chat_injections_list:empty {
2687
    width: 100%;
2688
    height: 100%;
2689
}
2690

2691
.chat_injections_list:empty::before {
2692
    display: flex;
2693
    align-items: center;
2694
    justify-content: center;
2695
    content: "No injections";
2696
    font-weight: bolder;
2697
    width: 100%;
2698
    height: 100%;
2699
    opacity: 0.8;
2700
    min-height: 3rem;
2701
}
2702

2703
.template_parameters_list code {
2704
    cursor: pointer;
2705
}
2706

2707
h3 {
2708
    margin: 10px 0;
2709
}
2710

2711
#top-bar h3 {
2712
    margin: 0;
2713
    padding: 10px 0;
2714
}
2715

2716
#top-bar h4 {
2717
    margin: 0;
2718
    padding: 5px 0;
2719
}
2720

2721
input[type="file"] {
2722
    display: none;
2723
}
2724

2725
#right-nav-panel-tabs {
2726
    display: flex;
2727
    align-items: center;
2728
    gap: 5px;
2729
    overflow: hidden;
2730
    width: 100%;
2731
}
2732

2733
#rm_PinAndTabs {
2734
    display: flex;
2735
    align-items: center;
2736
    flex-wrap: wrap;
2737
    gap: 10px;
2738
    padding-right: 5px;
2739
}
2740

2741
#chartokenwarning.menu_button {
2742
    font-size: unset;
2743
    height: fit-content;
2744
    aspect-ratio: unset;
2745
}
2746

2747
/* ##################################################################### */
2748
/*                      Right Panel's Upper Tabs                         */
2749
/* ##################################################################### */
2750

2751
.right_menu_button {
2752
    display: block;
2753
    cursor: pointer;
2754
    text-align: center;
2755
    margin-top: 0;
2756
    padding: 1px;
2757
    filter: brightness(75%);
2758
    -webkit-transition: all var(--animation-duration-3x) ease-in-out;
2759
    transition: all var(--animation-duration-3x) ease-in-out;
2760
}
2761

2762
.right_menu_button.active,
2763
.right_menu_button:hover {
2764
    filter: brightness(150%);
2765
}
2766

2767
#rm_button_characters,
2768
#rm_button_panel_pin_div,
2769
#lm_button_panel_pin_div,
2770
#WI_button_panel_pin_div {
2771
    font-size: 24px;
2772
    display: inline;
2773
    padding: 1px;
2774
}
2775

2776
#rm_button_panel_pin_div,
2777
#lm_button_panel_pin_div,
2778
#WI_button_panel_pin_div {
2779
    opacity: 0.5;
2780
    transition: var(--animation-duration-2x);
2781
}
2782

2783
#rm_button_panel_pin_div:hover,
2784
#rm_button_panel_pin_div:has(:focus-visible),
2785
#lm_button_panel_pin_div:hover,
2786
#lm_button_panel_pin_div:has(:focus-visible),
2787
#WI_button_panel_pin_div:hover,
2788
#WI_button_panel_pin_div:has(:focus-visible) {
2789
    opacity: 1;
2790
}
2791

2792
#lm_button_panel_pin_div {
2793
    text-align: start;
2794
}
2795

2796
#rm_button_panel_pin,
2797
#lm_button_panel_pin,
2798
#WI_panel_pin {
2799
    display: none;
2800
}
2801

2802
#rm_button_panel_pin:checked+label,
2803
#lm_button_panel_pin:checked+label,
2804
#WI_panel_pin:checked+label {
2805
    display: inline;
2806
}
2807

2808
#rm_button_panel_pin:checked+label .checked,
2809
#lm_button_panel_pin:checked+label .checked,
2810
#WI_panel_pin:checked+label .checked {
2811
    display: inline;
2812
}
2813

2814
#rm_button_panel_pin:checked+label .unchecked,
2815
#lm_button_panel_pin:checked+label .unchecked,
2816
#WI_panel_pin:checked+label .unchecked {
2817
    display: none;
2818
}
2819

2820
#rm_button_panel_pin:not(:checked)+label .checked,
2821
#lm_button_panel_pin:not(:checked)+label .checked,
2822
#WI_panel_pin:not(:checked)+label .checked {
2823
    display: none;
2824
}
2825

2826
#rm_button_panel_pin:not(:checked)+label .unchecked,
2827
#lm_button_panel_pin:not(:checked)+label .unchecked,
2828
#WI_panel_pin:not(:checked)+label .unchecked {
2829
    display: inline;
2830
}
2831

2832
#rm_button_selected_ch {
2833
    flex: 1;
2834
    overflow: hidden;
2835
    opacity: 0.5;
2836
    padding: 1px;
2837
}
2838

2839
#rm_button_selected_ch:hover {
2840
    opacity: 1;
2841
}
2842

2843
#rm_button_selected_ch h2 {
2844
    cursor: pointer;
2845
    text-overflow: ellipsis;
2846
    overflow: hidden;
2847
    text-align: left;
2848
    white-space: nowrap;
2849
    margin: 0;
2850
    font-size: calc(var(--mainFontSize) * 1.25);
2851
}
2852

2853
#rm_button_selected_ch h2:empty {
2854
    display: none;
2855
}
2856

2857
.selected-right-tab {
2858
    filter: brightness(150%);
2859
}
2860

2861
#rm_print_characters_pagination {
2862
    display: flex;
2863
    flex-direction: row;
2864
    gap: 5px;
2865
    justify-content: center;
2866
    align-items: center;
2867
    flex-wrap: wrap;
2868
    padding: 1px;
2869
}
2870

2871
#rm_print_characters_pagination .menu_button {
2872
    margin: 0;
2873
    padding: 4px 5px;
2874
}
2875

2876
.bulk_select_checkbox {
2877
    align-self: center;
2878
}
2879

2880
#rm_print_characters_block .text_block {
2881
    width: 100%;
2882
    opacity: 0.5;
2883
    margin: 0 auto 1px auto;
2884
    padding: 5px;
2885
}
2886

2887
#rm_print_characters_block .empty_block {
2888
    display: flex;
2889
    flex-direction: column;
2890
    gap: 10px;
2891
    flex-wrap: wrap;
2892
    text-align: center;
2893
    justify-content: center;
2894
    align-items: center;
2895
}
2896

2897
.hidden_block {
2898
    cursor: default;
2899
}
2900

2901
#rm_print_characters_block .hidden_block p {
2902
    display: inline;
2903
}
2904

2905
#rm_print_characters_block {
2906
    overflow-y: auto;
2907
    flex-grow: 1;
2908
    display: flex;
2909
    height: 100%;
2910
    padding: 1px;
2911
}
2912

2913
#rm_print_characters_block .entity_block.useless {
2914
    opacity: 0.25;
2915
}
2916

2917
#rm_ch_create_block {
2918
    display: none;
2919
    overflow-y: auto;
2920
    height: 100%;
2921
}
2922

2923
#rm_extensions_block {
2924
    overflow-y: auto;
2925
}
2926

2927
#rm_button_bar {
2928
    display: flex;
2929
    gap: 5px;
2930
    align-items: center;
2931
    flex-wrap: wrap;
2932
}
2933

2934
#rm_button_bar .menu_button {
2935
    width: calc(var(--mainFontSize) * 1.7);
2936
    aspect-ratio: 1;
2937
    margin: 0;
2938
}
2939

2940
#rm_buttons_container {
2941
    display: contents;
2942
}
2943

2944
#floatingPrompt,
2945
#cfgConfig {
2946
    overflow-y: auto;
2947
    max-width: 90dvw;
2948
    max-height: 90dvh;
2949
    min-width: 100px;
2950
    min-height: 100px;
2951
    border-radius: 10px;
2952
    border: 1px solid var(--SmartThemeBorderColor);
2953
    position: fixed;
2954
    padding: 10px;
2955
    padding-top: 25px;
2956
    display: none;
2957
    flex-direction: column;
2958
    box-shadow: 0 0 10px var(--black70a);
2959
    z-index: 4000;
2960
    left: 0;
2961
    top: 0;
2962
    margin: 0;
2963
    right: unset;
2964
    width: calc(((100dvw - var(--sheldWidth)) / 2) - 1px);
2965
    height: unset;
2966

2967
}
2968

2969
#movingDivs>div {
2970
    z-index: 4000;
2971
}
2972

2973
#left-nav-panel {
2974
    z-index: 3000;
2975
}
2976

2977
.floating_prompt_radio_group,
2978
.radio_group {
2979
    display: flex;
2980
    flex-direction: column;
2981
    margin-top: 5px;
2982
}
2983

2984
#extension_floating_counter {
2985
    font-weight: 600;
2986
    color: var(--SmartThemeQuoteColor);
2987
}
2988

2989
.extension_token_counter {
2990
    font-size: calc(var(--mainFontSize) * 0.875);
2991
    width: 100%;
2992
    text-align: right;
2993
    margin-bottom: 5px;
2994
}
2995

2996
.floating_prompt_settings textarea {
2997
    font-size: calc(var(--mainFontSize) * 0.9);
2998
    line-height: 1.2;
2999
}
3000

3001
.floating_panel_close,
3002
.floating_panel_maximize {
3003
    height: 15px;
3004
    aspect-ratio: 1 / 1;
3005
    font-size: 20px;
3006
    opacity: 0.5;
3007
    transition: all var(--animation-duration-2x);
3008
}
3009

3010
.floating_panel_maximize:hover,
3011
.floating_panel_close:hover {
3012
    cursor: pointer;
3013
    opacity: 1;
3014
}
3015

3016
.dragClose {
3017
    height: 15px;
3018
    aspect-ratio: 1 / 1;
3019
    font-size: calc(var(--mainFontSize)*1.3);
3020
    opacity: 0.5;
3021
    transition: all var(--animation-duration-2x);
3022
    filter: drop-shadow(0px 0px 2px black);
3023
    text-shadow: none;
3024
}
3025

3026
.dragClose:hover {
3027
    cursor: pointer;
3028
    opacity: 1;
3029
}
3030

3031
#floatingPrompt .drag-grabber {
3032
    position: unset;
3033
}
3034

3035
/* ################################################################*/
3036
/*   CUSTOMIZE THE DROPDOWN SELECT COLORS FOR RIGHT MENU
3037
/*#################################################################*/
3038

3039
select {
3040
    -moz-appearance: none;
3041
    -webkit-appearance: none;
3042
    appearance: none;
3043
    padding: 3px 5px;
3044
    background-color: var(--black30a);
3045
    border: 1px solid var(--SmartThemeBorderColor);
3046
    border-radius: 5px;
3047
    margin-bottom: 5px;
3048
    height: min-content;
3049
    background-image: url('/img/down-arrow.svg');
3050
    background-repeat: no-repeat;
3051
    background-position: right 6px center;
3052
    background-size: 8px 5px;
3053
}
3054

3055
select option {
3056
    /* works to highlight selected/active option */
3057
    background-color: var(--white50a);
3058
    color: var(--black70a);
3059
}
3060

3061
select option:not(:checked) {
3062
    /* works to color unselected items */
3063
    background-color: var(--black70a);
3064
    color: var(--white70a);
3065
}
3066

3067
select option[disabled]:not(:checked) {
3068
    color: var(--white30a);
3069
}
3070

3071
/*#######################################################################*/
3072

3073
#rm_api_block {
3074
    overflow-y: auto;
3075
}
3076

3077
.API-logo {
3078
    margin: 0 auto;
3079
    width: min-content;
3080
    opacity: 0.5;
3081
}
3082

3083
.oobabooga_logo {
3084
    margin: 5px auto;
3085
    text-align: center;
3086
}
3087

3088
.menu_button[disabled],
3089
.menu_button.disabled {
3090
    filter: brightness(75%) grayscale(1);
3091
    opacity: 0.5;
3092
    cursor: inherit;
3093
    pointer-events: none;
3094
}
3095

3096
.menu_button.toggleable {
3097
    padding-left: 20px;
3098
}
3099

3100
.menu_button.toggleable.toggled {
3101
    border-color: var(--active);
3102
}
3103

3104
.menu_button.toggleable:not(.toggled) {
3105
    filter: brightness(80%);
3106
}
3107

3108
.menu_button.toggleable::before {
3109
    font-family: "Font Awesome 6 Free";
3110
    margin-left: 10px;
3111
    position: absolute;
3112
    left: 0;
3113
}
3114

3115
.menu_button.toggleable.toggled::before {
3116
    content: "\f00c";
3117
    color: var(--active);
3118
}
3119

3120
.menu_button.toggleable:not(.toggled)::before {
3121
    content: "\f00d";
3122
    color: var(--fullred);
3123
}
3124

3125
.fav_on {
3126
    color: var(--golden) !important;
3127
}
3128

3129
.world_set,
3130
.toggleEnabled {
3131
    color: var(--active) !important;
3132
}
3133

3134
.menu_button.togglable:not(.toggleEnabled) {
3135
    color: var(--fullred);
3136
}
3137

3138
.displayBlock {
3139
    display: block !important;
3140
}
3141

3142
.displayNone {
3143
    display: none !important;
3144
}
3145

3146
#api_url_text {
3147
    display: block;
3148
}
3149

3150
/* Fix font size difference in API Connections dropdowns - Issue #4599 */
3151
#custom_model_id {
3152
    font-size: calc(var(--mainFontSize) * 0.95);
3153
}
3154

3155
.menu_button.api_button:hover {
3156
    background-color: var(--active);
3157
}
3158

3159
.api-load-icon {
3160
    font-size: 24px;
3161
    display: none;
3162
}
3163

3164
#rm_characters_block {
3165
    display: flex;
3166
    overflow-y: hidden;
3167
    flex-direction: column;
3168
    height: 100%;
3169
}
3170

3171
#rm_characters_block .right_menu_button {
3172
    padding-right: 15px;
3173
}
3174

3175
#rm_characters_topbar {
3176
    display: flex;
3177
    flex-direction: column;
3178
}
3179

3180
#rm_characters_topbar_buttons {
3181
    margin-top: 0;
3182
    margin-bottom: 10px;
3183
    display: flex;
3184
    flex-direction: row;
3185
    align-items: baseline;
3186
}
3187

3188
#rm_characters_topbar_expander {
3189
    flex-grow: 1;
3190
}
3191

3192
#charListFixedTop {
3193
    padding: 5px;
3194
}
3195

3196
#form_character_search_form {
3197
    display: flex;
3198
    flex-direction: row;
3199
    align-items: stretch;
3200
    column-gap: 5px;
3201
}
3202

3203
#GroupFavDelOkBack .menu_button {
3204
    margin: 0;
3205
    height: fit-content;
3206
    padding: 5px;
3207
    border-radius: 5px;
3208
    aspect-ratio: 1 / 1;
3209
}
3210

3211
#character_sort_order {
3212
    flex: 1;
3213
    border-radius: 5px;
3214
    margin: 0;
3215
    min-width: 75px;
3216
}
3217

3218
#character_search_bar {
3219
    flex: 1;
3220
    margin-bottom: 0;
3221
}
3222

3223
#rm_button_search {
3224
    font-size: 1.1em;
3225
    margin: 0 2px;
3226
}
3227

3228
#persona_search_bar {
3229
    min-width: 80px;
3230
}
3231

3232
#persona_sort_order {
3233
    max-width: 4em;
3234
}
3235

3236
#persona-management-block .paginationjs-nav {
3237
    width: max-content;
3238
}
3239

3240
#persona-management-block .avatar_container_states .menu_button {
3241
    padding: 3px 5px;
3242
    pointer-events: initial;
3243
}
3244

3245
#persona_controls .persona_name {
3246
    text-overflow: ellipsis;
3247
    overflow: hidden;
3248
    text-align: left;
3249
    white-space: nowrap;
3250
    font-size: calc(var(--mainFontSize) * 1.25);
3251
    opacity: 0.5;
3252
}
3253

3254
#persona_connections_buttons {
3255
    margin-bottom: 5px;
3256
}
3257

3258
input[type=search]::-webkit-search-cancel-button {
3259
    -webkit-appearance: none;
3260
    height: 1em;
3261
    width: 1em;
3262
    border-radius: 50em;
3263
    background-color: var(--SmartThemeBodyColor);
3264
    mask: url('/img/times-circle.svg') no-repeat 50% 50%;
3265
    background-size: contain;
3266
    opacity: 0;
3267
    pointer-events: none;
3268
    cursor: pointer;
3269
}
3270

3271
input[type=search]:focus::-webkit-search-cancel-button {
3272
    opacity: .5;
3273
    pointer-events: all;
3274
}
3275

3276
.bogus_folder_select,
3277
.character_select {
3278
    display: flex;
3279
    flex-direction: row;
3280
    align-items: center;
3281
    padding: 5px;
3282
    border-radius: 10px;
3283
    cursor: pointer;
3284
    margin-bottom: 1px;
3285
}
3286

3287
.character_select.inline_avatar,
3288
.missing-avatar.inline_avatar {
3289
    padding: unset;
3290
    border-radius: var(--avatar-base-border-radius-round);
3291
    font-size: 20px;
3292
}
3293

3294
/*applies to char list and mes_text char display name*/
3295

3296
.ch_name {
3297
    font-weight: bolder;
3298
}
3299

3300
.character_name_block {
3301
    display: flex;
3302
    align-items: baseline;
3303
    flex-direction: row;
3304
    gap: 5px;
3305
    margin-bottom: 6px;
3306
}
3307

3308
.character_name_block_sub_line {
3309
    position: absolute;
3310
    right: 0px;
3311
    top: calc(var(--mainFontSize) + 2px);
3312
    font-size: calc(var(--mainFontSize) * 0.6);
3313
    color: var(--grey7070a);
3314
}
3315

3316
.character_name_block .ch_add_placeholder {
3317
    display: none;
3318
}
3319

3320
.ch_avatar_url {
3321
    font-style: italic;
3322
}
3323

3324
.bogus_folder_select .avatar,
3325
.character_select .avatar {
3326
    align-self: center;
3327
}
3328

3329
.ch_description {
3330
    font-size: calc(var(--mainFontSize) * 0.8);
3331
    white-space: nowrap;
3332
    text-overflow: ellipsis;
3333
    overflow: hidden;
3334
    width: 100%;
3335
    margin-top: -5px;
3336
}
3337

3338
.mes_block .ch_name {
3339
    max-width: 100%;
3340
    min-height: 22px;
3341
    align-items: flex-start;
3342
}
3343

3344
/*applies to both groups and solos chars in the char list*/
3345
#rm_print_characters_block .character_select_container,
3346
#rm_print_characters_block .group_select_container {
3347
    position: relative;
3348
}
3349

3350
.character_name_block .ch_name,
3351
.avatar-container .ch_name {
3352
    flex: 1 1 auto;
3353
    white-space: nowrap;
3354
    overflow: hidden;
3355
    text-wrap: nowrap;
3356
    text-overflow: ellipsis;
3357
    display: block;
3358
}
3359

3360
.avatar-container .ch_additional_info,
3361
.character_name_block .character_version {
3362
    text-overflow: ellipsis;
3363
    overflow: hidden;
3364
    text-wrap: nowrap;
3365
    max-width: 50%;
3366
}
3367

3368
#rm_print_characters_block .character_name_block> :last-child {
3369
    flex: 0 100000 auto;
3370
    /* Force shrinking first */
3371
    overflow: hidden;
3372
    text-wrap: nowrap;
3373
    text-overflow: ellipsis;
3374
}
3375

3376
.bogus_folder_select:hover,
3377
.character_select:hover,
3378
.avatar-container:hover {
3379
    background-color: var(--white30a);
3380
}
3381

3382
/* BG MENU */
3383

3384
#bg_menu {
3385
    cursor: pointer;
3386
    position: fixed;
3387
    z-index: 3001;
3388
}
3389

3390
.bg_list {
3391
    display: flex;
3392
    flex-wrap: wrap;
3393
    width: calc(var(--sheldWidth) - 15px);
3394
    max-width: 100vw;
3395
    max-width: 100dvw;
3396
    justify-content: space-evenly;
3397
}
3398

3399
.input-file {
3400
    display: flex;
3401
    justify-content: center;
3402
    align-items: center;
3403
    height: 100%;
3404
}
3405

3406

3407
#form_create {
3408
    display: flex;
3409
    flex-direction: column;
3410
    height: 100%;
3411
    overflow-y: auto;
3412
    padding: 0 2px;
3413
}
3414

3415
.avatar_div {
3416
    display: flex;
3417
    width: 100%;
3418
    flex-wrap: wrap;
3419
    margin-top: 0px;
3420
    align-items: center;
3421
}
3422

3423
#avatar-and-name-block {
3424
    justify-content: space-between;
3425
    display: flex;
3426
    flex-wrap: wrap;
3427
}
3428

3429
.ch_fav_icon {
3430
    filter: drop-shadow(1px 1px 2px black);
3431
    color: var(--golden);
3432
    font-size: 14px;
3433
    order: -1;
3434
    margin-left: -75px;
3435
    padding-right: 54px;
3436
    margin-top: 3px;
3437
    position: relative;
3438
}
3439

3440
#rm_group_top_bar:not(:has(#rm_group_activation_strategy option[value="0"]:checked)) label:has(#rm_group_allow_self_responses) {
3441
    display: none;
3442
}
3443

3444
.group_member .queue_position:not(:empty)::before {
3445
    content: "#";
3446
}
3447

3448
.group_member .queue_position {
3449
    margin-right: 0.75rem;
3450
    font-size: calc(var(--mainFontSize) * 0.9);
3451
}
3452

3453
.group_member.is_queued {
3454
    outline: 2px solid var(--golden);
3455
}
3456

3457
.group_member.is_active {
3458
    outline: 2px solid var(--active);
3459
}
3460

3461
.character_select.is_fav .avatar,
3462
.group_select.is_fav .avatar,
3463
.group_member.is_fav .avatar,
3464
.avatar.is_fav {
3465
    outline: 2px solid var(--golden);
3466
}
3467

3468
.character_select.is_fav .ch_name,
3469
.group_select.is_fav .ch_name,
3470
.group_member.is_fav .ch_name {
3471
    color: var(--golden);
3472
}
3473

3474
.avatar.is_active {
3475
    outline: 2px solid var(--active);
3476
}
3477

3478
#fav_chara_wrap {
3479
    display: flex;
3480
    margin: 5px 0px;
3481
}
3482

3483
#fav_chara {
3484
    border: none;
3485
    font-size: var(--mainFontSize);
3486
    display: flex;
3487
}
3488

3489
#name_div {
3490
    width: 100%;
3491
}
3492

3493
#create_button {
3494
    display: none;
3495
}
3496

3497
.suggested_replies {
3498
    display: none;
3499
}
3500

3501
.last_mes .suggested_replies {
3502
    display: flex;
3503
    flex-direction: column;
3504
    gap: 5px;
3505
    margin-bottom: 5px;
3506
}
3507

3508
.suggested_reply {
3509
    display: flex;
3510
    padding: 5px;
3511
    margin-right: 5px;
3512
    border-radius: 5px;
3513
    font-weight: 500;
3514
    color: var(--SmartThemeQuoteColor);
3515
    border: 1px solid var(--SmartThemeBorderColor);
3516
    border-radius: 10px;
3517
    cursor: pointer;
3518
    transition: var(--animation-duration-2x);
3519
}
3520

3521
.avatar-container {
3522
    position: relative;
3523
    display: flex;
3524
    flex-direction: row;
3525
    align-items: flex-start;
3526
    gap: 5px;
3527
    margin: 1px;
3528
    padding: 5px;
3529
    border-radius: 10px;
3530
    cursor: pointer;
3531
    margin-bottom: 1px;
3532
    width: 100%;
3533
    outline: var(--avatar-base-border-radius) solid transparent;
3534
    border: var(--avatar-base-border-radius) solid transparent;
3535
}
3536

3537
.avatar-container .character_select_container {
3538
    flex-grow: 1;
3539
}
3540

3541
grammarly-extension {
3542
    z-index: 35;
3543
}
3544

3545
.avatar_div .avatar {
3546
    /*     margin-left: 4px;
3547
    margin-right: 10px;
3548
    height: 70px;
3549
    width: 70px; */
3550
    display: flex;
3551
    justify-content: center;
3552
    align-items: center;
3553
    align-self: center !important;
3554
    width: 100%;
3555
    height: 100%;
3556
    /* Avoids cutting off the box shadow on the avatar*/
3557
    margin: 10px;
3558
}
3559

3560
#avatar_controls {
3561
    height: 100%;
3562
    width: 100%;
3563
    flex-grow: 1;
3564
    justify-content: flex-end;
3565
    flex-flow: column;
3566
    padding: 5px 5px 10px 0;
3567
}
3568

3569
#description_div,
3570
#first_message_div {
3571
    display: flex;
3572
    align-items: center;
3573
}
3574

3575
#creators_notes_div {
3576
    align-items: baseline;
3577
}
3578

3579
#creator_notes_spoiler:empty,
3580
#creator_notes_empty,
3581
#creators_note_desc_hidden {
3582
    display: none;
3583
}
3584

3585
#creator_notes_spoiler:empty~#creator_notes_empty {
3586
    display: flex;
3587
    justify-content: center;
3588
    align-items: center;
3589
    width: 100%;
3590
    height: 100%;
3591
    font-size: calc(var(--mainFontSize) * 0.9);
3592
    color: var(--SmartThemeEmColor);
3593
}
3594

3595
.alternate_greeting details {
3596
    padding: 2px;
3597
}
3598

3599
.alternate_greeting:first-of-type .move_up_alternate_greeting,
3600
.alternate_greeting:last-of-type .move_down_alternate_greeting {
3601
    filter: brightness(75%) grayscale(1);
3602
    opacity: 0.5;
3603
    pointer-events: none;
3604
}
3605

3606
.alternate_greeting summary {
3607
    list-style-position: outside;
3608
    margin-left: 1em;
3609
    padding-left: 5px;
3610
}
3611

3612
.alternate_greeting textarea {
3613
    field-sizing: content;
3614
    max-height: 50dvh;
3615
}
3616

3617
.alternate_greeting summary::marker,
3618
.alternate_greeting summary strong {
3619
    cursor: pointer;
3620
}
3621

3622
.buttons_block {
3623
    display: flex;
3624
    flex: 1;
3625
    gap: 5px;
3626
    align-items: center;
3627
    justify-content: end;
3628
    flex-wrap: wrap;
3629
}
3630

3631
.buttons_block .menu_button {
3632
    display: flex;
3633
    justify-content: center;
3634
    align-items: center;
3635
    padding: 5px;
3636
    margin: 0;
3637
    filter: grayscale(0.5);
3638
}
3639

3640
.red_button,
3641
.redWarningBG {
3642
    background-color: var(--crimson70a) !important;
3643
}
3644

3645
.red_button:hover,
3646
.redWarningBG:hover {
3647
    background-color: var(--fullred) !important;
3648
}
3649

3650
#result_info {
3651
    font-size: calc(var(--mainFontSize) * 0.9);
3652
    display: flex;
3653
    align-items: center;
3654
    gap: 6px;
3655
    padding: 1px 3px;
3656
}
3657

3658
#result_info_text {
3659
    display: flex;
3660
    flex-direction: column;
3661
    line-height: 0.9;
3662
    text-align: right;
3663
}
3664

3665
#result_info .right_menu_button {
3666
    padding: 4px;
3667
}
3668

3669
/* Focus */
3670

3671
#bulk_tag_popup,
3672
#dialogue_popup {
3673
    width: 500px;
3674
    max-width: 90vw;
3675
    max-width: 90dvw;
3676
    position: absolute;
3677
    z-index: 9999;
3678
    margin-left: auto;
3679
    margin-right: auto;
3680
    left: 0;
3681
    right: 0;
3682
    top: 50%;
3683
    transform: translateY(-50%);
3684
    text-align: center;
3685
    box-shadow: 0px 0px 14px var(--black70a);
3686
    border: 1px solid var(--SmartThemeBorderColor);
3687
    padding: 4px;
3688
    background-color: var(--SmartThemeBlurTintColor);
3689
    border-radius: 10px;
3690
    max-height: 90vh;
3691
    max-height: 90dvh;
3692
    display: flex;
3693
    flex-direction: column;
3694
    overflow-y: hidden;
3695
    overflow-x: hidden;
3696
}
3697

3698
.rm_stat_block {
3699
    display: flex;
3700
    justify-content: space-between;
3701
}
3702

3703
.large_dialogue_popup {
3704
    height: 90vh !important;
3705
    height: 90dvh !important;
3706
    max-width: 90vw !important;
3707
    max-width: 90dvw !important;
3708
}
3709

3710
.wide_dialogue_popup {
3711
    /* FIXME: Chrome 129 broke max-height for aspect-ratio sized elements */
3712
    /* aspect-ratio: 1 / 1; */
3713
    /* width: unset !important; */
3714
    min-width: var(--sheldWidth);
3715
}
3716

3717
.wider_dialogue_popup {
3718
    min-width: 750px;
3719
    max-width: 90%;
3720
}
3721

3722
/* If doesn't fit 750px in 90% of the screen, we should re-scale the wider popup */
3723
@media (max-width: calc(750px / 0.9)) {
3724
    .wider_dialogue_popup {
3725
        min-width: 90%;
3726
    }
3727
}
3728

3729
.transparent_dialogue_popup {
3730
    background-color: transparent;
3731
    box-shadow: none;
3732
    border: none;
3733
}
3734

3735
.transparent_dialogue_popup:focus-visible {
3736
    outline: none;
3737
}
3738

3739
#dialogue_popup .horizontal_scrolling_dialogue_popup {
3740
    overflow-x: unset !important;
3741
}
3742

3743
#dialogue_popup .vertical_scrolling_dialogue_popup {
3744
    overflow-y: unset !important;
3745
}
3746

3747
#bulk_tag_popup_holder,
3748
#dialogue_popup_holder {
3749
    display: flex;
3750
    flex-direction: column;
3751
    height: 100%;
3752
    overflow-y: hidden;
3753
    padding: 0 10px;
3754
}
3755

3756
#dialogue_popup_text {
3757
    flex-grow: 1;
3758
    overflow-y: auto;
3759
    height: 100%;
3760
}
3761

3762
#dialogue_popup_controls {
3763
    margin-top: 10px;
3764
    display: flex;
3765
    align-self: center;
3766
    gap: 20px;
3767
}
3768

3769
#bulk_tag_popup_reset,
3770
#bulk_tag_popup_remove_mutual,
3771
#dialogue_popup_ok {
3772
    background-color: var(--crimson70a);
3773
    cursor: pointer;
3774
}
3775

3776
#bulk_tag_popup_reset:hover,
3777
#bulk_tag_popup_remove_mutual:hover,
3778
#dialogue_popup_ok:hover {
3779
    background-color: var(--crimson-hover);
3780
}
3781

3782
#bulk_tags_avatars_block {
3783
    max-height: 70vh;
3784
}
3785

3786
#dialogue_popup_input {
3787
    margin: 10px 0 0 0;
3788
    width: 100%;
3789
}
3790

3791
#bulk_tag_popup_cancel,
3792
#dialogue_popup_cancel {
3793
    cursor: pointer;
3794
}
3795

3796
#dialogue_del_mes {
3797
    width: 100%;
3798
    margin-left: auto;
3799
    margin-right: auto;
3800
    margin-top: 4px;
3801
    text-align: center;
3802
    padding: 0;
3803
    height: min-content;
3804
}
3805

3806
#dialogue_del_mes_ok {
3807
    /*changes background of OK button in the deletion menu*/
3808
    display: inline-block;
3809
    background-color: var(--crimson70a);
3810
    cursor: pointer;
3811
}
3812

3813
#dialogue_del_mes_cancel {
3814
    display: inline-block;
3815
    cursor: pointer;
3816
}
3817

3818
.menu_button {
3819
    color: var(--SmartThemeBodyColor);
3820
    filter: grayscale(0.5);
3821
    background-color: var(--SmartThemeBlurTintColor);
3822
    border: 1px solid var(--SmartThemeBorderColor);
3823
    border-radius: 5px;
3824
    padding: 3px 5px;
3825
    width: min-content;
3826
    cursor: pointer;
3827
    margin: 5px 0;
3828
    transition: var(--animation-duration-2x);
3829
    display: flex;
3830
    align-items: center;
3831
    justify-content: center;
3832
    text-align: center;
3833
}
3834

3835
.menu_button.fa-fw {
3836
    /* Font Awesome icons that are a menu button and should be fixed width need a slight fix. 1.25em is their default, but we need to account for button spacing. */
3837
    min-width: calc(1.25em + 12px);
3838
}
3839

3840
.menu_button:not(.disabled):not([disabled]):hover,
3841
.menu_button:not(.disabled):not([disabled]).active {
3842
    background-color: var(--white30a);
3843
}
3844

3845
#dialogue_del_mes .menu_button {
3846
    margin-left: 25px;
3847
    margin-right: 25px;
3848
}
3849

3850
#shadow_popup {
3851
    backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
3852
    -webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
3853
    background-color: var(--black30a);
3854
    display: none;
3855
    opacity: 0.0;
3856
    position: absolute;
3857
    width: 100%;
3858
    height: 100vh;
3859
    height: 100dvh;
3860
    z-index: 9999;
3861
    top: 0;
3862
}
3863

3864
#bgtest {
3865
    display: none;
3866
    width: 100vw;
3867
    width: 100dvw;
3868
    height: 100vh;
3869
    height: 100dvh;
3870
    position: absolute;
3871
    z-index: -100;
3872
    background-color: red;
3873
}
3874

3875
.prompt_order {
3876
    display: flex;
3877
    flex-direction: column;
3878
    align-items: center;
3879
    justify-content: center;
3880
    gap: 5px;
3881
    width: 100%;
3882
    padding: 5px;
3883
}
3884

3885
.prompt_order>div {
3886
    padding: 5px;
3887
    padding-left: 30px;
3888
    width: 100%;
3889
    border-radius: 5px;
3890
    color: var(--SmartThemeBodyColor);
3891
    background-color: var(--black30a);
3892
    border: 1px solid var(--SmartThemeBorderColor);
3893
    cursor: grab;
3894
    transition: background-color var(--animation-duration-2x) ease-in-out;
3895
    position: relative;
3896
    user-select: none;
3897
    display: flex;
3898
    align-items: center;
3899
    justify-content: space-between;
3900
    column-gap: 10px;
3901
}
3902

3903
.prompt_order>div>span:first-child {
3904
    flex-grow: 1;
3905
}
3906

3907
.prompt_order:not(.ui-sortable-disabled)>div:hover {
3908
    background-color: var(--SmartThemeBorderColor);
3909
}
3910

3911
.prompt_order>div::after {
3912
    content: "☰";
3913
    left: 8px;
3914
    position: absolute;
3915
}
3916

3917
.prompt_order .disabled {
3918
    opacity: 0.5;
3919
    filter: grayscale(0.5);
3920
}
3921

3922
.ui-sortable-disabled,
3923
.prompt_order.ui-sortable-disabled>div {
3924
    cursor: not-allowed;
3925
}
3926

3927
.prompt_order .toggle_button {
3928
    padding-right: 0;
3929
}
3930

3931
.prompt_order .toggle_button::after {
3932
    content: '☑';
3933
}
3934

3935
.prompt_order .disabled .toggle_button::after {
3936
    content: '☐';
3937
}
3938

3939
.online_status {
3940
    opacity: 0.8;
3941
    margin-top: 2px;
3942
    margin-bottom: 15px;
3943
    display: flex;
3944
    align-items: center;
3945
    gap: 5px;
3946
}
3947

3948
.online_status_indicator.success {
3949
    background-color: green;
3950
}
3951

3952
.online_status_indicator {
3953
    border-radius: 100%;
3954
    width: 14px;
3955
    height: 14px;
3956
    background-color: red;
3957
    display: inline-block;
3958
}
3959

3960
.online_status_text {
3961
    margin-left: 4px;
3962
    display: inline-block;
3963
}
3964

3965
#horde_model {
3966
    height: 150px;
3967
}
3968

3969
.horde_model_title {
3970
    display: flex;
3971
    flex-direction: row;
3972
    align-items: center;
3973
    column-gap: 20px;
3974
}
3975

3976
.horde-model-description {
3977
    -webkit-line-clamp: 3;
3978
    line-clamp: 3;
3979
    font-size: 0.9em;
3980
    overflow: hidden;
3981
    text-overflow: ellipsis;
3982
}
3983

3984
.drag-handle {
3985
    cursor: grab;
3986
    /* Make the drag handle not selectable in most browsers */
3987
    user-select: none;
3988
}
3989

3990
#form_rename_chat {
3991
    display: flex;
3992
    align-items: center;
3993
    flex: 1;
3994
    opacity: 0.8;
3995
    gap: 5px;
3996
}
3997

3998

3999
/* Override toastr default styles */
4000
body #toast-container {
4001
    margin-top: var(--topBarBlockSize);
4002
}
4003

4004
body #toast-container>div {
4005
    opacity: 1;
4006
    filter: unset;
4007
    -ms-filter: unset;
4008
    padding: 10px 10px 10px 50px;
4009
    font-size: calc(var(--mainFontSize) * 0.95);
4010
    width: 300px;
4011
}
4012

4013
body #toast-container .toast.toast-non-interactable {
4014
    cursor: default;
4015
}
4016

4017
body #toast-container .toast-success {
4018
    background-color: #5d9e5d;
4019
}
4020

4021
body #toast-container .toast-error {
4022
    background-color: #a83c36;
4023
}
4024

4025
body #toast-container .toast-info {
4026
    background-color: #4092aa;
4027
}
4028

4029
body #toast-container .toast-warning {
4030
    background-color: #e29325;
4031
}
4032

4033
button.toast-close-button {
4034
    padding-right: 5px;
4035
    padding-top: 3px;
4036
}
4037

4038
#dialogue_del_mes {
4039
    display: none;
4040
}
4041

4042
.for_checkbox {
4043
    display: block;
4044
}
4045

4046
input[type='checkbox'] {
4047
    -webkit-appearance: none;
4048
    -moz-appearance: none;
4049
    appearance: none;
4050
    outline: 1px solid var(--grey5020a);
4051
    position: relative;
4052
    width: var(--mainFontSize);
4053
    height: var(--mainFontSize);
4054
    overflow: hidden;
4055
    border-radius: 3px;
4056
    border: 1px solid var(--SmartThemeBorderColor);
4057
    background-color: var(--SmartThemeBodyColor);
4058
    box-shadow: inset 0 0 2px 0 var(--SmartThemeShadowColor);
4059
    cursor: pointer;
4060
    transform: translateY(-0.075em);
4061
    flex-shrink: 0;
4062
    place-content: center;
4063
    filter: brightness(1.2);
4064
    display: grid;
4065
}
4066

4067
input[type="checkbox"]::before {
4068
    content: "";
4069
    width: 0.65em;
4070
    height: 0.65em;
4071
    transform: scale(0);
4072
    transition: var(--animation-duration) transform ease-in-out;
4073
    box-shadow: inset 1em 1em var(--SmartThemeCheckboxTickColor);
4074
    transform-origin: bottom left;
4075
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
4076
}
4077

4078
input[type="checkbox"]:checked::before {
4079
    transform: scale(1);
4080
}
4081

4082
input[type="checkbox"]:disabled {
4083
    color: grey;
4084
    cursor: not-allowed;
4085
}
4086

4087
input[type='checkbox'].del_checkbox {
4088
    display: none;
4089
    opacity: 0.7;
4090
    margin-top: 12px;
4091
    margin-right: 12px;
4092
}
4093

4094

4095
#user_avatar_block {
4096
    display: flex;
4097
    flex-wrap: wrap;
4098
    justify-content: space-around;
4099
    padding: 1px;
4100
}
4101

4102
.avatar-container .avatar {
4103
    cursor: pointer;
4104
    border-radius: var(--avatar-base-border-radius-round);
4105
    align-self: center;
4106
    outline: var(--avatar-base-border-radius) solid transparent;
4107
    flex: unset;
4108
}
4109

4110
.avatar-container.selected {
4111
    border: var(--avatar-base-border-radius) solid rgba(255, 255, 255, 0.7);
4112
}
4113

4114
.avatar-container.default_persona .avatar {
4115
    outline: var(--avatar-base-border-radius) solid var(--golden);
4116
}
4117

4118
.avatar-container .avatar_state .fa-lock {
4119
    color: var(--active);
4120
}
4121

4122
.avatar-container:not(.locked_to_chat) .locked_to_chat_label {
4123
    display: none;
4124
}
4125

4126
.avatar-container:not(.locked_to_character) .locked_to_character_label {
4127
    display: none;
4128
}
4129

4130
#lock_persona_default.locked i.icon {
4131
    color: var(--golden);
4132
}
4133

4134
#lock_user_name.locked .icon,
4135
.avatar-container.locked_to_chat .locked_to_chat_label .icon {
4136
    color: var(--SmartThemeQuoteColor);
4137
}
4138

4139
#lock_persona_to_char.locked .icon,
4140
.avatar-container.locked_to_character .locked_to_character_label .icon {
4141
    color: var(--active);
4142
}
4143

4144
#lock_user_name.locked {
4145
    border-color: color-mix(in srgb, var(--SmartThemeQuoteColor) 50%, var(--SmartThemeBorderColor));
4146
}
4147

4148
#lock_persona_to_char.locked {
4149
    border-color: color-mix(in srgb, var(--active) 50%, var(--SmartThemeBorderColor));
4150
}
4151

4152
#user_avatar_block .avatar_upload {
4153
    cursor: pointer;
4154
    width: 60px;
4155
    height: 60px;
4156
    background: var(--grey30);
4157
    border-radius: 100%;
4158
    display: flex;
4159
    justify-content: center;
4160
    align-items: center;
4161
    font-size: 3rem;
4162
}
4163

4164
#form_upload_avatar {
4165
    display: none !important;
4166
}
4167

4168
.range-block {
4169
    height: min-content;
4170
    display: flex;
4171
    flex-wrap: wrap;
4172
    align-items: center;
4173
    margin-bottom: 5px;
4174
    justify-content: space-between;
4175
}
4176

4177
.range-block-title {
4178
    margin: 0;
4179
    padding: 0;
4180
    width: 100%;
4181
    text-align: center;
4182

4183
}
4184

4185
.range-block-counter {
4186
    margin-left: 5px;
4187
    /*previously needed to avoid firefox scrollbar overlap, no longer necessary?*/
4188
    /* margin-right: 15px; */
4189
    font-size: calc(var(--mainFontSize) * 0.95);
4190
    color: var(--SmartThemeBodyColor);
4191
    flex: 1;
4192
    gap: 5px;
4193
    display: flex;
4194
}
4195

4196
.toggle-description {
4197
    width: max-content;
4198
    margin-left: 5px;
4199
    margin-right: 15px;
4200
    font-size: calc(var(--mainFontSize) * 0.85);
4201
    color: var(--SmartThemeEmColor);
4202
    text-align: center;
4203
}
4204

4205
.range-block-counter input {
4206
    display: block;
4207
    cursor: text;
4208
    background-color: var(--black30a);
4209
    border: 1px solid var(--SmartThemeBorderColor);
4210
    border-radius: 5px;
4211
    padding: 2px;
4212
    flex: 1;
4213
    text-align: center;
4214
    width: 75px;
4215
}
4216

4217
.neo-range-input {
4218
    display: block;
4219
    cursor: text;
4220
    background-color: var(--black30a);
4221
    border: 1px solid var(--SmartThemeBorderColor);
4222
    border-radius: 0 0 5px 5px;
4223
    padding: 2px;
4224
    padding-left: 1em;
4225
    padding-top: 5px;
4226
    text-align: center;
4227
    width: 100%;
4228
}
4229

4230
.neo-range-slider {
4231
    -webkit-appearance: none !important;
4232
    appearance: none !important;
4233
    margin: 0 !important;
4234
    margin-top: 7px !important;
4235
    padding: 0 !important;
4236
    width: 100% !important;
4237
    height: 5px !important;
4238
    background: var(--SmartThemeBodyColor) !important;
4239
    border-radius: 7px 7px 0 0 !important;
4240
    background-size: 70% 100% !important;
4241
    background-repeat: no-repeat !important;
4242
    box-shadow: inset 0 0 2px var(--black50a) !important;
4243
    cursor: ew-resize !important;
4244
    filter: brightness(0.75)
4245
}
4246

4247
/*
4248
 * Setting a z-index will allow scrollbar to display properly in Firefox,
4249
 * while constraining to open drawers fixes a single frame linger in Chrome.
4250
 */
4251
.drawer-content.openDrawer .neo-range-slider {
4252
    z-index: 1;
4253
}
4254

4255
.neo-range-slider:hover,
4256
input[type="range"]:hover {
4257
    filter: brightness(1.25);
4258
}
4259

4260
.neo-range-slider:focus-visible,
4261
input[type="range"]:focus-visible {
4262
    outline: 1px solid var(--interactable-outline-color);
4263
}
4264

4265
.range-block-range {
4266
    margin: 0;
4267
    flex: 5;
4268
}
4269

4270
input[type="range"] {
4271
    -webkit-appearance: none;
4272
    appearance: none;
4273
    margin: 0;
4274
    padding: 0;
4275
    width: 100%;
4276
    height: 5px;
4277
    background: var(--SmartThemeBodyColor);
4278
    border-radius: 15px;
4279
    background-size: 70% 100%;
4280
    background-repeat: no-repeat;
4281
    box-shadow: inset 0 0 2px black;
4282
    cursor: ew-resize;
4283
    transition: all var(--animation-duration-2x) ease-in-out;
4284
    filter: brightness(0.75);
4285
}
4286

4287
input[type="range"]::-webkit-slider-thumb {
4288
    -webkit-appearance: none;
4289
    position: relative;
4290
    /*box-shadow: 0 0 5px 0 black;
4291
    box-shadow: inset 0 0 5px var(--black70a);*/
4292
    -webkit-appearance: none;
4293
    height: 15px;
4294
    width: 15px;
4295
    border-radius: 50%;
4296
    background: var(--SmartThemeCheckboxTickColor);
4297
    border: 2px solid var(--SmartThemeBodyColor);
4298
}
4299

4300
.doubleRangeContainer {
4301
    display: flex;
4302
    --markerWidth: 15px;
4303
    container-type: inline-size;
4304
    container-name: doubleRangeContainer;
4305

4306
    >.doubleRangeInputContainer {
4307
        flex: 0 0 50%;
4308
        overflow: hidden;
4309
        position: relative;
4310

4311
        >datalist {
4312
            display: flex;
4313
            flex-direction: row;
4314
            justify-content: space-between;
4315
            font-size: x-small;
4316

4317
            >option {
4318
                flex: 0 0 0;
4319
                width: 0;
4320
                display: flex;
4321
                justify-content: center;
4322
            }
4323
        }
4324

4325
        @container doubleRangeContainer (max-width: 200px) {
4326
            >datalist {
4327
                height: 2.5em;
4328
            }
4329

4330
            &:nth-child(1)>datalist>option {
4331
                transform: rotate(-45deg);
4332
                transform-origin: bottom right;
4333
            }
4334

4335
            &:nth-child(2)>datalist>option {
4336
                transform: rotate(45deg);
4337
                transform-origin: bottom left;
4338
            }
4339
        }
4340

4341
        >input::-webkit-slider-thumb {
4342
            z-index: 2;
4343
        }
4344

4345
        &:after {
4346
            /* shifted to center to hide corners of the inset shadow */
4347
            --shift: 2px;
4348
            /* 100% of the input width (1em padding) */
4349
            --inputWidth: calc(100% - 1em);
4350
            /* input padding max(20px, 20%) */
4351
            --inputPadding: calc(max(20px, var(--inputWidth) * 0.2));
4352
            /* 100% of the variable range width: 100% of input - input padding - marker width) */
4353
            --rangeWidth: calc(var(--inputWidth) - var(--inputPadding) - var(--markerWidth));
4354
            /* always visible part of the input range (value = 0) */
4355
            --zeroOffset: calc(var(--inputPadding) + var(--markerWidth) / 2);
4356
            content: '';
4357
            position: absolute;
4358
            top: 11px;
4359
            width: calc(var(--value) / 2 * var(--rangeWidth) + var(--zeroOffset) + var(--shift));
4360
            height: 5px;
4361
            background-color: var(--SmartThemeQuoteColor);
4362
            box-shadow: inset 0 0 2px black;
4363
        }
4364

4365
        &:nth-child(1) {
4366
            --value: 0;
4367
            padding-left: 1em;
4368

4369
            >input {
4370
                direction: rtl;
4371
                position: relative;
4372
                padding-right: max(20px, 20%);
4373
            }
4374

4375
            >datalist {
4376
                direction: rtl;
4377
                padding-right: calc(var(--markerWidth)/2 + max(20px, 20%));
4378
                padding-left: calc(var(--markerWidth)/2 - 2px);
4379
            }
4380

4381
            &:after {
4382
                right: -2px;
4383
            }
4384
        }
4385

4386
        &:nth-child(2) {
4387
            --value: 0;
4388
            padding-right: 1em;
4389

4390
            >input {
4391
                position: relative;
4392
                padding-left: max(20px, 20%);
4393
            }
4394

4395
            >datalist {
4396
                padding-left: calc(var(--markerWidth)/2 + max(20px, 20%));
4397
                padding-right: calc(var(--markerWidth)/2 - 2px);
4398
            }
4399

4400
            &:after {
4401
                left: -2px;
4402
            }
4403
        }
4404
    }
4405
}
4406

4407
/*Notes '?' links*/
4408

4409
.note-link-span {
4410
    color: var(--SmartThemeQuoteColor);
4411
    display: inline-block;
4412
    opacity: 0.5;
4413
    margin: 0 5px;
4414
    text-align: center;
4415
    /*
4416
    border-radius: 100%;
4417
    box-shadow: 0 0 3px black;
4418
    */
4419
    transition: all var(--animation-duration-2x);
4420
}
4421

4422
.topRightInset {
4423
    position: absolute;
4424
    top: 6px;
4425
    right: 23px;
4426
}
4427

4428
.note-link-span:hover,
4429
.note-link-span-lrg:hover {
4430
    opacity: 1;
4431
}
4432

4433
.nice-link {
4434
    color: var(--SmartThemeBodyColor);
4435
    opacity: 0.5;
4436
    font-weight: 400;
4437
    text-decoration: none;
4438
    border-bottom: 2px dashed red;
4439
    transition: var(--animation-duration-2x);
4440
}
4441

4442
.whitespacenowrap {
4443
    white-space: nowrap;
4444
}
4445

4446
#chartokenwarning a {
4447
    color: var(--SmartThemeBodyColor);
4448
}
4449

4450
#char-management-dropdown {
4451
    height: auto;
4452
    margin-bottom: 0;
4453
}
4454

4455
#tagInput {
4456
    height: 26px;
4457
    margin-bottom: 0;
4458
}
4459

4460
.nice-link:hover {
4461
    opacity: 1;
4462
}
4463

4464
.mes_buttons,
4465
.extraMesButtons {
4466
    /* height: 20px; */
4467
    position: relative;
4468
    display: flex;
4469
    gap: 4px;
4470
    flex-wrap: nowrap;
4471
    justify-content: flex-end;
4472
    transition: all var(--animation-duration-2x);
4473
    overflow-x: hidden;
4474
    padding: 1px;
4475
}
4476

4477
.extraMesButtons {
4478
    display: none;
4479
}
4480

4481
.mes_button,
4482
.extraMesButtons>div {
4483
    cursor: pointer;
4484
    transition: opacity var(--animation-duration-2x) ease-in-out;
4485
    filter: drop-shadow(0px 0px 2px black);
4486
    opacity: 0.3;
4487
    padding: 1px 3px;
4488
}
4489

4490
.mes_button:hover,
4491
.extraMesButtons>div:hover {
4492
    opacity: 1;
4493
}
4494

4495
.mes_bookmark {
4496
    display: none;
4497
}
4498

4499
.mes:not([bookmark_link='']) .mes_bookmark {
4500
    display: inline-block;
4501
}
4502

4503
.mes:not([bookmark_link='']) .mes_create_bookmark {
4504
    display: none;
4505
}
4506

4507
.mes_edit_buttons {
4508
    display: none;
4509
    flex-direction: row;
4510
    column-gap: 5px;
4511
    float: right;
4512
    cursor: pointer;
4513
    padding-bottom: 5px;
4514
    filter: drop-shadow(0px 0px 2px black);
4515
    transition: var(--animation-duration-2x) ease-in-out;
4516
}
4517

4518
.mes_reasoning_actions {
4519
    margin: 0;
4520
    margin-top: 0.5em;
4521
    margin-bottom: 0.5em;
4522
}
4523

4524
.mes_edit_buttons .menu_button,
4525
.mes_reasoning_actions .edit_button {
4526
    opacity: 0.5;
4527
    padding: 0px;
4528
    font-size: 1rem;
4529
    height: 2rem;
4530
    margin-top: 0;
4531
    margin-bottom: 0;
4532
    aspect-ratio: 1 / 1;
4533
    display: flex;
4534
    justify-content: center;
4535
    align-items: center;
4536
}
4537

4538
.mes_reasoning_actions .edit_button {
4539
    opacity: 1;
4540
    filter: brightness(0.7);
4541
}
4542

4543
.mes_reasoning_edit_cancel,
4544
.mes_edit_cancel.menu_button {
4545
    background-color: var(--crimson70a);
4546
}
4547

4548
.mes_reasoning_edit_done,
4549
.mes_edit_done.menu_button {
4550
    background-color: var(--okGreen70a);
4551
}
4552

4553
.mes_edit_buttons .menu_button:hover {
4554
    opacity: 1;
4555
}
4556

4557
.reasoning_edit_textarea,
4558
.edit_textarea {
4559
    padding: 5px;
4560
    margin: 0;
4561
    outline: none;
4562
    background-color: var(--black50a);
4563
    line-height: calc(var(--mainFontSize) + .25rem);
4564
    max-height: 75vh;
4565
    max-height: 75dvh;
4566
    field-sizing: content;
4567
}
4568

4569
body:is([data-generating="true"], [data-swiping="true"]) :is(
4570
    #send_but,
4571
    #mes_continue,
4572
    #mes_impersonate,
4573
    #chat .last_mes .mes_buttons,
4574
    #chat .last_mes .mes_reasoning_actions) {
4575
    display: none;
4576
}
4577

4578
#anchor_order {
4579
    margin-bottom: 15px;
4580
}
4581

4582
#anchor_checkbox,
4583
#power-user-option-checkboxes {
4584
    display: flex;
4585
    flex-direction: column;
4586
    flex-grow: 1;
4587
}
4588

4589
#anchor_checkbox label,
4590
#power-user-option-checkboxes label,
4591
.checkbox_label,
4592
.auto_continue_settings_block {
4593
    display: flex;
4594
    flex-direction: row;
4595
    column-gap: 5px;
4596
    align-items: baseline;
4597
}
4598

4599
.auto_continue_settings_block {
4600
    margin-top: 10px;
4601
}
4602

4603
.auto_continue_settings_block label {
4604
    flex: 1;
4605
    display: flex;
4606
    flex-direction: column;
4607
}
4608

4609
#shadow_character_popup {
4610
    backdrop-filter: blur(var(--SmartThemeBlurStrength));
4611
    background-color: var(--black70a);
4612
    -webkit-backdrop-filter: blur(var(--SmartThemeBlurStrength));
4613
    display: none;
4614
    opacity: 1.0;
4615
    position: absolute;
4616
    width: 100%;
4617
    height: 100vh;
4618
    height: 100dvh;
4619
    z-index: 2058;
4620
}
4621

4622
#character_popup {
4623
    display: none;
4624
    background-color: var(--SmartThemeBlurTintColor);
4625
    backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)*2));
4626
    -webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)*2));
4627

4628
    min-width: 100px;
4629
    max-width: var(--sheldWidth);
4630
    height: calc(100vh - 84px);
4631
    height: calc(100dvh - 84px);
4632
    min-height: calc(100vh - 84px);
4633
    min-height: calc(100dvh - 84px);
4634
    max-height: calc(100vh - 84px);
4635
    max-height: calc(100dvh - 84px);
4636
    position: absolute;
4637
    z-index: 4001;
4638
    margin-left: auto;
4639
    margin-right: auto;
4640
    left: 0;
4641
    right: 0;
4642
    top: var(--topBarBlockSize);
4643
    box-shadow: 0 0 20px var(--black70a);
4644
    padding: 10px;
4645
    border: 1px solid var(--SmartThemeBorderColor);
4646
    border-radius: 0 0 10px 10px;
4647
    overflow-y: auto;
4648
}
4649

4650
#character_popup h3 {
4651
    margin-top: 0;
4652
    margin-bottom: 0;
4653
    margin-left: 0;
4654
    display: inline;
4655
}
4656

4657
h4 {
4658
    margin: 5px 0;
4659
}
4660

4661
h5 {
4662
    margin: 5px 0;
4663
}
4664

4665
#character_popup h5 {
4666
    color: var(--grey50);
4667
}
4668

4669

4670
#character_popup_text {
4671
    align-items: center;
4672
}
4673

4674
#personality_textarea {
4675
    width: 100%;
4676
}
4677

4678
#mes_example_div {
4679
    height: 100%;
4680
    display: flex;
4681
    flex-grow: 1;
4682
}
4683

4684
#scenario_pole {
4685
    width: 100%;
4686
    margin-left: 0;
4687
}
4688

4689
#mes_example_textarea {
4690
    width: 100%;
4691
    height: 100%;
4692
    margin-left: 0;
4693
}
4694

4695
#character_popup_ok {
4696
    cursor: pointer;
4697
    display: none;
4698
    height: 40px;
4699
    margin-top: 15px;
4700
    margin-left: 36px;
4701
    backdrop-filter: blur(var(--SmartThemeBlurStrength));
4702
    background-color: var(--black70a);
4703
    -webkit-backdrop-filter: blur(var(--SmartThemeBlurStrength));
4704
    width: 110px;
4705
    text-align: center;
4706
}
4707

4708
#shadow_select_chat_popup {
4709
    display: none;
4710
    opacity: 1.0;
4711
    position: absolute;
4712
    width: 100%;
4713
    height: 100vh;
4714
    height: 100dvh;
4715
    z-index: 4100;
4716
    top: 0;
4717
    background-color: var(--black70a);
4718
    backdrop-filter: blur(var(--SmartThemeBlurStrength));
4719
    -webkit-backdrop-filter: blur(var(--SmartThemeBlurStrength));
4720
}
4721

4722
#select_chat_popup {
4723
    display: flex;
4724
    flex-direction: column;
4725
    max-width: var(--sheldWidth);
4726
    height: min-content;
4727
    max-height: calc(100vh - var(--topBarBlockSize));
4728
    max-height: calc(100dvh - var(--topBarBlockSize));
4729
    min-height: 100px;
4730
    position: absolute;
4731
    z-index: 2066;
4732
    left: 0;
4733
    right: 0;
4734
    top: 0;
4735
    bottom: 0;
4736
    margin-top: auto;
4737
    margin-bottom: auto;
4738
    margin-left: auto;
4739
    margin-right: auto;
4740
    box-shadow: 0px 0px 20px black;
4741
    padding: 10px;
4742
    background-color: var(--SmartThemeBlurTintColor);
4743
    border-radius: 10px;
4744
    overflow-y: hidden;
4745
    border: 1px solid var(--SmartThemeBorderColor);
4746
}
4747

4748
#export_div {
4749
    cursor: pointer;
4750
}
4751

4752
#select_chat_div,
4753
.swipe_picker_div {
4754
    padding: 0;
4755
    height: 100%;
4756
    overflow-y: auto;
4757
}
4758

4759
#select_chat_div hr,
4760
.swipe_picker_div hr {
4761
    margin: 0;
4762
}
4763

4764
.select_chat_block_wrapper {
4765
    cursor: pointer;
4766
}
4767

4768
.select_chat_block,
4769
.swipe_picker_block {
4770
    border-radius: 5px;
4771
    margin-top: 5px;
4772
    border: 1px solid var(--SmartThemeBorderColor);
4773
    padding: 5px 7px;
4774
}
4775

4776
.select_chat_block:hover,
4777
.swipe_picker_block:hover {
4778
    background-color: var(--white30a);
4779
}
4780

4781
.select_chat_block[highlight],
4782
.swipe_picker_block[highlight] {
4783
    background-color: var(--cobalt30a);
4784
}
4785

4786
.swipe_picker_block {
4787
    cursor: pointer;
4788
    -webkit-user-select: none;
4789
    user-select: none;
4790
}
4791

4792
.swipe_picker_block .select_chat_block_mes {
4793
    text-align: left;
4794
}
4795

4796
.swipe_picker_block .select_chat_actions {
4797
    align-items: baseline;
4798
}
4799

4800
.swipe_picker_expand_toggle {
4801
    display: none !important;
4802
}
4803

4804
.swipe_picker_block:has(.swipe_picker_expand_toggle:checked) .select_chat_block_mes {
4805
    display: block;
4806
    -webkit-line-clamp: unset;
4807
    line-clamp: unset;
4808
    white-space: pre-wrap;
4809
    overflow-wrap: anywhere;
4810
}
4811

4812
.swipe_picker_expand_label {
4813
    cursor: pointer;
4814
    opacity: 0.5;
4815
}
4816

4817
.swipe_picker_expand_label:hover {
4818
    opacity: 1;
4819
}
4820

4821
.swipe_picker_copy {
4822
    cursor: pointer;
4823
    opacity: 0.5;
4824
}
4825

4826
.swipe_picker_copy:hover {
4827
    opacity: 1;
4828
}
4829

4830
.swipe_picker_block:has(.swipe_picker_expand_toggle:checked) .swipe_picker_expand_label {
4831
    transform: rotate(180deg);
4832
}
4833

4834
.select_chat_block .avatar {
4835
    grid-row: span 2;
4836
}
4837

4838
.select_chat_block_filename_item {
4839
    opacity: 0.5;
4840
    width: fit-content;
4841
}
4842

4843
.select_chat_block_filename {
4844
    flex: 1
4845
}
4846

4847
.renameChatButton,
4848
.exportRawChatButton,
4849
.exportChatButton {
4850
    cursor: pointer;
4851
}
4852

4853
.select_chat_block_mes {
4854
    font-size: calc(var(--mainFontSize) - .25rem);
4855
    display: -webkit-box;
4856
    -webkit-line-clamp: 3;
4857
    -webkit-box-orient: vertical;
4858
    line-clamp: 3;
4859
    overflow: hidden;
4860
}
4861

4862
.PastChat_cross {
4863
    width: 15px;
4864
    height: 15px;
4865
    cursor: pointer;
4866
    opacity: 0.4;
4867
}
4868

4869

4870
.PastChat_cross:not(.disabled):hover {
4871
    color: red;
4872
    filter: drop-shadow(0 0 2px red);
4873
    -webkit-animation: infinite-spinning 1s ease-out 0s infinite normal;
4874
    animation: infinite-spinning 1s ease-out 0s infinite normal;
4875
}
4876

4877
.swipe_picker_delete.disabled {
4878
    cursor: default !important;
4879
    opacity: 0.2;
4880
}
4881

4882
.swipe_picker_delete.disabled:hover {
4883
    cursor: default !important;
4884
    color: inherit;
4885
    filter: none;
4886
    -webkit-animation: none;
4887
    animation: none;
4888
    opacity: 0.2 !important;
4889
}
4890

4891
#export_character_div {
4892
    display: grid;
4893
    grid-template-columns: 340px auto;
4894
}
4895

4896
body .ui-autocomplete {
4897
    max-height: 300px;
4898
    overflow-y: auto;
4899
}
4900

4901
body .ui-front {
4902
    z-index: 10000;
4903
}
4904

4905

4906
body .ui-slider-handle {
4907
    background-color: var(--SmartThemeBlurTintColor);
4908
    border: 1px solid var(--SmartThemeBorderColor) !important;
4909
    border-radius: 5px;
4910
    outline: 1px solid var(--grey5020a);
4911
    box-shadow: 0 0 3px var(--black50a);
4912
    text-shadow: 0px 0px calc(var(--shadowWidth) * 1px) var(--SmartThemeShadowColor);
4913
    width: 50px !important;
4914
    padding: 0 5px;
4915
    text-align: center;
4916
    margin-left: 0;
4917
    opacity: 1 !important;
4918
    transition: filter var(--animation-duration-2x);
4919
    filter: brightness(1.2);
4920
}
4921

4922
.ui-slider-handle.ui-state-default {
4923
    color: var(--SmartThemeBodyColor);
4924
    background: var(--SmartThemeBlurTintColor);
4925
}
4926

4927
.ui-slider-handle:focus {
4928
    outline: none;
4929
}
4930

4931
.ui-slider-handle.ui-state-hover {
4932
    color: var(--SmartThemeBodyColor);
4933
    background: var(--SmartThemeBlurTintColor);
4934
    filter: brightness(1.2)
4935
}
4936

4937
.ui-slider-handle.ui-state-active {
4938
    color: var(--SmartThemeBodyColor);
4939
    background: var(--SmartThemeBlurTintColor);
4940
    filter: brightness(1.5);
4941
    border-color: var(--SmartThemeBorderColor) !important;
4942
}
4943

4944
body .ui-widget-content {
4945
    background-color: var(--SmartThemeBlurTintColor);
4946
    border: 1px solid var(--SmartThemeBorderColor) !important;
4947
    border-radius: 10px;
4948
    box-shadow: 0 0 3px var(--black50a);
4949
    text-shadow: 0px 0px calc(var(--shadowWidth) * 1px) var(--SmartThemeShadowColor);
4950
    backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)*2));
4951
    color: var(--SmartThemeBodyColor);
4952
}
4953

4954
.ui-slider {
4955
    margin: 5px 0;
4956
    outline: 1px solid var(--grey5050a);
4957
    border-radius: 5px !important;
4958
}
4959

4960
body .ui-widget-content .ui-state-active:not(.ui-slider-handle) {
4961
    margin: unset !important;
4962
}
4963

4964
body .ui-widget-content .ui-menu-divider {
4965
    display: none;
4966
}
4967

4968
body .ui-widget-content .ui-menu-item-wrapper {
4969
    background: unset;
4970
    border: unset;
4971
}
4972

4973
body .ui-widget-content li {
4974
    padding: 5px;
4975
    text-decoration: none;
4976
    display: flex;
4977
    align-items: center;
4978
    cursor: pointer;
4979
    opacity: 0.5;
4980
    transition: opacity var(--animation-duration-2x);
4981
}
4982

4983
body .ui-widget-content li:hover {
4984
    /* background-color: var(--SmartThemeEmColor); */
4985
    opacity: 1;
4986
}
4987

4988
#group_avatar_preview .missing-avatar {
4989
    display: inline;
4990
    vertical-align: middle;
4991
}
4992

4993
body.big-avatars .group_select .missing-avatar {
4994
    display: flex;
4995
    justify-content: center;
4996
    align-items: center;
4997
}
4998

4999
body.big-avatars .missing-avatar {
5000
    width: calc(var(--avatar-base-width)* var(--big-avatar-width-factor));
5001
    height: calc(var(--avatar-base-height)* var(--big-avatar-height-factor));
5002
}
5003

5004
.missing-avatar {
5005
    font-size: 36px;
5006
    width: var(--avatar-base-width);
5007
    height: var(--avatar-base-height);
5008
    text-align: center;
5009
}
5010

5011
.userSettingsInnerExpandable {
5012
    border: 1px solid;
5013
    border-color: var(--SmartThemeBorderColor);
5014
    border-radius: 5px;
5015
    padding: 2px 5px !important;
5016
    margin: 5px 0;
5017
}
5018

5019
.warning {
5020
    color: var(--warning);
5021
    font-weight: bolder;
5022
}
5023

5024
.slider_hint {
5025
    display: flex;
5026
    flex-direction: row;
5027
    align-items: baseline;
5028
    justify-content: space-between;
5029
    width: 100%;
5030
    position: relative;
5031
}
5032

5033
#talkativeness_expander {
5034
    flex: 1;
5035
}
5036

5037
#talkativeness_div input[type="range"] {
5038
    width: 100%;
5039
}
5040

5041
.slider_hint span {
5042
    font-size: calc(var(--mainFontSize) - .25rem);
5043
}
5044

5045
.slider_hint span:nth-child(2) {
5046
    position: absolute;
5047
    left: 50%;
5048
    transform: translateX(-50%);
5049
}
5050

5051
p {
5052
    margin-bottom: 16px;
5053
    margin-top: 0;
5054
}
5055

5056
h1 {
5057
    font-size: calc(var(--mainFontSize) + 1rem);
5058
    line-height: 32px;
5059
    margin-bottom: 22px;
5060
}
5061

5062
h2 {
5063
    margin-top: 5px;
5064
    margin-bottom: 22px;
5065
}
5066

5067
.right_menu_button h2 {
5068
    margin-top: 0;
5069
    margin-bottom: 0;
5070
}
5071

5072
.right_menu_button img {
5073
    display: block;
5074
    cursor: pointer;
5075
    height: 26px;
5076
}
5077

5078
a {
5079
    color: orange;
5080
    color: var(--SmartThemeQuoteColor);
5081
    text-decoration: none;
5082
}
5083

5084
a:hover {
5085
    filter: brightness(1.25);
5086
}
5087

5088
#export_format_popup {
5089
    display: none;
5090
    z-index: 9999;
5091
}
5092

5093
#rawPromptPopup {
5094
    inset: 0px auto auto 0px;
5095
    margin: 0px;
5096
    transform: translate(500px, 0px);
5097
    display: block;
5098
    overflow-wrap: break-word;
5099
    white-space: normal;
5100
    max-width: calc(((100vw - 500px) / 2) - 10px);
5101
    max-width: calc(((100dvw - 500px) / 2) - 10px);
5102
    position: absolute;
5103
    z-index: 9999;
5104
    max-height: 90vh;
5105
    max-height: 90dvh;
5106
    /*unsure why, but this prevents scrollbars*/
5107
    height: 49vh;
5108
    height: 49dvh;
5109

5110
    padding: 5px;
5111
    overflow-y: auto;
5112
    display: none;
5113
}
5114

5115
#rawPromptWrapper {
5116
    white-space: pre-wrap;
5117
    word-wrap: break-word;
5118
    width: 100%;
5119
    text-align: start;
5120
    overflow-y: auto;
5121
    max-height: 100%;
5122
}
5123

5124
.list-group {
5125
    display: flex;
5126
    flex-direction: column;
5127
    padding-left: 0;
5128
    margin-top: 0;
5129
    overflow: hidden;
5130
    background-color: var(--SmartThemeBlurTintColor);
5131
    backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)*2));
5132
    border: 1px solid var(--SmartThemeBorderColor);
5133
    border-radius: 10px;
5134
    box-shadow: 0 0 5px black;
5135
    text-shadow: 0px 0px calc(var(--shadowWidth) * 1px) var(--SmartThemeShadowColor);
5136
}
5137

5138
/* ############################################################# */
5139
/*           Right nav panel and nav-toggle */
5140
/* ############################################################# */
5141

5142
#nav-toggle {
5143
    position: fixed;
5144
    right: 13px;
5145
    top: 12px;
5146
    padding: 0;
5147
    margin: 0;
5148
    cursor: pointer;
5149
    height: 0;
5150
    width: 0;
5151
    z-index: 3001;
5152
}
5153

5154
#hidden-divs {
5155
    display: none;
5156
}
5157

5158
/* Message images/video */
5159
.mes .mes_media_wrapper:empty {
5160
    display: none;
5161
}
5162

5163
.mes .mes_media_wrapper {
5164
    display: flex;
5165
    flex-direction: row;
5166
    align-items: center;
5167
    flex-wrap: wrap;
5168
    gap: 0.5em;
5169
    padding-right: var(--mes-right-spacing);
5170
}
5171

5172
.mes_media_wrapper:not(:empty)~.mes_file_wrapper:not(:empty) {
5173
    margin-top: 0.5em;
5174
}
5175

5176
.mes .mes_img_container,
5177
.mes .mes_video_container {
5178
    max-width: 100%;
5179
    /*to fit inside single window height of mobile landscape*/
5180
    display: none;
5181
    position: relative;
5182
    width: fit-content;
5183
    transition: all var(--animation-duration);
5184
    border-radius: 5px;
5185
    overflow: hidden;
5186
}
5187

5188
.mes .mes_video_container:has(.mes_video[src]) {
5189
    display: flex;
5190
}
5191

5192
.mes_img {
5193
    max-width: 100%;
5194
    max-height: 40vh;
5195
    image-rendering: -webkit-optimize-contrast;
5196
    cursor: pointer;
5197
}
5198

5199
.mes_img.error {
5200
    visibility: hidden;
5201
    min-height: 100px;
5202
    min-width: 120px;
5203
}
5204

5205
.mes_img_swipes,
5206
.mes_img_controls,
5207
.mes_video_controls {
5208
    position: absolute;
5209
    top: 0;
5210
    left: 0;
5211
    width: 100%;
5212
    display: flex;
5213
    opacity: 0;
5214
    flex-direction: row;
5215
    justify-content: space-between;
5216
    align-items: center;
5217
    padding: 10px;
5218
    z-index: 1;
5219
    transition: opacity var(--animation-duration) ease-in-out;
5220
    background: linear-gradient(rgba(0, 0, 0, 0.8), transparent);
5221
}
5222

5223
.mes_img_swipes {
5224
    top: unset;
5225
    bottom: 0;
5226
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
5227
}
5228

5229
/* Pass-through pointer events to the swipe buttons only */
5230
.mes .mes_video_container .mes_img_swipes {
5231
    pointer-events: none;
5232
}
5233

5234
.mes .mes_video_container .mes_img_swipes :is(.mes_img_swipe_left, .mes_img_swipe_right) {
5235
    pointer-events: auto;
5236
}
5237

5238
.mes_img_swipes .right_menu_button,
5239
.mes_img_controls .right_menu_button,
5240
.mes_video_controls .right_menu_button {
5241
    filter: brightness(90%);
5242
    text-shadow: 1px 1px var(--SmartThemeShadowColor) !important;
5243
    padding: 1px;
5244
    height: 1.25em;
5245
    width: 1.25em;
5246
}
5247

5248
.mes_img_swipes .right_menu_button::before,
5249
.mes_img_controls .right_menu_button::before,
5250
.mes_video_controls .right_menu_button::before {
5251
    /* Fix weird alignment with this font-awesome icons on focus */
5252
    position: relative;
5253
    top: 0.6125em;
5254
}
5255

5256
.mes_img_swipes .right_menu_button:hover,
5257
.mes_img_controls .right_menu_button:hover,
5258
.mes_video_controls .right_menu_button:hover {
5259
    filter: brightness(150%);
5260
}
5261

5262
/* It's better to show controls only when the video is not playing */
5263
/* but :playing pseudo-class is not supported in all browsers */
5264
/* .mes_video_container:focus-within .mes_video_controls:not(:has(.mes_video:playing)), */
5265
.mes_img_container:has(.mes_img.error) .mes_img_swipes,
5266
.mes_img_container:has(.mes_img.error) .mes_img_controls,
5267
.mes_img_container:hover .mes_img_swipes,
5268
.mes_img_container:focus-within .mes_img_swipes,
5269
.mes_img_container:hover .mes_img_controls,
5270
.mes_img_container:focus-within .mes_img_controls,
5271
.mes_video_container:hover .mes_video_controls,
5272
.mes_video_container:has(.mes_video.error) .mes_img_swipes,
5273
.mes_video_container:hover .mes_img_swipes {
5274
    opacity: 1;
5275
}
5276

5277
.mes_media_container:has(.error) .mes_img_controls,
5278
.mes_media_container:has(.error) .mes_img_swipes {
5279
    background: none;
5280
}
5281

5282
.mes .mes_img_container {
5283
    display: flex;
5284
}
5285

5286
body:not(.caption) .mes_img_caption {
5287
    display: none;
5288
}
5289

5290
.mes_img_container:not(.img_swipes) .mes_img_swipes {
5291
    display: none;
5292
}
5293

5294
.mes_img_swipe_counter {
5295
    font-weight: 600;
5296
    filter: drop-shadow(2px 4px 6px black);
5297
    cursor: default;
5298
}
5299

5300
.img_enlarged_holder {
5301
    /* Scaling via flex-grow and object-fit only works if we have some kind of base-height set */
5302
    min-height: 120px;
5303
}
5304

5305
.img_enlarged_holder:has(.zoomed) {
5306
    overflow: auto;
5307
}
5308

5309
.img_enlarged {
5310
    object-fit: contain;
5311
    max-width: 100%;
5312
    height: 100%;
5313
    cursor: zoom-in
5314
}
5315

5316
.img_enlarged.zoomed {
5317
    object-fit: cover;
5318
    width: auto;
5319
    height: auto;
5320
    cursor: zoom-out;
5321
}
5322

5323
.img_enlarged_container {
5324
    display: flex;
5325
    flex-direction: column;
5326
    justify-content: center;
5327
    padding: 0px;
5328
    height: 100%;
5329
    width: 100%;
5330
}
5331

5332
.img_enlarged_container pre code {
5333
    position: relative;
5334
    display: block;
5335
    overflow-x: auto;
5336
    padding: 1em;
5337
}
5338

5339
.img_enlarged_container pre {
5340
    max-height: 25vh;
5341
    max-height: 25dvh;
5342
    flex-shrink: 0;
5343
    overflow: auto;
5344
}
5345

5346
.popup:has(.img_enlarged.zoomed).large_dialogue_popup {
5347
    height: 100vh !important;
5348
    height: 100dvh !important;
5349
    max-height: 100vh !important;
5350
    max-height: 100dvh !important;
5351
    max-width: 100vw !important;
5352
    max-width: 100dvw !important;
5353
    padding: 0;
5354
}
5355

5356
.popup:has(.img_enlarged.zoomed).large_dialogue_popup .popup-content {
5357
    margin: 0;
5358
    padding: 0;
5359
}
5360

5361
.popup:has(.img_enlarged.zoomed).large_dialogue_popup .img_enlarged_container pre {
5362
    display: none;
5363
}
5364

5365
.popup:has(.img_enlarged.zoomed).large_dialogue_popup .popup-button-close {
5366
    display: none !important;
5367
}
5368

5369
.cropper-container {
5370
    max-width: 100% !important;
5371
}
5372

5373
/* Video message styling */
5374
.mes_video {
5375
    max-width: 100%;
5376
    max-height: 400px;
5377
    background: #000;
5378
}
5379

5380
/* Ensure video controls are visible */
5381
.mes_video::-webkit-media-controls {
5382
    display: flex !important;
5383
}
5384

5385
.mes_video::-webkit-media-controls-panel {
5386
    background-color: rgba(0, 0, 0, 0.2);
5387
}
5388

5389
/* Align the content of this span to the right */
5390
.delete-button {
5391
    margin-right: 10px;
5392
    display: inline-flex;
5393
}
5394

5395
#extensions_settings .inline-drawer-toggle.inline-drawer-header,
5396
#extensions_settings2 .inline-drawer-toggle.inline-drawer-header,
5397
#user-settings-block h4,
5398
.standoutHeader {
5399
    background-image: linear-gradient(348deg, var(--white30a)2%, var(--grey30a)10%, var(--black70a)95%, var(--SmartThemeQuoteColor)100%);
5400
    margin-bottom: 5px;
5401
    border-radius: 10px;
5402
    padding: 2px 5px;
5403
    border: 1px solid var(--SmartThemeBorderColor);
5404
    transition: all var(--animation-duration-2x);
5405
}
5406

5407
.standoutHeader.inline-drawer-header {
5408
    padding: 5px;
5409
    margin-bottom: 0;
5410
}
5411

5412
.standoutHeader~.inline-drawer-content {
5413
    border: 1px solid var(--SmartThemeBorderColor);
5414
    padding: 5px;
5415
    border-radius: 10px;
5416
    background-color: var(--black30a);
5417
}
5418

5419
#user-settings-block [name="MiscellaneousToggles"],
5420
#CustomCSS-block,
5421
#CustomCSS-textAreaBlock {
5422
    display: contents;
5423
}
5424

5425
#customCSS {
5426
    flex: 1 1 auto;
5427
    min-height: 20vh;
5428
    min-height: 20dvh;
5429
}
5430

5431
#ui_language_select {
5432
    width: 8em;
5433
}
5434

5435
#extensions_settings .inline-drawer-toggle.inline-drawer-header:hover,
5436
#extensions_settings2 .inline-drawer-toggle.inline-drawer-header:hover,
5437
.standoutHeader.inline-drawer-header:hover {
5438
    filter: brightness(150%);
5439
}
5440

5441
.menu_button_icon {
5442
    display: flex;
5443
    align-items: center;
5444
    width: fit-content;
5445
    gap: 5px;
5446
}
5447

5448
.menu_button_icon span {
5449
    font-size: calc(var(--mainFontSize) * 0.9);
5450
}
5451

5452
/*------------ TOP SIDE SETTINGS ----------------*/
5453

5454
#top-settings-holder {
5455
    display: flex;
5456
    margin: 0 auto;
5457
    height: var(--topBarBlockSize);
5458
    justify-content: center;
5459
    z-index: 3005;
5460
    position: relative;
5461
    width: var(--sheldWidth);
5462

5463
}
5464

5465
body:has(.drawer-content.maximized) #top-settings-holder:has(.drawer-content.openDrawer:not(.fillLeft):not(.fillRight)),
5466
body:has(.drawer-content.open) #top-settings-holder:has(.drawer-content.openDrawer:not(.fillLeft):not(.fillRight)),
5467
body:has(#character_popup.open) #top-settings-holder:has(.drawer-content.openDrawer:not(.fillLeft):not(.fillRight)) {
5468
    z-index: 4005;
5469
}
5470

5471
.drawer {
5472
    align-items: center;
5473
    justify-content: center;
5474
    display: flex;
5475
    flex-flow: row;
5476
    width: 100%;
5477
}
5478

5479
.drawer-icon {
5480
    display: inline-block;
5481
    cursor: pointer;
5482
    font-size: var(--topBarIconSize);
5483
    padding: 1px 3px;
5484
}
5485

5486
.drawer-icon.openIcon {
5487
    transition: all var(--animation-duration-2x);
5488
}
5489

5490
.drawer-icon.closedIcon {
5491
    opacity: 0.3;
5492
    transition: all var(--animation-duration-2x);
5493
}
5494

5495
.drawer-icon.closedIcon:hover {
5496
    opacity: 1;
5497
}
5498

5499
.code-copy {
5500
    cursor: pointer;
5501
    position: absolute;
5502
    top: 0;
5503
    right: 0;
5504
    height: 22px;
5505
    width: 22px;
5506
    margin: 4px;
5507
    opacity: 0.4;
5508
    display: flex;
5509
    align-items: center;
5510
    justify-content: center;
5511
}
5512

5513
.code-copy:hover {
5514
    opacity: 0.8;
5515
}
5516

5517
.custom-drawer-icon,
5518
.inline-drawer-icon {
5519
    display: block;
5520
    cursor: pointer;
5521
    font-size: calc(var(--mainFontSize)*1.5);
5522
    background-size: cover;
5523
    background-repeat: no-repeat;
5524
    filter: brightness(75%);
5525
}
5526

5527
.inline-drawer-header {
5528
    display: flex;
5529
    justify-content: space-between;
5530
    align-items: center;
5531
    padding: 5px 0;
5532
    cursor: pointer;
5533
}
5534

5535
.inline-drawer-content {
5536
    display: none;
5537
}
5538

5539
.drawer25pWidth {
5540
    flex-basis: calc((var(--sheldWidth) / 4) - 16px);
5541
}
5542

5543
.drawer33pWidth {
5544
    flex-basis: calc((var(--sheldWidth) / 3) - 16px);
5545
}
5546

5547
.drawer-content {
5548
    background-color: var(--SmartThemeBlurTintColor);
5549
    color: var(--SmartThemeBodyColor);
5550
    border-radius: 10px;
5551
    padding: 5px;
5552
    border: 1px solid var(--SmartThemeBorderColor);
5553
    min-width: 450px;
5554
    width: var(--sheldWidth);
5555
    overflow-y: hidden;
5556
    max-height: calc(100vh - calc(var(--topBarBlockSize) + var(--bottomFormBlockSize)));
5557
    max-height: calc(100dvh - calc(var(--topBarBlockSize) + var(--bottomFormBlockSize)));
5558
    display: none;
5559
    position: absolute;
5560
    top: var(--topBarBlockSize);
5561
    left: 0;
5562
    right: 0;
5563
    margin: 0 auto;
5564
    height: 0;
5565
    backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
5566
    -webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
5567
    /* z-index: 1000 !important; */
5568
    transition-property: height, display;
5569
    transition-duration: var(--animation-duration-2x);
5570
    transition-timing-function: ease-in-out;
5571
    transition-behavior: allow-discrete;
5572
}
5573

5574
#movingDivs>.drawer-content {
5575
    height: unset;
5576
}
5577

5578
.drawer-content.openDrawer {
5579
    display: block;
5580
    height: auto;
5581
    height: calc-size(auto, size);
5582
    overflow-y: auto;
5583

5584
    @supports selector(::-webkit-scrollbar-thumb) {
5585
        animation: hide-scroll var(--animation-duration-2x) backwards;
5586
    }
5587

5588
    @starting-style {
5589
        height: 0;
5590
    }
5591
}
5592

5593
body.movingUI .inline-drawer-maximize {
5594
    display: none;
5595
}
5596

5597
body:not(.movingUI) .drawer-content.maximized {
5598
    width: var(--sheldWidth) !important;
5599
    top: var(--topBarBlockSize) !important;
5600
    margin: 0 auto !important;
5601
    right: 0 !important;
5602
}
5603

5604
/*to prevent draggables from being made too small to see*/
5605
.fillRight,
5606
.fillLeft,
5607
#WorldInfo,
5608
#floatingPrompt {
5609
    min-width: 100px !important;
5610
    min-height: 100px !important;
5611
    position: fixed;
5612
}
5613

5614
.fillLeft,
5615
.fillRight {
5616
    width: calc((100vw - var(--sheldWidth) - 2px) /2);
5617
    width: calc((100dvw - var(--sheldWidth) - 2px) /2);
5618
    max-height: calc(100vh - var(--topBarBlockSize));
5619
    max-height: calc(100dvh - var(--topBarBlockSize));
5620
    height: 0;
5621
    position: fixed;
5622
    top: 0;
5623
    margin: 0;
5624
    box-shadow: none;
5625
    overflow: hidden;
5626
    flex-flow: column;
5627
    min-width: 100px;
5628
}
5629

5630
.fillLeft {
5631
    left: 0;
5632
    right: auto;
5633
}
5634

5635
.fillRight {
5636
    right: 0;
5637
    left: calc(100% - var(--sheldWidth) /2 + var(--sheldWidth) +1px);
5638
    z-index: 3000;
5639
}
5640

5641
.fillLeft.openDrawer,
5642
.fillRight.openDrawer {
5643
    display: flex;
5644
    height: 100%;
5645

5646
    @starting-style {
5647
        height: 0;
5648
    }
5649
}
5650

5651
/*
5652
.fillRight #rm_print_characters_block {
5653
    overflow-y: hidden;
5654
}
5655

5656
.fillRight.openDrawer #rm_print_characters_block {
5657
    overflow-y: auto;
5658
    animation: hide-scroll var(--animation-duration-2x) backwards;
5659
}
5660
*/
5661

5662
.scrollableInner {
5663
    overflow-x: hidden;
5664
    height: 100%;
5665
}
5666

5667
.scrollableInnerFull {
5668
    height: 100%;
5669
    overflow-Y: auto;
5670
    overflow-X: hidden;
5671
}
5672

5673
.fillLeft .scrollableInner {
5674
    padding: 0.5em 0.75em 0.5em 0.5em
5675
}
5676

5677
.drawer-content select {
5678
    width: 100%;
5679
    font-size: calc(var(--mainFontSize) * 0.95);
5680
}
5681

5682
.settingsSectionWrap {
5683
    border: 1px solid var(--SmartThemeBorderColor);
5684
    border-radius: 10px;
5685
    padding: 5px;
5686
}
5687

5688
.wi-enter-footer-text {
5689
    font-size: calc(var(--mainFontSize) * 0.8);
5690
    color: var(--SmartThemeBodyColor);
5691
}
5692

5693
#openai_api-presets select {
5694
    width: 100%;
5695
}
5696

5697
.template_element {
5698
    display: none !important;
5699
}
5700

5701
.openai_logit_bias_text,
5702
.openai_logit_bias_value {
5703
    flex: 1;
5704
}
5705

5706
.editable-slider-notification {
5707
    position: absolute;
5708
    right: 0px;
5709
    left: 0px;
5710
    margin: 0 auto;
5711
    width: 70%;
5712
    top: 5px;
5713
    padding: 0;
5714
    display: block;
5715
    text-align: center;
5716
}
5717

5718
.openai_logit_bias_form {
5719
    display: flex;
5720
    flex-direction: row;
5721
    column-gap: 10px;
5722
    align-items: center;
5723
}
5724

5725
.openai_logit_bias_list {
5726
    display: flex;
5727
    flex-direction: column;
5728
    gap: 10px;
5729
}
5730

5731
.openai_logit_bias_list:empty {
5732
    width: 100%;
5733
    height: 100%;
5734
}
5735

5736
.logit_bias_form {
5737
    display: flex;
5738
    flex-direction: row;
5739
    column-gap: 10px;
5740
    align-items: center;
5741
}
5742

5743
.logit_bias_text,
5744
.logit_bias_value {
5745
    flex: 1;
5746
}
5747

5748
.logit_bias_list {
5749
    display: flex;
5750
    flex-direction: column;
5751
    gap: 10px;
5752
}
5753

5754
.logit_bias_list:empty {
5755
    width: 100%;
5756
    height: 100%;
5757
}
5758

5759
.logit_bias_list:empty::before {
5760
    display: flex;
5761
    align-items: center;
5762
    justify-content: center;
5763
    content: "No items";
5764
    font-weight: bolder;
5765
    width: 100%;
5766
    height: 100%;
5767
    opacity: 0.8;
5768
    min-height: 2.5em;
5769
}
5770

5771
.openai_logit_bias_preset_form {
5772
    display: flex;
5773
    flex-direction: row;
5774
    width: 100%;
5775
    gap: 5px;
5776
    align-items: baseline;
5777
}
5778

5779
#openai_logit_bias_new_entry {
5780
    margin-top: 0.5rem;
5781
}
5782

5783
.openai_logit_bias_preset_form select {
5784
    flex: 1;
5785
}
5786

5787
.openai_logit_bias_list:empty::before {
5788
    display: flex;
5789
    align-items: center;
5790
    justify-content: center;
5791
    content: "No items";
5792
    font-weight: bolder;
5793
    width: 100%;
5794
    height: 100%;
5795
    opacity: 0.8;
5796
    min-height: 2.5em;
5797
}
5798

5799
.openai_restorable,
5800
.title_restorable {
5801
    display: flex;
5802
    flex-direction: row;
5803
    justify-content: space-between;
5804
    align-items: center;
5805
}
5806

5807
.openai_restorable .right_menu_button img {
5808
    height: 20px;
5809
}
5810

5811
#openai_api-presets {
5812
    flex-direction: column;
5813
}
5814

5815
#ReverseProxyWarningMessage {
5816
    display: none;
5817
}
5818

5819
.reverse_proxy_warning:not(small) {
5820
    color: var(--warning);
5821
    background-color: var(--black70a);
5822
    text-shadow: none !important;
5823
    margin-top: 5px !important;
5824
    border-radius: 5px;
5825
    padding: 3px;
5826
    border: 1px solid var(--SmartThemeBorderColor);
5827
}
5828

5829
.neutral_warning {
5830
    color: var(--warning);
5831
    font-weight: 800;
5832
}
5833

5834
.neutral_warning[data-for] {
5835
    display: none;
5836
}
5837

5838
.max_context_unlocked_block .checkbox_label {
5839
    flex-wrap: wrap;
5840
}
5841

5842

5843
#max_context_unlocked:not(:checked)+div {
5844
    display: none;
5845
}
5846

5847
#rm_group_add_members a,
5848
#rm_group_members a {
5849
    color: var(--SmartThemeBodyColor);
5850
}
5851

5852
.draggable {
5853
    min-width: 100px;
5854
    min-height: 100px;
5855
    max-height: 90vh;
5856
    max-width: 90vw;
5857
    width: calc((100vw - var(--sheldWidth)) /2);
5858
    position: absolute;
5859
    padding: 0;
5860
    filter: drop-shadow(1px 1px 2px var(--black50a));
5861
    z-index: 29;
5862
    overflow: hidden;
5863
    display: none;
5864
    bottom: 0;
5865
    border-radius: 10px;
5866
    border: 1px solid var(--SmartThemeBorderColor);
5867
    aspect-ratio: unset;
5868
    backdrop-filter: blur(var(--SmartThemeBlurStrength));
5869
    background-color: var(--SmartThemeBlurTintColor);
5870
    padding: 5px;
5871
}
5872

5873
.zoomed_avatar {
5874
    /* Max height with 2/3 aspect ratio */
5875
    --maxWidth: calc(90vh * 0.666);
5876
    /* Left gap between the left corner and chat */
5877
    --leftGapWidth: calc((100vw - var(--sheldWidth)) / 2);
5878
    /* Left position of the avatar (half of the gap minus half of the avatar width) */
5879
    --leftPosition: max(0px, calc((var(--leftGapWidth) - var(--maxWidth)) / 2));
5880
    padding: 0;
5881
    border: 0;
5882
    background-color: transparent;
5883
    max-width: var(--maxWidth);
5884
    left: var(--leftPosition);
5885
    position: absolute;
5886
    height: auto;
5887
    max-height: 90vh !important;
5888
    align-items: start;
5889
}
5890

5891
/*why were we force hiding the close button again..?*/
5892
/* .zoomed_avatar .dragClose {
5893
    display: none;
5894
} */
5895

5896
.zoomed_avatar_container {
5897
    width: 100%;
5898
    /* margin-inline: 10px; */
5899
    max-height: 90vh;
5900
    max-width: 90dvh;
5901
}
5902

5903
.zoomed_avatar img {
5904
    height: unset !important;
5905
    width: 100%;
5906
    object-fit: contain !important;
5907
    border-radius: 10px;
5908
}
5909

5910
/* Hide scrollbar for Chrome, Safari and Opera */
5911
.no-scrollbar::-webkit-scrollbar {
5912
    display: none;
5913
}
5914

5915
/* Hide scrollbar for IE, Edge, and Firefox */
5916
.no-scrollbar {
5917
    -ms-overflow-style: none;
5918
    /* IE and Edge */
5919
    scrollbar-width: none;
5920
    /* Firefox */
5921
}
5922

5923
#groupMemberListPopoutClose {
5924
    height: 15px;
5925
    aspect-ratio: 1 / 1;
5926
    font-size: 20px;
5927
    opacity: 0.5;
5928
    transition: all var(--animation-duration-2x);
5929
}
5930

5931
/* #groupMemberListPopout,
5932
#summaryExtensionPopout {
5933
    aspect-ratio: unset;
5934
    backdrop-filter: blur(var(--SmartThemeBlurStrength));
5935
    background-color: var(--SmartThemeBlurTintColor);
5936
    overflow: auto;
5937
} */
5938

5939
#groupMemberListPopout {
5940
    padding: 0;
5941
    height: 50%;
5942
}
5943

5944
#groupMemberListPopout #currentGroupMembers {
5945
    height: 100%;
5946
}
5947

5948
#groupMemberListPopout #rm_group_members {
5949
    /*     background-color: var(--SmartThemeBlurTintColor); */
5950
    margin: 0;
5951
    padding: 0;
5952
    padding-top: 20px;
5953

5954
}
5955

5956

5957

5958
.timestamp {
5959
    font-size: calc(var(--mainFontSize) * 0.7);
5960
    font-weight: 400;
5961
}
5962

5963
.lastInContext {
5964
    border-top: 3px dotted var(--SmartThemeQuoteColor) !important;
5965
}
5966

5967
.icon-svg {
5968
    /* Takes on the color of the surrounding text */
5969
    fill: currentColor;
5970
    width: auto;
5971
    height: 14px;
5972
    aspect-ratio: 1;
5973
    /* To align with adjacent text */
5974
    place-self: center;
5975
}
5976

5977
.paginationjs {
5978
    display: flex;
5979
    align-items: center;
5980
    flex-direction: row;
5981
}
5982

5983
/* Pagination */
5984
.paginationsjs-pages {
5985
    margin: 0.5em 0;
5986
    display: flex;
5987
    justify-content: center;
5988
    align-items: center;
5989
}
5990

5991
.paginationjs-pages ul {
5992
    list-style-type: none;
5993
    margin: 0.25em;
5994
    padding: 0;
5995
    display: flex;
5996
    justify-content: center;
5997
    align-items: center;
5998
    gap: 5px;
5999
    user-select: none;
6000
}
6001

6002
.paginationjs-size-changer select {
6003
    width: unset;
6004
    margin: 0;
6005
    font-size: calc(var(--mainFontSize) * 0.85);
6006
    padding-right: 20px;
6007
}
6008

6009
.paginationjs-pages ul li a {
6010
    padding: 0.25em;
6011
    font-family: 'Font Awesome 6 Free';
6012
    text-decoration: none;
6013
    color: var(--SmartThemeBodyColor);
6014
    border: 1px solid var(--SmartThemeBorderColor);
6015
    border-radius: 5px;
6016
    transition: opacity var(--animation-duration-2x);
6017
    opacity: 0.8;
6018
    cursor: pointer;
6019
}
6020

6021
.paginationjs-pages ul li a:hover {
6022
    opacity: 1;
6023
}
6024

6025
.paginationjs-pages ul li.active a {
6026
    color: var(--SmartThemeQuoteColor);
6027
    border-color: var(--SmartThemeQuoteColor);
6028
    opacity: 1;
6029
}
6030

6031
.paginationjs-pages ul li.disabled a {
6032
    opacity: 0.5;
6033
    cursor: not-allowed;
6034
}
6035

6036
.paginationjs-nav {
6037
    padding: 2px;
6038
    font-size: calc(var(--mainFontSize) * .8);
6039
    font-weight: bold;
6040
    width: auto;
6041
}
6042

6043
.onboarding {
6044
    display: flex;
6045
    flex-direction: column;
6046
    gap: 10px;
6047
    text-align: left;
6048
    height: 100%;
6049
}
6050

6051
.onboarding span.menu_button {
6052
    display: inline-flex;
6053
}
6054

6055
.onboarding>h3 {
6056
    align-self: center;
6057
}
6058

6059
#show_more_messages {
6060
    text-align: center;
6061
    margin: 10px auto;
6062
    font-weight: 500;
6063
    order: -1;
6064
    cursor: pointer;
6065
    padding: 0.5em 1em;
6066
    background-color: var(--SmartThemeBlurTintColor);
6067
    width: fit-content;
6068
    border-radius: 10px;
6069
    outline: 1px solid var(--SmartThemeBorderColor);
6070
    transition: filter var(--animation-duration-2x) ease-in-out;
6071
}
6072

6073
#show_more_messages:hover {
6074
    filter: brightness(1.25);
6075
}
6076

6077
.draggable img {
6078
    width: 100%;
6079
    height: 100%;
6080
    object-fit: cover;
6081
}
6082

6083
/* Jank mobile support for gallery and future draggables */
6084
@media screen and (max-width: 1000px) {
6085
    .draggable {
6086
        display: block;
6087
        width: 100vw;
6088
        height: 100vh;
6089
        z-index: 9999;
6090
    }
6091
}
6092

6093
/* CSS styles using a consistent pastel color palette */
6094
.regex-brackets {
6095
    color: #FFB347;
6096
}
6097

6098
/* Pastel Orange */
6099
.regex-special {
6100
    color: #B0E0E6;
6101
}
6102

6103
/* Powder Blue */
6104
.regex-quantifier {
6105
    color: #DDA0DD;
6106
}
6107

6108
/* Plum */
6109
.regex-operator {
6110
    color: #FFB6C1;
6111
}
6112

6113
/* Light Pink */
6114
.regex-flags {
6115
    color: #98FB98;
6116
}
6117

6118
/* Pale Green */
6119
.regex-delimiter {
6120
    font-weight: bold;
6121
    color: #FF6961;
6122
}
6123

6124
/* Pastel Red */
6125
.regex-highlight {
6126
    color: #FAF8F6;
6127
}
6128

6129
.popup:has(.faPicker) {
6130
    /* Fix height for fa picker popup, otherwise search is making it resize weirdly */
6131
    height: 70%;
6132

6133
    .popup-content {
6134
        display: flex;
6135
        flex-direction: column;
6136
    }
6137
}
6138

6139
.faPicker-container {
6140
    display: flex;
6141
    flex-direction: column;
6142
    overflow: hidden;
6143
    ;
6144
}
6145

6146
.faQuery-container {
6147
    flex: 0 0 auto;
6148
}
6149

6150
.faPicker {
6151
    flex: 1 1 auto;
6152
    overflow: auto;
6153
    gap: 1em;
6154
    display: grid;
6155
    grid-template-columns: repeat(auto-fill, minmax(3.5em, 1fr));
6156

6157
    .menu_button {
6158
        aspect-ratio: 1 / 1;
6159
        font-size: 2em;
6160
        height: 1lh;
6161
        line-height: 1.2;
6162
        padding: 0.25em;
6163
        width: unset;
6164
        box-sizing: content-box;
6165

6166
        &.hidden {
6167
            display: none;
6168
        }
6169
    }
6170
}
6171

6172
.faPicker:not(:has(:not(.hidden)))::after {
6173
    content: 'No icons found';
6174
    color: var(--SmartThemeBodyColor);
6175
    opacity: 0.7;
6176
    width: max-content;
6177
}
6178

6179
#AdvancedFormatting .autoSetHeight {
6180
    overflow-wrap: anywhere;
6181
}
6182

6183
#SystemPromptColumn summary,
6184
#InstructSequencesColumn summary {
6185
    font-size: 0.95em;
6186
    cursor: pointer;
6187
}
6188

6189
#SystemPromptColumn details,
6190
#InstructSequencesColumn details:not(:last-of-type) {
6191
    margin-bottom: 5px;
6192
}
6193

6194
#user_avatar_block {
6195
    display: flex;
6196
    flex-wrap: wrap;
6197
    gap: 10px;
6198
}
6199

6200
/* Main structure for the model cards */
6201
.model-card {
6202
    display: flex;
6203
    justify-content: space-between;
6204
    align-items: center;
6205
    padding: 5px;
6206
    border: 1px solid #333;
6207
    border-radius: 8px;
6208
    background-color: #222;
6209
    color: #fff;
6210
    margin: 7px;
6211
    width: calc(100% - 7px);
6212
    box-sizing: border-box;
6213
    transition: transform var(--animation-duration-2x) ease-in-out, background-color var(--animation-duration-2x) ease-in-out, border var(--animation-duration-2x) ease-in-out;
6214
}
6215

6216
.model-card .details-container {
6217
    text-align: right;
6218
    line-height: 0.9;
6219
}
6220

6221
.model-card:hover {
6222
    transform: scale(1.01);
6223
    background-color: #444;
6224
    /* Smooth transition */
6225
    transition: transform var(--animation-duration-2x) ease-in-out, background-color var(--animation-duration-2x) ease-in-out;
6226
}
6227

6228
.model-card.selected {
6229
    border: 2px solid var(--okGreen70a);
6230
    background-color: var(--okGreen70a);
6231
}
6232

6233
.model-info {
6234
    flex: 1;
6235
    white-space: nowrap;
6236
    overflow: hidden;
6237
    text-overflow: ellipsis;
6238
}
6239

6240
.model-title {
6241
    font-size: calc(var(--mainFontSize) * 0.95);
6242
    font-weight: bold;
6243
    overflow: hidden;
6244
}
6245

6246
.model-details {
6247
    display: flex;
6248
    flex-direction: column;
6249
    align-items: flex-end;
6250
    text-align: right;
6251
    min-width: 120px;
6252
}
6253

6254
.model-class,
6255
.model-context-length,
6256
.model-date-added {
6257
    font-size: calc(var(--mainFontSize) * 0.75);
6258
}
6259

6260
.model-class,
6261
.model-context-length {
6262
    margin-bottom: 5px;
6263
}
6264

6265
#featherless_model_pagination_container .paginationjs-nav {
6266
    min-width: max-content;
6267
}
6268

6269
#featherless_model_card_block.grid-view {
6270
    grid-template-columns: repeat(2, 1fr);
6271
    display: flex;
6272
    flex-wrap: wrap;
6273
    /* gap: 3px; */
6274
    justify-content: flex-start;
6275
}
6276

6277
/* Grid-view card */
6278
#featherless_model_card_block.grid-view .model-card {
6279
    flex-direction: column;
6280
    flex: 1 1 calc(50% - 30px);
6281
}
6282

6283
#featherless_model_search_bar {
6284
    width: 15ch;
6285
    flex-grow: 0;
6286
    align-self: center;
6287
}
6288

6289
#featherless_model_sort_order {
6290
    width: auto;
6291
    flex-shrink: 0;
6292
    align-self: center;
6293
}
6294

6295
#featherless_model_grid_toggle {
6296
    flex-shrink: 0;
6297
    width: auto;
6298
    cursor: pointer;
6299
}
6300

6301
#featherless_category_selection,
6302
#featherless_class_selection {
6303
    display: flex;
6304
    width: auto;
6305
    align-self: center;
6306
}
6307

6308
@media (max-width: 768px) {
6309
    .model-card {
6310
        flex-direction: column;
6311
        align-items: stretch;
6312
    }
6313

6314
    .model-info,
6315
    .model-details,
6316
    .model-date-added {
6317
        width: 100%;
6318
        text-align: left;
6319
    }
6320

6321
    #featherless_model_search_bar {
6322
        flex: 1;
6323
        flex-basis: 100%;
6324
    }
6325

6326
}
6327

6328
/* Constrict the scroll of alternate greetings to only the dynamic form section */
6329
.alternate_grettings {
6330
    display: grid;
6331
    grid-template-rows: auto auto auto 1fr;
6332
    max-height: 100%;
6333
    overflow: hidden;
6334
}
6335

6336
.alternate_greetings_list {
6337
    overflow-y: scroll;
6338
}
6339

6340
.mes_text div[data-type="assistant_note"]:has(.assistant_note_export) {
6341
    display: flex;
6342
    flex-direction: row;
6343
    flex-wrap: nowrap;
6344
    justify-content: space-between;
6345
    align-items: center;
6346
    gap: 5px;
6347
}
6348

6349
.mes_text div[data-type="assistant_note"]:has(.assistant_note_export)>div {
6350
    flex: 1;
6351
    text-align: left;
6352
}
6353

6354
.oneline-dropdown label {
6355
    margin-top: 3px;
6356
    margin-bottom: 5px;
6357
    flex-grow: 1;
6358
    text-align: left;
6359
}
6360

6361
.oneline-dropdown select {
6362
    min-width: fit-content;
6363
    width: 40%;
6364
}
6365

6366
.multiline {
6367
    white-space: pre-wrap;
6368
}
6369

6370
.info-block {
6371
    padding: 10px 1em;
6372
    margin: 1em 0;
6373
    border-radius: 10px;
6374
    border-left: 5px solid;
6375
    background-color: var(--SmartThemeBlurTintColor);
6376
    color: var(--SmartThemeBodyColor);
6377
    backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
6378
    -webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
6379
}
6380

6381
.info-block.hint {
6382
    border-color: var(--info-color, #7fb3e8);
6383
    background-color: rgba(163, 201, 241, 0.2);
6384
}
6385

6386
.info-block.info {
6387
    border-color: var(--default-color, #e8e07f);
6388
    background-color: rgba(255, 255, 224, 0.2);
6389
}
6390

6391
.info-block.warning {
6392
    border-color: var(--warning-color, #e8a97f);
6393
    background-color: rgba(241, 198, 163, 0.2);
6394
    /* Reset the font weight from that main warning class */
6395
    font-weight: unset;
6396
}
6397

6398
.info-block.error {
6399
    border-color: var(--error-color, #e87f7f);
6400
    background-color: rgba(241, 163, 163, 0.2);
6401
}
6402

6403
.nanogpt_info_btn {
6404
    display: inline-flex;
6405
    align-items: center;
6406
    justify-content: center;
6407
    min-width: 1.8em;
6408
    min-height: 1.8em;
6409
    margin-left: 0.15em;
6410
    vertical-align: middle;
6411
}
6412

6413
.nanogpt-credits-popup {
6414
    display: grid;
6415
    gap: 0.25em 1em;
6416
    grid-template-columns: max-content minmax(0, 1fr);
6417
    text-align: left;
6418
}
6419

6420
.nanogpt-credits-popup h3 {
6421
    grid-column: 1 / -1;
6422
    margin: 0 0 0.25em;
6423
}
6424

6425
.nanogpt-credits-popup div:nth-of-type(odd) {
6426
    opacity: 0.8;
6427
    white-space: nowrap;
6428
}
6429

6430
.nanogpt-credits-popup div:nth-of-type(even) {
6431
    font-weight: 600;
6432
    overflow-wrap: anywhere;
6433
}
6434

6435
@media (prefers-contrast: more) {
6436
    :root {
6437
        --interactable-outline-color: CanvasText;
6438
        --interactable-outline-color-faint: CanvasText;
6439
    }
6440

6441
    .interactable:focus-visible,
6442
    select:focus-visible,
6443
    input:focus-visible,
6444
    textarea:focus-visible {
6445
        outline-width: 2px;
6446
    }
6447

6448
    .mes {
6449
        border: 2px solid var(--SmartThemeBorderColor);
6450
    }
6451

6452
    .menu_button,
6453
    .popup {
6454
        border-width: 2px;
6455
    }
6456
}