/* ============================================================
   SeaChat · 液态玻璃 UI
   毛玻璃 + 圆角 + 液态玻璃
   ============================================================ */
:root {
  --bg1: #0b0b1a;
  --bg2: #141430;
  --glass: rgba(255,255,255,.055);
  --glass-strong: rgba(255,255,255,.09);
  --glass-border: rgba(255,255,255,.14);
  --glass-border-hi: rgba(255,255,255,.28);
  --txt: #eef0ff;
  --txt-dim: #9aa0c0;
  --txt-dark: #16162e;
  --acc1: #7c5cff;
  --acc2: #ff5c9e;
  --acc3: #38e8c8;
  --danger: #ff5c7a;
  --ok: #3ddc97;
  --warn: #ffc46b;
  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 18px 60px rgba(0,0,0,.45);
}

* { 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", "Segoe UI", sans-serif;
  background: linear-gradient(135deg, var(--bg1), var(--bg2));
  color: var(--txt);
  overflow: hidden;
  font-size: 15px;
}
::selection { background: rgba(124,92,255,.4); }
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius:9px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.26); }

/* ---------- 液态背景光斑 ---------- */
.liquid-bg { position:fixed; inset:0; z-index:0; overflow:hidden; background: linear-gradient(135deg,#0b0b1a 0%,#12122e 45%,#1a1038 100%); }
.blob { position:absolute; border-radius:50%; filter: blur(90px); opacity:.5; mix-blend-mode:screen; }
.b1 { width:520px; height:520px; background:#5b3df5; top:-140px; left:-120px; animation: drift1 18s ease-in-out infinite alternate; }
.b2 { width:440px; height:440px; background:#e8328f; bottom:-120px; right:-100px; animation: drift2 22s ease-in-out infinite alternate; }
.b3 { width:380px; height:380px; background:#12c2e9; top:30%; left:55%; opacity:.32; animation: drift3 26s ease-in-out infinite alternate; }
.b4 { width:300px; height:300px; background:#38e8c8; top:65%; left:12%; opacity:.25; animation: drift1 30s ease-in-out infinite alternate-reverse; }
@keyframes drift1 { from{transform:translate(0,0) scale(1)} to{transform:translate(90px,60px) scale(1.15)} }
@keyframes drift2 { from{transform:translate(0,0) scale(1.1)} to{transform:translate(-80px,-50px) scale(.95)} }
@keyframes drift3 { from{transform:translate(0,0) scale(.95)} to{transform:translate(-110px,80px) scale(1.2)} }

/* ---------- 玻璃基元 ---------- */
.glass {
  position:relative;
  background: linear-gradient(145deg, var(--glass), var(--glass-strong));
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  backdrop-filter: blur(26px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.12);
}
.glass::before {
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(120deg, rgba(255,255,255,.10) 0%, transparent 40%, transparent 60%, rgba(255,255,255,.06) 100%);
}

/* ---------- 登录页 ---------- */
.login-body { display:flex; align-items:center; justify-content:center; }
.login-wrap { position:relative; z-index:2; width:min(420px, 92vw); animation: rise .7s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes rise { from{opacity:0; transform:translateY(30px) scale(.96)} to{opacity:1; transform:none} }
.login-card { padding: 42px 38px 30px; text-align:center; overflow:hidden; }
.logo-ring { width:84px; height:84px; margin:0 auto 18px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(145deg, rgba(124,92,255,.25), rgba(255,92,158,.25));
  border:1px solid var(--glass-border-hi); box-shadow: 0 8px 32px rgba(124,92,255,.35), inset 0 1px 0 rgba(255,255,255,.25); }
.login-title { font-size:30px; font-weight:800; letter-spacing:1px;
  background: linear-gradient(90deg,#a58cff,#ff8cb8,#7df0dd);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.login-sub { color:var(--txt-dim); font-size:13px; margin:10px 0 28px; }
.field { text-align:left; margin-bottom:18px; }
.field label { display:block; font-size:12.5px; color:var(--txt-dim); margin-bottom:8px; letter-spacing:1px; }
.field input {
  width:100%; padding:14px 16px; font-size:15px; color:var(--txt);
  background: rgba(0,0,0,.22); border:1px solid var(--glass-border); border-radius:var(--radius-sm);
  outline:none; transition:.25s;
}
.field input:focus { border-color:var(--acc1); box-shadow:0 0 0 4px rgba(124,92,255,.18); }
.field input::placeholder { color:#6a6f8f; }

.liquid-btn {
  position:relative; width:100%; margin-top:8px; padding:15px; border:none; cursor:pointer; overflow:hidden;
  border-radius:var(--radius-sm); font-size:16px; font-weight:700; color:#fff; letter-spacing:2px;
  background: linear-gradient(120deg, var(--acc1), var(--acc2) 55%, var(--acc1));
  background-size: 220% 100%;
  box-shadow: 0 10px 30px rgba(124,92,255,.4);
  transition: background-position .6s, transform .15s, box-shadow .3s;
}
.liquid-btn:hover { background-position: 100% 0; box-shadow: 0 14px 38px rgba(255,92,158,.45); }
.liquid-btn:active { transform: scale(.97); }
.liquid-btn.loading { opacity:.75; pointer-events:none; }
.liquid-btn .btn-shine { position:absolute; top:0; left:-60%; width:40%; height:100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent);
  animation: shine 3.2s ease-in-out infinite; }
@keyframes shine { 0%{left:-60%} 55%{left:130%} 100%{left:130%} }

.login-tip { margin-top:14px; font-size:13px; min-height:18px; color:var(--danger); }
.login-foot { margin-top:20px; font-size:12px; color:#5c6184; letter-spacing:.5px; }

/* ---------- 聊天主界面布局 ---------- */
.chat-body { display:flex; }
.chat-shell { position:relative; z-index:2; display:flex; gap:14px; width:min(1500px, 98vw); height:min(92vh, 860px); margin:auto; padding:14px; }

/* 左侧：房间 */
.side-left { width:250px; flex-shrink:0; display:flex; flex-direction:column; overflow:hidden; }
.panel-head { padding:18px 18px 12px; display:flex; align-items:center; gap:10px; }
.panel-head .logo-mini { width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(124,92,255,.4), rgba(255,92,158,.4)); border:1px solid var(--glass-border-hi); }
.panel-head .t { font-weight:800; font-size:16px; letter-spacing:.5px; }
.panel-head .sub { font-size:11px; color:var(--txt-dim); }
.room-list { flex:1; overflow-y:auto; padding:6px 10px 10px; }
.room-item {
  display:flex; align-items:center; gap:10px; padding:12px 12px; margin-bottom:6px; cursor:pointer;
  border-radius:var(--radius-sm); border:1px solid transparent; transition:.2s;
}
.room-item:hover { background: rgba(255,255,255,.06); }
.room-item.active {
  background: linear-gradient(135deg, rgba(124,92,255,.28), rgba(255,92,158,.18));
  border-color: rgba(124,92,255,.45); box-shadow: 0 4px 18px rgba(124,92,255,.2);
}
.room-ico { width:38px; height:38px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:18px;
  background: linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.03)); border:1px solid var(--glass-border); }
.room-item .rn { font-weight:600; font-size:14px; }
.room-item .rd { font-size:11px; color:var(--txt-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px; }
.room-item .pin-badge { font-size:10px; color:var(--warn); }
.room-admin { padding:10px 12px 14px; border-top:1px solid var(--glass-border); }
.room-admin .mini-btn { margin:4px 4px 0 0; }

/* 中间：聊天区 */
.chat-main { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }
.chat-head { padding:14px 20px; display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--glass-border); }
.chat-head .ct { font-size:17px; font-weight:800; }
.chat-head .cs { font-size:12px; color:var(--txt-dim); }
.online-dot { width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 10px var(--ok); }
.chat-head-right { margin-left:auto; display:flex; align-items:center; gap:10px; }

.msg-area { flex:1; overflow-y:auto; padding:20px 22px; scroll-behavior:smooth; }
.msg-date-line { text-align:center; font-size:11px; color:#5c6184; margin:14px 0 6px; }
.msg-row { display:flex; margin-bottom:14px; animation: msgIn .3s ease both; align-items:flex-start; gap:10px; }
@keyframes msgIn { from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
.msg-row.self { flex-direction:row-reverse; }
.avatar {
  width:38px; height:38px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:800; color:#fff; border:1px solid rgba(255,255,255,.2);
  background: linear-gradient(135deg, var(--av1,#7c5cff), var(--av2,#ff5c9e));
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
.msg-body { max-width:min(560px, 72%); display:flex; flex-direction:column; }
.msg-row.self .msg-body { align-items:flex-end; }
.msg-meta { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--txt-dim); margin-bottom:4px; }
.msg-row.self .msg-meta { flex-direction:row-reverse; }
.msg-meta .uname { font-weight:700; font-size:12.5px; color:var(--txt); }
.msg-meta .role-badge { font-size:9px; padding:1px 7px; border-radius:8px; background:rgba(124,92,255,.25); color:#b9a8ff; border:1px solid rgba(124,92,255,.4); }
.msg-meta .role-badge.admin { background:rgba(255,92,158,.22); color:#ffb0cd; border-color:rgba(255,92,158,.45); }
.msg-meta .role-badge.super { background:linear-gradient(120deg,rgba(124,92,255,.4),rgba(255,92,158,.4)); color:#fff; border:none; }
.bubble {
  padding:10px 15px; border-radius:18px; font-size:14.5px; line-height:1.65; word-break:break-word;
  background: rgba(255,255,255,.07); border:1px solid var(--glass-border);
  border-top-left-radius:6px; position:relative;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.msg-row.self .bubble {
  background: linear-gradient(135deg, rgba(124,92,255,.42), rgba(255,92,158,.34));
  border-color: rgba(255,255,255,.2); border-top-left-radius:18px; border-top-right-radius:6px;
}
.bubble.revoked { opacity:.45; font-style:italic; }
.bubble .reply-chip {
  display:block; font-size:12px; color:var(--txt-dim); padding:6px 10px; margin-bottom:6px;
  background: rgba(0,0,0,.22); border-left:3px solid var(--acc1); border-radius:8px;
  cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.bubble img.msg-img { max-width:100%; max-height:340px; border-radius:12px; display:block; cursor:zoom-in; box-shadow:0 6px 20px rgba(0,0,0,.35); }
.bubble .img-expire { display:block; font-size:10px; color:#5c6184; margin-top:4px; }
.msg-ops { display:flex; gap:6px; margin-top:3px; opacity:0; transition:.2s; }
.msg-row:hover .msg-ops { opacity:1; }
.msg-row.self .msg-ops { flex-direction:row-reverse; }
.msg-ops button { font-size:11px; padding:3px 10px; border-radius:10px; cursor:pointer; color:var(--txt-dim);
  background:rgba(255,255,255,.05); border:1px solid var(--glass-border); transition:.2s; }
.msg-ops button:hover { color:#fff; background:rgba(124,92,255,.3); border-color:var(--acc1); }
.msg-ops button.danger:hover { background:rgba(255,92,122,.3); border-color:var(--danger); color:#ffb8c6; }
.msg-ops button.admin-only { display:none; }
body.is-admin .msg-ops button.admin-only { display:inline-block; }
.sys-line { text-align:center; margin:10px 0; font-size:12px; color:var(--txt-dim); }

/* 输入区 */
.input-area { padding:12px 16px 16px; border-top:1px solid var(--glass-border); }
.reply-bar { display:none; align-items:center; gap:8px; padding:8px 12px; margin-bottom:8px; font-size:12px;
  background:rgba(124,92,255,.15); border:1px solid rgba(124,92,255,.35); border-radius:12px; color:#c9bcff; }
.reply-bar.show { display:flex; }
.reply-bar .x { margin-left:auto; cursor:pointer; color:var(--txt-dim); font-size:14px; }
.input-row { display:flex; align-items:flex-end; gap:10px; }
.input-row textarea {
  flex:1; resize:none; height:46px; max-height:120px; padding:13px 16px; font-size:14.5px; color:var(--txt);
  background: rgba(0,0,0,.24); border:1px solid var(--glass-border); border-radius:16px; outline:none; transition:.25s;
  font-family:inherit; line-height:1.5;
}
.input-row textarea:focus { border-color:var(--acc1); box-shadow:0 0 0 4px rgba(124,92,255,.15); }
.icon-btn {
  width:46px; height:46px; border-radius:16px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:20px; background: rgba(255,255,255,.06); border:1px solid var(--glass-border);
  transition:.2s; color:var(--txt);
}
.icon-btn:hover { background:rgba(124,92,255,.25); border-color:var(--acc1); }
.send-btn { width:auto; padding:0 22px; font-size:14.5px; font-weight:700; color:#fff;
  background: linear-gradient(120deg, var(--acc1), var(--acc2)); border:none;
  box-shadow: 0 8px 22px rgba(124,92,255,.35); }
.send-btn:hover { background-position:100% 0; filter:brightness(1.1); }
.muted-banner { padding:10px 16px; border-radius:12px; background:rgba(255,196,107,.12); border:1px solid rgba(255,196,107,.3);
  color:var(--warn); font-size:13px; text-align:center; margin-bottom:8px; }

/* 右侧：用户/管理 */
.side-right { width:268px; flex-shrink:0; display:flex; flex-direction:column; overflow:hidden; }
.tabs { display:flex; padding:14px 14px 0; gap:6px; }
.tab { flex:1; text-align:center; padding:9px 0; font-size:13px; border-radius:12px; cursor:pointer;
  color:var(--txt-dim); transition:.2s; border:1px solid transparent; }
.tab:hover { color:var(--txt); }
.tab.active { color:#fff; background:linear-gradient(135deg, rgba(124,92,255,.35), rgba(255,92,158,.28)); border-color:rgba(124,92,255,.4); }
.tab-body { flex:1; overflow-y:auto; padding:12px 12px 14px; }
.user-item { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:13px; margin-bottom:4px; transition:.2s; }
.user-item:hover { background:rgba(255,255,255,.05); }
.user-item .un { font-weight:600; font-size:13.5px; }
.user-item .un small { color:var(--txt-dim); font-weight:400; }
.user-item .uact { margin-left:auto; display:none; gap:5px; }
.user-item:hover .uact { display:flex; }
body.is-admin .user-item .uact { display:flex; }
.uact button { font-size:10.5px; padding:3px 8px; border-radius:9px; cursor:pointer;
  background:rgba(255,255,255,.06); border:1px solid var(--glass-border); color:var(--txt-dim); }
.uact button:hover { color:#fff; border-color:var(--acc1); }
.uact button.danger { color:#ff9db2; }
.uact button.danger:hover { background:rgba(255,92,122,.25); border-color:var(--danger); }
.me-card { padding:14px; border-radius:16px; background:rgba(255,255,255,.05); border:1px solid var(--glass-border);
  display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.me-card .mname { font-weight:700; font-size:14px; }
.me-card .mrole { font-size:11px; color:var(--txt-dim); }
.me-actions { margin-left:auto; display:flex; gap:6px; }
.me-actions button { font-size:11px; padding:4px 9px; border-radius:9px; cursor:pointer; color:var(--txt-dim);
  background:rgba(255,255,255,.05); border:1px solid var(--glass-border); }
.me-actions button:hover { color:#fff; }

/* 管理面板样式 */
.admin-sec { margin-bottom:16px; }
.admin-sec h4 { font-size:12px; color:var(--txt-dim); letter-spacing:1px; margin-bottom:8px; padding-left:4px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.adm-btn { padding:9px 6px; font-size:12px; border-radius:12px; cursor:pointer; text-align:center;
  background:rgba(255,255,255,.05); border:1px solid var(--glass-border); color:var(--txt); transition:.2s; }
.adm-btn:hover { background:rgba(124,92,255,.25); border-color:var(--acc1); }
.adm-btn.warn { color:var(--warn); }
.adm-btn.danger { color:var(--danger); }
.adm-btn.danger:hover { background:rgba(255,92,122,.2); border-color:var(--danger); }
.report-item { padding:10px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid var(--glass-border); margin-bottom:8px; font-size:12.5px; }
.report-item .rt { color:var(--txt); font-weight:600; }
.report-item .rd { color:var(--txt-dim); margin:4px 0; }
.report-item .rbtn { margin-top:6px; display:flex; gap:6px; }
.report-item .rbtn button { flex:1; padding:5px; font-size:11px; border-radius:9px; cursor:pointer; border:1px solid var(--glass-border); background:rgba(255,255,255,.05); color:var(--txt-dim); }
.report-item .rbtn button:hover { color:#fff; border-color:var(--acc1); }
.stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.stat-cell { padding:12px; text-align:center; border-radius:14px; background:rgba(255,255,255,.04); border:1px solid var(--glass-border); }
.stat-cell .sv { font-size:22px; font-weight:800; background:linear-gradient(90deg,#a58cff,#ff8cb8); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.stat-cell .sl { font-size:11px; color:var(--txt-dim); margin-top:2px; }
.kv-row { display:flex; justify-content:space-between; font-size:12.5px; color:var(--txt-dim); padding:6px 4px; border-bottom:1px dashed rgba(255,255,255,.07); }

/* ---------- 弹窗 ---------- */
.modal-mask { position:fixed; inset:0; z-index:99; display:none; align-items:center; justify-content:center;
  background:rgba(5,5,15,.6); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.modal-mask.show { display:flex; }
.modal { width:min(420px, 92vw); padding:26px; animation: modalIn .25s ease both; }
@keyframes modalIn { from{opacity:0; transform:scale(.92) translateY(14px)} to{opacity:1; transform:none} }
.modal h3 { font-size:17px; margin-bottom:16px; }
.modal .field input, .modal .field select, .modal .field textarea {
  width:100%; padding:12px 14px; font-size:14px; color:var(--txt);
  background:rgba(0,0,0,.24); border:1px solid var(--glass-border); border-radius:12px; outline:none; margin-bottom:12px; font-family:inherit;
}
.modal .field select option { background:#1a1a36; }
.modal .field input:focus { border-color:var(--acc1); }
.modal-btns { display:flex; gap:10px; margin-top:6px; }
.modal-btns button { flex:1; padding:12px; border-radius:13px; cursor:pointer; font-size:14px; font-weight:600; border:1px solid var(--glass-border); background:rgba(255,255,255,.05); color:var(--txt); }
.modal-btns button.pri { background:linear-gradient(120deg,var(--acc1),var(--acc2)); color:#fff; border:none; }
.modal-btns button.danger { background:linear-gradient(120deg,#ff5c7a,#ff2d55); color:#fff; border:none; }
.toast-wrap { position:fixed; top:22px; left:50%; transform:translateX(-50%); z-index:999; display:flex; flex-direction:column; gap:8px; align-items:center; }
.toast { padding:10px 22px; border-radius:14px; font-size:13.5px; color:#fff; animation: toastIn .3s ease both;
  background: rgba(30,30,60,.85); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border:1px solid var(--glass-border-hi); box-shadow:0 10px 30px rgba(0,0,0,.4); }
.toast.ok { border-color:rgba(61,220,151,.5); }
.toast.err { border-color:rgba(255,92,122,.5); }
@keyframes toastIn { from{opacity:0; transform:translateY(-14px)} to{opacity:1; transform:none} }
.img-viewer { position:fixed; inset:0; z-index:120; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.8); cursor:zoom-out; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.img-viewer.show { display:flex; }
.img-viewer img { max-width:92vw; max-height:90vh; border-radius:14px; box-shadow:0 20px 80px rgba(0,0,0,.6); }

/* ---------- 响应式 ---------- */
@media (max-width: 1000px) {
  .side-left { width:86px; }
  .side-left .rn, .side-left .rd, .side-left .sub, .side-left .t, .room-admin { display:none; }
  .room-item { justify-content:center; }
  .side-right { width:76px; }
  .side-right .tab { font-size:11px; padding:9px 2px; }
  .tab-body { padding:8px 6px; }
  .user-item .un, .me-card .mname, .me-card .mrole, .me-actions, .admin-sec h4, .stat-cell .sl, .kv-row { font-size:10px; }
}
@media (max-width: 760px) {
  body { overflow:hidden; }
  .chat-shell { width:100vw; height:100dvh; padding:0; gap:0; border-radius:0; }
  .glass { border-radius:0; border:none; }
  .side-left { width:64px; }
  .side-right { display:none; }
  .msg-area { padding:14px; }
  .bubble { max-width:80%; }
  .icon-btn { width:42px; height:42px; }
  .input-row textarea { padding:11px 12px; }
}