/* ========================================================================== 在线聊天室 · 混合主题样式 浅色 = 风格A（白底 + 翡翠绿） 深色 = 风格B（暗色玻璃 + 紫青） 主题由 控制，data-mode 记录 auto/light/dark ========================================================================== */ :root{ --radius:14px; } html[data-theme="light"]{ --bg:#F0F2F5; --bg-grad:none; --panel:#FFFFFF; --panel-soft:#F7F9FA; --panel-head:#FFFFFF; --line:#E9ECEF; --line-soft:#EFF1F4; --text:#111827; --muted:#6B7280; --hint:#9CA3AF; --input-bg:#FAFBFC; --primary:#10B981; --primary-2:#34D399; --primary-d:#059669; --primary-l:#ECFDF5; --bubble-self:linear-gradient(135deg,#10B981,#34D399); --bubble-other:#FFFFFF; --bubble-self-text:#fff; --bubble-other-text:#111827; --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.10); --shadow-lg:0 12px 40px rgba(16,24,40,.10); --avatar-radius:50%; --panel-blur:none; --self-glow:none; --status:#10B981; --badge-bg:#EFF6FF; --badge-fg:#3B82F6; --file-ico-bg:#EEF2FF; --file-ico-fg:#6366F1; --day-bg:#E9ECEF; --mask:rgba(0,0,0,.35); } html[data-theme="dark"]{ --bg:#080B14; --bg-grad:radial-gradient(680px 480px at 12% 8%,rgba(139,92,246,.22),transparent 65%), radial-gradient(620px 460px at 88% 92%,rgba(6,182,212,.18),transparent 65%), radial-gradient(500px 400px at 70% 15%,rgba(236,72,153,.10),transparent 60%), linear-gradient(160deg,#080B14 0%,#0D1220 55%,#0A0F1C 100%); --panel:rgba(255,255,255,.055); --panel-soft:rgba(255,255,255,.02); --panel-head:rgba(255,255,255,.02); --line:rgba(255,255,255,.10); --line-soft:rgba(255,255,255,.08); --text:#F1F5F9; --muted:#94A3B8; --hint:#64748B; --input-bg:rgba(0,0,0,.28); --primary:#8B5CF6; --primary-2:#06B6D4; --primary-d:#7C3AED; --primary-l:rgba(139,92,246,.16); --bubble-self:linear-gradient(135deg,#8B5CF6,#06B6D4); --bubble-other:rgba(255,255,255,.08); --bubble-self-text:#fff; --bubble-other-text:#F1F5F9; --shadow:0 6px 22px rgba(0,0,0,.28); --shadow-lg:0 24px 70px rgba(0,0,0,.55); --avatar-radius:14px; --panel-blur:blur(24px) saturate(150%); --self-glow:0 8px 26px rgba(139,92,246,.35); --status:#22D3EE; --badge-bg:rgba(34,211,238,.16); --badge-fg:#67E8F9; --file-ico-bg:rgba(139,92,246,.20); --file-ico-fg:#A78BFA; --day-bg:rgba(255,255,255,.07); --mask:rgba(0,0,0,.55); } *{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","Microsoft YaHei",sans-serif; background:var(--bg);color:var(--text);overflow:hidden;transition:background .45s ease,color .35s ease} body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--bg-grad)} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} input,textarea{font-family:inherit;outline:none;color:var(--text)} .hidden{display:none !important} /* ================= 登录 ================= */ #login{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px; background:var(--bg-grad),var(--bg)} .login-card{width:100%;max-width:410px;border-radius:24px;padding:36px 30px; background:var(--panel);backdrop-filter:var(--panel-blur);-webkit-backdrop-filter:var(--panel-blur); border:1px solid var(--line);box-shadow:var(--shadow-lg)} html[data-theme="light"] .login-card{background:#fff} .login-logo{width:60px;height:60px;border-radius:18px;margin:0 auto 18px; background:linear-gradient(135deg,var(--primary),var(--primary-2));display:flex;align-items:center;justify-content:center; box-shadow:0 10px 30px rgba(16,185,129,.35)} html[data-theme="dark"] .login-logo{box-shadow:0 10px 32px rgba(139,92,246,.5),inset 0 1px 0 rgba(255,255,255,.35)} .login-logo svg{width:29px;height:29px;fill:#fff} .login-title{text-align:center;font-size:22px;font-weight:700;margin-bottom:6px} .login-sub{text-align:center;color:var(--muted);font-size:13px;margin-bottom:22px} .tabs{display:flex;border-radius:11px;padding:4px;margin-bottom:20px;background:var(--panel-soft);border:1px solid var(--line-soft)} html[data-theme="light"] .tabs{background:#F3F4F6;border-color:transparent} .tabs button{flex:1;padding:9px;border-radius:8px;font-size:14px;font-weight:600;color:var(--muted);transition:.22s} .tabs button.on{color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary-2))} .field{margin-bottom:13px} .field label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:6px} .field input{width:100%;padding:12px 14px;border-radius:11px;font-size:15px;transition:.22s; background:var(--input-bg);border:1.5px solid var(--line)} html[data-theme="light"] .field input{background:#FAFBFC} .field input:focus{border-color:var(--primary);box-shadow:0 0 0 3.5px var(--primary-l)} html[data-theme="light"] .field input:focus{background:#fff} .btn-main{width:100%;padding:13px;border-radius:11px;color:#fff;font-size:15px;font-weight:600;margin-top:4px; background:linear-gradient(135deg,var(--primary),var(--primary-2));transition:.2s;box-shadow:0 4px 14px rgba(16,185,129,.3)} html[data-theme="dark"] .btn-main{box-shadow:0 10px 28px rgba(139,92,246,.42)} .btn-main:active{transform:scale(.985)} .btn-main:disabled{opacity:.6;cursor:not-allowed} .form-msg{font-size:12.5px;margin-top:11px;text-align:center;min-height:17px} .form-msg.err{color:#EF4444} .form-msg.ok{color:var(--primary)} .reg-only{display:none}body.register .reg-only{display:block}body.register .login-only{display:none} /* ================= 主界面 ================= */ #app{display:flex;height:100vh;height:100dvh;position:relative;z-index:1;opacity:0;pointer-events:none; transition:opacity .35s;padding:14px;gap:14px} #app.on{opacity:1;pointer-events:auto} .sidebar{width:290px;flex-shrink:0;display:flex;flex-direction:column;border-radius:var(--radius); background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden; backdrop-filter:var(--panel-blur);-webkit-backdrop-filter:var(--panel-blur)} html[data-theme="light"] .sidebar{background:#fff} .sb-head{padding:18px 20px 14px;border-bottom:1px solid var(--line)} .sb-title{display:flex;align-items:center;gap:9px;font-size:16.5px;font-weight:700} .sb-title .dot{width:9px;height:9px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-2)); box-shadow:0 0 0 3px var(--primary-l)} html[data-theme="dark"] .sb-title .dot{box-shadow:0 0 12px rgba(139,92,246,.9)} .online-count{margin-top:8px;font-size:12.5px;color:var(--muted)} .online-count b{color:var(--primary);font-weight:700} .sb-search{margin:12px 16px 6px;position:relative} .sb-search input{width:100%;padding:9px 12px 9px 34px;border-radius:10px;font-size:13.5px;transition:.2s; background:var(--input-bg);border:1.5px solid transparent} html[data-theme="light"] .sb-search input{background:#F3F4F6} .sb-search input:focus{border-color:var(--primary)} .sb-search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;fill:var(--hint)} .sb-list{flex:1;overflow-y:auto;padding:6px 10px 12px} .sb-group{font-size:11px;font-weight:700;color:var(--hint);padding:11px 10px 6px;letter-spacing:.6px} .user-item{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:11px;cursor:pointer; transition:.18s;border:1px solid transparent} .user-item:hover{background:var(--panel-soft)} html[data-theme="light"] .user-item:hover{background:#F6F8FA} .user-item.on{background:var(--primary-l);border-color:var(--primary-l)} .avatar{width:38px;height:38px;border-radius:var(--avatar-radius);flex-shrink:0;display:flex;align-items:center; justify-content:center;color:#fff;font-weight:700;font-size:13.5px;position:relative;transition:border-radius .35s} .avatar .status{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%; background:var(--status);border:2.5px solid var(--panel)} html[data-theme="light"] .avatar .status{border-color:#fff} .u-meta{flex:1;min-width:0} .u-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .u-sub{font-size:11.5px;color:var(--hint);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .u-badge{font-size:10px;padding:2px 6px;border-radius:5px;font-weight:600;flex-shrink:0; background:var(--badge-bg);color:var(--badge-fg)} .u-badge.gray{background:var(--panel-soft);color:var(--hint);border:1px solid var(--line)} /* 离线用户：头像去色、整体淡化 */ .user-item.offline .avatar{filter:grayscale(.65);opacity:.72} .user-item.offline .u-name{color:var(--muted);font-weight:500} .user-item.offline .u-sub{color:var(--hint)} .self-tag{font-size:10px;padding:2px 6px;border-radius:5px;font-weight:600;background:var(--primary-l);color:var(--primary)} .sb-foot{padding:11px 14px;border-top:1px solid var(--line);display:flex;gap:8px} .theme-btn{flex:1;display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:11px; background:var(--panel-soft);border:1px solid var(--line);transition:.2s;font-size:12.5px} html[data-theme="light"] .theme-btn{background:#F7F8FA} .theme-btn:hover{border-color:var(--primary)} .theme-btn svg{width:17px;height:17px;fill:var(--primary);flex-shrink:0} .theme-btn .tm-main{font-weight:700;font-size:12.5px} .theme-btn .tm-sub{font-size:10.5px;color:var(--hint);margin-top:1px} .theme-btn .tm-txt{flex:1;text-align:left} .logout-btn{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center; background:var(--panel-soft);border:1px solid var(--line);transition:.2s} html[data-theme="light"] .logout-btn{background:#F7F8FA} .logout-btn:hover{border-color:#EF4444} .logout-btn svg{width:17px;height:17px;fill:var(--muted)} .chat{flex:1;display:flex;flex-direction:column;min-width:0;border-radius:var(--radius);background:var(--panel); border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden; backdrop-filter:var(--panel-blur);-webkit-backdrop-filter:var(--panel-blur)} html[data-theme="light"] .chat{background:#fff} .chat-head{height:68px;display:flex;align-items:center;gap:12px;padding:0 18px;flex-shrink:0; border-bottom:1px solid var(--line);background:var(--panel-head)} .back-btn{display:none;width:34px;height:34px;border-radius:9px;align-items:center;justify-content:center} .back-btn svg{width:20px;height:20px;fill:var(--text)} .ch-avatar{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--primary),var(--primary-2)); display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:15px} .ch-info{flex:1;min-width:0} .ch-name{font-size:15.5px;font-weight:700} .ch-status{font-size:12px;color:var(--muted);margin-top:2px} .ch-status .live{color:var(--status);font-weight:600} .icon-btn{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;transition:.18s} .icon-btn:hover{background:var(--panel-soft)} html[data-theme="light"] .icon-btn:hover{background:#F3F4F6} .icon-btn svg{width:19px;height:19px;fill:var(--muted)} .msgs{flex:1;overflow-y:auto;padding:22px 20px 10px;display:flex;flex-direction:column;gap:16px;background:var(--panel-soft)} html[data-theme="light"] .msgs{background:#F7F9FA} .msgs::-webkit-scrollbar,.sb-list::-webkit-scrollbar{width:6px} .msgs::-webkit-scrollbar-thumb,.sb-list::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px} html[data-theme="light"] .msgs::-webkit-scrollbar-thumb, html[data-theme="light"] .sb-list::-webkit-scrollbar-thumb{background:#D8DDE3} .day-divider{text-align:center;font-size:11.5px;color:var(--hint);margin:4px 0} .day-divider span{background:var(--day-bg);padding:3px 12px;border-radius:10px;border:1px solid var(--line-soft)} html[data-theme="light"] .day-divider span{border-color:transparent} .msg{display:flex;gap:10px;max-width:74%} .msg.self{align-self:flex-end;flex-direction:row-reverse} .msg .avatar{width:36px;height:36px;font-size:13px} .msg-body{min-width:0} .msg-sender{font-size:11.5px;color:var(--hint);margin-bottom:5px;padding:0 4px} .msg.self .msg-sender{text-align:right} .bubble{padding:10px 14px;border-radius:var(--radius);font-size:14.5px;line-height:1.6;word-break:break-word; box-shadow:var(--shadow)} .msg.other .bubble{background:var(--bubble-other);color:var(--bubble-other-text);border:1px solid var(--line-soft); border-top-left-radius:5px} html[data-theme="light"] .msg.other .bubble{border-color:transparent} .msg.self .bubble{background:var(--bubble-self);color:var(--bubble-self-text);border-top-right-radius:5px;box-shadow:var(--self-glow)} .msg-time{font-size:10.5px;color:var(--hint);margin-top:5px;padding:0 4px} .msg.self .msg-time{text-align:right} /* 已读回执：跟在自己消息时间后面 */ .msg-read{color:var(--primary);font-weight:600;margin-left:7px} .msg-read:empty{display:none} .bubble img{max-width:240px;border-radius:10px;display:block;cursor:pointer} .file-bubble{display:flex;align-items:center;gap:11px;padding:12px 14px;min-width:212px; text-decoration:none;color:inherit} .file-ico{width:38px;height:38px;border-radius:10px;background:var(--file-ico-bg);display:flex;align-items:center; justify-content:center;flex-shrink:0} .file-ico svg{width:19px;height:19px;fill:var(--file-ico-fg)} .file-name{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px} .file-size{font-size:11.5px;opacity:.75;margin-top:2px} .empty-tip{text-align:center;color:var(--hint);font-size:13px;padding:40px 0} .composer{padding:13px 18px 15px;flex-shrink:0;border-top:1px solid var(--line);background:var(--panel-head)} .composer-tools{display:flex;gap:4px;margin-bottom:9px;align-items:center} .tool{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;transition:.18s} .tool:hover{background:var(--panel-soft)} html[data-theme="light"] .tool:hover{background:#F3F4F6} .tool svg{width:18px;height:18px;fill:var(--muted)} .input-row{display:flex;gap:10px;align-items:flex-end} .input-row textarea{flex:1;resize:none;padding:11px 14px;border-radius:12px;font-size:14.5px;line-height:1.5; max-height:110px;min-height:44px;background:var(--input-bg);border:1.5px solid var(--line);transition:.2s} html[data-theme="light"] .input-row textarea{background:#FAFBFC} .input-row textarea::placeholder{color:var(--hint)} .input-row textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3.5px var(--primary-l)} .send-btn{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0; background:linear-gradient(135deg,var(--primary),var(--primary-2));transition:.2s;box-shadow:0 4px 14px rgba(16,185,129,.3)} html[data-theme="dark"] .send-btn{box-shadow:0 8px 24px rgba(139,92,246,.45)} .send-btn:active{transform:scale(.94)} .send-btn svg{width:20px;height:20px;fill:#fff} .paste-hint{font-size:11.5px;color:var(--hint);margin-top:8px;text-align:center} /* 上传进度条 */ .up-bar{position:absolute;left:0;right:0;top:0;height:3px;background:transparent;overflow:hidden;border-radius:3px} .up-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--primary),var(--primary-2));transition:width .2s} /* 未读红圈 */ .unread-dot{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#EF4444;color:#fff; font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0; box-shadow:0 2px 8px rgba(239,68,68,.45);animation:dotPop .25s ease} @keyframes dotPop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}} .load-more-tip{margin:2px 0 6px} /* toast */ #toast{position:fixed;left:50%;bottom:80px;transform:translateX(-50%) translateY(20px);color:#fff; padding:11px 20px;border-radius:12px;font-size:13.5px;opacity:0;transition:.3s;z-index:200;pointer-events:none; box-shadow:0 8px 24px rgba(0,0,0,.25);max-width:90vw;text-align:center} html[data-theme="light"] #toast{background:#111827} html[data-theme="dark"] #toast{background:rgba(20,25,40,.92);backdrop-filter:blur(16px);border:1px solid var(--line)} #toast.on{opacity:1;transform:translateX(-50%) translateY(0)} /* 图片预览 */ #lightbox{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.86);display:none;align-items:center;justify-content:center;padding:24px} #lightbox.on{display:flex} #lightbox img{max-width:100%;max-height:100%;border-radius:10px} .mask{display:none} @media(max-width:768px){ #app{padding:0;gap:0} .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:50;transform:translateX(-102%);transition:transform .3s; width:84%;max-width:310px;border-radius:0 var(--radius) var(--radius) 0} .sidebar.open{transform:translateX(0)} .chat{border-radius:0;border:none} .back-btn{display:flex} .msg{max-width:86%} .msgs{padding:16px 12px 8px} .composer{padding:11px 13px calc(13px + env(safe-area-inset-bottom))} .bubble img{max-width:190px} .mask{display:block;position:fixed;inset:0;z-index:40;background:var(--mask);opacity:0;pointer-events:none;transition:.3s} .mask.on{opacity:1;pointer-events:auto} }