:root{
  --primary:#147ef5;--primary-2:#0b67d1;--primary-soft:#eaf4ff;
  --ink:#172033;--muted:#7b8798;--line:#e8edf3;--surface:#fff;
  --page:#f5f8fc;--bubble:#fff;--bubble-me:#ddecff;
  --shadow:0 8px 30px rgba(25,45,75,.07);--radius:18px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--page)}
button,input,textarea{font:inherit}button{border:0;cursor:pointer}a{color:inherit}
.app{height:100vh;display:flex;overflow:hidden;background:var(--page)}
.sidebar{width:390px;background:rgba(255,255,255,.96);border-right:1px solid var(--line);display:flex;flex-direction:column;position:relative;z-index:2}
.side-head{height:76px;padding:0 22px;display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:850;letter-spacing:-.8px;font-size:27px;color:var(--ink)}
.brand span{color:var(--primary)}
.brand.small{font-size:23px}
.head-actions{display:flex;gap:7px}
.icon-btn,.head-actions button,.head-actions a{width:38px;height:38px;border-radius:12px;background:#f3f7fc;color:#496079;display:grid;place-items:center;text-decoration:none;font-size:18px;transition:.18s}
.icon-btn:hover,.head-actions button:hover,.head-actions a:hover{background:var(--primary-soft);color:var(--primary);transform:translateY(-1px)}
.search{padding:0 18px 14px;position:relative}
.search input{width:100%;height:44px;border:1px solid transparent;background:#f3f6fa;padding:0 15px 0 42px;border-radius:13px;outline:none;color:var(--ink);transition:.2s}
.search:before{content:"⌕";position:absolute;left:32px;top:10px;font-size:21px;color:#8b98a9;z-index:1}
.search input:focus{background:#fff;border-color:#cfe3ff;box-shadow:0 0 0 4px #147ef50d}
#searchResults{position:absolute;left:14px;right:14px;top:126px;background:#fff;border:1px solid var(--line);border-radius:15px;box-shadow:0 16px 45px #14233d18;z-index:10;overflow:hidden}
.result{width:100%;display:flex;align-items:center;gap:11px;padding:12px 14px;background:#fff;text-align:left;border-bottom:1px solid #f0f3f7}
.result:hover{background:#f6faff}
.result span{display:flex;flex-direction:column;min-width:0}.result small{color:var(--muted)}
.tabs{display:flex;padding:0 18px;border-bottom:1px solid var(--line);gap:3px}
.tabs>*{flex:1;text-align:center;padding:13px 5px;color:#8490a0;text-decoration:none;background:none;font-size:13px;font-weight:650}
.tabs .active{color:var(--primary);border-bottom:2px solid var(--primary)}
.chat-list{overflow:auto;flex:1;padding:8px}
.chat-item{width:100%;display:flex;align-items:center;gap:12px;padding:12px 11px;border-radius:13px;background:transparent;text-align:left;margin:2px 0}
.chat-item:hover{background:#f5f8fb}.chat-item.active{background:#eef6ff}
.avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:0 0 auto;box-shadow:0 0 0 1px #dfe6ee}
.avatar.sm{width:39px;height:39px}
.chat-item>div:nth-child(2){min-width:0;display:flex;flex-direction:column;flex:1}
.chat-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.chat-item .last{margin-top:4px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}
.unread{margin-left:auto;width:8px;height:8px;background:var(--primary);border-radius:50%}
.side-bottom{padding:13px 18px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;background:#fbfcfe}
.side-bottom div{display:flex;flex-direction:column;min-width:0;flex:1}.side-bottom small{color:var(--muted);font-size:11px}
.side-bottom a{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;color:#7b8798;text-decoration:none}.side-bottom a:hover{background:#eef5ff;color:var(--primary)}
.chat-area{flex:1;min-width:0;position:relative;background:linear-gradient(180deg,#f8fbff,#eef4f9)}
.empty{height:100%;display:grid;place-content:center;text-align:center;color:var(--muted);padding:30px}
.empty>div{width:82px;height:82px;border-radius:25px;display:grid;place-items:center;margin:0 auto 18px;background:#eaf4ff;color:var(--primary);font-size:38px;box-shadow:0 10px 25px #147ef51c}
.empty h2{margin:0 0 8px;color:var(--ink);font-size:22px}.empty p{margin:0;max-width:400px}
.chat-panel{height:100%;display:flex;flex-direction:column}
.chat-head{height:76px;background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 22px;backdrop-filter:blur(12px)}
.chat-head>div{display:flex;flex-direction:column;min-width:0}.chat-head b{font-size:15px}.chat-head small{color:var(--muted);font-size:12px;margin-top:2px}
.call-actions{margin-left:auto;display:flex!important;flex-direction:row!important;gap:5px}
.call-actions button{background:transparent;color:#607086;width:40px;height:40px;border-radius:12px;font-size:18px}.call-actions button:hover{background:#eef5ff;color:var(--primary)}
.mobile-back{display:none;background:transparent;font-size:28px;color:#64748b}
.messages{flex:1;overflow:auto;padding:28px clamp(18px,4vw,60px);display:flex;flex-direction:column;gap:7px;background-image:radial-gradient(#d9e4ef 1px,transparent 1px);background-size:22px 22px;background-color:#f3f7fb}
.message{display:flex;align-items:flex-end;gap:6px;max-width:min(70%,620px)}
.message.mine{margin-left:auto;flex-direction:row-reverse}
.bubble{background:var(--bubble);border:1px solid #e7edf3;border-radius:15px 15px 15px 5px;padding:10px 13px;box-shadow:0 2px 7px #263b5308;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.45;font-size:14px}
.mine .bubble{background:var(--bubble-me);border-color:#c9e0fa;border-radius:15px 15px 5px 15px}
.bubble small{display:block;color:#7e8a99;text-align:right;font-size:10px;margin-top:4px}
.react{background:transparent;color:#7a8797;border-radius:8px;padding:4px}.react:hover{background:#fff}
.composer{background:rgba(255,255,255,.96);border-top:1px solid var(--line);padding:12px 18px;display:flex;align-items:flex-end;gap:8px;backdrop-filter:blur(12px)}
.composer textarea{flex:1;resize:none;border:1px solid #e1e8f0;background:#f5f8fb;border-radius:15px;padding:11px 14px;outline:none;max-height:130px;transition:.2s}
.composer textarea:focus{background:#fff;border-color:#b9d8fb;box-shadow:0 0 0 3px #147ef50b}
.composer .attach,.composer .emoji{font-size:21px;color:#69778a;padding:9px;border-radius:10px}.composer .attach:hover,.composer .emoji:hover{background:#eef5ff;color:var(--primary)}
.send{width:44px;height:44px;border-radius:13px;background:var(--primary);color:#fff;font-size:18px;box-shadow:0 6px 16px #147ef536;transition:.18s}.send:hover{background:var(--primary-2);transform:translateY(-1px)}
.hidden{display:none!important}
.auth{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 20% 20%,#dff0ff 0,#f5f9fd 40%,#eef4fa 100%)}
.auth-card{width:min(450px,92vw);background:#fff;padding:38px;border-radius:24px;border:1px solid #e1eaf3;box-shadow:0 25px 80px #19375c1a}
.auth-card .brand{margin-bottom:20px}.auth-card h1{margin:0 0 8px;font-size:27px;letter-spacing:-.5px}.auth-card form{display:flex;flex-direction:column;gap:7px}.auth-card label,.card label{font-size:12px;font-weight:700;color:#526174;margin-top:9px}
.auth-card input,.settings input,.settings textarea,.card input{padding:12px 13px;border:1px solid #dce4ec;border-radius:11px;outline:none;background:#fbfcfe;transition:.18s}
.auth-card input:focus,.settings input:focus,.settings textarea:focus{background:#fff;border-color:#b8d7fa;box-shadow:0 0 0 4px #147ef50d}
.btn{background:var(--primary);color:#fff;border-radius:11px;padding:12px 16px;margin-top:13px;text-decoration:none;display:inline-block;font-weight:700;box-shadow:0 7px 18px #147ef526}.btn:hover{background:var(--primary-2)}
.btn.secondary{background:#334155}.muted{color:var(--muted);font-size:13px}.error,.success{padding:12px 13px;border-radius:11px;margin:13px 0;font-size:13px}.error{background:#fff1f2;color:#b42318}.success{background:#ecfdf3;color:#067647}
.settings{max-width:920px;margin:0 auto;padding:40px 22px}.settings>a:first-child{color:var(--primary);text-decoration:none;font-weight:650}.settings h1{font-size:30px;letter-spacing:-.6px}.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;margin:16px 0;box-shadow:var(--shadow)}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:13px}.contact,.status{display:flex;gap:12px;align-items:center}.contact small,.status small{display:block;color:var(--muted)}.status p{margin:6px 0}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.stat{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow)}.stat b{font-size:31px;display:block;color:var(--primary);letter-spacing:-1px}.stat span{color:var(--muted);font-size:12px}
#toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,20px);opacity:0;background:#172033;color:#fff;padding:11px 16px;border-radius:11px;transition:.2s;z-index:100;box-shadow:0 10px 30px #17203330}#toast.show{opacity:1;transform:translate(-50%,0)}
.file{display:block;margin-top:5px;color:var(--primary)}
@media(max-width:850px){
 .sidebar{width:100%}.chat-area{display:none}.app.chat-open .sidebar{display:none}.app.chat-open .chat-area{display:block}
 .mobile-back{display:block}.stats{grid-template-columns:1fr 1fr}.message{max-width:90%}.side-head{height:68px}
}