quikchat 1.1.17 → 1.2.6

package/dist/quikchat.css

@@ -1,98 +1,227 @@
-/* 
+/*
  quikchat.css see www.github.com/deftio/quikchat for more info
- 
- Base Styles - Affect behavior so change with care
- For Themes scroll past this section
+ see docs/css-architecture.md for design rationale
+
+ Base Styles — structural layout, do not vary between themes
+ Theme Styles — appearance only (colors, borders, border-radius, shadows)
  */
 
+/* ================================== */
+/* Base — scoped reset                */
+/* ================================== */
+
+.quikchat-base,
+.quikchat-base *,
+.quikchat-base *::before,
+.quikchat-base *::after {
+    box-sizing: border-box;
+}
+
+/* ================================== */
+/* Base — layout and sizing           */
+/* ================================== */
+
 .quikchat-base {
     display: flex;
     flex-direction: column;
     height: 100%;
     width: 100%;
-    min-width: 200px;
-    min-height: 200px;
-    box-sizing: border-box !important;
+    min-width: min(200px, 100%);
+    min-height: min(200px, 100%);
+    overflow: hidden;
+    font-size: 14px;
+    line-height: 1.4;
 }
 
 .quikchat-title-area {
+    flex-shrink: 0;
+    padding: 8px;
     margin-left: 8px;
     margin-right: 8px;
-    padding-left : 2px;
-    padding-right : 2px;
-    padding: 8px;
     font-weight: 600;
     font-size: 1.3em;
-    box-sizing: border-box;
 }
 
 .quikchat-messages-area {
-    flex-grow: 1;
+    flex: 1;
+    min-height: 0;
     padding: 8px;
     overflow-y: auto;
-    width: 100%;
-    box-sizing: border-box;
+    position: relative;
 }
 
 .quikchat-message {
     padding: 4px;
     white-space: pre-wrap;
     word-wrap: break-word;
-    box-sizing: border-box;
-}
-/* Core Right-Side Message Alignment */
-.quikchat-message.right {
-    display: inline-block;
-    max-width: 60%;
-    padding: 8px 12px;
-    text-align: right; /* Default for short messages */
 }
 
-/* Right-aligned short messages */
-.quikchat-message.right .quikchat-right-singleline {
-    text-align: right;
-}
-
-/* Right-aligned long/multi-line messages */
-.quikchat-message.right .quikchat-right-multiline {
-    text-align: left;
-    word-wrap: break-word;
+.quikchat-user-label {
+    font-weight: 700;
+    font-size: 1em;
 }
 
-
 .quikchat-input-area {
+    flex-shrink: 0;
     display: flex;
-    align-items: center;
+    align-items: flex-end;
     padding: 8px;
-    min-height: 56px;
-    height: 4em;
-    width: 100%;
-    box-sizing: border-box;
+    min-height: 48px;
 }
-  
+
 .quikchat-input-textbox {
     flex-grow: 1;
-    min-height: 40px;
+    min-height: 36px;
+    min-width: 0;
     resize: none;
-    padding: 4px;
-    height: 100%;
-    box-sizing: border-box;
+    padding: 6px 8px;
+    height: auto;
+    overflow-y: hidden;
+    font-family: inherit;
+    font-size: inherit;
 }
 
 .quikchat-input-send-btn {
     margin-left: 8px;
     padding: 8px;
-    height: 100%;
+    min-height: 36px;
     min-width: 5rem;
     cursor: pointer;
     white-space: nowrap;
-    box-sizing: border-box;
+    font-family: inherit;
+    font-size: inherit;
+    align-self: flex-end;
 }
-  
-/* ***************************************** */
-/*  quikchat theme debug                      
-    This theme is for debugging purposes and has a very distinct look. 
- */
+
+/* ================================== */
+/* Base — RTL support                 */
+/* ================================== */
+
+.quikchat-rtl .quikchat-input-area {
+    flex-direction: row-reverse;
+}
+
+.quikchat-rtl .quikchat-input-send-btn {
+    margin-left: 0;
+    margin-right: 8px;
+}
+
+/* ================================== */
+/* Base — disabled state              */
+/* ================================== */
+
+.quikchat-input-textbox:disabled,
+.quikchat-input-send-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* ================================== */
+/* Base — typing indicator            */
+/* ================================== */
+
+.quikchat-typing .quikchat-message-content {
+    min-height: 1.4em;
+}
+
+.quikchat-typing-dots span {
+    display: inline-block;
+    font-size: 1.4em;
+    line-height: 1;
+    animation: quikchat-dot-pulse 1.4s infinite;
+}
+
+.quikchat-typing-dots span:nth-child(2) {
+    animation-delay: 0.2s;
+}
+
+.quikchat-typing-dots span:nth-child(3) {
+    animation-delay: 0.4s;
+}
+
+@keyframes quikchat-dot-pulse {
+    0%, 80%, 100% { opacity: 0.2; }
+    40% { opacity: 1; }
+}
+
+/* ================================== */
+/* Base — messages wrapper            */
+/* ================================== */
+
+.quikchat-messages-wrapper {
+    flex: 1;
+    min-height: 0;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+/* ================================== */
+/* Base — timestamps                  */
+/* ================================== */
+
+.quikchat-timestamp {
+    display: none;
+    font-size: 0.75em;
+    opacity: 0.6;
+    margin-top: 2px;
+}
+
+.quikchat-show-timestamps .quikchat-timestamp {
+    display: block;
+}
+
+/* ================================== */
+/* Base — scroll-to-bottom button     */
+/* ================================== */
+
+.quikchat-scroll-bottom {
+    display: none;
+    position: absolute;
+    bottom: 8px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    border: 1px solid currentColor;
+    background: inherit;
+    color: inherit;
+    cursor: pointer;
+    opacity: 0.7;
+    z-index: 1;
+    font-size: 16px;
+    line-height: 1;
+    padding: 0;
+}
+
+.quikchat-scroll-bottom::after {
+    content: "\2193";
+}
+
+.quikchat-scroll-bottom:hover {
+    opacity: 1;
+}
+
+.quikchat-scroll-bottom-visible {
+    display: block;
+}
+
+/* ================================== */
+/* Base — focus indicators            */
+/* ================================== */
+
+.quikchat-input-textbox:focus,
+.quikchat-input-send-btn:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: -2px;
+}
+
+/* ================================== */
+/* Theme: debug                       */
+/* Vivid colors for visual debugging  */
+/* ================================== */
+
 .quikchat-theme-debug {
     border: 1px solid black;
     border-radius: 10px;
@@ -101,13 +230,9 @@
 
 .quikchat-theme-debug .quikchat-title-area {
     background-color: lightblue;
-    color: #333; 
-    padding: 8px;
-    font-weight: 600;
-    margin-right: 10px;
+    color: #333;
 }
 
-
 .quikchat-theme-debug .quikchat-messages-area {
     border-radius: 1em;
     background-color: lightsalmon;
@@ -118,285 +243,918 @@
     color: #eee;
     border-radius: 4px;
 }
+
 .quikchat-theme-debug .quikchat-messages-area-alt .quikchat-message:nth-child(even) {
     background-color: lightpink;
     color: #444;
     border-radius: 4px;
 }
 
-/********** User Messages **********
- *  Single / Multiline
- */
+.quikchat-theme-debug .quikchat-input-area {
+    background-color: lightgreen;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+}
 
- .quikchat-theme-debug .quikchat-messages-area .quikchat-message {
-    padding-left : 8px;
-    padding-right: 8px;
-    border-radius: 0.5em;
- }
+.quikchat-theme-debug .quikchat-input-textbox {
+    background-color: #eee;
+    color: #333;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
 
-/* Short (single) User Messages that are right sided */
-.quikchat-theme-debug .quikchat-messages-area .quikchat-message.right-singleline {
-    text-align: right; /* Right-align text */
-    margin-left: 5%; /* Increased left padding */
+.quikchat-theme-debug .quikchat-input-send-btn {
+    background-color: #4caf50;
+    color: white;
+    border: none;
+    border-radius: 4px;
 }
 
-/* Multiline (long) User Messages */
-.quikchat-theme-debug .quikchat-messages-area .quikchat-message.right-multiline {
-    text-align: left; /* Left-align text */
-    margin-left: 5%; /* Standard left padding */
+.quikchat-theme-debug .quikchat-input-send-btn:hover {
+    background-color: #43a047;
 }
 
-/* Short (single) User Messages that are right sided */
-.quikchat-theme-debug .quikchat-messages-area .quikchat-message.center-singleline {
-    text-align: center; /* Right-align text */
-    margin-left: 5%; /* Increased left margin */
-    margin-right: 5%; /* Standard right margin */
+/* ================================== */
+/* Theme: dark                        */
+/* ================================== */
+
+.quikchat-theme-dark {
+    border: 1px solid #3a3a3a;
+    border-radius: 12px;
+    background-color: #1a1a1a;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
+    color: #e8e8e8;
 }
 
-/* Multiline (long) User Messages */
-.quikchat-theme-debug .quikchat-messages-area .quikchat-message.center-multiline {
-    text-align: left; /* Left-align text */
-    margin-left: 5%; /* Standard left padding */
-    margin-right: 5%; /* Standard right padding */
+.quikchat-theme-dark .quikchat-title-area {
+    background-color: #1a1a1a;
+    color: #f0f0f0;
+    border-bottom: 1px solid #2a2a2a;
 }
-/* Short (single) User Messages that are right sided */
-.quikchat-theme-debug .quikchat-messages-area .quikchat-message.left-singleline {
-    text-align: left; /* Right-align text */
-    margin-right: 5%; 
+
+.quikchat-theme-dark .quikchat-messages-area {
+    background-color: #1a1a1a;
+    color: #e8e8e8;
 }
 
-/* Multiline (long) User Messages */
-.quikchat-theme-debug .quikchat-messages-area-alt .quikchat-message.left-multiline {
-    text-align: left; /* Left-align text */
-    margin-right: 5%; /* Standard left padding */
+.quikchat-theme-dark .quikchat-messages-area-alt .quikchat-message:nth-child(odd) {
+    background-color: #1e1e1e;
+    color: #e8e8e8;
+    border-radius: 6px;
 }
 
-.quikchat-theme-debug .quikchat-input-area {
-    background-color: lightgreen;
-    border-bottom-left-radius : 10px;
-    border-bottom-right-radius : 10px;
+.quikchat-theme-dark .quikchat-messages-area-alt .quikchat-message:nth-child(even) {
+    background-color: #262626;
+    color: #f0f0f0;
+    border-radius: 6px;
 }
 
-.quikchat-theme-debug .quikchat-input-textbox {
-    background-color: #eee;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    font-size: 14px;
+.quikchat-theme-dark .quikchat-input-area {
+    background-color: #1e1e1e;
+    border-top: 1px solid #2a2a2a;
+    border-bottom-left-radius: 12px;
+    border-bottom-right-radius: 12px;
 }
 
-.quikchat-theme-debug .quikchat-input-send-btn {
-    background-color: #4caf50;
+.quikchat-theme-dark .quikchat-input-textbox {
+    background-color: #2a2a2a;
+    color: #e8e8e8;
+    border: 1px solid #3a3a3a;
+    border-radius: 8px;
+}
+
+.quikchat-theme-dark .quikchat-input-send-btn {
+    background-color: #22c55e;
+    color: #0a0a0a;
+    border: none;
+    border-radius: 8px;
+    font-weight: 600;
+}
+
+.quikchat-theme-dark .quikchat-input-send-btn:hover {
+    background-color: #16a34a;
+}
+
+/* ================================== */
+/* Theme: light                       */
+/* Clean white with subtle warmth     */
+/* ================================== */
+
+.quikchat-theme-light {
+    border: 1px solid #e0e0e0;
+    border-radius: 12px;
+    background-color: #ffffff;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
+}
+
+.quikchat-theme-light .quikchat-title-area {
+    color: #1a1a1a;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.quikchat-theme-light .quikchat-messages-area {
+    background-color: #ffffff;
+    color: #2d2d2d;
+}
+
+.quikchat-theme-light .quikchat-messages-area-alt .quikchat-message:nth-child(odd) {
+    background-color: #ffffff;
+    color: #2d2d2d;
+    border-radius: 6px;
+}
+
+.quikchat-theme-light .quikchat-messages-area-alt .quikchat-message:nth-child(even) {
+    background-color: #f7f7f8;
+    color: #2d2d2d;
+    border-radius: 6px;
+}
+
+.quikchat-theme-light .quikchat-input-area {
+    background-color: #fafafa;
+    border-top: 1px solid #f0f0f0;
+    border-bottom-left-radius: 12px;
+    border-bottom-right-radius: 12px;
+}
+
+.quikchat-theme-light .quikchat-input-textbox {
+    background-color: #ffffff;
+    color: #2d2d2d;
+    border: 1px solid #d8d8d8;
+    border-radius: 8px;
+}
+
+.quikchat-theme-light .quikchat-input-send-btn {
+    background-color: #2563eb;
     color: white;
     border: none;
-    border-radius: 4px;
+    border-radius: 8px;
 }
 
-/* ********************************** */
-/* quikchat theme dark                */
-.quikchat-theme-dark {
-    border: 1px solid #555555;
-    border-radius: 10px;
-    background-color: #212121;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
-    color: #eceff1;
+.quikchat-theme-light .quikchat-input-send-btn:hover {
+    background-color: #1d4ed8;
 }
 
-.quikchat-theme-dark .quikchat-title-area {
-    background-color: #212121;
-    color: #eceff1;
-    padding: 8px;
+/* ================================== */
+/* Theme: blue                        */
+/* Professional steel-blue accents    */
+/* ================================== */
+
+.quikchat-theme-blue {
+    border: 1px solid #c0d4e8;
+    border-radius: 12px;
+    background-color: #f0f5fa;
+    box-shadow: 0 2px 8px rgba(58, 110, 165, 0.08);
+}
+
+.quikchat-theme-blue .quikchat-title-area {
+    background: linear-gradient(135deg, #3a6ea5, #2d5a8a);
+    color: #fff;
+    border-radius: 11px 11px 0 0;
+}
+
+.quikchat-theme-blue .quikchat-messages-area {
+    background-color: #f8fafc;
+    color: #1a2a3a;
+}
+
+.quikchat-theme-blue .quikchat-messages-area-alt .quikchat-message:nth-child(odd) {
+    background-color: #f8fafc;
+    color: #1a2a3a;
+    border-radius: 6px;
+}
+
+.quikchat-theme-blue .quikchat-messages-area-alt .quikchat-message:nth-child(even) {
+    background-color: #e8f0f8;
+    color: #1a2a3a;
+    border-radius: 6px;
+}
+
+.quikchat-theme-blue .quikchat-input-area {
+    background-color: #eef3f8;
+    border-bottom-left-radius: 12px;
+    border-bottom-right-radius: 12px;
+}
+
+.quikchat-theme-blue .quikchat-input-textbox {
+    background-color: #fff;
+    color: #1a2a3a;
+    border: 1px solid #b8ccdf;
+    border-radius: 8px;
+}
+
+.quikchat-theme-blue .quikchat-input-send-btn {
+    background: linear-gradient(135deg, #3a6ea5, #2d5a8a);
+    color: white;
+    border: none;
+    border-radius: 8px;
+}
+
+.quikchat-theme-blue .quikchat-input-send-btn:hover {
+    background: linear-gradient(135deg, #2d5a8a, #1e4a75);
+}
+
+/* ================================== */
+/* Theme: warm                        */
+/* Soft cream with muted earth tones  */
+/* ================================== */
+
+.quikchat-theme-warm {
+    border: 1px solid #dcc8aa;
+    border-radius: 12px;
+    background-color: #fdf8f2;
+    box-shadow: 0 1px 6px rgba(180, 140, 80, 0.08);
+}
+
+.quikchat-theme-warm .quikchat-title-area {
+    background-color: #fdf8f2;
+    color: #5a3e28;
+    border-bottom: 1px solid #eedcc8;
+}
+
+.quikchat-theme-warm .quikchat-messages-area {
+    background-color: #fefbf6;
+    color: #3a2a1a;
+}
+
+.quikchat-theme-warm .quikchat-messages-area-alt .quikchat-message:nth-child(odd) {
+    background-color: #fefbf6;
+    color: #3a2a1a;
+    border-radius: 6px;
+}
+
+.quikchat-theme-warm .quikchat-messages-area-alt .quikchat-message:nth-child(even) {
+    background-color: #f5ebe0;
+    color: #3a2a1a;
+    border-radius: 6px;
+}
+
+.quikchat-theme-warm .quikchat-input-area {
+    background-color: #faf5ee;
+    border-top: 1px solid #eedcc8;
+    border-bottom-left-radius: 12px;
+    border-bottom-right-radius: 12px;
+}
+
+.quikchat-theme-warm .quikchat-input-textbox {
+    background-color: #fff;
+    color: #3a2a1a;
+    border: 1px solid #dcc8aa;
+    border-radius: 8px;
+}
+
+.quikchat-theme-warm .quikchat-input-send-btn {
+    background: linear-gradient(135deg, #c17f4a, #a5683a);
+    color: white;
+    border: none;
+    border-radius: 8px;
+}
+
+.quikchat-theme-warm .quikchat-input-send-btn:hover {
+    background: linear-gradient(135deg, #a5683a, #8a5530);
+}
+
+/* ================================== */
+/* Theme: midnight                    */
+/* Deep navy with starlight accents   */
+/* ================================== */
+
+.quikchat-theme-midnight {
+    border: 1px solid #2a3a5c;
+    border-radius: 12px;
+    background-color: #0f1626;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+    color: #c8d0e0;
+}
+
+.quikchat-theme-midnight .quikchat-title-area {
+    background: linear-gradient(135deg, #1a2744, #0f1626);
+    color: #8eaadc;
+    border-bottom: 1px solid #1e2d4a;
+    border-radius: 11px 11px 0 0;
+}
+
+.quikchat-theme-midnight .quikchat-messages-area {
+    background-color: #0a1020;
+    color: #c8d0e0;
+}
+
+.quikchat-theme-midnight .quikchat-messages-area-alt .quikchat-message:nth-child(odd) {
+    background-color: #0f1830;
+    color: #c8d0e0;
+    border-radius: 6px;
+}
+
+.quikchat-theme-midnight .quikchat-messages-area-alt .quikchat-message:nth-child(even) {
+    background-color: #162040;
+    color: #d0d8e8;
+    border-radius: 6px;
+}
+
+.quikchat-theme-midnight .quikchat-input-area {
+    background-color: #0f1626;
+    border-top: 1px solid #1e2d4a;
+    border-bottom-left-radius: 12px;
+    border-bottom-right-radius: 12px;
+}
+
+.quikchat-theme-midnight .quikchat-input-textbox {
+    background-color: #1a2540;
+    color: #c8d0e0;
+    border: 1px solid #2a3a5c;
+    border-radius: 8px;
+}
+
+.quikchat-theme-midnight .quikchat-input-send-btn {
+    background: linear-gradient(135deg, #4a6fa5, #3a5a8a);
+    color: white;
+    border: none;
+    border-radius: 8px;
     font-weight: 600;
-    border-bottom: 1px solid #37474f;
 }
 
-.quikchat-theme-dark .quikchat-messages-area {
-    background-color: #212121;
-    color: #eceff1;
-    border-radius: 1em;
+.quikchat-theme-midnight .quikchat-input-send-btn:hover {
+    background: linear-gradient(135deg, #5a80b8, #4a6fa5);
 }
 
-.quikchat-theme-dark .quikchat-messages-area-alt .quikchat-message:nth-child(odd) {
-    background-color: #404040e5;
-    color: #eceff1;
-    border-radius: 4px;
+/* ================================== */
+/* Theme: ocean                       */
+/* Teal/cyan on deep blue             */
+/* ================================== */
+
+.quikchat-theme-ocean {
+    border: 1px solid #1a6b7a;
+    border-radius: 12px;
+    background-color: #0d2b36;
+    box-shadow: 0 4px 20px rgba(0, 40, 60, 0.4);
+    color: #d4edee;
 }
-.quikchat-theme-darl .quikchat-messages-area-alt .quikchat-message:nth-child(even) {
-    background-color: #5a5a5a;
-    color: #fbfbfb;
-    border-radius: 4px;
+
+.quikchat-theme-ocean .quikchat-title-area {
+    background: linear-gradient(135deg, #0d3a4a, #0d2b36);
+    color: #5ec4d4;
+    border-bottom: 1px solid #1a4a5a;
+    border-radius: 11px 11px 0 0;
 }
 
-/********** User Messages **********
- *  Single / Multiline
- */
+.quikchat-theme-ocean .quikchat-messages-area {
+    background-color: #0a2530;
+    color: #d4edee;
+}
+
+.quikchat-theme-ocean .quikchat-messages-area-alt .quikchat-message:nth-child(odd) {
+    background-color: #0d3040;
+    color: #d4edee;
+    border-radius: 6px;
+}
+
+.quikchat-theme-ocean .quikchat-messages-area-alt .quikchat-message:nth-child(even) {
+    background-color: #11384a;
+    color: #d4edee;
+    border-radius: 6px;
+}
 
- .quikchat-theme-dark .quikchat-messages-area .quikchat-message {
-    padding-left : 8px;
-    padding-right: 8px;
-    border-radius: 0.5em;
- }
+.quikchat-theme-ocean .quikchat-input-area {
+    background-color: #0d2b36;
+    border-top: 1px solid #1a4a5a;
+    border-bottom-left-radius: 12px;
+    border-bottom-right-radius: 12px;
+}
 
-/* Short (single) User Messages that are right sided */
-.quikchat-theme-dark .quikchat-messages-area .quikchat-message.right-singleline {
-    text-align: right; /* Right-align text */
-    margin-left: 5%; /* Increased left padding */
+.quikchat-theme-ocean .quikchat-input-textbox {
+    background-color: #163a48;
+    color: #d4edee;
+    border: 1px solid #1a5a6a;
+    border-radius: 8px;
 }
 
-/* Multiline (long) User Messages */
-.quikchat-theme-dark .quikchat-messages-area .quikchat-message.right-multiline {
-    text-align: left; /* Left-align text */
-    margin-left: 5%; /* Standard left padding */
+.quikchat-theme-ocean .quikchat-input-send-btn {
+    background: linear-gradient(135deg, #1a8a6a, #15705a);
+    color: white;
+    border: none;
+    border-radius: 8px;
+    font-weight: 600;
 }
 
-/* Short (single) User Messages that are right sided */
-.quikchat-theme-dark .quikchat-messages-area .quikchat-message.center-singleline {
-    text-align: center; /* Right-align text */
-    margin-left: 5%; /* Increased left margin */
-    margin-right: 5%; /* Standard right margin */
+.quikchat-theme-ocean .quikchat-input-send-btn:hover {
+    background: linear-gradient(135deg, #1fa07a, #1a8a6a);
 }
 
-/* Multiline (long) User Messages */
-.quikchat-theme-dark .quikchat-messages-area .quikchat-message.center-multiline {
-    text-align: left; /* Left-align text */
-    margin-left: 5%; /* Standard left padding */
-    margin-right: 5%; /* Standard right padding */
+/* ================================== */
+/* Theme: modern                     */
+/* Message bubbles, iMessage-style   */
+/* ================================== */
+
+.quikchat-theme-modern {
+    border: 1px solid #e5e5e5;
+    border-radius: 12px;
+    background-color: #ffffff;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
 }
-/* Short (single) User Messages that are right sided */
-.quikchat-theme-dark .quikchat-messages-area .quikchat-message.left-singleline {
-    text-align: left; /* Right-align text */
-    margin-right: 5%; 
+
+.quikchat-theme-modern .quikchat-title-area {
+    background-color: #fafafa;
+    color: #1a1a1a;
+    border-bottom: 1px solid #f0f0f0;
+    border-radius: 11px 11px 0 0;
 }
 
-/* Multiline (long) User Messages */
-.quikchat-theme-dark .quikchat-messages-area-alt .quikchat-message.left-multiline {
-    text-align: left; /* Left-align text */
-    margin-right: 5%; /* Standard left padding */
+.quikchat-theme-modern .quikchat-messages-area {
+    background-color: #ffffff;
+    color: #1a1a1a;
 }
 
-.quikchat-theme-dark .quikchat-input-area {
-    padding: 8px;
-    background-color: #263238;
+.quikchat-theme-modern .quikchat-message {
+    display: flex;
+    flex-direction: column;
+}
 
-    border-bottom-left-radius : 10px;
-    border-bottom-right-radius : 10px;
+.quikchat-theme-modern .quikchat-align-right {
+    align-items: flex-end;
 }
 
-.quikchat-theme-dark .quikchat-input-textbox {
-    width: 75%;
-    padding: 8px;
-    background-color: #424242;
-    border: 1px solid #555;
-    border-radius: 4px;
-    font-size: 14px;
-    color: #eceff1;
+.quikchat-theme-modern .quikchat-align-left {
+    align-items: flex-start;
 }
 
-.quikchat-theme-dark .quikchat-input-send-btn {
-    background-color: #1b5e20;
+.quikchat-theme-modern .quikchat-align-center {
+    align-items: center;
+}
+
+.quikchat-theme-modern .quikchat-message-content {
+    max-width: 80%;
+    border-radius: 18px;
+    padding: 2px 4px;
+}
+
+.quikchat-theme-modern .quikchat-align-right .quikchat-message-content {
+    background: linear-gradient(135deg, #0b93f6, #0078d4);
+    color: #ffffff;
+    border-bottom-right-radius: 4px;
+}
+
+.quikchat-theme-modern .quikchat-align-left .quikchat-message-content {
+    background-color: #f0f0f0;
+    color: #1a1a1a;
+    border-bottom-left-radius: 4px;
+}
+
+.quikchat-theme-modern .quikchat-align-center .quikchat-message-content {
+    background-color: transparent;
+    color: #888;
+}
+
+.quikchat-theme-modern .quikchat-user-label {
+    color: #888;
+    font-size: 0.85em;
+}
+
+.quikchat-theme-modern .quikchat-input-area {
+    background-color: #fafafa;
+    border-top: 1px solid #f0f0f0;
+    border-bottom-left-radius: 12px;
+    border-bottom-right-radius: 12px;
+}
+
+.quikchat-theme-modern .quikchat-input-textbox {
+    background-color: #f5f5f5;
+    color: #1a1a1a;
+    border: 1px solid #e0e0e0;
+    border-radius: 20px;
+}
+
+.quikchat-theme-modern .quikchat-input-send-btn {
+    background: linear-gradient(135deg, #0b93f6, #0078d4);
     color: white;
     border: none;
-    border-radius: 4px;
-    padding: 8px 16px;
-    margin-left: 10px;
-    cursor: pointer;
+    border-radius: 20px;
+    font-weight: 600;
 }
 
-/* ********************************** */
-/* quikchat theme light */
+.quikchat-theme-modern .quikchat-input-send-btn:hover {
+    background: linear-gradient(135deg, #0a84de, #006abc);
+}
 
-.quikchat-theme-light {
-    border: 1px solid #cccccc;
-    border-radius: 10px;
-    background-color: #f9f9f9;
+/* ================================== */
+/* Theme: glass                       */
+/* Glassmorphism: frosted translucent */
+/* ================================== */
+
+.quikchat-theme-glass {
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 16px;
+    background: rgba(255, 255, 255, 0.15);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+    color: #1a1a2e;
 }
-  
-.quikchat-theme-light .quikchat-title-area {
-    padding: 8px;
-    color: #333;
+
+.quikchat-theme-glass .quikchat-title-area {
+    background: rgba(255, 255, 255, 0.2);
+    color: #1a1a2e;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 15px 15px 0 0;
 }
-  
-.quikchat-theme-light .quikchat-messages-area {
-    background-color: #ffffffe2;
-    color: #333;
-    border-radius: 1em;
+
+.quikchat-theme-glass .quikchat-messages-area {
+    background: rgba(255, 255, 255, 0.08);
+    color: #1a1a2e;
 }
-  
-.quikchat-theme-light .quikchat-messages-area-alt .quikchat-message:nth-child(odd) {
-    background-color: #fffffff0;
-    color: #005662;
+
+.quikchat-theme-glass .quikchat-messages-area-alt .quikchat-message:nth-child(odd) {
+    background: rgba(255, 255, 255, 0.12);
+    border-radius: 8px;
 }
-.quikchat-theme-light .quikchat-messages-area-alt .quikchat-message:nth-child(even) {
-    background-color: #eeeeeee9;
-    color: #353535;
+
+.quikchat-theme-glass .quikchat-messages-area-alt .quikchat-message:nth-child(even) {
+    background: rgba(255, 255, 255, 0.22);
+    border-radius: 8px;
 }
 
-/********** User Messages **********
- *  Single / Multiline
- */
+.quikchat-theme-glass .quikchat-input-area {
+    background: rgba(255, 255, 255, 0.15);
+    border-top: 1px solid rgba(255, 255, 255, 0.15);
+    border-bottom-left-radius: 16px;
+    border-bottom-right-radius: 16px;
+}
 
- .quikchat-theme-light .quikchat-messages-area .quikchat-message {
-    padding-left : 8px;
-    padding-right: 8px;
-    border-radius: 0.5em;
- }
+.quikchat-theme-glass .quikchat-input-textbox {
+    background: rgba(255, 255, 255, 0.3);
+    color: #1a1a2e;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 8px;
+}
 
-/* Short (single) User Messages that are right sided */
-.quikchat-theme-light .quikchat-messages-area .quikchat-message.right-singleline {
-    text-align: right; /* Right-align text */
-    margin-left: 5%; /* Increased left padding */
+.quikchat-theme-glass .quikchat-input-textbox::placeholder {
+    color: rgba(26, 26, 46, 0.5);
 }
 
-/* Multiline (long) User Messages */
-.quikchat-theme-light .quikchat-messages-area .quikchat-message.right-multiline {
-    text-align: left; /* Left-align text */
-    margin-left: 5%; /* Standard left padding */
+.quikchat-theme-glass .quikchat-input-send-btn {
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    color: white;
+    border: none;
+    border-radius: 8px;
+    font-weight: 600;
+    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
 }
 
-/* Short (single) User Messages that are right sided */
-.quikchat-theme-light .quikchat-messages-area .quikchat-message.center-singleline {
-    text-align: center; /* Right-align text */
-    margin-left: 5%; /* Increased left margin */
-    margin-right: 5%; /* Standard right margin */
+.quikchat-theme-glass .quikchat-input-send-btn:hover {
+    background: linear-gradient(135deg, #5a6fd6, #6a4196);
 }
 
-/* Multiline (long) User Messages */
-.quikchat-theme-light .quikchat-messages-area .quikchat-message.center-multiline {
-    text-align: left; /* Left-align text */
-    margin-left: 5%; /* Standard left padding */
-    margin-right: 5%; /* Standard right padding */
+/* ================================== */
+/* Theme: gradient                    */
+/* Purple-indigo gradient accents     */
+/* ================================== */
+
+.quikchat-theme-gradient {
+    border: 1px solid #e0d4f5;
+    border-radius: 12px;
+    background-color: #ffffff;
+    box-shadow: 0 4px 20px rgba(100, 60, 180, 0.12);
 }
-/* Short (single) User Messages that are right sided */
-.quikchat-theme-light .quikchat-messages-area .quikchat-message.left-singleline {
-    text-align: left; /* Right-align text */
-    margin-right: 5%; 
+
+.quikchat-theme-gradient .quikchat-title-area {
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    color: #ffffff;
+    border-radius: 11px 11px 0 0;
 }
 
-/* Multiline (long) User Messages */
-.quikchat-theme-light .quikchat-messages-area-alt .quikchat-message.left-multiline {
-    text-align: left; /* Left-align text */
-    margin-right: 5%; /* Standard left padding */
+.quikchat-theme-gradient .quikchat-messages-area {
+    background-color: #ffffff;
+    color: #2d2d3a;
 }
-/*****
- *  Input Area
- */
-.quikchat-theme-light .quikchat-input-area {
-    background-color: #f9f9f9;
-    border-bottom-left-radius : 10px;
-    border-bottom-right-radius : 10px;
+
+.quikchat-theme-gradient .quikchat-messages-area-alt .quikchat-message:nth-child(odd) {
+    background-color: #ffffff;
+    color: #2d2d3a;
+    border-radius: 6px;
 }
-  
-.quikchat-theme-light .quikchat-input-textbox {
+
+.quikchat-theme-gradient .quikchat-messages-area-alt .quikchat-message:nth-child(even) {
+    background-color: #f3effc;
+    color: #2d2d3a;
+    border-radius: 6px;
+}
+
+.quikchat-theme-gradient .quikchat-input-area {
+    background-color: #faf8ff;
+    border-top: 1px solid #ece4f8;
+    border-bottom-left-radius: 12px;
+    border-bottom-right-radius: 12px;
+}
+
+.quikchat-theme-gradient .quikchat-input-textbox {
     background-color: #ffffff;
-    border: 1px solid #ccc;
+    color: #2d2d3a;
+    border: 1px solid #d4c4ea;
+    border-radius: 8px;
+}
+
+.quikchat-theme-gradient .quikchat-input-send-btn {
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    color: white;
+    border: none;
+    border-radius: 8px;
+    font-weight: 600;
+    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.25);
+}
+
+.quikchat-theme-gradient .quikchat-input-send-btn:hover {
+    background: linear-gradient(135deg, #5a6fd6, #6a4196);
+}
+
+/* ================================== */
+/* Theme: minimal                     */
+/* Ultra-clean, typography-focused    */
+/* ================================== */
+
+.quikchat-theme-minimal {
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    background-color: #ffffff;
+}
+
+.quikchat-theme-minimal .quikchat-title-area {
+    background-color: #ffffff;
+    color: #111111;
+    border-bottom: 1px solid #e8e8e8;
+    font-weight: 700;
+}
+
+.quikchat-theme-minimal .quikchat-messages-area {
+    background-color: #ffffff;
+    color: #222222;
+}
+
+.quikchat-theme-minimal .quikchat-messages-area-alt .quikchat-message:nth-child(odd) {
+    background-color: #ffffff;
+    color: #222222;
     border-radius: 4px;
-    font-size: 14px;
-    color: #333;
 }
-  
-.quikchat-theme-light .quikchat-input-send-btn {
-    background-color: #4caf50;
+
+.quikchat-theme-minimal .quikchat-messages-area-alt .quikchat-message:nth-child(even) {
+    background-color: #f8f8f8;
+    color: #222222;
+    border-radius: 4px;
+}
+
+.quikchat-theme-minimal .quikchat-input-area {
+    background-color: #ffffff;
+    border-top: 1px solid #e8e8e8;
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
+}
+
+.quikchat-theme-minimal .quikchat-input-textbox {
+    background-color: #ffffff;
+    color: #222222;
+    border: 1px solid #d0d0d0;
+    border-radius: 6px;
+}
+
+.quikchat-theme-minimal .quikchat-input-send-btn {
+    background-color: #111111;
     color: white;
     border: none;
+    border-radius: 6px;
+    font-weight: 600;
+}
+
+.quikchat-theme-minimal .quikchat-input-send-btn:hover {
+    background-color: #333333;
+}
+
+/* ================================== */
+/* QuikDown markdown styles           */
+/* Scoped per quikchat theme          */
+/* ================================== */
+
+/* --- Light themes (light, blue, warm) --- */
+
+.quikchat-theme-light .quikdown-pre,
+.quikchat-theme-blue .quikdown-pre,
+.quikchat-theme-warm .quikdown-pre,
+.quikchat-theme-glass .quikdown-pre,
+.quikchat-theme-gradient .quikdown-pre,
+.quikchat-theme-minimal .quikdown-pre {
+    background: #f4f4f4;
+    padding: 10px;
+    border-radius: 4px;
+    overflow-x: auto;
+    margin: 0.5em 0;
+}
+
+.quikchat-theme-light .quikdown-code,
+.quikchat-theme-blue .quikdown-code,
+.quikchat-theme-warm .quikdown-code,
+.quikchat-theme-glass .quikdown-code,
+.quikchat-theme-gradient .quikdown-code,
+.quikchat-theme-minimal .quikdown-code {
+    background: #f0f0f0;
+    padding: 2px 4px;
+    border-radius: 3px;
+    font-family: monospace;
+    font-size: 0.9em;
+}
+
+.quikchat-theme-light .quikdown-blockquote,
+.quikchat-theme-blue .quikdown-blockquote,
+.quikchat-theme-warm .quikdown-blockquote,
+.quikchat-theme-glass .quikdown-blockquote,
+.quikchat-theme-gradient .quikdown-blockquote,
+.quikchat-theme-minimal .quikdown-blockquote {
+    border-left: 4px solid #ddd;
+    margin-left: 0;
+    padding-left: 1em;
+    color: #555;
+}
+
+.quikchat-theme-light .quikdown-a,
+.quikchat-theme-blue .quikdown-a,
+.quikchat-theme-warm .quikdown-a,
+.quikchat-theme-glass .quikdown-a,
+.quikchat-theme-gradient .quikdown-a,
+.quikchat-theme-minimal .quikdown-a {
+    color: #06c;
+}
+
+.quikchat-theme-light .quikdown-th,
+.quikchat-theme-blue .quikdown-th,
+.quikchat-theme-warm .quikdown-th,
+.quikchat-theme-glass .quikdown-th,
+.quikchat-theme-gradient .quikdown-th,
+.quikchat-theme-minimal .quikdown-th {
+    border: 1px solid #ddd;
+    padding: 6px 8px;
+    background-color: #f2f2f2;
+    font-weight: bold;
+    text-align: left;
+}
+
+.quikchat-theme-light .quikdown-td,
+.quikchat-theme-blue .quikdown-td,
+.quikchat-theme-warm .quikdown-td,
+.quikchat-theme-glass .quikdown-td,
+.quikchat-theme-gradient .quikdown-td,
+.quikchat-theme-minimal .quikdown-td {
+    border: 1px solid #ddd;
+    padding: 6px 8px;
+    text-align: left;
+}
+
+.quikchat-theme-light .quikdown-hr,
+.quikchat-theme-blue .quikdown-hr,
+.quikchat-theme-warm .quikdown-hr,
+.quikchat-theme-glass .quikdown-hr,
+.quikchat-theme-gradient .quikdown-hr,
+.quikchat-theme-minimal .quikdown-hr {
+    border: none;
+    border-top: 1px solid #ddd;
+    margin: 0.5em 0;
+}
+
+/* --- Dark themes (dark, midnight, ocean) --- */
+
+.quikchat-theme-dark .quikdown-pre,
+.quikchat-theme-midnight .quikdown-pre,
+.quikchat-theme-ocean .quikdown-pre {
+    background: #2a2a2a;
+    padding: 10px;
+    border-radius: 4px;
+    overflow-x: auto;
+    margin: 0.5em 0;
+}
+
+.quikchat-theme-dark .quikdown-code,
+.quikchat-theme-midnight .quikdown-code,
+.quikchat-theme-ocean .quikdown-code {
+    background: #2a2a2a;
+    padding: 2px 4px;
+    border-radius: 3px;
+    font-family: monospace;
+    font-size: 0.9em;
+    color: #e0e0e0;
+}
+
+.quikchat-theme-dark .quikdown-blockquote,
+.quikchat-theme-midnight .quikdown-blockquote,
+.quikchat-theme-ocean .quikdown-blockquote {
+    border-left: 4px solid #3a3a3a;
+    margin-left: 0;
+    padding-left: 1em;
+    color: #bbb;
+}
+
+.quikchat-theme-dark .quikdown-a,
+.quikchat-theme-midnight .quikdown-a,
+.quikchat-theme-ocean .quikdown-a {
+    color: #6db3f2;
+}
+
+.quikchat-theme-dark .quikdown-th,
+.quikchat-theme-midnight .quikdown-th,
+.quikchat-theme-ocean .quikdown-th {
+    border: 1px solid #3a3a3a;
+    padding: 6px 8px;
+    background-color: #2a2a2a;
+    font-weight: bold;
+    text-align: left;
+    color: #e0e0e0;
+}
+
+.quikchat-theme-dark .quikdown-td,
+.quikchat-theme-midnight .quikdown-td,
+.quikchat-theme-ocean .quikdown-td {
+    border: 1px solid #3a3a3a;
+    padding: 6px 8px;
+    text-align: left;
+    color: #e0e0e0;
+}
+
+.quikchat-theme-dark .quikdown-hr,
+.quikchat-theme-midnight .quikdown-hr,
+.quikchat-theme-ocean .quikdown-hr {
+    border: none;
+    border-top: 1px solid #3a3a3a;
+    margin: 0.5em 0;
+}
+
+.quikchat-theme-dark .quikdown-h1,
+.quikchat-theme-dark .quikdown-h2,
+.quikchat-theme-dark .quikdown-h3,
+.quikchat-theme-dark .quikdown-h4,
+.quikchat-theme-dark .quikdown-li,
+.quikchat-theme-midnight .quikdown-h1,
+.quikchat-theme-midnight .quikdown-h2,
+.quikchat-theme-midnight .quikdown-h3,
+.quikchat-theme-midnight .quikdown-h4,
+.quikchat-theme-midnight .quikdown-li,
+.quikchat-theme-ocean .quikdown-h1,
+.quikchat-theme-ocean .quikdown-h2,
+.quikchat-theme-ocean .quikdown-h3,
+.quikchat-theme-ocean .quikdown-h4,
+.quikchat-theme-ocean .quikdown-li {
+    color: #e0e0e0;
+}
+
+/* --- Modern theme (bubble style) --- */
+
+.quikchat-theme-modern .quikdown-pre {
+    background: #f4f4f4;
+    padding: 10px;
     border-radius: 4px;
+    overflow-x: auto;
+    margin: 0.5em 0;
+}
+
+.quikchat-theme-modern .quikdown-code {
+    background: rgba(0, 0, 0, 0.06);
+    padding: 2px 4px;
+    border-radius: 3px;
+    font-family: monospace;
+    font-size: 0.9em;
+}
+
+/* In blue bubbles (right-aligned/user messages), invert code blocks */
+.quikchat-theme-modern .quikchat-align-right .quikdown-pre {
+    background: rgba(255, 255, 255, 0.15);
+}
+
+.quikchat-theme-modern .quikchat-align-right .quikdown-code {
+    background: rgba(255, 255, 255, 0.2);
+    color: #fff;
+}
+
+.quikchat-theme-modern .quikchat-align-right .quikdown-a {
+    color: #cce5ff;
+}
+
+.quikchat-theme-modern .quikchat-align-left .quikdown-a {
+    color: #06c;
+}
+
+.quikchat-theme-modern .quikdown-blockquote {
+    border-left: 4px solid #ddd;
+    margin-left: 0;
+    padding-left: 1em;
+    color: #666;
+}
+
+/* --- Debug theme --- */
+
+.quikchat-theme-debug .quikdown-pre {
+    background: #f4f4f4;
+    padding: 10px;
+    border-radius: 4px;
+    overflow-x: auto;
+    margin: 0.5em 0;
+}
+
+.quikchat-theme-debug .quikdown-code {
+    background: #e8e8e8;
+    padding: 2px 4px;
+    border-radius: 3px;
+    font-family: monospace;
+    font-size: 0.9em;
 }
-