/* ============================================================
   Chat page cinematic polish (2026-04-18)
   Deeper backdrop blur, glass chat panel, dramatic typography.
   ============================================================ */

/* Full-bleed cinematic background */
#profileImage, .chat-bg-image, [class*="chat-bg"], .chat-bg, .profile-hero-bg {
  filter: blur(8px) saturate(1.25) brightness(0.85) contrast(1.08) !important;
  transform: scale(1.08);
  transition: filter 0.6s ease;
}

/* Vignette overlay */
.chat-layout::before, .chat-container::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 30%, transparent 20%, rgba(0,0,0,0.4) 80%, rgba(0,0,0,0.85) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.5) 100%);
  pointer-events: none;
  z-index: 0;
}

/* Glass morphism on chat panel */
.chat-panel, .chat-card, #chatMessages, .message-list-container {
  background: rgba(18, 16, 20, 0.72) !important;
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(232, 148, 74, 0.12);
  box-shadow:
    0 30px 80px rgba(0,0,0,0.65),
    0 0 0 1px rgba(232,148,74,0.06),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

/* Message bubbles */
.message, .chat-message, [class*="message-bubble"] {
  border-radius: 18px !important;
  padding: 0.85rem 1.1rem !important;
  line-height: 1.55;
  font-size: 0.96rem;
  animation: msgFadeIn 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}

.message.user, .chat-message.user, [class*="message-user"] {
  background: linear-gradient(135deg, rgba(232,148,74,0.22), rgba(232,107,58,0.12)) !important;
  border: 1px solid rgba(232,148,74,0.24) !important;
  color: #fdf2e4 !important;
  box-shadow: 0 8px 24px rgba(232,107,58,0.12);
}

.message.assistant, .chat-message.assistant, [class*="message-assistant"] {
  background: rgba(26, 22, 28, 0.85) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  color: #f3ead9 !important;
}

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

/* Avatar glow */
.chat-avatar, .companion-avatar, [class*="avatar-main"] {
  box-shadow:
    0 0 0 3px rgba(232,148,74,0.35),
    0 0 30px rgba(232,148,74,0.5),
    0 0 60px rgba(232,107,58,0.25);
  animation: avatarPulse 3.5s ease-in-out infinite;
}

@keyframes avatarPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(232,148,74,0.3), 0 0 30px rgba(232,148,74,0.45), 0 0 60px rgba(232,107,58,0.2); }
  50% { box-shadow: 0 0 0 3px rgba(232,148,74,0.5), 0 0 50px rgba(232,148,74,0.65), 0 0 90px rgba(232,107,58,0.4); }
}

/* Headline / name typography drama */
.chat-name, .companion-name, h1.chat-headline {
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  background: linear-gradient(135deg, #fff 0%, #e8944a 60%, #d97638 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 0 40px rgba(232,148,74,0.2);
}

/* Input field glass */
.chat-input, input[type="text"].chat-input {
  background: rgba(14, 12, 16, 0.75) !important;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(232,148,74,0.18) !important;
  color: #f8e9d2 !important;
  transition: all 0.25s ease;
}

.chat-input:focus {
  border-color: rgba(232,148,74,0.55) !important;
  box-shadow:
    0 0 0 3px rgba(232,148,74,0.12),
    0 0 30px rgba(232,148,74,0.18) !important;
  background: rgba(20, 16, 22, 0.9) !important;
}

/* Quick action chips cinematic hover */
.quick-action, [class*="action-chip"], button[class*="quick"] {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(10px);
  background: linear-gradient(135deg, rgba(26,22,28,0.85), rgba(18,16,20,0.85)) !important;
  border: 1px solid rgba(232,148,74,0.15) !important;
}

.quick-action:hover {
  transform: translateY(-2px) scale(1.03);
  border-color: rgba(232,148,74,0.45) !important;
  box-shadow: 0 8px 20px rgba(232,148,74,0.18), 0 0 30px rgba(232,148,74,0.12);
  background: linear-gradient(135deg, rgba(40,30,35,0.9), rgba(28,22,28,0.9)) !important;
}

/* Typing indicator */
.typing-indicator, [class*="typing"] {
  background: rgba(26,22,28,0.85);
  backdrop-filter: blur(12px);
  border-radius: 14px;
  padding: 0.8rem 1rem;
}

.typing-dots span {
  background: #e8944a;
  animation: typingDot 1.2s ease-in-out infinite;
}

@keyframes typingDot {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-4px); }
}

/* Level / XP bar */
.xp-bar, [class*="level"], [class*="relationship"] {
  background: rgba(20,16,22,0.8);
  backdrop-filter: blur(10px);
  border-radius: 10px;
}

.xp-fill, [class*="xp-progress"] {
  background: linear-gradient(90deg, #e8944a 0%, #d97638 50%, #f7c85b 100%);
  box-shadow: 0 0 12px rgba(232,148,74,0.4);
}