@regantis-sdk/react-native-chat 0.1.2 → 0.1.4

package/src/RegantisChat.js

@@ -3,15 +3,19 @@
 const React = require('react');
 const {
   ActivityIndicator,
+  Animated,
   AppState,
   FlatList,
   Image,
   KeyboardAvoidingView,
   Linking,
   Modal,
+  PanResponder,
   Platform,
   Pressable,
+  SafeAreaView,
   ScrollView,
+  StatusBar,
   StyleSheet,
   Text,
   TextInput,
@@ -19,8 +23,221 @@ const {
 } = require('react-native');
 const { RegantisChatClient } = require('./client');
 
+const REGANTIS_LOGO_BLACK = require('../assets/regantis_logo_black.png');
+const REGANTIS_LOGO_WHITE = require('../assets/regantis_logo_white.png');
+const SOFT_GLOW = require('../assets/soft_glow.png');
+
 const EMOJIS = ['🙂', '😁', '😂', '😊', '😍', '😐', '🤔', '😞', '😢', '😭', '🎉', '❤️', '👌', '👍', '👎', '🙏'];
 
+
+const LOCAL_TEXTS = {
+  en: { attach_camera: 'Take photo', lightbox_close: 'Close', lightbox_reset: 'Reset zoom', lightbox_zoom_in: 'Zoom in', lightbox_zoom_out: 'Zoom out', back: 'Back', camera_permission_denied: 'Camera permission is required to take a photo.', camera_unavailable: 'Camera is not available on this device.', camera_setup_required: 'Camera access is not configured for this app.', open_settings: 'Open settings' },
+  ro: { attach_camera: 'Fă o fotografie', lightbox_close: 'Închide', lightbox_reset: 'Resetează zoom', lightbox_zoom_in: 'Mărește', lightbox_zoom_out: 'Micșorează', back: 'Înapoi', camera_permission_denied: 'Permisiunea pentru cameră este necesară pentru a face o fotografie.', camera_unavailable: 'Camera nu este disponibilă pe acest dispozitiv.', camera_setup_required: 'Accesul la cameră nu este configurat pentru această aplicație.', open_settings: 'Deschide setările' },
+  de: { attach_camera: 'Foto aufnehmen', lightbox_close: 'Schließen', lightbox_reset: 'Zoom zurücksetzen', lightbox_zoom_in: 'Vergrößern', lightbox_zoom_out: 'Verkleinern', back: 'Zurück', camera_permission_denied: 'Die Kameraberechtigung ist erforderlich, um ein Foto aufzunehmen.', camera_unavailable: 'Die Kamera ist auf diesem Gerät nicht verfügbar.', camera_setup_required: 'Der Kamerazugriff ist für diese App nicht konfiguriert.', open_settings: 'Einstellungen öffnen' },
+  fr: { attach_camera: 'Prendre une photo', lightbox_close: 'Fermer', lightbox_reset: 'Réinitialiser le zoom', lightbox_zoom_in: 'Agrandir', lightbox_zoom_out: 'Réduire', back: 'Retour', camera_permission_denied: 'L’autorisation de la caméra est nécessaire pour prendre une photo.', camera_unavailable: 'La caméra n’est pas disponible sur cet appareil.', camera_setup_required: 'L’accès à la caméra n’est pas configuré pour cette application.', open_settings: 'Ouvrir les réglages' },
+  es: { attach_camera: 'Tomar una foto', lightbox_close: 'Cerrar', lightbox_reset: 'Restablecer zoom', lightbox_zoom_in: 'Acercar', lightbox_zoom_out: 'Alejar', back: 'Atrás', camera_permission_denied: 'Se requiere permiso de cámara para tomar una foto.', camera_unavailable: 'La cámara no está disponible en este dispositivo.', camera_setup_required: 'El acceso a la cámara no está configurado para esta aplicación.', open_settings: 'Abrir ajustes' },
+  it: { attach_camera: 'Scatta una foto', lightbox_close: 'Chiudi', lightbox_reset: 'Reimposta zoom', lightbox_zoom_in: 'Ingrandisci', lightbox_zoom_out: 'Riduci', back: 'Indietro', camera_permission_denied: 'È necessaria l’autorizzazione della fotocamera per scattare una foto.', camera_unavailable: 'La fotocamera non è disponibile su questo dispositivo.', camera_setup_required: 'L’accesso alla fotocamera non è configurato per questa app.', open_settings: 'Apri impostazioni' },
+};
+
+function localText(language, key) {
+  const code = String(language || 'en').trim().toLowerCase().split(/[-_]/)[0];
+  return (LOCAL_TEXTS[code] && LOCAL_TEXTS[code][key]) || LOCAL_TEXTS.en[key] || '';
+}
+
+function touchDistance(touches) {
+  if (!touches || touches.length < 2) return 0;
+  const dx = Number(touches[0].pageX || 0) - Number(touches[1].pageX || 0);
+  const dy = Number(touches[0].pageY || 0) - Number(touches[1].pageY || 0);
+  return Math.sqrt(dx * dx + dy * dy);
+}
+
+function ImageLightbox({ visible, uri, onClose, closeLabel, resetLabel, zoomInLabel, zoomOutLabel }) {
+  const scale = React.useRef(new Animated.Value(1)).current;
+  const translateX = React.useRef(new Animated.Value(0)).current;
+  const translateY = React.useRef(new Animated.Value(0)).current;
+  const current = React.useRef({ scale: 1, x: 0, y: 0 });
+  const gesture = React.useRef({ mode: '', distance: 0, scale: 1, x: 0, y: 0, startX: 0, startY: 0 });
+
+  const applyZoom = React.useCallback((value, animated = true) => {
+    const next = Math.max(1, Math.min(5, Number(value) || 1));
+    current.current.scale = next;
+
+    if (next <= 1.01) {
+      current.current.x = 0;
+      current.current.y = 0;
+    }
+
+    if (!animated) {
+      scale.setValue(next);
+      if (next <= 1.01) {
+        translateX.setValue(0);
+        translateY.setValue(0);
+      }
+      return;
+    }
+
+    const animations = [
+      Animated.spring(scale, { toValue: next, useNativeDriver: true, friction: 8, tension: 70 }),
+    ];
+
+    if (next <= 1.01) {
+      animations.push(
+        Animated.spring(translateX, { toValue: 0, useNativeDriver: true, friction: 8, tension: 70 }),
+        Animated.spring(translateY, { toValue: 0, useNativeDriver: true, friction: 8, tension: 70 })
+      );
+    }
+
+    Animated.parallel(animations).start();
+  }, [scale, translateX, translateY]);
+
+  const resetZoom = React.useCallback((animated = true) => {
+    gesture.current.mode = '';
+    applyZoom(1, animated);
+  }, [applyZoom]);
+
+  const changeZoom = React.useCallback(delta => {
+    applyZoom(current.current.scale + delta, true);
+  }, [applyZoom]);
+
+  React.useEffect(() => {
+    if (visible) resetZoom(false);
+  }, [visible, uri, resetZoom]);
+
+  const panResponder = React.useMemo(() => PanResponder.create({
+    onStartShouldSetPanResponder: () => true,
+    onMoveShouldSetPanResponder: () => true,
+    onPanResponderGrant: event => {
+      const touches = event.nativeEvent.touches || [];
+      if (touches.length >= 2) {
+        gesture.current = {
+          mode: 'pinch',
+          distance: Math.max(1, touchDistance(touches)),
+          scale: current.current.scale,
+          x: current.current.x,
+          y: current.current.y,
+          startX: 0,
+          startY: 0,
+        };
+      } else if (touches.length === 1) {
+        gesture.current = {
+          mode: 'pan',
+          distance: 0,
+          scale: current.current.scale,
+          x: current.current.x,
+          y: current.current.y,
+          startX: Number(touches[0].pageX || 0),
+          startY: Number(touches[0].pageY || 0),
+        };
+      }
+    },
+    onPanResponderMove: event => {
+      const touches = event.nativeEvent.touches || [];
+      if (touches.length >= 2) {
+        const distance = Math.max(1, touchDistance(touches));
+        if (gesture.current.mode !== 'pinch') {
+          gesture.current.mode = 'pinch';
+          gesture.current.distance = distance;
+          gesture.current.scale = current.current.scale;
+        }
+        const nextScale = Math.max(1, Math.min(5, gesture.current.scale * (distance / Math.max(1, gesture.current.distance))));
+        current.current.scale = nextScale;
+        scale.setValue(nextScale);
+        if (nextScale <= 1.01) {
+          current.current.x = 0;
+          current.current.y = 0;
+          translateX.setValue(0);
+          translateY.setValue(0);
+        }
+        return;
+      }
+
+      if (touches.length === 1 && current.current.scale > 1.01) {
+        const x = Number(touches[0].pageX || 0);
+        const y = Number(touches[0].pageY || 0);
+        if (gesture.current.mode !== 'pan') {
+          gesture.current.mode = 'pan';
+          gesture.current.x = current.current.x;
+          gesture.current.y = current.current.y;
+          gesture.current.startX = x;
+          gesture.current.startY = y;
+        }
+        const nextX = gesture.current.x + (x - gesture.current.startX);
+        const nextY = gesture.current.y + (y - gesture.current.startY);
+        current.current.x = nextX;
+        current.current.y = nextY;
+        translateX.setValue(nextX);
+        translateY.setValue(nextY);
+      }
+    },
+    onPanResponderRelease: () => {
+      gesture.current.mode = '';
+      if (current.current.scale <= 1.05) resetZoom(true);
+    },
+    onPanResponderTerminate: () => {
+      gesture.current.mode = '';
+      if (current.current.scale <= 1.05) resetZoom(true);
+    },
+  }), [resetZoom, scale, translateX, translateY]);
+
+  return (
+    <Modal visible={visible} transparent animationType="fade" onRequestClose={onClose} statusBarTranslucent>
+      <View style={lightboxStyles.root}>
+        <SafeAreaView
+          pointerEvents="box-none"
+          style={[
+            lightboxStyles.safeArea,
+            Platform.OS === 'android' && { paddingTop: Math.max(10, Number(StatusBar.currentHeight || 24)) },
+          ]}
+        >
+          <View style={lightboxStyles.toolbar}>
+            <Pressable accessibilityRole="button" accessibilityLabel={closeLabel} style={lightboxStyles.toolbarButton} onPress={onClose}>
+              <Text style={lightboxStyles.closeIcon}>‹</Text>
+            </Pressable>
+            <View style={lightboxStyles.zoomControls}>
+              <Pressable accessibilityRole="button" accessibilityLabel={zoomOutLabel} style={lightboxStyles.zoomButton} onPress={() => changeZoom(-0.5)}>
+                <Text style={lightboxStyles.zoomText}>−</Text>
+              </Pressable>
+              <Pressable accessibilityRole="button" accessibilityLabel={resetLabel} style={lightboxStyles.resetButton} onPress={() => resetZoom(true)}>
+                <Text style={lightboxStyles.resetText}>1:1</Text>
+              </Pressable>
+              <Pressable accessibilityRole="button" accessibilityLabel={zoomInLabel} style={lightboxStyles.zoomButton} onPress={() => changeZoom(0.5)}>
+                <Text style={lightboxStyles.zoomText}>+</Text>
+              </Pressable>
+            </View>
+          </View>
+        </SafeAreaView>
+        <View style={lightboxStyles.stage} {...panResponder.panHandlers}>
+          {uri ? (
+            <Animated.Image
+              source={{ uri }}
+              resizeMode="contain"
+              style={[
+                lightboxStyles.image,
+                { transform: [{ translateX }, { translateY }, { scale }] },
+              ]}
+            />
+          ) : null}
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+const lightboxStyles = StyleSheet.create({
+  root: { flex: 1, backgroundColor: 'rgba(0,0,0,0.96)' },
+  safeArea: { position: 'absolute', zIndex: 20, top: 0, left: 0, right: 0 },
+  toolbar: { minHeight: 64, paddingHorizontal: 14, paddingTop: 14, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
+  toolbarButton: { width: 44, height: 44, borderRadius: 22, backgroundColor: 'rgba(255,255,255,0.14)', alignItems: 'center', justifyContent: 'center' },
+  closeIcon: { color: '#FFFFFF', fontSize: 39, lineHeight: 40, transform: [{ translateY: -2 }] },
+  zoomControls: { flexDirection: 'row', alignItems: 'center', gap: 8 },
+  zoomButton: { width: 44, height: 44, borderRadius: 22, backgroundColor: 'rgba(255,255,255,0.14)', alignItems: 'center', justifyContent: 'center' },
+  zoomText: { color: '#FFFFFF', fontSize: 27, lineHeight: 30, fontWeight: '500' },
+  resetButton: { minWidth: 52, height: 44, paddingHorizontal: 12, borderRadius: 22, backgroundColor: 'rgba(255,255,255,0.14)', alignItems: 'center', justifyContent: 'center' },
+  resetText: { color: '#FFFFFF', fontSize: 13, fontWeight: '700' },
+  stage: { flex: 1, overflow: 'hidden', alignItems: 'center', justifyContent: 'center' },
+  image: { width: '100%', height: '100%' },
+});
+
 function colorWithOpacity(hex, opacity) {
   const value = String(hex || '#F5F7FB').replace('#', '');
   if (!/^[0-9a-f]{6}$/i.test(value)) return hex;
@@ -33,26 +250,29 @@ function colorWithOpacity(hex, opacity) {
 
 function makePalette(settings) {
   const dark = settings.theme_mode === 'dark';
-  const primary = settings.color_mode === 'advanced' ? settings.primary_color : settings.theme_color;
+  const advanced = settings.color_mode === 'advanced';
+  const primary = advanced ? settings.primary_color : settings.theme_color;
+  const backgroundHex = advanced ? settings.chat_background : (dark ? '#111316' : '#F5F7FB');
+  const backgroundOpacity = advanced ? settings.chat_background_opacity : 100;
   return {
     dark,
     primary,
-    background: colorWithOpacity(settings.chat_background, settings.chat_background_opacity),
+    background: colorWithOpacity(backgroundHex, backgroundOpacity),
     surface: dark ? '#1D2127' : '#FFFFFF',
     surfaceAlt: dark ? '#252A31' : '#F5F7FB',
     header: dark ? '#181B20' : '#F8F9FC',
     border: dark ? 'rgba(255,255,255,0.10)' : 'rgba(20,32,54,0.10)',
     text: dark ? '#F7F8FA' : '#17181B',
-    muted: settings.system_text || (dark ? '#A7ADB7' : '#6F7480'),
-    customerBubble: settings.color_mode === 'advanced' ? settings.customer_bubble : primary,
-    customerText: settings.color_mode === 'advanced' ? settings.customer_text : '#FFFFFF',
-    agentBubble: settings.color_mode === 'advanced' ? settings.agent_bubble : (dark ? '#22252A' : '#FFFFFF'),
-    agentText: settings.color_mode === 'advanced' ? settings.agent_text : (dark ? '#F7F8FA' : '#17181B'),
+    muted: advanced ? settings.system_text : (dark ? '#AEB4BE' : '#6F7480'),
+    customerBubble: advanced ? settings.customer_bubble : primary,
+    customerText: advanced ? settings.customer_text : '#FFFFFF',
+    agentBubble: advanced ? settings.agent_bubble : (dark ? '#22262C' : '#FFFFFF'),
+    agentText: advanced ? settings.agent_text : (dark ? '#F5F6F7' : '#17181B'),
     danger: '#DF2917',
-    heroBase: dark ? '#151B21' : '#EEF7FC',
-    heroBlobA: dark ? 'rgba(73,83,152,0.25)' : 'rgba(118,137,255,0.30)',
-    heroBlobB: dark ? 'rgba(34,126,168,0.22)' : 'rgba(96,222,215,0.28)',
-    heroBlobC: dark ? 'rgba(255,255,255,0.035)' : 'rgba(255,255,255,0.52)',
+    heroBase: dark ? '#151B21' : '#EEF5FC',
+    heroGlowA: dark ? '#495398' : '#7689FF',
+    heroGlowB: dark ? '#227EA8' : '#60DED7',
+    heroGlowC: dark ? '#293038' : '#FFFFFF',
   };
 }
 
@@ -68,6 +288,140 @@ function isSupportMessage(message) {
   return sender === 'agent' || sender === 'admin' || sender === 'chatbot';
 }
 
+
+function humanSize(bytes) {
+  const size = Number(bytes || 0);
+  if (!size) return '0 B';
+  const units = ['B', 'KB', 'MB', 'GB'];
+  const index = Math.min(units.length - 1, Math.max(0, Math.floor(Math.log(size) / Math.log(1024))));
+  const value = size / Math.pow(1024, index);
+  return `${value.toFixed(index === 0 ? 0 : 1)} ${units[index]}`;
+}
+
+function normalizeMarkdownSource(source) {
+  return String(source == null ? '' : source)
+    .replace(/\\([*_`#>\[\]()~+-])/g, '$1')
+    .replace(/\*{3,}([^*\n]+?)\*{3,}/g, '**$1**')
+    .replace(/^(\s*[-+*]\s+)\*([^*\n].*?)\*\*\s*$/gm, '$1**$2**');
+}
+
+function renderInlineMarkdown(value, textStyle, styles, keyPrefix) {
+  const text = String(value || '');
+  const pattern = /(\*\*[^*\n]+\*\*|__[^_\n]+__|`[^`\n]+`|\[[^\]\n]+\]\((?:https?:\/\/|mailto:|tel:)[^)\s]+\)|\*[^*\n]+\*|_[^_\n]+_)/g;
+  const nodes = [];
+  let last = 0;
+  let match;
+  let index = 0;
+
+  while ((match = pattern.exec(text)) !== null) {
+    if (match.index > last) nodes.push(text.slice(last, match.index));
+    const token = match[0];
+    const key = `${keyPrefix}-${index++}`;
+
+    if ((token.startsWith('**') && token.endsWith('**')) || (token.startsWith('__') && token.endsWith('__'))) {
+      nodes.push(<Text key={key} style={[textStyle, styles.markdownStrong]}>{token.slice(2, -2)}</Text>);
+    } else if (token.startsWith('`')) {
+      nodes.push(<Text key={key} style={[textStyle, styles.markdownInlineCode]}>{token.slice(1, -1)}</Text>);
+    } else if (token.startsWith('[')) {
+      const linkMatch = token.match(/^\[([^\]]+)\]\(([^)]+)\)$/);
+      if (linkMatch) {
+        const url = linkMatch[2];
+        nodes.push(
+          <Text key={key} style={[textStyle, styles.markdownLink]} onPress={() => Linking.openURL(url).catch(() => {})}>
+            {linkMatch[1]}
+          </Text>
+        );
+      } else {
+        nodes.push(token);
+      }
+    } else {
+      nodes.push(<Text key={key} style={[textStyle, styles.markdownEm]}>{token.slice(1, -1)}</Text>);
+    }
+    last = pattern.lastIndex;
+  }
+
+  if (last < text.length) nodes.push(text.slice(last));
+  return nodes;
+}
+
+function SafeMarkdown({ source, textStyle, styles }) {
+  const lines = normalizeMarkdownSource(source).replace(/\r\n?/g, '\n').split('\n');
+  const blocks = [];
+  let codeLines = [];
+  let inCode = false;
+
+  const flushCode = key => {
+    if (!codeLines.length) return;
+    blocks.push(
+      <View key={key} style={styles.markdownCodeBlock}>
+        <Text style={[textStyle, styles.markdownCodeText]}>{codeLines.join('\n')}</Text>
+      </View>
+    );
+    codeLines = [];
+  };
+
+  lines.forEach((line, index) => {
+    if (/^```/.test(line.trim())) {
+      if (inCode) flushCode(`code-${index}`);
+      inCode = !inCode;
+      return;
+    }
+
+    if (inCode) {
+      codeLines.push(line);
+      return;
+    }
+
+    if (!line.trim()) {
+      blocks.push(<View key={`space-${index}`} style={styles.markdownSpacer} />);
+      return;
+    }
+
+    const heading = line.match(/^\s*(#{1,6})\s+(.+)$/);
+    if (heading) {
+      blocks.push(
+        <Text key={`h-${index}`} style={[textStyle, styles.markdownHeading]}>
+          {renderInlineMarkdown(heading[2], textStyle, styles, `h-${index}`)}
+        </Text>
+      );
+      return;
+    }
+
+    const quote = line.match(/^\s*>\s?(.*)$/);
+    if (quote) {
+      blocks.push(
+        <View key={`q-${index}`} style={styles.markdownQuote}>
+          <Text style={textStyle}>{renderInlineMarkdown(quote[1], textStyle, styles, `q-${index}`)}</Text>
+        </View>
+      );
+      return;
+    }
+
+    const unordered = line.match(/^\s*[-+*]\s+(.+)$/);
+    const ordered = line.match(/^\s*(\d+)[.)]\s+(.+)$/);
+    if (unordered || ordered) {
+      const prefix = ordered ? `${ordered[1]}.` : '•';
+      const content = ordered ? ordered[2] : unordered[1];
+      blocks.push(
+        <View key={`li-${index}`} style={styles.markdownListRow}>
+          <Text style={[textStyle, styles.markdownListPrefix]}>{prefix}</Text>
+          <Text style={[textStyle, styles.markdownListText]}>{renderInlineMarkdown(content, textStyle, styles, `li-${index}`)}</Text>
+        </View>
+      );
+      return;
+    }
+
+    blocks.push(
+      <Text key={`p-${index}`} style={[textStyle, styles.markdownParagraph]}>
+        {renderInlineMarkdown(line, textStyle, styles, `p-${index}`)}
+      </Text>
+    );
+  });
+
+  if (codeLines.length) flushCode('code-last');
+  return <View style={styles.markdownRoot}>{blocks}</View>;
+}
+
 function RegantisChat(props) {
   const {
     apiKey,
@@ -81,6 +435,7 @@ function RegantisChat(props) {
     style,
     initialView = 'home',
     onClose,
+    onBack,
     onViewChange,
     onMessage,
     onUnreadChange,
@@ -119,12 +474,18 @@ function RegantisChat(props) {
   const [ratingComment, setRatingComment] = React.useState('');
   const [ratingStatus, setRatingStatus] = React.useState('');
   const [busyAction, setBusyAction] = React.useState('');
+  const [attachmentError, setAttachmentError] = React.useState('');
+  const [cameraSettingsNeeded, setCameraSettingsNeeded] = React.useState(false);
+  const [lightboxUri, setLightboxUri] = React.useState('');
+  const [logoFailed, setLogoFailed] = React.useState(false);
   const listRef = React.useRef(null);
+  const previousStatusRef = React.useRef(null);
+  const activeViewRef = React.useRef(initialView === 'chat' ? 'chat' : 'home');
 
   React.useEffect(() => {
     const unsubscribe = client.subscribe(next => setState(next));
     client.start().catch(() => {});
-    const sub = AppState.addEventListener('change', value => client.setVisible(value === 'active'));
+    const sub = AppState.addEventListener('change', value => client.setVisible(value === 'active' && activeViewRef.current === 'chat'));
     return () => {
       if (sub && sub.remove) sub.remove();
       unsubscribe();
@@ -132,6 +493,15 @@ function RegantisChat(props) {
     };
   }, [client]);
 
+  React.useEffect(() => {
+    activeViewRef.current = activeView;
+    client.setVisible(AppState.currentState === 'active' && activeView === 'chat');
+  }, [activeView, client]);
+
+  React.useEffect(() => {
+    setLogoFailed(false);
+  }, [state.settings.logo_url]);
+
   React.useEffect(() => {
     const c = state.conversation || {};
     if (c.contact_name && !contactName) setContactName(c.contact_name);
@@ -146,7 +516,7 @@ function RegantisChat(props) {
     }
   }, [activeView, state.messages.length]);
 
-  const t = key => state.texts[key] || key;
+  const t = key => state.texts[key] || localText(language, key) || key;
   const palette = makePalette(state.settings);
   const styles = React.useMemo(() => buildStyles(palette), [
     palette.primary,
@@ -162,6 +532,9 @@ function RegantisChat(props) {
     palette.agentBubble,
     palette.agentText,
     palette.heroBase,
+    palette.heroGlowA,
+    palette.heroGlowB,
+    palette.heroGlowC,
   ]);
 
   const c = state.conversation || {};
@@ -173,9 +546,36 @@ function RegantisChat(props) {
   const homePreview = lastSupport
     ? String(lastSupport.message || '').trim() || (lastSupport.attachment ? `[${String(lastSupport.message_type || 'file')}]` : t('empty'))
     : t('empty');
+  const latestNamedAgent = Number(state.settings.use_profile_names || 0) === 1
+    ? [...state.messages].reverse().find(message => {
+        const sender = String(message && message.sender_type || '').toLowerCase();
+        return (sender === 'agent' || sender === 'admin') && String(message && message.sender_name || '').trim();
+      })
+    : null;
+  const operatorDisplayName = latestNamedAgent
+    ? String(latestNamedAgent.sender_name || '').trim()
+    : (state.settings.operator_name || t('support_name'));
+
+  React.useEffect(() => {
+    const nextStatus = Number(c.status || 0);
+    const previousStatus = previousStatusRef.current;
+    previousStatusRef.current = nextStatus;
+
+    if (
+      previousStatus === 1 &&
+      nextStatus === 0 &&
+      Number(state.settings.rating_enabled || 0) === 1 &&
+      contactConfirmed &&
+      !c.feedback_submitted
+    ) {
+      const timer = setTimeout(() => setRatingOpen(true), 120);
+      return () => clearTimeout(timer);
+    }
+  }, [c.status, c.feedback_submitted, contactConfirmed, state.settings.rating_enabled]);
 
   function showView(next) {
     const view = next === 'chat' ? 'chat' : 'home';
+    activeViewRef.current = view;
     setActiveView(view);
     setOptionsOpen(false);
     setLanguageOpen(false);
@@ -214,10 +614,23 @@ function RegantisChat(props) {
 
   async function pick(kind) {
     setAttachOpen(false);
+    setAttachmentError('');
+    setCameraSettingsNeeded(false);
     setBusyAction('upload');
     try {
       await client.pickAndUpload(kind);
-    } catch (_) {
+      setAttachmentError('');
+      setCameraSettingsNeeded(false);
+    } catch (error) {
+      const code = String(error && (error.code || error.message) || '');
+      if (code.includes('CAMERA_PERMISSION_DENIED')) {
+        setAttachmentError(t('camera_permission_denied'));
+        setCameraSettingsNeeded(true);
+      } else if (code.includes('CAMERA_USAGE_DESCRIPTION_MISSING') || code.includes('CAMERA_PERMISSION_UNAVAILABLE')) {
+        setAttachmentError(t('camera_setup_required'));
+      } else if (code.includes('CAMERA_UNAVAILABLE')) setAttachmentError(t('camera_unavailable'));
+      else setAttachmentError(error && error.message ? error.message : t('send_error'));
+      if (typeof onError === 'function') onError(error);
     } finally {
       setBusyAction('');
     }
@@ -295,8 +708,8 @@ function RegantisChat(props) {
 
   function renderLogo(size, marginRight) {
     if (!state.settings.show_logo) return null;
-    if (state.settings.logo_url) {
-      return <Image source={{ uri: state.settings.logo_url }} style={[styles.logoImage, { width: size, height: size, borderRadius: size / 2, marginRight: marginRight || 0 }]} resizeMode="cover" />;
+    if (state.settings.logo_url && !logoFailed) {
+      return <Image source={{ uri: state.settings.logo_url }} onError={() => setLogoFailed(true)} style={[styles.logoImage, { width: size, height: size, borderRadius: size / 2, marginRight: marginRight || 0 }]} resizeMode="cover" />;
     }
     return (
       <View style={[styles.logoFallback, { width: size, height: size, borderRadius: size / 2, marginRight: marginRight || 0 }]}>
@@ -330,21 +743,35 @@ function RegantisChat(props) {
     const textStyle = visitor ? styles.customerText : styles.agentText;
     const attachment = item.attachment || null;
     const isImage = attachment && String(attachment.mime || '').startsWith('image/');
-    const senderName = sender === 'chatbot' ? 'Chatbot' : (item.sender_name || state.settings.operator_name || t('support_name'));
+    const configuredName = state.settings.operator_name || t('support_name');
+    const senderName = sender === 'chatbot'
+      ? 'Chatbot'
+      : (Number(state.settings.use_profile_names || 0) === 1 ? (item.sender_name || configuredName) : configuredName);
+    const fileExt = String(attachment && attachment.ext || '').replace(/^\./, '').slice(0, 4).toUpperCase() || 'FILE';
 
     return (
       <View style={[styles.messageRow, visitor ? styles.messageRowRight : styles.messageRowLeft]}>
         <View style={[styles.bubble, bubbleStyle]}>
           {isImage ? (
-            <Pressable onPress={() => Linking.openURL(attachment.url)}>
+            <Pressable onPress={() => setLightboxUri(attachment.url)}>
               <Image source={{ uri: attachment.url }} style={styles.attachmentImage} resizeMode="cover" />
             </Pressable>
           ) : attachment ? (
-            <Pressable style={styles.fileAttachment} onPress={() => Linking.openURL(attachment.url)}>
-              <Text style={[styles.fileAttachmentText, textStyle]}>📎 {attachment.name || t('attach_file')}</Text>
+            <Pressable style={styles.fileAttachment} onPress={() => Linking.openURL(attachment.url).catch(() => {})}>
+              <View style={[styles.fileAttachmentIcon, { borderColor: textStyle.color }]}>
+                <Text style={[styles.fileAttachmentIconText, textStyle]}>{fileExt}</Text>
+              </View>
+              <View style={styles.fileAttachmentCopy}>
+                <Text numberOfLines={1} style={[styles.fileAttachmentText, textStyle]}>{attachment.name || t('attach_file')}</Text>
+                <Text numberOfLines={1} style={[styles.fileAttachmentMeta, textStyle]}>{humanSize(attachment.size)}{attachment.ext ? ` · ${String(attachment.ext).toUpperCase()}` : ''}</Text>
+              </View>
             </Pressable>
           ) : null}
-          {item.message ? <Text style={[styles.messageText, textStyle]}>{item.message}</Text> : null}
+          {item.message ? (
+            sender === 'chatbot'
+              ? <SafeMarkdown source={item.message} textStyle={[styles.messageText, textStyle]} styles={styles} />
+              : <Text style={[styles.messageText, textStyle]}>{item.message}</Text>
+          ) : null}
           <View style={styles.messageMeta}>
             {!visitor ? <Text numberOfLines={1} style={[styles.messageSender, textStyle]}>{senderName}</Text> : <View />}
             <Text style={[styles.timeText, textStyle]}>{formatTime(item.date_added)}</Text>
@@ -356,19 +783,31 @@ function RegantisChat(props) {
 
   function renderPoweredBy() {
     if (state.settings.white_label) return null;
-    return <View style={styles.poweredBy}><Text style={styles.poweredByText}>{t('powered_by')} <Text style={styles.poweredByBrand}>Regantis</Text></Text></View>;
+    return (
+      <View style={styles.poweredBy}>
+        <Text style={styles.poweredByText}>{t('powered_by')}</Text>
+        <Image source={palette.dark ? REGANTIS_LOGO_WHITE : REGANTIS_LOGO_BLACK} style={styles.poweredByLogo} resizeMode="contain" />
+      </View>
+    );
   }
 
   function renderHome() {
     return (
       <View style={styles.screen}>
         <View style={styles.homeHero}>
-          <View pointerEvents="none" style={styles.heroDecorationA} />
-          <View pointerEvents="none" style={styles.heroDecorationB} />
-          <View pointerEvents="none" style={styles.heroDecorationC} />
+          <Image pointerEvents="none" source={SOFT_GLOW} style={[styles.heroGlow, styles.heroGlowA, { tintColor: palette.heroGlowA }]} resizeMode="stretch" />
+          <Image pointerEvents="none" source={SOFT_GLOW} style={[styles.heroGlow, styles.heroGlowB, { tintColor: palette.heroGlowB }]} resizeMode="stretch" />
+          <Image pointerEvents="none" source={SOFT_GLOW} style={[styles.heroGlow, styles.heroGlowC, { tintColor: palette.heroGlowC }]} resizeMode="stretch" />
 
           <View style={styles.homeTop}>
-            <View>{renderLogo(42, 0)}</View>
+            <View style={styles.homeTopLeft}>
+              {typeof onBack === 'function' || typeof onClose === 'function' ? (
+                <Pressable accessibilityRole="button" accessibilityLabel={t('back')} style={styles.iconButton} onPress={typeof onBack === 'function' ? onBack : onClose}>
+                  <Text style={styles.homeBackIcon}>‹</Text>
+                </Pressable>
+              ) : null}
+              <View>{renderLogo(42, 0)}</View>
+            </View>
             {typeof onClose === 'function' ? (
               <Pressable accessibilityRole="button" accessibilityLabel={t('minimize')} style={styles.iconButton} onPress={onClose}>
                 <Text style={styles.minimizeIcon}>−</Text>
@@ -385,7 +824,7 @@ function RegantisChat(props) {
             <View style={styles.homeCardTop}>
               {state.settings.show_agent_photo ? <View style={styles.homeAvatar}><Text style={styles.homeAvatarText}>R</Text></View> : null}
               <View style={styles.homeCardCopy}>
-                <Text numberOfLines={1} style={styles.homeCardAgent}>{state.settings.operator_name || t('support_name')}</Text>
+                <Text numberOfLines={1} style={styles.homeCardAgent}>{operatorDisplayName}</Text>
                 <Text numberOfLines={1} style={styles.homeCardPreview}>{homePreview}</Text>
               </View>
             </View>
@@ -420,20 +859,22 @@ function RegantisChat(props) {
             <Text style={styles.backIcon}>‹</Text>
           </Pressable>
           <Pressable accessibilityRole="button" accessibilityLabel={t('options')} style={styles.headerIconButton} onPress={() => setOptionsOpen(value => !value)}>
-            <Text style={styles.menuIcon}>•••</Text>
+            <View style={styles.menuDots}><View style={styles.menuDot} /><View style={styles.menuDot} /><View style={styles.menuDot} /></View>
           </Pressable>
         </View>
 
-        <Pressable
-          accessibilityRole="button"
-          accessibilityLabel={state.settings.operator_name || t('support_name')}
-          style={styles.agentTrigger}
-          onPress={() => {
-            if (state.settings.rating_enabled && contactConfirmed) setRatingOpen(true);
-          }}
-        >
-          {renderAgentVisual()}
-        </Pressable>
+        <View pointerEvents="box-none" style={styles.chatHeaderCenter}>
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel={operatorDisplayName}
+            style={styles.agentTrigger}
+            onPress={() => {
+              if (state.settings.rating_enabled && contactConfirmed) setRatingOpen(true);
+            }}
+          >
+            {renderAgentVisual()}
+          </Pressable>
+        </View>
 
         <View style={styles.chatHeaderRight}>
           {typeof onClose === 'function' ? (
@@ -465,7 +906,7 @@ function RegantisChat(props) {
                   <Text style={styles.popoverChevron}>›</Text>
                 </Pressable>
               ) : null}
-              {state.settings.sound_enabled !== undefined ? (
+              {state.soundAvailable ? (
                 <Pressable style={styles.popoverRow} onPress={() => client.setSoundEnabled(!state.settings.sound_enabled)}>
                   <Text style={styles.popoverIcon}>◖</Text>
                   <Text style={styles.popoverText}>{t('sounds')}</Text>
@@ -499,6 +940,20 @@ function RegantisChat(props) {
     );
   }
 
+  function renderContactInfoCard() {
+    if (!contactConfirmed || (!c.contact_name && !c.contact_email)) return null;
+    return (
+      <View style={styles.contactInfoRow}>
+        <View style={styles.contactInfoAvatar}><Text style={styles.contactInfoAvatarText}>i</Text></View>
+        <View style={styles.contactInfoBubble}>
+          <Text style={styles.contactInfoTitle}>{t('personal_details')}</Text>
+          {c.contact_name ? <Text style={styles.contactInfoLine}><Text style={styles.contactInfoLabel}>{t('name')}: </Text>{c.contact_name}</Text> : null}
+          {c.contact_email ? <Text style={styles.contactInfoLine}><Text style={styles.contactInfoLabel}>{t('email')}: </Text>{c.contact_email}</Text> : null}
+        </View>
+      </View>
+    );
+  }
+
   function renderComposer() {
     if (!active) {
       return (
@@ -517,9 +972,11 @@ function RegantisChat(props) {
 
         {attachOpen ? (
           <View style={styles.attachmentMenu}>
+            {Platform.OS === 'android' || Platform.OS === 'ios' ? (
+              <Pressable style={styles.attachmentAction} onPress={() => pick('camera')}><Text style={styles.attachmentActionIcon}>◉</Text><Text style={styles.attachmentActionText}>{t('attach_camera')}</Text></Pressable>
+            ) : null}
             <Pressable style={styles.attachmentAction} onPress={() => pick('image')}><Text style={styles.attachmentActionIcon}>▣</Text><Text style={styles.attachmentActionText}>{t('attach_image')}</Text></Pressable>
             <Pressable style={styles.attachmentAction} onPress={() => pick('file')}><Text style={styles.attachmentActionIcon}>↥</Text><Text style={styles.attachmentActionText}>{t('attach_file')}</Text></Pressable>
-            <Pressable style={styles.attachmentAction} onPress={() => pick('screenshot')}><Text style={styles.attachmentActionIcon}>▧</Text><Text style={styles.attachmentActionText}>{t('attach_screenshot')}</Text></Pressable>
           </View>
         ) : null}
 
@@ -533,6 +990,17 @@ function RegantisChat(props) {
           </View>
         ) : null}
 
+        {attachmentError ? (
+          <View style={styles.composerErrorRow}>
+            <Text style={styles.composerError}>{attachmentError}</Text>
+            {cameraSettingsNeeded ? (
+              <Pressable style={styles.composerErrorAction} onPress={() => Linking.openSettings().catch(() => {})}>
+                <Text style={styles.composerErrorActionText}>{t('open_settings')}</Text>
+              </Pressable>
+            ) : null}
+          </View>
+        ) : null}
+
         <View style={styles.composer}>
           <Pressable disabled={!canUpload || state.uploading} style={[styles.composerButton, (!canUpload || state.uploading) && styles.disabled]} onPress={() => { setEmojiOpen(false); setAttachOpen(value => !value); }}>
             <Text style={styles.composerPlus}>＋</Text>
@@ -572,7 +1040,12 @@ function RegantisChat(props) {
                 style={styles.messageList}
                 contentContainerStyle={styles.messageListContent}
                 onScrollBeginDrag={() => state.hasMore && client.loadOlder().catch(() => {})}
-                ListHeaderComponent={state.hasMore ? <View style={styles.historyLoader}><ActivityIndicator size="small" color={palette.primary} /></View> : null}
+                ListHeaderComponent={(
+                  <>
+                    {state.hasMore ? <View style={styles.historyLoader}><ActivityIndicator size="small" color={palette.primary} /></View> : null}
+                    {renderContactInfoCard()}
+                  </>
+                )}
                 ListEmptyComponent={<View style={styles.emptyState}><Text style={styles.emptyText}>{t('empty')}</Text></View>}
               />
               {state.remoteTyping ? <View style={styles.typingRow}><Text style={styles.typingText}>{state.remoteTyping === 'chatbot' ? t('chatbot_typing') : t('typing')}</Text></View> : null}
@@ -648,7 +1121,7 @@ function RegantisChat(props) {
       <Modal transparent visible={ratingOpen} animationType="fade" onRequestClose={() => setRatingOpen(false)}>
         <View style={styles.modalBackdropTop}>
           <View style={styles.modalCard}>
-            <Text style={styles.modalTitle}>{state.settings.operator_name || t('support_name')}</Text>
+            <Text style={styles.modalTitle}>{operatorDisplayName}</Text>
             <Text style={styles.ratingLabel}>{t('rating_agent_label')}</Text>
             <View style={styles.ratingButtons}>
               <Pressable style={styles.ratingButton} onPress={() => rate(1)}><Text style={styles.ratingIcon}>👍</Text></Pressable>
@@ -663,6 +1136,16 @@ function RegantisChat(props) {
           </View>
         </View>
       </Modal>
+
+      <ImageLightbox
+        visible={!!lightboxUri}
+        uri={lightboxUri}
+        onClose={() => setLightboxUri('')}
+        closeLabel={t('lightbox_close')}
+        resetLabel={t('lightbox_reset')}
+        zoomInLabel={t('lightbox_zoom_in')}
+        zoomOutLabel={t('lightbox_zoom_out')}
+      />
     </KeyboardAvoidingView>
   );
 }
@@ -684,10 +1167,13 @@ function buildStyles(p) {
     errorText: { color: p.text, fontSize: 14, textAlign: 'center', marginBottom: 12 },
 
     homeHero: { position: 'relative', overflow: 'hidden', paddingHorizontal: 18, paddingTop: 24, paddingBottom: 28, backgroundColor: p.heroBase },
-    heroDecorationA: { position: 'absolute', width: 240, height: 240, borderRadius: 120, top: -138, left: -74, backgroundColor: p.heroBlobA },
-    heroDecorationB: { position: 'absolute', width: 230, height: 230, borderRadius: 115, top: 80, right: -92, backgroundColor: p.heroBlobB },
-    heroDecorationC: { position: 'absolute', width: 210, height: 210, borderRadius: 105, right: -82, bottom: -120, backgroundColor: p.heroBlobC },
+    heroGlow: { position: 'absolute', opacity: p.dark ? 0.34 : 0.72 },
+    heroGlowA: { width: 390, height: 390, top: -235, left: -165 },
+    heroGlowB: { width: 360, height: 360, top: 20, right: -170, opacity: p.dark ? 0.26 : 0.62 },
+    heroGlowC: { width: 300, height: 300, right: -135, bottom: -185, opacity: p.dark ? 0.09 : 0.34 },
     homeTop: { minHeight: 42, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', zIndex: 2 },
+    homeTopLeft: { flexDirection: 'row', alignItems: 'center', gap: 9 },
+    homeBackIcon: { color: p.text, fontSize: 37, lineHeight: 38, marginTop: -5 },
     homeTopPlaceholder: { width: 32, height: 32 },
     logoImage: { backgroundColor: p.surface },
     logoFallback: { backgroundColor: p.primary, alignItems: 'center', justifyContent: 'center', shadowColor: p.primary, shadowOffset: { width: 0, height: 6 }, shadowOpacity: 0.22, shadowRadius: 10, elevation: 4 },
@@ -714,14 +1200,16 @@ function buildStyles(p) {
     bottomNavText: { marginTop: 2, color: p.muted, fontSize: 10, lineHeight: 12 },
     bottomNavTextActive: { color: p.text },
 
-    chatHeader: { position: 'relative', zIndex: 20, minHeight: 64, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: 12, borderBottomWidth: 1, borderBottomColor: p.border, backgroundColor: p.header, overflow: 'visible' },
-    chatHeaderLeft: { position: 'absolute', zIndex: 30, left: 12, top: 16, flexDirection: 'row', alignItems: 'center', gap: 5 },
-    chatHeaderRight: { position: 'absolute', zIndex: 30, right: 12, top: 16, flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end', gap: 5 },
+    chatHeader: { position: 'relative', zIndex: 20, minHeight: 64, flexDirection: 'row', alignItems: 'flex-start', justifyContent: 'space-between', paddingHorizontal: 12, borderBottomWidth: 1, borderBottomColor: p.border, backgroundColor: p.header, overflow: 'visible' },
+    chatHeaderLeft: { zIndex: 30, width: 76, height: 64, flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', gap: 5 },
+    chatHeaderCenter: { position: 'absolute', zIndex: 18, top: 0, left: 0, right: 0, height: 64, alignItems: 'center', justifyContent: 'flex-start' },
+    chatHeaderRight: { zIndex: 30, width: 76, height: 64, flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end', gap: 5 },
     headerIconButton: { width: 32, height: 32, borderRadius: 16, backgroundColor: p.dark ? 'rgba(255,255,255,0.08)' : '#FFFFFF', alignItems: 'center', justifyContent: 'center' },
-    backIcon: { color: p.text, fontSize: 31, lineHeight: 31, marginTop: -4 },
-    menuIcon: { color: p.text, fontSize: 17, lineHeight: 18, letterSpacing: -1.5, fontWeight: '700', marginTop: -4 },
-    closeIcon: { color: p.text, fontSize: 23, lineHeight: 24, marginTop: -2 },
-    agentTrigger: { position: 'absolute', zIndex: 18, top: 0, left: '50%', width: 218, height: 48, marginLeft: -109, borderWidth: 1, borderTopWidth: 0, borderColor: p.border, borderBottomLeftRadius: 24, borderBottomRightRadius: 24, backgroundColor: p.surface, alignItems: 'center', justifyContent: 'center', shadowColor: '#172236', shadowOffset: { width: 0, height: 5 }, shadowOpacity: p.dark ? 0.18 : 0.07, shadowRadius: 8, elevation: 2 },
+    backIcon: { color: p.text, fontSize: 31, lineHeight: 31, transform: [{ translateY: -1 }] },
+    menuDots: { width: 24, height: 24, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 3 },
+    menuDot: { width: 3.5, height: 3.5, borderRadius: 2, backgroundColor: p.text },
+    closeIcon: { color: p.text, fontSize: 23, lineHeight: 24, transform: [{ translateY: -1 }] },
+    agentTrigger: { zIndex: 18, width: '100%', maxWidth: 218, height: 48, borderWidth: 1, borderTopWidth: 0, borderColor: p.border, borderBottomLeftRadius: 24, borderBottomRightRadius: 24, backgroundColor: p.surface, alignItems: 'center', justifyContent: 'center', shadowColor: '#172236', shadowOffset: { width: 0, height: 5 }, shadowOpacity: p.dark ? 0.18 : 0.07, shadowRadius: 8, elevation: 2 },
     agentVisual: { height: 30, flexDirection: 'row', alignItems: 'center', justifyContent: 'center' },
     agentAvatar: { width: 28, height: 28, borderRadius: 14, backgroundColor: p.primary, alignItems: 'center', justifyContent: 'center' },
     agentAvatarOverlap: { marginLeft: -8, borderWidth: 2, borderColor: p.surface },
@@ -755,6 +1243,13 @@ function buildStyles(p) {
     dangerButton: { flex: 1, minHeight: 40, borderRadius: 9, backgroundColor: p.danger, paddingHorizontal: 14, alignItems: 'center', justifyContent: 'center' },
     disabled: { opacity: 0.55 },
 
+    contactInfoRow: { width: '100%', flexDirection: 'row', alignItems: 'flex-start', marginBottom: 12, paddingRight: 44 },
+    contactInfoAvatar: { width: 28, height: 28, borderRadius: 14, marginRight: 8, marginTop: 2, backgroundColor: p.surfaceAlt, alignItems: 'center', justifyContent: 'center' },
+    contactInfoAvatarText: { color: p.muted, fontSize: 13, fontWeight: '800' },
+    contactInfoBubble: { flex: 1, minWidth: 0, paddingHorizontal: 12, paddingVertical: 10, borderRadius: 14, borderBottomLeftRadius: 5, backgroundColor: p.agentBubble },
+    contactInfoTitle: { color: p.agentText, fontSize: 12, lineHeight: 16, fontWeight: '800', marginBottom: 5 },
+    contactInfoLine: { color: p.agentText, fontSize: 11, lineHeight: 16 },
+    contactInfoLabel: { fontWeight: '700' },
     messageList: { flex: 1, minHeight: 0 },
     messageListContent: { paddingHorizontal: 16, paddingTop: 18, paddingBottom: 12, flexGrow: 1 },
     historyLoader: { minHeight: 34, alignItems: 'center', justifyContent: 'center', paddingBottom: 10 },
@@ -775,8 +1270,26 @@ function buildStyles(p) {
     systemRow: { alignSelf: 'center', paddingHorizontal: 16, paddingVertical: 7, marginVertical: 3 },
     systemText: { color: p.muted, fontSize: 11, lineHeight: 15, textAlign: 'center' },
     attachmentImage: { width: 220, maxWidth: '100%', height: 180, borderRadius: 10, marginBottom: 4, backgroundColor: p.surfaceAlt },
-    fileAttachment: { paddingVertical: 4 },
+    fileAttachment: { minWidth: 180, maxWidth: 260, flexDirection: 'row', alignItems: 'center', gap: 10, paddingVertical: 4 },
+    fileAttachmentIcon: { width: 34, height: 34, borderWidth: 1, borderRadius: 9, alignItems: 'center', justifyContent: 'center', opacity: 0.85 },
+    fileAttachmentIconText: { fontSize: 10, fontWeight: '800' },
+    fileAttachmentCopy: { flex: 1, minWidth: 0 },
     fileAttachmentText: { fontSize: 13, fontWeight: '600' },
+    fileAttachmentMeta: { marginTop: 2, fontSize: 10, opacity: 0.72 },
+    markdownRoot: { flexShrink: 1 },
+    markdownParagraph: { marginBottom: 2 },
+    markdownSpacer: { height: 7 },
+    markdownStrong: { fontWeight: '800' },
+    markdownEm: { fontStyle: 'italic' },
+    markdownInlineCode: { fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace', fontSize: 12, backgroundColor: p.dark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)' },
+    markdownLink: { textDecorationLine: 'underline' },
+    markdownHeading: { marginTop: 2, marginBottom: 4, fontSize: 15, lineHeight: 20, fontWeight: '800' },
+    markdownQuote: { marginVertical: 3, paddingLeft: 9, borderLeftWidth: 3, borderLeftColor: p.muted },
+    markdownListRow: { flexDirection: 'row', alignItems: 'flex-start', marginVertical: 1 },
+    markdownListPrefix: { width: 20, fontWeight: '700' },
+    markdownListText: { flex: 1, minWidth: 0 },
+    markdownCodeBlock: { marginVertical: 4, paddingHorizontal: 9, paddingVertical: 8, borderRadius: 8, backgroundColor: p.dark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)' },
+    markdownCodeText: { fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace', fontSize: 12, lineHeight: 17 },
     typingRow: { flex: 0, paddingHorizontal: 18, paddingTop: 8, paddingBottom: 7 },
     typingText: { color: p.muted, fontSize: 11, lineHeight: 15 },
 
@@ -791,6 +1304,10 @@ function buildStyles(p) {
     sendButton: { width: 38, height: 38, borderRadius: 19, backgroundColor: p.primary, alignItems: 'center', justifyContent: 'center' },
     sendIcon: { color: '#FFFFFF', fontSize: 17, lineHeight: 18, transform: [{ rotate: '-3deg' }] },
     aiCompliance: { color: p.muted, fontSize: 9, lineHeight: 13, textAlign: 'center', paddingHorizontal: 5, paddingBottom: 8 },
+    composerErrorRow: { alignItems: 'center', justifyContent: 'center', paddingHorizontal: 8, paddingBottom: 7 },
+    composerError: { color: '#B42318', fontSize: 11, lineHeight: 15, textAlign: 'center' },
+    composerErrorAction: { marginTop: 5, minHeight: 28, paddingHorizontal: 10, borderRadius: 14, backgroundColor: p.surfaceAlt, alignItems: 'center', justifyContent: 'center' },
+    composerErrorActionText: { color: p.text, fontSize: 10, lineHeight: 13, fontWeight: '700' },
     attachmentMenu: { position: 'absolute', zIndex: 12, left: 12, bottom: 72, width: 210, padding: 7, borderWidth: 1, borderColor: p.border, borderRadius: 14, backgroundColor: p.surface, ...shadow },
     attachmentAction: { minHeight: 40, flexDirection: 'row', alignItems: 'center', paddingHorizontal: 10, borderRadius: 9 },
     attachmentActionIcon: { width: 26, color: p.text, fontSize: 15 },
@@ -799,9 +1316,9 @@ function buildStyles(p) {
     emojiButton: { width: '11%', aspectRatio: 1, minHeight: 34, borderRadius: 8, alignItems: 'center', justifyContent: 'center' },
     emojiText: { fontSize: 20, lineHeight: 22 },
 
-    poweredBy: { flex: 0, minHeight: 17, alignItems: 'center', justifyContent: 'center', paddingBottom: 5, backgroundColor: p.background },
+    poweredBy: { flex: 0, minHeight: 22, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 4, paddingBottom: 5, backgroundColor: p.background },
     poweredByText: { color: '#9398A2', fontSize: 9, lineHeight: 11, textAlign: 'center' },
-    poweredByBrand: { color: p.text, fontWeight: '700' },
+    poweredByLogo: { width: 48, height: 15 },
 
     modalBackdrop: { flex: 1, backgroundColor: 'rgba(16,20,27,0.55)', justifyContent: 'flex-end', padding: 16 },
     modalBackdropTop: { flex: 1, backgroundColor: 'rgba(16,20,27,0.55)', justifyContent: 'flex-start', padding: 16 },