Detailed Prompt:

Design a simple messenger app inspired by the aesthetic style of Apple's design philosophy. Referencing minimalism, depth, and precision, follow the guidelines below to ensure a polished, adaptive user interface that adheres to modern design principles:

Visual Design
1. Color Palette
Use the 60-30-10 color rule:
Primary color (60%): Soft white tones with minor shades of light-gray for a clean, neutral background. Ex: #F7F7F7 or #EAEAEA.
Secondary color (30%): Shades of a soft blue to mimic Apple's standard communication tone (trustworthy and calming). Ex: #007AFF.
Accent color (10%): Subtle use of a bright or contrasting color (such as vermilion or muted green) for action buttons, indicators, or alerts. Ex: #FF3B30 or #34C759.
2. Typography
Use Apple's San Francisco font or a similar clean sans-serif. Ensure a hierarchical typographic system:
Headers: Use bold typefaces with larger font sizes for clear sections.
Subheaders: Medium to light-weight fonts for secondary information.
Body text: Regular for readibility and consistency.
Maintain proper golden ratio scaling for text size, padding, and spacing.
UI Type and Adaptivity
The messenger app must feature an adaptive user interface, automatically adjusting to different screen sizes and orientations (iPhone, iPad, MacBook). Design for seamless functionality across iOS and macOS.
Ensure touch-friendly elements with appropriate spacing for thumb interaction.
UI Layout and Elements
Below is a detailed list of the key UI elements to include in the messenger app, adhering to the golden ratio for spacing and sizing proportions between elements:

App Structure Overview
A clean and intuitive layout divided into key sections:

Header Section:
App title or chat title.
Profile photo or "Back" navigation button on the left.
An options menu (three dots or gear icon) on the right.
Subtle shadow depth for hierarchy.
Messages Section (Main Body):
Bubble Chat UI:
Incoming messages: Align left, soft neutral background (#E5E5EA).
Outgoing messages: Align right, primary blue background (#007AFF), white text.
Attachment previews: Display inline images, video clips, or documents within the bubbles.
Timestamp: Subtle timestamp below bubbles in smaller font.
Align timestamps in the golden ratio to bubble spacing.
Edge spacing ensures no text touches the screen's edges.
Quick scroll indicators or a date separator for long chats.
Text Composer Section (Footer):
Input field: Rounded rectangle with subtle shadow.
Placeholder text in muted gray (#C7C7CC) for inactive state.
Action buttons:
Send button: Accented in green (#34C759) and positioned on the right.
Accessory buttons (ex: + or microphone): Small circular icons, adaptive to screen width.
Adapt compose bar size for different devices:
Taller input bar dynamically appears on devices with keyboards.
Additional UI Elements
Search Bar: Adaptive search bar at the top or as a slide-down menu feature.
Contact List View: Design a tab for seamless navigation to all conversations. Clear status icons for online/offline.
Profile/Settings Section:
User profile picture viewer with editable options.
Toggle switches for notifications (use Apple's default styles).
Animation, Depth, and Micro-Interactions
Taptic Feedback: Add subtle vibrations for actions like message sent, long press actions, etc.
Smooth Transitions:
Incoming messages appear with a subtle bounce-in animation.
Use gradients or shadows to create depth for critical action buttons.
Swipe Gestures:
Swipe left/right on chats for quick delete/pin options.
By following the 60-30-10 color rule, golden ratio layout proportions, and dynamic design adaptivity, your messenger app will embody Apple-like sophistication while providing a functional and visually engaging user experience. Create an UI, using HTML, CSS and js