/* 聊天挂件 + 管理页公共样式（跟随站点深色主题） */
:root {
  --gq-bg: #0f1419;
  --gq-panel: #161d27;
  --gq-panel-2: #1c2530;
  --gq-line: rgba(255, 255, 255, 0.08);
  --gq-text: #e6edf3;
  --gq-muted: #94a3b8;
  --gq-accent: #e8a050;
  --gq-accent-2: #b7410e;
  --gq-green: #34d399;
}

#gq-chat { position: fixed; right: 18px; bottom: 18px; z-index: 9999; font-family: "PingFang SC", "Microsoft YaHei", Inter, sans-serif; }
#gq-chat-btn { width: 56px; height: 56px; border-radius: 50%; border: none; background: linear-gradient(135deg, var(--gq-accent), var(--gq-accent-2)); color: #fff; font-size: 24px; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); }
#gq-chat-panel { position: fixed; right: 18px; bottom: 84px; width: 360px; max-width: calc(100vw - 24px); height: 520px; max-height: calc(100vh - 120px); background: var(--gq-panel); border: 1px solid var(--gq-line); border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); }
.gq-hidden { display: none !important; }
.gq-header { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: var(--gq-panel-2); border-bottom: 1px solid var(--gq-line); }
.gq-dot { width: 8px; height: 8px; border-radius: 50%; background: #64748b; }
.gq-dot.on { background: var(--gq-green); box-shadow: 0 0 6px var(--gq-green); }
.gq-title { flex: 1; color: var(--gq-text); font-size: 14px; }
.gq-close { border: none; background: none; color: var(--gq-muted); font-size: 16px; cursor: pointer; }
#gq-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#gq-form { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
#gq-form .gq-tip { color: var(--gq-muted); font-size: 13px; margin: 0 0 4px; }
#gq-form input, .gq-login-card input { background: var(--gq-panel-2); border: 1px solid var(--gq-line); border-radius: 8px; padding: 10px 12px; color: var(--gq-text); font-size: 14px; outline: none; }
#gq-form input:focus { border-color: var(--gq-accent); }
#gq-start, #gq-send, #chat-send, #login-btn { background: var(--gq-accent); color: #101418; border: none; border-radius: 8px; padding: 10px; font-size: 14px; font-weight: 600; cursor: pointer; }
#gq-chat-view { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#gq-messages, .gq-msgs { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.gq-msg { display: flex; flex-direction: column; max-width: 82%; }
.gq-msg.me { align-self: flex-end; align-items: flex-end; }
.gq-msg.them { align-self: flex-start; align-items: flex-start; }
.gq-bubble { padding: 8px 12px; border-radius: 12px; font-size: 14px; line-height: 1.45; color: var(--gq-text); word-break: break-word; }
.gq-msg.me .gq-bubble { background: var(--gq-accent); color: #101418; border-bottom-right-radius: 4px; }
.gq-msg.them .gq-bubble { background: var(--gq-panel-2); border-bottom-left-radius: 4px; }
.gq-time { font-size: 11px; color: var(--gq-muted); margin-top: 2px; }
.gq-error, .gq-notice { font-size: 12px; color: #f87171; text-align: center; padding: 4px; }
.gq-input-row { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--gq-line); background: var(--gq-panel); }
.gq-input-row input { flex: 1; background: var(--gq-panel-2); border: 1px solid var(--gq-line); border-radius: 8px; padding: 9px 12px; color: var(--gq-text); font-size: 14px; outline: none; }
.gq-input-row input:focus { border-color: var(--gq-accent); }

/* 管理页 */
body.gq-admin { margin: 0; background: var(--gq-bg); color: var(--gq-text); font-family: "PingFang SC", "Microsoft YaHei", Inter, sans-serif; height: 100vh; }
.gq-view { height: 100vh; display: flex; flex-direction: column; }
.gq-login-card { margin: auto; width: 320px; max-width: calc(100vw - 32px); background: var(--gq-panel); border: 1px solid var(--gq-line); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.gq-login-card h1 { font-size: 18px; margin: 0 0 6px; }
.gq-list-header, .gq-chat-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: var(--gq-panel-2); border-bottom: 1px solid var(--gq-line); }
.gq-chat-header { justify-content: flex-start; gap: 10px; }
.gq-chat-header button { background: none; border: none; color: var(--gq-text); font-size: 18px; cursor: pointer; }
.gq-conv-list { flex: 1; overflow-y: auto; }
.gq-conv { padding: 12px 14px; border-bottom: 1px solid var(--gq-line); cursor: pointer; }
.gq-conv:hover, .gq-conv.active { background: var(--gq-panel-2); }
.gq-conv-name { font-size: 14px; font-weight: 600; }
.gq-conv-meta { font-size: 12px; color: var(--gq-muted); margin-top: 4px; }
.gq-empty { padding: 24px; text-align: center; color: var(--gq-muted); }
.gq-status { font-size: 12px; color: var(--gq-muted); }
#chat-title { font-size: 15px; font-weight: 600; }
#login-error { color: #f87171; font-size: 13px; min-height: 18px; }

@media (max-width: 480px) {
  #gq-chat-panel { right: 0; bottom: 0; width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
  #gq-chat-btn { position: fixed; right: 16px; bottom: 16px; }
}

/* 群聊挂件 */
#gq-group { position: fixed; right: 84px; bottom: 18px; z-index: 10000; font-family: "PingFang SC", "Microsoft YaHei", Inter, sans-serif; }
#gq-group-btn { width: 56px; height: 56px; border-radius: 50%; border: none; background: linear-gradient(135deg, #34d399, #0d9488); color: #fff; font-size: 24px; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); }
#gq-group-panel { position: fixed; right: 18px; bottom: 84px; width: 360px; max-width: calc(100vw - 24px); height: 520px; max-height: calc(100vh - 120px); background: var(--gq-panel); border: 1px solid var(--gq-line); border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); }
#gq-group-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#gq-group-form { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
#gq-group-form .gq-tip { color: var(--gq-muted); font-size: 13px; margin: 0 0 4px; }
#gq-group-form input { background: var(--gq-panel-2); border: 1px solid var(--gq-line); border-radius: 8px; padding: 10px 12px; color: var(--gq-text); font-size: 14px; outline: none; }
#gq-group-form input:focus { border-color: #34d399; }
#gq-group-join, #gq-group-send { background: #34d399; color: #101418; border: none; border-radius: 8px; padding: 10px; font-size: 14px; font-weight: 600; cursor: pointer; }
#gq-group-chat-view { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#gq-group-messages { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.gq-msg .gq-nick { font-size: 11px; color: var(--gq-muted); margin-bottom: 2px; }
.gq-msg.me .gq-nick { text-align: right; }
.gq-count { font-size: 12px; color: var(--gq-muted); margin-left: auto; }
#gq-group-input-row { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--gq-line); background: var(--gq-panel); }
#gq-group-input-row input { flex: 1; background: var(--gq-panel-2); border: 1px solid var(--gq-line); border-radius: 8px; padding: 9px 12px; color: var(--gq-text); font-size: 14px; outline: none; }
#gq-group-input-row input:focus { border-color: #34d399; }
@media (max-width: 480px) {
  #gq-group-panel { right: 0; bottom: 0; width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
  #gq-group-btn { position: fixed; right: 82px; bottom: 16px; }
}

/* 管理端：头部按钮 + 群聊记录 */
.gq-list-header .gq-header-actions { display: flex; gap: 8px; align-items: center; }
.gq-list-header button { background: var(--gq-panel-2); border: 1px solid var(--gq-line); color: var(--gq-text); border-radius: 6px; padding: 6px 12px; cursor: pointer; font-size: 13px; }
.gq-list-header button:hover { border-color: var(--gq-accent); }
.gq-list-header .gq-btn-accent { background: var(--gq-accent); color: #101418; border: none; font-weight: 600; }
.gq-group-row { display: flex; align-items: center; gap: 10px; }
.gq-group-row .gq-group-info { flex: 1; min-width: 0; }
.gq-group-row .gq-conv-meta { word-break: break-word; white-space: normal; }
.gq-del { flex-shrink: 0; background: none; border: 1px solid rgba(248, 113, 113, 0.5); color: #f87171; border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: 12px; }
.gq-del:hover { background: rgba(248, 113, 113, 0.15); }