Twitch Vertical Theatre by laundmo

/* ==UserStyle==
@name           Twitch Vertical Theatre
@namespace      twitch.tv
@version        1.0.0
@description    Puts the chat below the player once player would get significantly smaller to make room for the chat. Ideal for vertical monitors or multitasking.
@author         laund
==/UserStyle== */
/*Inspired by https://userstyles.world/style/2482 but rewritten*/
@-moz-document domain("twitch.tv") {
  @media (max-aspect-ratio: 9/5.5) {
    .persistent-player--theatre {
      width: 100vw!important;
      height: 56.25vw!important;
    }

    .channel-leaderboard {
      display: none;
    }

    .right-column--theatre.right-column--beside.right-column--collapsed > .right-column__toggle-visibility {
      position: fixed;
      top: 56.25vw !important;
      left: -100vw;
      opacity: 1;
      div,
      button {
        width: 100vw !important;
        height: calc(100vh - 56.25vw)!important;
      }

      background-color: #1f1f23;
      :hover {
        background-color: #0f0f11;
      }
    }

    .right-column--theatre:not(.right-column--collapsed) {
      position: fixed;
      top: 56.25vw !important;
      width: 100%!important;
      height: calc(100vh - 56.25vw)!important;
      .channel-root__right-column {
        width: 100%;
      }

      .chat-room {
        justify-content: space-between;
      }

      .chat-input {
        padding: 0.1rem !important;
        display: flex !important;
      }

      .chat-input > div:nth-child(2) {
        display: flex;
        justify-content: space-evenly;
        align-content: stretch;
        flex-grow: 1;
        div:nth-child(1) {
          flex-grow: 2;
          flex-shrink: 0;
        }
      }

      .chat-input__textarea {
        display: flex;
        margin: 0px !important;
      }

      .chat-input__textarea > div:nth-child(3) {
        > div {
          padding: 2px !important;
        }

        > div > div > button {
          height: 20px !important;
          width: 20px !important;
        }
      }

      .chat-wysiwyg-input__box {
        flex-grow: 0 !important;
      }

      .chat-wysiwyg-input__placeholder,
      .chat-wysiwyg-input__editor {
        padding-top: 0.3rem !important;
        padding-bottom: 0.3rem !important;
        padding-left: calc(20px + 0.5rem) !important;
        max-width: 70vw;
      }

      .chat-input__buttons-container {
        margin-top: 0 !important;
      }

      .chat-input__badge-carousel {
        padding: 0 !important;
        padding-top: 0.15rem !important;
        margin-left: 0.3rem;
      }

      .chat-input__badge-carousel > div > div > div > div > button {
        line-height: 1px !important;
        height: 20px;
        width: 20px;
      }

      .chat-input__input-icons {
        margin-right: 10rem;
      }

      .stream-chat-header {
        background: transparent !important;
        border: none !important;
        height: 5rem;
        margin-bottom: -5rem;
        > div:nth-child(1) {
          display: none !important;
        }
      }

      .right-column__toggle-visibility,
      .celebration__overlay,
      .community-highlight-stack__scroll-content--disable,
      .community-highlight-stack__backlog-card,
      .paid-pinned-chat-message-list,
      .chat-room__content > div:has(.marquee-animation),
      .chat-room__content > div:has(.channel-leaderboard-header-rotating__users) {
        display: none !important;
      }

      .chat-line__message,
      .chat-line__moderation,
      .chat-line__status {
        padding: .3rem 1rem;
      }
      .user-notice-line {
        padding: .2rem .7rem !important;
        margin: 0 !important;
        .sub-goal-progress-bar{
          padding: 0 !important;
        }
        .chat-line--inline {
          padding: 0 !important;
        }
      }
      
      div:has(> div.tw-balloon) {
        right: 0;
        left: unset !important;
      }
    }
  }
}