body {
  background-color: #eee3e3;
  color: #333;
  font-family: 'Segoe UI', sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.app-header {
  background-color: #e79c5f;
  padding: 1rem 0;
  border-bottom: 1px solid #333;
}

.app-header .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.header-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo-header {
  height: 40px;
}

.app-title {
  color: #ffffff;
  font-size: 1.75rem;
  margin: 0;
  line-height: 1;
}

.chat-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: 900px;
  margin: auto;
  width: 100%;
  overflow: hidden;
}

.chat-box {
  flex-grow: 1;
  padding: 1rem;
  background-color: #b0a1a1;
  overflow-y: auto;
  max-height: 65vh;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
}

.form-section {
  padding: 0.75rem;
  background-color: #121212;
  border-top: 1px solid #333;
}

.type-selector {
  max-width: 150px;
}

.message {
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #3a3a3a;
}

.user-message {
  color: #111;
  font-weight: 500;
}

.bot-message {
  color: #000;
}

.chart {
  max-width: 100%;
  margin-top: 0.75rem;
  border-radius: 6px;
  border: 1px solid #444;
}

.spinner-border {
  width: 1.5rem;
  height: 1.5rem;
}

.app-footer {
  background-color: #e79c5f;
  padding: 1rem 0;
  border-top: 1px solid #333;
}

.logo-footer {
  height: 32px;
}

.btn-custom {
  background-color: #e79c5f;
  color: #fff;
  border: none;
  font-weight: 600;
}

.btn-custom:hover {
  background-color: #d07e3a;
}

.login-overlay {
  position: fixed;
  inset: 0;
  background: #eee3e3;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}