/**
 * Haus WP RAG - Chat Widget Styles
 *
 * Theme system uses CSS custom properties. Override any variable to customise.
 *
 * AVAILABLE CUSTOM PROPERTIES
 * ─────────────────────────────────────────────────────────────────────────────
 * --hauswprag-primary          Button / header / accent colour
 * --hauswprag-primary-hover    Hover state of primary colour
 * --hauswprag-bg               Widget background
 * --hauswprag-bg-user          User message bubble background
 * --hauswprag-bg-assistant     Assistant message bubble background
 * --hauswprag-text             Primary text colour
 * --hauswprag-text-muted       Secondary / placeholder text colour
 * --hauswprag-border           Border / divider colour
 * --hauswprag-radius           Corner radius (widget + bubbles)
 * --hauswprag-shadow           Box shadow applied to the widget
 * --hauswprag-font-family      Font stack
 * --hauswprag-font-size        Base font size
 *
 * BUILT-IN THEMES (set via shortcode or admin default)
 * ─────────────────────────────────────────────────────────────────────────────
 * modern      (free)  Classic blue — default
 * dark        (free)  Dark mode
 * minimal     (free)  High-contrast monochrome
 * light       (pro)   Soft indigo on light grey
 * sand        (pro)   Warm earthy amber
 * light-blue  (pro)   Clear sky / ocean
 * liquid      (pro)   Deep violet with wide radius
 *
 * CUSTOM CSS
 * ─────────────────────────────────────────────────────────────────────────────
 * Upload a .css file under Settings → Chat Widget → Custom CSS (Pro) to
 * override any variable or structural rule. Your CSS is loaded after all
 * built-in styles, so specificity wins automatically.
 *
 * Example — change the primary colour only:
 *   .hauswprag-widget { --hauswprag-primary: #e11d48; --hauswprag-primary-hover: #be123c; }
 *
 * @package HausWPRAG
 */

/* ─── Base / Modern (default) ────────────────────────────────────────────── */
.hauswprag-widget {
    --hauswprag-primary:        #0073aa;
    --hauswprag-primary-hover:  #005a87;
    --hauswprag-bg:             #ffffff;
    --hauswprag-bg-user:        #e3f2fd;
    --hauswprag-bg-assistant:   #f5f5f5;
    --hauswprag-text:           #333333;
    --hauswprag-text-muted:     #666666;
    --hauswprag-border:         #e0e0e0;
    --hauswprag-radius:         12px;
    --hauswprag-shadow:         0 4px 20px rgba(0, 0, 0, 0.15);
    --hauswprag-font-family:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --hauswprag-font-size:      14px;

    font-family: var(--hauswprag-font-family);
    font-size:   var(--hauswprag-font-size);
    line-height: 1.5;
    box-sizing:  border-box;
}

.hauswprag-widget *,
.hauswprag-widget *::before,
.hauswprag-widget *::after {
    box-sizing: inherit;
}

/* ─── Theme: Dark ─────────────────────────────────────────────────────────── */
.hauswprag-widget.theme-dark {
    --hauswprag-primary:        #4fc3f7;
    --hauswprag-primary-hover:  #29b6f6;
    --hauswprag-bg:             #1e1e1e;
    --hauswprag-bg-user:        #2d3748;
    --hauswprag-bg-assistant:   #2a2a2a;
    --hauswprag-text:           #e0e0e0;
    --hauswprag-text-muted:     #a0a0a0;
    --hauswprag-border:         #404040;
    --hauswprag-shadow:         0 4px 20px rgba(0, 0, 0, 0.5);
}

/* ─── Theme: Minimal ──────────────────────────────────────────────────────── */
.hauswprag-widget.theme-minimal {
    --hauswprag-primary:        #111111;
    --hauswprag-primary-hover:  #333333;
    --hauswprag-bg:             #ffffff;
    --hauswprag-bg-user:        #f0f0f0;
    --hauswprag-bg-assistant:   #f8f8f8;
    --hauswprag-text:           #111111;
    --hauswprag-text-muted:     #777777;
    --hauswprag-border:         #dddddd;
    --hauswprag-radius:         4px;
    --hauswprag-shadow:         0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ─── Theme: Light (Pro) ──────────────────────────────────────────────────── */
.hauswprag-widget.theme-light {
    --hauswprag-primary:        #6366f1;
    --hauswprag-primary-hover:  #4f46e5;
    --hauswprag-bg:             #fafafa;
    --hauswprag-bg-user:        #eef2ff;
    --hauswprag-bg-assistant:   #f3f4f6;
    --hauswprag-text:           #1f2937;
    --hauswprag-text-muted:     #6b7280;
    --hauswprag-border:         #e5e7eb;
    --hauswprag-radius:         16px;
    --hauswprag-shadow:         0 8px 32px rgba(99, 102, 241, 0.15);
}

/* ─── Theme: Sand (Pro) ───────────────────────────────────────────────────── */
.hauswprag-widget.theme-sand {
    --hauswprag-primary:        #b45309;
    --hauswprag-primary-hover:  #92400e;
    --hauswprag-bg:             #fef9f0;
    --hauswprag-bg-user:        #fef3c7;
    --hauswprag-bg-assistant:   #fdf4e3;
    --hauswprag-text:           #292524;
    --hauswprag-text-muted:     #78716c;
    --hauswprag-border:         #e7e5e4;
    --hauswprag-radius:         8px;
    --hauswprag-shadow:         0 4px 20px rgba(180, 83, 9, 0.12);
}

/* ─── Theme: Light Blue (Pro) ─────────────────────────────────────────────── */
.hauswprag-widget.theme-light-blue {
    --hauswprag-primary:        #0ea5e9;
    --hauswprag-primary-hover:  #0284c7;
    --hauswprag-bg:             #f0f9ff;
    --hauswprag-bg-user:        #e0f2fe;
    --hauswprag-bg-assistant:   #f8fbff;
    --hauswprag-text:           #0c4a6e;
    --hauswprag-text-muted:     #64748b;
    --hauswprag-border:         #bae6fd;
    --hauswprag-radius:         12px;
    --hauswprag-shadow:         0 4px 24px rgba(14, 165, 233, 0.15);
}

/* ─── Theme: Liquid (Pro) ─────────────────────────────────────────────────── */
.hauswprag-widget.theme-liquid {
    --hauswprag-primary:        #7c3aed;
    --hauswprag-primary-hover:  #6d28d9;
    --hauswprag-bg:             #fdf4ff;
    --hauswprag-bg-user:        #f3e8ff;
    --hauswprag-bg-assistant:   #faf5ff;
    --hauswprag-text:           #1e1b4b;
    --hauswprag-text-muted:     #7e22ce;
    --hauswprag-border:         #ddd6fe;
    --hauswprag-radius:         20px;
    --hauswprag-shadow:         0 10px 40px rgba(124, 58, 237, 0.2);
}

/* ─── Toggle Button ───────────────────────────────────────────────────────── */
.hauswprag-toggle {
    position:        fixed;
    bottom:          20px;
    right:           20px;
    width:           56px;
    height:          56px;
    border-radius:   50%;
    background:      var(--hauswprag-primary);
    color:           white;
    border:          none;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    box-shadow:      var(--hauswprag-shadow);
    transition:      transform 0.2s ease, background 0.2s ease;
    z-index:         9998;
}

.hauswprag-toggle:hover {
    background:  var(--hauswprag-primary-hover);
    transform:   scale(1.05);
}

.hauswprag-toggle:focus {
    outline:        2px solid var(--hauswprag-primary);
    outline-offset: 2px;
}

[data-position="bottom-left"] .hauswprag-toggle {
    right: auto;
    left:  20px;
}

/* ─── Chat Container ──────────────────────────────────────────────────────── */
.hauswprag-container {
    position:   fixed;
    bottom:     90px;
    right:      20px;
    width:      450px;
    max-width:  calc(100vw - 40px);
    height:     550px;
    max-height: calc(100vh - 120px);
    background: var(--hauswprag-bg);
    border-radius: var(--hauswprag-radius);
    box-shadow:    var(--hauswprag-shadow);
    display:       none;
    flex-direction: column;
    overflow:      hidden;
    z-index:       9999;
}

[data-position="bottom-left"] .hauswprag-container {
    right: auto;
    left:  20px;
}

.hauswprag-container.is-open {
    display: flex;
}

.hauswprag-container.is-inline {
    position:   relative;
    bottom:     auto;
    right:      auto;
    left:       auto;
    width:      100%;
    height:     100%;
    max-width:  none;
    max-height: none;
    display:    flex;
    border:     1px solid var(--hauswprag-border);
}

[data-position="inline"] .hauswprag-toggle {
    display: none;
}

/* ─── Header ──────────────────────────────────────────────────────────────── */
.hauswprag-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         16px;
    background:      var(--hauswprag-primary);
    color:           white;
    flex-shrink:     0;
}

.hauswprag-title {
    font-weight: 600;
    font-size:   16px;
}

.hauswprag-close {
    background:      none;
    border:          none;
    color:           white;
    cursor:          pointer;
    padding:         4px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    border-radius:   4px;
    transition:      background 0.2s ease;
    opacity:         0.8;
}

.hauswprag-close:hover {
    background: rgba(255, 255, 255, 0.2);
    opacity:    1;
}

/* ─── Messages ────────────────────────────────────────────────────────────── */
.hauswprag-messages {
    flex:           1;
    overflow-y:     auto;
    padding:        16px;
    display:        flex;
    flex-direction: column;
    gap:            12px;
}

.hauswprag-message {
    display:        flex;
    flex-direction: column;
    max-width:      85%;
}

.hauswprag-message.user      { align-self: flex-end; }
.hauswprag-message.assistant { align-self: flex-start; }

.hauswprag-message-content {
    padding:       12px 16px;
    border-radius: var(--hauswprag-radius);
    word-wrap:     break-word;
}

.hauswprag-message.user .hauswprag-message-content {
    background:               var(--hauswprag-bg-user);
    color:                    var(--hauswprag-text);
    border-bottom-right-radius: 4px;
}

.hauswprag-message.assistant .hauswprag-message-content {
    background:              var(--hauswprag-bg-assistant);
    color:                   var(--hauswprag-text);
    border-bottom-left-radius: 4px;
}

.hauswprag-message-content p          { margin: 0 0 8px; }
.hauswprag-message-content p:last-child { margin-bottom: 0; }

/* ─── Markdown Rendering ─────────────────────────────────────────────────── */
.hauswprag-message-content h2,
.hauswprag-message-content h3,
.hauswprag-message-content h4 {
    margin:      12px 0 6px;
    font-weight: 600;
    line-height: 1.3;
}
.hauswprag-message-content h2:first-child,
.hauswprag-message-content h3:first-child,
.hauswprag-message-content h4:first-child { margin-top: 0; }

.hauswprag-message-content h2 { font-size: 1.2em; }
.hauswprag-message-content h3 { font-size: 1.1em; }
.hauswprag-message-content h4 { font-size: 1em; }

.hauswprag-message-content strong { font-weight: 600; }
.hauswprag-message-content em     { font-style: italic; }

.hauswprag-message-content code {
    background:    rgba(0, 0, 0, 0.06);
    padding:       2px 5px;
    border-radius: 3px;
    font-family:   ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size:     0.9em;
}

.hauswprag-message-content pre {
    background:    rgba(0, 0, 0, 0.06);
    padding:       12px;
    border-radius: 6px;
    overflow-x:    auto;
    margin:        8px 0;
}

.hauswprag-message-content pre code {
    background:  transparent;
    padding:     0;
    font-size:   0.85em;
    white-space: pre;
}

.hauswprag-message-content ul,
.hauswprag-message-content ol {
    margin:       8px 0;
    padding-left: 20px;
}

.hauswprag-message-content li { margin: 4px 0; }

.hauswprag-message-content blockquote {
    border-left:  3px solid var(--hauswprag-primary);
    margin:       8px 0;
    padding-left: 12px;
    color:        var(--hauswprag-text-muted);
    font-style:   italic;
}

.hauswprag-message-content a {
    color:           var(--hauswprag-primary);
    text-decoration: underline;
}
.hauswprag-message-content a:hover { text-decoration: none; }

.hauswprag-message-content hr {
    border:     none;
    border-top: 1px solid var(--hauswprag-border);
    margin:     12px 0;
}

/* Dark theme adjustments for markdown */
.hauswprag-widget.theme-dark .hauswprag-message-content code,
.hauswprag-widget.theme-dark .hauswprag-message-content pre {
    background: rgba(255, 255, 255, 0.1);
}

/* ─── Typing Indicator ────────────────────────────────────────────────────── */
.hauswprag-typing {
    display:       flex;
    align-items:   center;
    gap:           4px;
    padding:       12px 16px;
    background:    var(--hauswprag-bg-assistant);
    border-radius: var(--hauswprag-radius);
    border-bottom-left-radius: 4px;
    max-width:     80px;
}

.hauswprag-typing-dot {
    width:         8px;
    height:        8px;
    background:    var(--hauswprag-text-muted);
    border-radius: 50%;
    animation:     hauswprag-bounce 1.4s ease-in-out infinite;
}

.hauswprag-typing-dot:nth-child(1) { animation-delay: 0s; }
.hauswprag-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.hauswprag-typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes hauswprag-bounce {
    0%, 60%, 100% { transform: translateY(0); }
    30%            { transform: translateY(-8px); }
}

/* ─── Feedback ────────────────────────────────────────────────────────────── */
.hauswprag-message-feedback {
    display:    flex;
    align-items: center;
    gap:        4px;
    margin-top: 6px;
    opacity:    0.6;
    transition: opacity 0.2s ease;
}

.hauswprag-message:hover .hauswprag-message-feedback { opacity: 1; }

.hauswprag-feedback-btn {
    background:      transparent;
    border:          1px solid var(--hauswprag-border);
    border-radius:   4px;
    padding:         4px 8px;
    cursor:          pointer;
    font-size:       14px;
    line-height:     1;
    transition:      all 0.2s ease;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.hauswprag-feedback-btn:hover {
    background:    var(--hauswprag-bg-assistant);
    border-color:  var(--hauswprag-text-muted);
}

.hauswprag-feedback-btn:disabled  { cursor: default; opacity: 0.5; }

.hauswprag-feedback-btn.selected {
    opacity:      1 !important;
    background:   var(--hauswprag-bg-user);
    border-color: var(--hauswprag-primary);
}

.hauswprag-feedback-submitted .hauswprag-feedback-btn:not(.selected) { display: none; }

.hauswprag-feedback-thanks {
    font-size: 12px;
    color:     var(--hauswprag-text-muted);
    margin-left: 4px;
}

/* ─── Sources ─────────────────────────────────────────────────────────────── */
.hauswprag-sources {
    padding:      8px 16px;
    border-top:   1px solid var(--hauswprag-border);
    background:   var(--hauswprag-bg);
    font-size:    12px;
    flex-shrink:  0;
}

.hauswprag-sources-label {
    color:        var(--hauswprag-text-muted);
    font-weight:  500;
    margin-right: 8px;
}

.hauswprag-sources-list { display: inline; }

.hauswprag-sources-list a {
    color:           var(--hauswprag-primary);
    text-decoration: none;
    margin-right:    8px;
}

.hauswprag-sources-list a:hover { text-decoration: underline; }

/* ─── Input Area ──────────────────────────────────────────────────────────── */
.hauswprag-input-area {
    display:     flex;
    align-items: flex-end;
    gap:         8px;
    padding:     12px 16px;
    border-top:  1px solid var(--hauswprag-border);
    background:  var(--hauswprag-bg);
    flex-shrink: 0;
}

.hauswprag-reset {
    width:           40px;
    height:          40px;
    border-radius:   50%;
    background:      var(--hauswprag-primary);
    color:           white;
    border:          none;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    transition:      background 0.2s ease, transform 0.1s ease;
}

.hauswprag-reset:hover  { background: var(--hauswprag-primary-hover); }
.hauswprag-reset:active { transform: scale(0.95); }

.hauswprag-input {
    flex:        1;
    border:      1px solid var(--hauswprag-border);
    border-radius: 20px;
    padding:     10px 16px;
    font-family: inherit;
    font-size:   inherit;
    resize:      none;
    max-height:  120px;
    line-height: 1.4;
    background:  var(--hauswprag-bg);
    color:       var(--hauswprag-text);
}

.hauswprag-input:focus       { outline: none; border-color: var(--hauswprag-primary); }
.hauswprag-input::placeholder { color: var(--hauswprag-text-muted); }

.hauswprag-send {
    width:           40px;
    height:          40px;
    border-radius:   50%;
    background:      var(--hauswprag-primary);
    color:           white;
    border:          none;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    transition:      background 0.2s ease, transform 0.1s ease;
}

.hauswprag-send:hover    { background: var(--hauswprag-primary-hover); }
.hauswprag-send:active   { transform: scale(0.95); }
.hauswprag-send:disabled { background: var(--hauswprag-border); cursor: not-allowed; }

/* ─── Error ───────────────────────────────────────────────────────────────── */
.hauswprag-error {
    color:       #d32f2f;
    background:  #ffebee;
    padding:     8px 12px;
    border-radius: 4px;
    font-size:   13px;
    margin:      8px 16px;
}

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media screen and (max-width: 480px) {
    .hauswprag-container {
        width:      calc(100vw - 20px);
        height:     calc(100vh - 100px);
        bottom:     80px;
        right:      10px;
        left:       10px;
        max-width:  none;
        max-height: none;
    }

    .hauswprag-toggle {
        bottom: 15px;
        right:  15px;
        width:  50px;
        height: 50px;
    }

    [data-position="bottom-left"] .hauswprag-toggle         { left: 15px; }
    [data-position="bottom-left"] .hauswprag-container      { right: 10px; left: 10px; }
}

@media print {
    .hauswprag-widget { display: none !important; }
}