← back to Wallco Ai
chat: design-AI pill back to bottom-right corner + Big Red stacks above
4e4fe7440302016061e8d67f476ac2e5e124da26 · 2026-05-21 13:55:32 -0700 · Steve Abrams
Reverses the 2026-05-20 upper-right pinning that was covering the hamburger.
- #wallco-chat-fab → bottom:22 right:22 (the corner per Steve directive)
- #wallco-chat-panel → bottom:78 right:22 (slides UP from below FAB)
- Big Red bumped via override to bottom:88 so the two FABs stack cleanly
- Mobile path unchanged: wallco-chat-fab killed ≤768px, Big Red returns to
bottom:16 corner via media-query override.
- Hamburger (upper-right) is now uncovered.
Files touched
Diff
commit 4e4fe7440302016061e8d67f476ac2e5e124da26
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Thu May 21 13:55:32 2026 -0700
chat: design-AI pill back to bottom-right corner + Big Red stacks above
Reverses the 2026-05-20 upper-right pinning that was covering the hamburger.
- #wallco-chat-fab → bottom:22 right:22 (the corner per Steve directive)
- #wallco-chat-panel → bottom:78 right:22 (slides UP from below FAB)
- Big Red bumped via override to bottom:88 so the two FABs stack cleanly
- Mobile path unchanged: wallco-chat-fab killed ≤768px, Big Red returns to
bottom:16 corner via media-query override.
- Hamburger (upper-right) is now uncovered.
---
public/css/chat.css | 37 ++++++++++++++++++++++++++++++-------
1 file changed, 30 insertions(+), 7 deletions(-)
diff --git a/public/css/chat.css b/public/css/chat.css
index 6818152..9d5bb97 100644
--- a/public/css/chat.css
+++ b/public/css/chat.css
@@ -2,10 +2,13 @@
Dark-mode aware. Inherits the page's theme. */
/* ── floating button (FAB) ───────────────────────────────────────── */
-/* Pinned upper-right per Steve directive 2026-05-20 (was bottom-right). */
+/* Bottom-right per Steve directive 2026-05-21 (reverses the 2026-05-20
+ upper-right pinning that was covering the hamburger). Stacks with
+ Big Red — wallco's design-AI pill is IN the corner; Big Red moves up
+ via the override at the bottom of this file. */
#wallco-chat-fab {
position: fixed;
- top: 22px;
+ bottom: 22px;
right: 22px;
z-index: 9998;
background: var(--accent, #0d0d0d);
@@ -26,13 +29,13 @@
#wallco-chat-fab .fab-spark { font-family: var(--serif); font-size: 17px; color: var(--gold, #c9a14b); line-height: 1; }
/* ── panel ───────────────────────────────────────────────────────── */
-/* Anchored under the FAB (now upper-right) — drops down instead of up. */
+/* Anchored above the FAB (bottom-right) — slides UP from below the FAB. */
#wallco-chat-panel {
position: fixed;
- top: 78px;
+ bottom: 78px;
right: 22px;
width: 400px; max-width: calc(100vw - 32px);
- height: 600px; max-height: calc(100vh - 44px);
+ height: 600px; max-height: calc(100vh - 100px);
background: var(--card-bg, #fff);
color: var(--ink, #1a1714);
border: 1px solid var(--line, #d8cec0);
@@ -43,8 +46,8 @@
flex-direction: column;
overflow: hidden;
font-family: var(--sans);
- /* Drops DOWN from the upper-right FAB now (was sliding up from bottom). */
- transform: translateY(-8px); opacity: 0;
+ /* Slides UP from below the FAB anchor (bottom-right). */
+ transform: translateY(8px); opacity: 0;
transition: transform .22s ease, opacity .22s ease;
}
#wallco-chat-panel.is-open { display: flex; transform: translateY(0); opacity: 1; }
@@ -233,3 +236,23 @@
}
.wc-actions { grid-template-columns: repeat(2, 1fr); }
}
+
+/* ── Big Red stack offset (2026-05-21) ─────────────────────────────
+ Both wallco's design-AI pill and Big Red's circular launcher want
+ the bottom-right corner. The wallco pill stays IN the corner (Steve's
+ explicit directive); Big Red moves UP so they're stacked with the
+ wallco pill closer to the hamburger-free corner.
+ The wallco-chat-fab is 45px tall + 22px bottom = ~67px ceiling, plus
+ a 14px gap → Big Red at bottom:88px. Same for its .live state. */
+.bigred-launcher,
+.bigred-launcher.live {
+ bottom: 88px !important;
+}
+@media (max-width: 640px) {
+ /* On mobile the wallco-chat-fab is killed by chat.js (≤768px bail-out),
+ so Big Red can return to the corner. */
+ .bigred-launcher,
+ .bigred-launcher.live {
+ bottom: 16px !important;
+ }
+}
← cd80337 chat: kill-switch on mobile (≤768px) — bail before DOM injec
·
back to Wallco Ai
·
feat(cactus): 10 11ft × 7.5ft single-cactus murals + hide Pa b4d4d16 →