.main {
  justify-content: normal;
}

.chatroom {
  --chatroom-background-color: var(--box-bg-color);
  --chatroom-border: 2px solid var(--box-border-color);
  --chatroom-border-radius: 15px;
  --chatroom-message-padding: 10px;
  min-width: 55%;

  @media (orientation: portrait) {
    min-width: 100%;
  }

  h2 {
    text-align: center;
  }

  .chatroom-message-box {
    padding: var(--chatroom-message-padding);
    border: var(--chatroom-border);
    background-color: var(--chatroom-background-color);
    border-radius: var(--chatroom-border-radius);

    p {
      margin: 0;
    }
  }

  #chatroom-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: calc(var(--content-font-size), * 0.75);

    .status-left {
      display: flex;
      align-items: center;
      gap: 0.5em;
    }

    .status-dot {
      height: 10px;
      width: 10px;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.3s ease;
    }

    .connected {
      background-color: #2ecc71;
      box-shadow: 0 0 8px #2ecc71;
      animation: pulse 2s infinite;
    }

    .disconnected {
      background-color: #e74c3c;
      box-shadow: 0 0 5px #e74c3c;
    }

    .status-right {
      position: relative;
      display: flex;
      align-items: center;
      gap: 0.5em;
      cursor: help;
      border-radius: 15px;
      padding: 5px;

      &:hover,
      &:focus {
        background: rgba(0, 0, 0, 0.1);

        .user-label-hover {
          display: inline;
        }

        .user-list-popup {
          visibility: visible;
          opacity: 1;
          transform: translateY(0);
        }
      }

      .user-label-hover {
        display: none;
        font-size: calc(var(--content-font-size), * 0.9);
        color: var(--secondary-color);
      }

      .user-list-popup {
        visibility: hidden;
        opacity: 0;
        position: absolute;
        top: 130%;
        right: 0;
        width: 150px;
        background: white;
        border: 1px solid #ddd;
        border-radius: 8px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
        z-index: 100;
        transition: all 0.2s ease;
        transform: translateY(-10px);

        #user-list-items {
          list-style: none;
          max-height: 200px;
          margin: 0;
          overflow-y: auto;
          padding: 0;
          text-align: center;
        }
      }
    }
  }

  #chat-box {
    display: flex;
    flex-direction: column-reverse;
    overflow-y: auto;
    width: 100%;
    box-sizing: border-box;
    height: 10em;
    max-height: 10em;
    margin: 0;

    #chat-messages {
      display: flex;
      flex-direction: column;
      list-style-type: none;
      padding: 0;
      margin: 0;
      color: var(--box-color);
      span.system {
        color: gray;
        font-style: italic;
      }
    }
  }

  #message-box {
    display: flex;
    gap: 1em;
    justify-content: center;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    margin: 1em 0;

    #message-input {
      width: 100%;
      font-size: var(--content-font-size);
      border: none;
      outline: none;
      background-color: transparent;
      color: var(--box-color);
    }
  }

  input[type="text"] {
    font-size: var(--content-font-size);
    border: none;
    outline: none;
    background-color: transparent;
  }

  #change-user-form {
    display: flex;
    flex-direction: column;

    h4 {
      margin-bottom: 1em;
      text-align: center;
    }

    #username {
      width: 15ch;
    }

    .btn-container {
      padding: 0;
    }
  }

  .btn-container {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 1em;
    max-width: 100%;
    padding: 1em 0;
  }

  button {
    background-color: var(--secondary-color);
    color: var(--header-color);
    font-size: var(--content-font-size);
    padding: 0.2em 0.5em;
    cursor: pointer;
    border-radius: var(--chatroom-border-radius);
  }

  #how-this-works {
    font-size: calc(var(--content-font-size) * 0.75);
    h2 {
      text-align: left;
    }
    @media (orientation: portrait) {
      max-width: 80%;
    }
  }

  @keyframes pulse {
    0% {
      transform: scale(0.95);
      opacity: 0.8;
    }
    70% {
      transform: scale(1.1);
      opacity: 1;
    }
    100% {
      transform: scale(0.95);
      opacity: 0.8;
    }
  }
}