body{font-family:Inter,system-ui,Segoe UI,Roboto,Arial;background:#f7fafc;color:#0f172a; margin: 0; padding: 0;}
.chat-wrap{
      /* max-width: 420px; */
    width: 100%;
    min-height: 100vh;
    /* margin: 40px auto; */
    background: #ffffff;
    border-radius: 0px;
    box-shadow: 0 6px 20px rgba(2, 6, 23, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
header{padding:10px;border-bottom:1px solid #eef2f7;display:flex;justify-content:flex-start;align-items:center;height: 30px;gap: 10px; background: #7a5b31;}
header h1{font-size:1.2em;color:#ffffff;font-weight: 500 !important;}
main#messages {
    height: calc(100vh - 112px);
    overflow: hidden;
    padding: 5px 10px;
    overflow-y: auto;
}
.message{margin-bottom:12px}
.message.user{text-align:right}
.message .bubble{display:inline-block;padding:10px 12px;border-radius:10px}
.message.user .bubble{background:#2563eb;color:white}
.message.bot .bubble{background:#f1f5f9;color:#0f172a}
form{display:flex;border-top:1px solid #eef2f7;height: 50px;}
form input{flex:1;padding:12px;border: none; background: #ffffff; outline: none;}
form button{padding:12px;border:0;background:#111827;color:white}
/* #status{font-size:0.9rem;color:#6b7280; margin-right: 40px;} */
.options { margin: 8px 0 16px; display:flex; gap:8px; flex-wrap:wrap; }
.option-btn { padding:8px 12px; border-radius:8px; border:1px solid #e2e8f0; background:#fff; cursor:pointer; }
.option-btn:hover { box-shadow:0 2px 8px rgba(0,0,0,0.06); }
.suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 20px;
}
#status {
    width: 30px;
    height: 30px;
    background: #ffffff;
    border: 1px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 2px;
    position: relative;
    margin: 0;
}

.suggestion-btn {
  padding: 6px 12px;
  background: #eef3ff;
  color: #1f4cff;
  border: 1px solid #d7dfff;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  text-align: start;
}

.suggestion-btn:hover {
  background: #dfe7ff;
}
.message {
  display: flex;
  align-items: flex-start;
  margin: 10px 0;
}

.message.bot {
  flex-direction: row;
}

.message.user {
  flex-direction: row-reverse;
}

.avatar {
  width: 38px;
  height: 38px;
  /* background: #e0e7ff; */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin: 0 10px 0 0;
}

.message.user .avatar {
  /* background: #d1fae5; */
  margin: 0;
  margin-left: 10px;
}

.bubble {
  max-width: 70%;
  padding: 12px 15px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.4;
}

.message.bot .bubble {
  background: #f3f4f6; /* light gray */
}

.message.user .bubble {
  background: #dbeafe; /* light blue */
  color: black;
}
.typing .bubble {
  background: #f3f4f6;
  padding: 12px 16px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.typing-bubble .dot {
  width: 8px;
  height: 8px;
  background: #9ca3af;
  border-radius: 50%;
  display: inline-block;
  animation: blink 1.4s infinite both;
}

.typing-bubble .dot:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-bubble .dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes blink {
  0% { opacity: .2; transform: translateY(0); }
  20% { opacity: 1; transform: translateY(-3px); }
  100% { opacity: .2; transform: translateY(0); }
}
.status-dot {
  height: 10px;
  width: 10px;
  background-color: #22c55e; /* green-500 */
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
  position: absolute;
  bottom: 0;
  right: -10px;
  border: 1px solid #ffffff;
}
/* message controls (copy button) */
.msg-controls {
  display: flex;
  align-items: center;
  margin-left: 8px;
}

.copy-btn {
  border: none;
  background: #eef2ff;
  color: #1f4bff;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
}

.copy-btn:hover {
  filter: brightness(0.95);
}

/* ensure controls align nicely on smaller screens */
.message.bot .msg-controls { margin-left: 10px; }
h2{
  font-size: larger;
  padding: 0;
  margin: 5px 0;
}

.property-card {
  border: 1px solid #e6eefc;
  padding: 12px;
  border-radius: 8px;
  margin: 8px 0 16px;
  background: #fbfdff;
}
.property-card .pc-title { font-weight: 700; margin-bottom: 6px; }
.property-card .pc-row { font-size: 14px; margin: 4px 0; }
ul{
  padding: 0px;
  list-style-type: none;
  overflow: overlay;
}