/* === Reset === */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;font-family:-apple-system,"PingFang SC","Microsoft YaHei","Helvetica Neue",sans-serif;font-size:14px;background:#111;color:#333;overflow:hidden}
#app{max-width:480px;margin:0 auto;height:100%;position:relative;background:#EDEDED}

/* === Pages === */
.page{position:absolute;top:0;left:0;right:0;bottom:0;display:none;flex-direction:column;background:#EDEDED}
.page.active{display:flex}

/* === Auth === */
#auth-page{background:#111;justify-content:center;align-items:center}
.auth-box{width:85%;max-width:320px;text-align:center}
.auth-logo{margin-bottom:16px}
.auth-title{color:#fff;font-size:22px;font-weight:400;letter-spacing:4px;margin-bottom:24px}
.auth-form{display:none}
.auth-form.active{display:block}
.input-group{margin-bottom:12px}
.input-group input{width:100%;height:44px;border:1px solid #444;border-radius:6px;padding:0 14px;font-size:15px;background:#2A2A2A;color:#fff;outline:none}
.input-group input:focus{border-color:#07C160}
.btn-primary{width:100%;height:44px;border:none;border-radius:6px;background:#07C160;color:#fff;font-size:16px;cursor:pointer;margin-top:4px}
.btn-primary:active{background:#06AD56}
.auth-switch{margin-top:16px;color:#888;font-size:13px}
.auth-switch span{color:#07C160;cursor:pointer}
.auth-error{margin-top:8px;color:#F44336;font-size:13px;min-height:20px}
.remember-me{display:flex;align-items:center;gap:8px;margin-bottom:8px;color:#aaa;font-size:13px;cursor:pointer;-webkit-user-select:none;user-select:none}
.remember-me input[type=checkbox]{width:16px;height:16px;accent-color:#07C160;cursor:pointer}
.logout-item{justify-content:center}
.logout-item .mt{text-align:center;flex:1}

/* === Top Bar === */
.top-bar{display:flex;align-items:center;height:50px;padding:0 16px;background:#EDEDED;flex-shrink:0}
.top-bar-title{flex:1;font-size:17px;font-weight:500;color:#111}
.top-bar-actions{display:flex;gap:16px}
.top-bar-btn{cursor:pointer;display:flex;align-items:center}
.chat-top-bar .top-bar-title{text-align:center}

/* === Content === */
.content-area{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;background:#EDEDED}
.view{display:none;min-height:100%}.view.active{display:block}

/* === Chat List === */
.chat-list{background:#EDEDED;padding:10px 12px}
.chat-item{display:flex;align-items:center;padding:14px 16px;border-radius:16px;background:#fff;cursor:pointer;margin-bottom:8px;transition:transform .1s,box-shadow .1s;box-shadow:0 1px 3px rgba(0,0,0,.08);position:relative}
.chat-item:last-child{margin-bottom:0}
.chat-item:active{transform:scale(.98);box-shadow:none}
.chat-avatar-wrap{position:relative;flex-shrink:0;margin-right:14px}
.unread-dot{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;background:#F44336;border-radius:50%;color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;padding:0 4px;font-weight:600;box-shadow:0 2px 5px rgba(244,67,54,.4)}
.chat-info{flex:1;min-width:0}
.chat-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.chat-name{font-size:17px;color:#111;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;font-weight:600}
.chat-time{font-size:12px;color:#B0B0B0;margin-left:10px;flex-shrink:0}
.chat-msg{font-size:13px;color:#999;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.45}
.chat-arrow{color:#C0C0C0;font-size:18px;flex-shrink:0;margin-left:10px}

/* === Contacts === */
.contact-list{background:#EDEDED;padding:10px 12px}
.contact-item{display:flex;align-items:center;padding:14px 16px;border-radius:16px;background:#fff;cursor:pointer;margin-bottom:8px;transition:transform .1s,box-shadow .1s;box-shadow:0 1px 3px rgba(0,0,0,.08);position:relative}
.contact-item:last-child{margin-bottom:0}
.contact-item:active{transform:scale(.98);box-shadow:none}
.c-avatar{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:500;color:#fff;margin-right:14px;flex-shrink:0;box-shadow:0 2px 5px rgba(0,0,0,.1)}
.c-name{font-size:17px;color:#111;font-weight:500}
.c-arrow{color:#C0C0C0;font-size:18px;flex-shrink:0;margin-left:auto}

/* === Menu (Me) === */
.me-header{display:flex;align-items:center;padding:14px 16px;background:#fff;border-radius:16px;margin:10px 12px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.me-avatar{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:500;color:#fff;margin-right:14px;flex-shrink:0;box-shadow:0 2px 5px rgba(0,0,0,.1)}
.me-info{flex:1}
.me-name{font-size:20px;font-weight:500;color:#111}
.me-id{font-size:13px;color:#999;margin-top:4px}
.menu-list{background:#fff;border-radius:16px;margin:8px 12px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.menu-item{display:flex;align-items:center;padding:14px 16px;cursor:pointer}
.menu-item:first-child{border-radius:16px 16px 0 0}
.menu-item:last-child{border-radius:0 0 16px 16px}
.mi{font-size:20px;margin-right:12px;width:24px;text-align:center}
.mt{flex:1;font-size:15px;color:#111}
.ma{color:#C0C0C0;font-size:20px}

/* === Tab Bar === */
.tab-bar{display:flex;height:56px;background:#F7F7F7;border-top:.5px solid #D9D9D9;flex-shrink:0}
.tab-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;position:relative;color:#999}
.tab-item.active{color:#07C160}
.tab-icon{width:24px;height:24px;fill:currentColor}
.tab-label{font-size:10px;margin-top:2px}
.tab-badge{position:absolute;top:2px;right:50%;margin-right:-18px;min-width:16px;height:16px;background:#F44336;border-radius:50%;color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center;padding:0 3px;font-weight:600}

/* === Chat Window === */
#chat-page{background:#EDEDED}
.back-btn{cursor:pointer;display:flex;align-items:center}
.chat-messages{flex:1;overflow-y:auto;padding:16px 12px 8px;-webkit-overflow-scrolling:touch;background:#EDEDED}
.msg-row{display:flex;margin-bottom:16px;align-items:flex-start}
.msg-row.self{flex-direction:row-reverse}
.msg-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:500;color:#fff;flex-shrink:0;box-shadow:0 2px 5px rgba(0,0,0,.1);object-fit:cover}
.msg-row:not(.self) .msg-avatar{margin-right:10px}
.msg-row.self .msg-avatar{margin-left:10px}
.msg-bubble{max-width:68%}
.msg-content{padding:10px 14px;border-radius:6px;font-size:15px;line-height:1.55;word-break:break-word;position:relative;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.msg-row:not(.self) .msg-content{background:#fff;color:#111;border-top-left-radius:2px}
.msg-row.self .msg-content{background:#95EC69;color:#111;border-top-right-radius:2px}
.msg-row:not(.self) .msg-content::before{content:'';position:absolute;top:11px;left:-6px;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:7px solid #fff}
.msg-row.self .msg-content::after{content:'';position:absolute;top:11px;right:-6px;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:7px solid #95EC69}
.msg-time{text-align:center;margin:18px 0 6px;font-size:11px;color:#B0B0B0}

/* === Input Bar === */
.chat-input-bar{flex-shrink:0;background:#F7F7F7;border-top:.5px solid #D9D9D9;padding:10px 12px;padding-bottom:calc(10px + env(safe-area-inset-bottom));display:flex;align-items:flex-end}
.input-wrapper{display:flex;align-items:center;background:#fff;border-radius:8px;padding:2px 4px 2px 12px;flex:1;gap:8px;border:1px solid #E0E0E0;transition:border-color .2s}
.input-wrapper:focus-within{border-color:#07C160}
.input-wrapper input{flex:1;height:36px;border:none;outline:none;font-size:15px;background:transparent;padding:0 4px}
.input-wrapper button{height:32px;padding:0 14px;border:none;border-radius:6px;background:#07C160;color:#fff;font-size:14px;cursor:pointer;flex-shrink:0;transition:background .2s}
.input-wrapper button:active{background:#06AD56}

/* === Modal === */
.modal{position:fixed;top:0;left:0;right:0;bottom:0;z-index:100}
.modal-mask{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5)}
.modal-body{position:absolute;bottom:0;left:0;right:0;max-width:480px;margin:0 auto;background:#fff;border-radius:12px 12px 0 0;padding:16px;max-height:70vh;overflow-y:auto}
.modal-title{font-size:16px;font-weight:500;color:#111;margin-bottom:12px;text-align:center}
.modal-contacts .contact-item{padding:12px 0;border-bottom:.5px solid #ECECEC;border-radius:0;box-shadow:none;margin-bottom:0;background:transparent}
.modal-contacts .contact-item:last-child{border-bottom:none}
.modal-contacts .contact-item:active{background:#ECECEC;transform:none}
#search-results{margin-top:10px}
#search-results .contact-item{border-radius:12px;padding:12px 14px}
.modal-footer{text-align:center;margin-top:12px}
.btn-cancel{height:40px;padding:0 24px;border:none;border-radius:6px;background:#EDEDED;color:#666;font-size:14px;cursor:pointer}

/* === Animation === */
@keyframes slideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
#chat-page.active{animation:slideIn .25s ease-out}

/* === Desktop === */
@media(min-width:481px){#app{border-left:.5px solid #D9D9D9;border-right:.5px solid #D9D9D9}}
@media(min-width:768px){body{display:flex;justify-content:center;background:#111}#app{height:100vh}}

/* === Contacts Header === */
.contacts-header{padding:10px 12px}
.contacts-header .contact-item{border-radius:16px;box-shadow:0 1px 3px rgba(0,0,0,.08);margin-bottom:8px;padding:14px 16px}
.c-badge{margin-left:auto;min-width:18px;height:18px;background:#F44336;border-radius:50%;color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;padding:0 4px;font-weight:600}

/* === New Friends Page === */
#page-new-friends{background:#EDEDED}
#page-new-friends .top-bar{background:#EDEDED}
#friend-requests-list{padding:10px 12px}

/* === Search Modal === */
#search-modal .modal-body{padding:12px 16px}
#search-modal .modal-title{padding:0 0 12px 0;font-size:17px;font-weight:500;color:#111}
#search-input:focus{border-color:#07C160}
#search-results .contact-item{cursor:pointer}
#search-results .contact-item:active{background:#ECECEC}
.search-result-action{margin-left:auto;display:flex;gap:8px}
.btn-add{height:28px;padding:0 12px;border:1px solid #07C160;border-radius:14px;background:transparent;color:#07C160;font-size:13px;cursor:pointer}
.btn-add:active{background:#07C160;color:#fff}
.btn-added{height:28px;padding:0 12px;border:none;border-radius:14px;background:#EDEDED;color:#999;font-size:13px;cursor:default}

/* === Friend Request Item === */
.friend-request-item{display:flex;align-items:center;padding:12px 16px;background:#fff;border-bottom:.5px solid #ECECEC}
.friend-request-info{flex:1;min-width:0;margin-left:12px}
.friend-request-name{font-size:16px;color:#111;margin-bottom:2px}
.friend-request-msg{font-size:13px;color:#999;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.friend-request-actions{display:flex;gap:8px;flex-shrink:0}
.btn-accept{height:32px;padding:0 16px;border:none;border-radius:6px;background:#07C160;color:#fff;font-size:14px;cursor:pointer}
.btn-accept:active{background:#06AD56}
.btn-reject{height:32px;padding:0 16px;border:1px solid #ddd;border-radius:6px;background:#fff;color:#666;font-size:14px;cursor:pointer}
.btn-reject:active{background:#f5f5f5}
.request-status{font-size:13px;color:#999}

/* === Profile Page (修改资料) === */
#page-profile{background:#fff}

/* 头部 */
.profile-header{
  background:linear-gradient(135deg, #07C160 0%, #06AD56 100%);
  position:relative;
  padding-top:12px;
  flex-shrink:0;
  border-radius:0 0 20px 20px;
}
.profile-header-inner{
  display:flex;
  align-items:center;
  padding:8px 16px;
  min-height:48px;
}
.profile-back-btn{
  width:36px;height:36px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.7);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background .2s;
}
.profile-back-btn:active{background:rgba(255,255,255,.2)}
.profile-title{
  font-size:18px;font-weight:500;color:#fff;
  margin-left:16px;letter-spacing:2px;
}

/* 主体内容区 */
.profile-body{
  flex:1;overflow-y:auto;
  background:#fff;
  -webkit-overflow-scrolling:touch;
  padding:24px 24px 32px;
}

/* 头像区域 */
.profile-avatar-section{
  display:flex;justify-content:center;
  padding-bottom:28px;
}
.profile-avatar-container{
  position:relative;cursor:pointer;
}
.profile-avatar-circle{
  width:110px;height:110px;border-radius:50%;
  background:linear-gradient(135deg,#E8F5E9,#C8E6C9);
  border:4px solid #fff;
  box-shadow:0 4px 16px rgba(0,0,0,.08),0 0 0 1px rgba(7,193,96,.1);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;font-size:40px;color:#07C160;font-weight:600;
}
.profile-avatar-img{
  width:100%;height:100%;object-fit:cover;display:none;border-radius:50%;
}
.profile-avatar-edit-icon{
  position:absolute;bottom:4px;right:2px;
  width:34px;height:34px;
  background:linear-gradient(135deg,#07C160,#06AD56);
  border-radius:50%;
  border:3px solid #fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(7,193,96,.3);
}

/* 表单字段 */
.profile-form{display:flex;flex-direction:column;gap:18px}
.pf-field{display:flex;flex-direction:column;gap:6px}
.pf-label{font-size:15px;color:#555;font-weight:500}
.pf-input{
  width:100%;height:48px;
  border:none;
  border-radius:12px;
  background:#F5F5F5;
  padding:0 16px;
  font-size:15px;color:#222;
  outline:none;
  transition:background .2s,box-shadow .2s;
}
.pf-input:focus{
  background:#fff;
  box-shadow:0 0 0 2px rgba(7,193,96,.25);
  border:1px solid rgba(7,193,96,.2);
}
.pf-input::placeholder{color:#BBB}
.pf-select{
  width:100%;height:48px;
  border:none;
  border-radius:12px;
  background:#F5F5F5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23999' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") no-repeat right 16px center;
  padding:0 34px 0 16px;
  font-size:15px;color:#222;
  outline:none;
  appearance:none;-webkit-appearance:none;
  cursor:pointer;
  transition:background .2s,box-shadow .2s,border .2s;
}
.pf-select:focus{
  background-color:#fff;
  box-shadow:0 0 0 2px rgba(7,193,96,.25);
  border:1px solid rgba(7,193,96,.2);
}
.pf-textarea{
  width:100%;min-height:76px;
  border:none;
  border-radius:12px;
  background:#F5F5F5;
  padding:12px 16px;
  font-size:15px;color:#222;
  outline:none;
  resize:none;
  line-height:1.5;
  transition:background .2s,box-shadow .2s,border .2s;
  font-family:inherit;
}
.pf-textarea:focus{
  background:#fff;
  box-shadow:0 0 0 2px rgba(7,193,96,.25);
  border:1px solid rgba(7,193,96,.2);
}
.pf-textarea::placeholder{color:#BBB}

/* 保存按钮 */
.pf-save-btn{
  width:100%;height:50px;
  border:none;
  border-radius:25px;
  background:linear-gradient(135deg,#07C160 0%,#06AD56 100%);
  color:#fff;font-size:16px;font-weight:500;
  letter-spacing:8px;
  cursor:pointer;
  margin-top:28px;
  transition:transform .15s,box-shadow .2s;
  box-shadow:0 4px 14px rgba(7,193,96,.28);
}
.pf-save-btn:active{
  transform:scale(.97);
  box-shadow:0 2px 8px rgba(7,193,96,.22);
}