Improve UI UX and chat

- Remove duplicate AI button in ConnectButton
- Enhance AI chat UI: responsive sizing, rename to AI Tor, improved header and overlay
- Darken global background and add glow/overlay effects
- Add layout overlays for dynamic backgrounds and adjust hero breakpoints
- Update color tokens and responsive utilities in Tailwind config and CSS

X-Lovable-Edit-ID: edt-8a5bfe3a-eb97-44ce-930e-e69549c83886

Author: lovable-dev[bot]

src/components/AIChatbot.tsx

@@ -9,22 +9,39 @@ const AIChatbot = () => {
   const handleOpen = () => {
     setIsOpen(true);
     toast.info('AI Assistant Loading', {
-      description: 'Opening Aitor AI Assistant...'
+      description: 'Opening AI Tor Assistant...'
     });
   };
 
   return (
     <>
+      {/* Dark overlay for mobile when chat is open */}
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            onClick={() => setIsOpen(false)}
+            className="fixed inset-0 z-40 bg-black/60 backdrop-blur-sm sm:hidden"
+          />
+        )}
+      </AnimatePresence>
+
       {/* Floating Button */}
       <motion.button
         initial={{ opacity: 0, scale: 0.5 }}
         animate={{ opacity: 1, scale: 1 }}
         transition={{ delay: 0.5 }}
         onClick={handleOpen}
-        className="fixed bottom-24 right-8 z-40 p-4 bg-gradient-to-br from-alien-gold to-alien-gold-dark backdrop-blur-md border-2 border-alien-gold-light rounded-full text-alien-space-dark hover:scale-110 transition-all duration-300 shadow-2xl hover:shadow-alien-gold/50"
+        className="fixed bottom-20 right-4 sm:bottom-24 sm:right-8 z-40 p-3 sm:p-4 
+          bg-gradient-to-br from-alien-gold to-alien-gold-dark backdrop-blur-md 
+          border-2 border-alien-gold-light rounded-full text-alien-space-dark 
+          hover:scale-110 transition-all duration-300 
+          shadow-2xl hover:shadow-alien-gold/50 ai-button-pulse"
         aria-label="Open AI Assistant"
       >
-        <Brain className="h-7 w-7" />
+        <Brain className="h-6 w-6 sm:h-7 sm:w-7" />
       </motion.button>
 
       {/* Chat Window */}
@@ -35,19 +52,31 @@ const AIChatbot = () => {
             animate={{ opacity: 1, y: 0, scale: 1 }}
             exit={{ opacity: 0, y: 100, scale: 0.8 }}
             transition={{ duration: 0.3 }}
-            className="fixed bottom-24 right-8 z-50 w-[400px] h-[600px] max-w-[calc(100vw-2rem)] max-h-[calc(100vh-8rem)] bg-alien-space-dark/95 backdrop-blur-xl border-2 border-alien-gold/50 rounded-2xl shadow-2xl overflow-hidden"
+            className="fixed bottom-4 right-4 sm:bottom-24 sm:right-8 z-50 
+              w-[calc(100vw-2rem)] sm:w-[380px] md:w-[420px] 
+              h-[calc(100vh-6rem)] sm:h-[550px] md:h-[600px]
+              max-w-[420px] max-h-[calc(100vh-4rem)] sm:max-h-[calc(100vh-8rem)]
+              bg-alien-space-dark/98 backdrop-blur-xl 
+              border-2 border-alien-gold/40 rounded-2xl 
+              shadow-2xl overflow-hidden chat-glow"
           >
             {/* Header */}
-            <div className="bg-gradient-to-r from-alien-gold/20 to-alien-gold-dark/20 border-b border-alien-gold/30 p-4 flex items-center justify-between">
+            <div className="bg-gradient-to-r from-alien-space-dark via-alien-space/90 to-alien-space-dark 
+              border-b border-alien-gold/30 p-3 sm:p-4 flex items-center justify-between">
               <div className="flex items-center gap-3">
-                <div className="p-2 bg-alien-gold/30 rounded-full">
+                <div className="p-2 bg-gradient-to-br from-alien-gold/30 to-alien-green/20 rounded-full">
                   <Brain className="h-5 w-5 text-alien-gold" />
                 </div>
                 <div>
-                  <h3 className="text-alien-gold font-bold font-nasalization">
+                  <h3 className="text-alien-gold font-bold font-nasalization text-sm sm:text-base">
                     AI Assistant
                   </h3>
-                  <p className="text-xs text-gray-400 font-[Exo]">Aitor AI</p>
+                  <p className="text-xs text-alien-green font-exo">AI Tor</p>
+                </div>
+                {/* Status indicator */}
+                <div className="flex items-center gap-1.5 ml-2">
+                  <span className="w-2 h-2 bg-alien-green rounded-full animate-pulse" />
+                  <span className="text-xs text-muted-foreground hidden sm:inline">Online</span>
                 </div>
               </div>
               <button
@@ -62,8 +91,8 @@ const AIChatbot = () => {
             {/* iframe Content */}
             <iframe
               src="https://aitor.lovable.app/"
-              className="w-full h-[calc(100%-4rem)] border-none"
-              title="Aitor AI Assistant"
+              className="w-full h-[calc(100%-3.5rem)] sm:h-[calc(100%-4rem)] border-none bg-alien-space-dark"
+              title="AI Tor Assistant"
               allow="microphone; camera"
               onError={() => {
                 toast.error('AI Assistant Error', {

src/components/Header/ConnectButton.tsx

@@ -42,29 +42,6 @@ const ConnectButton = () => {
 
   return (
     <div className="flex flex-wrap items-center gap-3">
-      {/* AI Button */}
-      <a
-        href="https://aitor.lovable.app/"
-        target="_blank"
-        rel="noopener noreferrer"
-        className="no-underline"
-        title="AI Assistant"
-        aria-label="AI Assistant"
-        tabIndex={-1}
-      >
-        <Button
-          className="
-            bg-alien-green hover:bg-alien-green-light text-alien-gold rounded-full
-            flex items-center justify-center p-2 sm:p-3
-            transition-all duration-200 ease-in-out
-            hover:shadow-lg hover:scale-110 active:scale-95 focus-visible:ring-2 focus-visible:ring-alien-gold
-          "
-          type="button"
-        >
-          <Brain className={ICON_SIZE} />
-        </Button>
-      </a>
-
       {isConnected && address ? (
         <>
           <div className="flex flex-col gap-2">

src/components/Hero.tsx

@@ -49,7 +49,7 @@ const Hero: React.FC = () => {
           initial={{ opacity: 0, y: -20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 1, ease: 'easeOut' }}
-          className="text-2xl sm:text-4xl md:text-5xl lg:text-6xl font-nasalization font-extrabold leading-tight text-center hero-title mb-8 sm:mb-12 hero-title"
+          className="text-xl xs:text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-nasalization font-extrabold leading-tight text-center hero-title mb-6 sm:mb-8 md:mb-12 tracking-tight sm:tracking-normal"
         >
           <span className="text-alien-green">Δlieπ</span>
           <span className="text-alien-gold">FlΦw</span>

src/components/Layout.tsx

@@ -40,6 +40,8 @@ const Layout: React.FC = () => {
         className="fixed inset-0 -z-30 pointer-events-none bg-cover bg-center bg-no-repeat bg-fixed"
         style={{ backgroundImage: `url('${bgImage}')` }}
       />
+      {/* Dark overlay for better contrast and readability */}
+      <div className="fixed inset-0 -z-20 pointer-events-none bg-alien-space-dark/75" />
 
       <div id="google_translate_element" className="hidden" aria-hidden="true"></div>
       <Header />

src/index.css

@@ -15,34 +15,35 @@
 
 @layer base {
   :root {
-    --background: 240 33% 5%;
+    --background: 240 35% 3%;
     --foreground: 0 0% 98%;
-    --card: 240 33% 8%;
+    --card: 240 35% 6%;
     --card-foreground: 0 0% 98%;
-    --popover: 240 33% 5%;
+    --popover: 240 35% 4%;
     --popover-foreground: 0 0% 98%;
     --primary: 48 83% 72%;
     --primary-foreground: 240 33% 10%;
     --secondary: 142 67% 45%;
     --secondary-foreground: 0 0% 98%;
-    --muted: 240 20% 20%;
-    --muted-foreground: 240 10% 80%;
+    --muted: 240 25% 15%;
+    --muted-foreground: 240 10% 75%;
     --accent: 48 83% 72%;
     --accent-foreground: 240 33% 10%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
-    --border: 240 20% 16%;
-    --input: 240 20% 16%;
+    --border: 240 25% 14%;
+    --input: 240 25% 14%;
     --ring: 48 83% 72%;
     --radius: 0.5rem;
-    --sidebar-background: 240 33% 5%;
+    --sidebar-background: 240 35% 3%;
     --sidebar-foreground: 0 0% 98%;
     --sidebar-primary: 48 83% 72%;
     --sidebar-primary-foreground: 240 33% 10%;
     --sidebar-accent: 142 67% 45%;
     --sidebar-accent-foreground: 0 0% 98%;
-    --sidebar-border: 240 20% 16%;
+    --sidebar-border: 240 25% 14%;
     --sidebar-ring: 48 83% 72%;
+    --overlay: 240 35% 2%;
   }
 
   /* REGLAS CORREGIDAS CON MAYOR ESPECIFICIDAD */
@@ -103,8 +104,9 @@
 
 .readable-glow {
   text-shadow:
-    0 2px 6px hsl(var(--background) / 0.85),
-    0 0 24px hsl(var(--background) / 0.65);
+    0 2px 8px rgba(0, 0, 0, 0.95),
+    0 0 30px rgba(0, 0, 0, 0.8),
+    0 4px 16px rgba(0, 0, 0, 0.7);
 }
 
 .green-glow {
@@ -217,8 +219,8 @@ main {
 .card-border {
   position: relative;
   border-radius: 0.5rem;
-  background: rgba(17, 17, 25, 0.7);
-  backdrop-filter: blur(12px);
+  background: rgba(8, 8, 18, 0.88);
+  backdrop-filter: blur(16px);
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 .card-border::before {
@@ -237,3 +239,31 @@ main {
 .card-border:hover::before {
   background: linear-gradient(145deg, hsl(142, 67%, 45%), hsl(48, 83%, 72%));
 }
+
+/* Chat window glow effect */
+.chat-glow {
+  box-shadow: 
+    0 0 20px rgba(240, 216, 130, 0.12),
+    0 0 40px rgba(34, 197, 94, 0.08),
+    0 25px 50px rgba(0, 0, 0, 0.6),
+    inset 0 1px 0 rgba(240, 216, 130, 0.1);
+}
+
+/* AI button pulse animation */
+.ai-button-pulse {
+  animation: ai-pulse 2.5s ease-in-out infinite;
+}
+
+@keyframes ai-pulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(240, 216, 130, 0.5), 0 8px 25px rgba(0,0,0,0.4); }
+  50% { box-shadow: 0 0 0 10px rgba(240, 216, 130, 0), 0 8px 25px rgba(0,0,0,0.4); }
+}
+
+/* Dark overlay for sections */
+.dark-overlay {
+  background: linear-gradient(
+    180deg, 
+    rgba(3, 3, 10, 0.85) 0%, 
+    rgba(3, 3, 10, 0.7) 100%
+  );
+}

tailwind.config.ts

@@ -76,7 +76,9 @@ export default {
           'space': '#0C0C1D',
           'space-light': '#1A1A3A',
           'space-dark': '#050510',
-        }
+          'space-darker': '#030308',
+        },
+        overlay: 'rgba(3, 3, 10, 0.8)'
       },
       borderRadius: {
         lg: 'var(--radius)',