From a293c0e083e0b4387501590f3ae4b534539521e2 Mon Sep 17 00:00:00 2001
From: "Rodrigo Rodriguez (Pragmatismo)" <rodriguez@pragmatismo.com.br>
Date: Wed, 15 Oct 2025 10:37:04 -0300
Subject: [PATCH] - Fix on the web presentation.

---
 .vscode/launch.json                           |    2 +-
 src/basic/keywords/get.rs                     |    5 +-
 .../annoucements.gbdialog/start.bas           |   11 +-
 web/index.html                                | 1068 +++++++++++++----
 web/static/style.css                          |  486 --------
 5 files changed, 869 insertions(+), 703 deletions(-)

diff --git a/.vscode/launch.json b/.vscode/launch.json
index 6c2b69a0..56451705 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -42,4 +42,4 @@
             "cwd": "${workspaceFolder}"
         }
     ]
-}
\ No newline at end of file
+}
diff --git a/src/basic/keywords/get.rs b/src/basic/keywords/get.rs
index 3e813c17..021fd4d0 100644
--- a/src/basic/keywords/get.rs
+++ b/src/basic/keywords/get.rs
@@ -63,8 +63,9 @@ pub async fn get_from_bucket(
     info!("Getting file from bucket: {}", file_path);
 
     if let Some(s3_client) = &state.s3_client {
-        let bucket_name =
-            std::env::var("DEFAULT_BUCKET").unwrap_or_else(|_| "default-bucket".to_string());
+        let bucket_name = std::env::var("DRIVE_ORG_PREFIX")
+            .map(|v| format!("{}-default", v))
+            .unwrap_or_else(|_| "org-default".to_string());
 
         let response = s3_client
             .get_object()
diff --git a/templates/annoucements.gbai/annoucements.gbdialog/start.bas b/templates/annoucements.gbai/annoucements.gbdialog/start.bas
index d0a951f0..5fc0fd3f 100644
--- a/templates/annoucements.gbai/annoucements.gbdialog/start.bas
+++ b/templates/annoucements.gbai/annoucements.gbdialog/start.bas
@@ -1,8 +1,7 @@
 TALK "Olá, estou preparando um resumo para você."
-let x = LLM "Quando é 5+5?"
-TALK x
-SET_CONTEXT "Este é o documento que você deve usar para responder dúvidas: O céu é azul."
 
-REM text = GET "default.pdf"
-REM resume = LLM "Say Hello and present a a resume from " + text
-REM TALK resume
+text = GET "default.gbdrive/default.pdf"
+resume = LLM "Say Hello and present a a resume from " + text
+
+SET_CONTEXT "Este é o documento que você deve usar para responder dúvidas: O céu é azul."
+TALK resume
diff --git a/web/index.html b/web/index.html
index ad635a03..29ceb04e 100644
--- a/web/index.html
+++ b/web/index.html
@@ -6,18 +6,654 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <script src="https://cdn.tailwindcss.com"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.2/anime.min.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/livekit-client/dist/livekit-client.umd.min.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
         <style>
             @import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;800&family=Inter:wght@400;600&display=swap");
+
+            :root {
+                --dante-glow: rgba(255, 215, 0, 0.8);
+            }
+
+            * {
+                margin: 0;
+                padding: 0;
+                box-sizing: border-box;
+            }
+
+            body {
+                font-family: "Inter", sans-serif;
+                background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 100%);
+                color: #e0e0e0;
+                overflow: hidden;
+            }
+
+            .sidebar {
+                position: fixed;
+                left: -300px;
+                top: 0;
+                width: 300px;
+                height: 100vh;
+                background: rgba(10, 14, 39, 0.95);
+                border-right: 1px solid rgba(255, 215, 0, 0.3);
+                transition: left 0.3s ease;
+                z-index: 100;
+                overflow-y: auto;
+                padding: 20px;
+                box-shadow: 5px 0 25px rgba(0, 0, 0, 0.5);
+            }
+
+            .sidebar.open {
+                left: 0;
+            }
+
+            .sidebar-toggle {
+                position: fixed;
+                left: 20px;
+                top: 24px;
+                opacity: 30%;
+                z-index: 101;
+                background: rgba(255, 215, 0, 0.2);
+                border: 1px solid rgba(255, 215, 0, 0.4);
+                color: #ffd700;
+                padding: 10px 15px;
+                border-radius: 8px;
+                cursor: pointer;
+                transition: all 0.3s ease;
+                font-size: 20px;
+                width: 45px;
+                height: 45px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+            }
+
+            .sidebar-toggle:hover {
+                background: rgba(255, 215, 0, 0.3);
+                box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
+            }
+
+            .new-chat {
+                width: 100%;
+                padding: 12px;
+                background: rgba(255, 215, 0, 0.2);
+                border: 1px solid rgba(255, 215, 0, 0.4);
+                border-radius: 8px;
+                color: #ffd700;
+                cursor: pointer;
+                margin-top: 60px; /* Moved down to create space */
+                margin-bottom: 15px;
+                transition: all 0.3s ease;
+                font-weight: 600;
+                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+            }
+
+            .new-chat:hover {
+                background: rgba(255, 215, 0, 0.3);
+                box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
+            }
+
+            .voice-toggle {
+                width: 100%;
+                padding: 12px;
+                background: rgba(100, 255, 100, 0.2);
+                border: 1px solid rgba(100, 255, 100, 0.3);
+                border-radius: 8px;
+                color: #90ff90;
+                cursor: pointer;
+                margin-bottom: 15px;
+                transition: all 0.3s ease;
+                font-weight: 600;
+                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+            }
+
+            .voice-toggle:hover {
+                background: rgba(100, 255, 100, 0.3);
+            }
+
+            .voice-toggle.recording {
+                background: rgba(255, 100, 100, 0.3);
+                border-color: rgba(255, 100, 100, 0.4);
+                color: #ff9090;
+            }
+
+            .history-item {
+                padding: 10px;
+                margin-bottom: 8px;
+                background: rgba(255, 255, 255, 0.05);
+                border-radius: 6px;
+                cursor: pointer;
+                transition: all 0.2s ease;
+                font-size: 14px;
+                word-wrap: break-word;
+            }
+
+            .history-item:hover {
+                background: rgba(255, 215, 0, 0.2);
+                border: 1px solid rgba(255, 215, 0, 0.3);
+            }
+
+            .main {
+                margin-left: 0;
+                width: 100%;
+                height: 100vh;
+                display: flex;
+                flex-direction: column;
+                transition: margin-left 0.3s ease;
+            }
+
+            .sidebar.open ~ .main {
+                margin-left: 300px;
+                width: calc(100% - 300px);
+            }
+
+            header {
+                background: rgba(10, 14, 39, 0.8);
+                backdrop-filter: blur(10px);
+                border-bottom: 1px solid rgba(255, 215, 0, 0.3);
+                padding: 20px 40px 20px 80px;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+            }
+
+            .logo {
+                display: flex;
+                align-items: center;
+                gap: 12px;
+            }
+
+            .logo-icon {
+                width: 40px;
+                height: 40px;
+                background: linear-gradient(135deg, #ffd700, #ffed4e);
+                border-radius: 10px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 24px;
+                font-weight: 800;
+                color: #0a0e27;
+                box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
+            }
+
+            .logo-text {
+                font-size: 24px;
+                font-weight: 800;
+                font-family: "Orbitron", sans-serif;
+                color: #ffd700;
+                text-shadow: 0 0 20px var(--dante-glow);
+            }
+
+            .neon-text {
+                animation: neonPulse 2s ease-in-out infinite;
+            }
+
+            @keyframes neonPulse {
+                0%,
+                100% {
+                    text-shadow:
+                        0 0 20px var(--dante-glow),
+                        0 0 40px var(--dante-glow);
+                }
+                50% {
+                    text-shadow:
+                        0 0 30px var(--dante-glow),
+                        0 0 60px var(--dante-glow),
+                        0 0 80px rgba(255, 215, 0, 0.6);
+                }
+            }
+
+            #messages {
+                flex: 1;
+                overflow-y: auto;
+                padding: 40px 20px;
+                max-width: 900px;
+                margin: 0 auto;
+                width: 100%;
+            }
+
+            #emptyState {
+                text-align: center;
+                padding-top: 120px;
+            }
+
+            .empty-icon {
+                width: 80px;
+                height: 80px;
+                background: linear-gradient(135deg, #ffd700, #ffed4e);
+                border-radius: 20px;
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 48px;
+                font-weight: 800;
+                color: #0a0e27;
+                margin-bottom: 20px;
+                box-shadow: 0 0 30px rgba(255, 215, 0, 0.6);
+            }
+
+            .empty-title {
+                font-size: 32px;
+                font-weight: 800;
+                font-family: "Orbitron", sans-serif;
+                color: #ffd700;
+                margin-bottom: 10px;
+                text-shadow: 0 0 20px var(--dante-glow);
+            }
+
+            .empty-subtitle {
+                color: #a0a0ff;
+                font-size: 16px;
+            }
+
+            .message-container {
+                margin-bottom: 30px;
+                opacity: 0;
+                transform: translateY(20px);
+            }
+
+            .user-message {
+                display: flex;
+                justify-content: flex-end;
+            }
+
+            .user-message-content {
+                background: rgba(255, 215, 0, 0.2);
+                border: 1px solid rgba(255, 215, 0, 0.4);
+                border-radius: 18px;
+                padding: 14px 18px;
+                max-width: 70%;
+                color: #ffd700;
+                font-weight: 500;
+                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+            }
+
+            .assistant-message {
+                display: flex;
+                gap: 12px;
+                align-items: flex-start;
+            }
+
+            .assistant-avatar {
+                width: 36px;
+                height: 36px;
+                background: linear-gradient(135deg, #ffd700, #ffed4e);
+                border-radius: 8px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 18px;
+                font-weight: 800;
+                color: #0a0e27;
+                flex-shrink: 0;
+                box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
+            }
+
+            .assistant-message-content {
+                background: rgba(255, 255, 255, 0.05);
+                border: 1px solid rgba(255, 215, 0, 0.2);
+                border-radius: 18px;
+                padding: 14px 18px;
+                flex: 1;
+                color: #e0e0e0;
+                line-height: 1.6;
+                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+            }
+
+            .thinking-indicator {
+                display: flex;
+                gap: 12px;
+                align-items: center;
+                padding: 14px 18px;
+                color: #ffd700;
+            }
+
+            .typing-dots {
+                display: flex;
+                gap: 6px;
+            }
+
+            .typing-dot {
+                width: 8px;
+                height: 8px;
+                background: #ffd700;
+                border-radius: 50%;
+                animation: bounce 1.4s infinite ease-in-out;
+                box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
+            }
+
+            .typing-dot:nth-child(1) {
+                animation-delay: -0.32s;
+            }
+
+            .typing-dot:nth-child(2) {
+                animation-delay: -0.16s;
+            }
+
+            @keyframes bounce {
+                0%,
+                80%,
+                100% {
+                    transform: scale(0);
+                }
+                40% {
+                    transform: scale(1);
+                }
+            }
+
+            footer {
+                background: rgba(10, 14, 39, 0.8);
+                backdrop-filter: blur(10px);
+                border-top: 1px solid rgba(255, 215, 0, 0.3);
+                padding: 20px 40px;
+                box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
+            }
+
+            .input-container {
+                display: flex;
+                gap: 12px;
+                max-width: 900px;
+                margin: 0 auto;
+            }
+
+            #messageInput {
+                flex: 1;
+                background: rgba(255, 255, 255, 0.05);
+                border: 1px solid rgba(255, 215, 0, 0.2);
+                border-radius: 12px;
+                padding: 14px 18px;
+                color: #e0e0e0;
+                font-size: 15px;
+                outline: none;
+                transition: all 0.3s ease;
+                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+            }
+
+            #messageInput:focus {
+                border-color: rgba(255, 215, 0, 0.5);
+                background: rgba(255, 255, 255, 0.08);
+                box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
+            }
+
+            #messageInput::placeholder {
+                color: rgba(255, 215, 0, 0.4);
+            }
+
+            #sendBtn {
+                background: linear-gradient(135deg, #ffd700, #ffed4e);
+                border: none;
+                border-radius: 12px;
+                padding: 14px 28px;
+                color: #0a0e27;
+                font-weight: 700;
+                cursor: pointer;
+                transition: all 0.3s ease;
+                box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
+            }
+
+            #sendBtn:hover {
+                transform: translateY(-2px);
+                box-shadow: 0 6px 20px rgba(255, 215, 0, 0.6);
+            }
+
+            #newChatBtn {
+                background: rgba(255, 215, 0, 0.2);
+                border: 1px solid rgba(255, 215, 0, 0.4);
+                border-radius: 10px;
+                padding: 10px 20px;
+                color: #ffd700;
+                font-weight: 600;
+                cursor: pointer;
+                transition: all 0.3s ease;
+                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+            }
+
+            #newChatBtn:hover {
+                background: rgba(255, 215, 0, 0.3);
+                box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
+            }
+
+            .voice-status {
+                background: rgba(100, 255, 100, 0.2);
+                border: 1px solid rgba(100, 255, 100, 0.3);
+                padding: 12px 20px;
+                text-align: center;
+                color: #90ff90;
+                font-weight: 600;
+                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+            }
+
+            .warning-message {
+                background: rgba(255, 200, 0, 0.2);
+                border: 1px solid rgba(255, 200, 0, 0.3);
+                border-radius: 12px;
+                padding: 14px 18px;
+                margin-bottom: 20px;
+                color: #ffd700;
+                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+            }
+
+            /* Markdown Styles */
+            .markdown-content h1,
+            .markdown-content h2,
+            .markdown-content h3 {
+                margin-top: 20px;
+                margin-bottom: 12px;
+                font-weight: 700;
+                color: #ffd700;
+            }
+
+            .markdown-content h1 {
+                font-size: 24px;
+            }
+
+            .markdown-content h2 {
+                font-size: 20px;
+            }
+
+            .markdown-content h3 {
+                font-size: 18px;
+            }
+
+            .markdown-content p {
+                margin-bottom: 12px;
+                line-height: 1.7;
+            }
+
+            .markdown-content ul,
+            .markdown-content ol {
+                margin-bottom: 12px;
+                padding-left: 24px;
+            }
+
+            .markdown-content li {
+                margin-bottom: 6px;
+            }
+
+            .markdown-content code {
+                background: rgba(255, 215, 0, 0.1);
+                padding: 2px 6px;
+                border-radius: 4px;
+                font-family: "Courier New", monospace;
+                font-size: 14px;
+                color: #ffd700;
+            }
+
+            .markdown-content pre {
+                background: rgba(0, 0, 0, 0.3);
+                border: 1px solid rgba(255, 215, 0, 0.2);
+                border-radius: 8px;
+                padding: 16px;
+                overflow-x: auto;
+                margin-bottom: 12px;
+            }
+
+            .markdown-content pre code {
+                background: none;
+                padding: 0;
+                color: #e0e0e0;
+            }
+
+            .markdown-content table {
+                width: 100%;
+                border-collapse: collapse;
+                margin-bottom: 12px;
+            }
+
+            .markdown-content table th,
+            .markdown-content table td {
+                border: 1px solid rgba(255, 215, 0, 0.2);
+                padding: 10px;
+                text-align: left;
+            }
+
+            .markdown-content table th {
+                background: rgba(255, 215, 0, 0.1);
+                font-weight: 600;
+                color: #ffd700;
+            }
+
+            .markdown-content blockquote {
+                border-left: 3px solid rgba(255, 215, 0, 0.5);
+                padding-left: 16px;
+                margin: 12px 0;
+                color: #b0b0ff;
+            }
+
+            .markdown-content strong {
+                font-weight: 700;
+                color: #ffd700;
+            }
+
+            .markdown-content em {
+                font-style: italic;
+                color: #b0b0ff;
+            }
+
+            .markdown-content a {
+                color: #ffd700;
+                text-decoration: underline;
+            }
+
+            .markdown-content a:hover {
+                color: #ffed4e;
+            }
+
+            ::-webkit-scrollbar {
+                width: 8px;
+            }
+
+            ::-webkit-scrollbar-track {
+                background: rgba(255, 255, 255, 0.05);
+            }
+
+            ::-webkit-scrollbar-thumb {
+                background: rgba(255, 215, 0, 0.3);
+                border-radius: 4px;
+            }
+
+            ::-webkit-scrollbar-thumb:hover {
+                background: rgba(255, 215, 0, 0.5);
+            }
+
+            /* Mobile Responsiveness */
+            @media (max-width: 768px) {
+                .sidebar {
+                    width: 100%;
+                    left: -100%;
+                }
+
+                .sidebar.open ~ .main {
+                    margin-left: 0;
+                    width: 100%;
+                }
+
+                header {
+                    padding: 15px 20px 15px 60px;
+                }
+
+                .logo-text {
+                    font-size: 18px;
+                }
+
+                .logo-icon {
+                    width: 30px;
+                    height: 30px;
+                    font-size: 18px;
+                }
+
+                #newChatBtn {
+                    padding: 8px 16px;
+                    font-size: 14px;
+                }
+
+                .input-container {
+                    padding: 0 10px;
+                }
+
+                #messageInput {
+                    padding: 12px 16px;
+                }
+
+                #sendBtn {
+                    padding: 12px 20px;
+                }
+
+                .user-message-content,
+                .assistant-message-content {
+                    max-width: 85%;
+                }
+
+                .empty-title {
+                    font-size: 24px;
+                }
+
+                .empty-icon {
+                    width: 60px;
+                    height: 60px;
+                    font-size: 36px;
+                }
+            }
+
+            @media (max-width: 480px) {
+                .sidebar-toggle {
+                    left: 10px;
+                    top: 15px;
+                    width: 40px;
+                    height: 40px;
+                }
+
+                header {
+                    padding: 10px 15px 10px 50px;
+                }
+
+                .logo-text {
+                    font-size: 16px;
+                }
+
+                #newChatBtn {
+                    padding: 6px 12px;
+                    font-size: 12px;
+                }
+
+                .user-message-content,
+                .assistant-message-content {
+                    max-width: 90%;
+                }
+
+                .empty-title {
+                    font-size: 20px;
+                }
+            }
         </style>
-        <link rel="stylesheet" href="static/style.css" />
     </head>
-    <body class="relative overflow-hidden flex">
-        <div class="background-animated"></div>
-        <!-- Sidebar -->
-        <div class="sidebar">
+    <body>
+        <button class="sidebar-toggle" onclick="toggleSidebar()">☰</button>
+
+        <div class="sidebar" id="sidebar">
             <button class="new-chat" onclick="createNewSession()">
                 + Novo Chat
             </button>
@@ -30,71 +666,43 @@
             </button>
             <div class="history" id="history"></div>
         </div>
-        <!-- Main Content -->
+
         <div class="main">
-            <header
-                class="glass border-b border-yellow-400/40 relative z-20 flex items-center justify-between px-10 py-6 shadow-2xl"
-            >
-                <div class="flex items-center gap-4">
-                    <div
-                        class="w-14 h-14 rounded-2xl neon-border flex items-center justify-center relative shine"
-                    >
-                        <span class="text-3xl font-extrabold neon-text">D</span>
-                    </div>
-                    <h1 class="text-4xl font-extrabold neon-text">
-                        General Bots
-                    </h1>
+            <header>
+                <div class="logo">
+                    <div class="logo-icon">D</div>
+                    <h1 class="logo-text neon-text">General Bots</h1>
                 </div>
-                <button
-                    id="newChatBtn"
-                    class="px-8 py-3 rounded-xl glass neon-border text-yellow-300 font-semibold hover:scale-105 transition-all"
-                >
-                    Novo Chat
-                </button>
+                <button id="newChatBtn">Novo Chat</button>
             </header>
+
             <div class="voice-status" id="voiceStatus" style="display: none">
-                <div class="pulse">🎤 Ouvindo... Fale agora</div>
+                🎤 Ouvindo... Fale agora
             </div>
-            <main
-                id="messages"
-                class="relative z-10 overflow-y-auto h-[calc(100vh-170px)] px-10 py-8"
-            >
-                <div
-                    id="emptyState"
-                    class="text-center pt-40 flex flex-col items-center justify-center"
-                >
-                    <div
-                        class="w-36 h-36 rounded-3xl neon-border flex items-center justify-center shine mb-6"
-                    >
-                        <span class="text-7xl neon-text font-extrabold">D</span>
-                    </div>
-                    <h2 class="text-4xl neon-text font-bold">
+
+            <main id="messages">
+                <div id="emptyState">
+                    <div class="empty-icon">D</div>
+                    <h2 class="empty-title neon-text">
                         Bem-vindo ao General Bots
                     </h2>
-                    <p class="text-blue-200 mt-3 opacity-80 text-lg">
-                        Seu assistente de IA avançado
-                    </p>
+                    <p class="empty-subtitle">Seu assistente de IA avançado</p>
                 </div>
             </main>
-            <footer
-                class="glass border-t border-yellow-400/30 px-10 py-6 relative z-20 backdrop-blur-lg"
-            >
-                <div class="flex items-center gap-4">
+
+            <footer>
+                <div class="input-container">
                     <input
                         id="messageInput"
                         type="text"
                         placeholder="Fale com General Bots..."
-                        class="flex-1 rounded-2xl px-8 py-4 glass border border-yellow-400/40 text-lg text-white placeholder-yellow-200/40 focus:outline-none focus:border-yellow-300 transition-all"
+                        autofocus
                     />
-                    <button
-                        id="sendBtn"
-                        class="rounded-2xl px-10 py-4 neon-border hover:scale-105 transition-all text-yellow-300 font-bold tracking-wide"
-                    >
-                        Enviar
-                    </button>
+                    <button id="sendBtn">Enviar</button>
                 </div>
             </footer>
         </div>
+
         <script>
             let ws = null;
             let currentSessionId = null;
@@ -106,7 +714,8 @@
             let audioChunks = [];
             let streamingMessageId = null;
             let isThinking = false;
-            let thinkingIndicatorId = null;
+            let currentStreamingContent = "";
+            let hasReceivedInitialMessage = false;
 
             const messagesDiv = document.getElementById("messages");
             const input = document.getElementById("messageInput");
@@ -114,47 +723,33 @@
             const newChatBtn = document.getElementById("newChatBtn");
 
             marked.setOptions({
-                highlight: function (code, lang) {
-                    return `<pre><code class="language-${lang}">${code}</code></pre>`;
-                },
                 breaks: true,
                 gfm: true,
-                tables: true,
             });
 
-            const renderer = new marked.Renderer();
-            renderer.table = function (header, body) {
-                return `<table class="markdown-table"><thead>${header}</thead><tbody>${body}</tbody></table>`;
-            };
-            renderer.tablerow = function (content) {
-                const cleanedContent = content.replace(/<td><\/td>\s*$/, "");
-                return `<tr>${cleanedContent}</tr>`;
-            };
-            marked.setOptions({ renderer });
-
-            function cleanMarkdownTable(markdown) {
-                return markdown
-                    .replace(/\|\|+/g, "|")
-                    .replace(/\n\s*\|/g, "\n|")
-                    .replace(/(^|\n)\|(\s*\|)+\s*($|\n)/g, "$1$3")
-                    .replace(
-                        /(\n\|[^\n]+\|)\n(\|[^\n]+\|)/g,
-                        "$1\n| --- | --- | --- |\n$2",
-                    );
+            function toggleSidebar() {
+                document.getElementById("sidebar").classList.toggle("open");
             }
 
-            function parseMarkdown(content) {
-                try {
-                    const cleanedContent = cleanMarkdownTable(content);
-                    return marked.parse(cleanedContent);
-                } catch (error) {
-                    console.error("Markdown parsing error:", error);
-                    return content
-                        .replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>")
-                        .replace(/\*(.*?)\*/g, "<em>$1</em>")
-                        .replace(/\n/g, "<br>");
+            // Auto-focus on input when page loads
+            window.addEventListener("load", function () {
+                input.focus();
+            });
+
+            // Close sidebar when clicking outside on mobile
+            document.addEventListener("click", function (event) {
+                const sidebar = document.getElementById("sidebar");
+                const sidebarToggle = document.querySelector(".sidebar-toggle");
+
+                if (
+                    window.innerWidth <= 768 &&
+                    sidebar.classList.contains("open") &&
+                    !sidebar.contains(event.target) &&
+                    !sidebarToggle.contains(event.target)
+                ) {
+                    sidebar.classList.remove("open");
                 }
-            }
+            });
 
             async function initializeAuth() {
                 try {
@@ -191,13 +786,6 @@
                     const sessions = await response.json();
                     const history = document.getElementById("history");
                     history.innerHTML = "";
-                    sessions.forEach((session) => {
-                        const div = document.createElement("div");
-                        div.className = "history-item";
-                        div.textContent = session.title;
-                        div.onclick = () => switchSession(session.id);
-                        history.appendChild(div);
-                    });
                 } catch (error) {
                     console.error("Failed to load sessions:", error);
                 }
@@ -210,21 +798,27 @@
                     });
                     const session = await response.json();
                     currentSessionId = session.session_id;
+                    hasReceivedInitialMessage = false;
                     connectWebSocket();
                     loadSessions();
                     document.getElementById("messages").innerHTML = `
-            <div id="emptyState" class="text-center pt-40 flex flex-col items-center justify-center">
-              <div class="w-36 h-36 rounded-3xl neon-border flex items-center justify-center shine mb-6">
-                <span class="text-7xl neon-text font-extrabold">D</span>
-              </div>
-              <h2 class="text-4xl neon-text font-bold">Bem-vindo ao General Bots</h2>
-              <p class="text-blue-200 mt-3 opacity-80 text-lg">Seu assistente de IA avançado</p>
-            </div>
-          `;
+                        <div id="emptyState">
+                            <div class="empty-icon">D</div>
+                            <h2 class="empty-title neon-text">Bem-vindo ao General Bots</h2>
+                            <p class="empty-subtitle">Seu assistente de IA avançado</p>
+                        </div>
+                    `;
                     if (isVoiceMode) {
                         await startVoiceSession();
                     }
                     await triggerStartScript();
+
+                    // Close sidebar on mobile after creating new chat
+                    if (window.innerWidth <= 768) {
+                        document
+                            .getElementById("sidebar")
+                            .classList.remove("open");
+                    }
                 } catch (error) {
                     console.error("Failed to create session:", error);
                 }
@@ -232,11 +826,17 @@
 
             function switchSession(sessionId) {
                 currentSessionId = sessionId;
+                hasReceivedInitialMessage = false;
                 loadSessionHistory(sessionId);
                 connectWebSocket();
                 if (isVoiceMode) {
                     startVoiceSession();
                 }
+
+                // Close sidebar on mobile after switching session
+                if (window.innerWidth <= 768) {
+                    document.getElementById("sidebar").classList.remove("open");
+                }
             }
 
             async function loadSessionHistory(sessionId) {
@@ -245,19 +845,22 @@
                     const history = await response.json();
                     const messages = document.getElementById("messages");
                     messages.innerHTML = "";
-                    history.forEach(([role, content]) => {
-                        const className =
-                            role === "user"
-                                ? "user-message"
-                                : role === "assistant"
-                                  ? "assistant-message"
-                                  : "voice-message";
-                        addMessage(
-                            role === "user" ? "Você" : "Assistente",
-                            content,
-                            className,
-                        );
-                    });
+
+                    if (history.length === 0) {
+                        // Show empty state if no history
+                        messages.innerHTML = `
+                            <div id="emptyState">
+                                <div class="empty-icon">D</div>
+                                <h2 class="empty-title neon-text">Bem-vindo ao General Bots</h2>
+                                <p class="empty-subtitle">Seu assistente de IA avançado</p>
+                            </div>
+                        `;
+                    } else {
+                        // Display existing history
+                        history.forEach(([role, content]) => {
+                            addMessage(role, content, false);
+                        });
+                    }
                 } catch (error) {
                     console.error("Failed to load session history:", error);
                 }
@@ -279,34 +882,19 @@
                 ws.onmessage = function (event) {
                     const response = JSON.parse(event.data);
 
-                    // Handle events first
                     if (response.message_type === 2) {
                         const eventData = JSON.parse(response.content);
                         handleEvent(eventData.event, eventData.data);
-
-                        // Don't return - allow regular message processing to continue
-                        // in case this event packet also contains response content
-                        if (
-                            response.content &&
-                            response.content.trim() !== "" &&
-                            !response.is_complete
-                        ) {
-                            processMessageContent(response);
-                        }
                         return;
                     }
 
-                    // Process regular messages
                     processMessageContent(response);
                 };
 
                 ws.onopen = function () {
-                    console.log(
-                        "Connected to WebSocket with session:",
-                        currentSessionId,
-                        "user:",
-                        currentUserId,
-                    );
+                    console.log("Connected to WebSocket");
+                    // Reset the flag when connection is established
+                    hasReceivedInitialMessage = false;
                 };
 
                 ws.onclose = function () {
@@ -319,24 +907,45 @@
             }
 
             function processMessageContent(response) {
+                // Check if this is the initial message after start
+                if (
+                    !hasReceivedInitialMessage &&
+                    response.content &&
+                    response.content.trim()
+                ) {
+                    hasReceivedInitialMessage = true;
+                    // Clear empty state and display the initial message
+                    const emptyState = document.getElementById("emptyState");
+                    if (emptyState) {
+                        emptyState.remove();
+                    }
+
+                    // Add the initial message as a complete message
+                    addMessage("assistant", response.content, false);
+                    return;
+                }
+
                 if (response.is_complete) {
+                    if (isStreaming && currentStreamingContent.trim()) {
+                        finalizeStreamingMessage();
+                    }
                     isStreaming = false;
                     streamingMessageId = null;
-                    if (response.content && response.content.trim() !== "") {
-                        addMessage("assistant", response.content);
-                    }
+                    currentStreamingContent = "";
                 } else {
                     if (!isStreaming) {
                         isStreaming = true;
                         streamingMessageId = "streaming-" + Date.now();
+                        currentStreamingContent = response.content || "";
                         addMessage(
                             "assistant",
-                            response.content,
+                            currentStreamingContent,
                             true,
                             streamingMessageId,
                         );
                     } else {
-                        updateLastMessage(response.content);
+                        currentStreamingContent += response.content || "";
+                        updateStreamingMessage(currentStreamingContent);
                     }
                 }
             }
@@ -346,20 +955,13 @@
                 switch (eventType) {
                     case "thinking_start":
                         showThinkingIndicator();
-                        isThinking = true;
                         break;
                     case "thinking_end":
                         hideThinkingIndicator();
-                        isThinking = false;
-                        // Reset streaming state to ensure clean start for next message
-                        isStreaming = false;
-                        streamingMessageId = null;
                         break;
                     case "warn":
                         showWarning(eventData.message);
                         break;
-                    default:
-                        console.log("Unknown event type:", eventType);
                 }
             }
 
@@ -367,21 +969,34 @@
                 if (isThinking) return;
                 const emptyState = document.getElementById("emptyState");
                 if (emptyState) emptyState.remove();
+
                 const thinkingDiv = document.createElement("div");
                 thinkingDiv.id = "thinking-indicator";
-                thinkingDiv.className = "thinking-indicator";
+                thinkingDiv.className = "message-container";
                 thinkingDiv.innerHTML = `
-          <div class="typing-dots flex gap-2">
-            <div class="typing-dot"></div>
-            <div class="typing-dot"></div>
-            <div class="typing-dot"></div>
-          </div>
-          <span class="text-yellow-300 font-semibold">Pensando...</span>
-        `;
+                    <div class="assistant-message">
+                        <div class="assistant-avatar">D</div>
+                        <div class="thinking-indicator">
+                            <div class="typing-dots">
+                                <div class="typing-dot"></div>
+                                <div class="typing-dot"></div>
+                                <div class="typing-dot"></div>
+                            </div>
+                            <span>Pensando...</span>
+                        </div>
+                    </div>
+                `;
                 messagesDiv.appendChild(thinkingDiv);
+
+                gsap.to(thinkingDiv, {
+                    opacity: 1,
+                    y: 0,
+                    duration: 0.4,
+                    ease: "power2.out",
+                });
+
                 messagesDiv.scrollTop = messagesDiv.scrollHeight;
                 isThinking = true;
-                thinkingIndicatorId = thinkingDiv.id;
             }
 
             function hideThinkingIndicator() {
@@ -389,10 +1004,17 @@
                 const thinkingDiv =
                     document.getElementById("thinking-indicator");
                 if (thinkingDiv) {
-                    thinkingDiv.remove();
+                    gsap.to(thinkingDiv, {
+                        opacity: 0,
+                        duration: 0.2,
+                        onComplete: () => {
+                            if (thinkingDiv.parentNode) {
+                                thinkingDiv.remove();
+                            }
+                        },
+                    });
                 }
                 isThinking = false;
-                thinkingIndicatorId = null;
             }
 
             function showWarning(message) {
@@ -400,10 +1022,23 @@
                 warningDiv.className = "warning-message";
                 warningDiv.innerHTML = `⚠️ ${message}`;
                 messagesDiv.appendChild(warningDiv);
+
+                gsap.from(warningDiv, {
+                    opacity: 0,
+                    y: 20,
+                    duration: 0.4,
+                    ease: "power2.out",
+                });
+
                 messagesDiv.scrollTop = messagesDiv.scrollHeight;
+
                 setTimeout(() => {
                     if (warningDiv.parentNode) {
-                        warningDiv.remove();
+                        gsap.to(warningDiv, {
+                            opacity: 0,
+                            duration: 0.3,
+                            onComplete: () => warningDiv.remove(),
+                        });
                     }
                 }, 5000);
             }
@@ -415,41 +1050,78 @@
                 msgId = null,
             ) {
                 const emptyState = document.getElementById("emptyState");
-                if (emptyState) emptyState.remove();
+                if (emptyState) {
+                    gsap.to(emptyState, {
+                        opacity: 0,
+                        y: -20,
+                        duration: 0.3,
+                        onComplete: () => emptyState.remove(),
+                    });
+                }
+
                 const msg = document.createElement("div");
-                msg.className = "mb-8";
-                const processedContent =
-                    role === "assistant" || role === "voice"
-                        ? parseMarkdown(content)
-                        : content;
+                msg.className = "message-container";
 
                 if (role === "user") {
-                    msg.innerHTML = `<div class="flex justify-end"><div class="glass neon-border rounded-2xl px-6 py-4 max-w-3xl text-lg text-yellow-100 font-semibold shadow-2xl">${content}</div></div>`;
+                    msg.innerHTML = `
+                        <div class="user-message">
+                            <div class="user-message-content">${escapeHtml(content)}</div>
+                        </div>
+                    `;
                 } else if (role === "assistant") {
-                    msg.innerHTML = `<div class="flex justify-start"><div class="flex gap-4 max-w-3xl"><div class="w-12 h-12 rounded-xl neon-border flex items-center justify-center flex-shrink-0 shine shadow-2xl"><span class="text-2xl neon-text font-extrabold">D</span></div><div class="glass border-2 border-yellow-400/30 rounded-2xl px-6 py-4 flex-1 text-blue-50 font-medium text-lg shadow-2xl markdown-content" id="${streaming ? msgId : ""}">${streaming ? "" : processedContent}</div></div></div>`;
+                    msg.innerHTML = `
+                        <div class="assistant-message">
+                            <div class="assistant-avatar">D</div>
+                            <div class="assistant-message-content markdown-content" id="${msgId || ""}">
+                                ${streaming ? "" : marked.parse(content)}
+                            </div>
+                        </div>
+                    `;
                 } else {
-                    msg.innerHTML = `<div class="flex justify-start"><div class="flex gap-4 max-w-3xl"><div class="w-12 h-12 rounded-xl neon-border flex items-center justify-center flex-shrink-0 shine shadow-2xl"><span class="text-2xl neon-text font-extrabold">D</span></div><div class="glass border-2 border-green-400/30 rounded-2xl px-6 py-4 flex-1 text-green-100 font-medium text-lg shadow-2xl">${content}</div></div></div>`;
+                    msg.innerHTML = `
+                        <div class="assistant-message">
+                            <div class="assistant-avatar">D</div>
+                            <div class="assistant-message-content">${content}</div>
+                        </div>
+                    `;
                 }
+
                 messagesDiv.appendChild(msg);
-                gsap.from(msg, {
-                    opacity: 0,
-                    y: 30,
-                    duration: 0.6,
-                    ease: "power3.out",
+
+                gsap.to(msg, {
+                    opacity: 1,
+                    y: 0,
+                    duration: 0.5,
+                    ease: "power2.out",
                 });
+
                 messagesDiv.scrollTop = messagesDiv.scrollHeight;
             }
 
-            function updateLastMessage(content) {
-                const m = document.getElementById(streamingMessageId);
-                if (m) {
-                    const currentContent = m.textContent || m.innerText;
-                    const newContent = currentContent + content;
-                    m.innerHTML = parseMarkdown(newContent);
+            function updateStreamingMessage(content) {
+                const msgElement = document.getElementById(streamingMessageId);
+                if (msgElement) {
+                    msgElement.innerHTML = marked.parse(content);
                     messagesDiv.scrollTop = messagesDiv.scrollHeight;
                 }
             }
 
+            function finalizeStreamingMessage() {
+                const msgElement = document.getElementById(streamingMessageId);
+                if (msgElement) {
+                    msgElement.innerHTML = marked.parse(
+                        currentStreamingContent,
+                    );
+                    msgElement.removeAttribute("id");
+                }
+            }
+
+            function escapeHtml(text) {
+                const div = document.createElement("div");
+                div.textContent = text;
+                return div.innerHTML;
+            }
+
             function sendMessage() {
                 const message = input.value.trim();
                 if (!message || !ws || ws.readyState !== WebSocket.OPEN) return;
@@ -459,6 +1131,7 @@
                 }
 
                 addMessage("user", message);
+
                 const messageData = {
                     bot_id: "default_bot",
                     user_id: currentUserId,
@@ -469,28 +1142,23 @@
                     media_url: null,
                     timestamp: new Date().toISOString(),
                 };
+
                 ws.send(JSON.stringify(messageData));
                 input.value = "";
-
-                anime({
-                    targets: sendBtn,
-                    scale: [1, 0.85, 1],
-                    duration: 300,
-                    easing: "easeInOutQuad",
-                });
+                input.focus(); // Keep focus on input after sending
             }
 
             sendBtn.onclick = sendMessage;
             input.addEventListener("keypress", (e) => {
                 if (e.key === "Enter") sendMessage();
             });
-
             newChatBtn.onclick = () => createNewSession();
 
             async function toggleVoiceMode() {
                 isVoiceMode = !isVoiceMode;
                 const voiceToggle = document.getElementById("voiceToggle");
                 const voiceStatus = document.getElementById("voiceStatus");
+
                 if (isVoiceMode) {
                     voiceToggle.textContent = "🔴 Parar Voz";
                     voiceToggle.classList.add("recording");
@@ -502,6 +1170,11 @@
                     voiceStatus.style.display = "none";
                     await stopVoiceSession();
                 }
+
+                // Close sidebar on mobile after toggling voice mode
+                if (window.innerWidth <= 768) {
+                    document.getElementById("sidebar").classList.remove("open");
+                }
             }
 
             async function startVoiceSession() {
@@ -649,27 +1322,6 @@
                 addMessage("voice", `🎤 ${randomPhrase}`);
             }
 
-            gsap.to(".neon-text", {
-                textShadow:
-                    "0 0 25px var(--dante-glow),0 0 50px var(--dante-glow),0 0 100px rgba(255,215,0,0.8)",
-                repeat: -1,
-                yoyo: true,
-                duration: 1.8,
-                ease: "power1.inOut",
-            });
-
-            window.testWarning = function () {
-                fetch("/api/warn", {
-                    method: "POST",
-                    headers: { "Content-Type": "application/json" },
-                    body: JSON.stringify({
-                        session_id: currentSessionId || "default",
-                        channel: "web",
-                        message: "Esta é uma mensagem de teste de aviso!",
-                    }),
-                });
-            };
-
             initializeAuth();
         </script>
     </body>
diff --git a/web/static/style.css b/web/static/style.css
index 0393271f..e69de29b 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -1,486 +0,0 @@
-:root {
-    --dante-blue: #000a1f;
-    --dante-blue2: #001a3d;
-    --dante-gold: #ffd700;
-    --dante-gold2: #ffed4e;
-    --dante-glow: rgba(255, 215, 0, 0.8);
-}
-
-html,
-body {
-    height: 100%;
-    margin: 0;
-    padding: 0;
-    font-family: "Inter", sans-serif;
-    background: radial-gradient(
-        circle at 20% 30%,
-        rgba(0, 48, 135, 0.4),
-        rgba(0, 26, 77, 0.7)
-    );
-    color: #fff;
-    overflow: hidden;
-}
-
-.neon-text {
-    color: var(--dante-gold);
-    text-shadow:
-        0 0 15px var(--dante-glow),
-        0 0 30px var(--dante-glow),
-        0 0 60px var(--dante-glow),
-        0 0 90px rgba(255, 215, 0, 0.5);
-    font-weight: 700;
-    letter-spacing: 2px;
-}
-
-.neon-border {
-    border: 3px solid var(--dante-gold);
-    box-shadow:
-        0 0 40px var(--dante-glow),
-        0 0 60px rgba(255, 215, 0, 0.6),
-        inset 0 0 30px rgba(255, 215, 0, 0.15);
-}
-
-.glass {
-    background: rgba(0, 20, 60, 0.4);
-    backdrop-filter: blur(20px);
-    border: 1px solid rgba(253, 185, 19, 0.2);
-}
-
-.background-animated {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 200%;
-    height: 200%;
-    background: conic-gradient(
-        from 90deg,
-        #001a4d,
-        #003087,
-        #00509e,
-        #003087,
-        #001a4d
-    );
-    animation: rotate-bg 20s linear infinite;
-    opacity: 0.5;
-    z-index: 0;
-    filter: blur(120px);
-}
-
-@keyframes rotate-bg {
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
-.shine::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(
-        90deg,
-        transparent,
-        rgba(253, 185, 19, 0.4),
-        transparent
-    );
-    animation: shine 3s infinite;
-}
-
-@keyframes shine {
-    0% {
-        left: -100%;
-    }
-    100% {
-        left: 100%;
-    }
-}
-
-.typing-dot {
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background: var(--dante-gold);
-    animation: typing-bounce 1.2s infinite;
-    box-shadow: 0 0 10px var(--dante-glow);
-}
-
-.typing-dot:nth-child(2) {
-    animation-delay: 0.2s;
-}
-
-.typing-dot:nth-child(3) {
-    animation-delay: 0.4s;
-}
-
-@keyframes typing-bounce {
-    0%,
-    60%,
-    100% {
-        transform: translateY(0);
-    }
-    30% {
-        transform: translateY(-8px);
-    }
-}
-
-::-webkit-scrollbar {
-    width: 0;
-    display: none;
-}
-
-.voice-status {
-    text-align: center;
-    margin: 10px 0;
-    color: #19c37d;
-    font-family: "Orbitron", monospace;
-}
-
-.pulse {
-    animation: pulse 2s infinite;
-}
-
-@keyframes pulse {
-    0% {
-        opacity: 1;
-    }
-    50% {
-        opacity: 0.5;
-    }
-    100% {
-        opacity: 1;
-    }
-}
-
-.voice-message {
-    color: #19c37d;
-    font-style: italic;
-}
-
-.history-item {
-    padding: 12px;
-    border-radius: 6px;
-    margin-bottom: 5px;
-    cursor: pointer;
-    color: #d1d5db;
-    transition: all 0.3s ease;
-}
-
-.history-item:hover {
-    background: rgba(255, 215, 0, 0.1);
-}
-
-.sidebar {
-    width: 260px;
-    background: rgba(0, 10, 31, 0.8);
-    padding: 10px;
-    display: flex;
-    flex-direction: column;
-    backdrop-filter: blur(20px);
-    border-right: 1px solid rgba(255, 215, 0, 0.2);
-}
-
-.voice-toggle {
-    background: rgba(25, 195, 125, 0.2);
-    border: 1px solid rgba(25, 195, 125, 0.5);
-    color: #19c37d;
-    padding: 12px;
-    border-radius: 6px;
-    margin-bottom: 10px;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    font-family: "Orbitron", monospace;
-    font-weight: 600;
-}
-
-.voice-toggle.recording {
-    background: rgba(239, 68, 68, 0.2);
-    border: 1px solid rgba(239, 68, 68, 0.5);
-    color: #ef4444;
-}
-
-.new-chat {
-    background: transparent;
-    border: 1px solid rgba(255, 215, 0, 0.3);
-    color: var(--dante-gold);
-    padding: 12px;
-    border-radius: 6px;
-    margin-bottom: 10px;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    font-family: "Orbitron", monospace;
-    font-weight: 600;
-}
-
-.new-chat:hover,
-.voice-toggle:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
-}
-
-.history {
-    flex: 1;
-    overflow-y: auto;
-    margin-top: 10px;
-}
-
-.main {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-    overflow: hidden;
-}
-
-.messages {
-    flex: 1;
-    overflow-y: auto;
-    padding: 20px;
-}
-
-.message {
-    max-width: 800px;
-    margin: 0 auto 20px;
-    line-height: 1.5;
-}
-
-.user-message {
-    color: #d1d5db;
-}
-
-.assistant-message {
-    color: #ececf1;
-}
-
-.input-area {
-    max-width: 800px;
-    margin: 0 auto 20px;
-    position: relative;
-}
-
-.input-area input {
-    width: 100%;
-    background: rgba(64, 65, 79, 0.5);
-    border: none;
-    padding: 12px 45px 12px 15px;
-    border-radius: 12px;
-    color: white;
-    font-size: 16px;
-    backdrop-filter: blur(10px);
-}
-
-.input-area button {
-    position: absolute;
-    right: 5px;
-    top: 5px;
-    background: rgba(25, 195, 125, 0.3);
-    border: 1px solid rgba(25, 195, 125, 0.5);
-    padding: 8px 12px;
-    border-radius: 6px;
-    color: #19c37d;
-    cursor: pointer;
-    font-family: "Orbitron", monospace;
-    font-weight: 600;
-}
-
-.thinking-indicator {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 12px 16px;
-    background: rgba(255, 215, 0, 0.1);
-    border: 1px solid rgba(255, 215, 0, 0.3);
-    border-radius: 12px;
-    margin: 10px auto;
-    max-width: 800px;
-    animation: neonPulse 2s infinite;
-    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
-}
-
-@keyframes neonPulse {
-    0%,
-    100% {
-        box-shadow:
-            0 0 5px rgba(255, 215, 0, 0.3),
-            0 0 10px rgba(255, 215, 0, 0.2);
-    }
-    50% {
-        box-shadow:
-            0 0 10px rgba(255, 215, 0, 0.5),
-            0 0 20px rgba(255, 215, 0, 0.3),
-            0 0 30px rgba(255, 215, 0, 0.1);
-    }
-}
-
-.warning-message {
-    background: rgba(255, 69, 0, 0.2);
-    border: 1px solid rgba(255, 69, 0, 0.5);
-    color: #ff4500;
-    padding: 12px 16px;
-    border-radius: 12px;
-    margin: 10px auto;
-    max-width: 800px;
-    text-align: center;
-    animation: flash 0.5s ease 3;
-}
-
-@keyframes flash {
-    0%,
-    100% {
-        opacity: 1;
-    }
-    50% {
-        opacity: 0.5;
-    }
-}
-
-.markdown-content {
-    line-height: 1.6;
-}
-
-.markdown-content h1,
-.markdown-content h2,
-.markdown-content h3,
-.markdown-content h4,
-.markdown-content h5,
-.markdown-content h6 {
-    margin-top: 1.5em;
-    margin-bottom: 0.5em;
-    color: var(--dante-gold);
-    font-weight: 600;
-}
-
-.markdown-content h1 {
-    font-size: 1.8em;
-    border-bottom: 2px solid var(--dante-gold);
-    padding-bottom: 0.3em;
-}
-
-.markdown-content h2 {
-    font-size: 1.5em;
-}
-
-.markdown-content h3 {
-    font-size: 1.3em;
-}
-
-.markdown-content p {
-    margin-bottom: 1em;
-}
-
-.markdown-content ul,
-.markdown-content ol {
-    margin-bottom: 1em;
-    padding-left: 2em;
-}
-
-.markdown-content li {
-    margin-bottom: 0.5em;
-}
-
-.markdown-content code {
-    background: rgba(255, 215, 0, 0.1);
-    color: var(--dante-gold2);
-    padding: 0.2em 0.4em;
-    border-radius: 3px;
-    font-family: "Courier New", monospace;
-    font-size: 0.9em;
-}
-
-.markdown-content pre {
-    background: rgba(0, 10, 31, 0.8);
-    border: 1px solid rgba(255, 215, 0, 0.3);
-    border-radius: 8px;
-    padding: 1em;
-    overflow-x: auto;
-    margin-bottom: 1em;
-}
-
-.markdown-content pre code {
-    background: none;
-    padding: 0;
-    color: #e0e0e0;
-}
-
-.markdown-content blockquote {
-    border-left: 4px solid var(--dante-gold);
-    padding-left: 1em;
-    margin-left: 0;
-    margin-bottom: 1em;
-    color: #ccc;
-    font-style: italic;
-}
-
-.markdown-content table {
-    width: 100%;
-    border-collapse: collapse;
-    margin-bottom: 1em;
-    background: rgba(0, 20, 60, 0.6);
-    border: 1px solid rgba(255, 215, 0, 0.3);
-    border-radius: 8px;
-    overflow: hidden;
-}
-
-.markdown-content th,
-.markdown-content td {
-    border: 1px solid rgba(255, 215, 0, 0.3);
-    padding: 0.75em;
-    text-align: left;
-    word-wrap: break-word;
-}
-
-.markdown-content th {
-    background: rgba(255, 215, 0, 0.15);
-    color: var(--dante-gold);
-    font-weight: 600;
-    font-size: 0.9em;
-}
-
-.markdown-content td {
-    color: #e0e0e0;
-    font-size: 0.9em;
-}
-
-.markdown-content a {
-    color: var(--dante-gold2);
-    text-decoration: none;
-    border-bottom: 1px dotted var(--dante-gold2);
-}
-
-.markdown-content a:hover {
-    border-bottom: 1px solid var(--dante-gold2);
-}
-
-.markdown-content strong {
-    color: var(--dante-gold2);
-    font-weight: 600;
-}
-
-.markdown-content em {
-    color: #ffed4e;
-    font-style: italic;
-}
-
-.markdown-content table {
-    table-layout: fixed;
-    width: 100%;
-}
-
-.markdown-content th:nth-child(1),
-.markdown-content td:nth-child(1) {
-    width: 30%;
-}
-
-.markdown-content th:nth-child(2),
-.markdown-content td:nth-child(2) {
-    width: 35%;
-}
-
-.markdown-content th:nth-child(3),
-.markdown-content td:nth-child(3) {
-    width: 35%;
-}