/* ═══════════════════════════════════════════════════
   VibaVilla – Constellation Contact Widget
   Datei: /css/widget-constellation.css
═══════════════════════════════════════════════════ */

#vv-constellation {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9990;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Montserrat', 'Segoe UI', sans-serif;
  /* kein Hintergrund — transparent wie auf Startseite */
}

/* ── Headline ── */
#vv-constellation .vv-headline {
  text-align: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}
#vv-constellation.vv-open .vv-headline { opacity: 1; transform: translateY(0); }
#vv-constellation .vv-headline span {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(201,164,95,0.9);
  white-space: nowrap;
  font-weight: 600;
  /* doppelter Schatten für hell UND dunkel */
  text-shadow:
    0 1px 0 rgba(0,0,0,1),
    0 2px 6px rgba(0,0,0,1),
    0 3px 12px rgba(0,0,0,0.9),
    0 0 20px rgba(0,0,0,0.8);
}

/* ── Orb Row ── */
#vv-constellation .vv-orbs {
  display: flex;
  align-items: flex-end;
  gap: 0.9rem;
  position: relative;
}

/* Connector lines */
#vv-constellation .vv-orbs::before,
#vv-constellation .vv-orbs::after {
  content: '';
  position: absolute;
  bottom: 28px;
  width: 36px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,164,95,0.3), transparent);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease 0.3s;
}
#vv-constellation.vv-open .vv-orbs::before,
#vv-constellation.vv-open .vv-orbs::after { opacity: 1; }
#vv-constellation .vv-orbs::before { right: calc(50% + 22px); }
#vv-constellation .vv-orbs::after  { left:  calc(50% + 22px); }

/* ── Orb Items ── */
.vv-orb-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  opacity: 0;
  transform: translateY(14px) scale(0.85);
  transition: opacity 0.4s cubic-bezier(0.34,1.56,0.64,1),
              transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
#vv-constellation.vv-open .vv-orb-item { opacity: 1; transform: translateY(0) scale(1); }
#vv-constellation.vv-open .vv-orb-item:nth-child(1) { transition-delay: 0.05s; }
#vv-constellation.vv-open .vv-orb-item:nth-child(2) { transition-delay: 0.12s; }
#vv-constellation.vv-open .vv-orb-item:nth-child(3) { transition-delay: 0.19s; }

/* ── Orb Buttons ── */
.vv-orb {
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
  text-decoration: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.vv-orb:hover  { transform: scale(1.12) translateY(-3px); }
.vv-orb:active { transform: scale(0.95); }

/* Center AI Orb */
.vv-orb.vv-center {
  width: 54px; height: 54px;
  background: radial-gradient(circle at 38% 32%, #f0d080, #c9a45f 45%, #6a4a18);
  box-shadow: 0 0 0 0 rgba(201,164,95,0.5), 0 8px 28px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.15);
  animation: vvOrbPulse 2.8s ease-in-out infinite;
  font-size: 1.4rem;
}
@keyframes vvOrbPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(201,164,95,0.4), 0 8px 28px rgba(0,0,0,0.6); }
  50%      { box-shadow: 0 0 0 14px rgba(201,164,95,0), 0 8px 28px rgba(0,0,0,0.6); }
}

/* Rotating ring */
.vv-orb.vv-center .vv-ring {
  position: absolute; inset: -5px; border-radius: 50%;
  border: 1px solid rgba(201,164,95,0.3);
  animation: vvRingRotate 6s linear infinite;
  pointer-events: none;
}
.vv-orb.vv-center .vv-ring::after {
  content: '◆';
  position: absolute; top: -4px; left: 50%;
  transform: translateX(-50%);
  font-size: 0.38rem; color: #c9a45f;
}
@keyframes vvRingRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Side orbs */
.vv-orb.vv-side { width: 42px; height: 42px; font-size: 1.05rem; }

.vv-orb.vv-wa {
  background: radial-gradient(circle at 38% 32%, #5fe883, #25a244 50%, #0d5a22);
  box-shadow: 0 0 0 0 rgba(37,162,68,0.4), 0 6px 22px rgba(0,0,0,0.6);
  animation: vvWaPulse 3.2s ease-in-out infinite 1s, vvSideFloat 3.5s ease-in-out infinite;
}
@keyframes vvWaPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(37,162,68,0.3), 0 6px 22px rgba(0,0,0,0.6); }
  50%      { box-shadow: 0 0 0 10px rgba(37,162,68,0), 0 6px 22px rgba(0,0,0,0.6); }
}

.vv-orb.vv-email {
  background: radial-gradient(circle at 38% 32%, #80b4ff, #3a72e0 50%, #0f2878);
  box-shadow: 0 0 0 0 rgba(58,114,224,0.4), 0 6px 22px rgba(0,0,0,0.6);
  animation: vvEmailPulse 3.6s ease-in-out infinite 2s, vvSideFloat 3.5s ease-in-out infinite 1.75s;
}
@keyframes vvEmailPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(58,114,224,0.3), 0 6px 22px rgba(0,0,0,0.6); }
  50%      { box-shadow: 0 0 0 10px rgba(58,114,224,0), 0 6px 22px rgba(0,0,0,0.6); }
}

@keyframes vvSideFloat {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.vv-orb.vv-side:hover,
.vv-orb.vv-email:hover { animation: none; transform: scale(1.12) translateY(-3px); }

/* ── Orb Labels — starker Schatten für alle Hintergründe ── */
.vv-orb-label { text-align: center; }
.vv-orb-label strong {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-shadow:
    0 1px 0 rgba(0,0,0,1),
    0 2px 8px rgba(0,0,0,1),
    0 4px 16px rgba(0,0,0,0.9);
}
.vv-orb-label small {
  display: block;
  font-size: 0.58rem;
  font-weight: 600;
  color: rgba(255,245,220,0.95);
  white-space: nowrap;
  text-shadow:
    0 1px 0 rgba(0,0,0,1),
    0 2px 8px rgba(0,0,0,1),
    0 4px 16px rgba(0,0,0,0.9);
}

/* ── Chat Popup ── */
#vv-chat-popup {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 340px;
  max-height: 500px;
  background: rgba(12,10,8,0.97);
  border: 1px solid rgba(201,164,95,0.2);
  border-radius: 16px 16px 4px 16px;
  box-shadow: 0 20px 70px rgba(0,0,0,0.7);
  backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 10000;
  opacity: 0;
  transform: scale(0.9) translateY(16px);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.34,1.56,0.64,1),
              transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
#vv-chat-popup.vv-chat-open {
  opacity: 1; transform: scale(1) translateY(0); pointer-events: all;
}

.vv-chat-header {
  padding: 0.9rem 1.1rem;
  background: linear-gradient(135deg, rgba(201,164,95,0.12), rgba(201,164,95,0.04));
  border-bottom: 1px solid rgba(201,164,95,0.15);
  display: flex; align-items: center; gap: 0.7rem;
}
.vv-chat-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #f0d080, #c9a45f 45%, #6a4a18);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; box-shadow: 0 0 12px rgba(201,164,95,0.3);
  flex-shrink: 0; position: relative;
}
.vv-chat-avatar .vv-online {
  position: absolute; bottom: 0; right: 0;
  width: 10px; height: 10px; background: #4ade80;
  border-radius: 50%; border: 2px solid #0c0a08;
}
.vv-chat-info { flex: 1; }
.vv-chat-info strong { display: block; font-size: 0.85rem; font-weight: 700; color: #c9a45f; }
.vv-chat-info small  { font-size: 0.7rem; color: #6a6050; }
.vv-chat-close {
  background: none; border: none; cursor: pointer;
  color: #6a6050; font-size: 1.1rem; padding: 0.2rem; line-height: 1; transition: color 0.2s;
}
.vv-chat-close:hover { color: #c9a45f; }

.vv-chat-messages {
  flex: 1; overflow-y: auto; padding: 1rem;
  display: flex; flex-direction: column; gap: 0.7rem;
  scrollbar-width: thin; scrollbar-color: rgba(201,164,95,0.2) transparent;
}
.vv-msg {
  max-width: 82%; padding: 0.65rem 0.9rem; border-radius: 12px;
  font-size: 0.84rem; line-height: 1.6;
  font-family: 'Montserrat', 'Segoe UI', sans-serif;
}
.vv-msg.bot {
  background: rgba(201,164,95,0.08); border: 1px solid rgba(201,164,95,0.15);
  color: #d8d0c4; align-self: flex-start; border-radius: 4px 12px 12px 12px;
}
.vv-msg.user {
  background: rgba(201,164,95,0.18); color: #f5f0e8;
  align-self: flex-end; border-radius: 12px 4px 12px 12px;
}
.vv-typing {
  display: flex; gap: 4px; align-items: center; padding: 0.65rem 0.9rem;
  background: rgba(201,164,95,0.08); border: 1px solid rgba(201,164,95,0.15);
  border-radius: 4px 12px 12px 12px; align-self: flex-start; width: fit-content;
}
.vv-typing span {
  width: 5px; height: 5px; background: #c9a45f; border-radius: 50%;
  animation: vvTyping 1.2s ease-in-out infinite;
}
.vv-typing span:nth-child(2) { animation-delay: 0.2s; }
.vv-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes vvTyping {
  0%,80%,100% { transform: translateY(0); opacity: 0.4; }
  40%          { transform: translateY(-4px); opacity: 1; }
}

.vv-chat-input-row {
  padding: 0.8rem 0.9rem; border-top: 1px solid rgba(201,164,95,0.1);
  display: flex; gap: 0.5rem; align-items: center;
}
.vv-chat-input-row input {
  flex: 1; background: rgba(255,255,255,0.05);
  border: 1px solid rgba(201,164,95,0.2); border-radius: 20px;
  padding: 0.55rem 0.9rem; color: #f0ebe3;
  font-family: 'Montserrat', 'Segoe UI', sans-serif;
  font-size: 0.83rem; outline: none; transition: border-color 0.2s;
}
.vv-chat-input-row input::placeholder { color: #5a5448; }
.vv-chat-input-row input:focus { border-color: rgba(201,164,95,0.45); }
.vv-chat-send {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, #c9a45f, #8a6a20);
  border: none; cursor: pointer; color: #0c0a08;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s, opacity 0.2s; flex-shrink: 0;
}
.vv-chat-send:hover  { transform: scale(1.1); }
.vv-chat-send:disabled { opacity: 0.4; cursor: default; }

/* ── Mobile ── */
@media (max-width: 480px) {
  #vv-constellation { bottom: 1rem; right: 1rem; }
  #vv-chat-popup { right: 0.5rem; left: 0.5rem; width: auto; bottom: 1rem; }
}