/* Live streaming assistant bubble */ .streaming-wrapper { display: flex; flex-direction: column; gap: 12px; width: 100%; } /* Match the final message thinking style instead of a purple card */ .stream-thinking-block { width: 100%; max-width: min(100%, 72ch); padding: 0 0 10px 0; background: transparent; border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.05); box-shadow: none; } .stream-thinking-header { display: inline-flex; align-items: center; gap: 8px; padding: 10px 0; margin-bottom: 0; } .stream-thinking-pulse { width: 6px; height: 6px; border-radius: 999px; background: currentColor; color: rgba(255, 255, 255, 0.5); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.18); animation: stream-pulse 1.25s infinite; } .stream-thinking-label { font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.5); } .stream-thinking-body { padding: 4px 0 0 28px; font-size: 0.875rem; line-height: 1.6; color: rgba(255, 255, 255, 0.6); white-space: pre-wrap; word-break: break-word; border-left: 2px solid rgba(255, 255, 255, 0.1); margin-left: 16px; font-style: normal; } .stream-thinking-placeholder { color: rgba(255, 255, 255, 0.46); font-style: italic; } .word-stream-token { display: inline-block; opacity: 0; transform: translateY(2px); background: linear-gradient(135deg, rgba(255,255,255,0.72), rgba(255,255,255,0.56)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: word-fade-in 420ms ease forwards; } .stream-content-bubble { display: none; } .stream-content { display: none; } .stream-cursor { display: none; } .stream-loading-dots { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); width: fit-content; } .stream-loading-dots span { width: 7px; height: 7px; border-radius: 999px; background: rgba(196, 181, 253, 0.9); animation: stream-dot-bounce 1.1s infinite ease-in-out; } .stream-loading-dots span:nth-child(2) { animation-delay: 0.14s; } .stream-loading-dots span:nth-child(3) { animation-delay: 0.28s; } @keyframes stream-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.18); opacity: 1; } 70% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); opacity: 0.55; } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); opacity: 1; } } @keyframes word-fade-in { from { opacity: 0; transform: translateY(2px); filter: blur(2px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } @keyframes blink-cursor { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } @keyframes stream-dot-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: 0.55; } 40% { transform: translateY(-4px); opacity: 1; } }