fix: scroll-to-top refinements

- Fix scroll container detection for shadow DOM
- Position button above bottom nav on desktop
- Style updates: accent background, white icon, border
- Responsive positioning (sticky mobile, fixed desktop)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[e-mail]>

src/components/atoms/grain-scroll-to-top.js

···
 
   static styles = css`
     :host {
-      position: fixed;
-      bottom: 20px;
-      left: 20px;
+      position: sticky;
+      bottom: var(--space-sm);
+      left: 0;
+      align-self: flex-start;
       z-index: 100;
+      margin-top: auto;
+      margin-left: var(--space-sm);
+    }
+    @media (min-width: 768px) {
+      :host {
+        position: fixed;
+        bottom: calc(57px + env(safe-area-inset-bottom, 0px) + var(--space-lg));
+        left: calc(50% - var(--feed-max-width) / 2 - 64px);
+        margin-left: 0;
+        margin-top: 0;
+      }
     }
     button {
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 48px;
-      height: 48px;
+      width: 42px;
+      height: 42px;
       border-radius: 50%;
       border: 1px solid var(--color-border);
-      background: var(--color-surface-secondary);
-      color: var(--color-accent);
+      background: var(--color-bg-primary);
+      color: white;
       cursor: pointer;
       opacity: 0;
       pointer-events: none;

src/components/pages/grain-timeline.js

···
   #observer = null;
   #initialized = false;
   #boundHandleScroll = null;
+  #scrollContainer = null;
 
   constructor() {
     super();
···
       this.#fetchTimeline();
     }
     this.#boundHandleScroll = this.#handleScroll.bind(this);
-    window.addEventListener('scroll', this.#boundHandleScroll, { passive: true });
+    this.#scrollContainer = this.#findScrollContainer();
+    (this.#scrollContainer || window).addEventListener('scroll', this.#boundHandleScroll, { passive: true });
+  }
+
+  #findScrollContainer() {
+    let el = this;
+    while (el) {
+      const parent = el.parentElement || el.getRootNode()?.host;
+      if (!parent || parent === document.documentElement) break;
+
+      const style = getComputedStyle(parent);
+      if (style.overflowY === 'auto' || style.overflowY === 'scroll') {
+        return parent;
+      }
+      el = parent;
+    }
+    return null;
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
     this.#observer?.disconnect();
     if (this.#boundHandleScroll) {
-      window.removeEventListener('scroll', this.#boundHandleScroll);
+      (this.#scrollContainer || window).removeEventListener('scroll', this.#boundHandleScroll);
     }
   }
 
···
   }
 
   #handleScroll() {
-    this._showScrollTop = window.scrollY > 150;
+    const scrollTop = this.#scrollContainer ? this.#scrollContainer.scrollTop : window.scrollY;
+    this._showScrollTop = scrollTop > 150;
   }
 
   async #handleScrollTop() {
     if (this._refreshing) return;
 
-    window.scrollTo({ top: 0, behavior: 'smooth' });
+    if (this.#scrollContainer) {
+      this.#scrollContainer.scrollTo({ top: 0, behavior: 'smooth' });
+    } else {
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
 
     // Wait for scroll to complete before refreshing
     await new Promise(resolve => setTimeout(resolve, 400));
···
           focusPhotoUrl=${this._focusPhotoUrl || ''}
           @close=${this.#handleCommentSheetClose}
         ></grain-comment-sheet>
+
+        <grain-scroll-to-top
+          ?visible=${this._showScrollTop}
+          @scroll-top=${this.#handleScrollTop}
+        ></grain-scroll-to-top>
       </grain-feed-layout>
-      <grain-scroll-to-top
-        ?visible=${this._showScrollTop}
-        @scroll-top=${this.#handleScrollTop}
-      ></grain-scroll-to-top>
     `;
   }
 }