:root {
  --brand: #87419E;
  --brand-soft: rgba(171, 86, 199, 0.2);
  --brand-soft-hover: rgba(171, 86, 199, 0.3);
  --brand-strong-hover: rgba(171, 86, 199, 0.6);
  --accent-yellow: #FEAA40;
  --icon-filter-brand: brightness(0) saturate(100%) invert(50%) sepia(34%) saturate(3722%) hue-rotate(246deg) brightness(82%) contrast(88%);
}

body.theme-mastodon-bird-ui-light {
  --brand: #87419E;
  --brand-soft: rgba(171, 86, 199, 0.2);
  --brand-soft-hover: rgba(171, 86, 199, 0.3);
  --brand-strong-hover: rgba(171, 86, 199, 0.6);

  --ui-text: #87419E;
  --ui-text-soft: #6B5C74;
  --ui-panel: rgba(255, 255, 255, 0.72);
  --ui-header: rgba(255, 255, 255, 0.3);
  --ui-main-panel: rgba(255, 255, 255, 0.3);
  --ui-popup: #FFF6E2;
  --ui-border: rgba(135, 65, 158, 0.18);
  --ui-overlay: rgba(0, 0, 0, 0.22);
  --ui-button-text: #FFFFFF;
  --ui-warning-bg: rgba(171, 86, 199, 0.2);
  --ui-hover-chip: rgba(171, 86, 199, 0.2);
  --ui-dropdown-hover: rgba(171, 86, 199, 0.1);
  --ui-login-bg: #FFF6E2;

  --color-brand-longwhile: #87419E;
  --color-brand-longwhile-links: #87419E;
  --ui-suggest-selected-text: #FFFFFF;
}

body.theme-mastodon-bird-ui-dark {
  --brand: #FFD756;
  --brand-soft: rgba(255, 215, 86, 0.16);
  --brand-soft-hover: rgba(255, 215, 86, 0.24);
  --brand-strong-hover: rgba(255, 215, 86, 0.5);

  --ui-text: #FFE284;
  --ui-text-soft: #D8C79B;
  --ui-panel: rgba(33, 24, 40, 0.72);
  --ui-header: rgba(22, 16, 28, 0.62);
  --ui-main-panel: rgba(22, 16, 28, 0.62);
  --ui-popup: #241A2B;
  --ui-border: rgba(255, 226, 132, 0.16);
  --ui-overlay: rgba(0, 0, 0, 0.38);
  --ui-button-text: #FFFFFF;
  --ui-warning-bg: rgba(255, 215, 86, 0.14);
  --ui-hover-chip: rgba(255, 215, 86, 0.14);
  --ui-dropdown-hover: rgba(255, 215, 86, 0.14);
  --ui-login-bg: #1D1523;

  --color-brand-longwhile: #FFD756;
  --color-brand-longwhile-links: #FFD756;
  --icon-filter-brand: brightness(0) saturate(100%) invert(71%) sepia(44%) saturate(3185%) hue-rotate(326deg) brightness(135%) contrast(160%);
  --ui-suggest-selected-text: #241A2B;
}

body.theme-mastodon-light {
  --ui-button-text: #FFFFFF;
}

:root,
body.theme-mastodon-bird-ui-light,
body.theme-mastodon-bird-ui-dark {
  --color-accent-dark: var(--brand) !important;
  --color-light-purple: var(--brand) !important;
  --color-hashtag: var(--brand) !important;
  --color-column-link: var(--brand) !important;
  --color-accent: var(--brand) !important;
}

html,
body {
  margin: 0 !important;
  padding: 0 !important;
}

.layout-single-column a.button.button--block.button-tertiary {
  --color-brand-longwhile-links: var(--brand) !important;
  --color-accent-dark: var(--brand) !important;
}

.button,
.simple_form .btn,
.compose-form__submit .button.button--compact,
.button--block {
  background: var(--brand) !important;
  color: var(--ui-button-text) !important;
  border-color: var(--brand) !important;
}

.compose-form__submit .button.button--compact:hover,
.compose-form__submit .button.button--compact:focus,
.button--block:hover,
.button-secondary:hover {
  background: var(--brand-strong-hover) !important;
  border-color: var(--brand-strong-hover) !important;
  color: var(--ui-button-text) !important;
  box-shadow: none !important;
}

.button-tertiary,
.label_input a,
.link-button,
.status-link,
.compact,
.account-switcher__manage-footer-button--link {
  color: var(--brand) !important;
}

.button-tertiary:active {
  background: var(--brand) !important;
  color: #FFFFFF !important;
}

.button-secondary {
  color: #FFFFFF !important;
  border: 1px solid var(--brand) !important;
}

.account-role,
.account__header__tabs__buttons .icon-button {
  color: var(--brand) !important;
  border: 1px solid var(--brand) !important;
}

.account__header__tabs__buttons .icon-button {
  filter: none !important;
}

.account__header__tabs__buttons .icon-button svg {
  filter: var(--icon-filter-brand) !important;
}

.account-switcher__manage-check,
.column-back-button,
.column-header .column-header__back-button,
.poll__voted .icon path {
  color: var(--accent-yellow) !important;
  fill: var(--accent-yellow) !important;
}

.navigation-panel__menu .column-back-button {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.navigation-panel__menu .column-link,
.navigation-panel__menu .column-link span {
  color: var(--ui-text) !important;
}

.navigation-panel__menu .column-link svg {
  filter: var(--icon-filter-brand) !important;
}

.navigation-panel__menu .column-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: fit-content !important;
  max-width: 100% !important;
  padding: 8px 18px 8px 14px !important;
  margin: 2px 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  transition: background-color 0.2s ease !important;
}

.navigation-panel__menu .column-link:hover {
  background: var(--ui-hover-chip) !important;
}

.compose-form__highlightable {
  background: var(--ui-panel) !important;
}

.columns-area__panels__pane.columns-area__panels__pane--compositional,
.columns-area__panels__pane.columns-area__panels__pane--compositional button,
.columns-area__panels__pane.columns-area__panels__pane--compositional .character-counter,
.columns-area__panels__pane.columns-area__panels__pane--compositional input,
.columns-area__panels__pane.columns-area__panels__pane--compositional textarea {
color: var(--ui-text) !important;
}

.columns-area__panels__pane.columns-area__panels__pane--compositional .navigation-bar .account,
.columns-area__panels__pane.columns-area__panels__pane--compositional .navigation-bar .display-name,
.columns-area__panels__pane.columns-area__panels__pane--compositional .navigation-bar .display-name__html,
.columns-area__panels__pane.columns-area__panels__pane--compositional .navigation-bar .display-name__account {
color: var(--ui-text) !important;
}

.compose-form__poll__select__value {
  color: var(--ui-text) !important;
}

.compose-form__warning,
.notice,
.recommended {
  background: var(--ui-warning-bg) !important;
  color: var(--ui-text) !important;
  border: 1px solid var(--brand) !important;
}

.columns-area.columns-area--mobile,
.columns-area.columns-area--mobile .column,
.columns-area.columns-area--mobile .scrollable {
  background: var(--ui-main-panel) !important;
}

.tabs-bar__wrapper,
.tabs-bar,
.tabs-bar__title,
#tabs-bar__portal,
.column-header__wrapper,
.column-header,
.column-header__title,
.column-header__back-button,
.column-header__button,
.column-header__collapsible,
.column-header__collapsible-inner {
  background: var(--ui-header) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.privacy-dropdown__option {
  background: transparent !important;
}

.privacy-dropdown__option:hover {
  background: var(--brand-soft-hover) !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
}

.privacy-dropdown__option:hover strong,
.privacy-dropdown__option:hover .privacy-dropdown__option__content,
.privacy-dropdown__option:hover .privacy-dropdown__option__content * {
  color: #FFFFFF !important;
}

.privacy-dropdown__option.active,
.privacy-dropdown__option[aria-selected="true"] {
  background: var(--brand) !important;
  color: #000000 !important;
  border-radius: 8px !important;
}

.dropdown-menu__item:hover,
.notification__filter-bar button:hover,
.account-switcher__manage-footer-button--ghost:hover,
.account__section-headline a:hover {
  background: var(--ui-dropdown-hover) !important;
}

.progress-tracker li.completed .circle,
.progress-tracker li.separator.completed,
.icon-with-badge__badge,
.layout-single-column .poll__chart {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #FFFFFF !important;
}

.progress-tracker li.active .circle,
.progress-tracker li.active .circle::before,
.progress-tracker li.active .circle::after {
  border-color: var(--brand) !important;
  color: var(--brand) !important;
  background: var(--brand) !important;
}

.notification__filter-bar a.active::after,
.notification__filter-bar a[aria-current="page"]::after,
.notification__filter-bar button.active::after,
.notification__filter-bar button[aria-selected="true"]::after,
.account__section-headline a.active::after,
.account__section-headline a::after {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
}

.layout-single-column .ui__navigation-bar__item.active {
  fill: var(--brand) !important;
  color: var(--brand) !important;
}

.layout-single-column .react-toggle .react-toggle-track {
  background-color: #CCCCCC !important;
}

.layout-single-column .react-toggle.react-toggle--checked .react-toggle-track {
  background-color: var(--brand) !important;
}

.notification-group__icon .icon path {
  fill: var(--brand) !important;
}

.checkbox,
.radio {
  accent-color: var(--brand) !important;
}

.flash-message {
  border: 1px solid var(--brand) !important;
}

.flash-message a,
.status__content__read-more-button,
.icon-angle-right,
.sidebar ul a:hover,
.sidebar ul a.selected,
.account-switcher__manage-action--danger .icon {
  color: var(--brand) !important;
}

.content__heading__tabs .selected {
  background: var(--brand) !important;
  color: #FFFFFF !important;
}

.content__heading__tabs .selected span,
.content__heading__tabs .selected svg,
.content__heading__tabs .selected svg path {
  color: #FFFFFF !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

.account__relationship .button {
  background-color: rgba(171, 86, 199, 0.3) !important;
  border-color: var(--brand) !important;
  color: var(--brand) !important;
}

.account__relationship .button:hover {
  background-color: rgba(171, 86, 199, 0.7) !important;
  color: #FFFFFF !important;
}

.account__relationship .button--destructive {
  background-color: var(--brand) !important;
  color: #FFFFFF !important;
}

.navigation-panel__logo {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

.navigation-panel__logo .column-link--logo img {
  display: none !important;
}

.navigation-panel__logo .column-link--logo {
  display: block !important;
  width: 100% !important;
  height: 135px !important;
  min-height: 90px !important;
  margin: 10px auto 0 !important;
  padding: 0 !important;
  background-image: url("/custom/logo_r.png") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
  background-color: transparent !important;
}

.logo-container .logo--wordmark {
  display: none !important;
}

.logo-container a {
  display: block !important;
  width: 100% !important;
  height: 80px !important;
  background-image: url("/custom/logo.png") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
}

.logo-container {
  height: 80px !important;
  margin: 40px auto !important;
}

.sidebar > a > img.logo--icon {
  content: url("/custom/logo_r.png") !important;
  width: 100% !important;
  height: 130px !important;
  object-fit: contain !important;
  position: relative !important;
  left: -30px !important;
}

.sidebar > a:first-child {
  display: block !important;
  text-align: center !important;
  margin: 0 auto 12px auto !important;
}

body.theme-mastodon-bird-ui-light:not(.app-body),
body.theme-mastodon-bird-ui-dark:not(.app-body) {
  min-height: 100vh !important;
  background: var(--ui-login-bg) !important;
  background-image: none !important;
}

body.theme-mastodon-bird-ui-light:not(.app-body)::before,
body.theme-mastodon-bird-ui-dark:not(.app-body)::before {
  content: none !important;
  display: none !important;
  background: none !important;
}

body.theme-mastodon-bird-ui-light:not(.app-body) .container-alt,
body.theme-mastodon-bird-ui-light:not(.app-body) .logo-container,
body.theme-mastodon-bird-ui-light:not(.app-body) .form-container,
body.theme-mastodon-bird-ui-dark:not(.app-body) .container-alt,
body.theme-mastodon-bird-ui-dark:not(.app-body) .logo-container,
body.theme-mastodon-bird-ui-dark:not(.app-body) .form-container {
  background: var(--ui-login-bg) !important;
  background-image: none !important;
}

.column[aria-label="홈"] .status.status-direct,
.column[aria-label="홈"] .status__wrapper-direct,
[aria-label="홈"] .status.status-direct,
[aria-label="홈"] .status__wrapper-direct {
  display: none !important;
}

@media (min-width: 769px) {
  body.theme-mastodon-bird-ui-light.app-body .ui {
    background-image:
      url("/custom/bg_ww.jpg"),
      url("/custom/bg_ww.jpg") !important;
    background-repeat:
      no-repeat,
      no-repeat !important;
    background-position:
      center top,
      center bottom !important;
    background-size:
      100vw auto,
      100vw auto !important;
    background-attachment:
      scroll,
      fixed !important;
  }

  body.theme-mastodon-bird-ui-dark.app-body .ui {
    background-image:
      url("/custom/bg_bb.jpg"),
      url("/custom/bg_bb.jpg") !important;
    background-repeat:
      no-repeat,
      no-repeat !important;
    background-position:
      center top,
      center bottom !important;
    background-size:
      100vw auto,
      100vw auto !important;
    background-attachment:
      scroll,
      fixed !important;
  }

  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body):has(.compose-form .reply-indicator) .columns-area__panels,
  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body):has(.compose-form .reply-indicator) .columns-area__panels__main,
  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body):has(.compose-form .reply-indicator) .columns-area.columns-area--mobile,
  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body):has(.compose-form .reply-indicator) .column,
  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body):has(.compose-form .reply-indicator) .scrollable,
  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body):has(.compose-form .reply-indicator) .item-list {
    overflow: visible !important;
  }

  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body) .compose-form:has(.reply-indicator) {
    position: fixed !important;
    top: 7vh !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
    width: min(580px, calc(100vw - 32px)) !important;
    max-height: 82vh !important;
    overflow: visible !important;
    padding: 18px 18px 14px !important;
    border-radius: 18px !important;
    background: transparent !important;
    z-index: 10001 !important;
    isolation: isolate !important;
    box-shadow: none !important;
  }

  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body) .compose-form:has(.reply-indicator)::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 18px !important;
    background: var(--ui-popup) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22) !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body) .compose-form:has(.reply-indicator) .navigation-bar .icon-button {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--ui-overlay) !important;
    box-shadow: none !important;
    color: transparent !important;
    font-size: 0 !important;
    cursor: pointer !important;
    z-index: 0 !important;
  }

  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body) .compose-form:has(.reply-indicator) .navigation-bar .icon-button svg {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body) .compose-form:has(.reply-indicator) .reply-indicator,
  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body) .compose-form:has(.reply-indicator) .navigation-bar .account,
  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body) .compose-form:has(.reply-indicator) .compose-form__warning,
  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body) .compose-form:has(.reply-indicator) .compose-form__highlightable,
  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body) .compose-form:has(.reply-indicator) .compose-form__scrollable,
  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body) .compose-form:has(.reply-indicator) .compose-form__footer,
  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body) .compose-form:has(.reply-indicator) .compose-form__actions,
  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body) .compose-form:has(.reply-indicator) .compose-form__buttons,
  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body) .compose-form:has(.reply-indicator) .compose-form__submit,
  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body) .compose-form:has(.reply-indicator) .character-counter {
    position: relative !important;
    z-index: 2 !important;
  }

  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body) .compose-form:has(.reply-indicator) .navigation-bar {
    min-height: 0 !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    background: transparent !important;
    align-items: center !important;
  }

  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body) .compose-form:has(.reply-indicator) .reply-indicator {
    margin-bottom: 6px !important;
    padding-bottom: 4px !important;
    background: transparent !important;
    border-bottom: 0 !important;
    overflow: visible !important;
    max-height: none !important;
  }

  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body) .compose-form:has(.reply-indicator) .reply-indicator__content,
  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body) .compose-form:has(.reply-indicator) .reply-indicator .status__content,
  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body) .compose-form:has(.reply-indicator) .reply-indicator .status__content__text {
    display: block !important;
    white-space: normal !important;
    text-overflow: clip !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    max-height: calc(1.45em * 10) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    line-height: 1.45 !important;
    padding-right: 8px !important;
  }

  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body) .compose-form:has(.reply-indicator) .reply-indicator__content *,
  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body) .compose-form:has(.reply-indicator) .reply-indicator .status__content *,
  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body) .compose-form:has(.reply-indicator) .reply-indicator .status__content__text * {
    white-space: normal !important;
    text-overflow: clip !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
  }

  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body) .compose-form:has(.reply-indicator) .reply-indicator__content::-webkit-scrollbar,
  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body) .compose-form:has(.reply-indicator) .reply-indicator .status__content::-webkit-scrollbar,
  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body) .compose-form:has(.reply-indicator) .reply-indicator .status__content__text::-webkit-scrollbar {
    width: 4px !important;
  }

  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body) .compose-form:has(.reply-indicator) .reply-indicator__content::-webkit-scrollbar-thumb,
  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body) .compose-form:has(.reply-indicator) .reply-indicator .status__content::-webkit-scrollbar-thumb,
  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body) .compose-form:has(.reply-indicator) .reply-indicator .status__content__text::-webkit-scrollbar-thumb {
    background: var(--brand) !important;
    border-radius: 999px !important;
  }

  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body) .compose-form:has(.reply-indicator) .compose-form__warning {
    display: block !important;
    position: relative !important;
    z-index: 2 !important;
    margin: 4px 0 8px 0 !important;
    padding: 6px 10px !important;
    min-height: 0 !important;
    height: auto !important;
    border-radius: 8px !important;
    border: 1px solid var(--brand) !important;
    background: var(--ui-warning-bg) !important;
    color: var(--ui-text) !important;
    line-height: 1.35 !important;
    font-size: 13px !important;
    box-shadow: none !important;
  }

  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body) .compose-form:has(.reply-indicator) .compose-form__warning,
  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body) .compose-form:has(.reply-indicator) .compose-form__warning * {
    color: var(--ui-text) !important;
    fill: currentColor !important;
    stroke: currentColor !important;
  }

  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body) .compose-form:has(.reply-indicator) .compose-form__highlightable {
    background: var(--ui-panel) !important;
    border-radius: 14px !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
    margin-top: 0 !important;
  }

  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body) .compose-form:has(.reply-indicator) .compose-form__footer,
  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body) .compose-form:has(.reply-indicator) .compose-form__actions,
  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body) .compose-form:has(.reply-indicator) .compose-form__scrollable {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body) .compose-form:has(.reply-indicator) .autosuggest-textarea__textarea {
    background: transparent !important;
    color: var(--ui-text-soft) !important;
  }

  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body) .compose-form:has(.reply-indicator) .character-counter,
  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body) .compose-form:has(.reply-indicator) .dropdown-button,
  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body) .compose-form:has(.reply-indicator) .compose-form__buttons .icon-button,
  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body) .compose-form:has(.reply-indicator) svg {
    color: var(--ui-text) !important;
    fill: currentColor !important;
    stroke: currentColor !important;
  }

  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body) .compose-form:has(.reply-indicator) .compose-form__submit .button.button--compact {
    background: var(--brand) !important;
    color: #FFFFFF !important;
    border: none !important;
    box-shadow: none !important;
  }

  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body) .compose-form:has(.reply-indicator) .navigation-bar .account.account--minimal,
  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body) .compose-form:has(.reply-indicator) .navigation-bar .account__wrapper,
  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body) .compose-form:has(.reply-indicator) .navigation-bar .account__display-name,
  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body) .compose-form:has(.reply-indicator) .navigation-bar .account__contents {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
  }

  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body) .compose-form:has(.reply-indicator) .navigation-bar .account__avatar-wrapper {
    margin: 0 8px 0 0 !important;
    padding: 0 !important;
  }

  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body) .compose-form:has(.reply-indicator) .navigation-bar .display-name,
  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body) .compose-form:has(.reply-indicator) .navigation-bar .display-name__html,
  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body) .compose-form:has(.reply-indicator) .navigation-bar .display-name__account {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.15 !important;
  }

  :is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body):has(.compose-form .reply-indicator) .compose-form .navigation-bar .account__display-name {
    pointer-events: none !important;
  }
}

@media (max-width: 768px) {
  body.theme-mastodon-bird-ui-light.app-body .ui {
    background-image: url("/custom/bg_ww.jpg") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    background-attachment: fixed !important;
  }

  body.theme-mastodon-bird-ui-dark.app-body .ui {
    background-image: url("/custom/bg_bb.jpg") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    background-attachment: fixed !important;
  }

 .sidebar__toggle__logo {display:none !important;}
 .account__bio {display:none !important;}

}

body.app-body [role="listbox"] > [role="option"][aria-selected="true"],
body.app-body .autosuggest-textarea__suggestions__item--selected,
body.app-body .autosuggest-textarea__suggestions__item--focused,
body.app-body .autosuggest__results__item--selected,
body.app-body .autosuggest__results__item--focused,
body.app-body .autosuggest__results__item.active {
  background: var(--brand) !important;
  background-color: var(--brand) !important;
  background-image: none !important;
}

.autosuggest-textarea__suggestions .autosuggest-textarea__suggestions__item.selected {
  background: var(--brand) !important;
  background-color: var(--brand) !important;
}

.autosuggest-textarea__suggestions .autosuggest-textarea__suggestions__item.selected .autosuggest-account,
.autosuggest-textarea__suggestions .autosuggest-textarea__suggestions__item.selected .display-name,
.autosuggest-textarea__suggestions .autosuggest-textarea__suggestions__item.selected .display-name__html,
.autosuggest-textarea__suggestions .autosuggest-textarea__suggestions__item.selected .display-name__account,
.autosuggest-textarea__suggestions .autosuggest-textarea__suggestions__item.selected * {
  color: #FFFFFF !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

:is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body)
.compose-form:has(.reply-indicator) .reply-indicator .status__content span,
:is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body)
.compose-form:has(.reply-indicator) .reply-indicator .status__content strong,
:is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body)
.compose-form:has(.reply-indicator) .reply-indicator .status__content em {
display: inline !important;
}
:is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body)
.compose-form:has(.reply-indicator) .reply-indicator .status__content span[style*="background"],
:is(body.theme-mastodon-bird-ui-light.app-body, body.theme-mastodon-bird-ui-dark.app-body)
.compose-form:has(.reply-indicator) .reply-indicator .status__content span[style*="background-color"] {
display: inline !important;
padding: 0 3px !important;
border-radius: 2px !important;
line-height: 1.35 !important;
}

.account__header__tabs__buttons .icon-button.active {
  filter: none !important;
}

.account__header__tabs__buttons button.icon-button.active:has(svg.icon-bell),
button.icon-button.active[aria-label*="게시물 알림 끄기"]:has(svg.icon-bell),
button.icon-button.active[title*="게시물 알림 끄기"]:has(svg.icon-bell) {
  position: relative !important;
  background: #87419E !important;
  border: 1px solid #87419E !important;
  overflow: hidden !important;
}

.account__header__tabs__buttons button.icon-button.active:has(svg.icon-bell) svg.icon-bell,
button.icon-button.active[aria-label*="게시물 알림 끄기"] svg.icon-bell,
button.icon-button.active[title*="게시물 알림 끄기"] svg.icon-bell {
  opacity: 0 !important;
  visibility: hidden !important;
}

.account__header__tabs__buttons button.icon-button.active:has(svg.icon-bell)::after,
button.icon-button.active[aria-label*="게시물 알림 끄기"]:has(svg.icon-bell)::after,
button.icon-button.active[title*="게시물 알림 끄기"]:has(svg.icon-bell)::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 18px !important;
  height: 18px !important;
  pointer-events: none !important;
  z-index: 2 !important;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M7.424 21a4.99 4.99 0 0 0 9.152 0Z'/%3E%3Cpath d='M22.392 12.549 20.656 6.826A9.321 9.321 0 0 0 2.58 7.28L1.232 12.817A5 5 0 0 0 6.09 19h11.517a5 5 0 0 0 4.785-6.451Z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}