/* admin/assets/components/ai/create-anything.css
   CA-1 · the ✦ create-anything surface. Mirrors the aiGenPanel grammar (violet --ai access → serif
   prompt → tone pills) but re-based onto the CANVAS-INSTRUMENT register: hairlines + mono labels +
   filled-active pills, and NO glow/bloom (the one departure from gen-panel.css's box-shadow). Violet
   --ai stays reserved for AI chrome; the surface never uses the chartreuse instrument accent. THEON
   tokens only. `aiDots` keyframes are canonical in base.css. */

.ca { display: flex; flex-direction: column; }

/* — the ✦ access button (collapsed hero CTA) — */
.ca-open {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px;
  background: transparent; border: 1px solid var(--ai); border-radius: 1px;
  color: var(--ai); font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  cursor: pointer; transition: background 120ms cubic-bezier(0.2,0.7,0.2,1);
}
.ca-open[hidden] { display: none; }
.ca-open:hover { background: var(--ai-soft); }
.ca-open:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ai-soft); }
.ca-spark { color: var(--ai); font-size: 12px; line-height: 1; }

/* — the form (expanded) — hairline frame, NO glow (register law) — */
.ca-form {
  display: flex; flex-direction: column; align-items: stretch; gap: 9px; padding: 10px 12px;
  background: var(--bg-deep); border: 1px solid var(--ai); border-radius: 1px;
}
.ca-form[hidden] { display: none; }

/* kind selector — segmented, filled-active (violet). The scale of the create. */
.ca-kinds { display: flex; flex-wrap: wrap; gap: 4px; }
.ca-kind {
  padding: 4px 9px; background: transparent; border: 1px solid var(--rule); border-radius: 1px;
  color: var(--ink-faint); font-family: var(--mono); font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer; transition: all 120ms cubic-bezier(0.2,0.7,0.2,1);
}
.ca-kind:hover { border-color: var(--ai); color: var(--ai); }
.ca-kind.is-on { background: var(--ai-soft); border-color: var(--ai); color: var(--ai); }
.ca-kind:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ai-soft); }

/* prompt line — serif, THEON's human voice. Override base.css's input[type=text] chrome (mono + --rule
   border + chartreuse focus border) with a higher-specificity reset: the AI prompt is borderless serif. */
.ca-row { display: flex; align-items: center; gap: 8px; }
.ca-form .ca-input {
  flex: 1 1 auto; min-width: 0; padding: 4px 0; border-radius: 0;
  background: transparent; border: none; outline: none; box-shadow: none;
  color: var(--ink); font-family: var(--serif); font-size: 15px;
}
.ca-form .ca-input:focus { border: none; outline: none; box-shadow: none; }
.ca-form .ca-input::placeholder { color: var(--ink-faint); font-style: italic; }
.ca-think { align-items: center; font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--ink-faint); }
.ca-think::after { content: '…'; display: inline-block; overflow: hidden; vertical-align: bottom; width: 1.1em; animation: aiDots 1.2s steps(4, end) infinite; }
.ca-go {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 1px; cursor: pointer;
  background: var(--ai-soft); border: 1px solid var(--ai); color: var(--ai); font-size: 15px; line-height: 1;
  transition: background 120ms cubic-bezier(0.2,0.7,0.2,1);
}
.ca-go:hover { background: var(--ai); color: var(--bg-deep); }
.ca-go:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ai-soft); }

/* refiner (tone) — the aiGenPanel refiner grammar, register-clean */
.ca-refiners { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--ai-soft); padding-top: 8px; }
.ca-refiners.is-off .ca-pills { opacity: 0.35; pointer-events: none; }
.ca-refine {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
  background: var(--ai-soft); border: 1px solid var(--ai); border-radius: 1px;
  color: var(--ai); font-family: var(--mono); font-size: 8px; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer;
}
.ca-refine[aria-pressed="false"] { background: transparent; opacity: 0.5; }
.ca-refine:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ai-soft); }
.ca-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ca-label { font-family: var(--mono); font-size: 7px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); margin-right: 2px; }
.ca-pill {
  padding: 3px 7px; background: transparent; border: 1px solid var(--ai-soft); border-radius: 1px;
  color: var(--ink-faint); font-family: var(--mono); font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer; transition: all 120ms cubic-bezier(0.2,0.7,0.2,1);
}
.ca-pill:hover { border-color: var(--ai); color: var(--ai); }
.ca-pill.is-on { background: var(--ai-soft); border-color: var(--ai); color: var(--ai); }
.ca-pill:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ai-soft); }

/* — placement 1: the empty-state hero (the parent .canvas-empty is pointer-events:none) — */
.ca-hero { pointer-events: auto; align-items: center; width: min(460px, 84%); }
.ca-hero .ca-form { width: 100%; }

/* — placement 2: the toolbar launcher + floating popover — */
.ca-launch.ca-launch { left: 176px; }               /* beside Shelf (12) + Tidy (106) */
.ca-launch .ca-spark { font-size: 11px; }
.ca-launch:hover, .ca-launch.is-active { border-color: var(--ai); }
.ca-launch.is-active .shelf-launch-label { color: var(--ai); }
.ca-pop {
  position: absolute; top: 44px; left: 12px; z-index: 46; width: 340px; max-width: 90%;
}
.ca-pop[hidden] { display: none; }
.ca-pop .ca-form { box-shadow: 0 8px 28px rgba(0,0,0,0.4); }   /* depth (a drop shadow), not a glow */