/* Player bug/issue report — floating button + modal. Self-contained, RTL, theme-agnostic. */

.bug-fab {
    position: fixed;
    bottom: 16px;
    inset-inline-start: 16px; /* left in RTL */
    z-index: 2147483000;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(79, 70, 229, .45);
    opacity: .82;
    transition: opacity .15s, transform .15s, box-shadow .15s;
}
.bug-fab:hover { opacity: 1; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(79, 70, 229, .55); }
.bug-fab__icon { font-size: 18px; line-height: 1; }
@media (max-width: 560px) {
    .bug-fab__label { display: none; }
    .bug-fab { padding: 12px; }
    .bug-fab__icon { font-size: 20px; }
}

.bug-modal[hidden] { display: none; }
.bug-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    direction: rtl;
    font-family: 'Heebo', Arial, sans-serif;
}
.bug-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 10, 30, .62);
    backdrop-filter: blur(4px);
}
.bug-modal__card {
    position: relative;
    width: 100%;
    max-width: 460px;
    max-height: 90vh;
    overflow-y: auto;
    background: #ffffff;
    color: #111827;
    border-radius: 20px;
    padding: 22px 22px 18px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
    animation: bugPop .22s ease both;
}
@keyframes bugPop { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

.bug-modal__x {
    position: absolute;
    top: 12px;
    inset-inline-end: 14px;
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
}
.bug-modal__title { margin: 0 0 4px; font-size: 1.3rem; font-weight: 900; color: #1e1b4b; }
.bug-modal__sub { margin: 0 0 16px; font-size: .9rem; color: #4b5563; line-height: 1.5; }

.bug-field { display: block; margin-bottom: 14px; }
.bug-field > span { display: block; font-size: .85rem; font-weight: 800; color: #374151; margin-bottom: 5px; }
.bug-field select,
.bug-field textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1.5px solid #d1d5db;
    border-radius: 12px;
    padding: 11px 13px;
    font-family: inherit;
    font-size: .95rem;
    color: #111827;
    background: #fff;
    resize: vertical;
}
.bug-field select:focus,
.bug-field textarea:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, .18); }

.bug-rec { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.bug-rec__btn {
    border: 1.5px solid #6366f1;
    background: #eef2ff;
    color: #4338ca;
    border-radius: 10px;
    padding: 9px 14px;
    font-family: inherit;
    font-weight: 800;
    font-size: .9rem;
    cursor: pointer;
}
.bug-rec__btn.is-recording { background: #fee2e2; border-color: #ef4444; color: #b91c1c; }
.bug-rec__status { font-size: .82rem; color: #6b7280; }
.bug-rec audio { width: 100%; margin-top: 4px; }
.bug-rec__clear { background: none; border: none; color: #b91c1c; font-weight: 700; font-size: .82rem; cursor: pointer; }

.bug-check { display: flex; align-items: flex-start; gap: 8px; font-size: .85rem; color: #374151; margin-bottom: 18px; cursor: pointer; }
.bug-check input { margin-top: 2px; width: 16px; height: 16px; accent-color: #6366f1; flex-shrink: 0; }

.bug-actions { display: flex; gap: 10px; justify-content: flex-start; }
.bug-btn {
    border: none;
    border-radius: 12px;
    padding: 12px 22px;
    font-family: inherit;
    font-weight: 800;
    font-size: .95rem;
    cursor: pointer;
}
.bug-btn--primary { background: linear-gradient(135deg, #6366f1, #4f46e5); color: #fff; box-shadow: 0 5px 16px rgba(79, 70, 229, .4); }
.bug-btn--primary:disabled { opacity: .6; cursor: default; }
.bug-btn--ghost { background: #f3f4f6; color: #374151; }

.bug-msg { margin-top: 14px; padding: 10px 14px; border-radius: 10px; font-weight: 700; font-size: .9rem; }
.bug-msg[hidden] { display: none; }
.bug-msg--ok { background: #dcfce7; color: #15803d; }
.bug-msg--err { background: #fee2e2; color: #b91c1c; }