/* Page reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { 
  height: 100%; 
  font-family: Arial, sans-serif; 
  background-color: var(--background);
  overflow: hidden;
}

#chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--chat-bg);
  /* Keep it in center of screen for wide-screen views */
  width: 100%;
  max-width: 770px;
  margin: 0 auto;
}

#messages {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
}

.message {
  display: flex;
  margin-bottom: 10px;
}

.message.bot .bubble { background: var(--bot-bubble); }
.message.user .bubble { background: var(--user-bubble); }

.bubble {
  max-width: 70%;
  padding: 10px 15px;
  border-radius: var(--border-radius);
  font-size: var(--font-size);
  color: var(--chat-text);
  word-wrap: break-word;
  display: flex;
  align-items: center;
}

.message.user { justify-content: flex-end; }
.message.user .bubble { border-bottom-right-radius: 0; }
.message.bot .bubble { border-bottom-left-radius: 0; }

/* Keep typing bubble height stable */
.message.typing .bubble {
  /* min-width: 90px; */
  min-height: 38px;
}

/*For animated dots and stuff*/
.typing-dots {
  display: flex;
  align-items: center;
  gap: 4px;
}

.typing-dots span {
  width: 6px;
  height: 6px;
  background: var(--chat-text);
  border-radius: 50%;
  opacity: 0.2;
  animation: typingBlink 1.4s infinite;
}

.typing-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typingBlink {
  0%, 80%, 100% { opacity: 0.2; }
  40% { opacity: 1; }
}

#input-form {
  display: flex;
  padding: 10px;
  background: var(--background);
  border-top: 1px solid var(--chat-text);
}

#message-input {
  flex: 1;
  padding: 10px;
  font-size: var(--font-size);
  border: 1px solid #ccc;
  border-radius: 20px;
  outline: none;
}

#input-form button {
  margin-left: 10px;
  padding: 0 20px;
  font-size: var(--font-size);
  border: none;
  border-radius: 20px;
  background: var(--button-color);
  color: var(--text-color);
  cursor: pointer;
}

#input-form button:hover {
  background: var(--button-hover);
}

#app {
  height: 100vh;
}

#main {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#content {
  flex: 1;
  min-height: 0; 
  display: flex;
}

#chat-container {
  flex: 1;
  min-height: 0;  
}