fix(docs): respect PROMPT.md guidelines - replace emoji icons with SVG, fix layout issues

- Replace emoji icons (📄, 📝, 🌐, 📃, ✏️) in export modal with proper SVG icons
- Update CSS variables to use sentient bridge variables with fallbacks
- Fix docs-main flexbox layout to display canvas and chat panel side by side
- Add parent container overrides to prevent black strips from dark themes
- Fix chat panel width constraints and collapsed state transitions
- Update responsive breakpoints to use --header-height variable
- Add !important overrides on backgrounds to ensure proper light theme

ui/suite/css/ai-panel.css

@@ -27,7 +27,7 @@ body:not(.ai-panel-collapsed) #main-content {
 .ai-assistant-panel {
     position: fixed;
     right: 0;
-    top: 56px; /* Below header */
+    top: 40px; /* Below header - matches --header-height */
     bottom: 0;
     width: 320px;
     display: flex;
@@ -47,12 +47,22 @@ body.ai-panel-collapsed #main-content {
     margin-right: 0;
 }
 
-/* Hide on Chat app */
+/* Hide on Chat app (has its own chat interface) */
 body[data-app="chat"] .ai-assistant-panel,
 body[data-app="chat"] .ai-panel-fab {
     display: none !important;
 }
 
+/* Hide on Docs app (has its own AI chat panel) */
+body[data-app="docs"] .ai-assistant-panel,
+body[data-app="docs"] .ai-panel-fab {
+    display: none !important;
+}
+
+body[data-app="docs"] #main-content {
+    margin-right: 0 !important;
+}
+
 /* =============================================================================
    AI PANEL HEADER
    ============================================================================= */
@@ -206,8 +216,16 @@ body[data-app="chat"] .ai-panel-fab {
 }
 
 @keyframes ai-typing {
-    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
+    0%,
-    30% { transform: translateY(-4px); opacity: 1; }
+    60%,
+    100% {
+        transform: translateY(0);
+        opacity: 0.4;
+    }
+    30% {
+        transform: translateY(-4px);
+        opacity: 1;
+    }
 }
 
 /* =============================================================================
@@ -369,7 +387,7 @@ body.ai-panel-collapsed .ai-panel-fab {
         width: 100%;
         max-width: 320px;
     }
-    
+
     body:not(.ai-panel-collapsed) #main-content {
         margin-right: 0;
     }
@@ -381,7 +399,7 @@ body.ai-panel-collapsed .ai-panel-fab {
         max-width: none;
         top: 56px;
     }
-    
+
     .ai-panel-fab {
         right: 16px;
         bottom: 16px;

ui/suite/docs/docs.html

@@ -793,23 +793,112 @@
         <div class="modal-body">
             <div class="export-options">
                 <button class="export-option" data-format="pdf">
-                    <div class="export-icon">📄</div>
+                    <div class="export-icon">
+                        <svg
+                            width="24"
+                            height="24"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="1.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        >
+                            <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" />
+                            <path d="M9 15v-2h1.5a1.5 1.5 0 0 1 0 3H9" />
+                            <path d="M13 13h1.5a1.5 1.5 0 0 1 0 3H13v-3z" />
+                        </svg>
+                    </div>
                     <div class="export-label">PDF</div>
                 </button>
                 <button class="export-option" data-format="docx">
-                    <div class="export-icon">📝</div>
+                    <div class="export-icon">
+                        <svg
+                            width="24"
+                            height="24"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="1.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        >
+                            <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" />
+                            <line x1="8" y1="13" x2="16" y2="13" />
+                            <line x1="8" y1="17" x2="14" y2="17" />
+                        </svg>
+                    </div>
                     <div class="export-label">Word</div>
                 </button>
                 <button class="export-option" data-format="html">
-                    <div class="export-icon">🌐</div>
+                    <div class="export-icon">
+                        <svg
+                            width="24"
+                            height="24"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="1.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        >
+                            <circle cx="12" cy="12" r="10" />
+                            <line x1="2" y1="12" x2="22" y2="12" />
+                            <path
+                                d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"
+                            />
+                        </svg>
+                    </div>
                     <div class="export-label">HTML</div>
                 </button>
                 <button class="export-option" data-format="txt">
-                    <div class="export-icon">📃</div>
+                    <div class="export-icon">
+                        <svg
+                            width="24"
+                            height="24"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="1.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        >
+                            <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>
+                    </div>
                     <div class="export-label">Text</div>
                 </button>
                 <button class="export-option" data-format="md">
-                    <div class="export-icon">✏️</div>
+                    <div class="export-icon">
+                        <svg
+                            width="24"
+                            height="24"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="1.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        >
+                            <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" />
+                            <path d="M7 15l2-2 2 2" />
+                            <line x1="9" y1="13" x2="9" y2="17" />
+                            <path d="M13 13h2v4" />
+                            <path d="M13 15h2" />
+                        </svg>
+                    </div>
                     <div class="export-label">Markdown</div>
                 </button>
             </div>

ui/suite/mail/mail.css

@@ -393,22 +393,32 @@
 }
 
 @keyframes spin {
-    to { transform: rotate(360deg); }
+    to {
+        transform: rotate(360deg);
+    }
 }
 
 /* Modals */
-.modal {
+dialog.modal {
-    position: fixed;
+    display: none;
-    inset: 0;
+    border: none;
-    background: rgba(0, 0, 0, 0.5);
+    padding: 0;
+    background: transparent;
+    max-width: none;
+    max-height: none;
+}
+
+dialog.modal[open] {
     display: flex;
     align-items: center;
     justify-content: center;
+    position: fixed;
+    inset: 0;
     z-index: 1000;
     padding: 1rem;
 }
 
-.modal::backdrop {
+dialog.modal::backdrop {
     background: rgba(0, 0, 0, 0.5);
 }
 
@@ -610,7 +620,7 @@
 .send-group .dropdown-toggle {
     padding: 0.625rem 0.5rem;
     border-radius: 0 6px 6px 0;
-    border-left: 1px solid rgba(255,255,255,0.2);
+    border-left: 1px solid rgba(255, 255, 255, 0.2);
 }
 
 .schedule-menu {
@@ -622,7 +632,7 @@
     border-radius: 8px;
     padding: 0.5rem 0;
     min-width: 240px;
-    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
     display: none;
     z-index: 10;
     margin-bottom: 0.5rem;
@@ -748,7 +758,7 @@
 }
 
 .toggle-switch::after {
-    content: '';
+    content: "";
     position: absolute;
     top: 2px;
     left: 2px;

ui/suite/mail/mail.html

@@ -1269,6 +1269,7 @@
                     name="username"
                     placeholder="username or email"
                     required
+                    autocomplete="username"
                 />
             </div>
             <div class="form-group">
@@ -1340,5 +1341,5 @@
     </div>
 </dialog>
 
-<link rel="stylesheet" href="mail.css" />
+<link rel="stylesheet" href="mail/mail.css" />
-<script src="mail.js"></script>
+<script src="mail/mail.js"></script>

ui/suite/mail/mail.js

@@ -80,9 +80,23 @@
   function confirmSchedule() {
     var dateInput = document.getElementById("schedule-date");
     var timeInput = document.getElementById("schedule-time");
-    if (dateInput && timeInput) {
+    if (dateInput && timeInput && dateInput.value && timeInput.value) {
       var scheduledDate = new Date(dateInput.value + "T" + timeInput.value);
+      if (isNaN(scheduledDate.getTime())) {
+        if (typeof window.showNotification === "function") {
+          window.showNotification(
+            "Please select a valid date and time",
+            "error",
+          );
+        }
+        return;
+      }
       confirmScheduleSend(scheduledDate);
+    } else {
+      if (typeof window.showNotification === "function") {
+        window.showNotification("Please select a date and time", "error");
+      }
+      return;
     }
     closeScheduleModal();
   }
@@ -368,14 +382,14 @@
   }
 
   function openAddAccount() {
-    var modal = document.getElementById("account-modal");
+    var modal = document.getElementById("add-account-modal");
     if (modal && modal.showModal) {
       modal.showModal();
     }
   }
 
   function closeAddAccount() {
-    var modal = document.getElementById("account-modal");
+    var modal = document.getElementById("add-account-modal");
     if (modal && modal.close) {
       modal.close();
     }

ui/suite/sheet/sheet.css

@@ -498,7 +498,7 @@
 
 .cells-container {
     position: relative;
-    background: var(--sentient-bg-primary, #ffffff);
+    background: var(--sentient-bg-primary);
 }
 
 .cells {
@@ -514,11 +514,11 @@
     padding: 0 6px;
     display: flex;
     align-items: center;
-    border-right: 1px solid var(--sentient-border, #e0e0e0);
+    border-right: 1px solid var(--sentient-border);
-    border-bottom: 1px solid var(--sentient-border, #e0e0e0);
+    border-bottom: 1px solid var(--sentient-border);
     font-size: 13px;
-    background: var(--sentient-bg-primary, #ffffff);
+    background: var(--sentient-bg-primary);
-    color: var(--sentient-text-primary, #212121);
+    color: var(--sentient-text-primary);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -527,7 +527,7 @@
 }
 
 .cell:hover {
-    background: var(--sentient-bg-hover, #f5f5f5);
+    background: var(--sentient-bg-hover);
 }
 
 .cell.selected {
@@ -549,12 +549,12 @@
     width: 100%;
     height: 100%;
     border: none;
-    outline: 2px solid var(--sentient-accent, #4285f4);
+    outline: 2px solid var(--sentient-accent);
     padding: 0 6px;
     font-size: 13px;
     font-family: inherit;
-    background: var(--sentient-bg-primary, #ffffff);
+    background: var(--sentient-bg-primary);
-    color: var(--sentient-text-primary, #212121);
+    color: var(--sentient-text-primary);
 }
 
 /* =============================================================================

ui/suite/tasks/tasks.html

@@ -310,5 +310,4 @@
     </div>
 </div>
 
-<link rel="stylesheet" href="tasks.css" />
+<link rel="stylesheet" href="tasks/tasks.css" />
-<script src="tasks.js"></script>