static/styles.css

/* ===== Fullscreen base ===== */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}

/* ===== Fullscreen chat container, but center the whole stack inside ===== */
#chat-container {
  height: 100vh;         /* full screen */
  width: 100vw;
  background-color: #f9f9f9;

  /* Center the stack (h1, history, form, cta) both vertically and horizontally */
  display: grid;
  grid-auto-flow: row;
  /* four rows: title, history, form, cta; auto heights so the whole stack can be centered */
  grid-template-rows: auto auto auto auto;
  align-content: center;  /* vertical centering of the whole stack when there's extra space */
  justify-content: center;/* horizontal centering */

  /* remove old card chrome in fullscreen */
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: left;
}

/* Constrain inner width so it feels like a centered chat app */
#chat-container > * {
  width: min(600px, 92vw);
}

/* ===== Header (your <h1>) ===== */
#chat-container > h1 {
  margin: 0 0 10px;
  padding: 16px 0 0;
  text-align: center;
}

/* ===== Chat history: fixed min height, scroll if long ===== */
#chat-history {
  /* keep a comfy window while centered */
  min-height: 320px;
  max-height: 60vh;         /* grows up to 60% of viewport, then scrolls */
  overflow-y: auto;

  padding: 16px 20px;
  margin: 0;
  background: #fff;
  border: 2px solid #ccc;
  border-radius: 6px;

  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ===== Bubbled messages (same look) ===== */
.chat-message {
  display: flex;
  margin-bottom: 6px;
}
.chat-message.user { justify-content: flex-end; }
.chat-message.assistant { justify-content: flex-start; }

.chat-message .bubble {
  max-width: 75%;
  padding: 10px 14px;
  border-radius: 18px;
  line-height: 1.4;
  font-size: 15px;
  word-wrap: break-word;
  white-space: pre-wrap;
  border: 1px solid #ddd;
  background: #fff;
}
.chat-message.user .bubble {
  background: #007bff;
  color: #fff;
  border-color: #007bff;
  border-bottom-right-radius: 4px;
}
.chat-message.assistant .bubble {
  background: #e9ecef;
  color: #000;
  border-color: #dfe3e6;
  border-bottom-left-radius: 4px;
}

/* Optional small role label inside bubbles */
.chat-message .bubble strong {
  display: block;
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
}

/* ===== Input row (sits below history, still centered overall) ===== */
#chat-form {
  display: flex;
  gap: 10px;
  padding: 12px 0;
  border-top: 0;         /* no sticky/footer bar; stays in the centered stack */
  background: transparent;
}

#user-input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
}

/* Buttons (same as before) */
button, .btn {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button:hover, .btn:hover { background-color: #0056b3; }

/* CTA row (Logout) */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 4px 0 16px;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  #chat-container > * { width: 94vw; }
  #chat-history { max-height: 55vh; padding: 12px 14px; }
  #chat-form { padding: 10px 0; }
}
@media (max-width: 480px) {
  button, .btn { width: 100%; padding: 12px; }
}