* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin:0; padding:0; width:100%; height:100%; overflow:hidden; overscroll-behavior:none; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; background:#ededed; color:#111; }
.hidden { display:none !important; }
.app { max-width:520px; margin:0 auto; height:var(--app-height, 100dvh); display:flex; background:#ededed; position:fixed; top:var(--viewport-top, 0px); right:0; left:0; overflow:hidden; }
.page { flex:1; min-height:0; display:flex; flex-direction:column; height:100%; position:relative; overflow:hidden; }
.center { align-items:center; justify-content:center; }

/* 登录 */
.login-card { width:290px; background:#fff; border-radius:12px; padding:28px; display:flex; flex-direction:column; gap:12px; box-shadow:0 2px 12px rgba(0,0,0,.08); }
.login-logo { font-size:20px; font-weight:600; text-align:center; margin-bottom:6px; }
.land-avatar { width:72px; height:72px; border-radius:50%; background:#07c160; color:#fff; font-size:32px; display:flex; align-items:center; justify-content:center; margin:0 auto; }
.land-name { text-align:center; font-size:18px; font-weight:600; }
.land-intro { text-align:center; font-size:13px; color:#666; line-height:1.6; word-break:break-all; }
.input-line { height:42px; border:1px solid #ddd; border-radius:8px; padding:0 12px; font-size:15px; outline:none; }
.input-area { width:100%; min-height:60px; border:1px solid #ddd; border-radius:8px; padding:10px 12px; font-size:14px; outline:none; resize:vertical; }
.btn-primary { background:#07c160; color:#fff; border:none; border-radius:8px; height:44px; font-size:16px; cursor:pointer; }
.btn-outline { background:#f7f7f7; color:#576b95; border:1px solid #ddd; border-radius:8px; height:40px; font-size:14px; cursor:pointer; }
.btn-danger { background:#fff0f0; color:#e64340; border:1px solid #ffcccc; border-radius:8px; height:40px; font-size:14px; cursor:pointer; }
.login-state { font-size:12px; color:#e64340; text-align:center; min-height:16px; }

/* 导航 */
.nav { height:56px; background:#ededed; display:flex; align-items:center; justify-content:center; position:relative; flex-shrink:0; }
.nav-title { font-size:18px; font-weight:600; }
.nav-unread-dot { display:inline-flex; min-width:18px; height:18px; margin-left:6px; padding:0 4px; align-items:center; justify-content:center; vertical-align:2px; border-radius:10px; background:#fa5151; color:#fff; font-size:11px; font-weight:500; }
.nav-sound { position:absolute; left:16px; font-size:17px; cursor:pointer; user-select:none; }
.nav-notify { position:absolute; left:50px; font-size:17px; cursor:pointer; user-select:none; }
.nav-right { position:absolute; right:16px; font-size:16px; color:#576b95; cursor:pointer; }
.nav-back { position:absolute; left:10px; font-size:26px; cursor:pointer; color:#333; line-height:1; padding:0 8px; }
.chat-nav { justify-content:center; }
.chat-notify { position:absolute; right:54px; font-size:17px; cursor:pointer; user-select:none; }
.chat-report-decor { position:absolute; left:48px; top:50%; transform:translateY(-50%); display:inline-flex; align-items:center; gap:5px; height:30px; padding:0 10px 0 7px; border:0; border-radius:16px; background:linear-gradient(90deg,#a10a1a 0%,#fe6e28 100%); color:#fff; font-size:13px; font-weight:700; letter-spacing:1px; line-height:1; cursor:pointer; box-shadow:0 2px 6px rgba(161,10,26,.22); }
.chat-report-decor:active { opacity:.82; transform:translateY(-50%) scale(.97); }
.chat-report-decor:disabled { opacity:.6; cursor:default; }
.chat-report-triangle { position:relative; width:18px; height:16px; display:inline-flex; align-items:center; justify-content:center; clip-path:polygon(50% 0,100% 100%,0 100%); background:#fff; color:#c21c27; font-size:12px; font-weight:800; line-height:1; padding-top:4px; }
.chat-report-triangle span { position:relative; z-index:1; }
.chat-menu { position:absolute; top:48px; right:10px; z-index:60; width:150px; padding:6px 0; background:#fff; border-radius:8px; box-shadow:0 4px 18px rgba(0,0,0,.18); }
.chat-menu button { display:block; width:100%; padding:11px 14px; border:0; background:#fff; text-align:left; font-size:14px; color:#222; cursor:pointer; }
.chat-menu button:active { background:#f2f2f2; }
.message-action-menu { position:fixed; z-index:100; width:168px; padding:6px 0; background:#fff; border-radius:10px; box-shadow:0 6px 24px rgba(0,0,0,.22); overflow:hidden; }
.message-action-menu button { display:block; width:100%; padding:12px 16px; border:0; background:#fff; text-align:left; font-size:15px; color:#222; cursor:pointer; }
.message-action-menu button:active, .message-action-menu button:hover { background:#f2f2f2; }
.report-box { width:min(90vw,390px); max-height:82vh; overflow:auto; background:#fff; border-radius:12px; padding:18px; box-sizing:border-box; }
.report-title { font-size:18px; font-weight:700; margin-bottom:6px; }
.report-tip { color:#888; font-size:13px; margin-bottom:10px; }
.report-types { display:flex; flex-direction:column; gap:8px; }
.report-types button { padding:12px 14px; border:1px solid #e5e5e5; border-radius:8px; background:#fff; text-align:left; font-size:14px; color:#222; }
.report-types button.selected { border-color:#2d6df6; background:#eef4ff; color:#1c5bd8; }
.report-text { width:100%; min-height:88px; box-sizing:border-box; margin-top:12px; padding:10px; border:1px solid #e5e5e5; border-radius:8px; resize:vertical; font:inherit; }
.report-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:12px; }
.report-actions button { min-width:88px; }

/* 会话列表 */
.list { flex:1; overflow-y:auto; background:#fff; }
.cell { display:flex; align-items:center; padding:14px 16px; border-bottom:1px solid #f2f2f2; cursor:pointer; }
.room-tabs { display:flex; flex-shrink:0; background:#fff; border-bottom:1px solid #eee; }
.room-tab { flex:1; border:0; background:none; padding:12px 0; color:#666; font-size:15px; }
.room-tab.active { color:#07a850; border-bottom:2px solid #07c160; font-weight:600; }
.cell:active { background:#ececec; }
.av { width:44px; height:44px; border-radius:6px; color:#fff; font-size:18px; font-weight:500; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.main { flex:1; margin-left:12px; min-width:0; }
.row-top { display:flex; align-items:center; justify-content:space-between; }
.name { font-size:16px; color:#111; }
.time { font-size:12px; color:#b2b2b2; }
.row-bottom { margin-top:6px; display:flex; align-items:center; }
.preview { flex:1; font-size:13px; color:#999; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.badge { min-width:20px; height:20px; line-height:20px; padding:0 6px; background:#fa5151; color:#fff; font-size:12px; text-align:center; border-radius:10px; margin-left:8px; }
.room-block-tag { margin-left:6px; font-size:11px; color:#fa5151; border:1px solid #fa5151; border-radius:3px; padding:0 4px; vertical-align:middle; }
.room-pin-tag { margin-left:6px; font-size:11px; color:#07c160; border:1px solid #07c160; border-radius:3px; padding:0 4px; vertical-align:middle; }
.room-pin-btn { flex-shrink:0; margin-left:10px; padding:5px 10px; font-size:12px; color:#07c160; border:1px solid #07c160; border-radius:5px; background:#fff; cursor:pointer; }
.room-pin-btn:active { background:#f0fff5; }
.room-pin-btn.pinned { color:#666; border-color:#ddd; background:#f5f5f5; }
.room-pin-btn:disabled { opacity:.5; }
.room-block-btn { flex-shrink:0; margin-left:10px; padding:5px 10px; font-size:12px; color:#fa5151; border:1px solid #fa5151; border-radius:5px; background:#fff; cursor:pointer; }
.room-block-btn:active { background:#fff0f0; }
.room-block-btn.blocked { color:#07c160; border-color:#07c160; }
.room-block-btn:disabled { opacity:.5; }
.empty { text-align:center; color:#999; font-size:14px; padding:80px 0; }

/* 聊天 */
.msg-list { flex:1; min-height:0; overflow-y:auto; padding:14px 12px; background:#ededed; }
.msg { display:flex; margin-bottom:16px; }
.msg.sel .bubble { border:2px solid #07c160; }
.msg-me { justify-content:flex-end; }
.msg-other { justify-content:flex-start; }
.bubble { max-width:72%; padding:10px 14px; font-size:15px; line-height:1.5; word-break:break-word; white-space:pre-wrap; border-radius:6px; }
.msg-me .bubble { background:#95ec69; }
.msg-other .bubble { background:#fff; }
.bubble-img { max-width:200px; max-height:160px; display:block; border-radius:6px; object-fit:cover; }
.bubble-video video { width:220px; height:140px; border-radius:6px; background:#000; display:block; object-fit:cover; }
.video-preview { position:relative; padding:0; border:none; background:#000; border-radius:6px; cursor:pointer; overflow:hidden; line-height:0; }
.video-preview video { width:220px; height:140px; display:block; object-fit:cover; }
.video-play-icon { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:32px; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.6); pointer-events:none; }
.bubble-voice { min-width:80px; text-align:center; cursor:pointer; }
.bubble-voice.playing { color:#07c160; }
.bubble-file { display:flex; align-items:center; gap:8px; min-width:160px; }
.bubble-file a { color:#576b95; text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-icon { flex-shrink:0; }
.bubble-coll { cursor:pointer; }
.coll-title { font-weight:600; font-size:15px; }
.coll-count { font-size:12px; color:#888; margin:4px 0; }
.coll-open { background:#07c160; color:#fff; border:none; border-radius:6px; padding:6px 14px; font-size:13px; }

/* 输入栏 */
.chat-upload-bar { display:flex; align-items:center; gap:8px; padding:7px 12px; font-size:12px; color:#6B7280; background:#f0f0f0; border-top:1px solid #e0e0e0; flex-shrink:0; }
.chat-upload-track { flex:1; height:6px; background:rgba(0,0,0,0.10); border-radius:3px; overflow:hidden; min-width:60px; }
#chat-upload-fill { height:100%; width:0; background:#07c160; border-radius:3px; transition:width .2s; }
#chat-upload-pct { font-size:12px; min-width:36px; text-align:right; color:#1A1B1C; font-variant-numeric:tabular-nums; }
.input-bar { display:flex; align-items:center; padding:8px 10px max(8px, env(safe-area-inset-bottom)); background:#f7f7f7; border-top:1px solid #e0e0e0; flex-shrink:0; position:relative; z-index:20; transform:translateZ(0); }
.input { flex:1; min-width:0; height:38px; border:none; outline:none; background:#fff; border-radius:6px; padding:0 12px; font-size:16px; }
.icon-btn { width:36px; text-align:center; font-size:20px; cursor:pointer; flex-shrink:0; }
.send-btn { margin-left:8px; background:#07c160; color:#fff; border:none; border-radius:6px; padding:0 16px; height:38px; font-size:15px; cursor:pointer; flex-shrink:0; }
.plus-panel { background:#f7f7f7; border-top:1px solid #e0e0e0; padding:14px; display:flex; gap:12px; flex-wrap:wrap; flex-shrink:0; }
.action { font-size:14px; color:#333; cursor:pointer; background:#fff; padding:12px 16px; border-radius:8px; }
.action-batch { width:100%; color:#fff; background:#07c160; font-weight:600; text-align:center; box-sizing:border-box; }
.sel-bar { background:#07c160; color:#fff; display:flex; align-items:center; padding:8px 12px; gap:16px; font-size:14px; }
.sel-btn { cursor:pointer; }
.quote-bar { background:#ececec; border-left:3px solid #07c160; margin:8px 12px 0; padding:8px 10px; font-size:13px; color:#666; display:flex; justify-content:space-between; }
.quote-bar span:last-child { cursor:pointer; color:#999; }

/* 转发面板 */
.mask { position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; z-index:99; }
.fwd-box { width:300px; background:#fff; border-radius:12px; padding:18px; max-height:70vh; display:flex; flex-direction:column; }
.fwd-title { font-weight:600; text-align:center; margin-bottom:12px; }
#fwd-list { flex:1; overflow-y:auto; }
.fwd-item { padding:14px 10px; border-bottom:1px solid #f0f0f0; cursor:pointer; }
.fwd-cancel { text-align:center; color:#888; padding-top:12px; cursor:pointer; }
.batch-box { width:min(88vw,380px); max-height:78vh; background:#fff; border-radius:12px; padding:18px; display:flex; flex-direction:column; }
.batch-tip { color:#8a5a00; background:#fff7df; border-radius:8px; padding:10px; margin-bottom:10px; font-size:13px; line-height:1.5; }
.batch-status { color:#666; font-size:14px; margin-bottom:8px; }
.batch-version { color:#aaa; font-size:11px; margin:-4px 0 8px; }
.batch-list { min-height:80px; max-height:40vh; overflow-y:auto; border:1px solid #eee; border-radius:8px; padding:6px 10px; }
.batch-empty { color:#999; text-align:center; padding:28px 8px; font-size:14px; }
.batch-item { display:flex; align-items:center; gap:8px; padding:9px 0; border-bottom:1px solid #f2f2f2; font-size:13px; }
.batch-item:last-child { border-bottom:0; }
.batch-kind { flex-shrink:0; }
.batch-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.batch-remove { border:0; background:transparent; color:#e64340; padding:4px 6px; font-size:16px; }
.batch-actions { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.batch-open-multi { min-height:46px; font-size:15px; font-weight:600; }
.batch-add-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.batch-add-row button { min-width:0; }

/* 管理页 */
.mgr-body { flex:1; overflow-y:auto; padding:14px; background:#fff; }
.mgr-title { font-size:18px; font-weight:600; margin-bottom:12px; }
.mgr-block { border:1px solid #eee; border-radius:10px; padding:14px; margin-bottom:12px; }
.mgr-h { font-weight:600; margin-bottom:10px; }
.mgr-add { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.mgr-help { color:#888; font-size:12px; line-height:1.5; margin:-4px 0 8px; }
.mgr-block .input-line { width:100%; }
.mgr-subheading { margin-top:14px; }
.entry-media-list { display:flex; flex-direction:column; gap:8px; }
.entry-media-empty { color:#999; font-size:13px; padding:12px 0; }
.entry-media-row { border:1px solid #eee; border-radius:8px; padding:10px; }
.entry-media-title { overflow-wrap:anywhere; font-size:13px; line-height:1.5; }
.entry-media-controls { display:flex; gap:6px; margin-top:8px; }
.entry-media-controls button { flex:1; height:34px; }
.entry-media-controls button:disabled { opacity:.45; }
.entry-media-remove { color:#e64340; }
.entry-media-actions { margin:8px 0 12px; }
.mgr-link { display:flex; align-items:center; justify-content:center; text-decoration:none; }
.staff-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid #f4f4f4; }
.staff-del { color:#e64340; cursor:pointer; font-size:13px; }
.report-list { display:flex; flex-direction:column; gap:8px; }
.report-item { padding:10px; border:1px solid #f0f0f0; border-radius:8px; font-size:13px; line-height:1.6; background:#fafafa; }
.report-time { float:right; color:#999; font-size:12px; }
.report-text { color:#666; word-break:break-word; }

/* 数据看板 */
.dash-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:12px; }
.dash-card { background:#f7f8fa; border-radius:8px; padding:10px 6px; text-align:center; }
.dash-num { font-size:22px; font-weight:700; color:#1677ff; line-height:1.2; }
.dash-label { font-size:11px; color:#888; margin-top:2px; }
.dash-table { width:100%; border-collapse:collapse; font-size:13px; }
.dash-table th, .dash-table td { padding:6px 8px; border-bottom:1px solid #f0f0f0; text-align:center; }
.dash-table th { color:#888; font-weight:500; background:#fafafa; }
.staff-row { flex-wrap:wrap; gap:6px; }
.staff-row-info { flex:1; min-width:120px; }
.staff-row-actions { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.staff-row-actions .btn-outline, .staff-row-actions .btn-primary { font-size:12px; padding:4px 10px; }
.qr-preview-box { background:#fff; border-radius:12px; padding:16px; max-width:90vw; text-align:center; }
.qr-preview-img { max-width:70vw; max-height:60vh; display:block; margin:0 auto 10px; border-radius:8px; }
.qr-preview-url { font-size:11px; color:#888; word-break:break-all; margin-bottom:10px; }
.qr-preview-actions { display:flex; gap:8px; justify-content:center; }

/* 合集页 */
#coll-list { flex:1; overflow-y:auto; padding:14px 12px; }
#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:999; opacity:0; transition:opacity .3s; pointer-events:none; }
#toast.show { opacity:1; }