.group-page-header {
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: var(--gap-md); margin-bottom: var(--gap-xl);
      padding-bottom: var(--gap-lg); border-bottom: var(--ui-border) solid var(--ui-line);
    }
    .group-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: var(--gap-md);
    }
    .group-card {
      background: var(--ui-surface); border: var(--ui-border) solid var(--ui-line);
      padding: var(--gap-lg); transition: border-color var(--dur-fast) var(--ease-out);
      cursor: pointer; text-decoration: none; color: var(--ui-fg); display: block;
    }
    .group-card:hover { border-color: var(--ui-line-hover); }
    .group-card-name {
      font-family: var(--font-serif); font-size: 1.1rem; font-weight: 600;
      letter-spacing: -0.02em; margin-bottom: var(--gap-xs);
    }
    .group-card-desc {
      font-size: 0.8rem; color: var(--ui-fg-muted); line-height: 1.6;
      margin-bottom: var(--gap-md); display: -webkit-box; -webkit-line-clamp: 2;
      -webkit-box-orient: vertical; overflow: hidden;
    }
    .group-card-meta {
      display: flex; gap: var(--gap-lg); font-family: var(--font-mono);
      font-size: 0.65rem; color: var(--ui-fg-muted);
      padding-top: var(--gap-sm); border-top: var(--ui-border) solid var(--ui-line);
    }

    /* Create form */
    .create-form {
      background: var(--ui-surface); border: var(--ui-border) solid var(--ui-line);
      padding: var(--gap-lg); margin-bottom: var(--gap-xl);
    }
    .create-form h3 {
      font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase;
      letter-spacing: 0.1em; color: var(--ui-fg-muted); margin-bottom: var(--gap-md);
    }
    .create-form-row {
      display: flex; gap: var(--gap-sm); flex-wrap: wrap;
    }
    .create-form input {
      flex: 1; min-width: 200px; padding: var(--gap-sm) var(--gap-md);
      background: var(--ui-bg); color: var(--ui-fg); border: var(--ui-border) solid var(--ui-line);
      font-family: var(--font-sans); font-size: 0.85rem;
    }
    .create-form input:focus { outline: none; border-color: var(--ui-fg); }
    .create-form input::placeholder { color: var(--ui-fg-muted); }

    /* ─── Group Detail / Chat Bar ─── */
    .group-detail { display: none; }
    .group-info-bar {
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: var(--gap-md); padding: var(--gap-lg);
      background: var(--ui-surface); border: var(--ui-border) solid var(--ui-line);
      margin-bottom: var(--gap-lg);
    }
    .group-info-name {
      font-family: var(--font-serif); font-size: 1.25rem; font-weight: 700;
    }
    .group-info-meta {
      font-family: var(--font-mono); font-size: 0.65rem; color: var(--ui-fg-muted);
    }
    .group-actions { display: flex; gap: var(--gap-sm); flex-wrap: wrap; }
    .online-badge {
      display: inline-flex; align-items: center; gap: 4px;
      font-family: var(--font-mono); font-size: 0.62rem; color: #4ade80;
      margin-left: var(--gap-sm);
    }
    .online-dot {
      width: 6px; height: 6px; border-radius: 50%; background: #4ade80;
      animation: pulse-dot 2s infinite;
    }
    @keyframes pulse-dot {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.4; }
    }

    /* ─── Chat Layout ─── */
    .group-detail-layout {
      display: grid; grid-template-columns: 1fr 260px; gap: var(--gap-lg);
      height: calc(100vh - 220px); min-height: 480px;
    }
    .group-chat-area {
      display: flex; flex-direction: column;
      background: var(--ui-surface); border: var(--ui-border) solid var(--ui-line);
      min-width: 0; overflow: hidden;
    }

    /* ─── Chat Messages (QQ/WeChat Bubble Style) ─── */
    .chat-messages {
      flex: 1; overflow-y: auto; padding: var(--gap-md);
      display: flex; flex-direction: column-reverse; /* 最新消息在底部，但用 column-reverse + prepend */
      scroll-behavior: smooth;
    }
    .chat-messages-inner {
      display: flex; flex-direction: column; gap: 4px; padding-bottom: 8px;
    }

    /* 时间分隔线 */
    .chat-time-divider {
      text-align: center; padding: 12px 0 8px;
      font-family: var(--font-mono); font-size: 0.62rem; color: var(--ui-fg-muted);
      opacity: 0.7;
    }

    /* 系统消息 */
    .chat-system-msg {
      text-align: center; padding: 6px 0; font-size: 0.68rem; color: var(--ui-fg-muted);
      opacity: 0.6;
    }

    /* 单条消息行 */
    .chat-row {
      display: flex; gap: 10px; max-width: 78%; padding: 2px 0;
      animation: chat-slide-in 0.25s var(--ease-out);
    }
    @keyframes chat-slide-in {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .chat-row.self { flex-direction: row-reverse; align-self: flex-end; }
    .chat-row.other { align-self: flex-start; }

    /* 头像 */
    .chat-avatar {
      flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-weight: 700; font-size: 0.75rem; color: #fff;
      user-select: none; letter-spacing: 0.02em;
    }
    .chat-row.self .chat-avatar { background: #3b82f6; }
    .chat-row.other .chat-avatar { background: #6b7280; }

    /* 同一人连续发言时隐藏头像(占位) */
    .chat-row.continued .chat-avatar { visibility: hidden; }

    /* 消息体 */
    .chat-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .chat-sender-name {
      font-size: 0.7rem; color: var(--ui-fg-muted);
      padding: 0 4px;
    }
    .chat-row.continued .chat-sender-name { display: none; }

    /* 气泡 */
    .chat-bubble {
      padding: 9px 14px; border-radius: 16px; font-size: 0.88rem;
      line-height: 1.55; word-break: break-word; white-space: pre-wrap;
      position: relative;
    }
    .chat-row.other .chat-bubble {
      background: var(--ui-bg); color: var(--ui-fg);
      border-top-left-radius: 4px;
    }
    .chat-row.self .chat-bubble {
      background: #2563eb; color: #fff;
      border-top-right-radius: 4px;
    }

    /* 时间戳 */
    .chat-msg-time {
      font-size: 0.6rem; color: var(--ui-fg-muted); padding: 0 4px;
      display: none;
    }
    .chat-row:last-child .chat-msg-time,
    .chat-row:not(.continued):last-child .chat-msg-time { display: block; }
    /* 每条消息末尾显示时间(仅最后一条/非连续的最后) */
    .chat-row.continued + .chat-row:not(.continued) .chat-msg-time,
    .chat-row:not(.continued):has(+ .chat-row.continued) .chat-msg-time { display: none; }

    /* ─── Chat Input (QQ/WeChat Style, fixed bottom) ─── */
    .chat-input-bar {
      display: flex; gap: var(--gap-sm); padding: var(--gap-md);
      border-top: var(--ui-border) solid var(--ui-line);
      background: var(--ui-bg);
    }
    .chat-input-bar textarea {
      flex: 1; min-height: 40px; max-height: 120px; padding: 10px 14px;
      background: var(--ui-surface); color: var(--ui-fg);
      border: none; border-radius: 20px;
      font-family: var(--font-sans); font-size: 0.85rem; resize: none;
      outline: none; line-height: 1.4;
    }
    .chat-input-bar textarea:focus {
      box-shadow: 0 0 0 2px rgba(37,99,235,0.3);
    }
    .chat-input-bar textarea::placeholder { color: var(--ui-fg-muted); }
    .chat-send-btn {
      width: 40px; height: 40px; border-radius: 50%; border: none;
      background: #2563eb; color: #fff; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      font-size: 1rem; flex-shrink: 0; transition: all var(--dur-fast);
      align-self: flex-end;
    }
    .chat-send-btn:hover { background: #1d4ed8; transform: scale(1.05); }
    .chat-send-btn:active { transform: scale(0.95); }
    .chat-send-btn:disabled { opacity: 0.4; cursor: not-allowed; }

    /* ─── Members Panel ─── */
    .group-members-panel {
      background: var(--ui-surface); border: var(--ui-border) solid var(--ui-line);
      display: flex; flex-direction: column; overflow: hidden;
    }
    .group-members-header {
      font-family: var(--font-mono); font-size: 0.65rem; text-transform: uppercase;
      letter-spacing: 0.1em; color: var(--ui-fg-muted); padding: var(--gap-sm) var(--gap-md);
      border-bottom: var(--ui-border) solid var(--ui-line);
    }
    .group-members-list-inner { flex: 1; overflow-y: auto; }
    .group-member-item {
      padding: 10px var(--gap-md); font-size: 0.8rem; border-bottom: var(--ui-border) solid var(--ui-line);
      display: flex; align-items: center; justify-content: space-between; gap: 8px;
    }
    .group-member-item:last-child { border-bottom: none; }
    .group-member-item .mem-avatar {
      width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-weight: 700; font-size: 0.6rem; color: #fff; background: #6b7280;
    }
    .group-member-item .mem-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
    .group-member-item .mem-name { font-size: 0.8rem; }
    .group-member-role {
      font-family: var(--font-mono); font-size: 0.58rem; color: var(--ui-fg-muted);
      border: var(--ui-border) solid var(--ui-line); padding: 1px 6px; white-space: nowrap;
    }
    .mem-online-dot {
      width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
    }
    .mem-online-dot.online { background: #4ade80; }
    .mem-online-dot.offline { background: transparent; }

    .btn-tiny {
      font-family: var(--font-mono); font-size: 0.6rem; padding: 2px 8px;
      background: transparent; border: var(--ui-border) solid var(--ui-line);
      color: var(--ui-fg-muted); cursor: pointer; transition: all var(--dur-fast);
    }
    .btn-tiny:hover { border-color: var(--ui-fg); color: var(--ui-fg); }

    /* typing indicator */
    .chat-typing {
      padding: 4px 14px; font-size: 0.68rem; color: var(--ui-fg-muted);
      font-style: italic; display: none;
    }

    @media (max-width: 768px) {
      .group-grid { grid-template-columns: 1fr; }
      .group-detail-layout { grid-template-columns: 1fr; height: calc(100vh - 180px); }
      .group-members-panel { display: none; }
      .chat-row { max-width: 90%; }
    }