/* ============================================================
   bugreport.css — the "Report a Bug" overlay (BugReport.js)
   ============================================================ */

#bugreport { position: fixed; inset: 0; pointer-events: none; z-index: 62; }
.br-modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.26s ease; pointer-events: auto; }
.br-modal.is-open { opacity: 1; }
.br-scrim { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 30%, rgba(18,12,38,0.72), rgba(4,3,9,0.9)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

.br-panel {
  position: relative; width: min(540px, 94vw); max-height: 88vh; display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(24,18,44,0.98), rgba(12,9,24,0.99));
  border: 1px solid rgba(255,84,112,0.3); border-radius: 16px;
  box-shadow: 0 30px 90px rgba(0,0,0,0.6), 0 0 50px rgba(255,84,112,0.12), inset 0 1px 0 rgba(255,255,255,0.05);
  transform: translateY(16px) scale(0.98); transition: transform 0.28s cubic-bezier(0.2,0.8,0.2,1); outline: none; overflow: hidden;
}
.br-modal.is-open .br-panel { transform: translateY(0) scale(1); }

.br-head { display: flex; align-items: center; padding: 16px 20px 12px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.br-sub { font-family: var(--font-body, serif); font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: #ff8aa0; opacity: 0.85; }
.br-title { margin: 2px 0 0; font-family: var(--font-display, serif); font-size: 1.5rem; font-weight: 700; letter-spacing: 0.04em; color: var(--ink, #e8e2ff); }
.br-close { margin-left: auto; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; pointer-events: auto; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.04); color: var(--ink, #e8e2ff); font-size: 0.95rem; }
.br-close:hover { background: rgba(255,84,112,0.16); border-color: rgba(255,84,112,0.5); }

.br-body { padding: 16px 20px; overflow-y: auto; }
.br-intro { font-family: var(--font-body, serif); font-size: 0.82rem; line-height: 1.4; color: var(--ink-dim, #9a8fc0); margin: 0 0 12px; }
.br-text {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 110px;
  font-family: var(--font-body, serif); font-size: 0.9rem; line-height: 1.4; color: var(--ink, #e8e2ff);
  padding: 11px 13px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.16);
  background: rgba(8,5,16,0.7); pointer-events: auto; outline: none;
}
.br-text:focus { border-color: rgba(255,84,112,0.5); box-shadow: 0 0 14px rgba(255,84,112,0.18); }
.br-text::placeholder { color: #6a6088; }
.br-attach { margin-top: 9px; font-family: var(--font-body, serif); font-size: 0.68rem; letter-spacing: 0.02em; color: #8a7bd0; }
.br-status { margin-top: 9px; min-height: 1.1em; font-family: var(--font-body, serif); font-size: 0.78rem; color: var(--ink-dim, #9a8fc0); }
.br-status.is-ok { color: #8af0b0; }
.br-status.is-warn { color: #ffcf6a; }

.br-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 20px 16px; border-top: 1px solid rgba(255,255,255,0.06); }
.br-btn { font-family: var(--font-display, serif); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.05em; padding: 9px 18px; border-radius: 9px; cursor: pointer; pointer-events: auto; transition: background 0.15s, box-shadow 0.15s, transform 0.1s, opacity 0.15s; }
.br-btn--ghost { color: var(--ink-dim, #9a8fc0); border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.04); }
.br-btn--ghost:hover { color: var(--ink, #e8e2ff); background: rgba(255,255,255,0.08); }
.br-btn--send { color: #1a0a10; border: 1px solid rgba(255,120,140,0.6); background: linear-gradient(180deg, #ff8aa0, #ff5470); box-shadow: 0 0 16px rgba(255,84,112,0.3); }
.br-btn--send:hover:not(:disabled) { box-shadow: 0 0 22px rgba(255,84,112,0.5); transform: translateY(-1px); }
.br-btn--send:disabled { opacity: 0.55; cursor: default; }