/**
 * ROUGESWORLD - Oracle Chat Enhanced
 * Additional styling for section-specific Oracle personalities
 */

/* Oracle Personality Base */
.oracle-chat::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--matrix-green);
  opacity: 0.05;
  pointer-events: none;
  z-index: -1;
}

/* Music Personality - Sound Designer */
.music-oracle .oracle-trigger {
  background: linear-gradient(135deg, var(--cyber-blue) 0%, var(--cyber-pink) 100%);
}

.music-pulse {
  border-color: var(--cyber-blue);
  box-shadow: 0 0 20px var(--cyber-blue-glow);
}

.oracle-chat.music-personality {
  border-color: var(--cyber-blue);
  box-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
}

.oracle-chat.music-personality::before {
  background: var(--cyber-blue);
  box-shadow: 0 0 10px var(--cyber-blue);
}

.oracle-chat.music-personality .chat-header {
  background-color: rgba(0, 20, 40, 0.5);
  border-bottom-color: var(--cyber-blue);
}

.oracle-chat.music-personality .chat-title {
  color: var(--cyber-blue);
  text-shadow: 0 0 10px var(--cyber-blue-glow);
}

.oracle-chat.music-personality .chat-close {
  color: var(--cyber-blue);
}

.oracle-chat.music-personality .chat-close:hover {
  background-color: rgba(0, 212, 255, 0.1);
  box-shadow: 0 0 10px var(--cyber-blue-glow);
}

.oracle-message.music-style {
  background-color: rgba(0, 20, 40, 0.5);
  border-color: var(--cyber-blue);
}

.oracle-message.music-style::before {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 212, 255, 0.1) 50%,
    transparent 100%
  );
}

.oracle-chat.music-personality .chat-input {
  background-color: rgba(0, 20, 40, 0.5);
  border-color: var(--cyber-blue);
}

.oracle-chat.music-personality .chat-input:focus {
  border-color: var(--cyber-blue-light);
  box-shadow: 0 0 10px var(--cyber-blue-glow);
}

.oracle-chat.music-personality .chat-send {
  background-color: var(--cyber-blue);
}

.oracle-chat.music-personality .chat-send:hover {
  background-color: var(--cyber-blue-light);
  box-shadow: 0 0 10px var(--cyber-blue-glow);
}

/* Software Personality - Architetto del Codice */
.software-oracle .oracle-trigger {
  background: linear-gradient(135deg, var(--cyber-blue) 0%, #ffffff 100%);
}

.software-pulse {
  border-color: var(--cyber-blue);
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
}

.oracle-chat.software-personality {
  border-color: var(--cyber-blue);
  box-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
}

.oracle-chat.software-personality::before {
  background: var(--cyber-blue);
}

.oracle-chat.software-personality .chat-header {
  background-color: rgba(0, 20, 40, 0.5);
  border-bottom-color: var(--cyber-blue);
}

.oracle-chat.software-personality .chat-title {
  color: var(--cyber-blue);
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

.oracle-message.software-style {
  background-color: rgba(0, 20, 40, 0.5);
  border-color: var(--cyber-blue);
  font-family: 'Courier New', monospace;
}

.oracle-message.software-style::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    linear-gradient(0deg, rgba(0, 212, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
  opacity: 0.5;
}

/* Art Personality - Custode delle Visioni */
.art-oracle .oracle-trigger {
  background: linear-gradient(135deg, var(--cyber-purple) 0%, var(--cyber-pink) 100%);
}

.art-pulse {
  border-color: var(--cyber-purple);
  box-shadow: 0 0 20px rgba(128, 0, 255, 0.5);
}

.oracle-chat.art-personality {
  border-color: var(--cyber-purple);
  box-shadow: 0 0 30px rgba(128, 0, 255, 0.3);
}

.oracle-chat.art-personality::before {
  background: var(--cyber-purple);
}

.oracle-chat.art-personality .chat-header {
  background-color: rgba(20, 0, 40, 0.5);
  border-bottom-color: var(--cyber-purple);
}

.oracle-chat.art-personality .chat-title {
  color: var(--cyber-purple);
  text-shadow: 0 0 10px rgba(128, 0, 255, 0.5);
}

.oracle-message.art-style {
  background-color: rgba(20, 0, 40, 0.5);
  border-color: var(--cyber-purple);
  font-style: italic;
}

.oracle-message.art-style::before {
  background: linear-gradient(
    135deg,
    transparent 0%,
    rgba(128, 0, 255, 0.1) 50%,
    rgba(255, 0, 127, 0.1) 100%
  );
  animation: art-flow 3s ease infinite alternate;
}

@keyframes art-flow {
  0% {
    opacity: 0.1;
    transform: translateX(-100%) translateY(-100%) rotate(0deg);
  }
  100% {
    opacity: 0.2;
    transform: translateX(100%) translateY(100%) rotate(10deg);
  }
}

/* Profile Personality - Narratore del Matrix */
.profile-oracle .oracle-trigger {
  background: linear-gradient(135deg, var(--matrix-green) 0%, var(--cyber-blue) 100%);
}

.profile-pulse {
  border-color: var(--matrix-green);
  box-shadow: 0 0 20px var(--matrix-green-glow);
}

.oracle-chat.profile-personality {
  border-color: var(--matrix-green);
  box-shadow: 0 0 30px rgba(0, 255, 0, 0.3);
}

.oracle-chat.profile-personality::before {
  background: var(--matrix-green);
}

.oracle-chat.profile-personality .chat-header {
  background-color: rgba(0, 40, 0, 0.5);
  border-bottom-color: var(--matrix-green);
}

.oracle-chat.profile-personality .chat-title {
  color: var(--matrix-green);
  text-shadow: 0 0 10px var(--matrix-green-glow);
}

.oracle-message.profile-style {
  background-color: rgba(0, 40, 0, 0.5);
  border-color: var(--matrix-green);
}

.oracle-message.profile-style::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><text x="5" y="14" fill="rgba(0,255,0,0.1)" font-family="monospace" font-size="10">01</text></svg>');
  opacity: 0.2;
  pointer-events: none;
}

/* Personality Icon Styles */
.oracle-icon {
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .oracle-icon {
    font-size: 1.2rem;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .oracle-message.music-style::before,
  .oracle-message.art-style::before {
    animation: none;
  }
}