/* Itinerary Agent — feature-flagged UI (see js/features/itinerary-agent/) */

/* Hidden by default; itinerary-agent.js only reveals these once it confirms
   the backend has FEATURE_ITINERARY_AGENT=true. Safe to leave this markup in
   index.html indefinitely even while the feature is off. */
.feature-itinerary-agent {
  display: none;
}

.agent-diff-row {
  padding: var(--space-sm) 0;
  border-bottom: 2px solid var(--df-hair);
  font-size: var(--fs-base);
  border-radius: var(--radius-xs);
}

.agent-diff-added {
  background: var(--vn-green-light);
  padding-left: var(--space-sm);
}

.agent-diff-changed {
  background: var(--vn-amber-light);
  padding-left: var(--space-sm);
}

.agent-diff-removed {
  background: var(--vn-coral-light);
  padding-left: var(--space-sm);
  text-decoration: line-through;
  opacity: 0.75;
}

/* ── Issue #135 Phase 1.5: sticky action bar ──
   The Generate/History/Saved tab bar itself (.agent-tabs/.agent-tab) is
   owned entirely by css/style.css's segmented-pill rules — this file used
   to carry its own earlier underline-tab version too. Loading after
   style.css, its `color: var(--vn-teal)` on `.agent-tab.active` won the
   cascade over style.css's `color: var(--surface-2)` while style.css's own
   `background: var(--vn-teal)` still painted, so the active label was
   teal-on-teal and unreadable (issue #560). Don't re-add a second
   .agent-tabs/.agent-tab definition here. */

/* The actual fix for the unreachable confirm button: pin the actions to the
   bottom of the modal's own scroll container. Mirrors the negative-margin
   sticky pattern #addExpenseModal's header already uses — bleed out to the
   modal's padded edge, then re-add the padding, so it reads as a real footer
   bar rather than a floating button. bottom:-2rem cancels .modal-content's
   2rem bottom padding, which would otherwise leave a gap the content scrolls
   through underneath. */
.agent-modal-actions {
  position: sticky;
  bottom: -2rem;
  z-index: 5;
  display: flex;
  gap: var(--space-md);
  margin: 1rem -2rem -2rem;
  padding: var(--space-xl) 2rem 2rem;
  background: var(--df-panel);
  border-top: 2px solid var(--df-hair);
}

.agent-modal-actions button { flex: 1; }

/* A disabled Regenerate (daily cap reached) must still read as deliberate,
   not broken — the title attribute carries the explanation. */
.agent-modal-actions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.agent-history-entry {
  border: 2px solid var(--df-ink);
  border-radius: var(--df-radius-card);
  background: var(--df-panel);
  padding: var(--space-lg) var(--space-xl);
  margin-bottom: var(--space-md);
}

.agent-history-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--fs-sm);
  color: var(--df-ink-soft);
  margin-bottom: var(--space-sm);
  flex-wrap: wrap;
}

.agent-history-kind {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-pill);
  background: var(--vn-teal-light);
  color: var(--vn-teal);
}

.agent-history-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

/* The label buttons (Preview/Use this/Propose/Save) size to their text, but
   the icon-only delete button was shrinking to a bare tap-min sliver next to
   them, reading as a size mismatch in what's otherwise a row of pills.
   "Use this" also carries .btn-primary for its color — that app-wide rule
   is width:100%/margin-top:1rem (meant for a full-width standalone button),
   which forced it onto its own full-width line here. Reset both so every
   button in the row sizes the same way, to its own content. */
.agent-history-actions .btn-small {
  justify-content: center;
  min-width: var(--tap-min);
  width: auto;
  margin-top: 0;
}

.agent-history-empty {
  font-size: var(--fs-base);
  color: var(--df-ink-soft);
  text-align: center;
  padding: 24px var(--space-md);
}

/* Read-only full-itinerary preview popup (agent-history-preview-modal) */
.agent-history-preview-day {
  margin-bottom: var(--space-xl);
}

.agent-history-preview-day-label {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--vn-teal);
  margin-bottom: var(--space-xs);
}