/* ============================================
   MD3 AI Chat Styles
   ============================================ */
.message.ai { align-self: flex-start; align-items: flex-start; max-width: 80%; }

.message.ai .message-content {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #ffffff;
  border-radius: var(--md-sys-shape-corner-extra-small) var(--md-sys-shape-corner-large)
                   var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large);
}

/* ---- MD3 Thinking Message ---- */
.ai-thinking-message {
  background: var(--md-sys-color-surface-container-high) !important;
  border: 1px solid var(--md-sys-color-outline-variant) !important;
  color: var(--md-sys-color-on-surface-variant) !important;
  font-style: italic;
  min-width: 180px;
  border-radius: var(--md-sys-shape-corner-medium) !important;
}

.ai-thinking-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.ai-thinking-indicator {
  font-size: var(--md-sys-typescale-body-small-size);
  font-weight: var(--font-weight-medium);
  color: var(--md-sys-color-on-surface-variant);
}

.ai-thinking-indicator::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary);
  margin-left: 6px;
  animation: aiThinkingPulse 1.2s var(--md-sys-motion-easing-standard) infinite;
}

.ai-thinking-toggle {
  padding: 4px;
  border-radius: var(--md-sys-shape-corner-extra-small);
  color: var(--md-sys-color-outline);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--md-sys-duration-short3) ease;
}
.ai-thinking-toggle:hover { background: var(--md-sys-color-surface-variant); }

.ai-thinking-content {
  overflow: hidden;
  transition: max-height var(--md-sys-duration-medium3) var(--md-sys-motion-easing-standard),
              opacity var(--md-sys-duration-medium3) var(--md-sys-motion-easing-standard);
}
.ai-thinking-content.collapsed { max-height: 0; opacity: 0; }
.ai-thinking-content.expanded { max-height: 300px; opacity: 1; overflow-y: auto; }

.thinking-text {
  padding: 6px 0;
  font-size: var(--md-sys-typescale-body-small-size);
  line-height: var(--md-sys-typescale-body-small-line);
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--md-sys-color-on-surface-variant);
}

/* ---- AI Response Message ---- */
.ai-response-message {
  background: linear-gradient(135deg, #667eea, #764ba2) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--md-sys-shape-corner-extra-small) var(--md-sys-shape-corner-large)
                   var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large) !important;
}

.ai-response-header {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
  font-size: var(--md-sys-typescale-body-small-size);
  opacity: 0.85;
}

/* ---- Streaming ---- */
.message.ai.streaming .message-content {
  box-shadow: 0 0 20px rgba(102, 126, 234, 0.2);
}

.streaming-content {
  word-wrap: break-word;
  white-space: pre-wrap;
  min-height: 20px;
  line-height: var(--md-sys-typescale-body-large-line);
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.3; }
}

.typing-cursor {
  color: rgba(255,255,255,0.8);
  font-weight: bold;
  animation: blink 1s var(--md-sys-motion-easing-linear) infinite;
}

@keyframes aiThinkingPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

/* ---- AI Mode Toggle Button ---- */
.ai-mode-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--md-sys-shape-corner-full);
  font-size: var(--md-sys-typescale-label-small-size);
  font-weight: var(--md-sys-typescale-label-small-weight);
  transition: background var(--md-sys-duration-short3) ease;
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
}
.ai-mode-toggle.active {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
}