*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#020805;color:#eef5f0;font-family:Inter,"Segoe UI",Arial,sans-serif;font-size:14px}
button,input,textarea{font:inherit;color:inherit}
button{border:0;cursor:pointer}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hidden{display:none!important}
.splash{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;gap:14px;background:#020805;animation:splashOut 350ms ease 1050ms forwards}
.splash-mark,.auth-logo,.brand-symbol{display:grid;place-items:center;background:#21e47b;color:#01180b;font-weight:900}
.splash-mark{width:56px;height:56px;border-radius:17px;font-size:31px;box-shadow:0 0 32px rgba(33,228,123,.24);animation:pulse 1100ms ease infinite}
.splash-name{font-size:26px;font-weight:800;letter-spacing:-1px}
@keyframes pulse{50%{transform:scale(1.05);box-shadow:0 0 45px rgba(33,228,123,.36)}}
@keyframes splashOut{to{opacity:0;visibility:hidden;transform:scale(1.03)}}
.auth{position:fixed;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 28%,#0c2618 0,#04110a 280px,#020805 620px)}
.auth-card{position:relative;width:400px;padding:35px;border:1px solid #173b28;border-radius:14px;background:#06110b;box-shadow:0 25px 80px rgba(0,0,0,.55)}
.compact-card{text-align:center}
.auth-logo{width:48px;height:48px;margin:0 auto 24px;border-radius:14px;font-size:25px}
.auth h1{margin:0 0 9px;font-size:28px;line-height:34px;letter-spacing:-.8px}.auth h1 span{color:#21e47b}.auth p{margin:0 0 28px;color:#819087;text-align:center}
.auth label{display:block;margin:0 0 17px;color:#a9b6ae;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px}.auth input{width:100%;height:44px;margin-top:7px;padding:0 13px;border:1px solid #1a3324;border-radius:7px;outline:0;background:#030a06;transition:border-color 140ms,box-shadow 140ms}.auth input:focus{border-color:#21e47b;box-shadow:0 0 0 3px rgba(33,228,123,.1)}
.password-field{position:relative;display:block}.password-field input{padding-right:45px}.password-field button{position:absolute;right:5px;bottom:5px;width:34px;height:34px;border-radius:6px;background:transparent;color:#7d8c82;font-size:20px}.password-field button:hover{background:#102319;color:#21e47b}
.primary-button{width:100%;height:44px;margin-top:4px;border-radius:7px;background:#21e47b;color:#01200e;font-weight:800;transition:transform 110ms,filter 110ms}.primary-button:hover{filter:brightness(1.08)}.primary-button:active{transform:scale(.985)}.form-error{min-height:20px;color:#ff6c78;font-size:12px}.code-input{text-align:center;font-size:25px!important;letter-spacing:9px}.back-button{position:absolute;left:18px;top:18px;width:32px;height:32px;border-radius:7px;background:#0d2015;color:#9aaba0}
.app{width:100%;height:100%;display:flex;background:#020805}
.sidebar{position:relative;z-index:5;width:270px;min-width:270px;height:100%;display:flex;flex-direction:column;border-right:1px solid #102419;background:#050d08}
.sidebar-header{height:58px;min-height:58px;display:flex;align-items:center;gap:8px;padding:0 12px;border-bottom:1px solid #102419}
.brand-button{height:38px;display:flex;align-items:center;gap:10px;padding:0 8px;background:transparent;font-size:16px;font-weight:800}.brand-button svg{width:16px}.brand-symbol{width:29px;height:29px;border-radius:8px;font-size:16px}
.icon-button{width:34px;height:34px;display:grid;place-items:center;border-radius:7px;background:transparent;color:#809087;transition:background 120ms,color 120ms,transform 90ms}.icon-button:hover{background:#102319;color:#eef5f0}.icon-button:active{transform:scale(.91)}.icon-button.bright{margin-left:auto;background:#123a24;color:#21e47b}.icon-button.bright:hover{background:#18502f}
.search-wrap{position:relative;height:36px;min-height:36px;margin:10px 12px 8px}.search-wrap>svg{position:absolute;left:10px;top:9px;width:17px;height:17px;color:#647168}.search-wrap input{width:100%;height:36px;padding:0 52px 0 34px;border:1px solid #132a1d;border-radius:7px;outline:0;background:#08140d;color:#dce7df}.search-wrap input:focus{border-color:#247d4b}.search-wrap kbd{position:absolute;right:8px;top:8px;padding:2px 5px;border:1px solid #24382c;border-radius:4px;color:#59665e;background:#06100a;font-size:9px}
.search-results{position:absolute;z-index:20;top:103px;left:12px;right:12px;max-height:300px;overflow:auto;padding:5px;border:1px solid #1b5132;border-radius:8px;background:#06110b;box-shadow:0 18px 40px rgba(0,0,0,.6);animation:menuIn 130ms ease}
.quick-nav{padding:0 8px 8px;border-bottom:1px solid #102419}.nav-row{width:100%;height:37px;display:flex;align-items:center;gap:10px;padding:0 10px;border-radius:6px;background:transparent;color:#7d8c82;text-align:left}.nav-row svg{width:18px}.nav-row span{flex:1}.nav-row b{min-width:20px;padding:2px 6px;border-radius:9px;background:#143322;color:#21e47b;font-size:10px;text-align:center}.nav-row:hover{background:#0a1910;color:#dce7df}.nav-row.active{background:#102319;color:#eef5f0}
.list-label{height:35px;display:flex;align-items:center;padding:0 14px;color:#58665d;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.7px}.list-label span{flex:1}.list-label button{padding:4px;background:transparent;color:#58665d;font-size:10px;text-transform:none}
.chat-list{flex:1;overflow-y:auto;padding:0 6px 8px;scrollbar-width:thin;scrollbar-color:#173523 transparent}
.chat-item,.person-result{position:relative;width:100%;display:flex;align-items:center;gap:10px;padding:8px;border-radius:7px;background:transparent;text-align:left;transition:background 120ms,transform 90ms}.chat-item{height:59px}.chat-item:hover,.person-result:hover{background:#0b1a11}.chat-item:active,.person-result:active{transform:scale(.987)}.chat-item.active{background:#102319}.chat-item.active:before{content:"";position:absolute;left:-6px;top:13px;width:3px;height:33px;border-radius:0 3px 3px 0;background:#21e47b}.chat-copy,.person-copy{min-width:0;flex:1}.chat-line{display:flex;align-items:center;gap:7px}.chat-line b{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.chat-line time{color:#647168;font-size:9px}.chat-preview{display:flex;align-items:center;margin-top:5px}.chat-preview span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#76847b;font-size:11px}.unread{min-width:18px;height:18px;padding:0 5px;display:grid;place-items:center;border-radius:9px;background:#21e47b;color:#01200e;font-size:9px;font-weight:900}
.avatar{width:38px;height:38px;min-width:38px;display:grid;place-items:center;overflow:hidden;border-radius:11px;background:#153a25;color:#74f4a9;font-weight:850;background-position:center;background-size:cover}.small-avatar{width:32px;height:32px;min-width:32px;border-radius:9px}.avatar.has-image{color:transparent}
.user-bar{height:58px;min-height:58px;display:flex;align-items:center;padding:0 9px;border-top:1px solid #102419;background:#030a06}.self{min-width:0;flex:1;display:flex;align-items:center;gap:8px;padding:4px;border-radius:7px;background:transparent;text-align:left}.self:hover{background:#0c1b12}.self span:last-child{min-width:0}.self b{display:block;max-width:105px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.self small,.peer-button small{display:flex;align-items:center;gap:5px;margin-top:2px;color:#6f7d74;font-size:9px}.self i,.peer-button i{width:6px;height:6px;border-radius:3px;background:#21e47b;box-shadow:0 0 7px rgba(33,228,123,.7)}.user-actions{display:flex}
.empty-view{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#020805;color:#728078}.empty-view h2{margin:20px 0 7px;color:#dce7df;font-size:18px}.empty-view p{margin:0;font-size:12px}.empty-orbit{position:relative;width:82px;height:82px;display:grid;place-items:center;border:1px solid #18402a;border-radius:25px;transform:rotate(9deg)}.empty-orbit span{position:absolute;width:100px;height:40px;border:1px solid #1d6840;border-radius:50%;transform:rotate(-35deg)}.empty-orbit b{font-size:29px;color:#21e47b;transform:rotate(-9deg)}
.chat-view{position:relative;min-width:0;flex:1;display:flex;flex-direction:column;background:#030a06;animation:viewIn 180ms ease}.chat-header{height:58px;min-height:58px;display:flex;align-items:center;padding:0 13px;border-bottom:1px solid #102419;background:#06110b}.peer-button{min-width:0;display:flex;align-items:center;gap:10px;background:transparent;text-align:left}.peer-button b{display:block;max-width:290px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.chat-actions{display:flex;gap:2px;margin-left:auto}.mobile-back{display:none}
.messages{flex:1;overflow-y:auto;padding:22px 24px 14px;scrollbar-width:thin;scrollbar-color:#173523 transparent}.day-divider{display:flex;align-items:center;gap:12px;margin:6px 0 19px;color:#4e5b53;font-size:9px;font-weight:700}.day-divider:before,.day-divider:after{content:"";height:1px;flex:1;background:#102419}
.message{position:relative;display:grid;grid-template-columns:39px minmax(0,1fr);column-gap:11px;margin:0 0 2px;padding:4px 8px;border-radius:5px;animation:messageIn 150ms ease}.message:hover{background:#06130c}.message .avatar{grid-row:1/4;margin-top:2px}.message-head{display:flex;align-items:baseline;gap:7px;min-width:0}.message-head b{color:#21e47b;font-size:12px}.message-head time{color:#526057;font-size:9px}.message-body{max-width:760px;padding:3px 0 7px;color:#d8e2dc;font-size:13px;line-height:18px;white-space:pre-wrap;overflow-wrap:anywhere}.message.mine .message-head b{color:#78f5ab}.message.repeated{grid-template-columns:39px minmax(0,1fr);padding-top:1px}.message.repeated .avatar,.message.repeated .message-head{visibility:hidden;height:0}.message:hover .message-hover{opacity:1;transform:translateY(0)}.message-hover{position:absolute;right:8px;top:-15px;display:flex;padding:2px;border:1px solid #173523;border-radius:6px;background:#08140d;opacity:0;transform:translateY(3px);transition:opacity 100ms,transform 100ms}.message-hover button{width:27px;height:25px;border-radius:4px;background:transparent;color:#76847b;font-size:12px}.message-hover button:hover{background:#143120;color:#eef5f0}.message-media{display:block;max-width:420px;max-height:310px;margin:4px 0 8px;border-radius:10px;object-fit:contain;background:#010402}.file-card{max-width:400px;display:flex;align-items:center;gap:10px;margin:4px 0 8px;padding:10px;border:1px solid #153222;border-radius:7px;background:#08140d}.file-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:7px;background:#123a24;color:#21e47b}.file-card a{color:#dce7df;text-decoration:none}.reactions{display:flex;gap:4px;margin:0 0 7px}.reaction{padding:2px 7px;border:1px solid #174229;border-radius:9px;background:#0a1b11;color:#c8d5cd;font-size:11px}
.typing{height:22px;display:flex;align-items:center;gap:3px;padding:0 24px;color:#6d7a72;font-size:9px}.typing span{width:4px;height:4px;border-radius:2px;background:#21e47b;animation:typing 900ms infinite}.typing span:nth-child(2){animation-delay:150ms}.typing span:nth-child(3){animation-delay:300ms}.typing b{margin-left:4px;font-weight:500}
.composer{min-height:64px;display:flex;align-items:flex-end;gap:7px;padding:10px 15px 12px;border-top:1px solid #102419;background:#040c07}.composer textarea{min-height:39px;max-height:112px;flex:1;resize:none;padding:10px 13px;border:1px solid #183523;border-radius:8px;outline:0;background:#08140d;color:#e7eee9;line-height:18px}.composer textarea:focus{border-color:#226b42}.composer-button,.send-button{width:39px;height:39px;min-width:39px;display:grid;place-items:center;border-radius:8px;background:#0c1d13;color:#78867d;transition:background 110ms,color 110ms,transform 90ms}.composer-button:hover{background:#123020;color:#dce7df}.send-button{background:#1edb74;color:#01200e}.send-button:hover{background:#36ee89}.composer-button:active,.send-button:active{transform:scale(.9)}
.attachment-menu,.emoji-menu,.context-menu{position:absolute;z-index:30;padding:5px;border:1px solid #1a5735;border-radius:7px;background:#06110b;box-shadow:0 16px 38px rgba(0,0,0,.62);animation:menuIn 130ms ease}.attachment-menu{left:14px;bottom:65px;width:178px}.attachment-menu button{width:100%;height:37px;display:flex;align-items:center;gap:10px;padding:0 9px;border-radius:5px;background:transparent;color:#aebcb3;text-align:left}.attachment-menu button:hover{outline:1px solid #e7eee9;background:#102319;color:#fff}.emoji-menu{right:57px;bottom:65px;width:238px;display:grid;grid-template-columns:repeat(7,29px);gap:3px}.emoji-menu button{width:29px;height:29px;border-radius:5px;background:transparent;font-size:17px}.emoji-menu button:hover{background:#143120;transform:scale(1.12)}
.message-search{height:43px;display:flex;align-items:center;gap:7px;padding:6px 13px;border-bottom:1px solid #102419;background:#050f09;animation:slideDown 130ms ease}.message-search input{height:30px;flex:1;padding:0 10px;border:1px solid #1a3a27;border-radius:6px;outline:0;background:#020805}.message-search button{width:28px;height:28px;border-radius:5px;background:#0d2116;color:#7d8c82}
.profile-pane{width:220px;min-width:220px;border-left:1px solid #102419;background:#050d08;animation:panelIn 180ms ease}.profile-pane header{height:58px;display:flex;align-items:center;padding:0 13px;border-bottom:1px solid #102419}.profile-pane header b{flex:1}.profile-avatar{width:72px;height:72px;margin:25px auto 12px;border-radius:20px;font-size:24px}.profile-pane h2{margin:0;text-align:center;font-size:17px}.profile-pane>p{margin:4px 0 24px;color:#21e47b;text-align:center;font-size:11px}.profile-note{margin:0 13px 17px;padding-top:13px;border-top:1px solid #14281c}.profile-note span{color:#5d6b62;font-size:9px;font-weight:800;text-transform:uppercase}.profile-note p{color:#a7b3ab;font-size:11px;line-height:17px}.pane-button{width:calc(100% - 26px);height:36px;margin:0 13px 6px;border-radius:6px;background:#0c1d13;color:#b8c4bc;font-size:11px;text-align:left;padding:0 11px}.pane-button:hover{background:#123020;color:#fff}
.settings-view{position:absolute;z-index:12;inset:0;display:flex;background:#020805;animation:viewIn 180ms ease}.settings-nav{width:270px;min-width:270px;padding:28px 14px;border-right:1px solid #102419;background:#050d08}.settings-back{height:34px;margin-bottom:22px;padding:0 10px;border-radius:6px;background:#0c1d13;color:#8d9a91}.settings-nav h3{margin:0 10px 18px;font-size:17px}.settings-item{width:100%;height:39px;margin-bottom:3px;padding:0 11px;border-radius:6px;background:transparent;color:#7d8c82;text-align:left}.settings-item:hover,.settings-item.active{background:#102319;color:#eef5f0}.settings-item.danger{margin-top:16px;color:#ff6975}.settings-content{flex:1;overflow:auto;padding:58px 68px}.settings-page{max-width:760px;animation:viewIn 170ms ease}.eyebrow{color:#21e47b;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1px}.settings-page h1{margin:7px 0 28px;font-size:25px}.account-card{height:128px;display:flex;align-items:center;gap:20px;padding:20px;border:1px solid #163624;border-radius:10px;background:#07130c}.account-card .profile-avatar{margin:0}.account-card h2{margin:0 0 5px}.account-card p{margin:0;color:#21e47b}.setting-row{min-height:65px;display:flex;align-items:center;padding:12px 2px;border-bottom:1px solid #102419}.setting-row span{flex:1}.setting-row b,.setting-row small{display:block}.setting-row b{font-size:12px}.setting-row small{margin-top:5px;color:#6e7c73;font-size:10px}.setting-row button{height:31px;padding:0 12px;border-radius:6px;background:#112a1b;color:#9feabd;font-size:10px}.switch{position:relative;width:35px;height:19px;border-radius:10px;background:#17231b}.switch:after{content:"";position:absolute;top:3px;left:3px;width:13px;height:13px;border-radius:7px;background:#77847b;transition:left 130ms}.switch.on{background:#145b34}.switch.on:after{left:19px;background:#21e47b}.appearance-preview{height:160px;margin-bottom:18px;padding:22px;border:1px solid #153523;border-radius:10px;background:#06110b}.appearance-preview div{width:48px;height:48px;border-radius:13px;background:#153a25}.appearance-preview span{display:block;width:210px;height:12px;margin:9px 0 0 62px;border-radius:3px;background:#12271a}.appearance-preview span:last-child{width:145px;background:#0d1c13}
.context-menu{position:fixed;min-width:165px}.context-menu button{width:100%;height:34px;display:block;padding:0 9px;border-radius:5px;background:transparent;color:#a8b5ac;text-align:left;font-size:11px}.context-menu button:hover{background:#123020;color:#fff}.context-menu button.danger{color:#ff6975}
.dialog-layer{position:fixed;z-index:80;inset:0;display:grid;place-items:center;background:rgba(0,6,3,.72);backdrop-filter:blur(4px);animation:fadeIn 130ms ease}.dialog{width:370px;padding:21px;border:1px solid #1c5736;border-radius:10px;background:#06110b;box-shadow:0 25px 80px rgba(0,0,0,.7);animation:dialogIn 160ms ease}.dialog h2{margin:0 0 8px;font-size:18px}.dialog p{margin:0 0 18px;color:#7c8a81;line-height:18px}.dialog input{width:100%;height:39px;margin:0 0 12px;padding:0 11px;border:1px solid #1c3b28;border-radius:6px;outline:0;background:#020805}.dialog-actions{display:flex;justify-content:flex-end;gap:7px;margin-top:12px}.dialog-actions button{height:34px;padding:0 14px;border-radius:6px;background:#102319}.dialog-actions button.primary{background:#21e47b;color:#01200e}.dialog-actions button.danger{background:#47151b;color:#ff9aa3}
.toast{position:fixed;z-index:100;left:50%;bottom:24px;max-width:420px;padding:10px 14px;border:1px solid #1c5736;border-radius:7px;background:#07160d;color:#dce7df;box-shadow:0 12px 35px rgba(0,0,0,.55);font-size:11px;transform:translateX(-50%);animation:toastIn 160ms ease}
@keyframes viewIn{from{opacity:0;transform:translateX(6px)}to{opacity:1;transform:none}}@keyframes panelIn{from{opacity:0;width:0;min-width:0}to{opacity:1;width:220px;min-width:220px}}@keyframes messageIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@keyframes menuIn{from{opacity:0;transform:translateY(4px) scale(.98)}to{opacity:1;transform:none}}@keyframes dialogIn{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes slideDown{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}@keyframes toastIn{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}@keyframes typing{50%{transform:translateY(-3px);opacity:.45}}
@media(max-width:820px){.sidebar{width:240px;min-width:240px}.profile-pane{position:absolute;right:0;top:0;bottom:0;z-index:8;box-shadow:-20px 0 45px rgba(0,0,0,.5)}.settings-content{padding:45px 28px}}
@media(max-width:620px){.sidebar{width:100%;min-width:100%}.app.chat-open .sidebar{display:none}.empty-view{display:none}.chat-view{width:100%}.mobile-back{display:grid}.settings-nav{width:190px;min-width:190px}.settings-content{padding:35px 18px}.chat-actions .icon-button:nth-child(-n+2){display:none}}

/* Motion language from the reference: quick lift, glow and springy press. */
button{position:relative;overflow:hidden;isolation:isolate;transition:transform 160ms cubic-bezier(.2,.8,.2,1),background-color 160ms ease,color 160ms ease,border-color 160ms ease,box-shadow 160ms ease,filter 160ms ease}
button:hover{transform:translateY(-2px)}
button:active,.is-pressed{transform:translateY(1px) scale(.94)!important;filter:brightness(1.18)}
.press-ripple{position:absolute;z-index:0;width:12px;height:12px;border-radius:999px;pointer-events:none;background:rgba(255,255,255,.2);transform:translate(-50%,-50%) scale(0);animation:pressRipple 520ms cubic-bezier(.2,.7,.2,1) forwards}
button>*:not(.press-ripple){position:relative;z-index:1}
.brand-button:hover{color:#ffffff;text-shadow:0 0 15px rgba(33,228,123,.32)}
.brand-button:hover .brand-symbol{transform:rotate(-7deg) scale(1.08);box-shadow:0 0 18px rgba(33,228,123,.32)}
.brand-symbol{transition:transform 180ms cubic-bezier(.2,.9,.3,1.35),box-shadow 180ms ease}
.icon-button:hover{transform:translateY(-2px) scale(1.08);box-shadow:0 7px 18px rgba(0,0,0,.28)}
#settings-button:hover svg{transform:rotate(32deg)}
.icon-button svg{transition:transform 210ms cubic-bezier(.2,.8,.2,1),stroke 150ms ease}
.icon-button.bright:hover{box-shadow:0 0 20px rgba(33,228,123,.2)}
.search-wrap{transition:transform 180ms cubic-bezier(.2,.8,.2,1),filter 180ms ease}
.search-wrap:focus-within{transform:translateY(-1px) scale(1.01);filter:drop-shadow(0 7px 14px rgba(0,0,0,.28))}
.search-wrap:focus-within>svg{color:#21e47b;transform:scale(1.12)}
.search-wrap>svg{transition:color 150ms ease,transform 150ms ease}
.nav-row:hover{transform:translateX(4px);box-shadow:inset 3px 0 #21e47b}
.nav-row.active{animation:selectedNav 260ms cubic-bezier(.2,.9,.3,1.25)}
.chat-list{overflow-x:hidden}
.chat-item{overflow:visible;transform-origin:left center;will-change:transform,background-color}
.chat-item:hover{transform:translateX(5px) scale(1.01);background:#0e2116;box-shadow:0 8px 24px rgba(0,0,0,.22)}
.chat-item:active{transform:translateX(3px) scale(.975)!important}
.chat-item .avatar,.person-result .avatar{transition:transform 190ms cubic-bezier(.2,.9,.3,1.3),box-shadow 190ms ease}
.chat-item:hover .avatar,.person-result:hover .avatar{transform:scale(1.1) rotate(-3deg);box-shadow:0 0 0 2px rgba(33,228,123,.38),0 7px 15px rgba(0,0,0,.32)}
.chat-item.active:before{animation:activeRail 270ms cubic-bezier(.2,.9,.3,1.3)}
.person-result:hover{transform:translateX(4px);background:#102319}
.self:hover{transform:translateY(-2px);box-shadow:0 7px 16px rgba(0,0,0,.22)}
.peer-button:hover{transform:translateX(3px)}
.peer-button:hover .avatar{transform:scale(1.08);box-shadow:0 0 0 2px rgba(33,228,123,.28)}
.peer-button .avatar{transition:transform 180ms cubic-bezier(.2,.9,.3,1.25),box-shadow 180ms ease}
.chat-view.switching{animation:chatSwitch 280ms cubic-bezier(.2,.8,.2,1)}
.message{transform-origin:left top;transition:background-color 130ms ease,transform 160ms cubic-bezier(.2,.8,.2,1),box-shadow 160ms ease}
.message:hover{transform:translateX(4px);background:#08170e;box-shadow:-3px 0 #1bcf6b}
.message:hover .message-body{color:#ffffff}
.message-hover button:hover{transform:translateY(-2px) scale(1.1);color:#21e47b}
.message-hover button:active{transform:scale(.88)!important}
.composer{transition:border-color 160ms ease,background-color 160ms ease,box-shadow 160ms ease}
.composer:focus-within{border-top-color:#1c5434;background:#06110b;box-shadow:0 -10px 30px rgba(0,0,0,.2)}
.composer textarea{transition:border-color 160ms ease,box-shadow 160ms ease,background-color 160ms ease,transform 160ms ease}
.composer textarea:focus{transform:translateY(-1px);background:#0a1810;box-shadow:0 0 0 3px rgba(33,228,123,.08),0 8px 24px rgba(0,0,0,.26)}
.composer-button:hover{transform:translateY(-3px) scale(1.08);box-shadow:0 8px 17px rgba(0,0,0,.3)}
.send-button:hover{transform:translateY(-3px) scale(1.08) rotate(-4deg);box-shadow:0 0 24px rgba(33,228,123,.32)}
.send-button:hover svg{transform:translate(2px,-2px)}
.attachment-menu button:hover{transform:translateX(5px);box-shadow:0 5px 14px rgba(0,0,0,.25)}
.emoji-menu button:hover{transform:translateY(-4px) scale(1.22);filter:drop-shadow(0 5px 6px rgba(0,0,0,.45))}
.context-menu button:hover{transform:translateX(4px);box-shadow:inset 2px 0 #21e47b}
.pane-button:hover{transform:translateX(4px);box-shadow:inset 2px 0 #21e47b}
.settings-item:hover{transform:translateX(5px);box-shadow:inset 3px 0 #21e47b}
.settings-item.active{animation:selectedNav 250ms cubic-bezier(.2,.9,.3,1.2)}
.settings-page.page-enter{animation:settingsPageIn 260ms cubic-bezier(.2,.8,.2,1)}
.primary-button:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(33,228,123,.23)}
.primary-button:active{transform:translateY(1px) scale(.97)!important}
.avatar{transition:transform 180ms cubic-bezier(.2,.9,.3,1.3),box-shadow 180ms ease,filter 180ms ease}
.profile-avatar:hover{transform:scale(1.07) rotate(-2deg);box-shadow:0 0 0 3px rgba(33,228,123,.25),0 12px 28px rgba(0,0,0,.35)}
@keyframes pressRipple{0%{opacity:.8;transform:translate(-50%,-50%) scale(0)}70%{opacity:.2}100%{opacity:0;transform:translate(-50%,-50%) scale(18)}}
@keyframes selectedNav{0%{transform:translateX(-7px);opacity:.55}70%{transform:translateX(2px)}100%{transform:none;opacity:1}}
@keyframes activeRail{0%{height:5px;top:27px;opacity:0}100%{height:33px;top:13px;opacity:1}}
@keyframes chatSwitch{0%{opacity:.45;transform:translateX(14px) scale(.992)}100%{opacity:1;transform:none}}
@keyframes settingsPageIn{0%{opacity:0;transform:translateX(14px)}100%{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}}

/* Persistent color themes and light mode. */
:root{--accent:#21e47b;--accent-soft:#123a24;--accent-ink:#01200e;--bg:#020805;--surface:#050d08;--surface-2:#06110b;--surface-3:#0c1d13;--surface-hover:#102319;--line:#102419;--line-strong:#1a5735;--text:#eef5f0;--muted:#7d8c82;--danger:#ff6975}
:root[data-theme="midnight"]{--accent:#5f8cff;--accent-soft:#17284d;--accent-ink:#061126;--line-strong:#294d93}
:root[data-theme="violet"]{--accent:#a974ff;--accent-soft:#2d1c4b;--accent-ink:#17072f;--line-strong:#5e379c}
:root[data-theme="rose"]{--accent:#ff6e93;--accent-soft:#4a1c2a;--accent-ink:#2a0711;--line-strong:#923b55}
:root[data-theme="graphite"]{--accent:#aab3bd;--accent-soft:#293139;--accent-ink:#11161b;--line-strong:#53616d}
:root[data-mode="light"]{--bg:#f3f7f4;--surface:#ffffff;--surface-2:#f8fbf9;--surface-3:#e9f0eb;--surface-hover:#e2ece5;--line:#d6e2d9;--line-strong:#a8c8b2;--text:#17231b;--muted:#68766d;--danger:#d93c4b}
body,.app,.empty-view,.chat-view,.settings-view{background:var(--bg);color:var(--text)}
.sidebar,.profile-pane,.settings-nav{background:var(--surface);border-color:var(--line)}
.sidebar-header,.quick-nav,.user-bar,.chat-header,.composer,.profile-pane header,.setting-row{border-color:var(--line)}
.sidebar-header,.chat-header,.auth-card,.dialog,.attachment-menu,.emoji-menu,.context-menu{background:var(--surface-2)}
.user-bar,.composer{background:var(--surface)}
.search-wrap input,.composer textarea,.dialog input{background:var(--surface-2);border-color:var(--line);color:var(--text)}
.nav-row.active,.chat-item.active,.settings-item.active,.nav-row:hover,.settings-item:hover{background:var(--surface-hover);color:var(--text)}
.nav-row:hover,.settings-item:hover{box-shadow:inset 3px 0 var(--accent)}
.icon-button:hover,.composer-button:hover,.pane-button:hover,.setting-row button,.back-button{background:var(--surface-3);color:var(--text)}
.brand-symbol,.send-button,.primary-button,.unread{background:var(--accent);color:var(--accent-ink)}
.auth h1 span{color:var(--accent)}
.eyebrow,.profile-pane>p,#profile-tag,.account-card p,.message-head b,.self i,.peer-button i{color:var(--accent)}
.self i,.peer-button i{background:var(--accent)}
.chat-item.active:before{background:var(--accent)}
.account-card,.appearance-preview{background:var(--surface-2);border-color:var(--line-strong)}
.message:hover{background:var(--surface-2);box-shadow:-3px 0 var(--accent)}
.search-wrap input:focus,.composer textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent)}
.message-body,.chat-line b,.settings-page h1,.settings-page h2,.profile-pane h2{color:var(--text)}
.chat-preview span,.setting-row small,.profile-note p,.auth p{color:var(--muted)}
:root[data-mode="light"] .auth{background:radial-gradient(circle at 50% 28%,#dff3e5 0,#f2f8f4 280px,#eaf1ec 620px)}
:root[data-mode="light"] .message-media{background:#e9eeeb}
:root[data-mode="light"] .press-ripple{background:rgba(0,0,0,.12)}
:root[data-mode="light"] .splash{background:#f3f7f4;color:#17231b}
.setting-toggle{width:44px!important;height:24px!important;padding:0!important;border-radius:12px!important;background:#253029!important;box-shadow:none!important}
.setting-toggle i{position:absolute;left:4px;top:4px;width:16px;height:16px;border-radius:8px;background:#7d8c82;transition:left 180ms cubic-bezier(.2,.9,.3,1.2),background-color 180ms ease,box-shadow 180ms ease}
.setting-toggle.on{background:color-mix(in srgb,var(--accent) 42%,var(--surface-3))!important}
.setting-toggle.on i{left:24px;background:var(--accent);box-shadow:0 0 12px color-mix(in srgb,var(--accent) 55%,transparent)}
.theme-section{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.theme-section>b,.theme-section>small{display:block}.theme-section>b{font-size:12px}.theme-section>small{margin-top:5px;color:var(--muted);font-size:10px}
.theme-grid{display:grid;grid-template-columns:repeat(5,minmax(92px,1fr));gap:9px;margin-top:15px}
.theme-choice{height:66px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:7px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--muted);text-align:left}
.theme-choice i{width:22px;height:22px;border-radius:7px;box-shadow:0 0 0 3px rgba(255,255,255,.07)}
.theme-choice span{font-size:10px}.theme-choice:hover{transform:translateY(-3px);border-color:var(--accent);color:var(--text)}
.theme-choice.active{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 18%,transparent);color:var(--text)}
.appearance-preview{transition:background-color 220ms ease,border-color 220ms ease}.appearance-preview div{background:var(--accent-soft)}.appearance-preview span{background:color-mix(in srgb,var(--accent) 15%,var(--surface-3))}.appearance-preview span:last-child{background:var(--surface-3)}
.profile-pane{width:290px;min-width:290px}.profile-scroll{height:calc(100% - 58px);overflow-y:auto;padding:0 8px 24px}.profile-pane .profile-avatar{width:88px;height:88px;margin-top:30px;border-radius:23px}.profile-pane .profile-note{margin-left:17px;margin-right:17px}.pane-button{width:calc(100% - 34px);height:41px;margin-left:17px;margin-right:17px;padding:0 14px}.accent-pane-button{color:var(--accent);background:var(--accent-soft)}.danger-pane-button{color:var(--danger)}
@keyframes panelIn{from{opacity:0;width:0;min-width:0}to{opacity:1;width:290px;min-width:290px}}
.message audio{display:block;width:248px;height:34px;margin:3px 0 7px;border-radius:17px;filter:saturate(.5) hue-rotate(70deg)}
::-webkit-scrollbar{width:7px;height:7px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{border-radius:5px;background:color-mix(in srgb,var(--accent) 28%,var(--surface-3))}::-webkit-scrollbar-button{display:none!important;width:0!important;height:0!important}
.profile-form{display:grid;gap:11px}.profile-form label{display:grid;gap:5px;color:var(--muted);font-size:10px;font-weight:700;text-transform:uppercase}.profile-form input,.profile-form textarea{width:100%;margin:0;padding:10px 11px;border:1px solid var(--line);border-radius:6px;outline:0;background:var(--bg);color:var(--text);text-transform:none}.profile-form textarea{height:76px;resize:none}.profile-avatar-editor{display:flex;align-items:center;gap:13px;padding:9px;border:1px solid var(--line);border-radius:8px}.profile-avatar-editor .avatar{width:54px;height:54px;border-radius:14px}.profile-avatar-editor button{height:34px;padding:0 11px;border-radius:6px;background:var(--surface-3)}.profile-form>button{height:36px;padding:0 11px;border-radius:6px;background:var(--surface-3);color:var(--muted);text-align:left}.tag-state{min-height:14px;color:var(--muted);font-size:10px;text-transform:none}.tag-state.available{color:var(--accent)}.tag-state.unavailable{color:var(--danger)}
.media-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}.media-tabs button{height:32px;padding:0 10px;border-radius:6px;background:var(--surface-3);font-size:10px}.media-result{max-height:280px;overflow:auto}.media-entry{display:flex;align-items:center;gap:9px;padding:9px;border-bottom:1px solid var(--line);color:var(--text);text-decoration:none}.media-entry img,.media-entry video{width:58px;height:46px;border-radius:7px;object-fit:cover}.media-entry span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
.wallpaper-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:14px 0}.wallpaper-grid button{height:70px;padding:8px;border:1px solid var(--line-strong);border-radius:8px;color:var(--text);font-size:10px}.wallpaper-grid button:hover{border-color:var(--accent);box-shadow:0 7px 20px rgba(0,0,0,.25)}
@media(max-width:980px){.profile-pane{position:absolute;right:0;top:0;bottom:0;z-index:8;box-shadow:-20px 0 45px rgba(0,0,0,.5)}.theme-grid{grid-template-columns:repeat(3,minmax(92px,1fr))}}

/* Composer recording modes. Emoji lives next to the attachment button. */
.emoji-menu{left:57px;right:auto}
.record-button{touch-action:none;user-select:none}
.record-button.recording{background:color-mix(in srgb,var(--danger) 25%,var(--surface-3));color:var(--danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 14%,transparent)}
.recording-state{min-width:0;min-height:39px;flex:1;display:flex;align-items:center;gap:9px;padding:5px 11px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--muted)}
.recording-state b{min-width:34px;color:var(--text);font-size:11px;font-variant-numeric:tabular-nums}.recording-state>span:last-of-type{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}.recording-dot{width:8px;height:8px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 4px color-mix(in srgb,var(--danger) 12%,transparent);animation:recordPulse 1s ease-in-out infinite}.circle-preview{width:30px;height:30px;margin-left:auto;border-radius:50%;object-fit:cover;transform:scaleX(-1)}
.composer.is-recording textarea{display:none}.composer.is-recording #emoji-button,.composer.is-recording #attach-button,.composer.is-recording #send-button{display:none}.composer.is-recording .record-button{margin-left:auto}
@keyframes recordPulse{50%{opacity:.45;transform:scale(.72)}}

/* Compact, theme-aware voice message without the browser's three-dot menu. */
.voice-note{width:min(310px,100%);min-width:260px;height:40px;display:flex;align-items:center;gap:7px;margin:3px 0 7px;padding:4px 8px;border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));border-radius:20px;background:color-mix(in srgb,var(--accent) 11%,var(--surface-3));color:var(--text)}
.voice-note button{width:27px;height:27px;min-width:27px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--accent) 18%,var(--surface-2));color:var(--accent)}.voice-note button:hover{transform:scale(1.05);background:color-mix(in srgb,var(--accent) 28%,var(--surface-2))}.voice-note svg{width:15px;height:15px}.voice-play.playing svg{display:none}.voice-play.playing:after{content:'Ⅱ';font-size:11px;font-weight:800}.voice-time{min-width:53px;font-size:9px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--muted)}
.voice-range{height:15px;min-width:95px;flex:1;margin:0;padding:0;appearance:none;background:transparent;cursor:pointer}.voice-range::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:color-mix(in srgb,var(--accent) 35%,var(--line))}.voice-range::-webkit-slider-thumb{width:9px;height:9px;margin-top:-3px;border:0;border-radius:50%;appearance:none;background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}.voice-volume.muted{color:var(--danger);text-decoration:line-through}

/* Local contact actions are grouped behind one clear profile button. */
#profile-tag{width:max-content;max-width:calc(100% - 34px);margin:7px auto 21px!important;padding:5px 10px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:14px;background:color-mix(in srgb,var(--accent) 10%,var(--surface-2));font-size:11px!important;font-weight:750;letter-spacing:.15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.local-profile-actions{display:grid;gap:7px}.local-profile-actions button{width:100%;min-height:39px;padding:0 12px;border:1px solid var(--line);border-radius:7px;background:var(--surface-3);color:var(--text);text-align:left}.local-profile-actions button:hover{border-color:var(--accent);background:var(--surface-hover)}.local-profile-actions .danger-action{color:var(--danger)}
.call-controls{display:flex;justify-content:center;gap:10px;margin-top:18px}.call-controls>button{height:38px;padding:0 16px;border-radius:8px;background:var(--surface-3);color:var(--text)}.call-controls>.icon-button{width:38px;padding:0}.call-controls>.danger{background:color-mix(in srgb,var(--danger) 28%,var(--surface-3));color:var(--danger)}.call-controls>.primary{background:var(--accent);color:var(--accent-ink)}
#call-mic-button.muted,.call-controls .muted{color:var(--danger);background:color-mix(in srgb,var(--danger) 16%,var(--surface-3))}

/* Theme-safe states: no black controls and no disappearing text in light mode. */
.composer-button,.pane-button,.profile-form button,.local-profile-actions button{background:var(--surface-3);color:var(--muted)}
.chat-item:hover,.person-result:hover{background:var(--surface-hover);color:var(--text);box-shadow:0 8px 24px color-mix(in srgb,var(--text) 12%,transparent)}
.message:hover{background:var(--surface-2);color:var(--text);box-shadow:-3px 0 var(--accent)}.message:hover .message-body{color:var(--text)}
.context-menu{min-width:205px;background:var(--surface-2);border-color:var(--line-strong)}.context-menu button{color:var(--text)}.context-menu button:hover{background:var(--surface-hover);color:var(--text)}
:root[data-mode="light"]{--muted:#52645a}
:root[data-mode="light"] .composer-button,:root[data-mode="light"] .pane-button,:root[data-mode="light"] .profile-form button,:root[data-mode="light"] .context-menu,:root[data-mode="light"] .attachment-menu,:root[data-mode="light"] .emoji-menu{background:var(--surface-3);color:var(--text)}
:root[data-mode="light"] .message-hover{background:var(--surface);border-color:var(--line-strong);box-shadow:0 6px 18px rgba(24,43,31,.12)}
:root[data-mode="light"] .message-hover button{color:#43594a}:root[data-mode="light"] .message-hover button:hover{background:var(--surface-hover);color:#17231b}
:root[data-mode="light"] .chat-preview span,:root[data-mode="light"] .chat-line time,:root[data-mode="light"] .list-label,:root[data-mode="light"] .list-label button{color:#52645a}