/* fab-chat.css */
.fab-container { position: fixed; right: 20px; bottom: 20px; z-index: 1100; }
.fab {
  width: 56px; height: 56px; border-radius: 50%;
  border: none; box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  background: linear-gradient(135deg,#4e73df,#0d6efd);
  color: white; font-size: 22px; cursor: pointer;
  display:flex; align-items:center; justify-content:center;
}
.fab:hover { transform: scale(1.05); }

.chat-backdrop {
  position: fixed; inset:0; background: rgba(0,0,0,0.35); z-index: 1050;
}

.chat-panel {
  position: fixed; right: 0; bottom: 0; top: 0;
  width: 320px; max-width: 90vw; background: #fff; z-index: 1101;
  display: flex; flex-direction: column;
  box-shadow: -6px 0 24px rgba(0,0,0,0.15);
  transition: transform 220ms ease;
}

.chat-header {
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 14px; border-bottom: 1px solid #eee; font-weight:600;
}
.close-btn { background:none; border:none; cursor:pointer; font-size:16px; }

.chat-body { padding: 12px; overflow:auto; flex:1; display:flex; flex-direction:column; gap:8px; }
.msg { max-width: 90%; padding: 8px 10px; border-radius: 12px; }
.msg.user { align-self: flex-end; background: #dcf8c6; }
.msg.bot { align-self: flex-start; background: #f1f1f1; }

.chat-footer { padding:8px; border-top:1px solid #eee; display:flex; gap:8px; align-items:center; }
.chat-footer input { flex:1; padding:8px 10px; border-radius:8px; border:1px solid #ccc; }
.chat-footer button { padding:8px 12px; border-radius:8px; border:none; cursor:pointer; background:#0d6efd; color:white; }