:root{--bg:#f2eee9;--sidebar:#f9f7f4;--paper:#fffdfb;--ink:#27232f;--muted:#9c969e;--line:#eee9e5;--primary:#6959bb;--lav:#f0ebfd;--peach:#f8ddc7;--sage:#d2decf;--ease:cubic-bezier(.2,.78,.2,1);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-synthesis:none}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;width:100%;color:var(--ink)}
body{background:var(--bg);background-image:radial-gradient(ellipse at 0 0,#f6dcca8a,transparent 35%),radial-gradient(ellipse at 100% 100%,#dbd6ee8a,transparent 40%)}
button,input,textarea{font:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #a99beb;outline-offset:3px}
button:disabled{cursor:not-allowed;opacity:.5}
svg{width:20px;height:20px;display:block;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.app{height:100dvh;min-height:560px;display:flex;justify-content:center;align-items:center;padding:21px}
.workspace{width:min(1480px,100%);height:min(900px,100%);min-height:540px;display:grid;grid-template-columns:342px minmax(0,1fr);background:var(--paper);border-radius:28px;overflow:hidden;border:1px solid #fff;box-shadow:0 28px 100px #4b365129,0 3px 16px #765a6520}
.sidebar{display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--line);background:var(--sidebar);overflow:hidden}
.side-head{padding:30px 26px 14px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;font-size:30px;letter-spacing:-1.9px;font-weight:790;line-height:1}
.brand-logo{width:39px;height:39px;background:var(--primary);color:#fff;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:27px;font-weight:400;letter-spacing:0;box-shadow:0 5px 13px #7867bb2e}
.wordmark-dot{color:#df9c77}
.icon-btn{height:38px;width:38px;border:1px solid transparent;background:transparent;border-radius:13px;display:flex;align-items:center;justify-content:center;color:#7c7680;transition:background .18s,color .18s}
.icon-btn:hover,.icon-btn.active{background:#ede9f0;color:var(--primary)}
.side-caption{font-size:12px;letter-spacing:.07em;font-weight:700;color:#b2aab1;text-transform:uppercase;padding:9px 29px 0}
.section-label{display:flex;justify-content:space-between;align-items:center;padding:25px 24px 12px 29px;color:#a9a2a9;font-size:10px;letter-spacing:.16em;font-weight:800}
.section-label span{display:flex;align-items:center;gap:8px}
.section-label strong{font-size:10px;color:var(--primary);background:#eee8fa;padding:4px 7px;border-radius:6px}
.search-wrap{margin:22px 21px 5px;height:46px;display:flex;align-items:center;gap:10px;border:1px solid #ece6e5;background:#fff;border-radius:14px;padding:0 14px;color:#aaa3ae;transition:border .2s}
.search-wrap:focus-within{border-color:#ada0df}
.search-wrap input{min-width:0;border:0;outline:0;flex:1;color:var(--ink);font-size:13px;background:transparent}
.search-wrap input::placeholder{color:#aaa4ac}
.search-wrap svg{width:18px;height:18px}
.people{display:flex;gap:11px;padding:10px 21px 3px;overflow-x:auto;scrollbar-width:none}
.people::-webkit-scrollbar{display:none}
.person{border:0;background:transparent;padding:0;min-width:60px;display:flex;flex-direction:column;align-items:center;gap:7px;color:#655d68;font-size:11px;font-weight:600}
.person .avatar{height:49px;width:49px;font-size:17px}
.person-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60px}
.chats{flex:1;overflow-y:auto;padding:0 12px 18px;scrollbar-width:thin;scrollbar-color:#dcd5db transparent}
.chat-item{display:flex;align-items:center;gap:12px;padding:13px 13px;border:0;background:transparent;width:100%;text-align:left;border-radius:16px;margin:2px 0;transition:background .18s}
.chat-item:hover{background:#f0ecec}
.chat-item.selected{background:#ece6f5}
.chat-item .avatar{width:50px;height:50px;flex:none}
.chat-main{min-width:0;flex:1}
.chat-row{display:flex;align-items:center;justify-content:space-between;gap:6px}
.chat-name{font-size:13px;font-weight:760;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-time{font-size:10px;color:#aea5ad;white-space:nowrap}
.chat-last{font-size:12px;color:#9c959f;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:195px;margin-top:4px}
.unread{background:var(--primary);color:#fff;font-size:10px;min-width:18px;height:18px;display:grid;place-items:center;border-radius:20px;padding:0 4px;font-weight:700}
.avatar{display:inline-flex;align-items:center;justify-content:center;position:relative;border-radius:17px;flex-shrink:0;font-size:19px;font-weight:750;color:#574d7a;text-transform:uppercase;background:linear-gradient(145deg,#e5dcfb,#d7cbf0)}
.avatar.peach{background:linear-gradient(145deg,#fce9d5,#facaaa);color:#ae7149}
.avatar.sage{background:linear-gradient(145deg,#e8efe0,#c9dbcc);color:#598672}
.avatar.blue{background:linear-gradient(145deg,#deebf8,#bed7f0);color:#5e80b6}
.avatar.lilac{background:linear-gradient(145deg,#e3dbfa,#cdbcf7);color:#6951aa}
.avatar.sun{background:linear-gradient(145deg,#fce6a9,#efc3a5);color:#936236}
.avatar.group{background:#ebdfd5;color:#907567}
.avatar.group:before{content:'♡';font-size:27px;font-weight:450}
.avatar.group .initial{display:none}
.side-bottom{margin:0 13px 13px;padding:13px 12px;display:flex;align-items:center;gap:10px;border-radius:16px;background:#eee9e7}
.side-bottom .avatar{width:38px;height:38px;border-radius:13px;font-size:14px}
.profile-txt{min-width:0;flex:1}
.profile-name{font-size:12px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profile-sub{font-size:10px;color:#a197a2;margin-top:4px}
.main{min-width:0;display:flex;flex-direction:column;background:var(--paper);position:relative}
.main-header{height:88px;min-height:88px;border-bottom:1px solid var(--line);padding:0 30px;display:flex;align-items:center;gap:14px;z-index:2;background:#fffdfaeb;backdrop-filter:blur(14px)}
.main-header .avatar{width:45px;height:45px;border-radius:15px;font-size:16px}
.header-title{font-size:15px;font-weight:760;letter-spacing:-.2px}
.header-sub{font-size:11px;color:#a7a0a7;margin-top:6px}
.header-actions{display:flex;gap:6px;margin-left:auto}
.back-btn{display:none}
.chat-wall{background:radial-gradient(ellipse at 20% 5%,#fcefe5ab,transparent 38%),radial-gradient(ellipse at 100% 80%,#f0edfcaa,transparent 55%),#fffcf9;flex:1;min-height:0;overflow-y:auto;padding:30px max(7%,30px) 28px;scrollbar-width:thin;scrollbar-color:#e9e2e3 transparent}
.chat-wall-inner{max-width:690px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;justify-content:flex-end}
.chat-intro{display:flex;align-items:center;flex-direction:column;margin:4px auto 30px;text-align:center}
.chat-intro .intro-icon{display:flex;align-items:center;justify-content:center;width:66px;height:66px;border-radius:24px;background:#efe6f8;color:#8070c4;font-size:34px;margin-bottom:13px}
.chat-intro h2{font-size:22px;font-weight:780;letter-spacing:-.9px;margin:0 0 7px}
.chat-intro p{max-width:310px;color:#a8a1a6;font-size:12px;line-height:1.7;margin:0}
.date-label{align-self:center;background:#f0ede9b8;color:#aa9ea7;border-radius:20px;padding:8px 13px;font-size:10px;font-weight:700;letter-spacing:.03em;margin:13px 0 27px}
.msg-row{display:flex;gap:9px;align-items:flex-end;margin:0 0 16px;max-width:88%;animation:msgin .25s var(--ease)}
@keyframes msgin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.msg-row.mine{align-self:flex-end;flex-direction:row-reverse}
.msg-row.theirs{align-self:flex-start}
.msg-row .avatar{width:28px;height:28px;border-radius:10px;font-size:10px;flex:none;margin-bottom:1px}
.msg-stack{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.mine .msg-stack{align-items:flex-end}
.sender{font-size:10px;color:#9b899e;margin:0 0 5px 12px;font-weight:700}
.bubble{border-radius:19px 19px 19px 5px;background:#fff;padding:11px 15px 8px;box-shadow:0 3px 18px #7157630c;border:1px solid #f1ebe9;font-size:13px;line-height:1.65;min-width:70px;max-width:100%;overflow-wrap:anywhere}
.mine .bubble{background:var(--primary);color:#fff;border-color:var(--primary);border-radius:19px 19px 5px 19px;box-shadow:0 6px 20px #7766b722}
.message-meta{font-size:9px;display:flex;justify-content:flex-end;gap:5px;margin-top:6px;color:#aea7ad;opacity:.75}
.mine .message-meta{color:#ece7ff}
.bubble img{display:block;max-width:270px;max-height:290px;object-fit:cover;border-radius:12px;margin-bottom:8px}
.bubble a{display:flex;align-items:center;gap:8px;color:inherit;text-decoration:underline;text-underline-offset:2px}
.composer-area{padding:16px max(7%,30px) 20px;background:#fffdfb;border-top:1px solid #f1ece9}
.composer-inner{max-width:690px;margin:0 auto}
.composer{display:flex;align-items:flex-end;gap:11px;padding:8px 8px 8px 13px;background:#f7f4f2;border:1px solid #eee8e7;border-radius:20px;box-shadow:0 2px 12px #42314704}
.composer textarea{resize:none;border:none;outline:none;background:transparent;line-height:1.5;flex:1;min-width:0;max-height:120px;min-height:29px;font-size:13px;padding:7px 0;color:#38313f}
.composer textarea::placeholder{color:#b6afb4}
.composer .icon-btn{height:36px;width:36px;flex:none}
.send-btn{background:var(--primary);border:0;color:#fff;width:38px;height:38px;display:grid;place-items:center;border-radius:13px;transition:transform .2s,background .2s;flex:none}
.send-btn:hover{background:#5949ab;transform:translateY(-1px)}
.send-btn svg{width:17px;height:17px}
.composer-hint{display:flex;justify-content:space-between;align-items:center;padding:9px 8px 0;color:#b5adb3;font-size:10px}
.privacy-mark{display:flex;align-items:center;gap:5px}
.privacy-mark svg{height:12px;width:12px}
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:35px;text-align:center}
.empty .intro-icon{height:90px;width:90px;background:linear-gradient(135deg,#eadcf5,#fce5d1);display:grid;place-items:center;border-radius:32px;color:var(--primary);font-size:45px;transform:rotate(-8deg);box-shadow:0 15px 32px #bd9acb25}
.empty h1{font-size:35px;line-height:1.15;letter-spacing:-1.6px;max-width:400px;margin:30px 0 10px}
.empty p{color:#a099a1;font-size:14px;line-height:1.8;max-width:340px}
.primary{background:var(--primary);color:#fff;border:0;border-radius:13px;padding:13px 19px;font-size:13px;font-weight:700;box-shadow:0 9px 20px #7764b728;transition:transform .2s,background .2s}
.primary:hover{background:#5748a8;transform:translateY(-1px)}
.secondary{background:#f2ecf7;color:#6655a3;border:0;border-radius:13px;padding:13px 19px;font-size:13px;font-weight:750}
.empty .primary{margin-top:20px}
.modal-cover{position:fixed;z-index:30;inset:0;background:#29212c83;backdrop-filter:blur(7px);display:grid;place-items:center;padding:18px}
.modal{background:#fffdfa;width:min(460px,100%);border-radius:25px;padding:28px;box-shadow:0 25px 80px #251d3c55;max-height:90dvh;overflow-y:auto}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:23px}
.modal h2{font-size:23px;letter-spacing:-.7px;margin:0 0 7px}
.modal p{font-size:12px;line-height:1.7;color:#9d959f;margin:0}
.field-label{display:block;font-size:12px;font-weight:700;margin-bottom:9px;color:#605866}
.field-input{width:100%;background:#faf7f6;border:1px solid #eae2e4;min-height:48px;border-radius:13px;padding:0 14px;font-size:13px;margin-bottom:17px;outline:none}
.field-input:focus{border-color:#a89ad9}
.modal .primary{width:100%;margin-top:8px}
.member-select{display:flex;flex-direction:column;gap:7px;margin-bottom:16px;max-height:210px;overflow-y:auto}
.member-check{display:flex;align-items:center;gap:10px;border-radius:12px;padding:9px 10px;background:#f8f5f5;cursor:pointer;font-size:13px}
.member-check input{accent-color:var(--primary);margin-left:auto;order:2}
.member-check .avatar{width:32px;height:32px;font-size:11px;border-radius:11px}
.invitation{font-size:12px;color:#645575;background:#f5effe;padding:15px;border-radius:13px;word-break:break-all;line-height:1.8;margin:14px 0}
.auth-layout{background:radial-gradient(ellipse at 20% 20%,#fce6d6,transparent 45%),radial-gradient(ellipse at 80% 90%,#e4daf9,transparent 50%),#f4f0ec;min-height:100%;width:100%;display:flex;justify-content:center;align-items:center;padding:25px}
.auth-card{width:min(470px,100%);background:#fffdfb;padding:37px;border-radius:29px;box-shadow:0 28px 80px #54435726}
.auth-card .brand{margin-bottom:50px}
.auth-card h1{font-size:37px;letter-spacing:-1.8px;line-height:1.14;margin:0 0 14px}
.auth-card .lead{font-size:13px;color:#9d959f;line-height:1.75;margin:0 0 34px;max-width:350px}
.auth-card .primary{width:100%;margin-top:7px}
.auth-foot{color:#bbb1bb;font-size:11px;text-align:center;line-height:1.65;margin-top:24px}
.auth-tag{display:inline-flex;align-items:center;gap:7px;color:#7868b7;background:#f3effb;border-radius:20px;padding:8px 12px;font-size:11px;font-weight:700;margin-bottom:14px}
.auth-tag svg{width:14px;height:14px}
.link-btn{border:0;background:none;color:var(--primary);font-size:12px;font-weight:750;padding:10px 0}
.toast{position:fixed;z-index:60;bottom:28px;left:50%;transform:translate(-50%,30px);opacity:0;pointer-events:none;background:#292331;color:#fff;padding:13px 19px;border-radius:14px;font-size:12px;box-shadow:0 14px 30px #382d4140;transition:opacity .2s,transform .2s;white-space:normal;max-width:min(480px,90vw);text-align:center}
.toast.visible{opacity:1;transform:translate(-50%,0)}
.demo-pill{background:#e8e2f2;color:#7768a9;font-size:10px;font-weight:800;letter-spacing:.06em;border-radius:10px;padding:6px 9px;margin-left:12px}
.loading-brand{font-size:35px;font-weight:800;display:flex;align-items:center;gap:10px;letter-spacing:-2px}
.mobile-only{display:none}
@media(min-width:1100px){.workspace{grid-template-columns:372px minmax(0,1fr)}.side-head{padding-top:35px}}
@media(max-width:700px){.app{height:100dvh;min-height:0;padding:0}.workspace{min-height:0;height:100%;border-radius:0;border:0;box-shadow:none;display:block;position:relative}.sidebar{position:absolute;inset:0;width:100%;border:0;z-index:2}.main{position:absolute;inset:0;z-index:3;display:none}.workspace.room-open .main{display:flex}.workspace.room-open .sidebar{display:none}.side-head{padding:28px 22px 12px}.section-label{padding:22px 25px 12px}.side-caption{padding-left:26px}.people{padding-left:20px}.chats{padding:0 10px 12px}.chat-item{padding:14px 12px}.search-wrap{margin-top:18px}.main-header{height:75px;min-height:75px;padding:0 15px;gap:10px}.back-btn{display:flex}.header-actions{gap:2px}.header-actions .hide-mobile{display:none}.chat-wall{padding:23px 17px}.composer-area{padding:11px 13px max(16px,env(safe-area-inset-bottom))}.composer-hint{font-size:9px}.msg-row{max-width:94%}.empty h1{font-size:30px}.mobile-only{display:flex}.brand{font-size:29px}}
@media(max-width:400px){.auth-card{padding:28px 22px}.modal{padding:22px}.chat-wall{padding:16px 10px}.composer-area{padding-left:10px;padding-right:10px}.chat-name{font-size:12px}.side-head{padding-top:23px}}