/* add scroll bar to reply preview if you're replying to a long post
*/

.compose-form .reply-indicator__content {
   overflow: scroll;
    display: block;
}

/* remove the truncation of paragraphs after the first in some notifications, using an ellipsis instead to denote there's more to read*/

.notification-group__embedded-status__content p {
display: block;
}

/* emoji embiggening */

.edit-indicator__content .emojione, .reply-indicator__content .emojione, .status__content .emojione {
    height: 24px;
    width: 24px;
}

.detailed-status .status__content .emojione {
    height: 28px;
    width: 28px;
}

/* emoji button
 * sets the emoji button back in the top right
 * thanks Zoë!
 */

.compose-form__highlightable {
	position: relative;
}

.compose-form .autosuggest-textarea__textarea {
	padding-right: 24px;
}

.compose-form__buttons [aria-label*="emoji"] {
	position: absolute;
	top: .5rem;
	right: .5rem;
}

.edit-indicator__cancel {
   position: relative;
   right: 1.1rem;
}

/* Compose form
 * Why are the buttons inside? Why?
 * thanks Zoë!
 */

.compose-form__highlightable {
    border: 0;
    background: 0;
}

.compose-form .autosuggest-textarea__textarea,
.compose-form .spoiler-input__input {
    border: 1px solid var(--background-border-color);
    border-radius: 4px;
}

.compose-form__footer {
    display: grid;
    grid-template-areas:
        "buttons buttons"
        "dropdowns submit";
    padding: 0;
    margin: 8px;
}

.compose-form__buttons {
    grid-area: buttons;
}

.compose-form__dropdowns {
    grid-area: dropdowns;
}

.compose-form__submit {
    grid-area: submit;
}

.compose-form__actions {
    display: contents;
}

.compose-form__uploads {
    padding: 0;
}

.compose-form .spoiler-input__input {
    border-radius: 4px 4px 0 0;
}

.compose-form .spoiler-input + .autosuggest-textarea .autosuggest-textarea__textarea {
    border-radius: 0 0 4px 4px;
    border-top: 0;
}

.compose-form .spoiler-input .autosuggest-input {
    border-bottom: 0;
}

.compose-form__poll .poll__option {
    padding: 0;
}

.emoji-picker-dropdown__menu {
    margin-left: 5px;
}

.compose-form__footer [title$="privacy"] span {
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }

/* bi pride scrollbar dark mode */

[data-color-scheme="dark"], html:not([data-color-scheme]) 

html.custom-scrollbars {
  scrollbar-color: unset !important;
}
 
.scrollable {
    scrollbar-width: unset !important;
}

* {
    --scrollbar-color-thumb: #5a5a5a;
    --scrollbar-color-track: #2f2f47;
    --scrollbar-width: large;
    --scrollbar-width-legacy: 200px;
    --scrollbar-thumb-gradient: linear-gradient( 180deg, #613363 0%, #044d61 100%) !important;
}
 
*::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-gradient) !important;
}
*::-webkit-scrollbar-track {
    background: var(--scrollbar-color-track) !important;
}
*::-webkit-scrollbar {
    max-width: var(--scrollbar-width-legacy) !important;
    max-height: var(--scrollbar-width-legacy) !important;
}


/* Changes the alert symbol (A ! inside a triangle) for adding a content warning to a toot to instead just read 'CW' */

.compose-form__buttons button[aria-label$="content warning"] svg {
        display: none;
    }
    
.compose-form__buttons button[aria-label$="content warning"]::before {
        display: flex;
        content: 'CW';
        min-width: 20px;
        min-height: 20px;
        align-items: center;
        justify-content: center;
    }

/* Shrinks column width and padding to recover lost horizontal space*/

.column {
    width: 350px;
}

.drawer {
    width: 350px;
}

.column, .drawer {
        padding-inline-end: 2px;
        padding-inline-start: 2px;
}

.notification-group {
    padding: 16px 10px;
}

.notification-ungrouped {
    padding: 16px 10px;
}


/* Changes the colour of the line separating posts to make it more clearly visible where one post ends and another begins */

.notification-group, .notification-ungrouped, .status {
    border-bottom: 1px solid #3f3f8d;
    }


/* Reduce contrast in dark mode */

[data-color-scheme="dark"], html:not([data-color-scheme]) {
	color-scheme: dark;
	--color-bg-primary: #252534 !important;
        --color-text-primary: #cccccc !important;
}

body.theme-default .column, body.theme-default .drawer {
background: #252537 !important;
}

/* Reduce contrast in light mode */

[data-color-scheme="light"] {
	color-scheme: light;
	--color-bg-primary: #f3f9ff !important;
}

[data-color-scheme="light"] .status .content-warning {
background: #d2d5ff;
}


/* It's 'Toot!'. It was always 'Toot!'. */

.compose-form__actions .button {
    font-size: 0;
    width: 75px;
    height: 35px;
    }
    
    .compose-form__actions .button::before {
        font-size: 15px;
        content: 'Toot!';
    }


/* Removes the 'hazard' strip from the account warning notification when viewing a report */
.account-card__warning-badge {
    background: none;
}

a.status-link:not(.mention) {
  text-decoration: underline;
}

.media-gallery__item-thumbnail img:not([alt]),
.audio-player__canvas:not([title]),
.video-player video:not([title])

 {
    /*border: 4px dashed #DD2E44;*/
    border: 3px dashed #1da1f2;
    box-sizing: border-box;
}

.status__wrapper-direct::before, .status__wrapper-direct.unread::before {
content: "";
background: #bb6eb9;
width: 4px;
height: 100%;
display: block;
position: absolute;
}

.item-list .display-name__account {
  display: block!important;
}

.item-list .account__details > span:first-child {
  display: none!important;
}


/* make the new profile layout more spacious in column view
*/

._comp_account_header__bioButtonsWrapper {
    margin-top: 16px !important;
    border-top: 1px solid #646482;
    padding-top: 16px !important;
    border-bottom: 1px solid #646482;
    padding-bottom: 16px !important;
    margin-bottom: 16px !important;
}

._comp_account_header__handleHelpButton {
width: 290px !important;
margin-top: 15px !important;
}

._comp_badge__content {
overflow: visible !important;
}

._comp_account_header__buttonsDesktop{
    gap: 4px !important;
    margin-right: -10px !important;
}

._comp_account_header__name>h1 {
font-size: 20px !important;
}

._comp_account_header__nameWrapper {
    min-width: 100%
}


/* border on toot compose box */
.compose-form .autosuggest-textarea__textarea, .compose-form .spoiler-input__input {
    border: 1px solid #5d5678;
}


/* fix transparent panels in light mode*/

[data-color-scheme="dark"], html:not([data-color-scheme]) 
  .columns-area__panels__pane--navigational .columns-area__panels__pane__inner {
	background: #252534 !important;
        background-color: #252534 !important;
}

[data-color-scheme="dark"] .dialog-modal {
	background: #252534 !important;
}

[data-color-scheme="light"]
  .columns-area__panels__pane--navigational .columns-area__panels__pane__inner {
	background: #eee !important;
        background-color: #eee !important;
}

[data-color-scheme="light"] .dialog-modal {
	background: #fff !important;
}

._comp_account_header__handleHelp {
background: #fff !important;
}

.dropdown-menu.bottom, .language-dropdown__dropdown, ._comp_account_header__handleHelp { 
background: #fff !important;
}

/* recolour content warning */

[data-color-scheme="dark"] .content-warning {
    background: #322d46;
    border: 1px solid #464061;
}