/* Report a problem (public/staff/bug-report.js): the staff app and the
   staff page. Self-contained so it looks the same in both. */
.t3bug { border: none; border-radius: 16px; padding: 0; width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 32px); color: #151515; background: #fff; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); font: inherit; }
.t3bug::backdrop { background: rgba(21, 21, 21, 0.45); }
.t3bug-in { display: flex; flex-direction: column; max-height: calc(100vh - 32px); }
.t3bug-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 8px; }
.t3bug-head h2 { margin: 0; font-size: 1.25rem; }
.t3bug-x { border: none; background: none; font-size: 1.6rem; line-height: 1; width: 44px; height: 44px; cursor: pointer; color: inherit; }
.t3bug-tabs { display: flex; gap: 4px; padding: 0 18px; border-bottom: 1px solid #e6e1d6; }
.t3bug-tab { border: none; background: none; min-height: 44px; padding: 0 12px; border-bottom: 3px solid transparent; margin-bottom: -1px; font: inherit; color: #6b665c; cursor: pointer; }
.t3bug-tab.on { color: #151515; font-weight: 700; border-bottom-color: #f5c518; }
.t3bug-body { padding: 14px 18px 18px; overflow-y: auto; }
.t3bug-form { display: flex; flex-direction: column; gap: 12px; }
.t3bug-kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.t3bug-kind { font: inherit; font-weight: 700; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid #cfcabd; background: #fff; color: inherit; cursor: pointer; }
.t3bug-kind.on { background: #151515; border-color: #151515; color: #fff; }
.t3bug-field { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.t3bug-field input, .t3bug-field textarea { font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid #d9d4c7; border-radius: 10px; width: 100%; box-sizing: border-box; }
.t3bug-field input:focus, .t3bug-field textarea:focus { outline: 3px solid #f5c518; outline-offset: 1px; }
.t3bug-pics { border: 1px solid #e6e1d6; border-radius: 12px; padding: 10px 12px; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.t3bug-pics legend { font-weight: 600; padding: 0 4px; }
.t3bug-check { display: flex; align-items: center; gap: 8px; }
.t3bug-thumb { max-width: 100%; max-height: 180px; object-fit: contain; object-position: left top; border: 1px solid #e6e1d6; border-radius: 8px; align-self: flex-start; }
.t3bug-ups { display: flex; flex-wrap: wrap; gap: 8px; }
.t3bug-ups:empty { display: none; }
.t3bug-up { position: relative; }
.t3bug-up img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; border: 1px solid #e6e1d6; display: block; }
.t3bug-rm { position: absolute; top: -8px; right: -8px; width: 28px; height: 28px; border-radius: 50%; border: none; background: #151515; color: #fff; cursor: pointer; font-size: 1rem; line-height: 1; }
.t3bug-attach { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-weight: 700; min-height: 40px; padding: 0 14px; border: 1px solid #cfcabd; border-radius: 10px; cursor: pointer; }
.t3bug-attach input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.t3bug-attach:focus-within { outline: 3px solid #f5c518; outline-offset: 1px; }
.t3bug-note { margin: 0; color: #6b665c; font-size: 0.9rem; }
.t3bug-err { margin: 0; color: #b3261e; font-weight: 600; }
.t3bug-err:empty { display: none; }
.t3bug-foot { display: flex; justify-content: flex-end; gap: 10px; }
.t3bug-foot button { font: inherit; font-weight: 700; min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid #cfcabd; background: #fff; color: inherit; cursor: pointer; }
.t3bug-foot .t3bug-send { background: #f5c518; border-color: #f5c518; color: #151515; }
.t3bug-foot button:disabled { opacity: 0.6; cursor: default; }
.t3bug-done { display: flex; flex-direction: column; gap: 10px; }
.t3bug-done p { margin: 0; }
.t3bug-mine { list-style: none; margin: 0; padding: 0; }
.t3bug-mine li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #ece8de; }
.t3bug-mine li > div { display: flex; flex-direction: column; min-width: 0; }
.t3bug-st { flex: none; font-size: 0.82rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #ece8de; color: #4a463e; }
.t3bug-st.bg-new { background: #eef2fb; color: #1f4fa3; }
.t3bug-st.bg-triaged, .t3bug-st.bg-progress { background: #fff3cf; color: #7a5700; }
.t3bug-st.bg-fixed { background: #e8f4ec; color: #17633a; }
@media (max-width: 520px) { .t3bug { width: 100vw; max-width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; margin: 0; } .t3bug-in { max-height: 100vh; height: 100%; } }