/* cursor-chat.css — Modernity shared cursor ring + chatbot styles */

@keyframes blink        { 0%,100%{opacity:1} 50%{opacity:0.3} }
@keyframes chat-pulse   { 0%,100%{box-shadow:0 8px 32px rgba(0,0,0,0.4),0 2px 8px rgba(0,154,170,0.18),inset 0 1px 0 rgba(255,255,255,0.7),0 0 0 0 rgba(0,154,170,0.3)} 50%{box-shadow:0 8px 32px rgba(0,0,0,0.4),0 2px 8px rgba(0,154,170,0.18),inset 0 1px 0 rgba(255,255,255,0.7),0 0 0 10px rgba(0,154,170,0.07)} }
@keyframes online-pulse { 0%,100%{box-shadow:0 0 6px rgba(40,200,64,0.6)} 50%{box-shadow:0 0 12px rgba(40,200,64,0.9)} }
@keyframes msg-in       { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes typing-dot   { 0%,60%,100%{transform:translateY(0);opacity:0.4} 30%{transform:translateY(-6px);opacity:1} }

/* ── CURSOR RING ── */
#cursor-ring {
  position: fixed;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,154,170,0.55);
  background: rgba(0,154,170,0.04);
  pointer-events: none;
  z-index: 9999;
  transition: opacity 0.3s, border-color 0.3s, background 0.3s;
  box-shadow: 0 0 12px rgba(0,154,170,0.15);
  will-change: transform;
}
#cursor-ring.hidden { opacity: 0; }
@media (max-width: 768px) { #cursor-ring { display: none !important; } }

/* ── CHATBOT ── */
#chat-launcher {
  position: fixed; bottom: 2rem; right: 2rem;
  width: 62px; height: 62px; border-radius: 50%;
  background: rgba(22,29,46,0.85);
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  border: 1.5px solid rgba(0,154,170,0.35);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 2px 8px rgba(0,154,170,0.18), inset 0 1px 0 rgba(255,255,255,0.7), 0 0 0 0 rgba(0,154,170,0.25);
  cursor: pointer; z-index: 1001;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s;
  animation: chat-pulse 3.5s ease-in-out infinite;
  overflow: visible;
}
#chat-launcher img { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,154,170,0.5)); display: block; }
#chat-launcher:hover { transform: scale(1.1); box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 0 10px rgba(0,154,170,0.09), inset 0 1px 0 rgba(255,255,255,0.7); }
@keyframes chat-pulse {
  0%,100% { box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 2px 8px rgba(0,154,170,0.18), inset 0 1px 0 rgba(255,255,255,0.7), 0 0 0 0 rgba(0,154,170,0.3); }
  50%      { box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 2px 8px rgba(0,154,170,0.18), inset 0 1px 0 rgba(255,255,255,0.7), 0 0 0 10px rgba(0,154,170,0.07); }
}
#chat-badge {
  position: absolute; bottom: 2px; right: 2px;
  width: 13px; height: 13px; border-radius: 50%;
  background: #28c840; border: 2px solid var(--surface, #161d2e);
  box-shadow: 0 0 6px rgba(40,200,64,0.6);
  animation: online-pulse 2.5s ease-in-out infinite;
}
@keyframes online-pulse {
  0%,100% { box-shadow: 0 0 6px rgba(40,200,64,0.6); }
  50%      { box-shadow: 0 0 12px rgba(40,200,64,0.9); }
}

#chat-window {
  position: fixed; bottom: 6.5rem; right: 2rem;
  width: 360px; max-height: 520px;
  background: var(--surface, #161d2e);
  border-radius: 20px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5), 0 8px 32px rgba(0,0,0,0.3), 0 0 0 1px rgba(0,154,170,0.12);
  z-index: 1000; display: flex; flex-direction: column; overflow: hidden;
  transform: scale(0.88) translateY(16px);
  opacity: 0; pointer-events: none;
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s ease;
}
#chat-window.open { transform: scale(1) translateY(0); opacity: 1; pointer-events: all; }
@media (max-width: 480px) {
  #chat-window { width: calc(100vw - 2.5rem); right: 1rem; bottom: 5.25rem; max-height: 420px; border-radius: 16px; }
  .chat-header { padding: 0.75rem 1rem; }
  .chat-messages { padding: 0.875rem; gap: 0.6rem; }
  .msg-bubble { font-size: 0.8rem; padding: 0.5rem 0.75rem; }
  .chat-input-area { padding: 0.6rem 0.75rem; gap: 0.4rem; }
  .chat-input { font-size: 0.8rem; padding: 0.45rem 0.8rem; }
  .chat-send { width: 34px; height: 34px; }
  #chat-launcher { bottom: 1.25rem; right: 1.25rem; width: 54px; height: 54px; }
  #chat-launcher img { width: 38px; height: 38px; }
}

.chat-header {
  background: var(--surface, #161d2e);
  padding: 1rem 1.125rem;
  display: flex; align-items: center; gap: 0.75rem;
  flex-shrink: 0;
}
.chat-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(0,154,170,0.18);
  border: 1.5px solid rgba(0,154,170,0.45);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden;
}
.chat-avatar img { width: 26px; height: 26px; object-fit: contain; filter: brightness(0) invert(1); }
.chat-header-info { flex: 1; min-width: 0; }
.chat-header-name { font-family:'Raleway',sans-serif; font-weight:700; font-size:0.9rem; color:#fff; letter-spacing:-0.01em; }
.chat-header-status { font-size:0.7rem; color:rgba(255,255,255,0.5); display:flex; align-items:center; gap:0.3rem; margin-top:2px; }
.chat-status-dot { width:6px; height:6px; border-radius:50%; background:#28c840; flex-shrink:0; animation:blink 2s ease-in-out infinite; }
.chat-close { background:none; border:none; cursor:pointer; color:rgba(255,255,255,0.45); padding:6px; border-radius:8px; transition:color 0.2s,background 0.2s; display:flex; align-items:center; justify-content:center; }
.chat-close:hover { color:#fff; background:rgba(255,255,255,0.1); }
.chat-close svg { width:15px; height:15px; }

.chat-messages {
  flex:1; overflow-y:auto; padding:1.125rem;
  display:flex; flex-direction:column; gap:0.75rem;
  background: var(--bg, #0d1117);
  scrollbar-width:thin; scrollbar-color:rgba(0,154,170,0.2) transparent;
}
.chat-msg { display:flex; gap:0.5rem; align-items:flex-end; animation:msg-in 0.3s ease both; }
.chat-msg.user { flex-direction:row-reverse; }
@keyframes msg-in { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

.msg-avatar { width:28px; height:28px; border-radius:50%; background:rgba(0,154,170,0.15); border:1px solid rgba(0,154,170,0.3); display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; }
.msg-avatar img { width:18px; height:18px; object-fit:contain; filter:brightness(0) invert(1); }
.msg-bubble { max-width:80%; padding:0.6rem 0.9rem; font-size:0.845rem; line-height:1.55; color:var(--navy,#dde4ef); }
.chat-msg.bot .msg-bubble { background:var(--surface,#161d2e); border:1px solid rgba(255,255,255,0.08); border-radius:16px 16px 16px 4px; box-shadow:0 2px 8px rgba(0,0,0,0.2); }
.chat-msg.user .msg-bubble { background:var(--teal,#009aaa); color:#fff; border-radius:16px 16px 4px 16px; }

.chat-typing { display:flex; gap:4px; align-items:center; padding:0.6rem 0.9rem; }
.chat-typing span { width:6px; height:6px; border-radius:50%; background:var(--muted,#527090); animation:typing-dot 1.2s ease-in-out infinite; }
.chat-typing span:nth-child(2) { animation-delay:0.2s; }
.chat-typing span:nth-child(3) { animation-delay:0.4s; }
@keyframes typing-dot { 0%,60%,100%{transform:translateY(0);opacity:0.4} 30%{transform:translateY(-6px);opacity:1} }

.chat-input-area { display:flex; gap:0.5rem; align-items:center; padding:0.75rem 0.875rem; background:var(--surface,#161d2e); border-top:1px solid rgba(255,255,255,0.07); flex-shrink:0; }
.chat-input { flex:1; background:var(--bg,#0d1117); border:1.5px solid rgba(255,255,255,0.1); border-radius:22px; padding:0.55rem 0.95rem; font-family:'DM Sans',sans-serif; font-size:0.875rem; color:var(--navy,#dde4ef); outline:none; transition:border-color 0.2s; }
.chat-input:focus { border-color:rgba(0,154,170,0.4); }
.chat-input::placeholder { color:rgba(130,160,195,0.4); }
.chat-send { width:38px; height:38px; border-radius:50%; background:var(--teal,#009aaa); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background 0.2s,transform 0.2s cubic-bezier(0.34,1.56,0.64,1); box-shadow:0 4px 14px rgba(0,154,170,0.35); }
.chat-send:hover { background:var(--teal-dark,#007788); transform:scale(1.1); }
.chat-send svg { width:15px; height:15px; color:#fff; }