/* ============================================================================
   Feedzy.ai — landing (feedzy.ai)
   Style aligned 1:1 with the extension's SIDE PANEL (sidepanel/css/base.css):
   the same dark "premium glass" look — radial black → deep violet (#350136),
   frosted violet panels, white-on-dark, teal-cyan (#06b6d4/#0ea5b7) + violet
   (#8b5cf6) + pink (#ec4899) accents, the tri-colour gradient text, and the
   signature pulsing "AI orb" brand mark (see .mark below).
   Hand-written static CSS — no framework, no external font (fast + private).
   ============================================================================ */
:root {
  /* let height/grid transitions interpolate to & from the `auto` keyword
     (enables the smooth FAQ accordion below; ignored by older browsers) */
  interpolate-size: allow-keywords;

  /* Palette aligned 1:1 with the extension SIDE PANEL (sidepanel/css/base.css):
     teal-cyan accent #0ea5b7 / #06b6d4 + violet #8b5cf6 + pink #ec4899, and the
     signature tri-colour AI gradient (cyan → violet → pink). */
  --violet: #8b5cf6;
  --violet-2: #b794f4;
  --cyan: #06b6d4; /* side panel hero cyan */
  --cyan-2: #22d3ee; /* brighter cyan for links / hover */
  --pink: #ec4899;
  --indigo: #4f46e5;
  --danger: #ff453a; /* side panel error chip */

  /* Buttons / icon tiles — violet → cyan (the side panel's accent pair). */
  --grad: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);
  /* The side panel's pulsing "AI orb" fill (indigo → cyan → violet). */
  --grad-orb: linear-gradient(135deg, #4f46e5 0%, #06b6d4 50%, #8b5cf6 100%);
  /* Headline gradient text — the side panel's empty-state tagline tri-colour. */
  --grad-text: linear-gradient(120deg, #06b6d4 0%, #8b5cf6 50%, #ec4899 100%);

  --bg: #050308;
  --panel: rgba(25, 20, 35, 0.5); /* frosted violet card, like --bg-card */
  --panel-2: rgba(255, 255, 255, 0.04);
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);

  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.55);
  --radius: 14px; /* side panel --radius-md */
  --radius-sm: 8px; /* side panel --radius-sm */
  --maxw: 1120px;
  --glow: 0 24px 60px -18px rgba(139, 92, 246, 0.6);
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  background: var(--bg);
  color: var(--text);
  font:
    16px/1.6 'Inter',
    'SF Pro Text',
    'Segoe UI Variable',
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.01em;
  overflow-x: hidden;
}

/* Deep-violet aurora background (the Settings-window radial, extended) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(125% 125% at 50% 100%, #000000 40%, #350136 100%),
    radial-gradient(50% 40% at 12% 0%, rgba(139, 92, 246, 0.28), transparent 70%),
    radial-gradient(45% 35% at 100% 6%, rgba(6, 182, 212, 0.16), transparent 65%);
}

a {
  color: var(--cyan-2);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
img {
  max-width: 100%;
  display: block;
}
h1,
h2,
h3 {
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0;
}
::selection {
  background: rgba(139, 92, 246, 0.45);
}
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 22px;
}
.eyebrow {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--violet-2);
  margin-bottom: 14px;
}
.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.muted {
  color: var(--muted);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 22px;
  border-radius: 12px;
  font-weight: 650;
  font-size: 15px;
  cursor: pointer;
  border: 0;
  transition:
    transform 0.14s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}
.btn-primary {
  background: var(--grad);
  color: #fff;
  box-shadow: var(--glow);
}
.btn-primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.07);
  text-decoration: none;
}
.btn-ghost {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-strong);
  color: var(--text);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  text-decoration: none;
}
.btn svg {
  width: 18px;
  height: 18px;
}

/* ── Brand mark (gradient rounded square + white ✦, like the logo) ───────── */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--text);
}
.brand:hover {
  text-decoration: none;
}
/* The side panel's signature pulsing "AI orb": a circular violet/cyan glass
   sphere — double radial highlight (top-left white, bottom-right violet) over
   the indigo→cyan→violet fill, wrapped in a violet+cyan glow that breathes. */
.mark {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.6), transparent 38%),
    radial-gradient(circle at 72% 78%, rgba(139, 92, 246, 0.55), transparent 55%), var(--grad-orb);
  box-shadow:
    0 0 18px rgba(139, 92, 246, 0.5),
    0 0 34px rgba(6, 182, 212, 0.28),
    inset 0 0 12px rgba(255, 255, 255, 0.12),
    inset 0 -6px 14px rgba(139, 92, 246, 0.22);
  flex: 0 0 auto;
}
@media (prefers-reduced-motion: no-preference) {
  .mark {
    animation: orb-pulse 3s ease-in-out infinite;
  }
}
@keyframes orb-pulse {
  0%,
  100% {
    box-shadow:
      0 0 18px rgba(139, 92, 246, 0.5),
      0 0 34px rgba(6, 182, 212, 0.28),
      inset 0 0 12px rgba(255, 255, 255, 0.12),
      inset 0 -6px 14px rgba(139, 92, 246, 0.22);
  }
  50% {
    box-shadow:
      0 0 24px rgba(139, 92, 246, 0.78),
      0 0 46px rgba(6, 182, 212, 0.5),
      inset 0 0 16px rgba(255, 255, 255, 0.2),
      inset 0 -6px 16px rgba(139, 92, 246, 0.34);
  }
}
.mark::before {
  content: '✦';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 15px;
  text-shadow: 0 0 9px rgba(255, 255, 255, 0.6);
  z-index: 1;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(7, 6, 11, 0.6);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 66px;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 26px;
}
.site-nav a {
  color: var(--muted);
  font-weight: 600;
  font-size: 14.5px;
}
.site-nav a:hover {
  color: var(--text);
  text-decoration: none;
}
.header-cta {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── Section rhythm ──────────────────────────────────────────────────────── */
section {
  padding: 86px 0;
}
.section-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 46px;
}
.section-head h2 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 820;
}
.section-head p {
  color: var(--muted);
  font-size: 17px;
  margin: 14px 0 0;
}

/* ── Glass panel ─────────────────────────────────────────────────────────── */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow:
    0 30px 60px -30px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero {
  padding: clamp(56px, 8vw, 104px) 0 80px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.hero-copy {
  text-align: left;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.12);
  border: 1px solid rgba(139, 92, 246, 0.3);
  font-size: 13px;
  font-weight: 600;
  color: var(--violet-2);
  margin-bottom: 26px;
}
.hero h1 {
  font-size: clamp(34px, 4.6vw, 58px);
  font-weight: 850;
  max-width: 15ch;
  margin: 0;
}
.hero p.lead {
  font-size: clamp(17px, 2vw, 20px);
  color: var(--muted);
  max-width: 50ch;
  margin: 22px 0 0;
}
.hero-cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 34px;
}
.hero-copy .hero-cta {
  justify-content: flex-start;
}
.hero-note {
  margin-top: 18px;
  font-size: 13.5px;
  color: var(--muted);
}
.hero-note strong {
  color: var(--text);
}

/* logos / trust strip */
.trust {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  justify-content: center;
  align-items: center;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
}
.hero-copy .trust {
  justify-content: flex-start;
}
.trust .chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--border);
}
.trust .chip b {
  color: var(--text);
  font-weight: 700;
}
.trust .chip svg {
  width: 15px;
  height: 15px;
  color: var(--violet-2);
}

/* ── "Works with" strip (model-neutral wordmark row) ─────────────────────── */
.works-strip {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 880px;
  margin: 0 auto;
}
.works-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.works-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.works-label svg {
  width: 16px;
  height: 16px;
  color: var(--violet-2);
}
.works-label b {
  color: var(--text);
}
.works-group .trust {
  margin-top: 0;
}

/* ── Hero demo window (right column: feedback → prompt) ───────────────────── */
.hero-demo {
  position: relative;
}
.demo-win {
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
}
@media (prefers-reduced-motion: no-preference) {
  .demo-win {
    animation: floaty 6s ease-in-out infinite;
  }
}
@keyframes floaty {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}
/* The demo window is a faithful mock of the extension's SIDE PANEL: topbar,
   project/title fields, status & priority selects, the quick-tools rail, the
   feedback bubble with token counter, a sent conversation message, and the
   action bar — all rebuilt with self-contained .demo-* classes that mirror
   sidepanel/css/{session,editor,segments,segment-conversation}.css. */
.demo-win {
  font-size: 13px;
}

/* ── Topbar: search · columns · centred "Retour" pill · settings cog ──────── */
.demo-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
}
.demo-tb-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  padding: 5px;
  transition:
    color 0.12s,
    background 0.12s;
}
/* Hover = real-extension flat "action" style: accent colour + subtle bg,
   no border, no shadow (sidepanel/css/session.css topbar-col--right). */
.demo-tb-ico:hover {
  color: var(--cyan, #0ea5b7);
  background: var(--bg-card-hover, rgba(255, 255, 255, 0.08));
}
.demo-tb-ico.is-active {
  color: var(--cyan, #0ea5b7);
  background: var(--bg-card-hover, rgba(255, 255, 255, 0.08));
}
.demo-tb-ico svg {
  width: 16px;
  height: 16px;
}
.demo-back {
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.demo-back svg {
  width: 14px;
  height: 14px;
}

/* ── Scroll body ──────────────────────────────────────────────────────────── */
.demo-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Project / title fields ───────────────────────────────────────────────── */
.demo-field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 14px;
  background: var(--panel-2);
  border: 1px solid var(--border);
}
.demo-field-ico {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--muted);
}
.demo-field-ico svg {
  width: 16px;
  height: 16px;
}
.demo-field-ph {
  flex: 1;
  min-width: 0;
  color: var(--muted);
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.demo-field-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
}
.demo-field-btn:hover {
  color: var(--text);
  border-color: var(--border-strong);
}
.demo-field-btn svg {
  width: 15px;
  height: 15px;
}
.demo-field-btn--add {
  background: var(--cyan);
  border-color: transparent;
  color: #fff;
}
.demo-swatch {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #6c47ff;
  cursor: pointer;
}
.demo-swatch:hover {
  border-color: var(--border-strong);
}
.demo-cog-btn.is-done {
  color: var(--cyan, #0ea5b7);
  background: var(--bg-card-hover, rgba(255, 255, 255, 0.08));
}

/* ── Status + priority dropdowns ──────────────────────────────────────────── */
.demo-selects {
  display: flex;
  gap: 8px;
}
.demo-select {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
}
.demo-select .chev {
  margin-left: auto;
  display: inline-flex;
  color: var(--muted);
}
.demo-select .chev svg {
  width: 14px;
  height: 14px;
}
.demo-sel-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--muted);
}
.demo-sel-flag {
  display: inline-flex;
  color: var(--danger);
}
.demo-sel-flag svg {
  width: 14px;
  height: 14px;
}

/* ── Domain chip ──────────────────────────────────────────────────────────── */
.demo-domain {
  display: flex;
}
.demo-domain-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}
.demo-domain-chip svg {
  width: 13px;
  height: 13px;
  opacity: 0.7;
}

/* ── Card holding the quick-tools rail + compose ──────────────────────────── */
.demo-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.05), rgba(14, 165, 183, 0.05));
  border: 1px solid var(--border);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.5),
    0 0 50px rgba(139, 92, 246, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Quick-tools rail — three FUNCTIONAL tools (Voice / Picker / Screenshot),
   colour-coded like the side panel, wired up in demo.js. */
/* Demo mode toggle — Solo (compose card only) / Équipe (+ comment thread). */
.demo-modes {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
}
.demo-mode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  transition:
    color 0.14s ease,
    background 0.14s ease;
}
.demo-mode svg {
  width: 14px;
  height: 14px;
}
.demo-mode:hover {
  color: var(--text);
}
.demo-mode.is-active {
  color: #fff;
  background: var(--grad);
}
.demo-tools {
  display: flex;
  gap: 6px;
}
.demo-tbtn {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition:
    transform 0.12s ease,
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease,
    color 0.15s ease;
}
.demo-tbtn span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.demo-tbtn svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
/* Corner toggle badges (✨ AI on mic, 📷 on picker) — signature of the extension. */
.demo-tbtn-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid transparent;
}
.demo-tbtn-badge svg {
  width: 9px;
  height: 9px;
}
.demo-tbtn-badge--ai {
  color: var(--violet);
  background: rgba(139, 92, 246, 0.18);
  border-color: rgba(139, 92, 246, 0.45);
}
.demo-tbtn-badge--shot {
  color: var(--cyan);
  background: rgba(14, 165, 183, 0.18);
  border-color: rgba(14, 165, 183, 0.45);
}
.demo-tbtn:hover {
  transform: translateY(-1px);
}
.demo-tbtn:active {
  transform: translateY(0) scale(0.98);
}
.demo-tbtn--mic {
  color: #10b981;
}
.demo-tbtn--mic:hover {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.1);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.2);
}
.demo-tbtn--pick {
  color: var(--cyan-2);
}
.demo-tbtn--pick:hover {
  border-color: var(--cyan);
  background: rgba(6, 182, 212, 0.1);
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.2);
}
.demo-tbtn--shot {
  color: var(--violet);
}
.demo-tbtn--shot:hover {
  border-color: var(--violet);
  background: rgba(139, 92, 246, 0.12);
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.22);
}
/* Active states driven by demo.js */
.demo-tbtn--pick.is-active {
  border-color: var(--cyan);
  background: rgba(6, 182, 212, 0.16);
  box-shadow:
    0 0 0 1px var(--cyan),
    0 0 14px rgba(6, 182, 212, 0.4);
}
.demo-tbtn--mic.is-rec {
  color: #fff;
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.9);
  animation: demo-rec 1.2s ease-in-out infinite;
}
@keyframes demo-rec {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
  }
}
.demo-tbtn--shot.is-busy {
  opacity: 0.7;
}

/* "Autres fonctionnalités" — a real anchor to the features section. */
/* "Autres fonctionnalités" = the 4th tool button (inherits .demo-tbtn shape,
   violet accent to mark it as the link to the features section). */
.demo-tmore {
  text-decoration: none;
  border-color: rgba(139, 92, 246, 0.4);
  background: linear-gradient(120deg, rgba(139, 92, 246, 0.16), rgba(6, 182, 212, 0.12));
  color: var(--violet-2);
}
.demo-tmore:hover {
  border-color: var(--violet);
  text-decoration: none;
}
.demo-tmore svg {
  color: var(--violet-2);
}

/* Screenshot toggle — open state (subline visible) */
.demo-tbtn--shot.is-open {
  border-color: var(--violet);
  color: var(--violet-2);
  background: rgba(139, 92, 246, 0.16);
  box-shadow: 0 0 0 1px var(--violet);
}

/* Capture subline — the radio-style mode picker, mirroring the extension's
   .quick-tools-subline / .subline-btn (Visible · Sélection · Élément · Page
   entière · URL · Couleur). */
.demo-subline {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border);
  animation: demo-subline 0.18s ease-out;
}
.demo-subline[hidden] {
  display: none;
}
@keyframes demo-subline {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.demo-subbtn {
  flex: 1 1 0;
  min-width: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 8px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  color: var(--text);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease;
}
.demo-subbtn svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: var(--violet);
}
.demo-subbtn:hover {
  border-color: var(--violet);
  color: var(--violet-2);
  background: rgba(139, 92, 246, 0.1);
}
.demo-subbtn--url svg {
  color: var(--cyan);
}
.demo-subbtn--url:hover {
  border-color: var(--cyan);
  color: var(--cyan-2);
  background: rgba(6, 182, 212, 0.1);
}
.demo-subbtn--color svg {
  color: #d946ef;
}
.demo-subbtn--color:hover {
  border-color: #d946ef;
  color: #ef9bff;
  background: rgba(217, 70, 239, 0.1);
}

/* Feedback bubble row: ref-chips + text + A↹ */
.demo-feedback {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border);
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.demo-feedback:focus-within {
  border-color: var(--cyan);
  box-shadow: 0 0 12px rgba(14, 165, 183, 0.3);
}
.demo-feedback-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
}
.demo-feedback-chips:empty {
  display: none;
}
.demo-refchip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: middle; /* sit on the text baseline when inline in the editor */
  margin: 0 2px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(14, 165, 183, 0.14);
  border: 1px solid rgba(14, 165, 183, 0.4);
  color: #0ea5b7;
  font-family: 'Inter', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  user-select: none;
}
/* Type variants — match the side panel's ref-chip families */
.demo-refchip--url {
  background: rgba(14, 165, 183, 0.14);
  border-color: rgba(14, 165, 183, 0.4);
  color: #0ea5b7;
}
.demo-refchip--color {
  background: rgba(217, 70, 239, 0.14);
  border-color: rgba(217, 70, 239, 0.4);
  color: #ef9bff;
}
.demo-refchip--shot {
  background: rgba(139, 92, 246, 0.14);
  border-color: rgba(139, 92, 246, 0.4);
  color: #c4b5fd;
}
.demo-refchip-swatch {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.demo-refchip-new {
  animation: demo-pop 0.3s ease-out;
}
.demo-refchip svg {
  width: 11px;
  height: 11px;
}
/* Closed chip = pill; clicking the head morphs it IN PLACE into a full-width
   detail card — like the side panel's reference chips (no box below). */
.demo-refchip-head {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.demo-refchip-ic {
  display: inline-flex;
}
.demo-refchip:not(.expanded) .demo-refchip-kind {
  display: none;
}
.demo-refchip-details {
  display: none;
}
.demo-refchip-toggle {
  display: inline-flex;
  align-items: center;
  margin-left: 1px;
  transition: transform 0.16s ease;
}
.demo-refchip:not(.expanded) .demo-refchip-toggle {
  display: none;
}
.demo-refchip.expanded .demo-refchip-toggle {
  transform: rotate(180deg);
}
.demo-refchip-toggle svg {
  width: 12px;
  height: 12px;
  opacity: 0.75;
}
.demo-refchip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin: 0 -3px 0 1px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.6;
  transition:
    opacity 0.12s ease,
    background 0.12s ease;
}
.demo-refchip-x svg {
  width: 12px;
  height: 12px;
}
.demo-refchip-x:hover {
  opacity: 1;
  color: #ff8a8a;
  background: rgba(255, 90, 90, 0.22);
}
.demo-refchip.expanded {
  display: block;
  width: 100%;
  margin: 6px 0;
  padding: 9px 11px;
  white-space: normal;
  vertical-align: top;
  border-radius: 12px;
}
.demo-refchip.expanded .demo-refchip-head {
  cursor: pointer;
}
.demo-refchip.expanded .demo-refchip-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-weight: 400;
  text-align: left;
  user-select: text;
}
.demo-refchip-code code {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text);
  background: rgba(0, 0, 0, 0.28);
  padding: 6px 8px;
  border-radius: 6px;
}
.demo-refchip-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
}
.demo-refchip-mrow {
  word-break: break-word;
}
.demo-refchip-meta .t-key {
  display: inline-block;
  min-width: 64px;
  margin-right: 6px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  opacity: 0.85;
}
.demo-refchip-wcag {
  display: inline-block;
  margin-left: 4px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.14);
  color: inherit;
}
.demo-refchip-swatch--big {
  display: block;
  width: 100%;
  height: 40px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.demo-refchip-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 76px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0 8px, transparent 8px 16px),
    rgba(139, 92, 246, 0.16);
  color: rgba(255, 255, 255, 0.55);
}
.demo-refchip-thumb svg {
  width: 22px;
  height: 22px;
}
.demo-refchip-shotimg {
  display: block;
  width: 100%;
  max-height: 200px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #000;
}
/* Persistent banner while the picker is active (the highlight can cover the
   picker button, so make « Échap to stop » impossible to miss). */
.demo-pick-banner {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2147483600;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 92vw;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(12, 12, 18, 0.94);
  border: 1px solid var(--cyan);
  box-shadow:
    0 10px 34px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(6, 182, 212, 0.35);
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
  animation: demo-pick-banner-in 0.18s ease-out;
}
.demo-pick-banner-hint {
  color: var(--muted);
  font-weight: 500;
}
.demo-pick-banner kbd {
  display: inline-block;
  padding: 1px 7px;
  margin: 0 3px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-bottom-width: 2px;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}
@keyframes demo-pick-banner-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .demo-pick-banner {
    animation: none;
  }
}
/* Solo / Équipe toggle lifted to the top of .hero-demo — centered above the panel. */
.hero-demo > .demo-modes {
  display: flex;
  width: fit-content;
  margin: 0 auto 12px;
  align-self: center;
}
/* contenteditable rich compose zone — text + inline chips, grows with content */
.demo-feedback-text {
  width: 100%;
  min-height: 110px; /* ~5 lines */
  color: var(--text);
  font: inherit;
  font-size: 13px;
  line-height: 1.5; /* match the extension editor */
  outline: none;
  white-space: pre-wrap;
  word-break: break-word;
  cursor: text;
}
.demo-feedback-text.is-empty::before {
  content: attr(data-placeholder);
  color: var(--muted);
  font-style: italic; /* italic placeholder, like the extension */
  pointer-events: none;
}
.demo-feedback-text.is-empty:focus::before {
  display: none; /* the placeholder clears the moment you focus, before typing */
}

/* Meta line: selector + token counter */
.demo-metaline {
  display: flex;
  align-items: center;
  gap: 8px;
}
.demo-meta {
  flex: 1;
  min-width: 0;
  color: var(--muted);
  font-family: 'Inter', ui-monospace, monospace;
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.demo-tok {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: 'Inter', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
}

/* ── Mini conversation: a "mine" feedback bubble (right, blue) + the IA
   reply (left, violet) — echoing the side panel's origin-coloured bubbles. */
/* Solo mode shows only the compose card; Équipe mode adds the comment thread. */
.demo-win.is-mode-solo .demo-convo {
  display: none;
}
.demo-convo {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.demo-msg {
  position: relative;
  max-width: 86%;
  padding: 8px 12px 9px;
  color: #fff;
}
.demo-msg--mine {
  align-self: flex-end;
  margin-right: 4px;
  border-radius: 13px 13px 2px 13px;
  background: linear-gradient(135deg, #1e40af 0%, #3b3bd6 100%);
  box-shadow: 0 6px 18px -8px rgba(30, 64, 175, 0.8);
}
.demo-msg--ai {
  align-self: flex-start;
  margin-left: 4px;
  border-radius: 13px 13px 13px 2px;
  background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);
  box-shadow: 0 6px 18px -8px rgba(139, 92, 246, 0.85);
}
.demo-msg-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}
.demo-msg-id {
  color: #7fe3f0;
  font-family: 'Inter', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 700;
}
.demo-msg-id--ai {
  color: #ede9fe;
}
.demo-msg-time {
  color: rgba(255, 255, 255, 0.6);
  font-size: 10px;
}
.demo-msg-body {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.demo-msg .demo-refchip {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.25);
  color: #aef3fb;
}
.demo-msg-avatar {
  position: absolute;
  bottom: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #11111a;
  border: 1.5px solid var(--border-strong);
  color: #fff;
  font-size: 8.5px;
  font-weight: 800;
}
.demo-msg--mine .demo-msg-avatar {
  right: -6px;
}
.demo-msg--ai .demo-msg-avatar {
  left: -6px;
}
.demo-msg-avatar--ai {
  background: linear-gradient(135deg, #06b6d4, #8b5cf6);
  border-color: transparent;
}

/* Captured screenshots (real captures via demo.js, persisted to localStorage) */
.demo-shots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.demo-shots[hidden] {
  display: none;
}
.demo-shot {
  position: relative;
  display: inline-flex;
}
.demo-shot img {
  display: block;
  width: 66px;
  height: 42px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}
.demo-shot-x {
  position: absolute;
  top: -6px;
  right: -6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--danger);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.demo-shot-new {
  animation: demo-pop 0.3s ease-out;
}
@keyframes demo-pop {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ── Action bar ───────────────────────────────────────────────────────────── */
.demo-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.demo-actions .demo-act {
  flex: 1 1 0;
  white-space: nowrap;
}
.demo-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}
.demo-act svg {
  width: 14px;
  height: 14px;
}
.demo-act--send {
  border-color: transparent;
  color: #fff;
  background: var(--grad);
  background-size: 220% 220%;
  box-shadow: 0 4px 16px -5px rgba(79, 70, 229, 0.7);
}
.demo-act--comment {
  border-color: rgba(139, 92, 246, 0.5);
  color: var(--violet-2);
  background: rgba(139, 92, 246, 0.12);
}
/* The send action is a real <button>; the others stay decorative spans. */
button.demo-act {
  font-family: inherit;
  cursor: pointer;
}

/* ── Generated-prompt panel — revealed by « Envoyer à l'IA ». NO AI is called:
   it shows the clean prompt Feedzy.ai builds, ready to paste. ──────────── */
.demo-prompt {
  margin-top: 10px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: rgba(6, 182, 212, 0.06);
  padding: 12px 13px;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.28s ease,
    transform 0.28s ease;
}
.demo-prompt.in {
  opacity: 1;
  transform: none;
}
.demo-prompt-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  color: #22d3ee;
  margin-bottom: 8px;
}
.demo-prompt-spark {
  color: var(--violet-2);
  text-shadow: 0 0 8px rgba(139, 92, 246, 0.6);
}
.demo-prompt-pre {
  margin: 0;
  padding: 10px 11px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow-x: auto;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}
.demo-prompt-foot {
  display: flex;
  margin-top: 9px;
}
.demo-prompt-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  color: #04222a;
  background: linear-gradient(120deg, #06b6d4 0%, #14c8b8 60%, #06b6d4 100%);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.demo-prompt-copy svg {
  width: 13px;
  height: 13px;
}
.demo-prompt-note {
  margin: 9px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
}
@media (prefers-reduced-motion: reduce) {
  .demo-prompt {
    transition: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .demo-act--send {
    animation: ai-gradient 6s ease-in-out infinite;
  }
}
@keyframes ai-gradient {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.demo-caption {
  text-align: center;
  font-size: 12.5px;
  color: var(--muted);
  margin: 14px 0 0;
}

/* ── Interactive demo overlays (driven by demo.js) ───────────────────────────
   The Picker highlight, the Screenshot flash and the toast are appended to
   <body> so they sit above everything. Zero-dependency, all CSS here. */
.demo-pick-hl {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483000;
  pointer-events: none;
  border: 2px solid var(--cyan);
  background: rgba(6, 182, 212, 0.12);
  border-radius: 4px;
  box-shadow:
    0 0 0 2px rgba(6, 182, 212, 0.25),
    0 8px 24px rgba(0, 0, 0, 0.4);
  transition:
    transform 0.05s linear,
    width 0.05s linear,
    height 0.05s linear;
}
body.demo-picking,
body.demo-picking * {
  cursor: crosshair !important;
}
/* Rectangular selection capture (the "Sélection" mode) */
.demo-sel-catch {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  cursor: crosshair;
}
.demo-sel-rect {
  position: fixed;
  z-index: 2147483001;
  pointer-events: none;
  border: 2px solid var(--cyan);
  background: rgba(6, 182, 212, 0.1);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.32);
}
/* Floating selector label that follows the picked element (like the extension). */
.demo-pick-tag {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483001;
  pointer-events: none;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--cyan);
  color: #04222a;
  font:
    700 11px/1.4 'Inter',
    ui-monospace,
    monospace;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}
.demo-flash {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  background: #fff;
  opacity: 0;
}
.demo-flash.go {
  animation: demo-flash 0.5s ease-out forwards;
}
@keyframes demo-flash {
  0% {
    opacity: 0;
  }
  12% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
  }
}
.demo-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 2147483000;
  transform: translate(-50%, 12px);
  max-width: 90vw;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(20, 16, 32, 0.96);
  border: 1px solid var(--border-strong);
  box-shadow: 0 18px 44px -14px rgba(0, 0, 0, 0.8);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
}
.demo-toast.in {
  opacity: 1;
  transform: translate(-50%, 0);
}
.demo-toast--ok {
  border-color: rgba(6, 182, 212, 0.5);
}

/* ── Steps ───────────────────────────────────────────────────────────────── */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.step {
  position: relative;
  padding: 30px 26px;
  overflow: hidden;
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}
/* gradient hairline that lights up on hover */
.step::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--grad);
  opacity: 0;
  transition: opacity 0.55s ease;
}
.step:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow:
    0 40px 70px -32px rgba(139, 92, 246, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.step:hover::before {
  opacity: 1;
}
.step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.step .ico {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--grad);
  color: #fff;
  box-shadow:
    0 12px 26px -10px rgba(139, 92, 246, 0.75),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.step .ico svg {
  width: 23px;
  height: 23px;
}
/* big ghosted step index (01 / 02 / 03), outline only */
.step .idx {
  font-size: 44px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--border-strong);
}
.step h3 {
  font-size: 20px;
  margin-bottom: 8px;
}
.step p {
  color: var(--muted);
  font-size: 15px;
  margin: 0;
}

/* ── Features grid ───────────────────────────────────────────────────────── */
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.feature {
  padding: 24px;
}
.feature .ico {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: rgba(139, 92, 246, 0.14);
  border: 1px solid rgba(139, 92, 246, 0.28);
  color: var(--violet-2);
  margin-bottom: 15px;
}
.feature .ico svg {
  width: 21px;
  height: 21px;
}
.feature h3 {
  font-size: 17px;
  margin-bottom: 7px;
}
.feature p {
  color: var(--muted);
  font-size: 14.5px;
  margin: 0;
}

/* ── Security ────────────────────────────────────────────────────────────── */
.security {
  position: relative;
}
.sec-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 24px;
  align-items: center;
}
.sec-list {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sec-list li {
  display: flex;
  gap: 13px;
  align-items: flex-start;
}
.sec-list .dot {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(34, 211, 238, 0.12);
  border: 1px solid rgba(34, 211, 238, 0.3);
  color: var(--cyan);
  display: grid;
  place-items: center;
  font-size: 14px;
}
.sec-list .dot svg {
  width: 15px;
  height: 15px;
}
.sec-list strong {
  display: block;
}
.sec-list .sec-desc {
  display: block;
  color: var(--muted);
  font-size: 14.5px;
}
.sec-card {
  padding: 30px;
  text-align: center;
}
.sec-card .big {
  font-size: clamp(40px, 6vw, 58px);
  font-weight: 850;
}
.sec-card .cap {
  color: var(--muted);
  margin-top: 6px;
}

/* ── Comparison table (Free vs Paid) with popovers ───────────────────────── */
/* No overflow clip here: it would also clip the upward-opening .tip popovers
   (overflow-x:auto forces overflow-y:auto per spec). The table fits within the
   container on desktop; on mobile it wraps (min-width dropped in the media query). */
.cmp-wrap {
  border-radius: var(--radius);
  overflow: visible;
}
table.cmp {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14.5px;
}
table.cmp tbody tr:last-child td {
  border-bottom: none;
}
table.cmp th,
table.cmp td {
  padding: 13px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
table.cmp thead th {
  font-weight: 700;
  font-size: 14px;
}
table.cmp th.plan,
table.cmp td.plan {
  width: 130px;
  text-align: center;
}
table.cmp th.paid,
table.cmp td.paid {
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.1), rgba(34, 211, 238, 0.05));
}
table.cmp thead th.paid {
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.2), rgba(34, 211, 238, 0.1));
}
.paid-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.paid-label::before {
  content: '✦';
  color: var(--violet-2);
}
tr.grp td {
  background: rgba(255, 255, 255, 0.03);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}
table.cmp tbody tr:not(.grp):hover td {
  background: rgba(255, 255, 255, 0.03);
}
.yes {
  color: var(--cyan);
  font-weight: 800;
}
.yes.p {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.no {
  color: #8e89ad; /* WCAG: ~4.6:1 on the panel — the only "not in Free" signal */
}
.note {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

/* Pure-CSS popover (hover + keyboard focus + tap), no JS. The trigger is a real
   <button> (focusable, tappable, announced) — reset its native chrome here. */
.info {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: help;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
}
.info > .lbl {
  border-bottom: 1px dotted var(--border-strong);
}
.info > .q {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}
.info:hover > .q,
.info:focus-visible > .q {
  color: #fff;
  border-color: transparent;
  background: var(--grad);
}
.tip {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 0;
  z-index: 30;
  width: max-content;
  max-width: 300px;
  padding: 11px 13px;
  border-radius: 12px;
  background: rgba(20, 16, 32, 0.98);
  border: 1px solid var(--border-strong);
  box-shadow:
    0 22px 50px -16px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(139, 92, 246, 0.2);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  opacity: 0;
  transform: translateY(5px) scale(0.97);
  transform-origin: bottom left;
  pointer-events: none;
  transition:
    opacity 0.16s ease,
    transform 0.16s ease;
}
.tip .tech {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--cyan-2);
}
.info:hover .tip,
.info:focus-within .tip {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ── Pricing ─────────────────────────────────────────────────────────────── */
.pricing {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 760px;
  margin: 0 auto;
}
.price {
  padding: 32px;
  display: flex;
  flex-direction: column;
}
.price.featured {
  border-color: rgba(139, 92, 246, 0.5);
  box-shadow:
    0 30px 70px -30px rgba(139, 92, 246, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.price .tier {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--violet-2);
}
.price .amount {
  font-size: 44px;
  font-weight: 850;
  margin: 10px 0 2px;
}
.price .amount small {
  font-size: 16px;
  font-weight: 600;
  color: var(--muted);
}
.price ul {
  list-style: none;
  margin: 20px 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.price li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14.5px;
  color: var(--muted);
}
.price li::before {
  content: '✓';
  color: var(--cyan);
  font-weight: 800;
  flex: 0 0 auto;
}
.price li strong {
  color: var(--text);
  font-weight: 600;
}
.price .btn {
  margin-top: auto;
}

/* ── Per-seat calculator (paid card) ─────────────────────────────────────── */
.seat-calc {
  margin: 10px 0 18px;
}
.seat-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}
.seat-btn {
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.16s ease;
}
.seat-btn:hover {
  background: rgba(139, 92, 246, 0.2);
}
.seat-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.seat-input {
  width: 56px;
  height: 42px;
  border: 0;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  text-align: center;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  -moz-appearance: textfield;
  appearance: textfield;
}
.seat-input::-webkit-outer-spin-button,
.seat-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.seat-unit {
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 600;
}
.seat-calc .amount {
  margin: 0;
}
.seat-detail {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 2px 0 0;
  font-size: 14.5px;
}
.save {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(34, 211, 238, 0.14);
  border: 1px solid rgba(34, 211, 238, 0.34);
  color: var(--cyan);
  font-size: 12px;
  font-weight: 800;
}
.seat-hint {
  font-size: 13px;
  margin: 14px 0 0;
}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq details {
  padding: 6px 20px;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 0;
  font-weight: 650;
  font-size: 16.5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '+';
  color: var(--violet-2);
  font-size: 22px;
  font-weight: 400;
  transition: transform 0.2s ease;
}
.faq details[open] summary::after {
  transform: rotate(45deg);
}
.faq details p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}
/* Smooth accordion: animate the answer's height 0 → auto on open/close.
   Pure CSS via ::details-content (the wrapper around everything but <summary>);
   `content-visibility allow-discrete` keeps it keyboard- & SEO-accessible while
   fading. Browsers without ::details-content just open instantly — no regression.
   Guarded so prefers-reduced-motion falls back to the native instant toggle. */
@media (prefers-reduced-motion: no-preference) {
  .faq details::details-content {
    height: 0;
    /* `hidden` (not `clip`) establishes a BFC so the answer's bottom margin is
       contained — otherwise it escapes the animated box and snaps in at the end. */
    overflow: hidden;
    opacity: 0;
    transition:
      height 0.32s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.3s ease,
      content-visibility 0.32s allow-discrete;
  }
  .faq details[open]::details-content {
    height: auto;
    opacity: 1;
  }
}

/* ── Final CTA ───────────────────────────────────────────────────────────── */
.cta {
  text-align: center;
}
.cta .panel {
  padding: clamp(40px, 7vw, 72px) 28px;
}
.cta h2 {
  font-size: clamp(28px, 4.4vw, 44px);
  font-weight: 840;
  max-width: 18ch;
  margin: 0 auto;
}
.cta p {
  color: var(--muted);
  font-size: 17px;
  max-width: 52ch;
  margin: 16px auto 0;
}
.cta .hero-cta {
  margin-top: 30px;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 44px 0;
  color: var(--muted);
  font-size: 14px;
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  align-items: center;
  justify-content: space-between;
}
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.site-footer nav a {
  color: var(--muted);
  font-weight: 600;
}
.site-footer nav a:hover {
  color: var(--text);
  text-decoration: none;
}

/* ── Language switcher (footer) ──────────────────────────────────────────── */
.lang-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.lang-switch a {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 5px 6px;
  border-radius: 8px;
  border: 1px solid transparent;
  transition:
    background 0.16s ease,
    transform 0.16s ease;
}
.lang-switch a:hover {
  background: rgba(255, 255, 255, 0.06);
  text-decoration: none;
  transform: translateY(-1px);
}
.lang-switch .flag {
  height: 15px;
  width: auto;
  display: block;
  border-radius: 2px;
  /* hairline edge so the white bands of FR/IT/NL read on the dark footer */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.lang-switch a[aria-current='true'] {
  background: var(--grad-soft, rgba(139, 92, 246, 0.18));
  border-color: rgba(139, 92, 246, 0.4);
}
.lang-switch a[aria-current='true'] .flag {
  box-shadow: 0 0 0 1.5px var(--violet);
}
/* hover/focus tooltip → the country name */
.lang-switch a::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  z-index: 30;
  white-space: nowrap;
  padding: 5px 9px;
  border-radius: 8px;
  background: rgba(20, 16, 32, 0.98);
  border: 1px solid var(--border-strong);
  box-shadow: 0 14px 32px -12px rgba(0, 0, 0, 0.85);
  color: var(--text);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0;
  opacity: 0;
  transform: translateX(-50%) translateY(4px);
  transform-origin: bottom center;
  pointer-events: none;
  transition:
    opacity 0.16s ease,
    transform 0.16s ease;
}
.lang-switch a:hover::after,
.lang-switch a:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Scroll reveal (progressive enhancement — see reveal.js) ─────────────── */
/* The hidden start-state applies ONLY once reveal.js has added .reveal-ready to
   <html> (before first paint). With JS off — or prefers-reduced-motion — the
   class is never set, so every [data-reveal] element renders fully visible. */
.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.reveal-ready [data-reveal].in {
  opacity: 1;
  transform: none;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .steps,
  .features {
    grid-template-columns: 1fr 1fr;
  }
  .sec-grid {
    grid-template-columns: 1fr;
  }
  /* hero: stack the product window under the copy and re-center */
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .hero-copy {
    text-align: center;
  }
  .hero-copy h1 {
    margin: 0 auto;
  }
  .hero-copy p.lead {
    margin: 22px auto 0;
  }
  .hero-copy .hero-cta,
  .hero-copy .trust {
    justify-content: center;
  }
  .hero-demo {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
  }
}
@media (max-width: 720px) {
  section {
    padding: 64px 0;
  }
  .site-nav {
    display: none;
  }
  .steps,
  .features,
  .pricing {
    grid-template-columns: 1fr;
  }
  table.cmp {
    min-width: 0;
    font-size: 13px;
  }
  table.cmp th,
  table.cmp td {
    padding: 10px 8px;
  }
  .tip {
    max-width: 220px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  .btn,
  .tip {
    transition: none !important;
  }
  /* Safety net: never leave revealed content hidden if motion is reduced. */
  .reveal-ready [data-reveal] {
    opacity: 1;
    transform: none;
  }
  .demo-win,
  .demo-act--send,
  .demo-tbtn--mic.is-rec {
    animation: none !important;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   Slide-in side-panel demo (behaves like the extension) + hero launcher
   ─────────────────────────────────────────────────────────────────────────── */
.hero-launch {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-launch-card {
  width: 100%;
  max-width: 420px;
  padding: 34px 30px;
  border-radius: 18px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(139, 92, 246, 0.18), transparent 70%), rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-strong);
  box-shadow: 0 26px 64px -30px rgba(0, 0, 0, 0.75);
  text-align: center;
}
.hero-launch-spark {
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--grad);
  color: #fff;
  margin-bottom: 18px;
}
.hero-launch-spark svg {
  width: 24px;
  height: 24px;
}
.hero-launch-title {
  font-size: 23px;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 9px;
}
.hero-launch-sub {
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 22px;
}
.hero-launch-btn {
  width: 100%;
  justify-content: center;
  gap: 8px;
}
.hero-launch-btn svg {
  width: 16px;
  height: 16px;
}
.hero-launch-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 15px;
  font-size: 12px;
  color: var(--muted);
  opacity: 0.85;
}
.hero-launch-hint svg {
  width: 12px;
  height: 12px;
}

.demo-scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(6, 6, 12, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.demo-scrim.is-open {
  opacity: 1;
  pointer-events: auto;
}
body.demo-picking .demo-scrim {
  opacity: 0;
  pointer-events: none;
}

.demo-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  width: min(440px, 100vw);
  height: 100vh;
  height: 100dvh;
  background: radial-gradient(125% 125% at 50% 100%, #000000 40%, #350136 100%);
  border-left: 1px solid var(--border-strong);
  box-shadow: -30px 0 80px -40px rgba(0, 0, 0, 0.9);
  transform: translateX(100%);
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.demo-panel.is-open {
  transform: translateX(0);
}

.demo-panel-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}
.demo-panel-brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.demo-panel-brand svg {
  flex: 0 0 auto;
}
.demo-panel-brand b {
  white-space: nowrap;
}
.demo-panel-bar .demo-modes {
  margin: 0 auto;
}
.demo-panel-close {
  flex: 0 0 auto;
}
.demo-panel-brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  color: var(--text);
}
.demo-panel-brand svg {
  width: 16px;
  height: 16px;
  color: var(--cyan-2, #2fd4e8);
}
.demo-panel-tag {
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.18);
  border: 1px solid rgba(139, 92, 246, 0.35);
  color: var(--violet-2, #c4b5fd);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.demo-panel-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition:
    background 0.12s,
    color 0.12s;
}
.demo-panel-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}
.demo-panel-close svg {
  width: 18px;
  height: 18px;
}

.demo-panel-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 10px 0;
  border-bottom: 1px solid var(--border);
}
.demo-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 8px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition:
    color 0.14s,
    border-color 0.14s;
}
.demo-tab:hover {
  color: var(--text);
}
.demo-tab.is-active {
  color: var(--text);
  border-bottom-color: var(--cyan, #06b6d4);
}
.demo-tab-count {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--grad);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.demo-panel-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 0px;
}
.demo-panel-scroll [data-demo-pane='archive'][hidden] {
  display: none;
}
/* Hide scrollbars everywhere inside the fake, like the real side panel. */
.demo-panel-scroll,
.demo-panel-scroll *,
.kb-board,
.kb-col-body,
.kb-board--list,
.demo-filter-panel,
.site-modal-body {
  scrollbar-width: none;
}
.demo-panel-scroll::-webkit-scrollbar,
.demo-panel-scroll *::-webkit-scrollbar,
.kb-board::-webkit-scrollbar,
.kb-col-body::-webkit-scrollbar,
.kb-board--list::-webkit-scrollbar,
.demo-filter-panel::-webkit-scrollbar,
.site-modal-body::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.demo-panel .demo-win {
  font-size: 13px;
  animation: none;
  border-radius: 14px;
}
.demo-panel .demo-modes {
  display: flex;
  width: fit-content;
  margin: 0 auto 0 0; /* left-aligned in the panel bar (brand removed) */
}
.demo-act--add {
  background: var(--cyan);
  color: #fff;
  border: 1px solid var(--cyan);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.demo-act--add svg {
  width: 16px;
  height: 16px;
}

.demo-archive {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.demo-archive-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.demo-archive-empty-ico {
  display: inline-flex;
  opacity: 0.55;
  color: var(--text-muted);
}
.demo-archive-empty-ico svg {
  width: 28px;
  height: 28px;
}
.demo-fbcard-prompt {
  margin-top: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
}
.demo-fbcard-prompt pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text);
}
.demo-fbcard-prompt[hidden] {
  display: none;
}
.demo-newbtn {
  width: 100%;
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px;
  border-radius: 10px;
  border: 1px dashed var(--border-strong);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition:
    border-color 0.14s,
    color 0.14s;
}
.demo-newbtn:hover {
  border-color: var(--cyan);
  color: var(--cyan-2, #2fd4e8);
}
.demo-newbtn svg {
  width: 15px;
  height: 15px;
}

/* Teammate (received) message bubble — restored after the AI→human change.
   :not(--mine) so the blue "mine" bubble keeps its own style. */
.demo-msg:not(.demo-msg--mine) {
  align-self: flex-start;
  margin-left: 4px;
  border-radius: 13px 13px 13px 2px;
  background: #1b1b27;
  border: 1px solid var(--border-strong);
  box-shadow: 0 8px 22px -12px rgba(0, 0, 0, 0.7);
}
.demo-msg:not(.demo-msg--mine) .demo-msg-avatar {
  left: -6px;
}

@media (max-width: 560px) {
  .demo-panel {
    width: 100vw;
    border-left: 0;
  }
}

/* Compose chrome inside the panel (re-added to mirror the real extension) */
.demo-panel .demo-topbar {
  margin: 0px;
  border-radius: 0;
}
.demo-back {
  cursor: pointer;
  border: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.demo-back svg {
  width: 13px;
  height: 13px;
}
.demo-back:hover {
  color: var(--cyan-2, #2fd4e8);
}
.demo-back-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  margin-left: 5px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--grad);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}
.demo-act--next {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text);
}
.demo-act--next:hover {
  border-color: var(--cyan);
  color: var(--cyan-2, #2fd4e8);
}
.demo-fbcard-note {
  margin: 8px 0 0;
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--muted);
}

/* ── CORE: the fake extension uses the REAL extension's design tokens ──────────
   Source of truth = the side panel's sidepanel/css/base.css (dark theme). Every
   .demo-* rule reads var(--cyan)/var(--grad)/var(--border*), so overriding the
   tokens here recolours the whole fake extension to match the real one exactly. */
.demo-panel {
  --cyan: #0ea5b7; /* real --accent-blue (teal, not the landing's #06b6d4) */
  --cyan-2: #19c5d6; /* brighter teal for links / hover */
  --violet: #8b5cf6; /* real --accent-purple */
  --grad: linear-gradient(120deg, #4f46e5 0%, #06b6d4 35%, #8b5cf6 70%, #4f46e5 100%);
  --border: rgba(255, 255, 255, 0.08); /* real --border-card */
  --border-strong: rgba(255, 255, 255, 0.12);
  --panel: rgba(25, 20, 35, 0.55); /* real --bg-card */
  --bg: #0c0a12; /* effective dark-violet of the real --bg-app over its backdrop */
}

/* ── Side-panel demo as a REAL split (not an overlay) ─────────────────────────
   Opening the panel shrinks the page content; the fixed panel fills the gap,
   exactly like a browser side panel. The page stays scrollable & usable. */
body {
  --demo-w: min(440px, 100vw);
  transition: padding-right 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
body.demo-open {
  padding-right: var(--demo-w);
}
.demo-panel {
  width: var(--demo-w);
}
.demo-scrim {
  display: none; /* no dimming overlay in a split layout */
}
@media (max-width: 760px) {
  /* Too narrow for a side-by-side split: the panel takes over full width. */
  body {
    --demo-w: 100vw;
  }
  body.demo-open {
    padding-right: 0;
  }
}

/* ── Resize grip: drag the panel left edge to widen/narrow the fake extension. */
.demo-resize {
  position: absolute;
  top: 0;
  left: -3px;
  width: 11px;
  height: 100%;
  z-index: 6;
  cursor: ew-resize;
  touch-action: none;
}
.demo-resize::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 3px;
  transform: translateY(-50%);
  width: 4px;
  height: 46px;
  border-radius: 999px;
  background: var(--border-strong);
  transition:
    background 0.15s,
    height 0.15s;
}
.demo-resize:hover::before,
body.demo-resizing .demo-resize::before {
  background: var(--cyan);
  height: 66px;
}
/* While dragging: kill the open/close transition so width tracks the cursor 1:1. */
body.demo-resizing,
body.demo-resizing .demo-panel {
  transition: none !important;
}
body.demo-resizing {
  user-select: none;
  cursor: ew-resize;
}
@media (max-width: 760px) {
  .demo-resize {
    display: none;
  }
}

/* The compose container is flat like the real extension — no outer card, no bob. */
.demo-win {
  animation: none !important;
  border-radius: 0;
}

/* Active mode = icon only (it already reads as active via the gradient fill);
   the inactive mode keeps its label. Stops the brand + toggle from colliding. */
.demo-panel-bar .demo-mode.is-active span {
  display: none;
}
.demo-panel-bar .demo-mode.is-active {
  padding: 5px 9px;
}

/* Project + title fields are real inputs now — flat, transparent. */
.demo-field-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  padding: 0;
}
.demo-field-input::placeholder {
  color: var(--muted);
}
/* Archive card: saved title + project. */
/* Floating "Corriger (IA)" button — like the extension's .demande-fix-btn.
   In the demo it links to the features section that explains it. */
.demo-fix-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid rgba(14, 165, 183, 0.25);
  border-radius: 6px;
  background: rgba(14, 165, 183, 0.1);
  color: var(--cyan);
  cursor: pointer;
  z-index: 2;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s,
    box-shadow 0.2s,
    transform 0.2s;
}
.demo-fix-btn:hover {
  border-color: var(--cyan);
  background: var(--cyan);
  color: #fff;
  box-shadow: 0 0 12px rgba(14, 165, 183, 0.4);
  transform: scale(1.05);
}
.demo-fix-btn svg {
  display: block;
  width: 15px;
  height: 15px;
}

/* ── CORE tokens (extension names) so the ported archive rules just work ────── */
.demo-panel {
  --bg-card: rgba(25, 20, 35, 0.45);
  --bg-card-hover: rgba(255, 255, 255, 0.08);
  --border-card: rgba(255, 255, 255, 0.08);
  --edge: rgba(255, 255, 255, 0.12);
  --edge-hover: var(--cyan);
  --text-main: #fff;
  --text-muted: rgba(255, 255, 255, 0.5);
  --accent-blue: var(--cyan);
  --accent-purple: var(--violet);
  --seg-text-size: 13px;
}

/* ── Archive: hierarchical accordion tree mirroring the real extension ──────── */
.demo-archive {
  gap: 0px;
}

.feedzy-dom-group,
.feedzy-conv-group {
  position: relative;
  border: 1px solid var(--edge);
  overflow: hidden;
  margin-bottom: 2px;
  padding-left: 3px;
  transition: padding-left 0.12s ease;
}
/* Survol de l'en-tête → le contenu se décale pour libérer la drag-bar élargie
   (16px), comme dans la vraie extension (sinon le picto est recouvert). */
.feedzy-dom-group:has(> .feedzy-dom-header:hover),
.feedzy-conv-group:has(> .feedzy-conv-header:hover) {
  padding-left: 16px;
}
.feedzy-dom-group.is-project > .feedzy-dom-body .feedzy-dom-group {
  margin-left: 0; /* pas d'indentation — seule la barre d'accent à gauche marque l'imbrication */
  border-left: 2px solid color-mix(in srgb, var(--cyan) 35%, var(--border-card));
}
.feedzy-dom-group.has-accent,
.feedzy-conv-group.has-accent {
  border-color: color-mix(in srgb, var(--dom-accent) 40%, var(--edge));
}

.feedzy-dom-header,
.feedzy-conv-header {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 34px;
  padding: 3px 4px;
  cursor: pointer;
  user-select: none;
  background: color-mix(in srgb, var(--dom-accent, var(--bg-card-hover)) 30%, var(--bg-card-hover));
}
.feedzy-conv-header {
  background: color-mix(in srgb, var(--dom-accent, var(--bg-card)) 18%, var(--bg-card));
}
.feedzy-dom-header:hover,
.feedzy-conv-header:hover {
  filter: brightness(0.92); /* darken on hover, like the extension */
}

.feedzy-drag-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--dom-accent, var(--border-card));
  border-right: 1px solid var(--edge);
  cursor: grab;
  z-index: 1;
  transition: width 0.12s ease;
}
.feedzy-dom-header:hover > .feedzy-drag-bar,
.feedzy-conv-header:hover > .feedzy-drag-bar {
  width: 16px;
  filter: brightness(1.3);
}
.feedzy-drag-bar:active {
  cursor: grabbing;
}
.feedzy-dom-chevron {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--text-muted);
  transition: transform 0.2s;
}
.feedzy-dom-chevron svg {
  width: 14px;
  height: 14px;
}
.feedzy-dom-group.is-collapsed > .feedzy-dom-header .feedzy-dom-chevron,
.feedzy-conv-group.is-collapsed > .feedzy-conv-header .feedzy-dom-chevron {
  transform: rotate(-90deg);
}
@media (prefers-reduced-motion: reduce) {
  .feedzy-dom-chevron {
    transition: none;
  }
}
.feedzy-dom-ico,
.feedzy-conv-icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--text-muted);
}
.feedzy-dom-ico svg,
.feedzy-conv-icon svg {
  width: 16px;
  height: 16px;
}
.feedzy-dom-group.is-project > .feedzy-dom-header .feedzy-dom-ico {
  color: var(--dom-accent, var(--cyan));
}
.feedzy-dom-namebar {
  flex: 1 1 auto;
  min-width: 0;
}
.feedzy-dom-name,
.feedzy-conv-url {
  display: block;
  font-weight: 700;
  font-size: calc(var(--seg-text-size) + 2px);
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feedzy-conv-url {
  font-weight: 600;
}

/* Per-group stats only show when the group is COLLAPSED, like the extension. */
.feedzy-dom-group:not(.is-collapsed) > .feedzy-dom-header .feedzy-dom-stats,
.feedzy-conv-group:not(.is-collapsed) > .feedzy-conv-header .feedzy-dom-stats {
  display: none;
}
.feedzy-dom-stats {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  flex: 0 0 auto;
  border: 1px solid var(--edge);
  border-radius: 5px;
  padding: 2px;
  background: color-mix(in srgb, var(--dom-accent, var(--bg-card-hover)) 8%, var(--bg-card-hover));
}
.feedzy-dom-stat {
  display: inline-flex;
  flex-direction: column; /* picto ABOVE the number, like the extension */
  align-items: center;
  gap: 0;
  min-width: 18px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.feedzy-dom-stat svg {
  width: 14px;
  height: 14px;
}

.feedzy-dom-body,
.feedzy-conv-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}
.feedzy-dom-group.is-collapsed > .feedzy-dom-body,
.feedzy-conv-group.is-collapsed > .feedzy-conv-body {
  grid-template-rows: 0fr;
}
.feedzy-dom-body-inner,
.feedzy-conv-body-inner {
  min-height: 0;
  overflow: hidden;
  padding: 3px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
/* When collapsed the 0fr grid-row clips content to 0 height, but the inner's
   own padding still renders → a ~6px residual bar under the folder header.
   Zero the padding so a collapsed group truly disappears. */
.feedzy-dom-group.is-collapsed > .feedzy-dom-body > .feedzy-dom-body-inner,
.feedzy-conv-group.is-collapsed > .feedzy-conv-body > .feedzy-conv-body-inner {
  padding: 0;
}
@media (prefers-reduced-motion: reduce) {
  .feedzy-dom-body,
  .feedzy-conv-body {
    transition: none;
  }
}

/* ── Feedback card (.feedzy-segment) ── */
.feedzy-segment {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--edge);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-left: 3px; /* room for the accent bar; widens with it on hover */
  transition: padding-left 0.12s ease;
}
.feedzy-segment:hover {
  padding-left: 17px;
  z-index: 3;
  border-color: var(--dom-accent, var(--border-card));
}
.feedzy-segment header {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 3px;
  background: color-mix(in srgb, var(--dom-accent, var(--bg-card-hover)) 8%, var(--bg-card));
}
.seg-head-center {
  flex: 1 1 auto;
  min-width: 0;
}
.seg-title-display {
  font-size: calc(var(--seg-text-size) + 2px);
  font-weight: 600;
  color: var(--text-main);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Same visual as .feedzy-dom-stats (the folder stat badge): small box, accent-
   tinted bg, 5px radius, 2px padding — but holding the segment's own data.
   Segments inherit --dom-accent from their parent folder, so the tint matches. */
.seg-head-right {
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column; /* 2 lignes : [numéro + séparateur] puis [stats] */
  align-items: stretch;
  gap: 2px;
  background: color-mix(in srgb, var(--dom-accent, var(--bg-card-hover)) 8%, var(--bg-card-hover));
  border: 1px solid var(--edge);
  border-radius: 5px;
  padding: 2px;
}
/* Row 2 : les colonnes de stats, alignées en bas comme .feedzy-dom-stats. */
.seg-head-stats {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
}
/* Séparateur fin entre la row « numéro » et la row « stats ». */
.seg-head-sep {
  height: 1px;
  background: var(--edge);
}
/* Row 1 : numéro du segment, centré au-dessus du séparateur, atténué. */
.seg-num-out {
  text-align: center;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}
/* Column stat items inside .seg-head-right — exact mirror of .feedzy-dom-stat:
   picto/dot on top, value below, muted, tabular, regular min-width. */
.seg-stat {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 1px;
  min-width: 18px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.seg-stat svg {
  width: 14px;
  height: 14px;
}
.seg-stat-n {
  line-height: 1;
}
/* status (top) + priority (bottom) stacked — both still clickable. */
.seg-stat--triage {
  gap: 2px;
}
.seg-stat--triage .feedzy-triage-dot {
  width: 8px;
  height: 8px;
}
.seg-stat--triage svg {
  width: 13px;
  height: 13px;
}
.seg-stat--triage .feedzy-triage-status,
.seg-stat--triage .feedzy-triage-priority {
  display: inline-flex;
  cursor: pointer;
}
.seg-capsule--left {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  border-radius: 999px;
  background: var(--bg-card-hover);
  padding: 1px 5px;
}
.seg-capsule--left:hover {
  filter: brightness(1.15);
}
/* Inside the stat box the capsule sits flat (no pill), like the real extension. */
.seg-head-right .seg-capsule--left {
  background: transparent;
  padding: 0 2px;
}
.seg-head-right .seg-capsule--left:hover {
  filter: none;
  background: var(--bg-card-hover);
}
.feedzy-triage-status {
  display: inline-flex;
}
.feedzy-triage-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #94a3b8;
}
.feedzy-triage-status-accepted .feedzy-triage-dot {
  background: #fbbf24;
}
.feedzy-triage-status-rejected .feedzy-triage-dot {
  background: #f87171;
}
.feedzy-triage-status-shipped .feedzy-triage-dot {
  background: #4ade80;
}
.seg-num {
  font-size: 12px;
  font-weight: 800;
  color: #94a3b8;
}
.seg-num.is-status-accepted {
  color: #fbbf24;
}
.seg-num.is-status-rejected {
  color: #f87171;
}
.seg-num.is-status-shipped {
  color: #4ade80;
}
.feedzy-triage-priority {
  display: inline-flex;
  color: #94a3b8;
}
.feedzy-triage-priority svg {
  width: 11px;
  height: 11px;
}
.feedzy-triage-priority-low {
  color: #64748b;
}
.feedzy-triage-priority-high {
  color: #f59e0b;
}
.feedzy-triage-priority-critical {
  color: #ef4444;
}
.seg-comments {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
}
.seg-comments svg {
  width: 12px;
  height: 12px;
}
.seg-avatars {
  display: inline-flex;
}
.seg-avatar {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--violet));
  border: 1px solid var(--bg-card);
}

.seg-collapse {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}
.feedzy-segment.is-collapsed .seg-collapse {
  grid-template-rows: 0fr;
}
@media (prefers-reduced-motion: reduce) {
  .seg-collapse {
    transition: none;
  }
}
.seg-body {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 7px;
}
.demande-text {
  font-size: var(--seg-text-size);
  line-height: 1.5;
  color: var(--text-main);
  word-break: break-word;
}
.demande-text code {
  background: rgba(0, 0, 0, 0.3);
  padding: 0 4px;
  border-radius: 4px;
  font-size: 0.92em;
}
.seg-actions-row {
  display: flex;
  gap: 6px;
}
.seg-mini-act {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 7px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.seg-mini-act svg {
  width: 13px;
  height: 13px;
}
.seg-mini-act:hover {
  border-color: var(--cyan);
  color: var(--cyan-2, #2fd4e8);
}
.seg-mini-act--del:hover {
  border-color: var(--danger, #ff5a5a);
  color: #ff8a8a;
}

.seg-meta-line {
  padding: 0px;
  background: color-mix(in srgb, var(--dom-accent, var(--bg-card)) 6%, var(--bg-card));
}
.seg-meta-tags {
  display: flex;
  align-items: center;
  gap: 4px;
}
.seg-meta-tags.is-chipless {
  opacity: 0;
  height: 0;
  overflow: hidden;
}
.feedzy-segment:hover .seg-meta-tags.is-chipless {
  opacity: 1;
  height: auto;
}
.seg-meta-chips {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.seg-meta-tools {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
}
.seg-filter-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--bg-card-hover);
  border: 1px solid var(--border-card);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  max-width: 42%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.seg-filter-badge--conv {
  color: #c4b5fd;
  border-color: rgba(139, 92, 246, 0.3);
}
.seg-tag-chip {
  --st-base: hsl(var(--st-hue, 40) 72% 62%);
  border-color: color-mix(in srgb, var(--st-base) 48%, var(--bg-card));
  color: var(--st-base);
  background: color-mix(in srgb, var(--st-base) 13%, var(--bg-card));
}
.seg-tag-hash {
  opacity: 0.7;
}
.seg-meta-more,
.seg-tag-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1px solid var(--border-card);
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
}
.seg-meta-more:hover,
.seg-tag-add:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}
/* The add-tag "#" is a dashed pill with an amber hover, like the extension. */
.seg-tag-add {
  width: auto;
  min-width: 22px;
  padding: 0 8px;
  border-style: dashed;
  border-radius: 999px;
}
.seg-tag-add:hover {
  border-color: #f59e0b;
  color: #f59e0b;
}
.seg-pr-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid rgba(34, 197, 94, 0.35);
  color: #22c55e;
  font-size: 10px;
  font-weight: 600;
}
.seg-pr-badge svg {
  width: 11px;
  height: 11px;
}

/* ── Compose meta pickers: domain/page/tags/status/priority so the visitor
   builds real hierarchy instead of everything landing under localhost. ── */
/* "Détails" toggle — keeps compose minimal (project + title + card) by default. */
.demo-details-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 4px 4px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}
.demo-details-toggle:hover {
  color: var(--text);
}
.demo-details-toggle svg {
  width: 13px;
  height: 13px;
  transform: rotate(-90deg);
  transition: transform 0.15s ease;
}
.demo-details-toggle.is-open svg {
  transform: rotate(0deg);
}
.demo-meta-fields[hidden] {
  display: none; /* author display:flex would otherwise override the hidden attr */
}
.demo-meta-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.demo-field--sm {
  flex: 1 1 calc(50% - 3px);
  min-width: 0;
}
.demo-field--wide {
  flex: 1 1 100%;
}
.demo-picks {
  display: flex;
  gap: 6px;
  flex: 1 1 100%;
}
.demo-select {
  flex: 1 1 0;
  min-width: 0;
  padding: 9px 10px;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.25);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.demo-select:focus {
  outline: none;
  border-color: var(--cyan);
}

/* ── Icon-only toolbar (mirrors the real extension quick-tools row) ── */
.demo-tools--icons .demo-tbtn {
  padding: 0;
  gap: 0;
}
.demo-tools--icons .demo-tmore {
  color: var(--muted);
}
.demo-tools--icons .demo-tmore:hover {
  color: var(--cyan-2, #2fd4e8);
  border-color: var(--cyan);
}

/* Archive view header title (centered in the .demo-topbar) */
.demo-topbar-title {
  margin: 0 auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

/* "New feedback" button in the archive header — the extension's add logo with a
   hover crossfade (logoadd → logoadd-hover) + gentle bounce. */
.demo-newbtn-head {
  margin: 0 auto; /* sits centered in the .demo-topbar, where the title was */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  position: relative;
  animation: demo-logo-bounce 2.4s ease-in-out infinite;
}
.demo-newbtn-head:hover {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.demo-newbtn-img {
  position: relative;
  width: 86%;
  height: 86%;
}
.demo-newbtn-img::before,
.demo-newbtn-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity 0.12s ease;
}
.demo-newbtn-img::before {
  background-image: url(logoadd.png);
  opacity: 1;
}
.demo-newbtn-img::after {
  background-image: url(logoadd-hover.png);
  opacity: 0;
}
.demo-newbtn-head:hover .demo-newbtn-img::before {
  opacity: 0;
}
.demo-newbtn-head:hover .demo-newbtn-img::after {
  opacity: 1;
}
@keyframes demo-logo-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .demo-newbtn-head {
    animation: none;
  }
}

/* ── Cog (settings) with sub-buttons revealed on hover — Sort ↑/↓ + Font A−/A+,
   mirroring the extension's .topbar-extras. ─────────────────────────────────── */
.demo-cog {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.demo-cog-extras {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-width 0.25s ease,
    opacity 0.18s ease;
}
.demo-cog:hover .demo-cog-extras,
.demo-cog:focus-within .demo-cog-extras {
  max-width: 180px;
  opacity: 1;
}
/* Split double-buttons (sort / font) + single buttons (eye / toggle-all) —
   exact mirror of the real extension's .topbar-split / .topbar-split-half:
   a square split vertically into two half-buttons with a thin separator,
   flat at rest, accent + subtle bg on hover/active (no border, no shadow). */
.demo-cog-split {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 24px;
  height: 26px;
  flex-shrink: 0;
  border: 0;
  background: transparent;
  border-radius: 6px;
  overflow: hidden;
  color: var(--muted);
  cursor: pointer;
  transition:
    color 0.12s,
    background 0.12s;
}
.demo-cog-split--single {
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
}
.demo-cog-split--single:hover,
.demo-cog-split--single.is-active {
  color: var(--cyan);
  background: var(--bg-card-hover, rgba(255, 255, 255, 0.08));
}
.demo-cog-split svg {
  width: 13px;
  height: 13px;
}
.demo-cog-split-half {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition:
    color 0.12s,
    background 0.12s;
}
.demo-cog-split-half + .demo-cog-split-half {
  border-top: 1px solid var(--border);
}
.demo-cog-split-half svg {
  width: 11px;
  height: 11px;
}
.demo-cog-split-half:hover,
.demo-cog-split-half.is-active {
  color: var(--cyan);
  background: var(--bg-card-hover, rgba(255, 255, 255, 0.08));
}
.demo-cog-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition:
    color 0.12s,
    background 0.12s;
}
/* Same flat hover as the real extension: accent + subtle bg, no border/shadow. */
.demo-cog-btn:hover {
  color: var(--cyan);
  background: var(--bg-card-hover, rgba(255, 255, 255, 0.08));
}
.demo-cog-btn.is-active {
  color: var(--cyan);
  background: var(--bg-card-hover, rgba(255, 255, 255, 0.08));
}
@media (prefers-reduced-motion: reduce) {
  .demo-cog-extras {
    transition: none;
  }
}

/* Real "copy prompt" button inside the archive card's prompt panel. */
.demo-fbcard-copy {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 7px;
  border: 1px solid var(--cyan);
  background: rgba(6, 182, 212, 0.12);
  color: var(--cyan-2, #2fd4e8);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.demo-fbcard-copy:hover {
  background: var(--cyan);
  color: #04222a;
}

/* Archive search row — revealed by the loupe in the header. */
.demo-search-row {
  padding: 6px 7px 0;
}
.demo-search-input {
  width: 100%;
  padding: 8px 11px;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.25);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  outline: none;
}
.demo-search-input:focus {
  border-color: var(--cyan);
}
.demo-search-input::placeholder {
  color: var(--muted);
}

/* ── Drag-and-drop: handles, dragging state, drop indicators ───────────────── */
.feedzy-segment.is-dragging,
.feedzy-dom-group.is-dragging,
.feedzy-conv-group.is-dragging {
  opacity: 0.45;
}
/* Segment drag handle = a full-height left accent bar (like the extension). */
.seg-drag-handle {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--dom-accent, var(--border-card));
  cursor: grab;
  z-index: 1;
  transition: width 0.12s ease;
}
.feedzy-segment:hover .seg-drag-handle {
  width: 17px;
}
.seg-drag-handle:active {
  cursor: grabbing;
}
/* Segment insertion line (where the card will land). */
.feedzy-segment.is-drop-before,
.feedzy-segment.is-drop-after {
  position: relative;
}
.feedzy-segment.is-drop-before::before,
.feedzy-segment.is-drop-after::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--cyan, #0ea5b7);
  box-shadow: 0 0 8px var(--cyan, #0ea5b7);
}
.feedzy-segment.is-drop-before::before {
  top: -4px;
}
.feedzy-segment.is-drop-after::after {
  bottom: -4px;
}
/* Reparent-onto-group highlight (segment dropped on a group header). */
.feedzy-dom-group.is-segdrop > .feedzy-dom-header,
.feedzy-conv-group.is-segdrop > .feedzy-conv-header {
  outline: 2px dashed var(--cyan, #0ea5b7);
  outline-offset: -2px;
  background: rgba(14, 165, 183, 0.08);
}
/* Group drop zones: into = dashed box, before/after = inset edge bar. */
.feedzy-dom-group.is-gdrop-into > .feedzy-dom-header,
.feedzy-conv-group.is-gdrop-into > .feedzy-conv-header {
  outline: 2px dashed var(--cyan, #0ea5b7);
  outline-offset: -2px;
  background: rgba(14, 165, 183, 0.1);
}
.feedzy-dom-group.is-gdrop-before > .feedzy-dom-header,
.feedzy-conv-group.is-gdrop-before > .feedzy-conv-header {
  box-shadow: inset 0 3px 0 var(--cyan, #0ea5b7);
}
.feedzy-dom-group.is-gdrop-after > .feedzy-dom-header,
.feedzy-conv-group.is-gdrop-after > .feedzy-conv-header {
  box-shadow: inset 0 -3px 0 var(--cyan, #0ea5b7);
}
@media (prefers-reduced-motion: reduce) {
  .seg-drag-handle {
    transition: none;
  }
}

/* Inline triage (click the dot / flag to cycle) + tag remove (×). */
.feedzy-triage-status[data-fb-status],
.feedzy-triage-priority[data-fb-priority] {
  cursor: pointer;
  padding: 1px;
}
.seg-tag-del {
  margin-left: 4px;
  cursor: pointer;
  opacity: 0.55;
  font-weight: 700;
}
.seg-tag-del:hover {
  opacity: 1;
  color: var(--danger, #ff5a5a);
}

/* ── Kanban board (the columns icon toggles it) ───────────────────────────── */
.demo-archive.is-kanban {
  padding: 0;
}
.demo-kanban {
  display: flex;
  gap: 10px;
  padding: 10px;
  overflow-x: auto;
  align-items: flex-start;
}
.demo-kanban-col {
  flex: 1 0 0;
  min-width: 150px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 10px);
  display: flex;
  flex-direction: column;
  max-height: 100%;
}
.demo-kanban-col.is-drop {
  border-color: var(--cyan, #0ea5b7);
  background: rgba(14, 165, 183, 0.08);
}
.demo-kanban-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  border-top: 2px solid #94a3b8;
  border-radius: var(--radius-md, 10px) var(--radius-md, 10px) 0 0;
}
.demo-kanban-col[data-kanban-col='accepted'] .demo-kanban-col-head {
  border-top-color: #fbbf24;
}
.demo-kanban-col[data-kanban-col='rejected'] .demo-kanban-col-head {
  border-top-color: #f87171;
}
.demo-kanban-col[data-kanban-col='shipped'] .demo-kanban-col-head {
  border-top-color: #4ade80;
}
.demo-kanban-col-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--text);
}
.demo-kanban-col-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  padding: 1px 7px;
}
.demo-kanban-col-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 8px;
  min-height: 56px;
  overflow-y: auto;
}
.demo-kcard {
  background: var(--bg-card, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border);
  border-left: 3px solid #94a3b8;
  border-radius: 8px;
  padding: 7px 9px;
  cursor: grab;
}
.demo-kcard:hover {
  border-color: var(--border-strong);
}
.demo-kcard.is-dragging {
  opacity: 0.45;
}
.demo-kcard-head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.demo-kcard-num {
  font-size: 11px;
  font-weight: 800;
  color: #94a3b8;
}
.demo-kcard-prio {
  margin-left: auto;
}
.demo-kcard-title {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text);
}
.demo-kcard-tags {
  margin-top: 5px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* ── Multi-select + bulk-action bar ───────────────────────────────────────── */
.seg-check {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  margin-right: 6px;
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.12s ease;
}
.feedzy-segment:hover .seg-check,
.feedzy-segment.is-selected .seg-check {
  opacity: 1;
}
.seg-check input {
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: var(--cyan, #0ea5b7);
}
.feedzy-segment.is-selected {
  border-color: var(--cyan, #0ea5b7);
  box-shadow: inset 0 0 0 1px var(--cyan, #0ea5b7);
}
@media (prefers-reduced-motion: reduce) {
  .seg-check {
    transition: none;
  }
}
.demo-bulkbar[hidden] {
  display: none; /* author display:flex would otherwise override the hidden attr */
}
.demo-bulkbar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 8px;
  padding: 8px 10px;
  background: var(--bg-card, rgba(20, 22, 30, 0.97));
  border: 1px solid var(--cyan, #0ea5b7);
  border-radius: var(--radius-md, 10px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.demo-bulk-count {
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
  margin-right: auto;
}
.demo-bulk-select {
  font-size: 12px;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-app, #0c0e14);
  color: var(--text);
  cursor: pointer;
}
.demo-bulk-btn {
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  cursor: pointer;
}
.demo-bulk-btn:hover {
  border-color: var(--cyan, #0ea5b7);
}
.demo-bulk-btn--del {
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.4);
}
.demo-bulk-btn--del:hover {
  border-color: #f87171;
}

/* ── Comment thread on the expanded card (team collaboration) ──────────────── */
.seg-thread {
  margin: 8px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.seg-thread-msg {
  display: flex;
  gap: 7px;
  align-items: baseline;
  font-size: 12px;
  line-height: 1.4;
}
.seg-thread-who {
  flex: 0 0 auto;
  font-weight: 800;
  color: var(--cyan, #0ea5b7);
}
.seg-thread-text {
  color: var(--text);
  word-break: break-word;
}
.seg-thread-add {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}
.seg-thread-input {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-app, rgba(0, 0, 0, 0.25));
  color: var(--text);
}
.seg-thread-input:focus {
  outline: none;
  border-color: var(--cyan, #0ea5b7);
}
.seg-thread-send {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: var(--grad, #0ea5b7);
  color: #fff;
  cursor: pointer;
}

/* ── Kanban as a roomy full-site modal (the columns icon opens it) ─────────── */
.site-modal {
  /* token aliases so the ported kb-* rules resolve against the landing theme */
  --cyan: #0ea5b7;
  --cyan-2: #19c5d6;
  --violet: #8b5cf6;
  --grad: linear-gradient(120deg, #4f46e5 0%, #06b6d4 35%, #8b5cf6 70%, #4f46e5 100%);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.12);
  --panel: rgba(25, 20, 35, 0.55);
  --bg: #0c0a12;
  --accent-blue: var(--cyan);
  --accent-blue-50: rgba(14, 165, 183, 0.16);
  --bg-card: rgba(25, 20, 35, 0.45); /* translucent dark-violet columns, like the real kanban */
  --bg-card-hover: rgba(255, 255, 255, 0.08);
  --border-card: var(--border);
  --text-main: var(--text);
  --text-muted: var(--muted);
}
/* Scrim + modal occupy the PAGE area only — never over the fake-extension panel,
   which keeps its own width var(--demo-w) on the right edge. */
.site-modal-scrim {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: var(--demo-w, 0px);
  z-index: 150;
  background: rgba(6, 6, 12, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.site-modal-scrim.is-open {
  opacity: 1;
  pointer-events: auto;
}
.site-modal {
  /* Fullscreen over the PAGE area only — fills edge-to-edge up to the
     fake-extension panel on the right (var(--demo-w)). No page background,
     no rounded corners, no border: looks like the real kanban page. */
  position: fixed;
  z-index: 160;
  top: 0;
  bottom: 0;
  left: 0;
  right: var(--demo-w, 0px);
  display: flex;
  flex-direction: column;
  /* Same purple radial glow as the real kanban page (base.css dark theme):
     translucent columns/cards let it show through. */
  background: radial-gradient(125% 125% at 50% 100%, #000000 40%, #350136 100%);
  border: 0;
  border-radius: 0;
  color: var(--text);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.26s ease;
}
.site-modal.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}
.site-modal-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.site-modal-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.site-modal-title strong {
  color: var(--cyan);
  font-weight: 700;
}
.site-modal-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  cursor: pointer;
}
.site-modal-close:hover {
  color: var(--text);
  border-color: var(--border-strong);
}
.site-modal-close svg {
  width: 16px;
  height: 16px;
}
.site-modal-body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 14px;
}

/* ── Board header controls (views / subgroup / filter / count) ── */
.kb-views {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--bg-card-hover);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.kb-view-btn {
  padding: 4px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.12s,
    color 0.12s;
}
.kb-view-btn:hover {
  color: var(--text);
}
.kb-view-btn.is-active {
  background: var(--cyan);
  color: #fff;
}
.kb-subgroup {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}
.kb-subgroup-sel {
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card-hover);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.kb-subgroup-sel:hover {
  border-color: var(--cyan);
}
.kb-filter {
  min-width: 140px;
  max-width: 240px;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card-hover);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  outline: none;
  transition:
    border-color 0.12s,
    box-shadow 0.12s;
}
.kb-filter::placeholder {
  color: var(--muted);
}
.kb-filter:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 2px var(--accent-blue-50);
}
.kb-spacer {
  flex: 1;
}
.kb-count {
  font-size: 12px;
  color: var(--muted);
}

/* ── Board columns / cards (ported from the extension's kanban.css) ── */
.kb-board {
  flex: 1 1 auto;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
}
.kb-col {
  flex: 1 1 0;
  min-width: 260px;
  max-width: 380px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition:
    border-color 0.12s,
    box-shadow 0.12s;
}
.kb-col.is-drop {
  border-color: var(--cyan);
  box-shadow: 0 0 0 2px var(--accent-blue-50);
}
.kb-col-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.kb-col-dot,
.kb-sec-dot,
.kb-sub-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.kb-col-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex: 1;
}
.kb-col-count,
.kb-sec-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  background: var(--bg-card-hover);
  border-radius: 999px;
  padding: 1px 8px;
}
.kb-col-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kb-col-empty {
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  padding: 14px 0;
}
.kb-card {
  background: var(--bg-card-hover);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 10px;
  cursor: pointer;
  transition:
    border-color 0.12s,
    box-shadow 0.12s;
}
.kb-card[draggable='true'] {
  cursor: grab;
}
.kb-card[draggable='true']:active {
  cursor: grabbing;
}
.kb-card:hover {
  border-color: var(--cyan);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
}
.kb-card.is-dragging {
  opacity: 0.4;
}
.kb-card-top {
  display: flex;
  gap: 6px;
  align-items: flex-start;
}
.kb-prio {
  font-size: 11px;
  line-height: 1.4;
  flex-shrink: 0;
}
.kb-card-title {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kb-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.kb-tag {
  font-size: 10px;
  color: var(--cyan);
  background: var(--accent-blue-50);
  border-radius: 4px;
  padding: 1px 5px;
}
.kb-card-meta {
  margin-top: 6px;
  font-size: 10.5px;
  color: var(--muted);
}
.kb-col--new .kb-col-dot,
.kb-col--new .kb-sec-dot,
.kb-col--new .kb-sub-dot {
  background: #94a3b8;
}
.kb-col--accepted .kb-col-dot,
.kb-col--accepted .kb-sec-dot,
.kb-col--accepted .kb-sub-dot {
  background: #fbbf24;
}
.kb-col--rejected .kb-col-dot,
.kb-col--rejected .kb-sec-dot,
.kb-col--rejected .kb-sub-dot {
  background: #f87171;
}
.kb-col--shipped .kb-col-dot,
.kb-col--shipped .kb-sec-dot,
.kb-col--shipped .kb-sub-dot {
  background: #4ade80;
}
.kb-col--prio-critical .kb-col-dot,
.kb-col--prio-critical .kb-sec-dot,
.kb-col--prio-critical .kb-sub-dot {
  background: #f87171;
}
.kb-col--prio-high .kb-col-dot,
.kb-col--prio-high .kb-sec-dot,
.kb-col--prio-high .kb-sub-dot {
  background: #fb923c;
}
.kb-col--prio-medium .kb-col-dot,
.kb-col--prio-medium .kb-sec-dot,
.kb-col--prio-medium .kb-sub-dot {
  background: #fbbf24;
}
.kb-col--prio-low .kb-col-dot,
.kb-col--prio-low .kb-sec-dot,
.kb-col--prio-low .kb-sub-dot {
  background: #94a3b8;
}
.kb-col--proj .kb-col-dot,
.kb-col--proj .kb-sec-dot,
.kb-col--proj .kb-sub-dot {
  background: var(--cyan);
}
/* ── List view ── */
.kb-board--list {
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
}
.kb-list,
.kb-list-groups {
  display: flex;
  flex-direction: column;
  max-width: 1000px;
  margin: 0 auto;
}
.kb-list {
  gap: 4px;
}
.kb-list-groups {
  gap: 10px;
}
.kb-list-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.12s;
}
.kb-list-row:hover {
  border-color: var(--cyan);
}
.kb-list-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #94a3b8;
}
.kb-list-row.kb-col--accepted .kb-list-dot {
  background: #fbbf24;
}
.kb-list-row.kb-col--rejected .kb-list-dot {
  background: #f87171;
}
.kb-list-row.kb-col--shipped .kb-list-dot {
  background: #4ade80;
}
.kb-list-status {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  flex-shrink: 0;
  min-width: 72px;
}
.kb-list .kb-prio {
  flex-shrink: 0;
  min-width: 14px;
}
.kb-list-title {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kb-list-tags {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  max-width: 40%;
  overflow: hidden;
}
.kb-caret {
  font-size: 10px;
  color: var(--muted);
  width: 12px;
  flex-shrink: 0;
}
/* ── Grouped sections (list) ── */
.kb-sec {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  overflow: hidden;
}
.kb-sec-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  user-select: none;
}
.kb-sec.is-collapsed .kb-sec-head {
  border-bottom: 0;
}
.kb-sec-head:hover {
  background: var(--bg-card-hover);
}
.kb-sec-title {
  flex: 1;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.kb-sec-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
}
.kb-sec.is-collapsed .kb-sec-body {
  display: none;
}
/* ── Sub-sections (project columns) ── */
.kb-sub {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.kb-sub-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  cursor: pointer;
  background: var(--bg-card-hover);
  user-select: none;
  font-size: 11px;
}
.kb-sub-title {
  flex: 1;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.kb-sub-count {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
}
.kb-sub-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
}
.kb-sub.is-collapsed .kb-sub-body {
  display: none;
}
@media (max-width: 760px) {
  .site-modal {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 0;
  }
  .site-modal-scrim {
    right: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-modal,
  .site-modal-scrim {
    transition: none;
  }
}

/* ── Search / filter DRAWER (slides over the panel, like the extension) ─────── */
.demo-filter-overlay {
  /* same token overrides as .demo-panel so var(--cyan)/--grad resolve */
  --cyan: #0ea5b7;
  --cyan-2: #19c5d6;
  --violet: #8b5cf6;
  --grad: linear-gradient(120deg, #4f46e5 0%, #06b6d4 35%, #8b5cf6 70%, #4f46e5 100%);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.12);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--demo-w, min(440px, 100vw));
  z-index: 120;
  transform: translateX(100%);
  transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.demo-filter-overlay.is-open {
  transform: translateX(0);
  pointer-events: auto;
}
.demo-filter-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  overflow-y: auto;
  /* Same canonical purple glow as the panel + kanban (base.css dark theme). */
  background: radial-gradient(125% 125% at 50% 100%, #000000 40%, #350136 100%);
  border-left: 1px solid var(--border-strong);
  color: var(--text);
}
.demo-filter-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.demo-filter-back {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  cursor: pointer;
}
.demo-filter-back svg {
  width: 16px;
  height: 16px;
}
.demo-filter-ico {
  display: inline-flex;
  color: var(--cyan);
}
.demo-filter-ico svg {
  width: 16px;
  height: 16px;
}
.demo-filter-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}
.demo-filter-clear {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-card, var(--border));
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.demo-filter-clear:hover {
  color: var(--danger, #ff453a);
  border-color: var(--danger, #ff453a);
  background: rgba(255, 69, 58, 0.08);
}
.demo-filter-search {
  width: 100%;
  font-size: 13px;
  padding: 9px 11px;
  border-radius: 9px;
  border: 1px solid var(--cyan);
  background: rgba(0, 0, 0, 0.3);
  color: var(--text);
  box-shadow: 0 0 0 3px rgba(14, 165, 183, 0.12);
}
.demo-filter-search:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(14, 165, 183, 0.25);
}
.demo-filter-section {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}
.demo-filter-row {
  display: flex;
  flex-direction: column; /* label ABOVE the select, like the extension */
  align-items: stretch;
  gap: 4px;
}
.demo-filter-row label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
}
.demo-filter-select {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.3);
  color: var(--text);
  cursor: pointer;
}
.demo-filter-select:disabled {
  opacity: 0.5;
  cursor: default;
}
.demo-filter-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
}
.demo-filter-stats {
  font-size: 12px;
  color: var(--muted);
}
.demo-filter-apply {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--cyan);
  color: #fff;
  cursor: pointer;
}
.demo-filter-apply:hover {
  filter: brightness(1.08);
}
/* Active-filter chip bar above the list. */
.demo-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px 2px;
}
.demo-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 220px;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 5px;
  border: 1px solid #6c47ff;
  background: color-mix(in srgb, #6c47ff 18%, transparent);
  color: #b39dff;
  cursor: pointer;
}
.demo-filter-chip:hover {
  border-color: #8b6cff;
}
.demo-filter-chip-ico {
  flex: 0 0 auto;
  font-weight: 800;
  opacity: 0.9;
}
.demo-filter-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.demo-filter-chip-x {
  flex: 0 0 auto;
  font-weight: 800;
  opacity: 0.7;
}
.demo-filter-chip:hover .demo-filter-chip-x {
  opacity: 1;
  color: #fff;
}
.demo-empty-reset {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid var(--cyan, #0ea5b7);
  background: rgba(14, 165, 183, 0.1);
  color: var(--text);
  cursor: pointer;
}
/* ── Saved views block ── */
.demo-filter-views {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.demo-filter-views-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
}
.demo-filter-view-save {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--cyan, #0ea5b7);
  background: rgba(14, 165, 183, 0.1);
  color: var(--cyan, #0ea5b7);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}
.demo-filter-views-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.demo-filter-views-empty {
  font-size: 11.5px;
  font-style: italic;
  color: var(--muted);
}
.demo-filter-view-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card-hover, rgba(255, 255, 255, 0.06));
  overflow: hidden;
}
.demo-filter-view-apply {
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 6px 3px 10px;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.demo-filter-view-apply:hover {
  color: var(--cyan, #0ea5b7);
}
.demo-filter-view-del {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px 3px 4px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.demo-filter-view-del:hover {
  color: var(--danger, #ff453a);
}
/* ── Global archive stats recap — a floating PILL in the bottom footer ── */
.demo-arch-foot {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  padding: 6px 10px 10px;
}
.demo-arch-foot[hidden] {
  display: none;
}
.demo-archive-stats {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 11px;
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: rgba(8, 8, 14, 0.55);
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.7);
  color: var(--text-muted, var(--muted));
}
.demo-arch-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-direction: column;
}
.demo-arch-stat svg {
  width: 13px;
  height: 13px;
}

/* Compose extras: conversation + delete + send/copy surfaced under the editor
   when a feedback is opened from the archive (replaces the inline body actions). */
.demo-compose-extras {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}
.demo-compose-extras[hidden] {
  display: none;
}
.demo-compose-sub {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted, rgba(255, 255, 255, 0.5));
}
/* Coloured triage-cycle sub-group (à traiter / en cours / fait). */
.demo-arch-cycle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 2px 8px;
  margin-left: 1px;
  border: 1px solid var(--border);
  border-radius: 999px;
}
.demo-arch-cyc--new {
  color: var(--cyan, #0ea5b7);
}
.demo-arch-cyc--accepted {
  color: #fbbf24;
}
.demo-arch-cyc--shipped {
  color: #4ade80;
}
@media (prefers-reduced-motion: reduce) {
  .demo-filter-overlay {
    transition: none;
  }
}