/* ==========================================================================
   Site Public Chat — Frontend Widget
   ========================================================================== */

:root {
    --spc-primary:       #4f46e5;
    --spc-primary-dark:  #3730a3;
    --spc-bg:            #ffffff;
    --spc-bg-messages:   #f1f5f9;
    --spc-border:        #e2e8f0;
    --spc-text:          #1e293b;
    --spc-text-muted:    #64748b;
    --spc-self-bubble:   var(--spc-primary);
    --spc-shadow:        0 24px 64px rgba(0,0,0,0.16), 0 4px 16px rgba(0,0,0,0.08);
    --spc-radius:        18px;
    --spc-radius-sm:     10px;
    --spc-z:             9999;
    --spc-w:             360px;
    --spc-h:             520px;
}

/* --------------------------------------------------------------------------
   Wrapper
   -------------------------------------------------------------------------- */
#spc-chat-wrapper {
    position:    fixed;
    bottom:      24px;
    right:       24px;
    z-index:     var(--spc-z);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size:   14px;
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Launcher button
   -------------------------------------------------------------------------- */
#spc-launcher {
    position:       relative;
    z-index:        calc(var(--spc-z) + 1);
    width:          58px;
    height:         58px;
    border-radius:  50%;
    background:     var(--spc-primary);
    border:         none;
    cursor:         pointer;
    color:          #fff;
    display:        flex;
    align-items:    center;
    justify-content: center;
    box-shadow:     0 4px 24px rgba(79,70,229,0.45);
    transition:     transform .2s ease, box-shadow .2s ease, background .2s ease;
}

#spc-launcher:hover {
    transform:  scale(1.09);
    background: var(--spc-primary-dark);
    box-shadow: 0 6px 28px rgba(79,70,229,0.55);
}

#spc-launcher:active {
    transform: scale(0.96);
}

#spc-launcher svg {
    width:      24px;
    height:     24px;
    transition: opacity .15s ease, transform .2s ease;
}

/* --------------------------------------------------------------------------
   Chat window
   -------------------------------------------------------------------------- */
#spc-chat-window {
    position:       absolute;
    bottom:         72px;
    right:          0;
    width:          var(--spc-w);
    height:         var(--spc-h);
    background:     var(--spc-bg);
    border-radius:  var(--spc-radius);
    box-shadow:     var(--spc-shadow);
    border:         1px solid var(--spc-border);
    display:        flex;
    flex-direction: column;
    overflow:       hidden;

    opacity:        0;
    transform:      translateY(14px) scale(.97);
    pointer-events: none;
    transition:     opacity .25s ease,
                    transform .28s cubic-bezier(0.34,1.56,0.64,1);
}

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

#spc-chat-window.spc-expanded {
    width:  min(520px, 96vw);
    height: min(700px, 90vh);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
#spc-chat-header {
    background:      var(--spc-primary);
    color:           #fff;
    padding:         14px 18px;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-shrink:     0;
    user-select:     none;
}

#spc-chat-title {
    font-weight:    700;
    font-size:      14.5px;
    letter-spacing: .015em;
    display:        flex;
    align-items:    center;
    gap:            8px;
}

/* Indicator online verde */
#spc-chat-title::before {
    content:       '';
    width:         8px;
    height:        8px;
    background:    #4ade80;
    border-radius: 50%;
    box-shadow:    0 0 0 2px rgba(74,222,128,.3);
    animation:     spc-pulse 2.4s infinite;
}

@keyframes spc-pulse {
    0%,100% { box-shadow: 0 0 0 2px rgba(74,222,128,.3); }
    50%      { box-shadow: 0 0 0 6px rgba(74,222,128,0);  }
}

#spc-chat-controls {
    display: flex;
    gap:     4px;
}

.spc-control-btn {
    width:           28px;
    height:          28px;
    border:          none;
    background:      rgba(255,255,255,.15);
    color:           #fff;
    border-radius:   7px;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      background .15s ease;
    padding:         0;
}

.spc-control-btn:hover {
    background: rgba(255,255,255,.28);
}

.spc-control-btn svg {
    width:  13px;
    height: 13px;
}

/* --------------------------------------------------------------------------
   Name screen
   -------------------------------------------------------------------------- */
#spc-name-screen {
    flex:            1;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    padding:         32px 24px;
    gap:             14px;
    text-align:      center;
}

.spc-welcome-icon {
    width:           68px;
    height:          68px;
    background:      linear-gradient(135deg, var(--spc-primary), var(--spc-primary-dark));
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           #fff;
    margin-bottom:   4px;
    box-shadow:      0 8px 24px rgba(79,70,229,.35);
}

.spc-welcome-icon svg {
    width:  30px;
    height: 30px;
}

#spc-name-screen h3 {
    margin:      0;
    font-size:   18px;
    font-weight: 700;
    color:       var(--spc-text);
}

#spc-name-screen p {
    margin:      0;
    font-size:   13px;
    color:       var(--spc-text-muted);
    max-width:   240px;
    line-height: 1.6;
}

#spc-name-input {
    width:       100%;
    padding:     11px 14px;
    border:      2px solid var(--spc-border);
    border-radius: var(--spc-radius-sm);
    font-size:   14px;
    color:       var(--spc-text);
    outline:     none;
    font-family: inherit;
    box-sizing:  border-box;
    transition:  border-color .2s ease, box-shadow .2s ease;
    background:  #fff;
}

#spc-name-input:focus {
    border-color: var(--spc-primary);
    box-shadow:   0 0 0 3px rgba(79,70,229,.14);
}

#spc-name-submit {
    width:         100%;
    padding:       12px;
    background:    var(--spc-primary);
    color:         #fff;
    border:        none;
    border-radius: var(--spc-radius-sm);
    font-size:     14px;
    font-weight:   700;
    cursor:        pointer;
    font-family:   inherit;
    letter-spacing: .02em;
    transition:    background .18s ease, transform .1s ease;
}

#spc-name-submit:hover  { background: var(--spc-primary-dark); }
#spc-name-submit:active { transform: scale(.98); }

/* --------------------------------------------------------------------------
   Chat screen
   -------------------------------------------------------------------------- */
#spc-chat-screen {
    flex:           1;
    display:        flex;
    flex-direction: column;
    overflow:       hidden;
}

/* --------------------------------------------------------------------------
   Messages list
   -------------------------------------------------------------------------- */
#spc-messages-list {
    flex:           1;
    overflow-y:     auto;
    padding:        16px 14px;
    display:        flex;
    flex-direction: column;
    gap:            10px;
    scroll-behavior: smooth;
    background:     var(--spc-bg-messages);
}

#spc-messages-list::-webkit-scrollbar       { width: 4px; }
#spc-messages-list::-webkit-scrollbar-track { background: transparent; }
#spc-messages-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }

.spc-empty {
    text-align: center;
    color:      var(--spc-text-muted);
    font-size:  13px;
    padding:    48px 16px;
    margin:     auto;
}

/* --------------------------------------------------------------------------
   Message item
   -------------------------------------------------------------------------- */
.spc-message {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    max-width:      82%;
    gap:            3px;

    opacity:   0;
    transform: translateY(8px);
    transition: opacity .22s ease, transform .22s ease;
}

.spc-message--visible {
    opacity:   1;
    transform: translateY(0);
}

.spc-message--self {
    align-self:  flex-end;
    align-items: flex-end;
}

.spc-message-meta {
    display:     flex;
    align-items: center;
    gap:         6px;
    padding:     0 3px;
}

.spc-message-author {
    font-size:      10.5px;
    font-weight:    700;
    color:          var(--spc-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.spc-message-time {
    font-size: 10px;
    color:     #94a3b8;
}

.spc-message-bubble {
    background:    #fff;
    border:        1px solid var(--spc-border);
    padding:       9px 13px;
    border-radius: 14px 14px 14px 4px;
    color:         var(--spc-text);
    font-size:     13.5px;
    line-height:   1.55;
    word-break:    break-word;
    white-space:   pre-wrap;
    box-shadow:    0 1px 4px rgba(0,0,0,.05);
}

.spc-message--self .spc-message-bubble {
    background:    var(--spc-primary);
    border-color:  var(--spc-primary);
    color:         #fff;
    border-radius: 14px 14px 4px 14px;
}

/* --------------------------------------------------------------------------
   Footer / input
   -------------------------------------------------------------------------- */
#spc-chat-footer {
    background:  #fff;
    border-top:  1px solid var(--spc-border);
    padding:     10px 14px 12px;
    flex-shrink: 0;
}

#spc-chat-input-area {
    display:       flex;
    align-items:   flex-end;
    gap:           8px;
    background:    var(--spc-bg-messages);
    border:        2px solid var(--spc-border);
    border-radius: 13px;
    padding:       7px 7px 7px 12px;
    transition:    border-color .2s ease, box-shadow .2s ease;
}

#spc-chat-input-area:focus-within {
    border-color: var(--spc-primary);
    box-shadow:   0 0 0 3px rgba(79,70,229,.1);
}

#spc-message-input {
    flex:        1;
    border:      none;
    background:  transparent;
    font-size:   13.5px;
    color:       var(--spc-text);
    outline:     none;
    resize:      none;
    font-family: inherit;
    max-height:  100px;
    line-height: 1.45;
    padding:     2px 0;
}

#spc-message-input::placeholder { color: #94a3b8; }

#spc-send-btn {
    flex-shrink:     0;
    width:           34px;
    height:          34px;
    background:      var(--spc-primary);
    border:          none;
    border-radius:   9px;
    color:           #fff;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      background .15s ease, transform .1s ease;
}

#spc-send-btn:hover   { background: var(--spc-primary-dark); }
#spc-send-btn:active  { transform: scale(.93); }
#spc-send-btn:disabled { opacity: .45; cursor: not-allowed; }

#spc-send-btn svg {
    width:  15px;
    height: 15px;
}

/* --------------------------------------------------------------------------
   Error messages
   -------------------------------------------------------------------------- */
.spc-error {
    font-size:  11.5px;
    color:      #ef4444;
    margin-top: 5px;
    min-height: 16px;
}

/* --------------------------------------------------------------------------
   Responsive — mobile
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    #spc-chat-wrapper {
        bottom: 14px;
        right:  14px;
    }

    #spc-chat-window,
    #spc-chat-window.spc-expanded {
        position:      fixed;
        bottom:        0 !important;
        right:         0 !important;
        left:          0 !important;
        width:         100% !important;
        height:        88vh !important;
        border-radius: var(--spc-radius) var(--spc-radius) 0 0;
    }

    #spc-launcher {
        width:  52px;
        height: 52px;
    }

    #spc-launcher svg {
        width:  20px;
        height: 20px;
    }
}