/*
 * SicoAI Chat Widget
 * All selectors are prefixed .sicoai- to prevent theme collisions.
 * Primary colour is set via --sicoai-primary on #sicoai-widget (inline style).
 */

/* ============================================================
   CSS custom properties
   ============================================================ */
#sicoai-widget {
    --sicoai-primary:      #0066cc;
    --sicoai-primary-dark: #004fa3;
    --sicoai-bg:           #ffffff;
    --sicoai-surface:      #f5f7fa;
    --sicoai-border:       #e2e6ea;
    --sicoai-text:         #1a1a2e;
    --sicoai-text-muted:   #6c757d;
    --sicoai-user-bg:      var(--sicoai-primary);
    --sicoai-user-text:    #ffffff;
    --sicoai-bot-bg:       #f0f2f5;
    --sicoai-bot-text:     #1a1a2e;
    --sicoai-shadow:       0 8px 32px rgba(0, 0, 0, 0.18);
    --sicoai-shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.12);
    --sicoai-radius:       18px;
    --sicoai-radius-sm:    10px;
    --sicoai-toggle-size:  56px;
    --sicoai-panel-w:      420px;
    --sicoai-panel-h:      580px;
    --sicoai-header-h:     52px;
    --sicoai-footer-h:     60px;
    --sicoai-z:            99999;
    --sicoai-gap:          16px;
}

/* ============================================================
   Widget container
   ============================================================ */
.sicoai-widget {
    position:   fixed;
    bottom:     24px;
    z-index:    var(--sicoai-z);
    display:    flex;
    flex-direction: column;
    align-items:    flex-end;
    gap:        12px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size:  14px;
    line-height: 1.5;
    box-sizing: border-box;
}

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

.sicoai-widget--bottom-right { right: 24px; }
.sicoai-widget--bottom-left  { left: 24px; align-items: flex-start; }

/* ============================================================
   Toggle button
   ============================================================ */
.sicoai-widget__toggle {
    width:           var(--sicoai-toggle-size);
    height:          var(--sicoai-toggle-size);
    border-radius:   50%;
    border:          none;
    background:      var(--sicoai-primary);
    color:           #ffffff;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    box-shadow:      var(--sicoai-shadow);
    transition:      background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    flex-shrink:     0;
    padding:         0;
    outline:         none;
    order:           2;
}

.sicoai-widget__toggle:hover {
    background:  var(--sicoai-primary-dark);
    transform:   scale(1.06);
    box-shadow:  0 10px 36px rgba(0, 0, 0, 0.22);
}

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

/* Icon swap: open icon visible by default; close icon visible when open */
.sicoai-widget__toggle-icon--close { display: none; }
.sicoai-widget--open .sicoai-widget__toggle-icon--open  { display: none; }
.sicoai-widget--open .sicoai-widget__toggle-icon--close { display: block; }

/* ============================================================
   Chat panel
   ============================================================ */
.sicoai-widget__chat {
    width:         var(--sicoai-panel-w);
    height:        var(--sicoai-panel-h);
    background:    var(--sicoai-bg);
    border-radius: var(--sicoai-radius);
    box-shadow:    var(--sicoai-shadow);
    display:       flex;
    flex-direction: column;
    overflow:      hidden;
    order:         1;

    /* Hidden state */
    opacity:        0;
    pointer-events: none;
    transform:      translateY(16px) scale(0.97);
    transform-origin: bottom right;
    transition:     opacity 0.22s ease, transform 0.22s ease;
}

.sicoai-widget--bottom-left .sicoai-widget__chat {
    transform-origin: bottom left;
}

.sicoai-widget__chat--open {
    opacity:        1;
    pointer-events: auto;
    transform:      translateY(0) scale(1);
}

/* ============================================================
   Header
   ============================================================ */
.sicoai-widget__header {
    height:      var(--sicoai-header-h);
    background:  var(--sicoai-primary);
    color:       #ffffff;
    display:     flex;
    align-items: center;
    padding:     0 var(--sicoai-gap);
    flex-shrink: 0;
    gap:         8px;
}

.sicoai-widget__title {
    flex:        1;
    font-weight: 600;
    font-size:   15px;
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}

.sicoai-widget__close {
    background:  transparent;
    border:      none;
    color:       rgba(255, 255, 255, 0.85);
    cursor:      pointer;
    display:     flex;
    align-items: center;
    justify-content: center;
    padding:     4px;
    border-radius: 4px;
    transition:  color 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
    line-height: 1;
}

.sicoai-widget__close:hover {
    color:       #ffffff;
    background:  rgba(255, 255, 255, 0.15);
}

.sicoai-widget__close:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
}

/* ============================================================
   Messages area
   ============================================================ */
.sicoai-widget__messages {
    flex:       1;
    overflow-y: auto;
    padding:    var(--sicoai-gap);
    display:    flex;
    flex-direction: column;
    gap:        10px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.sicoai-widget__messages::-webkit-scrollbar {
    width: 4px;
}

.sicoai-widget__messages::-webkit-scrollbar-track {
    background: transparent;
}

.sicoai-widget__messages::-webkit-scrollbar-thumb {
    background:    var(--sicoai-border);
    border-radius: 2px;
}

/* ============================================================
   Individual messages
   ============================================================ */
.sicoai-message {
    display: flex;
    max-width: 85%;
}

.sicoai-message--user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.sicoai-message--assistant {
    align-self: flex-start;
}

.sicoai-message__bubble {
    padding:       9px 13px;
    border-radius: var(--sicoai-radius-sm);
    word-wrap:     break-word;
    overflow-wrap: break-word;
    hyphens:       auto;
    line-height:   1.55;
}

.sicoai-message--user .sicoai-message__bubble {
    background:    var(--sicoai-user-bg);
    color:         var(--sicoai-user-text);
    border-bottom-right-radius: 3px;
}

.sicoai-message--assistant .sicoai-message__bubble {
    background:    var(--sicoai-bot-bg);
    color:         var(--sicoai-bot-text);
    border-bottom-left-radius: 3px;
}

/* Markdown content inside assistant bubbles */
.sicoai-message--assistant .sicoai-message__bubble a {
    color:       var(--sicoai-primary);
    word-break:  break-all;
}

.sicoai-message--assistant .sicoai-message__bubble strong {
    font-weight: 600;
}

.sicoai-message--assistant .sicoai-message__bubble code,
.sicoai-code-inline {
    background:    rgba(0, 0, 0, 0.07);
    padding:       1px 5px;
    border-radius: 4px;
    font-family:   "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size:     0.9em;
}

.sicoai-code-block {
    background:    rgba(0, 0, 0, 0.06);
    border-radius: 6px;
    padding:       10px 12px;
    overflow-x:    auto;
    font-size:     0.88em;
    margin:        6px 0 0;
    white-space:   pre;
}

.sicoai-code-block code {
    background: transparent;
    padding:    0;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

.sicoai-product-image {
    max-width:     100%;
    border-radius: 6px;
    margin-top:    6px;
    display:       block;
}

/* ============================================================
   Typing indicator
   ============================================================ */
.sicoai-widget__typing {
    padding: 0 var(--sicoai-gap) 4px;
    flex-shrink: 0;
}

.sicoai-widget__typing--hidden {
    display: none;
}

.sicoai-message__bubble--typing {
    display:  flex;
    gap:      5px;
    padding:  11px 16px;
    min-width: 52px;
}

.sicoai-message__bubble--typing span {
    width:         8px;
    height:        8px;
    border-radius: 50%;
    background:    var(--sicoai-text-muted);
    display:       inline-block;
    animation:     sicoai-bounce 1.3s infinite ease-in-out both;
}

.sicoai-message__bubble--typing span:nth-child(1) { animation-delay: -0.32s; }
.sicoai-message__bubble--typing span:nth-child(2) { animation-delay: -0.16s; }
.sicoai-message__bubble--typing span:nth-child(3) { animation-delay: 0s; }

@keyframes sicoai-bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40%           { transform: scale(1);   opacity: 1;   }
}

/* ============================================================
   Input form
   ============================================================ */
.sicoai-widget__form {
    display:       flex;
    align-items:   center;
    gap:           8px;
    padding:       10px var(--sicoai-gap);
    border-top:    1px solid var(--sicoai-border);
    background:    var(--sicoai-bg);
    flex-shrink:   0;
    height:        var(--sicoai-footer-h);
}

.sicoai-widget__input {
    flex:          1;
    height:        38px;
    padding:       0 12px;
    border:        1px solid var(--sicoai-border);
    border-radius: 19px;
    font-size:     14px;
    color:         var(--sicoai-text);
    background:    var(--sicoai-surface);
    outline:       none;
    transition:    border-color 0.15s ease, box-shadow 0.15s ease;
    min-width:     0;
    font-family:   inherit;
}

.sicoai-widget__input::placeholder {
    color: var(--sicoai-text-muted);
}

.sicoai-widget__input:focus {
    border-color: var(--sicoai-primary);
    box-shadow:   0 0 0 3px rgba(0, 102, 204, 0.12);
    background:   var(--sicoai-bg);
}

.sicoai-widget__input:disabled {
    opacity: 0.6;
    cursor:  not-allowed;
}

.sicoai-widget__send {
    width:           38px;
    height:          38px;
    border-radius:   50%;
    border:          none;
    background:      var(--sicoai-primary);
    color:           #ffffff;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      background 0.15s ease, transform 0.15s ease;
    flex-shrink:     0;
    padding:         0;
    outline:         none;
}

.sicoai-widget__send:hover {
    background:  var(--sicoai-primary-dark);
    transform:   scale(1.06);
}

.sicoai-widget__send:focus-visible {
    outline: 3px solid var(--sicoai-primary);
    outline-offset: 2px;
}

.sicoai-widget__send:disabled {
    opacity: 0.5;
    cursor:  not-allowed;
    transform: none;
}

/* ============================================================
   Responsive — 480px and below (full-width, anchored to bottom)
   ============================================================ */
@media (max-width: 480px) {
    .sicoai-widget {
        bottom: 0;
        right:  0;
        left:   0;
        width:  100%;
        align-items: stretch;
        gap:    0;
    }

    .sicoai-widget--bottom-left {
        align-items: stretch;
    }

    .sicoai-widget__chat {
        width:         100%;
        height:        70vh;
        min-height:    320px;
        border-radius: var(--sicoai-radius) var(--sicoai-radius) 0 0;
        transform-origin: bottom center;
    }

    .sicoai-widget__toggle {
        position: fixed;
        bottom:   16px;
        right:    16px;
    }

    .sicoai-widget--bottom-left .sicoai-widget__toggle {
        right: auto;
        left:  16px;
    }
}