Add Reltio AgentFlow theme + update compose for 3-service architecture

- custom.css: Reltio dark theme (purple-navy palette, wave bg, frosted glass sidebar, gradient buttons)
- darkWave2.svg: Wave background asset from reltio.ai
- docker-compose.yml: gateway + mcpo + webui with CSS/SVG volume mounts

openwebui/custom.css

@@ -0,0 +1,239 @@
+/* Reltio AgentFlow Theme for Open WebUI */
+/* Mount: ./openwebui/custom.css:/app/build/static/custom.css:ro */
+
+/* Import Roboto Flex */
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:wght@100..1000&display=swap');
+
+:root {
+  /* Reltio dark theme tokens */
+  --reltio-primary: #66f;
+  --reltio-primary-hover: #6666ff;
+  --reltio-accent: #0af;
+  --reltio-secondary: #9143ef;
+  --reltio-bg: #000000;
+  --reltio-bg-secondary: #303050;
+  --reltio-bg-tertiary: #0e0e25e6;
+  --reltio-surface: #0e0e25;
+  --reltio-surface-high: #262640;
+  --reltio-surface-dialog: #434370;
+  --reltio-border: #262640;
+  --reltio-border-secondary: #505079;
+  --reltio-outline: #434370;
+  --reltio-text: #e3e3f2;
+  --reltio-text-secondary: #7070a9;
+  --reltio-text-tertiary: #babade;
+  --reltio-text-support: #8d8dc8;
+  --reltio-scrim: #0e0e25b2;
+  --reltio-selected: #b2b2ff4d;
+  --reltio-gradient: linear-gradient(170deg, #0af 18.96%, #00c 81.29%);
+  --reltio-gradient-1: linear-gradient(172deg, #0af 50%, #00c 100%);
+}
+
+/* Font */
+body {
+  font-family: 'Roboto Flex', sans-serif !important;
+  font-size: 14px !important;
+  -webkit-font-smoothing: antialiased !important;
+  -moz-osx-font-smoothing: grayscale !important;
+}
+
+/* App background */
+body, .app, main, #app {
+  background-color: var(--reltio-bg) !important;
+  color: var(--reltio-text) !important;
+}
+
+/* Wave background via pseudo-element for blur control */
+body::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url('/static/darkWave2.svg');
+  background-repeat: no-repeat;
+  background-position: center bottom;
+  background-size: cover;
+  z-index: -1;
+  opacity: 1;
+  transition: opacity 0.3s ease-in-out, filter 0.3s ease-in-out;
+}
+
+/* Blur wave when conversation is active */
+body:has(.messages-container)::before,
+body:has([data-message-role])::before,
+body:has(.chat-messages)::before {
+  opacity: 0.4;
+  filter: blur(40px);
+}
+
+/* Transparent layers so wave shows through */
+.max-w-full, [data-chat], main, .app {
+  background-color: transparent !important;
+}
+
+/* Sidebar — frosted glass */
+#sidebar, [data-sidebar], .sidebar {
+  background-color: var(--reltio-bg-tertiary) !important;
+  border-right: 1px solid var(--reltio-border) !important;
+  -webkit-backdrop-filter: blur(12px) !important;
+  backdrop-filter: blur(12px) !important;
+}
+
+#sidebar button:hover,
+#sidebar a:hover,
+.sidebar button:hover {
+  background-color: var(--reltio-selected) !important;
+}
+
+/* User messages */
+.user-message, [data-message-role="user"] .message-content {
+  background-color: var(--reltio-surface-high) !important;
+  border-radius: 12px !important;
+  color: var(--reltio-text) !important;
+}
+
+/* AI messages */
+.assistant-message, [data-message-role="assistant"] .message-content {
+  color: var(--reltio-text-tertiary) !important;
+}
+
+/* Input area */
+textarea, .chat-input, [contenteditable] {
+  background-color: var(--reltio-surface) !important;
+  border: 1px solid var(--reltio-outline) !important;
+  border-radius: 12px !important;
+  color: var(--reltio-text) !important;
+}
+
+textarea:focus, [contenteditable]:focus {
+  border-color: var(--reltio-primary) !important;
+  box-shadow: 0 0 0 2px rgba(102, 102, 255, 0.2) !important;
+  outline: none !important;
+}
+
+/* Send button — gradient */
+#send-message-button,
+button[type="submit"] {
+  background: var(--reltio-gradient) !important;
+  color: #fff !important;
+  border-radius: 10px !important;
+  border: none !important;
+}
+
+#send-message-button:hover,
+button[type="submit"]:hover {
+  background: var(--reltio-gradient-1) !important;
+}
+
+/* Primary action buttons */
+.bg-black, .dark\:bg-white {
+  background: var(--reltio-gradient) !important;
+  color: #fff !important;
+}
+
+.bg-black:hover, .dark\:bg-white:hover {
+  background: var(--reltio-gradient-1) !important;
+}
+
+/* Suggestion chips */
+button.flex.items-center,
+.suggestion-chip,
+[data-suggestion] {
+  background-color: var(--reltio-surface) !important;
+  border: 1px solid var(--reltio-outline) !important;
+  border-radius: 10px !important;
+  color: var(--reltio-text-secondary) !important;
+  transition: border-color 0.225s cubic-bezier(0.4, 0, 0.2, 1),
+              color 0.225s cubic-bezier(0.4, 0, 0.2, 1) !important;
+}
+
+button.flex.items-center:hover,
+.suggestion-chip:hover,
+[data-suggestion]:hover {
+  border-color: var(--reltio-primary) !important;
+  color: var(--reltio-text) !important;
+  background-color: var(--reltio-selected) !important;
+}
+
+/* Toggle switches */
+[role="switch"][aria-checked="true"] {
+  background-color: var(--reltio-primary) !important;
+}
+
+/* Links */
+a {
+  color: var(--reltio-accent) !important;
+}
+a:hover {
+  color: var(--reltio-primary) !important;
+}
+
+/* Code blocks */
+pre, code {
+  background-color: var(--reltio-surface) !important;
+  border: 1px solid var(--reltio-border) !important;
+  border-radius: 8px !important;
+}
+
+/* Tooltips */
+.tippy-content, .tippy-box {
+  background-color: var(--reltio-surface-dialog) !important;
+  border-color: var(--reltio-outline) !important;
+  color: var(--reltio-text) !important;
+}
+
+/* Dropdowns / menus */
+[role="menu"], [role="listbox"], .dropdown {
+  background-color: var(--reltio-surface) !important;
+  border: 1px solid var(--reltio-border) !important;
+  border-radius: 8px !important;
+}
+
+/* Modal / dialog — frosted glass like Reltio */
+[role="dialog"] {
+  background-color: var(--reltio-surface) !important;
+  border: 1px solid var(--reltio-border) !important;
+}
+
+/* Dialog backdrop */
+.modal-backdrop, [data-dialog-backdrop] {
+  background-color: rgba(14, 14, 37, 0.7) !important;
+  -webkit-backdrop-filter: blur(3px) !important;
+  backdrop-filter: blur(3px) !important;
+}
+
+/* Voice mode button */
+[aria-label="Voice mode"] {
+  background: var(--reltio-gradient) !important;
+}
+
+/* Table styling */
+th {
+  background-color: var(--reltio-surface-dialog) !important;
+}
+tr:hover {
+  background-color: var(--reltio-surface-high) !important;
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--reltio-border);
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--reltio-text-secondary);
+}
+
+/* Selection highlight */
+::selection {
+  background-color: var(--reltio-selected) !important;
+}