diff --git a/assets/auto-char-card/style.css b/assets/auto-char-card/style.css
index c14a47e..5583fe0 100644
--- a/assets/auto-char-card/style.css
+++ b/assets/auto-char-card/style.css
@@ -640,3 +640,82 @@
     text-decoration: line-through;
     text-decoration-color: rgba(255, 255, 255, 0.4);
 }
+
+/* Mobile Navigation */
+.acc-mobile-nav {
+    display: none;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 60px;
+    background-color: #252526;
+    border-top: 1px solid #333;
+    z-index: 2002;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.acc-nav-btn {
+    background: none;
+    border: none;
+    color: #888;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    font-size: 12px;
+    cursor: pointer;
+    padding: 8px;
+    flex: 1;
+}
+
+.acc-nav-btn.active {
+    color: #0e639c;
+}
+
+.acc-nav-btn i {
+    font-size: 18px;
+}
+
+/* Responsive Styles */
+@media (max-width: 768px) {
+    .acc-mobile-nav {
+        display: flex;
+    }
+
+    .acc-body {
+        padding-bottom: 60px; /* Space for nav */
+    }
+
+    .acc-column {
+        width: 100% !important;
+        border-right: none;
+        display: none; /* Hidden by default on mobile */
+        height: 100%;
+    }
+    
+    /* Show center panel by default or via JS class */
+    .acc-column.mobile-active {
+        display: flex;
+    }
+
+    /* Adjust header */
+    .acc-title {
+        display: none; /* Hide title on small screens */
+    }
+    
+    .acc-header {
+        padding: 5px 10px;
+    }
+    
+    /* Adjust panels */
+    .acc-left-panel, .acc-right-panel {
+        min-width: 100%;
+    }
+    
+    /* Adjust chat input */
+    .acc-input-area {
+        padding: 10px;
+    }
+}