/* =========================================================
   Golden AI - Auth UI
   El backend sigue siendo la autoridad real de permisos.
   Estas reglas solamente evitan flashes visuales.
   ========================================================= */

/* Si todavía no conocemos ni siquiera una pista del rol,
   ocultamos únicamente la navegación y el perfil. */
html.auth-pending:not(.ui-role-admin):not(.ui-role-principal):not(.ui-role-guest) .nav-scroll,
html.auth-pending:not(.ui-role-admin):not(.ui-role-principal):not(.ui-role-guest) .profile {
  visibility: hidden !important;
}

/* PRINCIPAL nunca debe ver Settings / Usuarios durante carga. */
html.ui-role-principal .nav-item[data-page="settings"],
html.ui-role-principal .nav-item[data-page="users"] {
  display: none !important;
}

/* GUEST solo ve Assistant y Research durante la carga. */
html.ui-role-guest .nav-item:not([data-page="assistant"]):not([data-page="research"]) {
  display: none !important;
}

/* Para no mostrar Golden Home antes de sustituirlo
   por el usuario real, ocultamos solo el footer mientras valida. */
html.auth-pending .profile {
  visibility: hidden !important;
}

/* =========================================================
   Footer de usuario
   ========================================================= */

.profile {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;

  min-height: 58px !important;
  height: auto !important;

  overflow: visible !important;
}

.profile .avatar {
  flex: 0 0 auto;
}

.profile .profile-copy {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: auto !important;
  overflow: visible !important;
}

.profile .profile-name {
  display: block !important;
  line-height: 1.25 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile .profile-company {
  display: block !important;
  line-height: 1.3 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile [data-golden-logout] {
  flex: 0 0 38px !important;
  width: 38px !important;
  height: 38px !important;
  margin-left: auto !important;
}