/**
 * SyntekPro Chat — Frontend Widget Styles
 *
 * Uses CSS custom properties for theming so everything
 * adapts to the primary color set in plugin settings.
 *
 * @package SyntekProChat
 * @since   1.0.0
 */

/* ── Reset & base ──────────────────────────────────────────────────────── */
.spc-widget *,
.spc-widget *::before,
.spc-widget *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.spc-widget {
    --spc-primary:       #6C5CE7;   /* overridden inline from PHP */
    --spc-bg:            #ffffff;
    --spc-surface:       #f7f7f8;
    --spc-text:          #1a1a2e;
    --spc-text-muted:    #6b7280;
    --spc-border:        #e5e7eb;
    --spc-shadow:        0 4px 24px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.06);
    --spc-radius:        16px;
    --spc-radius-sm:     8px;
    --spc-font:          -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --spc-transition:    0.2s ease;
    --spc-z:             2147483647;

    font-family: var(--spc-font);
    position: fixed;
    z-index: var(--spc-z);
}

/* ── Dark theme ────────────────────────────────────────────────────────── */
.spc-theme-dark {
    --spc-bg:         #1e1e2e;
    --spc-surface:    #2a2a3e;
    --spc-text:       #f5f5f7;
    --spc-text-muted: #a1a1aa;
    --spc-border:     #3a3a4e;
}

/* ── Positioning ───────────────────────────────────────────────────────── */
.spc-pos-bottom-right { bottom: 24px; right: 24px; }
.spc-pos-bottom-left  { bottom: 24px; left:  24px; }
.spc-pos-top-right    { top:    24px; right: 24px; }
.spc-pos-top-left     { top:    24px; left:  24px; }

/* ── Launcher button ───────────────────────────────────────────────────── */
.spc-launcher {
    width:            56px;
    height:           56px;
    border-radius:    50%;
    background:       var(--spc-primary);
    color:            #fff;
    border:           none;
    cursor:           pointer;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    box-shadow:       var(--spc-shadow);
    transition:       transform var(--spc-transition), box-shadow var(--spc-transition);
    position:         relative;
    z-index:          1;
}

.spc-launcher svg {
    width:  24px;
    height: 24px;
    transition: transform var(--spc-transition), opacity var(--spc-transition);
}

.spc-launcher:hover {
    transform:  scale(1.08);
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.18);
}

.spc-launcher:focus-visible {
    outline: 3px solid var(--spc-primary);
    outline-offset: 3px;
}

/* ── Chat window ───────────────────────────────────────────────────────── */
.spc-window {
    position:      absolute;
    bottom:        72px;
    right:         0;
    width:         360px;
    max-height:    520px;
    background:    var(--spc-bg);
    border-radius: var(--spc-radius);
    box-shadow:    var(--spc-shadow);
    display:       flex;
    flex-direction: column;
    overflow:      hidden;
    transform:     scale(0.95) translateY(8px);
    transform-origin: bottom right;
    opacity:       0;
    pointer-events: none;
    transition:    transform var(--spc-transition), opacity var(--spc-transition);
}

.spc-pos-bottom-left  .spc-window { right: auto; left: 0; transform-origin: bottom left; }
.spc-pos-top-right    .spc-window { bottom: auto; top: 72px; transform-origin: top right; }
.spc-pos-top-left     .spc-window { bottom: auto; top: 72px; right: auto; left: 0; transform-origin: top left; }

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

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

.spc-header-title {
    display:     block;
    font-size:   15px;
    font-weight: 600;
    line-height: 1.3;
}

.spc-header-sub {
    display:   block;
    font-size: 12px;
    opacity:   0.8;
    margin-top: 2px;
}

.spc-close-btn {
    background:  none;
    border:      none;
    color:       #fff;
    cursor:      pointer;
    padding:     4px;
    border-radius: 6px;
    display:     flex;
    opacity:     0.8;
    transition:  opacity var(--spc-transition);
}

.spc-close-btn:hover { opacity: 1; }
.spc-close-btn svg   { width: 18px; height: 18px; }

/* ── Body ───────────────────────────────────────────────────────────────── */
.spc-body {
    flex:       1;
    overflow-y: auto;
    padding:    0;
    display:    flex;
    flex-direction: column;
}

/* ── Channel picker ─────────────────────────────────────────────────────── */
.spc-channel-list {
    padding: 12px 8px;
}

.spc-channel-btn {
    display:       flex;
    align-items:   center;
    gap:           14px;
    width:         100%;
    padding:       12px 16px;
    background:    transparent;
    border:        1px solid var(--spc-border);
    border-radius: var(--spc-radius-sm);
    margin-bottom: 8px;
    cursor:        pointer;
    color:         var(--spc-text);
    font-size:     14px;
    font-weight:   500;
    text-align:    left;
    transition:    background var(--spc-transition), border-color var(--spc-transition);
}

.spc-channel-btn:last-child { margin-bottom: 0; }

.spc-channel-btn:hover {
    background:    var(--spc-surface);
    border-color:  var(--spc-primary);
}

.spc-channel-icon {
    width:  32px;
    height: 32px;
    object-fit: contain;
}

/* ── Live chat messages ─────────────────────────────────────────────────── */
.spc-messages {
    flex:       1;
    overflow-y: auto;
    padding:    16px;
    display:    flex;
    flex-direction: column;
    gap:        10px;
}

.spc-message {
    max-width:     75%;
    padding:       10px 14px;
    border-radius: 14px;
    font-size:     14px;
    line-height:   1.45;
    word-break:    break-word;
}

.spc-message--user {
    align-self:   flex-end;
    background:   var(--spc-primary);
    color:        #fff;
    border-bottom-right-radius: 4px;
}

.spc-message--agent,
.spc-message--bot {
    align-self:   flex-start;
    background:   var(--spc-surface);
    color:        var(--spc-text);
    border-bottom-left-radius: 4px;
}

.spc-message--system {
    align-self:  center;
    background:  transparent;
    color:       var(--spc-text-muted);
    font-size:   12px;
    font-style:  italic;
}

/* ── Compose area ───────────────────────────────────────────────────────── */
.spc-compose {
    display:    flex;
    align-items: center;
    gap:        8px;
    padding:    12px 16px;
    border-top: 1px solid var(--spc-border);
    flex-shrink: 0;
}

.spc-input {
    flex:          1;
    padding:       10px 14px;
    border:        1px solid var(--spc-border);
    border-radius: 24px;
    background:    var(--spc-surface);
    color:         var(--spc-text);
    font-size:     14px;
    outline:       none;
    transition:    border-color var(--spc-transition);
}

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

.spc-input:focus { border-color: var(--spc-primary); }

.spc-send-btn {
    width:         38px;
    height:        38px;
    border-radius: 50%;
    background:    var(--spc-primary);
    color:         #fff;
    border:        none;
    cursor:        pointer;
    font-size:     16px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    flex-shrink:   0;
    transition:    background var(--spc-transition), transform var(--spc-transition);
}

.spc-send-btn:hover  { filter: brightness(1.1); }
.spc-send-btn:active { transform: scale(0.93); }

/* ── Powered-by footer ──────────────────────────────────────────────────── */
.spc-powered {
    text-align:  center;
    padding:     8px;
    font-size:   11px;
    color:       var(--spc-text-muted);
    border-top:  1px solid var(--spc-border);
    flex-shrink: 0;
}

.spc-powered a {
    color:           var(--spc-primary);
    text-decoration: none;
}

/* ── Mobile responsive ──────────────────────────────────────────────────── */
@media ( max-width: 480px ) {
    .spc-window {
        width:         calc(100vw - 32px);
        max-height:    70vh;
        bottom:        80px;
        right:         0;
        left:          0;
        margin:        0 auto;
        transform-origin: bottom center;
    }

    .spc-pos-bottom-left .spc-window { left: 0; right: 0; }

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