html,
            body {
                height: 100%;
            }

            body {
                min-height: 100dvh;
            }

            .animate-fade-in {
                animation: fadeIn 0.28s ease-in-out;
            }

            .animate-scale-in {
                animation: scaleIn 0.2s ease-out;
                transform-origin: top right;
            }

            @keyframes fadeIn {
                from {
                    opacity: 0;
                    transform: translateY(8px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            @keyframes scaleIn {
                from {
                    opacity: 0;
                    transform: scale(0.96) translateY(-4px);
                }
                to {
                    opacity: 1;
                    transform: scale(1) translateY(0);
                }
            }

            ::-webkit-scrollbar {
                width: 6px;
                height: 6px;
            }

            ::-webkit-scrollbar-thumb {
                background: #cbd5e1;
                border-radius: 999px;
            }

            .dark ::-webkit-scrollbar-thumb {
                background: #475569;
            }

            .typing-dot {
                width: 7px;
                height: 7px;
                border-radius: 9999px;
                background: #94a3b8;
                animation: bounce 1.2s infinite ease-in-out;
            }

            .typing-dot:nth-child(2) {
                animation-delay: 0.15s;
            }

            .typing-dot:nth-child(3) {
                animation-delay: 0.3s;
            }

            @keyframes bounce {
                0%,
                80%,
                100% {
                    transform: scale(0.8);
                    opacity: 0.5;
                }
                40% {
                    transform: scale(1);
                    opacity: 1;
                }
            }

            code.inline-code {
                background: rgba(148, 163, 184, 0.15);
                padding: 2px 6px;
                border-radius: 6px;
                font-size: 13px;
                font-family: monospace;
            }

            .safe-top {
                padding-top: max(12px, env(safe-area-inset-top));
            }

            .safe-bottom {
                padding-bottom: max(12px, env(safe-area-inset-bottom));
            }

            .chat-shell {
                width: 100%;
                max-width: 1100px;
                margin: 0 auto;
            }

            .message-wrap {
                width: fit-content;
                max-width: 100%;
                overflow-wrap: anywhere;
                word-break: break-word;
            }

            .glass-nav {
                backdrop-filter: blur(14px);
                -webkit-backdrop-filter: blur(14px);
            }

            .hero-glow {
                background:
                    radial-gradient(
                        circle at top left,
                        rgba(59, 130, 246, 0.18),
                        transparent 32%
                    ),
                    radial-gradient(
                        circle at bottom right,
                        rgba(14, 165, 233, 0.14),
                        transparent 28%
                    );
            }

            .dark .hero-glow {
                background:
                    radial-gradient(
                        circle at top left,
                        rgba(59, 130, 246, 0.15),
                        transparent 32%
                    ),
                    radial-gradient(
                        circle at bottom right,
                        rgba(14, 165, 233, 0.1),
                        transparent 28%
                    );
            }