/* ============================================================
   ChatBase — 🐞 Bug report form (bugreport.js)
   ============================================================ */
.br-form {
    display: grid; gap: 12px;
    max-width: 980px; margin: 0 0 18px;
    padding: 16px;
    border-radius: 20px;
    border: 1px solid var(--neo-line, rgba(255,255,255,.08));
    background: var(--neo-surface, rgba(22,22,28,.55));
    -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);
}
.br-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.br-field { display: grid; gap: 6px; }
.br-field > span { font-size: 13px; font-weight: 600; color: var(--neo-text, #f5f5f7); }
.br-field em { font-style: normal; font-weight: 400; color: var(--neo-faint, rgba(235,235,245,.4)); }
.br-input {
    width: 100%; box-sizing: border-box;
    padding: 10px 12px; border-radius: 12px;
    border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16));
    background: rgba(255,255,255,.06); color: #fff;
    font: inherit; font-size: 14px; outline: none;
}
textarea.br-input { resize: vertical; min-height: 48px; }
select.br-input option { background: #16161c; color: #fff; }
.br-input:focus { border-color: var(--neo-accent, #8ab4ff); }
.br-sev { display: flex; gap: 6px; flex-wrap: wrap; }
.br-sev button {
    flex: 1 1 auto;
    padding: 9px 12px; border-radius: 999px;
    border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16));
    background: transparent; color: var(--neo-dim, rgba(235,235,245,.7));
    font: inherit; font-size: 13px; cursor: pointer;
}
.br-sev button.on { color: #fff; border-color: var(--neo-accent, #8ab4ff); background: rgba(138,180,255,.16); }
.br-sev button[data-sev="broken"].on { border-color: #ff6b6b; background: rgba(255,107,107,.16); }
.br-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.br-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--neo-dim, rgba(235,235,245,.6)); cursor: pointer; }
.br-check small { color: var(--neo-faint, rgba(235,235,245,.35)); }
.br-foot .send-btn { padding: 10px 18px !important; }
.br-foot .send-btn:disabled { opacity: .5; cursor: wait; }
.br-list-title { margin: 0 0 8px; font-size: 15px; color: var(--neo-dim, rgba(235,235,245,.6)); }

/* Report cards inside the message list */
.br-card {
    display: grid; gap: 6px;
    margin-top: 4px; padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16));
    border-left: 4px solid #8ab4ff;
    background: rgba(255,255,255,.04);
    max-width: 640px;
}
.br-msg .br-card { background: rgba(0,0,0,.28); }
.br-card.br-annoying { border-left-color: #f5b041; }
.br-card.br-broken { border-left-color: #ff6b6b; }
.br-c-head { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; font-weight: 600; }
.br-c-area { color: var(--neo-dim, rgba(235,235,245,.6)); font-weight: 500; }
.br-c-row { display: grid; grid-template-columns: 92px 1fr; gap: 8px; font-size: 14px; line-height: 1.4; }
.br-c-row b { font-weight: 600; color: var(--neo-dim, rgba(235,235,245,.6)); font-size: 12.5px; padding-top: 1px; }
.br-c-row span { white-space: pre-wrap; overflow-wrap: anywhere; }
.br-c-dev { font-size: 12px; color: var(--neo-faint, rgba(235,235,245,.4)); }
/* Editing would change the summary text but not the card, so reports can only be unsent */
.br-msg .msg-edit-btn { display: none !important; }

@media (max-width: 700px) {
    .br-row { grid-template-columns: 1fr; }
    .br-c-row { grid-template-columns: 1fr; gap: 2px; }
}
.br-c-st { margin-left: auto; font-weight: 600; }
.br-st-fixed { color: #5ef0c0; }
.br-st-doing { color: #ffc46b; }
.br-st-nope { color: var(--neo-dim, rgba(235,235,245,.6)); }
.br-c-note { font-size: 13px; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.06); }

/* ---------- Admin → 🐞 Bugs (adminbugs.js) ---------- */
.ab-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 12px; }
.ab-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-right: auto; }
.ab-pills button {
    padding: 6px 12px; border-radius: 999px;
    border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16));
    background: transparent; color: var(--neo-dim, rgba(235,235,245,.7));
    font: inherit; font-size: 12.5px; cursor: pointer;
}
.ab-pills button.on { color: #fff; border-color: var(--neo-accent, #8ab4ff); background: rgba(138,180,255,.16); }
.ab-list { display: grid; gap: 10px; }
.ab-empty { padding: 18px 0; text-align: center; }
.ab-item {
    display: grid; gap: 6px; padding: 12px 14px;
    border-radius: 14px; border: 1px solid var(--neo-line, rgba(255,255,255,.08));
    border-left: 4px solid #8ab4ff; background: rgba(255,255,255,.035);
}
.ab-item.ab-annoying { border-left-color: #f5b041; }
.ab-item.ab-broken { border-left-color: #ff6b6b; }
.ab-item.ab-st-fixed, .ab-item.ab-st-nope { opacity: .65; }
.ab-item header { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; }
.ab-sev { font-weight: 700; }
.ab-area { color: var(--neo-dim, rgba(235,235,245,.6)); }
.ab-st { padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.07); font-size: 12px; }
.ab-when { margin-left: auto; font-size: 12px; color: var(--neo-faint, rgba(235,235,245,.4)); }
.ab-line { display: grid; grid-template-columns: 92px 1fr; gap: 8px; font-size: 14px; line-height: 1.4; }
.ab-line b { font-size: 12.5px; font-weight: 600; color: var(--neo-dim, rgba(235,235,245,.6)); padding-top: 1px; }
.ab-line span { white-space: pre-wrap; overflow-wrap: anywhere; }
.ab-note { font-size: 13px; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.06); }
.ab-item footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.ab-who { background: none; border: 0; padding: 0; color: var(--neo-accent, #8ab4ff); font: inherit; font-size: 13px; cursor: pointer; }
.ab-dev { font-size: 12px; color: var(--neo-faint, rgba(235,235,245,.4)); }
.ab-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.ab-acts .ad-btn { padding: 5px 10px; font-size: 12.5px; }
@media (max-width: 700px) { .ab-line { grid-template-columns: 1fr; gap: 2px; } .ab-acts { margin-left: 0; } }

/* ✅ Recently fixed (changelog) */
.br-log { max-width: 980px; margin: 0 0 18px; display: grid; gap: 6px; }
.br-log-item {
    display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: baseline;
    padding: 8px 12px; border-radius: 12px; background: rgba(52,232,176,.06); border: 1px solid rgba(52,232,176,.18); font-size: 13.5px;
}
.br-log-item span { color: var(--neo-dim, rgba(235,235,245,.6)); }
.br-log-item small { color: var(--neo-faint, rgba(235,235,245,.4)); }
@media (max-width: 700px) { .br-log-item { grid-template-columns: 1fr; gap: 2px; } }