/* 首页产品演示 V2
 * 六个模块共享同一套 TabTin 客户端外壳；模块文件只负责各自的工作页面。
 */

.tt-product-demo--v2 {
  --tt-accent: #397bd6;
  --tt-v2-ink: #252a31;
  --tt-v2-muted: #707986;
  --tt-v2-faint: #929aa4;
  --tt-v2-line: rgba(52, 70, 94, 0.075);
  --tt-v2-shell: #f4f7fb;
  --tt-v2-zone: #f3f5f7;
  --tt-v2-blue-soft: #eaf2fd;
  --tt-v2-green-soft: #eaf7f0;
  color: var(--tt-v2-ink);
  background:
    radial-gradient(circle at 10% 0%, rgba(221, 233, 251, 0.9), transparent 34%),
    linear-gradient(112deg, #edf3fb 0%, #f7f3ee 51%, #f4f7fb 100%);
}

/* 旧站退役前保留历史 DOM 作为迁移兼容层，但不参与布局或可访问树。 */
#work .tt-product-demo--agent-execution:not(.tt-product-demo--v2),
#apps .tt-product-demo--shared-resource:not(.tt-product-demo--v2),
#handoff .tt-product-demo--handoff:not(.tt-product-demo--v2),
#project .tt-product-demo--project:not(.tt-product-demo--v2),
#agent .tt-product-demo--agent-settings:not(.tt-product-demo--v2),
#org .tt-product-demo--organization:not(.tt-product-demo--v2) {
  display: none;
}

/* 点击放大时产品窗会被克隆到 body，失去章节祖先；放大态直接展示完整结果。 */
.mz-image:has(> .tt-product-demo--v2) > .tt-product-demo:not(.tt-product-demo--v2) {
  display: none;
}

.mz-image .tt-product-demo--v2 [data-demo-step],
.mz-image .tt-product-demo--v2 [data-demo-node],
.mz-image .tt-product-demo--v2 [data-demo-result] {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* V2 不再使用旧版高饱和纸张素材；产品工作面直接浮在柔和色壳上。 */
.feat__media--shot:has(.tt-product-demo--v2) {
  background:
    radial-gradient(circle at 12% 4%, rgba(218, 232, 251, 0.82), transparent 38%),
    linear-gradient(118deg, #eef4fb 0%, #f6f2ed 54%, #f5f7fa 100%);
}

.feat__media--shot:has(.tt-product-demo--v2) .feat__media-art {
  opacity: 0;
}

.feat__media-product:has(> .tt-product-demo--v2) {
  width: min(92%, 1180px);
  border: 0;
  box-shadow: 0 1.1cqw 3.4cqw rgba(55, 68, 86, 0.12);
}

.tt-product-demo--v2 .tt-shell-topbar {
  height: 4.08cqw;
  border-bottom: 1px solid var(--tt-v2-line);
  background: rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(0.8cqw);
}

.tt-product-demo--v2 .tt-org-switcher,
.tt-product-demo--v2 .tt-global-search {
  border: 0;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: none;
}

.tt-product-demo--v2 .tt-shell-body {
  height: calc(100% - var(--tt-shell-topbar-height));
  background: var(--tt-v2-shell);
}

.tt-product-demo--v2 .tt-activity-rail {
  border-right: 1px solid var(--tt-v2-line);
  background: rgba(250, 252, 254, 0.92);
}

.tt-product-demo--v2 .tt-rail-org {
  background: #397bd6;
  color: #fff;
}

.tt-product-demo--v2 .tt-rail-button.is-active {
  border-radius: 0.58cqw;
  background: var(--tt-v2-blue-soft);
  color: #397bd6;
}

.tt-v2-workspace {
  display: grid;
  grid-template-columns: 15.2cqw minmax(0, 1fr) 23.4cqw;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  background: #fff;
}

.tt-v2-workspace--two-pane {
  grid-template-columns: 21cqw minmax(0, 1fr);
}

.tt-v2-sidebar,
.tt-v2-main,
.tt-v2-detail {
  min-width: 0;
  overflow: hidden;
}

.tt-v2-sidebar {
  padding: 1.15cqw 0.78cqw;
  border-right: 1px solid var(--tt-v2-line);
  background: var(--tt-v2-zone);
}

.tt-v2-main {
  display: flex;
  flex-direction: column;
  padding: 1.1cqw 1.35cqw;
  background: #fff;
}

.tt-v2-detail {
  padding: 1.1cqw 1.05cqw;
  border-left: 1px solid var(--tt-v2-line);
  background: #f7f8fa;
}

.tt-v2-eyebrow {
  margin: 0 0 0.28cqw;
  color: #397bd6;
  font-size: 0.58cqw;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tt-v2-heading {
  margin: 0;
  color: var(--tt-v2-ink);
  font-size: 1.05cqw;
  font-weight: 600;
  line-height: 1.35;
}

.tt-v2-copy {
  margin: 0.28cqw 0 0;
  color: var(--tt-v2-muted);
  font-size: 0.7cqw;
  line-height: 1.55;
}

.tt-v2-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 2.2cqw;
  margin-bottom: 0.55cqw;
  color: #5b6470;
  font-size: 0.66cqw;
  font-weight: 600;
}

.tt-v2-list {
  display: grid;
  gap: 0.28cqw;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tt-v2-row {
  display: grid;
  grid-template-columns: 1.55cqw minmax(0, 1fr) auto;
  align-items: center;
  min-height: 3.1cqw;
  gap: 0.62cqw;
  padding: 0.46cqw 0.58cqw;
  border-radius: 0.6cqw;
  color: #646d78;
}

.tt-v2-row.is-current {
  background: #fff;
  color: var(--tt-v2-ink);
  box-shadow: inset 0 0 0 1px rgba(57, 123, 214, 0.08);
}

.tt-v2-icon {
  display: grid;
  place-items: center;
  width: 1.55cqw;
  height: 1.55cqw;
  border-radius: 0.48cqw;
  background: #e7edf4;
  color: #67788e;
  font-size: 0.66cqw;
  font-weight: 600;
}

.tt-v2-row.is-current .tt-v2-icon,
.tt-v2-icon.is-blue {
  background: var(--tt-v2-blue-soft);
  color: #397bd6;
}

.tt-v2-row strong,
.tt-v2-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tt-v2-row strong {
  font-size: 0.7cqw;
  font-weight: 550;
}

.tt-v2-row small {
  margin-top: 0.08cqw;
  color: var(--tt-v2-faint);
  font-size: 0.56cqw;
}

.tt-v2-badge {
  padding: 0.18cqw 0.42cqw;
  border-radius: 999px;
  background: #edf0f3;
  color: #6e7782;
  font-size: 0.53cqw;
  font-weight: 550;
  white-space: nowrap;
}

.tt-v2-badge.is-blue {
  background: var(--tt-v2-blue-soft);
  color: #3971bd;
}

.tt-v2-badge.is-green {
  background: var(--tt-v2-green-soft);
  color: #34805b;
}

.tt-v2-flow {
  display: grid;
  gap: 0.42cqw;
  margin-top: 0.85cqw;
}

.tt-v2-step {
  display: grid;
  grid-template-columns: 1.55cqw minmax(0, 1fr) auto;
  align-items: center;
  min-height: 3.25cqw;
  gap: 0.7cqw;
  padding: 0.55cqw 0.72cqw;
  border-radius: 0.66cqw;
  background: #f5f7f9;
  color: #5f6873;
  opacity: 0;
  transform: translateY(0.45cqw);
  transition: opacity 420ms ease, transform 520ms cubic-bezier(.2,.75,.25,1), background-color 300ms ease;
}

.tt-v2-step strong,
.tt-v2-step small {
  display: block;
}

.tt-v2-step strong {
  color: #343a42;
  font-size: 0.7cqw;
  font-weight: 550;
}

.tt-v2-step small {
  margin-top: 0.08cqw;
  color: var(--tt-v2-faint);
  font-size: 0.57cqw;
}

.tt-v2-step:nth-child(2) { transition-delay: 110ms; }
.tt-v2-step:nth-child(3) { transition-delay: 220ms; }
.tt-v2-step:nth-child(4) { transition-delay: 330ms; }
.tt-v2-step:nth-child(5) { transition-delay: 440ms; }

.feat__media.is-demo-active .tt-product-demo--v2 .tt-v2-step {
  opacity: 1;
  transform: translateY(0);
}

.tt-v2-result {
  margin-top: auto;
  padding: 0.8cqw 0.9cqw;
  border-radius: 0.72cqw;
  background: #edf4fd;
  color: #315f9e;
  opacity: 0;
  transform: translateY(0.5cqw);
  transition: opacity 440ms ease 520ms, transform 540ms cubic-bezier(.2,.75,.25,1) 520ms;
}

.feat__media.is-demo-active .tt-product-demo--v2 .tt-v2-result {
  opacity: 1;
  transform: translateY(0);
}

.tt-v2-result strong {
  display: block;
  color: #2d5d9d;
  font-size: 0.76cqw;
  font-weight: 600;
}

.tt-v2-result span {
  display: block;
  margin-top: 0.14cqw;
  color: #6d819d;
  font-size: 0.58cqw;
}

@container (max-width: 760px) {
  .tt-product-demo--v2 .tt-global-search {
    display: none;
  }

  .tt-v2-workspace,
  .tt-v2-workspace--two-pane {
    grid-template-columns: 18.5cqw minmax(0, 1fr);
  }

  .tt-v2-detail {
    display: none;
  }
}

@container (max-width: 520px) {
  .tt-product-demo--v2 .tt-traffic-lights,
  .tt-product-demo--v2 .tt-shell-collapse {
    display: none;
  }

  .tt-v2-workspace,
  .tt-v2-workspace--two-pane {
    grid-template-columns: minmax(0, 1fr);
  }

  .tt-v2-sidebar {
    display: none;
  }

  .tt-v2-main {
    padding: 1.35cqw 1.6cqw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tt-product-demo--v2 .tt-v2-step,
  .tt-product-demo--v2 .tt-v2-result {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 600px) {
  .feat__media--shot:has(.tt-product-demo--v2) {
    aspect-ratio: 5 / 4;
  }

  .feat__media-product:has(> .tt-product-demo--v2) {
    width: 94%;
    aspect-ratio: 5 / 4;
    border-radius: 0.65rem;
  }

  .tt-product-demo--v2 .tt-rail-bottom {
    transform: translateY(-1cqw);
  }
}