/* All rules are scoped under .datao-docs-widget (the widget root element)
   so embedding the widget never leaks styles into the host application. */

.datao-docs-widget, .datao-docs-widget * { box-sizing: border-box; }

/* ── Scrollbar ── */
.datao-docs-widget .ds-scroll { scrollbar-width: thin; scrollbar-color: #d4d4d8 transparent; }
.datao-docs-widget .ds-scroll::-webkit-scrollbar { width: 12px; }
.datao-docs-widget .ds-scroll::-webkit-scrollbar-thumb { background: #e4e4e7; border-radius: 20px; border: 4px solid #fff; }
.datao-docs-widget .ds-scroll::-webkit-scrollbar-thumb:hover { background: #d4d4d8; }

/* ── Interactive rows ── */
.datao-docs-widget .ds-row { transition: background .12s, color .12s; }
.datao-docs-widget .ds-row:hover { background: #f4f4f5; }

.datao-docs-widget .ds-ghost { transition: background .12s, color .12s, border-color .12s; }
.datao-docs-widget .ds-ghost:hover { background: #f4f4f5; color: #09090b !important; }

.datao-docs-widget .ds-primary:hover { background: #5a4fe0 !important; }

.datao-docs-widget .ds-launch { transition: opacity .3s ease, transform .3s cubic-bezier(.4,0,.2,1), background .12s, visibility .3s; }
.datao-docs-widget .ds-launch:hover { background: #5a4fe0 !important; transform: translateY(-1px) !important; }

/* ── TOC items ── */
.datao-docs-widget .ds-tocitem { transition: background .12s, color .12s; }
.datao-docs-widget .ds-tocitem:hover { background: #eef2f7 !important; color: #09090b !important; }
.datao-docs-widget .ds-tocitem.on { background: #f2f0ff !important; color: #4b40cc !important; }

/* ── Search match highlight ── */
.datao-docs-widget .ds-hl { background: #fde68a; color: inherit; border-radius: 3px; padding: 0 1px; font-weight: 600; }

/* ── Back button ── */
.datao-docs-widget .ds-back:hover { background: #f1f1f4 !important; border-color: #d4d4d8 !important; }

/* ── Links ── */
.datao-docs-widget .ds-link:hover { color: #5a4fe0 !important; }

/* ── FAQ accordion ── */
.datao-docs-widget .ds-acc:hover .ds-acc-q { text-decoration: underline; text-underline-offset: 4px; }

/* ── Icon squares ── */
.datao-docs-widget .ds-ico { background: #f1f5f9; color: #64748b; transition: background .12s, color .12s; }
.datao-docs-widget .ds-row:hover .ds-ico { background: #f2f0ff; color: #6b5fff; }

/* ── Search input ──
   Champ rempli (mist-50) sur header blanc : un input blanc à bordure pâle s'y
   fondait et ne se lisait pas comme un champ. Au focus il passe au blanc +
   anneau violet — le champ « s'allume ».
   Le fond/la bordure/l'ombre DOIVENT rester ici (et pas en style inline dans
   docs-sidebar.js) : un style inline l'emporterait sur :focus-within et
   l'anneau de focus ne s'afficherait jamais. */
.datao-docs-widget .ds-inpwrap { background: #f9fbfb; border: 1px solid #dcdce0; box-shadow: 0 1px 2px rgba(9,9,11,0.05); transition: background .12s, border-color .12s, box-shadow .12s; }
.datao-docs-widget .ds-inpwrap:hover { border-color: #c4c4c8; }
.datao-docs-widget .ds-inpwrap:focus-within { background: #fff; border-color: #6b5fff; box-shadow: 0 0 0 3px rgba(107,95,255,0.18), 0 1px 2px rgba(9,9,11,0.05); }
.datao-docs-widget .ds-inp::placeholder { color: #71717a; }
.datao-docs-widget .ds-inp:focus { outline: none; }

/* ── Overlay ── */
.datao-docs-widget .ds-overlay { transition: opacity .34s ease; }

/* ── Panel ── */
/* visibility dans la transition : reste "visible" pendant l'animation de
   fermeture, puis passe hidden à la fin (retire le panneau du tab-order). */
.datao-docs-widget .ds-panel { transition: transform .34s cubic-bezier(.4,0,.2,1), width .34s cubic-bezier(.4,0,.2,1), visibility .34s; }

/* ── TOC container ── */
.datao-docs-widget .ds-toc { transition: width .34s cubic-bezier(.4,0,.2,1); }

/* ── Markdown body ── */
.datao-docs-widget .md-body { font-size: 13.5px; color: #3f3f46; line-height: 1.66; }
.datao-docs-widget .md-body > *:first-child { margin-top: 0; }
.datao-docs-widget .md-body h1, .datao-docs-widget .md-body h2, .datao-docs-widget .md-body h3, .datao-docs-widget .md-body h4 { color: #09090b; line-height: 1.3; }
/* H1 = grande partie : le plus fort, nettement détaché, souligné */
.datao-docs-widget .md-body h1 { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; margin: 40px 0 14px; padding-bottom: 9px; border-bottom: 1px solid #e4e4e7; }
/* H2 = étape : titre intermédiaire, bien aéré au-dessus */
.datao-docs-widget .md-body h2 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; margin: 30px 0 9px; }
/* H3 = détail : intitulé « eyebrow » gris majuscule, radicalement distinct */
.datao-docs-widget .md-body h3 { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #71717a; margin: 24px 0 8px; }
.datao-docs-widget .md-body h4 { font-size: 13px; font-weight: 600; letter-spacing: -0.006em; margin: 20px 0 8px; }
.datao-docs-widget .md-body p { margin: 0 0 14px; }
.datao-docs-widget .md-body ul, .datao-docs-widget .md-body ol { margin: 0 0 15px; padding-left: 20px; }
/* Réaffirmer les puces/numéros : les resets CSS de l'app hôte (ex. Tailwind
   Preflight : `ul,ol{list-style:none}`) les suppriment sinon — le widget étant
   injecté dans le DOM de l'hôte, pas dans une iframe. Sélecteur scopé = plus
   spécifique qu'un reset d'élément nu, donc prioritaire. */
.datao-docs-widget .md-body ul { list-style: disc outside; }
.datao-docs-widget .md-body ol { list-style: decimal outside; }
.datao-docs-widget .md-body li { margin: 5px 0; padding-left: 3px; }
.datao-docs-widget .md-body ul li::marker { color: #a1a1aa; }
.datao-docs-widget .md-body ol li::marker { color: #6b5fff; font-family: 'Geist Mono', monospace; font-size: 12px; }
.datao-docs-widget .md-body a { color: #6b5fff; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: #dcd8ff; cursor: pointer; }
.datao-docs-widget .md-body a:hover { color: #5a4fe0; }
.datao-docs-widget .md-body strong { color: #09090b; font-weight: 600; }
.datao-docs-widget .md-body em { color: #6b5fff; font-style: normal; font-weight: 500; }
.datao-docs-widget .md-body code { font-family: 'Geist Mono', monospace; font-size: 12px; background: #f4f4f5; border: 1px solid #e4e4e7; border-radius: 4px; padding: 1px 5px; }
.datao-docs-widget .md-body table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 4px 0 17px; border: 1px solid #e4e4e7; }
.datao-docs-widget .md-body th { text-align: left; padding: 9px 12px; background: #f4f4f5; color: #71717a; font-weight: 500; border-bottom: 1px solid #e4e4e7; }
.datao-docs-widget .md-body td { padding: 9px 12px; border-bottom: 1px solid #e4e4e7; vertical-align: top; line-height: 1.45; }
.datao-docs-widget .md-body tr:last-child td { border-bottom: none; }
.datao-docs-widget .md-body td:first-child { color: #09090b; font-weight: 500; }
.datao-docs-widget .md-body hr { border: none; border-top: 1px solid #e4e4e7; margin: 20px 0; }
.datao-docs-widget .md-body img { max-width: 100%; height: auto; display: block; border-radius: 10px; border: 1px solid #e4e4e7; margin: 6px 0 17px; box-shadow: 0 1px 2px rgba(9,9,11,0.05), 0 4px 12px -4px rgba(9,9,11,0.08); }
/* Images sur fond transparent : `![alt](src "plain")` retire cadre + ombre. */
.datao-docs-widget .md-body img[title="plain"] { border: none; box-shadow: none; border-radius: 0; }

/* ── Timeline steps (frontmatter steps: true) ── */
.datao-docs-widget .md-body .md-step { position: relative; padding-left: 44px; padding-bottom: 22px; }
.datao-docs-widget .md-body .md-step:last-of-type { padding-bottom: 0; }
/* dashed connector, drawn only between two consecutive steps */
.datao-docs-widget .md-body .md-step:has(+ .md-step)::before { content: ''; position: absolute; left: 14px; top: 32px; bottom: 0; border-left: 2px dashed #ddd8ff; }
/* numbered circle */
.datao-docs-widget .md-body .md-step-num { position: absolute; left: 0; top: -1px; width: 30px; height: 30px; border-radius: 50%; background: #f2f0ff; border: 1px solid #ddd8ff; color: #4b40cc; display: flex; align-items: center; justify-content: center; font-family: 'Geist Mono', monospace; font-size: 13px; font-weight: 500; }
/* the step heading, aligned next to the circle (no underline / big margin here) */
.datao-docs-widget .md-body .md-step h2 { margin: 4px 0 9px; padding: 0; border: none; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.datao-docs-widget .md-body .md-step > :last-child { margin-bottom: 0; }

/* ── Summary timeline ( > [!STEPS] ) — a compact, self-contained recap card,
   with FILLED circles to distinguish it from the step-by-step timeline above ── */
.datao-docs-widget .md-body .md-summary { margin: 0 0 22px; padding: 22px; background: #faf9ff; border: 1px solid #ece9ff; border-radius: 12px; }
.datao-docs-widget .md-body .md-sum-step { position: relative; padding-left: 40px; padding-bottom: 22px; }
.datao-docs-widget .md-body .md-sum-step:last-child { padding-bottom: 0; }
.datao-docs-widget .md-body .md-sum-step:has(+ .md-sum-step)::before { content: ''; position: absolute; left: 13px; top: 30px; bottom: 2px; border-left: 2px dashed #d5cffb; }
.datao-docs-widget .md-body .md-sum-num { position: absolute; left: 0; top: 0; width: 27px; height: 27px; border-radius: 50%; background: #6b5fff; color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Geist Mono', monospace; font-size: 12.5px; font-weight: 500; box-shadow: 0 2px 6px -1px rgba(107,95,255,0.5); }
.datao-docs-widget .md-body .md-sum-t { font-size: 13px; line-height: 1.5; color: #3f3f46; padding-top: 4px; min-height: 23px; }
.datao-docs-widget .md-body .md-sum-t strong { color: #09090b; font-weight: 600; }
.datao-docs-widget .md-body .md-sum-t a { color: #4b40cc; }

/* ── Changelog ( layout: changelog ) — timeline verticale (même principe que
   les steps) : chaque « ## <date> » devient une entrée avec un cercle marqué
   d'une icône calendrier rose, reliée à la suivante par un trait pointillé. À
   droite : la date (petit eyebrow), le titre en gras (1er paragraphe), puis le
   contenu (puces, catégories « ### … »). ── */
.datao-docs-widget .md-changelog .md-cl-entry { position: relative; padding-left: 44px; padding-bottom: 26px; }
.datao-docs-widget .md-changelog .md-cl-entry:last-child { padding-bottom: 0; }
/* connecteur pointillé, tracé uniquement entre deux entrées consécutives */
.datao-docs-widget .md-changelog .md-cl-entry:has(+ .md-cl-entry)::before {
  content: ''; position: absolute; left: 14px; top: 34px; bottom: 0; border-left: 2px dashed #f7d6e6;
}
/* cercle avec icône calendrier rose */
.datao-docs-widget .md-changelog .md-cl-dot {
  position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%;
  background: #fdf2f8 no-repeat center; border: 1px solid #fbcfe8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23ec4899' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  background-size: 15px 15px;
}
.datao-docs-widget .md-changelog .md-cl-date { font-size: 12px; font-weight: 600; color: #ec4899; padding-top: 6px; }
/* le 1er paragraphe après la date = le titre de l'entrée */
.datao-docs-widget .md-changelog .md-cl-date + p {
  font-size: 15.5px; font-weight: 650; letter-spacing: -0.01em; color: #09090b;
  line-height: 1.3; margin: 3px 0 13px;
}
.datao-docs-widget .md-changelog .md-cl-date + p strong { color: #09090b; }
.datao-docs-widget .md-changelog .md-cl-body > :last-child { margin-bottom: 0; }
.datao-docs-widget .md-changelog h3 { margin: 16px 0 7px; }
.datao-docs-widget .md-changelog ul { margin-bottom: 12px; }

/* ── Callouts ── */
.datao-docs-widget .cal { margin: 8px 0 17px; display: flex; gap: 11px; border-radius: 8px; padding: 12px 13px; border: 1px solid; }
.datao-docs-widget .cal svg { flex-shrink: 0; margin-top: 1px; }
.datao-docs-widget .cal-body { min-width: 0; }
.datao-docs-widget .cal-l { font-size: 12.5px; font-weight: 600; margin-bottom: 3px; }
.datao-docs-widget .cal-t { font-size: 12.5px; line-height: 1.6; color: #3f3f46; }
.datao-docs-widget .cal-tip { background: #f2f0ff; border-color: #ddd8ff; }
.datao-docs-widget .cal-tip .cal-l { color: #4b40cc; }
.datao-docs-widget .cal-note { background: #eff6ff; border-color: #d3e4fd; }
.datao-docs-widget .cal-note .cal-l { color: #1d4ed8; }
.datao-docs-widget .cal-important { background: #fff8ed; border-color: #fce4bd; }
.datao-docs-widget .cal-important .cal-l { color: #b45309; }

/* ── Embedded videos (> [!VIDEO] directive, Cloudflare Stream player) ──
   Starts at 16/9; the Stream SDK then sets the container's aspect-ratio to
   the video's real dimensions (see initStream in docs-sidebar.js). */
.datao-docs-widget .vid { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; border: 1px solid #e4e4e7; background: #0b0a13; margin: 8px 0 17px; }
.datao-docs-widget .vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }

/* ── Screenshot placeholders ── */
.datao-docs-widget .shot { margin: 8px 0 17px; border: 1px dashed #e4e4e7; border-radius: 10px; background: #f4f4f5; padding: 24px 18px; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.datao-docs-widget .shot .shot-l { font-size: 12px; color: #71717a; text-align: center; }

/* ── Carte connecteur MCP (> [!CONNECT] directive) ──
   Seul bloc sombre de la doc : il reprend les couleurs de Claude (fond
   anthracite, accent #d97757) pour être lu comme « ceci se passe chez Claude,
   pas dans Datao » — même composant que sur datao.ma/claude. */
.datao-docs-widget .ds-conn { margin: 8px 0 17px; border-radius: 14px; background: #1b1715; border: 1px solid rgba(255,255,255,0.08); padding: 14px; display: flex; flex-direction: column; gap: 11px; }
.datao-docs-widget .ds-conn-top { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.datao-docs-widget .ds-conn-ic { flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); color: #ef9a78; }
.datao-docs-widget .ds-conn-txt { flex: 1; min-width: 150px; }
.datao-docs-widget .ds-conn-name { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: #fff; letter-spacing: -0.01em; }
.datao-docs-widget .ds-conn-tag { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #ef9a78; background: rgba(217,119,87,0.12); border: 1px solid rgba(217,119,87,0.28); border-radius: 5px; padding: 2px 5px; }
.datao-docs-widget .ds-conn-sub { font-size: 12px; color: #b9aca6; margin-top: 3px; line-height: 1.4; }
.datao-docs-widget .ds-conn-open { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; border-radius: 9px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.07); padding: 9px 13px; font-size: 12.5px; font-weight: 600; color: #f2e8e3 !important; text-decoration: none !important; transition: background .12s, border-color .12s; }
.datao-docs-widget .ds-conn-open:hover { background: rgba(255,255,255,0.12); border-color: rgba(217,119,87,0.45); }
.datao-docs-widget .ds-conn-url { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-radius: 11px; border: 1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.22); padding: 8px 8px 8px 12px; }
.datao-docs-widget .ds-conn-caret { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; font-weight: 600; color: #d97757; }
.datao-docs-widget .ds-conn-url code { flex: 1; min-width: 140px; overflow-x: auto; white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: #f7efeb; background: none; border: none; padding: 0; }
.datao-docs-widget .ds-conn-copy { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; border: none; border-radius: 9px; background: #d97757; color: #fff; font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 9px 14px; cursor: pointer; transition: background .12s; }
.datao-docs-widget .ds-conn-copy:hover { background: #e08463; }

/* ── Chat IA ── */
/* Segmented control Documentation / Chat IA */
.datao-docs-widget .ds-seg-btn:hover:not(.ds-seg-btn-on) { color: #3f3f46 !important; background: rgba(255,255,255,0.5) !important; }

/* Questions suggérées (état vide) */
.datao-docs-widget .ds-chip:hover { background: #fff !important; border-color: #c9c2ff !important; }

/* Carte support (passage à un humain) — bouton rose */
.datao-docs-widget .ds-support-btn { transition: background .12s; }
.datao-docs-widget .ds-support-btn:hover { background: #db2777 !important; }
/* Bouton de prise de RDV : même forme que le bouton support, mais en violet
   marque — ne PAS réutiliser .ds-support-btn, dont le hover rose est en
   !important et écraserait la couleur. */
.datao-docs-widget .ds-book-btn { transition: background .12s; }
.datao-docs-widget .ds-book-btn:hover { background: #5a4ff0 !important; }

/* Cartes « À lire dans la doc » (articles recommandés sous une réponse) */
.datao-docs-widget .ds-reccard { transition: border-color .12s, box-shadow .12s; }
.datao-docs-widget .ds-reccard:hover { border-color: #c9c2ff !important; box-shadow: 0 3px 10px -3px rgba(107,95,255,0.28) !important; }
.datao-docs-widget .ds-reccard:hover .ds-ico { background: #f2f0ff; color: #6b5fff; }

/* Barre de saisie du chat : anneau violet au focus (comme la recherche) */
.datao-docs-widget .ds-chat-inpwrap { transition: border-color .12s, box-shadow .12s; }
.datao-docs-widget .ds-chat-inpwrap:focus-within { border-color: #6b5fff; box-shadow: 0 4px 18px rgba(9,9,11,0.12), 0 1px 3px rgba(9,9,11,0.06), 0 0 0 3px rgba(107,95,255,0.18); }
.datao-docs-widget .ds-chat-inp::placeholder { color: #71717a; }

/* Bulle assistant : réutilise .md-body mais un peu plus grand et compact que
   le corps d'article (c'est une bulle de conversation, pas une page). */
.datao-docs-widget .ds-msg-ai .md-body { font-size: 14px; line-height: 1.6; }
.datao-docs-widget .ds-msg-ai .md-body p { margin: 10px 0; }
.datao-docs-widget .ds-msg-ai .md-body > :first-child { margin-top: 10px; }
.datao-docs-widget .ds-msg-ai .md-body > :last-child { margin-bottom: 10px; }
/* Titres dans une bulle IA : le style « sous-libellé » des articles (h3 =
   11.5px gris majuscule, h1 = 18px souligné) est illisible ou trop lourd ici.
   On en refait un vrai titre de section, à peine plus gros que le texte. */
.datao-docs-widget .ds-msg-ai .md-body h1,
.datao-docs-widget .ds-msg-ai .md-body h2,
.datao-docs-widget .ds-msg-ai .md-body h3,
.datao-docs-widget .ds-msg-ai .md-body h4 {
  font-size: 14.5px; font-weight: 600; color: #09090b; line-height: 1.35;
  text-transform: none; letter-spacing: -0.01em;
  margin: 18px 0 7px; padding: 0; border: none;
}
.datao-docs-widget .ds-msg-ai .md-body ul, .datao-docs-widget .ds-msg-ai .md-body ol { margin: 10px 0; }
/* Liste numérotée d'une réponse → mini timeline : cercles pleins violets +
   pointillés (comme le résumé [!STEPS] des articles), mais SANS cadre. */
.datao-docs-widget .ds-msg-ai .md-body ol { list-style: none; counter-reset: dsstep; padding-left: 0; }
.datao-docs-widget .ds-msg-ai .md-body ol > li { position: relative; counter-increment: dsstep; padding-left: 34px; padding-bottom: 14px; margin: 0; }
.datao-docs-widget .ds-msg-ai .md-body ol > li:last-child { padding-bottom: 0; }
.datao-docs-widget .ds-msg-ai .md-body ol > li::marker { content: none; }
.datao-docs-widget .ds-msg-ai .md-body ol > li::before { content: counter(dsstep); position: absolute; left: 0; top: 1px; width: 23px; height: 23px; border-radius: 50%; background: #6b5fff; color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Geist Mono', monospace; font-size: 12px; font-weight: 500; box-shadow: 0 2px 5px -1px rgba(107,95,255,0.5); }
.datao-docs-widget .ds-msg-ai .md-body ol > li:not(:last-child)::after { content: ''; position: absolute; left: 11px; top: 27px; bottom: 1px; border-left: 2px dashed #d5cffb; }

/* Scrollbar de la conversation (même style que .ds-scroll) */
.datao-docs-widget .ds-chat-scroll { scrollbar-width: thin; scrollbar-color: #d4d4d8 transparent; }
.datao-docs-widget .ds-chat-scroll::-webkit-scrollbar { width: 12px; }
.datao-docs-widget .ds-chat-scroll::-webkit-scrollbar-thumb { background: #e4e4e7; border-radius: 20px; border: 4px solid #f9fbfb; }
.datao-docs-widget .ds-chat-scroll::-webkit-scrollbar-thumb:hover { background: #d4d4d8; }

/* Indicateur « en train d'écrire » (trois points) */
.datao-docs-widget .ds-typing { display: inline-flex; gap: 4px; align-items: center; }
.datao-docs-widget .ds-typing-dot { width: 6px; height: 6px; border-radius: 50%; background: #6b5fff; animation: ds-typing-b 1.15s infinite ease-in-out; }
.datao-docs-widget .ds-typing-dot:nth-child(2) { animation-delay: .16s; }
.datao-docs-widget .ds-typing-dot:nth-child(3) { animation-delay: .32s; }
@keyframes ds-typing-b {
  0%, 60%, 100% { opacity: .28; transform: translateY(0) scale(.82); box-shadow: none; }
  30% { opacity: 1; transform: translateY(-3px) scale(1); box-shadow: 0 2px 6px -1px rgba(107,95,255,0.5); }
}