:root{--ink:#1e2433;--muted:#8b91a1;--purple:#7966e8;--purple-dark:#6652d7;--bg:#f5f6fb;--line:#eceef5;--green:#56c69a}*{box-sizing:border-box}body{margin:0;background:#f0f1f7;color:var(--ink);font-family:'DM Sans',sans-serif;min-height:100vh;display:grid;place-items:center;padding:24px}.app-shell{width:min(1320px,100%);height:min(850px,calc(100vh - 48px));min-height:610px;background:#fff;border-radius:26px;overflow:hidden;box-shadow:0 28px 90px #292c4a1c}.hidden{display:none!important}.login-view{height:100%;display:grid;grid-template-columns:1fr 1fr}.login-art{position:relative;overflow:hidden;background:linear-gradient(145deg,#211c49 0%,#4c3a94 55%,#8370e9 100%);display:flex;align-items:center;justify-content:center}.login-art:before,.login-art:after{content:"";position:absolute;border-radius:50%;border:1px solid #ffffff1b;width:500px;height:500px}.login-art:after{width:680px;height:680px}.art-orbit{position:absolute;border:1px solid #ffffff18;border-radius:50%;width:390px;height:390px}.orbit-two{width:550px;height:550px}.art-card{position:relative;width:260px;height:300px;border-radius:25px;background:linear-gradient(150deg,#ffffff25,#ffffff0c);border:1px solid #ffffff50;backdrop-filter:blur(15px);box-shadow:0 30px 80px #100b363d;transform:rotate(-5deg);padding:30px}.art-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:#ffffff24;color:white;font-size:27px}.art-lines{margin-top:37px}.art-lines i{display:block;height:9px;background:#ffffff35;border-radius:9px;margin:12px 0;width:80%}.art-lines i:nth-child(2){width:60%}.art-lines i:nth-child(3){width:72%}.art-bubble{position:absolute;bottom:35px;right:-37px;background:#fff;color:#34304e;border-radius:15px 15px 4px 15px;padding:15px 18px;font-weight:700;font-size:13px;box-shadow:0 12px 30px #18103b30}.art-bubble span{color:#ed83a7;margin-left:7px}.art-caption{position:absolute;bottom:36px;color:#ffffffc9;letter-spacing:.08em;font-size:12px}.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:7px;box-shadow:0 0 0 3px #56c69a20}.login-panel{padding:52px clamp(34px,6vw,86px);display:flex;flex-direction:column;justify-content:center}.brand{display:flex;align-items:center;gap:10px;font:800 22px Manrope,sans-serif;letter-spacing:-1px}.brand-mark{display:grid;place-items:center;width:34px;height:34px;background:#7966e8;color:white;border-radius:12px;font-size:20px}.brand-period{color:var(--purple)}.login-copy{margin:55px 0 30px}.eyebrow,.sidebar-label{font-size:10px;letter-spacing:.16em;font-weight:700;color:#9a93d9}.login-copy h1{font:800 clamp(30px,3.3vw,43px)/1.2 Manrope,sans-serif;letter-spacing:-1.7px;margin:15px 0}.login-copy h1 em{font-style:normal;color:var(--purple)}.login-copy p{color:var(--muted);font-size:14px;line-height:1.7;max-width:350px}.login-form label{display:block;font-size:12px;font-weight:700;margin:18px 0 9px}.field-wrap{height:49px;display:flex;align-items:center;border:1px solid #e8e9f1;border-radius:12px;padding:0 13px;gap:10px;transition:.2s}.field-wrap:focus-within{border-color:#a69af3;box-shadow:0 0 0 3px #7966e815}.field-icon{color:#a19bbd;font-size:18px}.field-wrap input,.field-wrap select{border:0;outline:0;background:transparent;width:100%;font:13px 'DM Sans',sans-serif;color:var(--ink)}.eye-btn{border:0;background:none;color:#969bad;cursor:pointer;font-size:18px}.primary-btn{width:100%;height:50px;border:0;border-radius:12px;background:var(--purple);color:#fff;font:700 13px 'DM Sans';margin-top:24px;cursor:pointer;box-shadow:0 9px 20px #7966e82b;transition:.2s}.primary-btn:hover{background:var(--purple-dark);transform:translateY(-1px)}.primary-btn span{margin-left:10px;font-size:17px}.error-text{font-size:12px;color:#d94e6b;min-height:16px}.secure-note{font-size:11px;color:#9297a7;margin-top:18px}.secure-note span{font-size:15px;margin-right:7px}.chat-view{height:100%;display:grid;grid-template-columns:270px 1fr}.sidebar{background:#fbfbfe;border-right:1px solid var(--line);padding:28px 20px;display:flex;flex-direction:column;min-width:0}.sidebar .brand{margin:0 0 48px 5px}.sidebar-label{color:#a0a4b3;margin:0 0 14px 5px}.space-card{display:flex;align-items:center;gap:11px;padding:13px 11px;border-radius:13px;background:#f0edff;margin-bottom:33px}.space-symbol{width:39px;height:39px;border-radius:12px;background:#dfd8ff;display:grid;place-items:center;color:#7865e7;font-size:24px}.space-card strong,.person-info strong{display:block;font-size:12px}.space-card small,.person-info small{display:block;color:#999eae;font-size:10px;margin-top:5px}.lock-icon{margin-left:auto;color:#8c7de0}.people-label{display:flex;justify-content:space-between;padding-right:7px}.people-label span{background:#efeff6;padding:2px 7px;border-radius:8px;color:#8d91a1;letter-spacing:0}.person-row{display:flex;align-items:center;gap:10px;padding:10px 5px;margin-bottom:6px}.avatar{width:39px;height:39px;flex-shrink:0;display:grid;place-items:center;border-radius:14px;font-weight:700;position:relative}.avatar-a{background:#f8dfd9;color:#b66b63}.avatar-b{background:#e5e0ff;color:#7966e8;font-size:21px}.presence{position:absolute;width:10px;height:10px;border-radius:50%;background:#54c99b;border:2px solid #fbfbfe;right:-1px;bottom:-1px}.person-info{min-width:0}.you-pill{margin-left:auto;font-size:8px;letter-spacing:.08em;background:#e9e5ff;color:#7865e7;padding:5px 6px;border-radius:5px;font-weight:700}.sidebar-bottom{margin-top:auto}.privacy-card{display:flex;gap:10px;padding:13px 10px;border:1px solid #eceaf8;background:#fff;border-radius:12px}.privacy-icon{color:#8b79e7;font-size:20px}.privacy-card strong{font-size:10px}.privacy-card p{font-size:10px;line-height:1.6;color:#969aaa;margin:6px 0 0}.logout-btn{border:0;background:transparent;color:#8d91a1;font:600 11px 'DM Sans';padding:18px 7px;cursor:pointer}.logout-btn span{font-size:16px;margin-right:7px}.sidebar-foot{border-top:1px solid var(--line);padding:17px 5px 0;font-size:9px;color:#b0b3bf;letter-spacing:.12em}.sidebar-foot span{color:#e78aa7;margin-left:4px}.conversation{display:flex;flex-direction:column;min-width:0;background:#fff}.chat-header{height:88px;border-bottom:1px solid var(--line);padding:0 33px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.header-person{display:flex;align-items:center;gap:12px}.header-avatar{width:43px;height:43px}.header-person h2{font:700 14px Manrope,sans-serif;margin:0 0 6px}.header-person p{font-size:10px;color:#9a9eae;margin:0}.header-actions{display:flex;align-items:center;gap:14px}.encrypted-tag{font-size:9px;letter-spacing:.1em;color:#8f92a2;background:#f7f7fb;border:1px solid #eeeff5;border-radius:7px;padding:9px 10px}.encrypted-tag span{margin-right:5px;color:#8b7be6}.icon-btn{width:34px;height:34px;border:1px solid var(--line);background:#fff;border-radius:10px;color:#8c8fa0;font-size:20px;cursor:pointer}.messages{flex:1;overflow-y:auto;padding:25px clamp(20px,5vw,65px);display:flex;flex-direction:column;gap:17px;scroll-behavior:smooth}.day-divider{display:flex;align-items:center;gap:13px;color:#b0b3c0;font-size:9px;letter-spacing:.15em;justify-content:center;margin:2px 0 17px}.day-divider:before,.day-divider:after{content:"";height:1px;background:#f0f0f6;flex:1;max-width:150px}.empty-state{text-align:center;margin:auto;color:#9a9eae;padding:25px}.empty-heart{width:56px;height:56px;border-radius:20px;background:#f2efff;color:#8877e8;display:grid;place-items:center;font-size:31px;margin:0 auto 16px}.empty-state h3{font:700 15px Manrope,sans-serif;color:#555a6d;margin:0 0 8px}.empty-state p{font-size:12px;line-height:1.6;margin:0}.message-row{display:flex;flex-direction:column;max-width:min(75%,470px);align-self:flex-start;gap:6px;animation:pop .18s ease}.message-row.mine{align-self:flex-end;align-items:flex-end}@keyframes pop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.message-meta{font-size:10px;color:#a1a4b2;display:flex;gap:8px;padding:0 4px}.message-bubble{padding:13px 16px;border-radius:4px 16px 16px 16px;background:#f3f4f9;color:#4d5264;font-size:13px;line-height:1.65;overflow-wrap:anywhere;white-space:pre-wrap}.mine .message-bubble{background:linear-gradient(135deg,#8170ed,#7060df);color:white;border-radius:16px 4px 16px 16px;box-shadow:0 5px 12px #7966e81a}.composer{padding:0 clamp(20px,4vw,52px) 20px;flex-shrink:0}.composer-inner{border:1px solid #e9eaf2;border-radius:15px;padding:13px 14px 10px;box-shadow:0 5px 18px #33364c05}.composer textarea{width:100%;border:0;outline:0;resize:none;min-height:36px;max-height:110px;font:13px/1.6 'DM Sans',sans-serif;color:var(--ink)}.composer textarea::placeholder{color:#b0b3c1}.composer-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px}.composer-hint{font-size:10px;color:#a2a5b3}.composer-hint span{border:1px solid #e7e8ef;border-radius:4px;padding:2px 5px;margin-right:5px}.send-btn{display:flex;align-items:center;gap:15px;border:0;border-radius:10px;background:var(--purple);color:#fff;padding:9px 10px 9px 14px;font:600 11px 'DM Sans';cursor:pointer}.send-btn b{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:#ffffff2a;font-size:16px}.send-btn:hover{background:var(--purple-dark)}.composer-foot{display:flex;justify-content:space-between;color:#b3b5c1;font-size:9px;padding:12px 3px 0}.composer-foot span:last-child{letter-spacing:.12em}.composer-foot b{color:#e78aa7}.notice{min-height:0;padding:0 50px;color:#d94e6b;font-size:11px}.notice:not(:empty){padding-top:5px;padding-bottom:5px}@media(max-width:850px){body{padding:0;background:white}.app-shell{height:100vh;min-height:520px;border-radius:0;box-shadow:none}.login-view{grid-template-columns:1fr}.login-art{display:none}.login-panel{padding:35px clamp(25px,8vw,60px);max-width:600px;width:100%;margin:auto}.login-copy{margin:45px 0 24px}.chat-view{grid-template-columns:205px 1fr}.sidebar{padding:23px 13px}.chat-header{padding:0 18px}.encrypted-tag{display:none}.messages{padding:22px 18px}.composer{padding:0 18px 15px}}@media(max-width:600px){.chat-view{grid-template-columns:1fr}.sidebar{display:none}.chat-header{height:76px}.messages{padding:18px 15px}.message-row{max-width:88%}.composer{padding:0 12px 12px}.composer-hint{font-size:9px}.composer-foot{font-size:8px}.send-btn{gap:8px}.notice{padding-left:18px;padding-right:18px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}
