[ai] Fixed CSS not loaded error, volume via buttons,...

web/script.js

@@ -354,3 +354,93 @@ function deleteFileOnServer() {
   };
   xhr.send();
 }
+
+/* Ensure the site stylesheet loads reliably — retry loader if necessary
+   Improved detection: verify a computed style from CSS is applied (safer than just checking stylesheet href).
+   Retries with exponential backoff and deduplicates link tags we add. */
+(function ensureCssLoaded(){
+  var retries = 0;
+  var maxRetries = 6;
+
+  // Check a computed style that the stylesheet defines.
+  // .status color in CSS is --muted: #6b7280 -> rgb(107, 114, 128)
+  function isStyleApplied() {
+    var el = document.querySelector('.status') || document.querySelector('.topbar');
+    if (!el) return false;
+    try {
+      var color = getComputedStyle(el).color;
+      // Expect "rgb(107, 114, 128)" when CSS is applied
+      if (!color) return false;
+      // Loose check for the three numeric components to be present
+      return color.indexOf('107') !== -1 && color.indexOf('114') !== -1 && color.indexOf('128') !== -1;
+    } catch (e) {
+      return false;
+    }
+  }
+
+  function removeOldRetryLinks() {
+    var links = Array.prototype.slice.call(document.querySelectorAll('link[data-retry-css]'));
+    links.forEach(function(l){ l.parentNode.removeChild(l); });
+  }
+
+  function tryLoad() {
+    if (isStyleApplied()) {
+      console.log('style.css appears applied');
+      return;
+    }
+    if (retries >= maxRetries) {
+      console.warn('style.css failed to apply after ' + retries + ' attempts');
+      return;
+    }
+    retries++;
+    // Remove previous retry-inserted links to avoid piling them up
+    removeOldRetryLinks();
+
+    var link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.setAttribute('data-retry-css', '1');
+    // cache-busting query to force a fresh fetch when retrying
+    link.href = 'style.css?cb=' + Date.now();
+    var timeout = 800 + retries * 300; // increasing timeout per attempt
+
+    var done = false;
+    function success() {
+      if (done) return;
+      done = true;
+      // Give browser a short moment to apply rules
+      setTimeout(function(){
+        if (isStyleApplied()) {
+          console.log('style.css loaded and applied (attempt ' + retries + ')');
+        } else {
+          console.warn('style.css loaded but styles not applied — retrying...');
+          setTimeout(tryLoad, timeout);
+        }
+      }, 200);
+    }
+
+    link.onload = success;
+    link.onerror = function() {
+      if (done) return;
+      done = true;
+      console.warn('style.css load error (attempt ' + retries + '), retrying...');
+      setTimeout(tryLoad, timeout);
+    };
+
+    // Append link to head
+    document.head.appendChild(link);
+
+    // Safety check: if onload/onerror doesn't fire, verify computed style after timeout
+    setTimeout(function(){
+      if (done) return;
+      if (isStyleApplied()) {
+        console.log('style.css appears applied (delayed check)');
+      } else {
+        console.warn('style.css still not applied after timeout (attempt ' + retries + '), retrying...');
+        setTimeout(tryLoad, timeout);
+      }
+    }, timeout + 300);
+  }
+
+  // Start after a short delay to let the browser initiate initial requests
+  setTimeout(tryLoad, 150);
+})();