body { font-family: Arial, sans-serif; background: #f7f7f7; margin: 0; }
    button { cursor: pointer; padding: 10px 20px; margin: 20px; }
    .modal { display: none; position: fixed; bottom: 20px; right: 20px; width: 350px; background: #fff; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.2); overflow: hidden; }
    .modal-header { background: #0077cc; color: #fff; padding: 10px; font-weight: bold; text-align: center; }
.messages {
  height: 300px;
  overflow-y: scroll; /* always visible */
  scrollbar-gutter: stable; /* prevents layout shift */
  padding: 10px;
  background: #f2f2f2;
}
    .user-msg { text-align: right; margin: 5px 0; }
    .user-msg span { background: #0077cc; color: #fff; padding: 6px 10px; border-radius: 15px; display: inline-block; }
    .ai-msg { text-align: left; margin: 5px 0; }
    .ai-msg span { background: #e2e2e2; color: #000; padding: 6px 10px; border-radius: 15px; display: inline-block; }
    .input-area { display: flex; border-top: 1px solid #ccc; }
    .input-area input { flex: 1; padding: 8px; border: none; }
    .input-area button { padding: 8px 12px; border: none; background: #0077cc; color: #fff; }

.ai-buttons {
  display: flex;
  justify-content: space-around;
  margin: 10px 0;
}

.ai-buttons button {
  background: #0077cc;
  color: #fff;
  border: none;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}

.ai-buttons button:hover {
  background: #005fa3;
}