better pagination and backgrounds

background.js

@@ -108,8 +108,9 @@ async function summarizeContent(content, systemPrompt) {
     return {
       summary:
         typeof summary === "string" ? summary.trim() : JSON.stringify(summary),
-      chunkCount,
-      recursionDepth,
+      // NOTE Chunk count and recursion depth are disabled if not needed
+      //chunkCount,
+      //recursionDepth,
     };
   } catch (error) {
     console.error("Error in summarizeContent:", error);

options/options.css

@@ -2,10 +2,46 @@ body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   margin: 0;
   padding: 0;
+  background-image: url("https://static.pexels.com/photos/414171/pexels-photo-414171.jpeg");
+  background-size: cover;
+  -webkit-animation: slidein 100s;
+  animation: slidein 100s;
+
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+
+  -webkit-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+
+  -webkit-animation-direction: alternate;
+  animation-direction: alternate;
+
   background-color: #f5f5f5;
   color: #333;
 }
 
+@-webkit-keyframes slidein {
+  from {
+    background-position: top;
+    background-size: 3000px;
+  }
+  to {
+    background-position: -100px 0px;
+    background-size: 2750px;
+  }
+}
+
+@keyframes slidein {
+  from {
+    background-position: top;
+    background-size: 3000px;
+  }
+  to {
+    background-position: -100px 0px;
+    background-size: 2750px;
+  }
+}
+
 .container {
   max-width: 600px;
   margin: 0 auto;

sidebar/sidebar.css

@@ -58,29 +58,65 @@ h1 {
 .btn {
   display: inline-block;
   padding: 10px 20px;
-  font-size: 16px;
+  font-size: 14px;
   border: none;
-  border-radius: 5px;
+  border-radius: 4px;
   cursor: pointer;
-  transition: background-color 0.3s ease;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  font-weight: 500;
+  position: relative;
+  overflow: hidden;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+}
+
+.btn::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.2),
+    transparent
+  );
+  transition: 0.5s;
+}
+
+.btn:hover::before {
+  left: 100%;
 }
 
 .btn-primary {
-  background-color: #3498db;
-  color: white;
+  background: linear-gradient(135deg, #0b132b 0%, #3a506b 100%);
+  color: #5bc0be;
+  border: 1px solid #5bc0be;
 }
 
 .btn-primary:hover {
-  background-color: #2980b9;
+  background: linear-gradient(135deg, #0b132b 0%, #3a506b 100%);
+  box-shadow: 0 5px 15px rgba(91, 192, 190, 0.4),
+    0 0 5px rgba(91, 192, 190, 0.4);
+  color: #6fffe9;
+  border-color: #6fffe9;
 }
 
 .btn-secondary {
-  background-color: #95a5a6;
-  color: white;
+  background: rgba(30, 30, 30, 0.9);
+  color: #c5c6c7;
+  border: 1px solid #45a29e;
 }
 
 .btn-secondary:hover {
-  background-color: #7f8c8d;
+  background: rgba(30, 30, 30, 0.9);
+  box-shadow: 0 5px 15px rgba(69, 162, 158, 0.3),
+    0 0 5px rgba(69, 162, 158, 0.3);
+  color: #ffffff;
+  border-color: #66fcf1;
 }
 
 .summary-container {

sidebar/sidebar.js

@@ -71,7 +71,8 @@ document.addEventListener("DOMContentLoaded", () => {
 
                   // Render the Markdown content with warning if applicable
                   summaryDiv.innerHTML = warningHtml + marked.parse(summaryText);
-                  tokenCountDiv.textContent = `Token count: ${response.tokenCount}`;
+                  // NOTE Token count is disabled if not needed
+                  //tokenCountDiv.textContent = `Token count: ${response.tokenCount}`;
                 } else if (response && response.error) {
                   handleError(response.error, response.details);
                   if (response.tokenCount) {