/* SAI's logo: the ONE component every page uses (Alex 2026-10-03). The glass S hovers; its shadow plate is a separate
   element on the ground that stays put and softens as the S rises, the way a real shadow does. Never a box or tile behind
   it, and the image itself carries no baked plate (assets/brand/sai-mark.png was cleaned of its opaque grey ellipse).
   tests/worker.test.ts checks that every page uses this component and nothing else as the logo.
   Markup:  <span class="sai-logo sai-logo--sm|md|lg" aria-hidden="true"><img class="sai-logo-s" src="assets/brand/sai-mark.png" alt=""><span class="sai-logo-plate"></span></span>
   Universal Network Development LLC . UND Industries   [UND-MARKER: SAI-WEB v1] */
.sai-logo {
  --logo: 64px;
  position: relative; display: inline-block; flex: none;
  width: var(--logo); height: calc(var(--logo) * 1.2);
}
.sai-logo--sm { --logo: 28px; }
.sai-logo--md { --logo: 44px; }
.sai-logo--lg { --logo: 64px; }

.sai-logo-s {
  position: absolute; left: 0; top: 0; z-index: 1; display: block;
  width: var(--logo); height: var(--logo); object-fit: contain;
  /* light theme: a crisp edge so the pale glass reads on white, and a soft blue lift */
  filter: saturate(1.35) contrast(1.06) drop-shadow(0 1px 1px rgba(20, 40, 90, 0.32)) drop-shadow(0 4px 10px rgba(60, 110, 210, 0.22));
  animation: sai-logo-hover 4.6s ease-in-out infinite;
}
.sai-logo-plate {
  position: absolute; left: 50%; bottom: 0;
  width: calc(var(--logo) * 0.6); height: calc(var(--logo) * 0.13);
  border-radius: 50%; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(28, 50, 110, 0.34), rgba(28, 50, 110, 0) 100%);
  animation: sai-logo-plate 4.6s ease-in-out infinite;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sai-logo-s { filter: drop-shadow(0 3px 10px rgba(80, 140, 240, 0.45)) drop-shadow(0 0 16px rgba(110, 220, 190, 0.22)); }
  :root:not([data-theme="light"]) .sai-logo-plate { background: radial-gradient(closest-side, rgba(120, 170, 255, 0.34), rgba(120, 170, 255, 0) 100%); }
}
:root[data-theme="dark"] .sai-logo-s { filter: drop-shadow(0 3px 10px rgba(80, 140, 240, 0.45)) drop-shadow(0 0 16px rgba(110, 220, 190, 0.22)); }
:root[data-theme="dark"] .sai-logo-plate { background: radial-gradient(closest-side, rgba(120, 170, 255, 0.34), rgba(120, 170, 255, 0) 100%); }

/* the S rises about 8% of its size and settles; the plate stays on the ground, narrowing and fading as the S rises */
@keyframes sai-logo-hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--logo) * -0.08)); } }
@keyframes sai-logo-plate {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; }
  50%      { transform: translateX(-50%) scale(0.8); opacity: 0.55; }
}
/* SAI listening or thinking (the chat header): the same hover, a little quicker */
.is-listening .sai-logo-s, .is-listening .sai-logo-plate { animation-duration: 2.6s; }
.is-thinking .sai-logo-s, .is-thinking .sai-logo-plate { animation-duration: 1.6s; }

@media (prefers-reduced-motion: reduce) { .sai-logo-s, .sai-logo-plate { animation: none; } }
:root[data-motion="off"] .sai-logo-s, :root[data-motion="off"] .sai-logo-plate { animation: none; }