/* ============================================================================
   Report a problem — the form, and the list of what has been reported.

   Two panels, one shell. On a phone each one takes the whole screen, because
   the person using it has just watched something go wrong and is holding the
   phone in one hand; on a laptop each one is a dialog over the app, because
   there the app around it is the context for what he is about to describe.

   Tokens only — no literal colour. Everything the reporter or the operator
   typed reaches these boxes through textContent, and the two rules that matter
   for that are `white-space: pre-wrap` (his line breaks survive) and
   `overflow-wrap: anywhere` (a pasted URL with no spaces in it cannot push the
   panel wider than a 375px phone).
   ========================================================================= */

/* ------------------------------------------------------- the button up top -- */

.chrome__bug {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  /* margin-left:auto is what pins it to the corner. #page-title is flex:1 and
     already pushes, but #chrome-context sits between them and shrinks to
     nothing on a phone — without this the button drifts left as the context
     line grows. */
  margin-left: auto;
  margin-right: -8px;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--speed) ease;
}
.chrome__bug:hover  { background: var(--surface-2); }
.chrome__bug:active { background: var(--surface); }
.chrome__bug:focus-visible { outline: none; box-shadow: var(--ring); }

/* The mark is a full-colour PNG, so it is dimmed at rest rather than tinted —
   there is no currentColor to hand it. It comes up to full on approach. */
.chrome__bug__mark {
  display: block;
  width: 24px;
  height: 24px;
  opacity: .82;
  transition: opacity var(--speed) ease;
}
.chrome__bug:hover .chrome__bug__mark,
.chrome__bug:focus-visible .chrome__bug__mark { opacity: 1; }

/* The same mark in the account menu. It does not take .acct-item__icon's
   colour rules — those set `color`, which an image ignores — so it gets its
   own box and the same dimmed-at-rest treatment. */
.acct-item__mark {
  flex: none;
  width: 19px;
  height: 19px;
  opacity: .78;
  transition: opacity var(--speed) ease;
}
.acct-item:hover .acct-item__mark,
.acct-item:focus-visible .acct-item__mark { opacity: 1; }

/* ------------------------------------------------------------ the shell -- */

.bugr {
  position: fixed;
  inset: 0;
  /* Over the chrome (20), the preview banner (30), the update bar (40) and the
     other dialogs (100). Under the "we fixed it" notice (110): that one arrives
     unbidden and holds the focus trap, and two trapped modals is a dead app. */
  z-index: 105;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
}

.bugr__scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  animation: bugr-fade 160ms ease-out;
}

.bugr__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 520px;
  /* Against .bugr's content box, not the viewport — the same reason the notice
     dialog does it: on a phone with a home indicator the padding below is real
     and a panel measured in dvh hangs its footer under the indicator. */
  max-height: 100%;
  min-height: 0;

  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  animation: bugr-pop 170ms cubic-bezier(.2, .8, .3, 1);
}

.bugr__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.bugr__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.3;
}

.bugr__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--tap);
  height: var(--tap);
  margin: -8px -8px -8px 0;
  color: var(--text-muted);
  background: none;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}
.bugr__x:hover { color: var(--text); background: var(--surface-2); }
.bugr__x:focus-visible { outline: none; box-shadow: var(--ring); }

.bugr__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
}

.bugr__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
}

.bugr__submit { flex: 1 1 auto; min-height: var(--tap); }
.bugr__cancel { flex: 0 0 auto; min-height: var(--tap); }

/* -------------------------------------------------------------- the form -- */

.bugr__lede {
  margin: 0 0 12px;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.bugr__ta {
  /* 16px minimum or iOS zooms the whole page the moment it is focused, and the
     panel is already the width of the screen. */
  font-size: 16px;
  min-height: 132px;
}

/* The inline refusal for an empty description, and anything else the form has
   to say about one field rather than about the whole submit. */
.bugr__fielderr {
  margin: 6px 0 0;
  font-size: .87rem;
  font-weight: 600;
  color: var(--danger);
}

.bugr__ta--bad {
  border-color: var(--danger);
}

.bugr__count {
  margin: 6px 0 0;
  font-size: .82rem;
  color: var(--text-faint);
}

/* ---- attachments ---- */

.bugr__pickrow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.bugr__pickbtn {
  min-height: var(--tap);
  padding: 0 16px;
}

.bugr__pickhint {
  flex: 1 1 auto;
  min-width: 0;
  font-size: .84rem;
  color: var(--text-faint);
}

.bugr__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 10px;
  margin-top: 12px;
  padding: 0;
  list-style: none;
}

.bugr__thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.bugr__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A real target, not a 12px cross. It sits on its own dark disc so it stays
   legible over whatever the screenshot happens to be. */
.bugr__drop {
  position: absolute;
  top: 3px;
  right: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--text-on-accent);
  background: var(--scrim);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(2px);
}
.bugr__drop:hover  { background: var(--danger); }
.bugr__drop:focus-visible { outline: none; box-shadow: var(--ring); }

/* Marks a picture already stored against a report that was filed but whose
   upload half failed — it is not re-sent and it cannot be removed. */
.bugr__thumb--done { opacity: .5; }

.bugr__sending {
  position: absolute;
  inset: auto 0 0 0;
  padding: 3px 5px;
  font-size: .72rem;
  font-weight: 700;
  text-align: center;
  color: var(--text-on-accent);
  background: var(--scrim);
}

/* ---- the one message about the whole submit ---- */

.bugr__say {
  margin-top: 14px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* ---- the confirmation that replaces the form ---- */

.bugr__done {
  padding: 8px 0 4px;
  text-align: center;
}
.bugr__done__mark {
  display: block;
  width: 56px;
  height: 56px;
  margin: 6px auto 14px;
}
.bugr__done__h {
  margin: 0 0 8px;
  font-size: 1.15rem;
  font-weight: 700;
}
.bugr__done__p {
  margin: 0 auto;
  max-width: 34em;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--text-muted);
}

/* -------------------------------------------------------------- the list -- */

.bugr__empty {
  padding: 26px 8px;
  text-align: center;
  color: var(--text-muted);
}

.bugr__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bugr__item {
  min-width: 0;
  padding: 13px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.bugr__item__top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 7px;
}

.bugr__when {
  flex: 1 1 auto;
  min-width: 0;
  font-size: .82rem;
  color: var(--text-faint);
}

/* Status is stated, never offered. There is no client update policy on
   bug_report, so anything here that looked pressable would be a lie. A span,
   not a button, and nothing in this file gives it a hover. */
.bugr__badge {
  flex: none;
  padding: 3px 9px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .01em;
  border: 1px solid transparent;
  border-radius: 999px;
  white-space: nowrap;
}
.bugr__badge--pending  { color: var(--warn); background: var(--warn-wash); border-color: var(--warn); }
.bugr__badge--resolved { color: var(--ok);   background: var(--ok-wash);   border-color: var(--ok); }
.bugr__badge--closed   { color: var(--text-muted); background: var(--surface-2); border-color: var(--border-strong); }

.bugr__desc {
  /* Free text he typed. pre-wrap keeps his line breaks; anywhere keeps a long
     paste inside the panel instead of widening it. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
  font-size: .93rem;
  line-height: 1.5;
}

.bugr__meta {
  margin: 8px 0 0;
  font-size: .8rem;
  color: var(--text-faint);
  overflow-wrap: anywhere;
}

/* The operator's reply. Same treatment as the description — it is free text
   from the other side of the desk and gets no more trust than the client's. */
.bugr__note {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 9px 0 0;
  padding: 9px 11px;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--ok-wash);
  border-left: 3px solid var(--ok);
  border-radius: var(--radius-sm);
}
.bugr__note__h {
  display: block;
  margin-bottom: 3px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ok);
}

/* ------------------------------------------------------------- full screen -- */
/* On a phone the panel IS the screen. 560px rather than the app's 480px
   breakpoint: the form is a textarea and a grid of pictures, and it stops being
   comfortable in a 520px box well before the account sheet does. */

@media (max-width: 560px) {
  .bugr { padding: 0; }
  .bugr__panel {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border: 0;
    border-radius: 0;
    animation: bugr-rise 180ms cubic-bezier(.2, .8, .3, 1);
  }
  .bugr__head { padding-top: calc(14px + env(safe-area-inset-top)); }
  .bugr__cancel { display: none; }   /* the X in the header is the way out */
}

@keyframes bugr-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes bugr-pop {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes bugr-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bugr__scrim,
  .bugr__panel { animation: none; }
}