.site-player-view {
  position: relative;

  #site-video-container {
    align-self: auto;

    video {
      width: 100%;
      min-height: 540px;
      max-height: 720px;
    }
  }

  #site-chat-container {
    align-self: stretch;

    #chat-input-form {
      textarea.uk-textarea {
        padding: 2px 6px;
        resize: none;
      }
    }

    #chat-message-list-wrapper {
      position: relative;
      flex: 1;

      #chat-message-list {
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        overflow: auto;
        box-shadow: 0 0 8px rgba(0,0,0, 0.8) inset;
      }

      .chat-message-menu {
        position: absolute;
        display: none;
        right: 4px; bottom: 20px; left: 4px;
        text-align: center;

        &.chat-menu-visible {
          display: block;
        }

        button.chat-scroll-return {
          padding: 4px 8px;
          background: transparent;
          color: #c8c8c8;
          border: solid 2px #c8c800;
          border-radius: 8px;
          outline: none;

          &:hover {
            border-color: #ffff00;
            color: white;
          }
          &:active {
            border-color: transparent;
          }
        }
      }
    }
  }
}

/*
 * Mobile view layout
 */
@media screen and (max-width: 959px) {

  body[data-current-view="channel-broadcast"] {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;

    .site-player-view {
      position: absolute;
      top: 64px; right: 0; bottom: 0; left: 0;
      overflow: hidden;
  
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
  
      #site-video-container {
        flex: 0;
      }
  
      #site-chat-container {
        position: relative;
        flex: 1;
  
        #chat-message-list {
          flex: 1;
        }
  
        #chat-input-form {
          flex: 0;
        }
      }
    }
  }
}