/* =============================================================================
   AI Wise empty state (ai-search-empty-state.html prototype)

   Kept in its own file so it can be removed without touching page.css. The
   state is a class on #ai-chat, so one toggle swaps the hero and the transcript
   in both directions and the composer stays put in both.
   ============================================================================= */

.ai-chat__empty {
  display: none;
}

/* Hero up: the column centres as a whole and the page's real composer sits
   between the two halves via order, so there is still only one input.
   .ai-chat is overflow:hidden, so a hero taller than the viewport would be
   clipped at BOTH ends by justify-content:center. Scroll instead, and use
   auto margins so centring survives overflow (justify-content does not). */
.ai-chat--empty {
  overflow-y: auto;
}

.ai-chat--empty .ai-chat__empty--head { margin-top: auto; }
.ai-chat--empty .ai-chat__empty--foot { margin-bottom: auto; }

.ai-chat--empty .ai-chat__empty {
  display: flex;
  justify-content: center;
  flex-shrink: 0;
  /* Equal side padding: the inner column is what centres, not the box */
  padding: 0 24px;
}

.ai-chat--empty .ai-chat__empty--head { order: 1; }
.ai-chat--empty .ai-chat__input-wrap  { order: 2; }
.ai-chat--empty .ai-chat__empty--foot { order: 3; }

/* Composer sits in the hero stack, matching the examples' column width.
   Column, not row: the wrap also holds the mobile actions bar (Recents / New
   chat), which a row laid out *beside* the input bar: half the width each, the
   prompt clipped mid-sentence. */
.ai-chat--empty .ai-chat__input-wrap {
  padding: 24px 24px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ai-chat--empty .ai-chat__input-bar,
.ai-chat--empty .ai-chat__actions {
  width: 100%;
  max-width: 720px;
  box-sizing: border-box;
}

/* The transcript scroller and the hero occupy the same slot — never both */
.ai-chat--empty .ai-chat__messages {
  display: none;
}

/* Leaving the hero: fade the two halves, then JS drops --empty and the
   composer returns to the bottom of the column. */
.ai-chat--leaving .ai-chat__empty {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .ai-chat--leaving .ai-chat__empty {
    transition: none;
  }
}

.ai-chat__empty-inner {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ai-chat__empty-title {
  margin: 0;
  max-width: 720px;
  font-family: 'Neue', sans-serif;
  /* Prototype was authored at ~800px wide, where 30px was right; it reads
     undersized at 1440, so scale with the viewport between those anchors. */
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.2px;
  text-align: center;
  color: #f2f2f2;
}

.ai-chat__empty-sub {
  margin: 12px 0 0;
  font-family: 'Neue', sans-serif;
  font-size: clamp(14px, 1.15vw, 18px);
  color: #9a9a9a;
  text-align: center;
}

/* ── chips ── */
.ai-chat__empty-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.ai-chat__empty-chips {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.ai-chat__empty-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* A filled chip carries a value, not a fixed word, so it has to be able to
     give up its text before it pushes past the column it sits in. */
  max-width: 100%;
  min-width: 0;
  font-family: 'Neue', sans-serif;
  font-size: 15px;
  line-height: 20px;
  color: #c9c9c9;
  background: transparent;
  border: 1px solid #3a3a3a;
  border-radius: 999px;
  padding: 11px 20px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.ai-chat__empty-chip-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-chat__empty-chip:hover {
  border-color: #c8d200;
  color: #c8d200;
}

.ai-chat__empty-chip--filled {
  border-color: #c8d200;
  background: rgba(200, 210, 0, 0.12);
  color: #c8d200;
}

/* ── examples ── */
.ai-chat__empty-examples-label {
  margin: 40px 0 0;
  font-family: 'Neue', sans-serif;
  font-size: clamp(13px, 1vw, 15px);
  color: #9a9a9a;
}

.ai-chat__empty-examples {
  margin-top: 12px;
  /* fit-content, not 100%: the grid shrinks to its content, and because the two
     tracks are equal fractions they both settle on the widest label across all
     four cards. That is what keeps every rectangle the same width while still
     trimming the dead strip a full-width grid left to the right of every prompt
     — the widest one now sits 18px from both edges, and none is wider than it
     needs to be. max-width keeps it inside the column once the labels no longer
     fit side by side. */
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  display: grid;
  /* minmax(0,1fr), not 1fr: grid items default to min-width:auto, so a long
     label widens its track past the container and pushes the grid off centre. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.ai-chat__empty-example {
  min-width: 0;
}

.ai-chat__empty-example {
  display: flex;
  align-items: center;
  /* Same rectangle whether the text wraps or not */
  min-height: 56px;
  text-align: left;
  background: #1f1f1f;
  border: 1px solid #2e2e2e;
  border-radius: 12px;
  padding: 14px 18px;
  font-family: 'Neue', sans-serif;
  font-size: clamp(13.5px, 1.05vw, 16px);
  line-height: 1.35;
  color: #e4e4e4;
  cursor: pointer;
  transition: border-color 0.15s;
}

.ai-chat__empty-example:hover {
  border-color: #c8d200;
}

/* =============================================================================
   Chip modals
   ============================================================================= */
.ai-empty-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 10100;
}

.ai-empty-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 640px;
  max-width: 92vw;
  max-height: 84vh;
  /* Head and foot stay put; only the options grid scrolls */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #1a1a1a;
  border: 1px solid #3a3a3a;
  border-radius: 16px;
  padding: 28px 28px 24px;
  z-index: 10110;
}

.ai-empty-modal[aria-hidden="true"] {
  display: none;
}

.ai-empty-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  flex-shrink: 0;
}

.ai-empty-modal__title {
  margin: 0 0 6px;
  font-family: 'Neue', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #f2f2f2;
}

.ai-empty-modal__hint {
  margin: 0;
  font-family: 'Neue', sans-serif;
  font-size: 15px;
  color: #9a9a9a;
}

.ai-empty-modal__close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-empty-modal__close:hover {
  background: #1f1f1f;
}

.ai-empty-modal__opts {
  display: grid;
  gap: 10px;
  overflow-y: auto;
  min-height: 0;
  /* Room for the scrollbar so tiles do not sit under it */
  padding-right: 4px;
  margin-right: -4px;
}

.ai-empty-modal__opts--3 {
  grid-template-columns: 1fr 1fr 1fr;
}

/* -----------------------------------------------------------------------------
   The option tile.

   .ai-chat__chip--guest is here rather than in page.css on purpose: the guest
   sizes offered inside the chat are the same six the "How many guests?" picker
   below offers, so they are the same component and share one rule set instead of
   a second one that merely resembles it.

   Two things make that safe. This stylesheet is linked AFTER page.css
   (layout/header-ai.blade.php), so at equal specificity these declarations win
   over .ai-chat__chip's; and the selected state is written as a two-class
   selector below, so it outranks .ai-chat__chip--selected in either order.
   page.css carries only what a chat bubble genuinely needs differently.
   ----------------------------------------------------------------------------- */
.ai-empty-opt,
.ai-chat__chip--guest {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* Every tile the same rectangle however many lines the title wraps to */
  min-height: 96px;
  background: #1f1f1f;
  border: 1px solid #2e2e2e;
  border-radius: 12px;
  padding: 14px 12px;
  cursor: pointer;
  font-family: 'Neue', sans-serif;
  font-size: 15px;
  line-height: 1.3;
  color: #e4e4e4;
  text-align: center;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}

.ai-empty-opt:hover,
.ai-chat__chip--guest:hover {
  border-color: #c8d200;
}

/* Neither the tile nor the chat's chips had a visible keyboard focus state; the
   chat's is stated on .ai-chat__chip in page.css so every chip gains it. */
.ai-empty-opt:focus-visible {
  outline: 2px solid #c8d200;
  outline-offset: 2px;
}

.ai-empty-opt--sel,
.ai-chat__chip--guest.ai-chat__chip--selected {
  border-color: #c8d200;
  background: rgba(200, 210, 0, 0.12);
  color: #c8d200;
}

.ai-empty-opt__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  /* Masked icons paint in currentColor, so inherit the tile's text colour
     instead of pinning a grey: a fixed value read almost black against the
     label and made the icons look unrendered. Selected state follows too. */
  color: inherit;
}

.ai-empty-opt--sel .ai-empty-opt__icon {
  color: inherit;
}

.ai-empty-opt small,
.ai-chat__chip--guest small {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  /* Subordinate to the size, but still readable: this is the line that told the
     reader what a bucket is for, and it has to survive being read. */
  color: #9a9a9a;
}

.ai-empty-opt--sel small,
.ai-chat__chip--guest.ai-chat__chip--selected small {
  color: #c8d200;
}

.ai-empty-modal__custom {
  flex-shrink: 0;
  margin-top: 14px;
}

.ai-empty-modal__input {
  width: 100%;
  background: #1f1f1f;
  border: 1px solid #2e2e2e;
  border-radius: 8px;
  padding: 10px 12px;
  font-family: 'Neue', sans-serif;
  font-size: 14px;
  color: #f2f2f2;
  outline: none;
}

.ai-empty-modal__input:focus {
  border-color: #c8d200;
}

.ai-empty-modal__foot {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.ai-empty-modal__clear {
  background: none;
  border: none;
  font-family: 'Neue', sans-serif;
  font-size: 13px;
  color: #9a9a9a;
  cursor: pointer;
  padding: 8px 4px;
}

.ai-empty-modal__clear:hover {
  color: #f2f2f2;
}

.ai-empty-modal__apply {
  background: #c8d200;
  color: #1a1a1a;
  border: none;
  border-radius: 8px;
  font-family: 'Neue', sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 26px;
  cursor: pointer;
}

.ai-empty-modal__apply:hover {
  filter: brightness(1.08);
}

/* =============================================================================
   Mobile — the page is height:100dvh with overflow:hidden and the hero shares
   the one scrollable slot, so the desktop hero (~600px) does not fit a 667px
   viewport once the 80px navbar and ~120px composer are taken. Tighten the
   type scale, drop to a single example column, and cut the vertical rhythm.
   ============================================================================= */
@media (max-width: 767px) {
  .ai-chat--empty .ai-chat__empty {
    padding: 20px 16px 16px;
    align-items: flex-start;
  }

  .ai-chat__empty-title {
    font-size: 22px;
  }

  .ai-chat__empty-chips {
    margin-top: 20px;
  }

  .ai-chat__empty-examples-label {
    margin-top: 24px;
  }

  /* One column, and full width rather than fit-content: shrink-to-fit left the
     cards narrower than the composer directly above them, so the hero read as
     two different column widths. */
  .ai-chat__empty-examples {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .ai-chat--empty .ai-chat__input-wrap {
    padding: 16px 16px 0;
  }

  /* The docked composer is top-rounded and open-bottomed so it meets the
     actions bar at the screen edge. In the hero the pair floats, so the actions
     bar has to close the card off. */
  .ai-chat--empty .ai-chat__actions {
    border-right: 1px solid #262626;
    border-bottom: 1px solid #262626;
    border-left: 1px solid #262626;
    border-radius: 0 0 12px 12px;
  }

  .ai-empty-modal {
    width: 100%;
    max-width: none;
    max-height: 88vh;
    top: auto;
    bottom: 0;
    left: 0;
    transform: none;
    border-radius: 16px 16px 0 0;
  }

  .ai-empty-modal__opts--3 {
    grid-template-columns: 1fr 1fr;
  }
}

/* =============================================================================
   City popup — parity with the Event type / Guests modals

   The city picker predates them and is its own component (.ai-location-popup__*
   chrome around the .ai-loc__* body), so it came with small pill chips in a
   wrapping row and its own footer metrics. Everything below matches it to
   .ai-empty-modal__* / .ai-empty-opt, scoped to #ai-location-popup so the same
   partial keeps its own sizing anywhere else it is used.
   ============================================================================= */
/* Sizing only. NEVER set display here: .ai-location-popup is display:none and
   [aria-hidden="false"] flips it to flex, and an ID selector outranks both, so
   a display here pins the popup permanently open and unclosable. */
#ai-location-popup {
  width: 640px;
  max-width: 92vw;
  max-height: 84vh;
  overflow: hidden;
  border-radius: 16px;
  padding: 28px 28px 24px;
}

#ai-location-popup[aria-hidden="false"] {
  display: flex;
  flex-direction: column;
}

/* Head and foot stay put; only the list scrolls */
#ai-location-popup .ai-location-popup__header,
#ai-location-popup .ai-location-popup__search-wrap,
#ai-location-popup .ai-location-popup__footer {
  flex-shrink: 0;
  padding-left: 0;
  padding-right: 0;
}

#ai-location-popup .ai-location-popup__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  border-bottom: none;
}

#ai-location-popup .ai-location-popup__header-title {
  font-family: 'Neue', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #f2f2f2;
}

#ai-location-popup .ai-location-popup__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-left: 0;
  padding-right: 4px;
  margin-right: -4px;
}

/* Cities as a 3-up tile grid, not a wrapping pill row.

   These target .ai-loc__*, the classes location-picker.blade.php actually
   renders. An earlier pass wrote the same rules against
   .listing-sidebar__filter-location--* — the PLP sidebar partial the picker used
   to reuse — which this popup has not contained since it grew its own markup, so
   none of it applied and the chips stayed at their 12px pill sizing. */
#ai-location-popup .ai-loc {
  gap: 4px;
}

#ai-location-popup .ai-loc__cities {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

/* Matches .ai-empty-opt, the Guests tile — the icon-less variant of the Event
   type tile, which is the right reference for a bare label. */
#ai-location-popup .ai-loc__city-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  min-height: 56px;
  padding: 12px 14px;
  background: #1f1f1f;
  border: 1px solid #2e2e2e;
  border-radius: 12px;
  color: #e4e4e4;
  font-size: 15px;
  line-height: 1.3;
  text-align: center;
  /* The pill relied on nowrap to stay one line; a tile is free to wrap, and
     "Ras Al-Khaimah" needs to at a third of 640px. */
  white-space: normal;
}

#ai-location-popup .ai-loc__city-label:hover {
  background: #1f1f1f;
  border-color: #c8d200;
  color: #c8d200;
}

#ai-location-popup .ai-loc__city-input:checked + .ai-loc__city-label {
  background: rgba(200, 210, 0, 0.12);
  border-color: #c8d200;
  color: #c8d200;
}

#ai-location-popup .ai-loc__country {
  height: auto;
  margin: 18px 0 10px;
}

#ai-location-popup .ai-loc__country-name {
  font-size: 15px;
  font-weight: 600;
}

/* Footer matched to .ai-empty-modal__foot: Clear left, Apply right, and the same
   metrics as .ai-empty-modal__clear / __apply. The popup's own chrome sat it in a
   65px bar and drew both buttons a size larger and bolder, which is what made it
   read as a different footer from the Event type and Guests modals. */
#ai-location-popup .ai-location-popup__footer {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: auto;
  padding: 0;
  background: none;
  border-top: none;
  border-radius: 0;
}

#ai-location-popup .ai-location-popup__cancel-btn {
  background: none;
  border: none;
  font-family: 'Neue', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #9a9a9a;
  padding: 8px 4px;
  cursor: pointer;
}

#ai-location-popup .ai-location-popup__cancel-btn:hover {
  color: #f2f2f2;
  background: none;
}

#ai-location-popup .ai-location-popup__confirm-btn {
  width: auto;
  background: #c8d200;
  color: #1a1a1a;
  border: none;
  border-radius: 8px;
  font-family: 'Neue', sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 26px;
  cursor: pointer;
}

#ai-location-popup .ai-location-popup__confirm-btn:hover {
  background: #c8d200;
  filter: brightness(1.08);
}

/* Apply stays disabled until a city is ticked, unlike the other two modals: the
   same button sends the location answer mid-conversation, where an empty answer
   is not a valid turn. Clear is the way to drop a selection. */
#ai-location-popup .ai-location-popup__confirm-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: none;
}

@media (max-width: 767px) {
  #ai-location-popup {
    width: 100%;
    max-width: none;
    border-radius: 16px 16px 0 0;
    padding: 20px 16px 16px;
  }

  #ai-location-popup .ai-loc__cities {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Event type icons are masked so they inherit the tile's text colour: the icon
   set's own files carry baked fills, several near-black, which disappear on
   this background and made the grid look half-empty. */
.ai-empty-opt__icon--masked {
  background-color: currentColor;
  -webkit-mask: var(--ai-opt-icon) center / contain no-repeat;
  mask: var(--ai-opt-icon) center / contain no-repeat;
}

.ai-empty-opt__icon--masked > * {
  display: none;
}