/* bug_report_widget.css — Styling for the Report-a-Bug pill and its modal. This lives in a real stylesheet, not inside bug_report_widget.js, because the pill markup ships in the server-rendered HTML (the sidebar partials) while the widget script is deferred. Styling it from JS meant the browser painted a bare UA button — white, square, unlabelled — for a beat on every navigation before the script ran. The injector middleware links this file from so the pill is correct on first paint. */ #brw-btn { position: fixed; left: 18px; bottom: 18px; z-index: 2147483000; background: rgba(30,41,59,.92); color: #f1f5f9; border: 1px solid rgba(148,163,184,.55); border-radius: 999px; padding: 10px 16px; font: 600 13px system-ui, -apple-system, sans-serif; letter-spacing: .03em; box-shadow: 0 6px 18px rgba(0,0,0,.35); cursor: pointer; display: flex; align-items: center; gap: 8px; opacity: .96; transition: opacity .15s, transform .15s, background .15s, border-color .15s; } #brw-btn:hover { opacity: 1; transform: translateY(-1px); background: rgba(99,102,241,.22); border-color: #818cf8; } #brw-btn svg { width: 14px; height: 14px; } #brw-overlay { position: fixed; inset: 0; background: rgba(8,12,24,.72); z-index: 2147483001; display: none; align-items: center; justify-content: center; font-family: system-ui, -apple-system, sans-serif; } #brw-overlay.open { display: flex; } #brw-modal { background: #1e293b; border: 1px solid rgba(100,140,200,.25); border-radius: 12px; width: min(480px, 92vw); padding: 24px; color: #e2e8f0; box-shadow: 0 20px 60px rgba(0,0,0,.5); /* Bound the height as well as the width, and scroll what doesn't fit. The textarea alone reserves 130px before the screenshot thumbnail is added, so on a short screen -- or at a11y zoom, which is what divides here -- an unbounded panel pushes Send and Cancel off the bottom with no way back. */ max-height: calc(calc(100vh / var(--a11y-zoom, 1)) - 32px); max-height: calc(calc(100dvh / var(--a11y-zoom, 1)) - 32px); overflow-y: auto; } #brw-modal h3 { margin: 0 0 6px; font-size: 18px; color: #e2e8f0; } #brw-modal p.brw-sub { margin: 0 0 16px; color: #94a3b8; font-size: 13px; } #brw-modal textarea { width: 100%; min-height: 130px; background: #1f2933; border: 1px solid rgba(100,140,200,.25); border-radius: 8px; color: #e2e8f0; padding: 10px 12px; font: 14px system-ui, -apple-system, sans-serif; resize: vertical; box-sizing: border-box; } #brw-modal textarea:focus { outline: none; border-color: #6366f1; } #brw-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; } #brw-modal button { border: none; border-radius: 8px; padding: 9px 16px; font: 600 13px system-ui, -apple-system, sans-serif; cursor: pointer; } #brw-cancel { background: transparent; color: #cbd5e1; } #brw-cancel:hover { background: rgba(148,163,184,.1); } #brw-submit { background: linear-gradient(135deg, #6366f1, #4f46e5); color: #fff; } #brw-submit[disabled] { opacity: .6; cursor: not-allowed; } #brw-status { margin-top: 10px; font-size: 13px; min-height: 18px; } #brw-status.ok { color: #4ade80; } #brw-status.err { color: #f87171; } /* Screenshot attach control: a subdued outline button that captures the current page (with this dialog excluded), plus a thumbnail preview of the result the user can retake or remove before sending. */ #brw-shot-row { margin-top: 12px; } #brw-shot-btn { display: inline-flex; align-items: center; gap: 7px; background: transparent; color: #cbd5e1; border: 1px solid rgba(148,163,184,.4); border-radius: 8px; padding: 8px 12px; font: 600 13px system-ui, -apple-system, sans-serif; cursor: pointer; transition: background .15s, border-color .15s; } #brw-shot-btn:hover { background: rgba(99,102,241,.16); border-color: #818cf8; color: #fff; } #brw-shot-btn[disabled] { opacity: .6; cursor: not-allowed; } /* :not([hidden]) so the UA [hidden]{display:none} still wins when hidden — a bare #id{display:flex} outranks it and would keep the box visible. */ #brw-shot-preview:not([hidden]) { display: flex; align-items: center; gap: 12px; margin-top: 10px; } #brw-shot-thumb { width: 120px; height: auto; max-height: 90px; object-fit: cover; object-position: top left; border: 1px solid rgba(148,163,184,.35); border-radius: 6px; background: #0f172a; } #brw-shot-meta { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #94a3b8; } #brw-shot-remove { align-self: flex-start; background: transparent; color: #f87171; border: none; padding: 0; font: 600 12px system-ui, -apple-system, sans-serif; cursor: pointer; text-decoration: underline; } /* Sidebar Report-a-Bug button: same subdued dark-navy pill as the floating #brw-btn so the control looks identical whether it lands in a sidebar footer or floats on a chromeless page. Pill shape, full-width to sit flush with the orange ShrimpToast and Log out pills in the footer. */ .sidebar-report-bug-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; background: rgba(30,41,59,.85); color: #f1f5f9; border: 1px solid rgba(148,163,184,.55); border-radius: 999px; padding: 10px 16px; margin-bottom: 18px; font: 600 13px system-ui, -apple-system, sans-serif; letter-spacing: .03em; box-shadow: 0 1px 2px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04); cursor: pointer; text-align: center; transition: background .15s, border-color .15s, box-shadow .15s; } .sidebar-report-bug-btn:hover { background: rgba(99,102,241,.22); border-color: #818cf8; color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 0 0 1px rgba(129,140,248,.35); } /* Book-nav Report-a-Bug button: sits in the bottom-left nav bar of the full-bleed Kitchen/Pantry book skins, paired just left of the "Back" (.menu-back) pill. Same subdued navy as the other variants, but sized to match .menu-back's pill metrics so the two read as a deliberate pair rather than two mismatched controls. */ .brw-nav-pair { display: inline-flex; align-items: center; gap: 10px; grid-column: 1; justify-self: start; } .brw-nav-btn { display: inline-flex; align-items: center; gap: 8px; padding: .45rem .95rem; border-radius: 999px; border: 1px solid rgba(148,163,184,.55); background: rgba(30,41,59,.92); color: #f1f5f9; font: 600 13px system-ui, -apple-system, sans-serif; letter-spacing: .03em; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.4); cursor: pointer; transition: background .15s, border-color .15s, transform .1s; } .brw-nav-btn:hover { background: rgba(99,102,241,.22); border-color: #818cf8; color: #fff; transform: translateY(-1px); } @media print { #brw-btn, #brw-overlay, .sidebar-report-bug-btn, .brw-nav-pair { display: none !important; } }