/* ================================================================
   Xciting Media AI Chat Widget — Stylesheet
   Brand: Xciting Media | xcitingmedia.com
   ================================================================ */

/* ── CSS Custom Properties (overridden by JS from WP options) ── */
:root {
    --xc-accent:       #E8381A;
    --xc-accent-dark:  #C42E12;
    --xc-bg:           #ffffff;
    --xc-surface:      #F7F7F7;
    --xc-border:       #E2E2E2;
    --xc-text:         #1A1A1A;
    --xc-text-muted:   #6B6B6B;
    --xc-header-bg:    #111111;
    --xc-header-text:  #FFFFFF;
    --xc-radius:       14px;
    --xc-radius-sm:    8px;
    --xc-shadow:       0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.10);
    --xc-shadow-btn:   0 4px 14px rgba(232,56,26,0.45);
    --xc-font:         -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --xc-z:            999999;
}

/* ── Widget Launcher Button ──────────────────────────────────── */
#xciting-chat-launcher {
    position:        fixed;
    width:           56px;
    height:          56px;
    border-radius:   50%;
    background:      var(--xc-accent);
    border:          none;
    cursor:          pointer;
    box-shadow:      var(--xc-shadow-btn);
    z-index:         var(--xc-z);
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    outline:         none;
}

#xciting-chat-launcher:hover {
    background:   var(--xc-accent-dark);
    transform:    scale(1.08);
    box-shadow:   0 6px 20px rgba(232,56,26,0.55);
}

#xciting-chat-launcher:focus-visible {
    outline:        3px solid var(--xc-accent);
    outline-offset: 3px;
}

#xciting-chat-launcher svg {
    width:  26px;
    height: 26px;
    fill:   #fff;
    transition: transform 0.25s ease, opacity 0.2s ease;
}

#xciting-chat-launcher .xc-icon-chat  { display: block; }
#xciting-chat-launcher .xc-icon-close { display: none; }

#xciting-chat-launcher.xc-open .xc-icon-chat  { display: none; }
#xciting-chat-launcher.xc-open .xc-icon-close { display: block; }

/* Position variants */
#xciting-chat-launcher.pos-bottom-right { bottom: 24px; right: 24px; }
#xciting-chat-launcher.pos-bottom-left  { bottom: 24px; left:  24px; }

/* ── Unread Badge ────────────────────────────────────────────── */
#xciting-chat-badge {
    position:         absolute;
    top:              -2px;
    right:            -2px;
    width:            18px;
    height:           18px;
    border-radius:    50%;
    background:       #ffffff;
    color:            var(--xc-accent);
    font-size:        10px;
    font-weight:      700;
    font-family:      var(--xc-font);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    border:           2px solid var(--xc-accent);
    opacity:          0;
    transform:        scale(0.6);
    transition:       opacity 0.2s ease, transform 0.2s ease;
    pointer-events:   none;
}

#xciting-chat-badge.xc-visible {
    opacity:    1;
    transform:  scale(1);
}

/* ── Chat Window ─────────────────────────────────────────────── */
#xciting-chat-window {
    position:       fixed;
    width:          360px;
    height:         520px;
    background:     var(--xc-bg);
    border-radius:  var(--xc-radius);
    box-shadow:     var(--xc-shadow);
    z-index:        var(--xc-z);
    display:        flex;
    flex-direction: column;
    overflow:       hidden;
    transform:      translateY(16px) scale(0.97);
    opacity:        0;
    pointer-events: none;
    transition:     transform 0.25s cubic-bezier(0.34,1.56,0.64,1),
                    opacity   0.2s  ease;
}

#xciting-chat-window.xc-open {
    transform:      translateY(0) scale(1);
    opacity:        1;
    pointer-events: all;
}

/* Position variants for window */
#xciting-chat-window.pos-bottom-right { bottom: 92px; right: 24px; }
#xciting-chat-window.pos-bottom-left  { bottom: 92px; left:  24px; }

/* ── Window Header ───────────────────────────────────────────── */
.xc-header {
    background:    var(--xc-header-bg);
    padding:       14px 16px;
    display:       flex;
    align-items:   center;
    gap:           10px;
    flex-shrink:   0;
    border-radius: var(--xc-radius) var(--xc-radius) 0 0;
}

.xc-header-avatar {
    width:          36px;
    height:         36px;
    border-radius:  50%;
    background:     var(--xc-accent);
    display:        flex;
    align-items:    center;
    justify-content:center;
    flex-shrink:    0;
    overflow:       hidden;
}

.xc-header-avatar svg {
    width:  20px;
    height: 20px;
    fill:   #fff;
}

.xc-header-avatar img {
    width:      100%;
    height:     100%;
    object-fit: cover;
}

.xc-header-info {
    flex: 1;
    min-width: 0;
}

.xc-header-title {
    color:        var(--xc-header-text);
    font-family:  var(--xc-font);
    font-size:    14px;
    font-weight:  600;
    white-space:  nowrap;
    overflow:     hidden;
    text-overflow:ellipsis;
    line-height:  1.3;
}

.xc-header-status {
    display:     flex;
    align-items: center;
    gap:         5px;
    margin-top:  2px;
}

.xc-status-dot {
    width:         7px;
    height:        7px;
    border-radius: 50%;
    background:    #22C55E;
    flex-shrink:   0;
    animation:     xc-pulse 2.5s ease-in-out infinite;
}

@keyframes xc-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

.xc-header-subtitle {
    color:       rgba(255,255,255,0.6);
    font-family: var(--xc-font);
    font-size:   11px;
}

/* ── Message List ────────────────────────────────────────────── */
.xc-messages {
    flex:           1;
    overflow-y:     auto;
    padding:        16px 14px;
    display:        flex;
    flex-direction: column;
    gap:            10px;
    scroll-behavior:smooth;
}

.xc-messages::-webkit-scrollbar        { width: 4px; }
.xc-messages::-webkit-scrollbar-track  { background: transparent; }
.xc-messages::-webkit-scrollbar-thumb  { background: var(--xc-border); border-radius: 4px; }

/* ── Individual Message Bubbles ─────────────────────────────── */
.xc-msg {
    display:        flex;
    flex-direction: column;
    max-width:      82%;
    animation:      xc-slide-in 0.2s ease;
}

@keyframes xc-slide-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0);   }
}

.xc-msg.xc-msg-bot  { align-self: flex-start; }
.xc-msg.xc-msg-user { align-self: flex-end;   }

.xc-bubble {
    padding:        10px 13px;
    border-radius:  var(--xc-radius);
    font-family:    var(--xc-font);
    font-size:      13.5px;
    line-height:    1.55;
    word-break:     break-word;
}

.xc-msg-bot .xc-bubble {
    background:         var(--xc-surface);
    color:              var(--xc-text);
    border-bottom-left-radius: 4px;
}

.xc-msg-user .xc-bubble {
    background:          var(--xc-accent);
    color:               #ffffff;
    border-bottom-right-radius: 4px;
}

.xc-msg-time {
    font-family:  var(--xc-font);
    font-size:    10px;
    color:        var(--xc-text-muted);
    margin-top:   3px;
    padding:      0 4px;
}

.xc-msg-bot  .xc-msg-time { align-self: flex-start; }
.xc-msg-user .xc-msg-time { align-self: flex-end;   }

/* ── Bot Sender Row ─────────────────────────────────────────── */
.xc-msg-bot .xc-sender {
    font-family:  var(--xc-font);
    font-size:    10.5px;
    font-weight:  600;
    color:        var(--xc-text-muted);
    margin-bottom:3px;
    padding-left: 2px;
    text-transform:uppercase;
    letter-spacing:0.04em;
}

/* ── Suggested Prompts ──────────────────────────────────────── */
.xc-suggestions {
    display:   flex;
    flex-wrap: wrap;
    gap:       6px;
    padding:   0 14px 12px;
    flex-shrink:0;
}

.xc-suggestion-btn {
    background:    var(--xc-surface);
    border:        1px solid var(--xc-border);
    border-radius: 20px;
    padding:       5px 11px;
    font-family:   var(--xc-font);
    font-size:     12px;
    color:         var(--xc-text);
    cursor:        pointer;
    transition:    background 0.15s, border-color 0.15s, color 0.15s;
    white-space:   nowrap;
}

.xc-suggestion-btn:hover {
    background:    var(--xc-accent);
    border-color:  var(--xc-accent);
    color:         #ffffff;
}

/* ── Typing Indicator ───────────────────────────────────────── */
.xc-typing {
    display:     flex;
    align-items: center;
    gap:         5px;
    padding:     8px 12px;
    background:  var(--xc-surface);
    border-radius: var(--xc-radius);
    border-bottom-left-radius: 4px;
    width:       fit-content;
    align-self:  flex-start;
}

.xc-typing span {
    width:         7px;
    height:        7px;
    border-radius: 50%;
    background:    var(--xc-text-muted);
    display:       block;
    animation:     xc-bounce 1.2s ease-in-out infinite;
}

.xc-typing span:nth-child(2) { animation-delay: 0.15s; }
.xc-typing span:nth-child(3) { animation-delay: 0.30s; }

@keyframes xc-bounce {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
    40%            { transform: translateY(-5px); opacity: 1; }
}

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

.xc-input {
    flex:          1;
    resize:        none;
    border:        1px solid var(--xc-border);
    border-radius: var(--xc-radius-sm);
    padding:       9px 12px;
    font-family:   var(--xc-font);
    font-size:     13.5px;
    color:         var(--xc-text);
    background:    var(--xc-surface);
    outline:       none;
    min-height:    38px;
    max-height:    100px;
    line-height:   1.45;
    transition:    border-color 0.15s;
}

.xc-input:focus {
    border-color: var(--xc-accent);
    background:   #fff;
}

.xc-input::placeholder {
    color: var(--xc-text-muted);
}

.xc-send-btn {
    width:          38px;
    height:         38px;
    border-radius:  var(--xc-radius-sm);
    background:     var(--xc-accent);
    border:         none;
    cursor:         pointer;
    display:        flex;
    align-items:    center;
    justify-content:center;
    flex-shrink:    0;
    transition:     background 0.15s, transform 0.1s;
    outline:        none;
}

.xc-send-btn:hover  { background: var(--xc-accent-dark); }
.xc-send-btn:active { transform: scale(0.94); }

.xc-send-btn:focus-visible {
    outline:        3px solid var(--xc-accent);
    outline-offset: 2px;
}

.xc-send-btn svg {
    width:  18px;
    height: 18px;
    fill:   #ffffff;
}

.xc-send-btn:disabled {
    opacity:       0.45;
    cursor:        not-allowed;
    transform:     none;
}

/* ── Footer Branding ─────────────────────────────────────────── */
.xc-footer {
    text-align:  center;
    padding:     5px 12px 8px;
    flex-shrink: 0;
}

.xc-footer a {
    font-family:    var(--xc-font);
    font-size:      10.5px;
    color:          var(--xc-text-muted);
    text-decoration:none;
    transition:     color 0.15s;
}

.xc-footer a:hover { color: var(--xc-accent); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 440px) {
    #xciting-chat-window {
        width:         calc(100vw - 20px);
        height:        calc(100vh - 100px);
        border-radius: var(--xc-radius) var(--xc-radius) 0 0;
    }

    #xciting-chat-window.pos-bottom-right,
    #xciting-chat-window.pos-bottom-left {
        bottom: 82px;
        right:  10px;
        left:   10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── Lead Capture Form ───────────────────────────────────────── */
.xc-lead-form-wrap {
    max-width: 100% !important;
    width: 100%;
}

.xc-lead-form {
    background:    var(--xc-surface);
    border:        1px solid var(--xc-border);
    border-radius: var(--xc-radius);
    padding:       14px;
    display:       flex;
    flex-direction:column;
    gap:           10px;
    width:         100%;
    box-sizing:    border-box;
}

.xc-lead-field {
    display:       flex;
    flex-direction:column;
    gap:           4px;
}

.xc-lead-label {
    font-family:   var(--xc-font);
    font-size:     11px;
    font-weight:   600;
    color:         var(--xc-text-muted);
    text-transform:uppercase;
    letter-spacing:0.04em;
}

.xc-lead-label span {
    color: var(--xc-accent);
}

.xc-lead-input {
    border:        1px solid var(--xc-border);
    border-radius: var(--xc-radius-sm);
    padding:       8px 10px;
    font-family:   var(--xc-font);
    font-size:     13px;
    color:         var(--xc-text);
    background:    #fff;
    outline:       none;
    transition:    border-color 0.15s;
    width:         100%;
    box-sizing:    border-box;
}

.xc-lead-input:focus      { border-color: var(--xc-accent); }
.xc-input-error           { border-color: #E8381A !important; animation: xc-shake 0.3s ease; }

@keyframes xc-shake {
    0%, 100% { transform: translateX(0);  }
    25%       { transform: translateX(-4px); }
    75%       { transform: translateX(4px);  }
}

.xc-lead-textarea {
    resize:     vertical;
    min-height: 56px;
    max-height: 100px;
}

.xc-lead-submit {
    background:    var(--xc-accent);
    color:         #ffffff;
    border:        none;
    border-radius: var(--xc-radius-sm);
    padding:       10px 16px;
    font-family:   var(--xc-font);
    font-size:     13.5px;
    font-weight:   600;
    cursor:        pointer;
    transition:    background 0.15s, transform 0.1s;
    width:         100%;
}

.xc-lead-submit:hover    { background: var(--xc-accent-dark); }
.xc-lead-submit:active   { transform: scale(0.97); }
.xc-lead-submit:disabled { opacity: 0.55; cursor: not-allowed; }

.xc-lead-privacy {
    font-family: var(--xc-font);
    font-size:   10.5px;
    color:       var(--xc-text-muted);
    text-align:  center;
    margin:      0;
}

/* ── After-Hours Bar ─────────────────────────────────────────── */
.xc-after-hours-bar {
    background:    #1a1a1a;
    color:         rgba(255,255,255,0.65);
    font-family:   var(--xc-font);
    font-size:     11px;
    text-align:    center;
    padding:       6px 12px;
    flex-shrink:   0;
}

.xc-status-dot.xc-status-away {
    background: #f59e0b;
    animation:  none;
}

/* ── Quick Reply Buttons ─────────────────────────────────────── */
.xc-quick-replies {
    display:    flex;
    flex-wrap:  wrap;
    gap:        6px;
    padding:    0 14px 10px;
    flex-shrink:0;
    min-height: 0;
}

.xc-quick-btn {
    background:    transparent;
    border:        1.5px solid var(--xc-accent);
    border-radius: 20px;
    padding:       5px 12px;
    font-family:   var(--xc-font);
    font-size:     12px;
    color:         var(--xc-accent);
    cursor:        pointer;
    transition:    background 0.15s, color 0.15s;
    white-space:   nowrap;
}

.xc-quick-btn:hover {
    background: var(--xc-accent);
    color:      #ffffff;
}

/* ── MOBILE RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 480px) {

    /* Launcher — smaller, lower corner */
    #xciting-chat-launcher {
        width:  50px;
        height: 50px;
        bottom: 16px !important;
        right:  16px !important;
        left:   auto !important;
    }

    #xciting-chat-launcher.pos-bottom-left {
        left:  16px !important;
        right: auto !important;
    }

    /* Chat window — full width, anchored to bottom, max height so it never goes off screen */
    #xciting-chat-window {
        position:      fixed !important;
        left:          8px !important;
        right:         8px !important;
        bottom:        76px !important;
        width:         auto !important;
        max-height:    calc(100vh - 100px) !important;
        height:        auto !important;
        min-height:    300px;
        border-radius: 16px !important;
    }

    /* Override both position variants on mobile */
    #xciting-chat-window.pos-bottom-right,
    #xciting-chat-window.pos-bottom-left {
        bottom: 76px !important;
        right:  8px !important;
        left:   8px !important;
    }

    /* Message list fills available space */
    .xc-messages {
        flex:       1 1 auto;
        max-height: none;
    }

    /* Slightly larger tap targets for input and send */
    .xc-input  { font-size: 16px; } /* 16px prevents iOS zoom on focus */
    .xc-send-btn {
        width:  44px;
        height: 44px;
    }

    /* Quick reply pills wrap nicely */
    .xc-quick-replies { padding: 0 10px 8px; }
    .xc-quick-btn     { font-size: 11px; padding: 4px 10px; }

    /* Suggestion pills */
    .xc-suggestions    { padding: 0 10px 8px; }
    .xc-suggestion-btn { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration:   0.01ms !important;
        transition-duration:  0.01ms !important;
    }
}