@use "/src/styles/utils.scss";

.chat {
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
}

.input {
  width: 100%;
  margin-top: auto;
  background-color: hsla(0, 0%, 100%, 0.07);
  padding: 8px;
  display: flex;
}

.dialogs {
  position: absolute;
  padding: 8px 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  .item {
    vertical-align: baseline;
    .name {
      font-weight: 500;
      line-height: 1.375rem;
    }
    .time {
      font-size: 11px;
      opacity: 0.8;
      margin-left: 8px;
    }
    .content {
      font-size: 13px;
      color: #ccc;
      margin-top: 2px;
    }
    padding: 8px 8px;
    margin: 0 10px;
    border-radius: 8px;
    transition: 0.2s;
    &:hover {
      background-color: hsla(0, 0%, 100%, 0.07);
    }
  }
}
