1 files changed, 45 insertions, 0 deletions
diff --git a/Omni/Jr/Web/Style.hs b/Omni/Jr/Web/Style.hs
index fbaaa82..11475d9 100644
--- a/Omni/Jr/Web/Style.hs
+++ b/Omni/Jr/Web/Style.hs
@@ -35,6 +35,7 @@ stylesheet = do
   commitStyles
   markdownStyles
   retryBannerStyles
+  commentStyles
   taskMetaStyles
   timeFilterStyles
   sortDropdownStyles
@@ -1247,6 +1248,41 @@ retryBannerStyles = do
     color "#991b1b"
     fontWeight (weight 500)
 
+commentStyles :: Css
+commentStyles = do
+  ".comments-section" ? do
+    marginTop (px 12)
+  ".comment-card" ? do
+    backgroundColor "#f9fafb"
+    border (px 1) solid "#e5e7eb"
+    borderRadius (px 4) (px 4) (px 4) (px 4)
+    padding (px 10) (px 12) (px 10) (px 12)
+    marginBottom (px 8)
+  ".comment-text" ? do
+    margin (px 0) (px 0) (px 6) (px 0)
+    fontSize (px 13)
+    color "#374151"
+    whiteSpace preWrap
+  ".comment-time" ? do
+    fontSize (px 11)
+    color "#9ca3af"
+  ".comment-form" ? do
+    marginTop (px 12)
+    display flex
+    flexDirection column
+    Stylesheet.key "gap" ("8px" :: Text)
+  ".comment-textarea" ? do
+    width (pct 100)
+    padding (px 8) (px 10) (px 8) (px 10)
+    fontSize (px 13)
+    border (px 1) solid "#d0d0d0"
+    borderRadius (px 4) (px 4) (px 4) (px 4)
+    Stylesheet.key "resize" ("vertical" :: Text)
+    minHeight (px 60)
+  ".comment-textarea" # focus ? do
+    Stylesheet.key "outline" ("none" :: Text)
+    borderColor "#0066cc"
+
 timeFilterStyles :: Css
 timeFilterStyles = do
   ".time-filter" ? do
@@ -1624,6 +1660,15 @@ darkModeStyles =
       borderColor "#6b7280"
     ".sort-dropdown-item.active" ? do
       backgroundColor "#1e3a5f"
+    ".comment-card" ? do
+      backgroundColor "#374151"
+      borderColor "#4b5563"
+    ".comment-text" ? color "#d1d5db"
+    ".comment-time" ? color "#9ca3af"
+    ".comment-textarea" ? do
+      backgroundColor "#374151"
+      borderColor "#4b5563"
+      color "#f3f4f6"
     -- Responsive dark mode: dropdown content needs background on mobile
     query Media.screen [Media.maxWidth (px 600)] <| do
       ".navbar-dropdown-content" ? do