.chat-page{height:calc(100dvh - 44px);min-height:620px;padding:18px;background:#f4f7fb;color:#172033;font-family:Inter,"Be Vietnam Pro",sans-serif}.chat-shell{height:100%;display:grid;grid-template-columns:340px minmax(0,1fr);overflow:hidden;background:#fff;border:1px solid #e3e9f2;border-radius:20px;box-shadow:0 18px 50px rgba(38,55,84,.1)}.chat-sidebar{display:flex;min-width:0;flex-direction:column;border-right:1px solid #e7ebf2;background:#fbfcfe}.chat-sidebar-header,.chat-window-header,.chat-modal>header{display:flex;align-items:center;gap:12px}.chat-sidebar-header{height:88px;padding:18px 20px}.chat-sidebar-header h1,.chat-modal h2{margin:2px 0 0;font-size:1.4rem;font-weight:750}.chat-kicker{color:#3765d3;font-size:.72rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase}.chat-icon-btn,.chat-back{width:40px;height:40px;border:0;border-radius:12px;background:#edf3ff;color:#3262cf;font-size:1.05rem}.chat-sidebar-header .chat-icon-btn{margin-left:auto}.chat-search{display:flex;align-items:center;gap:10px;margin:0 16px 14px;padding:0 12px;height:44px;border:1px solid #e1e7f0;border-radius:12px;background:#fff;color:#8590a4}.chat-search:focus-within{border-color:#7b9be4;box-shadow:0 0 0 3px rgba(55,101,211,.09)}.chat-search input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:#202a3c}.chat-search button{border:0;background:transparent;color:#3765d3}.chat-conversation-list{min-height:0;overflow-y:auto;padding:2px 10px 16px}.chat-conversation{width:100%;display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:11px;padding:11px 10px;border:0;border-radius:14px;background:transparent;text-align:left;color:inherit}.chat-conversation:hover{background:#f0f4fb}.chat-conversation.is-active{background:#e9f0ff}.chat-avatar{--avatar-hue:220;position:relative;display:inline-grid;place-items:center;flex:0 0 auto;width:46px;height:46px;border-radius:50%;background:hsl(var(--avatar-hue) 65% 91%);color:hsl(var(--avatar-hue) 60% 35%);font-weight:750}.chat-online-badge{position:absolute;right:0;bottom:1px;width:12px;height:12px;border:2px solid #fff;border-radius:50%;background:#b7c0cd}.chat-online-badge.is-online{background:#21b878}.chat-conversation-main{min-width:0;display:flex;flex-direction:column;gap:4px}.chat-conversation-main strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.93rem}.chat-conversation-main small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#778399}.chat-conversation-meta{display:flex;align-items:flex-end;align-self:stretch;flex-direction:column;justify-content:center;gap:7px;color:#8c96a8;font-size:.7rem}.chat-conversation-meta b{display:grid;min-width:20px;height:20px;padding:0 5px;place-items:center;border-radius:20px;background:#3765d3;color:#fff;font-size:.68rem}.chat-empty{display:grid;place-items:center;padding:55px 20px;color:#8a95a7;text-align:center}.chat-empty>i{font-size:2.5rem;color:#b4c2dc}.chat-empty button{border:0;background:none;color:#3765d3;font-weight:700}.chat-window{min-width:0;display:flex;flex-direction:column;background:linear-gradient(180deg,#f9fbff 0,#f6f8fc 100%)}.chat-window-header{height:88px;padding:14px 22px;border-bottom:1px solid #e4e9f1;background:rgba(255,255,255,.94)}.chat-window-header h2{margin:0;font-size:1.04rem;font-weight:750}.chat-window-header small{color:#768298}.chat-window-header .chat-avatar{width:45px;height:45px}.chat-back{display:none}.chat-welcome{display:grid;height:100%;place-content:center;justify-items:center;padding:30px;text-align:center;color:#79869b}.chat-welcome>div{display:grid;width:82px;height:82px;place-items:center;border-radius:28px;background:#e8efff;color:#3765d3;font-size:2.2rem}.chat-welcome h2{margin:18px 0 6px;color:#263249}.chat-messages{min-height:0;flex:1;overflow-y:auto;padding:22px clamp(16px,4vw,55px)}.chat-load-more{display:block;margin:0 auto 22px;padding:8px 14px;border:1px solid #dbe3ef;border-radius:20px;background:#fff;color:#536178;font-size:.78rem}.chat-message{display:flex;justify-content:flex-start;margin:8px 0}.chat-message.is-mine{justify-content:flex-end}.chat-bubble{max-width:min(72%,620px);padding:10px 13px 7px;border:1px solid #e1e6ee;border-radius:6px 18px 18px 18px;background:#fff;box-shadow:0 3px 10px rgba(38,55,84,.05)}.chat-message.is-mine .chat-bubble{border-color:#3765d3;border-radius:18px 6px 18px 18px;background:#3765d3;color:#fff}.chat-sender{margin-bottom:4px;color:#3765d3;font-size:.75rem;font-weight:750}.chat-reply-preview{margin-bottom:7px;padding:7px 9px;border-left:3px solid #8eaae8;border-radius:6px;background:rgba(55,101,211,.08);overflow:hidden;color:#59677e;font-size:.76rem;text-overflow:ellipsis;white-space:nowrap}.chat-message.is-mine .chat-reply-preview{border-color:#c9d8ff;background:rgba(255,255,255,.14);color:#eaf0ff}.chat-message-text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.91rem;line-height:1.5}.chat-recalled{color:#7f8a9d;font-size:.86rem;font-style:italic}.chat-message.is-mine .chat-recalled{color:#e0e8fc}.chat-bubble footer{display:flex;align-items:center;justify-content:flex-end;gap:5px;margin-top:5px;color:#98a1b0;font-size:.65rem}.chat-bubble footer button{display:grid;width:25px;height:24px;place-items:center;border:0;border-radius:8px;background:transparent;color:inherit;opacity:.7}.chat-bubble footer button:hover{background:rgba(50,70,100,.09);opacity:1}.chat-message.is-mine .chat-bubble footer{color:#d8e3ff}.chat-image-link img{display:block;max-width:100%;max-height:340px;margin-top:7px;border-radius:12px;object-fit:cover}.chat-file{display:flex;min-width:250px;align-items:center;gap:10px;margin-top:7px;padding:10px;border-radius:11px;background:#f1f4f9;color:#263249;text-decoration:none}.chat-file>i:first-child{font-size:1.35rem;color:#3765d3}.chat-file>i:last-child{margin-left:auto}.chat-file span{display:flex;min-width:0;flex-direction:column}.chat-file strong{overflow:hidden;font-size:.78rem;text-overflow:ellipsis;white-space:nowrap}.chat-file small{color:#8a95a7}.chat-message.is-mine .chat-file{background:rgba(255,255,255,.14);color:#fff}.chat-message.is-mine .chat-file small,.chat-message.is-mine .chat-file>i{color:#dfe8ff}.chat-composer{padding:10px 18px 12px;border-top:1px solid #e2e7ef;background:#fff}.chat-composer-row{display:flex;align-items:flex-end;gap:10px}.chat-composer textarea{min-height:44px;max-height:130px;flex:1;resize:none;padding:11px 14px;border:1px solid #dce3ed;border-radius:15px;outline:0;font:inherit;font-size:.9rem}.chat-composer textarea:focus{border-color:#7194e0;box-shadow:0 0 0 3px rgba(55,101,211,.08)}.chat-attach,.chat-send{display:grid;width:44px;height:44px;place-items:center;border:0;border-radius:13px;background:#edf2fb;color:#3765d3;cursor:pointer}.chat-attach input{display:none}.chat-send{background:#3765d3;color:#fff}.chat-send:disabled{opacity:.45}.chat-composer-hint{display:block;margin:5px 54px 0;color:#9aa3b2;font-size:.62rem}.chat-composer-reply{display:flex;align-items:center;gap:9px;margin:0 50px 8px;padding:7px 10px;border-radius:10px;background:#f0f4fb;color:#536178}.chat-composer-reply span{display:flex;min-width:0;flex:1;flex-direction:column}.chat-composer-reply small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-composer-reply button{border:0;background:transparent}.chat-selected-files{display:flex;gap:6px;overflow-x:auto;margin:0 50px 8px}.chat-selected-files span{padding:5px 8px;border-radius:8px;background:#edf2fb;color:#536178;font-size:.72rem;white-space:nowrap}.chat-selected-files button{border:0;background:transparent}.chat-modal-backdrop{position:fixed;z-index:1100;inset:0;display:grid;place-items:center;padding:20px;background:rgba(21,29,45,.5);backdrop-filter:blur(3px)}.chat-modal{display:flex;width:min(520px,100%);max-height:min(720px,90dvh);flex-direction:column;overflow:hidden;border-radius:20px;background:#fff;box-shadow:0 30px 80px rgba(10,20,40,.25)}.chat-modal>header{padding:20px}.chat-modal>header button{margin-left:auto;border:0;background:transparent}.chat-modal .chat-search{margin-bottom:10px}.chat-user-list{min-height:120px;overflow-y:auto;padding:0 12px 16px}.chat-user-list>button,.chat-user-list>label{width:100%;display:flex;align-items:center;gap:12px;padding:10px;border:0;border-radius:12px;background:#fff;text-align:left;color:inherit}.chat-user-list>button:hover,.chat-user-list>label:hover{background:#f3f6fb}.chat-user-list .chat-avatar{width:42px;height:42px}.chat-user-list button>span:not(.chat-avatar),.chat-user-list label>span:not(.chat-avatar){display:flex;min-width:0;flex:1;flex-direction:column}.chat-user-list small{color:#8994a6}.chat-user-list button>i{color:#3765d3}.chat-field{display:flex;flex-direction:column;gap:6px;padding:0 20px 14px;font-size:.8rem;font-weight:650}.chat-field input{height:44px;padding:0 12px;border:1px solid #dce3ed;border-radius:11px}.chat-modal>footer{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-top:1px solid #e6ebf2;color:#788397;font-size:.8rem}.chat-notice{position:fixed;z-index:1200;top:18px;left:50%;display:flex;align-items:center;gap:9px;padding:11px 14px;transform:translateX(-50%);border-radius:12px;background:#153f31;color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.16)}.chat-notice.is-error{background:#8f2831}.chat-notice button{border:0;background:transparent;color:#fff}.chat-nav-badge{display:inline-grid;min-width:19px;height:19px;margin-left:auto;padding:0 5px;place-items:center;border-radius:20px;background:#e2384f;color:#fff;font-size:.65rem;font-weight:700}
@media(max-width:780px){.chat-page{height:calc(100dvh - 20px);min-height:0;padding:8px}.chat-shell{grid-template-columns:1fr;border-radius:14px}.chat-sidebar,.chat-window{grid-column:1;grid-row:1}.chat-sidebar.is-mobile-hidden,.chat-window.is-mobile-hidden{display:none}.chat-back{display:grid;place-items:center}.chat-window-header{height:72px;padding:10px}.chat-sidebar-header{height:76px}.chat-messages{padding:14px 10px}.chat-bubble{max-width:86%}.chat-composer{padding:8px}.chat-composer-hint{display:none}.chat-composer-reply,.chat-selected-files{margin-left:44px;margin-right:0}.chat-file{min-width:220px}}
@media(prefers-color-scheme:dark){body.dark .chat-page{background:#101522;color:#e8edf7}body.dark .chat-shell,body.dark .chat-sidebar,body.dark .chat-window-header,body.dark .chat-composer,body.dark .chat-modal{background:#171d2a;border-color:#2a3344}body.dark .chat-window{background:#121823}body.dark .chat-search,body.dark .chat-bubble,body.dark .chat-user-list>button,body.dark .chat-user-list>label{background:#1c2432;border-color:#313c50;color:#edf2fa}body.dark .chat-conversation:hover,body.dark .chat-conversation.is-active{background:#252f42}body.dark .chat-composer textarea,body.dark .chat-field input{background:#141b27;border-color:#344057;color:#edf2fa}}