/* Connect an AI to Nighty Design (/tools/ui-designer/ai): the Tell your AI card, one card per AI app with its command
   or button, pairing, the cards of what the AI can do and of safety, removing per app. Glass cards like the rest of
   the site; the step drawings and questions come from designer-guide.css and tools.css. */

/* ---------- Quick setup ---------- */
.ai-quick {
  display: grid;
  gap: 12px;
  padding: 22px;
  border: 1px solid var(--accent-line, var(--glass-border));
  border-radius: var(--radius-lg);
  background: radial-gradient(120% 140% at 0% 0%, rgba(255, 92, 168, 0.12), transparent 60%), var(--glass-1);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.ai-quick .section-title-sm {
  margin: 0;
}

.ai-quick-lead,
.ai-quick-note {
  margin: 0;
  color: var(--text-2);
  font-size: 15px;
}

.ai-quick-note {
  color: var(--text-3);
  font-size: 13.5px;
}

.ai-quick-code pre {
  padding: 16px 18px;
}

.ai-quick-code code {
  color: var(--text);
  font-size: 15px;
  white-space: pre-wrap;
  word-break: break-word;
}

.ai-quick-code .btn {
  min-width: 96px;
}

/* ---------- cards ---------- */
.ai-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 14px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.ai-card {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--glass-1);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  transition: border-color var(--medium) var(--ease-out), transform var(--medium) var(--ease-out);
}

.ai-card:hover {
  border-color: var(--glass-border-hover);
  transform: translateY(-2px);
}

.ai-card h3 {
  font-size: 1rem;
  letter-spacing: -0.01em;
}

.ai-card p {
  margin: 0;
  color: var(--text-2);
  font-size: 14.5px;
}

.ai-card-icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 92, 168, 0.12);
  color: var(--accent-ink, var(--accent));
}

.ai-card-icon.is-ok {
  background: rgba(74, 222, 128, 0.12);
  color: var(--ok, #4ade80);
}

/* ---------- the quick way's three steps ---------- */
.ai-flow {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

/* ---------- per app: one card each, name on the left, its command or button on the right ---------- */
.ai-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
}

.ai-jump .chip {
  height: 32px;
  font-size: 13.5px;
}

.ai-apps {
  display: grid;
  gap: 12px;
  margin: 16px 0;
  padding: 0;
  list-style: none;
}

.ai-app {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: 12px 22px;
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--glass-1);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  scroll-margin-top: 96px;
  transition: border-color var(--medium) var(--ease-out);
}

.ai-app:hover,
.ai-app:target {
  border-color: var(--glass-border-hover);
}

.ai-app-head {
  display: grid;
  align-content: start;
  gap: 6px;
}

.ai-app h3,
.ai-remove-row h3 {
  font-size: 1rem;
  letter-spacing: -0.01em;
}

.ai-app p,
.ai-remove-row p {
  margin: 0;
}

.ai-app-body,
.ai-remove-body {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
}

.ai-app-note {
  color: var(--text-3);
  font-size: 13.5px;
}

.ai-app-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.ai-app .code-head,
.ai-remove .code-head {
  letter-spacing: 0.04em;
  text-transform: none;
}

.ai-app code,
.ai-remove code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* The settings file, or an older way: folded. */
.ai-app-more {
  display: grid;
  gap: 10px;
}

.ai-app-more summary {
  width: fit-content;
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 600;
  cursor: var(--nc-hand, pointer);
}

.ai-app-more summary:hover {
  color: var(--text);
}

.ai-app-more[open] summary {
  margin-bottom: 10px;
}

/* ---------- pairing ---------- */
.ai-pair {
  display: grid;
  gap: 14px;
}

.ai-pair .section-title-sm,
.ai-pair .guide-actions {
  margin: 0;
}

.ai-pair .code-block {
  margin-top: 10px;
}

/* ---------- disconnect or remove, per app ---------- */
.ai-remove {
  display: grid;
  margin: 14px 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--glass-1);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.ai-remove-row {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  align-items: center;
  gap: 10px 22px;
  padding: 14px 20px;
}

.ai-remove-row + .ai-remove-row {
  border-top: 1px solid var(--glass-border);
}

@media (max-width: 720px) {
  .ai-app,
  .ai-remove-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .ai-app {
    padding: 16px;
  }

  .ai-remove-row {
    padding: 14px 16px;
  }
}

/* The three steps sit inside the Tell your AI card: lighter tiles, no glass on glass. */
.ai-quick .ai-flow {
  margin: 6px 0 0;
  gap: 12px;
}

.ai-quick .guide-flow-tile {
  padding: 12px 12px 16px;
  border-color: rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.025);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.ai-quick .guide-flow-tile:hover {
  transform: none;
}

/* ---------- folded: set it up yourself, disconnect or remove ---------- */
.ai-folds {
  display: grid;
  gap: 12px;
}

.ai-fold {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--glass-1);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  scroll-margin-top: 96px;
  transition: border-color var(--medium) var(--ease-out);
}

.ai-fold:hover,
.ai-fold[open] {
  border-color: var(--glass-border-hover);
}

.ai-fold > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 64px;
  padding: 14px 20px;
  list-style: none;
  cursor: var(--nc-hand, pointer);
}

.ai-fold > summary::-webkit-details-marker {
  display: none;
}

.ai-fold > summary > span {
  display: grid;
  gap: 2px;
}

.ai-fold > summary strong {
  color: var(--text);
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.ai-fold-hint {
  color: var(--text-3);
  font-size: 13.5px;
}

.ai-fold-icon {
  flex: none;
  color: var(--text-3);
  transition: transform var(--medium) var(--ease-out);
}

.ai-fold[open] .ai-fold-icon {
  transform: rotate(45deg);
}

.ai-fold-body {
  display: grid;
  gap: 14px;
  padding: 0 20px 20px;
}

.ai-fold-body .ai-apps,
.ai-fold-body .ai-remove,
.ai-fold-body .ai-jump {
  margin: 0;
}

.ai-fold .ai-app,
.ai-fold .ai-remove,
.ai-fold .step {
  background: rgba(255, 255, 255, 0.025);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.ai-pair h3#ai-pair {
  font-size: 1rem;
}

@media (max-width: 720px) {
  .ai-fold > summary {
    padding: 14px 16px;
  }

  .ai-fold-body {
    padding: 0 12px 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-fold-icon {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-card,
  .ai-card:hover,
  .ai-app {
    transition: none;
    transform: none;
  }
}