/* forum-styles.css */

.forum-main {
    color: #ffffff;
    background-color: #000000;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100vw;
    box-sizing: border-box;
    background-size: cover;
    background-position: center;
  }
  
  .forum-header {
    width: 100%;
    padding: 2vh;
    background-color: #000000;
    color: #add8e6; /* Light blue color */
    text-align: center;
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 0;
  }
  
  .forum-submenu {
    width: 100%;
    padding: 1vh 2vh;
    background: rgba(0, 0, 0, 0.8);
    text-align: center;
    margin-top: 0;
  }
  
  .forum-rooms {
    display: flex;
    justify-content: center;
    gap: 2vh; /* Increased gap for better spacing */
    margin-top: 0;
    flex-wrap: wrap;
  }
  
  .room-button {
    background-color: #317e78;
    color: #ffffff;
    border: 2px solid #317e78;
    border-radius: 2vh;
    padding: 1vh 2vh;
    font-size: 1.1rem;
    cursor: pointer;
  }
  
  .room-button:hover {
    background-color: #19403d;
  }
  
  .forum-content {
    flex-grow: 1;
    width: 90%;
    padding: 3vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    border: 3px solid #ffffff; /* Increased border width */
  }
  
  .room-content {
    background: rgba(0, 0, 0, 0.6);
    padding: 2vh;
    border-radius: 1vh;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }
  
  .room-title {
    color: #add8e6; /* Light blue color for room name */
    text-align: center;
    margin-bottom: 2vh;
    font-size: 2rem;
  }
  
  .message-item {
    background: #1c1c1c;
    color: #ffffff;
    padding: 1vh;
    margin-bottom: 1vh;
    border-radius: 0.8vh;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border: 1px solid #ffffff;
  }
  
  .message-header {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 1vh;
    font-size: 1.25rem;
    color: white
  }
  
   .message-header.username {
    color: #228ec0;
  }
  
  .username {
    font-weight: bold;
    color:#228ec0
  }
  
  .timestamp {
    font-style: italic;
    color: rgb(157, 167, 151)
  }
  
  .message-text {
    margin: 0;
    font-size: 1.25rem;
  }
  
  .reply-button {
    align-self: flex-end;
    margin-top: 1vh;
    background-color: #167089;
    color: #ffffff;
    border: none;
    border-radius: 1vh;
    padding: 0.3vh 0.6vh;
    cursor: pointer;
  }
  
  .reply-button:hover {
    background-color: #19403d;
  }

/* forum-styles.css additions */

  .message-input-section {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-sizing: border-box;
    width: 100%;
    gap: 1vh; /* Spacing between toolbar and editor */
    background-color: black;
    padding: 1vh;
  }
  
  .ql-editor {
    flex-grow: 1;
    text-size: 1.25rem;
  }
  
  .message-input {
    flex-grow: 1;
    padding: 2vh;
    border-radius: 1vh;
    border: 1px solid #cccccc;
    font-size: 1.25rem;
    /* margin-right: 8vh; */
    box-sizing: border-box;
    min-height: 15vh; 
  }
  
  .send-button {
    background-color: #13a97c;
    color: #ffffff;
    border: none;
    border-radius: 1vh;
    padding: 2vh 4vh;
    cursor: pointer;
  }
  
  .send-button:hover {
    background-color: #19403d;
  }
  
  .messages-container {
    width: 100%;
    margin-bottom: 5vh; /* Ensure space above input section */
    overflow-y: auto;
    padding-bottom: 1vh;
    box-sizing: border-box;
  }