/* Container for the chat log */
  #messagearea {
    max-width: 720px;
    margin: 20px auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 12px; /* Space between consecutive message bubbles */
    height: 320px; /* Leave room for the input box inside actionarea */
    overflow-y: auto; /* Allow scrolling if text overflows */
  }

  /* Base styling for all chat bubbles */
  .user-message, .computer-message {
    max-width: 70%; /* Prevents long messages from stretching full width */
    padding: 10px 16px;
    border-radius: 18px;
    font-size: 15px;
    line-height: 1.4;
    word-wrap: break-word;
  }

  /* User message bubble (Aligned right, deep blue background) */
  .user-message {
    background-color: #113a5d;
    color: white;
    align-self: flex-end;
    border-bottom-right-radius: 4px; /* Distinct asymmetric chat bubble tail */
  }

  /* Computer/AI message bubble (Aligned left, light blue background, black text) */
  .computer-message {
    background-color: #99cdff; 
    color: black;
    align-self: flex-start;
    border-bottom-left-radius: 4px; /* Distinct asymmetric chat bubble tail */
  }

  /* Reset margin on the paragraphs inside bubbles for tight fit */
  .user-message p, .computer-message p {
    margin: 0;
  }

  /* The main container matching the AI chat box style */
  .chat-input-container {
    display: flex;
    align-items: center;
    background-color: white; 
    border: 2px solid #99cdff; 
    border-radius: 26px;       /* Gives it that smooth, rounded pill shape */
    padding: 6px 12px 6px 18px;
    max-width: 720px;          /* Prevents the box from getting too wide on desktop */
    margin: 20px auto;          /* Centers the container horizontally */
    box-shadow: 0 4px 12px rgba(17, 58, 93, 0.15);
  }

  /* Styling the text input to be borderless and fill space */
  .chat-input-container input[type="text"] {
    flex-grow: 1;              /* Takes up all available width left of the button */
    border: none;
    background: transparent;
    font-family: "Kumbh Sans", sans-serif;
    font-size: 16px;
    color: black;
    outline: none;             /* Removes the default browser input border on click */
    padding: 10px 0;
  }

  /* Placeholder text styling */
  .chat-input-container input::placeholder {
    color: #113a5d;
    opacity: 0.6;
  }

  /* The send/submit button styling */
  .chat-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #113a5d; /* Light blue accent button */
    color: white;
    border: none;
    border-radius: 50%;        /* Makes the button a perfect circle */
    width: 36px;
    height: 36px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    margin-left: 8px;
  }

  /* Subtle hover and click effects for the button */
  .chat-submit-btn:hover {
    background-color: #99cdff;
    color: #113a5d;
  }
  
  .chat-submit-btn:active {
    transform: scale(0.95);
  }