/* =============================================================================
   AI-Wise Page Styles
   All values are exact pixel values from Figma (node 256:10177)
   No changes to main.css — this file loads only on /ai-search route
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. DESIGN TOKENS (exact from Figma variable definitions)
   ----------------------------------------------------------------------------- */
.ai-wise-page {
  /* Brand */
  --aw-brand-100: #eef291;
  --aw-brand-300: #e0e846;
  --aw-brand-500: #c8d200;
  --aw-brand-900: #4e5200;
  --aw-brand-950: #353800;

  /* Dark grays */
  --aw-gray-200: #e8e8e8;
  --aw-gray-300: #d9d9d9;
  --aw-gray-400: #a8a8a8;
  --aw-gray-500: #757575;
  --aw-gray-700: #4f4f4f;
  --aw-gray-800: #383838;
  --aw-gray-900: #262626;
  --aw-gray-950: #1a1a1a;
  --aw-gray-980: #111111;

  /* Shadows */
  --aw-shadow-sm: 0px 1px 3px 0px rgba(10,13,18,0.1), 0px 1px 2px -1px rgba(10,13,18,0.1);
  --aw-shadow-xs: 0px 1px 2px 0px rgba(10,13,18,0.05);
}

/* -----------------------------------------------------------------------------
   2. PAGE LAYOUT
   ----------------------------------------------------------------------------- */
.ai-wise-page {
  background: #111111;
  color: #e8e8e8;
  min-height: 100vh;
  font-family: 'Neue', sans-serif;
  overflow: hidden;
}

body.ai-wise-body {
  background: #111111 !important;
}

.ai-wise__layout {
  display: flex;
  height: calc(100vh - 80px);
  overflow: hidden;
}

/* -----------------------------------------------------------------------------
   3. LEFT SIDEBAR
   ----------------------------------------------------------------------------- */
.ai-sidebar {
  width: 64px;
  flex-shrink: 0;
  background: #111111;
  border-right: 1px solid #262626;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0;
  gap: 8px;
}

.ai-sidebar__icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s;
}

.ai-sidebar__icon-btn:hover {
  background: #1a1a1a;
}

.ai-sidebar__icon-btn img {
  width: 20px;
  height: 20px;
  opacity: 0.6;
}

.ai-sidebar__icon-btn:hover img {
  opacity: 1;
}

/* -----------------------------------------------------------------------------
   4. CHAT PANEL
   ----------------------------------------------------------------------------- */
.ai-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #111111;
  position: relative;
}

.ai-chat__messages {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 32px 48px 24px 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ai-chat__messages::-webkit-scrollbar {
  width: 4px;
}

.ai-chat__messages::-webkit-scrollbar-track {
  background: transparent;
}

.ai-chat__messages::-webkit-scrollbar-thumb {
  background: #383838;
  border-radius: 4px;
}

/* User message bubble */
.ai-chat__message {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.ai-chat__message--user {
  align-items: flex-end;
}

/* Typography here is deliberately identical to .ai-chat__ai-text below: the
   question and the answer are one conversation, so a different size, tracking
   or grey between them read as two different kinds of text. Change both. */
.ai-chat__message--user .ai-chat__bubble {
  background: #1a1a1a;
  border: 1px solid #262626;
  border-radius: 12px 12px 2px 12px;
  /* 8px vertical, not 12. One line of this 18px text occupies a 26px line box,
     so at 12px the bubble measured 50px and 24 of those were padding: 48% of the
     box was empty, which is what made a one-line question read as a panel rather
     than a bubble. 8px brings it to 42px.
     Horizontal padding is untouched: it was never the problem, and 16px is what
     holds the text off the radius.
     The multi-line case keeps its breathing room because this cost is fixed, not
     proportional: a three-line question goes 98px to 90px, so the space BETWEEN
     the lines, which is what makes multi-line comfortable, is unchanged. */
  padding: 8px 16px;
  font-family: 'Neue', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: normal;
  letter-spacing: -0.36px;
  color: #d9d9d9;  /* gray/300 */
  max-width: 480px;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}

/* Chip answers echo the chip's icon inside the bubble (Figma 9771:56845).
   flex only when an icon is present, so plain text keeps pre-wrap behaviour. */
.ai-chat__message--user .ai-chat__bubble:has(.ai-chat__bubble-icon) {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-chat__bubble-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.ai-chat__message-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.ai-chat__message-action-btn {
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.15s;
}

.ai-chat__message-action-btn:hover {
  opacity: 1;
}

.ai-chat__message-action-btn img {
  width: 20px;
  height: 20px;
}

/* AI message — grid: icon col1, first text col2, second+ text and widgets span full width */
.ai-chat__message--ai {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 8px;
  align-items: start;
  min-width: 0;
}

.ai-chat__ai-icon {
  width: 40px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 0;
  overflow: visible;
  grid-column: 1;
  grid-row: 1;
}

.ai-chat__ai-icon img,
.ai-chat__ai-icon svg {
  width: 40px;
  height: 52px;
  margin-left: -6px;
  margin-top: -6px;
}

/* Pulse animation — only the star path inside the SVG, circle stays static */
@keyframes ai-star-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(0.55); }
  100% { transform: scale(1); }
}

.ai-chat__message--typing .ai-chat__ai-star {
  animation: ai-star-pulse 1.2s ease-in-out infinite;
  transform-origin: 14px 14px;
}

.ai-chat__ai-body {
  display: contents;
}

/* display:contents makes every body child a grid item of the message, and the
   rules below place only the classes this file already knew about. The markdown
   renderer emits element types it does not (a table wrapper, an ordered list),
   and an unplaced item auto-flows into the 40px icon track. This is the default
   so a new block type spans the row instead of collapsing to a sliver; it is
   deliberately low specificity, so every rule after it still wins. */
.ai-chat__message--ai .ai-chat__ai-body > * {
  grid-column: 1 / -1;
  min-width: 0;
}

/* The typing indicator relied on auto-placement to sit beside the icon, which
   the default above would take away. Stated explicitly now. */
.ai-chat__message--typing .ai-chat__ai-body > .ai-chat__typing-dots {
  grid-column: 2;
  grid-row: 1;
}

/* ---------------------------------------------------------------------------
   WHERE EACH BLOCK OF AN ANSWER SITS.

   The message is `40px | 1fr`: an icon column and a content column. Every block
   below is placed by WHAT IT IS, not by where it happens to fall in the DOM.

   That distinction is the change. This used to read
   `.ai-chat__ai-text:nth-child(n+2) { grid-column: 1 / -1 }`, meaning "any text
   after the first spans full width" -- a rule about POSITION that happened to
   describe the result summary, and would have caught any other paragraph that
   drifted after it just as readily.

   The rule now is about intent, and it is one sentence:

     the assistant TALKING             -> content column, under the first line
     a SURFACE THE READER ACTS ON      -> full width, from the icon's edge

   So a second paragraph reads as a continuation of the answer, and a card list,
   a map or a row of chips keeps the whole width it needs.

   The quick-action row moved across that line. It was grouped with the prose as
   "everything the assistant says", which put it in the content column, 52px
   right of the cards and the map bar directly above it -- and 52px right of
   every OTHER chip group on the page, because an answer widget is placed by
   [data-answer-type] in the full-width group below. Two chip rows, two left
   edges, on the same turn. A chip is something the reader clicks, not something
   the assistant said, so it belongs with the surfaces. --------------------- */

/* The assistant talking: its prose, and any further paragraph such as the
   result summary. Words only -- see the note above about the quick-action row,
   which used to be here. */
.ai-chat__ai-body > .ai-chat__ai-prose,
.ai-chat__ai-body > .ai-chat__ai-text {
  grid-column: 2;
}

/* Only the FIRST block shares the icon's row, which is what puts the sparkle on
   the first line of the answer rather than alone above it.
   .ai-chat__ai-prose is listed because it is the class that is actually first:
   assistant-message.blade.php emits the markdown body as .ai-chat__ai-prose and
   only the generated summary as .ai-chat__ai-text, so while this rule named the
   summary's class alone it matched nothing on a turn that had prose. */
.ai-chat__ai-body > .ai-chat__ai-prose:first-child,
.ai-chat__ai-body > .ai-chat__ai-text:first-child {
  grid-row: 1;
  align-self: start;
}

/* A result surface: something to look at or work with rather than read. These
   keep the full width, and narrowing them by the icon column would cost every
   venue card 52px for no gain.
   .ai-chat-map is listed explicitly. The map module appends its panel into this
   same body, so it was already full width by falling through the catch-all
   above, which is the right outcome reached by accident. Saying it here means a
   later change to that default cannot silently squeeze the map. */
.ai-chat__ai-body > .ai-chat__venue-cards,
.ai-chat__ai-body > .ai-chat__ai-list,
.ai-chat__ai-body > .ai-chat-map,
.ai-chat__ai-body > .ai-chat__venue-chips--quick,
.ai-chat__ai-body > [data-answer-type],
/* The result count is metadata ABOUT the cards, so it starts where they start.
   It carries .ai-chat__ai-text too, for the shared paragraph typography, and
   that class is placed in the content column above -- this rule is more specific
   and later, so it wins.

   :not(:first-child) is load-bearing. A turn whose body is empty but whose count
   is present makes the count the first block, and the first block shares the
   icon's row; spanning 1 / -1 there would put it underneath the sparkle. Prose
   is almost always first, so this is the rare path, which is exactly why it
   would not have been noticed. */
.ai-chat__ai-body > .ai-chat__ai-count:not(:first-child) {
  grid-column: 1 / -1;
}

/* The quick-action row's own spacing. Placement is in the full-width group
   above; what is left here is the separation from the answer and the width it
   is allowed to use.
   The gap is this group's margin rather than a bigger grid row-gap, because it
   belongs between the answer and its actions, not between every block. */
.ai-chat__ai-body > .ai-chat__venue-chips--quick {
  margin-top: 8px;
  /* The 70% cap on .ai-chat__venue-chips exists for the ANSWER widgets, where a
     narrow measure keeps a chip grid readable. On the quick-action row it only
     wasted space: at 1440 it held the row to 578px of an available 774px, so
     three chips fit per row and 65-144px sat unused on each. The row is already
     wrap + content-sized chips, so removing the cap is all the packing needed. */
  max-width: none;
}

/* Kept in step with .ai-chat__message--user .ai-chat__bubble above. */
.ai-chat__ai-text {
  font-family: 'Neue', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: normal;
  letter-spacing: -0.36px;
  color: #d9d9d9;  /* gray/300 */
}

/* Plain bullet list (non-venue responses) — prose in the same answer, so it
   carries the same typography as .ai-chat__ai-text. Tables stay at 14px: those
   are dense data grids, not running text. */
.ai-chat__ai-list {
  font-family: 'Neue', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: normal;
  letter-spacing: -0.36px;
  color: #d9d9d9;  /* gray/300 */
  margin: 6px 0 0 0;
  padding-left: 16px;
  list-style: disc;
}

.ai-chat__ai-list li {
  margin-bottom: 4px;
}

/* -----------------------------------------------------------------------------
   MARKDOWN (public/src/js/ai-markdown.js)
   Assistant messages only. Every rule is scoped to .ai-chat__message--ai
   because this stylesheet is also loaded by profile/collections.blade.php.
   ----------------------------------------------------------------------------- */

/* style/main.css carries three competing bare `strong` rules (lines 19024, 39571
   and 57610). The last one wins here and paints every bold run brand lime
   #c8d200 in a different family, so an emphasised venue name read as an accent
   colour rather than as emphasis, inside table cells as well. All three
   properties are restated so none of them applies.

   600 is a real face, not synthetic: NeuePlak-SemiBold is declared for 'Neue' in
   style/main.css and the browser reports it loaded. 700 exists too but reads
   heavy against 400 body text. */
.ai-chat__message--ai strong {
  font-family: inherit;
  font-weight: 600;
  color: inherit;
}

/* Model-supplied links. agent1's place answers close with a "Visit website"
   line and a Google reviews block, and both of those are markdown links, so
   this class is on every answer that mentions a venue's own site or map.

   Underlined as well as recoloured: brand/300 against #d9d9d9 body text is a
   small step at 18px and colour alone would not read as clickable. A long URL
   used as its own label has no break opportunity, so it is allowed to break
   anywhere rather than push the transcript sideways. */
.ai-chat__message--ai .ai-chat__ai-link {
  color: #e0e846;  /* brand/300 */
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  overflow-wrap: anywhere;
}

.ai-chat__message--ai .ai-chat__ai-link:hover,
.ai-chat__message--ai .ai-chat__ai-link:focus-visible {
  color: #eef291;  /* brand/100 */
}

/* A bold link keeps the link colour: .ai-chat__message--ai strong sets
   color: inherit, and inherit here is the anchor. Stated so the three bare
   `strong` rules in style/main.css cannot repaint it. */
.ai-chat__message--ai .ai-chat__ai-link strong {
  color: inherit;
}

/* Ordered lists reuse .ai-chat__ai-list, which sets list-style: disc. */
.ai-chat__message--ai .ai-chat__ai-list--ordered {
  list-style: decimal;
}

.ai-chat__message--ai .ai-chat__ai-list ul,
.ai-chat__message--ai .ai-chat__ai-list ol {
  margin: 4px 0 0 0;
  padding-left: 16px;
}

.ai-chat__message--ai .ai-chat__ai-list ul {
  list-style: circle;
}

.ai-chat__message--ai .ai-chat__ai-list ol {
  list-style: decimal;
}

/* A compare answer is up to seven columns and .ai-chat__messages clips
   horizontally, so the table has to scroll inside its own box: min-width on the
   table forces the overflow, overflow-x on the wrapper absorbs it, and
   min-width:0 (set by the grid default above) is what lets the wrapper shrink
   below its content instead of pushing the transcript sideways. */
.ai-chat__message--ai .ai-md-table-wrap {
  overflow-x: auto;
  min-width: 0;
  -webkit-overflow-scrolling: touch;
}

/* Same treatment as .ai-chat__messages above, on the horizontal axis: the
   browser default is a light bar that reads as a foreign element on this page. */
.ai-chat__message--ai .ai-md-table-wrap::-webkit-scrollbar {
  height: 4px;
}

.ai-chat__message--ai .ai-md-table-wrap::-webkit-scrollbar-track {
  background: transparent;
}

.ai-chat__message--ai .ai-md-table-wrap::-webkit-scrollbar-thumb {
  background: #383838;
  border-radius: 4px;
}

.ai-chat__message--ai .ai-md-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 520px;
  font-family: 'Neue', sans-serif;
  font-size: 14px;
  line-height: 22px;
}

.ai-chat__message--ai .ai-md-table th,
.ai-chat__message--ai .ai-md-table td {
  border: 1px solid #262626;
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}

.ai-chat__message--ai .ai-md-table th {
  background: #1a1a1a;
  color: #e8e8e8;
  font-weight: 600;
}

.ai-chat__message--ai .ai-md-table td {
  color: #d9d9d9;
}

/* -----------------------------------------------------------------------------
   VENUE CARDS LIST — Figma node 266:10303
   Scrollable list of ranked venue cards inside the AI message body.
   ----------------------------------------------------------------------------- */

/* Wrapper: no bullets, no padding, scrollable, gap between cards */
.ai-chat__venue-cards {
  list-style: none;
  padding: 0;
  margin: 4px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* Single card */
.ai-venue-card {
  background: #1a1a1a;
  border: 1px solid #262626;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* Top section: image + content + right column.
   flex-wrap lets the right (actions) column drop below the image/content row
   when the chat panel is narrow, so the card fits instead of forcing a
   horizontal scrollbar on the messages area. */
.ai-venue-card__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #262626;
  min-height: 111px;
}

/* Venue thumbnail */
.ai-venue-card__image {
  width: 144px;
  height: 96px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: #262626;
}

/* A venue with no photograph. Same box, so the row does not reflow, but it
   reads as absent rather than as an image that failed: the card is allowed to
   have no picture, and that is not an error state to decorate. */
.ai-venue-card__image--empty {
  display: block;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0) 60%),
    #262626;
  border: 1px solid rgba(255,255,255,0.06);
}

/* Middle content column */
.ai-venue-card__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* Name row: name + verified badge */
.ai-venue-card__name-row {
  display: flex;
  /* flex-start, not center: once the name is allowed a second line the badge
     must stay level with the first one rather than float beside the pair. */
  align-items: flex-start;
  gap: 4px;
  /* A minimum, not a fixed height. At 24px the second line was clipped by the
     box before the clamp ever saw it. A one-line name renders identically. */
  min-height: 24px;
}

.ai-venue-card__name {
  font-family: 'Neue', sans-serif;
  /* 600, matching the weight this stylesheet already uses for every other
     heading. At 400 the venue name was the same size AND weight as the meta
     row beneath it, so the card read as one undifferentiated block and the
     only thing separating the title from its own metadata was a 7% lift in
     grey. The site uses 400/500/600/700; this introduces nothing new. */
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #fafafa;
  /* TWO LINES AT EVERY WIDTH, and the width range is why this is not scoped to
     phones. A single nowrap line cut three of five real Dubai results at 390px,
     and the first fix clamped only below 680px. The responsive matrix then found
     the same truncation still happening at 768, where the card is 594px wide:
     "The Ritz-Carlton, Dubai Inte..." and "Le Meridien Dubai Hotel & Co...". It
     stops on its own by 1024, where the card is 850px.
     A breakpoint would have to guess that band, and the card's width depends on
     whether the collection panel is docked as well as on the viewport. Clamping
     everywhere needs no guess: at 1440 no name reaches a second line, so the row
     measures the same 24px it always did.
     Two rather than three: three clears the last long name at 768 but grows that
     card from 219px to 289px. A name still long enough to fill two lines at a mid
     width ellipsises on the second, which is a stated cap rather than an
     unbounded title. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-venue-card__badge {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  /* Centre it on the FIRST line: 24px line box, 18px badge. The row aligns to
     flex-start so the badge holds this position when the name wraps. */
  margin-top: 3px;
}

.ai-venue-card__badge--premium {
  width: 18px;
  height: 18px;
}

/* Type + location row */
.ai-venue-card__meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 20px;
  min-width: 0;
}

.ai-venue-card__type-badge {
  background: #4f4f4f;
  border-radius: 4px;
  padding: 2px 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 16px;
  flex-shrink: 0;
}

.ai-venue-card__type-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  object-fit: contain;
}

.ai-venue-card__type-label {
  font-family: 'Neue', sans-serif;
  font-weight: 400;
  font-size: 10px;
  color: #a8a8a8;
  letter-spacing: 0.1px;
  line-height: normal;
}

.ai-venue-card__star-icon {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}

.ai-venue-card__star-count {
  font-family: 'Neue', sans-serif;
  font-weight: 400;
  font-size: 10px;
  color: #a8a8a8;
  letter-spacing: 0.1px;
  line-height: normal;
}

.ai-venue-card__location {
  font-family: 'Neue', sans-serif;
  font-weight: 400;
  font-size: 10px;
  /* Was 24px: a 2.4 ratio on a 10px label, which left it floating in its row
     rather than sitting under the name. 16px is the same 1.6 rhythm the rest
     of the card's small text uses. */
  line-height: 16px;
  color: #757575;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Google rating row */
.ai-venue-card__rating-row {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 20px;
}

.ai-venue-card__rating-icon {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}

.ai-venue-card__rating-text {
  font-family: 'Neue', sans-serif;
  font-weight: 400;
  font-size: 10px;
  line-height: 24px;
  color: #757575;
  white-space: nowrap;
}

.ai-venue-card__google-icon {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
}

/* Capacity / details row */
.ai-venue-card__details-row {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 20px;
  margin-top: 8px;
}

.ai-venue-card__detail-item {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.ai-venue-card__detail-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.7;
  /* The artwork is portrait (seating 9x16, standing 7x16) and the box is
     square, so the default object-fit: fill stretched both figures to roughly
     twice their width. contain keeps the drawing and lets the box breathe,
     which is what the property-type icon above already does. */
  object-fit: contain;
}

.ai-venue-card__detail-text {
  font-family: 'Neue', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  color: #757575;
  white-space: nowrap;
}

/* Right column: matched rooms thumbnail + buttons */
.ai-venue-card__right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  /* 168, not 180, and the twelve pixels are the whole point.
     The card is three columns: a fixed 144px image, this fixed column, and a
     content column that takes whatever is left. So this width decides how much
     room the venue NAME gets, and at 180 the name column was 196px of a 586px
     card, which is what left "The Ritz-Carlton, Dubai International Financial
     Centre" needing three lines and ellipsising on its second.
     Twelve pixels here give the content column 208px and take that name from
     three lines to two. The trade is one-sided: the widest thing in this column
     is the 111px "Add to inquiry" button, so 180 was carrying 57px of slack
     while the name next to it ran out of room.
     Deliberately not a breakpoint. The squeeze depends on the collection panel
     being docked as much as on the viewport, so the same viewport truncates or
     does not depending on panel state, and a media query cannot see that. */
  width: 168px;
  flex-shrink: 0;
}

.ai-venue-card__matched-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Figma node 266:10007 — stacked room image thumbnail */
.ai-venue-card__room-stack {
  position: relative;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  overflow: visible;
}

/* Back card: rotates from bottom anchor so top swings out, bottom stays fixed */
.ai-venue-card__room-stack-back {
  position: absolute;
  width: 42px;
  height: 43px;
  bottom: 0;
  left: 0;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.56);
  object-fit: cover;
  background: #262626;
  transform: rotate(14.04deg);
  transform-origin: center bottom;
  opacity: 0.6;
}

/* Front card: sits flat on top, anchored to bottom */
.ai-venue-card__room-stack-front {
  position: absolute;
  width: 42px;
  height: 43px;
  bottom: 0;
  left: 1px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.56);
  box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.15);
  object-fit: cover;
  background: #262626;
}

.ai-venue-card__matched-label {
  font-family: 'Neue', sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: #fcfcfc;
  line-height: normal;
}

/* Figma node 266:10011: number uses Neue Plak Text Bold, color #fcfcfc */
.ai-venue-card__matched-label strong {
  font-family: 'Neue', 'Neue', sans-serif;
  font-weight: 700;
  color: #fcfcfc;
}

/* Action buttons row */
.ai-venue-card__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  justify-content: flex-end;
}

.ai-venue-card__add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 8px 12px;
  border: 1px solid #4e5200;
  border-radius: 8px;
  background: transparent;
  font-family: 'Neue', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #7e8500;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.ai-venue-card__add-btn:hover {
  background: rgba(126,133,0,0.08);
}

.ai-venue-card__add-btn--added {
  background: #353800;
  color: #EEF291;
  border-color: transparent;
  cursor: pointer;
}

.ai-venue-card__add-btn--added:hover {
  background: #424500;
}

.ai-venue-card__arrow-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 8px;
  border: 1px solid #4e5200;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
  text-decoration: none;
}

.ai-venue-card__arrow-btn:hover {
  background: rgba(126,133,0,0.08);
}

.ai-venue-card__arrow-btn {
  position: relative;
}

/* Tooltip */
.ai-venue-card__arrow-tooltip {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s, visibility 0.15s;
  white-space: nowrap;
  z-index: 10;
}

.ai-venue-card__arrow-btn:hover .ai-venue-card__arrow-tooltip {
  opacity: 1;
  visibility: visible;
}

.ai-venue-card__arrow-tooltip-content {
  display: block;
  background: #383838;
  color: #fff;
  font-family: 'Neue', 'Neue', sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 18px;
  padding: 8px 12px;
  border-radius: 8px;
  box-shadow: 0px 2px 2px 0px rgba(10,13,18,0.04),
              0px 4px 6px 0px rgba(10,13,18,0.03),
              0px 12px 16px 0px rgba(10,13,18,0.08);
}

.ai-venue-card__arrow-tooltip-caret {
  display: block;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #383838;
}

.ai-venue-card__arrow-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Footer note: check icon + italic text */
.ai-venue-card__footer {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.ai-venue-card__footer-icon {
  width: 14px;
  flex-shrink: 0;
  /* 12x9 artwork in a square box: fill squashed it vertically. */
  object-fit: contain;
  /* Was margin-top: 1px, a hand-tuned nudge that happened to look right while
     the headline stayed on one line. The footer text is 12px/normal, so its
     first line box is ~15px; matching that here centres the glyph against that
     line by layout rather than by offset, and it stays put when the headline
     wraps to two lines. Not 1lh: that unit resolves against the IMAGE's own
     inherited line-height, not the sibling text's, so it would only look
     correct by coincidence. */
  height: 15px;
  align-self: flex-start;
}

.ai-venue-card__footer-text {
  font-family: 'Neue', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: normal;
  color: #a8a8a8;
}

/* Reason chips: positives in the brand olive, watch-outs in amber so an honest
   trade-off never reads as a feature */
.ai-venue-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ai-venue-card__chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 3px 9px;
  border: 1px solid #3c4013;
  border-radius: 999px;
  background: rgba(126, 133, 0, 0.14);
  font-family: 'Neue', sans-serif;
  font-weight: 400;
  font-size: 11px;
  line-height: 16px;
  color: #c2cb4d;
}

.ai-venue-card__chip--risk {
  border-color: #4d3c12;
  background: rgba(217, 155, 0, 0.14);
  color: #e3b45c;
}

.ai-venue-card__chip--risk::before {
  content: '!';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  margin-right: 5px;
  border-radius: 50%;
  background: #d99b00;
  color: #1a1a1a;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}

/* Nothing to say about this venue: collapse the divider instead of leaving the
   band an absent footer used to fill */
.ai-venue-card--no-reasoning .ai-venue-card__top {
  padding-bottom: 0;
  border-bottom: none;
}

/* Mobile: move __right below image/content row */
@media (max-width: 680px) {
  .ai-venue-card__top {
    flex-wrap: wrap;
    border-bottom: none;
  }

  .ai-venue-card__image {
    order: 1;
    width: 100px;
    height: 88px;
    /* No aspect-ratio here: with both width and height set it never applies, and
       leaving it read as though it governed the crop. The mobile box is
       deliberately squarer (1.14) than desktop (1.5); object-fit: cover handles
       the difference. */
  }

  .ai-venue-card__content {
    order: 2;
  }

  .ai-venue-card__right {
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: unset;
    padding-top: 12px;
    border-top: 1px solid #262626;
    padding-bottom: 12px;
    border-bottom: 1px solid #262626;
  }

  .ai-venue-card__actions {
    width: 100%;
  }

  .ai-venue-card__add-btn {
    flex: 1;
  }
}

.ai-chat__ai-prompt {
  font-family: 'Neue', sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 24px;
  color: #e8e8e8;
  margin-top: 4px;
}

/* -----------------------------------------------------------------------------
   5. CHIPS — universal base (all chip types: city, event-type, attendance)
   ----------------------------------------------------------------------------- */
/* Answer widget wrapper — flex-col, gap 16px between label, chips, button */
.ai-chat__answer-widget {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}

/* "Popular event locations" label above city chips — Figma node 266:8007 */
.ai-chat__chips-section-label {
  font-family: 'Neue', sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.28px;
  color: #a8a8a8;  /* gray/400 */
}

.ai-chat__venue-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 70%;
}

/* Popular event locations is the one answer widget the cap hurts, so it is the
   one that drops it -- the cap stays on .ai-chat__venue-chips for the answer
   grids it was written for.

   These are short, content-width chips in a wrapping row, not a grid that wants
   a narrow measure. At 1440 the cap held the row to 895px of a 1279px widget,
   so eight cities wrapped to a second line with ~30% of the row empty beside
   them, while the section label above and the "Choose another location" button
   below both span the full column -- the row read as inset from its own
   section. Same reasoning, and the same fix, as the quick-action row and the
   guest-count grid, which already dropped the cap for it.

   Scoped by the widget rather than by the container id: ai-wise.js suffixes
   every cloned widget's ids with a timestamp, so `#ai-chips-city` matches only
   the hidden template and none of the widgets a reader actually sees. */
[data-answer-type="city_name"] .ai-chat__venue-chips {
  max-width: none;
}

/* -----------------------------------------------------------------------------
   Event-type cards.

   The 24 filterable event types, as the same kind of card the empty-state
   "What kind of event?" modal draws (.ai-empty-modal__opts--3), sized for the
   chat column rather than for a 3-up dialog.

   Why a grid and not the wrapping flex row above: as a flex row these were
   fixed 89px cells inside a `max-width: 70%` container, so a ~1000px chat
   column laid out six 89px cards across 594px and left 400px of the row unused
   while the remaining cards wrapped underneath. The width cap is what created
   that gap, and a fixed cell is what made the cards too narrow to hold
   "Conferences" without breaking it mid-word.

   auto-fill, not auto-fit: with the full catalogue the two are identical, but
   auto-fit would stretch a short list (agent1 sending three options) into three
   500px slabs. auto-fill keeps a card a card whatever the count. --------------- */
.ai-chat__venue-chips--event-type {
  display: grid;
  /* The track floor is the constraint, not the card: the browser fits as many
     as the real column width allows and shares the remainder out, so there is
     no leftover strip on the right to explain. */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  /* The widget already spans the message grid (grid-column: 1 / -1); the 70%
     above is what it must not inherit. */
  max-width: none;
  width: 100%;
}

.ai-chat__chip {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  height: 40px;
  min-height: 40px;
  border: 0.5px solid #4f4f4f;  /* gray/700 */
  border-radius: 8px;
  background: #1a1a1a;           /* gray/950 */
  cursor: pointer;
  font-family: 'Neue', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 28px;
  color: #a8a8a8;               /* gray/400 */
  opacity: 0.9;
  text-align: center;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
}

/* Tall variant — event-type chips with icons */
.ai-chat__chip--tall {
  flex-direction: column;
  height: auto;
  min-height: 72px;
  line-height: 16px;
  white-space: normal;
  padding: 12px 8px;
  /* Figma 9771:56863 — a uniform cell so the grid reads as rows, not a ragged
     word-width flow. */
  width: 89px;
  min-width: 89px;
  /* The comment above used to end "Long labels wrap inside the cell", and two of
     agent1's twenty-four event types did not: "Indoor Dinners/Awards/Galas" and
     "Outdoor Dinners/Awards/Galas" carry one unbreakable 19-character token, and
     a normal wrap has nowhere to break it. Measured at 390px: scrollWidth 113
     against clientWidth 88, painting 25px of text through the border and into
     the chip beside it, so the row read "inners/Awards/Galas" over "Seminars".
     `anywhere` lets the token break rather than escape. Not `overflow: hidden`,
     which would trade a collision for a silently clipped label. */
  overflow-wrap: anywhere;
}

/* -----------------------------------------------------------------------------
   5a-i. QUICK-ACTION CHIPS ON A PHONE

   Position matters, as it does for the block below: this has to sit AFTER
   .ai-chat__chip or the base 24px padding wins at every width.

   agent1's quick actions are sentences rather than words: "What does…'s website
   say?" measures 212px of a 302px row at 390, so at 24px of inline padding a row
   held one chip and nine of them took seven rows and 328px.

   14px is the whole change. Nine chips fall to five rows and 232px, a 29%
   saving, with no label clipped and no chip pushed to two lines. It is scoped to
   the quick row because the answer-widget chips have their own mobile sizing
   just below, tuned against a different problem, and to phones because at 1440
   the row already fits four across with room to spare.

   Not touched: the labels, their order, the chip's height, radius, colours or
   states. Only the horizontal padding, and only here.
   ----------------------------------------------------------------------------- */
@media (max-width: 680px) {
  .ai-chat__venue-chips--quick .ai-chat__chip {
    padding-inline: 14px;
  }
}

/* -----------------------------------------------------------------------------
   5a. EVENT-TYPE GRID ON A PHONE

   POSITION IS LOAD-BEARING. This block has to sit AFTER .ai-chat__chip--tall,
   not in the earlier `max-width: 680px` block further up the file. Both
   selectors have the same specificity, so the later one wins, and an earlier
   media query loses to a later base rule no matter how narrow the screen is.
   An earlier attempt at this override lived up there and did nothing at all:
   the media query matched, the rule applied, and the computed width was still
   the base 89px. Verified in Chrome, not read off the source.

   WHAT IT IS FOR
   agent1 publishes 24 event types. In the base cell that grid measured 699px on
   an 844px viewport, 83% of the screen for one question, because min-height is
   72px: a Figma cell sized for an icon above a label, and these chips render no
   icon at all, so every one reserved a row of empty space it never used.

   Measured alternatives, same 24 real options at 390px:

     base                          699px
     content-width pills            668px   -4%, and 13 ragged rows of 1-3
     two columns                    679px   -3%
     one column                    1194px  +71%
     this                           507px  -27%, 8 uniform rows

   Content-width pills are the ragged word-width flow the base rule's Figma note
   rejects, and they barely help. The uniform three-column grid is kept; what
   changes is that a cell is now sized by its text with a 44px floor instead of
   a 72px icon slot.

   NOT CHANGED: option identities, their order, their labels, or anything about
   the structured answer. agent1 remains the authority for all of it.
   ----------------------------------------------------------------------------- */
@media (max-width: 680px) {
  .ai-chat__venue-chips {
    gap: 8px;
  }

  .ai-chat__chip--tall {
    /* Three cells sharing the row rather than three 89px cells leaving 63px of
       it unused. min-width drops to 0 so the calc governs on a narrower phone
       instead of losing to the 89px floor. */
    width: calc((100% - 16px) / 3);
    min-width: 0;
    /* 44px, which is the tap-target floor, replacing a 72px icon-and-label cell
       that has no icon in it. Cells still grow for a long label: measured 44px
       to 73px across the 24 options, none clipped and none overflowing. */
    min-height: 44px;
    padding: 6px;
    /* 13px/15px rather than 14px/16px. This is the one readability trade in the
       block and it is what turns a 15% saving into 27%: at 14px the same grid
       measures 592px. The label stays whole either way. */
    font-size: 13px;
    line-height: 15px;
  }
}

/* An event-type card fills its grid track instead of holding the 89px cell the
   property-type chips still use. The 89px cell is narrower than "Conferences",
   which is why that label used to render as "Conferenc / es".

   Wrapping is stated rather than left to the cascade: `break-word` breaks a word
   only when it genuinely cannot fit a line on its own, and at these widths none
   of the 24 titles does, so every label breaks at a space or after a slash.
   `word-break: normal` and `hyphens: none` are here so a broader rule elsewhere
   cannot reintroduce the mid-word split. */
.ai-chat__venue-chips--event-type .ai-chat__chip--tall {
  width: auto;
  min-width: 0;
  min-height: 88px;
  padding: 14px 10px;
  line-height: 18px;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

.ai-chat__chip-icon {
  width: 24px;
  height: 24px;
  /* A label wrapping to three lines must not squeeze the icon: the card is a
     column flex container, so the icon is a flex item on the cross axis. */
  flex-shrink: 0;
  opacity: 0.8;
}

.ai-chat__chip:hover {
  border: 0.5px solid #7E8500;  /* brand/600 */
  background: rgba(33, 35, 1, 0.6);
}

.ai-chat__chip--selected {
  border: 0.5px solid #7E8500;  /* brand/600 */
  background: #212301;           /* brand/980 */
  color: #e0e846;                /* brand/300 */
  opacity: 1;
}

.ai-chat__chip--selected .ai-chat__chip-icon {
  opacity: 1;
}

/* -----------------------------------------------------------------------------
   5b. GUEST-COUNT OPTIONS — the same question the site's own picker asks

   WHY A GRID AND NOT A WRAPPING ROW
   These were content-width chips wrapping inside `max-width: 70%`, which is the
   worst of both: the cap threw away nearly a third of the measure, and the chips
   that were left packed by word length, so a row ended wherever the next label
   happened not to fit. Six options came out as a ragged 3 + 2 + 1 with a wide
   gutter down the right.

   A fixed three-column grid is what the picker itself uses
   (.ai-empty-modal__opts--3), and six options divide into it exactly: two even
   rows of three, every tile the same width, nothing left over. The cap goes with
   it -- same reasoning as the quick-action row above, which lost its own cap for
   the same reason.

   The two `.ai-chat__chips-row` wrappers this used to dissolve with
   `display: contents` are gone from both renderers, so the rule went with them.
   ----------------------------------------------------------------------------- */
.ai-chat__venue-chips--attendance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
  max-width: none;
}

/* The tile itself is .ai-empty-opt's rule set, shared from empty-state.css so
   the two surfaces cannot drift. Only what a chat bubble needs differently is
   here: the base .ai-chat__chip is `nowrap` and a fixed 40px, both of which a
   two-line tile has to undo, and a grid cell has no business carrying a width of
   its own. */
.ai-chat__chip--guest {
  width: auto;
  height: auto;
  white-space: normal;
  /* The base chip sits at 0.9 and brightens only when selected. The picker's
     tiles are never dimmed, and a 13px hint under a dimmed label is the exact
     readability complaint this change exists to fix. */
  opacity: 1;
}

/* "Not sure? I can help estimate your guest count." is a request for help, not a
   size, so it reads as one: the full width under the sizes, left-aligned, and
   still the ordinary chip rather than a seventh tile pretending to be a bucket.
   It is identified by ABSENCE from the guest-count map, so a bucket can never
   land here by accident. */
.ai-chat__chip--guest-help {
  grid-column: 1 / -1;
  justify-content: flex-start;
  height: auto;
  min-height: 40px;
  white-space: normal;
  text-align: left;
}

/* Keyboard focus was invisible on every chip, tile and plain alike. Stated on
   the shared class so the whole component gains it, not just the guest sizes.
   Matches the voice controls' ring further down this file. */
.ai-chat__chip:focus-visible {
  outline: 2px solid #e0e846;
  outline-offset: 2px;
}


/* -----------------------------------------------------------------------------
   6. INPUT BAR (bottom of chat)
   ----------------------------------------------------------------------------- */
.ai-chat__input-wrap {
  padding: 0 24px 24px 24px;
  flex-shrink: 0;
}

/* Actions bar — Figma 366:12748 (375×40px) — mobile only */
.ai-chat__actions {
  display: none;
  align-items: center;
  justify-content: flex-end;
  height: 40px;
  padding-top: 4px;
  padding-bottom: 4px;
  background: #1a1a1a;
}

.ai-chat__actions-left {
  display: flex;
  align-items: center;
}

.ai-chat__actions-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-chat__action-btn {
  display: flex;
  align-items: center;
  gap: 0px;
  cursor: pointer;
}

.ai-chat__action-icon-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.ai-chat__action-label {
  font-size: 12px;
  line-height: 1;
  color: #8C8C8C;
  white-space: nowrap;
}

.ai-chat__action-chevron {
  flex-shrink: 0;
  margin-left: 8px;
}

.ai-chat__input-bar {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: #1a1a1a;          /* gray/950 */
  border: 1px solid #262626;
  border-radius: 12px;
  padding: 8px 8px 8px 16px;
}

.ai-chat__input {
  flex: 1;
  min-width: 0;                 /* allow the textarea to shrink inside the flex row so it never
                                   forces the bar to overflow horizontally */
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: none;
  outline: none;
  font-family: 'Neue', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #e8e8e8;
  caret-color: #e0e846;
  resize: none;
  min-height: 24px;
  max-height: 184px;            /* 7 lines (7 × 24px line-height + 16px padding), then scroll */
  overflow-x: hidden;           /* never scroll horizontally — text wraps instead */
  overflow-y: auto;             /* grow vertically up to max-height, then scroll */
  display: block;
  padding: 8px 0;
  white-space: pre-wrap;        /* wrap lines instead of expanding horizontally */
  overflow-wrap: break-word;    /* break long unbreakable words/URLs onto the next line */
  word-break: break-word;
  scrollbar-width: none;        /* Firefox — hide the vertical scroll indicator */
  -ms-overflow-style: none;     /* legacy Edge/IE — hide scrollbar */
}

/* WebKit (Chrome/Safari/Edge) — hide the vertical scroll indicator while keeping it scrollable */
.ai-chat__input::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.ai-chat__input::placeholder {
  color: var(--vw-placeholder, #999999);
}

.ai-chat__send-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 8px;
  background: #383838;          /* disabled state — grey */
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: not-allowed;
  transition: background 0.15s, transform 0.1s;
  padding: 0;
  box-sizing: border-box;
}

.ai-chat__send-btn:disabled {
  opacity: 1;
  cursor: not-allowed;
}

.ai-chat__send-btn--active {
  background: #e0e846 !important;
  cursor: pointer;
}

.ai-chat__send-btn--active:hover {
  background: #eef291 !important;
}

.ai-chat__send-btn--active:active {
  transform: scale(0.95);
}

.ai-chat__send-btn--active svg path {
  stroke: #111111;
}

.ai-chat__send-btn:not(.ai-chat__send-btn--active) svg path {
  stroke: #757575;
}

/* -----------------------------------------------------------------------------
   7. RESPONSIVE BREAKPOINTS — page-level only (navbar handled in navbar.css)
   ----------------------------------------------------------------------------- */

/* Mobile: no sidebar, full-width chat, panel as bottom sheet */
@media (max-width: 767px) {
  /* Fix iPhone Safari: use dvh so layout fits inside the visible viewport,
     not behind the address bar or home indicator.
     .ai-wise-page becomes a fixed-height flex column;
     .ai-wise__layout fills the remaining space with flex:1. */
  .ai-wise-page {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    min-height: unset;
    overflow: hidden;
  }

  .ai-wise-page > .app-navigation {
    flex-shrink: 0;
  }

  .ai-wise__layout {
    flex: 1;
    height: unset;
    min-height: 0;
    overflow: hidden;
  }

  .ai-sidebar {
    display: none;
  }

  .ai-chat__messages {
    padding: 20px 16px 16px 16px;
  }

  .ai-chat__input-wrap {
    padding: 0;
  }

  .ai-chat__input-bar {
    border-bottom: none;
    border-radius: 12px 12px 0 0;
  }

  /* Actions bar mobile — left group starts at x=12px */
  .ai-chat__actions {
    display: flex;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 8px;
    padding-bottom: 8px;
    height: auto;
    border-top: 1px solid #262626;
  }

  .ai-chat__venue-chips,
  .ai-chat__answer-widget {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* EVENT-TYPE CARDS ON A PHONE. This block OWNS their phone sizing outright.
     The `.ai-chat__chip--tall` override in section 5a does not reach them: that
     rule is one class, this one is two, so specificity decides and ordering is
     irrelevant. Stated here rather than left to be discovered, because 5a reads
     as though it governs this grid and no longer does.

     5a sized a cell for a chip with NO icon: "these chips render no icon at all,
     so every one reserved a row of empty space it never used". That premise is
     gone -- every event type now carries a 24px glyph -- so its three 114px
     columns would put the icon and a label like "Indoor Dinners/Awards/Galas"
     in the same cell. Measured at 390px: 1 label breaks mid-word and 2 overflow
     their card, which is exactly the defect the grid replaced.

     What is kept from 5a is its intent, not its numbers: a cell sized by its
     content against a tap-target floor rather than a fixed icon slot. Measured
     at 390px with the real 24 options and their icons:

       two columns, base 88px cell     1229px
       5a's three columns + icons       686px   but 1 split word, 2 overflows
       this                             916px  -25%, nothing broken

     A 132px track floor keeps two columns down to a ~276px column; 150px would
     have tipped a small phone to one card per row. */
  .ai-chat__venue-chips--event-type {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 8px;
  }

  .ai-chat__venue-chips--event-type .ai-chat__chip--tall {
    /* 44px is the tap-target floor; cells grow from there with their label, so
       the uniform-rectangle look survives without reserving desktop padding. */
    min-height: 44px;
    padding: 8px 6px;
    gap: 4px;
  }

  /* Two columns rather than three, which is the same step the picker's own
     modal takes at this breakpoint (.ai-empty-modal__opts--3 in
     empty-state.css). Six options stay three even rows. */
  .ai-chat__venue-chips--attendance {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* :not() is load-bearing. This rule pins a phone chip to a single 40px line
     with !important, which a two-line tile cannot survive; the guest tiles size
     themselves from .ai-empty-opt's shared rule instead. It still applies to the
     help option, which IS a one-line chip. */
  .ai-chat__venue-chips--attendance .ai-chat__chip:not(.ai-chat__chip--guest) {
    height: 40px !important;
    min-height: 40px !important;
    font-size: 14px;
    padding: 12px 24px;
    border-radius: 8px;
  }


}

/* ── Choose another location button ─────────────────────────────────────── */
.ai-chat__choose-location-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  height: 32px;
}

.ai-chat__choose-location-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background-color: #212301;  /* brand/980 */
  border-radius: 6px;
  padding: 8px;
  overflow: hidden;
}

.ai-chat__choose-location-icon-wrap img,
.ai-chat__choose-location-icon-wrap svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: block;
}

.ai-chat__choose-location-label {
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: 'Neue', sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.28px;  /* tracking-[-0.28px] */
  color: #d9d9d9;            /* gray/300 */
  white-space: nowrap;
}

.ai-chat__choose-location-label img,
.ai-chat__choose-location-label svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ── Show all property types / Show less (Figma 9771:56817 → 9771:56942) ── */
/* Shares the icon-wrap + label structure with .ai-chat__choose-location-btn */
.ai-chat__show-all-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  height: 32px;
}

.ai-chat__chip--extra {
  display: none;
}

.ai-chat__answer-widget--expanded .ai-chat__chip--extra {
  display: flex;
}

.ai-chat__show-all-btn-less {
  display: none;
}

.ai-chat__show-all-btn[aria-expanded="true"] .ai-chat__show-all-btn-more {
  display: none;
}

.ai-chat__show-all-btn[aria-expanded="true"] .ai-chat__show-all-btn-less {
  display: inline;
}

.ai-chat__show-all-btn-chevron {
  transform: rotate(90deg);
  transition: transform 0.15s;
}

.ai-chat__show-all-btn[aria-expanded="true"] .ai-chat__show-all-btn-chevron {
  transform: rotate(-90deg);
}

.ai-chat__show-all-btn:disabled,
.ai-chat__show-all-btn[data-answered="true"] {
  cursor: default;
  opacity: 0.5;
  pointer-events: none;
}

/* ── Pick exact dates button (Figma node 266:8098) ──────────────────────── */
/* Shares identical visual structure with .ai-chat__choose-location-btn     */
.ai-chat__pick-dates-btn {
  display: flex;
  align-items: center;
  gap: 12px;         /* gap-[12px] */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  height: 32px;
}

/* Disabled state — answer already submitted, keep visible but non-interactive */
.ai-chat__choose-location-btn:disabled,
.ai-chat__choose-location-btn[data-answered="true"],
.ai-chat__pick-dates-btn:disabled,
.ai-chat__pick-dates-btn[data-answered="true"] {
  cursor: default;
  opacity: 0.5;
  pointer-events: none;
}

.ai-chat__choose-location-btn[data-answered="true"] *,
.ai-chat__pick-dates-btn[data-answered="true"] * {
  pointer-events: none;
}

/* Hidden native date input — positioned under button for browser picker */
.ai-chat__date-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

/* ============================================================
   AI LOCATION POPUP — Figma node 266:8737
   ============================================================ */

/* Backdrop */
.ai-location-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9998;
}

/* Popup container */
.ai-location-popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  width: 520px;
  max-width: 95vw;
  max-height: 80vh;
  overflow: hidden;
  flex-direction: column;

  background: #1a1a1a;
  border: 1px solid #383838;
  border-radius: 8px;
  box-shadow: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
}

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

/* Search bar */
.ai-location-popup__search-wrap {
  background: #1a1a1a;
  padding: 12px 12px 1px 12px;
  flex-shrink: 0;
}

.ai-location-popup__search-box {
  position: relative;
  height: 38px;
}

.ai-location-popup__search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.ai-location-popup__search-input {
  width: 100%;
  height: 38px;
  background: #262626;
  border: none;
  border-radius: 8px !important;
  padding: 8px 12px 8px 36px;
  font-family: 'Neue', sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.1504px;
  color: #d9d9d9;
  outline: none;
  box-sizing: border-box;
}

.ai-location-popup__search-input::placeholder {
  color: var(--vw-placeholder, #999999);
}

/* Scrollable body */
.ai-location-popup__body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ai-location-popup__body::-webkit-scrollbar {
  width: 4px;
}
.ai-location-popup__body::-webkit-scrollbar-track {
  background: #262626;
}
.ai-location-popup__body::-webkit-scrollbar-thumb {
  background: #383838;
  border-radius: 2px;
}

/* -----------------------------------------------------------------------------
   Location picker (Figma 9771:58354) — x-ai-chat.location-picker
   Purpose-built for the popup. Replaces the previous ~130 lines of !important
   overrides that reshaped the PLP listing-sidebar accordion into this layout.
   ----------------------------------------------------------------------------- */
.ai-loc {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ai-loc__group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ai-loc__country {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  margin: 0;
}

.ai-loc__flag {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.ai-loc__country-name {
  font-family: 'Neue', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.1504px;
  color: #ffffff;
  white-space: nowrap;
}

.ai-loc__cities {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ai-loc__city-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.ai-loc__city-label {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 8px 12px;
  background: #383838;
  border: 1px solid #4f4f4f;
  border-radius: 8px;
  font-family: 'Neue', sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 24px;
  color: #d9d9d9;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  box-sizing: border-box;
}

.ai-loc__city-label:hover {
  background: #4f4f4f;
  border-color: #595959;
}

.ai-loc__city-input:checked + .ai-loc__city-label {
  background: #212301;
  border-color: #7e8500;
  color: #e0e846;
}

/* Keyboard focus has to be visible because the input itself is offscreen */
.ai-loc__city-input:focus-visible + .ai-loc__city-label {
  outline: 2px solid #7e8500;
  outline-offset: 2px;
}

.ai-loc__no-results {
  font-family: 'Neue', sans-serif;
  font-size: 13px;
  color: #757575;
  margin: 0;
}

/* Footer */
.ai-location-popup__footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 65px;
  padding: 1px 16px 0;
  background: #1a1a1a;
  border-top: 1px solid #262626;
  border-radius: 0 0 8px 8px;
}

.ai-location-popup__cancel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-family: 'Neue', sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
  color: #a8a8a8;
  cursor: pointer;
}

.ai-location-popup__cancel-btn:hover {
  color: #d9d9d9;
}

.ai-location-popup__confirm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  padding: 10px 14px;
  background: #c8d200;
  border: none;
  border-radius: 8px;
  font-family: 'Neue', sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
  color: #1a1a1a;
  cursor: pointer;
  transition: background 0.15s;
  box-sizing: border-box;
}

.ai-location-popup__confirm-btn:hover {
  background: #d4df00;
}

/* Mobile-only header — hidden on desktop */
.ai-location-popup__header {
  display: none;
}

/* ============================================================
   AI LOCATION POPUP — Mobile bottom sheet
   ============================================================ */
@media (max-width: 767px) {
  .ai-location-popup {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    width: 100%;
    max-width: 100%;
    max-height: 85vh;
    border-radius: 16px 16px 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
  }

  /* Header — Figma node 366:13287: 347×40 content in 16px side padding, 12px top/bottom */
  .ai-location-popup__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    padding: 12px 16px;
    flex-shrink: 0;
    box-sizing: border-box;
  }

  /* Text node 366:13291 */
  .ai-location-popup__header-title {
    font-family: 'Neue', sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    color: #ffffff;
  }

  /* Button node 366:13293: 40×40px */
  .ai-location-popup__header-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
  }

  .ai-location-popup__footer {
    border-radius: 0;
    height: auto;
    padding: 16px 16px max(24px, env(safe-area-inset-bottom));
  }
}

/* ============================================================
   AI DATE PICKER POPUP — Figma node 266:8368
   Exact values from Figma MCP get_design_context
   ============================================================ */

/* Backdrop */
.ai-datepicker-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9998;
}

/* Popup container
   Figma: width=624px, height=534px, bg=#1a1a1a, border=#262626,
   border-radius=8px, shadow=0px 25px 50px -12px rgba(0,0,0,0.25) */
.ai-datepicker-popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  width: 624px;
  max-width: 95vw;
  flex-direction: column;
  background: #1a1a1a;
  border: 1px solid #262626;
  border-radius: 8px;
  box-shadow: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.ai-datepicker-popup[aria-hidden="false"] {
  display: flex;
}

/* ── Header (Figma node 266:8369)
   height=45px (1px border + 44px content area)
   pt=24px, pb=16px, px=16px
   bg=#1a1a1a ── */
.ai-datepicker-popup__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 24px 16px 16px 16px;
  background: #1a1a1a;
}

/* Figma: font=Neue Plak Regular, size=14px, line-height=20px,
   letter-spacing=-0.1504px, color=#ffffff */
.ai-datepicker-popup__title {
  font-family: 'Neue', sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.1504px;
  color: #ffffff;
}

/* Close button — x-close icon 16×16 (Figma node 266:8372) */
.ai-datepicker-popup__close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  line-height: 0;
}

/* ── Calendar body (Figma node 266:8373)
   pt=24px, px=24px, height=423px ── */
.ai-datepicker-popup__body {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-shrink: 0;
  padding: 24px 24px 0 24px;
  gap: 0;
  overflow: hidden;
}

/* ── Single calendar panel (Figma node 266:8374 / 266:8528)
   width=296px, height=388px, bg=#1a1a1a, border-radius=8px ── */
.ai-datepicker-popup__calendar {
  flex: 1;
  background: #1a1a1a;
  border-radius: 8px;
  padding: 0 16px 20px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Month navigation row (Figma node 266:8378)
   height=32px, justify-content=space-between ── */
.ai-datepicker-popup__month-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 32px;
  flex-shrink: 0;
}

/* Spacer keeps the label centred when only one nav arrow shows */
.ai-datepicker-popup__nav-spacer {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

/* Nav button — Figma: p=6px, rounded=6px, size=32×32 */
.ai-datepicker-popup__nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 6px;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  line-height: 0;
  transition: background 0.15s;
}

.ai-datepicker-popup__nav-btn:hover {
  background: #262626;
}

/* Month label — Figma: font=Neue Plak SemiBold, size=14px,
   line-height=20px, color=#d9d9d9, text-align=center */
.ai-datepicker-popup__month-label {
  font-family: 'Neue', sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  color: #d9d9d9;
  text-align: center;
  white-space: nowrap;
}

/* ── Calendar grid (Figma: 7 cols × 40px cells, gap=0)
   Day headers + date rows — all cells 40×40px ── */
.ai-datepicker-popup__grid {
  display: grid;
  grid-template-columns: repeat(7, 40px);
  gap: 0;
}

/* Cell base — Figma: size=40×40px, border-radius=20px */
.ai-datepicker-popup__cell {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* Day-of-week header text
   Figma: font=Neue Plak SemiBold, size=14px, line-height=20px,
   color=#a8a8a8, text-align=center */
.ai-datepicker-popup__cell--header {
  font-family: 'Neue', sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  color: #a8a8a8;
  text-align: center;
  cursor: default;
  border-radius: 0;
}

/* Date cell text — default (current month)
   Figma: font=Neue Plak Regular, size=14px, line-height=20px,
   color=#a8a8a8 */
.ai-datepicker-popup__cell--day {
  font-family: 'Neue', sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  color: #a8a8a8;
  cursor: pointer;
  border-radius: 20px;
  transition: background 0.12s;
  user-select: none;
}

/* Adjacent-month overflow days — Figma: color=#757575 */
.ai-datepicker-popup__cell--day.is-overflow {
  color: #757575;
  cursor: default;
  pointer-events: none;
}

/* Today highlight — Figma node 266:8410: bg=#383838, color=#a8a8a8 */
.ai-datepicker-popup__cell--day.is-today {
  background: #383838;
  color: #a8a8a8;
}

/* Hover on regular day cells */
.ai-datepicker-popup__cell--day:not(.is-overflow):not(.is-selected):hover {
  background: #262626;
}

/* Selected date — Figma node 266:8573 / 266:8585:
   outer bg=#353800 (brand/950), inner circle bg=#c8d200 (brand/b-500),
   font=Neue Plak SemiBold, color=#383838 (gray/800)
   We layer two backgrounds: the pill via box-shadow + the circle via bg */
.ai-datepicker-popup__cell--day.is-selected {
  background: #c8d200;
  border-radius: 20px;
  font-weight: 600;
  color: #383838;
}

/* "Today" ring when also selected */
.ai-datepicker-popup__cell--day.is-today.is-selected {
  background: #c8d200;
  color: #383838;
}

/* Days between the two range endpoints — Figma 9771:57983 shows the fill
   tinted rather than solid, so the endpoints stay readable as the endpoints */
.ai-datepicker-popup__cell--day.is-in-range {
  background: #353800;
  color: #e0e846;
  border-radius: 0;
}

/* ── Footer (Figma node 266:8641)
   height=65px, px=16px, pt=1px, bg=#1a1a1a,
   border-top=1px solid #262626, border-radius=0 0 8px 8px ── */
.ai-datepicker-popup__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  height: 65px;
  padding: 16px;
  background: #1a1a1a;
  border-top: 1px solid #262626;
  border-radius: 0 0 8px 8px;
}

/* Cancel button — Figma: px=14px, py=10px, font=Neue Plak Text Bold,
   size=14px, line-height=20px, color=#a8a8a8 */
.ai-datepicker-popup__cancel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-family: 'Neue', sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
  color: #a8a8a8;
  cursor: pointer;
}

.ai-datepicker-popup__cancel-btn:hover {
  color: #d9d9d9;
}

/* Confirm button — Figma: w=100px, px=14px, py=10px,
   bg=#c8d200 (brand/b-500), border-radius=8px,
   font=Neue Plak Text Bold, size=14px, line-height=20px, color=#1a1a1a */
.ai-datepicker-popup__confirm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  padding: 10px 14px;
  background: #c8d200;
  border: none;
  border-radius: 8px;
  font-family: 'Neue', sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
  color: #1a1a1a;
  cursor: pointer;
  transition: background 0.15s;
  box-sizing: border-box;
}

.ai-datepicker-popup__confirm-btn:hover {
  background: #d4df00;
}

/* Disabled confirm until a date is selected */
.ai-datepicker-popup__confirm-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Mobile-only next button: hidden on desktop */
.ai-datepicker-popup__nav-btn--mobile-next {
  display: none;
}

/* ── Mobile: bottom sheet, single calendar ── */
@media (max-width: 680px) {
  .ai-datepicker-popup {
    width: 100%;
    max-width: 100vw;
    max-height: 90vh;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    transform: none;
    border-radius: 16px 16px 0 0;
    overflow-y: auto;
  }

  /* Show only one calendar — hide right panel */
  #ai-cal-right {
    display: none;
  }

  /* Show the mobile-only next button, hide the spacer */
  .ai-datepicker-popup__nav-btn--mobile-next {
    display: flex;
  }

  .ai-datepicker-popup__nav-spacer {
    display: none;
  }

  .ai-datepicker-popup__body {
    flex-direction: column;
    padding: 16px 0 0 0;
    gap: 0;
    align-items: stretch;
  }

  #ai-cal-left {
    width: 100%;
  }

  .ai-datepicker-popup__month-nav {
    padding: 0 16px;
  }

  .ai-datepicker-popup__grid {
    grid-template-columns: repeat(7, 1fr);
    justify-items: center;
    padding: 0 16px;
    box-sizing: border-box;
    width: 100%;
  }

  .ai-datepicker-popup__cell {
    width: 100%;
    aspect-ratio: 1;
  }
}

/* =============================================================================
   HISTORY PANEL — slide-out from left sidebar
   ============================================================================= */

/* Parent layout needs position:relative for absolute child */
.ai-wise__layout {
  position: relative;
}

.ai-history-panel {
  position: absolute;
  top: 0;
  left: 64px;
  width: 0;
  height: 100%;
  background: #111111;
  border-right: 1px solid #262626;
  overflow: hidden;
  transition: width 0.22s ease;
  z-index: 50;
  display: flex;
  flex-direction: column;
}

.ai-history-panel--open {
  width: 260px;
}

.ai-history-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 12px 16px;
  /* border-bottom: 1px solid #262626; */
  flex-shrink: 0;
}

.ai-history-panel__title {
  /* An <h2> now, for document outline; the UA heading margins and size are
     replaced here so it looks exactly as it did as a <span>. */
  margin: 0;
  font-family: 'Neue', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0%;
  color: #E8E8E8;
  white-space: nowrap;
}

.ai-history-panel__close-btn {
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  transition: opacity 0.15s;
  flex-shrink: 0;
}

.ai-history-panel__close-btn:hover {
  opacity: 1;
}

.ai-history-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.ai-history-panel__body::-webkit-scrollbar {
  width: 4px;
}

.ai-history-panel__body::-webkit-scrollbar-thumb {
  background: #383838;
  border-radius: 4px;
}

.ai-sr-only {
  /* Available to a screen reader, invisible on screen, and it must not affect
     layout: display:none and visibility:hidden would remove it from the
     accessibility tree, which is the opposite of what it is for. The 1px clip
     rather than width:0 is what keeps some screen readers from skipping it. */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.ai-history-panel__list {
  /* The rows are a real <ul> now, so a screen reader announces the list and its
     length. Reset the marker and the UA padding so the rows look exactly as they
     did as bare siblings. */
  list-style: none;
  margin: 0;
  padding: 0;
}

.ai-history-panel__item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  background: transparent;
  border: none;
  padding: 10px 16px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}

.ai-history-panel__item:hover {
  background: #1a1a1a;
}

.ai-history-panel__item--active {
  background: #1a1a1a;
}

.ai-history-panel__item-title {
  font-size: 13px;
  font-weight: 500;
  color: #e8e8e8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 228px;
}

.ai-history-panel__item--active .ai-history-panel__item-title {
  color: #c8d200;
}

.ai-history-panel__item-preview {
  font-family: 'Neue', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0%;
  color: #A8A8A8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 228px;
}

.ai-history-panel__item-date {
  font-size: 11px;
  color: #4f4f4f;
}

.ai-history-panel__empty,
.ai-history-panel__loading {
  padding: 24px 16px;
  font-size: 13px;
  color: #757575;
  text-align: center;
}


/* =============================================================================
   AUTH GATE OVERLAY — Figma node 354:9474
   Shows over the chat when a guest user sees venue results.
   ============================================================================= */

/* Full-size overlay anchored to .ai-chat — hidden until JS adds .is-visible */
/* Figma: background #1A1A1A at 70% opacity + background blur 16 */
.ai-auth-gate {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 500;
  align-items: flex-start;
  justify-content: center;
  padding-top: 148px;
  padding-bottom: 32px;
  background: rgba(26, 26, 26, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow-y: auto;
}

.ai-auth-gate.is-visible {
  display: flex;
}

/* Backdrop div no longer needed for color/blur — kept as empty spacer */
.ai-auth-gate__backdrop {
  position: absolute;
  inset: 0;
}

/* White modal card: 520px wide, radius 16px, shadow */
.ai-auth-gate__modal {
  position: relative;
  z-index: 1;
  width: 520px;
  max-width: calc(100vw - 32px);
  background: #ffffff;
  border-radius: 16px;
  box-shadow:
    0px 20px 24px -4px rgba(10, 13, 18, 0.08),
    0px 8px 8px -4px rgba(10, 13, 18, 0.03),
    0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Reset text colors inherited from dark .ai-chat background */
  color: #212324;
}

/* Ensure all text inside the gate modal uses dark-on-white colors */
.ai-auth-gate__modal *:not(.error-message):not(.error-message *):not(.form-checkbox),
.ai-auth-gate__modal .auth-modal--content__header--title,
.ai-auth-gate__modal .auth-modal--content__header--description,
.ai-auth-gate__modal .auth-modal__switch--title,
.ai-auth-gate__modal .auth-modal--content--google-btn,
.ai-auth-gate__modal .auth-modal--content__form--forget-password-link {
  color: inherit;
}

/* Title: large dark bold text */
.ai-auth-gate__modal .auth-modal--content__header--title {
  color: #212324;
}

/* Description: slightly lighter */
.ai-auth-gate__modal .auth-modal--content__header--description {
  color: #595959;
}

/* Google button text */
.ai-auth-gate__modal .auth-modal--content--google-btn {
  color: #212324;
}

/* Hover: white text on both buttons */
.ai-auth-gate__modal .auth-modal--content__form--submit-btn:hover,
.ai-auth-gate__modal .auth-modal--content--google-btn:hover {
  color: #ffffff !important;
}

/* Forgot password link */
.ai-auth-gate__modal .auth-modal--content__form--forget-password-link {
  color: #212324;
}

/* Switch title (Don't have an account?) */
.ai-auth-gate__modal .auth-modal__switch--title {
  color: #212324;
}

/* 16px border-radius on modal container */
.ai-auth-gate__modal .dialog__container {
  border-radius: 16px;
  overflow: hidden;
}

/* 8px border-radius on inputs, buttons inside auth gate */
.ai-auth-gate__modal .auth-form__input-group {
  border-radius: 8px;
  overflow: hidden;
}
.ai-auth-gate__modal .auth-modal--content__form--submit-btn,
.ai-auth-gate__modal .auth-modal--content--google-btn {
  border-radius: 8px;
}

/* Header: Figma 354:9477/9478 — pt 24px, px 24px, gap 16px between icon and text, gap 2px between title and subtitle */
.ai-auth-gate__header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px 24px 20px;
  border-bottom: none;
}

.ai-auth-gate__google-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
}

.ai-auth-gate__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  width: 100%;
}

/* Title: Figma 354:9481 — 16px/24px SemiBold #262626 */
.ai-auth-gate__title {
  font-family: 'Neue', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #262626;
  margin: 0;
}

/* Subtitle: Figma 354:9482 — 14px/20px Regular #595959 */
.ai-auth-gate__subtitle {
  font-family: 'Neue', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #595959;
  margin: 0;
}

/* Actions: Figma 354:9486/9487 — pt 32px, px 24px, pb 24px, gap 12px */
.ai-auth-gate__actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px 24px 24px;
}

/* Shared button base */
.ai-auth-gate__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  font-family: 'Neue Text', 'Neue', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: opacity 0.15s ease;
}

.ai-auth-gate__btn:hover {
  opacity: 0.88;
}

/* "Continue with Google": Figma 354:9488 — #1a1a1a bg, white text */
.ai-auth-gate__btn--google {
  background: #1a1a1a;
  color: #ffffff;
}

/* "Try another way": Figma 354:9489 — white bg, 1px #d9d9d9 border, #4f4f4f text */
.ai-auth-gate__btn--other {
  background: #ffffff;
  border: 1px solid #d9d9d9;
  color: #4f4f4f;
  font: inherit;
}

/* Primary sign-in button inside gate */
.ai-auth-gate__btn--primary {
  background: #c8d200;
  color: #111111;
  border: none;
  font-family: 'Neue Text', 'Neue', sans-serif;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.ai-auth-gate__btn--primary:hover { opacity: 0.88; }

@media (max-width: 767px) {
  .ai-history-panel {
    display: none;
  }
}

/* ── Mobile: ai-auth-gate as bottom sheet ── */
@media (max-width: 680px) {
  .ai-auth-gate {
    position: fixed;
    align-items: flex-end;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
    overflow-y: hidden;
  }

  .ai-auth-gate__modal {
    width: 100%;
    max-width: 100%;
    max-height: 92dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18);
  }

  .ai-auth-gate__modal .dialog__container {
    overflow: visible;
  }

}

/* =============================================================================
   CONFIRMATION CARD — shown when auto_continue === true
   Applied filters appear as label: value rows before venues load.
   ============================================================================= */

.ai-chat__confirm-filters {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 12px;
}

.ai-chat__confirm-filter-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: 'Neue', sans-serif;
  font-size: 14px;
  line-height: 1.6;
}

.ai-chat__confirm-filter-label {
  color: #6b6b6b;
  font-weight: 400;
  min-width: 80px;
  flex-shrink: 0;
}

.ai-chat__confirm-filter-value {
  color: #e8e8e8;
  font-weight: 400;
  white-space: nowrap;
}


/* Quick actions reuse the answer-widget chip component wholesale
   (.ai-chat__venue-chips holding .ai-chat__chip, the same markup the city and
   capacity widgets use). They are the first chips that can be in flight, so a
   disabled state is the only thing the component was missing. */
.ai-chat__chip:disabled {
  opacity: 0.45;
  cursor: default;
}

.ai-chat__chip:disabled:hover {
  border: 0.5px solid #4f4f4f;
  background: #1a1a1a;
}


/* =========================================================
   VOICE INPUT
   Built on the existing composer rather than beside it: the voice bar repeats
   .ai-chat__input-bar's background, border, radius and 56px resting height so
   swapping one for the other reads as the same control changing mode. No
   overlay, no card, no browser audio chrome.
   ========================================================= */

/* Microphone, in the composer next to Send. Ghost by default so Send keeps the
   only accent in the bar and the visual hierarchy is unchanged. */
.ai-chat__mic-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 8px;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  box-sizing: border-box;
  color: #a3a3a3;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.ai-chat__mic-btn:hover {
  background: #262626;
  color: #e8e8e8;
}

.ai-chat__mic-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ai-chat__mic-btn:disabled:hover {
  background: transparent;
  color: #a3a3a3;
}

/* [hidden] has to be spelled out for every one of these.
   The user agent's `[hidden] { display: none }` is an attribute selector, so any
   class rule setting `display` outranks it -- which is exactly the case for
   .ai-chat__input-bar (display: flex) and for the flex rules above. Without
   these, hiding the composer to show the voice bar left BOTH on screen, and an
   unsupported browser still painted a microphone it could never use. */
.ai-chat__mic-btn[hidden],
.ai-chat__input-bar[hidden],
.ai-chat__voice-bar[hidden],
.ai-chat__voice-error[hidden] {
  display: none !important;
}

.ai-chat__voice-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;             /* matches the resting composer, so no jump */
  background: #1a1a1a;
  border: 1px solid #262626;
  border-radius: 12px;
  padding: 8px;
  box-sizing: border-box;
}

.ai-chat__voice-spacer {
  flex: 1;
  min-width: 0;
}

.ai-chat__voice-timer {
  font-family: 'Neue', sans-serif;
  font-size: 15px;
  line-height: 24px;
  color: #e8e8e8;
  /* Tabular figures so the width does not shift every tick and nudge the
     controls sideways while the seconds climb. */
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.ai-chat__voice-label {
  font-family: 'Neue', sans-serif;
  font-size: 14px;
  line-height: 24px;
  color: #a3a3a3;
  flex-shrink: 0;
}

/* The recording indicator is never colour alone: the dot is paired with the
   "Recording" label and the aria-live status text. */
.ai-chat__voice-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff5c5c;
  flex-shrink: 0;
  margin-left: 4px;
  animation: ai-voice-pulse 1.4s ease-in-out infinite;
}

@keyframes ai-voice-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-chat__voice-dot { animation: none; }
}

/* Visually hidden, still announced. */
.ai-chat__voice-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.ai-chat__voice-icon-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 8px;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  box-sizing: border-box;
  color: #a3a3a3;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.ai-chat__voice-icon-btn:hover {
  background: #262626;
  color: #e8e8e8;
}

/* The play control holds both glyphs and shows one. Without this the button
   painted a play triangle and a pause bar side by side. */
.ai-chat__voice-play-btn .ai-chat__voice-pause-icon,
.ai-chat__voice-play-btn--playing .ai-chat__voice-play-icon {
  display: none;
}

.ai-chat__voice-play-btn--playing .ai-chat__voice-pause-icon {
  display: block;
}

/* Stop and Send are the primary action of their state, so they carry the same
   accent the active Send button uses. */
.ai-chat__voice-stop-btn,
.ai-chat__voice-send-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 8px;
  background: #e0e846;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  box-sizing: border-box;
  color: #111111;
  cursor: pointer;
  transition: background 0.15s;
}

.ai-chat__voice-stop-btn:hover,
.ai-chat__voice-send-btn:hover {
  background: #eef291;
}

.ai-chat__voice-send-btn:disabled,
.ai-chat__voice-stop-btn:disabled {
  background: #383838;
  cursor: not-allowed;
}

/* Keyboard focus stays visible on every voice control. */
.ai-chat__mic-btn:focus-visible,
.ai-chat__voice-icon-btn:focus-visible,
.ai-chat__voice-stop-btn:focus-visible,
.ai-chat__voice-send-btn:focus-visible {
  outline: 2px solid #e0e846;
  outline-offset: 2px;
}

/* --- Per-state visibility -------------------------------------------------
   Everything is hidden by default and opted back in per state, so a control
   can only ever be visible in a state that explicitly lists it. */
.ai-chat__voice-bar > .ai-chat__voice-icon-btn,
.ai-chat__voice-bar > .ai-chat__voice-stop-btn,
.ai-chat__voice-bar > .ai-chat__voice-send-btn,
.ai-chat__voice-bar > .ai-chat__voice-dot,
.ai-chat__voice-bar > .ai-chat__voice-label,
.ai-chat__voice-bar > .ai-chat__voice-timer {
  display: none;
}

.ai-chat__voice-bar[data-state="recording"] > #ai-voice-cancel-btn,
.ai-chat__voice-bar[data-state="recording"] > #ai-voice-stop-btn,
.ai-chat__voice-bar[data-state="recorded"] > #ai-voice-play-btn,
.ai-chat__voice-bar[data-state="recorded"] > #ai-voice-delete-btn,
.ai-chat__voice-bar[data-state="recorded"] > #ai-voice-send-btn,
.ai-chat__voice-bar[data-state="uploading"] > #ai-voice-send-btn {
  display: flex;
}

.ai-chat__voice-bar[data-state="recording"] > .ai-chat__voice-dot,
.ai-chat__voice-bar[data-state="recording"] > .ai-chat__voice-label,
.ai-chat__voice-bar[data-state="uploading"] > .ai-chat__voice-label {
  display: block;
}

.ai-chat__voice-bar[data-state="recording"] > .ai-chat__voice-timer,
.ai-chat__voice-bar[data-state="recorded"] > .ai-chat__voice-timer,
.ai-chat__voice-bar[data-state="uploading"] > .ai-chat__voice-timer {
  display: block;
}

/* Uploading: the recording is committed, so nothing is cancellable and the
   only live affordance is the disabled Send showing work in progress. */
.ai-chat__voice-bar[data-state="uploading"] > #ai-voice-send-btn {
  background: #383838;
  cursor: default;
}

.ai-chat__voice-error {
  margin: 8px 0 0;
  font-family: 'Neue', sans-serif;
  font-size: 13px;
  line-height: 18px;
  color: #ffb4b4;
}

@media (max-width: 420px) {
  /* The dot plus the timer already say "recording"; the word is the first
     thing to go when the bar gets tight. */
  .ai-chat__voice-bar[data-state="recording"] > .ai-chat__voice-label {
    display: none;
  }
}