/* Teams — top-nav popover + (Phase B) collaborator management. Vanilla, no build.
   Reads the Fluent tokens from theme.css. The Teams icon lives in .vx-product-nav
   (Chat → Teams → Ask AI); the popover floats top-level above any module. */

.vx-teams-nav { position: relative; }
.vx-teams-nav.is-open {
  background: var(--brand-tint, #e8ebfa) !important;
  color: var(--brand-primary, #5b5fc7) !important;
}

.vx-teams-pop-backdrop { position: fixed; inset: 0; z-index: 1390; background: transparent; }
.vx-teams-pop {
  position: fixed; z-index: 1391; width: 340px; max-width: calc(100vw - 24px);
  background: var(--bg-surface, #fff); border: 1px solid var(--stroke-default, #e0e0e0);
  border-radius: var(--radius-card, 12px);
  box-shadow: var(--shadow-8, 0 4px 16px rgba(0, 0, 0, .16));
  font: var(--font-body, 400 14px/20px "Segoe UI", system-ui, sans-serif);
  color: var(--text-primary, #242424); overflow: hidden;
}

.vx-teams-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; border-bottom: 1px solid var(--stroke-subtle, #ededeb); }
.vx-teams-head h3 { margin: 0; font-size: 15px; font-weight: 600; }
.vx-teams-head .sub { font-size: 12px; color: var(--text-secondary, #616161); margin-top: 1px; }

.vx-teams-list { max-height: 320px; overflow: auto; padding: 6px; }
.vx-team-row { display: flex; align-items: center; gap: 11px; padding: 8px 9px; border-radius: 8px; }
.vx-team-row:hover { background: var(--bg-subtle, #f5f4f9); }
.vx-team-av { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 13px; }
.vx-team-meta { flex: 1; min-width: 0; }
.vx-team-name { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vx-team-name .you { color: var(--text-tertiary, #707070); font-weight: 400; }
.vx-team-sub { font-size: 11.5px; color: var(--text-secondary, #616161); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vx-team-badge { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; flex: 0 0 auto; }
.vx-team-badge.role { background: var(--brand-tint, #e8ebfa); color: var(--brand-foreground, #4f52b2); }
.vx-team-badge.pending { background: #fff4e5; color: #b45309; }

.vx-teams-foot { padding: 11px 14px; border-top: 1px solid var(--stroke-subtle, #ededeb); display: flex; flex-direction: column; gap: 8px; }
.vx-teams-invite {
  width: 100%; font: inherit; font-weight: 600; font-size: 13px; background: var(--brand-primary, #5b5fc7); color: #fff;
  border: 0; border-radius: 8px; padding: 9px 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.vx-teams-invite:hover { background: var(--brand-hover, #4f52b2); }
.vx-teams-manage { background: none; border: 0; color: var(--brand-foreground, #4f52b2); font: inherit; font-size: 12.5px; cursor: pointer; text-align: center; padding: 2px; }
.vx-teams-manage:hover { text-decoration: underline; }

.vx-teams-empty { padding: 26px 20px 6px; text-align: center; }
.vx-teams-empty .ic { width: 50px; height: 50px; border-radius: 50%; margin: 0 auto 11px; background: var(--brand-tint, #e8ebfa); color: var(--brand-primary, #5b5fc7); display: flex; align-items: center; justify-content: center; }
.vx-teams-empty .t { font-weight: 600; font-size: 14px; }
.vx-teams-empty .d { font-size: 12.5px; color: var(--text-secondary, #616161); margin: 5px 0 0; line-height: 1.5; }
.vx-teams-loading, .vx-teams-error { padding: 22px; text-align: center; color: var(--text-secondary, #616161); font-size: 13px; }

/* head back-button + sections */
.vx-teams-head { gap: 10px; }
.vx-teams-back { background: none; border: 0; cursor: pointer; color: var(--text-secondary, #616161); padding: 4px; margin: -4px 0 -4px -4px; display: inline-flex; border-radius: 6px; }
.vx-teams-back:hover { background: var(--bg-subtle, #f5f4f9); color: var(--text-primary, #242424); }
.vx-teams-section { padding: 9px 15px 3px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--text-tertiary, #707070); }

/* invitation accept/decline + manage mini buttons */
.invite-row { padding: 9px; }
.vx-inv-actions, .vx-manage-ctl { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.vx-mini { font: inherit; font-size: 11.5px; font-weight: 600; padding: 5px 10px; border-radius: 7px; cursor: pointer; border: 1px solid var(--stroke-default, #e0e0e0); background: #fff; color: var(--text-secondary, #444); }
.vx-mini:hover { background: var(--bg-subtle, #f5f4f9); }
.vx-mini.ok { background: var(--brand-primary, #5b5fc7); color: #fff; border-color: var(--brand-primary, #5b5fc7); }
.vx-mini.ok:hover { background: var(--brand-hover, #4f52b2); }
.vx-mini.danger:hover { color: #b42318; border-color: #f0c4bf; background: #fef3f2; }

/* role select in manage view */
.vx-role-sel { font: inherit; font-size: 12px; padding: 4px 6px; border-radius: 7px; border: 1px solid var(--stroke-default, #e0e0e0); background: #fff; color: var(--text-primary, #242424); }

/* invite form */
.vx-teams-form { padding: 12px 15px 15px; display: flex; flex-direction: column; gap: 11px; }
.vx-teams-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text-secondary, #616161); }
.vx-teams-form input, .vx-teams-form select { font: inherit; font-size: 13.5px; font-weight: 400; color: var(--text-primary, #242424); padding: 9px 11px; border: 1px solid var(--stroke-default, #e0e0e0); border-radius: 8px; outline: none; }
.vx-teams-form input:focus, .vx-teams-form select:focus { border-color: var(--brand-primary, #5b5fc7); }
.vx-teams-form .vx-teams-invite { margin-top: 2px; }
.vx-teams-hint { font-size: 11.5px; color: var(--text-tertiary, #707070); line-height: 1.5; text-align: center; }
.vx-teams-msg { font-size: 12.5px; color: var(--text-secondary, #616161); padding: 0 15px; }
.vx-teams-msg.err { color: #b42318; }
.vx-teams-form .vx-teams-msg { padding: 0; }