#ch.tg .tg-left{position:relative;flex:0 0 var(--tg-left-w);width:var(--tg-left-w);height:100%;background:var(--tg-surface);border-inline-end:1px solid var(--tg-border);z-index:3;overflow:hidden}
#ch.tg .tg-left-slider{position:absolute;inset:0;overflow:hidden}
#ch.tg .tg-left-main,#ch.tg .tg-left-page{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--tg-surface);transition:transform var(--tg-t-in) var(--tg-ease),opacity var(--tg-t-in) var(--tg-ease)}
#ch.tg .tg-left-main.behind,#ch.tg .tg-left-page.behind{transform:translateX(25%);opacity:.0;pointer-events:none}
#ch.tg .tg-left-page{transform:translateX(-100%);z-index:2}
#ch.tg .tg-left-page.open{transform:none}
#ch.tg .tg-left-page.closing{transform:translateX(-100%);pointer-events:none}
#ch.tg .tg-left-page-head{flex:none;height:var(--tg-topbar-h);display:flex;align-items:center;gap:8px;padding:0 8px 0 12px}
#ch.tg .tg-left-page-title{flex:1;min-width:0;font-size:20px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-inline-start:8px}
#ch.tg .tg-left-page-extra{display:flex;gap:2px}
#ch.tg .tg-left-page-body{flex:1;min-height:0;position:relative;padding-bottom:16px}
#ch.tg .tg-left-head{flex:none;height:var(--tg-topbar-h);display:flex;align-items:center;gap:8px;padding:0 8px 0 12px;position:relative;z-index:2;background:var(--tg-surface)}
#ch.tg .tg-left-menu-btn .tgico{transition:transform .25s var(--tg-ease)}
#ch.tg .tg-left-main.searching .tg-left-menu-btn .tgico::before{content:"\e934"}
#ch.tg .tg-left-main.searching .tg-left-menu-btn .tgico{transform:scaleX(-1)}
#ch.tg .tg-search{position:relative;flex:1;display:flex;align-items:center;height:42px;border-radius:22px;background:var(--tg-input-bg);border:2px solid var(--tg-input-border);transition:border-color .2s,background-color .2s;cursor:text;min-width:0}
#ch.tg[data-theme="dark"] .tg-search,#ch.tg:not([data-theme]) .tg-search{background:#18211d;border-color:transparent}
#ch.tg .tg-search:focus-within{border-color:var(--tg-primary);background:var(--tg-surface)}
#ch.tg .tg-search-ic{font-size:24px;color:var(--tg-text-3);margin:0 10px 0 4px;transition:color .2s}
#ch.tg .tg-search:focus-within .tg-search-ic{color:var(--tg-primary)}
#ch.tg .tg-search-input{flex:1;min-width:0;height:100%;border:0;background:none;font-size:16px;color:var(--tg-text);padding:0 0 0 8px}
#ch.tg .tg-search-input::placeholder{color:var(--tg-text-3)}
#ch.tg .tg-search-clear{width:32px;height:32px;margin-inline-end:4px;opacity:0;pointer-events:none;transform:scale(.6);transition:opacity .15s,transform .15s}
#ch.tg .tg-search-clear .tgico{font-size:20px}
#ch.tg .tg-search.has-value .tg-search-clear{opacity:1;pointer-events:auto;transform:none}
#ch.tg .tg-page-search{margin:4px 16px 8px;flex:none}
#ch.tg .tg-conn{flex:none;height:0;overflow:hidden;transition:height .25s var(--tg-ease)}
#ch.tg .tg-conn.show{height:44px}
#ch.tg .tg-conn-in{display:flex;align-items:center;gap:12px;height:36px;margin:2px 12px 6px;padding:0 6px 0 12px;border-radius:10px;background:var(--tg-surface-2);font-size:14px;color:var(--tg-text-2)}
#ch.tg .tg-conn-in .tg-spinner{width:18px;height:18px;border-width:2px}
#ch.tg .tg-conn-in.off .tg-spinner{border-top-color:var(--tg-warning)}
#ch.tg .tg-conn-t{flex:1}
#ch.tg .tg-conn-retry{height:28px;padding:0 10px;font-size:13px}
#ch.tg .tg-folders-wrap{flex:none;position:relative;border-bottom:1px solid var(--tg-border);transition:opacity .2s,height .2s}
#ch.tg .tg-left-main.searching .tg-folders-wrap{opacity:0;pointer-events:none}
#ch.tg .tg-folders{display:flex;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:0 8px;height:46px;align-items:stretch}
#ch.tg .tg-folders::-webkit-scrollbar{display:none}
#ch.tg .tg-folder{position:relative;flex:none;display:flex;align-items:center;padding:0 12px;border-radius:10px 10px 0 0;font-size:15px;font-weight:500;color:var(--tg-text-2);white-space:nowrap;transition:color .2s}
#ch.tg .tg-folder:hover{background:var(--tg-hover)}
#ch.tg .tg-folder.active{color:var(--tg-primary)}
#ch.tg .tg-folder-t{position:relative;display:flex;align-items:center;gap:6px;height:100%;z-index:1}
#ch.tg .tg-folder-n{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--tg-badge-muted);color:#fff;font-size:12.5px;font-weight:600;display:inline-grid;place-items:center;line-height:1}
#ch.tg .tg-folder.active .tg-folder-n{background:var(--tg-primary);color:var(--tg-primary-text)}
#ch.tg .tg-folder-line{position:absolute;bottom:0;left:-4px;right:-4px;height:3px;border-radius:3px 3px 0 0;background:var(--tg-primary);transform:scaleX(0);transition:transform .25s var(--tg-ease)}
#ch.tg .tg-folder.active .tg-folder-line{transform:none}
#ch.tg .tg-chatlist-scroll{flex:1;min-height:0;position:relative}
#ch.tg .tg-chatlist{display:flex;flex-direction:column;padding:6px 8px 88px}
#ch.tg .tg-chat-row{position:relative;display:flex;align-items:center;height:72px;padding:0 9px;border-radius:12px;cursor:pointer;color:var(--tg-text);flex:none;transition:background-color .12s}
#ch.tg .tg-chat-row:hover{background:var(--tg-surface-2)}
#ch.tg .tg-chat-row.active{background:var(--tg-active-bg)}
#ch.tg .tg-chat-row .tg-avatar{z-index:1}
#ch.tg .tg-chat-main{position:relative;z-index:1;flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px;padding-inline-start:10px;height:100%}
#ch.tg .tg-chat-top,#ch.tg .tg-chat-bottom{display:flex;align-items:center;gap:4px;min-width:0;height:22px}
#ch.tg .tg-chat-title{flex:0 1 auto;min-width:0;font-size:16px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:22px}
#ch.tg .tg-chat-muted{font-size:16px;color:var(--tg-text-3);flex:none}
#ch.tg .tg-chat-meta{margin-inline-start:auto;flex:none;display:flex;align-items:center;gap:3px;padding-inline-start:8px}
#ch.tg .tg-chat-time{font-size:12.5px;color:var(--tg-text-2);white-space:nowrap}
#ch.tg .tg-chat-tick{font-size:19px;color:var(--tg-primary)}
#ch.tg .tg-chat-sub{flex:1;min-width:0;font-size:15px;color:var(--tg-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:22px;direction:rtl;text-align:start}
#ch.tg .tg-chat-sub>span{white-space:pre;unicode-bidi:isolate}
#ch.tg .tg-chat-sub-t{white-space:nowrap!important}
#ch.tg .tg-chat-sub-t.service{color:var(--tg-primary)}
#ch.tg .tg-chat-sender{color:var(--tg-text)}
#ch.tg .tg-chat-topic{color:var(--tg-text)}
#ch.tg .tg-chat-sep{color:var(--tg-text-3)}
#ch.tg .tg-chat-draft{color:var(--tg-danger)}
#ch.tg .tg-chat-sub.typing{color:var(--tg-primary);display:flex;align-items:center;gap:4px}
#ch.tg .tg-typing-dots{display:inline-flex;align-items:flex-end;gap:2px;height:10px;width:18px;flex:none}
#ch.tg .tg-typing-dots i{width:4px;height:4px;border-radius:50%;background:currentColor;animation:tg-typing 1.2s infinite ease-in-out}
#ch.tg .tg-typing-dots i:nth-child(2){animation-delay:.15s}
#ch.tg .tg-typing-dots i:nth-child(3){animation-delay:.3s}
@keyframes tg-typing{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}
#ch.tg .tg-chat-bottom .tg-badge{margin-inline-start:4px;animation:tg-badge-in .25s cubic-bezier(.35,.35,.47,1.34)}
#ch.tg .tg-badge-dot{width:22px;padding:0}
@keyframes tg-badge-in{from{transform:scale(0)}to{transform:scale(1)}}
#ch.tg .tg-chat-pin{font-size:20px;color:var(--tg-text-3);flex:none;margin-inline-start:4px}
#ch.tg .tg-chat-row.active .tg-chat-title,#ch.tg .tg-chat-row.active .tg-chat-sub,#ch.tg .tg-chat-row.active .tg-chat-time,#ch.tg .tg-chat-row.active .tg-chat-sender,#ch.tg .tg-chat-row.active .tg-chat-topic,#ch.tg .tg-chat-row.active .tg-chat-tick,#ch.tg .tg-chat-row.active .tg-chat-pin,#ch.tg .tg-chat-row.active .tg-chat-draft,#ch.tg .tg-chat-row.active .tg-chat-sub-t.service{color:var(--tg-active-text)}
#ch.tg .tg-chat-row.active .tg-chat-muted{color:var(--tg-active-text);opacity:.7}
#ch.tg .tg-chat-row.active .tg-avatar-online{border-color:var(--tg-active-bg);background:var(--tg-active-text)}
#ch.tg .tg-chat-row.active .tg-badge{background:var(--tg-active-text);color:var(--tg-active-bg)}
#ch.tg .tg-chat-row.compact{height:62px}
#ch.tg .tg-chat-row.compact .tg-avatar{width:46px!important;height:46px!important;font-size:18px!important}
#ch.tg .tg-avatar-online{bottom:1px;inset-inline-end:1px}
#ch.tg .tg-avatar-call{position:absolute;bottom:-1px;inset-inline-end:-1px;width:20px;height:20px;border-radius:50%;background:var(--tg-primary);border:2px solid var(--tg-surface);display:flex;align-items:center;justify-content:center;gap:1.5px}
#ch.tg .tg-avatar-call i{width:2px;height:8px;border-radius:1px;background:var(--tg-primary-text);animation:tg-vc 1s infinite ease-in-out}
#ch.tg .tg-avatar-call i:nth-child(2){animation-delay:.2s}
#ch.tg .tg-avatar-call i:nth-child(3){animation-delay:.4s}
@keyframes tg-vc{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
#ch.tg .tg-avatar-archive{background:linear-gradient(#9aa7a0,#6f7c75)}
#ch.tg .tg-avatar-archive .tgico{font-size:26px;color:#fff;width:auto;height:auto}
#ch.tg .tg-skel-row{display:flex;align-items:center;gap:12px;height:72px;padding:0 9px}
#ch.tg .tg-skel-row .a{width:54px;height:54px;border-radius:50%;background:var(--tg-surface-2);flex:none;animation:tg-pulse 1.4s infinite}
#ch.tg .tg-skel-row span{flex:1;display:flex;flex-direction:column;gap:10px}
#ch.tg .tg-skel-row span i{height:12px;border-radius:6px;background:var(--tg-surface-2);animation:tg-pulse 1.4s infinite}
#ch.tg .tg-fab{position:absolute;bottom:20px;inset-inline-end:20px;width:54px;height:54px;border-radius:50%;background:var(--tg-primary);color:var(--tg-primary-text);box-shadow:0 1px 8px rgba(0,0,0,.3);z-index:3;transform:translateY(90px);transition:transform .2s cubic-bezier(.34,1.56,.64,1),filter .15s}
#ch.tg .tg-fab:hover{background:var(--tg-primary);filter:brightness(1.08)}
#ch.tg .tg-fab .tgico{font-size:26px;color:var(--tg-primary-text)}
#ch.tg .tg-left-main:hover .tg-fab,#ch.tg .tg-fab:focus-visible,#ch.tg .tg-fab-static{transform:none}
#ch.tg .tg-left-main.searching .tg-fab{transform:translateY(90px)!important}
#ch.tg .tg-search-results{position:absolute;top:var(--tg-topbar-h);left:0;right:0;bottom:0;background:var(--tg-surface);z-index:2;padding:0 0 24px;animation:tg-fade-in .15s}
#ch.tg .tg-search-sec{padding-top:6px}
#ch.tg .tg-search-cap{display:flex;align-items:center;justify-content:space-between;padding:8px 20px 6px;font-size:14.5px;font-weight:500;color:var(--tg-text-2)}
#ch.tg .tg-search-clear-rec{font-size:14px;color:var(--tg-primary)}
#ch.tg .tg-search-items{display:flex;flex-direction:column;padding:0 8px}
#ch.tg .tg-search-people{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:2px 4px 6px}
#ch.tg .tg-search-people::-webkit-scrollbar{display:none}
#ch.tg .tg-search-person{flex:none;width:76px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 2px;border-radius:12px}
#ch.tg .tg-search-person:hover{background:var(--tg-surface-2)}
#ch.tg .tg-search-person span{font-size:12.5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#ch.tg .tg-search-wait{display:flex;justify-content:center;padding:28px}
#ch.tg mark.tg-hl{background:none;color:var(--tg-primary);font-weight:500}
#ch.tg .tg-person{margin:0;width:100%}
#ch.tg .tg-req-btns{display:flex;gap:4px;align-items:center;position:relative;z-index:2}
#ch.tg .tg-btn.small{height:32px;padding:0 12px;font-size:14px;border-radius:8px}
#ch.tg .tg-drawer-ov{position:absolute;inset:0;z-index:40;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .25s var(--tg-ease)}
#ch.tg .tg-drawer-ov.open{opacity:1;pointer-events:auto}
#ch.tg .tg-drawer{position:absolute;top:0;bottom:0;right:0;width:300px;z-index:41;background:var(--tg-surface);box-shadow:0 0 24px rgba(0,0,0,.4);transform:translateX(105%);transition:transform .28s var(--tg-ease);display:flex;flex-direction:column}
#ch.tg .tg-drawer.open{transform:none}
#ch.tg .tg-drawer-head{padding:20px 20px 12px;background:linear-gradient(160deg,rgba(var(--tg-primary-rgb),.22),rgba(var(--tg-primary-rgb),.04));border-bottom:1px solid var(--tg-border)}
#ch.tg .tg-drawer-top{display:flex;align-items:flex-start;justify-content:space-between}
#ch.tg .tg-drawer-night{margin:-4px -8px 0 0}
#ch.tg .tg-drawer-name{margin-top:12px;font-size:17px;font-weight:600}
#ch.tg .tg-drawer-status{display:flex;align-items:center;gap:7px;margin-top:4px;font-size:14px;color:var(--tg-text-2);padding:2px 0}
#ch.tg .tg-drawer-status:hover{color:var(--tg-text)}
#ch.tg .tg-drawer-chev{font-size:16px}
#ch.tg .tg-status-dot{width:10px;height:10px;border-radius:50%;background:var(--tg-text-3);flex:none}
#ch.tg .tg-status-dot.online{background:#3ba55d}
#ch.tg .tg-status-dot.idle{background:#faa61a}
#ch.tg .tg-status-dot.dnd{background:#ed4245}
#ch.tg .tg-drawer-items{padding:8px 0;flex:1}
#ch.tg .tg-drawer-item{position:relative;display:flex;align-items:center;gap:22px;width:calc(100% - 16px);height:44px;margin:0 8px;padding:0 14px;border-radius:10px;font-size:15px;font-weight:500;text-align:start}
#ch.tg .tg-drawer-item:hover{background:var(--tg-hover)}
#ch.tg .tg-drawer-item>.tgico{font-size:24px;color:var(--tg-text-2);position:relative;z-index:1}
#ch.tg .tg-drawer-item-t{flex:1;position:relative;z-index:1}
#ch.tg .tg-drawer-item .tg-toggle{pointer-events:none}
#ch.tg .tg-drawer-foot{padding:14px 22px 18px;display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--tg-text-3)}
#ch.tg .tg-drawer-foot b{font-weight:500;color:var(--tg-text-2)}
#ch.tg .tg-create{display:flex;flex-direction:column;align-items:stretch;padding:8px 20px}
#ch.tg .tg-create-av{width:120px;height:120px;border-radius:50%;display:grid;place-items:center;margin:8px auto 14px;color:#fff;transition:background-color .2s}
#ch.tg .tg-create-av .tgico{font-size:52px}
#ch.tg .tg-create-colors{display:flex;justify-content:center;gap:10px;margin-bottom:14px}
#ch.tg .tg-color{width:26px;height:26px;border-radius:50%;box-shadow:0 0 0 2px var(--tg-surface),0 0 0 2px transparent;transition:box-shadow .15s,transform .15s}
#ch.tg .tg-color.on{box-shadow:0 0 0 2px var(--tg-surface),0 0 0 4px var(--tg-text-2);transform:scale(1.05)}
#ch.tg .tg-create-hint{font-size:14px;color:var(--tg-text-2);line-height:1.6;margin:0 4px}
#ch.tg .tg-about{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:30px 24px}
#ch.tg .tg-about-logo{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;background:var(--tg-av-saved);color:#fff;margin-bottom:8px}
#ch.tg .tg-about-logo .tgico{font-size:48px}
#ch.tg .tg-about b{font-size:18px;font-weight:600}
#ch.tg .tg-about p{font-size:14.5px;color:var(--tg-text-2);line-height:1.7;margin:0}
#ch.tg .tg-about-small{font-size:12.5px!important;color:var(--tg-text-3)!important}
#ch.tg .tg-friend-prompt{display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:6px;text-align:center}

#ch.tg .tg-left-main.searching .tg-brand{display:none}

#ch.tg .tg-brand{flex:none;display:flex;align-items:center;gap:11px;padding:12px 18px 4px;background:var(--tg-surface)}
#ch.tg .tg-brand-ic{width:48px;height:48px;display:block;flex:none}
#ch.tg .tg-brand-ic svg{width:100%;height:100%;display:block;overflow:visible}
#ch.tg .tg-brand-col{display:flex;flex-direction:column;gap:1px;min-width:0}
#ch.tg .tg-brand-t{font-size:29px;font-weight:900;line-height:1.15;letter-spacing:-.3px;background:linear-gradient(100deg,#2fe685 0%,#7dffbc 35%,#1fc46c 55%,#2fe685 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:tg-brand-shine 6s linear infinite}
#ch.tg .tg-brand-s{font-size:10.5px;font-weight:600;letter-spacing:.4px;color:var(--tg-meta-c,var(--tg-text-2));opacity:.85}
#ch.tg .tg-left-main.searching .tg-brand{display:none}
#ch.tg .bx-all{transform-origin:32px 58px;animation:tg-bx-breathe 3.6s ease-in-out infinite}
#ch.tg .bx-bub{transform-origin:32px 14px;animation:tg-bx-pop 3.6s cubic-bezier(.34,1.4,.5,1) infinite}
#ch.tg .bx-bub .d1,#ch.tg .bx-bub .d2,#ch.tg .bx-bub .d3{animation:tg-bx-dot 1.2s ease-in-out infinite}
#ch.tg .bx-bub .d2{animation-delay:.2s}
#ch.tg .bx-bub .d3{animation-delay:.4s}
#ch.tg .bx-glow{transform-origin:32px 28px;animation:tg-bx-glow 3.6s ease-in-out infinite}
#ch.tg .bx-sp{transform-box:fill-box;transform-origin:center;animation:tg-bx-tw 2.4s ease-in-out infinite}
#ch.tg .bx-sp.s2{animation-delay:1.1s}
@keyframes tg-brand-shine{to{background-position:-220% 0}}
@keyframes tg-bx-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.025,.985)}}
@keyframes tg-bx-pop{0%,100%{transform:translateY(1px) scale(.94)}45%{transform:translateY(-2px) scale(1.04)}70%{transform:translateY(-1px) scale(1)}}
@keyframes tg-bx-dot{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-1.2px)}}
@keyframes tg-bx-glow{0%,100%{opacity:.5;transform:scale(.92)}50%{opacity:1;transform:scale(1.05)}}
@keyframes tg-bx-tw{0%,100%{opacity:0;transform:scale(.2) rotate(0)}50%{opacity:1;transform:scale(1) rotate(25deg)}}
@media (prefers-reduced-motion:reduce){#ch.tg .tg-brand-t,#ch.tg .bx-all,#ch.tg .bx-bub,#ch.tg .bx-bub circle,#ch.tg .bx-glow,#ch.tg .bx-sp{animation:none}}

#ch.tg .tg-brand-ic{border-radius:0;overflow:visible;box-shadow:none;filter:none}
#ch.tg .tg-brand-ic svg,#ch.tg .tg-brand-ic svg *{filter:none!important}
#ch.tg .bx-lid{animation:tg-lid 3.4s ease-in-out infinite}
@keyframes tg-lid{0%,100%{transform:translateY(0)}45%{transform:translateY(-14px)}70%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){#ch.tg .bx-lid{animation:none}}
#ch.tg .tg-drawer-grp .tg-drawer-chev{font-size:18px;color:var(--tg-text-2);transition:transform .2s var(--tg-ease)}
#ch.tg .tg-drawer-grp.open .tg-drawer-chev{transform:rotate(180deg)}
#ch.tg .tg-drawer-sub{display:none;padding-inline-start:14px}
#ch.tg .tg-drawer-sub.open{display:block}
#ch.tg .tg-drawer-sub .tg-drawer-item{height:40px;font-size:14px}