/* ============================================================================
   THE GATE INVESTMENTS — AI CONCIERGE WIDGET
   ----------------------------------------------------------------------------
   Cinematic luxury floating assistant. Slide-in panel from the side,
   typing animations, suggested prompts, inline project cards.
   Class prefix: .gai-* (Gate AI) — won't collide with site or admin styles.
   ============================================================================ */

:root{
  --gai-navy:       #0A1F44;
  --gai-navy-deep:  #061533;
  --gai-gold:       #C9A961;
  --gai-gold-soft:  #d4b574;
  --gai-gold-deep:  #A88A3F;
  --gai-ink:        #0A1F44;
  --gai-ink-soft:   #5A6580;
  --gai-line:       rgba(6,21,51,.10);
  --gai-shadow:     0 24px 64px rgba(6,21,51,.18);
  --gai-shadow-lift:0 30px 80px rgba(6,21,51,.30);
  --gai-radius:     22px;
}

/* ---------- Floating launcher button ----------
   Anchored to the OPPOSITE corner from the WhatsApp float (which sits at
   inset-inline-end). Kay sits at inset-inline-start so the two never
   collide and the user has a clear visual separation:
     LTR mode → WhatsApp bottom-right · Kay bottom-left
     RTL mode → WhatsApp bottom-left  · Kay bottom-right                       */
.gai-launcher{
  position:fixed;
  bottom:24px;
  inset-inline-start:24px;
  z-index:9998;
  display:inline-flex; align-items:center; gap:10px;
  /* Logical padding so the orb's "extra room" stays on the orb's side
     (inline-start) regardless of EN vs AR direction. The previous physical
     `padding:13px 18px 13px 52px` left the 52px on the LEFT in RTL too —
     pushing the Arabic text away from the orb instead of toward it.       */
  padding:13px 18px;
  padding-inline-start:52px;
  border-radius:999px;
  background:linear-gradient(135deg, var(--gai-navy) 0%, var(--gai-navy-deep) 100%);
  color:#fff; font-weight:700; font-size:13.5px; letter-spacing:.5px;
  box-shadow:var(--gai-shadow), 0 0 0 1px rgba(201,169,97,.4) inset;
  cursor:pointer; border:none;
  font-family:'Inter','Tajawal',sans-serif;
  transition:transform .25s cubic-bezier(.22,.61,.36,1),
             box-shadow .25s ease, background .25s ease;
  /* Force LTR text-flow on the launcher itself so the orb stays glued to
     the start edge — Arabic still reads RTL inside the label span. */
  direction:inherit; text-align:start;
}
/* Arabic-specific tweak — Tajawal renders heavier than Inter, dial back letter-spacing */
html[dir="rtl"] .gai-launcher{ letter-spacing:0; font-size:13px }
.gai-launcher:hover{
  transform:translateY(-2px) scale(1.03);
  box-shadow:var(--gai-shadow-lift), 0 0 0 1px rgba(241,210,125,.6) inset;
  background:linear-gradient(135deg, var(--gai-navy-deep) 0%, var(--gai-navy) 100%);
}
.gai-launcher .gai-launcher-orb{
  position:absolute;
  inset-inline-start:6px;
  /* Perfectly centered vertically regardless of pill height — fixes the
     "glow looks lower than the button" bug. The top:6px approach assumed a
     fixed pill height; with logical paddings the pill height shifts a few
     pixels and the orb (with its pulsing ring) ended up below center. */
  top:50%;
  transform:translateY(-50%);
  width:34px; height:34px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, var(--gai-gold-soft), var(--gai-gold-deep));
  box-shadow:0 4px 12px rgba(201,169,97,.45),
             inset 0 -1px 4px rgba(0,0,0,.2);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--gai-navy-deep); font-size:14px;
  animation:gaiOrbPulse 2.6s ease-in-out infinite;
}
@keyframes gaiOrbPulse{
  0%,100% { box-shadow:0 4px 12px rgba(201,169,97,.45), inset 0 -1px 4px rgba(0,0,0,.2), 0 0 0 0 rgba(201,169,97,.4); }
  50%     { box-shadow:0 4px 12px rgba(201,169,97,.45), inset 0 -1px 4px rgba(0,0,0,.2), 0 0 0 10px rgba(201,169,97,0); }
}
.gai-launcher .gai-launcher-text{ position:relative; z-index:1; line-height:1 }
/* Subtitle hidden by default — keeps the pill compact in BOTH languages.
   The English version was getting visually larger than the Arabic
   because "AI CONCIERGE" is wider than "مساعد عقاري ذكي" once you add
   1.6px letter-spacing. Hiding the subtitle gives a clean, uniform pill
   regardless of language. */
.gai-launcher .gai-launcher-sub{ display:none }
@media(max-width:520px){
  .gai-launcher{
    /* Bugfix sprint — Ask Kay now sits on the same mobile FAB offset
       as the right-side WhatsApp/back-to-top stack
       (var(--fab-bottom-mobile) defined in assets/site.css :root).
       All three floats clear the Safari bottom URL bar + the iPhone
       home-indicator strip in lockstep. Falls back to 18px when the
       variable isn't loaded yet. */
    bottom:var(--fab-bottom-mobile, 18px);
    inset-inline-start:14px;
    /* Logical padding for mobile too */
    padding:12px 14px;
    padding-inline-start:48px;

    /* Smooth transition so the hero-in-view hide/show below doesn't
       feel like a hard pop. */
    transition:transform .25s cubic-bezier(.22,.61,.36,1),
               opacity .2s ease,
               box-shadow .25s ease, background .25s ease;
  }
  .gai-launcher .gai-launcher-sub{ display:none }

  /* Bugfix sprint — hide Ask Kay while the hero (containing the
     primary/resale/rent search panel) is in viewport on the homepage.
     An IntersectionObserver in index.html toggles `body.hero-in-view`.
     Once the user scrolls past the hero, the class is removed and the
     launcher slides back up. Touch-only via the outer @media block. */
  body.hero-in-view .gai-launcher{
    transform:translateY(calc(100% + 24px));
    opacity:0;
    pointer-events:none;
  }
}

/* ---------- Backdrop + panel ---------- */
.gai-backdrop{
  position:fixed; inset:0; z-index:9999;
  background:rgba(6,21,51,.5);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:none;
  animation:gaiFadeIn .25s ease both;
}
.gai-backdrop.is-open{ display:block }
@keyframes gaiFadeIn{ from{opacity:0} to{opacity:1} }

/* ============================================================================
   PANEL LAYOUT v3 — CSS GRID (rebuild)
   ----------------------------------------------------------------------------
   Switched from flex-column to a 3-row Grid: `auto · 1fr · auto`.
   Why Grid? Because flex-column has historically failed for this user across
   3 successive fix attempts — flex needs `flex:1 1 0` + `min-height:0` +
   `align-self:stretch` etc. to behave, and any cascade conflict breaks the
   composer position. Grid is bulletproof: `1fr` ALWAYS owns the leftover
   space, and the third row ALWAYS sits at the bottom — there's no other
   layout possible.

   Structure mapping:
     Row 1 (auto)  → .gai-head      — fixed natural height
     Row 2 (1fr)   → .gai-body      — owns ALL remaining space, scrolls
     Row 3 (auto) → .gai-composer  — fixed natural height, glued to bottom
   The pinned `.gai-results` pane is REMOVED from the grid (display:none).
   Cards now render inline in the conversation flow like every other modern
   AI chat (Claude, ChatGPT, Gemini).

   Viewport: uses dvh on the panel + the body so the iOS Safari collapsing
   address bar never pushes the composer off-screen.
   ============================================================================ */
.gai-panel{
  position:fixed; top:24px; bottom:24px;
  inset-inline-end:24px;
  z-index:10000;
  width:min(440px, calc(100% - 48px));
  /* Explicit height — fills the viewport pillar so the grid's 1fr row has
     leftover space to fill. Without this, the grid would shrink to its
     content height. */
  height:calc(100vh - 48px);
  height:calc(100dvh - 48px);
  min-height:480px;
  max-height:calc(100vh - 48px);
  max-height:calc(100dvh - 48px);
  background:#fff;
  border-radius:var(--gai-radius);
  box-shadow:var(--gai-shadow-lift);
  display:none;
  /* Grid layout — header / body / composer */
  grid-template-rows:auto 1fr auto;
  grid-template-columns:1fr;
  overflow:hidden;
  font-family:'Inter','Tajawal',sans-serif;
  color:var(--gai-ink);
  isolation:isolate;
  transform:translateX(40px);
  opacity:0;
  transition:transform .35s cubic-bezier(.22,.61,.36,1), opacity .25s ease;
}
html[dir="rtl"] .gai-panel{ transform:translateX(-40px) }
/* When opened, switch from display:none to display:grid so the rows
   activate. flex-direction is no longer needed — grid owns the layout. */
.gai-panel.is-open{ display:grid; transform:none; opacity:1 }
@media(max-width:520px){
  .gai-panel{
    top:0; bottom:0; right:0; left:0; inset-inline-end:0;
    width:100%; border-radius:0;
    height:100vh;
    height:100dvh;
    max-height:100vh;
    max-height:100dvh;
    min-height:0;
  }
}

/* ---------- Header — Grid Row 1 ----------
   Compact header that sits at the top of the panel. Natural height — the
   grid track is `auto` so the header takes exactly the height of its
   content. */
.gai-head{
  grid-row:1;
  position:relative;
  padding:14px 20px 12px;
  background:linear-gradient(135deg, var(--gai-navy-deep) 0%, var(--gai-navy) 50%, #1a3060 100%);
  color:#fff;
}
@media(max-width:520px){
  .gai-head{ padding:12px 16px 10px }
}
.gai-head::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--gai-gold) 50%, transparent);
}
.gai-head-row{ display:flex; align-items:center; justify-content:space-between; gap:10px }
.gai-head .gai-id{ display:inline-flex; align-items:center; gap:10px }
.gai-head .gai-id-orb{
  width:36px; height:36px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, var(--gai-gold-soft), var(--gai-gold-deep));
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--gai-navy-deep); font-size:15px;
  box-shadow:0 0 0 2px rgba(255,255,255,.15), 0 6px 16px rgba(201,169,97,.32);
}
.gai-head .gai-id-text strong{
  display:block; font-family:'Cormorant Garamond','Tajawal',serif;
  font-size:18px; font-weight:700; letter-spacing:.2px;
}
.gai-head .gai-id-text small{
  display:block; font-size:10px; letter-spacing:1.6px; text-transform:uppercase;
  color:rgba(255,255,255,.6); margin-top:1px;
}
.gai-head .gai-id-text small .gai-live-dot{
  display:inline-block; width:6px; height:6px; border-radius:50%; background:#22c55e;
  margin-inline-end:4px; vertical-align:middle;
  box-shadow:0 0 0 0 rgba(34,197,94,.5);
  animation:gaiLiveDot 2s ease-in-out infinite;
}
@keyframes gaiLiveDot{
  0%,100% { box-shadow:0 0 0 0 rgba(34,197,94,.5) }
  50%     { box-shadow:0 0 0 6px rgba(34,197,94,0) }
}
.gai-head .gai-close{
  width:34px; height:34px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.1); color:#fff; font-size:14px;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .2s;
}
.gai-head .gai-close:hover{ background:rgba(255,255,255,.18) }

/* ---------- Pinned results pane — REMOVED in v3 rebuild ----------
   The pinned-strip pattern was confusing the user (felt like a separate
   page above the chat) and was the source of multiple "input bar floats
   mid-screen" complaints. Cards now render INLINE in the conversation
   flow (.gai-body) like Claude / ChatGPT / Gemini. The element is kept
   in the DOM but hidden so existing JS that calls render-to-results can
   no-op without errors. */
.gai-results{ display:none !important }
.gai-results-head{
  font-size:9.5px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--gai-gold-deep); margin-bottom:10px;
  display:flex; align-items:center; justify-content:space-between;
}
.gai-results-head .gai-results-clear{
  background:transparent; border:none; cursor:pointer;
  font-size:11px; color:var(--gai-ink-soft); font-weight:600;
}
.gai-results-head .gai-results-clear:hover{ color:var(--gai-navy) }

/* ---------- Body (scrollable transcript) ----------
   `flex:1 1 0` (basis 0) instead of `1 1 auto` — this forces the body to
   GROW to fill all remaining vertical space inside the panel so the
   composer always docks at the very bottom. With basis:auto the body would
   sometimes only take the height of its content, leaving an awkward white
   gap below the composer. */
/* Body — owns Row 2 (1fr) of the grid. As a grid item with `min-height:0`
   it can shrink to fit its grid track AND scroll its overflow internally.
   No flex props needed — Grid does it natively. */
.gai-body{
  grid-row:2;
  min-height:0;        /* CRITICAL — lets the grid item scroll instead of
                          forcing the row taller than 1fr. */
  overflow-y:auto;
  padding:18px 18px 8px;
  background:linear-gradient(180deg, #fafbff 0%, #f4f6fb 100%);
  scroll-behavior:smooth;
  /* iOS momentum scroll for that native-app feel inside webview hosts */
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.gai-body::-webkit-scrollbar{ width:6px }
.gai-body::-webkit-scrollbar-thumb{ background:rgba(6,21,51,.15); border-radius:3px }

/* ---------- Bubbles ---------- */
.gai-msg{ display:flex; gap:10px; margin-bottom:14px; animation:gaiMsgIn .35s cubic-bezier(.22,.61,.36,1) both }
@keyframes gaiMsgIn{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
.gai-msg-avatar{
  width:32px; height:32px; flex-shrink:0; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px;
}
.gai-msg-ai .gai-msg-avatar{
  background:radial-gradient(circle at 30% 30%, var(--gai-gold-soft), var(--gai-gold-deep));
  color:var(--gai-navy-deep);
  box-shadow:0 4px 10px rgba(201,169,97,.32);
}
.gai-msg-user .gai-msg-avatar{
  background:var(--gai-navy); color:#fff;
}
.gai-msg-bubble{
  max-width:78%;
  background:#fff; padding:10px 14px;
  border-radius:14px;
  font-size:13.5px; line-height:1.55; color:var(--gai-ink);
  box-shadow:0 2px 8px rgba(6,21,51,.06);
  border:1px solid var(--gai-line);
  white-space:pre-wrap;
}
.gai-msg-user{ flex-direction:row-reverse }
.gai-msg-user .gai-msg-bubble{
  background:var(--gai-navy); color:#fff;
  border-color:transparent;
}
.gai-msg-typing{
  display:inline-flex; gap:4px; padding:4px 0;
}
.gai-msg-typing span{
  width:6px; height:6px; border-radius:50%; background:var(--gai-gold-deep);
  animation:gaiBlink 1.2s ease-in-out infinite;
}
.gai-msg-typing span:nth-child(2){ animation-delay:.18s }
.gai-msg-typing span:nth-child(3){ animation-delay:.36s }
@keyframes gaiBlink{
  0%,80%,100% { opacity:.25; transform:translateY(0) }
  40%         { opacity:1;   transform:translateY(-3px) }
}

/* ---------- Recommendation cards (inline in transcript) ---------- */
.gai-cards{
  display:grid; gap:10px; margin-bottom:14px;
  animation:gaiMsgIn .4s cubic-bezier(.22,.61,.36,1) both;
}
.gai-card{
  display:flex; gap:12px; padding:12px;
  background:#fff; border:1px solid var(--gai-line);
  border-radius:14px; cursor:pointer;
  text-decoration:none; color:var(--gai-ink);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow:0 2px 8px rgba(6,21,51,.06);
}
.gai-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(6,21,51,.14);
  border-color:rgba(201,169,97,.5);
}
.gai-card-thumb{
  width:80px; height:80px; flex-shrink:0; border-radius:10px;
  background:#1a2547 center/cover no-repeat;
  position:relative;
}
.gai-card-thumb .gai-card-score{
  position:absolute; top:6px; inset-inline-end:6px;
  background:rgba(0,0,0,.7); color:#FFE7B0;
  font-size:9.5px; font-weight:800; letter-spacing:.4px;
  padding:2px 6px; border-radius:8px;
  font-variant-numeric:lining-nums tabular-nums;
}
.gai-card-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px }
.gai-card-dev{
  font-size:9.5px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--gai-gold-deep);
}
.gai-card-title{
  font-family:'Cormorant Garamond','Tajawal',serif;
  font-size:16px; font-weight:700; line-height:1.2; color:var(--gai-ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.gai-card-meta{
  font-size:11px; color:var(--gai-ink-soft);
  display:flex; align-items:center; gap:6px; margin-top:2px;
  font-variant-numeric:lining-nums tabular-nums;
}
.gai-card-meta i{ font-size:9px; color:var(--gai-gold-deep) }
.gai-card-meta .dot{ width:3px; height:3px; border-radius:50%; background:rgba(6,21,51,.18) }
.gai-card-why{
  font-size:10.5px; color:var(--gai-ink-soft);
  margin-top:4px; display:flex; flex-wrap:wrap; gap:4px;
}
.gai-card-why .pill{
  background:rgba(201,169,97,.10); color:var(--gai-gold-deep);
  padding:2px 7px; border-radius:999px; font-weight:600;
}

/* ---------- Comparison table inline ---------- */
.gai-compare{
  background:#fff; border:1px solid var(--gai-line); border-radius:14px;
  overflow:hidden; margin-bottom:14px;
  animation:gaiMsgIn .4s cubic-bezier(.22,.61,.36,1) both;
}
.gai-compare table{ width:100%; border-collapse:collapse; font-size:11.5px }
.gai-compare th, .gai-compare td{
  padding:8px 10px; border-bottom:1px solid var(--gai-line); text-align:left;
}
html[dir="rtl"] .gai-compare th, html[dir="rtl"] .gai-compare td{ text-align:right }
.gai-compare thead th{
  background:var(--gai-navy); color:#fff; font-weight:700; font-size:11px;
  letter-spacing:.4px;
}
.gai-compare tbody th{
  background:#fafbff; font-weight:700; font-size:10.5px;
  text-transform:uppercase; letter-spacing:1px; color:var(--gai-ink-soft);
}
.gai-compare td{ font-variant-numeric:lining-nums tabular-nums; font-weight:600 }

/* ---------- Area summary card ---------- */
.gai-area-summary{
  background:linear-gradient(135deg, #fff 0%, #fafbff 100%);
  border:1px solid var(--gai-line); border-radius:14px;
  padding:14px 16px; margin-bottom:14px;
  animation:gaiMsgIn .4s cubic-bezier(.22,.61,.36,1) both;
}
.gai-area-summary .gai-area-name{
  font-family:'Cormorant Garamond','Tajawal',serif;
  font-size:20px; font-weight:700; line-height:1.1; color:var(--gai-ink);
}
.gai-area-summary .gai-area-region{
  font-size:10.5px; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--gai-gold-deep); font-weight:700; margin-top:2px;
}
.gai-area-summary .gai-area-stats{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px; margin-top:12px;
}
.gai-area-summary .gai-area-stat{
  background:rgba(201,169,97,.06); border:1px solid rgba(201,169,97,.16);
  border-radius:10px; padding:8px 10px;
}
.gai-area-summary .gai-area-stat label{
  display:block; font-size:9px; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--gai-ink-soft); font-weight:700;
}
.gai-area-summary .gai-area-stat strong{
  display:block; font-size:14px; color:var(--gai-ink); font-weight:800;
  margin-top:2px; font-variant-numeric:lining-nums tabular-nums;
}
.gai-area-summary .gai-area-blurb{
  font-size:12px; color:var(--gai-ink-soft); line-height:1.55; margin-top:10px;
}

/* ---------- Best-areas list ---------- */
.gai-areas-list{
  display:grid; gap:8px; margin-bottom:14px;
  animation:gaiMsgIn .4s cubic-bezier(.22,.61,.36,1) both;
}
.gai-areas-list .row{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; background:#fff; border:1px solid var(--gai-line);
  border-radius:12px; cursor:pointer; transition:border-color .2s;
}
.gai-areas-list .row:hover{ border-color:rgba(201,169,97,.5) }
.gai-areas-list .rank{
  width:24px; height:24px; border-radius:50%; flex-shrink:0;
  background:var(--gai-gold); color:var(--gai-navy-deep); font-weight:800;
  font-size:11px; display:inline-flex; align-items:center; justify-content:center;
  font-variant-numeric:lining-nums tabular-nums;
}
.gai-areas-list .body{ flex:1; min-width:0 }
.gai-areas-list .body strong{ display:block; font-size:13px; color:var(--gai-ink); font-weight:700 }
.gai-areas-list .body span{ display:block; font-size:10.5px; color:var(--gai-ink-soft); margin-top:1px }
.gai-areas-list .score{
  font-size:13px; font-weight:800; color:var(--gai-gold-deep);
  font-variant-numeric:lining-nums tabular-nums;
}

/* ---------- Suggestions row + Quick actions ---------- */
.gai-suggestions{
  display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px;
  animation:gaiMsgIn .35s ease both;
}
.gai-chip{
  background:#fff; border:1px solid rgba(201,169,97,.32);
  color:var(--gai-ink); font-size:11.5px; font-weight:600;
  padding:6px 12px; border-radius:999px; cursor:pointer;
  transition:all .2s ease; line-height:1.3;
}
.gai-chip:hover{
  background:rgba(201,169,97,.10);
  border-color:var(--gai-gold-deep);
  color:var(--gai-navy-deep);
}
.gai-chip i{ font-size:9px; color:var(--gai-gold-deep); margin-inline-end:4px }

/* ---------- CTA card (WhatsApp / Call / Consultation) ---------- */
.gai-cta-card{
  background:linear-gradient(135deg, var(--gai-navy-deep) 0%, var(--gai-navy) 50%, #1a3060 100%);
  color:#fff; border-radius:14px; padding:14px 16px; margin-bottom:14px;
  border:1px solid rgba(241,210,125,.32);
  box-shadow:0 8px 22px rgba(6,21,51,.18);
  animation:gaiMsgIn .4s cubic-bezier(.22,.61,.36,1) both;
}
.gai-cta-intro{
  font-size:12.5px; line-height:1.5; color:rgba(255,255,255,.92);
  margin-bottom:10px; font-weight:500;
}
.gai-cta-intro b{ color:var(--gai-gold-soft) }
.gai-cta-row{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:8px;
}
.gai-cta-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 6px; border-radius:10px; font-weight:700; font-size:12px;
  letter-spacing:.4px; text-decoration:none; cursor:pointer; border:none;
  transition:transform .2s ease, box-shadow .2s ease, background .2s;
  font-family:'Inter','Tajawal',sans-serif;
}
.gai-cta-btn i{ font-size:13px }
.gai-cta-btn.cta-wa{
  background:linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color:#fff;
  box-shadow:0 4px 12px rgba(37,211,102,.32);
}
.gai-cta-btn.cta-wa:hover{
  transform:translateY(-1px) scale(1.02);
  box-shadow:0 8px 20px rgba(37,211,102,.45);
  color:#fff;
}
.gai-cta-btn.cta-call{
  background:rgba(255,255,255,.10);
  color:#fff;
  border:1px solid rgba(255,255,255,.20);
}
.gai-cta-btn.cta-call:hover{
  background:rgba(255,255,255,.18);
  transform:translateY(-1px);
  color:#fff;
}
.gai-cta-btn.cta-consult{
  background:linear-gradient(135deg, var(--gai-gold) 0%, var(--gai-gold-deep) 100%);
  color:var(--gai-navy-deep);
  box-shadow:0 4px 12px rgba(201,169,97,.32);
}
.gai-cta-btn.cta-consult:hover{
  transform:translateY(-1px) scale(1.02);
  box-shadow:0 8px 20px rgba(201,169,97,.45);
  color:var(--gai-navy-deep);
}
@media(max-width:380px){
  .gai-cta-row{ grid-template-columns:1fr; gap:6px }
  .gai-cta-btn{ padding:11px 12px; font-size:13px }
}

/* ---------- Composer — Grid Row 3, glued to the panel's bottom ----------
   As a grid item assigned to `grid-row:3` (the `auto` row), the composer
   ALWAYS sits at the bottom of the panel — that's a structural guarantee
   from CSS Grid, not a layout heuristic. Combined with .gai-body owning
   row 2 (1fr), there's no possible way the composer can float mid-panel.

   safe-area-inset-bottom honours the iPhone home indicator without us
   having to size the panel taller. */
.gai-composer{
  grid-row:3;
  border-top:1px solid var(--gai-line);
  padding:12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  background:#fff;
  display:flex; align-items:flex-end; gap:8px;
  z-index:2;
  box-shadow:0 -4px 12px rgba(6,21,51,.04);
}
.gai-input-wrap{
  flex:1; position:relative;
  background:#f4f6fb; border-radius:14px; padding:8px 14px;
  border:1px solid var(--gai-line);
  transition:border-color .2s, background .2s;
}
.gai-input-wrap:focus-within{
  border-color:var(--gai-gold-deep); background:#fff;
}
.gai-input{
  width:100%; border:none; background:transparent; outline:none;
  font-family:inherit; font-size:13.5px; line-height:1.5; color:var(--gai-ink);
  resize:none; min-height:22px; max-height:120px;
}
.gai-input::placeholder{ color:var(--gai-ink-soft) }
.gai-send{
  width:38px; height:38px; flex-shrink:0;
  border-radius:50%; border:none; cursor:pointer;
  background:linear-gradient(135deg, var(--gai-gold) 0%, var(--gai-gold-deep) 100%);
  color:var(--gai-navy-deep); font-size:14px;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 6px 14px rgba(201,169,97,.32);
  transition:transform .2s ease, box-shadow .2s ease;
}
.gai-send:hover{
  transform:translateY(-1px) scale(1.04);
  box-shadow:0 10px 22px rgba(201,169,97,.42);
}
.gai-send[disabled]{ opacity:.4; cursor:not-allowed; transform:none; box-shadow:none }

/* ---------- No results state ---------- */
.gai-empty{
  text-align:center; padding:30px 12px; color:var(--gai-ink-soft);
  font-size:12.5px;
}
.gai-empty i{ display:block; font-size:30px; color:rgba(6,21,51,.18); margin-bottom:8px }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .gai-msg, .gai-cards, .gai-compare, .gai-area-summary, .gai-areas-list, .gai-suggestions{
    animation:none;
  }
  .gai-launcher .gai-launcher-orb{ animation:none }
  .gai-msg-typing span{ animation:none }
}