/* 平台联机协作样式：二级页签、平台房间、成员权限、邀请列表。
   只使用 --rpen-* 设计 token 并回落到 styles.css 本体值，避免写死主题色。 */

/* ── 二级页签 ── */
.collab-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rpen-gap, 4px);
  margin: 10px 12px 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rpen-border, var(--line));
}
.collab-tabs > button {
  flex: 0 1 auto;
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid var(--rpen-border, var(--line));
  border-radius: var(--rpen-radius, 1px);
  background: var(--rpen-surface-alt, #282828);
  color: var(--rpen-muted, var(--muted));
  white-space: normal;
}
.collab-tabs > button:hover { color: var(--rpen-accent-text, var(--accent)); border-color: var(--rpen-accent, var(--accent)); }
.collab-tabs > button.active,
.collab-tabs > button[aria-selected="true"] {
  color: var(--rpen-accent-text, var(--accent));
  border-color: var(--rpen-accent, var(--accent));
  background: var(--rpen-accent-soft, color-mix(in srgb, var(--rpen-accent, var(--accent)) 18%, transparent));
}
.collab-tabs > button:disabled { opacity: .4; cursor: not-allowed; }

/* ── 平台页签骨架 ── */
.platform-collab { padding-bottom: 8px; }
.platform-collab > .hint,
.platform-collab .field { margin: 10px 12px; }
.platform-collab .field { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.platform-collab .field select { min-width: 0; flex: 1 1 160px; }
.platform-collab .collaboration-actions { padding: 6px 12px; }
.platform-collab .collaboration-actions > button { flex: 0 1 auto; }
.platform-collab-account { color: var(--rpen-accent-text, var(--accent)); }
.platform-collab-status { min-height: 1.4em; }
.platform-collab-setup,
.platform-collab-connected { display: flex; flex-direction: column; }
.platform-collab-room { margin: 10px 12px 2px; color: var(--rpen-text, #f0f0f0); font-weight: 600; overflow-wrap: anywhere; }
.platform-collab-self,
.platform-collab-presence { margin: 2px 12px; }

/* ── 自动升级提示条 ── */
.platform-collab-auto {
  margin: 8px 12px;
  padding: 8px 10px;
  border: 1px solid var(--rpen-accent, var(--accent));
  border-left-width: 3px;
  border-radius: var(--rpen-radius-panel, 4px);
  background: var(--rpen-accent-soft, color-mix(in srgb, var(--rpen-accent, var(--accent)) 14%, transparent));
  overflow-wrap: anywhere;
}
.platform-collab-auto-row { display: flex; flex-direction: column; gap: 4px; }
.platform-collab-auto-row > strong { color: var(--rpen-accent-text, var(--accent)); }
.platform-collab-auto-info { color: var(--rpen-muted, var(--muted)); font-size: 12px; }
.platform-collab-auto .collaboration-actions { padding: 4px 0 0; }

/* ── 加入邀请 / 邀请链接详情 ── */
.platform-collab details { margin: 8px 12px; padding: 6px 8px; border: 1px solid var(--rpen-border, var(--line)); border-radius: var(--rpen-radius-panel, 4px); background: var(--rpen-surface-alt, #282828); }
.platform-collab details > summary { cursor: pointer; color: var(--rpen-accent-text, var(--accent)); }
.platform-collab details input { width: 100%; margin: 6px 0; box-sizing: border-box; }

/* ── 邀请列表 ── */
.platform-collab-invites { margin: 10px 12px; }
.platform-collab-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.platform-collab-row > strong { color: var(--rpen-text, #f0f0f0); }
.invite-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.invite-row,
.friend-list-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 8px;
  border: 1px solid var(--rpen-border, var(--line));
  border-radius: var(--rpen-radius, 2px);
  background: var(--rpen-input, #383838);
  overflow-wrap: anywhere;
}
.invite-row > span,
.platform-collab .friend-list-row > span { flex: 1 1 140px; min-width: 0; }
.invite-row > button { flex: 0 0 auto; }
.invite-remaining { flex: 0 0 auto; color: var(--rpen-muted, var(--muted)); font-variant-numeric: tabular-nums; }
.platform-collab .friend-list-row { cursor: pointer; }
.platform-collab .friend-list-row.offline { opacity: .55; cursor: not-allowed; }
.platform-collab .friend-list-row > input[type="checkbox"] { flex: 0 0 auto; }
.friend-online-badge { flex: 0 0 auto; margin-left: auto; padding: 1px 6px; border: 1px solid var(--rpen-border, var(--line)); border-radius: 8px; font-size: 11px; line-height: 1.5; }
.friend-online-badge.online { color: #6ed6a5; border-color: #6ed6a5; }
.friend-online-badge.offline { color: var(--rpen-muted, var(--muted)); }
.friend-online-badge.unknown { color: var(--rpen-muted, var(--muted)); border-style: dashed; }
.invite-picker-status { margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.platform-collab-pager { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 8px 0; color: var(--rpen-muted, var(--muted)); }

/* ── 成员列表 ── */
.platform-collab-members,
.collab-requests { display: flex; flex-direction: column; gap: 4px; margin: 10px 12px; }
.platform-collab-members > strong,
.collab-requests > strong { color: var(--rpen-text, #f0f0f0); margin-bottom: 2px; }
.collab-member,
.collab-request {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 8px;
  border: 1px solid var(--rpen-border, var(--line));
  border-radius: var(--rpen-radius, 2px);
  background: var(--rpen-surface-alt, #282828);
}
.collab-member > strong { flex: 1 1 120px; min-width: 0; overflow-wrap: anywhere; }
.collab-member > small { color: var(--rpen-muted, var(--muted)); }
.collab-member-permission { flex: 0 1 130px; min-width: 0; }
.collab-request > span { flex: 1 1 120px; min-width: 0; overflow-wrap: anywhere; }
.collab-request label { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.collab-request label input[type="checkbox"] { width: auto; }

/* ── 小屏：页签与按钮换行更紧凑 ── */
@media (max-width: 560px) {
  .collab-tabs > button { flex: 1 1 45%; }
  .platform-collab .collaboration-actions > button { flex: 1 1 45%; }
}
/* ── 全屏联机邀请 / 加入申请弹窗（面板关闭也要能弹） ── */
.collab-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #000b;
  backdrop-filter: blur(2px);
}
.collab-overlay[hidden] { display: none; }
.collab-overlay-card {
  width: min(520px, calc(100vw - 40px));
  max-height: calc(100vh - 60px);
  overflow: auto;
  padding: 22px 24px;
  border: 1px solid var(--rpen-accent, var(--accent));
  border-radius: var(--rpen-radius-panel, 6px);
  background: var(--rpen-elevated, #202020);
  color: var(--rpen-text, #f0f0f0);
  box-shadow: 0 18px 60px #000c;
}
.collab-overlay-card h2 {
  margin: 0 0 10px;
  font-size: 20px;
  color: var(--rpen-accent-text, var(--accent));
}
.collab-overlay-title { margin: 0 0 6px; font-weight: 600; overflow-wrap: anywhere; }
.collab-overlay-detail { margin: 0 0 16px; line-height: 1.7; overflow-wrap: anywhere; }
.collab-overlay-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.collab-overlay-actions > button { flex: 1 1 auto; min-width: 110px; }
.collab-overlay-actions > button.primary { flex: 1 1 100%; }
.collab-overlay-actions label { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 100%; white-space: normal; }

/* 邀请页面：同时收到多条邀请时，左侧是切换列表，右侧只展开当前这一条。 */
.collab-overlay-card.collab-invite-card { display: flex; align-items: stretch; width: min(660px, calc(100vw - 40px)); padding: 0; overflow: hidden; }
.collab-invite-rail {
  flex: 0 0 172px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 10px;
  border-right: 1px solid var(--rpen-border, var(--line));
  background: var(--rpen-surface-alt, #282828);
  max-height: calc(100vh - 60px);
  overflow: auto;
}
.collab-invite-rail[hidden] { display: none; }
.collab-invite-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--rpen-border, var(--line));
  border-radius: var(--rpen-radius, 2px);
  background: var(--rpen-input, #383838);
  color: var(--rpen-muted, var(--muted));
  text-align: left;
  font: inherit;
  cursor: pointer;
  white-space: normal;
}
.collab-invite-tab strong { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.collab-invite-tab small { font-size: 11px; opacity: .85; font-variant-numeric: tabular-nums; }
.collab-invite-tab.active {
  border-color: var(--rpen-accent, var(--accent));
  color: var(--rpen-accent-text, var(--accent));
  background: var(--rpen-accent-soft, color-mix(in srgb, var(--rpen-accent, var(--accent)) 18%, transparent));
}
.collab-invite-main { flex: 1 1 auto; min-width: 0; padding: 22px 24px; max-height: calc(100vh - 60px); overflow: auto; }
.collab-invite-countdown { margin: 0 0 14px; color: var(--rpen-accent-text, var(--accent)); font-size: 12px; font-variant-numeric: tabular-nums; }

/* 左下角协作房间浮窗：不切 pane 也能看到“已进入协作房间 · N 人”。
   touch-action:none 交给拖动自己处理，否则触摸屏会把拖动判成页面滚动（表现为“拖不动”）。 */
.collab-room-chip {
  position: fixed;
  left: 16px;
  bottom: 56px;
  z-index: 900;
  display: inline-flex;
  width: max-content;
  max-width: calc(100vw - 8px);
  padding: 0;
  border: 1px solid var(--rpen-accent, var(--accent));
  border-radius: 14px;
  background: var(--rpen-elevated, #202020);
  color: var(--rpen-accent-text, var(--accent));
  font-size: 12px;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.collab-room-chip > button { border: 0; background: transparent; color: inherit; font: inherit; padding: 6px 9px; min-width: 0; }
.collab-room-chip > button:first-child { touch-action: none; cursor: inherit; -webkit-user-drag: none; }
.collab-room-chip.dragging { cursor: grabbing; }
.collab-room-chip.dragging > button:first-child { cursor: grabbing; }
.collab-room-chip > button:last-child { cursor: pointer; }
.collab-room-chip[hidden] { display: none; }
.collab-room-chip:hover { background: #4d4632; }

.platform-collab-room-badge {
  margin: 8px 12px 0;
  padding: 6px 10px;
  border-left: 3px solid var(--rpen-accent, var(--accent));
  background: var(--rpen-accent-soft, color-mix(in srgb, var(--rpen-accent, var(--accent)) 14%, transparent));
  color: var(--rpen-accent-text, var(--accent));
  border-radius: var(--rpen-radius-panel, 4px);
}

@media (max-width: 560px) {
  .collab-overlay-card { padding: 16px; }
  .collab-overlay-card.collab-invite-card { padding: 0; flex-direction: column; }
  .collab-invite-rail {
    flex: 0 0 auto;
    flex-direction: row;
    gap: 6px;
    border-right: 0;
    border-bottom: 1px solid var(--rpen-border, var(--line));
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .collab-invite-tab { flex: 0 0 132px; }
  .collab-invite-main { padding: 16px; }
}