*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;background:linear-gradient(135deg,#ff9a9e,#fecfef,#fecfe5,#a8edea,#ff9a9e,#a29bfe,#fd79a8,#fdcb6e,#81e155,#cf79fd);height:100vh;overflow:hidden;background-size:400% 400%;animation:gradientAnimation 15s ease infinite}#app{flex-direction:column}#app,.welcome-container{height:100vh;display:flex}.welcome-container{justify-content:center;align-items:center;background:transparent;animation:fadeIn 1s ease-in}.welcome-content{text-align:center;background:hsla(0,0%,100%,.95);padding:2rem;border-radius:20px;box-shadow:0 20px 40px rgba(0,0,0,.1);backdrop-filter:blur(10px);max-width:90%;width:300px}.welcome-image{margin-bottom:1.5rem}.welcome-image-container{position:relative;display:inline-block}.welcome-img{width:120px;height:120px;border-radius:50%;-o-object-fit:cover;object-fit:cover;border:4px solid #667eea;animation:float 3s ease-in-out infinite;cursor:pointer;transition:transform .2s ease}.welcome-img:hover{transform:scale(1.05)}.heart-messages-container{position:absolute;top:0;left:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}.heart-message{position:absolute;top:30%;left:50%;transform:translateX(-50%);font-weight:700;font-size:1rem;text-shadow:1px 1px 2px rgba(0,0,0,.5);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:10;transition:none;white-space:nowrap;padding:6px 12px;border-radius:20px;background:linear-gradient(135deg,#ff9a9e,#fecfef);color:#fff;box-shadow:0 4px 15px rgba(255,154,158,.4);backdrop-filter:blur(4px);border:1px solid hsla(0,0%,100%,.3);will-change:transform,opacity}@keyframes floatUp{0%{transform:translate3d(-50%,0,0) rotate(0deg);opacity:1;font-size:1rem}to{transform:translate3d(-50%,-120px,0) rotate(10deg);opacity:0;font-size:.7rem}}@keyframes floatUpWithSway{0%{transform:translate3d(-50%,0,0) rotate(0deg);opacity:1;font-size:1rem}25%{transform:translate3d(-30%,-40px,0) rotate(-5deg);opacity:.9}50%{transform:translate3d(-50%,-80px,0) rotate(0deg);opacity:.7}75%{transform:translate3d(-70%,-100px,0) rotate(5deg);opacity:.5}to{transform:translate3d(-50%,-120px,0) rotate(10deg);opacity:0;font-size:.7rem}}.welcome-text h2{color:#333;margin-bottom:.5rem;font-size:1.5rem}.welcome-text p{color:#666;margin-bottom:1.5rem;font-size:.9rem}.enter-btn{background:linear-gradient(135deg,#ff9a9e,#fecfef);color:#fff;border:none;padding:12px 30px;border-radius:25px;font-size:1rem;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px rgba(255,154,158,.3)}.enter-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(102,126,234,.4)}.enter-btn:active{transform:translateY(0)}.chat-container{display:flex;flex-direction:column;height:100vh;background:transparent;padding:1rem}.header{background:hsla(0,0%,100%,.85);padding:1rem;border-radius:15px;margin-bottom:1rem;box-shadow:0 4px 15px rgba(0,0,0,.1);backdrop-filter:blur(10px)}.header h1{color:#333;font-size:1.3rem;margin:0}.header-subtitle{color:#666;font-size:.9rem;margin:0;margin-top:.25rem}.new-session-btn{background:linear-gradient(135deg,#ff9a9e,#fecfef);color:#fff;border:none;border-radius:20px;padding:8px 15px;font-size:.9rem;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 8px rgba(255,154,158,.3)}.new-session-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px hsla(0,100%,71%,.4)}.new-session-btn:active{transform:translateY(0)}.back-btn{background:linear-gradient(135deg,#a8edea,#a29bfe);color:#fff;border:none;border-radius:20px;padding:8px 15px;font-size:.9rem;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 8px rgba(168,237,234,.3)}.back-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(102,126,234,.4)}.back-btn:active{transform:translateY(0)}.header-center{text-align:center;flex:1;margin:0 1rem}.header-center h1{margin:0;color:#333;font-size:1.3rem}.header-center .header-subtitle{margin:0;color:#666;font-size:.9rem;margin-top:.25rem}.messages{flex:1;overflow-y:auto;padding:1rem 0;display:flex;flex-direction:column;gap:1rem}.message{display:flex;align-items:flex-start;max-width:80%;animation:slideIn .3s ease-out}.message.sent{align-self:flex-end}.message.received{align-self:flex-start}.avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;margin:0 .5rem;flex-shrink:0}.avatar.sent{order:2}.avatar.received{order:0}.avatar-image{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.message-content{display:flex;flex-direction:column}.message-text{padding:.75rem 1rem;border-radius:18px;line-height:1.4;word-wrap:break-word;max-width:100%}.message.sent .message-text{background:linear-gradient(135deg,#fd79a8,#fdcb6e);color:#fff;border-bottom-right-radius:5px}.message.received .message-text{background:hsla(0,0%,100%,.85);color:#333;border-bottom-left-radius:5px;box-shadow:0 2px 10px rgba(0,0,0,.08)}.message-time{font-size:.7rem;color:#999;margin-top:.25rem;text-align:right}.message.sent .message-time{color:#ccc}.input-area{display:flex;gap:.5rem;padding:1rem 0;background:hsla(0,0%,100%,.85);border-radius:15px;margin-top:1rem;box-shadow:0 -4px 15px rgba(0,0,0,.1);backdrop-filter:blur(10px)}.input-area input{flex:1;padding:.75rem 1rem;border:2px solid rgba(253,121,168,.3);border-radius:25px;font-size:1rem;outline:none;transition:border-color .3s ease;background:hsla(0,0%,100%,.7)}.input-area input:focus{border-color:#fd79a8}.input-area button{padding:.75rem 1.5rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:25px;font-size:1rem;cursor:pointer;transition:all .3s ease}.input-area button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 15px rgba(102,126,234,.3)}.input-area button:disabled{opacity:.6;cursor:not-allowed;transform:none}.typing{display:flex;align-items:center;padding:.75rem 1rem;background:hsla(0,0%,100%,.85);border-radius:18px;box-shadow:0 2px 10px rgba(0,0,0,.08)}.dot{width:6px;height:6px;background:#999;border-radius:50%;margin:0 2px;animation:typing 1.4s ease-in-out infinite}.dot:first-child{animation-delay:0s}.dot:nth-child(2){animation-delay:.2s}.dot:nth-child(3){animation-delay:.4s}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInRight{0%{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}@keyframes typing{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-5px)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes gradientAnimation{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}@media (max-width:480px){#app,.chat-container{padding:.5rem}.header{padding:.75rem}.header h1,.header-center h1{font-size:1.1rem}.message{max-width:90%}.message-text{padding:.5rem .75rem;font-size:.9rem}.input-area{padding:.5rem 0}.input-area input{padding:.5rem .75rem;font-size:.9rem}.input-area button{padding:.5rem 1rem;font-size:.9rem}.welcome-content{width:280px;padding:1.5rem}.welcome-img{width:100px;height:100px}.welcome-text h2{font-size:1.3rem}.welcome-text p{font-size:.8rem}.enter-btn{padding:10px 25px;font-size:.9rem}.back-btn,.new-session-btn{padding:6px 12px;font-size:.8rem}.header-center{margin:0 .5rem}}