/* Ekin Match (AI Search) page-specific styles. Everything else (workspace,
   filter form, dialogs, listing cards, map) is the unmodified Search Homes
   experience from home-search.css -- this file only styles the compact hero,
   the interpretation panel, and the desktop list+map split this page adds. */

/* Language choice is an overlay inside the existing header flow: it does
   not add header height or move the approved hero/search layout. */
.ai-search-page .site-header nav { gap: 34px; }
/* Same breathing room as the other pages' headers, a little tighter where the
   desktop header is narrow. (Phones keep their own compact gap below.) */
@media (min-width: 901px) and (max-width: 1280px) { .ai-search-page .site-header nav { gap: 20px; } }
/* "Schedule Meeting" is a filled gold button on this page so it stands out
   on the dark header (it was only gold on hover). styles.css sets these with
   !important, so this page-scoped override has to as well. */
.ai-search-page .site-header nav .header-cta { background: var(--gold) !important; border-color: var(--gold) !important; color: #10282e !important; font-weight: 700; }
.ai-search-page .site-header nav .header-cta > span { color: #10282e !important; }
.ai-search-page .site-header nav .header-cta:hover, .ai-search-page .site-header nav .header-cta:focus, .ai-search-page .site-header nav .header-cta:focus-visible, .ai-search-page .site-header nav .header-cta:active { background: #e6bd62 !important; border-color: #e6bd62 !important; color: #10282e !important; }
.ai-search-page .site-header nav .header-cta:focus-visible { outline: 2px solid #f6d480; outline-offset: 3px; }
.ekin-language-picker { position: relative; text-transform: none; letter-spacing: 0; }
.ekin-language-button { min-height: 42px; display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px; border: 1px solid rgba(255,255,255,.26); border-radius: 999px; background: rgba(0,0,0,.08); color: white; font-size: 12px; font-weight: 650; }
.ekin-language-button:hover, .ekin-language-button:focus-visible, .ekin-language-button[aria-expanded="true"] { border-color: var(--gold); background: rgba(0,0,0,.2); }
#ekin-language-flag { font-size: 17px; line-height: 1; }
.ekin-language-chevron { color: var(--gold); font-size: 14px; line-height: 1; }
.ekin-language-menu { position: absolute; z-index: 100; top: calc(100% + 8px); right: 0; width: 218px; padding: 8px; border: 1px solid rgba(23,54,59,.12); border-radius: 12px; background: #fff; color: var(--search-ink, #15383e); box-shadow: 0 18px 42px rgba(0,20,24,.24); }
.ekin-language-menu[hidden] { display: none; }
.ekin-language-menu button { width: 100%; min-height: 38px; display: grid; grid-template-columns: 26px 1fr 20px; align-items: center; gap: 7px; padding: 7px 9px; border: 0; border-radius: 8px; background: transparent; color: inherit; text-align: left; font-size: 13px; font-weight: 650; }
.ekin-language-menu button:hover, .ekin-language-menu button:focus-visible { background: #f8f3e8; }
.ekin-language-menu button[aria-checked="true"] { background: #f8f3e8; }
.ekin-language-check { visibility: hidden; color: var(--search-teal, #0b4b53); text-align: center; }
.ekin-language-menu button[aria-checked="true"] .ekin-language-check { visibility: visible; }

.ekin-match-hero { position: relative; color: white; background: linear-gradient(90deg, #00232aeb 0%, #00232ac2 45%, #00232a80 100%), url('/assets/search-hero-sunset.webp') center 55%/cover; }
.ekin-match-back { position: relative; z-index: 1; margin: 18px 5vw 0; }
.ekin-match-hero .search-hero-inner { padding: 14px 5vw 30px; max-width: 1100px; margin: 0; }
.ekin-match-hero .kicker { margin: 0 0 10px; color: #f6d480; font-size: 11px; letter-spacing: .22em; }
.ekin-match-hero h1 { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(32px, 3.4vw, 46px); font-weight: 500; line-height: 1.05; margin: 0; }
.ekin-match-hero h1 em { color: #f2cb75; font-weight: 500; font-style: italic; }
.ekin-match-hero .search-hero-subtitle { font-size: 15px; line-height: 1.6; margin: 12px 0 18px; max-width: 640px; color: rgba(255,255,255,.88); }
.ekin-match-hero .search-hero-signoff { position: absolute; bottom: 18px; right: 5vw; margin: 0; font-family: Georgia, serif; font-style: italic; text-align: center; font-size: 18px; text-shadow: 0 2px 10px #003039; opacity: .85; }
.ekin-match-hero .search-hero-signoff span { display: block; font-family: Arial, sans-serif; font-size: 8px; font-style: normal; letter-spacing: .3em; margin-top: 6px; }
/* The glass card holding the greeting and the search box. A small circular
   spark badge sits centered on its top edge, echoing the sparkle already
   used elsewhere on this page's own search boxes. */
.ekin-match-card { position: relative; max-width: 860px; margin: 20px 0 0; padding: 30px 28px 24px; background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.05)); border: 1px solid rgba(255,255,255,.24); border-radius: 22px; box-shadow: 0 24px 60px rgba(0,19,22,.55), inset 0 1px 0 rgba(255,255,255,.12); -webkit-backdrop-filter: blur(16px) saturate(125%); backdrop-filter: blur(16px) saturate(125%); }
.ekin-match-card-spark { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: #10282e; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; color: #f2cb75; font-size: 15px; }
/* Conversation history stays compact inside the existing glass card. Mila's
   avatar marks the AI assistant's messages; her first message's label says
   "Mila · AI Assistant" and every later one just "Mila". */
/* The conversation scrolls once it grows, so it takes keyboard focus to be
   scrolled with the arrow keys. */
.ekin-match-conversation:focus-visible { outline: 2px solid #f2cb75; outline-offset: 4px; border-radius: 12px; }
.ekin-match-conversation { display: flex; flex-direction: column; gap: 12px; min-height: 120px; max-height: min(600px, 62vh); margin: 0 0 16px; padding-right: 4px; overflow-y: auto; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: #d9ad4f55 transparent; }
.ekin-match-message { display: flex; align-items: flex-end; gap: 10px; max-width: 92%; }
.ekin-match-message--assistant { align-self: flex-start; }
.ekin-match-message--user { align-self: flex-end; flex-direction: row-reverse; }
/* The artwork carries its own thin gold ring, so no border is added here
   (scripts/build-mila-avatar.js crops each size to that ring). The frame
   holds the avatar's state ring (renderMilaState in ai-search-ui.js):
   nothing while idle, a soft steady glow while the microphone listens, a
   gentle gold pulse while her reply plays, and never otherwise. */
.ekin-match-avatar-frame { position: relative; flex: none; display: block; width: 56px; height: 56px; border-radius: 50%; }
.ekin-match-message--intro .ekin-match-avatar-frame { width: 80px; height: 80px; }
.ekin-match-avatar { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 6px 18px #00131666; }
.ekin-match-avatar-frame::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; pointer-events: none; transition: box-shadow .3s; }
.ekin-match-avatar-frame[data-state='listening']::after { box-shadow: 0 0 14px 1px rgba(242,203,117,.38); }
.ekin-match-avatar-frame[data-state='thinking']::after { box-shadow: 0 0 0 2px rgba(242,203,117,.24); }
.ekin-match-avatar-frame[data-state='speaking']::after { animation: mila-speaking 1.8s ease-in-out infinite; }
@keyframes mila-speaking { 0%, 100% { box-shadow: 0 0 0 0 rgba(242,203,117,.12), 0 0 10px rgba(242,203,117,.2); } 50% { box-shadow: 0 0 0 4px rgba(242,203,117,.28), 0 0 20px rgba(242,203,117,.42); } }
@media (prefers-reduced-motion: reduce) { .ekin-match-avatar-frame::after { transition: none; } .ekin-match-avatar-frame[data-state='speaking']::after { animation: none; box-shadow: 0 0 0 3px rgba(242,203,117,.3), 0 0 16px rgba(242,203,117,.38); } }
.ekin-match-bubble { padding: 11px 14px; background: #ffffff1a; border: 1px solid rgba(255,255,255,.25); border-radius: 15px 15px 15px 4px; }
.ekin-match-message--user .ekin-match-bubble { background: #e2b14c; border-color: #f2cb75; border-radius: 15px 15px 4px 15px; color: #052d35; }
.ekin-match-speaker { display: block; margin-bottom: 4px; color: #f2cb75; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ekin-match-message--user .ekin-match-speaker { color: #24454a; text-align: right; }
.ekin-match-bubble p { margin: 0; font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.94); white-space: pre-wrap; }
.ekin-match-message--user .ekin-match-bubble p { color: #052d35; }
.ekin-match-thinking { margin: -5px 0 14px; }
.ekin-match-thinking .ekin-match-bubble p { color: rgba(255,255,255,.72); }
/* The listings' attribution and the MLS/IDX Disclosures link under a reply
   about results (English, as in the disclosures strip under the results). */
.ekin-match-bubble .ekin-match-disclosure { margin-top: 8px; padding-top: 7px; border-top: 1px solid rgba(255,255,255,.18); font-size: 11.5px; line-height: 1.5; color: rgba(255,255,255,.78); white-space: normal; text-align: left; }
.ekin-match-disclosure a { color: #f2cb75; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.ekin-match-disclosure a:focus-visible { outline: 2px solid #f2cb75; outline-offset: 2px; border-radius: 2px; }
/* Typing indicator while a conversational reply is on its way. */
.ekin-typing { display: inline-flex; align-items: center; gap: 5px; height: 1.55em; }
.ekin-typing i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.72); animation: ekin-typing 1.2s ease-in-out infinite; }
.ekin-typing i:nth-child(2) { animation-delay: .15s; } .ekin-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes ekin-typing { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .ekin-typing i { animation: none; } }
.ekin-match-form { max-width: none; }
/* The composer: a big message box, then one slim toolbar with the "Talk to
   Mila" control, the AI voice replies switch, and a single Send button.
   Overrides .hero-search-form's shared row layout (home-search.css) here
   only. */
.ekin-match-form.hero-search-form { display: block; background: transparent; border: 0; padding: 0; box-shadow: none; }
.ekin-match-composer { display: flex; flex-direction: column; gap: 12px; }
.ekin-match-form textarea { width: 100%; min-height: 112px; max-height: 220px; padding: 16px 18px; border: 1px solid rgba(255,255,255,.26); border-radius: 14px; background: rgba(255,255,255,.08); color: white; font-size: 16px; line-height: 1.5; resize: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ekin-match-form textarea::placeholder { color: rgba(255,255,255,.58); }
.ekin-match-form textarea:focus-visible { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(242,203,117,.18); }
.ekin-match-toolbar { display: flex; align-items: center; gap: 12px; }
.ekin-match-form .ekin-match-send { flex: none; width: auto; min-height: 48px; margin-left: auto; display: inline-flex; align-items: center; gap: 9px; padding: 0 24px; border-radius: 12px; font-size: 14px; font-weight: 700; }
.ekin-match-send svg { width: 17px; height: 17px; }
/* A live, client-side-only preview of what Ekin Match currently understands
   from the typed text -- purely cosmetic (aria-hidden, no remove buttons).
   The authoritative, editable version of this same information is the
   accessible "Here's what I understood" panel below, shown only once a
   real search has actually run. Its row is always reserved so typing
   never makes the panel jump. */
.ekin-match-live-slot { display: flex; align-items: flex-start; min-width: 0; height: 31px; overflow: hidden; }
.ekin-match-live-chips { display: flex; flex-wrap: nowrap; gap: 8px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.ekin-match-live-chips::-webkit-scrollbar { display: none; }
.ekin-match-live-chip { border: 1px solid var(--gold); color: #f2cb75; background: #f2cb751a; border-radius: 999px; padding: 6px 12px; font-size: 11px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
/* "Talk to Mila": the whole ring-and-label area is one button. The ring stays
   still while idle and only moves while really recording, working or
   speaking. */
.ekin-match-form .ekin-talk { flex: none; width: auto; min-height: 48px; display: inline-flex; align-items: center; gap: 12px; padding: 4px 16px 4px 4px; border: 1px solid rgba(242,203,117,.35); border-radius: 999px; background: rgba(0,0,0,.14); color: #f7f1e4; font: inherit; text-align: left; cursor: pointer; }
.ekin-talk:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ekin-talk-ring { width: 42px; height: 42px; display: grid; place-items: center; border: 1.5px solid rgba(242,203,117,.72); border-radius: 50%; color: #f2cb75; background: radial-gradient(circle, rgba(242,203,117,.12), rgba(242,203,117,0) 70%); box-shadow: 0 0 0 5px rgba(242,203,117,.05), 0 0 18px rgba(242,203,117,.1); transition: border-color .2s, box-shadow .2s, background-color .2s; }
.ekin-talk-ring svg { width: 19px; height: 19px; }
.ekin-talk:hover { border-color: var(--gold); }
.ekin-talk:hover .ekin-talk-ring, .ekin-talk:focus-visible .ekin-talk-ring { border-color: var(--gold); box-shadow: 0 0 0 7px rgba(242,203,117,.09), 0 0 30px rgba(242,203,117,.2); }
.ekin-talk-text { display: flex; flex-direction: column; gap: 1px; }
.ekin-talk-label { color: #f6d480; font-size: 14px; font-weight: 650; }
.ekin-talk-hint { color: rgba(255,255,255,.66); font-size: 11.5px; }
.ekin-talk-hint[hidden] { display: none; }
.ekin-talk[data-state='listening'] .ekin-talk-ring { background: var(--gold); color: var(--search-ink); animation: ekin-talk-pulse 1.6s ease-out infinite; }
.ekin-talk:is([data-state='processing'], [data-state='thinking'], [data-state='finding'], [data-state='speaking']) .ekin-talk-ring { border-color: var(--gold); animation: ekin-talk-breathe 1.8s ease-in-out infinite; }
.ekin-talk:disabled { cursor: progress; }
.ekin-talk[data-state='unsupported'] { cursor: not-allowed; opacity: .55; }
@keyframes ekin-talk-pulse { 0% { box-shadow: 0 0 0 0 rgba(242,203,117,.45); } 100% { box-shadow: 0 0 0 12px rgba(242,203,117,0); } }
@keyframes ekin-talk-breathe { 0%, 100% { box-shadow: 0 0 0 7px rgba(242,203,117,.05), 0 0 18px rgba(242,203,117,.1); } 50% { box-shadow: 0 0 0 7px rgba(242,203,117,.12), 0 0 32px rgba(242,203,117,.28); } }
.ekin-match-voice-status { color: #f6d480; font-size: 12px; font-weight: 650; letter-spacing: .02em; }
.ekin-match-voice-status[hidden] { display: none; }
/* Voice in a social app's own browser: how to talk in Safari or Chrome
   instead (ai-search-ui.js). Typing to Mila stays right above it. */
.ekin-talk[data-state='unsupported']:not(:disabled) { cursor: pointer; }
.ekin-voice-help { padding: 14px 16px; border: 1px solid rgba(242,203,117,.45); border-radius: 12px; background: rgba(0,0,0,.18); color: #f7f1e4; font-size: 13px; line-height: 1.5; scroll-margin-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
.ekin-voice-help[hidden] { display: none; }
.ekin-voice-help p { margin: 0 0 8px; }
.ekin-voice-help-title { color: #f6d480; font-weight: 700; }
.ekin-voice-help-steps { color: rgba(255,255,255,.8); }
.ekin-voice-help-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.ekin-voice-help-actions button { min-height: 44px; padding: 0 18px; border-radius: 999px; font: inherit; font-weight: 650; cursor: pointer; }
.ekin-voice-help-copy { border: 0; background: var(--gold); color: var(--search-ink); }
.ekin-voice-help-close { border: 1px solid rgba(255,255,255,.3); background: transparent; color: #f7f1e4; }
.ekin-voice-help .ekin-voice-help-status { margin: 10px 0 0; color: #f6d480; font-weight: 600; overflow-wrap: anywhere; }
.ekin-voice-help-status:empty { display: none; }
.ekin-voice-help-status a { color: #fff; text-decoration: underline; }
/* AI voice replies: a compact switch, secondary to "Talk to Mila". */
.ekin-match-compose-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-width: 0; }
.ekin-match-form .ekin-voice-toggle { width: auto; min-height: 48px; display: inline-flex; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; background: rgba(0,0,0,.14); color: #f7f1e4; font-size: 13px; font-weight: 600; }
.ekin-voice-toggle[hidden] { display: none; }
.ekin-voice-toggle:hover, .ekin-voice-toggle:focus-visible { border-color: var(--gold); }
.ekin-voice-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ekin-voice-icon { width: 18px; height: 18px; color: #f2cb75; opacity: .7; }
.ekin-switch { position: relative; flex: none; width: 36px; height: 20px; border-radius: 999px; background: rgba(255,255,255,.2); transition: background-color .2s; }
.ekin-switch span { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s; }
.ekin-voice-state { min-width: 2.6em; color: rgba(255,255,255,.7); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; text-align: left; }
.ekin-voice-toggle[aria-checked='true'] { border-color: rgba(242,203,117,.55); }
.ekin-voice-toggle[aria-checked='true'] .ekin-voice-icon { opacity: 1; }
.ekin-voice-toggle[aria-checked='true'] .ekin-switch { background: var(--gold); }
.ekin-voice-toggle[aria-checked='true'] .ekin-switch span { transform: translateX(16px); }
.ekin-voice-toggle[aria-checked='true'] .ekin-voice-state { color: #f6d480; }
.ekin-match-form .ekin-voice-stop { width: auto; min-height: 48px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border: 1px solid var(--gold); border-radius: 999px; background: rgba(0,0,0,.15); color: #f6d480; font-size: 12px; font-weight: 650; }
.ekin-voice-stop[hidden] { display: none; }
.ekin-voice-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.ekin-voice-bars i { width: 3px; height: 100%; border-radius: 2px; background: currentColor; animation: ekin-voice-bar 0.9s ease-in-out infinite; }
.ekin-voice-bars i:nth-child(2) { animation-delay: .15s; } .ekin-voice-bars i:nth-child(3) { animation-delay: .3s; }
.ekin-voice-stop[data-mode='play'] .ekin-voice-bars i { animation: none; height: 45%; }
@keyframes ekin-voice-bar { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .ekin-voice-bars i, .ekin-talk-ring { animation: none !important; } .ekin-voice-bars i { height: 60%; } }
@media (max-width: 900px) {
  .ai-search-page .site-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 10px 5vw !important;
  }
  .ai-search-page .site-header .brand { flex: 1 1 auto; min-width: 0; }
  .ai-search-page .site-header nav {
    display: flex !important;
    grid-template-columns: none !important;
    flex: 0 0 auto;
    width: auto !important;
    gap: 7px !important;
  }
  /* Five pills with Resources: the menu takes its own row under the brand
     (the language choice stays at the top right) and wraps on the narrowest
     phones instead of running off the screen. */
  .ai-search-page .site-header { flex-wrap: wrap !important; }
  .ai-search-page .site-header nav { flex: 1 1 100% !important; flex-wrap: wrap !important; justify-content: center; row-gap: 8px !important; }
  .ai-search-page .ekin-language-picker { width: auto; }
  .ekin-language-button {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    justify-content: center;
  }
  .ekin-language-button #ekin-language-current { display: none; }
  .ekin-language-menu { position: fixed; top: calc(70px + env(safe-area-inset-top)); right: 4vw; width: min(260px, 92vw); max-height: calc(100vh - 90px); max-height: calc(100dvh - 90px); overflow-y: auto; }
  .ekin-match-card { padding: 26px 20px 20px; }
}
/* Phones: no five pills fit one row in any language, so three sit over two,
   each row filling the width. */
@media (max-width: 600px) {
  .ai-search-page .site-header nav { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 8px 7px !important; }
  .ai-search-page .site-header nav > * { grid-column: span 2; min-width: 0; }
  .ai-search-page .site-header nav > a[href="/about-ekin"], .ai-search-page .site-header nav > .nav-menu--resources { grid-column: span 3; }
  .ai-search-page .site-header nav > a, .ai-search-page .site-header nav .nav-menu-toggle { width: 100%; justify-content: center; }
}
/* The narrowest phones: Compradores / Покупателям fit their third of the row. */
@media (max-width: 359px) {
  .ai-search-page .site-header nav > a, .ai-search-page .site-header nav .nav-menu-toggle { letter-spacing: .02em !important; padding-inline: 4px !important; }
}
@media (max-width: 560px) {
  .ekin-language-button .ekin-language-chevron { display: none; }
  .ai-search-page .site-header .mobile-brand-logo { width: 44px; height: 44px; flex-basis: 44px; }
  .ai-search-page .site-header .mobile-brand-legacy .brand-copy small { display: none; }
}
/* Desktop already shows the permanent list+map split (see the map-mode
   override below), so this toggle would be redundant there; it only matters
   on mobile/tablet, which has one active panel at a time and needs an
   explicit way to reach the map -- exactly the site's existing Grid/List/Map
   pattern, just relocated into this page's own compact hero. */
.ekin-match-map-toggle { display: inline-flex; width: auto; min-height: 38px; margin-top: 14px; padding: 0 16px; font-size: 10px; background: transparent; }
@media (min-width: 901px) { .ekin-match-map-toggle { display: none; } }

.ekin-match-understood { max-width: 1500px; margin: 22px auto 0; padding: 0 5vw; }
/* A real, structured question from the backend (an ambiguous place, or a
   distance/drive-time choice) -- distinct from the purely cosmetic live
   preview chips above, since answering it actually changes the search. */
.ekin-match-clarification { margin: 0 0 16px; padding: 14px 16px; background: #fbf3e0; border: 1px solid #e7cd8c; border-radius: 12px; }
.ekin-match-clarification p { margin: 0 0 10px; font-size: 13.5px; font-weight: 600; color: var(--search-ink); }
.ekin-match-confirmation-summary { padding: 10px 12px; border-left: 3px solid var(--gold); background: #fffaf0; line-height: 1.5; }
.ekin-match-clarification-options { display: flex; flex-wrap: wrap; gap: 8px; }
.ekin-match-clarification-options button { border: 1px solid var(--search-teal); border-radius: 999px; background: white; color: var(--search-teal); font-size: 12px; font-weight: 600; padding: 7px 14px; min-height: 0; width: auto; }
.ekin-match-clarification-options button:hover, .ekin-match-clarification-options button:focus-visible { background: var(--search-teal); color: white; }
.understood-heading { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.understood-heading h2 { font-family: 'Playfair Display', Georgia, serif; font-size: 22px; font-weight: 500; margin: 0; color: var(--search-ink); }
.understood-heading p { font-size: 12.5px; color: #5c6b6e; margin: 6px 0 0; }
.refine-search-form { display: flex; align-items: center; gap: 8px; border: 1px solid var(--search-line); border-radius: 24px; padding: 4px 4px 4px 14px; background: white; min-width: 260px; }
.refine-search-form input { border: 0; outline: 0; flex: 1; font-size: 13px; padding: 8px 0; background: transparent; color: var(--search-ink); }
.refine-search-form button { border: 0; border-radius: 50%; width: 32px; height: 32px; background: var(--search-teal); color: white; font-size: 14px; display: flex; align-items: center; justify-content: center; flex: none; }
.refine-search-form button:hover, .refine-search-form button:focus-visible { background: var(--gold); color: var(--search-ink); }
.understood-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.understood-chip { display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--search-line); border-radius: 10px; background: white; padding: 10px 12px; min-width: 150px; }
.understood-chip--preference { border-style: dashed; background: #fbf8f0; }
.understood-chip-body { display: flex; flex-direction: column; gap: 2px; }
.understood-chip-body strong { font-size: 12.5px; color: var(--search-ink); }
.understood-chip-body small { font-size: 13px; font-weight: 600; color: var(--search-ink); }
.understood-chip-body em { font-style: normal; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #4f7a68; }
.understood-chip--preference .understood-chip-body em { color: #6b4f16; }
.understood-chip-remove { border: 0; background: transparent; color: #93a3a0; font-size: 16px; line-height: 1; padding: 2px 4px; margin-left: auto; flex: none; }
.understood-chip-remove:hover, .understood-chip-remove:focus-visible { color: #b23b3b; }

/* Desktop permanent list+map split. Reuses the existing full-page Map
   workspace (body.map-mode, activated by home-search-map.js exactly as it
   already is on Search Homes) -- this only stops it from hiding the results
   list, and lays the two panels out side by side instead of map-only. */
@media (min-width: 901px) {
  body.map-mode.ai-search-page { overflow: visible; }
  body.map-mode.ai-search-page .search-workspace {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 480px);
    height: auto; padding: 22px 5vw 48px; max-width: 1600px; margin: 0 auto; border-top: 1px solid var(--search-line);
  }
  body.map-mode.ai-search-page .search-workspace[data-view='map'] .search-results { display: block; }
  body.map-mode.ai-search-page .search-workspace[data-view='map'] .search-secondary-tools { height: auto; position: sticky; top: 16px; align-self: start; margin: 0; }
  body.map-mode.ai-search-page #search-map { height: calc(100vh - 140px); height: calc(100dvh - 140px); min-height: 760px; }
  /* Results render as compact rows (photo left, details right) instead of
     photo-forward grid cards -- the same layout Search Homes' own List view
     already uses (.search-workspace[data-view='list'] .listing-card),
     applied here even though data-view is literally 'map' (required for the
     real map controller to be active -- see the top of this file). The list
     scrolls on its own, capped to the map's own height, so the two panels
     read as one even split. Each row keeps View Property, Tour Request and
     Compare, the same as Search Homes' cards (Ekin, 15 October 2026). */
  body.map-mode.ai-search-page .search-workspace[data-view='map'] .listing-grid {
    grid-template-columns: 1fr; gap: 14px; max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px); overflow-y: auto; padding-right: 6px;
  }
  body.map-mode.ai-search-page .search-workspace[data-view='map'] .listing-card { display: grid; grid-template-columns: .8fr 1fr; }
  body.map-mode.ai-search-page .search-workspace[data-view='map'] .listing-photo { height: 100%; min-height: 160px; aspect-ratio: auto; }
  /* Grid/List no longer applies once data-view is forced to 'map' for the
     split -- clicking either would switch data-view away from 'map' and
     silently collapse the split back to a single panel. Hidden rather than
     left clickable-but-confusing; Search Homes keeps both buttons exactly
     as they are today. */
  body.map-mode.ai-search-page .search-workspace[data-view='map'] .search-view-controls { display: none; }
}

/* This page's map-specific controls keep only the Map/Satellite toggle. The
   shared Back to Main Search Page route remains above it, while location,
   Filters and Draw Area are redundant because criteria are already shown
   and editable as chips in "Here's what I understood". Search Homes' own
   toolbar remains untouched; this is scoped to .ai-search-page only. */
.ai-search-page .map-toolbar-search,
.ai-search-page #map-open-filters,
.ai-search-page #map-draw-area { display: none; }
.ai-search-page .map-toolbar { justify-content: flex-end; }

/* The preference summary above already lists every active criterion,
   with removable chips and clear consumer-facing labels --
   the results toolbar's own #search-active-filters row would just repeat
   the same filters a second time in a plainer style. Search Homes keeps
   it (it has no equivalent summary of its own). */
.ai-search-page #search-active-filters { display: none; }

.understood-clear-all { border: 0; background: none; color: #8b600d; padding: 5px 0; font-size: 11px; font-weight: 600; min-height: 32px; }
.understood-clear-all:hover, .understood-clear-all:focus-visible { color: var(--search-ink); text-decoration: underline; }

@media (max-width: 900px) {
  .ekin-match-hero .search-hero-inner { padding: 12px 6vw 26px; }
  .ekin-match-hero h1 { font-size: clamp(28px, 8vw, 38px); }
  .ekin-match-back { margin: 14px 6vw 0; }
  .understood-heading { display: block; }
  .refine-search-form { margin-top: 10px; width: 100%; }
  .ekin-match-understood { padding: 0 6vw; }
  .ekin-match-conversation { min-height: 110px; max-height: 58vh; }
  .ekin-match-message { max-width: 96%; }
  .ekin-match-avatar-frame { width: 48px; height: 48px; }
  .ekin-match-message--intro .ekin-match-avatar-frame { width: 64px; height: 64px; }
  .ekin-match-bubble { padding: 10px 12px; }
  .ekin-match-bubble p { font-size: 13px; }
  .ekin-match-form textarea { min-height: 96px; font-size: 16px; }
  /* Map is a dedicated, full-screen mobile view here exactly as it already
     is on Search Homes (body.map-mode) -- the compact hero and
     interpretation panel would otherwise sit above it and push the map
     far down the page, unlike desktop where both stay visible above the
     permanent split. */
  body.map-mode .ekin-match-hero, body.map-mode #ekin-match-understood { display: none; }
}
/* Phones: the big box stays full width; the toolbar wraps into two rows
   (Talk to Mila and Send, then the voice replies switch). */
@media (max-width: 700px) {
  .ekin-match-card { padding: 24px 14px 16px; }
  .ekin-match-toolbar { flex-wrap: wrap; gap: 10px; }
  .ekin-match-compose-footer { order: 3; flex-basis: 100%; }
  .ekin-match-form .ekin-match-send { padding: 0 18px; }
}

/* "New chat": starts the conversation (and its filters) over. */
.ekin-new-chat { position: absolute; top: 12px; right: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 5px 12px; border: 1px solid rgba(255,255,255,.4); border-radius: 999px; background: #10282e; color: #ffffff; font-size: 12px; font-weight: 700; letter-spacing: .02em; cursor: pointer; }
.ekin-new-chat[hidden] { display: none; }
.ekin-new-chat svg { width: 14px; height: 14px; color: #f2cb75; }
.ekin-new-chat:is(:hover, :focus-visible) { border-color: #f2cb75; background: #0b1f24; }
.ekin-new-chat:focus-visible { outline: 2px solid #f2cb75; outline-offset: 2px; }
@media (max-width: 700px) { .ekin-new-chat { top: 10px; right: 10px; min-height: 30px; padding: 4px 10px; } }

/* ==== Arabic, right to left (html dir="rtl", set by i18n.js) ====
   Mila's bubbles sit at the right and the visitor's at the left, each with
   its tail in the corner nearest its speaker; the composer's controls, the
   voice switch and "New chat" turn with them. */
[dir="rtl"] .ekin-match-hero { background: linear-gradient(270deg, #00232aeb 0%, #00232ac2 45%, #00232a80 100%), url('/assets/search-hero-sunset.webp') center 55%/cover; }
[dir="rtl"] .ekin-match-hero .search-hero-signoff { left: 5vw; right: auto; }
[dir="rtl"] .ekin-match-conversation { padding-right: 0; padding-left: 4px; }
[dir="rtl"] .ekin-match-bubble { border-radius: 15px 15px 4px 15px; }
[dir="rtl"] .ekin-match-message--user .ekin-match-bubble { border-radius: 15px 15px 15px 4px; }
[dir="rtl"] .ekin-match-message--user .ekin-match-speaker { text-align: left; }
[dir="rtl"] .ekin-match-form .ekin-match-send { margin-left: 0; margin-right: auto; }
[dir="rtl"] .ekin-match-send svg { transform: scaleX(-1); }
[dir="rtl"] .ekin-match-form .ekin-talk { padding: 4px 4px 4px 16px; text-align: right; }
[dir="rtl"] .ekin-switch span { left: auto; right: 2px; }
[dir="rtl"] .ekin-voice-toggle[aria-checked='true'] .ekin-switch span { transform: translateX(-16px); }
[dir="rtl"] .ekin-voice-state { text-align: right; }
[dir="rtl"] .ekin-match-confirmation-summary { border-left: 0; border-right: 3px solid var(--gold); }
[dir="rtl"] .refine-search-form { padding: 4px 14px 4px 4px; }
[dir="rtl"] .understood-chip-remove { margin-left: 0; margin-right: auto; }
@media (min-width: 901px) { [dir="rtl"] body.map-mode.ai-search-page .search-workspace[data-view='map'] .listing-grid { padding-right: 0; padding-left: 6px; } }
[dir="rtl"] .ekin-new-chat { left: 14px; right: auto; }
@media (max-width: 700px) { [dir="rtl"] .ekin-new-chat { left: 10px; } }

/* ==== Arabic, Simplified Chinese, Japanese and Korean: no label under 11px ==== */
html:is(:lang(ar), :lang(zh-CN), :lang(ja), :lang(ko)) :is(.ekin-match-speaker, .ekin-match-map-toggle) { font-size: 11px; }

/* ==== Popular search ideas (ai-search-ideas.js) ====
   Example questions for Mila. Each is a real button that sends its full
   question exactly as typing it and pressing Send would. Wide screens: a
   glass panel to the right of the chat card, with a handwritten note above
   it. Phones and tablets: a compact row of short labels above the message
   box (a row that scrolls sideways on phones). */
.mila-ideas { display: none; }
.mila-ideas h2, .mila-ideas-strip h2 { margin: 0; }
.mila-ideas-bulb { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; color: #f2cb75; }
.mila-ideas-bulb svg, .mila-idea-icon svg, .mila-idea-arrow svg { display: block; width: 100%; height: 100%; }
.mila-idea-icon { flex: none; display: grid; place-items: center; color: #e2b45a; }

.mila-ideas-strip { margin: 0 0 14px; }
.mila-ideas-strip-title { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; color: #f6d480; font-size: 13px; font-weight: 700; letter-spacing: .02em; line-height: 1.3; }
.mila-ideas-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mila-idea-chip { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 15px 6px 11px; border: 1px solid rgba(242,203,117,.4); border-radius: 999px; background: rgba(0,0,0,.2); color: #f7f1e4; font: inherit; font-size: 13px; font-weight: 600; line-height: 1.25; text-align: start; cursor: pointer; transition: border-color .2s, background-color .2s; }
.mila-idea-chip .mila-idea-icon { width: 20px; height: 20px; }
.mila-idea-chip:not(:disabled):hover, .mila-idea-chip:focus-visible { border-color: #f2cb75; background: rgba(242,203,117,.14); }

/* The glass panel beside the chat: the chat card keeps its own size (up to
   860px) and the panel takes the room to its right. */
@media (min-width: 1201px) {
  .ekin-match-hero .search-hero-inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; max-width: 1520px; }
  .ekin-match-main { flex: 1 1 auto; min-width: 0; max-width: 860px; }
  .mila-ideas-strip { display: none; }
  .mila-ideas { display: block; flex: 0 0 clamp(340px, 28vw, 410px); }
}
.mila-ideas-note { position: relative; z-index: 1; display: flex; flex-direction: row-reverse; align-items: flex-end; gap: 4px; margin: -8px 0 4px; padding-inline-end: 6px; color: #e8bf68; font-family: "Great Vibes", "Snell Roundhand", "Apple Chancery", "Segoe Script", cursive; font-size: 25px; line-height: 1.02; text-align: end; }
.mila-ideas-note span { max-width: 230px; transform: rotate(-3deg); text-shadow: 0 2px 10px rgba(0,19,22,.6); }
.mila-ideas-note-arrow { flex: none; width: 50px; height: 40px; margin-bottom: -6px; }
.mila-ideas-panel { position: relative; padding: 20px 18px 18px; border: 1px solid rgba(255,255,255,.22); border-radius: 22px; background: linear-gradient(180deg, rgba(6,61,69,.6), rgba(0,35,42,.52)); box-shadow: 0 24px 60px rgba(0,19,22,.5), inset 0 1px 0 rgba(255,255,255,.12); -webkit-backdrop-filter: blur(16px) saturate(125%); backdrop-filter: blur(16px) saturate(125%); }
.mila-ideas-head { display: flex; align-items: center; gap: 10px; }
.mila-ideas-head .mila-ideas-bulb { width: 30px; height: 30px; }
.mila-ideas-head h2 { color: #f6d480; font-size: 19px; font-weight: 700; line-height: 1.25; letter-spacing: .01em; }
.mila-ideas-hint { margin: 6px 0 14px; color: rgba(255,255,255,.84); font-size: 13.5px; line-height: 1.45; text-wrap: pretty; }
.mila-ideas-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mila-idea { width: 100%; min-height: 56px; display: grid; grid-template-columns: 34px minmax(0, 1fr) 18px; align-items: center; gap: 12px; padding: 8px 14px 8px 12px; border: 1px solid rgba(255,255,255,.17); border-radius: 14px; background: rgba(255,255,255,.06); color: #fff; font: inherit; font-size: 14.5px; font-weight: 500; line-height: 1.4; text-align: start; cursor: pointer; transition: border-color .2s, background-color .2s; }
.mila-idea-text { text-wrap: pretty; }
.mila-idea .mila-idea-icon { width: 34px; height: 34px; }
.mila-idea .mila-idea-icon svg { width: 30px; height: 30px; }
.mila-idea-arrow { width: 18px; height: 18px; color: #e2b45a; transition: transform .2s; }
.mila-idea:not(:disabled):hover, .mila-idea:focus-visible { border-color: rgba(242,203,117,.75); background: rgba(242,203,117,.1); }
.mila-idea:not(:disabled):hover .mila-idea-arrow, .mila-idea:focus-visible .mila-idea-arrow { transform: translateX(3px); }
/* Brighter than the page's own focus ring, which would read dark on the
   glass, and slim enough to stay inside the phone row's scrolling area. */
.ai-search-page :is(.mila-idea, .mila-idea-chip):focus-visible { outline: 2px solid #f2cb75; outline-offset: 2px; }
/* While Mila is answering, like the Send button. */
.mila-idea:disabled, .mila-idea-chip:disabled { cursor: progress; opacity: .55; }
/* Phones: one row that scrolls sideways, edge to edge in the card; the
   padding keeps each label's focus ring inside the scrolling row. */
@media (max-width: 700px) {
  .mila-ideas-strip { margin-bottom: 10px; }
  .mila-ideas-chips { flex-wrap: nowrap; margin: -5px -14px 0; padding: 5px 14px 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-padding-inline: 14px; scrollbar-width: none; }
  .mila-ideas-chips::-webkit-scrollbar { display: none; }
  .mila-ideas-chips > li { flex: none; }
  .mila-idea-chip { white-space: nowrap; }
}
/* Arabic: the panel sits to the left of the chat, and the arrows turn. */
[dir="rtl"] .mila-idea-arrow svg, [dir="rtl"] .mila-ideas-note-arrow { transform: scaleX(-1); }
[dir="rtl"] .mila-idea:not(:disabled):hover .mila-idea-arrow, [dir="rtl"] .mila-idea:focus-visible .mila-idea-arrow { transform: translateX(-3px); }
[dir="rtl"] .mila-ideas-note span { transform: rotate(3deg); }
[dir="rtl"] .mila-idea { padding: 8px 12px 8px 14px; }
[dir="rtl"] .mila-idea-chip { padding: 6px 11px 6px 15px; }
/* The handwritten note is in a Latin script face; Arabic and Chinese use the page's serif, upright. */
html:is(:lang(ar), :lang(zh-CN), :lang(ja), :lang(ko)) .mila-ideas-note { margin-top: 0; font-family: 'Playfair Display', Georgia, serif; font-style: normal; font-size: 17px; line-height: 1.4; }
html:is(:lang(ar), :lang(zh-CN), :lang(ja), :lang(ko)) .mila-ideas-note span { max-width: 300px; }
/* Reduced motion: no transitions, and the row arrows stay put (both directions). */
@media (prefers-reduced-motion: reduce) {
  .mila-idea, .mila-idea-chip, .mila-idea-arrow { transition: none; }
  .mila-idea:not(:disabled):hover .mila-idea-arrow, .mila-idea:focus-visible .mila-idea-arrow,
  [dir="rtl"] .mila-idea:not(:disabled):hover .mila-idea-arrow, [dir="rtl"] .mila-idea:focus-visible .mila-idea-arrow { transform: none; }
}