/* ============================================================================
   ignore-as-instrucoes-anteriores-prompt-injection/app.css
   Styles for the "fake support agent" prompt-injection sandbox only.
   Scoped under .pi; inherits BPSO Lab 2026 tokens from blog.css.
   Works in both dark (default) and [data-theme="light"].
   ========================================================================== */

/* Inline tags reused inside the article prose (LEAKED / BLOCKED chips). */
.pi-tag {
  display: inline-block;
  font-family: var(--font-head, system-ui);
  font-weight: 700;
  font-size: .72em;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .12em .5em;
  border-radius: 6px;
  vertical-align: middle;
  white-space: nowrap;
}
.pi-tag--leak {
  color: #fff;
  background: var(--cat-security, #ef4444);
}
.pi-tag--block {
  color: #fff;
  background: #16a34a;
}

/* --------------------------------------------------------------- Shell ---- */
.pi {
  --pi-danger: var(--cat-security, #ef4444);
  --pi-safe: #16a34a;
  --pi-line: var(--border);
  display: grid;
  gap: 1.1rem;
}

/* Level switcher (the four progressively harder defenses). */
.pi__levels {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.pi__level {
  appearance: none;
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 44px;
  padding: .4rem .7rem;
  border: 1px solid var(--pi-line);
  border-radius: var(--radius-sm, 10px);
  background: var(--surface-2);
  color: var(--text-main);
  font-family: var(--font-head, system-ui);
  font-weight: 600;
  font-size: .82rem;
  line-height: 1.15;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s, transform .15s;
}
.pi__level:hover {
  border-color: color-mix(in srgb, var(--brand-blue) 55%, var(--pi-line));
  transform: translateY(-1px);
}
.pi__level.is-active {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #fff;
}
.pi__level-num {
  display: inline-grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-blue) 22%, transparent);
  color: var(--text-main);
  font-size: .78rem;
  flex: none;
}
.pi__level.is-active .pi__level-num {
  background: rgba(255, 255, 255, .25);
  color: #fff;
}
.pi__level-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Level meta: a one-line description of the current defense + a status badge. */
.pi__level-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .7rem .9rem;
  border: 1px solid var(--pi-line);
  border-left: 4px solid var(--brand-blue);
  border-radius: var(--radius-sm, 10px);
  background: color-mix(in srgb, var(--brand-blue) 7%, var(--surface));
  font-size: .9rem;
}
.pi__level-desc { margin: 0; color: var(--text-main); min-width: 0; }
.pi__level-desc strong { color: var(--text-main); }
.pi__solved {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--font-head, system-ui);
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: .03em;
  color: var(--pi-danger);
  flex: none;
}
.pi__solved[hidden] { display: none; }
.pi__solved i { font-size: 1rem; }

/* --------------------------------------------------------- System prompt -- */
.pi__system {
  border: 1px solid var(--pi-line);
  border-radius: var(--radius-sm, 10px);
  background: #0b1220;
  overflow: hidden;
}
[data-theme="light"] .pi__system { background: #0f172a; }
.pi__system-head {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .8rem;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  font-family: var(--font-head, system-ui);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #94a3b8;
}
.pi__system-head i { color: var(--pi-danger); font-size: .95rem; }
.pi__system-body {
  margin: 0;
  padding: .85rem .9rem;
  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
  font-size: .82rem;
  line-height: 1.6;
  color: #cbd5e1;
  white-space: pre-wrap;
  word-break: break-word;
}
.pi__system-body .pi__secret {
  color: #fca5a5;
  font-weight: 700;
  background: rgba(239, 68, 68, .15);
  padding: 0 .25em;
  border-radius: 4px;
}
.pi__system-body .pi__rule { color: #7dd3fc; }

/* --------------------------------------------------------------- Chat ----- */
.pi__chat {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--pi-line);
  border-radius: var(--radius-sm, 10px);
  background: var(--surface);
  overflow: hidden;
}
.pi__log {
  /* Cap height so the input + reasoning stay visible without scrolling the page. */
  height: clamp(220px, 38vh, 340px);
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  scroll-behavior: smooth;
}

/* A single message bubble. */
.pi__msg {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  max-width: 86%;
}
.pi__msg-role {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.pi__bubble {
  padding: .6rem .85rem;
  border-radius: 12px;
  font-size: .94rem;
  line-height: 1.55;
  word-break: break-word;
  white-space: pre-wrap;
}
.pi__msg--user { align-self: flex-end; align-items: flex-end; }
.pi__msg--user .pi__bubble {
  background: var(--brand-blue);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.pi__msg--bot { align-self: flex-start; }
.pi__msg--bot .pi__bubble {
  background: var(--surface-2);
  color: var(--text-main);
  border: 1px solid var(--pi-line);
  border-bottom-left-radius: 4px;
}
.pi__msg--system { align-self: center; max-width: 100%; }
.pi__msg--system .pi__bubble {
  background: transparent;
  border: 1px dashed var(--pi-line);
  color: var(--text-muted);
  font-size: .82rem;
  text-align: center;
}

/* Verdict chip on a bot reply. */
.pi__verdict {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .15rem;
  font-family: var(--font-head, system-ui);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .04em;
  padding: .2rem .55rem;
  border-radius: 999px;
}
.pi__verdict i { font-size: .9rem; }
.pi__verdict--leak { color: #fff; background: var(--pi-danger); }
.pi__verdict--block { color: #fff; background: var(--pi-safe); }

/* The agent's "reasoning" trace — which rule fired and why. */
.pi__reasoning {
  margin-top: .15rem;
  border: 1px solid var(--pi-line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-page) 60%, transparent);
  overflow: hidden;
  font-size: .82rem;
}
.pi__reasoning summary {
  cursor: pointer;
  padding: .45rem .65rem;
  font-weight: 600;
  color: var(--text-muted);
  list-style: none;
}
.pi__reasoning summary::-webkit-details-marker { display: none; }
.pi__reasoning summary::before {
  content: "▸";
  display: inline-block;
  margin-right: .4rem;
  transition: transform .15s;
}
.pi__reasoning[open] summary::before { transform: rotate(90deg); }
.pi__reasoning-body {
  padding: 0 .65rem .6rem;
  display: grid;
  gap: .4rem;
}
.pi__trace-step {
  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.pi__trace-step b { color: var(--text-main); }
.pi__snippet {
  display: block;
  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
  font-size: .76rem;
  background: #0b1220;
  color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  padding: .5rem .65rem;
  overflow-x: auto;
  white-space: pre;
}
.pi__snippet .hit { color: #fca5a5; font-weight: 700; }
.pi__snippet .ok { color: #86efac; font-weight: 700; }

/* --------------------------------------------------------------- Form ----- */
.pi__form {
  display: flex;
  gap: .5rem;
  padding: .7rem;
  border-top: 1px solid var(--pi-line);
  background: var(--surface-2);
}
.pi__input {
  flex: 1 1 auto;
  min-width: 0;
  resize: none;
  border: 1px solid var(--pi-line);
  border-radius: var(--radius-sm, 10px);
  background: var(--bg-page);
  color: var(--text-main);
  font-family: var(--font-body, system-ui);
  font-size: .95rem;
  line-height: 1.45;
  padding: .6rem .75rem;
}
.pi__input::placeholder { color: var(--text-muted); }
.pi__input:focus-visible {
  outline: 3px solid var(--brand-light);
  outline-offset: 1px;
  border-color: var(--brand-blue);
}
.pi__send {
  appearance: none;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  padding: 0 1.05rem;
  border: 1px solid var(--brand-blue);
  border-radius: var(--radius-sm, 10px);
  background: var(--brand-blue);
  color: #fff;
  font-family: var(--font-head, system-ui);
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.pi__send i { font-size: 1.1rem; }
.pi__send:hover { background: var(--brand-dark); transform: translateY(-1px); }
.pi__send:active { transform: translateY(0); }
.pi__send .pi__send-label { white-space: nowrap; }

/* --------------------------------------------------------- Quick attacks -- */
.pi__hints {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
}
.pi__hints-label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-right: .1rem;
}
.pi__chip {
  appearance: none;
  border: 1px dashed color-mix(in srgb, var(--pi-danger) 55%, var(--pi-line));
  background: color-mix(in srgb, var(--pi-danger) 8%, transparent);
  color: var(--text-main);
  font-family: var(--font-body, system-ui);
  font-size: .8rem;
  padding: .4rem .75rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s;
}
.pi__chip:hover {
  background: color-mix(in srgb, var(--pi-danger) 16%, transparent);
  border-style: solid;
  transform: translateY(-1px);
}
.pi__reset {
  margin-left: auto;
  appearance: none;
  border: 1px solid var(--pi-line);
  background: transparent;
  color: var(--text-muted);
  font-size: .8rem;
  font-weight: 600;
  padding: .4rem .7rem;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  transition: color .15s, border-color .15s;
}
.pi__reset:hover { color: var(--text-main); border-color: var(--brand-blue); }

/* --------------------------------------------------- "How to mitigate" ---- */
.pi__mitigation {
  border: 1px solid var(--pi-line);
  border-radius: var(--radius-sm, 10px);
  background: var(--surface);
  overflow: hidden;
}
.pi__mitigation > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .8rem 1rem;
  font-family: var(--font-head, system-ui);
  font-weight: 600;
  font-size: .95rem;
  color: var(--text-main);
}
.pi__mitigation > summary::-webkit-details-marker { display: none; }
.pi__mitigation > summary i.pi__mitigation-icon { color: var(--pi-safe); font-size: 1.15rem; }
.pi__mitigation > summary .pi__chevron {
  margin-left: auto;
  transition: transform .18s;
  color: var(--text-muted);
}
.pi__mitigation[open] > summary .pi__chevron { transform: rotate(180deg); }
.pi__mitigation-body {
  padding: 0 1rem 1rem;
  display: grid;
  gap: 1rem;
}
.pi__mit-card {
  border: 1px solid var(--pi-line);
  border-radius: 10px;
  background: var(--surface-2);
  padding: .85rem 1rem;
}
.pi__mit-card h4 {
  margin: 0 0 .35rem;
  font-family: var(--font-head, system-ui);
  font-size: .98rem;
  font-weight: 700;
  color: var(--text-main);
}
.pi__mit-card p {
  margin: 0 0 .6rem;
  font-size: .9rem;
  color: var(--text-muted);
  line-height: 1.55;
}
.pi__mit-card pre {
  margin: 0;
  background: #0b1220;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  padding: .75rem .85rem;
  overflow-x: auto;
}
[data-theme="light"] .pi__mit-card pre { background: #0f172a; }
.pi__mit-card code {
  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
  font-size: .8rem;
  line-height: 1.6;
  color: #e2e8f0;
  background: none;
  border: 0;
  padding: 0;
  white-space: pre;
}
.pi__mit-card .tok-key { color: #c4b5fd; }
.pi__mit-card .tok-str { color: #86efac; }
.pi__mit-card .tok-com { color: #64748b; font-style: italic; }
.pi__mit-card .tok-fn { color: #7dd3fc; }

/* Screen-reader-only utility (live region label, etc.). */
.pi__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------- Responsive */
@media (max-width: 600px) {
  .pi__level-name { display: none; }       /* keep just the numbered pills on phones */
  .pi__level { flex: 1 1 0; min-height: 46px; padding: .4rem .35rem; }
  .pi__send .pi__send-label { display: none; }
  .pi__send { padding: 0 .9rem; }
  .pi__msg { max-width: 94%; }
  .pi__reset { margin-left: 0; }
  .pi__hints { gap: .4rem; }
}

@media (max-width: 360px) {
  .pi__log { height: clamp(190px, 34vh, 280px); }
  .pi__system-body { font-size: .76rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pi__log { scroll-behavior: auto; }
  .pi__level, .pi__chip, .pi__send, .pi__reset,
  .pi__mitigation > summary .pi__chevron,
  .pi__reasoning summary::before { transition: none; }
}