/*
 * AI Chat ThemeWP — aict.css
 * All selectors prefixed .aict- to avoid Flatsome conflicts.
 * No !important unless absolutely required.
 */

/* ── Variables ─────────────────────────────────────────── */
:root {
    --aict-ac:      #15779e;
    --aict-ac-dk:   #0f5c7a;
    --aict-ac-bg:   rgba(21,119,158,.08);
    --aict-ac-bg2:  rgba(21,119,158,.14);
    --aict-ac-glow: rgba(21,119,158,.22);
    --aict-green:   #0a7a52;
    --aict-red:     #b53126;
    --aict-sur:     #fff;
    --aict-bg:      #f5f8fb;
    --aict-bg2:     #edf2f7;
    --aict-bd:      rgba(21,119,158,.12);
    --aict-bd2:     rgba(21,119,158,.22);
    --aict-tx:      #0c1f2e;
    --aict-tx2:     #456070;
    --aict-tx3:     #8aafc4;
    --aict-r:       16px;
    --aict-r-sm:    10px;
    --aict-sh:      0 4px 24px rgba(21,119,158,.12);
    --aict-sh-lg:   0 12px 40px rgba(21,119,158,.18);
    --aict-font:    inherit;
}

/* ── Widget — used both by shortcode & inside float ────── */
.aict-widget {
    display:        flex;
    flex-direction: column;
    background:     var(--aict-sur);
    border:         1px solid var(--aict-bd);
    border-radius:  var(--aict-r);
    box-shadow:     var(--aict-sh);
    overflow:       hidden;
    font-family:    var(--aict-font);
    font-size:      14px;
    line-height:    1.6;
    color:          var(--aict-tx);
    /* Shortcode: reasonable max-width */
    max-width:      680px;
    width:          100%;
    margin:         0 auto;
    box-sizing:     border-box;
}
/* Widget inside float: fully override layout — must NOT affect page flow */
.aict-float-panel .aict-widget {
    max-width:     none !important;
    width:         100% !important;
    margin:        0 !important;
    border:        none !important;
    border-radius: 0 !important;
    box-shadow:    none !important;
    flex:          1;
    min-width:     0;
    overflow:      hidden;
}

/* ── Header ─────────────────────────────────────────────── */
.aict-header {
    display:     flex;
    align-items: center;
    gap:         10px;
    padding:     13px 16px;
    background:  linear-gradient(135deg, var(--aict-ac), var(--aict-ac-dk));
    flex-shrink: 0;
}
.aict-av {
    width:           34px;
    height:          34px;
    border-radius:   50%;
    background:      rgba(255,255,255,.2);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       15px;
    color:           #fff;
    flex-shrink:     0;
}
.aict-hinfo { flex: 1; min-width: 0; }
.aict-htitle {
    font-size:   14px;
    font-weight: 700;
    color:       #fff;
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}
.aict-hstatus {
    display:     flex;
    align-items: center;
    gap:         5px;
    font-size:   11px;
    color:       rgba(255,255,255,.82);
    margin-top:  2px;
}
.aict-dot {
    width:         6px;
    height:        6px;
    border-radius: 50%;
    background:    #4ade80;
    flex-shrink:   0;
    animation:     aict-pulse 2s ease infinite;
}
@keyframes aict-pulse {
    0%,100% { opacity:1; transform:scale(1); }
    50%      { opacity:.5; transform:scale(.85); }
}
.aict-clear-btn {
    background:      rgba(255,255,255,.18);
    border:          none;
    border-radius:   50%;
    width:           28px;
    height:          28px;
    color:           #fff;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    transition:      background .2s;
    padding:         0;
}
.aict-clear-btn:hover { background: rgba(255,255,255,.30); }

/* Float's close button injected into header */
.aict-header-close {
    background:      rgba(255,255,255,.18);
    border:          none;
    border-radius:   50%;
    width:           28px;
    height:          28px;
    color:           #fff;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    transition:      background .2s;
    padding:         0;
    font-size:       14px;
    line-height:     1;
}
.aict-header-close:hover { background: rgba(255,255,255,.30); }

/* ── Messages ────────────────────────────────────────────── */
.aict-msgs {
    overflow-y:     auto;
    padding:        14px 14px 10px;
    display:        flex;
    flex-direction: column;
    gap:            10px;
    flex-shrink:    0;
    scroll-behavior: smooth;
}
.aict-msgs::-webkit-scrollbar { width: 4px; }
.aict-msgs::-webkit-scrollbar-track { background: var(--aict-bg2); }
.aict-msgs::-webkit-scrollbar-thumb { background: var(--aict-bd2); border-radius: 2px; }

.aict-msg {
    display:   flex;
    gap:       7px;
    max-width: 92%;
    animation: aict-fadein .28s ease;
}
@keyframes aict-fadein {
    from { opacity:0; transform:translateY(7px); }
    to   { opacity:1; transform:translateY(0); }
}
.aict-bot { align-self: flex-start; }
.aict-user { align-self: flex-end; flex-direction: row-reverse; }

.aict-msg-av {
    width:           24px;
    height:          24px;
    border-radius:   50%;
    background:      var(--aict-ac-bg);
    border:          1px solid var(--aict-bd2);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       11px;
    flex-shrink:     0;
    margin-top:      3px;
    color:           var(--aict-ac);
}

.aict-bubble {
    padding:       9px 13px;
    border-radius: 13px;
    font-size:     13.5px;
    line-height:   1.65;
    word-break:    break-word;
}
.aict-bot .aict-bubble {
    background:                var(--aict-bg2);
    border:                    1px solid var(--aict-bd);
    color:                     var(--aict-tx);
    border-bottom-left-radius: 4px;
}
.aict-user .aict-bubble {
    background:                 var(--aict-ac);
    color:                      #fff;
    border-bottom-right-radius: 4px;
}
.aict-bubble.aict-error {
    background:  rgba(181,49,38,.07);
    border-color: rgba(181,49,38,.22);
    color:       var(--aict-red);
}
.aict-bubble strong { font-weight: 700; }
.aict-bubble code {
    background:    var(--aict-ac-bg);
    border:        1px solid var(--aict-bd2);
    border-radius: 3px;
    padding:       1px 5px;
    font-family:   monospace;
    font-size:     12px;
}
.aict-bubble ul { margin: 6px 0 0; padding-left: 18px; }
.aict-bubble li { margin-bottom: 3px; }

/* Typing dots */
.aict-typing {
    display:     flex;
    gap:         4px;
    align-items: center;
    padding:     6px 2px;
}
.aict-typing span {
    width:         7px;
    height:        7px;
    border-radius: 50%;
    background:    var(--aict-tx3);
    animation:     aict-bounce 1.2s ease infinite;
}
.aict-typing span:nth-child(2) { animation-delay: .2s; }
.aict-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes aict-bounce {
    0%,60%,100% { transform:translateY(0); opacity:.4; }
    30%          { transform:translateY(-7px); opacity:1; }
}

/* ── Chips ───────────────────────────────────────────────── */
.aict-chips {
    display:    flex;
    flex-wrap:  wrap;
    gap:        6px;
    padding:    8px 14px 6px;
    border-top: 1px solid var(--aict-bd);
    flex-shrink: 0;
}
.aict-chip {
    padding:       5px 11px;
    background:    var(--aict-ac-bg);
    border:        1px solid var(--aict-bd2);
    border-radius: 16px;
    font-size:     11.5px;
    color:         var(--aict-ac);
    cursor:        pointer;
    font-family:   inherit;
    transition:    all .15s;
    white-space:   nowrap;
    line-height:   1.4;
}
.aict-chip:hover {
    background:   var(--aict-ac);
    color:        #fff;
    border-color: var(--aict-ac);
}

/* ── Input row ───────────────────────────────────────────── */
.aict-input-row {
    display:     flex;
    gap:         8px;
    align-items: flex-end;
    padding:     10px 12px;
    border-top:  1px solid var(--aict-bd);
    background:  var(--aict-sur);
    flex-shrink: 0;
}
.aict-input {
    flex:          1;
    background:    var(--aict-bg2);
    border:        1px solid var(--aict-bd2);
    border-radius: var(--aict-r-sm);
    padding:       8px 11px;
    font-size:     13.5px;
    font-family:   inherit;
    color:         var(--aict-tx);
    outline:       none;
    resize:        none;
    max-height:    100px;
    overflow-y:    auto;
    line-height:   1.5;
    transition:    border-color .2s, box-shadow .2s;
    box-sizing:    border-box;
}
.aict-input:focus {
    border-color: var(--aict-ac);
    box-shadow:   0 0 0 3px var(--aict-ac-glow);
    background:   #fff;
}
.aict-input::placeholder { color: var(--aict-tx3); }

.aict-send-btn {
    width:           36px;
    height:          36px;
    border-radius:   var(--aict-r-sm);
    background:      var(--aict-ac);
    border:          none;
    cursor:          pointer;
    color:           #fff;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    transition:      all .2s;
    padding:         0;
}
.aict-send-btn:hover:not(:disabled) {
    background: var(--aict-ac-dk);
    transform:  scale(1.06);
}
.aict-send-btn:disabled {
    background: var(--aict-bd2);
    cursor:     not-allowed;
    transform:  none;
}

/* ── Footer note ─────────────────────────────────────────── */
.aict-footer-note {
    padding:    5px 12px 8px;
    font-size:  10.5px;
    color:      var(--aict-tx3);
    text-align: center;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   FLOATING BUTTON & PANEL
   ═══════════════════════════════════════════════════════════ */

.aict-float-wrap {
    position:       fixed !important;
    bottom:         24px !important;
    z-index:        999999 !important;
    display:        flex !important;
    flex-direction: column !important;
    align-items:    flex-start !important;
    /* Reset any Flatsome overrides */
    width:          auto !important;
    max-width:      none !important;
    margin:         0 !important;
    padding:        0 !important;
    transform:      none !important;
    overflow:       visible !important;
    background:     transparent !important;
    border:         none !important;
    box-shadow:     none !important;
}
.aict-float-left  { left: 24px !important; right: auto !important; align-items: flex-start !important; }
.aict-float-right { right: 24px !important; left: auto !important; align-items: flex-end !important; }

/* ── Trigger button ─────────────────────────────────────── */
.aict-float-btn {
    display:     flex;
    align-items: center;
    gap:         10px;
    background:  linear-gradient(135deg, var(--aict-ac), var(--aict-ac-dk));
    color:       #fff;
    border:      none;
    border-radius: 28px;
    padding:     11px 20px 11px 15px;
    cursor:      pointer;
    font-family: inherit;
    font-size:   14px;
    font-weight: 600;
    box-shadow:  0 6px 24px var(--aict-ac-glow);
    transition:  all .25s;
    position:    relative;
    white-space: nowrap;
    line-height: 1;
}
.aict-float-btn:hover {
    transform:  translateY(-2px);
    box-shadow: 0 10px 32px rgba(21,119,158,.45);
}
.aict-float-btn::before {
    content:       '';
    position:      absolute;
    inset:         -5px;
    border-radius: 32px;
    border:        2px solid rgba(21,119,158,.25);
    animation:     aict-ring 2.5s ease infinite;
    pointer-events: none;
}
@keyframes aict-ring {
    0%   { transform:scale(1);    opacity:1; }
    100% { transform:scale(1.18); opacity:0; }
}
.aict-float-icon { font-size: 18px; line-height: 1; }
.aict-float-labels { display: flex; flex-direction: column; }
.aict-float-lbl { font-size: 14px; font-weight: 700; }
.aict-float-sub { font-size: 10.5px; font-weight: 400; opacity: .85; margin-top: 1px; }

/* Open state: btn becomes round X */
.aict-float-wrap.is-open .aict-float-btn {
    border-radius: 50%;
    padding:       0;
    width:         50px;
    height:        50px;
    justify-content: center;
}
.aict-float-wrap.is-open .aict-float-labels { display: none; }
.aict-float-wrap.is-open .aict-float-icon::after { content: '✕'; font-size: 16px; }
.aict-float-wrap.is-open .aict-float-icon { font-size: 0; }

/* ── Chat panel ─────────────────────────────────────────── */
.aict-float-panel {
    /* KEY FIX: display:none takes NO space — opacity alone still occupies space */
    display:        none !important;
    width:          380px;
    max-width:      calc(100vw - 32px);
    background:     var(--aict-sur);
    border:         1px solid var(--aict-bd);
    border-radius:  var(--aict-r);
    box-shadow:     0 20px 60px rgba(12,31,46,.18), 0 4px 16px var(--aict-ac-glow);
    overflow:       hidden;
    flex-direction: column;
    margin-bottom:  12px;
    /* Animation handled by adding is-visible class after display:flex */
    transform:      translateY(16px) scale(.97);
    opacity:        0;
    transition:     transform .3s cubic-bezier(.2,.8,.2,1), opacity .25s ease;
}
/* Step 1: JS adds is-open → display:flex */
.aict-float-wrap.is-open .aict-float-panel {
    display:    flex !important;
}
/* Step 2: JS adds is-visible (tiny delay) → animate in */
.aict-float-wrap.is-open .aict-float-panel.is-visible {
    transform:  translateY(0) scale(1);
    opacity:    1;
}

/* Close bar at bottom */
.aict-float-close-bar {
    display:     flex;
    align-items: center;
    gap:         6px;
    width:       100%;
    padding:     8px 14px;
    background:  none;
    border:      none;
    border-top:  1px solid var(--aict-bd);
    color:       var(--aict-tx3);
    font-size:   12px;
    font-family: inherit;
    cursor:      pointer;
    transition:  color .2s;
    flex-shrink: 0;
}
.aict-float-close-bar:hover { color: var(--aict-tx2); }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 480px) {
    .aict-float-panel {
        width:     calc(100vw - 24px) !important;
        max-width: none !important;
    }
    .aict-float-left  { left: 12px !important; }
    .aict-float-right { right: 12px !important; }
    .aict-float-wrap  { bottom: 16px !important; }
    .aict-float-wrap.is-open .aict-float-btn { width: 44px !important; height: 44px !important; }
    .aict-float-btn { padding: 10px 16px 10px 13px; }
}

/* ═══════════════════════════════════════════════════════════
   IMAGE UPLOAD
   ═══════════════════════════════════════════════════════════ */

/* Upload button (label wrapping hidden input) */
.aict-upload-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           34px;
    height:          34px;
    flex-shrink:     0;
    border-radius:   var(--aict-r-sm);
    cursor:          pointer;
    color:           var(--aict-tx3);
    transition:      color .18s, background .18s;
    margin-bottom:   0;  /* override WP/Flatsome label margin */
}
.aict-upload-btn:hover {
    color:       var(--aict-ac);
    background:  var(--aict-ac-bg);
}
.aict-upload-btn.has-image {
    color:      var(--aict-ac);
    background: var(--aict-ac-bg);
}

/* Image preview strip (above input row) */
.aict-img-preview {
    display:     flex;
    align-items: center;
    gap:         8px;
    padding:     8px 12px 4px;
    flex-shrink: 0;
}
.aict-img-thumb {
    width:         56px;
    height:        56px;
    object-fit:    cover;
    border-radius: 8px;
    border:        1px solid var(--aict-bd2);
    display:       block;
}
.aict-img-remove {
    background:    rgba(181,49,38,.1);
    border:        1px solid rgba(181,49,38,.22);
    border-radius: 50%;
    width:         22px;
    height:        22px;
    color:         var(--aict-red);
    font-size:     11px;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    flex-shrink:   0;
    line-height:   1;
    transition:    background .15s;
    padding:       0;
}
.aict-img-remove:hover { background: rgba(181,49,38,.2); }

/* Image inside chat bubble */
.aict-bubble-img {
    display:       block;
    max-width:     220px;
    max-height:    180px;
    border-radius: 8px;
    margin-top:    6px;
    object-fit:    cover;
    border:        1px solid var(--aict-bd2);
}