/* =========================================================
   云信 移动端样式  （在设计稿基础上整体缩小一档 GUI）
   主色 #2B6CF6 · 底色 #F4F6F9
   ========================================================= */
:root{
  --blue:#2B6CF6; --blue-dark:#1F5BD8;
  --bg:#F4F6F9; --card:#FFFFFF;
  --text:#161A20; --sub:#8B93A1; --muted:#B6BDC8;
  --line:#EEF1F5; --input:#EDF0F4; --green:#2FB170;
  --shadow:0 6px 18px rgba(43,108,246,.22);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;}
body{
  font-family:"Helvetica Neue",-apple-system,"PingFang SC","Microsoft YaHei",Inter,sans-serif;
  -webkit-font-smoothing:antialiased; background:var(--bg); color:var(--text);
  font-size:14px; overscroll-behavior:none;
}
button{font-family:inherit;}
::-webkit-scrollbar{display:none;}
.trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
img{max-width:100%;}

/* App 容器：限制在手机宽度内居中（桌面预览也好看） */
#app{max-width:460px;margin:0 auto;height:100%;background:var(--bg);
  display:flex;flex-direction:column;position:relative;overflow:hidden;}

/* ---------- 通用顶部安全间距 ---------- */
.safe-top{height:env(safe-area-inset-top,0);}

/* ---------- 视图切换 ---------- */
.view{flex:1;display:none;flex-direction:column;min-height:0;}
.view.active{display:flex;}

/* ---------- 顶部大标题栏 ---------- */
.topbar{flex-shrink:0;background:#fff;padding:18px 16px 10px;border-bottom:1px solid var(--line);}
.topbar .row{display:flex;align-items:center;justify-content:space-between;padding:2px 2px 10px;}
.topbar .title{font-size:23px;font-weight:700;letter-spacing:.01em;}
.icon-btn{width:34px;height:34px;border-radius:50%;background:var(--bg);border:none;
  display:flex;align-items:center;justify-content:center;cursor:pointer;}
.search{height:34px;background:var(--input);border-radius:10px;display:flex;align-items:center;gap:7px;padding:0 11px;}
.search input{flex:1;border:none;background:transparent;outline:none;font-size:13.5px;color:var(--text);}
.search input::placeholder{color:#9AA1AE;}

/* ---------- 列表 ---------- */
.scroll{flex:1;overflow-y:auto;background:#fff;-webkit-overflow-scrolling:touch;}
.cell{display:flex;align-items:center;gap:11px;padding:11px 14px;cursor:pointer;background:#fff;transition:background .15s;}
.cell:active{background:#F2F5F9;}
.cell .divider,.divider{height:1px;background:var(--line);margin-left:65px;}
.avatar{width:42px;height:42px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;color:#fff;font-size:15px;font-weight:600;overflow:hidden;background-size:cover;background-position:center;}
.avatar.sq{border-radius:13px;}
.cell .main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.cell .line1{display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
.cell .name{font-size:15px;font-weight:600;}
.cell .time{font-size:11px;color:var(--muted);flex-shrink:0;}
.cell .line2{display:flex;justify-content:space-between;align-items:center;gap:8px;}
.cell .preview{flex:1;font-size:12.5px;color:var(--sub);}
.badge{min-width:17px;height:17px;padding:0 5px;border-radius:9px;background:var(--blue);color:#fff;
  font-size:10.5px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.badge.red{background:#D26A6A;}

/* 通讯录分组字母 */
.group-label{padding:5px 14px 4px;background:var(--bg);font-size:12px;font-weight:600;color:var(--sub);}

/* ---------- 底部 Tab ---------- */
.tabbar{flex-shrink:0;background:#fff;border-top:1px solid var(--line);display:flex;
  padding:6px 0 calc(14px + env(safe-area-inset-bottom,0));}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;position:relative;}
.tab svg path,.tab svg rect,.tab svg circle{stroke:var(--muted);}
.tab .lbl{font-size:10px;color:var(--muted);}
.tab.on svg path,.tab.on svg rect,.tab.on svg circle{stroke:var(--blue);}
.tab.on .lbl{color:var(--blue);font-weight:600;}
.tab .dot{position:absolute;top:-2px;right:50%;transform:translateX(20px);min-width:16px;height:16px;
  padding:0 4px;border-radius:8px;background:#D26A6A;color:#fff;font-size:10px;display:none;
  align-items:center;justify-content:center;}
.tab .dot.show{display:flex;}

/* ---------- 我的 ---------- */
.profile-card{background:#fff;padding:16px;display:flex;align-items:center;gap:14px;}
.profile-card .avatar{width:56px;height:56px;border-radius:17px;font-size:21px;box-shadow:var(--shadow);}
.profile-card .pname{font-size:19px;font-weight:700;}
.profile-card .pno{font-size:12px;color:var(--sub);margin-top:5px;}
.block{background:#fff;}
.block + .block{margin-top:9px;}
.row-item{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;}
.row-item .ico{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.row-item .label{flex:1;font-size:15px;}
.row-item .val{font-size:13px;color:var(--sub);margin-right:6px;}
.chev{width:7px;height:13px;flex-shrink:0;}

/* ---------- 聊天对话 ---------- */
.chat-head{flex-shrink:0;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  padding:12px 6px;border-bottom:1px solid var(--line);display:flex;align-items:center;}
.chat-head .back{width:38px;height:38px;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.chat-head .ctitle{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;}
.chat-head .cname{font-size:15.5px;font-weight:600;}
.chat-head .cstatus{font-size:11px;color:var(--green);}
.chat-body{flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:10px;background:var(--bg);}
.time-sep{align-self:center;font-size:11px;color:var(--muted);background:rgba(0,0,0,.04);padding:3px 9px;border-radius:8px;}
.bubble{max-width:74%;padding:9px 13px;border-radius:17px;font-size:14.5px;line-height:1.45;word-break:break-word;}
.bubble.them{align-self:flex-start;background:#fff;border:1px solid var(--line);border-top-left-radius:6px;}
.bubble.me{align-self:flex-end;background:var(--blue);color:#fff;border-top-right-radius:6px;}
.bubble.img{padding:4px;background:none;border:none;max-width:60%;}
.bubble.img img{border-radius:14px;display:block;cursor:pointer;}
.bubble.me.img{align-self:flex-end;}
.bubble.them.img{align-self:flex-start;}

.chat-input{flex-shrink:0;background:#fff;border-top:1px solid var(--line);
  padding:8px 10px calc(14px + env(safe-area-inset-bottom,0));display:flex;align-items:flex-end;gap:9px;}
.chat-input .plus{width:30px;height:30px;flex-shrink:0;display:flex;align-items:center;justify-content:center;cursor:pointer;margin-bottom:3px;}
.chat-input textarea{flex:1;min-height:36px;max-height:120px;background:#F1F3F7;border:none;border-radius:18px;
  padding:8px 14px;font-size:14.5px;outline:none;resize:none;font-family:inherit;line-height:1.4;}
.send-btn{width:36px;height:36px;flex-shrink:0;border:none;border-radius:50%;background:var(--blue);
  display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 3px 10px rgba(43,108,246,.3);}
.send-btn:disabled{background:#C2C9D2;box-shadow:none;}

/* ---------- 空状态 ---------- */
.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--muted);padding:40px;text-align:center;}
.empty svg{opacity:.5;}
.empty .t{font-size:14px;}

/* ---------- 弹层 ---------- */
.mask{position:fixed;inset:0;background:rgba(20,26,32,.42);display:none;align-items:flex-end;
  justify-content:center;z-index:50;}
.mask.show{display:flex;}
.sheet{width:100%;max-width:460px;background:#fff;border-radius:20px 20px 0 0;padding:20px 18px calc(22px + env(safe-area-inset-bottom,0));animation:up .25s ease;}
@keyframes up{from{transform:translateY(100%);}to{transform:translateY(0);}}
.sheet h3{margin:0 0 16px;font-size:17px;font-weight:700;text-align:center;}
.field{margin-bottom:13px;}
.field label{display:block;font-size:12.5px;color:var(--sub);margin-bottom:6px;}
.field input{width:100%;height:46px;background:var(--bg);border:1px solid transparent;border-radius:12px;
  padding:0 14px;font-size:15px;outline:none;color:var(--text);}
.field input:focus{border-color:var(--blue);background:#fff;}
.btn{width:100%;height:48px;border:none;border-radius:13px;background:var(--blue);color:#fff;
  font-size:15px;font-weight:600;letter-spacing:.04em;cursor:pointer;box-shadow:0 6px 16px rgba(43,108,246,.26);}
.btn:disabled{opacity:.55;box-shadow:none;}
.btn.ghost{background:var(--bg);color:var(--text);box-shadow:none;margin-top:9px;}
.btn.danger{background:#fff;color:#D26A6A;box-shadow:none;}
.row-actions{display:flex;gap:10px;}
.row-actions .btn{flex:1;}

/* 搜索结果卡 */
.result-card{display:flex;align-items:center;gap:12px;background:var(--bg);border-radius:14px;padding:12px;margin-bottom:14px;}
.result-card .avatar{width:46px;height:46px;}
.result-card .info{flex:1;min-width:0;}
.result-card .rn{font-size:15px;font-weight:600;}
.result-card .re{font-size:12px;color:var(--sub);margin-top:3px;}

/* Toast */
#toast{position:fixed;left:50%;top:32%;transform:translateX(-50%);background:rgba(20,26,32,.86);
  color:#fff;padding:11px 18px;border-radius:11px;font-size:13.5px;z-index:99;opacity:0;
  transition:opacity .2s;pointer-events:none;max-width:80%;text-align:center;}
#toast.show{opacity:1;}

/* 大图预览 */
#viewer{position:fixed;inset:0;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;z-index:100;}
#viewer.show{display:flex;}
#viewer img{max-width:94%;max-height:90%;border-radius:6px;}

/* 加载态 */
.loading{flex:1;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px;}
.spinner{width:24px;height:24px;border:2.5px solid var(--line);border-top-color:var(--blue);border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}