/* AI健康助手浮窗样式 */
.ai-button {
  position: fixed; bottom: 30px; right: 30px; z-index: 9999;
  width: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(135deg, #00b4d8, #0077b6);
  border: none; cursor: pointer; box-shadow: 0 4px 20px rgba(0,180,216,0.4);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.3s, box-shadow 0.3s; animation: aiPulse 2s infinite;
}
.ai-button:hover { transform: scale(1.1); box-shadow: 0 6px 30px rgba(0,180,216,0.6); }
.ai-button svg { width: 28px; height: 28px; fill: white; }
@keyframes aiPulse { 0%,100%{box-shadow:0 4px 20px rgba(0,180,216,0.4)} 50%{box-shadow:0 4px 30px rgba(0,180,216,0.7)} }

.ai-window {
  position: fixed; bottom: 100px; right: 30px; z-index: 9999;
  width: 360px; height: 520px; background: #0f2440;
  border-radius: 16px; border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 10px 40px rgba(0,0,0,0.5); overflow: hidden;
  display: none; flex-direction: column; backdrop-filter: blur(20px);
}
.ai-window.open { display: flex; animation: slideUp 0.3s ease; }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.ai-header {
  padding: 16px 20px; background: rgba(0,0,0,0.2);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: space-between;
}
.ai-header h3 { font-size: 0.95rem; color: #e8e8e8; font-weight: 600; }
.ai-status { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; color: #2dc653; }
.ai-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #2dc653; animation: statusBlink 1.5s infinite; }
@keyframes statusBlink { 0%,100%{opacity:1} 50%{opacity:0.3} }
.ai-close { background: none; border: none; color: #8899aa; cursor: pointer; font-size: 1.2rem; padding: 4px; }
.ai-close:hover { color: white; }

.ai-messages { flex: 1; overflow-y: auto; padding: 16px; }
.ai-messages::-webkit-scrollbar { width: 4px; }
.ai-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }
.ai-message { margin-bottom: 12px; max-width: 85%; padding: 10px 14px; border-radius: 12px; font-size: 0.85rem; line-height: 1.5; word-break: break-word; }
.ai-message.ai { background: rgba(255,255,255,0.08); color: #c8d6e5; border-bottom-left-radius: 4px; }
.ai-message.user { background: linear-gradient(135deg, #00b4d8, #0077b6); color: white; margin-left: auto; border-bottom-right-radius: 4px; }
.ai-options { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.ai-option {
  padding: 8px 16px; border-radius: 20px; border: 1px solid rgba(0,180,216,0.3);
  background: rgba(0,180,216,0.1); color: #00b4d8; cursor: pointer;
  font-size: 0.8rem; transition: all 0.2s;
}
.ai-option:hover { background: rgba(0,180,216,0.2); border-color: #00b4d8; }
.ai-cta {
  display: block; width: 100%; padding: 10px; margin-top: 8px;
  background: linear-gradient(135deg, #d4a843, #b8860b); color: white;
  border: none; border-radius: 8px; cursor: pointer; font-size: 0.9rem;
  font-weight: 600; transition: opacity 0.2s;
}
.ai-cta:hover { opacity: 0.9; }
.ai-typing { display: flex; gap: 4px; padding: 8px; }
.ai-typing span { width: 6px; height: 6px; border-radius: 50%; background: #8899aa; animation: typingDot 1.4s infinite; }
.ai-typing span:nth-child(2) { animation-delay: 0.2s; }
.ai-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingDot { 0%,60%,100%{opacity:0.3} 30%{opacity:1} }

.ai-input { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; gap: 8px; }
.ai-input input {
  flex: 1; padding: 10px 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1);
  background: rgba(0,0,0,0.2); color: #e8e8e8; font-size: 0.85rem; outline: none;
}
.ai-input input::placeholder { color: #667788; }
.ai-input input:focus { border-color: #00b4d8; }
.ai-input button {
  padding: 10px 16px; border-radius: 8px; border: none;
  background: linear-gradient(135deg, #00b4d8, #0077b6); color: white; cursor: pointer;
  font-size: 0.85rem; transition: opacity 0.2s;
}
.ai-input button:hover { opacity: 0.9; }

@media (max-width: 480px) {
  .ai-window { width: 100%; height: 100%; bottom: 0; right: 0; border-radius: 0; }
  .ai-button { bottom: 16px; right: 16px; width: 52px; height: 52px; }
  .ai-button svg { width: 24px; height: 24px; }
}