:root { --morning-mist: #E6EEF2; --leaf-water: #A9C6D9; --warm-stone: #D9C5B4; --twilight-shadow: #5A6875; --dew-drop: #C5E8E8; --moss-touch: #8BA888; --ember-glow: #D99E89; --night-petal: #6B597C; --text-primary: #3A4750; --text-secondary: #5A6875; --background-primary: #F7F9FA; --background-secondary: #E6EEF2; --border-radius: 12px; --transition-speed: 0.3s;}* { box-sizing: border-box; margin: 0; padding: 0;}body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(--background-primary); color: var(--text-primary); line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; transition: background-color var(--transition-speed) ease;}.app-container { max-width: 100%; width: 100%; height: 100vh; margin: 0 auto; display: flex; flex-direction: column; overflow: hidden;}.app-header { padding: 1rem; display: flex; align-items: center; justify-content: center; position: relative;}.logo { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(145deg, var(--leaf-water), var(--dew-drop)); box-shadow: 0 2px 10px rgba(90, 104, 117, 0.1), inset 0 -2px 5px rgba(201, 232, 232, 0.5); position: relative; overflow: hidden;}.logo::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); animation: ripple 10s infinite ease-out;}.app-title { margin-left: 1rem; font-weight: 300; font-size: 1.2rem; letter-spacing: 1px; color: var(--text-secondary);}.mirror-container { flex: 1; display: flex; flex-direction: column; padding: 1rem; position: relative; overflow: hidden;}.reflection-surface { flex: 1; background-color: var(--background-secondary); border-radius: var(--border-radius); padding: 1.5rem; overflow-y: auto; position: relative; box-shadow: 0 5px 15px rgba(90, 104, 117, 0.05), inset 0 -2px 5px rgba(201, 232, 232, 0.2); transition: all var(--transition-speed) ease;}.reflection-surface::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 100px; background: linear-gradient(to bottom, var(--background-secondary), transparent); pointer-events: none; z-index: 1; opacity: 0.7;}.reflection-content { display: flex; flex-direction: column; gap: 1.5rem; position: relative; z-index: 0;}.reflection-bubble { max-width: 80%; padding: 1rem 1.5rem; border-radius: 18px; background-color: white; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); position: relative; opacity: 0.9; transform-origin: center bottom; animation: appear 0.5s ease-out forwards;}.reflection-bubble.user { align-self: flex-end; background-color: var(--leaf-water); color: white; border-bottom-right-radius: 4px;}.reflection-bubble.mirror { align-self: flex-start; background-color: white; border-bottom-left-radius: 4px;}.reflection-bubble p { margin: 0; font-size: 1rem; line-height: 1.5;}.reflection-bubble.mirror p { font-weight: 300;}.reflection-time { font-size: 0.7rem; opacity: 0.6; margin-top: 0.5rem; text-align: right;}.input-container { margin-top: 1rem; padding: 0.5rem; background-color: white; border-radius: var(--border-radius); display: flex; align-items: center; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); transition: all var(--transition-speed) ease;}.input-container:focus-within { box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);}.input-field { flex: 1; border: none; padding: 0.8rem; font-size: 1rem; background: transparent; color: var(--text-primary); resize: none; min-height: 20px; max-height: 120px; outline: none; font-family: inherit;}.input-field::placeholder { color: #A0A0A0; font-weight: 300;}.send-button { width: 40px; height: 40px; border-radius: 50%; border: none; background-color: var(--leaf-water); color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--transition-speed) ease; opacity: 0.8;}.send-button:hover { opacity: 1; transform: scale(1.05);}.send-button svg { width: 18px; height: 18px; fill: currentColor;}.ambient-element { position: absolute; border-radius: 50%; background: radial-gradient(circle at center, var(--dew-drop) 0%, transparent 70%); opacity: 0.1; filter: blur(20px); z-index: -1; animation: float 20s infinite ease-in-out;}.ambient-1 { width: 300px; height: 300px; top: -100px; left: -100px; animation-delay: 0s;}.ambient-2 { width: 200px; height: 200px; bottom: 10%; right: -50px; background: radial-gradient(circle at center, var(--moss-touch) 0%, transparent 70%); animation-delay: 5s;}.ambient-3 { width: 250px; height: 250px; bottom: -100px; left: 30%; background: radial-gradient(circle at center, var(--warm-stone) 0%, transparent 70%); animation-delay: 10s;}@keyframes appear { from { opacity: 0; transform: translateY(10px) scale(0.95); } to { opacity: 0.9; transform: translateY(0) scale(1); }}@keyframes ripple { 0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0.7; } 100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }}@keyframes float { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(5px, -5px); } 50% { transform: translate(10px, 5px); } 75% { transform: translate(-5px, 10px); }}@media (prefers-color-scheme: dark) { :root { --text-primary: #E6EEF2; --text-secondary: #A9C6D9; --background-primary: #2A3540; --background-secondary: #3A4750; } .reflection-bubble.mirror { background-color: #4A5760; } .input-container { background-color: #3A4750; } .input-field { color: var(--text-primary); } .input-field::placeholder { color: #8A9AA5; }}@media (min-width: 768px) { .app-container { max-width: 600px; height: 90vh; margin: auto; border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); background-color: var(--background-primary); } .app-header { padding: 1.5rem; } .reflection-bubble { max-width: 70%; }}