quikchat 1.1.17 → 1.2.4

package/dist/quikchat.css

@@ -1,98 +1,228 @@
-/* 
+/*
  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;
+.quikchat-user-label {
+    font-weight: 700;
+    font-size: 1em;
 }
 
-/* Right-aligned long/multi-line messages */
-.quikchat-message.right .quikchat-right-multiline {
-    text-align: left;
-    word-wrap: break-word;
-}
-
-
 .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-max-height: 120px;
 }
 
 .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 +231,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,70 +244,24 @@
     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-messages-area .quikchat-message {
-    padding-left : 8px;
-    padding-right: 8px;
-    border-radius: 0.5em;
- }
-
-/* 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 */
-}
-
-/* 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 */
-}
-
-/* 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 */
-}
-
-/* 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 */
-}
-/* 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%; 
-}
-
-/* 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-debug .quikchat-input-area {
     background-color: lightgreen;
-    border-bottom-left-radius : 10px;
-    border-bottom-right-radius : 10px;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
 }
 
 .quikchat-theme-debug .quikchat-input-textbox {
     background-color: #eee;
+    color: #333;
     border: 1px solid #ccc;
     border-radius: 4px;
-    font-size: 14px;
 }
 
 .quikchat-theme-debug .quikchat-input-send-btn {
@@ -191,8 +271,14 @@
     border-radius: 4px;
 }
 
-/* ********************************** */
-/* quikchat theme dark                */
+.quikchat-theme-debug .quikchat-input-send-btn:hover {
+    background-color: #43a047;
+}
+
+/* ================================== */
+/* Theme: dark                        */
+/* ================================== */
+
 .quikchat-theme-dark {
     border: 1px solid #555555;
     border-radius: 10px;
@@ -204,8 +290,6 @@
 .quikchat-theme-dark .quikchat-title-area {
     background-color: #212121;
     color: #eceff1;
-    padding: 8px;
-    font-weight: 600;
     border-bottom: 1px solid #37474f;
 }
 
@@ -220,75 +304,24 @@
     color: #eceff1;
     border-radius: 4px;
 }
-.quikchat-theme-darl .quikchat-messages-area-alt .quikchat-message:nth-child(even) {
+
+.quikchat-theme-dark .quikchat-messages-area-alt .quikchat-message:nth-child(even) {
     background-color: #5a5a5a;
     color: #fbfbfb;
     border-radius: 4px;
 }
 
-/********** User Messages **********
- *  Single / Multiline
- */
-
- .quikchat-theme-dark .quikchat-messages-area .quikchat-message {
-    padding-left : 8px;
-    padding-right: 8px;
-    border-radius: 0.5em;
- }
-
-/* 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 */
-}
-
-/* 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 */
-}
-
-/* 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 */
-}
-
-/* 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 */
-}
-/* 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%; 
-}
-
-/* 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-dark .quikchat-input-area {
-    padding: 8px;
     background-color: #263238;
-
-    border-bottom-left-radius : 10px;
-    border-bottom-right-radius : 10px;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
 }
 
 .quikchat-theme-dark .quikchat-input-textbox {
-    width: 75%;
-    padding: 8px;
     background-color: #424242;
+    color: #eceff1;
     border: 1px solid #555;
     border-radius: 4px;
-    font-size: 14px;
-    color: #eceff1;
 }
 
 .quikchat-theme-dark .quikchat-input-send-btn {
@@ -296,107 +329,601 @@
     color: white;
     border: none;
     border-radius: 4px;
-    padding: 8px 16px;
-    margin-left: 10px;
-    cursor: pointer;
 }
 
-/* ********************************** */
-/* quikchat theme light */
+.quikchat-theme-dark .quikchat-input-send-btn:hover {
+    background-color: #2e7d32;
+}
+
+/* ================================== */
+/* Theme: light                       */
+/* ================================== */
 
 .quikchat-theme-light {
     border: 1px solid #cccccc;
     border-radius: 10px;
     background-color: #f9f9f9;
 }
-  
+
 .quikchat-theme-light .quikchat-title-area {
-    padding: 8px;
     color: #333;
 }
-  
+
 .quikchat-theme-light .quikchat-messages-area {
     background-color: #ffffffe2;
     color: #333;
     border-radius: 1em;
 }
-  
+
 .quikchat-theme-light .quikchat-messages-area-alt .quikchat-message:nth-child(odd) {
-    background-color: #fffffff0;
+    background-color: #ffffff;
     color: #005662;
+    border-radius: 4px;
 }
+
 .quikchat-theme-light .quikchat-messages-area-alt .quikchat-message:nth-child(even) {
-    background-color: #eeeeeee9;
+    background-color: #e8e8e8;
     color: #353535;
+    border-radius: 4px;
 }
 
-/********** User Messages **********
- *  Single / Multiline
- */
+.quikchat-theme-light .quikchat-input-area {
+    background-color: #f9f9f9;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+}
 
- .quikchat-theme-light .quikchat-messages-area .quikchat-message {
-    padding-left : 8px;
-    padding-right: 8px;
-    border-radius: 0.5em;
- }
+.quikchat-theme-light .quikchat-input-textbox {
+    background-color: #ffffff;
+    color: #333;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
 
-/* 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-light .quikchat-input-send-btn {
+    background-color: #4caf50;
+    color: white;
+    border: none;
+    border-radius: 4px;
 }
 
-/* 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-light .quikchat-input-send-btn:hover {
+    background-color: #43a047;
 }
 
-/* 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 */
+/* ================================== */
+/* Theme: blue                        */
+/* Professional steel-blue accents    */
+/* ================================== */
+
+.quikchat-theme-blue {
+    border: 1px solid #b0c4d8;
+    border-radius: 10px;
+    background-color: #eef3f8;
 }
 
-/* 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 */
+.quikchat-theme-blue .quikchat-title-area {
+    background-color: #3a6ea5;
+    color: #fff;
+    border-radius: 9px 9px 0 0;
 }
-/* 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-blue .quikchat-messages-area {
+    background-color: #f5f8fb;
+    color: #1a2a3a;
 }
 
-/* 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-blue .quikchat-messages-area-alt .quikchat-message:nth-child(odd) {
+    background-color: #f5f8fb;
+    color: #1a2a3a;
+    border-radius: 4px;
 }
-/*****
- *  Input Area
- */
-.quikchat-theme-light .quikchat-input-area {
-    background-color: #f9f9f9;
-    border-bottom-left-radius : 10px;
-    border-bottom-right-radius : 10px;
+
+.quikchat-theme-blue .quikchat-messages-area-alt .quikchat-message:nth-child(even) {
+    background-color: #dde8f0;
+    color: #1a2a3a;
+    border-radius: 4px;
 }
-  
-.quikchat-theme-light .quikchat-input-textbox {
-    background-color: #ffffff;
-    border: 1px solid #ccc;
+
+.quikchat-theme-blue .quikchat-input-area {
+    background-color: #eef3f8;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+}
+
+.quikchat-theme-blue .quikchat-input-textbox {
+    background-color: #fff;
+    color: #1a2a3a;
+    border: 1px solid #b0c4d8;
     border-radius: 4px;
-    font-size: 14px;
-    color: #333;
 }
-  
-.quikchat-theme-light .quikchat-input-send-btn {
-    background-color: #4caf50;
+
+.quikchat-theme-blue .quikchat-input-send-btn {
+    background-color: #3a6ea5;
+    color: white;
+    border: none;
+    border-radius: 4px;
+}
+
+.quikchat-theme-blue .quikchat-input-send-btn:hover {
+    background-color: #2d5a8a;
+}
+
+/* ================================== */
+/* Theme: warm                        */
+/* Soft cream with muted earth tones  */
+/* ================================== */
+
+.quikchat-theme-warm {
+    border: 1px solid #d4b896;
+    border-radius: 10px;
+    background-color: #faf6f0;
+}
+
+.quikchat-theme-warm .quikchat-title-area {
+    background-color: #faf6f0;
+    color: #5a3e28;
+    border-bottom: 1px solid #e0cdb8;
+}
+
+.quikchat-theme-warm .quikchat-messages-area {
+    background-color: #fdf9f4;
+    color: #3a2a1a;
+}
+
+.quikchat-theme-warm .quikchat-messages-area-alt .quikchat-message:nth-child(odd) {
+    background-color: #fdf9f4;
+    color: #3a2a1a;
+    border-radius: 4px;
+}
+
+.quikchat-theme-warm .quikchat-messages-area-alt .quikchat-message:nth-child(even) {
+    background-color: #f0e6d8;
+    color: #3a2a1a;
+    border-radius: 4px;
+}
+
+.quikchat-theme-warm .quikchat-input-area {
+    background-color: #faf6f0;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+}
+
+.quikchat-theme-warm .quikchat-input-textbox {
+    background-color: #fff;
+    color: #3a2a1a;
+    border: 1px solid #d4b896;
+    border-radius: 4px;
+}
+
+.quikchat-theme-warm .quikchat-input-send-btn {
+    background-color: #b5784a;
+    color: white;
+    border: none;
+    border-radius: 4px;
+}
+
+.quikchat-theme-warm .quikchat-input-send-btn:hover {
+    background-color: #9a6438;
+}
+
+/* ================================== */
+/* Theme: midnight                    */
+/* Deep navy with brighter accents    */
+/* ================================== */
+
+.quikchat-theme-midnight {
+    border: 1px solid #2a3a5c;
+    border-radius: 10px;
+    background-color: #0f1626;
+    color: #c8d0e0;
+}
+
+.quikchat-theme-midnight .quikchat-title-area {
+    background-color: #0f1626;
+    color: #8eaadc;
+    border-bottom: 1px solid #1e2d4a;
+}
+
+.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: 4px;
+}
+
+.quikchat-theme-midnight .quikchat-messages-area-alt .quikchat-message:nth-child(even) {
+    background-color: #162040;
+    color: #d0d8e8;
+    border-radius: 4px;
+}
+
+.quikchat-theme-midnight .quikchat-input-area {
+    background-color: #0f1626;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+}
+
+.quikchat-theme-midnight .quikchat-input-textbox {
+    background-color: #1a2540;
+    color: #c8d0e0;
+    border: 1px solid #2a3a5c;
+    border-radius: 4px;
+}
+
+.quikchat-theme-midnight .quikchat-input-send-btn {
+    background-color: #4a6fa5;
+    color: white;
+    border: none;
+    border-radius: 4px;
+}
+
+.quikchat-theme-midnight .quikchat-input-send-btn:hover {
+    background-color: #5a80b8;
+}
+
+/* ================================== */
+/* Theme: ocean                       */
+/* Teal/cyan on deep blue             */
+/* ================================== */
+
+.quikchat-theme-ocean {
+    border: 1px solid #1a6b7a;
+    border-radius: 10px;
+    background-color: #0d2b36;
+    color: #d4edee;
+}
+
+.quikchat-theme-ocean .quikchat-title-area {
+    background-color: #0d2b36;
+    color: #5ec4d4;
+    border-bottom: 1px solid #1a4a5a;
+}
+
+.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: 4px;
+}
+
+.quikchat-theme-ocean .quikchat-messages-area-alt .quikchat-message:nth-child(even) {
+    background-color: #11384a;
+    color: #d4edee;
+    border-radius: 4px;
+}
+
+.quikchat-theme-ocean .quikchat-input-area {
+    background-color: #0d2b36;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+}
+
+.quikchat-theme-ocean .quikchat-input-textbox {
+    background-color: #163a48;
+    color: #d4edee;
+    border: 1px solid #1a5a6a;
+    border-radius: 4px;
+}
+
+.quikchat-theme-ocean .quikchat-input-send-btn {
+    background-color: #1a8a6a;
     color: white;
     border: none;
     border-radius: 4px;
 }
-  
+
+.quikchat-theme-ocean .quikchat-input-send-btn:hover {
+    background-color: #1fa07a;
+}
+
+/* ================================== */
+/* Theme: modern                     */
+/* Message bubbles, ChatGPT-style    */
+/* ================================== */
+
+.quikchat-theme-modern {
+    border: 1px solid #e5e5e5;
+    border-radius: 12px;
+    background-color: #ffffff;
+}
+
+.quikchat-theme-modern .quikchat-title-area {
+    background-color: #ffffff;
+    color: #1a1a1a;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.quikchat-theme-modern .quikchat-messages-area {
+    background-color: #ffffff;
+    color: #1a1a1a;
+}
+
+.quikchat-theme-modern .quikchat-message {
+    display: flex;
+    flex-direction: column;
+}
+
+.quikchat-theme-modern .quikchat-align-right {
+    align-items: flex-end;
+}
+
+.quikchat-theme-modern .quikchat-align-left {
+    align-items: flex-start;
+}
+
+.quikchat-theme-modern .quikchat-align-center {
+    align-items: center;
+}
+
+.quikchat-theme-modern .quikchat-message-content {
+    max-width: 80%;
+    border-radius: 16px;
+}
+
+.quikchat-theme-modern .quikchat-align-right .quikchat-message-content {
+    background-color: #0b93f6;
+    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;
+}
+
+.quikchat-theme-modern .quikchat-input-area {
+    background-color: #ffffff;
+    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-color: #0b93f6;
+    color: white;
+    border: none;
+    border-radius: 20px;
+}
+
+.quikchat-theme-modern .quikchat-input-send-btn:hover {
+    background-color: #0a84de;
+}
+
+/* ================================== */
+/* 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 {
+    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 {
+    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 {
+    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 {
+    color: #06c;
+}
+
+.quikchat-theme-light .quikdown-th,
+.quikchat-theme-blue .quikdown-th,
+.quikchat-theme-warm .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 {
+    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 {
+    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;
+}