.mahira-chat-toggle {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 9998;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #8a1f2b, #c9a15a);
  color: #fff;
  font-size: 1.4rem;
  box-shadow: 0 10px 24px rgba(138, 31, 43, .35);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease;
}
.mahira-chat-toggle:hover { transform: scale(1.06); }
.mahira-chat-toggle .badge-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 12px;
  height: 12px;
  background: #3f9142;
  border: 2px solid #fff;
  border-radius: 50%;
}

.mahira-chat-panel {
  position: fixed;
  bottom: 92px;
  right: 22px;
  z-index: 9999;
  width: 340px;
  max-width: calc(100vw - 32px);
  height: 480px;
  max-height: calc(100vh - 140px);
  background: #fdfaf5;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(30, 20, 10, .25);
  display: none;
  flex-direction: column;
  overflow: hidden;
  font-family: 'Montserrat', system-ui, sans-serif;
}
.mahira-chat-panel.open { display: flex; }

.mahira-chat-header {
  background: linear-gradient(135deg, #8a1f2b, #b0392f);
  color: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.mahira-chat-header img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: #fff; }
.mahira-chat-header .title { font-weight: 700; font-size: .95rem; line-height: 1.1; }
.mahira-chat-header .subtitle { font-size: .72rem; opacity: .85; }
.mahira-chat-header .close-chat { margin-left: auto; background: none; border: none; color: #fff; font-size: 1rem; cursor: pointer; opacity: .85; }
.mahira-chat-header .close-chat:hover { opacity: 1; }

.mahira-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mahira-chat-msg {
  max-width: 82%;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: .86rem;
  line-height: 1.45;
  white-space: pre-wrap;
}
.mahira-chat-msg.bot { align-self: flex-start; background: #f1e6d8; color: #33291f; border-bottom-left-radius: 3px; }
.mahira-chat-msg.user { align-self: flex-end; background: #8a1f2b; color: #fff; border-bottom-right-radius: 3px; }
.mahira-chat-msg.typing { display: flex; gap: 4px; align-items: center; }
.mahira-chat-msg.typing span { width: 6px; height: 6px; border-radius: 50%; background: #a08f76; animation: mahira-typing 1.1s infinite ease-in-out; }
.mahira-chat-msg.typing span:nth-child(2) { animation-delay: .15s; }
.mahira-chat-msg.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes mahira-typing { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

.mahira-chat-suggestions { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.mahira-chat-suggestions button {
  border: 1px solid #e6d9c2;
  background: #fff;
  color: #8a1f2b;
  font-size: .74rem;
  padding: 5px 10px;
  border-radius: 20px;
  cursor: pointer;
}
.mahira-chat-suggestions button:hover { background: #f1e6d8; }

.mahira-chat-input {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid #ece2d0;
  background: #fff;
}
.mahira-chat-input input {
  flex: 1;
  border: 1px solid #e6d9c2;
  border-radius: 20px;
  padding: 9px 14px;
  font-size: .85rem;
  outline: none;
}
.mahira-chat-input input:focus { border-color: #c9a15a; }
.mahira-chat-input button {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: #8a1f2b;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mahira-chat-input button:disabled { opacity: .5; cursor: default; }

@media (max-width: 480px) {
  .mahira-chat-panel { right: 16px; left: 16px; width: auto; bottom: 84px; }
  .mahira-chat-toggle { bottom: 16px; right: 16px; }
}