* { margin:0; padding:0; box-sizing:border-box; }
:root{
  --green:#07c160; --green-d:#06ad56;
  --bg:#f5f6f7; --rail:#2e2e2e; --rail-w:#222; --panel-w:280px;
  --line:#e7e7e7; --bubble:#fff; --mine:#95ec69;
  --red:#fa5151; --blue:#10aeff; --txt:#191919; --sub:#888;
}
html,body{height:100%; font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; color:var(--txt); background:var(--bg); overflow:hidden;}
.hidden{display:none !important;}
button{font-family:inherit; cursor:pointer; border:none; background:none;}
input,textarea{font-family:inherit; outline:none; border:none;}
img{display:block;}
a{color:var(--green); text-decoration:none;}

/* ---------- 登录 ---------- */
.screen{position:fixed; inset:0;}
.screen-center{display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#07c160 0%,#0a8f4e 60%,#0a7a44 100%);}
.login-card{width:340px; background:#fff; border-radius:14px; padding:30px 32px 26px; box-shadow:0 12px 40px rgba(0,0,0,.25);}
.login-logo{font-size:34px; font-weight:800; text-align:center; color:var(--green); margin-bottom:6px; letter-spacing:6px;}
.login-tabs{display:flex; margin:18px 0 14px; border-bottom:1px solid var(--line);}
.login-tabs .tab{flex:1; padding:8px 0; font-size:15px; color:var(--sub); border-bottom:2px solid transparent;}
.login-tabs .tab.active{color:var(--green); border-color:var(--green); font-weight:600;}
.login-card form{display:flex; flex-direction:column; gap:12px;}
.inp{height:40px; border-radius:8px; background:#f2f3f5; padding:0 12px; font-size:14px;}
.btn-primary{height:42px; border-radius:8px; background:var(--green); color:#fff; font-size:15px;}
.btn-primary:hover{background:var(--green-d);}
.btn-primary:disabled{opacity:.6;}
.form-tip{font-size:12px; color:var(--sub); text-align:center;}

/* ---------- 主布局 ---------- */
#screen-main{display:flex;}
.rail{width:64px; background:var(--rail); display:flex; flex-direction:column; align-items:center; padding:10px 0; z-index:3;}
.rail-avatar{width:42px; height:42px; border-radius:8px; background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:600; cursor:pointer; overflow:hidden; margin-bottom:8px;}
.rail-avatar img{width:100%; height:100%; object-fit:cover;}
.rail-nav{flex:1; display:flex; flex-direction:column; gap:6px; margin-top:6px;}
.rail-item{width:44px; height:44px; border-radius:10px; color:#aaa; font-size:21px; display:flex; align-items:center; justify-content:center; position:relative;}
.rail-item:hover{background:#3c3c3c; color:#fff;}
.rail-item.active{background:var(--green); color:#fff;}
.rail-item .badge{position:absolute; top:2px; right:0; min-width:16px; height:16px; border-radius:8px; background:var(--red); color:#fff; font-size:10px; line-height:16px; text-align:center; padding:0 4px;}
.rail-logout{color:#777;}
.panel{width:var(--panel-w); background:#fff; border-right:1px solid var(--line); display:flex; flex-direction:column; z-index:2;}
.panel-head{height:52px; flex:0 0 52px; display:flex; align-items:center; justify-content:space-between; padding:0 14px; border-bottom:1px solid var(--line);}
.panel-head h2{font-size:17px;}
.panel-head .ph-btn{width:32px; height:32px; border-radius:8px; background:#f2f3f5; font-size:15px; display:flex; align-items:center; justify-content:center;}
.panel-head .ph-btn:hover{background:#e4e6e8;}
.panel-body{flex:1; overflow-y:auto;}
.list-item{display:flex; align-items:center; padding:10px 14px; gap:10px; cursor:pointer; border-bottom:1px solid #f2f2f2;}
.list-item:hover{background:#f5f6f7;}
.list-item.active{background:#e9fbf2;}
.avatar{width:40px; height:40px; min-width:40px; border-radius:6px; background:#e3e7ea; color:#7a8794; display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:600; overflow:hidden; position:relative;}
.avatar img{width:100%; height:100%; object-fit:cover;}
.avatar .dot-on{position:absolute; right:-1px; bottom:-1px; width:11px; height:11px; border-radius:50%; background:#22c55e; border:2px solid #fff;}
.li-main{flex:1; min-width:0;}
.li-title{display:flex; justify-content:space-between; align-items:center;}
.li-name{font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
/* 在线绿点（显示在用户名后面） */
.online-dot{display:inline-block; width:8px; height:8px; border-radius:50%; background:#22c55e;
  margin-left:5px; vertical-align:middle; box-shadow:0 0 0 1px rgba(34,197,94,.25);}
.chat-title .online-dot{width:9px; height:9px; margin-left:7px;}
.chat-title small{color:var(--sub); font-weight:400; margin-left:6px; font-size:12px;}
.li-time{font-size:11px; color:var(--sub);}
.li-preview{font-size:12px; color:var(--sub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px;}
.list-note{padding:20px; text-align:center; color:var(--sub); font-size:13px;}
.searchbar{padding:10px 14px;}
.searchbar input{width:100%; height:34px; background:#f2f3f5; border-radius:8px; padding:0 12px; font-size:13px;}
.section-tag{padding:8px 14px 4px; font-size:12px; color:var(--sub);}

/* ---------- 聊天区 ---------- */
.chatarea{flex:1; min-width:0; display:flex; flex-direction:column; background:var(--bg);}
.chat-empty{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--sub);}
.empty-logo{font-size:64px; font-weight:800; color:#d8e8df; margin-bottom:14px;}
.chat-empty p{font-size:14px; line-height:2; text-align:center;}
.chatwin{flex:1; display:flex; flex-direction:column; min-width:0;}
.chat-head{height:52px; flex:0 0 52px; background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 16px;}
.chat-title{font-size:16px; font-weight:600;}
.chat-title small{color:var(--sub); font-weight:400; margin-left:8px;}
.chat-actions{display:flex; gap:6px;}
.chat-body{flex:1; overflow-y:auto; padding:14px 18px; scroll-behavior:smooth;}
.msg-row{display:flex; margin-bottom:14px; align-items:flex-end; gap:8px;}
.msg-row.mine{flex-direction:row-reverse;}
.msg-avatar{width:36px; height:36px; min-width:36px; font-size:15px;}
.bubble{max-width:62%; padding:9px 12px; border-radius:10px; background:var(--bubble); font-size:14px; line-height:1.55; word-break:break-word; white-space:pre-wrap; box-shadow:0 1px 1px rgba(0,0,0,.04);}
.mine .bubble{background:var(--mine);}
.bubble.time{margin:0 auto; background:none; box-shadow:none; font-size:11px; color:#b5b5b5; text-align:center; max-width:100%; padding:6px 0;}
.file-bubble{display:flex; align-items:center; gap:10px; max-width:230px; cursor:pointer;}
.file-bubble .fb-ico{font-size:30px;}
.file-bubble .fb-name{font-size:13px; word-break:break-all; max-width:140px; max-height:2.4em; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.file-bubble .fb-size{font-size:11px; color:var(--sub); margin-top:2px;}
.bubble img{max-width:220px; max-height:300px; border-radius:8px; cursor:zoom-in;}
.audio-bubble{display:flex; align-items:center; gap:8px; min-width:120px;}
.audio-bubble audio{height:32px; width:180px;}
.bubble.progress{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--sub);}
.progress-bar{width:110px; height:6px; background:#ddd; border-radius:3px; overflow:hidden;}
.progress-bar i{display:block; height:100%; width:0; background:var(--green);}
.msg-sys{text-align:center; font-size:12px; color:#aaa; margin:10px 0;}
.load-more{display:block; margin:4px auto 10px; color:var(--blue); font-size:12px;}

/* 输入区 */
.chat-input{border-top:1px solid var(--line); background:#fff; padding:8px 14px; display:flex; flex-direction:column; position:relative;}
.chat-toolbar{display:flex; align-items:center; gap:8px; padding-bottom:6px; flex-wrap:wrap;}
.tb-btn{width:30px; height:30px; border-radius:6px; font-size:16px; background:#f2f3f5; display:flex; align-items:center; justify-content:center;}
.tb-btn:hover{background:#e4e6e8;}
.tb-btn.danger{color:var(--red);}
.chat-input textarea{width:100%; height:34px; max-height:110px; resize:none; font-size:14px; line-height:1.5; padding:7px 0;}
.btn-send{position:absolute; right:14px; bottom:12px; background:var(--green); color:#fff; border-radius:6px; font-size:13px; padding:6px 16px; display:none;}
.btn-send.show{display:block;}
.recorder{display:flex; align-items:center; gap:6px; background:#fff2f2; border:1px solid #ffd6d6; border-radius:8px; padding:3px 10px;}
.rec-dot{width:8px; height:8px; border-radius:50%; background:var(--red); animation:blink 1s infinite;}
@keyframes blink{50%{opacity:.2;}}
.rec-review{display:flex; align-items:center; gap:8px; background:#f2f3f5; border-radius:8px; padding:3px 8px;}
.small-btn{background:var(--green); color:#fff; font-size:12px; border-radius:5px; padding:4px 10px;}
.small-btn.ghost{background:#e4e6e8; color:#333;}
.small-btn.primary{background:var(--green); color:#fff;}
.small-btn.danger{background:var(--red); color:#fff;}

/* ---------- 弹窗 ---------- */
.mask{position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:50; display:flex; align-items:center; justify-content:center;}
.modal{background:#fff; border-radius:12px; width:min(480px,92vw); max-height:84vh; display:flex; flex-direction:column; overflow:hidden;}
.modal-head{padding:16px 20px 12px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line);}
.modal-head h3{font-size:16px;}
.modal-body{padding:16px 20px; overflow-y:auto;}
.modal-foot{padding:12px 20px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:10px;}
.modal-close{font-size:18px; color:var(--sub);}
.frm{display:flex; flex-direction:column; gap:12px;}
.frm input,.frm textarea,.frm select{width:100%; border:1px solid var(--line); border-radius:8px; padding:9px 12px; font-size:14px; background:#fff;}
.frm textarea{min-height:70px; resize:vertical;}
.pick-list{display:flex; flex-direction:column;}
.pick-item{display:flex; align-items:center; gap:10px; padding:8px 2px; border-bottom:1px solid #f2f2f2; cursor:pointer;}
.pick-item .ck{width:20px; height:20px; border:2px solid #ccc; border-radius:50%; margin-left:auto;}
.pick-item.on .ck{background:var(--green); border-color:var(--green);}
.pick-item.on .ck::after{content:'✓'; color:#fff; font-size:12px; display:flex; justify-content:center; line-height:16px;}

/* 用户卡片 */
.user-card{display:flex; flex-direction:column; align-items:center; padding:8px 0 4px; gap:6px;}
.user-card .avatar{width:72px; height:72px; font-size:30px; border-radius:12px;}
.user-card h3{font-size:17px;}
.user-card .meta{font-size:13px; color:var(--sub); word-break:break-all; text-align:center;}

/* ---------- 朋友圈 ---------- */
.post-box{background:#fff; border-bottom:1px solid #f0f0f0; padding:14px 16px;}
.post-head{display:flex; gap:10px; margin-bottom:8px;}
.post-head .avatar{width:38px; height:38px; min-width:38px; font-size:16px;}
.post-head .pn{font-size:14px; font-weight:600;}
.post-time{font-size:11px; color:#b0b0b0; margin-top:2px;}
.post-text{font-size:14px; line-height:1.6; margin-bottom:8px; white-space:pre-wrap; word-break:break-word;}
.post-imgs{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px;}
.post-imgs img{width:31%; aspect-ratio:1; object-fit:cover; border-radius:6px; cursor:zoom-in;}
.post-imgs .single{width:auto; max-width:70%; aspect-ratio:auto; max-height:240px;}
.post-actions{display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--sub); border-top:1px solid #f5f5f5; padding-top:8px;}
.post-likes{color:#576b95; margin-bottom:6px;}
.post-comments{background:#f5f6f7; border-radius:6px; padding:6px 8px; font-size:13px; line-height:1.7; margin-bottom:6px;}
.post-comments .cm{word-break:break-word;}
.cm-name{color:#576b95;}
.post-cm-form{display:flex; gap:6px; margin-top:4px;}
.post-cm-form input{flex:1; background:#f2f3f5; border-radius:6px; padding:5px 10px; font-size:12px; height:28px;}
.post-cm-form button{background:var(--green); color:#fff; font-size:12px; border-radius:6px; padding:0 12px;}
.publish-bar{display:flex; align-items:center; gap:8px; padding:8px 10px; border-bottom:1px solid var(--line);}
.publish-bar input{flex:1; background:#f2f3f5; border-radius:8px; padding:8px 12px; font-size:13px;}

/* ---------- 图片选择 ---------- */
.img-picker{display:flex; gap:8px; flex-wrap:wrap;}
.img-picker .box{width:70px; height:70px; border-radius:8px; overflow:hidden; position:relative; border:1px solid var(--line);}
.img-picker .box img{width:100%; height:100%; object-fit:cover;}
.img-picker .box .del{position:absolute; top:0; right:0; background:rgba(0,0,0,.55); color:#fff; font-size:12px; width:18px; height:18px; border-radius:0 0 0 8px; display:flex; align-items:center; justify-content:center;}
.img-picker .add{width:70px; height:70px; border:1px dashed #ccc; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:24px; color:#999; cursor:pointer;}

/* ---------- 视频通话 ---------- */
.overlay{position:fixed; inset:0; z-index:80; background:#111; display:flex; align-items:center; justify-content:center;}
.video-box{width:100%; height:100%; position:relative; display:flex; align-items:center; justify-content:center; flex-direction:column;}
#remoteVideo{width:100%; height:100%; object-fit:contain;}
#localVideo{position:absolute; right:16px; top:16px; width:180px; height:auto; max-height:26vh; border-radius:10px; border:2px solid #444; object-fit:cover; z-index:3; background:#222;}
.video-info{position:absolute; top:20px; left:0; right:0; text-align:center; color:#fff; font-size:16px; text-shadow:0 1px 6px #000; z-index:3;}
.video-controls{position:absolute; bottom:34px; left:50%; transform:translateX(-50%); display:flex; gap:20px; z-index:5;}
.vc-btn{width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.18); color:#fff; font-size:22px; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px);}
.vc-btn:hover{background:rgba(255,255,255,.3);}
.vc-btn.danger{background:var(--red);}
.vc-btn.off{background:rgba(255,255,255,.4);}
.ring-card{background:#fff; border-radius:16px; padding:34px 44px; text-align:center; display:flex; flex-direction:column; gap:14px; align-items:center;}
.ring-avatar{width:80px; height:80px; border-radius:50%; background:var(--green); color:#fff; font-size:40px; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.ring-avatar img{width:100%; height:100%; object-fit:cover;}
.ring-card p{font-size:16px;}
.ring-btns{display:flex; gap:22px; margin-top:6px;}
.ring-btn{width:74px; height:40px; border-radius:20px; color:#fff; font-size:14px;}
.ring-reject{background:#c9c9c9;}
.ring-accept{background:var(--green);}

/* ---------- 其他 ---------- */
.lightbox{position:fixed; inset:0; z-index:90; background:rgba(0,0,0,.92); display:flex; align-items:center; justify-content:center; cursor:zoom-out;}
.lightbox img{max-width:94vw; max-height:94vh;}
#toast{position:fixed; top:70px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,.78); color:#fff; padding:10px 22px; border-radius:24px; font-size:14px; z-index:100; opacity:0; pointer-events:none; transition:.25s;}
#toast.show{opacity:1;}
.ctxmenu{position:fixed; z-index:95; background:#fff; border-radius:10px; box-shadow:0 6px 24px rgba(0,0,0,.18); padding:6px; font-size:14px; min-width:120px;}
.ctxmenu button{display:block; width:100%; text-align:left; padding:8px 12px; border-radius:6px;}
.ctxmenu button:hover{background:#f2f3f5;}
.ctxmenu button.danger{color:var(--red);}
.small-muted{font-size:12px; color:var(--sub);}
.badge-red{display:inline-block; min-width:16px; height:16px; background:var(--red); color:#fff; font-size:10px; border-radius:8px; text-align:center; line-height:16px; padding:0 4px;}
.spin{display:inline-block; width:14px; height:14px; border:2px solid #ccc; border-top-color:var(--green); border-radius:50%; animation:rot .7s linear infinite;}
@keyframes rot{to{transform:rotate(360deg);}}

/* ================= 手机端适配（聊天端专用） ================= */
.tabbar{display:none;}
.back-btn{display:none;}

@media (max-width: 820px) {
  html,body{height:100%; overflow:hidden; -webkit-text-size-adjust:100%;}
  #screen-main{position:relative;}
  /* 左侧导航栏在手机端隐藏，改用底部导航 */
  .rail{display:none;}
  .panel{width:100%; flex:1; border-right:none; padding-bottom:calc(62px + env(safe-area-inset-bottom));}
  /* 聊天窗口变成整屏浮层，点会话滑入，返回滑出 */
  .chatarea{position:fixed; inset:0; z-index:30; transform:translateX(100%); transition:transform .22s ease; background:var(--bg);}
  body.chat-open .chatarea{transform:translateX(0);}
  .back-btn{display:flex;}
  .chat-head{padding:0 8px 0 4px; padding-top:env(safe-area-inset-top); height:calc(52px + env(safe-area-inset-top));}
  .chat-title{font-size:16px;}
  /* 输入区：适配刘海屏与键盘 */
  .chat-input{padding:6px 10px calc(6px + env(safe-area-inset-bottom));}
  .chat-toolbar .tb-btn{width:36px; height:36px; font-size:19px;}
  .chat-input textarea{font-size:16px; padding-right:76px; max-height:96px;}
  .btn-send{font-size:14px; padding:7px 16px; right:10px; bottom:calc(9px + env(safe-area-inset-bottom));}
  .bubble{max-width:74%; font-size:15px;}
  .bubble img{max-width:60vw; max-height:40vh;}
  .file-bubble{max-width:70vw;}
  .audio-bubble audio{width:44vw;}
  .msg-avatar{width:34px; height:34px; min-width:34px;}
  .chat-body{padding:10px 12px; -webkit-overflow-scrolling:touch;}
  .load-more{padding:6px 0;}
  /* 底部导航 */
  .tabbar{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:25;
    background:#f7f7f7; border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom);}
  /* 未进入主界面（登录页）时不显示底部导航 */
  #screen-main.hidden ~ #tabbar{display:none;}
  .tabbar-item{flex:1; height:54px; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:2px; font-size:11px; color:#7a7e83;}
  .tabbar-item .ti{font-size:21px; line-height:22px;}
  .tabbar-item.active{color:var(--green);}
  .tabbar-item:active{background:#ececec;}
  /* 列表项与触控尺寸 */
  .list-item{padding:12px 14px;}
  .panel-head{height:48px; flex:0 0 48px;}
  .searchbar{padding:8px 12px;}
  .publish-bar{padding:8px;}
  .post-imgs img{width:31%;}
  .post-box{padding:12px;}
  /* 弹窗铺满宽度、按钮易点 */
  .login-card{width:88vw; padding:26px 22px 22px;}
  .modal{width:94vw; max-height:80vh;}
  .small-btn{padding:8px 14px; font-size:13px;}
  .pick-item{padding:11px 2px;}
  .modal-foot{padding:10px 14px;}
  /* 视频通话竖屏布局 */
  #localVideo{width:110px; right:10px; top:calc(10px + env(safe-area-inset-top));}
  .video-controls{bottom:calc(24px + env(safe-area-inset-bottom)); gap:16px;}
  .vc-btn{width:56px; height:56px; font-size:24px;}
  .ring-card{padding:28px 30px;}
  .ctxmenu{font-size:15px;}
}