/* ==============================================================================
   PROJECT NOYAN - DIGITAL CONFIDANT & SOMATIC BREATHING STYLES
   ============================================================================== */

/* Avatar Selector Toggle */
.avatar-selector {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.avatar-chip {
  flex: 1;
  min-height: 48px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid transparent;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.avatar-chip.active {
  background: rgba(79, 70, 229, 0.25);
  border-color: #818cf8;
  color: #fff;
}

/* Chat Log Container */
.chat-window {
  flex: 1;
  max-height: 380px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  background: rgba(15, 23, 42, 0.5);
  border-radius: 14px;
  margin-bottom: 16px;
}

.chat-bubble {
  max-width: 80%;
  padding: 12px 18px;
  border-radius: 18px;
  font-size: 15px;
  line-height: 1.6;
  animation: fadeIn 0.25s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.chat-bubble.avatar {
  align-self: flex-start;
  background: #334155;
  color: #f1f5f9;
  border-bottom-right-radius: 4px;
}

.chat-bubble.child {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--cyan-accent), #0284c7);
  color: #fff;
  border-bottom-left-radius: 4px;
}

/* Quick Response Buttons */
.quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.reply-btn {
  min-height: 48px;
  padding: 8px 18px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text-light);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

.reply-btn:active {
  transform: scale(0.95);
  background: var(--cyan-accent);
}

/* Somatic Co-Regulation Bubble Breathing Container (Cadence 4-4-6) */
.breathing-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 30px;
}

.breathing-orb-container {
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.breathing-orb {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, #38bdf8 0%, #4f46e5 70%, transparent 100%);
  box-shadow: 0 0 40px rgba(56, 189, 248, 0.5);
  transition: transform 4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 4s ease;
}

/* Somatic Cadence States (Claim 16 & 41) */
.breathing-orb.inhale {
  transform: scale(1.65);
  box-shadow: 0 0 70px rgba(56, 189, 248, 0.85);
  transition-duration: 4s;
}

.breathing-orb.hold {
  transform: scale(1.65);
  animation: pulse-glow 2s infinite alternate ease-in-out;
}

.breathing-orb.exhale {
  transform: scale(0.9);
  box-shadow: 0 0 25px rgba(79, 70, 229, 0.4);
  transition-duration: 6s;
}

@keyframes pulse-glow {
  from { filter: brightness(1); }
  to { filter: brightness(1.25); }
}

.cadence-prompt {
  font-size: 24px;
  font-weight: 800;
  text-align: center;
  color: #38bdf8;
}

.cadence-timer {
  font-size: 16px;
  color: var(--text-muted);
}