Enhance static UI and authentication: improve sidebar auth visibility, add mobile responsiveness, and refine error messages; update `/report` endpoint to use `ArticleOut` model; redesign styles for a Reddit-like layout with theming and responsive tweaks.

api/database.py

@@ -5,8 +5,10 @@ from pathlib import Path
 from dotenv import load_dotenv
 from supabase import create_client, Client
 
-# Load .env from project root (parent of api/) so vars are available
-load_dotenv(Path(__file__).resolve().parent.parent / ".env")
+# Load .env from api/ first, then project root, so vars are available
+_root = Path(__file__).resolve().parent
+load_dotenv(_root / ".env")
+load_dotenv(_root.parent / ".env")
 
 SUPABASE_URL = os.environ["SUPABASE_URL"]
 SUPABASE_SERVICE_KEY = os.environ["SUPABASE_SERVICE_KEY"]

api/endpoints/articles.py

@@ -1,12 +1,29 @@
 """GET /articles — list recent articles (no search required)."""
 from typing import Optional
 
-from fastapi import APIRouter
+from fastapi import APIRouter, HTTPException
 
 from database import supabase
 
 router = APIRouter(tags=["articles"])
 
+ARTICLE_FIELDS = "id, title, body, language, tags, type, contributing_agent, confidence, created_at"
+
+
+@router.get("/articles/{article_id}")
+def get_article(article_id: str):
+    """Get a single article by id for the post detail view."""
+    result = (
+        supabase.table("articles")
+        .select(ARTICLE_FIELDS)
+        .eq("id", article_id)
+        .limit(1)
+        .execute()
+    )
+    if not result.data:
+        raise HTTPException(status_code=404, detail="Article not found")
+    return result.data[0]
+
 
 @router.get("/articles")
 def list_articles(
@@ -18,7 +35,7 @@ def list_articles(
     """List recent articles, newest first. Optional filters: since (ISO date), language, type."""
     query = (
         supabase.table("articles")
-        .select("id, title, body, language, tags, type, contributing_agent, confidence, created_at")
+        .select(ARTICLE_FIELDS)
         .order("created_at", desc=True)
         .limit(min(limit, 100))
     )

api/endpoints/comments.py

@@ -5,11 +5,12 @@ from fastapi import APIRouter, Header, HTTPException
 
 from auth import get_author_from_bearer
 from database import supabase
+from models import Comment
 
 router = APIRouter(tags=["comments"])
 
 
-@router.get("/articles/{article_id}/comments")
+@router.get("/articles/{article_id}/comments", response_model=list[Comment])
 def list_comments(article_id: str):
     """List comments for an article, oldest first."""
     result = (
@@ -22,7 +23,7 @@ def list_comments(article_id: str):
     return result.data
 
 
-@router.post("/articles/{article_id}/comments", status_code=201)
+@router.post("/articles/{article_id}/comments", response_model=Comment, status_code=201)
 def create_comment(
     article_id: str,
     payload: dict,

api/endpoints/match.py

@@ -4,11 +4,12 @@ from typing import Optional
 from fastapi import APIRouter, Query
 
 from database import supabase
+from models import Article
 
 router = APIRouter(tags=["match"])
 
 
-@router.get("")
+@router.get("", response_model=list[Article])
 def match_articles(
     q: str = Query(..., min_length=1, description="Search query"),
     language: Optional[str] = Query(None, description="Filter by language"),

api/endpoints/report.py

@@ -4,6 +4,7 @@ from typing import Any, Optional
 from fastapi import APIRouter, HTTPException
 
 from database import supabase
+from models import ArticleOut
 
 router = APIRouter(tags=["report"])
 
@@ -36,7 +37,7 @@ def _body_from_report(payload: dict) -> str:
     return "\n".join(parts).strip()
 
 
-@router.post("/report", status_code=201)
+@router.post("/report", response_model=ArticleOut, status_code=201)
 def report_article(payload: dict[str, Any]):
     """
     Report a new article (MCP yantrabodha_report).
@@ -77,6 +78,6 @@ def report_article(payload: dict[str, Any]):
         if not result.data:
             raise HTTPException(status_code=500, detail="Failed to insert article")
         out = result.data[0]
-        return {"id": str(out["id"]), "title": out["title"], "created_at": out["created_at"]}
+        return ArticleOut(id=str(out["id"]), title=out["title"], created_at=str(out["created_at"]))
     except Exception as e:
         raise HTTPException(status_code=500, detail=str(e))

api/models.py

@@ -1,7 +1,7 @@
 """Shared Pydantic models for the API."""
 from typing import Optional
 
-from pydantic import BaseModel
+from pydantic import BaseModel, ConfigDict
 
 
 class ArticleIn(BaseModel):
@@ -21,3 +21,51 @@ class ArticleOut(BaseModel):
     id: str
     title: str
     created_at: str
+
+
+class Article(BaseModel):
+    """Article as returned by GET /api/articles and GET /api/articles/{id}."""
+
+    model_config = ConfigDict(extra="ignore")
+
+    id: str
+    title: str
+    body: Optional[str] = None
+    language: Optional[str] = None
+    tags: Optional[list[str]] = None
+    type: Optional[str] = None
+    contributing_agent: Optional[str] = None
+    confidence: Optional[str] = None
+    created_at: str
+
+
+class ArticlesListResponse(BaseModel):
+    """Response for GET /api/articles — list recent articles."""
+
+    articles: list[Article]
+    all_projects: list[Article]
+
+
+class Comment(BaseModel):
+    """Comment as returned by GET/POST /api/articles/{id}/comments."""
+
+    model_config = ConfigDict(extra="ignore")
+
+    id: str
+    article_id: str
+    body: str
+    author: Optional[str] = None
+    created_at: str
+
+
+class ConfigResponse(BaseModel):
+    """Response for GET /api/config."""
+
+    supabaseUrl: str
+    supabaseAnonKey: str
+
+
+class HealthResponse(BaseModel):
+    """Response for GET /api/health."""
+
+    status: str

api/static/app.js

@@ -2,6 +2,7 @@
   "use strict";
 
   const DISPLAY_LIMIT = 20;
+  const RECENT_TIPS_LIMIT = 5;
   const COMMENT_BODY_MAX = 2000;
 
   const TYPE_STYLES = {
@@ -16,10 +17,10 @@
 <div class="empty-state">
   <div class="empty-icon">📚</div>
   <div class="empty-title">Knowledge base is empty</div>
-  <div class="empty-text">Add a tip to get started. Use the Submit tip tab above.</div>
+  <div class="empty-text">Add a tip to get started. Use Submit Tip in the sidebar.</div>
 </div>`;
 
-  const SEARCH_EMPTY_HTML = `<div class="search-empty">Enter a search query and click Search to find tips.</div>`;
+  const SEARCH_EMPTY_HTML = `<div class="search-empty">Use the search bar above to find tips.</div>`;
   const SEARCH_UNAVAILABLE_HTML = `<div class="search-empty">Search is temporarily unavailable. Try again later.</div>`;
   const SEARCH_NO_RESULTS_HTML = `<div class="search-empty">No matching tips found. Try different keywords.</div>`;
 
@@ -82,14 +83,49 @@
     );
   }
 
-  function articleToCard(article, comments) {
+  /** Compact card: row1 profile | type, row2 title, row3 full body (markdown), row4 like/comment/fetched counts. */
+  function articleToCompactCard(article, commentCount) {
+    commentCount = commentCount || 0;
+    const title = escapeHtml(article.title || "");
+    const type = article.type || "error";
+    const typeStyle = TYPE_STYLES[type] || TYPE_STYLES.error;
+    const displayName = article.username || ("Agent: " + (article.contributing_agent || "—"));
+    const lang = escapeHtml(article.language || "");
+    const avatarUrl = article.avatar_url ? escapeHtml(article.avatar_url) : "";
+    const authorInitial = (article.username || article.contributing_agent || "?").charAt(0).toUpperCase();
+    const authorAvatar = avatarUrl
+      ? '<img class="card-author-avatar" src="' + avatarUrl + '" alt="" />'
+      : '<span class="card-author-avatar card-author-avatar-initial">' + escapeHtml(authorInitial) + "</span>";
+    const fullBodyHtml = markdownToHtml(article.body || "");
+    return (
+      '<div class="article-card-inner card-compact-inner">' +
+      '<div class="card-compact-top">' +
+      '<div class="card-author-row">' + authorAvatar +
+      '<div class="card-author-meta">' +
+      '<span class="card-author-name">' + escapeHtml(displayName) + "</span>" +
+      "</div></div>" +
+      '<div class="card-compact-meta">' +
+      '<span class="type-badge" style="' + typeStyle + '">' + escapeHtml(type) + "</span>" +
+      '<span class="card-lang">' + lang + "</span>" +
+      "</div>" +
+      "</div>" +
+      '<h2 class="card-compact-title">' + title + "</h2>" +
+      (fullBodyHtml ? '<div class="card-compact-preview article-body">' + fullBodyHtml + "</div>" : "") +
+      '<div class="card-engagement">' +
+      "<span>0 likes</span><span>·</span>" +
+      "<span>" + commentCount + " comments</span><span>·</span>" +
+      "<span>0 fetched</span>" +
+      "</div></div>"
+    );
+  }
+
+  function articleToCard(article, comments, omitComments) {
     comments = comments || [];
     const title = escapeHtml(article.title || "");
     const fullBodyHtml = markdownToHtml(article.body || "");
     const type = article.type || "error";
     const typeStyle = TYPE_STYLES[type] || TYPE_STYLES.error;
     const displayName = article.username || ("Agent: " + (article.contributing_agent || "—"));
-    const agent = escapeHtml(article.contributing_agent || "—");
     const confidence = escapeHtml(article.confidence || "");
     const created = formatDate(article.created_at);
     const createdRel = formatRelativeTime(article.created_at);
@@ -110,14 +146,18 @@
       '<span class="card-author-time" title="' + escapeHtml(created) + '">' + escapeHtml(createdRel) + "</span>" +
       "</div></div>";
 
-    let commentsHtml = '<div class="comments-header">Comments (' + comments.length + ")</div>";
-    if (comments.length) {
-      const showComments = comments.slice(-5).reverse();
-      commentsHtml += showComments.map(commentLineHtml).join("");
-      if (comments.length > 5) {
-        const rest = comments.slice(0, -5).reverse();
-        commentsHtml += '<details class="show-all-comments"><summary>Show all ' + comments.length + " comments</summary><div class=\"comment-list\">" + rest.map(commentLineHtml).join("") + "</div></details>";
+    let commentsBlock = "";
+    if (!omitComments) {
+      let commentsHtml = '<div class="comments-header">Comments (' + comments.length + ")</div>";
+      if (comments.length) {
+        const showComments = comments.slice(-5).reverse();
+        commentsHtml += showComments.map(commentLineHtml).join("");
+        if (comments.length > 5) {
+          const rest = comments.slice(0, -5).reverse();
+          commentsHtml += '<details class="show-all-comments"><summary>Show all ' + comments.length + " comments</summary><div class=\"comment-list\">" + rest.map(commentLineHtml).join("") + "</div></details>";
+        }
       }
+      commentsBlock = '<div class="card-comments">' + commentsHtml + "</div>";
     }
 
     return (
@@ -133,11 +173,22 @@
       "<span>Confidence: " + confidence + "</span><span>·</span><span>" + created + "</span>" +
       "</div>" +
       (tagsPills ? '<div class="card-tags">' + tagsPills + "</div>" : "") +
-      '<div class="card-comments">' + commentsHtml + "</div>" +
+      commentsBlock +
       "</div>"
     );
   }
 
+  function commentsListHtml(comments) {
+    comments = comments || [];
+    var html = '<div class="comments-section"><div class="comments-header">Comments (' + comments.length + ")</div>";
+    if (comments.length) {
+      var showComments = comments.slice().reverse();
+      html += '<div class="comments-thread">' + showComments.map(commentLineHtml).join("") + "</div>";
+    }
+    html += "</div>";
+    return html;
+  }
+
   function getSinceParam(value) {
     if (!value || value === "all") return null;
     const now = new Date();
@@ -179,6 +230,39 @@
     });
   }
 
+  // ——— View switching (sidebar-driven) ———
+  function switchView(viewId) {
+    document.querySelectorAll(".sidebar-nav-item").forEach(function (item) {
+      item.classList.toggle("active", item.getAttribute("data-view") === viewId);
+    });
+    document.querySelectorAll(".panel").forEach(function (p) {
+      const isBrowse = p.id === "browse-panel";
+      const isSubmit = p.id === "submit-panel";
+      const isSearch = p.id === "search-panel";
+      const isPostDetail = p.id === "post-detail-panel";
+      const active =
+        (viewId === "browse" && isBrowse) ||
+        (viewId === "submit" && isSubmit) ||
+        (viewId === "search" && isSearch);
+      p.classList.toggle("active", active);
+      p.hidden = !active;
+      if (isPostDetail) {
+        p.classList.toggle("active", false);
+        p.hidden = true;
+      }
+    });
+    closeSidebarMobile();
+    if (viewId === "browse") {
+      showBrowsePanel();
+      loadBrowseFeed();
+    }
+  }
+
+  function closeSidebarMobile() {
+    var sidebar = document.getElementById("left-sidebar");
+    if (sidebar) sidebar.classList.remove("is-open");
+  }
+
   // ——— Browse ———
   function loadBrowseFeed() {
     const timeVal = document.getElementById("browse-time").value;
@@ -212,30 +296,18 @@
             );
           })
         ).then(function (rows) {
-          const isLoggedIn = typeof window.getCurrentUser === "function" && window.getCurrentUser();
           const cards = rows.map(function (r) {
-            const cardHtml = articleToCard(r.article, r.comments);
+            const cardHtml = articleToCompactCard(r.article, r.comments.length);
             const articleId = escapeHtml(r.article.id);
-            let commentRow;
-            if (isLoggedIn) {
-              commentRow =
-                '<textarea class="comment-input" data-article-id="' + articleId + '" placeholder="Add a comment…" rows="3" maxlength="' + COMMENT_BODY_MAX + '"></textarea>' +
-                '<button type="button" class="btn secondary submit-comment-btn">Submit comment</button>';
-            } else {
-              commentRow =
-                '<p class="signin-to-comment">Sign in with Hugging Face to comment.</p>' +
-                '<button type="button" class="btn primary hf-signin-btn">Sign in to comment</button>';
-            }
             return (
-              '<div class="article-card-wrapper">' +
+              '<div class="article-card-wrapper card-compact" data-article-id="' + articleId + '" role="button" tabindex="0">' +
               '<div class="card-html">' + cardHtml + "</div>" +
-              '<div class="card-comment-row">' + commentRow + "</div>" +
               "</div>"
             );
           });
           feedEl.innerHTML = cards.join("");
           feedEl.setAttribute("aria-busy", "false");
-          bindBrowseCommentButtons();
+          bindFeedCardClicks();
         });
       })
       .catch(function () {
@@ -244,51 +316,134 @@
       });
   }
 
-  function bindBrowseCommentButtons() {
-    const msgEl = document.getElementById("browse-comment-msg");
-    document.querySelectorAll(".submit-comment-btn").forEach(function (btn) {
-      btn.onclick = function () {
-        const user = typeof window.getCurrentUser === "function" ? window.getCurrentUser() : null;
-        if (!user) {
-          msgEl.textContent = "Sign in to comment (Hugging Face or create an account).";
-          return;
-        }
-        const row = btn.closest(".card-comment-row");
-        const textarea = row && row.querySelector(".comment-input");
-        if (!textarea) return;
-        const articleId = textarea.getAttribute("data-article-id");
-        const body = (textarea.value || "").trim();
-        if (!body) {
-          msgEl.textContent = "Enter a comment.";
-          return;
-        }
-        if (body.length > COMMENT_BODY_MAX) {
-          msgEl.textContent = "Comment too long (max " + COMMENT_BODY_MAX + " characters).";
-          return;
-        }
-        msgEl.textContent = "";
-        var payload = { body: body };
-        var headers = {};
-        if (user.token) {
-          headers["Authorization"] = "Bearer " + user.token;
-        } else {
-          payload.author = user.name || user.preferred_username || user.sub || "User";
+  function bindFeedCardClicks() {
+    document.querySelectorAll(".article-card-wrapper.card-compact[data-article-id]").forEach(function (wrapper) {
+      function openPost() {
+        const id = wrapper.getAttribute("data-article-id");
+        if (id) showPostDetail(id);
+      }
+      wrapper.addEventListener("click", function (e) {
+        e.preventDefault();
+        openPost();
+      });
+      wrapper.addEventListener("keydown", function (e) {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          openPost();
         }
-        apiPostWithAuth("/api/articles/" + encodeURIComponent(articleId) + "/comments", payload, headers)
-          .then(function () {
-            msgEl.textContent = "Comment added.";
-            textarea.value = "";
-            loadBrowseFeed();
-          })
-          .catch(function (err) {
-            msgEl.textContent = err.message || "Could not add comment.";
-          });
-      };
+      });
+    });
+  }
+
+  function showBrowsePanel() {
+    document.getElementById("browse-panel").classList.add("active");
+    document.getElementById("browse-panel").hidden = false;
+    document.getElementById("post-detail-panel").classList.remove("active");
+    document.getElementById("post-detail-panel").hidden = true;
+    if (location.hash) history.replaceState(null, "", location.pathname + location.search);
+  }
+
+  function getArticleIdFromHash() {
+    var m = location.hash.match(/^#article\/([^/]+)$/);
+    return m ? decodeURIComponent(m[1]) : null;
+  }
+
+  function showPostDetail(articleId) {
+    document.getElementById("browse-panel").classList.remove("active");
+    document.getElementById("browse-panel").hidden = true;
+    document.getElementById("post-detail-panel").classList.add("active");
+    document.getElementById("post-detail-panel").hidden = false;
+    if (getArticleIdFromHash() !== articleId) history.pushState({ articleId: articleId }, "", "#article/" + encodeURIComponent(articleId));
+
+    const contentEl = document.getElementById("post-detail-content");
+    const commentRowEl = document.getElementById("post-detail-comment-row");
+    const commentsListEl = document.getElementById("post-detail-comments-list");
+    const msgEl = document.getElementById("post-detail-comment-msg");
+    contentEl.innerHTML = "<div class=\"empty-state\">Loading…</div>";
+    commentRowEl.innerHTML = "";
+    if (commentsListEl) commentsListEl.innerHTML = "";
+    msgEl.textContent = "";
+
+    Promise.all([
+      apiGet("/api/articles/" + encodeURIComponent(articleId)),
+      apiGet("/api/articles/" + encodeURIComponent(articleId) + "/comments").catch(function () { return []; }),
+    ]).then(function (results) {
+      const article = results[0];
+      const comments = results[1] || [];
+      const cardHtml = articleToCard(article, [], true);
+      contentEl.innerHTML = '<div class="article-card-wrapper"><div class="card-html">' + cardHtml + "</div></div>";
+      if (commentsListEl) commentsListEl.innerHTML = commentsListHtml(comments);
+
+      const isLoggedIn = typeof window.getCurrentUser === "function" && window.getCurrentUser();
+      if (isLoggedIn) {
+        commentRowEl.innerHTML =
+          '<div class="comment-box-container">' +
+          '<textarea class="comment-input comment-box-textarea" data-article-id="' + escapeHtml(articleId) + '" placeholder="Add a comment…" rows="2" maxlength="' + COMMENT_BODY_MAX + '"></textarea>' +
+          '<div class="comment-box-actions">' +
+          '<button type="button" class="btn primary post-detail-submit-comment comment-box-submit">Comment</button>' +
+          "</div></div>";
+      } else {
+        commentRowEl.innerHTML =
+          '<div class="comment-box-container comment-box-signin">' +
+          '<p class="signin-to-comment">Sign in to comment.</p>' +
+          '<button type="button" class="btn primary hf-signin-btn">Sign in to comment</button>' +
+          "</div>";
+      }
+
+      const submitBtn = commentRowEl.querySelector(".post-detail-submit-comment");
+      if (submitBtn) {
+        submitBtn.onclick = function () {
+          const user = typeof window.getCurrentUser === "function" ? window.getCurrentUser() : null;
+          if (!user) {
+            msgEl.textContent = "Sign in to comment (Hugging Face or create an account).";
+            return;
+          }
+          const textarea = commentRowEl.querySelector(".comment-input");
+          if (!textarea) return;
+          const body = (textarea.value || "").trim();
+          if (!body) {
+            msgEl.textContent = "Enter a comment.";
+            return;
+          }
+          if (body.length > COMMENT_BODY_MAX) {
+            msgEl.textContent = "Comment too long (max " + COMMENT_BODY_MAX + " characters).";
+            return;
+          }
+          msgEl.textContent = "";
+          var payload = { body: body };
+          var headers = {};
+          if (user.token) headers["Authorization"] = "Bearer " + user.token;
+          else payload.author = user.name || user.preferred_username || user.sub || "User";
+          apiPostWithAuth("/api/articles/" + encodeURIComponent(articleId) + "/comments", payload, headers)
+            .then(function () {
+              msgEl.textContent = "Comment added.";
+              textarea.value = "";
+              showPostDetail(articleId);
+            })
+            .catch(function (err) {
+              msgEl.textContent = err.message || "Could not add comment.";
+            });
+        };
+      }
+    }).catch(function (err) {
+      contentEl.innerHTML = "<div class=\"empty-state\">Could not load post.</div>";
+      msgEl.textContent = err.message || "Could not load post.";
     });
   }
 
+  function bindBrowseCommentButtons() {
+    /* Comment submit is now only in post-detail panel; kept for any legacy use */
+  }
+
   // ——— Submit tip ———
   function submitTip() {
+    const user = typeof window.getCurrentUser === "function" ? window.getCurrentUser() : null;
+    const msgEl = document.getElementById("submit-msg");
+    if (!user) {
+      msgEl.textContent = "Sign in to submit a tip.";
+      return;
+    }
+
     const title = (document.getElementById("submit-title").value || "").trim();
     const body = (document.getElementById("submit-body").value || "").trim();
     const tagsStr = document.getElementById("submit-tags").value || "";
@@ -297,7 +452,6 @@
     const type = document.getElementById("submit-type").value || "tip";
     const confidence = document.getElementById("submit-confidence").value || "medium";
     const contributing_agent = (document.getElementById("submit-agent").value || "").trim() || null;
-    const msgEl = document.getElementById("submit-msg");
 
     if (!title || !body) {
       msgEl.textContent = "Please provide a title and body.";
@@ -319,24 +473,30 @@
         document.getElementById("submit-title").value = "";
         document.getElementById("submit-body").value = "";
         document.getElementById("submit-tags").value = "";
+        loadRecentTips();
       })
       .catch(function (err) {
         msgEl.textContent = err.message || "Could not save. Please try again.";
       });
   }
 
-  // ——— Search ———
+  // ——— Search (from top bar; uses sidebar filters) ———
   function runSearch() {
     const q = (document.getElementById("search-query").value || "").trim();
     const resultsEl = document.getElementById("search-results");
     if (!q) {
+      switchView("search");
       resultsEl.innerHTML = SEARCH_EMPTY_HTML;
       return;
     }
-    const language = (document.getElementById("search-language").value || "").trim() || null;
-    const type = (document.getElementById("search-type").value || "").trim() || null;
+
+    const langVal = document.getElementById("browse-language").value;
+    const typeVal = document.getElementById("browse-type").value;
+    const language = langVal && langVal !== "all" ? langVal : null;
+    const type = typeVal && typeVal !== "all" ? typeVal : null;
     const limit = Math.min(50, Math.max(5, parseInt(document.getElementById("search-limit").value, 10) || 10));
 
+    switchView("search");
     resultsEl.setAttribute("aria-busy", "true");
     resultsEl.innerHTML = "<div class=\"empty-state\">Searching…</div>";
 
@@ -352,8 +512,14 @@
           return;
         }
         resultsEl.innerHTML = articles.map(function (a) {
-          return '<div class="article-card-wrapper"><div class="card-html">' + articleToCard(a) + "</div></div>";
+          const articleId = escapeHtml(a.id);
+          const cardHtml = articleToCompactCard(a, 0);
+          return (
+            '<div class="article-card-wrapper card-compact" data-article-id="' + articleId + '" role="button" tabindex="0">' +
+            '<div class="card-html">' + cardHtml + "</div></div>"
+          );
         }).join("");
+        bindFeedCardClicks();
       })
       .catch(function () {
         resultsEl.setAttribute("aria-busy", "false");
@@ -361,63 +527,101 @@
       });
   }
 
-  // ——— Tabs ———
-  function switchTab(tabId) {
-    document.querySelectorAll(".tab").forEach(function (t) {
-      t.classList.toggle("active", t.getAttribute("data-tab") === tabId);
-      t.setAttribute("aria-selected", t.getAttribute("data-tab") === tabId ? "true" : "false");
-    });
-    document.querySelectorAll(".panel").forEach(function (p) {
-      const isBrowse = p.id === "browse-panel";
-      const isSubmit = p.id === "submit-panel";
-      const isSearch = p.id === "search-panel";
-      const active = (tabId === "browse" && isBrowse) || (tabId === "submit" && isSubmit) || (tabId === "search" && isSearch);
-      p.classList.toggle("active", active);
-      p.hidden = !active;
-    });
-    if (tabId === "browse") loadBrowseFeed();
-  }
+  // ——— Right sidebar: recent tips ———
+  function loadRecentTips() {
+    const listEl = document.getElementById("recent-tips-list");
+    const countEl = document.getElementById("about-tip-count");
+    if (!listEl) return;
 
-  function updateTabsForAuth() {
-    var user = typeof window.getCurrentUser === "function" ? window.getCurrentUser() : null;
-    var submitTab = document.querySelector('.tab[data-tab="submit"]');
-    var searchTab = document.querySelector('.tab[data-tab="search"]');
-    if (!user) {
-      if (submitTab) submitTab.style.display = "none";
-      if (searchTab) searchTab.style.display = "none";
-      var submitPanel = document.getElementById("submit-panel");
-      var searchPanel = document.getElementById("search-panel");
-      if (submitPanel && !submitPanel.hidden) switchTab("browse");
-      if (searchPanel && !searchPanel.hidden) switchTab("browse");
-    } else {
-      if (submitTab) submitTab.style.display = "";
-      if (searchTab) searchTab.style.display = "";
-    }
-  }
+    listEl.innerHTML = "<div class=\"recent-tips-loading\">Loading…</div>";
 
-  window.__updateTabsForAuth = updateTabsForAuth;
+    apiGet("/api/articles?limit=" + RECENT_TIPS_LIMIT)
+      .then(function (articles) {
+        if (!articles || articles.length === 0) {
+          listEl.innerHTML = "<div class=\"recent-tips-empty\">No tips yet.</div>";
+          if (countEl) countEl.textContent = "0 tips";
+          return;
+        }
+        listEl.innerHTML = articles.map(function (a) {
+          var rawTitle = a.title || "";
+          var title = escapeHtml(rawTitle.slice(0, 60)) + (rawTitle.length > 60 ? "…" : "");
+          var time = formatRelativeTime(a.created_at);
+          return (
+            '<a href="#" class="recent-tip-item" data-article-id="' + escapeHtml(a.id) + '">' +
+            '<span class="recent-tip-title">' + title + "</span>" +
+            ' <span class="recent-tip-time">' + escapeHtml(time) + "</span>" +
+            "</a>"
+          );
+        }).join("");
+
+        if (countEl) countEl.textContent = articles.length + (articles.length >= RECENT_TIPS_LIMIT ? "+ recent tips" : " recent tips");
+
+        listEl.querySelectorAll(".recent-tip-item").forEach(function (link) {
+          link.addEventListener("click", function (e) {
+            e.preventDefault();
+            var id = link.getAttribute("data-article-id");
+            if (id) showPostDetail(id);
+          });
+        });
+      })
+      .catch(function () {
+        listEl.innerHTML = "<div class=\"recent-tips-empty\">Could not load.</div>";
+        if (countEl) countEl.textContent = "";
+      });
+  }
 
   // ——— Init ———
-  document.querySelectorAll(".tab").forEach(function (t) {
-    t.addEventListener("click", function () {
-      switchTab(t.getAttribute("data-tab"));
+  document.querySelectorAll(".sidebar-nav-item[data-view]").forEach(function (item) {
+    item.addEventListener("click", function (e) {
+      e.preventDefault();
+      switchView(item.getAttribute("data-view"));
     });
   });
+
+  var sidebarToggle = document.getElementById("sidebar-toggle");
+  var sidebarOverlay = document.getElementById("sidebar-overlay");
+  if (sidebarToggle) {
+    sidebarToggle.addEventListener("click", function () {
+      document.getElementById("left-sidebar").classList.toggle("is-open");
+    });
+  }
+  if (sidebarOverlay) {
+    sidebarOverlay.addEventListener("click", closeSidebarMobile);
+  }
+
   document.getElementById("browse-time").addEventListener("change", loadBrowseFeed);
   document.getElementById("browse-language").addEventListener("change", loadBrowseFeed);
   document.getElementById("browse-type").addEventListener("change", loadBrowseFeed);
   document.getElementById("submit-btn").addEventListener("click", submitTip);
-  document.getElementById("search-btn").addEventListener("click", runSearch);
+  document.getElementById("search-back-to-feed").addEventListener("click", function () {
+    switchView("browse");
+  });
+  var postDetailBack = document.getElementById("post-detail-back");
+  if (postDetailBack) {
+    postDetailBack.addEventListener("click", function () {
+      showBrowsePanel();
+      loadBrowseFeed();
+    });
+  }
   document.getElementById("search-query").addEventListener("keydown", function (e) {
     if (e.key === "Enter") runSearch();
   });
 
+  window.__updateTabsForAuth = function () { /* sidebar always shows Submit Tip; sign-in prompted on submit */ };
+
   window.__onHfAuthChange = function () {
-    updateTabsForAuth();
     var panel = document.getElementById("browse-panel");
     if (panel && panel.classList.contains("active")) loadBrowseFeed();
   };
 
-  loadBrowseFeed();
-  updateTabsForAuth();
+  window.addEventListener("popstate", function () {
+    var id = getArticleIdFromHash();
+    if (id) showPostDetail(id);
+    else { showBrowsePanel(); loadBrowseFeed(); }
+  });
+
+  var initialArticleId = getArticleIdFromHash();
+  if (initialArticleId) showPostDetail(initialArticleId);
+  else loadBrowseFeed();
+  loadRecentTips();
 })();

api/static/auth.js

@@ -47,6 +47,7 @@
     var loggedin = document.getElementById("auth-loggedin");
     var loggedinName = document.getElementById("auth-loggedin-name");
     var loggedinImg = document.getElementById("auth-loggedin-img");
+    var sidebarAuthMobile = document.getElementById("sidebar-auth-mobile");
     var hfBtn = document.getElementById("auth-signin-btn");
     if (hfBtn) hfBtn.style.display = (window.huggingface && window.huggingface.variables) ? "" : "none";
     var sep = document.querySelector(".auth-sep");
@@ -68,10 +69,18 @@
           }
         }
       }
+      if (sidebarAuthMobile) {
+        sidebarAuthMobile.classList.add("is-logged-in");
+        sidebarAuthMobile.setAttribute("aria-hidden", "false");
+      }
     } else {
       if (signin) signin.style.display = "flex";
       if (loggedin) loggedin.style.display = "none";
       if (typeof window.__updateTabsForAuth === "function") window.__updateTabsForAuth();
+      if (sidebarAuthMobile) {
+        sidebarAuthMobile.classList.remove("is-logged-in");
+        sidebarAuthMobile.setAttribute("aria-hidden", "true");
+      }
     }
   }
 
@@ -174,13 +183,16 @@
     document.body.addEventListener("click", function (e) {
       if (e.target.closest(".hf-signin-btn")) { e.preventDefault(); doHfLogin(); }
     });
-    var signoutBtn = document.getElementById("auth-signout-btn");
-    if (signoutBtn) {
-      signoutBtn.onclick = function () {
-        if (window.getHfUser()) window.signOutHf();
-        else window.signOutApp();
-      };
+    function doSignOut() {
+      if (window.getHfUser()) window.signOutHf();
+      else window.signOutApp();
+      var leftSidebar = document.getElementById("left-sidebar");
+      if (leftSidebar) leftSidebar.classList.remove("is-open");
     }
+    var signoutBtn = document.getElementById("auth-signout-btn");
+    if (signoutBtn) signoutBtn.onclick = doSignOut;
+    var signoutSidebarBtn = document.getElementById("auth-signout-sidebar-btn");
+    if (signoutSidebarBtn) signoutSidebarBtn.onclick = doSignOut;
     var appSigninBtn = document.getElementById("auth-app-signin-btn");
     if (appSigninBtn) appSigninBtn.onclick = function () { openModal("signin"); };
     var appRegisterBtn = document.getElementById("auth-app-register-btn");
@@ -203,9 +215,16 @@
           var res = await window.__SUPABASE_CLIENT__.auth.signInWithPassword({ email: email, password: password });
           if (res.error) throw new Error(res.error.message);
           closeModal();
+          setAppUserFromSession(res.data.session);
           renderAuthUI();
           if (typeof window.__onHfAuthChange === "function") window.__onHfAuthChange();
-        } catch (err) { showAuthError(err.message || "Sign in failed."); }
+        } catch (err) {
+          var msg = err.message || "Sign in failed.";
+          if (msg.toLowerCase().indexOf("email not confirmed") >= 0) {
+            msg = "Please confirm your email first. Check your inbox for the confirmation link, then try again.";
+          }
+          showAuthError(msg);
+        }
       };
     }
     var formRegister = document.getElementById("auth-form-register");
@@ -220,10 +239,15 @@
         try {
           var res = await window.__SUPABASE_CLIENT__.auth.signUp({ email: email, password: password, options: { data: { name: name || email } } });
           if (res.error) throw new Error(res.error.message);
-          closeModal();
-          showAuthError("");
-          renderAuthUI();
-          if (typeof window.__onHfAuthChange === "function") window.__onHfAuthChange();
+          if (res.data.session) {
+            setAppUserFromSession(res.data.session);
+            closeModal();
+            showAuthError("");
+            renderAuthUI();
+            if (typeof window.__onHfAuthChange === "function") window.__onHfAuthChange();
+          } else {
+            showAuthError("Account created. Please check your email to confirm, then sign in.");
+          }
         } catch (err) { showAuthError(err.message || "Create account failed."); }
       };
     }

api/static/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
   <title>Yantrabodha Tips</title>
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
@@ -11,49 +11,60 @@
   <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
 </head>
 <body>
-  <div class="container">
-    <header class="header">
-      <div class="header-top">
-        <div>
-          <h1>Yantrabodha</h1>
-          <p class="subtitle">Knowledge base tips — browse, add, and search</p>
+  <div class="app-layout">
+    <!-- Top bar: logo, search, auth -->
+    <header class="top-bar">
+      <button type="button" class="top-bar-menu-btn" id="sidebar-toggle" aria-label="Toggle menu">
+        <span class="menu-icon"></span>
+      </button>
+      <a href="/" class="top-bar-logo" aria-label="Home">
+        <span class="logo-text">Yantrabodha</span>
+      </a>
+      <div class="top-bar-search">
+        <label for="search-query" class="sr-only">Search tips</label>
+        <input type="text" id="search-query" class="search-input-with-icon" placeholder="Find anything" maxlength="500" />
+      </div>
+      <div id="auth-header" class="top-bar-auth">
+        <div id="auth-signin" class="auth-signin-row" style="display: none;">
+          <button type="button" id="auth-signin-btn" class="btn secondary btn-sm">Sign in with Hugging Face</button>
+          <span class="auth-sep">or</span>
+          <button type="button" id="auth-app-signin-btn" class="btn secondary btn-sm">Sign in</button>
+          <button type="button" id="auth-app-register-btn" class="btn primary btn-sm">Create account</button>
         </div>
-        <div id="auth-header" class="auth-header">
-          <div id="auth-signin" class="auth-signin-row" style="display: none;">
-            <button type="button" id="auth-signin-btn" class="btn secondary btn-sm">Sign in with Hugging Face</button>
-            <span class="auth-sep">or</span>
-            <button type="button" id="auth-app-signin-btn" class="btn secondary btn-sm">Sign in</button>
-            <button type="button" id="auth-app-register-btn" class="btn primary btn-sm">Create account</button>
-          </div>
-          <div id="auth-loggedin" class="auth-loggedin" style="display: none;">
-            <img id="auth-loggedin-img" class="auth-avatar" src="" alt="" />
-            <span id="auth-loggedin-name" class="auth-name"></span>
-            <button type="button" id="auth-signout-btn" class="btn secondary btn-sm">Sign out</button>
-          </div>
+        <div id="auth-loggedin" class="auth-loggedin" style="display: none;">
+          <img id="auth-loggedin-img" class="auth-avatar" src="" alt="" />
+          <span id="auth-loggedin-name" class="auth-name"></span>
+          <button type="button" id="auth-signout-btn" class="btn secondary btn-sm">Sign out</button>
         </div>
       </div>
     </header>
 
-    <nav class="tabs" role="tablist">
-      <button type="button" class="tab active" data-tab="browse" role="tab" aria-selected="true">Browse tips</button>
-      <button type="button" class="tab" data-tab="submit" role="tab" aria-selected="false">Submit tip</button>
-      <button type="button" class="tab" data-tab="search" role="tab" aria-selected="false">Search</button>
-    </nav>
-
-    <section id="browse-panel" class="panel active" role="tabpanel">
-      <div class="filters">
-        <label>
+    <!-- Left sidebar: nav + filters -->
+    <aside class="left-sidebar" id="left-sidebar">
+      <nav class="sidebar-nav" role="navigation">
+        <a href="#" class="sidebar-nav-item active" data-view="browse" id="nav-browse">
+          <span class="sidebar-nav-icon">&#127968;</span>
+          <span>Browse</span>
+        </a>
+        <a href="#" class="sidebar-nav-item" data-view="submit" id="nav-submit">
+          <span class="sidebar-nav-icon">&#9998;</span>
+          <span>Submit Tip</span>
+        </a>
+      </nav>
+      <div class="sidebar-filters">
+        <h3 class="sidebar-filters-title">Filters</h3>
+        <label class="sidebar-filter-label">
           <span>Time</span>
           <select id="browse-time">
-            <option value="all">All</option>
+            <option value="all">All times</option>
             <option value="today">Today</option>
             <option value="this_week">This week</option>
           </select>
         </label>
-        <label>
+        <label class="sidebar-filter-label">
           <span>Language</span>
           <select id="browse-language">
-            <option value="all">All</option>
+            <option value="all">All languages</option>
             <option value="general">general</option>
             <option value="python">python</option>
             <option value="typescript">typescript</option>
@@ -70,10 +81,10 @@
             <option value="other">other</option>
           </select>
         </label>
-        <label>
+        <label class="sidebar-filter-label">
           <span>Type</span>
           <select id="browse-type">
-            <option value="all">All</option>
+            <option value="all">All types</option>
             <option value="error">error</option>
             <option value="pattern">pattern</option>
             <option value="tip">tip</option>
@@ -81,114 +92,129 @@
             <option value="reference">reference</option>
           </select>
         </label>
+        <label class="sidebar-filter-label">
+          <span>Max results (search)</span>
+          <select id="search-limit">
+            <option value="5">5</option>
+            <option value="10" selected>10</option>
+            <option value="25">25</option>
+            <option value="50">50</option>
+          </select>
+        </label>
       </div>
-      <div id="browse-feed" class="feed" aria-busy="false">
-        <div class="empty-state">Loading…</div>
+      <div id="sidebar-auth-mobile" class="sidebar-auth-mobile" aria-hidden="true">
+        <button type="button" id="auth-signout-sidebar-btn" class="btn secondary btn-sm">Sign out</button>
       </div>
-      <p id="browse-comment-msg" class="message" aria-live="polite"></p>
-    </section>
+    </aside>
+    <div class="sidebar-overlay" id="sidebar-overlay" aria-hidden="true"></div>
 
-    <section id="submit-panel" class="panel" role="tabpanel" hidden>
-      <div class="submit-layout">
-        <div class="submit-form">
-          <div class="group">
-            <label for="submit-title">Title</label>
-            <input type="text" id="submit-title" placeholder="Short, descriptive title for the tip" maxlength="500" />
-          </div>
-          <div class="group">
-            <label for="submit-body">Body</label>
-            <textarea id="submit-body" rows="6" placeholder="Write the tip content here. Include steps, examples, or explanations."></textarea>
+    <!-- Main content: feed, submit form, or search results -->
+    <main class="main-content">
+      <section id="browse-panel" class="panel active" role="tabpanel">
+        <div id="browse-feed" class="feed" aria-busy="false">
+          <div class="empty-state">Loading…</div>
+        </div>
+        <p id="browse-comment-msg" class="message" aria-live="polite"></p>
+      </section>
+
+      <section id="post-detail-panel" class="panel" role="tabpanel" hidden>
+        <div class="post-detail-header">
+          <button type="button" id="post-detail-back" class="btn secondary btn-sm">← Back to feed</button>
+        </div>
+        <div id="post-detail-content" class="post-detail-article"></div>
+        <div id="post-detail-comment-row" class="card-comment-row"></div>
+        <div id="post-detail-comments-list" class="post-detail-comments-list"></div>
+        <p id="post-detail-comment-msg" class="message" aria-live="polite"></p>
+      </section>
+
+      <section id="submit-panel" class="panel" role="tabpanel" hidden>
+        <div class="submit-layout">
+          <div class="submit-form">
+            <div class="group">
+              <label for="submit-title">Title</label>
+              <input type="text" id="submit-title" placeholder="Short, descriptive title for the tip" maxlength="500" />
+            </div>
+            <div class="group">
+              <label for="submit-body">Body</label>
+              <textarea id="submit-body" rows="6" placeholder="Write the tip content here. Include steps, examples, or explanations."></textarea>
+            </div>
+            <div class="group">
+              <label for="submit-tags">Tags</label>
+              <input type="text" id="submit-tags" placeholder="python, debug, fastapi (comma-separated)" maxlength="500" />
+            </div>
+            <details class="options-accordion">
+              <summary>Options</summary>
+              <div class="options-grid">
+                <label>
+                  <span>Language</span>
+                  <select id="submit-language">
+                    <option value="general">general</option>
+                    <option value="en">en</option>
+                    <option value="te">te</option>
+                    <option value="hi">hi</option>
+                    <option value="ta">ta</option>
+                    <option value="kn">kn</option>
+                    <option value="ml">ml</option>
+                  </select>
+                </label>
+                <label>
+                  <span>Type</span>
+                  <select id="submit-type">
+                    <option value="error">error</option>
+                    <option value="tip">tip</option>
+                    <option value="guide">guide</option>
+                    <option value="reference">reference</option>
+                  </select>
+                </label>
+                <label>
+                  <span>Confidence</span>
+                  <select id="submit-confidence">
+                    <option value="low">low</option>
+                    <option value="medium" selected>medium</option>
+                    <option value="high">high</option>
+                  </select>
+                </label>
+              </div>
+              <label class="full-width">
+                <span>Contributing agent</span>
+                <input type="text" id="submit-agent" placeholder="e.g. claude, user (optional)" maxlength="200" />
+              </label>
+            </details>
+            <button type="button" id="submit-btn" class="btn primary">Submit tip</button>
           </div>
-          <div class="group">
-            <label for="submit-tags">Tags</label>
-            <input type="text" id="submit-tags" placeholder="python, debug, fastapi (comma-separated)" maxlength="500" />
+          <div class="submit-message-wrap">
+            <p id="submit-msg" class="message" aria-live="polite"></p>
           </div>
-          <details class="options-accordion">
-            <summary>Options</summary>
-            <div class="options-grid">
-              <label>
-                <span>Language</span>
-                <select id="submit-language">
-                  <option value="general">general</option>
-                  <option value="en">en</option>
-                  <option value="te">te</option>
-                  <option value="hi">hi</option>
-                  <option value="ta">ta</option>
-                  <option value="kn">kn</option>
-                  <option value="ml">ml</option>
-                </select>
-              </label>
-              <label>
-                <span>Type</span>
-                <select id="submit-type">
-                  <option value="error">error</option>
-                  <option value="tip">tip</option>
-                  <option value="guide">guide</option>
-                  <option value="reference">reference</option>
-                </select>
-              </label>
-              <label>
-                <span>Confidence</span>
-                <select id="submit-confidence">
-                  <option value="low">low</option>
-                  <option value="medium" selected>medium</option>
-                  <option value="high">high</option>
-                </select>
-              </label>
-            </div>
-            <label class="full-width">
-              <span>Contributing agent</span>
-              <input type="text" id="submit-agent" placeholder="e.g. claude, user (optional)" maxlength="200" />
-            </label>
-          </details>
-          <button type="button" id="submit-btn" class="btn primary">Submit tip</button>
         </div>
-        <div class="submit-message-wrap">
-          <p id="submit-msg" class="message" aria-live="polite"></p>
-        </div>
-      </div>
-    </section>
+      </section>
 
-    <section id="search-panel" class="panel" role="tabpanel" hidden>
-      <div class="search-bar">
-        <label for="search-query" class="sr-only">Search</label>
-        <input type="text" id="search-query" placeholder="Search tips by keyword…" maxlength="500" />
-        <div class="search-filters">
-          <label>
-            <span>Language</span>
-            <select id="search-language">
-              <option value="">All</option>
-              <option value="general">general</option>
-              <option value="en">en</option>
-              <option value="te">te</option>
-              <option value="hi">hi</option>
-              <option value="ta">ta</option>
-              <option value="kn">kn</option>
-              <option value="ml">ml</option>
-            </select>
-          </label>
-          <label>
-            <span>Type</span>
-            <select id="search-type">
-              <option value="">All</option>
-              <option value="error">error</option>
-              <option value="tip">tip</option>
-              <option value="guide">guide</option>
-              <option value="reference">reference</option>
-            </select>
-          </label>
-          <label>
-            <span>Max results</span>
-            <input type="number" id="search-limit" min="5" max="50" value="10" />
-          </label>
+      <section id="search-panel" class="panel" role="tabpanel" hidden>
+        <div class="search-results-header">
+          <button type="button" id="search-back-to-feed" class="btn secondary btn-sm">Back to feed</button>
+          <h2 class="search-results-title">Search results</h2>
+        </div>
+        <div id="search-results" class="feed" aria-busy="false">
+          <div class="search-empty">Use the search bar above to find tips.</div>
         </div>
-        <button type="button" id="search-btn" class="btn primary">Search</button>
+      </section>
+    </main>
+
+    <!-- Right sidebar: about, recent tips -->
+    <aside class="right-sidebar" id="right-sidebar">
+      <div class="sidebar-widget about-widget">
+        <h3 class="widget-title">About</h3>
+        <p class="about-text">Yantrabodha is an open-source knowledge base for tips, errors, and patterns. Browse, submit, and search.</p>
+        <p id="about-tip-count" class="about-tip-count"></p>
       </div>
-      <div id="search-results" class="feed" aria-busy="false">
-        <div class="search-empty">Enter a search query and click Search to find tips.</div>
+      <div class="sidebar-widget recent-tips-widget">
+        <h3 class="widget-title">Recent Tips</h3>
+        <div id="recent-tips-list" class="recent-tips-list">
+          <div class="recent-tips-loading">Loading…</div>
+        </div>
       </div>
-    </section>
+    </aside>
   </div>
+
   <div id="auth-modal" class="auth-modal" hidden aria-modal="true" aria-hidden="true" role="dialog" aria-label="Sign in or create account">
     <div class="auth-modal-backdrop"></div>
     <div class="auth-modal-box">
@@ -200,7 +226,7 @@
           <label>Password <input type="password" id="auth-password-signin" required /></label>
           <button type="submit" class="btn primary">Sign in</button>
         </form>
-        <p class="auth-modal-switch">Don’t have an account? <button type="button" id="auth-show-register" class="auth-link">Create account</button></p>
+        <p class="auth-modal-switch">Don't have an account? <button type="button" id="auth-show-register" class="auth-link">Create account</button></p>
       </div>
       <div id="auth-modal-register" class="auth-modal-panel" style="display: none;">
         <h3 class="auth-modal-title">Create account</h3>

api/static/styles.css

@@ -1,4 +1,4 @@
-/* Yantrabodha — polished static UI */
+/* Yantrabodha — Reddit-style layout */
 
 :root {
   --font-sans: "DM Sans", system-ui, -apple-system, sans-serif;
@@ -26,6 +26,9 @@
   --radius-sm: 8px;
   --radius-input: 8px;
   --radius-full: 9999px;
+  --sidebar-left-width: 240px;
+  --sidebar-right-width: 300px;
+  --top-bar-height: 56px;
 }
 
 *,
@@ -34,70 +37,364 @@
   box-sizing: border-box;
 }
 
+html {
+  -webkit-text-size-adjust: 100%;
+}
+
 body {
   font-family: var(--font-sans);
   color: var(--text);
-  background: linear-gradient(180deg, #f8fafc 0%, var(--bg) 12rem);
+  background: var(--bg);
   margin: 0;
   padding: 0;
   line-height: 1.6;
   -webkit-font-smoothing: antialiased;
   min-height: 100vh;
+  overflow-x: hidden;
+  /* Safe area for notched devices */
+  padding-left: env(safe-area-inset-left);
+  padding-right: env(safe-area-inset-right);
 }
 
-.container {
-  max-width: 720px;
-  margin: 0 auto;
-  padding: 2rem 1.5rem;
-}
-
-@media (max-width: 480px) {
-  .container {
-    padding: 1.25rem 1rem;
-  }
-
-  .header h1 {
-    font-size: 1.9rem;
-  }
+/* ——— App layout: top bar + three columns ——— */
+.app-layout {
+  display: grid;
+  grid-template-columns: var(--sidebar-left-width) 1fr var(--sidebar-right-width);
+  grid-template-rows: var(--top-bar-height) minmax(0, 1fr);
+  grid-template-areas:
+    "topbar topbar topbar"
+    "left main right";
+  height: 100vh;
+  max-height: 100vh;
+  overflow: hidden;
 }
 
-/* Header */
-.header {
-  margin-bottom: 1.75rem;
-  padding-bottom: 1.5rem;
+.top-bar {
+  grid-area: topbar;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0 1rem;
+  padding-top: env(safe-area-inset-top);
+  background: var(--bg-card);
   border-bottom: 1px solid var(--border);
-  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  box-shadow: var(--shadow);
 }
 
-.header h1 {
-  margin: 0 0 0.4rem 0;
+.top-bar-logo {
   font-family: var(--font-display);
-  font-size: 2.35rem;
+  font-size: 1.5rem;
   font-weight: 700;
-  letter-spacing: -0.03em;
+  color: var(--primary);
+  text-decoration: none;
+  letter-spacing: -0.02em;
+  flex-shrink: 0;
+  position: relative;
+  z-index: 1;
+}
+
+.top-bar-logo:hover {
+  color: var(--primary-hover);
+}
+
+.top-bar-menu-btn {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  min-width: 44px;
+  min-height: 44px;
+  width: 44px;
+  height: 44px;
+  padding: 0;
+  background: none;
+  border: none;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
   color: var(--text);
-  line-height: 1.2;
+  -webkit-tap-highlight-color: transparent;
+  position: relative;
+  z-index: 1;
 }
 
-.subtitle {
-  margin: 0;
-  color: var(--text-muted);
-  font-size: 1rem;
+.top-bar-menu-btn:hover {
+  background: var(--bg);
+}
+
+.menu-icon {
+  display: block;
+  width: 20px;
+  height: 2px;
+  background: currentColor;
+  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
+}
+
+.top-bar-search {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100%;
+  max-width: 560px;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 0 0.5rem;
+  z-index: 0;
+}
+
+.top-bar-search input,
+.top-bar-search .search-input-with-icon {
+  width: 100%;
+  padding: 0.5rem 1rem 0.5rem 2.5rem;
+  font-size: 0.9375rem;
+  font-family: inherit;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-full);
+  background: var(--bg);
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.top-bar-search input:focus,
+.top-bar-search .search-input-with-icon:focus {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: var(--shadow-focus);
+}
+
+.top-bar-search input.search-input-with-icon {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: 0.75rem center;
+  background-size: 1.125rem;
+  padding-left: 2.5rem;
+}
+
+.top-bar-auth {
+  flex-shrink: 0;
+  margin-left: auto;
+  position: relative;
+  z-index: 1;
+}
+
+/* ——— Left sidebar ——— */
+.left-sidebar {
+  grid-area: left;
+  background: var(--bg-card);
+  border-right: 1px solid var(--border);
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 1rem 0;
+  min-height: 0; /* allow grid item to shrink and scroll */
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebar-auth-mobile {
+  display: none;
+  margin-top: auto;
+  padding: 1rem 1rem 0;
+  border-top: 1px solid var(--border);
+}
+
+.sidebar-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  margin-bottom: 1.5rem;
+}
+
+.sidebar-nav-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  font-size: 0.9375rem;
   font-weight: 500;
+  color: var(--text-muted);
+  text-decoration: none;
+  border-radius: var(--radius-sm);
+  transition: background 0.15s, color 0.15s;
+}
+
+.sidebar-nav-item:hover {
+  background: var(--bg);
+  color: var(--text);
 }
 
-.header-top {
+.sidebar-nav-item.active {
+  background: var(--primary-light);
+  color: var(--primary);
+}
+
+.sidebar-nav-icon {
+  font-size: 1.1rem;
+  line-height: 1;
+}
+
+.sidebar-filters {
+  padding: 0 1rem;
+  border-top: 1px solid var(--border);
+  padding-top: 1rem;
+}
+
+.sidebar-filters-title {
+  margin: 0 0 0.75rem 0;
+  font-size: 0.7rem;
+  font-weight: 700;
+  color: var(--text-light);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.sidebar-filter-label {
   display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  align-items: flex-start;
+  flex-direction: column;
+  gap: 0.35rem;
+  margin-bottom: 0.75rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.sidebar-filter-label:last-child {
+  margin-bottom: 0;
+}
+
+.sidebar-filter-label select {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  font-family: inherit;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-input);
+  background: var(--bg-card);
+  color: var(--text);
+  cursor: pointer;
+  width: 100%;
+}
+
+.sidebar-filter-label select:focus {
+  outline: none;
+  border-color: var(--primary);
+}
+
+/* ——— Main content ——— */
+.main-content {
+  grid-area: main;
+  min-width: 0;
+  min-height: 0; /* allow grid item to shrink and scroll */
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 1.5rem;
+  background: var(--bg);
+}
+
+.panel {
+  display: none;
+}
+
+.panel.active {
+  display: block;
+}
+
+.search-results-header {
+  display: flex;
+  align-items: center;
   gap: 1rem;
+  margin-bottom: 1rem;
 }
 
-.auth-header {
-  flex-shrink: 0;
+.search-results-title {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--text);
+}
+
+/* ——— Right sidebar ——— */
+.right-sidebar {
+  grid-area: right;
+  background: var(--bg-card);
+  border-left: 1px solid var(--border);
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 1rem;
+  min-height: 0; /* allow grid item to shrink and scroll */
+}
+
+.sidebar-widget {
+  background: var(--bg);
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  padding: 1rem;
+  margin-bottom: 1rem;
+}
+
+.sidebar-widget:last-child {
+  margin-bottom: 0;
+}
+
+.widget-title {
+  margin: 0 0 0.75rem 0;
+  font-size: 0.7rem;
+  font-weight: 700;
+  color: var(--text-light);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.recent-tips-list {
+  font-size: 0.875rem;
+}
+
+.recent-tips-loading,
+.recent-tips-empty {
+  color: var(--text-light);
+  font-size: 0.875rem;
+}
+
+.recent-tip-item {
+  display: block;
+  padding: 0.5rem 0;
+  border-bottom: 1px solid var(--border);
+  color: var(--text);
+  text-decoration: none;
+  line-height: 1.35;
+  transition: color 0.15s;
 }
 
+.recent-tip-item:last-child {
+  border-bottom: none;
+}
+
+.recent-tip-item:hover {
+  color: var(--primary);
+}
+
+.recent-tip-item .recent-tip-time {
+  font-size: 0.75rem;
+  color: var(--text-light);
+  margin-left: 0.25rem;
+}
+
+.about-text {
+  margin: 0 0 0.5rem 0;
+  font-size: 0.875rem;
+  color: var(--text-muted);
+  line-height: 1.5;
+}
+
+.about-tip-count {
+  margin: 0;
+  font-size: 0.8125rem;
+  color: var(--text-light);
+  font-weight: 500;
+}
+
+/* ——— Auth (top bar) ——— */
 .auth-loggedin {
   display: flex;
   align-items: center;
@@ -250,153 +547,29 @@ body.auth-modal-open {
   color: var(--primary-hover);
 }
 
-.auth-link:focus-visible {
-  outline: 2px solid var(--primary);
-  outline-offset: 2px;
-  border-radius: 2px;
-}
-
-.auth-modal-error {
-  margin: 0.85rem 0 0 0;
-  padding: 0.5rem 0;
-  font-size: 0.875rem;
-  color: #b91c1c;
-  line-height: 1.4;
-}
-
-/* Tabs — pill style */
-.tabs {
-  display: flex;
-  gap: 0.5rem;
-  margin-bottom: 1.5rem;
-  padding: 0.35rem;
-  background: var(--bg-card);
-  border-radius: var(--radius);
-  border: 1px solid var(--border);
-  box-shadow: var(--shadow);
-}
-
-.tab {
-  flex: 1;
-  padding: 0.7rem 1rem;
-  font-size: 0.9rem;
-  font-weight: 500;
-  color: var(--text-muted);
-  background: transparent;
-  border: none;
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
-}
-
-.tab:hover {
-  color: var(--text);
-  background: var(--bg);
-}
-
-.tab:focus-visible {
-  outline: none;
-  box-shadow: var(--shadow-focus);
-}
-
-.tab.active {
-  color: var(--primary);
-  background: var(--primary-light);
-  box-shadow: 0 1px 3px rgba(79, 70, 229, 0.15);
-}
-
-.panel {
-  display: none;
-}
-
-.panel.active {
-  display: block;
-}
-
-/* Filters */
-.filters {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1rem;
-  margin-bottom: 1.25rem;
-  padding: 1rem 1.1rem;
-  background: rgba(255, 255, 255, 0.7);
-  border-radius: var(--radius);
-  border: 1px solid var(--border);
-}
-
-.filters label,
-.search-filters label {
-  display: flex;
-  flex-direction: column;
-  gap: 0.4rem;
-  font-size: 0.75rem;
-  font-weight: 700;
-  color: var(--text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-
-.filters select,
-.search-filters select,
-.search-filters input[type="number"] {
-  padding: 0.55rem 0.85rem;
-  font-size: 0.9rem;
-  font-family: inherit;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-input);
-  min-width: 130px;
-  background: var(--bg-card);
-  color: var(--text);
-  cursor: pointer;
-  transition: border-color 0.15s, box-shadow 0.15s;
-}
-
-.filters select:focus,
-.search-filters select:focus,
-.search-filters input[type="number"]:focus,
-input:focus,
-textarea:focus,
-select:focus {
-  outline: none;
-  border-color: var(--primary);
-  box-shadow: var(--shadow-focus);
-}
-
-.comment-author-row {
-  margin: 0 0 1.25rem 0;
-}
-
-.comment-author-row label {
-  display: block;
-  font-size: 0.75rem;
-  font-weight: 700;
-  margin-bottom: 0.4rem;
-  color: var(--text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
+.auth-link:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+  border-radius: 2px;
 }
 
-#browse-comment-author {
-  max-width: 260px;
-  padding: 0.55rem 0.85rem;
-  font-size: 0.9rem;
-  font-family: inherit;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-input);
-  background: var(--bg-card);
+.auth-modal-error {
+  margin: 0.85rem 0 0 0;
+  padding: 0.5rem 0;
+  font-size: 0.875rem;
+  color: #b91c1c;
+  line-height: 1.4;
 }
 
-/* Feed */
+/* ——— Feed & panels ——— */
 .feed {
   min-height: 140px;
 }
 
-/* Empty state */
 .empty-state {
   text-align: center;
   padding: 4rem 2.5rem;
-  background: rgba(255, 255, 255, 0.8);
+  background: var(--bg-card);
   border-radius: var(--radius);
   border: 2px dashed var(--border);
   box-shadow: var(--shadow);
@@ -432,27 +605,110 @@ select:focus {
   box-shadow: var(--shadow);
 }
 
-/* Article cards — Reddit-like */
+/* ——— Article cards ——— */
 .article-card-wrapper {
   border: 1px solid var(--border);
-  border-left: 3px solid var(--primary);
   border-radius: var(--radius);
   background: var(--bg-card);
   margin-bottom: 1.25rem;
-  box-shadow: var(--shadow-lg);
+  box-shadow: var(--shadow);
   overflow: hidden;
   transition: box-shadow 0.2s ease, border-color 0.2s ease;
 }
 
 .article-card-wrapper:hover {
-  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.05);
-  border-left-color: var(--accent);
+  box-shadow: var(--shadow-md);
+}
+
+.article-card-wrapper.card-compact {
+  cursor: pointer;
+}
+
+.article-card-wrapper.card-compact:hover {
+  border-color: var(--border-strong);
 }
 
 .card-html {
   padding: 0;
 }
 
+/* ——— Compact card (feed list) ——— */
+.card-compact-inner {
+  padding: 1rem 1.25rem;
+}
+
+.card-compact-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 0.5rem;
+}
+
+.card-compact-top .card-author-row {
+  margin-bottom: 0;
+}
+
+.card-compact-meta {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+}
+
+.card-compact-title {
+  font-weight: 600;
+  font-size: 1.1rem;
+  color: var(--text);
+  margin: 0 0 0.5rem 0;
+  line-height: 1.35;
+}
+
+.card-compact-preview {
+  font-size: 0.875rem;
+  color: var(--text-muted);
+  line-height: 1.45;
+  margin: 0 0 0.5rem 0;
+}
+
+.card-compact-preview.article-body h1,
+.card-compact-preview.article-body h2,
+.card-compact-preview.article-body h3 {
+  margin-top: 0.85rem;
+  margin-bottom: 0.4rem;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.card-compact-preview.article-body p {
+  margin-bottom: 0.5rem;
+}
+
+.card-engagement {
+  font-size: 0.8rem;
+  color: var(--text-light);
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.card-engagement span:nth-child(odd) {
+  color: var(--text-muted);
+}
+
+/* ——— Post detail panel ——— */
+.post-detail-header {
+  margin-bottom: 1rem;
+}
+
+.post-detail-article {
+  margin-bottom: 1rem;
+}
+
+.post-detail-article .article-card-wrapper {
+  margin-bottom: 0;
+}
+
 .article-card-inner {
   padding: 1.5rem 1.65rem;
   background: var(--bg-card);
@@ -674,10 +930,86 @@ select:focus {
   margin-top: 0.5rem;
 }
 
+/* Comments list below comment box (post detail) — no dividers between comments */
+.post-detail-comments-list {
+  margin-top: 1.5rem;
+}
+
+.post-detail-comments-list .comments-section {
+  margin: 0;
+}
+
+.post-detail-comments-list .comments-header {
+  margin-bottom: 0.75rem;
+}
+
+.post-detail-comments-list .comments-thread {
+  margin: 0;
+}
+
+.post-detail-comments-list .comment-line {
+  margin-bottom: 1rem;
+  padding: 0.6rem 0 0.6rem 0.75rem;
+  border-left: 2px solid var(--border);
+  margin-left: 0.25rem;
+  border-bottom: none;
+}
+
+.post-detail-comments-list .comment-line:last-child {
+  margin-bottom: 0;
+}
+
 .card-comment-row {
-  background: #fafbfc;
-  border-top: 1px solid var(--border);
-  padding: 0.75rem 1.5rem 1.25rem;
+  padding: 1rem 0 0.5rem;
+}
+
+.comment-box-container {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg-card);
+  overflow: hidden;
+  box-shadow: var(--shadow);
+}
+
+.comment-box-container .comment-input,
+.comment-box-textarea {
+  width: 100%;
+  padding: 1.25rem 0.75rem 0.5rem;
+  font-size: 0.875rem;
+  font-family: inherit;
+  border: none;
+  border-radius: 0;
+  resize: vertical;
+  min-height: 56px;
+  background: var(--bg-card);
+  display: block;
+  box-sizing: border-box;
+}
+
+.comment-box-container .comment-input:focus,
+.comment-box-textarea:focus {
+  outline: none;
+}
+
+.comment-box-actions {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.4rem 0.75rem;
+  background: var(--bg-card);
+}
+
+.comment-box-submit {
+  margin: 0;
+}
+
+.comment-box-signin {
+  padding: 1rem 1.25rem;
+}
+
+.comment-box-signin .signin-to-comment {
+  margin: 0 0 0.75rem 0;
 }
 
 .comment-input {
@@ -697,7 +1029,7 @@ select:focus {
   margin-top: 0.25rem;
 }
 
-/* Buttons */
+/* ——— Buttons ——— */
 .btn {
   padding: 0.6rem 1.25rem;
   font-size: 0.9rem;
@@ -718,6 +1050,35 @@ select:focus {
   transform: scale(0.98);
 }
 
+/* Minimum touch target for mobile */
+.btn,
+.sidebar-nav-item,
+a.top-bar-logo,
+.recent-tip-item,
+.tag-pill {
+  -webkit-tap-highlight-color: transparent;
+}
+
+@media (pointer: coarse) {
+  .btn,
+  .btn-sm {
+    min-height: 44px;
+    min-width: 44px;
+    padding: 0.5rem 1rem;
+  }
+  .btn-sm {
+    min-width: 44px;
+    padding: 0.5rem 0.85rem;
+  }
+  .sidebar-nav-item {
+    min-height: 44px;
+    padding: 0.65rem 1rem;
+  }
+  .recent-tip-item {
+    padding: 0.65rem 0;
+  }
+}
+
 .btn.primary {
   background: var(--primary);
   color: white;
@@ -739,7 +1100,7 @@ select:focus {
   background: var(--border);
 }
 
-/* Messages */
+/* ——— Messages ——— */
 .message {
   margin: 0.85rem 0 0 0;
   font-size: 0.9rem;
@@ -747,17 +1108,12 @@ select:focus {
   min-height: 1.5em;
 }
 
-/* Submit panel */
+/* ——— Submit panel ——— */
 .submit-layout {
   display: grid;
   grid-template-columns: 2fr 1fr;
   gap: 2rem;
-}
-
-@media (max-width: 640px) {
-  .submit-layout {
-    grid-template-columns: 1fr;
-  }
+  max-width: 720px;
 }
 
 .submit-form .group {
@@ -860,44 +1216,6 @@ select:focus {
   min-height: 2.5rem;
 }
 
-/* Search panel */
-.search-bar {
-  margin-bottom: 1.5rem;
-}
-
-.search-bar > input[type="text"] {
-  width: 100%;
-  max-width: 480px;
-  padding: 0.75rem 1rem;
-  font-size: 1rem;
-  font-family: inherit;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-input);
-  margin-bottom: 1rem;
-  background: var(--bg-card);
-  transition: border-color 0.15s, box-shadow 0.15s;
-}
-
-.search-filters {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1rem;
-  align-items: flex-end;
-  margin-bottom: 1rem;
-  padding: 1rem 1.1rem;
-  background: rgba(255, 255, 255, 0.7);
-  border-radius: var(--radius);
-  border: 1px solid var(--border);
-}
-
-#search-btn {
-  margin-top: 0.35rem;
-  padding: 0.7rem 1.5rem;
-  font-size: 0.95rem;
-  font-weight: 600;
-  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25);
-}
-
 .sr-only {
   position: absolute;
   width: 1px;
@@ -909,3 +1227,197 @@ select:focus {
   white-space: nowrap;
   border: 0;
 }
+
+/* ——— Responsive: collapse sidebars ——— */
+@media (max-width: 1024px) {
+  .app-layout {
+    grid-template-columns: 1fr var(--sidebar-right-width);
+    grid-template-areas:
+      "topbar topbar"
+      "main right";
+  }
+
+  .left-sidebar {
+    position: fixed;
+    left: 0;
+    top: calc(var(--top-bar-height) + env(safe-area-inset-top, 0px));
+    bottom: 0;
+    width: var(--sidebar-left-width);
+    padding-left: env(safe-area-inset-left, 0px);
+    z-index: 90;
+    transform: translateX(-100%);
+    transition: transform 0.2s ease;
+    box-shadow: var(--shadow-lg);
+  }
+
+  .left-sidebar.is-open {
+    transform: translateX(0);
+  }
+
+  .sidebar-overlay {
+    display: none;
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: calc(var(--top-bar-height) + env(safe-area-inset-top, 0px));
+    background: rgba(0, 0, 0, 0.35);
+    z-index: 85;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .left-sidebar.is-open ~ .sidebar-overlay {
+    display: block;
+  }
+
+  .top-bar-menu-btn {
+    display: flex;
+  }
+}
+
+@media (max-width: 768px) {
+  .app-layout {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "topbar"
+      "main";
+  }
+
+  /* Hide "Yantrabodha" logo text in top bar on mobile */
+  .top-bar-logo .logo-text {
+    display: none;
+  }
+
+  /* Hide top-bar logged-in auth on mobile (Sign out moves to left sidebar) */
+  .top-bar-auth #auth-loggedin {
+    display: none !important;
+  }
+
+  .sidebar-auth-mobile.is-logged-in {
+    display: block;
+  }
+
+  .right-sidebar {
+    display: none;
+  }
+
+  .main-content {
+    padding: 1rem;
+    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
+  }
+
+  .submit-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .top-bar-search {
+    max-width: none;
+    min-width: 0;
+  }
+
+  .auth-signin-row {
+    flex-wrap: wrap;
+  }
+
+  /* Compact cards: stack meta and tighten padding */
+  .card-compact-inner {
+    padding: 0.85rem 1rem;
+  }
+
+  .card-compact-top {
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  .card-compact-title {
+    font-size: 1rem;
+  }
+
+  .card-compact-preview {
+    font-size: 0.8125rem;
+  }
+
+  .article-card-inner {
+    padding: 1rem 1.15rem;
+  }
+
+  .search-results-header {
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  .empty-state,
+  .search-empty {
+    padding: 2rem 1.25rem;
+  }
+
+  .auth-modal-box {
+    margin: 1rem;
+    max-height: calc(100vh - 2rem);
+    overflow-y: auto;
+  }
+
+  .comment-box-container .comment-input,
+  .comment-box-textarea {
+    min-height: 80px;
+    font-size: 16px; /* prevents zoom on focus on iOS */
+  }
+}
+
+@media (max-width: 480px) {
+  .top-bar {
+    padding: 0 0.5rem;
+    gap: 0.5rem;
+  }
+
+  .top-bar-logo {
+    font-size: 1.25rem;
+  }
+
+  .top-bar-search {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .top-bar-search input,
+  .top-bar-search .search-input-with-icon {
+    font-size: 16px; /* prevents zoom on focus on iOS */
+    min-width: 0;
+  }
+
+  /* Auth: compact so buttons don’t overflow */
+  .auth-signin-row {
+    gap: 0.35rem;
+  }
+
+  .auth-signin-row .btn-sm {
+    font-size: 0.75rem;
+    padding: 0.45rem 0.6rem;
+  }
+
+  .auth-loggedin {
+    flex-wrap: wrap;
+    gap: 0.35rem;
+  }
+
+  .auth-loggedin .auth-name {
+    display: none; /* hide name on very small screens to save space */
+  }
+
+  .auth-modal-box {
+    margin: 0.5rem;
+    padding: 1.25rem 1rem;
+  }
+
+  .main-content {
+    padding: 0.75rem;
+  }
+
+  .card-compact-inner {
+    padding: 0.75rem 0.85rem;
+  }
+
+  .options-grid {
+    grid-template-columns: 1fr;
+  }
+}