*{box-sizing:border-box} :root{--pink:#e95b91;--deep:#a82e63;--ink:#422d3a;--muted:#967d8b;--paper:#fffafd;--line:#f5dce7}
body{margin:0;min-height:100vh;background:linear-gradient(145deg,#fff5f8,#fffafd 50%,#fceaf2);font-family:"DM Sans",sans-serif;color:var(--ink);display:flex;align-items:center;justify-content:center;padding:22px;overflow-x:hidden}
.ambient{position:fixed;border-radius:50%;filter:blur(2px);opacity:.5;pointer-events:none}.a1{width:270px;height:270px;background:#ffd5e5;top:-100px;left:-80px}.a2{width:330px;height:330px;background:#f8d9ed;bottom:-160px;right:-100px}
.shell{width:100%;max-width:480px;position:relative;z-index:1}.login-card,.chat-card{background:rgba(255,255,255,.88);border:1px solid rgba(255,255,255,.95);border-radius:28px;box-shadow:0 24px 80px rgba(167,67,111,.13);overflow:hidden;backdrop-filter:blur(16px)}
.login-card{padding:38px 30px 26px;text-align:center}.logo-heart{margin:0 auto 17px;width:58px;height:58px;border-radius:20px;background:linear-gradient(135deg,#f58ab4,#d94482);color:white;display:grid;place-items:center;font-size:27px;box-shadow:0 10px 25px #ef8ab455}.eyebrow{font-size:10px;letter-spacing:2.4px;color:var(--pink);font-weight:700;margin:0 0 12px}
h1,h2{font-family:"Playfair Display",serif}h1{font-size:clamp(30px,7vw,40px);line-height:1.15;margin:0;color:#54263f}.subtitle{color:var(--muted);font-size:14px;margin:12px 0 30px}
form label{display:block;text-align:left;font-size:12px;font-weight:700;margin:0 0 9px 2px;color:#755468}.password-wrap{display:flex;align-items:center;border:1px solid var(--line);border-radius:14px;background:#fff9fc;padding-right:8px}.password-wrap:focus-within{border-color:#e88ab1;box-shadow:0 0 0 3px #fce2ed}.password-wrap input{border:0!important;box-shadow:none!important;background:transparent!important}.password-wrap button{border:0;background:transparent;color:#a77a90;font-size:17px;padding:8px;cursor:pointer}
input{font:inherit;color:var(--ink);min-width:0;width:100%;padding:15px 14px;border:1px solid var(--line);border-radius:14px;background:#fff9fc;outline:none}input:focus{border-color:#e88ab1;box-shadow:0 0 0 3px #fce2ed}
.primary{margin-top:14px;width:100%;border:0;border-radius:14px;padding:15px;background:linear-gradient(100deg,#ef80ad,#d94d87);color:white;font:700 14px "DM Sans";cursor:pointer;box-shadow:0 10px 22px #e75c9633}.primary span{font-size:18px;margin-left:7px}.primary:disabled{opacity:.6}
.tiny-note{font-size:11px;color:#b69aaa;margin:23px 0 0}.error{color:#bd2d5d;font-size:12px;min-height:16px;margin:10px 0 0;text-align:left}
.hidden{display:none!important}.chat-card{height:min(760px,calc(100dvh - 80px));min-height:480px;display:flex;flex-direction:column}.chat-header{display:flex;align-items:center;gap:12px;padding:18px 18px 16px;border-bottom:1px solid #f8e5ed;background:#fffafd}.avatar{width:44px;height:44px;flex-shrink:0;border-radius:16px;background:linear-gradient(135deg,#f6a6c5,#d84b86);color:white;display:grid;place-items:center;font-size:24px}.head-copy{flex:1;min-width:0}.head-copy h2{font-size:20px;margin:0;color:#54263f}.head-copy p{font-size:11px;color:#a28a99;margin:5px 0 0}.online-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#62c69b;margin-right:5px}.logout{border:1px solid #f3d7e3;border-radius:11px;background:white;padding:9px 10px;color:#9b5476;font-size:11px;font-weight:700;cursor:pointer}
.welcome{text-align:center;font-size:11px;color:#bd7295;background:#fff8fb;padding:12px 6px}.welcome span{color:#e56b9c;margin:0 4px}.messages{flex:1;overflow-y:auto;padding:18px 14px;display:flex;flex-direction:column;gap:10px;background:linear-gradient(#fffafd,#fff8fb)}.loading,.empty{text-align:center;color:#bd9aad;font-size:12px;margin:auto;padding:20px}.msg{max-width:84%;display:flex;flex-direction:column;gap:4px;align-self:flex-start;animation:pop .18s ease-out}.msg.mine{align-self:flex-end}.bubble{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.5;padding:11px 13px;border-radius:17px 17px 17px 5px;background:white;border:1px solid #f6e3ec;box-shadow:0 3px 10px #c45b8310}.mine .bubble{background:linear-gradient(135deg,#f8a6c5,#ef83ad);border-color:transparent;color:#55243c;border-radius:17px 17px 5px 17px}.meta{font-size:9px;color:#b69aaa;padding:0 5px}.mine .meta{text-align:right}.typing{font-size:11px;color:#b47b96;padding:0 18px 8px}.composer{display:flex;align-items:center;gap:9px;padding:12px;border-top:1px solid #f5e0e9;background:#fff}.composer input{border-radius:24px;padding:13px 15px;font-size:13px}.send{width:44px;height:44px;flex-shrink:0;border:0;border-radius:50%;background:linear-gradient(135deg,#f18db5,#d94b87);color:white;font-size:20px;cursor:pointer}.send:disabled{opacity:.5}.chat-footer{text-align:center;padding:10px;font-size:9px;letter-spacing:.5px;color:#c09bad;background:white}.chat-footer span{color:#e45b92}.page-foot{text-align:center;color:#c09bad;font-size:9px;letter-spacing:2px;margin:17px 0 0}
@keyframes pop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@media(max-width:520px){body{padding:12px}.login-card{padding:32px 22px 24px}.chat-card{height:calc(100dvh - 52px);min-height:420px;border-radius:22px}.chat-header{padding:14px}.messages{padding:14px 10px}.page-foot{margin-top:10px}}