/* ============================================================
   Permission flow — "Decide what every agent can touch"
   Three-scene Framer Motion story (camera pan + zoom):
     Scene 1 — Permissions card, cursor sets per-action access
     Scene 2 — Empty workspace (list slides out, space opens)
     Scene 3 — Prompt → WisAI run → approval to send email
   The governance panel (.gv-visual) is the only frame; scenes
   float a single content card on it. No nested chrome.
   ============================================================ */
.pf-wrap { position: absolute; inset: 0; }
.pf-card { position: absolute; inset: 0; font-family: var(--wb-font-sans); }
.pf-stage { position: absolute; inset: 0; overflow: hidden; }
.pf-camera {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  will-change: transform;
}
.pf-scene-wrap { position: absolute; inset: 0; will-change: transform; }
.pf-scene {
  position: absolute; inset: 0;
  padding: clamp(18px, 4%, 32px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}

/* ---------- Scene 1: permissions card ---------- */
.pf-perms {
  width: min(412px, 100%);
  background: var(--wb-ink-0, #fff);
  border: 1px solid var(--wb-border);
  border-radius: 14px;
  padding: clamp(14px, 3.5%, 20px);
  box-shadow:
    0 1px 2px rgba(11, 31, 59, 0.04),
    0 20px 40px -24px rgba(11, 31, 59, 0.22);
}
.pf-perms-head {
  display: flex; align-items: center; gap: 9px;
  padding-bottom: 13px; margin-bottom: 7px;
  border-bottom: 1px solid var(--wb-ink-100);
}
.pf-perms-head img { width: 20px; height: 20px; }
.pf-perms-head h4 {
  margin: 0; font: 600 14px/1.2 var(--wb-font-display);
  letter-spacing: -0.012em; color: var(--wb-navy-900);
}

.pf-perm-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 1px;
}
.pf-perm-label {
  font: 500 13px/1.2 var(--wb-font-sans);
  color: var(--wb-navy-900);
  white-space: nowrap;
}
.pf-seg {
  margin-left: auto;
  display: inline-flex; align-items: center;
  background: var(--wb-ink-50);
  border: 1px solid var(--wb-border);
  border-radius: 999px; padding: 2px;
}
.pf-seg-opt {
  font: 600 9.5px/1 var(--wb-font-sans);
  color: var(--wb-ink-400);
  padding: 6px 10px; border-radius: 999px;
  transition: color 200ms var(--wb-ease-out), background 200ms var(--wb-ease-out);
  white-space: nowrap;
}
.pf-seg-opt.is-on[data-state="off"]    { background: var(--wb-ink-200);     color: var(--wb-ink-700); }
.pf-seg-opt.is-on[data-state="review"] { background: var(--wb-warning-500); color: #fff; }
.pf-seg-opt.is-on[data-state="on"]     { background: var(--wb-success-500); color: #fff; }

/* ---------- cursor ---------- */
.pf-cursor {
  position: absolute; top: 0; left: 0;
  width: 20px; height: 20px;
  pointer-events: none; z-index: 20;
  filter: drop-shadow(0 2px 3px rgba(11, 31, 59, 0.26));
}
.pf-cursor svg { display: block; }
.pf-click-ring {
  position: absolute; top: 2px; left: 2px;
  width: 24px; height: 24px; margin: -12px 0 0 -12px;
  border-radius: 50%;
  border: 1.5px solid var(--wb-navy-500);
  animation: pf-ring 440ms var(--wb-ease-out) forwards;
}
@keyframes pf-ring {
  0%   { transform: scale(0.2); opacity: 0.65; }
  100% { transform: scale(1.3); opacity: 0; }
}

/* ---------- Scene 2: chat governance ---------- */
.pf-chat {
  width: min(424px, 100%);
  display: flex; flex-direction: column; gap: 12px;
}
.pf-msg-user { align-self: flex-end; max-width: 86%; }
.pf-msg-head {
  display: flex; align-items: center; justify-content: flex-end; gap: 7px;
  margin-bottom: 5px;
  font: 600 10px/1 var(--wb-font-sans); color: var(--wb-ink-400);
}
.pf-msg-head time { font-family: var(--wb-font-mono); font-weight: 500; }
.pf-bubble {
  background: var(--wb-navy-900); color: #fff;
  border-radius: 13px 13px 4px 13px;
  padding: 10px 13px;
  font: 500 13px/1.45 var(--wb-font-sans);
  box-shadow: 0 8px 20px -12px rgba(11, 31, 59, 0.4);
}

.pf-wai { display: flex; gap: 10px; }
.pf-wai-av {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
}
.pf-wai-body { min-width: 0; flex: 1; }
.pf-wai-name { font: 700 11px/1 var(--wb-font-sans); color: var(--wb-navy-900); margin: 5px 0 9px; }
.pf-step {
  display: flex; align-items: center; gap: 8px;
  font: 500 12px/1.3 var(--wb-font-sans); color: var(--wb-ink-600);
  margin-bottom: 8px;
}
.pf-step img { width: 14px; height: 14px; }
.pf-step-check {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--wb-success-50); color: var(--wb-success-700);
  border: 1px solid var(--wb-success-100);
}
.pf-spin {
  width: 14px; height: 14px; flex-shrink: 0;
  border: 2px solid var(--wb-navy-100);
  border-top-color: var(--wb-navy-500);
  border-radius: 50%;
  animation: pf-spin 0.7s linear infinite;
}
@keyframes pf-spin { to { transform: rotate(360deg); } }

/* approval gate */
.pf-approve {
  margin-top: 2px;
  background: var(--wb-ink-0, #fff);
  border: 1px solid var(--wb-warning-100);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 14px 30px -20px rgba(11, 31, 59, 0.24);
}
.pf-approve-head {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 13px 9px;
  border-bottom: 1px solid var(--wb-ink-100);
  font: 700 11px/1 var(--wb-font-sans); color: var(--wb-warning-700);
}
.pf-approve-prev { padding: 11px 13px; }
.pf-prev-row {
  display: flex; gap: 8px; font: 500 11.5px/1.4 var(--wb-font-sans);
  color: var(--wb-navy-900); margin-bottom: 5px;
}
.pf-prev-row b { color: var(--wb-ink-400); font-weight: 700; min-width: 50px; }
.pf-prev-snip {
  font: 400 11.5px/1.5 var(--wb-font-sans); color: var(--wb-ink-500);
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--wb-ink-100);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.pf-approve-actions {
  display: flex; align-items: center; gap: 8px;
  padding: 0 13px 13px;
}
.pf-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 12px/1 var(--wb-font-sans);
  border-radius: 9px; padding: 9px 13px; cursor: default;
}
.pf-btn-primary { background: var(--wb-navy-900); color: #fff; }
.pf-btn-ghost { background: var(--wb-ink-0, #fff); color: var(--wb-navy-900); border: 1px solid var(--wb-border); }
.pf-approve-foot { margin-left: auto; }
.pf-approve-foot .pill {
  display: inline-flex; align-items: center; gap: 5px;
  font: 600 9.5px/1 var(--wb-font-sans);
  color: var(--wb-warning-700); background: var(--wb-warning-50);
  border: 1px solid var(--wb-warning-100); border-radius: 999px; padding: 5px 8px;
}

/* approved (sent) state */
.pf-sent {
  display: flex; align-items: center; gap: 9px;
  margin: 2px 13px 13px;
  padding: 10px 12px; border-radius: 9px;
  background: var(--wb-success-50); border: 1px solid var(--wb-success-100);
  font: 600 12px/1.3 var(--wb-font-sans); color: var(--wb-success-700);
}
.pf-sent-check {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--wb-success-500); color: #fff;
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .pf-seg-opt { padding: 6px 9px; }
}
@media (max-width: 480px) {
  .pf-perm-row { gap: 8px; padding: 6px 0; }
  .pf-perm-label { font-size: 12px; }
  .pf-seg-opt { font-size: 9px; padding: 5px 7px; }
  .pf-perms-head h4 { font-size: 13px; }
  .pf-approve-actions { flex-wrap: wrap; }
  .pf-approve-foot { margin-left: 0; order: 3; flex-basis: 100%; }
  .pf-chat { gap: 10px; }
}
@media (max-width: 360px) {
  .pf-seg-opt { padding: 5px 6px; letter-spacing: -0.02em; }
}