/* Dark Aurora DEX UI Chat Styles */

:root {
  /* Chat Color Variables */
  --chat-bg: var(--surface);
  --chat-surface: var(--surface-elevated);
  --chat-border: var(--border);
  --chat-border-strong: var(--border-strong);
  --chat-text-primary: var(--text-primary);
  --chat-text-secondary: var(--text-secondary);
  --chat-text-tertiary: var(--text-tertiary);
  --chat-primary: var(--accent-500);
  --chat-primary-hover: var(--accent-400);
  --chat-success: var(--success);
  --chat-warning: var(--warning);
  --chat-danger: var(--danger);
  
  /* Chat Spacing */
  --chat-spacing-xs: var(--spacing-1);
  --chat-spacing-sm: var(--spacing-2);
  --chat-spacing-md: var(--spacing-3);
  --chat-spacing-lg: var(--spacing-4);
  --chat-spacing-xl: var(--spacing-6);
  
  /* Chat Border Radius */
  --chat-radius-sm: var(--radius-sm);
  --chat-radius-md: var(--radius-md);
  --chat-radius-lg: var(--radius-lg);
  --chat-radius-pill: var(--radius-pill);
  
  /* Chat Shadows */
  --chat-shadow-sm: var(--shadow-sm);
  --chat-shadow-md: var(--shadow-md);
  --chat-shadow-glow: var(--shadow-glow-primary);
  
  /* Chat Transitions */
  --chat-transition: all var(--duration-normal) var(--easing-standard);
  
  /* Chat Window Dimensions */
  --chat-window-width: 400px;
  --chat-window-height: 600px;
  --chat-fab-size: 64px;
}

/* Chat FAB (Floating Action Button) */
.chat-fab {
  position: fixed;
  right: var(--spacing-6);
  bottom: var(--spacing-10);
  width: var(--chat-fab-size);
  height: var(--chat-fab-size);
  background: var(--gradient-primary);
  color: var(--primary-contrast);
  border-radius: 50%;
  box-shadow: var(--chat-shadow-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  z-index: 2000;
  transition: var(--chat-transition);
  border: 1px solid rgba(139, 171, 255, 0.20);
  backdrop-filter: var(--backdrop-blur);
}

.chat-fab::after {
  content: none;
}

.chat-fab:hover {
  transform: translateY(-2px) scale(1.05);
  filter: brightness(1.06);
  box-shadow: 0 0 60px rgba(78,134,255,0.45);
}

.chat-fab:active {
  transform: translateY(0) scale(1.02);
  filter: brightness(0.98);
}

/* Chat Window */
.chat-window {
  position: fixed;
  right: var(--spacing-6);
  bottom: var(--spacing-6);
  width: min(95vw, 520px);
  height: 780px;
  max-height: 90vh;
  background: var(--chat-surface);
  border-radius: var(--chat-radius-lg);
  box-shadow: var(--chat-shadow-md);
  display: flex;
  flex-direction: column;
  z-index: 2100;
  overflow: hidden;
  animation: chatFadeIn 0.3s var(--easing-emphasized);
  opacity: 1;
  transform: translateY(0);
  transition: var(--chat-transition);
  border: 1px solid var(--chat-border);
  backdrop-filter: var(--backdrop-blur);
}

.chat-window.closing {
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  pointer-events: none;
}

@keyframes chatFadeIn {
  from { 
    opacity: 0; 
    transform: translateY(40px) scale(0.98); 
  }
  to { 
    opacity: 1; 
    transform: none; 
  }
}

/* Chat Header */
.chat-header {
  background: var(--chat-bg);
  color: var(--chat-text-primary);
  padding: var(--chat-spacing-lg) var(--chat-spacing-xl) var(--chat-spacing-md);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  position: relative;
  border-bottom: 1px solid var(--chat-border);
  backdrop-filter: var(--backdrop-blur);
}

.chat-title {
  color: var(--chat-primary);
  font-size: 18px;
  font-weight: 600;
  display: block;
}

.chat-close {
  position: absolute;
  right: var(--chat-spacing-lg);
  top: var(--chat-spacing-lg);
  font-size: 20px;
  color: var(--chat-text-tertiary);
  cursor: pointer;
  transition: var(--chat-transition);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--chat-radius-sm);
}

.chat-close:hover {
  color: var(--chat-text-primary);
  background: rgba(139, 171, 255, 0.10);
}

.chat-subtitle {
  color: var(--chat-text-secondary);
  font-size: 14px;
  font-weight: 400;
  margin-top: var(--chat-spacing-sm);
  margin-bottom: 0;
}

/* Chat Body */
.chat-body {
  flex: 1 1 auto;
  padding: var(--chat-spacing-lg);
  background: var(--chat-surface);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--chat-spacing-sm);
  min-height: 0;
}

.chat-body > .chat-message:first-child {
  margin-top: auto;
}

/* Chat Messages */
.chat-message {
  padding: var(--chat-spacing-lg);
  border-radius: var(--chat-radius-md);
  font-size: 14px;
  line-height: 1.5;
  max-width: 85%;
  word-break: break-word;
  box-shadow: var(--chat-shadow-sm);
  opacity: 1;
  transform: translateY(0);
  transition: var(--chat-transition);
  backdrop-filter: var(--backdrop-blur);
}

.chat-message.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInMsg 0.35s var(--easing-emphasized) forwards;
}

@keyframes fadeInMsg {
  to {
    opacity: 1;
    transform: none;
  }
}

.chat-message.bot {
  background: var(--chat-bg);
  color: var(--chat-text-primary);
  align-self: flex-start;
  border: 1px solid var(--chat-border);
}

.chat-message.bot strong,
.chat-message.bot b {
  color: var(--chat-text-primary);
  font-weight: 600;
}

.chat-message.bot em,
.chat-message.bot i {
  color: var(--chat-text-primary);
  font-style: italic;
}

.chat-message.bot p {
  color: var(--chat-text-primary);
  margin: 0 0 var(--chat-spacing-sm) 0;
}

.chat-message.bot p:last-child {
  margin-bottom: 0;
}

.chat-message.bot ul,
.chat-message.bot ol {
  color: var(--chat-text-primary);
  margin: var(--chat-spacing-sm) 0;
  padding-left: var(--chat-spacing-lg);
}

.chat-message.bot li {
  color: var(--chat-text-primary);
  margin-bottom: var(--chat-spacing-xs);
}

.chat-message.bot code {
  background: rgba(139, 171, 255, 0.10);
  color: var(--chat-text-primary);
  padding: 2px 6px;
  border-radius: var(--chat-radius-sm);
  font-family: var(--font-mono);
  font-size: 13px;
}

.chat-message.bot pre {
  background: rgba(139, 171, 255, 0.10);
  color: var(--chat-text-primary);
  padding: var(--chat-spacing-md);
  border-radius: var(--chat-radius-sm);
  font-family: var(--font-mono);
  font-size: 13px;
  overflow-x: auto;
  margin: var(--chat-spacing-sm) 0;
}

.chat-message.bot pre code {
  background: none;
  padding: 0;
}

.chat-message.bot a {
  color: var(--chat-primary);
  text-decoration: none;
}

.chat-message.bot a:hover {
  color: var(--chat-primary-hover);
  text-decoration: underline;
}

.chat-message.bot h1,
.chat-message.bot h2,
.chat-message.bot h3,
.chat-message.bot h4,
.chat-message.bot h5,
.chat-message.bot h6 {
  color: var(--chat-text-primary);
  margin: var(--chat-spacing-sm) 0;
  font-weight: 600;
}

.chat-message.bot h1:first-child,
.chat-message.bot h2:first-child,
.chat-message.bot h3:first-child,
.chat-message.bot h4:first-child,
.chat-message.bot h5:first-child,
.chat-message.bot h6:first-child {
  margin-top: 0;
}

.chat-message.bot h1:last-child,
.chat-message.bot h2:last-child,
.chat-message.bot h3:last-child,
.chat-message.bot h4:last-child,
.chat-message.bot h5:last-child,
.chat-message.bot h6:last-child {
  margin-bottom: 0;
}

.chat-message.user {
  background: var(--gradient-primary);
  color: var(--primary-contrast);
  align-self: flex-end;
  border: 1px solid rgba(139, 171, 255, 0.20);
}

/* Chat Input Form */
.chat-input-form {
  display: flex;
  align-items: center;
  padding: var(--chat-spacing-lg);
  background: var(--chat-bg);
  border-top: 1px solid var(--chat-border);
  backdrop-filter: var(--backdrop-blur);
}

.chat-input {
  flex: 1 1 auto;
  border: 1px solid var(--chat-border);
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  font-size: 14px;
  font-family: var(--font-sans);
  padding: var(--chat-spacing-md) var(--chat-spacing-lg);
  border-radius: var(--chat-radius-pill);
  background: var(--chat-surface);
  color: var(--chat-text-primary);
  margin-right: var(--chat-spacing-md);
  resize: none;
  overflow-y: hidden;
  min-height: 1em;
  transition: var(--chat-transition);
}

.chat-input:focus {
  border-color: var(--chat-border-strong);
  box-shadow: 0 0 0 2px rgba(78,134,255,0.80);
}

.chat-input::placeholder {
  color: var(--chat-text-tertiary);
}

.chat-send-btn {
  background: var(--gradient-primary);
  border: none;
  color: var(--primary-contrast);
  font-size: 18px;
  cursor: pointer;
  transition: var(--chat-transition);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--chat-shadow-sm);
}

.chat-send-btn:hover {
  transform: translateY(-1px) scale(1.05);
  filter: brightness(1.06);
  box-shadow: var(--chat-shadow-glow);
}

.chat-send-btn:active {
  transform: translateY(0) scale(1.02);
  filter: brightness(0.98);
}

/* Typing Indicator */
.typing-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--chat-bg);
  border-radius: var(--chat-radius-md);
  padding: var(--chat-spacing-lg);
  margin: var(--chat-spacing-sm) 0;
  min-width: 80px;
  min-height: 32px;
  box-shadow: var(--chat-shadow-sm);
  align-self: flex-start;
  border: 1px solid var(--chat-border);
  backdrop-filter: var(--backdrop-blur);
}

.typing-dot {
  width: 8px;
  height: 8px;
  margin: 0 3px;
  background: var(--chat-primary);
  border-radius: 50%;
  opacity: 0.7;
  animation: typing-bounce 1.2s infinite both;
}

.typing-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing-bounce {
  0%, 80%, 100% { 
    transform: translateY(0); 
    opacity: 0.7; 
  }
  40% { 
    transform: translateY(-8px); 
    opacity: 1; 
  }
}

/* Mobile Responsive */
@media (max-width: 600px) {
  .chat-window {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    border-radius: 0;
    z-index: 9999;
  }
  
  @supports (height: 100dvh) {
    .chat-window { 
      height: 100dvh; 
    }
  }
  
  .chat-fab {
    right: var(--spacing-4);
    bottom: var(--spacing-6);
    width: 56px;
    height: 56px;
    font-size: 20px;
  }
  
  .chat-header {
    font-size: 16px;
    padding: var(--chat-spacing-lg);
  }
  
  .chat-title {
    font-size: 16px;
  }
  
  .chat-subtitle {
    font-size: 13px;
    margin-top: var(--chat-spacing-xs);
  }
  
  .chat-body {
    padding: var(--chat-spacing-md);
    font-size: 14px;
    gap: var(--chat-spacing-xs);
    min-height: 0;
  }
  
  .chat-message {
    font-size: 14px;
    padding: var(--chat-spacing-md);
  }
  
  .chat-input-form {
    padding: var(--chat-spacing-md);
  }
  
  .chat-input {
    font-size: 14px;
    font-family: var(--font-sans);
    padding: var(--chat-spacing-md);
    resize: none;
    overflow-y: auto;
    border: 1px solid var(--chat-border);
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    min-height: 1em;
  }
  
  .chat-input:focus {
    border-color: var(--chat-border-strong);
    box-shadow: 0 0 0 2px rgba(78,134,255,0.80);
  }
  
  .chat-send-btn {
    font-size: 16px;
    width: 36px;
    height: 36px;
  }
}