@layer components {
  .junk-drawer {
    background-color: var(--color-canvas);
    block-size: 3ch;
    border-top: 1px solid var(--color-ink-light);
    box-shadow: 0px 0px 25px 10px oklch(var(--lch-ink) / 6%);
    font-size: var(--font-medium-responsive);
    inline-size: 100vw;
    inset-block-end: 0;
    inset-inline-start: 50%;
    margin: 0 auto;
    max-inline-size: 100%;
    position: fixed;
    translate: -50%;
    z-index: 3;

    /* https://easingwizard.com/ */
    &:has([data-ui--expander-allows-animations-value="true"]) {
      transition-property: block-size;
      transition-timing-function: cubic-bezier(0, 1.15, 0.5, 1);
      transition-duration: 400ms;
    }

    &:has(#chat_room_container[aria-expanded="true"]) {
      block-size: 15ch;
      container-type: size;

      &.junk-drawer--expanded {
        block-size: 90vh;
      }

      .junk-drawer__resize {
        display: inherit !important;
      }

      .junk-drawer__toggle .icon--caret-up {
        display: none;
      }
    }

    &:has(#chat_room_container[aria-expanded="false"]) {
      .junk-drawer__scroll {
        block-size: 2ch;
        pointer-events: none;
      }

      .comment__options-btn {
        display: none;
      }

      .junk-drawer__toggle .icon--remove {
        display: none;
      }
    }
  }

  .junk-drawer__label {
    display: block;
    position: absolute;
    inset-inline-start: var(--inline-space-double);
    transform: translate(0, -50%);
    white-space: nowrap;
    z-index: 3;
  }

  .junk-drawer__toggles {
    inset-block-start: 0;
    position: absolute;
    right: var(--inline-space);
    transform: translate(0, -50%);
    z-index: 3;
  }

  .junk-drawer__toggle--full-width {
    --btn-border-radius: 0;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    cursor: pointer;
  }

  .junk-drawer__resize {
    display: none !important;

    .junk-drawer--expanded & {
      .icon {
        transform: rotate(180deg);
      }
    }
  }

  .junk-drawer__container {
    background-color: var(--color-canvas);
    block-size: 100cqb;
    border-radius: 1em 1em 0 0;
    display: grid;
    grid-template-rows: 1fr auto;

    .trix-dialog {
      inset-block: auto 3em;
    }
  }

  .junk-drawer__scroll {
    overflow-y: scroll;
    overscroll-behavior: contain;
    z-index: 1;
  }

  .junk-drawer__content,
  .junk-drawer__composer {
    margin-inline: auto;
    max-inline-size: 67ch;
    padding: var(--block-space-half) var(--inline-space);

    .trix-content {
      img, video, embed {
        block-size: 20rem;
      }
    }
  }

  .junk-drawer__composer {
    inline-size: 100%;

    .input--textarea {
      max-block-size: 20ch;
      min-block-size: 3.5rem; /* Safari fix */
    }

    trix-toolbar {
      background-color: var(--color-bg);
      inset: auto auto 8px 8px;
      position: absolute;
      z-index: 1;
    }

    /* Collapsed */
    &[aria-expanded="false"] {
      .input--textarea {
        --input-padding: var(--block-space) var(--inline-space);
      }

      trix-toolbar {
        display: none !important;
      }
    }

    &[aria-expanded="true"] {
      .input--textarea {
        padding-block-end: var(--block-space-triple);
      }
    }
  }

  .junk-drawer__toolbar-buttons {
    inset-block-end: 0.5em;
    inset-inline-end: 0.5em;
    position: absolute;
  }

  .junk-drawer__highlight {
    border: 2px solid red;
  }

  .junk-drawer__jump-to-bottom-button {
    --btn-icon-size: 0.85em;
    animation: slide-up 0.3s ease both;
    inset-block-end: var(--block-space-half);
    position: absolute;
  }

  :where(#body):has(#main #chat_room) {
    grid-template-rows: auto auto 1fr;
  }

  :where(#main):has(#chat_room) {
    container-type: size;
    padding-block-end: 0;
  }

  :where(#footer):has(#chat_room_container) {
    z-index: 10;
  }
}