/* AI design ideas page (builds on /site.css + /design/design.css) */
.ai-gate { max-width: 560px; }
.ai-stage { position: relative; aspect-ratio: 1; max-width: 560px; margin: 0 auto; border-radius: 10px;
  background: radial-gradient(circle at 50% 40%, #2a2a2a, #141414); border: 1px solid var(--line); overflow: hidden; }
.ai-stage canvas { width: 100%; height: 100%; display: block; touch-action: none; }
.ai-stage canvas.can-drag { cursor: grab; }
.ai-stage canvas.dragging { cursor: grabbing; }
.ai-drag-hint { text-align: center; margin: 0; }
#reset-pos { justify-self: center; background: none; border: 0; color: var(--text-soft); text-decoration: underline; cursor: pointer; font: inherit; font-size: 0.85rem; }
#reset-pos:hover { color: var(--emerald); }
.ai-empty, .ai-busy { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px; color: var(--text-soft); }
.ai-busy { background: rgb(20 20 20 / 0.75); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; }
.ai-busy[hidden], .ai-empty[hidden] { display: none; }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--emerald); animation: ai-spin 0.9s linear infinite; }
@keyframes ai-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }
.ai-result { display: grid; gap: 12px; max-width: 560px; margin: 4px auto 0; }
.ai-choice { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.ai-choice .button { border: 0; cursor: pointer; }
.ai-text-tools { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.ai-text-tools label { display: grid; gap: 4px; font-size: 0.88rem; color: var(--text-soft); }
.ai-text-tools input[type=range] { accent-color: var(--emerald); width: 100%; }
.ai-guide { text-align: center; max-width: 560px; margin: 10px auto 0; }
.ai-cats { justify-content: flex-start; flex-wrap: wrap; margin-bottom: 0; }

.ai-saved { display: grid; gap: 10px; }
.ai-card { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: start; padding: 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--slate); }
.ai-card.picked { border-color: var(--emerald); box-shadow: 0 0 0 1px rgb(80 200 120 / 0.35); }
.ai-card img { width: 76px; height: 76px; object-fit: contain; border-radius: 6px; background: #111; }
.ai-card .meta { display: grid; gap: 6px; min-width: 0; }
.ai-card .meta strong { font-size: 0.92rem; overflow-wrap: anywhere; }
.ai-card .meta .quiet { font-size: 0.8rem; overflow-wrap: anywhere; }
.ai-card .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ai-card .row label { display: flex; gap: 6px; align-items: center; font-size: 0.88rem; font-weight: 500; }
.ai-card .row input[type=checkbox] { width: auto; }
.ai-card .row input[type=number] { width: 80px; padding: 6px 8px; }
.ai-card .linkish { background: none; border: 0; padding: 0; color: var(--text-soft); text-decoration: underline; cursor: pointer; font: inherit; font-size: 0.82rem; }
.ai-card .linkish:hover { color: var(--emerald); }
.ai-card .linkish.danger { color: #ff8a8a; }
.ai-card .sent { color: var(--emerald); font-size: 0.8rem; }