/* /editor: AI prompts wall (Reviews.js), integrations (Integrations.js) and
   the changelog teaser (Changelog.js). Nyx palette: cream, ink, copper. */
:root {
  --nyx-ink: #060606;
  --nyx-cream: #fcfbf9;
  --nyx-muted: #6b665e;
  --nyx-line: #e7e1d6;
  --nyx-copper: #c25c20;
  --nyx-bronze: #e4b775;
}

/* ---------- Shared heads ---------- */
.ai-head,
.nyx-section-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ai-sub { max-width: 34rem; margin: 1.25rem auto 0; font-size: 1.05rem; line-height: 1.6; color: var(--nyx-muted); text-wrap: pretty; }

/* ---------- Logos in the middle of the wall ---------- */
.ai-logos { display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; }
.ai-logo { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 1.25rem; background: #fff; box-shadow: 0 0 0 1px rgb(6 6 6 / 0.07), 0 14px 32px -12px rgb(6 6 6 / 0.25); }
.ai-logo img { width: 2.6rem; height: 2.6rem; object-fit: contain; }
.ai-logo.is-gpt { rotate: -6deg; position: relative; z-index: 1; }
.ai-logo.is-claude { rotate: 7deg; margin-left: -0.6rem; }

/* ---------- Prompt card (ChatGPT style composer) ---------- */
.ai-wall .review-card { border-radius: calc(22 * var(--k)); background: #fff; }
.ai-card .ai-prompt { font-size: calc(15.5 * var(--k)); }
.ai-prompt { display: flex; flex-direction: column; gap: 0.9em; padding: 1.05em 1.05em 0.85em 1.25em; border-radius: inherit; background: #fff; color: var(--nyx-ink); text-align: left; }
.ai-prompt-text { margin: 0; font-size: 1em; line-height: 1.45; font-weight: 500; letter-spacing: -0.005em; text-wrap: pretty; }
.ai-prompt-bar { display: flex; align-items: center; gap: 0.5em; }
.ai-prompt-plus { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; border: 1px solid var(--nyx-line); color: var(--nyx-muted); font-size: 0.95em; line-height: 1; }
.ai-prompt-model { display: inline-flex; align-items: center; gap: 0.4em; height: 1.9em; padding: 0 0.7em 0 0.5em; border-radius: 999px; background: #f4f2ee; font-size: 0.78em; font-weight: 600; color: #3d3a35; }
.ai-prompt-model img { width: 1.15em; height: 1.15em; object-fit: contain; }
.ai-prompt-send { display: grid; place-items: center; width: 2em; height: 2em; margin-left: auto; border-radius: 50%; background: var(--nyx-ink); color: #fff; }
.ai-prompt-send svg { width: 1em; height: 1em; }

/* Phone rows: two above the heading, two below, moved by drift.js instead of
   the review-drift keyframe (which also left no way to swipe them). */
.ai-rows { display: flex; flex-direction: column; gap: 0.75rem; }
.ai-rows-head { margin: 3.5rem 0; }
.ai-rows .review-track { animation: none; padding-inline-end: 0; will-change: transform; cursor: grab; -webkit-user-select: none; user-select: none; }
.ai-chip { flex: none; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--stroke-soft, #e4e4e4); }
.ai-chip .ai-prompt { font-size: 14px; }

/* ---------- Integrations ---------- */
.nyx-integrations { padding: 7rem 0 2rem; overflow-x: clip; }
.nyx-integrations .nyx-section-head { padding-inline: 1.25rem; }
.nyx-int-rows { display: flex; flex-direction: column; gap: 1rem; margin-top: 3.5rem; }
/* moved from script (drift.js): drifts on its own and can be swiped */
.nyx-int-row { display: flex; gap: 1rem; width: max-content; margin: 0; padding: 0; list-style: none; will-change: transform; cursor: grab; -webkit-user-select: none; user-select: none; }
.nyx-int-row[data-dragging],
.ai-rows .review-track[data-dragging] { cursor: grabbing; }
.nyx-int-icon { display: grid; place-items: center; flex: none; width: 6rem; height: 6rem; border-radius: 1.6rem; background: #fff; box-shadow: 0 0 0 1px rgb(6 6 6 / 0.06), 0 10px 24px -14px rgb(6 6 6 / 0.25); }
.nyx-int-icon img { width: 3.25rem; height: 3.25rem; object-fit: contain; -webkit-user-drag: none; }
@media (max-width: 640px) {
  .nyx-integrations { padding-top: 5rem; }
  .nyx-int-rows { gap: 0.6rem; margin-top: 2.5rem; }
  .nyx-int-row { gap: 0.6rem; }
  .nyx-int-icon { width: 4.25rem; height: 4.25rem; border-radius: 1.15rem; }
  .nyx-int-icon img { width: 2.4rem; height: 2.4rem; }
}

/* ---------- Changelog teaser ---------- */
.nyx-changelog { padding: 6rem 1.25rem 2rem; }
.nyx-changelog-inner { max-width: 52rem; margin: 0 auto; }
.nyx-cl-card { position: relative; margin-top: 3rem; max-height: 23rem; overflow: hidden; padding: 2rem 2rem 0; border: 1px solid var(--nyx-line); border-bottom: 0; border-radius: 1.5rem 1.5rem 0 0; background: #fff; -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent 100%); mask-image: linear-gradient(to bottom, #000 35%, transparent 100%); }
.nyx-cl-entry { display: flex; gap: 2.5rem; }
.nyx-cl-date { flex: none; width: 8rem; font-size: 0.875rem; font-weight: 500; color: var(--nyx-muted); }
.nyx-cl-body { min-width: 0; flex: 1; }
.nyx-cl-tags { display: flex; flex-wrap: wrap; gap: 1rem; }
.nyx-cl-tag { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; font-weight: 600; color: rgb(6 6 6 / 0.75); }
.nyx-cl-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; }
.nyx-cl-dot.is-feature { background: var(--nyx-copper); }
.nyx-cl-dot.is-improvement { background: #3b82f6; }
.nyx-cl-dot.is-fix { background: #16a34a; }
.nyx-cl-title { margin: 0.75rem 0 0; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.015em; color: var(--nyx-ink); }
.nyx-cl-text { margin: 0.5rem 0 0; font-size: 0.95rem; line-height: 1.65; color: rgb(6 6 6 / 0.85); }
.nyx-cl-list { margin: 0.75rem 0 0; padding-left: 1.25rem; list-style: disc; font-size: 0.95rem; line-height: 1.65; color: rgb(6 6 6 / 0.85); }
.nyx-cl-list li + li { margin-top: 0.35rem; }
.nyx-cl-list li::marker { color: var(--nyx-muted); }
@media (max-width: 640px) {
  .nyx-changelog { padding-top: 4.5rem; }
  .nyx-cl-card { padding: 1.4rem 1.25rem 0; max-height: 26rem; }
  .nyx-cl-entry { flex-direction: column; gap: 0.75rem; }
}