/**
 * Predictive Typing CSS
 * Visual feedback for emotion detection as user types
 */

/* ============================================================================
   DEMO WIDGET MINI-ORB EXPRESSIONS
   ============================================================================ */

.demo-widget__mini-orb {
  transition: 
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    filter 0.3s ease;
}

/* Concern expression */
.demo-widget__mini-orb--concern {
  animation: orb-concern 600ms ease-out;
}

@keyframes orb-concern {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(0.95) translateY(2px);
    filter: saturate(0.8);
  }
  100% {
    transform: scale(1);
    filter: saturate(1);
  }
}

/* Delight expression */
.demo-widget__mini-orb--delighted {
  animation: orb-delight 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes orb-delight {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.15);
    filter: brightness(1.15);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

/* Curious expression */
.demo-widget__mini-orb--curious {
  animation: orb-curious 500ms ease-out;
}

@keyframes orb-curious {
  0% {
    transform: scale(1) rotate(0deg);
  }
  30% {
    transform: scale(1.05) rotate(3deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

/* Thinking expression */
.demo-widget__mini-orb--thinking {
  animation: orb-thinking 800ms ease-in-out;
}

@keyframes orb-thinking {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
    transform: scale(0.98);
  }
}

/* Glow pulse for any emotion detection */
.demo-widget__mini-orb-glow--pulse {
  animation: glow-pulse-emotion 600ms ease-out !important;
}

@keyframes glow-pulse-emotion {
  0% {
    transform: scale(1);
    opacity: 0.3;
  }
  40% {
    transform: scale(1.8);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 0.3;
  }
}

/* ============================================================================
   INPUT FIELD EMOTIONAL STATE INDICATORS
   ============================================================================ */

/* Subtle border color shift based on detected emotion */
.demo-widget__input {
  transition: 
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* When concern is detected */
.demo-widget.emotion-concern .demo-widget__input:focus {
  border-color: rgba(138, 106, 90, 0.5);
  box-shadow: 0 0 0 3px rgba(138, 106, 90, 0.1);
}

/* When delight is detected */
.demo-widget.emotion-delight .demo-widget__input:focus {
  border-color: rgba(106, 138, 90, 0.5);
  box-shadow: 0 0 0 3px rgba(106, 138, 90, 0.15);
}

/* When curiosity is detected */
.demo-widget.emotion-curiosity .demo-widget__input:focus {
  border-color: rgba(58, 107, 115, 0.5);
  box-shadow: 0 0 0 3px rgba(58, 107, 115, 0.1);
}

/* ============================================================================
   HEADER EMOTION INDICATOR
   ============================================================================ */

.demo-widget__emotion-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-md);
  font-size: var(--text-2xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0;
  transform: scale(0.8);
  transition: 
    opacity 0.3s ease,
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.3s ease,
    color 0.3s ease;
}

.demo-widget__emotion-badge.is-visible {
  opacity: 1;
  transform: scale(1);
}

.demo-widget__emotion-badge--concern {
  background: rgba(138, 106, 90, 0.15);
  color: var(--color-jack);
}

.demo-widget__emotion-badge--delight {
  background: rgba(106, 138, 90, 0.15);
  color: var(--color-ferni);
}

.demo-widget__emotion-badge--curious {
  background: rgba(58, 107, 115, 0.15);
  color: var(--color-peter);
}

.demo-widget__emotion-badge--thinking {
  background: rgba(90, 107, 138, 0.15);
  color: var(--color-alex);
}

/* ============================================================================
   TYPING AWARENESS INDICATOR
   ============================================================================ */

/* Subtle "Ferni is reading..." indicator */
.demo-widget__reading-indicator {
  position: absolute;
  bottom: 100%;
  left: 16px;
  padding: 4px 10px;
  background: var(--color-paper-cream, var(--color-bg-primary));
  border-radius: 8px 8px 0 0;
  font-size: var(--text-2xs);
  color: var(--color-text-secondary, var(--color-text-secondary));
  opacity: 0;
  transform: translateY(4px);
  transition: 
    opacity 0.2s ease,
    transform 0.2s ease;
  pointer-events: none;
}

.demo-widget__reading-indicator.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.demo-widget__reading-indicator::after {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-left: 4px;
  background: var(--color-ferni, var(--color-ferni));
  border-radius: 50%;
  animation: reading-dot 1s ease-in-out infinite;
}

@keyframes reading-dot {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}