/* Advisory AI on the Markets pages (Phase 16, js/pm-ai-panels.js): the
   market summary and bot diagnostic panels, and "Describe a view". Colours
   come from the tokens, so both themes follow. */

.pmai { min-width: 0; }
.pmai-summary {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--font-size-base, 1rem);
  list-style-position: inside;
  padding: 2px 0;
}
.pmai-summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm, 4px); }
.pmai-body { margin-top: var(--space-2, 8px); display: flex; flex-direction: column; gap: var(--space-2, 8px); }
.pmai-intro, .pmai-hint, .pmai-note { font-size: var(--font-size-xs, 0.75rem); margin: 0; }
.pmai-actions { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); }
.pmai-out:empty { display: none; }

.pmai-answer, .pmai-built {
  padding: var(--space-3, 12px);
  border: 1px dashed var(--color-accent);
  border-radius: var(--radius-md, 6px);
  background: var(--color-bg-secondary, var(--color-surface));
  min-width: 0;
}
.pmai-label {
  margin: 0 0 var(--space-2, 8px);
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-accent);
}
.pmai-model { font-family: var(--font-mono, monospace); font-weight: 600; overflow-wrap: anywhere; }
.pmai-text { font-size: var(--font-size-sm, 0.875rem); color: var(--color-text); overflow-wrap: anywhere; }
.pmai-text p:first-child { margin-top: 0; }
.pmai-caveats {
  margin: var(--space-2, 8px) 0 0;
  padding-left: 1.1rem;
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-secondary, var(--color-text-muted));
}
.pmai-meta { margin: var(--space-2, 8px) 0 0; font-size: var(--font-size-xs, 0.75rem); }
.pmai-inputs { margin-top: var(--space-2, 8px); font-size: var(--font-size-xs, 0.75rem); }
.pmai-inputs > summary { cursor: pointer; color: var(--color-text-secondary, var(--color-text-muted)); }
.pmai-json {
  margin: var(--space-1, 4px) 0 0;
  max-height: 260px;
  overflow: auto;
  padding: var(--space-2, 8px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 4px);
  background: var(--color-bg, var(--color-surface));
  color: var(--color-text);
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.pmai-error { margin: 0; }
.pmai-footer a { color: var(--color-accent); font-weight: 600; }

/* Describe a view */
.pmai-describe { display: flex; flex-direction: column; gap: var(--space-1, 4px); min-width: 0; }
.pmai-describe-label { font-weight: 600; font-size: var(--font-size-sm, 0.875rem); }
.pmai-describe-row { display: flex; gap: var(--space-2, 8px); min-width: 0; }
.pmai-describe-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 4px);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
}
.pmai-describe-input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.pmai-result:empty { display: none; }
.pmai-result { margin-top: var(--space-1, 4px); }
.pmai-built { border-style: solid; border-color: var(--color-warning, var(--color-accent)); background: var(--color-warning-bg, var(--color-bg-secondary)); }
.pmai-built-flag {
  margin: 0 0 var(--space-2, 8px);
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 700;
  color: var(--color-text);
}
.pmai-filter { font-size: var(--font-size-sm, 0.875rem); color: var(--color-text); }
.pmai-group { min-width: 0; }
.pmai-join { font-size: var(--font-size-xs, 0.75rem); font-weight: 600; color: var(--color-text-secondary, var(--color-text-muted)); }
.pmai-conds { margin: 2px 0 0; padding-left: 1.1rem; }
.pmai-conds > li { margin: 2px 0; overflow-wrap: anywhere; }
.pmai-val { font-family: var(--font-mono, monospace); }
.pmai-expl { margin: var(--space-2, 8px) 0; font-size: var(--font-size-sm, 0.875rem); color: var(--color-text); overflow-wrap: anywhere; }
.pmai-built-actions { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); margin-top: var(--space-2, 8px); }

@media (max-width: 599px) {
  .pmai-describe-row { flex-wrap: wrap; }
  .pmai-describe-row .btn { flex: 1 1 auto; }
}