.lens-host {
  --bg: #0b0d10;
  --bg-soft: #14171c;
  --surface: #1a1e24;
  --text: #f4f5f7;
  --muted: #c8ccd2;
  --border: rgba(255, 255, 255, 0.16);
  --accent: #f4f5f7;
  --accent-strong: #c8ccd2;
  --success: #c8ccd2;
  --danger: #f4f5f7;
  --warning: #c8ccd2;
  --demo-max-width: 960px;
  --page-pad-y: 24px;
  --page-pad-x: 30px;
}.lens-host * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}.lens-host, .lens-host {
  width: 100%;
  max-width: 100%;
}.lens-host {
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: transparent;
  display: block;
  padding: 0;
  position: relative;
  overflow-x: hidden;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}.lens-host .shell {
  width: 100%;
  min-height: calc(100vh - (var(--page-pad-y) * 2));
  display: grid;
  grid-template-rows: 1fr;
  gap: 0;
  position: relative;
  z-index: 1;
}.lens-host .hero {
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: clamp(18px, 2.8vw, 32px) clamp(16px, 3vw, 36px);
  position: relative;
  overflow: hidden;
}.lens-host .hero::after {
  content: none;
}.lens-host .hero > * {
  position: relative;
  z-index: 1;
}.lens-host .hero-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  color: #ffffff;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 700;
  letter-spacing: 0.02em;
}.lens-host .hero-brand-mark {
  width: clamp(28px, 3.4vw, 36px);
  height: auto;
  flex-shrink: 0;
}.lens-host .eyebrow {
  color: var(--muted);
  font-size: 15px;
  margin-bottom: 12px;
}.lens-host h1 {
  font-size: clamp(38px, 6.8vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: 850px;
}.lens-host .headline-keyword {
  display: inline-grid;
  position: relative;
  grid-template-areas: "word";
  white-space: nowrap;
  vertical-align: baseline;
  text-align: left;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}.lens-host .headline-keyword::after {
  content: attr(data-sizer);
  grid-area: word;
  visibility: hidden;
  pointer-events: none;
}.lens-host .headline-keyword > span {
  grid-area: word;
  transition: opacity 0.2s ease;
}.lens-host .headline-keyword.anon {
  color: #f4f5f7;
  text-shadow: 0 0 16px rgba(244, 245, 247, 0.32);
}.lens-host .headline-keyword.deanon {
  color: #f4f5f7;
  text-shadow: 0 0 16px rgba(244, 245, 247, 0.32);
}.lens-host .subtitle {
  margin-top: 20px;
  color: var(--muted);
  font-size: clamp(17px, 2.4vw, 22px);
  line-height: 1.55;
  max-width: 760px;
}.lens-host .dev-inline {
  font-family: "Press Start 2P", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.62em;
  letter-spacing: 0.04em;
  color: #ffffff;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.14);
  vertical-align: baseline;
}.lens-host .identity-proof {
  margin-top: 24px;
  margin-inline: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  padding: 12px 14px;
  color: #d6dced;
  font-size: 14px;
  line-height: 1.5;
  width: min(100%, 960px);
}.lens-host .cta-group {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}.lens-host .cta-group .oauth-btn {
  font-size: 17px;
  padding: 15px 24px;
  min-height: 52px;
}.lens-host button {
  border: 1px solid var(--border);
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 16px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}.lens-host button:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.2);
}.lens-host .primary {
  background: linear-gradient(180deg, var(--accent), var(--accent-strong));
  border-color: rgba(244, 245, 247, 0.78);
  color: #0b0d10;
  box-shadow: 0 10px 24px rgba(200, 204, 210, 0.4);
}.lens-host .primary:hover {
  box-shadow: 0 14px 28px rgba(127, 109, 246, 0.46);
}

/* Hero Join: slightly brighter rim next to black GitHub */.lens-host .cta-group .primary.oauth-btn {
  border-color: rgba(244, 245, 247, 0.88);
}.lens-host .secondary {
  background: rgba(255, 255, 255, 0.02);
}

/* GitHub: black fill, page-typed label (same as --text); edge so it doesn’t melt into --bg) */.lens-host .oauth-github-black {
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--text);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 10px 32px rgba(0, 0, 0, 0.55);
}.lens-host .oauth-github-black:hover {
  background: #080808;
  border-color: rgba(255, 255, 255, 0.26);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 12px 36px rgba(0, 0, 0, 0.62);
}.lens-host .oauth-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}.lens-host .cta-group #loginBtn, .lens-host .cta-group #saveBtn {
  width: min(100%, 320px);
}.lens-host .cta-group .oauth-btn svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}.lens-host #saveBtn svg {
  width: 24px;
  height: 24px;
}.lens-host #saveBtn span {
  font-weight: 600;
}.lens-host .meta {
  margin-top: 16px;
  color: var(--muted);
  font-size: 14px;
}.lens-host #waitlistCount {
  display: none;
  margin-top: 18px;
  color: #9ca5bd;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-wrap: balance;
}.lens-host .status {
  margin-top: 20px;
  font-size: 14px;
  min-height: 21px;
}.lens-host .status.success {
  color: var(--success);
}.lens-host .status.error {
  color: var(--danger);
}.lens-host .status.loading {
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}.lens-host .status.loading::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: var(--accent);
  animation: spin 0.7s linear infinite;
}.lens-host .contact-path {
  margin-top: 6px;
  padding-left: 8px;
  color: #a8b0c3;
  font-size: 13px;
  line-height: 1.45;
}.lens-host .contact-path-link {
  color: #d6dcf0;
  text-decoration: underline;
  text-decoration-color: rgba(214, 220, 240, 0.45);
  text-underline-offset: 2px;
  transition: color 120ms ease, text-decoration-color 120ms ease;
}.lens-host .contact-path-link:hover, .lens-host .contact-path-link:focus-visible {
  color: #ffffff;
  text-decoration-color: rgba(255, 255, 255, 0.8);
}@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}.lens-host .modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1200;
  backdrop-filter: blur(4px);
}.lens-host .modal-overlay.open {
  display: flex;
}.lens-host .modal {
  width: min(420px, 100%);
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(180deg, #161827, #11131f);
  padding: 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}.lens-host .modal h2 {
  font-size: 20px;
  margin-bottom: 6px;
}.lens-host .modal-copy {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 12px;
  line-height: 1.45;
}.lens-host .field {
  margin-bottom: 10px;
  position: relative;
}.lens-host .field label {
  display: block;
  color: #d6dcef;
  font-size: 13px;
  margin-bottom: 6px;
}.lens-host .field input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #0f111c;
  color: var(--text);
  font-size: 14px;
  padding: 10px 11px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}.lens-host .field input:focus {
  border-color: rgba(244, 245, 247, 0.75);
  box-shadow: 0 0 0 3px rgba(200, 204, 210, 0.2);
}.lens-host .modal-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}.lens-host .legend {
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}.lens-host .legend span::before {
  content: "•";
  margin-right: 6px;
}.lens-host .legend .safe {
  color: var(--success);
}.lens-host .legend .controlled {
  color: var(--warning);
}.lens-host .llm-icons {
  display: none;
  margin-top: 10px;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}.lens-host .llm-label {
  color: #99a2bc;
  font-size: 12px;
}.lens-host .llm-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 12px;
  color: #e5eaf8;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}.lens-host .llm-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.06);
}.lens-host .llm-chip:focus-visible {
  outline: 2px solid rgba(244, 245, 247, 0.7);
  outline-offset: 2px;
}.lens-host .llm-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  font-size: 10px;
  line-height: 1;
}.lens-host .llm-chip.chatgpt .llm-dot {
  color: #42f5b6;
  background: rgba(66, 245, 182, 0.14);
}.lens-host .llm-chip.gemini .llm-dot {
  color: #9eb7ff;
  background: rgba(158, 183, 255, 0.16);
}.lens-host .llm-chip.claude .llm-dot {
  color: #ffcb8f;
  background: rgba(255, 203, 143, 0.16);
}.lens-host .demo-panel {
  margin-top: 16px;
  margin-inline: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(9, 10, 16, 0.6);
  padding: 12px;
  width: min(100%, 960px);
}.lens-host .demo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}.lens-host .demo-title {
  font-size: 15px;
  color: #d7dbee;
}.lens-host .demo-state {
  font-size: 12px;
  color: var(--muted);
}.lens-host .demo-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}.lens-host .mini-btn {
  font-size: 12px;
  padding: 7px 10px;
  border-radius: 10px;
}.lens-host .record-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}.lens-host .record {
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.02);
}.lens-host .record .k {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px;
}.lens-host .record .v {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  color: #f2f4fb;
  transition: color 0.2s ease;
}.lens-host .response-preview {
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  padding: 8px;
  font-size: 12px;
  color: #cfd5e7;
  line-height: 1.5;
  background: rgba(255, 255, 255, 0.01);
}.lens-host .shell.is-deanon .record {
  border-color: rgba(244, 245, 247, 0.35);
  background: rgba(244, 245, 247, 0.06);
}.lens-host .shell.is-deanon .record .v {
  color: #f4f5f7;
}.lens-host .shell.is-deanon .response-preview {
  border-color: rgba(244, 245, 247, 0.45);
}.lens-host .local-pill {
  color: var(--warning);
  font-weight: 600;
}

/* Author mini-card → m-mooga.com + LinkedIn (fixed bottom-right, borderless) */.lens-host .profile-widget-wrap {
  position: fixed;
  z-index: 50;
  right: max(12px, calc(var(--page-pad-x) + env(safe-area-inset-right, 0px)));
  bottom: max(12px, calc(var(--page-pad-y) + env(safe-area-inset-bottom, 0px)));
  pointer-events: none;
}.lens-host .profile-widget-wrap .mooga-card {
  pointer-events: auto;
}.lens-host .mooga-card {
  margin: 0;
  max-width: min(300px, calc(100vw - 24px));
  padding: 6px 8px;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 20px;
  box-shadow: none;
  backdrop-filter: none;
  transition: transform 0.2s ease;
}.lens-host .mooga-card:hover, .lens-host .mooga-card:focus-within {
  transform: translateY(-2px);
  box-shadow: none;
}.lens-host .mooga-card:focus-within {
  outline: none;
  box-shadow: none;
}.lens-host .mooga-widget {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  text-decoration: none;
  color: #e8e6f0;
  border: none;
  border-radius: 0;
}.lens-host .mooga-widget:focus-visible {
  outline: none;
  border-radius: 12px;
  box-shadow: 0 0 0 2px rgba(244, 245, 247, 0.45);
}.lens-host .mooga-portrait-wrap {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0;
  flex-shrink: 0;
  padding: 3px;
  border: none;
  border-radius: 50%;
  overflow: hidden;
  background: repeating-conic-gradient(#1f1d2e 0% 25%, #16141f 0% 50%) 50% / 8px 8px;
}.lens-host .mooga-portrait-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}.lens-host .mooga-portrait-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 50%;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.05) 2px,
    rgba(0, 0, 0, 0.05) 4px
  );
}.lens-host .mooga-text {
  text-align: left;
  min-width: 0;
}.lens-host .mooga-name {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: inherit;
  text-shadow: none;
}.lens-host .mooga-tagline {
  margin: 6px 0 0;
  max-width: 14rem;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size: 11px;
  line-height: 1.45;
  font-weight: 400;
  color: #8b93a8;
}@media (prefers-reduced-motion: reduce) {.lens-host * {
    animation: none !important;
    transition: none !important;
  }}@media (max-width: 900px) {.lens-host {
    --page-pad-y: 18px;
    --page-pad-x: 20px;
  }}

/* Desktop: hero is a flex column so we can stack; CTA + counts before demo table (mobile uses document order, already CTA → demo) */@media (min-width: 721px) {.lens-host .hero {
    display: flex;
    flex-direction: column;
  }.lens-host .hero .cta-group, .lens-host .hero .meta, .lens-host .hero .status, .lens-host .hero .contact-path {
    order: 2;
  }.lens-host .hero .demo-panel {
    order: 3;
  }.lens-host .hero .llm-icons {
    order: 4;
  }}@media (max-width: 720px) {.lens-host {
    --page-pad-y: 14px;
    --page-pad-x: 14px;
  }.lens-host .shell {
    width: 100%;
    min-height: auto;
    gap: 0;
  }.lens-host .hero {
    padding: 14px 12px 18px;
    background: transparent;
    overflow: visible;
  }.lens-host h1 {
    font-size: clamp(30px, 12vw, 44px);
    line-height: 1.08;
  }.lens-host .subtitle {
    margin-top: 16px;
    font-size: clamp(16px, 4.8vw, 20px);
  }.lens-host .cta-group #loginBtn, .lens-host .cta-group #saveBtn {
    width: 100%;
  }.lens-host .demo-controls {
    width: 100%;
    justify-content: flex-start;
  }.lens-host .record-grid {
    grid-template-columns: 1fr;
  }.lens-host .profile-widget-wrap {
    position: static;
    right: auto;
    bottom: auto;
    margin-top: 14px;
    pointer-events: auto;
  }.lens-host .mooga-card {
    max-width: 100%;
    padding: 4px 0;
  }.lens-host .mooga-widget {
    justify-content: center;
  }.lens-host .mooga-portrait-wrap {
    width: 64px;
    height: 64px;
  }.lens-host {
    min-height: 100dvh;
    overflow-y: auto;
  }}

/* ─── Two-column hero with right-side embedded demo ───────────────── */.lens-host .hero-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  width: 100%;
}.lens-host .hero-row > .hero {
  min-width: 0;
}

/* ─── Privacy demo (chat-thread pattern) ─────────────────────────────
   Single card, transcript above, composer below. PII is highlighted
   inline in the user's message and in the assistant's answer; the
   transition from "what you wrote" to "what the model received" is
   shown via the brief masking animation when you press send. */.lens-host {
  --lens-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --lens-mono: "Space Mono", ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, monospace;
  --lens-accent: #f4f5f7;
  --lens-accent-2: #c8ccd2;
  --lens-surface-0: #0b0d10;
  --lens-stroke: rgba(255, 255, 255, 0.07);
  --lens-stroke-strong: rgba(255, 255, 255, 0.13);
  --lens-ink: #f4f5ff;
  --lens-ink-soft: rgba(244, 245, 255, 0.66);
  --lens-ink-faint: rgba(244, 245, 255, 0.4);
}.lens-host .demo-aside {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}.lens-host .lens {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  background: transparent;
  border-radius: 0;
  border: 0;
  overflow: hidden;
  isolation: isolate;
  box-shadow: none;
  min-height: 580px;
}

/* Ambient lighting removed — the lens now sits flush on the page background. */.lens-host .lens::after { content: none; }.lens-host .lens > * { position: relative; z-index: 1; }@keyframes lens-ambient {
  0%   { transform: translate(0%, 0%) rotate(0deg); }
  50%  { transform: translate(2%, -3%) rotate(8deg); }
  100% { transform: translate(-3%, 2%) rotate(-6deg); }
}@media (prefers-reduced-motion: reduce) {.lens-host .lens::after { animation: none; }}

/* ─── Top bar ─── */.lens-host .lens-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--lens-stroke);
  background: rgba(255, 255, 255, 0.008);
}.lens-host .lens-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--lens-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--lens-ink-soft);
  text-transform: lowercase;
}.lens-host .lens-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background:
    radial-gradient(circle at 30% 30%, rgba(244, 245, 247, 0.5), rgba(244, 245, 247, 0.1) 60%),
    linear-gradient(140deg, rgba(244, 245, 247, 0.18), rgba(11, 13, 16, 0.6));
  border: 1px solid rgba(244, 245, 247, 0.35);
  color: var(--lens-accent);
  box-shadow: 0 0 18px -4px rgba(244, 245, 247, 0.5);
}.lens-host .lens-brand-text { color: var(--lens-ink); font-weight: 500; }.lens-host .lens-brand-sep { color: rgba(255, 255, 255, 0.18); }.lens-host .lens-brand-mode { color: var(--lens-ink-faint); font-size: 11px; }.lens-host .lens-bar-link {
  font-family: var(--lens-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--lens-ink-soft);
  text-decoration: none;
  padding: 4px 9px;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: color 180ms var(--lens-ease), border-color 180ms var(--lens-ease), background 180ms var(--lens-ease);
}.lens-host .lens-bar-link:hover {
  color: var(--lens-ink);
  border-color: var(--lens-stroke-strong);
  background: rgba(255, 255, 255, 0.04);
}

/* ─── Thread (transcript) ─── */.lens-host .lens-thread {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 22px 8px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  scroll-behavior: smooth;
}.lens-host .lens-thread::-webkit-scrollbar { width: 6px; }.lens-host .lens-thread::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
}

/* Welcoming empty state */.lens-host .lens-empty {
  margin: auto 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 4px;
  opacity: 0;
  animation: lens-fade-in 600ms var(--lens-ease) 80ms forwards;
}.lens-host .lens-empty-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background:
    radial-gradient(circle at 30% 30%, rgba(244, 245, 247, 0.4), rgba(244, 245, 247, 0.05) 70%),
    linear-gradient(140deg, rgba(244, 245, 247, 0.16), rgba(11, 13, 16, 0.4));
  border: 1px solid rgba(244, 245, 247, 0.28);
  color: var(--lens-accent);
  box-shadow: 0 0 24px -4px rgba(244, 245, 247, 0.5);
  margin-bottom: 6px;
}.lens-host .lens-empty-title {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.01em;
  font-weight: 600;
  line-height: 1.2;
  background: linear-gradient(110deg,
    rgba(244, 245, 255, 0.94) 0%,
    rgba(244, 245, 255, 0.94) 35%,
    var(--lens-accent) 50%,
    rgba(244, 245, 255, 0.94) 65%,
    rgba(244, 245, 255, 0.94) 100%);
  background-size: 220% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: lens-title-shimmer 5.4s linear infinite;
}@keyframes lens-title-shimmer {
  from { background-position: 220% 0; }
  to   { background-position: -120% 0; }
}@media (prefers-reduced-motion: reduce) {.lens-host .lens-empty-title { animation: none; }}.lens-host .lens-empty-sub {
  margin: 0;
  font-size: 14px;
  color: var(--lens-ink-soft);
  line-height: 1.55;
  max-width: 44ch;
}.lens-host .lens-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}.lens-host .lens-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--lens-stroke-strong);
  color: var(--lens-ink-soft);
  font-family: Inter, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  animation: lens-chip-in 420ms var(--lens-ease) forwards;
  transition:
    transform 180ms var(--lens-ease),
    background 180ms var(--lens-ease),
    border-color 180ms var(--lens-ease),
    color 180ms var(--lens-ease),
    box-shadow 180ms var(--lens-ease);
}.lens-host .lens-chip:nth-child(1) { animation-delay: 260ms; }.lens-host .lens-chip:nth-child(2) { animation-delay: 360ms; }.lens-host .lens-chip:nth-child(3) { animation-delay: 460ms; }@keyframes lens-chip-in {
  to { opacity: 1; transform: translateY(0); }
}@media (prefers-reduced-motion: reduce) {.lens-host .lens-chip { opacity: 1; transform: none; animation: none; }}.lens-host .lens-chip.is-active {
  background: rgba(244, 245, 247, 0.12);
  border-color: rgba(244, 245, 247, 0.55);
  color: var(--lens-ink);
  box-shadow: 0 0 0 1px rgba(244, 245, 247, 0.18);
}.lens-host .lens-chip:hover {
  background: rgba(244, 245, 247, 0.1);
  border-color: rgba(244, 245, 247, 0.45);
  color: var(--lens-ink);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -8px rgba(244, 245, 247, 0.5);
}@keyframes lens-fade-in {
  to { opacity: 1; }
}



/* Hide empty state once there's a message */.lens-host .lens[data-has-thread="true"] .lens-empty { display: none; }

/* ─── Messages ─── */.lens-host .lens-msg {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Default to fully visible. The keyframes animate FROM opacity:0 up to
     opacity:1, so the animation still does its fade-in on a normal page
     load, but if the animation never starts (some headless paths, paused
     compositors, certain iframe layouts) the bubble is visible anyway
     instead of stuck at opacity:0. */
  animation: lens-msg-in 380ms var(--lens-ease);
}@keyframes lens-msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}.lens-host .lens-msg-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--lens-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lens-ink-faint);
}.lens-host .lens-msg-tag .lens-msg-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lens-accent);
}.lens-host .lens-msg[data-role="assistant"] .lens-msg-tag .lens-msg-dot {
  background: #6ee5c9;
}.lens-host .lens-msg-body {
  position: relative;
  font-family: Inter, sans-serif;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--lens-ink);
  letter-spacing: -0.005em;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--lens-stroke);
  background: rgba(255, 255, 255, 0.02);
}.lens-host .lens-msg[data-role="user"] .lens-msg-body {
  background:
    linear-gradient(180deg, rgba(244, 245, 247, 0.07), rgba(244, 245, 247, 0.03));
  border-color: rgba(244, 245, 247, 0.2);
}.lens-host .lens-msg[data-role="assistant"] .lens-msg-body {
  background: rgba(255, 255, 255, 0.025);
}.lens-host .lens-msg-body pre, .lens-host .lens-msg-body .lens-pre {
  margin: 0;
  font-family: var(--lens-mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--lens-ink-soft);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}.lens-host .lens-pdf-msg {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}.lens-host .lens-pdf-msg strong {
  color: var(--lens-ink);
  font-weight: 600;
}.lens-host .lens-pdf-msg .lens-pdf-meta {
  font-family: var(--lens-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--lens-ink-faint);
}.lens-host .lens-pdf-instruction {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--lens-stroke);
  font-size: 14.5px;
  color: var(--lens-ink);
}

/* PDF result card — the redacted / restored PDF artifact bubble. */.lens-host .lens-pdf-result {
  display: flex;
  flex-direction: column;
  gap: 10px;
}.lens-host .lens-pdf-result-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--lens-stroke-strong);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}.lens-host .lens-pdf-result-icon {
  flex-shrink: 0;
  font-size: 22px;
  line-height: 1;
}.lens-host .lens-pdf-result-info {
  flex: 1 1 auto;
  min-width: 0;
}.lens-host .lens-pdf-result-name {
  font-family: var(--lens-mono);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--lens-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}.lens-host .lens-pdf-result-meta {
  margin-top: 2px;
  font-family: var(--lens-mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--lens-ink-faint);
}.lens-host .lens-pdf-download {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 12px;
  border: 1px solid var(--lens-stroke-strong);
  border-radius: 7px;
  font-family: var(--lens-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--lens-ink);
  background: rgba(255, 255, 255, 0.04);
  text-decoration: none;
  transition: background 140ms var(--lens-ease), border-color 140ms var(--lens-ease);
}.lens-host .lens-pdf-download:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.32);
}.lens-host .lens-entity-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}.lens-host .lens-entity-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--lens-stroke);
  background: rgba(255, 255, 255, 0.02);
  font-family: var(--lens-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--lens-ink-soft);
  text-transform: uppercase;
}.lens-host .lens-entity-chip b {
  font-weight: 700;
  color: var(--lens-ink);
}.lens-host .lens-pdf-error {
  padding: 10px 12px;
  border: 1px solid rgba(244, 245, 247, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  font-family: var(--lens-mono);
  font-size: 12.5px;
  color: var(--lens-ink-soft);
}

/* Inline preview of the redacted PDF. Native <iframe> rendering, so the
   exact rasterised + redacted artifact is what the user sees — same bytes
   that go through `download` on the open button above. */.lens-host .lens-pdf-preview {
  width: 100%;
  height: 420px;
  border: 1px solid var(--lens-stroke-strong);
  border-radius: 10px;
  background: var(--lens-ink);
  display: block;
}@media (max-width: 640px) {.lens-host .lens-pdf-preview { height: 320px; }}

/* "sent to model" bubble — muted, system-side, monochrome with mask pills */.lens-host .lens-msg--sent .lens-msg-tag {
  color: rgba(244, 245, 255, 0.42);
}.lens-host .lens-msg--sent .lens-msg-tag .lens-msg-dot {
  background: rgba(244, 245, 247, 0.7);
  box-shadow: 0 0 8px rgba(244, 245, 247, 0.55);
}.lens-host .lens-msg--sent .lens-msg-body {
  background: rgba(255, 255, 255, 0.018);
  border: 1px dashed rgba(255, 255, 255, 0.14);
  padding: 12px 14px;
}.lens-host .lens-pre--sent {
  font-size: 12px;
  color: rgba(244, 245, 255, 0.62);
  max-height: 180px;
  overflow: auto;
  white-space: pre-wrap;
}.lens-host .lens-mask {
  display: inline-block;
  font-family: var(--lens-mono);
  font-size: 0.92em;
  padding: 0 5px;
  margin: 0 1px;
  border-radius: 4px;
  background: rgba(244, 245, 247, 0.08);
  color: rgba(248, 202, 168, 0.92);
  border: 1px dashed rgba(244, 245, 247, 0.3);
  letter-spacing: 0.01em;
  opacity: 1;
}

/* Stagger the "sent to model" mask pills so each field appears one at a time. */.lens-host .lens-msg--sent .lens-mask:nth-child(1) { animation-delay:  40ms; }.lens-host .lens-msg--sent .lens-mask:nth-child(2) { animation-delay: 110ms; }.lens-host .lens-msg--sent .lens-mask:nth-child(3) { animation-delay: 180ms; }.lens-host .lens-msg--sent .lens-mask:nth-child(4) { animation-delay: 250ms; }.lens-host .lens-msg--sent .lens-mask:nth-child(5) { animation-delay: 320ms; }.lens-host .lens-msg--sent .lens-mask:nth-child(6) { animation-delay: 390ms; }.lens-host .lens-msg--sent .lens-mask:nth-child(7) { animation-delay: 460ms; }.lens-host .lens-msg--sent .lens-mask:nth-child(8) { animation-delay: 530ms; }.lens-host .lens-msg--sent .lens-mask:nth-child(9) { animation-delay: 600ms; }.lens-host .lens-msg--sent .lens-mask:nth-child(10) { animation-delay: 670ms; }.lens-host .lens-msg--sent .lens-mask:nth-child(n+11) { animation-delay: 740ms; }@keyframes lens-mask-in {
  0% {
    opacity: 0;
    transform: translateY(2px);
    background: rgba(244, 245, 247, 0.42);
    border-color: rgba(244, 245, 247, 0.7);
    box-shadow: 0 0 12px rgba(244, 245, 247, 0.45);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    box-shadow: 0 0 0 rgba(244, 245, 247, 0);
  }
}@media (prefers-reduced-motion: reduce) {.lens-host .lens-mask { opacity: 1; transform: none; animation: none; }}.lens-host .lens-msg-foot {
  font-family: var(--lens-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--lens-ink-faint);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}.lens-host .lens-msg-foot .x {
  color: var(--lens-accent);
}

/* Thinking indicator (3 pulsing dots) — appears as assistant placeholder while we wait */.lens-host .lens-msg.is-thinking .lens-msg-body {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 16px 18px;
  min-width: 72px;
}.lens-host .lens-msg.is-thinking .lens-thinking-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lens-accent);
  opacity: 0.4;
  animation: lens-think 1.2s var(--lens-ease) infinite;
}.lens-host .lens-msg.is-thinking .lens-thinking-dot:nth-child(2) { animation-delay: 140ms; }.lens-host .lens-msg.is-thinking .lens-thinking-dot:nth-child(3) { animation-delay: 280ms; }@keyframes lens-think {
  0%, 80%, 100% { opacity: 0.25; transform: scale(0.85); }
  40%           { opacity: 1;    transform: scale(1);    }
}@media (prefers-reduced-motion: reduce) {.lens-host .lens-msg, .lens-host .lens-empty, .lens-host .lens-thinking-dot { animation: none; opacity: 1; }}

/* ─── Composer ─── */.lens-host .lens-composer {
  flex: 0 0 auto;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--lens-stroke);
  background: rgba(255, 255, 255, 0.012);
  display: flex;
  flex-direction: column;
  gap: 10px;
}.lens-host .lens-modes {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  isolation: isolate;
}.lens-host .lens-modes-thumb {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--thumb-w, 0);
  border-radius: 6px;
  background: rgba(244, 245, 247, 0.14);
  box-shadow: 0 0 0 1px rgba(244, 245, 247, 0.4) inset;
  transform: translateX(var(--thumb-x, 0));
  transition:
    transform 380ms cubic-bezier(0.34, 1.16, 0.64, 1),
    width 380ms cubic-bezier(0.34, 1.16, 0.64, 1);
  z-index: 0;
  pointer-events: none;
  opacity: 0;
}.lens-host .lens-modes-thumb.is-ready { opacity: 1; }.lens-host .lens-mode {
  position: relative;
  z-index: 1;
  font-family: var(--lens-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--lens-ink-faint);
  background: transparent;
  border: 0;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: color 180ms var(--lens-ease);
}.lens-host .lens-mode:hover { color: var(--lens-ink); }.lens-host .lens-mode.active { color: var(--lens-ink); }

/* Status pill: tucked into the bottom-left of the textarea field, alongside
   the send button which sits bottom-right. Reads "N fields will be masked"
   or "analyzing…" while the API is in flight. */.lens-host .lens-status-pill {
  position: absolute;
  bottom: 10px;
  left: 12px;
  z-index: 3;
  font-family: var(--lens-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--lens-ink-faint);
  background: rgba(11, 12, 20, 0.55);
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transform-origin: left center;
  transition: color 220ms var(--lens-ease), opacity 220ms var(--lens-ease), border-color 220ms var(--lens-ease);
  pointer-events: none;
  opacity: 0;
}

/* Tiny status dot in front of the text */.lens-host .lens-status-pill::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}.lens-host .lens-status-pill:not(:empty) { opacity: 1; }.lens-host .lens[data-ingest="running"] .lens-status-pill {
  color: var(--lens-accent);
  border-color: rgba(244, 245, 247, 0.4);
}.lens-host .lens-status-pill.is-pulse {
  animation: lens-counter-pulse 520ms var(--lens-ease);
}@keyframes lens-counter-pulse {
  0%   { color: var(--lens-accent); transform: scale(1.0); }
  40%  { color: #ffffff; transform: scale(1.14); }
  100% { color: var(--lens-ink-faint); transform: scale(1.0); }
}



/* ─── Typewriter caret ─── */.lens-host .lens-caret {
  display: inline-block;
  width: 7px;
  height: 1em;
  margin-left: 1px;
  vertical-align: -0.16em;
  background: var(--lens-accent);
  border-radius: 1px;
  animation: lens-caret-blink 1s steps(2) infinite;
}@keyframes lens-caret-blink {
  to { opacity: 0; }
}@media (prefers-reduced-motion: reduce) {.lens-host .lens-caret { animation: none; }}

/* ─── Send-button particle burst ─── */.lens-host .lens-particle {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lens-accent);
  box-shadow: 0 0 10px rgba(244, 245, 247, 0.8);
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  animation: lens-particle 760ms cubic-bezier(0.22, 0.86, 0.32, 1) forwards;
}@keyframes lens-particle {
  0%   { transform: translate(0, 0) scale(0.6);   opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translate(var(--dx, 0), var(--dy, -80px)) scale(0.4); opacity: 0; }
}@media (prefers-reduced-motion: reduce) {.lens-host .lens-particle { display: none; }}

/* Field: textarea + overlay + inline send */.lens-host .lens-field {
  position: relative;
  border: 1px solid var(--lens-stroke-strong);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.018);
  transition: border-color 180ms var(--lens-ease), background 180ms var(--lens-ease), box-shadow 180ms var(--lens-ease);
  overflow: hidden;
}

/* JSON mode: render as a small code editor — mono type, gutter, darker tint */.lens-host .lens[data-mode="json"] .lens-field {
  background:
    linear-gradient(90deg, rgba(244, 245, 247, 0.04) 0, rgba(244, 245, 247, 0.04) 34px, transparent 34px),
    #100d09;
  border-color: rgba(255, 255, 255, 0.09);
}.lens-host .lens[data-mode="json"] .lens-highlight, .lens-host .lens[data-mode="json"] .lens-textarea {
  font-family: var(--lens-mono);
  font-size: 13px;
  line-height: 1.65;
  letter-spacing: 0;
  padding: 14px 14px 40px 48px;
  tab-size: 2;
}.lens-host .lens[data-mode="json"] .lens-textarea {
  min-height: 240px;
  max-height: 360px;
  white-space: pre;
  overflow: auto;
  caret-color: var(--lens-accent);
  z-index: 1; /* sit above the highlight overlay for clean cursor + clicks */
}.lens-host .lens[data-mode="json"] .lens-highlight {
  counter-reset: lens-line;
  white-space: pre;
  overflow: hidden;
}.lens-host .lens[data-mode="json"] .lens-highlight .lens-row {
  display: block;
  counter-increment: lens-line;
  position: relative;
}.lens-host .lens[data-mode="json"] .lens-highlight .lens-row::before {
  content: counter(lens-line);
  position: absolute;
  left: -40px;
  width: 28px;
  text-align: right;
  color: rgba(255, 255, 255, 0.22);
  font-variant-numeric: tabular-nums;
  user-select: none;
  pointer-events: none;
}

/* JSON message body in the thread: monospace pre */.lens-host .lens-msg[data-role="user"] .lens-pre {
  font-family: var(--lens-mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--lens-ink-soft);
  background: #100d09;
  border: 1px solid var(--lens-stroke);
  border-radius: 9px;
  padding: 10px 12px;
  max-height: 220px;
  overflow: auto;
  white-space: pre;
}.lens-host .lens-field:focus-within {
  border-color: rgba(244, 245, 247, 0.55);
  background: rgba(244, 245, 247, 0.04);
  box-shadow: 0 0 0 3px rgba(244, 245, 247, 0.14);
}.lens-host .lens-highlight, .lens-host .lens-textarea {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.003em;
  /* extra bottom padding leaves room for the status pill (bottom-left) and send button (bottom-right) */
  padding: 14px 56px 40px 16px;
  margin: 0;
  border: 0;
  background: transparent;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  color: var(--lens-ink);
}.lens-host .lens-highlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: var(--lens-ink);
  overflow: hidden;
}.lens-host .lens-textarea {
  position: relative;
  display: block;
  width: 100%;
  min-height: 86px;
  max-height: 200px;
  overflow-y: auto;
  resize: none;
  outline: none;
  caret-color: var(--lens-accent);
  color: transparent;
  -webkit-text-fill-color: transparent;
  background: transparent;
}.lens-host .lens-textarea::selection {
  background: rgba(244, 245, 247, 0.3);
  color: transparent;
  -webkit-text-fill-color: transparent;
}.lens-host .lens-textarea::placeholder {
  color: rgba(244, 245, 255, 0.32);
  font-style: normal;
}.lens-host .lens-scanner {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(244, 245, 247, 0.16) 50%,
    transparent 100%);
  transform: translateX(-100%);
}.lens-host .lens[data-phase="masking"] .lens-scanner {
  opacity: 1;
  /* Longer cycle + fade in/out at the ends so the beam doesn't snap back
     to the left edge each loop. The old 900ms loop without opacity easing
     reads as flicker on slower phases like the PDF OCR round-trip. */
  animation: lens-scan 2200ms var(--lens-ease) infinite;
}@keyframes lens-scan {
  0%   { transform: translateX(-100%); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}



/* Inline send button — sits in the bottom-right of the textarea */.lens-host .lens-send {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #f4f5f7 0%, #c8ccd2 100%);
  color: #0b0d10;
  font-family: Inter, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 8px 22px -6px rgba(200, 204, 210, 0.55);
  transition: transform 180ms var(--lens-ease), box-shadow 180ms var(--lens-ease);
  z-index: 2;
}.lens-host .lens-send {
  animation: lens-send-breathe 3.4s ease-in-out infinite;
}@keyframes lens-send-breathe {
  0%, 100% {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.45) inset,
      0 8px 22px -6px rgba(200, 204, 210, 0.55),
      0 0 0 0 rgba(244, 245, 247, 0.0);
  }
  50% {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.45) inset,
      0 12px 28px -6px rgba(200, 204, 210, 0.7),
      0 0 22px 2px rgba(244, 245, 247, 0.25);
  }
}.lens-host .lens-send:hover {
  transform: translateY(-1px);
  animation: none;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 14px 32px -6px rgba(200, 204, 210, 0.8),
    0 0 28px 2px rgba(244, 245, 247, 0.4);
}.lens-host .lens-send:active { transform: translateY(0); }.lens-host .lens-send:focus-visible {
  outline: none;
  animation: none;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 0 0 3px rgba(244, 245, 247, 0.4);
}

/* Hide breathing during async phases — the spinner takes over */.lens-host .lens[data-phase="masking"]   .lens-send, .lens-host .lens[data-phase="calling"]   .lens-send, .lens-host .lens[data-phase="revealing"] .lens-send {
  animation: none;
}@media (prefers-reduced-motion: reduce) {.lens-host .lens-send { animation: none; }}.lens-host .lens-send-arrow { transition: transform 200ms var(--lens-ease); }.lens-host .lens-send:hover .lens-send-arrow { transform: translateX(1px); }.lens-host .lens-send-spinner {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.6px solid rgba(26, 20, 14, 0.25);
  border-top-color: rgba(26, 20, 14, 0.9);
  opacity: 0;
  animation: lens-spin 700ms linear infinite;
}@keyframes lens-spin { to { transform: rotate(360deg); } }.lens-host .lens[data-phase="masking"]   .lens-send, .lens-host .lens[data-phase="calling"]   .lens-send, .lens-host .lens[data-phase="revealing"] .lens-send {
  pointer-events: none;
  background: linear-gradient(180deg, rgba(245, 186, 132, 0.85), rgba(200, 204, 210, 0.85));
}.lens-host .lens[data-phase="calling"] .lens-send-text, .lens-host .lens[data-phase="masking"] .lens-send-text, .lens-host .lens[data-phase="revealing"] .lens-send-text { opacity: 0; }.lens-host .lens[data-phase="calling"] .lens-send-arrow, .lens-host .lens[data-phase="masking"] .lens-send-arrow, .lens-host .lens[data-phase="revealing"] .lens-send-arrow { opacity: 0; }.lens-host .lens[data-phase="calling"] .lens-send-spinner, .lens-host .lens[data-phase="masking"] .lens-send-spinner, .lens-host .lens[data-phase="revealing"] .lens-send-spinner { opacity: 1; }

/* PDF picker */.lens-host .lens-field-pdf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 8px 12px;
  border: 1px solid var(--lens-stroke-strong);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: rgba(255, 255, 255, 0.014);
}.lens-host .lens-field-pdf[hidden] { display: none; }

/* When the picker is visible, square off the field's top so they read as one panel */.lens-host .lens[data-mode="pdf"] .lens-field {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: 0;
}

/* Hide the welcoming chips when not in text mode — they're text-mode samples */.lens-host .lens:not([data-mode="text"]) .lens-suggest { display: none; }.lens-host .lens-pdf-btn {
  font-family: var(--lens-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--lens-ink);
  background: rgba(244, 245, 247, 0.14);
  border: 1px solid rgba(244, 245, 247, 0.35);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 180ms var(--lens-ease), border-color 180ms var(--lens-ease);
}.lens-host .lens-pdf-btn:hover {
  background: rgba(244, 245, 247, 0.22);
  border-color: rgba(244, 245, 247, 0.55);
}.lens-host .lens-pdf-btn.ghost {
  background: transparent;
  border-color: var(--lens-stroke-strong);
  color: var(--lens-ink-soft);
}.lens-host .lens-pdf-btn.ghost:hover {
  color: var(--lens-ink);
  border-color: rgba(244, 245, 247, 0.45);
}.lens-host #lensPdfFile {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}.lens-host .lens-pdf-status {
  font-family: var(--lens-mono);
  font-size: 11px;
  color: var(--lens-ink-faint);
  letter-spacing: 0.03em;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color 200ms var(--lens-ease);
}.lens-host .lens-pdf-status.is-loading {
  color: var(--lens-accent);
  font-weight: 500;
}.lens-host .lens-pdf-status.is-loading::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.6px solid currentColor;
  border-top-color: transparent;
  animation: lens-spin 700ms linear infinite;
}

/* Whole picker bar glows during loading so the eye lands there */.lens-host .lens.pdf-loading .lens-field-pdf {
  border-color: rgba(244, 245, 247, 0.55);
  background: rgba(244, 245, 247, 0.08);
  box-shadow: 0 0 28px -10px rgba(244, 245, 247, 0.5);
}@media (prefers-reduced-motion: reduce) {.lens-host .lens-pdf-status.is-loading::before { animation: none; }}

/* ─── PII tokens (inline pills) ─── */

/* Base token style — must be metrics-neutral for overlay alignment.
   Padding / margin / font-weight cannot change here, otherwise the visible
   text in the overlay drifts out of sync with the textarea's cursor. */.lens-host .lens-tok {
  display: inline;
  background: rgba(244, 245, 247, 0.16);
  color: #c9bbff;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(244, 245, 247, 0.22) inset;
  transition: background 320ms var(--lens-ease), color 320ms var(--lens-ease), box-shadow 320ms var(--lens-ease);
}

/* Message bubbles have no textarea behind them — give the pills proper chip styling there. */.lens-host .lens-msg-body .lens-tok {
  padding: 1px 7px;
  margin: 0 -1px;
  border-radius: 6px;
  font-weight: 500;
}

/* Pop animation ONLY for tokens that land in a message bubble (one-shot reveal).
   We deliberately do NOT animate overlay tokens because the overlay is rebuilt
   on every keystroke, which would re-trigger the animation and feel flickery. */.lens-host .lens-msg-body .lens-tok {
  animation: lens-tok-pop 380ms var(--lens-ease);
}@keyframes lens-tok-pop {
  0% {
    background: rgba(244, 245, 247, 0.42);
    box-shadow: 0 0 0 1px rgba(244, 245, 247, 0.6) inset, 0 0 14px rgba(244, 245, 247, 0.55);
    filter: brightness(1.3);
  }
  100% {
    filter: brightness(1);
  }
}@media (prefers-reduced-motion: reduce) {.lens-host .lens-msg-body .lens-tok { animation: none; }}.lens-host .lens-tok[data-kind="person"] { background: rgba(245, 186, 132, 0.18); color: #c8b8ff; box-shadow: 0 0 0 1px rgba(245, 186, 132, 0.24) inset; }.lens-host .lens-tok[data-kind="location"] { background: rgba(94, 234, 212, 0.14);  color: #6ee5c9; box-shadow: 0 0 0 1px rgba(94, 234, 212, 0.24) inset; }.lens-host .lens-tok[data-kind="date_time"] { background: rgba(251, 191, 36, 0.16);  color: #fbd05a; box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.24) inset; }.lens-host .lens-tok[data-kind="email_address"] { background: rgba(249, 168, 212, 0.14); color: #f7a4d5; box-shadow: 0 0 0 1px rgba(249, 168, 212, 0.24) inset; }.lens-host .lens-tok[data-kind="phone_number"] { background: rgba(251, 113, 133, 0.14); color: #fb8298; box-shadow: 0 0 0 1px rgba(251, 113, 133, 0.24) inset; }.lens-host .lens-tok[data-kind="organization"] { background: rgba(125, 211, 252, 0.16); color: #93d6fb; box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.24) inset; }.lens-host .lens-tok[data-kind="url"], .lens-host .lens-tok[data-kind="iban_code"], .lens-host .lens-tok[data-kind="credit_card"], .lens-host .lens-tok[data-kind="us_ssn"], .lens-host .lens-tok[data-kind="us_bank_number"], .lens-host .lens-tok[data-kind="ip_address"], .lens-host .lens-tok[data-kind="medical_license"], .lens-host .lens-tok[data-kind="us_passport"], .lens-host .lens-tok[data-kind="us_driver_license"], .lens-host .lens-tok[data-kind="nrp"] { background: rgba(244, 245, 247, 0.16); color: #c994fc; box-shadow: 0 0 0 1px rgba(244, 245, 247, 0.24) inset; }

/* ─── Responsive ─── */@media (max-width: 980px) {.lens-host .hero-row { grid-template-columns: 1fr; gap: 18px; }.lens-host .demo-aside { padding-top: 0; }.lens-host .lens { min-height: 520px; }}@media (max-width: 720px) {.lens-host .lens-empty-title { font-size: 19px; }.lens-host .lens-textarea { font-size: 14.5px; min-height: 74px; }.lens-host .lens-msg-body { font-size: 14.5px; padding: 12px 14px; }}