/* 普日内部通讯 · 微信风格样式 */
:root{
  --wx-bg:#ededed;          /* 微信背景灰 */
  --wx-nav:#ededed;
  --wx-green:#07c160;       /* 微信绿（按钮/选中） */
  --wx-bubble-me:#95ec69;   /* 我的气泡 */
  --wx-bubble-other:#ffffff;
  --wx-line:#d9d9d9;
  --wx-text:#191919;
  --wx-sub:#b2b2b2;
  --wx-tab:#f7f7f7;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue","Microsoft YaHei",sans-serif;
  background:var(--wx-bg);color:var(--wx-text);font-size:16px;
}
.page{position:fixed;inset:0;background:var(--wx-bg)}
.hidden{display:none!important}

/* ───────── 登录 ───────── */
#login{display:flex;flex-direction:column;align-items:center;padding-top:14vh;background:#fff}
.login-logo{margin-bottom:14px}
.logo-box{
  width:74px;height:74px;border-radius:18px;background:var(--wx-green);color:#fff;
  font-size:38px;font-weight:600;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(7,193,96,.28)
}
.login-title{font-size:20px;font-weight:500;margin-bottom:34px;color:#333}
.login-form{width:82%;max-width:340px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;color:#888;margin-bottom:6px}
.field input{
  width:100%;height:46px;border:none;border-bottom:1px solid var(--wx-line);
  font-size:16px;background:transparent;outline:none
}
.field input:focus{border-bottom-color:var(--wx-green)}
.btn-green{
  width:100%;height:46px;border:none;border-radius:6px;background:var(--wx-green);
  color:#fff;font-size:17px;margin-top:22px;letter-spacing:2px
}
.btn-green:active{opacity:.85}
.err{color:#fa5151;font-size:13px;margin-top:14px;text-align:center;min-height:18px}

/* ───────── 导航栏 ───────── */
.navbar{
  height:calc(48px + var(--safe-t));padding-top:var(--safe-t);
  background:var(--wx-nav);border-bottom:1px solid var(--wx-line);
  display:flex;align-items:center;justify-content:center;position:relative;flex:none
}
.nav-title{font-size:17px;font-weight:500}
.nav-right{position:absolute;right:10px;display:flex;gap:14px;align-items:center}
.nav-ico{font-size:19px;padding:4px}

/* ───────── 会话列表 ───────── */
#main{display:flex;flex-direction:column}
.view{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
.chat-list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;background:#fff}
.chat-item{display:flex;align-items:center;padding:11px 14px;border-bottom:1px solid #f0f0f0;position:relative}
.chat-item:active{background:#e8e8e8}
.avatar{
  width:46px;height:46px;border-radius:6px;background:#c8c8c8;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:17px;flex:none
}
.avatar.big{width:60px;height:60px;border-radius:8px;font-size:22px}
.ci-body{flex:1;min-width:0;margin-left:12px}
.ci-top{display:flex;justify-content:space-between;align-items:baseline}
.ci-name{font-size:16px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:62%}
.ci-time{font-size:11px;color:var(--wx-sub);flex:none}
.ci-preview{font-size:13px;color:#999;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge{
  position:absolute;right:14px;bottom:12px;min-width:18px;height:18px;padding:0 5px;
  background:#fa5151;color:#fff;border-radius:9px;font-size:11px;
  display:flex;align-items:center;justify-content:center
}
.dot-online{width:8px;height:8px;border-radius:50%;background:var(--wx-green);margin-right:6px;flex:none}
.empty{text-align:center;color:#bbb;font-size:14px;padding:60px 0}
#conn-dot{width:9px;height:9px;border-radius:50%;background:#ccc}
#conn-dot.on{background:var(--wx-green)}

/* ───────── 底部标签 ───────── */
.tabbar{
  height:calc(52px + var(--safe-b));padding-bottom:var(--safe-b);
  background:var(--wx-tab);border-top:1px solid var(--wx-line);
  display:flex;flex:none
}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;color:#7a7e83}
.tab.active{color:var(--wx-green)}
.tab-ico{font-size:20px;line-height:1;filter:grayscale(1);opacity:.55}
.tab.active .tab-ico{filter:none;opacity:1}
.tab-txt{font-size:11px;margin-top:2px}
.tab-badge{
  position:absolute;top:4px;right:calc(50% - 22px);min-width:16px;height:16px;padding:0 4px;
  background:#fa5151;color:#fff;border-radius:8px;font-size:10px;
  display:flex;align-items:center;justify-content:center
}

/* ───────── 我 ───────── */
.me-card{background:#fff;display:flex;align-items:center;padding:22px 18px;gap:14px;border-bottom:1px solid #f0f0f0}
.me-name{font-size:18px;font-weight:500}
.me-id{font-size:13px;color:#999;margin-top:4px}
.me-list{background:#fff;margin-top:10px}
.me-item{padding:15px 18px;font-size:16px;color:#333;border-bottom:1px solid #f0f0f0}

/* ───────── 聊天 ───────── */
.chat-page{display:flex;flex-direction:column;background:var(--wx-bg)}
.back{position:absolute;left:10px;font-size:30px;line-height:1;padding:0 8px;color:#333}
.msg-area{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 12px 4px}
.msg-row{display:flex;margin-bottom:14px;align-items:flex-start}
.msg-row.me{flex-direction:row-reverse}
.msg-row .avatar{width:38px;height:38px;font-size:15px}
.bubble{
  max-width:calc(100% - 110px);margin:0 9px;padding:9px 12px;border-radius:5px;
  font-size:16px;line-height:1.42;word-break:break-word;white-space:pre-wrap;position:relative
}
.msg-row.other .bubble{background:var(--wx-bubble-other)}
.msg-row.me .bubble{background:var(--wx-bubble-me)}
.msg-row.other .bubble::before{
  content:'';position:absolute;left:-5px;top:12px;width:0;height:0;
  border:5px solid transparent;border-right-color:var(--wx-bubble-other);border-left:0
}
.msg-row.me .bubble::before{
  content:'';position:absolute;right:-5px;top:12px;width:0;height:0;
  border:5px solid transparent;border-left-color:var(--wx-bubble-me);border-right:0
}
.sys-tip{text-align:center;font-size:12px;color:#999;margin:10px 0}

/* 语音条 */
.voice-bubble{display:flex;align-items:center;gap:8px;min-width:80px;cursor:pointer}
.voice-wave{font-size:17px;color:#333}
.voice-sec{font-size:13px;color:#666;margin-left:auto}
.voice-bubble.playing .voice-wave{animation:blink .8s infinite}
@keyframes blink{50%{opacity:.35}}

/* 输入栏 */
.inputbar{
  flex:none;display:flex;align-items:center;gap:8px;padding:8px 10px;
  padding-bottom:calc(8px + var(--safe-b));background:var(--wx-tab);border-top:1px solid var(--wx-line)
}
.ib-ico{font-size:22px;padding:2px 4px;flex:none}
.text-wrap{flex:1}
.text-wrap input{
  width:100%;height:38px;border:none;border-radius:5px;background:#fff;
  padding:0 10px;font-size:16px;outline:none
}
.hold-wrap{flex:1}
#hold-btn{
  width:100%;height:38px;border:none;border-radius:5px;background:#fff;
  font-size:15px;color:#333
}
#hold-btn.recording{background:#d5d5d5}
.send-btn{
  height:34px;padding:0 16px;border:none;border-radius:5px;background:var(--wx-green);
  color:#fff;font-size:15px;flex:none
}

/* ───────── 通话 ───────── */
.call-page{background:#111;color:#fff;overflow:hidden}
.remote-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.local-video{
  position:absolute;right:12px;top:calc(12px + var(--safe-t));width:96px;height:132px;
  object-fit:cover;border-radius:8px;background:#222;z-index:3
}
.call-top{
  position:absolute;top:calc(20px + var(--safe-t));left:0;right:0;text-align:center;z-index:2;
  text-shadow:0 1px 6px rgba(0,0,0,.6)
}
.call-peer{font-size:20px;font-weight:500}
.call-status{font-size:13px;opacity:.8;margin-top:6px}
.call-actions{
  position:absolute;bottom:calc(38px + var(--safe-b));left:0;right:0;
  display:flex;justify-content:center;gap:28px;z-index:4
}
.call-btn{
  width:64px;height:64px;border-radius:50%;border:none;background:#333;color:#fff;font-size:24px
}
.call-btn.small{width:54px;height:54px;font-size:21px}
.call-btn.hangup{background:#fa5151;font-size:16px}

/* 来电 */
.incoming{background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:20}
.incoming-box{
  width:78%;max-width:320px;background:#fff;border-radius:14px;padding:26px 20px;text-align:center;color:#191919
}
.inc-name{font-size:19px;font-weight:500;margin:12px 0 6px}
.inc-tip{font-size:14px;color:#888}
.inc-btns{display:flex;justify-content:space-around;margin-top:26px}
.round-btn{
  width:74px;height:44px;border-radius:22px;border:none;color:#fff;font-size:16px
}
.round-btn.red{background:#fa5151}
.round-btn.green{background:var(--wx-green)}

/* ───────── 新的朋友 ───────── */
.search-bar{padding:10px 12px;background:var(--wx-tab);flex:none}
.search-bar input{
  width:100%;height:36px;border:none;border-radius:5px;background:#fff;
  padding:0 12px;font-size:15px;outline:none
}
.list-block{background:#fff;flex:none}
.section-title{padding:14px 14px 6px;font-size:13px;color:#888;background:var(--wx-bg)}
.req-item{display:flex;align-items:center;padding:11px 14px;border-bottom:1px solid #f0f0f0}
.req-body{flex:1;min-width:0;margin-left:12px}
.req-name{font-size:16px}
.req-note{font-size:12px;color:#999;margin-top:3px}
.req-btns{display:flex;gap:8px;flex:none}
.mini-btn{
  height:30px;padding:0 14px;border:none;border-radius:4px;font-size:14px
}
.mini-btn.ok{background:var(--wx-green);color:#fff}
.mini-btn.no{background:#f2f2f2;color:#333}
.mini-btn.done{background:#f2f2f2;color:#999}
.entry-item .badge{position:static;margin-left:8px}