dev1/src/components/Chatbot.css

/* Chatbot Container */
.chatbot-container {
  background-color: #ffffff; /* Solid white background */
  border: 1px solid #ccc;    /* Light gray border */
  border-radius: 8px;        /* Rounded corners */
  padding: 15px;             /* Inner padding */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  width: 350px;              /* Chatbot width */
  position: fixed;           /* Floating position */
  bottom: 20px;              /* Distance from bottom */
  right: 20px;               /* Distance from right */
  z-index: 1000;             /* Ensure it appears on top */
  font-family: Arial, sans-serif; /* Font for consistency */

  display: flex;             /* For minimized mode */
  flex-direction: column;
  transition: all 0.3s ease; /* Smooth transition for minimize/maximize */
}

/* Chat Messages */
.chat-messages {
  max-height: 300px;          /* Limit height for scrolling */
  overflow-y: auto;           /* Enable vertical scrolling */
  margin-bottom: 10px;        /* Space below the messages */
  padding-right: 10px;        /* Prevent text from touching the edge */
}

/* Individual Message */
.message {
  margin: 5px 0;              /* Spacing between messages */
  padding: 8px 10px;          /* Inner padding for readability */
  border-radius: 6px;         /* Rounded message boxes */
  font-size: 14px;            /* Readable font size */
  line-height: 1.4;           /* Comfortable line spacing */
}

/* User Message */
.message.user {
  align-self: flex-end;       /* Align user messages to the right */
  background-color: #007bff;  /* Blue background for user */
  color: #ffffff;             /* White text for contrast */
}

/* Bot Message */
.message.bot {
  align-self: flex-start;     /* Align bot messages to the left */
  background-color: #f1f1f1;  /* Light gray background for bot */
  color: #333333;             /* Dark text for readability */
}

/* Loading Indicator */
.message.bot.typing {
  font-style: italic;         /* Italic text to indicate typing */
  color: #666666;             /* Subtle color */
}

/* Chat Input Form */
.chat-input-form {
  display: flex;              /* Arrange input and button side by side */
  gap: 5px;                   /* Space between input and button */
  align-items: center;        /* Align input and button vertically */
}

/* Input Field */
.chat-input-form input {
  flex: 1;                    /* Take up remaining space */
  padding: 10px;              /* Padding inside input */
  border: 1px solid #ccc;     /* Light gray border */
  border-radius: 5px;         /* Rounded corners */
  font-size: 14px;            /* Font size */
}

/* Input Focus */
.chat-input-form input:focus {
  outline: none;              /* Remove blue outline */
  border-color: #007bff;      /* Blue border on focus */
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Glow effect */
}

/* Send Button */
.chat-input-form button {
  background-color: #007bff;  /* Blue background */
  color: #ffffff;             /* White text */
  border: none;               /* No border */
  padding: 10px 15px;         /* Padding inside button */
  border-radius: 5px;         /* Rounded corners */
  cursor: pointer;            /* Pointer cursor on hover */
  font-size: 14px;            /* Font size */
}

/* Send Button Hover */
.chat-input-form button:hover {
  background-color: #0056b3;  /* Darker blue on hover */
}

/* Send Button Disabled */
.chat-input-form button:disabled {
  background-color: #cccccc;  /* Gray background when disabled */
  cursor: not-allowed;        /* Indicate disabled state */
}

/* Scrollbar Styling for Chat Messages */
.chat-messages::-webkit-scrollbar {
  width: 8px;                 /* Width of scrollbar */
}

.chat-messages::-webkit-scrollbar-thumb {
  background: #cccccc;        /* Gray scrollbar thumb */
  border-radius: 4px;         /* Rounded scrollbar */
}

.chat-messages::-webkit-scrollbar-thumb:hover {
  background: #aaaaaa;        /* Darker gray on hover */
}

/* ============================= */
/* Minimize/Maximize Additions   */
/* ============================= */

/* Header Bar for Minimization */
.chatbot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px; /* Optional: slight spacing under the header */
  padding: 8px 10px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

/* Title in the header */
.chatbot-title {
  font-weight: bold;
}

/* Minimize button in header */
.minimize-btn {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #333;
}

/* When minimized, hide all but the header */
.chatbot-container.minimized {
  height: auto;
  width: 350px;
  max-height: 50px;  /* Just an example narrower width when minimized */
  padding: 0 0 10px 0;
  overflow: hidden;
}

.chatbot-container.minimized .chat-messages,
.chatbot-container.minimized .chat-input-form {
  display: none;  /* Hide chat body & input */
}