body {
  font-family: "Inter", sans-serif;
}
.navbar {
  background-color: #1f2937;
  color: #f3f4f6;
}
.navbar .btn-outline {
  color: #f3f4f6;
  border-color: #f3f4f6;
}
.navbar .btn-outline:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
#left-panel {
  background-color: #f9fafb;
}
#chat-panel {
  background-color: #ffffff;
}
.btn-primary {
  background-color: #2563eb;
  border-color: #2563eb;
}
.btn-primary:hover {
  background-color: #1d4ed8;
  border-color: #1d4ed8;
}
/* Highlight styles for template previews */
.template-highlight {
  background-color: #fffbeb;
  border-left: 4px solid #f59e0b;
  color: #92400e;
  padding: 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.9rem;
  line-height: 1.35;
}
.newconv-highlight {
  background-color: #eef2ff;
  border-left: 4px solid #6366f1;
  color: #3730a3;
  padding: 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.9rem;
  line-height: 1.35;
}

/* Dynamic variable style (used inside previews) */
.template-variable {
  background-color: rgba(99, 102, 241, 0.08); /* soft indigo tint */
  color: #3730a3;
  padding: 0.12rem 0.28rem;
  border-radius: 0.25rem;
  font-weight: 600;
  margin: 0 0.08rem;
}
.newconv-variable {
  /* if you want slightly different look in NewConv */
  background-color: rgba(99, 102, 241, 0.06);
  color: #3730a3;
  padding: 0.08rem 0.22rem;
  border-radius: 0.2rem;
  font-weight: 600;
  margin: 0 0.06rem;
}
.border {
  border-color: #ccc;
}
#chat-window {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.chat-message-container {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
#chat-input {
  max-height: 50vh;
  overflow-y: auto;
  resize: none;
}