@layer components {
  /* AI apps people connected to a space, and how to connect one. */
  .connected-apps {
    display: grid;
    align-content: start;
    gap: 2rem;

    p { margin: 0; }

    .run-list { max-inline-size: 40rem; }

    .run__agent {
      min-inline-size: 0;
      overflow-wrap: anywhere;
    }

    /* A row's own display would keep it drawn while its disconnect is on its way. */
    .run[hidden] { display: none; }

    textarea.input {
      font-family: var(--font-mono);
      font-size: var(--text-sm);
      min-block-size: auto;
      resize: none;
      overflow-wrap: anywhere;
    }
  }

  .connected-apps__connect {
    display: grid;
    gap: 0.75rem;
    max-inline-size: 40rem;
  }

  .connected-apps__heading {
    margin: 0 0 0.75rem;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
  }

  .connected-apps__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--text-sm);
  }

  /* Disconnected apps are kept and listed after the connected ones, once there is one. */
  .connected-apps__disconnected:not(:has(.run)) { display: none; }

  .connected-apps .run--disconnected { color: var(--muted-foreground); }

  .connected-apps__error {
    font-size: var(--text-sm);
    color: var(--destructive);
  }

  /* Shown once no row is left, including one hidden while its disconnect is on its way. */
  .connected-apps__empty { display: none; }

  .connected-apps__list:not(:has(.run:not([hidden]))) .connected-apps__empty {
    display: block;
  }
}