/* ui.ai.css - how anything AI looks on the Citadel (and Artist) (owner, 2026-10-23: "all the AI stuff (like Ask Nora) should always be
   purple. That's a house rule across all estates"). Same tokens and class names as Cog Machina's
   console.cogmachina.com/public/assets/css/ui.ai.css (the reference) - keep the copies in step.
   AI = violet (#8b5cf6) + a gold sparkle; nothing that is not AI is violet. Loaded on every page by php/utils/global.php (the default $additional_css).
   Classes: .ai-spark (+ .is-after), .ai = .btn-ai (the AI button: violet fill + gold sparkle, never typed in a label; use .ai) (+ .is-ghost, .btn-mini), .ai-switch, .chip-ai, .ai-status (+ .is-busy/.is-error/.is-ok),
   .ai-panel (+ .ai-panel-head, .ai-by), .is-ai-filled, .ai-note, .ai-verdict. Tokens: --ai, --ai-hi, --ai-dim, --ai-line, --ai-gold. */

:root { --ai: #8b5cf6; --ai-hi: #a78bfa; --ai-dim: rgba(139, 92, 246, 0.14); --ai-line: rgba(139, 92, 246, 0.55); --ai-gold: #f5c542; }

/* the sparkle: a gold glyph before anything .ai-spark, so markup never carries the character itself */
.ai-spark::before { content: "\2728"; margin-right: 0.35em; color: var(--ai-gold); font-style: normal; }
.ai-spark.is-after::before { content: none; }
.ai-spark.is-after::after { content: "\2728"; margin-left: 0.35em; color: var(--ai-gold); }

/* the filled button ("Describe it", "Review with AI"): violet, a little glow, the sparkle in front */
.btn-ai, .ai { display: inline-flex; align-items: center; gap: 0.4em; padding: 5px 14px; border-radius: 8px; border: 1px solid var(--ai-hi);
          background: linear-gradient(180deg, #9d75ff, var(--ai) 60%, #7c4fe0); color: #fff; font-family: inherit; font-weight: 600; font-size: 0.8rem; letter-spacing: 0.01em;
          cursor: pointer; box-shadow: 0 2px 10px rgba(139, 92, 246, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25); text-decoration: none; white-space: nowrap; }
.btn-ai::before, .ai::before { content: "\2728"; color: var(--ai-gold); }
.btn-ai:hover, .ai:hover { filter: brightness(1.08); box-shadow: 0 3px 14px rgba(139, 92, 246, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.btn-ai:disabled, .btn-ai.is-busy, .ai:disabled, .ai.is-busy { opacity: 0.6; cursor: default; filter: none; }
.btn.ai { background: linear-gradient(180deg, #9d75ff, var(--ai) 60%, #7c4fe0); color: #fff; border: 1px solid var(--ai-hi); }
/* An AI pill drawn as a house button (makeButton 'ai' + rb-chip-btn - the Ask Nora pills, ai.task 477) keeps the .ai shape: */
.btn.ai.rb-chip-btn { border-radius: 8px; font-weight: 600; }
.btn.ai.is-ghost { background: var(--ai-dim); color: var(--ai-hi); border-color: var(--ai-line); }
.btn-ai.btn-mini, .ai.btn-mini { padding: 3px 10px; font-size: 0.74rem; }
/* the outline variant: quieter, for a second AI action beside a filled one */
.btn-ai.is-ghost, .ai.is-ghost { background: var(--ai-dim); color: var(--ai-hi); box-shadow: none; border-color: var(--ai-line); }
.btn-ai.is-ghost:hover, .ai.is-ghost:hover { background: rgba(139, 92, 246, 0.26); }

/* the switch ("AI mode"): a violet pill with its box */
.ai-switch { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.65rem; border: 1px solid var(--ai-line); border-radius: 999px;
             font-weight: 600; font-size: 0.8rem; cursor: pointer; background: var(--ai-dim); color: var(--ai-hi); white-space: nowrap; }
.ai-switch input { accent-color: var(--ai); margin: 0; }
.ai-switch::before { content: "\2728"; color: var(--ai-gold); }

/* a chip that says the model produced or judged something */
.chip-ai { color: var(--ai-hi); border-color: var(--ai-line); background: var(--ai-dim); }
.chip-ai::before { content: "\2728"; color: var(--ai-gold); margin-right: 4px; }

/* a status line while the model works, or when it could not */
.ai-status { display: flex; align-items: flex-start; gap: 0.6rem; margin: 6px 0 0; padding: 0.35rem 0.6rem; border-radius: 8px; font-size: 0.8rem;
             background: var(--ai-dim); color: var(--net-text-secondary, #adb5bd); }
.ai-status[hidden] { display: none; }
.ai-status.is-busy::before { content: ''; flex: 0 0 auto; display: inline-block; width: 0.8em; height: 0.8em; margin-top: 0.2em; border: 2px solid var(--ai);
                             border-right-color: transparent; border-radius: 50%; animation: ai-spin 0.8s linear infinite; }
.ai-status.is-error { background: rgba(224, 82, 82, 0.14); color: #ff8a80; }
.ai-status.is-ok { color: var(--ai-hi); }
@keyframes ai-spin { to { transform: rotate(360deg); } }

/* a panel of what the model said: violet rule down the left */
.ai-panel { margin: 8px 0 0; padding: 0.55rem 0.8rem; border-left: 3px solid var(--ai); border-radius: 0 8px 8px 0; background: rgba(139, 92, 246, 0.08); font-size: 0.82rem; color: var(--net-text-secondary, #adb5bd); }
.ai-panel-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 4px; color: var(--net-text-primary, #e9ecef); font-weight: 600; }
.ai-panel-head .ai-spark::before { margin-right: 0.3em; }
.ai-panel p { margin: 4px 0 0; }
.ai-panel .sub { margin-top: 2px; }
.ai-panel .ai-by { margin-left: auto; font-size: 0.72rem; color: var(--net-text-muted, #6c757d); font-weight: 400; }

/* a field the model filled, until a person edits it */
.is-ai-filled { box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.55); }
.is-ai-filled + .ai-note, .ai-note { font-size: 0.74rem; color: var(--ai-hi); }
.ai-note::before { content: "\2728"; color: var(--ai-gold); margin-right: 0.3em; }

/* a verdict word, coloured by what it means - the chip stays violet-framed so the source is clear */
.ai-verdict { display: inline-flex; align-items: center; gap: 0.3em; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--ai-line); background: var(--ai-dim); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ai-hi); }
.ai-verdict.is-good { color: #2ecc71; }
.ai-verdict.is-warn { color: #f0ad4e; }
.ai-verdict.is-bad { color: #ff8a80; }
.ai-verdict small { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--net-text-muted, #6c757d); }

@media (prefers-reduced-motion: reduce) { .ai-status.is-busy::before { animation: none; } }