/* 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);
  --task-rail-accent: rgba(213, 221, 219, 0.92);
  --task-rail-accent-ring: rgba(213, 221, 219, 0.3);
  --task-rail-accent-halo: rgba(213, 221, 219, 0.08);
  --task-rail-leader: rgba(213, 221, 219, 0.28);
  --task-rail-leader-width: 27px;
  position: relative;
}

body.create-page .task-message:has(.ai-result-failed-slot) {
  --task-rail-accent: rgba(229, 145, 153, 0.84);
  --task-rail-accent-ring: rgba(229, 145, 153, 0.3);
  --task-rail-accent-halo: rgba(229, 145, 153, 0.08);
  --task-rail-leader: rgba(229, 145, 153, 0.3);
}

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-accent-ring: rgba(113, 194, 154, 0.3);
  --task-rail-accent-halo: rgba(113, 194, 154, 0.08);
  --task-rail-leader: rgba(113, 194, 154, 0.3);
}

body.create-page .task-message::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: calc(-1 * var(--task-rail-gap));
  left: var(--task-rail-x);
  width: 2px;
  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%
    ) 0 0 / 1px 100% no-repeat,
    linear-gradient(
      180deg,
      transparent 0,
      var(--task-rail-accent-ring) 22px,
      transparent 76px
    ) 1px 0 / 1px 100% no-repeat;
  pointer-events: none;
}

body.create-page .task-message::after {
  content: "";
  position: absolute;
  top: 20px;
  left: calc(var(--task-rail-x) - 7px);
  width: 46px;
  height: 16px;
  background:
    radial-gradient(circle at 8px 50%, var(--task-rail-accent) 0 2.5px, transparent 3px),
    radial-gradient(circle at 8px 50%, transparent 0 5.25px, var(--task-rail-accent-ring) 5.25px 6px, transparent 6px),
    radial-gradient(circle at 8px 50%, var(--task-rail-accent-halo) 0 8px, transparent 8.25px),
    linear-gradient(
      90deg,
      var(--task-rail-leader),
      transparent
    ) 15px 50% / var(--task-rail-leader-width) 1px no-repeat;
  background-repeat: no-repeat;
  transform: translateY(-50%);
  pointer-events: 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;
  }

  body.create-page .task-message::after {
    top: 18px;
    width: 38px;
    --task-rail-leader-width: 21px;
  }
}

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;
}