/* ===== OpenBook Bot (scoped) ===== */
.obb-toggle {
    position: fixed;
    bottom: 100px; /* במקום 20px */
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    box-shadow: 0 10px 25px rgba(0,0,0,.25);
    font-weight: 800;
    font-size: 20px;
    cursor: pointer;
    z-index: 9999;
    background: #1f2b49;
    color: #fff;
    transition: opacity .25s ease, transform .25s ease;
}

/* חלון הצ'אט */
.obb {
    position: fixed;
    bottom: 90px;
    right: 20px;
    width: 360px;
    max-height: 78vh;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 14px 40px rgba(0,0,0,.22);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 9999;
    font-family: inherit;
    border: 1px solid #e9e9ee;
    direction: rtl;
}

    .obb.is-open {
        display: flex;
    }

.obb__header {
    padding: 12px 16px;
    background: #f7f8fc;
    border-bottom: 1px solid #ececf3;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.obb__title {
    font-weight: 700;
}

.obb__close {
    background: transparent;
    border: none;
    font-size: 22px;
    cursor: pointer;
}

.obb__body {
    padding: 14px;
    overflow: auto;
}

.obb__footer {
    padding: 10px 14px;
    border-top: 1px solid #ececf3;
    display: flex;
    gap: 8px;
    justify-content: flex-start;
}

.obb__back {
    border: 1px solid #ddd;
    background: #fff;
    padding: 8px 12px;
    border-radius: 10px;
    cursor: pointer;
}
/* שכבת רקע לסגירת הבוט בלחיצה בחוץ */
.obb-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.12); /* או transparent אם לא רוצים האפלה */
    z-index: 2147483646; /* מתחת לבוט עצמו */
    display: none;
}

    .obb-overlay.is-on {
        display: block;
    }

/* בועת טקסט – עיצוב אחיד לכולן (כמו היפה בשמאל) */
.obb__msg {
    background: #f5f7fb; /* אפור-כחלחל רך */
    border: 1px solid #e6ebf5; /* קו דק בהיר */
    color: #1f2b49; /* טקסט כהה עדין */
    padding: 14px 16px; /* ריווח נדיב */
    border-radius: 18px; /* עיגול יפה כמו בשמאל */
    margin: 10px 12px; /* רווחים מחוץ לבועה */
    line-height: 1.55; /* קריאות */
    box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 1px 2px rgba(31,43,73,.05); /* טאץ' עדין */
}

    /* שיהיה ריווח קטן לפני הכפתורים */
    .obb__msg + .obb__buttons {
        margin-top: 6px;
    }

.obb__buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.obb__btn {
    width: 100%;
    text-align: center;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #dfe3ea;
    background: #fff;
    cursor: pointer;
}

    .obb__btn:hover {
        background: #f0f3fa;
    }

/* באנר תחתון */
.obb__banner {
    position: fixed;
    inset: auto 0 0 0;
    background: #1f2b49;
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    z-index: 9998;
}

    .obb__banner.is-open {
        display: flex;
    }
.obb__bubble,
.obb__banner,
.obb {
    z-index: 2147483647 !important;
}

    .obb__banner button {
        border: 1px solid rgba(255,255,255,.7);
        background: transparent;
        color: #fff;
        border-radius: 999px;
        padding: 6px 12px;
        cursor: pointer;
    }

/* ===== Cookie-like Bubble (left/right) ===== */
/* ===== Cookie-like Bubble (TOP-LEFT) ===== */
.obb__bubble {
    position: fixed;
    top: 50%; /* מרכז אנכי */
    bottom: auto; /* לא בתחתית */
    left: 18px; /* שמאל */
    right: auto;
    z-index: 2147483647; /* מעל הכל */
    direction: rtl;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    color: #333;
    border-radius: 999px;
    box-shadow: 0 12px 32px rgba(0,0,0,.18);
    border: 1px solid #ECEFF5;
    padding: 12px 14px;
    max-width: 520px;
    font-size: 15px;
    /* אנימציית כניסה עדינה מלמעלה */
    opacity: 0;
    transform: translateY(calc(-50% - 8px)); /* התחלה קצת מעל */
    transition: opacity .25s ease, transform .25s ease, max-width .35s ease, padding .35s ease;
}

    .obb__bubble.right {
        left: auto;
        right: 18px;
    }

    .obb__bubble .obb__bubble-text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 360px;
    }

    .obb__bubble .obb__bubble-cta {
        border: 2px solid #22c19e;
        color: #22c19e;
        background: #fff;
        border-radius: 999px;
        padding: 6px 12px;
        cursor: pointer;
        font-weight: 700;
    }

    .obb__bubble .obb__bubble-dismiss {
        border: 0;
        background: transparent;
        color: #98a2b3;
        border-radius: 999px;
        padding: 6px 10px;
        cursor: pointer;
    }

/* אייקון בתוך הבועה */
.obb__bubble-ico {
    display: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-weight: 800;
}

/* מצב ממוזער – עיגול ירוק עם ? באמצע */
.obb__bubble.is-min {
    width: 56px;
    height: 56px;
    padding: 0;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: #22c19e;
    border: 0;
    box-shadow: 0 12px 32px rgba(34,193,158,.35);
}

    .obb__bubble.is-min .obb__bubble-ico {
        display: flex;
        color: #fff;
    }

    .obb__bubble.is-min .obb__bubble-text,
    .obb__bubble.is-min .obb__bubble-cta,
    .obb__bubble.is-min .obb__bubble-dismiss {
        display: none;
    }

/* === THEME ירקרק כמו הבועה משמאל === */
.obb {
    --obb-accent: #22c19e; /* צבע ראשי */
    --obb-accent-600: #18b187; /* גוון כהה יותר */
    --obb-accent-50: #eafaf6; /* רקע עדין */
}

    /* כפתורי האפשרויות בתוך הצ'אט – קפסולה עם מסגרת ירוקה */
    .obb .obb__btn {
        width: 100%;
        border: 2px solid var(--obb-accent);
        background: #fff;
        color: var(--obb-accent);
        border-radius: 999px;
        padding: 14px 16px;
        font-weight: 800;
        font-size: 18px;
        cursor: pointer;
        transition: all .2s ease;
    }

        .obb .obb__btn:hover,
        .obb .obb__btn:focus-visible {
            background: var(--obb-accent);
            color: #fff;
            box-shadow: 0 6px 16px rgba(24,177,135,.22);
            outline: none;
        }

    /* כפתור "חזרה" – באותו קו עיצוב */
    .obb .obb__back {
        border: 1.5px solid var(--obb-accent);
        color: var(--obb-accent);
        background: #fff;
        border-radius: 999px;
        padding: 8px 12px;
        font-weight: 700;
    }

        .obb .obb__back:hover {
            background: var(--obb-accent-50);
        }

    /* בועות הטקסט – מראה “מפנק” כמו זה שאהבת */
    .obb .obb__msg {
        background: #f5f7fb;
        border: 1px solid #e6ebf5;
        color: #1f2b49;
        padding: 14px 16px;
        border-radius: 18px;
        margin: 10px 12px;
        line-height: 1.55;
        box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 1px 2px rgba(31,43,73,.05);
    }
        /* שיהיה רווח קטן לפני כפתורים */
        .obb .obb__msg + .obb__buttons {
            margin-top: 6px;
        }

    /* הידר נקי, וכפתור סגירה מקבל הדגשה ירוקה בהובר */
    .obb .obb__header {
        background: #fff;
        border-bottom: 1px solid #eef1f5;
    }

    .obb .obb__title {
        font-weight: 800;
        letter-spacing: .2px;
    }

    .obb .obb__close:hover {
        color: var(--obb-accent);
    }

    /* אם יש בחירת אוניברסיטה בתוך הבוט – מגע ירקרק בפוקוס */
    .obb .obb__uniPicker select:focus {
        border-color: var(--obb-accent);
        box-shadow: 0 0 0 3px rgba(34,193,158,.15);
        outline: 0;
    }

    .obb .obb__uniList a {
        display: block;
        border: 1.5px solid #dfe3ea;
        border-radius: 10px;
        padding: 10px 12px;
        text-decoration: none;
        color: #1f2b49;
        background: #fff;
        transition: all .15s ease;
    }

        .obb .obb__uniList a:hover {
            border-color: var(--obb-accent);
            background: var(--obb-accent-50);
        }
/* === SIZE TUNING (קטנת טקסטים וריווחים) === */
.obb {
    --obb-font-base: 15px; /* טקסט רגיל בבוט */
    --obb-font-btn: 16px; /* טקסט בכפתורי האפשרויות */
}

    /* כותרת עליונה */
    .obb .obb__title {
        font-size: 18px;
    }

    /* בועות טקסט */
    .obb .obb__msg {
        font-size: var(--obb-font-base);
        padding: 12px 14px; /* היה 14/16 */
        border-radius: 16px; /* היה 18 */
    }

    /* כפתורי האפשרויות (הירוקים) */
    .obb .obb__btn {
        font-size: var(--obb-font-btn); /* היה 18px */
        padding: 12px 14px; /* היה 14px 16px */
        border-width: 1.5px; /* היה 2px */
    }

    /* כפתור "חזרה" */
    .obb .obb__back {
        font-size: 14px;
        padding: 7px 10px;
    }

    /* ריווחי מכולות טיפ-טיפה קטנים יותר */
    .obb .obb__header {
        padding: 10px 14px;
    }

    .obb .obb__body {
        padding: 12px;
    }
/* UI קטן לבוחר אוניברסיטה בתוך הבוט */
.obb__picker {
    margin: 8px 0 0;
}

.obb__select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #dfe3ea;
    border-radius: 10px;
    background: #fff;
    font-size: 14px;
    margin-bottom: 10px;
}

.obb__hint {
    color: #6b7280;
    font-size: 13px;
    padding: 6px 0;
}

/* מובייל – עוד טיפה הקטנה */
@media (max-width:480px) {
    .obb .obb__title {
        font-size: 16px;
    }

    .obb .obb__msg {
        font-size: 14px;
    }

    .obb .obb__btn {
        font-size: 15px;
        padding: 10px 12px;
    }
}

/* מובייל – עדיין למעלה שמאל */
@media (max-width: 480px) {
    .obb__bubble {
        left: 10px;
        right: 10px;
        max-width: calc(100vw - 20px);
    }

        .obb__bubble.right {
            right: 10px;
        }
}

/* === Bubble text: mobile only (לא לגעת בדסקטופ) === */
@media (max-width:480px) {
    /* שהבועה תוכל לשבור שורה ותתפרס יפה */
    .obb__bubble {
        left: 10px;
        right: 10px;
        max-width: calc(100vw - 20px);
        flex-wrap: wrap;
        row-gap: 8px;
    }

        .obb__bubble .obb__bubble-text {
            white-space: normal; /* לא לכפות שורה אחת */
            overflow: visible;
            text-overflow: clip; /* בלי … */
            max-width: none;
            line-height: 1.35;
            flex: 1 1 100%; /* שהמלל יקח רוחב מלא וירד שורה */
        }
        /* הכפתור נשאר ליד הטקסט */
        .obb__bubble .obb__bubble-cta {
            flex: 0 0 auto;
        }
        /* במצב ממוזער נשאר רק האייקון (כמו קודם) */
        .obb__bubble.is-min .obb__bubble-text,
        .obb__bubble.is-min .obb__bubble-cta,
        .obb__bubble.is-min .obb__bubble-dismiss {
            display: none;
        }
}

@media (max-width:480px) {
    .obb {
        right: 10px;
        left: 10px;
        width: auto;
    }

    .obb-toggle {
        right: 10px;
    }

    .obb__banner {
        font-size: 14px;
    }
}
/* מובייל – עיגול ממוזער קטן יותר */
@media (max-width:480px) {
    .obb__bubble.is-min {
        width: 40px;
        height: 40px;
        box-shadow: 0 8px 18px rgba(34,193,158,.28); /* עדין יותר, אופציונלי */
    }
        /* גודל סימן השאלה בתוך העיגול */
        .obb__bubble.is-min .obb__bubble-ico {
            font-size: 16px; /* היה גדול יותר – מקטינים בהתאם */
        }
}
/* כשהחלון של הבוט פתוח – אל תציגי את העיגול הממוזער כדי שלא יפריע */
@media (max-width: 768px) {
    .obb.is-open ~ .obb__bubble {
        display: none !important;
    }
}