/* console-input — sole owner of .cx-*: the shared composer (prompt glyph +
   field + Run) and its autocomplete dropdown, used by datacore and agent-ops.
   Tokens only; loaded by the root page and both standalone app pages. */

.cx-zone { position: relative; }

/* ── the dropdown (opens upward, scrolls inside, invisible scrollbar) ────── */
.cx-ac { display: none; position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); max-height: 15rem; overflow-y: auto; overflow-x: hidden; z-index: 60; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: var(--space-1); box-shadow: var(--shadow-popover); scrollbar-width: none; }
.cx-ac::-webkit-scrollbar { display: none; }
.cx-ac.is-open { display: block; }
.cx-ac-item { display: flex; align-items: center; gap: var(--space-2); padding: 0.3rem 0.45rem; border-radius: var(--radius-xs); cursor: pointer; width: 100%; min-width: 0; overflow: hidden; }
.cx-ac-item.is-active { background: var(--accent-tint); }
.cx-ac-kind { font-family: var(--font-mono); font-size: var(--text-2xs); border-radius: var(--radius-xs); padding: 0 0.25rem; flex: none; min-width: 2.4rem; text-align: center; border: 1px solid; color: var(--text-muted); border-color: color-mix(in srgb, var(--text-muted) 35%, transparent); }
.cx-ac-kind[data-kind="command"], .cx-ac-kind[data-kind="source"], .cx-ac-kind[data-kind="table"] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.cx-ac-kind[data-kind="field"], .cx-ac-kind[data-kind="agg"] { color: var(--chart-3); border-color: color-mix(in srgb, var(--chart-3) 35%, transparent); }
.cx-ac-kind[data-kind="op"] { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 35%, transparent); }
.cx-ac-kind[data-kind="value"] { color: var(--chart-4); border-color: color-mix(in srgb, var(--chart-4) 35%, transparent); }
.cx-ac-label { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text); font-weight: 600; flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
.cx-ac-hint { font-size: var(--text-2xs); color: var(--text-muted); flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.cx-ac-trunc { font-size: var(--text-2xs); color: var(--text-subtle); padding: 0.2rem 0.5rem; border-top: 1px solid var(--border); }
.cx-ac-keys { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-subtle); padding: 0.2rem 0.5rem; border-top: 1px solid var(--border); }

/* ── the input row ───────────────────────────────────────────────────────── */
.cx-wrap { display: flex; align-items: flex-start; gap: var(--space-2); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 0.45rem 0.45rem 0.45rem 0.7rem; }
.cx-wrap:focus-within { border-color: var(--accent); }
.cx-wrap--single { align-items: center; padding: 0.35rem 0.35rem 0.35rem 0.7rem; }
.cx-prompt { color: var(--accent); font-family: var(--font-mono); padding-top: 0.15rem; }
.cx-wrap--single .cx-prompt { padding-top: 0; }
.cx-field { flex: 1; border: 0; outline: none; background: transparent; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text); min-width: 0; }
textarea.cx-field { resize: none; line-height: 1.6; min-height: 4.6rem; max-height: 11rem; overflow-y: auto; }
input.cx-field { height: 1.9rem; }
.cx-run { align-self: flex-end; border: 0; background: var(--accent); color: var(--text-on-accent); border-radius: var(--radius-sm); padding: 0.35rem 0.8rem; cursor: pointer; font-size: var(--text-sm); font-weight: 600; }
.cx-wrap--single .cx-run { align-self: center; }

/* touch — 44px floor for tap-accept + run; inputs ≥16px so iOS doesn't zoom */
@media (pointer: coarse) {
  .cx-ac-item { min-height: 2.75rem; }
  .cx-run { min-height: 2.75rem; padding: 0.5rem 1rem; }
  .cx-wrap { padding: 0.5rem 0.5rem 0.5rem 0.8rem; }
  input.cx-field { height: 2.25rem; }
  .cx-field { font-size: 1rem; }
}