/* Create page TapNow theme - task history rail, message cards, generated-media grid, ratio slots, and responsive overrides. Load last. */

/* Task history and generated media */
body.create-page .message-avatar,
body.create-page .message-user .message-avatar,
body.create-page .message-ai .message-avatar {
  border: 1px solid var(--tap-line) !important;
  background: var(--tap-surface-raised) !important;
  color: var(--tap-text) !important;
  box-shadow: var(--tap-inset) !important;
}

body.create-page .task-message {
  --task-rail-gap: 22px;
  --task-rail-x: -28px;
  --task-rail-neutral: rgba(164, 172, 170, 0.16);
  --task-rail-neutral-strong: rgba(164, 172, 170, 0.3);
  /* 磁场涟漪：沿用白灰进行中、绿色成功、粉色失败的状态配色。 */
  /* Initial position; the prompt module aligns this to the rendered first line. */
  --task-rail-node-y: 36px;
  --task-rail-accent: rgba(213, 221, 219, 0.92);
  --task-rail-core-hi: rgba(244, 247, 246, 0.95);
  --task-rail-spark: rgba(213, 221, 219, 0.45);
  --task-rail-bloom: rgba(213, 221, 219, 0.16);
  position: relative;
}

body.create-page .task-message:has(.ai-result-failed-slot) {
  --task-rail-accent: rgba(229, 145, 153, 0.84);
  --task-rail-core-hi: rgba(246, 198, 202, 0.95);
  --task-rail-spark: rgba(229, 145, 153, 0.45);
  --task-rail-bloom: rgba(229, 145, 153, 0.16);
}

body.create-page .task-message:has(.ai-result-image, .ai-result-video):not(:has(.ai-result-failed-slot)) {
  --task-rail-accent: rgba(113, 194, 154, 0.88);
  --task-rail-core-hi: rgba(194, 236, 212, 0.95);
  --task-rail-spark: rgba(113, 194, 154, 0.45);
  --task-rail-bloom: rgba(113, 194, 154, 0.16);
}

body.create-page .task-message::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: calc(-1 * var(--task-rail-gap));
  left: var(--task-rail-x);
  width: 1px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    transparent 0,
    var(--task-rail-neutral-strong) 22px,
    var(--task-rail-neutral) 78px,
    rgba(164, 172, 170, 0.08) 72%,
    var(--task-rail-neutral) 100%
  );
  pointer-events: none;
  /* 在节点周围断开时间线，避免连接线穿过透明圆环。 */
  mask-image: linear-gradient(
    to bottom,
    #000 calc(var(--task-rail-node-y) - 12px),
    transparent calc(var(--task-rail-node-y) - 12px),
    transparent calc(var(--task-rail-node-y) + 12px),
    #000 calc(var(--task-rail-node-y) + 12px)
  );
}

/* 两道波纹错相向外扩散，中心点保持稳定；不改变任务卡片布局。 */
@property --task-ripple-a {
  syntax: "<number>";
  initial-value: 0.25;
  inherits: false;
}

@property --task-ripple-b {
  syntax: "<number>";
  initial-value: 0.75;
  inherits: false;
}

body.create-page .task-message::after {
  content: "";
  position: absolute;
  top: var(--task-rail-node-y);
  left: calc(var(--task-rail-x) - 11.5px);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--task-rail-core-hi) 0 2px, transparent 2.5px),
    radial-gradient(circle,
      transparent calc(2.2px + var(--task-ripple-a) * 7px),
      color-mix(in srgb, var(--task-rail-accent) calc((1 - var(--task-ripple-a)) * 80%), transparent) calc(2.6px + var(--task-ripple-a) * 7px) calc(3.3px + var(--task-ripple-a) * 7px),
      transparent calc(3.7px + var(--task-ripple-a) * 7px)),
    radial-gradient(circle,
      transparent calc(2.2px + var(--task-ripple-b) * 7px),
      color-mix(in srgb, var(--task-rail-accent) calc((1 - var(--task-ripple-b)) * 80%), transparent) calc(2.6px + var(--task-ripple-b) * 7px) calc(3.3px + var(--task-ripple-b) * 7px),
      transparent calc(3.7px + var(--task-ripple-b) * 7px));
  box-shadow: none;
  transform: translateY(-50%);
  animation: createTaskRippleA 2.5s ease-out infinite,
    createTaskRippleB 2.5s ease-out -1.25s infinite;
  pointer-events: none;
}

/* 终态停止动画：成功为双环，失败为上外弧与下内弧。 */
body.create-page .task-message:has(.ai-result-image, .ai-result-video):not(:has(.ai-result-failed-slot))::after {
  animation: none;
  background:
    radial-gradient(circle, var(--task-rail-core-hi) 0 2px, transparent 2.5px),
    radial-gradient(circle, transparent 3.6px, var(--task-rail-accent) 4px 4.8px, transparent 5.2px),
    radial-gradient(circle, transparent 7.8px, color-mix(in srgb, var(--task-rail-accent) 32%, transparent) 8.2px 9px, transparent 9.4px);
}

body.create-page .task-message:has(.ai-result-failed-slot)::after {
  animation: none;
  background:
    radial-gradient(circle, var(--task-rail-core-hi) 0 2px, transparent 2.5px) center / 100% 100% no-repeat,
    radial-gradient(circle at 50% 100%, transparent 7px, var(--task-rail-accent) 7.4px 8.2px, transparent 8.6px) top / 100% 50% no-repeat,
    radial-gradient(circle at 50% 0%, transparent 3.6px, var(--task-rail-accent) 4px 4.8px, transparent 5.2px) bottom / 100% 50% no-repeat;
}

@keyframes createTaskRippleA {
  from { --task-ripple-a: 0; }
  to { --task-ripple-a: 1; }
}

@keyframes createTaskRippleB {
  from { --task-ripple-b: 0; }
  to { --task-ripple-b: 1; }
}

@media (prefers-reduced-motion: reduce) {
  body.create-page .task-message::after {
    animation: none;
  }
}

body.create-page .task-message:not(:has(~ .task-message))::before {
  bottom: 0;
  background: linear-gradient(
    180deg,
    transparent 0,
    var(--task-rail-neutral-strong) 22px,
    var(--task-rail-neutral) 76px,
    transparent 100%
  );
}

@media (min-width: 821px) {
  body.create-page .chat-messages {
    position: relative;
    left: 24px;
    width: calc(100% - 48px);
  }

  body.create-page .task-message {
    --task-rail-gap: 18px;
  }
}

@media (max-width: 700px) {
  body.create-page .task-message {
    --task-rail-x: -16px;
    --task-rail-node-y: 32px;
  }
}

body.create-page .message-content {
  border: 1px solid var(--tap-line) !important;
  border-left-color: var(--tap-line) !important;
  border-radius: 12px !important;
  background: #1d1d1d !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.create-page .message-content:hover {
  border-color: rgba(255, 255, 255, 0.15) !important;
  background: #222 !important;
}

body.create-page .task-card,
body.create-page .task-message .task-card {
  border: 1px solid transparent !important;
  border-left-color: transparent !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.create-page .task-card:hover,
body.create-page .task-message .task-card:hover {
  border-color: transparent !important;
  background: transparent !important;
}

/* Four-result generations stay on one row at desktop widths. */
body.create-page .ai-result-grid.count-4 {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 1100px;
}

/* A single 1:1 result uses the same card width as one slot in the four-column grid. */
body.create-page .ai-result-grid.ratio-1-1:not(.count-4) > .ai-result-placeholder,
body.create-page .ai-result-grid.ratio-1-1:not(.count-4) > .ai-result-frame,
body.create-page .task-output > .ai-result-frame.ratio-1-1 {
  width: min(266px, calc((100% - 36px) / 4)) !important;
  max-width: none !important;
}

body.create-page .ai-result-grid.count-4 > .ai-result-frame,
body.create-page .ai-result-grid.count-4 > .ai-result-placeholder {
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
}

body.create-page .ai-result-grid.count-4 > .ai-result-placeholder {
  height: auto !important;
}

/* Waiting and completed results share one stable slot geometry per ratio. */
body.create-page .ai-result-grid > .ai-result-frame,
body.create-page .ai-result-grid > .ai-result-placeholder {
  min-width: 0;
  max-width: none;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.create-page .ai-result-grid > .ai-result-frame > .ai-result-image,
body.create-page .ai-result-grid > .ai-result-frame > .ai-result-video {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain;
}

body.create-page .task-output > .ai-result-frame {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.create-page .task-output > .ai-result-frame > :is(.ai-result-image, .ai-result-video) {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain;
}

body.create-page .ai-result-grid.ratio-1-3 > :is(.ai-result-frame, .ai-result-placeholder) { aspect-ratio: 1 / 3; }
body.create-page .ai-result-grid.ratio-9-21 > :is(.ai-result-frame, .ai-result-placeholder) { aspect-ratio: 9 / 21; }
body.create-page .ai-result-grid.ratio-1-2 > :is(.ai-result-frame, .ai-result-placeholder) { aspect-ratio: 1 / 2; }
body.create-page .ai-result-grid.ratio-9-16 > :is(.ai-result-frame, .ai-result-placeholder) { aspect-ratio: 9 / 16; }
body.create-page .ai-result-grid.ratio-2-3 > :is(.ai-result-frame, .ai-result-placeholder) { aspect-ratio: 2 / 3; }
body.create-page .ai-result-grid.ratio-3-4 > :is(.ai-result-frame, .ai-result-placeholder) { aspect-ratio: 3 / 4; }
body.create-page .ai-result-grid.ratio-4-5 > :is(.ai-result-frame, .ai-result-placeholder) { aspect-ratio: 4 / 5; }
body.create-page .ai-result-grid.ratio-1-1 > :is(.ai-result-frame, .ai-result-placeholder) { aspect-ratio: 1 / 1; }
body.create-page .ai-result-grid.ratio-3-2 > :is(.ai-result-frame, .ai-result-placeholder) { aspect-ratio: 3 / 2; }
body.create-page .ai-result-grid.ratio-4-3 > :is(.ai-result-frame, .ai-result-placeholder) { aspect-ratio: 4 / 3; }
body.create-page .ai-result-grid.ratio-5-4 > :is(.ai-result-frame, .ai-result-placeholder) { aspect-ratio: 5 / 4; }
body.create-page .ai-result-grid.ratio-16-9 > :is(.ai-result-frame, .ai-result-placeholder) { aspect-ratio: 16 / 9; }
body.create-page .ai-result-grid.ratio-2-1 > :is(.ai-result-frame, .ai-result-placeholder) { aspect-ratio: 2 / 1; }
body.create-page .ai-result-grid.ratio-3-1 > :is(.ai-result-frame, .ai-result-placeholder) { aspect-ratio: 3 / 1; }
body.create-page .ai-result-grid.ratio-21-9 > :is(.ai-result-frame, .ai-result-placeholder) { aspect-ratio: 21 / 9; }

body.create-page .task-output > .ai-result-frame.ratio-1-3 { aspect-ratio: 1 / 3; }
body.create-page .task-output > .ai-result-frame.ratio-9-21 { aspect-ratio: 9 / 21; }
body.create-page .task-output > .ai-result-frame.ratio-1-2 { aspect-ratio: 1 / 2; }
body.create-page .task-output > .ai-result-frame.ratio-9-16 { aspect-ratio: 9 / 16; }
body.create-page .task-output > .ai-result-frame.ratio-2-3 { aspect-ratio: 2 / 3; }
body.create-page .task-output > .ai-result-frame.ratio-3-4 { aspect-ratio: 3 / 4; }
body.create-page .task-output > .ai-result-frame.ratio-4-5 { aspect-ratio: 4 / 5; }
body.create-page .task-output > .ai-result-frame.ratio-1-1 { aspect-ratio: 1 / 1; }
body.create-page .task-output > .ai-result-frame.ratio-3-2 { aspect-ratio: 3 / 2; }
body.create-page .task-output > .ai-result-frame.ratio-4-3 { aspect-ratio: 4 / 3; }
body.create-page .task-output > .ai-result-frame.ratio-5-4 { aspect-ratio: 5 / 4; }
body.create-page .task-output > .ai-result-frame.ratio-16-9 { aspect-ratio: 16 / 9; }
body.create-page .task-output > .ai-result-frame.ratio-2-1 { aspect-ratio: 2 / 1; }
body.create-page .task-output > .ai-result-frame.ratio-3-1 { aspect-ratio: 3 / 1; }
body.create-page .task-output > .ai-result-frame.ratio-21-9 { aspect-ratio: 21 / 9; }

body.create-page .ai-result-grid > .ai-result-placeholder > .task-wait-indicator {
  width: 100%;
  height: 100%;
  min-height: 0;
  gap: 8px;
  padding: 12px;
  text-align: center;
}

body.create-page .ai-result-grid .task-wait-indicator .strands-wait-label {
  display: block;
  max-width: 12em;
  color: var(--tap-text-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0;
  text-wrap: balance;
}

body.create-page .task-wait-elapsed {
  display: block;
  min-width: 5ch;
  color: var(--tap-text-dim);
  font-size: 12px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  line-height: 1;
  letter-spacing: 0;
}

@media (max-width: 760px) {
  body.create-page .ai-result-grid.count-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body.create-page .ai-result-grid.ratio-1-1:not(.count-4) > .ai-result-placeholder,
  body.create-page .ai-result-grid.ratio-1-1:not(.count-4) > .ai-result-frame,
  body.create-page .task-output > .ai-result-frame.ratio-1-1 {
    width: calc((100% - 10px) / 2) !important;
  }
}

@media (max-width: 380px) {
  body.create-page .ai-result-grid.count-4 {
    grid-template-columns: minmax(0, 1fr);
  }

  body.create-page .ai-result-grid.ratio-1-1:not(.count-4) > .ai-result-placeholder,
  body.create-page .ai-result-grid.ratio-1-1:not(.count-4) > .ai-result-frame,
  body.create-page .task-output > .ai-result-frame.ratio-1-1 {
    width: 100% !important;
  }
}

body.create-page .task-card::before,
body.create-page .task-message .task-card::before {
  content: none !important;
}

body.create-page .task-prompt,
body.create-page .task-card-continuation-title {
  color: var(--tap-text) !important;
}