:root,:root[data-theme=dark]{--bg-app: #0e1621;--bg-sidebar: #17212b;--bg-header: #17212b;--bg-input: #242f3d;--bg-bubble-own: #2b5278;--bg-bubble-other: #182533;--bg-hover: #202b36;--bg-overlay: rgba(14, 22, 33, .65);--accent: #5288c1;--accent-hover: #5d98d4;--text: #ffffff;--text-muted: #708499;--text-bubble-other: #ffffff;--border: #0d1218;--danger: #e53935;--scrollbar: rgba(255, 255, 255, .15);--radius: 12px;--shadow: 0 8px 32px rgba(0, 0, 0, .35)}:root[data-theme=light]{--bg-app: #ffffff;--bg-sidebar: #ffffff;--bg-header: #ffffff;--bg-input: #f0f2f5;--bg-bubble-own: #effdde;--bg-bubble-other: #ffffff;--bg-hover: #f0f2f5;--bg-overlay: rgba(255, 255, 255, .55);--accent: #3390ec;--accent-hover: #2a7bd4;--text: #000000;--text-muted: #707579;--text-bubble-other: #000000;--border: #e4e6eb;--danger: #d92e2e;--scrollbar: rgba(0, 0, 0, .15);--shadow: 0 8px 32px rgba(0, 0, 0, .12)}:root[data-theme=light] body{background:#e7ebf0}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:Inter,system-ui,-apple-system,sans-serif;background:var(--bg-app);color:var(--text);-webkit-font-smoothing:antialiased}button,input,textarea{font:inherit;color:inherit}button{cursor:pointer;border:none;background:none}a{color:var(--accent)}.avatar{border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:600;overflow:hidden}.avatar--img{-o-object-fit:cover;object-fit:cover}.avatar--placeholder{background:linear-gradient(135deg,#5288c1,#3d6a9e);color:#fff}.btn{padding:12px 20px;border-radius:8px;font-weight:600;transition:background .15s}.btn--primary{background:var(--accent);color:#fff;width:100%}.btn--primary:hover:not(:disabled){background:var(--accent-hover)}.btn--primary:disabled{opacity:.6;cursor:not-allowed}.btn--danger{background:transparent;border:1px solid var(--danger);color:var(--danger);width:100%;margin-top:8px}.btn--send{width:44px;height:44px;border-radius:50%;background:var(--accent);color:#fff;font-size:18px;flex-shrink:0}.btn--send:disabled{opacity:.4}.btn--mic{background:var(--bg-input);color:var(--text)}.btn--mic:hover:not(:disabled){background:var(--accent);color:#fff}.auth-page{min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(ellipse at top,#1a2a3a 0%,var(--bg-app) 60%)}.auth-card{width:100%;max-width:400px;background:var(--bg-sidebar);border-radius:16px;padding:40px 32px;box-shadow:var(--shadow);text-align:center}.auth-logo{width:72px;height:72px;margin:0 auto 16px;border-radius:50%;background:linear-gradient(135deg,#5288c1,#3d6a9e);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700}.auth-card h1{font-size:24px;margin-bottom:4px}.auth-subtitle{color:var(--text-muted);margin-bottom:28px;font-size:14px}.auth-form{text-align:left;display:flex;flex-direction:column;gap:16px}.auth-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--text-muted)}.auth-form input{background:var(--bg-input);border:1px solid transparent;border-radius:8px;padding:12px 14px;color:var(--text);outline:none}.auth-form input:focus{border-color:var(--accent)}.auth-error{background:#e5393526;color:#ff8a80;padding:10px 12px;border-radius:8px;font-size:13px}.auth-footer{margin-top:20px;font-size:14px;color:var(--text-muted)}.app-loading{height:100%;display:flex;align-items:center;justify-content:center;color:var(--text-muted)}.spinner-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px}.spinner{display:inline-block;border-radius:50%;border:3px solid rgba(255,255,255,.1);border-top-color:var(--accent);animation:spin .8s linear infinite}.spinner-label{font-size:13px;color:var(--text-muted)}@keyframes spin{to{transform:rotate(360deg)}}.loader-dot{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.2);border-top-color:var(--accent);animation:spin .7s linear infinite}.message-input__sending{display:flex;align-items:center;padding:0 6px}.messenger{height:100%;display:grid;grid-template-columns:var(--sidebar-width, 360px) 5px 1fr;overflow:hidden}.messenger--resizing,.messenger--resizing *{cursor:col-resize!important;-webkit-user-select:none!important;-moz-user-select:none!important;user-select:none!important}.messenger-sidebar{background:var(--bg-sidebar);display:flex;flex-direction:column;min-width:0;min-height:0;height:100%;overflow:hidden}.sidebar-resizer{position:relative;cursor:col-resize;background:var(--border);transition:background .15s;display:flex;align-items:center;justify-content:center}.sidebar-resizer:before{content:"";position:absolute;top:0;bottom:0;left:-3px;right:-3px;z-index:5}.sidebar-resizer:hover,.messenger--resizing .sidebar-resizer{background:var(--accent)}.sidebar-resizer__grip{width:2px;height:32px;border-radius:1px;background:var(--text-muted);opacity:0;transition:opacity .15s;pointer-events:none}.sidebar-resizer:hover .sidebar-resizer__grip,.messenger--resizing .sidebar-resizer__grip{opacity:.6;background:#fff}.sidebar-header{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--bg-header);flex-shrink:0}.sidebar-header input{flex:1;background:var(--bg-input);border:none;border-radius:20px;padding:9px 16px;outline:none;font-size:14px}.sidebar-header__new-wrap{position:relative}.sidebar-header__new{font-size:20px;padding:6px 8px;border-radius:50%;opacity:.9;transition:background .15s}.sidebar-header__new:hover{opacity:1;background:var(--bg-hover)}.new-chat-menu{position:absolute;top:calc(100% + 6px);right:0;background:var(--bg-input);border-radius:10px;box-shadow:var(--shadow);min-width:200px;z-index:50;overflow:hidden;padding:4px}.new-chat-menu button{display:flex;align-items:center;gap:12px;width:100%;padding:10px 14px;text-align:left;font-size:14px;border-radius:6px;transition:background .12s}.new-chat-menu button:hover{background:var(--bg-hover)}.new-chat-menu__icon{font-size:18px}.chat-list{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;min-height:0}.chat-list--loading,.chat-list--empty{padding:40px 20px;text-align:center;color:var(--text-muted);font-size:14px}.chat-list--empty span{display:block;margin-top:8px;font-size:12px}.chat-item{display:flex;align-items:center;gap:12px;width:100%;padding:10px 14px;text-align:left;transition:background .12s}.chat-item:hover,.chat-item--active{background:var(--bg-hover)}.chat-item__body{flex:1;min-width:0}.chat-item__top,.chat-item__bottom{display:flex;justify-content:space-between;align-items:center;gap:8px}.chat-item__title{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-item__time{font-size:12px;color:var(--text-muted);flex-shrink:0}.chat-item__preview{font-size:13px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.chat-item__badge{background:var(--accent);color:#fff;font-size:11px;font-weight:700;min-width:20px;height:20px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 6px}.messenger-main{min-width:0;min-height:0;height:100%;display:flex;flex-direction:column;overflow:hidden}.chat-window{flex:1;display:flex;flex-direction:column;background:var(--bg-app);min-height:0;position:relative}.chat-window--with-bg .chat-messages{background-image:var(--chat-bg);background-size:cover;background-position:center;background-repeat:no-repeat}.chat-window--with-bg .chat-messages:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--bg-overlay);pointer-events:none;z-index:0}.chat-window--with-bg .chat-messages>*{position:relative;z-index:1}.chat-window--empty{align-items:center;justify-content:center}.chat-window__placeholder{text-align:center;color:var(--text-muted)}.chat-window__logo{width:100px;height:100px;margin:0 auto 20px;border-radius:50%;background:linear-gradient(135deg,#5288c1,#3d6a9e);display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:700;color:#fff}.chat-window__placeholder h2{color:var(--text);margin-bottom:8px}.chat-header{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--bg-header);border-bottom:1px solid var(--border);flex-shrink:0}.chat-header--clickable{cursor:pointer;transition:background .12s}.chat-header--clickable:hover{background:var(--bg-hover)}.chat-header__chevron{color:var(--text-muted);font-size:22px;margin-left:auto}.chat-header__back{display:none;font-size:22px;padding:4px 8px}.chat-header__info{min-width:0}.chat-header__info strong{display:block;font-size:15px}.chat-header__info span{font-size:13px;color:var(--text-muted)}.chat-messages{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;min-height:0;padding:16px;display:flex;flex-direction:column;gap:4px;position:relative}.chat-messages__loading{text-align:center;color:var(--text-muted);padding:20px}.message-row{display:flex;align-items:flex-end;gap:8px;max-width:75%}.message-row--own{align-self:flex-end;flex-direction:row-reverse}.message-row--other{align-self:flex-start}.message-row__avatar-spacer{width:36px;flex-shrink:0}.message-bubble{position:relative;padding:8px 12px 6px;border-radius:var(--radius);max-width:100%}.message-bubble--own{background:var(--bg-bubble-own);border-bottom-right-radius:4px;color:var(--text)}.message-bubble--other{background:var(--bg-bubble-other);border-bottom-left-radius:4px;color:var(--text-bubble-other);box-shadow:0 1px 1px #00000014}.message-bubble__sender{display:block;font-size:12px;color:var(--accent);font-weight:600;margin-bottom:4px}.message-bubble__reply{border-left:3px solid var(--accent);padding-left:8px;margin-bottom:6px;font-size:13px;color:var(--text-muted)}.message-bubble__text{font-size:15px;line-height:1.45;word-break:break-word;white-space:pre-wrap}.message-bubble__image{max-width:280px;border-radius:8px;margin-bottom:4px;display:block}.message-bubble__file{display:block;margin-bottom:4px;color:var(--accent)}.message-bubble__time{display:block;text-align:right;font-size:11px;opacity:.55;margin-top:4px}.message-bubble__delete{position:absolute;top:-8px;right:-8px;width:20px;height:20px;border-radius:50%;background:var(--danger);color:#fff;font-size:14px;line-height:1;opacity:0;transition:opacity .15s}.message-bubble:hover .message-bubble__delete{opacity:1}.message-input-wrap{flex-shrink:0;background:var(--bg-header);border-top:1px solid var(--border)}.message-input-reply{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background:var(--bg-input);border-left:3px solid var(--accent);margin:8px 16px 0;border-radius:4px;font-size:13px}.message-input-reply span{display:block;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}.message-input{display:flex;align-items:center;gap:10px;padding:10px 16px}.message-input input[type=text]{flex:1;background:var(--bg-input);border:none;border-radius:22px;padding:12px 18px;outline:none}.message-input__attach{font-size:20px;padding:8px;opacity:.8}.voice-recorder{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--bg-header)}.voice-recorder__cancel,.voice-recorder__send{width:40px;height:40px;border-radius:50%;background:var(--bg-input);color:var(--text);font-size:16px;flex-shrink:0;transition:background .15s}.voice-recorder__cancel:hover{background:var(--danger);color:#fff}.voice-recorder__send{background:var(--accent);color:#fff;margin-left:auto}.voice-recorder__send:hover{background:var(--accent-hover)}.voice-recorder__dot{width:12px;height:12px;border-radius:50%;background:var(--danger);animation:pulse 1.2s infinite ease-in-out}.voice-recorder__timer{font-variant-numeric:tabular-nums;font-size:15px;font-weight:500;min-width:50px}.voice-recorder__hint{color:var(--text-muted);font-size:13px}.voice-recorder__error{color:#ff8a80;font-size:14px;padding:12px 16px}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.85)}}.voice-player{display:flex;align-items:center;gap:10px;min-width:200px;padding:4px 0}.voice-player__play{width:38px;height:38px;border-radius:50%;background:#ffffff26;color:#fff;font-size:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s}.voice-player__play:hover{background:#ffffff40}.voice-player__body{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.voice-player__bar{height:4px;background:#ffffff26;border-radius:2px;cursor:pointer;overflow:hidden}.voice-player__fill{height:100%;background:#ffffffd9;border-radius:2px;transition:width .1s linear}.voice-player__time{font-size:11px;color:#ffffffb3;font-variant-numeric:tabular-nums}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;display:flex;align-items:center;justify-content:center;z-index:100;padding:16px}.modal{background:var(--bg-sidebar);border-radius:12px;width:100%;max-width:420px;max-height:80vh;display:flex;flex-direction:column;box-shadow:var(--shadow)}.modal--profile{max-width:400px}.modal__header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border)}.modal__close{font-size:24px;color:var(--text-muted)}.modal__search{margin:12px 16px;background:var(--bg-input);border:none;border-radius:8px;padding:10px 14px;outline:none}.modal__list{overflow-y:auto;padding:0 8px 12px}.modal__hint{padding:20px;text-align:center;color:var(--text-muted);font-size:14px}.user-row{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:8px;text-align:left}.user-row:hover{background:var(--bg-hover)}.user-row>div{flex:1;min-width:0}.user-row strong{display:block;font-size:15px}.user-row span{font-size:13px;color:var(--text-muted)}.user-row--selected{background:#5288c126}.user-row__check{width:22px;height:22px;border-radius:50%;border:2px solid var(--text-muted);display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;flex-shrink:0}.user-row__check--on{background:var(--accent);border-color:var(--accent)}.modal--group{max-width:460px;max-height:85vh}.group-selected{display:flex;flex-wrap:wrap;gap:6px;padding:12px 16px 0}.group-selected__chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;background:var(--bg-input);border-radius:18px;font-size:13px;transition:background .12s}.group-selected__chip:hover{background:#e5393533}.group-selected__chip em{font-style:normal;color:var(--text-muted);font-size:16px;margin-left:2px}.modal__footer{padding:12px 16px 16px;border-top:1px solid var(--border)}.modal__footer--split{display:flex;gap:10px}.modal__error{margin:0 16px 8px;padding:8px 12px;background:#e5393526;color:#ff8a80;border-radius:6px;font-size:13px}.group-form{padding:20px;display:flex;flex-direction:column;gap:14px}.group-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--text-muted)}.group-form input,.group-form textarea{background:var(--bg-input);border:none;border-radius:8px;padding:10px 12px;outline:none;resize:vertical;font-family:inherit}.group-members-preview{background:var(--bg-input);border-radius:8px;padding:10px 12px}.group-members-preview>span{display:block;font-size:12px;color:var(--text-muted);margin-bottom:8px}.group-members-preview>div{display:flex;flex-wrap:wrap;gap:4px}.btn--ghost{background:var(--bg-input);color:var(--text);flex:0 0 auto}.btn--ghost:hover{background:var(--bg-hover)}.modal__footer--split .btn--primary{flex:1}.modal--group-info{max-width:440px;max-height:85vh;overflow:hidden}.group-info__header{text-align:center;padding:20px 16px 16px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;align-items:center;gap:8px}.group-info__header h3{font-size:20px;margin-top:8px}.group-info__header p{color:var(--text-muted);font-size:14px;margin:0 8px}.group-info__count{color:var(--text-muted);font-size:13px}.group-info__actions{display:flex;gap:8px;padding:12px 16px;border-bottom:1px solid var(--border)}.group-info__actions .btn{flex:1;margin-top:0}.group-info__members{padding:12px 8px;overflow-y:auto;flex:1;min-height:0}.group-info__members h4{font-size:13px;color:var(--text-muted);padding:0 12px 8px;text-transform:uppercase;font-weight:500;letter-spacing:.5px}.user-row--static{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px}.user-row--static:hover{background:var(--bg-hover)}.user-row--static>div{flex:1;min-width:0}.user-row--static strong em{font-style:normal;color:var(--text-muted);font-weight:400;font-size:13px}.user-row__remove{width:28px;height:28px;border-radius:50%;background:transparent;color:var(--text-muted);font-size:18px;line-height:1;opacity:0;transition:all .15s}.user-row--static:hover .user-row__remove{opacity:1}.user-row__remove:hover{background:var(--danger);color:#fff}.user-row--disabled{opacity:.5;cursor:not-allowed}.user-row--disabled:hover{background:transparent}.modal--file-preview{max-width:460px}.file-preview{padding:20px;display:flex;flex-direction:column;gap:14px}.file-preview__image-wrap{background:var(--bg-app);border-radius:10px;overflow:hidden;max-height:320px;display:flex;align-items:center;justify-content:center}.file-preview__image{max-width:100%;max-height:320px;-o-object-fit:contain;object-fit:contain;display:block}.file-preview__icon{font-size:60px;text-align:center;padding:24px;background:var(--bg-app);border-radius:10px}.file-preview__info{display:flex;flex-direction:column;gap:4px}.file-preview__name{font-size:15px;word-break:break-all;line-height:1.4}.file-preview__meta{color:var(--text-muted);font-size:13px}.file-preview__warn{color:#ff8a80;font-size:13px;margin-top:4px}.file-preview__caption{padding:0 20px}.file-preview__caption input{width:100%;background:var(--bg-input);border:none;border-radius:10px;padding:12px 14px;outline:none;color:var(--text)}.upload-progress{margin:8px 20px 0;display:flex;flex-direction:column;gap:6px}.upload-progress__bar{height:6px;background:var(--bg-input);border-radius:3px;overflow:hidden}.upload-progress__fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-hover));transition:width .2s ease-out;border-radius:3px}.upload-progress__text{font-size:12px;color:var(--text-muted);text-align:center;font-variant-numeric:tabular-nums}.bg-uploader{display:flex;flex-direction:column;gap:6px}.bg-uploader__label{font-size:13px;color:var(--text-muted)}.bg-uploader__preview{position:relative;height:130px;border-radius:10px;background:var(--bg-input);background-size:cover;background-position:center;border:2px dashed transparent;display:flex;align-items:center;justify-content:center;color:var(--text-muted);cursor:pointer;transition:border-color .15s;overflow:hidden}.bg-uploader__preview:hover{border-color:var(--accent)}.bg-uploader__preview--empty{border-color:#ffffff1f;font-size:14px}.bg-uploader__remove{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;background:var(--danger);color:#fff;font-size:18px;line-height:1;box-shadow:0 2px 6px #0006}.bg-uploader__hint{font-size:12px;color:var(--text-muted)}.telegram-link{display:flex;flex-direction:column;gap:8px;padding:14px;background:var(--bg-input);border-radius:10px;margin-top:4px}.telegram-link__label{font-size:14px;font-weight:600}.telegram-link__hint{font-size:12px;color:var(--text-muted);line-height:1.45}.telegram-link__status{font-size:12px;padding:8px 10px;border-radius:6px}.telegram-link__status--on{background:#4caf5026;color:#81c784}.telegram-link__status code{font-family:monospace;font-size:11px}.telegram-link input{background:var(--bg-app);border:1px solid var(--border);border-radius:8px;padding:10px 12px;outline:none;color:var(--text)}.telegram-link__actions{display:flex;gap:8px}.telegram-link__actions .btn{flex:1;margin-top:0}.telegram-link__error{font-size:12px;color:#ff8a80}.telegram-link__success{font-size:12px;color:#81c784}.group-info__telegram{display:block;font-size:13px;color:var(--accent);margin-top:4px}.profile-form{padding:20px;display:flex;flex-direction:column;gap:14px}.profile-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--text-muted)}.profile-form input,.profile-form textarea{background:var(--bg-input);border:none;border-radius:8px;padding:10px 12px;outline:none;resize:vertical}.profile-message{font-size:13px;color:#81c784;text-align:center}.profile-message--error{color:#ff8a80}.avatar-uploader{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:8px}.avatar-uploader__btn{position:relative;padding:0;border-radius:50%;cursor:pointer;background:transparent}.avatar-uploader__placeholder{border-radius:50%;background:var(--bg-input);border:2px dashed rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:28px;color:var(--text-muted)}.avatar-uploader__overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:center;justify-content:center;font-size:24px;opacity:0;transition:opacity .15s;pointer-events:none}.avatar-uploader__btn:hover .avatar-uploader__overlay{opacity:1}.avatar-uploader__remove{position:absolute;top:0;right:0;width:26px;height:26px;border-radius:50%;background:var(--danger);color:#fff;font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #0006;transition:transform .12s}.avatar-uploader__remove:hover{transform:scale(1.1)}.avatar-uploader__hint{font-size:13px;color:var(--accent)}.avatar-uploader__error{font-size:12px;color:#ff8a80}@media(max-width:768px){.messenger{grid-template-columns:1fr}.sidebar-resizer{display:none}.messenger-sidebar{display:flex}.messenger-main,.messenger--chat-open .messenger-sidebar{display:none}.messenger--chat-open .messenger-main{display:flex}.chat-header__back{display:block}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:3px}.theme-toggle{width:36px;height:36px;border-radius:50%;font-size:18px;transition:background .15s,transform .2s;flex-shrink:0}.theme-toggle:hover{background:var(--bg-hover);transform:rotate(15deg)}.theme-picker{margin-top:4px}.theme-picker__label{display:block;font-size:13px;color:var(--text-muted);margin-bottom:8px}.theme-picker__options{display:flex;gap:6px}.theme-picker__btn{flex:1;padding:10px 8px;border-radius:8px;background:var(--bg-input);color:var(--text);font-size:13px;transition:background .15s}.theme-picker__btn:hover{background:var(--bg-hover)}.theme-picker__btn--active{background:var(--accent);color:#fff}.theme-picker__btn--active:hover{background:var(--accent-hover)}
