/* ========================================================== slowtype.css — Typing styles (v2, no box, no overflow) ---------------------------------------------------------- PLACEMENT in index.html : Add AFTER your other CSS links (before ): ========================================================== */ /* ── OVERRIDE: kill the box from style.css ──────────────── * style.css line ~1070 sets min-height, min-width, overflow:hidden on .ai-message.typing-active — that's the visible rectangle. We neutralise it here (our file loads after style.css). ---------------------------------------------------------- */ .ai-message.typing-active .message-bubble { min-height: unset !important; min-width: unset !important; overflow: visible !important; } /* ── BLINKING CURSOR ────────────────────────────────────── * Shows on .rich-paragraph while the .st-typing-active class is present. Removed automatically when typing finishes. ---------------------------------------------------------- */ .st-typing-active::after { content: '|'; display: inline !important; margin-left: 1px; color: inherit; opacity: 1; animation: st_blink 0.65s step-end infinite; vertical-align: baseline; line-height: inherit; font-size: inherit; font-weight: 400; position: relative; float: none; } /* Last block child (p, div, span) inside a typing bubble must be inline-block so the ::after cursor stays on the same line as the last character */ .st-typing-active > *:last-child { display: inline !important; } @keyframes st_blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* ── ROW FADE-IN ────────────────────────────────────────── * Each new AI message row slides up gently when appended. ---------------------------------------------------------- */ .message-row.ai-message { animation: st_fadeUp 0.2s ease-out both; } @keyframes st_fadeUp { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }