diff --git a/css/main.css b/css/main.css
index 9dce4d0e..6e329b9a 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1311,74 +1311,74 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
 
 /* Thinking blocks styling */
 .thinking-block {
-  margin-bottom: 12px;
-  border-radius: 8px;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  background-color: var(--light-theme-gray);
-  overflow: hidden;
+    margin-bottom: 12px;
+    border-radius: 8px;
+    border: 1px solid rgb(0 0 0 / 10%);
+    background-color: var(--light-theme-gray);
+    overflow: hidden;
 }
 
 .dark .thinking-block {
-  background-color: var(--darker-gray);
+    background-color: var(--darker-gray);
 }
 
 .thinking-header {
-  display: flex;
-  align-items: center;
-  padding: 10px 16px;
-  cursor: pointer;
-  user-select: none;
-  font-size: 14px;
-  color: rgba(0, 0, 0, 0.7);
-  transition: background-color 0.2s;
+    display: flex;
+    align-items: center;
+    padding: 10px 16px;
+    cursor: pointer;
+    user-select: none;
+    font-size: 14px;
+    color: rgb(0 0 0 / 70%);
+    transition: background-color 0.2s;
 }
 
 .thinking-header:hover {
-  background-color: rgba(0, 0, 0, 0.03);
+    background-color: rgb(0 0 0 / 3%);
 }
 
 .thinking-header::-webkit-details-marker {
-  display: none;
+    display: none;
 }
 
 .thinking-icon {
-  margin-right: 8px;
-  color: rgba(0, 0, 0, 0.5);
+    margin-right: 8px;
+    color: rgb(0 0 0 / 50%);
 }
 
 .thinking-title {
-  font-weight: 500;
+    font-weight: 500;
 }
 
 .thinking-content {
-  padding: 12px 16px;
-  border-top: 1px solid rgba(0, 0, 0, 0.07);
-  color: rgba(0, 0, 0, 0.7);
-  font-size: 14px;
-  line-height: 1.5;
-  overflow-wrap: break-word;
-  max-height: 300px;
-  overflow-y: scroll;
-  contain: layout;
+    padding: 12px 16px;
+    border-top: 1px solid rgb(0 0 0 / 7%);
+    color: rgb(0 0 0 / 70%);
+    font-size: 14px;
+    line-height: 1.5;
+    overflow-wrap: break-word;
+    max-height: 300px;
+    overflow-y: scroll;
+    contain: layout;
 }
 
 /* Animation for opening thinking blocks */
 @keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
+    from { opacity: 0; }
+    to { opacity: 1; }
 }
 
 .thinking-block[open] .thinking-content {
-  animation: fadeIn 0.3s ease-out;
+    animation: fadeIn 0.3s ease-out;
 }
 
 /* Additional style for in-progress thinking */
 .thinking-block[data-streaming="true"] .thinking-title {
-  animation: pulse 1.5s infinite;
+    animation: pulse 1.5s infinite;
 }
 
 @keyframes pulse {
-  0% { opacity: 0.6; }
-  50% { opacity: 1; }
-  100% { opacity: 0.6; }
+    0% { opacity: 0.6; }
+    50% { opacity: 1; }
+    100% { opacity: 0.6; }
 }