/* Copilot "Options" workflow (goal #20 L3) - web/static/js/copilot-options.js.
   Builds on the .cp-clarification-* modal shell in copilot.css. */

.cp-clarification-modal.cp-op-modal { width: min(760px, 96vw); }

.cp-op-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.6rem 0.9rem;
  margin-top: 0.7rem;
}
.cp-op-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.7rem;
  color: var(--zinc-400, #a1a1aa);
}
.cp-op-field input,
.cp-op-field select {
  background: var(--zinc-900, #18181b);
  border: 1px solid var(--zinc-700, #3f3f46);
  color: var(--zinc-100, #f4f4f5);
  border-radius: 7px;
  padding: 0.4rem 0.55rem;
  font-size: 0.78rem;
  font-family: var(--font-mono, monospace);
}
.cp-op-field input { width: 7rem; text-transform: uppercase; }
.cp-op-field input:focus,
.cp-op-field select:focus {
  outline: none;
  border-color: rgba(139, 92, 246, 0.8);
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
}

.cp-op-pills { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; }
.cp-op-pill,
.cp-op-chip {
  border: 1px solid var(--zinc-700, #3f3f46);
  background: var(--zinc-900, #18181b);
  color: var(--zinc-300, #d4d4d8);
  border-radius: 999px;
  padding: 0.3rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  text-transform: capitalize;
}
.cp-op-pill:hover,
.cp-op-chip:hover { border-color: var(--zinc-500, #71717a); }
.cp-op-chip.is-on { background: rgba(139, 92, 246, 0.25); border-color: rgba(139, 92, 246, 0.7); color: #ede9fe; }
.cp-op-pill.is-bullish.is-on { background: rgba(34, 197, 94, 0.18); border-color: rgba(34, 197, 94, 0.7); color: #bbf7d0; }
.cp-op-pill.is-bearish.is-on { background: rgba(239, 68, 68, 0.18); border-color: rgba(239, 68, 68, 0.7); color: #fecaca; }
.cp-op-pill.is-neutral.is-on { background: rgba(148, 163, 184, 0.2); border-color: rgba(148, 163, 184, 0.7); color: #e2e8f0; }
.cp-op-pill.is-volatile.is-on { background: rgba(250, 204, 21, 0.16); border-color: rgba(250, 204, 21, 0.7); color: #fef08a; }

.cp-op-results { margin-top: 0.8rem; }
.cp-op-strip {
  font-family: var(--font-mono, monospace);
  font-size: 0.68rem;
  color: var(--zinc-400, #a1a1aa);
  margin-bottom: 0.5rem;
  overflow-wrap: anywhere;
}
.cp-op-empty { font-size: 0.78rem; color: var(--zinc-400, #a1a1aa); padding: 0.6rem 0; }

.cp-op-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.55rem;
}
.cp-op-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  border: 1px solid var(--zinc-800, #27272a);
  background: rgba(24, 24, 27, 0.75);
  border-radius: 10px;
  padding: 0.6rem;
}
.cp-op-card-head { display: flex; align-items: baseline; gap: 0.4rem; }
.cp-op-rank { font-family: var(--font-mono, monospace); font-size: 0.7rem; color: #c4b5fd; }
.cp-op-label { flex: 1; font-size: 0.8rem; font-weight: 700; color: var(--zinc-100, #f4f4f5); }
.cp-op-score {
  font-family: var(--font-mono, monospace);
  font-size: 0.7rem;
  color: #ede9fe;
  background: rgba(139, 92, 246, 0.25);
  border-radius: 6px;
  padding: 0.1rem 0.35rem;
}

.cp-op-payoff { display: block; width: 100%; height: 64px; background: #111318; border-radius: 6px; }
.cp-op-payoff.is-empty { font-size: 0.7rem; color: var(--zinc-500, #71717a); display: flex; align-items: center; justify-content: center; }
.cp-op-gain { fill: rgba(34, 197, 94, 0.28); }
.cp-op-loss { fill: rgba(239, 68, 68, 0.28); }
.cp-op-curve { fill: none; stroke: #eceef2; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.cp-op-zero { stroke: #5a606c; stroke-width: 1; vector-effect: non-scaling-stroke; }
.cp-op-spot { stroke: #60a5fa; stroke-width: 1; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; }
.cp-op-be { fill: none; stroke: #facc15; stroke-width: 1.5; vector-effect: non-scaling-stroke; }

.cp-op-nums {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem 0.5rem;
  margin: 0;
}
.cp-op-nums div { min-width: 0; }
.cp-op-nums dt { font-size: 0.62rem; color: var(--zinc-500, #71717a); text-transform: uppercase; letter-spacing: 0.03em; }
.cp-op-nums dd { margin: 0; font-family: var(--font-mono, monospace); font-size: 0.74rem; color: var(--zinc-200, #e4e4e7); overflow-wrap: anywhere; }

.cp-op-flags { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.cp-op-flags span { font-size: 0.62rem; color: #fde68a; border: 1px solid rgba(250, 204, 21, 0.4); border-radius: 5px; padding: 0.05rem 0.3rem; }
.cp-op-post { align-self: stretch; margin-top: auto; }
.cp-op-post:disabled { opacity: 0.6; cursor: default; }

.cp-op-errors,
.cp-op-warnings { margin: 0.6rem 0 0; padding-left: 1.1rem; font-size: 0.72rem; }
.cp-op-errors { color: #fca5a5; }
.cp-op-warnings { color: #fde68a; }
.cp-op-disclaimer { margin: 0.7rem 0 0; font-size: 0.68rem; line-height: 1.45; color: var(--zinc-400, #a1a1aa); }

/* chat card (renderResult) */
.cp-op-result { display: flex; flex-direction: column; gap: 0.5rem; max-width: 560px; }
.cp-op-result-head { font-weight: 700; font-size: 0.85rem; color: var(--zinc-100, #f4f4f5); display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; }
.cp-op-result-rank { font-family: var(--font-mono, monospace); font-size: 0.68rem; font-weight: 500; color: var(--zinc-400, #a1a1aa); }
.cp-op-result-img { width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--zinc-800, #27272a); }
.cp-op-result-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.35rem 0.8rem; margin: 0; }
.cp-op-row dt { font-size: 0.62rem; color: var(--zinc-500, #71717a); text-transform: uppercase; letter-spacing: 0.03em; }
.cp-op-row dd { margin: 0; font-family: var(--font-mono, monospace); font-size: 0.74rem; color: var(--zinc-200, #e4e4e7); overflow-wrap: anywhere; }
.cp-op-row:last-child { grid-column: 1 / -1; }
.cp-op-result-footer { font-size: 0.66rem; line-height: 1.45; color: var(--zinc-400, #a1a1aa); }

/* Manual strike mode */
.cp-op-field input[type="date"] { width: auto; min-width: 150px; text-transform: none; }
.cp-op-hint { margin: 2px 0 0; font-size: 11px; opacity: .7; flex-basis: 100%; }