quikchat/dist/quikchat.css

quikchat is a simple vanilla (no dependancies) JavaScript chat control for browsers

/*
 quikchat.css see www.github.com/deftio/quikchat for more info
 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: 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;
    font-weight: 600;
    font-size: 1.3em;
}

.quikchat-messages-area {
    flex: 1;
    min-height: 0;
    padding: 8px;
    overflow-y: auto;
    position: relative;
}

.quikchat-message {
    padding: 4px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.quikchat-user-label {
    font-weight: 700;
    font-size: 1em;
}

.quikchat-input-area {
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    padding: 8px;
    min-height: 48px;
}

.quikchat-input-textbox {
    flex-grow: 1;
    min-height: 36px;
    min-width: 0;
    resize: none;
    padding: 6px 8px;
    height: auto;
    overflow-y: hidden;
    font-family: inherit;
    font-size: inherit;
}

.quikchat-input-send-btn {
    margin-left: 8px;
    padding: 8px;
    min-height: 36px;
    min-width: 5rem;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    font-size: inherit;
    align-self: flex-end;
}

/* ================================== */
/* 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;
    background-color: mediumorchid;
}

.quikchat-theme-debug .quikchat-title-area {
    background-color: lightblue;
    color: #333;
}

.quikchat-theme-debug .quikchat-messages-area {
    border-radius: 1em;
    background-color: lightsalmon;
}

.quikchat-theme-debug .quikchat-messages-area-alt .quikchat-message:nth-child(odd) {
    background-color: lightseagreen;
    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;
}

.quikchat-theme-debug .quikchat-input-area {
    background-color: lightgreen;
    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;
}

.quikchat-theme-debug .quikchat-input-send-btn {
    background-color: #4caf50;
    color: white;
    border: none;
    border-radius: 4px;
}

.quikchat-theme-debug .quikchat-input-send-btn:hover {
    background-color: #43a047;
}

/* ================================== */
/* 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;
}

.quikchat-theme-dark .quikchat-title-area {
    background-color: #1a1a1a;
    color: #f0f0f0;
    border-bottom: 1px solid #2a2a2a;
}

.quikchat-theme-dark .quikchat-messages-area {
    background-color: #1a1a1a;
    color: #e8e8e8;
}

.quikchat-theme-dark .quikchat-messages-area-alt .quikchat-message:nth-child(odd) {
    background-color: #1e1e1e;
    color: #e8e8e8;
    border-radius: 6px;
}

.quikchat-theme-dark .quikchat-messages-area-alt .quikchat-message:nth-child(even) {
    background-color: #262626;
    color: #f0f0f0;
    border-radius: 6px;
}

.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-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: 8px;
}

.quikchat-theme-light .quikchat-input-send-btn:hover {
    background-color: #1d4ed8;
}

/* ================================== */
/* 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;
}

.quikchat-theme-midnight .quikchat-input-send-btn:hover {
    background: linear-gradient(135deg, #5a80b8, #4a6fa5);
}

/* ================================== */
/* 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-ocean .quikchat-title-area {
    background: linear-gradient(135deg, #0d3a4a, #0d2b36);
    color: #5ec4d4;
    border-bottom: 1px solid #1a4a5a;
    border-radius: 11px 11px 0 0;
}

.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-ocean .quikchat-input-area {
    background-color: #0d2b36;
    border-top: 1px solid #1a4a5a;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.quikchat-theme-ocean .quikchat-input-textbox {
    background-color: #163a48;
    color: #d4edee;
    border: 1px solid #1a5a6a;
    border-radius: 8px;
}

.quikchat-theme-ocean .quikchat-input-send-btn {
    background: linear-gradient(135deg, #1a8a6a, #15705a);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
}

.quikchat-theme-ocean .quikchat-input-send-btn:hover {
    background: linear-gradient(135deg, #1fa07a, #1a8a6a);
}

/* ================================== */
/* 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);
}

.quikchat-theme-modern .quikchat-title-area {
    background-color: #fafafa;
    color: #1a1a1a;
    border-bottom: 1px solid #f0f0f0;
    border-radius: 11px 11px 0 0;
}

.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: 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: 20px;
    font-weight: 600;
}

.quikchat-theme-modern .quikchat-input-send-btn:hover {
    background: linear-gradient(135deg, #0a84de, #006abc);
}

/* ================================== */
/* 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-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-glass .quikchat-messages-area {
    background: rgba(255, 255, 255, 0.08);
    color: #1a1a2e;
}

.quikchat-theme-glass .quikchat-messages-area-alt .quikchat-message:nth-child(odd) {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 8px;
}

.quikchat-theme-glass .quikchat-messages-area-alt .quikchat-message:nth-child(even) {
    background: rgba(255, 255, 255, 0.22);
    border-radius: 8px;
}

.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-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;
}

.quikchat-theme-glass .quikchat-input-textbox::placeholder {
    color: rgba(26, 26, 46, 0.5);
}

.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);
}

.quikchat-theme-glass .quikchat-input-send-btn:hover {
    background: linear-gradient(135deg, #5a6fd6, #6a4196);
}

/* ================================== */
/* 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);
}

.quikchat-theme-gradient .quikchat-title-area {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #ffffff;
    border-radius: 11px 11px 0 0;
}

.quikchat-theme-gradient .quikchat-messages-area {
    background-color: #ffffff;
    color: #2d2d3a;
}

.quikchat-theme-gradient .quikchat-messages-area-alt .quikchat-message:nth-child(odd) {
    background-color: #ffffff;
    color: #2d2d3a;
    border-radius: 6px;
}

.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;
    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;
}

.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;
}