body,html{margin:0;padding:0;width:100%;overflow-x:hidden;box-sizing:border-box}*,::after,::before{box-sizing:inherit}body{margin:0;font-family:'ZCOOL KuaiLe','Press Start 2P',sans-serif;background-image:url("background.jpg");background-size:cover;background-position:center;color:#555}.header{text-align:center;padding:15px;background-color:rgba(255,245,250,.9);border-bottom:2px dashed pink;animation:3s ease-in-out infinite floatText}@keyframes floatText{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}.header h1{color:#ff91a4;font-size:22px;margin:0}.header p{color:#e38ba0;font-size:14px;margin-top:5px}.avatars{display:flex;justify-content:center}.avatars img{width:72px;height:72px;border:2px dashed #f8b1c8;border-radius:50%;box-shadow:0 0 6px rgba(255,182,193,.4)}.chat-container{width:100%;max-width:500px;margin:10px auto;height:560px;background:rgba(255,255,255,.82);border:5px solid #fdd6e0;border-radius:18px;display:flex;flex-direction:column;position:relative;overflow:hidden;box-shadow:0 0 12px rgba(255,182,193,.3)}.chat-box{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column}.message{margin:8px 0;padding:10px 14px;border-radius:18px;max-width:72%;position:relative;font-size:15px;line-height:1.4;opacity:.85}.from-me{background-color:rgba(255,224,236,.7);align-self:flex-end;color:#c06c91}.from-him{background-color:rgba(214,245,225,.6);align-self:flex-start;color:#5f7d66}.timestamp{font-size:10px;opacity:.5;text-align:right;margin-top:5px}.input-area{display:flex;border-top:2px dashed pink;padding:10px;background:#fff7fa}input[type=text]{flex:1;padding:9px;border-radius:8px;border:2px solid pink;font-size:14px;background-color:#fff}button{background-color:#ffe1ec;color:#a85c84;border:none;padding:9px 13px;font-weight:700;border-radius:10px;margin-left:5px;cursor:pointer;transition:background .3s}button:hover{background-color:#ffcadd}.typing-indicator{display:none;font-style:italic;font-family:"Cute Font",pixel,sans-serif;font-size:12px;color:#b76e91;text-align:left;margin:5px 15px;animation:1.2s ease-in-out infinite floatTyping;max-width:80%;padding-left:10px}#saveChat{position:fixed;bottom:10px;right:10px;background-color:#ffe4e1;color:#c96e8c;border:2px solid #f9b8d1;border-radius:10px}.typing-indicator::after{content:'';display:inline-block;animation:1.2s steps(3,end) infinite dotJump;width:1ch;overflow:hidden;vertical-align:bottom}@keyframes floatTyping{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}@keyframes dotJump{0%{content:''}33%{content:'.'}66%{content:'..'}100%{content:'...'}}#userInput{width:100%;padding:6px 12px;font-size:14px;font-family:'Cute Font','sans-serif';border:2px solid #fbdde6;border-radius:14px;background:#fff8fb;color:#d484a4;outline:0;box-shadow:0 0 4px rgba(251,221,230,.3);transition:.3s}#userInput:focus{border-color:#f9c2d4;background:#fff1f6;box-shadow:0 0 6px rgba(249,194,212,.4),0 0 12px rgba(249,194,212,.25)}.menu{position:absolute;top:10px;left:10px;z-index:1000;font-family:'ZCOOL KuaiLe',sans-serif}.menu-toggle{font-size:22px;background:0 0;border:none;color:#d6a9aa;cursor:pointer;transition:transform .2s}.menu-toggle:hover{transform:scale(1.2)}.dropdown{padding:6px 10px;box-shadow:0 0 8px rgba(255,192,203,.3)}.dropdown.show,.menu:hover .dropdown{display:block}.dropdown-item{padding:6px 10px;cursor:pointer;font-size:13px;color:#c08787;border-radius:6px;transition:background .3s}.dropdown-item:hover{background-color:#fdf1f1}.read-status{position:relative;font-size:10px;color:#bbb;opacity:.6;margin-left:0;margin-top:2px;user-select:none;font-style:italic;font-family:Arial,sans-serif;align-self:flex-end;transform:translateX(-8px)}.avatars{display:flex;justify-content:center;gap:30px;margin-top:10px;margin-bottom:10px;align-items:center}.avatar-with-status{position:relative;display:flex;align-items:center}.status-bubble{position:absolute;left:-38px;top:-4px;background:rgba(255,255,255,.25);color:rgba(255,255,255,.85);font-size:12px;padding:4px 8px;border-radius:14px;box-shadow:0 4px 12px rgba(255,255,255,.2);font-family:"Cute Font",sans-serif;white-space:nowrap;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.3)}.dropdown{display:none;position:absolute;top:30px;left:0;background:#fff;border:1px solid #ccc;border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,.15);z-index:100}.date-separator{text-align:center;font-size:12px;color:#aaa;margin:12px 0;opacity:.7;font-style:italic}