fix ask-AI

my-blog/static/css/style.css

@@ -59,7 +59,7 @@ a.view-markdown:any-link {
 .container {
     min-height: 100vh;
     display: grid;
-    grid-template-rows: auto auto 1fr auto;
+    grid-template-rows: auto 0fr 1fr auto;
     grid-template-areas: 
         "header"
         "ask-ai"
@@ -158,6 +158,15 @@ a.view-markdown:any-link {
     background: #f6f8fa;
     border-bottom: 1px solid #d1d9e0;
     padding: 24px;
+    overflow: hidden;
+}
+
+.ask-ai-panel[style*="block"] {
+    display: block !important;
+}
+
+.container:has(.ask-ai-panel[style*="block"]) {
+    grid-template-rows: auto auto 1fr auto;
 }
 
 .ask-ai-content {
@@ -193,13 +202,15 @@ a.view-markdown:any-link {
     grid-area: main;
     max-width: 1000px;
     margin: 0 auto;
-    padding: 24px;
+    /* padding: 24px; */
+    padding-top: 80px;
     width: 100%;
 }
 
 @media (max-width: 1000px) {
     .main-content {
-        padding: 20px;
+        /* padding: 20px; */
+        padding: 0px;
         max-width: 100%;
     }
 }
@@ -324,6 +335,10 @@ a.view-markdown:any-link {
     margin: 0 auto;
 }
 
+article.article-content {
+    padding: 10px;
+}
+
 .article-meta {
     display: flex;
     gap: 16px;
@@ -818,13 +833,13 @@ a.view-markdown:any-link {
         justify-self: end;
     }
     
-    /* Ask AI button mobile style */
+    /* Ask AI button mobile style - icon only */
     .ask-ai-btn {
         padding: 8px;
         min-width: 40px;
         justify-content: center;
-        font-size: 0;
         gap: 0;
+        font-size: 0; /* Hide all text content */
     }
     
     .ask-ai-btn .ai-icon {