/* ==========================================================================
   Gmarup — Bug Report Widget
   כפתור "דיווח על תקלה" הצף + פופ-אפ הדיווח. נטען בכל דפי האפליקציה דרך
   templates/partials/bug_report_widget.html.

   הקובץ עצמאי לחלוטין (טוקנים משלו, תמיכה במצב כהה) כי הוא נטען גם בדפים
   שלא טוענים את shared_header_nav.css. כל המחלקות בקידומת .br- כדי לא
   להתנגש בשום עיצוב קיים.
   ========================================================================== */

:root {
    --br-gold:        #C7A853;
    --br-gold-dark:   #A0801A;
    --br-gold-soft:   #EBDDB0;
    --br-surface:     #FFFFFF;
    --br-surface-alt: #FAF7F0;
    --br-surface-sunken: #F4EFE4;
    --br-text:        #1A160E;
    --br-text-soft:   #6B6252;
    --br-border:      rgba(26, 22, 14, 0.10);
    --br-border-strong: rgba(26, 22, 14, 0.18);
    --br-danger:      #C0392B;
    --br-success:     #1F7A46;
    --br-shadow:      0 24px 60px rgba(26, 22, 14, 0.22);
    --br-radius:      20px;
    --br-font: 'Assistant', 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

    /* מרווח מלמטה לכפתור הצף — מחושב מחדש ב-JS לפי סרגלים קבועים בדף */
    --br-fab-bottom: 20px;
}

html[data-theme="dark"],
body.dark-mode {
    --br-surface:     #221E16;
    --br-surface-alt: #1B1810;
    --br-surface-sunken: #2C271C;
    --br-text:        #F5F1E6;
    --br-text-soft:   #B5AC98;
    --br-border:      rgba(245, 241, 230, 0.12);
    --br-border-strong: rgba(245, 241, 230, 0.22);
    --br-gold-soft:   #4A3F1F;
    --br-danger:      #E8776A;
    --br-success:     #4FBF83;
    --br-shadow:      0 24px 60px rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   1. הכפתור הצף — נוכח אבל לא תובעני
   ========================================================================== */

.br-fab {
    position: fixed;
    bottom: var(--br-fab-bottom);
    /* צד הכפתור נקבע ע"י data-side (השרת מחליט לכל דף — ראה
       bug_report_widget.html). חשוב שיהיו מאפיינים פיזיים בלבד: מאפיין
       לוגי כמו inset-inline-end דורס את left במסמך RTL, וזה מה שהצמיד
       בעבר את הכפתור לקצה הימני מתחת לפס הגלילה. */
    left: auto;
    right: auto;
    z-index: 800;

    display: inline-flex;
    align-items: center;
    gap: 0;
    height: 38px;
    padding: 0 10px;
    margin: 0;

    font-family: var(--br-font);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    color: var(--br-text-soft);

    background: var(--br-surface);
    border: 1px solid var(--br-border);
    border-radius: 999px;
    box-shadow: 0 2px 10px rgba(26, 22, 14, 0.10);
    cursor: pointer;
    opacity: 0.62;
    transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease,
                color .2s ease, border-color .2s ease, background-color .2s ease;
    -webkit-tap-highlight-color: transparent;
}

/* --br-fab-gap נקבע ב-inline style לכל דף (בפרופיל גדול יותר, כדי
   להתרחק מפס הגלילה שבצד ימין). */
.br-fab[data-side="left"]  { left: var(--br-fab-gap, 20px); right: auto; }
.br-fab[data-side="right"] { right: var(--br-fab-gap, 20px); left: auto; }

.br-fab i {
    font-size: 14px;
    line-height: 1;
    color: var(--br-gold-dark);
    transition: transform .25s ease;
}

/* התווית נפתחת ברחיפה בלבד — במנוחה הכפתור הוא אייקון בודד ושקט */
.br-fab .br-fab-label {
    display: inline-block;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    transition: max-width .28s cubic-bezier(.4, 0, .2, 1), opacity .18s ease,
                margin-inline-start .28s cubic-bezier(.4, 0, .2, 1);
    margin-inline-start: 0;
}

.br-fab:hover,
.br-fab:focus-visible {
    opacity: 1;
    color: var(--br-text);
    border-color: var(--br-gold);
    box-shadow: 0 6px 18px rgba(199, 168, 83, 0.28);
    transform: translateY(-1px);
}

.br-fab:hover .br-fab-label,
.br-fab:focus-visible .br-fab-label {
    max-width: 160px;
    opacity: 1;
    margin-inline-start: 7px;
}

.br-fab:focus-visible {
    outline: 2px solid var(--br-gold);
    outline-offset: 3px;
}

.br-fab:active { transform: translateY(0) scale(.96); }

/* במובייל אין hover — הכפתור נשאר אייקון בלבד, קצת יותר בולט כדי שיהיה נגיש למגע */
@media (hover: none) {
    .br-fab:not(.br-fab-inline) {
        opacity: 0.75;
        height: 40px;
        width: 40px;
        padding: 0;
        justify-content: center;
    }
    .br-fab .br-fab-label { display: none; }
}

/* ---- מצב "משובץ": הכפתור יושב בתוך סרגל ניווט של הדף ולא צף ----
   מופעל ע"י bug_report.js כשהוא מוצא מארח מתאים (למשל .sl-nav-left בדף
   הלימוד החכם). הכפתור מקבל שם גם את מחלקת .ic של אותו סרגל, ולכן כאן
   רק מנטרלים את מה ש-.br-fab הוסיף ושהסרגל לא מגדיר בעצמו. */
.br-fab.br-fab-inline {
    position: static;
    bottom: auto; left: auto; right: auto;
    opacity: 1;
    box-shadow: none;
    transform: none;
    font-size: inherit;
    flex: 0 0 auto;
    /* גובה/רוחב/ריפוד נשארים לסרגל המארח (.sl-nav .ic) — לא דורסים אותם כאן */
}
.br-fab.br-fab-inline:hover,
.br-fab.br-fab-inline:focus-visible {
    transform: none;
    box-shadow: none;
    border-color: transparent;
}
.br-fab.br-fab-inline .br-fab-label { display: none !important; }
.br-fab.br-fab-inline i {
    color: inherit;
    font-size: 16px;
}
/* בסרגלים ללא מחלקת .ic משלהם — ליפול לגודל נגיש סביר */
.br-fab.br-fab-inline:not(.ic) {
    width: 34px; height: 34px;
    padding: 0;
    justify-content: center;
    border-radius: 12px;
    background: transparent;
    border: 0;
    color: inherit;
}

/* מוסתר בזמן שהפופ-אפ פתוח (הצף בלבד — הסתרת המשובץ הייתה מזיזה את הסרגל) */
.br-fab[hidden] { display: none !important; }
body.br-modal-open .br-fab:not(.br-fab-inline) { display: none !important; }
body.br-modal-open .br-fab.br-fab-inline { visibility: hidden; }

@media print { .br-fab { display: none !important; } }

/* ==========================================================================
   2. שכבת הרקע והמודאל
   ========================================================================== */

.br-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;

    background: rgba(26, 22, 14, 0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .22s ease;
    font-family: var(--br-font);
}

.br-overlay[hidden] { display: none !important; }
.br-overlay.br-visible { opacity: 1; }

/* ל-.br-body ול-.br-foot יש display מפורש, ולכן ה-[hidden] של הדפדפן לבדו
   לא היה מסתיר אותם כשעוברים למסך ההצלחה. */
.br-body[hidden],
.br-foot[hidden] { display: none !important; }

.br-modal {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(620px, 100%);
    max-height: min(88vh, 860px);

    background: var(--br-surface);
    color: var(--br-text);
    border-radius: var(--br-radius);
    box-shadow: var(--br-shadow);
    overflow: hidden;

    transform: translateY(16px) scale(.98);
    opacity: 0;
    transition: transform .26s cubic-bezier(.2, .8, .3, 1), opacity .2s ease;
    text-align: start;
    direction: inherit;
}

.br-overlay.br-visible .br-modal { transform: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .br-overlay, .br-modal, .br-fab, .br-fab .br-fab-label { transition: none !important; }
}

/* ---- כותרת ---- */
.br-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    background: linear-gradient(135deg, rgba(199, 168, 83, .16), rgba(199, 168, 83, .04));
    border-bottom: 1px solid var(--br-border);
    flex: 0 0 auto;
}

.br-head-icon {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: linear-gradient(145deg, var(--br-gold), var(--br-gold-dark));
    color: #fff;
    font-size: 17px;
    box-shadow: 0 3px 10px rgba(199, 168, 83, .35);
}

.br-head-text { flex: 1 1 auto; min-width: 0; }

.br-head h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: var(--br-text);
    letter-spacing: -0.01em;
}

.br-head p {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: var(--br-text-soft);
    line-height: 1.35;
}

.br-close {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--br-text-soft);
    font-size: 15px;
    cursor: pointer;
    transition: all .15s ease;
}
.br-close:hover { background: var(--br-surface-sunken); color: var(--br-text); }
.br-close:focus-visible { outline: 2px solid var(--br-gold); outline-offset: 2px; }

/* ---- גוף גליל ---- */
.br-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 18px 20px 6px;
}

.br-body::-webkit-scrollbar { width: 8px; }
.br-body::-webkit-scrollbar-thumb {
    background: var(--br-border-strong);
    border-radius: 4px;
}

.br-field { margin-bottom: 16px; }

.br-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 700;
    color: var(--br-text);
}
.br-label .br-opt {
    font-weight: 500;
    font-size: 11.5px;
    color: var(--br-text-soft);
}
.br-req { color: var(--br-danger); font-weight: 700; }

/* ---- שדות קלט ---- */
.br-input,
.br-textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font-family: var(--br-font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--br-text);
    background: var(--br-surface-alt);
    border: 1px solid var(--br-border);
    border-radius: 12px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    /* iOS: פונט <16px גורם לזום אוטומטי בפוקוס — מנוטרל ע"י viewport של האפליקציה,
       אבל נשמור על 16px במובייל ליתר ביטחון */
}

@media (max-width: 640px) {
    .br-input, .br-textarea { font-size: 16px; }
}

.br-textarea { resize: vertical; min-height: 96px; }
.br-textarea.br-steps { min-height: 74px; }

.br-input::placeholder,
.br-textarea::placeholder { color: var(--br-text-soft); opacity: .75; }

.br-input:focus,
.br-textarea:focus {
    background: var(--br-surface);
    border-color: var(--br-gold);
    box-shadow: 0 0 0 3px rgba(199, 168, 83, .18);
}

.br-input.br-invalid,
.br-textarea.br-invalid {
    border-color: var(--br-danger);
    box-shadow: 0 0 0 3px rgba(192, 57, 43, .14);
}

.br-counter {
    margin-top: 5px;
    font-size: 11.5px;
    color: var(--br-text-soft);
    text-align: end;
}
.br-counter.br-counter-warn { color: var(--br-danger); }

.br-error {
    margin-top: 5px;
    font-size: 12px;
    color: var(--br-danger);
    font-weight: 600;
}
.br-error[hidden] { display: none; }

/* ---- צ'יפים של קטגוריה ---- */
.br-chips { display: flex; flex-wrap: wrap; gap: 7px; }

.br-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 13px;
    font-family: var(--br-font);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--br-text-soft);
    background: var(--br-surface-alt);
    border: 1px solid var(--br-border);
    border-radius: 999px;
    cursor: pointer;
    transition: all .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.br-chip i { font-size: 12px; opacity: .85; }
.br-chip:hover { border-color: var(--br-gold); color: var(--br-text); }
.br-chip[aria-pressed="true"] {
    background: linear-gradient(135deg, var(--br-gold), var(--br-gold-dark));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 8px rgba(199, 168, 83, .32);
}
.br-chip:focus-visible { outline: 2px solid var(--br-gold); outline-offset: 2px; }

/* ---- בורר חומרה ---- */
.br-severity {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 4px;
    background: var(--br-surface-sunken);
    border-radius: 12px;
}

.br-sev {
    padding: 8px 4px;
    font-family: var(--br-font);
    font-size: 12px;
    font-weight: 700;
    color: var(--br-text-soft);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 9px;
    cursor: pointer;
    transition: all .15s ease;
    text-align: center;
}
.br-sev:hover { color: var(--br-text); }
.br-sev[aria-pressed="true"] {
    background: var(--br-surface);
    color: var(--br-text);
    border-color: var(--br-border-strong);
    box-shadow: 0 1px 4px rgba(26, 22, 14, .10);
}
.br-sev[data-severity="low"][aria-pressed="true"]      { color: #2E7D5B; }
.br-sev[data-severity="medium"][aria-pressed="true"]   { color: #B4831C; }
.br-sev[data-severity="high"][aria-pressed="true"]     { color: #C2651B; }
.br-sev[data-severity="critical"][aria-pressed="true"] { color: var(--br-danger); }
.br-sev:focus-visible { outline: 2px solid var(--br-gold); outline-offset: 1px; }

/* ---- אזור צילומי מסך ---- */
.br-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 18px 14px;
    text-align: center;
    background: var(--br-surface-alt);
    border: 1.5px dashed var(--br-border-strong);
    border-radius: 14px;
    color: var(--br-text-soft);
    cursor: pointer;
    transition: all .18s ease;
}
.br-drop:hover,
.br-drop.br-dragover {
    border-color: var(--br-gold);
    background: rgba(199, 168, 83, .08);
    color: var(--br-text);
}
.br-drop i { font-size: 20px; color: var(--br-gold-dark); }
.br-drop-main { font-size: 13px; font-weight: 700; color: var(--br-text); }
.br-drop-sub { font-size: 11.5px; }
.br-drop:focus-visible { outline: 2px solid var(--br-gold); outline-offset: 2px; }
.br-drop[hidden] { display: none !important; }
.br-drop.br-busy { pointer-events: none; opacity: .7; border-style: solid; }

.br-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 10px;
}
.br-thumbs:empty { display: none; }

.br-thumb {
    position: relative;
    width: 84px; height: 84px;
    border-radius: 11px;
    overflow: hidden;
    border: 1px solid var(--br-border-strong);
    background: var(--br-surface-sunken);
    flex: 0 0 auto;
}
.br-thumb-open {
    display: block;
    width: 100%; height: 100%;
    padding: 0; margin: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    position: relative;
}
.br-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* רמז "סימון" — מופיע ברחיפה בדסקטופ, קבוע ועדין במגע */
.br-thumb-hint {
    position: absolute;
    inset-inline: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 100%;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: rgba(26, 22, 14, .5);
    opacity: 0;
    transition: opacity .16s ease;
}
.br-thumb-open:hover .br-thumb-hint,
.br-thumb-open:focus-visible .br-thumb-hint { opacity: 1; }
@media (hover: none) {
    .br-thumb-hint {
        top: auto; bottom: 16px; height: auto;
        padding: 2px 0;
        background: rgba(26, 22, 14, .55);
        opacity: 1;
    }
}

.br-thumb-remove {
    position: absolute;
    top: 3px;
    inset-inline-end: 3px;
    width: 22px; height: 22px;
    display: grid; place-items: center;
    background: rgba(26, 22, 14, .72);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 10px;
    cursor: pointer;
    transition: background .15s ease;
}
.br-thumb-remove:hover { background: var(--br-danger); }

.br-thumb-size {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 2px 4px;
    font-size: 9.5px;
    color: #fff;
    background: rgba(26, 22, 14, .6);
    text-align: center;
}

/* ---- מקטע נסתר: פרטים טכניים ---- */
.br-details {
    margin: 4px 0 16px;
    border: 1px solid var(--br-border);
    border-radius: 12px;
    background: var(--br-surface-alt);
    overflow: hidden;
}

.br-details > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 13px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--br-text-soft);
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
}
.br-details > summary::-webkit-details-marker { display: none; }
.br-details > summary i.br-chevron { margin-inline-start: auto; transition: transform .2s ease; font-size: 11px; }
.br-details[open] > summary i.br-chevron { transform: rotate(180deg); }
.br-details > summary:hover { color: var(--br-text); }

.br-tech {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px 14px;
    padding: 4px 13px 13px;
    border-top: 1px solid var(--br-border);
}
.br-tech-item { min-width: 0; }
.br-tech-key {
    display: block;
    font-size: 10.5px;
    color: var(--br-text-soft);
    margin-bottom: 1px;
}
.br-tech-val {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--br-text);
    word-break: break-word;
}

/* ---- הערת פרטיות ---- */
.br-privacy {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--br-text-soft);
}
.br-privacy i { margin-top: 2px; color: var(--br-gold-dark); }

/* ---- כותרת תחתונה ---- */
.br-foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
    background: var(--br-surface-alt);
    border-top: 1px solid var(--br-border);
}
.br-foot .br-privacy { flex: 1 1 auto; }

.br-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 20px;
    font-family: var(--br-font);
    font-size: 14px;
    font-weight: 700;
    border-radius: 12px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all .16s ease;
    white-space: nowrap;
}
.br-btn:focus-visible { outline: 2px solid var(--br-gold); outline-offset: 2px; }

.br-btn-ghost {
    background: transparent;
    color: var(--br-text-soft);
    border-color: var(--br-border-strong);
}
.br-btn-ghost:hover { background: var(--br-surface-sunken); color: var(--br-text); }

.br-btn-primary {
    background: linear-gradient(135deg, var(--br-gold), var(--br-gold-dark));
    color: #fff;
    box-shadow: 0 3px 12px rgba(199, 168, 83, .34);
}
.br-btn-primary:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); }
.br-btn-primary:disabled { opacity: .6; cursor: not-allowed; box-shadow: none; transform: none; }

.br-spinner {
    width: 14px; height: 14px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: br-spin .7s linear infinite;
}
.br-spinner[hidden] { display: none; }
/* בזמן שליחה הספינר מחליף את אייקון המטוס, לא מצטרף אליו */
#br-submit .br-spinner:not([hidden]) ~ i { display: none; }
@keyframes br-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   3. מסך ההצלחה
   ========================================================================== */

.br-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 40px 26px 34px;
}
.br-success[hidden] { display: none !important; }

.br-success-mark {
    width: 62px; height: 62px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(31, 122, 70, .12);
    color: var(--br-success);
    font-size: 27px;
}

.br-success h3 { margin: 4px 0 0; font-size: 19px; font-weight: 800; color: var(--br-text); }
.br-success p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--br-text-soft); max-width: 380px; }

.br-ticket {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 4px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 800;
    color: var(--br-gold-dark);
    background: rgba(199, 168, 83, .13);
    border: 1px dashed var(--br-gold);
    border-radius: 999px;
    direction: ltr;
}

/* ==========================================================================
   4. עורך הסימון על צילום המסך
   ========================================================================== */

.br-editor {
    position: fixed;
    inset: 0;
    /* מעל .br-overlay (2147483000) — נפתח מתוך הפופ-אפ ומכסה אותו */
    z-index: 2147483100;
    display: flex;
    flex-direction: column;
    background: #14110B;
    color: #F5F1E6;
    font-family: var(--br-font);
}
.br-editor[hidden] { display: none !important; }

.br-editor-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 14px calc(10px);
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    background: rgba(255, 255, 255, .06);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.br-editor-group { display: inline-flex; gap: 5px; }

.br-tool {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 13px;
    font-family: var(--br-font);
    font-size: 12.5px;
    font-weight: 700;
    color: rgba(245, 241, 230, .72);
    background: rgba(255, 255, 255, .07);
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: all .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.br-tool i { font-size: 13px; }
.br-tool:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.br-tool[aria-pressed="true"] {
    background: var(--br-gold);
    border-color: var(--br-gold);
    color: #14110B;
}
.br-tool:disabled { opacity: .35; cursor: not-allowed; }
.br-tool:focus-visible { outline: 2px solid var(--br-gold); outline-offset: 2px; }
.br-tool-icon { padding: 8px 11px; }
.br-tool-icon i { font-size: 14px; }

.br-editor-colors {
    display: inline-flex;
    gap: 6px;
    margin-inline-start: auto;
}
.br-swatch {
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .25);
    cursor: pointer;
    padding: 0;
    transition: transform .13s ease, border-color .13s ease;
}
.br-swatch:hover { transform: scale(1.12); }
.br-swatch[aria-pressed="true"] {
    border-color: #fff;
    transform: scale(1.16);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .5);
}
.br-swatch:focus-visible { outline: 2px solid var(--br-gold); outline-offset: 2px; }

.br-editor-stage {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    overflow: hidden;
}
#br-editor-canvas {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .55);
    background: #fff;
    cursor: crosshair;
    touch-action: none;   /* חובה — אחרת המגע גולל במקום לצייר */
}

.br-editor-foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .05);
    border-top: 1px solid rgba(255, 255, 255, .1);
}
.br-editor-hint {
    flex: 1 1 auto;
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 11.5px;
    line-height: 1.45;
    color: rgba(245, 241, 230, .62);
}
.br-editor-hint i { margin-top: 2px; color: var(--br-gold); }
.br-editor-foot .br-btn-ghost { color: rgba(245, 241, 230, .8); border-color: rgba(255, 255, 255, .22); }
.br-editor-foot .br-btn-ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; }

@media (max-width: 640px) {
    .br-editor-bar { gap: 7px; padding-inline: 10px; }
    .br-tool span { display: none; }
    .br-tool { padding: 9px 11px; }
    .br-editor-colors { margin-inline-start: auto; }
    .br-editor-foot { flex-wrap: wrap; }
    .br-editor-hint { order: 3; flex: 1 0 100%; }
    .br-editor-foot .br-btn { flex: 1 1 0; }
}

/* ==========================================================================
   5. התאמות מובייל — גיליון תחתון במקום מודאל מרכזי
   ========================================================================== */

@media (max-width: 640px) {
    .br-fab { --br-fab-gap: 14px; }
    .br-overlay { padding: 0; align-items: flex-end; }
    .br-modal {
        width: 100%;
        max-height: 92vh;
        border-radius: 22px 22px 0 0;
        transform: translateY(100%);
    }
    .br-overlay.br-visible .br-modal { transform: none; }
    .br-head { padding: 15px 16px; }
    .br-body { padding: 16px 16px 4px; }
    .br-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); flex-wrap: wrap; }
    .br-foot .br-privacy { order: 3; flex: 1 0 100%; }
    .br-foot .br-btn { flex: 1 1 0; }
    .br-severity { grid-template-columns: repeat(2, 1fr); }
}

/* ידית גרירה ויזואלית לגיליון התחתון */
@media (max-width: 640px) {
    .br-modal::before {
        content: '';
        position: absolute;
        top: 7px;
        left: 50%;
        transform: translateX(-50%);
        width: 38px; height: 4px;
        border-radius: 2px;
        background: var(--br-border-strong);
        z-index: 1;
    }
    .br-head { padding-top: 18px; }
}