:root{color-scheme:light;--ink:#211d27;--muted:#77717f;--outline:#e9e3ed;--surface:#fff;--base:#f7f4fa;--primary:#6750a4;--primary-dark:#51398f;--lavender:#eee7f8;--shadow:0 1px 2px #281d3310,0 8px 30px #281d3308;font-family:'DM Sans',system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--base);color:var(--ink);font-size:14px}.app-shell{height:100dvh;min-height:540px;display:flex;padding:14px;gap:12px;max-width:1680px;margin:auto}.rail{width:64px;flex:none;background:#eee8f5;border:1px solid #e7dfed;border-radius:23px;display:flex;align-items:center;flex-direction:column;padding:13px 0;gap:13px}.brand-mark{font:800 30px 'Manrope',sans-serif;letter-spacing:-4px;color:var(--primary);text-decoration:none;height:48px;display:grid;place-items:center;padding-right:4px}.brand-mark span{color:#d2828f}.rail-button,.icon-button,.attach-button,.emoji-button,.send-button{border:0;cursor:pointer;display:grid;place-items:center;color:#625c69;background:transparent}.rail-button{width:44px;height:44px;border-radius:16px}.rail-button.active{background:#dcd0ed;color:var(--primary)}svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.rail-spacer{flex:1}.avatar{position:relative;display:grid;place-items:center;width:42px;height:42px;border-radius:16px;font:700 15px 'Manrope',sans-serif;flex:none}.self-avatar{border:0;background:#44334b;color:#fff;border-radius:15px;cursor:pointer}.coral{background:#f7dce0;color:#883f52}.blue{background:#d9e8f5;color:#3d668a}.green{background:#d8ebdf;color:#427052}.plum{background:#e9ddf1;color:#704987}.gold{background:#f2e5cb;color:#816331}.presence{position:absolute;width:11px;height:11px;border-radius:50%;background:#58a778;border:2px solid #fff;right:-1px;bottom:0}.sidebar{width:332px;flex:none;background:var(--surface);border:1px solid #eee9f0;border-radius:23px;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow)}.sidebar-header{height:82px;padding:0 21px;display:flex;align-items:center;justify-content:space-between}.eyebrow,.section-label{font-size:10px;letter-spacing:.1em;font-weight:700;color:#948d9b;margin:0 0 4px}.sidebar-header h1{font:700 22px 'Manrope',sans-serif;letter-spacing:-.04em;margin:0}.icon-button{width:40px;height:40px;border-radius:14px}.icon-button:hover,.attach-button:hover,.emoji-button:hover{background:#f2eef6;color:var(--primary)}.icon-button.filled{background:var(--primary);color:#fff;box-shadow:0 3px 9px #6750a444}.icon-button.filled:hover,.send-button:hover{background:var(--primary-dark)}.search-box{height:43px;margin:3px 17px 25px;border:1px solid #efebf1;background:#f9f7fa;border-radius:14px;display:flex;align-items:center;gap:10px;padding:0 12px;color:#8c8491}.search-box svg{width:18px;height:18px}.search-box input{min-width:0;flex:1;border:0;outline:0;background:none;font:500 13px 'DM Sans',sans-serif;color:var(--ink)}.search-box input::placeholder{color:#99929f}.section-label{padding:0 20px 9px;display:flex;align-items:center;justify-content:space-between}.text-button{border:0;background:none;color:var(--primary);font:600 11px 'DM Sans',sans-serif;cursor:pointer}.chat-list{overflow:auto;padding:0 9px}.chat-item{position:relative;width:100%;border:0;background:transparent;display:flex;gap:12px;text-align:left;align-items:center;padding:10px;border-radius:17px;cursor:pointer;color:inherit}.chat-item:hover{background:#faf8fb}.chat-item.selected{background:#f1ebf8}.chat-copy{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}.chat-copy strong{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-copy>span{font-size:11px;color:#817a87;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-item time{align-self:flex-start;padding-top:3px;font-size:10px;color:#958d99}.group-count{font:600 9px 'DM Sans',sans-serif;font-style:normal;background:#ece7ef;border-radius:7px;padding:2px 5px;color:#797180;vertical-align:1px;margin-left:2px}.sidebar-bottom{margin-top:auto;padding:13px}.security-note{height:60px;border:1px solid #eee8f2;border-radius:16px;background:#fcfafd;display:flex;align-items:center;padding:0 11px;gap:10px}.lock-icon{width:33px;height:33px;border-radius:12px;background:#eee8f7;display:grid;place-items:center;color:var(--primary)}.lock-icon svg{width:17px}.security-note>span:nth-child(2){display:grid;gap:3px}.security-note strong{font-size:11px}.security-note small{font-size:10px;color:#89818f}.soon-pill{margin-left:auto;color:#76619e;font-size:8px;letter-spacing:.08em;font-weight:700;background:#f0eaf7;border-radius:7px;padding:5px}.conversation{min-width:0;flex:1;background:var(--surface);border:1px solid #eee9f0;border-radius:23px;box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden}.conversation-header{height:76px;flex:none;border-bottom:1px solid #f0ecf2;display:flex;align-items:center;padding:0 24px;gap:12px}.header-avatar{width:40px;height:40px}.contact-heading{display:flex;flex-direction:column;gap:4px}.contact-heading strong{font:700 14px 'Manrope',sans-serif}.contact-heading>span{color:#8c8591;font-size:10px}.status-dot{display:inline-block;width:7px;height:7px;background:#58a778;border-radius:50%;margin-right:3px}.header-actions{margin-left:auto;display:flex;align-items:center;gap:3px}.header-divider{width:1px;height:22px;background:var(--outline);margin:0 7px}.mobile-back{display:none}.message-area{flex:1;overflow:auto;padding:25px clamp(18px,4vw,58px);display:flex;flex-direction:column;align-items:stretch}.day-divider{display:flex;align-items:center;gap:12px;color:#a29aa7;font-size:9px;letter-spacing:.11em;font-weight:700;margin:2px 0 21px}.day-divider:before,.day-divider:after{content:'';height:1px;background:#f0ecf2;flex:1}.encryption-banner{align-self:center;border:1px solid #eee8f3;border-radius:14px;background:#fcfafd;padding:10px 14px;display:flex;align-items:center;gap:9px;color:#77707f;font-size:10px;line-height:1.55;text-align:center;margin:0 0 35px}.encryption-banner strong{color:#735d98;font-weight:600}.banner-lock{color:#806aa4}.banner-lock svg{width:17px;height:17px;vertical-align:middle}.message-row{display:flex;align-items:flex-end;gap:8px;margin:0 0 20px}.message-row.outgoing{justify-content:flex-end}.tiny{width:27px;height:27px;border-radius:10px;font-size:10px;margin-bottom:19px}.message-content{display:flex;flex-direction:column;max-width:min(72%,520px);align-items:flex-start}.outgoing .message-content{align-items:flex-end}.message-author{font-size:10px;font-weight:700;color:#756d7b;margin:0 0 5px 3px}.bubble{font-size:13px;line-height:1.5;padding:11px 14px;border-radius:5px 17px 17px 17px;background:#f3f0f5;color:#35303a}.outgoing .bubble{background:#ece5f5;border-radius:17px 5px 17px 17px}.message-content time{margin:5px 4px 0;font-size:9px;color:#a099a5}.read-check{color:#7b65a3;font-weight:700}.reaction-chip{border:1px solid #e9e1ef;background:#fff;border-radius:12px;padding:4px 8px;margin:7px 0 0 2px;color:#706779;font:500 10px 'DM Sans',sans-serif}.typing-indicator{display:flex;align-items:center;gap:8px;margin-top:auto}.typing-indicator[hidden]{display:none}.typing-dots{display:flex;gap:3px;padding:10px 12px;background:#f3f0f5;border-radius:14px}.typing-dots i{width:4px;height:4px;border-radius:50%;background:#9588a2;animation:bounce 1s infinite alternate}.typing-dots i:nth-child(2){animation-delay:.2s}.typing-dots i:nth-child(3){animation-delay:.4s}.typing-indicator small{color:#98909c;font-size:10px}@keyframes bounce{to{transform:translateY(-3px);opacity:.45}}.composer{margin:0 26px;height:54px;flex:none;border:1px solid #e9e3ed;background:#fcfbfd;border-radius:18px;display:flex;align-items:center;padding:0 7px 0 4px;gap:4px}.composer:focus-within{border-color:#bca9d5;box-shadow:0 0 0 3px #eee7f6}.attach-button,.emoji-button{width:40px;height:40px;border-radius:14px;flex:none}.attach-button svg{width:19px}.emoji-button{font-size:23px;font-weight:400;color:#77717d}.composer input{flex:1;min-width:0;border:0;outline:0;background:transparent;padding:0 6px;color:var(--ink);font:13px 'DM Sans',sans-serif}.composer input::placeholder{color:#99929e}.send-button{width:39px;height:39px;border-radius:14px;background:var(--primary);color:#fff;flex:none}.send-button svg{width:18px}.composer-hint{margin:8px 29px 12px;text-align:center;font-size:9px;color:#a29aa6}.composer-hint span{padding:0 4px;color:#c2bbc6}.mobile-scrim{display:none}
@media(max-width:900px){.app-shell{padding:9px;gap:8px}.rail{width:54px;border-radius:20px}.sidebar{width:285px}.conversation-header{padding:0 18px}.message-area{padding:22px 24px}}
@media(max-width:650px){body{background:#fff}.app-shell{height:100dvh;min-height:0;padding:0;gap:0;overflow:hidden}.rail{display:none}.sidebar{position:fixed;z-index:5;inset:0;width:min(88vw,360px);height:100dvh;border:0;border-radius:0 24px 24px 0;box-shadow:8px 0 40px #231a3022;transform:translateX(-105%);transition:transform .26s cubic-bezier(.2,.8,.2,1)}.sidebar.mobile-open{transform:translateX(0)}.sidebar-header{height:85px;padding:0 22px}.conversation{height:100dvh;border:0;border-radius:0;box-shadow:none}.conversation-header{height:68px;padding:0 13px;gap:9px;border-bottom:1px solid #f0ecf2}.mobile-back{display:grid;width:35px;height:38px;margin-left:-5px}.header-avatar{width:37px;height:37px;border-radius:14px}.contact-heading strong{font-size:13px}.header-actions{gap:0}.header-actions .icon-button{width:36px;height:38px}.header-divider{margin:0 4px}.message-area{padding:20px 15px}.encryption-banner{font-size:9px;padding:9px 10px;margin-bottom:28px}.message-content{max-width:82%}.composer{margin:0 10px;height:52px;border-radius:17px}.composer-hint{margin-bottom:max(10px,env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom)}.mobile-scrim.visible{display:block;position:fixed;z-index:4;inset:0;background:#1e172455;backdrop-filter:blur(2px)}.sidebar-bottom{padding-bottom:max(13px,env(safe-area-inset-bottom))}}
@media(max-width:380px){.header-actions .icon-button{width:33px}.header-divider{display:none}.emoji-button{width:34px}.composer{gap:0}.send-button{width:36px;height:36px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}