/* Keep authentication scrollable while the signed-in application remains viewport-bound. */
body {
  overflow-x: hidden;
  overflow-y: auto;
}

body:has(.app:not(.hidden)) {
  overflow: hidden;
}

.auth {
  min-height: 100svh;
  height: auto;
}

.app {
  overflow: hidden;
}

/* The avatar begins on the same horizontal line as the message bubble. */
.message {
  align-items: flex-start;
}

.message-avatar {
  margin-top: 19px;
}

.message-main {
  min-width: 0;
  display: grid;
  grid-template-rows: 15px auto 15px;
  row-gap: 4px;
  align-items: start;
}

.sender,
.time {
  width: 100%;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  line-height: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sender {
  padding: 0 3px 1px;
}

.time {
  padding: 0 3px;
}

.bubble {
  min-width: 44px;
}

@media (max-width: 760px) {
  .auth {
    min-height: 100svh;
    height: auto;
    overflow: visible;
  }

  .auth-brand {
    min-height: 240px;
  }

  .auth-panel {
    min-height: 570px;
    padding-bottom: max(42px, env(safe-area-inset-bottom));
  }

  .auth-form {
    align-self: start;
  }

  .messages {
    overflow-x: hidden;
  }

  .message-main {
    max-width: calc(100% - 48px);
  }
}

@media (max-width: 390px) {
  .auth-brand {
    min-height: 210px;
  }

  .auth-brand h1 {
    margin-top: 35px;
    font-size: 42px;
  }

  .auth-panel {
    min-height: 550px;
    padding-inline: 16px;
  }
}