app/page.module.css

/* Main container */
.main {
  display: flex;
  flex-direction: column;
  height: 100vh; /* Full viewport height */
  overflow: hidden;
}

/* Messages container */
.messages {
  flex-grow: 1;
  overflow-y: scroll; /* Allows scrolling */
  padding: 10px;
  margin-bottom: 60px; /* Space for the input area */
}

.messages pre, .messages code {
  white-space: pre-wrap; /* Wraps the text */
  word-break: break-word; /* Breaks words at the end of the line */
  overflow-wrap: break-word; /* Ensures long words are wrapped */
}

/* Individual message styling */
.message {
}

/* Input container styling */
.inputContainer {
  background-color: #aaa; /* Base color */
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 50%, transparent 50%),
                    linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 2px 2px, 4px 4px;
  position: fixed; /* Fixed at the bottom */
  bottom: 0; /* Align to bottom */
  left: 0; /* Align to left */
  right: 0; /* Align to right */
  display: flex;
  justify-content: space-between;
  padding: 10px;
  z-index: 1000; /* Ensure it's above other content */
}

/* Form styling */
.form {
  display: flex;
  width: 100%;
}

/* Input field styling */
.input {
  flex-grow: 1; /* Input takes up available space */
  margin-right: 10px; /* Spacing between input and button */
  font-size: 16px; /* Prevent zoom on mobile browsers */
}

/* Button styling */
.button {
  /* Add specific styles for the button appearance here */
}