oeiuwq.com
tuiter 2006
1.qt-label-link, .rt-label-link {
2 text-decoration: none;
3 color: var(--tuiter-muted);
4 cursor: pointer;
5}
6.qt-label-link:hover, .rt-label-link:hover {
7 color: var(--tuiter-text);
8 text-decoration: none;
9}
10/* Quoted/Retweeted tweet box */
11.quoted-tweet, .retweeted-tweet {
12 margin: 2px 0 0 8px;
13 padding: 6px 8px;
14 background: var(--tuiter-surface-warm);
15 border-radius: 8px;
16 display: flex;
17 align-items: center;
18}
19
20/* QT/RT label */
21.qt-label, .rt-label {
22 font-size: 1.1em;
23 font-weight: 600;
24 color: var(--tuiter-muted);
25 margin-right: 8px;
26}
27
28/* Quoted/retweeted avatar */
29.quoted-avatar, .retweeted-avatar {
30 display: inline-block;
31 vertical-align: middle;
32 margin-right: 6px;
33}
34.quoted-avatar-img, .retweeted-avatar-img {
35 width: 24px;
36 height: 24px;
37 border-radius: 8px;
38 object-fit: cover;
39}
40
41/* Quoted/retweeted author name */
42.quoted-author-name, .retweeted-author-name {
43 font-weight: bold;
44 color: var(--tuiter-text);
45 margin-right: 6px;
46 text-decoration: none;
47 font-size: 11px;
48}
49.quoted-text, .retweeted-text {
50 color: var(--tuiter-text);
51}
52/* Sidebar background color for profile header fallback */
53.sidebar-bg {
54 background-color: var(--tuiter-sidebar-bg);
55}
56/* Profile header background */
57.profile-header-bg {
58 position: relative;
59 width: 100%;
60 min-height: 260px;
61 background-size: cover;
62 background-position: center;
63}
64
65.profile-header-bg-overlay {
66 position: absolute;
67 inset: 0;
68 background: rgba(var(--tuiter-media-black-rgb),0.15);
69}
70
71.profile-header-content {
72 position: relative;
73 z-index: 1;
74 display: flex;
75 flex-direction: row;
76 align-items: flex-start;
77 gap: 16px;
78 padding: 24px;
79}
80
81.profile-main {
82 color: var(--tuiter-white);
83 display: flex;
84 flex-direction: column;
85 justify-content: flex-end;
86 height: 100%;
87}
88
89.profile-names {
90 margin-bottom: 0.7em;
91}
92
93.profile-displayname {
94 margin-bottom: 0.2em;
95 font-size: 2.2em;
96 font-weight: bold;
97}
98
99.handle {
100 font-size: 2em;
101 font-weight: bold;
102 color: var(--tuiter-text);
103 background: rgba(var(--tuiter-white-rgb),0.85);
104 padding: 0.2em 0.5em;
105 border-radius: 8px;
106 box-shadow: 0 1px 4px rgba(var(--tuiter-media-black-rgb),0.12);
107 display: inline-block;
108}
109
110.profile-update-box {
111 text-shadow: none;
112 margin-top: 2.5em;
113}
114/* 2006 Twitter Tribute - Authentic Styling */
115
116* {
117 margin: 0;
118 padding: 0;
119 box-sizing: border-box;
120}
121
122body {
123 background-color: var(--tuiter-bg);
124 background-image: radial-gradient(circle at 10% 10%, rgba(var(--tuiter-white-rgb),0.10) 0.35rem, transparent 0.5rem),
125 radial-gradient(circle at 90% 20%, rgba(var(--tuiter-white-rgb),0.08) 0.45rem, transparent 0.6rem),
126 radial-gradient(circle at 30% 80%, rgba(var(--tuiter-white-rgb),0.06) 0.25rem, transparent 0.4rem);
127 font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
128 font-size: 11px;
129 color: var(--tuiter-text);
130 min-height: 100vh;
131}
132
133/* Header with logo */
134.header {
135 background: var(--tuiter-bg);
136 padding: 8px 12px;
137 border-bottom: 1px solid var(--tuiter-header-accent);
138 display: flex;
139 justify-content: space-between;
140 align-items: center;
141}
142
143.header h1 {
144 margin: 0;
145 font-size: 24px;
146 font-weight: bold;
147}
148
149.header h1 a {
150 color: var(--tuiter-white);
151 text-decoration: none;
152 text-shadow: 1px 1px 2px rgba(var(--tuiter-media-black-rgb),0.3);
153}
154
155/* Header navigation */
156.header-nav {
157 font-size: 11px;
158}
159
160.header-nav a {
161 color: var(--tuiter-text);
162 text-decoration: none;
163 margin: 0 2px;
164}
165
166.header-nav a:hover {
167 text-decoration: underline;
168}
169
170/* Search area in header */
171.search-area {
172 position: absolute;
173 top: 20px;
174 right: 20px;
175 font-size: 11px;
176}
177
178.search-area input[type="text"] {
179 width: 150px;
180 padding: 2px 4px;
181 border: 1px solid var(--tuiter-border-muted);
182 font-size: 11px;
183 background: var(--tuiter-white);
184}
185
186.search-area button {
187 padding: 2px 6px;
188 border: 1px solid var(--tuiter-border-muted);
189 background: var(--tuiter-input-bg);
190 font-size: 11px;
191 cursor: pointer;
192 margin-left: 2px;
193}
194
195.search-area a {
196 color: var(--tuiter-link);
197 text-decoration: none;
198 margin-left: 5px;
199}
200
201.search-area a:hover {
202 text-decoration: underline;
203}
204
205/* Main container */
206.container {
207 max-width: 1000px;
208 margin: 0 auto;
209 padding: 0 20px;
210}
211
212/* Two column layout */
213.main-content {
214 display: flex;
215 gap: 20px;
216 align-items: flex-start;
217}
218
219/* Left column - main content */
220.content {
221 flex: 1;
222 background: var(--tuiter-card);
223 border-radius: 10px;
224 padding: 20px;
225 box-shadow: 0 2px 5px rgba(var(--tuiter-media-black-rgb),0.1);
226 min-height: 400px;
227 max-width: 80%;
228}
229
230/* Right column - sidebar */
231.sidebar {
232 width: 250px;
233 background: var(--tuiter-sidebar-bg);
234 border-radius: 10px;
235 padding: 15px;
236 box-shadow: 0 2px 5px rgba(var(--tuiter-media-black-rgb),0.1);
237}
238
239/* Welcome message */
240.welcome-message {
241 font-size: 13px;
242 line-height: 1.4;
243 margin-bottom: 15px;
244 color: var(--tuiter-text);
245}
246
247.welcome-message .highlight {
248 background-color: var(--tuiter-highlight);
249 padding: 1px 2px;
250}
251
252/* Timeline styles */
253.timeline-intro {
254 font-size: 12px;
255 margin-bottom: 20px;
256 color: var(--tuiter-muted);
257}
258
259.timeline-intro a {
260 color: var(--tuiter-link);
261 text-decoration: underline;
262}
263
264.post {
265 border-bottom: 1px solid var(--tuiter-divider);
266 padding: 12px 0;
267 display: flex;
268 gap: 10px;
269}
270
271.post-avatar img {
272 width: 24px;
273 height: 24px;
274 background: var(--tuiter-avatar-bg);
275 border: 1px solid var(--tuiter-border-muted);
276 border-radius: 2px;
277 flex-shrink: 0;
278 display: flex;
279 align-items: center;
280 justify-content: center;
281 font-size: 10px;
282 color: var(--tuiter-muted);
283}
284
285.post-author {
286 font-weight: bold;
287 color: var(--tuiter-link);
288 text-decoration: none;
289 font-size: 11px;
290}
291
292.post-author:hover {
293 text-decoration: underline;
294}
295
296.post-text {
297 margin-top: 2px;
298 font-size: 11px;
299 line-height: 1.3;
300 color: var(--tuiter-text);
301}
302
303.post-meta {
304 font-size: 10px;
305 color: var(--tuiter-muted);
306 margin-top: 3px;
307}
308
309.post-meta a {
310 color: var(--tuiter-link);
311 text-decoration: none;
312}
313
314.post-meta a:hover {
315 text-decoration: underline;
316}
317
318/* Sidebar styles */
319.sidebar h3 {
320 font-size: 12px;
321 font-weight: bold;
322 color: var(--tuiter-text);
323 margin-bottom: 10px;
324 border-bottom: 1px solid rgba(var(--tuiter-media-black-rgb),0.08);
325 padding-bottom: 3px;
326}
327
328/* About section */
329.about-section {
330 margin-bottom: 20px;
331}
332
333.about-section .profile-pic {
334 width: 48px;
335 height: 48px;
336 float: left;
337 margin-right: 10px;
338 margin-bottom: 10px;
339}
340
341.about-section .profile-pic img {
342 width: 48px;
343 height: 48px;
344 border: 1px solid var(--tuiter-border-muted);
345 border-radius: 2px;
346}
347
348.about-section .profile-pic a {
349 display: flex;
350 align-items: center;
351 justify-content: center;
352 width: 48px;
353 height: 48px;
354 background: var(--tuiter-avatar-bg);
355 border: 1px solid var(--tuiter-border-muted);
356 border-radius: 2px;
357 font-size: 20px;
358 color: var(--tuiter-muted);
359 text-decoration: none;
360}
361
362.about-section .profile-info {
363 overflow: hidden;
364 font-size: 11px;
365 line-height: 1.3;
366}
367
368.about-section .profile-info strong a {
369 color: var(--tuiter-link);
370 text-decoration: none;
371}
372
373.about-section .profile-info strong a:hover {
374 text-decoration: underline;
375}
376
377.stats {
378 clear: both;
379 margin-top: 10px;
380 font-size: 11px;
381}
382
383.stat-line {
384 margin-bottom: 2px;
385}
386
387.stat-label {
388 color: var(--tuiter-muted);
389}
390
391.stat-value {
392 font-weight: bold;
393 color: var(--tuiter-text);
394}
395
396/* Following section */
397.following-section {
398 margin-bottom: 20px;
399}
400
401.following-grid {
402 display: grid;
403 grid-template-columns: repeat(5, 1fr);
404 gap: 3px;
405 margin-top: 8px;
406}
407
408.following-avatar {
409 width: 36px;
410 height: 36px;
411}
412
413.following-avatar img {
414 width: 36px;
415 height: 36px;
416 border: 1px solid var(--tuiter-border-muted);
417 border-radius: 2px;
418}
419
420.following-avatar a {
421 display: flex;
422 align-items: center;
423 justify-content: center;
424 width: 36px;
425 height: 36px;
426 background: var(--tuiter-avatar-bg);
427 border: 1px solid var(--tuiter-border-muted);
428 border-radius: 2px;
429 font-size: 12px;
430 color: var(--tuiter-muted);
431 text-decoration: none;
432}
433
434/* Actions */
435.actions {
436 margin-top: 15px;
437}
438
439.update-button {
440 display: block;
441 background: var(--tuiter-input-bg);
442 border: 1px solid var(--tuiter-border-muted);
443 padding: 6px 12px;
444 font-size: 11px;
445 color: var(--tuiter-text);
446 text-decoration: none;
447 text-align: center;
448 border-radius: 3px;
449 margin-bottom: 8px;
450}
451
452.update-button:hover {
453 background: rgba(var(--tuiter-media-black-rgb),0.03);
454}
455
456.logout-btn {
457 display: block;
458 font-size: 10px;
459 color: var(--tuiter-muted);
460 text-decoration: none;
461 text-align: center;
462}
463
464.logout-btn:hover {
465 text-decoration: underline;
466}
467
468/* Sign in form */
469.signin-form {
470 margin-bottom: 20px;
471}
472
473.form-group {
474 margin-bottom: 8px;
475}
476
477.form-group label {
478 display: block;
479 font-size: 11px;
480 color: var(--tuiter-text);
481 margin-bottom: 2px;
482}
483
484.form-group input[type="text"],
485.form-group input[type="password"] {
486 width: 100%;
487 padding: 3px 4px;
488 border: 1px solid var(--tuiter-border-muted);
489 font-size: 11px;
490 background: var(--tuiter-white);
491}
492
493.form-group input[type="text"]:focus,
494.form-group input[type="password"]:focus {
495 outline: none;
496 border-color: var(--tuiter-link);
497}
498
499.checkbox-group {
500 margin: 8px 0;
501 font-size: 10px;
502}
503
504.checkbox-group input[type="checkbox"] {
505 margin-right: 4px;
506}
507
508.checkbox-group a {
509 color: var(--tuiter-link);
510 text-decoration: none;
511}
512
513.checkbox-group a:hover {
514 text-decoration: underline;
515}
516
517.signin-btn {
518 background: var(--tuiter-input-bg);
519 border: 1px solid var(--tuiter-border-muted);
520 padding: 4px 8px;
521 font-size: 11px;
522 cursor: pointer;
523 margin-bottom: 10px;
524}
525
526.signin-btn:hover {
527 background: rgba(var(--tuiter-media-black-rgb),0.03);
528}
529
530/* Join section */
531.join-section {
532 text-align: center;
533 margin-bottom: 20px;
534}
535
536.join-link {
537 display: block;
538 background: var(--tuiter-join-bg);
539 color: var(--tuiter-dark-teal);
540 padding: 6px 8px;
541 text-decoration: none;
542 font-weight: bold;
543 font-size: 11px;
544 border-radius: 3px;
545 margin-bottom: 5px;
546}
547
548.join-link:hover {
549 background: var(--tuiter-join-hover);
550}
551
552.join-subtext {
553 font-size: 10px;
554 color: var(--tuiter-muted);
555 line-height: 1.2;
556}
557
558.join-subtext a {
559 color: var(--tuiter-link);
560 text-decoration: none;
561}
562
563.join-subtext a:hover {
564 text-decoration: underline;
565}
566
567/* Footer */
568.footer {
569 text-align: center;
570 padding: 20px 0;
571 font-size: 10px;
572 color: var(--tuiter-muted);
573}
574
575/* Post form */
576.post-form {
577 margin-bottom: 20px;
578}
579
580.post-form textarea {
581 width: 100%;
582 height: 60px;
583 padding: 5px;
584 border: 1px solid var(--tuiter-border-muted);
585 font-family: inherit;
586 font-size: 11px;
587 resize: vertical;
588}
589
590.post-form button {
591 background: var(--tuiter-join-bg);
592 border: 1px solid var(--tuiter-link);
593 padding: 4px 12px;
594 font-size: 11px;
595 cursor: pointer;
596 margin-top: 5px;
597}
598
599.post-form button:hover {
600 background: var(--tuiter-join-hover);
601}
602
603/* Timeline Post Box - 2006 Twitter Style */
604.post-box {
605 background: rgba(var(--tuiter-white-rgb),0.90);
606 border: 1px solid var(--tuiter-border);
607 margin-bottom: 15px;
608 padding: 10px;
609 border-radius: 5px;
610}
611
612.post-box-header {
613 display: flex;
614 justify-content: space-between;
615 align-items: center;
616 margin-bottom: 6px;
617}
618
619.post-box-header h3 {
620 color: var(--tuiter-text);
621 font-size: 14px;
622 font-weight: bold;
623 margin: 0;
624}
625
626.char-count {
627 font-size: 11px;
628 color: var(--tuiter-muted);
629}
630
631.post-box textarea {
632 width: 100%;
633 min-height: 60px;
634 padding: 6px;
635 font-size: 13px;
636 border: 1px solid var(--tuiter-border-muted);
637 border-radius: 4px;
638 resize: vertical;
639 background: var(--tuiter-white);
640}
641
642.post-box textarea:focus {
643 border-color: var(--tuiter-accent);
644 outline: none;
645}
646
647.post-box-actions {
648 margin-top: 6px;
649 text-align: right;
650}
651
652.update-btn {
653 background: var(--tuiter-input-bg);
654 border: 1px solid var(--tuiter-border-muted);
655 padding: 6px 10px;
656 font-size: 12px;
657 cursor: pointer;
658}
659
660/* Generic error text */
661.error-text {
662 color: var(--tuiter-error);
663}
664.no-posts {
665 padding: 12px 0;
666 color: var(--tuiter-muted);
667}
668
669/* Profile header */
670.profile-header {
671 display: flex;
672 gap: 16px;
673 align-items: flex-start;
674 margin-bottom: 16px;
675}
676.profile-avatar {
677 flex: 0 0 96px;
678}
679.profile-avatar img {
680 width: 96px;
681 height: 96px;
682 border: 1px solid var(--tuiter-border-muted);
683 border-radius: 2px;
684 display: block;
685}
686.profile-avatar-placeholder {
687 width: 96px;
688 height: 96px;
689 background: var(--tuiter-avatar-bg);
690 display: flex;
691 align-items: center;
692 justify-content: center;
693 border: 1px solid var(--tuiter-border-muted);
694 border-radius: 2px;
695 font-size: 36px;
696}
697.profile-main {
698 flex: 1;
699}
700.profile-main h1 {
701 font-size: 28px;
702 margin-bottom: 6px;
703}
704.handle {
705 font-size: 14px;
706 color: var(--tuiter-muted);
707 margin-bottom: 8px;
708}
709.handle {
710 font-size: 2em;
711 font-weight: bold;
712 color: var(--tuiter-text);
713 background: rgba(var(--tuiter-white-rgb),0.85);
714 padding: 0.2em 0.5em;
715 border-radius: 8px;
716 box-shadow: 0 1px 4px rgba(var(--tuiter-media-black-rgb),0.12);
717 display: inline-block;
718}
719
720.bio pre {
721 font-family: inherit;
722 font-size: 13px;
723 line-height: 1.4;
724 white-space: pre-wrap;
725 margin: 0 0 10px 0;
726}
727.stats .stat {
728 margin-right: 12px;
729 font-size: 13px;
730 color: var(--tuiter-text);
731}
732
733/* Replies */
734.reply-post, .reply-avatar, .reply-content {
735 display: flex;
736 gap: 8px;
737}
738.reply-post {
739 padding: 8px 0;
740 border-top: 1px solid rgba(var(--tuiter-media-black-rgb),0.04);
741}
742.reply-avatar img {
743 width: 24px;
744 height: 24px;
745}
746.reply-author {
747 font-weight: bold;
748 color: var(--tuiter-link);
749 text-decoration: none;
750}
751.reply-text {
752 margin-left: 6px;
753}
754
755/* View toggle */
756.view-toggle {
757 margin: 8px 0;
758}
759.toggle-btn {
760 background: var(--tuiter-surface-subtle);
761 border: 1px solid var(--tuiter-border);
762 padding: 4px 8px;
763 margin-left: 6px;
764 cursor: pointer;
765 border-radius: 4px;
766 font-size: 12px;
767}
768.toggle-btn.active {
769 background: var(--tuiter-toggle-active);
770 border-color: var(--tuiter-highlight);
771}
772
773/* Flat-view makes replies render as a flat chronological list */
774.child-replies.flat-view .reply-post {
775 margin-left: 0;
776 border-left: none;
777 background: transparent;
778}
779
780/* reduce indentation for nested default */
781.child-replies .reply-post {
782 margin-left: 12px;
783}
784
785/* control flat/nested visibility */
786.child-replies .flat-list { display: none; }
787.child-replies.flat-view .threaded-replies { display: none; }
788.child-replies.flat-view .flat-list { display: block; }
789/* ensure flat-list items look like normal replies */
790.flat-list .reply-post { border-top: 1px solid var(--tuiter-divider); padding: 8px 0; display: flex; gap: 8px; }
791
792/* Small helper classes */
793.note {
794 font-size: 9px;
795 color: var(--tuiter-muted);
796 margin-top: 8px;
797}
798
799/* Footer spacing */
800footer {
801 margin-top: 12px;
802}
803
804/* Conversation chain (parent/ancestor posts) - IRC/Google Wave style */
805.conversation-chain {
806 display: flex;
807 flex-direction: column;
808 gap: 6px;
809 margin: 10px 0 14px 0;
810 position: relative;
811 padding-left: 44px; /* space for avatar + connector */
812}
813
814/* vertical connector line running alongside the chain */
815.conversation-chain::before {
816 content: "";
817 position: absolute;
818 left: 28px;
819 top: 8px;
820 bottom: 8px;
821 width: 2px;
822 background: var(--tuiter-border-subtle);
823 border-radius: 2px;
824}
825
826.chain-item {
827 display: flex;
828 gap: 8px;
829 align-items: flex-start;
830 padding: 6px 8px;
831 border-radius: 6px;
832 box-shadow: 0 1px 0 rgba(var(--tuiter-media-black-rgb),0.02) inset;
833}
834
835/* alternating subtle backgrounds to mimic chat bubbles */
836.conversation-chain .chain-item:nth-child(odd) {
837 background: var(--tuiter-surface-warm); /* warm */
838}
839.conversation-chain .chain-item:nth-child(even) {
840 background: var(--tuiter-surface-cool); /* cool */
841}
842
843.chain-avatar {
844 position: absolute;
845 left: 0;
846 width: 40px;
847 display: flex;
848 align-items: center;
849 justify-content: center;
850}
851.chain-avatar img {
852 width: 32px;
853 height: 32px;
854 border-radius: 50%;
855 object-fit: cover;
856 border: 1px solid rgba(var(--tuiter-media-black-rgb),0.06);
857}
858
859.chain-content {
860 margin-left: 4px;
861}
862.chain-author {
863 font-weight: 700;
864 color: var(--tuiter-handle-blue);
865 text-decoration: none;
866 font-size: 12px;
867}
868.chain-author:hover { text-decoration: underline; }
869.chain-text {
870 margin-top: 3px;
871 font-size: 12px;
872 line-height: 1.3;
873 color: var(--tuiter-text);
874}
875.chain-meta {
876 margin-top: 4px;
877 font-size: 11px;
878 color: var(--tuiter-muted);
879}
880
881/* compact chain layout on small viewports */
882@media (max-width: 800px) {
883 .conversation-chain {
884 padding-left: 44px;
885 }
886 .conversation-chain::before { left: 28px; }
887 .chain-avatar { left: 0; }
888}
889
890/* Highlight the viewed post */
891.highlighted-post {
892 border: 2px solid var(--tuiter-highlight);
893 background: linear-gradient(180deg, rgba(var(--tuiter-white-rgb),1) 0%, rgba(var(--tuiter-white-rgb),1) 100%);
894 padding: 8px;
895 border-radius: 8px;
896}
897
898.child-replies {
899 margin-top: 10px;
900}
901
902/* Remove connector line when conversation chain is rendered inside replies (avoids dark vertical line at left of Replies header) */
903.child-replies .conversation-chain::before {
904 display: none;
905}
906
907.child-replies h4 {
908 font-size: 13px;
909 margin-bottom: 6px;
910}
911
912.reply-post {
913 padding: 8px 0;
914 border-top: 1px solid var(--tuiter-divider);
915 display: flex;
916 gap: 8px;
917}
918
919.reply-avatar img { width: 28px; height: 28px; border-radius: 50%; }
920
921.reply-content { flex: 1; }
922
923/* Forum-style nested threaded replies (2000s forum feel + 2006 Twitter identity) */
924.threaded-replies {
925 margin-left: 6px;
926 padding-left: 0;
927 list-style: none;
928 font-size: 13px; /* slightly larger for readability like forum posts */
929}
930
931.thread-node {
932 display: flex;
933 gap: 10px;
934 align-items: flex-start;
935 margin: 8px 0; /* space between boxed replies like forum posts */
936 position: relative;
937}
938
939/* avatar: forum-like small square with border */
940.thread-avatar img {
941 width: 36px;
942 height: 36px;
943 border-radius: 3px;
944 object-fit: cover;
945 border: 1px solid var(--tuiter-border-muted);
946 background: var(--tuiter-surface-subtle);
947}
948.thread-avatar a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; }
949
950/* main content box for each reply - distinct boxed look from old forums */
951.thread-content {
952 flex: 1;
953 background: linear-gradient(180deg, var(--tuiter-white), var(--tuiter-surface-subtle));
954 border: 1px solid var(--tuiter-thread-border);
955 border-radius: 6px;
956 padding: 8px 10px;
957 box-shadow: 0 1px 0 rgba(var(--tuiter-media-black-rgb),0.03);
958}
959
960/* author and meta remain compact and recognizably 2006 */
961.thread-content .reply-author {
962 font-weight: 700;
963 color: var(--tuiter-handle-blue);
964 font-size: 12px;
965 text-decoration: none;
966}
967.thread-content .reply-author:hover { text-decoration: underline; }
968
969.thread-node .reply-text {
970 margin-top: 6px;
971 font-size: 13px;
972 line-height: 1.35;
973 color: var(--tuiter-text);
974}
975.thread-node .reply-meta {
976 margin-top: 6px;
977 font-size: 11px;
978 color: var(--tuiter-muted);
979}
980
981/* children are indented to the right and connected by a vertical rule (forum-style thread connector) */
982.thread-children {
983 margin-top: 10px;
984 margin-left: 52px; /* indent children under parent (space for avatar + gutter) */
985 position: relative;
986}
987.thread-children::before {
988 content: "";
989 position: absolute;
990 left: -42px; /* place connector between avatar and parent box */
991 top: 6px;
992 bottom: 6px;
993 width: 2px;
994 background: linear-gradient(180deg, rgba(var(--tuiter-media-black-rgb),0.06), rgba(var(--tuiter-media-black-rgb),0.00));
995 border-radius: 2px;
996}
997
998/* subtle alternating backgrounds for depth (gives forum nesting feel) */
999.threaded-replies > .thread-node .thread-content { background: linear-gradient(180deg,var(--tuiter-white),var(--tuiter-surface-subtle)); }
1000.threaded-replies > .thread-node > .thread-children > .thread-node .thread-content { background: linear-gradient(180deg,var(--tuiter-surface-warm),var(--tuiter-white)); }
1001.threaded-replies > .thread-node > .thread-children > .thread-node > .thread-children > .thread-node .thread-content { background: linear-gradient(180deg,var(--tuiter-surface-cool),var(--tuiter-white)); }
1002
1003/* connector dot on parent to indicate connection point (keeps previous subtle dot concept) */
1004.thread-node::before {
1005 content: "";
1006 width: 8px;
1007 height: 8px;
1008 border-radius: 2px;
1009 background: var(--tuiter-border-subtle);
1010 position: absolute;
1011 left: 28px; /* align near avatar */
1012 top: 18px;
1013 box-shadow: 0 1px 0 rgba(var(--tuiter-media-black-rgb),0.02) inset;
1014}
1015
1016/* keep viewed/highlighted post styling but match new padding */
1017.thread-content.highlighted-post {
1018 border: 2px solid var(--tuiter-highlight);
1019 background: linear-gradient(180deg, rgba(var(--tuiter-white-rgb),1) 0%, rgba(var(--tuiter-white-rgb),1) 100%);
1020 padding: 10px;
1021 border-radius: 6px;
1022}
1023
1024/* responsive tweaks - reduce avatar and indentation on small screens */
1025@media (max-width: 800px) {
1026 .thread-avatar img { width: 28px; height: 28px; }
1027 .thread-children { margin-left: 40px; }
1028 .thread-node::before { left: 22px; top: 14px; }
1029}
1030
1031/* ensure legacy flat-view rules still hide threaded markup when requested */
1032.child-replies.flat-view .threaded-replies { display: none; }
1033/* Media styles for posts (images, video thumbnails, external link cards) */
1034.post-media { margin-top: 8px; display: block; }
1035.media-images { display: flex; gap: 8px; flex-wrap: wrap; }
1036.post-image { max-width: 220px; max-height: 160px; border: 1px solid var(--tuiter-border-subtle); border-radius: 6px; object-fit: cover; }
1037.media-video { margin-top: 6px; }
1038.post-video-thumb { max-width: 320px; max-height: 200px; border: 1px solid var(--tuiter-border-subtle); border-radius: 6px; object-fit: cover; }
1039.media-external { margin-top: 6px; }
1040.external-link-card { display: flex; gap: 8px; align-items: center; text-decoration: none; border: 1px solid var(--tuiter-border-subtle); padding: 6px; border-radius: 6px; background: var(--tuiter-white); }
1041.external-thumb { width: 80px; height: 60px; object-fit: cover; border-radius: 4px; }
1042.external-meta { color: var(--tuiter-text); font-size: 12px; }
1043.external-desc { color: var(--tuiter-muted); font-size: 11px; margin-top: 4px; }
1044
1045/* Lightbox for viewing full-size images */
1046#lightbox-overlay {
1047 position: fixed;
1048 inset: 0;
1049 background: rgba(var(--tuiter-media-black-rgb),0.85);
1050 display: none;
1051 align-items: center;
1052 justify-content: center;
1053 z-index: 9999;
1054}
1055#lightbox-overlay img {
1056 max-width: 90%;
1057 max-height: 90%;
1058 border-radius: 6px;
1059 box-shadow: 0 8px 30px rgba(var(--tuiter-media-black-rgb),0.6);
1060}
1061#lightbox-overlay .close-hint {
1062 position: absolute;
1063 top: 18px;
1064 right: 24px;
1065 color: var(--tuiter-white);
1066 font-size: 13px;
1067 opacity: 0.9;
1068}
1069#lightbox-overlay.visible { display: flex; }
1070
1071/* Chat-style reply-thread bubbles (2000s-inspired) */
1072.chat { display: flex; flex-direction: column; gap: 8px; }
1073.chat-node { display: flex; width: 100%; }
1074/* allow wrapping so media can be placed on its own line under the bubble */
1075.chat-node, .reply-thread.chat .chat-node { flex-wrap: wrap; }
1076.chat-node.left { justify-content: flex-start; }
1077.chat-node.right { justify-content: flex-end; }
1078.chat-bubble {
1079 max-width: 70%;
1080 padding: 8px 10px;
1081 border-radius: 14px;
1082 background: linear-gradient(180deg,var(--tuiter-card),var(--tuiter-surface-cool));
1083 border: 1px solid var(--tuiter-border-subtle);
1084 box-shadow: 0 2px 0 rgba(var(--tuiter-media-black-rgb),0.06);
1085 font-size: 12px;
1086 color: var(--tuiter-text);
1087 position: relative;
1088}
1089/* Pale blue right bubble to match 2006 Twitter aesthetic */
1090.chat-node.right .chat-bubble {
1091 background: linear-gradient(180deg,var(--tuiter-cyan-pale),var(--tuiter-cyan-pale-2));
1092 color: var(--tuiter-dark-teal);
1093 border-color: var(--tuiter-cyan-pale);
1094}
1095
1096.chat-author { font-weight: 700; color: var(--tuiter-handle-blue); font-size: 12px; margin-bottom: 4px; }
1097/* keep author link color consistent */
1098.chat-node.right .chat-author { color: var(--tuiter-handle-blue); }
1099.chat-text { white-space: pre-wrap; line-height: 1.35; }
1100
1101/* small triangular tail effect (CSS pseudo-element) */
1102.chat-node.left .chat-bubble::after {
1103 content: "";
1104 position: absolute;
1105 left: -8px;
1106 top: 10px;
1107 width: 12px;
1108 height: 12px;
1109 background: linear-gradient(180deg,var(--tuiter-card),var(--tuiter-surface-cool));
1110 border-right: 1px solid var(--tuiter-border-subtle);
1111 transform: rotate(45deg);
1112 border-bottom: 1px solid rgba(var(--tuiter-media-black-rgb),0.03);
1113}
1114.chat-node.right .chat-bubble::after {
1115 content: "";
1116 position: absolute;
1117 right: -8px;
1118 top: 10px;
1119 width: 12px;
1120 height: 12px;
1121 background: linear-gradient(180deg,var(--tuiter-cyan-pale),var(--tuiter-cyan-pale-2));
1122 border-left: 1px solid var(--tuiter-cyan-pale);
1123 transform: rotate(45deg);
1124 border-top: 1px solid rgba(var(--tuiter-white-rgb),0.6);
1125}
1126
1127.chat-author { font-weight: 700; color: var(--tuiter-handle-blue); font-size: 12px; margin-bottom: 4px; }
1128/* keep author link color consistent */
1129.chat-node.right .chat-author { color: var(--tuiter-handle-blue); }
1130.chat-text { white-space: pre-wrap; line-height: 1.35; }
1131
1132/* current post highlight tweaks */
1133.current-post .chat-bubble { box-shadow: 0 3px 0 rgba(var(--tuiter-media-black-rgb),0.08); border-color: var(--tuiter-highlight); }
1134
1135/* ensure bubbles are responsive */
1136@media (max-width: 800px) {
1137 .chat-bubble { max-width: 90%; }
1138}
1139
1140/* Avatar next to chat bubbles (tight chat spacing like classic chat UIs) */
1141.chat-node.compact { align-items: center; gap: 6px; }
1142.chat-avatar { width: 36px; display:flex; align-items:center; justify-content:center; margin: 0; }
1143.chat-avatar img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(var(--tuiter-media-black-rgb),0.06); }
1144.avatar-placeholder { width: 28px; height: 28px; background: var(--tuiter-avatar-bg); border-radius:50%; border:1px solid var(--tuiter-border-muted); }
1145/* tighten spacing between avatar and bubble */
1146.chat-node.left .chat-avatar { margin-right: 6px; }
1147.chat-node.right .chat-avatar { margin-left: 6px; }
1148.chat-node.left .chat-bubble { margin-left: 4px; }
1149.chat-node.right .chat-bubble { margin-right: 4px; }
1150/* adjust tail vertical position for tighter layout */
1151.chat-node.left .chat-bubble::after, .chat-node.right .chat-bubble::after { top: 12px; width: 10px; height: 10px; }
1152/* ensure compact bubbles remain visually balanced */
1153.chat-bubble.small { padding: 6px 8px; }
1154
1155/* Flattened chat style tweaks */
1156.chat.flattened .chat-node.compact { gap: 6px; align-items: flex-start; }
1157.chat-bubble.small { padding: 6px 8px; border-radius: 8px; font-size: 12px; max-width: 60%; }
1158.chat-bubble.small .chat-author { font-size: 12px; margin-bottom: 3px; }
1159.chat-bubble.small .chat-text { font-size: 12px; line-height: 1.3; }
1160.chat-meta { margin-top: 6px; font-size: 11px; color: var(--tuiter-muted); }
1161.chat-meta a { color: var(--tuiter-link); text-decoration: none; }
1162.chat-meta a:hover { text-decoration: underline; }
1163
1164/* make bubbles occupy less vertical space and appear flatter */
1165.chat-bubble.small { box-shadow: none; border: 1px solid rgba(var(--tuiter-media-black-rgb),0.06); }
1166.chat-node.left .chat-bubble.small::after, .chat-node.right .chat-bubble.small::after { width: 10px; height: 10px; top: 12px; }
1167
1168/* slightly tighter avatar size for compact view */
1169.chat-avatar img { width: 28px; height: 28px; }
1170.avatar-placeholder { width: 28px; height: 28px; }
1171
1172/* ensure compact nodes don't take too much horizontal space */
1173.chat-node.compact .chat-bubble.small { max-width: 55%; }
1174@media (max-width: 800px) {
1175 .chat-node.compact .chat-bubble.small { max-width: 78%; }
1176}
1177
1178/* Right-side bubble text alignment for author and timestamp only */
1179.chat-node.right .chat-bubble { text-align: left; }
1180.chat-node.right .chat-author { display: block; text-align: right; }
1181.chat-node.right .chat-meta { text-align: right; }
1182
1183/* IRC-like conversation container for reply threads (2006 aesthetic) */
1184.reply-thread.chat.flattened {
1185 background: linear-gradient(160deg,var(--tuiter-white),var(--tuiter-cyan-pale));
1186 border: 1px solid var(--tuiter-cyan-pale); /* soft cyan border */
1187 border-radius: 6px; /* small, square-rounded corners */
1188 padding: 10px; /* snug padding */
1189 box-shadow: inset 0 1px 0 rgba(var(--tuiter-white-rgb),0.6), 0 1px 0 rgba(var(--tuiter-media-black-rgb),0.03);
1190 margin: 8px 0;
1191 width: 100%;
1192}
1193.reply-thread.chat.flattened .chat-node { margin-bottom: 6px; }
1194.reply-thread.chat.flattened .chat-bubble { background: transparent; border: none; box-shadow: none; }
1195.reply-thread.chat.flattened .chat-bubble.small { background: linear-gradient(180deg,var(--tuiter-white),var(--tuiter-surface-cool)); border: 1px solid rgba(var(--tuiter-media-black-rgb),0.06); }
1196/* reduce overall spacing to feel IRC-like */
1197.reply-thread.chat.flattened .chat-avatar { margin-right: 8px; }
1198.reply-thread.chat.flattened .chat-node.right .chat-avatar { margin-left: 8px; margin-right: 0; }
1199
1200/* Tight avatar->bubble attachment: remove spacing so bubble appears to come out of the avatar */
1201.chat-node.compact { gap: 0 !important; align-items: center; }
1202.chat-avatar { margin: 0 !important; position: relative; z-index: 3; }
1203.chat-avatar img { position: relative; z-index: 4; }
1204
1205/* remove any horizontal margins so bubble and avatar touch */
1206.chat-node.left .chat-avatar { margin-right: 0 !important; }
1207.chat-node.right .chat-avatar { margin-left: 0 !important; }
1208
1209/* overlap the bubble slightly under the avatar so it looks like it emerges from it */
1210.chat-node.left .chat-bubble { margin-left: -8px !important; z-index: 1; }
1211.chat-node.right .chat-bubble { margin-right: -8px !important; z-index: 1; }
1212
1213/* flattened thread variants */
1214.reply-thread.chat.flattened .chat-avatar { margin-right: 0 !important; }
1215.reply-thread.chat.flattened .chat-node.right .chat-avatar { margin-left: 0 !important; }
1216
1217/* bring the avatar visually in front and nudge the triangular tail to meet the avatar edge */
1218.chat-node.left .chat-bubble::after { left: -4px !important; top: 12px !important; width: 10px !important; height: 10px !important; }
1219.chat-node.right .chat-bubble::after { right: -4px !important; top: 12px !important; width: 10px !important; height: 10px !important; }
1220
1221/* ensure small/compact bubbles also follow the same tight layout */
1222.chat-bubble.small { z-index: 1; }
1223.chat-node.compact .chat-bubble.small { margin-left: -6px !important; margin-right: -6px !important; }
1224
1225/* make sure the avatar border visually connects with the bubble by slightly reducing avatar border contrast */
1226.chat-avatar img { border: 1px solid rgba(var(--tuiter-media-black-rgb),0.04); }
1227
1228/* Chat-media: ensure media appears below the bubble and aligns to the same side (left/right) */
1229.chat-media {
1230 display: block;
1231 /* force the media element to occupy the full row inside the .chat-node flex container */
1232 flex-basis: 100%;
1233 order: 99; /* place after avatar + bubble */
1234 margin-top: 6px;
1235 width: 100%;
1236 clear: both; /* ensure it sits below any floated/inline elements */
1237}
1238
1239/* Ensure the shared post-media behaves as a block-level card, but can be centered/right-aligned by its container */
1240.post-media { display: inline-block; }
1241
1242/* Offset the media so it lines up under the bubble, leaving space for the avatar */
1243.chat-node.left .chat-media {
1244 text-align: left;
1245 padding-left: 44px; /* space for avatar + small gutter */
1246 padding-right: 0;
1247}
1248
1249.chat-node.right .chat-media {
1250 text-align: right;
1251 padding-right: 44px; /* space for avatar + small gutter */
1252 padding-left: 0;
1253}
1254
1255/* Keep individual media items inline-block so they respect text-align on the container */
1256.chat-media .post-media .media-images,
1257.chat-media .post-media .media-video,
1258.chat-media .post-media .media-external {
1259 display: inline-block;
1260 vertical-align: top;
1261}
1262
1263/* Responsive tweak: reduce offset on small screens */
1264@media (max-width: 800px) {
1265 .chat-node.left .chat-media,
1266 .chat-node.right .chat-media {
1267 padding-left: 24px;
1268 padding-right: 24px;
1269 }
1270 .chat-media .post-media { max-width: 100%; }
1271}
1272
1273/* Added rules to replace inline styles moved from templates */
1274.post-avatar-img {
1275 width: 48px;
1276 height: 48px;
1277 border-radius: 50%;
1278 object-fit: cover;
1279}
1280
1281.post-author-img {
1282 width: 48px;
1283 height: 48px;
1284 border-radius: 2px;
1285 object-fit: cover;
1286}
1287
1288.post-content-inline {
1289 display: inline-block;
1290 vertical-align: top;
1291 width: calc(100% - 56px);
1292}
1293
1294.post-box-textarea {
1295 resize: none;
1296 background: var(--tuiter-input-bg);
1297 border-radius: 6px;
1298 border: 1px solid var(--tuiter-border-muted);
1299 color: var(--tuiter-text);
1300 width: 100%;
1301 min-height: 60px;
1302 padding: 6px;
1303}
1304
1305.update-btn-large {
1306 background: var(--tuiter-brand);
1307 color: var(--tuiter-white);
1308 border: none;
1309 border-radius: 6px;
1310 font-weight: bold;
1311 padding: 8px 22px;
1312 font-size: 1.1em;
1313 box-shadow: 0 2px 6px rgba(var(--tuiter-media-black-rgb),0.08);
1314 cursor: pointer;
1315 transition: background 0.2s;
1316}
1317
1318.chain-avatar-img {
1319 width: 32px;
1320 height: 32px;
1321 border-radius: 50%;
1322 object-fit: cover;
1323}
1324
1325.profile-avatar-img {
1326 width: 96px;
1327 height: 96px;
1328 border: 1px solid var(--tuiter-border-muted);
1329 border-radius: 2px;
1330 display: block;
1331}
1332
1333.video-embedded {
1334 max-width: 100%;
1335 height: auto;
1336 background: var(--tuiter-media-black);
1337}
1338
1339#lightbox-video {
1340 max-width: 100%;
1341 max-height: 80vh;
1342 display: none;
1343}
1344
1345#lightbox-img { max-width: 100%; max-height: 80vh; display: block; }
1346
1347/* make lightbox overlay hidden by default and visible when .visible is present */
1348#lightbox-overlay { display: none; position: fixed; inset: 0; background: rgba(var(--tuiter-media-black-rgb),0.8); align-items: center; justify-content: center; z-index: 9999; }
1349#lightbox-overlay.visible { display: flex; }
1350/* Enhanced styling for standard (non-reply) posts inserted to match 2006 retro layout with better spacing */
1351.post-avatar {
1352 flex: 0 0 56px; /* reserve space for avatar */
1353 display: flex;
1354 align-items: flex-start;
1355 justify-content: center;
1356 margin-top: 2px;
1357}
1358
1359.post-avatar a { display:inline-block; }
1360.post-avatar img { width:48px; height:48px; border-radius:4px; border:1px solid var(--tuiter-border-muted); object-fit:cover; }
1361
1362.post-content.post-card {
1363 background: linear-gradient(180deg, rgba(var(--tuiter-white-rgb),0.98), var(--tuiter-surface-subtle));
1364 border: 1px solid rgba(var(--tuiter-media-black-rgb),0.04);
1365 border-radius: 6px;
1366 padding: 8px 10px;
1367 width: 100%;
1368}
1369
1370.post-row {
1371 display: flex;
1372 flex-direction: column;
1373 gap: 6px;
1374}
1375
1376.post-head {
1377 display: flex;
1378 gap: 8px;
1379 align-items: center;
1380}
1381
1382.post-head .post-author {
1383 font-weight: 700;
1384 color: var(--tuiter-handle-blue);
1385 font-size: 13px;
1386 text-decoration: none;
1387}
1388
1389.post-handle {
1390 font-size: 12px;
1391 color: var(--tuiter-muted);
1392 margin-left: 6px;
1393}
1394
1395.post-meta-inline {
1396 margin-left: auto;
1397 font-size: 11px;
1398 color: var(--tuiter-muted);
1399 white-space: nowrap;
1400}
1401
1402.post-body {
1403 margin-top: 4px;
1404 display: block;
1405}
1406
1407.post-text {
1408 font-size: 12px;
1409 line-height: 1.35;
1410 color: var(--tuiter-text);
1411}
1412
1413.post-actions {
1414 margin-top: 8px;
1415 font-size: 11px;
1416}
1417
1418/* Make post-media sit comfortably under the text and align with content area */
1419.post-content .post-media { margin-top: 8px; }
1420
1421/* Slightly increase spacing between posts for readability */
1422.post { padding: 14px 0; }
1423
1424/* Retro subtle hover highlight for posts (non-reply) */
1425.post:hover .post-content.post-card { box-shadow: 0 4px 14px rgba(var(--tuiter-media-black-rgb),0.06); transform: translateY(-1px); }
1426
1427/* Small screens: reduce avatar and padding to keep content readable */
1428@media (max-width: 640px) {
1429 .post-avatar { flex: 0 0 44px; }
1430 .post-avatar img { width:40px; height:40px; }
1431 .post-content.post-card { padding: 8px; }
1432 .post-meta-inline { font-size: 10px; }
1433}
1434
1435/* Reply floating button (circular) shown at bottom-right of post content cards and chat bubbles */
1436.reply-button {
1437 position: absolute;
1438 right: 10px;
1439 bottom: 10px;
1440 display: inline-flex;
1441 align-items: center;
1442 justify-content: center;
1443 width: 28px; /* reduced from 32px */
1444 height: 28px; /* reduced from 32px */
1445 border-radius: 50%;
1446 background: rgba(var(--tuiter-white-rgb),0.72); /* more translucent */
1447 border: 1px solid rgba(var(--tuiter-media-black-rgb),0.03); /* subtler border */
1448 box-shadow: 0 1px 3px rgba(var(--tuiter-media-black-rgb),0.04); /* very light shadow */
1449 z-index: 30;
1450 padding: 0;
1451 transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s, opacity 0.12s;
1452 opacity: 0.96;
1453}
1454
1455.reply-button:hover {
1456 background: rgba(var(--tuiter-accent),0.98);
1457 color: rgba(var(--tuiter-white-rgb),0.98);
1458 box-shadow: 0 2px 6px rgba(var(--tuiter-media-black-rgb),0.06);
1459 transform: translateY(-1px);
1460 opacity: 1;
1461}
1462
1463.reply-button .reply-btn {
1464 width: 100%;
1465 height: 100%;
1466 border: none;
1467 background: transparent;
1468 font-size: 12px; /* slightly smaller icon/text */
1469 line-height: 1;
1470 cursor: pointer;
1471 color: var(--tuiter-muted);
1472 border-radius: 50%;
1473 display: inline-flex;
1474 align-items: center;
1475 justify-content: center;
1476 position: relative; /* allow nudging the arrow down */
1477 top: 2px; /* nudge arrow a bit downward */
1478}
1479.reply-button .reply-btn:hover, .reply-button.active .reply-btn {
1480 background-color: var(--tuiter-handle-blue);
1481 color: var(--tuiter-white);
1482}
1483
1484/* notification-style badge for count - monochrome and low-contrast by default */
1485.reply-button .reply-count {
1486 position: absolute;
1487 top: -2px; /* moved slightly down from -5px */
1488 right: -5px;
1489 min-width: 14px; /* reduced from 18px */
1490 height: 14px; /* reduced from 18px */
1491 padding: 0 4px;
1492 display: inline-flex;
1493 align-items: center;
1494 justify-content: center;
1495 font-size: 10px; /* slightly smaller */
1496 font-weight: 700;
1497 color: var(--tuiter-white);
1498 background: rgba(var(--tuiter-media-black-rgb),0.28); /* monochrome, translucent */
1499 border-radius: 999px;
1500 border: 1px solid rgba(var(--tuiter-white-rgb),0.85);
1501 box-shadow: none; /* remove ornamental shadow */
1502 transition: background 0.12s ease, transform 0.12s ease, opacity 0.12s;
1503 opacity: 0.92;
1504 pointer-events: none;
1505}
1506.reply-button:hover .reply-count {
1507 background: rgba(var(--tuiter-media-black-rgb),0.5); /* darker on hover to show affordance */
1508 opacity: 1;
1509}
1510
1511/* Use accent color for the reply-count badge when the button is hovered (main, chat and bubble variants) */
1512.reply-button:hover .reply-count,
1513.chat-reply-button:hover .reply-count,
1514.chat-bubble .reply-button:hover .reply-count {
1515 background: var(--tuiter-accent);
1516 color: var(--tuiter-white);
1517 border-color: rgba(var(--tuiter-white-rgb),0.9);
1518 opacity: 1;
1519}
1520
1521.chat-reply-button { width: 26px; height: 26px; right: 6px; bottom: 6px; background: rgba(var(--tuiter-white-rgb),0.74); box-shadow: 0 1px 3px rgba(var(--tuiter-media-black-rgb),0.04); }
1522.chat-reply-button .reply-btn { font-size: 11px; position: relative; top: 1px; color: var(--tuiter-muted); }
1523.chat-reply-button .reply-count { top: -3px; right: -6px; min-width: 12px; height: 12px; font-size: 9px; background: rgba(var(--tuiter-media-black-rgb),0.28); color: var(--tuiter-white); border: 1px solid rgba(var(--tuiter-white-rgb),0.85); box-shadow: none; }
1524
1525/* small screen adjustments */
1526@media (max-width: 640px) {
1527 .reply-button { width: 26px; height: 26px; right: 8px; bottom: 8px; }
1528 .reply-button .reply-count { top: -3px; right: -5px; min-width: 12px; height: 12px; font-size: 9px; }
1529}
1530
1531/* ensure reply button doesn't obstruct essential text - slightly transparent when overlapping text */
1532.post-content.post-card .reply-button { background: rgba(var(--tuiter-white-rgb),0.68); }
1533
1534/* Allow absolute-positioned reply button to anchor to chat bubbles */
1535.chat-bubble { position: relative; }
1536
1537/* Reply button when placed inside a chat bubble (smaller, tucked in) */
1538.chat-bubble .reply-button {
1539 position: absolute; /* anchor to bubble */
1540 bottom: 6px;
1541 width: 24px; /* reduced from 26/30 */
1542 height: 24px; /* reduced */
1543 min-width: 24px;
1544 border-radius: 50%;
1545 box-shadow: 0 1px 3px rgba(var(--tuiter-media-black-rgb),0.04);
1546 background: rgba(var(--tuiter-white-rgb),0.74);
1547 border: 1px solid rgba(var(--tuiter-media-black-rgb),0.03);
1548 padding: 0;
1549 z-index: 25;
1550 transition: background 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
1551}
1552.chat-bubble .reply-button:hover { background: rgba(var(--tuiter-white-rgb),0.96); box-shadow: 0 2px 5px rgba(var(--tuiter-media-black-rgb),0.05); transform: translateY(-1px); }
1553.chat-bubble .reply-button .reply-btn { font-size: 11px; position: relative; top: 3px; }
1554.chat-bubble .reply-button .reply-count { top: 1px; right: -2px; min-width: 11px; height: 11px; font-size: 9px; background: rgba(var(--tuiter-media-black-rgb),0.28); color: var(--tuiter-white); border: 1px solid rgba(var(--tuiter-white-rgb),0.85); box-shadow: none; opacity: 0.92; }
1555
1556/* left-side bubble: place button at bubble's lower-right (so arrow visually points toward avatar on left) */
1557.chat-bubble .reply-button.side-left { right: -26px; left: auto; }
1558
1559/* right-side bubble: place button at bubble's lower-left (so arrow visually points toward avatar on right) */
1560.chat-bubble .reply-button.side-right { left: -26px; right: auto; }
1561
1562/* Ensure badge stands out on top of bubble */
1563.chat-bubble .reply-button .reply-count { border: 1px solid rgba(var(--tuiter-white-rgb),0.9); }
1564
1565/* Keep previous chat-reply-button class for other placements but prefer bubble-scoped rules for bubbles */
1566.reply-button .reply-count,
1567.chat-reply-button .reply-count,
1568.chat-bubble .reply-button .reply-count {
1569 transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.12s ease, opacity 0.12s ease;
1570}
1571
1572/* Hide reply button by default and reveal on hover of the post/chat container */
1573.reply-button {
1574 /* keep existing sizing/appearance but start hidden */
1575 opacity: 0;
1576 transform: translateY(4px) scale(0.98);
1577 pointer-events: none;
1578 transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s, opacity 0.18s ease;
1579}
1580
1581/* Reveal when user hovers the relevant container (post card, post wrapper or chat bubble) */
1582.post:hover .reply-button,
1583.post-content.post-card:hover .reply-button,
1584.post-content.post-card:focus-within .reply-button,
1585.post:hover .post-content.post-card .reply-button,
1586.chat-node:hover .reply-button,
1587.chat-bubble:hover .reply-button,
1588.thread-node:hover .reply-button {
1589 opacity: 0.96; /* match previous visible state */
1590 transform: translateY(0) scale(1);
1591 pointer-events: auto;
1592}
1593
1594/* On touch devices (no hover), keep button visible so it's usable */
1595@media (hover: none) {
1596 .reply-button {
1597 opacity: 0.96;
1598 transform: none;
1599 pointer-events: auto;
1600 }
1601}
1602
1603
1604/* fav floating button (circular) shown at bottom-right of post content cards and chat bubbles */
1605.fav-button {
1606 position: absolute;
1607 right: 40px;
1608 bottom: 10px;
1609 display: inline-flex;
1610 align-items: center;
1611 justify-content: center;
1612 width: 28px; /* reduced from 32px */
1613 height: 28px; /* reduced from 32px */
1614 border-radius: 50%;
1615 background: rgba(var(--tuiter-white-rgb),0.72); /* more translucent */
1616 border: 1px solid rgba(var(--tuiter-media-black-rgb),0.03); /* subtler border */
1617 box-shadow: 0 1px 3px rgba(var(--tuiter-media-black-rgb),0.04); /* very light shadow */
1618 z-index: 30;
1619 padding: 0;
1620 transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s, opacity 0.12s;
1621 opacity: 0.96;
1622}
1623
1624.fav-button:hover {
1625 background: rgba(var(--tuiter-highlight),0.98);
1626 color: rgba(var(--tuiter-white-rgb),0.98);
1627 box-shadow: 0 2px 6px rgba(var(--tuiter-media-black-rgb),0.06);
1628 transform: translateY(-1px);
1629 opacity: 1;
1630}
1631
1632.fav-button .fav-btn {
1633 width: 100%;
1634 height: 100%;
1635 border: none;
1636 background: transparent;
1637 font-size: 12px; /* slightly smaller icon/text */
1638 line-height: 1;
1639 cursor: pointer;
1640 color: var(--tuiter-muted);
1641 border-radius: 50%;
1642 display: inline-flex;
1643 align-items: center;
1644 justify-content: center;
1645 position: relative; /* allow nudging the arrow down */
1646 top: 2px; /* nudge arrow a bit downward */
1647}
1648.fav-button .fav-btn:hover, .fav-button.active .fav-btn {
1649 background-color: var(--tuiter-highlight);
1650 color: var(--tuiter-white);
1651}
1652
1653/* notification-style badge for count - monochrome and low-contrast by default */
1654.fav-button .fav-count {
1655 position: absolute;
1656 top: -2px; /* moved slightly down from -5px */
1657 right: -5px;
1658 min-width: 14px; /* reduced from 18px */
1659 height: 14px; /* reduced from 18px */
1660 padding: 0 4px;
1661 display: inline-flex;
1662 align-items: center;
1663 justify-content: center;
1664 font-size: 10px; /* slightly smaller */
1665 font-weight: 700;
1666 color: var(--tuiter-white);
1667 background: rgba(var(--tuiter-media-black-rgb),0.28); /* monochrome, translucent */
1668 border-radius: 999px;
1669 border: 1px solid rgba(var(--tuiter-white-rgb),0.85);
1670 box-shadow: none; /* remove ornamental shadow */
1671 transition: background 0.12s ease, transform 0.12s ease, opacity 0.12s;
1672 opacity: 0.92;
1673 pointer-events: none;
1674}
1675.fav-button:hover .fav-count {
1676 background: rgba(var(--tuiter-media-black-rgb),0.5); /* darker on hover to show affordance */
1677 opacity: 1;
1678}
1679
1680/* Use accent color for the fav-count badge when the button is hovered (main, chat and bubble variants) */
1681.fav-button:hover .fav-count,
1682.chat-fav-button:hover .fav-count,
1683.chat-bubble .fav-button:hover .fav-count {
1684 background: var(--tuiter-highlight);
1685 color: var(--tuiter-white);
1686 border-color: rgba(var(--tuiter-white-rgb),0.9);
1687 opacity: 1;
1688}
1689
1690.chat-fav-button { width: 26px; height: 26px; right: 6px; bottom: 6px; background: rgba(var(--tuiter-white-rgb),0.74); box-shadow: 0 1px 3px rgba(var(--tuiter-media-black-rgb),0.04); }
1691.chat-fav-button .fav-btn { font-size: 11px; position: relative; top: 1px; color: var(--tuiter-muted); }
1692.chat-fav-button .fav-count { top: -3px; right: -6px; min-width: 12px; height: 12px; font-size: 9px; background: rgba(var(--tuiter-media-black-rgb),0.28); color: var(--tuiter-white); border: 1px solid rgba(var(--tuiter-white-rgb),0.85); box-shadow: none; }
1693
1694/* small screen adjustments */
1695@media (max-width: 640px) {
1696 .fav-button { width: 26px; height: 26px; right: 8px; bottom: 8px; }
1697 .fav-button .fav-count { top: -3px; right: -5px; min-width: 12px; height: 12px; font-size: 9px; }
1698}
1699
1700/* ensure fav button doesn't obstruct essential text - slightly transparent when overlapping text */
1701.post-content.post-card .fav-button { background: rgba(var(--tuiter-white-rgb),0.68); }
1702
1703/* Allow absolute-positioned fav button to anchor to chat bubbles */
1704.chat-bubble { position: relative; }
1705
1706/* fav button when placed inside a chat bubble (smaller, tucked in) */
1707.chat-bubble .fav-button {
1708 position: absolute; /* anchor to bubble */
1709 bottom: 6px;
1710 width: 24px; /* reduced from 26/30 */
1711 height: 24px; /* reduced */
1712 min-width: 24px;
1713 border-radius: 50%;
1714 box-shadow: 0 1px 3px rgba(var(--tuiter-media-black-rgb),0.04);
1715 background: rgba(var(--tuiter-white-rgb),0.74);
1716 border: 1px solid rgba(var(--tuiter-media-black-rgb),0.03);
1717 padding: 0;
1718 z-index: 25;
1719 transition: background 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
1720}
1721.chat-bubble .fav-button:hover { background: rgba(var(--tuiter-white-rgb),0.96); box-shadow: 0 2px 5px rgba(var(--tuiter-media-black-rgb),0.05); transform: translateY(-1px); }
1722.chat-bubble .fav-button .fav-btn { font-size: 11px; position: relative; top: 3px; }
1723.chat-bubble .fav-button .fav-count { top: 1px; right: -2px; min-width: 11px; height: 11px; font-size: 9px; background: rgba(var(--tuiter-media-black-rgb),0.28); color: var(--tuiter-white); border: 1px solid rgba(var(--tuiter-white-rgb),0.85); box-shadow: none; opacity: 0.92; }
1724
1725/* left-side bubble: place button at bubble's lower-right (so arrow visually points toward avatar on left) */
1726.chat-bubble .fav-button.side-left { right: -26px; left: auto; bottom: 32px; }
1727
1728/* right-side bubble: place button at bubble's lower-left (so arrow visually points toward avatar on right) */
1729.chat-bubble .fav-button.side-right { left: -26px; right: auto; bottom: 32px; }
1730
1731/* Ensure badge stands out on top of bubble */
1732.chat-bubble .fav-button .fav-count { border: 1px solid rgba(var(--tuiter-white-rgb),0.9); }
1733
1734/* Keep previous chat-fav-button class for other placements but prefer bubble-scoped rules for bubbles */
1735.fav-button .fav-count,
1736.chat-fav-button .fav-count,
1737.chat-bubble .fav-button .fav-count {
1738 transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.12s ease, opacity 0.12s ease;
1739}
1740
1741
1742/* Hide fav button by default and reveal on hover of the post/chat container */
1743.fav-button {
1744 /* keep existing sizing/appearance but start hidden */
1745 opacity: 0;
1746 transform: translateY(4px) scale(0.98);
1747 pointer-events: none;
1748 transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s, opacity 0.18s ease;
1749}
1750
1751/* Reveal when user hovers the relevant container (post card, post wrapper or chat bubble) */
1752.post:hover .fav-button,
1753.post-content.post-card:hover .fav-button,
1754.post-content.post-card:focus-within .fav-button,
1755.post:hover .post-content.post-card .fav-button,
1756.chat-node:hover .fav-button,
1757.chat-bubble:hover .fav-button,
1758.thread-node:hover .fav-button {
1759 opacity: 0.96; /* match previous visible state */
1760 transform: translateY(0) scale(1);
1761 pointer-events: auto;
1762}
1763
1764/* On touch devices (no hover), keep button visible so it's usable */
1765@media (hover: none) {
1766 .fav-button {
1767 opacity: 0.96;
1768 transform: none;
1769 pointer-events: auto;
1770 }
1771}
1772
1773/* rt floating button (circular) shown at bottom-right of post content cards and chat bubbles */
1774.rt-button {
1775 position: absolute;
1776 right: 70px;
1777 bottom: 10px;
1778 display: inline-flex;
1779 align-items: center;
1780 justify-content: center;
1781 width: 28px; /* reduced from 32px */
1782 height: 28px; /* reduced from 32px */
1783 border-radius: 50%;
1784 background: rgba(var(--tuiter-white-rgb),0.72); /* more translucent */
1785 border: 1px solid rgba(var(--tuiter-media-black-rgb),0.03); /* subtler border */
1786 box-shadow: 0 1px 3px rgba(var(--tuiter-media-black-rgb),0.04); /* very light shadow */
1787 z-index: 30;
1788 padding: 0;
1789 transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s, opacity 0.12s;
1790 opacity: 0.96;
1791}
1792
1793.rt-button:hover {
1794 background: rgba(var(--tuiter-sidebar-bg),0.98);
1795 color: rgba(var(--tuiter-white-rgb),0.98);
1796 box-shadow: 0 2px 6px rgba(var(--tuiter-media-black-rgb),0.06);
1797 transform: translateY(-1px);
1798 opacity: 1;
1799}
1800
1801.rt-button .rt-btn {
1802 width: 100%;
1803 height: 100%;
1804 border: none;
1805 background: transparent;
1806 font-size: 12px; /* slightly smaller icon/text */
1807 line-height: 1;
1808 cursor: pointer;
1809 color: var(--tuiter-muted);
1810 border-radius: 50%;
1811 display: inline-flex;
1812 align-items: center;
1813 justify-content: center;
1814 position: relative; /* allow nudging the arrow down */
1815 top: 2px; /* nudge arrow a bit downward */
1816}
1817.rt-button .rt-btn:hover, .rt-button.active .rt-btn {
1818 background-color: var(--tuiter-sidebar-bg);
1819 color: var(--tuiter-white);
1820}
1821
1822/* notification-style badge for count - monochrome and low-contrast by default */
1823.rt-button .rt-count {
1824 position: absolute;
1825 top: -2px; /* moved slightly down from -5px */
1826 right: -5px;
1827 min-width: 14px; /* reduced from 18px */
1828 height: 14px; /* reduced from 18px */
1829 padding: 0 4px;
1830 display: inline-flex;
1831 align-items: center;
1832 justify-content: center;
1833 font-size: 10px; /* slightly smaller */
1834 font-weight: 700;
1835 color: var(--tuiter-white);
1836 background: rgba(var(--tuiter-media-black-rgb),0.28); /* monochrome, translucent */
1837 border-radius: 999px;
1838 border: 1px solid rgba(var(--tuiter-white-rgb),0.85);
1839 box-shadow: none; /* remove ornamental shadow */
1840 transition: background 0.12s ease, transform 0.12s ease, opacity 0.12s;
1841 opacity: 0.92;
1842 pointer-events: none;
1843}
1844.rt-button:hover .rt-count {
1845 background: rgba(var(--tuiter-media-black-rgb),0.5); /* darker on hover to show affordance */
1846 opacity: 1;
1847}
1848
1849/* Use accent color for the rt-count badge when the button is hovered (main, chat and bubble variants) */
1850.rt-button:hover .rt-count,
1851.chat-rt-button:hover .rt-count,
1852.chat-bubble .rt-button:hover .rt-count {
1853 background: var(--tuiter-sidebar-bg);
1854 color: var(--tuiter-white);
1855 border-color: rgba(var(--tuiter-white-rgb),0.9);
1856 opacity: 1;
1857}
1858
1859.chat-rt-button { width: 26px; height: 26px; right: 6px; bottom: 6px; background: rgba(var(--tuiter-white-rgb),0.74); box-shadow: 0 1px 3px rgba(var(--tuiter-media-black-rgb),0.04); }
1860.chat-rt-button .rt-btn { font-size: 11px; position: relative; top: 1px; color: var(--tuiter-muted); }
1861.chat-rt-button .rt-count { top: -3px; right: -6px; min-width: 12px; height: 12px; font-size: 9px; background: rgba(var(--tuiter-media-black-rgb),0.28); color: var(--tuiter-white); border: 1px solid rgba(var(--tuiter-white-rgb),0.85); box-shadow: none; }
1862
1863/* small screen adjustments */
1864@media (max-width: 640px) {
1865 .rt-button { width: 26px; height: 26px; right: 8px; bottom: 8px; }
1866 .rt-button .rt-count { top: -3px; right: -5px; min-width: 12px; height: 12px; font-size: 9px; }
1867}
1868
1869/* ensure rt button doesn't obstruct essential text - slightly transparent when overlapping text */
1870.post-content.post-card .rt-button { background: rgba(var(--tuiter-white-rgb),0.68); }
1871
1872/* Allow absolute-positioned rt button to anchor to chat bubbles */
1873.chat-bubble { position: relative; }
1874
1875/* rt button when placed inside a chat bubble (smaller, tucked in) */
1876.chat-bubble .rt-button {
1877 position: absolute; /* anchor to bubble */
1878 bottom: 6px;
1879 width: 24px; /* reduced from 26/30 */
1880 height: 24px; /* reduced */
1881 min-width: 24px;
1882 border-radius: 50%;
1883 box-shadow: 0 1px 3px rgba(var(--tuiter-media-black-rgb),0.04);
1884 background: rgba(var(--tuiter-white-rgb),0.74);
1885 border: 1px solid rgba(var(--tuiter-media-black-rgb),0.03);
1886 padding: 0;
1887 z-index: 25;
1888 transition: background 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
1889}
1890.chat-bubble .rt-button:hover { background: rgba(var(--tuiter-white-rgb),0.96); box-shadow: 0 2px 5px rgba(var(--tuiter-media-black-rgb),0.05); transform: translateY(-1px); }
1891.chat-bubble .rt-button .rt-btn { font-size: 11px; position: relative; top: 3px; }
1892.chat-bubble .rt-button .rt-count { top: 1px; right: -2px; min-width: 11px; height: 11px; font-size: 9px; background: rgba(var(--tuiter-media-black-rgb),0.28); color: var(--tuiter-white); border: 1px solid rgba(var(--tuiter-white-rgb),0.85); box-shadow: none; opacity: 0.92; }
1893
1894/* left-side bubble: place button at bubble's lower-right (so arrow visually points toward avatar on left) */
1895.chat-bubble .rt-button.side-left { right: -26px; left: auto; bottom: 58px; }
1896
1897/* right-side bubble: place button at bubble's lower-left (so arrow visually points toward avatar on right) */
1898.chat-bubble .rt-button.side-right { left: -26px; right: auto; bottom: 58px; }
1899
1900/* Ensure badge stands out on top of bubble */
1901.chat-bubble .rt-button .rt-count { border: 1px solid rgba(var(--tuiter-white-rgb),0.9); }
1902
1903/* Keep previous chat-rt-button class for other placements but prefer bubble-scoped rules for bubbles */
1904.rt-button .rt-count,
1905.chat-rt-button .rt-count,
1906.chat-bubble .rt-button .rt-count {
1907 transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.12s ease, opacity 0.12s ease;
1908}
1909
1910
1911/* Hide rt button by default and reveal on hover of the post/chat container */
1912.rt-button {
1913 /* keep existing sizing/appearance but start hidden */
1914 opacity: 0;
1915 transform: translateY(4px) scale(0.98);
1916 pointer-events: none;
1917 transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s, opacity 0.18s ease;
1918}
1919
1920/* Reveal when user hovers the relevant container (post card, post wrapper or chat bubble) */
1921.post:hover .rt-button,
1922.post-content.post-card:hover .rt-button,
1923.post-content.post-card:focus-within .rt-button,
1924.post:hover .post-content.post-card .rt-button,
1925.chat-node:hover .rt-button,
1926.chat-bubble:hover .rt-button,
1927.thread-node:hover .rt-button {
1928 opacity: 0.96; /* match previous visible state */
1929 transform: translateY(0) scale(1);
1930 pointer-events: auto;
1931}
1932
1933/* On touch devices (no hover), keep button visible so it's usable */
1934@media (hover: none) {
1935 .rt-button {
1936 opacity: 0.96;
1937 transform: none;
1938 pointer-events: auto;
1939 }
1940}
1941
1942/* Reply input UI (slim, wide chat-like) */
1943.reply-input-container {
1944 display: flex;
1945 gap: 8px;
1946 align-items: center;
1947 margin-top: 8px;
1948 margin-bottom: 6px;
1949 padding: 6px;
1950 background: rgba(var(--tuiter-white-rgb),0.04);
1951 border-radius: 8px;
1952 border: 1px solid rgba(var(--tuiter-media-black-rgb),0.04);
1953 width: 100%;
1954 max-width: 100%;
1955 box-shadow: 0 1px 4px rgba(var(--tuiter-media-black-rgb),0.03);
1956}
1957
1958.reply-input-container .reply-input {
1959 flex: 1 1 auto;
1960 height: 32px;
1961 padding: 6px 8px;
1962 font-size: 12px;
1963 border-radius: 6px;
1964 border: 1px solid rgba(var(--tuiter-media-black-rgb),0.06);
1965 background: rgba(var(--tuiter-white-rgb),0.9);
1966 color: var(--tuiter-text);
1967}
1968
1969.reply-input-container .reply-input:focus {
1970 outline: none;
1971 box-shadow: 0 0 0 3px rgba(var(--tuiter-accent-rgb),0.08);
1972 border-color: var(--tuiter-accent);
1973}
1974
1975.reply-input-container .reply-submit {
1976 flex: 0 0 auto;
1977 height: 32px;
1978 padding: 6px 10px;
1979 border-radius: 6px;
1980 border: none;
1981 background: var(--tuiter-accent);
1982 color: var(--tuiter-white);
1983 font-weight: 600;
1984 cursor: pointer;
1985}
1986
1987/* Make sure reply input inserted under a bubble/post aligns with the content width */
1988.chat-node .reply-input-container,
1989.post-content .reply-input-container,
1990.post .reply-input-container {
1991 margin-left: 44px; /* account for avatar column */
1992 max-width: calc(100% - 44px);
1993}
1994
1995/* For chat-style nodes, reduce left margin for right-side nodes */
1996.chat-node.right .reply-input-container { margin-left: 8px; margin-right: 44px; max-width: calc(100% - 52px); }
1997
1998@media (max-width: 640px) {
1999 .chat-node .reply-input-container,
2000 .post-content .reply-input-container,
2001 .post .reply-input-container { margin-left: 52px; max-width: calc(100% - 52px); }
2002 .reply-input-container .reply-input { height: 36px; }
2003}
2004
2005/* Small avatar square and placeholder inside the reply input container */
2006.reply-avatar-square {
2007 width: 28px;
2008 height: 28px;
2009 border-radius: 6px;
2010 object-fit: cover;
2011 flex: 0 0 auto;
2012 border: 1px solid rgba(var(--tuiter-media-black-rgb),0.06);
2013}
2014
2015.reply-avatar-placeholder {
2016 width: 28px;
2017 height: 28px;
2018 border-radius: 6px;
2019 background: rgba(var(--tuiter-avatar-bg-rgb),0.18);
2020 border: 1px solid rgba(var(--tuiter-media-black-rgb),0.04);
2021 flex: 0 0 auto;
2022}
2023
2024/* Adjust input spacing to account for avatar */
2025.reply-input-container .reply-input { margin-left: 0; }
2026
2027@media (max-width: 640px) {
2028 .reply-avatar-square, .reply-avatar-placeholder { width: 32px; height: 32px; }
2029}
2030
2031/* Absolutely positioned reply input container styles */
2032.reply-input-container.absolute {
2033 position: absolute; /* set by JS but provide default styling */
2034 box-shadow: 0 8px 30px rgba(var(--tuiter-media-black-rgb),0.12);
2035 background: rgba(var(--tuiter-white-rgb),0.98);
2036 border-radius: 10px;
2037 padding: 8px 10px;
2038}
2039
2040/* reduce avatar size for floating input to keep it slim */
2041.reply-input-container.absolute .reply-avatar-square,
2042.reply-input-container.absolute .reply-avatar-placeholder {
2043 width: 32px;
2044 height: 32px;
2045 border-radius: 6px;
2046}
2047
2048.reply-input-container.absolute .reply-input { height: 36px; }
2049
2050/* small screens: make floating input nearly full width */
2051@media (max-width: 640px) {
2052 .reply-input-container.absolute { left: 8px !important; right: 8px !important; width: auto !important; }
2053}