:root{
  --chat-bg: #0b1220;
  --chat-card: #121d2e;
  --chat-muted: #9fb3c8;
  --chat-accent: #48a1d9;
  --chat-accent-2: #3d7ef7;
  --chat-user: linear-gradient(135deg, #49b6ff, #3d7ef7);
  --chat-bot: #f3f7fb;
  --chat-text: #13304b;
}

.floating-chat-widget {
  position: fixed;
  right: 80px;
  bottom: 15px;
  z-index: 9999;
  font-family: Inter, Arial, sans-serif;
  display: block;
}

.chat-launcher {
  display: flex !important;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  background: linear-gradient(135deg, var(--chat-accent), var(--chat-accent-2));
  color: #fff;
  font-weight: 700;
  box-shadow: 0 12px 30px rgba(29, 78, 216, 0.35);
  cursor: pointer;
  opacity: 1;
  visibility: visible;
}

.launcher-icon {
  display: inline-flex;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.chat-panel {
  position: absolute;
  right: 0;
  bottom: 72px;
  width: min(360px, calc(100vw - 24px));
  height: 470px;
  display: flex;
  flex-direction: column;
  background: rgba(9, 15, 26, 0.96);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(2, 6, 23, 0.45);
  transform: translateY(16px) scale(.96);
  opacity: 0;
  pointer-events: none;
  transition: all .2s ease;
  visibility: hidden;
}

.chat-panel.open {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.chat-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.chat-panel-header strong {
  color: #fff;
  display: block;
  font-size: 15px;
}

.chat-panel-header small {
  color: #9ecbff;
}

.chat-close {
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.chat-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.7), rgba(10, 15, 26, 0.9));
}

.chat-panel-body .msg {
  max-width: 82%;
  padding: 10px 12px;
  border-radius: 14px;
  line-height: 1.4;
  word-break: break-word;
}

.chat-panel-body .msg.user {
  align-self: flex-end;
  background: var(--chat-user);
  color: white;
  border-bottom-right-radius: 5px;
}

.chat-panel-body .msg.bot {
  align-self: flex-start;
  background: var(--chat-bot);
  color: var(--chat-text);
  border-bottom-left-radius: 5px;
}

.chat-panel-body .meta {
  margin-top: 6px;
  font-size: 11px;
  opacity: 0.7;
}

.chat-panel-body .msg.typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 14px;
}

.chat-panel-body .msg.typing .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--chat-text);
  opacity: 0.4;
  animation: chat-typing-bounce 1.2s infinite ease-in-out;
}

.chat-panel-body .msg.typing .dot:nth-child(2) { animation-delay: 0.15s; }
.chat-panel-body .msg.typing .dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes chat-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.chat-panel-form {
  display: flex;
  gap: 8px;
  padding: 12px;
  background: rgba(255,255,255,.02);
  border-top: 1px solid rgba(255,255,255,.08);
}

.chat-panel-form input {
  flex: 1;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: #fff;
  border-radius: 10px;
  padding: 10px 12px;
}

.chat-panel-form button {
  border: 0;
  border-radius: 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg, var(--chat-accent), var(--chat-accent-2));
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 640px) {
  .floating-chat-widget {
    right: 60px;
    bottom: 12px;
  }

  /* .chat-panel is right:0 relative to the widget above, so shifting the
     widget also drags the panel along with it. Pull the panel back by the
     same amount so it stays anchored to the screen edge (matching its
     calc(100vw - 24px) width, which assumes a 12px margin) instead of
     getting pushed off-screen to the left. */
  .chat-panel {
    right: -48px;
  }

  .chat-launcher {
    display: flex !important;
    width: 54px;
    min-width: 54px;
    padding: 12px 12px;
    justify-content: center;
    margin-left: 0;
  }

  .launcher-label {
    display: none;
  }
}