/* Liquid glass surfaces for the interactive demo. The mobile product preview
   remains on its original material; see .liquid-glass-exempt below. */
:where(.liquid-glass-card, .liquid-glass-control) {
  --glass-highlight: rgba(255, 255, 255, .12);
  --glass-border: rgba(173, 193, 255, .25);
  --glass-shadow: rgba(0, 0, 0, .34);
  position: relative;
  isolation: isolate;
}

.liquid-glass-card {
  border-radius: 16px !important;
  border-color: var(--glass-border) !important;
  background:
    linear-gradient(145deg, rgba(42, 55, 95, .78), rgba(9, 15, 29, .76)) !important;
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    0 18px 44px var(--glass-shadow),
    0 0 26px rgba(103, 96, 246, .10) !important;
  backdrop-filter: blur(15px) saturate(1.08);
  -webkit-backdrop-filter: blur(15px) saturate(1.08);
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    background 220ms ease;
}

/* The workflow dial is a round instrument; keep the shared glass surface
   from changing its outer silhouette back to a rounded rectangle. */
.liquid-glass-card.workflow-dial {
  border-radius: 50% !important;
}

.liquid-glass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(
      230px circle at var(--glass-x, 50%) var(--glass-y, 0%),
      rgba(255, 255, 255, .12),
      transparent 64%
    );
  opacity: .72;
  transition: opacity 220ms ease;
}

.liquid-glass-card:hover {
  transform: translateY(-2px);
  border-color: rgba(191, 207, 255, .42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 20px 50px rgba(0, 0, 0, .4),
    0 0 30px rgba(107, 93, 255, .18) !important;
}

.liquid-glass-card:hover::before { opacity: 1; }

.liquid-glass-control {
  border-radius: 10px !important;
  border-color: rgba(180, 197, 255, .35) !important;
  color: #f7f9ff !important;
  background:
    linear-gradient(135deg, rgba(75, 102, 181, .78), rgba(92, 67, 190, .78)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 8px 22px rgba(20, 27, 58, .34) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .48);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

/* Keep the compact result disclosure readable inside its small glass pill. */
.result-detail-toggle.liquid-glass-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 4px 8px;
  border: 1px solid rgba(180, 197, 255, .35) !important;
  border-radius: 999px !important;
  line-height: 1.2;
  white-space: nowrap;
  box-sizing: border-box;
}

.liquid-glass-control:hover:not(:disabled),
.liquid-glass-control:focus-visible {
  border-color: rgba(224, 231, 255, .68) !important;
  background:
    linear-gradient(135deg, rgba(94, 126, 219, .92), rgba(113, 82, 218, .92)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 10px 28px rgba(31, 37, 84, .42) !important;
}

.liquid-glass-control:disabled {
  color: #ffffff !important;
  opacity: 1;
  background:
    linear-gradient(135deg, rgba(75, 102, 181, .72), rgba(92, 67, 190, .72)) !important;
}

.liquid-glass-control.button-primary,
.liquid-glass-control.task-submit {
  color: #ffffff !important;
}

/* The primary demo CTA gets a restrained light sweep after the first scroll. */
.task-submit {
  position: relative;
  overflow: hidden;
}

.task-submit > * {
  position: relative;
  z-index: 1;
}

.task-submit::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: -55%;
  bottom: -55%;
  left: -42%;
  width: 28%;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, .06) 28%,
    rgba(255, 255, 255, .48) 50%,
    rgba(255, 255, 255, .1) 70%,
    transparent 100%
  );
  opacity: 0;
  transform: skewX(-18deg) translateX(-180%);
}

.task-submit.is-sweeping::after {
  animation: task-submit-sweep 920ms cubic-bezier(.22, 1, .36, 1) both;
}

/* Product tabs use the same restrained sweep as the primary demo CTA. */
.screen-tab {
  position: relative;
  overflow: hidden;
}

.screen-tab > * {
  position: relative;
  z-index: 1;
}

.screen-tab::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: -55%;
  bottom: -55%;
  left: -42%;
  width: 28%;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, .06) 28%,
    rgba(255, 255, 255, .48) 50%,
    rgba(255, 255, 255, .1) 70%,
    transparent 100%
  );
  opacity: 0;
  transform: skewX(-18deg) translateX(-180%);
}

.screen-tab.is-sweeping::after {
  animation: task-submit-sweep 920ms cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes task-submit-sweep {
  0% { opacity: 0; transform: skewX(-18deg) translateX(-180%); }
  16% { opacity: .76; }
  82% { opacity: .42; }
  100% { opacity: 0; transform: skewX(-18deg) translateX(560%); }
}

@media (prefers-reduced-motion: reduce) {
  .task-submit.is-sweeping::after,
  .screen-tab.is-sweeping::after { animation: none; }
}

/* Glass-like logo lettering: translucent highlights and a polished edge
   keep the original purple identity while giving the glyphs a material finish. */
.liquid-glass-text {
  display: inline-block;
  color: transparent !important;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .28) 12%, transparent 22%, transparent 58%, rgba(255, 255, 255, .48) 72%, transparent 84%),
    linear-gradient(180deg, #c79ee8 0%, #a96ad9 18%, #8530bb 47%, #4a146e 100%);
  background-size: 240% 100%, 100% 100%;
  background-position: 0% 50%, 0 0;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px rgba(235, 214, 255, .32);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, .48),
    0 0 2px rgba(255, 255, 255, .72),
    0 0 24px rgba(184, 61, 255, .28),
    0 10px 28px rgba(7, 11, 22, .36);
  filter: saturate(1.08);
  animation: liquid-glass-text-shimmer 9s cubic-bezier(.22, 1, .36, 1) infinite;
}

.hero-brand-lockup {
  position: relative;
  display: inline-block;
  line-height: 1;
  vertical-align: baseline;
  isolation: isolate;
}

.hero-brand-cn {
  position: relative;
  z-index: 2;
}

.hero-brand-orbit {
  position: absolute;
  inset: 18% -0.36em 18% -0.36em;
  pointer-events: none;
}

.hero-brand-orbit-back,
.hero-brand-orbit-front,
.hero-brand-orbit-track {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.hero-brand-orbit-back {
  z-index: 0;
  clip-path: inset(0 0 50% 0);
  transform: rotate(-24deg);
}

.hero-brand-orbit-front {
  z-index: 3;
  clip-path: inset(50% 0 0 0);
  transform: rotate(-24deg);
}

.hero-brand-orbit-track {
  display: none;
  border: 1px solid rgba(255, 210, 75, .72);
  box-shadow: 0 0 8px rgba(255, 192, 26, .24);
}

.hero-brand-orbit-back .hero-brand-orbit-track,
.hero-brand-orbit-back .hero-brand-satellite {
  opacity: .3;
}

.hero-brand-orbit-front .hero-brand-orbit-track {
  opacity: .94;
}

.hero-brand-satellite {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: clamp(4px, .075em, 6px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 235, 137, .72);
  border-radius: 50%;
  background: radial-gradient(circle at 31% 27%, #fff4a9 0 15%, #ffd84a 37%, #e7a90a 72%, #a96900 100%);
  box-shadow: 0 0 0 1px rgba(255, 211, 56, .26), 0 0 9px rgba(255, 193, 28, .9);
  transform: translate(-50%, -50%);
  will-change: transform;
}

.hero-brand-satellite::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 250%;
  height: 1px;
  border-radius: 999px;
  background: rgba(255, 224, 94, .96);
  box-shadow: 0 0 4px rgba(255, 194, 28, .72);
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(var(--satellite-tangent, 0deg));
}

@keyframes liquid-glass-text-shimmer {
  0%, 62%, 100% { background-position: 0% 50%, 0 0; }
  76%, 88% { background-position: 100% 50%, 0 0; }
}

.liquid-glass-card :where(h2, h3, strong, b) {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .24);
}

/* The three advantages share one continuous glass surface. */
.advantage-list.liquid-glass-card {
  overflow: hidden;
  padding: 4px 18px;
}

.advantage-list.liquid-glass-card > .advantage-item {
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: none;
}

.advantage-list.liquid-glass-card > .advantage-item:first-child {
  border-top: 0;
  padding-top: 14px;
}

.advantage-list.liquid-glass-card > .advantage-item:last-child {
  padding-bottom: 14px;
}

/* Let the cloud header and note sit directly on the outer panel surface. */
.cloud-platform .cloud-visual,
.cloud-platform .cloud-note {
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: none;
}

.cloud-running.liquid-glass-card {
  border-radius: 999px !important;
}

.employee-ui-tab.liquid-glass-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  min-height: 34px;
  padding: 8px 14px !important;
  text-align: center;
  line-height: 1.2;
}

/* The screenshot's compact mobile task result keeps the original solid
   phone material. This selector intentionally wins over the global layer. */
.mobile-platform,
.mobile-platform .phone-screen,
.mobile-platform .phone-summary,
.mobile-platform .phone-file,
.mobile-platform .phone-reply {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.mobile-platform .liquid-glass-card,
.mobile-platform .liquid-glass-control,
.mobile-platform .phone-screen,
.mobile-platform .phone-summary,
.mobile-platform .phone-file,
.mobile-platform .phone-reply {
  transform: none !important;
  border-color: revert !important;
  background: revert !important;
  box-shadow: revert !important;
  text-shadow: none;
}

.mobile-platform .liquid-glass-card::before { display: none; }

/* Keep the two attachment cards visually separated from the reply card. */
.mobile-platform .phone-files { margin-bottom: 8px; }

/* Preserve the desktop employee workspace proportions while the whole window
   scales down inside a narrower viewport. */
.employee-ui-window.is-proportionally-scaled {
  max-width: none !important;
}

.employee-ui-window.is-proportionally-scaled .employee-ui-body {
  min-height: 360px;
  grid-template-columns: 156px minmax(0, 1fr);
}

.employee-ui-window.is-proportionally-scaled .employee-ui-sidebar {
  padding: 13px 9px 10px;
}

.employee-ui-window.is-proportionally-scaled .employee-ui-brand {
  justify-content: flex-start;
  padding: 3px 5px 17px;
}

.employee-ui-window.is-proportionally-scaled .employee-ui-brand > span,
.employee-ui-window.is-proportionally-scaled .employee-ui-nav-label,
.employee-ui-window.is-proportionally-scaled .employee-ui-nav > span:last-child,
.employee-ui-window.is-proportionally-scaled .employee-ui-account > span {
  display: initial;
}

.employee-ui-window.is-proportionally-scaled .employee-ui-nav {
  justify-content: flex-start;
  padding: 8px 7px;
}

.employee-ui-window.is-proportionally-scaled .employee-ui-nav-icon {
  width: 14px;
}

.employee-ui-window.is-proportionally-scaled .employee-ui-account {
  justify-content: flex-start;
  padding-inline: 4px;
}

.employee-ui-window.is-proportionally-scaled .employee-ui-main {
  padding: 20px 22px;
}

.employee-ui-window.is-proportionally-scaled .employee-ui-heading h3 {
  font-size: 19px;
}

.employee-ui-window.is-proportionally-scaled .employee-config-workspace {
  grid-template-columns: minmax(0, 1fr) 205px;
  gap: 12px;
}

.employee-ui-window.is-proportionally-scaled .employee-preview {
  display: block;
}

.employee-ui-window.is-proportionally-scaled .employee-config-form {
  padding: 13px;
}

.employee-ui-window.is-proportionally-scaled .employee-scope-list {
  gap: 7px;
}

.employee-ui-window.is-proportionally-scaled .employee-scope-item {
  padding: 8px;
}

.employee-ui-window.is-proportionally-scaled .employee-settings-row {
  gap: 7px;
}

.employee-ui-window.is-proportionally-scaled .employee-setting {
  flex-direction: row;
  gap: 6px;
  padding: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .liquid-glass-card,
  .liquid-glass-control,
  .liquid-glass-text {
    transition: none !important;
    animation: none !important;
  }
}