/* Bill Q&A ("Ask This Bill") — Services/BedrockNemotronGeneration.cs's AnswerQuestionAsync
   feature, styled with the same be-* tokens/components as redesign.css (BillDetail page).
   Kept in its own file rather than appended to redesign.css so this feature's styles stay
   independently committable from the rest of the (separately in-progress) redesign work. */

.be-bill-qa { margin-top: 40px; }
.be-bill-qa__intro { font-size: 15.5px; line-height: 1.75; color: var(--be-text-body); margin: 0 0 16px; }

.be-bill-qa__label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--be-text-label); margin-bottom: 8px; }
.be-bill-qa__form-row { display: flex; gap: 10px; }
.be-bill-qa__input {
  flex: 1; font-family: var(--be-font-sans); font-size: 14px; padding: 12px 14px;
  border: 1px solid var(--be-card-border); border-radius: 10px; color: var(--be-text-primary);
  background: var(--be-card);
}
.be-bill-qa__input::placeholder { color: var(--be-text-muted-2); }
.be-bill-qa__input:disabled { opacity: 0.6; cursor: not-allowed; }
.be-bill-qa__input:focus-visible { outline: 2px solid var(--be-red); outline-offset: 1px; }
.be-bill-qa__submit {
  font-family: var(--be-font-sans); font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
  padding: 0 20px; min-height: 44px; border-radius: 10px; border: none; background: var(--be-navy-900);
  color: var(--be-text-ondark-strong); cursor: pointer;
}
.be-bill-qa__submit:hover:not(:disabled) { background: var(--be-navy-800); }
.be-bill-qa__submit:disabled { opacity: 0.6; cursor: not-allowed; }
.be-bill-qa__submit:focus-visible { outline: 2px solid var(--be-gold); outline-offset: 2px; }

.be-bill-qa__examples { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.be-bill-qa__example {
  font-family: var(--be-font-sans); font-size: 12px; color: var(--be-text-label); background: var(--be-chip-bg);
  border: 1px solid var(--be-card-border); border-radius: 999px; padding: 0 14px; min-height: 44px;
  cursor: pointer; display: inline-flex; align-items: center;
}
.be-bill-qa__example:hover { background: var(--be-card-border); }
.be-bill-qa__example:focus-visible { outline: 2px solid var(--be-red); outline-offset: 2px; }
.be-bill-qa__examples[hidden] { display: none; }

.be-bill-qa__status:empty { display: none; }

.be-bill-qa__loading { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 13.5px; color: var(--be-text-muted-2); }
.be-bill-qa__loading .be-spinner { flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) {
  .be-bill-qa__loading .be-spinner { animation: none; border-top-color: var(--be-text-muted-2); }
}

.be-bill-qa__result { border: 1px solid var(--be-card-border); border-radius: 12px; padding: 20px; margin-top: 16px; background: var(--be-card); }
.be-bill-qa__result:focus { outline: none; }
.be-bill-qa__question-echo { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--be-text-label); margin-bottom: 10px; }
.be-bill-qa__answer-body { font-size: 16px; line-height: 1.75; color: var(--be-text-body); margin: 0; }

.be-bill-qa__citation {
  display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600;
  color: var(--be-gold-text-muted); background: var(--be-gold-bg-soft); border-radius: 999px;
  padding: 2px 9px; margin: 0 2px; text-decoration: none; white-space: nowrap;
}
.be-bill-qa__citation:hover { background: oklch(72% 0.12 80 / 0.22); }
.be-bill-qa__citation:focus-visible { outline: 2px solid var(--be-gold); outline-offset: 2px; }

.be-bill-qa__result--refusal { border-color: oklch(72% 0.12 80 / 0.4); background: var(--be-gold-bg-soft); }
.be-bill-qa__result--refusal .be-bill-qa__answer-body { font-style: italic; color: var(--be-text-muted-2); }

.be-bill-qa__result--error { border-color: oklch(50% 0.19 25 / 0.3); background: var(--be-red-bg-soft); }
.be-bill-qa__result--error .be-bill-qa__answer-body { color: var(--be-red-text-soft); font-size: 14.5px; font-style: normal; }
.be-bill-qa__retry {
  margin-top: 12px; padding: 0 16px; min-height: 36px; border-radius: 8px; border: 1px solid oklch(50% 0.19 25 / 0.4);
  background: transparent; color: var(--be-red-text-soft); font-size: 13px; font-weight: 600; cursor: pointer;
}
.be-bill-qa__retry:hover { background: oklch(50% 0.19 25 / 0.08); }
.be-bill-qa__retry:focus-visible { outline: 2px solid var(--be-red); outline-offset: 2px; }

.be-bill-qa__rate-limited { font-size: 13.5px; color: var(--be-text-muted-2); }