/* ============================================================================ lovable-skin.css — Additive "Lovable" restyle for the WORKSPACE only. ---------------------------------------------------------------------------- • Loaded LAST, after style.css and chat-overhaul.css. • Every rule is scoped under #workspace / #leftNav / #chatArea so the landing page (#landing) and the black hole are NEVER touched. • Changes appearance only — no layout reflow of working JS hooks, no id/class renames. Fully reversible: remove the tag to revert. • Reuses the app's existing gold tokens (--gold #ffd080 etc.). ========================================================================== */ /* ── Shared Lovable glass recipe (scoped helpers) ───────────────────────── */ :root { --lv-glass-bg: linear-gradient(135deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012)); --lv-glass-bg-str: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); --lv-glass-bd: rgba(255,255,255,0.08); --lv-glass-bd-str: rgba(255,255,255,0.10); --lv-glass-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 30px -12px rgba(0,0,0,0.55); --lv-glass-shadow-str: inset 0 1px 0 rgba(255,255,255,0.07), 0 24px 60px -24px rgba(0,0,0,0.7); --lv-gold-bd: rgba(255,208,128,0.40); --lv-r: 22px; /* rounded-3xl */ --lv-r-md: 14px; --lv-r-lg: 18px; } /* ════════════════════════════════════════════════════════════════════════ 1 · SIDEBAR (#leftNav) — frosted glass panel, rounded, gold active pill ════════════════════════════════════════════════════════════════════════ */ #leftNav { margin: 12px 0 12px 12px !important; height: calc(100vh - 24px) !important; background: var(--lv-glass-bg) !important; border: 1px solid var(--lv-glass-bd) !important; border-radius: var(--lv-r) !important; backdrop-filter: blur(20px) saturate(130%) !important; -webkit-backdrop-filter: blur(20px) saturate(130%) !important; box-shadow: var(--lv-glass-shadow) !important; padding: 14px !important; overflow: hidden !important; } /* New chat button — soft gold outline pill */ #leftNav .lnav-new-btn { border: 1px solid var(--lv-gold-bd) !important; border-radius: 12px !important; background: rgba(255,255,255,0.02) !important; padding: 10px 12px !important; } #leftNav .lnav-new-btn:hover { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,208,128,0.55) !important; box-shadow: 0 2px 10px rgba(255,208,128,0.10) !important; } /* History list spacing */ #leftNav .lnav-history { margin-top: 6px !important; } #leftNav .lnav-history-empty { font-size: 12px !important; color: var(--mid) !important; opacity: 0.8 !important; } /* Nav items — rounded, gold active pill with left bar */ #leftNav .lnav-nav-item, #leftNav .lnav-user-row { border-radius: 12px !important; position: relative !important; } #leftNav .lnav-nav-item { border: 1px solid transparent !important; } #leftNav .lnav-nav-item:hover { background: rgba(255,255,255,0.025) !important; } #leftNav .lnav-nav-item.active { background: rgba(255,255,255,0.03) !important; border: 1px solid var(--lv-gold-bd) !important; } #leftNav .lnav-nav-item.active::after { content: ""; position: absolute; left: -1px; top: 50%; transform: translateY(-50%); width: 2px; height: 16px; border-radius: 999px; background: var(--gold); } /* User row — glass chip */ #leftNav .lnav-user-row { border: 1px solid var(--lv-glass-bd) !important; background: rgba(255,255,255,0.015) !important; margin-top: 8px !important; padding: 9px !important; } #leftNav .lnav-user-row:hover { background: rgba(255,255,255,0.03) !important; } #leftNav .lnav-user-avatar { border: 1px solid var(--lv-gold-bd) !important; background: rgba(255,255,255,0.03) !important; } /* ════════════════════════════════════════════════════════════════════════ 2 · MAIN CHAT AREA (#chatArea) — glass-strong rounded container w/ glow ════════════════════════════════════════════════════════════════════════ */ #chatArea { border-radius: var(--lv-r) !important; background: var(--lv-glass-bg-str) !important; border: 1px solid var(--lv-glass-bd-str) !important; backdrop-filter: blur(28px) saturate(140%) !important; -webkit-backdrop-filter: blur(28px) saturate(140%) !important; box-shadow: var(--lv-glass-shadow-str) !important; position: relative !important; } /* warm corner glows behind content */ #chatArea::before, #chatArea::after { content: "" !important; position: absolute !important; pointer-events: none !important; border-radius: 50% !important; filter: blur(60px) !important; z-index: 0 !important; } #chatArea::before { left: -120px; top: 22%; width: 320px; height: 320px; background: radial-gradient(circle, rgba(255,225,180,0.12), transparent 70%) !important; } #chatArea::after { right: -100px; bottom: -100px; width: 380px; height: 380px; background: radial-gradient(circle, rgba(232,160,80,0.10), transparent 70%) !important; opacity: 1 !important; /* override any base ::after content */ animation: none !important; } #chatArea > * { position: relative; z-index: 1; } /* ════════════════════════════════════════════════════════════════════════ 3 · EMPTY STATE (.welcome-nb) — big centered hero + quick-task chips ════════════════════════════════════════════════════════════════════════ */ #chatArea .welcome-nb-title { font-size: clamp(30px, 4.6vw, 42px) !important; letter-spacing: -0.02em !important; font-weight: 700 !important; } #chatArea .welcome-nb-sub { max-width: 460px !important; margin-left: auto !important; margin-right: auto !important; font-size: 14px !important; line-height: 1.6 !important; color: var(--mid) !important; } #chatArea .welcome-chips { gap: 10px !important; max-width: 640px !important; margin: 28px auto 0 !important; } /* chips → Lovable glass tiles */ #chatArea .welcome-chip { border-radius: 12px !important; background: var(--lv-glass-bg) !important; border: 1px solid var(--lv-glass-bd) !important; backdrop-filter: blur(12px) saturate(120%) !important; -webkit-backdrop-filter: blur(12px) saturate(120%) !important; padding: 12px 14px !important; font-size: 13px !important; transition: border-color .18s ease, color .18s ease, transform .18s ease !important; } #chatArea .welcome-chip:hover { border-color: var(--lv-gold-bd) !important; transform: translateY(-1px) !important; } /* ════════════════════════════════════════════════════════════════════════ 4 · COMPOSER (.input-wrap) — rounded glass input bar ════════════════════════════════════════════════════════════════════════ */ #workspace .input-wrap { border-radius: 20px !important; background: var(--lv-glass-bg) !important; border: 1px solid var(--lv-glass-bd) !important; backdrop-filter: blur(20px) saturate(130%) !important; -webkit-backdrop-filter: blur(20px) saturate(130%) !important; box-shadow: var(--lv-glass-shadow) !important; padding: 8px !important; transition: border-color .2s ease, box-shadow .2s ease !important; } #workspace .input-wrap:focus-within { border-color: rgba(255,208,128,0.55) !important; box-shadow: 0 0 0 1px rgba(255,208,128,0.35), 0 0 28px rgba(255,208,128,0.12) !important; } #workspace .input-icon-btn { border-radius: 12px !important; } #workspace #sendBtn { border-radius: 12px !important; border: 1px solid var(--lv-gold-bd) !important; background: rgba(255,255,255,0.03) !important; } #workspace #sendBtn:hover { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,208,128,0.7) !important; } /* Feature pills above input → subtle glass */ #workspace #inputToolbar .feature-pill { border-radius: 999px !important; background: var(--lv-glass-bg) !important; border: 1px solid var(--lv-glass-bd) !important; } #workspace #inputToolbar .feature-pill:hover { border-color: var(--lv-gold-bd) !important; } /* ── Respect reduced transparency: drop blur if user prefers ───────────── */ @media (prefers-reduced-transparency: reduce) { #leftNav, #chatArea, #workspace .input-wrap, #chatArea .welcome-chip { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } }