/* SITE COPY of the video replica kit. Do not edit here: edit the kit and run
   scripts/build-replicas.py, which writes this file.

   Source: video/replica/replica.css + video/promo/shots.py EXTRA_CSS
   It is the kit the commercials and Reels are rendered with, so a page and a video
   show the same product. Every class is `rp-` (the kit) or `pr-` (pieces the video
   shots add on top of it, appended at the end).

   SITE ONLY, and nothing else differs from the source:
     1. no @font-face. The kit ships static TTFs so frame-by-frame renders are
        deterministic; the page loads Inter, Familjen Grotesk and Instrument Sans
        from Google Fonts instead.
     2. `:host` beside `:root`. Scenes are mounted in a shadow root (js/replica-player.js),
        where `:root` matches nothing; the tokens are declared on the host instead.
        The shadow root also keeps the site's stylesheets out (css/evolution.css
        switches every animation off under reduced motion, which would leave the
        kit's timed states stacked) and keeps this file out of the site.
   The player registers the @property rules below at document level, because
   browsers ignore @property inside a shadow tree. */

/* =====================================================================
   Synapse replica kit — HTML/CSS illustrations of the product UI
   ---------------------------------------------------------------------
   Same model as the Bluey site's replicas ("ilustrações em HTML e CSS,
   com dados de exemplo"): the look is ported from the site's sales
   landing kit (public-website/css/sales-landing.css, `sl-*`) and from
   the product's own light theme (synapse/web-v3 app/styles/index.css),
   with nothing loaded from either at runtime.

   Rules of the kit
   - Every class is prefixed `rp-`. Every token is prefixed `--rp-`.
   - Author at 1x (13px UI text). Scale a whole shot with `.rp-zoom`
     (`zoom: var(--z)`), never with transform: zoom re-lays the text out
     and stays crisp.
   - Motion is CSS only. Each animated element carries its own delay in
     `--d` (or `--in` / `--out` for timed states). Nothing here starts a
     JS timer and nothing is random, so pausing every animation from
     `document.getAnimations()` and setting `currentTime` renders any
     frame exactly (see replica-clock.js).
   - One animation class per element (they all set `animation`). To
     combine two, nest a wrapper.
   ===================================================================== */

/* ---------- fonts (local, deterministic) ---------- */


/* ---------- tokens ---------- */

@property --rp-n {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}

:root,
:host {
  /* brand (public-website css/bluey.css) */
  --rp-orange: #f58a36;
  --rp-orange-soft: #fb9d52;
  --rp-orange-deep: #e07620;
  --rp-orange-tint: #fef0e4;
  --rp-cyan: #0cb4ea;
  --rp-cyan-deep: #0691c4;
  --rp-cyan-soft: #77c6f6;
  --rp-cyan-tint: #e8f6fd;
  --rp-navy: #27254b;
  --rp-deep: #0b0a33;
  --rp-ink: #1d1b40;
  --rp-ink-soft: #565377;
  --rp-green: #1fae60;
  --rp-green-tint: #e6f7ee;
  --rp-purple: #8b5cf6;
  --rp-ground: #fbfcfe;
  --rp-cream: #f5f6f8;
  --rp-line: #e4e7f2;
  --rp-shadow-sm: 0 2px 8px rgba(4, 3, 33, 0.06);
  --rp-shadow-md: 0 10px 30px -12px rgba(29, 27, 64, 0.18);
  --rp-shadow-lg: 0 24px 64px rgba(4, 3, 33, 0.18);
  --rp-shadow-window: 0 40px 90px -30px rgba(4, 3, 33, 0.38), 0 12px 30px -12px rgba(4, 3, 33, 0.2);

  /* product UI, light theme (web-v3 app/styles/index.css) */
  --rp-app: #f5f5f8;
  --rp-surface: #ffffff;
  --rp-surface-2: #eeeef3;
  --rp-hover: #f2f2f6;
  --rp-pill-bg: #ececf1;
  --rp-text: #1d1c30;
  --rp-text-2: #595778;
  --rp-text-3: #6f6d87;
  --rp-text-4: #9b99ae;
  --rp-border: #e2e2ea;
  --rp-border-2: #d8d8e2;
  --rp-primary: #27254b;
  --rp-primary-deep: #040321;
  --rp-primary-subtle: rgba(39, 37, 75, 0.07);
  --rp-accent: #fb9d52;
  --rp-accent-fg: #a3560e;
  --rp-accent-subtle: rgba(251, 157, 82, 0.16);
  --rp-cyan-fg: #0a7599;
  --rp-cyan-subtle: rgba(12, 180, 234, 0.12);
  --rp-violet: #8b5cf6;
  --rp-violet-fg: #6d3fd4;
  --rp-violet-subtle: rgba(139, 92, 246, 0.12);
  --rp-success: #16a36b;
  --rp-success-fg: #127a4f;
  --rp-success-subtle: rgba(22, 163, 107, 0.12);
  --rp-error: #e14b4b;
  --rp-error-fg: #c23434;
  --rp-elev-raised: 0 1px 2px rgb(29 28 48 / 0.05), 0 4px 16px rgb(29 28 48 / 0.04);
  --rp-elev-overlay: 0 2px 4px rgb(29 28 48 / 0.06), 0 12px 32px rgb(29 28 48 / 0.1);
  --rp-elev-modal: 0 4px 8px rgb(29 28 48 / 0.08), 0 24px 64px rgb(29 28 48 / 0.16);

  /* type + motion */
  --rp-font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --rp-font-display: "Familjen Grotesk", "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --rp-font-body: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --rp-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --rp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --rp-ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --rp-char-ms: 55ms;
}

/* ---------- base ---------- */

.rp,
.rp-window,
.rp-ui {
  color: var(--rp-text);
  font-family: var(--rp-font-ui);
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

.rp *,
.rp *::before,
.rp *::after,
.rp-window,
.rp-window *,
.rp-window *::before,
.rp-window *::after,
.rp-ui,
.rp-ui *,
.rp-ui *::before,
.rp-ui *::after {
  box-sizing: border-box;
}

.rp p,
.rp-window p,
.rp-ui p,
.rp h1, .rp h2, .rp h3, .rp h4,
.rp-window h3,
.rp-ui h3 {
  margin: 0;
}

.rp-zoom {
  zoom: var(--z, 1);
}

.rp-muted { color: var(--rp-text-3); }
.rp-strong { color: var(--rp-text); font-weight: 600; }
.rp-grow-1 { flex: 1; min-width: 0; }
.rp-row { display: flex; align-items: center; gap: 8px; }
.rp-stack { display: flex; flex-direction: column; gap: 10px; }
.rp-spacer { margin-left: auto; }

/* Uppercase micro label: sidebar sections, dialog fields, pane titles. */
.rp-kicker {
  color: var(--rp-text-3);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- icons: `<i class="rp-ico rp-ico-chat"></i>` ---------- */

.rp-ico {
  display: inline-block;
  flex: none;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--rp-svg) center / contain no-repeat;
  mask: var(--rp-svg) center / contain no-repeat;
  vertical-align: -3px;
}

.rp-ico.is-xs { width: 11px; height: 11px; vertical-align: -1px; }
.rp-ico.is-sm { width: 13px; height: 13px; vertical-align: -2px; }
.rp-ico.is-lg { width: 20px; height: 20px; }
.rp-ico.is-xl { width: 26px; height: 26px; }

/* === icons (generated by build_icons.py — edit there) === */
:root,
:host {
  --rp-svg-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.rp-ico-chat { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h11a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H9l-4 3v-3H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Z'/%3E%3Cpath d='M17 9h3a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-1v3l-4-3h-3'/%3E%3C/svg%3E"); }
.rp-ico-board { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='9' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='5' rx='1.5'/%3E%3Crect x='14' y='12' width='7' height='9' rx='1.5'/%3E%3Crect x='3' y='16' width='7' height='5' rx='1.5'/%3E%3C/svg%3E"); }
.rp-ico-flask { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3v6l-5 9a2 2 0 0 0 1.7 3h12.6a2 2 0 0 0 1.7-3l-5-9V3'/%3E%3Cpath d='M8 3h8'/%3E%3Cpath d='M7 14h10'/%3E%3C/svg%3E"); }
.rp-ico-library { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4v16'/%3E%3Cpath d='M8 4v16'/%3E%3Cpath d='M12 4v16'/%3E%3Cpath d='m16 4 4 15.5'/%3E%3C/svg%3E"); }
.rp-ico-folder { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z'/%3E%3C/svg%3E"); }
.rp-ico-folder-open { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18V7a2 2 0 0 1 2-2h4l2 2h7a2 2 0 0 1 2 2v1'/%3E%3Cpath d='M3 18l2.6-6.2A2 2 0 0 1 7.4 10.6H21l-2.8 6.9a2 2 0 0 1-1.9 1.5H3Z'/%3E%3C/svg%3E"); }
.rp-ico-folder-plus { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z'/%3E%3Cpath d='M12 10v6'/%3E%3Cpath d='M9 13h6'/%3E%3C/svg%3E"); }
.rp-ico-inbox { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13h5l1.5 3h5L16 13h5'/%3E%3Cpath d='M5.5 4h13l2.5 9v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-5Z'/%3E%3C/svg%3E"); }
.rp-ico-user { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E"); }
.rp-ico-star { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 2.8 5.7 6.2.9-4.5 4.4 1 6.2L12 17.3 6.5 20.2l1-6.2L3 9.6l6.2-.9Z'/%3E%3C/svg%3E"); }
.rp-ico-history { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.rp-ico-plug { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2v5'/%3E%3Cpath d='M15 2v5'/%3E%3Cpath d='M6 7h12v4a6 6 0 0 1-12 0Z'/%3E%3Cpath d='M12 17v5'/%3E%3C/svg%3E"); }
.rp-ico-lab { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6'/%3E%3Cpath d='M10 3v6L5 19a1.5 1.5 0 0 0 1.3 2h11.4a1.5 1.5 0 0 0 1.3-2L14 9V3'/%3E%3Cpath d='M7.5 15h9'/%3E%3C/svg%3E"); }
.rp-ico-templates { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='8' height='7' rx='1.5'/%3E%3Crect x='15' y='14' width='6' height='7' rx='1.5'/%3E%3C/svg%3E"); }
.rp-ico-search { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); }
.rp-ico-bot { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='8' width='16' height='12' rx='3'/%3E%3Cpath d='M12 8V4'/%3E%3Ccircle cx='12' cy='3' r='1'/%3E%3Cpath d='M9 13v2'/%3E%3Cpath d='M15 13v2'/%3E%3C/svg%3E"); }
.rp-ico-workflow { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='5' r='2'/%3E%3Ccircle cx='18' cy='5' r='2'/%3E%3Ccircle cx='12' cy='19' r='2'/%3E%3Cpath d='M6 7v2a3 3 0 0 0 3 3h6a3 3 0 0 0 3-3V7'/%3E%3Cpath d='M12 12v5'/%3E%3C/svg%3E"); }
.rp-ico-home { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9v11h14V9'/%3E%3C/svg%3E"); }
.rp-ico-asterisk { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v4'/%3E%3Cpath d='M12 17v4'/%3E%3Cpath d='M3 12h4'/%3E%3Cpath d='M17 12h4'/%3E%3Cpath d='m6 6 2.5 2.5'/%3E%3Cpath d='m15.5 15.5 2.5 2.5'/%3E%3Cpath d='m18 6-2.5 2.5'/%3E%3Cpath d='M8.5 15.5 6 18'/%3E%3C/svg%3E"); }
.rp-ico-sparkles { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.9 15.5a2 2 0 0 0-1.4-1.4L2.4 12.5a.5.5 0 0 1 0-1L8.5 9.9a2 2 0 0 0 1.4-1.4l1.6-6.1a.5.5 0 0 1 1 0l1.6 6.1a2 2 0 0 0 1.4 1.4l6.1 1.6a.5.5 0 0 1 0 1l-6.1 1.6a2 2 0 0 0-1.4 1.4l-1.6 6.1a.5.5 0 0 1-1 0Z'/%3E%3Cpath d='M20 3v4'/%3E%3Cpath d='M22 5h-4'/%3E%3C/svg%3E"); }
.rp-ico-brain { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5a3 3 0 0 0-5.8-1A3 3 0 0 0 4 9a3 3 0 0 0 0 6 3 3 0 0 0 2.2 5 3 3 0 0 0 5.8-1Z'/%3E%3Cpath d='M12 5a3 3 0 0 1 5.8-1A3 3 0 0 1 20 9a3 3 0 0 1 0 6 3 3 0 0 1-2.2 5 3 3 0 0 1-5.8-1Z'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E"); }
.rp-ico-paperclip { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m20 11-8.5 8.5a5 5 0 0 1-7-7L13 4a3.5 3.5 0 0 1 5 5l-8.5 8.5a2 2 0 0 1-3-3L14 7'/%3E%3C/svg%3E"); }
.rp-ico-at { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8'/%3E%3C/svg%3E"); }
.rp-ico-cpu { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='5' width='14' height='14' rx='2'/%3E%3Crect x='9' y='9' width='6' height='6' rx='1'/%3E%3Cpath d='M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3'/%3E%3C/svg%3E"); }
.rp-ico-arrow-up { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5'/%3E%3Cpath d='m5 12 7-7 7 7'/%3E%3C/svg%3E"); }
.rp-ico-arrow-left { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3C/svg%3E"); }
.rp-ico-arrow-right { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E"); }
.rp-ico-arrow-up-right { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M7 7h10v10'/%3E%3C/svg%3E"); }
.rp-ico-send { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2 11 13'/%3E%3Cpath d='M22 2 15 22l-4-9-9-4Z'/%3E%3C/svg%3E"); }
.rp-ico-check { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.rp-ico-check-circle { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-5'/%3E%3C/svg%3E"); }
.rp-ico-badge-check { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5 14.4 4l2.8-.2.9 2.7 2.3 1.6-.9 2.7.9 2.7-2.3 1.6-.9 2.7-2.8-.2L12 21.5 9.6 20l-2.8.2-.9-2.7-2.3-1.6.9-2.7-.9-2.7 2.3-1.6.9-2.7 2.8.2Z'/%3E%3Cpath d='m8.8 12 2.2 2.2 4.2-4.4'/%3E%3C/svg%3E"); }
.rp-ico-x { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E"); }
.rp-ico-plus { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); }
.rp-ico-clock { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.rp-ico-lock { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); }
.rp-ico-zap { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7Z'/%3E%3C/svg%3E"); }
.rp-ico-alert { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 20h20Z'/%3E%3Cpath d='M12 10v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }
.rp-ico-chevron-down { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.rp-ico-chevron-up { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E"); }
.rp-ico-chevron-right { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E"); }
.rp-ico-chevron-left { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 6-6 6 6 6'/%3E%3C/svg%3E"); }
.rp-ico-chevrons-up-down { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E"); }
.rp-ico-chevrons-left { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m11 17-5-5 5-5'/%3E%3Cpath d='m18 17-5-5 5-5'/%3E%3C/svg%3E"); }
.rp-ico-chevrons-right { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 17 5-5-5-5'/%3E%3Cpath d='m13 17 5-5-5-5'/%3E%3C/svg%3E"); }
.rp-ico-more { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='12' r='1.3' fill='black'/%3E%3Ccircle cx='12' cy='12' r='1.3' fill='black'/%3E%3Ccircle cx='19' cy='12' r='1.3' fill='black'/%3E%3C/svg%3E"); }
.rp-ico-eye { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.rp-ico-share { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='m8.6 13.5 6.8 4'/%3E%3Cpath d='m15.4 6.5-6.8 4'/%3E%3C/svg%3E"); }
.rp-ico-copy { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='13' height='13' rx='2'/%3E%3Cpath d='M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3'/%3E%3C/svg%3E"); }
.rp-ico-trash { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3Cpath d='M6 7l1 13h10l1-13'/%3E%3Cpath d='M9 7V4h6v3'/%3E%3C/svg%3E"); }
.rp-ico-pencil { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.8 2.8 0 0 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/%3E%3C/svg%3E"); }
.rp-ico-upload { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3'/%3E%3Cpath d='m7 8 5-5 5 5'/%3E%3Cpath d='M4 15v4a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-4'/%3E%3C/svg%3E"); }
.rp-ico-cloud-upload { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 13v8'/%3E%3Cpath d='m8 17 4-4 4 4'/%3E%3Cpath d='M20 16.6A5 5 0 0 0 18 7h-1.3A8 8 0 1 0 4 15.3'/%3E%3C/svg%3E"); }
.rp-ico-refresh { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 0 1-15.5 6.2L3 16'/%3E%3Cpath d='M3 21v-5h5'/%3E%3Cpath d='M3 12a9 9 0 0 1 15.5-6.2L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3C/svg%3E"); }
.rp-ico-panel-left { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M9 3v18'/%3E%3C/svg%3E"); }
.rp-ico-panel-right { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M15 3v18'/%3E%3C/svg%3E"); }
.rp-ico-globe { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3a14 14 0 0 1 0 18a14 14 0 0 1 0-18'/%3E%3C/svg%3E"); }
.rp-ico-bell { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.9 1.9 0 0 0 3.4 0'/%3E%3C/svg%3E"); }
.rp-ico-bulb { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3Cpath d='M12 2a7 7 0 0 0-4 12.7V17h8v-2.3A7 7 0 0 0 12 2Z'/%3E%3C/svg%3E"); }
.rp-ico-sun { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E"); }
.rp-ico-users { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='4'/%3E%3Cpath d='M2 21a7 7 0 0 1 14 0'/%3E%3Cpath d='M16 4a4 4 0 0 1 0 8'/%3E%3Cpath d='M22 21a7 7 0 0 0-4-6.3'/%3E%3C/svg%3E"); }
.rp-ico-user-plus { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='4'/%3E%3Cpath d='M2 21a7 7 0 0 1 14 0'/%3E%3Cpath d='M19 8v6'/%3E%3Cpath d='M16 11h6'/%3E%3C/svg%3E"); }
.rp-ico-handshake { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m11 17 2 2a1 1 0 1 0 3-3'/%3E%3Cpath d='m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.9-3.9a3 3 0 0 0-4.2 0l-.9.9a1 1 0 1 1-3-3l2.8-2.8a5.8 5.8 0 0 1 7.1-.9l.5.3a2 2 0 0 0 1.4.2L21 4'/%3E%3Cpath d='m21 3 1 11h-2'/%3E%3Cpath d='M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3'/%3E%3Cpath d='M3 4h8'/%3E%3C/svg%3E"); }
.rp-ico-message { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 0 1-13.2 8L3 21l1-4.8A9 9 0 1 1 21 12Z'/%3E%3C/svg%3E"); }
.rp-ico-file { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8Z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E"); }
.rp-ico-file-text { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8Z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 13h6'/%3E%3Cpath d='M9 17h4'/%3E%3C/svg%3E"); }
.rp-ico-file-pdf { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8Z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M8.5 13h2'/%3E%3Cpath d='M13 13h2.5'/%3E%3Cpath d='M8.5 17h7'/%3E%3C/svg%3E"); }
.rp-ico-sheet { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M3 15h18'/%3E%3Cpath d='M10 4v16'/%3E%3C/svg%3E"); }
.rp-ico-presentation { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='1.5'/%3E%3Cpath d='M12 16v4'/%3E%3Cpath d='M8 20h8'/%3E%3C/svg%3E"); }
.rp-ico-bar-chart { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4v16h16'/%3E%3Cpath d='M8 16v-5'/%3E%3Cpath d='M12 16V8'/%3E%3Cpath d='M16 16v-3'/%3E%3C/svg%3E"); }
.rp-ico-notebook { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.4 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7.4'/%3E%3Cpath d='M2 6h4'/%3E%3Cpath d='M2 10h4'/%3E%3Cpath d='M2 14h4'/%3E%3Cpath d='M2 18h4'/%3E%3Cpath d='M21.4 5.6a2 2 0 0 0-3-3L13 8l-1 4 4-1Z'/%3E%3C/svg%3E"); }
.rp-ico-book-open { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4h6a4 4 0 0 1 4 4v13a3 3 0 0 0-3-3H2Z'/%3E%3Cpath d='M22 4h-6a4 4 0 0 0-4 4v13a3 3 0 0 1 3-3h7Z'/%3E%3C/svg%3E"); }
.rp-ico-database { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='8' ry='3'/%3E%3Cpath d='M4 5v14c0 1.7 3.6 3 8 3s8-1.3 8-3V5'/%3E%3Cpath d='M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3'/%3E%3C/svg%3E"); }
.rp-ico-layers { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 9 5-9 5-9-5Z'/%3E%3Cpath d='m3 12.5 9 5 9-5'/%3E%3Cpath d='m3 16.5 9 5 9-5'/%3E%3C/svg%3E"); }
.rp-ico-network { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='2.5'/%3E%3Ccircle cx='18' cy='6' r='2.5'/%3E%3Ccircle cx='12' cy='18' r='2.5'/%3E%3Cpath d='M7.2 8.2 10.8 15.8'/%3E%3Cpath d='M16.8 8.2 13.2 15.8'/%3E%3C/svg%3E"); }
.rp-ico-help { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }
.rp-ico-image { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.5-3.5L7 21'/%3E%3C/svg%3E"); }
.rp-ico-audio { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 10v3'/%3E%3Cpath d='M6 6v11'/%3E%3Cpath d='M10 3v18'/%3E%3Cpath d='M14 8v7'/%3E%3Cpath d='M18 5v13'/%3E%3Cpath d='M22 10v3'/%3E%3C/svg%3E"); }
.rp-ico-video { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='14' height='12' rx='2'/%3E%3Cpath d='m16 10 6-3v10l-6-3'/%3E%3C/svg%3E"); }
.rp-ico-play { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4v16l13-8Z'/%3E%3C/svg%3E"); }
.rp-ico-mail { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
.rp-ico-calendar { --rp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M8 3v4'/%3E%3Cpath d='M16 3v4'/%3E%3C/svg%3E"); }
/* === end icons === */

/* The Bluey mark: the three brand bars, as on the site badge. */
.rp-mark-logo {
  display: inline-grid;
  gap: 2px;
  width: 16px;
  flex: none;
}

.rp-mark-logo i {
  display: block;
  height: 4.4px;
  border-radius: 3px;
}

.rp-mark-logo i:nth-child(1) { width: 80%; background: var(--rp-orange); }
.rp-mark-logo i:nth-child(2) { background: var(--rp-primary-deep); }
.rp-mark-logo i:nth-child(3) { background: var(--rp-cyan); }

.rp-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--rp-primary-deep);
  font: 700 19px/1 var(--rp-font-display);
  letter-spacing: -0.03em;
}

/* =====================================================================
   SHELL
   ===================================================================== */

/* ---------- window ---------- */

.rp-window {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(4, 3, 33, 0.12);
  border-radius: 22px;
  background: var(--rp-app);
  box-shadow: var(--rp-shadow-window);
  text-align: left;
}

.rp-window.is-flat { box-shadow: none; }
.rp-window.is-soft { box-shadow: 0 30px 70px -40px rgba(4, 3, 33, 0.45); }

/* Title bar. Site style: dots + workspace + ask box on one strip.
   Browser style: dots + a centred `.rp-url` / `.rp-chrome-title`. */
.rp-chrome {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  gap: 14px;
  min-height: 46px;
  padding: 8px 16px;
  border-bottom: 1px solid #e6e6ec;
  background: #fff;
}

.rp-dots {
  display: inline-flex;
  flex: none;
  gap: 6px;
}

.rp-dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e2e1e8;
}

.rp-dots.is-color i:nth-child(1) { background: #ff6159; }
.rp-dots.is-color i:nth-child(2) { background: #ffbd2e; }
.rp-dots.is-color i:nth-child(3) { background: #28c940; }

.rp-chrome-title {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  color: var(--rp-text-2);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.rp-url {
  position: absolute;
  left: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: min(420px, 46%);
  height: 28px;
  border-radius: 8px;
  background: var(--rp-app);
  color: var(--rp-text-3);
  font-size: 12px;
  translate: -50% 0;
  white-space: nowrap;
}

.rp-url .rp-ico { width: 11px; height: 11px; }

/* The replica says it is one, on its own strip under the title bar. */
.rp-note {
  flex: none;
  padding: 4px 16px 5px;
  border-bottom: 1px solid #e6e6ec;
  background: #fbfbfd;
  color: #8d8b9c;
  font-size: 10.5px;
  line-height: 1.3;
}

.rp-app {
  display: grid;
  flex: 1;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 0;
}

.rp-main {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.rp-page {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  padding: 20px 24px;
  overflow: hidden;
}

/* A page title row: "Conversa" + Compartilhar, "Base de Conhecimento"… */
.rp-page-bar {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 8px 20px;
  border-bottom: 1px solid var(--rp-border);
  background: #fff;
  font-size: 14px;
  font-weight: 600;
}

.rp-page-bar > .rp-btn:last-child { margin-left: auto; }

.rp-page-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.rp-page-head-ico {
  display: grid;
  flex: none;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--rp-surface-2);
  color: var(--rp-text-2);
}

.rp-page-title {
  color: var(--rp-text);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.rp-page-sub {
  margin-top: 3px;
  color: var(--rp-text-2);
  font-size: 13px;
}

/* ---------- topbar: workspace pill + "É só perguntar" ---------- */

.rp-topbar {
  display: flex;
  flex: none;
  align-items: center;
  gap: 16px;
  min-height: 52px;
  padding: 8px 18px;
  border-bottom: 1px solid var(--rp-border);
  background: #fff;
}

.rp-ws {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  color: var(--rp-text);
  font-weight: 600;
  white-space: nowrap;
}

.rp-ws-logo {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--rp-pill-bg);
  color: var(--rp-text);
  font-size: 10.5px;
  font-weight: 700;
}

.rp-ws-logo.is-brand {
  background: linear-gradient(180deg, var(--rp-orange) 0 36%, var(--rp-primary-deep) 36% 62%, var(--rp-cyan) 62%);
}

.rp-ws .rp-ico { width: 12px; height: 12px; color: var(--rp-text-3); }

.rp-search {
  display: inline-flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 380px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid #e6e6ec;
  border-radius: 9px;
  background: #f7f7f9;
  color: #8d8b9c;
  white-space: nowrap;
}

.rp-search > .rp-ico:first-child { width: 13px; height: 13px; color: var(--rp-cyan); }

.rp-kbd {
  margin-left: auto;
  padding: 1px 6px;
  border: 1px solid var(--rp-border);
  border-radius: 5px;
  background: #fff;
  color: var(--rp-text-3);
  font-size: 10px;
  font-weight: 600;
}

.rp-topbar-icons {
  display: inline-flex;
  gap: 16px;
  margin-left: auto;
  color: var(--rp-text-2);
}

/* ---------- sidebar ---------- */

.rp-sidebar {
  --rp-row-h: 30px;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 212px;
  min-height: 0;
  padding: 10px 8px;
  overflow: hidden;
  border-right: 1px solid #e6e6ec;
  background: #fff;
}

.rp-side-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  margin-bottom: 6px;
  padding: 0 8px;
}

.rp-side-brand .rp-ico { color: var(--rp-text-4); }

/* Rows sit on a fixed pitch so the active pill can be placed, and moved,
   by row index: `--row` counts sections and items alike from 0. */
.rp-nav {
  position: relative;
  display: flex;
  flex-direction: column;
}

.rp-nav-pill {
  position: absolute;
  top: calc(var(--row, 1) * var(--rp-row-h));
  left: 0;
  right: 0;
  height: var(--rp-row-h);
  border-radius: 9px;
  background: var(--rp-pill-bg);
}

.rp-nav-section,
.rp-nav-item {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  gap: 9px;
  height: var(--rp-row-h);
  padding-inline: 9px;
  white-space: nowrap;
}

.rp-nav-section {
  align-items: flex-end;
  padding-bottom: 7px;
  color: #8d8b9c;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.rp-nav-item {
  color: #3a3947;
  font-weight: 500;
}

.rp-nav-item > .rp-ico { color: #6e6c7e; }

.rp-nav-item.is-nested {
  padding-left: 23px;
  font-size: 12px;
}

.rp-nav-item.is-nested > .rp-ico { width: 14px; height: 14px; }

.rp-nav-item.is-active {
  border-radius: 9px;
  background: var(--rp-pill-bg);
}

.rp-nav-item.is-active,
.rp-nav-item.is-lit {
  color: #0f0e1d;
  font-weight: 600;
}

.rp-nav-item.is-active > .rp-ico,
.rp-nav-item.is-lit > .rp-ico {
  color: var(--rp-cyan-deep);
}

.rp-nav-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rp-nav-caret {
  width: 12px !important;
  height: 12px !important;
  margin-left: auto;
  color: var(--rp-text-4) !important;
}

.rp-nav-badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin-left: auto;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--rp-accent);
  color: var(--rp-primary);
  font-size: 10.5px;
  font-weight: 700;
}

.rp-side-user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 12px 6px 2px;
  border-top: 1px solid var(--rp-border);
}

.rp-side-user > div { min-width: 0; }
.rp-side-user b { display: block; font-size: 12.5px; font-weight: 600; }
.rp-side-user small { display: block; overflow: hidden; color: var(--rp-text-3); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

/* Collapsed to icons (static). */
.rp-sidebar.is-collapsed { width: 60px; }

.rp-sidebar.is-collapsed .rp-nav-label,
.rp-sidebar.is-collapsed .rp-nav-caret,
.rp-sidebar.is-collapsed .rp-side-user > :not(.rp-avatar),
.rp-sidebar.is-collapsed .rp-side-brand > :not(.rp-mark-logo) {
  display: none;
}

.rp-sidebar.is-collapsed .rp-nav-item,
.rp-sidebar.is-collapsed .rp-nav-item.is-nested {
  justify-content: center;
  padding-inline: 0;
}

.rp-sidebar.is-collapsed .rp-nav-section {
  align-items: center;
  gap: 0;
  padding: 0 12px;
  font-size: 0;
}

.rp-sidebar.is-collapsed .rp-nav-section::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rp-border);
}

.rp-sidebar.is-collapsed .rp-nav-badge {
  position: absolute;
  top: 3px;
  right: 7px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  font-size: 9px;
}

.rp-sidebar.is-collapsed .rp-side-brand { justify-content: center; padding: 0; }
.rp-sidebar.is-collapsed .rp-side-user { justify-content: center; padding-inline: 0; }

/* =====================================================================
   GENERIC
   ===================================================================== */

/* ---------- avatars ---------- */

.rp-avatar {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8e8bb8, var(--rp-primary));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.rp-avatar.is-xs { width: 20px; height: 20px; font-size: 8.5px; }
.rp-avatar.is-sm { width: 24px; height: 24px; font-size: 9.5px; }
.rp-avatar.is-lg { width: 40px; height: 40px; font-size: 14px; }
.rp-avatar.is-square { border-radius: 10px; }
.rp-avatar.is-cyan { background: linear-gradient(135deg, #3cc8f2, #046c8e); }
.rp-avatar.is-orange { background: linear-gradient(135deg, #ffb070, #e06c14); }
.rp-avatar.is-violet { background: linear-gradient(135deg, #a497ff, #5a48cf); }
.rp-avatar.is-green { background: linear-gradient(135deg, #4fd19c, #0f7a50); }
.rp-avatar.is-navy { background: linear-gradient(135deg, #4b4880, var(--rp-primary-deep)); }
.rp-avatar.is-rose { background: linear-gradient(135deg, #ff9aa8, #d0435a); }

.rp-avatars {
  display: inline-flex;
  align-items: center;
}

.rp-avatars > .rp-avatar {
  box-shadow: 0 0 0 2px #fff;
  font-size: 8px;
}

.rp-avatars > .rp-avatar.is-lg,
.rp-avatars > .rp-avatar:not(.is-xs):not(.is-sm) { font-size: 10px; }

.rp-avatars > .rp-avatar + .rp-avatar { margin-left: -3px; }

.rp-avatars-more {
  display: inline-grid;
  place-items: center;
  height: 24px;
  min-width: 24px;
  margin-left: -3px;
  padding: 0 6px;
  border-radius: 99px;
  background: var(--rp-surface-2);
  box-shadow: 0 0 0 2px #fff;
  color: var(--rp-text-2);
  font-size: 10.5px;
  font-weight: 700;
}

/* The Synapse answer avatar (sparkles on a cyan tile). */
.rp-assistant {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--rp-cyan-subtle);
  color: var(--rp-cyan-fg);
}

.rp-assistant > .rp-ico { width: 15px; height: 15px; }

.rp-assistant.is-ink {
  background: var(--rp-primary-deep);
  color: var(--rp-orange);
}

/* ---------- pills ---------- */

.rp-pill {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px;
  border-radius: 99px;
  background: var(--rp-surface-2);
  color: var(--rp-text-2);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.rp-pill .rp-ico { width: 12px; height: 12px; }
.rp-pill.is-cyan { background: var(--rp-cyan-subtle); color: var(--rp-cyan-fg); }
.rp-pill.is-green { background: var(--rp-success-subtle); color: var(--rp-success-fg); }
.rp-pill.is-orange { background: var(--rp-accent-subtle); color: var(--rp-accent-fg); }
.rp-pill.is-violet { background: var(--rp-violet-subtle); color: var(--rp-violet-fg); }
.rp-pill.is-navy { background: var(--rp-primary-subtle); color: var(--rp-primary); }
.rp-pill.is-ink { background: var(--rp-primary); color: #fff; }
.rp-pill.is-line { background: #fff; box-shadow: inset 0 0 0 1px var(--rp-border); }
.rp-pill.is-sm { height: 18px; padding: 0 7px; font-size: 10px; }

.rp-badge-new {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: 99px;
  background: var(--rp-cyan-subtle);
  color: var(--rp-cyan-fg);
  font-size: 10.5px;
  font-weight: 600;
}

.rp-beta {
  color: var(--rp-text-3);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* File-type badge: PDF / DOCX / XLSX / MP3 (site kit). */
.rp-ext {
  display: inline-grid;
  flex: none;
  place-items: center;
  min-width: 38px;
  height: 22px;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--rp-cyan-tint);
  color: var(--rp-cyan-fg);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.rp-ext.is-orange { background: var(--rp-orange-tint); color: #c4621a; }
.rp-ext.is-green { background: var(--rp-green-tint); color: #0f7a50; }
.rp-ext.is-violet { background: #efedff; color: #5a48cf; }

/* ---------- buttons ---------- */

.rp-btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--rp-surface-2);
  color: var(--rp-text);
  font: 600 13px/1 var(--rp-font-ui);
  white-space: nowrap;
}

.rp-btn .rp-ico { width: 14px; height: 14px; }
.rp-btn.is-primary { background: var(--rp-primary); color: #fff; }
.rp-btn.is-accent { background: var(--rp-accent); color: var(--rp-primary); }
.rp-btn.is-orange { background: var(--rp-orange); color: #fff; }
.rp-btn.is-ghost { border-color: var(--rp-border); background: #fff; color: var(--rp-text); }
.rp-btn.is-soft { background: var(--rp-surface-2); color: var(--rp-text); }
.rp-btn.is-disabled { background: #9896ad; color: #fff; }
.rp-btn.is-sm { height: 28px; padding: 0 10px; border-radius: 8px; font-size: 12px; gap: 5px; }
.rp-btn.is-sm .rp-ico { width: 12px; height: 12px; }
.rp-btn.is-lg { height: 42px; padding: 0 20px; border-radius: 12px; font-size: 14px; }
.rp-btn.is-block { width: 100%; }

.rp-icon-btn {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--rp-border);
  border-radius: 8px;
  background: #fff;
  color: var(--rp-text-3);
}

.rp-icon-btn.is-bare { border-color: transparent; background: transparent; }
.rp-icon-btn .rp-ico { width: 14px; height: 14px; }

/* ---------- form bits ---------- */

.rp-checkbox {
  position: relative;
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1.5px solid #c6c5d3;
  border-radius: 4px;
  background: #fff;
}

.rp-checkbox::after {
  content: "";
  width: 11px;
  height: 11px;
  background: #fff;
  -webkit-mask: var(--rp-svg-check) center / contain no-repeat;
  mask: var(--rp-svg-check) center / contain no-repeat;
  opacity: 0;
}

.rp-checkbox.is-checked { border-color: var(--rp-primary); background: var(--rp-primary); }
.rp-checkbox.is-checked::after { opacity: 1; }

.rp-input {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 4px 10px;
  border: 1px solid var(--rp-border);
  border-radius: 9px;
  background: #f5f5f8;
  color: var(--rp-text-4);
  white-space: nowrap;
}

.rp-input.is-white { background: #fff; }
.rp-input.is-focus { border-color: var(--rp-primary); box-shadow: 0 0 0 3px rgba(39, 37, 75, 0.12); color: var(--rp-text); }
.rp-input > .rp-ico { color: var(--rp-text-3); }

.rp-textarea {
  min-height: 62px;
  padding: 10px 12px;
  border: 1px solid var(--rp-border);
  border-radius: 10px;
  background: #fff;
  color: var(--rp-text-4);
}

.rp-textarea.is-filled { color: var(--rp-text); }
.rp-textarea.is-focus { border-color: var(--rp-cyan-deep); box-shadow: 0 0 0 3px rgba(12, 180, 234, 0.16); color: var(--rp-text); }

.rp-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 8px 0 10px;
  border: 1px solid var(--rp-border);
  border-radius: 8px;
  background: #fff;
  color: var(--rp-text);
  font-size: 12px;
  font-weight: 500;
}

.rp-select .rp-ico { width: 12px; height: 12px; color: var(--rp-text-3); }

.rp-seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--rp-border);
  border-radius: 11px;
  background: #fff;
}

.rp-seg > span {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 8px;
  color: var(--rp-text-2);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.rp-seg > .is-active { background: var(--rp-primary); color: #fff; }

/* ---------- toast ---------- */

.rp-toast {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border-radius: 99px;
  background: var(--rp-primary-deep);
  box-shadow: 0 12px 26px rgba(4, 3, 33, 0.25);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.rp-toast > .rp-ico { color: var(--rp-orange); }

/* Product style: white card, green check. */
.rp-toast.is-light {
  border: 1px solid var(--rp-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--rp-elev-overlay);
  color: var(--rp-text);
  font-weight: 500;
}

.rp-toast.is-light > .rp-ico { color: var(--rp-success); }

/* green disc with a white check (light toast, done markers) */
.rp-ok {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--rp-success);
  color: #fff;
}

.rp-ok > .rp-ico { width: 11px; height: 11px; }

/* ---------- step tabs (site hero: Perguntar · Aprovar · …) ---------- */

.rp-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--rp-font-body);
}

.rp-step {
  display: grid;
  gap: 8px;
  min-width: 96px;
  padding: 8px 10px 9px;
  color: rgba(4, 3, 33, 0.52);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
}

.rp-step.is-active { color: var(--rp-primary-deep); }

.rp-step-track {
  position: relative;
  display: block;
  height: 3px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(4, 3, 33, 0.1);
}

.rp-step.is-active .rp-step-track { background: rgba(4, 3, 33, 0.14); }

.rp-step.is-done .rp-step-track::after,
.rp-step.is-active .rp-step-track::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--rp-cyan), #7c6bf0, var(--rp-orange));
  transform-origin: left;
}

.rp-step.is-active .rp-step-track::after {
  animation: rp-fill var(--dur, 7s) linear var(--d, 0s) both;
}

/* ---------- cursor + click ring ---------- */

/* Place `.rp-cursor-at` at the start point (--x/--y inside a positioned
   parent); every nested `.rp-move` adds one leg (--dx/--dy, --d, --dur).
   The arrow's tip is the element's top-left corner. */
.rp-cursor-at {
  position: absolute;
  top: var(--y, 0);
  left: var(--x, 0);
  z-index: 50;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Anchor from the right / bottom edge instead (still the arrow's tip). */
.rp-cursor-at.from-right { left: auto; right: var(--x, 0); }
.rp-cursor-at.from-bottom { top: auto; bottom: var(--y, 0); }

.rp-move {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  animation: rp-move var(--dur, 0.9s) var(--rp-ease-io) var(--d, 0s) both;
}

.rp-cursor {
  position: absolute;
  top: -2px;
  left: -3px;
  width: 26px;
  height: 26px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M5 3.2v18.6l4.6-4.3 3 6.7 3.4-1.5-3-6.6h6.3Z' fill='%23111' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 2px 3px rgba(4, 3, 33, 0.28));
  transform-origin: 5px 3px;
}

/* A press: the arrow dips at --d. Put it on the cursor itself. */
.rp-cursor.rp-press-at {
  animation: rp-cursor-press 0.32s ease var(--d, 0s) both;
}

.rp-click {
  position: absolute;
  top: -22px;
  left: -22px;
  width: 44px;
  height: 44px;
  border: 2.5px solid var(--rp-cyan);
  border-radius: 50%;
  background: rgba(12, 180, 234, 0.18);
  opacity: 0;
  /* forwards only: before --d the ring must not exist */
  animation: rp-click 0.6s var(--rp-ease-out) var(--d, 0s) forwards;
}

/* =====================================================================
   CHAT
   ===================================================================== */

.rp-chat {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.rp-thread {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  padding: 20px 26px 12px;
  overflow: hidden;
}

.rp-thread.is-bottom { justify-content: flex-end; }

.rp-dock {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 10px;
  padding: 0 26px 18px;
}

/* ---------- bubble ---------- */

.rp-bubble-user {
  align-self: flex-end;
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 16px 16px 4px 16px;
  background: var(--rp-primary);
  color: #fff;
  font-size: 13px;
  line-height: 1.45;
}

.rp-bubble-user.is-deep { background: var(--rp-primary-deep); }
.rp-bubble-user.is-full { max-width: 100%; align-self: stretch; }

/* ---------- answer ---------- */

.rp-answer {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.rp-answer-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding-top: 4px;
  color: var(--rp-text);
  font-size: 13.5px;
  line-height: 1.6;
}

.rp-answer-body b,
.rp-answer-body strong { font-weight: 600; }

.rp-answer-body ul,
.rp-answer-body ol {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
}

.rp-answer-body li::marker { color: var(--rp-cyan); }

/* Site variant: a white card with a lead line, no avatar column. */
.rp-answer.is-card {
  display: block;
  padding: 14px 16px;
  border: 1px solid #e6e6ec;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(4, 3, 33, 0.04);
}

.rp-answer.is-card .rp-answer-body { padding-top: 0; font-size: 13px; }
.rp-answer.is-card .rp-answer-body > p:first-child { font-weight: 600; }

.rp-answer-tools {
  display: flex;
  gap: 12px;
  color: var(--rp-text-4);
}

/* Inline highlighted value: static, or swept in with `.rp-mark-in`. */
.rp-mark {
  padding: 0 4px;
  border-radius: 5px;
  background: linear-gradient(rgba(12, 180, 234, 0.18), rgba(12, 180, 234, 0.18)) no-repeat 0 0 / 100% 100%;
  color: #075f7e;
  font-weight: 600;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---------- activity rows ---------- */

.rp-activity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid #ececf2;
  border-radius: 12px;
  background: #fbfbfd;
  color: var(--rp-text-2);
  font-size: 12.5px;
  white-space: nowrap;
}

.rp-activity-dot {
  position: relative;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rp-success);
}

.rp-activity.is-running .rp-activity-dot {
  background: var(--rp-cyan);
  animation: rp-dot-pulse 1.2s ease-in-out infinite;
}

/* Running then done at --done: the pulse is overridden by the later,
   forwards-filled animation in the list. */
.rp-activity.is-live .rp-activity-dot {
  background: var(--rp-cyan);
  animation:
    rp-dot-pulse 1.2s ease-in-out infinite,
    rp-dot-done 0.3s ease var(--done, 9999s) forwards;
}

.rp-activity-ico {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--rp-border);
  border-radius: 6px;
  background: #fff;
  color: var(--rp-text-3);
}

.rp-activity-ico .rp-ico { width: 12px; height: 12px; }
.rp-activity-label { color: var(--rp-text-2); }

.rp-activity-query {
  min-width: 0;
  overflow: hidden;
  color: var(--rp-text);
  font-weight: 500;
  text-overflow: ellipsis;
}

.rp-activity-time {
  margin-left: auto;
  padding-left: 8px;
  color: var(--rp-text-4);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

/* Site variant: a compact pill, spinner then check. */
.rp-activity.is-pill {
  display: inline-flex;
  align-self: flex-start;
  gap: 8px;
  min-height: 0;
  padding: 6px 12px;
  border-color: #e3e3ea;
  border-radius: 99px;
  background: #fff;
  color: #5d5b6d;
  font-size: 11.5px;
}

.rp-activity.is-pill .rp-ico { width: 12px; height: 12px; color: var(--rp-success); }

/* ---------- compact data table ---------- */

.rp-table {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--rp-border);
  border-radius: 10px;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  font-size: 12.5px;
  line-height: 1.35;
}

.rp-table th,
.rp-table td {
  padding: 9px 12px;
  text-align: left;
  white-space: nowrap;
}

.rp-table th {
  border-bottom: 1px solid var(--rp-border);
  background: #fff;
  color: var(--rp-text);
  font-weight: 600;
}

.rp-table td {
  border-top: 1px solid #efeff4;
  background: #fafafc;
  color: var(--rp-text);
}

.rp-table tr:nth-child(2) td { border-top: 0; }
.rp-table th + th,
.rp-table td + td { border-left: 1px solid #efeff4; }
.rp-table .is-num { font-variant-numeric: tabular-nums; }
.rp-table tr.is-total td { font-weight: 700; }

/* ---------- sources ---------- */

.rp-sources {
  display: grid;
  gap: 4px;
  font-size: 12.5px;
}

.rp-sources-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  justify-self: start;
  padding: 2px 6px 2px 0;
  border-radius: 99px;
  color: var(--rp-text-3);
}

.rp-sources-stack {
  display: inline-flex;
}

.rp-sources-stack > i {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid #fff;
  border-radius: 50%;
  background: #ebebf2;
  color: var(--rp-text-3);
}

.rp-sources-stack > i + i { margin-left: -7px; }

.rp-sources-stack .rp-ico { width: 11px; height: 11px; }

.rp-sources-toggle > .rp-ico {
  width: 12px;
  height: 12px;
  transition: none;
}

.rp-sources.is-open .rp-sources-toggle > .rp-ico { rotate: 180deg; }

.rp-sources-list {
  display: grid;
  grid-template-rows: 0fr;
  max-width: 480px;
}

.rp-sources.is-open .rp-sources-list { grid-template-rows: 1fr; }

.rp-sources-list > ul {
  display: grid;
  gap: 2px;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
}

.rp-sources-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 12px;
}

.rp-sources-item.is-hover { background: var(--rp-primary-subtle); }

.rp-sources-ico {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ebebf2;
  color: var(--rp-text-3);
}

.rp-sources-ico .rp-ico { width: 13px; height: 13px; }
.rp-sources-name { min-width: 0; color: var(--rp-text-2); }
.rp-sources-name small { display: block; color: var(--rp-text-3); font-size: 11.5px; }

/* Site variant: the cyan chip under an answer. */
.rp-source-chip {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid rgba(12, 180, 234, 0.35);
  border-radius: 99px;
  background: var(--rp-cyan-tint);
  color: var(--rp-cyan-fg);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.rp-source-chip .rp-ico { width: 11px; height: 11px; }

/* ---------- format chips (Apresentação · Documento · …) ---------- */

.rp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--rp-border);
  border-radius: 99px;
  background: #fff;
  color: var(--rp-text-2);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
}

.rp-chip > .rp-ico { width: 13px; height: 13px; }
.rp-chip > .rp-ico.rp-ico-zap { width: 11px; height: 11px; color: var(--rp-orange); }
.rp-chip.is-active { border-color: var(--rp-primary); background: var(--rp-primary-subtle); color: var(--rp-text); }

/* ---------- composer ---------- */

.rp-composer {
  display: grid;
  gap: 10px;
  padding: 12px 14px 10px;
  border: 1px solid #e3e3ea;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(4, 3, 33, 0.06);
}

.rp-composer-text {
  display: grid;
  min-height: 20px;
  font-size: 13.5px;
  line-height: 1.45;
}

.rp-composer-text > * { grid-area: 1 / 1; }

.rp-composer-placeholder { color: var(--rp-text-4); }
.rp-composer-typed { color: var(--rp-text); white-space: nowrap; }

.rp-caret {
  display: inline-block;
  width: 1.5px;
  height: 1.15em;
  margin-left: 1px;
  background: var(--rp-cyan);
  vertical-align: -0.2em;
  animation: rp-blink 0.9s steps(1) infinite;
}

.rp-composer-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #8d8b9c;
  font-size: 12px;
}

.rp-composer-tools > .rp-ico { width: 15px; height: 15px; }

.rp-composer-pick {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--rp-text-2);
  font-weight: 500;
}

.rp-composer-pick .rp-ico { width: 13px; height: 13px; }
.rp-composer-pick .rp-ico:last-child { width: 10px; height: 10px; }

.rp-send {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-left: auto;
  border-radius: 50%;
  background: #ececf1;
  color: #6e6c7e;
}

.rp-send .rp-ico { width: 14px; height: 14px; }
.rp-send.is-ready { background: var(--rp-primary); color: #fff; }
.rp-send.is-sm { width: 26px; height: 26px; }

/* Goes ink when pressed at --d, and stays pressed-in colour. */
.rp-send.rp-press-at { animation: rp-send-press 0.5s ease var(--d, 0s) both; }

/* =====================================================================
   SHARE
   ===================================================================== */

.rp-scrim {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: rgba(29, 28, 48, 0.3);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.rp-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 560px;
  max-width: 100%;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--rp-elev-modal);
  color: var(--rp-text);
  font-family: var(--rp-font-ui);
  font-size: 13px;
  line-height: 1.45;
}

.rp-dialog-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--rp-border);
}

.rp-dialog-head > div { flex: 1; min-width: 0; }

.rp-dialog-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.rp-dialog-sub {
  margin-top: 3px;
  color: var(--rp-text-2);
  font-size: 12.5px;
}

.rp-dialog-x { color: var(--rp-text-3); }

.rp-dialog-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 20px 18px;
}

.rp-dialog-body > .rp-kicker:not(:first-child) { margin-top: 8px; }

.rp-dialog-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid var(--rp-border);
}

/* a leading non-button (checkbox label, avatars) pushes the buttons right */
.rp-dialog-foot > :first-child:not(.rp-btn) { margin-right: auto; }

.rp-check-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--rp-text-2);
  font-size: 12.5px;
}

/* person chip inside the "Com quem" field */
.rp-person-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 7px 0 3px;
  border: 1px solid var(--rp-border);
  border-radius: 99px;
  background: #fff;
  color: var(--rp-text);
  font-size: 12.5px;
  font-weight: 500;
}

.rp-person-chip .rp-ico { width: 11px; height: 11px; color: var(--rp-text-3); }

/* the three share modes */
.rp-modes {
  display: grid;
  gap: 8px;
}

.rp-mode {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--rp-border);
  border-radius: 12px;
  background: #fff;
}

.rp-mode.is-selected {
  border-color: var(--rp-primary);
  background: #efeff4;
}

.rp-mode-ico {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--rp-surface-2);
  color: var(--rp-text-2);
}

.rp-mode-ico.is-orange { background: var(--rp-accent-subtle); color: #d9701c; }
.rp-mode-ico.is-cyan { background: var(--rp-cyan-subtle); color: var(--rp-cyan-fg); }

.rp-mode-text { display: grid; gap: 2px; min-width: 0; }
.rp-mode-text b { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.rp-mode-text span { color: var(--rp-text-2); font-size: 12px; line-height: 1.45; }

/* collaboration side panel */
.rp-collab {
  display: flex;
  flex: none;
  flex-direction: column;
  width: 280px;
  min-height: 0;
  border-left: 1px solid var(--rp-border);
  background: #fff;
}

.rp-collab-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
  border-bottom: 1px solid var(--rp-border);
}

.rp-collab-head > .rp-ico { color: var(--rp-text-3); }
.rp-collab-head b { display: block; font-size: 13px; font-weight: 700; }
.rp-collab-head small { display: block; color: var(--rp-text-3); font-size: 11px; }

.rp-collab-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  padding: 12px;
  overflow: hidden;
}

.rp-collab-msg {
  display: grid;
  gap: 4px;
  justify-items: start;
}

.rp-collab-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--rp-text-3);
  font-size: 11px;
  font-weight: 700;
}

.rp-collab-meta time { font-weight: 500; }

.rp-collab-text {
  max-width: 92%;
  padding: 7px 11px;
  border-radius: 4px 12px 12px 12px;
  background: var(--rp-surface-2);
  color: var(--rp-text);
  font-size: 12.5px;
  line-height: 1.45;
}

.rp-collab-msg.is-me { justify-items: end; }
.rp-collab-msg.is-me .rp-collab-text { border-radius: 12px 4px 12px 12px; background: var(--rp-primary); color: #fff; }

.rp-collab-typing {
  padding: 0 12px 6px;
  color: var(--rp-text-3);
  font-size: 11px;
}

.rp-collab-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border-top: 1px solid var(--rp-border);
}

.rp-collab-input {
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  color: var(--rp-text-4);
  font-size: 12.5px;
}

/* "Conversa compartilhada · você e Ana" line + "juntos" pill */
.rp-together {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--rp-text-3);
  font-size: 12px;
  font-weight: 500;
}

/* three bouncing dots ("está escrevendo…") */
.rp-typing-dots {
  display: inline-flex;
  gap: 3px;
  vertical-align: middle;
}

.rp-typing-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: rp-bounce 1s ease-in-out infinite;
}

.rp-typing-dots i:nth-child(2) { animation-delay: 0.15s; }
.rp-typing-dots i:nth-child(3) { animation-delay: 0.3s; }

/* =====================================================================
   KNOWLEDGE BASE
   ===================================================================== */

.rp-kb-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.rp-kb-stats.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.rp-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--rp-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--rp-elev-raised);
}

.rp-stat.is-selected { border-color: var(--rp-primary); background: var(--rp-surface-2); }

.rp-stat-ico {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--rp-surface-2);
  color: var(--rp-text-2);
}

.rp-stat.is-selected .rp-stat-ico { background: #e2e2ea; }
.rp-stat-ico.is-cyan { background: var(--rp-cyan-subtle); color: var(--rp-cyan-fg); }
.rp-stat-ico.is-orange { background: var(--rp-accent-subtle); color: var(--rp-accent-fg); }
.rp-stat-ico.is-green { background: var(--rp-success-subtle); color: var(--rp-success-fg); }

.rp-stat-text { display: grid; min-width: 0; }

.rp-stat-num {
  color: var(--rp-text);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.rp-stat-label {
  color: var(--rp-text-2);
  font-size: 12px;
  line-height: 1.3;
}

/* folder tree (the "PASTAS" column) */
.rp-folder-tree {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 2px;
  width: 220px;
  padding: 14px 10px;
  border-right: 1px solid var(--rp-border);
  background: var(--rp-app);
}

.rp-folder-tree-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 8px;
  color: var(--rp-text-3);
}

.rp-folder-tree .rp-input { min-height: 30px; margin-bottom: 8px; font-size: 12px; }

.rp-folder {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 10px;
  border-radius: 9px;
  color: var(--rp-text-2);
  font-size: 12.5px;
  white-space: nowrap;
}

.rp-folder > .rp-ico { width: 14px; height: 14px; color: var(--rp-text-3); }
.rp-folder.is-nested { padding-left: 24px; }
.rp-folder.is-active { background: var(--rp-pill-bg); color: var(--rp-text); font-weight: 600; }
.rp-folder-count { margin-left: auto; color: var(--rp-text-4); font-size: 11px; }

/* folder card (grid of folders) */
.rp-folder-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--rp-border);
  border-radius: 14px;
  background: #fff;
}

.rp-folder-card-ico {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--rp-accent-subtle);
  color: #d9701c;
}

.rp-folder-card b { display: block; font-size: 13.5px; font-weight: 600; }
.rp-folder-card small { display: block; color: var(--rp-text-3); font-size: 12px; }

/* document row */
.rp-doc-list {
  display: grid;
  gap: 10px;
}

.rp-doc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 10px 14px;
  border: 1px solid var(--rp-border);
  border-radius: 14px;
  background: #fff;
}

.rp-doc-row.is-focus { border-color: var(--rp-primary); }

/* narrow screens (reels): two lines — file on top, chips + actions below;
   no checkbox, only the chevron survives from the actions */
.rp-doc-row.is-compact { flex-wrap: wrap; row-gap: 8px; column-gap: 8px; padding: 12px 14px; }
.rp-doc-row.is-compact > .rp-checkbox { display: none; }
.rp-doc-row.is-compact > .rp-file-ico { margin-right: 4px; }
.rp-doc-row.is-compact > .rp-doc-main { flex: 1 1 calc(100% - 60px); }
.rp-doc-row.is-compact > .rp-cap { margin-left: 48px; }
.rp-doc-row.is-compact .rp-doc-actions { margin-left: auto; }
.rp-doc-row.is-compact .rp-doc-actions > :not(:last-child) { display: none; }

.rp-file-ico {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--rp-surface-2);
  color: var(--rp-text-2);
}

.rp-file-ico.is-sheet { background: var(--rp-accent-subtle); color: #d9701c; }
.rp-file-ico.is-cyan { background: var(--rp-cyan-subtle); color: var(--rp-cyan-fg); }
.rp-file-ico.is-violet { background: var(--rp-violet-subtle); color: var(--rp-violet-fg); }

.rp-doc-main {
  display: grid;
  flex: 1;
  min-width: 0;
}

.rp-doc-name {
  overflow: hidden;
  color: var(--rp-text);
  font-size: 13.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rp-doc-meta { color: var(--rp-text-3); font-size: 11.5px; }

/* capability chip: what the Synapse does with the file (Ler / Consultar) */
.rp-cap {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}

.rp-cap .rp-ico { width: 11px; height: 11px; }
.rp-cap.is-read { background: var(--rp-violet-subtle); color: var(--rp-violet-fg); }
.rp-cap.is-query { background: var(--rp-cyan-subtle); color: var(--rp-cyan-fg); }

/* indexing status */
.rp-status {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 10px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.rp-status .rp-ico { width: 12px; height: 12px; }
.rp-status.is-pending { background: #fff; box-shadow: inset 0 0 0 1px var(--rp-border); color: var(--rp-text-2); }
.rp-status.is-indexing { background: var(--rp-cyan-subtle); color: var(--rp-cyan-fg); }
.rp-status.is-indexed { background: var(--rp-success-subtle); color: var(--rp-success-fg); }
.rp-status.is-blocked { background: rgba(4, 3, 33, 0.06); color: rgba(4, 3, 33, 0.55); }
.rp-status.is-refused { background: var(--rp-orange-tint); color: #a54d0e; }

.rp-doc-actions {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  color: var(--rp-text-3);
}

/* dropzone + flying file card */
.rp-dropzone {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 22px 18px;
  border: 1.5px dashed #cfcfdb;
  border-radius: 14px;
  background: #fff;
  color: var(--rp-text-2);
  text-align: center;
}

.rp-dropzone > .rp-ico { width: 22px; height: 22px; color: var(--rp-text); }
.rp-dropzone b { color: var(--rp-text); font-size: 13.5px; font-weight: 700; }
.rp-dropzone small { color: var(--rp-text-3); font-size: 11.5px; }

.rp-dropzone.is-hover {
  border-color: rgba(12, 180, 234, 0.7);
  background: rgba(12, 180, 234, 0.07);
}

.rp-dropzone.is-hover > .rp-ico { color: var(--rp-cyan-fg); }

/* site variant: one cyan line, "Arraste uma pasta inteira para cá" */
.rp-dropzone.is-site {
  display: flex;
  justify-content: center;
  padding: 12px;
  border-color: rgba(12, 180, 234, 0.45);
  background: rgba(12, 180, 234, 0.05);
  color: var(--rp-cyan-fg);
  font-weight: 600;
}

.rp-dropzone.is-site > .rp-ico { width: 14px; height: 14px; color: inherit; }

.rp-fly-card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px 9px 10px;
  border: 1px solid var(--rp-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 36px -12px rgba(4, 3, 33, 0.35);
  color: var(--rp-text);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

/* upload list row (site: Enviando → Recebido) */
.rp-upload-list { display: grid; gap: 8px; }

.rp-upload-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 64px 76px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #e6e6ec;
  border-radius: 10px;
  background: #fff;
}

.rp-upload-name {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rp-upload-state {
  display: grid;
  justify-items: start;
  font-size: 11px;
  font-weight: 600;
}

.rp-upload-state > * { grid-area: 1 / 1; }
.rp-upload-state .is-wait { color: #8d8b9c; }
.rp-upload-state .is-ok { display: inline-flex; align-items: center; gap: 4px; color: var(--rp-success); }
.rp-upload-state .rp-ico { width: 11px; height: 11px; }

/* permission row (site: "Recebe a resposta") */
.rp-perm-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #e6e6ec;
  border-radius: 12px;
  background: #fff;
}

.rp-perm-text { display: grid; min-width: 0; }
.rp-perm-text b { color: #0f0e1d; font-size: 12.5px; }
.rp-perm-text span { overflow: hidden; color: #6e6c7e; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

/* "Resposta do Synapse" answer card */
.rp-answer-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px;
  border: 1px solid var(--rp-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--rp-elev-raised);
}

.rp-answer-card-kicker {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--rp-cyan-fg);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.rp-answer-card-kicker .rp-ico { width: 14px; height: 14px; }
.rp-answer-card-echo { color: var(--rp-text-2); font-size: 12.5px; }
.rp-answer-card-echo b { color: var(--rp-text); font-weight: 600; }

.rp-answer-card-text {
  max-width: 62ch;
  color: var(--rp-text);
  font-size: 14px;
  line-height: 1.6;
}

.rp-answer-card-from {
  padding-top: 10px;
  border-top: 1px solid var(--rp-border);
}

.rp-answer-card-from > .rp-kicker { margin-bottom: 4px; font-size: 10px; }

.rp-from-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 6px;
  border-radius: 10px;
  color: var(--rp-text-2);
  font-size: 12.5px;
}

.rp-from-row > b {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--rp-text);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rp-from-row > span:not(.rp-pill) { color: var(--rp-text-3); font-size: 11.5px; white-space: nowrap; }
.rp-from-row > .rp-ico { width: 13px; height: 13px; color: var(--rp-text-3); }

/* connectors */
.rp-connector-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.rp-connector {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--rp-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--rp-elev-raised);
}

.rp-connector-top {
  display: flex;
  align-items: center;
  gap: 11px;
}

.rp-connector-top b { display: block; font-size: 13.5px; font-weight: 600; }
.rp-connector-top small { display: block; color: var(--rp-text-3); font-size: 11.5px; }

/* logo placeholder: a coloured circle with one letter, never a real logo */
.rp-logo {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--rp-border);
  border-radius: 50%;
  background: #fff;
  color: var(--rp-text-2);
  font-size: 14px;
  font-weight: 800;
}

.rp-logo.is-sm { width: 28px; height: 28px; font-size: 12px; }
.rp-logo.is-cyan { border-color: transparent; background: var(--rp-cyan-subtle); color: var(--rp-cyan-fg); }
.rp-logo.is-orange { border-color: transparent; background: var(--rp-accent-subtle); color: #d9701c; }
.rp-logo.is-green { border-color: transparent; background: var(--rp-success-subtle); color: var(--rp-success-fg); }
.rp-logo.is-violet { border-color: transparent; background: var(--rp-violet-subtle); color: var(--rp-violet-fg); }
.rp-logo.is-rose { border-color: transparent; background: rgba(234, 67, 53, 0.12); color: #c02f23; }
.rp-logo.is-navy { border-color: transparent; background: var(--rp-primary-subtle); color: var(--rp-primary); }

.rp-connector-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 28px;
}

.rp-connected {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--rp-success-fg);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.rp-connected::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rp-success);
}

.rp-connected span { color: var(--rp-text-3); font-weight: 500; }

/* sync row */
.rp-sync-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--rp-border);
  border-radius: 14px;
  background: #fff;
}

.rp-sync-main { display: grid; flex: 1; gap: 5px; min-width: 0; }
.rp-sync-main b { font-size: 13px; font-weight: 600; }
.rp-sync-main small { color: var(--rp-text-3); font-size: 11.5px; }
.rp-sync-main .rp-progress { max-width: 260px; }

.rp-sync-state {
  display: grid;
  justify-items: end;
  color: var(--rp-text-3);
  font-size: 11.5px;
  white-space: nowrap;
}

.rp-sync-state > * { grid-area: 1 / 1; }

/* =====================================================================
   DATA (site "Somar": sheet + bar chart)
   ===================================================================== */

.rp-sheet {
  align-self: start;
  overflow: hidden;
  border: 1px solid #e3e3ea;
  border-radius: 10px;
  background: #fff;
  font-size: 12px;
}

.rp-sheet-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 7px 12px;
  border-top: 1px solid #f0f0f4;
}

.rp-sheet-row.is-head {
  border-top: 0;
  background: #f7f7f9;
  color: #6e6c7e;
  font-weight: 700;
}

.rp-chart {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  min-height: 150px;
  padding: 16px 16px 8px;
  border: 1px solid #e3e3ea;
  border-radius: 12px;
  background: repeating-linear-gradient(to top, #f1f1f5 0 1px, transparent 1px 25%), #fff;
}

.rp-bar-col {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  height: 100%;
  min-height: 118px;
}

.rp-bar {
  width: 100%;
  max-width: 38px;
  border-radius: 7px 7px 3px 3px;
  background: linear-gradient(180deg, #7dd7f5, var(--rp-cyan));
  transform-origin: bottom;
}

.rp-bar.is-hot {
  background: linear-gradient(180deg, #ffc38f, var(--rp-orange));
  box-shadow: 0 6px 16px -6px rgba(246, 139, 53, 0.7);
}

.rp-bar-label { color: #8d8b9c; font-size: 10.5px; }

.rp-insight {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid rgba(246, 139, 53, 0.4);
  border-radius: 10px;
  background: var(--rp-orange-tint);
  color: #a54d0e;
  font-weight: 600;
}

.rp-output {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 5px 5px;
  border: 1px solid #e3e3ea;
  border-radius: 99px;
  background: #fff;
  font-size: 11.5px;
  font-weight: 600;
}

.rp-output > .rp-ico { width: 12px; height: 12px; color: var(--rp-success); }

/* =====================================================================
   PROJECTS
   ===================================================================== */

.rp-project {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--rp-app);
}

.rp-project-head {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 8px 18px;
  border-bottom: 1px solid var(--rp-border);
  background: #fff;
}

.rp-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-right: 12px;
  border-right: 1px solid var(--rp-border);
  color: var(--rp-text-2);
  font-weight: 500;
}

.rp-project-ico {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--rp-cyan-subtle);
  color: var(--rp-cyan-fg);
}

.rp-project-title {
  overflow: hidden;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rp-project-head > .rp-avatars { margin-left: auto; }

.rp-project-tabs {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-bottom: 1px solid var(--rp-border);
  background: #fff;
}

.rp-study {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 12px;
  border-radius: 9px;
  color: var(--rp-text-2);
  font-weight: 500;
}

.rp-study.is-active { background: var(--rp-surface-2); color: var(--rp-text); }
.rp-study .rp-ico { width: 12px; height: 12px; color: var(--rp-text-3); }

.rp-project-panes {
  display: grid;
  flex: 1;
  grid-template-columns: 270px minmax(0, 1fr) 312px;
  min-height: 0;
}

.rp-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--rp-app);
}

.rp-pane + .rp-pane { border-left: 1px solid var(--rp-border); }

.rp-pane-head {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--rp-border);
}

.rp-pane-title {
  color: var(--rp-text-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rp-pane-title.is-plain {
  color: var(--rp-text);
  font-size: 13.5px;
  letter-spacing: 0;
  text-transform: none;
}

.rp-pane-count { margin-left: auto; color: var(--rp-text-3); font-size: 11px; font-weight: 600; }
.rp-pane-head > .rp-ico:last-child { color: var(--rp-text-4); }

.rp-pane-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  padding: 12px;
  overflow: hidden;
}

.rp-pane-foot {
  flex: none;
  padding: 10px 14px;
  border-top: 1px solid var(--rp-border);
  color: var(--rp-text-3);
  font-size: 11.5px;
  line-height: 1.45;
}

.rp-src-group { margin: 6px 4px 2px; }

.rp-src-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 6px 4px;
  border-radius: 10px;
}

.rp-src-row > .rp-checkbox { margin-top: 5px; }

.rp-src-ico {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--rp-cyan-subtle);
  color: var(--rp-cyan-fg);
}

.rp-src-ico .rp-ico { width: 13px; height: 13px; }
.rp-src-text { display: grid; min-width: 0; }
.rp-src-text b { overflow: hidden; font-size: 12.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.rp-src-text small { overflow: hidden; color: var(--rp-text-3); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.rp-src-row.is-off { opacity: 0.55; }

/* empty state in the Conversa pane */
.rp-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin: auto;
  padding: 16px;
  text-align: center;
}

.rp-empty-ico {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 4px;
  border-radius: 14px;
  background: var(--rp-cyan-subtle);
  color: var(--rp-cyan-fg);
}

.rp-empty b { font-size: 16px; font-weight: 700; letter-spacing: -0.015em; }
.rp-empty span { max-width: 34ch; color: var(--rp-text-2); font-size: 12.5px; }

/* Estúdio */
.rp-studio-lead { color: var(--rp-text-2); font-size: 12px; }

.rp-studio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.rp-tile {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 6px;
  min-height: 66px;
  padding: 10px 4px;
  overflow: hidden;
  border: 1px solid var(--rp-border);
  border-radius: 12px;
  background: #fff;
  color: var(--rp-text-2);
  font-size: 11.5px;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
}

.rp-tile > .rp-ico { width: 17px; height: 17px; color: var(--rp-text-2); }
.rp-tile.is-selected { border-color: var(--rp-primary); background: var(--rp-surface-2); color: var(--rp-text); font-weight: 600; }

/* generating: a light sweep crosses the tile */
.rp-tile.is-busy::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(12, 180, 234, 0.16) 50%, transparent 70%) no-repeat;
  background-size: 250% 100%;
  animation: rp-sweep 1.4s linear infinite;
}

.rp-shelf {
  display: grid;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--rp-border);
}

.rp-deliverable {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--rp-border);
  border-radius: 12px;
  background: #fff;
}

.rp-deliverable .rp-file-ico { width: 30px; height: 30px; border-radius: 8px; }
.rp-deliverable .rp-file-ico .rp-ico { width: 14px; height: 14px; }
.rp-deliverable-text { display: grid; flex: 1; min-width: 0; }
.rp-deliverable-text b { overflow: hidden; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.rp-deliverable-text small { color: var(--rp-text-3); font-size: 10.5px; }

/* members ("Quem participa") */
.rp-member-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
}

.rp-member-row + .rp-member-row { border-top: 1px solid #f0f0f4; }
.rp-member-text { display: grid; flex: 1; min-width: 0; }
.rp-member-text b { font-size: 13px; font-weight: 600; }
.rp-member-text small { color: var(--rp-text-3); font-size: 11.5px; }
.rp-member-role { color: var(--rp-text-3); font-size: 12px; }

.rp-role-cards {
  display: flex;
  gap: 8px;
}

.rp-role-card {
  display: grid;
  gap: 1px;
  padding: 9px 12px;
  border: 1px solid var(--rp-border);
  border-radius: 11px;
  background: #fff;
}

.rp-role-card b { font-size: 13px; font-weight: 600; }
.rp-role-card small { color: var(--rp-text-2); font-size: 11.5px; }
.rp-role-card.is-selected { border-color: var(--rp-primary); background: #efeff4; }

/* mind map: nodes placed in % of the canvas, curves in one SVG */
.rp-mindmap {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  border: 1px solid var(--rp-border);
  border-radius: 14px;
  background:
    radial-gradient(circle, #c9c9d6 1px, transparent 1.3px) 0 0 / 22px 22px,
    #f7f7fa;
}

.rp-mindmap-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.rp-mindmap-lines path {
  fill: none;
  stroke: var(--rp-primary);
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.rp-mm-node {
  position: absolute;
  top: var(--y);
  left: var(--x);
  display: flex;
  align-items: center;
  width: var(--w, 32%);
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 12px;
  background: #e5e5ec;
  color: var(--rp-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  translate: 0 -50%;
}

.rp-mm-node.is-root {
  background: var(--rp-primary);
  color: #fff;
  font-size: 15px;
}

.rp-mm-knob {
  position: absolute;
  top: var(--y);
  left: var(--x);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--rp-border);
  border-radius: 50%;
  background: #fff;
  color: var(--rp-text-2);
  box-shadow: var(--rp-elev-raised);
  translate: -50% -50%;
}

.rp-mm-knob .rp-ico { width: 13px; height: 13px; }

/* =====================================================================
   MOTION HELPERS — every delay is `--d` (inherits to children)
   ===================================================================== */

/* fade + rise */
.rp-in { animation: rp-in 0.55s var(--rp-ease-out) var(--d, 0s) both; }

/* site pop: rise, slight scale, de-blur */
.rp-pop { animation: rp-pop 0.5s var(--rp-ease-out) var(--d, 0s) both; }

/* pop from the centre (for absolutely centred things: translate kept) */
.rp-pop-c { animation: rp-pop-c 0.45s var(--rp-ease-out) var(--d, 0s) both; }

/* plain fade */
.rp-fade { animation: rp-fade 0.35s ease var(--d, 0s) both; }

/* word by word (site answers): wrap each word, stagger --d */
.rp-w { animation: rp-word 0.38s ease var(--d, 0s) both; }

/* appear / disappear / visible-between */
.rp-show-at { animation: rp-sw-in 0.3s var(--rp-ease-out) var(--d, 0s) both; }
.rp-hide-at { animation: rp-sw-out 0.22s ease var(--d, 0s) forwards; }

.rp-during {
  animation:
    rp-sw-in 0.3s var(--rp-ease-out) var(--in, 0s) both,
    rp-sw-out 0.22s ease var(--out, 9999s) forwards;
}

/* stacked states in one cell; each child visible between --in and --out.
   The first child is already in at t=0 unless it sets its own --in. */
.rp-swap {
  display: inline-grid;
  justify-items: start;
  align-items: center;
}

.rp-swap.is-end { justify-items: end; }
.rp-swap.is-center { justify-items: center; }
.rp-swap.is-block { display: grid; }

.rp-swap > * {
  grid-area: 1 / 1;
  animation:
    rp-sw-in 0.32s var(--rp-ease-out) var(--in, 0s) both,
    rp-sw-out 0.22s ease var(--out, 9999s) forwards;
}

.rp-swap > :first-child { --in: -1s; }

/* typing: width grows one step per character (--chars), caret follows.
   Single line. Optional --w pins the final width exactly; without it the
   width is estimated and the last frame always shows the whole text. */
.rp-type {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  animation: rp-type calc(var(--chars, 20) * var(--rp-char-ms)) steps(var(--chars, 20), end) var(--d, 0s) both;
}

/* progress bar: fills from --from to --to (0..1) over --dur */
.rp-progress {
  display: block;
  height: 4px;
  overflow: hidden;
  border-radius: 99px;
  background: #ececf1;
}

.rp-progress > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--rp-cyan), #7c6bf0);
  transform-origin: left;
  animation: rp-progress var(--dur, 1.2s) var(--rp-ease) var(--d, 0s) both;
}

.rp-progress.is-static > i {
  animation: none;
  transform: scaleX(var(--to, 1));
}

.rp-progress.is-green > i { background: var(--rp-success); }

/* spinner (cyan ring) */
.rp-spin {
  display: inline-block;
  flex: none;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(12, 180, 234, 0.25);
  border-top-color: var(--rp-cyan);
  border-radius: 50%;
  animation: rp-rotate 0.8s linear infinite;
}

.rp-spin.is-sm { width: 10px; height: 10px; border-width: 1.75px; }
.rp-spin.is-lg { width: 18px; height: 18px; border-width: 2.5px; }

/* cyan highlight ring pulse, --n times (default 2) at --d.
   `.is-hold` keeps a ring on afterwards. Drawn on ::after so the host's
   own shadow is untouched. */
:where(.rp-hl) { position: relative; }

.rp-hl::after {
  content: "";
  position: absolute;
  inset: calc(var(--hl-gap, 3px) * -1);
  border-radius: calc(var(--hl-r, 12px) + var(--hl-gap, 3px));
  pointer-events: none;
  animation: rp-hl 1.1s var(--rp-ease-out) var(--d, 0s) var(--n, 2) both;
}

.rp-hl.is-hold::after {
  animation:
    rp-hl 1.1s var(--rp-ease-out) var(--d, 0s) var(--n, 2) both,
    rp-hl-hold 0.3s ease var(--d, 0s) both;
}

/* sweep a highlight under a value at --d */
.rp-mark.rp-mark-in { animation: rp-mark-in 0.6s var(--rp-ease) var(--d, 0s) both; }

/* bars grow up (charts) */
.rp-grow { animation: rp-grow 0.7s var(--rp-ease-out) var(--d, 0s) both; }

/* row lights up cyan and fades (sheet rows being read) */
.rp-scan { animation: rp-scan 0.9s ease var(--d, 0s) both; }

/* a card flies in from (--fx, --fy) and lands */
.rp-fly { animation: rp-fly 0.8s var(--rp-ease-out) var(--d, 0s) both; }

/* …or flies in and drops into the zone (vanishes) */
.rp-fly-drop { animation: rp-fly-drop 1.1s var(--rp-ease-io) var(--d, 0s) both; }

/* SVG strokes draw on: give the path pathLength="1" */
/* (keep that SVG's viewBox equal to its CSS size: no non-scaling stroke here) */
.rp-draw {
  vector-effect: none !important;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: rp-draw 0.7s var(--rp-ease) var(--d, 0s) forwards;
}

/* a button pressed at --d */
.rp-press-at { animation: rp-press 0.34s ease var(--d, 0s) both; }

/* selectable things switch on at --d */
.rp-mode.rp-select-at,
.rp-role-card.rp-select-at,
.rp-stat.rp-select-at,
.rp-tile.rp-select-at { animation: rp-select 0.3s ease var(--d, 0s) both; }

.rp-mode.rp-deselect-at,
.rp-role-card.rp-deselect-at { animation: rp-deselect 0.3s ease var(--d, 0s) both; }

.rp-checkbox.rp-check-at { animation: rp-check-box 0.2s ease var(--d, 0s) both; }
.rp-checkbox.rp-check-at::after { animation: rp-check-mark 0.3s var(--rp-ease-out) var(--d, 0s) both; }

.rp-seg > .rp-seg-at { animation: rp-seg-on 0.25s ease var(--d, 0s) both; }
.rp-seg > .rp-seg-off-at { animation: rp-seg-off 0.25s ease var(--d, 0s) both; }

/* sidebar: active pill slides from row --from to --to at --d */
.rp-nav-pill.rp-slide-at {
  animation: rp-pill-slide 0.55s var(--rp-ease-out) var(--d, 0s) both;
}

.rp-nav-item.rp-lit-at { animation: rp-lit 0.3s ease var(--d, 0s) both; }
.rp-nav-item.rp-lit-at > .rp-ico { animation: rp-lit-ico 0.3s ease var(--d, 0s) both; }
.rp-nav-item.rp-unlit-at { animation: rp-unlit 0.3s ease var(--d, 0s) both; }
.rp-nav-item.rp-unlit-at > .rp-ico { animation: rp-unlit-ico 0.3s ease var(--d, 0s) both; }

/* sidebar collapses to icons at --collapse (its own variable: the nav items
   inside may carry a --d of their own for lit/unlit, and --d inherits) */
.rp-sidebar.rp-collapse-at { animation: rp-collapse 0.5s var(--rp-ease-io) var(--collapse, 0s) both; }

.rp-sidebar.rp-collapse-at .rp-nav-label,
.rp-sidebar.rp-collapse-at .rp-nav-caret,
.rp-sidebar.rp-collapse-at .rp-nav-badge,
.rp-sidebar.rp-collapse-at .rp-nav-section,
.rp-sidebar.rp-collapse-at .rp-side-user > :not(.rp-avatar) {
  animation: rp-sw-out 0.2s ease var(--collapse, 0s) forwards;
}

.rp-sidebar.rp-collapse-at .rp-nav-item {
  animation: rp-nav-center 0.5s var(--rp-ease-io) var(--collapse, 0s) both;
}

.rp-sidebar.rp-collapse-at .rp-nav-item.rp-lit-at,
.rp-sidebar.rp-collapse-at .rp-nav-item.rp-unlit-at {
  animation:
    rp-nav-center 0.5s var(--rp-ease-io) var(--collapse, 0s) both,
    var(--rp-lit-anim) 0.3s ease var(--d, 0s) both;
}

.rp-nav-item.rp-lit-at { --rp-lit-anim: rp-lit; }
.rp-nav-item.rp-unlit-at { --rp-lit-anim: rp-unlit; }

/* sources list opens at --open (falls back to --d) */
.rp-sources.rp-open-at .rp-sources-list { animation: rp-open 0.45s var(--rp-ease-out) var(--open, var(--d, 0s)) both; }
.rp-sources.rp-open-at .rp-sources-toggle > .rp-ico { animation: rp-flip 0.3s ease var(--open, var(--d, 0s)) both; }

/* dropzone lights up while a file hovers it, between --in and --out */
.rp-dropzone.rp-hover-at {
  animation:
    rp-zone-on 0.2s ease var(--in, 0s) both,
    rp-zone-off 0.25s ease var(--out, 9999s) forwards;
}

/* collapse an element's width away at --d (e.g. the Aprovar button) */
.rp-shrink-at {
  max-width: 200px;
  overflow: hidden;
  animation: rp-shrink 0.35s var(--rp-ease) var(--d, 0s) forwards;
}

/* integer count-up: <span class="rp-count" style="--from:33;--to:34"> */
.rp-count {
  counter-reset: rp-n var(--rp-n);
  animation: rp-count var(--dur, 0.8s) var(--rp-ease) var(--d, 0s) both;
}

.rp-count::after { content: counter(rp-n) attr(data-suffix); }

/* ---------- keyframes ---------- */

@keyframes rp-in {
  from { opacity: 0; transform: translateY(var(--rise, 14px)); }
}

@keyframes rp-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.97); filter: blur(3px); }
}

@keyframes rp-pop-c {
  from { opacity: 0; scale: 0.94; }
}

@keyframes rp-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes rp-word {
  from { opacity: 0; filter: blur(4px); }
}

@keyframes rp-sw-in {
  from { opacity: 0; transform: translateY(4px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

@keyframes rp-sw-out {
  to { opacity: 0; visibility: hidden; }
}

@keyframes rp-type {
  from { max-width: 0; }
  99.99% { max-width: var(--w, calc(var(--chars, 20) * 0.54em)); }
  to { max-width: 100em; }
}

@keyframes rp-blink {
  50% { opacity: 0; }
}

@keyframes rp-progress {
  from { transform: scaleX(var(--from, 0)); }
  to { transform: scaleX(var(--to, 1)); }
}

@keyframes rp-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes rp-rotate {
  to { transform: rotate(360deg); }
}

@keyframes rp-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(12, 180, 234, 0.45); }
  50% { box-shadow: 0 0 0 5px rgba(12, 180, 234, 0); }
}

@keyframes rp-dot-done {
  to { background: var(--rp-success); box-shadow: 0 0 0 0 transparent; }
}

@keyframes rp-hl {
  0% { box-shadow: 0 0 0 0 rgba(12, 180, 234, 0.6); }
  70% { box-shadow: 0 0 0 9px rgba(12, 180, 234, 0); }
  100% { box-shadow: 0 0 0 9px rgba(12, 180, 234, 0); }
}

@keyframes rp-hl-hold {
  from { outline: 2px solid rgba(12, 180, 234, 0); }
  to { outline: 2px solid rgba(12, 180, 234, 0.9); }
}

@keyframes rp-mark-in {
  from { background-size: 0% 100%; color: inherit; }
  to { background-size: 100% 100%; }
}

@keyframes rp-grow {
  from { transform: scaleY(0); }
}

@keyframes rp-scan {
  0% { background: transparent; }
  30% { background: var(--rp-cyan-tint); }
  100% { background: transparent; }
}

@keyframes rp-fly {
  from { opacity: 0; transform: translate(var(--fx, 70px), var(--fy, -50px)) rotate(8deg) scale(0.92); }
}

@keyframes rp-fly-drop {
  0% { opacity: 0; transform: translate(var(--fx, 260px), var(--fy, -140px)) rotate(10deg) scale(0.95); }
  12% { opacity: 1; }
  70% { opacity: 1; transform: translate(0, 0) rotate(-2deg) scale(1); }
  100% { opacity: 0; transform: translate(0, 10px) rotate(0) scale(0.7); }
}

@keyframes rp-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes rp-press {
  0%, 100% { transform: none; }
  45% { transform: scale(0.93); }
}

@keyframes rp-send-press {
  0% { background: #ececf1; color: #6e6c7e; }
  40% { transform: scale(0.85); background: var(--rp-primary); color: #fff; }
  100% { transform: none; background: var(--rp-primary); color: #fff; }
}

@keyframes rp-cursor-press {
  0%, 100% { transform: none; }
  45% { transform: scale(0.84); }
}

@keyframes rp-click {
  0% { opacity: 0.95; transform: scale(0.3); }
  100% { opacity: 0; transform: scale(1.35); }
}

@keyframes rp-move {
  from { transform: translate(0, 0); }
  to { transform: translate(var(--dx, 0), var(--dy, 0)); }
}

@keyframes rp-select {
  to { border-color: var(--rp-primary); background: #efeff4; }
}

@keyframes rp-deselect {
  from { border-color: var(--rp-primary); background: #efeff4; }
  to { border-color: var(--rp-border); background: #fff; }
}

@keyframes rp-check-box {
  to { border-color: var(--rp-primary); background: var(--rp-primary); }
}

@keyframes rp-check-mark {
  from { opacity: 0; transform: scale(0.4); }
  to { opacity: 1; transform: none; }
}

@keyframes rp-seg-on {
  to { background: var(--rp-primary); color: #fff; }
}

@keyframes rp-seg-off {
  from { background: var(--rp-primary); color: #fff; }
  to { background: transparent; color: var(--rp-text-2); }
}

@keyframes rp-pill-slide {
  from { top: calc(var(--from, 1) * var(--rp-row-h)); }
  to { top: calc(var(--to, 1) * var(--rp-row-h)); }
}

@keyframes rp-lit {
  to { color: #0f0e1d; font-weight: 600; }
}

@keyframes rp-lit-ico {
  to { color: var(--rp-cyan-deep); }
}

@keyframes rp-unlit {
  from { color: #0f0e1d; font-weight: 600; }
  to { color: #3a3947; font-weight: 500; }
}

@keyframes rp-unlit-ico {
  from { color: var(--rp-cyan-deep); }
  to { color: #6e6c7e; }
}

@keyframes rp-collapse {
  to { width: 60px; }
}

@keyframes rp-nav-center {
  to { padding-left: 13px; }
}

@keyframes rp-open {
  from { grid-template-rows: 0fr; }
  to { grid-template-rows: 1fr; }
}

@keyframes rp-flip {
  to { rotate: 180deg; }
}

@keyframes rp-zone-on {
  to { border-color: rgba(12, 180, 234, 0.7); background: rgba(12, 180, 234, 0.07); }
}

@keyframes rp-zone-off {
  from { border-color: rgba(12, 180, 234, 0.7); background: rgba(12, 180, 234, 0.07); }
  to { border-color: #cfcfdb; background: #fff; }
}

@keyframes rp-shrink {
  to { max-width: 0; padding-inline: 0; margin-inline: -6px 0; opacity: 0; border-width: 0; }
}

@keyframes rp-count {
  from { --rp-n: var(--from, 0); }
  to { --rp-n: var(--to, 0); }
}

@keyframes rp-sweep {
  from { background-position: 150% 0; }
  to { background-position: -150% 0; }
}

@keyframes rp-bounce {
  0%, 60%, 100% { transform: none; opacity: 0.5; }
  30% { transform: translateY(-3px); opacity: 1; }
}

/* =====================================================================
   pr-: pieces the video shots add on top of the kit (video/promo/shots.py EXTRA_CSS)
   ===================================================================== */
/* promo-only pieces (pr-*) on top of the replica kit */
.rp-ui{font-family:var(--rp-font-ui);color:var(--rp-text)}
.pr-abs{position:absolute}
.pr-home{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px 36px}
.pr-home-logo{width:50px;height:50px;border-radius:14px;background:var(--rp-surface-2);display:grid;place-items:center;margin-bottom:4px}
.pr-home-logo img{width:30px;height:30px}
.pr-greet{font:700 27px/1.1 var(--rp-font-ui);letter-spacing:-.035em;color:var(--rp-text)}
.pr-greet-sub{color:var(--rp-text-2);font-size:14px;margin-top:-4px;margin-bottom:8px}
.pr-home .rp-composer{width:100%}
.pr-home .rp-chips{justify-content:center}
.rp-composer-typed.is-wrap{white-space:normal}
.pr-menu{position:absolute;z-index:30;background:#fff;border:1px solid var(--rp-border);border-radius:12px;box-shadow:var(--rp-elev-overlay);padding:6px;min-width:250px}
.pr-menu-head{padding:6px 10px 5px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rp-text-3)}
.pr-mi{display:flex;align-items:center;gap:10px;height:42px;padding:0 10px;border-radius:8px;font-size:13px;color:var(--rp-text);white-space:nowrap}
.pr-mi > .rp-ico{color:var(--rp-cyan)}
.pr-mi b{font-weight:500}
.pr-mi small{display:block;color:var(--rp-text-3);font-size:11px;line-height:1.2}
.pr-mi .pr-right{margin-left:auto;color:var(--rp-primary)}
.pr-mi.is-hover{background:#efeff4}
.pr-bg-between{animation:pr-bg-in .15s ease var(--in,99s) both,pr-bg-out .15s ease var(--out,9999s) forwards}
@keyframes pr-bg-in{from{background:transparent}to{background:#efeff4}}
@keyframes pr-bg-out{from{background:#efeff4}to{background:transparent}}
.pr-mention{color:var(--rp-cyan-fg);font-weight:600;background:var(--rp-cyan-subtle);border-radius:6px;padding:1px 6px;margin-right:4px}
.pr-modechip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:8px;background:var(--rp-cyan-subtle);color:var(--rp-cyan-fg);font-size:12px;font-weight:600;align-self:flex-start}
.rp-chip.pr-on-at{animation:pr-chip-on .25s ease var(--d,0s) both}
@keyframes pr-chip-on{to{border-color:rgba(12,180,234,.6);background:var(--rp-cyan-subtle);color:var(--rp-cyan-fg)}}
.pr-doc{background:#fff;border:1px solid var(--rp-border);border-radius:14px;box-shadow:var(--rp-elev-raised);overflow:hidden}
.pr-doc-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--rp-border);font-size:12.5px;font-weight:600}
.pr-doc-body{padding:14px 18px 16px;display:grid;gap:8px}
.pr-doc-title{font:700 17px/1.2 var(--rp-font-ui);letter-spacing:-.02em;color:var(--rp-text)}
.pr-doc-h{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--rp-cyan-fg);margin-top:4px}
.pr-line{display:block;height:7px;border-radius:99px;background:#e6e6ee;transform-origin:left;animation:rp-fill .6s var(--rp-ease) var(--d,0s) both}
.pr-doc-actions{display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid var(--rp-border);background:#fafafc}
.pr-core{position:absolute;display:grid;justify-items:center;gap:8px;translate:-50% -50%;z-index:2}
.pr-core-tile{width:var(--cs,96px);height:var(--cs,96px);border-radius:28%;display:grid;place-items:center;border:2px solid transparent;
 background:linear-gradient(#fff,#fff) padding-box,conic-gradient(from 210deg,#0cb4ea,#7c6bf0,#f58a36,#0cb4ea) border-box;
 box-shadow:0 0 0 10px rgba(12,180,234,.10),0 18px 40px rgba(4,3,33,.16)}
.pr-core-tile img{width:58%;height:58%}
.pr-core b{font:700 15px var(--rp-font-ui);color:var(--rp-text)}
.pr-node{position:absolute;display:grid;justify-items:center;gap:5px;translate:-50% -50%;text-align:center;z-index:2}
.pr-node .rp-logo{width:46px;height:46px;font-size:17px;background:#fff;box-shadow:0 8px 18px rgba(4,3,33,.08)}
.pr-node b{font-size:12.5px;font-weight:600;white-space:nowrap;color:var(--rp-text)}
.pr-node .rp-pill{height:19px;font-size:10px}
.pr-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1}
.pr-lines path,.pr-lines line{fill:none}
.pr-lines .base{stroke:rgba(4,3,33,.09);stroke-width:1.5}
.pr-lines .draw{stroke:rgba(12,180,234,.6);stroke-width:2}
.pr-lines .flow{stroke:var(--rp-cyan);stroke-width:3;stroke-dasharray:5 13;opacity:0;animation:rp-fade .3s ease var(--d,0s) forwards,pr-dash .9s linear var(--d,0s) infinite}
@keyframes pr-dash{to{stroke-dashoffset:-36}}
.pr-conv{animation:pr-conv var(--dur,1.2s) var(--rp-ease-io) var(--d,0s) both}
@keyframes pr-conv{0%{opacity:0;transform:translate(var(--fx),var(--fy)) scale(.9)}14%{opacity:1;transform:translate(var(--fx),var(--fy)) scale(1)}
 40%{opacity:1;transform:translate(var(--fx),var(--fy)) scale(1)}100%{opacity:0;transform:translate(0,0) scale(.3)}}
.pr-arrive{animation:pr-arrive .9s var(--rp-ease-out) var(--d,0s) both}
@keyframes pr-arrive{from{opacity:0;transform:translate(var(--fx,0),var(--fy,0)) rotate(-4deg) scale(.92)}}
.pr-node b{background:var(--pr-node-bg,rgba(245,245,248,.94));padding:0 6px;border-radius:6px}
.pr-node .rp-pill.is-green{background:#e3f4ec}
.pr-join{animation:pr-join .9s var(--rp-ease-io) var(--d,0s) both}
@keyframes pr-join{0%{opacity:0;transform:translate(var(--fx),var(--fy)) scale(1.5)}25%{opacity:1;transform:translate(var(--fx),var(--fy)) scale(1.5)}100%{opacity:1;transform:none}}
.pr-slide{animation:pr-slide .55s var(--rp-ease-out) var(--d,0s) both}
@keyframes pr-slide{from{transform:translateX(106%)}}
.pr-reveal{display:grid;animation:rp-open .5s var(--rp-ease-out) var(--d,0s) both}
.pr-reveal>*{min-height:0;overflow:hidden}
.pr-openw{animation:pr-openw .6s var(--rp-ease-io) var(--d,0s) both}
@keyframes pr-openw{from{width:0;border-left-width:0}to{width:var(--w)}}
.pr-sheet{animation:pr-sheet .55s var(--rp-ease-out) var(--d,0s) both}
@keyframes pr-sheet{from{transform:translateY(106%)}}
.pr-drop{animation:pr-drop .7s var(--rp-ease-out) var(--d,0s) both}
@keyframes pr-drop{from{opacity:0;transform:translateY(-70px) scale(.9)}}
.pr-letter{display:inline-block;animation:pr-letter .55s var(--rp-ease-out) var(--d,0s) both}
@keyframes pr-letter{from{opacity:0;transform:translateY(45%);filter:blur(6px)}}
.pr-ring{position:absolute;border-radius:50%;border:1.5px solid rgba(12,180,234,.35);translate:-50% -50%;animation:pr-ring 3.2s ease-out var(--d,0s) infinite}
@keyframes pr-ring{from{opacity:.9;transform:scale(.55)}to{opacity:0;transform:scale(1.35)}}
.pr-float{animation:pr-float 5s ease-in-out infinite alternate}
@keyframes pr-float{from{transform:perspective(1600px) rotateY(-8deg) rotateX(3deg) translateY(8px)}to{transform:perspective(1600px) rotateY(-6deg) rotateX(2deg) translateY(-8px)}}
.pr-mod{display:flex;align-items:center;gap:11px;padding:12px 14px;border:1px solid var(--rp-border);border-radius:14px;background:#fff;color:var(--rp-text-3);font-size:14px;font-weight:600;opacity:.55;box-shadow:var(--rp-elev-raised)}
.pr-mod .pr-mod-ico{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--rp-surface-2);color:var(--rp-text-3);flex:none}
.pr-mod small{display:block;font-size:11px;font-weight:500;color:var(--rp-text-3)}
.pr-mod.pr-lit{animation:pr-lit .5s ease var(--d,0s) both}
.pr-mod.pr-lit .pr-mod-ico{animation:pr-lit-ico .5s ease var(--d,0s) both}
@keyframes pr-lit{to{opacity:1;color:var(--rp-text);border-color:rgba(12,180,234,.55);box-shadow:0 0 0 4px rgba(12,180,234,.10),var(--rp-elev-raised)}}
@keyframes pr-lit-ico{to{background:var(--rp-cyan-subtle);color:var(--rp-cyan-fg)}}
.pr-cite{display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 4px;border-radius:5px;background:var(--rp-cyan-subtle);color:var(--rp-cyan-fg);font-size:10px;font-weight:700;margin-left:6px;vertical-align:1px}
.pr-meter{height:12px;border-radius:99px;background:#ececf1;overflow:hidden;display:flex}
.pr-meter > i{display:block;height:100%;transform-origin:left;animation:rp-fill .6s var(--rp-ease) var(--d,0s) both}
.pr-card{background:#fff;border:1px solid var(--rp-border);border-radius:16px;box-shadow:var(--rp-elev-raised);padding:14px 16px}
.pr-card-h{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--rp-text);margin-bottom:10px}
.pr-card-h .rp-ico{color:var(--rp-cyan-fg)}
.pr-audit{display:grid;grid-template-columns:40px auto minmax(0,1fr);gap:9px;align-items:center;padding:6px 2px;font-size:12px;color:var(--rp-text-2)}
.pr-audit time{color:var(--rp-text-3);font-variant-numeric:tabular-nums;font-size:11.5px}
.pr-audit b{color:var(--rp-text);font-weight:600}
.pr-hbar{display:grid;grid-template-columns:78px minmax(0,1fr) 36px;gap:8px;align-items:center;font-size:12px;color:var(--rp-text-2);padding:4px 0}
.pr-hbar i{display:block;height:9px;border-radius:99px;background:linear-gradient(90deg,var(--rp-cyan),#7c6bf0);transform-origin:left;animation:rp-fill .7s var(--rp-ease) var(--d,0s) both}
.pr-hbar b{font-weight:600;color:var(--rp-text);text-align:right;font-variant-numeric:tabular-nums}
.pr-step{position:relative;display:flex;align-items:center;gap:12px;padding:10px 12px;background:#fff;border:1px solid var(--rp-border);border-radius:12px;font-size:13px}
.pr-step-n{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--rp-surface-2);color:var(--rp-text-2);font-weight:700;font-size:12px;flex:none}
.pr-step small{display:block;color:var(--rp-text-3);font-size:11.5px}
.pr-step.is-human{border-color:rgba(245,138,54,.55);background:#fffaf5}
.pr-step.is-human .pr-step-n{background:var(--rp-accent-subtle);color:var(--rp-accent-fg)}
.pr-flow{display:grid;gap:9px;position:relative}
.pr-flow::before{content:"";position:absolute;left:26px;top:20px;bottom:20px;width:2px;background:repeating-linear-gradient(to bottom,#cfd0dc 0 4px,transparent 4px 8px)}
.pr-msg{max-width:82%;padding:9px 13px;font-size:13px;line-height:1.45;border-radius:14px}
.pr-msg.is-in{align-self:flex-start;background:#fff;border:1px solid var(--rp-border);border-radius:14px 14px 14px 4px}
.pr-msg.is-out{align-self:flex-end;background:var(--rp-cyan-tint);border:1px solid rgba(12,180,234,.3);border-radius:14px 14px 4px 14px}
.pr-by{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--rp-cyan-fg)}
.pr-inbox-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;padding:9px 10px;border-radius:12px;font-size:12.5px}
.pr-inbox-row b{display:block;font-weight:600;color:var(--rp-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-inbox-row .pr-msgline{display:block;color:var(--rp-text-3);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-inbox-row .pr-tagline{display:flex;margin-top:4px}
.pr-inbox-row.is-active{background:#fff;box-shadow:var(--rp-elev-raised);border:1px solid var(--rp-border)}
.pr-epcard{background:#fff;border:1px solid var(--rp-line);border-radius:22px;box-shadow:0 10px 30px -12px rgba(29,27,64,.18);padding:30px 32px 32px;display:grid;gap:12px;align-content:start}
.pr-kick{font:600 18px/1 var(--rp-font-body);letter-spacing:.24em;text-transform:uppercase;color:rgba(86,83,119,.85)}
.pr-lead{font:400 28px/1.45 var(--rp-font-body);color:var(--rp-ink-soft)}
.pr-hub{position:absolute;translate:-50% -50%;z-index:3}
.pr-agent-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 10px;border:1px solid var(--rp-border);border-radius:12px;background:#fff}
.pr-agent-row b{display:block;font-size:13px;font-weight:600}
.pr-agent-row small{display:block;font-size:11.5px;color:var(--rp-text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-approve{border:1.5px solid rgba(245,138,54,.6);border-radius:16px;background:#fff;box-shadow:0 16px 40px -18px rgba(245,138,54,.55);padding:14px 16px;display:grid;gap:8px}
.pr-approve-k{display:flex;align-items:center;gap:7px;color:var(--rp-accent-fg);font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.pr-page{position:relative;background:#fff;border:1px solid var(--rp-border);border-radius:10px;padding:14px 16px;display:grid;gap:7px;box-shadow:var(--rp-elev-overlay)}