Added Sample Custom Style sheet

README-css-style.md

@@ -220,3 +220,7 @@ button.end-live-chat-button.btn {
 #### Other
 Other CSS can be applied to the classes above in addition to what is listed. Be creative and
 create a compelling style for your site.
+
+#### Lex Web Ui Example CSS Files
+some examples for custom css styles are available [here](example-css)
+![Sample CSS Files LexWebUi](./img/example-css.png)

example-css/bright-yellow.css

@@ -0,0 +1,89 @@
+/* ========================================
+   BRIGHT YELLOW THEME
+   Bright yellow theme for energetic environments
+   ======================================== */
+
+/* Toolbar */
+.bg-red {
+  background-color: #ca8a04 !important;
+}
+
+.toolbar__title {
+  font-family: "Arial", sans-serif !important;
+  font-size: 16px !important;
+  color: #ffffff !important;
+}
+
+/* Minimized button */
+button.min-button {
+  background-color: #ca8a04 !important;
+  border-color: #ca8a04 !important;
+}
+
+/* Message container */
+.message-list-container {
+  background-color: #fefce8 !important;
+}
+
+/* Bot messages */
+.message-bot .message-bubble {
+  background-color: #fef3c7 !important;
+}
+
+/* Human messages */
+.message-human .message-bubble {
+  background-color: #ca8a04 !important;
+  color: #ffffff !important;
+}
+
+/* Response card buttons */
+.v-card-actions .v-btn {
+  background-color: #eab308 !important;
+  color: #ffffff !important;
+}
+
+/* Common styling */
+.message-bubble {
+  border-radius: 12px !important;
+  padding: 8px 16px !important;
+}
+
+.message-bubble p {
+  margin-bottom: 8px;
+}
+
+.message-bubble p:last-child {
+  margin-bottom: 0px;
+}
+
+.message-bubble .message-text {
+  padding-left: 0;
+  padding-right: 0;
+  line-height: 1.6;
+  font-size: 1rem;
+}
+
+.input-group--text-field input,
+.input-group--text-field textarea,
+.input-group--text-field label {
+  font-size: 14px !important;
+}
+
+.v-card-actions .v-btn {
+  margin: 4px 4px !important;
+  font-size: 1em !important;
+  min-width: 44px !important;
+  border-radius: 8px !important;
+}
+
+button.end-live-chat-button.btn {
+  color: white !important;
+  background-color: #dc2626 !important;
+}
+
+.lex-web-ui-iframe {
+  min-width: 25vw !important;
+  max-height: 315px !important;
+  margin-right: 10vw !important;
+  margin-bottom: 10px !important;
+}

example-css/coral-pink.css

@@ -0,0 +1,89 @@
+/* ========================================
+   CORAL PINK THEME
+   Warm coral pink theme for friendly interfaces
+   ======================================== */
+
+/* Toolbar */
+.bg-red {
+  background-color: #e11d48 !important;
+}
+
+.toolbar__title {
+  font-family: "Arial", sans-serif !important;
+  font-size: 16px !important;
+  color: #ffffff !important;
+}
+
+/* Minimized button */
+button.min-button {
+  background-color: #e11d48 !important;
+  border-color: #e11d48 !important;
+}
+
+/* Message container */
+.message-list-container {
+  background-color: #fdf2f8 !important;
+}
+
+/* Bot messages */
+.message-bot .message-bubble {
+  background-color: #fce7f3 !important;
+}
+
+/* Human messages */
+.message-human .message-bubble {
+  background-color: #e11d48 !important;
+  color: #ffffff !important;
+}
+
+/* Response card buttons */
+.v-card-actions .v-btn {
+  background-color: #f43f5e !important;
+  color: #ffffff !important;
+}
+
+/* Common styling */
+.message-bubble {
+  border-radius: 12px !important;
+  padding: 8px 16px !important;
+}
+
+.message-bubble p {
+  margin-bottom: 8px;
+}
+
+.message-bubble p:last-child {
+  margin-bottom: 0px;
+}
+
+.message-bubble .message-text {
+  padding-left: 0;
+  padding-right: 0;
+  line-height: 1.6;
+  font-size: 1rem;
+}
+
+.input-group--text-field input,
+.input-group--text-field textarea,
+.input-group--text-field label {
+  font-size: 14px !important;
+}
+
+.v-card-actions .v-btn {
+  margin: 4px 4px !important;
+  font-size: 1em !important;
+  min-width: 44px !important;
+  border-radius: 8px !important;
+}
+
+button.end-live-chat-button.btn {
+  color: white !important;
+  background-color: #dc2626 !important;
+}
+
+.lex-web-ui-iframe {
+  min-width: 25vw !important;
+  max-height: 315px !important;
+  margin-right: 10vw !important;
+  margin-bottom: 10px !important;
+}

example-css/dark-mode-theme.css

@@ -0,0 +1,95 @@
+/* ========================================
+   DARK MODE THEME
+   Modern dark theme for tech-savvy users
+   ======================================== */
+
+/* Toolbar */
+.bg-red {
+  background-color: #1f2937 !important;
+}
+
+.toolbar__title {
+  font-family: "Inter", sans-serif !important;
+  font-size: 16px !important;
+  color: #f9fafb !important;
+}
+
+/* Minimized button */
+button.min-button {
+  background-color: #374151 !important;
+  border-color: #374151 !important;
+}
+
+/* Message container */
+.message-list-container {
+  background-color: #111827 !important;
+}
+
+/* Bot messages */
+.message-bot .message-bubble {
+  background-color: #374151 !important;
+  color: #f9fafb !important;
+}
+
+/* Human messages */
+.message-human .message-bubble {
+  background-color: #6b7280 !important;
+  color: #ffffff !important;
+}
+
+/* Message text color */
+.message-text {
+  color: #f9fafb !important;
+}
+
+/* Response card buttons */
+.v-card-actions .v-btn {
+  background-color: #4b5563 !important;
+  color: #ffffff !important;
+}
+
+/* Common styling */
+.message-bubble {
+  border-radius: 12px !important;
+  padding: 8px 16px !important;
+}
+
+.message-bubble p {
+  margin-bottom: 8px;
+}
+
+.message-bubble p:last-child {
+  margin-bottom: 0px;
+}
+
+.message-bubble .message-text {
+  padding-left: 0;
+  padding-right: 0;
+  line-height: 1.6;
+  font-size: 1rem;
+}
+
+.input-group--text-field input,
+.input-group--text-field textarea,
+.input-group--text-field label {
+  font-size: 14px !important;
+}
+
+.v-card-actions .v-btn {
+  margin: 4px 4px !important;
+  font-size: 1em !important;
+  min-width: 44px !important;
+  border-radius: 8px !important;
+}
+
+button.end-live-chat-button.btn {
+  color: white !important;
+  background-color: #dc2626 !important;
+}
+
+.lex-web-ui-iframe {
+  min-width: 25vw !important;
+  max-height: 315px !important;
+  margin-right: 10vw !important;
+  margin-bottom: 10px !important;
+}

example-css/elegant-purple-theme.css

@@ -0,0 +1,89 @@
+/* ========================================
+   ELEGANT PURPLE THEME
+   Sophisticated purple theme for premium services
+   ======================================== */
+
+/* Toolbar */
+.bg-red {
+  background-color: #7c3aed !important;
+}
+
+.toolbar__title {
+  font-family: "Georgia", serif !important;
+  font-size: 16px !important;
+  color: #ffffff !important;
+}
+
+/* Minimized button */
+button.min-button {
+  background-color: #7c3aed !important;
+  border-color: #7c3aed !important;
+}
+
+/* Message container */
+.message-list-container {
+  background-color: #faf5ff !important;
+}
+
+/* Bot messages */
+.message-bot .message-bubble {
+  background-color: #ede9fe !important;
+}
+
+/* Human messages */
+.message-human .message-bubble {
+  background-color: #7c3aed !important;
+  color: #ffffff !important;
+}
+
+/* Response card buttons */
+.v-card-actions .v-btn {
+  background-color: #8b5cf6 !important;
+  color: #ffffff !important;
+}
+
+/* Common styling */
+.message-bubble {
+  border-radius: 12px !important;
+  padding: 8px 16px !important;
+}
+
+.message-bubble p {
+  margin-bottom: 8px;
+}
+
+.message-bubble p:last-child {
+  margin-bottom: 0px;
+}
+
+.message-bubble .message-text {
+  padding-left: 0;
+  padding-right: 0;
+  line-height: 1.6;
+  font-size: 1rem;
+}
+
+.input-group--text-field input,
+.input-group--text-field textarea,
+.input-group--text-field label {
+  font-size: 14px !important;
+}
+
+.v-card-actions .v-btn {
+  margin: 4px 4px !important;
+  font-size: 1em !important;
+  min-width: 44px !important;
+  border-radius: 8px !important;
+}
+
+button.end-live-chat-button.btn {
+  color: white !important;
+  background-color: #dc2626 !important;
+}
+
+.lex-web-ui-iframe {
+  min-width: 25vw !important;
+  max-height: 315px !important;
+  margin-right: 10vw !important;
+  margin-bottom: 10px !important;
+}