<!DOCTYPE html>
<html lang="en" data-theme="Light">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>PatheticAI</title>
    <!-- Preload critical assets -->
    <link rel="preload" href="https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@700,400&display=swap" as="style">
    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" as="style">
    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/github-dark.min.css" as="style">
    <link rel="preload" href="/images/icon.png" as="image">
    <link rel="preload" href="/images/light%20background.png" as="image">
    <link rel="preload" href="/images/dark%20background.png" as="image">
    <!-- Favicons and Meta Tags -->
    <link rel="manifest" href="/manifest.json">
    <link rel="icon" href="/images/icon.png" type="image/png">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/github-dark.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.0.2/marked.min.js"></script>
    <!-- Meta description and social media sharing -->
    <meta name="description" content="PatheticAI - Advanced AI chatbot with enhanced features for seamless conversations and task automation">
    <meta name="keywords" content="AI, chatbot, machine learning, conversation, automation">
    <meta name="robots" content="index, follow">
    <meta property="og:title" content="PatheticAI Enhanced">
    <meta property="og:description" content="Advanced AI chatbot with enhanced features for seamless conversations and task automation">
    <meta property="og:image" content="/images/icon.png">
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="PatheticAI">
    <meta name="theme-color" content="#ffffff">
    <!-- Apple specific meta tags -->
    <link rel="apple-touch-icon" href="/images/icon.png">
    <meta name="apple-mobile-web-app-title" content="PatheticAI">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="mobile-web-app-capable" content="yes">
     <!-- Security -->
    <script src="/main/security.js"></script>
    <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Cabinet Grotesk', sans-serif;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    *::-webkit-scrollbar {
      display: none;
    }

    :root {
      --container-width: min(90%, 800px);
      --spacing-normal: clamp(16px, 2vw, 20px);
      --spacing-small: clamp(8px, 1vw, 10px);
      --border-radius: 30px;
      --border-radius-small: 15px;
      --transition: all 0.3s ease;
    }

    :root[data-theme="Light"] {
      --color: rgba(0, 0, 0, 1);
      --background-image: url("/images/light%20background.png");
      --background-color: #ffffff;
      --secondary-color: #000000;
      --border-color: rgba(0, 0, 0, 0.05);
      --taskbar-background: rgba(255, 255, 255, 0.6);
      --input-background: rgba(255, 255, 255, 0.7);
      --button-background: rgba(0, 0, 0, 0.02);
      --button-hover-background: rgba(0, 0, 0, 0.05);
      --modal-background: rgba(255, 255, 255, 0.7);
      --message-background: rgba(255, 255, 255, 0.6);
      --message-user-background: rgba(255, 255, 255, 0.5);
      --code-background: rgba(0, 0, 0, 0.02);
      --code-text: #000000;
      --notification-background: rgba(255, 255, 255, 0.4);
      --notification-text: #000000;
      --placeholder-color: rgba(0, 0, 0, 0.2);
      --chat-input-container-background: rgba(255, 255, 255, 0.5);
      --border-button-color: rgba(0, 0, 0, 0.1);
      --checkbox-bg: #ffffff;
      --slider-track-bg: #e5e7eb;
      --thumb-border: #ffffff;
      --focus-ring: rgba(59, 130, 246, 0.3);
      --disabled-bg: #f3f4f6;
      --disabled-border: #d1d5db;
      --background-color: #ffffff;
      --header-bg: #f8f9fa;
      --text-color: #1a1a1a;
      --text-muted: #6b7280;
      --primary-color: #000;
      --danger-color: #ef4444;
      --hover-color: #f3f4f6;
      --input-bg: #ffffff;
      --toggle-bg: #2e2a24;
      --un-toggle-bg: white;
    }

    :root[data-theme="Dark"] {
      --color: rgba(255, 255, 255, 1);
      --background-image: url("/images/dark%20background.png");
      --background-color: #000000;
      --secondary-color: #ffffff;
      --border-color: rgba(255, 255, 255, 0.05);
      --taskbar-background: rgba(0, 0, 0, 0.6);
      --input-background: rgba(0, 0, 0, 0.7);
      --button-background: rgba(255, 255, 255, 0.02);
      --button-hover-background: rgba(255, 255, 255, 0.05);
      --modal-background: rgba(0, 0, 0, 0.7);
      --message-background: rgba(0, 0, 0, 0.6);
      --message-user-background: rgba(0, 0, 0, 0.5);
      --code-background: rgba(255, 255, 255, 0.02);
      --code-text: #ffffff;
      --notification-background: rgba(0, 0, 0, 0.4);
      --notification-text: #ffffff;
      --placeholder-color: rgba(255, 255, 255, 0.2);
      --chat-input-container-background: rgba(0, 0, 0, 0.5);
      --border-button-color: rgba(255, 255, 255, 0.1);
      --checkbox-bg: #000000;
      --slider-track-bg: #18191c;
      --thumb-border: #000000;
      --focus-ring: rgba(59, 130, 246, 0.3);
      --disabled-bg: #18191c;
      --disabled-border: #4b5563;
      --background-color: #000000;
      --header-bg: #212529;
      --text-color: #e5e5e5;
      --text-muted: #d1d5db;
      --primary-color: #fff;
      --danger-color: #ef4444;
      --hover-color: #18191c;
      --input-bg: #000000;
      --toggle-bg: #d1d5db;
      --un-toggle-bg: black;
    }

    body {
      background-color: var(--background-color);
      background-image: var(--background-image);
      font-family: 'Cabinet Grotesk', sans-serif;
      background-size: cover;
      background-attachment: fixed;
      color: var(--primary-color);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      position: fixed;
      width: 100%;
      height: 100%;
      touch-action: none;
      -webkit-overflow-scrolling: none;
      overscroll-behavior: none;
    }

    .container {
      position: fixed;
      top: calc(60px + var(--spacing-normal) * 2);
      bottom: calc(60px + var(--spacing-normal) * 2);
      left: 50%;
      transform: translateX(-50%);
      width: var(--container-width);
      overflow-y: auto;
      padding-right: var(--spacing-small);
    }

    .taskbar {
      position: fixed;
      top: var(--spacing-normal);
      left: 50%;
      transform: translateX(-50%);
      width: var(--container-width);
      height: 60px;
      background: var(--taskbar-background);
      backdrop-filter: blur(10px);
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 var(--spacing-normal);
      z-index: 1000;
      overflow-x: visible;
    }

    .taskbar-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .brand {
      font-size: 20px;
      font-weight: 700;
      cursor: pointer;
      color: var(--primary-color);
      transition: opacity 0.3s ease;
    }

    .brand:hover {
      opacity: 0.8;
    }

    .preview-tag {
      font-size: 14px;
      cursor: pointer;
      color: var(--primary-color);
      transition: opacity 0.3s ease;
      opacity: 0.7;
    }

    .preview-tag:hover {
      opacity: 0.5;
    }

    .info-section {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 24px;
      padding: 12px;
      background: var(--button-background);
      border-radius: 12px;
    }

    .info-icon {
      color: var(--color-secondary);
      font-size: 1.2em;
    }

    .input-container {
      margin: 20px 0;
    }

    .input-wrapper {
      position: relative;
      display: flex;
      align-items: center;
    }

    .input-wrapper input {
      width: 100%;
      padding: 15px;
      padding-right: 40px;
      background: var(--button-background);
      border: 2px solid var(--border-color);
      border-radius: 15px;
      color: var(--color);
      font-size: 14px;
      transition: all 0.2s ease;
    }

    .input-wrapper input:focus {
      border-color: var(--primary-color);
      box-shadow: 0 0 0 2px var(--primary-color-alpha);
      outline: none;
    }

    .input-validation {
      position: absolute;
      right: 12px;
      color: var(--color-secondary);
      opacity: 0;
      transform: scale(0.8);
      transition: all 0.2s ease;
    }

    .input-validation.valid {
      opacity: 1;
      transform: scale(1);
      color: var(--success-color);
    }

    .input-feedback {
      margin-top: 8px;
      font-size: 0.9em;
      color: var(--error-color);
      min-height: 20px;
    }

    .primary-button {
      width: 100%;
      padding: 15px;
      margin-bottom: 20px;
      background: var(--button-background);
      border-color: var(--border-color);
      border-radius: 15px;
      color: var(--primary-color);
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease;
    }

    .primary-button:hover {
      background: var(--button-hover-background);
    }

    .primary-button:disabled {
      opacity: 0.7;
      cursor: not-allowed;
    }

    .button-content {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: opacity 0.2s ease;
    }

    .button-loader {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 24px;
      height: 24px;
      border: 3px solid rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      border-top-color: white;
      animation: spin 1s linear infinite;
      display: none;
    }

    .primary-button.success {
      background: var(--success-color);
    }

    .primary-button.error {
      background: var(--error-color);
    }

    .action-buttons {
      display: flex;
      gap: 12px;
    }

    .secondary-button {
      flex: 1;
      padding: 12px;
      background: var(--button-background);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      color: var(--color);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: all 0.2s ease;
    }

    .secondary-button:hover {
      background: var(--button-background-hover);
    }

    @keyframes spin {
      to {
        transform: translate(-50%, -50%) rotate(360deg);
      }
    }

    .taskbar button,
    .chat-input-container button,
    .theme-selector button {
      background: var(--button-background);
      border: 1px solid var(--border-color);
      color: var(--primary-color);
      padding: 8px 15px;
      border-radius: 30px;
      cursor: pointer;
      margin-left: 10px;
      transition: all 0.3s ease;
    }

    .taskbar button:hover,
    .chat-input-container button:hover,
    .theme-selector button:hover {
      background: var(--button-hover-background);
      transform: translateY(-1px);
    }

    .chat-messages {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-normal);
      padding: var(--spacing-normal);
      height: 100%;
      overflow-y: auto;
    }

    .chat-input-container {
      position: fixed;
      bottom: var(--spacing-normal);
      left: 50%;
      transform: translateX(-50%);
      width: var(--container-width);
      max-width: var(--container-max-width);
      display: flex;
      gap: 10px;
      background: var(--chat-input-container-background);
      backdrop-filter: blur(10px);
      padding: var(--spacing-normal);
      border-radius: 30px;
      border: 1px solid var(--border-color);
      color: var(--primary-color);
    }

    .chat-input-container textarea {
      flex: 1;
      background: transparent;
      border: none;
      outline: none;
      color: var(--color);
      font-size: 16px;
      padding: 10px;
      border-radius: 10px;
      resize: none;
      min-height: 40px;
      color: var(--primary-color);
    }

    .chat-input-container input::placeholder {
      color: var(--color);
    }

    .chat-input-container button {
      background: var(--button-background);
      border: 1px solid var(--border-color);
      color: var(--color);
      padding: 8px 20px;
      border-radius: 30px;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .chat-input-container button:hover {
      background: rgba(255, 255, 255, 0.2);
      transform: translateY(-1px);
    }

    .chat-message {
      padding: var(--spacing-normal);
      border-radius: 20px;
      max-width: 85%;
      white-space: pre-wrap;
      line-height: 1.5;
      font-size: clamp(14px, 3vw, 16px);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      animation: messageAppear 0.3s ease;
    }

    .chat-message.user {
      background: var(--message-user-background);
      align-self: flex-end;
      border-bottom-right-radius: 5px;
    }

    .chat-message.bot {
      background: var(--message-background);
      align-self: flex-start;
      border-bottom-left-radius: 5px;
    }

    button {
      background: var(--button-background);
      border: 1px solid var(--border-color);
      color: var(--primary-color);
      padding: 8px 15px;
      border-radius: var(--border-radius);
      cursor: pointer;
      transition: var(--transition);
    }

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

    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(8px);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 2000;
      animation: fadeIn 0.3s ease-out;
      transition: opacity 0.2s ease-in-out;
    }

    .modal-overlay.fade-out {
      opacity: 0;
      pointer-events: none;
    }

    .api-modal-window {
      background: var(--modal-background, #fff);
      backdrop-filter: blur(15px);
      border: 1px solid var(--border-color, #ccc);
      border-radius: var(--border-radius, 10px);
      width: var(--container-width, 80%);
      width: 900px;
      height: 35vh;
      padding: var(--spacing-normal, 20px);
      color: var(--primary-color, #333);
      animation: slideUp 0.4s ease-out;
      display: flex;
      flex-direction: column;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    }

    .modal-window {
      background: var(--modal-background, #fff);
      backdrop-filter: blur(15px);
      border: 1px solid var(--border-color, #ccc);
      border-radius: var(--border-radius, 10px);
      width: var(--container-width, 80%);
      width: 800px;
      height: auto;
      padding: var(--spacing-normal, 20px);
      color: var(--primary-color, #333);
      animation: slideUp 0.4s ease-out;
      display: flex;
      flex-direction: column;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    }

    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      color: var(--primary-color, #333);
    }

    .modal-title {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--primary-color, #333);
      margin: 0;
    }

    .modal-content {
      flex-grow: 1;
      overflow-y: auto;
      line-height: 1.6;
      font-size: 1rem;
      color: var(--primary-color, #333);
    }

    .modal-content p {
      margin: 10px 0;
      font-size: 1rem;
      color: var(--text-color, #666);
    }

    .settings-content {
      display: flex;
      flex-direction: column;
      gap: 15px;
      color: var(--primary-color);
    }

.hidden-checkbox {
  display: none;
}
    .settings-button {
      background: var(--button-background);
      border: 1px solid var(--border-color);
      color: var(--color);
      padding: 15px;
      border-radius: 15px;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 15px;
      margin-bottom: 15px;
    }

    .settings-tabs {
      display: flex;
      padding: 1rem 1rem 0;
      gap: 0.5rem;
      border-bottom: 1px solid var(--border-color);
    }

    .tab-button {
      padding: 0.75rem 1.25rem;
      border: none;
      background: none;
      border-radius: 6px 6px 0 0;
      cursor: pointer;
      font-weight: 500;
      color: var(--text-color);
      display: flex;
      align-items: center;
      gap: 0.5rem;
      transition: all 0.2s;
    }

    .tab-button:hover {
      background-color: var(--hover-color);
    }

    .tab-button.active {
      color: var(--primary-color);
      border-bottom: 2px solid var(--primary-color);
    }

    .tab-content {
      display: none;
      padding: 1.5rem;
      max-height: calc(90vh - 120px);
    }

    .tab-content.active {
      display: block;
      animation: fadeIn 0.2s ease-out;
    }

    .settings-section {
      margin-bottom: 2rem;
    }

    .settings-section h3 {
      font-size: 1rem;
      font-weight: 600;
      margin-bottom: 1rem;
      color: var(--text-color);
    }

    .language-option {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.75rem 1rem;
    }

    .language-flag {
      width: 20px;
      height: 15px;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }

    .language-code {
      color: var(--text-muted);
      font-size: 0.875rem;
    }

    .search-box {
      padding: 0.75rem;
      border-bottom: 1px solid var(--border-color);
      position: sticky;
      top: 0;
      background: var(--background-color);
      z-index: 1;
    }

    .search-box input {
      width: 100%;
      padding: 0.5rem 0.75rem 0.5rem 2rem;
      border: 1px solid var(--border-color);
      border-radius: 6px;
      background-color: var(--input-bg);
      color: var(--primary-color);
    }

    .search-box i {
      position: absolute;
      left: 1.25rem;
      top: 50%;
      transform: translateY(-50%);
      color: var(--primary-color);
    }

    .theme-options-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 1rem;
      margin-top: 1rem;
    }

    .theme-option {
      text-align: center;
      padding: 1rem;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .theme-preview {
      width: 100%;
      height: 80px;
      border-radius: 6px;
      margin-bottom: 0.5rem;
      overflow: hidden;
    }

    .light-preview {
      background-color: #ffffff;
      border: 1px solid #e5e7eb;
    }

    .dark-preview {
      background-color: #1a1a1a;
      border: 1px solid #2d2d2d;
    }

    .preview-header {
      height: 20%;
      background-color: #f3f4f6;
    }

    .dark-preview .preview-header {
      background-color: #2d2d2d;
    }
      .selector-container {
        position: relative;
        display: inline-block;
        width: 100%;
      }

      .selector {
        background: var(--button-background);
        border: 1px solid var(--border-color);
        padding: 15px;
        border-radius: 15px;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 10px;
        margin-bottom: 10px;
      }

      .selector i {
        font-size: 14px;
        transition: transform 0.3s ease;
      }

      .selector:hover {
        background: var(--button-hover-background);
        transform: translateX(5px);
      }

      .options {
        position: absolute;
        top: calc(100% + 5px);
        left: 0;
        width: 100%;
        display: none;
        border: 1px solid var(--border-color);
        border-radius: 10px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
        z-index: 10;
        background-color: var(--background-color);
      }

      .option {
        padding: var(--spacing-small);
        cursor: pointer;
        font-size: 14px;
        color: var(--primary-color);
        transition: background-color 0.3s ease, transform 0.2s ease;
        transform: translateX(5px);
      }

      .option:hover {
        background-color: var(--button-hover-background);
        transform: translateX(10px);
      }

      .options.active {
        display: block;
      }

      .selector.open i {
        transform: rotate(180deg);
      }
    .preview-content {
      padding: 0.5rem;
    }

    .toggle-switch {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      cursor: pointer;
      margin-top: 30px;
      margin-bottom: 30px;
    }

    .toggle-slider {
      position: relative;
      width: 44px;
      height: 24px;
      background-color: var(--toggle-bg);
      border-radius: 12px;
      transition: all 0.2s;
    }

    .toggle-slider:before {
      content: "";
      position: absolute;
      height: 20px;
      width: 20px;
      left: 2px;
      bottom: 2px;
      background-color: var(--un-toggle-bg);
      border-radius: 50%;
      transition: all 0.2s;
    }

    .toggle-switch input:checked+.toggle-slider {
      background-color: var(--primary-color);
    }

    .toggle-switch input:checked+.toggle-slider:before {
      transform: translateX(20px);
    }

    .personality-option {
      padding: 1rem;
      border-radius: 8px;
      border: 1px solid var(--border-color);
      margin-bottom: 0.5rem;
    }

    .personality-header {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: 0.5rem;
    }

    .personality-name {
      font-weight: 500;
      flex-grow: 1;
    }

    .personality-description {
      font-size: 0.875rem;
      color: var(--text-muted);
    }

    .custom-personality-actions {
      display: flex;
      gap: 0.5rem;
    }

    .form-group {
      margin-bottom: 1.5rem;
    }

    .form-group label {
      display: block;
      margin-bottom: 0.5rem;
      font-weight: 500;
    }

    .textarea-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 0.5rem;
    }

    .character-count {
      font-size: 0.875rem;
      color: var(--text-muted);
    }

    .danger-zone {
      border: 1px solid var(--danger-color);
      border-radius: 8px;
      padding: 1rem;
    }

    .danger-actions {
      display: flex;
      gap: 1rem;
    }

    .danger-button {
      padding: 0.75rem 1rem;
      border: 1px solid var(--danger-color);
      border-radius: 6px;
      color: var(--danger-color);
      background: none;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .danger-button:hover {
      background-color: var(--danger-color);
      color: white;
    }

    .slider-wrapper {
      width: 100%;
      margin: 1rem 0;
    }

    .slider-label {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.5rem;
    }

    .slider-value {
      font-size: 0.875rem;
      color: var(--text-muted);
      min-width: 3rem;
      text-align: right;
    }

    input[type="range"] {
      -webkit-appearance: none;
      width: 100%;
      height: 6px;
      background: var(--slider-track-bg);
      border-radius: 3px;
      outline: none;
      color: var(--primary-color);
    }

    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 20px;
      color: var(--primary-color);
      height: 20px;
      border-radius: 50%;
      background: var(--primary-color);
      cursor: pointer;
      border: 2px solid var(--thumb-border);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      transition: all 0.2s ease;
    }

    input[type="range"]::-moz-range-thumb {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: var(--primary-color);
      cursor: pointer;
      border: 2px solid var(--thumb-border);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      transition: all 0.2s ease;
      color: var(--primary-color);
    }

    input[type="range"]:hover::-webkit-slider-thumb {
      transform: scale(1.1);
    }

    input[type="range"]:hover::-moz-range-thumb {
      transform: scale(1.1);
    }

    input[type="range"]:focus {
      outline: none;
    }

    input[type="range"]:focus::-webkit-slider-thumb {
      box-shadow: 0 0 0 3px var(--focus-ring);
    }

    input[type="range"]:focus::-moz-range-thumb {
      box-shadow: 0 0 0 3px var(--focus-ring);
    }

    input[type="range"]::-webkit-slider-runnable-track {
      width: 100%;
      height: 6px;
      cursor: pointer;
      background: var(--slider-track-bg);
      border-radius: 3px;
    }

    input[type="range"]::-moz-range-track {
      width: 100%;
      height: 6px;
      cursor: pointer;
      background: var(--slider-track-bg);
      border-radius: 3px;
    }

    input[type="range"]:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

    .settings-button:hover {
      background: var(--button-hover-background);
      transform: translateX(5px);
    }

    .settings-button i {
      width: 20px;
      text-align: center;
    }

    .notification {
      position: fixed;
      bottom: 100px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--notification-background);
      color: var(--primary-color);
      padding: 12px 25px;
      border-radius: 30px;
      backdrop-filter: blur(10px);
      animation: slideUp 0.3s ease;
      z-index: 2000;
    }

    .notification.fade-out {
      animation: fadeOut 0.3s ease;
    }

    .code-block {
      background: rgba(0, 0, 0, 0.6);
      border-radius: 10px;
      padding: 15px;
      margin: 10px 0;
      position: relative;
    }

    .code-block pre {
      margin: 0;
      white-space: pre-wrap;
      font-family: 'Fira Code', monospace;
      color: #e0e0e0;
    }

    .copy-button {
      position: absolute;
      top: 5px;
      right: 5px;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid var(--border-color);
      color: white;
      padding: 5px 10px;
      border-radius: 15px;
      cursor: pointer;
      font-size: 12px;
    }

    .message-actions {
      display: flex;
      gap: 5px;
      margin-top: 5px;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .chat-message:hover .message-actions {
      opacity: 1;
    }

    .action-button {
      background: var(--button-background);
      border: var(--border);
      color: var(--primary-color);
      padding: 3px 8px;
      border-radius: 12px;
      cursor: pointer;
      font-size: 12px;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    @keyframes slideUp {
      from {
        transform: translateY(20px);
        opacity: 0;
      }

      to {
        transform: translateY(0);
        opacity: 1;
      }
    }

    @keyframes messageAppear {
      from {
        transform: translateY(10px);
        opacity: 0;
      }

      to {
        transform: translateY(0);
        opacity: 1;
      }
    }

    @keyframes fadeOut {
      to {
        opacity: 0;
        transform: translate(-50%, 20px);
      }
    }

    @media (max-width: 768px) {
      :root {
        --container-width: 95%;
        --spacing-normal: clamp(12px, 3vw, 15px);
        --spacing-small: clamp(6px, 2vw, 8px);
        --border-radius: 20px;
        --border-radius-small: 12px;
        --font-size-base: 14px;
        --font-size-small: 12px;
      }

      .container {
        top: calc(50px + var(--spacing-normal));
        bottom: calc(60px + var(--spacing-normal));
      }

      .taskbar {
        height: 50px;
        padding: 0 var(--spacing-small);
      }

      .brand {
        font-size: 16px;
      }

      .preview-tag {
        font-size: 11px;
      }

      .taskbar button {
        padding: 6px 12px;
        font-size: var(--font-size-small);
      }

      .chat-message {
        max-width: 90%;
        padding: 10px 12px;
        font-size: var(--font-size-base);
        margin-bottom: 8px;
      }

      .chat-input-container {
        padding: 8px;
        border-radius: 20px;
        bottom: 8px;
      }

      .chat-input-container textarea {
        font-size: var(--font-size-base);
        padding: 8px;
        min-height: 36px;
      }

      .chat-input-container button {
        padding: 8px 12px;
        font-size: var(--font-size-small);
        min-height: 36px;
      }

      .modal-window,
      .api-modal-window {
        width: 95%;
        height: 60vh;
        padding: var(--spacing-normal);
        border-radius: var(--border-radius-small);
      }

      .modal-header {
        margin-bottom: 12px;
      }

      .modal-title {
        font-size: 18px;
      }

      .modal-content {
        font-size: var(--font-size-base);
        padding-right: 8px;
      }

      .settings-button {
        padding: 12px;
        margin: 8px 0;
      }

      .settings-content {
        gap: 10px;
      }

      .settings-tabs {
        padding: 8px 8px 0;
        gap: 4px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }

      .settings-tabs::-webkit-scrollbar {
        display: none;
      }

      .tab-button {
        padding: 8px 12px;
        font-size: var(--font-size-small);
        white-space: nowrap;
      }

      .tab-content {
        padding: 12px;
      }

      .language-option {
        padding: 10px;
      }

      .theme-options-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
      }

      .theme-option {
        padding: 8px;
      }

      .theme-preview {
        height: 60px;
      }

      .notification {
        bottom: 80px;
        padding: 8px 16px;
        font-size: var(--font-size-small);
      }

      .code-block {
        padding: 12px;
        margin: 8px 0;
      }

      .copy-button {
        padding: 4px 8px;
        font-size: 11px;
      }

      .message-actions {
        gap: 4px;
      }

      .action-button {
        padding: 2px 6px;
        font-size: 11px;
      }
    }

    @media (max-width: 480px) {
      :root {
        --container-width: 98%;
        --spacing-normal: 8px;
        --spacing-small: 4px;
        --font-size-base: 13px;
        --font-size-small: 11px;
      }

      .container {
        top: calc(45px + var(--spacing-normal));
      }

      .taskbar {
        height: 45px;
        padding: 0 8px;
      }

      .brand {
        font-size: 14px;
      }

      .preview-tag {
        font-size: 10px;
      }

      .chat-message {
        max-width: 95%;
        padding: 8px 10px;
      }

      .modal-window,
      .api-modal-window {
        width: 98%;
        padding: 12px;
      }

      .modal-title {
        font-size: 16px;
      }

      .settings-button {
        padding: 10px;
        font-size: var(--font-size-small);
      }

      .theme-options-grid {
        grid-template-columns: 1fr;
      }

      .danger-actions {
        flex-direction: column;
        gap: 8px;
      }

      .danger-button {
        width: 100%;
      }
    }

    @media (max-height: 600px) and (orientation: landscape) {
      .container {
        top: 60px;
        bottom: 60px;
      }

      .taskbar {
        height: 45px;
      }

      .chat-input-container {
        padding: 6px 12px;
      }

      .chat-message {
        padding: 8px 12px;
        margin-bottom: 6px;
      }

      .modal-window,
      .api-modal-window {
        max-height: 90vh;
      }

      .settings-content {
        max-height: calc(90vh - 120px);
        overflow-y: auto;
      }
    }

    @media (max-width: 320px) {
      :root {
        --container-width: 100%;
        --spacing-normal: 6px;
        --spacing-small: 3px;
        --font-size-base: 12px;
        --font-size-small: 10px;
      }

      .chat-message {
        max-width: 98%;
        padding: 6px 8px;
      }

      .chat-input-container {
        border-radius: 15px;
        padding: 6px;
      }

      .modal-window,
      .api-modal-window {
        padding: 10px;
      }
    }

    @media (min-width: 768px) and (max-width: 1024px) {
      :root {
        --container-width: 90%;
        --font-size-base: 15px;
      }

      .chat-message {
        max-width: 80%;
      }

      .modal-window,
      .api-modal-window {
        width: 80%;
        max-width: 600px;
      }

      .theme-options-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @media (hover: none) {
      .chat-message .message-actions {
        opacity: 1;
      }

      button:active {
        transform: scale(0.98);
      }

      .settings-button:active,
      .selector:active {
        transform: translateX(3px);
      }
    }

    @media (-webkit-min-device-pixel-ratio: 2),
    (min-resolution: 192dpi) {
      body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
    }

    @supports (padding: max(0px)) {
      .chat-input-container {
        padding-bottom: max(var(--spacing-normal), env(safe-area-inset-bottom));
        margin-bottom: env(safe-area-inset-bottom);
      }

      .container {
        padding-left: max(var(--spacing-normal), env(safe-area-inset-left));
        padding-right: max(var(--spacing-normal), env(safe-area-inset-right));
      }
    }
    </style>
  </head>

  <body>
    <div class="taskbar">
      <div class="taskbar-left">
        <span class="brand">PatheticAI</span>
        <span class="preview-tag">Version 1.5</span>
      </div>
      <div class="taskbar-right">
        <button onclick="showSettingsModal()" title="Settings">
          <i class="fa-solid fa-bars"></i>
        </button>
        <button onclick="showAboutModal()" title="Join Discord">
          <i class="fa fa-user-group"></i>
        </button>
        <button onclick="discordButton()" title="Join Discord">
          <i class="fa-brands fa-discord"></i>
        </button>
      </div>
    </div>
    <div class="container">
      <div class="chat-messages"></div>
    </div>
    <div class="chat-input-container">
      <textarea id="messageInput" placeholder="Type your message..." rows="1" maxlength="2000"></textarea>
      <button class="voice-input-button" id="voiceButton">
        <i class="fas fa-microphone"></i>
      </button>
      <button onclick="sendMessage()" title="Send Message">
        <i class="fas fa-paper-plane"></i>
        <span>‎ ‎ ‎ Send</span>
      </button>
    </div>
    <script>
    const CONFIG = {
      MAX_RETRIES: 3,
      TYPING_SPEED: 50,
      MAX_CONTEXT_LENGTH: 10,
      SUGGESTION_COUNT: 4,
      API_TIMEOUT: 30000,
      DEBOUNCE_DELAY: 300,
      MAX_MESSAGE_LENGTH: 4000,
      STORAGE_PREFIX: 'pathetic_ai_',
      STORAGE_KEYS: {
        THEME: 'theme',
        API_KEY: 'openRouterApiKey',
        MESSAGES: 'chatMessages',
        LANGUAGE: 'preferredLanguage',
        SETTINGS: 'userSettings',
        PERSONALITY: 'selectedPersonality',
        CUSTOM_PERSONALITIES: 'customPersonalities'
      }
    };
    const PERSONALITIES = [{
      name: "Friendly",
      description: "A warm, supportive personality for simple and positive conversations.",
      systemMessage: `You are a friendly, warm, and supportive AI assistant who:
    - Uses positive and encouraging language
    - Explains complex topics in simple terms
    - Maintains a conversational and approachable tone
    - Provides examples and analogies to aid understanding
    - Shows genuine interest in helping users succeed`
    }, {
      name: "Professional",
      description: "A precise and clear communicator, ideal for factual and structured responses.",
      systemMessage: `You are a professional, efficient AI assistant who:
    - Communicates with precision and clarity
    - Focuses on accuracy and factual information
    - Maintains a formal but accessible tone
    - Provides well-structured responses
    - Emphasizes efficiency and practical solutions`
    }, {
      name: "Academic",
      description: "An in-depth, research-backed assistant for critical thinking and scholarly discussions.",
      systemMessage: `You are a scholarly AI assistant who:
    - Uses academic language and terminology
    - Provides in-depth analysis and research context
    - Cites relevant sources and studies
    - Encourages critical thinking
    - Maintains high academic standards`
    }, {
      name: "Casual",
      description: "A laid-back assistant who uses conversational and humorous language.",
      systemMessage: `You are a laid-back, informal AI assistant who:
    - Uses conversational, everyday language
    - Incorporates humor and lightheartedness
    - Keeps responses concise and engaging
    - Encourages relaxed, easygoing interactions
    - Avoids unnecessary formality`
    }, {
      name: "Motivational",
      description: "An uplifting assistant that inspires positivity and goal achievement.",
      systemMessage: `You are an inspiring and motivational AI assistant who:
    - Uses uplifting and encouraging language
    - Helps users stay positive and focused
    - Provides motivational quotes and wisdom
    - Reinforces confidence and resilience
    - Supports users in achieving their goals`
    }, {
      name: "Concise",
      description: "A direct, no-nonsense assistant for quick, clear answers.",
      systemMessage: `You are a brief and to-the-point AI assistant who:
    - Keeps responses short and direct
    - Avoids unnecessary details or explanations
    - Answers with clarity and brevity
    - Optimizes efficiency in communication
    - Sticks to essential information only`
    }, {
      name: "Storyteller",
      description: "A creative assistant who engages through vivid, narrative-driven explanations.",
      systemMessage: `You are a creative, narrative-driven AI assistant who:
    - Uses storytelling to illustrate points
    - Weaves engaging and vivid narratives
    - Captures imagination and interest
    - Makes learning enjoyable through stories
    - Adapts stories to suit the user's needs`
    }, {
      name: "Sarcastic",
      description: "A witty assistant that adds playful sarcasm and humor to conversations.",
      systemMessage: `You are a witty, sarcastic AI assistant who:
    - Uses playful, humorous sarcasm
    - Provides sharp, clever responses
    - Maintains an entertaining and fun tone
    - Ensures sarcasm is lighthearted, not offensive
    - Keeps interactions engaging and humorous`
    }, {
      name: "Empathetic",
      description: "A compassionate assistant who listens and provides emotional support.",
      systemMessage: `You are a compassionate and understanding AI assistant who:
    - Listens attentively to users' concerns
    - Responds with kindness and patience
    - Offers emotional support and encouragement
    - Helps users feel heard and understood
    - Prioritizes a caring, human-like approach`
    }, {
      name: "Philosophical",
      description: "A deep-thinking assistant that encourages introspection and exploration.",
      systemMessage: `You are a deep-thinking, philosophical AI assistant who:
    - Explores profound questions and ideas
    - Encourages introspection and curiosity
    - Uses wisdom from philosophy and history
    - Avoids simplistic answers, embracing complexity
    - Guides users toward deeper understanding`
    }, {
      name: "IoT",
      description: "A tech-savvy assistant for managing smart devices and IoT systems.",
      systemMessage: `You are a tech-savvy AI assistant specializing in Internet of Things (IoT) systems who:
    - Helps users manage and troubleshoot connected devices
    - Advises on smart home integrations and automation
    - Provides guidance on securing IoT devices
    - Recommends improvements for smart technology setups
    - Stays updated on the latest IoT innovations and trends`
    }, {
  name: "Analytical",
  description: "A logical and detail-oriented assistant for data-driven insights and problem-solving.",
  systemMessage: `You are a logical, analytical AI assistant who:
  - Uses data and reasoning to support conclusions
  - Breaks down problems systematically
  - Identifies patterns and logical inconsistencies
  - Provides well-structured and evidence-based responses
  - Prioritizes accuracy and deep analysis`
}, {
  name: "Enthusiastic",
  description: "A highly energetic assistant that keeps conversations lively and engaging.",
  systemMessage: `You are an energetic and enthusiastic AI assistant who:
  - Maintains an upbeat and engaging tone
  - Infuses excitement into every interaction
  - Encourages users to embrace challenges with positivity
  - Uses dynamic language to keep users engaged
  - Celebrates progress and achievements enthusiastically`
}, {
  name: "Tactical",
  description: "A strategic, solution-focused assistant for planning and decision-making.",
  systemMessage: `You are a tactical and strategic AI assistant who:
  - Helps users plan and execute strategies effectively
  - Assists in goal-setting and action planning
  - Evaluates risks and opportunities logically
  - Breaks down complex decisions into manageable steps
  - Focuses on practical, real-world applications`
}, {
  name: "Nostalgic",
  description: "A memory-rich assistant who brings historical and cultural insights into conversations.",
  systemMessage: `You are a nostalgic AI assistant who:
  - Draws on historical events and cultural references
  - Provides context through past experiences and trends
  - Engages users with fond recollections and retro perspectives
  - Explores connections between the past and present
  - Evokes feelings of nostalgia in discussions`
}, {
  name: "Inquisitive",
  description: "A curiosity-driven assistant that asks thought-provoking questions.",
  systemMessage: `You are an inquisitive AI assistant who:
  - Encourages users to think deeply by asking insightful questions
  - Seeks to explore ideas from multiple perspectives
  - Maintains a sense of wonder and curiosity
  - Engages in Socratic-style dialogue
  - Fosters continuous learning and discovery`
}, {
  name: "Dreamy",
  description: "A whimsical and imaginative assistant that sparks creativity and wonder.",
  systemMessage: `You are a whimsical, dreamy AI assistant who:
  - Encourages imaginative thinking and storytelling
  - Engages users with creative and poetic responses
  - Uses fantasy and wonder to inspire new ideas
  - Creates a sense of magic and possibility in conversations
  - Helps users explore their most creative visions`
}, {
  name: "Cynical",
  description: "A skeptical assistant that questions assumptions with sharp wit.",
  systemMessage: `You are a cynical AI assistant who:
  - Challenges ideas with a critical mindset
  - Uses dry humor and skepticism in responses
  - Questions conventional wisdom and assumptions
  - Prefers realism over optimism
  - Engages users in thought-provoking critiques`
}, {
  name: "Optimistic",
  description: "A hopeful and solution-focused assistant that finds the bright side of any situation.",
  systemMessage: `You are a hopeful and optimistic AI assistant who:
  - Always looks for the positive aspects of any situation
  - Encourages users to focus on solutions, not problems
  - Uses encouraging and hopeful language
  - Helps users find silver linings and opportunities
  - Fosters resilience and a can-do attitude`
}, {
  name: "Detective",
  description: "A mystery-solving assistant that approaches inquiries with curiosity and deduction.",
  systemMessage: `You are a detective-like AI assistant who:
  - Investigates questions with logic and deduction
  - Pieces together clues to find answers
  - Uses an engaging, mystery-solving tone
  - Encourages users to think like a detective
  - Provides well-reasoned conclusions based on evidence`
}, {
  name: "Zen",
  description: "A calm, mindful assistant that promotes balance, wisdom, and inner peace.",
  systemMessage: `You are a peaceful and mindful AI assistant who:
  - Uses calming and reflective language
  - Encourages mindfulness and self-awareness
  - Provides wisdom from philosophy and meditation practices
  - Helps users find clarity and inner balance
  - Focuses on emotional well-being and simplicity`
}];

    const MODELS = [{
      name: "google/gemini-2.0-flash-exp:free",
      priority: 1,
      timeout: 20000,
      retryDelay: 1000
    }, {
      name: "meta-llama/llama-3.2-3b-instruct:free",
      priority: 2,
      timeout: 25000,
      retryDelay: 1500
    }, {
      name: "qwen/qwen-2-7b-instruct:free",
      priority: 3,
      timeout: 30000,
      retryDelay: 2000
    }];
    const STATE = {
      customPersonalities: [],
      isWaitingForResponse: false,
      editingMessageId: null,
      voiceRecording: false,
      messageHistory: [],
      currentLanguage: 'English',
      theme: 'dark',
      selectedModel: MODELS[0].name,
      contextLength: 0,
      mediaRecorder: null,
      selectedPersonality: PERSONALITIES[0],
      settings: {
        notifications: true,
        soundEffects: true,
        autoScroll: true,
        autoComplete: true,
        markdownPreview: true,
        codeHighlighting: true
      },
      recognition: null,
      editingState: null,
      lastInteraction: Date.now(),
      errorCount: 0
    };
    document.addEventListener('DOMContentLoaded', async () => {
      try {
        await initializeApp();
      } catch (error) {
        console.error('Initialization error:', error);
        showError('Failed to initialize application');
      }
    });
    const systemMessage = {
      role: "system",
      content: `You are PatheticAI Enhanced

    Key characteristics:
    - Friendly and empathetic AI assistant
    - Provides clear, concise responses
    - Adapts communication style to user needs
    - Offers helpful suggestions and insights
    - Maintains context awareness`
    };
    document.addEventListener('DOMContentLoaded', () => {
      initializeApp();
    });
    async function initializeApp() {
      await loadSavedState();
      setupEventListeners();
      await showWelcomeMessage();
      if (!await checkApiKey()) {
        disableInput();
        showApiKeyModal();
      }
      initializeVoiceInput();
    }

    function getSystemMessage() {
      return {
        role: "system",
        content: STATE.selectedPersonality.systemMessage
      };
    }
    async function toggleVoiceInput() {
      const voiceButton = document.querySelector('.voice-input-button');
      const messageInput = document.getElementById('messageInput');
      const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
      if (!STATE.voiceRecording) {
        if (!SpeechRecognition) {
          showError('Your browser does not support the Web Speech API');
          return;
        }
        try {
          const recognition = new SpeechRecognition();
          recognition.continuous = false;
          recognition.interimResults = true;
          recognition.lang = 'en-US';
          STATE.recognition = recognition;
          recognition.onstart = () => {
            STATE.voiceRecording = true;
            voiceButton.classList.add('recording');
            showNotification('Voice recording started');
          };
          recognition.onresult = (event) => {
            let transcript = '';
            let interimTranscript = '';
            for (let i = event.resultIndex; i < event.results.length; i++) {
              const result = event.results[i];
              if (result.isFinal) {
                transcript += result[0].transcript;
              } else {
                interimTranscript += result[0].transcript;
              }
            }
            messageInput.value = transcript || interimTranscript;
            messageInput.focus();
          };
          recognition.onerror = (event) => {
            showError('Speech recognition error');
            console.error('Speech recognition error:', event.error);
          };
          recognition.onend = () => {
            STATE.voiceRecording = false;
            voiceButton.classList.remove('recording');
            showNotification('Voice recording stopped');
          };
          recognition.start();
        } catch (error) {
          showError('Microphone access denied');
          voiceButton.disabled = true;
        }
      } else {
        if (STATE.recognition) {
          STATE.recognition.stop();
          STATE.voiceRecording = false;
          voiceButton.classList.remove('recording');
          showNotification('Voice recording stopped');
        }
      }
    }
    const voiceButton = document.getElementById('voiceButton');
    const messageInput = document.getElementById('messageInput');
    const notification = document.getElementById('notification');
    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
    let recognition;

    function initializeVoiceInput() {
      if (!SpeechRecognition) {
        alert('Your browser does not support the Web Speech API');
        return null;
      }
      const recognitionInstance = new SpeechRecognition();
      recognitionInstance.continuous = false;
      recognitionInstance.interimResults = true;
      recognitionInstance.lang = 'en-US';
      recognitionInstance.onstart = () => {
        voiceButton.classList.add('recording');
        showNotification('Voice recording started');
      };
      recognitionInstance.onresult = (event) => {
        let transcript = '';
        for (let i = event.resultIndex; i < event.results.length; i++) {
          const result = event.results[i];
          if (result.isFinal) {
            transcript += result[0].transcript;
          }
        }
        messageInput.value = transcript;
      };
      recognitionInstance.onerror = (event) => {
        alert('Speech recognition error');
        console.error('Speech recognition error:', event.error);
      };
      recognitionInstance.onend = () => {
        voiceButton.classList.remove('recording');
        showNotification('Voice recording stopped');
      };
      return recognitionInstance;
    }
    voiceButton.addEventListener('click', () => {
      if (!recognition) {
        recognition = initializeVoiceInput();
        if (!recognition) return;
      }
      if (voiceButton.classList.contains('recording')) {
        recognition.stop();
      } else {
        recognition.start();
      }
    });

    function showNotification(message) {
      notification.innerText = message;
      notification.style.display = 'block';
      setTimeout(() => {
        notification.style.display = 'none';
      }, 3000);
    }

    function loadSavedState() {
      try {
        const savedCustomPersonalities = localStorage.getItem(CONFIG.STORAGE_KEYS.CUSTOM_PERSONALITIES);
        if (savedCustomPersonalities) {
          STATE.customPersonalities = JSON.parse(savedCustomPersonalities);
        }
        const savedPersonalityName = localStorage.getItem(CONFIG.STORAGE_KEYS.PERSONALITY);
        if (savedPersonalityName) {
          const allPersonalities = [...PERSONALITIES, ...STATE.customPersonalities];
          const personality = allPersonalities.find(p => p.name === savedPersonalityName);
          if (personality) {
            STATE.selectedPersonality = personality;
          }
        }
        const savedMessages = localStorage.getItem(CONFIG.STORAGE_KEYS.MESSAGES);
        if (savedMessages) {
          STATE.messageHistory = JSON.parse(savedMessages);
          STATE.messageHistory = STATE.messageHistory.filter(msg => msg && msg.role && msg.content && msg.timestamp);
          const chatMessages = document.querySelector('.chat-messages');
          chatMessages.innerHTML = '';
          STATE.messageHistory.forEach(msg => {
            const isUser = msg.role === 'user';
            const {
              element
            } = createMessageElement(msg.content, isUser, new Date(msg.timestamp));
            chatMessages.appendChild(element);
          });
        } else {
          showWelcomeMessage();
        }
        const savedSettings = localStorage.getItem(CONFIG.STORAGE_KEYS.SETTINGS);
        if (savedSettings) {
          STATE.settings = {
            ...STATE.settings,
            ...JSON.parse(savedSettings)
          };
        }
        const savedTheme = localStorage.getItem(CONFIG.STORAGE_KEYS.THEME);
        if (savedTheme) {
          STATE.theme = savedTheme;
          document.documentElement.setAttribute('data-theme', savedTheme);
        }
        const savedLanguage = localStorage.getItem(CONFIG.STORAGE_KEYS.LANGUAGE);
        if (savedLanguage) {
          STATE.currentLanguage = savedLanguage;
        }
      } catch (error) {
        console.error('Error loading saved state:', error);
        STATE.messageHistory = [];
        saveToLocalStorage(CONFIG.STORAGE_KEYS.MESSAGES, []);
        showWelcomeMessage();
      }
    }

    function saveToLocalStorage(key, value) {
      try {
        if (key === CONFIG.STORAGE_KEYS.MESSAGES) {
          return false;
        }
        const serializedValue = typeof value === 'string' ? value : JSON.stringify(value);
        localStorage.setItem(key, serializedValue);
        return true;
      } catch (error) {
        console.error('Local storage error:', error);
        return false;
      }
    }

    function formatTimestamp(date) {
      return new Intl.DateTimeFormat('default', {
        hour: 'numeric',
        minute: 'numeric',
        second: 'numeric',
        year: 'numeric',
        month: 'short',
        day: 'numeric'
      }).format(date);
    }
    async function copyToClipboard(text) {
      try {
        await navigator.clipboard.writeText(text);
        showNotification('Copied to clipboard');
      } catch (err) {
        showNotification('Failed to copy to clipboard');
      }
    }

    function createMessageElement(message, isUser, timestamp = new Date()) {
      const messageId = Date.now().toString();
      const messageElement = document.createElement('div');
      messageElement.classList.add('chat-message', isUser ? 'user' : 'bot');
      messageElement.dataset.messageId = messageId;
      const contentDiv = document.createElement('div');
      contentDiv.classList.add('message-content');
      if (!isUser) {
        contentDiv.innerHTML = marked.parse(message, {
          highlight: function(code, language) {
            if (language) {
              return hljs.highlight(code, {
                language
              }).value;
            }
            return hljs.highlightAuto(code).value;
          }
        });
        contentDiv.querySelectorAll('pre code').forEach((block) => {
          const wrapper = document.createElement('div');
          wrapper.className = 'code-block-wrapper';
          const copyButton = document.createElement('button');
          copyButton.className = 'code-copy-button';
          copyButton.innerHTML = '     < i class = "fas fa-copy" > < /i>';
          copyButton.onclick = (e) => {
            e.stopPropagation();
            navigator.clipboard.writeText(block.textContent).then(() => {
              copyButton.innerHTML = '     <i class = "fas fa-check" > </i>';
              setTimeout(() => {
                copyButton.innerHTML = '     <i class = "fas fa-copy" > </i>';
              }, 2000);
            });
          };
          block.parentNode.insertBefore(wrapper, block);
          wrapper.appendChild(block);
          wrapper.appendChild(copyButton);
        });
      } else {
        contentDiv.textContent = message;
      }
      messageElement.appendChild(contentDiv);
      const timestampDiv = document.createElement('div');
      timestampDiv.className = 'message-timestamp';
      timestampDiv.textContent = formatTimestamp(timestamp);
      messageElement.appendChild(timestampDiv);
      const actionsDiv = document.createElement('div');
      actionsDiv.className = 'message-actions';
      if (isUser) {
        const editButton = document.createElement('button');
        editButton.className = 'action-button';
        editButton.innerHTML = '     <i class = "fa-regular fa-edit" > </i>';
        editButton.onclick = () => startEditing(messageId);
        actionsDiv.appendChild(editButton);
      }
      const copyButton = document.createElement('button');
      copyButton.className = 'action-button';
      copyButton.innerHTML = '     <i class = "fa-regular fa-copy" > </i>';
      copyButton.onclick = () => copyToClipboard(message);
      actionsDiv.appendChild(copyButton);
      messageElement.appendChild(actionsDiv);
      return {
        element: messageElement,
        id: messageId
      };
    }
    async function startEditing(messageId) {
      if (STATE.isWaitingForResponse) return;
      const messageElement = document.querySelector(`[data-message-id="${messageId}"]`);
      if (!messageElement) return;
      const contentDiv = messageElement.querySelector('.message-content');
      const originalText = contentDiv.textContent;
      const textarea = document.createElement('textarea');
      textarea.className = 'edit-input';
      textarea.value = originalText;
      contentDiv.replaceWith(textarea);
      const messageIndex = STATE.messageHistory.findIndex(msg => msg.id === messageId);
      STATE.editingState = {
        messageId,
        originalText,
        messageIndex,
        subsequentMessages: STATE.messageHistory.slice(messageIndex + 1)
      };
      textarea.focus();
      messageElement.classList.add('edit-mode');
      STATE.editingMessageId = messageId;
      textarea.addEventListener('keydown', async (e) => {
        if (e.key === 'Enter' && !e.shiftKey) {
          e.preventDefault();
          await finishEditing(messageId, textarea.value.trim());
        } else if (e.key === 'Escape') {
          cancelEditing(messageId);
        }
      });
    }

    function filterLanguages(searchQuery) {
      const languageOptions = document.querySelectorAll('.language-option');
      searchQuery = searchQuery.toLowerCase();
      languageOptions.forEach(option => {
        const languageName = option.querySelector('.language-name').textContent.toLowerCase();
        if (languageName.includes(searchQuery)) {
          option.style.display = 'block';
        } else {
          option.style.display = 'none';
        }
      });
    }

    function cancelEditing(messageId) {
      if (!STATE.editingState) return;
      const messageElement = document.querySelector(`[data-message-id="${messageId}"]`);
      if (!messageElement) return;
      const textarea = messageElement.querySelector('.edit-input');
      const contentDiv = document.createElement('div');
      contentDiv.className = 'message-content';
      contentDiv.textContent = STATE.editingState.originalText;
      textarea.replaceWith(contentDiv);
      messageElement.classList.remove('edit-mode');
      STATE.editingMessageId = null;
      STATE.editingState = null;
    }
    async function finishEditing(messageId, newText) {
      if (!messageId || !newText || STATE.isWaitingForResponse || !STATE.editingState) return;
      const messageElement = document.querySelector(`[data-message-id="${messageId}"]`);
      if (!messageElement) return;
      if (newText === STATE.editingState.originalText) {
        cancelEditing(messageId);
        return;
      }
      const textarea = messageElement.querySelector('.edit-input');
      const contentDiv = document.createElement('div');
      contentDiv.className = 'message-content';
      contentDiv.textContent = newText;
      textarea.replaceWith(contentDiv);
      messageElement.classList.remove('edit-mode');
      const {
        messageIndex
      } = STATE.editingState;
      let nextElement = messageElement.nextElementSibling;
      while (nextElement) {
        const temp = nextElement.nextElementSibling;
        nextElement.remove();
        nextElement = temp;
      }
      STATE.messageHistory[messageIndex].content = newText;
      STATE.messageHistory = STATE.messageHistory.slice(0, messageIndex + 1);
      try {
        const typingIndicator = createTypingIndicator();
        document.querySelector('.chat-messages').appendChild(typingIndicator);
        STATE.isWaitingForResponse = true;
        const response = await sendMessageWithRetry(newText);
        typingIndicator.remove();
        if (response.text) {
          const botMessageObj = {
            role: "assistant",
            content: response.text,
            timestamp: Date.now(),
            id: Date.now().toString(),
            replyTo: messageId
          };
          STATE.messageHistory.push(botMessageObj);
          const {
            element: botElement
          } = createMessageElement(response.text, false);
          document.querySelector('.chat-messages').appendChild(botElement);
          if (STATE.settings.autoScroll) {
            botElement.scrollIntoView({
              behavior: 'smooth'
            });
          }
          if (STATE.settings.soundEffects) {
            playMessageSound();
          }
        }
      } catch (error) {
        showError(`Error updating response: ${error.message}`);
      } finally {
        STATE.isWaitingForResponse = false;
        STATE.editingMessageId = null;
        STATE.editingState = null;
        saveToLocalStorage(CONFIG.STORAGE_KEYS.MESSAGES, STATE.messageHistory);
      }
    }
    document.getElementById('messageInput').addEventListener('keydown', function(event) {
      if (event.key === 'Enter' && !event.shiftKey) {
        event.preventDefault();
        sendMessage();
      }
    });
    async function sendMessage() {
      const textarea = document.getElementById('messageInput');
      const message = textarea.value.trim();
      if (!message || STATE.isWaitingForResponse || STATE.editingMessageId) return;
      STATE.isWaitingForResponse = true;
      disableInput();
      try {
        const {
          element: messageElement,
          id: messageId
        } = createMessageElement(message, true, new Date());
        document.querySelector('.chat-messages').appendChild(messageElement);
        const messageObj = {
          role: "user",
          content: message,
          timestamp: Date.now(),
          id: messageId
        };
        STATE.messageHistory.push(messageObj);
        saveToLocalStorage(CONFIG.STORAGE_KEYS.MESSAGES, STATE.messageHistory);
        textarea.value = '';
        textarea.style.height = 'auto';
        const response = await sendMessageWithRetry(message);
        if (response.text) {
          const botMessageObj = {
            role: "assistant",
            content: response.text,
            timestamp: Date.now(),
            id: Date.now().toString(),
            replyTo: messageId
          };
          STATE.messageHistory.push(botMessageObj);
          saveToLocalStorage(CONFIG.STORAGE_KEYS.MESSAGES, STATE.messageHistory);
          const {
            element: botElement
          } = createMessageElement(response.text, false);
          document.querySelector('.chat-messages').appendChild(botElement);
          if (STATE.settings.autoScroll) {
            botElement.scrollIntoView({
              behavior: 'smooth'
            });
          }
          if (STATE.settings.soundEffects) {
            playMessageSound();
          }
        }
      } catch (error) {
        showError(`Error: ${error.message}`);
      } finally {
        STATE.isWaitingForResponse = false;
        enableInput();
        textarea.focus();
      }
    }
    async function sendMessageWithRetry(message, retries = CONFIG.MAX_RETRIES) {
      try {
        const typingIndicator = createTypingIndicator();
        document.querySelector('.chat-messages').appendChild(typingIndicator);
        const response = await tryMultipleModels(message);
        typingIndicator.remove();
        return response;
      } catch (error) {
        const existingTypingIndicator = document.querySelector('.typing-indicator');
        if (existingTypingIndicator) {
          existingTypingIndicator.remove();
        }
        if (retries > 0) {
          showNotification(`Retrying... (${retries} attempts left)`);
          await new Promise(resolve => setTimeout(resolve, 1000));
          return sendMessageWithRetry(message, retries - 1);
        }
        throw error;
      }
    }
    async function tryMultipleModels(userMessage) {
      const apiKey = getApiKey();
      if (!apiKey) {
        throw new Error("API key not found. Please enter your API key first.");
      }
      const messages = [{
        role: "system",
        content: STATE.selectedPersonality.systemMessage
      }, ...STATE.messageHistory.filter(msg => msg.role === "user" || msg.role === "assistant"), {
        role: "user",
        content: `Please respond in ${STATE.currentLanguage}. ${userMessage}`
      }];
      for (let modelIndex = 0; modelIndex < MODELS.length; modelIndex++) {
        try {
          const response = await Promise.race([
            fetch("https://openrouter.ai/api/v1/chat/completions", {
              method: "POST",
              headers: {
                "Authorization": `Bearer ${apiKey}`,
                "Content-Type": "application/json"
              },
              body: JSON.stringify({
                "model": MODELS[modelIndex].name,
                "messages": messages
              })
            }).then(async res => {
              if (!res.ok) {
                const errorData = await res.json();
                throw new Error(`API Error: ${errorData.error?.message || 'Unknown error'}`);
              }
              return res.json();
            }),
            new Promise((_, reject) => setTimeout(() => reject(new Error('Request timeout')), CONFIG.API_TIMEOUT))
          ]);
          if (response.choices && response.choices[0].message.content) {
            return {
              text: response.choices[0].message.content
            };
          }
        } catch (error) {
          console.error(`Model ${MODELS[modelIndex].name} failed:`, error);
          if (modelIndex === MODELS.length - 1) {
            throw new Error(`API Error: ${error.message}`);
          }
          continue;
        }
      }
      throw new Error("All API attempts failed. Please try again later.");
    }

    function setupEventListeners() {
      window.addEventListener('focus', handleWindowFocus);
      window.addEventListener('blur', handleWindowBlur);
      window.addEventListener('online', () => showNotification('You are back online!'));
      window.addEventListener('offline', () => showNotification('You are offline. Some features may be unavailable.'));
      window.addEventListener('beforeunload', handleBeforeUnload);
      document.querySelector('.container').addEventListener('wheel', handleScroll);
      document.querySelector('.brand').addEventListener('click', showAboutModal);
      window.addEventListener('resize', handleResize);
    }

    function handleWindowFocus() {
      if (STATE.settings.notifications) {
        document.title = 'PatheticAI Enhanced';
      }
    }

    function handleWindowBlur() {
      if (STATE.settings.notifications) {
        const unreadMessages = STATE.messageHistory.filter(msg => msg.role === 'assistant' && msg.timestamp > document.lastModified).length;
        if (unreadMessages > 0) {
          document.title = `(${unreadMessages}) PatheticAI Enhanced`;
        }
      }
    }

    function handleBeforeUnload(e) {
      if (STATE.isWaitingForResponse || STATE.editingMessageId) {
        e.preventDefault();
        e.returnValue = '';
      }
    }

    function handleScroll(e) {
      if (STATE.settings.autoScroll) {
        const container = document.querySelector('.container');
        const isScrolledToBottom = container.scrollHeight - container.clientHeight <= container.scrollTop + 1;
        if (!isScrolledToBottom) {
          STATE.settings.autoScroll = false;
          showNotification('Auto-scroll disabled');
          saveToLocalStorage(CONFIG.STORAGE_KEYS.SETTINGS, STATE.settings);
        }
      }
    }

    function handleResize() {
      const textarea = document.getElementById('messageInput');
      if (textarea) {
        textarea.style.height = 'auto';
        textarea.style.height = Math.min(textarea.scrollHeight, 200) + 'px';
      }
    }

function showSettingsModal() {
  const modal = document.createElement('div');
  modal.className = 'modal-overlay';

  const allPersonalities = [...PERSONALITIES, ...STATE.customPersonalities];
  const languageOptions = [
    'Afrikaans', 'Albanian', 'Amharic', 'Arabic', 'Armenian', 'Azerbaijani',
    'Basque', 'Belarusian', 'Bengali', 'Bosnian', 'Bulgarian', 'Burmese',
    'Catalan', 'Cebuano', 'Chinese (Simplified)', 'Chinese (Traditional)', 'Corsican',
    'Croatian', 'Czech', 'Danish', 'Dutch', 'English', 'Esperanto', 'Estonian',
    'Filipino', 'Finnish', 'French', 'Frisian', 'Galician', 'Georgian', 'German',
    'Greek', 'Gujarati', 'Haitian Creole', 'Hausa', 'Hawaiian', 'Hebrew', 'Hindi',
    'Hmong', 'Hungarian', 'Icelandic', 'Igbo', 'Indonesian', 'Irish', 'Italian',
    'Japanese', 'Javanese', 'Kannada', 'Kazakh', 'Khmer', 'Kinyarwanda', 'Korean',
    'Kurdish', 'Kyrgyz', 'Lao', 'Latin', 'Latvian', 'Lithuanian', 'Luxembourgish',
    'Macedonian', 'Malagasy', 'Malay', 'Malayalam', 'Maltese', 'Maori', 'Marathi',
    'Mongolian', 'Myanmar (Burmese)', 'Nepali', 'Norwegian', 'Nyanja (Chichewa)',
    'Odia (Oriya)', 'Pashto', 'Persian (Farsi)', 'Polish', 'Portuguese', 'Punjabi',
    'Romanian', 'Russian', 'Samoan', 'Scots Gaelic', 'Serbian', 'Sesotho', 'Shona',
    'Sindhi', 'Sinhala (Sinhalese)', 'Slovak', 'Slovenian', 'Somali', 'Spanish',
    'Sundanese', 'Swahili', 'Swedish', 'Tajik', 'Tamil', 'Tatar', 'Telugu', 'Thai',
    'Turkish', 'Turkmen', 'Ukrainian', 'Urdu', 'Uyghur', 'Uzbek', 'Vietnamese',
    'Welsh', 'Xhosa', 'Yiddish', 'Yoruba', 'Zulu']
    .map(lang => `
      <div class="option language-option" data-language="${lang}" onclick="changeLanguage('${lang}')">
        <span class="language-flag" data-country="${getCountryCode(lang)}"></span>
        <span class="language-name">${lang}</span>
        <span class="language-code">${getLanguageCode(lang)}</span>
      </div>
    `).join('');

  const personalityOptions = allPersonalities.map(p => `
    <div class="option personality-option ${p.isCustom ? 'custom-personality' : ''}" data-personality="${p.name}" onclick="changePersonality('${p.name}')">
      <div class="personality-header">
        <i class="fa-solid ${getPersonalityIcon(p.name)}"></i>
        <span class="personality-name">${p.name}</span>
        ${p.isCustom ? `</div>` : ''}
      </div>
      <p class="personality-description">${p.description || 'No description available'}</p>
    </div>
  `).join('');

  const themeOptions = `
    <div class="option theme-option" data-theme="light" onclick="changeTheme('Light')">
      <div class="theme-preview light-preview">
        <div class="preview-header"></div>
        <div class="preview-content"></div>
      </div>
      <span>Light</span>
    </div>
    <div class="option theme-option" data-theme="dark" onclick="changeTheme('Dark')">
      <div class="theme-preview dark-preview">
        <div class="preview-header"></div>
        <div class="preview-content"></div>
      </div>
      <span>Dark</span>
    </div>
  `;

  modal.innerHTML = `
    <div class="modal-window">
      <div class="modal-header">
        <span class="modal-title">
          <i class="fa-solid fa-gear fa-spin-hover"></i> Settings
        </span>
        <div class="modal-actions">
          <button class="help-button" onclick="showSettingsHelp()">
            <i class="fa-solid fa-circle-question"></i>
          </button>
          <button class="close-button" aria-label="Close settings" onclick="closeModal()">
            <i class="fa-solid fa-xmark"></i>
          </button>
        </div>
      </div>
      <div class="modal-content">
        <div class="settings-tabs">
          <button class="tab-button active" data-tab="general">
            <i class="fa-solid fa-sliders"></i> General
          </button>
          <button class="tab-button" data-tab="appearance">
            <i class="fa-solid fa-palette"></i> Appearance
          </button>
          <button class="tab-button" data-tab="personalities">
            <i class="fa-solid fa-theater-masks"></i> Personalities
          </button>
          <button class="tab-button" data-tab="extra">
            <i class="fa-solid fa-gear"></i> Extra
          </button>
        </div>

        <div class="tab-content active" data-tab="general">
          <div class="settings-section">
            <h3>Language</h3>
            <div class="selector-container">
              <div class="selector" id="languageSelector" onclick="toggleLanguageSelector()">
                <span>
                  <i class="fa-solid fa-language"></i>
                  <span class="language-flag" data-country="${getCountryCode(STATE.currentLanguage)}"></span>
                  ${STATE.currentLanguage}
                </span>
                <i class="fa-solid fa-chevron-down"></i>
              </div>
              <div class="options search-enabled" id="languageOptions" style="display:none;">
                <div class="search-box">
                  <i class="fa-solid fa-search"></i>
                  <input type="text" placeholder="Search languages..." onkeyup="filterLanguages(this.value)">
                </div>
                ${languageOptions}
              </div>
            </div>
          </div>

          <div class="settings-section">
            <h3>Notifications</h3>
            <div class="toggle-group">
              <label class="toggle-switch">
                <input type="checkbox" ${STATE.settings.notifications ? 'checked' : ''} onchange="toggleSetting('notifications')" class="hidden-checkbox">
                <span class="toggle-slider"></span>
                <span class="toggle-label">Notifications</span>
              </label>
              <label class="toggle-switch">
                <input type="checkbox" ${STATE.settings.soundEffects ? 'checked' : ''} onchange="toggleSetting('soundEffects')" class="hidden-checkbox">
                <span class="toggle-slider"></span>
                <span class="toggle-label">Sound Effects</span>
              </label>
            </div>
          </div>
        </div>
        
        <div class="tab-content" data-tab="appearance">
          <div class="settings-section">
            <h3>Theme</h3>
            <div class="theme-options-grid">
              ${themeOptions}
            </div>
          </div>
        </div>

        <div class="tab-content" data-tab="personalities">
          <div class="settings-section">
            <h3>Select Personality</h3>
            <div class="selector-container">
              <div class="selector" id="personalitySelector" onclick="togglePersonalitySelector()">
                <span>
                  <i class="fa-solid ${getPersonalityIcon(STATE.selectedPersonality.name)}"></i>
                  ${STATE.selectedPersonality.name}
                </span>
                <i class="fa-solid fa-chevron-down"></i>
              </div>
              <div class="options search-enabled" id="personalityOptions" style="display:none;">
                <div class="search-box">
                  <i class="fa-solid fa-search"></i>
                  <input type="text" placeholder="Search personalities..." onkeyup="filterPersonalities(this.value)">
                </div>
                <div id="personalityList">${personalityOptions}</div>
              </div>
            </div>
          </div>
        </div>

        <div class="tab-content" data-tab="extra">
          <div class="settings-section">
            <h3>Chat Display</h3>
            <div class="display-options">
              <label class="toggle-switch">
                <input type="checkbox" ${STATE.settings.autoScroll ? 'checked' : ''} onchange="toggleSetting('autoScroll')" class="hidden-checkbox">
                <span class="toggle-slider"></span>
                <span class="toggle-label">Auto Scroll</span>
              </label>
            </div>
          </div>

          <div class="settings-section danger-zone">
            <h3>Danger Zone</h3>
            <div class="danger-actions">
              <button class="danger-button" onclick="resetChat()">
                <i class="fa-solid fa-trash"></i> Clear Chat History
              </button>
              <button class="danger-button" onclick="removeApiKey()">
                <i class="fa-solid fa-key"></i> Remove API Key
              </button>
              <button class="danger-button" onclick="clearCache()">
                <i class="fa-solid fa-server"></i> Clear Cache
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  `;

  modal.addEventListener('click', (e) => {
    if (e.target === modal) {
      closeModal();
    }

      });
      modal.querySelectorAll('.tab-button').forEach(button => {
        button.addEventListener('click', () => {
          const tabName = button.dataset.tab;
          modal.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
          modal.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
          button.classList.add('active');
          modal.querySelector(`.tab-content[data-tab="${tabName}"]`).classList.add('active');
        });
      });
      document.body.appendChild(modal);
    }

    function getCountryCode(language) {
      const languageMap = {
        'English': 'us',
        'Spanish': 'es',
        'French': 'fr',
      };
      return languageMap[language] || 'unknown';
    }

function getLanguageCode(language) {
  const codeMap = {

    'English': 'us',
    'Spanish': 'es',
    'French': 'fr',
    'German': 'de',
    'Italian': 'it',
    'Japanese': 'jp',
    'Chinese': 'cn', 
    'Russian': 'ru',
    'Portuguese': 'pt',
    'Korean': 'kr',
    'Hindi': 'in',
    'Arabic': 'ae',
    'Turkish': 'tr',
    'Dutch': 'nl',
    'Swedish': 'se',
    'Greek': 'gr',
    'Polish': 'pl',
    'Vietnamese': 'vn',
    'Thai': 'th',
    'Indonesian': 'id',
    'Hebrew': 'il',
    'Finnish': 'fi',
    'Czech': 'cz',
    'Hungarian': 'hu',
    'Romanian': 'ro',
    'Norwegian': 'no',
    'Danish': 'dk',
    'Bulgarian': 'bg',
    'Ukrainian': 'ua',
    'Malay': 'my',
    'Swahili': 'ke',
    'Tamil': 'lk',
    'Bengali': 'bd',
    'Punjabi': 'pk',
    'Telugu': 'in',
    'Marathi': 'in',
    'Gujarati': 'in',
    'Malayalam': 'in',
    'Kannada': 'in',
    'Oriya': 'in',
    'Assamese': 'in',
    'Nepali': 'np',
    'Sinhala': 'lk',
    'Khmer': 'kh',
    'Laotian': 'la',
    'Filipino': 'ph',
    'Mongolian': 'mn',
    'Pashto': 'af',
    'Farsi': 'ir',
    'Uzbek': 'uz',
    'Kazakh': 'kz',
    'Tajik': 'tj',
    'Azerbaijani': 'az',
    'Georgian': 'ge',
    'Armenian': 'am',
    'Albanian': 'al',
    'Serbian': 'rs',
    'Croatian': 'hr',
    'Bosnian': 'ba',
    'Slovak': 'sk',
    'Slovenian': 'si',
    'Estonian': 'ee',
    'Latvian': 'lv',
    'Lithuanian': 'lt',
    'Icelandic': 'is',
    'Irish': 'ie',
    'Welsh': 'gb',
    'Basque': 'es',
    'Catalan': 'es',
    'Galician': 'es',
    'Maltese': 'mt',
    'Corsican': 'fr',
    'Haitian Creole': 'ht',
    'Quechua': 'pe',
    'Nahuatl': 'mx',
    'Maya': 'mx',
    'Yiddish': 'il',
    'Esperanto': 'eo',

    'Afrikaans': 'za',             
    'Amharic': 'et',               
    'Belarusian': 'by',            
    'Burmese': 'mm',               
    'Cebuano': 'ph',               
    'Chinese (Simplified)': 'cn',
    'Chinese (Traditional)': 'tw', 
    'Frisian': 'nl',               
    'Hausa': 'ng',                 
    'Hawaiian': 'us',              
    'Hmong': '',                   
    'Igbo': 'ng',                  
    'Javanese': 'id',              
    'Kinyarwanda': 'rw',           
    'Kurdish': 'tr',               
    'Kyrgyz': 'kg',                
    'Lao': 'la',
    'Latin': '',                   
    'Luxembourgish': 'lu',         
    'Macedonian': 'mk',            
    'Malagasy': 'mg',              
    'Maori': 'nz',                 
    'Myanmar (Burmese)': 'mm',     
    'Nyanja (Chichewa)': 'mw',      
    'Odia (Oriya)': 'in',          
    'Persian (Farsi)': 'ir',       
    'Samoan': 'ws',               
    'Scots Gaelic': 'gb',          
    'Sesotho': 'ls',               
    'Shona': 'zw',                
    'Sindhi': 'pk',               
    'Somali': 'so',               
    'Sundanese': 'id',             
    'Tatar': 'ru',                
    'Turkmen': 'tm',              
    'Urdu': 'pk',                 
    'Uyghur': 'cn',               
    'Xhosa': 'za',                
    'Yoruba': 'ng',               
    'Zulu': 'za'                  
  };

  return codeMap[language] || '';
}
    function getPersonalityIcon(personality) {
      const iconMap = {
        'Professional': 'fa-user-tie',
        'Casual': 'fa-user',
        'Creative': 'fa-paintbrush',
        'Technical': 'fa-code',
        'Friendly': 'fa-smile',
        'Academic': 'fa-graduation-cap',
        'Motivational': 'fa-lightbulb',
        'Concise': 'fa-ellipsis-h',
        'Storyteller': 'fa-book',
        'Sarcastic': 'fa-comments',
        'Empathetic': 'fa-heart',
        'Philosophical': 'fa-brain',
      };
      return iconMap[personality] || 'fa-user';
    }

    function closeModal() {
      const modal = document.querySelector('.modal-overlay');
      if (modal) {
        modal.classList.add('fade-out');
        setTimeout(() => modal.remove(), 200);
      }
    }

    function toggleLanguageSelector() {
      const options = document.getElementById('languageOptions');
      options.style.display = options.style.display === 'none' || options.style.display === '' ? 'block' : 'none';
    }

    function toggleThemeSelector() {
      const themeOptions = document.getElementById('themeOptions');
      themeOptions.style.display = themeOptions.style.display === 'none' || themeOptions.style.display === '' ? 'block' : 'none';
    }

    function changeLanguage(language) {
      STATE.currentLanguage = language;
      const languageSelector = document.getElementById('languageSelector');
      const languageSpan = languageSelector.querySelector('span');
      languageSpan.innerHTML = `

																															<i class="fa-solid fa-language"></i> Language: ${language}`;
      showNotification(`Language changed to ${language}`);
    }

    function changeTheme(theme) {
      STATE.theme = theme;
      document.documentElement.setAttribute('data-theme', theme);
      saveToLocalStorage(CONFIG.STORAGE_KEYS.THEME, theme);
      const themeSelector = document.getElementById('themeSelector');
      const themeSpan = themeSelector.querySelector('span');
      themeSpan.innerHTML = `

																															<i class="fa-solid fa-palette"></i> Select Theme: ${theme}`;
      document.getElementById('themeOptions').style.display = 'none';
      showNotification(`Theme changed to ${theme}`);
    }
function filterPersonalities(query) {
  const options = document.querySelectorAll('.personality-option');
  query = query.toLowerCase();
  options.forEach(option => {
    const name = option.getAttribute('data-personality').toLowerCase();
    option.style.display = name.includes(query) ? 'block' : 'none';
  });
}

    function toggleSetting(setting) {
      STATE.settings[setting] = !STATE.settings[setting];
      saveToLocalStorage(CONFIG.STORAGE_KEYS.SETTINGS, STATE.settings);
      const settingButton = document.querySelector(`[onclick="toggleSetting('${setting}')"]`);
      if (settingButton) {
        settingButton.textContent = `${setting.charAt(0).toUpperCase() + setting.slice(1)}: ${STATE.settings[setting] ? 'On' : 'Off'}`;
      }
      showNotification(`${setting} ${STATE.settings[setting] ? 'enabled' : 'disabled'}`);
      closeModal();
      showSettingsModal();
    }

    function playMessageSound() {
      if (!STATE.settings.soundEffects) return;
      const audio = new Audio('audios/notification.mp3');
      audio.volume = 0.5;
      audio.play().catch(err => console.log('Error playing sound', err));
    }

    function initializeTheme() {
      const savedTheme = localStorage.getItem(CONFIG.STORAGE_KEYS.THEME) || 'light';
      document.documentElement.setAttribute('data-theme', savedTheme);
      STATE.theme = savedTheme;
    }

function showAboutModal() {
  // Create the modal overlay
  const modal = document.createElement('div');
  modal.className = 'modal-overlay';

  // Set modal content
  modal.innerHTML = `
    <div class="modal-window">
      <div class="modal-header">
        <span class="modal-title">About PatheticAI</span>
        <button class="close-button" aria-label="Close modal">X</button>
      </div>
      <div class="modal-content">
        <p><strong>PatheticAI:</strong> 1.5</p>
        <br>
        <p><strong>Enhanced Features:</strong></p>
        <ul>
          <li>Improved message handling</li>
          <li>Better code display and copying</li>
          <li>Advanced editing capabilities</li>
          <li>Added Voice Input</li>
          <li>More Settings</li>
        </ul>
      </div>
      <div class="modal-footer">
        <button class="discord-button">
          <a href="https://discord.gg/Hb5ccPY3XV" target="_blank" rel="noopener noreferrer" aria-label="Join us on Discord">
            <i class="fab fa-discord" aria-hidden="true"></i> Join us on Discord
          </a>
        </button>
      </div>
    </div>
  `;

  // Close modal function
  function closeModal() {
    modal.classList.add('fade-out');
    setTimeout(() => modal.remove(), 300);
  }

  // Event listener to close the modal on click
  modal.addEventListener('click', (e) => {
    if (e.target === modal || e.target.classList.contains('close-button')) {
      closeModal();
    }
  });

  // Append modal to the body
  document.body.appendChild(modal);

  // Styling the discord button and footer
  const discordButton = modal.querySelector('.discord-button');
  const discordLink = modal.querySelector('.discord-button a');
  const modalFooter = modal.querySelector('.modal-footer');

  discordButton.style.marginTop = '20px';
  discordLink.style.textDecoration = 'none';
  discordLink.style.color = 'inherit';

  // Center footer contents
  modalFooter.style.display = 'flex';
  modalFooter.style.justifyContent = 'center';
  modalFooter.style.alignItems = 'center';
}

    function showSettingsHelp() {
      const modal = document.createElement('div');
      modal.className = 'modal-overlay';
      modal.innerHTML = `
    <div class="modal-window stylish-modal">
      <div class="modal-header">
        <span class="modal-title">Settings Help</span>
        <button class="close-button" aria-label="Close modal">&times;</button>
      </div>
      <div class="modal-content">
        <p><strong>Need help with settings?</strong> Here’s what you can customize:</p>
        <div class="help-section">
          <h3><i class="fa-solid fa-language"></i> Language</h3>
          <p>Select your preferred language from a wide range of options.</p>
        </div>
        <div class="help-section">
          <h3><i class="fa-solid fa-bell"></i> Notifications</h3>
          <p>Enable or disable desktop notifications and sound effects.</p>
        </div>
        <div class="help-section">
          <h3><i class="fa-solid fa-palette"></i> Theme</h3>
          <p>Switch between Light and Dark modes to suit your preference.</p>
        </div>
        <div class="help-section">
          <h3><i class="fa-solid fa-masks-theater"></i> Personalities</h3>
          <p>Choose different personalities to tailor the AI’s responses.</p>
        </div>
        <div class="help-section">
          <h3><i class="fa-solid fa-exclamation-triangle"></i> Danger Zone</h3>
          <p>Reset chat history, remove API keys, or clear cache.</p>
        </div>
      </div>
      <div class="modal-footer">
        <button class="primary-button">Got It!</button>
      </div>
    </div>
  `;

      function closeModal() {
        modal.classList.add('fade-out');
        setTimeout(() => modal.remove(), 300);
      }
      modal.addEventListener('click', (e) => {
        if (e.target === modal || e.target.classList.contains('close-button') || e.target.classList.contains('primary-button')) {
          closeModal();
        }
      });

      document.body.appendChild(modal);
    }

    function saveApiKey() {
      const apiKey = document.getElementById('apiKeyInput').value.trim();
      if (apiKey && apiKey.startsWith('sk-or-')) {
        localStorage.setItem('openRouterApiKey', apiKey);
        document.querySelector('.modal-overlay').remove();
        showNotification('Booting...');
        setTimeout(() => {
          window.location.reload();
        }, 1000);
      } else {
        showNotification('API key not suitable for PatheticAI...');
      }
    }

    function togglePersonalitySelector() {
      const options = document.getElementById('personalityOptions');
      options.style.display = options.style.display === 'none' || options.style.display === '' ? 'block' : 'none';
    }

    function changePersonality(personalityName) {
      const allPersonalities = [...PERSONALITIES, ...STATE.customPersonalities];
      const personality = allPersonalities.find(p => p.name === personalityName);
      if (personality) {
        STATE.selectedPersonality = personality;
        saveToLocalStorage(CONFIG.STORAGE_KEYS.PERSONALITY, personalityName);
        const personalitySelector = document.getElementById('personalitySelector');
        if (personalitySelector) {
          const personalitySpan = personalitySelector.querySelector('span');
          personalitySpan.innerHTML = `

																																		<i class="fa-solid fa-theater-masks"></i>‎ ‎ Personality: ${personalityName}`;
        }
        showNotification(`Personality changed to ${personalityName}`);
        closeModal();
        showSettingsModal();
      }
    }

    function loadCustomPersonalities() {
      try {
        const savedCustomPersonalities = localStorage.getItem(CONFIG.STORAGE_KEYS.CUSTOM_PERSONALITIES);
        if (savedCustomPersonalities) {
          STATE.customPersonalities = JSON.parse(savedCustomPersonalities);
        }
      } catch (error) {
        console.error('Error loading custom personalities:', error);
        STATE.customPersonalities = [];
      }
    }

    function addCustomPersonality(name, systemMessage) {
      const newPersonality = {
        name,
        systemMessage,
        isCustom: true
      };
      STATE.customPersonalities.push(newPersonality);
      saveCustomPersonalities();
      STATE.selectedPersonality = newPersonality;
      saveToLocalStorage(CONFIG.STORAGE_KEYS.PERSONALITY, name);
      return newPersonality;
    }

    function removeCustomPersonality(name) {
      STATE.customPersonalities = STATE.customPersonalities.filter(p => p.name !== name);
      saveCustomPersonalities();
    }

    function saveCustomPersonalities() {
      try {
        saveToLocalStorage(CONFIG.STORAGE_KEYS.CUSTOM_PERSONALITIES, STATE.customPersonalities);
      } catch (error) {
        console.error('Error saving custom personalities:', error);
        showNotification('Error saving custom personality');
      }
    }

    function removeCustomPersonality(name) {
      STATE.customPersonalities = STATE.customPersonalities.filter(p => p.name !== name);
      saveCustomPersonalities();
    }

    function saveNewCustomPersonality() {
      const nameInput = document.getElementById('customPersonalityName');
      const systemInput = document.getElementById('customPersonalitySystem');
      const name = nameInput.value.trim();
      const systemMessage = systemInput.value.trim();
      if (!name || !systemMessage) {
        showNotification('Please enter both name and system message');
        return;
      }
      if ([...PERSONALITIES, ...STATE.customPersonalities].some(p => p.name === name)) {
        showNotification('A personality with this name already exists');
        return;
      }
      addCustomPersonality(name, systemMessage);
      showNotification('Custom personality added');
      nameInput.value = '';
      systemInput.value = '';
      closeModal();
      showSettingsModal();
    }

    function changePersonality(personalityName) {
      const personality = [...PERSONALITIES, ...STATE.customPersonalities].find(p => p.name === personalityName);
      if (personality) {
        STATE.selectedPersonality = personality;
        localStorage.setItem(CONFIG.STORAGE_KEYS.PERSONALITY, personalityName);
        const personalitySelector = document.getElementById('personalitySelector').querySelector('span');
        personalitySelector.innerHTML = `

																																		<i class="fa-solid fa-theater-masks"></i>‎ ‎ Personality: ${personalityName}`;
        showNotification(`Personality changed to ${personalityName}`);
        closeModal();
        showSettingsModal();
      }
    }

    function removeApiKey() {
      localStorage.removeItem('openRouterApiKey');
      disableInput();
      showNotification('API Key Removed');
      location.reload();
    }

    function clearCache() {
      localStorage.removeItem('openRouterApiKey');
      localStorage.clear();
      sessionStorage.clear();
      document.cookie.split(';').forEach(function(c) {
        document.cookie = c
          .replace(/^ +/, '')
          .replace(/(?=\=)/, '=' + 'expired')
          .replace(/expires=.*$/, 'expires=Thu, 01 Jan 1970 00:00:00 GMT');
      });
      disableInput();
      showNotification('Data Cleared');
      location.reload();
    }

    function disableInput() {
      const textarea = document.getElementById('messageInput');
      const sendButton = document.querySelector('.chat-input-container button');
      textarea.disabled = true;
      sendButton.disabled = true;
      textarea.placeholder = 'Please enter API key in settings...';
    }

    function enableInput() {
      const textarea = document.getElementById('messageInput');
      const sendButton = document.querySelector('.chat-input-container button');
      textarea.disabled = false;
      sendButton.disabled = false;
      textarea.placeholder = 'Type your message...';
    }

    function showNotification(message) {
      if (!STATE.settings.notifications) return;
      const notification = document.createElement('div');
      notification.className = 'notification';
      notification.textContent = message;
      document.body.appendChild(notification);
      setTimeout(() => {
        notification.classList.add('fade-out');
        setTimeout(() => notification.remove(), 300);
      }, 2000);
    }

    function createTypingIndicator() {
      const typingElement = document.createElement('div');
      typingElement.className = 'chat-message bot typing-indicator';
      typingElement.innerHTML = `

																																		<div class="typing-container">
																																			<div class="typing-dots">
																																				<span></span>
																																				<span></span>
																																				<span></span>
																																			</div>
																																		</div>
  `;
      return typingElement;
    }
    const typingIndicatorStyles = `
  .typing-indicator {
    padding: var(--spacing-small);
    margin: var(--spacing-small) 0;
    border-radius: var(--border-radius);
    background: var(--message-background);
    width: fit-content;
    max-width: 100px;
  }

  .typing-container {
    padding: var(--spacing-small);
  }

  .typing-dots {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
  }

  .typing-dots span {
    width: 6px;
    height: 6px;
    background: var(--color);
    border-radius: 50%;
    opacity: 0.6;
    animation: typing-dot 1.4s infinite ease-in-out;
  }

  .typing-dots span:nth-child(1) { animation-delay: 0s; }
  .typing-dots span:nth-child(2) { animation-delay: 0.2s; }
  .typing-dots span:nth-child(3) { animation-delay: 0.4s; }

  @keyframes typing-dot {
    0%, 60%, 100% {
      transform: translateY(0);
      opacity: 0.6;
    }
    30% {
      transform: translateY(-4px);
      opacity: 1;
    }
  }

  [data-theme="Light"] .typing-dots span {
    background: var(--color);
  }

  [data-theme="Dark"] .typing-dots span {
    background: var(--color);
  }
`;
    const styleSheet = document.createElement("style");
    styleSheet.textContent = typingIndicatorStyles;
    document.head.appendChild(styleSheet);

    function showWelcomeMessage() {
      const existingMessages = document.querySelector('.chat-messages');
      const existingWelcomeMessage = Array.from(existingMessages.children).find(message => message.classList.contains('bot') && message.textContent.includes("Welcome to PatheticAI"));
      if (existingWelcomeMessage) return;
      const welcomeMessage = `👋 Welcome to PatheticAI! I'm here to help you with any questions or tasks you may have. Feel free to start our conversation!`;
      const {
        element
      } = createMessageElement(welcomeMessage, false);
      const resetLink = element.querySelector('.reset-chat-link');
      if (resetLink) {
        resetLink.addEventListener('click', resetChat);
      }
      existingMessages.appendChild(element);
    }

    function resetChat() {
      STATE.messageHistory = [];
      saveToLocalStorage(CONFIG.STORAGE_KEYS.MESSAGES, []);
      const chatMessages = document.querySelector('.chat-messages');
      chatMessages.innerHTML = '';
      showNotification('Chat history cleared');
      showWelcomeMessage();
    }
    document.addEventListener('DOMContentLoaded', function() {
      checkAndStoreApiKey();
    });

    function getApiKey() {
      const apiKey = localStorage.getItem('openRouterApiKey');
      return apiKey && apiKey.startsWith('sk-or-') ? apiKey : null;
    }

    function checkAndStoreApiKey() {
      if (!getApiKey()) {
        showApiKeyModal();
      }
    }

    function showApiKeyModal() {
      if (document.querySelector('.modal-overlay')) return;

      const modal = document.createElement('div');
      modal.className = 'modal-overlay';
      modal.innerHTML = `
        <div class="api-modal-window">
            <div class="modal-header">
                <span class="modal-title">
                    <i class="fas fa-key-skeleton" style="margin-right: 8px;"></i>
                    API Key Required
                </span>
                <button class="modal-close" aria-label="Close modal">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-content">
                <div class="info-section">
                    <div class="info-icon">
                        <i class="fas fa-info-circle"></i>
                    </div>
                    <p>To use PatheticAI, you need an API key from OpenRouter.</p>
                </div>

                <div class="input-container">
                    <div class="input-wrapper">
                        <input type="text" 
                            id="apiKeyInput" 
                            placeholder="Enter your API key (sk-or-v1-...)" 
                            autocomplete="off"
                            spellcheck="false">
                        <div class="input-validation">
                            <i class="fas fa-check-circle validation-icon"></i>
                        </div>
                    </div>
                    <div class="input-feedback"></div>
                </div>

                <button id="saveApiKeyButton" class="primary-button">
                    <span class="button-content">
                        <i class="fas fa-check"></i>
                        <span>Save API Key</span>
                    </span>
                    <div class="button-loader"></div>
                </button>

                <div class="action-buttons">
                    <button id="getKeyButton" class="secondary-button">
                        <i class="fas fa-key"></i>
                        <span>Get Key</span>
                    </button>
                    <button id="helpButton" class="secondary-button">
                        <i class="fas fa-book"></i>
                        <span>Help Guide</span>
                    </button>
                </div>
            </div>
        </div>
    `;

      document.body.appendChild(modal);

      requestAnimationFrame(() => {
        modal.classList.add('visible');
      });

      const closeButton = modal.querySelector('.modal-close');
      closeButton.addEventListener('click', () => {
        modal.classList.remove('visible');
        setTimeout(() => modal.remove(), 300);
      });

      const apiKeyInput = document.getElementById('apiKeyInput');
      const inputValidation = modal.querySelector('.input-validation');
      const inputFeedback = modal.querySelector('.input-feedback');

      apiKeyInput.addEventListener('input', (e) => {
        const value = e.target.value;
        if (value.startsWith('sk-or-v1-')) {
          inputValidation.classList.add('valid');
          inputFeedback.textContent = '';
        } else {
          inputValidation.classList.remove('valid');
          if (value && !value.startsWith('sk-or-v1-')) {
            inputFeedback.textContent = 'API key should start with "sk-or-v1-"';
          } else {
            inputFeedback.textContent = '';
          }
        }
      });

      const saveButton = document.getElementById('saveApiKeyButton');
      saveButton.addEventListener('click', async () => {
        const buttonContent = saveButton.querySelector('.button-content');
        const buttonLoader = saveButton.querySelector('.button-loader');

        saveButton.disabled = true;
        buttonContent.style.opacity = '0';
        buttonLoader.style.display = 'block';

        try {
          await saveApiKey();

          buttonContent.innerHTML = '<i class="fas fa-check"></i><span>Saved!</span>';
          saveButton.classList.add('success');
        } catch (error) {

          buttonContent.innerHTML = '<i class="fas fa-exclamation-triangle"></i><span>Error</span>';
          saveButton.classList.add('error');
        } finally {
          buttonLoader.style.display = 'none';
          buttonContent.style.opacity = '1';
          setTimeout(() => {
            saveButton.disabled = false;
            saveButton.classList.remove('success', 'error');
            buttonContent.innerHTML = '<i class="fas fa-check"></i><span>Save API Key</span>';
          }, 2000);
        }
      });

      document.getElementById('getKeyButton').addEventListener('click', () => {
        window.open('https://openrouter.ai/settings/keys', '_blank');
      });

      document.getElementById('helpButton').addEventListener('click', () => {
        window.open('/help', '_blank');
      });
    }

    const AudioManager = {
      sounds: {
        hover: new Audio('/audios/click.mp3'),
        send: new Audio('/audios/send.mp3'),
        receive: new Audio('/audios/receive.mp3'),
        click: new Audio('/audios/click.mp3'),
        notification: new Audio('/audios/notification.mp3')
      },
      volumes: {
        hover: 1,
        send: 1,
        receive: 1,
        click: 1,
        notification: 1
      },
      init() {
        Object.keys(this.sounds).forEach(soundName => {
          const audio = this.sounds[soundName];
          audio.volume = this.volumes[soundName];
          audio.preload = "auto";
        });
        document.querySelectorAll('button, .settings-button, .selector, .option').forEach(button => {
          button.addEventListener('mouseenter', () => this.playSound('hover'));
          button.addEventListener('click', () => this.playSound('click'));
        });
        const observer = new MutationObserver(mutations => {
          mutations.forEach(mutation => {
            mutation.addedNodes.forEach(node => {
              if (node.nodeType === 1) {
                node.querySelectorAll('button, .settings-button, .selector, .option').forEach(button => {
                  button.addEventListener('mouseenter', () => this.playSound('hover'));
                  button.addEventListener('click', () => this.playSound('click'));
                });
              }
            });
          });
        });
        observer.observe(document.body, {
          childList: true,
          subtree: true
        });
        const originalSendMessage = window.sendMessage;
        window.sendMessage = async function() {
          AudioManager.playSound('send');
          return originalSendMessage.apply(this, arguments);
        };
        const originalCreateMessageElement = window.createMessageElement;
        window.createMessageElement = function(message, isUser, timestamp) {
          if (!isUser) {
            AudioManager.playSound('receive');
          }
          return originalCreateMessageElement(message, isUser, timestamp);
        };
        const originalShowNotification = window.showNotification;
        window.showNotification = function(message) {
          AudioManager.playSound('notification');
          return originalShowNotification(message);
        };
      },
      playSound(soundName) {
        if (!STATE.settings.soundEffects) return;
        const sound = this.sounds[soundName];
        if (sound) {
          sound.volume = this.volumes[soundName];
          sound.currentTime = 0;
          sound.play().catch(err => console.log(`Error playing sound '${soundName}':`, err));
        }
      },
      setVolume(soundName, volume) {
        if (this.sounds[soundName]) {
          this.sounds[soundName].volume = Math.max(0, Math.min(1, volume));
          console.log(`Volume set: ${soundName} = ${this.sounds[soundName].volume}`);
        }
      }
    };

    function discordButton() {
      window.open("https://discord.gg/Hb5ccPY3XV", "_blank");
    }
    document.addEventListener('DOMContentLoaded', () => {
      AudioManager.init();
      loadCustomPersonalities();
    });
    </script>