/* ConvoFlow AI v4.0 — Widget CSS */

/* ── Design tokens ─────────────────────────────────────── */
#cf-widget-wrap {
    /* Light mode defaults */
    --cf-accent:          #6366f1;
    --cf-accent-color:    #6366f1;
    --cf-bg:              #ffffff;
    --cf-bg-color:        #ffffff;
    --cf-text:            #1a1a2e;
    --cf-text-color:      #1a1a2e;
    --cf-btn:             #6366f1;
    --cf-btn-color:       #6366f1;
    --cf-btn-text:        #ffffff;
    --cf-btn-text-color:  #ffffff;
    --cf-trigger:         #6366f1;
    --cf-trigger-text:    #ffffff;
    --cf-dark-accent:     #818cf8;
    --cf-dark-bg:         #0f1117;
    --cf-dark-text:       #e8eaf0;
    --cf-radius:          16px;
    --cf-border-radius-val: 16px;
    --cf-w-font:          -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    /* Light mode surface/border */
    --cf-muted:           #6b7280;
    --cf-surface:         #f3f4f6;
    --cf-surface-input:   #f9fafb;
    --cf-border:          rgba(0,0,0,.10);
    --cf-border-input:    rgba(0,0,0,.18);
    --cf-shadow:          0 8px 40px rgba(0,0,0,.16);
    --cf-opt-bg:          rgba(99,102,241,.08);
    --cf-opt-text:        var(--cf-accent-color);
    --cf-opt-border:      var(--cf-accent-color);
    --cf-inp-bg:          #ffffff;
    --cf-inp-border:      rgba(0,0,0,.22);
    --cf-inp-text:        #1a1a2e;
    --cf-inp-placeholder: #9ca3af;
    --cf-send-bg:         var(--cf-btn-color);
    --cf-send-icon:       #ffffff;
}

/* ── Dark mode overrides ───────────────────────────────── */
#cf-widget-wrap.theme-dark {
    --cf-bg:              var(--cf-dark-bg, #0f1117);
    --cf-bg-color:        var(--cf-dark-bg, #0f1117);
    --cf-text:            var(--cf-dark-text, #e8eaf0);
    --cf-text-color:      var(--cf-dark-text, #e8eaf0);
    --cf-accent-color:    var(--cf-dark-accent, #818cf8);
    --cf-surface:         rgba(255,255,255,.06);
    --cf-surface-input:   rgba(255,255,255,.08);
    --cf-border:          rgba(255,255,255,.10);
    --cf-border-input:    rgba(255,255,255,.22);
    --cf-muted:           #9ca3af;
    --cf-opt-bg:          rgba(129,140,248,.12);
    --cf-opt-text:        #c7d2fe;
    --cf-opt-border:      rgba(129,140,248,.5);
    --cf-inp-bg:          rgba(255,255,255,.07);
    --cf-inp-border:      rgba(255,255,255,.25);
    --cf-inp-text:        #e8eaf0;
    --cf-inp-placeholder: #6b7280;
}

/* ── Wrap & positioning ─────────────────────────────────── */
#cf-widget-wrap {
    position: fixed;
    z-index: 2147483647;
    font-family: var(--cf-w-font);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
/* All child elements inherit widget font */
#cf-widget-wrap *, #cf-widget-wrap *::before, #cf-widget-wrap *::after {
    box-sizing: border-box;
}
#cf-widget-wrap.pos-bottom-right { bottom:20px; right:20px; }
#cf-widget-wrap.pos-bottom-left  { bottom:20px; left:20px; }
#cf-widget-wrap.pos-top-right    { top:20px;    right:20px; }
#cf-widget-wrap.pos-top-left     { top:20px;    left:20px; }

/* ── Trigger button ─────────────────────────────────────── */
#cf-trigger {
    width:58px; height:58px;
    border-radius:50%;
    background: var(--cf-trigger, var(--cf-btn-color, #6366f1));
    color: var(--cf-trigger-text, var(--cf-btn-text-color, #fff));
    border:none;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 4px 20px rgba(0,0,0,.25);
    transition: transform .2s, box-shadow .2s;
    outline:none;
    animation: cfPulse 3s ease-in-out infinite;
    font-size:22px;
    line-height:1;
}
#cf-trigger .cf-trigger-icon { display:flex; align-items:center; justify-content:center; }
#cf-trigger .cf-trigger-icon img { width:28px; height:28px; object-fit:contain; }
#cf-trigger .cf-trigger-icon svg { width:24px; height:24px; }
@keyframes cfPulse {
    0%,100% { box-shadow: 0 4px 20px rgba(0,0,0,.22), 0 0 0 0 rgba(99,102,241,.35); }
    50%      { box-shadow: 0 4px 20px rgba(0,0,0,.22), 0 0 0 8px rgba(99,102,241,.0); }
}
#cf-trigger:hover { transform:scale(1.08); box-shadow:0 6px 24px rgba(0,0,0,.28); animation:none; }
#cf-trigger:active { transform:scale(.95); }
#cf-widget-wrap.size-small #cf-trigger { width:48px; height:48px; font-size:18px; }
#cf-widget-wrap.size-large #cf-trigger { width:68px; height:68px; font-size:26px; }

/* ── Panel ──────────────────────────────────────────────── */
#cf-panel {
    position:absolute;
    bottom:72px; right:0;
    width:370px;
    height:560px;
    background: var(--cf-bg);
    color: var(--cf-text);
    border-radius:20px;
    box-shadow: var(--cf-shadow);
    border: 1px solid var(--cf-border);
    display:flex; flex-direction:column;
    overflow:hidden;
    transform-origin: bottom right;
    animation: cfPanelIn .22s cubic-bezier(.22,.61,.36,1);
}
#cf-panel[hidden] { display:none; }
#cf-widget-wrap.pos-bottom-left  #cf-panel { right:auto; left:0; transform-origin:bottom left; }
#cf-widget-wrap.pos-top-right    #cf-panel { bottom:auto; top:72px; transform-origin:top right; }
#cf-widget-wrap.pos-top-left     #cf-panel { bottom:auto; top:72px; right:auto; left:0; transform-origin:top left; }
#cf-widget-wrap.size-large #cf-panel { width:420px; height:640px; }
#cf-widget-wrap.size-small #cf-panel { width:320px; height:480px; }
@keyframes cfPanelIn {
    from { opacity:0; transform:scale(.94) translateY(10px); }
    to   { opacity:1; transform:scale(1)   translateY(0); }
}

/* ── Header ─────────────────────────────────────────────── */
.cf-w-header {
    background: var(--cf-accent-color);
    color:#fff;
    padding:0 14px;
    height:62px;
    display:flex; align-items:center; justify-content:space-between;
    flex-shrink:0;
}
.cf-w-header-left { display:flex; align-items:center; gap:10px; }
.cf-w-avatar {
    width:36px; height:36px;
    border-radius:50%;
    background:rgba(255,255,255,.18);
    display:flex; align-items:center; justify-content:center;
    font-size:18px; overflow:hidden; flex-shrink:0;
}
.cf-w-avatar img { width:100%; height:100%; object-fit:cover; }
.cf-w-name { font-size:14px; font-weight:700; color:#fff; line-height:1.2; }
.cf-w-status { display:flex; align-items:center; gap:5px; }
.cf-w-dot { width:7px; height:7px; border-radius:50%; background:#4ade80; animation:cfPulse 2s ease-in-out infinite; }
.cf-w-status-text { font-size:11.5px; color:rgba(255,255,255,.85); }
.cf-w-header-right { display:flex; align-items:center; gap:6px; }

/* Close button — FontAwesome icon */
.cf-w-close {
    background:rgba(255,255,255,.15);
    border:none; border-radius:50%;
    width:30px; height:30px;
    cursor:pointer; color:#fff;
    display:flex; align-items:center; justify-content:center;
    transition:background .15s, transform .15s; flex-shrink:0;
    font-size:14px;
}
.cf-w-close:hover { background:rgba(255,255,255,.3); transform:scale(1.1); }

/* Language toggle */
.cf-w-lang-toggle { display:flex; align-items:center; gap:2px; font-size:11px; }
.cf-w-lang-btn { padding:2px 6px; border-radius:4px; cursor:pointer; color:rgba(255,255,255,.7); transition:.15s; }
.cf-w-lang-btn.active { background:rgba(255,255,255,.22); color:#fff; font-weight:700; }
.cf-w-lang-sep { color:rgba(255,255,255,.3); }

/* ── Messages ────────────────────────────────────────────── */
.cf-w-msgs {
    flex:1; overflow-y:auto;
    padding:14px 12px 6px;
    display:flex; flex-direction:column; gap:6px;
    scroll-behavior:smooth;
}
.cf-w-msgs::-webkit-scrollbar { width:3px; }
.cf-w-msgs::-webkit-scrollbar-thumb { background:rgba(128,128,128,.25); border-radius:2px; }

.cf-w-msg { display:flex; max-width:88%; }
.cf-w-msg.bot  { align-self:flex-start; }
.cf-w-msg.user { align-self:flex-end; flex-direction:row-reverse; }

.cf-w-bubble {
    padding:9px 13px;
    border-radius:18px;
    font-size:13.5px; line-height:1.55;
    word-break:break-word;
}
.cf-w-msg.bot  .cf-w-bubble {
    background:var(--cf-surface);
    color:var(--cf-text);
    border-bottom-left-radius:4px;
}
.cf-w-msg.user .cf-w-bubble {
    background:var(--cf-accent-color);
    color:#fff;
    border-bottom-right-radius:4px;
}

/* Typing indicator */
.cf-w-typing {
    display:flex; align-items:center; gap:4px;
    padding:10px 14px;
    background:var(--cf-surface); border-radius:18px; border-bottom-left-radius:4px;
}
.cf-w-typing span {
    width:7px; height:7px; background:var(--cf-muted); border-radius:50%;
    animation:cfBounce 1.2s infinite;
}
.cf-w-typing span:nth-child(2) { animation-delay:.2s; }
.cf-w-typing span:nth-child(3) { animation-delay:.4s; }
@keyframes cfBounce {
    0%,60%,100% { transform:translateY(0); }
    30%          { transform:translateY(-6px); }
}

/* ── Error / refresh state ───────────────────────────────── */
.cf-w-error-box {
    margin:12px;
    background:rgba(239,68,68,.08);
    border:1.5px solid rgba(239,68,68,.2);
    border-radius:14px;
    padding:14px 16px;
    text-align:center;
    color:var(--cf-text);
}
.cf-w-error-icon { font-size:28px; margin-bottom:8px; }
.cf-w-error-title { font-size:14px; font-weight:700; margin-bottom:4px; color:var(--cf-text); }
.cf-w-error-msg { font-size:12.5px; color:var(--cf-muted); margin-bottom:12px; line-height:1.5; }
.cf-w-error-refresh {
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 20px;
    background:var(--cf-accent-color); color:#fff;
    border:none; border-radius:50px;
    font-size:13px; font-weight:600; cursor:pointer;
    transition:opacity .15s;
}
.cf-w-error-refresh:hover { opacity:.85; }

/* ── Input area ─────────────────────────────────────────── */
.cf-w-input-area {
    flex-shrink:0;
    border-top:1px solid var(--cf-border);
    padding:8px 10px 10px;
    background:var(--cf-bg);
}

/* Option buttons — full theming for both modes */
.cf-w-opts { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:7px; }
.cf-w-opt {
    padding:7px 16px;
    border:1.5px solid var(--cf-opt-border);
    border-radius:50px;
    background:var(--cf-opt-bg);
    color:var(--cf-opt-text);
    font-size:12.5px; font-weight:600;
    cursor:pointer;
    transition:all .18s cubic-bezier(.22,.61,.36,1);
    line-height:1.3;
    font-family:var(--cf-w-font);
}
.cf-w-opt:hover {
    background:var(--cf-accent-color);
    color:#fff;
    border-color:var(--cf-accent-color);
    transform:translateY(-1px);
    box-shadow:0 4px 12px rgba(99,102,241,.3);
}
.cf-w-opt:active { transform:translateY(0); }

/* Dark mode option buttons — light borders + text */
#cf-widget-wrap.theme-dark .cf-w-opt {
    border-color:rgba(199,210,254,.4);
    color:#c7d2fe;
    background:rgba(99,102,241,.1);
}
#cf-widget-wrap.theme-dark .cf-w-opt:hover {
    background:var(--cf-dark-accent, #818cf8);
    color:#fff;
    border-color:var(--cf-dark-accent, #818cf8);
}

/* Free text input — fully visible in both modes */
.cf-w-free-row { display:flex; gap:6px; align-items:center; }
.cf-w-free-input {
    flex:1;
    padding:8px 14px;
    border:1.5px solid var(--cf-inp-border);
    border-radius:24px;
    font-size:13px;
    outline:none;
    background:var(--cf-inp-bg);
    color:var(--cf-inp-text);
    height:36px;
    transition:border-color .15s, box-shadow .15s;
    font-family:var(--cf-w-font);
    appearance:none;
    -webkit-appearance:none;
}
.cf-w-free-input::placeholder { color:var(--cf-inp-placeholder); }
.cf-w-free-input:focus {
    border-color:var(--cf-accent-color);
    box-shadow:0 0 0 3px rgba(99,102,241,.12);
}

/* Dark mode input — clearly visible */
#cf-widget-wrap.theme-dark .cf-w-free-input {
    background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.28);
    color:#e8eaf0;
}
#cf-widget-wrap.theme-dark .cf-w-free-input::placeholder { color:#6b7280; }
#cf-widget-wrap.theme-dark .cf-w-free-input:focus {
    border-color:var(--cf-dark-accent, #818cf8);
    box-shadow:0 0 0 3px rgba(129,140,248,.15);
}

/* Send button — FontAwesome icon, always visible */
.cf-w-send-btn {
    width:36px; height:36px;
    border-radius:50%;
    background:var(--cf-btn-color);
    color:var(--cf-btn-text-color);
    border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
    transition:transform .15s, opacity .15s, box-shadow .15s;
    box-shadow:0 2px 8px rgba(99,102,241,.3);
    font-size:14px;
}
.cf-w-send-btn:hover { transform:scale(1.1); box-shadow:0 4px 14px rgba(99,102,241,.4); }
.cf-w-send-btn:active { transform:scale(.93); }

/* Restart button */
.cf-w-restart {
    width:100%; padding:7px;
    margin-top:4px;
    border:1.5px dashed var(--cf-border-input);
    border-radius:50px;
    background:transparent;
    color:var(--cf-muted);
    font-size:12px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:5px;
    transition:.15s;
    font-family:var(--cf-w-font);
}
.cf-w-restart:hover { background:var(--cf-surface); color:var(--cf-text); }

/* ── Footer ─────────────────────────────────────────────── */
.cf-w-footer {
    flex-shrink:0; height:34px;
    display:flex; align-items:center; justify-content:center;
    border-top:1px solid var(--cf-border);
    background:var(--cf-bg);
}
.cf-w-powered { font-size:10.5px; color:var(--cf-muted); }
.cf-w-powered a { color:var(--cf-muted); text-decoration:none; }
.cf-w-powered a:hover { color:var(--cf-accent-color); }

/* ── Product cards ──────────────────────────────────────── */
.cf-w-products { display:flex; flex-direction:column; gap:8px; width:100%; }
.cf-w-card {
    background:var(--cf-bg);
    border:1px solid var(--cf-border);
    border-radius:14px; overflow:hidden;
    animation:cfCardIn .3s ease both;
    box-shadow:0 2px 8px rgba(0,0,0,.05);
    transition:box-shadow .2s, border-color .2s;
}
.cf-w-card:hover { box-shadow:0 4px 16px rgba(0,0,0,.1); border-color:var(--cf-accent-color); }
#cf-widget-wrap.theme-dark .cf-w-card { background:rgba(255,255,255,.04); }
@keyframes cfCardIn {
    from { opacity:0; transform:translateY(8px); }
    to   { opacity:1; transform:translateY(0); }
}
.cf-w-card-inner { display:flex; align-items:flex-start; gap:10px; padding:10px; }
.cf-w-card-thumb {
    width:60px; height:60px;
    border-radius:10px; overflow:hidden; flex-shrink:0;
    background:var(--cf-surface);
    display:flex; align-items:center; justify-content:center;
}
.cf-w-card-thumb img { width:100%; height:100%; object-fit:cover; }
.cf-w-card-emoji { font-size:24px; }
.cf-w-card-info { flex:1; min-width:0; }
.cf-w-card-name {
    font-size:13px; font-weight:700; color:var(--cf-text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    margin-bottom:2px; line-height:1.3; display:block;
}
.cf-w-card-link { color:var(--cf-accent-color); text-decoration:none; }
.cf-w-card-link:hover { text-decoration:underline; }
.cf-w-card-cat {
    font-size:10.5px; font-weight:600;
    color:var(--cf-accent-color);
    background:var(--cf-opt-bg);
    padding:2px 7px; border-radius:20px;
    display:inline-block; margin-bottom:3px;
}
.cf-w-card-price { font-size:13px; font-weight:700; color:var(--cf-text); margin-bottom:2px; }
.cf-w-card-reason { font-size:11.5px; color:var(--cf-muted); line-height:1.45; }
.cf-w-card-actions { display:flex; flex-wrap:wrap; gap:6px; padding:0 10px 10px; }

/* CTA buttons */
.cf-w-btn-primary {
    padding:6px 14px;
    background:var(--cf-btn-color); color:var(--cf-btn-text-color);
    border:none; border-radius:50px;
    font-size:12px; font-weight:600; cursor:pointer;
    text-decoration:none; display:inline-flex; align-items:center; gap:4px;
    transition:all .18s; line-height:1;
    font-family:var(--cf-w-font);
}
.cf-w-btn-primary:hover { opacity:.85; transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.2); }
.cf-w-btn-secondary {
    padding:6px 14px;
    background:transparent; color:var(--cf-text);
    border:1.5px solid var(--cf-border-input);
    border-radius:50px; font-size:12px; font-weight:600;
    cursor:pointer; text-decoration:none;
    display:inline-flex; align-items:center;
    transition:.18s; line-height:1;
    font-family:var(--cf-w-font);
}
.cf-w-btn-secondary:hover { border-color:var(--cf-accent-color); color:var(--cf-accent-color); transform:translateY(-1px); }
#cf-widget-wrap.theme-dark .cf-w-btn-secondary { border-color:rgba(255,255,255,.22); color:var(--cf-text); }

/* ── Inline forms ───────────────────────────────────────── */
.cf-w-inp {
    width:100%; padding:8px 12px;
    border:1.5px solid var(--cf-inp-border);
    border-radius:10px; font-size:12.5px;
    background:var(--cf-inp-bg);
    color:var(--cf-inp-text);
    outline:none; margin-bottom:6px;
    font-family:var(--cf-w-font); box-sizing:border-box;
    transition:border-color .15s;
}
.cf-w-inp::placeholder { color:var(--cf-inp-placeholder); }
.cf-w-inp:focus { border-color:var(--cf-accent-color); }
textarea.cf-w-inp { resize:none; }

.cf-w-lead-form, .cf-w-booking-form {
    padding:12px; background:var(--cf-surface);
    border-radius:14px; border:1px solid var(--cf-border);
    width:100%; box-sizing:border-box;
}
.cf-w-lead-q { font-size:12.5px; color:var(--cf-muted); margin-bottom:10px; line-height:1.5; }
.cf-w-booking-title { font-size:13.5px; font-weight:700; color:var(--cf-text); margin-bottom:10px; }
.cf-w-booking-row { display:flex; gap:6px; }
.cf-w-booking-row .cf-w-inp { flex:1; }
.cf-w-book-submit {
    width:100%; padding:9px;
    background:var(--cf-btn-color); color:var(--cf-btn-text-color);
    border:none; border-radius:50px;
    font-size:13px; font-weight:600; cursor:pointer;
    margin-bottom:6px; transition:all .18s;
    font-family:var(--cf-w-font);
}
.cf-w-book-submit:hover { opacity:.88; transform:translateY(-1px); }
.cf-w-book-submit:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.cf-w-booking-success, .cf-w-lead-success {
    text-align:center; padding:16px 10px;
    font-size:13px; color:var(--cf-text); line-height:1.6;
}

/* ── Inline book button ─────────────────────────────────── */
.cf-book-inline-btn {
    padding:6px 14px;
    background:var(--cf-btn-color); color:var(--cf-btn-text-color);
    border:none; border-radius:50px; font-size:12px; font-weight:600;
    cursor:pointer; display:inline-flex; align-items:center; gap:4px;
    transition:all .18s; line-height:1; font-family:var(--cf-w-font);
}
.cf-book-inline-btn:hover { opacity:.88; transform:translateY(-1px); }

/* ── Demo badge ─────────────────────────────────────────── */
#cf-demo-badge {
    position:absolute; top:66px; right:8px;
    background:#f59e0b; color:#fff;
    font-size:10px; font-weight:700;
    padding:3px 8px; border-radius:8px; letter-spacing:.03em; z-index:10;
}

/* ── RTL ────────────────────────────────────────────────── */
.cf-rtl { direction:rtl; text-align:right; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width:430px) {
    #cf-panel {
        width:calc(100vw - 16px) !important;
        height:calc(100dvh - 96px) !important;
        bottom:68px; right:0; left:auto;
    }
    #cf-widget-wrap.pos-bottom-left #cf-panel { left:0; right:auto; }
}

/* ── Advisory cards ─────────────────────────────────────── */
.cf-w-advisory-card {
    background:var(--cf-bg);
    border:1.5px solid var(--cf-border);
    border-radius:16px;
    padding:13px 14px;
    animation:cfCardIn .3s ease both;
    transition:border-color .18s, box-shadow .18s;
}
.cf-w-advisory-card:hover {
    border-color:var(--cf-accent-color);
    box-shadow:0 4px 16px rgba(99,102,241,.12);
}
#cf-widget-wrap.theme-dark .cf-w-advisory-card { background:rgba(255,255,255,.04); }

.cf-w-advisory-cat {
    font-size:10.5px; font-weight:600;
    color:var(--cf-opt-text);
    background:var(--cf-opt-bg);
    display:inline-block;
    padding:1px 8px; border-radius:20px;
    margin-bottom:4px;
}
.cf-w-advisory-name {
    font-size:13.5px; font-weight:700;
    color:var(--cf-text); line-height:1.3;
    margin-bottom:5px;
}
.cf-w-advisory-reason {
    font-size:12.5px; color:var(--cf-muted);
    line-height:1.55; margin-bottom:10px;
}
.cf-w-advisory-cta { display:flex; flex-wrap:wrap; gap:6px; }
.cf-w-advisory-btn {
    display:inline-flex; align-items:center; gap:4px;
    padding:8px 18px;
    background:var(--cf-accent-color); color:#fff;
    border:none; border-radius:50px;
    font-size:12.5px; font-weight:700; cursor:pointer;
    text-decoration:none; transition:all .18s;
    font-family:var(--cf-w-font);
    box-shadow:0 3px 10px rgba(99,102,241,.25);
}
.cf-w-advisory-btn:hover { opacity:.88; transform:translateY(-1px); }
.cf-w-advisory-btn:active { transform:translateY(0); }