/* BMOS states — loading, empty, error and snapshot states for dynamic panels.
   Wiring: add data-panel="<name>" to a panel and include states.css + states.js (see STATES.md).
   Uses only the base tokens from app.css :root. No hex, no fixed font sizes. */

/* ---------- panel host ---------- */
:where([data-panel]) { position: relative; }   /* zero specificity: a panel's own position (e.g. sticky .dp-chat) wins */
[data-panel]:not([data-state="ready"]) { min-height: var(--st-min, 0); }
/* One state at a time: while the layer is up, the panel's own content is out of sight and out of the tab order. */
[data-panel][data-state="loading"] > :not(.st-layer):not([data-st-keep]),
[data-panel][data-state="empty"] > :not(.st-layer):not([data-st-keep]),
[data-panel][data-state="error"] > :not(.st-layer):not([data-st-keep]) { visibility: hidden; }

/* Room each panel's placeholder needs before content arrives (matches the filled panel at 1440px). */
[data-panel="dash"]      { --st-min: 360px; }
[data-panel="resolver"]  { --st-min: 420px; }
[data-panel="devterm"]   { --st-min: 470px; }
[data-panel="apiterm"]   { --st-min: 380px; }
[data-panel="chat"]      { --st-min: 520px; }
[data-panel="prompts"]   { --st-min: 420px; }
[data-panel="merchants"] { --st-min: 120px; }

/* ---------- the state layer ---------- */
.st-layer {
  position: absolute; left: 0; right: 0; bottom: 0; top: var(--st-top, 0); z-index: 3;
  display: flex; flex-direction: column; gap: 12px; padding: 20px;
  background: var(--card); color: var(--ink);
  border-radius: inherit; overflow: hidden;
  opacity: 1; visibility: visible;
  transition: opacity .2s ease, visibility 0s linear 0s;
}
.st-layer.st-top0 { border-top-left-radius: 0; border-top-right-radius: 0; }
[data-panel][data-state="ready"] > .st-layer {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, visibility 0s linear .2s;
}
.st-layer.st-dark { background: var(--ink); color: var(--paper); font-family: var(--mono); }
.st-layer.st-bare { padding: 0; background: transparent; }  /* grids: skeleton cards sit on the page */
.st-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- skeleton blocks ---------- */
.sk {
  display: block; border-radius: var(--r-sm);
  background: var(--soft);
  background-image: linear-gradient(90deg, transparent 0, color-mix(in srgb, var(--card) 75%, transparent) 50%, transparent 100%);
  background-size: 220% 100%; background-repeat: no-repeat; background-position: 160% 0;
  animation: st-shimmer 1.6s ease-in-out infinite;
}
.sk-line  { height: .75em; width: 100%; }
.sk-title { height: 1.1em; width: 42%; border-radius: var(--r-sm); }
.sk-pill  { height: 1.6em; width: 16em; max-width: 70%; border-radius: var(--r-pill); }
.sk-avatar{ width: 2.25em; height: 2.25em; border-radius: var(--r-pill); flex-shrink: 0; }
.sk-thumb { width: 72px; height: 72px; border-radius: var(--r-sm); flex-shrink: 0; }
.sk-card  { height: 76px; border-radius: var(--r-md); }
.sk-row   { height: 2.6em; border-radius: var(--r-sm); }
.sk-w90 { width: 90%; } .sk-w75 { width: 75%; } .sk-w60 { width: 60%; } .sk-w40 { width: 40%; } .sk-w25 { width: 25%; }
.st-dark .sk {
  background-color: color-mix(in srgb, var(--paper) 9%, var(--ink));
  background-image: linear-gradient(90deg, transparent 0, color-mix(in srgb, var(--paper) 9%, transparent) 50%, transparent 100%);
}
@keyframes st-shimmer { from { background-position: 160% 0; } to { background-position: -60% 0; } }

/* skeleton layouts */
.sk-kpis  { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.sk-cols  { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 24px; }
.sk-col   { display: flex; flex-direction: column; gap: 10px; }
.sk-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.sk-mc    { display: flex; gap: 14px; padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); }
.sk-mc > div { flex: 1; display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.sk-msg   { display: flex; gap: 10px; align-items: flex-start; max-width: 78%; }
.sk-msg > div { flex: 1; display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.sk-msg.sk-me { align-self: flex-end; max-width: 46%; width: 46%; }
.sk-bubble { height: 2.4em; border-radius: var(--r-sm); width: 100%; }
.st-lines { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
@media (max-width: 860px) {
  .sk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sk-cols { grid-template-columns: 1fr; }
  .sk-msg { max-width: 92%; } .sk-msg.sk-me { max-width: 60%; width: 60%; }
}

/* ---------- empty and error ---------- */
.state-empty, .state-error {
  margin: auto; max-width: 34em; padding: 24px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  color: var(--sub); font-size: inherit; line-height: 1.5;
}
.state-empty p, .state-error p { margin: 0; }
.state-empty .st-msg, .state-error .st-msg { color: var(--ink); font-weight: 600; }
.state-empty .st-sub, .state-error .st-sub { font-size: var(--t-14); color: var(--faint); }
.state-error .btn { margin-top: 10px; }
.st-dark .state-empty .st-msg, .st-dark .state-error .st-msg { color: var(--paper); }
.st-dark .state-empty .st-sub, .st-dark .state-error .st-sub { color: var(--n4); }

/* ---------- terminal idle ---------- */
.st-term { display: flex; flex-direction: column; gap: 8px; font-family: var(--mono); font-size: var(--t-14); line-height: 1.6; }
.st-prompt { margin: 0; color: var(--paper); white-space: pre-wrap; word-break: break-all; }
.st-ps { color: var(--orchid); font-weight: 700; margin-right: .6em; }
.st-cursor {
  display: inline-block; width: .6em; height: 1.15em; margin-left: .15em; vertical-align: text-bottom;
  background: var(--lilac); animation: st-blink 1.06s steps(1) infinite;
}
.st-note { margin: 0; color: var(--n4); }   /* n5 on n9 is 3.3:1; n4 is AA */
.st-note.st-bad { color: var(--paper); }
.st-note.st-bad::before { content: ""; display: inline-block; width: .5em; height: .5em; border-radius: var(--r-pill); background: var(--bad); margin-right: .6em; vertical-align: middle; }
.st-term .btn { align-self: flex-start; margin-top: 6px; }
@keyframes st-blink { 50% { opacity: 0; } }

/* ---------- snapshot label ---------- */
.st-snap {
  position: absolute; top: 12px; right: 12px; z-index: 4;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-12); font-weight: 700; line-height: 1.4;
  color: var(--n6); background: var(--n1); border: 1px solid var(--n2);
  border-radius: var(--r-pill); padding: 2px 10px; pointer-events: auto;
}
.st-snap::before { content: ""; width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--n4); }
[data-panel][data-snapshot="grid"] > .st-snap { position: static; grid-column: 1 / -1; justify-self: start; order: 99; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .sk { animation: none; background-image: none; }
  .st-cursor { animation: none; }
  .st-layer, [data-panel][data-state="ready"] > .st-layer { transition: none; }
}
.st-sk { display: contents; }
.st-snap.st-inline { position: static; margin-left: 10px; vertical-align: middle; font-family: inherit; }
[data-panel]:not([data-snapshot]) .st-snap { display: none; }
img.st-imgfail { background: var(--soft); }