/* ==========================================================
   COMMAND BAR — CAD-style command line (bottom-docked)
   Self-contained styles. Honors design tokens from styles.css.
   States are driven by [data-state] on .cmdbar:
     idle | typing | args | answer | loading | empty | error
   The same markup is reused by command-bar-states.html (review)
   via the .cmdbar--static modifier (relative instead of fixed).
   ========================================================== */

.cmdbar {
  position: fixed;
  left: var(--sidebar-w);
  right: 0;
  bottom: 0;
  z-index: 40;
  font-family: var(--sans);
  /* nudge clear of the feedback FAB on the right */
  padding: 0 0 0 0;
}
/* follow the collapsible sidebar */
body:has(.app.collapsed) .cmdbar { left: var(--sidebar-collapsed-w); }

/* keep page content & the feedback FAB clear of the docked strip */
body:has(.cmdbar:not(.cmdbar--static)) .main { padding-bottom: 52px; }
body:has(.cmdbar:not(.cmdbar--static)) .fab-feedback { bottom: 46px; z-index: 41; }

/* a drawer/modal open over the app pushes the bar to the quiet "underneath" look */
.cmdbar.is-dimmed { filter: saturate(.6); opacity: .55; pointer-events: none; }

/* ---------- the docked strip ---------- */
.cmdbar-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 16px 0 14px;
  background: var(--surface-2);
  border-top: 1px solid var(--hair);
  transition: height .14s ease, background .14s ease, border-color .14s ease;
}
/* idle = thin, faint hint bar */
.cmdbar[data-state="idle"] .cmdbar-strip {
  background: color-mix(in oklab, var(--cream) 70%, var(--surface));
}
/* any active state = crisp, taller, accent-topped */
.cmdbar:not([data-state="idle"]) .cmdbar-strip {
  height: 46px;
  background: var(--surface);
  border-top-color: var(--accent);
  box-shadow: 0 -2px 0 var(--accent), 0 -18px 40px -30px rgba(20,20,20,.5);
}

/* prompt glyph */
.cmdbar-glyph {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 14px;
  color: var(--hair-strong);
  flex: 0 0 auto;
  transition: color .14s ease;
  user-select: none;
}
.cmdbar:not([data-state="idle"]) .cmdbar-glyph { color: var(--accent); }

/* the input */
.cmdbar-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--ink);
  padding: 0;
}
.cmdbar-input::placeholder { color: var(--hair-strong); }
.cmdbar[data-state="idle"] .cmdbar-input { font-family: var(--sans); }
.cmdbar[data-state="idle"] .cmdbar-input::placeholder { color: var(--muted); }

/* idle hint shortcut chip (right side) */
.cmdbar-kbd {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 5px;
  padding: 2px 6px;
}
.cmdbar:not([data-state="idle"]) .cmdbar-kbd { display: none; }

/* prompt label for argument mode ("Amount:") */
.cmdbar-prompt {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent-deep);
  white-space: nowrap;
}
.cmdbar:not([data-state="args"]) .cmdbar-prompt { display: none; }

/* collected-args chips row (sits just above the strip) */
.cmdbar-context {
  display: none;
  align-items: center;
  gap: 7px;
  padding: 8px 16px 8px 14px;
  background: var(--surface);
  border-top: 1px solid var(--hair);
  flex-wrap: wrap;
}
.cmdbar[data-state="args"] .cmdbar-context,
.cmdbar[data-state="error"].has-context .cmdbar-context { display: flex; }

.cmd-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--accent-deep);
  background: var(--accent-soft);
  border: 1px solid rgba(31,122,61,.28);
  border-radius: 999px;
  padding: 3px 9px;
  line-height: 1.3;
}
.cmd-chip .k {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: .8;
}
.cmd-chip.is-cmd { color: var(--ink); background: var(--cream); border-color: var(--hair); }

/* inline error text inside the arg strip */
.cmdbar-strip.has-error { border-top-color: var(--red); box-shadow: 0 -2px 0 var(--red); }
.cmdbar-strip.has-error .cmdbar-glyph,
.cmdbar-strip.has-error .cmdbar-prompt { color: var(--red); }
.cmdbar-argerr {
  flex: 0 0 auto;
  font-size: 11.5px;
  color: var(--red);
  font-weight: 600;
  white-space: nowrap;
}

/* keyboard hint line (right edge of active strip) */
.cmdbar-keys {
  display: none;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .03em;
  color: var(--muted);
  white-space: nowrap;
}
.cmdbar:not([data-state="idle"]) .cmdbar-keys { display: inline-flex; }
.cmdbar-keys b { color: var(--ink-soft); font-weight: 600; }
@media (max-width: 1080px) { .cmdbar-keys { display: none !important; } }

/* ---------- the panel (opens UPWARD) ---------- */
.cmdbar-panel {
  display: none;
  background: var(--surface);
  border-top: 1px solid var(--hair);
  box-shadow: 0 -22px 50px -34px rgba(20,20,20,.45);
}
.cmdbar[data-state="typing"] .cmdbar-panel,
.cmdbar[data-state="answer"] .cmdbar-panel,
.cmdbar[data-state="loading"] .cmdbar-panel,
.cmdbar[data-state="empty"] .cmdbar-panel,
.cmdbar[data-state="error"] .cmdbar-panel { display: block; }

/* scrollable, capped height (decision: cap + scroll) */
.cmdbar-list {
  max-height: 312px;
  overflow-y: auto;
  padding: 6px;
}
.cmdbar-list::-webkit-scrollbar { width: 10px; }
.cmdbar-list::-webkit-scrollbar-thumb { background: var(--hair); border: 3px solid var(--surface); border-radius: 99px; }

/* a faint section divider (used between commands and records is NOT needed —
   group tags ride on each row — but a hairline before "records" reads nicely) */
.cmd-divider {
  height: 1px; background: var(--hair); margin: 6px 10px;
}

/* ---------- a result row ---------- */
.cmdrow {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: 9px;
  cursor: pointer;
  scroll-margin: 8px;
}
.cmdrow:hover { background: var(--surface-2); }
.cmdrow.is-sel { background: var(--accent-soft); }
.cmdrow.is-sel .cmdrow-alias { color: var(--accent-deep); }

.cmdrow-ic {
  flex: 0 0 26px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 7px;
  background: var(--cream);
  border: 1px solid var(--hair);
  color: var(--muted);
}
.cmdrow.is-sel .cmdrow-ic { background: var(--surface); border-color: rgba(31,122,61,.3); color: var(--accent-deep); }
.cmdrow-ic svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.cmdrow-main { flex: 1 1 auto; min-width: 0; }
.cmdrow-label {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmdrow-label .match { color: var(--accent-deep); font-weight: 700; background: color-mix(in oklab, var(--accent-soft) 80%, transparent); border-radius: 2px; }
.cmdrow-sub {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmdrow-sub .dot { margin: 0 5px; opacity: .5; }

/* row tag (group or entity type) */
.cmdrow-tag {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--cream);
  border: 1px solid var(--hair);
  color: var(--muted);
}
/* group tints */
.cmdrow-tag[data-g="Go"]     { background: var(--blue-soft);   color: #1F4E9E; border-color: rgba(42,111,219,.28); }
.cmdrow-tag[data-g="Create"] { background: var(--accent-soft); color: var(--accent-deep); border-color: rgba(31,122,61,.28); }
.cmdrow-tag[data-g="Action"] { background: var(--amber-soft);  color: #6E5314; border-color: rgba(182,139,30,.3); }
.cmdrow-tag[data-g="Query"]  { background: var(--surface-2);   color: var(--ink-soft); border-color: var(--hair-strong); }
/* entity tags use the neutral look (default) */

.cmdrow-alias {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--hair-strong);
  letter-spacing: .02em;
}

/* ---------- inline answer card ---------- */
.cmd-answer { padding: 16px 18px 18px; }
.cmd-answer-title {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.cmd-answer-value {
  font-family: var(--mono);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
  margin-top: 4px;
  line-height: 1.05;
}
.cmd-answer-value .accent { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); }
.cmd-answer-rows {
  margin-top: 14px;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--hair);
}
.cmd-answer-rows .r {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 7px 0;
  border-bottom: 1px solid var(--hair);
  font-size: 13px;
}
.cmd-answer-rows .r:last-child { border-bottom: 0; }
.cmd-answer-rows .r .k { color: var(--muted); white-space: nowrap; }
.cmd-answer-rows .r .v { font-family: var(--mono); font-weight: 500; white-space: nowrap; margin-left: auto; }
.cmd-answer-open {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px;
  font-size: 12.5px; font-weight: 600;
  color: var(--accent-deep);
  white-space: nowrap;
}
.cmd-answer-open:hover { color: var(--accent); }
.cmd-answer-open svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- loading / empty / error inside the panel ---------- */
.cmd-state { padding: 14px 14px; }
.cmd-skel-row {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px;
}
.cmd-skel-ic { width: 26px; height: 26px; border-radius: 7px; flex: 0 0 26px; }
.cmd-skel-bar { height: 11px; border-radius: 4px; }
.cmd-skel-ic, .cmd-skel-bar {
  background: linear-gradient(90deg, var(--cream) 25%, var(--surface-2) 37%, var(--cream) 63%);
  background-size: 200% 100%;
  animation: cmdShimmer 1.25s ease infinite;
}
@keyframes cmdShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.cmd-empty {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 14px;
  color: var(--muted);
  font-size: 13px;
}
.cmd-empty svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; flex: 0 0 auto; }
.cmd-empty .accent-q { font-family: var(--mono); color: var(--ink-soft); }

.cmd-error { margin: 0; }

/* a tiny header line above results telling the user the result count / context */
.cmd-listhead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px 4px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--hair-strong);
}

/* ==========================================================
   STATIC review mode (command-bar-states.html)
   ========================================================== */
.cmdbar--static {
  position: static;
  left: auto; right: auto; bottom: auto;
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--surface);
}
.cmdbar--static .cmdbar-panel { box-shadow: none; border-top: 1px solid var(--hair); }
.cmdbar--static:not([data-state="idle"]) .cmdbar-strip { box-shadow: inset 0 2px 0 var(--accent); border-top-color: var(--accent); }
/* panel → context → strip already stacks panel-on-top in normal flow,
   which is exactly the "opens upward" reading we want in static review too. */

/* ---------- mobile: no docked bar (decision: no mobile use yet) ---------- */
@media (max-width: 720px) {
  .cmdbar:not(.cmdbar--static) { display: none; }
}