/* Report a bug — the sidebar button and the dialog it opens.

   Every page with the sidebar has it: code, projects, deployments and
   security. It lived in code.css and code.html alone, so the one place a
   problem could be reported from was the builder — and a bug on the
   deployments page had to be carried back to the builder to be described.
   js/bug-report.js builds the dialog and adds the button where a page's
   markup does not already have one. */

/* The button is the gear's twin so the pair reads as one control cluster;
   only the hover tint differs, because a bug report is the one thing down
   here you might press by accident. Its size comes from each page's own
   .ag-user-gear rules, collapsed rail included. */
.ag-user-bug:hover{background:var(--paper);color:#c4321a}
:root[data-theme="dark"] .ag-user-bug:hover{color:#ff8a70}

/* Centred over the page, the way Claude's own feedback dialog sits.
   The first version anchored this above the sidebar footer, which kept
   the screen visible but made the box the width of the rail — too narrow
   to write more than a few words in, which is the opposite of what a bug
   report needs.

   Above everything, the phone drawer included. The drawer and the sidebar
   toggle sit at 999999; at the 200 this had, the dialog opened centred but
   underneath the open drawer, dimmed by its own backdrop. */
.ag-bug-back{position:fixed;inset:0;z-index:1000000;
  display:grid;place-items:center;padding:20px;
  /* The Settings sheet's scrim and motion, so the two dialogs behind the
     same sidebar footer open alike: a frosted wash of the page rather than
     a flat dark sheet, fading in, with the card rising into place and
     reversing before it goes. The fallbacks are for a page without the
     tokens. */
  background:var(--scrim,rgba(8,12,18,.45));
  -webkit-backdrop-filter:var(--scrim-blur,blur(2px));backdrop-filter:var(--scrim-blur,blur(2px));
  animation:agBugFadeIn var(--dur-chill,.3s) var(--ease-snappy,ease-out) both}
.ag-bug-back[hidden]{display:none}
.ag-bug-back .ag-bug-pop{animation:agBugIn var(--dur-chill,.3s) var(--ease-snappy,ease-out) both}
.ag-bug-back.closing{animation:agBugFadeOut var(--dur-snappy,.12s) var(--ease-snappy,ease-out) both}
.ag-bug-back.closing .ag-bug-pop{animation:agBugOut var(--dur-snappy,.12s) var(--ease-snappy,ease-out) both}
@keyframes agBugFadeIn{from{opacity:0}to{opacity:1}}
@keyframes agBugFadeOut{from{opacity:1}to{opacity:0}}
@keyframes agBugIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@keyframes agBugOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(6px) scale(.99)}}
@media (prefers-reduced-motion:reduce){
  .ag-bug-back,.ag-bug-back .ag-bug-pop,.ag-bug-back.closing,.ag-bug-back.closing .ag-bug-pop{animation:none}
}
.ag-bug-pop{position:relative;width:100%;max-width:520px;box-sizing:border-box;
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:22px 24px;box-shadow:0 24px 64px rgba(0,0,0,.28)}
.ag-bug-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 14px}
.ag-bug-head b{font-size:1.06rem;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.ag-bug-x{border:0;background:none;color:var(--mut);cursor:pointer;width:28px;height:28px;
  display:grid;place-items:center;border-radius:8px}
.ag-bug-x:hover{background:var(--paper);color:var(--ink)}
.ag-bug-x svg{width:16px;height:16px}
.ag-bug-pop textarea{display:block;width:100%;box-sizing:border-box;resize:vertical;
  min-height:140px;padding:12px 14px;font:inherit;font-size:.92rem;line-height:1.5;
  color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:12px;
  outline:none;transition:border-color .14s,box-shadow .14s}
.ag-bug-pop textarea:focus{border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 24%,transparent)}
.ag-bug-note{margin:12px 0 0;font-size:.82rem;line-height:1.5;color:var(--mut)}
.ag-bug-row{display:flex;justify-content:flex-end;gap:10px;margin:18px 0 0}
.ag-bug-cancel,.ag-bug-send{border-radius:10px;padding:9px 18px;font:inherit;font-size:.88rem;
  font-weight:600;cursor:pointer;transition:.14s;border:1px solid var(--line)}
.ag-bug-cancel{background:var(--paper);color:var(--ink)}
.ag-bug-cancel:hover{background:var(--card)}
.ag-bug-send{background:var(--accent);border-color:var(--accent);color:#fff}
.ag-bug-send:hover{background:var(--accent-2);border-color:var(--accent-2)}
.ag-bug-send:disabled{opacity:.5;cursor:default}
.ag-bug-done{margin:10px 0 0;font-size:.78rem;font-weight:600;color:#2e7d32}
:root[data-theme="dark"] .ag-bug-done{color:#7fd08a}
.ag-bug-done.is-bad{color:#c4321a}
:root[data-theme="dark"] .ag-bug-done.is-bad{color:#ff8a70}

/* A phone gets the width, less its gutter, and a shorter box to type in so
   the buttons stay above the keyboard. */
@media (max-width:600px){
  .ag-bug-back{padding:16px}
  .ag-bug-pop{padding:18px 18px}
  .ag-bug-pop textarea{min-height:110px}
}