.tipsy {
  h1 {
    text-align: center;

    @include font-header3;

    margin-bottom: 20px;
  }

  p {
    text-align: center;

    @include font-body;

    color: var(--neutral-06);
  }
}

.login {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 32px;

  button {
    width: 285px;
    height: 44px;
  }

  .explore {
    margin-top: 16px;

    @include font-label;

    cursor: pointer;
    color: var(--primary-06);
  }
}

.rightPanel {
  :global {
    .ant-input-affix-wrapper {
      margin: var(--basePadding4) 0;
      height: 40px;
      border-radius: 50px;

      &:hover {
        border: none;
        border-inline-end: none;
        box-shadow: none;
      }

      &,
      input {
        background-color: var(--neutral-02);
      }

      svg {
        width: 24px;
        height: 24px;
        fill: var(--neutral-06);
      }
    }
  }

  .flycat,
  .friends,
  .trending {
    margin-bottom: var(--basePadding8);

    h2 {
      @include font-subheader2;
    }
  }

  .flycat {
    .item {
      display: flex;
      align-items: flex-start;

      p {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0;
        margin-bottom: var(--basePadding3);
      }

      span {
        white-space: normal;
        display: inline-block;
        margin-left: var(--basePadding3);
        border-radius: var(--baseBorderRadius2);
        background-color: var(--primary-06);
        color: var(--neutral-white);
        padding: 0 var(--padding);

        @include font-footnote;
      }
    }

    > a {
      margin-bottom: var(--basePadding3);
      color: var(--primary-06);
      text-decoration: none;
    }
  }

  .friends {
    max-height: 400px;
    overflow: auto scroll;

    .friend {
      display: flex;
      justify-content: space-between;
      width: auto;
      overflow-x: auto;
      margin-bottom: var(--basePadding3);

      > span {
        width: 24px;
        height: 24px;
        flex: none;
      }

      .info {
        display: flex;
        justify-content: flex-start;
      }

      .friendInfo {
        width: 100%;
        margin-left: var(--basePadding2);

        h3,
        p {
          margin: 0;
        }

        h3 {
          @include font-label-bold;

          color: var(--neutral-09);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: 120px;
        }

        p {
          @include font-footnote;

          color: var(--neutral-06);
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: 120px;
        }
      }

      .follow {
        height: 24px;
        padding: {
          top: 0;
          bottom: 0;
        }

        span {
          @include font-footnote;
        }
      }
    }
  }

  .trending {
    display: flex;
    flex-direction: column;

    h2 {
      margin-top: 0;
    }

    a {
      margin-bottom: var(--basePadding2);
      text-decoration: none;

      @include font-label;

      color: var(--primary-06);
    }
  }
}

.msgFilter {
  display: flex;
  padding: 16px 20px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;
  position: sticky;
  top: 64px; 
  z-index: 10;
  background: var(--neutral-01);

  :global {
    .ant-segmented-group {
      gap: 12px;
      background: var(--neutral-01);
      display: flex;
    }

    .ant-segmented-item {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      height: 32px;
      padding: 5px 24px;
      gap: 10px;
      border-radius: 20px;
      background: var(--neutral-02, #ededed);
    }

    .ant-segmented-item-selected {
      border-radius: 20px;
      background: var(--primary-03, #c0e085);
    }
  }

  overflow-x: scroll;
}

.mobileFilter {
  position: sticky;
  top: 64px; 
  background: var(--neutral-01);
  z-index: 10;

  :global {
    .ant-segmented {
      width: 100%;
    }

    .ant-segmented-group {
      width: 100%;
      display: flex;
      justify-content: flex-start;
    }

    .ant-segmented-item {
      flex: 1;
      padding: 2px 5px;
    }
  }

  overflow-x: scroll;
}
