/*
 * Sage AI-Native visual language (Phase 3). Tokens only; motion-safe.
 * The reserved AI surface = the suite accent (violet) at low alpha, never used for
 * non-AI chrome. Components: AiCapabilityStrip, AiSuggestionCard (+confidence, Why?),
 * AiUnavailable. All are presentation; AI never auto-commits — Apply calls back.
 */

/* Reserved AI accent (violet, theme-aware via the suite token). */
.sage-ai {
  --sage-ai-accent: var(--ai, 262 83% 58%);
}

/* "What is AI about this screen" — the per-screen AI-surface declaration. */
.sage-ai-strip {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.85rem;
  margin: 0 0 0.85rem;
  border: 1px solid hsl(var(--ai, 262 83% 58%) / 0.28);
  background: hsl(var(--ai, 262 83% 58%) / 0.06);
  border-radius: 0.625rem;
  font-size: 0.85rem;
  color: hsl(var(--foreground, 222 47% 11%));
}
.sage-ai-strip__dot {
  width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: hsl(var(--ai, 262 83% 58%));
  flex: none;
}
.sage-ai-strip__label { font-weight: 600; color: hsl(var(--ai, 262 83% 58%)); }

/* AiSuggestionCard — the single way AI output appears. */
.sage-ai-card {
  border: 1px solid hsl(var(--ai, 262 83% 58%) / 0.3);
  background: hsl(var(--ai, 262 83% 58%) / 0.05);
  border-radius: 0.625rem;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.sage-ai-card__head { display: flex; align-items: center; gap: 0.5rem; }
.sage-ai-card__badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em;
  color: hsl(var(--ai, 262 83% 58%));
  text-transform: uppercase;
}
.sage-ai-card__badge svg { width: 0.85rem; height: 0.85rem; }
.sage-ai-card__confidence {
  margin-left: auto;
  font-size: 0.72rem; font-weight: 600;
  padding: 0.1rem 0.5rem; border-radius: 999px;
  background: hsl(var(--ai, 262 83% 58%) / 0.12);
  color: hsl(var(--ai, 262 83% 58%));
}
.sage-ai-card__body { font-size: 0.9rem; color: hsl(var(--foreground, 222 47% 11%)); white-space: pre-wrap; }
.sage-ai-card__why {
  font-size: 0.82rem;
  color: hsl(var(--muted-foreground, 215 16% 47%));
  border-left: 2px solid hsl(var(--ai, 262 83% 58%) / 0.4);
  padding: 0.25rem 0 0.25rem 0.65rem;
}
.sage-ai-card__why[hidden] { display: none; }
.sage-ai-card__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sage-ai-card__actions .btn,
.sage-ai-card__actions button { font-size: 0.82rem; }
.sage-ai-card__link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 0.82rem; font-weight: 600;
  color: hsl(var(--ai, 262 83% 58%));
  text-decoration: underline;
}

/* AiUnavailable — graceful degradation when an AI call fails. */
.sage-ai-unavailable {
  border: 1px dashed hsl(var(--border, 214 32% 91%));
  background: hsl(var(--muted, 210 40% 96%));
  border-radius: 0.625rem;
  padding: 0.85rem 1rem;
  font-size: 0.88rem;
  color: hsl(var(--muted-foreground, 215 16% 47%));
  display: flex; flex-direction: column; gap: 0.4rem;
}
.sage-ai-unavailable strong { color: hsl(var(--foreground, 222 47% 11%)); }

/* AiDisclosure — "AI-generated · review before use". */
.sage-ai-disclosure {
  margin-left: auto;
  font-size: 0.72rem; font-weight: 500;
  color: hsl(var(--muted-foreground, 215 16% 47%));
  display: inline-flex; align-items: center; gap: 0.3rem;
}

/* AiFeedback — rate an AI output (presentation-layer trust loop). */
.sage-ai-feedback { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: auto; }
.sage-ai-feedback__btn {
  background: none; cursor: pointer;
  border: 1px solid hsl(var(--border, 214 32% 91%));
  border-radius: 999px; padding: 0.15rem 0.6rem;
  font-size: 0.74rem; color: hsl(var(--muted-foreground, 215 16% 47%));
}
.sage-ai-feedback__btn:disabled { cursor: default; opacity: 0.7; }
.sage-ai-feedback__btn.is-chosen { border-color: hsl(var(--ai, 262 83% 58%)); color: hsl(var(--ai, 262 83% 58%)); }
.sage-ai-feedback__ack { font-size: 0.74rem; color: hsl(var(--ai, 262 83% 58%)); }