/* ═══════════════════════════════════════════════
   GREY GECKO — AI ASSISTANT WIDGET
   chat-widget.css
═══════════════════════════════════════════════ */

/* ── Floating button ── */
#gg-chat-btn {
  position:fixed; bottom:28px; right:28px; z-index:9999;
  width:60px; height:60px;
  background:var(--gold, #B8860B);
  border:none; border-radius:50%;
  cursor:pointer;
  box-shadow:0 4px 20px rgba(0,0,0,0.25), 0 0 0 0 rgba(184,134,11,0.4);
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s, box-shadow .2s;
  animation:chatPulse 3s ease-in-out infinite;
}
@keyframes chatPulse {
  0%,100% { box-shadow:0 4px 20px rgba(0,0,0,0.25), 0 0 0 0 rgba(184,134,11,0.35); }
  50%      { box-shadow:0 4px 20px rgba(0,0,0,0.25), 0 0 0 10px rgba(184,134,11,0); }
}
#gg-chat-btn:hover { transform:scale(1.08); }
#gg-chat-btn svg  { pointer-events:none; }

/* Badge on button */
#gg-chat-btn .chat-badge {
  position:absolute; top:-4px; right:-4px;
  width:18px; height:18px; border-radius:50%;
  background:#2B9FD4; border:2px solid #fff;
  font-family:'Share Tech Mono'; font-size:8px;
  color:#fff; display:flex; align-items:center; justify-content:center;
  letter-spacing:0;
}

/* ── Chat window ── */
#gg-chat-window {
  position:fixed; bottom:100px; right:28px; z-index:9998;
  width:380px; max-height:560px;
  background:#FFFFFF;
  border:1px solid rgba(184,134,11,0.25);
  border-radius:4px;
  box-shadow:0 16px 48px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
  display:flex; flex-direction:column;
  overflow:hidden;
  transform:scale(0.92) translateY(16px);
  opacity:0;
  pointer-events:none;
  transition:transform .25s ease, opacity .25s ease;
  transform-origin:bottom right;
}
#gg-chat-window.open {
  transform:scale(1) translateY(0);
  opacity:1;
  pointer-events:all;
}

/* Header */
.chat-header {
  background:#0B1521;
  padding:16px 18px;
  display:flex; align-items:center; justify-content:space-between;
  flex-shrink:0;
}
.chat-header-left { display:flex; align-items:center; gap:12px; }
.chat-avatar {
  width:36px; height:36px;
  background:var(--gold, #B8860B);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.chat-avatar svg { width:28px; height:23px; }
.gg-gecko-icon { fill:currentColor; display:block; }
.chat-title {
  font-family:'Bebas Neue', sans-serif;
  font-size:16px; letter-spacing:3px; color:#EEF5FF;
  line-height:1;
}
.chat-subtitle {
  font-family:'Share Tech Mono', monospace;
  font-size:8px; letter-spacing:2px; color:#B8860B;
  text-transform:uppercase; margin-top:2px;
}
.chat-status {
  display:flex; align-items:center; gap:5px;
  font-family:'Share Tech Mono'; font-size:8px; letter-spacing:1px;
  color:#4EC97A; text-transform:uppercase;
}
.chat-status::before {
  content:''; width:6px; height:6px; border-radius:50%;
  background:#4EC97A; box-shadow:0 0 5px #4EC97A;
  animation:pulse 2s ease-in-out infinite;
}
.chat-close {
  background:none; border:none; cursor:pointer;
  color:rgba(255,255,255,0.4);
  font-size:18px; line-height:1; padding:4px;
  transition:color .2s;
}
.chat-close:hover { color:#EEF5FF; }

/* Messages area */
.chat-messages {
  flex:1; overflow-y:auto;
  padding:16px 16px 8px;
  background:#F8F9FC;
  display:flex; flex-direction:column; gap:12px;
  min-height:200px;
}
.chat-messages::-webkit-scrollbar { width:3px; }
.chat-messages::-webkit-scrollbar-track { background:transparent; }
.chat-messages::-webkit-scrollbar-thumb { background:rgba(184,134,11,0.3); border-radius:2px; }

/* Message bubbles */
.msg {
  display:flex; gap:8px; align-items:flex-end;
  animation:msgIn .25s ease;
}
@keyframes msgIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

.msg.bot { align-self:flex-start; }
.msg.user { align-self:flex-end; flex-direction:row-reverse; }

.msg-avatar {
  width:28px; height:28px; border-radius:50%; flex-shrink:0;
  background:#0B1521;
  display:flex; align-items:center; justify-content:center;
}
.msg-avatar svg { width:22px; height:18px; }

.msg-bubble {
  max-width:260px; padding:10px 14px;
  border-radius:16px 16px 16px 4px;
  font-family:'Rajdhani', sans-serif; font-size:14px; font-weight:500;
  line-height:1.5; color:#1A2535;
  background:#FFFFFF;
  border:1px solid rgba(0,0,0,0.07);
  box-shadow:0 1px 4px rgba(0,0,0,0.07);
}
.msg.user .msg-bubble {
  background:#0B1521;
  color:#EEF5FF;
  border-radius:16px 16px 4px 16px;
  border:none;
}
.msg-bubble a { color:#B8860B; }
.msg-bubble strong { color:#0B1521; }
.msg.user .msg-bubble strong { color:#E8C96A; }

/* Quick replies */
.chat-quick-replies {
  padding:0 16px 8px;
  display:flex; flex-wrap:wrap; gap:6px;
  background:#F8F9FC;
  flex-shrink:0;
}
.quick-reply {
  padding:5px 12px;
  background:#FFFFFF; border:1px solid rgba(184,134,11,0.35);
  border-radius:20px;
  font-family:'Share Tech Mono'; font-size:9px; letter-spacing:1px;
  color:#B8860B; cursor:pointer; transition:all .15s;
  text-transform:uppercase;
}
.quick-reply:hover { background:#B8860B; color:#fff; border-color:#B8860B; }

/* Typing indicator */
.typing-indicator {
  display:flex; gap:4px; padding:10px 14px;
  background:#FFFFFF; border:1px solid rgba(0,0,0,0.07);
  border-radius:16px 16px 16px 4px;
  box-shadow:0 1px 4px rgba(0,0,0,0.07);
  align-self:flex-start; margin-left:36px;
}
.typing-indicator span {
  width:6px; height:6px; border-radius:50%; background:#B8860B;
  animation:typingDot 1.2s ease-in-out infinite;
}
.typing-indicator span:nth-child(2) { animation-delay:.2s; }
.typing-indicator span:nth-child(3) { animation-delay:.4s; }
@keyframes typingDot {
  0%,60%,100% { transform:translateY(0); opacity:.4; }
  30%          { transform:translateY(-5px); opacity:1; }
}

/* Input area */
.chat-input-area {
  padding:12px 16px;
  background:#FFFFFF;
  border-top:1px solid rgba(0,0,0,0.07);
  display:flex; gap:8px; align-items:flex-end;
  flex-shrink:0;
}
.chat-input {
  flex:1; padding:10px 14px;
  background:#F4F6F9; border:1px solid rgba(0,0,0,0.1);
  border-radius:24px;
  font-family:'Rajdhani'; font-size:14px; font-weight:500; color:#1A2535;
  resize:none; outline:none; line-height:1.4;
  max-height:100px; overflow-y:auto;
  transition:border-color .2s;
}
.chat-input:focus { border-color:#B8860B; background:#FFFDF5; }
.chat-input::placeholder { color:#9AAFBE; }
.chat-send {
  width:38px; height:38px; flex-shrink:0;
  background:#B8860B; border:none; border-radius:50%;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s, transform .15s;
}
.chat-send:hover { background:#D4A017; transform:scale(1.08); }
.chat-send:disabled { background:#D0D5DC; cursor:not-allowed; transform:none; }
.chat-send svg { pointer-events:none; }

/* Footer */
.chat-footer {
  padding:6px 16px 10px;
  background:#FFFFFF;
  border-top:1px solid rgba(0,0,0,0.04);
  display:flex; align-items:center; justify-content:center;
  gap:4px;
  font-family:'Share Tech Mono'; font-size:8px; letter-spacing:1px;
  color:#9AAFBE; text-transform:uppercase;
}
.chat-footer-icon {
  display:inline-flex; width:14px; height:11px;
}
.chat-footer-icon svg { width:14px; height:11px; display:block; }

/* Mobile */
@media (max-width:640px) {
  #gg-chat-window {
    right:12px; left:12px; width:auto;
    bottom:90px;
  }
  #gg-chat-btn { right:16px; bottom:20px; }
}