/* ========================================================================== site.css —— 移动端优先（手机浏览器 / 微信内置浏览器）目标平台：iOS Safari、微信 iOS(WKWebView)、Android Chrome、微信 Android(XWEB)、华为鸿蒙 HarmonyOS 浏览器与微信布局模型： ≤767px 「列表屏 + 聊天屏」双屏横向滑动（微信 / 短信 App 的交互习惯），两屏绝对定位叠放，用 transform 位移切换，配合 history 让物理返回键回到列表屏。 ≥768px 退化为桌面双栏常驻，两屏都可见，返回按钮隐藏。两个由 _Layout.cshtml 内联脚本写入的关键变量： --app-h : 可视高度(px)。手机上的 100vh 包含被地址栏/微信工具条遮住的区域，直接用它会让底部输入框跑到屏幕外，必须用 JS 实测高度。 --kb : 软键盘遮挡高度(px)。iOS 与部分安卓浏览器弹键盘时不缩小布局视口，靠它把聊天屏整体抬到键盘之上，否则输入框会被键盘盖住。 ========================================================================== */ :root { --brand-1: #5B8DEF; --brand-2: #8B6CF5; --brand-3: #A78BFA; --bg: #F0F2F5; --panel: #FFFFFF; --chat-bg: #EEF2F7; --line: #E8EBF0; --line-soft: #F0F2F5; --muted: #8C95A6; --text: #1A1D26; --danger: #F0564A; --ok: #2ECC71; --shadow-sm: 0 1px 3px rgba(0,0,0,0.06); --shadow-md: 0 4px 12px rgba(0,0,0,0.08); --shadow-lg: 0 8px 30px rgba(0,0,0,0.12); --app-h: 100%; --kb: 0px; /* 刘海屏安全区。默认 0，只有浏览器支持时才覆盖，避免直接写 env() 在不支持的浏览器上让整条 padding 声明失效。 */ --sat: 0px; --sab: 0px; } @supports (padding: constant(safe-area-inset-top)) { :root { --sat: constant(safe-area-inset-top); --sab: constant(safe-area-inset-bottom); } } @supports (padding: env(safe-area-inset-top)) { :root { --sat: env(safe-area-inset-top); --sab: env(safe-area-inset-bottom); } } /* ============ 全局 ============ */ * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html { height: 100%; } body { margin: 0; height: 100%; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Segoe UI", Roboto, "Helvetica Neue", sans-serif; font-size: 15px; line-height: 1.5; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; /* 防止安卓浏览器按算法放大正文字号 */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* 禁掉双击缩放（会误触），但保留双指缩放以免妨碍视力不佳的用户 */ html, body, a, button, .conv-item, .contact-item, .tab, .btn-send, .btn-back { touch-action: manipulation; } button, input, textarea { font-family: inherit; font-size: inherit; color: inherit; } .hidden { display: none !important; } /* 聊天主界面：锁死页面滚动，只让列表区与消息区内部滚动。不锁的话 iOS 弹键盘时会把整个页面顶走，收起后留一片空白。 */ body.app-body { position: fixed; top: 0; left: 0; right: 0; width: 100%; height: var(--app-h, 100%); overflow: hidden; overscroll-behavior: none; } /* ============ 登录页 ============ */ body.auth-body { height: var(--app-h, 100%); overflow-y: auto; -webkit-overflow-scrolling: touch; } .auth-wrap { min-height: var(--app-h, 100%); display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #5B8DEF 0%, #8B6CF5 50%, #A78BFA 100%); padding: calc(20px + var(--sat)) 16px calc(24px + var(--sab)); position: relative; overflow: hidden; } /* 登录页背景装饰光斑 */ .auth-wrap::before, .auth-wrap::after { content: ""; position: absolute; border-radius: 50%; opacity: 0.15; pointer-events: none; } .auth-wrap::before { width: 300px; height: 300px; background: #fff; top: -80px; right: -60px; } .auth-wrap::after { width: 200px; height: 200px; background: #fff; bottom: -40px; left: -40px; } .auth-card { width: 100%; max-width: 400px; background: rgba(255,255,255,0.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 24px; padding: 32px 24px; box-shadow: 0 24px 80px rgba(0,0,0,0.2), 0 0 0 1px rgba(255,255,255,0.1); position: relative; z-index: 1; animation: authSlideUp .45s cubic-bezier(.25,.8,.25,1) both; } @keyframes authSlideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .auth-brand { text-align: center; margin-bottom: 26px; } .auth-logo { font-size: 52px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 24px; background: linear-gradient(135deg, rgba(91,141,239,0.12), rgba(139,108,245,0.12)); margin-bottom: 14px; } .auth-brand h1 { font-size: 22px; margin: 0 0 6px; font-weight: 700; letter-spacing: -0.3px; } .auth-sub { color: var(--muted); font-size: 13.5px; margin: 0; } .auth-form .field { display: block; margin-bottom: 16px; } .auth-form .field span { display: block; font-size: 13px; color: #55607a; margin-bottom: 6px; } .auth-form .field input { width: 100%; /* 16px 是硬要求：iOS Safari 在聚焦字号 <16px 的输入框时会自动放大整页 */ padding: 14px 16px; border: 1.5px solid #E8EBF0; border-radius: 14px; font-size: 16px; outline: none; background: #F8F9FB; -webkit-appearance: none; appearance: none; transition: border-color .2s, background .2s, box-shadow .2s; } .auth-form .field input:focus { border-color: var(--brand-1); background: #fff; box-shadow: 0 0 0 3px rgba(91,141,239,0.12); } .auth-form .checkbox { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #55607a; margin-bottom: 18px; cursor: pointer; /* 44px 是苹果建议的最小可点击高度 */ min-height: 44px; } .auth-form .checkbox input { width: 18px; height: 18px; margin: 0; flex: none; } .btn-primary { width: 100%; min-height: 50px; padding: 14px; border: 0; border-radius: 14px; background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; -webkit-appearance: none; appearance: none; box-shadow: 0 4px 16px rgba(91,141,239,0.35); transition: transform .15s, box-shadow .15s; letter-spacing: 0.5px; } .btn-primary:active { transform: scale(0.98); box-shadow: 0 2px 8px rgba(91,141,239,0.3); } .auth-error { color: var(--danger); font-size: 13px; margin-bottom: 12px; padding: 8px 12px; background: rgba(240,86,74,0.06); border-radius: 8px; } .auth-hint { margin-top: 22px; font-size: 12.5px; color: var(--muted); line-height: 1.8; } .auth-hint p { margin: 0 0 6px; } .auth-hint b { color: var(--brand-1); } /* ============ 主布局：双屏滑动 ============ */ .app { position: relative; height: 100%; overflow: hidden; } .screen { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; min-width: 0; background: var(--chat-bg); } .screen-list { z-index: 1; background: var(--panel); transform: translate3d(0, 0, 0); transition: transform .3s cubic-bezier(.25,.8,.25,1); will-change: transform; } .screen-chat { z-index: 2; /* 软键盘弹出时把整屏抬高，输入框才不会被盖住 */ bottom: var(--kb, 0px); transform: translate3d(100%, 0, 0); transition: transform .3s cubic-bezier(.25,.8,.25,1); will-change: transform; box-shadow: -4px 0 24px rgba(16,24,40,.08); } .app[data-screen="chat"] .screen-list { transform: translate3d(-22%, 0, 0); } .app[data-screen="chat"] .screen-chat { transform: translate3d(0, 0, 0); } /* ---- 顶栏（两屏共用） ---- */ .app-bar { flex: none; display: flex; align-items: center; gap: 10px; background: var(--panel); border-bottom: 1px solid var(--line-soft); box-shadow: 0 1px 4px rgba(0,0,0,0.03); } /* ---- 列表屏头部 ---- */ .sidebar-header { justify-content: space-between; min-height: 58px; padding: calc(10px + var(--sat)) 14px 10px; border-bottom: 1px solid var(--line-soft); } .me { display: flex; align-items: center; gap: 11px; min-width: 0; } .avatar { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 16px; flex: none; background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); user-select: none; -webkit-user-select: none; box-shadow: 0 2px 8px rgba(91,141,239,0.25); transition: transform .15s; } .me-info { line-height: 1.3; min-width: 0; } .me-name { font-weight: 700; font-size: 16.5px; letter-spacing: -0.2px; } .me-status { font-size: 12px; color: var(--muted); } .me-status.online { color: var(--ok); } .me-status.offline { color: var(--danger); } .logout { flex: none; font-size: 14px; color: var(--muted); text-decoration: none; /* 扩大点击热区但不撑高顶栏 */ padding: 10px 2px 10px 12px; margin: -10px -2px -10px 0; border-radius: 8px; transition: color .15s, background .15s; } .logout:active { color: var(--danger); background: rgba(240,86,74,0.06); } /* ---- 微信环境提示条 ---- */ .wx-tip { flex: none; display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; background: linear-gradient(90deg, #FFF8E6, #FFF5D6); border-bottom: 1px solid #F5E3B3; font-size: 12.5px; line-height: 1.5; color: #8A6D1A; } .wx-tip b { color: #6b520f; } .wx-tip-close { flex: none; width: 24px; height: 24px; margin: -2px -2px 0 0; border: 0; background: none; color: #b39a55; font-size: 20px; line-height: 1; cursor: pointer; padding: 0; } /* ---- 分段选项卡 ---- */ .sidebar-tabs { flex: none; display: flex; gap: 4px; padding: 8px 12px; background: var(--panel); border-bottom: 1px solid var(--line-soft); } .sidebar-tabs .tab { flex: 1; height: 36px; border: 0; border-radius: 10px; background: #F3F5F9; color: #55607a; font-size: 14px; cursor: pointer; -webkit-appearance: none; appearance: none; transition: all .2s cubic-bezier(.25,.8,.25,1); font-weight: 500; } .sidebar-tabs .tab.active { background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); color: #fff; font-weight: 600; box-shadow: 0 2px 8px rgba(91,141,239,0.3); } /* ---- 会话 / 联系人列表 ---- */ .tab-panel { flex: 1; /* flex 子项默认 min-height:auto，不加这行内容一多就无法滚动 */ min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: var(--panel); } .conv-list, .contact-list { list-style: none; margin: 0; padding: 0; } .conv-item, .contact-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 66px; cursor: pointer; border-bottom: 1px solid #F5F7FA; user-select: none; -webkit-user-select: none; transition: background .15s; } .conv-item:active, .contact-item:active { background: #EEF2F7; } .conv-item.active { background: linear-gradient(90deg, rgba(91,141,239,0.08), rgba(139,108,245,0.04)); border-left: 3px solid var(--brand-1); padding-left: 11px; } .conv-main { flex: 1; min-width: 0; } .conv-name { font-size: 15.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; letter-spacing: -0.1px; } .conv-name > span:first-child { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .conv-preview { font-size: 13.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; } .badge { flex: none; background: linear-gradient(135deg, #F0564A, #E8453C); color: #fff; border-radius: 12px; font-size: 11px; font-weight: 600; min-width: 20px; height: 20px; line-height: 20px; text-align: center; padding: 0 6px; box-shadow: 0 2px 6px rgba(240,86,74,0.3); } .online-dot, .offline-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; box-shadow: 0 0 0 2px rgba(255,255,255,0.9); } .online-dot { background: var(--ok); animation: pulse 2s ease-in-out infinite; } .offline-dot { background: #CDD4E0; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } .empty-tip { padding: 48px 24px; text-align: center; color: var(--muted); font-size: 13.5px; line-height: 1.9; } .empty-tip br + * { margin-top: 4px; } /* ---- 列表屏底部：通知开关 ---- */ .sidebar-footer { flex: none; padding: 12px 14px calc(14px + var(--sab)); background: var(--panel); border-top: 1px solid var(--line-soft); } .btn-notify { width: 100%; min-height: 46px; padding: 12px; border: 1.5px solid #E8EBF0; border-radius: 12px; background: var(--panel); cursor: pointer; font-size: 14px; color: var(--brand-1); font-weight: 600; -webkit-appearance: none; appearance: none; transition: all .2s; } .btn-notify:active { background: #F5F7FA; transform: scale(0.98); } .btn-notify:disabled { color: var(--muted); background: #F7F8FA; cursor: not-allowed; } .btn-notify.enabled { color: var(--ok); border-color: rgba(46,204,113,0.3); background: rgba(46,204,113,0.04); } .notify-state { font-size: 11.5px; color: var(--muted); margin-top: 7px; text-align: center; line-height: 1.6; } /* ---- 聊天屏头部 ---- */ .chat-header { padding: calc(8px + var(--sat)) 12px 8px 4px; min-height: 56px; background: var(--panel); } .btn-back { flex: none; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--brand-1); display: flex; align-items: center; justify-content: center; -webkit-appearance: none; appearance: none; border-radius: 12px; transition: background .15s; } /* 用边框画返回箭头，避免引入图标字体或图片 */ .btn-back::before { content: ""; width: 12px; height: 12px; border-left: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg); margin-left: 5px; } .btn-back:active { background: rgba(91,141,239,0.08); } .chat-head-main { flex: 1; min-width: 0; } .chat-title { font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.2px; } .chat-subtitle { font-size: 12.5px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---- 消息区 ---- */ .messages { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 16px 12px; display: flex; flex-direction: column; gap: 14px; background: var(--chat-bg); /* 微妙的网格背景纹理 */ background-image: radial-gradient(circle, rgba(0,0,0,0.02) 1px, transparent 1px); background-size: 20px 20px; } .msg { display: flex; gap: 9px; max-width: 85%; animation: msgIn .25s ease-out both; } @keyframes msgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .msg .avatar { width: 38px; height: 38px; font-size: 14px; border-radius: 12px; } .msg > div { min-width: 0; } .msg .bubble { padding: 10px 14px; border-radius: 18px; background: var(--panel); box-shadow: 0 1px 4px rgba(0,0,0,0.06); font-size: 15.5px; line-height: 1.55; word-break: break-word; /* 允许长按选中复制，其余区域一律禁选 */ user-select: text; -webkit-user-select: text; transition: transform .1s; } .msg .text { white-space: pre-wrap; } .msg .meta { font-size: 11px; color: #A8B1C2; margin-top: 5px; padding: 0 4px; } .msg.in { align-self: flex-start; } .msg.in .bubble { border-top-left-radius: 5px; } .msg.out { align-self: flex-end; flex-direction: row-reverse; } .msg.out .bubble { background: linear-gradient(135deg, var(--brand-1), #7B6CF5); color: #fff; border-top-right-radius: 5px; box-shadow: 0 2px 8px rgba(91,141,239,0.2); } .msg.out .meta { text-align: right; } .msg.system { align-self: center; max-width: 92%; } .msg.system .bubble { background: rgba(0,0,0,0.04); color: #7B8494; font-size: 12px; box-shadow: none; border-radius: 10px; padding: 5px 12px; backdrop-filter: blur(4px); } .msg.pending { opacity: .55; } .sender-name { font-size: 12px; color: var(--brand-1); font-weight: 600; margin-bottom: 3px; } /* ---- 输入区 ---- */ .composer { flex: none; display: flex; gap: 8px; padding: 10px 12px calc(10px + var(--sab)); background: var(--panel); border-top: 1px solid var(--line-soft); align-items: flex-end; box-shadow: 0 -2px 10px rgba(0,0,0,0.03); } .composer textarea { flex: 1; min-width: 0; resize: none; border: 1.5px solid #E8EBF0; border-radius: 22px; background: #F5F7FA; padding: 10px 16px; /* 同样必须 ≥16px，否则 iOS 聚焦时整页放大 */ font-size: 16px; line-height: 1.45; outline: none; max-height: 120px; -webkit-appearance: none; appearance: none; transition: border-color .2s, background .2s, box-shadow .2s; } .composer textarea:focus { border-color: var(--brand-1); background: #fff; box-shadow: 0 0 0 3px rgba(91,141,239,0.1); } .btn-send { flex: none; min-width: 66px; height: 40px; padding: 0 18px; border: 0; border-radius: 20px; cursor: pointer; background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); color: #fff; font-size: 15px; font-weight: 600; -webkit-appearance: none; appearance: none; box-shadow: 0 2px 10px rgba(91,141,239,0.3); transition: transform .15s, box-shadow .15s; } .btn-send:active { transform: scale(0.95); } .btn-send:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; } /* ============ 桌面端（≥768px）：双栏常驻 ============ */ @media (min-width: 768px) { body { font-size: 14px; } .app { display: flex; } /* 两栏并排，取消绝对定位与滑动 */ .screen { position: static; transform: none !important; transition: none; box-shadow: none; bottom: auto; } .screen-list { width: 340px; min-width: 300px; max-width: 380px; flex: none; border-right: 1px solid var(--line); } .screen-chat { flex: 1; min-width: 0; } .btn-back { display: none; } .sidebar-header, .chat-header { padding-top: 12px; } .sidebar-footer { padding-bottom: 12px; } .composer { padding: 14px 20px; } .messages { padding: 20px; } .msg { max-width: 70%; } .conv-item, .contact-item { min-height: 0; padding: 12px 16px; } .conv-item:hover, .contact-item:hover { background: #F5F7FA; } .logout:hover { color: var(--danger); background: rgba(240,86,74,0.06); } .btn-notify:hover { background: #F5F7FA; } .btn-primary:hover { opacity: .95; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(91,141,239,0.4); } .composer textarea { font-size: 14px; border-radius: 12px; background: #fff; } .btn-send { height: auto; padding: 11px 22px; border-radius: 12px; } .msg .bubble { font-size: 14px; } .conv-name { font-size: 14px; } .sidebar-tabs .tab:hover { background: #EAEDF3; } .sidebar-tabs .tab.active:hover { background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); color: #fff; } }