/* South Delhi AI — Bootstrap overrides & polish */

body {
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.messages-area {
  height: 480px;
  overflow-y: auto;
  background: #fafafa;
}

.messages-area .avatar {
  width: 36px;
  height: 36px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.messages-area .bubble p:last-child {
  margin-bottom: 0;
}

/* User message — flipped & coloured */
.messages-area .user-message {
  flex-direction: row-reverse;
}
.messages-area .user-message .avatar {
  margin-right: 0 !important;
  margin-left: 0.5rem !important;
  background: #ffc107 !important;
  color: #212529 !important;
}
.messages-area .user-message .bubble {
  background: #fff8e1 !important;
  border-color: #ffe082 !important;
}

/* Composer textarea: no resize handle, smooth growth */
#messageInput {
  resize: none;
  max-height: 160px;
}

/* Suggestion chips hover */
.btn-outline-secondary[data-question]:hover {
  background-color: #212529;
  color: #fff;
  border-color: #212529;
}

/* Scrollbar polish (webkit) */
.messages-area::-webkit-scrollbar { width: 8px; }
.messages-area::-webkit-scrollbar-track { background: transparent; }
.messages-area::-webkit-scrollbar-thumb { background: #ced4da; border-radius: 4px; }
.messages-area::-webkit-scrollbar-thumb:hover { background: #adb5bd; }

/* Spinner inline in bubble */
.bubble .spinner-border-sm {
  width: 1rem;
  height: 1rem;
  border-width: 0.15em;
}