@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&display=swap');
:root{--blue:#2481e8;--blue-dark:#1768c4;--bg:#eaf1f8;--panel:#fff;--text:#1d2b3a;--muted:#8291a2;--line:#e8edf3;--green:#2fc27b}
*{box-sizing:border-box}body{margin:0;background:var(--bg);font-family:Vazirmatn,Tahoma,sans-serif;color:var(--text);font-size:14px}button,input,textarea{font:inherit}button{cursor:pointer}.app-shell{max-width:1440px;margin:0 auto;min-height:100dvh;background:#fff;box-shadow:0 0 45px #1e477016}.topbar{height:74px;background:var(--blue);color:white;display:flex;align-items:center;justify-content:space-between;padding:0 24px}.brand{display:flex;align-items:center;gap:12px}.brand-icon{width:42px;height:42px;border-radius:14px;background:#ffffff25;display:grid;place-items:center;font-size:25px;font-weight:800}.brand strong{display:block;font-size:20px}.brand small{display:block;font-size:11px;opacity:.8}.top-user{display:flex;align-items:center;gap:9px;font-size:13px}.top-user small{display:block;opacity:.8;font-size:10px}.mini-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#ffffff30;font-weight:700}.logout-btn{background:#ffffff1f;color:#fff;border:1px solid #ffffff50;padding:7px 12px;border-radius:10px;margin-right:8px}.chat-layout{display:grid;grid-template-columns:330px minmax(0,1fr);height:calc(100dvh - 74px);min-height:480px}.sidebar{border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0}.sidebar-heading{display:flex;align-items:center;justify-content:space-between;padding:17px 18px 10px}.sidebar-heading h2{font-size:16px;margin:0}.icon-btn{border:0;border-radius:11px;background:#eaf4ff;color:var(--blue);font-size:26px;width:38px;height:38px}.search-wrap{padding:0 14px 13px}.search-wrap input,.auth-card input{width:100%;border:1px solid #e1e8f0;background:#f6f8fb;border-radius:12px;padding:12px 13px;outline:none}.search-wrap input:focus,.auth-card input:focus,.send-form textarea:focus{border-color:#83baf5;box-shadow:0 0 0 3px #2481e81b}.user-list{overflow:auto;flex:1}.user-row{border:0;border-top:1px solid #f0f3f7;background:white;width:100%;display:flex;align-items:center;text-align:right;gap:11px;padding:13px 15px}.user-row:hover,.user-row.selected{background:#edf6ff}.avatar{width:43px;height:43px;border-radius:50%;background:linear-gradient(135deg,#6bb4ff,#2679d8);color:#fff;display:grid;place-items:center;font-size:18px;font-weight:700;flex-shrink:0}.user-info{display:block;min-width:0;flex:1}.user-info strong{display:block;font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-info small{display:block;color:var(--muted);font-size:11px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}.status-dot,.online-dot{width:8px;height:8px;background:#c8d1dc;border-radius:50%;flex-shrink:0}.status-dot.online,.online-dot{background:var(--green)}.sidebar-footer{border-top:1px solid var(--line);padding:14px 18px;color:var(--muted);font-size:11px;display:flex;align-items:center;gap:8px}.conversation{min-width:0;display:flex;flex-direction:column;background:#f5f8fc;background-image:radial-gradient(#dce8f3 0.7px,transparent .7px);background-size:16px 16px}.welcome-panel{margin:auto;text-align:center;color:var(--muted);padding:24px}.welcome-panel h2{color:#526578;font-size:20px}.welcome-art{width:84px;height:84px;border-radius:30px;background:#e0efff;color:var(--blue);display:grid;place-items:center;font-size:42px;margin:0 auto}.active-chat{display:flex;flex-direction:column;min-height:0;flex:1}.chat-head{height:76px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 20px;flex-shrink:0}.chat-person strong{display:block;font-size:14px}.chat-person small{display:block;color:var(--muted);font-size:11px;margin-top:3px}.messages{padding:22px 5%;display:flex;flex-direction:column;gap:10px;overflow-y:auto;flex:1;min-height:0}.message{max-width:min(75%,560px);padding:10px 13px 5px;border-radius:15px;box-shadow:0 1px 2px #203c5710;overflow-wrap:anywhere}.message-body{white-space:normal;line-height:1.8}.message time{display:block;text-align:left;font-size:10px;color:#8b9aaa;margin-top:2px}.message.mine{align-self:flex-start;background:#d9f4d6;border-bottom-right-radius:4px}.message.theirs{align-self:flex-end;background:#fff;border-bottom-left-radius:4px}.send-form{display:flex;gap:10px;align-items:flex-end;padding:14px 18px;background:#fff;border-top:1px solid var(--line)}.send-form textarea{resize:none;max-height:130px;flex:1;border:1px solid #e1e8f0;background:#f8fafc;border-radius:14px;padding:12px 14px;outline:none;line-height:1.6}.send-btn{height:44px;width:46px;border:0;border-radius:14px;background:var(--blue);color:#fff;font-size:21px}.send-btn:hover,.primary-btn:hover{background:var(--blue-dark)}.empty{padding:22px;text-align:center;color:var(--muted);font-size:12px}.auth-screen{min-height:calc(100dvh - 74px);display:grid;place-items:center;padding:28px;background:linear-gradient(140deg,#eaf5ff,#f8fbff)}.auth-card{width:min(100%,420px);background:white;padding:34px;border-radius:24px;box-shadow:0 15px 60px #194f8515;text-align:center}.hero-icon{margin:auto auto 14px;width:68px;height:68px;display:grid;place-items:center;border-radius:22px;background:var(--blue);color:white;font-size:34px;font-weight:800}.auth-card h1{font-size:22px;margin:8px 0}.muted{color:var(--muted);font-size:13px;line-height:1.8}.auth-card form{text-align:right;margin-top:24px}.auth-card label{display:block;margin:14px 0 7px;font-size:12px;color:#586a7c}.primary-btn{width:100%;border:0;border-radius:12px;background:var(--blue);color:white;padding:13px;margin-top:18px;font-weight:700}.tiny{font-size:10px;color:#9aa7b5;line-height:1.8;margin-top:18px}.error{color:#d33b4b;font-size:12px;margin-top:10px;line-height:1.7}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#1e2c3c;color:#fff;padding:11px 18px;border-radius:12px;box-shadow:0 8px 30px #0002;transition:.2s;z-index:20;max-width:90%;text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}[hidden]{display:none!important}
@media(max-width:700px){.topbar{height:64px;padding:0 14px}.brand strong{font-size:17px}.brand-icon{width:37px;height:37px}.chat-layout{height:calc(100dvh - 64px);grid-template-columns:115px minmax(0,1fr)}.sidebar-heading{padding:12px 8px}.sidebar-heading h2{font-size:12px}.icon-btn{width:30px;height:30px;font-size:20px}.search-wrap{padding:0 6px 8px}.search-wrap input{font-size:11px;padding:9px 7px}.user-row{padding:11px 5px;gap:4px;flex-direction:column;align-items:center;text-align:center}.avatar{width:37px;height:37px;font-size:15px}.user-info{width:100%}.user-info strong{font-size:11px}.user-info small{font-size:9px;max-width:100%}.status-dot{display:none}.sidebar-footer{padding:10px 5px;font-size:9px;justify-content:center}.chat-head{height:65px;padding:0 10px;gap:8px}.chat-head .avatar{width:36px;height:36px}.chat-person strong{font-size:12px}.chat-person small{font-size:9px;max-width:175px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.messages{padding:14px 8px}.message{max-width:94%;font-size:12px}.send-form{padding:9px;gap:6px}.send-form textarea{font-size:12px;padding:10px}.send-btn{height:41px;width:40px}.top-user{gap:5px;font-size:11px}.logout-btn{padding:5px 7px;margin-right:0;font-size:10px}.mini-avatar{width:28px;height:28px}.auth-screen{min-height:calc(100dvh - 64px);padding:14px}.auth-card{padding:25px 20px}.welcome-panel{padding:10px}.welcome-panel h2{font-size:16px}.welcome-panel p{font-size:11px}}

.invite-admin-btn{border:0;background:#e8f4ff;color:#1768c4;border-radius:10px;padding:8px 10px;font-size:11px;font-weight:700;white-space:nowrap}.sidebar-heading{gap:8px}
@media(max-width:700px){.invite-admin-btn{font-size:9px;padding:6px 5px}.sidebar-heading{gap:3px}}

/* KanChat upgrade */
.chat-head{gap:10px}.chat-action{border:1px solid #dbe8f5;background:#f3f8ff;color:#1768c4;border-radius:10px;padding:8px;font-size:11px;margin-right:auto}.back-chat-btn{flex-shrink:0}.message-tools{display:flex;gap:4px;opacity:.72;margin-bottom:4px}.message-tools button,.reaction-row button{border:0;background:#ffffffa8;border-radius:7px;padding:2px 6px;font-size:11px;color:#516577}.reply-preview{border-right:3px solid var(--blue);background:#ffffff80;padding:5px 8px;border-radius:5px;margin-bottom:6px;font-size:11px;color:#526578}.reaction-row{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px}.reply-banner{padding:8px 15px;background:#e7f3ff;color:#1768c4;font-size:12px}.avatar-img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.avatar:has(.avatar-img){overflow:hidden}.message small{font-size:9px;color:#8291a2}.top-user{flex-wrap:wrap}
@media(max-width:700px){.chat-layout{display:block;position:relative}.sidebar{height:100%;width:100%;border:0}.conversation{display:none;height:100%;width:100%}.chat-open .sidebar{display:none}.chat-open .conversation{display:flex}.chat-open .chat-layout{display:block}.chat-head{padding:0 8px}.chat-action{font-size:9px;padding:6px 5px}.back-chat-btn{display:block!important;width:32px;height:32px;font-size:18px}}