*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{color:#0f0f0f;background:#fff;justify-content:center;align-items:center;min-height:100vh;font-family:Manrope,-apple-system,BlinkMacSystemFont,sans-serif;display:flex}#root{justify-content:center;align-items:center;width:100%;min-height:100dvh;display:flex}@media (width<=768px){body,#root{justify-content:stretch;align-items:stretch;min-height:100dvh}}button{cursor:pointer;background:0 0;border:none;font-family:inherit}input{border:none;outline:none;font-family:inherit}.liquid-glass{background-blend-mode:luminosity;-webkit-backdrop-filter:blur(20px);background:#ffffff0a;border:none;position:relative;overflow:hidden;box-shadow:inset 0 1px 1px #ffffff1a}.liquid-glass:before{content:"";border-radius:inherit;-webkit-mask-composite:xor;pointer-events:none;background:linear-gradient(#ffffff73 0%,#ffffff26 20%,#fff0 40% 60%,#ffffff26 80%,#ffffff73 100%);padding:1.4px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.login-wrapper{background:#000;justify-content:center;align-items:center;width:100%;min-height:100vh;display:flex;position:relative;overflow:hidden}.login-card{z-index:2;border-radius:24px;flex-direction:column;gap:24px;width:100%;max-width:380px;padding:36px 32px 28px;display:flex;position:relative}.login-brand{align-items:center;gap:11px;display:flex}.login-brand-name{color:#fffffff2;letter-spacing:-.3px;font-size:19px;font-weight:800}.login-subtitle{color:#fff6;margin-top:-16px;font-size:13px;font-weight:500}.login-form{flex-direction:column;gap:14px;display:flex}.login-field{flex-direction:column;gap:6px;display:flex}.login-label{color:#ffffff73;letter-spacing:.3px;text-transform:uppercase;font-size:11.5px;font-weight:600}.login-input{color:#ffffffe6;background:#ffffff12;border:1px solid #ffffff1a;border-radius:10px;width:100%;padding:10px 14px;font-family:Manrope,sans-serif;font-size:14px;font-weight:500;transition:border-color .18s}.login-input:focus{background:#0844910f;border-color:#08449180}.login-input::placeholder{color:#fff3}.login-pass-wrap{position:relative}.login-pass-wrap .login-input{padding-right:42px}.login-eye{cursor:pointer;background:0 0;border:none;align-items:center;padding:2px;display:flex;position:absolute;top:50%;right:12px;transform:translateY(-50%)}.login-error{color:#ff6b6b;background:#ff6b6b1a;border:1px solid #ff6b6b33;border-radius:8px;padding:8px 12px;font-size:12px;font-weight:500}.login-btn{color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(8px);background:#084491d9;border:none;border-radius:10px;justify-content:center;align-items:center;gap:7px;width:100%;margin-top:4px;padding:11px 0;font-family:Manrope,sans-serif;font-size:14px;font-weight:700;transition:background .15s;display:flex}.login-btn:hover:not(:disabled){background:#084491}.login-btn:disabled{opacity:.6;cursor:not-allowed}.login-spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:16px;height:16px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.login-hint{color:#ffffff40;text-align:center;font-size:11.5px;font-weight:500}.login-hint span{color:#ffffff73;font-weight:600}.login-tabs{background:#ffffff0d;border:1px solid #ffffff14;border-radius:10px;gap:2px;padding:3px;display:flex}.login-tab{color:#ffffff59;background:0 0;border-radius:8px;flex:1;padding:7px 0;font-family:Manrope,sans-serif;font-size:13px;font-weight:600;transition:all .18s}.login-tab:hover{color:#ffffffa6}.login-tab--active{color:#ffffffe6;background:#08449140;border:1px solid #0844914d}*{box-sizing:border-box;-webkit-font-smoothing:antialiased;border:none;outline:none;margin:0;padding:0}body{background:#000;font-family:Manrope,sans-serif}button{cursor:pointer;background:0 0}input{border:none;outline:none}.app-wrapper{background:#000;justify-content:center;align-items:center;width:100%;min-height:100vh;padding:32px 24px;display:flex;position:relative;overflow:hidden}.bg-video{object-fit:cover;object-position:center center;z-index:0;pointer-events:none;width:100vw;min-width:100%;height:100dvh;min-height:100%;transition:none;position:fixed;inset:0}.bg-overlay{z-index:1;pointer-events:none;background:#00000061;width:100vw;height:100dvh;position:fixed;inset:0}.messenger{z-index:2;background:0 0;gap:12px;width:100%;max-width:980px;height:680px;display:flex;position:relative}.sidebar{-webkit-backdrop-filter:none;background:0 0;border-radius:20px;flex-direction:column;width:300px;min-width:300px;display:flex;overflow:hidden}.sidebar-header{flex-direction:column;gap:12px;padding:16px 10px 12px;display:flex}.brand{align-items:center;gap:10px;min-height:40px;display:flex}.brand-name{color:#ffffffeb;letter-spacing:-.3px;flex:1;font-size:17px;font-weight:800}.logout-btn{background:#ffffff0d;border:1px solid #ffffff14;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;margin-left:auto;transition:background .15s;display:flex}.logout-btn:hover{background:#ff646426;border-color:#ff646433}.new-chat-btn{color:#fff;letter-spacing:.1px;-webkit-backdrop-filter:blur(14px)saturate(1.15);background:linear-gradient(#0e4e98e0 0%,#063066eb 100%);border:1px solid #64a0d733;border-radius:10px;justify-content:center;align-items:center;gap:6px;width:100%;padding:10px 0;font-family:Manrope,sans-serif;font-size:13px;font-weight:700;transition:background .18s;display:flex;box-shadow:inset 0 1px #ffffff24,0 2px 14px #02102866}.new-chat-btn:hover{background:linear-gradient(#125aa8f2 0%,#083a76fa 100%)}.search-bar{background:#ffffff0f;border:1px solid #ffffff1a;border-radius:10px;align-items:center;gap:8px;margin:0 10px 2px;padding:8px 12px;display:flex}.search-icon{color:#ffffff59;flex-shrink:0}.search-bar input{color:#ffffffd9;background:0 0;flex:1;font-family:Manrope,sans-serif;font-size:12.5px;font-weight:500}.search-bar input::placeholder{color:#ffffff4d;font-weight:500}.chat-list-wrapper{flex-direction:column;flex:1;min-height:0;display:flex;position:relative;overflow:hidden}.chat-list-wrapper:after{content:none}.chat-list{scroll-behavior:smooth;direction:rtl;flex:1;height:auto;min-height:0;padding:8px 10px 12px;position:relative;overflow-y:auto}.chat-list:after{content:none}.chat-list>*{direction:ltr}.chat-list::-webkit-scrollbar{width:0;display:none}.sidebar-settings-row{z-index:4;flex-shrink:0;padding:8px 10px 6px;position:relative}.sidebar-settings-row .chat-item .avatar.avatar--blue{background-color:gray}.chat-item{cursor:pointer;-webkit-backdrop-filter:blur(8px);background:#ffffff0a;border:1px solid #ffffff14;border-radius:12px;align-items:flex-start;gap:10px;margin-bottom:5px;padding:10px 10px 10px 11px;transition:background .15s;display:flex}.chat-item:hover{background:#ffffff17}.chat-item--selected{background:#0844912e;border-color:#08449166}.chat-item-body{flex:1;min-width:0}.chat-item-top{justify-content:space-between;align-items:baseline;margin-bottom:1px;display:flex}.chat-item-name{color:#ffffffe6;white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:700;overflow:hidden}.chat-item-time{color:#ffffff59;flex-shrink:0;margin-left:6px;font-size:10.5px;font-weight:500}.chat-item-handle{color:#ffffff59;white-space:nowrap;text-overflow:ellipsis;margin-bottom:2px;font-size:10.5px;font-weight:500;display:block;overflow:hidden}.chat-item-bottom{justify-content:space-between;align-items:center;gap:6px;display:flex}.chat-item-preview{color:#fff6;white-space:nowrap;text-overflow:ellipsis;flex:1;font-size:12px;font-weight:500;overflow:hidden}.avatar{color:#fff;letter-spacing:.3px;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-family:Manrope,sans-serif;font-size:12.5px;font-weight:700;display:flex}.avatar--blue{background:#084491}.avatar--gray{background:#9aa0aad9}.avatar--light{background:#b8bec8b3}.avatar--lg{width:40px;height:40px;font-size:13px}.avatar--sm{flex-shrink:0;align-self:flex-end;width:32px;height:32px;font-size:11px}.avatar--me{color:#ffffffe6;background:#fff3}.avatar--icon{padding:0}.avatar.avatar--blue.avatar--icon{background:gray}.settings-header-sub{color:#ffffff6b;font-size:11.5px;font-weight:500}.chat-window{border-radius:20px;flex-direction:column;flex:1;min-width:0;display:flex;overflow:hidden}.chat-window.liquid-glass{background:0 0}.chat-window--empty{flex:1;justify-content:center;align-items:center;min-width:0;min-height:200px;display:flex}.chat-window-empty-hint{color:#ffffff6b;text-align:center;padding:0 20px;font-size:14px;font-weight:500}.chat-header{-webkit-backdrop-filter:none;background:0 0;border-bottom:1px solid #ffffff14;justify-content:space-between;align-items:center;min-height:66px;padding:14px 18px;display:flex}.chat-header-left{align-items:center;gap:11px;display:flex}.chat-header-info{flex-direction:column;gap:1px;display:flex}.chat-header-name{color:#fffffff2;letter-spacing:-.2px;font-size:14.5px;font-weight:800}.online-status{color:#fff6;align-items:center;gap:5px;font-size:11.5px;font-weight:500;display:flex}.online-dot{background:#22c55e;border-radius:50%;flex-shrink:0;width:6px;height:6px}.chat-header-actions{align-items:center;gap:2px;display:flex}.icon-btn{border-radius:8px;justify-content:center;align-items:center;width:34px;height:34px;transition:background .12s;display:flex}.icon-btn:hover{background:#ffffff14}.messages-area{background:0 0;flex-direction:column;flex:1;gap:10px;padding:16px 18px 10px;display:flex;overflow-y:auto}.messages-area::-webkit-scrollbar{width:0}.settings-body{gap:8px}.settings-form{flex-direction:column;gap:6px;padding:2px 0 10px;display:flex}.settings-form .login-btn{margin-top:6px}.settings-form-msg{color:#ffd28cf2;font-size:12px;font-weight:500}.settings-section-label{letter-spacing:.12em;text-transform:uppercase;color:#ffffff52;margin:10px 2px 2px;font-size:10.5px;font-weight:700}.settings-section-label:first-child{margin-top:2px}.settings-row{-webkit-backdrop-filter:blur(8px);background:#ffffff0a;border:1px solid #ffffff14;border-radius:12px;align-items:center;gap:12px;padding:12px 14px;display:flex}.settings-row--btn{text-align:left;cursor:pointer;width:100%;margin-top:8px;transition:background .15s,border-color .15s}.settings-row--btn:hover{background:#ff50501a;border-color:#ff646440}.settings-row-text{flex-direction:column;gap:2px;min-width:0;display:flex}.settings-row-title{color:#ffffffeb;font-size:13.5px;font-weight:700}.settings-row-title--danger{color:#ff9696f2}.settings-row-desc{color:#ffffff61;font-size:11.5px;font-weight:500}.message-row{align-items:flex-end;gap:8px;display:flex}.message-row--me{flex-direction:row-reverse}.message-row--them{flex-direction:row}.message-content{flex-direction:column;max-width:62%;display:flex}.bubble{border-radius:18px;padding:10px 13px}.bubble--them{-webkit-backdrop-filter:blur(12px);background:#ffffff1a;border:1px solid #ffffff1f;border-bottom-left-radius:5px}.bubble--me{-webkit-backdrop-filter:blur(20px)saturate(1.2);background:linear-gradient(155deg,#1a48826b 0%,#06265294 55%,#041c3ead 100%);border:1px solid #6ea8dc38;border-bottom-right-radius:5px;box-shadow:inset 0 1px #ffffff1a,0 4px 18px #020c2059}.bubble-text{font-size:13.5px;font-weight:500;line-height:1.5}.bubble--them .bubble-text{color:#ffffffe6}.bubble--me .bubble-text{color:#fff}.bubble-meta{justify-content:flex-end;align-items:center;gap:4px;margin-top:3px;display:flex}.bubble-label{color:#fff6;margin-right:2px;font-size:10.5px;font-weight:500}.bubble-time{font-size:10.5px;font-weight:500}.bubble--them .bubble-time{color:#ffffff59}.bubble--me .bubble-time{color:#fff9}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.message-input-stack{background:0 0;border-top:1px solid #ffffff14;padding:8px 14px 11px}.message-input-bar{background:0 0;border-top:none;align-items:center;gap:6px;padding:0;display:flex}.pending-image-row{margin-bottom:8px;display:flex}.pending-image-thumb{border:1px solid #ffffff1f;border-radius:10px;width:52px;height:52px;position:relative;overflow:hidden}.pending-image-thumb img{object-fit:cover;width:100%;height:100%}.pending-image-remove{color:#fff;cursor:pointer;background:#0000008c;border:none;border-radius:6px;justify-content:center;align-items:center;width:22px;height:22px;display:flex;position:absolute;top:3px;right:3px}.pending-image-remove:hover{background:#dc3c3cd9}.emoji-anchor{flex-shrink:0;position:relative}.emoji-popover{z-index:30;-webkit-backdrop-filter:blur(12px);background:#161620f5;border:1px solid #ffffff1f;border-radius:14px;width:280px;padding:10px;position:absolute;bottom:calc(100% + 8px);right:0;box-shadow:0 12px 40px #00000073}.emoji-popover-grid{grid-template-columns:repeat(8,1fr);gap:2px;display:grid}.emoji-cell{cursor:pointer;background:0 0;border:none;border-radius:8px;padding:6px 4px;font-family:inherit;font-size:22px;line-height:1.2}.emoji-cell:hover{background:#ffffff1a}.input-icon-btn--active{background:#08449138}.bubble-image{object-fit:cover;border-radius:10px;max-width:min(240px,70vw);max-height:280px;margin-bottom:4px;display:block}.bubble-text--caption{opacity:.95;margin-top:0;font-size:13px}.input-icon-btn{border-radius:8px;flex-shrink:0;width:32px;height:32px}.input-wrapper{-webkit-backdrop-filter:blur(8px);background:#ffffff12;border:1px solid #ffffff1a;border-radius:10px;flex:1;padding:8px 13px}.input-wrapper input{color:#ffffffe0;background:0 0;width:100%;font-family:Manrope,sans-serif;font-size:13.5px;font-weight:500}.input-wrapper input::placeholder{color:#ffffff47;font-weight:500}.send-btn{-webkit-backdrop-filter:blur(8px);background:#084491d9;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:38px;height:38px;transition:background .15s;display:flex}.send-btn:hover{background:#084491}@media (width<=768px){.app-wrapper{padding:calc(10px + env(safe-area-inset-top,0px)) calc(10px + env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) calc(10px + env(safe-area-inset-left,0px));flex-direction:column;justify-content:flex-start;align-items:stretch;min-height:100vh;display:flex}.app-wrapper--immersive{padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}.messenger--immersive{flex:1;gap:0;min-height:0}.messenger--immersive .sidebar{display:none}.messenger--immersive .chat-window{border-radius:0;flex:1;width:100%;min-height:0}.messenger:not(.messenger--immersive):has(.chat-window--empty) .chat-window--empty{display:none!important}.messenger:not(.messenger--immersive):has(.chat-window--empty) .sidebar{flex:1;min-height:0;max-height:none}.messenger:not(.messenger--immersive):has(.chat-window--empty) .chat-list-wrapper{max-height:none}.messenger{flex-direction:column;flex:1;gap:8px;width:100%;max-width:none;height:auto;min-height:0;max-height:none}.sidebar{border-radius:16px;flex:0 auto;width:100%;min-width:0;min-height:0;max-height:min(38vh,280px);overflow:hidden}.sidebar-header{gap:10px;padding:12px 10px 10px}.brand-name{font-size:15px}.chat-list-wrapper{flex:1;min-height:0;max-height:min(26vh,200px)}.chat-window{border-radius:16px;flex:auto;min-width:0;min-height:0}.chat-header{min-height:56px;padding:12px 14px}.chat-header-name{font-size:13.5px}.messages-area{-webkit-overflow-scrolling:touch;padding:12px 12px 8px}.message-content{max-width:min(88%,320px)}.bubble-image{max-width:min(220px,78vw);max-height:220px}.message-input-stack{padding:8px 10px calc(10px + env(safe-area-inset-bottom,0px))}.message-input-bar{gap:4px}.input-wrapper input{font-size:16px}.emoji-popover{width:min(280px,100vw - 24px);max-width:calc(100vw - 16px);left:auto;right:0}.login-wrapper{padding:12px;padding-top:calc(16px + env(safe-area-inset-top,0px));align-items:flex-start}.login-card{border-radius:18px;width:100%;max-width:none;padding:28px 20px 22px}.login-brand-name{font-size:17px}.settings-body{padding-bottom:env(safe-area-inset-bottom,8px)}}@media (width<=768px) and (height<=480px){.messenger:not(:has(.chat-window--empty)) .sidebar{max-height:min(32vh,200px)}.messenger:not(:has(.chat-window--empty)) .chat-list-wrapper{max-height:min(22vh,160px)}}
