body.jsxc-fullscreen {
  overflow: hidden;

  #jsxc-roster {
    border: 0;
    border-top: 62px solid #2a4163;
    width: 100%;
    z-index: 50;
  }

  #jsxc-window-list {
    clip: auto;
    z-index: 100;

    .jsxc-window-item {
      bottom: 0;
      height: auto;
      left: 0;
      margin: 0;
      position: fixed;
      right: 0;
      top: 0;
      width: auto;

      &.jsxc-minimized {
        display: none;
      }
    }

    .jsxc-window {
      background-color: $main-bg;
      border: 0;
      border-radius: 0;
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
    }

    .jsxc-window-fade {
      bottom: 0;
      height: auto;
      left: 0;
      position: absolute;
      right: 0;
      top: 62px;
      width: auto;
    }
  }

  .jsxc-menu__button {
    min-width: 42px;
    width: auto;
  }

  .jsxc-bar {
    height: 62px;
    padding-left: 0.5em;
    width: auto;

    &__action-entry {
      background-size: 1.4em;
      height: 62px;
      width: 42px;

      &.jsxc-close {
        font-size: 2.5em;
        line-height: 62px;
      }

      .jsxc-menu__more--light {
        background-size: 1.2em;
      }

      .jsxc-icon {
        min-width: 42px;
      }

      * {
        font-size: 1em;
      }
    }
  }

  .jsxc-chatmessage {
    margin: 0.2em 1.5em;

    &:first-child {
      margin-bottom: 2em;
    }

    &::after {
      content: none;
    }

    &__footer {
      padding-top: 0.8em;
    }

    &.jsxc-out {
      background-color: $chatmessage-out-bg;
    }

    &.jsxc-in {
      background-color: var(--jsxc-message-bg);

      &.jsxc-light .jsxc-chatmessage__footer {
        color: $bg-darker;
      }

      &.jsxc-dark .jsxc-chatmessage__footer {
        color: $bg-dark;
      }
    }

    &.jsxc-probably_out,
    &.jsxc-probably_in {
      border: 1px solid $bg-dark;
    }
  }

  .jsxc-send-area {
    padding: 0;
  }

  .jsxc-send-area {
    .jsxc-menu--emoticons,
    .jsxc-file-transfer,
    .jsxc-transfer {
      background-size: 1.8em;
      height: 62px;
      width: 62px;
    }

    .jsxc-transfer-icon {
      background-size: 1.8em;
      height: 62px;
    }
  }

  .jsxc-message-input {
    background-color: var(--jsxc-color-background-darker);
    border-radius: 2em;
    color: var(--jsxc-color-main-text);
    line-height: 1.4em;
    margin-right: 1em;
    padding: 0.6em 2em 0.4em;
  }

  .jsxc-highlight .jsxc-window-bar {
    background-color: $window-bar-bg;
  }

  .jsxc-roster-toggle {
    display: none;
  }

  #jsxc-roster>.jsxc-bottom li {
    height: 42px;
    line-height: 42px;
  }

  .jsxc-bar__action-entry {
    margin: 0 3px;
  }

  .jsxc-dialog-wrapper {
    background-color: $main-bg-translucent;
  }

  .jsxc-dialog {
    border: 0;
    min-width: auto;
    padding-top: 45px;
  }
}

body.jsxc-fullscreen.jsxc-two-columns {
  @media(min-width: 740px) {
    #jsxc-roster {
      width: 33%;
    }

    #jsxc-window-list {
      background-color: $bg-darker;
      bottom: 0;
      left: 0;
      right: 33%;
      top: 0;

      &::after {
        background-image: url("../images/jsxc_white.svg");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
        bottom: 0;
        content: "";
        left: 0;
        opacity: 0.3;
        position: absolute;
        right: 0;
        top: 0;
        z-index: -1;
      }

      .jsxc-window-item {
        right: 33%;
      }
    }
  }
}

.jsxc-omemo-device {
  box-shadow: 0 0 2px #a1a1a1;
  margin-bottom: 15px;
  padding: 10px;

  &[data-trust="unknown"] {
    border: 3px solid $error-bg;
  }

  &-id {
    font-size: 0.7em;
    opacity: 0.7;
  }

  &-last-used {
    float: right;
    font-size: 0.7em;
    opacity: 0.7;
  }

  &-trust {
    display: inline;

    &[data-trust="unknown"] {
      color: $error-bg;
    }

    &[data-trust="recognized"] {
      color: $warning-bg;
    }

    &[data-trust="confirmed"] {
      color: $success-bg;
    }

    &[data-trust="ignored"] {
      color: #999;
    }
  }

  &-action {
    float: right;
  }
}

.jsxc-qr-code {
  label {
    cursor: zoom-in;
  }

  input[type="checkbox"] {
    display: none;

    &:checked + img {
      max-width: none;
    }
  }

  img {
    border: 1px solid var(--jsxc-color-border-dark);
    color: var(--jsxc-color-error);
    font-size: 0.7em;
    max-width: 30px;
  }

  &-own,
  &-peer {
    margin-bottom: 1em;
  }

  &-desc-own,
  &-desc-peer {
    display: inline-block;
    font-size: 0.7em;
    margin-left: 2em;
    opacity: 0.7;
  }
}