Center tabs, hide doc title, add dot hover glow animation, center format toolbar

src/css/components.css

@@ -309,7 +309,6 @@
 
 .editor-toolbar {
   display: flex;
-  flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: var(--spacing-sm);
@@ -318,6 +317,14 @@
   background: var(--color-surface);
 }
 
+.editor-tabs-center {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex: 1;
+  justify-content: center;
+}
+
 .editor-tab {
   padding: 8px 18px;
   border-radius: 10px;
@@ -350,6 +357,7 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
+  justify-content: center;
   gap: 4px;
   padding: 8px 14px;
   border-bottom: 1px solid var(--color-border);
@@ -2923,10 +2931,24 @@ input[type="range"]::-moz-range-thumb {
   flex: 1;
 }
 
-/* ── Dots: purely decorative, no interactions ── */
+/* ── Dots: decorative with hover animation ── */
 .window-dots .dot {
   cursor: default;
-  pointer-events: none;
+  transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
+}
+.window-dots:hover .dot--red {
+  transform: scale(1.25);
+  box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
+}
+.window-dots:hover .dot--yellow {
+  transform: scale(1.25);
+  box-shadow: 0 0 8px rgba(234, 179, 8, 0.5);
+  transition-delay: 0.05s;
+}
+.window-dots:hover .dot--green {
+  transform: scale(1.25);
+  box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
+  transition-delay: 0.1s;
 }
 
 /* ── Fix #17: Traffic light actions ── */

src/index.html

@@ -1,4 +1,4 @@
-<!doctype html>
+<!doctype html>
 <html lang="ar" dir="rtl" class="h-full">
  <head>
   <meta charset="UTF-8">
@@ -660,33 +660,28 @@
        <div>
         <div class="editor-shell">
 <div class="editor-toolbar">
-           <div class="flex items-center gap-2 flex-wrap">
-            <div class="doc-title-bar">
-             <span id="doc-current-title" class="doc-current-title">مستند جديد</span>
+            <div class="flex items-center gap-4">
+             <div class="window-dots" aria-hidden="true">
+              <span class="dot dot--red"></span>
+              <span class="dot dot--yellow"></span>
+              <span class="dot dot--green"></span>
+             </div>
+             <div id="analyzing-indicator" class="analyzing-indicator" aria-live="polite">
+              <span class="analyzing-spinner" aria-hidden="true"></span>
+              <span>جاري التحليل...</span>
+             </div>
+             <span id="auto-save-status" class="text-xs text-secondary" style="opacity:0;transition:opacity 0.3s;"></span>
             </div>
-            <div class="toolbar-separator"></div>
-            <button id="write-tab" onclick="switchTab('write')" class="editor-tab active" type="button">كتابة</button>
-            <button id="summarize-tab" onclick="switchTab('summarize')" class="editor-tab" type="button">تلخيص</button>
+            <div class="editor-tabs-center">
+             <button id="write-tab" onclick="switchTab('write')" class="editor-tab active" type="button">كتابة</button>
+             <button id="summarize-tab" onclick="switchTab('summarize')" class="editor-tab" type="button">تلخيص</button>
              <button id="dialect-tab" onclick="switchTab('dialect')" class="editor-tab" type="button">تحويل للفصحى</button>
-            <button id="quran-tab" onclick="switchTab('quran')" class="editor-tab" type="button">تدقيق النص القرآني</button>
-            <button id="docs-sidebar-toggle" class="docs-sidebar-toggle-mobile btn-ghost lg:hidden" type="button" aria-label="مستنداتي" aria-expanded="false" aria-controls="docs-sidebar">
-             <svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
-            </button>
-           </div>
-           <div class="flex items-center gap-4 flex-wrap">
-            <div id="analyzing-indicator" class="analyzing-indicator" aria-live="polite">
-             <span class="analyzing-spinner" aria-hidden="true"></span>
-             <span>جاري التحليل...</span>
+             <button id="quran-tab" onclick="switchTab('quran')" class="editor-tab" type="button">تدقيق النص القرآني</button>
             </div>
-            <span id="auto-save-status" class="text-xs text-secondary" style="opacity:0;transition:opacity 0.3s;"></span>
-            <div class="window-dots" aria-hidden="true">
-             <span class="dot dot--red"></span>
-             <span class="dot dot--yellow"></span>
-             <span class="dot dot--green"></span>
+            <div class="flex items-center gap-2">
+             <span id="doc-current-title" class="doc-current-title" style="display:none;"></span>
             </div>
            </div>
-          </div>
-         <!-- Formatting Toolbar -->
          <div class="format-toolbar" id="format-toolbar">
           <!-- Font group -->
           <div class="fmt-group fmt-group--font">