/* VenusBot - Theme-aligned (venustore) + Modern UI */

:root{
    /* از تم سایتت استفاده می‌کنیم */
    --vb-primary: var(--primary-color, #f97316);
    --vb-primary-dark: var(--primary-dark, #ea580c);
    --vb-primary-light: var(--primary-light, #fed7aa);
    --vb-primary-bg: var(--primary-bg, #fff7ed);

    --vb-text: var(--text-primary, #1c1917);
    --vb-muted: var(--text-secondary, #78716c);

    --vb-bg: var(--bg-white, #ffffff);
    --vb-surface: rgba(255,255,255,0.86);
    --vb-surface-2: rgba(255,255,255,0.92);

    --vb-border: var(--border-color, rgba(0,0,0,0.10));
    --vb-shadow: 0 18px 55px rgba(0,0,0,0.22);
    --vb-shadow-soft: 0 10px 30px rgba(0,0,0,0.16);

    --vb-radius: 18px;
    --vb-radius-sm: 14px;

    /* حباب‌ها (خوانا) */
    --vb-user-bubble: color-mix(in srgb, var(--vb-primary) 16%, #ffffff 84%);
    --vb-user-bubble-border: color-mix(in srgb, var(--vb-primary) 22%, rgba(0,0,0,0.08) 78%);
    --vb-bot-bubble: rgba(255,255,255,0.92);
    --vb-bot-bubble-border: rgba(0,0,0,0.10);
}

/* دکمه شناور */
#venusbot-btn{
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    color: #fff;
    font-size: 20px;

    background: radial-gradient(120% 120% at 30% 20%,
    color-mix(in srgb, var(--vb-primary) 65%, #ffffff 35%) 0%,
    var(--vb-primary) 55%,
    var(--vb-primary-dark) 100%
    );

    box-shadow: var(--vb-shadow-soft);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    z-index: 999999;
}
#venusbot-btn:hover{
    transform: translateY(-2px);
    filter: brightness(1.02);
    box-shadow: 0 14px 36px rgba(0,0,0,0.22);
}
#venusbot-btn:active{
    transform: translateY(0);
    box-shadow: 0 10px 26px rgba(0,0,0,0.18);
}

/* پنل */
#venusbot-box{
    position: fixed;
    right: 18px;
    bottom: 86px;

    width: 360px;
    max-width: calc(100vw - 36px);

    height: 520px;
    max-height: calc(100vh - 140px);

    background: var(--vb-surface);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    border: 1px solid var(--vb-border);
    border-radius: var(--vb-radius);
    box-shadow: var(--vb-shadow);
    overflow: hidden;

    display: none;
    z-index: 999999;

    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Vazirmatn", sans-serif;
    direction: rtl;

    transform-origin: bottom right;
    animation: vb-pop .18s ease-out;
}

@keyframes vb-pop{
    from { transform: translateY(10px) scale(.98); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* هدر */
#venusbot-head{
    padding: 12px 14px;
    border-bottom: 1px solid var(--vb-border);
    display: flex;
    justify-content: space-between;
    align-items: center;

    background:
            linear-gradient(180deg,
            color-mix(in srgb, var(--vb-primary-bg) 55%, rgba(255,255,255,0.85) 45%) 0%,
            rgba(255,255,255,0.70) 100%
            );
}

#venusbot-head > div > div:first-child{
    font-weight: 900;
    color: var(--vb-text);
    letter-spacing: -0.2px;
}
#venusbot-head > div > div:last-child{
    margin-top: 2px;
    font-size: 12px;
    color: var(--vb-muted);
}

/* دکمه بستن */
#venusbot-close{
    width: 34px;
    height: 34px;
    border-radius: 12px;
    border: 1px solid var(--vb-border);
    background: rgba(255,255,255,0.75);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;

    display: grid;
    place-items: center;
    transition: transform .15s ease, background .15s ease, filter .15s ease;
}
#venusbot-close:hover{
    transform: scale(1.03);
    background: rgba(255,255,255,0.92);
    filter: brightness(1.02);
}

/* ناحیه پیام‌ها */
#venusbot-msgs{
    height: calc(100% - 132px); /* کمی فضا بیشتر برای input + فاصله پایین */
    padding: 14px;
    overflow: auto;

    background:
            radial-gradient(120% 120% at 15% 0%,
            color-mix(in srgb, var(--vb-primary) 12%, transparent 88%) 0%,
            transparent 52%
            ),
            radial-gradient(120% 120% at 90% 20%,
            rgba(16,185,129,0.06) 0%,
            transparent 55%
            ),
            rgba(250,250,249,0.75);

    /* فاصله از پایین تا input (مشکل چسبیدن) */
    padding-bottom: 22px;
}

/* اسکرول‌بار */
#venusbot-msgs::-webkit-scrollbar{ width: 10px; }
#venusbot-msgs::-webkit-scrollbar-thumb{
    background: rgba(15,23,42,0.16);
    border-radius: 999px;
    border: 3px solid rgba(255,255,255,0.6);
}
#venusbot-msgs::-webkit-scrollbar-track{ background: transparent; }

/* حباب‌ها */
.vmsg{
    margin: 10px 0;
    padding: 11px 12px;
    border-radius: 16px;
    max-width: 88%;
    line-height: 1.7;
    white-space: pre-wrap;

    font-size: 14px;
    color: var(--vb-text);

    box-shadow: 0 8px 18px rgba(0,0,0,0.06);
    border: 1px solid transparent;
}

/* پیام کاربر: خوانا و با تم */
.vuser{
    margin-right: auto; /* RTL */
    background: var(--vb-user-bubble);
    border-color: var(--vb-user-bubble-border);
    color: var(--vb-text);
}

/* پیام بات */
.vbot{
    margin-left: auto; /* RTL */
    background: var(--vb-bot-bubble);
    border-color: var(--vb-bot-bubble-border);
    color: var(--vb-text);
}

/* ورودی (با فاصله از کف) */
#venusbot-in{
    border-top: 1px solid var(--vb-border);
    padding: 10px;
    padding-bottom: 16px;  /* ✅ فاصله از کف */
    display: flex;
    gap: 10px;

    background:
            linear-gradient(180deg,
            rgba(255,255,255,0.75) 0%,
            rgba(255,255,255,0.95) 100%
            );
}

#venusbot-in textarea{
    flex: 1;
    resize: none;
    height: 44px;

    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--vb-border) 60%, var(--vb-primary) 40%);
    outline: none;

    background: rgba(255,255,255,0.92);
    color: var(--vb-text);
    font-size: 13.5px;
    line-height: 1.4;

    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
#venusbot-in textarea::placeholder{
    color: color-mix(in srgb, var(--vb-muted) 75%, transparent 25%);
}
#venusbot-in textarea:focus{
    border-color: color-mix(in srgb, var(--vb-primary) 70%, rgba(0,0,0,0.10) 30%);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--vb-primary) 22%, transparent 78%);
}

/* دکمه ارسال با تم نارنجی */
#venusbot-in button{
    width: 78px;
    border: 0;
    border-radius: 14px;
    cursor: pointer;

    background: linear-gradient(180deg, var(--vb-primary) 0%, var(--vb-primary-dark) 100%);
    color: #fff;

    font-weight: 800;
    font-size: 13px;

    box-shadow: 0 10px 22px color-mix(in srgb, var(--vb-primary) 25%, rgba(0,0,0,0.10) 75%);
    transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
#venusbot-in button:hover{
    transform: translateY(-1px);
    filter: brightness(1.03);
}
#venusbot-in button:active{
    transform: translateY(0);
    filter: brightness(0.98);
}

/* موبایل */
@media (max-width: 420px){
    #venusbot-box{
        right: 12px;
        left: 12px;
        width: auto;
        bottom: 78px;
        height: 70vh;
        max-height: 70vh;
        border-radius: 20px;
    }
    #venusbot-btn{
        right: 12px;
        bottom: 12px;
    }
}

/* دارک مود (هماهنگ با سیستم)
   اگر سایت‌تون دارک رو با attribute کنترل می‌کنه، بگو تا دقیق‌تر sync کنیم. */
@media (prefers-color-scheme: dark){
    :root{
        --vb-surface: rgba(15,23,42,0.72);
        --vb-surface-2: rgba(15,23,42,0.82);
        --vb-border: rgba(255,255,255,0.12);

        --vb-text: rgba(255,255,255,0.92);
        --vb-muted: rgba(226,232,240,0.70);

        --vb-bot-bubble: rgba(2,6,23,0.35);
        --vb-bot-bubble-border: rgba(255,255,255,0.12);

        --vb-user-bubble: color-mix(in srgb, var(--vb-primary) 28%, rgba(2,6,23,0.35) 72%);
        --vb-user-bubble-border: color-mix(in srgb, var(--vb-primary) 35%, rgba(255,255,255,0.12) 65%);
    }

    #venusbot-head{
        background: linear-gradient(180deg,
        color-mix(in srgb, rgba(2,6,23,0.55) 70%, var(--vb-primary) 30%) 0%,
        rgba(15,23,42,0.32) 100%
        );
    }

    #venusbot-msgs{
        background:
                radial-gradient(120% 120% at 15% 0%, color-mix(in srgb, var(--vb-primary) 14%, transparent 86%) 0%, transparent 52%),
                rgba(2,6,23,0.35);
    }

    #venusbot-close{
        background: rgba(2,6,23,0.25);
        color: var(--vb-text);
    }

    #venusbot-in{
        background: linear-gradient(180deg, rgba(2,6,23,0.18) 0%, rgba(2,6,23,0.35) 100%);
    }

    #venusbot-in textarea{
        background: rgba(2,6,23,0.25);
        border-color: rgba(255,255,255,0.14);
        color: var(--vb-text);
    }

    #venusbot-msgs::-webkit-scrollbar-thumb{
        background: rgba(255,255,255,0.18);
        border: 3px solid rgba(2,6,23,0.22);
    }

    .vmsg{
        box-shadow: 0 12px 26px rgba(0,0,0,0.35);
    }
}