/* ── Team ───────────────────────────────────────────────── */

/* .input and .select are width:100% by default, which makes them consume a
   whole flex row. Inside these rows they size to content instead. */
.invite-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
input.invite-row-input, .invite-row input.input { flex: 1 1 220px; width: auto; min-width: 0; }

.invite-row .btn { flex: none; }

/* ── AI access popover ──────────────────────────────────── */
/* One control, two skins: "field" sits in the invite row and matches its
   inputs; "chip" is a pill inside a member row. Both float the same panel
   instead of expanding inline, which used to shove the whole row around. */

.access-pop { position: relative; flex: none; }
.access-pop > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; white-space: nowrap; }
.access-pop > summary::-webkit-details-marker { display: none; }
.access-pop > summary::after {
  content: "";
  width: 6px; height: 6px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.55;
  transition: transform 0.16s var(--ease);
}
.access-pop[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }

.access-pop.is-field > summary { border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 14px; font-size: 14px; background: var(--bg-raised); transition: border-color 0.16s var(--ease); }
.access-pop.is-field > summary:hover, .access-pop.is-field[open] > summary { border-color: var(--line-hi); }

.access-pop.is-chip > summary { padding: 5px 12px; border-radius: var(--r-pill); border: 1px solid var(--line); font-size: 12.5px; color: var(--subtle); transition: all 0.16s var(--ease); }
.access-pop.is-chip > summary:hover, .access-pop.is-chip[open] > summary { color: var(--text); border-color: var(--line-hi); }
.access-pop.is-chip.is-scoped > summary { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

/* An admin's scope is a fact, not a control — same pill, no affordance. */
.chip.access-chip-fixed { flex: none; color: var(--subtle); }

.access-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
  width: min(300px, 84vw);
  padding: 8px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}
/* Both triggers sit toward the card's right edge; a left-aligned panel would
   run past the card and clip at the viewport. */
.access-pop.is-chip .access-panel,
.access-pop.is-field .access-panel { left: auto; right: 0; }

.access-choice { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border-radius: 10px; cursor: pointer; }
.access-choice:hover { background: var(--surface); }
.access-choice input { margin-top: 3px; accent-color: var(--accent); }
.access-choice-text { display: grid; gap: 2px; font-size: 13.5px; }
.access-choice-text small { color: var(--muted); font-size: 12px; }

.access-agent-list { max-height: 168px; overflow: auto; margin-top: 6px; padding-top: 4px; border-top: 1px solid var(--line); }
/* When "All AIs" is chosen the list is a preview, not the answer — dim it.
   Still clickable: ticking an AI flips the choice to "selected". */
.access-pop:not(.is-scoped) .access-agent-list { opacity: 0.55; }
.access-agent { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; font-size: 13.5px; }
.access-agent:hover { background: var(--surface); }
.access-agent input { accent-color: var(--accent); flex: none; }
.access-agent-name { overflow-wrap: anywhere; }
.access-empty { padding: 8px 10px; font-size: 12.5px; color: var(--muted); }

.access-pop-foot { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 8px 2px 2px 10px; border-top: 1px solid var(--line); }
.access-pop-foot .btn { margin-left: auto; }
.access-pop-hint { font-size: 12px; color: var(--danger); }
/* `select.` rather than `.role-select` alone: the generic `.select { width:100% }`
   is declared later in dashboard.css and would otherwise win at equal specificity. */
select.role-select { width: auto; min-width: 132px; flex: none; }

.member-list { display: flex; flex-direction: column; gap: 2px; }

.member-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.member-row:last-child { border-bottom: none; }
.member-row.is-pending { opacity: 0.72; }

.member-avatar {
  width: 34px; height: 34px;
  border-radius: 11px;
  display: grid; place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 600;
  flex: none;
}

.member-avatar.is-pending { background: var(--surface-hi); color: var(--subtle); }
.member-avatar svg { width: 14px; height: 14px; }

.member-main { flex: 1; min-width: 0; }
/* Emails, hostnames and error strings are unbreakable tokens; without a break
   opportunity one long member row scrolls the whole panel sideways. */
.member-name { font-size: 14.5px; font-weight: 500; overflow-wrap: anywhere; }
.member-meta { font-size: 12.5px; color: var(--subtle); overflow-wrap: anywhere; }

/* Phones: avatar + name + email + role select + remove can't share 360px.
   Identity keeps the first line; the controls wrap beneath it, indented past
   the avatar (34px + 13px gap) so the columns line up. */
@media (max-width: 700px) {
  .invite-banner { flex-wrap: wrap; }
  .member-row { flex-wrap: wrap; row-gap: 8px; }
  .member-main { min-width: calc(100% - 47px); }
  /* Whatever wraps under the identity line is indented past the avatar
     (34px + 13px gap) so the columns line up. Direct children only — the
     admin Users rows nest their select inside a .row that already carries
     the indent, and a second margin would double it. */
  .member-row > select.role-select,
  .member-row > .chip,
  .member-row > .icon-btn,
  .member-row > .row,
  .member-row > .small { margin-left: 47px; }
  .member-row > .access-pop { margin-left: 47px; }
  .member-row > .access-pop ~ select.role-select,
  .member-row > .access-pop ~ .icon-btn { margin-left: 0; }
  .member-row > select.role-select { flex: 1 1 auto; }
  /* A trigger can sit anywhere in a wrapped row, so an anchored panel will
     clip at one screen edge or the other. Detach it: a small fixed sheet,
     centered in the viewport, dismissed by the same outside tap. */
  .access-panel {
    position: fixed;
    left: 12px; right: 12px;
    top: max(84px, 16vh);
    width: auto;
    box-shadow: var(--shadow-lg);
  }
}

.invite-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* ── Groups ─────────────────────────────────────────────── */

.group-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--bg-raised);
}

.group-head { display: flex; align-items: center; gap: 10px; }
.group-name { font-size: 14px; font-weight: 500; flex: 1; }
.group-name.is-fixed { color: var(--muted); }
.group-name-input { flex: 1; padding: 8px 12px; font-size: 14px; }

.source-groups { display: inline-flex; gap: 4px; flex-wrap: wrap; flex: none; }

.group-chip {
  padding: 4px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--subtle);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.16s var(--ease);
}

.group-chip:hover { color: var(--text); border-color: var(--line-hi); }
.group-chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }