/* 22-bipass-library.css — BiPass inline flyout, built from the library
   design language:
     library/bipass-card      → the option rows (.bp-opt), the custom
                                input (.bp-input) and the GO button (.bp-go)
     library/button           → the square hardware-vibe button (.btn)
     library/icon-button      → the square bezel button (.icbtn)

   ── The shape ───────────────────────────────────────────────────
   There is no card and no floating panel. The BiPass button opens a
   FLYOUT that is rendered as a sibling of the button, inside the
   message's own action row. It therefore can never be positioned
   outside the viewport, which was the whole point of the rewrite.

   The flyout has three states that all occupy the SAME box:

     [modes]   Fact Fix · Simple · Detail · Custom
     [custom]  a text field, replacing the four buttons in place
     [review]  Approve · the git listing · Refuse

   The three stage panels are stacked in the same grid cell, so
   switching stages does not change the flyout's size — the buttons
   morph into the field and then into the review row without the
   layout jumping.

   ── The shape of the chrome ─────────────────────────────────────
   Everything is SQUARE. The library's language is a hardware bezel:
   a 1px hairline border, a bezel inset shadow, mono type in wide
   tracking, and copper as the only accent. There are no rounded
   pills here — the earlier pill treatment read as a consumer app and
   not like QUAD.

   ── The spring ──────────────────────────────────────────────────
   The buttons fly out of the trigger with an overshoot, and the
   stage swap uses the same spring so the transition feels physical
   rather than a cross-fade. The curve is
   cubic-bezier(.34, 1.56, .64, 1) — the library's --spring token. */

/* ── The flyout shell ─────────────────────────────────────────── */

.bipass-flyout {
  display: inline-flex;
  align-items: stretch;
  vertical-align: middle;
  margin-left: 8px;
  width: max-content;
  max-width: min(100%, 560px);
  overflow: visible;
  /* The flyout must never be clipped by the action row. */
  z-index: 3;
}

/* When the flyout is open the action row may wrap, so the buttons
   never push the answer off the screen. */
.message-actions.has-flyout {
  flex-wrap: wrap;
  align-items: center;
  row-gap: 6px;
}

.bipass-flyout-inner {
  position: relative;
  display: grid;
  grid-template-columns: max-content;
  align-items: center;
  min-width: 0;
  min-height: 32px;
  width: max-content;
  max-width: 100%;
  box-sizing: border-box;
  padding: 4px;
  background: rgba(15, 18, 30, 0.85);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow-inset-bezel), 0 12px 32px rgba(0, 0, 0, 0.5);
}

/* ── Stage stack ──────────────────────────────────────────────── */
/* Every stage occupies the same grid cell (1/1) so the flyout keeps
   a constant footprint while the contents swap. */

.bipass-stage {
  grid-area: 1 / 1;
  position: absolute;
  display: flex;
  align-items: center;
  gap: 2px;
  width: max-content;
  max-width: 100%;
  min-width: 0;
  opacity: 0;
  transform: scale(0.9) translateX(-6px);
  pointer-events: none;
  transition:
    opacity 180ms var(--ease, cubic-bezier(.2, .8, .2, 1)),
    transform 300ms cubic-bezier(.34, 1.56, .64, 1);
}

.bipass-flyout[data-stage="modes"]   .bipass-stage-modes,
.bipass-flyout[data-stage="custom"] .bipass-stage-custom,
.bipass-flyout[data-stage="review"] .bipass-stage-review,
.bipass-flyout[data-stage="busy"]   .bipass-stage-busy {
  position: relative;
  opacity: 1;
  transform: scale(1) translateX(0);
  pointer-events: auto;
}

/* The modes fly out of the trigger, one after another. */
.bipass-flyout[data-stage="modes"] .bipass-fly-btn {
  animation: bipass-fly-in 420ms cubic-bezier(.34, 1.56, .64, 1) backwards;
}
.bipass-flyout[data-stage="modes"] .bipass-fly-btn:nth-child(1) { animation-delay: 0ms; }
.bipass-flyout[data-stage="modes"] .bipass-fly-btn:nth-child(2) { animation-delay: 40ms; }
.bipass-flyout[data-stage="modes"] .bipass-fly-btn:nth-child(3) { animation-delay: 80ms; }
.bipass-flyout[data-stage="modes"] .bipass-fly-btn:nth-child(4) { animation-delay: 120ms; }

@keyframes bipass-fly-in {
  0% {
    opacity: 0;
    transform: translateX(-14px) scale(0.7);
  }
  60% {
    opacity: 1;
    transform: translateX(2px) scale(1.06);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* ── 1 · The four mode buttons ────────────────────────────────── */
/* (.bipass-fly-btn ← library/bipass-card .bp-opt) */

.bipass-fly-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  font: 500 11px var(--body, "Inter", system-ui, sans-serif);
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--c-ink, #f0eadd);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  overflow: hidden;
  transition:
    background 150ms var(--ease, cubic-bezier(.2, .8, .2, 1)),
    border-color 150ms var(--ease, cubic-bezier(.2, .8, .2, 1)),
    color 150ms var(--ease, cubic-bezier(.2, .8, .2, 1)),
    transform 300ms cubic-bezier(.34, 1.56, .64, 1);
}

/* The bezel highlight the library puts on every button. */
.bipass-fly-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, transparent 50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms;
}

.bipass-fly-btn .material-symbols-rounded {
  font-size: 14px;
  line-height: 1;
  color: var(--c-accent-bright, #d4a86a);
  opacity: 1;
}

.bipass-fly-btn:hover {
  background: var(--c-accent-wash, rgba(204, 144, 80, 0.10));
  border-color: var(--border-accent, rgba(204, 144, 80, 0.22));
  color: var(--c-ink, #f0eadd);
  transform: translateY(-1px);
}
.bipass-fly-btn:hover::before { opacity: 1; }
.bipass-fly-btn:active { transform: translateY(0); }

.bipass-fly-btn:focus-visible {
  outline: 1px solid var(--c-accent, #cc9050);
  outline-offset: -1px;
}

/* Fact Fix is the recommended action — the library marks it with a
   copper wash. */
.bipass-fly-btn[data-mode="fact-fix"] {
  background: var(--c-accent-wash, rgba(204, 144, 80, 0.10));
  border-color: var(--border-accent, rgba(204, 144, 80, 0.22));
}

/* ── 2 · Custom — the text field that replaces the four buttons ── */
/* (.bipass-custom-input ← library/bipass-card .bp-input) */

.bipass-stage-custom {
  gap: 4px;
  width: max-content;
  max-width: 100%;
}

.bipass-custom-input {
  flex: 1 1 auto;
  width: 220px;
  max-width: calc(100vw - 100px);
  min-width: 0;
  box-sizing: border-box;
  height: 24px;
  padding: 0 8px;
  font: 500 11px var(--mono, ui-monospace, monospace);
  letter-spacing: 0.04em;
  color: var(--c-ink, #f0eadd);
  background: var(--bg, rgba(0, 0, 0, 0.35));
  border: 1px solid var(--border-2, rgba(255, 255, 255, 0.08));
  border-radius: 0;
  outline: none;
  transition: border-color 150ms, box-shadow 150ms;
}

.bipass-custom-input::placeholder {
  color: var(--c-ink-muted, #5a554b);
  letter-spacing: 0.08em;
}

.bipass-custom-input:focus {
  border-color: var(--c-accent, #cc9050);
  box-shadow: 0 0 0 1px var(--c-accent-glow, rgba(204, 144, 80, 0.32));
}

/* (.bipass-fly-send ← library/bipass-card .bp-go) */
.bipass-fly-send {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 10px;
  font: 700 9px var(--mono, ui-monospace, monospace);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #000;
  background: var(--c-accent, #cc9050);
  border: 1px solid var(--c-accent, #cc9050);
  border-radius: 0;
  cursor: pointer;
  transition: background 150ms, box-shadow 150ms, transform 220ms var(--ease, cubic-bezier(.2, .8, .2, 1));
}
.bipass-fly-send .material-symbols-rounded { font-size: 13px; line-height: 1; }
.bipass-fly-send:hover {
  background: var(--c-accent-bright, #d4a86a);
  box-shadow: 0 0 16px var(--c-accent-glow, rgba(204, 144, 80, 0.32));
  transform: translateY(-1px);
}
.bipass-fly-send:active { transform: translateY(0); }

/* (.bipass-fly-back ← library/icon-button .icbtn) */
.bipass-fly-back {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  color: var(--c-ink-dim, #8a8478);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-2, rgba(255, 255, 255, 0.08));
  border-radius: 0;
  cursor: pointer;
  transition: background 150ms, border-color 150ms, color 150ms, transform 220ms var(--ease, cubic-bezier(.2, .8, .2, 1));
}
.bipass-fly-back .material-symbols-rounded { font-size: 14px; line-height: 1; }
.bipass-fly-back:hover {
  color: var(--c-ink, #f0eadd);
  border-color: var(--border-accent, rgba(204, 144, 80, 0.22));
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-1px);
}
.bipass-fly-back:active { transform: translateY(0); }

/* ── 3 · Review — approve · git listing · refuse ─────────────── */

.bipass-stage-review { gap: 6px; }

/* (.bipass-approve-btn ← library/button .btn) */
.bipass-approve-btn,
.bipass-refuse-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 10px;
  font: 700 9px var(--mono, ui-monospace, monospace);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 0;
  cursor: pointer;
  flex: 0 0 auto;
  overflow: hidden;
  transition: background 150ms, border-color 150ms, color 150ms, transform 220ms var(--ease, cubic-bezier(.2, .8, .2, 1));
}
.bipass-approve-btn .material-symbols-rounded,
.bipass-refuse-btn .material-symbols-rounded { font-size: 13px; line-height: 1; }

.bipass-approve-btn {
  color: var(--c-good, #5cb87a);
  background: rgba(92, 184, 122, 0.08);
  border: 1px solid rgba(92, 184, 122, 0.30);
}
.bipass-approve-btn:hover {
  background: rgba(92, 184, 122, 0.18);
  border-color: var(--c-good, #5cb87a);
  color: var(--c-good, #5cb87a);
  box-shadow: 0 0 16px rgba(92, 184, 122, 0.20);
  transform: translateY(-1px);
}
.bipass-approve-btn:active { transform: translateY(0); }

.bipass-refuse-btn {
  color: var(--c-bad, #e05252);
  background: rgba(224, 82, 82, 0.06);
  border: 1px solid rgba(224, 82, 82, 0.32);
}
.bipass-refuse-btn:hover {
  background: rgba(224, 82, 82, 0.16);
  border-color: var(--c-bad, #e05252);
  color: var(--c-bad, #e05252);
  box-shadow: 0 0 16px rgba(224, 82, 82, 0.20);
  transform: translateY(-1px);
}
.bipass-refuse-btn:active { transform: translateY(0); }

/* The change counter, in the git-status idiom: +3 / −1.
 *
 * The literal diff is NOT shown here — it is shown on the response
 * itself, where the user is reading it. The counter is only the
 * summary that sits between the two buttons. */
.bipass-stat {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
  padding: 0 8px;
  height: 24px;
  font: 700 11px/1 var(--mono, ui-monospace, monospace);
  letter-spacing: 0.04em;
  white-space: nowrap;
  user-select: none;
}

.bipass-stat-add { color: var(--c-good, #5cb87a); }
.bipass-stat-del { color: var(--c-bad, #e05252); }
.bipass-stat-sep { color: var(--c-ink-muted, #5a554b); }
.bipass-stat-num { font-weight: 700; }

/* ── Busy ──────────────────────────────────────────────────────── */

.bipass-stage-busy { gap: 8px; padding: 0 4px; }

.bipass-spinner {
  width: 12px;
  height: 12px;
  border: 1px solid var(--border-2, rgba(255, 255, 255, 0.08));
  border-top-color: var(--c-accent, #cc9050);
  border-radius: 0;
  animation: bipass-spin 700ms linear infinite;
}
@keyframes bipass-spin { to { transform: rotate(360deg); } }

.bipass-busy-label {
  font: 500 10px var(--mono, ui-monospace, monospace);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-dim, #8a8478);
  white-space: nowrap;
}

/* The escape hatch while the model is working. */
.bipass-fly-cancel {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  color: var(--c-ink-dim, #8a8478);
  background: transparent;
  border: 1px solid var(--border-2, rgba(255, 255, 255, 0.08));
  border-radius: 0;
  cursor: pointer;
  transition: background 150ms, border-color 150ms, color 150ms, transform 220ms var(--ease, cubic-bezier(.2, .8, .2, 1));
}
.bipass-fly-cancel .material-symbols-rounded { font-size: 13px; line-height: 1; }
.bipass-fly-cancel:hover {
  color: var(--c-bad, #e05252);
  border-color: rgba(224, 82, 82, 0.32);
  background: rgba(224, 82, 82, 0.10);
  transform: translateY(-1px);
}
.bipass-fly-cancel:active { transform: translateY(0); }

/* ── The diff, shown ON the response ──────────────────────────── */
/* The changed blocks are marked in place inside the answer, so the
 * user reads the edit where they will read it. Removed blocks are
   struck through in red, added blocks are green. */

.bp-diff-view {
  white-space: normal;
  word-break: break-word;
  line-height: 1.65;
}

.bp-diff-add,
.bp-diff-del {
  display: block;
  border-radius: 0;
  padding: 3px 9px;
  margin: 4px 0;
  border-left: 2px solid transparent;
}

.bp-diff-add {
  color: #a5d6a7;
  background: rgba(92, 184, 122, 0.12);
  border-left-color: var(--c-good, #5cb87a);
}

.bp-diff-del {
  color: #ef9a9a;
  background: rgba(224, 82, 82, 0.11);
  border-left-color: var(--c-bad, #e05252);
  text-decoration: line-through;
  text-decoration-color: rgba(224, 82, 82, 0.55);
}

/* The unchanged blocks keep their markdown, so a list stays a list. */
.bp-diff-view > * { margin: 0 0 0.6em; }
.bp-diff-view > *:last-child { margin-bottom: 0; }
.bp-diff-view p { margin: 0 0 0.6em; }
.bp-diff-view ul,
.bp-diff-view ol { margin: 0 0 0.6em 1.2em; padding: 0; }
.bp-diff-view pre { margin: 0 0 0.6em; }
.bp-diff-view code { font: 0.92em var(--mono, ui-monospace, monospace); }

/* ── The trigger ──────────────────────────────────────────────── */
/* (.bipass-trigger ← library/icon-button .icbtn) */

.bipass-trigger {
  position: static;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-2, rgba(255, 255, 255, 0.08));
  color: var(--c-ink-dim, #8a8478);
  cursor: pointer;
  border-radius: 0;
  opacity: 1;
  box-shadow: var(--shadow-inset-light);
  transition: background 150ms, border-color 150ms, color 150ms, transform 220ms var(--ease, cubic-bezier(.2, .8, .2, 1));
}
.bipass-trigger:hover {
  color: var(--c-accent, #cc9050);
  border-color: var(--border-accent, rgba(204, 144, 80, 0.22));
  background: rgba(255, 255, 255, 0.04);
}
.bipass-trigger:active { transform: translateY(1px); }
.bipass-trigger .material-symbols-rounded { font-size: 15px; line-height: 1; }

/* When the flyout is open the trigger reads as active. */
.bipass-trigger[aria-expanded="true"] {
  color: var(--c-accent, #cc9050);
  border-color: var(--c-accent, #cc9050);
  background: var(--c-accent-wash, rgba(204, 144, 80, 0.10));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px var(--c-accent);
}

/* ── Narrow screens ───────────────────────────────────────────── */
/* On a phone the four buttons wrap onto a second line; the flyout
   becomes a full-width row under the actions instead. */

@media (max-width: 560px) {
  .bipass-flyout {
    width: max-content;
    max-width: calc(100% - 122px);
    margin-left: 8px;
    margin-top: 0;
  }
  .bipass-flyout-inner {
    width: max-content;
    max-width: 100%;
  }
  .bipass-flyout[data-stage="custom"] {
    width: calc(100% - 122px);
  }
  .bipass-flyout[data-stage="custom"] .bipass-flyout-inner,
  .bipass-flyout[data-stage="custom"] .bipass-stage-custom {
    width: 100%;
  }
  .bipass-flyout[data-stage="custom"] .bipass-flyout-inner {
    min-width: 0;
  }
  .bipass-flyout[data-stage="custom"] .bipass-custom-input {
    width: auto;
    max-width: none;
  }
  .bipass-stage { flex-wrap: nowrap; }
  .bipass-fly-btn { padding: 0 6px; }
  .bipass-fly-btn span:not(.material-symbols-rounded) { display: none; }
  .bipass-fly-btn .material-symbols-rounded { font-size: 15px; }
  .bipass-approve-btn,
  .bipass-refuse-btn {
    gap: 0;
    width: 26px;
    padding: 0;
  }
  .bipass-approve-btn span:not(.material-symbols-rounded),
  .bipass-refuse-btn span:not(.material-symbols-rounded) {
    display: none;
  }
  .bipass-approve-btn .material-symbols-rounded,
  .bipass-refuse-btn .material-symbols-rounded {
    display: inline-block;
  }
}

/* Device-based UI limitations disabled — all devices get full animations */
}

/* ── InfoKey V2 card (.ikv2-card ← library .ik-card) ── */

.ikv2-card {
  position: fixed;
  z-index: 60;
  max-width: 320px;
  min-width: 200px;
  padding: 10px 12px;
  background: rgba(10, 10, 14, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-accent);
  border-radius: 0;
  box-shadow: var(--shadow-inset-light), 0 8px 24px rgba(0, 0, 0, 0.5);
  font: 500 12px/1.5 var(--body);
  color: var(--c-ink);
}

.ikv2-card-term {
  font: 700 11px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-accent-bright);
  margin-bottom: 5px;
}

.ikv2-card-def {
  font: 500 12px/1.5 var(--body);
  color: var(--c-ink);
  word-break: break-word;
}

.ikv2-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.ikv2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 24px;
  padding: 0 10px;
  font: 700 9px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: transparent;
  color: var(--c-ink-dim);
  border: 1px solid var(--border-2);
  border-radius: 0;
  cursor: pointer;
  transition: background 150ms, border-color 150ms, color 150ms;
}
.ikv2-btn:hover {
  background: var(--c-accent-wash);
  border-color: var(--border-accent);
  color: var(--c-ink);
}
.ikv2-btn .material-symbols-rounded { font-size: 13px; }

/* ── inline InfoKey word (.ik-word ← library .ik-word) ── */
.ik-word {
  position: relative;
  cursor: help;
  color: var(--c-ink);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: var(--c-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 1px;
  text-decoration-skip-ink: auto;
  -webkit-text-decoration-skip-ink: auto;
  padding: 0 1px 2px;
  transition: text-decoration-thickness 220ms cubic-bezier(.34, 1.56, .64, 1), color 220ms ease;
}
.ik-word:hover,
.ik-word.is-hover { text-decoration-thickness: 3px; }
.ik-word.is-pinned { text-decoration-thickness: 3px; }