/* Beta report button and dialog.
   Self-contained: injected on every page, so it cannot rely on any page's own CSS. */

/* Stacked ABOVE the support chat bubble, not on top of it.
   #ticket-widget .chat-toggle-btn is a 60px circle at right:20px / bottom:20px on every page that
   loads the support widget, and this button sat squarely on it. 20 (its offset) + 60 (its height)
   + 12 (breathing room) = 92. The chat window itself opens at bottom:90px, so it covers this
   button while open — which is correct: one floating thing at a time. */
#beta-report-btn {
    position: fixed;
    right: 20px;
    bottom: 92px;
    z-index: 9998;
    padding: 10px 16px;
    border: 1px solid rgba(56, 177, 237, .45);
    border-radius: 999px;
    background: #0B1E3D;
    color: #8fd6f8;
    font: 600 0.82rem/1 'Poppins', Arial, sans-serif;
    letter-spacing: .3px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
    transition: background .16s ease, transform .16s ease;
}
#beta-report-btn:hover { background: #12294f; transform: translateY(-1px); }
#beta-report-btn:focus-visible { outline: 2px solid #38b1ed; outline-offset: 2px; }

#beta-report-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(4, 10, 22, .72);
}
#beta-report-overlay.open { display: flex; }

.beta-report-panel {
    width: 100%;
    max-width: 520px;
    max-height: 88vh;
    overflow-y: auto;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 16px;
    background: hsl(217 38% 17%);
    color: #fff;
    font-family: 'Poppins', Arial, sans-serif;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
}
.beta-report-panel h2 { margin: 0 0 6px; font-size: 1.1rem; color: #8fd6f8; }
.beta-report-note { margin: 0 0 16px; font-size: .82rem; line-height: 1.5; color: #9ca3af; }

.beta-report-label {
    display: block;
    margin: 12px 0 5px;
    font-size: .78rem;
    font-weight: 500;
    color: #8badc9;
}
.beta-report-input {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 9px;
    background: hsl(217 40% 13%);
    color: #fff;
    font: 400 .88rem/1.45 'Poppins', Arial, sans-serif;
    resize: vertical;
}
.beta-report-input:focus-visible { outline: 2px solid #38b1ed; outline-offset: 1px; }

.beta-report-progress {
    height: 5px;
    margin-top: 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    overflow: hidden;
}
.beta-report-progress > div {
    height: 100%;
    width: 0;
    background: #38b1ed;
    transition: width .2s ease;
}

.beta-report-status { margin: 10px 0 0; font-size: .82rem; color: #9ca3af; min-height: 1.2em; }
.beta-report-status.is-error { color: #fca5a5; }

.beta-report-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.beta-report-btn-primary, .beta-report-btn-secondary {
    padding: 9px 18px;
    border-radius: 9px;
    font: 600 .85rem 'Poppins', Arial, sans-serif;
    cursor: pointer;
    border: 1px solid transparent;
}
.beta-report-btn-primary { background: #38b1ed; color: #06203a; }
.beta-report-btn-primary:hover { background: #4cc0f7; }
.beta-report-btn-primary:disabled { opacity: .55; cursor: default; }
.beta-report-btn-secondary { background: transparent; color: #cbd5e1; border-color: rgba(255, 255, 255, .18); }
.beta-report-btn-secondary:hover { background: rgba(255, 255, 255, .06); }

@media (max-width: 640px) {
    /* Same stacking on a phone, where the chat bubble keeps its 20px offset. */
    #beta-report-btn { right: 14px; bottom: 88px; padding: 11px 15px; font-size: .78rem; }
    .beta-report-panel { padding: 18px; max-height: 92vh; }
    .beta-report-actions button { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
    #beta-report-btn, .beta-report-progress > div { transition: none; }
}