/* Yunling Motion System V2 (P0-1.2). Brand motion language: mountain / light /
 * people / action / glass / floating island / fluid / soft-spring feedback.
 * Native cross-document View Transitions + tokens + route families + reveals.
 * Kill-switch: <html data-yl-motion="off"> disables names/effects.
 * Rule: ?v= is pipeline-owned (scripts/lab/asset-fingerprint.cjs rewrites
 * dist references post-build). Do not hand-edit hashes. */

/* ============ 1. MOTION TOKENS ============ */
:root {
  --yl-motion-instant: 120ms;
  --yl-motion-micro: 180ms;
  --yl-motion-fast: 180ms;
  --yl-motion-ui: 260ms;
  --yl-motion-filter: 300ms;
  --yl-motion-page: 540ms;
  --yl-motion-major: 590ms;
  --yl-motion-shared: 640ms;
  --yl-motion-back: 560ms;
  --yl-motion-cinematic: 720ms;
  --yl-ease-standard: cubic-bezier(.22, 1, .36, 1);
  --yl-ease-enter: cubic-bezier(.16, 1, .3, 1);
  --yl-ease-exit: cubic-bezier(.4, 0, .2, 1);
  --yl-ease-emphasized: cubic-bezier(.2, 0, 0, 1);
  --yl-ease-spring-soft: cubic-bezier(.34, 1.4, .44, 1);
  --yl-ease-spring-firm: cubic-bezier(.3, 1.25, .4, 1);
  /* P0-1 aliases (kept, mapped). */
  --motion-fast: var(--yl-motion-fast);
  --motion-normal: var(--yl-motion-page);
  --motion-shared: var(--yl-motion-shared);
  --ease-yunling: var(--yl-ease-standard);
}
/* Production: native MPA view transitions. No ClientRouter. */
@view-transition {
  navigation: auto;
}

/* ============ 2/3. PAGE CHOREOGRAPHY + SHARED MORPH ============ */
/* Ridge Flow (default): old compresses like the view pulls back, new rises.
 * Never a plain opacity fade. */
html:not([data-yl-motion="off"])::view-transition-old(root) {
  animation: yl-ridge-out var(--yl-motion-page) var(--yl-ease-exit) both;
}
html:not([data-yl-motion="off"])::view-transition-new(root) {
  animation: yl-ridge-in var(--yl-motion-page) var(--yl-ease-enter) both;
}
@keyframes yl-ridge-out {
  to { opacity: .84; transform: translateY(-16px) scale(.97); }
}
@keyframes yl-ridge-in {
  from { opacity: 0; transform: translateY(14px); }
}
/* TYPE A — Mountain Reveal (from home): new background establishes first,
 * content follows; slightly longer, calmer. */
html[data-yl-from="home"]:not([data-yl-motion="off"])::view-transition-old(root) {
  animation: yl-retreat var(--yl-motion-major) var(--yl-ease-exit) both;
}
html[data-yl-from="home"]:not([data-yl-motion="off"])::view-transition-new(root) {
  animation: yl-advance var(--yl-motion-major) var(--yl-ease-enter) both;
}
/* Mountain Reveal V2.2: 0% stable -> 15% retreat begins -> 35% plane
 * visible -> 65% content established -> 100% settle. */
@keyframes yl-retreat {
  0% { opacity: 1; transform: none; }
  15% { opacity: .98; transform: translateY(-3px) scale(.995); }
  100% { opacity: .8; transform: translateY(-20px) scale(.962); }
}
@keyframes yl-advance {
  0% { opacity: 0; transform: translateY(34px) scale(.988); }
  35% { opacity: .75; transform: translateY(16px) scale(.994); }
  65% { opacity: 1; transform: translateY(4px) scale(.999); }
  100% { opacity: 1; transform: none; }
}
/* Direction-aware: back reverses the relationship (new settles from below). */
html[data-yl-dir="back"]:not([data-yl-motion="off"])::view-transition-old(root) {
  animation: yl-back-out var(--yl-motion-back) var(--yl-ease-exit) both;
}
html[data-yl-dir="back"]:not([data-yl-motion="off"])::view-transition-new(root) {
  animation: yl-back-in var(--yl-motion-back) var(--yl-ease-enter) both;
}
@keyframes yl-back-out {
  to { opacity: 0; transform: translateY(12px); }
}
@keyframes yl-back-in {
  from { opacity: 0; transform: translateY(-10px) scale(.996); }
}
/* Header / island continuity: same-element morph reads as stability. */
html:not([data-yl-motion="off"])::view-transition-group(yl-header) {
  animation-duration: var(--yl-motion-fast);
}
html:not([data-yl-motion="off"])::view-transition-group(yl-island) {
  animation-duration: var(--yl-motion-ui);
}
html:not([data-yl-motion="off"])::view-transition-new(yl-island) {
  animation: yl-island-settle var(--yl-motion-ui) var(--yl-ease-standard) both;
}
@keyframes yl-island-settle {
  from { opacity: .6; transform: scale(.94); }
  60% { opacity: 1; transform: scale(1.02); }
  to { opacity: 1; transform: scale(1); }
}
/* TYPE B — Shared Element Expansion: the browser morphs move/resize natively
 * (proven pairing). UA group animations cannot be name-pattern matched, so
 * radius/elevation ride the default morph; no invalid selectors are used. */
/* Title trails slightly (Human Focus). */
html:not([data-yl-motion="off"])::view-transition-group(yl-title) {
  animation-delay: 80ms;
  animation-duration: var(--yl-motion-shared);
}
/* Shared forward settles a touch later; back stays brisk. */
html[data-yl-from]:not([data-yl-dir="back"]):not([data-yl-motion="off"])::view-transition-group(yl-title) {
  animation-delay: 140ms;
}
/* ============ 15. LOCALE D V2 — Quiet Language Shift ============ */
/* Same content, new language: soften, brief sweep, resolve. Never morph text.
 * Target 180-280ms total. */
html[data-yl-nav="locale"]:not([data-yl-motion="off"])::view-transition-old(root) {
  animation: yl-locale-out 180ms var(--yl-ease-exit) both;
}
html[data-yl-nav="locale"]:not([data-yl-motion="off"])::view-transition-new(root) {
  animation: yl-locale-in 240ms var(--yl-ease-enter) both;
}
@keyframes yl-locale-out {
  to { opacity: .35; transform: scale(.998); }
}
@keyframes yl-locale-in {
  from { opacity: .35; }
}

/* ============ 4. TRANSITION OVERLAY LAYER (.yl-veil, JS-injected) ============ */
/* Brand continuity, not a loader: faint light sweep, never blocks input,
 * never delays navigation. */
.yl-veil {
  position: fixed; inset: 0; z-index: 2147483000; pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(255, 255, 255, .14), transparent 60%),
    linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .10) 50%, transparent 58%);
}
.yl-veil.yl-veil-go { animation: yl-veil-sweep 480ms var(--yl-ease-exit) both; }
.yl-veil.yl-veil-locale { animation-duration: 260ms; }
/* Yunling Light Path: low, local, directional — mountain-foot glow that travels
 * a short distance. Only for home->section, shared-detail, island open. */
.yl-veil.yl-veil-path { animation: yl-light-path 300ms var(--yl-ease-exit) both; }
@keyframes yl-light-path {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}
.yl-veil.yl-veil-path {
  background:
    radial-gradient(60% 34% at 50% 108%, rgba(255, 244, 214, .20), transparent 70%),
    linear-gradient(100deg, transparent 46%, rgba(255, 255, 255, .12) 52%, transparent 58%);
}
@keyframes yl-veil-sweep {
  0% { opacity: 0; }
  18% { opacity: 1; }
  100% { opacity: 0; }
}

/* ============ 6. HEADER (continuity, no re-animation) ============ */
/* Header itself morphs (yl-header); only the active indicator enters. */
.desktop-nav a[aria-current="page"] {
  position: relative;
}
.desktop-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: currentColor; border-radius: 2px;
  transform-origin: left center;
  animation: yl-indicator-in 300ms var(--yl-ease-enter) both;
}
@keyframes yl-indicator-in {
  from { opacity: 0; transform: scaleX(.3); }
  60% { opacity: 1; }
}
/* Retract -> extend across MPA documents: old page retracts on leave
 * (best effort before unload), new page extends on arrival. */
html[data-yl-navleave]:not([data-yl-motion="off"]) .desktop-nav a[aria-current="page"]::after {
  animation: none;
  transition: transform 120ms var(--yl-ease-exit), opacity 120ms linear;
  transform: scaleX(0);
  opacity: 0;
}

/* ============ 7. HERO ENTRANCE (detail pages) ============ */
/* image establishes -> eyebrow -> title -> description -> CTA. ~600ms total.
 * Small moves only: opacity + 4-12px, no 30px slides. */
html:not([data-yl-motion="off"]) main .detail-photo,
html:not([data-yl-motion="off"]) main .detail-hero,
html:not([data-yl-motion="off"]) main [data-hero] {
  animation: yl-hero-establish var(--yl-motion-shared) var(--yl-ease-enter) both;
}
@keyframes yl-hero-establish {
  from { opacity: 0; transform: scale(.96) translateY(10px); }
  55% { opacity: 1; }
}
/* Shared-detail landing: the arriving hero settles like the same object. */
html[data-yl-from]:not([data-yl-dir="back"]):not([data-yl-motion="off"]) main .detail-photo,
html[data-yl-from]:not([data-yl-dir="back"]):not([data-yl-motion="off"]) main .detail-hero {
  animation-name: yl-hero-land;
}
@keyframes yl-hero-land {
  from { opacity: 0; transform: scale(.94) translateY(14px); }
  55% { opacity: 1; transform: scale(1.004) translateY(2px); }
  80% { transform: scale(1) translateY(0); }
  to { opacity: 1; transform: none; }
}
/* Back arrivals settle quicker than forward shared. */
html[data-yl-dir="back"]:not([data-yl-motion="off"]) main .detail-photo,
html[data-yl-dir="back"]:not([data-yl-motion="off"]) main .detail-hero {
  animation-duration: var(--yl-motion-back);
}
/* Shared-detail arrivals: heading lines settle in the 420-620ms window
 * (title morph itself rides the UA group; lines follow, back excluded). */
html[data-yl-from]:not([data-yl-dir="back"]):not([data-yl-motion="off"]) main .page-heading > *:nth-child(1) { animation-delay: 220ms; }
html[data-yl-from]:not([data-yl-dir="back"]):not([data-yl-motion="off"]) main .page-heading > *:nth-child(2) { animation-delay: 300ms; }
html[data-yl-from]:not([data-yl-dir="back"]):not([data-yl-motion="off"]) main .page-heading > *:nth-child(3) { animation-delay: 360ms; }
html[data-yl-from]:not([data-yl-dir="back"]):not([data-yl-motion="off"]) main .page-heading > *:nth-child(4) { animation-delay: 410ms; }
html[data-yl-from]:not([data-yl-dir="back"]):not([data-yl-motion="off"]) main .page-heading > *:nth-child(n+5) { animation-delay: 450ms; }
html:not([data-yl-motion="off"]) main .page-heading > * {
  animation: yl-hero-line var(--yl-motion-ui) var(--yl-ease-enter) both;
}
html:not([data-yl-motion="off"]) main .page-heading > *:nth-child(1) { animation-delay: 60ms; }
html:not([data-yl-motion="off"]) main .page-heading > *:nth-child(2) { animation-delay: 110ms; }
html:not([data-yl-motion="off"]) main .page-heading > *:nth-child(3) { animation-delay: 160ms; }
html:not([data-yl-motion="off"]) main .page-heading > *:nth-child(4) { animation-delay: 210ms; }
html:not([data-yl-motion="off"]) main .page-heading > *:nth-child(n+5) { animation-delay: 250ms; }
@keyframes yl-hero-line {
  from { opacity: 0; transform: translateY(10px); }
}

/* ============ 8/9. SECTION REVEALS + STAGGER ============ */
/* JS tags curated containers; children stagger inside a <=180ms window. */
html:not([data-yl-motion="off"]) [data-yl-reveal] {
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--yl-motion-page) var(--yl-ease-enter),
    transform var(--yl-motion-page) var(--yl-ease-enter);
}
html:not([data-yl-motion="off"]) [data-yl-reveal].yl-in {
  opacity: 1; transform: none;
}
html:not([data-yl-motion="off"]) [data-yl-reveal="group"] > *:nth-child(2) { transition-delay: 40ms; }
html:not([data-yl-motion="off"]) [data-yl-reveal="group"] > *:nth-child(3) { transition-delay: 80ms; }
html:not([data-yl-motion="off"]) [data-yl-reveal="group"] > *:nth-child(4) { transition-delay: 120ms; }
html:not([data-yl-motion="off"]) [data-yl-reveal="group"] > *:nth-child(n+5) { transition-delay: 140ms; }
/* Homepage reveal variants: difference comes from content role, one token set.
 * soft = plain blocks; media = image-led; story = full-bleed narrative;
 * stat = numbers/dates (fade, barely moves). Stagger window <=180ms. */
html:not([data-yl-motion="off"]) [data-yl-reveal-variant="media"] {
  transform: translateY(20px) scale(.985);
  transition-duration: var(--yl-motion-page);
}
html:not([data-yl-motion="off"]) [data-yl-reveal-variant="story"] {
  transform: translateY(26px);
  transition-duration: var(--yl-motion-major);
}
html:not([data-yl-motion="off"]) [data-yl-reveal-variant="stat"] {
  transform: translateY(8px);
  transition-duration: var(--yl-motion-ui);
}
html:not([data-yl-motion="off"]) [data-yl-reveal-variant].yl-in {
  transform: none;
}

/* ============ 10. COUNT CONTRACT (dormant: no eligible markup in P0-1.2) ============ */
.yl-count { font-variant-numeric: tabular-nums; }

/* ============ 11. FLOATING ISLAND V2 ============ */
/* Avatar: soft spring response, overshoot <=3%. Panel: stretch continuity. */
html:not([data-yl-motion="off"]) .yl-island-avatar {
  transition: transform var(--yl-motion-ui) var(--yl-ease-spring-firm);
}
html:not([data-yl-motion="off"]) .yl-island-avatar:hover {
  transform: scale(1.03);
}
html:not([data-yl-motion="off"]) .yl-island-avatar:active {
  transform: scale(.97);
}
html:not([data-yl-motion="off"]) .yl-island-panel-clip {
  transform-origin: bottom right;
}
html:not([data-yl-motion="off"]) .yl-island-panel:not([hidden]) .yl-island-panel-clip,
html:not([data-yl-motion="off"]) .yl-island.yl-dock[data-state="expanded"] .yl-island-panel-clip {
  animation: yl-panel-open 330ms var(--yl-ease-spring-soft) both;
}
/* Panel content enters last, opacity only (text/forms never scale). Scoped to
 * the inner children so the clip keeps the shell animation (yl-panel-open). */
html:not([data-yl-motion="off"]) .yl-island.yl-dock[data-state="expanded"] .yl-island-panel-inner > * {
  animation: yl-panel-content var(--yl-motion-fast) var(--yl-ease-enter) both;
}
html:not([data-yl-motion="off"]) .yl-island.yl-dock[data-state="expanded"] .yl-island-panel-inner > *:nth-child(2) { animation-delay: 90ms; }
html:not([data-yl-motion="off"]) .yl-island.yl-dock[data-state="expanded"] .yl-island-panel-inner > *:nth-child(n+3) { animation-delay: 160ms; }
@keyframes yl-panel-content {
  from { opacity: 0; }
}
@keyframes yl-panel-open {
  from { opacity: 0; transform: scale(.96) translateY(6px); }
  70% { opacity: 1; transform: scale(1.015) translateY(0); }
  to { opacity: 1; transform: none; }
}

/* Card press: immediate touch feedback (click -> visual response). */
html:not([data-yl-motion="off"]) .service-card-link {
  transition: transform var(--yl-motion-fast) var(--yl-ease-standard);
}
html:not([data-yl-motion="off"]) .service-card-link:active {
  transform: scale(.985);
}
/* ============ 12. BUTTON / CTA MICROINTERACTION ============ */
html:not([data-yl-motion="off"]) .button,
html:not([data-yl-motion="off"]) .yl-btn {
  transition: transform var(--yl-motion-fast) var(--yl-ease-standard),
    box-shadow var(--yl-motion-fast) var(--yl-ease-standard);
}
html:not([data-yl-motion="off"]) .button:hover,
html:not([data-yl-motion="off"]) .yl-btn:hover {
  transform: translateY(-1px);
}
html:not([data-yl-motion="off"]) .button:active,
html:not([data-yl-motion="off"]) .yl-btn:active {
  transform: scale(.98);
}
/* Keyboard focus is never covered by hover animation (outline untouched). */

/* ============ 13. IMAGE HOVER (cards) ============ */
html:not([data-yl-motion="off"]) .service-card-link img,
html:not([data-yl-motion="off"]) .portrait img,
html:not([data-yl-motion="off"]) .card-image img {
  transition: transform var(--yl-motion-ui) var(--yl-ease-standard);
}
html:not([data-yl-motion="off"]) .service-card-link:hover img,
html:not([data-yl-motion="off"]) a.portrait:hover img,
html:not([data-yl-motion="off"]) .card-image:hover img {
  transform: scale(1.03);
}

/* ============ 14. MENUS ============ */
/* Desktop: native <details> dropdowns — entry animation on open. */
html:not([data-yl-motion="off"]) .desktop-nav .nav-group[open] .nav-sub {
  animation: yl-sub-in var(--yl-motion-fast) var(--yl-ease-enter) both;
}
@keyframes yl-sub-in {
  from { opacity: 0; transform: translateY(6px); }
}
/* Mobile: dialog shell expands, then content. */
html:not([data-yl-motion="off"]) dialog#mobile-menu[open] {
  animation: yl-menu-open var(--yl-motion-ui) var(--yl-ease-enter) both;
}
html:not([data-yl-motion="off"]) dialog#mobile-menu::backdrop {
  background: rgba(4, 18, 26, .45);
}
@keyframes yl-menu-open {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
}

/* ============ 21. MOBILE: shorter travel, less stagger, fainter veil ============ */
/* Mobile timing steps down: page 480 / major 520 / shared-back 560-520. */
@media (max-width: 767px) {
  :root {
    --yl-motion-page: 480ms;
    --yl-motion-major: 520ms;
    --yl-motion-shared: 560ms;
    --yl-motion-back: 520ms;
  }
}
@media (max-width: 720px) {
  html:not([data-yl-motion="off"])::view-transition-new(root) {
    animation-name: yl-ridge-in-mob;
  }
  @keyframes yl-ridge-in-mob {
    from { opacity: 0; transform: translateY(8px); }
  }
  html:not([data-yl-motion="off"]) main .page-heading > * {
    animation-duration: var(--yl-motion-fast);
  }
  html:not([data-yl-motion="off"]) [data-yl-reveal="group"] > * {
    transition-delay: 0ms !important;
  }
  .yl-veil.yl-veil-go { animation-duration: 320ms; }
  html:not([data-yl-motion="off"]) .yl-island-panel:not([hidden]) .yl-island-panel-clip,
  html:not([data-yl-motion="off"]) .yl-island.yl-dock[data-state="expanded"] .yl-island-panel-clip {
    animation-duration: 280ms;
  }
}

/* ============ 20. REDUCED MOTION: honest alternatives, not just none ============ */
@media (prefers-reduced-motion: reduce) {
  html:not([data-yl-motion="off"])::view-transition-group(yl-header),
  html:not([data-yl-motion="off"])::view-transition-group(yl-island),
  html:not([data-yl-motion="off"])::view-transition-group(yl-title) {
    animation-name: yl-reduced-fade !important;
    animation-duration: 100ms !important;
    animation-delay: 0ms !important;
  }
  html:not([data-yl-motion="off"])::view-transition-old(root),
  html:not([data-yl-motion="off"])::view-transition-new(root) {
    animation-name: yl-reduced-fade !important;
    animation-duration: 100ms !important;
  }
  /* Reveals / stagger / hero lines resolve immediately. */
  html:not([data-yl-motion="off"]) [data-yl-reveal],
  html:not([data-yl-motion="off"]) [data-yl-reveal-variant],
  html:not([data-yl-motion="off"]) main .page-heading > *,
  html:not([data-yl-motion="off"]) main .detail-photo,
  html:not([data-yl-motion="off"]) main .detail-hero {
    opacity: 1 !important; transform: none !important;
    animation: none !important; transition: none !important;
  }
  /* Island spring -> simple state switch. */
  html:not([data-yl-motion="off"]) .yl-island-panel:not([hidden]) .yl-island-panel-clip,
  html:not([data-yl-motion="off"]) .yl-island.yl-dock[data-state="expanded"] .yl-island-panel-clip,
  html:not([data-yl-motion="off"]) .yl-island.yl-dock[data-state="expanded"] .yl-island-panel-inner > *,
  html:not([data-yl-motion="off"]) .desktop-nav .nav-group[open] .nav-sub,
  html:not([data-yl-motion="off"]) .desktop-nav a[aria-current="page"]::after {
    animation: none !important;
  }
  /* Press/hover transitions resolve instantly. */
  html:not([data-yl-motion="off"]) .service-card-link,
  html:not([data-yl-motion="off"]) .button,
  html:not([data-yl-motion="off"]) .yl-btn {
    transition: none !important;
  }
  .yl-veil { display: none !important; }
}
@keyframes yl-reduced-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Native island refinement: readable over photos and dark sections. No geometry
   or dock engine changes; translucency applies to surfaces, never the text. */
#yl-island-root .yl-dock {
  background: linear-gradient(135deg, rgb(235 244 240 / .97), rgb(249 249 240 / .97) 54%, rgb(224 237 228 / .97));
  color: #173f37;
  border-color: rgb(255 255 255 / .98);
  box-shadow: inset 0 1px 0 #fff, 0 8px 32px rgb(13 43 35 / .2);
}
#yl-island-root .yl-dock-label { color: #173f37; font-weight: 600; }
#yl-island-root .yl-dock .yl-btn:not(.yl-island-line), #yl-island-root .yl-dock .yl-dock-avatar { color: #173f37; }
#yl-island-root .yl-dock .yl-btn:focus-visible, #yl-island-root .yl-dock-avatar:focus-visible { outline-color: #215443; }
#yl-island-root .yl-dock-avatar { background: #e1ece4; }
#yl-agui-root {
  position: fixed; right: 16px; bottom: 100px; z-index: 65;
  width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 120px);
  color: #173f37; font: 400 16px/1.65 var(--font-body, system-ui, sans-serif);
  transform-origin: bottom right; overflow: auto; overscroll-behavior: contain;
  border: 1px solid #c1d1c5; border-radius: 24px;
  background: #faf9f2; box-shadow: 0 18px 64px rgb(13 43 35 / .24), 0 2px 8px rgb(13 43 35 / .12);
  scrollbar-width: thin; scrollbar-color: #bacbbb #faf9f2;
}
#yl-agui-root[hidden] { display: none; }
#yl-agui-root *, #yl-agui-root *::before, #yl-agui-root *::after { box-sizing: border-box; }
#yl-agui-root .yl-ai-toolbar { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 16px; }
#yl-agui-root strong { font-size: 16px; line-height: 1.4; }
#yl-agui-root [data-agui] { padding: 16px; }
#yl-agui-root button { appearance: none; font: inherit; line-height: 1.4; min-height: 44px; border: 1px solid #bacabd; border-radius: 14px; padding: 9px 14px; background: #faf9f2; color: #173f37; cursor: pointer; transition: background var(--yl-motion-fast) var(--yl-ease-standard), color var(--yl-motion-fast) var(--yl-ease-standard); }
#yl-agui-root button:disabled { cursor: default; opacity: .6; }
#yl-agui-root button:focus-visible, #yl-agui-root input:focus-visible, #yl-agui-root a:focus-visible { outline: 3px solid #b88622; outline-offset: 3px; }
#yl-agui-root [data-agui-close] { border-color: #bacabd; color: #173f37; background: transparent; min-width: 44px; padding: 0; flex-shrink: 0; font-size: 28px; }
#yl-agui-root [data-agui-chips] { display: flex; flex: 1; min-width: 0; flex-wrap: wrap; gap: 8px; }
#yl-agui-root [data-agui-chips] button { border-radius: 100px; }
#yl-agui-root [data-agui-chips] button[aria-pressed=true] { background: #e5e9cf; border-color: #819477; font-weight: 650; }
#yl-agui-root .yl-ai-messages { min-height: 102px; max-height: min(38dvh, 350px); overflow: auto; overscroll-behavior: contain; margin: 0 0 16px; padding: 2px; scrollbar-width: thin; }
#yl-agui-root [data-agui-state-line] { margin: 0; padding: 14px; border-radius: 4px 18px 18px; background: #eaf0e8; }
#yl-agui-root [data-agui-state-line]:empty, #yl-agui-root [data-agui-answer]:empty { display: none; }
#yl-agui-root [data-agui-question] { margin: 0 0 12px 24px; padding: 12px 14px; border-radius: 18px 4px 18px 18px; background: #173f37; color: #fff; overflow-wrap: anywhere; white-space: pre-wrap; }
#yl-agui-root [data-agui-answer] { padding: 14px; margin-top: 8px; background: #eaf0e8; border-radius: 4px 18px 18px; white-space: pre-wrap; overflow-wrap: anywhere; }
#yl-agui-root [data-agui-row] { display: flex; align-items: stretch; gap: 8px; }
#yl-agui-root [data-agui-input] { width: 100%; min-width: 0; border: 1px solid #8caa98; border-radius: 14px; padding: 12px; color: #173f37; background: #fff; font: inherit; font-size: 16px; }
#yl-agui-root [data-agui-input]::placeholder { color: #536e60; opacity: 1; }
#yl-agui-root [data-agui-send] { flex-shrink: 0; color: #fff; background: #173f37; border-color: #173f37; }
#yl-agui-root .yl-ai-run-actions { display: flex; gap: 8px; margin-top: 8px; }
#yl-agui-root .yl-ai-run-actions:has(button:disabled + button:disabled) { display: none; }
#yl-agui-root .yl-ai-run-actions button:disabled { visibility: hidden; pointer-events: none; }
#yl-agui-root [data-agui-disclosure] { margin: 12px 0 0; font-size: 12px; line-height: 1.65; color: #536657; }
#yl-agui-root [data-line-handoff-label] { display: grid; gap: 4px; margin: 10px 0 6px; }
#yl-agui-root [data-line-intent] { width: 100%; max-width: 100%; min-width: 0; min-height: 44px; font: inherit; border: 1px solid #9ab4a6; border-radius: 8px; padding: 6px 10px; background: #fff; color: #193c34; }
#yl-agui-root [data-line-handoff-note] { margin: 4px 0 0; font-size: 12px; line-height: 1.65; color: #536657; }
#yl-agui-root a { color: #215443; text-underline-offset: 3px; }
#yl-agui-root .r8-card { border: 1px solid #c6d4c5; background: #fff; border-radius: 14px; padding: 14px; margin-top: 12px; }
#yl-agui-root .r8-card h4 { margin: 4px 0 8px; color: #173f37; font-size: 17px; }
#yl-agui-root .r8-card-badge { font-size: 12px; color: #526d5c; }
#yl-agui-root [data-agui-fallback] p { margin-bottom: 0; }
@media (hover: hover) {
  #yl-agui-root button:not(:disabled):hover { background: #dce7d9; color: #173f37; }
}
@media (max-width: 640px) {
  #yl-agui-root { right: 12px; width: calc(100vw - 24px); border-radius: 20px; }
  #yl-agui-root [data-agui] { padding: 14px; }
  #yl-agui-root .yl-ai-messages { max-height: 30dvh; }
}
@media (prefers-reduced-motion: reduce) { #yl-agui-root button { transition: none; } }
html[data-yl-motion=off] #yl-agui-root button { transition: none; }
/* Adaptive Island V3: AI is content of the existing expanded surface. */
#yl-island-root .yl-dock[data-agui-open=true] {
  bottom: max(var(--yl-ai-keyboard, 0px), 16px);
  max-height: min(var(--yl-ai-height, 70dvh), 760px);
  overflow: auto;
}
#yl-island-root #yl-agui-root {
  position: static; width: 100%; max-height: none; min-width: 0;
  border: 0; border-radius: 18px; box-shadow: none; overflow: visible;
  transform-origin: top center;
}
#yl-island-root [data-agui-open]:focus-visible { outline: 3px solid #b88622; outline-offset: 3px; }
/* The existing dock owns the single scroll surface, including long answers. */
#yl-island-root #yl-agui-root .yl-ai-messages { max-height: none; overflow: visible; }
@media (forced-colors: active) {
  #yl-island-root .yl-dock, #yl-agui-root { background: Canvas; color: CanvasText; border: 1px solid CanvasText; box-shadow: none; }
  #yl-agui-root [data-agui-close], #yl-agui-root [data-agui-question], #yl-agui-root [data-agui-send] { background: Canvas; color: CanvasText; }
}

[data-agui-cards]{display:grid;gap:12px}.r8-card{border-inline-start:3px solid #b39a62;border-radius:16px;background:linear-gradient(135deg,#edf3e8,#fff9e8);padding:16px}.r8-card-badge{color:#74603b;font-size:.75rem;letter-spacing:.06em}

/* Keep the independent preview action inside its card instead of after a 100%-height link. */
.representative-services > .service-card:has(> .yl-service-preview),
.service-grid > .service-card:has(> .yl-service-preview) {
  display:flex !important;
  flex-direction:column;
  height:auto !important;
  min-height:0;
}
.representative-services > .service-card:has(> .yl-service-preview) > .service-card-link,
.service-grid > .service-card:has(> .yl-service-preview) > .service-card-link {
  height:auto !important;
  min-height:0;
  flex:1 1 auto;
}
.service-card > .yl-service-preview { flex-shrink:0; align-self:flex-start; }