/* =========================================================
   Delegee Shield — Bug widget
   Floating red trigger + compact report dialog.
   Depends on: tokens.css.
   ========================================================= */

/* ===== Toggle button (fixed, bottom-right) ===== */
.bug-widget-toggle {
  position: fixed;
  bottom: var(--sp-5);
  right: var(--sp-5);
  z-index: 9000;
  width: 52px;
  height: 52px;
  border-radius: var(--r-pill);
  border: 0;
  background: var(--danger);
  color: var(--white);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 16px rgba(var(--danger-rgb), 0.35),
              0 2px 4px rgba(var(--black-rgb), 0.08);
  transition: background var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
/* Hide the FAB while any canonical modal is open. The toggle is fixed at a
   high z-index (above the modal shell), so at 360×740 it overlaps a
   fullscreen modal's bottom-right CTAs (F2 / F9 / F3 evidence: rt-core-p6
   shot 05). A modal is a focus-trapped surface — the bug FAB has no job over
   it — so the least-invasive layer fix is to drop it while a `.modal` is open
   (matches every `modal` macro + hand-rolled `.modal`; closed modals carry
   `[hidden]`). Holds for F2, F9, and the existing F3 modal. */
body:has(.modal:not([hidden])) .bug-widget-toggle { display: none; }
.bug-widget-toggle:hover {
  background: #C84A4A;
  box-shadow: 0 8px 22px rgba(var(--danger-rgb), 0.45),
              0 2px 6px rgba(var(--black-rgb), 0.10);
  transform: translateY(-1px);
}
.bug-widget-toggle:active {
  background: #A23535;
  transform: translateY(0);
}
.bug-widget-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--surface),
              0 0 0 5px var(--danger),
              0 6px 16px rgba(var(--danger-rgb), 0.35);
}
.bug-widget-toggle svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* ===== Tooltip ("Report a bug" on hover) ===== */
.bug-widget-toggle::after {
  content: attr(data-tooltip);
  position: absolute;
  right: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(50%) translateY(4px);
  padding: 6px 10px;
  background: rgba(20, 24, 33, 0.92);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
  white-space: nowrap;
  border-radius: var(--r-md);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.bug-widget-toggle:hover::after,
.bug-widget-toggle:focus-visible::after {
  opacity: 1;
  transform: translateX(50%) translateY(0);
}

/* ===== Dialog ===== */
/* Anchored above the toggle button — non-modal, so the rest of the page
   remains interactive while the user is describing what's wrong. */
.bug-widget-dialog {
  /* Distance from the viewport bottom to the dialog bottom: just above
     the toggle (toggle bottom = sp-5, height 52px, gap 12px). Tracked in
     a custom prop so the height cap below stays in sync. */
  --bw-bottom: calc(var(--sp-5) + 52px + 12px);
  /* Breathing room kept clear at the top so the dialog never butts
     against the viewport edge when content is tall. */
  --bw-top-gap: var(--sp-5);

  /* Override the user-agent <dialog> centering. */
  position: fixed;
  inset: auto;
  margin: 0;
  bottom: var(--bw-bottom);
  right: var(--sp-5);
  width: min(380px, calc(100vw - var(--sp-5) * 2));

  /* Bound the bottom-anchored dialog to the visible viewport. Without
     this, a tall attachment list grows the panel upward past the top of
     the screen and the description textarea becomes unreachable
     (bug 7d2df8dc). The inner form scrolls instead. dvh tracks the
     mobile URL-bar so the cap holds on small screens too. */
  max-height: calc(100dvh - var(--bw-bottom) - var(--bw-top-gap));
  overflow: hidden; /* clip the rounded corners; the form owns the scroll */

  padding: 0;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(var(--navy-900-rgb), 0.18),
              0 4px 12px rgba(var(--navy-900-rgb), 0.08);
  background: var(--surface);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  z-index: 9001; /* one above the toggle */
}
.bug-widget-dialog[open] {
  /* Flex column only while open — set here (not on the base rule) so it
     does not override the UA `dialog:not([open]) { display: none }` and
     reveal the closed dialog. Lets the form flex-fill + scroll. */
  display: flex;
  flex-direction: column;
  animation: bug-widget-pop var(--dur-med) var(--ease);
}
@keyframes bug-widget-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Small viewports (mobile): take a more comfortable width and sit a bit
   higher so it doesn't crash into the toggle. */
@media (max-width: 480px) {
  .bug-widget-dialog {
    /* Redefining the offset prop keeps both `bottom` and `max-height`
       (which both read --bw-bottom) consistent on small screens. */
    --bw-bottom: calc(var(--sp-4) + 52px + 12px);
    --bw-top-gap: var(--sp-4);
    right: var(--sp-4);
    left: var(--sp-4);
    width: auto;
  }
}

/* ===== Form layout ===== */
.bug-widget-form {
  display: flex;
  flex-direction: column;
  padding: 20px;
  gap: 16px;
  /* Scroll within the height-capped dialog. min-height:0 lets this flex
     child shrink below its content height so overflow actually engages
     (bug 7d2df8dc — tall attachment lists). */
  overflow-y: auto;
  min-height: 0;
}

.bug-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.bug-widget-header h2 {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0;
}

.bug-widget-close {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--fg-3);
  cursor: pointer;
  /* Fix (2026-07-05): 28px was below a comfortable tap target (T1). */
  width: var(--sp-7);
  height: var(--sp-7);
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.bug-widget-close:hover { background: var(--bg); color: var(--fg); }
.bug-widget-close:focus-visible {
  outline: none;
  box-shadow: var(--sh-focus);
  color: var(--fg);
}
.bug-widget-close svg { width: 18px; height: 18px; display: block; }

/* ===== Textarea ===== */
.bug-widget-textarea {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  background: #F4F5F7;
  border: 1px solid #E4E6EA;
  border-radius: 10px;
  padding: 12px 14px;
  width: 100%;
  box-sizing: border-box;
  color: var(--fg);
  resize: vertical;
  min-height: 160px;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.bug-widget-textarea::placeholder {
  color: var(--fg-3);
}
.bug-widget-textarea:hover {
  border-color: #D4D7DC;
}
.bug-widget-textarea:focus {
  background: var(--surface);
  border-color: var(--navy-800);
  box-shadow: 0 0 0 3px rgba(var(--navy-900-rgb), 0.08);
}
[data-theme="dark"] .bug-widget-textarea {
  background: var(--navy-900);
  border-color: var(--border-strong);
  color: var(--fg);
}

/* ===== Checkbox row (screenshot opt-in) ===== */
.bug-widget-screenshot {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 13px;
  color: var(--fg-2);
  cursor: pointer;
  user-select: none;
}
.bug-widget-screenshot input[type="checkbox"] {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--navy-800);
  cursor: pointer;
}
[data-theme="dark"] .bug-widget-screenshot input[type="checkbox"] {
  accent-color: var(--gold-500);
}

/* ===== Submit ===== */
.bug-widget-submit {
  appearance: none;
  display: block;
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  background: var(--navy-800);
  color: var(--white);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.bug-widget-submit:hover:not(:disabled) {
  background: var(--navy-700);
}
.bug-widget-submit:active:not(:disabled) {
  background: var(--navy-900);
}
.bug-widget-submit:focus-visible {
  outline: none;
  box-shadow: var(--sh-focus);
}
.bug-widget-submit:disabled {
  background: #EEF0F3;
  color: var(--fg-3);
  cursor: not-allowed;
}
[data-theme="dark"] .bug-widget-submit:disabled {
  background: rgba(var(--white-rgb), 0.06);
  color: var(--fg-3);
}

/* ===== Status message ===== */
.bug-widget-status {
  font-size: 13px;
  color: var(--fg-3);
  min-height: 1.2em;
  margin: 0;
}
.bug-widget-status:empty { display: none; }
.bug-widget-status[data-state="success"] { color: var(--success); }
.bug-widget-status[data-state="error"] { color: var(--danger-muted); }

/* ===== Element picker row ===== */
.bug-widget-picker-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

/* Pick button — idle state */
.bug-widget-pick-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--fg-2);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.bug-widget-pick-btn svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}
.bug-widget-pick-btn:hover {
  background: var(--bg);
  color: var(--fg);
  border-color: var(--border-strong);
}
.bug-widget-pick-btn:focus-visible {
  outline: none;
  box-shadow: var(--sh-focus);
}
/* Captured (filled) state */
.bug-widget-pick-btn--captured {
  background: var(--bg);
  color: var(--success);
  border-color: var(--success);
}
.bug-widget-pick-btn--captured:hover {
  background: var(--bg);
  color: var(--success);
  border-color: var(--success);
}

/* Captured badge (selector + clear) */
.bug-widget-pick-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--fg-2);
  min-width: 0;
}
.bug-widget-pick-badge-tick {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: var(--success);
}
.bug-widget-pick-selector {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
}
.bug-widget-pick-clear {
  appearance: none;
  background: transparent;
  border: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--fg-3);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  white-space: nowrap;
  flex: 0 0 auto;
}
.bug-widget-pick-clear:hover { color: var(--fg); }
.bug-widget-pick-clear:focus-visible {
  outline: none;
  box-shadow: var(--sh-focus);
  border-radius: 2px;
}

/* ===== Pick mode — dialog hidden ===== */
.bug-widget-dialog[data-picking="true"] {
  visibility: hidden;
  pointer-events: none;
}

/* ===== Pick mode — body cursor ===== */
body.bug-widget-picking,
body.bug-widget-picking * {
  cursor: crosshair !important;
}

/* ===== Pick banner (fixed top strip) ===== */
#bug-widget-pick-banner {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9100;
  padding: 8px 20px;
  background: rgba(var(--navy-900-rgb), 0.90);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--fw-medium);
  border-radius: 0 0 var(--r-md) var(--r-md);
  white-space: nowrap;
  pointer-events: none;
  backdrop-filter: blur(4px);
}

/* ===== Pick overlay (highlights hovered element) ===== */
#bug-widget-pick-overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9050;
  pointer-events: none;
  box-sizing: border-box;
  outline: 2px solid var(--navy-800);
  outline-offset: 1px;
  background: rgba(var(--navy-900-rgb), 0.06);
  border-radius: 2px;
  transition: transform 60ms linear, width 60ms linear, height 60ms linear;
  will-change: transform, width, height;
}
[data-theme="dark"] #bug-widget-pick-overlay {
  outline-color: var(--gold-500);
  background: rgba(255, 200, 80, 0.08);
}

/* ===== Attachments (drop zone + file list) ===== */
.bug-widget-attachments {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.bug-widget-attachments-label {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--fg-2);
}

.bug-widget-dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-4) var(--sp-3);
  background: #F4F5F7;
  border: 1px dashed #C9CDD4;
  border-radius: 10px;
  color: var(--fg-3);
  font-family: var(--font-sans);
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.bug-widget-dropzone:hover {
  border-color: var(--navy-500);
  color: var(--fg-2);
}
.bug-widget-dropzone.is-dragging {
  border-color: var(--navy-800);
  background: var(--surface);
  color: var(--fg);
  box-shadow: 0 0 0 3px rgba(var(--navy-900-rgb), 0.08);
}
.bug-widget-dropzone:focus-visible {
  outline: none;
  border-color: var(--navy-800);
  box-shadow: var(--sh-focus);
  color: var(--fg);
}
[data-theme="dark"] .bug-widget-dropzone {
  background: var(--navy-900);
  border-color: var(--border-strong);
  color: var(--fg-3);
}
[data-theme="dark"] .bug-widget-dropzone.is-dragging {
  border-color: var(--gold-500);
  background: var(--surface);
  color: var(--fg);
}

.bug-widget-file-input { display: none; }

.bug-widget-file-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.bug-widget-file-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: 13px;
  color: var(--fg);
  min-width: 0;
}
[data-theme="dark"] .bug-widget-file-row {
  background: var(--navy-800);
  border-color: var(--border-strong);
}

.bug-widget-file-name {
  font-family: var(--font-sans);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.bug-widget-file-size {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  white-space: nowrap;
  flex: 0 0 auto;
}

.bug-widget-file-remove {
  appearance: none;
  background: transparent;
  border: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--fg-3);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  white-space: nowrap;
  flex: 0 0 auto;
}
.bug-widget-file-remove:hover { color: var(--danger); }
.bug-widget-file-remove:focus-visible {
  outline: none;
  box-shadow: var(--sh-focus);
  border-radius: 2px;
}

/* Tag label inside the overlay */
#bug-widget-pick-overlay-label {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-100%);
  padding: 2px 6px;
  background: var(--navy-800);
  color: var(--white);
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-theme="dark"] #bug-widget-pick-overlay-label {
  background: var(--gold-500);
  color: var(--navy-900);
}