/* KOOK 风聊天室 · chat.css */
:root {
  --k-bg: #1e1f22;
  --k-panel: #26272b;
  --k-panel2: #2b2c31;
  --k-hover: #35363c;
  --k-text: #e6e7ea;
  --k-dim: #949ba4;
  --k-accent: #4e8df5;
  --k-green: #3ddc84;
  --k-red: #f56b5d;
}

.kook-app {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background: var(--k-bg);
  color: var(--k-text);
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
}

.kook-app a { text-decoration: none; color: inherit; }
.kook-app button { font-family: inherit; }

/* ---------- 服务器栏 ---------- */
.k-rail {
  width: 68px;
  background: #17181a;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  gap: 10px;
  flex-shrink: 0;
}

.k-server-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--k-accent);
  color: #fff;
  font-family: "Anton", "PingFang SC", sans-serif;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-radius 0.2s;
}

.k-server-icon:hover { border-radius: 10px; }

.k-rail-sep { width: 32px; height: 2px; background: #35363c; border-radius: 1px; }

.k-rail-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--k-panel);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  transition: border-radius 0.2s, background 0.2s;
}

.k-rail-icon:hover { border-radius: 12px; background: var(--k-hover); }
.k-rail-icon.active { background: var(--k-accent); border-radius: 12px; }

/* ---------- 频道列表 ---------- */
.k-sidebar {
  width: 236px;
  background: var(--k-panel);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.k-server-head {
  padding: 14px 16px;
  font-family: "Anton", "PingFang SC", sans-serif;
  font-size: 16px;
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.35);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
}

.k-server-head span { display: block; font-family: var(--k-font, inherit); font-size: 10.5px; color: var(--k-dim); letter-spacing: 0.18em; }

.k-channels { flex: 1; overflow-y: auto; padding: 10px 6px; }

.k-group {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--k-dim);
  padding: 14px 8px 5px;
}

.k-chan {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 8px;
  border-radius: 8px;
  color: var(--k-dim);
  cursor: pointer;
  margin-bottom: 1px;
}

.k-chan:hover { background: var(--k-hover); color: var(--k-text); }
.k-chan.active { background: rgba(78, 141, 245, 0.18); color: var(--k-text); }

.k-chan .k-ch-hash { font-size: 17px; opacity: 0.75; width: 18px; text-align: center; }
.k-chan .k-ch-name { flex: 1; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-chan .k-ch-count { font-size: 10.5px; color: var(--k-dim); background: rgba(0, 0, 0, 0.3); border-radius: 8px; padding: 1px 7px; }

.k-chan .k-vmember { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--k-dim); padding: 2px 0 2px 24px; }
.k-chan .k-vmember .k-vdot { width: 7px; height: 7px; border-radius: 50%; background: var(--k-green); }

/* 用户栏 */
.k-userbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background: #232428;
  align-items: center;
}

.k-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--k-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}

.k-userinfo { flex: 1; min-width: 0; }
.k-userinfo b { display: block; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-userinfo span { font-size: 10px; color: var(--k-dim); }

.k-iconbtn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  font-size: 15px;
  cursor: pointer;
}

.k-iconbtn:hover { background: var(--k-hover); }
.k-iconbtn.off { background: rgba(245, 107, 93, 0.2); }

/* ---------- 主区域 ---------- */
.k-main { flex: 1; display: flex; flex-direction: column; background: var(--k-bg); min-width: 0; }

.k-main-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.35);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03);
  min-height: 50px;
}

.k-chan-icon { color: var(--k-dim); font-size: 20px; }
.k-main-head b { font-size: 15px; }
.k-topic { color: var(--k-dim); font-size: 12px; border-left: 1px solid #3a3b40; padding-left: 10px; margin-left: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-conn { margin-left: auto; font-family: ui-monospace, Consolas, monospace; font-size: 10.5px; color: var(--k-dim); }
.k-conn.on { color: var(--k-green); }

.k-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* 消息列表 */
.k-messages { flex: 1; overflow-y: auto; padding: 16px 18px 8px; }

.k-msg { display: flex; gap: 12px; padding: 5px 0; }
.k-msg .k-msg-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  font-size: 15px;
}

.k-msg .k-msg-body { min-width: 0; flex: 1; }
.k-msg .k-msg-head { display: flex; align-items: baseline; gap: 8px; }
.k-msg .k-msg-name { font-weight: 700; font-size: 13.5px; }
.k-msg .k-msg-name.admin::after { content: "战区长"; font-size: 9px; background: var(--k-red); color: #fff; border-radius: 5px; padding: 1px 5px; margin-left: 6px; vertical-align: 1px; }
.k-msg .k-msg-time { font-size: 10px; color: var(--k-dim); }
.k-msg .k-msg-text { font-size: 14px; line-height: 1.55; color: #dcdee1; word-break: break-word; white-space: pre-wrap; }

.k-msg.k-msg-me .k-msg-name { color: var(--k-green); }
.k-sysmsg { text-align: center; font-size: 11.5px; color: var(--k-dim); padding: 6px; }

/* 输入栏 */
.k-inputbar { display: flex; gap: 10px; padding: 12px 16px 16px; }
.k-inputbar input {
  flex: 1;
  background: var(--k-panel2);
  border: none;
  border-radius: 10px;
  color: var(--k-text);
  font-size: 14px;
  padding: 12px 15px;
  outline: none;
}
.k-inputbar input:focus { box-shadow: 0 0 0 2px rgba(78, 141, 245, 0.35); }
.k-inputbar button {
  background: var(--k-accent);
  border: none;
  color: #fff;
  font-weight: 700;
  padding: 0 20px;
  border-radius: 10px;
  cursor: pointer;
}
.k-inputbar button:hover { background: #5f9cf7; }

/* ---------- 语音房 ---------- */
.k-voicebody { align-items: center; justify-content: center; }

.k-voice-hero { text-align: center; width: 100%; max-width: 760px; padding: 20px; }

.k-voice-state {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  color: var(--k-dim);
  margin-bottom: 22px;
}

.k-voice-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
  margin-bottom: 26px;
  min-height: 130px;
}

.k-vtile {
  width: 120px;
  background: var(--k-panel2);
  border-radius: 14px;
  padding: 18px 10px 12px;
  position: relative;
  border: 2px solid transparent;
}

.k-vtile .k-vava {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  margin: 0 auto 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 22px;
  color: #fff;
  background: var(--k-accent);
}

.k-vtile.speaking { border-color: var(--k-green); }
.k-vtile.speaking .k-vava { box-shadow: 0 0 0 3px var(--k-green); }

.k-vtile .k-vname { font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-vtile .k-vstate { font-size: 10px; color: var(--k-dim); margin-top: 3px; }
.k-vtile .k-vstate.muted { color: var(--k-red); }

.k-voice-ctl { display: flex; gap: 12px; justify-content: center; }

.k-btn {
  border: none;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 700;
  padding: 13px 26px;
  cursor: pointer;
  transition: transform 0.12s, filter 0.12s;
}

.k-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }
.k-btn-green { background: var(--k-green); color: #06220f; }
.k-btn-red { background: var(--k-red); color: #fff; }

.k-voice-tip { margin-top: 18px; font-size: 11px; color: var(--k-dim); }

/* ---------- 成员列表 ---------- */
.k-members {
  width: 200px;
  background: var(--k-panel);
  flex-shrink: 0;
  overflow-y: auto;
  padding: 14px 10px;
}

.k-mem-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--k-dim);
  margin-bottom: 10px;
}

.k-mem-row { display: flex; align-items: center; gap: 9px; padding: 6px 6px; border-radius: 8px; }
.k-mem-row:hover { background: var(--k-hover); }
.k-mem-row .k-mava {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  position: relative;
  flex-shrink: 0;
}

.k-mem-row .k-mava::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--k-green);
  border: 2px solid var(--k-panel);
}

.k-mem-row .k-mname { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-mem-row .k-mname.admin::after { content: " 👑"; }

/* ---------- 未登录遮罩 ---------- */
.k-login-overlay {
  position: fixed;
  inset: 0;
  /* 修复：必须低于 .auth-overlay 的 9000，否则会盖住账号密码输入框 */
  z-index: 8500;
  background: rgba(10, 10, 12, 0.88);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.k-login-card { text-align: center; max-width: 360px; padding: 30px; }
.k-login-tag { font-family: ui-monospace, Consolas, monospace; font-size: 11px; letter-spacing: 0.2em; color: var(--k-accent); margin-bottom: 12px; }
.k-login-card h2 { font-family: "Anton", "PingFang SC", sans-serif; font-size: 30px; margin-bottom: 10px; }
.k-login-card p { color: var(--k-dim); font-size: 13.5px; margin-bottom: 22px; }
.k-login-card button {
  background: var(--k-accent);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  padding: 13px 34px;
  cursor: pointer;
}

.k-login-card button:hover { filter: brightness(1.12); }

@media (max-width: 1100px) {
  .k-members { display: none; }
}

@media (max-width: 760px) {
  .k-sidebar { width: 190px; }
  .k-topic { display: none; }
}

/* ===== v4 新增 ===== */
.k-group-tip{font-size:9px;font-weight:400;letter-spacing:0.05em;color:rgba(148,155,164,0.7);margin-left:4px}
.k-ch-badge{font-size:10.5px;font-weight:700;color:#fff;background:var(--k-red);border-radius:9px;padding:1px 7px}
.k-mention{color:var(--k-accent);background:rgba(78,141,245,0.14);border-radius:5px;padding:1px 4px;font-weight:600}
.k-msg-del{background:none;border:none;cursor:pointer;font-size:11px;opacity:0;color:var(--k-dim);padding:1px 5px;border-radius:5px}
.k-msg:hover .k-msg-del{opacity:0.75}
.k-msg-del:hover{opacity:1;background:rgba(245,107,93,0.18)}
.k-emoji-bar{display:flex;flex-wrap:wrap;gap:4px;padding:8px 16px 0;max-height:96px;overflow-y:auto}
.k-emoji{background:transparent;border:none;font-size:19px;cursor:pointer;border-radius:7px;padding:3px 5px}
.k-emoji:hover{background:var(--k-hover)}
.k-input-ico{background:transparent;border:none;font-size:19px;cursor:pointer;padding:0 4px}
.k-btn-blue{background:var(--k-accent);color:#fff}
.k-vvideo{display:none;width:100%;height:96px;object-fit:cover;border-radius:10px;background:#000}
.k-vol{width:100%;margin-top:6px;accent-color:var(--k-green);cursor:pointer}
.k-vtile .k-vstate.muted{color:var(--k-red)}