/* Generate Ideas — feature-flagged UI (see js/features/idea-pool/, issue #174) */

/* Unlike css/features/itinerary-agent.css's `.feature-itinerary-agent`
   convention, there's no single hidden-by-default class here: every element
   this feature touches is rebuilt fresh on each renderIdeasSidebar() call
   (js/itinerary.js), so a class-based reveal wouldn't survive the next
   render — the JS itself gates on window.__FEATURES__?.ideaPool before ever
   emitting this markup. This file is purely the strip's visual styling. */

/* The Ideas header's one accent, and the panel's only AI action. It carried
   `background: rgba(255,255,255,0.22); color: #fff` from the era when this
   header was a solid amber bar — after #447 turned the header neutral that
   is a white pill with a white glyph on a near-white surface, i.e. no
   affordance at all. A Trail Green Mist fill with a Trail Green glyph reads
   as a button on the neutral header and inverts to solid on hover. */
.ideas-sidebar-generate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--vn-teal-light);
  color: var(--vn-teal);
  font-size: var(--fs-md);
  line-height: 1;
  cursor: pointer;
  position: relative;
  transition: background var(--dur-feedback) var(--ease-out),
              color var(--dur-feedback) var(--ease-out);
}
.ideas-sidebar-generate-btn:hover {
  background: var(--vn-teal);
  color: var(--surface-2);
}
/* Reaches --tap-min without growing the visible chip past the header's own
   height — same convention as .stop-menu-btn (css/style.css). */
.ideas-sidebar-generate-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(var(--tap-min), 100%);
  height: max(var(--tap-min), 100%);
  transform: translate(-50%, -50%);
}

#idea-suggestions-strip:empty { display: none; }

/* "Suggested for you" and "Your saved ideas" are the panel's two section
   headings and now share one treatment (see .ideas-saved-label) — they were
   a 12px bold sentence-case row and an 11px uppercase muted row sitting six
   pixels apart, which read as two unrelated kinds of thing rather than two
   sections of one list. */
.idea-suggestions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-lg) var(--space-2xs);
  font-family: var(--df-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--df-ink-soft);
}

.idea-suggestions-shuffle-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
  border: 2px solid var(--df-ink);
  background: var(--df-panel);
  color: var(--vn-teal);
  border-radius: var(--radius-pill);
  padding: var(--space-xs) var(--space-lg);
  font-size: var(--fs-xs);
  font-family: inherit;
  cursor: pointer;
  position: relative;
  transition: background var(--dur-feedback) var(--ease-out);
}
.idea-suggestions-shuffle-btn:hover { background: var(--vn-teal-light); }
/* 22px tall by design — it must not out-weigh the section label it sits on —
   so the hit area is expanded rather than the chip. */
.idea-suggestions-shuffle-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(var(--tap-min), 100%);
  height: max(var(--tap-min), 100%);
  transform: translate(-50%, -50%);
}

.idea-suggestions-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
}

.idea-suggestion-card {
  display: flex;
  gap: var(--space-md);
  border: 2px solid var(--df-ink);
  border-radius: var(--df-radius-card);
  background: var(--df-panel);
  box-shadow: var(--df-press);
  overflow: hidden;
}

/* A real <img>, not a background-image div: it gets lazy loading, and
   `onerror="this.remove()"` (the convention renderStopCard()'s thumbnails
   already use) so a dead photo URL collapses the column instead of leaving a
   permanent 56px grey bar. The old inline `url('...')` also interpolated a
   URL that escHtml() does not escape apostrophes in. */
.idea-suggestion-photo {
  flex-shrink: 0;
  width: 56px;
  align-self: stretch;
  object-fit: cover;
  background: var(--df-panel);
}

.idea-suggestion-body {
  flex: 1;
  min-width: 0;
  padding: var(--space-md) var(--space-lg) var(--space-md) 0;
}
.idea-suggestion-photo + .idea-suggestion-body { padding-left: 0; }
.idea-suggestion-card:not(:has(.idea-suggestion-photo)) .idea-suggestion-body { padding-left: var(--space-lg); }

/* Badge + text column, the same shape a saved idea card uses one row below
   (.itin-stop-card.idea-card .stop-summary-row) — so the name and its city
   line share a left edge instead of the city starting back under the icon. */
.idea-suggestion-head {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

/* Matches the 30px circular category badge every saved idea card in this same
   panel already uses (.itin-stop-card.idea-card .cat-pill, css/style.css) —
   the suggestion card used to show a bare monochrome ti-* glyph instead, so
   the Category Compass hue was missing on exactly the card that introduces a
   place, then appeared on the card it turned into once kept. */
.idea-suggestion-head .cat-pill {
  width: 30px;
  height: 30px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
  font-size: 15px;
  flex-shrink: 0;
}

.idea-suggestion-headtext {
  min-width: 0;
}

.idea-suggestion-name {
  display: block;
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.3;
}

.idea-suggestion-city {
  display: block;
  font-size: var(--fs-xs);
  color: var(--df-ink-soft);
  margin-top: 1px;
}

.idea-suggestion-blurb {
  font-size: var(--fs-sm);
  color: var(--df-ink-soft);
  margin-top: var(--space-xs);
  line-height: 1.35;
}

.idea-suggestion-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--fs-xs);
  color: var(--vn-teal);
  margin-top: var(--space-xs);
}

.idea-suggestion-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

/* Keep is the one action this whole feature exists to produce, so it says so
   and carries the solid fill; Dismiss is a quiet neutral icon beside it.
   They used to be two equally-heavy 28px squares — a green tick and a
   terracotta cross — which read as a symmetric accept/reject pair, and which
   also spent the *shopping* category hue (--vn-coral) on a piece of chrome,
   the same Category Compass leak #447 fixed on the header above. */
.idea-suggestion-keep {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
  min-height: 32px;
  padding: 0 var(--space-xl);
  border: none;
  border-radius: var(--radius-pill);
  background: var(--vn-teal);
  color: var(--surface-2);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  position: relative;
  transition: background var(--dur-feedback) var(--ease-out);
}
.idea-suggestion-keep:hover { background: var(--vn-teal-mid); }

.idea-suggestion-dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 2px solid var(--df-ink);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--df-ink-soft);
  font-size: var(--fs-md);
  line-height: 1;
  cursor: pointer;
  position: relative;
  transition: background var(--dur-feedback) var(--ease-out),
              color var(--dur-feedback) var(--ease-out);
}
.idea-suggestion-dismiss:hover {
  background: var(--df-hair);
  color: var(--df-ink);
}

/* Expand the tappable area to --tap-min without growing the visible chip —
   same convention as .stop-menu-btn (css/style.css). */
.idea-suggestion-keep::before,
.idea-suggestion-dismiss::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(var(--tap-min), 100%);
  height: max(var(--tap-min), 100%);
  transform: translate(-50%, -50%);
}

/* Built from js/skeleton.js's shared shapes now (skeletonSuggestionCard())
   rather than a hand-rolled background-position shimmer that
   painted a flat 64px bar, animated a paint property instead of a transform,
   and — being its own @keyframes — was never answered in style.css's
   prefers-reduced-motion block. css/skeleton.css already covers all three. */
.idea-suggestion-skeleton {
  display: block;
  padding: var(--space-md) var(--space-lg);
}
.idea-suggestion-skeleton .skeleton-row { align-items: flex-start; }

.idea-suggestions-empty {
  padding: var(--space-xl) var(--space-2xl);
  font-size: var(--fs-sm);
  color: var(--df-ink-soft);
  text-align: center;
}
/* The recovery action inside an empty/error state sits on its own line — it
   was inline after the sentence, where it read as part of the prose. */
.idea-suggestions-empty .btn-small {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-lg);
}

/* The reference treatment for both of the panel's section headings — see
   .idea-suggestions-header, which now matches it. The hairline is what
   separates the served suggestion from the list it will join once kept;
   without it the two sections ran together as one stack of cards. */
.ideas-saved-label {
  padding: var(--space-lg) var(--space-lg) var(--space-2xs);
  border-top: 2px solid var(--df-hair);
  font-family: var(--df-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--df-ink-soft);
  text-transform: uppercase;
}