remove redundant styles from this code and debug it. top header should be blur effect in light and dark modes, and all buttons must have similar glow effect to what the send message button has (even those on top header) fix overall look and feel so it looks much more closer to the apple.com website <!DOCTYPE html><html><head><base href="https://websim.dev/">
<title>WebSim Code Editor</title>
<script src="https://cdn.jsdelivr.net/npm/@chakra-ui/react@2.8.0/dist/chakra-ui.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@chakra-ui/css/dist/chakra-ui.min.css" rel="stylesheet">
<style>
:root {
  --primary: #007AFF;  /* Apple iOS blue */
  --secondary: #000000; /* black */
  --background-light: #F5F5F7;
  --background-dark: #1C1C1E;
  --text-light: #000000;
  --text-dark: #FFFFFF;
  --grey-light: #E5E5EA;  /* Slightly darker for better contrast */
  --grey-dark: #3A3A3C;  /* Darker grey for dark mode */
  --transition-time: 0.3s;  /* Slightly slower for smoother transitions */
  --header-border: #D3D3D3; /* New variable for header border */
  --header-backdrop-filter: saturate(180%) blur(20px)
  --header-background: rgba(250,250,252,0.8);
}

[data-theme="dark"] {
  --primary: #0A84FF;  /* Brighter blue for dark mode */
  --secondary: #30D158;  /* Brighter green for dark mode */
  --background-light: #1C1C1E;
  --background-dark: #000000;
  --text-light: #FFFFFF;
  --text-dark: #FFFFFF;
  --grey-light: #3A3A3C;
  --grey-dark: #2C2C2E;
  --header-border: #3A3A3C; /* Header border color in dark mode */
  --header-background-dark: rgba(29,29,31,0.8);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  height: 100vh;
  overflow: hidden;
  background: var(--background-light);
  transition: all var(--transition-time) ease;
}

.header {
  background: var(--header-background);
  color: var(--text-light);
  padding: 0.5rem 3rem; /* Reduced padding */
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  font-size: 0.8rem; /* Reduced from 0.9rem for a slimmer header */
  height: 48px; /* Set a fixed thinner height */
  border-bottom: 1px solid var(--header-border); /* Update border to use the new variable */
}

.header h1 {
  font-size: 14px;
  font-weight: 550;
  padding-left: 4rem;
}

.container {
  height: calc(100vh - 58px); /* Reduced by 20px for bottom margin */
  margin-bottom: 20px; /* Added bottom margin */
  padding: 5px 5px 5px 5px; /* Keep existing padding */
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  gap: 5px; /* Add gap between sections */
  background: white; /* Add background to container to show card separation */
  transition: all var(--transition-time) ease;
}

.code-panel {
  grid-column: 1;
  grid-row: 1;
  height: 50vh;
  border: none; /* Removed border */
  padding: 5px;
  background: var(--background-light);
}

.chatbot-container {
  grid-column: 1;
  grid-row: 2;
  position: relative; /* Add relative positioning */
  flex-direction: column; /* Stack children vertically */
  background: var(--background-light); /* Update chatbot container background */
  border: none; /* Removed border */
  padding: 5px;
}

.preview-panel {
  grid-column: 2;
  grid-row: 1 / span 2;
  border: none; /* Removed border */
  padding: 5px;
  background: var(--background-light);
}

.vertical-separator {
  width: 1px;
  height: 100%;
  background: var(--header-border); /* Match separator color with header border */
  transition: transform var(--transition-time), opacity var(--transition-time);
  transform: translateX(0);
  opacity: 1;
}

[data-theme="dark"] .vertical-separator {
  background: var(--header-border);
}

.resize-handle {
  width: 6px;
  cursor: col-resize;
  background: var(--grey-light);
  border-radius: 3px;
  transition: background var(--transition-time);
}

.container:hover .resize-handle {
  background: var(--primary);
}

.code-editor {
  width: 100%;
  height: calc(100% - 40px);
  background: var(--background-light);
  color: var(--text-light);
  border: none;
  font-family: 'SF Mono', 'Courier New', monospace;
  font-size: 14px;
  padding: 1rem;
  border-radius: 0; /* Removed border-radius */
  box-shadow: none; /* Removed box-shadow */
  transition: background var(--transition-time), color var(--transition-time);
  resize: none; /* Disable resizing on the code editor textarea */
}

[data-theme="dark"] .code-editor {
  background: var(--background-dark);
  color: var(--text-dark);
}

.toggle-buttons {
  position: fixed;
}

.toggle-buttons button {
  width: 24px;
  height: 24px;
  padding: 6px;
  background: var(--grey-light);
  color: var(--text-light);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-time) ease;
}

[data-theme="dark"] .toggle-buttons button {
  background: var(--grey-dark);
  color: var(--text-dark);
}

.toggle-buttons button:hover {
  background: var(--secondary);
  transform: translateY(-1px);
}

.toggle-buttons button:active {
  transform: translateY(0);
}

.button-group {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.button-group button {
  width: 32px; /* Reduced width from 40px to 32px */
  height: 32px; /* Reduced height from 40px to 32px */
  padding: 6px; /* Adjusted padding for smaller buttons */
  border-radius: 16px; /* Reduced border-radius for smaller buttons */
  background: var(--grey-light);
}

[data-theme="dark"] .button-group button {
  background: var(--grey-dark);
}

.code-panel-buttons {
  /* Removed to place toggle buttons separately */
  margin-bottom: 0.5rem;
  position: relative;
}

button {
  padding: 6px 12px; /* Reduced padding */
  border-radius: 6px; /* Reduced border-radius */
  font-size: 12px; /* Reduced font size */
  font-weight: 600;
  background: var(--primary);
  border: none;
  cursor: pointer;
  transition: all var(--transition-time) ease;
  color: var(--text-dark);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

button:hover {
  background: var(--secondary);
  transform: translateY(-1px);
}

button:hover svg {
  stroke: var(--text-dark);
}

button:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.theme-toggle,
.hamburger-btn,
.copy-btn {
  width: 32px;
  height: 32px;
  padding: 6px;
  border-radius: 16px;
  background: var(--grey-light);
  color: var(--text-light);
  border: none;
  box-shadow: none;
  transition: all var(--transition-time) ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chatbot-input {
  position: sticky; /* Keep input fixed at bottom */
  bottom: 0;
  padding-top: 1em;
  display: flex;
  gap: 8px;
  border-top: 1px solid var(--header-border);
  background: var(--background-light);
}

[data-theme="dark"] .chatbot-input {
  background: var(--background-dark);
}

.chatbot-header {
  font-size: 12px;
}

.chatbot-input input[type="text"] {
  color: var(--text-light);
  font-size: 14px;
}

[data-theme="dark"] .chatbot-input input[type="text"] {
  background: var(--grey-dark);
  color: var(--text-dark);
}

.chatbot-input button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #FFFFFF;  /* Always white for better contrast on blue */
  font-weight: 500;  /* Apple uses slightly less bold fonts */
  transition: all var(--transition-time) ease;
}

.input-group {
  display: flex;
  gap: 8px;
  width: 100%;
  align-items: center;
  justify-content: center;
}
  
.message {
  padding: 10px 14px;
  font-size: 14px;
  border-radius: 20px;
  max-width: 80%;
  line-height: 1.5;
  margin-bottom: 8px; /* Remove any grey backgrounds from messages container */
  width: fit-content; /* Add this to make bubbles fit content */
}

.user-message {
  background: var(--primary);
  color: var(--text-dark);
  align-self: flex-end;
  border-top-right-radius: 0;
  margin-left: auto; /* Add this to align right */
}

.bot-message {
  background: var(--grey-light);
  color: var(--text-light);
  align-self: flex-start;
  border-top-left-radius: 0;
  margin-right: auto; /* Add this to align left */
}

[data-theme="dark"] .bot-message {
  background: var(--grey-dark);
  color: var(--text-dark);
}

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.tooltip .tooltip-text {
  visibility: hidden;
  width: max-content;
  background-color: rgba(0, 0, 0, 0.75);
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 4px 8px;
  position: absolute;
  z-index: 1002;
  bottom: 125%; /* Position above the element */
  left: 50%;
  transform: translateX(-50%);
  max-width: 200px; /* Ensure tooltip doesn't go beyond viewport */
  opacity: 0;
  transition: opacity var(--transition-time) ease;
  font-size: 12px;
  white-space: nowrap;
}

/* Tooltip arrow */
.tooltip .tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.75) transparent transparent transparent;
}

/* Show the tooltip on hover */
.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* Define the collapsed state */
.container.collapsed {
  grid-template-columns: 0 1fr;
  transition: all var(--transition-time) ease;
}

.container.collapsed .code-panel,
.container.collapsed .chatbot-container {
  display: none;
}

.container.collapsed .preview-panel {
  grid-column: 1 / span 2;
}

/* Ensure messages stay within bounds */
.chatbot-messages {
  overflow-y: auto;
  height: calc(100% - 70px); /* Account for input area height */
  padding: 10px;
}
</style>
</head>
<body>

<div class="header">
  <!-- Move toggle-buttons outside the container to fix their position -->
  <div class="toggle-buttons">
    <div class="tooltip">
      <button class="hamburger-btn" onclick="toggleCodePanel()" aria-label="Toggle Code Panel">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <line x1="3" y1="12" x2="21" y2="12"></line>
          <line x1="3" y1="6" x2="21" y2="6"></line>
          <line x1="3" y1="18" x2="21" y2="18"></line>
        </svg>
        <span class="tooltip-text">Collapse Code Panel</span>
      </button>
    </div>
    <div class="tooltip">
      <button class="copy-btn" onclick="copyCode()" aria-label="Copy Code">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M16 1H4a2 2 0 0 0-2 2v14h2V3h12V1z"></path>
          <path d="M8 5H20a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z"></path>
        </svg>
        <span class="tooltip-text">Copy Code</span>
      </button>
    </div>
  </div>
  <h1>WebSim Code Editor</h1>
  <div class="button-group">
    <div class="tooltip">
      <button onclick="toggleTheme()" class="theme-toggle" id="themeToggle" aria-label="Toggle Theme">
        <svg class="moon-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
        </svg>
        <span class="tooltip-text">Toggle Theme</span>
      </button>
    </div>
  </div>
</div>

<div class="container">
  <div class="code-panel">
    <textarea class="code-editor" id="codeEditor" spellcheck="false" oninput="updatePreview()"></textarea>
  </div>
  
  <div class="chatbot-container">
    <div class="chatbot-window">
      <div class="chatbot-header">WebSim Coding Assistant</div>
      <div class="chatbot-messages" id="chatbotMessages"></div>
      <div class="chatbot-input">
  <style>
    .chatbot-input {
      position: sticky;
      bottom: 0;
      width: 100%;
      background: var(--background-light);
      padding: 10px;
      border-top: 1px solid var(--header-border);
      margin-top: auto;
      z-index: 10;
    }

    [data-theme="dark"] .chatbot-input {
      background: var(--background-dark);
    }

    .chatbot-container {
      display: flex;
      flex-direction: column;
    }

    .chatbot-window {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .chatbot-messages {
      flex-grow: 1;
      overflow-y: auto;
      padding-bottom: 10px;
    }
  </style>
  <div class="input-group">
  <style>
    :root {
      --color-text: rgb(29, 29, 31);
      --color-border-grey: rgb(210, 210, 215);
      --color-fill-blue: rgb(0, 113, 227);
      --color-focus-color: rgba(0, 125, 250, 0.6);
      --color-success: rgb(52, 199, 89);
      --color-success-glow: rgba(52, 199, 89, 0.6);
    }

    .chat-input-container {
      display: flex;
      align-items: center;
      gap: 12px;
      width: fit-content;
    }

    .input-wrapper {
      position: relative;
    }

    .input-wrapper input {
      background-color: rgb(255, 255, 255);
      border: 1px solid var(--color-border-grey);
      border-radius: 12px;
      box-sizing: border-box;
      color: var(--color-text);
      font-family: "SF Pro Text", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 17px;
      height: 38px;
      width: 600px;
      padding: 6px 16px;
      line-height: 25px;
      letter-spacing: -0.374px;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
      -webkit-font-smoothing: antialiased;
    }

    .input-wrapper input::placeholder {
      color: var(--color-border-grey);
    }

    .input-wrapper input:focus {
      outline: none;
      border-color: var(--color-fill-blue);
      box-shadow: var(--color-focus-color) 0px 0px 0px 4px;
    }

    .input-wrapper input:focus::placeholder {
      color: transparent;
    }

    .send-button {
      background-color: black;
      border: 1px solid transparent;
      border-radius: 12px;
      color: white;
      cursor: pointer;
      height: 38px;
      width: 38px;
      padding: 8px;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;  
      overflow: hidden;
    }

    .send-button:hover {
      background-color: var(--color-fill-blue);
      border-color: var(--color-fill-blue); 
      box-shadow: var(--color-focus-color) 0px 0px 0px 4px;
    }

    .send-button.clicked {
      background-color: var(--color-success);
      border-color: var(--color-success);
      box-shadow: var(--color-success-glow) 0px 0px 0px 4px;
    }

    .icon-container {
      width: 16px;
      height: 16px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .send-button svg {
      width: 16px;
      height: 16px;
      position: absolute;
    }

    @keyframes flyAway {
      0% {
        transform: translate(-20px, 20px) rotate(45deg);
        opacity: 1;
      }
      100% {
        transform: translate(20px, -20px) rotate(-45deg);
        opacity: 0;
      }
    }

    @keyframes flyBack {
      0% {
        transform: translate(-20px, 20px) rotate(45deg);
        fill: currentColor;
      }
      100% {
        transform: translate(0, 0) rotate(0);
        fill: transparent;
      }
    }

    .send-button .icon-outline {
      stroke: currentColor;
      fill: transparent;
    }

    .send-button.clicked .icon-outline {
      fill: currentColor;
      animation: flyAway 0.6s ease-out forwards;
    }

    .send-button.returning .icon-outline {
      animation: flyBack 0.6s ease-out forwards;
    }
  </style>

  <div class="chat-input-container">
    <div class="input-wrapper">
      <input type="text" id="chatbotInput" placeholder="Create or enhance code...">
    </div>
    <button class="send-button" onclick="sendMessage()" aria-label="Send message">
  <div class="icon-container">
    <svg class="icon-outline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <line x1="22" y1="2" x2="11" y2="13"></line>
      <path d="M22 2L2 9l9 4l4 9l7-20z"></path>
    </svg>
  </div>
</button>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const button = document.querySelector('.send-button');
      const input = document.querySelector('#chatbotInput');
      
      function triggerSendAnimation() {
        if (!button.classList.contains('clicked')) {
          button.classList.add('clicked');
          
          setTimeout(() => {
            button.classList.remove('clicked');
            button.classList.add('returning');
            
            setTimeout(() => {
              button.classList.remove('returning');
            }, 600);
          }, 600);
        }
      }

      button.addEventListener('click', triggerSendAnimation);

      input.addEventListener('keypress', function(event) {
        if (event.key === 'Enter') {
          event.preventDefault();
          triggerSendAnimation();
          sendMessage();
        }
      });
    });
  </script>
</div>
</div>
    </div>
  </div>
  
  <div class="preview-panel" id="previewPanel">
    <iframe id="preview" style="width: 100%; height: 100%; border: none; background: var(--background-light);"></iframe>
  </div>
</div>

<script>
let currentImage = null;

document.getElementById('imageInput')?.remove();
currentImage = null;

async function sendMessage() {
  const input = document.getElementById('chatbotInput');
  const message = input.value.trim();
  
  if (!message) return;
  
  addMessage(message, true);
  input.value = '';
  
  try {
    const payload = {
      userInput: message,
      context: chatHistory
    };

    const response = await fetch('/api/chatbot_api', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(payload)
    });
    
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    
    const data = await response.json();
    const botResponse = data.response || 'No response available';
    
    if (data.enhancements) {
      addMessage(data.enhancements, false);
    }
    
    if (botResponse.includes('```')) {
      const codeMatch = botResponse.match(/```(?:\w+\n)?([\s\S]*?)```/);
      if (codeMatch && codeMatch[1]) {
        const code = codeMatch[1].trim();
        document.getElementById('codeEditor').value = code;
        updatePreview();
      }
      
      const messageWithoutCode = botResponse.replace(/```[\s\S]*?```/g, '[Code has been added to editor]');
      addMessage(messageWithoutCode);
    } else {
      addMessage(botResponse);
    }
    
    chatHistory.push({ role: 'user', content: message });
    chatHistory.push({ role: 'assistant', content: botResponse });
    
  } catch (error) {
    console.error('Error:', error);
    addMessage('Sorry, I encountered an error processing your request. Please try again.', false);
  }
}

document.getElementById('chatbotInput').addEventListener('keypress', (e) => {
  if (e.key === 'Enter') {
    sendMessage();
  }
});

function toggleTheme() {
  const body = document.body;
  const themeToggle = document.getElementById('themeToggle');
  const isDark = body.getAttribute('data-theme') === 'dark';
  
  if (isDark) {
    body.removeAttribute('data-theme');
    themeToggle.innerHTML = `
      <svg class="moon-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
      </svg>
    `;
  } else {
    body.setAttribute('data-theme', 'dark');
    themeToggle.innerHTML = `
      <svg class="sun-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <circle cx="12" cy="12" r="5"></circle>
        <line x1="12" y1="1" x2="12" y2="3"></line>
        <line x1="12" y1="21" x2="12" y2="23"></line>
        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
        <line x1="1" y1="12" x2="3" y2="12"></line>
        <line x1="21" y1="12" x2="23" y2="12"></line>
        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
      </svg>
    `;
  }
  
  updatePreview();
}

function toggleCodePanel() {
  const container = document.querySelector('.container');
  container.classList.toggle('collapsed');
  // Removed icon swapping to keep the hamburger icon consistent
}

const codePanel = document.querySelector('.code-panel');
const previewPanel = document.querySelector('.preview-panel');
const resizeHandle = document.querySelector('.resize-handle');
let isResizing = false;

resizeHandle.addEventListener('mousedown', (e) => {
  isResizing = true;
  document.addEventListener('mousemove', handleMouseMove);
  document.addEventListener('mouseup', () => {
    isResizing = false;
    document.removeEventListener('mousemove', handleMouseMove);
  }, { once: true });
});

function handleMouseMove(e) {
  if (!isResizing) return;
  
  const container = document.querySelector('.container');
  const containerRect = container.getBoundingClientRect();
  const newWidth = ((e.clientX - containerRect.left) / containerRect.width) * 100;
  
  if (newWidth >= 30 && newWidth <= 70) {
    codePanel.style.width = `${newWidth}%`;
    previewPanel.style.width = `${100 - newWidth}%`;
  }
}

function copyCode() {
  const codeEditor = document.getElementById('codeEditor');
  codeEditor.select();
  document.execCommand('copy');
}

function updatePreview() {
    const codeEditor = document.getElementById('codeEditor');
    const preview = document.getElementById('preview');
    const code = codeEditor.value;
    
    const previewDocument = preview.contentDocument || preview.contentWindow.document;
    
    previewDocument.open();
    
    const isDarkMode = document.body.getAttribute('data-theme') === 'dark';
    const themeClass = isDarkMode ? 'data-theme="dark"' : '';
    
    previewDocument.write(`<body ${themeClass}>${code}</body>`);
    
    previewDocument.close();
}

document.addEventListener('DOMContentLoaded', () => {
    const preview = document.getElementById('preview');
    const previewDocument = preview.contentDocument || preview.contentWindow.document;
    previewDocument.open();
    previewDocument.write('<!-- Enter your code in the editor to see preview -->');
    previewDocument.close();
});

// Add chatbot functionality
let chatHistory = [];

function toggleChatbot() {
  const chatbotWindow = document.getElementById('chatbotWindow');
  chatbotWindow.classList.toggle('active');
}

function addMessage(content, isUser = false) {
  const messagesContainer = document.getElementById('chatbotMessages');
  const messageDiv = document.createElement('div');
  messageDiv.classList.add('message');
  messageDiv.classList.add(isUser ? 'user-message' : 'bot-message');
  
  if (content.includes('```')) {
    const formattedContent = content.replace(/```([\s\S]*?)```/g, (match, code) => {
      return `<pre><code>${code.trim()}</code></pre>`;
    });
    messageDiv.innerHTML = formattedContent;
  } else {
    messageDiv.textContent = content;
  }
  
  messagesContainer.appendChild(messageDiv);
  messagesContainer.scrollTop = messagesContainer.scrollHeight;
}

</script>
</body></html>