#showcase-root {
            font-family: 'Inter', 'Noto Sans TC', sans-serif;
            background-color: #0b0f19;
            background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0);
            background-size: 2.5rem 2.5rem;
        }

        #showcase-root .phone-frame {
            height: 95vh;
            max-height: 820px;
            width: 340px;
            min-height: 600px;
            background: #111;
            border-radius: 40px;
            padding: 12px;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 2px 2px rgba(255, 255, 255, 0.1);
            position: relative;
            border: 2px solid #444;
        }

        #showcase-root .phone-screen {
            width: 100%;
            height: 100%;
            background: #f8fafc;
            border-radius: 30px;
            overflow: hidden;
            position: relative;
            display: flex;
            flex-direction: column;
        }

        #showcase-root .phone-notch {
            position: absolute;
            top: 0px;
            left: 50%;
            transform: translateX(-50%);
            width: 120px;
            height: 25px;
            background: #111;
            border-radius: 0 0 15px 15px;
            z-index: 100;
        }

        @keyframes llm06-excessive-agency-fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        @keyframes llm06-excessive-agency-slideUp {
            from {
                transform: translateY(calc(100% + 48px));
            }

            to {
                transform: translateY(0);
            }
        }

        @keyframes llm06-excessive-agency-popIn {
            from {
                opacity: 0;
                transform: scale(0.8);
            }

            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        #showcase-root .fade-in {
            animation: llm06-excessive-agency-fadeIn 0.5s ease-out forwards;
        }

        #showcase-root .custom-scrollbar::-webkit-scrollbar {
            width: 4px;
        }

        #showcase-root .custom-scrollbar::-webkit-scrollbar-track {
            background: transparent;
        }

        #showcase-root .custom-scrollbar::-webkit-scrollbar-thumb {
            background-color: rgba(0, 0, 0, 0.2);
            border-radius: 4px;
        }

        #showcase-root .typing-indicator span {
            display: inline-block;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background-color: #9ca3af;
            animation: llm06-excessive-agency-typing-llm06-excessive-agency-blink 1.4s infinite both;
        }

        #showcase-root .typing-indicator span:nth-child(2) {
            animation-delay: 0.2s;
        }

        #showcase-root .typing-indicator span:nth-child(3) {
            animation-delay: 0.4s;
        }

        @keyframes llm06-excessive-agency-typing-blink {

            0%,
            80%,
            100% {
                opacity: 0.3;
            }

            40% {
                opacity: 1;
            }
        }

        #showcase-root #command-input::-webkit-scrollbar {
            display: none;
        }

        #showcase-root #command-input {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        #showcase-root .transactions-scroll {
            overflow-y: auto;
        }

        #showcase-root .qbank-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        #showcase-root .qbank-logo-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        #showcase-root .typewriter-cursor {
            display: inline-block;
            background-color: #666;
            margin-left: 2px;
            width: 2px;
            animation: llm06-excessive-agency-blink 1s infinite;
        }

        @keyframes llm06-excessive-agency-blink {

            0%,
            50% {
                opacity: 1;
            }

            51%,
            100% {
                opacity: 0;
            }
        }

        #showcase-root #ai-panel {
            position: absolute;
            inset: 0;
            background-color: rgba(0, 0, 0, 0.2);
            z-index: 30;
        }

        #showcase-root .chat-panel-container {
            position: absolute;
            bottom: 12px;
            left: 12px;
            right: 12px;
            width: calc(100% - 24px);
            max-height: 64%;
            background: #f1f5f9;
            border-radius: 20px;
            box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.2);
            display: flex;
            flex-direction: column;
            animation: llm06-excessive-agency-slideUp 0.5s cubic-bezier(0.25, 1, 0.5, 1);
            overflow: hidden;
        }

        #showcase-root .chat-header {
            flex-shrink: 0;
            padding: 10px 16px;
            border-bottom: 1px solid #e2e8f0;
            background: white;
            position: relative;
        }

        #showcase-root #close-ai {
            position: absolute;
            top: 50%;
            right: 16px;
            transform: translateY(-50%);
        }

        #showcase-root .chat-messages {
            flex-grow: 1;
            overflow-y: auto;
            padding: 10px;
            min-height: 0;
        }

        #showcase-root .chat-input-container {
            flex-shrink: 0;
            padding: 10px;
            background: white;
            border-top: 1px solid #e2e8f0;
            z-index: 10;
        }
        #showcase-root .celebration-container {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
            z-index: 20;
            overflow: hidden;
        }

        #showcase-root .confetti {
            position: absolute;
            width: 8px;
            height: 8px;
            background: #ff6b6b;
            animation: llm06-excessive-agency-confetti-fall 3s linear forwards;
        }

        #showcase-root .confetti:nth-child(2n) {
            background: #4ecdc4;
        }

        #showcase-root .confetti:nth-child(3n) {
            background: #45b7d1;
        }

        #showcase-root .confetti:nth-child(4n) {
            background: #96ceb4;
        }

        #showcase-root .confetti:nth-child(5n) {
            background: #ffeaa7;
        }

        #showcase-root .confetti:nth-child(6n) {
            background: #fd79a8;
        }

        #showcase-root .confetti:nth-child(7n) {
            background: #fdcb6e;
        }

        @keyframes llm06-excessive-agency-confetti-fall {
            0% {
                transform: translateY(-100vh) rotate(0deg);
                opacity: 1;
            }

            100% {
                transform: translateY(100vh) rotate(720deg);
                opacity: 0;
            }
        }

        #showcase-root .firework {
            position: absolute;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            animation: llm06-excessive-agency-firework-explode 2s ease-out forwards;
        }

        @keyframes llm06-excessive-agency-firework-explode {
            0% {
                transform: scale(0) rotate(0deg);
                opacity: 1;
            }

            50% {
                opacity: 1;
            }

            100% {
                transform: scale(20) rotate(180deg);
                opacity: 0;
            }
        }

        #showcase-root .firework:nth-child(1) {
            background: #ff6b6b;
            animation-delay: 0s;
        }

        #showcase-root .firework:nth-child(2) {
            background: #4ecdc4;
            animation-delay: 0.1s;
        }

        #showcase-root .firework:nth-child(3) {
            background: #45b7d1;
            animation-delay: 0.2s;
        }

        #showcase-root .firework:nth-child(4) {
            background: #96ceb4;
            animation-delay: 0.3s;
        }

        #showcase-root .firework:nth-child(5) {
            background: #ffeaa7;
            animation-delay: 0.4s;
        }

        #showcase-root .firework:nth-child(6) {
            background: #fd79a8;
            animation-delay: 0.5s;
        }

        #showcase-root .sparkle {
            position: absolute;
            width: 6px;
            height: 6px;
            background: #fff700;
            border-radius: 50%;
            animation: llm06-excessive-agency-sparkle-twinkle 1.5s ease-in-out infinite;
        }

        @keyframes llm06-excessive-agency-sparkle-twinkle {

            0%,
            100% {
                opacity: 0;
                transform: scale(0) rotate(0deg);
            }

            50% {
                opacity: 1;
                transform: scale(1) rotate(180deg);
            }
        }

        #showcase-root .money-emoji {
            position: absolute;
            font-size: 24px;
            animation: llm06-excessive-agency-money-float 2s ease-out forwards;
            pointer-events: none;
        }

        @keyframes llm06-excessive-agency-money-float {
            0% {
                transform: translateY(0) scale(0.5);
                opacity: 1;
            }

            50% {
                transform: translateY(-30px) scale(1.2);
                opacity: 1;
            }

            100% {
                transform: translateY(-60px) scale(0.8);
                opacity: 0;
            }
        }
        @media (max-width: 1023px) {
            #showcase-root .phone-frame {
                height: 95vh;
                max-height: 820px;
                width: 90%;
                max-width: 340px;
                min-height: 600px;
            }

            #showcase-root .sidebar-panel {
                border-right: none;
                border-bottom: 1px solid rgba(168, 85, 247, 0.3);
            }
        }

        @media (min-width: 1024px) {
            #showcase-root .phone-frame {
                height: 95vh;
                max-height: 820px;
                width: 340px;
                min-height: 600px;
            }
        }