/* 06 · 多端协同
 * Electron 与 iOS 进入同一条 Agent 对话：两端共享消息、执行过程和结果，
 * 手机是完整的移动执行面，不是桌面任务的遥控器。
 */

.tt-product-demo--hero-collab.tt-product-demo--multidevice {
  --tt-ios-blue: #3478c4;
  --tt-ios-green: #3aa66e;
  background: #fff;
}

#multidevice .feat__media--shot:has(.tt-product-demo--multidevice) {
  aspect-ratio: 8 / 5;
  border-color: transparent;
  background:
    radial-gradient(circle at 12% 5%, rgba(210, 229, 252, 0.95), transparent 38%),
    radial-gradient(circle at 88% 94%, rgba(244, 223, 201, 0.72), transparent 36%),
    linear-gradient(122deg, #edf4fc 0%, #f7f3ee 56%, #f5f7fa 100%);
  box-shadow: none;
}

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

#multidevice .feat__media-product:has(> .tt-product-demo--multidevice) {
  width: min(92%, 1180px);
  aspect-ratio: 1.74;
  border: 0;
  border-radius: 1.25cqw;
  box-shadow:
    0 0.18cqw 0.7cqw rgba(45, 58, 77, 0.06),
    0 2.15cqw 5.8cqw rgba(45, 58, 77, 0.15);
}

.tt-product-demo--multidevice > .tt-shell-topbar,
.tt-product-demo--multidevice > .tt-shell-body {
  position: relative;
  z-index: 1;
}

/* 多端场景只保留一条轻量的当前任务信息，避免和左侧“新任务”入口
 * 拼成贯穿工作台的第二条导航，也为右侧手机留出清晰的呼吸区。 */
.tt-product-demo--multidevice
  .tt-hero-agent-task__header[data-multidevice-taskbar="compact"] {
  height: 2.85cqw;
  gap: 0.42cqw;
  padding: 0 1.15cqw;
  border-bottom: 0;
  background: #fff;
}

.tt-product-demo--multidevice
  .tt-hero-agent-task__header[data-multidevice-taskbar="compact"]
  .tt-hero-agent-task__status {
  margin-left: 0.5cqw;
}

.tt-product-demo--multidevice
  .tt-hero-agent-task__header[data-multidevice-taskbar="compact"]
  .tt-hero-share-trigger {
  margin-left: 0.12cqw;
  padding: 0.3cqw 0.52cqw;
}

.tt-product-demo--multidevice .tt-hero-agent-task__status {
  color: #33825d;
}

.tt-product-demo--multidevice .tt-hero-agent-task__status i {
  background: #43a777;
  box-shadow: 0 0 0 0.18cqw rgba(67, 167, 119, 0.12);
}

.tt-product-demo--multidevice .tt-hero-share-trigger {
  color: #47789e;
  background: #eef5fa;
}

.tt-product-demo--multidevice .tt-hero-runtime--verification
  .tt-hero-runtime-step--running > small {
  background: none;
  color: #3b8563;
  -webkit-text-fill-color: currentColor;
}

/* Hero 的逐条首屏动画只播放一次；06 以完整 Electron 工作面整体入场。 */
.tt-product-demo--hero-collab.tt-product-demo--multidevice .tt-hero-stage-human,
.tt-product-demo--hero-collab.tt-product-demo--multidevice .tt-hero-stage-agent,
.tt-product-demo--hero-collab.tt-product-demo--multidevice .tt-hero-stage-trace-1,
.tt-product-demo--hero-collab.tt-product-demo--multidevice .tt-hero-stage-trace-2,
.tt-product-demo--hero-collab.tt-product-demo--multidevice .tt-hero-stage-trace-3,
.tt-product-demo--hero-collab.tt-product-demo--multidevice .tt-hero-stage-trace-4,
.tt-product-demo--hero-collab.tt-product-demo--multidevice .tt-hero-stage-result,
.tt-product-demo--hero-collab.tt-product-demo--multidevice .tt-hero-stage-verify-intro,
.tt-product-demo--hero-collab.tt-product-demo--multidevice .tt-hero-stage-verify-1,
.tt-product-demo--hero-collab.tt-product-demo--multidevice .tt-hero-stage-verify-2,
.tt-product-demo--hero-collab.tt-product-demo--multidevice .tt-hero-stage-verify-3,
.tt-product-demo--hero-collab.tt-product-demo--multidevice .tt-hero-stage-verify-4,
.tt-product-demo--hero-collab.tt-product-demo--multidevice .tt-hero-stage-task-select,
.tt-product-demo--hero-collab.tt-product-demo--multidevice .tt-hero-stage-share-trigger {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* iOS ConversationScreen */
.tt-ios-phone {
  position: absolute;
  top: 6.1cqw;
  right: 2.25cqw;
  z-index: 8;
  width: 19.1cqw;
  height: 41.25cqw;
  padding: 0.38cqw;
  border: 0.1cqw solid rgba(20, 19, 18, 0.9);
  border-radius: 2.35cqw;
  background: #211f1e;
  box-shadow:
    0 0.72cqw 1.75cqw rgba(34, 29, 25, 0.18),
    0 2.2cqw 4.6cqw rgba(34, 29, 25, 0.14);
}

.tt-ios-phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 1.96cqw;
  background: #f7f7f7;
}

.tt-ios-status-bar {
  position: relative;
  z-index: 4;
  display: flex;
  height: 2.35cqw;
  align-items: center;
  padding: 0 1.15cqw;
  background: rgba(255, 255, 255, 0.98);
  color: #242220;
  font-size: 0.5cqw;
  line-height: 1;
}

.tt-ios-status-bar b {
  font-weight: 600;
}

.tt-ios-status-bar > span {
  display: flex;
  align-items: center;
  gap: 0.3cqw;
  margin-left: auto;
}

.tt-ios-status-bar svg {
  width: 0.72cqw;
  height: 0.72cqw;
  stroke-width: 1.7;
}

.tt-ios-status-bar svg:last-child {
  width: 1.05cqw;
}

.tt-ios-dynamic-island {
  position: absolute;
  top: 0.42cqw;
  left: 50%;
  z-index: 5;
  width: 5.05cqw;
  height: 1.25cqw;
  border-radius: 999px;
  background: #1d1b1a;
  transform: translateX(-50%);
}

.tt-ios-conversation-nav {
  position: relative;
  z-index: 3;
  display: flex;
  height: 3.8cqw;
  align-items: center;
  padding: 0 0.86cqw;
  border-bottom: 1px solid rgba(40, 36, 32, 0.07);
  background: rgba(255, 255, 255, 0.97);
}

.tt-ios-nav-button,
.tt-ios-nav-actions {
  display: flex;
  align-items: center;
  color: #5e5a55;
}

.tt-ios-nav-button svg {
  width: 1.02cqw;
  height: 1.02cqw;
  stroke-width: 1.9;
}

.tt-ios-nav-actions {
  gap: 0.68cqw;
  margin-left: auto;
}

.tt-ios-nav-actions svg {
  width: 0.92cqw;
  height: 0.92cqw;
}

.tt-ios-conversation-title {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 11.8cqw;
  justify-items: center;
  line-height: 1.3;
  transform: translate(-50%, -50%);
}

.tt-ios-conversation-title strong {
  max-width: 100%;
  overflow: hidden;
  color: #2b2927;
  font-size: 0.63cqw;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tt-ios-conversation-title small {
  display: flex;
  align-items: center;
  gap: 0.28cqw;
  margin-top: 0.13cqw;
  color: #97928c;
  font-size: 0.44cqw;
}

.tt-ios-conversation-title small i {
  width: 0.36cqw;
  height: 0.36cqw;
  border-radius: 50%;
  background: var(--tt-ios-green);
  box-shadow: 0 0 0 0.14cqw rgba(58, 166, 110, 0.11);
}

.tt-ios-conversation-body {
  position: absolute;
  inset: 6.15cqw 0 7.65cqw;
  overflow: hidden;
  padding: 0.72cqw 0.85cqw 1cqw;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), transparent 10%),
    #f7f7f7;
}

.tt-ios-message-date {
  display: block;
  margin-bottom: 0.9cqw;
  color: #b0aca7;
  font-size: 0.43cqw;
  text-align: center;
}

.tt-ios-user-message {
  width: fit-content;
  max-width: 13.5cqw;
  margin-left: auto;
  text-align: right;
}

.tt-ios-user-message p {
  margin: 0;
  padding: 0.65cqw 0.76cqw;
  border-radius: 0.92cqw 0.34cqw 0.92cqw 0.92cqw;
  background: #e6f0f8;
  color: #30363b;
  font-size: 0.57cqw;
  line-height: 1.55;
  text-align: left;
}

.tt-ios-user-message time {
  display: block;
  margin-top: 0.2cqw;
  color: #aaa6a0;
  font-size: 0.4cqw;
}

.tt-ios-agent-message {
  margin-top: 1.05cqw;
}

.tt-ios-agent-message header {
  display: flex;
  align-items: center;
  gap: 0.46cqw;
}

.tt-ios-agent-message header img {
  width: 1.2cqw;
  height: 1.2cqw;
  flex: 0 0 1.2cqw;
  border: 1px solid rgba(130, 103, 72, 0.15);
  border-radius: 50%;
  background: #f3e8da;
  object-fit: cover;
}

.tt-ios-agent-message header > span {
  display: flex;
  align-items: center;
  gap: 0.32cqw;
}

.tt-ios-agent-message header strong {
  color: #383430;
  font-size: 0.54cqw;
  font-weight: 600;
}

.tt-ios-agent-message header small {
  padding: 0.08cqw 0.3cqw;
  border-radius: 0.25cqw;
  background: #f2e9de;
  color: #8b6647;
  font-size: 0.4cqw;
  font-weight: 500;
}

.tt-ios-agent-message > p {
  margin: 0.55cqw 0 0;
  color: #403c38;
  font-size: 0.56cqw;
  line-height: 1.62;
}

.tt-ios-execution {
  margin-top: 1.05cqw;
  color: #6f6a64;
}

.tt-ios-execution > header {
  display: grid;
  height: 1.8cqw;
  grid-template-columns: 0.82cqw minmax(0, 1fr) 0.68cqw;
  align-items: center;
  gap: 0.43cqw;
  padding: 0 0.18cqw;
}

.tt-ios-execution > header svg {
  width: 0.78cqw;
  height: 0.78cqw;
  color: #918c86;
}

.tt-ios-execution > header svg:last-child {
  width: 0.64cqw;
  height: 0.64cqw;
  justify-self: end;
}

.tt-ios-execution > header strong {
  font-size: 0.52cqw;
  font-weight: 500;
}

.tt-ios-execution__active {
  position: relative;
  display: grid;
  min-height: 3.2cqw;
  grid-template-columns: 0.82cqw minmax(0, 1fr);
  align-items: center;
  gap: 0.5cqw;
  margin: 0.22cqw 0 0 0.52cqw;
  padding-left: 0.84cqw;
}

.tt-ios-execution__active > i {
  position: absolute;
  top: 0.15cqw;
  bottom: 0.15cqw;
  left: 0;
  width: 1px;
  background: #ddd9d4;
}

.tt-ios-execution__spinner {
  width: 0.76cqw;
  height: 0.76cqw;
  border: 0.1cqw solid #d7d2cd;
  border-top-color: var(--tt-ios-blue);
  border-radius: 50%;
}

.tt-ios-execution__active > span:last-child {
  display: grid;
  min-width: 0;
  line-height: 1.4;
}

.tt-ios-execution__active strong {
  color: #4b4641;
  font-size: 0.53cqw;
  font-weight: 500;
}

.tt-ios-execution__active small {
  color: #a26b3d;
  font-size: 0.42cqw;
}

.tt-ios-composer {
  position: absolute;
  right: 0.72cqw;
  bottom: 1.22cqw;
  left: 0.72cqw;
  z-index: 4;
  display: grid;
  min-height: 5.85cqw;
  grid-template-rows: 1fr 2.05cqw;
  padding: 0.78cqw 0.75cqw 0.45cqw;
  border-radius: 1.08cqw;
  background: rgba(255, 255, 255, 0.98);
  box-shadow:
    0 0.16cqw 0.52cqw rgba(36, 31, 27, 0.065),
    0 0.7cqw 1.75cqw rgba(36, 31, 27, 0.075);
}

.tt-ios-composer__placeholder {
  align-self: start;
  color: #aaa6a0;
  font-size: 0.5cqw;
  line-height: 1.45;
}

.tt-ios-composer__toolbar,
.tt-ios-composer__actions {
  display: flex;
  align-items: center;
}

.tt-ios-composer__toolbar {
  gap: 0.5cqw;
  align-self: end;
}

.tt-ios-composer__add,
.tt-ios-composer__send {
  display: grid;
  place-items: center;
}

.tt-ios-composer__add {
  width: 1.55cqw;
  height: 1.55cqw;
  border-radius: 50%;
  background: #f1f0ee;
  color: #79746e;
}

.tt-ios-composer__add svg {
  width: 0.76cqw;
  height: 0.76cqw;
}

.tt-ios-composer__model {
  color: #716c66;
  font-size: 0.44cqw;
  font-weight: 500;
}

.tt-ios-composer__actions {
  gap: 0.52cqw;
  margin-left: auto;
}

.tt-ios-composer__mic {
  width: 0.82cqw;
  height: 0.82cqw;
  color: #85807a;
}

.tt-ios-composer__send {
  width: 1.38cqw;
  height: 1.38cqw;
  border-radius: 50%;
  background: #e4eefb;
  color: var(--tt-ios-blue);
}

.tt-ios-composer__send svg {
  width: 0.78cqw;
  height: 0.78cqw;
  stroke-width: 1.9;
}

.tt-ios-home-indicator {
  position: absolute;
  bottom: 0.42cqw;
  left: 50%;
  z-index: 5;
  width: 5.4cqw;
  height: 0.28cqw;
  border-radius: 999px;
  background: #201e1c;
  transform: translateX(-50%);
}

@media (prefers-reduced-motion: no-preference) {
  .feat__media .tt-product-demo--multidevice > .tt-shell-topbar,
  .feat__media .tt-product-demo--multidevice > .tt-shell-body {
    opacity: 1;
  }

  .feat__media .tt-product-demo--multidevice > .tt-shell-topbar {
    transform: translate3d(0, -0.9cqw, 0);
  }

  .feat__media .tt-product-demo--multidevice > .tt-shell-body {
    transform: translate3d(0, 1.2cqw, 0) scale(0.992);
    transform-origin: 50% 40%;
  }

  .feat__media .tt-product-demo--multidevice .tt-ios-phone {
    opacity: 1;
    transform: translate3d(2.8cqw, 1.2cqw, 0) rotate(1.5deg) scale(0.96);
    transform-origin: 70% 80%;
  }

  .feat__media .tt-product-demo--multidevice .tt-multidevice-stage-mobile-user,
  .feat__media .tt-product-demo--multidevice .tt-multidevice-stage-mobile-agent,
  .feat__media .tt-product-demo--multidevice .tt-multidevice-stage-mobile-run,
  .feat__media .tt-product-demo--multidevice .tt-multidevice-stage-mobile-composer {
    opacity: 1;
    transform: translate3d(0, 0.7cqw, 0);
  }

  .feat__media.is-demo-active .tt-product-demo--multidevice > .tt-shell-topbar {
    animation: tt-multidevice-shell-in 620ms cubic-bezier(0.22, 1, 0.36, 1) 80ms forwards;
  }

  .feat__media.is-demo-active .tt-product-demo--multidevice > .tt-shell-body {
    animation: tt-multidevice-shell-in 760ms cubic-bezier(0.22, 1, 0.36, 1) 160ms forwards;
  }

  .feat__media.is-demo-active .tt-product-demo--multidevice .tt-ios-phone {
    animation: tt-multidevice-phone-in 880ms cubic-bezier(0.16, 1, 0.3, 1) 560ms forwards;
  }

  .feat__media.is-demo-active .tt-product-demo--multidevice .tt-multidevice-stage-mobile-user {
    animation: tt-multidevice-content-in 520ms ease 980ms forwards;
  }

  .feat__media.is-demo-active .tt-product-demo--multidevice .tt-multidevice-stage-mobile-agent {
    animation: tt-multidevice-content-in 520ms ease 1160ms forwards;
  }

  .feat__media.is-demo-active .tt-product-demo--multidevice .tt-multidevice-stage-mobile-run {
    animation: tt-multidevice-content-in 520ms ease 1340ms forwards;
  }

  .feat__media.is-demo-active .tt-product-demo--multidevice .tt-multidevice-stage-mobile-composer {
    animation: tt-multidevice-content-in 520ms ease 1500ms forwards;
  }

  .feat__media.is-demo-active .tt-product-demo--multidevice .tt-ios-execution__spinner {
    animation: tt-multidevice-spin 1.2s linear 1.5s 2;
  }

  .feat__media.is-demo-active .tt-product-demo--multidevice .tt-ios-composer__send {
    animation: tt-multidevice-send-pulse 1.4s ease 1.8s 2;
  }
}

@keyframes tt-multidevice-shell-in {
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes tt-multidevice-phone-in {
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes tt-multidevice-content-in {
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes tt-multidevice-spin {
  to { transform: rotate(360deg); }
}

@keyframes tt-multidevice-send-pulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(52, 120, 196, 0)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 0.5cqw rgba(52, 120, 196, 0.28)); transform: scale(1.08); }
}