Fix welcome logo, real hex grid, Matrix boot messages, deeper TDS coverage

- WelcomePage: use official Lotus.png instead of generated SVG
- Hex Grid background: proper pointy-top hexagons via SVG data URI (was
  just triangles from linear-gradient trick)
- Boot sequence: Matrix-specific messages (TLS cert, E2EE Olm/Megolm,
  cross-signing, media proxy, /help hint)
- Terminal mode CSS: nav right border, header bottom glow, kbd TDS key
  style, abbr cyan underline, time amber color, img hover cyan outline,
  explicit body color anchor

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/features/lotus/chatBackground.ts

@@ -141,15 +141,11 @@ const DARK: Record<ChatBackground, CSSProperties> = {
     backgroundPosition: '0 0, 0 0, 20px 20px',
   },
 
-  // Isometric hex grid — cyan outlines
+  // True pointy-top hexagonal grid via SVG data URI
   hexgrid: {
     backgroundColor: '#060c14',
-    backgroundImage: [
-      'linear-gradient(60deg, rgba(0,212,255,0.07) 25%, transparent 25%, transparent 75%, rgba(0,212,255,0.07) 75%)',
-      'linear-gradient(120deg, rgba(0,212,255,0.07) 25%, transparent 25%, transparent 75%, rgba(0,212,255,0.07) 75%)',
-    ].join(','),
-    backgroundSize: '30px 52px',
-    backgroundPosition: '0 0, 15px 26px',
+    backgroundImage: 'url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2229%22%20height%3D%2250%22%3E%3Cpath%20d%3D%22M14.5%200L29%208L29%2025L14.5%2033L0%2025L0%208Z%20M14.5%2033L29%2041V50%20M14.5%2033L0%2041V50%22%20fill%3D%22none%22%20stroke%3D%22rgba%280%2C212%2C255%2C0.13%29%22%20stroke-width%3D%220.8%22/%3E%3C/svg%3E")',
+    backgroundSize: '29px 50px',
   },
 };
 
@@ -273,12 +269,8 @@ const LIGHT: Record<ChatBackground, CSSProperties> = {
 
   hexgrid: {
     backgroundColor: '#f4f8ff',
-    backgroundImage: [
-      'linear-gradient(60deg, rgba(50,100,220,0.08) 25%, transparent 25%, transparent 75%, rgba(50,100,220,0.08) 75%)',
-      'linear-gradient(120deg, rgba(50,100,220,0.08) 25%, transparent 25%, transparent 75%, rgba(50,100,220,0.08) 75%)',
-    ].join(','),
-    backgroundSize: '30px 52px',
-    backgroundPosition: '0 0, 15px 26px',
+    backgroundImage: 'url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2229%22%20height%3D%2250%22%3E%3Cpath%20d%3D%22M14.5%200L29%208L29%2025L14.5%2033L0%2025L0%208Z%20M14.5%2033L29%2041V50%20M14.5%2033L0%2041V50%22%20fill%3D%22none%22%20stroke%3D%22rgba%2850%2C100%2C220%2C0.11%29%22%20stroke-width%3D%220.8%22/%3E%3C/svg%3E")',
+    backgroundSize: '29px 50px',
   },
 };
 

src/app/pages/client/WelcomePage.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Box, Button, Icon, Icons, Text, config, toRem } from 'folds';
 import { Page, PageHero, PageHeroSection } from '../../components/page';
-import CinnySVG from '../../../../public/res/svg/cinny.svg';
+import LotusLogo from '../../../../public/res/Lotus.png';
 
 export function WelcomePage() {
   return (
@@ -14,7 +14,7 @@ export function WelcomePage() {
       >
         <PageHeroSection>
           <PageHero
-            icon={<img width="70" height="70" src={CinnySVG} alt="Lotus Chat Logo" />}
+            icon={<img width="70" height="70" src={LotusLogo} alt="Lotus Chat" style={{ objectFit: "contain" }} />}
             title="Welcome to Lotus Chat"
             subTitle={
               <span>

src/lotus-boot.ts

@@ -1,20 +1,23 @@
 const BOOT_MESSAGES = [
   '╔════════════════════════════════════════════════════╗',
   '║      LOTUS CHAT  —  LOTUSGUILD PLATFORM            ║',
-  '║   SECURE MATRIX CLIENT  —  TERMINAL MODE ACTIVE    ║',
+  '║   SECURE MATRIX CLIENT — TERMINAL MODE ACTIVE      ║',
   '╚════════════════════════════════════════════════════╝',
   '',
   '[ OK ] Kernel modules loaded',
-  '[ OK ] Filesystem mounted read-write',
   '[ OK ] Network interfaces configured',
-  '[ OK ] Matrix homeserver connection established',
-  '[ OK ] End-to-end encryption initialized',
-  '[ OK ] Authentication service started',
-  '[ OK ] Security headers applied',
+  '[ OK ] DNS resolution active',
+  '[ OK ] TLS certificate verified — matrix.lotusguild.org',
+  '[ OK ] Matrix homeserver connected',
+  '[ OK ] E2EE Olm/Megolm keys loaded',
+  '[ OK ] Cross-signing keys verified',
   '[ OK ] Room state synchronized',
+  '[ OK ] Media proxy available',
+  '[ OK ] Notification service active',
   '[ OK ] Terminal interface rendered',
   '',
   '> ALL SYSTEMS NOMINAL — LOTUS CHAT',
+  '> TYPE /help FOR COMMANDS',
   '',
 ];
 

src/lotus-terminal.css.ts

@@ -297,3 +297,58 @@ globalStyle(`body.${lotusTerminalBodyClass} ul li::marker`, {
 globalStyle(`body.${lotusTerminalBodyClass} ol li::marker`, {
   color: '#FF6B00',
 });
+
+// ── Structural elements — scoped TDS layout chrome ────────────────────────
+
+// Sidebar/nav: subtle cyan right border
+globalStyle(`body.${lotusTerminalBodyClass} nav`, {
+  borderRight: '1px solid rgba(0,212,255,0.10)',
+});
+
+// Page headers / toolbars: subtle bottom border glow
+globalStyle(`body.${lotusTerminalBodyClass} header`, {
+  borderBottom: '1px solid rgba(0,212,255,0.14)',
+  boxShadow: '0 4px 24px rgba(0,0,0,0.55)',
+});
+
+// kbd — TDS terminal key style
+globalStyle(`body.${lotusTerminalBodyClass} kbd`, {
+  fontFamily: "'JetBrains Mono', 'Fira Code', 'Courier New', monospace",
+  fontSize: '0.75em',
+  background: '#0d1520',
+  border: '1px solid rgba(0,212,255,0.35)',
+  borderBottom: '2px solid rgba(0,212,255,0.50)',
+  borderRadius: '3px',
+  padding: '0.1em 0.45em',
+  color: '#00D4FF',
+  textShadow: '0 0 4px rgba(0,212,255,0.4)',
+  boxShadow: '0 1px 3px rgba(0,0,0,0.6)',
+});
+
+// Tooltip / title popups: if browser renders them, style if possible
+globalStyle(`body.${lotusTerminalBodyClass} [title]`, {
+  textDecoration: 'underline dotted rgba(0,212,255,0.35)',
+  cursor: 'help',
+});
+
+// abbr
+globalStyle(`body.${lotusTerminalBodyClass} abbr[title]`, {
+  textDecoration: 'underline dotted #00D4FF',
+});
+
+// time elements — amber muted
+globalStyle(`body.${lotusTerminalBodyClass} time`, {
+  color: '#7fa3bf',
+  fontSize: '0.78em',
+});
+
+// Images: cyan border on hover
+globalStyle(`body.${lotusTerminalBodyClass} img:hover`, {
+  outline: '1px solid rgba(0,212,255,0.35)',
+  boxShadow: '0 0 12px rgba(0,212,255,0.12)',
+});
+
+// Ensure body text color is correct regardless of vanilla-extract theme loading order
+globalStyle(`body.${lotusTerminalBodyClass}`, {
+  color: '#c4d9ee',
+});