diff --git a/frontend/index.html b/frontend/index.html
index fa307b2d..ef83ec2e 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -66,6 +66,7 @@
     *,
     *::before,
     *::after {
+      box-shadow: border-box;
       box-sizing: border-box;
       margin: 0;
       padding: 0
@@ -327,6 +328,8 @@
    HERO
 ═══════════════════════════════════════════════════════════════ */
     .hero {
+      position: relative;
+      overflow: hidden;
       text-align: center;
       padding: 64px 0 48px;
       animation: heroEnter 0.7s ease both;
@@ -359,6 +362,8 @@
       text-transform: uppercase;
       margin-bottom: 28px;
       animation: badgePop 0.5s 0.1s ease both;
+      position: relative;
+      z-index: 1;
     }
 
     @keyframes badgePop {
@@ -400,6 +405,8 @@
       letter-spacing: -0.04em;
       line-height: 1.16;
       margin-bottom: 20px;
+      position: relative;
+      z-index: 1;
     }
 
     .hero h1 em {
@@ -417,13 +424,17 @@
       max-width: 520px;
       margin: 0 auto 36px;
       line-height: 1.7;
+      position: relative;
+      z-index: 1;
     }
 
     .hero-cta {
       display: flex;
       gap: 12px;
       justify-content: center;
-      flex-wrap: wrap
+      flex-wrap: wrap;
+      position: relative;
+      z-index: 1;
     }
 
     .btn {
@@ -737,7 +748,7 @@
       min-height: 300px;
       max-height: 500px;
       height: 100%;
-      }
+    }
 
     #codeEditor {
       width: 100%;
@@ -1050,35 +1061,39 @@
     .issue-card:hover {
       transform: translateX(3px)
     }
-  .collapsible-summary {
-  cursor: pointer;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-weight: 600;
-  list-style: none;
-  font-size: 0.78rem;
-}
-
-.collapsible-summary::-webkit-details-marker {
-  display: none;
-}
-.collapsible-summary::before {
-  content: "▶";
-  margin-right: 8px;
-  font-size: 12px;
-}
-
-details[open] > .collapsible-summary::before {
-  content: "▼";
-}
-.issue-content {
-  margin-top: 12px;
-}
-
-details.issue-card[open] {
-  border-left-width: 5px;
-}
+    
+    .collapsible-summary {
+      cursor: pointer;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-weight: 600;
+      list-style: none;
+      font-size: 0.78rem;
+    }
+
+    .collapsible-summary::-webkit-details-marker {
+      display: none;
+    }
+    
+    .collapsible-summary::before {
+      content: "▶";
+      margin-right: 8px;
+      font-size: 12px;
+    }
+
+    details[open] > .collapsible-summary::before {
+      content: "▼";
+    }
+    
+    .issue-content {
+      margin-top: 12px;
+    }
+
+    details.issue-card[open] {
+      border-left-width: 5px;
+    }
+    
     @keyframes cardIn {
       from {
         opacity: 0;
@@ -1413,4467 +1428,16 @@
       align-items: center;
       gap: 8px 12px;
       padding: 12px 14px;
-      list-style: none
+      list-style: none;
     }
 
     .zip-file-card summary::-webkit-details-marker {
-      display: none
-    }
-
-    .zip-file-card summary::before {
-      content: ">";
-      color: var(--text3);
-      font-size: 0.75rem;
-      transition: transform 0.18s ease
-    }
-
-    .zip-file-card[open] summary::before {
-      transform: rotate(90deg)
-    }
-
-    .zip-file-name {
-      font-family: var(--font-mono);
-      font-size: 0.82rem;
-      color: var(--text)
-    }
-
-    .zip-file-meta {
-      color: var(--text3);
-      font-size: 0.74rem;
-      margin-left: auto
-    }
-
-    .zip-file-body {
-      border-top: 1px solid var(--border);
-      padding: 12px 14px;
-      color: var(--text2);
-      font-size: 0.84rem
-    }
-
-    .zip-mini-grid {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px;
-      margin: 10px 0
-    }
-
-    .zip-mini-grid span,
-    .zip-skipped {
-      border: 1px solid var(--border);
-      border-radius: var(--r2);
-      background: var(--bg);
-      color: var(--text3);
-      font-size: 0.74rem;
-      padding: 5px 8px
-    }
-
-    .zip-issue {
-      border-left: 3px solid var(--border2);
-      background: var(--bg);
-      border-radius: var(--r2);
-      margin-top: 8px;
-      padding: 9px 10px
-    }
-
-    .zip-issue.error {
-      border-left-color: var(--red)
-    }
-
-    .zip-issue.warning {
-      border-left-color: var(--yellow)
-    }
-
-    .zip-issue.info {
-      border-left-color: var(--accent)
-    }
-
-    .zip-issue strong {
-      color: var(--text);
-      font-size: 0.78rem
-    }
-
-    .zip-issue span {
-      float: right;
-      color: var(--text3);
-      font-size: 0.72rem
-    }
-
-    .zip-issue p {
-      margin-top: 5px
-    }
-
-    .suggest-header {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      margin-bottom: 6px;
-    }
-
-    .suggest-cat {
-      font-size: 0.7rem;
-      font-weight: 700;
-      letter-spacing: 0.05em;
-      text-transform: uppercase;
-      padding: 2px 8px;
-      border-radius: 99px;
-    }
-
-    .priority-high .suggest-cat {
-      background: rgba(242, 87, 87, 0.12);
-      color: var(--red)
-    }
-
-    .priority-medium .suggest-cat {
-      background: rgba(245, 200, 66, 0.12);
-      color: var(--yellow)
-    }
-
-    .priority-low .suggest-cat {
-      background: rgba(34, 212, 123, 0.12);
-      color: var(--green)
-    }
-
-    .suggest-title {
-      font-size: 0.78rem;
-      font-weight: 500
-    }
-
-    .suggest-desc {
-      font-size: 0.82rem;
-      color: var(--text2);
-      margin-bottom: 8px;
-      line-height: 1.5
-    }
-
-    .suggest-example {
-      font-family: var(--font-mono);
-      font-size: 0.73rem;
-      background: var(--bg);
-      padding: 8px 12px;
-      border-radius: 6px;
-      border: 1px solid var(--border);
-      color: var(--text2);
-      white-space: pre;
-      overflow-x: auto;
-    }
-
-    /* ── Diff View ── */
-    .diff-wrapper {
-      margin-top: 10px;
-      border-radius: var(--r2);
-      border: 1px solid var(--border);
-      overflow: hidden;
-      font-family: var(--font-mono);
-      font-size: 0.72rem;
-    }
-
-    .diff-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 6px 12px;
-      background: var(--bg3);
-      border-bottom: 1px solid var(--border);
-      font-size: 0.7rem;
-      color: var(--text3);
-      font-family: var(--font-ui);
-      gap: 8px;
-    }
-
-    .diff-header-labels {
-      display: flex;
-      gap: 16px;
-      flex: 1;
-    }
-
-    .diff-label {
-      display: flex;
-      align-items: center;
-      gap: 5px;
-      font-weight: 600;
-      font-size: 0.68rem;
-      text-transform: uppercase;
-      letter-spacing: 0.04em;
-    }
-
-    .diff-label-dot {
-      width: 7px;
-      height: 7px;
-      border-radius: 50%;
-    }
-
-    .diff-label-before .diff-label-dot { background: var(--red); }
-    .diff-label-after  .diff-label-dot { background: var(--green); }
-
-    .diff-view {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      border-top: none;
-    }
-
-    @media (max-width: 640px) {
-      .diff-view {
-        grid-template-columns: 1fr;
-      }
-      .diff-col:first-child {
-        border-right: none;
-        border-bottom: 1px solid var(--border);
-      }
-    }
-
-    .diff-col {
-      overflow-x: auto;
-      background: var(--bg);
-    }
-
-    .diff-col:first-child {
-      border-right: 1px solid var(--border);
-    }
-
-    .diff-line {
-      display: flex;
-      align-items: flex-start;
-      padding: 2px 0;
-      min-height: 22px;
-      line-height: 1.6;
-      white-space: pre;
-    }
-
-    .diff-line-num {
-      min-width: 32px;
-      padding: 0 6px;
-      text-align: right;
-      color: var(--text3);
-      user-select: none;
-      font-size: 0.65rem;
-      flex-shrink: 0;
-      border-right: 1px solid var(--border);
-      margin-right: 8px;
-      line-height: 1.6;
-    }
-
-    .diff-line-content {
-      padding-right: 12px;
-      word-break: break-all;
-      white-space: pre-wrap;
-    }
-
-    .diff-line-removed {
-      background: rgba(242, 87, 87, 0.13);
-    }
-
-    .diff-line-removed .diff-line-num {
-      background: rgba(242, 87, 87, 0.18);
-      color: var(--red);
-    }
-
-    .diff-line-removed .diff-line-content {
-      color: var(--red);
-    }
-
-    .diff-line-added {
-      background: rgba(34, 212, 123, 0.10);
-    }
-
-    .diff-line-added .diff-line-num {
-      background: rgba(34, 212, 123, 0.15);
-      color: var(--green);
-    }
-
-    .diff-line-added .diff-line-content {
-      color: var(--green);
-    }
-
-    .diff-line-equal {
-      background: transparent;
-    }
-
-    .diff-line-equal .diff-line-content {
-      color: var(--text2);
-    }
-
-    .diff-line-placeholder {
-      background: var(--bg3);
-      opacity: 0.4;
-    }
-
-    .btn-copy-fix {
-      display: inline-flex;
-      align-items: center;
-      gap: 5px;
-      padding: 4px 10px;
-      border-radius: 6px;
-      font-size: 0.7rem;
-      font-weight: 600;
-      font-family: var(--font-ui);
-      cursor: pointer;
-      border: 1px solid rgba(34, 212, 123, 0.3);
-      background: rgba(34, 212, 123, 0.08);
-      color: var(--green);
-      transition: all var(--transition);
-      white-space: nowrap;
-      flex-shrink: 0;
-    }
-
-    .btn-copy-fix:hover {
-      background: rgba(34, 212, 123, 0.18);
-      border-color: var(--green);
-      transform: translateY(-1px);
-    }
-
-    .btn-copy-fix:active {
-      transform: translateY(0);
-    }
-
-    .btn-copy-fix svg {
-      flex-shrink: 0;
-    }
-
-    /* ── Clean State ── */
-    .clean-state {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      padding: 40px;
-      gap: 12px;
-      text-align: center;
-    }
-
-    .clean-icon {
-      font-size: 40px;
-      animation: cleanBounce 0.5s ease both
+      display: none;
     }
+  </style>
+</head>
 
-    @keyframes cleanBounce {
-      from {
-        transform: scale(0.5)
-      }
-
-      to {
-        transform: scale(1)
-      }
-    }
-
-    .clean-state .clean-title {
-      font-family: var(--font-disp);
-      font-size: 1.1rem;
-      font-weight: 700;
-      color: var(--green)
-    }
-
-    .clean-state p {
-      font-size: 0.85rem;
-      color: var(--text2)
-    }
-
-    /* ═══════════════════════════════════════════════════════════════
-   BOTTOM PANELS — History & Favorites
-═══════════════════════════════════════════════════════════════ */
-    .bottom-grid {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 16px;
-      animation: fadeUp 0.6s 0.5s ease both;
-    }
-
-    @media(max-width:700px) {
-      .bottom-grid {
-        grid-template-columns: 1fr
-      }
-    }
-
-    .history-list,
-    .fav-list {
-      padding: 16px;
-      min-height: 120px;
-      max-height: 280px;
-      overflow-y: auto;
-    }
-
-    .history-item,
-    .fav-item {
-      padding: 10px 14px;
-      border-radius: var(--r2);
-      border: 1px solid var(--border);
-      margin-bottom: 8px;
-      cursor: pointer;
-      transition: all var(--transition);
-      display: flex;
-      align-items: center;
-      gap: 10px;
-    }
-
-    .history-item:hover,
-    .fav-item:hover {
-      background: var(--bg3);
-      border-color: var(--border2);
-    }
-    
-/* Delete button */
-    .delete-btn {
-      border: none;
-      outline: none;
-      box-shadow: none;
-      background: transparent;
-      color: var(--text-3);
-      cursor: pointer;
-      padding: 4px;
-      margin-left: 8px;
-      border-radius: 6px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: all var(--transition);
-    }
-    .delete-btn:focus,
-    .delete-btn:focus-visible {
-      outline: none;
-      box-shadow: none;
-    }
-    .delete-btn:hover { color: #ef4444; background: rgba(239, 68, 68, 0.12);
-    }
-    .delete-btn svg { width: 16px; height: 16px;
-    }
-    .history-thumb {
-      font-family: var(--font-mono);
-      font-size: 0.72rem;
-      color: var(--text3);
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      flex: 1;
-    }
-
-    .history-meta {
-      font-size: 0.7rem;
-      color: var(--text3);
-      flex-shrink: 0
-    }
-
-    .history-lang {
-      font-size: 0.65rem;
-      font-weight: 700;
-      padding: 2px 7px;
-      border-radius: 99px;
-      background: var(--bg3);
-      color: var(--accent);
-      border: 1px solid rgba(91, 156, 246, 0.2);
-      flex-shrink: 0;
-    }
-
-    .history-score {
-      font-size: 0.65rem;
-      font-weight: 700;
-      padding: 2px 6px;
-      border-radius: 4px;
-      flex-shrink: 0;
-    }
-    .history-score.score-good {
-      background: rgba(34, 212, 123, 0.15);
-      color: var(--green);
-      border: 1px solid rgba(34, 212, 123, 0.25);
-    }
-    .history-score.score-warn {
-      background: rgba(245, 200, 66, 0.15);
-      color: var(--yellow);
-      border: 1px solid rgba(245, 200, 66, 0.25);
-    }
-    .history-score.score-bad {
-      background: rgba(242, 87, 87, 0.15);
-      color: var(--red);
-      border: 1px solid rgba(242, 87, 87, 0.25);
-    }
-
-    .history-issues {
-      font-size: 0.65rem;
-      font-weight: 700;
-      padding: 2px 6px;
-      border-radius: 4px;
-      flex-shrink: 0;
-    }
-    .history-issues.issues-clean {
-      background: rgba(34, 212, 123, 0.15);
-      color: var(--green);
-      border: 1px solid rgba(34, 212, 123, 0.25);
-    }
-    .history-issues.issues-exist {
-      background: rgba(242, 87, 87, 0.15);
-      color: var(--red);
-      border: 1px solid rgba(242, 87, 87, 0.25);
-    }
-
-    .btn-clear {
-      padding: 6px 14px;
-      border-radius: var(--r2);
-      background: none;
-      border: 1px solid var(--border);
-      color: var(--text3);
-      font-size: 0.75rem;
-      cursor: pointer;
-      transition: all var(--transition);
-    }
-
-    .btn-clear:hover {
-      border-color: var(--red);
-      color: var(--red)
-    }
-
-    .list-empty {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: 80px;
-      font-size: 0.82rem;
-      color: var(--text3);
-    }
-
-    /* ═══════════════════════════════════════════════════════════════
-   API CONFIG
-═══════════════════════════════════════════════════════════════ */
-    .api-config-row {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-      padding: 12px 18px;
-      border-top: 1px solid var(--border);
-      font-size: 0.78rem;
-    }
-
-    .api-config-inner {
-      display: flex;
-      align-items: center;
-      gap: 8px
-    }
-
-    .api-status {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      color: var(--text3)
-    }
-
-    .api-dot {
-      width: 7px;
-      height: 7px;
-      border-radius: 50%;
-      background: var(--text3);
-      animation: blink 2s infinite;
-    }
-
-    .api-dot.connected {
-      background: var(--green)
-    }
-
-    #apiUrl {
-      flex: 1;
-      padding: 7px 12px;
-      border-radius: var(--r2);
-      background: var(--bg);
-      border: 1px solid var(--border);
-      color: var(--text);
-      font-size: 0.78rem;
-      font-family: var(--font-mono);
-      outline: none;
-      transition: border-color var(--transition);
-    }
-
-    #apiUrl:focus {
-      border-color: var(--accent)
-    }
-
-    /* ═══════════════════════════════════════════════════════════════
-   TOAST
-═══════════════════════════════════════════════════════════════ */
-    #toastContainer {
-      position: fixed;
-      bottom: 24px;
-      right: 24px;
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-      z-index: 9999;
-    }
-
-    .toast {
-      padding: 12px 18px;
-      border-radius: var(--r2);
-      background: var(--bg2);
-      border: 1px solid var(--border2);
-      box-shadow: var(--shadow);
-      font-size: 0.84rem;
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      min-width: 220px;
-      animation: toastIn 0.3s ease;
-      color: var(--text);
-    }
-
-    @keyframes toastIn {
-      from {
-        opacity: 0;
-        transform: translateY(10px) scale(0.95)
-      }
-
-      to {
-        opacity: 1;
-        transform: none
-      }
-    }
-
-    .toast.fadeout {
-      animation: toastOut 0.3s ease forwards
-    }
-
-    @keyframes toastOut {
-      to {
-        opacity: 0;
-        transform: translateY(10px) scale(0.95)
-      }
-    }
-
-    .toast-icon {
-      display: flex;
-      align-items: center;
-      flex-shrink: 0
-    }
-
-    /* ═══════════════════════════════════════════════════════════════
-   LOADING SHIMMER
-═══════════════════════════════════════════════════════════════ */
-    .shimmer-card {
-      height: 80px;
-      border-radius: var(--r2);
-      background: linear-gradient(90deg, var(--bg3) 25%, var(--bg2) 50%, var(--bg3) 75%);
-      background-size: 200% 100%;
-      animation: shimmer 1.4s ease infinite;
-      margin-bottom: 10px;
-    }
-
-    @keyframes shimmer {
-      0% {
-        background-position: 200% 0
-      }
-
-      100% {
-        background-position: -200% 0
-      }
-    }
-
-    /* ═══════════════════════════════════════════════════════════════
-   FOOTER
-═══════════════════════════════════════════════════════════════ */
-    footer {
-      text-align: center;
-      padding: 32px 0 24px;
-      border-top: 1px solid var(--border);
-      margin-top: 40px;
-      color: var(--text3);
-      font-size: 0.82rem;
-    }
-
-    footer a {
-      color: var(--text3);
-      text-decoration: none;
-      transition: color var(--transition)
-    }
-
-    footer a:hover {
-      color: var(--accent)
-    }
-
-    .footer-logo {
-      font-family: var(--font-disp);
-      font-size: 1.1rem;
-      font-weight: 800;
-      color: var(--text2);
-      margin-bottom: 8px;
-    }
-
-    /* ═══════════════════════════════════════════════════════════════
-   RESULT ACTIONS BAR
-═══════════════════════════════════════════════════════════════ */
-    .result-actions {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      padding: 10px 16px;
-      border-top: 1px solid var(--border);
-    }
-
-    .result-actions .icon-btn {
-      font-size: 11px;
-      gap: 4px;
-      width: auto;
-      padding: 0 10px;
-      height: 28px
-    }
-
-    /* ═══════════════════════════════════════════════════════════════
-   STAT BAR (quick summary at top of result)
-═══════════════════════════════════════════════════════════════ */
-.stat-bar{
-  display:flex;gap:8px;flex-wrap:wrap;
-  margin-bottom:16px;
-}
-.stat-chip{
-  flex:1;min-width:80px;
-  padding:10px 14px;border-radius:var(--r2);
-  background:var(--bg3);border:1px solid var(--border);
-  text-align:center;
-}
-.stat-chip-num{
-  font-family:var(--font-disp);font-size:1.4rem;font-weight:800;
-  line-height:1;
-}
-.stat-chip-label{font-size:0.7rem;color:var(--text3);margin-top:2px}
-.stat-chip.error-chip .stat-chip-num{color:var(--red)}
-.stat-chip.warn-chip .stat-chip-num{color:var(--yellow)}
-.stat-chip.info-chip .stat-chip-num{color:var(--accent)}
-
-/* responsive */
-@media(max-width:600px){
-  .hero h1{font-size:2.2rem}
-  nav{flex-wrap:wrap;gap:8px}
-  .nav-links .nav-link span{display:none}
-  .hero{padding:50px 0 40px}
-  .hero-sub{font-size:0.98rem}
-  .features-row{display:flex;flex-direction:column;gap:8px;max-width:340px;margin-inline:auto;padding:16px 0 40px}
-  .feat-pill{gap:10px;padding:10px 14px;min-width:0}
-  .feat-pill-icon{width:32px;height:32px;flex-shrink:0}
-  .feat-pill-info{min-width:0;overflow-wrap:break-word}
-  .feat-pill-info .feat-pill-title{font-size:0.82rem;line-height:1.25}
-  .feat-pill-info p{font-size:0.74rem;line-height:1.25}
-  .workspace{gap:14px}
-  #workspace > .panel{grid-column:1 !important;min-width:0}
-  .panel-header{padding:12px 14px}
-  .mode-row{gap:6px;padding:10px 14px}
-  .mode-btn{padding:8px 4px;font-size:0.74rem}
-  .analyze-row{padding:10px 14px}
-  .btn-analyze{padding:14px}
-  .result-content{min-height:280px;max-height:420px;padding:14px}
-  .bottom-grid{gap:14px}
-  .history-list,.fav-list{max-height:200px}
-  .score-ring-wrap{flex-direction:column;text-align:center;gap:12px}
-  .stat-bar{gap:6px}
-  .stat-chip{padding:8px 10px}
-  .stat-chip-num{font-size:1.2rem}
-  #toastContainer{bottom:12px;right:12px;left:12px}
-  .toast{min-width:unset;width:100%}
-  .hero-cta{gap:8px}
-  .btn{padding:11px 18px;font-size:0.85rem}
-}
-@media(max-width:400px){
-  .app{padding:0 14px 60px}
-  .hero h1{font-size:1.9rem}
-  .lang-tab{padding:7px 10px;font-size:0.72rem}
-  .result-tab{padding:9px 12px;font-size:0.75rem}
-}
-
-/* ── Live Collaboration ── */
-.collab-toolbar-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 7px;
-  min-height: 30px;
-  padding: 5px 10px;
-  border: 1px solid var(--border);
-  border-radius: var(--r2);
-  background: var(--bg3);
-  color: var(--text2);
-  font-family: var(--font-ui);
-  font-size: 0.76rem;
-  font-weight: 700;
-  cursor: pointer;
-  transition: all var(--transition);
-}
-
-.collab-toolbar-btn:hover,
-.collab-toolbar-btn[aria-expanded="true"] {
-  color: var(--text);
-  border-color: var(--accent);
-  background: rgba(91, 156, 246, 0.1);
-}
-
-.collab-status-dot {
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  background: var(--text3);
-}
-
-.collab-status-dot.connected {
-  background: var(--green);
-  box-shadow: 0 0 0 4px rgba(34, 212, 123, 0.12);
-}
-
-.collab-user-count {
-  min-width: 18px;
-  padding: 1px 5px;
-  border-radius: 999px;
-  background: var(--bg);
-  color: var(--text3);
-  text-align: center;
-}
-
-.collab-backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: 1090;
-  background: rgba(0, 0, 0, 0.34);
-  backdrop-filter: blur(2px);
-}
-
-.collab-drawer {
-  position: fixed;
-  top: 0;
-  right: 0;
-  z-index: 1100;
-  width: min(390px, 92vw);
-  height: 100vh;
-  overflow-y: auto;
-  padding: 18px;
-  background: var(--bg2);
-  border-left: 1px solid var(--border);
-  box-shadow: -18px 0 45px rgba(0, 0, 0, 0.25);
-  transform: translateX(105%);
-  visibility: hidden;
-  transition: transform 0.24s ease, visibility 0.24s ease;
-}
-
-.collab-drawer.open {
-  transform: translateX(0);
-  visibility: visible;
-}
-
-.collab-drawer-header {
-  display: flex;
-  justify-content: space-between;
-  gap: 12px;
-  padding-bottom: 14px;
-  border-bottom: 1px solid var(--border);
-}
-
-.collab-drawer-header h2 {
-  margin: 0 0 4px;
-  font-family: var(--font-disp);
-  font-size: 1rem;
-}
-
-.collab-drawer-header p {
-  margin: 0;
-  color: var(--text3);
-  font-size: 0.75rem;
-}
-
-.collab-close-btn {
-  width: 32px;
-  height: 32px;
-  border: 1px solid var(--border);
-  border-radius: var(--r2);
-  background: var(--bg3);
-  color: var(--text2);
-  cursor: pointer;
-}
-
-.collab-close-btn:hover {
-  color: var(--text);
-  border-color: var(--accent);
-}
-
-.collab-drawer-section {
-  padding: 16px 0;
-  border-bottom: 1px solid var(--border);
-}
-
-.collab-section-heading {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 10px;
-  color: var(--text2);
-  font-size: 0.78rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-
-.collab-panel-top,
-.collab-comment-row {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 8px;
-}
-
-.collab-comment-row {
-  margin-top: 10px;
-}
-
-.collab-drawer input {
-  width: 100%;
-  padding: 9px 10px;
-  border-radius: var(--r2);
-  border: 1px solid var(--border);
-  background: var(--bg3);
-  color: var(--text);
-  font-family: var(--font-ui);
-  font-size: 0.8rem;
-}
-
-.collab-drawer button {
-  padding: 9px 12px;
-  border-radius: var(--r2);
-  border: 1px solid var(--border2);
-  background: rgba(91, 156, 246, 0.12);
-  color: var(--accent);
-  cursor: pointer;
-  font-weight: 700;
-  font-size: 0.78rem;
-}
-
-.collab-drawer button:hover:not(:disabled) {
-  border-color: var(--accent);
-}
-
-.collab-drawer button:disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
-}
-
-.collab-status {
-  margin-top: 8px;
-  font-size: 0.74rem;
-  color: var(--text2);
-}
-
-.collab-notice {
-  margin-top: 14px;
-  padding: 10px 12px;
-  border: 1px solid rgba(245, 146, 62, 0.4);
-  border-radius: var(--r2);
-  background: rgba(245, 146, 62, 0.12);
-  color: var(--text);
-  font-size: 0.78rem;
-  line-height: 1.45;
-}
-
-.collab-users {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  margin-top: 8px;
-}
-
-.collab-user-pill {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 4px 8px;
-  border-radius: 999px;
-  background: var(--bg3);
-  border: 1px solid var(--border);
-  font-size: 0.72rem;
-  color: var(--text2);
-}
-
-.collab-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-}
-
-.collab-comments {
-  margin-top: 10px;
-  display: grid;
-  gap: 6px;
-}
-
-.collab-comment {
-  padding: 8px;
-  border-radius: var(--r2);
-  background: var(--bg3);
-  border: 1px solid var(--border);
-  font-size: 0.76rem;
-  color: var(--text2);
-}
-
-.collab-comment strong {
-  color: var(--text);
-}
-
-.collab-line-input {
-  max-width: 100%;
-}
-
-.collab-editor-shell {
-  position: relative;
-  flex: 1;
-  min-width: 0;
-  height: 100%;
-}
-
-.collab-editor-shell textarea {
-  width: 100%;
-  height: 100%;
-}
-
-.remote-cursor-layer {
-  position: absolute;
-  inset: 0;
-  z-index: 4;
-  overflow: hidden;
-  pointer-events: none;
-}
-
-.remote-cursor {
-  position: absolute;
-  width: 2px;
-  height: 22px;
-  border-radius: 1px;
-  pointer-events: none;
-}
-
-.remote-cursor-label {
-  position: absolute;
-  left: 0;
-  bottom: 100%;
-  max-width: 130px;
-  padding: 2px 5px;
-  border-radius: 4px 4px 4px 0;
-  color: #fff;
-  font-family: var(--font-ui);
-  font-size: 10px;
-  font-weight: 700;
-  line-height: 1.3;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-</style>
-<link rel="icon" href="data:,">
-<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
-</head>
 <body>
-  <div class="bg-orb bg-orb-1"></div>
-  <div class="bg-orb bg-orb-2"></div>
-
-  <div class="app">
-
-    <!-- ── NAV ──────────────────────────────────────────────────── -->
-    <nav>
-      <a href="#" class="nav-logo">
-        <div class="logo-hex">Q</div>
-        QyverixAI
-        <span
-          style="font-size:0.62rem;font-weight:700;padding:2px 8px;border-radius:99px;background:rgba(91,156,246,0.15);color:var(--accent);border:1px solid rgba(91,156,246,0.25);letter-spacing:0.04em;margin-left:4px">v3.0</span>
-      </a>
-      <div class="nav-links">
-        <select id="langSelect" class="lang-select" aria-label="Select Language" data-i18n-aria-label="lang_select_label">
-          <option value="en" data-i18n="lang_option_en">English</option>
-          <option value="ta" data-i18n="lang_option_ta">தமிழ் (Tamil)</option>
-          <option value="hi" data-i18n="lang_option_hi">हिन्दी (Hindi)</option>
-          <option value="fr" data-i18n="lang_option_fr">Français (French)</option>
-        </select>
-        <a href="https://github.com/imDarshanGK/AI-dev-assistant" target="_blank" class="nav-link">
-          <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor">
-            <path
-              d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.44 9.8 8.2 11.38.6.11.82-.26.82-.58v-2.03c-3.34.73-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.08-.73.08-.73 1.2.08 1.83 1.23 1.83 1.23 1.07 1.83 2.8 1.3 3.48 1 .11-.78.42-1.3.76-1.6-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.13-.3-.54-1.52.12-3.18 0 0 1.01-.32 3.3 1.23a11.5 11.5 0 0 1 3-.4c1.02 0 2.04.13 3 .4 2.28-1.55 3.29-1.23 3.29-1.23.66 1.66.25 2.88.12 3.18.77.84 1.24 1.91 1.24 3.22 0 4.61-2.81 5.63-5.48 5.92.43.37.81 1.1.81 2.22v3.29c0 .32.22.7.83.58C20.57 21.8 24 17.3 24 12c0-6.63-5.37-12-12-12z" />
-          </svg>
-          <span data-i18n="nav_github">GitHub</span>
-        </a>
-        <a href="https://qyverixai.onrender.com/docs" target="_blank" class="nav-link">
-          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-            <polyline points="14,2 14,8 20,8" />
-          </svg>
-          <span data-i18n="nav_api_docs">API Docs</span>
-        </a>
-        <button class="theme-btn" id="themeToggle" title="Toggle theme" data-i18n-title="btn_toggle_theme" data-i18n-aria-label="btn_toggle_theme" aria-label="Toggle dark mode"
-          aria-pressed="false">
-          <svg id="themeIcon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-            stroke-width="2" aria-hidden="true">
-            <circle cx="12" cy="12" r="5" />
-            <line x1="12" y1="1" x2="12" y2="3" />
-            <line x1="12" y1="21" x2="12" y2="23" />
-            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
-            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
-            <line x1="1" y1="12" x2="3" y2="12" />
-            <line x1="21" y1="12" x2="23" y2="12" />
-            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
-            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
-          </svg>
-        </button>
-      </div>
-    </nav>
-
-    <!-- ── HERO ──────────────────────────────────────────────────── -->
-    <section class="hero">
-      <div class="hero-badge">
-        <div class="badge-dot"></div>
-        <span data-i18n="hero_badge">Open Source · AI-Powered · Free</span>
-      </div>
-      <h1 data-i18n="hero_title">Debug. Understand.<br><em>Ship faster.</em></h1>
-      <p class="hero-sub" data-i18n="hero_subtitle">
-        Paste your code and get instant bug detection, plain-English explanations, and actionable improvement
-        suggestions — no account needed.
-      </p>
-      <div class="hero-cta">
-        <button class="btn btn-primary"
-          onclick="document.getElementById('workspace').scrollIntoView({behavior:'smooth'})">
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-            <polygon points="5,3 19,12 5,21" />
-          </svg>
-          <span data-i18n="btn_start_analyzing">Start Analyzing</span>
-        </button>
-        <button class="btn btn-secondary" onclick="loadSample()">
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <polyline points="16,18 22,12 16,6" />
-            <polyline points="8,6 2,12 8,18" />
-          </svg>
-          <span data-i18n="btn_try_sample">Try Sample Code</span>
-        </button>
-        <a href="https://github.com/imDarshanGK/AI-dev-assistant" target="_blank" class="btn btn-secondary">
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-            <path
-                d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 3a7 7 0 1 1-7 7 7 7 0 0 1 7-7zm-1 4h2v6h-2zm0 7h2v2h-2z" />
-          </svg>
-          <span data-i18n="btn_star_github">Star on GitHub</span>
-        </a>
-      </div>
-    </section>
-
-    <!-- ── FEATURE PILLS ─────────────────────────────────────────── -->
-    <div class="features-row">
-      <div class="feat-pill">
-        <div class="feat-pill-icon" style="background:rgba(34,212,123,0.12)"><svg width="15" height="15"
-            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <circle cx="11" cy="11" r="8" />
-            <line x1="21" y1="21" x2="16.65" y2="16.65" />
-          </svg></div>
-        <div class="feat-pill-info">
-          <p class="feat-pill-title" data-i18n="pill_patterns_title">40+ Bug Patterns</p>
-          <p data-i18n="pill_patterns_desc">Python, JS, TS, Java, C++</p>
-        </div>
-      </div>
-      <div class="feat-pill">
-        <div class="feat-pill-icon" style="background:rgba(91,156,246,0.12)"><svg width="15" height="15"
-            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
-            <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
-          </svg></div>
-        <div class="feat-pill-info">
-          <p class="feat-pill-title" data-i18n="mode_explain">Code Explanation</p>
-          <p data-i18n="pill_explain_desc">Plain English breakdowns</p>
-        </div>
-      </div>
-      <div class="feat-pill">
-        <div class="feat-pill-icon" style="background:rgba(124,58,237,0.12)"><svg width="15" height="15"
-            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <polygon points="13,2 3,14 12,14 11,22 21,10 12,10" />
-          </svg></div>
-        <div class="feat-pill-info">
-          <p class="feat-pill-title" data-i18n="mode_improve">Smart Suggestions</p>
-          <p data-i18n="pill_improve_desc">Quality score + grade</p>
-        </div>
-      </div>
-      <div class="feat-pill">
-        <div class="feat-pill-icon" style="background:rgba(245,146,62,0.12)"><svg width="15" height="15"
-            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
-          </svg></div>
-        <div class="feat-pill-info">
-          <p class="feat-pill-title" data-i18n="pill_theme_title">Dark / Light Mode</p>
-          <p data-i18n="pill_theme_desc">Persisted preference</p>
-        </div>
-      </div>
-      <div class="feat-pill">
-        <div class="feat-pill-icon" style="background:rgba(245,200,66,0.12)"><svg width="15" height="15"
-            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
-          </svg></div>
-        <div class="feat-pill-info">
-          <p class="feat-pill-title" data-i18n="pill_upload_title">File Upload</p>
-          <p data-i18n="pill_upload_desc">.py .js .ts .java .cpp .kt .zip</p>
-        </div>
-      </div>
-    </div>
-
-    <!-- ── WORKSPACE ─────────────────────────────────────────────── -->
-    <div id="workspace" class="workspace">
-
-      <!-- Editor Panel -->
-      <div class="panel" style="grid-column:1">
-        <div class="panel-header editor-panel-header">
-          <div class="panel-actions">
-            <button type="button" class="icon-btn" id="uploadBtn" title="Upload file" data-i18n-title="btn_upload" data-i18n-aria-label="btn_upload" aria-label="Upload code file" onclick="document.getElementById('fileInput').click();">
-              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
-                aria-hidden="true">
-                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-                <polyline points="17,8 12,3 7,8" />
-                <line x1="12" y1="3" x2="12" y2="15" />
-              </svg>
-            </button>
-            <input type="file" id="fileInput" accept=".py,.js,.ts,.java,.cpp,.cc,.cxx,.c,.h,.hpp,.kt,.kts,.txt,.zip" style="display:none"
-              tabindex="-1">
-            <button class="icon-btn" id="clearBtn" title="Clear" data-i18n-title="btn_clear" data-i18n-aria-label="btn_clear" aria-label="Clear code editor">
-              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
-                aria-hidden="true">
-                <polyline points="3,6 5,6 21,6" />
-                <path d="M19 6l-1 14H6L5 6" />
-                <path d="M10 11v6" />
-                <path d="M14 11v6" />
-              </svg>
-            </button>
-            <button class="icon-btn" id="copyBtn" title="Copy code" data-i18n-title="btn_copy" data-i18n-aria-label="btn_copy" aria-label="Copy code to clipboard">
-              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
-                aria-hidden="true">
-                <rect x="9" y="9" width="13" height="13" rx="2" />
-                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
-              </svg>
-            </button>
-          </div>
-        </div>
-
-        <!-- Language tabs -->
-        <div class="lang-tabs" role="group" aria-label="Select Programming Language">
-          <button class="lang-tab active" data-lang="python" aria-pressed="true" data-i18n="lang_tab_python">Python</button>
-          <button class="lang-tab" data-lang="javascript" aria-pressed="false" data-i18n="lang_tab_javascript">JavaScript</button>
-          <button class="lang-tab" data-lang="typescript" aria-pressed="false" data-i18n="lang_tab_typescript">TypeScript</button>
-          <button class="lang-tab" data-lang="java" aria-pressed="false" data-i18n="lang_tab_java">Java</button>
-          <button class="lang-tab" data-lang="cpp" aria-pressed="false" data-i18n="lang_tab_cpp">C++</button>
-        </div>
-        <!-- Editor area (line numbers + code editor) -->
-        <div class="editor-wrap" id="editorWrap">
-          <!-- Drag-and-drop overlay -->
-          <div class="drop-overlay" id="dropOverlay" aria-hidden="true">
-            <div class="drop-overlay-icon">
-              <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
-                <polyline points="16,16 12,12 8,16"/>
-                <line x1="12" y1="12" x2="12" y2="21"/>
-                <path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"/>
-              </svg>
-            </div>
-            <div class="drop-overlay-text">Drop your file here</div>
-            <div class="drop-overlay-sub">.py &nbsp;·&nbsp; .js &nbsp;·&nbsp; .ts &nbsp;·&nbsp; .java &nbsp;·&nbsp; .cpp &nbsp;·&nbsp; .zip</div>
-          </div>
-          <div class="line-numbers" id="lineNumbers">1</div>
-          <textarea id="codeEditor" placeholder="# Paste your code here or click 'Try Sample Code' above…" aria-label="Code editor" style="width:100%"></textarea>
-        </div>
-
-        <div class="editor-footer">
-          <div id="charCount">0 chars · 0 lines</div>
-          <div style="display:flex;gap:8px">
-            <div class="mode-row" role="tablist" aria-label="Mode selector">
-              <button class="mode-btn active" data-mode="analyze" aria-pressed="true" data-i18n="mode_full">Full</button>
-              <button class="mode-btn" data-mode="explain" aria-pressed="false" data-i18n="tab_explain">Explain</button>
-              <button class="mode-btn" data-mode="debug" aria-pressed="false" data-i18n="mode_debug">Debug</button>
-              <button class="mode-btn" data-mode="suggest" aria-pressed="false" data-i18n="tab_improve">Improve</button>
-            </div>
-          </div>
-        </div>
-
-        <div class="analyze-row">
-          <button class="btn-analyze" id="analyzeBtn" title="Analyze Code" aria-label="Analyze Code">
-            <span class="spinner" id="spinner"></span>
-            <span class="btn-text" data-i18n="btn_analyze_code">Analyze</span>
-          </button>
-        </div>
-
-        <!-- Result action buttons (hidden until results) -->
-        <div id="resultActions" class="result-actions" style="display:none">
-          <button class="icon-btn" id="favBtn" title="Save to favorites">★</button>
-          <button class="icon-btn" id="downloadBtn" title="Download results">⬇</button>
-          <button class="icon-btn" id="export-pdf-btn" title="Export as PDF">📄</button>
-          <button class="icon-btn" id="export-md-btn" title="Export as Markdown">📝</button>
-        </div>
-
-      </div>
-
-      <!-- Results Panel -->
-      <div class="panel" style="grid-column:2">
-        <div class="panel-header">
-          <div class="panel-title" data-i18n="results_title">Analysis Results</div>
-          <div class="panel-actions"></div>
-        </div>
-
-        <div class="result-tabs" role="tablist" aria-label="Result Tabs" style="margin-bottom:12px">
-          <button class="result-tab active" id="tab-explain" data-rtab="explain" role="tab" aria-selected="true" aria-controls="pane-explain">
-            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/></svg>
-            <span data-i18n="tab_explain">Explain</span>
-            <span class="tab-badge" id="explainBadge"></span>
-          </button>
-          <button class="result-tab" id="tab-debug" data-rtab="debug" role="tab" aria-selected="false" aria-controls="pane-debug">
-            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M8 2l1.5 1.5"/></svg>
-            <span data-i18n="tab_debug">Debug</span>
-            <span class="tab-badge" id="debugBadge"></span>
-          </button>
-          <button class="result-tab" id="tab-suggest" data-rtab="suggest" role="tab" aria-selected="false" aria-controls="pane-suggest">
-            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polygon points="13,2 3,14 12,14 11,22 21,10 12,10"/></svg>
-            <span data-i18n="tab_improve">Improve</span>
-            <span class="tab-badge" id="suggestBadge"></span>
-          </button>
-        </div>
-        <div class="result-content">
-          <!-- Explain Pane -->
-          <div class="result-pane active" id="pane-explain" role="tabpanel" tabindex="0" aria-labelledby="tab-explain">
-            <div class="empty-state" id="emptyExplain">
-              <div class="empty-icon" aria-hidden="true"><svg width="28" height="28" viewBox="0 0 24 24" fill="none"
-                  stroke="currentColor" stroke-width="1.5">
-                  <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
-                  <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
-                </svg></div>
-              <p class="empty-title" data-i18n="empty_explain_title">No analysis yet</p>
-              <p data-i18n="empty_explain_desc">Paste your code and click Analyze to see results</p>
-            </div>
-            <div id="explainResult" style="display:none"></div>
-          </div>
-          <!-- Debug Pane -->
-          <div class="result-pane" id="pane-debug" role="tabpanel" tabindex="0" aria-labelledby="tab-debug">
-            <div class="empty-state" id="emptyDebug">
-              <div class="empty-icon" aria-hidden="true"><svg width="28" height="28" viewBox="0 0 24 24" fill="none"
-                  stroke="currentColor" stroke-width="1.5">
-                  <path d="M8 2l1.5 1.5" />
-                  <path d="M14.5 3.5L16 2" />
-                  <path d="M9 7.5A3 3 0 0 1 12 5a3 3 0 0 1 3 2.5" />
-                  <path d="M6.5 9H4a1 1 0 0 0-1 1v1a8 8 0 0 0 16 0v-1a1 1 0 0 0-1-1h-2.5" />
-                  <line x1="12" y1="12" x2="12" y2="16" />
-                  <path d="M4.5 15H2" />
-                  <path d="M22 15h-2.5" />
-                  <path d="M4.5 19l-2 2" />
-                  <path d="M19.5 19l2 2" />
-                </svg></div>
-              <p class="empty-title" data-i18n="empty_debug_title">No bugs scanned</p>
-              <p data-i18n="empty_debug_desc">Run analysis to detect issues in your code</p>
-            </div>
-            <div id="debugResult" style="display:none"></div>
-          </div>
-          <!-- Suggest Pane -->
-          <div class="result-pane" id="pane-suggest" role="tabpanel" tabindex="0" aria-labelledby="tab-suggest">
-            <div class="empty-state" id="emptySuggest">
-              <div class="empty-icon" aria-hidden="true"><svg width="28" height="28" viewBox="0 0 24 24" fill="none"
-                  stroke="currentColor" stroke-width="1.5">
-                  <polygon points="13,2 3,14 12,14 11,22 21,10 12,10" />
-                </svg></div>
-              <p class="empty-title" data-i18n="empty_suggest_title">No suggestions yet</p>
-              <p data-i18n="empty_suggest_desc">Run analysis to get improvement ideas</p>
-            </div>
-            <div id="suggestResult" style="display:none"></div>
-          </div>
-        </div>
-
-        <!-- Analysis time footer -->
-        <div id="engineBar"
-          style="padding:8px 18px;border-top:1px solid var(--border);font-size:0.72rem;color:var(--text3);font-family:var(--font-mono);display:none;gap:16px">
-          <span id="engineInfo"></span>
-          <span id="timeInfo"></span>
-        </div>
-      </div>
-    </div>
-
-    <!-- ── HISTORY & FAVORITES ────────────────────────────────────── -->
-    <div class="bottom-grid">
-      <div class="panel">
-        <div class="panel-header">
-          <div class="panel-title" data-i18n="history_title">Query History</div>
-          <button class="btn-clear" id="clearHistoryBtn" aria-label="Clear query history" data-i18n-aria-label="btn_clear" data-i18n="btn_clear">Clear</button>
-          <button class="btn-clear" id="downloadJsonBtn" aria-label="Download history as JSON">Download JSON</button>
-          <button class="btn-clear" id="downloadCsvBtn" aria-label="Download history as CSV">Download CSV</button>
-        </div>
-        <div class="history-controls-row" style="display:flex; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--border); font-size: 0.72rem; align-items:center; flex-wrap:wrap;">
-          <span style="color:var(--text3);" data-i18n="history_sort_label">Sort:</span>
-          <select id="historySortSelect" style="background:var(--bg); border:1px solid var(--border); color:var(--text); border-radius:4px; padding:2px 6px; font-size:0.72rem; cursor:pointer;">
-            <option value="timestamp" data-i18n="history_sort_date">Date</option>
-            <option value="score" data-i18n="history_sort_score">Quality Score</option>
-            <option value="issue_count" data-i18n="history_sort_bugs">Bugs Scanned</option>
-          </select>
-          <span style="color:var(--text3); margin-left: 8px;" data-i18n="history_order_label">Order:</span>
-          <select id="historyOrderSelect" style="background:var(--bg); border:1px solid var(--border); color:var(--text); border-radius:4px; padding:2px 6px; font-size:0.72rem; cursor:pointer;">
-            <option value="desc" data-i18n="history_order_desc">Desc</option>
-            <option value="asc" data-i18n="history_order_asc">Asc</option>
-          </select>
-        </div>
-        <div class="history-list" id="historyList" aria-live="polite">
-          <div class="list-empty" data-i18n="empty_history">No history yet. Run your first analysis.</div>
-        </div>
-        <div class="history-pagination-row" id="historyPagination" style="display:flex; justify-content:space-between; align-items:center; padding:8px 16px; border-top:1px solid var(--border); font-size:0.75rem;">
-          <button id="btnPrevHistory" class="btn-clear" style="padding:4px 10px; font-size:0.7rem;" disabled>&laquo; Prev</button>
-          <span id="historyPageNum" style="color:var(--text2); font-weight:600;">Page 1</span>
-          <button id="btnNextHistory" class="btn-clear" style="padding:4px 10px; font-size:0.7rem;" disabled>Next &raquo;</button>
-        </div>
-      </div>
-      <div class="panel">
-        <div class="panel-header">
-          <div class="panel-title" data-i18n="favorites_title">Saved Favorites</div>
-          <button class="btn-clear" id="clearFavsBtn" aria-label="Clear saved favorites" data-i18n-aria-label="btn_clear" data-i18n="btn_clear">Clear</button>
-        </div>
-        <div class="fav-list" id="favList" aria-live="polite">
-          <div class="list-empty" data-i18n="empty_favorites">No favorites saved yet.</div>
-        </div>
-      </div>
-    </div>
-
-  </div><!-- /app -->
-
-
-    <!-- ── FOOTER ─────────────────────────────────────────────────── -->
-    <footer>
-      <div class="app" style="display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start;justify-content:space-between;">
-        <div style="min-width:220px;">
-          <div class="footer-logo">QyverixAI</div>
-          <p>
-            <a href="https://github.com/imDarshanGK/AI-dev-assistant" target="_blank" data-i18n="nav_github">GitHub</a>
-            · <a href="https://qyverixai.onrender.com/docs" target="_blank" data-i18n="nav_api_docs">API Docs</a>
-            · <span data-i18n="footer_license">MIT License</span>
-          </p>
-          <p style="margin-top:8px;font-size:0.75rem" data-i18n="footer_built_for">Built for the open source community</p>
-        </div>
-
-        <div style="max-width:360px;">
-          <p style="margin:0 0 6px;font-size:0.8rem;font-weight:600;color:var(--accent);">Weekly Digest</p>
-          <form id="digestForm" style="display:flex;gap:6px;">
-            <input type="email" id="digestEmail" placeholder="your@email.com" required
-                   style="flex:1;min-width:180px;padding:7px 10px;font-size:0.8rem;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--fg);">
-            <button type="submit" id="digestBtn" style="padding:7px 14px;font-size:0.8rem;font-weight:600;background:var(--accent);color:#fff;border:none;border-radius:6px;cursor:pointer;">Subscribe</button>
-          </form>
-          <p style="margin:6px 0 0;font-size:0.7rem;color:var(--muted);">Get a Sunday email with your weekly analysis stats.</p>
-        </div>
-      </div>
-    </footer>
-
-    <!-- ── TOAST CONTAINER ─────────────────────────────────────────── -->
-    <div id="toastContainer"></div>
-
-    <script>
-      /* ═══════════════════════════════════════════════════════════════
-         STATE & TRANSLATIONS
-      ═══════════════════════════════════════════════════════════════ */
-      const TRANSLATIONS = {
-        en: {
-          lang_select_label: "Select language",
-          lang_option_en: "English",
-          lang_option_ta: "தமிழ் (Tamil)",
-          lang_option_hi: "हिन्दी (Hindi)",
-          lang_option_fr: "Français (French)",
-          lang_tab_python: "Python",
-          lang_tab_javascript: "JavaScript",
-          lang_tab_typescript: "TypeScript",
-          lang_tab_java: "Java",
-          lang_tab_cpp: "C++",
-          nav_github: "GitHub",
-          nav_api_docs: "API Docs",
-          hero_badge: "Open Source · AI-Powered · Free",
-          hero_title: "Debug. Understand.<br /><em>Ship faster.</em>",
-          hero_subtitle: "Paste your code and get instant bug detection, plain-English explanations, and actionable improvement suggestions — no account needed.",
-          btn_start_analyzing: "Start Analyzing",
-          btn_try_sample: "Try Sample Code",
-          btn_star_github: "Star on GitHub",
-          pill_patterns_title: "40+ Bug Patterns",
-          pill_patterns_desc: "Python, JS, TS, Java, C++",
-          mode_explain: "Code Explanation",
-          pill_explain_desc: "Plain English breakdowns",
-          mode_improve: "Smart Suggestions",
-          pill_improve_desc: "Quality score + grade",
-          pill_theme_title: "Dark / Light Mode",
-          pill_theme_desc: "Persisted preference",
-          pill_upload_title: "File Upload",
-          pill_upload_desc: ".py .js .ts .java .cpp .kt .zip",
-          editor_title: "Code Editor",
-          editor_placeholder: "# Paste your code here or click 'Try Sample Code' above…",
-          char_count_initial: "Paste or type code to begin",
-          char_count_format: "{chars} chars · {lines} lines · {nonBlank} non-blank",
-          ctrl_enter_hint: "Ctrl+Enter to analyze",
-          mode_full: "Full",
-          mode_debug: "Debug",
-          api_url_placeholder: "https://qyverixai.onrender.com",
-          api_status_disconnected: "Disconnected",
-          api_status_connected: "Connected",
-          api_status_unreachable: "Unreachable",
-          api_status_error: "Error {status}",
-          btn_ping: "Ping",
-          btn_analyze_code: "Analyze Code",
-          desktop_hint: "(Ctrl+Enter)",
-          results_title: "Analysis Results",
-          tab_explain: "Explain",
-          tab_debug: "Debug",
-          tab_improve: "Improve",
-          empty_explain_title: "No analysis yet",
-          empty_explain_desc: "Paste your code and click Analyze to see results",
-          empty_debug_title: "No bugs scanned",
-          empty_debug_desc: "Run analysis to detect issues in your code",
-          empty_suggest_title: "No suggestions yet",
-          empty_suggest_desc: "Run analysis to get improvement ideas",
-          history_title: "Query History",
-          favorites_title: "Saved Favorites",
-          empty_history: "No history yet. Run your first analysis.",
-          history_sort_label: "Sort:",
-          history_sort_date: "Date",
-          history_sort_score: "Quality Score",
-          history_sort_bugs: "Bugs Scanned",
-          history_order_label: "Order:",
-          history_order_desc: "Desc",
-          history_order_asc: "Asc",
-          empty_favorites: "No favorites saved yet.",
-          btn_clear: "Clear",
-          footer_license: "MIT License",
-          footer_built_for: "Built for the open source community",
-          confirm_clear_history: "Clear all history? This cannot be undone.",
-          confirm_clear_favs: "Clear all favorites? This cannot be undone.",
-          toast_code_copied: "Code copied!",
-          toast_api_reachable: "API is reachable",
-          toast_api_unreachable: "Cannot reach API. Check the URL.",
-          toast_please_paste: "Please paste some code first.",
-          toast_saved_favorites: "Saved to favorites",
-          toast_report_downloaded: "Report downloaded",
-          toast_sample_loaded: "Sample code loaded — click Analyze!",
-          toast_history_cleared: "History cleared",
-          toast_favorites_cleared: "Favorites cleared",
-          toast_loaded: "Loaded {name}",
-          toast_dropped: "Dropped {name}",
-          debug_clean_title: "No issues detected!",
-          debug_clean_desc: "Your code passed all 40+ pattern checks. Keep it up!",
-          debug_errors: "Errors",
-          debug_warnings: "Warnings",
-          debug_info: "Info",
-          debug_line: "Line {line}",
-          suggest_quality_score: "Quality Score",
-          suggest_perfect_title: "Perfect score!",
-          suggest_perfect_desc: "No improvement suggestions found.",
-          suggest_priority: "{priority} priority",
-          btn_copy: "Copy code",
-          btn_upload: "Upload file",
-          btn_save_favorites: "Save to favorites",
-          btn_download_results: "Download results",
-          btn_toggle_theme: "Toggle theme",
-          analyze_btn_title: "Analyze Code (Ctrl+Enter)",
-          meta_lines: "{count} lines",
-          meta_functions: "{count} functions",
-          meta_classes: "{count} classes",
-          toast_analysis_failed: "Analysis failed: {message}",
-          history_entry_label: "Load history entry for {lang} at {time}",
-          favorite_entry_label: "Load favorite entry for {lang} at {time}"
-        },
-        ta: {
-          lang_select_label: "மொழியைத் தேர்ந்தெடுக்கவும்",
-          lang_option_en: "English",
-          lang_option_ta: "தமிழ் (Tamil)",
-          lang_option_hi: "हिन्दी (Hindi)",
-          lang_option_fr: "Français (French)",
-          lang_tab_python: "Python",
-          lang_tab_javascript: "JavaScript",
-          lang_tab_typescript: "TypeScript",
-          lang_tab_java: "Java",
-          lang_tab_cpp: "C++",
-          nav_github: "கிட்ஹப் (GitHub)",
-          nav_api_docs: "ஏபிஐ ஆவணங்கள் (API Docs)",
-          hero_badge: "திறந்த மூல · ஏஐ-ஆற்றல் · இலவசம்",
-          hero_title: "பிழையறி. புரிந்துகொள்.<br /><em>வேகமாக அனுப்பு.</em>",
-          hero_subtitle: "உங்கள் குறியீட்டை ஒட்டி, உடனடி பிழை கண்டறிதல், எளிய ஆங்கில விளக்கங்கள் மற்றும் பயனுள்ள மேம்பாட்டு பரிந்துரைகளைப் பெறுங்கள் — கணக்கு தேவையில்லை.",
-          btn_start_analyzing: "பகுப்பாய்வைத் தொடங்கு",
-          btn_try_sample: "மாதிரிக் குறியீட்டை முயல்க",
-          btn_star_github: "கிட்ஹப்பில் ஸ்டார் செய்க",
-          pill_patterns_title: "40+ பிழை வடிவங்கள்",
-          pill_patterns_desc: "Python, JS, TS, Java, C++",
-          mode_explain: "குறியீடு விளக்கம்",
-          pill_explain_desc: "எளிய ஆங்கில விளக்கங்கள்",
-          mode_improve: "ஸ்மார்ட் பரிந்துரைகள்",
-          pill_improve_desc: "தரமான மதிப்பெண் + தரம்",
-          pill_theme_title: "இருண்ட / ஒளி முறை",
-          pill_theme_desc: "சேமிக்கப்பட்ட விருப்பம்",
-          pill_upload_title: "கோப்பு பதிவேற்றம்",
-          pill_upload_desc: ".py .js .ts .java .cpp .kt .zip",
-          editor_title: "குறியீட்டு எடிட்டர்",
-          editor_placeholder: "# உங்கள் குறியீட்டை இங்கே ஒட்டவும் அல்லது மேலே உள்ள 'மாதிரிக் குறியீட்டை முயல்க' என்பதைக் கிளிக் செய்யவும்…",
-          char_count_initial: "தொடங்குவதற்கு குறியீட்டை ஒட்டவும் அல்லது தட்டச்சு செய்யவும்",
-          char_count_format: "{chars} எழுத்துக்கள் · {lines} வரிகள் · {nonBlank} வெற்று அல்லாத வரிகள்",
-          ctrl_enter_hint: "பகுப்பாய்வு செய்ய Ctrl+Enter அழுத்தவும்",
-          mode_full: "முழுமையான",
-          mode_debug: "பிழைத்திருத்தம்",
-          api_url_placeholder: "https://qyverixai.onrender.com",
-          api_status_disconnected: "இணைப்பு துண்டிக்கப்பட்டது",
-          api_status_connected: "இணைக்கப்பட்டது",
-          api_status_unreachable: "அடைய முடியாதது",
-          api_status_error: "பிழை {status}",
-          btn_ping: "பிங்",
-          btn_analyze_code: "குறியீட்டை பகுப்பாய்",
-          desktop_hint: "(Ctrl+Enter)",
-          results_title: "பகுப்பாய்வு முடிவுகள்",
-          tab_explain: "விளக்கு",
-          tab_debug: "பிழைத்திருத்து",
-          tab_improve: "மேம்படுத்து",
-          empty_explain_title: "இன்னும் பகுப்பாய்வு இல்லை",
-          empty_explain_desc: "விளைவுகளைக் காண குறியீட்டை ஒட்டி, பகுப்பாய் என்பதைக் கிளிக் செய்யவும்",
-          empty_debug_title: "பிழைகள் எதுவும் கண்டறியப்படவில்லை",
-          empty_debug_desc: "உங்கள் குறியீட்டில் உள்ள சிக்கல்களைக் கண்டறிய பகுப்பாய்வை இயக்கவும்",
-          empty_suggest_title: "இன்னும் பரிந்துரைகள் இல்லை",
-          empty_suggest_desc: "மேம்பாட்டு யோசனைகளைப் பெற பகுப்பாய்வை இயக்கவும்",
-          history_title: "வினவல் வரலாறு",
-          favorites_title: "சேமிக்கப்பட்ட பிடித்தவை",
-          empty_history: "இன்னும் வரலாறு இல்லை. உங்கள் முதல் பகுப்பாய்வை இயக்கவும்.",
-          history_sort_label: "வரிசைப்படுத்து:",
-          history_sort_date: "தேதி",
-          history_sort_score: "தர மதிப்பெண்",
-          history_sort_bugs: "கண்டறியப்பட்ட பிழைகள்",
-          history_order_label: "வரிசை:",
-          history_order_desc: "இறங்குவரிசை",
-          history_order_asc: "ஏறுவரிசை",
-          empty_favorites: "இன்னும் பிடித்தவை எதுவும் சேமிக்கப்படவில்லை.",
-          btn_clear: "அழி",
-          footer_license: "எம்ஐடி உரிமம் (MIT License)",
-          footer_built_for: "திறந்த மூல சமூகத்திற்காக உருவாக்கப்பட்டது",
-          confirm_clear_history: "எல்லா வரலாற்றையும் அழிக்கவா? இதை மாற்ற முடியாது.",
-          confirm_clear_favs: "பிடித்தவை அனைத்தையும் அழிக்கவா? இதை மாற்ற முடியாது.",
-          toast_code_copied: "குறியீடு நகலெடுக்கப்பட்டது!",
-          toast_api_reachable: "ஏபிஐ அணுகக்கூடியது",
-          toast_api_unreachable: "ஏபிஐ-ஐ அணுக முடியவில்லை. முகவரியைச் சரிபார்க்கவும்.",
-          toast_please_paste: "தயவுசெய்து முதலில் குறியீட்டை ஒட்டவும்.",
-          toast_saved_favorites: "பிடித்தவற்றில் சேமிக்கப்பட்டது",
-          toast_report_downloaded: "அறிக்கை பதிவிறக்கம் செய்யப்பட்டது",
-          toast_sample_loaded: "மாதிரிக் குறியீடு ஏற்றப்பட்டது — பகுப்பாய் என்பதைக் கிளிக் செய்க!",
-          toast_history_cleared: "வரலாறு அழிக்கப்பட்டது",
-          toast_favorites_cleared: "பிடித்தவை அழிக்கப்பட்டன",
-          toast_loaded: "{name} ஏற்றப்பட்டது",
-          toast_dropped: "{name} விடப்பட்டது",
-          debug_clean_title: "சிக்கல்கள் எதுவும் கண்டறியப்படவில்லை!",
-          debug_clean_desc: "உங்கள் குறியீடு அனைத்து 40+ வடிவ சோதனைகளையும் கடந்துவிட்டது. தொடருங்கள்!",
-          debug_errors: "பிழைகள்",
-          debug_warnings: "எச்சரிக்கைகள்",
-          debug_info: "தகவல்",
-          debug_line: "வரி {line}",
-          suggest_quality_score: "தர மதிப்பெண்",
-          suggest_perfect_title: "சரியான மதிப்பெண்!",
-          suggest_perfect_desc: "மேம்பாட்டு பரிந்துரைகள் எதுவும் இல்லை.",
-          suggest_priority: "{priority} முன்னுரிமை",
-          btn_copy: "குறியீட்டை நகலெடு",
-          btn_upload: "கோப்பைப் பதிவேற்று",
-          btn_save_favorites: "பிடித்தவற்றில் சேமி",
-          btn_download_results: "முடிவுகளைப் பதிவிறக்கு",
-          btn_toggle_theme: "தீம் மாற்று",
-          analyze_btn_title: "குறியீட்டை பகுப்பாய் (Ctrl+Enter)",
-          meta_lines: "{count} வரிகள்",
-          meta_functions: "{count} செயல்பாடுகள்",
-          meta_classes: "{count} வகுப்புகள்",
-          toast_analysis_failed: "பகுப்பாய்வு தோல்வியடைந்தது: {message}",
-          history_entry_label: "{lang} இல் {time} நேரத்தில் உள்ள வரலாறு பதிவை ஏற்று",
-          favorite_entry_label: "{lang} இல் {time} நேரத்தில் உள்ள பிடித்த பதிவை ஏற்று"
-        },
-        hi: {
-          lang_select_label: "भाषा चुनें",
-          lang_option_en: "English",
-          lang_option_ta: "தமிழ் (Tamil)",
-          lang_option_hi: "हिन्दी (Hindi)",
-          lang_option_fr: "Français (French)",
-          lang_tab_python: "Python",
-          lang_tab_javascript: "JavaScript",
-          lang_tab_typescript: "TypeScript",
-          lang_tab_java: "Java",
-          lang_tab_cpp: "C++",
-          nav_github: "गिटहब (GitHub)",
-          nav_api_docs: "एपीआई दस्तावेज़ (API Docs)",
-          hero_badge: "ओपन सोर्स · एआई-संचालित · मुफ्त",
-          hero_title: "डीबग करें। समझें।<br><em>तेज़ी से शिप करें।</em>",
-          hero_subtitle: "अपना कोड पेस्ट करें और तुरंत बग डिटेक्शन, सरल हिंदी में स्पष्टीकरण और व्यावहारिक सुधार सुझाव प्राप्त करें — किसी खाते की आवश्यकता नहीं है।",
-          btn_start_analyzing: "विश्लेषण शुरू करें",
-          btn_try_sample: "सैंपल कोड आज़माएं",
-          btn_star_github: "गिटहब पर स्टार करें",
-          pill_patterns_title: "40+ बग पैटर्न",
-          pill_patterns_desc: "Python, JS, TS, Java, C++",
-          mode_explain: "कोड का स्पष्टीकरण",
-          pill_explain_desc: "सरल स्पष्टीकरण",
-          mode_improve: "स्मार्ट सुझाव",
-          pill_improve_desc: "क्वालिटी स्कोर + ग्रेड",
-          pill_theme_title: "डार्क / लाइट मोड",
-          pill_theme_desc: "सहेजी गई प्राथमिकता",
-          pill_upload_title: "फ़ाइल अपलोड",
-          pill_upload_desc: ".py .js .ts .java .cpp .kt .zip",
-          editor_title: "कोड एडिटर",
-          editor_placeholder: "# अपना कोड यहाँ पेस्ट करें या ऊपर 'सैंपल कोड आज़माएं' पर क्लिक करें…",
-          char_count_initial: "शुरू करने के लिए कोड पेस्ट करें या टाइप करें",
-          char_count_format: "{chars} वर्ण · {lines} पंक्तियाँ · {nonBlank} गैर-रिक्त",
-          ctrl_enter_hint: "विश्लेषण करने के लिए Ctrl+Enter दबाएं",
-          mode_full: "पूर्ण",
-          mode_debug: "डीबग",
-          api_url_placeholder: "https://qyverixai.onrender.com",
-          api_status_disconnected: "डिस्कनेक्टेड",
-          api_status_connected: "कनेक्टेड",
-          api_status_unreachable: "पहुंच से बाहर",
-          api_status_error: "त्रुटि {status}",
-          btn_ping: "पिंग",
-          btn_analyze_code: "कोड का विश्लेषण करें",
-          desktop_hint: "(Ctrl+Enter)",
-          results_title: "विश्लेषण के परिणाम",
-          tab_explain: "समझाएं",
-          tab_debug: "डीबग",
-          tab_improve: "सुधारें",
-          empty_explain_title: "अभी तक कोई विश्लेषण नहीं",
-          empty_explain_desc: "परिणाम देखने के लिए अपना कोड पेस्ट करें और विश्लेषण पर क्लिक करें",
-          empty_debug_title: "कोई बग नहीं मिला",
-          empty_debug_desc: "अपने कोड में समस्याओं का पता लगाने के लिए विश्लेषण चलाएं",
-          empty_suggest_title: "अभी तक कोई सुझाव नहीं",
-          empty_suggest_desc: "सुधार के विचार प्राप्त करने के लिए विश्लेषण चलाएं",
-          history_title: "क्वेरी इतिहास",
-          favorites_title: "सहेजे गए पसंदीदा",
-          empty_history: "अभी तक कोई इतिहास नहीं है। अपना पहला विश्लेषण चलाएं।",
-          history_sort_label: "क्रमबद्ध करें:",
-          history_sort_date: "तारीख",
-          history_sort_score: "गुणवत्ता स्कोर",
-          history_sort_bugs: "स्कैन किए गए कीड़े",
-          history_order_label: "क्रम:",
-          history_order_desc: "अवरोही",
-          history_order_asc: "आरोही",
-          empty_favorites: "अभी तक कोई पसंदीदा सहेजा नहीं गया है।",
-          btn_clear: "साफ करें",
-          footer_license: "एमआईटी लाइसेंस (MIT License)",
-          footer_built_for: "ओपन सोर्स समुदाय के लिए निर्मित",
-          confirm_clear_history: "इतिहास पूरी तरह साफ करें? इसे पूर्ववत नहीं किया जा सकता।",
-          confirm_clear_favs: "सभी पसंदीदा साफ करें? इसे पूर्ववत नहीं किया जा सकता।",
-          toast_code_copied: "कोड कॉपी किया गया!",
-          toast_api_reachable: "एपीआई पहुंच योग्य है",
-          toast_api_unreachable: "एपीआई तक नहीं पहुंचा जा सकता। यूआरएल की जांच करें।",
-          toast_please_paste: "कृपया पहले कुछ कोड पेस्ट करें।",
-          toast_saved_favorites: "पसंदीदा में सहेजा गया",
-          toast_report_downloaded: "रिपोर्ट डाउनलोड हो गई",
-          toast_sample_loaded: "सैंपल कोड लोड हो गया — विश्लेषण पर क्लिक करें!",
-          toast_history_cleared: "इतिहास साफ कर दिया गया",
-          toast_favorites_cleared: "पसंदीदा साफ कर दिए गए",
-          toast_loaded: "{name} लोड किया गया",
-          toast_dropped: "{name} ड्रॉप किया गया",
-          debug_clean_title: "कोई समस्या नहीं मिली!",
-          debug_clean_desc: "आपका कोड सभी 40+ पैटर्न जांचों में सफल रहा। इसे जारी रखें!",
-          debug_errors: "त्रुटियाँ",
-          debug_warnings: "चेतावनी",
-          debug_info: "जानकारी",
-          debug_line: "पंक्ति {line}",
-          suggest_quality_score: "क्वालिटी स्कोर",
-          suggest_perfect_title: "उत्कृष्ट स्कोर!",
-          suggest_perfect_desc: "कोई सुधार सुझाव नहीं मिला।",
-          suggest_priority: "{priority} प्राथमिकता",
-          btn_copy: "कोड कॉपी करें",
-          btn_upload: "फ़ाइल अपलोड करें",
-          btn_save_favorites: "पसंदीदा में सहेजें",
-          btn_download_results: "परिणाम डाउनलोड करें",
-          btn_toggle_theme: "थीम बदलें",
-          analyze_btn_title: "कोड का विश्लेषण करें (Ctrl+Enter)",
-          meta_lines: "{count} पंक्तियाँ",
-          meta_functions: "{count} फ़ंक्शन",
-          meta_classes: "{count} क्लासें",
-          toast_analysis_failed: "विश्लेषण विफल रहा: {message}",
-          history_entry_label: "{time} पर {lang} के लिए इतिहास प्रविष्टि लोड करें",
-          favorite_entry_label: "{time} पर {lang} के लिए पसंदीदा प्रविष्टि लोड करें"
-        },
-        fr: {
-          lang_select_label: "Choisir la langue",
-          lang_option_en: "English",
-          lang_option_ta: "தமிழ் (Tamil)",
-          lang_option_hi: "हिन्दी (Hindi)",
-          lang_option_fr: "Français (French)",
-          lang_tab_python: "Python",
-          lang_tab_javascript: "JavaScript",
-          lang_tab_typescript: "TypeScript",
-          lang_tab_java: "Java",
-          lang_tab_cpp: "C++",
-          nav_github: "GitHub",
-          nav_api_docs: "Docs API",
-          hero_badge: "Open Source · Propulsé par l'IA · Gratuit",
-          hero_title: "Déboguez. Comprenez.<br /><em>Lisez plus vite.</em>",
-          hero_subtitle: "Collez votre code et obtenez une détection instantanée des bogues, des explications simples et des suggestions d'amélioration exploitables — aucun compte requis.",
-          btn_start_analyzing: "Démarrer l'analyse",
-          btn_try_sample: "Essayer l'exemple",
-          btn_star_github: "Star sur GitHub",
-          pill_patterns_title: "40+ Modèles de bogues",
-          pill_patterns_desc: "Python, JS, TS, Java, C++",
-          mode_explain: "Explication de code",
-          pill_explain_desc: "Analyses en français simple",
-          mode_improve: "Suggestions intelligentes",
-          pill_improve_desc: "Score de qualité + note",
-          pill_theme_title: "Mode Sombre / Clair",
-          pill_theme_desc: "Préférence persistée",
-          pill_upload_title: "Télécharger un fichier",
-          pill_upload_desc: ".py .js .ts .java .cpp .kt .zip",
-          editor_title: "Éditeur de code",
-          editor_placeholder: "# Collez votre code ici ou cliquez sur 'Essayer l'exemple' ci-dessus…",
-          char_count_initial: "Collez ou tapez du code pour commencer",
-          char_count_format: "{chars} chars · {lines} lignes · {nonBlank} non vides",
-          ctrl_enter_hint: "Ctrl+Enter pour analyser",
-          mode_full: "Complet",
-          mode_debug: "Débogage",
-          api_url_placeholder: "https://qyverixai.onrender.com",
-          api_status_disconnected: "Déconnecté",
-          api_status_connected: "Connecté",
-          api_status_unreachable: "Inaccessible",
-          api_status_error: "Erreur {status}",
-          btn_ping: "Ping",
-          btn_analyze_code: "Analyser le code",
-          desktop_hint: "(Ctrl+Enter)",
-          results_title: "Résultats de l'analyse",
-          tab_explain: "Expliquer",
-          tab_debug: "Déboguer",
-          tab_improve: "Améliorer",
-          empty_explain_title: "Aucune analyse pour le moment",
-          empty_explain_desc: "Collez votre code et cliquez sur Analyser pour voir les résultats",
-          empty_debug_title: "Aucun bogue détecté",
-          empty_debug_desc: "Exécutez l'analyse pour détecter les problèmes dans votre code",
-          empty_suggest_title: "Aucune suggestion pour le moment",
-          empty_suggest_desc: "Exécutez l'analyse pour obtenir des idées d'amélioration",
-          history_title: "Historique des requêtes",
-          favorites_title: "Favoris enregistrés",
-          empty_history: "Aucun historique pour le moment. Lancez votre première analyse.",
-          history_sort_label: "Trier par :",
-          history_sort_date: "Date",
-          history_sort_score: "Score de qualité",
-          history_sort_bugs: "Bugs détectés",
-          history_order_label: "Ordre :",
-          history_order_desc: "Décroissant",
-          history_order_asc: "Croissant",
-          empty_favorites: "Aucun favori enregistré pour le moment.",
-          btn_clear: "Effacer",
-          footer_license: "Licence MIT",
-          footer_built_for: "Conçu pour la communauté open source",
-          confirm_clear_history: "Effacer tout l'historique ? Cette action est irréversible.",
-          confirm_clear_favs: "Effacer tous les favoris ? Cette action est irréversible.",
-          toast_code_copied: "Code copié !",
-          toast_api_reachable: "L'API est accessible",
-          toast_api_unreachable: "Impossible de joindre l'API. Vérifiez l'URL.",
-          toast_please_paste: "Veuillez d'abord coller du code.",
-          toast_saved_favorites: "Enregistré dans les favoris",
-          toast_report_downloaded: "Rapport téléchargé",
-          toast_sample_loaded: "Exemple de code chargé — cliquez sur Analyser !",
-          toast_history_cleared: "Historique effacé",
-          toast_favorites_cleared: "Favoris effacés",
-          toast_loaded: "{name} chargé",
-          toast_dropped: "{name} déposé",
-          debug_clean_title: "Aucun problème détecté !",
-          debug_clean_desc: "Votre code a passé les 40+ vérifications avec succès. Continuez ainsi !",
-          debug_errors: "Erreurs",
-          debug_warnings: "Avertissements",
-          debug_info: "Infos",
-          debug_line: "Ligne {line}",
-          suggest_quality_score: "Score de qualité",
-          suggest_perfect_title: "Score parfait !",
-          suggest_perfect_desc: "Aucune suggestion d'amélioration trouvée.",
-          suggest_priority: "Priorité {priority}",
-          btn_copy: "Copier le code",
-          btn_upload: "Télécharger le fichier",
-          btn_save_favorites: "Enregistrer dans les favoris",
-          btn_download_results: "Télécharger les résultats",
-          btn_toggle_theme: "Changer le thème",
-          analyze_btn_title: "Analyser le code (Ctrl+Enter)",
-          meta_lines: "{count} lignes",
-          meta_functions: "{count} fonctions",
-          meta_classes: "{count} classes",
-          toast_analysis_failed: "Échec de l'analyse : {message}",
-          history_entry_label: "Charger l'entrée d'historique pour {lang} à {time}",
-          favorite_entry_label: "Charger le favori pour {lang} à {time}"
-        }
-      };
-
-      const MAX_HISTORY = 50;
-      let history = JSON.parse(localStorage.getItem('qyx_history') || '[]');
-      let favorites = JSON.parse(localStorage.getItem('qyx_favorites') || '[]');
-      let currentResult = null;
-      let selectedLang = 'python';
-      const LOCAL_API_BASE = 'http://localhost:8000';
-      const REMOTE_API_BASE = 'https://qyverixai.onrender.com';
-
-      let selectedMode = 'analyze';
-      let selectedZipFile = null;
-      let appLang = localStorage.getItem('qyx_lang') || 'en';
-
-      /* ═══════════════════════════════════════════════════════════════
-         DOM REFS
-      ═══════════════════════════════════════════════════════════════ */
-      const editor = document.getElementById('codeEditor');
-      const lineNumbers = document.getElementById('lineNumbers');
-      const charCount = document.getElementById('charCount');
-      const analyzeBtn = document.getElementById('analyzeBtn');
-      const spinner = document.getElementById('spinner');
-      const apiUrlInput = document.getElementById('apiUrl');
-      const apiDot = document.getElementById('apiDot');
-      const apiStatusText = document.getElementById('apiStatusText');
-      const historyList = document.getElementById('historyList');
-      const favList = document.getElementById('favList');
-      const resultActions = document.getElementById('resultActions');
-      const engineInfo = document.getElementById('engineInfo');
-      const timeInfo = document.getElementById('timeInfo');
-
-      /* ═══════════════════════════════════════════════════════════════
-         THEME
-      ═══════════════════════════════════════════════════════════════ */
-      // dark mode → moon, light mode → sun
-      function setThemeIcon(theme) {
-        const icon = document.getElementById('themeIcon');
-        if (!icon) return;
-        if (theme === 'dark') {
-          icon.innerHTML = '<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>';
-        } else {
-          icon.innerHTML = '<circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>';
-        }
-        const btn = document.getElementById('themeToggle');
-        btn.setAttribute('aria-label', theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode');
-        btn.setAttribute('aria-pressed', theme === 'light' ? 'true' : 'false');
-      }
-
-      const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-      const initialTheme = localStorage.getItem('qyx_theme') || (systemDark ? 'dark' : 'light');
-
-      document.documentElement.setAttribute('data-theme', initialTheme);
-      setThemeIcon(initialTheme);
-
-      document.getElementById('themeToggle').addEventListener('click', () => {
-        const cur = document.documentElement.getAttribute('data-theme');
-        const next = cur === 'dark' ? 'light' : 'dark';
-        document.documentElement.setAttribute('data-theme', next);
-        localStorage.setItem('qyx_theme', next);
-        setThemeIcon(next);
-      });
-
-      /* ═══════════════════════════════════════════════════════════════
-         I18N IMPLEMENTATION
-      ═══════════════════════════════════════════════════════════════ */
-      function getTranslation(key) {
-        return TRANSLATIONS[appLang]?.[key] || TRANSLATIONS['en']?.[key] || key;
-      }
-
-      function setAppLanguage(lang) {
-        appLang = lang;
-        localStorage.setItem('qyx_lang', lang);
-        document.documentElement.setAttribute('lang', lang);
-
-        // Sync select dropdown
-        const select = document.getElementById('langSelect');
-        if (select) select.value = lang;
-
-        // Update elements with data-i18n
-        document.querySelectorAll('[data-i18n]').forEach(el => {
-          const key = el.getAttribute('data-i18n');
-          const trans = getTranslation(key);
-          if (trans) el.innerHTML = trans;
-        });
-
-        // Update placeholders
-        document.querySelectorAll('[data-i18n-placeholder]').forEach(el => {
-          const key = el.getAttribute('data-i18n-placeholder');
-          const trans = getTranslation(key);
-          if (trans) el.placeholder = trans;
-        });
-
-        // Update titles
-        document.querySelectorAll('[data-i18n-title]').forEach(el => {
-          const key = el.getAttribute('data-i18n-title');
-          const trans = getTranslation(key);
-          if (trans) el.title = trans;
-        });
-
-        document.querySelectorAll('[data-i18n-aria-label]').forEach(el => {
-          const key = el.getAttribute('data-i18n-aria-label');
-          const trans = getTranslation(key);
-          if (trans) el.setAttribute('aria-label', trans);
-        });
-
-        syncApiStatusText();
-
-        updateEditor();
-        fetchHistory();
-        renderFavorites();
-        if (currentResult) {
-          renderResults(currentResult, editor.value);
-        }
-      }
-
-      /* ═══════════════════════════════════════════════════════════════
-         EDITOR
-      ═══════════════════════════════════════════════════════════════ */
-      function updateEditor() {
-        const val = editor.value;
-        const lines = val ? val.split('\n').length : 0;
-        const chars = val.length;
-        const nonBlank = val ? val.split('\n').filter(l => l.trim()).length : 0;
-        charCount.textContent = val
-          ? getTranslation('char_count_format')
-              .replace('{chars}', chars.toLocaleString())
-              .replace('{lines}', lines)
-              .replace('{nonBlank}', nonBlank)
-          : getTranslation('char_count_initial');
-        const lineCount = Math.max(lines, 1);
-        lineNumbers.innerHTML = val
-          ? Array.from({ length: lineCount }, (_, i) => i + 1).join('<br>')
-          : '1';
-          // Fix: sync line numbers height exactly to editor height
-          lineNumbers.style.height = editor.offsetHeight + 'px';
-          }
-
-      function syncApiStatusText() {
-        if (!apiStatusText) return;
-        const state = apiStatusText.dataset.status || 'disconnected';
-        const stateToKey = {
-          connected: 'api_status_connected',
-          unreachable: 'api_status_unreachable',
-          error: 'api_status_error',
-          disconnected: 'api_status_disconnected',
-        };
-        const key = stateToKey[state] || 'api_status_disconnected';
-        const text = getTranslation(key);
-        apiStatusText.textContent = key === 'api_status_error'
-          ? text.replace('{status}', apiStatusText.dataset.statusCode || '')
-          : text;
-      }
-
-      function looksLikeRestoredPageSource(text) {
-        return /<\s*html|<\s*style|<\s*script|function\s+updateEditor\s*\(|\.stat-bar|\.hero\s*\{|\.workspace\s*\{/i.test(text);
-      }
-
-      function getApiBase() {
-        const configuredBase = ((apiUrlInput && apiUrlInput.value) || localStorage.getItem('qyx_apiUrl') || '').trim();
-        if (configuredBase) return configuredBase.replace(/\/$/, '');
-        return window.location.protocol === 'file:' ? REMOTE_API_BASE : LOCAL_API_BASE;
-      }
-
-      function getApiFallbackBase(base) {
-        const normalized = String(base || '').replace(/\/$/, '');
-        return /localhost:8000|127\.0\.0\.1:8000/i.test(normalized) ? REMOTE_API_BASE : null;
-      }
-
-      function persistApiBase(base) {
-        const normalized = String(base || '').replace(/\/$/, '');
-        if (!normalized) return;
-        localStorage.setItem('qyx_apiUrl', normalized);
-        if (apiUrlInput) apiUrlInput.value = normalized;
-      }
-
-      async function fetchWithApiFallback(base, path, options) {
-        const normalizedBase = String(base || '').replace(/\/$/, '');
-        try {
-          const response = await fetch(`${normalizedBase}${path}`, options);
-          return { response, baseUsed: normalizedBase, fallbackUsed: false };
-        } catch (err) {
-          const fallbackBase = getApiFallbackBase(normalizedBase);
-
-          if (!fallbackBase) throw err;
-          const response = await fetch(`${fallbackBase}${path}`, options);
-          return { response, baseUsed: fallbackBase, fallbackUsed: true };
-        }
-      }
-
-      function normalizeEditorOnLoad() {
-        if (looksLikeRestoredPageSource(editor.value || '')) {
-          editor.value = '';
-          updateEditor();
-        }
-      }
-
-      normalizeEditorOnLoad();
-      window.addEventListener('pageshow', normalizeEditorOnLoad);
-      setTimeout(normalizeEditorOnLoad, 0);
-
-      editor.addEventListener('input', () => {
-        selectedZipFile = null;
-        updateEditor();
-      });
-      editor.addEventListener('scroll', () => {
-        lineNumbers.scrollTop = editor.scrollTop;
-      });
-
-      // Tab key support
-      editor.addEventListener('keydown', e => {
-
-        // TAB SUPPORT
-        if (e.key === 'Tab' && !e.shiftKey) {
-
-          e.preventDefault();
-
-          const start = editor.selectionStart;
-          const end = editor.selectionEnd;
-
-          editor.value =
-            editor.value.substring(0, start) +
-            '    ' +
-            editor.value.substring(end);
-
-          editor.selectionStart =
-            editor.selectionEnd =
-            start + 4;
-
-          updateEditor();
-        }
-
-        // AUTO INDENT ON ENTER
-        else if (e.key === 'Enter' && !e.ctrlKey && !e.metaKey) {
-
-          e.preventDefault();
-
-          const start = editor.selectionStart;
-          const end = editor.selectionEnd;
-
-          const value = editor.value;
-
-          // Find current line
-          const lineStart =
-            value.lastIndexOf('\n', start - 1) + 1;
-
-          const currentLine =
-            value.substring(lineStart, start);
-
-          // Preserve existing indentation
-          const indentMatch = currentLine.match(/^\s*/);
-
-          let indent = indentMatch
-            ? indentMatch[0]
-            : '';
-
-          const trimmed = currentLine.trim();
-
-          // Python indentation
-          if (
-            selectedLang === 'python' &&
-            trimmed.endsWith(':')
-          ) {
-            indent += '    ';
-          }
-
-          // JavaScript / TypeScript / Java / C++
-          else if (
-            ['javascript', 'typescript', 'java', 'cpp']
-              .includes(selectedLang) &&
-            trimmed.endsWith('{')
-          ) {
-            indent += '    ';
-          }
-
-          editor.value =
-            value.substring(0, start) +
-            '\n' + indent +
-            value.substring(end);
-
-          editor.selectionStart =
-            editor.selectionEnd =
-            start + 1 + indent.length;
-
-          updateEditor();
-        }
-
-        // SMART BACKSPACE
-        else if (e.key === 'Backspace') {
-
-          const start = editor.selectionStart;
-          const end = editor.selectionEnd;
-
-          // Only if no text selected
-          if (start === end) {
-
-            const value = editor.value;
-
-            // Text before cursor
-            const beforeCursor =
-              value.substring(0, start);
-
-            // Current line
-            const lineStart =
-              beforeCursor.lastIndexOf('\n') + 1;
-
-            const currentLine =
-              beforeCursor.substring(lineStart);
-
-            // Remove full indentation level
-            if (currentLine.endsWith('    ')) {
-
-              e.preventDefault();
-
-              editor.value =
-                value.substring(0, start - 4) +
-                value.substring(end);
-
-              editor.selectionStart =
-                editor.selectionEnd =
-                start - 4;
-
-              updateEditor();
-            }
-          }
-        }
-      });
-
-      /* ═══════════════════════════════════════════════════════════════
-         FILE UPLOAD
-      ═══════════════════════════════════════════════════════════════ */
-      document.getElementById('fileInput').addEventListener('change', e => {
-        const file = e.target.files[0];
-        if (!file) return;
-        handleUploadedFile(file);
-        e.target.value = '';
-      });
-
-      /* ── Drag and Drop (visual drop zone on editor) ── */
-      const editorWrap  = document.getElementById('editorWrap');
-      const dropOverlay = document.getElementById('dropOverlay');
-      let dragCounter = 0; // track nested dragenter/dragleave events
-
-      // Prevent default browser file-open on body
-      document.body.addEventListener('dragover', e => e.preventDefault());
-      document.body.addEventListener('drop',     e => e.preventDefault());
-
-      editorWrap.addEventListener('dragenter', e => {
-        e.preventDefault();
-        dragCounter++;
-        if (dragCounter === 1) {
-          editorWrap.classList.add('drag-over');
-          dropOverlay.classList.add('visible');
-          dropOverlay.setAttribute('aria-hidden', 'false');
-        }
-      });
-
-      editorWrap.addEventListener('dragover', e => {
-        e.preventDefault();
-        e.dataTransfer.dropEffect = 'copy';
-      });
-
-      editorWrap.addEventListener('dragleave', e => {
-        dragCounter--;
-        if (dragCounter === 0) {
-          editorWrap.classList.remove('drag-over');
-          dropOverlay.classList.remove('visible');
-          dropOverlay.setAttribute('aria-hidden', 'true');
-        }
-      });
-
-      editorWrap.addEventListener('drop', e => {
-        e.preventDefault();
-        dragCounter = 0;
-        editorWrap.classList.remove('drag-over');
-        dropOverlay.classList.remove('visible');
-        dropOverlay.setAttribute('aria-hidden', 'true');
-        const file = e.dataTransfer.files[0];
-        if (!file) return;
-        handleUploadedFile(file);
-      });
-
-      function handleUploadedFile(file) {
-        const ext = file.name.split('.').pop().toLowerCase();
-        if (ext === 'zip') {
-          selectedZipFile = file;
-          selectedMode = 'analyze';
-          document.querySelectorAll('.mode-btn').forEach(x => {
-            x.classList.toggle('active', x.dataset.mode === 'analyze');
-            x.setAttribute('aria-pressed', x.dataset.mode === 'analyze' ? 'true' : 'false');
-          });
-          editor.value = `ZIP ready for project analysis: ${file.name}\n\nClick Analyze Code to scan up to 20 source files.`;
-          updateEditor();
-          resetResults();
-          toast(`Loaded ZIP ${file.name}`, 'success');
-          return;
-        }
-
-        selectedZipFile = null;
-        const langMap = {
-          py: 'python',
-          js: 'javascript',
-          ts: 'typescript',
-          java: 'java',
-          cpp: 'cpp',
-          cc: 'cpp',
-          cxx: 'cpp',
-          c: 'cpp',
-          h: 'cpp',
-          hpp: 'cpp',
-          kt: 'kotlin',
-          kts: 'kotlin',
-        };
-        if (langMap[ext]) setLanguage(langMap[ext]);
-        const reader = new FileReader();
-        reader.onload = ev => {
-          editor.value = ev.target.result;
-          updateEditor();
-          resetResults();
-          toast(getTranslation('toast_loaded').replace('{name}', file.name), 'success');
-        };
-        reader.readAsText(file);
-      }
-
-      /* ═══════════════════════════════════════════════════════════════
-         LANGUAGE TABS
-      ═══════════════════════════════════════════════════════════════ */
-      function setLanguage(lang) {
-        selectedLang = lang;
-
-        // 1. Update the visual tabs
-        document.querySelectorAll('.lang-tab').forEach(t => {
-          const isActive = t.dataset.lang === lang;
-          t.classList.toggle('active', isActive);
-          t.setAttribute('aria-pressed', isActive ? 'true' : 'false');
-        });
-
-        // 2. Check if the editor currently contains one of the samples
-        const currentCode = editor.value.trim();
-        const isSample = Object.values(SAMPLES).map(s => s.trim()).includes(currentCode);
-
-        // 3. If it is a sample, swap it to the new language's sample automatically
-        if (isSample) {
-          editor.value = SAMPLES[lang] || SAMPLES.python;
-          updateEditor();
-        }
-      }
-
-      document.querySelectorAll('.lang-tab').forEach(t => {
-        t.addEventListener('click', () => setLanguage(t.dataset.lang));
-      });
-
-      /* ═══════════════════════════════════════════════════════════════
-         MODE BUTTONS
-      ═══════════════════════════════════════════════════════════════ */
-      document.querySelectorAll('.mode-btn').forEach(b => {
-        b.addEventListener('click', () => {
-          selectedMode = b.dataset.mode;
-          document.querySelectorAll('.mode-btn').forEach(x => {
-            x.classList.remove('active');
-            x.setAttribute('aria-pressed', 'false');
-          });
-          b.classList.add('active');
-          b.setAttribute('aria-pressed', 'true');
-        });
-      });
-
-      /* ═══════════════════════════════════════════════════════════════
-         RESULT TABS
-      ═══════════════════════════════════════════════════════════════ */
-      document.querySelectorAll('.result-tab').forEach(t => {
-        t.addEventListener('click', () => {
-          const tab = t.dataset.rtab;
-          document.querySelectorAll('.result-tab').forEach(x => {
-            x.classList.remove('active');
-            x.setAttribute('aria-selected', 'false');
-          });
-          document.querySelectorAll('.result-pane').forEach(x => x.classList.remove('active'));
-          t.classList.add('active');
-          t.setAttribute('aria-selected', 'true');
-          const paneEl = document.getElementById(`pane-${tab}`);
-          if (paneEl) paneEl.classList.add('active');
-        });
-      });
-
-      /* ═══════════════════════════════════════════════════════════════
-         CLEAR / COPY
-      ═══════════════════════════════════════════════════════════════ */
-      document.getElementById('clearBtn').addEventListener('click', () => {
-        selectedZipFile = null;
-        editor.value = '';
-        updateEditor();
-        resetResults();
-        toast('Code cleared!', 'info');
-      });
-      document.getElementById('copyBtn').addEventListener('click', () => {
-        if (!editor.value.trim()) return;
-        navigator.clipboard.writeText(editor.value).then(() => toast(getTranslation('toast_code_copied'), 'success'));
-      });
-
-      /* ═══════════════════════════════════════════════════════════════
-         API PING
-      ═══════════════════════════════════════════════════════════════ */
-      async function pingApi({ notify = false } = {}) {
-        if (!apiUrlInput || !apiStatusText) return;
-        const base = getApiBase();
-        try {
-          const { response: r, baseUsed, fallbackUsed } = await fetchWithApiFallback(base, '/health', { signal: AbortSignal.timeout(5000) });
-          if (fallbackUsed) persistApiBase(baseUsed);
-          if (r.ok) {
-            apiDot?.classList.add('connected');
-            apiStatusText.dataset.status = 'connected';
-            delete apiStatusText.dataset.statusCode;
-            syncApiStatusText();
-            if (notify) {
-              toast(getTranslation('toast_api_reachable'), 'success');
-            }
-          } else {
-            apiDot?.classList.remove('connected');
-            apiStatusText.dataset.status = 'error';
-            apiStatusText.dataset.statusCode = String(r.status);
-            syncApiStatusText();
-          }
-        } catch {
-          apiDot?.classList.remove('connected');
-          apiStatusText.dataset.status = 'unreachable';
-          delete apiStatusText.dataset.statusCode;
-          syncApiStatusText();
-          if (notify) {
-            toast(getTranslation('toast_api_unreachable'), 'error');
-          }
-        }
-      }
-      const pingBtn = document.getElementById('pingBtn');
-      if (pingBtn) pingBtn.addEventListener('click', () => pingApi({ notify: true }));
-
-      // Auto-ping on load
-      setTimeout(pingApi, 800);
-
-      /* ═══════════════════════════════════════════════════════════════
-         ANALYZE
-      ═══════════════════════════════════════════════════════════════ */
-      analyzeBtn.addEventListener('click', doAnalyze);
-
-      async function doAnalyze() {
-        const code = editor.value.trim();
-        if (!selectedZipFile && !code) { toast(getTranslation('toast_please_paste'), 'error'); return; }
-
-        const base = getApiBase();
-        const endpointMap = {
-          analyze: '/analyze/',
-          explain: '/explanation/',
-          debug: '/debugging/',
-          suggest: '/suggestions/',
-        };
-        const endpoint = endpointMap[selectedMode] || '/analyze/';
-
-        // Loading state
-        analyzeBtn.classList.add('loading');
-        analyzeBtn.disabled = true;
-        showShimmers();
-
-        try {
-          if (selectedZipFile) {
-            const formData = new FormData();
-            formData.append('file', selectedZipFile);
-            const { response: res, baseUsed, fallbackUsed } = await fetchWithApiFallback(base, '/analyze/zip/', {
-              method: 'POST',
-              body: formData,
-              signal: AbortSignal.timeout(60000),
-            });
-            if (fallbackUsed) {
-              persistApiBase(baseUsed);
-            }
-            if (!res.ok) {
-              const err = await res.json().catch(() => ({}));
-              throw new Error(err.detail || `HTTP ${res.status}`);
-            }
-            const data = await res.json();
-            currentResult = data;
-            renderZipResults(data);
-            addToHistory(`ZIP: ${selectedZipFile.name}`, data);
-            apiDot?.classList.add('connected');
-            if (apiStatusText) apiStatusText.textContent = 'Connected';
-            document.getElementById('engineBar').style.display = 'flex';
-            engineInfo.textContent = `${data.provider || 'rule-based'} · ${data.model || ''}`;
-            timeInfo.textContent = data.analysis_time_ms ? data.analysis_time_ms + 'ms' : '';
-            resultActions.style.display = 'flex';
-            return;
-          }
-
-          const { response: res, baseUsed, fallbackUsed } = await fetchWithApiFallback(base, endpoint, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ code, language: selectedLang }),
-            signal: AbortSignal.timeout(30000),
-          });
-          if (fallbackUsed) {
-            persistApiBase(baseUsed);
-          }
-          if (!res.ok) {
-            const err = await res.json().catch(() => ({}));
-            throw new Error(err.detail || `HTTP ${res.status}`);
-          }
-          const data = await res.json();
-          const elapsed = res.headers.get('X-Process-Time-Ms');
-
-          // Normalize to full analysis shape
-          let result;
-          if (selectedMode === 'analyze') {
-            result = data;
-          } else if (selectedMode === 'explain') {
-            result = { explanation: data, debugging: null, suggestions: null, provider: 'rule-based', analysis_time_ms: null };
-          } else if (selectedMode === 'debug') {
-            result = { explanation: null, debugging: data, suggestions: null, provider: 'rule-based', analysis_time_ms: null };
-          } else {
-            result = { explanation: null, debugging: null, suggestions: data, provider: 'rule-based', analysis_time_ms: null };
-          }
-
-          currentResult = result;
-          renderResults(result, code);
-          addToHistory(code, result);
-          apiDot?.classList.add('connected');
-          if (apiStatusText) apiStatusText.textContent = getTranslation('api_status_connected');
-          document.getElementById('engineBar').style.display = 'flex';
-          engineInfo.textContent = (data.provider || 'rule-based') + ' · ' + (data.model || '');
-          if (elapsed) timeInfo.textContent = parseFloat(elapsed).toFixed(0) + 'ms';
-          else if (data.analysis_time_ms) timeInfo.textContent = data.analysis_time_ms + 'ms';
-          resultActions.style.display = 'flex';
-
-        } catch (err) {
-          toast(getTranslation('toast_analysis_failed').replace('{message}', err.message), 'error');
-         
-          resetResults();
-        } finally {
-          analyzeBtn.classList.remove('loading');
-          analyzeBtn.disabled = false;
-        }
-      }
-
-      /* ═══════════════════════════════════════════════════════════════
-         RENDER RESULTS
-      ═══════════════════════════════════════════════════════════════ */
-      function renderResults(result, code) {
-        if (result.files) {
-          renderZipResults(result);
-          return;
-        }
-        if (result.explanation) renderExplain(result.explanation);
-        if (result.debugging) renderDebug(result.debugging);
-        if (result.suggestions) renderSuggest(result.suggestions);
-
-        // Auto-switch to relevant tab
-        const tabOrder = { analyze: 'explain', explain: 'explain', debug: 'debug', suggest: 'suggest' };
-        const targetTab = tabOrder[selectedMode] || 'explain';
-        document.querySelector(`[data-rtab="${targetTab}"]`).click();
-      }
-
-      function renderZipResults(project) {
-        ['emptyExplain', 'emptyDebug', 'emptySuggest'].forEach(id => {
-          document.getElementById(id).style.display = 'none';
-        });
-        ['explainResult', 'debugResult', 'suggestResult'].forEach(id => {
-          document.getElementById(id).style.display = 'block';
-        });
-
-        document.getElementById('explainBadge').textContent = `${project.file_count} files`;
-        const totalIssues = project.files.reduce((sum, file) => sum + file.analysis.debugging.issues.length, 0);
-        const totalSuggestions = project.files.reduce((sum, file) => sum + file.analysis.suggestions.suggestions.length, 0);
-        const errorCount = project.files.reduce((sum, file) => sum + file.analysis.debugging.error_count, 0);
-        const warningCount = project.files.reduce((sum, file) => sum + file.analysis.debugging.warning_count, 0);
-        const infoCount = project.files.reduce((sum, file) => sum + file.analysis.debugging.info_count, 0);
-        document.getElementById('debugBadge').textContent = totalIssues || '0';
-        document.getElementById('suggestBadge').textContent = project.overall_project_score;
-
-        const scoreColor = project.overall_project_score >= 80 ? 'var(--green)'
-          : project.overall_project_score >= 60 ? 'var(--yellow)'
-            : 'var(--red)';
-        const circumference = 2 * Math.PI * 30;
-        const dashOffset = circumference - (project.overall_project_score / 100) * circumference;
-        const fileList = project.files.map((file, i) => {
-          const analysis = file.analysis;
-          const issueSummary = analysis.debugging.clean
-            ? 'No issues detected'
-            : `${analysis.debugging.error_count} errors · ${analysis.debugging.warning_count} warnings · ${analysis.debugging.info_count} info`;
-          return `
-      <details class="zip-file-card" ${i === 0 ? 'open' : ''}>
-        <summary>
-          <span class="zip-file-name">${escHtml(file.filename)}</span>
-          <span class="zip-file-meta">${file.language} · ${analysis.suggestions.overall_score}/100 · ${issueSummary}</span>
-        </summary>
-        <div class="zip-file-body">
-          <p>${escHtml(analysis.explanation.summary)}</p>
-          <div class="zip-mini-grid">
-            <span>${analysis.explanation.line_count} lines</span>
-            <span>${analysis.explanation.function_count} functions</span>
-            <span>${analysis.suggestions.suggestions.length} suggestions</span>
-          </div>
-          ${analysis.debugging.issues.slice(0, 4).map(issue => `
-            <div class="zip-issue ${issue.severity}">
-              <strong>${escHtml(issue.type)}</strong>
-              ${issue.line ? `<span>Line ${issue.line}</span>` : ''}
-              <p>${escHtml(issue.description)}</p>
-            </div>`).join('')}
-        </div>
-      </details>`;
-        }).join('');
-
-        const skipped = project.skipped_files.length
-          ? `<div class="zip-skipped">Skipped: ${project.skipped_files.map(escHtml).join(', ')}</div>`
-          : '';
-
-        document.getElementById('explainResult').innerHTML = `
-    <div class="zip-overview">
-      <div class="score-ring-wrap">
-        <div class="score-ring">
-          <svg width="80" height="80" viewBox="0 0 80 80">
-            <circle cx="40" cy="40" r="30" fill="none" stroke="var(--bg3)" stroke-width="6"/>
-            <circle cx="40" cy="40" r="30" fill="none" stroke="${scoreColor}" stroke-width="6"
-              stroke-dasharray="${circumference}" stroke-dashoffset="${dashOffset}" stroke-linecap="round"/>
-          </svg>
-          <div class="score-ring-text">
-            <div class="score-num" style="color:${scoreColor}">${project.overall_project_score}</div>
-            <div class="score-grade">${project.grade}</div>
-          </div>
-        </div>
-        <div class="score-info">
-          <p class="score-title">Project Health</p>
-          <p>${escHtml(project.summary)}</p>
-        </div>
-      </div>
-      <div class="stat-bar">
-        <div class="stat-chip"><div class="stat-chip-num">${project.file_count}</div><div class="stat-chip-label">Files</div></div>
-        <div class="stat-chip error-chip"><div class="stat-chip-num">${errorCount}</div><div class="stat-chip-label">Errors</div></div>
-        <div class="stat-chip warn-chip"><div class="stat-chip-num">${warningCount}</div><div class="stat-chip-label">Warnings</div></div>
-        <div class="stat-chip info-chip"><div class="stat-chip-num">${infoCount}</div><div class="stat-chip-label">Info</div></div>
-      </div>
-      ${skipped}
-      <div class="zip-file-list">${fileList}</div>
-    </div>`;
-
-        document.getElementById('debugResult').innerHTML = `
-    <div class="stat-bar">
-      <div class="stat-chip error-chip"><div class="stat-chip-num">${errorCount}</div><div class="stat-chip-label">Errors</div></div>
-      <div class="stat-chip warn-chip"><div class="stat-chip-num">${warningCount}</div><div class="stat-chip-label">Warnings</div></div>
-      <div class="stat-chip info-chip"><div class="stat-chip-num">${infoCount}</div><div class="stat-chip-label">Info</div></div>
-    </div>
-    <div class="zip-file-list">${fileList}</div>`;
-
-        document.getElementById('suggestResult').innerHTML = `
-    <div class="score-ring-wrap">
-      <div class="score-ring">
-        <svg width="80" height="80" viewBox="0 0 80 80">
-          <circle cx="40" cy="40" r="30" fill="none" stroke="var(--bg3)" stroke-width="6"/>
-          <circle cx="40" cy="40" r="30" fill="none" stroke="${scoreColor}" stroke-width="6"
-            stroke-dasharray="${circumference}" stroke-dashoffset="${dashOffset}" stroke-linecap="round"/>
-        </svg>
-        <div class="score-ring-text">
-          <div class="score-num" style="color:${scoreColor}">${project.overall_project_score}</div>
-          <div class="score-grade">${project.grade}</div>
-        </div>
-      </div>
-      <div class="score-info">
-        <h3>Project Health Score</h3>
-        <p>${totalSuggestions} improvement suggestion${totalSuggestions !== 1 ? 's' : ''} across ${project.file_count} file${project.file_count !== 1 ? 's' : ''}.</p>
-      </div>
-    </div>
-    <div class="zip-file-list">${fileList}</div>`;
-
-        document.querySelector('[data-rtab="explain"]').click();
-      }
-
-      function renderExplain(exp) {
-        document.getElementById('emptyExplain').style.display = 'none';
-        const el = document.getElementById('explainResult');
-        el.style.display = 'block';
-        document.getElementById('explainBadge').textContent = exp.complexity;
-
-        el.innerHTML = `
-    <div class="explain-summary" tabindex="0">${exp.summary}</div>
-    <div class="explain-meta">
-      <div class="meta-chip complexity-${exp.complexity}">
-        <div class="dot"></div>${exp.complexity}
-      </div>
-      <div class="meta-chip">
-        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16,18 22,12 16,6"/><polyline points="8,6 2,12 8,18"/></svg>
-        ${exp.language}
-      </div>
-      <div class="meta-chip"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14,2 14,8 20,8"/></svg> ${getTranslation('meta_lines').replace('{count}', exp.line_count)}</div>
-      <div class="meta-chip"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16,18 22,12 16,6"/><polyline points="8,6 2,12 8,18"/></svg> ${getTranslation('meta_functions').replace('{count}', exp.function_count)}</div>
-      ${exp.class_count > 0 ? '<div class="meta-chip"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/></svg> ' + getTranslation('meta_classes').replace('{count}', exp.class_count) + '</div>' : ''}
-      <div class="meta-chip"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14,2 14,8 20,8"/></svg> ${exp.line_count} lines</div>
-      <div class="meta-chip"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16,18 22,12 16,6"/><polyline points="8,6 2,12 8,18"/></svg> ${exp.function_count} fn${exp.function_count !== 1 ? 's' : ''}</div>
-      ${exp.class_count > 0 ? '<div class="meta-chip"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/></svg> ' + exp.class_count + ' class' + (exp.class_count !== 1 ? 'es' : '') + '</div>' : ''}
-      ${exp.cyclomatic_complexity != null ? `<div class="meta-chip risk-${(exp.complexity_risk || 'Simple').replace(/\s+/g, '-')}"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22,12 18,12 15,21 9,3 6,12 2,12"/></svg> M=${exp.cyclomatic_complexity} &middot; ${exp.complexity_risk}</div>` : ''}
-    </div>
-    <ul class="key-points">
-      ${exp.key_points.map((p, i) => `<li style="animation-delay:${i * 0.05}s">${renderMarkdown(p)}</li>`).join('')}
-    </ul>
-  `;
-      }
-
-      function renderDebug(dbg) {
-        document.getElementById('emptyDebug').style.display = 'none';
-        const el = document.getElementById('debugResult');
-        el.style.display = 'block';
-
-        const badge = dbg.error_count > 0 ? dbg.error_count : dbg.issues.length;
-        document.getElementById('debugBadge').textContent = badge || '0';
-
-        if (dbg.clean) {
-          el.innerHTML = `
-      <div class="clean-state">
-        <div class="clean-icon"><svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22,4 12,14.01 9,11.01"/></svg></div>
-        <p class="clean-title">${getTranslation('debug_clean_title')}</p>
-        <p>${getTranslation('debug_clean_desc')}</p>
-      </div>`;
-          return;
-        }
-
-        const statBar = `
-    <div class="stat-bar">
-      <div class="stat-chip error-chip">
-        <div class="stat-chip-num">${dbg.error_count}</div>
-        <div class="stat-chip-label">${getTranslation('debug_errors')}</div>
-      </div>
-      <div class="stat-chip warn-chip">
-        <div class="stat-chip-num">${dbg.warning_count}</div>
-        <div class="stat-chip-label">${getTranslation('debug_warnings')}</div>
-      </div>
-      <div class="stat-chip info-chip">
-        <div class="stat-chip-num">${dbg.info_count}</div>
-        <div class="stat-chip-label">${getTranslation('debug_info')}</div>
-      </div>
-    </div>`;
-
-        const cards = dbg.issues.map((issue, i) => `
-  <details class="issue-card ${issue.severity}"
-           style="animation-delay:${i * 0.05}s">
-
-    <summary class="collapsible-summary">
-      <span>${issue.type}</span>
-      ${issue.line
-        ? `<span class="issue-line">Line ${issue.line}</span>`
-        : ''}
-    </summary>
-
-    <div class="issue-content">
-      <div class="issue-header">
-        <span class="issue-badge">${issue.severity}</span>
-      </div>
-
-      <div class="issue-desc">${issue.description}</div>
-
-      ${issue.code_snippet
-        ? `<div class="issue-snippet">${escHtml(issue.code_snippet)}</div>`
-        : ''}
-
-      <div class="issue-fix">${issue.suggestion}</div>
-    </div>
-
-  </details>
-`).join('');
-
-        el.innerHTML = statBar + cards;
-      }
-
-      /* ═══════════════════════════════════════════════════════════════
-         PURE-JS LINE DIFF (LCS-based)
-      ═══════════════════════════════════════════════════════════════ */
-      function computeDiff(originalText, fixedText) {
-        const aLines = originalText.split('\n');
-        const bLines = fixedText.split('\n');
-        const m = aLines.length, n = bLines.length;
-
-        // Build LCS table
-        const dp = Array.from({ length: m + 1 }, () => new Array(n + 1).fill(0));
-        for (let i = 1; i <= m; i++) {
-          for (let j = 1; j <= n; j++) {
-            dp[i][j] = aLines[i - 1] === bLines[j - 1]
-              ? dp[i - 1][j - 1] + 1
-              : Math.max(dp[i - 1][j], dp[i][j - 1]);
-          }
-        }
-
-        // Backtrack to get edit script
-        const left = [];   // original column (removed + equal)
-        const right = [];  // fixed column    (added + equal)
-        let i = m, j = n;
-        const edits = [];
-        while (i > 0 || j > 0) {
-          if (i > 0 && j > 0 && aLines[i - 1] === bLines[j - 1]) {
-            edits.push({ type: 'equal', a: aLines[i - 1], b: bLines[j - 1] });
-            i--; j--;
-          } else if (j > 0 && (i === 0 || dp[i][j - 1] >= dp[i - 1][j])) {
-            edits.push({ type: 'added', b: bLines[j - 1] });
-            j--;
-          } else {
-            edits.push({ type: 'removed', a: aLines[i - 1] });
-            i--;
-          }
-        }
-        edits.reverse();
-
-        // Separate into two column lists
-        let aIdx = 0, bIdx = 0;
-        edits.forEach(e => {
-          if (e.type === 'equal') {
-            left.push({ type: 'equal', text: e.a, num: ++aIdx });
-            right.push({ type: 'equal', text: e.b, num: ++bIdx });
-          } else if (e.type === 'removed') {
-            left.push({ type: 'removed', text: e.a, num: ++aIdx });
-            right.push({ type: 'placeholder', text: '' });
-          } else {
-            left.push({ type: 'placeholder', text: '' });
-            right.push({ type: 'added', text: e.b, num: ++bIdx });
-          }
-        });
-        return { left, right };
-      }
-
-      function renderDiffCol(lines) {
-        return lines.map(l => {
-          if (l.type === 'placeholder') {
-            return `<div class="diff-line diff-line-placeholder"><span class="diff-line-num"></span><span class="diff-line-content"> </span></div>`;
-          }
-          const cls = l.type === 'removed' ? 'diff-line-removed'
-            : l.type === 'added' ? 'diff-line-added'
-              : 'diff-line-equal';
-          const prefix = l.type === 'removed' ? '− ' : l.type === 'added' ? '+ ' : '  ';
-          return `<div class="diff-line ${cls}"><span class="diff-line-num">${l.num}</span><span class="diff-line-content">${prefix}${escHtml(l.text)}</span></div>`;
-        }).join('');
-      }
-
-      /* Find the region of the editor code that best matches the fixed snippet.
-         Returns the matching original lines (as a string) or null if nothing found. */
-      function findOriginalSnippet(editorCode, fixedCode) {
-        if (!editorCode || !fixedCode) return null;
-        const fixedLines  = fixedCode.split('\n').map(l => l.trim()).filter(Boolean);
-        const editorLines = editorCode.split('\n');
-        if (!fixedLines.length || !editorLines.length) return null;
-
-        let bestScore = 0, bestStart = -1;
-
-        for (let i = 0; i < editorLines.length; i++) {
-          let score = 0;
-          for (let j = 0; j < fixedLines.length && i + j < editorLines.length; j++) {
-            const el = editorLines[i + j].trim();
-            const fl = fixedLines[j].trim();
-            if (!el || !fl) continue;
-            if (el === fl) {
-              score += 2;
-            } else if (fl.length > 6 && el.includes(fl.slice(0, Math.min(fl.length, 18)))) {
-              score += 1;
-            } else if (el.length > 6 && fl.includes(el.slice(0, Math.min(el.length, 18)))) {
-              score += 1;
-            }
-          }
-          if (score > bestScore) { bestScore = score; bestStart = i; }
-        }
-
-        if (bestStart === -1 || bestScore < 1) return null;
-
-        // Extract the matched region (same number of lines as the fixed snippet)
-        const start = Math.max(0, bestStart);
-        const end   = Math.min(editorLines.length, bestStart + fixedLines.length);
-        return editorLines.slice(start, end).join('\n');
-      }
-
-      /* Build the side-by-side diff HTML for one suggestion's example */
-      function buildDiffHtml(originalSnippet, fixedCode, copyId) {
-        const diff = computeDiff(originalSnippet, fixedCode);
-        const hasChanges = diff.left.some(l  => l.type === 'removed') ||
-                           diff.right.some(r => r.type === 'added');
-        // If nothing changed (identical), just show as fixed-code block
-        if (!hasChanges) {
-          const lines = fixedCode.split('\n').map((text, idx) => ({ type: 'added', text, num: idx + 1 }));
-          return `
-          <div class="diff-wrapper">
-            <div class="diff-header">
-              <div class="diff-header-labels">
-                <span class="diff-label diff-label-after"><span class="diff-label-dot"></span>Fixed Code</span>
-              </div>
-              <button class="btn-copy-fix" id="${copyId}" aria-label="Copy fixed code">
-                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
-                Copy fixed
-              </button>
-            </div>
-            <div class="diff-col" style="width:100%">${renderDiffCol(lines)}</div>
-          </div>`;
-        }
-        return `
-        <div class="diff-wrapper">
-          <div class="diff-header">
-            <div class="diff-header-labels">
-              <span class="diff-label diff-label-before"><span class="diff-label-dot"></span>Before</span>
-              <span class="diff-label diff-label-after"><span class="diff-label-dot"></span>After</span>
-            </div>
-            <button class="btn-copy-fix" id="${copyId}" aria-label="Copy fixed code">
-              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
-              Copy fixed
-            </button>
-          </div>
-          <div class="diff-view">
-            <div class="diff-col">${renderDiffCol(diff.left)}</div>
-            <div class="diff-col">${renderDiffCol(diff.right)}</div>
-          </div>
-        </div>`;
-      }
-
-      /* ═══════════════════════════════════════════════════════════════
-         RENDER SUGGESTIONS (with diff view)
-      ═══════════════════════════════════════════════════════════════ */
-      function renderSuggest(sugg) {
-        document.getElementById('emptySuggest').style.display = 'none';
-        const el = document.getElementById('suggestResult');
-        el.style.display = 'block';
-        document.getElementById('suggestBadge').textContent = sugg.suggestions.length || '0';
-
-        const scoreColor = sugg.overall_score >= 80 ? 'var(--green)'
-          : sugg.overall_score >= 60 ? 'var(--yellow)'
-            : 'var(--red)';
-
-        const circumference = 2 * Math.PI * 30;
-        const dashOffset = circumference - (sugg.overall_score / 100) * circumference;
-
-        const ring = `
-    <div class="score-ring-wrap">
-      <div class="score-ring">
-        <svg width="80" height="80" viewBox="0 0 80 80">
-          <circle cx="40" cy="40" r="30" fill="none" stroke="var(--bg3)" stroke-width="6"/>
-          <circle cx="40" cy="40" r="30" fill="none" stroke="${scoreColor}" stroke-width="6"
-            stroke-dasharray="${circumference}"
-            stroke-dashoffset="${dashOffset}"
-            stroke-linecap="round"
-            style="transition:stroke-dashoffset 1s ease"/>
-        </svg>
-        <div class="score-ring-text">
-          <div class="score-num" style="color:${scoreColor}">${sugg.overall_score}</div>
-          <div class="score-grade">${sugg.grade}</div>
-        </div>
-      </div>
-      <div class="score-info">
-        <p class="score-title">${getTranslation('suggest_quality_score')}</p>
-        <p>${sugg.next_step}</p>
-      </div>
-    </div>`;
-
-        const cards = sugg.suggestions.length === 0
-          ? `<div class="clean-state"><div class="clean-icon"><svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26"/></svg></div><p class="clean-title">${getTranslation('suggest_perfect_title')}</p><p>${getTranslation('suggest_perfect_desc')}</p></div>`
-          : sugg.suggestions.map((s, i) => {
-
-            let exampleHtml = '';
-            if (s.example) {
-              const copyId  = `copy-fix-${i}`;
-              const rawLines = s.example.split('\n');
-
-              // Case 1: example has unified diff markers (- / +)
-              const hasMarkers = rawLines.some(l => /^[\-\+]/.test(l) && l.length > 1);
-              if (hasMarkers) {
-                const originalText = rawLines.filter(l => !l.startsWith('+')).map(l => l.replace(/^-\s?/, '')).join('\n');
-                const fixedText    = rawLines.filter(l => !l.startsWith('-')).map(l => l.replace(/^\+\s?/, '')).join('\n');
-                exampleHtml = buildDiffHtml(originalText, fixedText, copyId);
-
-              // Case 2: two blocks separated by a blank line (before \n\n after)
-              } else {
-                const blankIdx = rawLines.findIndex(l => l.trim() === '');
-                if (blankIdx > 0 && blankIdx < rawLines.length - 1) {
-                  const originalText = rawLines.slice(0, blankIdx).join('\n');
-                  const fixedText    = rawLines.slice(blankIdx + 1).join('\n');
-                  exampleHtml = buildDiffHtml(originalText, fixedText, copyId);
-
-                // Case 3 (most common from API): single fixed-code block
-                // → find matching region in editor as "Before", diff against example as "After"
-                } else {
-                  const originalSnippet = findOriginalSnippet(editor.value, s.example);
-                  if (originalSnippet) {
-                    exampleHtml = buildDiffHtml(originalSnippet, s.example, copyId);
-                  } else {
-                    // No match – show fixed code as green "Fixed Code" block
-                    const lines = rawLines.map((text, idx) => ({ type: 'added', text, num: idx + 1 }));
-                    exampleHtml = `
-                    <div class="diff-wrapper">
-                      <div class="diff-header">
-                        <div class="diff-header-labels">
-                          <span class="diff-label diff-label-after"><span class="diff-label-dot"></span>Fixed Code</span>
-                        </div>
-                        <button class="btn-copy-fix" id="${copyId}" aria-label="Copy fixed code">
-                          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
-                          Copy fixed
-                        </button>
-                      </div>
-                      <div class="diff-col" style="width:100%">${renderDiffCol(lines)}</div>
-                    </div>`;
-                  }
-                }
-              }
-            }
-
-          return `
-  <details class="suggest-card priority-${s.priority}" style="animation-delay:${i * 0.05}s">
-
-    <summary class="collapsible-summary">
-      <span>${s.category}</span>
-      <span style="font-size:0.7rem;color:var(--text3)">
-        ${getTranslation('suggest_priority').replace('{priority}', s.priority)}
-      </span>
-    </summary>
-
-    <div class="issue-content">
-      <div class="suggest-desc">${s.description}</div>
-      ${exampleHtml}
-    </div>
-
-  </details>`;
-          }).join('');
-
-        el.innerHTML = ring + cards;
-
-        // Wire up "Copy fixed" buttons after DOM insertion
-        sugg.suggestions.forEach((s, i) => {
-          if (!s.example) return;
-          const btn = document.getElementById(`copy-fix-${i}`);
-          if (!btn) return;
-
-          // Always copy the after/fixed code
-          const rawLines   = s.example.split('\n');
-          const hasMarkers = rawLines.some(l => /^[\-\+]/.test(l) && l.length > 1);
-          let fixedCode;
-          if (hasMarkers) {
-            fixedCode = rawLines.filter(l => !l.startsWith('-')).map(l => l.replace(/^\+\s?/, '')).join('\n');
-          } else {
-            const blankIdx = rawLines.findIndex(l => l.trim() === '');
-            fixedCode = blankIdx > 0 && blankIdx < rawLines.length - 1
-              ? rawLines.slice(blankIdx + 1).join('\n')
-              : s.example;
-          }
-
-          btn.addEventListener('click', () => {
-            navigator.clipboard.writeText(fixedCode).then(() => {
-              btn.textContent = '\u2713 Copied!';
-              btn.style.background = 'rgba(34,212,123,0.25)';
-              setTimeout(() => {
-                btn.innerHTML = `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg> Copy fixed`;
-                btn.style.background = '';
-              }, 2000);
-            }).catch(() => toast('Copy failed', 'error'));
-          });
-        });
-      }
-
-      /* ═══════════════════════════════════════════════════════════════
-         SHIMMER LOADING
-      ═══════════════════════════════════════════════════════════════ */
-      function showShimmers() {
-        const shims = '<div class="shimmer-card"></div>'.repeat(3);
-        ['explainResult', 'debugResult', 'suggestResult'].forEach(id => {
-          const el = document.getElementById(id);
-          el.style.display = 'block';
-          el.innerHTML = shims;
-        });
-        ['emptyExplain', 'emptyDebug', 'emptySuggest'].forEach(id => {
-          document.getElementById(id).style.display = 'none';
-        });
-      }
-
-      function resetResults() {
-        ['explainResult', 'debugResult', 'suggestResult'].forEach(id => {
-          const el = document.getElementById(id);
-          el.style.display = 'none';
-          el.innerHTML = '';
-        });
-        ['emptyExplain', 'emptyDebug', 'emptySuggest'].forEach(id => {
-          document.getElementById(id).style.display = 'flex';
-        });
-        ['explainBadge', 'debugBadge', 'suggestBadge'].forEach(id => {
-          document.getElementById(id).textContent = '';
-        });
-        resultActions.style.display = 'none';
-        document.getElementById('engineBar').style.display = 'none';
-        engineInfo.textContent = '';
-        timeInfo.textContent = '';
-        currentResult = null;
-      }
-
-      /* ═══════════════════════════════════════════════════════════════
-         HISTORY (Paginated & Sorted)
-      ═══════════════════════════════════════════════════════════════ */
-      let historyOffset = 0;
-      const historyLimit = 5;
-      let historyTotal = 0;
-      let historySortBy = 'timestamp';
-      let historyOrder = 'desc';
-
-      async function addToHistory(code, result) {
-        const lang = result.explanation?.language || result.debugging?.language || result.suggestions?.language || selectedLang;
-        
-        let issue_count = 0;
-        if (result.debugging?.issues) {
-          issue_count = result.debugging.issues.length;
-        } else if (result.files) {
-          issue_count = result.files.reduce((acc, f) => acc + (f.analysis?.debugging?.issues?.length || 0), 0);
-        }
-
-        // 1. Always save locally as a fallback
-        const localEntry = {
-          id: Date.now(),
-          code,
-          result,
-          lang,
-          ts: new Date().toISOString(),
-          preview: code.slice(0, 60).replace(/\n/g, ' '),
-          score: result.suggestions?.overall_score ?? result.overall_project_score ?? null,
-          issue_count: issue_count
-        };
-        let localHistory = JSON.parse(localStorage.getItem('qyx_history') || '[]');
-        localHistory.unshift(localEntry);
-        if (localHistory.length > MAX_HISTORY) localHistory = localHistory.slice(0, MAX_HISTORY);
-        localStorage.setItem('qyx_history', JSON.stringify(localHistory));
-
-        // 2. Save to backend if connected
-        const apiBase = getApiBase();
-        try {
-          const score = result.suggestions?.overall_score ?? result.overall_project_score ?? null;
-          await fetch(`${apiBase}/history/`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-              code,
-              language: lang,
-              score,
-              issue_count,
-              result_json: JSON.stringify(result)
-            })
-          });
-          historyOffset = 0;
-          await fetchHistory();
-        } catch (err) {
-          loadLocalHistory();
-        }
-      }
-
-      async function fetchHistory() {
-        const apiBase = getApiBase();
-        try {
-          const res = await fetch(`${apiBase}/history/?limit=${historyLimit}&offset=${historyOffset}&sort_by=${historySortBy}&order=${historyOrder}`);
-          if (res.ok) {
-            const data = await res.json();
-            history = data.items;
-            historyTotal = data.meta.total;
-            renderHistory();
-            updatePaginationUI();
-            return;
-          }
-        } catch (err) {
-          // Fallback to local storage on fetch error
-        }
-        loadLocalHistory();
-      }
-
-      async function confirmDeleteHistory(id) {
-
-        if(!confirm("Delete this history entry?")) return;
-        const apiBase = getApiBase();
-
-        const res = await fetch(`${apiBase}/history/${id}`,{
-          method: "DELETE"
-        });
-
-        if(res.ok) {
-          fetchHistory();
-        } else {
-          toast("Failed to delete entry","error");
-        }
-      }
-
-      function loadLocalHistory() {
-        let localHistory = JSON.parse(localStorage.getItem('qyx_history') || '[]');
-        
-        // Sort local history
-        localHistory.sort((a, b) => {
-          let valA, valB;
-          if (historySortBy === 'score') {
-            valA = a.score !== undefined ? a.score : (a.result?.suggestions?.overall_score || a.result?.overall_project_score || null);
-            valB = b.score !== undefined ? b.score : (b.result?.suggestions?.overall_score || b.result?.overall_project_score || null);
-            if (valA === null || valA === undefined) valA = -1;
-            if (valB === null || valB === undefined) valB = -1;
-          } else if (historySortBy === 'issue_count') {
-            if (a.issue_count !== undefined) {
-              valA = a.issue_count;
-            } else if (a.result) {
-              valA = a.result.debugging?.issues?.length || (a.result.files ? a.result.files.reduce((acc, f) => acc + (f.analysis?.debugging?.issues?.length || 0), 0) : 0);
-            } else {
-              valA = 0;
-            }
-            if (b.issue_count !== undefined) {
-              valB = b.issue_count;
-            } else if (b.result) {
-              valB = b.result.debugging?.issues?.length || (b.result.files ? b.result.files.reduce((acc, f) => acc + (f.analysis?.debugging?.issues?.length || 0), 0) : 0);
-            } else {
-              valB = 0;
-            }
-          } else {
-            valA = a.id || 0;
-            valB = b.id || 0;
-          }
-          
-          if (valA < valB) return historyOrder === 'asc' ? -1 : 1;
-          if (valA > valB) return historyOrder === 'asc' ? 1 : -1;
-          return b.id - a.id; // stable tie-breaker
-        });
-
-        historyTotal = localHistory.length;
-        history = localHistory.slice(historyOffset, historyOffset + historyLimit);
-        
-        renderHistory();
-        updatePaginationUI();
-      }
-
-      function renderHistory() {
-        const listContainer = document.getElementById('historyList');
-        if (!listContainer) return;
-
-        if (!history || !history.length) {
-          listContainer.innerHTML = `<div class="list-empty" data-i18n="empty_history">${getTranslation('empty_history')}</div>`;
-          return;
-        }
-
-        listContainer.innerHTML = history.map(h => {
-          const lang = h.language || h.lang || '?';
-          const preview = h.code_preview || h.preview || '';
-          
-          let displayTime = h.timestamp || h.ts || '';
-          if (displayTime.includes('T') || displayTime.includes('-')) {
-            try {
-              let isoStr = displayTime;
-              if (!isoStr.endsWith('Z') && !isoStr.includes('T')) {
-                isoStr = isoStr.replace(' ', 'T') + 'Z';
-              }
-              const d = new Date(isoStr);
-              const day = String(d.getDate()).padStart(2, '0');
-              const month = String(d.getMonth() + 1).padStart(2, '0');
-              const year = d.getFullYear();
-              const hours = String(d.getHours()).padStart(2, '0');
-              const minutes = String(d.getMinutes()).padStart(2, '0');
-              const seconds = String(d.getSeconds()).padStart(2, '0');
-              displayTime = `${day}/${month}/${year} ${hours}:${minutes}:${seconds}`;
-            } catch (e) {}
-          }
-
-          const score = h.score !== undefined ? h.score : (h.result?.suggestions?.overall_score || h.result?.overall_project_score || null);
-          let issueCount = 0;
-          if (h.issue_count !== undefined) {
-            issueCount = h.issue_count;
-          } else if (h.result) {
-            if (h.result.debugging?.issues) {
-              issueCount = h.result.debugging.issues.length;
-            } else if (h.result.files) {
-              issueCount = h.result.files.reduce((acc, f) => acc + (f.analysis?.debugging?.issues?.length || 0), 0);
-            }
-          }
-
-          let scoreClass = 'score-bad';
-          if (score >= 80) scoreClass = 'score-good';
-          else if (score >= 60) scoreClass = 'score-warn';
-          const scoreHtml = score !== null ? `<span class="history-score ${scoreClass}">Score: ${score}%</span>` : '';
-
-          let issuesClass = issueCount === 0 ? 'issues-clean' : 'issues-exist';
-          const issuesHtml = `<span class="history-issues ${issuesClass}">${issueCount} ${issueCount === 1 ? 'issue' : 'issues'}</span>`;
-
-          const label = getTranslation('history_entry_label')
-            .replace('{lang}', lang)
-            .replace('{time}', displayTime);
-
-          return `
-            <div class="history-item" onclick="loadEntry('${h.id}')" tabindex="0" role="button" aria-label="${label}" onkeydown="if(event.key==='Enter'||event.key===' ') { event.preventDefault(); loadEntry('${h.id}'); }">
-              <span class="history-lang">${lang}</span>
-              <span class="history-thumb">${escHtml(preview)}…</span>
-              <div class="history-stats" style="display:flex; gap:6px; align-items:center; margin-right:8px; flex-shrink:0;">
-                ${scoreHtml}
-                ${issuesHtml}
-              </div>
-              <span class="history-meta">${displayTime}</span>
-              <button
-              class="delete-btn"
-              onclick="event.stopPropagation(); confirmDeleteHistory('${h.id}')"
-              title="Delete entry"
-              aria-label="Delete entry">
-              <svg 
-              xmlns="http://www.w3.org/2000/svg"
-              width="16"
-              height="16"
-              viewBox=" 0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2" 
-              stroke-linecap="round" 
-              stroke-linejoin="round">
-              <polyline points="3 6 5 6 21 6"></polyline>
-              <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path>
-              <path d="M10 11v6"></path>
-              <path d="M14 11v6"></path>
-              <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"></path>
-              </svg>
-              </button>
-            </div>`;
-        }).join('');
-      }
-
-      function updatePaginationUI() {
-        const btnPrev = document.getElementById('btnPrevHistory');
-        const btnNext = document.getElementById('btnNextHistory');
-        const pageNum = document.getElementById('historyPageNum');
-        if (!btnPrev || !btnNext || !pageNum) return;
-
-        const currentPage = Math.floor(historyOffset / historyLimit) + 1;
-        const totalPages = Math.max(Math.ceil(historyTotal / historyLimit), 1);
-        pageNum.textContent = `Page ${currentPage} of ${totalPages}`;
-
-        btnPrev.disabled = historyOffset <= 0;
-        btnNext.disabled = historyOffset + historyLimit >= historyTotal;
-      }
-
-      document.getElementById('btnPrevHistory')?.addEventListener('click', () => {
-        if (historyOffset > 0) {
-          historyOffset = Math.max(0, historyOffset - historyLimit);
-          fetchHistory();
-        }
-      });
-
-      document.getElementById('btnNextHistory')?.addEventListener('click', () => {
-        if (historyOffset + historyLimit < historyTotal) {
-          historyOffset += historyLimit;
-          fetchHistory();
-        }
-      });
-
-      document.getElementById('historySortSelect')?.addEventListener('change', e => {
-        historySortBy = e.target.value;
-        historyOffset = 0;
-        fetchHistory();
-      });
-
-      document.getElementById('historyOrderSelect')?.addEventListener('change', e => {
-        historyOrder = e.target.value;
-        historyOffset = 0;
-        fetchHistory();
-      });
-
-      document.getElementById('clearHistoryBtn').addEventListener('click', async () => {
-        if (!confirm(getTranslation('confirm_clear_history'))) return;
-
-        const apiBase = getApiBase();
-        try {
-          await fetch(`${apiBase}/history/`, { method: 'DELETE' });
-        } catch (err) {}
-
-        localStorage.removeItem('qyx_history');
-        historyOffset = 0;
-        await fetchHistory();
-        toast(getTranslation('toast_history_cleared'), 'info');
-      });
-
-      async function getHistoryForDownload() {
-        const apiBase = getApiBase();
-        try {
-          const res = await fetch(`${apiBase}/history/?limit=1000`);
-          if (res.ok) {
-            const data = await res.json();
-            return data.items;
-          }
-        } catch (e) {}
-        return JSON.parse(localStorage.getItem('qyx_history') || '[]');
-      }
-
-      document.getElementById('downloadJsonBtn').addEventListener('click', async () => {
-        const downloadItems = await getHistoryForDownload();
-        if (!downloadItems || downloadItems.length === 0) {
-          toast('No history to download', 'info');
-          return;
-        }
-        const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(downloadItems, null, 2));
-        const dlNode = document.createElement('a');
-        dlNode.setAttribute("href", dataStr);
-        dlNode.setAttribute("download", "history.json");
-        document.body.appendChild(dlNode);
-        dlNode.click();
-        dlNode.remove();
-        toast('Downloaded history.json', 'success');
-      });
-
-      document.getElementById('downloadCsvBtn').addEventListener('click', async () => {
-        const downloadItems = await getHistoryForDownload();
-        if (!downloadItems || downloadItems.length === 0) {
-          toast('No history to download', 'info');
-          return;
-        }
-
-        const headers = Object.keys(downloadItems[0]);
-        const csvRows = [];
-        csvRows.push(headers.join(','));
-
-        for (const row of downloadItems) {
-          const values = headers.map(header => {
-            let val = row[header] === null || row[header] === undefined ? '' : String(row[header]);
-            val = val.replace(/"/g, '""');
-            return `"${val}"`;
-          });
-          csvRows.push(values.join(','));
-        }
-
-        const csvContent = "data:text/csv;charset=utf-8," + encodeURIComponent(csvRows.join('\n'));
-        const dlNode = document.createElement('a');
-        dlNode.setAttribute("href", csvContent);
-        dlNode.setAttribute("download", "history.csv");
-        document.body.appendChild(dlNode);
-        dlNode.click();
-        dlNode.remove();
-        toast('Downloaded history.csv', 'success');
-      });
-
-      function normalizeSavedEntryId(id) {
-        const normalizedId = Number(id);
-        return Number.isNaN(normalizedId) ? null : normalizedId;
-      }
-
-      function restoreSavedEntry(entry) {
-        if (!entry) return;
-        editor.value = entry.code;
-        if (entry.lang) {
-          setLanguage(entry.lang.toLowerCase());
-        }
-        updateEditor();
-        currentResult = entry.result;
-        renderResults(entry.result, entry.code);
-        document.getElementById('workspace').scrollIntoView({ behavior: 'smooth' });
-      }
-
-      async function loadEntry(id) {
-        const normalizedId = normalizeSavedEntryId(id);
-        if (normalizedId === null) return;
-
-        const apiBase = getApiBase();
-        try {
-          const res = await fetch(`${apiBase}/history/${normalizedId}`);
-          if (res.ok) {
-            const entry = await res.json();
-            const hydrated = {
-              code: entry.code || '',
-              lang: entry.language || 'python',
-              result: entry.result_json ? JSON.parse(entry.result_json) : null
-            };
-            restoreSavedEntry(hydrated);
-            return;
-          }
-        } catch (err) {}
-
-        // Fallback to local
-        const history = JSON.parse(localStorage.getItem('qyx_history') || '[]');
-        const entry = history.find(h => h.id === normalizedId);
-        restoreSavedEntry(entry);
-      }
-
-      window.loadEntry = loadEntry;
-
-      /* ═══════════════════════════════════════════════════════════════
-         FAVORITES
-      ═══════════════════════════════════════════════════════════════ */
-      document.getElementById('favBtn').addEventListener('click', () => {
-        if (!currentResult || !editor.value.trim()) return;
-        const entry = {
-          id: Date.now(),
-          code: editor.value,
-          result: currentResult,
-          lang: currentResult.explanation?.language || selectedLang,
-          ts: new Date().toISOString(),
-          preview: editor.value.slice(0, 60).replace(/\n/g, ' '),
-        };
-        favorites.unshift(entry);
-        if (favorites.length > 30) favorites = favorites.slice(0, 30);
-        localStorage.setItem('qyx_favorites', JSON.stringify(favorites));
-        renderFavorites();
-        toast(getTranslation('toast_saved_favorites'), 'success');
-      });
-
-      function renderFavorites() {
-        if (!favorites.length) {
-          favList.innerHTML = `<div class="list-empty" data-i18n="empty_favorites">${getTranslation('empty_favorites')}</div>`;
-          return;
-        }
-        favList.innerHTML = favorites.map(f => {
-          const score = f.result?.suggestions?.overall_score || f.result?.overall_project_score || null;
-          let issueCount = 0;
-          if (f.result) {
-            if (f.result.debugging?.issues) {
-              issueCount = f.result.debugging.issues.length;
-            } else if (f.result.files) {
-              issueCount = f.result.files.reduce((acc, file) => acc + (file.analysis?.debugging?.issues?.length || 0), 0);
-            }
-          }
-          
-          let displayTime = f.ts || '';
-          if (displayTime.includes('T') || displayTime.includes('-')) {
-            try {
-              let isoStr = displayTime;
-              if (!isoStr.endsWith('Z') && !isoStr.includes('T')) {
-                isoStr = isoStr.replace(' ', 'T') + 'Z';
-              }
-              const d = new Date(isoStr);
-              const day = String(d.getDate()).padStart(2, '0');
-              const month = String(d.getMonth() + 1).padStart(2, '0');
-              const year = d.getFullYear();
-              const hours = String(d.getHours()).padStart(2, '0');
-              const minutes = String(d.getMinutes()).padStart(2, '0');
-              const seconds = String(d.getSeconds()).padStart(2, '0');
-              displayTime = `${day}/${month}/${year} ${hours}:${minutes}:${seconds}`;
-            } catch (e) {}
-          }
-
-          let scoreClass = 'score-bad';
-          if (score >= 80) scoreClass = 'score-good';
-          else if (score >= 60) scoreClass = 'score-warn';
-          const scoreHtml = score !== null ? `<span class="history-score ${scoreClass}">Score: ${score}%</span>` : '';
-
-          let issuesClass = issueCount === 0 ? 'issues-clean' : 'issues-exist';
-          const issuesHtml = `<span class="history-issues ${issuesClass}">${issueCount} ${issueCount === 1 ? 'issue' : 'issues'}</span>`;
-
-          const label = getTranslation('favorite_entry_label')
-            .replace('{lang}', f.lang || '?')
-            .replace('{time}', displayTime);
-
-          return `
-            <div class="fav-item" onclick="loadFav('${f.id}')" tabindex="0" role="button" aria-label="${label}" onkeydown="if(event.key==='Enter'||event.key===' ') { event.preventDefault(); loadFav('${f.id}'); }">
-              <span class="history-lang">${f.lang || '?'}</span>
-              <span class="history-thumb">${escHtml(f.preview)}…</span>
-              <div class="history-stats" style="display:flex; gap:6px; align-items:center; margin-right:8px; flex-shrink:0;">
-                ${scoreHtml}
-                ${issuesHtml}
-              </div>
-              <span class="history-meta" style="opacity:0.5"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg></span>
-              <button class="delete-btn" onclick="event.stopPropagation(); confirmDeleteFavorite('${f.id}')"
-              title="Delete favorite" aria-label="Delete favorite">
-              <svg 
-              xmlns="http://www.w3.org/2000/svg"
-              width="16"
-              height="16"
-              viewBox=" 0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2" 
-              stroke-linecap="round" 
-              stroke-linejoin="round">
-              <polyline points="3 6 5 6 21 6"></polyline>
-              <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path>
-              <path d="M10 11v6"></path>
-              <path d="M14 11v6"></path>
-              <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"></path>
-              </svg>
-              </button>
-            </div>`;
-        }).join('');
-      }
-
-      async function confirmDeleteFavorite(id) {
-        if(!confirm("Delete this favorite?")) return;
-
-        const normalizedId = Number(id);
-
-        favorites = favorites.filter(f => f.id !== normalizedId);
-        localStorage.setItem("qyx_favorites",
-        JSON.stringify(favorites));
-
-        renderFavorites();
-
-      }
-
-document.getElementById('clearFavsBtn').addEventListener('click', () => {
-  if (!confirm(getTranslation('confirm_clear_favs'))) return;
-
-  favorites = [];
-  localStorage.removeItem('qyx_favorites');
-  renderFavorites();
-  toast(getTranslation('toast_favorites_cleared'), 'info');
-});
-      function loadFav(id) {
-        const normalizedId = normalizeSavedEntryId(id);
-        if (normalizedId === null) return;
-        const entry = favorites.find(f => f.id === normalizedId);
-        restoreSavedEntry(entry);
-      }
-
-      window.loadFav = loadFav;
-      /* ═══════════════════════════════════════════════════════════════
-         DOWNLOAD
-      ═══════════════════════════════════════════════════════════════ */
-      document.getElementById('downloadBtn').addEventListener('click', () => {
-        if (!currentResult) return;
-        const text = buildReport(currentResult, editor.value);
-        const blob = new Blob([text], { type: 'text/plain' });
-        const a = document.createElement('a');
-        a.href = URL.createObjectURL(blob);
-        a.download = `qyverixai-report-${Date.now()}.txt`;
-        a.click();
-        URL.revokeObjectURL(a.href);
-        toast(getTranslation('toast_report_downloaded'), 'success');
-      });
-
-      // 1. Export as Markdown
-      document.getElementById('export-md-btn').addEventListener('click', () => {
-        if (!currentResult) return alert("No report generated yet!");
-        
-        try {
-            const codeContent = typeof editor !== 'undefined' ? editor.value : '';
-            const rawText = buildReport(currentResult, codeContent);
-            const mdText = "```text\n" + rawText + "\n```";
-            
-            const blob = new Blob([mdText], { type: 'text/markdown' });
-            const a = document.createElement('a');
-            a.href = URL.createObjectURL(blob);
-            a.download = `qyverixai-report-${Date.now()}.md`;
-            a.click();
-            URL.revokeObjectURL(a.href);
-            
-            if (typeof toast === 'function') toast('Downloaded as Markdown', 'success');
-        } catch (error) {
-            console.error("Markdown Error: ", error);
-            alert("Oops! Something went wrong generating the Markdown.");
-        }
-      });
-
-      // 2. Export as PDF
-      document.getElementById('export-pdf-btn').addEventListener('click', () => {
-        if (!currentResult) return alert("No report generated yet!");
-        
-        try {
-            const codeContent = typeof editor !== 'undefined' ? editor.value : '';
-            const rawText = buildReport(currentResult, codeContent);
-            
-            const lines = rawText.split('\n');
-            const linesPerPage = 45; 
-            
-            // Build a container in memory
-            const container = document.createElement('div');
-            container.style.width = '700px';
-            container.style.backgroundColor = '#ffffff';
-
-            for (let i = 0; i < lines.length; i += linesPerPage) {
-                const chunkText = lines.slice(i, i + linesPerPage).join('\n');
-                
-                const pageDiv = document.createElement('div');
-                pageDiv.style.fontFamily = 'monospace';
-                pageDiv.style.fontSize = '12px';
-                pageDiv.style.lineHeight = '1.5';
-                pageDiv.style.color = '#000000';
-                pageDiv.style.whiteSpace = 'pre-wrap';
-                pageDiv.innerText = chunkText === '' ? ' ' : chunkText;
-                
-                container.appendChild(pageDiv);
-                
-                if (i + linesPerPage < lines.length) {
-                    const pageBreak = document.createElement('div');
-                    pageBreak.className = 'html2pdf__page-break';
-                    container.appendChild(pageBreak);
-                }
-            }
-
-            const options = {
-              margin:       10,
-              filename:     `qyverixai-report-${Date.now()}.pdf`,
-              image:        { type: 'jpeg', quality: 0.98 },
-              html2canvas:  { scale: 2, scrollY: 0 }, 
-              jsPDF:        { unit: 'mm', format: 'a4', orientation: 'portrait' }
-            };
-
-            html2pdf().set(options).from(container).save().then(() => {
-              if (typeof toast === 'function') toast('Downloaded as PDF', 'success');
-            });
-            
-        } catch (error) {
-            console.error("PDF Error: ", error);
-            alert("Oops! Something went wrong generating the PDF.");
-        }
-      });
-
-      function buildReport(r, code) {
-        if (r.files) {
-          const lines = ['QyverixAI Project ZIP Analysis', '', `Date: ${new Date().toLocaleString()}`, `Engine: ${r.provider || 'rule-based'}`, `Files: ${r.file_count}`, `Overall Score: ${r.overall_project_score}/100 (${r.grade})`, r.summary, ''];
-          r.files.forEach(file => {
-            lines.push(`FILE: ${file.filename}`, `Language: ${file.language}`, `Score: ${file.analysis.suggestions.overall_score}/100 (${file.analysis.suggestions.grade})`, file.analysis.debugging.summary, `Summary: ${file.analysis.explanation.summary}`, '');
-            file.analysis.debugging.issues.forEach(i => lines.push(`[${i.severity.toUpperCase()}] ${i.type} (line ${i.line})`, `  ${i.description}`, `  Fix: ${i.suggestion}`, ''));
-          });
-          if (r.skipped_files?.length) lines.push('SKIPPED FILES', ...r.skipped_files, '');
-          return lines.join('\n');
-        }
-        const lines = ['═══ QyverixAI Analysis Report ═══', '', `Date: ${new Date().toLocaleString()}`, `Engine: ${r.provider || 'rule-based'}`, ''];
-        if (r.explanation) {
-          lines.push('── EXPLANATION ──', `Language: ${r.explanation.language}`, `Complexity: ${r.explanation.complexity}`, `Summary: ${r.explanation.summary}`, '', ...r.explanation.key_points.map(p => `• ${p}`), '');
-        }
-        if (r.debugging) {
-          lines.push('── DEBUGGING ──', r.debugging.summary, '');
-          r.debugging.issues.forEach(i => lines.push(`[${i.severity.toUpperCase()}] ${i.type} (line ${i.line})`, `  ${i.description}`, `  Fix: ${i.suggestion}`, ''));
-        }
-        if (r.suggestions) {
-          lines.push('── SUGGESTIONS ──', `Score: ${r.suggestions.overall_score}/100 (${r.suggestions.grade})`, r.suggestions.next_step, '');
-          r.suggestions.suggestions.forEach(s => lines.push(`[${s.priority.toUpperCase()}] ${s.category}: ${s.description}`, ''));
-        }
-        lines.push('── CODE ──', '', code);
-        return lines.join('\n');
-      }
-
-      /* ═══════════════════════════════════════════════════════════════
-         TOAST
-      ═══════════════════════════════════════════════════════════════ */
-      function toast(msg, type = 'info') {
-        const container = document.getElementById('toastContainer');
-        const el = document.createElement('div');
-        el.className = 'toast ' + type;
-        const icons = { success: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20,6 9,17 4,12"/></svg>', error: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>', info: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>' };
-        el.innerHTML = '<span class="toast-icon">' + (icons[type] || icons.info) + '</span><span>' + msg + '</span>';
-        container.appendChild(el);
-        setTimeout(() => {
-          el.classList.add('fadeout');
-          el.addEventListener('animationend', () => el.remove());
-        }, 3000);
-      }
-
-      /* ═══════════════════════════════════════════════════════════════
-         HELPERS
-      ═══════════════════════════════════════════════════════════════ */
-      function escHtml(s) {
-        return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-      }
-      function renderMarkdown(s) {
-        return s.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
-          .replace(/`(.+?)`/g, '<code style="font-family:var(--font-mono);font-size:0.85em;background:var(--bg);padding:1px 5px;border-radius:4px;border:1px solid var(--border)">$1</code>');
-      }
-
-      /* ═══════════════════════════════════════════════════════════════
-         SAMPLE CODE LOADER
-      ═══════════════════════════════════════════════════════════════ */
-      const SAMPLES = {
-        python: `# Python Sample
-  import os
-
-# [!] Hardcoded secret - security risk
-password = "supersecret123"
-
-def calculate(a, b):
-    # [!] No type hints, potential ZeroDivisionError
-    result = a / b
-    return result
-
-def fetch_data(url):
-    import requests
-    # [!] No error handling for network call
-    response = requests.get(url)
-    return response.json()
-
-def process_items(items=[]):  # [!] Mutable default argument
-    results = ""
-    for item in items:
-        results += str(item)  # [!] String concat in loop
-    return results
-
-from os import *  # [!] Wildcard import
-
-x = eval("1 + 2")  # [!] Unsafe eval
-
-calculate(10, 0)`,
-        javascript: `// JavaScript Sample
-  var counter = 0;
-
-function loadUser(id) {
-  // [!] Promise not awaited
-  fetch('/api/users/' + id).then(r => r.json());
-
-  if (counter == "0") {  // [!] Loose equality
-    console.log("No users loaded");
-    document.getElementById("output").innerHTML = id;  // [!] XSS risk
-  }
-
-  var result = null;
-  return result;
-}
-
-loadUser(42);`,
-        typescript: `// TypeScript Sample
-interface User {
-  id: number;
-  name: string;
-  email?: string;
-}
-
-function sendWelcomeEmail(user: User) {
-  // Anti-pattern: Non-null assertion operator (!) used dangerously
-  // If user.email is undefined, this will cause a runtime error in the compiled JS
-  console.log("Sending email to: " + user.email!.toLowerCase());
-}
-
-const newUser: User = { id: 1, name: "Alice" };
-sendWelcomeEmail(newUser);`,
-        java: `// Java Sample
-public class Main {
-    public static void main(String[] args) {
-        String name1 = new String("Vaibhav");
-        String name2 = new String("Vaibhav");
-
-        // Anti-pattern 1: Using == for string comparison instead of .equals()
-        if (name1 == name2) {
-            System.out.println("Names are the same");
-        } else {
-            System.out.println("Names are different (Reference comparison failed)");
-        }
-
-        // Anti-pattern 2: NullPointerException risk
-        String uninitializedString = null;
-        System.out.println(uninitializedString.length());
-    }
-}`,
-        cpp: `// C++ Sample
-#include <iostream>
-
-// Anti-pattern 1: using namespace std in global scope
-using namespace std;
-
-void processData() {
-    // Anti-pattern 2: Memory Leak
-    // Allocating memory on the heap but never freeing it with 'delete'
-    int* dataBuffer = new int[100];
-
-    dataBuffer[0] = 42;
-    cout << "Processing value: " << dataBuffer[0] << endl;
-
-    // Memory leak occurs here when the function exits
-    // because 'delete[] dataBuffer;' is missing.
-}
-
-int main() {
-    processData();
-    return 0;
-}`
-      };
-
-      function loadSample() {
-        const sample = SAMPLES[selectedLang] || SAMPLES.python;
-        editor.value = sample;
-        updateEditor();
-        document.getElementById('workspace').scrollIntoView({ behavior: 'smooth' });
-        toast(getTranslation('toast_sample_loaded'), 'success');
-      }
-
-      window.loadSample = loadSample;
-
-      /* ═══════════════════════════════════════════════════════════════
-         INIT
-      ═══════════════════════════════════════════════════════════════ */
-      // Wire up language selector
-      const langSelect = document.getElementById('langSelect');
-      if (langSelect) {
-        langSelect.addEventListener('change', e => {
-          setAppLanguage(e.target.value);
-        });
-        // Also listen for input for immediate responsiveness in some browsers
-        langSelect.addEventListener('input', e => {
-          setAppLanguage(e.target.value);
-        });
-      }
-
-      // Initialize language
-      setAppLanguage(appLang);
-      syncApiStatusText();
-
-      fetchHistory();
-      renderFavorites();
-
-      // Save API URL
-      if (apiUrlInput) {
-        apiUrlInput.addEventListener('change', () => {
-          localStorage.setItem('qyx_apiUrl', apiUrlInput.value);
-        });
-        const savedUrl = localStorage.getItem('qyx_apiUrl');
-        if (savedUrl) apiUrlInput.value = savedUrl;
-      }
-
-      /* ═══════════════════════════════════════════════════════════════
-         DIGEST SUBSCRIBE
-      ═══════════════════════════════════════════════════════════════ */
-      document.getElementById('digestForm').addEventListener('submit', async (e) => {
-        e.preventDefault();
-        const email = document.getElementById('digestEmail').value.trim();
-        const btn = document.getElementById('digestBtn');
-        btn.disabled = true;
-        btn.textContent = 'Subscribing…';
-        const base = getApiBase();
-        try {
-          const r = await fetch(`${base}/subscribe/`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ email }),
-          });
-          const data = await r.json();
-          if (r.ok) {
-            toast(data.message, 'success');
-            document.getElementById('digestEmail').value = '';
-          } else {
-            toast(data.detail || 'Subscription failed', 'error');
-          }
-        } catch {
-          toast('Could not reach the server.', 'error');
-        } finally {
-          btn.disabled = false;
-          btn.textContent = 'Subscribe';
-        }
-      });
-    </script>
-
-<script>
-(function () {
-  const editor = document.querySelector('#codeEditor');
-  if (!editor) return;
-
-  let socket = null;
-  let currentSessionId = '';
-  let clientId = '';
-  let version = 0;
- let collaborators = [];
-  let suppressNextInput = false;
-  let debounceTimer = null;
-
-    const editorPanel = editor.closest('.panel') || editor.parentElement;
-
-  const toolbarButton = document.createElement('button');
-  toolbarButton.type = 'button';
-  toolbarButton.id = 'collabToggleBtn';
-  toolbarButton.className = 'collab-toolbar-btn';
-  toolbarButton.setAttribute('aria-controls', 'collabDrawer');
-  toolbarButton.setAttribute('aria-expanded', 'false');
-  toolbarButton.title = 'Open live collaboration';
-  toolbarButton.innerHTML = `
-    <span id="collabToolbarDot" class="collab-status-dot"></span>
-    <span>Collaborate</span>
-    <span id="collabToolbarCount" class="collab-user-count">0</span>
-  `;
-
-  const editorHeader =
-    editorPanel.querySelector('.panel-header') ||
-    editorPanel.querySelector('.editor-panel-header') ||
-    editorPanel.querySelector('.panel-head') ||
-    editorPanel.firstElementChild;
-
-  const editorActions =
-    editorHeader?.querySelector('.panel-actions') ||
-    editorHeader?.querySelector('.actions') ||
-    editorHeader;
-
-  if (editorActions) {
-    editorActions.appendChild(toolbarButton);
-  } else {
-    editorPanel.insertBefore(toolbarButton, editorPanel.firstChild);
-  }
-
-  const backdrop = document.createElement('div');
-  backdrop.id = 'collabBackdrop';
-  backdrop.className = 'collab-backdrop';
-  backdrop.hidden = true;
-  document.body.appendChild(backdrop);
-
-  const panel = document.createElement('aside');
-  panel.id = 'collabDrawer';
-  panel.className = 'collab-drawer';
-  panel.setAttribute('aria-labelledby', 'collabDrawerTitle');
-  panel.setAttribute('aria-hidden', 'true');
-  panel.innerHTML = `
-    <div class="collab-drawer-header">
-      <div>
-        <h2 id="collabDrawerTitle">Live Collaboration</h2>
-        <p id="collabDrawerStatus">Not connected</p>
-      </div>
-      <button id="collabCloseBtn" class="collab-close-btn" type="button" aria-label="Close collaboration panel">✕</button>
-    </div>
-
-    <div id="collabNotice" class="collab-notice" role="status" aria-live="polite" hidden></div>
-
-    <div class="collab-drawer-section">
-      <div class="collab-section-heading">
-        <span>Session</span>
-      </div>
-      <div class="collab-panel-top">
-        <input id="collabName" placeholder="Your name" value="Your name" />
-        <input id="collabSession" placeholder="Session ID e.g. review-676" />
-        <button id="collabJoinBtn" type="button">Join Live</button>
-        <button id="collabLeaveBtn" type="button" disabled>Leave</button>
-      </div>
-      <div id="collabStatus" class="collab-status">Live collaboration is not connected.</div>
-    </div>
-
-    <section class="collab-drawer-section">
-      <div class="collab-section-heading">
-        <span>Active users</span>
-        <span id="collabDrawerCount">0</span>
-      </div>
-      <div id="collabUsers" class="collab-users"></div>
-    </section>
-
-    <section class="collab-drawer-section">
-      <div class="collab-section-heading">
-        <span>Review comments</span>
-      </div>
-      <div class="collab-comment-row">
-        <input id="collabLine" class="collab-line-input" type="number" min="1" value="1" />
-        <input id="collabCommentText" placeholder="Add a live review comment..." />
-        <button id="collabCommentBtn" type="button" disabled>Comment</button>
-      </div>
-      <div id="collabComments" class="collab-comments"></div>
-    </section>
-  `;
-  document.body.appendChild(panel);
-
-  const nameInput = panel.querySelector('#collabName');
-  const sessionInput = panel.querySelector('#collabSession');
-  const joinBtn = panel.querySelector('#collabJoinBtn');
-  const leaveBtn = panel.querySelector('#collabLeaveBtn');
-  const statusEl = panel.querySelector('#collabStatus');
-  const usersEl = panel.querySelector('#collabUsers');
-  const lineInput = panel.querySelector('#collabLine');
-  const commentText = panel.querySelector('#collabCommentText');
-  const commentBtn = panel.querySelector('#collabCommentBtn');
-  const commentsEl = panel.querySelector('#collabComments');
-  const closeBtn = panel.querySelector('#collabCloseBtn');
-  const drawerStatusEl = panel.querySelector('#collabDrawerStatus');
-  const noticeEl = panel.querySelector('#collabNotice');
-  const toolbarDot = toolbarButton.querySelector('#collabToolbarDot');
-  const toolbarCount = toolbarButton.querySelector('#collabToolbarCount');
-  const drawerCount = panel.querySelector('#collabDrawerCount');
-
-  function setDrawerOpen(isOpen) {
-    panel.classList.toggle('open', isOpen);
-    panel.setAttribute('aria-hidden', String(!isOpen));
-    toolbarButton.setAttribute('aria-expanded', String(isOpen));
-    backdrop.hidden = !isOpen;
-
-    if (isOpen) {
-      closeBtn.focus();
-    }
-  }
-
-  toolbarButton.addEventListener('click', () => {
-    setDrawerOpen(!panel.classList.contains('open'));
-  });
-
-  closeBtn.addEventListener('click', () => {
-    setDrawerOpen(false);
-  });
-
-  backdrop.addEventListener('click', () => {
-    setDrawerOpen(false);
-  });
-
-  document.addEventListener('keydown', (event) => {
-    if (event.key === 'Escape' && panel.classList.contains('open')) {
-      setDrawerOpen(false);
-    }
-  });
-
-  const editorShell = document.createElement('div');
-  editorShell.className = 'collab-editor-shell';
-  const remoteCursorLayer = document.createElement('div');
-  remoteCursorLayer.id = 'remoteCursorLayer';
-  remoteCursorLayer.className = 'remote-cursor-layer';
-  remoteCursorLayer.setAttribute('aria-hidden', 'true');
-
-  editor.parentElement.insertBefore(editorShell, editor);
-  editorShell.appendChild(editor);
-  editorShell.appendChild(remoteCursorLayer);
-
-
-  function getApiBase() {
-  const saved = localStorage.getItem('qyx_apiUrl');
-  if (saved) return saved.replace(/\/$/, '');
-
-  if (location.pathname.startsWith('/app')) {
-    return location.origin;
-  }
-
-  return 'http://localhost:8000';
-}
-
-  function getWsBase() {
-    return getApiBase().replace(/^http/, 'ws');
-  }
-
-  function setStatus(text) {
-    statusEl.textContent = text;
-  }
-
-  function selectedLanguage() {
-    const activeTab = document.querySelector('.lang-tab.active');
-    return activeTab ? activeTab.dataset.lang || activeTab.textContent.trim().toLowerCase() : 'python';
-  }
-
-  function getCursorPayload() {
-    const value = editor.value || '';
-    const index = editor.selectionStart || 0;
-    const before = value.slice(0, index);
-    const lines = before.split('\n');
-
-    return {
-      line: lines.length,
-      column: lines[lines.length - 1].length + 1,
-      selectionStart: editor.selectionStart || 0,
-      selectionEnd: editor.selectionEnd || editor.selectionStart || 0
-    };
-  }
-
-  function send(payload) {
-    if (!socket || socket.readyState !== WebSocket.OPEN) return;
-    socket.send(JSON.stringify(payload));
-  }
-
-  function updateConnectionUi(isConnected) {
-    toolbarDot.classList.toggle('connected', isConnected);
-    drawerStatusEl.textContent = isConnected
-      ? `Connected to session "${currentSessionId}".`
-      : 'Not connected';
-  }
-
-  function updateUserCounts() {
-    const count = collaborators.length;
-    toolbarCount.textContent = String(count);
-    drawerCount.textContent = String(count);
-  }
-
-  let noticeTimer = null;
-
-  function showNotice(message, duration = 5000) {
-    noticeEl.textContent = message;
-    noticeEl.hidden = false;
-
-    clearTimeout(noticeTimer);
-    noticeTimer = setTimeout(() => {
-      noticeEl.hidden = true;
-      noticeEl.textContent = '';
-    }, duration);
-  }
-
-  function renderUsers(users) {
-    usersEl.innerHTML = '';
-
-    users.forEach((user) => {
-      const cursor = user.cursor
-        ? ` · L${user.cursor.line}:C${user.cursor.column}`
-        : '';
-
-      const pill = document.createElement('div');
-      pill.className = 'collab-user-pill';
-      pill.innerHTML = `
-        <span class="collab-dot" style="background:${user.color}"></span>
-        <span>${escapeHtml(user.name)}${cursor}</span>
-      `;
-      usersEl.appendChild(pill);
-    });
-
-    updateUserCounts();
-    renderRemoteCursors();
-  }
-
-  function renderComments(comments) {
-    commentsEl.innerHTML = '';
-
-    comments.forEach((comment) => {
-      const item = document.createElement('div');
-      item.className = 'collab-comment';
-      item.innerHTML = `
-        <strong style="color:${comment.color}">${escapeHtml(comment.author)}</strong>
-        on line <strong>${comment.line}</strong>: ${escapeHtml(comment.text)}
-      `;
-      commentsEl.appendChild(item);
-    });
-  }
-
-  function escapeHtml(value) {
-    return String(value)
-      .replaceAll('&', '&amp;')
-      .replaceAll('<', '&lt;')
-      .replaceAll('>', '&gt;')
-      .replaceAll('"', '&quot;')
-      .replaceAll("'", '&#039;');
-  }
-
-  function getTextareaCaretCoordinates(textarea, position) {
-    const mirror = document.createElement('div');
-    const computed = window.getComputedStyle(textarea);
-
-    const copiedProperties = [
-      'boxSizing',
-      'width',
-      'height',
-      'overflowX',
-      'overflowY',
-      'borderTopWidth',
-      'borderRightWidth',
-      'borderBottomWidth',
-      'borderLeftWidth',
-      'paddingTop',
-      'paddingRight',
-      'paddingBottom',
-      'paddingLeft',
-      'fontStyle',
-      'fontVariant',
-      'fontWeight',
-      'fontStretch',
-      'fontSize',
-      'lineHeight',
-      'fontFamily',
-      'letterSpacing',
-      'textTransform',
-      'textAlign',
-      'textIndent',
-      'tabSize',
-      'wordSpacing'
-    ];
-
-    mirror.style.position = 'absolute';
-    mirror.style.visibility = 'hidden';
-    mirror.style.whiteSpace = 'pre-wrap';
-    mirror.style.overflowWrap = 'break-word';
-    mirror.style.top = '0';
-    mirror.style.left = '-9999px';
-
-    copiedProperties.forEach((property) => {
-      mirror.style[property] = computed[property];
-    });
-
-    mirror.textContent = textarea.value.substring(0, position);
-
-    const marker = document.createElement('span');
-    marker.textContent = textarea.value.substring(position, position + 1) || '\u200b';
-
-    mirror.appendChild(marker);
-    document.body.appendChild(mirror);
-
-    const coordinates = {
-      left: marker.offsetLeft - textarea.scrollLeft,
-      top: marker.offsetTop - textarea.scrollTop
-    };
-
-    mirror.remove();
-    return coordinates;
-  }
-
-  function renderRemoteCursors() {
-    remoteCursorLayer.innerHTML = '';
-
-    collaborators.forEach((user) => {
-      if (
-        user.id === clientId ||
-        !user.cursor ||
-        !Number.isInteger(user.cursor.selectionEnd)
-      ) {
-        return;
-      }
-
-      const position = Math.min(user.cursor.selectionEnd, editor.value.length);
-      const coordinates = getTextareaCaretCoordinates(editor, position);
-      const color = user.color || '#5b9cf6';
-
-      const cursor = document.createElement('div');
-      cursor.className = 'remote-cursor';
-      cursor.style.left = `${coordinates.left}px`;
-      cursor.style.top = `${coordinates.top}px`;
-      cursor.style.backgroundColor = color;
-
-      const label = document.createElement('span');
-      label.className = 'remote-cursor-label';
-      label.textContent = user.name || 'Collaborator';
-      label.style.backgroundColor = color;
-
-      cursor.appendChild(label);
-      remoteCursorLayer.appendChild(cursor);
-    });
-  }
-
-  function applyRemoteCode(message) {
-    suppressNextInput = true;
-    editor.value = message.code || '';
-    version = message.version || version;
-
-    editor.dispatchEvent(new Event('input', { bubbles: true }));
-
-    window.setTimeout(() => {
-      suppressNextInput = false;
-    }, 0);
-  }
-
-  function handleMessage(message) {
-    if (message.type === 'session_state') {
-  clientId = message.clientId;
-  version = message.version || 0;
-  collaborators = message.users || [];
-
-  if (message.code) {
-    applyRemoteCode(message);
-  }
-
-  renderUsers(collaborators);
-  renderComments(message.comments || []);
-  updateConnectionUi(true);
-  setStatus(`Connected to session "${message.sessionId}" as ${clientId}.`);
-  return;
-}
-
-    if (message.type === 'presence_update') {
-  collaborators = message.users || [];
-  renderUsers(collaborators);
-  return;
-}
-
-    if (message.type === 'code_update') {
-  version = message.version || version;
-
-  if (message.senderId === clientId) {
-    setStatus(`Your edit was synced as v${version}.`);
-    return;
-  }
-
-  applyRemoteCode(message);
-  renderRemoteCursors();
-  setStatus(`Synced live update v${version}.`);
-  return;
-}
-
-    if (message.type === 'cursor_update') {
-      if (!message.user) {
-        return;
-      }
-
-      const existingIndex = collaborators.findIndex(
-        (user) => user.id === message.user.id
-      );
-
-  if (existingIndex >= 0) {
-    collaborators[existingIndex] = message.user;
-  } else {
-    collaborators.push(message.user);
-  }
-
-  renderUsers(collaborators);
-  return;
-}
-
-    if (message.type === 'comment_added') {
-      renderComments(message.comments || []);
-      return;
-    }
-
-    if (message.type === 'sync_required') {
-  applyRemoteCode(message);
-  collaborators = message.users || [];
-  renderUsers(collaborators);
-  renderComments(message.comments || []);
-  renderRemoteCursors();
-  const conflictMessage =
-    'Conflict detected: your local edit was behind the room version, so the latest room state was restored.';
-
-  setStatus(conflictMessage);
-  showNotice(conflictMessage);
-  setDrawerOpen(true);
-
-  return;
-}
-
-    if (message.type === 'pong') {
-      setStatus(`Connected to session "${currentSessionId}".`);
-      return;
-    }
-
-    if (message.type === 'error') {
-      setStatus(`Collaboration error: ${message.detail}`);
-    }
-  }
-
-  function connect() {
-    const session = sessionInput.value.trim();
-    const name = nameInput.value.trim() || 'Anonymous';
-
-    if (!session) {
-      setStatus('Enter a session ID before joining.');
-      return;
-    }
-
-    if (socket) {
-      socket.close();
-    }
-
-    currentSessionId = session;
-
-    const url = `${getWsBase()}/collaboration/ws/${encodeURIComponent(session)}?name=${encodeURIComponent(name)}`;
-    socket = new WebSocket(url);
-
-    socket.addEventListener('open', () => {
-      joinBtn.disabled = true;
-      leaveBtn.disabled = false;
-      commentBtn.disabled = false;
-      setStatus(`Connected to "${session}".`);
-      updateConnectionUi(true);
-
-      send({
-        type: 'code_update',
-        code: editor.value || '',
-        language: selectedLanguage(),
-        version
-      });
-    });
-
-    socket.addEventListener('message', (event) => {
-      try {
-        handleMessage(JSON.parse(event.data));
-      } catch {
-        setStatus('Received an invalid collaboration message.');
-      }
-    });
-
-    socket.addEventListener('close', () => {
-      joinBtn.disabled = false;
-      leaveBtn.disabled = true;
-      commentBtn.disabled = true;
-      setStatus('Live collaboration disconnected.');
-      updateConnectionUi(false);
-      collaborators = [];
-      renderUsers(collaborators);
-      renderRemoteCursors();
-    });
-
-    socket.addEventListener('error', () => {
-      setStatus('Could not connect to live collaboration WebSocket.');
-    });
-  }
-
-  function disconnect() {
-    if (socket) {
-      socket.close();
-      socket = null;
-    }
-  }
-
-  editor.addEventListener('input', () => {
-    if (suppressNextInput) return;
-    if (!socket || socket.readyState !== WebSocket.OPEN) return;
-
-    clearTimeout(debounceTimer);
-    debounceTimer = setTimeout(() => {
-      send({
-        type: 'code_update',
-        code: editor.value || '',
-        language: selectedLanguage(),
-        version
-      });
-    }, 250);
-      send({
-        type: 'cursor_update',
-        cursor: getCursorPayload()
-      });
-  });
-
-  editor.addEventListener('keyup', () => {
-    send({
-      type: 'cursor_update',
-      cursor: getCursorPayload()
-    });
-  });
-
-  editor.addEventListener('click', () => {
-    send({
-      type: 'cursor_update',
-      cursor: getCursorPayload()
-    });
-  });
-
-    editor.addEventListener('select', () => {
-    send({
-      type: 'cursor_update',
-      cursor: getCursorPayload()
-    });
-  });
-
-  editor.addEventListener('scroll', renderRemoteCursors);
-  window.addEventListener('resize', renderRemoteCursors);
-
-  commentBtn.addEventListener('click', () => {
-    const text = commentText.value.trim();
-    if (!text) return;
-
-    send({
-      type: 'comment_added',
-      line: Number(lineInput.value || 1),
-      text
-    });
-
-    commentText.value = '';
-  });
-
-  joinBtn.addEventListener('click', connect);
-  leaveBtn.addEventListener('click', disconnect);
-
-  setInterval(() => {
-    send({ type: 'ping' });
-  }, 25000);
-})();
-</script>
-
-</body>
+  </body>
 
 </html>
\ No newline at end of file