@satek-team-intern/chatbot-widget 0.10.3 → 0.10.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +2 -2
  2. package/dist/chatbot-widget.es.js +166 -217
  3. package/dist/chatbot-widget.umd.js +6 -5
  4. package/dist/src/assets/Icons.d.ts +1 -1
  5. package/package.json +1 -1
package/dist/chatbot-widget.es.js CHANGED
@@ -7,7 +7,7 @@ import { createMp3Encoder as C } from "wasm-media-encoders";
7
7
  import { Fragment as w, jsx as T, jsxs as E } from "react/jsx-runtime";
8
8
  //#endregion
9
9
  //#region src/styles/index.ts
10
- var D = "\n #chat-internal-root{z-index:99999;pointer-events:none;font-family:Inter,-apple-system,sans-serif;font-size:16px;font-weight:400;line-height:24px;display:block;position:fixed;bottom:0;right:0}#chat-internal-root *{box-sizing:border-box;pointer-events:auto}#chat-internal-root ::-webkit-scrollbar{width:5px;height:5px}#chat-internal-root ::-webkit-scrollbar-thumb{background-color:#0000001a;border-radius:4px}#chat-internal-root ::-webkit-scrollbar-thumb:hover{background-color:#0003}.chatbot-container{width:100%;height:100%;position:relative}\n .floating-button{background:var(--primary);-webkit-backdrop-filter:blur(25px)saturate(150%);color:#fff;cursor:pointer;z-index:99999;border:1px solid #fff6;border-radius:20px;outline:none;justify-content:center;align-items:center;width:64px;height:64px;transition:all .4s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;bottom:24px;right:24px;box-shadow:0 12px 40px #0000000d,inset 0 0 0 1px #fff6}.floating-button:hover{transform:scale(1.1)rotate(5deg)}.floating-button:active{transform:scale(.95)}.floating-button .ping{pointer-events:none;background:#fff3;border-radius:16px;animation:2s cubic-bezier(0,0,.2,1) infinite ping;position:absolute;inset:0}@keyframes ping{75%,to{opacity:0;transform:scale(1.5)}}.floating-button .icon{z-index:10;font-size:24px;position:relative}\n .chat-window{--primary:#155dfc;--chat-bg:#fff;--chat-text:#101828;--chat-subtext:#6a7282;--chat-header-bg:#fff;--chat-border:#e5e7eb;--sidebar-bg:#fff}.chat-window.dark-theme{--chat-bg:color-mix(in srgb, var(--primary), #0f172a99 85%);--chat-text:#f8fafc;--chat-subtext:#94a3b8;--chat-header-bg:color-mix(in srgb, var(--primary), #1e293b99 80%);--chat-border:#334155;--sidebar-bg:color-mix(in srgb, var(--primary), #0f172a66 95%)}.chat-window{background:var(--chat-bg);-webkit-backdrop-filter:blur(20px)saturate(180%);backdrop-filter:blur(20px)saturate(180%);border:1px solid var(--chat-border);z-index:99998;width:420px;height:640px;color:var(--chat-text);transform-origin:100% 100%;border-radius:14px;flex-direction:column;max-width:100%;max-height:100%;margin:0;transition:none;animation:.6s cubic-bezier(.34,1.56,.64,1) slideUp;display:flex;position:fixed;bottom:90px;right:20px;overflow:hidden;transform:none;box-shadow:0 8px 32px #0000005e,inset 0 0 0 1px #ffffff0d}.chat-window.fullpage{--chat-bg:#fff;--chat-header-bg:#fff;--chat-border:#f1f5f9;--sidebar-bg:#fff;--app-sidebar-bg:#f9f9f9;--active-item-bg:#f1f5f9;-webkit-backdrop-filter:none;z-index:9999;border-radius:16px;flex-direction:column;display:flex;transform:none}.chat-main-layout{--chat-bg:#fff;--chat-header-bg:#fff;--chat-border:#f1f5f9;--sidebar-bg:#fff;--active-item-bg:#f1f5f9;-webkit-backdrop-filter:none;z-index:9999;background-color:var(--app-sidebar-bg);border-radius:0;flex-direction:row;flex:1;width:100%;max-width:none;height:100vh;display:flex;inset:0;overflow:hidden;transform:none}.chat-window.fullpage.dark-theme{--chat-bg:#0f172a;--chat-header-bg:#1e293b;--chat-border:#334155;--sidebar-bg:#0f172a;--app-sidebar-bg:#1e293b;--active-item-bg:#334155;overflow:hidden}.chat-header{background:var(--chat-header-bg);color:var(--chat-text);flex-shrink:0;justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.header-info{align-items:center;gap:8px;display:flex}.header-logo{flex-shrink:0;justify-content:center;align-items:center;padding-left:6px;padding-right:8px;display:flex}.header-logo img,.header-logo .satek-icon{object-fit:contain;width:22px;height:22px}.back-btn{color:#64748b;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;margin-right:8px;padding:0;font-size:20px;display:flex}.header-info-text{align-items:center;gap:6px;min-width:0;display:flex}.header-dot{color:var(--chat-subtext);opacity:.6}.header-title{color:var(--chat-text);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.header-subtitle{color:var(--chat-subtext);white-space:nowrap;text-overflow:ellipsis;font-size:16px;font-weight:400;overflow:hidden}.chat-body-container{border-top-left-radius:8px;flex-direction:row;flex:1;display:flex;position:relative;overflow:hidden}.chat-sidebar{background:var(--sidebar-bg);border-right:1px solid #0000000d;flex-direction:column;width:100%;transition:all .3s;display:flex}.chat-sidebar.is-full{flex-shrink:0;width:320px}.chat-search-bar{background:0 0;align-items:center;gap:4px;padding:12px 12px 4px;display:flex}.search-input-wrapper{flex:1;align-items:center;display:flex;position:relative}.search-icon{color:#94a3b8;pointer-events:none;width:16px;height:16px;position:absolute;left:12px}.search-input{color:#1e293b;background:#f3f4f6;border:1px solid #0000;border-radius:8px;outline:none;width:100%;padding:8px 36px;font-size:14px;transition:all .3s}.search-input:focus{background:#fff;border-color:#a855f74d;box-shadow:0 4px 12px #00000008}.clear-search{color:#94a3b8;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:4px;font-size:18px;display:flex;position:absolute;right:10px}.clear-search:hover{color:#64748b}.sidebar-scroll{flex:1;padding:0 8px 20px;overflow-y:auto}.chat-filter-tabs{gap:24px;margin:0 12px;display:flex;position:relative}.chat-filter-tabs:before{content:\"\";background-color:#0000000d;height:1px;position:absolute;bottom:0;left:0;right:0}.chat-filter-tabs button{cursor:pointer;color:#667085;background:0 0;border:none;align-items:center;gap:6px;padding:8px 0;font-size:13px;font-weight:500;transition:all .2s;display:flex;position:relative}.chat-filter-tabs button.active{color:#155dfc;font-weight:600}.chat-filter-tabs button.active:after{content:\"\";z-index:1;background-color:#155dfc;border-radius:2px;height:2px;position:absolute;bottom:0;left:0;right:0}.filter-unread-badge-container{align-items:center;gap:6px;display:flex}.filter-unread-badge{color:#fff;background-color:#f04438;border-radius:9px;justify-content:center;align-items:center;min-width:18px;height:18px;padding:0 4px;font-size:11px;font-weight:600;display:flex}.sidebar-scroll::-webkit-scrollbar{width:5px;margin-left:10px}.sidebar-scroll::-webkit-scrollbar-thumb{background:#0000000d;border-radius:10px}.member-search-section{border-top:1px solid #00000008;margin-top:10px;padding:20px 0;animation:.3s fadeIn}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.member-search-section .section-header{color:var(--chat-text);text-transform:uppercase;letter-spacing:1px;padding:0 20px 12px;font-size:11px;font-weight:700}.member-search-section .members-list{max-height:none;padding:0 10px}.member-search-section .member-item{background:0 0;border:none;margin-bottom:4px;padding:10px 12px}.member-search-section .member-item:hover{background:#fff6}.chat-main{background:#ffffff1a;flex-direction:column;flex:1;display:flex;position:relative;overflow:hidden}.drag-overlay-full{pointer-events:none;z-index:10;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0009;border:3px dashed #a855f7cc;justify-content:center;align-items:center;animation:.2s fadeIn;display:flex;position:absolute;inset:0}.drag-overlay-full .drag-content{color:#fff;text-shadow:0 2px 4px #0000004d;flex-direction:row;align-items:center;gap:12px;display:flex}.drag-overlay-full .drag-icon{font-size:20px;animation:.6s ease-in-out infinite bounce}.chat-list{background:0 0;flex:1;overflow-y:auto}.chat-item{cursor:pointer;border-radius:8px;align-items:center;gap:12px;height:64px;padding:8px;transition:background .1s ease-in-out;display:flex;position:relative}.chat-item:hover{background:#eff6ff99}.chat-item.active{background:#eff6ff}.chat-item-avatar{justify-content:center;align-items:center;width:32px;height:32px;font-size:22px;display:flex;position:relative}.online-indicator{z-index:1;background-color:#22c55e;border:2px solid #fff;border-radius:50%;width:12px;height:12px;position:absolute;bottom:2px;right:2px}.chat-item-info{flex:1;overflow:hidden}.chat-item-name{color:var(--chat-text);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.chat-item-last{flex:1;min-width:0}.last-message-text{color:var(--chat-subtext);white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;display:block;overflow:hidden}.info-bottom-right{flex-shrink:0;align-items:center;gap:4px;margin-top:4px;display:flex}.mute-icon-list{color:#94a3b8;flex-shrink:0}.chat-item.active .chat-item-last{color:var(--chat-text)}.unread-badge{color:#fff;z-index:2;background:linear-gradient(135deg,#f43f5e,#e11d48);border:2px solid #fff;border-radius:50%;justify-content:center;align-items:center;min-width:18px;height:18px;padding:10px 7px;font-size:10px;font-weight:700;display:flex;position:absolute;top:-4px;right:-4px;box-shadow:0 2px 4px #0000001a}.chat-item-time{color:var(--chat-subtext);white-space:nowrap}.chat-list-section{margin-bottom:16px}.empty-chat-list{padding:12px 8px 4px}.section-header{color:#64748b;text-transform:none;align-items:center;gap:6px;padding:12px 8px 4px;display:flex}.section-icon{color:#94a3b8}.info-top-row{justify-content:space-between;align-items:baseline;margin-bottom:2px;display:flex}.info-bottom-row{justify-content:space-between;align-items:center;display:flex}.unread-badge-circle{color:#fff;background-color:#3b82f6;border-radius:9px;justify-content:center;align-items:center;min-width:18px;height:18px;margin-left:8px;padding:0 5px;font-size:10px;font-weight:600;display:flex}.chat-options-wrapper{opacity:0;pointer-events:none;z-index:100;justify-content:center;align-items:center;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;top:50%;right:12px;transform:translateY(-50%)scale(.8)}.chat-item:hover .chat-options-wrapper,.chat-item.has-open-dropdown .chat-options-wrapper{opacity:1;pointer-events:auto;transform:translateY(-50%)scale(1)}.chat-options-btn{-webkit-backdrop-filter:blur(8px);color:#64748b;cursor:pointer;background:#ffffff26;border:1px solid #fff3;border-radius:10px;justify-content:center;align-items:center;width:32px;height:32px;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex}.chat-options-btn:hover,.chat-options-btn.active{color:#1e293b;background:#ffffff4d;border-color:#fff6;transform:scale(1.05)}.chat-options-btn svg{width:18px;height:18px}.chat-options-dropdown{-webkit-backdrop-filter:blur(20px)saturate(160%);z-index:1000;background:#ffffffe6;border:1px solid #fff9;border-radius:14px;flex-direction:column;gap:4px;min-width:160px;padding:6px;animation:.2s cubic-bezier(.4,0,.2,1) dropdownFadeIn;display:flex;position:absolute;top:calc(100% + 8px);right:0;box-shadow:0 10px 25px -5px #0000001a,0 8px 10px -6px #0000001a}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-10px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}.dropdown-item{color:#334155;cursor:pointer;border-radius:10px;align-items:center;gap:10px;padding:10px 12px;font-size:13px;font-weight:500;transition:all .2s;display:flex}.dropdown-item:hover{color:#0f172a;background:#0000000a}.dropdown-item.delete{color:#ef4444}.dropdown-item.delete:hover{color:#dc2626;background:#ef444414}.dropdown-icon{flex-shrink:0;width:16px;height:16px}.header-actions{gap:4px;display:flex}.action-btn{color:#667085;cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;width:28px;height:28px;padding:6px;transition:all .2s;display:flex}.action-btn:hover{color:#101828;background:#f2f4f7}.action-btn.close-btn:hover{color:#ef4444;background:#fee2e2}.add-group-btn{color:#667085;cursor:pointer;background:#f9fafb;border:1px solid #f2f4f7;border-radius:8px;justify-content:center;align-items:center;width:36px;height:36px;transition:all .2s;display:flex}.add-group-btn:hover{color:#101828;background:#f2f4f7;border-color:#eaecf0}.dark-theme .add-group-btn{color:#f8fafc;background:#1e293b66;border-color:#ffffff1a}.dark-theme .add-group-btn:hover{background:#1e293bcc;border-color:#fff3}.theme-toggle{background:#fff6;border:1px solid #ffffff80;border-radius:12px;font-size:16px;transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 12px #0000000d}.theme-toggle:hover{background:#fff;box-shadow:0 8px 20px #0000001a;transform:rotate(15deg)scale(1.1)!important}.dark-theme .theme-toggle{color:#f8fafc;background:#1e293b66;border-color:#ffffff1a}.dark-theme .theme-toggle:hover{background:#1e293bcc;border-color:#fff3}.modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:100000;background:#0006;justify-content:center;align-items:center;animation:.3s modalFadeIn;display:flex;position:absolute;inset:0}.modal-content{background:color-mix(in srgb, var(--primary), #ffffffb3 92%);-webkit-backdrop-filter:blur(30px)saturate(150%);border:1px solid #fffc;border-radius:36px;width:90%;max-width:380px;height:85%;padding:32px;animation:.4s cubic-bezier(.175,.885,.32,1.275) modalPopUp;overflow-y:auto;box-shadow:0 30px 60px #00000014}.dark-theme .modal-content{background:color-mix(in srgb, var(--primary), #1e293bb3 90%);color:#f8fafc;border-color:#ffffff1a}.modal-content::-webkit-scrollbar-track{margin:10px 0}.modal-title{color:var(--chat-text);text-align:center;letter-spacing:-.5px;margin-bottom:24px;font-size:22px;font-weight:800}.modal-input{color:#1e293b;background:#fff;border:1px solid #0000000d;border-radius:18px;outline:none;width:100%;margin-bottom:28px;padding:16px 20px;font-size:15px;transition:all .3s}.modal-input:focus{background:#ffffff14;border-color:#155dfc;box-shadow:0 0 0 4px #155dfc26}.members-section{margin-bottom:24px}.section-title{color:#64748b;text-transform:uppercase;letter-spacing:1px;padding-left:4px;font-size:11px;font-weight:700;display:block}.members-list{max-height:250px;margin:0 -4px;padding:4px;overflow-y:auto}.members-list::-webkit-scrollbar{width:5px}.members-list::-webkit-scrollbar-thumb{background:#4f46e533;border-radius:10px}.member-item{cursor:pointer;background:#fff6;border:1px solid #0000;border-radius:16px;align-items:center;gap:14px;padding:12px;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex}.member-item:hover{background:#fffc}.remove-member-btn{color:#94a3b8;cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;margin-left:auto;padding:6px;transition:all .2s;display:flex}.remove-member-btn:hover{color:#ef4444;background:#ef44441a;transform:scale(1.1)}.remove-member-btn svg{width:18px;height:18px}.member-avatar{background:linear-gradient(135deg,#f8fafc 0%,#e2e8f0 100%);border:2px solid #fff;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:20px;display:flex;box-shadow:0 2px 5px #0000000d}.member-name{color:var(--chat-text);flex:1;font-size:14px;font-weight:600}.member-check{color:#fff;border:2px solid #e2e8f0;border-radius:50%;justify-content:center;align-items:center;width:22px;height:22px;font-size:11px;font-weight:700;transition:all .2s;display:flex}.member-item.selected .member-check{background:linear-gradient(135deg,#6366f1,#4f46e5);border-color:#4f46e5;transform:scale(1.1)}.modal-actions{gap:12px;margin-top:8px;display:flex}.modal-btn{cursor:pointer;border:none;border-radius:16px;flex:1;padding:14px;font-size:14px;font-weight:700;transition:all .3s cubic-bezier(.4,0,.2,1)}.modal-btn.cancel{color:#64748b;background:#f1f5f9cc}.modal-btn.cancel:hover{color:#0f172a;background:#f1f5f9}.modal-btn.confirm{color:#fff;background:linear-gradient(135deg,#6366f1,#4f46e5);box-shadow:0 10px 20px -5px #4f46e566}.modal-btn.confirm:hover{transform:translateY(-2px);box-shadow:0 15px 25px -5px #4f46e580}.modal-btn.disabled{color:#cbd5e1;cursor:not-allowed;box-shadow:none;background:#f1f5f9}.empty-chat-state h3{color:#1e293b;margin-bottom:8px;font-size:20px;font-weight:700}.empty-chat-state p{opacity:.8;font-size:15px}.modal-search-wrapper{margin-bottom:20px}.no-members-found{text-align:center;text-align:center;color:#9ca3af;background:#ffffff4d;border:1px dashed #0000000d;border-radius:16px;padding:20px;font-size:14px}.member-item.loading{cursor:not-allowed;opacity:.6}.member-add-action{color:#6366f1;background:#6366f11a;border-radius:6px;margin-left:auto;padding:4px 12px;font-size:13px;font-weight:700;transition:all .2s}.member-item:hover .member-add-action{color:#fff;background:#6366f1}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}@keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalPopUp{0%{opacity:0;transform:scale(.8)translateY(30px)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(40px)scale(.9)}to{opacity:1;transform:translateY(0)scale(1)}}.theme-modal{max-width:300px!important;height:auto!important;padding:24px!important}.modal-header{justify-content:space-between;align-items:center;display:flex}.close-modal-btn{color:#94a3b8;cursor:pointer;background:0 0;border:none;padding:4px;font-size:24px;line-height:1}.theme-section{flex-direction:column;gap:12px;margin-bottom:24px;display:flex}.section-desc{color:#64748b;margin:0;font-size:13px;line-height:1.5}.color-presets{grid-template-columns:repeat(4,1fr);gap:12px;margin-top:8px;display:grid}.color-preset-btn{aspect-ratio:1;cursor:pointer;border:2px solid #fff;border-radius:50%;justify-content:center;align-items:center;width:40px;padding:0;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;box-shadow:0 2px 8px #0000001a}.color-preset-btn:hover{transform:scale(1.1);box-shadow:0 4px 12px #00000026}.color-preset-btn.active{border-color:#334155;transform:scale(1.15)}.check-icon{color:#fff;text-shadow:0 0 2px #00000080;font-size:14px;font-weight:700}.custom-color-picker{background:#fff;border:1px solid #0000000d;border-radius:12px;align-items:center;gap:12px;margin-top:8px;padding:8px 12px;display:flex}.color-input{cursor:pointer;background:0 0;border:none;border-radius:6px;width:32px;height:32px;padding:0;overflow:hidden}.color-input::-webkit-color-swatch-wrapper{padding:0}.color-input::-webkit-color-swatch{border:none;border-radius:6px}.color-hex-code{color:#64748b;font-weight:600}.contact-categories{flex-direction:column;gap:8px;padding:8px;display:flex}.category-item{cursor:pointer;color:var(--chat-text);border-radius:8px;align-items:center;gap:12px;width:100%;height:40px;padding:10px 12px;font-weight:500;transition:all .2s;display:flex}.category-item:hover{color:#1e293b;background:#f1f5f9}.category-item.active{color:#1447e6;background:#eff6ff}.category-item .count{color:#99a1af;border-radius:10px;margin-left:auto;padding:2px 8px}.contact-list-view{background:#fff;flex-direction:column;flex:1;height:100%;display:flex}.contact-list-header{color:var(--chat-text);border-bottom:1px solid #f1f5f9;height:45px;padding:10px 16px}.contact-list-toolbar{justify-content:space-between;align-items:center;padding:12px 16px 20px;display:flex}.toolbar-left{align-items:center;gap:20px;display:flex}.toolbar-left span{color:#64748b;font-weight:500}.toolbar-search{background:#f3f4f6;border-radius:6px;align-items:center;gap:8px;width:300px;height:36px;padding:12px;display:flex}.toolbar-search input{background:0 0;border:none;outline:none;width:100%;font-size:14px}.toolbar-right{gap:12px;height:36px;display:flex}.filter-select{cursor:pointer;color:#1e293b;background:#f3f4f6;border-radius:6px;align-items:center;gap:8px;padding:9px 12px;font-size:14px;display:flex}.dropdown-select{z-index:10;background:#fff;border:1px solid #e2e8f0;border-radius:8px;min-width:150px;margin-top:8px;position:absolute;top:100%;right:0;box-shadow:0 4px 6px #0000001a}.dropdown-select .dropdown-item{cursor:pointer;border-bottom:1px solid #e2e8f0;border-radius:0;align-items:center;gap:8px;height:40px;padding:12px 16px;display:flex}.dropdown-select .dropdown-item div{padding-top:3px}.contact-scroll-area{flex:1;padding:0 16px 16px;overflow-y:auto}.letter-title{color:var(--chat-subtext)}.contact-item-row{justify-content:space-between;align-items:center;height:64px;padding:12px 0;display:flex}.contact-item-left{align-items:center;gap:16px;display:flex}.contact-avatar{width:32px;height:32px;position:relative}.contact-avatar img{object-fit:cover;border-radius:50%;width:100%;height:100%}.contact-avatar .online-status{background:#22c55e;border:2px solid #fff;border-radius:50%;width:10px;height:10px;position:absolute;bottom:0;right:0}.contact-info{flex-direction:column;display:flex}.contact-name{color:var(--chat-text)}.contact-role{color:var(--chat-subtext)}.contact-item-actions{gap:8px;display:flex}.contact-action-btn{color:#64748b;cursor:pointer;background:#fff;border:1px solid #e2e8f0;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;transition:all .2s;display:flex}.contact-action-btn:hover{color:#1e293b;background:#f1f5f9;border-color:#cbd5e1}.chat-window.fullpage .chat-body-container{background:#fff;overflow:hidden;flex:1!important;width:100%!important;height:100%!important;display:flex!important}.chat-window.fullpage .chat-sidebar{border-right:1px solid var(--chat-border);background:#fff;flex-direction:column;flex-shrink:0;width:312px;display:flex}.chat-window.fullpage .chat-main{background:#fff;flex-direction:column;flex:1;display:flex;position:relative}.chat-main-header{border-bottom:1px solid var(--chat-border);background:#fff;flex-shrink:0;justify-content:space-between;align-items:center;min-height:64px;padding:12px 16px;display:flex}.chat-main-info{align-items:center;gap:10px;min-width:0;display:flex}.chat-main-avatar{flex-shrink:0;width:40px;height:40px}.chat-main-text{flex-direction:column;min-width:0;display:flex}.chat-main-text-container{align-items:center;gap:6px;display:flex}.chat-main-name{color:#1e293b;white-space:nowrap;text-overflow:ellipsis;font-size:15px;font-weight:600;line-height:1.2;overflow:hidden}.chat-main-status{color:#94a3b8;margin-top:1px;font-size:13px}.chat-main-actions{flex-shrink:0;gap:4px;display:flex}.main-action-btn{color:#64748b;cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;width:34px;height:34px;transition:all .2s;display:flex}.main-action-btn:hover{color:var(--primary);background:#f1f5f9}.chat-window.fullpage .chat-main-header{min-height:72px;padding:16px 24px}.chat-window.fullpage .chat-main-name{font-size:18px}.chat-window.fullpage .chat-main-actions{gap:8px;display:flex}.chat-window.fullpage .header-info-text{flex-direction:row;align-items:center;gap:6px}.chat-window.fullpage .header-subtitle{margin-top:0;font-size:16px}.chat-window.fullpage .chat-header .action-btn.theme-toggle{box-shadow:none;background:0 0}.chat-window.fullpage .chat-header{background-color:var(--app-sidebar-bg);height:45px;padding:8px 12px}.empty-chat-state{color:#94a3b8;text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;padding:40px;display:flex}.empty-icon{opacity:.5;margin-bottom:24px;font-size:64px}.empty-chat-state h3{color:#1e293b;margin-bottom:8px;font-size:20px}.empty-chat-state p{max-width:280px;font-size:14px;line-height:1.5}.search-section-title{color:#1e293b;align-items:center;gap:8px;margin-bottom:12px;font-size:16px;font-weight:700;display:flex}.search-count{color:#3b82f6;font-size:14px;font-weight:500}.search-section-content{flex-direction:column;gap:8px;display:flex}.search-result-item{cursor:pointer;border-radius:12px;align-items:center;gap:12px;height:64px;padding:8px;transition:all .2s;display:flex}.search-result-item:hover{background:#00000008}.search-result-avatar{border-radius:50%;flex-shrink:0;width:32px;height:32px;overflow:hidden}.search-result-avatar img{object-fit:cover;border-radius:50%;width:100%;height:100%}.avatar-placeholder{color:#fff;background:linear-gradient(135deg,#3b82f6,#2563eb);justify-content:center;align-items:center;width:100%;height:100%;font-size:18px;font-weight:600;display:flex}.search-result-info{flex:1;min-width:0}.search-result-name{color:var(--chat-text);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.search-result-sub{color:#64748b;margin-top:2px;font-size:12px}.search-view-all{color:#64748b;cursor:pointer;background:#00000008;border:none;border-radius:8px;width:100%;margin-top:12px;padding:10px;font-size:13px;font-weight:500;transition:all .2s}.search-view-all:hover{color:#1e293b;background:#0000000f}.message-result .search-result-top{justify-content:space-between;align-items:center;margin-bottom:2px;display:flex}.search-result-date{color:#94a3b8;font-size:11px}.search-result-text{color:#475569;-webkit-line-clamp:2;line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;font-size:13px;display:-webkit-box;overflow:hidden}.file-icon-wrapper{color:#3b82f6;background:#3b82f61a;border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;font-size:20px;display:flex}.highlight-match{color:var(--primary);font-weight:500}.resize-handle.ne{cursor:ne-resize;z-index:10001;width:15px;height:15px;position:absolute;top:0;right:0}.resize-handle.nw{cursor:nw-resize;z-index:10001;width:15px;height:15px;position:absolute;top:0;left:0}.resize-handle.se{cursor:se-resize;z-index:10001;width:15px;height:15px;position:absolute;bottom:0;right:0}.resize-handle.sw{cursor:sw-resize;z-index:10001;width:15px;height:15px;position:absolute;bottom:0;left:0}\n .chat-input-area{background:#fff;border-top:1px solid #e5e7eb;align-items:center;gap:12px;padding:12px 16px;transition:all .3s;display:flex;position:relative}.chat-input-actions{flex-shrink:0;align-items:center;gap:8px;display:flex}.action-btn{color:#6b7280;cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;padding:6px;transition:all .2s;display:flex}.action-btn:hover{color:#374151;background:#f3f4f6}.action-btn.active{color:var(--primary);background:#f3f4f6}.chat-input-container{flex:1;align-items:center;display:flex}.chat-input{color:#1f2937;background:#f3f4f6;border:1px solid #0000;border-radius:8px;outline:none;width:100%;padding:10px 16px;font-size:14px;transition:all .2s}.chat-input::placeholder{color:#9ca3af}.chat-input:focus{background:#f3f4f6;border-color:#3b82f64d}.chat-input:disabled{opacity:.6;cursor:not-allowed}.send-btn{cursor:pointer;color:#fff;background:var(--primary,#8aaeff);width:36px;height:36px;box-shadow:none;border:none;border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;transition:all .2s;display:flex}.send-btn:hover:not(:disabled){filter:brightness(.9);transform:translateY(-1px)}.send-btn:disabled{opacity:.6;cursor:not-allowed;background:#d1d5db}.send-btn svg{width:18px;height:18px}.emoji-picker{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:10;background:#fffffff2;border:1px solid #0000000d;border-radius:20px;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:10px;padding:12px;animation:.3s cubic-bezier(.34,1.56,.64,1) emojiSlideUp;display:grid;position:absolute;bottom:100%;left:16px;box-shadow:0 10px 30px #0000001a}@keyframes emojiSlideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.emoji-btn{cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;padding:4px;font-size:20px;transition:all .2s;display:flex}.emoji-btn:hover{background:#fff;transform:scale(1.2);box-shadow:0 2px 5px #0000000d}.selected-files-list{background:#ffffff1a;border-bottom:1px solid #fff3;flex-wrap:nowrap;gap:12px;height:100px;padding:12px 20px;display:flex;overflow:auto hidden}.selected-file-item{background:#fef2f280;border-radius:12px;flex-direction:column;align-items:center;gap:8px;padding:8px;transition:all .2s;display:flex;position:relative;box-shadow:0 2px 8px #00000014}.selected-file-item.other-file{flex-direction:row}.selected-file-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001f}.file-preview-image{object-fit:cover;border-radius:8px;width:54px;height:54px;display:block}.file-content-wrapper{flex-direction:row;align-items:center;gap:6px;display:flex}.file-icon{background:#f1f5f9;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-size:24px;display:flex}.file-info{flex-direction:column;gap:2px;min-width:0;display:flex}.file-name{color:#475569;white-space:nowrap;text-overflow:ellipsis;width:400px;max-width:100%;font-size:12px;overflow:hidden}.file-size{color:#94a3b8;white-space:nowrap;text-overflow:ellipsis;max-width:120px;font-size:11px;overflow:hidden}.remove-file-btn{color:#fff;cursor:pointer;background:#ef4444;border:none;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;font-size:14px;transition:all .2s;display:flex;position:absolute;top:-8px;right:-8px;box-shadow:0 2px 8px #ef44444d}.remove-file-btn:hover{background:#dc2626;transform:scale(1.1);box-shadow:0 4px 12px #ef444466}.remove-file-btn:disabled{opacity:.5;cursor:not-allowed}.selected-file-item.error-file-item{border:2px solid #ef4444;animation:.3s ease-in-out errorShake}@keyframes errorShake{0%{transform:translate(-3px)}50%{transform:translate(3px)}to{transform:translate(0)}}.selected-file-item.error-file-item:hover{background:#fef2f2b3;border-color:#dc2626}.file-size.error-size{color:#ef4444;font-weight:500}.reply-input-preview{background:#eff6ff;border-left:2px solid #2b7fff;border-top-left-radius:2px;border-bottom-left-radius:2px;justify-content:space-between;align-items:center;margin:0 10px 10px;padding:5px 20px;animation:.3s slideUp;display:flex;position:relative}.reply-content{flex-direction:column;flex:1;gap:2px;min-width:0;padding-left:18px;display:flex}.reply-user{color:#155dfc;margin-bottom:2px;font-size:.85rem;font-weight:700}.reply-user span{color:var(--primary,#155dfc)}.reply-text{color:#4a5565;white-space:nowrap;text-overflow:ellipsis;font-size:.85rem;overflow:hidden}.close-reply{color:#9ca3af;cursor:pointer;background:0 0;border:none;font-size:14px;transition:all .2s;position:absolute;top:0;right:0}.reply-icon{color:#155dfc;position:absolute;top:6px;left:10px}.close-reply:hover{color:#ef4444;transform:scale(1.1)}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.voice-recording-container{background:linear-gradient(135deg,#ef44441a,#ef44440d);border:1px solid #ef444433;flex:1;align-items:center;gap:12px;padding:12px 16px;animation:.2s slideUp;display:flex}.voice-recording-info{flex:1;align-items:center;gap:8px;display:flex}.recording-indicator{color:#374151;align-items:center;gap:6px;font-size:13px;font-weight:500;display:flex}.recording-dot{background:#ef4444;border-radius:50%;width:8px;height:8px;animation:1.5s ease-in-out infinite recordingPulse}@keyframes recordingPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.2)}}.recording-duration{color:#374151;text-align:right;min-width:45px;font-size:13px;font-weight:600}.voice-recorded-container{background:linear-gradient(135deg,#3b82f61a,#3b82f60d);border:1px solid #3b82f633;flex:1;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;animation:.2s slideUp;display:flex}.voice-recorded-info{flex:1;align-items:center;gap:8px;font-size:13px;display:flex}.voice-label{color:#1f2937;white-space:nowrap;font-weight:500}.voice-duration{color:#3b82f6;text-align:right;min-width:45px;margin-left:auto;font-weight:600}.voice-control-btn{color:#1f2937;cursor:pointer;background:#fff;border:1px solid #0000001a;border-radius:6px;justify-content:center;align-items:center;width:32px;height:32px;font-size:14px;transition:all .2s;display:flex}.voice-control-btn:hover{background:#f9fafb;transform:scale(1.05)}.voice-control-btn.cancel-btn{color:#ef4444;background:#ef44440d;border-color:#ef44441a}.voice-control-btn.add-btn{color:#fff;background:#8aaeff;border-color:#8aaeff}\n .message-list{background:#f9fafb80;flex-direction:column-reverse;flex:1;gap:20px;padding:24px 20px;display:flex;overflow:hidden auto}.chat-date-divider{justify-content:center;align-items:center;width:100%;margin:20px 0;display:flex}.chat-date-divider span{color:#64748b;background:#f1f5f9;border-radius:20px;padding:4px 16px;font-size:12px;font-weight:500;box-shadow:0 1px 2px #0000000d}.message-item{gap:4px 8px;max-width:70%;display:flex;position:relative}.message-content{flex-direction:column;gap:4px;width:fit-content;max-width:100%;display:flex}.message-item.current-user .message-content{align-items:flex-end}.message-item.other-user .message-content{align-items:flex-start}.message-content-container{flex-direction:column;gap:12px;display:flex;position:relative}.message-item.current-user{flex-direction:row-reverse;align-self:flex-end}.message-item.other-user{align-self:flex-start}.message-bubble.current-user{background:#155dfc;align-self:flex-end}.message-bubble.other-user{background:#f3f4f6;border-radius:8px 16px 16px;align-self:flex-start}.message-avatar{object-fit:cover;border:2px solid #ffffff4d;border-radius:50%;flex-shrink:0;width:40px;height:40px;transition:transform .2s;box-shadow:0 4px 12px #00000026}.message-bubble{border-radius:16px 8px 16px 16px;grid-template-columns:minmax(0,1fr);padding:10px 16px;font-size:15px;line-height:1.6;display:grid;position:relative}.message-files{grid-template-columns:repeat(2,minmax(145px,1fr));align-content:start;gap:8px;max-width:100%;display:grid}.message-files>*{aspect-ratio:1.5;width:100%}.message-item .message-files>:last-child:nth-child(odd){grid-column:span 2}.message-item.current-user .message-files{align-self:flex-end}.message-item.other-user .message-files{align-self:flex-start}.file-item{cursor:pointer;background:#ffffff26;border:1px solid #fff3;border-radius:8px;align-items:center;gap:10px;max-height:60px;padding:8px 12px;text-decoration:none;transition:all .2s;display:flex}.file-item:hover{background:#ffffff40;border-color:#ffffff4d;transform:translate(4px)}.file-icon{flex-shrink:0;font-size:18px}.file-info{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.file-size{opacity:.7;color:inherit;font-size:11px}.file-image-wrapper{border-radius:8px;justify-content:center;align-items:center;max-width:100%;max-height:288px;margin-top:0;display:flex;position:relative;overflow:hidden}.file-image{object-fit:cover;cursor:pointer;border:1px solid #fff3;border-radius:8px;width:100%;height:100%;transition:transform .2s}.file-image:hover{transform:scale(1.05)}.image-overlay-more{cursor:pointer;background:#00000080;border-radius:8px;justify-content:center;align-items:center;width:100%;height:100%;transition:all .2s;display:flex;position:absolute;top:0;left:0}.image-overlay-more:hover{background:#000000a6}.image-overlay-text{color:#fff;text-shadow:0 2px 4px #0000004d;font-size:28px;font-weight:600}.user .file-image{border-color:#ffffff4d}.message-actions-bar{-webkit-backdrop-filter:none;box-shadow:none;opacity:0;pointer-events:none;z-index:100;background:0 0;border:none;gap:2px;padding:0;transition:all .2s;display:flex;position:absolute;bottom:0}.message-item:hover .message-actions-bar{opacity:1;pointer-events:auto}.message-item.current-user .message-actions-bar{right:calc(100% + 8px)}.message-item.other-user .message-actions-bar{left:calc(100% + 8px)}.chat-window:not(.fullpage) .message-list{overflow-x:hidden}.chat-window:not(.fullpage) .message-item.current-user .message-actions-bar,.chat-window:not(.fullpage) .message-item.other-user .message-actions-bar{-webkit-backdrop-filter:blur(8px);background:#ffffffe6;border:1px solid #0000000d;border-radius:20px;gap:2px;padding:2px 6px;display:flex;inset:auto 0 -22px auto;transform:none;box-shadow:0 2px 8px #00000014}.chat-window:not(.fullpage) .message-item.other-user .message-member-name{margin-right:0}.chat-window:not(.fullpage) .action-icon svg{width:13px;height:13px}.chat-window:not(.fullpage) .action-icon{width:26px;height:26px}.action-icon{color:#64748b;cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;width:30px;height:30px;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex}.action-icon svg{stroke-width:2.2px;width:16px;height:16px}.action-icon:hover{background:#0000000d;transform:translateY(-2px)}.action-icon[title=Xóa]:hover,.action-icon[title=Thu\\ hồi]:hover{color:#ef4444;background:#ef44441a}.action-icon[title=Trả\\ lời]:hover{color:#3b82f6;background:#3b82f61a}.action-icon[title=Thích]:hover{color:#f59e0b;background:#f59e0b1a}.action-icon[title=Yêu\\ thích]:hover{color:#ec4899;background:#ec48991a}.message-reactions-badge{z-index:10;background:#fffffff2;border:1px solid #0000000d;border-radius:10px;align-items:center;gap:2px;padding:2px 6px;font-size:10px;animation:.3s cubic-bezier(.175,.885,.32,1.275) popIn;display:flex;position:absolute;bottom:-11px;box-shadow:0 2px 8px #0000001a}.message-reactions-badge span{line-height:1}.message-item.current-user .message-reactions-badge{right:8px}.message-item.other-user .message-reactions-badge{left:8px}@keyframes popIn{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.message-reply-preview{cursor:pointer;background:#0000001a;border-left:3px solid #ffffff80;border-radius:8px;min-width:120px;margin-bottom:8px;padding:6px 10px;font-size:.8rem;transition:all .2s}.message-bubble.other-user .message-reply-preview{border-left-color:var(--primary,#155dfc);background:#0000000d}.message-reply-preview:hover{background:#00000026}.reply-user-name{color:#fffffff2;white-space:nowrap;text-overflow:ellipsis;margin-bottom:2px;font-size:.75rem;font-weight:700;overflow:hidden}.message-bubble.other-user .reply-user-name{color:var(--primary,#155dfc)}.reply-content-text{color:#fffc;white-space:nowrap;text-overflow:ellipsis;font-size:.8rem;overflow:hidden}.message-bubble.other-user .reply-content-text{color:#475569}.message-text{overflow-wrap:break-word;word-break:break-word;width:auto;display:inline-block}.message-bubble.other-user .message-text{color:var(--chat-text)}.message-bubble.current-user .message-text{color:var(--primary-contrast,#f8fafc)}.message-bubble.other-user.revoked .message-text,.message-bubble.current-user.revoked .message-text{color:color-mix(in srgb, var(--chat-text), transparent 50%)}.message-member-name{color:#475569;white-space:nowrap;text-overflow:ellipsis;min-width:0;margin-bottom:4px;font-size:15px;font-weight:500;overflow:hidden}.scroll-bottom-btn{-webkit-backdrop-filter:blur(8px);cursor:pointer;color:#4f46e5;z-index:1000;background:#ffffffb3;border:1px solid #ffffff4d;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:20px;transition:all .3s cubic-bezier(.4,0,.2,1);animation:.3s fadeInPop;display:flex;position:absolute;bottom:20px;right:20px;box-shadow:0 4px 15px #00000026}.scroll-bottom-btn:hover{background:#fff;transform:translateY(-4px);box-shadow:0 6px 20px #0003}.unread-dot{background-color:#ff4d4f;border:2px solid #fff;border-radius:50%;width:10px;height:10px;position:absolute;top:0;right:0}@keyframes fadeInPop{0%{opacity:0;transform:scale(.5)translateY(20px)}to{opacity:1;transform:scale(1)translateY(0)}}.message-time{color:var(--chat-text);margin-top:2px;font-size:10px;font-weight:500}.message-item.current-user .message-time{text-align:right;margin-right:4px}.message-item.other-user .message-time{text-align:left;margin-left:4px}.message-item-status{color:var(--chat-text);margin-left:4px;font-size:10px;font-weight:400}.message-item-status.seen{color:#3b82f6;font-weight:600}.message-item-status.seen svg{margin-bottom:-2px}.message-bubble.revoked{opacity:.8;background:#ffffff0d;border:1px dashed #fff3;font-style:italic}@keyframes highlight-fade{0%{background-color:rgba(var(--primary-rgb), .2);transform:scale(1.02)}to{background-color:#0000;transform:scale(1)}}.highlight-message .message-bubble{animation:2s ease-out highlight-fade}.see-more-btn{color:#3b82f6;cursor:pointer;margin-left:8px;font-size:.85em;font-weight:600;text-decoration:none;transition:all .2s;display:inline-block}.message-bubble.current-user .see-more-btn{color:#ffffffe6;text-decoration:underline}.see-more-btn:hover{filter:brightness(1.1);text-decoration:underline}.message-bubble.current-user .see-more-btn:hover{color:#fff}\n .file-viewer-overlay{z-index:100001;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#000000e6;justify-content:center;align-items:center;animation:.2s ease-in-out fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.file-viewer-content{flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;animation:.3s ease-out slideUp;display:flex;position:relative}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.file-viewer-main{border-radius:8px;justify-content:center;align-items:center;max-width:100%;max-height:70vh;display:flex;position:relative;overflow:hidden}.file-viewer-image{object-fit:contain;border-radius:8px;max-width:100%;max-height:70vh;box-shadow:0 10px 40px #0000004d}.file-viewer-main:has(.file-viewer-video){overflow:visible}.file-viewer-video{object-fit:contain;border-radius:8px;max-width:100%;max-height:100%;box-shadow:0 10px 40px #0000004d}.video-container{justify-content:center;width:85vw;height:78vh;display:flex;overflow:visible}.file-viewer-close{color:#fff;cursor:pointer;z-index:100001;text-align:center;background:#fff3;border:1px solid #ffffff4d;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;padding:0;font-size:24px;transition:all .2s;display:flex;position:absolute;top:30px;right:70px}.file-viewer-close:hover{background:#ffffff4d;border-color:#fff6;transform:scale(1.1)}.file-viewer-close:active{transform:scale(.95)}.file-viewer-nav{color:#fff;cursor:pointer;z-index:100001;text-align:center;background:#ffffff26;border:1px solid #fff3;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;padding:0;font-size:32px;transition:all .2s;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.file-viewer-nav:hover{background:#ffffff40;border-color:#ffffff4d}.file-viewer-nav:active{transform:translateY(-50%)scale(.95)}.file-viewer-prev{left:70px}.file-viewer-next{right:70px}@media (width<=768px){.file-viewer-prev{left:10px}.file-viewer-next{right:10px}.file-viewer-close{top:10px;right:10px}}.file-viewer-counter{color:#fff;white-space:nowrap;z-index:100001;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#00000080;border-radius:20px;padding:8px 16px;font-size:14px;font-weight:500;position:absolute;bottom:20px;left:50%;transform:translate(-50%)}.file-viewer-thumbnails-container{z-index:100001;opacity:0;pointer-events:none;visibility:hidden;justify-content:center;align-items:center;gap:2rem;width:100%;padding-bottom:3.5rem;display:flex;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.file-viewer-thumbnails{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0000004d;border-radius:8px;gap:8px;max-width:60%;padding-top:12px;padding-bottom:12px;display:flex;overflow-x:auto;-webkit-mask-image:linear-gradient(90deg,#0000 0%,#000 10% 90%,#0000 100%);mask-image:linear-gradient(90deg,#0000 0%,#000 10% 90%,#0000 100%)}.file-viewer-counter:hover~.file-viewer-thumbnails-container,.file-viewer-thumbnails-container:hover{opacity:1;visibility:visible;pointer-events:auto}.file-viewer-thumbnails::-webkit-scrollbar{height:4px}.file-viewer-thumbnails::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:2px}.file-viewer-thumbnails::-webkit-scrollbar-thumb:hover{background:#ffffff80}.file-viewer-thumbnails-scroll-btn{color:#fff;cursor:pointer;z-index:100002;-webkit-backdrop-filter:blur(10px)saturate(180%);backdrop-filter:blur(10px)saturate(180%);background:#fff3;border:1px solid #ffffff4d;border-radius:8px;justify-content:center;align-items:center;width:36px;height:36px;padding:0;font-size:18px;transition:all .3s;display:flex;box-shadow:0 8px 32px #1f26875e}.file-viewer-thumbnails-scroll-btn:hover{background:#ffffff4d;border-color:#ffffff80;transform:scale(1.05);box-shadow:0 8px 32px #1f268780}.file-viewer-thumbnails-scroll-btn:active{transform:scale(.95)}.file-viewer-thumbnail{cursor:pointer;background:#0000004d;border:2px solid #0000;border-radius:4px;width:60px;min-width:60px;height:60px;padding:0;transition:all .2s;overflow:hidden}.file-viewer-thumbnail:hover{background:#0006;border-color:#ffffff80}.file-viewer-thumbnail.active{background:#0003;border-color:#fffc}.thumbnail-image{object-fit:cover;width:100%;height:100%}.thumbnail-video{object-fit:cover;z-index:1;cursor:pointer;width:100%;height:100%}.video-thumbnail-container{border-radius:4px;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative;overflow:hidden}.play-icon-overlay{z-index:2;pointer-events:none;cursor:pointer;background-color:#00000080;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;display:flex;position:absolute}.play-arrow{color:#fff;margin-bottom:3px;margin-left:2px;font-size:18px}.file-viewer-overlay:has(.file-viewer-audio){background:0 0}.file-viewer-main:has(.file-viewer-audio){overflow:visible}.audio-container{justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;overflow:visible}.audio-player-wrapper{-webkit-backdrop-filter:blur(30px)saturate(150%);backdrop-filter:blur(30px)saturate(150%);color:#1e293b;z-index:1000;background:#ffffff4d;border:1px solid #ffffff80;border-radius:8px;flex-direction:column;flex-shrink:0;justify-content:center;align-items:center;gap:12px;width:100%;max-width:500px;padding:24px 20px;display:flex;position:relative;box-shadow:0 0 0 100vmax #000000e6}.file-viewer-audio{width:100%;height:40px}.file-viewer-audio::-webkit-media-controls-panel{background-color:#ffffff1a}.audio-name{color:#000;text-align:center;word-break:break-word;max-width:100%;margin:0;font-size:16px}.audio-thumbnail-container{background:linear-gradient(135deg,#6496ff80 0%,#c864ff80 100%);border-radius:4px;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.audio-thumbnail-icon{font-size:28px}.pdf-thumbnail-container{background:linear-gradient(135deg,#f5222dcc 0%,#ff7a45cc 100%);border-radius:4px;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.pdf-thumbnail-icon{font-size:28px}@media (width<=1024px){.file-viewer-content{max-width:95%}.file-viewer-image{max-height:60vh}.file-viewer-nav{width:40px;height:40px;font-size:24px}}@media (width<=600px){.file-viewer-overlay{inset:0}.file-viewer-content{max-width:100%;max-height:100vh}.file-viewer-main,.file-viewer-image{max-height:50vh}.file-viewer-nav{width:36px;height:36px;font-size:20px}.file-viewer-prev{left:10px}.file-viewer-next{right:10px}.file-viewer-close{width:36px;height:36px;font-size:20px;top:10px;right:10px}.file-viewer-counter{padding:6px 12px;font-size:12px;bottom:60px}.file-viewer-thumbnails{max-width:100%;padding:8px}.file-viewer-thumbnails-scroll-btn{width:32px;height:32px;font-size:16px}.file-viewer-thumbnail{width:50px;min-width:50px;height:50px}}.file-viewer-main:has(.file-viewer-pdf){overflow:visible}.file-viewer-content:has(.file-viewer-pdf) .file-viewer-close{top:5rem}.pdf-container{justify-content:center;width:100vw;height:100vh;display:flex;overflow:visible}.file-viewer-pdf{object-fit:contain;border-radius:8px;max-width:100%;max-height:100%;box-shadow:0 10px 40px #0000004d}\n .toast-container{z-index:100000;pointer-events:none;flex-direction:column;gap:10px;display:flex;position:absolute;bottom:24px;right:24px}.toast-item{pointer-events:auto;-webkit-backdrop-filter:blur(15px)saturate(150%);color:#1e293b;background:#fffc;border:1px solid #fff9;border-radius:20px;align-items:center;gap:12px;min-width:500px;max-width:calc(100% - 40px);padding:12px 16px;font-size:14px;font-weight:500;animation:.4s cubic-bezier(.175,.885,.32,1.275) toast-pop-in;display:flex;position:relative;overflow:hidden;box-shadow:0 4px 6px -1px #0000000d,0 10px 15px -3px #0000001a}.toast-item:before{content:\"\";width:4px;transition:background .3s;position:absolute;top:0;bottom:0;left:0}.toast-item.success:before{background:#10b981}.toast-item.error:before{background:#ef4444}.toast-item.info:before{background:#3b82f6}.toast-item.warning:before{background:#f59e0b}.toast-item span{background:#00000008;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;font-size:16px;display:flex}.toast-item button{cursor:pointer;color:#94a3b8;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:4px;transition:all .2s;display:flex}.toast-item button:hover{color:#1e293b;background:#0000000d}@keyframes toast-pop-in{0%{opacity:0;transform:translate(20px)scale(.9)}to{opacity:1;transform:translate(0)scale(1)}}.dark-theme .toast-item{color:#f8fafc;background:#1e293bb3;border-color:#ffffff14;box-shadow:0 20px 25px -5px #0003}.dark-theme .toast-item span{background:#ffffff0d}\n .side-bar-info-chat{border-left:1px solid var(--chat-border);background:#fff;flex-direction:column;flex-shrink:0;width:320px;display:flex}.info-header{justify-content:flex-end;padding:16px;display:flex}.close-info-btn{color:#64748b;cursor:pointer;background:0 0;border:none;border-radius:4px;padding:4px}.close-info-btn:hover{background:#f1f5f9}.info-content-scroll{flex:1;padding:0 20px 20px;overflow-y:auto}.info-content-scroll::-webkit-scrollbar{width:4px}.info-content-scroll::-webkit-scrollbar-thumb{background:#e2e8f0;border-radius:10px}.info-basic-section{text-align:center;flex-direction:column;align-items:center;display:flex}.info-avatar-large{width:80px;height:80px}.info-avatar-large .chat-avatar{font-size:24px}.info-main-details{flex-direction:column;display:flex}.info-chat-name{color:#1e293b;justify-content:center;align-items:center;gap:8px;margin-top:12px;margin-bottom:4px;font-size:18px;font-weight:700;display:flex}.info-status-icons{color:#94a3b8;gap:4px;display:flex}.info-member-count{color:#64748b;margin-top:0;margin-bottom:10px;font-size:14px}.info-quick-actions{justify-content:space-around;margin-bottom:24px;display:flex}.action-item{cursor:pointer;flex-direction:column;align-items:center;gap:8px;display:flex}.action-icon-info{color:#475569;background:#f8fafc;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:80px;height:60px;transition:all .2s;display:flex}.action-item:hover .action-icon-info{color:var(--primary);background:#f1f5f9}.action-item span{color:#475569;font-size:13px;font-weight:500}.menu-item{cursor:pointer;color:#1e293b;border-radius:8px;justify-content:space-between;align-items:center;padding:10px 12px;font-size:15px;font-weight:500;display:flex}.menu-item:hover{background:#f8fafc}.menu-left{align-items:center;gap:12px;display:flex}.info-members-section{padding:16px 0}.section-title-row{color:#64748b;justify-content:space-between;align-items:center;margin-bottom:12px;padding:0 4px;font-size:14px;font-weight:600;display:flex}.title-actions{color:#94a3b8;gap:8px;display:flex}.title-actions svg{cursor:pointer}.arrow-icon{transition:transform .2s}.arrow-icon.collapsed{transform:rotate(-180deg)}.member-item-left.clickable{cursor:pointer}.members-compact-list{flex-direction:column;display:flex}.members-facepile{align-items:center;padding:8px 4px;display:flex}.facepile-item{z-index:1;border:2px solid #fff;border-radius:50%;width:32px;height:32px;margin-left:-8px;transition:transform .2s;position:relative}.facepile-item:first-child{margin-left:0}.facepile-item:hover{z-index:10;transform:translateY(-4px)}.facepile-item .member-avatar-small{width:100%;height:100%}.facepile-item .online-status{border-width:1.5px;width:8px;height:8px;bottom:0;right:0}.facepile-more{color:#64748b;z-index:0;cursor:pointer;background:#f1f5f9;border:2px solid #fff;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;margin-left:-8px;font-size:11px;font-weight:700;display:flex}.facepile-more:hover{background:#e2e8f0}.member-compact-item{border-radius:8px;justify-content:space-between;align-items:center;padding:8px;transition:background .2s;display:flex;position:relative}.member-compact-item:hover{background:#f8fafc}.member-item-left{align-items:center;gap:8px;display:flex}.member-avatar-small{border-radius:50%;width:32px;height:32px;position:relative}.member-avatar-small img,.member-img{object-fit:cover;border-radius:50%;width:100%;height:100%;display:block}.member-initials{background:var(--primary);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:100%;height:100%;font-size:12px;font-weight:600;display:flex}.member-info{flex-direction:column;gap:2px;display:flex}.member-options-container{align-items:center;display:flex;position:relative}.member-options-btn{color:#94a3b8;cursor:pointer;opacity:0;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:6px;transition:all .2s;display:flex}.member-compact-item:hover .member-options-btn{opacity:1}.member-options-btn:hover{color:#475569;background:#e2e8f0}.member-dropdown-menu{z-index:100;background:#fff;border:1px solid #f1f5f9;border-radius:12px;width:190px;margin-top:4px;padding:6px;animation:.2s fadeIn;position:absolute;top:100%;right:0;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.dropdown-item{color:#1e293b;cursor:pointer;background:0 0;border:none;border-radius:8px;align-items:center;gap:10px;width:100%;padding:10px 12px;font-size:14px;font-weight:500;transition:all .2s;display:flex}.dropdown-item:hover{background:#f1f5f9}.dropdown-item.delete{color:#ef4444}.dropdown-item.delete:hover{background:#fef2f2}.dropdown-item svg{flex-shrink:0}.member-name-row{align-items:center;gap:4px;width:fit-content;display:flex}.member-role{color:#64748b;font-size:12px}.online-status{background:#22c55e;border:2px solid #fff;border-radius:50%;width:10px;height:10px;position:absolute;bottom:0;right:0}.info-summary-section{padding:16px 0}.info-summary-section .section-title{color:#64748b;margin-bottom:12px;font-size:14px;font-weight:600}.summary-tabs{background:#f1f5f9;border-radius:8px;margin-bottom:16px;padding:4px;display:flex}.tab-item{text-align:center;color:#64748b;cursor:pointer;border-radius:6px;flex:1;padding:6px;font-size:13px}.tab-item.active{color:#1e293b;background:#fff;font-weight:600;box-shadow:0 1px 3px #0000001a}.file-item{border-radius:8px;align-items:center;gap:12px;padding:8px;display:flex}.file-item:hover{background:#f8fafc}.file-icon{background:#f1f5f9;border-radius:8px;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.file-details{flex-direction:column;flex:1;min-width:0;display:flex}.file-name{color:#1e293b;white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:500;overflow:hidden}.file-size{color:#94a3b8;font-size:12px}.file-download-btn{color:#94a3b8;cursor:pointer;background:0 0;border:none;padding:4px}.file-download-btn:hover{color:var(--primary)}.group-management-view,.main-info-view{animation:.25s ease-out fadeInSlide}@keyframes fadeInSlide{0%{opacity:0;transform:translate(15px)}to{opacity:1;transform:translate(0)}}.header-left{flex:1;align-items:center;gap:12px;display:flex}.back-info-btn{color:#64748b;cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;padding:4px;display:flex}.back-info-btn:hover{background:#f1f5f9}.management-section{padding:16px 0}.management-section.border-top{border-top:1px solid #f1f5f9}.section-subtitle{color:#64748b;margin-bottom:16px;padding:0 4px;font-size:14px}.settings-list{flex-direction:column;display:flex}.setting-item{cursor:pointer;justify-content:space-between;align-items:center;padding:12px 4px;transition:background .2s;display:flex}.setting-item span{color:#1e293b;flex:1;padding-right:12px;font-size:14px;line-height:1.4}.setting-item input[type=checkbox]{width:18px;height:18px;accent-color:var(--primary);cursor:pointer}.setting-item-switch{justify-content:space-between;align-items:center;padding:12px 4px;display:flex}.setting-info{flex:1;align-items:center;gap:8px;display:flex}.setting-info span{color:#1e293b;max-width:200px;font-size:14px;line-height:1.4}.help-icon{color:#94a3b8;cursor:pointer}.switch{flex-shrink:0;width:36px;height:20px;display:inline-block;position:relative}.switch input{opacity:0;width:0;height:0}.slider{cursor:pointer;background-color:#e2e8f0;transition:all .4s;position:absolute;inset:0}.slider:before{content:\"\";background-color:#fff;width:14px;height:14px;transition:all .4s;position:absolute;bottom:3px;left:3px}input:checked+.slider{background-color:var(--primary)}input:checked+.slider:before{transform:translate(16px)}.slider.round{border-radius:20px}.slider.round:before{border-radius:50%}.management-menu{flex-direction:column;display:flex}.management-menu .menu-item{padding:12px 4px}.management-menu .menu-left svg{color:#64748b}\n .app-sidebar{background:var(--app-sidebar-bg);flex-direction:column;flex-shrink:0;align-items:center;gap:32px;width:64px;padding:12px 12px 24px;display:flex}.app-nav{flex-direction:column;flex:1;gap:16px;display:flex}.nav-item{color:#64748b;cursor:pointer;border-radius:12px;justify-content:center;align-items:center;width:40px;height:40px;transition:all .2s;display:flex}.nav-item:hover{background:var(--active-item-bg);color:var(--primary)}.nav-item.active{background:var(--primary);color:var(--primary-contrast)}.nav-separator{opacity:.8;background:#98a8b3;width:40px;height:1px;margin:4px 0}.app-sidebar-footer{flex-direction:column;align-items:center;gap:20px;padding-bottom:8px;display:flex}.app-avatar{background:#f1f5f9;border:2px solid #fff;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;display:flex;overflow:hidden;box-shadow:0 2px 8px #0000000d}.app-avatar img{object-fit:cover;border-radius:50%;width:100%;height:100%}.app-avatar-fallback{color:#64748b;justify-content:center;align-items:center;width:100%;height:100%;font-size:14px;font-weight:700;display:flex}\n .modal-overlay{z-index:9999;-webkit-backdrop-filter:blur();backdrop-filter:blur();background:#0006;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.profile-modal-content{background:#fff;border-radius:20px;width:400px;padding:30px;animation:.3s cubic-bezier(.34,1.56,.64,1) modalScaleUp;position:relative;box-shadow:0 20px 40px #0003}@keyframes modalScaleUp{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.close-modal-btn{color:#94a3b8;cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:5px;transition:all .2s;display:flex;position:absolute;top:20px;right:20px}.close-modal-btn:hover{color:#475569;background:#f1f5f9}.profile-header{text-align:center;margin-bottom:25px}.profile-avatar-wrapper{width:90px;height:90px;margin:0 auto 15px;position:relative}.profile-avatar-wrapper img{object-fit:cover;border:4px solid #f8fafc;border-radius:50%;width:100%;height:100%}.profile-avatar-placeholder{color:#fff;background:#3b82f6;border:4px solid #f8fafc;border-radius:50%;justify-content:center;align-items:center;width:100%;height:100%;font-size:36px;font-weight:600;display:flex}.profile-online-status{background:#22c55e;border:3px solid #fff;border-radius:50%;width:16px;height:16px;position:absolute;bottom:5px;right:5px}.profile-name{color:#1e293b;margin-bottom:4px;font-size:20px;font-weight:700}.status-text{color:#64748b;font-size:13px}.profile-actions{gap:12px;margin-bottom:30px;display:flex}.profile-action-btn{cursor:pointer;color:#475569;background:#f8fafc;border:none;border-radius:12px;flex-direction:column;flex:1;align-items:center;gap:6px;padding:12px 8px;transition:all .2s;display:flex}.profile-action-btn:hover{color:#3b82f6;background:#f1f5f9;transform:translateY(-2px)}.profile-action-btn svg{color:#64748b;transition:color .2s}.profile-action-btn:hover svg{color:#3b82f6}.profile-action-btn span{font-size:13px;font-weight:600}.profile-details{border-top:1px solid #f1f5f9;padding-top:10px}.detail-item{border-bottom:1px solid #f1f5f9;justify-content:flex-start;align-items:center;padding:12px 0;font-size:14px;display:flex}.detail-item:last-child{border-bottom:none}.detail-item .label{color:#64748b;flex-shrink:0;width:110px}.detail-item .value{color:#1e293b;font-size:16px;font-weight:400}.value.email,.value.phone{color:#3b82f6;cursor:pointer}.value.email:hover,.value.phone:hover{text-decoration:underline}\n .modal-content.add-chat-modal{background:#fff;border:1px solid #0000000d;border-radius:10px;flex-direction:column;width:450px;max-width:450px;height:auto;min-height:430px;max-height:90vh;padding:0;display:flex;overflow:hidden;box-shadow:0 10px 40px #0000001a}.add-chat-modal .modal-header{justify-content:space-between;align-items:center;padding:16px 20px 0;display:flex}.add-chat-modal .modal-title{color:#1f2937;text-align:left;margin:0;font-size:18px;font-weight:600}.add-chat-modal .close-modal-btn{color:#6b7280;cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:4px;transition:background .2s;display:flex}.add-chat-modal .close-modal-btn:hover{color:#111827;background:#f3f4f6}.add-chat-modal .modal-body{flex-direction:column;flex:1;gap:8px;padding:20px 20px 0;display:flex;overflow:hidden}.add-chat-modal .group-info-section{align-items:center;gap:16px;display:flex}.add-chat-modal .group-avatar-upload{flex-shrink:0}.add-chat-modal .avatar-placeholder{color:#9ca3af;cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;padding:0;display:flex;position:relative}.add-chat-modal .upload-icon{color:#6b7280;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:50%;justify-content:center;align-items:center;width:18px;height:18px;display:flex;position:absolute;bottom:-2px;right:-2px}.add-chat-modal .preview-avatar{object-fit:cover;border-radius:100%;width:100%;height:100%}.add-chat-modal .group-name-input{border:none;border-bottom:1px solid #e5e7eb;outline:none;flex:1;padding:8px 0;font-size:16px;transition:border-color .2s}.add-chat-modal .group-name-input:focus{border-bottom-color:#3b82f6}.add-chat-modal .search-section .chat-search-bar{padding:0}.add-chat-modal .search-section .search-input{background:#fff;border:1px solid #e5e7eb;border-radius:20px;padding:10px 16px 10px 40px;font-size:15px}.add-chat-modal .search-section .search-icon{left:16px}.add-chat-modal .selected-members-tags{flex-wrap:wrap;gap:8px;display:flex}.add-chat-modal .member-tag{color:#2563eb;background:#eff6ff;border-radius:100px;align-items:center;gap:6px;padding:4px 10px;font-size:14px;font-weight:500;display:flex}.add-chat-modal .member-tag>span{margin-bottom:-4px}.add-chat-modal .remove-tag-btn{color:#2563eb;cursor:pointer;opacity:.7;background:0 0;border:none;justify-content:center;align-items:center;padding:2px;transition:opacity .2s;display:flex}.add-chat-modal .remove-tag-btn:hover{opacity:1}.modal-content.add-chat-modal.has-tags{height:550px}.add-chat-modal .members-list-container{border-top:1px solid #f3f4f6;flex:1;margin:0 -20px;padding:0 7px;overflow-y:hidden}.add-chat-modal .members-list{margin:0;padding:12px 0}.add-chat-modal .member-item{cursor:pointer;background:0 0;border-radius:10px;align-items:center;gap:12px;padding:10px 12px;transition:background .2s;display:flex}.add-chat-modal .member-item.selected{background:#f0f7ff}.add-chat-modal .member-item:hover{background:#f9fafb}.add-chat-modal .member-item.selected:hover{background:#e0efff}.add-chat-modal .member-checkbox{flex-shrink:0}.add-chat-modal .checkbox-custom{border:1.5px solid #d1d5db;border-radius:4px;justify-content:center;align-items:center;width:20px;height:20px;transition:all .2s;display:flex}.add-chat-modal .checkbox-custom.checked{background:#3b82f6;border-color:#3b82f6}.add-chat-modal .member-avatar-wrapper{width:32px;height:32px;position:relative}.add-chat-modal .member-avatar{color:#4b5563;background:#f3f4f6;border:none;border-radius:50%;justify-content:center;align-items:center;width:100%;height:100%;font-size:14px;font-weight:600;display:flex;overflow:hidden}.add-chat-modal .member-avatar img{object-fit:cover;width:100%;height:100%}.add-chat-modal .avatar-letter{color:#fff;background:linear-gradient(135deg,#6366f1,#a855f7);justify-content:center;align-items:center;width:100%;height:100%;display:flex}.add-chat-modal .status-dot{width:12px;height:12px;position:absolute;bottom:-1px;right:-1px}.add-chat-modal .member-name{color:#374151;font-size:15px;font-weight:500}.add-chat-modal .modal-footer{border-top:1px solid #f3f4f6;justify-content:flex-end;gap:12px;padding:11px 20px;display:flex}.add-chat-modal .footer-btn{cursor:pointer;border:none;border-radius:10px;padding:10px 24px;font-size:15px;font-weight:600;transition:all .2s}.add-chat-modal .footer-btn.cancel{color:#4b5563;background:#f3f4f6}.add-chat-modal .footer-btn.cancel:hover{background:#e5e7eb}.add-chat-modal .footer-btn.confirm{color:#fff;background:#3b82f6}.add-chat-modal .footer-btn.confirm:hover:not(.disabled){background:#7a9ce9}.add-chat-modal .footer-btn.disabled{opacity:.6;cursor:not-allowed}.display-none{display:none}.modal-content.update-group-modal{background:#fff;border:1px solid #0000000d;border-radius:10px;flex-direction:column;width:450px;max-width:450px;height:auto;min-height:430px;max-height:90vh;padding:0;display:flex;overflow:hidden;box-shadow:0 10px 40px #0000001a}.update-group-modal .modal-header{justify-content:space-between;align-items:center;padding:16px 20px 0;display:flex}.update-group-modal .modal-title{color:#1f2937;text-align:left;margin:0;font-size:18px;font-weight:600}.update-group-modal .close-modal-btn{color:#6b7280;cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:4px;transition:background .2s;display:flex}.update-group-modal .close-modal-btn:hover{color:#111827;background:#f3f4f6}.update-group-modal .modal-body{flex-direction:column;flex:1;gap:8px;padding:20px 20px 0;display:flex;overflow:hidden}.update-group-modal .group-info-section{align-items:center;gap:16px;display:flex}.update-group-modal .group-avatar-upload{cursor:pointer;flex-shrink:0}.update-group-modal .group-avatar-upload input{display:none}.update-group-modal .avatar-placeholder{color:#9ca3af;cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;padding:0;display:flex;position:relative}.update-group-modal .avatar-placeholder img{object-fit:cover;border-radius:50%;width:100%;height:100%}.update-group-modal .group-name-input{border:none;border-bottom:1px solid #e5e7eb;outline:none;flex:1;padding:8px 0;font-size:16px;transition:border-color .2s}.update-group-modal .group-name-input:focus{border-bottom-color:#3b82f6}.update-group-modal .members-section{margin-top:8px}.update-group-modal .section-title{padding-left:0;display:block}.update-group-modal .members-list-container{border-top:none;flex:1;height:240px;margin:0 -20px;padding:0 7px;overflow-y:hidden}.update-group-modal .members-list{margin:0;padding:12px 0}.update-group-modal .member-item{cursor:default;background:0 0;border-radius:10px;align-items:center;gap:12px;padding:10px 12px;transition:background .2s;display:flex}.update-group-modal .member-item:hover{background:#f9fafb}.update-group-modal .member-avatar-wrapper{width:32px;height:32px;position:relative}.update-group-modal .status-dot{width:12px;height:12px;position:absolute;bottom:-1px;right:-1px}.update-group-modal .member-info-wrapper{flex-direction:column;flex:1;gap:2px;display:flex}.update-group-modal .member-name-row{align-items:center;gap:4px;width:fit-content;display:flex}.update-group-modal .member-name{color:#1e293b;font-size:15px;font-weight:500}.update-group-modal .owner-icon{color:#64748b}.update-group-modal .member-role{color:#64748b;font-size:13px}.update-group-modal .remove-member-btn{color:#ef4444;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:4px;font-size:14px;display:flex}.update-group-modal .modal-footer{border-top:1px solid #f3f4f6;justify-content:flex-end;gap:12px;padding:11px 20px;display:flex}.update-group-modal .footer-btn{cursor:pointer;border:none;border-radius:10px;padding:10px 24px;font-size:15px;font-weight:600;transition:all .2s}.update-group-modal .footer-btn.cancel{color:#4b5563;background:#f3f4f6}.update-group-modal .footer-btn.cancel:hover{background:#e5e7eb}.update-group-modal .footer-btn.confirm{color:#fff;background:#3b82f6}.update-group-modal .footer-btn.confirm:hover:not(.disabled){background:#7a9ce9}.update-group-modal .footer-btn.disabled{opacity:.6;cursor:not-allowed}\n .contact-list-header>div{align-items:center;gap:8px;display:flex}.contact-list-toolbar{gap:12px}.toolbar-search{flex:1}.filter-select{position:relative}.avatar-placeholder{color:#fff;background:#3b82f6;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:16px;font-weight:600;display:flex}.online-status.is-online{background:#22c55e}.online-status.is-offline{background:#94a3b8}.contact-action-btn{background:0 0;border:none}\n", O = (e, t = 0, n = "Hội thoại không tên") => e ? e.name ? e.name : e.type === "group" ? n : e.members?.find((e) => e.id !== t)?.name ?? n : n, k = new Set([
10
+ var D = "\n #chat-internal-root{z-index:99999;pointer-events:none;font-family:Inter,-apple-system,sans-serif;font-size:16px;font-weight:400;line-height:24px;display:block;position:fixed;bottom:0;right:0}#chat-internal-root *{box-sizing:border-box;pointer-events:auto}#chat-internal-root ::-webkit-scrollbar{width:5px;height:5px}#chat-internal-root ::-webkit-scrollbar-thumb{background-color:#0000001a;border-radius:4px}#chat-internal-root ::-webkit-scrollbar-thumb:hover{background-color:#0003}.chatbot-container{width:100%;height:100%;position:relative}\n .floating-button{background:var(--primary);-webkit-backdrop-filter:blur(25px)saturate(150%);color:#fff;cursor:pointer;z-index:99999;border:1px solid #fff6;border-radius:20px;outline:none;justify-content:center;align-items:center;width:64px;height:64px;transition:all .4s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;bottom:24px;right:24px;box-shadow:0 12px 40px #0000000d,inset 0 0 0 1px #fff6}.floating-button:hover{transform:scale(1.1)rotate(5deg)}.floating-button:active{transform:scale(.95)}.floating-button .ping{pointer-events:none;background:#fff3;border-radius:16px;animation:2s cubic-bezier(0,0,.2,1) infinite ping;position:absolute;inset:0}@keyframes ping{75%,to{opacity:0;transform:scale(1.5)}}.floating-button .icon{z-index:10;font-size:24px;position:relative}\n .chat-window{--primary:#155dfc;--chat-bg:#fff;--chat-text:#101828;--chat-subtext:#6a7282;--chat-header-bg:#fff;--chat-border:#e5e7eb;--sidebar-bg:#fff}.chat-window.dark-theme{--chat-bg:color-mix(in srgb, var(--primary), #0f172a99 85%);--chat-text:#f8fafc;--chat-subtext:#94a3b8;--chat-header-bg:color-mix(in srgb, var(--primary), #1e293b99 80%);--chat-border:#334155;--sidebar-bg:color-mix(in srgb, var(--primary), #0f172a66 95%)}.chat-window{background:var(--chat-bg);-webkit-backdrop-filter:blur(20px)saturate(180%);backdrop-filter:blur(20px)saturate(180%);border:1px solid var(--chat-border);z-index:99998;width:420px;height:640px;color:var(--chat-text);transform-origin:100% 100%;border-radius:14px;flex-direction:column;max-width:100%;max-height:100%;margin:0;transition:none;animation:.6s cubic-bezier(.34,1.56,.64,1) slideUp;display:flex;position:fixed;bottom:90px;right:20px;overflow:hidden;transform:none;box-shadow:0 8px 32px #0000005e,inset 0 0 0 1px #ffffff0d}.chat-window.fullpage{--chat-bg:#fff;--chat-header-bg:#fff;--chat-border:#f1f5f9;--sidebar-bg:#fff;--app-sidebar-bg:#f9f9f9;--active-item-bg:#f1f5f9;-webkit-backdrop-filter:none;z-index:9999;border-radius:16px;flex-direction:column;display:flex;transform:none}.chat-main-layout{--chat-bg:#fff;--chat-header-bg:#fff;--chat-border:#f1f5f9;--sidebar-bg:#fff;--active-item-bg:#f1f5f9;-webkit-backdrop-filter:none;z-index:9999;background-color:var(--app-sidebar-bg);border-radius:0;flex-direction:row;flex:1;width:100%;max-width:none;height:100vh;display:flex;inset:0;overflow:hidden;transform:none}.chat-window.fullpage.dark-theme{--chat-bg:#0f172a;--chat-header-bg:#1e293b;--chat-border:#334155;--sidebar-bg:#0f172a;--app-sidebar-bg:#1e293b;--active-item-bg:#334155;overflow:hidden}.chat-header{background:var(--chat-header-bg);color:var(--chat-text);flex-shrink:0;justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.header-info{align-items:center;gap:8px;display:flex}.header-logo{flex-shrink:0;justify-content:center;align-items:center;padding-left:6px;padding-right:8px;display:flex}.header-logo img,.header-logo .satek-icon{object-fit:contain;width:22px;height:22px}.back-btn{color:#64748b;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;margin-right:8px;padding:0;font-size:20px;display:flex}.header-info-text{align-items:center;gap:6px;min-width:0;display:flex}.header-dot{color:var(--chat-subtext);opacity:.6}.header-title{color:var(--chat-text);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.header-subtitle{color:var(--chat-subtext);white-space:nowrap;text-overflow:ellipsis;font-size:16px;font-weight:400;overflow:hidden}.chat-body-container{border-top-left-radius:8px;flex-direction:row;flex:1;display:flex;position:relative;overflow:hidden}.chat-sidebar{background:var(--sidebar-bg);border-right:1px solid #0000000d;flex-direction:column;width:100%;transition:all .3s;display:flex}.chat-sidebar.is-full{flex-shrink:0;width:320px}.chat-search-bar{background:0 0;align-items:center;gap:4px;padding:12px 12px 4px;display:flex}.search-input-wrapper{flex:1;align-items:center;display:flex;position:relative}.search-icon{color:#94a3b8;pointer-events:none;width:16px;height:16px;position:absolute;left:12px}.search-input{color:#1e293b;background:#f3f4f6;border:1px solid #0000;border-radius:8px;outline:none;width:100%;padding:8px 36px;font-size:14px;transition:all .3s}.search-input:focus{background:#fff;border-color:#a855f74d;box-shadow:0 4px 12px #00000008}.clear-search{color:#94a3b8;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:4px;font-size:18px;display:flex;position:absolute;right:10px}.clear-search:hover{color:#64748b}.sidebar-scroll{flex:1;padding:0 8px 20px;overflow-y:auto}.chat-filter-tabs{gap:24px;margin:0 12px;display:flex;position:relative}.chat-filter-tabs:before{content:\"\";background-color:#0000000d;height:1px;position:absolute;bottom:0;left:0;right:0}.chat-filter-tabs button{cursor:pointer;color:#667085;background:0 0;border:none;align-items:center;gap:6px;padding:8px 0;font-size:13px;font-weight:500;transition:all .2s;display:flex;position:relative}.chat-filter-tabs button.active{color:#155dfc;font-weight:600}.chat-filter-tabs button.active:after{content:\"\";z-index:1;background-color:#155dfc;border-radius:2px;height:2px;position:absolute;bottom:0;left:0;right:0}.filter-unread-badge-container{align-items:center;gap:6px;display:flex}.filter-unread-badge{color:#fff;background-color:#f04438;border-radius:9px;justify-content:center;align-items:center;min-width:18px;height:18px;padding:0 4px;font-size:11px;font-weight:600;display:flex}.sidebar-scroll::-webkit-scrollbar{width:5px;margin-left:10px}.sidebar-scroll::-webkit-scrollbar-thumb{background:#0000000d;border-radius:10px}.member-search-section{border-top:1px solid #00000008;margin-top:10px;padding:20px 0;animation:.3s fadeIn}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.member-search-section .section-header{color:var(--chat-text);text-transform:uppercase;letter-spacing:1px;padding:0 20px 12px;font-size:11px;font-weight:700}.member-search-section .members-list{max-height:none;padding:0 10px}.member-search-section .member-item{background:0 0;border:none;margin-bottom:4px;padding:10px 12px}.member-search-section .member-item:hover{background:#fff6}.chat-main{background:#ffffff1a;flex-direction:column;flex:1;display:flex;position:relative;overflow:hidden}.drag-overlay-full{pointer-events:none;z-index:10;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0009;border:3px dashed #a855f7cc;justify-content:center;align-items:center;animation:.2s fadeIn;display:flex;position:absolute;inset:0}.drag-overlay-full .drag-content{color:#fff;text-shadow:0 2px 4px #0000004d;flex-direction:row;align-items:center;gap:12px;display:flex}.drag-overlay-full .drag-icon{font-size:20px;animation:.6s ease-in-out infinite bounce}.chat-list{background:0 0;flex:1;overflow-y:auto}.chat-item{cursor:pointer;border-radius:8px;align-items:center;gap:12px;height:64px;padding:8px;transition:background .1s ease-in-out;display:flex;position:relative}.chat-item:hover{background:#eff6ff99}.chat-item.active{background:#eff6ff}.chat-item-avatar{justify-content:center;align-items:center;width:32px;height:32px;font-size:22px;display:flex;position:relative}.online-indicator{z-index:1;background-color:#22c55e;border:2px solid #fff;border-radius:50%;width:12px;height:12px;position:absolute;bottom:-3px;right:2px}.chat-item-info{flex:1;overflow:hidden}.chat-item-name{color:var(--chat-text);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.chat-item-last{flex:1;min-width:0}.last-message-text{color:var(--chat-subtext);white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;display:block;overflow:hidden}.info-bottom-right{flex-shrink:0;align-items:center;gap:4px;margin-top:4px;display:flex}.mute-icon-list{color:#94a3b8;flex-shrink:0}.chat-item.active .chat-item-last{color:var(--chat-text)}.unread-badge{color:#fff;z-index:2;background:linear-gradient(135deg,#f43f5e,#e11d48);border:2px solid #fff;border-radius:50%;justify-content:center;align-items:center;min-width:18px;height:18px;padding:10px 7px;font-size:10px;font-weight:700;display:flex;position:absolute;top:-4px;right:-4px;box-shadow:0 2px 4px #0000001a}.chat-item-time{color:var(--chat-subtext);white-space:nowrap}.chat-list-section{margin-bottom:16px}.empty-chat-list{padding:12px 8px 4px}.section-header{color:#64748b;text-transform:none;align-items:center;gap:6px;padding:12px 8px 4px;display:flex}.section-icon{color:#94a3b8}.info-top-row{justify-content:space-between;align-items:baseline;margin-bottom:2px;display:flex}.info-bottom-row{justify-content:space-between;align-items:center;display:flex}.unread-badge-circle{color:#fff;background-color:#3b82f6;border-radius:9px;justify-content:center;align-items:center;min-width:18px;height:18px;margin-left:8px;padding:0 5px;font-size:10px;font-weight:600;display:flex}.chat-options-wrapper{opacity:0;pointer-events:none;z-index:100;justify-content:center;align-items:center;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;top:50%;right:12px;transform:translateY(-50%)scale(.8)}.chat-item:hover .chat-options-wrapper,.chat-item.has-open-dropdown .chat-options-wrapper{opacity:1;pointer-events:auto;transform:translateY(-50%)scale(1)}.chat-options-btn{-webkit-backdrop-filter:blur(8px);color:#64748b;cursor:pointer;background:#ffffff26;border:1px solid #fff3;border-radius:10px;justify-content:center;align-items:center;width:32px;height:32px;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex}.chat-options-btn:hover,.chat-options-btn.active{color:#1e293b;background:#ffffff4d;border-color:#fff6;transform:scale(1.05)}.chat-options-btn svg{width:18px;height:18px}.chat-options-dropdown{-webkit-backdrop-filter:blur(20px)saturate(160%);z-index:1000;background:#ffffffe6;border:1px solid #fff9;border-radius:14px;flex-direction:column;gap:4px;min-width:160px;padding:6px;animation:.2s cubic-bezier(.4,0,.2,1) dropdownFadeIn;display:flex;position:absolute;top:calc(100% + 8px);right:0;box-shadow:0 10px 25px -5px #0000001a,0 8px 10px -6px #0000001a}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-10px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}.dropdown-item{color:#334155;cursor:pointer;border-radius:10px;align-items:center;gap:10px;padding:10px 12px;font-size:13px;font-weight:500;transition:all .2s;display:flex}.dropdown-item:hover{color:#0f172a;background:#0000000a}.dropdown-item.delete{color:#ef4444}.dropdown-item.delete:hover{color:#dc2626;background:#ef444414}.dropdown-icon{flex-shrink:0;width:16px;height:16px}.header-actions{gap:4px;display:flex}.action-btn{color:#667085;cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;width:28px;height:28px;padding:6px;transition:all .2s;display:flex}.action-btn:hover{color:#101828;background:#f2f4f7}.action-btn.close-btn:hover{color:#ef4444;background:#fee2e2}.add-group-btn{color:#667085;cursor:pointer;background:#f9fafb;border:1px solid #f2f4f7;border-radius:8px;justify-content:center;align-items:center;width:36px;height:36px;transition:all .2s;display:flex}.add-group-btn:hover{color:#101828;background:#f2f4f7;border-color:#eaecf0}.dark-theme .add-group-btn{color:#f8fafc;background:#1e293b66;border-color:#ffffff1a}.dark-theme .add-group-btn:hover{background:#1e293bcc;border-color:#fff3}.theme-toggle{background:#fff6;border:1px solid #ffffff80;border-radius:12px;font-size:16px;transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 12px #0000000d}.theme-toggle:hover{background:#fff;box-shadow:0 8px 20px #0000001a;transform:rotate(15deg)scale(1.1)!important}.dark-theme .theme-toggle{color:#f8fafc;background:#1e293b66;border-color:#ffffff1a}.dark-theme .theme-toggle:hover{background:#1e293bcc;border-color:#fff3}.modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:100000;background:#0006;justify-content:center;align-items:center;animation:.3s modalFadeIn;display:flex;position:absolute;inset:0}.modal-content{background:color-mix(in srgb, var(--primary), #ffffffb3 92%);-webkit-backdrop-filter:blur(30px)saturate(150%);border:1px solid #fffc;border-radius:36px;width:90%;max-width:380px;height:85%;padding:32px;animation:.4s cubic-bezier(.175,.885,.32,1.275) modalPopUp;overflow-y:auto;box-shadow:0 30px 60px #00000014}.dark-theme .modal-content{background:color-mix(in srgb, var(--primary), #1e293bb3 90%);color:#f8fafc;border-color:#ffffff1a}.modal-content::-webkit-scrollbar-track{margin:10px 0}.modal-title{color:var(--chat-text);text-align:center;letter-spacing:-.5px;margin-bottom:24px;font-size:22px;font-weight:800}.modal-input{color:#1e293b;background:#fff;border:1px solid #0000000d;border-radius:18px;outline:none;width:100%;margin-bottom:28px;padding:16px 20px;font-size:15px;transition:all .3s}.modal-input:focus{background:#ffffff14;border-color:#155dfc;box-shadow:0 0 0 4px #155dfc26}.members-section{margin-bottom:24px}.section-title{color:#64748b;text-transform:uppercase;letter-spacing:1px;padding-left:4px;font-size:11px;font-weight:700;display:block}.members-list{max-height:250px;margin:0 -4px;padding:4px;overflow-y:auto}.members-list::-webkit-scrollbar{width:5px}.members-list::-webkit-scrollbar-thumb{background:#4f46e533;border-radius:10px}.member-item{cursor:pointer;background:#fff6;border:1px solid #0000;border-radius:16px;align-items:center;gap:14px;padding:12px;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex}.member-item:hover{background:#fffc}.remove-member-btn{color:#94a3b8;cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;margin-left:auto;padding:6px;transition:all .2s;display:flex}.remove-member-btn:hover{color:#ef4444;background:#ef44441a;transform:scale(1.1)}.remove-member-btn svg{width:18px;height:18px}.member-avatar{background:linear-gradient(135deg,#f8fafc 0%,#e2e8f0 100%);border:2px solid #fff;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:20px;display:flex;box-shadow:0 2px 5px #0000000d}.member-name{color:var(--chat-text);flex:1;font-size:14px;font-weight:600}.member-check{color:#fff;border:2px solid #e2e8f0;border-radius:50%;justify-content:center;align-items:center;width:22px;height:22px;font-size:11px;font-weight:700;transition:all .2s;display:flex}.member-item.selected .member-check{background:linear-gradient(135deg,#6366f1,#4f46e5);border-color:#4f46e5;transform:scale(1.1)}.modal-actions{gap:12px;margin-top:8px;display:flex}.modal-btn{cursor:pointer;border:none;border-radius:16px;flex:1;padding:14px;font-size:14px;font-weight:700;transition:all .3s cubic-bezier(.4,0,.2,1)}.modal-btn.cancel{color:#64748b;background:#f1f5f9cc}.modal-btn.cancel:hover{color:#0f172a;background:#f1f5f9}.modal-btn.confirm{color:#fff;background:linear-gradient(135deg,#6366f1,#4f46e5);box-shadow:0 10px 20px -5px #4f46e566}.modal-btn.confirm:hover{transform:translateY(-2px);box-shadow:0 15px 25px -5px #4f46e580}.modal-btn.disabled{color:#cbd5e1;cursor:not-allowed;box-shadow:none;background:#f1f5f9}.empty-chat-state h3{color:#1e293b;margin-bottom:8px;font-size:20px;font-weight:700}.empty-chat-state p{opacity:.8;font-size:15px}.modal-search-wrapper{margin-bottom:20px}.no-members-found{text-align:center;text-align:center;color:#9ca3af;background:#ffffff4d;border:1px dashed #0000000d;border-radius:16px;padding:20px;font-size:14px}.member-item.loading{cursor:not-allowed;opacity:.6}.member-add-action{color:#6366f1;background:#6366f11a;border-radius:6px;margin-left:auto;padding:4px 12px;font-size:13px;font-weight:700;transition:all .2s}.member-item:hover .member-add-action{color:#fff;background:#6366f1}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}@keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalPopUp{0%{opacity:0;transform:scale(.8)translateY(30px)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(40px)scale(.9)}to{opacity:1;transform:translateY(0)scale(1)}}.theme-modal{max-width:300px!important;height:auto!important;padding:24px!important}.modal-header{justify-content:space-between;align-items:center;display:flex}.close-modal-btn{color:#94a3b8;cursor:pointer;background:0 0;border:none;padding:4px;font-size:24px;line-height:1}.theme-section{flex-direction:column;gap:12px;margin-bottom:24px;display:flex}.section-desc{color:#64748b;margin:0;font-size:13px;line-height:1.5}.color-presets{grid-template-columns:repeat(4,1fr);gap:12px;margin-top:8px;display:grid}.color-preset-btn{aspect-ratio:1;cursor:pointer;border:2px solid #fff;border-radius:50%;justify-content:center;align-items:center;width:40px;padding:0;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;box-shadow:0 2px 8px #0000001a}.color-preset-btn:hover{transform:scale(1.1);box-shadow:0 4px 12px #00000026}.color-preset-btn.active{border-color:#334155;transform:scale(1.15)}.check-icon{color:#fff;text-shadow:0 0 2px #00000080;font-size:14px;font-weight:700}.custom-color-picker{background:#fff;border:1px solid #0000000d;border-radius:12px;align-items:center;gap:12px;margin-top:8px;padding:8px 12px;display:flex}.color-input{cursor:pointer;background:0 0;border:none;border-radius:6px;width:32px;height:32px;padding:0;overflow:hidden}.color-input::-webkit-color-swatch-wrapper{padding:0}.color-input::-webkit-color-swatch{border:none;border-radius:6px}.color-hex-code{color:#64748b;font-weight:600}.contact-categories{flex-direction:column;gap:8px;padding:8px;display:flex}.category-item{cursor:pointer;color:var(--chat-text);border-radius:8px;align-items:center;gap:12px;width:100%;height:40px;padding:10px 12px;font-weight:500;transition:all .2s;display:flex}.category-item:hover{color:#1e293b;background:#f1f5f9}.category-item.active{color:#1447e6;background:#eff6ff}.category-item .count{color:#99a1af;border-radius:10px;margin-left:auto;padding:2px 8px}.contact-list-view{background:#fff;flex-direction:column;flex:1;height:100%;display:flex}.contact-list-header{color:var(--chat-text);border-bottom:1px solid #f1f5f9;height:45px;padding:10px 16px}.contact-list-toolbar{justify-content:space-between;align-items:center;padding:12px 16px 20px;display:flex}.toolbar-left{align-items:center;gap:20px;display:flex}.toolbar-left span{color:#64748b;font-weight:500}.toolbar-search{background:#f3f4f6;border-radius:6px;align-items:center;gap:8px;width:300px;height:36px;padding:12px;display:flex}.toolbar-search input{background:0 0;border:none;outline:none;width:100%;font-size:14px}.toolbar-right{gap:12px;height:36px;display:flex}.filter-select{cursor:pointer;color:#1e293b;background:#f3f4f6;border-radius:6px;align-items:center;gap:8px;padding:9px 12px;font-size:14px;display:flex}.dropdown-select{z-index:10;background:#fff;border:1px solid #e2e8f0;border-radius:8px;min-width:150px;margin-top:8px;position:absolute;top:100%;right:0;box-shadow:0 4px 6px #0000001a}.dropdown-select .dropdown-item{cursor:pointer;border-bottom:1px solid #e2e8f0;border-radius:0;align-items:center;gap:8px;height:40px;padding:12px 16px;display:flex}.dropdown-select .dropdown-item div{padding-top:3px}.contact-scroll-area{flex:1;padding:0 16px 16px;overflow-y:auto}.letter-title{color:var(--chat-subtext)}.contact-item-row{justify-content:space-between;align-items:center;height:64px;padding:12px 0;display:flex}.contact-item-left{align-items:center;gap:16px;display:flex}.contact-avatar{width:32px;height:32px;position:relative}.contact-avatar img{object-fit:cover;border-radius:50%;width:100%;height:100%}.contact-avatar .online-status{background:#22c55e;border:2px solid #fff;border-radius:50%;width:10px;height:10px;position:absolute;bottom:0;right:0}.contact-info{flex-direction:column;display:flex}.contact-name{color:var(--chat-text)}.contact-role{color:var(--chat-subtext)}.contact-item-actions{gap:8px;display:flex}.contact-action-btn{color:#64748b;cursor:pointer;background:#fff;border:1px solid #e2e8f0;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;transition:all .2s;display:flex}.contact-action-btn:hover{color:#1e293b;background:#f1f5f9;border-color:#cbd5e1}.chat-window.fullpage .chat-body-container{background:#fff;overflow:hidden;flex:1!important;width:100%!important;height:100%!important;display:flex!important}.chat-window.fullpage .chat-sidebar{border-right:1px solid var(--chat-border);background:#fff;flex-direction:column;flex-shrink:0;width:312px;display:flex}.chat-window.fullpage .chat-main{background:#fff;flex-direction:column;flex:1;display:flex;position:relative}.chat-main-header{border-bottom:1px solid var(--chat-border);background:#fff;flex-shrink:0;justify-content:space-between;align-items:center;min-height:64px;padding:12px 16px;display:flex}.chat-main-info{align-items:center;gap:10px;min-width:0;display:flex}.chat-main-avatar{flex-shrink:0;width:40px;height:40px}.chat-main-text{flex-direction:column;min-width:0;display:flex}.chat-main-text-container{align-items:center;gap:6px;display:flex}.chat-main-name{color:#1e293b;white-space:nowrap;text-overflow:ellipsis;font-size:15px;font-weight:600;line-height:1.2;overflow:hidden}.chat-main-status{color:#94a3b8;margin-top:1px;font-size:13px}.chat-main-actions{flex-shrink:0;gap:4px;display:flex}.main-action-btn{color:#64748b;cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;width:34px;height:34px;transition:all .2s;display:flex}.main-action-btn:hover{color:var(--primary);background:#f1f5f9}.chat-window.fullpage .chat-main-header{min-height:72px;padding:16px 24px}.chat-window.fullpage .chat-main-name{font-size:18px}.chat-window.fullpage .chat-main-actions{gap:8px;display:flex}.chat-window.fullpage .header-info-text{flex-direction:row;align-items:center;gap:6px}.chat-window.fullpage .header-subtitle{margin-top:0;font-size:16px}.chat-window.fullpage .chat-header .action-btn.theme-toggle{box-shadow:none;background:0 0}.chat-window.fullpage .chat-header{background-color:var(--app-sidebar-bg);height:45px;padding:8px 12px}.empty-chat-state{color:#94a3b8;text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;padding:40px;display:flex}.empty-icon{opacity:.5;margin-bottom:24px;font-size:64px}.empty-chat-state h3{color:#1e293b;margin-bottom:8px;font-size:20px}.empty-chat-state p{max-width:280px;font-size:14px;line-height:1.5}.search-section-title{color:#1e293b;align-items:center;gap:8px;margin-bottom:12px;font-size:16px;font-weight:700;display:flex}.search-count{color:#3b82f6;font-size:14px;font-weight:500}.search-section-content{flex-direction:column;gap:8px;display:flex}.search-result-item{cursor:pointer;border-radius:12px;align-items:center;gap:12px;height:64px;padding:8px;transition:all .2s;display:flex}.search-result-item:hover{background:#00000008}.search-result-avatar{border-radius:50%;flex-shrink:0;width:32px;height:32px;overflow:hidden}.search-result-avatar img{object-fit:cover;border-radius:50%;width:100%;height:100%}.avatar-placeholder{color:#fff;background:linear-gradient(135deg,#3b82f6,#2563eb);justify-content:center;align-items:center;width:100%;height:100%;font-size:18px;font-weight:600;display:flex}.search-result-info{flex:1;min-width:0}.search-result-name{color:var(--chat-text);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.search-result-sub{color:#64748b;margin-top:2px;font-size:12px}.search-view-all{color:#64748b;cursor:pointer;background:#00000008;border:none;border-radius:8px;width:100%;margin-top:12px;padding:10px;font-size:13px;font-weight:500;transition:all .2s}.search-view-all:hover{color:#1e293b;background:#0000000f}.message-result .search-result-top{justify-content:space-between;align-items:center;margin-bottom:2px;display:flex}.search-result-date{color:#94a3b8;font-size:11px}.search-result-text{color:#475569;-webkit-line-clamp:2;line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;font-size:13px;display:-webkit-box;overflow:hidden}.file-icon-wrapper{color:#3b82f6;background:#3b82f61a;border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;font-size:20px;display:flex}.highlight-match{color:var(--primary);font-weight:500}.resize-handle.ne{cursor:ne-resize;z-index:10001;width:15px;height:15px;position:absolute;top:0;right:0}.resize-handle.nw{cursor:nw-resize;z-index:10001;width:15px;height:15px;position:absolute;top:0;left:0}.resize-handle.se{cursor:se-resize;z-index:10001;width:15px;height:15px;position:absolute;bottom:0;right:0}.resize-handle.sw{cursor:sw-resize;z-index:10001;width:15px;height:15px;position:absolute;bottom:0;left:0}\n .chat-input-area{background:#fff;border-top:1px solid #e5e7eb;align-items:center;gap:12px;padding:12px 16px;transition:all .3s;display:flex;position:relative}.chat-input-actions{flex-shrink:0;align-items:center;gap:8px;display:flex}.action-btn{color:#6b7280;cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;padding:6px;transition:all .2s;display:flex}.action-btn:hover{color:#374151;background:#f3f4f6}.action-btn.active{color:var(--primary);background:#f3f4f6}.chat-input-container{flex:1;align-items:center;display:flex}.chat-input{color:#1f2937;background:#f3f4f6;border:1px solid #0000;border-radius:8px;outline:none;width:100%;padding:10px 16px;font-size:14px;transition:all .2s}.chat-input::placeholder{color:#9ca3af}.chat-input:focus{background:#f3f4f6;border-color:#3b82f64d}.chat-input:disabled{opacity:.6;cursor:not-allowed}.send-btn{cursor:pointer;color:#fff;background:var(--primary,#8aaeff);width:36px;height:36px;box-shadow:none;border:none;border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;transition:all .2s;display:flex}.send-btn:hover:not(:disabled){filter:brightness(.9);transform:translateY(-1px)}.send-btn:disabled{opacity:.6;cursor:not-allowed;background:#d1d5db}.send-btn svg{width:18px;height:18px}.emoji-picker{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:10;background:#fffffff2;border:1px solid #0000000d;border-radius:20px;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:10px;padding:12px;animation:.3s cubic-bezier(.34,1.56,.64,1) emojiSlideUp;display:grid;position:absolute;bottom:100%;left:16px;box-shadow:0 10px 30px #0000001a}@keyframes emojiSlideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.emoji-btn{cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;padding:4px;font-size:20px;transition:all .2s;display:flex}.emoji-btn:hover{background:#fff;transform:scale(1.2);box-shadow:0 2px 5px #0000000d}.selected-files-list{background:#ffffff1a;border-bottom:1px solid #fff3;flex-wrap:nowrap;gap:12px;height:100px;padding:12px 20px;display:flex;overflow:auto hidden}.selected-file-item{background:#fef2f280;border-radius:12px;flex-direction:column;align-items:center;gap:8px;padding:8px;transition:all .2s;display:flex;position:relative;box-shadow:0 2px 8px #00000014}.selected-file-item.other-file{flex-direction:row}.selected-file-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001f}.file-preview-image{object-fit:cover;border-radius:8px;width:54px;height:54px;display:block}.file-content-wrapper{flex-direction:row;align-items:center;gap:6px;display:flex}.file-icon{background:#f1f5f9;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-size:24px;display:flex}.file-info{flex-direction:column;gap:2px;min-width:0;display:flex}.file-name{color:#475569;white-space:nowrap;text-overflow:ellipsis;width:400px;max-width:100%;font-size:12px;overflow:hidden}.file-size{color:#94a3b8;white-space:nowrap;text-overflow:ellipsis;max-width:120px;font-size:11px;overflow:hidden}.remove-file-btn{color:#fff;cursor:pointer;background:#ef4444;border:none;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;font-size:14px;transition:all .2s;display:flex;position:absolute;top:-8px;right:-8px;box-shadow:0 2px 8px #ef44444d}.remove-file-btn:hover{background:#dc2626;transform:scale(1.1);box-shadow:0 4px 12px #ef444466}.remove-file-btn:disabled{opacity:.5;cursor:not-allowed}.selected-file-item.error-file-item{border:2px solid #ef4444;animation:.3s ease-in-out errorShake}@keyframes errorShake{0%{transform:translate(-3px)}50%{transform:translate(3px)}to{transform:translate(0)}}.selected-file-item.error-file-item:hover{background:#fef2f2b3;border-color:#dc2626}.file-size.error-size{color:#ef4444;font-weight:500}.reply-input-preview{background:#eff6ff;border-left:2px solid #2b7fff;border-top-left-radius:2px;border-bottom-left-radius:2px;justify-content:space-between;align-items:center;margin:0 10px 10px;padding:5px 20px;animation:.3s slideUp;display:flex;position:relative}.reply-content{flex-direction:column;flex:1;gap:2px;min-width:0;padding-left:18px;display:flex}.reply-user{color:#155dfc;margin-bottom:2px;font-size:.85rem;font-weight:700}.reply-user span{color:var(--primary,#155dfc)}.reply-text{color:#4a5565;white-space:nowrap;text-overflow:ellipsis;font-size:.85rem;overflow:hidden}.close-reply{color:#9ca3af;cursor:pointer;background:0 0;border:none;font-size:14px;transition:all .2s;position:absolute;top:0;right:0}.reply-icon{color:#155dfc;position:absolute;top:6px;left:10px}.close-reply:hover{color:#ef4444;transform:scale(1.1)}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.voice-recording-container{background:linear-gradient(135deg,#ef44441a,#ef44440d);border:1px solid #ef444433;flex:1;align-items:center;gap:12px;padding:12px 16px;animation:.2s slideUp;display:flex}.voice-recording-info{flex:1;align-items:center;gap:8px;display:flex}.recording-indicator{color:#374151;align-items:center;gap:6px;font-size:13px;font-weight:500;display:flex}.recording-dot{background:#ef4444;border-radius:50%;width:8px;height:8px;animation:1.5s ease-in-out infinite recordingPulse}@keyframes recordingPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.2)}}.recording-duration{color:#374151;text-align:right;min-width:45px;font-size:13px;font-weight:600}.voice-recorded-container{background:linear-gradient(135deg,#3b82f61a,#3b82f60d);border:1px solid #3b82f633;flex:1;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;animation:.2s slideUp;display:flex}.voice-recorded-info{flex:1;align-items:center;gap:8px;font-size:13px;display:flex}.voice-label{color:#1f2937;white-space:nowrap;font-weight:500}.voice-duration{color:#3b82f6;text-align:right;min-width:45px;margin-left:auto;font-weight:600}.voice-control-btn{color:#1f2937;cursor:pointer;background:#fff;border:1px solid #0000001a;border-radius:6px;justify-content:center;align-items:center;width:32px;height:32px;font-size:14px;transition:all .2s;display:flex}.voice-control-btn:hover{background:#f9fafb;transform:scale(1.05)}.voice-control-btn.cancel-btn{color:#ef4444;background:#ef44440d;border-color:#ef44441a}.voice-control-btn.add-btn{color:#fff;background:#8aaeff;border-color:#8aaeff}\n .message-list-wrapper{flex-direction:column;flex:1;display:flex;position:relative;overflow:hidden}.message-list{background:#f9fafb80;flex-direction:column-reverse;flex:1;gap:20px;padding:24px 20px;display:flex;overflow:hidden auto}.chat-date-divider{justify-content:center;align-items:center;width:100%;margin:20px 0;display:flex}.chat-date-divider span{color:#64748b;background:#f1f5f9;border-radius:20px;padding:4px 16px;font-size:12px;font-weight:500;box-shadow:0 1px 2px #0000000d}.message-item{gap:4px 8px;max-width:70%;display:flex;position:relative}.message-content{flex-direction:column;gap:4px;width:fit-content;max-width:100%;display:flex}.message-item.current-user .message-content{align-items:flex-end}.message-item.other-user .message-content{align-items:flex-start}.message-content-container{flex-direction:column;gap:12px;display:flex;position:relative}.message-item.current-user{flex-direction:row-reverse;align-self:flex-end}.message-item.other-user{align-self:flex-start}.message-bubble.current-user{background:#155dfc;align-self:flex-end}.message-bubble.other-user{background:#f3f4f6;border-radius:8px 16px 16px;align-self:flex-start}.message-avatar{object-fit:cover;border:2px solid #ffffff4d;border-radius:50%;flex-shrink:0;width:40px;height:40px;transition:transform .2s;box-shadow:0 4px 12px #00000026}.message-bubble{border-radius:16px 8px 16px 16px;grid-template-columns:minmax(0,1fr);padding:10px 16px;font-size:15px;line-height:1.6;display:grid;position:relative}.message-files{grid-template-columns:repeat(2,minmax(145px,1fr));align-content:start;gap:8px;max-width:100%;display:grid}.message-files>*{aspect-ratio:1.5;width:100%}.message-item .message-files>:last-child:nth-child(odd){grid-column:span 2}.message-item.current-user .message-files{align-self:flex-end}.message-item.other-user .message-files{align-self:flex-start}.file-item{cursor:pointer;background:#ffffff26;border:1px solid #fff3;border-radius:8px;align-items:center;gap:10px;max-height:60px;padding:8px 12px;text-decoration:none;transition:all .2s;display:flex}.file-item:hover{background:#ffffff40;border-color:#ffffff4d;transform:translate(4px)}.file-icon{flex-shrink:0;font-size:18px}.file-info{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.file-size{opacity:.7;color:inherit;font-size:11px}.file-image-wrapper{border-radius:8px;justify-content:center;align-items:center;max-width:100%;max-height:288px;margin-top:0;display:flex;position:relative;overflow:hidden}.file-image{object-fit:cover;cursor:pointer;border:1px solid #fff3;border-radius:8px;width:100%;height:100%;transition:transform .2s}.file-image:hover{transform:scale(1.05)}.image-overlay-more{cursor:pointer;background:#00000080;border-radius:8px;justify-content:center;align-items:center;width:100%;height:100%;transition:all .2s;display:flex;position:absolute;top:0;left:0}.image-overlay-more:hover{background:#000000a6}.image-overlay-text{color:#fff;text-shadow:0 2px 4px #0000004d;font-size:28px;font-weight:600}.user .file-image{border-color:#ffffff4d}.message-actions-bar{-webkit-backdrop-filter:none;box-shadow:none;opacity:0;pointer-events:none;z-index:100;background:0 0;border:none;gap:2px;padding:0;transition:all .2s;display:flex;position:absolute;bottom:0}.message-item:hover .message-actions-bar{opacity:1;pointer-events:auto}.message-item.current-user .message-actions-bar{right:calc(100% + 8px)}.message-item.other-user .message-actions-bar{left:calc(100% + 8px)}.chat-window:not(.fullpage) .message-list{overflow-x:hidden}.chat-window:not(.fullpage) .message-item.current-user .message-actions-bar,.chat-window:not(.fullpage) .message-item.other-user .message-actions-bar{-webkit-backdrop-filter:blur(8px);background:#ffffffe6;border:1px solid #0000000d;border-radius:20px;gap:2px;padding:2px 6px;display:flex;inset:auto 0 -22px auto;transform:none;box-shadow:0 2px 8px #00000014}.chat-window:not(.fullpage) .message-item.other-user .message-member-name{margin-right:0}.chat-window:not(.fullpage) .action-icon svg{width:13px;height:13px}.chat-window:not(.fullpage) .action-icon{width:26px;height:26px}.action-icon{color:#64748b;cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;width:30px;height:30px;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex}.action-icon svg{stroke-width:2.2px;width:16px;height:16px}.action-icon:hover{background:#0000000d;transform:translateY(-2px)}.action-icon[title=Xóa]:hover,.action-icon[title=Thu\\ hồi]:hover{color:#ef4444;background:#ef44441a}.action-icon[title=Trả\\ lời]:hover{color:#3b82f6;background:#3b82f61a}.action-icon[title=Thích]:hover{color:#f59e0b;background:#f59e0b1a}.action-icon[title=Yêu\\ thích]:hover{color:#ec4899;background:#ec48991a}.message-reactions-badge{z-index:10;background:#fffffff2;border:1px solid #0000000d;border-radius:10px;align-items:center;gap:2px;padding:2px 6px;font-size:13px;animation:.3s cubic-bezier(.175,.885,.32,1.275) popIn;display:flex;position:absolute;bottom:-11px;box-shadow:0 2px 8px #0000001a}.message-reactions-badge span{line-height:1}.message-item.current-user .message-reactions-badge{right:8px}.message-item.other-user .message-reactions-badge{left:8px}@keyframes popIn{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.message-reply-preview{cursor:pointer;background:#0000001a;border-left:3px solid #ffffff80;border-radius:8px;min-width:120px;margin-bottom:8px;padding:6px 10px;font-size:.8rem;transition:all .2s}.message-bubble.other-user .message-reply-preview{border-left-color:var(--primary,#155dfc);background:#0000000d}.message-reply-preview:hover{background:#00000026}.reply-user-name{color:#fffffff2;white-space:nowrap;text-overflow:ellipsis;margin-bottom:2px;font-size:.75rem;font-weight:700;overflow:hidden}.message-bubble.other-user .reply-user-name{color:var(--primary,#155dfc)}.reply-content-text{color:#fffc;white-space:nowrap;text-overflow:ellipsis;font-size:.8rem;overflow:hidden}.message-bubble.other-user .reply-content-text{color:#475569}.message-text{overflow-wrap:break-word;word-break:break-word;width:auto;display:inline-block}.message-bubble.other-user .message-text{color:var(--chat-text)}.message-bubble.current-user .message-text{color:var(--primary-contrast,#f8fafc)}.message-bubble.other-user.revoked .message-text,.message-bubble.current-user.revoked .message-text{color:color-mix(in srgb, var(--chat-text), transparent 50%)}.message-member-name{color:#475569;white-space:nowrap;text-overflow:ellipsis;min-width:0;margin-bottom:4px;font-size:15px;font-weight:500;overflow:hidden}.scroll-bottom-btn{-webkit-backdrop-filter:blur(8px);cursor:pointer;color:#4f46e5;z-index:1000;background:#ffffffb3;border:1px solid #ffffff4d;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:20px;transition:all .3s cubic-bezier(.4,0,.2,1);animation:.3s fadeInPop;display:flex;position:absolute;bottom:20px;right:20px;box-shadow:0 4px 15px #00000026}.scroll-bottom-btn:hover{background:#fff;transform:translateY(-4px);box-shadow:0 6px 20px #0003}.unread-dot{background-color:#ff4d4f;border:2px solid #fff;border-radius:50%;width:10px;height:10px;position:absolute;top:0;right:0}@keyframes fadeInPop{0%{opacity:0;transform:scale(.5)translateY(20px)}to{opacity:1;transform:scale(1)translateY(0)}}.message-time{color:var(--chat-text);margin-top:2px;font-size:10px;font-weight:500}.message-item.current-user .message-time{text-align:right;margin-right:4px}.message-item.other-user .message-time{text-align:left;margin-left:4px}.message-item-status{color:var(--chat-text);margin-left:4px;font-size:10px;font-weight:400}.message-item-status.seen{color:#3b82f6;font-weight:600}.message-item-status.seen svg{margin-bottom:-2px}.message-bubble.revoked{opacity:.8;background:#ffffff0d;border:1px dashed #fff3;font-style:italic}@keyframes highlight-fade{0%{background-color:rgba(var(--primary-rgb), .2);transform:scale(1.02)}to{background-color:#0000;transform:scale(1)}}.highlight-message .message-bubble{animation:2s ease-out highlight-fade}.see-more-btn{color:#3b82f6;cursor:pointer;margin-left:8px;font-size:.85em;font-weight:600;text-decoration:none;transition:all .2s;display:inline-block}.message-bubble.current-user .see-more-btn{color:#ffffffe6;text-decoration:underline}.see-more-btn:hover{filter:brightness(1.1);text-decoration:underline}.message-bubble.current-user .see-more-btn:hover{color:#fff}\n .file-viewer-overlay{z-index:100001;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#000000e6;justify-content:center;align-items:center;animation:.2s ease-in-out fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.file-viewer-content{flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;animation:.3s ease-out slideUp;display:flex;position:relative}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.file-viewer-main{border-radius:8px;justify-content:center;align-items:center;max-width:100%;max-height:70vh;display:flex;position:relative;overflow:hidden}.file-viewer-image{object-fit:contain;border-radius:8px;max-width:100%;max-height:70vh;box-shadow:0 10px 40px #0000004d}.file-viewer-main:has(.file-viewer-video){overflow:visible}.file-viewer-video{object-fit:contain;border-radius:8px;max-width:100%;max-height:100%;box-shadow:0 10px 40px #0000004d}.video-container{justify-content:center;width:85vw;height:78vh;display:flex;overflow:visible}.file-viewer-close{color:#fff;cursor:pointer;z-index:100001;text-align:center;background:#fff3;border:1px solid #ffffff4d;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;padding:0;font-size:24px;transition:all .2s;display:flex;position:absolute;top:30px;right:70px}.file-viewer-close:hover{background:#ffffff4d;border-color:#fff6;transform:scale(1.1)}.file-viewer-close:active{transform:scale(.95)}.file-viewer-nav{color:#fff;cursor:pointer;z-index:100001;text-align:center;background:#ffffff26;border:1px solid #fff3;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;padding:0;font-size:32px;transition:all .2s;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.file-viewer-nav:hover{background:#ffffff40;border-color:#ffffff4d}.file-viewer-nav:active{transform:translateY(-50%)scale(.95)}.file-viewer-prev{left:70px}.file-viewer-next{right:70px}@media (width<=768px){.file-viewer-prev{left:10px}.file-viewer-next{right:10px}.file-viewer-close{top:10px;right:10px}}.file-viewer-counter{color:#fff;white-space:nowrap;z-index:100001;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#00000080;border-radius:20px;padding:8px 16px;font-size:14px;font-weight:500;position:absolute;bottom:20px;left:50%;transform:translate(-50%)}.file-viewer-thumbnails-container{z-index:100001;opacity:0;pointer-events:none;visibility:hidden;justify-content:center;align-items:center;gap:2rem;width:100%;padding-bottom:3.5rem;display:flex;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.file-viewer-thumbnails{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0000004d;border-radius:8px;gap:8px;max-width:60%;padding-top:12px;padding-bottom:12px;display:flex;overflow-x:auto;-webkit-mask-image:linear-gradient(90deg,#0000 0%,#000 10% 90%,#0000 100%);mask-image:linear-gradient(90deg,#0000 0%,#000 10% 90%,#0000 100%)}.file-viewer-counter:hover~.file-viewer-thumbnails-container,.file-viewer-thumbnails-container:hover{opacity:1;visibility:visible;pointer-events:auto}.file-viewer-thumbnails::-webkit-scrollbar{height:4px}.file-viewer-thumbnails::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:2px}.file-viewer-thumbnails::-webkit-scrollbar-thumb:hover{background:#ffffff80}.file-viewer-thumbnails-scroll-btn{color:#fff;cursor:pointer;z-index:100002;-webkit-backdrop-filter:blur(10px)saturate(180%);backdrop-filter:blur(10px)saturate(180%);background:#fff3;border:1px solid #ffffff4d;border-radius:8px;justify-content:center;align-items:center;width:36px;height:36px;padding:0;font-size:18px;transition:all .3s;display:flex;box-shadow:0 8px 32px #1f26875e}.file-viewer-thumbnails-scroll-btn:hover{background:#ffffff4d;border-color:#ffffff80;transform:scale(1.05);box-shadow:0 8px 32px #1f268780}.file-viewer-thumbnails-scroll-btn:active{transform:scale(.95)}.file-viewer-thumbnail{cursor:pointer;background:#0000004d;border:2px solid #0000;border-radius:4px;width:60px;min-width:60px;height:60px;padding:0;transition:all .2s;overflow:hidden}.file-viewer-thumbnail:hover{background:#0006;border-color:#ffffff80}.file-viewer-thumbnail.active{background:#0003;border-color:#fffc}.thumbnail-image{object-fit:cover;width:100%;height:100%}.thumbnail-video{object-fit:cover;z-index:1;cursor:pointer;width:100%;height:100%}.video-thumbnail-container{border-radius:4px;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative;overflow:hidden}.play-icon-overlay{z-index:2;pointer-events:none;cursor:pointer;background-color:#00000080;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;display:flex;position:absolute}.play-arrow{color:#fff;margin-bottom:3px;margin-left:2px;font-size:18px}.file-viewer-overlay:has(.file-viewer-audio){background:0 0}.file-viewer-main:has(.file-viewer-audio){overflow:visible}.audio-container{justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;overflow:visible}.audio-player-wrapper{-webkit-backdrop-filter:blur(30px)saturate(150%);backdrop-filter:blur(30px)saturate(150%);color:#1e293b;z-index:1000;background:#ffffff4d;border:1px solid #ffffff80;border-radius:8px;flex-direction:column;flex-shrink:0;justify-content:center;align-items:center;gap:12px;width:100%;max-width:500px;padding:24px 20px;display:flex;position:relative;box-shadow:0 0 0 100vmax #000000e6}.file-viewer-audio{width:100%;height:40px}.file-viewer-audio::-webkit-media-controls-panel{background-color:#ffffff1a}.audio-name{color:#000;text-align:center;word-break:break-word;max-width:100%;margin:0;font-size:16px}.audio-thumbnail-container{background:linear-gradient(135deg,#6496ff80 0%,#c864ff80 100%);border-radius:4px;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.audio-thumbnail-icon{font-size:28px}.pdf-thumbnail-container{background:linear-gradient(135deg,#f5222dcc 0%,#ff7a45cc 100%);border-radius:4px;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.pdf-thumbnail-icon{font-size:28px}@media (width<=1024px){.file-viewer-content{max-width:95%}.file-viewer-image{max-height:60vh}.file-viewer-nav{width:40px;height:40px;font-size:24px}}@media (width<=600px){.file-viewer-overlay{inset:0}.file-viewer-content{max-width:100%;max-height:100vh}.file-viewer-main,.file-viewer-image{max-height:50vh}.file-viewer-nav{width:36px;height:36px;font-size:20px}.file-viewer-prev{left:10px}.file-viewer-next{right:10px}.file-viewer-close{width:36px;height:36px;font-size:20px;top:10px;right:10px}.file-viewer-counter{padding:6px 12px;font-size:12px;bottom:60px}.file-viewer-thumbnails{max-width:100%;padding:8px}.file-viewer-thumbnails-scroll-btn{width:32px;height:32px;font-size:16px}.file-viewer-thumbnail{width:50px;min-width:50px;height:50px}}.file-viewer-main:has(.file-viewer-pdf){overflow:visible}.file-viewer-content:has(.file-viewer-pdf) .file-viewer-close{top:5rem}.pdf-container{justify-content:center;width:100vw;height:100vh;display:flex;overflow:visible}.file-viewer-pdf{object-fit:contain;border-radius:8px;max-width:100%;max-height:100%;box-shadow:0 10px 40px #0000004d}\n .toast-container{z-index:100000;pointer-events:none;flex-direction:column;gap:10px;display:flex;position:absolute;bottom:24px;right:24px}.toast-item{pointer-events:auto;-webkit-backdrop-filter:blur(15px)saturate(150%);color:#1e293b;background:#fffc;border:1px solid #fff9;border-radius:20px;align-items:center;gap:12px;min-width:500px;max-width:calc(100% - 40px);padding:12px 16px;font-size:14px;font-weight:500;animation:.4s cubic-bezier(.175,.885,.32,1.275) toast-pop-in;display:flex;position:relative;overflow:hidden;box-shadow:0 4px 6px -1px #0000000d,0 10px 15px -3px #0000001a}.toast-item:before{content:\"\";width:4px;transition:background .3s;position:absolute;top:0;bottom:0;left:0}.toast-item.success:before{background:#10b981}.toast-item.error:before{background:#ef4444}.toast-item.info:before{background:#3b82f6}.toast-item.warning:before{background:#f59e0b}.toast-item span{background:#00000008;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;font-size:16px;display:flex}.toast-item button{cursor:pointer;color:#94a3b8;background:0 0;border:none;border-radius:5px;justify-content:center;align-items:center;padding:4px;transition:all .2s;display:flex}.toast-item button:hover{color:#1e293b;background:#0000000d}@keyframes toast-pop-in{0%{opacity:0;transform:translate(20px)scale(.9)}to{opacity:1;transform:translate(0)scale(1)}}.dark-theme .toast-item{color:#f8fafc;background:#1e293bb3;border-color:#ffffff14;box-shadow:0 20px 25px -5px #0003}.dark-theme .toast-item span{background:#ffffff0d}.toast-message{flex:1}.toast-actions{gap:8px;margin-top:10px;display:flex}.toast-btn{cursor:pointer;border-radius:4px;padding:4px 10px;font-size:12px;transition:all .2s}.toast-btn.cancel{color:inherit;background:#ffffff1a;border:1px solid #ffffff4d}.toast-btn.confirm{color:#fff;border:none;font-weight:700}.toast-item.warning .toast-btn.confirm{background:#ff9800}.toast-item.success .toast-btn.confirm,.toast-item.info .toast-btn.confirm{background:#2196f3}.toast-close-btn{cursor:pointer;opacity:.5;color:inherit;background:0 0;border:none;justify-content:center;align-items:center;padding:0 0 0 8px;font-size:16px;display:flex}\n .side-bar-info-chat{border-left:1px solid var(--chat-border);background:#fff;flex-direction:column;flex-shrink:0;width:320px;display:flex}.info-header{justify-content:flex-end;padding:16px;display:flex}.close-info-btn{color:#64748b;cursor:pointer;background:0 0;border:none;border-radius:4px;padding:4px}.close-info-btn:hover{background:#f1f5f9}.info-content-scroll{flex-direction:column;flex:1;padding:0 20px 20px;display:flex;overflow-y:auto}.info-content-scroll::-webkit-scrollbar{width:4px}.info-content-scroll::-webkit-scrollbar-thumb{background:#e2e8f0;border-radius:10px}.info-basic-section{text-align:center;flex-direction:column;align-items:center;display:flex}.info-avatar-large{width:80px;height:80px}.info-avatar-large .chat-avatar{font-size:24px}.info-main-details{flex-direction:column;display:flex}.info-chat-name{color:#1e293b;justify-content:center;align-items:center;gap:8px;margin-top:12px;margin-bottom:4px;font-size:18px;font-weight:700;display:flex}.info-status-icons{color:#94a3b8;gap:4px;display:flex}.info-member-count{color:#64748b;margin-top:0;margin-bottom:10px;font-size:14px}.info-quick-actions{justify-content:space-around;margin-bottom:24px;display:flex}.action-item{cursor:pointer;flex-direction:column;align-items:center;gap:8px;display:flex}.action-icon-info{color:#475569;background:#f8fafc;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:80px;height:60px;transition:all .2s;display:flex}.action-item:hover .action-icon-info{color:var(--primary);background:#f1f5f9}.action-item span{color:#475569;font-size:13px;font-weight:500}.menu-item{cursor:pointer;color:#1e293b;border-radius:8px;justify-content:space-between;align-items:center;padding:10px 12px;font-size:15px;font-weight:500;display:flex}.menu-item:hover{background:#f8fafc}.menu-left{align-items:center;gap:12px;display:flex}.info-members-section{padding:16px 0}.section-title-row{color:#64748b;justify-content:space-between;align-items:center;margin-bottom:12px;padding:0 4px;font-size:14px;font-weight:600;display:flex}.title-actions{color:#94a3b8;gap:8px;display:flex}.title-actions svg{cursor:pointer}.arrow-icon{transition:transform .2s}.arrow-icon.collapsed{transform:rotate(-180deg)}.member-item-left.clickable{cursor:pointer}.members-compact-list{flex-direction:column;display:flex}.members-facepile{align-items:center;padding:8px 4px;display:flex}.facepile-item{z-index:1;border:2px solid #fff;border-radius:50%;width:32px;height:32px;margin-left:-8px;transition:transform .2s;position:relative}.facepile-item:first-child{margin-left:0}.facepile-item:hover{z-index:10;transform:translateY(-4px)}.facepile-item .member-avatar-small{width:100%;height:100%}.facepile-item .online-status{border-width:1.5px;width:8px;height:8px;bottom:0;right:0}.facepile-more{color:#64748b;z-index:0;cursor:pointer;background:#f1f5f9;border:2px solid #fff;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;margin-left:-8px;font-size:11px;font-weight:700;display:flex}.facepile-more:hover{background:#e2e8f0}.member-compact-item{border-radius:8px;justify-content:space-between;align-items:center;padding:8px;transition:background .2s;display:flex;position:relative}.member-compact-item:hover{background:#f8fafc}.member-item-left{align-items:center;gap:8px;display:flex}.member-avatar-small{border-radius:50%;width:32px;height:32px;position:relative}.member-avatar-small img,.member-img{object-fit:cover;border-radius:50%;width:100%;height:100%;display:block}.member-initials{background:var(--primary);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:100%;height:100%;font-size:12px;font-weight:600;display:flex}.member-info{flex-direction:column;gap:2px;display:flex}.member-options-container{align-items:center;display:flex;position:relative}.member-options-btn{color:#94a3b8;cursor:pointer;opacity:0;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:6px;transition:all .2s;display:flex}.member-compact-item:hover .member-options-btn{opacity:1}.member-options-btn:hover{color:#475569;background:#e2e8f0}.member-dropdown-menu{z-index:100;background:#fff;border:1px solid #f1f5f9;border-radius:12px;width:190px;margin-top:4px;padding:6px;animation:.2s fadeIn;position:absolute;top:100%;right:0;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.dropdown-item{color:#1e293b;cursor:pointer;background:0 0;border:none;border-radius:8px;align-items:center;gap:10px;width:100%;padding:10px 12px;font-size:14px;font-weight:500;transition:all .2s;display:flex}.dropdown-item:hover{background:#f1f5f9}.dropdown-item.delete{color:#ef4444}.dropdown-item.delete:hover{background:#fef2f2}.dropdown-item svg{flex-shrink:0}.member-name-row{align-items:center;gap:4px;width:fit-content;display:flex}.member-role{color:#64748b;font-size:12px}.online-status{background:#22c55e;border:2px solid #fff;border-radius:50%;width:10px;height:10px;position:absolute;bottom:0;right:0}.info-summary-section{padding:16px 0}.info-summary-section .section-title{color:#64748b;margin-bottom:12px;font-size:14px;font-weight:600}.summary-tabs{background:#f1f5f9;border-radius:8px;margin-bottom:16px;padding:4px;display:flex}.tab-item{text-align:center;color:#64748b;cursor:pointer;border-radius:6px;flex:1;padding:6px;font-size:13px}.tab-item.active{color:#1e293b;background:#fff;font-weight:600;box-shadow:0 1px 3px #0000001a}.file-item{border-radius:8px;align-items:center;gap:12px;padding:8px;display:flex}.file-item:hover{background:#f8fafc}.file-icon{background:#f1f5f9;border-radius:8px;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.file-details{flex-direction:column;flex:1;min-width:0;display:flex}.file-name{color:#1e293b;white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:500;overflow:hidden}.file-size{color:#94a3b8;font-size:12px}.file-download-btn{color:#94a3b8;cursor:pointer;background:0 0;border:none;padding:4px}.file-download-btn:hover{color:var(--primary)}.group-management-view,.main-info-view{animation:.25s ease-out fadeInSlide}@keyframes fadeInSlide{0%{opacity:0;transform:translate(15px)}to{opacity:1;transform:translate(0)}}.header-left{flex:1;align-items:center;gap:12px;display:flex}.back-info-btn{color:#64748b;cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;padding:4px;display:flex}.back-info-btn:hover{background:#f1f5f9}.management-section{padding:16px 0}.management-section.border-top{border-top:1px solid #f1f5f9}.section-subtitle{color:#64748b;margin-bottom:16px;padding:0 4px;font-size:14px}.settings-list{flex-direction:column;display:flex}.setting-item{cursor:pointer;justify-content:space-between;align-items:center;padding:12px 4px;transition:background .2s;display:flex}.setting-item span{color:#1e293b;flex:1;padding-right:12px;font-size:14px;line-height:1.4}.setting-item input[type=checkbox]{width:18px;height:18px;accent-color:var(--primary);cursor:pointer}.setting-item-switch{justify-content:space-between;align-items:center;padding:12px 4px;display:flex}.setting-info{flex:1;align-items:center;gap:8px;display:flex}.setting-info span{color:#1e293b;max-width:200px;font-size:14px;line-height:1.4}.help-icon{color:#94a3b8;cursor:pointer}.switch{flex-shrink:0;width:36px;height:20px;display:inline-block;position:relative}.switch input{opacity:0;width:0;height:0}.slider{cursor:pointer;background-color:#e2e8f0;transition:all .4s;position:absolute;inset:0}.slider:before{content:\"\";background-color:#fff;width:14px;height:14px;transition:all .4s;position:absolute;bottom:3px;left:3px}input:checked+.slider{background-color:var(--primary)}input:checked+.slider:before{transform:translate(16px)}.slider.round{border-radius:20px}.slider.round:before{border-radius:50%}.management-menu{flex-direction:column;display:flex}.management-menu .menu-item{padding:12px 4px}.management-menu .menu-left svg{color:#64748b}.info-panel-clear-history{color:#d4183d;cursor:pointer;background:0 0;border:none;place-self:center;gap:4px;padding:7px 12px;display:flex}.info-panel-clear-history>span{margin-top:1px}\n .app-sidebar{background:var(--app-sidebar-bg);flex-direction:column;flex-shrink:0;align-items:center;gap:32px;width:64px;padding:12px 12px 24px;display:flex}.app-nav{flex-direction:column;flex:1;gap:16px;display:flex}.nav-item{color:#64748b;cursor:pointer;border-radius:12px;justify-content:center;align-items:center;width:40px;height:40px;transition:all .2s;display:flex}.nav-item:hover{background:var(--active-item-bg);color:var(--primary)}.nav-item.active{background:var(--primary);color:var(--primary-contrast)}.nav-separator{opacity:.8;background:#98a8b3;width:40px;height:1px;margin:4px 0}.app-sidebar-footer{flex-direction:column;align-items:center;gap:20px;padding-bottom:8px;display:flex}.app-avatar{background:#f1f5f9;border:2px solid #fff;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;display:flex;overflow:hidden;box-shadow:0 2px 8px #0000000d}.app-avatar img{object-fit:cover;border-radius:50%;width:100%;height:100%}.app-avatar-fallback{color:#64748b;justify-content:center;align-items:center;width:100%;height:100%;font-size:14px;font-weight:700;display:flex}\n .modal-overlay{z-index:9999;-webkit-backdrop-filter:blur();backdrop-filter:blur();background:#0006;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.profile-modal-content{background:#fff;border-radius:20px;width:400px;padding:30px;animation:.3s cubic-bezier(.34,1.56,.64,1) modalScaleUp;position:relative;box-shadow:0 20px 40px #0003}@keyframes modalScaleUp{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.close-modal-btn{color:#94a3b8;cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:5px;transition:all .2s;display:flex;position:absolute;top:20px;right:20px}.close-modal-btn:hover{color:#475569;background:#f1f5f9}.profile-header{text-align:center;margin-bottom:25px}.profile-avatar-wrapper{width:90px;height:90px;margin:0 auto 15px;position:relative}.profile-avatar-wrapper img{object-fit:cover;border:4px solid #f8fafc;border-radius:50%;width:100%;height:100%}.profile-avatar-placeholder{color:#fff;background:#3b82f6;border:4px solid #f8fafc;border-radius:50%;justify-content:center;align-items:center;width:100%;height:100%;font-size:36px;font-weight:600;display:flex}.profile-online-status{background:#22c55e;border:3px solid #fff;border-radius:50%;width:16px;height:16px;position:absolute;bottom:5px;right:5px}.profile-name{color:#1e293b;margin-bottom:4px;font-size:20px;font-weight:700}.status-text{color:#64748b;font-size:13px}.profile-actions{gap:12px;margin-bottom:30px;display:flex}.profile-action-btn{cursor:pointer;color:#475569;background:#f8fafc;border:none;border-radius:12px;flex-direction:column;flex:1;align-items:center;gap:6px;padding:12px 8px;transition:all .2s;display:flex}.profile-action-btn:hover{color:#3b82f6;background:#f1f5f9;transform:translateY(-2px)}.profile-action-btn svg{color:#64748b;transition:color .2s}.profile-action-btn:hover svg{color:#3b82f6}.profile-action-btn span{font-size:13px;font-weight:600}.profile-details{border-top:1px solid #f1f5f9;padding-top:10px}.detail-item{border-bottom:1px solid #f1f5f9;justify-content:flex-start;align-items:center;padding:12px 0;font-size:14px;display:flex}.detail-item:last-child{border-bottom:none}.detail-item .label{color:#64748b;flex-shrink:0;width:110px}.detail-item .value{color:#1e293b;font-size:16px;font-weight:400}.value.email,.value.phone{color:#3b82f6;cursor:pointer}.value.email:hover,.value.phone:hover{text-decoration:underline}\n .modal-content.add-chat-modal{background:#fff;border:1px solid #0000000d;border-radius:10px;flex-direction:column;width:450px;max-width:450px;height:auto;min-height:430px;max-height:90vh;padding:0;display:flex;overflow:hidden;box-shadow:0 10px 40px #0000001a}.add-chat-modal .modal-header{justify-content:space-between;align-items:center;padding:16px 20px 0;display:flex}.add-chat-modal .modal-title{color:#1f2937;text-align:left;margin:0;font-size:18px;font-weight:600}.add-chat-modal .close-modal-btn{color:#6b7280;cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:4px;transition:background .2s;display:flex}.add-chat-modal .close-modal-btn:hover{color:#111827;background:#f3f4f6}.add-chat-modal .modal-body{flex-direction:column;flex:1;gap:8px;padding:20px 20px 0;display:flex;overflow:hidden}.add-chat-modal .group-info-section{align-items:center;gap:16px;display:flex}.add-chat-modal .group-avatar-upload{flex-shrink:0}.add-chat-modal .avatar-placeholder{color:#9ca3af;cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;padding:0;display:flex;position:relative}.add-chat-modal .upload-icon{color:#6b7280;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:50%;justify-content:center;align-items:center;width:18px;height:18px;display:flex;position:absolute;bottom:-2px;right:-2px}.add-chat-modal .preview-avatar{object-fit:cover;border-radius:100%;width:100%;height:100%}.add-chat-modal .group-name-input{border:none;border-bottom:1px solid #e5e7eb;outline:none;flex:1;padding:8px 0;font-size:16px;transition:border-color .2s}.add-chat-modal .group-name-input:focus{border-bottom-color:#3b82f6}.add-chat-modal .search-section .chat-search-bar{padding:0}.add-chat-modal .search-section .search-input{background:#fff;border:1px solid #e5e7eb;border-radius:20px;padding:10px 16px 10px 40px;font-size:15px}.add-chat-modal .search-section .search-icon{left:16px}.add-chat-modal .selected-members-tags{flex-wrap:wrap;gap:8px;display:flex}.add-chat-modal .member-tag{color:#2563eb;background:#eff6ff;border-radius:100px;align-items:center;gap:6px;padding:4px 10px;font-size:14px;font-weight:500;display:flex}.add-chat-modal .member-tag>span{margin-bottom:-4px}.add-chat-modal .remove-tag-btn{color:#2563eb;cursor:pointer;opacity:.7;background:0 0;border:none;justify-content:center;align-items:center;padding:2px;transition:opacity .2s;display:flex}.add-chat-modal .remove-tag-btn:hover{opacity:1}.modal-content.add-chat-modal.has-tags{height:550px}.add-chat-modal .members-list-container{border-top:1px solid #f3f4f6;flex:1;margin:0 -20px;padding:0 7px;overflow-y:hidden}.add-chat-modal .members-list{margin:0;padding:12px 0}.add-chat-modal .member-item{cursor:pointer;background:0 0;border-radius:10px;align-items:center;gap:12px;padding:10px 12px;transition:background .2s;display:flex}.add-chat-modal .member-item.selected{background:#f0f7ff}.add-chat-modal .member-item:hover{background:#f9fafb}.add-chat-modal .member-item.selected:hover{background:#e0efff}.add-chat-modal .member-checkbox{flex-shrink:0}.add-chat-modal .checkbox-custom{border:1.5px solid #d1d5db;border-radius:4px;justify-content:center;align-items:center;width:20px;height:20px;transition:all .2s;display:flex}.add-chat-modal .checkbox-custom.checked{background:#3b82f6;border-color:#3b82f6}.add-chat-modal .member-avatar-wrapper{width:32px;height:32px;position:relative}.add-chat-modal .member-avatar{color:#4b5563;background:#f3f4f6;border:none;border-radius:50%;justify-content:center;align-items:center;width:100%;height:100%;font-size:14px;font-weight:600;display:flex;overflow:hidden}.add-chat-modal .member-avatar img{object-fit:cover;width:100%;height:100%}.add-chat-modal .avatar-letter{color:#fff;background:linear-gradient(135deg,#6366f1,#a855f7);justify-content:center;align-items:center;width:100%;height:100%;display:flex}.add-chat-modal .status-dot{width:12px;height:12px;position:absolute;bottom:-1px;right:-1px}.add-chat-modal .member-name{color:#374151;font-size:15px;font-weight:500}.add-chat-modal .modal-footer{border-top:1px solid #f3f4f6;justify-content:flex-end;gap:12px;padding:11px 20px;display:flex}.add-chat-modal .footer-btn{cursor:pointer;border:none;border-radius:10px;padding:10px 24px;font-size:15px;font-weight:600;transition:all .2s}.add-chat-modal .footer-btn.cancel{color:#4b5563;background:#f3f4f6}.add-chat-modal .footer-btn.cancel:hover{background:#e5e7eb}.add-chat-modal .footer-btn.confirm{color:#fff;background:#3b82f6}.add-chat-modal .footer-btn.confirm:hover:not(.disabled){background:#7a9ce9}.add-chat-modal .footer-btn.disabled{opacity:.6;cursor:not-allowed}.display-none{display:none}.modal-content.update-group-modal{background:#fff;border:1px solid #0000000d;border-radius:10px;flex-direction:column;width:450px;max-width:450px;height:auto;min-height:430px;max-height:90vh;padding:0;display:flex;overflow:hidden;box-shadow:0 10px 40px #0000001a}.update-group-modal .modal-header{justify-content:space-between;align-items:center;padding:16px 20px 0;display:flex}.update-group-modal .modal-title{color:#1f2937;text-align:left;margin:0;font-size:18px;font-weight:600}.update-group-modal .close-modal-btn{color:#6b7280;cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:4px;transition:background .2s;display:flex}.update-group-modal .close-modal-btn:hover{color:#111827;background:#f3f4f6}.update-group-modal .modal-body{flex-direction:column;flex:1;gap:8px;padding:20px 20px 0;display:flex;overflow:hidden}.update-group-modal .group-info-section{align-items:center;gap:16px;display:flex}.update-group-modal .group-avatar-upload{cursor:pointer;flex-shrink:0}.update-group-modal .group-avatar-upload input{display:none}.update-group-modal .avatar-placeholder{color:#9ca3af;cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;padding:0;display:flex;position:relative}.update-group-modal .avatar-placeholder img{object-fit:cover;border-radius:50%;width:100%;height:100%}.update-group-modal .group-name-input{border:none;border-bottom:1px solid #e5e7eb;outline:none;flex:1;padding:8px 0;font-size:16px;transition:border-color .2s}.update-group-modal .group-name-input:focus{border-bottom-color:#3b82f6}.update-group-modal .members-section{margin-top:8px}.update-group-modal .section-title{padding-left:0;display:block}.update-group-modal .members-list-container{border-top:none;flex:1;height:240px;margin:0 -20px;padding:0 7px;overflow-y:hidden}.update-group-modal .members-list{margin:0;padding:12px 0}.update-group-modal .member-item{cursor:default;background:0 0;border-radius:10px;align-items:center;gap:12px;padding:10px 12px;transition:background .2s;display:flex}.update-group-modal .member-item:hover{background:#f9fafb}.update-group-modal .member-avatar-wrapper{width:32px;height:32px;position:relative}.update-group-modal .status-dot{width:12px;height:12px;position:absolute;bottom:-1px;right:-1px}.update-group-modal .member-info-wrapper{flex-direction:column;flex:1;gap:2px;display:flex}.update-group-modal .member-name-row{align-items:center;gap:4px;width:fit-content;display:flex}.update-group-modal .member-name{color:#1e293b;font-size:15px;font-weight:500}.update-group-modal .owner-icon{color:#64748b}.update-group-modal .member-role{color:#64748b;font-size:13px}.update-group-modal .remove-member-btn{color:#ef4444;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:4px;font-size:14px;display:flex}.update-group-modal .modal-footer{border-top:1px solid #f3f4f6;justify-content:flex-end;gap:12px;padding:11px 20px;display:flex}.update-group-modal .footer-btn{cursor:pointer;border:none;border-radius:10px;padding:10px 24px;font-size:15px;font-weight:600;transition:all .2s}.update-group-modal .footer-btn.cancel{color:#4b5563;background:#f3f4f6}.update-group-modal .footer-btn.cancel:hover{background:#e5e7eb}.update-group-modal .footer-btn.confirm{color:#fff;background:#3b82f6}.update-group-modal .footer-btn.confirm:hover:not(.disabled){background:#7a9ce9}.update-group-modal .footer-btn.disabled{opacity:.6;cursor:not-allowed}\n .contact-list-header>div{align-items:center;gap:8px;display:flex}.contact-list-toolbar{gap:12px}.toolbar-search{flex:1}.filter-select{position:relative}.avatar-placeholder{color:#fff;background:#3b82f6;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:16px;font-weight:600;display:flex}.online-status.is-online{background:#22c55e}.online-status.is-offline{background:#94a3b8}.contact-action-btn{background:0 0;border:none}\n .chat-avatar-emoji{background-color:#fff;border-radius:100%;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.chat-avatar-img{object-fit:cover;border-radius:100%;width:100%;height:100%}\n", O = (e, t = 0, n = "Hội thoại không tên") => e ? e.name ? e.name : e.type === "group" ? n : e.members?.find((e) => e.id !== t)?.name ?? n : n, k = new Set([
11
11
  "pdf",
12
12
  "doc",
13
13
  "docx",
@@ -417,7 +417,7 @@ var D = "\n #chat-internal-root{z-index:99999;pointer-events:none;font-family
417
417
  return this.chatSDK ? this.chatSDK.getAuth() : null;
418
418
  }
419
419
  clearAuth() {
420
- if (this.chatSDK) return this.chatSDK.clearAuth();
420
+ this.chatSDK &&= (this.chatSDK.clearAuth(), null);
421
421
  }
422
422
  async setReceiver(e) {
423
423
  return this.chatSDK ? this.chatSDK.setReceiver(e) : {
@@ -913,12 +913,12 @@ var Ue = x([ze], (e) => {
913
913
  ]), c(() => {
914
914
  (async () => {
915
915
  let { code: a, name: o, avatar: s, email: c, phone: l } = t || {};
916
- if (!(!a || !o || s && !de(s) || !c || !n || i.current)) try {
916
+ if (!(!a || !o || !s || !c || !n || i.current)) try {
917
917
  i.current = !0, await G.init(e, n);
918
918
  let t = await G.setAuth({
919
919
  code: a,
920
920
  name: o,
921
- avatar: s,
921
+ avatar: de(s) ? s : void 0,
922
922
  email: c,
923
923
  phone: l
924
924
  });
@@ -1885,7 +1885,7 @@ var Ct = Q("AddMember", /* @__PURE__ */ E(w, { children: [
1885
1885
  viewBox: "0 0 24 24",
1886
1886
  strokeColorDefault: "currentColor",
1887
1887
  strokeWidthDefault: 2
1888
- }), zt = Q("DeleteMessage", /* @__PURE__ */ E(w, { children: [
1888
+ }), zt = Q("DeleteIcon", /* @__PURE__ */ E(w, { children: [
1889
1889
  /* @__PURE__ */ T("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" }),
1890
1890
  /* @__PURE__ */ T("path", { d: "M3 6h18" }),
1891
1891
  /* @__PURE__ */ T("path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
@@ -2184,11 +2184,12 @@ var Ct = Q("AddMember", /* @__PURE__ */ E(w, { children: [
2184
2184
  }
2185
2185
  x(!1);
2186
2186
  } catch (e) {
2187
- console.error("Lỗi khi tạo cuộc trò chuyện:", e), alert("Không thể tạo cuộc trò chuyện. Vui lòng thử lại sau.");
2187
+ console.error("Lỗi khi tạo cuộc trò chuyện:", e), F("Không thể tạo cuộc trò chuyện. Vui lòng thử lại sau.", "error");
2188
2188
  }
2189
2189
  }, [
2190
2190
  K,
2191
2191
  je,
2192
+ F,
2192
2193
  J
2193
2194
  ]);
2194
2195
  return /* @__PURE__ */ E("div", {
@@ -2635,26 +2636,13 @@ var Ct = Q("AddMember", /* @__PURE__ */ E(w, { children: [
2635
2636
  }, Gt = i(({ chat: e, currentUserId: t }) => {
2636
2637
  let n = d(() => e ? e.avatar ? e.avatar : e.type === "group" ? "👥" : e.members?.find((e) => e.id !== t)?.avatar ?? "👤" : "👤", [e, t]);
2637
2638
  return n === "👥" || n === "👤" ? /* @__PURE__ */ T("div", {
2638
- style: {
2639
- display: "flex",
2640
- alignItems: "center",
2641
- justifyContent: "center",
2642
- width: "100%",
2643
- height: "100%",
2644
- backgroundColor: "white",
2645
- borderRadius: "100%"
2646
- },
2639
+ className: "chat-avatar-emoji",
2647
2640
  children: n
2648
2641
  }) : /* @__PURE__ */ T("img", {
2649
2642
  src: n,
2650
2643
  alt: e?.name ?? "Avatar",
2651
2644
  loading: "lazy",
2652
- style: {
2653
- width: "100%",
2654
- height: "100%",
2655
- objectFit: "cover",
2656
- borderRadius: "100%"
2657
- }
2645
+ className: "chat-avatar-img"
2658
2646
  });
2659
2647
  }), Kt = () => {
2660
2648
  let { toasts: e, removeToast: t } = Qe(), { theme: n } = _((e) => e.setting);
@@ -2664,51 +2652,24 @@ var Ct = Q("AddMember", /* @__PURE__ */ E(w, { children: [
2664
2652
  className: `toast-item ${e.type}`,
2665
2653
  children: [
2666
2654
  /* @__PURE__ */ T("div", {
2667
- style: { flex: 1 },
2655
+ className: "toast-message",
2668
2656
  children: e.message
2669
2657
  }),
2670
2658
  e.isConfirm && /* @__PURE__ */ E("div", {
2671
- style: {
2672
- display: "flex",
2673
- gap: "8px",
2674
- marginTop: "10px"
2675
- },
2659
+ className: "toast-actions",
2676
2660
  children: [/* @__PURE__ */ T("button", {
2661
+ className: "toast-btn cancel",
2677
2662
  onClick: () => e.onCancel?.(),
2678
- style: {
2679
- padding: "4px 10px",
2680
- borderRadius: "4px",
2681
- border: "1px solid rgba(255,255,255,0.3)",
2682
- background: "rgba(255,255,255,0.1)",
2683
- color: "inherit",
2684
- cursor: "pointer",
2685
- fontSize: "12px"
2686
- },
2687
2663
  children: "Hủy"
2688
2664
  }), /* @__PURE__ */ T("button", {
2665
+ className: "toast-btn confirm",
2689
2666
  onClick: () => e.onConfirm?.(),
2690
- style: {
2691
- padding: "4px 10px",
2692
- borderRadius: "4px",
2693
- border: "none",
2694
- background: e.type === "warning" ? "#ff9800" : "#2196f3",
2695
- color: "white",
2696
- cursor: "pointer",
2697
- fontSize: "12px",
2698
- fontWeight: "bold"
2699
- },
2700
2667
  children: "Xác nhận"
2701
2668
  })]
2702
2669
  }),
2703
2670
  !e.isConfirm && /* @__PURE__ */ T("button", {
2671
+ className: "toast-close-btn",
2704
2672
  onClick: () => t(e.id),
2705
- style: {
2706
- background: "none",
2707
- border: "none",
2708
- cursor: "pointer",
2709
- opacity: .5,
2710
- padding: "0 0 0 8px"
2711
- },
2712
2673
  children: "✕"
2713
2674
  })
2714
2675
  ]
@@ -3302,40 +3263,41 @@ var Ct = Q("AddMember", /* @__PURE__ */ E(w, { children: [
3302
3263
  })
3303
3264
  }) : null;
3304
3265
  }, an = ({ onClose: e }) => {
3305
- let { t } = Z(), n = g(), { members: r, chats: i } = _((e) => e.chat), [o, s] = p([]), [c, l] = p(""), [u, d] = p(""), [m, h] = p(""), [v, y] = p(""), b = f(null), x = (e) => {
3306
- s((t) => t.includes(e) ? t.filter((t) => t !== e) : [...t, e]);
3307
- }, S = (e) => {
3266
+ let { t } = Z(), n = g(), { showToast: r } = Qe(), { members: i, chats: o } = _((e) => e.chat), [s, c] = p([]), [l, u] = p(""), [d, m] = p(""), [h, v] = p(""), [y, b] = p(""), x = f(null), S = (e) => {
3267
+ c((t) => t.includes(e) ? t.filter((t) => t !== e) : [...t, e]);
3268
+ }, C = (e) => {
3308
3269
  let t = e.target.files?.[0];
3309
3270
  if (t) {
3310
- h(t);
3271
+ v(t);
3311
3272
  let e = new FileReader();
3312
3273
  e.onload = (e) => {
3313
- y(e.target?.result);
3274
+ b(e.target?.result);
3314
3275
  }, e.readAsDataURL(t);
3315
3276
  }
3316
- }, C = () => {
3317
- b.current?.click();
3318
- }, w = a(async () => {
3319
- if (!(o.length < 2)) try {
3320
- if (!c.trim()) return;
3321
- let t = o.map((e) => Number(e)), r = typeof m == "string" ? m.trim() || void 0 : m || void 0, a = (await G.addGroup(t, c, r)).data;
3322
- a && n(V(i.find((e) => e.id === a.id) || a)), e();
3277
+ }, w = () => {
3278
+ x.current?.click();
3279
+ }, D = a(async () => {
3280
+ if (!(s.length < 2)) try {
3281
+ if (!l.trim()) return;
3282
+ let t = s.map((e) => Number(e)), r = typeof h == "string" ? h.trim() || void 0 : h || void 0, i = (await G.addGroup(t, l, r)).data;
3283
+ i && n(V(o.find((e) => e.id === i.id) || i)), e();
3323
3284
  } catch (e) {
3324
- console.error("Lỗi khi tạo cuộc trò chuyện:", e), alert("Không thể tạo cuộc trò chuyện. Vui lòng thử lại sau.");
3285
+ console.error("Lỗi khi tạo cuộc trò chuyện:", e), r("Không thể tạo cuộc trò chuyện. Vui lòng thử lại sau.", "error");
3325
3286
  }
3326
3287
  }, [
3288
+ s,
3289
+ l,
3290
+ h,
3327
3291
  o,
3328
- c,
3329
- m,
3330
- i,
3331
3292
  e,
3332
- n
3293
+ n,
3294
+ r
3333
3295
  ]);
3334
3296
  return /* @__PURE__ */ T("div", {
3335
3297
  className: "modal-overlay",
3336
3298
  onClick: e,
3337
3299
  children: /* @__PURE__ */ E("div", {
3338
- className: `modal-content add-chat-modal ${o.length > 0 ? "has-tags" : ""}`,
3300
+ className: `modal-content add-chat-modal ${s.length > 0 ? "has-tags" : ""}`,
3339
3301
  onClick: (e) => e.stopPropagation(),
3340
3302
  children: [
3341
3303
  /* @__PURE__ */ E("div", {
@@ -3357,17 +3319,17 @@ var Ct = Q("AddMember", /* @__PURE__ */ E(w, { children: [
3357
3319
  children: [/* @__PURE__ */ E("div", {
3358
3320
  className: "group-avatar-upload",
3359
3321
  children: [/* @__PURE__ */ T("input", {
3360
- ref: b,
3322
+ ref: x,
3361
3323
  type: "file",
3362
3324
  accept: "image/*",
3363
- onChange: S,
3325
+ onChange: C,
3364
3326
  className: "display-none"
3365
3327
  }), /* @__PURE__ */ T("button", {
3366
3328
  type: "button",
3367
3329
  className: "avatar-placeholder",
3368
- onClick: C,
3369
- children: v ? /* @__PURE__ */ T("img", {
3370
- src: v,
3330
+ onClick: w,
3331
+ children: y ? /* @__PURE__ */ T("img", {
3332
+ src: y,
3371
3333
  alt: "Group avatar",
3372
3334
  className: "preview-avatar"
3373
3335
  }) : /* @__PURE__ */ T(Ut, {})
@@ -3376,26 +3338,26 @@ var Ct = Q("AddMember", /* @__PURE__ */ E(w, { children: [
3376
3338
  type: "text",
3377
3339
  className: "group-name-input",
3378
3340
  placeholder: t("addChat.groupNamePlaceholder"),
3379
- value: c,
3380
- onChange: (e) => l(e.target.value)
3341
+ value: l,
3342
+ onChange: (e) => u(e.target.value)
3381
3343
  })]
3382
3344
  }),
3383
3345
  /* @__PURE__ */ T("div", {
3384
3346
  className: "search-section",
3385
3347
  children: /* @__PURE__ */ T(cn, {
3386
- value: u,
3387
- onChange: d,
3348
+ value: d,
3349
+ onChange: m,
3388
3350
  placeholder: t("addChat.memberSearchPlaceholder")
3389
3351
  })
3390
3352
  }),
3391
- o.length > 0 && /* @__PURE__ */ T("div", {
3353
+ s.length > 0 && /* @__PURE__ */ T("div", {
3392
3354
  className: "selected-members-tags",
3393
- children: o.map((e) => /* @__PURE__ */ E("div", {
3355
+ children: s.map((e) => /* @__PURE__ */ E("div", {
3394
3356
  className: "member-tag",
3395
- children: [/* @__PURE__ */ T("span", { children: r.find((t) => String(t.id) === e)?.name ?? e }), /* @__PURE__ */ T("button", {
3357
+ children: [/* @__PURE__ */ T("span", { children: i.find((t) => String(t.id) === e)?.name ?? e }), /* @__PURE__ */ T("button", {
3396
3358
  className: "remove-tag-btn",
3397
3359
  onClick: (t) => {
3398
- t.stopPropagation(), x(e);
3360
+ t.stopPropagation(), S(e);
3399
3361
  },
3400
3362
  children: /* @__PURE__ */ T($, { size: 14 })
3401
3363
  })]
@@ -3405,15 +3367,15 @@ var Ct = Q("AddMember", /* @__PURE__ */ E(w, { children: [
3405
3367
  className: "members-list-container",
3406
3368
  children: /* @__PURE__ */ T("div", {
3407
3369
  className: "members-list",
3408
- children: r.filter((e) => e.name.toLowerCase().includes(u.toLowerCase())).map((e) => /* @__PURE__ */ E("div", {
3409
- className: `member-item ${o.includes(String(e.id)) ? "selected" : ""}`,
3410
- onClick: () => x(String(e.id)),
3370
+ children: i.filter((e) => e.name.toLowerCase().includes(d.toLowerCase())).map((e) => /* @__PURE__ */ E("div", {
3371
+ className: `member-item ${s.includes(String(e.id)) ? "selected" : ""}`,
3372
+ onClick: () => S(String(e.id)),
3411
3373
  children: [
3412
3374
  /* @__PURE__ */ T("div", {
3413
3375
  className: "member-checkbox",
3414
3376
  children: /* @__PURE__ */ T("div", {
3415
- className: `checkbox-custom ${o.includes(String(e.id)) ? "checked" : ""}`,
3416
- children: o.includes(String(e.id)) && /* @__PURE__ */ T("svg", {
3377
+ className: `checkbox-custom ${s.includes(String(e.id)) ? "checked" : ""}`,
3378
+ children: s.includes(String(e.id)) && /* @__PURE__ */ T("svg", {
3417
3379
  width: "12",
3418
3380
  height: "12",
3419
3381
  viewBox: "0 0 24 24",
@@ -3462,9 +3424,9 @@ var Ct = Q("AddMember", /* @__PURE__ */ E(w, { children: [
3462
3424
  onClick: e,
3463
3425
  children: "Hủy"
3464
3426
  }), /* @__PURE__ */ T("button", {
3465
- className: `footer-btn confirm ${o.length === 0 || o.length < 2 || !c.trim() ? "disabled" : ""}`,
3466
- onClick: () => void w(),
3467
- disabled: o.length === 0,
3427
+ className: `footer-btn confirm ${s.length === 0 || s.length < 2 || !l.trim() ? "disabled" : ""}`,
3428
+ onClick: () => void D(),
3429
+ disabled: s.length === 0,
3468
3430
  children: t("addChat.selectMembers")
3469
3431
  })]
3470
3432
  })
@@ -3566,26 +3528,23 @@ var Ct = Q("AddMember", /* @__PURE__ */ E(w, { children: [
3566
3528
  ]
3567
3529
  })
3568
3530
  }) : null, sn = ({ chats: e, onSelectChat: t }) => {
3569
- let { currentUser: n, members: r, currentChat: i } = _((e) => e.chat), [a, o] = p(null), [s, l] = p(null), { t: u } = Z(), { hasGroupChat: d } = _(Ue), f = e.filter((e) => !(e.type === "group" && !d)), m = f.filter((e) => e.is_pined), h = f.filter((e) => !e.is_pined), g = (e) => e ? new Date(e).toLocaleTimeString([], {
3531
+ let { currentUser: n, members: r, currentChat: i } = _((e) => e.chat), [a, o] = p(null), { t: s } = Z(), { hasGroupChat: c } = _(Ue), l = e.filter((e) => !(e.type === "group" && !c)), u = l.filter((e) => e.is_pined), d = l.filter((e) => !e.is_pined), f = (e) => e ? new Date(e).toLocaleTimeString([], {
3570
3532
  hour: "2-digit",
3571
3533
  minute: "2-digit"
3572
3534
  }) : "";
3573
- return c(() => {
3574
- let e = () => o(null);
3575
- return document.addEventListener("click", e), () => document.removeEventListener("click", e);
3576
- }, []), /* @__PURE__ */ E("div", {
3535
+ return /* @__PURE__ */ E("div", {
3577
3536
  className: "chat-list",
3578
3537
  children: [
3579
- m.length > 0 && null,
3538
+ u.length > 0 && null,
3580
3539
  /* @__PURE__ */ E("div", {
3581
3540
  className: "chat-list-section",
3582
3541
  children: [/* @__PURE__ */ T("div", {
3583
3542
  className: "section-header",
3584
3543
  children: /* @__PURE__ */ T("span", { children: "Tất cả tin nhắn" })
3585
- }), h.length > 0 ? h.map((e) => {
3586
- let o = e.message?.member.id === n?.id, s = n?.id && e.new?.[n.id] ? e.new[n.id] : 0, c = e.type === "single" ? e.members?.find((e) => e.id !== n?.id) : null, d = !!c && r.some((e) => e.id === c.id && (e.socket_ids?.length ?? 0) > 0);
3544
+ }), d.length > 0 ? d.map((e) => {
3545
+ let a = e.message?.member.id === n?.id, c = n?.id && e.new?.[n.id] ? e.new[n.id] : 0, l = e.type === "single" ? e.members?.find((e) => e.id !== n?.id) : null, u = !!l && r.some((e) => e.id === l.id && (e.socket_ids?.length ?? 0) > 0);
3587
3546
  return /* @__PURE__ */ E("div", {
3588
- className: `chat-item ${i?.id === e.id ? "active" : ""} ${a === e.id ? "has-open-dropdown" : ""}`,
3547
+ className: `chat-item ${i?.id === e.id ? "active" : ""} `,
3589
3548
  onClick: () => t(e),
3590
3549
  children: [/* @__PURE__ */ E("div", {
3591
3550
  className: "chat-item-avatar",
@@ -3595,15 +3554,15 @@ var Ct = Q("AddMember", /* @__PURE__ */ E(w, { children: [
3595
3554
  cursor: e.type === "single" ? "pointer" : "default"
3596
3555
  },
3597
3556
  onClick: (t) => {
3598
- t.stopPropagation(), e.type === "single" && c && l({
3599
- user: c,
3600
- isOnline: d
3557
+ t.stopPropagation(), e.type === "single" && l && o({
3558
+ user: l,
3559
+ isOnline: u
3601
3560
  });
3602
3561
  },
3603
3562
  children: [/* @__PURE__ */ T(Gt, {
3604
3563
  chat: e,
3605
3564
  currentUserId: n?.id
3606
- }), e.type === "single" && d && /* @__PURE__ */ T(it, {
3565
+ }), e.type === "single" && u && /* @__PURE__ */ T(it, {
3607
3566
  size: 12,
3608
3567
  className: "online-indicator"
3609
3568
  })]
@@ -3619,7 +3578,7 @@ var Ct = Q("AddMember", /* @__PURE__ */ E(w, { children: [
3619
3578
  })
3620
3579
  }), /* @__PURE__ */ T("span", {
3621
3580
  className: "chat-item-time",
3622
- children: g(e.message?.created_at ?? e.updated_at)
3581
+ children: f(e.message?.created_at ?? e.updated_at)
3623
3582
  })]
3624
3583
  }), /* @__PURE__ */ E("div", {
3625
3584
  className: "info-bottom-row",
@@ -3627,34 +3586,34 @@ var Ct = Q("AddMember", /* @__PURE__ */ E(w, { children: [
3627
3586
  className: "chat-item-last",
3628
3587
  children: /* @__PURE__ */ E("span", {
3629
3588
  className: "last-message-text",
3630
- children: [o && `${u("chatList.yourMessage")}`, e.message?.content ?? (e.message?.files?.length ? u("chatMessage.states.attachment") : "")]
3589
+ children: [a && `${s("chatList.yourMessage")}`, e.message?.content ?? (e.message?.files?.length ? s("chatMessage.states.attachment") : "")]
3631
3590
  })
3632
3591
  }), /* @__PURE__ */ E("div", {
3633
3592
  className: "info-bottom-right",
3634
3593
  children: [e.is_muted && /* @__PURE__ */ T(ut, {
3635
3594
  size: 14,
3636
3595
  className: "mute-icon-list"
3637
- }), s > 0 && /* @__PURE__ */ T("div", {
3596
+ }), c > 0 && /* @__PURE__ */ T("div", {
3638
3597
  className: "unread-badge-circle",
3639
- children: s > 99 ? "99+" : s
3598
+ children: c > 99 ? "99+" : c
3640
3599
  })]
3641
3600
  })]
3642
3601
  })]
3643
3602
  })]
3644
3603
  }, e.id);
3645
- }) : m.length === 0 ? /* @__PURE__ */ T("div", {
3604
+ }) : u.length === 0 ? /* @__PURE__ */ T("div", {
3646
3605
  className: "empty-chat-list",
3647
3606
  children: "Không có tin nhắn nào"
3648
3607
  }) : null]
3649
3608
  }),
3650
- s && /* @__PURE__ */ T(on, {
3651
- user: s.user,
3652
- isOnline: s.isOnline,
3653
- onClose: () => l(null),
3609
+ a && /* @__PURE__ */ T(on, {
3610
+ user: a.user,
3611
+ isOnline: a.isOnline,
3612
+ onClose: () => o(null),
3654
3613
  onMessage: () => {
3655
- if (!s) return;
3656
- let n = e.find((e) => e.type === "single" && e.members?.some((e) => e.id === s.user.id));
3657
- n && t(n), l(null);
3614
+ if (!a) return;
3615
+ let n = e.find((e) => e.type === "single" && e.members?.some((e) => e.id === a.user.id));
3616
+ n && t(n), o(null);
3658
3617
  }
3659
3618
  })
3660
3619
  ]
@@ -3733,7 +3692,7 @@ var Ct = Q("AddMember", /* @__PURE__ */ E(w, { children: [
3733
3692
  })]
3734
3693
  });
3735
3694
  }, un = ({ onClose: e, onAddMember: t, onUpdateGroup: n, onRemoveMember: r }) => {
3736
- let i = g(), { currentChatMembers: a, currentChat: o, currentUser: s } = _((e) => e.chat), [l, u] = p("info"), [d, f] = p(null), [m, h] = p(!1), [v, y] = p(null), [b, x] = p({
3695
+ let i = g(), { showToast: a, confirm: o } = Qe(), { currentChatMembers: s, currentChat: l, currentUser: u } = _((e) => e.chat), { allowDeleteChat: d } = _(Ue), [f, m] = p("info"), [h, v] = p(null), [y, b] = p(!1), [x, S] = p(null), [C, D] = p({
3737
3696
  canChangeInfo: !0,
3738
3697
  canPinMessage: !0,
3739
3698
  canCreateNote: !0,
@@ -3742,33 +3701,33 @@ var Ct = Q("AddMember", /* @__PURE__ */ E(w, { children: [
3742
3701
  approveNewMembers: !1,
3743
3702
  markAdminMessages: !0,
3744
3703
  allowNewMembersReadRecent: !0
3745
- }), S = (e) => {
3746
- x((t) => ({
3704
+ }), k = (e) => {
3705
+ D((t) => ({
3747
3706
  ...t,
3748
3707
  [e]: !t[e]
3749
3708
  }));
3750
3709
  };
3751
3710
  c(() => {
3752
3711
  let e = () => {
3753
- f(null);
3712
+ v(null);
3754
3713
  };
3755
- return d !== null && window.addEventListener("click", e), () => {
3714
+ return h !== null && window.addEventListener("click", e), () => {
3756
3715
  window.removeEventListener("click", e);
3757
3716
  };
3758
- }, [d]);
3759
- let C = a.length ?? 0, D = O(o, s?.id, ""), k = a ?? [], A = async () => {
3760
- if (!v) return;
3761
- let e = o;
3717
+ }, [h]);
3718
+ let A = s.length ?? 0, j = O(l, u?.id, ""), M = s ?? [], ee = async () => {
3719
+ if (!x) return;
3720
+ let e = l;
3762
3721
  if (e) i(V(e));
3763
3722
  else try {
3764
- let e = await G.addChat(v.user.id);
3723
+ let e = await G.addChat(x.user.id);
3765
3724
  e?.data && (i(we(e.data)), i(V(e.data)));
3766
3725
  } catch (e) {
3767
3726
  console.error("Lỗi khi tạo phòng chat mới:", e);
3768
3727
  }
3769
- y(null);
3728
+ S(null);
3770
3729
  };
3771
- return l === "group_management" ? /* @__PURE__ */ E("div", {
3730
+ return f === "group_management" ? /* @__PURE__ */ E("div", {
3772
3731
  className: "side-bar-info-chat group-management-view",
3773
3732
  children: [/* @__PURE__ */ E("div", {
3774
3733
  className: "info-header",
@@ -3776,7 +3735,7 @@ var Ct = Q("AddMember", /* @__PURE__ */ E(w, { children: [
3776
3735
  className: "header-left",
3777
3736
  children: [/* @__PURE__ */ T("button", {
3778
3737
  className: "back-info-btn",
3779
- onClick: () => u("info"),
3738
+ onClick: () => m("info"),
3780
3739
  children: /* @__PURE__ */ T(lt, {})
3781
3740
  }), /* @__PURE__ */ T("h3", {
3782
3741
  className: "header-title",
@@ -3800,46 +3759,46 @@ var Ct = Q("AddMember", /* @__PURE__ */ E(w, { children: [
3800
3759
  children: [
3801
3760
  /* @__PURE__ */ E("div", {
3802
3761
  className: "setting-item",
3803
- onClick: () => S("canChangeInfo"),
3762
+ onClick: () => k("canChangeInfo"),
3804
3763
  children: [/* @__PURE__ */ T("span", { children: "Thay đổi tên & ảnh đại diện của nhóm" }), /* @__PURE__ */ T("input", {
3805
3764
  type: "checkbox",
3806
- checked: b.canChangeInfo,
3765
+ checked: C.canChangeInfo,
3807
3766
  readOnly: !0
3808
3767
  })]
3809
3768
  }),
3810
3769
  /* @__PURE__ */ E("div", {
3811
3770
  className: "setting-item",
3812
- onClick: () => S("canPinMessage"),
3771
+ onClick: () => k("canPinMessage"),
3813
3772
  children: [/* @__PURE__ */ T("span", { children: "Ghim tin nhắn, ghi chú, bình chọn lên đầu hội thoại" }), /* @__PURE__ */ T("input", {
3814
3773
  type: "checkbox",
3815
- checked: b.canPinMessage,
3774
+ checked: C.canPinMessage,
3816
3775
  readOnly: !0
3817
3776
  })]
3818
3777
  }),
3819
3778
  /* @__PURE__ */ E("div", {
3820
3779
  className: "setting-item",
3821
- onClick: () => S("canCreateNote"),
3780
+ onClick: () => k("canCreateNote"),
3822
3781
  children: [/* @__PURE__ */ T("span", { children: "Tạo mới ghi chú, nhắc hẹn" }), /* @__PURE__ */ T("input", {
3823
3782
  type: "checkbox",
3824
- checked: b.canCreateNote,
3783
+ checked: C.canCreateNote,
3825
3784
  readOnly: !0
3826
3785
  })]
3827
3786
  }),
3828
3787
  /* @__PURE__ */ E("div", {
3829
3788
  className: "setting-item",
3830
- onClick: () => S("canCreatePoll"),
3789
+ onClick: () => k("canCreatePoll"),
3831
3790
  children: [/* @__PURE__ */ T("span", { children: "Tạo mới bình chọn" }), /* @__PURE__ */ T("input", {
3832
3791
  type: "checkbox",
3833
- checked: b.canCreatePoll,
3792
+ checked: C.canCreatePoll,
3834
3793
  readOnly: !0
3835
3794
  })]
3836
3795
  }),
3837
3796
  /* @__PURE__ */ E("div", {
3838
3797
  className: "setting-item",
3839
- onClick: () => S("canSendMessage"),
3798
+ onClick: () => k("canSendMessage"),
3840
3799
  children: [/* @__PURE__ */ T("span", { children: "Gửi tin nhắn" }), /* @__PURE__ */ T("input", {
3841
3800
  type: "checkbox",
3842
- checked: b.canSendMessage,
3801
+ checked: C.canSendMessage,
3843
3802
  readOnly: !0
3844
3803
  })]
3845
3804
  })
@@ -3860,8 +3819,8 @@ var Ct = Q("AddMember", /* @__PURE__ */ E(w, { children: [
3860
3819
  className: "switch",
3861
3820
  children: [/* @__PURE__ */ T("input", {
3862
3821
  type: "checkbox",
3863
- checked: b.approveNewMembers,
3864
- onChange: () => S("approveNewMembers")
3822
+ checked: C.approveNewMembers,
3823
+ onChange: () => k("approveNewMembers")
3865
3824
  }), /* @__PURE__ */ T("span", { className: "slider round" })]
3866
3825
  })]
3867
3826
  }),
@@ -3874,8 +3833,8 @@ var Ct = Q("AddMember", /* @__PURE__ */ E(w, { children: [
3874
3833
  className: "switch",
3875
3834
  children: [/* @__PURE__ */ T("input", {
3876
3835
  type: "checkbox",
3877
- checked: b.markAdminMessages,
3878
- onChange: () => S("markAdminMessages")
3836
+ checked: C.markAdminMessages,
3837
+ onChange: () => k("markAdminMessages")
3879
3838
  }), /* @__PURE__ */ T("span", { className: "slider round" })]
3880
3839
  })]
3881
3840
  }),
@@ -3888,8 +3847,8 @@ var Ct = Q("AddMember", /* @__PURE__ */ E(w, { children: [
3888
3847
  className: "switch",
3889
3848
  children: [/* @__PURE__ */ T("input", {
3890
3849
  type: "checkbox",
3891
- checked: b.allowNewMembersReadRecent,
3892
- onChange: () => S("allowNewMembersReadRecent")
3850
+ checked: C.allowNewMembersReadRecent,
3851
+ onChange: () => k("allowNewMembersReadRecent")
3893
3852
  }), /* @__PURE__ */ T("span", { className: "slider round" })]
3894
3853
  })]
3895
3854
  })
@@ -3928,7 +3887,7 @@ var Ct = Q("AddMember", /* @__PURE__ */ E(w, { children: [
3928
3887
  children: /* @__PURE__ */ T($, {})
3929
3888
  })
3930
3889
  }),
3931
- o && /* @__PURE__ */ E("div", {
3890
+ l && /* @__PURE__ */ E("div", {
3932
3891
  className: "info-content-scroll",
3933
3892
  children: [
3934
3893
  /* @__PURE__ */ E("div", {
@@ -3936,28 +3895,28 @@ var Ct = Q("AddMember", /* @__PURE__ */ E(w, { children: [
3936
3895
  children: [/* @__PURE__ */ T("div", {
3937
3896
  className: "info-avatar-large",
3938
3897
  children: /* @__PURE__ */ T(Gt, {
3939
- chat: o,
3940
- currentUserId: s?.id
3898
+ chat: l,
3899
+ currentUserId: u?.id
3941
3900
  })
3942
3901
  }), /* @__PURE__ */ E("div", {
3943
3902
  className: "info-main-details",
3944
3903
  children: [/* @__PURE__ */ E("h3", {
3945
3904
  className: "info-chat-name",
3946
- children: [D, /* @__PURE__ */ T("span", {
3905
+ children: [j, /* @__PURE__ */ T("span", {
3947
3906
  className: "info-status-icons",
3948
- children: o.type === "group" && /* @__PURE__ */ T(St, { onClick: (e) => {
3949
- e.stopPropagation(), n && n(o);
3907
+ children: l.type === "group" && /* @__PURE__ */ T(St, { onClick: (e) => {
3908
+ e.stopPropagation(), n && n(l);
3950
3909
  } })
3951
3910
  })]
3952
3911
  }), /* @__PURE__ */ T("p", {
3953
3912
  className: "info-member-count",
3954
- children: o.type === "group" ? `Thành viên (${C})` : a.find((e) => e.id !== s?.id)?.socket_ids?.length ? "Đang hoạt động" : "Không hoạt động"
3913
+ children: l.type === "group" ? `Thành viên (${A})` : s.find((e) => e.id !== u?.id)?.socket_ids?.length ? "Đang hoạt động" : "Không hoạt động"
3955
3914
  })]
3956
3915
  })]
3957
3916
  }),
3958
3917
  /* @__PURE__ */ T("div", {
3959
3918
  className: "info-quick-actions",
3960
- children: o.type === "group" ? /* @__PURE__ */ T("div", {
3919
+ children: l.type === "group" ? /* @__PURE__ */ T("div", {
3961
3920
  className: "action-item",
3962
3921
  onClick: t,
3963
3922
  children: /* @__PURE__ */ E("div", {
@@ -3993,14 +3952,14 @@ var Ct = Q("AddMember", /* @__PURE__ */ E(w, { children: [
3993
3952
  })
3994
3953
  }) : /* @__PURE__ */ T(w, {})
3995
3954
  }),
3996
- o.type === "group" && null,
3997
- o.type === "group" && /* @__PURE__ */ E("div", {
3955
+ l.type === "group" && null,
3956
+ l.type === "group" && /* @__PURE__ */ E("div", {
3998
3957
  className: "info-members-section",
3999
3958
  children: [/* @__PURE__ */ E("div", {
4000
3959
  className: "section-title-row",
4001
3960
  children: [/* @__PURE__ */ E("span", { children: [
4002
3961
  "Thành viên (",
4003
- C,
3962
+ A,
4004
3963
  ")"
4005
3964
  ] }), /* @__PURE__ */ E("div", {
4006
3965
  className: "title-actions",
@@ -4008,28 +3967,28 @@ var Ct = Q("AddMember", /* @__PURE__ */ E(w, { children: [
4008
3967
  size: 16,
4009
3968
  onClick: t
4010
3969
  }), /* @__PURE__ */ T(wt, {
4011
- className: `arrow-icon ${m ? "collapsed" : ""}`,
4012
- onClick: () => h(!m)
3970
+ className: `arrow-icon ${y ? "collapsed" : ""}`,
3971
+ onClick: () => b(!y)
4013
3972
  })]
4014
3973
  })]
4015
- }), m ? /* @__PURE__ */ E("div", {
3974
+ }), y ? /* @__PURE__ */ E("div", {
4016
3975
  className: "members-facepile",
4017
- children: [k.slice(0, 8).map((e) => /* @__PURE__ */ E("div", {
3976
+ children: [M.slice(0, 8).map((e) => /* @__PURE__ */ E("div", {
4018
3977
  className: "facepile-item",
4019
- children: [/* @__PURE__ */ T(qt, { member: e }), (e.id === s?.id || (e.socket_ids?.length ?? 0) > 0) && /* @__PURE__ */ T("div", { className: "online-status" })]
4020
- }, e.id)), k.length > 8 && /* @__PURE__ */ E("div", {
3978
+ children: [/* @__PURE__ */ T(qt, { member: e }), (e.id === u?.id || (e.socket_ids?.length ?? 0) > 0) && /* @__PURE__ */ T("div", { className: "online-status" })]
3979
+ }, e.id)), M.length > 8 && /* @__PURE__ */ E("div", {
4021
3980
  className: "facepile-more",
4022
- children: ["+", k.length - 8]
3981
+ children: ["+", M.length - 8]
4023
3982
  })]
4024
3983
  }) : /* @__PURE__ */ T("div", {
4025
3984
  className: "members-compact-list",
4026
- children: k.map((e) => {
4027
- let t = o.owner_id === e.id, n = e.id === s?.id || e.socket_ids && e.socket_ids.length > 0;
3985
+ children: M.map((e) => {
3986
+ let t = l.owner_id === e.id, n = e.id === u?.id || e.socket_ids && e.socket_ids.length > 0;
4028
3987
  return /* @__PURE__ */ E("div", {
4029
3988
  className: "member-compact-item",
4030
3989
  children: [/* @__PURE__ */ E("div", {
4031
3990
  className: "member-item-left clickable",
4032
- onClick: () => y({
3991
+ onClick: () => S({
4033
3992
  user: e,
4034
3993
  isOnline: n ?? !1
4035
3994
  }),
@@ -4042,7 +4001,7 @@ var Ct = Q("AddMember", /* @__PURE__ */ E(w, { children: [
4042
4001
  className: "member-name-row",
4043
4002
  children: [/* @__PURE__ */ T("span", {
4044
4003
  className: "member-name",
4045
- children: e.id === s?.id ? "Bạn" : e.name
4004
+ children: e.id === u?.id ? "Bạn" : e.name
4046
4005
  }), t && /* @__PURE__ */ T(at, {})]
4047
4006
  }), /* @__PURE__ */ T("span", {
4048
4007
  className: "member-role",
@@ -4056,15 +4015,15 @@ var Ct = Q("AddMember", /* @__PURE__ */ E(w, { children: [
4056
4015
  children: [/* @__PURE__ */ T("button", {
4057
4016
  className: "member-options-btn",
4058
4017
  onClick: (t) => {
4059
- t.stopPropagation(), f(d === e.id ? null : e.id);
4018
+ t.stopPropagation(), v(h === e.id ? null : e.id);
4060
4019
  },
4061
4020
  children: /* @__PURE__ */ T(Tt, {})
4062
- }), d === e.id && /* @__PURE__ */ T("div", {
4021
+ }), h === e.id && /* @__PURE__ */ T("div", {
4063
4022
  className: "member-dropdown-menu",
4064
4023
  children: !t && /* @__PURE__ */ E("button", {
4065
4024
  className: "dropdown-item delete",
4066
4025
  onClick: (t) => {
4067
- t.stopPropagation(), r && r(o.id, e.id), f(null);
4026
+ t.stopPropagation(), r && r(l.id, e.id), v(null);
4068
4027
  },
4069
4028
  children: [/* @__PURE__ */ T(bt, { size: 16 }), /* @__PURE__ */ T("span", { children: "Xoá khỏi nhóm" })]
4070
4029
  })
@@ -4074,14 +4033,19 @@ var Ct = Q("AddMember", /* @__PURE__ */ E(w, { children: [
4074
4033
  }, e.id);
4075
4034
  })
4076
4035
  })]
4036
+ }),
4037
+ d && /* @__PURE__ */ E("button", {
4038
+ className: "info-panel-clear-history",
4039
+ onClick: void 0,
4040
+ children: [/* @__PURE__ */ T(zt, { size: 16 }), /* @__PURE__ */ T("span", { children: "Xoá lịch sử trò chuyện" })]
4077
4041
  })
4078
4042
  ]
4079
4043
  }),
4080
- v && /* @__PURE__ */ T(on, {
4081
- user: v.user,
4082
- isOnline: v.isOnline,
4083
- onClose: () => y(null),
4084
- onMessage: () => void A()
4044
+ x && /* @__PURE__ */ T(on, {
4045
+ user: x.user,
4046
+ isOnline: x.isOnline,
4047
+ onClose: () => S(null),
4048
+ onMessage: () => void ee()
4085
4049
  })
4086
4050
  ]
4087
4051
  });
@@ -4814,16 +4778,16 @@ var pn = [{
4814
4778
  children: e.map((e) => s(e))
4815
4779
  });
4816
4780
  }, bn = ({ message: e }) => {
4817
- let { currentUser: t, currentChat: n, currentChatMessages: r } = _((e) => e.chat), { allowDeleteMessage: i, allowRevokeMessage: a } = _(Ue), o = g(), { t: s } = Z(), c = e.member.code === t?.code, [l, u] = p(!1), f = new Date(e.created_at).toLocaleTimeString([], {
4781
+ let { currentUser: t, currentChat: n, currentChatMessages: r } = _((e) => e.chat), { allowDeleteMessage: i, allowRevokeMessage: a } = _(Ue), o = g(), { t: s } = Z(), { showToast: c } = Qe(), l = e.member.code === t?.code, [u, f] = p(!1), m = new Date(e.created_at).toLocaleTimeString([], {
4818
4782
  hour: "2-digit",
4819
4783
  minute: "2-digit"
4820
- }), m = async (t) => {
4784
+ }), h = async (t) => {
4821
4785
  if (n) try {
4822
4786
  await G.actionMessage(n.id, e.id, t);
4823
4787
  } catch (e) {
4824
- console.error("Lỗi khi tương tác tin nhắn:", e), alert("Thao tác không thành công, vui lòng thử lại!");
4788
+ console.error("Lỗi khi tương tác tin nhắn:", e), c("Thao tác không thành công, vui lòng thử lại!", "error");
4825
4789
  }
4826
- }, h = (e, t) => {
4790
+ }, v = (e, t) => {
4827
4791
  e.stopPropagation();
4828
4792
  let n = e.currentTarget.getRootNode(), r = n.getElementById ? n.getElementById(`chat-message-${t}`) : document.getElementById(`chat-message-${t}`);
4829
4793
  r && r.scrollIntoView({
@@ -4832,10 +4796,10 @@ var pn = [{
4832
4796
  }), r?.classList.add("highlight-message"), setTimeout(() => {
4833
4797
  r?.classList.remove("highlight-message");
4834
4798
  }, 2e3);
4835
- }, v = d(() => r.find((e) => e.member.code === t?.code)?.id, [r, t?.code]), y = d(() => n?.members ? Math.max(...n.members.filter((e) => e.id !== t?.id).map((e) => e.last_read_id ?? 0)) : 0, [n, t?.id]), b = c && e.id === y && y > 0, x = c && e.id === v && e.id > y;
4799
+ }, y = d(() => r.find((e) => e.member.code === t?.code)?.id, [r, t?.code]), b = d(() => n?.members ? Math.max(...n.members.filter((e) => e.id !== t?.id).map((e) => e.last_read_id ?? 0)) : 0, [n, t?.id]), x = l && e.id === b && b > 0, S = l && e.id === y && e.id > b;
4836
4800
  return e.removed ? null : e.revoked ? /* @__PURE__ */ E("div", {
4837
- className: `message-item ${c ? "current-user" : "other-user"}`,
4838
- children: [!c && e.member.avatar && /* @__PURE__ */ T("img", {
4801
+ className: `message-item ${l ? "current-user" : "other-user"}`,
4802
+ children: [!l && e.member.avatar && /* @__PURE__ */ T("img", {
4839
4803
  src: e.member.avatar,
4840
4804
  alt: e.member.name,
4841
4805
  className: "message-avatar",
@@ -4843,7 +4807,7 @@ var pn = [{
4843
4807
  }), /* @__PURE__ */ T("div", {
4844
4808
  className: "message-content",
4845
4809
  children: /* @__PURE__ */ T("div", {
4846
- className: `message-bubble ${c ? "current-user" : "other-user"} revoked`,
4810
+ className: `message-bubble ${l ? "current-user" : "other-user"} revoked`,
4847
4811
  children: /* @__PURE__ */ T("div", {
4848
4812
  className: "message-text",
4849
4813
  children: s("chatMessage.states.revoked")
@@ -4852,8 +4816,8 @@ var pn = [{
4852
4816
  })]
4853
4817
  }) : /* @__PURE__ */ E("div", {
4854
4818
  id: `chat-message-${e.id}`,
4855
- className: `message-item ${c ? "current-user" : "other-user"}`,
4856
- children: [!c && e.member.avatar && /* @__PURE__ */ T("img", {
4819
+ className: `message-item ${l ? "current-user" : "other-user"}`,
4820
+ children: [!l && e.member.avatar && /* @__PURE__ */ T("img", {
4857
4821
  src: e.member.avatar,
4858
4822
  alt: e.member.name,
4859
4823
  className: "message-avatar",
@@ -4861,7 +4825,7 @@ var pn = [{
4861
4825
  }), /* @__PURE__ */ E("div", {
4862
4826
  className: "message-content",
4863
4827
  children: [
4864
- !c && /* @__PURE__ */ T("div", {
4828
+ !l && /* @__PURE__ */ T("div", {
4865
4829
  className: "message-member-name",
4866
4830
  children: e.member.name
4867
4831
  }),
@@ -4870,17 +4834,17 @@ var pn = [{
4870
4834
  children: [
4871
4835
  /* @__PURE__ */ T("div", {
4872
4836
  className: "message-actions-bar",
4873
- children: c ? /* @__PURE__ */ E(w, { children: [
4837
+ children: l ? /* @__PURE__ */ E(w, { children: [
4874
4838
  /* @__PURE__ */ T("button", {
4875
4839
  className: "action-icon",
4876
4840
  title: s("chatMessage.actions.like"),
4877
- onClick: () => void m("like"),
4841
+ onClick: () => void h("like"),
4878
4842
  children: /* @__PURE__ */ T(Lt, {})
4879
4843
  }),
4880
4844
  /* @__PURE__ */ T("button", {
4881
4845
  className: "action-icon",
4882
4846
  title: s("chatMessage.actions.love"),
4883
- onClick: () => void m("love"),
4847
+ onClick: () => void h("love"),
4884
4848
  children: /* @__PURE__ */ T(Rt, {})
4885
4849
  }),
4886
4850
  /* @__PURE__ */ T("button", {
@@ -4892,13 +4856,13 @@ var pn = [{
4892
4856
  i(e.created_at) && /* @__PURE__ */ T("button", {
4893
4857
  className: "action-icon",
4894
4858
  title: s("chatMessage.actions.delete"),
4895
- onClick: () => void m("remove"),
4859
+ onClick: () => void h("remove"),
4896
4860
  children: /* @__PURE__ */ T(zt, {})
4897
4861
  }),
4898
4862
  a(e.created_at) && /* @__PURE__ */ T("button", {
4899
4863
  className: "action-icon",
4900
4864
  title: s("chatMessage.actions.revoke"),
4901
- onClick: () => void m("revoke"),
4865
+ onClick: () => void h("revoke"),
4902
4866
  children: /* @__PURE__ */ T(Bt, {})
4903
4867
  })
4904
4868
  ] }) : /* @__PURE__ */ E(w, { children: [
@@ -4911,22 +4875,22 @@ var pn = [{
4911
4875
  /* @__PURE__ */ T("button", {
4912
4876
  className: "action-icon",
4913
4877
  title: s("chatMessage.actions.like"),
4914
- onClick: () => void m("like"),
4878
+ onClick: () => void h("like"),
4915
4879
  children: /* @__PURE__ */ T(Lt, {})
4916
4880
  }),
4917
4881
  /* @__PURE__ */ T("button", {
4918
4882
  className: "action-icon",
4919
4883
  title: s("chatMessage.actions.love"),
4920
- onClick: () => void m("love"),
4884
+ onClick: () => void h("love"),
4921
4885
  children: /* @__PURE__ */ T(Rt, {})
4922
4886
  })
4923
4887
  ] })
4924
4888
  }),
4925
4889
  e.content || e.reply ? /* @__PURE__ */ E("div", {
4926
- className: `message-bubble ${c ? "current-user" : "other-user"}`,
4890
+ className: `message-bubble ${l ? "current-user" : "other-user"}`,
4927
4891
  children: [e.reply && /* @__PURE__ */ E("div", {
4928
4892
  className: "message-reply-preview",
4929
- onClick: (t) => h(t, e.reply.id),
4893
+ onClick: (t) => v(t, e.reply.id),
4930
4894
  children: [/* @__PURE__ */ T("div", {
4931
4895
  className: "reply-user-name",
4932
4896
  children: e.reply.member.name
@@ -4936,17 +4900,17 @@ var pn = [{
4936
4900
  })]
4937
4901
  }), e.content && /* @__PURE__ */ T("div", {
4938
4902
  className: "message-text",
4939
- children: e.content.length > 500 && !l ? /* @__PURE__ */ E(w, { children: [
4903
+ children: e.content.length > 500 && !u ? /* @__PURE__ */ E(w, { children: [
4940
4904
  e.content.substring(0, 500),
4941
4905
  "...",
4942
4906
  /* @__PURE__ */ T("span", {
4943
4907
  className: "see-more-btn",
4944
- onClick: () => u(!0),
4908
+ onClick: () => f(!0),
4945
4909
  children: s("chatMessage.actions.seeMore")
4946
4910
  })
4947
4911
  ] }) : /* @__PURE__ */ E(w, { children: [e.content, e.content.length > 500 && /* @__PURE__ */ T("span", {
4948
4912
  className: "see-more-btn",
4949
- onClick: () => u(!1),
4913
+ onClick: () => f(!1),
4950
4914
  children: s("chatMessage.actions.seeLess")
4951
4915
  })] })
4952
4916
  })]
@@ -4960,9 +4924,9 @@ var pn = [{
4960
4924
  }),
4961
4925
  /* @__PURE__ */ E("div", {
4962
4926
  className: "message-time",
4963
- children: [f, c && (b || x) && /* @__PURE__ */ T("span", {
4964
- className: `message-item-status ${b ? "seen" : ""}`,
4965
- children: b ? /* @__PURE__ */ T(Vt, {}) : `• ${s("chatMessage.status.sent")}`
4927
+ children: [m, l && (x || S) && /* @__PURE__ */ T("span", {
4928
+ className: `message-item-status ${x ? "seen" : ""}`,
4929
+ children: x ? /* @__PURE__ */ T(Vt, {}) : `• ${s("chatMessage.status.sent")}`
4966
4930
  })]
4967
4931
  })
4968
4932
  ]
@@ -5031,25 +4995,10 @@ var pn = [{
5031
4995
  w
5032
4996
  ]), /* @__PURE__ */ E("div", {
5033
4997
  className: "message-list-wrapper",
5034
- style: {
5035
- position: "relative",
5036
- flex: 1,
5037
- overflow: "hidden",
5038
- display: "flex",
5039
- flexDirection: "column"
5040
- },
5041
4998
  children: [/* @__PURE__ */ T("div", {
5042
4999
  className: "message-list",
5043
5000
  ref: s,
5044
5001
  onScroll: (e) => void C(e),
5045
- style: {
5046
- overflowY: "auto",
5047
- flex: 1,
5048
- display: "flex",
5049
- flexDirection: "column-reverse",
5050
- gap: "20px",
5051
- padding: "24px 20px"
5052
- },
5053
5002
  children: n.map((t, r) => {
5054
5003
  let i = new Date(t.created_at).toDateString(), a = n[r + 1], o = i !== (a ? new Date(a.created_at).toDateString() : null);
5055
5004
  return /* @__PURE__ */ E(e, { children: [/* @__PURE__ */ T(bn, { message: t }), o && /* @__PURE__ */ T("div", {