1  #compose-container-outer {
  2    width: 100%;
  3    height: 100vh;
  4    height: 100dvh;
  5    overflow: auto;
  6    align-self: flex-start;
  7    padding: env(safe-area-inset-top) env(safe-area-inset-right)
  8      env(safe-area-inset-bottom) env(safe-area-inset-left);
  9  }
 10  #compose-container {
 11    margin: auto;
 12    width: var(--main-width);
 13    max-width: 100vw;
 14    align-self: stretch;
 15    animation: fade-in 0.2s ease-out;
 16  }
 17  
 18  #compose-container .compose-top {
 19    text-align: right;
 20    display: flex;
 21    justify-content: space-between;
 22    gap: 8px;
 23    align-items: center;
 24    padding: 16px;
 25    position: sticky;
 26    top: 0;
 27    z-index: 100;
 28    white-space: nowrap;
 29  }
 30  #compose-container .compose-top .account-block {
 31    text-align: start;
 32    pointer-events: none;
 33    overflow: hidden;
 34    color: var(--text-insignificant-color);
 35    line-height: 1.1;
 36    font-size: 90%;
 37    background-color: var(--bg-faded-blur-color);
 38    backdrop-filter: blur(16px);
 39    padding-inline-end: 1em;
 40    border-radius: 9999px;
 41  }
 42  
 43  #compose-container textarea {
 44    width: 100%;
 45    max-width: 100%;
 46    height: 5em;
 47    min-height: 5em;
 48    max-height: 50vh;
 49    resize: vertical;
 50    line-height: 1.4;
 51    border-color: transparent;
 52  }
 53  #compose-container textarea:hover {
 54    border-color: var(--divider-color);
 55  }
 56  
 57  @media (min-width: 40em) {
 58    #compose-container textarea {
 59      font-size: 150%;
 60      font-size: calc(100% + 50% / var(--text-weight));
 61      max-height: 65vh;
 62    }
 63  }
 64  
 65  @keyframes appear-up {
 66    0% {
 67      opacity: 0;
 68      transform: translateY(10px);
 69    }
 70    100% {
 71      opacity: 1;
 72      transform: translateY(0);
 73    }
 74  }
 75  #compose-container .status-preview {
 76    border-radius: 16px 16px 0 0;
 77    max-height: 50%;
 78    background-color: var(--bg-color);
 79    margin: 0 12px;
 80    border: 1px solid var(--outline-color);
 81    border-bottom: 0;
 82    animation: appear-up 1s ease-in-out;
 83    overflow: auto;
 84    box-shadow: 0 -3px 12px -3px var(--drop-shadow-color);
 85  }
 86  #compose-container .status-preview:has(.status-badge:not(:empty)) {
 87    border-top-right-radius: 8px;
 88  }
 89  #compose-container .status-preview :is(.content-container, .time) {
 90    pointer-events: none;
 91  }
 92  #compose-container.standalone .status-preview * {
 93    /*
 94      For standalone mode (new window), prevent interacting with the status preview for now
 95    */
 96    pointer-events: none;
 97  }
 98  
 99  #compose-container .status-preview-legend {
100    pointer-events: none;
101    position: sticky;
102    bottom: 0;
103    padding: 8px;
104    font-size: 80%;
105    font-weight: bold;
106    text-align: center;
107    color: var(--text-insignificant-color);
108    background-color: var(--bg-blur-color);
109    /* background-image: linear-gradient(
110      to bottom,
111      transparent,
112      var(--bg-faded-color)
113    ); */
114    border-top: var(--hairline-width) solid var(--outline-color);
115    backdrop-filter: blur(8px);
116    text-shadow: 0 1px 10px var(--bg-color), 0 1px 10px var(--bg-color),
117      0 1px 10px var(--bg-color), 0 1px 10px var(--bg-color),
118      0 1px 10px var(--bg-color);
119    z-index: 2;
120  }
121  #_compose-container .status-preview-legend.reply-to {
122    color: var(--reply-to-color);
123    background-color: var(--reply-to-faded-color);
124    /* background-image: linear-gradient(
125      to bottom,
126      transparent,
127      var(--reply-to-faded-color)
128    ); */
129  }
130  
131  #compose-container form {
132    border-radius: 16px;
133    padding: 4px 12px;
134    background-color: var(--bg-blur-color);
135    /* background-image: linear-gradient(var(--bg-color) 85%, transparent); */
136    position: relative;
137    z-index: 2;
138    --drop-shadow: 0 3px 6px -3px var(--drop-shadow-color);
139    box-shadow: var(--drop-shadow);
140  }
141  #compose-container .status-preview ~ form {
142    box-shadow: var(--drop-shadow), 0 -3px 6px -3px var(--drop-shadow-color);
143  }
144  
145  #compose-container .toolbar {
146    display: flex;
147    justify-content: space-between;
148    align-items: center;
149    padding: 8px 0;
150    gap: 8px;
151  }
152  #compose-container .toolbar.wrap {
153    flex-wrap: wrap;
154  }
155  #compose-container .toolbar.stretch {
156    justify-content: stretch;
157  }
158  #compose-container .toolbar .spoiler-text-field {
159    flex: 1;
160    min-width: 0;
161  }
162  #compose-container .toolbar-button {
163    display: inline-block;
164    color: var(--link-color);
165    background-color: transparent;
166    padding: 0 8px;
167    border-radius: 8px;
168    min-height: 2.4em;
169    line-height: 2.4em;
170    min-width: 2.6em;
171    text-align: center;
172    overflow: hidden;
173    position: relative;
174    white-space: nowrap;
175    border: 2px solid transparent;
176    vertical-align: middle;
177  }
178  #compose-container .toolbar-button > * {
179    vertical-align: middle;
180    cursor: inherit;
181    outline: 0;
182  }
183  #compose-container .toolbar-button:has([disabled]),
184  #compose-container .toolbar-button[disabled] {
185    pointer-events: none;
186    background-color: transparent;
187    opacity: 0.5;
188  }
189  #compose-container
190    .toolbar-button:not(.show-field)
191    :is(input[type='checkbox'], select, input[type='file']) {
192    opacity: 0;
193    position: absolute;
194    left: 0;
195    height: 100%;
196    margin: 0;
197  }
198  #compose-container .toolbar-button input[type='file'] {
199    /* Move this out of the way, to fix cursor: pointer bug */
200    left: -100vw !important;
201  }
202  #compose-container .toolbar-button select {
203    background-color: inherit;
204    border: 0;
205    padding: 0 0 0 8px;
206    margin: 0;
207    appearance: none;
208  }
209  #compose-container .toolbar-button:not(.show-field) select {
210    right: 0;
211    left: auto !important;
212  }
213  #compose-container
214    .toolbar-button:not(:disabled):is(
215      :hover,
216      :focus,
217      :focus-within,
218      :focus-visible
219    ) {
220    cursor: pointer;
221    filter: none;
222    background-color: var(--bg-color);
223    border-color: var(--link-faded-color);
224    outline: 0;
225  }
226  #compose-container .toolbar-button:not(:disabled).highlight {
227    border-color: var(--link-color);
228    box-shadow: inset 0 0 8px var(--link-faded-color);
229  }
230  #compose-container .toolbar-button:not(:disabled):active {
231    filter: brightness(0.8);
232  }
233  
234  #compose-container .toolbar-button .icon-text {
235    display: inline-block;
236    font-size: 14px;
237    font-weight: 500;
238    text-overflow: ellipsis;
239    overflow: hidden;
240    max-width: 100%;
241  }
242  
243  #compose-container text-expander {
244    position: relative;
245    display: block;
246  }
247  #compose-container .text-expander-menu {
248    color: var(--text-color);
249    background-color: var(--bg-color);
250    position: absolute;
251    margin-top: 2em;
252    padding: 0;
253    list-style: none;
254    border: 1px solid var(--outline-color);
255    box-shadow: 0 4px 24px var(--drop-shadow-color);
256    border-radius: 8px;
257    overflow: hidden;
258    z-index: 100;
259    min-width: 10em;
260    max-width: 90vw;
261  }
262  #compose-container .text-expander-menu li {
263    white-space: nowrap;
264    padding: 8px;
265    cursor: pointer;
266    overflow: hidden;
267    text-overflow: ellipsis;
268    display: flex;
269    gap: 8px;
270    align-items: center;
271    font-size: 90%;
272  }
273  #compose-container .text-expander-menu li b img {
274    /* The shortcode emojis */
275    width: 0.9em;
276    height: 0.9em;
277  }
278  #compose-container .text-expander-menu li .avatar {
279    width: 2.2em;
280    height: 2.2em;
281  }
282  #compose-container .text-expander-menu li:is(:hover, :focus, [aria-selected]) {
283    color: var(--bg-color);
284    background-color: var(--link-color);
285  }
286  #compose-container
287    .text-expander-menu:hover
288    li[aria-selected]:not(:hover, :focus) {
289    color: var(--text-color);
290    background-color: var(--bg-color);
291  }
292  
293  #compose-container .form-visibility-direct {
294    --yellow-stripes: repeating-linear-gradient(
295      -45deg,
296      var(--reply-to-faded-color),
297      var(--reply-to-faded-color) 10px,
298      var(--reply-to-faded-color) 10px,
299      transparent 10px,
300      transparent 20px
301    );
302    /* diagonal stripes of yellow */
303    background-image: var(--yellow-stripes);
304  }
305  
306  #compose-container .media-attachments {
307    background-color: var(--bg-faded-color);
308    padding: 8px;
309    border-radius: 8px;
310    margin: 8px 0 0;
311    display: flex;
312    flex-direction: column;
313    gap: 8px;
314  }
315  #compose-container .media-attachment {
316    display: flex;
317    gap: 8px;
318    align-items: stretch;
319  }
320  #compose-container .media-preview {
321    flex-shrink: 0;
322    border: 1px solid var(--outline-color);
323    border-radius: 4px;
324    overflow: hidden;
325    width: 80px;
326    height: 80px;
327    /* checkerboard background */
328    background-image: linear-gradient(
329        45deg,
330        var(--img-bg-color) 25%,
331        transparent 25%
332      ),
333      linear-gradient(-45deg, var(--img-bg-color) 25%, transparent 25%),
334      linear-gradient(45deg, transparent 75%, var(--img-bg-color) 75%),
335      linear-gradient(-45deg, transparent 75%, var(--img-bg-color) 75%);
336    background-size: 10px 10px;
337    background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
338  }
339  #compose-container .media-preview > * {
340    width: 80px;
341    height: 80px;
342    object-fit: scale-down;
343    vertical-align: middle;
344    pointer-events: none;
345  }
346  #compose-container .media-preview:hover {
347    box-shadow: 0 0 0 2px var(--link-light-color);
348    cursor: pointer;
349  }
350  #compose-container .media-attachment textarea {
351    height: 80px;
352    flex-grow: 1;
353    resize: none;
354  }
355  #compose-container .media-attachments .media-desc {
356    flex-grow: 1;
357  }
358  #compose-container .media-attachments .media-desc p {
359    font-size: 90%;
360    margin: 0;
361    padding: 0;
362    /* clamp 2 lines */
363    display: -webkit-box;
364    -webkit-line-clamp: 2;
365    -webkit-box-orient: vertical;
366    overflow: hidden;
367  }
368  #compose-container .media-attachments .media-desc p i {
369    color: var(--text-insignificant-color);
370  }
371  #compose-container .media-aside {
372    display: flex;
373    flex-direction: column;
374    justify-content: space-between;
375    align-items: center;
376  }
377  #compose-container .media-aside .close-button {
378    padding: 4px;
379    align-self: flex-start;
380    color: var(--text-insignificant-color);
381  }
382  #compose-container .media-aside .close-button:is(:hover, :focus) {
383    color: var(--text-color);
384  }
385  #compose-container .media-aside .uploaded {
386    color: var(--green-color);
387    margin-bottom: 4px;
388  }
389  
390  #compose-container .media-sensitive {
391    padding: 8px;
392    background-color: var(--bg-blur-color);
393    border-radius: 8px;
394    cursor: pointer;
395  }
396  #compose-container .media-sensitive > * {
397    vertical-align: middle;
398  }
399  
400  #compose-container form .poll {
401    background-color: var(--bg-faded-color);
402    border-radius: 8px;
403    margin: 8px 0 0;
404    display: block;
405  }
406  
407  #compose-container .poll-choices {
408    display: flex;
409    flex-direction: column;
410    gap: 8px;
411    padding: 8px;
412  }
413  #compose-container .poll-choice {
414    display: flex;
415    gap: 8px;
416    align-items: center;
417    justify-content: stretch;
418    flex-direction: row-reverse;
419  }
420  #compose-container .poll-choice input {
421    flex-grow: 1;
422    min-width: 0;
423  }
424  
425  #compose-container .poll-button {
426    border: 2px solid var(--outline-color);
427    width: 28px;
428    height: 28px;
429    padding: 0;
430    flex-shrink: 0;
431    line-height: 0;
432    overflow: hidden;
433    transition: border-radius 1s ease-out;
434    font-size: 14px;
435  }
436  #compose-container .multiple .poll-button {
437    border-radius: 4px;
438  }
439  
440  #compose-container .poll-toolbar {
441    display: flex;
442    gap: 8px;
443    align-items: stretch;
444    justify-content: space-between;
445    font-size: 90%;
446    border-top: 1px solid var(--outline-color);
447    padding: 8px;
448  }
449  #compose-container .poll-toolbar select {
450    padding: 4px;
451  }
452  
453  #compose-container .multiple-choices {
454    flex-grow: 1;
455    display: flex;
456    gap: 4px;
457    align-items: center;
458    border-left: 1px solid var(--outline-color);
459    padding-left: 8px;
460  }
461  
462  #compose-container .expires-in {
463    flex-grow: 1;
464    border-left: 1px solid var(--outline-color);
465    padding-left: 8px;
466    display: flex;
467    gap: 4px;
468    flex-wrap: wrap;
469    align-items: center;
470    justify-content: flex-end;
471  }
472  
473  #compose-container .remove-poll-button {
474    width: 100%;
475    color: var(--red-color);
476  }
477  
478  @media (display-mode: standalone) {
479    /* No popping in standalone mode */
480    #compose-container .pop-button {
481      display: none;
482    }
483  }
484  
485  @media (min-width: 480px) {
486    #compose-container button[type='submit'] {
487      padding-inline: 24px;
488    }
489  }
490  #media-sheet {
491    .media-form {
492      flex: 1;
493      display: flex;
494      flex-direction: column;
495      gap: 8px;
496      min-height: 50vh;
497  
498      textarea {
499        flex-grow: 1;
500        resize: none;
501        width: 100%;
502        /* height: 10em; */
503      }
504  
505      footer {
506        display: flex;
507        justify-content: space-between;
508        align-items: center;
509      }
510    }
511  }
512  #media-sheet main {
513    padding-top: 8px;
514    display: flex;
515    flex-direction: column;
516    flex: 1;
517    gap: 8px;
518  }
519  #media-sheet .media-preview {
520    border: 2px solid var(--outline-color);
521    border-radius: 8px;
522    overflow: hidden;
523    box-shadow: 0 2px 16px var(--img-bg-color);
524    /* checkerboard background */
525    background-image: linear-gradient(
526        45deg,
527        var(--img-bg-color) 25%,
528        transparent 25%
529      ),
530      linear-gradient(-45deg, var(--img-bg-color) 25%, transparent 25%),
531      linear-gradient(45deg, transparent 75%, var(--img-bg-color) 75%),
532      linear-gradient(-45deg, transparent 75%, var(--img-bg-color) 75%);
533    background-size: 20px 20px;
534    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
535    flex: 0.8;
536  }
537  #media-sheet .media-preview > * {
538    width: 100%;
539    height: 100%;
540    max-height: 50vh;
541    object-fit: scale-down;
542    vertical-align: middle;
543  }
544  
545  @media (min-width: 50em) {
546    #media-sheet main {
547      flex-direction: row;
548    }
549    #media-sheet .media-preview {
550      flex: 2;
551    }
552    #media-sheet .media-preview > * {
553      max-height: none;
554    }
555    /* #media-sheet textarea {
556      flex: 1;
557      min-height: 100%;
558      height: auto;
559    } */
560  }
561  
562  #custom-emojis-sheet {
563    max-height: 50vh;
564    max-height: 50dvh;
565  }
566  #custom-emojis-sheet main {
567    mask-image: none;
568  }
569  #custom-emojis-sheet .custom-emojis-list .section-header {
570    font-size: 80%;
571    text-transform: uppercase;
572    color: var(--text-insignificant-color);
573    padding: 8px 0 4px;
574    position: sticky;
575    top: 0;
576    background-color: var(--bg-blur-color);
577    backdrop-filter: blur(1px);
578  }
579  #custom-emojis-sheet .custom-emojis-list section {
580    display: flex;
581    flex-wrap: wrap;
582  }
583  #custom-emojis-sheet .custom-emojis-list button {
584    border-radius: 8px;
585    background-image: radial-gradient(
586      closest-side,
587      var(--img-bg-color),
588      transparent
589    );
590  }
591  #custom-emojis-sheet .custom-emojis-list button:is(:hover, :focus) {
592    filter: none;
593    background-color: var(--bg-faded-color);
594  }
595  #custom-emojis-sheet .custom-emojis-list button img {
596    transition: transform 0.1s ease-out;
597  }
598  #custom-emojis-sheet .custom-emojis-list button:is(:hover, :focus) img {
599    transform: scale(1.5);
600  }