/* 手机端聊天界面 - 微信风格 */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  background: #ededed;
  color: #191919;
  overflow: hidden;
  user-select: none;
}
.hidden { display: none !important; }

/* 加载页 */
.splash { position: fixed; inset: 0; background: linear-gradient(160deg,#07c160,#05a54f); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 100; color:#fff; }
.splash-logo { width: 72px; height: 72px; border-radius: 20px; background:#fff; color:#07c160; font-size: 38px; font-weight: 700; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 20px rgba(0,0,0,.2); }
.splash-title { margin-top: 14px; font-size: 18px; letter-spacing: 2px; }

/* 视图容器 */
.view { position: fixed; inset: 0; display: flex; flex-direction: column; }

/* 登录/注册 */
.auth-wrap { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding: 0 24px; overflow:auto; }
.auth-brand { text-align:center; margin-bottom: 26px; }
.auth-logo { width: 64px; height: 64px; border-radius: 18px; background:#07c160; color:#fff; font-size:32px; font-weight:700; display:flex; align-items:center; justify-content:center; margin:0 auto 12px; }
.auth-brand h1 { font-size: 22px; color:#1a1a1a; }
.auth-brand p { font-size: 13px; color:#999; margin-top:6px; }
.auth-card { width: 100%; max-width: 380px; background:#fff; border-radius: 14px; padding: 22px 20px; box-shadow:0 8px 30px rgba(0,0,0,.08); }
.auth-tabs { display:flex; margin-bottom: 18px; }
.auth-tabs .tab { flex:1; text-align:center; padding:8px 0; font-size:16px; color:#888; border-bottom:2px solid transparent; }
.auth-tabs .tab.active { color:#07c160; border-bottom-color:#07c160; font-weight:600; }
.field { margin-bottom: 14px; }
.field input { width:100%; height: 44px; border:1px solid #e0e0e0; border-radius: 8px; padding:0 12px; font-size:15px; outline:none; background:#fafafa; }
.field input:focus { border-color:#07c160; background:#fff; }
.btn-primary { width:100%; height:44px; border:none; border-radius:8px; background:#07c160; color:#fff; font-size:16px; font-weight:600; cursor:pointer; }
.btn-primary:active { background:#06a253; }
.auth-tip { min-height:20px; font-size:13px; color:#e64340; margin-top:10px; text-align:center; }
.auth-hint { margin-top: 18px; font-size: 12px; color: #aaa; }

/* 顶部栏 */
.topbar { height: 48px; background:#ededed; display:flex; align-items:center; justify-content:space-between; padding:0 8px 0 14px; border-bottom:1px solid #dcdcdc; flex:none; }
.topbar-title { font-size:17px; font-weight:600; }
.topbar-actions { display:flex; gap:8px; }
.icon-btn { width:34px; height:34px; border:none; background:#f5f5f5; border-radius:8px; font-size:15px; color:#333; cursor:pointer; }
.icon-btn:active { background:#e5e5e5; }

/* 面板 */
.pane { flex:1; display:flex; flex-direction:column; overflow:hidden; position:relative; }

/* 房间列表 */
.room-tools { display:flex; gap:8px; padding:10px 12px; background:#fff; border-bottom:1px solid #eee; }
.room-tools .input { flex:1; height:38px; border:1px solid #e0e0e0; border-radius:8px; padding:0 10px; font-size:14px; outline:none; }
.btn-mini { height:38px; padding:0 16px; border:none; background:#07c160; color:#fff; border-radius:8px; font-size:14px; cursor:pointer; }
.room-list { flex:1; overflow-y:auto; background:#fff; }
.room-item { display:flex; align-items:center; padding:14px 16px; border-bottom:1px solid #f0f0f0; cursor:pointer; }
.room-item:active { background:#f7f7f7; }
.room-avatar { width:44px; height:44px; border-radius:10px; background:#07c160; color:#fff; font-size:20px; font-weight:600; display:flex; align-items:center; justify-content:center; flex:none; }
.room-meta { flex:1; margin-left:12px; overflow:hidden; }
.room-name { font-size:16px; font-weight:500; }
.room-sub { font-size:12px; color:#999; margin-top:3px; }
.room-count { font-size:12px; color:#bbb; }
.pane-empty { text-align:center; color:#bbb; padding:40px 0; font-size:14px; }

/* 聊天窗口 */
.chat-head { height:48px; background:#ededed; display:flex; align-items:center; padding:0 6px; border-bottom:1px solid #dcdcdc; flex:none; }
.chat-head .icon-btn { font-size:22px; }
.chat-title { flex:1; font-size:17px; font-weight:600; text-align:center; }
.chat-online { font-size:12px; color:#999; margin-right:10px; }

.msg-list { flex:1; overflow-y:auto; padding:12px 10px; background:#ededed; }
.msg-loading { text-align:center; color:#999; font-size:12px; padding:8px; }
.msg-row { display:flex; margin-bottom:14px; align-items:flex-start; }
.msg-row.mine { flex-direction: row-reverse; }
.msg-avatar { width:40px; height:40px; border-radius:8px; background:#95ec69; color:#333; font-size:16px; font-weight:600; display:flex; align-items:center; justify-content:center; flex:none; }
.msg-row.mine .msg-avatar { background:#07c160; color:#fff; }
.msg-main { max-width: 72%; margin: 0 8px; }
.msg-name { font-size:11px; color:#999; margin-bottom:4px; }
.msg-row.mine .msg-name { text-align:right; }
.bubble { padding:9px 12px; border-radius:8px; font-size:15px; line-height:1.5; word-break:break-word; position:relative; background:#fff; }
.msg-row.mine .bubble { background:#95ec69; }
.bubble img { max-width: 220px; border-radius:6px; display:block; margin:2px 0; cursor:pointer; }
.bubble .voice-box { display:flex; align-items:center; gap:8px; cursor:pointer; padding:6px 4px; }
.bubble .voice-icon { font-size:20px; }
.bubble .voice-dur { font-size:13px; color:#666; }
.bubble .file-box { display:flex; align-items:center; gap:8px; color:#576b95; }
.msg-time { font-size:10px; color:#bbb; text-align:center; margin:6px 0; }

/* 输入区 */
.composer { background:#f7f7f7; border-top:1px solid #e0e0e0; padding:8px 8px 10px; flex:none; }
.composer-row { display:flex; align-items:center; gap:8px; }
.composer-btn { width:40px; height:40px; border:none; background:#fff; border-radius:8px; font-size:18px; color:#333; cursor:pointer; flex:none; }
.composer-btn:active { background:#efefef; }
.text-input { flex:1; height:40px; border:none; border-radius:8px; padding:0 12px; font-size:15px; outline:none; background:#fff; }
.btn-send { height:40px; padding:0 18px; border:none; background:#07c160; color:#fff; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; }
.btn-send:active { background:#06a253; }

.record-bar { margin-top:10px; }
.record-hint { text-align:center; color:#999; font-size:12px; margin-bottom:6px; }
.btn-record { width:100%; height:44px; border:2px solid #07c160; background:#fff; color:#07c160; border-radius:10px; font-size:15px; font-weight:600; cursor:pointer; }
.btn-record:active, .btn-record.recording { background:#07c160; color:#fff; }
.btn-cancel-rec { width:100%; height:34px; border:none; background:#f0f0f0; border-radius:8px; margin-top:6px; color:#666; font-size:13px; }

/* toast */
.toast { position: fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:rgba(0,0,0,.75); color:#fff; padding:10px 18px; border-radius:8px; font-size:14px; z-index:200; max-width:80%; }

/* 管理员面板 */
.admin-pane { background:#fff; }
.admin-add { padding:12px; border-bottom:1px solid #eee; display:flex; flex-direction:column; gap:8px; }
.admin-add .btn-mini { height:40px; }
.admin-user { display:flex; align-items:center; padding:12px 16px; border-bottom:1px solid #f0f0f0; }
.admin-user .au-info { flex:1; }
.admin-user .au-name { font-size:15px; font-weight:500; }
.admin-user .au-sub { font-size:12px; color:#999; margin-top:2px; }
.admin-user .au-actions { display:flex; gap:6px; }
.au-btn { border:none; border-radius:6px; padding:5px 9px; font-size:12px; cursor:pointer; background:#f0f0f0; color:#333; }
.au-btn:active { background:#e0e0e0; }
.au-btn.off { color:#e64340; }
.au-btn.admin { background:#07c160; color:#fff; }

/* 成员选择 sheet */
.sheet { position:fixed; left:0; right:0; bottom:0; background:#fff; border-radius:16px 16px 0 0; padding-bottom:env(safe-area-inset-bottom); z-index:150; box-shadow:0 -6px 30px rgba(0,0,0,.15); max-height:70%; display:flex; flex-direction:column; }
.sheet-title { text-align:center; font-size:15px; font-weight:600; padding:14px; border-bottom:1px solid #eee; }
.sheet .room-list { flex:1; overflow-y:auto; }
.sheet .member-item { display:flex; align-items:center; padding:12px 16px; border-bottom:1px solid #f4f4f4; }
.member-item .mi-name { flex:1; font-size:15px; }
.member-item .mi-status { font-size:12px; color:#999; }
.member-item .mi-status.on { color:#07c160; }
.member-item .mi-actions { display:flex; gap:6px; margin-left:8px; }
.btn-close-sheet { height:44px; border:none; background:#f7f7f7; color:#333; font-size:15px; cursor:pointer; }

/* 通话界面 */
.call-overlay { position:fixed; inset:0; background:#000; z-index:300; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.call-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.call-status { position:relative; z-index:2; text-align:center; color:#fff; }
.call-avatar { width:88px; height:88px; border-radius:50%; background:rgba(255,255,255,.15); font-size:40px; font-weight:700; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; }
.call-name { font-size:22px; font-weight:600; }
.call-sub { font-size:14px; color:rgba(255,255,255,.7); margin-top:6px; }
.call-local { position:absolute; top:44px; right:14px; width:110px; height:150px; object-fit:cover; border-radius:10px; z-index:3; background:#222; }
.call-controls { position:absolute; bottom:60px; left:0; right:0; display:flex; justify-content:center; gap:26px; z-index:4; }
.call-btn { width:58px; height:58px; border-radius:50%; border:none; background:rgba(255,255,255,.2); color:#fff; font-size:20px; cursor:pointer; }
.call-btn:active { background:rgba(255,255,255,.35); }
.call-btn.danger { background:#e64340; width:66px; height:66px; font-size:14px; }
.call-btn.ok { background:#07c160; width:66px; height:66px; font-size:14px; }
.call-answerbar { position:absolute; bottom:150px; left:0; right:0; display:flex; justify-content:center; gap:26px; z-index:4; }