/* Refreshed Floating Button */
#chatbot-container { position: fixed; bottom: 22px; right: 22px; z-index: 2147483647; }
#chatbot-container * { box-sizing: border-box; font-family: 'Inter', ui-sans-serif, system-ui; }

.chatbot-icon {
  width: 64px; height: 64px; border: 0; outline: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 18px; cursor: pointer;
  color: #0f172a;
  background: radial-gradient(120% 120% at 30% 20%, #ffeaa7 0%, #d4af37 55%, #b28a16 100%);
  box-shadow: 0 10px 26px rgba(212,175,55,.35), inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.chatbot-icon:hover { transform: translateY(-2px); filter: brightness(1.03); }
.chatbot-icon:active { transform: translateY(0); filter: brightness(.98); }
.chatbot-icon svg { pointer-events: none; }

/* Bubble (teaser) */
.chatbot-bubble {
  position: absolute; bottom: 78px; right: 0;
  background: #0b1220; color: #e5eefc;
  border: 1px solid rgba(255,255,255,.12);
  padding: 10px 12px; border-radius: 14px 14px 6px 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  min-width: 210px; max-width: 260px;
}
.chatbot-bubble::after {
  content: ""; position: absolute; right: 18px; bottom: -7px;
  width: 12px; height: 12px; background: #0b1220; transform: rotate(45deg);
  border-right: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12);
}
.typing-animation { display: flex; gap: 5px; align-items: center; }
.typing-animation span { width: 6px; height: 6px; border-radius: 50%; background: #ffd479; opacity: .8; animation: typingDots 1.2s infinite ease-in-out; }
.typing-animation span:nth-child(2){ animation-delay: .15s; }
.typing-animation span:nth-child(3){ animation-delay: .3s; }
@keyframes typingDots { 0%,60%,100%{ transform: translateY(0);} 30%{ transform: translateY(-7px);} }

/* Modal polish - positioned above widget */
.chatbot-modal { 
  position: fixed; 
  bottom: 100px; 
  right: 22px; 
  background: transparent; 
  display: none; 
  align-items: flex-end; 
  justify-content: flex-end; 
  z-index: 2147483647; 
  visibility: hidden; 
  opacity: 0; 
  transition: all .3s ease; 
  pointer-events: none;
}
.chatbot-modal[style*="display: flex"] { 
  opacity: 1; 
  pointer-events: auto;
}
.chatbot-modal-content { 
  width: 380px; 
  height: 500px; 
  background: #0b1220; 
  color: #d8e3ff; 
  border: 1px solid rgba(255,255,255,.12); 
  border-radius: 20px 20px 8px 20px; 
  overflow: hidden; 
  box-shadow: 0 20px 40px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.05); 
  display: flex; 
  flex-direction: column;
  backdrop-filter: blur(10px);
  animation: slideUpFade 0.3s ease;
}

@keyframes slideUpFade {
  from { 
    opacity: 0; 
    transform: translateY(20px) scale(0.95); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0) scale(1); 
  }
}
.chatbot-header { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  padding: 16px 20px; 
  border-bottom: 1px solid rgba(255,255,255,.12); 
  background: linear-gradient(135deg, #d4af37, #f4e68c); 
  color: #1f2937;
}
.chatbot-header h3 { 
  margin: 0; 
  font-size: 18px; 
  font-weight: 700; 
  color: #1f2937; 
  display: flex; 
  align-items: center; 
  gap: 8px;
}
.chatbot-header h3::before {
  content: "💬";
  font-size: 20px;
}
.chat-close { 
  border: 0; 
  background: rgba(0,0,0,.1); 
  color: #1f2937; 
  font-size: 20px; 
  width: 32px; 
  height: 32px; 
  border-radius: 8px; 
  cursor: pointer; 
  display: flex; 
  align-items: center; 
  justify-content: center;
  transition: all 0.2s ease;
}
.chat-close:hover { 
  background: rgba(0,0,0,.2); 
  transform: scale(1.1);
}

.chat-messages { 
  flex: 1; 
  padding: 20px; 
  overflow-y: auto; 
  display: flex; 
  flex-direction: column; 
  gap: 12px; 
  background: linear-gradient(180deg, rgba(255,255,255,.02) 0%, transparent 100%);
}
.message { 
  max-width: 85%; 
  padding: 12px 16px; 
  border-radius: 16px; 
  font-size: 14px; 
  line-height: 1.5; 
  word-wrap: break-word;
  animation: messageSlide 0.3s ease;
}
@keyframes messageSlide {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.message.bot { 
  background: linear-gradient(135deg, rgba(125,178,255,.15), rgba(125,178,255,.08)); 
  color: #d8e3ff; 
  border: 1px solid rgba(125,178,255,.2); 
  align-self: flex-start; 
  border-bottom-left-radius: 6px;
}
.message.user { 
  background: linear-gradient(135deg, #ffd479, #f4e68c); 
  color: #1f2937; 
  border: 1px solid rgba(255,212,121,.3); 
  align-self: flex-end; 
  border-bottom-right-radius: 6px;
  font-weight: 500;
}
.message-buttons { 
  display: grid; 
  grid-template-columns: 1fr; 
  gap: 8px; 
  margin-top: 10px; 
}
.chat-button { 
  background: linear-gradient(135deg, #ffd479, #f4e68c); 
  color: #1f2937; 
  border: 0; 
  padding: 12px 16px; 
  border-radius: 12px; 
  font-weight: 600; 
  cursor: pointer; 
  transition: all 0.2s ease;
  text-align: left;
}
.chat-button:hover { 
  transform: translateX(4px); 
  box-shadow: 0 4px 12px rgba(255,212,121,.3);
}

.chat-input-container { 
  display: flex; 
  gap: 12px; 
  padding: 16px 20px; 
  border-top: 1px solid rgba(255,255,255,.12); 
  background: rgba(0,0,0,.1);
}
.chat-input { 
  flex: 1; 
  background: rgba(255,255,255,.08); 
  border: 1px solid rgba(255,255,255,.15); 
  color: #e5eefc; 
  border-radius: 20px; 
  padding: 12px 16px; 
  outline: none; 
  font-size: 14px;
  transition: all 0.2s ease;
}
.chat-input::placeholder { color: #9db0d0; }
.chat-input:focus { 
  border-color: #ffd479; 
  box-shadow: 0 0 0 2px rgba(255,212,121,.2);
  background: rgba(255,255,255,.12);
}
.chat-send { 
  background: linear-gradient(135deg, #ffd479, #f4e68c); 
  color: #1f2937; 
  border: 0; 
  border-radius: 20px; 
  padding: 12px 18px; 
  font-weight: 700; 
  cursor: pointer; 
  transition: all 0.2s ease;
  min-width: 60px;
}
.chat-send:hover { 
  transform: scale(1.05); 
  box-shadow: 0 4px 12px rgba(255,212,121,.3);
}

/* Property cards */
.property-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 12px; }
.property-card img { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; margin-bottom: 8px; }
.property-title { font-weight: 700; color: #e5eefc; margin-bottom: 4px; }
.property-price { color: #ffd479; font-weight: 800; margin-bottom: 2px; }
.property-location { color: #9db0d0; font-size: 12px; margin-bottom: 8px; }
.property-actions { display: flex; gap: 8px; }
.property-btn { background: #ffd479; border: 0; color: #111827; border-radius: 10px; padding: 6px 10px; font-size: 12px; cursor: pointer; }
.property-btn:hover { filter: brightness(1.05); }

/* Mobile */
@media (max-width: 520px){ 
  .chatbot-modal { 
    bottom: 90px; 
    right: 10px; 
    left: 10px; 
  }
  .chatbot-modal-content{ 
    width: 100%; 
    height: 400px; 
  } 
}