:root {
  --chat-azul: #14213d;
  --chat-coral: #ff6b6b;
  --chat-verde: #00c49a;
  --chat-fondo: #f8f9fa;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background: #fff;
  color: var(--chat-azul);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.chat-shell {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  padding: 1rem;
}

.chat-title {
  margin: 0 0 1rem;
  font-size: clamp(1.25rem, 5vw, 1.75rem);
  font-weight: 700;
  text-align: center;
}

.chatbox {
  flex: 1 1 auto;
  min-height: 280px;
  max-height: calc(100vh - 155px);
  overflow-y: auto;
  padding: 0.9rem;
  border: 1px solid #d8dde3;
  border-radius: 0.75rem;
  background: var(--chat-fondo);
  scroll-behavior: smooth;
}

.chat-message {
  margin: 0 0 0.8rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.chat-message:last-child {
  margin-bottom: 0;
}

.chat-sender {
  font-weight: 700;
}

.chat-message--user .chat-sender {
  color: var(--chat-coral);
}

.chat-message--assistant .chat-sender {
  color: var(--chat-azul);
}

.chat-message--error {
  color: #a61b29;
}

.chat-form {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.chat-form .form-control {
  min-width: 0;
}

.chat-form .btn {
  flex: 0 0 auto;
  background: var(--chat-verde);
  border-color: var(--chat-verde);
}

.chat-form .btn:hover,
.chat-form .btn:focus {
  background: #00a983;
  border-color: #00a983;
}

.chat-status {
  min-height: 1.25rem;
  margin: 0.35rem 0 0;
  color: #6c757d;
  font-size: 0.8rem;
}

@media (max-width: 480px) {
  .chat-shell {
    padding: 0.75rem;
  }

  .chat-form {
    align-items: stretch;
  }
}