/* css/luna-world.css — Luna's worldwide answers (js/luna-world.js + app.js): the "searching every agency…" state,
   three compact agency cards, the "…and N more from other agencies" line, and the "Open this home" link. Brand kit only: light sky, white glass,
   gold, slate ink, blue shadows. Motion is transform/opacity only and stops under reduced motion. */

/* ── waiting: her bubble says where she is looking, three gold dots breathe ── */
.msg.luna.hw-pending .hw-wait{display:flex;align-items:center;gap:9px;color:var(--body,#2a3550)}
.hw-dots{display:inline-flex;gap:4px;flex:none}
.hw-dots i{width:7px;height:7px;border-radius:50%;background:var(--gold,#e8c26a);box-shadow:0 0 8px rgba(232,194,106,.7);animation:hwDot 1.1s ease-in-out infinite}
.hw-dots i:nth-child(2){animation-delay:.15s}.hw-dots i:nth-child(3){animation-delay:.3s}
@keyframes hwDot{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}

/* ── the cards: three across in the bubble; on a phone, one per row (photo at the start) ── */
.msg.luna:has(.hw-wrap){max-width:100%;width:100%}
.hw-wrap{margin-top:10px;min-width:0}
.hw-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.hw-card{display:flex;flex-direction:column;min-width:0;text-decoration:none;color:var(--ink,#0b1026);
  background:linear-gradient(180deg,#fff 0%,#fbfcfe 100%);border:1px solid #fff;border-radius:var(--r,13px);overflow:hidden;
  box-shadow:var(--bevel,inset 0 1px 0 #fff), var(--e1,0 4px 12px rgba(58,86,130,.12));
  transition:transform .3s var(--ease-out,ease), box-shadow .3s var(--ease-out,ease);
  animation:hwIn .55s var(--ease-out,ease) both;animation-delay:calc(var(--k,0) * 80ms + 60ms)}
.hw-card:hover{transform:translateY(-3px);box-shadow:var(--bevel,inset 0 1px 0 #fff), var(--e2,0 14px 34px -10px rgba(58,86,130,.26))}
.hw-card:focus-visible{outline:2px solid var(--gold-core,#b8852e);outline-offset:2px}
@keyframes hwIn{from{opacity:0;transform:translate3d(0,12px,0) scale(.97)}}
.hw-img{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;
  background:linear-gradient(100deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.65) 50%,rgba(255,255,255,0) 70%) #e4ecf6;background-size:220% 100%;animation:shimmer 1.3s linear infinite}
.hw-img.hw-ready,.hw-img.hw-broken,.hw-img:empty{animation:none}
.hw-img.hw-broken,.hw-img:empty{background:radial-gradient(120% 90% at 30% 20%,#fff,#e8f0fa 55%,#c8dcec)}
.hw-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out,ease)}
.hw-img.hw-broken img{opacity:0}
.hw-card:hover .hw-img img{transform:scale(1.045)}
.hw-body{display:flex;flex-direction:column;gap:2px;padding:8px 10px 10px;min-width:0}
.hw-price{font-family:var(--serif,serif);font-size:17px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hw-meta{font-size:11.5px;color:var(--muted,#56627e);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hw-meta:empty{display:none}
.hw-agency{font-size:11px;font-weight:600;color:var(--gold-text,#7a4f0e);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[dir=rtl] .hw-agency span[aria-hidden]{display:inline-block;transform:scaleX(-1)}

@media (max-width:560px){
  .hw-row{grid-template-columns:1fr;gap:8px}
  .hw-card{flex-direction:row;align-items:stretch}
  .hw-img{flex:0 0 96px;aspect-ratio:auto;min-height:76px}
  .hw-body{justify-content:center;padding:8px 12px;flex:1}
}

/* ── "…and N more from other agencies worldwide" (added once the count is in) ── */
.hw-more{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:8px;padding:8px 10px;border-radius:12px;
  background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,247,226,.85));border:1px solid rgba(232,194,106,.45);
  color:var(--body,#2a3550);font-size:12.5px;animation:hwIn .45s var(--ease-out,ease) both}
.hw-more button{font-size:11.5px;font-weight:600;color:var(--gold-text,#7a4f0e);background:linear-gradient(180deg,#fff3c8,var(--gold-hi,#f6d573));
  border-radius:999px;padding:5px 11px;min-height:32px;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 3px 10px -4px rgba(184,133,46,.6)}
.hw-more button:focus-visible{outline:2px solid var(--gold-core,#b8852e);outline-offset:2px}
@media (pointer:coarse){ .hw-more button{min-height:44px} }

/* ── "Open this home": her one-tap link when the browser would not open the tab for her ── */
.hw-open-row{margin-top:10px;animation:hwIn .45s var(--ease-out,ease) both}
.hw-open{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:8px 16px;border-radius:999px;text-decoration:none;
  font-size:13.5px;font-weight:700;color:var(--gold-text,#7a4f0e);background:linear-gradient(180deg,#fff3c8,var(--gold-hi,#f6d573));
  border:1px solid rgba(232,194,106,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 6px 16px -6px rgba(184,133,46,.55),0 2px 8px rgba(58,86,130,.10);
  transition:transform .25s var(--ease-out,ease),box-shadow .25s var(--ease-out,ease)}
.hw-open:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 10px 22px -8px rgba(184,133,46,.6),0 4px 12px rgba(58,86,130,.14)}
.hw-open:focus-visible{outline:2px solid var(--gold-core,#b8852e);outline-offset:2px}
[dir=rtl] .hw-open span[aria-hidden]{display:inline-block;transform:scaleX(-1)}
@media (pointer:coarse){ .hw-open{min-height:44px} }

@media (prefers-reduced-motion: reduce){
  .hw-dots i,.hw-card,.hw-img,.hw-more,.hw-open-row{animation:none}
  .hw-open{transition:none}.hw-open:hover{transform:none}
  .hw-card,.hw-img img{transition:none}
  .hw-card:hover{transform:none}.hw-card:hover .hw-img img{transform:none}
}
html[data-quality="static"] .hw-dots i,html[data-quality="static"] .hw-card,html[data-quality="static"] .hw-img{animation:none}