/* Ana sitewide chat dock — Phase 3 messenger UI. Self-contained; does not touch the theme. */
#ana-dock {
  --ana-green: #6e6659;        /* was #1a7a5a — brand brass */
  --ana-green-dark: #645d51;   /* was #166a4e — gradient mid */
  --ana-green-deep: #585146;   /* was #0f5740 — gradient deep */
  --ana-gold: #c9a24b;
  --ana-ink: #1f2a26;
  --ana-muted: #6b7670;
  --ana-line: #e3e7e5;
  --ana-log-bg: #f4f6f5;
  --ana-radius: 12px;      /* site's own card/button radius is 10px - close to that, not a full "messenger pill" */
  --ana-col: 760px;
}
#ana-dock, #ana-dock * { box-sizing: border-box; }
/* Session-scoped minimize (see ana-dock.js minimizeDockForSession()) - shrinks the bar
   to a small icon-only circle in the SAME position it already occupies (left edge on
   desktop, bottom-left on mobile) rather than removing it outright or relocating it
   elsewhere on screen. Only `right`/`width` are overridden (to stop it spanning the
   full width on mobile); `left`/`bottom`/`top`/`transform` are left untouched so
   whatever position the non-minimized rules above already established is exactly
   where the shrunk icon stays - no separate desktop override needed, since desktop's
   own `.ana-dock__bar` rule already sets left:0 unconditionally. Selector uses two
   classes (0,2,0 specificity) so it wins over the mobile full-width bar rule
   regardless of source order. */
.ana-dock--minimized .ana-dock__bar {
  right: auto; width: auto;
}
.ana-dock--minimized .ana-dock__bar-open {
  width: 52px; height: 52px; padding: 0; border-radius: 50%;
  justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,.28);
}
.ana-dock--minimized .ana-dock__bar-label,
.ana-dock--minimized .ana-dock__bar-hide { display: none; }
#ana-dock {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px; color: var(--ana-ink);
}

/* ---- Collapsed bar ----
 * .ana-dock__bar is a plain (non-interactive) positioning container so it can hold
 * two separate buttons - opening the chat and hiding the bar are different actions
 * and can't both live on one <button> (nesting a button inside a button is invalid
 * HTML and breaks click/focus handling). The painted "pill" styling that used to
 * live on .ana-dock__bar now lives on .ana-dock__bar-open; .ana-dock__bar-hide sits
 * absolutely positioned on top of it in the corner. */
.ana-dock__bar {
  position: fixed; left:0; right:0; bottom:0; z-index:99999;
  width:100%;
}
.ana-dock__bar-open {
  display:flex; align-items:center; gap:10px;
  width:100%; padding:14px 46px 14px 22px;
  background: linear-gradient(180deg, var(--ana-green) 0%, var(--ana-green-dark) 100%);
  color:#fff; font:inherit; text-align:left; border:0; cursor:pointer;
  box-shadow:0 -2px 14px rgba(0,0,0,.16);
  transition: filter .15s ease;
}
.ana-dock__bar-open:hover { filter: brightness(1.07); }
.ana-dock__bar-icon { font-size:22px; line-height:1; font-weight:600; }
.ana-dock__bar-label { font-weight:600; letter-spacing:.2px; }
.ana-dock__bar-hide {
  position:absolute; top:50%; right:14px; transform:translateY(-50%);
  background:rgba(255,255,255,.16); border:0; color:#fff; cursor:pointer;
  width:28px; height:28px; border-radius:50%; padding:0;
  font-size:16px; line-height:1; display:flex; align-items:center; justify-content:center;
  opacity:.85; transition: background .15s, opacity .15s;
}
.ana-dock__bar-hide:hover { opacity:1; background:rgba(255,255,255,.3); }

/* ---- Expanded panel ---- */
.ana-dock__panel {
  position: fixed; left:0; right:0; bottom:0; z-index:100000;
  display:flex; flex-direction:column;
  width:100%; height:64vh; max-height:600px;
  background:#fff; box-shadow:0 -4px 22px rgba(0,0,0,.16);
  transform: translateY(100%);
  transition: transform .24s cubic-bezier(.22,.61,.36,1);
}
.ana-dock--expanded .ana-dock__panel { transform: translateY(0); }
.ana-dock--expanded .ana-dock__bar { display:none; }

/* ---- Header ---- */
.ana-dock__header {
  flex:0 0 auto; display:flex; align-items:center; gap:12px;
  padding:12px 18px;
  background: linear-gradient(180deg, var(--ana-green) 0%, var(--ana-green-deep) 100%);
  color:#fff;
}
.ana-dock__header-avatar {
  width:34px; height:34px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:#fff; color:var(--ana-green); font-weight:800; font-size:16px;
  box-shadow:0 0 0 2px var(--ana-gold);
}
.ana-dock__header-meta { display:flex; flex-direction:column; line-height:1.2; }
.ana-dock__title { font-weight:700; font-family: "Fraunces", Georgia, serif; letter-spacing:.2px; }
.ana-dock__status { font-size:12px; color:rgba(255,255,255,.82); display:flex; align-items:center; gap:5px; }
.ana-dock__status::before {
  content:""; width:7px; height:7px; border-radius:50%;
  background:#5fdcab; box-shadow:0 0 0 2px rgba(95,220,171,.3);
}
.ana-dock__header-actions { margin-left:auto; display:flex; align-items:center; gap:4px; }
.ana-dock__iconbtn, .ana-dock__close {
  background:transparent; border:0; color:#fff; cursor:pointer;
  width:34px; height:34px; border-radius:8px; padding:0;
  font-size:20px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  opacity:.85; transition:background .15s, opacity .15s;
}
.ana-dock__close { margin-left:auto; } /* until Step 3 wraps actions */
.ana-dock__header-actions .ana-dock__close { margin-left:0; }
.ana-dock__iconbtn:hover, .ana-dock__close:hover { background:rgba(255,255,255,.14); opacity:1; }

/* ---- Log / centered column ---- */
.ana-dock__log {
  flex:1 1 auto; overflow-y:auto; padding:18px 16px;
  background:var(--ana-log-bg);
}
.ana-dock__log > * { max-width: var(--ana-col); margin-left:auto; margin-right:auto; }

/* ---- Message bubbles ---- */
.ana-msg { display:flex; align-items:flex-end; gap:9px; margin:10px auto; }
.ana-msg__avatar {
  flex:0 0 auto; width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700;
}
/* Ana's own avatar carries the infinity mark from Anan's logo (see anaAvatar() in
   ana-dock.js) instead of a generic "A" initial - a small brand-specific touch instead
   of a stock messaging-app avatar. Sized up slightly since the glyph reads thinner/
   smaller than a letter at the same font-size. */
.ana-msg--ana .ana-msg__avatar { font-size:17px; font-weight:600; }
.ana-msg__bubble {
  max-width:74%; padding:10px 14px; border-radius:var(--ana-radius);
  line-height:1.5; box-shadow:0 1px 2px rgba(0,0,0,.08);
  word-wrap:break-word; overflow-wrap:anywhere;
}
.ana-msg__bubble a { color:inherit; text-decoration:underline; }
.ana-msg__bubble strong, .ana-msg__bubble b { font-weight:700; }

/* Ana (left) */
.ana-msg--ana { flex-direction:row; justify-content:flex-start; }
.ana-msg--ana .ana-msg__avatar { background:var(--ana-green); color:#fff; box-shadow:0 0 0 2px var(--ana-gold); }
.ana-msg--ana .ana-msg__bubble {
  background:#fff; color:var(--ana-ink); border:1px solid var(--ana-line);
  border-bottom-left-radius:5px;
}
.ana-msg--ana .ana-msg__bubble strong, .ana-msg--ana .ana-msg__bubble b { color:var(--ana-green); }
.ana-msg--ana .ana-msg__bubble a { color: var(--ana-green); }

/* User (right) */
.ana-msg--user { flex-direction:row-reverse; justify-content:flex-start; }
.ana-msg--user .ana-msg__avatar { background:#d6dcd9; color:#5a655f; }
.ana-msg--user .ana-msg__bubble { background:var(--ana-green); color:#fff; border-bottom-right-radius:5px; }
.ana-msg--user .ana-msg__bubble strong, .ana-msg--user .ana-msg__bubble b { color:#fff; }

/* ---- Typing indicator ---- */
.ana-typing .ana-msg__bubble { display:flex; gap:5px; align-items:center; padding:13px 14px; }
.ana-typing__dot {
  width:7px; height:7px; border-radius:50%; background:var(--ana-muted);
  animation: ana-blink 1.3s infinite ease-in-out both;
}
.ana-typing__dot:nth-child(2){ animation-delay:.18s; }
.ana-typing__dot:nth-child(3){ animation-delay:.36s; }
@keyframes ana-blink { 0%,80%,100%{ transform:scale(.6); opacity:.4 } 40%{ transform:scale(1); opacity:1 } }

/* ---- Input row ---- */
.ana-dock__row {
  flex:0 0 auto; display:flex; gap:10px; padding:12px 16px;
  border-top:1px solid var(--ana-line); background:#fff;
}
.ana-dock__input {
  flex:1; padding:11px 16px; border:1px solid #cfd5d2; border-radius:10px;
  font:inherit; background:#fff;
}
.ana-dock__input:focus { outline:none; border-color:var(--ana-green); box-shadow:0 0 0 3px rgba(149,131,89,.18); }
/* The input is a <textarea> (not <input>) specifically so Chrome's saved-password
   suggestion dropdown - which only ever targets <input> elements - never attaches to
   it; setting autocomplete/data-lpignore etc. on a plain <input> was not enough to
   stop it. Keep it visually a single-line pill like before. */
textarea.ana-dock__input {
  height:44px; line-height:1.3; resize:none; overflow-y:auto;
}
.ana-dock__send {
  padding:0 20px; min-height:42px; border:0; border-radius:10px;
  background:var(--ana-green); color:#fff; font:inherit; font-weight:600; cursor:pointer;
  transition: filter .15s;
}
.ana-dock__send:hover { filter:brightness(1.08); }
.ana-dock__send:disabled { opacity:.55; cursor:default; }

/* ---- Welcome + starter chips (markup added in Step 3; styles staged) ---- */
.ana-welcome { text-align:center; padding:26px 16px 8px; }
.ana-welcome__avatar {
  width:54px; height:54px; border-radius:50%; margin:0 auto 12px;
  display:flex; align-items:center; justify-content:center;
  background:var(--ana-green); color:#fff; font-weight:800; font-size:24px;
  box-shadow:0 0 0 3px var(--ana-gold);
}
.ana-welcome__title { font-size:18px; font-weight:700; color:var(--ana-ink); margin:0 0 5px; }
.ana-welcome__sub { color:var(--ana-muted); margin:0 0 16px; }
.ana-chips { display:flex; flex-wrap:wrap; gap:9px; justify-content:center; }
.ana-chip {
  border:1px solid var(--ana-green); color:var(--ana-green); background:#fff;
  border-radius:10px; padding:9px 16px; font:inherit; font-size:14px; cursor:pointer;
  transition: background .15s, color .15s;
}
.ana-chip:hover { background:var(--ana-green); color:#fff; }

/* ---- Desktop / landscape: compact left-edge tab (phone stays full-width bottom bar).
   Previously a wide bar centered at the bottom, which could sit on top of a search-
   results page's own pagination controls underneath it. A small tab hugging the left
   edge, vertically centered, can't collide with bottom-of-page pagination and reads
   as a standard chat-launcher affordance. ---- */
@media (min-width: 768px) {
  /* Anchored to the bottom-left corner (not viewport vertical-center -- that
   * used to collide with whatever page content happened to sit at mid-viewport,
   * e.g. contact form fields). Matches the standard chat-launcher convention
   * and the plugin's own mobile placement (see the minimized-state comment above). */
  .ana-dock__bar {
    left: 0; right: auto; top: auto;
    bottom: 24px;
    width: auto;
  }
  .ana-dock__bar-open {
    width: auto;
    padding: 14px 40px 14px 14px;
    border-radius: 0 10px 10px 0;
    box-shadow: 2px 0 14px rgba(0,0,0,.16);
  }
  .ana-dock__bar-hide { right: 8px; }
  .ana-dock__panel {
    left: 20px; right: auto;
    width: clamp(460px, 38vw, 720px);
    border-radius: 10px 10px 10px 0;
    overflow: hidden;                 /* clip the rounded corners */
    transform: translateY(100%);      /* closed */
  }
  .ana-dock--expanded .ana-dock__panel {
    transform: translateY(0);         /* open */
  }
}

/* ---- Property card block: seat in the centered column, aligned under Ana's bubble ----
 * Styling deliberately mirrors the site's OWN property-listing card component (checked
 * live on /villas-houses/: 10px radius, Fraunces title, Montserrat price in the same
 * champagne-gold family, soft shadow) rather than a generic boxed-list-item look, so a
 * card presented mid-conversation reads as part of the site, not a bolted-on widget. */
.ana-dock__log > .ana-cards {
  max-width: 560px;
  margin: 2px 0 12px 39px;
  display: flex; flex-direction: column; gap: 10px;
}
.ana-card {
  display: flex; background: #fff; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--ana-line);
  box-shadow: 0 6px 20px rgba(0,0,0,.07);
  text-decoration: none; color: inherit;
  transition: box-shadow .15s ease;
}
.ana-card:hover { box-shadow: 0 8px 26px rgba(0,0,0,.12); }
.ana-card__media { flex: 0 0 auto; width: 118px; height: 96px; display: block; background: #eee; }
.ana-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ana-card__body { flex: 1 1 auto; min-width: 0; padding: 10px 12px; }
.ana-card__title {
  display: block; font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: 15px;
  color: var(--ana-ink); text-decoration: none; line-height: 1.3;
}
.ana-card:hover .ana-card__title { text-decoration: underline; }
.ana-card__price {
  font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 15px;
  color: #ad9464; margin: 4px 0 3px;
}
.ana-card__price-label { font-weight: 400; color: var(--ana-muted); font-size: 12px; }
.ana-card__facts { font-family: "Montserrat", sans-serif; font-size: 12.5px; color: var(--ana-muted); }
.ana-card__why {
  font-size: 12.5px; font-style: italic; color: #4a534e; margin-top: 5px; line-height: 1.35;
}
.ana-card__ownership { font-size: 11.5px; color: #8a938d; margin-top: 4px; }

/* ---- Quick-reply chips: same left alignment as cards, but left-justified not centered
   (the base .ana-chips rule centers them for the welcome screen, which doesn't apply here) ---- */
.ana-dock__log > .ana-quickreplies {
  max-width: 560px;
  margin: 2px 0 12px 39px;
  justify-content: flex-start;
}

/* ---- Draggable floating position (desktop only) ----
 * By default the panel is fixed, bottom-anchored and horizontally centered (see the
 * desktop block above), which can sit on top of page content underneath it (e.g. a
 * search-results page's pagination links). Dragging the header switches the panel to
 * a free pixel position instead; the ID selector keeps specificity high enough to win
 * over the desktop centered-panel transform above without needing !important. Position
 * is opt-in (only after the visitor actually drags) and persists via localStorage. */
@media (min-width: 768px) {
  .ana-dock__header { cursor: grab; }
  .ana-dock--dragging .ana-dock__header { cursor: grabbing; }
}
/* Only apply the free position while actually expanded - otherwise this transform:none
 * would override the collapsed state's own translateY(100%) slide-away and leave the
 * panel visibly stuck in its dragged spot (with the collapsed bar rendering separately
 * in its default centered spot on top of it) after the visitor clicks close. */
#ana-dock.ana-dock--floating.ana-dock--expanded .ana-dock__panel {
  left: var(--ana-dock-x, 20px);
  top: var(--ana-dock-y, auto);
  right: auto; bottom: auto;
  transform: none;
  border-radius: var(--ana-radius);
}
#ana-dock.ana-dock--floating.ana-dock--dragging .ana-dock__panel { transition: none; }
/* ==== Ana prominence (2026-08-17) ====================================
   Bottom-RIGHT dock + avatar launcher with breathing halo, catch pulse
   for the flown question pill, and the pill itself. Appended as an
   override layer so the original layout rules above stay untouched. */
.ana-dock__bar-open { display: flex; align-items: center; gap: 10px; }
.ana-dock__bar-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 120% at 30% 25%, #D2C196 0%, #958359 58%, #6E6659 100%);
  color: #fff; font-size: 19px; font-weight: 600; line-height: 1;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.5);
  position: relative;
}
.ana-dock__bar-avatar::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid rgba(210,193,150,.65);
  animation: ana-breathe 3.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ana-breathe {
  0%, 100% { transform: scale(1); opacity: .55; }
  50%      { transform: scale(1.18); opacity: .12; }
}
@media (prefers-reduced-motion: reduce) {
  .ana-dock__bar-avatar::after { animation: none; }
}
@media (min-width: 768px) {
  .ana-dock__bar { left: auto; right: 24px; bottom: 24px; }
  .ana-dock__bar-open { padding: 7px 20px 7px 7px; border-radius: 999px; box-shadow: 0 6px 24px rgba(37,42,44,.28); }
  .ana-dock__bar-avatar { width: 44px; height: 44px; font-size: 21px; }
  .ana-dock__panel { left: auto; right: 20px; }
  .ana-dock--minimized .ana-dock__bar { left: auto; right: 24px; }
}
.ana-dock--catch .ana-dock__bar-avatar { animation: ana-catch .5s ease; }
@keyframes ana-catch {
  0% { transform: scale(1); }
  35% { transform: scale(1.28); box-shadow: inset 0 0 0 2px rgba(255,255,255,.5), 0 0 26px rgba(210,193,150,.9); }
  100% { transform: scale(1); }
}
.ana-fly-pill {
  position: fixed; z-index: 100001; pointer-events: none;
  display: flex; align-items: center; overflow: hidden;
  padding: 0 18px; border-radius: 999px;
  background: #fff; color: #252A2C;
  font: 500 15px/1.4 Montserrat, sans-serif;
  white-space: nowrap; text-overflow: ellipsis;
  box-shadow: 0 0 0 1px rgba(149,131,89,.35), 0 8px 30px rgba(149,131,89,.45), 0 0 42px rgba(210,193,150,.8);
  will-change: transform, opacity;
}

/* ---- v0.32.0 header actions: 'Clear chat' text pill + minimize chevron ----
   The clear control reads as words now (was a trashcan); the close button
   points down because it minimises rather than ends the chat. */
.ana-dock__clear {
  width: auto; height: 26px; padding: 0 12px;
  font: 600 11px/1 Montserrat, sans-serif;
  letter-spacing: .5px; text-transform: uppercase; white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px;
}
.ana-dock__clear:hover { background: rgba(255, 255, 255, .16); opacity: 1; }

/* ---- v0.33.0: the minimise chevron in the bottom-right pill ----
   .ana-dock__bar-hide is absolutely positioned inside .ana-dock__bar (it can't
   nest inside the open button), so the pill has to reserve room for it. The
   original left-edge tab did that with padding-right:40px; the bottom-right
   pill above cut the padding to 20px for the round shape, and the 28px button
   landed on top of the last word of the label. Reserve 44px again
   (10 gap + 26 button + 8 breathing room) and size the button to the smaller
   pill.
   The glyph is a left chevron because the bar used to hide off the LEFT edge;
   the pill now collapses towards the right, so it is mirrored here rather than
   re-cut in the markup — the left-edge layout below 768px still wants the
   original direction. */
@media (min-width: 768px) {
  .ana-dock__bar-open { padding: 7px 44px 7px 7px; }
  .ana-dock__bar-hide { right: 10px; width: 26px; height: 26px; }
  .ana-dock__bar-hide svg { transform: scaleX(-1); }
}