/* HandyMaps Virtual Broker — AI presenter, proximity results, presentation surfaces */

.hm-presenter {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1100;
  width: min(390px,calc(100vw - 28px));
  pointer-events: none;
  font-family: Rubik,system-ui,sans-serif;
}
.hm-presenter-toggle {
  pointer-events: auto;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 7px 15px 7px 7px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  background: rgba(5,14,22,.94);
  color: var(--hm-white);
  box-shadow: 0 18px 55px rgba(4,10,18,.3);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  cursor: pointer;
}
.hm-toggle-orb {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg,#35d399,#60a5fa);
  color: var(--hm-text-on-accent);
  font-weight: 900;
}
.hm-toggle-label {
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.hm-presenter[data-open="true"] .hm-presenter-toggle { display: none; }
.hm-presenter-toggle.has-nudge .hm-toggle-orb {
  -webkit-animation: aiNudge 1.8s ease-in-out infinite;
  animation: aiNudge 1.8s ease-in-out infinite;
}
@-webkit-keyframes aiNudge {0%,100%{box-shadow:0 0 0 0 rgba(53,211,153,.35)}50%{box-shadow:0 0 0 12px rgba(53,211,153,0)}}
@keyframes aiNudge {0%,100%{box-shadow:0 0 0 0 rgba(53,211,153,.35)}50%{box-shadow:0 0 0 12px rgba(53,211,153,0)}}
.hm-presenter-panel {
  pointer-events: auto;
  display: none;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 22px;
  background: rgba(7,15,24,.94);
  color: #f8fafc;
  box-shadow: 0 24px 80px rgba(0,0,0,.38);
  backdrop-filter: blur(24px) saturate(1.12);
  -webkit-backdrop-filter: blur(24px) saturate(1.12);
}
.hm-presenter[data-open="true"] .hm-presenter-panel {
  display: block;
  -webkit-animation: aiPanelIn .25s ease-out both;
  animation: aiPanelIn .25s ease-out both;
}
@-webkit-keyframes aiPanelIn {from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes aiPanelIn {from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.hm-presenter-head {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 13px 13px 10px;
  background: rgba(3,9,15,.76);
}
.hm-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 30%,#a7f3d0,#35d399 48%,#0f766e);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.24);
}
.hm-avatar img {
  font-size: 11px;
  font-weight: 900;
  color: #04251c;
}
.hm-presenter-title strong,.hm-presenter-title small { display: block; }
.hm-presenter-title strong { font-size: 13px; }
.hm-presenter-title small {
  margin-top: 3px;
  color: #9fb0bd;
  font-size: 9px;
}
.hm-presenter-title i {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  background: #35d399;
}
.hm-presenter-tools {
  display: flex;
  gap: 5px;
}
.hm-presenter-tools button,.hm-presenter-foot button {
  border: 0;
  background: rgba(255,255,255,.07);
  color: #d8e3ea;
  border-radius: 9px;
  min-width: 30px;
  height: 30px;
  cursor: pointer;
}
.hm-progress {
  height: 3px;
  background: rgba(255,255,255,.06);
}
.hm-progress span {
  display: block;
  height: 100%;
  width: 5%;
  background: linear-gradient(90deg,#35d399,#60a5fa);
  transition: width .4s ease;
}
.hm-chat-log {
  height: min(430px,52vh);
  overflow-y: auto;
  padding: 14px 12px 6px;
  scroll-behavior: smooth;
}
.ai-message {
  display: flex;
  gap: 8px;
  margin: 0 0 10px;
  align-items: flex-end;
}
.ai-message.user { justify-content: flex-end; }
.ai-mini-avatar {
  width: 25px;
  height: 25px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #dffcf1;
  color: #075f53;
  font-size: 8px;
  font-weight: 900;
}
.ai-bubble {
  max-width: 82%;
  padding: 10px 12px;
  border-radius: 14px 14px 14px 4px;
  background: #eef6f4;
  color: #10201c;
  font-size: 11px;
  line-height: 1.5;
  box-shadow: 0 5px 16px rgba(0,0,0,.06);
}
.ai-message.user .ai-bubble {
  border-radius: 14px 14px 4px 14px;
  background: #35d399;
  color: #05251c;
  font-weight: 700;
}
.ai-message.rich .ai-bubble {
  max-width: 94%;
  width: 94%;
}
.hm-typing {
  display: flex;
  gap: 4px;
  width: max-content;
  margin: 0 0 9px 45px;
  padding: 9px 12px;
  border-radius: 14px;
  background: #eef6f4;
}
.hm-typing span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #64748b;
  -webkit-animation: aiDot 1s infinite;
  animation: aiDot 1s infinite;
}
.hm-typing span:nth-child(2) {
  -webkit-animation-delay: .12s;
  animation-delay: .12s;
}
.hm-typing span:nth-child(3) {
  -webkit-animation-delay: .24s;
  animation-delay: .24s;
}
@-webkit-keyframes aiDot {0%,80%,100%{transform:translateY(0);opacity:.45}40%{transform:translateY(-3px);opacity:1}}
@keyframes aiDot {0%,80%,100%{transform:translateY(0);opacity:.45}40%{transform:translateY(-3px);opacity:1}}
.hm-response-area {
  padding: 8px 12px 12px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.ai-quick-replies {
  display: grid;
  gap: 7px;
  max-height: 220px;
  overflow: auto;
}
.ai-reply,.ai-result-actions button {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(255,255,255,.055);
  color: var(--hm-text-light);
  padding: 10px 11px;
  cursor: pointer;
}
.ai-reply:hover,.ai-result-actions button:hover {
  border-color: rgba(53,211,153,.55);
  background: rgba(53,211,153,.11);
}
.ai-reply strong,.ai-reply small { display: block; }
.ai-reply strong { font-size: 11px; }
.ai-reply small {
  margin-top: 3px;
  color: #94a3b8;
  font-size: 9px;
  line-height: 1.35;
}
.ai-input-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 7px;
}
.ai-input-row input {
  min-width: 0;
  border: 1px solid var(--hm-surface-13);
  border-radius: 12px;
  background: rgba(255,255,255,.07);
  color: var(--hm-white);
  padding: 11px;
  font: inherit;
  font-size: 11px;
  outline: none;
}
.ai-input-row input:focus { border-color: #35d399; }
.ai-input-row button {
  border: 0;
  border-radius: 12px;
  background: #35d399;
  color: #05251c;
  padding: 0 12px;
  font-weight: 900;
  font-size: 10px;
  cursor: pointer;
}
.ai-input-row small {
  grid-column: 1/-1;
  color: #fca5a5;
  min-height: 12px;
  font-size: 9px;
}
.ai-analysis-list {
  display: grid;
  gap: 6px;
}
.ai-analysis-list div {
  padding: 8px 9px;
  border-radius: 10px;
  background: rgba(255,255,255,.05);
  color: #b9c7d0;
  font-size: 10px;
}
.ai-analysis-list span {
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  margin-right: 7px;
  border-radius: 50%;
  background: rgba(53,211,153,.15);
  color: #6ee7b7;
}
.ai-result-card small,.ai-result-card strong,.ai-result-card span,.ai-result-card b { display: block; }
.ai-result-card small {
  font-size: 8px;
  letter-spacing: .12em;
  color: #0f766e;
}
.ai-result-card strong {
  font-size: 17px;
  margin-top: 4px;
}
.ai-result-card span {
  margin-top: 2px;
  color: #667a73;
  font-size: 9px;
}
.ai-result-card b {
  margin-top: 9px;
  font-size: 20px;
  color: #087f5b;
}
.ai-result-card ul {
  padding-left: 17px;
  margin: 8px 0 0;
  color: #52645e;
  font-size: 9px;
  line-height: 1.5;
}
.ai-result-actions button {
  font-size: 9px;
  text-align: center;
  padding: 9px 6px;
}
.ai-compare>strong {
  display: block;
  margin-bottom: 7px;
}
.ai-compare button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 0;
  border-top: 1px solid #dbe6e2;
  background: transparent;
  padding: 8px 0;
  text-align: left;
  color: #1a2b25;
  cursor: pointer;
}
.ai-compare button span,.ai-compare button small { display: block; }
.ai-compare button small {
  color: #6d8179;
  font-size: 8px;
  margin-top: 2px;
}
.ai-compare button b { color: #087f5b; }
.hm-presenter-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px 10px;
  color: #778994;
  font-size: 8px;
}
.hm-presenter-foot button {
  width: auto;
  padding: 0 8px;
  font-size: 8px;
}
@media (max-width:600px) {
  .hm-presenter {
    right: 10px;
    bottom: 10px;
    width: calc(100vw - 20px);
  }
  .hm-presenter-panel { border-radius: 18px; }
  .hm-chat-log { height: min(420px,55vh); }
  .hm-toggle-label { display: none; }
  .hm-presenter-toggle { padding-right: 7px; }
  .ai-result-actions { grid-template-columns: 1fr; }
}
.ai-nearby-list>strong {
  display: block;
  margin-bottom: 7px;
  color: #0f172a;
}
.ai-nearby-list button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 0;
  border-top: 1px solid #dbe6e2;
  background: transparent;
  padding: 8px 0;
  text-align: left;
  color: #1a2b25;
  cursor: pointer;
}
.ai-nearby-list button span,.ai-nearby-list button small { display: block; }
.ai-nearby-list button small {
  color: #6d8179;
  font-size: 8px;
  margin-top: 2px;
}
.ai-nearby-list button b {
  color: #087f5b;
  white-space: nowrap;
}
.ai-free-text-row { grid-template-columns: minmax(0,1fr) auto; }
.hm-presenter[data-open="true"] { width: min(420px,calc(100vw - 28px)); }
.hm-presenter-title small { max-width: 220px; }
.hm-response-area .ai-quick-replies { scrollbar-width: thin; }
.ai-result-actions button:nth-child(2) { border-color: rgba(56,189,248,.35); }
.maplibregl-map .maplibregl-canvas { outline: none; }
@media (max-width:600px) {
  .hm-presenter[data-open="true"] { width: calc(100vw - 20px); }
}
.vb-overlay {
  position: fixed;
  inset: 0;
  z-index: 10040;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(3,7,10,.56);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.vb-overlay[hidden] { display: none; }
.vb-shell {
  width: min(1120px,96vw);
  max-height: 90vh;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 24px;
  background: rgba(12,17,21,.97);
  box-shadow: 0 28px 90px rgba(0,0,0,.45);
  color: #fff;
  display: grid;
  grid-template-rows: auto 1fr;
}
.vb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.vb-head small {
  display: block;
  opacity: .65;
  margin-top: 3px;
}
.vb-head button {
  border: 0;
  background: rgba(255,255,255,.1);
  color: #fff;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  font-size: 20px;
}
.vb-body {
  overflow: auto;
  padding: 18px;
}
.vb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  gap: 14px;
}
.vb-card {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.055);
  border-radius: 18px;
  overflow: hidden;
  text-align: left;
  color: inherit;
}
.vb-card img,.vb-media-main img {
  width: 100%;
  aspect-ratio: 16/10;
  -o-object-fit: cover;
  object-fit: cover;
  display: block;
  background: #1b242b;
}
.vb-card .vb-copy { padding: 12px; }
.vb-card strong { display: block; }
.vb-card small {
  opacity: .68;
  display: block;
  margin-top: 5px;
  line-height: 1.35;
}
.vb-card button,.vb-action {
  margin-top: 10px;
  border: 0;
  border-radius: 10px;
  padding: 9px 11px;
  background: #fff;
  color: #111;
  font-weight: 700;
  cursor: pointer;
}
.vb-badge {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  font-size: 11px;
  margin-bottom: 8px;
}
.vb-unit-row {
  display: grid;
  grid-template-columns: 1.25fr .9fr .8fr .9fr 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.vb-unit-row small { opacity: .7; }
.vb-payment {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 12px;
}
.vb-pay-step {
  padding: 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  text-align: center;
}
.vb-pay-step b {
  font-size: 24px;
  display: block;
}
.vb-note {
  margin-top: 14px;
  padding: 11px 13px;
  border: 1px solid rgba(255,200,80,.25);
  border-radius: 12px;
  background: rgba(255,180,60,.07);
  font-size: 12px;
  opacity: .82;
}
.vb-story {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}
.vb-story span {
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--hm-surface-08);
  font-size: 11px;
}
.ai-result-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.ai-result-actions button { min-height: 42px; }
.travel-time-chip { font-weight: 800; }
.vb-video-fake { position: relative; }
.vb-video-fake:after {
  content: "▶";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 42px;
  text-shadow: 0 4px 18px #000;
}
.vb-gallery-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.vb-gallery-toolbar button {
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  color: #fff;
  border-radius: 999px;
  padding: 7px 10px;
}
.vb-gallery-toolbar button.active {
  background: #fff;
  color: #111;
}
@media (max-width:720px) {
  .vb-overlay { padding: 8px; }
  .vb-shell {
    width: 100%;
    max-height: 94vh;
    border-radius: 18px;
  }
  .vb-unit-row { grid-template-columns: 1fr 1fr; }
  .vb-unit-row>*:nth-child(5) { grid-column: 1/2; }
  .vb-payment { grid-template-columns: 1fr; }
  .ai-result-actions { grid-template-columns: 1fr; }
}

/* v24 — unified Virtual Broker icon */
.hm-toggle-orb img {
  width: 24px;
  height: 24px;
  display: block;
  object-fit: contain;
}
.hm-avatar { overflow: hidden; }
.hm-avatar img {
  width: 27px;
  height: 27px;
  display: block;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

/* v25 — Virtual Broker follows the global light/dark theme switch */
.hm-presenter-toggle {
  border-color: var(--line) !important;
  background: var(--hm-panel-strong) !important;
  color: var(--ink) !important;
  box-shadow: var(--hm-shadow) !important;
}
.hm-toggle-orb {
  background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
  color: #06130f !important;
}
.hm-presenter-panel {
  border-color: var(--line) !important;
  background: var(--hm-panel-strong) !important;
  color: var(--ink) !important;
  box-shadow: var(--hm-shadow) !important;
}
.hm-presenter-head {
  background: var(--hm-panel) !important;
  border-bottom: 1px solid var(--line);
}
.hm-presenter-title small,
.hm-presenter-foot { color: var(--muted) !important; }
.hm-presenter-title i { background: var(--accent) !important; }
.hm-presenter-tools button,
.hm-presenter-foot button {
  background: var(--hm-control) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
}
.hm-presenter-tools button:hover,
.hm-presenter-foot button:hover {
  background: var(--hm-control-hover) !important;
}
.hm-progress { background: var(--line-dark) !important; }
.hm-progress span { background: linear-gradient(90deg, var(--accent), var(--accent-2)) !important; }
.hm-response-area { border-top-color: var(--line) !important; }
.ai-mini-avatar {
  background: rgba(55,201,145,.15) !important;
  color: #087466 !important;
  border: 1px solid rgba(55,201,145,.28);
}
.ai-bubble {
  background: var(--hm-panel-soft) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line);
}
.ai-message.user .ai-bubble {
  background: var(--accent) !important;
  color: #06130f !important;
  border-color: rgba(55,201,145,.65) !important;
}
.hm-typing { background: var(--hm-panel-soft) !important; border: 1px solid var(--line); }
.hm-typing span { background: var(--muted) !important; }
.ai-reply,
.ai-result-actions button {
  border-color: var(--line) !important;
  background: var(--hm-control) !important;
  color: var(--ink) !important;
}
.ai-reply:hover,
.ai-reply:focus-visible,
.ai-result-actions button:hover,
.ai-result-actions button:focus-visible {
  border-color: rgba(55,201,145,.55) !important;
  background: rgba(55,201,145,.11) !important;
}
.ai-reply small { color: var(--muted) !important; }
.ai-input-row input {
  border-color: var(--line) !important;
  background: var(--hm-control) !important;
  color: var(--ink) !important;
}
.ai-input-row input::placeholder { color: var(--muted) !important; }
.ai-input-row button {
  background: var(--accent) !important;
  color: #06130f !important;
}
.ai-analysis-list div {
  background: var(--hm-control) !important;
  color: var(--muted) !important;
  border: 1px solid var(--line);
}
.ai-analysis-list span { background: rgba(55,201,145,.14) !important; color: #087466 !important; }
.ai-result-card small,
.ai-result-card b,
.ai-compare button b,
.ai-nearby-list button b { color: #087466 !important; }
.ai-result-card span,
.ai-result-card ul,
.ai-compare button small,
.ai-nearby-list button small { color: var(--muted) !important; }
.ai-compare button,
.ai-nearby-list button {
  border-top-color: var(--line) !important;
  color: var(--ink) !important;
}
.ai-nearby-list>strong { color: var(--ink) !important; }
.vb-shell {
  border-color: var(--line) !important;
  background: var(--hm-panel-strong) !important;
  color: var(--ink) !important;
  box-shadow: var(--hm-shadow) !important;
}
.vb-head { border-bottom-color: var(--line) !important; }
.vb-head button,
.vb-gallery-toolbar button,
.vb-card,
.vb-pay-step,
.vb-story span {
  border-color: var(--line) !important;
  background: var(--hm-control) !important;
  color: var(--ink) !important;
}
.vb-card button,
.vb-action,
.vb-gallery-toolbar button.active {
  background: var(--hm-active) !important;
  color: var(--hm-active-text) !important;
}
.vb-unit-row { border-bottom-color: var(--line) !important; }
.vb-note { color: var(--ink) !important; }
html[data-theme="dark"] .ai-result-card small,
html[data-theme="dark"] .ai-result-card b,
html[data-theme="dark"] .ai-compare button b,
html[data-theme="dark"] .ai-nearby-list button b,
html[data-theme="dark"] .ai-analysis-list span,
html[data-theme="dark"] .ai-mini-avatar { color: #77f0e2 !important; }

/* v26 presenter uses shared SVG sprite icons */
.hm-toggle-orb .hm-sprite-icon { width: 22px; height: 22px; }
.hm-avatar .hm-sprite-icon { width: 25px; height: 25px; color: #fff; }
.hm-presenter-tools .hm-sprite-icon { width: 14px; height: 14px; }
.hm-presenter-foot button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hm-presenter-foot button .hm-sprite-icon { width: 13px; height: 13px; }
.fancybox-close .hm-sprite-icon { width: 17px; height: 17px; }


/* EM-Properties presenter theme alignment */
.hm-toggle-orb, .hm-progress span {
  background: linear-gradient(135deg, #d4af62, #b9954e) !important;
}
html[data-theme="dark"] .hm-presenter-toggle,
html[data-theme="dark"] .hm-presenter-panel {
  background: rgba(9,13,14,.96) !important;
  color: #f7f1e4 !important;
  border-color: rgba(212,175,98,.24) !important;
}
html[data-theme="dark"] .hm-presenter-head { background: rgba(20,26,27,.86) !important; }
html[data-theme="dark"] .hm-avatar {
  background: radial-gradient(circle at 30% 30%, #f2ddb0, #d4af62 48%, #80652f) !important;
}
html[data-theme="dark"] .ai-mini-avatar { background: rgba(212,175,98,.16) !important; color: #d4af62 !important; }
html[data-theme="dark"] .ai-bubble { background: #f6f1e7 !important; color: #171b1c !important; }
html[data-theme="dark"] .ai-message.user .ai-bubble { background: #d4af62 !important; color: #171b1c !important; }
html[data-theme="dark"] .ai-reply,
html[data-theme="dark"] .ai-result-actions button { border-color: rgba(212,175,98,.20) !important; }
html[data-theme="dark"] .ai-reply:hover,
html[data-theme="dark"] .ai-result-actions button:hover { border-color: rgba(212,175,98,.58) !important; background: rgba(212,175,98,.12) !important; }
html[data-theme="light"] .hm-presenter-toggle,
html[data-theme="light"] .hm-presenter-panel {
  background: rgba(255,253,248,.96) !important;
  color: #171b1c !important;
  border-color: rgba(122,94,43,.20) !important;
  box-shadow: 0 22px 70px rgba(74,56,28,.18) !important;
}
html[data-theme="light"] .hm-presenter-head { background: rgba(248,243,233,.92) !important; }
html[data-theme="light"] .hm-presenter-title small { color: #6f6a60 !important; }
html[data-theme="light"] .hm-presenter-tools button,
html[data-theme="light"] .hm-presenter-foot button,
html[data-theme="light"] .ai-reply,
html[data-theme="light"] .ai-result-actions button {
  background: rgba(122,94,43,.07) !important;
  color: #171b1c !important;
  border-color: rgba(122,94,43,.16) !important;
}
html[data-theme="light"] .ai-bubble { background: #f4eee2 !important; color: #171b1c !important; }
html[data-theme="light"] .ai-message.user .ai-bubble { background: #d4af62 !important; color: #171b1c !important; }