/* Lex Nubes AI — Page Styles */

/* Hero chat animation */
.lnx-hero-anim { padding: 24px; width: 100%; max-width: 400px; }
.lnx-chat { display: flex; flex-direction: column; gap: 14px; }
.lnx-msg { display: flex; gap: 10px; opacity: 0; }
.lnx-user { justify-content: flex-end; }
.lnx-user span { padding: 10px 14px; background: #8b5cf6; color: #fff; border-radius: 12px 12px 4px 12px; font-size: 0.75rem; line-height: 1.5; max-width: 220px; }
.lnx-ai { align-items: flex-start; }
.lnx-ai-icon { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg,#8b5cf6,#6d28d9); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; flex-shrink: 0; }
.lnx-ai-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; background: #f3f0ff; border-radius: 12px 12px 12px 4px; min-width: 180px; }
.lnx-ai-line { height: 6px; background: #ddd6fe; border-radius: 3px; width: 100%; }
.lnx-ai-line.short { width: 60%; }

.lnx-m1 { animation: lnxFadeUp 0.4s 0.3s ease both; }
.lnx-m2 { animation: lnxFadeUp 0.4s 0.9s ease both; }
.lnx-al1 { animation: lnxLineIn 0.3s 1.2s ease both; }
.lnx-al2 { animation: lnxLineIn 0.3s 1.5s ease both; }
.lnx-al3 { animation: lnxLineIn 0.3s 1.8s ease both; }

@keyframes lnxFadeUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes lnxLineIn { from { opacity:0; width:0; } to { opacity:1; width:100%; } }
.lnx-ai-line.short { animation: lnxLineInShort 0.3s 1.8s ease both; }
@keyframes lnxLineInShort { from { opacity:0; width:0; } to { opacity:1; width:60%; } }

/* Streaming answer detail animation */
.lnx-stream-anim { padding: 20px; display: flex; flex-direction: column; gap: 12px; width: 100%; }
.lnx-sa-q { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: #8b5cf6; font-weight: 600; }
.lnx-sa-q i { font-size: 0.9rem; }
.lnx-sa-a { padding: 16px; background: #fff; border-radius: 10px; box-shadow: 0 1px 6px rgba(0,0,0,0.05); display: flex; flex-direction: column; gap: 8px; }
.lnx-sa-tag { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #8b5cf6; padding: 3px 8px; background: rgba(139,92,246,0.08); border-radius: 4px; width: fit-content; }
.lnx-sa-line { height: 6px; background: #e8edf5; border-radius: 3px; }
.lnx-sa-line.short { width: 65%; }
.lnx-sa-src { font-size: 0.7rem; color: #639BF1; display: flex; align-items: center; gap: 6px; }
.lnx-sa-src i { font-size: 0.6rem; }

/* Knowledge base animation */
.lnx-kb-anim { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 30px; width: 100%; }
.lnx-kb-db, .lnx-kb-ai { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px; background: #fff; border-radius: 14px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.lnx-kb-db i { font-size: 2rem; color: #8b5cf6; }
.lnx-kb-ai i { font-size: 2rem; color: #6d28d9; }
.lnx-kb-db span, .lnx-kb-ai span { font-size: 0.65rem; font-weight: 700; color: #64748b; }

.lnx-kb-flow { display: flex; gap: 8px; align-items: center; }
.lnx-kb-dot { width: 8px; height: 8px; border-radius: 50%; background: #a78bfa; }
.lnx-kd1 { animation: lnxDotFlow 1.5s 0s ease-in-out infinite; }
.lnx-kd2 { animation: lnxDotFlow 1.5s 0.25s ease-in-out infinite; }
.lnx-kd3 { animation: lnxDotFlow 1.5s 0.5s ease-in-out infinite; }
@keyframes lnxDotFlow { 0%,100% { opacity:0.3; transform:scale(0.7); } 50% { opacity:1; transform:scale(1.2); } }

@media (prefers-reduced-motion: reduce) {
    .lnx-m1,.lnx-m2,.lnx-al1,.lnx-al2,.lnx-al3,.lnx-kb-dot { animation: none !important; opacity: 1; transform: none; }
    .lnx-ai-line,.lnx-ai-line.short { width: auto; }
}