#layout {
  display: grid;
  grid-template-columns: 350px minmax(0, 1fr);
  height: 100svh;
  overflow: hidden;

  #chatnav {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    height: 100svh;

    aside {
      padding: 15px;

      #mode_switcher {
        position: absolute;
        top: 10%;
        display: flex;
        flex-direction: column;
        width: 50px;
        height: 150px;

        &::before {
          height: 50px;
        }

        button {
          height: 50px;

          tui-icon {
            &::before {
              color: var(--tui-background-accent-1);
            }
          }
        }
      }

      #bottom_btn {
        position: absolute;
        bottom: 2%;
        width: 50px;
        height: 50px;
      }
    }

    main {
      background: var(--tui-background-base-alt);
      border-radius: 20px 0 0 20px;
      margin: 10px 0 10px 10px;
      padding: 15px;
      overflow-y: scroll;
    }
  }

  #content {
    width: 100%;
    height: 100svh;
    padding: 10px 10px 10px 0;

    #content_tint {
      border-radius: 0 20px 20px 0;
      height: 100%;
      background: var(--tui-background-neutral-2);
    }
  }
}

#layout_mobile {
  height: 93svh;

  #navigation {
    height: 100%;
    grid-template-rows: 1fr 50px;

    button {
      &.disabled {
        opacity: 0.5;
      }
    }

    #navigation_content {
      overflow-y: scroll;
      height: 100%;
      padding: 20px;
    }
  }
}

::ng-deep tui-dialog[data-appearance~=big] {
  height: 90svh;
  width: 90svw !important;
}